/* =====================================================================
   KUNDE fh20 Zahnmedizin & Ästhetik: ohne Ebene, schlägt Vorlage und Systeme.
   Drei Richtungen: 1 editorial (Leitrichtung, Stimmung pflugderma, Creme, Antiqua mit Kursive), 2 praezision (dunkle
   Bühne im Ton des Zahnfilms #0F1C15), 3 warm (nah, Team). Ein Akzent: Olive #62635C (Knopf, aktiver Zustand, Detail).
   Eigenheit: die eckige Klammer der Marke, nur als Sektionsmarke, Klammer-Ecken an echten Fotos, Türwörter im Rundgang.
   ===================================================================== */

/* ---------- Tokens je Richtung (ENTSCHEIDUNG.md "Farben und Schrift") ---------- */
html[data-system]{--akzent:#62635C;--akzent-knopf:#62635C;--akzent-knopf-hover:#53544E;--knopf:#62635C;--knopf-text:#FFFFFF;--knopf-hover:#53544E;--buehne:#0F1C15;--buehne-text:#F2EFE8;--buehne-leise:#B9BDB1;--markierung:#C9CBBF}
html[data-system="editorial"]{--papier:#F6F2EC;--kachel:#ECE6DD;--text:#2B2A27;--leise:#6B6862;--zart:#6B6862;--linie:#DDD6CB;--linie-stark:#2B2A27;--dunkel:#2E2F2B;--tief:#2E2F2B;
  --kopf-grund:#F6F2EC;--kopf-text:#2B2A27;--kopf-linie:#DDD6CB;--fuss-grund:#F6F2EC;--fuss-text:#6B6862;--fuss-linie:#2B2A27;--klammer:#2B2A27}
html[data-system="praezision"]{--papier:#F4F3F0;--kachel:#E6E5E1;--text:#171816;--leise:#5E5F5A;--zart:#8A8B86;--linie:#D8D7D2;--linie-stark:#9C9DA0;--dunkel:#0F1C15;--tief:#0F1C15;
  --tief-knopf-text:#0F1C15;--kopf-grund:#0F1C15;--fuss-grund:#F4F3F0;--fuss-text:#5E5F5A;--fuss-linie:#D8D7D2;--klammer:#171816}
html[data-system="warm"]{--papier:#F8F6F2;--kachel:#ECE9E3;--text:#2C2C29;--leise:#686762;--zart:#62635C;--linie:#E0DCD4;--linie-stark:#8F8C84;--dunkel:#34352F;--tief:#34352F;
  --kopf-grund:#F8F6F2;--kopf-text:#2C2C29;--kopf-linie:#E0DCD4;--fuss-grund:#F8F6F2;--fuss-text:#686762;--fuss-linie:#E0DCD4;--klammer:#2C2C29;--zahl-farbe:#34352F}

/* ---------- Logo inline (currentColor) ---------- */
.logo{display:block;width:auto;height:30px;fill:currentColor;stroke:none}
.logo path{fill:currentColor}
.kopf .marke{gap:0;min-height:44px}
.kopf__rechts{display:flex;align-items:center;gap:22px}
.kopf__knopf.knopf{min-height:42px!important;padding:0 20px!important;font-size:14px!important}
html[data-system="praezision"] .kopf__knopf.knopf{background:#F2EFE8;color:#0F1C15}
html[data-system="praezision"] .kopf__knopf.knopf:hover{background:#FFFFFF}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* ---------- Eigenheit 1: Sektionsmarke in Klammern, klein und gesperrt ---------- */
.marke-k{display:block;margin:0 0 20px;font-family:var(--schrift-text);font-size:13px;font-weight:500;letter-spacing:.16em;line-height:1.4;color:var(--leise);max-width:none;white-space:nowrap}
html[data-system="praezision"] .marke-k{letter-spacing:.12em}
h2.marke-k{font-size:13px!important;font-weight:500!important;letter-spacing:.16em!important;line-height:1.4!important;font-family:var(--schrift-text)!important}

/* ---------- Eigenheit 2: Klammer-Ecken an echten Fotos (zwei L-Winkel, 1 px) ---------- */
.klammer{position:relative}
.klammer::before,.klammer::after{content:"";position:absolute;z-index:3;width:28px;height:28px;pointer-events:none;border:0 solid var(--klammer,currentColor)}
.klammer::before{left:-12px;top:-12px;border-left-width:1px;border-top-width:1px}
.klammer::after{right:-12px;bottom:-12px;border-right-width:1px;border-bottom-width:1px}
.klammer--innen::before{left:24px;top:24px;border-color:#F6F2EC}
.klammer--innen::after{right:24px;bottom:24px;border-color:#F6F2EC}
.tief .klammer,.zahn .klammer{--klammer:var(--buehne-text)}

/* ---------- Zweite Zeile: in der Leitrichtung kursiv wie die Referenz, sonst grau ---------- */
html[data-system="editorial"] :is(h1,h2) .zart{font-style:italic;font-weight:320;letter-spacing:-.022em}
html[data-system="editorial"] :is(h1,h2){font-variation-settings:"opsz" 72}

/* ---------- Live-Status ---------- */
.status{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-size:14px;color:var(--leise);max-width:none}
.status i{width:7px;height:7px;border-radius:50%;background:var(--leise);flex:none}
.status.ist-offen i{background:var(--akzent)}
html.ohne-js .status i{display:none}

/* ---------- Bilder mit Schild ---------- */
.schild-klein{position:absolute;z-index:4;right:12px;bottom:12px;padding:5px 10px;font-size:12px;line-height:1.3;color:#F2EFE8;background:rgb(15 28 21/.78);border-radius:2px;pointer-events:none}

/* =====================================================================
   START je Richtung
   ===================================================================== */
.start__bild picture{position:absolute;inset:0;display:block}
.start__bild picture img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}

/* 1 · Satzspiegel: Creme, Antiqua, rechts randlos das Paar in der Praxis */
.start--f1{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important}
.start--f1 .start__text{padding-top:clamp(40px,7vh,96px)!important}
.start--f1 h1{font-size:clamp(46px,5.5vw,92px)!important;line-height:1!important;max-width:11.5ch;margin-bottom:0!important}
.start--f1 .start__satz{margin-top:auto!important;padding-top:28px;max-width:40ch!important;font-size:clamp(17px,1.3vw,19px)!important;color:var(--text)!important}
.start--f1 .start__bild img{object-position:50% 30%}
.start--f1 .marke-k{margin-bottom:clamp(26px,5vh,56px)}
html.js[data-system="editorial"] .start--f1 .marke-k{animation:edit-auf 1.2s var(--kurve) both}

/* 2 · Bühne: der Zahnfilm füllt den Schirm, der Satz steht links im Dunkel */
.start--f2{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:center!important;text-align:left!important;background:var(--buehne)!important;color:var(--buehne-text)!important;padding:clamp(40px,8vh,96px) var(--rand) calc(40px + var(--pille-platz))!important;
  --text:var(--buehne-text);--leise:var(--buehne-leise);--zart:#8E968C;--linie-stark:#8E968C;--knopf:#F2EFE8;--knopf-text:#0F1C15;--knopf-hover:#FFFFFF;--fokus:#F2EFE8;--fokus-gegen:#0F1C15}
.start--f2 .start__text{align-items:flex-start!important;max-width:620px!important;grid-column:1}
.start--f2 h1{font-size:clamp(48px,6.4vw,104px)!important}
.start--f2 .start__satz{margin-inline:0!important;max-width:40ch!important}
.start--f2 .start__aktion{justify-content:flex-start!important}
.start--f2 .start__bild{position:absolute!important;inset:0!important;z-index:0;margin:0!important;max-width:none!important;min-height:0!important;width:auto!important;overflow:hidden!important;border-radius:0!important}
.start--f2 .start__bild > img,.start--f2 .start__bild video{object-fit:cover!important;object-position:72% 50%!important;filter:none!important;animation:none}
.start--f2 .start__bild::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgb(15 28 21/.72),rgb(15 28 21/0) 52%),linear-gradient(0deg,rgb(15 28 21/1),rgb(15 28 21/0) 18%)}
.start--f2 .hero__ecke{position:absolute;right:var(--rand);bottom:calc(var(--pille-platz) + 22px);top:auto;z-index:3;display:flex;gap:10px;align-items:center}
.start--f2 .hero__ecke .schild-klein{position:static}

/* 3 · Kopf und Band: Satz oben, darunter die Reihe der echten Portraits */
.start--f3{padding-bottom:calc(20px + var(--pille-platz))!important}
.start--f3 .start__text{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)!important}
.start--f3 h1{max-width:14ch!important}
.chip{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:7px 14px;border-radius:999px;background:var(--kachel);font-size:14px;font-weight:500;color:var(--text);max-width:none}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--akzent)}
.reihe{position:relative;z-index:1;flex:1 1 300px;min-height:260px;display:flex;gap:14px;margin:clamp(26px,4.5vh,48px) calc(var(--rand) * -1) 0;padding:0 var(--rand) 26px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:flex-start}
.reihe::-webkit-scrollbar{display:none}
.reihe figure{position:relative;margin:0;flex:0 0 auto;height:calc(100% - 26px);aspect-ratio:4/5;max-height:430px;scroll-snap-align:start;border-radius:22px;overflow:hidden;background:var(--kachel)}
.reihe figure:nth-child(even){transform:translateY(26px)}
.reihe figure.reihe__paar{aspect-ratio:4/5}
.reihe img{width:100%;height:100%;object-fit:cover}
.reihe figcaption{position:absolute;left:10px;bottom:10px;right:10px;padding:5px 10px;border-radius:999px;background:rgb(248 246 242/.92);font-size:12.5px;font-weight:500;line-height:1.3;color:#2C2C29;width:fit-content;max-width:calc(100% - 20px)}
html.js[data-system="warm"] .reihe figure{animation:warm-auf 1s var(--kurve) both}
html.js[data-system="warm"] .reihe figure:nth-child(2){animation-delay:.06s}
html.js[data-system="warm"] .reihe figure:nth-child(3){animation-delay:.12s}
html.js[data-system="warm"] .reihe figure:nth-child(4){animation-delay:.18s}
html.js[data-system="warm"] .reihe figure:nth-child(n+5){animation-delay:.24s}

/* =====================================================================
   NEU-BAND
   ===================================================================== */
.neu{padding:0 var(--rand)}
.neu__innen{display:flex;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--linie)}
.neu__bild{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.neu p{margin:0;font-size:16px;max-width:none;flex:1}
.neu p b{font-weight:600}
.neu .textlink{flex:none}
html[data-system="editorial"] .neu__innen{border-bottom-color:var(--linie-stark)}
html[data-system="praezision"] .neu{background:var(--buehne);color:var(--buehne-text);--text:var(--buehne-text);--leise:var(--buehne-leise);--linie-stark:#8E968C;--fokus:#F2EFE8;--fokus-gegen:#0F1C15}
html[data-system="praezision"] .neu__innen{border-top:1px solid rgb(255 255 255/.14);border-bottom:0}
html[data-system="warm"] .neu__innen{border:0;margin-top:8px;padding:14px 22px;border-radius:999px;background:var(--kachel)}

/* =====================================================================
   WIR
   ===================================================================== */
.wir__kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,112px);align-items:end;margin-bottom:clamp(48px,6vw,96px)}
.wir__text p{color:var(--leise);font-size:var(--text-groesse,17px)}
.wir__text p + p{margin-top:16px}
html[data-system="editorial"] .wir__kopf{padding-top:22px;border-top:1px solid var(--linie-stark);align-items:start}
html[data-system="editorial"] .wir__text{padding-top:44px}
html[data-system="editorial"] .wir__text p:first-child{font-family:var(--schrift);font-size:clamp(21px,1.7vw,25px);line-height:1.42;color:var(--text);font-weight:360}
.aerzte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,56px);list-style:none;margin:0;padding:0}
.arzt{margin:0}
.arzt__bild{margin:0 0 22px;aspect-ratio:4/5;max-width:460px}
.arzt__bild img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.arzt h3{margin:0}
.arzt__titel{margin:4px 0 0;color:var(--leise);font-size:15px}
.arzt__schwer{margin:16px 0 0;font-size:15px;line-height:1.55;color:var(--text)}
.arzt__weg{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--linie);font-size:14px;color:var(--leise);line-height:1.55}
html[data-system="praezision"] .arzt__bild{border-radius:var(--bild-radius);overflow:hidden}
html[data-system="warm"] .arzt__bild{border-radius:24px;overflow:hidden}
html[data-system="praezision"] .arzt__bild.klammer,html[data-system="warm"] .arzt__bild.klammer{overflow:visible}
html[data-system="praezision"] .arzt__bild img,html[data-system="warm"] .arzt__bild img{border-radius:inherit}
html[data-system="praezision"] .arzt__bild.klammer img{border-radius:var(--bild-radius)}
html[data-system="warm"] .arzt__bild.klammer img{border-radius:24px}
.team{margin-top:clamp(56px,6vw,96px);padding-top:28px;border-top:1px solid var(--linie)}
.team__satz{margin:0 0 26px;color:var(--leise);font-size:16px}
.team__reihe{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0}
.team__reihe li{margin:0}
.team__reihe img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%}
.team__reihe span{display:block;margin-top:10px;font-size:13.5px;line-height:1.35;color:var(--text)}
html[data-system="praezision"] .team__reihe img{border-radius:14px}
html[data-system="warm"] .team__reihe img{border-radius:18px}

/* =====================================================================
   HÖHEPUNKT: Leistungen am Porzellanzahn
   ===================================================================== */
.zahn{position:relative;background:var(--buehne);color:var(--buehne-text);--text:var(--buehne-text);--leise:var(--buehne-leise);--zart:#8E968C;--linie:rgb(255 255 255/.16);--linie-stark:#8E968C;--knopf:#F2EFE8;--knopf-text:#0F1C15;--knopf-hover:#FFFFFF;--fokus:#F2EFE8;--fokus-gegen:#0F1C15;--zeiger-grund:rgb(242 239 232/.94);--zeiger-text:#0F1C15}
/* F1 und F3: die dunkle Bühne gerahmt im Papier, mit Klammer-Ecken */
html[data-system="editorial"] .zahn,html[data-system="warm"] .zahn{background:var(--papier);padding:clamp(40px,5vw,80px) var(--rand)}
html[data-system="editorial"] .zahn__rahmen,html[data-system="warm"] .zahn__rahmen{background:var(--buehne)}
html[data-system="warm"] .zahn__rahmen{border-radius:28px}
html[data-system="editorial"] .zahn__rahmen.klammer,html[data-system="warm"] .zahn__rahmen.klammer{--klammer:var(--text)}
html[data-system="editorial"] .zahn,html[data-system="warm"] .zahn{--klammer:#2B2A27}
.zahn__rahmen{position:relative}
.zahn__lauf{position:relative}
html.js:not(.still) .zahn__lauf{height:300svh}
.zahn__buehne{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center;gap:clamp(20px,3vw,48px);padding:clamp(36px,5vh,72px) clamp(28px,4vw,72px)}
html.js:not(.still) .zahn__buehne{position:sticky;top:var(--kopf-h);height:calc(100svh - var(--kopf-h));min-height:560px;max-height:980px}
html[data-system="editorial"].js:not(.still) .zahn__buehne,html[data-system="warm"].js:not(.still) .zahn__buehne{top:calc(var(--kopf-h) + 20px);height:calc(100svh - var(--kopf-h) - 40px)}
.zahn__text{position:relative;z-index:2;align-self:center}
.zahn__text h2{color:var(--buehne-text);font-size:clamp(40px,4.4vw,72px)}
.zahn__titel-liste{list-style:none;margin:clamp(26px,4vh,44px) 0 0;padding:0;border-top:1px solid var(--linie)}
.zahn__titel{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:10px 0;border:0;border-bottom:1px solid var(--linie);background:none;color:var(--buehne-leise);font:inherit;font-size:17px;font-weight:500;text-align:left;cursor:pointer;transition:color .4s var(--kurve)}
.zahn__titel::after{content:"";width:8px;height:8px;border-radius:50%;border:1px solid currentColor;opacity:.6;transition:background .4s,opacity .4s}
.zahn__titel.ist-an{color:var(--buehne-text)}
.zahn__titel.ist-an::after{background:var(--markierung);border-color:var(--markierung);opacity:1}
html[data-system="editorial"] .zahn__titel{font-family:var(--schrift);font-size:22px;font-weight:380;letter-spacing:-.01em}
.zahn__saetze{position:relative;margin-top:22px;min-height:84px}
.zahn__station{margin:0;font-size:16.5px;line-height:1.55;color:var(--buehne-leise);max-width:42ch}
html.js:not(.still) .zahn__station{position:absolute;left:0;top:0;opacity:0;transform:translateY(8px);transition:opacity .5s var(--kurve),transform .5s var(--kurve)}
html.js:not(.still) .zahn__station.ist-an{opacity:1;transform:none}
html.js:not(.still) .zahn__station[data-st="0"]{opacity:1;transform:none}
html.js:not(.still) .zahn__buehne:not([data-aktiv="0"]) .zahn__station[data-st="0"]{opacity:0}
.zahn__station b{display:block;color:var(--buehne-text);font-weight:500;margin-bottom:2px}
html.ohne-js .zahn__station,html.still .zahn__station{margin-bottom:12px}
html.ohne-js .zahn__station[data-st="0"],html.still .zahn__station[data-st="0"]{display:none}
.zahn__fuss{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:clamp(22px,3.4vh,36px)}
.zahn__fuss small{font-size:12.5px;color:var(--buehne-leise)}
.zahn__objekt{position:relative;align-self:stretch;min-height:0}
.zahn__objekt .objekt3d{position:absolute;inset:0;--ueberstand:56px}
.zahn__marke{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
html.ohne-js .zahn__marke,html.still .zahn__marke{display:none}
/* Marken: Station k kreuzt die Bildschirmmitte bei Anteil p der klebenden Strecke (200svh plus Kopf) */
.zahn__marke[data-station="1"]{top:calc(50svh - var(--kopf-h) + .1 * (200svh + var(--kopf-h)))}
.zahn__marke[data-station="2"]{top:calc(50svh - var(--kopf-h) + .28 * (200svh + var(--kopf-h)))}
.zahn__marke[data-station="3"]{top:calc(50svh - var(--kopf-h) + .46 * (200svh + var(--kopf-h)))}
.zahn__marke[data-station="4"]{top:calc(50svh - var(--kopf-h) + .64 * (200svh + var(--kopf-h)))}
.zahn__marke[data-station="5"]{top:calc(50svh - var(--kopf-h) + .82 * (200svh + var(--kopf-h)))}
html[data-system="praezision"] .zahn .zahn__text h2{text-wrap:balance}

/* =====================================================================
   LEISTUNGEN: Index, aufklappbar
   ===================================================================== */
.leistungen__raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,112px);align-items:start}
.leistungen__kopf p:not(.marke-k){margin-top:22px;color:var(--leise);max-width:34ch}
html.js .leistungen__kopf{position:sticky;top:calc(var(--kopf-h) + 40px)}
.liste{border-top:1px solid var(--linie-stark)}
.leistung{border-bottom:1px solid var(--linie)}
.leistung summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:16px 0;cursor:pointer;list-style:none}
.leistung summary::-webkit-details-marker{display:none}
.leistung summary h3{margin:0;font-size:clamp(20px,1.7vw,25px)}
.leistung summary::after{content:"";flex:none;width:12px;height:12px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--kurve);opacity:.7}
.leistung[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.leistung__inhalt{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:0 0 22px}
.leistung__inhalt p{margin:0;color:var(--leise);max-width:52ch}
.leistung__inhalt .textlink{flex:none;margin-top:-10px}
html[data-system="editorial"] .leistung summary h3{font-family:var(--schrift);font-weight:360;font-size:clamp(24px,2.1vw,32px);letter-spacing:-.02em}
html[data-system="praezision"] .liste{border-top-color:var(--linie)}
html[data-system="warm"] .liste{border-top-color:var(--linie)}
.digital{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);align-items:baseline;margin-top:clamp(64px,7vw,112px);padding-top:24px;border-top:1px solid var(--linie-stark)}
.digital .marke-k{margin:0}
.digital span{font-family:var(--schrift);font-size:clamp(24px,2.4vw,38px);line-height:1.12;letter-spacing:var(--display-lauf);font-weight:var(--display-gewicht)}
html[data-system="praezision"] .digital,html[data-system="warm"] .digital{border-top-color:var(--linie)}

/* =====================================================================
   RUNDGANG
   ===================================================================== */
.praxis{position:relative}
.praxis__buehne{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center;gap:clamp(32px,5vw,96px);padding:clamp(48px,7vh,96px) var(--rand)}
html.js:not(.still) .praxis__lauf{height:300svh}
html.js:not(.still) .praxis__buehne{position:sticky;top:var(--kopf-h);height:calc(100svh - var(--kopf-h));min-height:560px;max-height:1000px;overflow:visible}
.praxis__text p:not(.marke-k){margin-top:22px;color:var(--leise);max-width:40ch}
.praxis__tueren{list-style:none;margin:clamp(26px,4vh,44px) 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.praxis__tuer{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font-family:var(--schrift);font-size:clamp(24px,2.2vw,34px);line-height:1.1;letter-spacing:-.01em;color:var(--leise);cursor:pointer;transition:color .45s var(--kurve)}
.praxis__tuer.ist-an{color:var(--text)}
.praxis__balken{display:block;height:1px;margin-top:18px;max-width:280px;background:var(--linie)}
.praxis__balken i{display:block;height:100%;background:var(--akzent);transform-origin:0 50%;transform:scaleX(.2);transition:transform .5s var(--kurve)}
.praxis__bilder{position:relative;justify-self:center;width:100%;max-width:720px;aspect-ratio:706/471}
.praxis__bild{position:absolute;inset:0;margin:0;overflow:hidden;opacity:0}
.praxis__bild:first-child{opacity:1}
.praxis__bild img{width:100%;height:100%;object-fit:cover}
.praxis__bild figcaption{position:absolute;left:16px;bottom:14px;padding:5px 11px;background:rgb(246 242 236/.94);color:#2B2A27;font-size:13px;letter-spacing:.06em;border-radius:2px}
html[data-system="praezision"] .praxis__bilder,html[data-system="praezision"] .praxis__bild{border-radius:var(--bild-radius)}
html[data-system="warm"] .praxis__bilder,html[data-system="warm"] .praxis__bild{border-radius:24px}
html.ohne-js .praxis__bilder,html.still .praxis__bilder{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:none}
html.ohne-js .praxis__bild,html.still .praxis__bild{position:relative;opacity:1}
html.ohne-js .praxis__bild img,html.still .praxis__bild img{aspect-ratio:706/471;height:auto}
html.ohne-js .praxis__bilder.klammer::before,html.ohne-js .praxis__bilder.klammer::after,html.still .praxis__bilder.klammer::before,html.still .praxis__bilder.klammer::after{display:none}

/* =====================================================================
   TERMIN
   ===================================================================== */
.termin__raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,112px);align-items:start}
.termin__notiz{margin:0;padding:16px 0;border-bottom:1px solid var(--linie);font-size:15.5px;color:var(--leise);max-width:none}
.termin__notiz:first-of-type{margin-top:26px;border-top:1px solid var(--linie)}
.termin__notiz a{color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;display:inline-block;padding:10px 0;margin:-10px 0}
html[data-system="editorial"] .termin .demo-offen .demo__karte{background:var(--kachel)}

/* =====================================================================
   NEUIGKEITEN UND RATGEBER
   ===================================================================== */
.ratgeber__reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,40px)}
.beitrag{margin:0}
.beitrag__bild{position:relative;margin:0 0 20px;aspect-ratio:3/2;overflow:hidden;background:var(--kachel)}
.beitrag__bild img{width:100%;height:100%;object-fit:cover}
.beitrag__bild--tief{background:var(--buehne)}
.beitrag__bild--frei img{object-fit:contain;padding:8% 0 4%}
.beitrag__art{margin:0 0 8px;font-size:13px;letter-spacing:.12em;color:var(--leise)}
.beitrag h3{margin:0}
.beitrag p{margin-top:10px;color:var(--leise);font-size:16px}
.beitrag .beitrag__hinweis{margin-top:14px;font-size:13px}
html[data-system="editorial"] .beitrag h3{font-size:clamp(24px,2vw,30px)}
html[data-system="praezision"] .beitrag__bild{border-radius:var(--bild-radius)}
html[data-system="warm"] .beitrag__bild{border-radius:22px}

/* =====================================================================
   KARRIERE-TEASER
   ===================================================================== */
.karriere-t{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,112px);align-items:center}
.karriere-t__bild{margin:0;max-width:600px;aspect-ratio:691/600}
.karriere-t__bild img{width:100%;height:100%;object-fit:cover}
.karriere-t__text p:not(.marke-k){margin-top:22px;color:var(--leise);max-width:44ch}
.karriere-t__text .knopf{margin-top:30px}
html[data-system="praezision"] .karriere-t__bild img{border-radius:var(--bild-radius)}
html[data-system="warm"] .karriere-t__bild img{border-radius:24px}

/* =====================================================================
   KONTAKT
   ===================================================================== */
.kontakt.abschnitt{display:block}
.kontakt__raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,112px);align-items:start}
.kontakt__daten h2{margin-bottom:28px}
.zeiten{width:100%;max-width:440px;border-collapse:collapse;font-size:15.5px;font-variant-numeric:tabular-nums}
.zeiten th,.zeiten td{padding:9px 0;border-bottom:1px solid var(--linie);text-align:left;font-weight:400}
.zeiten td{text-align:right;color:var(--leise)}
.zeiten tr.ist-heute th,.zeiten tr.ist-heute td{color:var(--text);font-weight:600}
.kontakt__liste{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 22px;margin:26px 0 0;font-size:15.5px}
.kontakt__liste dt{font-weight:500}
.kontakt__liste dd{margin:0;color:var(--leise)}
.kontakt__liste a{color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;display:inline-block;padding:10px 0;margin:-10px 0}
.kontakt__klein{margin-top:18px;font-size:14.5px;color:var(--leise)}
.kontakt__aktion{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:30px}
.kontakt__bilder{display:grid;gap:26px}
.kontakt__foto{margin:0;aspect-ratio:706/471;max-width:706px}
.kontakt__foto img{width:100%;height:100%;object-fit:cover}
.kontakt .karte{aspect-ratio:16/9}
html[data-system="praezision"] .kontakt__foto img,html[data-system="praezision"] .kontakt .karte{border-radius:var(--bild-radius)}
html[data-system="warm"] .kontakt__foto img,html[data-system="warm"] .kontakt .karte{border-radius:22px}
html[data-system="praezision"] .kontakt,html[data-system="warm"] .kontakt{--klammer:var(--tief-text)}
html[data-system="editorial"] .kontakt{border-top:0}
html[data-system="editorial"] .kontakt__raster{padding-top:22px;border-top:1px solid var(--linie-stark)}
html[data-system="praezision"] .kontakt .zeiten tr.ist-heute td,html[data-system="warm"] .kontakt .zeiten tr.ist-heute td{color:var(--tief-text)}

/* =====================================================================
   FUSS
   ===================================================================== */
.fuss.fuss2{display:block;padding:clamp(48px,6vw,88px) var(--rand) 26px;font-size:14px}
.fuss2__oben{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start;padding-bottom:36px;border-bottom:1px solid var(--linie)}
.fuss2__oben p{margin:0;line-height:1.7;max-width:none}
.fuss2__oben a{display:inline-block;min-height:0;padding:8px 0;margin:-8px 0}
.fuss2__logo{display:inline-flex!important;color:var(--text)}
.fuss2__logo .logo{height:26px}
.fuss2__modell{margin:22px 0 0;font-size:12.5px;max-width:none}
.fuss2__unten{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 24px;margin-top:14px}
.fuss2__unten div{display:flex;align-items:center;flex-wrap:wrap;gap:0 22px}
.fuss.fuss2 .fuss2__unten a,.fuss.fuss2 .fuss2__unten span{display:inline-flex;align-items:center;min-height:44px}
.fuss2__unten span{font-size:13px}

/* =====================================================================
   KARRIERE-SEITE
   ===================================================================== */
.start--karriere{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;align-items:center!important;gap:clamp(32px,5vw,96px);text-align:left!important;padding:clamp(40px,8vh,104px) var(--rand) calc(48px + var(--pille-platz))!important;min-height:min(calc(100svh - var(--kopf-h)),860px)!important}
.start--karriere .start__text{grid-column:1!important;grid-row:1!important;display:block!important;padding:0!important;max-width:640px}
.start--karriere h1{font-size:clamp(46px,5.4vw,88px)!important;margin-bottom:0!important}
.start--karriere .start__satz{margin-top:26px!important;margin-inline:0!important}
.start--karriere .start__aktion{justify-content:flex-start!important}
.start--karriere .start__bild{grid-column:2!important;grid-row:1!important;position:relative;width:100%!important;max-width:706px!important;justify-self:end;aspect-ratio:706/471;min-height:0!important;margin:0!important;flex:none!important;overflow:visible!important;border-radius:0!important;animation:none}
.start--karriere .start__bild img{border-radius:0}
html[data-system="praezision"] .start--karriere{background:var(--buehne)!important;color:var(--buehne-text)!important;--text:var(--buehne-text);--leise:var(--buehne-leise);--zart:#8E968C;--knopf:#F2EFE8;--knopf-text:#0F1C15;--knopf-hover:#FFFFFF;--klammer:var(--buehne-text);--fokus:#F2EFE8;--fokus-gegen:#0F1C15}
html[data-system="praezision"] .start--karriere .start__bild img{border-radius:var(--bild-radius);filter:none}
html[data-system="warm"] .start--karriere .start__bild img{border-radius:24px}
.bieten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,112px);align-items:start}
.punkte{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie-stark)}
.punkte li{padding:16px 0;border-bottom:1px solid var(--linie);font-family:var(--schrift);font-size:clamp(21px,1.9vw,29px);line-height:1.25;letter-spacing:var(--display-lauf);font-weight:var(--display-gewicht)}
html[data-system="praezision"] .punkte,html[data-system="warm"] .punkte{border-top-color:var(--linie)}
.bieten__bild{margin:0;aspect-ratio:691/600;max-width:600px}
.bieten__bild img{width:100%;height:100%;object-fit:cover}
html[data-system="praezision"] .bieten__bild img{border-radius:var(--bild-radius)}
html[data-system="warm"] .bieten__bild img{border-radius:24px}
.stelle{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,112px);align-items:start}
.stelle__karte{padding:28px 0;border-top:1px solid var(--linie-stark);border-bottom:1px solid var(--linie)}
.stelle__karte h3{margin:0}
.stelle__karte p{margin-top:8px;color:var(--leise)}
.stelle__karte .knopf{margin-top:22px}
.stelle__klein{margin-top:16px;font-size:14px;color:var(--leise)}

/* =====================================================================
   Fassung 4: die Maske steht vorn
   ===================================================================== */
html[data-richtungen] main>section.maske{--o4:1}

/* =====================================================================
   Schmale Bildschirme
   ===================================================================== */
@media (max-width:1240px){
  .kopf__tel span{display:none}
  .nav{gap:18px!important}
}
@media (max-width:1100px){
  .nav{display:none!important}
  .menue{display:block!important}
  .wir__kopf,.leistungen__raster,.termin__raster,.kontakt__raster,.karriere-t,.bieten,.stelle{grid-template-columns:minmax(0,1fr)}
  html.js .leistungen__kopf{position:static}
  .team__reihe{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .logo{height:22px}
  .kopf__rechts{gap:4px;margin-left:auto}
  .kopf__knopf{display:none!important}
  .marke-k{font-size:12px;letter-spacing:.12em;white-space:normal}
  .klammer::before,.klammer::after{width:18px;height:18px}
  .klammer::before{left:-8px;top:-8px}
  .klammer::after{right:-8px;bottom:-8px}
  .klammer--innen::before{left:14px;top:14px}
  .klammer--innen::after{right:14px;bottom:14px}
  /* Start 1 */
  .start--f1 .start__text{padding-top:26px!important}
  .start--f1 .marke-k{margin-bottom:16px}
  .start--f1 h1{font-size:clamp(40px,11.4vw,52px)!important;max-width:none}
  .start--f1 .start__satz{padding-top:0;margin-top:16px!important;font-size:16px!important}
  .start--f1 .status{margin-top:12px;font-size:13px}
  .start--f1 .start__bild{min-height:230px!important}
  /* Start 2 */
  .start--f2{display:flex!important;flex-direction:column;align-items:stretch!important;padding:30px var(--rand) var(--pille-platz)!important}
  .start--f2 .start__text{position:relative;z-index:2}
  .start--f2 h1{font-size:clamp(42px,12vw,58px)!important}
  .start--f2 .start__bild{position:relative!important;inset:auto!important;flex:1 1 240px;min-height:240px!important;margin:18px calc(var(--rand) * -1) 0!important}
  .start--f2 .start__bild > img,.start--f2 .start__bild video{object-position:66% 50%!important}
  .start--f2 .start__bild::after{background:linear-gradient(180deg,rgb(15 28 21/1),rgb(15 28 21/0) 22%)}
  .start--f2 .hero__ecke{right:var(--rand);bottom:calc(var(--pille-platz) + 12px)}
  /* Start 3 */
  .chip{margin-bottom:12px;font-size:13px}
  .reihe{min-height:220px;margin-top:20px;gap:10px;padding-bottom:18px}
  .reihe figure{border-radius:18px;max-height:300px;height:calc(100% - 18px)}
  .reihe figure:nth-child(even){transform:translateY(18px)}
  /* Neu-Band */
  .neu__innen{flex-wrap:wrap;gap:10px 14px;padding:16px 0}
  .neu p{flex:1 1 calc(100% - 70px);font-size:15px}
  .neu .textlink{margin-left:66px}
  html[data-system="warm"] .neu__innen{border-radius:22px;padding:14px 16px}
  html[data-system="warm"] .neu .textlink{margin-left:66px}
  /* Wir */
  .wir__kopf{gap:24px}
  html[data-system="editorial"] .wir__text{padding-top:0}
  .aerzte{grid-template-columns:minmax(0,1fr);gap:48px}
  .arzt__bild{max-width:none}
  .team__reihe{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  /* Zahn */
  html[data-system="editorial"] .zahn,html[data-system="warm"] .zahn{padding:18px 10px}
  html.js:not(.still) .zahn__lauf{height:300svh}
  .zahn__buehne{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:0;padding:22px 20px 22px;align-items:start}
  html.js:not(.still) .zahn__buehne{min-height:0;max-height:none}
  html[data-system="editorial"].js:not(.still) .zahn__buehne,html[data-system="warm"].js:not(.still) .zahn__buehne{top:calc(var(--kopf-h) + 8px);height:calc(100svh - var(--kopf-h) - 16px)}
  .zahn__objekt{grid-row:1;height:38svh;min-height:220px}
  .zahn__objekt .objekt3d{--ueberstand:20px}
  .zahn__text{grid-row:2;align-self:start;padding-top:10px}
  .zahn__text .marke-k{margin-bottom:10px}
  .zahn__text h2{font-size:clamp(30px,8.4vw,40px)}
  .zahn__titel-liste{display:flex;flex-wrap:wrap;gap:0 14px;margin-top:14px;border-top:0}
  .zahn__titel{width:auto;min-height:44px;padding:8px 0;border-bottom:0;font-size:14px!important}
  .zahn__titel::after{display:none}
  .zahn__titel.ist-an{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--markierung)}
  .zahn__saetze{margin-top:8px;min-height:100px}
  .zahn__station{font-size:15px}
  .zahn__fuss{margin-top:10px;gap:8px 18px}
  html.ohne-js .zahn__objekt,html.still .zahn__objekt{height:300px}
  /* Leistungen */
  .leistung summary{min-height:58px;padding:12px 0}
  .leistung__inhalt{flex-direction:column;gap:6px}
  .leistung__inhalt .textlink{margin-top:0}
  .digital{grid-template-columns:minmax(0,1fr);gap:10px}
  /* Rundgang: wischbare Reihe */
  html.js:not(.still) .praxis__lauf{height:auto}
  html.js:not(.still) .praxis__buehne{position:relative;top:auto;height:auto;min-height:0;max-height:none}
  .praxis__buehne{grid-template-columns:minmax(0,1fr);gap:26px;padding:var(--abstand) 0}
  .praxis__text{padding:0 var(--rand)}
  .praxis__tueren,.praxis__balken{display:none}
  .praxis__bilder,html.ohne-js .praxis__bilder,html.still .praxis__bilder{aspect-ratio:auto;display:flex;gap:12px;max-width:none;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--rand) 4px;scrollbar-width:none}
  .praxis__bilder::-webkit-scrollbar{display:none}
  .praxis__bilder.klammer::before,.praxis__bilder.klammer::after{display:none}
  .praxis__bild,html.ohne-js .praxis__bild,html.still .praxis__bild{position:relative;inset:auto;flex:0 0 84%;opacity:1!important;transform:none!important;scroll-snap-align:center;aspect-ratio:706/471}
  .praxis__bild img{height:100%}
  html[data-system="praezision"] .praxis__bilder,html[data-system="warm"] .praxis__bilder{border-radius:0}
  html[data-system="praezision"] .praxis__bild{border-radius:16px}
  html[data-system="warm"] .praxis__bild{border-radius:20px}
  /* Ratgeber */
  .ratgeber__reihe{grid-template-columns:minmax(0,1fr);gap:40px}
  /* Kontakt */
  .kontakt__liste{font-size:15px;gap:6px 16px}
  .kontakt .karte{aspect-ratio:4/3}
  /* Fuss */
  .fuss2__oben{grid-template-columns:minmax(0,1fr);gap:18px}
  .fuss.fuss2{padding-bottom:calc(var(--leiste-h) + 26px)}
  /* Karriere */
  .start--karriere{display:flex!important;flex-direction:column;align-items:stretch!important;gap:26px;padding:28px var(--rand) calc(20px + var(--pille-platz))!important}
  .start--karriere h1{font-size:clamp(40px,11vw,54px)!important}
  .start--karriere .start__bild{max-width:none!important;justify-self:auto}
  .punkte li{font-size:21px;padding:13px 0}
}
@media (min-width:761px) and (max-height:760px){
  .start--f2 h1{font-size:clamp(44px,5vw,80px)!important}
}

/* Fassung 4: Kopf dunkel auf der Platte (Vertrag mit dem Maske-Baustein), zweite Zeile der H1 hell genug */
html[data-variante="4"][data-system="editorial"]{--kopf-grund:#2E2F2B;--kopf-text:#F6F2EC;--kopf-linie:rgb(255 255 255/.14)}
html[data-variante="4"] .kopf__knopf.knopf{background:#F6F2EC;color:#2B2A27}
html[data-variante="4"] .kopf__knopf.knopf:hover{background:#FFFFFF}
.maske__h1 .zart{color:var(--maske-leise)!important;font-style:italic}
@media (max-width:760px){
  .zahn__titel-liste{display:none}
  .zahn__objekt{height:36svh}
  .zahn__saetze{margin-top:14px}
}
/* Zeiger auf der dunklen Bühne hell (Ring und Linie), die Einfärbung am Modell kräftiger (Olive auf Porzellan) */
.zahn .objekt3d__zeiger{--zf:#C9CBBF}
/* F2: die Bühne läuft randlos, Klammer-Ecken nur an der gerahmten Bühne in F1 und F3 */
html[data-system="praezision"] .zahn__rahmen::before,html[data-system="praezision"] .zahn__rahmen::after{display:none}

/* Nach pruefen.py: Schild der Ratgeber-Karten hell (liest sich auf dem dunklen Motiv und unter dem Kopf), Film-Schild bei niedrigen Schirmen oben,
   Tablet ohne Hochskalieren, Seite kürzer (Abstände der Systeme etwas enger) */
.beitrag .schild-klein{background:rgb(246 242 236/.94);color:#2B2A27}
@media (min-width:761px) and (max-height:700px){.start--f2 .hero__ecke{top:18px;bottom:auto}}
.reihe figure{max-height:380px}
html[data-system="editorial"]{--abstand:clamp(72px,7.2vw,116px)}
html[data-system="praezision"]{--abstand:clamp(80px,7.6vw,124px)}
html[data-system="warm"]{--abstand:clamp(64px,6.4vw,104px)}
@media (min-width:761px) and (max-width:1100px){
  .start--f1{display:flex!important;flex-direction:column;min-height:0!important}
  .start--f1 .start__text{padding:40px var(--rand) 0!important}
  .start--f1 .start__satz{margin-top:24px!important;padding-top:0}
  .start--f1 .start__bild{flex:1 1 380px;min-height:380px;max-height:520px;margin-top:32px}
  .start--f1{padding-bottom:var(--pille-platz)!important}
}
/* F4 (Hauptchat, live 24.10.2026): Logo und Schriftzug im dunklen Kopf immer sichtbar, in der hellen Kopfschrift, auch während der Maske */
html[data-variante="4"] .kopf .kopf__marke,html[data-variante="4"] .kopf .kopf__marke .logo{color:var(--kopf-text,#F6F2EC)}
html[data-variante="4"].maske-flug.maske-kopf-frei .kopf :is(.marke,.kopf__marke) > *{opacity:1}