/* Praxis am Grandsberg: interaktive Grafiken und Lesehilfen
   Grundsatz: Ruhezustand immer sichtbar. Ohne JavaScript stehen alle Inhalte offen da;
   erst html.mit-js (gesetzt von assets/grafiken.js) blendet Reiter-Inhalte aus.
   Bewegung nur ueber transform, abgeschaltet bei prefers-reduced-motion. */

.nur-js{display:none}
html.mit-js .nur-js{display:revert}

/* ---------- Fakten-Leiste ---------- */
.fakten{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:26px;padding:0;list-style:none}
.fakten li{border:1px solid var(--line2);padding:6px 12px;font-size:14.5px;color:var(--ink);background:transparent}

/* ---------- Abschnittskopf ---------- */
.kopfzeile{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:end}
@media(max-width:820px){.kopfzeile{grid-template-columns:1fr;gap:12px}}
.kopfzeile .text p{color:var(--dim)}

/* ---------- Angebots-Ring ---------- */
.ring{display:grid;grid-template-columns:minmax(260px,420px) minmax(0,1fr);gap:48px;align-items:center;margin-top:34px}
@media(max-width:860px){.ring{grid-template-columns:1fr;gap:26px}}
.ring-bild{position:relative;max-width:420px;width:100%;margin-inline:auto}
.ring-bild svg{display:block;width:100%;height:auto}
.ring-teil{fill:var(--panel);stroke:var(--bg);stroke-width:3;cursor:pointer;transition:transform .35s ease,fill .25s ease;transform-origin:210px 210px}
.ring-teil.aktiv{fill:var(--red);transform:scale(1.04)}
.ring-teil:hover{fill:var(--red)}
.ring-mitte{fill:var(--bg);stroke:var(--line2);stroke-width:1}
.ring-titel{fill:var(--ink);font-family:var(--sans);font-size:19px;font-weight:700;text-anchor:middle}
.ring-hinweis{fill:var(--dim);font-family:var(--sans);font-size:12.5px;text-anchor:middle}
.ring-beschriftung{fill:var(--ink);font-family:var(--sans);font-size:13px;font-weight:700;text-anchor:middle;pointer-events:none}
.ring-teil.aktiv + .ring-beschriftung,.ring-beschriftung.aktiv{fill:var(--on-red,var(--ink))}
.ring-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ring-liste li{border-bottom:1px solid var(--line)}
.ring-liste a{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:14px 4px;text-decoration:none}
.ring-liste a b{font-size:18px}
.ring-liste a span{grid-column:1;color:var(--dim);font-size:15px}
.ring-liste a i{grid-row:1 / span 2;grid-column:2;align-self:center;font-style:normal;color:var(--red-b);font-size:14px;white-space:nowrap}
.ring-liste a:hover,.ring-liste a.aktiv{background:var(--panel)}
.ring-liste a.aktiv b{color:var(--red-b)}

/* ---------- Reiter (Weg, Wegweiser, Phasen) ---------- */
.reiter{margin-top:30px}
.reiter-leiste{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:0;list-style:none;margin:0;padding:0;position:relative;border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(max-width:760px){.reiter-leiste{display:flex;flex-wrap:wrap}.reiter-leiste li{flex:1 1 45%}}
@media(min-width:761px) and (max-width:900px){.reiter-leiste[style*="--n:5"]{display:flex;flex-wrap:wrap}.reiter-leiste[style*="--n:5"] li{flex:1 1 30%}}
.reiter-leiste li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.reiter-leiste button{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:transparent;color:var(--ink);border:0;padding:16px 16px 18px;font-family:var(--sans);font-size:16px;font-weight:700;cursor:pointer;line-height:1.3}
.reiter-leiste button small{font-weight:400;color:var(--dim);font-size:13.5px}
.reiter-leiste button .nr{font-size:13px;letter-spacing:.12em;color:var(--red-b)}
.reiter-leiste button:hover{background:var(--panel)}
.reiter-leiste button[aria-selected="true"]{background:var(--panel);box-shadow:inset 0 -3px 0 var(--red-b)}
.reiter-fortschritt{height:3px;background:var(--line);margin-top:0;overflow:hidden}
.reiter-fortschritt span{display:block;height:100%;background:var(--red-b);transform-origin:left center;transform:scaleX(var(--anteil,1));transition:transform .45s ease}
.reiter-inhalt{border:1px solid var(--line);border-top:0;padding:26px 26px 28px;background:var(--panel)}
.reiter-inhalt + .reiter-inhalt{border-top:1px solid var(--line);margin-top:12px}
html.mit-js .reiter-inhalt + .reiter-inhalt{margin-top:0}
html.mit-js .reiter-inhalt[hidden]{display:none}
.reiter-inhalt h3{font-size:21px}
.reiter-inhalt p{margin-top:10px;max-width:720px}
.reiter-inhalt ul.liste{margin-top:12px}
.reiter-inhalt .klein{margin-top:14px}
.reiter-inhalt .weiter-link{display:inline-block;margin-top:16px;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--red-b);text-underline-offset:4px}
.reiter-nav{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.reiter-nav button{background:transparent;color:var(--ink);border:1px solid var(--line2);padding:8px 14px;font-family:var(--sans);font-size:14px;cursor:pointer}
.reiter-nav button:hover{border-color:var(--red-b)}
.reiter-nav button[disabled]{opacity:.45;cursor:default}
@media(prefers-reduced-motion:no-preference){
  html.mit-js .reiter-inhalt:not([hidden]){animation:herein .35s ease}
}
@keyframes herein{from{transform:translateY(8px)}to{transform:none}}

/* ---------- Erklaergrafik Heute und Frueher ---------- */
.erklaerung{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:28px}
@media(max-width:860px){.erklaerung{grid-template-columns:1fr;gap:20px}}
.erklaerung figure{margin:0}
.erklaerung svg{display:block;width:100%;height:auto}
.erklaerung figcaption{font-size:14px;color:var(--dim);margin-top:10px}
.eb-band{fill:var(--panel);stroke:var(--line2)}
.eb-band.tief{fill:var(--bg)}
.eb-text{fill:var(--ink);font-family:var(--sans);font-size:20px;font-weight:700}
.eb-klein{fill:var(--dim);font-family:var(--sans);font-size:15px}
.eb-linie{stroke:var(--red-b);stroke-width:2;stroke-dasharray:4 5;fill:none}
.eb-punkt{fill:var(--red-b)}
.eb-achse{stroke:var(--line2);stroke-width:1}
@media(prefers-reduced-motion:no-preference){
  .eb-punkt{animation:steigen 3.6s ease-in-out infinite}
  .eb-punkt.p2{animation-delay:1.2s}
  .eb-punkt.p3{animation-delay:2.4s}
  .dfluss-punkt{animation:fliessen 4s linear infinite}
  .dfluss-punkt.p2{animation-delay:2s}
}
@keyframes steigen{0%{transform:translateY(0)}50%{transform:translateY(-104px)}100%{transform:translateY(0)}}
@keyframes fliessen{0%{transform:translateX(0)}100%{transform:translateX(var(--weg,300px))}}

.rahmen-fakten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-left:1px solid var(--line);border-top:1px solid var(--line);margin-top:22px}
@media(max-width:560px){.rahmen-fakten{grid-template-columns:1fr}}
.rahmen-fakten div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 16px}
.rahmen-fakten b{display:block;font-size:16px}
.rahmen-fakten span{display:block;color:var(--dim);font-size:14.5px;margin-top:2px}

/* ---------- Werdegang als Zeitleiste ---------- */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.filter button{background:transparent;color:var(--ink);border:1px solid var(--line2);padding:7px 14px;font-family:var(--sans);font-size:14px;cursor:pointer}
.filter button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.filter-stand{font-size:14px;color:var(--dim);margin-top:10px}
.zeitleiste{list-style:none;margin:26px 0 0;padding:0;position:relative;max-width:860px}
.zeitleiste::before{content:"";position:absolute;left:118px;top:6px;bottom:6px;width:2px;background:var(--line2)}
@media(max-width:560px){.zeitleiste::before{left:7px}}
.zeitleiste li{display:grid;grid-template-columns:100px 1fr;gap:36px;padding:0 0 22px;position:relative}
@media(max-width:560px){.zeitleiste li{grid-template-columns:1fr;gap:2px;padding-left:28px}}
.zeitleiste li::before{content:"";position:absolute;left:112px;top:7px;width:14px;height:14px;background:var(--bg);border:2px solid var(--red-b)}
@media(max-width:560px){.zeitleiste li::before{left:1px}}
.zeitleiste li[data-art="praxis"]::before{background:var(--red-b)}
.zeitleiste .jahr{font-weight:700;color:var(--red-b);font-size:15.5px;text-align:right}
@media(max-width:560px){.zeitleiste .jahr{text-align:left}}
.zeitleiste .art{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--dim);margin-bottom:2px}
.zeitleiste b{display:block;font-size:17px}
.zeitleiste p{color:var(--dim);font-size:15px;margin-top:2px}
@media(prefers-reduced-motion:no-preference){
  .zeitleiste li.neu{animation:herein .35s ease}
}

/* ---------- Qualifikationen ---------- */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));border-left:1px solid var(--line);border-top:1px solid var(--line);margin-top:28px}
.karte{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 20px 22px}
.karte .art{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--red-b);font-weight:700}
.karte b{display:block;font-size:17.5px;margin-top:8px;line-height:1.35}
.karte p{color:var(--dim);font-size:14.5px;margin-top:6px}

/* ---------- Haeufige Fragen ---------- */
.fragen{margin-top:26px;border-top:1px solid var(--line);max-width:860px}
.fragen details{border-bottom:1px solid var(--line)}
.fragen summary{list-style:none;cursor:pointer;padding:16px 40px 16px 0;font-weight:700;font-size:17.5px;position:relative}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:24px;font-weight:400;color:var(--red-b);transition:transform .25s ease}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen details > div{padding:0 0 18px;color:var(--ink);max-width:760px}
.fragen details > div p + p{margin-top:8px}

/* ---------- Datenfluss ---------- */
.dfluss{margin-top:26px}
.dfluss svg{display:block;width:100%;height:auto;max-width:900px}
.dfluss-knoten{fill:var(--panel);stroke:var(--line2)}
.dfluss-knoten.praxis{stroke:var(--red-b);stroke-width:2}
.dfluss-titel{fill:var(--ink);font-family:var(--sans);font-size:15px;font-weight:700;text-anchor:middle}
.dfluss-text{fill:var(--dim);font-family:var(--sans);font-size:12px;text-anchor:middle}
.dfluss-linie{stroke:var(--line2);stroke-width:2;fill:none}
.dfluss-linie.akzent{stroke:var(--red-b)}
.dfluss-punkt{fill:var(--red-b)}
.dfluss-scroll{overflow-x:auto}
.dfluss-scroll svg{min-width:640px}

/* ---------- Kurz gesagt ---------- */
.kurz{border:1px solid var(--line2);padding:20px 22px;margin-top:24px;max-width:860px;background:var(--panel)}
.kurz h2{font-size:20px}
.kurz ul.liste{margin-top:10px}

/* ---------- Kontakt-Leiste oben ---------- */
.schnellkontakt{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-left:1px solid var(--line);border-top:1px solid var(--line);margin-top:28px}
@media(max-width:760px){.schnellkontakt{grid-template-columns:1fr}}
.schnellkontakt > a,.schnellkontakt > div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 18px;text-decoration:none;display:block}
.schnellkontakt .l{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--dim);font-weight:700}
.schnellkontakt .w{margin-top:4px;font-size:18px;font-weight:700}
.schnellkontakt > a:hover{background:var(--panel)}

/* ---------- Rechtstexte als Raster ---------- */
dl.angaben{display:grid;grid-template-columns:minmax(160px,290px) minmax(0,1fr);border-top:1px solid var(--line);margin-top:18px;max-width:900px}
dl.angaben dt,dl.angaben dd{padding:13px 0;border-bottom:1px solid var(--line)}
dl.angaben dt{font-weight:700;padding-right:20px;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
dl.angaben dd ul{list-style:none;margin:0;padding:0}
dl.angaben dd li + li{margin-top:4px}
@media(max-width:620px){dl.angaben{grid-template-columns:1fr}dl.angaben dt{border-bottom:0;padding-bottom:0}}

/* ---------- Testraum-Notiz (assets/testraum-notiz.js, vor dem Livegang entfernen) ---------- */
dialog.testraum-notiz{margin:auto;max-width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;background:var(--panel);color:var(--ink);border:1px solid var(--line2);border-top:3px solid var(--red-b);padding:24px 26px 22px;font-family:var(--sans);box-shadow:0 18px 60px rgba(0,0,0,.45)}
dialog.testraum-notiz::backdrop{background:rgba(0,0,0,.55)}
.testraum-notiz-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--red-b)}
.testraum-notiz h2{font-size:21px;margin-top:8px;line-height:1.25}
.testraum-notiz h3{font-size:16px;margin-top:18px}
.testraum-notiz p{margin-top:10px;font-size:15.5px}
.testraum-notiz ul.liste{margin-top:8px}
.testraum-notiz ul.liste li{font-size:15px}
.testraum-notiz-fuss{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.testraum-notiz-fuss button{cursor:pointer}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
/* Schrift in den Grafiken auf schmalen Schirmen.
   Text in einem SVG schrumpft mit der Flaeche: Bei 390 px Breite kommen aus 12 px
   Quellgroesse nur noch rund 8,5 px an. Hier gegengesteuert, damit jede Beschriftung
   auf dem Telefon mindestens 13 px gross ankommt. */
@media(max-width:640px){
  .ring-titel{font-size:22px}
  .ring-hinweis{font-size:14px}
  .ring-beschriftung{font-size:16px}
  .eb-text{font-size:27px}
  .eb-klein{font-size:20px}
  /* Der Datenfluss laeuft ohnehin in einem seitlich schiebbaren Feld.
     Volle Zeichenbreite statt gestauchter Schrift: Die Beschriftung kommt
     dann in ihrer Entwurfsgroesse an, geschoben wird wie bisher. */
  .dfluss-scroll svg{min-width:900px}
}

@media print{
  html.mit-js .reiter-inhalt[hidden]{display:block!important}
  .nur-js,.reiter-nav,.filter{display:none!important}
}