/* ========================================================================== Stadtwald Klinik — Grundaufbau Stylesheet Dachmarke (Anthrazit) + 4 Bereichswelten: Dental / Aesthea / MKG / Longevity ========================================================================== */ /* -------------------------------------------------------------- Fonts --- */ /* Inter (lokal gehostet, Variable Font) — einheitliche Schriftart für die gesamte Website */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/inter/Inter-Variable.woff2') format('woff2-variations'), url('../fonts/inter/Inter-Variable.woff2') format('woff2'); } @font-face{ font-family:'Inter'; font-style:italic; font-weight:100 900; font-display:swap; src:url('../fonts/inter/Inter-Italic-Variable.woff2') format('woff2-variations'), url('../fonts/inter/Inter-Italic-Variable.woff2') format('woff2'); } /* -------------------------------------------------------- Farbwelten --- */ :root{ --serif:'Inter', -apple-system, 'Segoe UI', sans-serif; --sans:'Inter', -apple-system, 'Segoe UI', sans-serif; --ease:cubic-bezier(.22,.61,.36,1); --maxw:90rem; --maxw-mini:63.9375rem; --maxw-middle: 81.25rem; --gap:clamp(1.25rem,4vw,3rem); --gap-sm: clamp(.5rem, .5vw, .9375rem); --radius:1.125rem; /* Dachmarke / Startseite — Weiß, mit Anthrazit als gezieltem Akzent (Bänder, Footer) */ --bg:#ffffff; --bg-2:#E2E2E2; --bg-3: #EBEBEB; --ink:#000; --ink-soft:rgba(32,31,28,.64); --accent:#3d4a3a; --accent-deep:#242e25; --accent-soft:#7c8a76; --line:rgba(32,31,28,.12); --card-bg:#ffffff; /* Fixer dunkler Ton für bewusste Anthrazit-Akzente (Bänder/Footer), unabhängig vom aktiven Bereichs-Theme */ --ink-900:#242320; /* Text auf var(--accent-deep) (z. B. Dropdown-Hover): je Theme so gewählt, dass WCAG AA (>=4.5:1) für normalen Fließtext eingehalten wird — bei helleren Akzenttönen (Aesthea) reicht Weiß dafür nicht aus. */ --on-accent:#fff; } /* Bereichs-Themes: fluten Hintergrund + Akzentfarbe je Welt */ body[data-theme="dental"]{ --bg:#fff; --bg-2:#EBEBEB; --ink:#000; --ink-soft:#5c5a56; --accent:#8c8c8c; --accent-deep:#5f5f5f; --accent-soft:#c4c4c4; --line:rgba(35,34,32,.12); --card-bg:#F0F0F0; --on-accent:#fff; } body[data-theme="aesthea"]{ --bg:#fff; --bg-2:#f0e4cf; --bg-3: #e2e2e2; --ink:#000; --ink-soft:#6b5f4c; --accent:#c69b69; --accent-deep:#a07a48; --accent-soft:#e0c9a8; --line:rgba(43,36,25,.14); --card-bg:#fffdf9; /* #a07a48 gegen Weiß liegt nur bei ~3,9:1 — zu hell für AA-Fließtext; dunkler Text erreicht hier ~5,4:1. */ --on-accent:#2b2015; } body[data-theme="mkg"]{ --bg:#fff; --bg-2:#dde5ed; --ink:#000; --ink-soft:#4c5c6c; --accent:#33506f; --accent-deep:#1f3550; --accent-soft:#7f9cb4; --line:rgba(28,39,51,.13); --card-bg:#ffffff; --on-accent:#fff; } body[data-theme="longevity"]{ --bg:#fff; --bg-2:#e1e9dc; --ink:#000; --ink-soft:#556150; --accent:#6f8b6a; --accent-deep:#4f6a4b; --accent-soft:#a9bda3; --line:rgba(32,38,30,.13); --card-bg:#ffffff; --on-accent:#fff; } /* --------------------------------------------------------------- Reset - */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} /* overflow-x:hidden lässt manche mobilen Browser (v.a. iOS Safari) per Touch-Drag trotzdem horizontal scrollen (dekorative Bleed-Elemente wie .edge-deco ragen bewusst über den Rand). overflow-x:clip unterbindet das vollständig; Browser ohne Unterstützung ignorieren die Zeile und behalten das hidden-Fallback. */ html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;scrollbar-gutter:stable} /* Lenis (Smooth Scroll) — Boilerplate laut Lenis-Doku. Sobald Lenis aktiv ist, übernimmt es das Smoothing selbst; das native scroll-behavior:smooth von muss dafür weichen (würde sich sonst mit Lenis' Easing beißen). */ html.lenis, html.lenis body{height:auto} html.lenis.lenis-smooth{scroll-behavior:auto} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} .lenis.lenis-scrolling iframe{pointer-events:none} body{ font-family:var(--sans);font-weight:300;line-height:1.65;color:var(--ink); background:var(--bg);-webkit-font-smoothing:antialiased; transition:background .8s var(--ease),color .8s var(--ease); overflow-x: hidden; } img{display:block;max-width:100%;height:auto} a{color: var(--accent);text-decoration: underline; } ul{list-style:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} h1,h2,h3,h4{font-family:var(--serif);font-weight:300;line-height:1.45;letter-spacing:-.01em; text-transform:uppercase; } h1 {margin: 1.25rem 0 1.5rem;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,5vw,2.5rem)} .wrap.mini { max-width: var(--maxw-mini); } .pad{padding:clamp(1.875rem, 7vw, 3.125rem) 0} .pad-sm{padding:clamp(1.25rem,2vw,1.875rem) 0} .pad-lg { padding: clamp(3.125rem, 4vw, 5.3125rem) 0 } .pad-xl { padding: clamp(5.3125rem, 2vw, 9.0625rem) 0 } .pad-no{padding:0} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;} } .subheadline{display:inline-flex;align-items:center;gap:.75rem;font-size:1.06rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);font-weight:600} p {margin-bottom:1.125rem;} .h-xl{font-size:clamp(2.4rem,6vw,5.6rem);letter-spacing:-.02em} .h-lg{font-size:clamp(2rem,4.4vw,2.6rem)} .h-md{font-size:clamp(1.5rem,2.6vw,2.1rem)} .lead{font-size:.938rem;color:var(--ink);font-weight:300} em{font-style:italic;color:var(--accent)} /* Leistungsseiten-Intro (z. B. Prophylaxe) — zentrierter Kopf aus zwei Überschriftenteilen + schmalem Fließtext */ .service-intro{text-align:center} .service-intro-title{ display:flex;flex-direction:column;align-items:center;justify-content:center; row-gap:.375rem;width:100%;margin:0 0 1.5rem; } .service-intro-title .sit-label{ color:#AFB0B3;font-size:2.375rem;text-transform:uppercase; } .service-intro-title .sit-tagline{ order:-1; color:#000;font-size:1.06875rem;text-transform:uppercase; } .service-intro-content{max-width:80ch;margin:0 auto} .firstone { margin-top: 9.375rem; } /* --------------------------------------------------------------- Buttons */ .btn{ display:inline-flex;align-items:center;gap:.75rem;padding:.9375rem 1.875rem; font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500; border:1px solid currentColor;color:var(--ink);transition:all .45s var(--ease); white-space:nowrap; } .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff} .btn-solid{background:var(--accent);border-color:var(--accent);color:#fff} .btn-solid:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff} .btn-ghost-light{color:#fff;border-color:rgba(255,255,255,.55)} .btn-ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff} a.btn { text-decoration: none; } /* ================================================================ HEADER */ /* .header-zone reserviert die Höhe des (jetzt fixed statt sticky) Headers im normalen Fluss, damit die Hero-Section unverändert direkt darunter beginnt. */ .header-zone{position:relative;min-height:7.1875rem} /* Hintergrund-Platte separat vom Header-Inhalt (eigenes Stacking-Level): so kann das Hero-Portrait DAVOR (über der Platte), aber HINTER dem Menü liegen. */ #site-header-bg{ position:fixed;top:0;left:0;right:0;z-index:500; background:#fff; transition:box-shadow .45s var(--ease),transform .4s var(--ease); } #site-header-bg.is-scrolled{box-shadow:0 .5rem 1.875rem rgba(20,20,18,.06)} #site-header{ position:fixed;top:0;left:0;right:0;z-index:1000; /* winziger, unsichtbarer Alpha-Wert erzwingt eine eigene Compositing-Ebene für den transparenten Header — ohne ihn rendert Chromium darunterliegende Elemente (z. B. das Hero-Portrait) fälschlich undurchsichtig weiß. */ background-color:rgba(255,255,255,.02); transition:background-color .45s var(--ease),transform .4s var(--ease); } #site-header .wrap { max-width: 117.5rem; } #site-header.is-scrolled{background-color:rgba(255,255,255,.98)} /* Menü sitzt anfangs oben (Scroll 0). Zwischen 0–100px Scroll blendet es aus und scrollt nicht mit; erst ab 100px Scroll blendet es fixiert wieder ein und bleibt danach kleben (siehe main.js). */ .header-zone.is-hidden #site-header, .header-zone.is-hidden #site-header-bg{transform:translateY(-100%)} .nav-row{position:relative;display:flex;align-items:center;justify-content:space-between;padding:2rem 0} .nav-brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5} .nav-brand img{height:4.6875rem;transition:height .45s var(--ease)} #site-header.is-scrolled .nav-brand img{height:3.125rem} .nav-flyout{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);width:100%} .nav-right-group{display:flex;align-items:center;gap:1.625rem;flex-shrink:0} .nav-main{display:flex;align-items:center;gap:.125rem} .nav-main > li{position:relative} .nav-main > li > a{ display:flex;align-items:center;gap:.375rem;padding:.6875rem 1rem;font-size:.875rem; letter-spacing:.16em;color:var(--ink);opacity:.72;white-space:nowrap; transition:opacity .3s,color .3s; text-decoration: none; } /* Welt-Menü kann mehr/längere Einträge haben als der Haupt-Menü — bei Bedarf horizontal scrollen statt umzubrechen oder den rechten Bereich aus dem Fenster zu drücken. Die Dropdown-Panels selbst werden bei Hover per JS aus diesem scrollenden Container gelöst und als position:fixed neu platziert (siehe main.js), da overflow-x hier sonst auch die Panels vertikal clippen würde. */ .nav-main-left{flex:1 1 auto;min-width:0;max-width:40%;overflow-x:auto;scrollbar-width:none;justify-content:center} .nav-main-left::-webkit-scrollbar{display:none} .nav-main-left > li{flex-shrink:0} .nav-main-world > li > a{padding:.5625rem .75rem;font-size:.78rem;letter-spacing:.07em} .nav-main > li > a:hover, .nav-main > li.is-active > a{opacity:1;color:var(--accent-deep)} .nav-main .caret{width:.5rem;height:.5rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin-top:-.25rem;opacity:.7;transition:transform .3s} .nav-main > li:hover .caret, .nav-main > li.is-open .caret{transform:rotate(225deg);margin-top:.125rem} .dropdown{ position:absolute;top:calc(100% + .875rem);left:50%;transform:translate(-50%,.625rem); min-width:16.25rem;background:#fff;border-radius:0;box-shadow:0 1.5rem 3.75rem rgba(0,0,0,.18); padding:.625rem;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s; /* Höher als #site-header (z-index:1000): der Header ist vor dem Scrollen fast transparent (rgba(255,255,255,.02)) und lag bisher ÜBER dem Dropdown — dadurch wurde die dd-head-Kategorieüberschrift, die direkt unter dem Header sitzt, sichtbar "verwaschen"/unleserlich. */ z-index:1100; } /* pointer-events erst beim tatsächlichen Hover/Open aktivieren: Panels liegen breiter (min-width:260px) als ihr Trigger und können bei eng stehenden Menüpunkten benachbarte Trigger überlappen — ohne dies würde ein noch ausblendendes Dropdown (.3s Transition) Klicks auf dem Nachbar-Item blockieren. */ .nav-main > li:hover .dropdown, .nav-main > li.is-open .dropdown{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto} /* Vom scrollenden .nav-main-left gelöstes, per JS fixed positioniertes Panel (siehe main.js) — hier ist "left/top" bereits absolut in px gesetzt. */ .dropdown.dropdown-active{opacity:1;visibility:visible;pointer-events:auto} .dropdown a{ display:block;padding:.6875rem 1rem;border-radius:0;font-size:.875rem;color:#26251f; transition:background .25s,color .25s; text-decoration: none; } .dropdown a:hover, .dropdown a.is-active{background:var(--accent-deep);color:var(--on-accent)} .dropdown .dd-head{display:block;padding:.5rem 1rem .25rem;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:#9a968b} .nav-cta{margin-left:.375rem} .nav-cta .btn{background:var(--bg);border-color:var(--accent);color: var(--accent);} .nav-cta .btn:hover{background:var(--accent-deep);border-color:var(--accent-deep); color: var(--bg)} .nav-burger{display:none;flex-direction:column;gap:.3125rem;width:1.625rem;z-index:1100;position:relative; margin-left: 1.5625rem;} .nav-burger span{display:block;height:.09375rem;width:100%;background:var(--ink);transition:transform .35s var(--ease),opacity .35s var(--ease)} .nav-burger.is-active span:nth-child(1){transform:translateY(.40625rem) rotate(45deg)} .nav-burger.is-active span:nth-child(2){opacity:0} .nav-burger.is-active span:nth-child(3){transform:translateY(-.40625rem) rotate(-45deg)} html.nav-locked, body.nav-locked{overflow:hidden} body.nav-locked .floating-contact{display:none} /* Bereichs-Subnav (Reiter innerhalb einer Welt) */ #sub-nav{ background:var(--bg-2);border-bottom:1px solid var(--line); opacity:0;transition:opacity .5s var(--ease); } #sub-nav.show{opacity:1} .subnav-row{display:flex;gap:.25rem;overflow-x:auto;padding:.875rem clamp(1.25rem,5vw,3.5rem);white-space:nowrap} .subnav-row a{font-size:.76rem;padding:.5rem .875rem;border-radius:1.25rem;color:var(--ink-soft);transition:.3s} .subnav-row a:hover,.subnav-row a.is-active{background:var(--accent);color:#fff} @media(max-width:111.25rem){ .nav-burger{display:flex} .nav-brand img{height: 3.75rem} .nav-flyout{ position:fixed;top:0;left:0;height:100vh;width:min(21.25rem,84vw); background:var(--bg-2);flex-direction:column;align-items:flex-start;justify-content:flex-start; padding:6.875rem 2.125rem 2.5rem;transform:translateX(-100%);transition:transform .5s var(--ease);gap:1.375rem;overflow-y:auto; justify-content:flex-start; } .nav-flyout.is-open{transform:translateX(0)} .nav-right-group{flex-direction:column;align-items:flex-start;gap:1.125rem;width:100%} .nav-main{flex-direction:column;align-items:flex-start;gap:.25rem;width:100%} .nav-main > li{width:100%} .nav-main > li > a{color:var(--ink);opacity:1;width:100%;padding:.875rem .375rem;font-size:.875rem;white-space:normal;overflow-wrap:anywhere;min-width:0} .nav-main-left{max-width:none;overflow:visible} .nav-main-left > li{flex-shrink:1} .nav-main-world > li > a{padding:.875rem .375rem;font-size:.875rem;letter-spacing:.16em} .dropdown{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;background:transparent;display:none;padding:0 0 0 .875rem} /* Gleiche Selektor-Spezifität wie die globale Hover/Open-Regel (weiter oben im Stylesheet) nötig, sonst gewinnt deren transform:translate(-50%,0) hier im Media-Query und schiebt das Panel seitlich aus dem Viewport. */ .nav-main > li.is-open .dropdown{display:block;transform:none} .nav-cta{margin-left:0;width:100%} .nav-cta .btn{width:100%;justify-content:center} } /* ================================================================= HERO */ .hero{position:relative; height:100vh; max-height: 53.125rem; background:var(--bg-2)} .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-media img{width:100%;height:130%;object-fit:cover;transform:translateY(0);will-change:transform} .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,14,12,.5) 0%,rgba(15,14,12,.08) 38%,rgba(15,14,12,.82) 100%)} .hero-media.nooverlay::after { display: none; } /* Welt-Hero: reine Bild-Section, nur Bereichs-Logo (weiß) links vertikal zentriert + Fleur-Icon (grau) unten, überlappend über den Rand der Hero-Section hinausragend — kein Textinhalt. .hero-content nutzt die normale .wrap-Breite, damit das Logo an der gleichen Content-Kante wie Header/Footer/Sections ausgerichtet ist statt am Viewport-Rand. */ .hero-content{position:absolute;inset:0;z-index:2;display:flex;align-items:center;pointer-events:none} .hero-logo-wrap{width:34.375rem;max-width:42vw;pointer-events:none} .hero-logo-wrap img{width:100%;filter:brightness(0) invert(1)} .hero-icon{ position:absolute;z-index:1;left:50%;bottom:0;transform:translate(-50%,55%); width:34.375rem;max-width:78vw;aspect-ratio:548.734/534.352;opacity:1;pointer-events:none; background:var(--accent); -webkit-mask:url(../img/logo/icon-grau.svg) center/contain no-repeat; mask:url(../img/logo/icon-grau.svg) center/contain no-repeat; } @media(max-width:56.25rem){ .hero-logo-wrap{width:min(26.25rem,58vw)} } .parallax-band{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden} .parallax-band .hero-media img{height:120%} .parallax-band .band-inner{position:relative;z-index:2;color:#fff;text-align:center;width:100%} .parallax-band blockquote{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.8rem);font-style:italic;max-width:22ch;margin:0 auto 1.125rem} .behind { z-index: -1; } /* ============================================================ SECTIONS */ .eck{position:relative} /* Dekorative Grafik am linken Bildschirmrand (zwischen zwei Sections) — zur Hälfte aus dem Viewport geschoben, blendet beim Scrollen ein/aus und schwebt dabei leicht mit (siehe main.js, das transform/opacity per GSAP setzt — bewusst kein transform hier, sonst würde GSAPs erster Zugriff aufs Element die CSS-Positionierung ersatzlos überschreiben). Reserviert bewusst keine eigene Höhe: das Bild darf vertikal in die Nachbar-Sections hineinragen, ohne deren Layout zu beeinflussen. */ .edge-deco{position:relative;height:0;pointer-events:none} .edge-deco img{ position:absolute;left:0;top:0;z-index:-1; width:59.0625rem;max-width:82vw; } /* Spiegelvariante: gleiche Mechanik, aber am rechten Bildschirmrand. GSAP setzt bei .right zusätzlich xPercent:50 statt -50 (siehe main.js). */ .edge-deco.right img{left:auto;right:0} @media(max-width:47.5rem){ .edge-deco img{width:min(59.0625rem,90vw)} } .middle { max-width: 70vw; margin:0 auto; } .small { max-width: 50vw; margin: 0 auto; } .smallsec { max-width: 54vw; margin: 0 auto; } .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center} .grid-2.cover { align-items: unset; } .grid-2.cover img { height: 100%; } @media(max-width:52.5rem){.grid-2{grid-template-columns:1fr}} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)} @media(max-width:56.25rem){.grid-3{grid-template-columns:1fr}} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.125rem} @media(max-width:62.5rem){.grid-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:35rem){.grid-4{grid-template-columns:1fr}} .card{background:var(--card-bg);border:1px solid var(--line); padding:clamp(1.625rem,4vw,2.5rem)} .card .num{font-family:var(--serif);font-size:2.2rem;color:var(--accent);display:block;margin-bottom:.875rem} /* Vergleichstabelle: bewusst eckig (kein border-radius), tabellarische Gegenüberstellung statt gleichförmiger Card-Grids. */ .compare-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line)} .compare-table{width:100%;min-width:51.25rem;border-collapse:collapse;font-size:.92rem} .compare-table th,.compare-table td{padding:1.25rem 1.5rem;text-align:left;vertical-align:top;border:1px solid var(--line)} .compare-table thead th{background:var(--accent-deep);color:var(--on-accent);font-family:var(--serif);font-size:1.05rem;font-weight:500;white-space:nowrap} .compare-table thead th:first-child{background:var(--ink)} .compare-table tbody th{width:12.5rem;background:var(--card-bg);font-weight:600;white-space:nowrap} .compare-table tbody td{background:var(--bg)} .compare-table tbody tr:nth-child(even) td{background:var(--card-bg)} /* Unter 52.5rem: statt horizontalem Scrollen wird jede Zeile (Attribut) zu einem eigenen Block, in dem die vier Spalten (Kronen, Inlays & Onlays …) per data-label als Mini-Label ausgewiesen werden. */ @media(max-width:52.5rem){ .compare-table-wrap{overflow-x:visible;border:none} .compare-table{min-width:0} .compare-table thead{position:absolute;width:.0625rem;height:.0625rem;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .compare-table,.compare-table tbody,.compare-table tr,.compare-table th,.compare-table td{display:block;width:100%} .compare-table tbody tr{border:1px solid var(--line);margin-bottom:1.125rem} .compare-table tbody tr:last-child{margin-bottom:0} .compare-table tbody th{width:auto;background:var(--ink);color:var(--on-accent);border:none;padding:.875rem 1.25rem} .compare-table tbody td{border:none;border-top:1px dotted var(--line);padding:1rem 1.25rem} .compare-table tbody tr:nth-child(even) td{background:var(--bg)} .compare-table tbody td:before{content:attr(data-label);display:block;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.375rem} } .icon-list{display:flex;flex-direction:column;gap:1rem} .icon-list li{display:flex;align-items:flex-start;gap:.875rem;font-size:1.02rem;} .icon-list li img{width:1.375rem;height:1.375rem;flex:none;margin-top:.1875rem;filter:brightness(0)} /* Sonderfall: Icon+Label in einer Zeile, Beschreibungstext darunter (statt danebenstehend) — nur für einzelne Listen per Zusatzklasse, nicht global */ .icon-list-stacked li{flex-direction:column;align-items:flex-start;gap:.375rem} .icon-list-stacked li .il-head{display:flex;align-items:center;gap:.875rem} .icon-list-stacked li .il-head img{margin-top:0} .icon-list-stacked li .il-desc{padding-left:2.25rem} /* Textsection mit großem, beim Scrollen mitschwebendem Icon am rechten Bildschirmrand (zur Hälfte außerhalb des Viewports) */ .float-icon-section{position:relative} .float-icon-section .wrap{position:relative;z-index:1} .float-icon-wrap{ position:absolute;top:0;right:0;bottom:0;width:57.5rem; transform:translateX(50%);pointer-events:none;z-index:0; } .float-icon{ position:sticky;top:clamp(1.25rem,6vh,5.625rem); width:100%;aspect-ratio:59.3/57.8;background:#D0D0D0;opacity:.45; -webkit-mask:url(../img/logo/icon.svg) center/contain no-repeat; mask:url(../img/logo/icon.svg) center/contain no-repeat; animation:float-icon-bob 6s ease-in-out infinite alternate; } @keyframes float-icon-bob{ from{transform:translateY(-1.125rem)} to{transform:translateY(1.125rem)} } .float-icon-text{max-width:50%} @media(max-width:87.5rem){.float-icon-wrap{width:min(57.5rem,60vw)}} @media(max-width:56.25rem){ .float-icon-text{max-width:100%} .float-icon-wrap{display:none} } /* Vorteile-Icons: Icon zentriert auf grauem Kreis, gepunktete Diagonale von links oben nach rechts unten darüber, Versalien-Label darunter */ .vorteile-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,4vw,2.5rem); margin-top:clamp(2.25rem,5vw,3.5rem); } @media(max-width:56.25rem){.vorteile-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:35rem){.vorteile-grid{grid-template-columns:1fr}} .vorteile-item{display:flex;flex-direction:column;align-items:center} .vorteile-circle{ position:relative;width:clamp(9.375rem,14vw,13.125rem);aspect-ratio:1;border-radius:50%; background:#F5F5F5;display:flex;align-items:center;justify-content:center; margin-bottom:1.5rem; } .vorteile-circle img{width:42%;height:42%;object-fit:contain} .vorteile-circle::after{ content:"";position:absolute;top:50%;left:50%;width:135%;height:0; border-top:2px dotted #000;transform:translate(-50%,-50%) rotate(45deg); pointer-events:none; } .vorteile-grid.no-diagonal .vorteile-circle::after{content:none} /* 3-2-Layout: erste Zeile 3 Kacheln, zweite Zeile 2 Kacheln zentriert darunter */ .vorteile-grid.grid-3-2{grid-template-columns:repeat(6,1fr)} .vorteile-grid.grid-3-2 .vorteile-item{grid-column:span 2} .vorteile-grid.grid-3-2 .vorteile-item:nth-child(4){grid-column:2 / span 2} .vorteile-grid.grid-3-2 .vorteile-item:nth-child(5){grid-column:4 / span 2} @media(max-width:56.25rem){ .vorteile-grid.grid-3-2{grid-template-columns:repeat(2,1fr)} .vorteile-grid.grid-3-2 .vorteile-item, .vorteile-grid.grid-3-2 .vorteile-item:nth-child(4), .vorteile-grid.grid-3-2 .vorteile-item:nth-child(5){grid-column:auto} } @media(max-width:35rem){.vorteile-grid.grid-3-2{grid-template-columns:1fr}} .vorteile-label{ font-size:.8rem;letter-spacing:.08em;text-transform:uppercase; text-align:center;line-height:1.6;color:var(--ink); } /* Online-Termin-CTA: durchgehend graue Fläche (randlos), Inhalt darin schmale Button-Spalte (1/3) neben Text (2/3), max. 50vw zentriert */ .termin-cta-band{background:#E8E8E8} .termin-cta{ max-width:50vw;margin:0 auto; display:grid;grid-template-columns:1fr 2fr;gap:clamp(1.5rem,4vw,3rem); align-items:center;padding:clamp(1.875rem,4vw,3.5rem) clamp(1.5rem,4vw,3rem); } .termin-cta-btn{display:flex;justify-content:center} .termin-cta-text p{margin:0;color:var(--ink-soft)} @media(max-width:56.25rem){ .termin-cta{max-width:92vw;grid-template-columns:1fr;text-align:center} } /* Text- vs. Bild-Spalte leicht gegeneinander eingerückt (z. B. Parodontitis-Section) */ .indent-block{padding-left:clamp(1rem,3vw,2.5rem); padding-right: clamp(1rem, 4vw, 3.75rem)} @media(max-width:52.5rem){.indent-block{padding-left:0}} /* Individuelle-Prophylaxe-Box: zentriertes Karten-Layout, Foto ragt oben in die graue Fläche hinein, Logo-Icon hängt rechts oben über den Rand hinaus */ .pi-wrap{position:relative;max-width:56vw;margin:0 auto} .pi-icon{ position:absolute;z-index:5;top:clamp(12.5rem, -6vw, -2.5rem);right:clamp(-11.4375rem, -11vw, -4.375rem); width:clamp(12.5rem,22vw,26.75rem);aspect-ratio:59.3/57.8;background:#4E4E4E; pointer-events:none; -webkit-mask:url(../img/logo/icon.svg) center/contain no-repeat; mask:url(../img/logo/icon.svg) center/contain no-repeat; } .pi-photo{position:relative;z-index:2;width:68%;margin:0 auto} .pi-photo img{width:100%;display:block;aspect-ratio:674/690;object-fit:cover} .pi-box{ position:relative;z-index:1;background:#E8E8E8; margin-top:clamp(-25.625rem, -16vw, -11.25rem); padding:clamp(13.75rem, 20vw, 27.5rem) clamp(1.5rem, 6vw, 5.1875rem) clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 8vw, 8.125rem); } .pi-list{margin:1rem 0 1.5rem;display:flex;flex-direction:column;gap:.375rem;width: 80ch;} .pi-list-item{background:#fff;padding:.625rem 1.25rem;font-size:.95rem} @media screen and (max-width: 67.5rem) {.pi-icon { display: none }} @media(max-width:56.25rem){ .pi-wrap{max-width:92vw} .pi-box{margin-top:1.25rem;padding:clamp(1.5rem,4vw,2rem)} } /* FAQ: zweispaltig, Frage/Antwort-Paare zeilenweise per Grid ausgerichtet, sodass nebeneinanderliegende Elemente immer gleich hoch sind */ .faq-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(1.5rem,4vw,4rem)} .faq-item{padding:1.75rem 0;border-bottom:1px dotted #000} .faq-item p:last-child{margin-bottom:0} .faq-grid > .faq-item:nth-last-child(-n+2){border-bottom:none} @media(max-width:52.5rem){ .faq-grid{grid-template-columns:1fr} .faq-item{border-bottom:1px dotted #000} .faq-grid > .faq-item:last-child{border-bottom:none} } /* Welt-Intro: Text + Bild (2/3) neben zwei gestapelten Bildern (1/3) */ .intro-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--gap-sm);align-items:start} .intro-media-main{margin-top:5.3125rem;aspect-ratio:4/3} .intro-media-main img{width:100%;height:100%;object-fit:cover} .intro-media-side{display:flex;flex-direction:column;gap:var(--gap-sm); margin-top: 12.5rem;} .intro-media-side .media-zoom{aspect-ratio:3/4} .intro-media-side .media-zoom.quad{ aspect-ratio: 1/1; max-width: 80%; } .intro-text p { padding-right: 2.8125rem; } .intro-media-side img{width:100%;height:100%;object-fit:cover} @media(max-width:52.5rem){ .intro-grid{grid-template-columns:1fr} .intro-media-side{flex-direction:row} .intro-media-side .media-zoom{flex:1} } .vorteile .wrap { width: 55%; margin:0 auto; display: grid; grid-template-columns: .5fr 1.5fr; gap: var(--gap); align-items: center; } .vorteile h2 { text-align: right; } @media(max-width:52.5rem){ .vorteile .wrap{width:100%;grid-template-columns:1fr;gap:1.5rem} .vorteile h2{text-align:left} } .vorteile strong { text-transform: uppercase; font-weight: 700; } /* Bento — vier Welten */ .bento{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3.125rem} @media(max-width:62.5rem){.bento{grid-template-columns:repeat(2,1fr)}} @media(max-width:37.5rem){.bento{grid-template-columns:1fr}} .bento-cell{ position:relative;overflow:hidden;border-radius:var(--radius);min-height:26.25rem; display:flex;flex-direction:column;justify-content:flex-end;padding:1.875rem;color:#fff; } .bento-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)} .bento-cell::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(10,10,8,.88));transition:background .5s} .bento-cell:hover img{transform:scale(1.08)} .bento-cell .bc-inner{position:relative;z-index:2} .bento-cell .bc-tag{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;opacity:.8;margin-bottom:.5rem;display:block} .bento-cell h3{font-size:1.7rem} .bento-cell .bc-arrow{position:absolute;top:1.625rem;right:1.625rem;width:2.375rem;height:2.375rem;border:1px solid rgba(255,255,255,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.4s var(--ease);z-index:2} .bento-cell:hover .bc-arrow{background:#fff;color:#111;transform:rotate(45deg)} /* Stats / Kennzahlen (dunkles Band) */ .stats-band{background:var(--bg-2);color:var(--ink)} .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);text-align:center} @media(max-width:47.5rem){.stats-row{grid-template-columns:repeat(2,1fr)}} .stat .figure{font-family:var(--serif);font-size:clamp(2.4rem,5vw,4.2rem);color:var(--accent)} .stat .cap{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:.5rem} .chips{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:2.875rem} .chip{border:1px solid var(--line);border-radius:1.875rem;padding:.625rem 1.25rem;font-size:.78rem;color:var(--ink-soft)} /* Zitat */ .quote-block{max-width:53.125rem;margin:0 auto;text-align:center} .quote-block blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.35} .quote-block cite{display:block;margin-top:1.5rem;font-size:.82rem;letter-spacing:.08em;color:var(--ink-soft);font-style:normal} /* Zitat mit Portrait — quadratisches Foto (links, hinter) + überlappende Zitat-Box (rechts, davor) */ .quote-portrait{padding-bottom:7.5rem} .quote-portrait-layout{position:relative;display:flex;align-items:center;justify-content:center} .quote-portrait-photo{position:relative;z-index:-1;width:54.125rem;height:54.125rem;flex-shrink:0;overflow:hidden} .quote-portrait-photo img{width:100%;height:100%;object-fit:cover} .quote-portrait-box{ position:relative;z-index:2;flex-shrink:0; width:38.75rem;aspect-ratio:1/1; margin:4rem 0 4rem -19.375rem; /* liegt zur Hälfte der eigenen Breite auf dem Foto */ background:#E2E2E2;color:var(--ink); padding:9.5625rem 4rem; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; } .quote-portrait-box .qp-icon{height:4.875rem;width:auto;margin-bottom:1.75rem;filter:brightness(0) invert(1)} .quote-portrait-box blockquote{font-size:.9375rem;line-height:1.75;font-style:italic} .quote-portrait-box cite{display:block;margin-top:1.375rem;font-size:.9375rem;font-style:normal; font-weight: 500;letter-spacing:.02em} @media(max-width:81.25rem){ .quote-portrait-photo{width:37.5rem;height:37.5rem} .quote-portrait-box{width:27.5rem;margin-left:-13.75rem;padding:5.625rem 2.75rem} } @media(max-width:56.25rem){ .quote-portrait-layout{display:block} .quote-portrait-photo{width:100%;height:auto;aspect-ratio:1/1} .quote-portrait-box{ width:78%;max-width:26.25rem;aspect-ratio:auto; margin:-18% auto 0;padding:3.5rem 2rem; } } @media(max-width:35rem){ .quote-portrait-box{width:88%;padding:2.5rem 1.5rem;margin-top:-14%} } /* Leistungen im Überblick — Volltonhintergrund + Fullimage + Leistungs-Karten */ .leistungen-section{background:#fff} .leistungen-title-band{background:#E2E2E2} .leistungen-title{ font-size:3.125rem;color:#000;text-align:center;padding:4.125rem 0;font-weight:300; } .leistungen-image{width:100%;height:49.375rem;overflow:hidden} .leistungen-image img{width:100%;height:100%;object-fit:cover;display:block} .leistungen-section .wrap.pad-lg { margin-top: -11.25rem;} .leistungen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem; row-gap: 7.1875rem;} @media(max-width:60rem){.leistungen-grid{grid-template-columns:1fr 1fr}} @media(max-width:40rem){.leistungen-grid{grid-template-columns:1fr}} .leistung-card{ position:relative;background:var(--card-bg);border:1px solid #C4C4C4; border-radius:2.3125rem;padding:11.25rem 1.5625rem 4.6875rem;text-align:center; display:flex;flex-direction:column;height:100%; } .leistung-icon{ position:absolute;top:0;left:50%;transform:translate(-50%,-35%); width:11.8125rem;height:11.8125rem;border-radius:50%;background:#fff; display:flex;align-items:center;justify-content:center; border: 1px solid #707070; } .leistung-icon img{width:56%;height:56%;object-fit:contain} .leistung-card h3{font-size: 2.25rem;margin:0 0 1rem;font-weight:300;line-height:1.3} .leistung-card p{font-size:.92rem;line-height:1.65;margin-bottom:1.5rem} .leistung-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.625rem;margin-top:auto} .leistung-tag{ display:inline-flex;align-items:center;flex:0 0 auto;padding:.5625rem 1.125rem; border:1px solid var(--ink);border-radius:0;white-space:nowrap; font-size:.813rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink); transition:background .3s,color .3s; background: #fff; text-decoration: none; } .leistung-tag:hover{background:var(--ink);color:#fff} @media(max-width:40rem){ .leistungen-title{font-size:clamp(1.75rem,7vw,2.5rem);margin:2.75rem 0} .leistungen-image{height:21.25rem} } /* Ganzheitlich denken. Präzise behandeln. — Masonry-Bildgruppe + Text (analog Startseite .s09) */ .gz-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 1.5rem;max-width:85%;margin:0 auto} .gz-col-a{display:flex;flex-direction:column;gap:1.5rem;margin-top:3.75rem} .gz-col-a .media-zoom:first-child{aspect-ratio:3/2} .gz-col-a .media-zoom:last-child{aspect-ratio:3/4} .gz-col-a .media-zoom img{width:100%;height:100%;object-fit:cover} .gz-col-b{display:flex;flex-direction:column;gap:2.5rem} .gz-col-b .media-zoom{aspect-ratio:3/4;width:75%;align-self:flex-start} .gz-col-b .media-zoom img{width:100%;height:100%;object-fit:cover} .gz-text{width:118%; margin-left: 3.75rem; margin-top: 6.25rem;} .gz-title{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.25;margin-bottom:1.5rem} .gz-text p{color:var(--ink-soft)} .gz-text strong{color:var(--ink);font-weight:600} @media(max-width:52.5rem){ .gz-grid{grid-template-columns:1fr;max-width:100%} .gz-col-a{margin-top:0} .gz-col-b .media-zoom{width:100%;align-self:stretch} .gz-text{width:100%;margin-left:0} } /* Verwandte Fachbereiche — graues Titelband + Bildreihen mit farbigem Fleur-Icon */ .vf-band{background:#E2E2E2} .vf-title{text-transform:none;font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:1rem; text-align: center;} .vf-lead{color: #000;text-align: center;margin:0 auto;} .vf-lead:last-child{margin-bottom:0} .vf-section .wrap { max-width: var(--maxw-middle); } .vf-row{display:grid;grid-template-columns:1fr 1fr;gap:3.75rem;align-items:center} .vf-row + .vf-row{margin-top:3.25rem} .vf-media{position:relative;display:flex;align-items:center} .vf-media .media-zoom{position:relative;z-index:1;width:100%;aspect-ratio:3/2; border-left: 10px solid #fff;} .vf-media .media-zoom img{width:100%;height:100%;object-fit:cover} .vf-icon{ position: absolute; z-index: 0; left: -50%; top: 50%; transform: translateY(-50%); width: 100%; height: 100%; -webkit-mask:url(../img/logo/icon.svg) center/contain no-repeat; mask:url(../img/logo/icon.svg) center/contain no-repeat; } .vf-icon-mkg{background:#33506f} .vf-icon-longevity{background:#6f8b6a} .vf-content{display:flex;flex-direction:column;gap:1.625rem;align-items:flex-start} .vf-entry h3{font-size:2.375rem;margin-bottom:.625rem;font-weight:300} .vf-entry p{color:var(--ink-soft);margin-bottom:0} .vf-entry strong{color:var(--ink);font-weight:600} @media(max-width:56.25rem){ .vf-row{grid-template-columns:1fr;gap:3.125rem} .vf-row + .vf-row{margin-top:4.375rem} .vf-icon{width:9.375rem;height:9.375rem;left:-2.5rem} } @media(max-width:30rem){ .vf-icon{display:none} } /* Verwandte Fachbereiche */ .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem} @media(max-width:50rem){.related-grid,.related-grid.cols-2{grid-template-columns:1fr}} .related-card{ display:flex;align-items:center;justify-content:space-between;gap:.875rem; padding:1.5rem 1.625rem;border-radius:.875rem;background:var(--card-bg);border:1px solid var(--line); transition:transform .4s var(--ease),box-shadow .4s var(--ease); text-decoration:none; } .related-card:hover{transform:translateY(-.25rem);box-shadow:0 1.25rem 2.5rem rgba(0,0,0,.08)} .related-card .rc-tag{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:.25rem} /* CTA Band */ .cta-band{background:var(--accent);color:#fff;text-align:center} .cta-band h2{color:#fff;font-size: 1.788rem;} .cta-band .lead { margin:1.125rem auto 2.125rem; color:rgba(255,255,255,.9);} .cta-band p { color: #fff; text-align: center; width: 100%; font-size: 1.1rem; width: 100%; } .cta-band .btn{border-color:#fff} .cta-band .btn:hover{background:#fff;color:var(--accent-deep)} /* ================================================================ FOOTER */ #site-footer{color:var(--ink);padding:clamp(3.75rem,8vw,6.25rem) 0 0;} #site-footer .wrap { max-width: 117.5rem; } .footer-grid{display:grid;grid-template-columns:32.125rem 1fr 1fr 1fr 1fr;gap:var(--gap)} @media(max-width:75rem){.footer-grid{grid-template-columns:1fr 1fr 1fr}} @media(max-width:53.75rem){.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:35rem){.footer-grid{grid-template-columns:1fr}} .footer-grid ul li{margin-bottom:.625rem} .footer-grid { font-size: 0.875rem; } .footer-grid a{color:var(--ink);opacity:.85;transition:opacity .3s,color .3s} .footer-grid a:hover{opacity:1;color:var(--accent)} .footer-logo img{width:32.125rem;max-width:100%;margin-bottom:1.125rem} .footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-top:3.75rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--ink-soft)} .footer-bottom a:hover{color:var(--accent)} .footer-worlds{display:flex;gap:.625rem;flex-wrap:wrap;margin-top:1rem} .footer-worlds a{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:.5rem .875rem;border:1px solid var(--line);border-radius:1.25rem} /* ============================================================ REVEALS */ .reveal{opacity:0;transform:translateY(2.25rem);transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.is-visible{opacity:1;transform:none} .reveal-line{overflow:hidden} /* Content-Bilder: sanfter Aufzoom + Parallax-Versatz beim Scrollen (kein Vollbild) */ .media-zoom{overflow:hidden} .media-zoom img{will-change:transform;transform-origin:center} .reveal-line span{display:block;transform:translateY(110%);transition:transform .9s var(--ease)} .reveal-line.is-visible span{transform:none} /* Kontaktformular */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem} @media(max-width:40rem){.form-grid{grid-template-columns:1fr}} .field{display:flex;flex-direction:column;gap:.5rem} .field.full{grid-column:1/-1} .field label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)} .field input,.field textarea,.field select{ background:var(--card-bg);border:1px solid var(--line);border-radius:.625rem;padding:.875rem 1rem; font-family:var(--sans);font-size:.96rem;color:var(--ink);transition:border-color .3s,box-shadow .3s; } .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 .1875rem color-mix(in srgb, var(--accent) 22%, transparent)} .field textarea{resize:vertical;min-height:8.75rem} .field input[type="checkbox"]{width:1rem;height:1rem;padding:0;background:none;border:1px solid var(--line);border-radius:.25rem;flex-shrink:0;accent-color:var(--accent)} .form-note{font-size:.8rem;color:var(--ink-soft);margin-top:.375rem} #form-status{margin-top:1rem;font-size:.9rem;display:none;padding:.875rem 1.125rem;border-radius:.625rem} #form-status.ok{display:block;background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent-deep)} #form-status.err{display:block;background:rgba(190,60,50,.12);color:#a23225} /* Utility */ .mt-0{margin-top:0}.center{text-align:center} .tag-row{display:flex;gap:.625rem;flex-wrap:wrap;margin-top:1.125rem} .tag-row span{font-size:.68rem;letter-spacing:.05em;padding:.375rem .875rem;border-radius:1.25rem;border:1px solid var(--line);color:var(--ink-soft)} /* ========================================================================== SECTION-BIBLIOTHEK (layouts-xd/sections 00–12) ========================================================================== */ /* 01 — Hero-Collage (Foto + Portrait + Wortmarke, kein Textoverlay) */ .s01-hero{position:relative;background:var(--bg-2);min-height:82vh;display:flex;align-items:flex-end} .s01-hero .s01-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .s01-hero .s01-bg img{width:100%;height:112%;object-fit:cover;object-position:bottom;will-change:transform} .s01-hero .s01-portrait{position:absolute;left:-10%;bottom:0;z-index:999;height:calc(100% + 4rem);max-width:55%} .s01-hero .s01-portrait img{height:100%;width:auto;object-fit:cover;object-position:top;filter:grayscale(1) contrast(1.05)} .s01-hero .s01-inner{position:relative;z-index:2;width:100%;display:flex;justify-content:flex-end;padding:0 clamp(1.25rem,5vw,3.5rem)} .s01-hero .s01-logo{position:relative;width:32.1875rem;max-width:40vw;margin-bottom:5.3125rem} @media(max-width:47.5rem){ .s01-hero{min-height:70vh} .s01-hero .s01-portrait{max-width:64%;height:calc(100% + 1.875rem)} .s01-hero .s01-logo{width:min(32.1875rem,58vw);margin-bottom:2.5rem} } /* 02 — Fleur-Wasserzeichen + Text/CTA */ .s02{position:relative;overflow:hidden} .s02-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--gap);align-items:center} @media(max-width:52.5rem){.s02-grid{grid-template-columns:1fr}} .s02-fleur{opacity:.5;justify-self:center} .s02-fleur img{width:min(100%,39.375rem);filter:opacity(.55)} .s02-note{font-weight:500;margin-top:1rem} .s02-actions{display:flex;gap:.875rem;flex-wrap:wrap;margin-top:1.625rem} @media(max-width:52.5rem){.s02-fleur{display:none}} /* 03 — Titel + zwei versetzte Bilder + Text (mit Hintergrundwechsel) */ .s03{position:relative} .s03:after { content: ""; position: absolute; top: 30%; width: 100%; z-index: -1; height: 72.5%; background: var(--bg-3); } .s03.sec:after { height: 65.5%; } .s03-top{display:grid;grid-template-columns:.55fr 1.2fr;gap:var(--gap);align-items:start;} .s03-title{font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.28;text-transform:uppercase;letter-spacing:.02em; text-align: right;padding-top: 4.6875rem;} .s03-img1 img{width:100%;aspect-ratio:1/1;object-fit:cover; max-width: 39.0625rem;} .s03-bottom{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap);align-items:center;margin-top:-2.5rem;padding-top:4.375rem; margin-bottom:-3.125rem;} .s03-img2 img{width:95%;aspect-ratio:1/1;object-fit:cover;} .s03-text p{margin-bottom: 3.125rem;} .s03-text p.mt-12 { margin-bottom: 1.125rem; } .s03-text.nb p { margin-bottom: 1.125rem; } @media(max-width:52.5rem){ .s03-top,.s03-bottom{grid-template-columns:1fr} .s03-bottom{margin-top:1.5rem;padding-top:0} .s03-img2 img{width:100%} } .logoicons .wrap { gap: 25px; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } .logoicons img { height: 95px; width: auto; display: inline-block; } .dl01 { margin-top: 4.6875rem; } /* 05 — Themen-Karten (echte Bereichs-Cards) */ .theme-cards{display:flex;flex-direction:column;gap:1.125rem;margin-top:-11.875rem} .theme-card{ display:grid;grid-template-columns:16.25rem 1fr;gap:1.875rem;align-items:center; background:var(--card-bg,#fff);border:1.5px solid var(--tc-color,var(--line));border-radius:1.6875rem; padding:clamp(1.375rem,3vw,2.125rem);position:relative;overflow:hidden; box-shadow:0 .1875rem .375rem rgba(0,0,0,.08);transition:transform .4s var(--ease),box-shadow .4s var(--ease); } .theme-card .tc-logo + div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:.0625rem;background:var(--tc-color)} .theme-card .tc-logo+div { position: relative; padding-left: 3.125rem; } .theme-card .tc-logo{display:flex;align-items:center;gap:1rem} .theme-card .tc-logo img{height:5.3125rem;flex-shrink:0} .theme-card h3{font-family:var(--sans);font-weight:600;font-size:1.5rem;color:var(--tc-color);letter-spacing:.01em} .theme-card .tc-sub{font-weight:600;margin-bottom:.375rem} .theme-card .tc-desc{max-width:60ch;} .theme-card .tc-tags{display:flex;gap:.625rem;flex-wrap:wrap;margin-top:1rem;align-items:center} .theme-card .tc-tags span,.theme-card .tc-tags a{font-size:.7rem;letter-spacing:0em;padding:.5rem .875rem;border-radius:.625rem;border:1px solid var(--tc-color); text-transform:uppercase;transition:background .3s,color .3s; text-decoration: none;} .theme-card .tc-tags a:hover{background:var(--tc-color);color:#fff} .theme-card .tc-more{font-size:.7rem;letter-spacing:0em;text-transform:uppercase;padding:.5rem .875rem;border-radius:.625rem;background:var(--tc-color);color:#fff;transition:filter .3s} .theme-card:hover .tc-more{filter:brightness(1.12)} @media(max-width:47.5rem){.theme-card{grid-template-columns:1fr}} /* 06 — Schmales dunkles CTA-Band (immer Anthrazit, unabhängig vom Bereichs-Theme) */ .s06{background:var(--ink-900);color:#fff;max-width: calc(100% - 2.5rem); margin: 0 auto .625rem;} .s06-row{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.625rem 0;flex-wrap:wrap} .s06-row h3{font-family:var(--sans);font-weight:500;font-size:1.3rem;color:#fff} .s06-right{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap} .s06-right p{font-size:.88rem;color:rgba(255,255,255,.78);max-width:36ch} .s06-buttons{display:flex;gap:.625rem} .s06-buttons .btn{padding:.75rem 1.375rem;font-size:.68rem} /* 07 — Vollbild-Portrait mit Eck-Text */ .s07{position:relative;height:650px;display:flex;overflow:hidden; max-width: calc(100% - 2.5rem); margin: 0 auto;} .s07 img{position:absolute;top:-16%;left:0;width:100%;height:132%;object-fit:cover;filter:grayscale(1);will-change:transform} .s07::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.35) 0%,transparent 35%,transparent 65%,rgba(10,10,10,.35) 100%)} .s07-inner{position:relative;z-index:2;width:100%;display:flex;align-items:center;justify-content:space-between} .s07-label{font-size:.8125rem;letter-spacing:.22em;text-transform:uppercase;color:#fff} .s07-heading{text-align:center;color:#fff; font-size:1.75rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.4} /* 08 — Zentrierter Text + Button (mit Fleur-Deko) */ .s08{position:relative;overflow:hidden;text-align:center} .s08-fleur{position:absolute;right:-6%;bottom:-10%;width:38%;opacity:.12;pointer-events:none} .s08-inner{position:relative;z-index:1;max-width:47.5rem;margin:0 auto} .s08-inner p{margin-bottom:1rem;} .s08-inner .btn{margin-top:.875rem} /* 09 — Bento-Bildgruppe + Titel/Text */ .s09-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem 1.25rem; max-width: 75%; margin: 0 auto;} .s09-col-a{grid-column:1/3;display:flex;flex-direction:column;gap:1.25rem;align-items: end;} .s09-col-a .media-zoom{display:block;width:100%} .s09-col-a .media-zoom:first-child{aspect-ratio:4/3; margin-top: 4.0625rem;} .s09-col-a .media-zoom:last-child{flex:1;min-height:0;height:100%; width: 75%;} .s09-col-a .media-zoom img{width:100%;height:100%;object-fit:cover} .s09-col-b{grid-column:3/5;display:flex;flex-direction:column;gap:1.25rem} .s09-col-b > .media-zoom{display:block;width:100%;aspect-ratio:3/4} .s09-col-b > .media-zoom img{width:100%;height:100%;object-fit:cover} .s09-title{text-transform:uppercase;font-size:clamp(1.6rem,2.6vw,3.75rem); line-height: 1.25; padding-top: 10.9375rem; padding-bottom: 5rem;} .s09-text{grid-column:1/4;text-align:left; margin-left: 16.2%;} .s09-text p{margin-bottom:.875rem;} @media(max-width:52.5rem){.s09-grid{grid-template-columns:1fr;max-width:100%}.s09-col-a,.s09-col-b,.s09-text{grid-column:1/2}} /* 10 — Neutrales CTA-Band (grau) */ .s10{background:#8c8c8c;color:#fff;text-align:center} .s10 h2{color:#fff;font-family:var(--sans);font-weight:500;font-size:1.5rem} .s10 p{color:rgba(255,255,255,.88);font-size:.9rem;margin-top:.5rem} /* 11 — Kontaktformular-Band */ .s11{background:var(--bg-2)} .s11-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--gap);align-items: center} @media(max-width:52.5rem){.s11-grid{grid-template-columns:1fr}} .s11-info h2{font-size:clamp(1.8rem,3vw,2.3rem);margin-bottom:.875rem} .s11-info p{color:var(--ink-soft)} /* Kontaktseite — kompakte Info-Card (Adresse/Telefon/E-Mail/Öffnungszeiten) */ .contact-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,4vw,2.5rem)} .contact-info-grid .num{font-size:1.3rem;margin-bottom:.625rem} .contact-info-grid p{margin:0;color:var(--ink-soft);line-height:1.55} @media(max-width:56.25rem){.contact-info-grid{grid-template-columns:1fr 1fr;gap:1.75rem}} @media(max-width:35rem){.contact-info-grid{grid-template-columns:1fr;gap:1.5rem}} .contact-form-wrap{max-width:47.5rem;margin:0 auto} /* Footer-Bottom als durchgehendes Farbband (Marke, unabhängig vom Bereichs-Theme) */ .footer-bottom-bar{background:#3d4a3a;color:rgba(255,255,255,.86)} .footer-bottom-bar .wrap{display:flex;justify-content:center;gap:1.625rem;flex-wrap:wrap;padding:1rem clamp(1.25rem,5vw,3.5rem);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase} /* Schwebende Kontakt-Icons (WhatsApp + Anrufen), fixiert unten rechts auf allen Seiten */ .floating-contact{position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:clamp(1rem,3vw,1.75rem);z-index:2000;display:flex;flex-direction:column;gap:.75rem} .fc-btn{width:3.25rem;height:3.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 .375rem 1.25rem rgba(0,0,0,.22);transition:transform .25s var(--ease),box-shadow .25s var(--ease)} .fc-btn svg{width:1.5rem;height:1.5rem} .fc-btn:hover{transform:translateY(-.1875rem) scale(1.05);box-shadow:0 .625rem 1.625rem rgba(0,0,0,.28)} .fc-whatsapp{background:#25d366} .fc-call{background:var(--accent)} @media(max-width:37.5rem){ .floating-contact{right:.875rem;bottom:.875rem;gap:.625rem} .fc-btn{width:2.875rem;height:2.875rem} .fc-btn svg{width:1.3125rem;height:1.3125rem} } .footer-bottom-bar a:hover{color:#fff} .footer-bottom-bar a{color:rgba(255,255,255,.86); text-decoration: none; transition: color .3s;} /* --------------------------------------------- Utilities (dental) --- */ .mb-0{margin-bottom:0} .mt-8{margin-top:.5rem} .mt-12{margin-top:.75rem} .mt-14{margin-top:.875rem} .mt-16{margin-top:1rem} .mt-20{margin-top:1.25rem} .mt-24{margin-top:1.5rem} .mt-26{margin-top:1.625rem} .mt-28{margin-top:1.75rem} .mt-32{margin-top:2rem} .mt-40 { margin-top: 2.5rem } .mb-12{margin-bottom:.75rem} .mb-14{margin-bottom:.875rem} .mb-16{margin-bottom:1rem} .mb-20{margin-bottom:1.25rem} .mb-24{margin-bottom:1.5rem} .mb-32{margin-bottom:2rem} .mb-intro{margin-bottom:clamp(2.25rem,5vw,3.5rem)} .max-60ch{max-width:60ch} .max-70ch{max-width:70ch} .max-80ch{max-width:80ch} .max-60ch.center { margin: 0 auto; } .max-70ch.center { margin: 0; text-align: left; } .max-80ch.center { margin: 0 auto; } .max-520{max-width:32.5rem} .text-left{text-align:left} .d-block{display:block} .d-flex{display:flex} .flex-col{flex-direction:column} .flex-1{flex:1} .items-stretch{align-items:stretch} .items-start{align-items:start} .h-100{height:100%} .w-100{width:100%} .min-h-0{min-height:0} .ofc{object-fit:cover} .ar-45{width:100%;aspect-ratio:4/5;object-fit:cover} .ar-43 { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .ar-11{aspect-ratio:1/1;object-fit:cover} .order-1{order:1} .order-2{order:2} .radius-0{border-radius:0} .pb-90{padding-bottom:5.625rem} .cols-1{grid-template-columns:1fr} .cols-2{grid-template-columns:repeat(2,1fr)} .bg-2{background:var(--bg-2)} .bg-3 { background: var(--bg-3) } .fs-92{font-size:.92rem} .fs-110{font-size:1.1rem} .fs-115{font-size:1.15rem} .fs-130{font-size:1.3rem} .parallax-band.h-825{height:42.5625rem;min-height:42.5625rem} .parallax-band.h-790{height:39.375rem;min-height:39.375rem} .parallax-band.min-60vh{min-height:60vh} /* Mobile: zusätzliche Termin-/Kontakt-Buttons im floating-contact-Stack, im selben runden .fc-btn-Stil wie WhatsApp/Anrufen (Nav-CTA/Kontakt-Link verschwinden auf Mobile im Burger-Menü) */ .fc-kontakt,.fc-termin{display:none} .fc-kontakt{background:var(--ink)} .fc-termin{background:var(--accent)} .fc-termin:hover{background:var(--accent-deep)} @media(max-width:111.25rem){ .fc-kontakt,.fc-termin{display:flex} } @media screen and (max-width: 111.25rem) { .header-zone { min-height: 5.3125rem; } } @media screen and (max-width: 105rem) { .parallax-band.h-825 { height: 39.0625rem; min-height: 39.0625rem; } .parallax-band.h-790 { height: 35.9375rem; min-height: 35.9375rem; } .s01-hero { min-height:70vh; } .s01-hero .s01-portrait { height: calc(85% + 4rem); } .s01-hero .s01-logo { width: 25.3125rem; margin-bottom: 4.0625rem; } } @media screen and (max-width:92.5rem) { .gz-text { width: 100%; margin-left: 0; margin-top: 1.25rem; } .hero { max-height: 39.0625rem; } } @media screen and (max-width:80rem) { .middle { max-width: 95vw; margin: 0 auto; } .vorteile .wrap { width: 85%; } .leistungen-grid { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 73.75rem) { .s06-row { display: grid; grid-template-columns: 1fr; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.625rem 1.25rem; } .s06-right { display: grid; grid-template-columns: 1fr; } .s06-right p { max-width: 100%; margin-bottom:0; } .s07-heading { font-size: 1.375rem; } .s01-hero { min-height: 50vh; } .s01-hero .s01-logo { width: 19.0625rem; margin-bottom: 2.1875rem; } .pi-list { width: 100%; } .pi-photo img { aspect-ratio: 16/9; } } @media screen and (max-width: 61.9375rem) { .parallax-band.h-825 { height: 29.0625rem; min-height: 29.0625rem; } .parallax-band.h-790 { height: 20.3125rem; min-height: 20.3125rem; } .s03-top { grid-template-columns: .85fr 1.2fr; } .s03-bottom { grid-template-columns: .8fr 1.2fr; padding-top: 4.375rem; margin-bottom: 0; } .theme-card { grid-template-columns: 8.75rem 1fr; } .s07 {display: grid; grid-template-columns: 1fr; height: auto;} .s07 img {position: relative;} .s07-inner { background: #fff; padding: .9375rem; margin-bottom: 0; display: inline-block; text-align: center; } .s07-label,.s07-heading { color:#000; } .parallax-band { min-height: 60vh; } .s09-grid { max-width: 100%; } .s09-title {padding-top: 4.0625rem;} .s09-text { grid-column: 1/8; margin-left: 0; } .s09-col-a .media-zoom:first-child { margin-top: 0; } .s09-col-a .media-zoom:first-child, .s09-col-a .media-zoom:last-child { width: 100%; aspect-ratio: 16/9; } .s09-col-b>.media-zoom, .gz-col-a .media-zoom:first-child { aspect-ratio: 16/9; margin:0 auto; } .gz-col-a .media-zoom:last-child { aspect-ratio: 16/9; width: 75%; margin:0 auto; } .gz-col-b .media-zoom { aspect-ratio: 16/9; width: 75%; margin:0 auto; align-self: flex-start } .ar-45 { aspect-ratio: 16/9; width: 75%; margin: 0 auto; } } @media screen and (max-width: 52.5rem) { .intro-media-side { margin-top: 2.5rem; } .s09-title { padding-top: 0; padding-bottom: 0; } .s01-hero .s01-logo { width: 12.1875rem; margin-bottom: 1.5625rem; } .s03-title {text-align: left;} .s03-bottom, .s03-top { grid-template-columns: 1fr; } .s03-img2 img, .s03-img1 img { width: 100%; height: 100%; aspect-ratio: 16/9; } .theme-card { grid-template-columns: 1fr; } .theme-card .tc-logo {display: inline-block; text-align: center; width: 100%;} .theme-card .tc-logo img {text-align: center; display: inline-block;} .theme-card .tc-logo+div::before {top: -.9375rem; left: 0; width: 100%; height: .0625rem;} .theme-card .tc-logo+div {padding-left: 0;} .s09-col-a, .s09-col-b, .s09-text { grid-column: 1/12; } } @media screen and (max-width: 43.25rem) { .parallax-band.h-825 { height: 23.4375rem; min-height: 23.4375rem; } .s01-hero .s01-portrait { height: calc(65% + 4rem); } .s01-hero { min-height: 25vh; } .s01-hero .s01-inner {display: none;} .s08 { margin-top: -1.0625rem; z-index: 3; } .parallax-band { min-height: 25vh !important; } } @media screen and (max-width: 30.75rem) { .parallax-band.h-825 { height: 15.3125rem; min-height: 15.3125rem; } } .vf-icon-dental{background:#8c8c8c} .vf-icon-aesthea{background:#c69b69} body[data-theme="aesthea"] .service-intro-title .sit-label{color:var(--accent)} body[data-theme="mkg"] .service-intro-title .sit-label { color: var(--accent) } body[data-theme="longevity"] .service-intro-title .sit-label { color: var(--accent) } .service-intro-title-only{margin-top:3.4375rem;margin-bottom:5.625rem} .pt-0{padding-top:0} .pb-0{padding-bottom:0} /* Falten-Erklärung (Aesthea Faltenbehandlung) — zentrierter Titel, freigestelltes Foto mit versetztem Farbrahmen, Glossar-Zeilen */ .fe-title{color:var(--accent);text-align:center;text-transform:uppercase;letter-spacing:.02em;line-height:1.28} .fe-lead{ margin:1.25rem auto 0;text-align:center; max-width: 70ch;} .fe-photo{position:relative;max-width:41.25rem;margin:3.5rem auto 0} .fe-photo:before{content:"";position:absolute;top:1.5rem;left:0;width:100%;height:100%;background:var(--accent);z-index:0} .fe-photo img{position:relative;z-index:1;display:block;width:100%; aspect-ratio:1/1;object-fit:cover;object-position:top; padding: 0 2.1875rem;} .fe-glossary{max-width: 41.25rem;margin:3.5rem auto 0;text-align:left} .fe-row{display:grid;grid-template-columns:13.75rem 1fr;gap:2.5rem;padding:1.375rem 0} .fe-row:not(:last-child){border-bottom:1px solid var(--accent)} .fe-label{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase} @media(max-width:40rem){ .fe-row{grid-template-columns:1fr;gap:.375rem;padding:1.125rem 0} .fe-photo:before{top:1rem;left:1rem} } .fe-image-band{margin-bottom:11.875rem;overflow:visible} .fe-image-icon{position:absolute;z-index:2;left:50%;bottom:0;transform:translate(-50%,50%);width:22.8125rem;max-width:70vw;pointer-events:none} /* Behandlungsmöglichkeiten — Label-Box + Text nebeneinander (z. B. Faltenbehandlung) */ .bm-list{display:flex;flex-direction:column} .bm-row{display:grid;grid-template-columns:15.75rem 1fr;gap:2.5rem;align-items:center} .bm-row.start { align-items: start } .bm-row+.bm-row{margin-top:2.5rem} .bm-label{ border:1px solid var(--accent);display:flex;align-items:center;justify-content:center; text-align:center;padding:0;min-height: 6rem; font-size:.92rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;line-height:1.5; } .bm-sub{display:block;color:var(--accent);font-weight:600;margin-bottom:.5rem} @media(max-width:52.5rem){ .bm-row{grid-template-columns:1fr;gap:1rem} .bm-label{min-height:0;padding:1.25rem} } /* Impressionen-Galerie — reines Bild-Masonry, zwei versetzte Spalten (z. B. vor "Schritt für Schritt") */ .masonry-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem} .masonry-col-a{display:flex;flex-direction:column;gap:1.5rem;margin-top:5rem} .masonry-col-b{display:flex;flex-direction:column;gap:1.5rem} .masonry-grid .media-zoom img{width:100%;height:100%;object-fit:cover} .masonry-col-a .media-zoom:first-child{aspect-ratio:3/2} .masonry-col-a .media-zoom:last-child{aspect-ratio:4/5} .masonry-col-b .media-zoom:first-child{aspect-ratio:1/1} .masonry-col-b .media-zoom:last-child{aspect-ratio:3/2} @media(max-width:52.5rem){ .masonry-grid{grid-template-columns:1fr} .masonry-col-a{margin-top:0} } /* Schritt für Schritt — nummerierte Timeline mit gepunkteten Kreisen (Faltenbehandlung) */ .steps-band{background:#F6F6F6} .steps-grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:3rem;overflow:hidden} .step-item{display:flex;flex-direction:column;align-items:center;text-align:center} .step-num{font-family:var(--serif);font-weight:300;font-size:2.75rem;color:var(--ink);line-height:1} .step-dot{ display:block;width:.625rem;height:.625rem;border-radius:50%;background:var(--accent); margin-top:1.25rem;position:relative; } .step-dot::after{ content:"";position:absolute;top:100%;left:50%;height:2.5rem; border-left:2px dotted var(--accent);transform:translateX(-50%); } .step-circle{ position:relative;margin-top:2.5rem;width:clamp(9.375rem,14vw,13.125rem);aspect-ratio:1;border-radius:50%; background:#fff;border:2px dotted var(--accent);display:flex;align-items:center;justify-content:center; } /* Verbindungslinie zum vorherigen Kreis: an .step-circle verankert (top:50% trifft so immer exakt die Kreismitte, unabhängig von dessen fluider Größe). Die Spalte ist breiter als der zentrierte Kreis (Restraum beiderseits) — reicht die Linie nur bis zum Spaltenrand (gap), bleibt sie vor dem vorherigen Kreis stehen. width entspricht daher rechnerisch einer ganzen Spaltenbreite (70vw-Container / 4 Spalten abzüglich Gap-Anteil): das reicht nachweislich immer bis in den Vorkreis hinein (nie weiter) — .steps-grid hat zusätzlich overflow:hidden als Sicherheitsnetz gegen jeglichen Überstand am Rand. z-index: das ::before gehört zum Stacking-Context SEINES EIGENEN (späteren) Kreises, liegt also mit gleichem z-index automatisch ÜBER dem vorherigen Kreis (spätere DOM-Reihenfolge gewinnt bei Gleichstand) — sichtbar als Linie über statt hinter dem Kreis. Deshalb je Kreis absteigender z-index: jeder frühere Kreis übertrumpft dann garantiert die Linie des nächsten. */ .step-item:not(:first-child) .step-circle::before{ content:"";position:absolute;z-index:0;top:50%;right:100%; width:calc(17.5vw - 2.25rem);border-top:2px dotted var(--accent); } .step-item:nth-child(1) .step-circle{z-index:4} .step-item:nth-child(2) .step-circle{z-index:3} .step-item:nth-child(3) .step-circle{z-index:2} .step-item:nth-child(4) .step-circle{z-index:1} .step-circle img{width:36%;height:36%;object-fit:contain;filter:brightness(0)} .step-label{margin-top:1.5rem;font-weight:700;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)} .step-desc{margin-top:.625rem;} .steps-grid.steps-3{grid-template-columns:repeat(3,1fr)} .steps-grid.steps-3 .step-item:not(:first-child) .step-circle::before{width:calc(25vw - 2.25rem)} @media(max-width:56.25rem){ .steps-grid{grid-template-columns:repeat(2,1fr);gap:3rem} .step-item:nth-child(odd) .step-circle::before{display:none} } @media(max-width:35rem){ .steps-grid{grid-template-columns:1fr} .step-item .step-circle::before{display:none} } .fe-image-band.flush{margin-bottom:0} .sec-icon-offset{padding-top:9.375rem} .third-icon-offset { padding-top: 12.375rem } .steps-band.sec-icon-offset{padding-top:14rem} /* Foto ragt bewusst unten aus der Section-Hintergrundfläche heraus. */ .img-bleed-bottom{margin-bottom:-6.75rem} /* Kleiner Kasten, der oben leicht in das vorhergehende Parallax-Band hineinragt. */ .infoabend-box{position:relative;z-index:2;max-width:50vw;margin:-10rem auto 0;text-align:center} @media(max-width:47.5rem){ .infoabend-box{margin-top:-2.5rem} } @media(max-width:52.5rem){.img-bleed-bottom{margin-bottom:0}} /* Longevity-Startseite: Text der ersten Section ragt sonst in das Hero-Icon hinein. */ [data-theme="longevity"] .firstone{margin-top:12.5rem} /* ============================================================ Infoabend-Anmeldeseite (infoabend.php) Migriert aus event/assets/css/style.css, auf .infoabend-page skopiert, damit der Ordner event/ spaeter geloescht werden kann. Schriftart auf den Website-Standard (Inter) umgestellt. ============================================================ */ .infoabend-page * {margin: 0; padding: 0; box-sizing: border-box; transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out;} .infoabend-page ::-moz-selection {/* Code for Firefox */ color: rgba(0, 0, 0, 1); background: rgba(0, 0, 0, 0.2);} .infoabend-page ::selection {color: rgba(0, 0, 0, 1); background: rgba(0, 0, 0, 0.2);} .infoabend-page img {display: block; max-width: 100%; height: auto;} .infoabend-page { /* Variablen aus dem urspruenglichen event/assets/css/style.css (Kampagnenseite) */ --maincolor: #3A3F44; --secondcolor: #7A7F82; --maincolor-light: #E4E5E6; --blue: #252E28; --grey: #E6E5E4; --dark: #333333; --titlefont: 'Inter'; --mainfont: 'Inter'; --brown: var(--maincolor); --brown-light: var(--maincolor-light); --darkgrey: #252E28; --hovercolor: #636965; margin: 0; overflow-x: hidden; font-family: var(--mainfont); font-weight: 300; font-size: 15px; color: var(--dark); line-height: 25px; background-color: #FFFFFF; min-height: 100%; position: relative; text-rendering: optimizeLegibility; max-width: 100%; letter-spacing: 0; } .infoabend-page a, .infoabend-page a:link, .infoabend-page a:active {text-decoration: none; color: var(--dark); transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out;} .infoabend-page a:hover {color: var(--maincolor);} .infoabend-page strong {font-weight: 600;} .infoabend-page ul, .infoabend-page ol {margin-left: 0px; margin-top: 20px;} .infoabend-page ul, .infoabend-page li, .infoabend-page ol li {list-style-position: outside; list-style-type: none;} .infoabend-page ol li {margin-bottom: 20px;} .infoabend-page ul li {padding-left: 28px; position: relative; margin-bottom: 8px;} .infoabend-page ul li:before {content: "//"; position: absolute; left: 0; color: var(--maincolor); font-weight: 600;} .infoabend-page .img-contain {object-position: center; object-fit: contain !important; width: 100%; height: 100%;} .infoabend-page .colored {color: var(--maincolor);} .infoabend-page h1 {font-size: 40px; line-height: 50px; font-weight: 400; margin-bottom: 15px; text-transform: none; letter-spacing: 3px; font-family: var(--titlefont);} .infoabend-page h1 span {color: var(--maincolor); font-size: 23px; line-height: 33px; font-weight: 400; letter-spacing: 3px; display: inline-block;} .infoabend-page h2, .infoabend-page .h2-style {font-size: 25px; line-height: 35px; font-weight: 300; text-transform: none; margin-bottom: 25px; letter-spacing: 1px; color: var(--dark); font-family: var(--titlefont);} .infoabend-page h2 span, .infoabend-page .h2-style span {color: var(--maincolor); font-size: 25px; line-height: 35px; font-weight: 300; margin-bottom: 15px;} .infoabend-page h3 {font-size: 20px; line-height: 30px; font-weight: 300; margin-bottom: 15px; text-transform: none; color: var(--dark); font-family: var(--titlefont);} .infoabend-page h3 span {color: var(--maincolor); font-size: 18px; line-height: 28px; font-weight: 500; margin-bottom: 15px; display: inline-block;} .infoabend-page .ctabox {display: inline-block; margin-top: 40px; position: relative;} .infoabend-page .ctabox .cta-wrapper {display: flex; align-items: center; justify-content: center; gap: 40px;} .infoabend-page .ctabox small {display: inline-block; margin-top: 10px; font-size: 15px; line-height: 23px; font-weight: 500; margin-bottom: 10px; width: 100%;} .infoabend-page .cta-divider {width: 1px; height: 40px; background: var(--maincolor);} .infoabend-page .cta-phone {display: flex; flex-direction: column; text-decoration: none;} .infoabend-page .cta-phone-label {font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #999;} .infoabend-page .cta-phone-number {font-size: 18px; font-weight: 600; color: #000;} .infoabend-page .cta-phone:hover .cta-phone-number {color: var(--maincolor);} .infoabend-page main {position: relative; z-index: 1;} .infoabend-page .site-header {position: static; z-index: 100; background: #fff;} .infoabend-page .site-header .wrapper.content-width {padding: 1.1rem 2rem; position: relative;} .infoabend-page .site-header {transition: all .25s ease;} .infoabend-page .header-desktop {display: block;} .infoabend-page .header-mobile {display: none;} .infoabend-page .header-logo-center {display: flex; justify-content: center; align-items: center; width: clamp(140px, 16vw, 240px); position: relative; z-index: 5;} .infoabend-page .header-logo-center a, .infoabend-page .mobile-logo a {display: inline-flex; align-items: center; justify-content: center;} .infoabend-page .header-logo-center img, .infoabend-page .header-logo-center svg, .infoabend-page .mobile-logo img, .infoabend-page .mobile-logo svg {display: block; width: 100%; max-width: 220px; width: 220px; height: auto;} .infoabend-page .mobile-header-bar {display: flex; align-items: center; justify-content: space-between; gap: 1rem;} .infoabend-page .mobile-logo {width: 165px; flex: 0 0 auto;} @media (max-width: 1380px) { .infoabend-page .site-header .wrapper.content-width {padding: 1rem 1.4rem;} .infoabend-page .header-logo-center {width: clamp(130px, 14vw, 190px);} } @media (max-width: 1580px) { .infoabend-page .header-desktop {display: none;} .infoabend-page .header-mobile {display: block;} .infoabend-page .site-header .wrapper.content-width {padding: 1rem 1.2rem;} } @media (max-width: 768px) { .infoabend-page .site-header .wrapper.content-width {padding: 0.9rem 1rem;} .infoabend-page .mobile-logo {width: 145px;} } @media (max-width: 492px) { .infoabend-page .site-header .wrapper.content-width {padding: 0.85rem 0.9rem;} .infoabend-page .mobile-logo {width: 125px;} } @media (max-width: 1580px) { .infoabend-page .mobile-header-bar {z-index: 999; position: relative;} } .infoabend-page .treatment-timeline {display: grid; gap: 0; margin: 2rem 0; border-top: 1px solid #d5d5d5;} .infoabend-page .timeline-step {position: relative; display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid #d5d5d5;} .infoabend-page .timeline-step::before {content: ""; position: absolute; left: 44px; top: 0; bottom: 0; width: 1px; background: #d5d5d5;} .infoabend-page .timeline-number {position: relative; z-index: 1; display: block; font-size: 0.85rem; letter-spacing: 0.12em; font-weight: 600; color: var(--maincolor); background: #fff; text-align: center; padding: 0.4rem 0;} .infoabend-page .timeline-step p {margin: 0; font-size: 1.05rem; line-height: 1.5; color: #2f2f2f;} @media (max-width: 640px) { .infoabend-page .timeline-step {grid-template-columns: 64px 1fr; gap: 1rem; padding: 1.2rem 0;} .infoabend-page .timeline-step::before {left: 31px;} .infoabend-page .timeline-step p {font-size: 1rem;} } .infoabend-page .content-width {width: calc(100% - 60px); max-width: 2480px; margin: 0 auto;} .infoabend-page .image-wrapper {position: relative;} .infoabend-page .imagebox.middle {width: 650px; max-width: 50%; height: auto; margin: 0 auto 65px auto;} .infoabend-page .fullimg.grey {z-index: -1; background: transparent;} .infoabend-page .fullimg .imagebox {height: 525px;} .infoabend-page .icon {position: absolute; top: 0; left: 50%; transform: translate(-50%, -60%) scale(0.9); width: clamp(250px, 30vw, 510px); color: var(--maincolor); opacity: 0; filter: blur(6px) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15)); z-index: -1; transition: opacity 1.8s ease, transform 2s cubic-bezier(.22, 1, .36, 1), filter 1.6s ease;} .infoabend-page .icon svg {display: block; width: 100%; height: auto;} .infoabend-page .icon path {fill: currentColor;} .infoabend-page .fullimg h2 {font-size: 70px; line-height: 75px; font-weight: 300;} .infoabend-page .fullimg .imagebox+.contentbox {margin-top: -200px;} .infoabend-page section {margin: 0px auto 96px; width: 100%; position: relative; display: block; z-index: 1;} /* 07 — Vollbild-Portrait mit Eck-Text */ .infoabend-page section.s07 { position: relative; height: 650px; display: flex; overflow: hidden; max-width: calc(100% - 2.5rem); margin: 0 auto; } .infoabend-page section.s07 img { display: unset; max-width: unset; height: unset; top: -8%; } .infoabend-page section.s07 .s07-inner, .infoabend-page section.s08 .s08-inner, .infoabend-page section.s08 .wrap { padding: inherit; margin: inherit; } .infoabend-page section.s08 .s08-inner { padding: 25px 0 0 0; } /* 08 — Zentrierter Text + Button (mit Fleur-Deko) */ .infoabend-page section.s08 { position: relative; overflow: hidden; text-align: center } .s08-inner .btn { padding: 10px 25px; } .s08-inner .btn:hover { color: #fff; } @media (max-width: 850px) { .infoabend-page section {margin-bottom: 64px;} } .infoabend-page .contentboxwrapper {display: grid; align-items: center; grid-template-columns: 1fr 1fr; gap: 35px; margin: 0 auto; position: relative; width: 90%;} .infoabend-page .contentbox {display: grid; align-items: center; grid-template-columns: 1fr; margin: 0 auto; position: relative; width: 100%;} .infoabend-page .contentboxwrapper>div {display: inline-block;} .infoabend-page .hide {display: none;} .infoabend-page .mt-250 {margin-top: 250px;} .infoabend-page .contentbox.small, .infoabend-page .contentboxwrapper.small {max-width: 55%;} .infoabend-page .contentbox.middle, .infoabend-page .contentboxwrapper.middle {max-width: 65%;} .infoabend-page .fullimg .image-wrapper {max-width: 2480px; margin: 0 auto; width: calc(100% - 60px); height: 100%;} .infoabend-page .imagebox img+small {position: absolute; background: rgba(255, 255, 255, .6); width: 100%; left: 0; bottom: 0; padding: 3px 5px; font-size: 8px;} .infoabend-page .textbox .icon {width: 86px; height: 86px; margin-bottom: 15px; z-index: 2; display: block; position: relative; border-radius: 5px; -webkit-box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.3);} .infoabend-page .textbox .icon img {background: #fff; padding: 20px; border-radius: 5px;} .infoabend-page .textbox .icon:before {top: -10px; position: absolute; z-index: -1; background: var(--maincolor); left: -10px; content: ""; width: 76px; height: 76px;} .infoabend-page section.nm {margin-bottom: 0;} .infoabend-page ol {margin-left: 15px; padding-left: 0; list-style: outside;} .infoabend-page ol li {list-style-type: decimal;} .infoabend-page .contentboxwrapper .imagebox {align-self: stretch;} .infoabend-page .contentboxwrapper .imagebox img {width: 100%; height: 100%; object-fit: cover; /* wichtig! */ align-self: stretch; /* überschreibt das center */} .infoabend-page section.eightmod {background: var(--grey); margin-top: 0;} .infoabend-page section.eightmod .contentboxwrapper {align-items: end; width: 75%; margin: 0 auto; padding: 75px 0;} .infoabend-page section.eightmod .textbox {margin: 0; position: relative; display: inline-block;} .infoabend-page section.eightmod .textbox:last-child {text-align: left; padding-left: 35px;} .infoabend-page section.eightmod .textbox:first-child .h2-style {margin-bottom: 30px; text-transform: uppercase; letter-spacing: 3px; font-size: 35px;} .infoabend-page section.eightmod .row {display: flex; flex-wrap: wrap;} .infoabend-page section.eightmod .row .fieldbox {width: calc(50% - 15px); margin-right: 15px; position: relative; display: inline-block;} .infoabend-page section.eightmod .fieldbox {position: relative; width: 100%; margin-bottom: 10px;} .infoabend-page section.eightmod .row .fieldbox:last-child {margin-right: 0; margin-left: 15px;} .infoabend-page section.eightmod .row .fieldbox.full:last-child, .infoabend-page section.eightmod .row .fieldbox.full {width: 100%; margin-right: 0; margin-left: 0px;} .infoabend-page section.eightmod .fieldbox label, .infoabend-page section.eightmod .fieldbox label {position: absolute; left: 10px; z-index: 1; top: 10px; text-transform: uppercase; transition: 0.2s ease all;} .infoabend-page section.eightmod .fieldbox input, .infoabend-page section.eightmod .fieldbox textarea {width: 100%; border-radius: 0; background: #fff; border: 1px solid #ccc; padding: 15px 20px 15px 20px; font-size: 16px; font-family: var(--mainfont);} .infoabend-page section.eightmod .fieldbox textarea {height: 250px;} .infoabend-page section.eightmod .fieldbox input:not([type]):focus, .infoabend-page section.eightmod .fieldbox input[type=text]:focus, .infoabend-page section.eightmod .fieldbox input[type=email]:focus, .infoabend-page section.eightmod .fieldbox textarea:focus {outline: none;} .infoabend-page section.eightmod .fieldbox input:not([type]):focus+label, .infoabend-page section.eightmod .fieldbox input[type=text]:focus+label, .infoabend-page section.eightmod .fieldbox input[type=email]:focus+label, .infoabend-page section.eightmod .fieldbox textarea:focus+label {top: -5px; font-size: 10px; color: #808080;} .infoabend-page section.eightmod>.row {display: flex;} .infoabend-page section.eightmod>.row, .infoabend-page section.eightmod>.fieldbox {margin-bottom: 15px; float: left; width: 100%;} .infoabend-page section.eightmod form .hide {display: none; width: 0px; height: 0px;} .infoabend-page section.eightmod .pflicht {font-size: 14px; text-align: left; width: 100%; position: relative; color: #000; display: inline-block;} .infoabend-page section.eightmod .datenschutz {width: 100%; position: relative; margin-top: 20px; float: left; color: #000;} .infoabend-page section.eightmod .datenschutz label input {width: 25px; height: 25px; float: left; position: relative;} .infoabend-page section.eightmod .datenschutz label input+.info {float: left; position: relative; width: calc(100% - 45px); margin-left: 20px;} .infoabend-page section.eightmod .submit-wrapper {width: 100%; position: relative; margin-top: 20px; float: left;} .infoabend-page section.eightmod .submit-wrapper .button {background: var(--blue); padding: 17px 30px 15px 30px; text-align: center; text-transform: none; color: #fff; border-radius: 0px; font-weight: 600; font-size: 15px; border: 1px solid var(--blue); margin-bottom: 15px; transition: all .25s;} .infoabend-page section.eightmod .submit-wrapper .button:hover {background: var(--hovercolor); border-color: var(--hovercolor);} .infoabend-page section.eightmod .submit-wrapper .button:hover {background: var(--maincolor); color: #fff;} .infoabend-page .fieldbox input, .infoabend-page .fieldbox textarea {border: 1px solid #ccc; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;} .infoabend-page .form-error-global {color: #c00; font-weight: 600; font-size: 15px; margin-bottom: 10px; min-height: 20px;} .infoabend-page .form-error-global:not(:empty) {padding: 12px 16px; background-color: #fdecec; border: 2px solid #c00;} .infoabend-page .event h1 span {font-size: 50px; line-height: 55px; font-weight: 200;} .infoabend-page #eventformular {padding: 75px 0;} .infoabend-page #eventformular h3 {font-size: 35px; line-height: 45px;} .infoabend-page .stef.num {text-align: right; padding-right: 45px !important;} .infoabend-page .event-facts {display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 28px 0;} .infoabend-page .event-facts__item {padding: 20px 18px; border: 1px solid rgba(37, 46, 40, 0.35); background: #fff; text-align: center;} .infoabend-page .event-facts__label {display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #3A3F44;} .infoabend-page .event-facts__item strong {display: block; margin-bottom: 6px; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.15; font-weight: 500; color: #111;} .infoabend-page .event-facts__item span:last-child {display: block; font-size: 14px; line-height: 1.45; color: #333;} .infoabend-page .event-facts__item.location {background: #F0F0F1;} .infoabend-page .event-facts__item.location strong {font-size: clamp(17px, 1.7vw, 22px);} /* Modifier: unten neben dem Formular (Abschluss) laufen die Kacheln über die volle Spaltenbreite und stehen untereinander statt im Auto-Fit-Grid, weil der Container dort nur die halbe .contentboxwrapper-Breite hat. */ .infoabend-page .event-facts--stacked {grid-template-columns: 1fr;} @media (max-width: 850px) { .infoabend-page .event-facts {grid-template-columns: 1fr; gap: 10px; margin: 22px 0;} .infoabend-page .event-facts__item {padding: 16px 16px;} } @media screen and (max-width: 1440px) { .infoabend-page .content-width {max-width: calc(100% - 40px); width: 100%;} .infoabend-page .fullimg .image-wrapper {width: calc(100% - 40px);} .infoabend-page .contentboxwrapper.small {width: 85%; max-width: 85%;} .infoabend-page .contentbox.middle, .infoabend-page .contentboxwrapper.middle {max-width: 85%;} } @media screen and (max-width: 1280px) { .infoabend-page h1 {font-size: 45px; line-height: 55px;} } @media screen and (max-width: 1180px) { .infoabend-page .fullimg .image-wrapper {height: 100%;} .infoabend-page section.eightmod .textbox:first-child .h2-style {text-align: left;} .infoabend-page section.eightmod .contentboxwrapper {width: calc(100% - 40px);} } @media screen and (max-width: 1080px) { .infoabend-page .fullimg h2 {font-size: 40px; line-height: 45px;} .infoabend-page .contentboxwrapper {grid-template-columns: repeat(1, 1fr); gap: 45px;} .infoabend-page .contentboxwrapper .imagebox {height: 525px;} .infoabend-page .contentboxwrapper .imagebox img {object-fit: cover; height: 100%; width: 100%;} .infoabend-page .contentboxwrapper.small {width: 90%;} .infoabend-page .contentboxwrapper .imagebox img.img-contain {object-fit: contain;} } @media screen and (max-width: 991px) { .infoabend-page .contentbox.middle, .infoabend-page .contentboxwrapper.middle, .infoabend-page .contentboxwrapper.small {width: 100%; max-width: 100%;} .infoabend-page .contentbox.small, .infoabend-page .contentboxwrapper.small {max-width: 100%;} .infoabend-page .contentbox>.ctabox {margin-top: 0;} .infoabend-page .contentbox>p+.ctabox {margin-top: 35px;} .infoabend-page section {margin: 0px auto 45px;} } @media screen and (max-width: 892px) { .infoabend-page section.eightmod form {width: 100%;} .infoabend-page section.eightmod .contentboxwrapper {width: calc(100% - 40px); flex-direction: column;} .infoabend-page section.eightmod .textbox {width: 100%;} .infoabend-page .contentboxwrapper>div:last-child {padding-left: 0px;} .infoabend-page .contentboxwrapper {flex-direction: column;} .infoabend-page .contentboxwrapper>div {width: 100%;} .infoabend-page section.eightmod .textbox:last-child {text-align: left; padding-left: 0;} } @media screen and (max-width: 768px) { .infoabend-page section.eightmod .textbox:last-child {text-align: left; padding-left: 0;} .infoabend-page section.eightmod .contentbox {width: 100%;} .infoabend-page h1 {font-size: 35px; line-height: 45px;} .infoabend-page .fullimg h2, .infoabend-page h2, .infoabend-page .h2-style {font-size: 25px; line-height: 30px;} .infoabend-page .fullimg .imagebox {height: 325px;} .infoabend-page .fullimg .imagebox+.contentbox {margin-top: 0;} .infoabend-page .mt-250 {margin-top: 160px;} .infoabend-page .icon {width: clamp(160px, 45vw, 300px);} } @media screen and (max-width: 692px) { .infoabend-page .contentboxwrapper .imagebox {height: 325px;} .infoabend-page .ctabox .cta-wrapper a:first-child {margin-right: 0;} .infoabend-page .contentboxwrapper .imagebox img {object-fit: contain; height: 100%; width: auto;} .infoabend-page .contentbox.small {width: 90%;} .infoabend-page .ctabox .cta-wrapper a:last-child {border-left: 0;} } @media screen and (max-width: 592px) { .infoabend-page .ctabox .cta-wrapper {display: grid; grid-template-columns: repeat(1, 1fr); gap: 25px;} .infoabend-page .ctabox .cta-wrapper a:last-child {padding-left: 20px; border-left: 0px; text-transform: uppercase; font-weight: 400; font-size: 15px;} .infoabend-page .ctabox small {display: inline-block; margin-top: 10px; font-size: 12px; line-height: 20px; font-style: italic; padding-left: 20px;} .infoabend-page .ctabox {width: 100%;} .infoabend-page .ctabox small {text-align: center; padding-left: 0;} .infoabend-page .ctabox .cta-wrapper a {text-align: center;} .infoabend-page .cta-divider {margin: 0 auto;} .infoabend-page .ctabox .cta-wrapper a:last-child {text-align: center; padding-left: 0;} .infoabend-page .contentbox.small, .infoabend-page .contentboxwrapper.small, .infoabend-page .contentbox.middle, .infoabend-page .contentboxwrapper.middle, .infoabend-page .contentboxwrapper.small {width: calc(100% - 20px); max-width: calc(100% - 20px);} .infoabend-page section {margin: 0px auto 45px;} .infoabend-page .header-logo-center img, .infoabend-page .header-logo-center svg, .infoabend-page .mobile-logo img, .infoabend-page .mobile-logo svg {width: 140px; margin-top: 5px;} } @media screen and (max-width: 492px) { .infoabend-page .mt-250 {margin-top: 80px;} .infoabend-page .icon {width: clamp(120px, 40vw, 200px); transform: translate(-50%, -40%) scale(0.9);} .infoabend-page .content-width {max-width: calc(100% - 10px);} .infoabend-page section.eightmod .contentbox .row .fieldbox {width: 100%; margin-right: 0px; position: relative; margin-bottom: 15px;} .infoabend-page h1 {font-size: 25px; line-height: 35px; letter-spacing: 3px;} .infoabend-page h1 span {color: #000; font-size: 18px; line-height: 27px;} .infoabend-page h2, .infoabend-page section.eightmod .textbox:first-child .h2-style, .infoabend-page .h2-style {font-size: 18px; line-height: 27px;} .infoabend-page h2 span, .infoabend-page .h2-style span {font-size: 16px; line-height: 26px;} } @media screen and (max-width: 392px) { .infoabend-page section.eightmod .datenschutz label input+.info {width: calc(100% - 45px); font-size: 12px;} .infoabend-page section.eightmod .row .fieldbox {width: 100%; margin-right: 0;} .infoabend-page section.eightmod .row .fieldbox:last-child {margin-left: 0;} } .infoabend-page .header-logo-center {margin: 0 auto;} .infoabend-page .mobile-header-bar {justify-content: center;} .infoabend-page .video-16-9 {position: relative; width: 100%; max-width: 1100px; aspect-ratio: 16 / 9; margin: 0 auto; background: #000; overflow: hidden;} .infoabend-page .video-16-9 video {width: 100%; height: 100%; object-fit: cover; display: block;} .infoabend-page .section-alt {background: #E2E2E2; padding: 70px 0;} .infoabend-page .hero-title-section {padding-top: 60px; padding-bottom: 60px; margin-bottom: 0;} .infoabend-page .hero-split-row {display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; max-width: 1300px; margin: 0 auto;} .infoabend-page .hero-split-row__text h1 {margin-bottom: 20px;} .infoabend-page .hero-split-row__text h2 {font-size: 20px; line-height: 1.6; font-weight: 400; margin: 0; color: var(--dark);} .infoabend-page .hero-split-row__video .video-16-9 {max-width: 100%; margin: 0;} @media (max-width: 900px) { .infoabend-page .hero-split-row {grid-template-columns: 1fr; gap: 30px;} .infoabend-page .hero-split-row__video {order: -1;} } /* Welten-Header (Dental/Aesthea/MKG/Longevity): das rechte Menü (Welten-Switch + Kontakt/CTA) ist dort länger als im Dachmarken-Header und rutscht schon innerhalb der maximalen .wrap-Breite (#site-header .wrap, 117.5rem) ins zentrierte Logo — das passiert unabhängig von der Bildschirmbreite, da die Wrap-Breite nach oben gedeckelt ist. Deshalb hier fest (ohne @media) auf das mobile Burger-Menü umschalten, statt nur den Breakpoint zu verschieben. */ .nav-row:has(.nav-main-world) .nav-burger{display:flex} .nav-row:has(.nav-main-world) .nav-brand img{height:3.75rem} .nav-row:has(.nav-main-world) .nav-flyout{ position:fixed;top:0;left:0;height:100vh;width:min(21.25rem,84vw); background:var(--bg-2);flex-direction:column;align-items:flex-start;justify-content:flex-start; padding:6.875rem 2.125rem 2.5rem;transform:translateX(-100%);transition:transform .5s var(--ease);gap:1.375rem;overflow-y:auto; } .nav-row:has(.nav-main-world) .nav-flyout.is-open{transform:translateX(0)} .nav-row:has(.nav-main-world) .nav-right-group{flex-direction:column;align-items:flex-start;gap:1.125rem;width:100%} .nav-row:has(.nav-main-world) .nav-main{flex-direction:column;align-items:flex-start;gap:.25rem;width:100%} .nav-row:has(.nav-main-world) .nav-main > li{width:100%} .nav-row:has(.nav-main-world) .nav-main > li > a{color:var(--ink);opacity:1;width:100%;padding:.875rem .375rem;font-size:.875rem;white-space:normal;overflow-wrap:anywhere;min-width:0} .nav-row:has(.nav-main-world) .nav-main-left{max-width:none;overflow:visible} .nav-row:has(.nav-main-world) .nav-main-left > li{flex-shrink:1} .nav-row:has(.nav-main-world) .nav-main-world > li > a{padding:.875rem .375rem;font-size:.875rem;letter-spacing:.16em} .nav-row:has(.nav-main-world) .dropdown{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;background:transparent;display:none;padding:0 0 0 .875rem} .nav-row:has(.nav-main-world) .nav-main > li.is-open .dropdown{display:block;transform:none} .nav-row:has(.nav-main-world) .nav-cta{margin-left:0;width:100%} .nav-row:has(.nav-main-world) .nav-cta .btn{width:100%;justify-content:center} /* .header-zone reserviert per min-height Platz für den fixed Header (siehe Basisregel weiter oben). Der Wert 7.1875rem geht von der hohen Desktop-Nav aus — auf Welten-Seiten ist der Header dank .nav-main-world oben aber immer im kompakten Burger-Layout, unabhängig von der Fensterbreite. Ohne diese Regel bleibt .header-zone oberhalb von 111.25rem auf 7.1875rem und lässt eine sichtbare Lücke unter dem tatsächlich niedrigeren Header. */ .header-zone:has(.nav-main-world){min-height:5.3125rem} /* ============================================================= Karriere */ /* Marken-Badge (Logo + Name) — je Marke eine Modifier-Klasse statt Inline- Style, Farbwerte identisch zu SWK_JOB_BRANDS[…]['color'] in includes/config.php. */ .job-brand-badge{ display:inline-flex;align-items:center;gap:.625rem;padding:.5rem .875rem .5rem .625rem; border-radius:1.875rem;text-decoration:none; } .job-brand-badge img{height:1.375rem;width:auto;max-width:6.25rem;object-fit:contain} .job-brand-badge span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)} .job-brand-badge--stadtwaldklinik{background:color-mix(in srgb, #3d4a3a 14%, transparent)} .job-brand-badge--happysmile{background:color-mix(in srgb, #e3c400 14%, transparent)} .job-brand-badge--zahnzoo{background:color-mix(in srgb, #ed7702 14%, transparent)} .job-meta-row{display:flex;flex-wrap:wrap;gap:.625rem} .job-filter-row{display:flex;flex-wrap:wrap;gap:.75rem} .job-filter-btn{background:none;transition:background .3s,color .3s,border-color .3s} .job-filter-btn.is-active, .job-filter-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff} .job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1.5rem} @media(max-width:56.25rem){.job-grid{grid-template-columns:1fr 1fr}} @media(max-width:37.5rem){.job-grid{grid-template-columns:1fr}} .job-card{display:flex;flex-direction:column;align-items:flex-start;gap:.875rem;text-decoration:none;color:inherit;transition:transform .35s var(--ease),box-shadow .35s var(--ease)} /* .job-card setzt display:flex und überschreibt damit die UA-Regel [hidden]{display:none} (Autor-CSS gewinnt immer gegen das UA-Stylesheet, unabhängig von Spezifität) — ohne diese Zeile hat el.hidden=true aus dem Job-Filter (main.js) keinerlei sichtbare Wirkung. */ .job-card[hidden]{display:none} .job-card:hover{transform:translateY(-.25rem);box-shadow:0 1.5rem 2.5rem rgba(0,0,0,.08)} .job-card-title{font-size:1.15rem} .job-card-teaser{color:var(--ink-soft);font-size:.92rem} .job-card-link{margin-top:auto;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)} .job-empty-state{color:var(--ink-soft);margin-top:1.5rem} /* Job-Detailseite (includes/job-detail.php) */ .pad-header-offset{padding-top:clamp(90px,11vw,130px)} /* Dezenter Textlink (z. B. "Zurück zur Übersicht") statt des kräftigen .btn */ .back-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--ink-soft);text-decoration:none;transition:color .3s} .back-link:hover{color:var(--ink)} /* Aufgaben/Profil nebeneinander statt untereinander — nutzt die Breite von .wrap.mini besser aus. align-items:flex-start statt .grid-2s "center", da beide Listen meist unterschiedlich lang sind. */ .job-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:flex-start} @media(max-width:52.5rem){.job-columns{grid-template-columns:1fr}} /* Benefit-Kacheln: Icon oben, Text darunter zentriert. grid-auto-rows:1fr sorgt dafür, dass alle Kacheln unabhängig von der Textlänge gleich hoch werden; die Grid-Spalten sind ohnehin gleich breit. */ .job-benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);grid-auto-rows:1fr;margin-top:1.5rem} @media(max-width:56.25rem){.job-benefits-grid{grid-template-columns:1fr 1fr}} @media(max-width:35rem){.job-benefits-grid{grid-template-columns:1fr}} .benefit-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.875rem;min-height:8.75rem;padding:1.25rem 1rem;border:1px solid var(--line)} .benefit-card img{width:2rem;height:2rem;filter:brightness(0);opacity:.75} .benefit-card p{color:var(--ink-soft)} .job-form-intro{color:var(--ink-soft)} /* Unsichtbares Honeypot-Feld (Spam-Schutz) — Feld bleibt im Layout-Fluss entfernt, aber für Screenreader über aria-hidden ausgeblendet. */ .field-honeypot{position:absolute;left:-9999px} /* Zustimmungs-Checkbox + Label nebeneinander statt untereinander wie .field sonst (siehe .field weiter oben). */ .field-consent{flex-direction:row;align-items:flex-start;gap:.625rem} .field-consent input[type="checkbox"]{margin-top:.1875rem} .field-consent span{font-size:.86rem;color:var(--ink-soft)} /* Datei-Upload im Bewerbungsformular (siehe .field weiter oben) */ .field input[type="file"]{ background:var(--card-bg);border:1px dashed var(--line);border-radius:.625rem;padding:.75rem 1rem; font-family:var(--sans);font-size:.86rem;color:var(--ink-soft); } /* Status-Meldung des Bewerbungsformulars — gleiche Optik wie #form-status (Kontaktformular, siehe oben), eigene ID da eigenes Formular/eigener AJAX-Handler. */ #job-form-status{margin-top:1rem;font-size:.9rem;display:none;padding:.875rem 1.125rem;border-radius:.625rem} #job-form-status.ok{display:block;background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--accent-deep)} #job-form-status.err{display:block;background:rgba(190,60,50,.12);color:#a23225} #job-form-status.info{display:block;background:var(--bg-2);color:var(--ink)} /* Pflichtfeld-Kennzeichnung (Sternchen) — Farbe allein reicht laut WCAG nicht als einziges Unterscheidungsmerkmal, daher zusätzlich der Text "*" selbst sowie eine für Screenreader hörbare Ergänzung (.sr-only) je Pflichtfeld. */ .required{color:#a23225} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Kontaktformular — Client-Validierung (siehe #contact-form in kontakt.php) */ #form-status.info{display:block;background:var(--bg-2);color:var(--ink)} .field-error{display:none;font-size:.78rem;color:#a23225;margin-top:-.125rem} .field.has-error .field-error{display:block} .field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#a23225} .field.has-error input[type="checkbox"]{outline:2px solid #a23225;outline-offset:2px} .field-consent .field-error{flex-basis:100%} /* ============================================================ Infoabend-Kampagnenseite (event/index.php) — Ergänzungen zum .infoabend-page-Baukasten weiter oben: Termin-Badge im Hero und FAQ-Akkordeon (natives
/, ohne JS). ============================================================ */ .infoabend-page .eventline{display:inline-block;border-left:3px solid var(--maincolor);padding:2px 0 2px 14px;margin-bottom:22px;font-weight:600} .infoabend-page .eventline span{display:block;font-weight:400;color:var(--secondcolor);font-size:.85em;margin-top:2px} .infoabend-page .hero-call{margin-top:25px} .infoabend-page .faq{max-width:900px} .infoabend-page .faq details{border-top:1px solid #d5d5d5} .infoabend-page .faq details:last-of-type{border-bottom:1px solid #d5d5d5} .infoabend-page .faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;font-family:var(--titlefont);font-size:18px;line-height:28px;font-weight:400} .infoabend-page .faq summary::-webkit-details-marker{display:none} .infoabend-page .faq summary::after{content:"+";position:absolute;right:6px;top:18px;font-size:1.6rem;font-weight:300;color:var(--maincolor)} .infoabend-page .faq details[open] summary::after{content:"\2013"} .infoabend-page .faq .faq-a{padding:0 40px 22px 0} .infoabend-page .faq .faq-a p:last-child{margin-bottom:0} .infoabend-page .quote-note{text-align:center;margin-top:15px;font-size:13px;color:var(--secondcolor)} /* Zweite Hero-Spalte, wenn dort eine Formular-Karte statt eines Videos sitzt (siehe .event-card unten) — gleiches Grid-/Mobile-Reihenfolge-Verhalten wie .hero-split-row__video, nur ohne die Video-16:9-Box-Regel. */ @media (max-width:900px){ .infoabend-page .hero-split-row__aside{order:-1} } /* Formular-Karte (Hero-Anmeldung + Abschluss-CTA): eigenständige, tragbare Variante der .eightmod-Formularfelder weiter oben — die dortigen Regeln sind fest an "section.eightmod" gebunden und greifen außerhalb dieser breiten Grau-Band-Section nicht. */ .infoabend-page .event-card{background:#fff;border:1px solid #d5d5d5;border-top:4px solid var(--maincolor);padding:clamp(24px,4vw,36px)} .infoabend-page .event-card h3{margin-bottom:10px} .infoabend-page .event-card .hint{color:var(--secondcolor);font-size:14px;line-height:22px;margin-bottom:20px} .infoabend-page .event-card .row{display:flex;flex-wrap:wrap} .infoabend-page .event-card .row .fieldbox{width:calc(50% - 15px);margin-right:15px;margin-bottom:14px} .infoabend-page .event-card .row .fieldbox:last-child{margin-right:0;margin-left:15px} .infoabend-page .event-card .fieldbox{position:relative;width:100%;margin-bottom:14px} .infoabend-page .event-card .fieldbox.full{width:100%;margin:0 0 14px} .infoabend-page .event-card .fieldbox label{position:absolute;left:10px;top:10px;z-index:1;text-transform:uppercase;font-size:12px;letter-spacing:.02em;color:#666;pointer-events:none;transition:.2s ease all} .infoabend-page .event-card .fieldbox input, .infoabend-page .event-card .fieldbox select{width:100%;border-radius:0;background:#fff;border:1px solid #ccc;padding:15px 14px;font-size:15px;font-family:var(--mainfont);color:#000} .infoabend-page .event-card .fieldbox input:focus, .infoabend-page .event-card .fieldbox select:focus{outline:none} .infoabend-page .event-card .fieldbox input:focus+label{top:-8px;left:6px;font-size:10px;background:#fff;padding:0 4px;color:#808080} .infoabend-page .event-card .fieldbox select+label{top:-8px;left:6px;font-size:10px;background:#fff;padding:0 4px;color:#808080} .infoabend-page .event-card .hide{display:none;width:0;height:0} .infoabend-page .event-card .pflicht{font-size:12px;color:#666;margin-top:2px} .infoabend-page .event-card .datenschutz{margin-top:16px} .infoabend-page .event-card .datenschutz label{display:flex;gap:14px} .infoabend-page .event-card .datenschutz label input{width:22px;height:22px;flex:0 0 auto;margin-top:2px} .infoabend-page .event-card .datenschutz label .info{font-size:12px;line-height:18px} .infoabend-page .event-card .submit-wrapper{margin-top:18px} .infoabend-page .event-card .submit-wrapper .button{display:block;width:100%;background:var(--blue);color:#fff;text-align:center;padding:16px 20px;font-weight:600;font-size:15px;border:1px solid var(--blue);border-radius:0;cursor:pointer} .infoabend-page .event-card .submit-wrapper .button:hover{background:var(--maincolor);border-color:var(--maincolor)} .infoabend-page .event-card .form-error-global{color:#c00;font-weight:600;font-size:14px;margin-top:8px} .infoabend-page .event-card .ctabox{margin-top:0} @media (max-width:492px){ .infoabend-page .event-card .row .fieldbox{width:100%;margin-right:0} .infoabend-page .event-card .row .fieldbox:last-child{margin-left:0} } /* ============================================================ event/index.php — Umbau September 2026 (siehe Umsetzungsbriefing): schwebende Vierfach-Kontaktleiste aus footer.php ausblenden, Referent- Namenszeile, Testimonial-Video links/Text rechts (mobil Video nach dem Text), schmaleres langes Behandlungsvideo, mobiler Sticky-CTA-Balken und kürzere/reduzierte Scroll-Reveal-Animation. ============================================================ */ /* .floating-contact liegt außerhalb von .infoabend-page (wird erst nach dessen schließendem über footer.php eingebunden) — body.event greift daher zuverlässig, .infoabend-page als Ahnen-Selektor nicht. */ body.event .floating-contact{display:none} .infoabend-page .referent-name{margin-bottom:14px;font-size:15px;line-height:1.5} .infoabend-page .testimonial-block{align-items:center} .infoabend-page .testimonial-block .video-16-9{max-width:100%;margin:0} @media (max-width:900px){ .infoabend-page .testimonial-block .video-16-9{order:2} .infoabend-page .testimonial-block .textbox{order:1} } .infoabend-page .video-16-9--narrow{max-width:60rem} .infoabend-page .mobile-sticky-cta{display:none} @media (max-width:900px){ .infoabend-page .mobile-sticky-cta{ display:block;position:fixed;left:0;right:0;bottom:0;z-index:1500; background:var(--blue);color:#fff;text-align:center;text-decoration:none; font-weight:600;font-size:15px;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px)); box-shadow:0 -.375rem 1.25rem rgba(0,0,0,.14); } .infoabend-page{padding-bottom:64px} } /* Weniger, kürzere Bewegung auf dieser Kampagnenseite statt der sitesweiten .9s/2.25rem-Reveal-Animation (siehe .reveal Basisregel weiter oben). */ .infoabend-page .reveal{transition-duration:.25s;transform:translateY(.5rem)}