*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--grund);color:var(--tinte)}
/* Wortabstand (Chris, 26.10.2026: "kein erkennbarer Abstand zwischen den Woertern"): das Leerzeichen der Origin ist
   nur 0,22 Versalhoehen breit, das der Akzidenz war 0,41 (292/706). Ziel = Akzidenz-Verhaeltnis: 0,414 x 690 = 286
   Einheiten. Origin hat 151, die Sperrung zieht 10 ab -> +145 Einheiten = 0,145 em. */
/* an JEDEM Element setzen: auf html allein rechnet em einmal mit 16 px und vererbt den festen Wert (gemessen: 2,3 px im
   About-Text statt 7,3 px) */
/* 29.10.2026: gilt nur noch fuer die Display-Fassung (grosse Schrift). Die Text-Fassung hat ein breiteres Leerzeichen (208). */
.display{font-family:var(--schrift-display);letter-spacing:var(--sperrung-display);word-spacing:.145em}
.display *{word-spacing:.145em}
body{font-family:var(--schrift);font-weight:700;-webkit-font-smoothing:antialiased;min-height:100vh}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover,a:focus-visible{color:var(--akzent);outline:none}
/* Die eine Auszeichnung: fett, Versalien, Sperrung -25 */
.marke{font-size:var(--t-klein);letter-spacing:var(--sperrung);-webkit-text-stroke:var(--strich) currentColor;text-transform:uppercase;line-height:1;font-weight:700}
/* Pfeil (module/kopf.js): versalhoch, auf der Grundlinie, in der Farbe der Schrift */
.pfeil{display:inline-block;height:.69em;width:auto;aspect-ratio:800/690;vertical-align:baseline;fill:currentColor;overflow:visible}
.uhr-zeit i{display:inline-block;width:.7em;text-align:center;font-style:normal}
/* Titel (Pfade): Hoehe aus --cap-titel, gesetzt von module/typo.js */
.titelpfad svg{display:block;height:auto;fill:currentColor}
.zahl{font-variant-numeric:tabular-nums}
/* Kopf- und Fusszeile: liegen ueber allem, Rand = --rand */
.kopf,.fuss{position:fixed;left:var(--rand);right:var(--rand);z-index:12;display:flex;justify-content:space-between;align-items:baseline;pointer-events:none}
.kopf{top:var(--rand)} .fuss{bottom:var(--rand)}
.kopf>*,.fuss>*{pointer-events:auto}
.nav{display:flex;gap:1.6em}
.nav a[aria-current="page"]{color:var(--akzent)}
.dunkel{background:var(--dunkel);color:var(--grund)}
.dunkel .kopf,.dunkel .fuss{color:var(--grund)}
button.marke{background:none;border:0;color:inherit;cursor:pointer}
/* Knoepfe erben die eine Auszeichnung (Browser setzen sonst ihre Systemschrift) */
button{font:inherit;letter-spacing:inherit;text-transform:inherit;-webkit-text-stroke:inherit}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important}}

/* Raster-Einblendung (Taste G): Rand in Orange, 12 Spalten */
.raster{position:fixed;inset:0;z-index:9999;pointer-events:none}
body.start .raster{--rand:var(--rand-cover)}
.raster-spalten{position:absolute;inset:0 var(--rand);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--steg)}
.raster-spalten i{background:rgba(255,106,0,.07);border-left:1px solid rgba(255,106,0,.25);border-right:1px solid rgba(255,106,0,.25)}
.raster-rand{position:absolute;left:var(--rand);right:var(--rand);top:var(--rand);bottom:var(--rand);outline:1px solid #ff6a00}
.raster-info{position:absolute;right:var(--rand);bottom:calc(var(--rand) / 3);color:#ff6a00}

/* SEITENWECHSEL (Chris, 26.09.2026): auch zwischen getrennten Seiten derselbe Vorhang wie auf der Hauptseite.
   Die neue Seite schiebt sich in 900 ms von unten ueber die alte, die alte weicht leicht nach oben aus.
   View Transitions ueber Dokumentgrenzen: Chrome, Edge, Safari 18.2+. Firefox wechselt ohne Bewegung. */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:var(--vorhang)}
::view-transition-old(root){animation:vt-alt var(--vorhang) var(--expo) both}
::view-transition-new(root){animation:vt-neu var(--vorhang) var(--expo) both}
@keyframes vt-neu{from{transform:translateY(100%)}to{transform:none}}
@keyframes vt-alt{from{transform:none}to{transform:translateY(-12vh)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* Rechtstexte (Chris, 05.11.2026): besser strukturiert. (1) als haengende Nummer, a) b) c) und Punkte als Liste, der Wortlaut ist
   unveraendert (bau_klick.py). Schrift wie auf der ganzen Seite: Origin ExtraBold Text, nur Versalien. Nie davon abweichen. */
.legal-text{font-family:var(--schrift);font-weight:700;text-transform:uppercase}
.legal-text h3{margin:2.6em 0 1em}
.legal-text h3:first-child{margin-top:0}
.legal-text h4{font:inherit;margin:1.8em 0 .5em;color:#fbfbfb}
.legal-text h4:first-child{margin-top:0}
.legal-text p{margin:0 0 1em}
.legal-text .abs{display:grid;grid-template-columns:2.2em 1fr;margin:0 0 1em}
.legal-text .abs p:last-child{margin-bottom:0}
.legal-text ul{list-style:none;margin:0 0 1em;padding:0}
.legal-text li{position:relative;padding-left:1.1em;margin:0 0 .35em}
.legal-text li::before{content:'\2022';position:absolute;left:0}
.legal-text ul.abc li{display:grid;grid-template-columns:1.7em 1fr;padding-left:0}
.legal-text ul.abc li::before{content:none}
/* Leseeffekt (module/lesen.js): unter der Lesekante grau, darueber voll */
.legal-text .w{opacity:.3;transition:opacity .45s ease}
.legal-text .w.an{opacity:1}
@media (prefers-reduced-motion:reduce){.legal-text .w{opacity:1}}