/* Brenner Endodontie
   Papier, Stein, Tinte, Petrol, ein leises Salbei.
   Source Serif 4 für Überschriften, Source Sans 3 für Text. Beide lokal. */

@font-face{font-family:"Serif";font-style:normal;font-display:swap;font-weight:200 900;
  src:url(schrift/source-serif-4-latin-opsz-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Serif";font-style:normal;font-display:swap;font-weight:200 900;
  src:url(schrift/source-serif-4-latin-ext-opsz-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+A720-A7FF}
@font-face{font-family:"Sans";font-style:normal;font-display:swap;font-weight:200 900;
  src:url(schrift/source-sans-3-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sans";font-style:normal;font-display:swap;font-weight:200 900;
  src:url(schrift/source-sans-3-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+A720-A7FF}
@font-face{font-family:"Sans";font-style:italic;font-display:swap;font-weight:200 900;
  src:url(schrift/source-sans-3-latin-wght-italic.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+2000-206F,U+20AC}

:root{
  --papier:#F4F4F0;     /* Grund */
  --weiss:#FBFBF9;      /* ruhige Fläche, Formulare */
  --stein:#DDDBD3;      /* Linien, Flächen */
  --stein-tief:#B9B6AC; /* stärkere Linie */
  --grau:#5D615E;       /* Nebentext */
  --tinte:#1A2939;      /* Text, aus dem Logo */
  --petrol:#2C5A60;     /* Links, Hauptknopf */
  --petrol-tief:#1F454A;
  --salbei:#93A592;     /* Markierungen, Ziffern */
  --salbei-hell:#E3E8DF;

  --serif:"Serif",Georgia,"Times New Roman",serif;
  --sans:"Sans","Segoe UI",Helvetica,Arial,sans-serif;

  --breite:74rem;
  --lese:36rem;
  --rand:clamp(20px,4.5vw,48px);
  --abstand:clamp(64px,9vw,120px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--sans);
  font-size:1.125rem;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--petrol);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--tinte)}
:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:2px}
::selection{background:var(--salbei-hell)}
p{margin:0 0 1em}
strong{font-weight:600}

h1,h2,h3,h4{font-family:var(--serif);font-weight:420;color:var(--tinte);margin:0;
  font-optical-sizing:auto;text-wrap:balance}
h1{font-size:clamp(2.35rem,1.4rem + 3.6vw,4rem);line-height:1.06;letter-spacing:-.018em;font-weight:380}
h2{font-size:clamp(1.7rem,1.2rem + 1.7vw,2.4rem);line-height:1.15;letter-spacing:-.01em}
h3{font-size:1.42rem;line-height:1.25}
h4{font-family:var(--sans);font-size:1.05rem;font-weight:600;line-height:1.35}

.wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.lese{max-width:var(--lese)}
.klein{font-size:.94rem;line-height:1.55}
.leise{color:var(--grau)}
.lede{font-size:clamp(1.18rem,1.05rem + .5vw,1.35rem);line-height:1.5;color:var(--tinte);max-width:34em}
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Kopf ---------- */
.sprung{position:absolute;left:-999px;top:8px;background:var(--tinte);color:var(--papier);padding:8px 14px;z-index:100}
.sprung:focus{left:8px}
.kopf{position:sticky;top:0;z-index:40;background:rgba(244,244,240,.96);border-bottom:1px solid transparent;transition:border-color .2s}
.kopf.gerollt{border-bottom-color:var(--stein)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.marke{display:block;flex:none}
.marke img{height:38px;width:auto}
.haupt{display:flex;align-items:center;gap:4px}
.haupt>ul{display:flex;list-style:none;margin:0;padding:0;gap:2px}
.haupt li{position:relative}
.haupt a,.haupt button.auf{display:block;font:inherit;font-size:1rem;color:var(--tinte);text-decoration:none;
  padding:10px 12px;background:none;border:0;cursor:pointer;border-radius:3px}
.haupt a:hover,.haupt button.auf:hover{color:var(--petrol)}
.haupt a[aria-current="page"],.haupt li.aktiv>button.auf{color:var(--petrol);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em}
.haupt button.auf::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;vertical-align:3px;
  border-right:1.25px solid currentColor;border-bottom:1.25px solid currentColor;transform:rotate(45deg)}
.unter{position:absolute;left:0;top:100%;min-width:270px;list-style:none;margin:0;padding:10px 0;
  background:var(--weiss);border:1px solid var(--stein);border-radius:3px;
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .16s,transform .16s,visibility .16s}
.unter a{padding:9px 18px}
.haupt li:hover>.unter,.haupt li:focus-within>.unter,.haupt li.offen>.unter{opacity:1;visibility:visible;transform:none}
.kopf .termin{margin-left:12px}
.haupt a.knopf{color:var(--weiss);background:var(--petrol);padding:10px 16px;font-size:.95rem}
.haupt a.knopf:hover{color:var(--weiss);background:var(--petrol-tief)}
.burger{display:none;background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer;color:var(--tinte)}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;margin:5px 0;transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:1060px){
  .burger{display:block}
  .haupt{position:fixed;inset:78px 0 0 0;background:var(--papier);display:none;flex-direction:column;align-items:stretch;
    padding:8px var(--rand) 40px;overflow-y:auto;border-top:1px solid var(--stein)}
  .haupt.offen{display:flex}
  .haupt>ul{flex-direction:column;gap:0}
  .haupt>ul>li{border-bottom:1px solid var(--stein)}
  .haupt a,.haupt button.auf{font-size:1.15rem;padding:15px 0;width:100%;text-align:left}
  .haupt button.auf::after{float:right;margin-top:8px}
  .unter{position:static;opacity:1;visibility:visible;transform:none;border:0;background:none;padding:0 0 10px 0;display:none;min-width:0}
  .haupt li.offen>.unter{display:block}
  .unter a{padding:9px 0 9px 16px;font-size:1.05rem;color:var(--grau)}
  .kopf .termin{margin:24px 0 0}
}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-block;font:inherit;font-size:1rem;font-weight:500;line-height:1.2;text-decoration:none;cursor:pointer;
  padding:14px 22px;border-radius:3px;border:1px solid var(--petrol);background:var(--petrol);color:var(--weiss);
  transition:background .15s,border-color .15s,color .15s}
.knopf:hover{background:var(--petrol-tief);border-color:var(--petrol-tief);color:var(--weiss)}
.knopf.zweit{background:transparent;color:var(--tinte);border-color:var(--stein-tief)}
.knopf.zweit:hover{border-color:var(--tinte);background:transparent;color:var(--tinte)}
.knopf.klein{padding:10px 16px;font-size:.95rem}
.knopfzeile{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.textlink{font-weight:500}

/* ---------- Abschnitte ---------- */
.sek{padding:var(--abstand) 0}
.sek+.sek{padding-top:0}
.sek.flaeche{background:var(--weiss);padding-top:var(--abstand)}
.sek.flaeche+.sek{padding-top:var(--abstand)}
.sek.tief{background:var(--tinte);color:#E9ECEA;padding-top:var(--abstand)}
.sek.tief+.sek{padding-top:var(--abstand)}
.sek.tief h2,.sek.tief h3{color:#F4F4F0}
.sek.tief a{color:#CFE0DC}
.sek.tief .leise{color:#AEB6B4}

/* Überschrift links, Inhalt rechts */
.zeile{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(20px,3vw,40px)}
.zeile>.kopfspalte{grid-column:1 / span 4}
.zeile>.inhalt{grid-column:6 / span 7}
.zeile>.inhalt.breit{grid-column:5 / span 8}
.kopfspalte h2{position:sticky;top:110px}
.kopfspalte .leise{margin-top:14px;font-size:1rem;max-width:22em}
@media (max-width:860px){
  .zeile{display:block}
  .kopfspalte{margin-bottom:28px}
  .kopfspalte h2{position:static}
}
.inhalt>h3{margin:1.6em 0 .45em}
.inhalt>h3:first-child{margin-top:0}
.inhalt ul{padding-left:1.1em;margin:0 0 1.2em}
.inhalt li{margin:.3em 0}
.inhalt li::marker{color:var(--salbei)}
.inhalt ul.weiter{padding:0;margin:0}
.inhalt ul.werdegang{padding:0}
.inhalt .weiter li{margin:0}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf{padding:clamp(48px,7vw,96px) 0 clamp(40px,6vw,72px)}
.seitenkopf .pfad{font-size:.95rem;color:var(--grau);margin:0 0 22px}
.seitenkopf .pfad a{color:var(--grau)}
.seitenkopf h1{max-width:15em}
.seitenkopf .lede{margin-top:26px}
.seitenkopf.mit-bild .wrap{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,5vw,72px);align-items:end}
@media (max-width:860px){.seitenkopf.mit-bild .wrap{grid-template-columns:1fr}}

/* ---------- Startseite: Hero ---------- */
.hero{padding:clamp(36px,5vw,72px) 0 clamp(48px,6vw,88px)}
.hero .wrap{display:grid;grid-template-columns:6fr 6fr;gap:clamp(32px,5vw,80px);align-items:center}
.hero h1{max-width:11em}
.hero .lede{margin-top:28px}
.hero-bild{position:relative;margin:0;padding-left:34px}
.hero-bild img{width:100%;aspect-ratio:4/3.1;object-fit:cover;object-position:30% 50%;filter:grayscale(1) contrast(1.02)}
/* Die Messskala: eine Arbeitslänge, in Millimetern. Das einzige Ornament der Seite. */
.skala{position:absolute;left:0;top:0;bottom:0;width:22px;
  background:
    repeating-linear-gradient(to bottom,var(--tinte) 0 1px,transparent 1px calc(100%/25)) right top/10px 100% no-repeat,
    repeating-linear-gradient(to bottom,var(--tinte) 0 1px,transparent 1px calc(100%/5)) right top/18px 100% no-repeat;
  border-right:1px solid var(--tinte)}
.skala .mm{position:absolute;left:-2px;white-space:nowrap;font-size:.72rem;color:var(--grau);line-height:1;transform:translateX(-100%)}
.hero-bild figcaption{margin-top:12px;font-size:.9rem;color:var(--grau)}
.hero .ort{margin-top:34px;padding-top:22px;border-top:1px solid var(--stein);font-size:1rem;color:var(--grau);max-width:30em}
.hero .ort strong{color:var(--tinte);font-weight:600}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-bild{order:-1;padding-left:28px}
}
@media (prefers-reduced-motion:no-preference){
  .hero .text>*{animation:auf .7s cubic-bezier(.2,.6,.2,1) both}
  .hero .text>*:nth-child(2){animation-delay:.08s}
  .hero .text>*:nth-child(3){animation-delay:.16s}
  .hero .text>*:nth-child(4){animation-delay:.24s}
  .hero-bild{animation:blende 1.1s ease both .1s}
  @keyframes auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes blende{from{opacity:0}to{opacity:1}}
}

/* ---------- Ablauf (echte Abfolge) ---------- */
.ablauf{list-style:none;margin:0;padding:0;counter-reset:s}
.ablauf>li{counter-increment:s;display:grid;grid-template-columns:3.2rem 1fr;gap:0 18px;padding:26px 0;border-top:1px solid var(--stein)}
.ablauf>li:last-child{border-bottom:1px solid var(--stein)}
.ablauf>li::before{grid-column:1;content:counter(s);font-family:var(--serif);font-size:2.1rem;line-height:1;color:var(--salbei);font-weight:350;grid-row:1 / span 2}
.ablauf>li>*{grid-column:2}
.ablauf h3{font-size:1.3rem;margin:2px 0 6px}
.ablauf p{margin:0;color:var(--grau)}
.ablauf .dauer{display:block;margin-top:6px;font-size:.92rem;color:var(--tinte)}

/* ---------- Aufzählung ohne Kästen ---------- */
.punkte{display:grid;grid-template-columns:1fr 1fr;gap:34px clamp(24px,4vw,56px);margin:8px 0 0}
.punkte>div h3{font-size:1.22rem;margin:0 0 8px}
.punkte>div p{margin:0;color:var(--grau)}
.punkte>div{padding-top:18px;border-top:1px solid var(--stein)}
@media (max-width:640px){.punkte{grid-template-columns:1fr}}

/* ---------- Fakten / Ort ---------- */
.fakten{display:grid;grid-template-columns:minmax(8.5rem,auto) 1fr;gap:12px 28px;margin:0}
.fakten dt{color:var(--grau);font-size:1rem}
.fakten dd{margin:0}
.zeiten{display:grid;grid-template-columns:7rem 1fr;gap:4px 18px;margin:0;font-variant-numeric:tabular-nums}
.zeiten dt{color:var(--grau)}.zeiten dd{margin:0}

/* ---------- Bilder ---------- */
figure{margin:0}
.foto img{width:100%;filter:grayscale(1)}
.foto figcaption,.abb figcaption{margin-top:12px;font-size:.92rem;color:var(--grau);max-width:40em}
.abb{margin:36px 0}
.abb.voll{margin:48px 0}
.abb .flaeche{background:var(--weiss);border:1px solid var(--stein);padding:clamp(16px,3vw,32px)}
.abb svg text{font-family:var(--sans)}

/* ---------- Person ---------- */
.person{display:grid;grid-template-columns:4fr 7fr;gap:clamp(28px,5vw,72px);align-items:start}
.person .foto img{aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
@media (max-width:760px){.person{grid-template-columns:1fr}.person .foto{max-width:340px}}
.werdegang{list-style:none;margin:22px 0 0;padding:0}
.werdegang li{display:grid;grid-template-columns:6.5rem 1fr;gap:16px;padding:11px 0;border-top:1px solid var(--stein);font-size:1rem}
.werdegang li:last-child{border-bottom:1px solid var(--stein)}
.werdegang .jahr{color:var(--grau);font-variant-numeric:tabular-nums}

/* ---------- Zitat ---------- */
.zitat{margin:48px 0;padding:0;max-width:30em}
.zitat p{font-family:var(--serif);font-size:clamp(1.4rem,1.1rem + 1.1vw,1.9rem);line-height:1.32;font-weight:360;margin:0}
.zitat footer{margin-top:14px;font-size:.95rem;color:var(--grau)}

/* ---------- Fragen (details) ---------- */
.fragen{border-top:1px solid var(--stein)}
.fragen details{border-bottom:1px solid var(--stein)}
.fragen summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;font-size:1.12rem;font-weight:500;line-height:1.4}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"";position:absolute;right:6px;top:28px;width:12px;height:12px;
  background:linear-gradient(var(--tinte),var(--tinte)) center/100% 1.5px no-repeat,linear-gradient(var(--tinte),var(--tinte)) center/1.5px 100% no-repeat;
  transition:transform .2s}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen summary:hover{color:var(--petrol)}
.fragen .antwort{padding:0 0 22px;max-width:var(--lese)}
.fragen .antwort>*:last-child{margin-bottom:0}
.fragen .antwort ul{padding-left:1.1em}
@media (prefers-reduced-motion:no-preference){.fragen details[open] .antwort{animation:blende .25s ease}}

/* ---------- Kostenträger ---------- */
.traeger{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:28px 0 36px}
.traeger>div{padding-top:16px;border-top:2px solid var(--salbei)}
.traeger h3{font-size:1.18rem;margin:0 0 8px}
.traeger p{font-size:1rem;color:var(--grau);margin:0 0 .6em}
@media (max-width:760px){.traeger{grid-template-columns:1fr}}

/* ---------- Kennzahlen (Bio-Seite) ---------- */
.zahlen{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 40px;margin:32px 0}
.zahlen>div{border-top:1px solid var(--stein);padding-top:14px}
.zahlen .wert{font-family:var(--serif);font-size:2.4rem;line-height:1;font-weight:360;margin:0 0 8px}
.zahlen p{margin:0;font-size:1rem}
.zahlen cite{display:block;margin-top:6px;font-size:.88rem;color:var(--grau);font-style:normal}
@media (max-width:560px){.zahlen{grid-template-columns:1fr}}
.vergleich{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:28px 0}
.vergleich>div{padding:20px 22px;background:var(--weiss);border:1px solid var(--stein)}
.vergleich h4{margin:0 0 6px}
.vergleich p{margin:0;font-size:1rem;color:var(--grau)}
@media (max-width:640px){.vergleich{grid-template-columns:1fr}}
.quellen{font-size:.95rem;color:var(--grau)}

/* ---------- Abschluss / Termin-Block ---------- */
.abschluss{padding:var(--abstand) 0;border-top:1px solid var(--stein)}
.abschluss .wrap{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:end}
.abschluss h2{max-width:14em}
.abschluss p{color:var(--grau);margin:16px 0 0;max-width:32em}
.abschluss .knopfzeile{justify-content:flex-end;margin:0}
@media (max-width:860px){.abschluss .wrap{grid-template-columns:1fr}.abschluss .knopfzeile{justify-content:flex-start}}

/* Weiterlesen-Liste */
.weiter{list-style:none;margin:0;padding:0;border-top:1px solid var(--stein)}
.weiter li{border-bottom:1px solid var(--stein)}
.weiter a{display:grid;grid-template-columns:1fr auto;gap:16px;padding:18px 0;text-decoration:none;color:var(--tinte)}
.weiter a span:first-child{font-family:var(--serif);font-size:1.3rem}
.weiter a span.leise{font-size:1rem;align-self:center;text-align:right}
.weiter a:hover span:first-child{color:var(--petrol);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
@media (max-width:640px){.weiter a{grid-template-columns:1fr}.weiter a span.leise{text-align:left}}

/* ---------- Fuß ---------- */
.fuss{background:var(--tinte);color:#C9D0CE;padding:64px 0 120px;font-size:1rem}
.fuss .wrap{display:grid;grid-template-columns:4fr 3fr 3fr 3fr;gap:36px}
.fuss img{height:44px;width:auto;margin-bottom:18px}
.fuss h2{font-family:var(--sans);font-size:.95rem;font-weight:600;color:#F4F4F0;margin:0 0 12px}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin:6px 0}
.fuss a{color:#C9D0CE;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss .hinweis{grid-column:1 / -1;border-top:1px solid #33475A;padding-top:24px;margin-top:8px;font-size:.9rem;color:#9AA6AA}
@media (max-width:860px){.fuss .wrap{grid-template-columns:1fr 1fr}.fuss .marke-sp{grid-column:1 / -1}}
@media (min-width:861px){.fuss{padding-bottom:64px}}

/* Anrufleiste mobil */
.anrufleiste{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;background:var(--weiss);border-top:1px solid var(--stein);
  padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:12px}
.anrufleiste span{font-size:.9rem;color:var(--grau);line-height:1.3}
.anrufleiste .knopf{white-space:nowrap}
@media (max-width:760px){.anrufleiste{display:flex}}

/* ---------- Formulare & Werkzeuge (gemeinsam) ---------- */
.werkzeug{background:var(--weiss);border:1px solid var(--stein);border-radius:4px;padding:clamp(20px,4vw,40px)}
.werkzeug .hinweis{font-size:.92rem;color:var(--grau);margin-top:22px;padding-top:16px;border-top:1px solid var(--stein)}
.feld{margin:0 0 16px}
.feld label{display:block;font-size:.95rem;font-weight:600;margin:0 0 6px}
.feld .opt{font-weight:400;color:var(--grau)}
.feld input,.feld textarea,.feld select{width:100%;font:inherit;font-size:1rem;color:var(--tinte);background:#fff;
  border:1px solid var(--stein-tief);border-radius:3px;padding:11px 12px}
.feld textarea{min-height:96px;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:2px solid var(--petrol);outline-offset:0;border-color:var(--petrol)}
.feldzeile{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:560px){.feldzeile{grid-template-columns:1fr}}
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl button,.chip{font:inherit;font-size:.98rem;color:var(--tinte);background:#fff;border:1px solid var(--stein-tief);border-radius:3px;
  padding:10px 14px;cursor:pointer;text-align:left;transition:border-color .12s,background .12s}
.wahl button:hover,.chip:hover{border-color:var(--tinte)}
.wahl button.aktiv,.chip.aktiv,.wahl button[aria-pressed="true"]{border-color:var(--petrol);background:var(--salbei-hell)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;margin:8px 0 0}
.check input{margin-top:5px;accent-color:var(--petrol)}

/* Zahnschema */
.schema svg{width:100%;max-width:560px;margin:4px auto 0}
.schema .zahn{fill:#fff;stroke:var(--stein-tief);stroke-width:1;cursor:pointer;transition:fill .12s,stroke .12s}
.schema .zahn:hover{stroke:var(--tinte)}
.schema .zahn:focus{outline:none;stroke:var(--petrol);stroke-width:2}
.schema .zahn.aktiv{fill:var(--petrol);stroke:var(--petrol)}
.schema .nr{font-family:var(--sans);font-size:11px;fill:var(--grau);pointer-events:none}
.schema .zahn.aktiv+.nr{fill:#fff}
.schema .kiefer{font-family:var(--sans);font-size:10px;fill:var(--grau)}

/* Fallcheck */
.fc-fortschritt{display:flex;gap:4px;margin:0 0 10px}
.fc-fortschritt span{flex:1;height:3px;background:var(--stein);border-radius:2px;transition:background .2s}
.fc-fortschritt span.fertig{background:var(--salbei)}
.fc-fortschritt span.jetzt{background:var(--petrol)}
.fc-zaehler{font-size:.92rem;color:var(--grau);margin:0 0 18px}
.fc-schritt{display:none}
.fc-schritt.aktiv{display:block}
@media (prefers-reduced-motion:no-preference){.fc-schritt.aktiv{animation:blende .25s ease}}
.fc-frage{font-family:var(--serif);font-size:1.45rem;line-height:1.25;margin:0 0 6px}
.fc-sub{color:var(--grau);margin:0 0 16px;font-size:1rem}
.fc-optionen{display:grid;gap:8px;margin-top:14px}
.fc-optionen button{width:100%;padding:14px 16px}
.fc-kontext{margin-top:14px;font-size:.95rem}
.fc-kontext summary{cursor:pointer;color:var(--petrol)}
.fc-kontext p{margin:8px 0 0;color:var(--grau)}
.fc-zurueck{font:inherit;font-size:.95rem;background:none;border:0;color:var(--grau);padding:12px 0 0;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.fc-ergebnis{display:none}
.fc-ergebnis.aktiv{display:block}
.fc-stufe{display:flex;gap:6px;margin:12px 0 18px}
.fc-stufe span{width:48px;height:6px;background:var(--stein);border-radius:1px}
.fc-stufe span.an{background:var(--petrol)}
.fc-ergebnis h3{font-size:1.7rem;margin:4px 0 10px}
.fc-ergebnis h4{margin:20px 0 4px}
.fc-ergebnis p{margin:0;color:var(--grau);font-size:1rem}
.fc-ergebnis .knopfzeile{margin-top:26px}

/* ---------- Pop-up ---------- */
.dialog{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(26,41,57,.42)}
.dialog.offen{display:flex}
.dialog .karte{position:relative;width:100%;max-width:620px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--weiss);border-radius:4px;padding:clamp(24px,4vw,44px);box-shadow:0 18px 60px rgba(26,41,57,.22)}
.dialog .schliessen{position:absolute;right:10px;top:10px;width:44px;height:44px;background:none;border:0;cursor:pointer;color:var(--grau);font-size:28px;line-height:1}
.dialog .schliessen:hover{color:var(--tinte)}
.dialog h2{font-size:1.9rem;margin:0 0 12px;padding-right:30px}
.dialog .lede{font-size:1.1rem}
@media (prefers-reduced-motion:no-preference){
  .dialog.offen{animation:blende .2s ease}
  .dialog.offen .karte{animation:auf .28s cubic-bezier(.2,.6,.2,1)}
}

/* ---------- Überweisung ---------- */
.modi{display:inline-flex;border:1px solid var(--stein-tief);border-radius:3px;padding:3px;margin:0 0 28px;background:#fff}
.modi button{font:inherit;font-size:.98rem;border:0;background:none;padding:9px 16px;border-radius:2px;cursor:pointer;color:var(--grau)}
.modi button.aktiv{background:var(--tinte);color:var(--weiss)}
.uw-teil{display:none}.uw-teil.aktiv{display:block}
.uw-schritt{display:none}.uw-schritt.aktiv{display:block}
.uw-frage{font-family:var(--serif);font-size:1.35rem;margin:26px 0 10px}
.uw-frage:first-child{margin-top:0}
.uw-hinweis{font-size:.95rem;color:var(--grau);margin:8px 0 0}
.dringlich{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dringlich button{display:flex;flex-direction:column;gap:2px}
.dringlich .t{font-weight:600}
.dringlich .d{font-size:.88rem;color:var(--grau)}
@media (max-width:560px){.dringlich{grid-template-columns:1fr}}
.uw-block{border-top:1px solid var(--stein);padding-top:20px;margin-top:24px}
.uw-block h3{font-family:var(--sans);font-size:1rem;font-weight:600;margin:0 0 14px;display:flex;justify-content:space-between}
.gemerkt{font-weight:400;color:var(--petrol);font-size:.9rem;display:none}
.gemerkt.zeigen{display:inline}
.uw-zusammen{display:flex;gap:10px;flex-wrap:wrap;font-size:1rem;margin:14px 0 0}
.uw-zusammen span{background:var(--papier);border:1px solid var(--stein);border-radius:3px;padding:5px 10px}
.uw-zusammen span.akut{border-color:#A4523F;color:#8A3F2E}
.uw-ausgabe{display:none;margin-top:28px;border-top:1px solid var(--stein);padding-top:22px}
.uw-ausgabe.aktiv{display:block}
.uw-vorschau{white-space:pre-wrap;font-family:var(--sans);font-size:.98rem;background:var(--papier);border:1px solid var(--stein);border-radius:3px;padding:16px 18px;margin:12px 0}
.uw-fehler{display:none;color:#8A3F2E;font-size:.95rem;margin:10px 0 0}
.uw-fehler.zeigen{display:block}
.uw-weg{font-size:1rem}
.uw-weg ol{padding-left:1.2em;margin:8px 0}

/* Schmale Bildschirme */
h1,h2{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.fakten dd{overflow-wrap:anywhere}
@media (max-width:560px){
  .fakten{grid-template-columns:1fr;gap:2px}
  .fakten dt{margin-top:14px}
  .fakten dt:first-child{margin-top:0}
  .werdegang li{grid-template-columns:1fr;gap:2px}
}