/* Was die echte Website über die Runden W3e und W4 hinaus braucht: Seite statt Rahmen, Menü am iPhone, Hinweis zur Vormerkung (bis W7),
   Sprachhinweis, Links im Fließtext, Fokus, Figur ohne Skript, Teile aus den W5-Texten ohne eigene W4-Form. */
html{background:#030304;color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0}
.site{--vh:100svh}
picture{display:contents}
/* Der Knopf ist hier ein Link statt eines button der Runde W3e; gleiches Boxmodell, damit width:100% am iPhone nicht überläuft */
.knopf{box-sizing:border-box}
.sr{clip-path:inset(50%)}

/* Sprung zum Inhalt, sichtbar nur mit der Tastatur */
.sprung{position:absolute;left:12px;top:-60px;z-index:60;padding:10px 16px;border-radius:999px;background:var(--stahl-c);color:var(--stahlT)!important;font:600 14px/1 -apple-system,system-ui}
.sprung:focus{top:12px}

/* Fokus sichtbar überall, wo die Runden keinen eigenen haben */
:where(.site) :is(a,button,summary,input,[tabindex]):focus-visible{outline:2px solid var(--t1);outline-offset:3px;border-radius:8px}
:where(.site) .knopf:focus-visible,:where(.site) .n-knopf:focus-visible{outline-offset:4px;border-radius:999px}

/* Links im Fließtext sind unterstrichen (vom Text unterscheidbar ohne Farbe) */
:is(.lese,.t-p,.vk-antwort,.fragen,.pl-text,.stand,.p-p,.drei,.fehler,.hinweise,.tab,.unter-tab,.kurz,.geprueft,.st-ziel,.wege) a:not(.knopf),.ref{
  text-decoration:underline;text-decoration-color:var(--linie2);text-underline-offset:3px;text-decoration-thickness:1px}
:is(.lese,.t-p,.vk-antwort,.fragen,.pl-text,.stand,.p-p,.drei,.fehler,.hinweise,.tab,.unter-tab,.kurz,.geprueft,.wege) a:not(.knopf):hover{color:var(--t1);text-decoration-color:var(--t2)}
.wege b a{text-decoration-color:var(--linie2)}

/* Menü am iPhone: die Linien der Runde öffnen ein Blatt mit allen Punkten */
.n-mehr{display:none}
.n-mehr > summary{list-style:none;position:relative;cursor:pointer}
.n-mehr > summary::-webkit-details-marker{display:none}
.n-mehr > summary::before{content:"";position:absolute;inset:-17px -14px}
.n-blatt{position:absolute;left:0;right:0;top:100%;padding:8px 20px 24px;background:rgba(3,3,4,.96);box-shadow:0 1px 0 var(--linie),0 30px 60px -20px rgba(0,0,0,.8)}
.n-blatt ul{list-style:none;margin:0;padding:0}
.n-blatt li a{display:block;padding:14px 0;border-bottom:1px solid var(--linie);font-size:17px;font-weight:600}
.n-blatt li a[aria-current]{color:var(--t1)}
.n-blatt-sprache{display:inline-block;margin-top:16px;font-size:15px;color:var(--t2)}
@container (max-width: 700px){
  .n-mehr{display:block}
}

/* Fenster zum Vormerken (Knopf „Benachrichtigen“ oben): dasselbe Formular wie im Kasten, untereinander */
.vormerken{position:fixed;left:50%;bottom:24px;z-index:70;width:min(440px,calc(100% - 32px));transform:translateX(-50%);display:none;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:20px 20px 22px 24px;border-radius:24px;background:var(--sheet);background-color:var(--sheet-c);box-shadow:var(--sheet-schatten),0 0 0 1px var(--linie);color:var(--t1)}
.vormerken:target,.vormerken.offen{display:grid}
.vormerken b{font:600 17px/1.3 -apple-system,system-ui}
.vm-zu{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--zweit);font-size:20px;line-height:1;color:var(--t1)}
.vm-box{grid-column:1 / -1}
.vm-box .cta{flex-direction:column;align-items:stretch;gap:10px}
.vm-box .feld,.vm-box .knopf{width:100%;height:52px}
.vm-box .klein,.vm-box .danke,.vm-box .vm-fehler{margin-top:12px!important;text-align:center}
html.lebt .vormerken.offen{animation:vm-rein 360ms var(--rast)}
@keyframes vm-rein{from{opacity:0;transform:translate(-50%,16px)}}

/* Formular: Honigtopf unsichtbar, Link zum Datenschutz, Senden, Fehler (Farbe „gefahr“ aus Farben.swift) */
.vm-topf{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cta .feld{box-sizing:border-box}
.klein a{color:var(--t2);text-decoration:underline;text-decoration-color:var(--linie2);text-underline-offset:3px}
.cta-box .knopf[aria-busy=true]{opacity:.7;cursor:progress}
.vm-fehler{display:none;margin-top:14px!important;font-size:14px;color:#F06A6A}
.cta-box.fehlt .vm-fehler{display:block}
.cta-box.fehlt .klein{display:none}
.cta-box.fehlt .feld{border-color:#F06A6A}

/* Seiten hinter den Links der Bestätigungsmail: eine Karte, ein Zustand sichtbar */
.vm-seite{display:grid;place-items:center;min-height:calc(100svh - 68px - 120px);padding:72px 0 120px}
.vm-karte{position:relative;display:block;box-sizing:border-box;overflow:hidden;width:min(560px,100%);padding:44px 44px 36px;border-radius:30px;text-align:center}
.vm-karte .kegel{opacity:.7}
.vm-ober{position:relative;font:600 13px/1 -apple-system,system-ui;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
/* Ohne Skript zeigt der Anker aus der Weiterleitung den Zustand (:target), mit Skript die Klasse .an. scroll-margin hält die Seite oben. */
.vm-stand{position:relative;display:none;margin-top:26px;scroll-margin-top:100vh}
.vm-karte .vm-stand:focus,.vm-karte .vm-stand:focus-visible{outline:none}   /* Fokus nur für Screenreader, kein Rahmen um den Text */
.vm-karte:not(:has(.vm-stand:target,.vm-stand.an)) .vm-start,.vm-karte:not(:has(.vm-stand.an)) .vm-stand:target,.vm-stand.an{display:block}
.vm-stand h2{font:600 34px/1.1 Mona,system-ui;font-stretch:125%;letter-spacing:-.022em;text-wrap:balance}
.vm-stand p{margin:14px auto 0!important;max-width:420px;font-size:17px;line-height:1.6;color:var(--t2);text-wrap:pretty}
.vm-stand form{margin-top:28px}
.vm-zeichen{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 22px;border-radius:50%;background:var(--haken-fl);background-color:var(--haken-c);color:var(--hakenT);box-shadow:var(--stahl-kante)}
.vm-zeichen svg{width:28px;height:28px}
.vm-weiter{position:relative;margin-top:34px!important;font-size:14.5px}
.vm-weiter a{color:var(--t2);text-decoration:underline;text-decoration-color:var(--linie2);text-underline-offset:3px}
@media (max-width: 700px){ .vm-seite{padding:40px 0 80px;min-height:0} .vm-karte{padding:34px 22px 28px;border-radius:26px} .vm-stand h2{font-size:28px} .vm-stand .knopf{width:100%} }

/* Hinweis auf die andere Sprache, nur wenn der Browser sie bevorzugt */
.sprach-hinweis{position:fixed;left:50%;top:84px;z-index:65;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:10px 10px 10px 18px;border-radius:999px;
  background:var(--glas);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px var(--glas-rand);font-size:14px;white-space:nowrap}
.sprach-hinweis[hidden]{display:none}
.sprach-hinweis a{font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--t3)}
.sprach-hinweis button{width:30px;height:30px;border-radius:50%;background:var(--zweit);font-size:17px;line-height:1}

/* Figur: ohne Skript das Standbild der MP4-Schleife, mit Skript die Leinwand */
.fig video{display:block;width:100%;height:auto;aspect-ratio:900/644;object-fit:contain}
.fig canvas[hidden]{display:none}
/* Sobald die Leinwand zeichnet, liegt sie über dem Video; das Video bleibt für Suchmaschinen im Dokument */
.fig canvas{position:absolute;inset:0;height:100%}
.fig.gezeichnet video{visibility:hidden}

/* Teile der W5-Texte ohne eigene W4-Form */
.lese-liste{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.lese-liste li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;font-size:17px;line-height:1.55;color:#C4C9CE}
.lese-liste li svg{width:22px;height:22px;margin-top:2px;color:var(--t1)}
.q-notiz{display:block;margin-top:3px;font-size:.92em;color:var(--t3)}
.klein-q .q-notiz{display:none}
.vw-karte span{font-weight:400;font-size:14.5px;line-height:1.45;color:var(--t2)}
.vw-karte .vw-fakten{margin-top:6px;font-size:13px;font-weight:600;color:var(--t3)}
.uebersicht{margin-top:72px}
.ue-gruppe{margin-top:36px;font:600 20px/1.2 Mona,system-ui;font-stretch:112%}
.ue-gruppe + .var-reihe{margin-top:14px}
.uebersicht .stand{margin-top:24px!important}
.uebersicht-lese{margin-top:8px}
.drei .pl-warum-h{font:600 20px/1.2 Mona,system-ui;font-stretch:112%;text-wrap:balance}
.drei .lese-liste li{font-size:15.5px}
.ps-zeit h2.st-k{margin-bottom:18px}
.ps-rechts h2.st-k{margin-bottom:14px}
.wi-uhr img{display:block;width:240px;height:auto}
.ue-fakten{margin-top:22px}
.pl-text + .pl-text{margin-top:24px}
.v-recht .lese{margin-top:48px}
@container (max-width: 700px){
  .uebersicht{margin-top:48px}
  .lese-liste li{font-size:15.5px}
  .wi-uhr img{width:200px}
}
@media (max-width: 700px){ .vormerken{bottom:16px} .sprach-hinweis{top:68px;font-size:13px} }
@media (prefers-reduced-motion: reduce){ html.lebt .vormerken.offen{animation:none} }
/* Lagen über der Seite liegen außerhalb der .site (sie hält feste Positionen fest, wie beim großen QR-Code der Runde) */
.lagen{font:17px/1.5 -apple-system,"SF Pro Text",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.lagen :is(h1,h2,h3,p){margin:0}
.lagen a{color:inherit;text-decoration:none}
.lagen button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.lagen .sprach-hinweis button{background:var(--zweit)}
.lagen :is(a,button):focus-visible{outline:2px solid var(--t1);outline-offset:3px;border-radius:8px}