/* ==================================================================
   HAUSWERK — „Das Haus"
   Die Bauordnung der Seite ist die Wiener Gruenderzeitfassade. Die
   Trenner sind keine Linien, sondern Gesimse: Eierstab, Zahnschnitt,
   Maeander, Perlstab — nachgezeichnet, nicht zitiert. Grund ist
   Goldocker in Kalk (Schoenbrunner Gelb); nachts kehrt sich das um,
   dann ist der Ocker die Schrift.

   ZUR KASKADE: diese Datei ist die einzige Farbquelle der Seite. Jede
   Fassung steht deshalb dreimal — hell auf blankem :root, dunkel unter
   prefers-color-scheme mit :not([data-theme="light"]), und dunkel unter
   [data-theme="dark"]. Wer eine Lage weglaesst, baut den Fehler wieder
   ein, an dem die Nachtfassung schon einmal unsichtbar war: eine
   spezifischere Regel aus einer frueheren Datei sticht ein blankes :root.
   ================================================================== */

:root {
  --a-grund:  #E5D6B2;
  --a-blatt:  #F3EBD8;
  --a-tinte:  #241C12;
  --a-matt:   #7A6A4E;
  --a-linie:  #C6B187;
  --a-fein:   #D8C9A4;
  --a-akzent: #9A2B1B;
  /* Ueberschriften tragen auf dunklem Grund das Gelb, das vorher der Fliesstext
     hatte; der Fliesstext selbst steht dort weiss. Auf hellem Grund ist beides
     dieselbe dunkle Tinte — Ocker auf Creme waere unlesbar. */
  --a-ueber:  #241C12;
  /* Zierwerk: Fassade, Gesimse, Schlussstein. Sie folgen NICHT dem Fliesstext —
     der steht auf dunklem Grund weiss, die Zeichnung bleibt warm. Wer das
     zusammenlegt, macht den Anschlag der Seite kalt. */
  --a-zier:   #7A6A4E;
  /* Der Abbinder ist in BEIDEN Themen dunkel. Frueher nahm er dafuer
     --a-tinte, was sich mit dem Thema drehte; seit der Fliesstext weiss ist,
     waere daraus im Dunkelmodus ein weisser Fuss geworden. */
  --a-nacht:  #241C12;
  --a-hell:   #F5F2EC;
  --a-gelb:   #E8D9B6;
  --a-rand:   clamp(1.15rem, 6vw, 5rem);
  --a-kopf:   3.6rem;   /* Hoehe der Kopfleiste, fuer die klebenden Marginalien */
  --a-luft:   clamp(3rem, 7vw, 5.5rem); /* Luft ueber und unter jedem Abschnitt */
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --a-grund: #12100B; --a-blatt: #1A1610; --a-tinte: #FFFFFF;
    --a-matt: #E0DCD4; --a-linie: #3A2E1D; --a-fein: #241D12; --a-akzent: #DE6A4F;
    --a-ueber: #E8D9B6; --a-nacht: #1C1811; --a-zier: #8C7C58;
  }
}
:root[data-theme="dark"] {
  --a-grund: #12100B; --a-blatt: #1A1610; --a-tinte: #FFFFFF;
  --a-matt: #E0DCD4; --a-linie: #3A2E1D; --a-fein: #241D12; --a-akzent: #DE6A4F;
  --a-ueber: #E8D9B6; --a-nacht: #1C1811; --a-zier: #8C7C58;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--a-grund);
  color: var(--a-tinte);
  font-family: "Newsreader", "Iowan Old Style", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.02rem, .38vw + .94rem, 1.14rem);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
::selection { background: var(--a-akzent); color: var(--a-blatt); }
:focus-visible { outline: 1px solid var(--a-akzent); outline-offset: 4px; }
a { color: inherit; }
p { margin: 0; }

.h-bogen { max-width: 74rem; margin-inline: auto; padding-inline: var(--a-rand); }

/* Fuer die Tastatur: der erste Sprung geht an der Kopfleiste vorbei. */
.h-sprung {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--a-tinte); color: var(--a-grund);
  padding: .7rem 1.1rem; font-family: "IBM Plex Mono", monospace; font-size: .8rem;
}
.h-sprung:focus { left: 0; }

/* ---- Schrift ----------------------------------------------------
   Die Didone ist die Stimme dieser Seite — aber im Gemischtsatz und im
   schweren Schnitt. Versalien plus Sperrung plus Haarstriche waren zu
   dritt zu viel: die Schlagzeile war ein Plakat, kein Satz. Unterhalb
   von etwa 1,2 rem reissen Bodonis Haarstriche ohnehin ab; ab dort
   uebernimmt Newsreader, die Leseschrift. */
h1, h2 {
  font-family: "Bodoni Moda", "Bodoni 72", "Didot", Georgia, serif;
  font-weight: 600; margin: 0; line-height: 1.14; text-wrap: balance;
  color: var(--a-ueber);
  /* Die optische Groesse wird erzwungen, nicht dem Browser ueberlassen.
     Bei 3,6 rem stellt der sie automatisch auf ~57 — die Plakatzeichnung
     mit maximalem Strichkontrast, und dort verschwindet der linke Schaft
     des U fast ganz: „Uhr" zerfiel in zwei Striche. Bei opsz 12 zeichnet
     dieselbe Bodoni kraeftigere Duennen. */
  font-variation-settings: "opsz" 12, "wght" 600;
}
h1 { font-size: clamp(2rem, 5.2vw, 3.6rem); letter-spacing: -.014em; line-height: 1.04; }
h2 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); letter-spacing: -.008em; }
h3, h4 {
  font-family: "Newsreader", Georgia, serif; font-weight: 600; margin: 0;
  color: var(--a-ueber);
  font-size: 1.06rem; letter-spacing: -.004em; line-height: 1.28; text-wrap: balance;
}
.h-kapitel {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--a-matt);
}
.h-kapitel b { color: var(--a-akzent); font-weight: 500; }

/* ---- Gesimse: die Trenner dieser Seite -----------------------------
   Vier Baender — Eierstab, Zahnschnitt, Maeander, Perlstab. Sie liegen als
   MASKE auf einem Grund aus currentColor, nicht als eingebettetes SVG mit
   <pattern>. Drei Gruende, alle aus Fehlern:

   1. `mask-position: center` kachelt AUS DER MITTE. Das <pattern> begann
      links bei x=0: links stand ein ganzes Ei, rechts brach es mitten im
      Ei ab. Die Seite hatte damit einen sauberen und einen ausgefransten
      Rand. Jetzt sind beide Enden gleich geschnitten — so, wie ein Gesims
      an der Hausecke abgeschnitten ist.
   2. Der Grund ist currentColor, die Maske traegt nur die Form. Die Baender
      folgen damit weiter dem Thema, dem data-stark und dem Abbinder.
   3. Die Muster lagen siebenmal im Dokument, jedes mit eigener id — und
      bauen-index.py musste Ersatznamen vergeben, damit sich zwei gleiche
      Baender nicht dieselbe id teilen.

   Die Deckungswerte IN der Maske sind die Deckung des Zierstuecks: voll
   weiss ist Stein im Licht, halbtransparent ist der Schatten. Alle vier
   Baender sind 15 hoch, damit die Seite ueberall dasselbe Gesimsgewicht
   hat — vorher waren es 14, 13, 15 und 9, und zwei davon trugen ihre
   eigenen Riemchen, zwei nicht. */
.h-gesims {
  position: relative;
  height: 25px;
  color: var(--a-zier);
  background:
    linear-gradient(currentColor, currentColor) left top    / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
}
/* mask-repeat: ROUND, nicht repeat-x. Der Browser staucht oder streckt die
   Kachel dann so, dass eine GANZE Zahl davon in die Breite passt — das Band
   faengt mit einem vollen Motiv an und hoert mit einem vollen auf. Mit
   repeat-x und mask-position:center war es an beiden Enden gleich, aber eben
   gleich MITTENDURCH geschnitten: links ein halbes Ei, rechts ein halber
   Pfeil. So setzt kein Steinmetz ein Gesims ab.
   Dafuer braucht round eine ausgerechnete Kachelbreite statt auto — sonst
   hat er nichts, woran er runden kann. Sie steht je Band als --zier-b.
   Und der Anschlag muss LINKS liegen, nicht mittig: bei gerader Kachelzahl
   verschiebt center die Kachel um eine halbe Breite, und dann faengt das
   Band trotz round wieder mitten im Motiv an. */
.h-gesims::before {
  content: ""; position: absolute; inset: 5px 0;
  background: currentColor; opacity: .9;
  -webkit-mask-image: var(--zier);        mask-image: var(--zier);
  -webkit-mask-repeat: round;             mask-repeat: round;
  -webkit-mask-position: left center;     mask-position: left center;
  -webkit-mask-size: var(--zier-b) 15px;  mask-size: var(--zier-b) 15px;
}
/* Ohne Maskenunterstuetzung waere das ::before ein deckender Balken.
   Dann bleiben die zwei Riemchen — ein Trenner, nur ohne Zierat. */
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .h-gesims::before { display: none; }
}
.h-gesims[data-stark="ja"] { color: var(--a-ueber); }
.h-gesims[data-stark="ja"]::before { opacity: .74; }

/* Eierstab: Ei in der Schale, dazwischen der Pfeil. Der Pfeil war eine
   Raute — oben so breit wie unten. Ein Blattpfeil sitzt oben breit und
   laeuft nach unten in eine Spitze aus. */
.h-gesims[data-zier="eierstab"] { --zier-b: 24px; --zier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='15'%3E%3Cpath d='M0.7 14.4 A6.8 12.6 0 0 1 14.3 14.4 L12.4 14.4 A5 10.2 0 0 0 2.6 14.4 Z' fill='white' opacity='.6'/%3E%3Cellipse cx='7.5' cy='9' rx='3.8' ry='4.9' fill='white' opacity='.85'/%3E%3Cpath d='M19.5 1.4 21.5 6.2 19.5 14.4 17.5 6.2 Z' fill='white' opacity='.68'/%3E%3C/svg%3E"); }
/* Zahnschnitt: schlichte Zahnbloecke, so wie am Kranzgesims der Fassade.
   Die Luecke war fast so breit wie der Zahn; am Bau ist sie gut halb so
   breit, sonst zerfaellt die Reihe in Punkte. */
.h-gesims[data-zier="zahnschnitt"] { --zier-b: 13.6px; --zier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.6' height='15'%3E%3Crect x='2.7' y='.8' width='8.2' height='13.4' fill='white' opacity='.72'/%3E%3C/svg%3E"); }
/* Maeander: mit DURCHLAUFENDEM Riemchen. Ohne das zerfiel das Band in
   einzelne Kaestchen — ein Maeander laeuft, das ist sein ganzer Witz. */
.h-gesims[data-zier="maeander"] { --zier-b: 20px; --zier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15'%3E%3Cg fill='none' stroke='white' stroke-width='2' opacity='.72'%3E%3Cpath d='M0 12.5H20'/%3E%3Cpath d='M15.5 12.5V3H4V8.8H10.5'/%3E%3C/g%3E%3C/svg%3E"); }
/* Perlstab: Perle und Spule, wie am Kordongesims. Beide stiessen fast
   aneinander und verschmolzen zu einer Kette; jetzt steht vor und hinter der
   Spule derselbe Abstand. */
.h-gesims[data-zier="perlstab"] { --zier-b: 18px; --zier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='15'%3E%3Ccircle cx='5' cy='7.5' r='4.5' fill='white' opacity='.78'/%3E%3Cellipse cx='14' cy='7.5' rx='1.9' ry='5.4' fill='white' opacity='.62'/%3E%3C/svg%3E"); }

/* ---- Kopf ---- */
.h-kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--a-grund);
  border-bottom: 1px solid var(--a-linie);
}
.h-kopf .h-bogen { display: flex; align-items: baseline; gap: 2.2rem; padding-block: 1rem; }
.h-wort {
  font-family: "Bodoni Moda", Didot, Georgia, serif; font-weight: 400; font-size: 1rem;
  /* Zurueck auf die kleine Fassung: doppelt so gross erschlug sie den Anschlag,
     und die Zurueckhaltung am Kopf ist der Punkt dieser Gestaltung. Wer sie
     wieder gross will, aendert hier zwei Werte — bei 2 rem muss die Sperrung
     auf .16em fallen, sonst reisst sie das Wort auseinander. */
  letter-spacing: .26em; text-transform: uppercase; margin-right: auto; text-decoration: none;
  color: var(--a-ueber); line-height: 1;
  font-variation-settings: "opsz" 12, "wght" 400;
}
.h-kopf nav { display: flex; gap: 1.7rem; }
.h-kopf nav a {
  font-family: "IBM Plex Mono", monospace; font-size: .74rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--a-matt);
  padding-bottom: .2rem; border-bottom: 1px solid transparent; text-decoration: none;
  transition: color .45s ease, border-color .45s ease;
}
.h-kopf nav a:hover { color: var(--a-tinte); border-bottom-color: var(--a-akzent); }
@media (max-width: 900px) { .h-kopf nav { display: none; } }

/* ---- Anschlag: Text links, Fassade rechts ---- */
.h-anschlag { padding-block: clamp(2.6rem, 7vw, 5rem) 0; }
.h-anschlag .h-bogen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 27rem);
  gap: clamp(1.8rem, 5vw, 4.5rem); align-items: end;
}
@media (max-width: 900px) { .h-anschlag .h-bogen { grid-template-columns: 1fr; align-items: start; } }
.h-anschlag .h-kapitel { display: block; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.h-anschlag h1 { max-width: 15ch; }
.h-anschlag .h-fuehrend { margin-top: 1.6rem; font-size: 1.2em; line-height: 1.52; max-width: 34ch; }
.h-anschlag .h-fuehrend em { font-style: normal; color: var(--a-akzent); }
.h-anschlag .h-nach { margin-top: 1rem; color: var(--a-matt); max-width: 40ch; }
.h-anschlag .h-nach b { color: var(--a-tinte); font-weight: 500; }

.h-wege { display: flex; gap: 2.2rem; flex-wrap: wrap; margin-top: 2rem; padding-bottom: 2.4rem; }
.h-weg {
  font-family: "IBM Plex Mono", monospace; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  padding-bottom: .45rem; border-bottom: 1px solid var(--a-tinte);
  background: none; border-inline: 0; border-top: 0; color: inherit; cursor: pointer;
  transition: color .4s ease, border-color .4s ease, letter-spacing .4s ease;
}
.h-weg:hover { color: var(--a-akzent); border-bottom-color: var(--a-akzent); letter-spacing: .13em; }
.h-weg.h-still { color: var(--a-matt); border-bottom-color: var(--a-linie); }

/* ---- Die Fassade ---- */
.h-riss { align-self: end; position: relative; margin: 0; }
.fassade { width: 100%; height: auto; display: block; color: var(--a-ueber); opacity: .92;
           --f-grund: var(--a-grund); }
.fassade .f-frist { color: var(--a-akzent); }
.h-riss figcaption {
  margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--a-linie);
  font-size: .84rem; color: var(--a-matt); line-height: 1.55;
}
.h-riss .h-bauteile { display: block; margin-top: .45rem; }
.h-riss figcaption b { color: var(--a-akzent); font-weight: 400; }
.uhr-notiz {
  display: block; margin-bottom: .5rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--a-fein); color: var(--a-tinte);
}
.uhr-notiz .uhr-wer { color: var(--a-matt); font-style: normal; }
.uhr-notiz .uhr-zeit { font-variant-numeric: tabular-nums; }
.uhr-notiz[data-sie="ja"] .uhr-zeit,
.uhr-notiz[data-sie="ja"] .uhr-wer { color: var(--a-akzent); }

/* ==================================================================
   DIE UHR AM DACHANSATZ
   Zwoelf Stunden, nicht vierundzwanzig — deshalb zwei Spuren: aussen
   der erste Umlauf (00–12), innen der zweite. Farbe kommt aus
   --uhr-akzent; alles andere folgt currentColor, damit die Uhr beiden
   Themen folgt.
   ================================================================== */
.uhr { --uhr-akzent: var(--a-akzent); }
.u-treffer { stroke: none; cursor: pointer; }
.u-ziel { cursor: pointer; }
/* Striche, Ziffern, Zeiger und der Aufsatz fangen keine Klicks ab —
   sonst laege der Stundenzeiger ueber dem Zifferblatt-Ziel. */
.u-strich, .u-ziffer, .u-nacht, .u-blatt, .u-reif,
.u-stunde, .u-minute, .u-sekunde, .u-nabe, .u-aufsatz { pointer-events: none; }
.u-punkt { fill: currentColor; stroke: none; opacity: .72; transition: opacity .18s ease; }
.u-schritt:hover .u-punkt,
.u-schritt:focus-visible .u-punkt { opacity: 1; }
.u-schritt:focus { outline: none; }
.u-schritt:focus-visible .u-treffer { stroke: var(--uhr-akzent); stroke-width: 1.2; }
/* Der Punkt, zu dem die offene Box gehoert — wichtig beim Blaettern,
   sonst weiss niemand, welche Stunde gerade im Kasten steht. */
.u-schritt[aria-current="true"] .u-treffer { stroke: var(--uhr-akzent); stroke-width: 1.2; opacity: .85; }
.u-schritt[aria-current="true"] .u-punkt { fill: var(--uhr-akzent); opacity: 1; }
.u-sie .u-punkt { fill: var(--uhr-akzent); opacity: 1; }
.u-ziffer { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; fill: currentColor; stroke: none; opacity: .8; }
.u-strich { stroke-width: .7; opacity: .4; }
.u-strich.u-voll { stroke-width: 1.3; opacity: .82; }
.u-nacht { stroke: currentColor; stroke-width: 2.4; opacity: .13; stroke-linecap: round; }
.u-stunde  { stroke-width: 2.4; stroke-linecap: round; }
.u-minute  { stroke-width: 1.5; stroke-linecap: round; }
.u-sekunde { stroke: var(--uhr-akzent); stroke-width: .8; stroke-linecap: round; }
.u-nabe { fill: currentColor; stroke: none; }

/* ---- Die Textbox am Zifferblatt ----
   Sie haengt im selben Feld wie die Fassade und stellt sich unter die
   Uhr, waagrecht auf den Punkt ausgerichtet und ins Feld hineingeklemmt.
   Am Zeigegeraet erscheint sie beim Ueberfahren, auf Tastatur und am
   Finger beim Ausloesen — dann bleibt sie stehen, bis man sie schliesst.
   Der Blaetterer ‹ › ist bewusst immer da: fuenf Punkte liegen zwischen
   03:00 und 03:16, und die trifft auch eine Maus nicht zuverlaessig. */
.uhr-feld { position: relative; }
.uhr-blase {
  position: absolute; z-index: 8;
  width: min(23rem, 100%);
  background: var(--a-blatt); color: var(--a-tinte);
  border: 1px solid var(--a-linie);
  box-shadow: 0 16px 38px -22px rgba(0, 0, 0, .6);
  padding: .65rem .8rem .7rem;
  font-size: .875rem; line-height: 1.5;
  --uhr-akzent: var(--a-akzent);
}
.uhr-blase[hidden] { display: none !important; }
.uhr-blase::before {
  content: ""; position: absolute; top: -5px; left: var(--pfeil, 50%);
  width: 8px; height: 8px; margin-left: -4px;
  background: var(--a-blatt);
  border-left: 1px solid var(--a-linie);
  border-top: 1px solid var(--a-linie);
  transform: rotate(45deg);
}
.ub-kopf { display: flex; align-items: baseline; gap: .5rem; }
.ub-zeit { font-variant-numeric: tabular-nums; color: var(--a-akzent); }
.ub-titel { font-weight: 600; margin-right: auto; }
.ub-text { margin: .35rem 0 .55rem; color: var(--a-matt); }
.ub-fuss { display: flex; align-items: center; gap: .75rem; padding-top: .45rem; border-top: 1px solid var(--a-linie); }
.ub-wer { margin-right: auto; font-size: .78em; letter-spacing: .04em; text-transform: uppercase; color: var(--a-matt); }
.uhr-blase[data-sie="ja"] .ub-wer { color: var(--a-akzent); }
.ub-blaettern { display: flex; align-items: center; gap: .15rem; }
.ub-stand { font-size: .74em; color: var(--a-matt); font-variant-numeric: tabular-nums; min-width: 3.1em; text-align: center; }
.uhr-blase button {
  appearance: none; background: transparent; cursor: pointer;
  border: 1px solid var(--a-linie); color: inherit; font: inherit; line-height: 1;
  min-width: 2rem; min-height: 2rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s ease, color .15s ease;
}
.uhr-blase button:hover { border-color: currentColor; }
.ub-zu { font-size: 1.1em; }

/* Am Finger gibt es kein Ueberfahren, und die Punkte sind dort nur
   wenige Pixel gross: die Trefferflaeche waechst mit. Wo der Browser `r`
   als CSS-Eigenschaft nicht kennt, bleibt der Blaetterer der sichere Weg. */
@media (pointer: coarse) {
  .u-treffer { r: 11px; }
  .uhr-blase { width: 100%; font-size: .9375rem; }
  .uhr-blase button { min-width: 2.5rem; min-height: 2.5rem; }
}
.u-schritt { touch-action: manipulation; }

/* ---- Stucktafel: der Absatz, der etwas will ---- */
.h-tafel { background: var(--a-blatt); border-block: 1px solid var(--a-linie); }
.h-tafel .h-bogen { padding-block: clamp(3rem, 8vw, 5.5rem); display: grid; justify-items: center; }
.schlussstein { width: 62px; height: auto; color: var(--a-zier); margin-bottom: 1.8rem; }
.h-tafel .h-satzung { max-width: 34rem; text-align: center; }
.h-tafel p { font-size: 1.16em; line-height: 1.72; }
.h-tafel p + p { margin-top: 1.15rem; }
.h-tafel .h-gross {
  color: var(--a-ueber);
  font-family: "Bodoni Moda", Didot, Georgia, serif; font-weight: 600;
  font-variation-settings: "opsz" 12, "wght" 600;
  letter-spacing: -.01em; line-height: 1.22; font-size: clamp(1.35rem, 3vw, 1.95rem);
}
.h-tafel .h-zart { color: var(--a-matt); font-size: 1em; }
.h-tafel em { font-style: normal; color: var(--a-akzent); }

/* ---- Abschnitt mit Marginalspalte ---- */
.h-abschnitt { padding-block: var(--a-luft); }
.h-abschnitt[data-grund="blatt"] { background: var(--a-blatt); }
.h-abschnitt[data-grund="blatt"], .h-beleg { border-block: 1px solid var(--a-linie); }
.h-gesims + .h-abschnitt[data-grund="blatt"],
.h-gesims + .h-beleg,
.h-gesims + .h-tafel { border-top: 0; }
.h-abschnitt[data-grund="blatt"]:has(+ .h-gesims),
.h-beleg:has(+ .h-gesims),
.h-tafel:has(+ .h-gesims) { border-bottom: 0; }
/* Der Abbinder fuehrt sein Gesims selbst — das liegt innen, ist also kein
   Nachbar und wurde von der Regel darueber nicht erfasst. Ohne das standen
   ueber dem Fuss zwei Striche fuenf Pixel auseinander. */
.h-abschnitt[data-grund="blatt"]:has(+ .h-abbinder),
.h-beleg:has(+ .h-abbinder) { border-bottom: 0; }
.h-satz { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 4rem); align-items: start; }
@media (max-width: 860px) { .h-satz { grid-template-columns: 1fr; gap: 1.4rem; } }
/* Die Marginalie laeuft beim Scrollen mit — in JEDER Breite. Sie unter 860 px
   stillzustellen war die falsche Antwort auf das Durchscheinen; richtig ist ein
   deckender Grund, denn was hier durchscheint, ist Schrift.

   Der Abstand zur Kopfleiste liegt INNEN (padding-top), nicht im top-Wert:
   stuende er aussen, bliebe zwischen Leiste und Marginalie ein Spalt, durch den
   der Text weiterhin sichtbar durchlaeuft. Und weil die Leiste je nach Breite
   verschieden hoch ist — ab 900 px faellt die Navigation weg —, deckt ein
   Vorsatz den Grund zusaetzlich nach oben ab, statt sich auf eine gerechnete
   Hoehe zu verlassen. */
.h-satz > header {
  position: sticky; top: var(--a-kopf);
  background: var(--a-grund);
  padding-block: 1.1rem .9rem;
}
/* Nicht hoeher als die Luft des Abschnitts: bei 5rem festen Hoehe ragte der
   Streifen unter ~1140px Breite (Luft = 7vw < 80px) ueber den Abschnittsanfang
   hinaus — ueber das Gesims davor und, wo der Nachbar einen anderen Grund hat,
   als Fremdfarbflaeche in den vorigen Abschnitt. Waehrend die Marginalie klebt,
   ist alles oberhalb von --a-kopf ohnehin unsichtbar. */
.h-satz > header::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: var(--a-luft); background: inherit;
}
.h-abschnitt[data-grund="blatt"] .h-satz > header { background: var(--a-blatt); }
/* In einer Spalte sitzt die Marginalie ueber dem Text und wuerde sonst den
   halben Schirm belegen: dort klebt nur ihre Ueberschrift, der Vorspann rollt
   mit weg. */
@media (max-width: 860px) {
  .h-satz > header { padding-block: .9rem .7rem; }
  .h-satz > header p { display: none; }
}
.h-satz > header p { margin-top: .9rem; font-size: .9rem; color: var(--a-matt); line-height: 1.6; }
.h-satz > header .h-kapitel { display: block; margin-bottom: .55rem; }
.h-fein { margin-top: 1.6rem; font-size: .82rem; color: var(--a-matt); line-height: 1.6; }

/* ---- Der Lauf des Tages ---- */
.h-uhr { display: grid; }
.h-stunde {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.2rem); padding-block: 1.3rem;
  border-bottom: 1px solid var(--a-fein); align-items: baseline;
}
.h-stunde:first-child { border-top: 1px solid var(--a-fein); }
.h-zeit { font-family: "IBM Plex Mono", monospace; font-size: .82rem; color: var(--a-matt); font-variant-numeric: tabular-nums; }
.h-stunde[data-hand="sie"] .h-zeit { color: var(--a-akzent); }
.h-stunde h3 { margin-bottom: .45rem; }
.h-stunde p { font-size: .96rem; color: var(--a-matt); line-height: 1.62; max-width: 52ch; }
.h-hand {
  display: inline-block; margin-top: .55rem;
  font-family: "IBM Plex Mono", monospace; font-size: .68rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--a-matt);
}
.h-stunde[data-hand="sie"] .h-hand { color: var(--a-akzent); }

/* ---- Belege: die Ansichten aus dem Programm ---- */
.h-beleg { background: var(--a-blatt); padding-block: clamp(2.6rem, 6vw, 4.5rem); }
.h-beleg > .h-bogen > .h-kapitel { display: block; }
.h-beleg h2 { margin-top: .55rem; }
.h-beleg .h-fuehrung { margin-top: 1rem; max-width: 58ch; color: var(--a-matt); font-size: .98rem; }
.h-beleg .h-fuehrung b { color: var(--a-tinte); font-weight: 500; }
.h-beleg figure { margin: clamp(2rem, 5vw, 3.4rem) 0 0; }
/* height: auto ist Pflicht: die width/height-Attribute geben das Seitenverhaeltnis
   fuer den Platzhalter vor, aber ohne height: auto blieb die Hoehe beim Attributwert
   (618 px) haengen, sobald die Spalte schmaler als 1600 px war — das Bild wurde in
   jeder Breite unter 1600 px in die Hoehe gezogen, mobil um das 4,7-fache. */
.h-beleg img { border: 1px solid var(--a-linie); width: 100%; height: auto; }
.h-beleg figcaption { margin-top: 1.3rem; display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 4rem); }
@media (max-width: 860px) { .h-beleg figcaption { grid-template-columns: 1fr; gap: .8rem; } }
.h-beleg figcaption p { color: var(--a-matt); font-size: .96rem; max-width: 60ch; }
.h-beleg figcaption b { color: var(--a-tinte); font-weight: 500; }

/* ---- Rechenwerke und alle anderen Begriffslisten ---- */
.h-paragraphen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 4rem); margin: 0; }
@media (max-width: 720px) { .h-paragraphen { grid-template-columns: 1fr; } }
.h-paragraphen[data-spalten="1"] { grid-template-columns: 1fr; }
.h-para { padding-block: 1.1rem; border-bottom: 1px solid var(--a-fein); }
.h-para dt {
  font-family: "IBM Plex Mono", monospace; font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--a-akzent); margin-bottom: .3rem;
}
.h-para dt a { text-decoration: none; border-bottom: 1px solid currentColor; }
.h-para dd { margin: 0; font-size: .94rem; color: var(--a-matt); line-height: 1.6; }
.h-para dd b { color: var(--a-tinte); font-weight: 500; }

/* ---- Haltung: drei Spalten ohne Kasten ---- */
.h-haltung { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 4vw, 3.2rem); }
@media (max-width: 860px) { .h-haltung { grid-template-columns: 1fr; } }
.h-haltung > div { border-top: 1px solid var(--a-tinte); padding-top: 1rem; }
.h-haltung h3 { margin-bottom: .55rem; }
.h-haltung p { font-size: .94rem; color: var(--a-matt); line-height: 1.62; }

/* ---- Marktbefund: zwei fremde Systeme, dann das eigene ----
   Der Kasten ist bewusst EIN Bauteil und nicht zwei nebeneinander:
   nebeneinander gestellt las es sich, als seien es zwei Produkte
   von uns. Ueberschrift und Schlusssatz halten die Klammer. */
.h-gegenueber { border: 1px solid var(--a-linie); background: var(--a-blatt); }
.h-gegenueber-kopf {
  padding: .7rem clamp(1rem, 3vw, 1.6rem);
  border-bottom: 1px solid var(--a-linie);
  font-family: "IBM Plex Mono", monospace; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--a-matt);
}
.h-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .h-paar { grid-template-columns: 1fr; } }
.h-paar > div { padding: clamp(1.1rem, 3vw, 1.7rem); }
.h-paar > div + div { border-left: 1px solid var(--a-linie); }
@media (max-width: 720px) { .h-paar > div + div { border-left: 0; border-top: 1px solid var(--a-linie); } }
.h-paar h3 { margin: .4rem 0 .5rem; }
.h-paar p { font-size: .93rem; color: var(--a-matt); line-height: 1.6; }
.h-merksatz {
  padding: clamp(1.1rem, 3vw, 1.7rem);
  border-top: 1px solid var(--a-tinte);
  background: color-mix(in oklab, var(--a-akzent) 7%, transparent);
}
.h-merksatz .h-marke {
  font-family: "Bodoni Moda", Didot, Georgia, serif; font-size: .95rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--a-akzent); margin-bottom: .5rem;
}
.h-merksatz p:last-child { font-size: .98rem; line-height: 1.62; }

/* ---- Angebot: Regler und Stufen ---- */
.h-regelfeld { border: 1px solid var(--a-linie); background: var(--a-blatt); padding: clamp(1.1rem, 3vw, 1.7rem); }
.h-regelfeld label {
  display: block; font-family: "IBM Plex Mono", monospace; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--a-matt); margin-bottom: .8rem;
}
.h-regelfeld output { color: var(--a-akzent); font-variant-numeric: tabular-nums; }
.h-regelfeld input[type="range"] { width: 100%; accent-color: var(--a-akzent); }
.h-lesung { margin-top: .9rem; font-size: .94rem; color: var(--a-matt); }
.h-lesung b { color: var(--a-tinte); font-weight: 500; }
.h-regelfeld .h-wege { margin-top: 1.2rem; padding-bottom: 0; }

.h-stufen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); margin-top: clamp(1.6rem, 4vw, 2.6rem); }
@media (max-width: 860px) { .h-stufen { grid-template-columns: 1fr; } }
.h-stufe { border-top: 1px solid var(--a-linie); padding-top: 1rem; display: flex; flex-direction: column; }
.h-stufe[data-aktiv="ja"] { border-top-color: var(--a-akzent); }
.h-stufe .h-kennung { font-family: "IBM Plex Mono", monospace; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--a-matt); }
.h-stufe h3 { margin: .35rem 0 .5rem; }
.h-stufe .h-zahl {
  color: var(--a-ueber);
  font-family: "Bodoni Moda", Didot, Georgia, serif; font-weight: 600;
  font-variation-settings: "opsz" 12, "wght" 600; font-size: 1.7rem; line-height: 1.1;
}
.h-stufe .h-zahl small { display: block; font-family: "IBM Plex Mono", monospace; font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: var(--a-matt); margin-top: .4rem; }
.h-stufe ul { list-style: none; padding: 0; margin: 1rem 0 1.3rem; }
.h-stufe li { font-size: .92rem; color: var(--a-matt); line-height: 1.5; padding-block: .35rem; border-bottom: 1px solid var(--a-fein); }
.h-stufe .h-weg { align-self: start; margin-top: auto; }

.h-beigaben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: clamp(1.8rem, 4vw, 2.8rem); }
@media (max-width: 860px) { .h-beigaben { grid-template-columns: 1fr; } }
.h-beigaben > div { border-top: 1px solid var(--a-fein); padding-top: .9rem; }
.h-beigaben h4 { margin-bottom: .4rem; }
.h-beigaben p { font-size: .92rem; color: var(--a-matt); line-height: 1.58; }
.h-beigaben .h-marke { display: block; margin-top: .6rem; font-family: "IBM Plex Mono", monospace; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--a-akzent); }

/* ---- Haeufige Fragen ---- */
.h-fragen { border-top: 1px solid var(--a-fein); }
.h-fragen details { border-bottom: 1px solid var(--a-fein); }
.h-fragen summary {
  color: var(--a-ueber); cursor: pointer; padding-block: 1rem; list-style: none;
  font-weight: 600; font-size: 1.02rem; display: flex; gap: 1rem; align-items: baseline;
}
.h-fragen summary::-webkit-details-marker { display: none; }
.h-fragen summary::after {
  content: "+"; margin-left: auto; color: var(--a-akzent);
  font-family: "IBM Plex Mono", monospace; font-size: 1rem;
}
.h-fragen details[open] summary::after { content: "\2013"; }
.h-fragen details p { padding-bottom: 1.1rem; font-size: .95rem; color: var(--a-matt); line-height: 1.65; max-width: 62ch; }

/* ---- Anfrage ---- */
.h-anfrage { margin-top: clamp(2rem, 5vw, 3rem); border: 1px solid color-mix(in oklab, var(--a-hell) 32%, transparent); padding: clamp(1.1rem, 3vw, 1.8rem); }
.h-anfrage .h-kapitel { display: block; margin-bottom: 1.1rem; color: color-mix(in oklab, var(--a-hell) 66%, transparent); }
.h-anfrage .h-kapitel b { color: var(--a-gelb); }
.h-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem clamp(1rem, 3vw, 1.8rem); }
@media (max-width: 640px) { .h-felder { grid-template-columns: 1fr; } }
.h-felder .h-weit { grid-column: 1 / -1; }
.h-felder label, .h-abschriftmarke {
  display: block; font-family: "IBM Plex Mono", monospace; font-size: .66rem;
  letter-spacing: .09em; text-transform: uppercase;
  color: color-mix(in oklab, var(--a-hell) 66%, transparent); margin-bottom: .35rem;
}
.h-felder label span { text-transform: none; letter-spacing: 0; }
.h-anfrage input, .h-anfrage textarea {
  width: 100%; font: inherit; font-size: .95rem;
  background: color-mix(in oklab, var(--a-hell) 8%, transparent);
  color: var(--a-hell);
  border: 1px solid color-mix(in oklab, var(--a-hell) 28%, transparent);
  padding: .5rem .6rem;
}
.h-anfrage input::placeholder, .h-anfrage textarea::placeholder { color: color-mix(in oklab, var(--a-hell) 45%, transparent); }
.h-anfrage input:focus, .h-anfrage textarea:focus { outline: 1px solid var(--a-hell); outline-offset: 1px; }
.h-anfrage .h-wege { margin-top: 1.3rem; padding-bottom: 0; }
.h-anfragehinweis { margin-top: 1.2rem; font-size: .84rem; line-height: 1.6; color: color-mix(in oklab, var(--a-hell) 68%, transparent); max-width: 62ch; }
.h-anfragehinweis a { color: var(--a-gelb); }
.h-abschriftmarke { margin-top: 1.4rem; }
.h-abschrift { font-family: "IBM Plex Mono", monospace; font-size: .78rem; line-height: 1.55; resize: vertical; }
.h-anfragestand { margin-top: .6rem; font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--a-gelb); min-height: 1.2em; }

/* ---- Abbinder = Kranzgesims ----
   Dunkel in BEIDEN Themen, deshalb eigene Token statt --a-tinte/--a-grund:
   die drehen sich mit dem Thema, und seit der Fliesstext weiss ist, waere
   daraus im Dunkelmodus ein weisser Fuss geworden. */
.h-abbinder { background: var(--a-nacht); color: var(--a-hell); }
.h-abbinder .h-gesims { color: color-mix(in oklab, var(--a-gelb) 62%, transparent); }
.h-abbinder .h-bogen { padding-block: clamp(3rem, 8vw, 5.5rem); }
.h-abbinder .h-kapitel { color: color-mix(in oklab, var(--a-hell) 66%, transparent); }
.h-abbinder h2 { color: var(--a-gelb); max-width: 22ch; margin-top: 1.3rem; }
.h-abbinder h3, .h-abbinder h4 { color: var(--a-gelb); }
.h-abbinder p { margin-top: 1.3rem; max-width: 52ch; color: var(--a-hell); }
.h-abbinder .h-weg { border-bottom-color: var(--a-hell); color: var(--a-hell); }
.h-abbinder .h-weg:hover { color: var(--a-gelb); border-bottom-color: var(--a-gelb); }
.h-abbinder .h-weg.h-still { color: color-mix(in oklab, var(--a-hell) 66%, transparent); border-bottom-color: color-mix(in oklab, var(--a-hell) 32%, transparent); }
.h-zeile {
  margin-top: clamp(2.4rem, 5vw, 3.4rem); padding-top: 1.2rem;
  border-top: 1px solid color-mix(in oklab, var(--a-hell) 24%, transparent);
  display: flex; gap: 1.6rem; flex-wrap: wrap;
  font-family: "IBM Plex Mono", monospace; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in oklab, var(--a-hell) 66%, transparent);
}
.h-zeile a { color: inherit; }

/* ---- Rechtsseiten: Impressum, Datenschutz, Fehlerseite ---- */
.h-recht { padding-block: clamp(2.6rem, 7vw, 4.5rem); max-width: 46rem; }
.h-recht h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 1.4rem; }
.h-recht h2 { font-size: clamp(1.1rem, 2vw, 1.35rem); margin-top: 2.4rem; margin-bottom: .7rem; }
.h-recht p, .h-recht li { font-size: .98rem; line-height: 1.7; }
.h-recht p + p { margin-top: .9rem; }
.h-recht ul { padding-left: 1.1rem; margin: .7rem 0; }
.h-recht li { margin-bottom: .35rem; }
.h-recht a { color: var(--a-akzent); }
.h-recht .h-stand { margin-top: 2.6rem; padding-top: 1rem; border-top: 1px solid var(--a-linie); font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--a-matt); }
/* Die offenen Angaben sind als solche zu sehen — ein Impressum, dem man
   die Luecke nicht ansieht, ist die gefaehrlichere Fassung. */
.luecke { background: color-mix(in oklab, var(--a-akzent) 16%, transparent); color: var(--a-akzent); padding: .05em .35em; font-family: "IBM Plex Mono", monospace; font-size: .85em; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}