/* Yetzt. Formensprache wie yenzen.de: der Abend zuerst (dunkel ist die Grundstimmung, hell folgt dem Gerät), Castoro für
   Worte, Hanken Grotesk für Kleines, Haarlinien statt Karten, die Glut als einzige Farbe. Zwei Zustände:
   der Zen-Modus (nur das Jetzt, Vergangenes und Kommendes verschwommen) und der Plan-Modus (eine Seite zum Scrollen). */

@font-face { font-family: "Castoro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/castoro-normal-400-latin-ext.b8e2c880ef52.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Castoro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/castoro-normal-400-latin.092450fe9e41.woff2") format("woff2");
  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: "Castoro"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/castoro-italic-400-latin-ext.7d53ae4c8d83.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Castoro"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/castoro-italic-400-latin.eaaefad7fedf.woff2") format("woff2");
  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: "Hanken Grotesk"; font-weight: 100 900; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-wght-normal.c501f578bf3f.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; font-weight: 100 900; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-ext-wght-normal.20672d217485.woff2") format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --ground: #15171A;
  --ground-2: #1B1E22;
  --ink: #E7E2D7;
  --ink-soft: #9C978D;
  --ink-faint: #6C6961;
  --line: rgba(231, 226, 215, 0.12);
  --ember: #E07A45;
  --ember-rgb: 224, 122, 69;
  --stick: #7D6753;
  --smoke-rgb: 216, 210, 198;
  --smoke-alpha: 0.5;

  --display: "Castoro", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --text: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --s-1: 0.8125rem;
  --s0: 1.0625rem;
  --s1: 1.375rem;
  --s2: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --s3: clamp(2.5rem, 1.4rem + 4.4vw, 4.6rem);
  --rand: clamp(1.25rem, 6vw, 5rem);
  --kopf-h: 4.25rem;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground: #ECE9E2; --ground-2: #E3DFD6; --ink: #1D1F22; --ink-soft: #5F5B53; --ink-faint: #8E897F;
    --line: rgba(29, 31, 34, 0.14); --ember: #C9531F; --ember-rgb: 201, 83, 31; --stick: #6A5441;
    --smoke-rgb: 58, 60, 64; --smoke-alpha: 0.42;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --ground: #ECE9E2; --ground-2: #E3DFD6; --ink: #1D1F22; --ink-soft: #5F5B53; --ink-faint: #8E897F;
  --line: rgba(29, 31, 34, 0.14); --ember: #C9531F; --ember-rgb: 201, 83, 31; --stick: #6A5441;
  --smoke-rgb: 58, 60, 64; --smoke-alpha: 0.42;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ground); }
body.jetzt-body {
  margin: 0; min-height: 100dvh; background: var(--ground); color: var(--ink);
  font-family: var(--text); font-weight: 300; font-size: var(--s0); line-height: 1.7;
  padding-inline: var(--rand); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.zen { overflow: hidden; }
/* Programm: die Marke und die Auswahl bleiben oben, der Zeitstrahl scrollt darunter */
body.prog .kopf { position: sticky; top: 0; background: var(--ground); }
@media (prefers-reduced-motion: no-preference) { html:has(body.prog) { scroll-behavior: smooth; } }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--ink-faint); }
a:hover { text-decoration-color: var(--ember); }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl { margin: 0; }
:focus-visible { outline: 1.5px solid var(--ember); outline-offset: 5px; border-radius: 2px; }
::selection { background: rgba(var(--ember-rgb), .3); }
[hidden] { display: none !important; }
.sr-nur { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sr-fokus:focus { position: fixed; z-index: 100; top: .75rem; left: .75rem; width: auto; height: auto; margin: 0; padding: .5rem 1rem; clip: auto; background: var(--ink); color: var(--ground); }
.label { margin: 0; font-size: var(--s-1); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }

/* Kopf: die Marke und der Wechsel zwischen den beiden Zuständen */
.kopf { position: relative; z-index: 40; max-width: 70rem; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; height: var(--kopf-h); transition: opacity 1.6s ease; }
.marke { display: block; line-height: 0; text-decoration: none; }
.marke img { display: block; height: 2.9rem; width: auto; margin-left: -.9rem; } /* der Schein des Punkts liegt vor dem Rand */
.modus { padding: .5rem 0 .4rem .8rem; border-bottom: 1px solid transparent; font-size: var(--s-1); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; transition: color .4s, border-color .4s; }
.modus:hover { color: var(--ink); border-color: var(--ember); }
body:not([data-zustand="strom"]) .kopf { opacity: 0; pointer-events: none; }

/* Die Glut: ein Punkt vor dem, was man tun kann (wie der Briefpunkt auf yenzen.de) */
.glut-punkt { flex: none; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px var(--ember); }
.weiter { display: inline-flex; align-items: baseline; gap: .8rem; padding: 0 0 .3rem; border: 0; border-bottom: 1px solid var(--ink-faint); background: none; cursor: pointer; text-decoration: none; text-align: left; font: 400 var(--s1) / 1.4 var(--display); color: inherit; transition: border-color .4s; }
.weiter:hover { border-color: var(--ember); }
.weiter .glut-punkt { transform: translateY(-.15em); }

/* ═══ Zen-Modus: nur das Jetzt ═══ */
.jetzt {
  position: fixed; inset: 0; z-index: 1; overflow: hidden; outline: none; padding-inline: var(--rand);
  --anker: 47%; --k: 1.2;
  --incense-stick: var(--stick); --incense-ember: var(--ember); --incense-ember-rgb: var(--ember-rgb);
  --incense-smoke: var(--smoke-rgb); --incense-alpha: var(--smoke-alpha); --incense-mark: rgba(var(--smoke-rgb), .8);
}
.buehne { position: relative; max-width: 70rem; height: 100%; margin-inline: auto; }
/* Der ganze Zeitstrahl („Alles“) links, verschwommen nach Abstand von Yetzt: schon die Nachbarn sind nicht mehr zu lesen,
   nur Formen und Licht bleiben. Yetzt steht auf der Höhe von --anker; die Begrüßung rechts daneben. */
.strahl { --links: clamp(6.25rem, 14vw, 8.5rem); --rechts: 1.4rem; position: absolute; left: 0; top: 0; bottom: 0; width: min(46%, 34rem); overflow: hidden; pointer-events: none; transition: opacity 1.6s ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); }
.strahl .zeitstrahl { position: relative; }
.strahl .zeitstrahl > li { filter: blur(var(--b, 0px)); opacity: var(--o, 1); }
.strahl .zeitstrahl > li.vergangen { opacity: calc(var(--o, 1) * .7); }
.strahl.raffer .zeitstrahl { transition: transform 1s linear; }
.strahl.raffer .zeitstrahl > li { transition: filter 1s linear, opacity 1s linear; }
.strahl details { pointer-events: none; }
.strahl .beschreibung { display: none; }
.strahl .titel, .strahl .notiz { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strahl .yetzt { pointer-events: none; }
.gegenwart { position: absolute; left: calc(min(46%, 34rem) + clamp(2rem, 6vw, 6rem)); right: 0; top: var(--anker); z-index: 2; transform: translateY(-50%); transition: opacity 1.6s ease; }
.gruss { margin-top: .9rem; font: 400 var(--s3) / 1.04 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.gruss em { font-style: italic; color: var(--ink-soft); }
.satz { max-width: 30rem; margin-top: 1.3rem; font-size: var(--s1); line-height: 1.55; text-wrap: pretty; transition: opacity .5s ease; }
.tun { width: fit-content; max-width: 30rem; margin-top: 1.9rem; }
.tel { max-width: 28rem; margin-top: 1.8rem; font-size: .9375rem; color: var(--ink-soft); }
/* Handy: oben die Begrüßung, darunter der Zeitstrahl, Yetzt auf der unteren Hälfte; was über Yetzt liegt, läuft unter die Begrüßung aus */
@media (max-width: 820px) {
  .jetzt { --anker: 67%; }
  .strahl { --links: 6.6rem; --rechts: 1.1rem; width: 100%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 36%, #000 56%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, transparent 36%, #000 56%, #000 88%, transparent 100%); }
  .gegenwart { left: 0; top: 11%; transform: none; }
  .gruss { font-size: clamp(2.3rem, 9vw, 3.2rem); }
  .satz { font-size: 1.2rem; margin-top: 1rem; }
  .tun { margin-top: 1.3rem; font-size: 1.2rem; }
}

/* Sitzen und Raum: das Stäbchen brennt einmal ab */
.rauch { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.sitzen { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 1.6s ease; }
.jetzt[data-zustand="sitzen"] .sitzen, .jetzt[data-zustand="sitzen"] .rauch, .jetzt[data-zustand="raum"] .sitzen, .jetzt[data-zustand="raum"] .rauch,
.jetzt[data-zustand="frage"] .sitzen, .jetzt[data-zustand="frage"] .rauch { opacity: 1; }
.jetzt[data-zustand="sitzen"] .sitzen, .jetzt[data-zustand="raum"] .sitzen, .jetzt[data-zustand="frage"] .sitzen { pointer-events: auto; }
.jetzt:not([data-zustand="strom"]) .gegenwart, .jetzt:not([data-zustand="strom"]) .strahl { opacity: 0; pointer-events: none; }
.stab-platz { position: relative; display: grid; place-items: end center; }
.stab { width: calc(150px * var(--k)); height: calc(234px * var(--k)); padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; }
.peek { position: absolute; top: -1.8rem; left: 0; right: 0; text-align: center; font-size: .9375rem; letter-spacing: .04em; color: var(--ink-soft); opacity: 0; transition: opacity .8s; pointer-events: none; }
.peek.an { opacity: 1; }
.zeile { min-height: 6.5rem; max-width: 24rem; margin-top: 1.4rem; padding-inline: 1.5rem; text-align: center; font: 400 var(--s1) / 1.45 var(--display); text-wrap: balance; opacity: 0; transition: opacity 1.4s ease; }
.zeile.an { opacity: 1; }
.zeile .wort { display: block; margin-bottom: .55rem; font: 500 var(--s-1) var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.zeile.leise { font-size: 1.15rem; color: var(--ink-soft); }
.ende { position: fixed; z-index: 32; white-space: nowrap; left: 50%; transform: translateX(-50%); bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); padding: .55rem 1rem; border: 0; background: none; cursor: pointer; font-size: .9375rem; letter-spacing: .05em; color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--ink-faint); text-underline-offset: .4em; }
.ende:hover { color: var(--ink); text-decoration-color: var(--ember); }
.dunkel { position: fixed; inset: 0; z-index: 30; background: #0b0c0d; opacity: 0; transition: opacity 3s ease; pointer-events: none; }
.dunkel.an { opacity: .8; pointer-events: auto; } /* das Stäbchen bleibt als leises Bild stehen */
.dunkel.an ~ .ende { color: #b9b4a8; }

/* Allein sitzen: die Zeitachse wird zum Stäbchen. Punkte alle 5 Minuten von 5 bis 60 (Text nur bei 15, 30, 45, 60), ein Tipp
   wählt: die Linie darüber blendet aus, der Punkt wird Glut, ein großer Punkt „Beginne“ erscheint; ein Tipp darauf entzündet. */
.leise-weg { padding: .35rem .2rem; border: 0; background: none; cursor: pointer; font: 400 .9375rem var(--text); letter-spacing: .03em; color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--ink-faint); text-underline-offset: .4em; text-align: left; }
.leise-weg:hover { color: var(--ink); text-decoration-color: var(--ember); }
.gegenwart .leise-weg { display: block; max-width: 30rem; margin-top: 1.1rem; }
.leiter { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.leiter[hidden] { display: none; }
.jetzt[data-zustand="waehlen"] .leiter { opacity: 1; pointer-events: auto; }
.leiter-achse > i { position: absolute; width: 1px; background: var(--ink-faint); opacity: .8; transition: opacity .8s ease, width .8s ease, margin .8s ease, background .8s ease; }
.leiter-achse > i.weg { opacity: 0; }
.leiter.gewaehlt .leiter-achse > i:not(.weg) { width: 3.4px; margin-left: -1.2px; border-radius: 2px; background: rgba(var(--smoke-rgb), .48); opacity: 1; }
.leiter-punkte > button { position: absolute; display: flex; align-items: center; gap: .55rem; height: 44px; margin: 0; padding: 0 .8rem 0 18.5px; border: 0; background: none; cursor: pointer; color: var(--ink-soft); font: 400 1.05rem / 1 var(--display); white-space: nowrap; transform: translateY(-50%); transition: opacity .8s ease, color .5s; }
.leiter-punkte > button i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ground); border: 1px solid var(--ink-soft); transition: background .5s, border-color .5s, box-shadow .5s, width .5s, height .5s, margin .5s; }
.leiter-punkte > button:hover i, .leiter-punkte > button:focus-visible i { border-color: var(--ember); }
.leiter-punkte > button.aus { opacity: .28; }
.leiter-punkte > button.glut { color: var(--ink); }
.leiter-punkte > button.glut i { width: 13px; height: 13px; margin: -3px; background: var(--ember); border-color: var(--ember); box-shadow: 0 0 14px var(--ember); }
.leiter-frage { position: absolute; left: var(--rechts-x, 12rem); right: var(--rand); top: 47%; transform: translateY(-50%); max-width: 22rem; font: 400 var(--s2) / 1.3 var(--display); text-wrap: balance; transition: opacity .6s ease; }
.leiter-frage span { display: block; margin-top: .8rem; font: 300 1rem / 1.5 var(--text); color: var(--ink-soft); }
.leiter.gewaehlt .leiter-frage { opacity: 0; }
.leiter-zurueck { position: absolute; right: 0; bottom: .8rem; }
@media (max-width: 820px) { .leiter-frage { font-size: 1.35rem; } .jetzt[data-modus="achse"] .zeile, .jetzt[data-modus="achse"] .frage { font-size: 1.1rem; } }
/* der große Punkt: ein Tipp entzündet das Stäbchen */
.beginne { position: absolute; left: var(--beginne-x, 14rem); width: clamp(5.6rem, 19vw, 7.4rem); aspect-ratio: 1; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--ember); cursor: pointer; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 .55rem rgba(var(--ember-rgb), .16), 0 0 3.2rem rgba(var(--ember-rgb), .5); animation: erscheint .9s cubic-bezier(.2, .7, .2, 1) both; transition: box-shadow .4s; }
.beginne[hidden] { display: none; }
.beginne span { font: italic 400 clamp(1.15rem, 4.2vw, 1.5rem) / 1 var(--display); color: var(--ground); }
.beginne:hover, .beginne:focus-visible { box-shadow: 0 0 0 .7rem rgba(var(--ember-rgb), .22), 0 0 4rem rgba(var(--ember-rgb), .65); }
@keyframes erscheint { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
/* während des Sitzens an der Achse: Zeilen und Zeit in der rechten Spalte, der Rest der Seite bleibt still */
.jetzt[data-modus="achse"] .stab-platz { display: none; }
.jetzt[data-modus="achse"] .zeile, .jetzt[data-modus="achse"] .frage { position: absolute; left: var(--rechts-x, 12rem); right: var(--rand); top: 47%; transform: translateY(-50%); max-width: 24rem; margin: 0; padding: 0; text-align: left; align-items: flex-start; }
.jetzt[data-modus="achse"] .sitzen { justify-content: flex-start; }
.peek-achse { position: absolute; z-index: 3; left: 0; top: 0; right: auto; text-align: left; white-space: nowrap; }
.waehlen, .frage { display: none; flex-direction: column; align-items: center; gap: 1.1rem; margin-top: 1.4rem; padding-inline: 1.5rem; text-align: center; }
.jetzt[data-zustand="frage"] .frage { display: flex; }
.jetzt[data-zustand="frage"] .zeile { display: none; }
.frage[hidden] { display: none !important; }
.frage-satz { min-height: 2.9rem; max-width: 22rem; font: 400 var(--s1) / 1.45 var(--display); text-wrap: balance; }
.frage { min-height: 9rem; }

/* Gemeinsam sitzen: die anderen als weiche Lichtpunkte, jede atmet in eigenem Tempo */
.leute { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.jetzt[data-zustand="raum"] .leute { opacity: 1; }
.mensch .koerper, .mensch .aura { transform-box: fill-box; transform-origin: center; }
.mensch .koerper { animation: koerper var(--p, 11s) linear var(--d, 0s) infinite; }
.mensch .aura { animation: aura var(--p, 11s) linear calc(var(--d, 0s) - var(--p, 11s) * .03) infinite; }
@keyframes koerper {
  0% { transform: scale(.74); opacity: .74; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  40% { transform: scale(1.26); opacity: 1; animation-timing-function: linear; }
  47% { transform: scale(1.26); opacity: 1; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  90%, 100% { transform: scale(.74); opacity: .74; }
}
@keyframes aura {
  0% { transform: scale(1); opacity: .42; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  40% { transform: scale(.42); opacity: 1; animation-timing-function: linear; }
  47% { transform: scale(.42); opacity: 1; animation-timing-function: cubic-bezier(.37, 0, .63, 1); }
  90%, 100% { transform: scale(1); opacity: .42; }
}

/* Zeitraffer: ein leises Etikett unten in der Mitte, Antippen beendet */
.raffer { position: fixed; z-index: 45; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); padding: .5rem 1rem; border: 0; background: none; cursor: pointer; white-space: nowrap; font: 500 var(--s-1) var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--ember); font-variant-numeric: tabular-nums; }
.raffer:hover { color: var(--ink); }

/* ═══ Plan-Modus: eine Seite zum Scrollen, wie yenzen.de ═══ */
.plan { max-width: 70rem; margin-inline: auto; }
.plan > section, .plan > footer { padding-block: clamp(3rem, 8vw, 6rem); border-top: 1px solid var(--line); }
.plan h1 { font: 400 var(--s3) / 1.04 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.plan h1 em { font-style: italic; color: var(--ink-soft); }
.plan h2 { font: 400 var(--s2) / 1.2 var(--display); text-wrap: balance; }
.plan h3 { font: 400 var(--s1) / 1.3 var(--display); }
.plan .satz { margin-top: 0; }
.kopf-2 { display: grid; gap: .9rem; max-width: 36rem; margin-bottom: clamp(1.8rem, 4.5vw, 3rem); }
.kopf-2 p:not(.label) { color: var(--ink-soft); }
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 1.5rem clamp(2rem, 8vw, 7rem); align-items: start; }
.zwei .kopf-2 { margin-bottom: 0; }
@media (max-width: 760px) { .zwei { grid-template-columns: 1fr; } }
.leer { max-width: 32rem; color: var(--ink-soft); }

/* Programm: die Wörter der Auswahl, sie bleiben oben stehen, während man durch die Zeit scrollt */
.leiste { position: sticky; top: var(--kopf-h); z-index: 20; display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: .85rem 0 .8rem; background: var(--ground); border-block: 1px solid var(--line); }
.woerter { display: flex; gap: .3rem 1.6rem; overflow-x: auto; scrollbar-width: none; font: 400 var(--s1) / 1.3 var(--display); padding-block: .1rem; }
.woerter::-webkit-scrollbar { display: none; }
.woerter { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.4rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.4rem), transparent); padding-right: 2.4rem; } /* mehr Wörter, als auf den Schirm passen: der Rand blendet aus */
.woerter a { flex: none; color: var(--ink-soft); text-decoration: none; padding-bottom: .15rem; border-bottom: 1px solid transparent; transition: color .4s, border-color .4s; }
.woerter a:hover { color: var(--ink); }
.woerter a[aria-current] { color: var(--ink); border-color: var(--ember); }
.plan > .zeitstrahl-teil { border-top: 0; padding-block: 1rem 2rem; }

/* der Zeitstrahl: eine senkrechte Linie, auf ihr ein Punkt je Eintrag. Links der Linie (rechtsbündig) Datum und
   Uhrzeit, rechts der Punkt das Ereignis; ein Tipp darauf klappt eine kleine Beschreibung auf. Yetzt ist die Glut. */
.zeitstrahl-teil { --links: clamp(7rem, 26vw, 11rem); --rechts: 1.5rem; }
.zeitstrahl { list-style: none; padding: 0; margin: 0; overflow-anchor: none; }
.zeitstrahl > li { position: relative; display: grid; grid-template-columns: var(--links) minmax(0, 1fr); align-items: start; }
.zeitstrahl > li::before { content: ""; position: absolute; left: var(--links); top: 0; bottom: 0; width: 1px; background: var(--ink-faint); opacity: .7; }
.zeitstrahl > li > :not(i):not(details):not(.yetzt) { padding-right: 1.1rem; text-align: right; }
.zeitstrahl .punkt { position: absolute; z-index: 1; left: var(--links); top: var(--mitte, 1.45rem); width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--ground); border: 1px solid var(--ink-soft); transition: background .4s, border-color .4s, box-shadow .4s; }
.zeitstrahl details, .zeitstrahl .yetzt { grid-column: 2; padding-left: var(--rechts); }

/* Tage: Wochentag und Datum links der Linie, leiser als die Uhrzeiten */
.tag-zeile { padding-top: 2.4rem; padding-bottom: .4rem; }
.tag-zeile .datum { display: grid; gap: .05rem; text-align: right; }
.tag-zeile .wt { font-size: var(--s-1); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.tag-zeile .dat { font: 400 1.05rem / 1.3 var(--display); color: var(--ink-soft); }
.tag-zeile.bereich .dat { font-size: 1.05rem; hyphens: manual; } /* Meins: der Bereich steht, wo sonst das Datum steht */
.tag-zeile .heute { font-size: var(--s-1); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.zeitstrahl > .tag-zeile:first-child { padding-top: .4rem; }

/* Einträge */
.eintrag { --mitte: 1.844rem; padding-block: .95rem; } /* Mitte der ersten Titelzeile: Uhrzeit und Punkt liegen darauf */
.eintrag .uhr { line-height: 1.7875rem; padding-top: 0; font-size: var(--s-1); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.eintrag summary { display: block; list-style: none; cursor: pointer; border-radius: 2px; }
.eintrag summary::-webkit-details-marker { display: none; }
.eintrag .titel { display: block; font: 400 var(--s1) / 1.3 var(--display); transition: color .3s; }
.eintrag summary:hover .titel { color: var(--ember); }
.eintrag .notiz { display: block; margin-top: .15rem; color: var(--ink-soft); font-size: .9375rem; line-height: 1.55; }
.eintrag.vergangen { opacity: .5; }
.eintrag.laeuft .uhr, .eintrag.laeuft .stand { color: var(--ember); }
.eintrag.laeuft .punkt { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 8px var(--ember); }
.eintrag details[open] .punkt, .eintrag:has(details[open]) .punkt { border-color: var(--ember); }
.beschreibung { max-width: 32rem; padding-top: .9rem; animation: auf .55s ease both; }
.beschreibung p { color: var(--ink-soft); }
.beschreibung .weiter { margin-top: 1rem; font-size: 1.15rem; }
.erinnerung { display: grid; gap: .3rem; justify-items: start; }
.erinnere { display: inline-flex; align-items: baseline; gap: .6rem; padding: .3rem 0; border: 0; background: none; cursor: pointer; font: 300 .9375rem / 1.5 var(--text); color: var(--ink-soft); text-align: left; }
.erinnere .glut-punkt { width: .4rem; height: .4rem; background: transparent; border: 1px solid var(--ink-soft); box-shadow: none; transform: translateY(-.1em); transition: background .4s, border-color .4s, box-shadow .4s; }
.erinnere:hover { color: var(--ink); }
.erinnerung { align-items: baseline; }
.erinnerung .wahl { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: 0 1.6rem; padding-left: 1rem; }
.beschreibung p + p { margin-top: .7rem; }
.erinnere.an { color: var(--ink); }
.erinnere.an .glut-punkt { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 8px var(--ember); }
@keyframes auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Yetzt: die Glut auf der Linie; links die Uhrzeit, rechts Yetzt (größer, führt zu Yetzt) */
.zeitstrahl > .yetzt-zeile { align-items: center; padding-block: 1.4rem; }
.yetzt-zeile .yetzt-uhr { font-size: var(--s-1); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.yetzt-zeile .yetzt { display: flex; align-items: center; gap: 1.2rem; font: italic 400 clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem) / 1.1 var(--display); color: var(--ember); text-decoration: none; }
.yetzt-zeile .yetzt::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--ember), transparent); opacity: .7; }
.yetzt-zeile .yetzt:hover { text-shadow: 0 0 18px rgba(var(--ember-rgb), .5); }
.yetzt-zeile .punkt { top: 50%; width: 11px; height: 11px; transform: translate(-50%, -50%); background: var(--ember); border-color: var(--ember); box-shadow: 0 0 14px var(--ember); }
.yetzt-zeile { scroll-margin-top: 38vh; }

/* Wechsel der Auswahl: der Zeitstrahl morpht (View Transitions, jetzt-programm.js benennt die Einträge). Die Einträge, die
   bleiben, gleiten an ihren neuen Platz; wer geht, blendet früh aus, wer kommt, blendet spät ein. Nur Transformation und
   Deckkraft, darum ruhig. Die Marke und die Wörter oben stehen fest (eigene Gruppen, liegen über den gleitenden Zeilen). */
.kopf { view-transition-name: kopf; }
.leiste { view-transition-name: leiste; }
::view-transition-group(*) { animation-duration: 1.15s; animation-delay: .08s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
::view-transition-group(root), ::view-transition-group(kopf), ::view-transition-group(leiste) { animation-duration: .01s; animation-delay: 0s; }
::view-transition-old(*):only-child { animation: vt-aus .45s cubic-bezier(.3, 0, .6, 1) both; }
::view-transition-new(*):only-child { animation: vt-ein .7s cubic-bezier(0, 0, .2, 1) .4s both; }
@keyframes vt-aus { to { opacity: 0; } }
@keyframes vt-ein { from { opacity: 0; } }
@media (max-width: 640px) {
  .tag-zeile .wt { font-size: .7rem; letter-spacing: .1em; }
  .woerter { font-size: 1.1rem; gap: .3rem 1.1rem; }
    .zeitstrahl-teil { --rechts: 1.2rem; }
}
.weiter-zeit { padding-block: 1.2rem; padding-left: calc(var(--links) + var(--rechts)); font-size: var(--s-1); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.weiter-zeit a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--ink-faint); padding-bottom: .2rem; }
.weiter-zeit a:hover { color: var(--ink); border-color: var(--ember); }
.zeitstrahl-teil .leer { padding-left: calc(var(--links) + var(--rechts)); transition: opacity .6s ease; }
.notiz { color: var(--ink-soft); font-size: .975rem; line-height: 1.6; }
.term { font-size: var(--s-1); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }

/* Listen mit Haarlinien: Tage, Kurse, Rhythmus */
.zeilen { list-style: none; padding: 0; }
.zeilen > li { display: grid; grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr); gap: .3rem 1.6rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.zeilen > li:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 640px) { .zeilen > li { grid-template-columns: 1fr; } }
.zeilen .term { padding-top: .45rem; }
.tag-gruppe + .tag-gruppe { margin-top: 2.6rem; }
.tag-gruppe > h3 { margin-bottom: .6rem; color: var(--ink-soft); }
.titel { font: 400 var(--s1) / 1.3 var(--display); }
.meta { display: flex; flex-wrap: wrap; gap: .1rem 1.4rem; margin-top: .3rem; color: var(--ink-soft); font-size: .9375rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin-top: .8rem; font-size: .9375rem; }
.aktionen a { color: var(--ink-soft); }
.aktionen a:hover { color: var(--ink); }
.abstand { margin-top: 1.6rem; }
.fliess { max-width: 34rem; color: var(--ink-soft); }
.fliess + .fliess, .fliess + .weiter, .weiter + .fliess { margin-top: 1.4rem; }
.du-zeile { display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; align-items: baseline; margin-top: 1.4rem; }
.du-zeile form { display: inline; margin: 0; }
.du-zeile button { padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--ink-faint); }
.du-zeile button:hover { text-decoration-color: var(--ember); }
.plan > .plan-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; padding-block: 2rem 3rem; font-size: var(--s-1); color: var(--ink-faint); }
.plan-fuss a { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Seite einer Sendung (Audio, Video, Live): Beschreibung zum Lesen, das Medium, Downloads und Links, in der Formensprache von Yetzt */
.sendung-seite { --luft: 1.2rem; position: relative; max-width: none; margin: 0; padding: clamp(1.4rem, 5vw, 3rem) 0 4rem; display: grid; grid-template-columns: calc(var(--achse-x) - var(--rand)) minmax(0, 44rem); align-content: start; gap: 1.1rem 0; }
@media (min-width: 821px) { .sendung-seite { --luft: 2rem; } }
/* die Linie von Yetzt zieht sich durch die Detailansicht: links wann es ist, rechts der Inhalt, der Punkt sitzt auf der Linie */
.sendung-seite::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--achse-x) - var(--rand)); width: 1px; background: var(--ink-faint); opacity: .7; }
.sendung-seite > :not(.info) { grid-column: 2; margin-left: var(--luft); min-width: 0; }
.sendung-seite .info { grid-column: 1; grid-row: 1 / span 4; align-self: start; padding-right: 1.1rem; text-align: right; font-size: var(--s-1); line-height: 1.35; color: var(--ink-soft); }
.sendung-seite .info p { margin: 0; }
.sendung-seite .info .tag { font: 500 var(--s-1) / 1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted, var(--ink-soft)); }
.sendung-seite .info .datum { font: 400 var(--s1) / 1.25 var(--display); color: var(--ink); }
.sendung-seite .info .nah { margin-top: .15rem; font: 500 var(--s-1) / 1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
.sendung-seite .info .uhr { margin-top: 1.1rem; font: 500 var(--s-1) / 1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.sendung-seite .info .bis { color: var(--ink-faint); }
@media (max-width: 820px) {
  .sendung-seite h1 { font-size: var(--s2); }
  .sendung-seite .info { padding-right: .8rem; }
  .sendung-seite .info .tag { font-size: .68rem; letter-spacing: .08em; }
  .sendung-seite .info .datum { font-size: var(--s0); }
  .sendung-seite .info .nah, .sendung-seite .info .uhr { font-size: .72rem; letter-spacing: .1em; }
}
.sendung-seite > .label { position: relative; }
.sendung-seite > .label::before { content: ""; position: absolute; left: calc(var(--luft) * -1); top: .7em; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--ground); border: 1px solid var(--ink-soft); }
.sendung-seite:has(.info .jetzt) > .label::before { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 10px var(--ember); }
.sendung-seite h1 { font: 400 var(--s3) / 1.08 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.sendung-seite .wann { color: var(--ink-soft); font-size: var(--s0); }
.sendung-seite .laeuft { color: var(--ember); }
.sendung-seite .lead { font: 400 var(--s1) / 1.45 var(--display); color: var(--ink); }
.sendung-seite .text { color: var(--ink-soft); max-width: 36rem; }
.sendung-seite .medium { display: grid; gap: .7rem; justify-items: start; margin-top: .8rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.sendung-seite .medium-titel { font: 400 var(--s1) / 1.3 var(--display); }
.sendung-seite .hinweis { color: var(--ink-soft); font-size: var(--s-1); max-width: 30rem; }
.sendung-seite audio, .sendung-seite video { width: 100%; max-width: 40rem; border-radius: 2px; background: var(--ground); color-scheme: dark light; }
.sendung-seite video { background: #000; }
.sendung-seite .liste { display: grid; gap: .6rem; margin-top: .8rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.sendung-seite .liste h2 { font: 400 var(--s1) / 1.3 var(--display); }
.sendung-seite .liste ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.sendung-seite .liste li { display: grid; gap: .1rem; }
.sendung-seite .liste a { color: var(--ink); width: fit-content; }
.sendung-seite .liste .meta { color: var(--ink-faint); font-size: var(--s-1); overflow-wrap: anywhere; }
.sendung-seite .aktionen { margin-top: 1.4rem; font-size: var(--s-1); color: var(--ink-soft); }

/* Audio und Video: Die Linie der Seite wird zur Zeitachse, die Glut wandert von oben nach unten und lässt sich ziehen (Tipp springt).
   Start und Stopp macht der runde Knopf wie „Beginne“. Die Seite räumt ab, was stört; die Info links bleibt. */
.sendung-seite .spiel-start { display: inline-flex; align-items: center; gap: .9rem; padding: .5rem 0; border: 0; background: none; cursor: pointer; font: 400 var(--s1) / 1.2 var(--display); color: var(--ink); }
.sendung-seite .spiel-start[hidden] { display: none; }
.sendung-seite .spiel-start .glut-punkt { width: .9rem; height: .9rem; box-shadow: 0 0 18px var(--ember), 0 0 6px var(--ember); }
.sendung-seite, .spiel-achse { --achse-x: calc(var(--rand) + 6.6rem); --spiel-luft: 4.5rem; }
@media (min-width: 821px) { .sendung-seite, .spiel-achse { --achse-x: calc(var(--rand) + clamp(6.25rem, 14vw, 8.5rem)); } }
/* Video im Hochformat: neben der gewohnten Stelle bliebe kaum Platz für das Bild; die Achse rückt an den Rand (die Info entfällt) */
@media (max-width: 820px) and (orientation: portrait) {
  .spiel-achse.video, .sendung-seite.spielmodus.video { --achse-x: calc(var(--rand) + 1.1rem); --spiel-luft: 2.6rem; }
  .sendung-seite.spielmodus.video > .info { display: none; }
}
.spiel-achse { position: fixed; z-index: 30; left: calc(var(--achse-x) - 24px); width: 48px; top: 9%; bottom: 7.5%; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.spiel-achse[hidden] { display: none; }
.spiel-weg { position: absolute; left: 50%; top: 0; width: 1px; height: 0; margin-left: -.5px; background: var(--ink-faint); opacity: .8; transition: height .35s linear; }
.spiel-rest { position: absolute; left: 50%; top: 0; bottom: 0; width: 3.4px; margin-left: -1.7px; border-radius: 2px; background: rgba(var(--smoke-rgb), .48); transition: top .35s linear; }
.spiel-glut { position: absolute; left: 50%; top: 0; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -50%); display: grid; place-items: center; transition: top .35s linear; }
.spiel-glut .glut-punkt { width: 13px; height: 13px; margin: 0; border-radius: 50%; background: var(--ember); box-shadow: 0 0 14px var(--ember); transition: box-shadow .6s ease, opacity .6s ease; }
.spiel-achse:not(.spielt) .spiel-glut .glut-punkt { opacity: .78; box-shadow: 0 0 5px rgba(var(--ember-rgb), .7); }
.spiel-achse.spielt .spiel-glut .glut-punkt { box-shadow: 0 0 22px var(--ember), 0 0 6px var(--ember); }
.spiel-achse.zieht .spiel-weg, .spiel-achse.zieht .spiel-rest, .spiel-achse.zieht .spiel-glut { transition: none; }
.spiel-glut:focus-visible { outline: 2px solid var(--ember); outline-offset: -8px; border-radius: 50%; }
/* der runde Knopf: dieselbe Glut wie „Beginne“ */
.spiel-kreis { flex: none; width: clamp(5.6rem, 19vw, 7.4rem); aspect-ratio: 1; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--ember); color: var(--ground); cursor: pointer; font: italic 400 clamp(1.05rem, 3.8vw, 1.4rem) / 1 var(--display);
  box-shadow: 0 0 0 .55rem rgba(var(--ember-rgb), .16), 0 0 3.2rem rgba(var(--ember-rgb), .5); transition: box-shadow .4s, opacity .5s ease; }
.spiel-kreis:hover, .spiel-kreis:focus-visible { box-shadow: 0 0 0 .7rem rgba(var(--ember-rgb), .22), 0 0 4rem rgba(var(--ember-rgb), .65); }
.spiel-titel { margin: 0; max-width: 24rem; font: 400 var(--s2) / 1.25 var(--display); color: var(--ink); text-wrap: balance; }
.spiel-zeit { margin: 0; color: var(--ink-soft); font-size: var(--s0); font-variant-numeric: tabular-nums; }
.spiel-zeit:empty { display: none; }
.spiel-zeile { margin: 0; color: var(--ink-faint); font-size: var(--s-1); }
.spiel-zu { padding: .6rem .4rem; border: 0; background: none; cursor: pointer; color: var(--ink-soft); font: 500 var(--s-1) / 1 var(--text); letter-spacing: .16em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--ink-faint); text-underline-offset: .4em; }
.spiel-zu:hover, .spiel-zu:focus-visible { color: var(--ink); text-decoration-color: var(--ember); }
/* die Seite räumt ab, was stört: nur das Medium bleibt (und die Info links); die Linie ist nun die Achse */
.sendung-seite.spielmodus { grid-template-columns: calc(var(--achse-x) - var(--rand)) minmax(0, 72rem); padding-block: clamp(.8rem, 3vh, 2rem); min-height: calc(100dvh - var(--kopf-h)); align-content: center; }
.sendung-seite.spielmodus::before, .sendung-seite.spielmodus > .label::before { display: none; }
.sendung-seite.spielmodus > :not(.medium-aktiv):not(.info) { display: none; }
.sendung-seite.spielmodus > .info { grid-row: 1; align-self: center; }
.sendung-seite.spielmodus > .medium-aktiv { grid-row: 1; margin: 0 0 0 var(--spiel-luft); padding: 0; border: 0; justify-items: stretch; }
.sendung-seite.spielmodus .medium-aktiv > .medium-titel, .sendung-seite.spielmodus .medium-aktiv > .spiel-start { display: none; }
.spiel-buehne { position: relative; display: grid; gap: .7rem; width: 100%; }
.spiel-buehne.audio { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.spiel-buehne.audio .spiel-kreis { margin-bottom: .6rem; }
.sendung-seite .spiel-buehne .spiel-video { display: block; width: 100%; max-width: none; max-height: calc(100dvh - var(--kopf-h) - 7rem); object-fit: contain; border-radius: 2px; background: #000; cursor: pointer; }
.spiel-buehne.video .spiel-kreis { position: absolute; left: 50%; top: calc(50% - 1.6rem); transform: translate(-50%, -50%); }
.spiel-buehne.video.spielt .spiel-kreis { opacity: 0; pointer-events: none; }
.spiel-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; }
@media (prefers-reduced-motion: reduce) { .spiel-weg, .spiel-rest, .spiel-glut, .spiel-kreis { transition: none; } }
/* Vollbild auf dem Handy (Video quer): die Seite bringt ihren Grund und ihren Rand selbst mit */
.sendung-seite:fullscreen { background: var(--ground); padding-inline: var(--rand); min-height: 100dvh; overflow: auto; align-content: center; }
.sendung-seite:fullscreen::backdrop { background: var(--ground); }