@font-face{font-family:"Outfit";font-style:normal;font-weight:300 700;font-display:swap;src:url("../assets/fonts/outfit.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("../assets/fonts/plusjakartasans.woff2") format("woff2")}

:root{
  --bg:#EEF3F3;
  --bg-tief:#DDE8E8;
  --salbei:#C9DCDC;
  --salbei-2:#B3CCCD;
  --petrol:#2F5F62;
  --petrol-hover:#264F52;
  --petrol-hell:#5E8F92;
  --ink:#1B2A2B;
  --ink-2:#3F5152;
  --ink-3:#5F7273;
  --glas:rgba(255,255,255,.58);
  --glas-stark:rgba(255,255,255,.78);
  --glas-rand:rgba(255,255,255,.85);
  --schatten:0 24px 60px -28px rgba(47,95,98,.35), 0 2px 6px -2px rgba(47,95,98,.08);
  --schatten-klein:0 12px 30px -18px rgba(47,95,98,.35);
  --r-xl:36px; --r-l:28px; --r-m:20px; --r-s:14px;
  --head:"Outfit", system-ui, sans-serif;
  --text:"Plus Jakarta Sans", system-ui, sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:min(1240px, 100% - 3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--text); font-size:1.02rem; line-height:1.65; color:var(--ink-2);
  background:
    radial-gradient(1100px 700px at 88% -8%, #CFE1E1 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 30%, #E4EEEE 0%, transparent 60%),
    radial-gradient(1000px 800px at 110% 70%, #D6E6E5 0%, transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--head); color:var(--ink); font-weight:500; letter-spacing:-.015em; margin:0}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
ul{margin:0; padding:0; list-style:none}
.wrap{width:var(--wrap); margin-inline:auto}
.skip{position:absolute; left:-999px; top:1rem; background:#fff; padding:.6rem 1rem; border-radius:999px; z-index:999}
.skip:focus{left:1rem}
:focus-visible{outline:2px solid var(--petrol); outline-offset:3px; border-radius:8px}

/* Glas */
.glas{
  background:var(--glas);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--glas-rand);
  box-shadow:var(--schatten), inset 0 1px 0 rgba(255,255,255,.9);
}

/* Knöpfe */
.btn{
  display:inline-flex; align-items:center; gap:.85rem; white-space:nowrap;
  font-family:var(--text); font-weight:600; font-size:.98rem;
  padding:.55rem .6rem .55rem 1.5rem; border-radius:999px; border:0; cursor:pointer;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.btn .pfeil{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; transition:transform .35s var(--ease)}
.btn .pfeil img{width:18px; height:18px}
.btn:hover .pfeil{transform:translateX(3px) rotate(-45deg)}
.btn:active{transform:scale(.98)}
.btn-primaer{background:var(--petrol); color:#fff; box-shadow:0 14px 30px -14px rgba(47,95,98,.8)}
.btn-primaer:hover{background:var(--petrol-hover)}
.btn-primaer .pfeil{background:rgba(255,255,255,.16)}
.btn-primaer .pfeil img{filter:invert(1)}
.btn-klein{padding:.4rem .45rem .4rem 1.15rem; font-size:.9rem}
.btn-klein .pfeil{width:32px; height:32px}
.zweitweg{margin-top:1rem; font-size:.93rem; color:var(--ink-3)}
.zweitweg a{color:var(--petrol); font-weight:600; border-bottom:1px solid rgba(47,95,98,.35)}
.erklaer{margin-top:.9rem; font-size:.93rem; color:var(--ink-3)}

/* Kopfzeile */
.kopf{position:fixed; top:1rem; left:0; right:0; z-index:100; pointer-events:none}
.kopf-pill{
  pointer-events:auto; width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:.55rem .6rem .55rem 1.4rem; border-radius:999px;
  transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
.kopf.gescrollt .kopf-pill{background:var(--glas-stark)}
.marke{display:flex; align-items:center; gap:.72rem; color:var(--ink)}
.marke-zeichen{width:42px; height:42px; flex:none; fill:none; stroke:var(--petrol); stroke-width:3.1; stroke-linecap:round; stroke-linejoin:round}
.marke-text{display:flex; flex-direction:column; line-height:1.05}
.marke-name{font-family:var(--head); font-weight:440; font-size:1.1rem; letter-spacing:-.012em; color:var(--ink)}
.marke-sub{font-family:var(--text); font-weight:600; font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-top:.32rem}
.nav{display:flex; align-items:center; gap:.3rem}
.nav a, .nav span{font-size:.92rem; font-weight:500; padding:.55rem .95rem; border-radius:999px; color:var(--ink-2); transition:background .25s}
.nav a:hover{background:rgba(255,255,255,.7)}
.nav a[aria-current]{background:#fff; color:var(--ink); box-shadow:var(--schatten-klein)}
.nav [aria-disabled]{opacity:.55; cursor:default}
.menue-knopf{display:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--glas-rand); background:#fff; place-items:center; cursor:pointer}
.menue-knopf img{width:22px; height:22px}

/* Mobiles Menü: bewusst Geschwister der Kopfzeile, nicht Kind (backdrop-filter + fixed) */
.menue{position:fixed; inset:0; z-index:200; background:rgba(238,243,243,.97); padding:6.5rem 1.5rem 2rem; display:flex; flex-direction:column; gap:.3rem; transform:translateY(-100%); visibility:hidden; transition:transform .5s var(--ease), visibility .5s}
.menue.offen{transform:none; visibility:visible}
.menue a, .menue span{font-family:var(--head); font-size:1.6rem; color:var(--ink); padding:.7rem 0; border-bottom:1px solid rgba(47,95,98,.12)}
.menue [aria-disabled]{opacity:.45}
.menue .btn{margin-top:1.4rem; justify-content:space-between; font-family:var(--text); font-size:1rem; border-bottom:0; padding:.55rem .6rem .55rem 1.5rem; color:#fff}
.menue-zu{position:absolute; top:1.5rem; right:1.5rem; width:46px; height:46px; border-radius:50%; border:1px solid rgba(47,95,98,.15); background:#fff; display:grid; place-items:center; cursor:pointer}
.menue-zu img{width:22px; height:22px}

/* Abschnitte */
.abschnitt{padding:clamp(4.5rem,9vw,8rem) 0}
.kopfzeile-sek{max-width:760px; margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.kopfzeile-sek.mitte{margin-inline:auto; text-align:center}
.h2{font-size:clamp(2rem,3.6vw,3.1rem); line-height:1.1}
.h3{font-size:1.35rem; line-height:1.25}
.lead{font-size:1.1rem; color:var(--ink-2)}
.chip{display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:600; color:var(--petrol); padding:.45rem .95rem; border-radius:999px; background:rgba(255,255,255,.7); border:1px solid var(--glas-rand); margin-bottom:1.3rem}
.chip::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--petrol-hell)}

/* Hero */
.hero{padding-top:6.8rem}
.hero-karte{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:linear-gradient(120deg,#D9E7E7 0%,#C4D9DA 45%,#A9C5C7 100%);
  min-height:min(78vh,720px); display:grid; grid-template-columns:1.05fr .95fr;
  box-shadow:var(--schatten);
}
.hero-text{position:relative; z-index:2; padding:clamp(2.5rem,5vw,4.5rem) clamp(1.8rem,4vw,4rem); align-self:center}
.hero h1{font-size:clamp(2.2rem,3.7vw,3.4rem); line-height:1.06; font-weight:400; margin-bottom:1.4rem; max-width:17ch}
.hero .lead{max-width:48ch; margin-bottom:2rem; color:var(--ink-2)}
.hero-bild{position:relative; z-index:1}
.hero-bild img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%); mask-image:linear-gradient(90deg,transparent 0%,#000 26%)}
.vertrauen{margin-top:1.1rem; display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem}
.vertrauen li{border-radius:var(--r-m); padding:1.1rem 1.25rem; display:flex; align-items:center; gap:.85rem; font-size:.92rem; font-weight:600; color:var(--ink); line-height:1.35}
.vertrauen .ico{flex:none; width:40px; height:40px; border-radius:12px; background:#fff; display:grid; place-items:center; box-shadow:var(--schatten-klein)}
.vertrauen .ico img{width:22px; height:22px}

/* Problem */
.problem-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,5rem); align-items:start}
.problem-grid .h2{position:sticky; top:7rem}
.problem-karte{border-radius:var(--r-l); padding:clamp(1.6rem,3vw,2.6rem)}
.problem-karte p{font-size:1.05rem}
.problem-karte .schluss-satz{font-family:var(--head); font-size:1.3rem; line-height:1.4; color:var(--ink); margin-top:1.4rem; padding-top:1.4rem; border-top:1px solid rgba(47,95,98,.14)}
.cta-zeile{margin-top:2rem}

/* Vorher / Nachher */
.vergleich{border-radius:var(--r-xl); padding:clamp(1.4rem,3vw,2.4rem); display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.vergleich-spalte{border-radius:var(--r-l); padding:1.6rem}
.vergleich-spalte.vorher{background:rgba(255,255,255,.4)}
.vergleich-spalte.nachher{background:var(--petrol); color:#fff}
.vergleich-spalte h3{font-size:1rem; font-family:var(--text); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1rem; color:inherit}
.vergleich-spalte.vorher h3{color:var(--ink-3)}
.vergleich-spalte li{display:flex; gap:.8rem; align-items:flex-start; padding:.85rem 0; border-top:1px solid rgba(47,95,98,.12); font-size:1rem}
.vergleich-spalte.nachher li{border-top-color:rgba(255,255,255,.18); font-weight:600}
.vergleich-spalte li:first-of-type{border-top:0}
.vergleich-spalte li img{flex:none; width:20px; height:20px; margin-top:.2rem}
.vergleich-spalte.vorher li{color:var(--ink-3)}
.vergleich-spalte.nachher li img{filter:invert(1)}

/* Über / Guide */
.guide-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:start}
.guide-grid .collage{position:sticky; top:7rem}
.collage{position:relative; min-height:560px}
.collage .gross{position:absolute; left:0; top:0; width:78%; height:82%; border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 90px; overflow:hidden; box-shadow:var(--schatten)}
.collage .klein{position:absolute; right:0; bottom:0; width:46%; height:46%; border-radius:var(--r-l); overflow:hidden; border:6px solid rgba(255,255,255,.9); box-shadow:var(--schatten)}
.collage img{width:100%; height:100%; object-fit:cover}
.guide-text .h3{margin:2rem 0 1rem}
.zitat{margin:2rem 0 0; border-radius:var(--r-l); padding:1.6rem 1.8rem}
.zitat p{font-family:var(--head); font-size:1.28rem; line-height:1.45; color:var(--ink); margin:0 0 .8rem}
.zitat cite{font-style:normal; font-size:.9rem; font-weight:600; color:var(--petrol)}

/* Zahlenband */
.zahlen{border-radius:var(--r-xl); padding:clamp(1.6rem,3vw,2.6rem); display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem}
.zahl strong{display:block; font-family:var(--head); font-weight:400; font-size:clamp(2.4rem,4vw,3.6rem); line-height:1; color:var(--petrol); letter-spacing:-.03em; margin-bottom:.6rem}
.zahl span{font-size:.92rem; color:var(--ink-2); line-height:1.4; display:block; max-width:22ch}

/* Plan / Ablauf */
.plan-kopf{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:end; margin-bottom:3rem}
.pruefragen{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:3.5rem}
.pruefrage{border-radius:var(--r-l); padding:1.6rem 1.6rem 1.8rem; position:relative}
.pruefrage .ico{width:48px; height:48px; border-radius:14px; background:var(--petrol); display:grid; place-items:center; margin-bottom:1.3rem}
.pruefrage .ico img{width:24px; height:24px; filter:invert(1)}
.pruefrage p{font-family:var(--head); font-size:1.32rem; line-height:1.3; color:var(--ink); margin:0}
.ablauf{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:start; gap:1rem; text-align:center}
.schritt .nr{font-family:var(--head); font-weight:300; font-size:clamp(3.4rem,5vw,4.6rem); line-height:1; color:rgba(47,95,98,.28); letter-spacing:-.03em; margin-bottom:.6rem}
.schritt h3{font-size:1.3rem; margin-bottom:.6rem}
.schritt p{font-size:.97rem; max-width:32ch; margin-inline:auto}
.pfeil-zw{align-self:center; margin-top:-3rem; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.7); border:1px solid var(--glas-rand)}
.pfeil-zw img{width:20px; height:20px}
.plan-zitat{max-width:760px; margin:3.5rem auto 0; text-align:center}
.kosten{margin-top:3rem; border-radius:var(--r-xl); padding:clamp(1.8rem,3.5vw,3rem); display:grid; grid-template-columns:auto 1fr; gap:1.8rem; align-items:start; background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.5))}
.kosten .ico{width:64px; height:64px; border-radius:20px; background:var(--petrol); display:grid; place-items:center}
.kosten .ico img{width:30px; height:30px; filter:invert(1)}
.kosten .h3{font-size:1.7rem; margin-bottom:.8rem}
.kosten p{font-size:1.06rem}

/* Erster Termin */
.termin{display:grid; grid-template-columns:1.05fr .95fr; gap:1.2rem; align-items:stretch}
.termin-karte{border-radius:var(--r-xl); padding:clamp(1.8rem,3.5vw,3rem)}
.termin-karte .h2{margin-bottom:1rem}
.liste li{display:flex; gap:.9rem; align-items:flex-start; padding:.9rem 0; border-top:1px solid rgba(47,95,98,.12); font-weight:500; color:var(--ink)}
.liste li:first-child{border-top:0}
.liste .haken{flex:none; width:28px; height:28px; border-radius:50%; background:rgba(47,95,98,.1); display:grid; place-items:center}
.liste .haken img{width:16px; height:16px}
.termin-bild{border-radius:var(--r-xl); overflow:hidden; min-height:420px; box-shadow:var(--schatten)}
.termin-bild img{width:100%; height:100%; object-fit:cover}

/* Leistungen */
.leistungen-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:1.1rem}
.leistung{border-radius:var(--r-l); padding:1.7rem; display:flex; flex-direction:column; gap:1rem; grid-column:span 2; transition:transform .45s var(--ease), box-shadow .45s var(--ease)}
.leistung:hover{transform:translateY(-4px)}
.leistung.breit{grid-column:span 3}
.leistung-kopf{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem}
.leistung .ico{flex:none; width:58px; height:58px; border-radius:18px; background:rgba(255,255,255,.85); border:1px solid var(--glas-rand); display:grid; place-items:center}
.leistung .ico img{width:30px; height:30px}
.leistung h3{font-size:1.28rem}
.leistung p{font-size:.97rem; margin:0}
.leistung.mit-bild{padding:0; overflow:hidden}
.leistung.mit-bild .leistung-bild{height:190px; overflow:hidden}
.leistung.mit-bild .leistung-bild img{width:100%; height:100%; object-fit:cover}
.leistung.mit-bild .leistung-inhalt{padding:1.5rem 1.7rem 1.7rem; display:flex; flex-direction:column; gap:.8rem}
.leistung.getoent{background:linear-gradient(140deg,#5E8F92,#2F5F62); color:#fff; border-color:rgba(255,255,255,.2)}
.leistung.getoent p{color:rgba(255,255,255,.92); font-size:1.05rem; line-height:1.6}
.leistungen-cta{margin-top:2.2rem; text-align:center}

/* Angst */
.angst-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.angst-bild{position:relative}
.angst-bild .foto{border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--schatten)}
.angst-bild .foto img{width:100%; height:100%; object-fit:cover}
.angst-text .zitat{margin-top:2rem}

/* Praxisräume: Rundgang */
.rundgang-kopf{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:end; margin-bottom:2.4rem}
.rundgang-leiste{display:flex; justify-content:space-between; align-items:center; gap:2rem; margin-bottom:1.5rem}
.rundgang-titel{font-family:var(--head); font-size:1.35rem; color:var(--ink); margin:0}
.rundgang-fortschritt{flex:0 1 280px; height:2px; border-radius:2px; background:rgba(47,95,98,.15); overflow:hidden}
.rundgang-fortschritt i{display:block; height:100%; background:var(--petrol); transform:scaleX(0); transform-origin:left}
.rundgang-track{--rand:max(1.5rem, calc((100vw - 1240px) / 2)); display:flex; gap:1.1rem; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--rand); padding:.4rem var(--rand) 1.4rem; scrollbar-width:none}
.rundgang-track::-webkit-scrollbar{display:none}
.station{flex:none; margin:0; scroll-snap-align:start}
.station-bild{border-radius:var(--r-l); overflow:hidden; box-shadow:var(--schatten); border:1px solid var(--glas-rand)}
.station-bild img{height:clamp(300px,32vw,440px); width:auto; max-width:none; object-fit:cover; user-select:none; -webkit-user-drag:none}
.station figcaption{margin-top:.85rem; font-size:.9rem; font-weight:600; color:var(--ink-2)}
/* Scroll-Scrub-Modus (per JS nur Desktop ohne reduzierte Bewegung) */
.rundgang.scrub .rundgang-buehne{min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding-top:5.5rem}
.rundgang.scrub .rundgang-fenster{overflow:hidden}
.rundgang.scrub .rundgang-track{overflow:visible; scroll-snap-type:none; width:max-content; will-change:transform}
.rundgang.scrub .station-bild img{height:clamp(320px,54vh,540px); transform:scale(1.12)}
@media (max-width:860px){
  .rundgang-kopf{grid-template-columns:1fr}
  .station-bild img{height:340px}
  .rundgang-fortschritt{display:none}
}
@media (max-width:560px){
  .rundgang-kopf{text-align:center}
  .rundgang-kopf .chip{display:flex; width:max-content; margin-inline:auto}
  .rundgang-track{--rand:1rem}
  .rundgang-leiste{justify-content:center}
  .rundgang-titel{text-align:center}
  .station-bild img{height:300px}
}

/* Team */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem}
.person{border-radius:var(--r-l); padding:1.7rem; display:flex; flex-direction:column; gap:1rem}
.monogramm{width:64px; height:64px; border-radius:20px; display:grid; place-items:center; font-family:var(--head); font-size:1.35rem; font-weight:500; color:#fff; background:linear-gradient(145deg,#7FA7AA,#2F5F62); box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.person h3{font-size:1.14rem; line-height:1.3}
.person p{font-size:.95rem; margin:0}
.person .portrait{width:88px; height:88px; border-radius:24px; object-fit:cover; object-position:50% 25%; box-shadow:var(--schatten-klein)}
.team-zusatz{margin-top:1.8rem; display:flex; align-items:center; justify-content:center; gap:1rem; color:var(--ink-3); font-size:.97rem; text-align:left}
.team-zusatz p{margin:0}
.avatare{display:flex; flex:none}
.avatare img{width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:50% 25%; border:3px solid #fff; margin-left:-12px; box-shadow:var(--schatten-klein)}
.avatare img:first-child{margin-left:0}

/* FAQ */
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,5rem); align-items:start}
.faq-liste{display:flex; flex-direction:column; gap:.75rem}
.frage{border-radius:var(--r-m); overflow:hidden}
.frage summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.25rem 1.4rem; font-family:var(--head); font-size:1.14rem; color:var(--ink)}
.frage summary::-webkit-details-marker{display:none}
.frage summary .plus{flex:none; width:36px; height:36px; border-radius:50%; background:#fff; display:grid; place-items:center; transition:transform .35s var(--ease), background .3s}
.frage summary .plus img{width:18px; height:18px}
.frage[open] summary .plus{transform:rotate(45deg); background:var(--petrol)}
.frage[open] summary .plus img{filter:invert(1)}
.frage .antwort{padding:0 1.4rem 1.35rem; font-size:1rem}

/* Schluss */
.schluss-karte{position:relative; overflow:hidden; border-radius:var(--r-xl); background:linear-gradient(125deg,#3F7275 0%,#2F5F62 55%,#244C4F 100%); color:#fff; display:grid; grid-template-columns:1.1fr .9fr; box-shadow:var(--schatten)}
.schluss-text{padding:clamp(2.2rem,5vw,4.5rem); position:relative; z-index:2}
.schluss-text .h2{color:#fff; margin-bottom:1.4rem}
.schluss-text p{color:rgba(255,255,255,.9); font-size:1.06rem}
.schluss-text .btn-primaer{background:#fff; color:var(--petrol); box-shadow:0 14px 30px -14px rgba(0,0,0,.5); margin-top:1rem}
.schluss-text .btn-primaer .pfeil{background:rgba(47,95,98,.1)}
.schluss-text .btn-primaer .pfeil img{filter:none}
.schluss-text .zweitweg{color:rgba(255,255,255,.8)}
.schluss-text .zweitweg a{color:#fff; border-bottom-color:rgba(255,255,255,.5)}
.schluss-bild{position:relative}
.schluss-bild img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 25%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%); mask-image:linear-gradient(90deg,transparent 0%,#000 30%)}

/* Fusszeile */
.fuss{margin-top:clamp(4rem,8vw,7rem); background:#1D3B3D; color:rgba(255,255,255,.78); padding:4.5rem 0 2rem; border-radius:var(--r-xl) var(--r-xl) 0 0}
.fuss-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem}
.fuss .marke{margin-bottom:1.3rem}
.fuss .marke-zeichen{stroke:#fff}
.fuss .marke-name{color:#fff}
.fuss .marke-sub{color:rgba(255,255,255,.62)}
.fuss-fakten{font-size:.94rem; line-height:1.7; max-width:44ch}
.fuss h3{font-family:var(--text); font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem}
.fuss li{margin-bottom:.55rem; font-size:.94rem}
.fuss a{color:#fff}
.fuss a:hover{color:#BFD9DA}
.fuss [aria-disabled]{opacity:.55; cursor:default}
.fuss-kontakt{font-size:.94rem; line-height:1.75}
.fuss-kontakt a{border-bottom:1px solid rgba(255,255,255,.3)}
.fuss-zeiten{margin-top:1rem; font-size:.9rem; line-height:1.7}
.fuss-unten{margin-top:3.5rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.86rem}
.fuss-unten .rechts{display:flex; gap:1.4rem}
.follow{color:#BFD9DA !important}

/* Sticky Mobile-CTA */
.mobil-cta{position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:90; display:none; transform:translateY(140%); transition:transform .45s var(--ease)}
.mobil-cta.sichtbar{transform:none}
.mobil-cta .btn{width:100%; justify-content:space-between}

/* Reveal */
.js .rv{opacity:0; transform:translateY(34px); filter:blur(6px)}
.js .rv.da{opacity:1; transform:none; filter:none}

/* Responsiv */
@media (max-width:1100px){
  .nav{display:none}
  .menue-knopf{display:grid}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .vertrauen{grid-template-columns:repeat(2,1fr)}
  .zahlen{grid-template-columns:repeat(2,1fr)}
  .fuss-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .hero-karte{grid-template-columns:1fr; min-height:0}
  .hero-bild{height:360px; order:2}
  .hero-bild img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%); mask-image:linear-gradient(180deg,transparent 0%,#000 30%)}
  .problem-grid, .guide-grid, .plan-kopf, .termin, .angst-grid, .faq-grid, .vergleich{grid-template-columns:1fr}
  .problem-grid .h2{position:static}
  .guide-grid .collage{position:relative; top:auto}
  .pruefragen{grid-template-columns:1fr}
  .ablauf{grid-template-columns:1fr; gap:2rem}
  .pfeil-zw{margin:0 auto; transform:rotate(90deg)}
  .leistungen-grid{grid-template-columns:1fr}
  .leistung, .leistung.breit{grid-column:auto}
  .collage{min-height:440px}
  .schluss-karte{grid-template-columns:1fr}
  .schluss-bild{height:300px}
  .schluss-bild img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 35%); mask-image:linear-gradient(180deg,transparent 0%,#000 35%)}
  .mobil-cta{display:block}
  .kosten{grid-template-columns:1fr}
}
@media (max-width:560px){
  :root{--wrap:calc(100% - 2rem)}
  .kopf-btn{display:none}
  .marke-zeichen{width:38px; height:38px}
  .marke-name{font-size:1.02rem}
  .vertrauen, .zahlen, .team-grid, .fuss-grid{grid-template-columns:1fr}
  .hero-text{text-align:center}
  .hero h1, .hero .lead{margin-inline:auto}
  .kopfzeile-sek, .schluss-text, .termin-karte .kopfzeile-sek{text-align:center}
  .cta-zeile, .leistungen-cta{text-align:center}
  .btn{white-space:normal; text-align:left; font-size:.93rem}
  .problem-grid > .h2, .plan-kopf, .guide-text > .chip, .guide-text > .h2, .angst-text > .chip, .angst-text > .h2, .faq-grid .kopfzeile-sek{text-align:center}
  .guide-text, .angst-text{text-align:left}
  .guide-text > .chip, .angst-text > .chip{display:flex; width:max-content; margin-inline:auto}
  .cta-zeile .erklaer{text-align:center}
  .chip{text-align:left}
  .zitat p{font-size:1.15rem}
  .collage{min-height:360px}
  .team-zusatz{flex-direction:column; text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms !important; animation-duration:.001ms !important}
  .js .rv{opacity:1; transform:none; filter:none}
}
@media (prefers-reduced-transparency:reduce){
  .glas{background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none}
}

/* ===================================================================
   Copy-Angleich 02.10.: neue Bausteine im Stil von Version 1 (Petrol, Glas)
   =================================================================== */
:root{color-scheme:light}
.ico .ico-svg{display:block; width:24px; height:24px; color:var(--petrol)}
.leistung .ico .ico-svg{width:30px; height:30px}
.hero h1{max-width:20ch}
p, li, dd{text-wrap:pretty}
h1, h2, h3{text-wrap:balance}

/* Problem: vier Situationen als Glaskarten */
.tueren{display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem}
.tuer{border-radius:var(--r-l); padding:clamp(1.5rem,2.6vw,2.1rem); display:flex; flex-direction:column; gap:.8rem}
.tuer h3{font-size:clamp(1.13rem,1.04rem + .36vw,1.26rem); line-height:1.3; letter-spacing:-.012em}
.tuer p{margin:0; flex:1; color:var(--ink-2); max-width:37em}
.tuer-link{display:inline-flex; align-items:center; gap:.45rem; font-size:.9rem; font-weight:600; color:var(--petrol); margin-top:.3rem; cursor:default}
.tuer-link img{opacity:.6}
.merksatz{margin:clamp(1.8rem,3vw,2.6rem) auto 0; max-width:46ch; text-align:center; font-family:var(--head); font-size:clamp(1.25rem,2vw,1.55rem); line-height:1.4; letter-spacing:-.012em; color:var(--ink)}

/* Nutzen: drei Glaskarten */
.nutzen-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
.nutzen{border-radius:var(--r-l); padding:1.8rem; display:flex; flex-direction:column; gap:.7rem}
.nutzen .ico{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; margin-bottom:.5rem; background:#fff; box-shadow:var(--schatten-klein)}
.nutzen .ico .ico-svg{width:26px; height:26px}
.nutzen h3{font-size:clamp(1.13rem,1.04rem + .36vw,1.26rem); line-height:1.3; letter-spacing:-.012em}
.nutzen p{margin:0; color:var(--ink-2)}

/* Team: sieben gleichwertige Karten */
.team-sieben{display:flex; flex-wrap:wrap; justify-content:center; gap:1.1rem}
.team-sieben .person{flex:0 1 calc((100% - 3.3rem) / 4); align-items:center; text-align:center; gap:.6rem; padding:1.8rem 1.4rem}
.team-sieben .person .portrait{width:112px; height:112px; border-radius:50%; margin-bottom:.4rem}
.team-sieben .person h3{font-size:1.06rem}

/* Vorher-Nachher-Schieber: Vorher ein Drittel, folgt dem Zeiger */
.vn{position:relative; overflow:hidden; cursor:ew-resize; touch-action:pan-y; user-select:none; -webkit-user-select:none; background:#E3EDED}
.vn img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none}
.vn-vorher{position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); transition:clip-path .45s var(--ease)}
.vn.zieht .vn-vorher, .vn.zieht .vn-griff, .vn.zieht::after{transition:none}
.vn:hover .vn-vorher, .vn:hover .vn-griff, .vn:hover::after{transition-duration:.18s}
.vn-platz{position:absolute; inset:0; display:grid; place-items:center; font-size:.86rem; font-weight:600}
.vn-platz-nachher{background:linear-gradient(135deg,#E4EFEF,#CFE1E1); color:var(--petrol); padding-left:33%}
.vn-platz-vorher{background:linear-gradient(135deg,#E9EBEB,#D5DADA); color:#5F7273; padding-right:67%}
.vn::after{content:""; position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:rgba(255,255,255,.95); box-shadow:0 0 12px rgba(27,42,43,.25); transition:left .45s var(--ease); pointer-events:none}
.vn-griff{position:absolute; top:50%; left:var(--pos); width:42px; height:42px; margin:-21px 0 0 -21px; border-radius:50%; display:grid; place-items:center; color:var(--petrol); z-index:2; pointer-events:none; background:#fff; box-shadow:0 2px 4px rgba(27,42,43,.15), 0 8px 18px -8px rgba(27,42,43,.45); transition:left .45s var(--ease), transform .25s var(--ease)}
.vn:hover .vn-griff{transform:scale(1.08)}
.vn-label{position:absolute; bottom:.8rem; z-index:2; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.32rem .6rem; border-radius:999px; color:#fff; background:rgba(27,42,43,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); pointer-events:none}
.vn-label-vorher{left:.8rem}
.vn-label-nachher{right:.8rem}
.vn-regler{position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:ew-resize; z-index:3}
.vn:has(.vn-regler:focus-visible){outline:2px solid var(--petrol); outline-offset:-2px}

/* Fußzeile: Sprechzeiten hervorgehoben */
.sprechzeiten{margin-top:1.4rem; padding:1.1rem 1.2rem; border-radius:var(--r-m); background:rgba(255,255,255,.07); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.08)}
.sprechzeiten h3{margin-bottom:.8rem}
.sprechzeiten dl{margin:0; display:flex; flex-direction:column; gap:.45rem}
.sprechzeiten .tag{display:grid; grid-template-columns:5.6rem 1fr; gap:.6rem; align-items:baseline; font-size:.95rem; color:#fff}
.sprechzeiten dt{font-weight:600}
.sprechzeiten dd{margin:0; display:flex; flex-direction:column; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.85)}
.sprechzeiten dd span{white-space:nowrap}
.sprechzeiten .tag.heute dt::after{content:"heute"; display:inline-block; margin-left:.45rem; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.12rem .45rem; border-radius:999px; background:#5E8F92; color:#fff; vertical-align:.12em}

@media (max-width:1100px){
  .team-sieben .person{flex-basis:calc((100% - 2.2rem) / 3)}
}
@media (max-width:860px){
  .tueren, .nutzen-grid{grid-template-columns:1fr}
  .team-sieben .person{flex-basis:calc((100% - 1.1rem) / 2)}
}
@media (max-width:600px){
  p, li, dd, .lead{-webkit-hyphens:auto; hyphens:auto}
}
@media (max-width:560px){
  .team-sieben{display:grid; grid-template-columns:1fr}
  .team-sieben .person{display:grid; grid-template-columns:80px 1fr; text-align:left; align-items:center; column-gap:1.1rem; padding:1.3rem}
  .team-sieben .person .portrait{grid-row:1 / span 2; width:80px; height:80px; margin:0}
  .team-sieben .person h3{align-self:end}
  .team-sieben .person p{align-self:start}
  .tuer, .nutzen{padding:1.5rem}
}
@media (prefers-reduced-motion:reduce){.vn-vorher, .vn::after, .vn-griff{transition:none}}
/* Angenehme Zeilenlängen (Plan-Sektion bewusst unverändert) */
.leistung.getoent p{max-width:38em; margin-inline:auto; text-align:center}
.tuer p, .nutzen p, .leistung p, .guide-text p, .angst-text p, .antwort p, .termin-karte .lead, .schluss-text p{max-width:37em}

/* ===== Runde 02.10.: Schieber, Telefonzeile, Rundgang-Titel, Sprechzeiten ===== */
/* Vorher-Nachher: Bildformat 3:2, damit der Befund sichtbar ist; folgt dem Zeiger ohne Nachziehen */
.leistung.mit-bild .leistung-bild.vn{height:auto; aspect-ratio:3 / 2}
.vn-vorher{will-change:clip-path; transition:clip-path .55s var(--ease)}
.vn::after{transition:left .55s var(--ease)}
.vn-griff{transition:left .55s var(--ease), transform .25s var(--ease)}
.vn.folgt .vn-vorher, .vn.folgt::after, .vn.folgt .vn-griff{transition:none}
.vn-regler{touch-action:pan-y}
.vn img{object-position:50% 50%}

/* Telefonzeile im Hero: sichtbar als ruhige Glaspille */
.hero-tel{display:inline-flex; align-items:center; gap:.7rem; margin-top:1.15rem; padding:.42rem 1.1rem .42rem .42rem; border-radius:999px; font-size:.98rem; line-height:1.35; color:var(--ink-2);
  background:rgba(255,255,255,.74); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 8px 18px -12px rgba(25,40,35,.35)}
.hero-tel a{font-weight:600; color:var(--petrol); border-bottom:0; white-space:nowrap}
.hero-tel a:hover{text-decoration:underline; text-underline-offset:3px}
.tel-ico{flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--petrol); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 10px -4px rgba(25,40,35,.45)}
.tel-ico img{width:17px; height:17px; filter:invert(1)}
@media (max-width:560px){ .hero-tel{font-size:.92rem; text-align:left; padding-right:.9rem} }

/* Rundgang: Titel über dem Einleitungstext */
.rundgang-untertitel{margin:0 0 .55rem; font-family:var(--head); font-size:clamp(1.18rem, 1.02rem + .6vw, 1.5rem); font-weight:500; line-height:1.25; letter-spacing:-.014em; color:var(--ink)}
.rundgang-text .lead{margin-top:0}

/* Sprechzeiten: ruhige Tabelle, heute hervorgehoben */
.sprechzeiten{padding:1.15rem 1.15rem .9rem}
.sprechzeiten h3{display:flex; align-items:center; gap:.55rem; margin-bottom:.7rem}
.sprechzeiten h3::before{content:""; width:16px; height:16px; flex:none; background:currentColor; opacity:.85;
  -webkit-mask:url("../assets/icons/clock.svg") center / contain no-repeat; mask:url("../assets/icons/clock.svg") center / contain no-repeat}
.sprechzeiten dl{gap:0}
.sprechzeiten .tag{grid-template-columns:1fr auto; gap:1rem; padding:.55rem .65rem; margin:0 -.65rem; border-radius:12px; font-size:.94rem}
.sprechzeiten .tag + .tag{border-top:1px solid rgba(255,255,255,.09)}
.sprechzeiten dd{text-align:right; align-items:flex-end; gap:.1rem}
.sprechzeiten dt{display:flex; align-items:center; gap:.5rem; font-weight:500; color:rgba(255,255,255,.88)}
.sprechzeiten .tag.heute{background:rgba(255,255,255,.1); border-top-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.sprechzeiten .tag.heute + .tag{border-top-color:transparent}
.sprechzeiten .tag.heute dt{color:#fff; font-weight:600}
.sprechzeiten .tag.heute dd{color:#fff}

.sprechzeiten .tag.heute dt::before{content:none}
.sprechzeiten .tag.heute dt::after{content:""; display:block; margin:0; padding:0; width:7px; height:7px; border-radius:50%; background:#8FC1C4; box-shadow:0 0 0 3px rgba(255,255,255,.12), 0 0 10px #8FC1C4}

.rundgang-text{align-self:end}
.rundgang-leiste{justify-content:flex-end}
@media (max-width:860px){ .rundgang-leiste{justify-content:center} }
/* Kontrolldurchgang 02.10.: Lesbarkeit (Layout unverändert) */
.marke-sub{font-size:max(.66rem, 10.5px); letter-spacing:.1em; white-space:nowrap}
.marke-name{white-space:nowrap}
.plan-kopf .lead{max-width:40em}
.kosten p{max-width:40em}
.rundgang-text{max-width:36em}
@media (max-width:380px){ .marke-sub{display:none} .kopf-pill{gap:.6rem; padding-left:1rem} }
.leistung h3{line-height:1.3}
.leistung.getoent p{font-size:inherit}

/* Schieber 2 (02.10.): Höhe wie vor den Fotos, Linie und Griff per JS im selben Frame, Fotos zuerst verschwommen */
.leistung.mit-bild .leistung-bild.vn{height:190px; aspect-ratio:auto}
.vn img[src*="zahnfleisch"]{object-position:50% 30%}
.vn-vorher, .vn-griff, .vn-linie{transition:none}
.vn-vorher{clip-path:inset(0 67% 0 0)}
.vn::after{content:none}
.vn-linie{position:absolute; top:0; bottom:0; left:0; width:2px; margin-left:-1px; z-index:1; pointer-events:none; background:rgba(255,255,255,.95); box-shadow:0 0 12px rgba(27,42,43,.25); translate:33% 0; will-change:translate}
.vn-griff{left:0; will-change:translate; transition:transform .25s var(--ease), opacity .4s var(--ease)}
.vn img{transition:filter .6s var(--ease), transform .6s var(--ease)}
.vn-linie, .vn-label{transition:opacity .4s var(--ease)}
.vn.verdeckt{cursor:default}
.vn.verdeckt img{filter:blur(16px) saturate(.75); transform:scale(1.12)}
.vn.verdeckt .vn-griff, .vn.verdeckt .vn-linie, .vn.verdeckt .vn-label{opacity:0}
.vn.verdeckt .vn-regler{pointer-events:none}
.vn-hinweis{position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; padding:1rem 1.5rem; text-align:center; color:#fff; background:rgba(18,28,28,.3); transition:opacity .5s var(--ease)}
.vn:not(.verdeckt) .vn-hinweis{opacity:0; pointer-events:none}
.vn-hinweis-ico{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.vn-hinweis p{margin:0; max-width:24em; font-size:.92rem; font-weight:500; line-height:1.45; text-shadow:0 1px 10px rgba(0,0,0,.35)}
.vn-zeigen{font:inherit; font-size:.86rem; font-weight:600; padding:.5rem 1.1rem; border:0; border-radius:999px; background:#fff; color:var(--petrol); cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.12), 0 8px 20px -10px rgba(0,0,0,.45); transition:transform .25s var(--ease)}
.vn-zeigen:hover{transform:translateY(-1px)}
.vn-zeigen:focus-visible{outline:2px solid #fff; outline-offset:3px}
@media (prefers-reduced-motion:reduce){.vn img, .vn-hinweis{transition:none}}

/* Breiter 02.10.: Inhaltsbreite ein Stück großzügiger, Rundgang-Rand rechnet mit */
@media (min-width:1101px){
  :root{--wrap-max:1320px; --wrap-seite:1.5rem; --wrap:min(var(--wrap-max), 100% - 2 * var(--wrap-seite))}
  .rundgang-track{--rand:max(var(--wrap-seite), calc((100vw - var(--wrap-max)) / 2))}
}
@media (min-width:1700px){ :root{--wrap-max:1440px; --wrap-seite:4rem} }
@media (min-width:2200px){ :root{--wrap-max:1640px; --wrap-seite:5rem} }
@media (min-width:3000px){ :root{--wrap-max:1840px; --wrap-seite:6rem} }
/* Kopfzeile: nie umbrechen, Menü früher (wie V2) */
.nav a, .nav span{white-space:nowrap}
@media (max-width:1280px){
  .nav{display:none}
  .menue-knopf{display:grid}
}
/* Rundgang: Kopf steht mit den Bildern in der Bühne, keine Leerfläche mehr zwischen Text und Bildern */
.rundgang.scrub{margin-top:-5.5rem}
.rundgang.scrub .rundgang-buehne{height:100vh; height:100dvh; min-height:0; box-sizing:border-box; justify-content:center; padding-top:5.5rem; padding-bottom:1.25rem}
.rundgang.scrub .rundgang-buehne > .rundgang-kopf{margin-bottom:1.6rem}
.rundgang.scrub .station-bild img{height:clamp(220px, calc(100dvh - var(--kopf, 200px) - 14rem), 560px)}
@media (max-height:760px){ .rundgang.scrub .rundgang-text .lead{display:none} }
.vn-vorher{transition:opacity .5s var(--ease)}
.vn.verdeckt .vn-vorher{opacity:0}
.leistung.mit-bild .leistung-bild.vn{height:auto; aspect-ratio:12 / 5; min-height:190px}
.vn img[src*="zahnfleisch"]{object-position:50% 40%}
.leistung .vn-hinweis p{color:#fff; font-size:.92rem}
@media (max-width:860px){ .rundgang:not(.scrub) .rundgang-leiste{display:none} }


/* ===== Nachzug 19.10.: Bausteine aus Option 2 in Petrol (Variablen-Aliase, Ablauf 01-03, Kostenband, Unterseiten) ===== */
:root{--beere:var(--petrol); --beere-hover:var(--petrol-hover); --beere-hell:var(--petrol-hell); --kopf-tinte:var(--ink); --tiefe-2:var(--schatten); --tiefe-1:var(--schatten-klein); --salbei-tief:#1D3B3D; --ocker:var(--petrol-hell); --t-body:1.02rem; --t-h3:1.35rem; --t-karte:.97rem; --t-meta:.93rem}
/* Drei Schritte: 01 › 02 › 03 */
.ablauf-neu{--luecke:clamp(2.6rem,6vw,5.2rem); list-style:none; margin:0 0 clamp(4.2rem,8vw,6.4rem); padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--luecke); text-align:center}
.ablauf-schritt{position:relative; display:flex; flex-direction:column; align-items:center; gap:.65rem}
.ablauf-nr{font-family:var(--head); font-weight:300; font-size:clamp(3.4rem, 2.5rem + 3vw, 5.2rem); line-height:.95; letter-spacing:-.045em; margin-bottom:.35rem;
  background:linear-gradient(180deg, rgba(47,95,98,.62) 0%, rgba(47,95,98,.16) 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.ablauf-schritt h3{margin:0; font-size:var(--t-h3); line-height:1.28; font-weight:500; letter-spacing:-.012em}
.ablauf-schritt p{margin:0; max-width:23em; font-size:var(--t-karte); line-height:1.62; color:var(--ink-2)}
.ablauf-schritt:not(:last-child)::after{content:""; position:absolute; top:calc(clamp(3.4rem, 2.5rem + 3vw, 5.2rem) * .42); right:calc(var(--luecke) / -2 - 6px); width:11px; height:11px; border-top:1.6px solid rgba(47,95,98,.5); border-right:1.6px solid rgba(47,95,98,.5); transform:rotate(45deg)}

/* Kostenversprechen als Band in tiefem Salbei */
.plan .kosten.kosten-band{max-width:none; margin:0; display:grid; grid-template-columns:auto 1fr; gap:clamp(1.4rem,3vw,2.6rem); align-items:center; padding:clamp(2.2rem,4.6vw,3.8rem) clamp(1.8rem,4.6vw,4rem); border-radius:var(--r-xl); color:#fff; position:relative; overflow:hidden;
  background:radial-gradient(55% 90% at 0% 100%, rgba(94,143,146,.28) 0%, transparent 70%), radial-gradient(45% 80% at 85% 0%, rgba(201,220,220,.32) 0%, transparent 70%), radial-gradient(35% 70% at 55% 60%, rgba(94,143,146,.12) 0%, transparent 70%), var(--salbei-tief);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22), inset 0 16px 28px -22px rgba(255,255,255,.3), 0 30px 60px -32px rgba(20,40,30,.6)}
.plan .kosten.kosten-band .ico{width:76px; height:76px; border-radius:24px; display:grid; place-items:center; background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12), 0 12px 24px -14px rgba(0,0,0,.5)}
.plan .kosten.kosten-band .ico .ico-svg{width:36px; height:36px; color:#fff}
.kosten-band .h3{color:#fff; margin-bottom:.75rem}
.kosten-band p{color:rgba(255,255,255,.86); max-width:38em}
.kosten-band .cta-zeile{margin-top:1.6rem !important}
.kosten-band .btn-primaer{background:#fff; color:var(--beere); box-shadow:0 1px 2px rgba(0,0,0,.15), 0 14px 30px -14px rgba(0,0,0,.5)}
.kosten-band .btn-primaer:hover{background:#F3F4F1}
.kosten-band .btn-primaer .pfeil{background:rgba(47,95,98,.1)}
.kosten-band .btn-primaer .pfeil img{filter:invert(28%) sepia(30%) saturate(1200%) hue-rotate(140deg)}


@media (max-width:860px){
  .ablauf-neu{grid-template-columns:1fr; --luecke:3.4rem}
  .ablauf-schritt:not(:last-child)::after{top:auto; right:auto; bottom:calc(var(--luecke) / -2 - 4px); left:50%; margin-left:-6px; transform:rotate(135deg)}
  .plan .kosten.kosten-band{grid-template-columns:1fr; text-align:left}
}
/* Kostenband: Text links, Knopf rechts */
@media (min-width:1000px){
  .kosten-band > div{display:grid; grid-template-columns:1fr auto; column-gap:clamp(2rem,5vw,4rem); align-items:end}
  .kosten-band > div > .h3{grid-column:1 / -1}
  .kosten-band > div > .cta-zeile{margin-top:0 !important; justify-self:end}
  .plan .kosten.kosten-band{align-items:start}
}

/* ===================================================================
   Unterseiten 19.10.: Ratgeber, Rechtstexte, Jobs (bestehende Bausteine, wenige neue)
   =================================================================== */
.brotkrumen{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0 0 1.1rem .4rem; font-size:.84rem; color:var(--ink-3)}
.brotkrumen a{color:var(--ink-2); border-bottom:1px solid rgba(30,34,32,.18)}
.brotkrumen a:hover{color:var(--beere); border-bottom-color:currentColor}
.sub-hero .hero-karte{min-height:0}
.sub-hero .hero-text h1{font-size:clamp(1.9rem, 1.3rem + 2.1vw, 3rem); line-height:1.12; max-width:18em}
.sub-hero .hero-bild img{object-position:50% 40%}
.sub-hero .hero-bild{min-height:380px}
.kurz{margin:1.5rem 0 1.6rem; padding:1.35rem 1.5rem 1.4rem; border-radius:var(--r-l); max-width:36em}
.kurz-etikett{display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--beere); margin-bottom:.6rem}
.kurz-etikett::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--beere)}
.kurz p{margin:0; font-size:1.06rem; line-height:1.62; color:var(--ink)}
.text-block{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,5rem); align-items:start}
.text-block .kopfzeile-sek{position:sticky; top:7rem}
.text-block-text p{max-width:36em}
.zwei-spalten{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.zwei-spalten .termin-karte{padding:clamp(1.2rem,2.6vw,2rem) clamp(1.4rem,3vw,2.4rem)}
.nutzen-grid.vier{grid-template-columns:repeat(4,1fr)}
.ablauf-neu.vier{grid-template-columns:repeat(4,1fr); --luecke:clamp(2rem,4vw,3.6rem)}
.ablauf-neu.vier .ablauf-schritt p{max-width:21em}
.vn-buehne{max-width:980px; margin-inline:auto; padding:clamp(.8rem,1.6vw,1.2rem); border-radius:var(--r-xl)}
.vn-rahmen{position:relative; overflow:hidden; border-radius:calc(var(--r-xl) - 8px); aspect-ratio:3 / 2; min-height:220px; background:var(--bg-tief)}
.vn-rahmen img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.vn-rahmen .vn-vorher{position:absolute; inset:0}
.vn-rahmen .vn-vorher img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.vn-rahmen .vn-platz{position:absolute; inset:0; display:grid; place-items:center; font-size:.9rem; color:var(--ink-3)}
.vn-rahmen .vn-label{position:absolute; top:.9rem; z-index:2; padding:.3rem .7rem; border-radius:999px; background:rgba(255,255,255,.85); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink)}
.vn-rahmen .vn-label-vorher{left:.9rem}
.vn-rahmen .vn-label-nachher{right:.9rem}
.vn-rahmen .vn-griff{position:absolute; top:50%; left:0; z-index:3; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--ink); box-shadow:0 2px 6px rgba(0,0,0,.2), 0 12px 24px -10px rgba(0,0,0,.45)}
.vn-rahmen .vn-regler{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4}
.vn-unterschrift{margin:.9rem .4rem 0; font-size:.86rem; color:var(--ink-3); text-align:center}
.rk-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem}
.rk{display:flex; flex-direction:column; gap:.75rem; padding:1.7rem; border-radius:var(--r-l); color:inherit; transition:transform .45s var(--ease), box-shadow .45s var(--ease)}
.rk:hover{transform:translateY(-3px)}
.rk-gruppe{display:inline-flex; align-items:center; gap:.55rem; font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3)}
.rk-gruppe .ico{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--salbei)}
.rk-gruppe .ico .ico-svg{width:17px; height:17px; color:var(--petrol)}
.rk h3{font-size:1.22rem; line-height:1.3}
.rk p{margin:0; font-size:.96rem; color:var(--ink-2); flex:1 1 auto}
.rk-link{display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--beere); margin-top:.3rem}
.rk-link img{transition:transform .3s var(--ease)}
.rk:hover .rk-link img{transform:translateX(3px)}
.text-link{color:var(--beere); font-weight:600; border-bottom:1px solid rgba(47,95,98,.3)}
.ratgeber-hinweis{max-width:52em; margin:0 auto; padding:1rem 1.2rem; border-radius:var(--r-m); background:rgba(255,255,255,.55); font-size:.9rem; color:var(--ink-3); text-align:center}
/* Rechtstexte */
.rechts-kopf{max-width:46em; padding:clamp(1rem,2vw,1.6rem) .4rem 0}
.rechts-kopf h1{font-size:clamp(2.1rem, 1.4rem + 2.4vw, 3.3rem); line-height:1.1; margin-bottom:1rem}
.rechts-kopf .lead{max-width:34em}
.kurz-fakten{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1.2rem 2rem; margin:2rem .4rem 0; padding:clamp(1.3rem,2.6vw,2rem); border-radius:var(--r-xl)}
.kurz-fakten dt{font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.3rem}
.kurz-fakten dd{margin:0; color:var(--ink); font-weight:500; line-height:1.5}
.rechts-grid{display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(2rem,5vw,5rem); align-items:start}
.rechts-inhalt{position:sticky; top:7rem; padding:1.4rem 1.5rem; border-radius:var(--r-l)}
.rechts-inhalt h2{margin-bottom:.8rem}
.rechts-inhalt ol{margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.45rem; font-size:.94rem}
.rechts-inhalt a{color:var(--ink-2)}
.rechts-inhalt a:hover{color:var(--beere)}
.rechtstext{max-width:40em}
.rechts-abschnitt + .rechts-abschnitt{margin-top:clamp(2rem,4vw,3rem); padding-top:clamp(1.6rem,3vw,2.4rem); border-top:1px solid rgba(30,34,32,.12)}
.rechts-abschnitt h2{font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem); line-height:1.25; margin-bottom:.9rem; scroll-margin-top:7rem}
.rechts-abschnitt p{color:var(--ink-2)}
/* Jobs */
.vertrauen.fuenf{grid-template-columns:repeat(5,1fr)}
.stimme-auftakt{margin:0 auto clamp(2rem,4vw,3rem); max-width:30em; text-align:center}
.stimme-auftakt p{margin:0 0 .8rem; font-family:var(--head); font-weight:500; font-size:clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); line-height:1.15; letter-spacing:-.015em; color:var(--kopf-tinte, var(--ink))}
.stimme-auftakt cite{font-style:normal; font-size:.92rem; font-weight:600; color:var(--beere)}
.stimmen-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; align-items:start}
.zitat.stimme{margin:0}
.zitat.stimme p{font-size:1.06rem; line-height:1.6; margin-bottom:.9rem}
.zitat.stimme p:last-of-type{margin-bottom:.9rem}
.angst-bild .foto.quer{aspect-ratio:4 / 3}
.stellen-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; align-items:stretch}
.stelle{display:flex; flex-direction:column; gap:.9rem; padding:1.8rem; border-radius:var(--r-l)}
.stelle h3{font-size:1.22rem; line-height:1.3}
.stelle p{margin:0; font-size:.97rem}
.stelle .liste{margin-top:.2rem}
.stelle .liste li{padding:.6rem 0; font-size:.94rem}
.stelle .btn{margin-top:auto; align-self:flex-start; white-space:normal; text-align:left}
.bewerbung-form{max-width:760px; margin:clamp(1rem,2vw,1.6rem) auto 0; padding:clamp(1.6rem,3.4vw,2.6rem); border-radius:var(--r-xl); display:flex; flex-direction:column; gap:1.15rem}
.feld{display:flex; flex-direction:column; gap:.45rem}
.feld-reihe{display:grid; grid-template-columns:1fr 1fr; gap:1.15rem}
.feld label{font-weight:600; font-size:.95rem; color:var(--ink)}
.feld .freiwillig{font-weight:500; font-size:.82rem; color:var(--ink-3); margin-left:.3rem}
.feld input[type="text"], .feld input[type="tel"], .feld input[type="email"], .feld select, .feld textarea{font:inherit; font-size:1rem; color:var(--ink); padding:.8rem 1rem; border-radius:14px; border:1px solid rgba(30,34,32,.16); background:rgba(255,255,255,.85); transition:border-color .25s, box-shadow .25s}
.feld textarea{resize:vertical; min-height:9rem}
.feld input:focus, .feld select:focus, .feld textarea:focus{outline:0; border-color:var(--beere); box-shadow:0 0 0 3px rgba(47,95,98,.14)}
.feld input[aria-invalid="true"], .feld select[aria-invalid="true"], .feld textarea[aria-invalid="true"]{border-color:#B3261E; box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.feld .datei{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.75rem 1rem; border-radius:14px; border:1px dashed rgba(30,34,32,.28); background:rgba(255,255,255,.6); cursor:pointer; font-weight:500}
.feld .datei input{font-size:.9rem; max-width:100%}
.feld .datei.pflicht span::after{content:""}
.feld-hinweis{margin:0; font-size:.88rem; color:#B3261E}
.feld.einwilligung label{display:flex; gap:.75rem; align-items:flex-start; font-weight:500; font-size:.92rem; color:var(--ink-2); cursor:pointer}
.feld.einwilligung input{margin-top:.25rem; width:18px; height:18px; accent-color:var(--beere); flex:none}
.feld.einwilligung a{color:var(--beere); border-bottom:1px solid rgba(47,95,98,.3)}
.bewerbung-form .cta-zeile{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem}
.bewerbung-form .cta-zeile .erklaer{margin:0}
.bewerbung-form .erklaer a{color:var(--beere); font-weight:600}
.bewerbung-form button.btn{font:inherit; font-weight:600}
.bewerbung-danke{max-width:760px; margin:1.6rem auto 0; padding:clamp(1.6rem,3vw,2.4rem); border-radius:var(--r-xl); display:flex; gap:1.2rem; align-items:center}
.bewerbung-danke .ico{flex:none; width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:var(--salbei)}
.bewerbung-danke .ico .ico-svg{width:28px; height:28px; color:var(--beere)}
.bewerbung-danke p{margin:0; font-family:var(--head); font-size:1.25rem; line-height:1.4; color:var(--ink)}
.jobs-hero .hero-bild img{object-position:50% 20%}
@media (max-width:1100px){
  .rk-grid, .stellen-grid{grid-template-columns:1fr 1fr}
  .nutzen-grid.vier{grid-template-columns:1fr 1fr}
  .ablauf-neu.vier{grid-template-columns:1fr 1fr; row-gap:2.6rem}
  .ablauf-neu.vier .ablauf-schritt:nth-child(2)::after{display:none}
  .vertrauen.fuenf{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .text-block, .zwei-spalten, .rechts-grid, .stimmen-grid{grid-template-columns:1fr}
  .text-block .kopfzeile-sek, .rechts-inhalt{position:static}
  .rk-grid, .stellen-grid, .nutzen-grid.vier, .ablauf-neu.vier{grid-template-columns:1fr}
  .ablauf-neu.vier .ablauf-schritt:nth-child(2)::after{display:block}
  .vertrauen.fuenf{grid-template-columns:1fr 1fr}
  .feld-reihe{grid-template-columns:1fr}
  .sub-hero .hero-bild{min-height:260px}
  .kurz-fakten{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .vertrauen.fuenf, .kurz-fakten{grid-template-columns:1fr}
  .bewerbung-danke{flex-direction:column; align-items:flex-start}
}
a.tuer-link{cursor:pointer}
a.tuer-link img{transition:transform .3s var(--ease)}
a.tuer-link:hover img{transform:translateX(3px)}
/* Korrekturen nach erster Prüfung 19.10. */
.bewerbung-danke[hidden], .bewerbung-form[hidden], .feld-hinweis[hidden]{display:none}
.kosten-text p + p{margin-top:.8rem}
.kurz-fakten{margin-bottom:clamp(2.6rem,5vw,4rem)}
.rechts-grid.ohne-inhalt{grid-template-columns:1fr}
.rechts-grid.ohne-inhalt .rechtstext{max-width:46em}
@media (min-width:1000px){ .kosten-band > div > .kosten-text{grid-column:1} }
/* Richtlinien-Durchgang 19.10. */
h1, h2, .h2{text-wrap:balance}
p, li, dd{text-wrap:pretty}
a, button, .btn, .frage summary{touch-action:manipulation}
.btn, .rk, .frage summary, .stelle-knopf, .tuer-link{-webkit-tap-highlight-color:transparent}
.menue{overscroll-behavior:contain}
#stellen, #bewerbung, .rechts-abschnitt, [id^="stelle-"]{scroll-margin-top:6rem}
.text-link:hover{text-decoration:underline; text-underline-offset:3px}

/* Häufige Fragen 19.10.: Kopf läuft beim Scrollen mit, Antworten gleiten */
@media (min-width:861px){ .faq-grid .kopfzeile-sek{position:sticky; top:7rem} }
.frage .antwort{box-sizing:content-box}

/* Schnellnavigation 19.10.: Sprungmarken mit Abstand zur Kopfzeile, sanftes Scrollen */
#leistungen, #team, #erster-termin, #kontakt{scroll-margin-top:5.5rem}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
.nav{gap:.15rem}
.nav a, .nav span{padding:.55rem .8rem}

/* Kopfzeile: sechs Einträge plus Knopf brauchen Platz, Menü bis 1400px */
@media (max-width:1400px){ .nav{display:none} .menue-knopf{display:grid} }

/* Bewertung im Hero 19.10.: Sterne und Google-Wert als Pille (Zahlen von Hand pflegen, Stand 19.10.2026: 4,6 bei 10 Rezensionen) */
.hero-bewertung{display:inline-flex; align-items:center; gap:.7rem; margin:.1rem 0 1.5rem; padding:.5rem .9rem .5rem .85rem; border-radius:999px; background:rgba(255,255,255,.76); color:var(--ink-2); font-size:.95rem; line-height:1.3; box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 8px 18px -12px rgba(25,40,35,.35); transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.hero-bewertung:hover{transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.95), 0 12px 24px -12px rgba(25,40,35,.4)}
.hero-bewertung strong{color:var(--ink); font-weight:700}
.hero-bewertung img{width:14px; height:14px; opacity:.6}
.sterne{position:relative; display:inline-block; font-size:1.15rem; line-height:1; letter-spacing:.06em; white-space:nowrap}
.sterne-leer{color:#DDD6C8}
.sterne-voll{position:absolute; left:0; top:0; overflow:hidden; width:var(--wert, 100%); color:#D9A33A}
@media (max-width:560px){ .hero-bewertung{font-size:.9rem; gap:.55rem} .sterne{font-size:1.05rem} }

/* Stimmen von Google 19.10.: drei Rezensionen im Wortlaut, Sterne wie im Hero */
.stimmen-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; align-items:stretch}
.stimme-karte{margin:0; padding:1.8rem; border-radius:var(--r-l); display:flex; flex-direction:column; gap:1rem}
.stimme-karte blockquote{margin:0; flex:1 1 auto; display:flex; flex-direction:column; gap:.9rem}
.stimme-karte blockquote .sterne{font-size:1.05rem}
.stimme-karte p{margin:0; font-size:.98rem; line-height:1.62; color:var(--ink)}
.stimme-karte figcaption{display:flex; flex-direction:column; gap:.15rem; padding-top:.9rem; border-top:1px solid rgba(30,34,32,.1); font-size:.9rem; color:var(--ink-3)}
.stimme-karte figcaption strong{color:var(--ink-2); font-weight:600}
.stimmen-alle{margin:1.6rem 0 0; text-align:center}
.stimmen-alle a{display:inline-flex; align-items:center; gap:.7rem; padding:.55rem 1rem .55rem .9rem; border-radius:999px; background:rgba(255,255,255,.76); color:var(--ink-2); font-size:.95rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 8px 18px -12px rgba(25,40,35,.35)}
.stimmen-alle a:hover{transform:translateY(-1px)}
.stimmen-alle strong{color:var(--ink)}
.stimmen-alle img{width:14px; height:14px; opacity:.6}
@media (max-width:1100px){ .stimmen-3{grid-template-columns:1fr 1fr} .stimme-karte:last-child{grid-column:1 / -1} }
@media (max-width:700px){ .stimmen-3{grid-template-columns:1fr} }

.erstellt{color:rgba(255,255,255,.62)}
.erstellt .follow{border-bottom:1px solid rgba(255,255,255,.3)}

/* ===== Rundgang als dunkles Petrol-Band (20.10., nach Vorbild Option 2) ===== */
.rundgang-dunkel{padding-bottom:clamp(4.5rem,9vw,8rem)}
.rundgang-dunkel .rundgang-buehne{margin-inline:clamp(.5rem,1.4vw,1.4rem); border-radius:var(--r-xl); color:#fff; padding:clamp(3.2rem,7vw,5rem) 0 clamp(2.6rem,5vw,3.6rem);
  background:radial-gradient(50% 60% at 0% 0%, rgba(94,143,146,.38) 0%, transparent 70%), radial-gradient(45% 55% at 100% 100%, rgba(201,220,220,.16) 0%, transparent 70%), radial-gradient(35% 45% at 70% 10%, rgba(255,255,255,.06) 0%, transparent 70%), var(--salbei-tief);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 30px 70px -40px rgba(10,30,32,.7)}
.rundgang-dunkel .rundgang-kopf .h2, .rundgang-dunkel .rundgang-untertitel{color:#fff}
.rundgang-dunkel .chip{color:#DCEAEA; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.16)}
.rundgang-dunkel .chip::before{background:#9CC3C5}
.rundgang-dunkel .rundgang-kopf .lead{color:rgba(255,255,255,.8)}
.rundgang-dunkel .rundgang-fortschritt{background:rgba(255,255,255,.18)}
.rundgang-dunkel .rundgang-fortschritt i{background:#fff}
.rundgang-dunkel .station figcaption{color:rgba(255,255,255,.9)}
.rundgang-dunkel .station-bild{box-shadow:0 1px 2px rgba(0,0,0,.2), 0 24px 46px -26px rgba(0,0,0,.7)}
.rundgang-dunkel.scrub .rundgang-buehne{margin-inline:0; border-radius:0}
@media (max-width:860px){ .rundgang-dunkel .rundgang-buehne{margin-inline:.6rem} }
/* Kopfzeile über dunklen Flächen: milchiger, damit die Navigation lesbar bleibt */
.kopf.ueber-dunkel .kopf-pill.glas{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.8) 100%)}
.kopf .kopf-pill.glas{transition:background .35s var(--ease), box-shadow .35s var(--ease)}

/* ===== Türen 20.10.: Kartenstapel + Aura aus Option 3, Farben über Variablen ===== */
:root{--sk-rgb:47,95,98; --sk-dunkel-rgb:27,58,60; --aura-2-rgb:126,184,188; --sk-flaeche-1:#FDFEFE; --sk-flaeche-2:#F6FAFA; --sk-tint-1:#EEF5F5; --sk-tint-2:#E2EDED}
/* Aura: ganz leichtes, langsames Farbatmen hinter eintönigen Sektionen */
.aura{position:relative; isolation:isolate}
.aura-feld{position:absolute; inset:-4% 0; z-index:-1; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.aura-feld i{position:absolute; width:min(56vmax,980px); aspect-ratio:1; border-radius:50%; will-change:transform;
  animation:aura-a 26s ease-in-out infinite alternate; animation-play-state:paused}
.aura.an .aura-feld i{animation-play-state:running}
.aura-feld i:nth-child(1){left:-8%; top:0; background:radial-gradient(closest-side, rgba(var(--sk-rgb),.19), rgba(var(--sk-rgb),.14) 35%, rgba(var(--sk-rgb),.05) 70%, rgba(var(--sk-rgb),0))}
.aura-feld i:nth-child(2){right:-8%; top:16%; background:radial-gradient(closest-side, rgba(var(--aura-2-rgb),.5), rgba(var(--aura-2-rgb),.36) 35%, rgba(var(--aura-2-rgb),.12) 70%, rgba(var(--aura-2-rgb),0)); animation-name:aura-b; animation-duration:32s}
.aura-feld i:nth-child(3){left:30%; bottom:-6%; background:radial-gradient(closest-side, rgba(232,200,172,.48), rgba(232,200,172,.34) 35%, rgba(232,200,172,.1) 70%, rgba(232,200,172,0)); animation-name:aura-c; animation-duration:29s}
@keyframes aura-a{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(9vw,7vh,0) scale(1.14)}}
@keyframes aura-b{from{transform:translate3d(0,0,0) scale(1.08)} to{transform:translate3d(-10vw,-6vh,0) scale(.94)}}
@keyframes aura-c{from{transform:translate3d(0,0,0) scale(.96)} to{transform:translate3d(-6vw,-9vh,0) scale(1.12)}}
/* Glaskarten über der Aura: kein Backdrop-Blur (die Aura ist schon weich), sonst rechnet der Browser jedes Bild neu */
.aura .glas{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(255,255,255,.64)}
@media (prefers-reduced-motion:reduce){ .aura-feld i{animation:none} }


/* Kartenstapel «Wofür Patienten zu uns kommen»: Karten bleiben oben kleben und schieben sich übereinander */
.stapel{position:relative; margin-top:clamp(2rem,3.6vw,3rem)}
.sk{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(1.6rem,3.6vw,3.4rem); align-items:center;
  padding:clamp(1.6rem,3vw,2.6rem); margin-bottom:1.6rem; border-radius:var(--r-xl);
  background:linear-gradient(180deg,var(--sk-flaeche-1),var(--sk-flaeche-2)); border:1px solid #fff;
  box-shadow:0 30px 60px -32px rgba(var(--sk-dunkel-rgb),.32), 0 2px 6px -2px rgba(var(--sk-rgb),.08), inset 0 1px 0 #fff;
  transform-origin:50% 0}
.sk:last-child{margin-bottom:0}
.sk-text{display:flex; flex-direction:column; gap:.85rem}
.sk-nr{font-size:.82rem; font-weight:700; letter-spacing:.04em; color:var(--petrol)}
.sk h3{margin:0; font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem); line-height:1.2; letter-spacing:-.02em; color:var(--ink)}
.sk p{margin:0; color:var(--ink-2); max-width:34em}
.sk .tuer-link{margin-top:.2rem}
.sk-bild{position:relative; height:clamp(220px,20vw,270px); border-radius:22px; overflow:hidden;
  background:radial-gradient(120% 90% at 30% 10%,#FFFFFF 0,var(--sk-tint-1) 55%,var(--sk-tint-2) 100%); border:1px solid rgba(var(--sk-rgb),.08)}
@media (min-width:900px) and (min-height:640px){
  .sk{position:sticky; top:calc(104px + var(--i) * 18px); will-change:transform}
}
@media (max-width:860px){
  .sk{grid-template-columns:1fr}
}

/* Symbole per Maske, damit sie die Farbe annehmen */
.mi{display:inline-block; width:1em; height:1em; flex:none; background:currentColor;
  -webkit-mask:var(--m) center / contain no-repeat; mask:var(--m) center / contain no-repeat}
.mi-zahn{--m:url("../assets/icons/tooth.svg")}
.mi-check{--m:url("../assets/icons/check.svg")}
.mi-blatt{--m:url("../assets/icons/leaf.svg")}

/* 01 Ursache: Ringe suchen um den Zahn, die Orte leuchten nacheinander auf */
.ill-ursache{position:absolute; inset:0}
.ill-ursache .ring{position:absolute; left:50%; top:50%; width:150px; height:150px; margin:-75px 0 0 -75px; border-radius:50%;
  border:1.5px solid rgba(var(--sk-rgb),.32); opacity:0; animation:sk-ring 4.2s ease-out infinite; animation-play-state:paused}
.ill-ursache .ring:nth-child(2){animation-delay:1.4s}
.ill-ursache .ring:nth-child(3){animation-delay:2.8s}
@keyframes sk-ring{0%{transform:scale(.45); opacity:.9} 100%{transform:scale(1.9); opacity:0}}
.kern{position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font-size:30px; background:linear-gradient(160deg,var(--petrol-hell),var(--petrol)); box-shadow:0 14px 26px -12px rgba(var(--sk-dunkel-rgb),.6), inset 0 1px 0 rgba(255,255,255,.25)}
.ort, .knoten{position:absolute; transform:translate(-50%,-50%); padding:.4rem .8rem; border-radius:999px; font-size:.82rem; font-weight:600; white-space:nowrap;
  color:var(--ink-2); background:#fff; box-shadow:0 6px 16px -10px rgba(var(--sk-dunkel-rgb),.45), inset 0 0 0 1px rgba(var(--sk-rgb),.08)}
.ort{animation:sk-ort 8s ease-in-out infinite; animation-play-state:paused}
.o1{left:22%; top:24%} .o2{left:78%; top:22%; animation-delay:2s} .o3{left:24%; top:78%; animation-delay:4s} .o4{left:77%; top:76%; animation-delay:6s}
@keyframes sk-ort{0%,30%,100%{color:var(--ink-2); background:#fff} 8%,20%{color:#fff; background:var(--petrol)}}

/* 02 Lächeln: drei Zeilen kommen nacheinander herein */
.ill-liste{position:absolute; inset:0; display:grid; align-content:center; gap:.7rem; padding:0 clamp(1.2rem,2.4vw,2rem)}
.ill-liste div{display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; border-radius:14px; background:#fff; font-size:.9rem; font-weight:500; color:var(--ink-2);
  box-shadow:0 8px 18px -12px rgba(var(--sk-dunkel-rgb),.4), inset 0 0 0 1px rgba(var(--sk-rgb),.07);
  opacity:0; transform:translateY(12px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.ill-liste .mi{width:22px; height:22px; padding:5px; border-radius:50%; color:#fff; background:var(--petrol); -webkit-mask:none; mask:none; position:relative}
.ill-liste .mi::after{content:""; position:absolute; inset:5px; background:#fff; -webkit-mask:url("../assets/icons/check.svg") center / contain no-repeat; mask:url("../assets/icons/check.svg") center / contain no-repeat}
.sk.an .ill-liste div{opacity:1; transform:none}
.sk.an .ill-liste div:nth-child(2){transition-delay:.18s}
.sk.an .ill-liste div:nth-child(3){transition-delay:.36s}

/* 03 Alles in einer Praxis: der Weg füllt sich, die Stationen leuchten auf */
.ill-weg{position:absolute; inset:0; display:grid; align-content:center; gap:1.6rem; padding:0 clamp(1.4rem,3vw,2.4rem)}
.weg-spur{position:relative; height:3px; margin:0 16.5%; border-radius:3px; background:rgba(var(--sk-rgb),.15)}
.weg-fuell{position:absolute; inset:0; border-radius:3px; background:linear-gradient(90deg,var(--petrol-hell),var(--petrol)); transform-origin:left; transform:scaleX(0); transition:transform 1.8s var(--ease) .2s}
.weg-halte{display:flex; justify-content:space-between; margin-top:calc(-1.6rem - 10.5px)}
.weg-halte span{display:flex; flex-direction:column; align-items:center; gap:.55rem; width:33%; font-size:.86rem; font-weight:600; color:var(--ink-2)}
.weg-halte b{width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 2px rgba(var(--sk-rgb),.25); transition:background .4s, box-shadow .4s}
.sk.an .weg-fuell{transform:scaleX(1)}
.sk.an .weg-halte b{background:var(--petrol); box-shadow:0 0 0 5px rgba(var(--sk-rgb),.12)}
.sk.an .weg-halte span:nth-child(1) b{transition-delay:.2s} .sk.an .weg-halte span:nth-child(2) b{transition-delay:1s} .sk.an .weg-halte span:nth-child(3) b{transition-delay:1.8s}
.weg-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem}
.weg-chips span{display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .85rem; border-radius:999px; background:#fff; font-size:.82rem; font-weight:600; color:var(--petrol);
  box-shadow:0 6px 16px -10px rgba(var(--sk-dunkel-rgb),.45), inset 0 0 0 1px rgba(var(--sk-rgb),.08)}

/* 04 Ganzheitlich: Linien verbinden die Mitte mit allem, was dazugehört */
.ill-netz{position:absolute; inset:0}
.ill-netz svg{position:absolute; inset:0; width:100%; height:100%}
.ill-netz path{fill:none; stroke:rgba(var(--sk-rgb),.35); stroke-width:1.5; stroke-dasharray:160; stroke-dashoffset:160; vector-effect:non-scaling-stroke; transition:stroke-dashoffset 1.6s var(--ease) .2s}
.sk.an .ill-netz path{stroke-dashoffset:0}
.ill-netz .kern{animation:sk-atmen 5s ease-in-out infinite; animation-play-state:paused}
@keyframes sk-atmen{50%{box-shadow:0 14px 26px -12px rgba(var(--sk-dunkel-rgb),.6), 0 0 0 12px rgba(var(--sk-rgb),.08)}}
.k1{left:18.5%; top:21.7%} .k2{left:81.5%; top:21.7%} .k3{left:18.5%; top:78.3%} .k4{left:81.5%; top:78.3%}
.sk.an .ring, .sk.an .ort, .sk.an .ill-netz .kern{animation-play-state:running}
@media (prefers-reduced-motion:reduce){
  .ill-ursache .ring, .ort, .ill-netz .kern{animation:none}
  .ill-liste div, .weg-fuell, .ill-netz path{transition:none}
}
@media (max-width:860px){
  .sk-bild:has(.ill-liste){height:auto}
  .ill-liste{position:relative; padding:1.1rem}
  .ill-liste div{font-size:.86rem; padding:.7rem .85rem}
}

/* Teamfoto 11.10.: Gruppenbild über dem Team-Raster, Bild frei ohne Text darauf */
.team-foto{margin:0 auto clamp(1.8rem,3vw,2.6rem); max-width:660px; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--tiefe-2, var(--schatten))}
.team-foto img{display:block; width:100%; height:auto}

/* ===== Rundgang 20.10.: das Band nimmt leise die Farbe des sichtbaren Raums an (Ebenen per Deckkraft, kein Repaint) ===== */
.rundgang-buehne{position:relative}
.rundgang-toene{position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit; pointer-events:none}
.rundgang-toene i{position:absolute; inset:0; opacity:0; will-change:opacity; transition:opacity .8s var(--ease);
  background:radial-gradient(70% 80% at 18% 28%, color-mix(in srgb, var(--ton) 46%, transparent) 0%, transparent 70%), radial-gradient(55% 65% at 86% 88%, color-mix(in srgb, var(--ton) 30%, transparent) 0%, transparent 72%)}
.rundgang.scrub .rundgang-toene i{transition:none}
.rundgang-buehne > :not(.rundgang-toene){position:relative; z-index:1}

/* ===== Luxus-Layer 20.10.: warmer Grund, Gold nur als Linie, Petrol als Samt (umkehrbar: diesen Block löschen) ===== */
:root{--bg:#F6F3EE; --bg-tief:#EEE9E0; --salbei:#E4E6DF; --salbei-2:#D4D9D2;
  --glas:rgba(255,253,249,.6); --glas-stark:rgba(255,253,249,.8); --glas-rand:rgba(255,255,255,.9);
  --schatten:0 24px 60px -28px rgba(60,55,40,.3), 0 2px 6px -2px rgba(60,55,40,.08); --schatten-klein:0 12px 30px -18px rgba(60,55,40,.32);
  --salbei-tief:#13292B; --kopf-tinte:#172A2B;
  --gold:#C4A265; --gold-hell:#E3D1A6; --gold-rgb:196,162,101}
body{background:radial-gradient(1100px 700px at 88% -8%, #EDE5D8 0%, transparent 60%), radial-gradient(900px 600px at -10% 30%, #FBF9F5 0%, transparent 60%), radial-gradient(1000px 800px at 110% 70%, #E4EAE6 0%, transparent 60%), var(--bg)}
.hero-karte{background:linear-gradient(120deg,#FFFDF9 0%,#F2EFE7 48%,#DCE6E4 100%)}
/* Gold als Linie */
.chip{background:rgba(255,253,249,.8); border-color:rgba(var(--gold-rgb),.38)}
.chip::before{background:var(--gold)}
.liste li{border-top-color:rgba(var(--gold-rgb),.4)}
.stimme-karte figcaption, .rechts-abschnitt + .rechts-abschnitt{border-top-color:rgba(var(--gold-rgb),.38)}
.fuss-unten{border-top-color:rgba(var(--gold-rgb),.35)}
.sprechzeiten .tag + .tag{border-top-color:rgba(var(--gold-rgb),.22)}
.sk-nr::before{content:""; display:inline-block; width:18px; height:1px; margin:0 .55rem 4px 0; background:var(--gold); vertical-align:middle}
.ablauf-nr{background:linear-gradient(180deg,#C9A96A 0%,rgba(201,169,106,.38) 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.sterne-voll{color:#CBA862}
.person .portrait{box-shadow:0 0 0 2px var(--gold-hell), 0 0 0 3px #fff, var(--schatten-klein)}
.team-sieben .person .portrait{box-shadow:0 0 0 2px var(--gold-hell), 0 0 0 3px #fff, 0 12px 24px -12px rgba(60,55,40,.3)}
.stimmen-alle a, .hero-bewertung{box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.35), 0 8px 18px -12px rgba(60,55,40,.3)}
/* Petrol als Samt: tiefer, satter, mit goldener Haarlinie als Rahmen */
.schluss-karte, .leistung.getoent{background:radial-gradient(70% 90% at 100% 0%, rgba(var(--gold-rgb),.14) 0%, transparent 60%), linear-gradient(125deg,#1C3C3E 0%,#13292B 60%,#0F2122 100%); box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.34), var(--schatten)}
.vergleich-spalte.nachher{background:linear-gradient(160deg,#1C3C3E,#13292B); box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.3)}
.plan .kosten.kosten-band{background:radial-gradient(55% 90% at 0% 100%, rgba(94,143,146,.22) 0%, transparent 70%), radial-gradient(45% 80% at 85% 0%, rgba(var(--gold-rgb),.18) 0%, transparent 70%), var(--salbei-tief);
  box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.34), inset 0 16px 28px -22px rgba(255,255,255,.16), 0 30px 60px -32px rgba(10,30,32,.65)}
.rundgang-dunkel .rundgang-buehne{box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.3), 0 30px 70px -40px rgba(10,30,32,.7)}
.rundgang-dunkel .rundgang-fortschritt i, .rundgang-dunkel .chip::before{background:var(--gold-hell)}
.fuss{background:#0F2122; box-shadow:inset 0 1px 0 rgba(var(--gold-rgb),.35)}
.kosten-band .btn-primaer, .schluss-text .btn-primaer{color:var(--petrol)}
.kosten-band .btn-primaer .pfeil img{filter:none}