/* ergoterapia plus · Morgenlicht
   Eine gezeichnete Szene (Himmel, Kämme im Dunst), das Herz als Sonne.
   Das Licht folgt der gewählten Energie. Darunter ruhiges Papier mit einer Linie. */

@font-face {
  font-family: "Young Serif";
  src: url("../fonts/young-serif.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lexend";
  src: url("../fonts/lexend.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

@property --himmel-oben { syntax: "<color>"; inherits: true; initial-value: #F4ECE4; }
@property --himmel-mitte { syntax: "<color>"; inherits: true; initial-value: #FBE8D6; }
@property --himmel-unten { syntax: "<color>"; inherits: true; initial-value: #F8D2B2; }
@property --glanz { syntax: "<number>"; inherits: true; initial-value: 1; }

:root {
  color-scheme: light;
  --papier: #FBF6EE;
  --papier-tief: #F3ECDF;
  --papier-hell: #FFFDF9;
  --tinte: #1F3B39;
  --tinte-leise: #46605B;
  --unterstrich: #5E8479;
  --kartenrand: transparent;
  --linie-farbe: #C3D0C6;
  --kamm-1: #D9DCD2; --kamm-2: #C3CEC4; --kamm-3: #ABBFB5; --kamm-4: #93AEA3;
  --wald: #244B46;
  --zeichen: #8C620F;
  --licht-warm: #FFF3DF;
  --himmel-oben: #F4ECE4; --himmel-mitte: #FBE8D6; --himmel-unten: #F8D2B2;
  --glanz: 1;
  --sonne-tief: 0rem;

  --titel: "Young Serif", Georgia, serif;
  --schrift: "Lexend", "Segoe UI", system-ui, sans-serif;
  --rand: max(1.5rem, calc((100vw - 74rem) / 2));
  --zeitspalte: 9rem;
  --weich: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Das Licht folgt der Energie: weniger Energie, tiefere Sonne, stilleres Licht */
[data-energie="2"] { --himmel-oben: #E4DFDE; --himmel-mitte: #F6DFCD; --himmel-unten: #F1C6A8; --glanz: 0.7; --sonne-tief: 1.75rem; }
[data-energie="1"] { --himmel-oben: #D8D5D8; --himmel-mitte: #EAD3C8; --himmel-unten: #E3B7A2; --glanz: 0.42; --sonne-tief: 3.5rem; }

/* Gedimmt: dieselbe Landschaft vor Tagesanbruch */
@media (prefers-color-scheme: dark) {
  :root:not([data-licht="hell"]) {
    color-scheme: dark;
    --papier: #10272A; --papier-tief: #173236; --papier-hell: #1B383C; --tinte: #ECE4D4; --tinte-leise: #A9BDB4; --linie-farbe: #3F6466; --kartenrand: rgba(236, 228, 212, 0.14);
    --kamm-1: #2C4A50; --kamm-2: #254247; --kamm-3: #1E393D; --kamm-4: #183035;
    --wald: #E6DCC6; --licht-warm: #F6E7C8; --zeichen: #C29338;
    --himmel-oben: #16303A; --himmel-mitte: #1C3A43; --himmel-unten: #17333B;
  }
  :root:not([data-licht="hell"])[data-energie="2"] { --himmel-oben: #142B34; --himmel-mitte: #19343C; --himmel-unten: #152E35; }
  :root:not([data-licht="hell"])[data-energie="1"] { --himmel-oben: #12262E; --himmel-mitte: #162E35; --himmel-unten: #13292F; }
}
:root[data-licht="gedimmt"] {
  color-scheme: dark;
  --papier: #10272A; --papier-tief: #173236; --papier-hell: #1B383C; --tinte: #ECE4D4; --tinte-leise: #A9BDB4; --linie-farbe: #3F6466; --kartenrand: rgba(236, 228, 212, 0.14);
  --kamm-1: #2C4A50; --kamm-2: #254247; --kamm-3: #1E393D; --kamm-4: #183035;
  --wald: #E6DCC6; --licht-warm: #F6E7C8; --zeichen: #C29338;
  --himmel-oben: #16303A; --himmel-mitte: #1C3A43; --himmel-unten: #17333B;
}
:root[data-licht="gedimmt"][data-energie="2"] { --himmel-oben: #142B34; --himmel-mitte: #19343C; --himmel-unten: #152E35; }
:root[data-licht="gedimmt"][data-energie="1"] { --himmel-oben: #12262E; --himmel-mitte: #162E35; --himmel-unten: #13292F; }

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--schrift); background: var(--papier); color: var(--tinte);
  -webkit-text-size-adjust: 100%; scrollbar-color: var(--kamm-4) var(--papier); scroll-padding-top: 1.5rem;
  transition: --himmel-oben 1.4s var(--weich), --himmel-mitte 1.4s var(--weich), --himmel-unten 1.4s var(--weich), --glanz 1.4s var(--weich);
}
body { margin: 0; font-size: 1.0625rem; line-height: 1.7; font-weight: 330; }
strong, b, th { font-weight: 560; }
::selection { background: var(--wald); color: var(--papier); }
/* gedimmt: Karten heben sich mit einer feinen Linie vom Grund ab */
.einstieg, .wahl, .plan, .dokumente, .gleis, .lesetext { outline: 1px solid var(--kartenrand); outline-offset: -1px; }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; border-radius: 4px; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; text-decoration-color: var(--unterstrich); }
a:hover { text-decoration-color: currentColor; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.sprung { position: absolute; left: 0.5rem; top: -6rem; background: var(--papier); color: var(--tinte); padding: 0.6rem 1rem; z-index: 10; border-radius: 8px; }
.sprung:focus { top: 0.5rem; }

/* ---------- Himmel und Kämme ----------
   Der Himmel ist der Grund der Seite. Die Kämme stehen im Textfluss direkt nach dem Titelbereich,
   darunter beginnt das Papier. So liegt nie eine Kammlinie hinter einer Textzeile. */
.seite {
  position: relative;
  background: linear-gradient(180deg, var(--himmel-oben) 0, var(--himmel-mitte) 20rem, var(--himmel-unten) 50rem, var(--himmel-unten) 100%);
}
.kaemme { position: relative; height: 15rem; margin: 1.5rem calc(-1 * var(--rand)) 0; z-index: 0; pointer-events: none; }
.kaemme svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kaemme::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 20000rem; background: var(--papier); }
.kaemme ~ * { position: relative; z-index: 1; }
.kaemme .k1 { fill: var(--kamm-1); } .kaemme .k2 { fill: var(--kamm-2); }
.kaemme .k3 { fill: var(--kamm-3); } .kaemme .k4 { fill: var(--kamm-4); }
.kaemme .k5 { fill: var(--papier); }
.kaemme path { transition: fill 1.4s var(--weich); }
.kaemme + * { margin-top: 2.5rem; }
.kaemme:has(+ .linie) { height: 8.5rem; }
.kaemme:has(+ .lesetext) { height: 11rem; }

/* ---------- Kopfzeile ---------- */
.tafel {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 2.5rem;
  padding: 1.5rem var(--rand) 0; font-size: 1.0625rem; line-height: 1.4;
}
.schild { display: block; width: 15rem; flex: none; }
.schild img { width: 100%; }
.tafel nav { margin-left: auto; }
.strecke { display: flex; gap: 1.9rem; }
.strecke a { text-decoration: none; padding: 0.6rem 0; display: block; border-bottom: 2px solid transparent; }
.strecke a:hover { border-bottom-color: var(--kamm-4); }
.strecke a[aria-current="page"] { border-bottom-color: var(--zeichen); }
.zu-seiten, .menue-ruf { display: none; }

.licht { display: flex; align-items: center; gap: 0; font-size: 0.9375rem; background: color-mix(in srgb, var(--papier) 55%, transparent); border-radius: 999px; padding: 3px; }
.licht span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.licht button { font: inherit; color: var(--tinte); background: none; border: 0; cursor: pointer; padding: 0.3rem 0.85rem; min-height: 2.75rem; border-radius: 999px; }
.licht button[aria-pressed="true"] { background: var(--papier); font-weight: 560; box-shadow: 0 1px 3px rgba(31, 59, 57, 0.18), 0 0 0 1.5px color-mix(in srgb, var(--zeichen) 70%, transparent); }

/* ---------- Regler: das Herz als Sonne ---------- */
.regler { position: fixed; z-index: 3; right: var(--rand); top: 7.5rem; width: 16rem; text-align: center; display: flex; flex-direction: column; }
.recht .regler { display: none; }
@media (min-width: 68.01rem) {
  .stufenlos .regler { position: absolute; }
  .stufenlos .gleise { max-width: none; }
  .stufenlos .kopf { min-height: 13rem; }
}
.regler-feld { display: flex; flex-direction: column; align-items: center; order: 1; }
.regler h2 { font-family: var(--titel); font-weight: 400; font-size: 1.125rem; line-height: 1.3; margin: 0 0 2.25rem; text-wrap: balance; position: relative; z-index: 1; }
.regler-feld .herz { order: -1; }
.herz {
  width: 9rem; height: 9rem; display: block; border-radius: 50%;
  transform: translateY(var(--sonne-tief)); transition: transform 1.4s var(--weich), box-shadow 1.4s var(--weich);
  box-shadow: 0 0 0 calc(1.1rem * var(--glanz)) color-mix(in srgb, var(--licht-warm) 38%, transparent),
              0 0 0 calc(2.6rem * var(--glanz)) color-mix(in srgb, var(--licht-warm) 20%, transparent),
              0 0.5rem calc(5rem * var(--glanz) + 1rem) color-mix(in srgb, #FFD9A8 70%, transparent);
  margin-bottom: 3.5rem;
}
.herz circle { fill: var(--zeichen); }
.herz path { stroke: var(--zeichen); stroke-width: 22; stroke-linejoin: round; transition: fill 0.9s var(--weich); }
.herz {
  --voll: var(--licht-warm); --leer: #A27A22;
  --s1: var(--voll); --s2: var(--voll); --s3: var(--voll); --s4: var(--voll); --s5: var(--voll); --s6: var(--voll);
  --s7: var(--voll); --s8: var(--voll); --s9: var(--voll); --s10: var(--voll); --s11: var(--voll); --s12: var(--voll);
}
.herz path:nth-of-type(1) { fill: var(--s1); } .herz path:nth-of-type(2) { fill: var(--s2); }
.herz path:nth-of-type(3) { fill: var(--s3); } .herz path:nth-of-type(4) { fill: var(--s4); }
.herz path:nth-of-type(5) { fill: var(--s5); } .herz path:nth-of-type(6) { fill: var(--s6); }
.herz path:nth-of-type(7) { fill: var(--s7); } .herz path:nth-of-type(8) { fill: var(--s8); }
.herz path:nth-of-type(9) { fill: var(--s9); } .herz path:nth-of-type(10) { fill: var(--s10); }
.herz path:nth-of-type(11) { fill: var(--s11); } .herz path:nth-of-type(12) { fill: var(--s12); }
[data-energie="2"] .herz { --s8: var(--leer); --s9: var(--leer); --s10: var(--leer); --s11: var(--leer); --s12: var(--leer); }
[data-energie="1"] .herz {
  --s4: var(--leer); --s5: var(--leer); --s6: var(--leer); --s7: var(--leer);
  --s8: var(--leer); --s9: var(--leer); --s10: var(--leer); --s11: var(--leer); --s12: var(--leer);
}

.stufen { border: 0; padding: 4px; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; background: color-mix(in srgb, var(--papier) 72%, transparent); border-radius: 1.25rem; }
.stufen legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.stufen label { display: grid; gap: 0; padding: 0.45rem 0.25rem; cursor: pointer; border-radius: 1rem; line-height: 1.25; font-size: 1rem; min-height: 3.25rem; align-content: center; transition: background 0.3s; }
.stufen input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stufen label:hover { background: color-mix(in srgb, var(--papier) 60%, transparent); }
.stufen label:has(input:checked) { background: var(--papier); font-weight: 560; box-shadow: 0 1px 4px rgba(31, 59, 57, 0.2); }
.stufen label:has(input:focus-visible) { outline: 3px solid var(--tinte); outline-offset: 2px; }
.stufen .dauer { font-size: 0.9375rem; color: var(--tinte-leise); font-weight: 400; }
.regler-hinweis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html:not(.js) .stufen, html:not(.js) .licht, .regler-eine, .stufenlos .stufen, .stufenlos .regler-hinweis { display: none; }
.stufenlos .regler-eine { display: block; font-size: 1rem; }
.stufenlos .regler h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html.js .regler-ohne-js { display: none; }
.regler-ohne-js { font-size: 0.9375rem; color: var(--tinte-leise); }

/* ---------- Inhalt ---------- */
.bogen { position: relative; z-index: 1; padding: 3.5rem var(--rand) 3rem; min-width: 0; overflow: clip; view-transition-name: bogen; }
.kopf { max-width: min(46rem, 100% - 20rem); min-height: 20rem; }
.start .kopf { min-height: 16rem; }
.nicht-trennen { white-space: nowrap; }
.recht .kopf { min-height: 0; }
.kopf:has(+ .wahl) { min-height: 0; margin-bottom: 1.75rem; }
.kopf h1 {
  font-family: var(--titel); font-weight: 400; font-size: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);
  line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance;
}
.kopf .zusatz { margin-top: 1rem; font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.4375rem); line-height: 1.5; max-width: 26ch; text-wrap: balance; }
.kopf .zusatz.breit { max-width: 34ch; }

.einstiege { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: calc(100% - 20rem); }
.kaemme + .einstiege { margin-top: -11rem; }
.einstieg {
  position: relative; padding: 1.4rem 1.6rem 1.5rem; display: grid; gap: 0.25rem; align-content: start;
  border-radius: 1.5rem; background: var(--papier-hell); box-shadow: 0 1.25rem 2.75rem -1.25rem rgba(31, 59, 57, 0.35);
  transition: transform 0.35s var(--weich), box-shadow 0.35s var(--weich);
}
.einstieg:hover, .einstieg:focus-within { transform: translateY(-4px); box-shadow: 0 1.75rem 3rem -1.25rem rgba(31, 59, 57, 0.42); }
.einstieg h2 { font-size: 1rem; font-weight: 400; line-height: 1.3; color: var(--tinte-leise); }
.einstieg .gross { font-family: var(--schrift); font-weight: 520; font-size: clamp(1.4375rem, 1.2rem + 0.7vw, 1.6875rem); line-height: 1.35; margin-bottom: 0.2rem; }
.einstieg .gross a { text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem; }
.einstieg .gross a[href$="#verordnen"] { font-family: var(--titel); font-weight: 400; }
.einstieg .gross a::after { content: ""; position: absolute; inset: 0; border-radius: 1.5rem; }
.einstieg .gross a:focus-visible { outline: none; }
.einstieg .gross a:focus-visible::after { outline: 3px solid var(--tinte); outline-offset: 3px; }
.zeichen-klein { width: 1.4rem; height: 1.4rem; flex: none; fill: none; stroke: var(--zeichen); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.zeichen-klein.pfeil { transition: transform 0.35s var(--weich); }
.einstieg:hover .pfeil { transform: translateX(4px); }
.einstieg p { max-width: 32ch; font-size: 1.0625rem; line-height: 1.5; }
.einstieg p a[href^="mailto:"] { position: relative; z-index: 1; }

/* Angebot: der Überblick ist die Linie im Kleinen. Dieselben Punkte, dieselben Zeiten wie weiter unten. */
.wahl {
  position: relative; z-index: 1; max-width: min(47rem, 100% - 20rem); background: var(--papier-hell); border-radius: 1.5rem; padding: 1.1rem 0 0.9rem;
  box-shadow: 0 1.25rem 2.75rem -1.25rem rgba(31, 59, 57, 0.35);
}
.wahl::before { content: "Auf dieser Seite"; display: block; padding: 0 1.6rem 0.35rem calc(var(--zeitspalte) + 2.25rem); font-size: 0.9375rem; color: var(--tinte-leise); }
.wahl::after { content: "Lesezeit"; position: absolute; top: 1.1rem; left: 0; width: var(--zeitspalte); text-align: right; padding-right: 1.25rem; font-size: 0.9375rem; color: var(--tinte-leise); }
.wahl .nach { display: none; }
.wahl a { display: grid; grid-template-columns: var(--zeitspalte) 1fr; align-items: stretch; text-decoration: none; padding-right: 1.6rem; transition: background 0.3s; }
.wahl a:hover, .wahl a:focus-visible { background: var(--papier-tief); }
.wahl .wann { text-align: right; padding: 0.8rem 1.25rem 0 0; font-size: 1rem; line-height: 1.4; color: var(--tinte-leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wahl .was { padding: 0.55rem 1rem 0.6rem 2.25rem; position: relative; display: grid; }
.wahl .was::before { content: ""; position: absolute; z-index: 1; left: -0.35rem; top: 1.05rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--zeichen); box-shadow: 0 0 0 4px var(--papier-hell); }
.wahl a:hover .was::before, .wahl a:focus-visible .was::before { box-shadow: 0 0 0 4px var(--papier-tief); }
/* die Linie läuft nur von Punkt zu Punkt */
.wahl li:not(:last-child) .was::after { content: ""; position: absolute; left: -1px; top: 1.4rem; height: 100%; border-left: 2px solid color-mix(in srgb, var(--tinte) 22%, transparent); }
.wahl .name { font-family: var(--titel); font-size: 1.25rem; line-height: 1.4; }
.wahl .kurz { color: var(--tinte-leise); font-size: 1rem; line-height: 1.4; }
.wahl li { transition: opacity 0.6s var(--weich); }
/* was die gewählte Energie ausblendet, tritt auch im Überblick zurück */
[data-energie="1"] .wahl li[data-ab="2"], [data-energie="1"] .wahl li[data-ab="3"], [data-energie="2"] .wahl li[data-ab="3"] { opacity: 0.45; }
html:not(.js) .wahl a { grid-template-columns: 1.6rem 1fr; }
.wahl + .kaemme { height: 9rem; margin-top: -10rem; }
.wahl + .kaemme + .linie { margin-top: 5rem; }

.linie { max-width: min(54rem, 100% - 20rem); }
.start .linie { margin-top: 4.5rem; }
.halt, .stopp { display: grid; grid-template-columns: var(--zeitspalte) minmax(0, 1fr); }
.zeit { padding-right: 1.25rem; text-align: right; font-size: 1rem; color: var(--tinte-leise); padding-top: 0.7rem; line-height: 1.4; }
.inhalt { border-left: 1.5px solid var(--linie-farbe); padding: 0 0 4.25rem 2.25rem; position: relative; min-width: 0; }
.inhalt::before {
  content: ""; position: absolute; left: -0.45rem; top: 0.8rem; width: 0.8rem; height: 0.8rem; border-radius: 50%;
  background: var(--zeichen); box-shadow: 0 0 0 5px var(--papier);
}
.inhalt > h2 { font-family: var(--titel); font-weight: 400; font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.8125rem); line-height: 1.3; margin-bottom: 0.8rem; text-wrap: balance; }
.inhalt > h2 + .unter { margin-top: -0.5rem; margin-bottom: 1rem; color: var(--tinte-leise); }
.inhalt h3 { font-size: 1.125rem; font-weight: 560; margin: 1.75rem 0 0.4rem; }
.inhalt p, .inhalt ul, .inhalt ol, .inhalt dl { max-width: 54ch; }
.inhalt ul.dokumente { max-width: none; }
a[href^="mailto:"] { white-space: nowrap; }
.inhalt p + p, .inhalt p + ul, .inhalt ul + p, .inhalt p + .plan, .inhalt .plan + p, .inhalt p + .weiter { margin-top: 0.9rem; }
.inhalt ul.punkte li { padding-left: 1.5rem; position: relative; }
.inhalt ul.punkte li + li { margin-top: 0.35rem; }
.inhalt ul.punkte li::before { content: ""; position: absolute; left: 0.1rem; top: 0.68em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--kamm-4); }
.linie > :last-child .inhalt { padding-bottom: 1rem; }

/* Halt «Hier können Sie aufhören» */
.linie .stopp .inhalt { padding: 0 1.5rem 5.25rem 3.75rem; isolation: isolate; }
.stopp .inhalt::after { content: ""; position: absolute; z-index: -1; left: 2.25rem; right: 0; top: -1.25rem; bottom: 4rem; background: var(--papier-tief); border-radius: 1.25rem; }
.linie .stopp .inhalt::before { top: 0.45rem; }
.werdegang .stopp .inhalt { padding-top: 2.25rem; }
.werdegang .stopp .inhalt::after { top: 1rem; }
.werdegang .stopp .inhalt::before { top: 2.7rem; }
.stopp .inhalt::before { background: var(--papier); border: 1.5px solid var(--zeichen); box-shadow: 0 0 0 5px var(--papier); }
.stopp .inhalt > p:first-child { font-family: var(--titel); font-size: 1.1875rem; line-height: 1.4; }
.stopp .mehr { color: var(--tinte-leise); margin-top: 0.2rem; }
.stopp button {
  font: inherit; font-weight: 560; margin-top: 1rem; cursor: pointer; background: var(--wald); color: var(--papier);
  border: 0; padding: 0.7rem 1.5rem; min-height: 2.9rem; border-radius: 999px; transition: transform 0.3s var(--weich), box-shadow 0.3s;
}
.stopp button:hover { transform: translateY(-2px); box-shadow: 0 0.6rem 1.2rem -0.5rem rgba(31, 59, 57, 0.5); }
html:not(.js) .stopp button { display: none; }

[data-energie="1"] [data-stufe="2"], [data-energie="1"] [data-stufe="3"], [data-energie="2"] [data-stufe="3"] { display: none; }
[data-energie="1"] .stopp[data-nach="2"] { display: none; }
[data-energie="3"] .stopp button, [data-energie="2"] .stopp[data-nach="1"] button { display: none; }
[data-energie="3"] .stopp .mehr, [data-energie="2"] .stopp[data-nach="1"] .mehr { display: none; }

/* Tabellen */
.plan { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--papier-hell); border-radius: 1rem; padding: 0.35rem 1.5rem; box-shadow: 0 0.9rem 2rem -1.2rem rgba(31, 59, 57, 0.3); font-variant-numeric: tabular-nums; }
.plan tr:last-child th, .plan tr:last-child td { border-bottom: 0; }
.plan caption { text-align: left; font-weight: 560; padding: 0 0 0.75rem; }
.plan th, .plan td { text-align: left; vertical-align: top; padding: 0.7rem 1.5rem 0.7rem 0; border-bottom: 1.5px solid var(--linie-farbe); font-weight: 400; }
.plan th[scope="row"] { font-weight: 560; white-space: nowrap; width: 1%; }
.plan td:last-child, .plan th:last-child { padding-right: 0; }
.plan .zahl { font-weight: 560; white-space: nowrap; }
.uebersicht { max-width: calc(100% - 20rem); margin-top: -3rem; position: relative; z-index: 1; }
.uebersicht caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.weiter { font-weight: 560; }
.weiter a { text-decoration-color: var(--zeichen); text-decoration-thickness: 2px; }
.dokumente { background: var(--papier-hell); border-radius: 1rem; padding: 0.5rem 1.5rem; box-shadow: 0 0.9rem 2rem -1.2rem rgba(31, 59, 57, 0.3); }
.dokumente li + li { border-top: 1.5px solid var(--linie-farbe); }
.dokumente a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; text-decoration: none; font-weight: 560; }
.dokumente a span:first-child { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; text-decoration-color: var(--zeichen); text-decoration-thickness: 2px; }
.dokumente a:hover span:first-child { text-decoration-color: currentColor; }
.dokumente .art { font-weight: 400; color: var(--tinte-leise); white-space: nowrap; }
.dokumente a:not(:has(.art)) { font-weight: 330; }
.dokumente a:not(:has(.art)) span:first-child { text-decoration-color: var(--unterstrich); text-decoration-thickness: 1.5px; }
.inhalt .plan + p { margin-top: 1.75rem; }

.spruenge { display: none; }
.zusatzblock { border-top: 1.5px solid var(--linie-farbe); margin-top: 1.75rem; padding-top: 0.9rem; }
.zusatzblock p { max-width: 44ch; }
.zusatzblock h3 { font-size: 1.125rem; font-weight: 560; margin-bottom: 0.25rem; }
.rand-notiz { font-size: 1rem; }
.foto { margin: 0; }
.fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.1rem; align-items: start; }
.fotos img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.foto img { border-radius: 1rem; }
.foto figcaption { font-size: 1rem; color: var(--tinte-leise); margin-top: 0.5rem; }

/* Zwei Wege (Anmeldung) */
.gleise { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; max-width: calc(100% - 20rem); margin-top: -7rem !important; }
.gleis { padding: 2rem 2.25rem 2.5rem; background: var(--papier-hell); border-radius: 1.5rem; box-shadow: 0 1.25rem 2.75rem -1.25rem rgba(31, 59, 57, 0.35); }
.gleis .dokumente { background: var(--papier-tief); box-shadow: none; }
.gleis > h2 { font-family: var(--titel); font-weight: 400; font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.8125rem); line-height: 1.3; margin-bottom: 1.5rem; }
.schritte { counter-reset: schritt; display: grid; gap: 1.5rem; }
.schritte > li { counter-increment: schritt; display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.85rem; }
.schritte > li::before {
  content: counter(schritt); font-family: var(--schrift); font-weight: 560; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--zeichen); color: var(--papier-hell); display: grid; place-items: center; font-size: 1.0625rem;
}
.schritte h3 { font-size: 1.125rem; font-weight: 560; margin: 0.15rem 0 0.25rem; }
.schritte p { max-width: 40ch; }
.schritte .dokumente { margin-top: 0.75rem; }

/* Person */
.person { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 2.75rem; align-items: end; max-width: calc(100% - 20rem); }
.person img { width: 100%; border-radius: 1.5rem; box-shadow: 0 1.5rem 3rem -1.5rem rgba(31, 59, 57, 0.45); }
.person { min-height: 19rem; }
.person .kopf { max-width: none; min-height: 0; }
.person .kopf h1 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.875rem); }
.werdegang .zeit { white-space: normal; line-height: 1.35; padding-top: 0.3rem; }
.werdegang .inhalt { padding-bottom: 1.6rem; }
.werdegang .inhalt::before { width: 0.6rem; height: 0.6rem; left: -0.35rem; top: 0.75rem; }
.werdegang .inhalt:has(> h2)::before, .linie .stopp .inhalt::before { width: 0.8rem; height: 0.8rem; left: -0.45rem; }
.werdegang .abschnitt .inhalt { padding-top: 1.5rem; padding-bottom: 1.25rem; }
.werdegang .abschnitt .inhalt::before { top: 2.35rem; width: 0.8rem; height: 0.8rem; left: -0.45rem; }
.werdegang .abschnitt h2 { margin: 0; }
.wegweiser .abschnitt .inhalt::before { top: 0.85rem; }

.adresse { font-style: normal; font-family: var(--schrift); font-weight: 520; font-size: clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem); line-height: 1.55; }
.adresse { font-variant-numeric: lining-nums; }
.adresse a { text-decoration-color: var(--zeichen); text-decoration-thickness: 2px; text-underline-offset: 0.34em; }

/* Solidaritätsseite: Sonnenaufgang, die eine laute Seite */
.laut { --himmel-oben: #F1DFD0; --himmel-mitte: #F1CDB3; --himmel-unten: #ECBBA3; --kamm-1: #ECCDBC; --kamm-2: #E5C1B1; --kamm-3: #DDB5A7; --kamm-4: #D3A99D; }
.laut .fuss, .laut .tafel nav, .laut .licht { --kamm-1: #D9DCD2; --kamm-2: #C3CEC4; --kamm-3: #ABBFB5; }
:root[data-licht="gedimmt"] .laut { --himmel-oben: #261F2A; --himmel-mitte: #40303A; --himmel-unten: #5E3F3E; --kamm-1: #553B3E; --kamm-2: #47343A; --kamm-3: #392D35; --kamm-4: #2B2630; }
:root[data-licht="gedimmt"] .laut .fuss, :root[data-licht="gedimmt"] .laut .tafel nav, :root[data-licht="gedimmt"] .laut .licht { --kamm-1: #2C4A50; --kamm-2: #254247; --kamm-3: #1E393D; }
:root[data-licht="gedimmt"] .laut .kopf h1, :root[data-licht="gedimmt"] .laut .kopf .zusatz { color: var(--tinte); }
@media (prefers-color-scheme: dark) {
  :root:not([data-licht="hell"]) .laut { --himmel-oben: #261F2A; --himmel-mitte: #40303A; --himmel-unten: #5E3F3E; --kamm-1: #553B3E; --kamm-2: #47343A; --kamm-3: #392D35; --kamm-4: #2B2630; }
  :root:not([data-licht="hell"]) .laut .fuss, :root:not([data-licht="hell"]) .laut .tafel nav, :root:not([data-licht="hell"]) .laut .licht { --kamm-1: #2C4A50; --kamm-2: #254247; --kamm-3: #1E393D; }
  :root:not([data-licht="hell"]) .laut .kopf h1, :root:not([data-licht="hell"]) .laut .kopf .zusatz { color: var(--tinte); }
}
.zahl-gross { font-family: var(--titel); font-size: clamp(5.5rem, 3rem + 9vw, 10rem); line-height: 1.05; letter-spacing: -0.02em; display: block; color: var(--zeichen); margin-bottom: 2rem; }
:root[data-licht="gedimmt"] .zahl-gross { color: var(--licht-warm); }
@media (prefers-color-scheme: dark) { :root:not([data-licht="hell"]) .zahl-gross { color: var(--licht-warm); } }
.laut .kopf h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.125rem); max-width: 18ch; margin-top: 0; }

/* Lesetext (Recht) */
.lesetext { max-width: calc(54ch + 5.5rem); background: var(--papier-hell); border-radius: 1.5rem; padding: 2.25rem 2.75rem 2.75rem; box-shadow: 0 1.25rem 2.75rem -1.25rem rgba(31, 59, 57, 0.35); margin-top: -5rem !important; }
.lesetext p { max-width: 54ch; }
.lesetext h2 { font-family: var(--schrift); font-weight: 560; font-size: 1.1875rem; margin: 2.25rem 0 0.5rem; line-height: 1.4; }
.lesetext p + p { margin-top: 0.9rem; }

/* Schluss: die Kämme kehren wieder, darauf Kontakt und Recht */
.fuss { margin: 6rem calc(-1 * var(--rand)) -3rem; position: relative; z-index: 1; }
.fuss-kaemme { height: 9rem; }
.fuss-kaemme svg { width: 100%; height: 100%; display: block; }
.fuss-kaemme .k1 { fill: var(--kamm-1); } .fuss-kaemme .k2 { fill: var(--kamm-2); } .fuss-kaemme .k3 { fill: var(--kamm-3); }
.fuss-inhalt { background: var(--kamm-3); margin-top: -1px; padding: 1.5rem var(--rand) 3rem; display: grid; grid-template-columns: auto auto 1fr; gap: 1rem 4rem; align-items: end; font-size: 1rem; line-height: 1.6; }
.fuss-ruf { font-family: var(--schrift); font-weight: 520; font-size: 1.125rem; line-height: 1.6; }
.fuss a { text-decoration-color: var(--tinte); text-decoration-thickness: 1px; text-decoration-skip-ink: none; }
.fuss-recht { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; justify-content: flex-end; align-items: baseline; }
.fuss .gebaut { font-size: 0.9375rem; }

/* Gedimmt: das Logo aufhellen, damit sein Gold auf dem Nachthimmel trägt */
:root[data-licht="gedimmt"] .schild img { filter: brightness(1.55) saturate(0.6); }
:root[data-licht="gedimmt"] .herz { box-shadow: 0 0.3rem calc(3rem * var(--glanz) + 0.75rem) color-mix(in srgb, var(--zeichen) 38%, transparent); }
:root[data-licht="gedimmt"] .stufen label:has(input:checked) { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--zeichen) 70%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-licht="hell"]) .schild img { filter: brightness(1.55) saturate(0.6); }
  :root:not([data-licht="hell"]) .herz { box-shadow: 0 0.3rem calc(3rem * var(--glanz) + 0.75rem) color-mix(in srgb, var(--zeichen) 38%, transparent); }
  :root:not([data-licht="hell"]) .stufen label:has(input:checked) { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--zeichen) 70%, transparent); }
}

/* ---------- Schmal ---------- */
@media (max-width: 68rem) {
  .kopf, .einstiege, .person, .linie, .gleise, .wahl { max-width: none; }
  .wahl { margin-top: 1.5rem; margin-left: 0; max-width: none; padding: 0.9rem 0 1rem; }
  .wahl::before { padding: 0 1.15rem 0.3rem 2.6rem; }
  .wahl::after { content: "Lesezeit bis dahin"; top: 0.9rem; left: auto; right: 1.15rem; width: auto; padding: 0; }
  .wahl a { grid-template-columns: 1fr auto; padding: 0 1.15rem 0 0; align-items: baseline; }
  .wahl .was { display: block; }
  .wahl .was { grid-column: 1; grid-row: 1; padding: 0.6rem 0.5rem 0.6rem 2.6rem; min-width: 0; }
  .wahl .was::before { left: 1.05rem; top: 1.1rem; }
  .wahl li:not(:last-child) .was::after { left: calc(1.4rem - 1px); top: 1.45rem; }
  .wahl .wann { grid-column: 2; grid-row: 1; padding: 0; font-size: 0.9375rem; }
  .wahl .name { font-size: 1.0625rem; line-height: 1.4; }
  .wahl .kurz { display: none; }
  .wahl + .kaemme { height: 7rem; margin-top: -5rem; }
  .wahl + .kaemme + .linie { margin-top: 3rem; }
  .seite { background: linear-gradient(180deg, var(--himmel-oben) 0, var(--himmel-mitte) 22rem, color-mix(in srgb, var(--himmel-unten) 55%, var(--himmel-mitte)) 60rem, var(--himmel-unten) 100%); }
  .einstieg { padding: 1.1rem 1.2rem 1.2rem; }
  .start .kaemme { height: 6rem; }
  .seite { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .kopf, .start .kopf, .person { min-height: 0; }
  .kaemme { height: 9rem; }
  .kaemme + .einstiege { margin-top: 1rem; }
  .schritte > li { display: block; }
  .schritte > li::before { float: left; margin: -0.15rem 0.7rem 0.3rem 0; }
  .schritte h3 { margin: 0 0 0.6rem; line-height: 2rem; }
  .schritte li > div > p { clear: both; }
  .gleis .dokumente { padding: 0.1rem 1rem; }
  .fotos { grid-template-columns: minmax(0, 1fr); }
  .person .kopf h1 { font-size: 1.875rem; }
  .tafel { display: contents; }
  .schild { grid-column: 1; grid-row: 1; width: 12.5rem; margin: 1rem 0 0 var(--rand); position: relative; z-index: 2; align-self: center; }
  .zu-seiten {
    display: inline-flex; align-items: center; gap: 0.6rem; grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
    margin: 1rem var(--rand) 0 0; padding: 0.5rem 1rem 0.5rem 0.9rem; min-height: 2.75rem; position: relative; z-index: 22;
    font-size: 1.0625rem; font-weight: 560; text-decoration: none; border-radius: 999px;
    background: color-mix(in srgb, var(--papier) 72%, transparent);
  }
  .zu-seiten-striche { width: 1.1rem; height: 0.7rem; border-top: 2px solid var(--tinte); border-bottom: 2px solid var(--tinte); transition: transform 0.3s var(--weich); }
  .menue-offen .zu-seiten-striche { height: 0; border-bottom: 0; transform: rotate(45deg); box-shadow: 0 0 0 0 transparent; position: relative; }
  .menue-offen .zu-seiten-striche::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; border-top: 2px solid var(--tinte); transform: rotate(90deg); }
  .menue-offen .zu-seiten { position: fixed; top: 0; right: 0; background: var(--papier-hell); }

  /* Mit Skript: Seitenliste und Licht sind das Menü, nicht mehr am Fuss */
  html.js .tafel nav, html.js .licht { display: none; }
  html.menue-offen { overflow: hidden; }
  html.menue-offen .tafel nav {
    display: block; position: fixed; inset: 0; z-index: 20; overflow-y: auto; margin: 0;
    padding: 6.5rem var(--rand) 8rem;
    background: linear-gradient(180deg, var(--himmel-oben) 0, var(--himmel-mitte) 55%, var(--himmel-unten) 100%);
  }
  html.menue-offen .strecke { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  html.menue-offen .strecke a {
    display: grid; grid-template-columns: 1.4rem 1fr; align-items: center; gap: 1rem; margin: 0; padding: 0.55rem 0; min-height: 3.6rem;
    font-family: var(--titel); font-size: 1.75rem; line-height: 1.25; border: 0; position: relative;
  }
  html.menue-offen .strecke a::before { content: ""; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid var(--zeichen); justify-self: center; background: var(--himmel-mitte); position: relative; z-index: 1; }
  html.menue-offen .strecke a[aria-current="page"]::before { background: var(--zeichen); }
  html.menue-offen .strecke li + li a::after { content: ""; position: absolute; left: calc(0.7rem - 1px); top: -50%; height: 100%; border-left: 2px solid color-mix(in srgb, var(--tinte) 32%, transparent); }
  html.menue-offen .strecke a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--zeichen); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
  html.menue-offen .licht {
    display: flex; position: fixed; z-index: 21; left: calc(var(--rand) + 2.4rem); bottom: 2rem; margin: 0; padding: 3px;
    border-radius: 999px; background: color-mix(in srgb, var(--papier) 72%, transparent);
  }
  html.menue-offen .licht span { position: static; width: auto; height: auto; clip-path: none; overflow: visible; margin: 0 0.75rem 0 0.9rem; color: var(--tinte-leise); }
  html.menue-offen .schild { position: fixed; z-index: 22; top: 0.35rem; left: 0; width: 9.5rem; }
  html.menue-offen .menue-ruf { display: block; margin: 2.5rem 0 0 2.4rem; font-size: 1.1875rem; font-weight: 520; line-height: 1.7; }
  html.menue-offen .menue-ruf a { text-decoration-color: var(--unterstrich); text-decoration-thickness: 1.5px; text-underline-offset: 0.3em; }
  html.menue-offen .licht button { border: 0; margin: 0; }
  .regler { position: relative; z-index: 2; grid-column: 1 / -1; grid-row: 2; top: auto; right: auto; width: auto; padding: 0.75rem var(--rand) 0; display: grid; grid-template-columns: 3.25rem 1fr; column-gap: 0.9rem; align-items: center; text-align: left; }
  .regler h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
  .regler-feld { display: contents; }
  .herz { grid-column: 1; grid-row: 1; width: 3.25rem; height: 3.25rem; margin: 0 0 0 0.4rem; transform: none; box-shadow: 0 0 0 calc(0.5rem * var(--glanz)) color-mix(in srgb, var(--licht-warm) 40%, transparent), 0 0.3rem calc(2rem * var(--glanz)) color-mix(in srgb, #FFD9A8 80%, transparent); }
  .stufen, .regler-eine, .regler-ohne-js { grid-column: 2; grid-row: 1; }
  .stufen label { min-height: 2.9rem; text-align: center; }
  .regler-hinweis { display: none; }
  .bogen { grid-column: 1 / -1; grid-row: 3; padding-top: 2.5rem; }
  .tafel nav { grid-column: 1 / -1; grid-row: 4; margin: 0; padding: 0.5rem var(--rand) 0.5rem; background: var(--kamm-3); }
  .strecke { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
  .strecke a { padding: 0.55rem 0; margin: 0.15rem 0; display: inline-block; }
  .licht { grid-column: 1 / -1; grid-row: 5; border-radius: 0; background: var(--kamm-3); padding: 0.75rem var(--rand) 2.5rem; }
  .licht button { border: 1.5px solid color-mix(in srgb, var(--tinte) 40%, transparent); margin-right: 0.5rem; }
  .fuss { margin-bottom: 0; }
  .fuss-kaemme { height: 5rem; }
  .fuss-inhalt { grid-template-columns: minmax(0, 1fr); padding-bottom: 1rem; }
  .fuss-recht { justify-content: flex-start; padding-right: 0; }
  .bogen { padding-bottom: 0; }
  .gleise { margin-top: 1.5rem !important; }
  .uebersicht { margin-top: 0; }
  .linie .stopp .inhalt { padding-left: 2.25rem; }
  .stopp .inhalt::after { left: 1.15rem; }
  .einstiege, .gleise, .person { grid-template-columns: minmax(0, 1fr); }
  .start .linie, .uebersicht + .linie { margin-top: 3rem; }
  .halt, .stopp { grid-template-columns: minmax(0, 1fr); margin-left: 0.4rem; }
  .zeit, .werdegang .zeit { text-align: left; white-space: normal; border-left: 1.5px solid var(--linie-farbe); padding: 0 0 0.15rem 1.5rem; }
  .zeit:empty { display: none; }
  .inhalt { padding-left: 1.15rem; }
  .zeit, .werdegang .zeit { padding-left: 1.15rem !important; }
  .spruenge { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-top: 1rem; font-weight: 560; }
  .spruenge a { padding: 0.5rem 0; }
  .person { gap: 1.5rem; }
  .person img { max-width: none; width: 100%; }
  .fuss .gebaut { margin-left: 0; }
  .dokumente a { flex-direction: column; gap: 0; }
  .gleis { padding: 1.5rem 1.25rem 1.75rem; }
  .lesetext { padding: 1.5rem 1.25rem 1.75rem; margin-top: -1.5rem !important; text-wrap: pretty; }
  .recht .kaemme { height: 6rem; }
}
@media (max-width: 30rem) {
  body { font-size: 1.0625rem; }
  .plan { padding: 0.4rem 1rem; }
  .dokumente { padding: 0.1rem 1rem; }
  .plan tr { display: grid; padding: 0.6rem 0; border-bottom: 1.5px solid var(--linie-farbe); }
  .plan tr:last-child { border-bottom: 0; }
  .plan th, .plan td { padding: 0; border: 0; }
  .plan th[scope="row"] { width: auto; white-space: normal; }
}

@view-transition { navigation: auto; }
::view-transition-old(bogen) { animation: 0.2s ease-out both aus; }
::view-transition-new(bogen) { animation: 0.4s var(--weich) both ein; }
@keyframes aus { to { opacity: 0; } }
@keyframes ein { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html, .herz, .herz path, .kaemme path, .stopp button, .einstieg, .wahl a { transition: none; }
  ::view-transition-old(bogen), ::view-transition-new(bogen) { animation: none; }
}

@media print {
  .kaemme, .regler, .tafel nav, .licht, .stopp button, .zu-seiten { display: none; }
  [data-stufe] { display: grid !important; }
}