/* Gestaltung der Scrollgeschichte auf /termin (U-Bahn, 13.10.2026) */
:root { --grund: #171412; --text: #F7F3EA; --leise: #B5ADA0; --linie: #3A332C; --rand: clamp(16px, 3.5vw, 56px); }
* { box-sizing: border-box; }
html { background: var(--grund); }
body { margin: 0; background: var(--grund); color: var(--text); font: 400 17px/1.55 'IBM Plex Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; transition: background-color .2s linear; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.kopf { position: fixed; z-index: 5; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 18px var(--rand); pointer-events: none; }
.kopf a { pointer-events: auto; color: inherit; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.kopf .zurueck { font: 400 14px/1 'IBM Plex Mono', monospace; color: var(--leise); }
.geschichte { position: relative; height: 760vh; }
.buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.buehne svg { position: absolute; inset: 0; width: 100%; height: 100%; color: #F7F3EA; }
.tafel { position: absolute; left: var(--rand); top: clamp(84px, 14vh, 140px); width: min(31em, 38vw); visibility: hidden; opacity: 0; }
.tafel .kicker { font: 400 13px/1.4 'IBM Plex Mono', monospace; color: var(--leise); letter-spacing: .02em; }
.tafel h1, .tafel h2 { font: 500 clamp(30px, 3.4vw, 50px)/1.06 'Fraunces', Georgia, serif; letter-spacing: -.02em; margin: 8px 0 12px; }
.tafel p { margin: 0 0 10px; color: var(--leise); max-width: 30em; }
.tafel code { font: 400 15px/1 'IBM Plex Mono', monospace; color: var(--text); }
.knoepfe { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 16px; }
/* Ein Knopf, gezeichnet wie die Szene (Skizzenstrich, zittert wie ein Daumenkino); er zeigt die Adresse und kopiert sie */
.skizzenknopf { position: relative; min-height: 58px; display: inline-flex; align-items: center; gap: 16px; padding: 0 22px; border: 0; background: var(--grund); color: var(--text); cursor: pointer; font: 500 18px/1 'IBM Plex Mono', monospace; }
.skizzenknopf svg { position: absolute; left: -5px; top: -5px; width: calc(100% + 10px); height: calc(100% + 10px); overflow: visible; pointer-events: none; }
.skizzenknopf .tun { font: 500 14px/1 'IBM Plex Sans', sans-serif; color: var(--leise); transition: color .15s ease-out; }
.skizzenknopf:hover .tun, .skizzenknopf:focus-visible .tun { color: var(--text); }
.leise { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--leise); font: 400 15px/1.3 'IBM Plex Sans', sans-serif; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.leise:hover { color: var(--text); }
.tafel .klein { margin-top: 14px; font: 400 13px/1.45 'IBM Plex Mono', monospace; color: var(--text); }   /* der Vorschau-Hinweis muss lesbar sein */
/* Impressum und Datenschutz von jeder Seite aus erreichbar (§ 5 DDG, Art. 12 und 13 DSGVO); in der langen
   Scrollgeschichte fest unten rechts, sonst am Seitenende */
.recht { display: flex; flex-wrap: wrap; gap: 0 18px; padding: 8px var(--rand) 12px; font: 400 12px/1 'IBM Plex Mono', monospace; }
.recht a { color: var(--leise); text-decoration: none; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
.recht a:hover { color: var(--text); }
.recht.fest { position: fixed; z-index: 5; right: 0; bottom: 0; padding: 0 var(--rand) 2px; text-shadow: 0 0 8px var(--grund), 0 0 3px var(--grund); }
.scrollen { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font: 400 13px/1 'IBM Plex Mono', monospace; color: var(--leise); }
@media (max-width: 720px) {
  .tafel.schluss > p:not(.klein) { display: none; }
  .tafel.schluss .skizzenknopf { min-height: 52px; font-size: 16px; padding: 0 16px; gap: 12px; }
  .tafel.schluss .klein { font-size: 12.5px; margin-top: 10px; }
  .tafel { left: var(--rand); right: var(--rand); top: 76px; width: auto; }
  .tafel h1, .tafel h2 { font-size: 28px; }
  .tafel p { font-size: 15px; }
}