/* footer-manager-styles-inline-css */
.footer { background-color: #ffffff !important; color: #000000 !important; padding: 4em; margin-top: -1px; margin-bottom: -32px; box-sizing: border-box; } .footer p, .footer div, .footer span, .footer address, .footer li { color: #000000 !important; } .footer__inner { width: 100%; max-width: 1400px; margin: 0 auto !important; } .footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px; margin-bottom: 60px; } .footer__title { font-size: 18px; font-weight: 500; color: #000000 !important; margin: 0 0 24px 0; } .footer__logo { width: 250px !important; max-width: 100% !important; height: auto !important; display: block; margin-bottom: 20px; } .footer ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } .footer li { position: relative; margin-bottom: 8px !important; list-style: none !important; } .footer a { color: inherit !important; text-decoration: none !important; transition: 0.3s ease; position: relative; display: inline-block; font-weight: 300 !important; } .footer a:not(.footer__social-link)::after { content: ''; position: absolute; width: 0; height: 1px; bottom: -2px; left: 0; background-color: #000000; transition: width 0.3s; } .footer a:hover:not(.footer__social-link)::after { width: 100%; } .footer__social { display: flex !important; gap: 16px !important; flex-wrap: wrap; align-items: center; } .footer__social img { width: 25px; height: 25px; display: block; transition: transform 0.2s ease-in-out; } .footer__social a:hover img { transform: scale(1.15); } .footer .footer__submenu { display: none; padding: 10px 0 10px 15px !important; border-left: 1px solid rgba(255,255,255,0.2); margin-top: 5px !important; } .footer__menu--has-sub > a::after { content: ''; display: inline-block; width: 22px; height: 22px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 13.2L16.6 8.6L18 10L12 16L6 10L7.4 8.6L12 13.2Z" fill="white"/></svg>') no-repeat center center; background-size: contain; margin-left: 6px; vertical-align: middle; transition: transform 0.3s; } .footer__menu--has-sub.is-active > a::after { transform: rotate(180deg); } .footer__menu--has-sub.is-active > .footer__submenu { display: block !important; } .footer__bottom { padding-top: 40px; text-align: center; border-top: 1px solid rgba(255,255,255,0.1); font-size: 10px !important; opacity: 0.9; } @media (max-width: 1024px) { .footer { padding: 2em; } .footer__grid { grid-template-columns: repeat(min(4, 2), 1fr); } .footer__logo { width: 200px !important; } .footer__bottom { text-align: left !important; } } @media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; gap: 32px !important; } .footer__logo { width: 150px !important; } .footer__social img { width: 24px !important; height: 24px !important; } .footer__bottom { text-align: left !important; } } .site-footer, #colophon { display: none !important; } /*# sourceURL=footer-manager-styles-inline-css */ /* inline */
html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; /* Verhindert Konflikte mit nativem Scrollen */ } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; }
.nav-link { padding: 10px; color: #333; text-decoration: none; transition: color 0.3s ease; } .nav-link:hover { color: #007bff; } /* inline */
.section-lines { position: relative; max-width: min(100%, 1400px); margin: 0 auto;
} .section-lines::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; /* Verhindert, dass die Linien beim Klicken stören */ /* Wir rücken die äußeren Linien 1px ein, damit sie sichtbar sind */ background-image: linear-gradient(90deg, #e0e0e0 1px, transparent 1px), linear-gradient(90deg, #e0e0e0 1px, transparent 1px), linear-gradient(90deg, #e0e0e0 1px, transparent 1px); /* Links (1px eingerückt), Mitte, Rechts (1px eingerückt) */ background-position: 1px 0, 50% 0, calc(100% - 1px) 0; background-size: 1px 100%; background-repeat: no-repeat; /* Deckkraft für Dezentheit */ opacity: 0.25;
} /* inline */
@media (max-width: 767px) { /* Macht versteckte Elemente sofort sichtbar */ .is-hidden { visibility: visible !important; } /* Deaktiviert die Animationen selbst */ .animated { animation: none !important; transition: none !important; }
} /* inline */
.img-hover:hover { transform: scale(1.03);
} /* inline */
.title-1 { font-size: var(--font-size-h1); line-height: 1.2;
} .title-2 { font-size: var(--font-size-h2); line-height: 1.2;
} .title-3 { font-size: var(--font-size-h3); line-height: 1.2;
} /* 5. TEXT-ELEMENTE & KLASSEN */
p, a, b, strong, small, .text-body, .text-small { font-family: var(--font-body); line-height: 1.6;
} .text-body { font-size: var(--font-size-body); line-height: 1.2;
} .text-small { font-size: clamp(0.8rem, 1.5vw, 0.9rem); line-height: 1.2;
} ul { font-size: var(--font-size-body) !important;
} /* Links, Fettgedrucktes und Kursives erben automatisch die Figtree */
a, b, strong, i, em { font-family: inherit; font-weight: 600; /* Figtree sieht mit 600 oft besser aus als Standard-Bold */
} /* Elementor Header ausblenden */
.site-header { display: none !important;
} /* Elementor Header ausblenden */
.site-footer { display: none !important;
} /* uniform-content-images-css */
@media (min-width: 992px) { :root { --uniform-content-img-height: 320px; } /* Leistungen-Grid (Startseite) */ .svc-grid .svc-img { height: var(--uniform-content-img-height); min-height: var(--uniform-content-img-height); max-height: var(--uniform-content-img-height); overflow: hidden; } .svc-grid .svc-card--lead .svc-img { flex: 0 0 var(--uniform-content-img-height); height: var(--uniform-content-img-height); max-height: var(--uniform-content-img-height); } .svc-grid .svc-img img { width: 100% !important; height: 100% !important; min-height: 100% !important; object-fit: cover !important; object-position: center center !important; } /* Elementor-Inhaltsbilder */ .page-root .w-img .w-inner img.img-fluid { width: 100% !important; height: var(--uniform-content-img-height) !important; min-height: var(--uniform-content-img-height) !important; max-height: var(--uniform-content-img-height) !important; object-fit: cover !important; object-position: center center !important; } /* Kleine Bilder (Profil, Icons) ausnehmen */ .page-root .w-img .w-inner img.img-fluid[width="102"], .page-root .w-img .w-inner img.img-fluid[width="54"], .page-root .w-img .w-inner img[width="25"], .page-root .w-img .w-inner img[width="24"] { width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; object-fit: contain !important; } /* Hero: Blob-Maske & Elementor-Höhen nicht überschreiben */ .page-root .sec-zielgruppe__img .w-inner img.img-fluid, .page-root .sec-hero .w-img img.img-fluid, .page-root .hero-gallery .hero-gallery__item { min-height: 0 !important; height: 100% !important; } .page-root .hero-gallery img, .page-root .sec-hero__gallery-col .hero-gallery img { width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: none !important; object-fit: cover !important; } .page-root .sec-zielgruppe__img img { height: 450px !important; min-height: 450px !important; max-height: 450px !important; }
} /* read-more-motion-css */
.read .read__content { display: block; line-height: 1.8;
} .read .read__visible,
.read .read__dots { display: inline;
} .read__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(0.22, 1, 0.36, 1);
} .read__panel.read--open { grid-template-rows: 1fr;
} .read__panel-inner { overflow: hidden; min-height: 0;
} .read__hidden { display: block; opacity: 0; transition: opacity 0.35s ease 0.06s;
} .read__panel.read--open .read__hidden { opacity: 1; padding-top: 0.35em;
} .read__toggle { cursor: pointer; display: inline-block !important; margin-top: 0.65rem !important; user-select: none; border: none; background: none; padding: 0; font: inherit; text-align: left; transition: color 0.2s ease, opacity 0.2s ease;
} .read__toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 3px;
} .read.read--busy .read__toggle { pointer-events: none; opacity: 0.65;
} .read--expand { cursor: pointer;
} .read--expand:focus-visible { outline: 1px solid rgba(184, 150, 106, 0.55); outline-offset: 2px;
} @media (prefers-reduced-motion: reduce) { .read__panel, .read__hidden { transition: none !important; }
} /* uniform-site-spacing-css */
:root { --font-body: "Figtree", sans-serif; --font-heading: "Fraunces", serif; --bl-gold: #977944; --bl-gold-light: #caba8b; --bl-cream: #fbfaf2; --ui-surface: #fafafa; --ui-border: #c4c4c4; --bl-radius-lg: 32px; --bl-radius-md: 16px; --ui-space-section-y: clamp(3rem, 5vw, 6rem); --bl-space-section-x: clamp(1.25rem, 4vw, 4rem); --ui-space-gap: clamp(1.5rem, 3vw, 4rem); --ui-space-stack: clamp(1rem, 2vw, 1.5rem); --bl-space-inline: clamp(1rem, 2vw, 1.5rem); /* Fluid type scale: 320px (20rem) → 1200px (75rem); Tablet ~768px ergibt sich aus vw */ --bl-vp-min: 20rem; --bl-vp-span: 55rem; --font-size-body: 1rem; --font-size-h1: clamp(2.5rem, calc(2.5rem + (100vw - var(--bl-vp-min)) / var(--bl-vp-span)), 3.5rem); --font-size-h2: clamp(1.5rem, calc(1.5rem + (100vw - var(--bl-vp-min)) / 110), 2rem); --font-size-h3: clamp(1.15rem, calc(1.15rem + (100vw - var(--bl-vp-min)) / 275), 1.35rem);
} html { scroll-padding-top: 7.5rem;
} body { font-family: var(--font-body); font-size: var(--font-size-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
} /* Typografie-Rhythmus (Fraunces) + fluid scale via :root-Variablen */
.title-1,
.title-2,
.title-3,
.w-head h1.heading,
.w-head h2.heading,
.w-head h3.heading,
.page-root h1.heading,
.page-root h2.heading,
.page-root h3.heading { font-family: var(--font-heading); font-weight: 300; line-height: 1.2;
} h1,
.w-head h1.heading,
.page-root h1.heading { font-size: var(--font-size-h1) !important;
} /* Hero/Sektion: .title-1 am Widget, Markup oft h2 */
.title-1 .heading,
.widget.title-1 .heading { font-size: var(--font-size-h1) !important;
} h2,
.title-2,
.w-head h2.heading,
.page-root h2.heading,
.svc-grid h2,
.svc-body h2,
.footer h2 { font-size: var(--font-size-h2) !important;
} h3,
.title-3,
.w-head h3.heading,
.page-root h3.heading,
.svc-grid h3,
.svc-body h3,
.footer h3,
.faq__q,
.faq__title { font-size: var(--font-size-h3) !important;
} .title-2 { margin-block: 0 0.5em;
} p,
.text-body,
.w-text,
.w-text p,
.svc-text,
ul { font-size: var(--font-size-body) !important; line-height: 1.6 !important;
} .text-body { line-height: 1.6 !important;
} .text-small { font-size: clamp(0.875rem, 0.25vw + 0.8rem, 0.95rem); line-height: 1.5 !important;
} /* Elementor: horizontale Seitenränder überall einheitlich */
.page-root .wrap.row { --padding-left: var(--bl-space-section-x) !important; --padding-right: var(--bl-space-section-x) !important;
} /* Inhalts-Sektionen (nicht Hero, nicht Wortbanner): einheitliche vertikale Abstände */
.page-root > .wrap.row ~ .wrap.row:not(.sec-ticker) { --padding-top: var(--ui-space-section-y) !important; --padding-bottom: var(--ui-space-section-y) !important; --gap: var(--ui-space-gap) !important; --row-gap: var(--ui-space-gap) !important; --column-gap: var(--ui-space-gap) !important;
} /* Wortbanner (Laufband): nur 1em Abstand oben/unten */
.page-root > .wrap.row.sec-ticker,
.page-root .page-root.sec-ticker.wrap.row { --padding-top: 1em !important; --padding-bottom: 1em !important; --padding-left: 0 !important; --padding-right: 0 !important; --gap: 0 !important; --row-gap: 0 !important; --column-gap: 0 !important; padding-top: 1em !important; padding-bottom: 1em !important; padding-left: 0 !important; padding-right: 0 !important;
} .page-root .sec-ticker .slider-container { padding-top: 0 !important; padding-bottom: 0 !important;
} /* Direkt folgende Sektion: kein zusätzliches Top-Padding (Abstand kommt vom Banner) */
.page-root .sec-ticker + .wrap.row { --padding-top: 0 !important; padding-top: 0 !important;
} /* Innere Container & Grids */
.page-root .wrap.col { --gap: 0.75em !important; --row-gap: 0.75em !important; --column-gap: var(--ui-space-stack) !important;
} .page-root .wrap.grid { --row-gap: var(--ui-space-stack) !important; --column-gap: var(--ui-space-stack) !important;
} /* Widget-Abstände in Text-Spalten */
.page-root .wrap.col > .w-head + .w-text,
.page-root .wrap.col > .w-head + .w-shortcode { margin-top: 0.25em;
} /* Abstand Text/Überschrift → Button nur über schlankeres row-gap (kein doppeltes margin-top) */
.page-root .w-text + .w-btn,
.page-root .w-text + .w-button,
.page-root .w-head + .w-btn,
.page-root .w-head + .w-button,
.page-root .wrap.col > .w-head + .w-btn,
.page-root .wrap.col > .w-head + .w-button { margin-top: 0 !important;
} /* Leistungen-Grid & Karten: einheitlicher Spaltenabstand */
.svc-grid { gap: 1.5em !important; --gap: 1.5em !important; --row-gap: 1.5em !important; --column-gap: 1.5em !important;
} .page-root .wrap.grid { --gap: 1.5em !important; --row-gap: 1.5em !important; --column-gap: 1.5em !important; gap: 1.5em !important;
} .svc-card,
.page-root .wrap.col[style*="border-radius"] { border-radius: var(--bl-radius-lg);
} .faq { gap: var(--ui-space-stack) !important;
} /* Footer */
.footer { padding: var(--ui-space-section-y) var(--bl-space-section-x) !important; margin-top: 0 !important;
} .footer__grid { gap: clamp(2rem, 4vw, 3.75rem) !important; margin-bottom: clamp(2rem, 4vw, 3.75rem) !important;
} .footer__bottom { padding-top: clamp(1.5rem, 3vw, 2.5rem) !important;
} /* Buttons: kein Extra-Abstand (Flex-Gap + margin-top am Widget) */
.btn-wrap,
.btn-primary { margin-top: 0 !important;
} @media (max-width: 1024px) { :root { --ui-space-section-y: clamp(2.5rem, 6vw, 4rem); --ui-space-gap: clamp(1.25rem, 3vw, 2.5rem); } .footer { padding: var(--ui-space-section-y) clamp(1.25rem, 4vw, 2rem) !important; }
} @media (max-width: 767px) { :root { --ui-space-section-y: clamp(2rem, 7vw, 3rem); --bl-space-section-x: clamp(1rem, 4vw, 1.5rem); --ui-space-gap: clamp(1rem, 3vw, 1.5rem); --ui-space-stack: clamp(0.875rem, 2.5vw, 1.25rem); } html { scroll-padding-top: 5.5rem; } .faq__item { border-radius: 24px; }
} /* site-ui-fixes-css */
/* WhatsApp/CTA außerhalb der Nav (Nav-Styles in nav-link-styles-css) */
:not(.nav) .cta1-btn,
body > .cta1-btn { font-size: 16px !important; font-weight: 500 !important; height: 45px; padding: 0 15px !important; display: inline-flex !important; align-items: center !important; border-radius: 8px;
} /* Hintergrund-Linien dezenter (heller, weniger sichtbar) */
.section-lines::before,
.section-lines::before { background-image: linear-gradient(90deg, #e0e0e0 1px, transparent 1px), linear-gradient(90deg, #e0e0e0 1px, transparent 1px), linear-gradient(90deg, #e0e0e0 1px, transparent 1px) !important; opacity: 0.25 !important;
} /* Sektions-Container: volle Content-Breite statt 800px */
.section-lines,
.section-lines { max-width: min(100%, 1400px) !important; width: 100%;
} /* Founder-Quote: volle Breite, durchgehend weiß (nicht Sektions-Wechsel darüber) */
.block.sec-gruenderin.section-lines,
.block.sec-gruenderin.quote-founder { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
} .block.sec-gruenderin.section-lines::before { display: none !important;
} .sec-gruenderin,
.block.sec-gruenderin > .fx-wrap > .fx-layer,
.block.sec-gruenderin { background-color: #ffffff !important;
} /* Leistungen: weiß — abgesetzt von Sektion darunter */
.block.sec-leistungen,
.block.sec-leistungen > .fx-wrap > .fx-layer { background-color: #ffffff !important;
} body:not(.page) .block.sec-zielgruppe,
body:not(.page) .block.sec-zielgruppe > .fx-wrap > .fx-layer { background-color: #f5f0ea !important;
} /* Standort (4 Cards): einzige Sektion mit #faf7f4 */
.block.sec-standort,
.block.sec-standort > .fx-wrap > .fx-layer,
#standort.block { background-color: #faf7f4 !important;
} /* Leistungen-Karten: dezenter Farb-Hover (nur Desktop, Startseite) */
@media (max-width: 991px) { body:not(.page) #leistungen .svc-grid > .svc-card--lead, body:not(.page) #leistungen .svc-grid > .svc-card:first-child { padding: 0 !important; gap: 0 !important; } body:not(.page) #leistungen .svc-grid > .svc-card--lead .svc-content, body:not(.page) #leistungen .svc-grid > .svc-card--lead .svc-body { padding: 1.2em 1.5em !important; } .page #leistungen .svc-grid > .svc-card--lead .svc-content, .page #leistungen .svc-grid > .svc-card--lead .svc-body { padding: 1.45em 1.2em !important; }
} @media (min-width: 992px) { body:not(.page) #leistungen .svc-grid > .svc-card { transition: transform 0.3s ease, background-color 0.35s ease, border-color 0.35s ease !important; } body:not(.page) #leistungen .svc-grid > .svc-card:hover { background-color: #faf7f4 !important; border-color: #f0e8df !important; }
} /* Bewertungs-Slider: Pfeile ohne Hintergrund — Skalierung nur auf Icon-Span */
#rev-widget .rev-nav__btn { transform: none !important; transition: color 0.45s ease !important;
} #rev-widget .rev-nav__btn .rev-nav__icon { display: inline-block !important; line-height: 1 !important; transform: scale(1); transform-origin: center center; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform;
} #rev-widget .rev-nav__btn:hover .rev-nav__icon,
#rev-widget .rev-nav__btn:focus-visible .rev-nav__icon { transform: scale(1.15);
} #rev-widget .rev-nav__btn:focus,
#rev-widget .rev-nav__btn:active { background-color: transparent !important; border: none !important; outline: none !important; box-shadow: none !important;
} #rev-widget .rev-dot { transform: scale(1); transition: background 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
} /* Inhaber/in Name + Titel darunter (Startseite; Über-Uns via .quote-founder in atelier.css) */
body:not(.page) .page-root .block.quote__line.wrap.col { gap: 8px !important; --gap: 8px !important; --row-gap: 8px !important; --column-gap: 8px !important; align-items: flex-start !important;
} body:not(.page) .page-root .quote__line .w-head { margin-bottom: 0 !important;
} /* Startseite Hero: links Text/CTA untereinander, rechts Galerie */
.sec-hero > .wrap-inner { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; width: 100% !important;
} .sec-hero .sec-hero__col { display: flex !important; flex-direction: column !important; align-items: flex-start !important; flex: 1 1 0 !important; min-width: min(100%, 320px) !important; max-width: 50% !important; --width: 50% !important; --gap: 1em !important; --row-gap: 1em !important;
} .sec-hero .sec-hero__gallery-col { flex: 1 1 0 !important; min-width: min(100%, 280px) !important; max-width: 50% !important; --width: 50% !important; justify-content: center !important;
} @media (max-width: 1024px) { .sec-hero .sec-hero__col, .sec-hero .sec-hero__gallery-col { max-width: 100% !important; --width: 100% !important; flex: 1 1 100% !important; }
} body:not(.page) .quote__name .heading { margin: 0 !important; line-height: 1.15 !important;
} body:not(.page) .quote__role .heading { font-family: "Figtree", sans-serif !important; font-size: clamp(0.95rem, 1vw, 1.05rem) !important; font-weight: 400 !important; line-height: 1.2 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; color: #977944 !important;
} body:not(.page) .quote__mark { --gap: 1rem !important; align-items: center !important;
} @media (max-width: 480px) { body:not(.page) .quote__role .heading { font-size: 0.85rem !important; }
} /* Hero-Galerie: Bilder füllen Zellen */
.page-root .hero-gallery .hero-gallery__item { min-height: 0; height: 100%;
}
.page-root .hero-gallery[data-count="3"] .hero-gallery__item:nth-child(1) { min-height: 100%;
} /* Leistungen-Karte: 50/50 Text links, Bild rechts */
@media (min-width: 992px) { .svc-grid .svc-card--lead { flex-direction: row !important; align-items: stretch !important; } .svc-grid .svc-card--lead .svc-content { display: flex !important; flex-direction: row !important; flex: 1 1 auto !important; width: 100% !important; align-items: stretch !important; min-height: 0; } .svc-grid .svc-card--lead .svc-body { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; box-sizing: border-box; } .svc-grid .svc-card--lead .svc-img { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; min-height: 100% !important; height: auto !important; align-self: stretch !important; order: 2; } .svc-grid .svc-card--lead .svc-img img { height: 100% !important; min-height: 100% !important; width: 100% !important; object-fit: cover !important; }
} /* Standort-Grid: 3 Spalten × 2 Zeilen; Maps + „Zahlreiche Kunden“ je span 2 */
#standort .standort-card--1 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; --e-con-grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: 100% !important; min-width: 0 !important;
} #standort .standort-card--1 > .standort-card__title,
#standort .standort-card--1 > .standort-card__btn { grid-column: span 2 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; --width: 100% !important; box-sizing: border-box !important; overflow: hidden !important;
} @media (min-width: 992px) { #standort .standort-card__title { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; min-height: clamp(380px, 40vw, 520px) !important; gap: 0 !important; --row-gap: 0 !important; --column-gap: 0 !important; } #standort .standort-card__title > .standort-card__map, #standort .standort-card__title > .block-6d44336a { flex: 1 1 50% !important; width: 50% !important; max-width: 50% !important; min-width: 0 !important; --width: 50% !important; box-sizing: border-box !important; overflow: hidden !important; } #standort .standort-card__map { justify-content: center !important; padding: 2em !important; } #standort .block-6d44336a { display: flex !important; flex-direction: column !important; padding: 1.25em 1.25em 1.25em 0.75em !important; position: relative !important; } #standort .block-6d44336a .w-html, #standort .block-6d44336a .w-inner { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } #standort .map { position: relative !important; flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 300px !important; min-width: 0 !important; overflow: hidden !important; border-radius: 12px; line-height: 0; } #standort .map iframe { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; display: block !important; }
} @media (max-width: 991px) { #standort .standort-card__title { flex-direction: column !important; } #standort .standort-card__title > .standort-card__map, #standort .standort-card__title > .block-6d44336a { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; --width: 100% !important; } #standort .map { position: relative !important; width: 100% !important; min-height: 280px !important; } #standort .map iframe { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 280px !important; border: 0 !important; } #standort .standort-card--1, #standort .standort-card--1 { grid-template-columns: 1fr !important; --e-con-grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; } #standort .standort-card--1 > *, #standort .standort-card--1 > *, #standort .standort-card--1 > .standort-card__title, #standort .standort-card--1 > .standort-card__btn, #standort .standort-card--1 > .standort-card__title, #standort .standort-card--1 > .standort-card__btn, #standort .standort-card--1 > .standort-card__img, #standort .standort-card--1 > .standort-card__body, #standort .standort-card--1 > .standort-card__bg { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; --width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #standort .block.standort-card__title, #standort .block.standort-card__btn { --container-widget-width: 100% !important; }
} @media (max-width: 1024px) { .site-navigation-toggle-holder, .site-navigation-dropdown { display: none !important; }
} /* FAQ: weniger Abstand über CTA */
.sec-faq .block-b579681 { --gap: 1em !important; --row-gap: 1em !important;
}
.sec-faq .block-6a9b274 { margin-top: 0.25em !important;
}
.sec-faq .block-6a9b274 .btn-wrap { margin-top: 0 !important; margin-bottom: 0 !important;
} /* Bewertungs-Slider: Pfeile ohne Hintergrund */
#rev-widget .rev-nav__btn:focus,
#rev-widget .rev-nav__btn:active { background-color: transparent !important; border: none !important; color: #333 !important; outline: none !important; box-shadow: none !important;
} /* inline */
:root { --cta-start: #977944; --cta-end: #CABA8B; --cta-text: #ffffff; } /* 1. BASIS SETUP */ .nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 99999; height: 96px; display: flex; align-items: center; font-family: 'Figtree', sans-serif; } /* 2. LIGHT MODE STANDARDS (Gescrollt oder auf Unterseiten) */ .mode-light { background: #F1F1F1; border-bottom: 1px solid rgba(0,0,0,0.1); } .mode-light .nav-left > .nav__menu > li > a, .mode-light .cta1-btn { color: #141414 !important; } /* 3. DARK MODE STANDARDS */ .mode-dark { background: #141414; } .mode-dark .nav__menu > li > a, .mode-dark .cta1-btn { color: #ffffff !important; } /* 4. DIE LÖSUNG: TRANSPARENZ-LOGIK FÜR STARTSEITE */ /* Gilt für beide Modi, wenn oben (nicht gescrollt) */ .is-on-frontpage:not(.shrunk) { background: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; } /* ERZWINGE WEISSEN TEXT IM LIGHT MODE (Wenn oben auf Startseite) */ .mode-light.is-on-frontpage:not(.shrunk) .nav-left > .nav__menu > li > a, .mode-light.is-on-frontpage:not(.shrunk) .cta1-btn { color: #ffffff !important; text-shadow: 0 2px 10px rgba(0,0,0,0.2); } .mode-light.is-on-frontpage:not(.shrunk) .nav-right .cta1-btn:hover, .mode-light.is-on-frontpage:not(.shrunk) .cta1-btn:hover { color: #B8966A !important; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35) !important; } /* LOGO WECHSEL LOGIK */ .white-logo { position: absolute; opacity: 0; transition: 0.4s; } .default-logo { opacity: 1; transition: 0.4s; } .is-on-frontpage:not(.shrunk) .white-logo { opacity: 1; } .is-on-frontpage:not(.shrunk) .default-logo { opacity: 0; } /* Beim Scrollen: Zurück zum Standard (Default Logo) */ .shrunk .white-logo { opacity: 0; } .shrunk .default-logo { opacity: 1; } /* RESTLICHE STRUKTUR (STABILISIERT) */ .nav__inner { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: relative; height: 100%; } .nav-col { display: flex; align-items: center; } .nav-left { justify-content: flex-start; } .nav-center { justify-content: center; position: relative; } .nav-right { justify-content: flex-end; gap: 15px; } /* --- LOGO STRUKTUR & ANIMATION (GRID STACKING) --- */ /* 1. Container: Zentriert und stapelt Inhalte */ .nav__logo { display: grid; /* Grid stapelt Elemente ohne absolute Positionierung */ place-items: center; /* Zentriert alles perfekt mittig */ width: 250px; text-decoration: none; /* Kein overflow:hidden mehr nötig, da wir keine externen Balken nutzen */ } /* 2. Beide Logos übereinander legen */ .main-logo { grid-area: 1 / 1; /* Beide Bilder liegen exakt übereinander in Zelle 1 */ width: auto; /* Seitenverhältnis bleibt erhalten */ height: 62px; /* Start-Höhe (Groß) */ object-fit: contain; display: block; /* Transition für: Höhe (Scrollen), Opacity (Wechsel) und Filter (Hover) */ transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, filter 0.5s ease; will-change: height, opacity, filter; /* Sagt dem Browser: "Hier passiert gleich was" -> Performance */ } /* 3. Scroll-Zustand: Logo-Höhe in nav-scroll-hover-css (explizite px für Übergänge) */ /* --- LOGO SICHTBARKEIT (FADING) --- */ /* Standard-Zustand (Scroll oder Dark Mode) */ .white-logo { opacity: 0; pointer-events: none; z-index: 1; } .default-logo { opacity: 1; z-index: 2; } /* Wenn auf Startseite GANZ OBEN: Weißes Logo an, Default aus */ .is-on-frontpage:not(.shrunk) .white-logo { opacity: 1; pointer-events: auto; } .is-on-frontpage:not(.shrunk) .default-logo { opacity: 0; } /* Sobald gescrollt (.shrunk): Zurück zum Default */ .shrunk .white-logo { opacity: 0; } .shrunk .default-logo { opacity: 1; } /* --- HOVER EFFEKT (LICHTREFLEX / FLASH) --- */ /* Da wir Transparenz respektieren wollen, nutzen wir Filter statt Overlay-Elemente */ .nav__logo:hover .main-logo { filter: brightness(1.15); transition: filter 0.35s ease; } .main-logo { height: 62px; width: auto; object-fit: contain; } .nav__menu { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; } .nav__menu > li { position: relative; } .nav__menu > li > a { text-decoration: none; font-size: 16px; font-weight: 500; height: 45px; padding: 0 15px; display: flex; align-items: center; border-radius: 8px; transition: 0.3s; } /* --- CTA 2: BEVEL LOOK & SHIMMER EFFECT --- */ .nav__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 12px 40px 12px 22px; background: linear-gradient(135deg, var(--cta-start), var(--cta-end)); /* Abgeflachte Kanten & Glas-Effekt */ border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), /* Obere Lichtkante für Bevel-Effekt */ 0 4px 15px rgba(0, 0, 0, 0.2); color: var(--cta-text) !important; text-decoration: none; font-size: 14px; font-weight: 600; overflow: hidden; /* WICHTIG für den Schimmer */ transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
} /* Der Schimmer-Effekt (Glint) */
.nav__cta::after { content: ''; position: absolute; top: 0; left: -150%; /* Startet weit außerhalb links */ width: 80%; height: 100%; background: linear-gradient( to right, transparent, rgba(255, 255, 255, 0.4), transparent ); transform: skewX(-25deg); transition: 0.7s;
} /* Schimmer-Animation bei Hover */
.nav__cta:hover::after { left: 150%; /* Jagt einmal komplett nach rechts durch */ transition: 0.7s;
} .nav__cta:hover { padding: 12px 22px 12px 40px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3); filter: brightness(1.1); /* Macht den Gradienten etwas lebendiger */
} /* Pfeil-Logik bleibt stabil */
.cta-arrow { width: 14px; fill: var(--cta-text); position: absolute; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
} .arrow-right { right: 15px; opacity: 1; }
.nav__cta:hover .arrow-right { transform: translateX(40px); opacity: 0; } .arrow-left { left: -25px; opacity: 0; }
.nav__cta:hover .arrow-left { left: 15px; opacity: 1; } /* Deaktiviere die Unterstreichung für CTA 2 */
.nav__cta span::after { display: none !important; } /* Shrunk: Höhe/Logo → nav-scroll-hover-css (kein festes height hier, sonst kein Hover-Übergang) */ .shrunk { box-shadow: 0 10px 30px rgba(0,0,0,0.1); } @media (max-width: 1024px) { .nav { display: none; } } /* nav-link-styles-css */
/* Menü links */
.nav .nav-left .nav__menu { gap: 20px !important;
} .nav .nav-left .nav__menu > li > a { display: inline-flex !important; align-items: center !important; gap: 0 !important; height: auto !important; padding: 0 !important; font-family: "Figtree", sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: rgba(20, 20, 20, 0.65) !important; background: none !important; border: none !important; border-radius: 0 !important; cursor: pointer; text-decoration: none !important; text-shadow: none !important; transition: color 0.3s ease !important;
} .nav .nav-left .nav__menu > li > a:hover,
.nav .nav-left .nav__menu > li:hover > a { color: #B8966A !important;
} /* Startseite oben (Hero): helle Nav-Links auf transparentem Hintergrund */
.mode-light.is-on-frontpage:not(.has-scrolled) .nav .nav-left .nav__menu > li > a { color: rgba(255, 255, 255, 0.72) !important;
} .mode-light.is-on-frontpage:not(.has-scrolled) .nav .nav-left .nav__menu > li > a:hover,
.mode-light.is-on-frontpage:not(.has-scrolled) .nav .nav-left .nav__menu > li:hover > a { color: #B8966A !important;
} .nav .nav-left .nav__menu > li > a > span:not(.nav__drop-icon) { position: relative; display: inline-block;
} .nav .nav-left .nav__menu > li > a > span:not(.nav__drop-icon)::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background-color: #B8966A; transform: scaleX(0); transform-origin: left center; transition: transform 0.3s ease;
} .nav .nav-left .nav__menu > li > a:hover > span:not(.nav__drop-icon)::after,
.nav .nav-left .nav__menu > li:hover > a > span:not(.nav__drop-icon)::after { transform: scaleX(1);
} /* Dropdown-Indicator (Leistungen) */
.nav .nav__drop-icon { display: inline-block; width: 14px; height: 14px; margin-left: 6px; position: relative; flex-shrink: 0; opacity: 0.65; color: inherit; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} .mode-light .nav .nav-left .nav__menu > li > a .nav__drop-icon { opacity: 0.7;
} .mode-light.is-on-frontpage:not(.has-scrolled) .nav .nav-left .nav__menu > li > a .nav__drop-icon { opacity: 0.75;
} .nav .nav__drop-icon::before,
.nav .nav__drop-icon::after { content: ""; position: absolute; top: 50%; width: 5px; height: 1px; background-color: currentColor; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} .nav .nav__drop-icon::before { left: 1px; transform: translateY(-50%) rotate(40deg); transform-origin: right center;
} .nav .nav__drop-icon::after { right: 1px; transform: translateY(-50%) rotate(-40deg); transform-origin: left center;
} .nav .nav-left .nav__menu > li > a:hover .nav__drop-icon,
.nav .nav-left .nav__menu > li:hover > a .nav__drop-icon { opacity: 1;
} .nav .nav-left .nav__menu > li > a:hover .nav__drop-icon::before,
.nav .nav-left .nav__menu > li:hover > a .nav__drop-icon::before { transform: translateY(-50%) rotate(-40deg);
} .nav .nav-left .nav__menu > li > a:hover .nav__drop-icon::after,
.nav .nav-left .nav__menu > li:hover > a .nav__drop-icon::after { transform: translateY(-50%) rotate(40deg);
} /* WhatsApp-Link */
.nav .nav-right .cta1-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; height: auto !important; padding: 0 !important; font-family: "Figtree", sans-serif !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0.1em !important; text-transform: none !important; color: rgba(20, 20, 20, 0.58) !important; background: none !important; border: none !important; border-radius: 0 !important; cursor: pointer; text-decoration: none !important; text-shadow: none !important; transition: color 0.3s ease !important;
} .nav.is-on-frontpage.shrunk .nav-right .cta1-btn:hover,
.nav:not(.is-on-frontpage) .nav-right .cta1-btn:hover { color: rgba(20, 20, 20, 0.85) !important;
} .mode-light.is-on-frontpage:not(.has-scrolled) .nav .nav-right .cta1-btn { color: rgba(255, 255, 255, 0.72) !important;
} .nav.mode-light.is-on-frontpage:not(.has-scrolled) .nav-right .cta1-btn:hover,
.mode-light.is-on-frontpage:not(.has-scrolled) .nav .nav-right .cta1-btn:hover { color: #B8966A !important; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35) !important;
} .nav .nav-right .cta1-btn span::after { display: none !important;
} .nav .nav-wa-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.55; transition: opacity 0.3s ease;
} .nav.is-on-frontpage.shrunk .nav-right .cta1-btn:hover .nav-wa-icon,
.nav:not(.is-on-frontpage) .nav-right .cta1-btn:hover .nav-wa-icon { opacity: 0.85;
} .mode-light.is-on-frontpage:not(.has-scrolled) .nav .nav-wa-icon { opacity: 0.7;
} .nav.mode-light.is-on-frontpage:not(.has-scrolled) .nav-right .cta1-btn:hover .nav-wa-icon,
.mode-light.is-on-frontpage:not(.has-scrolled) .nav .nav-right .cta1-btn:hover .nav-wa-icon { color: #B8966A !important; opacity: 1 !important;
} /* Light-Mode Nav: heller Hintergrund, transparent auf Startseite oben */
.nav.mode-light { background: #f1f1f1 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
} .nav.mode-light.is-on-frontpage:not(.has-scrolled) { background: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important;
} .nav.mode-light.shrunk,
.nav.mode-light.is-on-frontpage.shrunk { background: #f1f1f1 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
} .mode-light.is-on-frontpage:not(.has-scrolled) .nav .nav-left .nav__menu > li > a,
.mode-light.is-on-frontpage:not(.has-scrolled) .nav .nav-right .cta1-btn { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
} /* nav-dropdown-menu-css */
/* Dropdown unter „Leistungen“ */
.nav .nav-left .nav__menu > li.nav__item--sub { position: relative;
} .nav .nav-left .nav__menu > li.nav__item--sub > .sub-menu { position: absolute; top: 100%; left: -1.5rem; min-width: 210px; margin: 0; padding: 0; list-style: none; background: #0d0d0d !important; border-radius: 12px !important; overflow: hidden !important; border: 1px solid rgba(184, 150, 106, 0.12); border-top-color: rgba(184, 150, 106, 0.22); box-shadow: none !important; opacity: 0; transform: translateY(-4px); pointer-events: none; visibility: visible; transition: opacity 0.22s ease 0.12s, transform 0.22s ease 0.12s; z-index: 100001;
} .nav .nav-left .nav__menu > li.nav__item--sub > .sub-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px;
} .nav .nav-left .nav__menu > li.nav__item--sub:hover > .sub-menu,
.nav .nav-left .nav__menu > li.nav__item--sub.submenu-open > .sub-menu { opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0s;
} .nav .nav-left .nav__menu > li.nav__item--sub > .sub-menu > li { margin: 0; padding: 0;
} .nav .nav-left .nav__menu > li.nav__item--sub > .sub-menu > li:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.04);
} .nav .nav-left .nav__menu > li.nav__item--sub > .sub-menu > li > a { display: flex !important; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; box-sizing: border-box; padding: 12px 1.5rem !important; font-family: "Figtree", sans-serif !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.5) !important; background: none !important; border: none !important; border-radius: 0 !important; text-decoration: none !important; text-shadow: none !important; height: auto !important; cursor: pointer; transition: color 0.2s ease, background 0.2s ease;
} .nav .nav-left .nav__menu > li.nav__item--sub > .sub-menu > li > a:hover { color: rgba(255, 255, 255, 0.8) !important; background: rgba(255, 255, 255, 0.03) !important;
} .nav .nav-left .nav__menu > li.nav__item--sub > .sub-menu > li > a > span:first-child { flex: 1 1 auto; min-width: 0;
} .nav .nav-left .nav__menu > li.nav__item--sub > .sub-menu .nav__sub-arrow { flex-shrink: 0; color: #B8966A; font-size: 10px; line-height: 1; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s ease, transform 0.2s ease;
} .nav .nav-left .nav__menu > li.nav__item--sub > .sub-menu > li:hover > a .nav__sub-arrow { opacity: 1; transform: translateX(0);
} /* Light Mode: helles Dropdown mit dunklem Text */
.nav.mode-light .nav-left .nav__menu > li.nav__item--sub > .sub-menu { background: #f8f7f4 !important; border: 1px solid rgba(184, 150, 106, 0.22) !important; border-top-color: rgba(184, 150, 106, 0.35) !important; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.1) !important;
} .nav.mode-light .nav-left .nav__menu > li.nav__item--sub > .sub-menu > li:not(:last-child) { border-bottom-color: rgba(0, 0, 0, 0.07) !important;
} .nav.mode-light .nav-left .nav__menu > li.nav__item--sub > .sub-menu > li > a { color: rgba(20, 20, 20, 0.58) !important;
} .nav.mode-light .nav-left .nav__menu > li.nav__item--sub > .sub-menu > li > a:hover { color: rgba(20, 20, 20, 0.92) !important; background: rgba(151, 121, 68, 0.1) !important;
} /* Startseite Hero: dunkles Dropdown bleibt lesbar auf transparentem Header */
.nav.mode-light.is-on-frontpage:not(.has-scrolled) .nav-left .nav__menu > li.nav__item--sub > .sub-menu { background: #0d0d0d !important; border: 1px solid rgba(184, 150, 106, 0.12) !important; border-top-color: rgba(184, 150, 106, 0.22) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2) !important;
} .nav.mode-light.is-on-frontpage:not(.has-scrolled) .nav-left .nav__menu > li.nav__item--sub > .sub-menu > li:not(:last-child) { border-bottom-color: rgba(255, 255, 255, 0.06) !important;
} .nav.mode-light.is-on-frontpage:not(.has-scrolled) .nav-left .nav__menu > li.nav__item--sub > .sub-menu > li > a { color: rgba(255, 255, 255, 0.5) !important;
} .nav.mode-light.is-on-frontpage:not(.has-scrolled) .nav-left .nav__menu > li.nav__item--sub > .sub-menu > li > a:hover { color: rgba(255, 255, 255, 0.88) !important; background: rgba(255, 255, 255, 0.06) !important;
} /* inline */
.trusted-minimal { display: inline-flex; flex-direction: row; align-items: center; gap: 12px; font-family: Figtree, sans-serif; box-sizing: border-box; width: fit-content; max-width: 100%; } .trusted-minimal__brand { display: flex; align-items: center; flex-shrink: 0; } .trusted-minimal__google { width: 28px; height: 28px; object-fit: contain; display: block; } .t-text { color: #ffffff; font-size: 14px; font-weight: 500; margin-left: 0; letter-spacing: -0.1px; flex: 1 1 auto; min-width: 0; } .t-text span { color: #ffffff; font-weight: 700; } /* inline */
:root { --btn-start: #977944; --btn-end: #CABA8B; --btn-text: #ffffff; } /* 1. GRUNDGERÜST (Design CTA 2) */ .sec-hero__cta .btn-primary { position: relative; display: inline-flex; align-items: center; justify-content: center; /* Farben aus Backend */ background: linear-gradient(135deg, var(--btn-start), var(--btn-end)); color: var(--btn-text) !important; /* Erzwingt Backend-Farbe */ /* 3D Glass Look */ border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 4px 15px rgba(0, 0, 0, 0.2); border-radius: 12px; /* Padding: Wenig links, viel rechts (Platz für Pfeil) */ padding: 12px 40px 12px 22px; text-decoration: none; font-weight: 600; font-size: 14px; font-family: 'Figtree', sans-serif; overflow: hidden; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); z-index: 1; } /* Text Styling */ .sec-hero__cta .btn-text { position: relative; z-index: 5; display: inline-block; } /* Pfeile Basis Styling */ .sec-hero__cta .cta-arrow { position: absolute; width: 14px; height: 14px; fill: currentColor; /* Nimmt Textfarbe an */ transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; z-index: 4; } /* Startpositionen */ .sec-hero__cta .arrow-right { right: 15px; opacity: 1; } .sec-hero__cta .arrow-left { left: -25px; opacity: 0; } /* Schimmer (Glint) */ .sec-hero__cta .btn-primary::after { content: ''; position: absolute; top: 0; left: -150%; width: 80%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-25deg); transition: 0.7s; pointer-events: none; z-index: 2; } /* ========================================= HOVER LOGIK ========================================= */ .sec-hero__cta .btn-primary:hover { /* Padding Swap (Text rutscht nach rechts) */ padding: 12px 22px 12px 40px; /* 3D Effekt verstärken */ box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3); filter: brightness(1.1); /* Farbe beibehalten (falls Theme dazwischenfunkt) */ color: var(--btn-text) !important; } /* Pfeil Rechts fliegt raus */ .sec-hero__cta .btn-primary:hover .arrow-right { transform: translateX(40px); opacity: 0; } /* Pfeil Links kommt rein */ .sec-hero__cta .btn-primary:hover .arrow-left { left: 15px; opacity: 1; } /* Schimmer läuft durch */ .sec-hero__cta .btn-primary:hover::after { left: 150%; } /* inline */
.hero-gallery { display: grid; gap: 20px; width: 100%; max-width: 650px; /* Passt perfekt in eine rechte Hero-Spalte */ margin: 0 auto; } .hero-gallery__item { border-radius: 24px; /* Identisch mit deinen Reviews & Videos */ overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Identisch mit Beauty Lounge Styling */ background: #f4f4f4; transition: transform 0.3s ease; } .hero-gallery__item:hover { transform: translateY(-5px); } .hero-gallery__item { min-height: 0; height: 100%; } .hero-gallery__item img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; display: block; } /* Layout für 2 Bilder */ .hero-gallery[data-count="2"] { grid-template-columns: 1fr 1fr; align-items: center; } .hero-gallery[data-count="2"] .hero-gallery__item { aspect-ratio: 3/4; } .hero-gallery[data-count="2"] .hero-gallery__item:nth-child(2) { transform: translateY(40px); /* Versetzter Look */ } .hero-gallery[data-count="2"] .hero-gallery__item:nth-child(2):hover { transform: translateY(35px); } /* Layout für 3 Bilder (Typisches verteiltes Hero-Grid) */ .hero-gallery[data-count="3"] { grid-template-columns: 1.2fr 1fr; grid-template-rows: minmax(150px, 220px) minmax(150px, 220px); } .hero-gallery[data-count="3"] .hero-gallery__item:nth-child(1) { grid-row: 1 / span 2; /* Erstes Bild groß auf der linken Seite */ height: 100%; } /* Layout für 4 Bilder */ .hero-gallery[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(150px, 200px)); } .hero-gallery[data-count="4"] .hero-gallery__item:nth-child(even) { transform: translateY(30px); /* Leicht versetztes 2x2 Masonry */ } .hero-gallery[data-count="4"] .hero-gallery__item:nth-child(even):hover { transform: translateY(25px); } /* Mobile Ansicht aufräumen */ @media (max-width: 768px) { .hero-gallery[data-count] { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .hero-gallery[data-count="3"] .hero-gallery__item:nth-child(1) { grid-column: 1 / span 2; /* Großes Bild oben auf ganzer Breite */ aspect-ratio: 16/9; } .hero-gallery[data-count="2"] .hero-gallery__item:nth-child(2), .hero-gallery[data-count="4"] .hero-gallery__item:nth-child(even) { transform: none !important; /* Versatz auf Mobile deaktivieren */ } .hero-gallery__item { aspect-ratio: 1/1 !important; } } /* inline */
.slider-container { width: 100%; margin: 0 auto; overflow: hidden; text-align: center; /* Schriftart auf Figtree geändert */ font-family: 'Figtree', sans-serif !important; font-style: italic; padding: 0; } .slider { display: flex; animation: slide 80s infinite linear; /* Etwas langsamer für bessere Lesbarkeit der langen Wörter */ white-space: nowrap; } .slide { flex: 0 0 auto; font-size: 1.1rem !important; font-weight: normal; color: #1a1a1a !important; padding: 0 25px; } .slide::after { content: ' •'; margin-left: 20px; opacity: 0.5; } @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* inline */
/* DYNAMISCHE STYLES (Scope: .svc-grid) */ .svc-grid { --bl-title-font: fraunces, serif; /* NEU */ --bl-btn-font: Figtree, sans-serif; --bl-btn-bg-start: #977944; --bl-btn-bg-end: #caba8b; --bl-btn-text: #ffffff; --bl-btn-h-bg-start: #caba8b; --bl-btn-h-bg-end: #977944; --bl-btn-h-text: #ffffff; } /* inline */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 1.5em; width: 100%; max-width: none; margin: 0; } .svc-card { background: #fff; border-radius: 32px; border: 1px solid #E8E8E8; padding: 1em; box-shadow: none; display: flex; flex-direction: column; gap: 1em; transition: transform 0.3s ease; position: relative; } /* --- DESKTOP STYLES (>= 992px) --- */ @media (min-width: 992px) { .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5em; } .svc-toggle { display: none; } .svc-panel, .svc-content, .svc-panel__inner { display: contents; } .svc-card:hover { transform: translateY(-3px); } .svc-body { padding: 1em; display: flex; flex-direction: column; justify-content: center; gap: 1em; flex: 1; } .svc-img { border-radius: 24px; overflow: hidden; width: 100%; } .svc-img img { width: 100%; height: 320px; object-fit: cover; display: block; } /* HERO CARD */ .svc-card--lead { grid-column: span 2; flex-direction: row; align-items: stretch; } .svc-card--lead .svc-body { align-items: flex-start; justify-content: center; } .svc-card--lead .svc-img { flex: 1; width: auto; height: auto; order: 0; } .svc-card--lead .svc-img img { height: 100%; min-height: 100%; } /* TYPO */ .svc-body h3, .svc-body h2 { font-family: var(--bl-title-font); /* DYNAMIC FONT */ font-weight: 300; margin: 0; line-height: 1.2; } .svc-body h3 { font-size: var(--font-size-h3); } .svc-body h2 { font-size: var(--font-size-h2); } .svc-text { margin: 0; font-size: var(--font-size-body); color: #555; line-height: 1.5; } } /* --- MOBILE STYLES (< 992px) --- */ @media (max-width: 991px) { .svc-grid { gap: 1.5em; } /* HERO CARD MOBILE */ .svc-card--lead { padding: 0; gap: 0; } .svc-content { display: flex; flex-direction: column; } .svc-card--lead .svc-body { padding: 1.45em 1.2em; gap: 0.5em; display: flex; flex-direction: column; } .svc-card--lead .svc-body h2 { display: block; margin: 0; line-height: 1.2; font-size: var(--font-size-h2); font-family: var(--bl-title-font); /* DYNAMIC FONT */ font-weight: 400; } .svc-card--lead .svc-img { order: -1; margin-bottom: 0.5em; border-radius: 24px; overflow: hidden; } .svc-card--lead .svc-img img { width: 100%; height: auto; } .svc-card--lead .svc-text { margin: 0; color: #555; line-height: 1.5; font-size: 1rem; } /* TRIGGER CARDS MOBILE */ .svc-card--toggle { gap: 0 !important; padding: 0 !important; overflow: hidden; } .svc-toggle { display: flex; justify-content: space-between; align-items: center; padding: 1.2em 1.5em; cursor: pointer; background: #fff; font-size: 1.1rem; } .svc-toggle__title { font-size: 1.125rem; font-family: var(--bl-title-font); /* DYNAMIC FONT */ font-weight: 400; } .svc-toggle__icon { transition: transform 0.3s ease; } .svc-card.is-open .svc-toggle__icon { transform: rotate(180deg); } /* PURE CSS SMOOTH ACCORDION */ .svc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out, opacity 0.3s ease; opacity: 0; border-top: 1px solid transparent; overflow: hidden; } /* 2 COLUMNS LAYOUT */ .svc-panel__inner { overflow: hidden; display: grid; grid-template-columns: 1.5fr 1fr; gap: 15px; padding: 0 15px; align-items: center; min-height: 0; } .svc-card--toggle.is-open .svc-panel__inner { padding: 2em; } .svc-panel__inner .svc-body { order: 1; display: flex; flex-direction: column; gap: 0.5em; padding: 0; text-align: left; } .svc-card--toggle .svc-body h3 { display: block; font-family: var(--bl-title-font); /* DYNAMIC FONT */ font-size: 1.2rem; font-weight: 300; margin: 0; } .svc-card--toggle .svc-text { font-size: 0.95rem; color: #555; line-height: 1.4; } .svc-card--toggle .svc-img { order: 2; border-radius: 12px; overflow: hidden; margin: 0; height: 100%; width: 100%; min-height: 0; } .svc-card--toggle.is-open .svc-img { min-height: 100px; } .svc-card--toggle .svc-img img { width: 100%; height: 100%; object-fit: cover; } /* Open State */ .svc-card--toggle.is-open .svc-panel { grid-template-rows: 1fr; opacity: 1; border-top-color: #f0f0f0; } /* ANIMATION */ @keyframes blFadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .svc-card--toggle.is-open .svc-panel__inner .svc-img, .svc-card--toggle.is-open .svc-panel__inner h3, .svc-card--toggle.is-open .svc-panel__inner .svc-text, .svc-card--toggle.is-open .svc-panel__inner .svc-link-wrap { opacity: 0; animation: blFadeInUp 0.5s ease forwards; } .svc-card--toggle.is-open .svc-panel__inner h3 { animation-delay: 0.15s; } .svc-card--toggle.is-open .svc-panel__inner .svc-text { animation-delay: 0.25s; } .svc-card--toggle.is-open .svc-panel__inner .svc-link-wrap { animation-delay: 0.35s; } .svc-card--toggle.is-open .svc-panel__inner .svc-img { animation-delay: 0.45s; } } /* --- BUTTONS --- */ .cta-wrap { margin-top: 10px; } .cta-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; /* DYNAMIC STYLES */ font-family: var(--bl-btn-font); background: linear-gradient(135deg, var(--bl-btn-bg-start), var(--bl-btn-bg-end)); color: var(--bl-btn-text) !important; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 4px 15px rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 12px 40px 12px 22px; text-decoration: none; font-weight: 600; font-size: 14px; overflow: hidden; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); z-index: 20; } .cta-btn .btn-text { position: relative; z-index: 5; } .cta-btn .cta-arrow { position: absolute; width: 14px; height: 14px; fill: currentColor; transition: all 0.4s; pointer-events: none; z-index: 4; } .cta-btn .arrow-right { right: 15px; opacity: 1; } .cta-btn .arrow-left { left: -25px; opacity: 0; } .cta-btn::after { content: ''; position: absolute; top: 0; left: -150%; width: 80%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-25deg); transition: 0.7s; pointer-events: none; z-index: 2; } /* HOVER STATES */ .cta-btn:hover { background: linear-gradient(135deg, var(--bl-btn-h-bg-start), var(--bl-btn-h-bg-end)); color: var(--bl-btn-h-text) !important; padding: 12px 22px 12px 40px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3); } .cta-btn:hover .arrow-right { transform: translateX(40px); opacity: 0; } .cta-btn:hover .arrow-left { left: 15px; opacity: 1; } .cta-btn:hover::after { left: 150%; } .svc-link-wrap { margin-top: 10px; } .svc-link { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; background: transparent; color: #000000; text-decoration: none; border: none; box-shadow: none; font-weight: 500; font-size: 16px; font-family: 'Figtree', sans-serif; padding: 0; height: 40px; overflow: hidden; cursor: pointer; } .svc-link .tb-icon-wrap { position: absolute; display: flex; align-items: center; width: 14px; height: 14px; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .svc-link svg { width: 100%; height: 100%; fill: currentColor; } .svc-link .tb-text { display: inline-block; margin-right: 25px; transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); will-change: transform; position: relative; } .svc-link .tb-left { left: 0; opacity: 0; transform: translateX(-15px); } .svc-link .tb-right { right: 0; opacity: 1; transform: translateX(0); } .svc-link.is-triggered .tb-text, .svc-link:hover .tb-text { transform: translateX(20px); } .svc-link.is-triggered .tb-right, .svc-link:hover .tb-right { opacity: 0; transform: translateX(20px); } .svc-link.is-triggered .tb-left, .svc-link:hover .tb-left { opacity: 1; transform: translateX(0); } /* inline */
#rm-widget-25ef94e .read__content { font-weight: 300; /* Allgemein dünneres Schriftgewicht */ } #rm-widget-25ef94e .read__toggle:hover { text-decoration: underline; /* Unterstreichung bei Hover */ } /* inline */
:root { --btn-start: #977944; --btn-end: #CABA8B; --btn-text: #ffffff; } /* 1. GRUNDGERÜST (Design CTA 2) */ .block-5f898f0 .btn-primary { position: relative; display: inline-flex; align-items: center; justify-content: center; /* Farben aus Backend */ background: linear-gradient(135deg, var(--btn-start), var(--btn-end)); color: var(--btn-text) !important; /* Erzwingt Backend-Farbe */ /* 3D Glass Look */ border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 4px 15px rgba(0, 0, 0, 0.2); border-radius: 12px; /* Padding: Wenig links, viel rechts (Platz für Pfeil) */ padding: 12px 40px 12px 22px; text-decoration: none; font-weight: 600; font-size: 14px; font-family: 'Figtree', sans-serif; overflow: hidden; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); z-index: 1; } /* Text Styling */ .block-5f898f0 .btn-text { position: relative; z-index: 5; display: inline-block; } /* Pfeile Basis Styling */ .block-5f898f0 .cta-arrow { position: absolute; width: 14px; height: 14px; fill: currentColor; /* Nimmt Textfarbe an */ transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; z-index: 4; } /* Startpositionen */ .block-5f898f0 .arrow-right { right: 15px; opacity: 1; } .block-5f898f0 .arrow-left { left: -25px; opacity: 0; } /* Schimmer (Glint) */ .block-5f898f0 .btn-primary::after { content: ''; position: absolute; top: 0; left: -150%; width: 80%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-25deg); transition: 0.7s; pointer-events: none; z-index: 2; } /* ========================================= HOVER LOGIK ========================================= */ .block-5f898f0 .btn-primary:hover { /* Padding Swap (Text rutscht nach rechts) */ padding: 12px 22px 12px 40px; /* 3D Effekt verstärken */ box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3); filter: brightness(1.1); /* Farbe beibehalten (falls Theme dazwischenfunkt) */ color: var(--btn-text) !important; } /* Pfeil Rechts fliegt raus */ .block-5f898f0 .btn-primary:hover .arrow-right { transform: translateX(40px); opacity: 0; } /* Pfeil Links kommt rein */ .block-5f898f0 .btn-primary:hover .arrow-left { left: 15px; opacity: 1; } /* Schimmer läuft durch */ .block-5f898f0 .btn-primary:hover::after { left: 150%; } /* inline */
.section-lines { position: relative; max-width: min(100%, 1400px); margin: 0 auto;
} .section-lines::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; /* Verhindert, dass die Linien beim Klicken stören */ /* Wir rücken die äußeren Linien 1px ein, damit sie sichtbar sind */ background-image: linear-gradient(90deg, #e0e0e0 1px, transparent 1px), linear-gradient(90deg, #e0e0e0 1px, transparent 1px), linear-gradient(90deg, #e0e0e0 1px, transparent 1px); /* Links (1px eingerückt), Mitte, Rechts (1px eingerückt) */ background-position: 1px 0, 50% 0, calc(100% - 1px) 0; background-size: 1px 100%; background-repeat: no-repeat; /* Deckkraft für Dezentheit */ opacity: 0.25;
} /* inline */
#rm-widget-b541e3d .read__content { font-weight: 300; /* Allgemein dünneres Schriftgewicht */ } #rm-widget-b541e3d .read__toggle:hover { text-decoration: underline; /* Unterstreichung bei Hover */ } /* inline */
#rm-widget-b5c474b .read__content { font-weight: 300; /* Allgemein dünneres Schriftgewicht */ } #rm-widget-b5c474b .read__toggle:hover { text-decoration: underline; /* Unterstreichung bei Hover */ } /* inline */
#rm-widget-931efe0 .read__content { font-weight: 300; /* Allgemein dünneres Schriftgewicht */ } #rm-widget-931efe0 .read__toggle:hover { text-decoration: underline; /* Unterstreichung bei Hover */ } /* inline */
:root { --btn-start: #977944; --btn-end: #CABA8B; --btn-text: #ffffff; } /* 1. GRUNDGERÜST (Design CTA 2) */ .block-102ef2db .btn-primary { position: relative; display: inline-flex; align-items: center; justify-content: center; /* Farben aus Backend */ background: linear-gradient(135deg, var(--btn-start), var(--btn-end)); color: var(--btn-text) !important; /* Erzwingt Backend-Farbe */ /* 3D Glass Look */ border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 4px 15px rgba(0, 0, 0, 0.2); border-radius: 12px; /* Padding: Wenig links, viel rechts (Platz für Pfeil) */ padding: 12px 40px 12px 22px; text-decoration: none; font-weight: 600; font-size: 14px; font-family: 'Figtree', sans-serif; overflow: hidden; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); z-index: 1; } /* Text Styling */ .block-102ef2db .btn-text { position: relative; z-index: 5; display: inline-block; } /* Pfeile Basis Styling */ .block-102ef2db .cta-arrow { position: absolute; width: 14px; height: 14px; fill: currentColor; /* Nimmt Textfarbe an */ transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; z-index: 4; } /* Startpositionen */ .block-102ef2db .arrow-right { right: 15px; opacity: 1; } .block-102ef2db .arrow-left { left: -25px; opacity: 0; } /* Schimmer (Glint) */ .block-102ef2db .btn-primary::after { content: ''; position: absolute; top: 0; left: -150%; width: 80%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-25deg); transition: 0.7s; pointer-events: none; z-index: 2; } /* ========================================= HOVER LOGIK ========================================= */ .block-102ef2db .btn-primary:hover { /* Padding Swap (Text rutscht nach rechts) */ padding: 12px 22px 12px 40px; /* 3D Effekt verstärken */ box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3); filter: brightness(1.1); /* Farbe beibehalten (falls Theme dazwischenfunkt) */ color: var(--btn-text) !important; } /* Pfeil Rechts fliegt raus */ .block-102ef2db .btn-primary:hover .arrow-right { transform: translateX(40px); opacity: 0; } /* Pfeil Links kommt rein */ .block-102ef2db .btn-primary:hover .arrow-left { left: 15px; opacity: 1; } /* Schimmer läuft durch */ .block-102ef2db .btn-primary:hover::after { left: 150%; } /* inline */
#standort .map { width: 100%; position: relative; overflow: hidden; line-height: 0; min-height: 280px; } #standort .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* inline */
/* --- STYLING --- */ #trigger-btn-5b61f183.btn-ghost { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; background: transparent; color: #000000; text-decoration: none; border: none; box-shadow: none; font-weight: 500; font-size: 16px; font-family: 'Figtree', sans-serif; padding: 0; height: 40px; overflow: hidden; cursor: pointer; } #trigger-btn-5b61f183 .tb-icon-wrap { position: absolute; display: flex; align-items: center; width: 14px; height: 14px; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } #trigger-btn-5b61f183 svg { width: 100%; height: 100%; fill: currentColor; } #trigger-btn-5b61f183 .tb-text { display: inline-block; margin-right: 25px; transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); will-change: transform; position: relative; } /* Positionen */ #trigger-btn-5b61f183 .tb-left { left: 0; opacity: 0; transform: translateX(-15px); } #trigger-btn-5b61f183 .tb-right { right: 0; opacity: 1; transform: translateX(0); } /* ANIMATION STATES (JS triggered) */ #trigger-btn-5b61f183.is-triggered .tb-text { transform: translateX(20px); } #trigger-btn-5b61f183.is-triggered .tb-right { opacity: 0; transform: translateX(20px); } #trigger-btn-5b61f183.is-triggered .tb-left { opacity: 1; transform: translateX(0); } /* Fallback (Direkter Hover) */ #trigger-btn-5b61f183:hover .tb-text { transform: translateX(20px); } #trigger-btn-5b61f183:hover .tb-right { opacity: 0; transform: translateX(20px); } #trigger-btn-5b61f183:hover .tb-left { opacity: 1; transform: translateX(0); } /* inline */
/* --- STYLING --- */ #trigger-btn-19cac5ab.btn-ghost { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; background: transparent; color: #000000; text-decoration: none; border: none; box-shadow: none; font-weight: 500; font-size: 16px; font-family: 'Figtree', sans-serif; padding: 0; height: 40px; overflow: hidden; cursor: pointer; } #trigger-btn-19cac5ab .tb-icon-wrap { position: absolute; display: flex; align-items: center; width: 14px; height: 14px; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } #trigger-btn-19cac5ab svg { width: 100%; height: 100%; fill: currentColor; } #trigger-btn-19cac5ab .tb-text { display: inline-block; margin-right: 25px; transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); will-change: transform; position: relative; } /* Positionen */ #trigger-btn-19cac5ab .tb-left { left: 0; opacity: 0; transform: translateX(-15px); } #trigger-btn-19cac5ab .tb-right { right: 0; opacity: 1; transform: translateX(0); } /* ANIMATION STATES (JS triggered) */ #trigger-btn-19cac5ab.is-triggered .tb-text { transform: translateX(20px); } #trigger-btn-19cac5ab.is-triggered .tb-right { opacity: 0; transform: translateX(20px); } #trigger-btn-19cac5ab.is-triggered .tb-left { opacity: 1; transform: translateX(0); } /* Fallback (Direkter Hover) */ #trigger-btn-19cac5ab:hover .tb-text { transform: translateX(20px); } #trigger-btn-19cac5ab:hover .tb-right { opacity: 0; transform: translateX(20px); } #trigger-btn-19cac5ab:hover .tb-left { opacity: 1; transform: translateX(0); } /* inline */
:root { --btn-start: #977944; --btn-end: #CABA8B; --btn-text: #ffffff; } /* 1. GRUNDGERÜST (Design CTA 2) */ .block-1c649afe .btn-primary { position: relative; display: inline-flex; align-items: center; justify-content: center; /* Farben aus Backend */ background: linear-gradient(135deg, var(--btn-start), var(--btn-end)); color: var(--btn-text) !important; /* Erzwingt Backend-Farbe */ /* 3D Glass Look */ border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 4px 15px rgba(0, 0, 0, 0.2); border-radius: 12px; /* Padding: Wenig links, viel rechts (Platz für Pfeil) */ padding: 12px 40px 12px 22px; text-decoration: none; font-weight: 600; font-size: 14px; font-family: 'Figtree', sans-serif; overflow: hidden; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); z-index: 1; } /* Text Styling */ .block-1c649afe .btn-text { position: relative; z-index: 5; display: inline-block; } /* Pfeile Basis Styling */ .block-1c649afe .cta-arrow { position: absolute; width: 14px; height: 14px; fill: currentColor; /* Nimmt Textfarbe an */ transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; z-index: 4; } /* Startpositionen */ .block-1c649afe .arrow-right { right: 15px; opacity: 1; } .block-1c649afe .arrow-left { left: -25px; opacity: 0; } /* Schimmer (Glint) */ .block-1c649afe .btn-primary::after { content: ''; position: absolute; top: 0; left: -150%; width: 80%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-25deg); transition: 0.7s; pointer-events: none; z-index: 2; } /* ========================================= HOVER LOGIK ========================================= */ .block-1c649afe .btn-primary:hover { /* Padding Swap (Text rutscht nach rechts) */ padding: 12px 22px 12px 40px; /* 3D Effekt verstärken */ box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3); filter: brightness(1.1); /* Farbe beibehalten (falls Theme dazwischenfunkt) */ color: var(--btn-text) !important; } /* Pfeil Rechts fliegt raus */ .block-1c649afe .btn-primary:hover .arrow-right { transform: translateX(40px); opacity: 0; } /* Pfeil Links kommt rein */ .block-1c649afe .btn-primary:hover .arrow-left { left: 15px; opacity: 1; } /* Schimmer läuft durch */ .block-1c649afe .btn-primary:hover::after { left: 150%; } /* inline */
#rev-widget { font-family: Satoshi, sans-serif; position: relative; padding: 0; box-sizing: border-box; } #rev-widget .rev-viewport { overflow: hidden; width: 100%; padding: 12px 0 16px; margin: 0; } #rev-widget .rev-track { display: flex; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); gap: 20px; padding: 8px 5px 12px; } /* Modern Card Interaction */ #rev-widget .rev-card { min-width: calc(25% - 15px); max-width: calc(25% - 15px); background: #FFFFFF; border: 1px solid #e2e8f0; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; flex-shrink: 0; position: relative; transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } #rev-widget .rev-card:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important; border-color: transparent !important; z-index: 10; } #rev-widget .rev-user { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } #rev-widget .rev-avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: #111; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; flex-shrink: 0; } #rev-widget .rev-avatar img { width: 100%; height: 100%; object-fit: cover; } #rev-widget .rev-meta h4 { margin: 0; font-size: 1rem; color: #111; } #rev-widget .rev-meta span { font-size: 0.8rem; color: #666; } #rev-widget .rev-stars { color: #FFD700; margin-bottom: 12px; font-size: 1rem; letter-spacing: 2px; } #rev-widget .rev-text { font-size: 0.9rem; line-height: 1.5; color: #444; margin: 0; } /* NAVIGATION — unter dem Slider */ #rev-widget .rev-nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 0.35rem; padding: 0; } #rev-widget .rev-nav__btn { position: static; top: auto; left: auto; right: auto; transform: none; width: 2rem; height: 2rem; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; cursor: pointer; z-index: 1; display: flex; align-items: center; justify-content: center; color: #333 !important; padding: 0; font-size: 1.1rem; line-height: 1; transition: color 0.45s ease !important; } #rev-widget .rev-nav__btn .rev-nav__icon { display: inline-block; line-height: 1; transform: scale(1); transform-origin: center center; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } #rev-widget .rev-nav__btn:hover { background: transparent !important; border: none !important; color: #111 !important; outline: none !important; box-shadow: none !important; } #rev-widget .rev-nav__btn:hover .rev-nav__icon, #rev-widget .rev-nav__btn:focus-visible .rev-nav__icon { transform: scale(1.15); } #rev-widget .rev-nav__btn:focus, #rev-widget .rev-nav__btn:active { background: transparent !important; border: none !important; color: #333 !important; outline: none !important; box-shadow: none !important; } #rev-widget .rev-dots { display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-width: 0; } #rev-widget .rev-dot { width: 6px; height: 6px; padding: 0; border: none; border-radius: 50%; background: #d4d4d4; cursor: pointer; flex-shrink: 0; transform: scale(1); transition: background 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } #rev-widget .rev-dot.is-active { background: #977944; transform: scale(1.25); } #rev-widget .rev-dot:hover { transform: scale(1.15); } @media (max-width: 1100px) { #rev-widget .rev-card { min-width: calc(33.3% - 14px); max-width: calc(33.3% - 14px); } } @media (max-width: 850px) { #rev-widget .rev-card { min-width: calc(50% - 10px); max-width: calc(50% - 10px); } } @media (max-width: 600px) { #rev-widget .rev-card { min-width: 100%; max-width: 100%; } } /* inline */
.section-lines { position: relative; max-width: min(100%, 1400px); margin: 0 auto;
} .section-lines::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; /* Verhindert, dass die Linien beim Klicken stören */ /* Wir rücken die äußeren Linien 1px ein, damit sie sichtbar sind */ background-image: linear-gradient(90deg, #e0e0e0 1px, transparent 1px), linear-gradient(90deg, #e0e0e0 1px, transparent 1px), linear-gradient(90deg, #e0e0e0 1px, transparent 1px); /* Links (1px eingerückt), Mitte, Rechts (1px eingerückt) */ background-position: 1px 0, 50% 0, calc(100% - 1px) 0; background-size: 1px 100%; background-repeat: no-repeat; /* Deckkraft für Dezentheit */ opacity: 0.25;
} /* inline */
:root { --btn-start: #977944; --btn-end: #CABA8B; --btn-text: #ffffff; } /* 1. GRUNDGERÜST (Design CTA 2) */ .block-4111f41 .btn-primary { position: relative; display: inline-flex; align-items: center; justify-content: center; /* Farben aus Backend */ background: linear-gradient(135deg, var(--btn-start), var(--btn-end)); color: var(--btn-text) !important; /* Erzwingt Backend-Farbe */ /* 3D Glass Look */ border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 4px 15px rgba(0, 0, 0, 0.2); border-radius: 12px; /* Padding: Wenig links, viel rechts (Platz für Pfeil) */ padding: 12px 40px 12px 22px; text-decoration: none; font-weight: 600; font-size: 14px; font-family: 'Figtree', sans-serif; overflow: hidden; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); z-index: 1; } /* Text Styling */ .block-4111f41 .btn-text { position: relative; z-index: 5; display: inline-block; } /* Pfeile Basis Styling */ .block-4111f41 .cta-arrow { position: absolute; width: 14px; height: 14px; fill: currentColor; /* Nimmt Textfarbe an */ transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; z-index: 4; } /* Startpositionen */ .block-4111f41 .arrow-right { right: 15px; opacity: 1; } .block-4111f41 .arrow-left { left: -25px; opacity: 0; } /* Schimmer (Glint) */ .block-4111f41 .btn-primary::after { content: ''; position: absolute; top: 0; left: -150%; width: 80%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-25deg); transition: 0.7s; pointer-events: none; z-index: 2; } /* ========================================= HOVER LOGIK ========================================= */ .block-4111f41 .btn-primary:hover { /* Padding Swap (Text rutscht nach rechts) */ padding: 12px 22px 12px 40px; /* 3D Effekt verstärken */ box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3); filter: brightness(1.1); /* Farbe beibehalten (falls Theme dazwischenfunkt) */ color: var(--btn-text) !important; } /* Pfeil Rechts fliegt raus */ .block-4111f41 .btn-primary:hover .arrow-right { transform: translateX(40px); opacity: 0; } /* Pfeil Links kommt rein */ .block-4111f41 .btn-primary:hover .arrow-left { left: 15px; opacity: 1; } /* Schimmer läuft durch */ .block-4111f41 .btn-primary:hover::after { left: 150%; } /* inline */
.cmp-wrap { width: 100%; margin: 20px 0; } .cmp-inner { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 15px; background: #141414; box-shadow: 0 10px 30px rgba(0,0,0,0.08); } .cmp-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; pointer-events: none; } .cmp-img--after { z-index: 1; } .cmp-img--before { z-index: 2; clip-path: inset(0 50% 0 0); will-change: clip-path; } .cmp-range { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent !important; -webkit-appearance: none; appearance: none; z-index: 10; cursor: ew-resize; margin: 0; border: none !important; } /* Disable Elementor Focus states on inputs */ .cmp-range:focus, .cmp-range:active { outline: none !important; box-shadow: none !important; background: transparent !important; border: none !important; } .cmp-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: linear-gradient(to bottom, #977944, #CABA8B, #977944); z-index: 5; transform: translateX(-50%); pointer-events: none; display: flex; align-items: center; justify-content: center; overflow: visible; } .cmp-handle__dot { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; flex-shrink: 0; background: linear-gradient(135deg, #977944 0%, #CABA8B 100%); border-radius: 50% !important; box-shadow: 0 4px 15px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; position: relative; transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .cmp-inner:hover .cmp-handle__dot { transform: scale(1.15); } .cmp-arrows { display: flex; gap: 8px; justify-content: center; align-items: center; } .cmp-arrows::before, .cmp-arrows::after { content: ''; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .cmp-arrows::before { border-right: 7px solid white; } .cmp-arrows::after { border-left: 7px solid white; } .cmp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 50px; height: 100vh; } .cmp-range::-moz-range-thumb { width: 50px; height: 100vh; background: transparent; border: none; } /* inline */
:root { --btn-start: #977944; --btn-end: #CABA8B; --btn-text: #ffffff; } /* 1. GRUNDGERÜST (Design CTA 2) */ .block-821c487 .btn-primary { position: relative; display: inline-flex; align-items: center; justify-content: center; /* Farben aus Backend */ background: linear-gradient(135deg, var(--btn-start), var(--btn-end)); color: var(--btn-text) !important; /* Erzwingt Backend-Farbe */ /* 3D Glass Look */ border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 4px 15px rgba(0, 0, 0, 0.2); border-radius: 12px; /* Padding: Wenig links, viel rechts (Platz für Pfeil) */ padding: 12px 40px 12px 22px; text-decoration: none; font-weight: 600; font-size: 14px; font-family: 'Figtree', sans-serif; overflow: hidden; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); z-index: 1; } /* Text Styling */ .block-821c487 .btn-text { position: relative; z-index: 5; display: inline-block; } /* Pfeile Basis Styling */ .block-821c487 .cta-arrow { position: absolute; width: 14px; height: 14px; fill: currentColor; /* Nimmt Textfarbe an */ transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; z-index: 4; } /* Startpositionen */ .block-821c487 .arrow-right { right: 15px; opacity: 1; } .block-821c487 .arrow-left { left: -25px; opacity: 0; } /* Schimmer (Glint) */ .block-821c487 .btn-primary::after { content: ''; position: absolute; top: 0; left: -150%; width: 80%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-25deg); transition: 0.7s; pointer-events: none; z-index: 2; } /* ========================================= HOVER LOGIK ========================================= */ .block-821c487 .btn-primary:hover { /* Padding Swap (Text rutscht nach rechts) */ padding: 12px 22px 12px 40px; /* 3D Effekt verstärken */ box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3); filter: brightness(1.1); /* Farbe beibehalten (falls Theme dazwischenfunkt) */ color: var(--btn-text) !important; } /* Pfeil Rechts fliegt raus */ .block-821c487 .btn-primary:hover .arrow-right { transform: translateX(40px); opacity: 0; } /* Pfeil Links kommt rein */ .block-821c487 .btn-primary:hover .arrow-left { left: 15px; opacity: 1; } /* Schimmer läuft durch */ .block-821c487 .btn-primary:hover::after { left: 150%; } /* inline */
.section-lines { position: relative; max-width: min(100%, 1400px); margin: 0 auto;
} .section-lines::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; /* Verhindert, dass die Linien beim Klicken stören */ /* Wir rücken die äußeren Linien 1px ein, damit sie sichtbar sind */ background-image: linear-gradient(90deg, #e0e0e0 1px, transparent 1px), linear-gradient(90deg, #e0e0e0 1px, transparent 1px), linear-gradient(90deg, #e0e0e0 1px, transparent 1px); /* Links (1px eingerückt), Mitte, Rechts (1px eingerückt) */ background-position: 1px 0, 50% 0, calc(100% - 1px) 0; background-size: 1px 100%; background-repeat: no-repeat; /* Deckkraft für Dezentheit */ opacity: 0.25;
} /* inline */
:root { --btn-start: #977944; --btn-end: #CABA8B; --btn-text: #ffffff; } /* 1. GRUNDGERÜST (Design CTA 2) */ .block-934c438 .btn-primary { position: relative; display: inline-flex; align-items: center; justify-content: center; /* Farben aus Backend */ background: linear-gradient(135deg, var(--btn-start), var(--btn-end)); color: var(--btn-text) !important; /* Erzwingt Backend-Farbe */ /* 3D Glass Look */ border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 4px 15px rgba(0, 0, 0, 0.2); border-radius: 12px; /* Padding: Wenig links, viel rechts (Platz für Pfeil) */ padding: 12px 40px 12px 22px; text-decoration: none; font-weight: 600; font-size: 14px; font-family: 'Figtree', sans-serif; overflow: hidden; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); z-index: 1; } /* Text Styling */ .block-934c438 .btn-text { position: relative; z-index: 5; display: inline-block; } /* Pfeile Basis Styling */ .block-934c438 .cta-arrow { position: absolute; width: 14px; height: 14px; fill: currentColor; /* Nimmt Textfarbe an */ transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; z-index: 4; } /* Startpositionen */ .block-934c438 .arrow-right { right: 15px; opacity: 1; } .block-934c438 .arrow-left { left: -25px; opacity: 0; } /* Schimmer (Glint) */ .block-934c438 .btn-primary::after { content: ''; position: absolute; top: 0; left: -150%; width: 80%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-25deg); transition: 0.7s; pointer-events: none; z-index: 2; } /* ========================================= HOVER LOGIK ========================================= */ .block-934c438 .btn-primary:hover { /* Padding Swap (Text rutscht nach rechts) */ padding: 12px 22px 12px 40px; /* 3D Effekt verstärken */ box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3); filter: brightness(1.1); /* Farbe beibehalten (falls Theme dazwischenfunkt) */ color: var(--btn-text) !important; } /* Pfeil Rechts fliegt raus */ .block-934c438 .btn-primary:hover .arrow-right { transform: translateX(40px); opacity: 0; } /* Pfeil Links kommt rein */ .block-934c438 .btn-primary:hover .arrow-left { left: 15px; opacity: 1; } /* Schimmer läuft durch */ .block-934c438 .btn-primary:hover::after { left: 150%; } /* inline */
.hero-gallery { display: grid; gap: 20px; width: 100%; max-width: 650px; /* Passt perfekt in eine rechte Hero-Spalte */ margin: 0 auto; } .hero-gallery__item { border-radius: 24px; /* Identisch mit deinen Reviews & Videos */ overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Identisch mit Beauty Lounge Styling */ background: #f4f4f4; transition: transform 0.3s ease; } .hero-gallery__item:hover { transform: translateY(-5px); } .hero-gallery__item { min-height: 0; height: 100%; } .hero-gallery__item img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; display: block; } /* Layout für 2 Bilder */ .hero-gallery[data-count="2"] { grid-template-columns: 1fr 1fr; align-items: center; } .hero-gallery[data-count="2"] .hero-gallery__item { aspect-ratio: 3/4; } .hero-gallery[data-count="2"] .hero-gallery__item:nth-child(2) { transform: translateY(40px); /* Versetzter Look */ } .hero-gallery[data-count="2"] .hero-gallery__item:nth-child(2):hover { transform: translateY(35px); } /* Layout für 3 Bilder (Typisches verteiltes Hero-Grid) */ .hero-gallery[data-count="3"] { grid-template-columns: 1.2fr 1fr; grid-template-rows: minmax(150px, 220px) minmax(150px, 220px); } .hero-gallery[data-count="3"] .hero-gallery__item:nth-child(1) { grid-row: 1 / span 2; /* Erstes Bild groß auf der linken Seite */ height: 100%; } /* Layout für 4 Bilder */ .hero-gallery[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(150px, 200px)); } .hero-gallery[data-count="4"] .hero-gallery__item:nth-child(even) { transform: translateY(30px); /* Leicht versetztes 2x2 Masonry */ } .hero-gallery[data-count="4"] .hero-gallery__item:nth-child(even):hover { transform: translateY(25px); } /* Mobile Ansicht aufräumen */ @media (max-width: 768px) { .hero-gallery[data-count] { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .hero-gallery[data-count="3"] .hero-gallery__item:nth-child(1) { grid-column: 1 / span 2; /* Großes Bild oben auf ganzer Breite */ aspect-ratio: 16/9; } .hero-gallery[data-count="2"] .hero-gallery__item:nth-child(2), .hero-gallery[data-count="4"] .hero-gallery__item:nth-child(even) { transform: none !important; /* Versatz auf Mobile deaktivieren */ } .hero-gallery__item { aspect-ratio: 1/1 !important; } } /* inline */
:root { --btn-start: #977944; --btn-end: #CABA8B; --btn-text: #ffffff; } /* 1. GRUNDGERÜST (Design CTA 2) */ .block-6a9b274 .btn-primary { position: relative; display: inline-flex; align-items: center; justify-content: center; /* Farben aus Backend */ background: linear-gradient(135deg, var(--btn-start), var(--btn-end)); color: var(--btn-text) !important; /* Erzwingt Backend-Farbe */ /* 3D Glass Look */ border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 4px 15px rgba(0, 0, 0, 0.2); border-radius: 12px; /* Padding: Wenig links, viel rechts (Platz für Pfeil) */ padding: 12px 40px 12px 22px; text-decoration: none; font-weight: 600; font-size: 14px; font-family: 'Figtree', sans-serif; overflow: hidden; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); z-index: 1; } /* Text Styling */ .block-6a9b274 .btn-text { position: relative; z-index: 5; display: inline-block; } /* Pfeile Basis Styling */ .block-6a9b274 .cta-arrow { position: absolute; width: 14px; height: 14px; fill: currentColor; /* Nimmt Textfarbe an */ transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; z-index: 4; } /* Startpositionen */ .block-6a9b274 .arrow-right { right: 15px; opacity: 1; } .block-6a9b274 .arrow-left { left: -25px; opacity: 0; } /* Schimmer (Glint) */ .block-6a9b274 .btn-primary::after { content: ''; position: absolute; top: 0; left: -150%; width: 80%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-25deg); transition: 0.7s; pointer-events: none; z-index: 2; } /* ========================================= HOVER LOGIK ========================================= */ .block-6a9b274 .btn-primary:hover { /* Padding Swap (Text rutscht nach rechts) */ padding: 12px 22px 12px 40px; /* 3D Effekt verstärken */ box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 8px 25px rgba(0, 0, 0, 0.3); filter: brightness(1.1); /* Farbe beibehalten (falls Theme dazwischenfunkt) */ color: var(--btn-text) !important; } /* Pfeil Rechts fliegt raus */ .block-6a9b274 .btn-primary:hover .arrow-right { transform: translateX(40px); opacity: 0; } /* Pfeil Links kommt rein */ .block-6a9b274 .btn-primary:hover .arrow-left { left: 15px; opacity: 1; } /* Schimmer läuft durch */ .block-6a9b274 .btn-primary:hover::after { left: 150%; } /* inline */
.faq { width: 100%; max-width: 100%; margin: 0; display: flex; flex-direction: column; gap: 1em; font-family: 'Figtree', sans-serif; } .faq__item { background: #FFFFFF; border: 1px solid #C4C4C4; border-radius: 32px; overflow: hidden; transition: border-color 0.35s ease, box-shadow 0.35s ease; } .faq__item:hover { border-color: #977944; } .faq__item:has(.faq__q.active) { border-color: #977944; box-shadow: 0 8px 28px rgba(151, 121, 68, 0.1); } .faq__q { width: 100%; background: transparent !important; border: none !important; text-align: left; padding: 1.25em 1.5em; font-family: 'Fraunces', serif; font-size: var(--font-size-h3); font-weight: 300; line-height: 1.35; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1em; color: #000000 !important; outline: none !important; transition: color 0.3s ease !important; } .faq__title { flex: 1 1 auto; padding-right: 0.5em; line-height: 1.35; word-wrap: break-word; } .faq button:hover, .faq button:focus, .faq button:active, .faq__q:hover, .faq__q:focus, .faq__q:active, .faq__q.active { color: #977944 !important; background-color: transparent !important; outline: none !important; box-shadow: none !important; text-decoration: none !important; padding-left: 1.5em !important; } .faq__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: linear-gradient(135deg, #977944 0%, #CABA8B 100%); color: #ffffff; font-size: 1.35rem; font-weight: 300; line-height: 1; transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.3s ease; } .faq__q.active .faq__icon { transform: rotate(45deg); background: #977944; } .faq__a { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), padding 0.4s ease-out; font-family: 'Figtree', sans-serif; font-size: 1rem; font-weight: 400; color: #333333; line-height: 1.6; padding: 0 1.5em; } .faq__a.show { padding-bottom: 1.5em; } @media (max-width: 767px) { .faq__item { border-radius: 24px; } .faq__q { padding: 1em 1.15em; } .faq button:hover, .faq button:focus, .faq button:active, .faq__q:hover, .faq__q:focus, .faq__q:active, .faq__q.active { padding-left: 1.15em !important; } .faq__a, .faq__a.show { padding-left: 1.15em; padding-right: 1.15em; } .faq__a.show { padding-bottom: 1.15em; } .faq__icon { width: 2rem; height: 2rem; font-size: 1.2rem; } } /* inline */
:root { --uq-mm-cta-s: #977944; --uq-mm-cta-e: #CABA8B; --uq-mm-cta-t: #ffffff; } #uq-mm-root { font-family: 'DM Sans', sans-serif; position: relative; z-index: 999999999; } #uq-mm-header { position: fixed; top: 15px; left: 15px; right: 15px; height: 70px; z-index: 1000000002; } #uq-mm-root .uq-mm-header-glass { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(20px); border-radius: 0; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 8px 32px rgba(0,0,0,0.06); } #uq-mm-root .uq-mm-logo-link img { margin-top: 5px; height: 32px; width: auto; } #uq-mm-toggle-btn { width: 44px; height: 44px; background: rgba(0,0,0,0.05); border: none; border-radius: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; } #uq-mm-root .uq-mm-bar { display: block; width: 20px; height: 2px; background-color: #111; transition: 0.3s; } #uq-mm-toggle-btn.uq-mm-is-active .uq-mm-top { transform: translateY(4px) rotate(45deg); } #uq-mm-toggle-btn.uq-mm-is-active .uq-mm-bottom { transform: translateY(-4px) rotate(-45deg); } /* PANEL WRAPPER */ #uq-mm-side-panel { position: fixed; top: 95px; left: 0; width: 100%; height: auto; max-height: calc(100dvh - 120px); z-index: 1000000001; pointer-events: none; transform: translateY(-20px); opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); padding: 0 15px; } #uq-mm-side-panel.uq-mm-is-visible { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; } #uq-mm-root .uq-mm-panel-glass-wrapper { width: 100%; max-width: 400px; height: auto; max-height: calc(100dvh - 120px); /* dvh = dynamic viewport height für mobile Browser-Leisten */ background: rgba(255, 255, 255, 0.98) !important; border-radius: 0; border: 1.5px solid #fff; box-shadow: 0 25px 50px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow: hidden; } /* SCROLLING CONTAINER */ #uq-mm-root .uq-mm-panel-inner { position: relative; overflow-x: hidden; overflow-y: auto; /* ENABLE SCROLLING */ overscroll-behavior: contain; /* Verhindert das "Weiter-Scrollen" der Body-Seite auf Android */ -webkit-overflow-scrolling: touch; /* Smooth Scrolling für iOS */ max-height: 100%; width: 100%; transition: height 0.35s cubic-bezier(0.25, 1, 0.5, 1); } /* Custom Scrollbar für die Panel-Liste (Optional, sieht aber sauberer aus) */ #uq-mm-root .uq-mm-panel-inner::-webkit-scrollbar { width: 5px; } #uq-mm-root .uq-mm-panel-inner::-webkit-scrollbar-track { background: transparent; } #uq-mm-root .uq-mm-panel-inner::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 0; } /* ALL LISTS */ #uq-mm-root ul.uq-mm-nav-list, #uq-mm-root ul.sub-menu { list-style: none !important; padding: 0 !important; margin: 0 !important; width: 100%; } #uq-mm-root ul.uq-mm-nav-list { padding: 10px 0 !important; } /* SUB-MENUS (Slide-In Panels) */ #uq-mm-root ul.sub-menu { position: absolute; top: 0; left: 0; background: #ffffff !important; z-index: 10; transform: translateX(100%); visibility: hidden; opacity: 0; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s 0.4s, opacity 0.4s; padding-bottom: 20px !important; height: auto; } #uq-mm-root ul.sub-menu.uq-mm-is-active-panel { transform: translateX(0); visibility: visible; opacity: 1; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s, opacity 0.4s; } /* LIST ITEMS DESIGN */ #uq-mm-root .uq-mm-nav-list li { width: 100% !important; border-bottom: 1px solid rgba(0,0,0,0.04) !important; } #uq-mm-root .uq-mm-nav-list li:last-child { border-bottom: none !important; } #uq-mm-root .uq-mm-nav-list li > a { display: flex !important; justify-content: flex-start !important; align-items: center !important; padding: 18px 25px !important; font-size: 16px !important; color: #111 !important; text-decoration: none !important; font-weight: 500 !important; position: relative; } #uq-mm-root .uq-mm-menu-item-icon { height: 22px !important; width: auto !important; margin-right: 15px !important; } /* EXPANDER ARROW (>) */ #uq-mm-root .uq-mm-expander { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 0; background: rgba(0,0,0,0.02); transition: 0.2s; } #uq-mm-root .uq-mm-expander:active { background: rgba(0,0,0,0.06); } #uq-mm-root .uq-mm-expander svg { width: 18px; height: 18px; stroke: #888; } /* BACK BUTTON */ #uq-mm-root .uq-mm-back-item { background: #f9f9f9 !important; border-bottom: 2px solid rgba(0,0,0,0.06) !important; } #uq-mm-root .uq-mm-back-item > a { font-weight: 600 !important; color: var(--uq-mm-cta-s) !important; font-size: 15px !important; padding: 20px 25px !important; } #uq-mm-root .uq-mm-back-item svg { width: 18px; height: 18px; margin-right: 10px; stroke: var(--uq-mm-cta-s); } /* CTA BUTTON — Jetzt Termin buchen */ #uq-mm-root ul.uq-mm-nav-list > li.uq-mm-cta-item { padding: 16px 24px !important; border-bottom: none !important; } #uq-mm-root ul.uq-mm-nav-list > li.uq-mm-cta-item > a { background: var(--uq-mm-cta-s) !important; color: var(--uq-mm-cta-t) !important; border-radius: 0 !important; padding: 16px !important; justify-content: center !important; font-weight: 600 !important; text-align: center !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; } /* OVERLAY & BODY LOCK */ #uq-mm-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.3); opacity: 0; visibility: hidden; transition: 0.4s; z-index: 1000000000; backdrop-filter: blur(4px); } #uq-mm-overlay.uq-mm-is-visible { opacity: 1; visibility: visible; } /* Strong Body Lock to prevent background scrolling */ body.uq-mm-locked { overflow: hidden !important; overscroll-behavior: none !important; } /* Desktop Ausblendung */ @media (min-width: 1025px) { #uq-mm-root { display: none !important; } } /* uq-mm-design-css */
:root { --uq-mm-accent: #b8966a; --uq-mm-accent-dark: #977944; --uq-mm-surface: #f8f7f4; --uq-mm-border: rgba(184, 150, 106, 0.22); --uq-mm-border-strong: rgba(184, 150, 106, 0.35);
} #uq-mm-root,
#uq-mm-root * { border-radius: 0 !important;
} #uq-mm-root { font-family: "Figtree", sans-serif !important;
} #uq-mm-root .uq-mm-header-glass { background: #ffffff !important; border: 1px solid var(--uq-mm-border) !important; box-shadow: none !important; backdrop-filter: none !important;
} #uq-mm-toggle-btn { background: transparent !important; border: 1px solid var(--uq-mm-border) !important;
} #uq-mm-root .uq-mm-bar { background-color: #1a1a1a !important;
} #uq-mm-root .uq-mm-panel-glass-wrapper { background: #ffffff !important; border: 1px solid var(--uq-mm-border) !important; border-top: 2px solid var(--uq-mm-border-strong) !important; box-shadow: none !important; max-width: 100% !important;
} #uq-mm-root .uq-mm-panel-inner::-webkit-scrollbar-thumb { background: rgba(184, 150, 106, 0.35) !important;
} #uq-mm-root ul.uq-mm-nav-list > li { border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
} #uq-mm-root ul.uq-mm-nav-list > li > a { font-family: "Figtree", sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: rgba(20, 20, 20, 0.65) !important; padding: 16px 24px !important; transition: color 0.2s ease, background 0.2s ease !important;
} #uq-mm-root ul.uq-mm-nav-list > li > a:active,
#uq-mm-root ul.uq-mm-nav-list > li > a:hover { color: #b8966a !important; background: rgba(151, 121, 68, 0.06) !important;
} #uq-mm-root .uq-mm-expander { background: transparent !important; border: none !important;
} #uq-mm-root .uq-mm-expander svg { stroke: var(--uq-mm-accent) !important;
} #uq-mm-root ul.sub-menu { background: var(--uq-mm-surface) !important; border-left: 2px solid var(--uq-mm-border-strong) !important;
} #uq-mm-root ul.sub-menu > li:not(.uq-mm-back-item) { border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
} #uq-mm-root ul.sub-menu > li:not(.uq-mm-back-item):last-child { border-bottom: none !important;
} #uq-mm-root ul.sub-menu > li:not(.uq-mm-back-item) > a { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; padding: 14px 24px !important; font-family: "Figtree", sans-serif !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: rgba(20, 20, 20, 0.58) !important; text-decoration: none !important; transition: color 0.2s ease, background 0.2s ease !important;
} #uq-mm-root ul.sub-menu > li:not(.uq-mm-back-item) > a > span { flex: 1 1 auto; min-width: 0;
} #uq-mm-root ul.sub-menu > li:not(.uq-mm-back-item) > a::after { content: "→"; flex-shrink: 0; color: var(--uq-mm-accent); font-size: 10px; line-height: 1; opacity: 0; transform: translateX(-4px); transition: opacity 0.2s ease, transform 0.2s ease;
} #uq-mm-root ul.sub-menu > li:not(.uq-mm-back-item) > a:active,
#uq-mm-root ul.sub-menu > li:not(.uq-mm-back-item) > a:hover { color: rgba(20, 20, 20, 0.92) !important; background: rgba(151, 121, 68, 0.1) !important;
} #uq-mm-root ul.sub-menu > li:not(.uq-mm-back-item) > a:active::after,
#uq-mm-root ul.sub-menu > li:not(.uq-mm-back-item) > a:hover::after { opacity: 1; transform: translateX(0);
} #uq-mm-root .uq-mm-back-item { background: #ffffff !important; border-bottom: 1px solid var(--uq-mm-border-strong) !important;
} #uq-mm-root .uq-mm-back-item > a { display: flex !important; align-items: center !important; gap: 0.75rem !important; padding: 14px 24px !important; font-family: "Figtree", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: #000000 !important; text-decoration: none !important; transition: color 0.2s ease, background 0.2s ease !important;
} #uq-mm-root .uq-mm-back-item > a:hover,
#uq-mm-root .uq-mm-back-item > a:active { color: #000000 !important; background: rgba(151, 121, 68, 0.1) !important;
} #uq-mm-root .uq-mm-back-item svg { stroke: #000000 !important;
} #uq-mm-root ul.uq-mm-nav-list > li.menu-item-has-children > a { padding-right: 64px !important;
} #uq-mm-root ul.uq-mm-nav-list > li.uq-mm-cta-item { padding: 16px 24px !important; border-bottom: none !important;
} #uq-mm-root ul.uq-mm-nav-list > li.uq-mm-cta-item > a { background: var(--uq-mm-accent-dark) !important; color: #ffffff !important; border-radius: 0 !important; padding: 16px !important; justify-content: center !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-align: center !important;
} #uq-mm-root ul.uq-mm-nav-list > li.uq-mm-cta-item > a:hover,
#uq-mm-root ul.uq-mm-nav-list > li.uq-mm-cta-item > a:active { background: var(--uq-mm-accent) !important; color: #ffffff !important;
} #uq-mm-root ul.uq-mm-nav-list > li:last-child:not(.uq-mm-cta-item) > a { background: none !important; color: rgba(20, 20, 20, 0.65) !important; border-radius: 0 !important; font-weight: 500 !important; text-align: left !important; justify-content: flex-start !important; padding: 16px 24px !important;
} #uq-mm-overlay { background: rgba(26, 26, 26, 0.35) !important; backdrop-filter: blur(2px) !important;
} /* inline */
/* 1. Natives Smooth Scroll für Browser-Unterstützung */ html { scroll-behavior: smooth; } /* 2. Offset-Korrektur: Verhindert, dass der Header das Ziel verdeckt */ /* Ersetze 100px durch die Höhe deines Headers */ [id] { scroll-margin-top: 100px; } /* review-slider-nav-smooth */
#rev-widget .rev-nav__btn { transform: none !important; transition: color 0.45s ease !important;
}
#rev-widget .rev-nav__btn:hover,
#rev-widget .rev-nav__btn:focus,
#rev-widget .rev-nav__btn:active { transform: none !important;
}
#rev-widget .rev-nav__btn .rev-nav__icon { display: inline-block !important; line-height: 1 !important; transform: scale(1); transform-origin: center center; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform;
}
#rev-widget .rev-nav__btn:hover .rev-nav__icon,
#rev-widget .rev-nav__btn:focus-visible .rev-nav__icon { transform: scale(1.15);
}
#rev-widget .rev-dot { transform: scale(1); transition: background 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* CTA-Sektionen: Abstand Fließtext → Button (überschreibt page-root-Reset) */
.page-root .sec-cta .wrap.col > .w-text + .w-btn,
.page-root .sec-cta .wrap.col > .w-head + .w-btn,
.page-root .sec-cta .wrap.col > .widget.w-btn {
  margin-top: 1.5em !important;
}