:root {
  --nacht:#141311;
  --tiefer:#0e0d0c;
  --papier:#f2eee5;
  --gedaempft:#9a938a;
  --linie:#33302b;
  /* Für Schreiblinien und Feldränder. `--linie` ist als Trennlinie gebaut und
     darf leise sein; ein Eingabefeld, das man nicht sieht, ist dagegen ein
     Bedienfehler – gemessen im Bild zu P1B: die Felder verschwanden auf dem
     Nachtgrund. */
  --linie-hell:#544d43;
  /* **Eine Farbfamilie, nicht zwei Signalfarben.** Bis P2A standen hier ein
     Grün (#8fb265) und ein Orange (#d9a24a) nebeneinander – die Paarung des
     Discountregals, Migros Budget und Coop Prix Garantie tragen sie, und ein
     Betrachter liest sie, bevor er ein Wort gelesen hat, als billig. Simon,
     28.09.2026: *„Diese Farbkombination strahlt absolutes Billigsegment
     aus."* Zwei kräftige, gegensätzliche Buntfarben auf einem Grund sind
     immer Preisschild; teuer wirkt das Gegenteil – **ein** Ton, mehrfach
     abgestuft, und die Unterscheidung läuft über Helligkeit statt über
     Buntheit. Geblieben ist deshalb die warme Achse: Champagner hell für
     das Lebendige, Bronze gedeckt für das Betonte. Kein Grün mehr auf
     dieser Seite. */
  --leit:#e0bf8c;
  --hervor:#a8814a;
  /* Dieselbe Familie, für den umgekehrten Grund nachgedunkelt. Champagner
     und Bronze sind auf Nacht gebaut; auf Papier hätten sie zu wenig
     Kontrast, und eine Farbe, die man nicht lesen kann, ist keine Farbe,
     sondern ein Fleck. */
  --leit-tief:#7a5a26;
  --hervor-tief:#5e441c;
  --achse:clamp(22px, 7vw, 132px);
  --luft:clamp(22px, 13vw, 380px);
  --luft-schmal:clamp(22px, 8vw, 40px);
  /* Das obere Polster des Körpers als eigener Wert, damit ein randabfallendes
     Element es exakt zurücknehmen kann. Vorher stand die Zahl zweimal da, und
     zwei Zahlen, die gleich sein müssen, sind irgendwann verschieden. */
  --oben:clamp(40px, 7vw, 92px);
  /* Wie weit ein Bild über seinen Rahmen hinaussteht, damit der Parallaxschub
     keine Lücke aufreisst. Muss grösser sein als der grösste `data-schub` der
     Seite – sonst sieht man beim Rollen den Grund durchscheinen. `data-schub`
     ist ein **Höchstschub in Bildpunkten**, nicht ein Faktor: die Werte sind
     24 (Fläche), 32 (Bildbänder) und 48 (Antlitz), also alle aus der Reihe
     und alle unter 80. *Der erste Wurf stand dort mit 0,18 bis 0,42 – als
     Faktor gedacht, als Bildpunkte gerechnet, und damit bewegte sich nichts:
     ein halber Bildpunkt ist kein Parallax.* */
  --ueberstand:80px;
}

* { box-sizing:border-box; }
/* `clip` statt `hidden`: `hidden` auf dem Koerper hat die Seite am
   26.09.2026 bei 1440 Punkten trotzdem quer schieben lassen - gemessen
   1512 statt 1440, verursacht vom angeschnittenen Antlitz. `clip` macht
   keinen Rollbehaelter auf und schneidet wirklich ab. */
html {
  -webkit-text-size-adjust:100%;
  background:var(--nacht);
  overflow-x:clip;
}

body {
  margin:0;
  position:relative;
  background:var(--nacht);
  color:var(--papier);
  font:17px/1.66 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  padding:var(--oben) var(--luft) calc(80px + env(safe-area-inset-bottom)) var(--achse);
  overflow-x:clip;
}

p { margin:0 0 18px; max-width:58ch; }

/* **Der Reset gehört ans erste Blatt, nicht ans letzte.** Die Hausregel
   „keine unterstrichenen Links" kennt keinen Bruch, und der Browser setzt
   die Linie von selbst – bis P1B stand hier nur die Farbe, und damit waren
   die neun Adressen und der Fuss unterstrichen (gemessen im Bild zu P1B).

   Ein Link muss trotzdem als Link zu erkennen sein, und Farbe allein genügt
   dafür nicht. Das Haus löst das mit einer Linie **unter** dem Wort statt
   einer Unterstreichung **am** Wort: eigener Abstand, eigene Farbe, und sie
   wandert beim Überfahren auf die Leitfarbe. Dasselbe Mittel wie bei
   `.ort a` und `.zweitweg a`, nur jetzt als Grundregel. */
a {
  color:var(--papier);
  text-decoration:none;
  border-bottom:1px solid var(--linie-hell);
  padding-bottom:1px;
}
a:hover { color:var(--leit); border-bottom-color:var(--leit); }

/* Blockartige Links nehmen die Linie wieder weg: bei ihnen ist nicht das Wort
   der Link, sondern die ganze Fläche, und die zeigt es mit ihrer eigenen
   Kante. Klasse schlägt Typ, die Reihenfolge in der Datei spielt hier also
   keine Rolle. */
.tor, .hinab, .zur_marke { border-bottom:0; }
.hinab { padding-bottom:0; }

main { position:relative; z-index:1; }

/* ── Das erste Bildfeld ──────────────────────────────────────────────────────
   Randabfallend nach oben, rechts und links: die Polster des Körpers werden
   genau zurückgenommen und innen wieder gegeben. Dieselbe Rechnung wie beim
   Band, und aus demselben Grund – ein Kopf mit `100vw` schöbe die Seite quer.

   **Die Höhe hängt an einer Klammer, nicht an `svh` allein.** `ansicht.py`
   setzt für das Bildschirmfoto die Fensterhöhe auf die volle Seitenhöhe;
   ein Kopf mit `min-height:100svh` wäre dann so hoch wie das ganze Blatt,
   und das Bild zeigte etwas, das kein Besucher je sieht. Die obere Schranke
   von 864 Punkten fängt genau das ab. */
.kopf {
  position:relative;
  overflow:hidden;
  min-height:clamp(576px, 92svh, 864px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  margin:calc(-1 * var(--oben)) calc(-1 * var(--luft))
         clamp(48px, 7vw, 96px) calc(-1 * var(--achse));
  /* P5A: oben kommt der Abstand des Absenders dazu. Mit `justify-content:
     flex-end` wächst der Kopf nach UNTEN, der Inhalt aber stösst nach OBEN –
     und der Absender liegt absolut auf `top:var(--oben)`. Beim ersten Abzug
     von P5A lief die Schlagzeile exakt über das Wort „zenja.ai" (gemessen an
     ansicht_P5A.png, erste Fassung). Die zusätzliche Luft ist die Höhe der
     Wortmarke plus ihr eigener Abstand, nicht eine gewählte Zahl. */
  padding:calc(var(--oben) + clamp(46px, 5vw, 74px)) var(--luft)
          clamp(56px, 7.5vw, 104px) var(--achse);
}

/* ── Das Heldenbild, seit P3A ────────────────────────────────────────────────
   Hier lag bis P2H `bilder/kopf.png`: eine abstrakte Fläche, Goldnebel auf
   Schwarz, bei 0.62 Deckung, also eine Textur ohne Gegenstand. Zweimal hat
   `runtime/kreativdirektor` die Fassung deswegen durchfallen lassen –
   Schwarz plus Goldstaub plus eine Maske aus Punkten liest sich in der
   ersten Sekunde als Krypto-Seite, nicht als Archiv.

   Jetzt steht hier die Filmrolle, und sie steht in voller Deckung: das Bild
   ist nicht mehr Grund, sondern Gegenstand. Ein Bild bei 0.62 ist eine
   Tapete; ein Bild bei 1.0 ist eine Aussage.

   `object-position:62% 46%` ist gemessen, nicht geschätzt: bei einem 4:3-
   Bild in einem breiten Kopf schneidet `cover` oben und unten ab. Mit 62
   Prozent wandert der Ausschnitt nach rechts, die Spule steht links der
   Mitte statt am Rand, und unten links bleibt die ruhige Holzfläche frei
   für die Schrift. */
.kopf_flaeche {
  position:absolute;
  left:0;
  top:calc(-1 * var(--ueberstand));
  width:100%;
  height:calc(100% + 2 * var(--ueberstand));
  object-fit:cover;
  object-position:62% 46%;
  opacity:1;
  pointer-events:none;
  z-index:0;
}

/* ── Der laufende Kopf, seit P4A ─────────────────────────────────────────────
   Fünf Bilder liegen übereinander, jedes ist 3,4 s zu sehen, der Umlauf
   dauert 17 s. Die Blende ist kurz (0,45 s von 3,4), damit es als Schnitt
   gelesen wird und nicht als Überblendung – eine lange Blende macht aus
   fünf Bildern einen einzigen weichen Brei.

   Die Fahrt gehört zum Schnitt, nicht zur Zierde: ein Standbild in einer
   Folge wirkt wie ein Hänger, sobald das Auge Bewegung erwartet. 1.00 auf
   1.09 über die ganze Standzeit sind rund 2,6 Prozent je Sekunde, also
   unterhalb der Schwelle, an der man den Zoom als Zoom bemerkt. Die
   ungeraden Bilder fahren hinein, die geraden hinaus; dadurch liegt an
   jedem Schnitt ein Richtungswechsel, und der ist der eigentliche Taktgeber.

   `will-change` steht hier bewusst NICHT: fünf Lagen dauerhaft auf eigenen
   Ebenen kosten auf dem Telefon mehr Speicher, als die weichere Fahrt wert
   ist. Die Bilder sind 1280 breit und liegen auf einer dunklen Fläche. */
/* `.trailerband` liegt wieder im Kopf. Der Zwischenschritt D2C hatte die
   Folge als eigenen Streifen darunter gelegt, damit das Antlitz im Kopf
   allein steht – der Abzug zeigte danach ein schwarzes Feld mit einer
   kleinen grauen Zeichnung. Gemessen, nicht gemutmasst: die Zeichnung
   braucht einen beleuchteten Grund. */
/* ── Der Grund des Kopfes, seit P5A ohne Foto ────────────────────────────────
   Hier lagen fuenf Stillleben randabfallend hinter der Schlagzeile. Drei davon
   kamen aus dem Rueckhol-Geschaeft, und der Besucher liest zuerst die Bilder –
   darum hielt ein Fremder die Seite in acht von acht Urteilen fuer ein
   Filmarchiv. Der Schnitt steht jetzt im Fenster rechts und zeigt dort
   laufende Anwendungen; der Grund traegt nur noch Licht.

   Zwei Verlaeufe, und beide haben eine Aufgabe: der warme von rechts unten
   setzt das Fenster in einen Lichtraum, statt es auf eine Flaeche zu kleben,
   der kalte von links oben gibt der Schlagzeile Tiefe, ohne ihr Kontrast zu
   nehmen. Gemessen: Schlagzeile weiss 9,74:1, gold 6,28:1 ueber dem alten
   Foto – ueber diesem Grund steigt beides, weil nichts mehr aufhellt. */
.trailerband {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(74% 62% at 88% 76%, rgba(224,191,140,.13), transparent 70%),
    radial-gradient(90% 80% at 6% 4%, rgba(58,72,84,.20), transparent 64%),
    linear-gradient(168deg, #16151300 0%, #0c0b0a 86%),
    var(--nacht);
}

/* 3,4 von 17 s sind 20 Prozent. Die Blende liegt in den ersten und letzten
   2,6 Prozent (0,45 s), dazwischen steht das Bild voll gedeckt. */
@keyframes bildfolge {
  0%     { opacity:0; transform:scale(1.00); }
  2.6%   { opacity:1; }
  17.4%  { opacity:1; }
  20%    { opacity:0; transform:scale(1.09); }
  100%   { opacity:0; transform:scale(1.09); }
}
@keyframes bildfolge_zurueck {
  0%     { opacity:0; transform:scale(1.09); }
  2.6%   { opacity:1; }
  17.4%  { opacity:1; }
  20%    { opacity:0; transform:scale(1.00); }
  100%   { opacity:0; transform:scale(1.00); }
}

/* ── Die Tafeln kommen in Schlägen ───────────────────────────────────────────
   Einmal, nicht in der Schleife, und mit `both` bleiben sie danach stehen.
   Der Weg ist kurz (14 Punkte) und die Kurve sitzt vorn: eine Schrift, die
   lange gleitet, wirkt wie eine Präsentationsfolie, nicht wie ein Schnitt. */
/* `backwards` statt `both`, und das ist kein Feinschliff: mit `both` ist der
   Ruhezustand der Tafel die ERSTE Stufe der Bildfolge, also Deckung 0. Läuft
   die Animation aus irgendeinem Grund nicht – angehaltene Animationen,
   fremder Wirt, ein Browser, der sie bei verborgenem Reiter nie startet –,
   bleibt die Zeile für immer unsichtbar. Gemessen am 05.10.2026 in Chrome
   headless mit `--virtual-time-budget`: Schlag 2 und 3 standen nach sechs
   Sekunden nicht da. Mit `backwards` ist der Ruhezustand die eigene Regel
   (Deckung 1), und die Animation nimmt nur den Weg dorthin. Fällt sie aus,
   steht die Zeile einfach da – der schlechteste Fall ist dann eine Seite
   ohne Schnitt, nicht eine Seite ohne Text. */
.schlag {
  display:block;
  opacity:1;
  animation:schlag_auf .7s cubic-bezier(.16,.84,.3,1) backwards;
}
/* Gemessen am 05.10.2026: mit 0,35 / 1,5 / 3,0 s stand der dritte Schlag im
   Bildschirmfoto noch nicht da – die Seite war nach 1,41 s ruhig, der Haken
   kam erst 1,6 s später. Wer in dieser Zeit schon scrollt, liest ihn nie.
   Jetzt sitzt der letzte Schlag vor der Ruhe. */
/* P5A: 0,25 / 0,70 / 1,10 statt 0,25 / 0,95 / 1,75. Der Grund ist derselbe wie
   oben, nur eine Stufe härter gelesen: `backwards` hält die Zeile während der
   VERZÖGERUNG auf Deckung 0, nicht nur im Fehlerfall. Am Abzug ansicht_D2B.png
   (Ruhe nach 1,11 s) fehlte der dritte Schlag darum vollständig. Der ganze
   Dreischlag sitzt jetzt vor der Sekunde; was danach käme, liest niemand. */
.schlag.s1 { animation-delay:.25s; }
.schlag.s2 { animation-delay:.70s; }
.schlag.s3 { animation-delay:1.10s; }
@keyframes schlag_auf {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:none; }
}
/* Zwei Verläufe statt einem, und beide haben eine Aufgabe.
   Der untere setzt das Bild auf dem Nachtgrund ab – ohne ihn stösst es als
   Kante quer durch die Seite und behauptet eine Trennung, die nicht gemeint
   ist. Der von links ist neu und trägt die Schrift: die grosse Zeile steht
   auf Holz, und Holz ist kein Papier. Gemessen im echten Chrome unter den
   Buchstabenkernen, schlechtester Zwanzigstel – ein Mittelwert lügt an
   dieser Stelle (ed.simon-haener.ch, 04.10.2026). */
.kopf::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top, var(--nacht) 2%, rgba(20,19,17,0.88) 26%,
                    rgba(20,19,17,0.42) 52%, transparent 78%),
    linear-gradient(to right, rgba(20,19,17,0.92) 0%,
                    rgba(20,19,17,0.55) 34%, transparent 68%);
  pointer-events:none;
  z-index:1;
}

/* Dasselbe Antlitz wie auf der persönlichen Seite, ins Negative gedreht:
   verwandt, aber nicht dieselbe Adresse.

   **Seit P3A steht es nicht mehr im Kopf, sondern an der Tür.** Nicht weil
   es zu viel wäre – Simon, 28.09.2026: „Du solltest Dein Antlitz auf
   zenja.ai nicht statisch machen. Genau das ist doch das Spezielle." Es ist
   unverändert die lebende Zeichnung, folgt unverändert dem Mauszeiger, und
   genau das bleibt. Getauscht ist allein der Platz: neben einer grossen
   Wortmarke auf schwarzem Grund las es sich als schwebende Maske, und eine
   Maske ist das falsche Zeichen für ein Haus, dem jemand seine
   Familienfilme anvertrauen soll. Dort, wo man mich anschreibt oder fragt,
   ist dasselbe Gesicht kein Zeichen mehr, sondern ein Gegenüber.

   **Bis P1B war es praktisch nicht da.** Zwei Ursachen, beide gemessen am
   28.09.2026: `opacity:0.2` liess auf dem Nachtgrund nur ein Ahnen übrig,
   und die einzige Medienabfrage der Datei stellte es auf dem Telefon per
   `display:none` ganz ab. Simon: „Hier ist kein Antlitz sichtbar." Es ist
   jetzt ein Bildelement mit voller Deckung, und auf dem Telefon steht es
   über der Marke statt gar nicht.

   `mix-blend-mode:screen` statt eines Kastens: nach der Umkehr ist der Grund
   des Bildes schwarz, und Schwarz ist im Screen-Modus durchsichtig. So
   stehen die Linien frei im Raum, ohne sichtbaren Bildrand.

   **Und seit P1D ist es nicht mehr das Bild, sondern die Zeichnung selbst.**
   Simon, 28.09.2026: „Du solltest Dein Antlitz auf zenja.ai nicht statisch
   machen. Genau das ist doch das Spezielle." Der Rahmen bleibt derselbe –
   dieselbe Stelle, dieselbe Breite, dasselbe Seitenverhältnis; getauscht
   ist nur, was darin steht. Deshalb trägt der Rahmen jetzt das Mass und
   nicht mehr das Bild: eine Leinwand hat keine eigene Grösse, und ohne ein
   festes Verhältnis fiele sie auf null Höhe zusammen. */
.antlitz {
  /* `relative`, nicht `absolute`: seit P3A steht das Gesicht im Fluss neben
     der Ansprache an der Tür. Abzug und Leinwand liegen mit `inset:0` darin
     und brauchen deshalb einen positionierten Vorfahren – auf `static`
     sprängen sie auf den nächsten und lägen quer über dem Abschnitt.

     Ganz im Blatt, nicht knapp angeschnitten. Der erste Wurf liess es um
     14 Punkte über die Kante stehen – gemessen im Bild zu P1C ging dabei
     das rechte Auge verloren, und ein angeschnittenes Gesicht sieht nach
     Versehen aus, nicht nach Absicht. */
  position:relative;
  flex:0 0 auto;
  width:min(30vw, 300px);
  /* 640 zu 840 – das Mass des Abzugs, damit der Tausch die Seite nicht
     springen lässt. */
  aspect-ratio:640 / 840;
  pointer-events:none;

  /* Der Hals läuft aus, statt abgeschnitten zu werden. Gemessen am Bild zu
     P3A: `antlitz.js` zeichnet seit dem 29.09.2026 eine Halspartie bis
     `halsBis = 1.75` halbe Kopfhöhen hinunter, die Leinwand hat aber das
     Mass des Abzugs (640 zu 840) und endet vorher – unter dem Kinn stand
     darum ein grauer Kasten mit flacher Unterkante und geraden Seiten, der
     wie ein Beschnittfehler aussah und nicht wie ein Hals.

     Die Verhältniszahlen im Organ bleiben unangetastet: dieselbe Zeichnung
     steht über dem Schreibtisch und auf anderen Blättern, und eine Zahl dort
     zu drehen, um hier einen Rand zu heilen, zöge den Fehler weiter. Der
     Verlauf gehört an die Stelle, an der beschnitten wird. */
  -webkit-mask-image:linear-gradient(to bottom, #000 58%, transparent 96%);
  mask-image:linear-gradient(to bottom, #000 58%, transparent 96%);

  /* **Warm statt grau, und das ist kein Geschmack.** Der Kreativdirektor hat
     P3A am 05.10.2026 zum dritten Mal am Antlitz durchfallen lassen und es
     „grauer Phantomkopf" und „Chrom-Gesicht" genannt: ein dritter Blickanker,
     der den Blick anhält, nur falsch. Die Zeichnung malt in Grautönen; auf
     einer Seite, deren ganze Farbigkeit aus einer warmen Familie kommt
     (`--leit` Champagner, `--hervor` Bronze), ist Grau die einzige Farbe,
     die nicht dazugehört – und das liest sich als Chrom, also als Technik.

     Gedreht wird die Farbe, NICHT die Deckung. In P1B stand das Antlitz auf
     `opacity:0.2` und war damit praktisch weg; Simon hat genau das bemängelt
     („Hier ist kein Antlitz sichtbar"). Blasser machen hiesse, einen
     abgenommenen Punkt gegen einen neuen zu tauschen.

     `sepia` legt die Grauwerte auf eine warme Achse, `hue-rotate` zieht sie
     von Sepiabraun nach Champagner, `saturate` nimmt die Blässe heraus. */
  filter:sepia(0.62) saturate(1.5) hue-rotate(-6deg) brightness(1.04);
}

/* ── Der Bildschirm im Kopf, seit P5A ────────────────────────────────────────
   Rechts neben der Schlagzeile, randabfallend nach rechts: ein Fenster hat
   keine rechte Kante. Die negative rechte Marge ist genau das Polster des
   Körpers – dieselbe Rechnung wie beim hellen Riegel, damit nichts quer
   schiebt.

   Der Abzug ist dunkel abgesetzt, nicht aufgehellt: er soll aus dem Nachtgrund
   auftauchen und nicht auf ihm liegen. Die Kante links oben ist eine Haarlinie
   in der Leitfarbe – das einzige Zeichen, dass hier ein Fenster und kein Bild
   steht. */
.kopf_schirm {
  position:relative;
  overflow:hidden;
  flex:0 0 auto;
  width:min(42vw, 540px);
  /* HOCHFORMAT, UND DAS IST EIN AUSSCHNITT, KEIN ABZUG. `runtime/kreativdirektor`
     am 05.10.2026, 23:30: *„Der gruene Auszug fuehrt eine fremde Marke und eine
     fremde Farbe in die Sekunde ein, in der ueber die Seite entschieden wird,
     und sein Text ist bei dieser Groesse ohnehin unlesbar."* Beides stimmt –
     ein ganzes Blatt in 620 Punkten Breite zeigt eine 1280 Punkte breite
     Oberflaeche auf 35 Prozent, also eine Briefmarke mit fremdem Logo oben
     links.

     Im 3-zu-4-Rahmen greift `cover` an der HOEHE: 720 auf 720 Punkte ist
     Massstab 1,0 statt 0,35. Man sieht nicht mehr ein Blatt, sondern durch ein
     Fenster in eine arbeitende Oberflaeche. Der Ausschnitt je Bild ist unten
     gesetzt und sucht die Stelle, an der gearbeitet wird – nie die Kopfzeile
     mit der fremden Wortmarke.

     Dass der Rahmen hoch statt breit ist, hat einen zweiten Grund aus
     demselben Urteil: *„die ganze rechte Haelfte der ersten Flaeche traegt
     nichts."* Jetzt traegt sie. */
  aspect-ratio:3 / 4;
  margin-right:calc(-1 * var(--luft));
  align-self:end;
  pointer-events:none;
}
/* Vier Lagen uebereinander, je 3,4 s, Umlauf 13,6 s. Dieselbe Mechanik wie das
   alte Band im Kopf – nur zeigt sie jetzt laufende Anwendungen statt Stillleben.
   Die erste Lage traegt zusaetzlich `position:relative`, damit sie die Hoehe des
   Rahmens bestimmt; die drei anderen liegen absolut darueber. */
.kopf_schirm img {
  display:block;
  position:absolute;
  left:0; top:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-top:1px solid rgba(224,191,140,.45);
  border-left:1px solid rgba(224,191,140,.45);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  /* Dunkler abgesetzt als der Abzug im Beweisriegel: das Fenster ist im Kopf
     die zweite Ebene, nicht die erste. Es soll aus dem Grund auftauchen, nicht
     neben der Schlagzeile um den Blick kaempfen. */
  /* 0,62 statt 0,78, und das ist gemessen am Abzug, nicht abgewogen: bei 0,78
     las die fremde Schlagzeile im Fenster („Eine Suche. Der ganze Remote-
     Arbeitsmarkt.") so laut wie die eigene daneben – zwei Schlagzeilen in
     einem Bildschirm. Bei 0,62 weicht sie zurueck, waehrend Suchfeld, Knopf,
     Zaehlerstaende und Branchenreihe lesbar bleiben; das Fenster zeigt dann
     eine arbeitende Oberflaeche und behauptet nichts. Es ist die zweite Ebene
     im Kopf, nicht die erste. */
  /* 0,72. Bei 0,62 war die Oberflaeche im Fenster nicht mehr zu lesen – das
     zehnte Urteil sagte woertlich „findet dort nichts Lesbares", und damit
     beweist das Fenster nichts mehr. Bei 0,78 las die fremde Schlagzeile so
     laut wie die eigene daneben. 0,72 ist die Mitte, am Abzug gewaehlt: Suchfeld,
     Knopf, Zaehlerstaende und Branchenreihe sind lesbar, die fremde Schlagzeile
     weicht zurueck. */
  filter:brightness(.72) saturate(.92);
  opacity:0;
  animation:schirmfolge 13.6s linear infinite;
}
/* Der Ausschnitt je Bild – gesucht ist die Stelle, an der gearbeitet wird,
   und gemieden die Kopfzeile mit der fremden Wortmarke. */
.kopf_schirm img:nth-child(1) { animation-delay:0s;    object-position:26% 50%; }
.kopf_schirm img:nth-child(2) { animation-delay:3.4s;  object-position:52% 62%; animation-name:schirmfolge_zurueck; }
.kopf_schirm img:nth-child(3) { animation-delay:6.8s;  object-position:34% 64%; }
.kopf_schirm img:nth-child(4) { animation-delay:10.2s; object-position:74% 50%; animation-name:schirmfolge_zurueck; }

/* 3,4 von 13,6 s sind 25 Prozent. Die Blende liegt in den ersten und letzten
   3,3 Prozent (0,45 s). Die Fahrt ist kleiner als im alten Band – 1.00 auf
   1.04 statt 1.09: ein Bildschirmabzug, der zu stark hineinfaehrt, verliert
   seine Kanten und sieht nach Attrappe aus. */
@keyframes schirmfolge {
  0%    { opacity:0; transform:scale(1.00); }
  3.3%  { opacity:1; }
  21.7% { opacity:1; }
  25%   { opacity:0; transform:scale(1.04); }
  100%  { opacity:0; transform:scale(1.04); }
}
@keyframes schirmfolge_zurueck {
  0%    { opacity:0; transform:scale(1.04); }
  3.3%  { opacity:1; }
  21.7% { opacity:1; }
  25%   { opacity:0; transform:scale(1.00); }
  100%  { opacity:0; transform:scale(1.00); }
}
/* Bei abbestellter Bewegung steht das erste Bild voll gedeckt – eine Seite,
   deren Beweis an einer Animation haengt, ist eine Seite ohne Beweis. */
@media (prefers-reduced-motion: reduce) {
  .kopf_schirm img { animation:none; opacity:0; }
  .kopf_schirm img:first-child { opacity:1; }
}

/* Der Kopf ist damit zweispaltig: Wort links auf der Achse, Fenster rechts.
   Unten bündig – beide stehen auf derselben Grundlinie. */
.kopf_satz {
  display:flex;
  align-items:flex-end;
  /* Im Markup steht das Fenster vor dem Wort, damit es auf dem Telefon ueber
     der Schlagzeile liegt und nicht unter dem Knopf. Auf dem Schirm kehrt
     `row-reverse` die Reihenfolge um: Wort links auf der Achse der Seite,
     Fenster rechts. Die Achse traegt die Schrift, nicht das Bild. */
  flex-direction:row-reverse;
  justify-content:flex-end;
  gap:clamp(20px, 3.4vw, 56px);
  position:relative;
  z-index:2;
}
.kopf_satz > .kopf_wort { flex:1 1 auto; min-width:0; }
@media (max-width: 900px) {
  .kopf_satz { display:block; }
  .kopf_schirm {
    width:auto;
    /* `align-self:stretch` IST HIER DER GANZE UNTERSCHIED, gemessen am
       06.10.2026 bei 390 Punkten: `.kopf_fenster` ist ein Spaltenflex mit
       `align-items:flex-start`, also bekommt jedes Kind quer nur die Breite
       seines Inhalts. Der Inhalt dieses Kastens sind ausschliesslich absolut
       gesetzte Bilder – zusammen null Punkte breit. Mit `width:auto` statt
       der Vorgabe `min(42vw, 540px)` fiel der Kasten darum auf 0 x 0, und
       das Fenster war auf JEDEM Schirm unter 900 Punkten verschwunden. Die
       Seite oeffnet laut eigenem Anspruch mit „Beweis statt Mystik" – am
       Telefon oeffnete sie mit nichts, und drei der vier Abzuege wurden nie
       geladen, weil ein Bild ohne Kasten nicht laedt.
       `width:auto` allein genuegt also nicht, wenn das Quermass vom
       Elternteil stammt. */
    align-self:stretch;
    /* Am Telefon liegt das Fenster UEBER der Schlagzeile und nicht neben ihr.
       Hochformat kostete dort 294 Bildpunkte zusaetzliche Hoehe, gemessen bei
       390 Punkten – quer traegt es dieselbe Aussage auf einem Drittel davon. */
    aspect-ratio:16 / 9;
    margin:clamp(20px, 4vw, 34px) calc(-1 * var(--luft)) 0 0;
  }
}

/* Die Ansprache an der Tür. Seit P5A ohne Gesicht – es steht oben im Kopf. */
.tuer_kopf {
  display:flex;
  align-items:flex-end;
  gap:clamp(24px, 4vw, 56px);
  max-width:80ch;
  margin:0 0 clamp(26px, 3.5vw, 44px);
}
.tuer_wort { flex:1 1 auto; min-width:0; }
.tuer_wort .aussage { margin-bottom:22px; }
.tuer_wort .tuer { margin:0; }

/* Der Abzug. Er trägt die Stelle, solange nicht gezeichnet wird: ohne
   JavaScript, im Ausdruck, und in dem Augenblick zwischen Aufschlagen und
   erstem Bild. `filter:invert(1)` dreht den hellen Grund ins Schwarze, und
   Schwarz ist im Screen-Modus durchsichtig – so stehen die Linien frei im
   Raum, ohne sichtbaren Bildrand. */
.antlitz_abzug {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:invert(1);
  mix-blend-mode:screen;
  opacity:0.95;
}

/* Die Leinwand. Sie liegt über dem Abzug und ist durchsichtig, bis
   `antlitz.js` zeichnet – die Zeichnung bringt ihren eigenen hellen Hof und
   dunklen Kern mit und braucht deshalb weder Umkehr noch Mischmodus.

   **Keine Deckung von 1 von Anfang an.** Läuft die Datei nicht, stünde eine
   leere Fläche über dem Abzug und das Gesicht wäre wieder weg – derselbe
   Fehler wie das `display:none` aus P1B, nur andersherum. Deshalb schaltet
   sie erst, wenn `window.antlitz` wirklich da ist. */
.antlitz_glas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0;
  transition:opacity .9s ease;
}

.antlitz_lebt .antlitz_glas { opacity:1; }
/* Beide gleichzeitig wären ein doppeltes Gesicht mit leichtem Versatz. */
.antlitz_lebt .antlitz_abzug { opacity:0; transition:opacity .9s ease; }

/* Der Versuch aus D2C, das Antlitz in den Kopf zu stellen, ist zurueck-
   genommen – zweimal gebaut, zweimal am Bild gemessen, beide Male
   schlechter als ohne. Die Begruendung steht an der Tuer im Blatt. */
.kopf_wort { position:relative; z-index:3; }


/* Der Hinweis nach unten. Ein Wort und eine Linie – mehr braucht es nicht,
   und mehr wären wieder Wörter. Die Linie atmet, damit der Blick sie findet;
   bei abgestellter Bewegung steht sie still und bleibt trotzdem lesbar. */
.hinab {
  position:absolute;
  left:var(--achse);
  bottom:clamp(24px, 3.5vw, 40px);
  z-index:3;
  display:flex;
  flex-direction:column;
  gap:12px;
  text-decoration:none;
  color:var(--gedaempft);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:600;
}
.hinab::after {
  content:"";
  width:1px;
  height:48px;
  background:linear-gradient(to bottom, var(--leit), transparent);
  animation:atem 2.8s ease-in-out infinite;
}
.hinab:hover { color:var(--leit); }
@keyframes atem {
  0%, 100% { transform:scaleY(0.55); transform-origin:top; opacity:0.55; }
  50%      { transform:scaleY(1);    transform-origin:top; opacity:1; }
}

.marke {
  font-size:clamp(58px, 15vw, 188px);
  line-height:0.86;
  letter-spacing:-0.045em;
  font-weight:600;
  margin:0 0 6px;
}
.marke .endung { color:var(--leit); font-weight:400; }

/* ── Der Absender über dem Heldenbild, seit P3A ──────────────────────────────
   Bis P2H war `zenja.ai` mit bis zu 188 px das grösste Element der Seite.
   Damit war das Erste, was ein Besucher sah, eine Eigenschaft des Absenders
   – und die Hausregel sagt das Gegenteil (Simon, 28.09.2026: „Wir müssen
   auch an die User denken … Unsere Zielgruppe sind eher die ambitionierten
   User, die einfach eine Problemlöserin suchen").

   Jetzt steht der Name oben links und klein, wie das Zeichen des Studios
   auf einem Filmplakat, und gross ist der Titel. Die Endung bleibt in der
   Leitfarbe: sie ist das einzige Buntstück im Kopf und sagt in zwei Zeichen,
   welches der beiden Häuser das hier ist. */
.absender {
  position:absolute;
  left:var(--achse);
  top:var(--oben);
  margin:0;
  z-index:3;
}
.marke_klein {
  font-size:clamp(24px, 3.2vw, 34px);
  line-height:1;
  letter-spacing:-0.03em;
  font-weight:600;
}
.marke_klein .endung { color:var(--leit); font-weight:400; }

/* ── Die Trailer-Zeile ───────────────────────────────────────────────────────
   Simon, 05.10.2026: „Auch textlich sollte es dort mehr nach ‚Trailer'
   klingen, also Neugierde erzeugen und nicht abschrecken mit trockener
   Nüchternheit."

   Bis P2H stand hier „Ich baue Systeme, die ohne mich laufen. Und ich hole
   zurück, was aufgegeben war." – wahr, und eine Selbstbeschreibung. Ein
   Trailer sagt nicht, wer der Absender ist; er zeigt ein Bild und hält den
   Rest zurück. Sechs Wörter, aus genau dem Bild gelesen, das dahintersteht,
   und sie versprechen nichts, was dieses Haus nicht tut.

   `line-height:0.98` statt 1.16: bei diesem Grad ist die Zeilengruppe eine
   Form und kein Text – die Hausregel erlaubt dafür unter 1,1. */
/* P5A: lauter, und zwar gemessen lauter. 92 auf 110 Punkte, Gewicht 600 auf
   700, Spalte von 20 auf 18 Zeichen – zusammen rund ein Fünftel mehr
   Schriftfläche im ersten Bildschirm. Der Grund steht in `runtime/gestaltung`,
   wirkung:6: bei einem Verkaufsstück ist Zurückhaltung der Fehler. Eine
   Schlagzeile, die sich den halben Kopf mit leerem Schwarz teilt, ist höflich
   und sagt nichts. */
.trailer {
  font-size:clamp(38px, 7.9vw, 98px);
  line-height:0.96;
  letter-spacing:-0.038em;
  font-weight:700;
  max-width:24ch;
  margin:0;
  text-wrap:balance;
}
.trailer em { font-style:normal; color:var(--leit); }

/* Der Anriss. Ein Satz, der eine Frage offenlässt, statt sie zu
   beantworten – die Antwort steht sechs Bildschirme weiter unten („Nichts
   hiervon ist ein Entwurf"). Gedämpft, damit die grosse Zeile allein
   dominiert: zwei gleich laute Elemente löschen einander.

   **Keine `opacity` dafür, sondern ein gerechneter Ton.** Eine Deckung
   neben einer Tinte mischt die Schrift zum Untergrund hin und nimmt genau
   dort Kontrast weg, wo er knapp ist – gemessen an eventsZENe P7A am
   04.10.2026: 6,60 auf 4,34 zu 1 bei `opacity:.74`. Unterordnung gehört an
   Grad und Gewicht, nie an die Deckung. */
.anriss {
  margin:clamp(18px, 2.4vw, 28px) 0 0;
  font-size:clamp(17px, 2.1vw, 22px);
  line-height:1.4;
  color:#cfc8bd;
  max-width:40ch;
}

/* text-wrap:balance, weil hier zwei Zeilen stehen, die ein Mensch als Bild
   liest. Ohne das fiel auf dem Telefon „laufen." allein auf eine Zeile –
   ein einzelnes Wort unter einer vollen Zeile liest sich wie ein Versehen.
   Gemessen am 05.10.2026 an ansicht_telefon bei 390 Punkten. */
.anspruch {
  font-size:clamp(23px, 4.4vw, 40px);
  line-height:1.16;
  letter-spacing:-0.015em;
  font-weight:500;
  max-width:31ch;
  margin:22px 0 0;
  text-wrap:balance;
}
.anspruch em { font-style:normal; color:var(--hervor); }

.vorspann {
  color:var(--gedaempft);
  max-width:52ch;
  margin:26px 0 0;
  font-size:18px;
}

.strich {
  border:0;
  border-top:1px solid var(--linie);
  margin:64px 0 0;
  width:min(100%, 78ch);
}

/* ── Der Takt ───────────────────────────────────────────────────────────────
   Bis P1A folgten fünf Abschnitte mit demselben Abstand von 62 Punkten
   aufeinander – gleicher Abstand heisst gleiches Gewicht, und das stimmt
   nicht. Die Luft wird darum je Abschnitt gesetzt: eng, wo ein Abschnitt den
   vorhergehenden erklärt, weit vor einem neuen Gedanken, am weitesten vor
   der Tür. Das ist der Rhythmus, den eine Seite ohne Bilder tragen muss. */
section { margin:0; padding:62px 0 0; }
section.luft_eng { padding-top:clamp(24px, 3.4vw, 36px); }
section.luft_weit { padding-top:clamp(54px, 8vw, 98px); }
section.luft_sehr_weit { padding-top:clamp(70px, 11vw, 134px); }

/* Ein ganzer Abschnitt rückt ein und wird schmaler – die leiseste Stelle der
   Seite, und sie sieht auch so aus. */
section.eingezogen { padding-left:clamp(0px, 6vw, 112px); }
section.eingezogen p { max-width:46ch; }

/* Haarlinien. Verschieden lang, und die Länge ist keine Laune: die Linie
   beginnt, wo der Block nach ihr beginnt, und hört auf, wo er endet. */
.haarlinie {
  border:0;
  border-top:1px solid var(--linie);
  margin:clamp(24px, 4vw, 40px) 0;
}
.haarlinie.kurz { width:min(100%, 16ch); }
.haarlinie.mittel {
  width:min(100%, 34ch);
  margin-left:clamp(0px, 5vw, 96px);
}
.haarlinie.lang { width:min(100%, 58ch); }
.haarlinie.voll { width:min(100%, 84ch); margin:0; }

h2 {
  font-size:14px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gedaempft);
  font-weight:600;
  margin:0 0 26px;
  display:flex;
  gap:14px;
  align-items:baseline;
}
h2 .marke_nr {
  color:var(--leit);
  font-variant-numeric:tabular-nums;
  letter-spacing:0.04em;
}
h2.hervor .marke_nr { color:var(--hervor); }

/* Die einzige Zwischenüberschrift, die nicht ankündigt, sondern auffordert.
   Sie trägt darum nicht die kleine gesperrte Marke, sondern den Grad der
   Angebotstitel – siehe den Kommentar am Blatt. */
h2.ruf_titel {
  font-size:clamp(28px, 4.2vw, 54px);
  letter-spacing:-0.028em;
  text-transform:none;
  color:var(--papier);
  line-height:1.04;
  font-weight:700;
  margin:0 0 clamp(26px, 3.2vw, 42px);
  max-width:20ch;
  display:block;
}

h3 {
  font-size:clamp(22px, 3.2vw, 31px);
  line-height:1.18;
  letter-spacing:-0.012em;
  margin:0 0 6px;
  font-weight:600;
}

.aussage {
  font-size:clamp(21px, 3.4vw, 30px);
  line-height:1.3;
  letter-spacing:-0.012em;
  max-width:36ch;
  margin:0 0 30px;
  font-weight:500;
}
.aussage em { font-style:normal; color:var(--hervor); }

/* ── Das Wortbild ───────────────────────────────────────────────────────────
   Dasselbe Wort zweimal, in zwei Farben, und der Unterschied ist ein
   einziges kleines Wort: „nicht". Es steht anstelle eines Eröffnungsbildes
   und funktioniert aus demselben Grund wie ein Bild: man liest es nicht,
   man sieht es. Echter Text, also auch vorlesbar.

   Das grosse Wort heisst seit P2E „wiederholt" statt „rechnet" – drei
   Zeichen mehr, und damit **steht das Wortbild an seiner Grenze**. Gemessen
   im echten Chrome am 28.09.2026: bei 390 Punkten ist die Schrift 49,1 px
   gross, das Wort 332 px breit und die Spalte ebenfalls 332 px – es passt
   auf eine Zeile, aber ohne einen Punkt Reserve. Bei 1440 Punkten sind es
   152 px Schrift, 1152 px Wort, und der eingerückte zweite Kasten reicht
   von 230 bis 1253, also 1023 px für ein 1022 px breites Wort.

   Wer hier ein längeres Wort einsetzt, bekommt einen Umbruch mitten im
   Wortbild – und der fällt auf dem Telefon zuerst auf, nicht auf dem
   Schirm, an dem er gebaut wurde. Also: `ansicht.py` neu messen statt
   hoffen. Wächst das Wort, wächst zuerst diese Klammer. */
.wortbild { margin:clamp(44px, 7vw, 80px) 0 0; }
.wb { margin:0; max-width:none; }
.wb_klein {
  display:block;
  font-size:13px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--gedaempft);
  font-weight:600;
  margin-bottom:3px;
}
.wb_klein b { color:var(--hervor); font-weight:700; }
.wb_gross {
  display:block;
  font-size:clamp(46px, 12.6vw, 152px);
  line-height:0.9;
  letter-spacing:-0.045em;
  font-weight:600;
}
.wb_gross.leit { color:var(--leit); }
.wb_gross.hervor { color:var(--hervor); }
.wb_zwei {
  margin-left:clamp(0px, 9vw, 170px);
  margin-top:clamp(8px, 1.4vw, 20px);
}

/* ── Die Zäsuren ────────────────────────────────────────────────────────────
   Ein Band über die volle Breite, mit umgekehrtem Grund: Papier auf Nacht.
   Es ist der Bildersatz dieser Seite – die Bilder, die sie tragen würden,
   stammen aus geretteten Beständen und gehören nicht mir.

   Die negativen Ränder sind genau die Polster des Körpers, nicht mehr: damit
   füllt das Band die Breite exakt aus und schiebt nichts quer. Ein Band mit
   `100vw` hätte genau den Befund vom 26.09.2026 zurückgebracht. */
.band {
  margin:clamp(58px, 9vw, 112px) calc(-1 * var(--luft)) 0
         calc(-1 * var(--achse));
  /* Der Rand ist der des Körpers, das Polster nicht: das Band braucht die
     grosse rechte Luft nicht, und ohne sie steht jeder Satz auf einer Zeile.
     Mit ihr brach der erste Satz nach „neu" um und liess „bauen." allein –
     gemessen im Bild zu P1B. */
  padding:clamp(44px, 6vw, 82px) clamp(22px, 8vw, 140px)
          clamp(46px, 6.4vw, 88px) var(--achse);
  background:var(--papier);
  color:var(--nacht);
}
.band p {
  margin:0;
  max-width:34ch;
  font-size:clamp(26px, 5.2vw, 55px);
  line-height:1.12;
  letter-spacing:-0.025em;
  font-weight:600;
}
.band em { font-style:normal; color:var(--hervor-tief); }

/* ══ DIE SÄTZE, seit P5B ════════════════════════════════════════════════════
   Simon, 06.10.2026 05:21: „Wer nur Fehler zählt, weiss am Ende nicht, was er
   bewahren muss. Solche Zitate solltest du auf zenja.ai und zenja.me
   veröffentlichen. Das klingt viel besser als trockener Text."

   DREI UND NICHT NEUN, und sie stehen nebeneinander statt untereinander. Auf
   zenja.me ist die Sammlung der Gegenstand – ein Logbuch, in dem die Menge
   die Aussage ist. Hier verkauft die Seite eine Leistung: neun Aphorismen
   hintereinander verdünnen sich gegenseitig zur Spruchwand, und sie kosteten
   am Telefon die Höhe, die dieser Fassung gerade abgerungen wurde. Dieselbe
   Begründung wie bei `.angebote`: ein Trailer ist dicht, nicht lang. Welche
   drei und warum genau diese, steht in `runtime/zitate/zitate.py` bei
   `TRAILER`.

   KEIN CHAMPAGNER, obwohl er für einen gesetzten Satz naheliegt. Die
   Leitfarbe trägt auf diesem Blatt das Geld: den Knopf, die Zusage „10 Min.",
   die zwei Wörter in der Schlagzeile. Drei ganze Sätze in derselben Farbe
   nähmen diesen dreien genau das Gewicht, das sie aus ihrer Seltenheit haben
   (`farbe:4`). Die Sätze tragen über den Grad und über die Haarlinie, nicht
   über die Farbe – wie auf zenja.me, und aus demselben Grund.

   DIE HERKUNFTSZEILE IST NICHT KLEINGEDRUCKTES, sondern der ganze
   Unterschied. Ein Satz ohne Tag und ohne Anlass ist ein Spruch; erst Datum
   und Fall machen ihn zu etwas, das wirklich gefallen ist. Genau das prüft
   `zitate.haltbar` – ohne Anlass kommt ein Satz hier gar nicht an. */
.saetze {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(26px, 3vw, 44px);
  /* Wie `.angebote`: die rechte Luft ist für den Fliesstext gedacht, nicht
     für ein Raster, das in ihr nur schmaler würde. */
  margin-right:calc(-1 * var(--luft) + clamp(22px, 3vw, 56px));
}
figure.zitat {
  margin:0;
  padding:clamp(16px, 1.8vw, 22px) 0 0;
  border-top:1px solid var(--linie-hell);
}
figure.zitat blockquote {
  margin:0;
  max-width:26ch;
  font-size:clamp(20px, 2.1vw, 26px);
  line-height:1.26;
  letter-spacing:-0.015em;
  font-weight:500;
}
figure.zitat figcaption {
  margin:clamp(12px, 1.4vw, 16px) 0 0;
  max-width:34ch;
  color:var(--gedaempft);
  font-size:14.5px;
  line-height:1.5;
}
/* Unter 860 Punkten gibt es keine dritte Spalte – dieselbe Schwelle, an der
   die Angebote stapeln. Gestapelt trennt die Haarlinie jeden Satz vom
   vorigen, also braucht es unten ein Polster; nebeneinander nicht. */
@media (max-width: 860px) {
  .saetze { grid-template-columns:1fr; gap:0; margin-right:0; }
  figure.zitat { padding:clamp(18px, 4vw, 24px) 0; }
}

/* ══ DER RUF, seit P5A ══════════════════════════════════════════════════════
   In D2B stand im Kopf an dieser Stelle das Wort „weiter" in 12 Punkten, und
   die erste Aufforderung zu handeln kam 7000 Bildpunkte weiter unten – am
   Abzug `ansicht_D2B.png` nachgemessen. Ein Trailer endet mit dem
   Starttermin, nicht mit einem Hinweis zum Weiterblättern.

   Der Knopf ist gefüllt, nicht umrandet: ein Umriss ist die höfliche Form
   und wird als Nebensache gelesen. Dunkle Schrift auf Leitfarbe, weil das
   der einzige Weg ist, auf diesem Grund die hellste Fläche zu bekommen,
   ohne eine zweite Buntfarbe einzuführen (farbe:4). */
.ruf {
  margin:clamp(26px, 3.6vw, 44px) 0 0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:18px clamp(20px, 2.6vw, 34px);
}
.knopf {
  display:inline-block;
  background:var(--leit);
  color:#15120d;
  font-weight:650;
  font-size:clamp(17px, 1.8vw, 20px);
  letter-spacing:-0.005em;
  padding:clamp(15px, 1.5vw, 19px) clamp(24px, 2.6vw, 34px);
  border-bottom:0;
  white-space:nowrap;
  transition:background .18s ease, transform .18s ease;
}
.knopf:hover, .knopf:focus-visible {
  background:#f0d7ab;
  color:#15120d;
  transform:translateY(-1px);
}
.ruf_zeile {
  margin:0;
  max-width:33ch;
  flex:0 1 33ch;
  font-size:15.5px;
  line-height:1.5;
  color:#bdb5a9;
}

/* ══ DAS BEWEISBAND, seit P5A – hier liegt der eine Bruch ═══════════════════
   Gebrochen wird `hierarchie:1` („genau eine dominante Ebene je Fläche"):
   dieses Band trägt zwei gleich laute Ebenen, die vier Zahlen im Grad der
   Schlagzeile und darunter neun Adressen, die mit demselben Gewicht um den
   Blick kämpfen. Was der Bruch leistet, steht im Blatt selbst – ein
   Versprechen, dessen Beleg leiser spricht als es selbst, bleibt ein
   Versprechen.

   Das Band stösst ohne Abstand an den Kopf: die negative Marge nimmt genau
   die untere Marge des Kopfes zurück. Ein Beweis, der erst nach einer
   Atempause kommt, ist eine zweite Behauptung; einer, der an der ersten
   klebt, ist eine Gegenprobe. */
.beweis {
  margin:calc(-1 * clamp(48px, 7vw, 96px)) calc(-1 * var(--luft)) 0
         calc(-1 * var(--achse));
  padding:clamp(40px, 5.4vw, 74px) clamp(22px, 6vw, 110px)
          clamp(40px, 5.4vw, 72px) var(--achse);
  background:var(--papier);
  color:var(--nacht);
}
.beweis_kopf {
  margin:0 0 clamp(26px, 3.4vw, 44px);
  font-size:clamp(19px, 2.2vw, 26px);
  font-weight:650;
  letter-spacing:-0.015em;
  max-width:40ch;
}
.beweis_kopf em { font-style:normal; color:var(--hervor-tief); }

/* ── Die drei Belege, seit P5A ───────────────────────────────────────────────
   Hier standen bis zur dritten Fassung dieses Riegels vier Textspalten und
   neun Adresszeilen in Kleinstschrift. `runtime/kreativdirektor` hat beide
   Fassungen durchfallen lassen, und sein zweiter Satz war der schwerere: der
   härteste Beleg der ganzen Seite stand in der kleinsten Schrift, die es dort
   gab, in einem Band, das wie ein Impressum aussieht.

   Jetzt dieselbe Bildgrösse wie die Angebotsstrecke darunter – drei echte
   Bildschirmabzüge, keine gerechneten Bilder. Der dunkle Rahmen unter dem
   Abzug ist kein Schmuck: eine Oberfläche ohne Kante schwimmt auf dem
   cremefarbenen Grund, weil jede dieser Seiten eine andere Grundfarbe hat. */
/* Der erste Abzug ueber beide Spalten, die zwei anderen darunter nebeneinander.
   Grund: `runtime/kreativdirektor` am 05.10.2026, 23:02 – *„Die drei Screenshots
   waeren der Moment, sitzen aber briefmarkengross in einer Reihe und werden vom
   schwarzen Rest erdrueckt."* In einer Dreierreihe war jeder 395 Punkte breit,
   gemessen bei 1440 Punkten Fensterbreite; der grosse ist jetzt mehr als
   doppelt so breit. Damit hat auch dieser Riegel einen Groessensprung statt
   einer Reihe gleicher Masse. */
.belege {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(26px, 3vw, 44px) clamp(20px, 2.4vw, 34px);
}
.belege > .beleg:first-child { grid-column:1 / -1; }
.belege > .beleg:first-child .beleg_adresse { font-size:clamp(20px, 2.3vw, 27px); }
.belege > .beleg:first-child .beleg_zeile { font-size:16.5px; max-width:52ch; }
@media (max-width: 700px) {
  .belege > .beleg:first-child { grid-column:auto; }
}
.beleg {
  display:block;
  color:var(--nacht);
  border-bottom:0;
  text-decoration:none;
}
.beleg img {
  display:block;
  width:100%;
  /* `height:auto` ist hier Pflicht und nicht Gewohnheit: die Masse stehen als
     Attribute am `img` (1280 × 720), und Chrome liest `height="720"` als
     Formatierungsvorgabe `height:720px`. Die gewinnt gegen `aspect-ratio`, das
     nur die FEHLENDE Seite rechnet. Gemessen am 05.10.2026 im echten Chrome:
     395 × 720 Punkte statt 395 × 222, also drei hochkant stehende Ausschnitte
     mitten aus den Bildschirmabzügen. Im Quelltext war davon nichts zu sehen –
     `getComputedStyle` meldete brav `aspect-ratio: 16 / 9`. */
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:50% 0%;
  background:#1a1917;
  outline:1px solid rgba(20,19,17,.16);
  outline-offset:-1px;
  transition:transform .4s ease;
}
.beleg:hover img { transform:translateY(-3px); }
.beleg_adresse {
  display:block;
  margin:14px 0 4px;
  font-size:clamp(17px, 1.8vw, 21px);
  font-weight:650;
  letter-spacing:-0.015em;
  color:var(--nacht);
  border-bottom:1px solid #b9b0a0;
  width:fit-content;
}
.beleg:hover .beleg_adresse { color:var(--hervor-tief); border-bottom-color:var(--hervor-tief); }
.beleg_zeile {
  display:block;
  margin-top:6px;
  font-size:15px;
  line-height:1.45;
  color:#5a5349;
  max-width:34ch;
}

/* Die sechs übrigen in EINER lesbaren Zeile statt in neun Kleinstzeilen –
   wörtlich die Änderung des Kreativdirektors vom 05.10.2026, 22:39. */
.beweis_rest {
  margin:clamp(26px, 3vw, 40px) 0 0;
  font-size:16px;
  line-height:1.6;
  color:#5a5349;
  max-width:72ch;
}
.beweis_rest a {
  color:var(--nacht);
  font-weight:600;
  border-bottom:1px solid #b9b0a0;
}
.beweis_rest a:hover { color:var(--hervor-tief); border-bottom-color:var(--hervor-tief); }

/* Die einzige Zahl, die der Besucher auf sich selbst beziehen kann – und
   darum die einzige, die hier gross bleibt. */
.zusage {
  margin:clamp(22px, 2.6vw, 34px) 0 0;
  font-size:clamp(17px, 1.9vw, 22px);
  line-height:1.35;
  color:#3f3930;
  max-width:44ch;
}
.zusage b {
  color:var(--hervor-tief);
  font-size:clamp(26px, 3.2vw, 42px);
  font-weight:700;
  letter-spacing:-0.03em;
  margin-right:8px;
}

@media (max-width: 860px) {
  .belege { grid-template-columns:1fr; gap:30px; }
}


.band_gelenk { margin-top:clamp(64px, 10vw, 124px); }
.band_gelenk p { max-width:38ch; }
.band .band_klein {
  margin-top:20px;
  max-width:42ch;
  font-size:17px;
  line-height:1.55;
  letter-spacing:0;
  font-weight:400;
  color:#4c463c;
}

/* Die dritte Zäsur, mit Absicht ein anderes Mittel: ein einziger grosser
   Satz auf dem Nachtgrund, zwischen zwei Haarlinien. Drei gleiche Bänder
   wären wieder ein Muster, und ein Muster ist kein Rhythmus. */
.satz { margin:clamp(62px, 10vw, 126px) 0 0; }
.satz p {
  margin:clamp(28px, 4vw, 46px) 0;
  max-width:30ch;
  font-size:clamp(25px, 4.8vw, 48px);
  line-height:1.14;
  letter-spacing:-0.022em;
  font-weight:600;
}
.satz em { font-style:normal; color:var(--leit); }

/* Die Spannweite: zwei Pole, und der linke wiegt mehr. Keine Halbe-Halbe,
   weil eine gleiche Teilung eine Gleichrangigkeit behauptet, die nicht
   gemeint ist. */
.spanne {
  display:grid;
  grid-template-columns:1.45fr 1fr;
  gap:0;
  max-width:88ch;
  border-top:2px solid var(--leit);
}
.spanne > div { padding:22px 40px 26px 0; }
.spanne > div + div {
  border-left:1px solid var(--linie);
  padding-left:40px;
  border-top:2px solid var(--hervor);
  margin-top:-2px;
}
.pol {
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--leit);
  margin:0 0 10px;
  font-weight:600;
}
.spanne > div + div .pol { color:var(--hervor); }
.spanne p { margin:0; max-width:34ch; }

/* Werkblöcke. Ungleich mit Absicht: jeder Block hat seine eigene Breite und
   seinen eigenen Einzug. Eine Kachelwand würde behaupten, das alles sei
   dasselbe Gewicht. */
.werk { margin:0 0 54px; }
.werk.tief { margin-left:clamp(0px, 5vw, 96px); }
.werk.tiefer { margin-left:clamp(0px, 9vw, 168px); }
.werk.schmal p { max-width:44ch; }
.werk.weit p { max-width:64ch; }

/* ── Werk mit Bild, seit D2B ─────────────────────────────────────────────────
   Der Kreativdirektor, 05.10.2026: die drei Textblöcke sollen drei grossen
   Abbildungen weichen, der Text schrumpft auf eine Zeile darunter. Genau
   das steht hier.

   Die ungleichen Einzüge von oben (`tief`, `tiefer`) entfallen für diese
   drei bewusst: eine Abbildung in voller Spaltenbreite ist schon die
   stärkere Setzung, und ein zusätzlicher Treppenversatz machte daraus eine
   Unordnung statt einer Rangfolge. Die Reihenfolge trägt den Rang.

   `aspect-ratio` statt fester Höhe, damit beim Laden nichts springt – die
   Datei ist 1280 auf 720, und genau das steht auch an jedem `img`. */
/* ── Die vier Angebote, seit P5A ─────────────────────────────────────────────
   Zwei Spalten, und sie reichen bis in die rechte Luft hinein: die Spalten
   brauchen die Breite, und ein Angebotsfeld, das auf halber Strecke aufhört,
   sieht aus wie ein Versehen. Der negative rechte Rand ist genau das Polster
   des Körpers, nicht mehr – dieselbe Rechnung wie beim Band. */
/* Zwei Spalten, seit die vier Kacheln drei sind: bei drei Spalten blieb die
   dritte unter der grossen Kachel leer, und ein Loch am rechten Rand liest
   sich als fehlendes Angebot. Gemessen am Abzug von P5A mit drei Spalten. */
.angebote {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(34px, 4.4vw, 62px) clamp(22px, 2.6vw, 38px);
  margin-right:calc(-1 * var(--luft) + clamp(22px, 3vw, 56px));
}
/* Die grosse Kachel über alle drei Spalten, innen geteilt im Verhältnis
   1 zu 1,618 – Bild links, Wort rechts, unten bündig. Nicht halbe-halbe: eine
   gleiche Teilung behauptete, das Wort wiege so viel wie der Beleg. */
.angebot_gross {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1.618fr 1fr;
  gap:clamp(22px, 2.8vw, 44px);
  align-items:end;
  margin-bottom:clamp(10px, 1.6vw, 24px);
}
/* `height:auto` auch hier, aus demselben gemessenen Grund wie bei `.beleg img`:
   das Attribut `height="720"` gewinnt sonst gegen `aspect-ratio`, und in einer
   Gitterzelle mit `align-items:end` wird daraus ein hochkant beschnittener
   Ausschnitt. Am ersten Abzug der grossen Kachel stand genau das. */
.angebot_gross .werk_abbild { margin-bottom:0; height:auto; align-self:end; }
.angebot_wort { align-self:end; }
.angebot_gross h3 {
  font-size:clamp(26px, 3.6vw, 46px);
  max-width:18ch;
}
.angebot_gross .werk_zeile { max-width:40ch; margin-bottom:0; }
@media (max-width: 900px) {
  .angebot_gross { grid-template-columns:1fr; align-items:start; }
  .angebot_gross .werk_abbild { margin-bottom:clamp(14px, 2vw, 22px); }
}
@media (max-width: 620px) {
  .angebote { grid-template-columns:1fr; margin-right:0; }
}
.werk_bild { margin:0 0 clamp(48px, 7vw, 92px); }
.angebote .werk_bild { margin:0; }
.werk_abbild {
  display:block;
  width:100%;
  /* Siehe `.beleg img`: ohne `height:auto` gewinnt das Attribut `height="720"`
     gegen `aspect-ratio`, sobald die Zelle hoeher wird als 16:9. */
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  margin:0 0 clamp(18px, 2.4vw, 28px);
  background:#0d0c0b;
}
/* P5A: der Titel eines Angebots ist eine Verkaufszeile und keine Bildlegende.
   In D2B stand er im selben Grad wie jede andere Zwischenüberschrift (24
   Punkte, gemessen am Abzug) und verschwand unter seiner eigenen Abbildung.
   Jetzt trägt er den Rang, den er hat. */
.werk_bild h3 {
  margin:0 0 10px;
  font-size:clamp(23px, 2.9vw, 38px);
  line-height:1.08;
  letter-spacing:-0.025em;
  font-weight:650;
  max-width:24ch;
}
/* Die eine Zeile. Grösser als Fliesstext, kleiner als die Überschrift:
   sie ist die Bildunterschrift, die den Satz trägt, nicht ein Absatz. */
.werk_zeile {
  margin:0 0 14px;
  font-size:clamp(17px, 1.9vw, 21px);
  line-height:1.4;
  color:#cfc8bd;
  max-width:52ch;
}
/* Das hervorgehobene Wort in der Angebotszeile – das Versprechen darin, nicht
   eine Zierde. Leitfarbe, weil die Zeile auf dem Nachtgrund steht. */
.werk_zeile em { font-style:normal; color:var(--leit); }

.ort {
  color:var(--gedaempft);
  font-size:15px;
  margin:0 0 14px;
  letter-spacing:0.01em;
}
.ort a {
  color:var(--papier);
  text-decoration:none;
  border-bottom:2px solid var(--leit);
  padding-bottom:1px;
}
.ort a:hover { color:var(--leit); }

.betont {
  border-left:3px solid var(--leit);
  padding:2px 0 2px 20px;
  max-width:60ch;
}
.betont.hervor { border-left-color:var(--hervor); }

/* Zahlen versetzt, nicht in Reihe. Der Versatz ist gerechnet, nicht
   dekorativ: er nimmt dem Auge die Zeile weg, die eine Tabelle suggeriert. */
.zahlen {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 27ch));
  gap:40px 64px;
  align-items:start;
  max-width:70ch;
  margin:0 0 48px;
}
.zahl { max-width:27ch; }
.zahl:nth-child(2) { margin-top:30px; }
.zahl:nth-child(3) { margin-top:12px; }
.zahl:nth-child(4) { margin-top:44px; }
.zahl:nth-child(5) { margin-top:6px; }
.zahl b {
  display:block;
  font-size:clamp(34px, 6vw, 58px);
  line-height:1;
  letter-spacing:-0.03em;
  font-weight:600;
  color:var(--leit);
  font-variant-numeric:tabular-nums;
}
.zahl.hervor b { color:var(--hervor); }
.zahl span {
  display:block;
  color:var(--gedaempft);
  font-size:15px;
  line-height:1.45;
  margin-top:8px;
}

.liste { list-style:none; padding:0; margin:0 0 18px; max-width:64ch; }
.liste li {
  padding:11px 0 11px 0;
  border-top:1px solid var(--linie);
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  align-items:baseline;
}
.liste li:last-child { border-bottom:1px solid var(--linie); }
.liste b { font-weight:600; flex:0 0 auto; }
.liste span { color:var(--gedaempft); font-size:15.5px; flex:1 1 22ch; }

/* Die Tür. Sie darf laut sein, weil sie die einzige auf der Seite ist –
   und sie steht spät, weil sie nicht der Zweck des Hauses ist. */
.tuer {
  border-left:3px solid var(--hervor);
  padding:4px 0 4px 22px;
  max-width:62ch;
}

/* ── Was nach dem Schreiben geschieht ───────────────────────────────────────
   Drei Schritte, an derselben linken Achse wie alles andere – keine Karten
   nebeneinander, keine Mitte. Die Ziffer steht ausserhalb der Spalte und
   führt den Blick nach unten, statt ihn auf drei Kacheln zu verteilen.

   `counter` statt `list-style`: die Punkte des Browsers sind grau, mittig
   gesetzt und lassen sich nicht in die Leitfarbe bringen. */
.ablauf {
  list-style:none;
  counter-reset:schritt;
  margin:clamp(28px, 4vw, 44px) 0 0;
  padding:0;
  max-width:58ch;
}
.ablauf li {
  counter-increment:schritt;
  position:relative;
  padding:0 0 0 46px;
  margin:0 0 clamp(18px, 2.5vw, 26px);
}
.ablauf li::before {
  content:counter(schritt);
  position:absolute;
  left:0;
  top:1px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.1em;
  color:var(--hervor);
  font-variant-numeric:tabular-nums;
}
.ablauf b {
  display:block;
  font-weight:600;
  font-size:17px;
  margin:0 0 4px;
}
.ablauf span { display:block; color:var(--gedaempft); font-size:15.5px; }

/* ── Das Formular ───────────────────────────────────────────────────────────
   Keine Kästen, keine Schatten, keine gerundeten Ecken: dieselbe Linie wie
   der übrige Satz. Ein Eingabefeld ist hier eine Schreiblinie, kein Kasten.
   Und keine einzige Zeile JavaScript – was der Browser nicht ausführen kann,
   kann er auch nicht falsch ausführen. */
.formular { margin:clamp(30px, 4vw, 48px) 0 0; max-width:62ch; }

.feld { margin:0 0 26px; max-width:46ch; }
.feld_lang { max-width:60ch; }
.formular label,
.wahl legend {
  display:block;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gedaempft);
  font-weight:600;
  margin:0 0 7px;
  padding:0;
}
.pflicht { color:var(--hervor); letter-spacing:0.08em; }
/* Leise, aber lesbar. Mit `--linie` war es im Bild zu P1B kaum noch da, und
   ein Hinweis, den man nicht liest, füllt bloss Platz. */
.frei { color:#6b6359; letter-spacing:0.08em; }
.hinweis {
  display:block;
  font-size:14.5px;
  line-height:1.5;
  color:var(--gedaempft);
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
  margin:-2px 0 9px;
}
.formular input[type="text"],
.formular input[type="email"],
.formular input[type="tel"],
.formular textarea {
  display:block;
  width:100%;
  background:transparent;
  color:var(--papier);
  font:inherit;
  font-size:18px;
  border:0;
  border-bottom:1px solid var(--linie-hell);
  border-radius:0;
  padding:9px 2px;
  -webkit-appearance:none;
  appearance:none;
}
.formular textarea {
  border:1px solid var(--linie-hell);
  padding:12px 13px;
  line-height:1.58;
  resize:vertical;
  min-height:8em;
}
.formular input:focus,
.formular textarea:focus {
  outline:none;
  border-color:var(--leit);
}

.wahl {
  border:0;
  border-left:2px solid var(--leit);
  margin:0 0 28px;
  padding:0 0 0 18px;
  max-width:46ch;
}
.wahl legend { margin-bottom:10px; }
/* `.formular label` ist ein Klasse-plus-Typ-Wähler und schlägt eine blosse
   Klasse. Im Bild zu P1B stand deshalb die ganze Eilt-Zeile in Versalien:
   „ES EILT. EIN TRÄGER ZERFÄLLT, …". Die Regel muss hier zweiklassig sein,
   sonst gewinnt die falsche. */
.formular .wahl_zeile {
  display:flex;
  gap:12px;
  align-items:baseline;
  padding:6px 0;
  cursor:pointer;
  text-transform:none;
  letter-spacing:0;
  font-size:18px;
  color:var(--papier);
  font-weight:400;
  margin:0;
}
.wahl_zeile input {
  flex:0 0 auto;
  width:17px;
  height:17px;
  margin:0;
  position:relative;
  top:2px;
  accent-color:var(--leit);
}

/* Ein eigenes Feld statt eines Satzes im Fliesstext: „mein Band zerfällt"
   darf nicht davon abhängen, dass jemand das richtige Wort wählt. */
.formular .eilt {
  display:flex;
  gap:14px;
  align-items:flex-start;
  max-width:54ch;
  margin:2px 0 30px;
  border-left:2px solid var(--hervor);
  padding:12px 0 12px 18px;
  cursor:pointer;
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
}
.eilt input {
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin:0;
  position:relative;
  top:4px;
  accent-color:var(--hervor);
}
.eilt span { font-size:16px; line-height:1.5; color:var(--gedaempft); }
.eilt b { color:var(--papier); font-weight:600; }

/* Das Köderfeld: für Augen und für Vorleseprogramme weg, für eine Maschine,
   die Formulare abfüllt, ein Feld wie jedes andere. Nicht `display:none` mit
   negativer Position – ein Feld ausserhalb des Blattes schiebt die Seite
   quer, und genau das war hier schon einmal ein Befund. */
.koeder {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.senden { margin:10px 0 0; max-width:none; }
.formular button {
  font:inherit;
  font-size:clamp(19px, 2.6vw, 24px);
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--nacht);
  background:var(--hervor);
  border:0;
  border-radius:0;
  padding:15px 32px;
  cursor:pointer;
}
.formular button:hover { background:var(--papier); }

.zweitweg {
  margin:24px 0 0;
  max-width:52ch;
  font-size:15.5px;
  color:var(--gedaempft);
}
.zweitweg a {
  color:var(--papier);
  text-decoration:none;
  border-bottom:1px solid var(--hervor);
}
.zweitweg a:hover { color:var(--hervor); }

/* Mängel stehen am Formular, nicht in einem Kasten des Browsers – und die
   Werte bleiben stehen, damit niemand sechs Felder neu tippt. */
.mangel {
  border-left:3px solid var(--hervor);
  padding:12px 0 14px 20px;
  margin:clamp(26px, 4vw, 42px) 0 0;
  max-width:54ch;
}
.mangel p { margin:0 0 8px; }
.mangel ul { margin:0; padding-left:20px; }
.mangel li { margin:5px 0; color:var(--hervor); }

/* ── Der Chat, seit P2F ──────────────────────────────────────────────────────
   Daneben, nicht an der Stelle des Formulars: wer kein JavaScript hat, sieht
   das Formular unverändert und diesen Block gar nicht. Dieselbe linke Achse
   wie `.tuer` und `.mangel`, nur mit `--leit` statt `--hervor`, damit er sich
   als das zweite, nicht das erste Mittel lesen lässt. */
.chat {
  display:none;
  border-left:3px solid var(--leit);
  padding:4px 0 4px 22px;
  margin:clamp(30px, 4vw, 48px) 0 0;
  max-width:62ch;
}
.chat.bereit { display:block; }
.chat label {
  display:block;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gedaempft);
  font-weight:600;
  margin:0 0 12px;
}
.chat_verlauf {
  max-height:280px;
  overflow-y:auto;
  margin:0 0 14px;
  padding:0 2px 0 0;
}
.chat_zeile { margin:0 0 12px; max-width:52ch; }
.chat_zeile b {
  display:block;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gedaempft);
  font-weight:600;
  margin:0 0 3px;
}
.chat_zeile.zenja b { color:var(--leit); }
.chat_zeile p { margin:0; font-size:16px; line-height:1.5; }
.chat_leer { color:var(--gedaempft); font-size:15px; margin:0 0 14px; }
.chat_zeile_form { display:flex; gap:10px; align-items:flex-end; }
.chat textarea {
  display:block;
  flex:1 1 auto;
  background:transparent;
  color:var(--papier);
  font:inherit;
  font-size:16px;
  border:1px solid var(--linie-hell);
  border-radius:0;
  padding:10px 12px;
  line-height:1.5;
  resize:vertical;
  min-height:3em;
  -webkit-appearance:none;
  appearance:none;
}
.chat textarea:focus { outline:none; border-color:var(--leit); }
.chat button {
  flex:0 0 auto;
  font:inherit;
  font-size:15px;
  font-weight:600;
  color:var(--nacht);
  background:var(--leit);
  border:0;
  border-radius:0;
  padding:12px 20px;
  cursor:pointer;
}
.chat button:hover { background:var(--papier); }
.chat button:disabled { background:var(--linie-hell); cursor:default; }
.chat_hinweis {
  font-size:13.5px;
  color:var(--gedaempft);
  margin:10px 0 0;
}
/* Ein Hinweis, der den Deckel meldet, ist keine Nebenbemerkung: der Besucher
   muss verstehen, dass er nicht ins Leere geschrieben hat. Darum tritt er
   heraus - aber über die Leitfarbe, nicht über Rot. Es ist kein Fehler. */
.chat_hinweis[data-art="deckel"] {
  color:var(--papier);
  border-left:2px solid var(--leit);
  padding:2px 0 2px 12px;
}
.chat_hinweis[data-art="fehler"] { color:var(--papier); }

/* Was heute noch frei ist. Steht ÜBER dem Fenster, nicht darunter: eine
   Grenze, die man erst nach dem Anschlagen liest, ist eine Ausrede. */
.chat_stand {
  font-size:13.5px;
  line-height:1.55;
  color:var(--gedaempft);
  margin:0 0 14px;
  max-width:54ch;
}
.chat_stand[data-art="zu"] {
  color:var(--papier);
  border-left:2px solid var(--leit);
  padding:2px 0 2px 12px;
}
.chat_stand:empty { display:none; }

/* „Zenja schreibt …" - dieselbe Zeile wie eine Antwort, nur gedämpft und
   ohne Bewegung. Ein blinkender Punkt wäre hier Zierde. */
.chat_takt p { color:var(--gedaempft); font-style:italic; }

/* Die zwei Sprachknöpfe sind eine Zugabe und sehen auch so aus: Umriss
   statt Fläche, damit „Senden" der einzige gefüllte Knopf bleibt. Das
   Skript entfernt sie, wo der Browser sie nicht tragen kann. */
.chat_sprache {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 12px;
  margin:12px 0 0;
}
.chat_sprache button {
  background:transparent;
  color:var(--gedaempft);
  border:1px solid var(--linie-hell);
  padding:7px 14px;
  font-size:13.5px;
  font-weight:600;
}
.chat_sprache button:hover {
  background:transparent;
  color:var(--papier);
  border-color:var(--leit);
}
.chat_sprache button[aria-pressed="true"] {
  color:var(--nacht);
  background:var(--leit);
  border-color:var(--leit);
}
.chat_sprache span {
  flex:1 1 26ch;
  font-size:12.5px;
  line-height:1.5;
  color:var(--gedaempft);
}

footer {
  color:var(--gedaempft);
  font-size:14px;
  margin-top:20px;
  max-width:58ch;
}
footer a { color:var(--gedaempft); }
.stand {
  font-variant-numeric:tabular-nums;
  letter-spacing:0.04em;
}

/* Die Dankseite. Kein eigenes Blatt mit eigener Handschrift – dieselbe
   Datei, dieselbe Achse, dieselbe Marke. */
.dank .anspruch { max-width:26ch; }
.dank .vorspann b {
  color:var(--papier);
  font-variant-numeric:tabular-nums;
  letter-spacing:0.02em;
}
.zurueck { margin-top:26px; font-size:15.5px; }
.zurueck a { color:var(--gedaempft); }

/* ── Die Einblendung ─────────────────────────────────────────────────────────
   **Der Schalter sitzt am `html`, und er wird von JavaScript umgelegt.** Wer
   die Regel umdreht und `.einblender { opacity:0 }` fest ins Blatt schreibt,
   baut eine Seite, die ohne Skript leer bleibt – ein Riegel, der nicht
   meckert, sondern schweigt. So herum ist der Grundzustand „sichtbar", und
   die Einblendung ist eine Zugabe, die ausfallen darf. */
.regt_sich .einblender {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease-out, transform .7s ease-out;
}
.regt_sich .einblender.ist_da {
  opacity:1;
  transform:none;
}

/* Der Parallaxschub. Ohne Skript ist `--schub` nicht gesetzt, der Rückfall
   ist 0 – das Bild steht dann einfach still. */
.regt_sich [data-schub] {
  transform:translate3d(0, var(--schub, 0px), 0);
  will-change:transform;
}

/* ── Randabfallende Bilder ───────────────────────────────────────────────────
   Dieselbe Rechnung wie beim Band: die Polster des Körpers genau zurück, und
   nicht `100vw` – das hätte den Querschub vom 26.09.2026 zurückgebracht.
   Der Rahmen schneidet ab, das Bild steht oben und unten über, damit der
   Schub keine Lücke aufreisst. */
.bildband {
  position:relative;
  overflow:hidden;
  margin:clamp(32px, 5vw, 56px) calc(-1 * var(--luft))
         clamp(40px, 6vw, 72px) calc(-1 * var(--achse));
  height:clamp(240px, 38vw, 460px);
}
.bildband img {
  position:absolute;
  left:0;
  top:calc(-1 * var(--ueberstand));
  width:100%;
  height:calc(100% + 2 * var(--ueberstand));
  object-fit:cover;
  display:block;
}
/* ── Das drehende Stirnrad ───────────────────────────────────────────────────
   Simon, 28.09.2026: „Auch das Zahnrad könntest Du noch orbital animieren."

   **Warum hier eine Zeichnung steht und nicht das Foto.** Das Foto aus
   `bilder/werkstatt.png` zeigt ein Rad schräg von oben. Dreht man ein solches
   Bild in der Fläche, dreht sich nicht das Rad um seine Achse – es taumelt,
   weil die Perspektive mitkippt. Ein Bild kann sich nicht um eine Achse
   drehen, die im Bild steckt. Die Zeichnung kann es, und sie ist zugleich
   der Beleg für den Satz daneben: `zahnrad.svg` ist gerechnet, nicht gemalt.

   Zwei Minuten für eine Umdrehung, linear, ohne Anlauf – ein Zahnrad läuft
   gleichförmig, das ist sein ganzer Sinn. Schneller wäre ein Rad, das nichts
   antreibt, und das sieht man sofort.

   Die Achse ist rechts, nicht in der Mitte. */
.zahnrad_feld {
  margin:clamp(22px, 3vw, 34px) 0 clamp(26px, 3.5vw, 40px);
  display:flex;
  justify-content:flex-end;
  padding-right:clamp(0px, 4vw, 60px);
}
.zahnrad {
  display:block;
  width:clamp(150px, 26vw, 260px);
  height:auto;
  opacity:0.9;
  animation:umlauf 120s linear infinite;
  /* Die Drehung läuft auf der eigenen Ebene, damit der Browser dafür nicht
     bei jedem Bild das Blatt neu setzt. */
  will-change:transform;
}
@keyframes umlauf { to { transform:rotate(360deg); } }
/* Wer Bewegung abbestellt hat, bekommt ein stehendes Rad – und zwar ein
   ganzes, nicht ein leeres Feld. Der zweite Riegel steht weiter unten im
   Sammelblock, dieser hier trägt auch beim Drucken. */
@media (prefers-reduced-motion: reduce) {
  .zahnrad { animation:none; }
}

/* Ein leiser Verlauf an beiden Enden: das Bild soll aus dem Grund auftauchen
   und wieder in ihn zurückfallen, nicht als Streifen aufgeklebt wirken. */
.bildband::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, var(--nacht), transparent 22%,
                             transparent 74%, var(--nacht));
  pointer-events:none;
}

/* ── Der Aufklapper ──────────────────────────────────────────────────────────
   Ein echtes `<details>`, also trägt es ohne eine Zeile Skript. Aber nicht
   das graue Dreieck des Browsers: das ist die Handschrift des Browsers, und
   die trägt kein zenja. Das Zeichen ist darum aus zwei Linien gebaut, in der
   Leitfarbe, und wird beim Öffnen vom Plus zum Minus. */
.mehr { margin:14px 0 0; max-width:60ch; }
.mehr summary {
  display:flex;
  gap:12px;
  align-items:baseline;
  cursor:pointer;
  list-style:none;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gedaempft);
  padding:6px 0;
}
.mehr summary::-webkit-details-marker { display:none; }
.mehr summary::before {
  content:"";
  flex:0 0 auto;
  width:13px;
  height:13px;
  position:relative;
  top:2px;
  background:
    linear-gradient(var(--leit), var(--leit)) center / 13px 1px no-repeat,
    linear-gradient(var(--leit), var(--leit)) center / 1px 13px no-repeat;
}
.mehr[open] summary::before {
  background:
    linear-gradient(var(--leit), var(--leit)) center / 13px 1px no-repeat;
}
.mehr summary:hover { color:var(--papier); }
.mehr summary:focus-visible { outline:1px solid var(--leit); outline-offset:4px; }
.mehr_inhalt {
  padding:10px 0 0 25px;
  border-left:1px solid var(--linie);
  margin-left:6px;
}
.mehr_inhalt p { margin:0 0 12px; }
.mehr_inhalt p:last-child { margin-bottom:0; }

/* ── Die Tore zu den Unterblättern ───────────────────────────────────────────
   Keine Kachelwand: zwei Tore, und das linke ist breiter. Gleich grosse
   Kacheln behaupteten, beide Blätter wögen dasselbe. */
.tore {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:clamp(24px, 3vw, 46px);
  /* P5A: dieselbe Breite wie die vier Angebote darüber. Mit `max-width:86ch`
     endeten die zwei Tore auf halber Strecke, während das Gitter darüber bis
     in die rechte Luft reichte – zwei verschiedene Spaltensysteme auf einer
     Seite, und das untere las sich als Rest. Gemessen am Abzug von P5A mit
     dem Gitter: Tore 1012 Punkte breit gegen 1260 beim Gitter. */
  margin:0 calc(-1 * var(--luft) + clamp(22px, 3vw, 56px)) 0 0;
}
@media (max-width: 760px) { .tore { margin-right:0; } }
.tor {
  display:block;
  text-decoration:none;
  color:var(--papier);
  border-top:2px solid var(--leit);
  padding:20px 24px 24px 0;
  transition:border-color .2s ease;
}
.tor:nth-child(2) { border-top-color:var(--hervor); }
.tor_bild {
  display:block;
  position:relative;
  overflow:hidden;
  height:clamp(140px, 19vw, 250px);
  margin:0 0 20px;
}
.tor_bild img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(0.85);
  transition:transform .5s ease, filter .3s ease;
}
.tor:hover .tor_bild img { transform:scale(1.04); filter:saturate(1); }
.tor_nr {
  display:block;
  font-size:13px;
  letter-spacing:0.14em;
  font-weight:600;
  color:var(--leit);
  font-variant-numeric:tabular-nums;
  margin:0 0 8px;
}
.tor:nth-child(2) .tor_nr { color:var(--hervor); }
.tor_titel {
  display:block;
  font-size:clamp(22px, 3.2vw, 31px);
  line-height:1.16;
  letter-spacing:-0.012em;
  font-weight:600;
  margin:0 0 10px;
}
.tor:hover .tor_titel { color:var(--leit); }
.tor:nth-child(2):hover .tor_titel { color:var(--hervor); }
.tor_zeile {
  display:block;
  color:var(--gedaempft);
  font-size:15.5px;
  line-height:1.5;
  max-width:34ch;
}

/* ── Die Unterblätter ────────────────────────────────────────────────────────
   Dieselbe Achse, dieselbe Marke, aber klein: der Auftritt war das erste
   Blatt, hier steht der Inhalt. */
.blatt_weg {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  max-width:78ch;
  padding-bottom:16px;
  border-bottom:1px solid var(--linie);
}
.zur_marke {
  font-size:22px;
  font-weight:600;
  letter-spacing:-0.02em;
  text-decoration:none;
  color:var(--papier);
}
.zur_marke .endung { color:var(--leit); font-weight:400; }
.zur_marke:hover { color:var(--leit); }
.blatt_nr {
  font-size:13px;
  letter-spacing:0.18em;
  font-weight:600;
  color:var(--gedaempft);
  font-variant-numeric:tabular-nums;
}
.blatt_kopf { margin:clamp(40px, 7vw, 88px) 0 0; }
.blatt_titel {
  font-size:clamp(38px, 8vw, 92px);
  line-height:0.98;
  letter-spacing:-0.035em;
  font-weight:600;
  margin:0 0 24px;
  max-width:16ch;
}

/* Die vier Folgerungen. Jede ist ein Aufklapper, dessen Titelzeile allein
   schon die Aussage trägt – wer nur überfliegt, nimmt trotzdem vier Sätze
   mit. Das war in P1B nicht so: dort standen drei dichte Absätze. */
.folgen { max-width:62ch; }
.folge {
  border-top:1px solid var(--linie);
  padding:4px 0;
}
.folge:last-child { border-bottom:1px solid var(--linie); }
.folge summary {
  display:flex;
  gap:18px;
  align-items:baseline;
  cursor:pointer;
  list-style:none;
  font-size:clamp(18px, 2.6vw, 23px);
  line-height:1.3;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--papier);
  padding:18px 0;
}
.folge summary::-webkit-details-marker { display:none; }
.folge_nr {
  flex:0 0 auto;
  font-size:13px;
  letter-spacing:0.12em;
  font-weight:600;
  color:var(--leit);
  font-variant-numeric:tabular-nums;
}
/* Das Zeichen steht hier rechts aussen, nicht vorn: vorn sitzt schon die
   Nummer, und zwei Marken am selben Zeilenanfang heben sich gegenseitig auf.
   Ohne Zeichen sah die Reihe im Bild zu P1C wie eine blosse Liste aus – dass
   sich jede Zeile öffnen lässt, war ihr nicht anzusehen. */
.folge summary::after {
  content:"";
  flex:0 0 auto;
  margin-left:auto;
  width:13px;
  height:13px;
  position:relative;
  top:-1px;
  background:
    linear-gradient(var(--leit), var(--leit)) center / 13px 1px no-repeat,
    linear-gradient(var(--leit), var(--leit)) center / 1px 13px no-repeat;
}
.folge[open] summary::after {
  background:
    linear-gradient(var(--leit), var(--leit)) center / 13px 1px no-repeat;
}
.folge[open] summary { color:var(--leit); }
.folge summary:hover { color:var(--leit); }
.folge summary:focus-visible { outline:1px solid var(--leit); outline-offset:4px; }
.folge .mehr_inhalt {
  border:0;
  margin:0;
  padding:0 0 20px 44px;
}
.folge .mehr_inhalt p { max-width:52ch; color:var(--gedaempft); }

.betont.gross {
  font-size:clamp(19px, 2.8vw, 25px);
  line-height:1.45;
  max-width:50ch;
  color:var(--papier);
}

/* Der Weg vom einen Unterblatt zum anderen – und zurück. Ein Blatt ohne
   Ausgang ist eine Sackgasse, und dann geht der Besucher nicht zurück,
   sondern weg. */
.weiterblatt {
  margin:clamp(48px, 7vw, 88px) 0 0;
  display:flex;
  flex-direction:column;
  gap:28px;
  align-items:flex-start;
}
.tor_schmal {
  max-width:52ch;
  border-top-color:var(--hervor);
  padding-right:0;
}
.tor_schmal .tor_nr { color:var(--hervor); }
.tor_schmal:hover .tor_titel { color:var(--hervor); }
/* Die Tür am Fuss eines Unterblatts. Sie trägt die Leitfarbe statt der
   Bronze, damit sie sich vom Tor zum Nachbarblatt unterscheidet: das eine
   führt weiter, das andere führt heraus. */
.tor_tuer { border-top-color:var(--leit); }
.tor_tuer .tor_nr { color:var(--leit); }
.tor_tuer:hover .tor_titel { color:var(--leit); }
.zurueck_tor {
  color:var(--gedaempft);
  text-decoration:none;
  font-size:15px;
  letter-spacing:0.02em;
  border-bottom:1px solid var(--linie);
  padding-bottom:3px;
}
.zurueck_tor:hover { color:var(--papier); border-bottom-color:var(--leit); }

/* ── Wenn keine Bewegung gewünscht ist ───────────────────────────────────────
   `regung.js` legt den Schalter gar nicht erst um, wenn diese Einstellung
   steht. Das hier ist der zweite Riegel für den Fall, dass die Einstellung
   erst nach dem Laden gesetzt wird, und für das Drucken. */
@media (prefers-reduced-motion: reduce) {
  .regt_sich .einblender { opacity:1; transform:none; transition:none; }
  .regt_sich [data-schub] { transform:none; }
  .hinab::after { animation:none; opacity:0.8; }
  .tor_bild img { transition:none; }
  .zahnrad { animation:none; }
  /* Der laufende Kopf steht still: das erste Bild bleibt voll gedeckt
     liegen, die vier anderen werden gar nicht erst gezeigt. Eine Folge
     ohne Bewegung wäre ein Blinken, und das ist schlimmer als ein Bild. */
  .trailerbild { animation:none; opacity:0; transform:none; }
  .trailerbild:nth-child(1) { opacity:1; }
  .schlag { animation:none; opacity:1; transform:none; }
}
@media print {
  .regt_sich .einblender { opacity:1; transform:none; }
  .zahnrad { animation:none; }
  .hinab, .kopf_flaeche { display:none; }
  .trailerbild { animation:none; opacity:0; }
  .trailerbild:nth-child(1) { opacity:1; }
  .schlag { animation:none; opacity:1; transform:none; }
  .mehr_inhalt, .folge .mehr_inhalt { display:block; }
}

@media (max-width:760px) {
  body { padding-right:var(--luft-schmal); }

  /* **Hier stand bis P1B `.antlitz { display:none }`** – die einzige
     Medienabfrage der Datei, und sie nahm dem Telefon das einzige Bild der
     Seite weg. Seit P3A ist das keine Frage mehr: das Antlitz steht an der
     Tür und das Heldenbild im Kopf, beide tragen auf dem Telefon ohne
     Ausnahme.

     Was hier bleibt, ist die Stellung an der Tür: nebeneinander hätte der
     Satz bei 390 Punkten noch rund 180 Punkte Breite, also elf Zeichen je
     Zeile. Untereinander liest er sich. */
  .tuer_kopf {
    flex-direction:column;
    align-items:flex-start;
    gap:clamp(18px, 5vw, 28px);
  }
  .antlitz { width:min(54vw, 260px); }

  /* Im Fluss statt absolut: auf dem Telefon bricht die Trailer-Zeile auf
     drei Zeilen um, und ein absolut gesetzter Hinweis am unteren Rand lag
     im Bild zu P1C quer über „verloren war." – zwei Dinge am selben Platz. */
  .hinab {
    position:static;
    margin:clamp(24px, 6vw, 40px) 0 0;
  }
  /* Der Kopf behält seine Höhe: das Bild IST hier der Inhalt, und ein auf
     die Schrift zusammengezogener Kopf zeigte von der Filmrolle einen
     Streifen. Nur das untere Polster wird knapper, damit die Zeile nicht in
     der Mitte des Bildschirms hängt. */
  .kopf {
    min-height:clamp(520px, 80svh, 760px);
    padding-bottom:clamp(40px, 9vw, 72px);
  }

  /* **Der Ausschnitt ist auf dem Telefon ein anderer, und das ist gerechnet,
     nicht geraten.** `cover` skaliert ein 4:3-Bild in einem hochkanten
     Rahmen über die Höhe: bei 390 zu 675 Punkten wird das Bild 900 Punkte
     breit, sichtbar bleiben 390 davon, also 43 Prozent. Mit dem Wert vom
     Schreibtisch (62 Prozent) lag dieser Streifen rechts der Spule – im
     ersten Abzug zu P3A war die Filmrolle auf dem Telefon nicht als
     Filmrolle zu erkennen, sondern als brauner Bogen. Mit 34 Prozent liegt
     das sichtbare Fenster bei 19 bis 62 Prozent der Bildbreite, und darin
     stehen Nabe, Speichen und der Anfang des Streifens. */
  .kopf_flaeche { object-position:34% 40%; }

  /* Der Körper hat hier ein anderes rechtes Polster – Band, Kopf und
     Bildband müssen es mitziehen, sonst schieben sie die Seite quer. */
  .band {
    margin-right:calc(-1 * var(--luft-schmal));
    padding-right:var(--luft-schmal);
  }
  .kopf {
    margin-right:calc(-1 * var(--luft-schmal));
    padding-right:var(--luft-schmal);
  }
  .bildband { margin-right:calc(-1 * var(--luft-schmal)); }
  .tore { grid-template-columns:1fr; gap:36px; }
  .tor { padding-right:0; }
  .folge .mehr_inhalt { padding-left:0; }
  .blatt_titel { max-width:none; }
  .wb_zwei { margin-left:0; }
  section.eingezogen { padding-left:0; }
  .haarlinie.mittel { margin-left:0; }
  .spanne { grid-template-columns:1fr; border-top:2px solid var(--leit); }
  .spanne > div { padding:18px 0 22px; }
  .spanne > div + div {
    border-left:0;
    padding-left:0;
    border-top:1px solid var(--linie);
    margin-top:0;
    padding-top:20px;
  }
  .spanne > div + div .pol { color:var(--hervor); }
  .werk.tief, .werk.tiefer { margin-left:0; }
  .zahlen { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:26px 24px; }
  .zahl { margin-top:0 !important; max-width:none; }
  .liste li { gap:4px 18px; }
  .formular button { width:100%; }
}


/* ══ DIE VORZEILE AN DER TÜR ═════════════════════════════════════════════════
   Der Satz „Nichts hiervon ist ein Entwurf" stand bis P5A als eigener Riegel
   zwischen zwei Haarlinien und kostete am Telefon 144 Bildpunkte fuer eine
   Zeile. Er steht jetzt ueber der Aufforderung, wo er etwas tut. */
.vorzeile {
  margin:0 0 clamp(14px, 1.8vw, 22px);
  font-size:clamp(17px, 1.9vw, 22px);
  line-height:1.35;
  color:#bdb5a9;
  max-width:40ch;
}
.vorzeile em { font-style:normal; color:var(--leit); }

/* ══ DAS TELEFON: ZUSAMMENLEGEN, NICHT WEGLASSEN ═════════════════════════════
   Gemessen bei 390 Punkten Breite, vor diesem Block: 7412 Bildpunkte, also
   8,8 Bildschirme zu je 844. Die Hoehe lag nicht an einem Abschnitt, sondern
   an vier: Tuer 2284, Angebote 1773, Beweisriegel 1330, zwei Tore 635.

   Jede Regel hier legt zusammen, sie streicht nichts: die zwei kleineren
   Belege wandern in die Zeile, die ohnehin schon die uebrigen Adressen
   aufzaehlt; die Torbilder werden ein Streifen statt einer Kachel; das
   Antlitz steht neben dem Satz statt ueber ihm; die Formularfelder ruecken
   zusammen. Was wirklich gestrichen ist, steht in VERSION.md mit Grund. */
@media (max-width: 620px) {
  /* Von drei Belegen behaelt nur der grosse sein Bild. Die zwei anderen
     kosteten am Telefon 580 Bildpunkte – aber sie verschwinden nicht, sie
     schrumpfen auf ihre Adresse.

     WARUM DIE KORREKTUR, gemessen am 06.10.2026 an `ansicht_telefon_P5B.png`:
     hier stand `display:none` auf dem ganzen Anker, mit der Begruendung, die
     zwei seien „dieselben, die zwei Zeilen tiefer schon als Verweis
     dastehen". Das stimmte nicht. Zwei Zeilen tiefer stehen jobs, aiad,
     immo, etikett, vorsorge und zenja.me – jass und events kamen dort nie
     vor. Am Telefon versprach die Ueberschrift also „Drei davon koennen Sie
     jetzt oeffnen" und lieferte genau einen, auf dem Geraet, auf dem die
     meisten die Seite aufschlagen. Eine Begruendung, die niemand nachgezaehlt
     hat, hat hier zwei Belege geloescht.

     Bild und Beschreibungszeile gehen weg, die Adresse bleibt: das sind
     rund 80 statt 580 Bildpunkte, und die Zusage der Ueberschrift stimmt
     wieder. */
  .belege > .beleg:nth-child(n+2) img,
  .belege > .beleg:nth-child(n+2) .beleg_zeile { display:none; }
  .belege > .beleg:nth-child(n+2) .beleg_adresse { margin-top:0; }
  .belege { gap:14px 0; }

  /* Die Tore: Streifen statt Kachel. Das Bild bleibt, es traegt nur nicht
     mehr die halbe Bildschirmhoehe. */
  .tor_bild { height:96px; }
  .tor { padding-top:14px; }
  .tore { gap:18px; }

  /* Das Antlitz neben den Satz statt darueber. */
  .tuer_kopf { display:flex; align-items:flex-start; gap:16px; }
  .antlitz { width:112px; flex:0 0 auto; }

  /* Die Formularfelder ruecken zusammen. Kein Feld faellt weg, keines wird
     freiwillig – gemessen am Telefon war das Textfeld mit 8em Mindesthoehe
     allein 226 Bildpunkte, die drei Anliegen-Knoepfe untereinander 157. */
  .feld { margin-bottom:16px; }
  .formular textarea { min-height:5.2em; }
  /* Die drei Anliegen nebeneinander statt untereinander – drei kurze Woerter
     („bauen lassen", „etwas retten", „anderes") passen in eine Reihe. */
  .wahl { margin-bottom:18px; }
  .wahl > .wahl_zeile { display:inline-flex; margin-right:16px; padding:4px 0; font-size:17px; }
  .eilt span { font-size:14.5px; line-height:1.45; }
  .chat_sprache span { font-size:13px; line-height:1.45; }
  /* Der Takt zwischen den Abschnitten enger, aber nicht weg. */
  section.luft_weit { padding-top:40px; }
  section.luft_sehr_weit { padding-top:50px; }
  .angebote { gap:26px; }
  .beweis { padding-top:32px; padding-bottom:32px; }
}


/* ══ DIE TÜR ZUM CHAT ════════════════════════════════════════════════════════
   Eine Zeile statt eines Blocks. Sie steht nur da, wenn der Chat wirklich
   bereit ist – ohne JavaScript bleibt `.chat` auf `display:none`, und eine
   Zeile, die dann nichts oeffnet, waere schlimmer als keine. */
.chat_tuer { margin:clamp(26px, 3.2vw, 40px) 0 0; }
.chat_tuer:not(:has(.chat.bereit)) { display:none; }
.chat_tuer > summary {
  cursor:pointer;
  list-style:none;
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  font-size:16px;
  color:var(--leit);
  border-bottom:1px solid var(--hervor);
  padding-bottom:3px;
}
.chat_tuer > summary::-webkit-details-marker { display:none; }
.chat_tuer > summary::before { content:"+"; color:var(--hervor); font-weight:600; }
.chat_tuer[open] > summary::before { content:"\2013"; }
.chat_tuer[open] > summary { margin-bottom:18px; }
.chat_tuer .chat { margin-top:0; }
/* Die Beschriftung im Feld wiederholt die Zeile darueber nicht mehr – sie
   bleibt fuer Vorleseprogramme stehen, aber nicht im Bild. */
.nur_fuer_leser {
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

@media (max-width: 620px) {
  /* Die zwei Tore nebeneinander statt untereinander: zwei Zeilen Titel in
     einer halben Breite lesen sich besser als 621 Bildpunkte Hoehe. */
  .tore { grid-template-columns:1fr 1fr; gap:14px; }
  .tor_bild { height:76px; margin-bottom:12px; }
  .tor_titel { font-size:19px; }
  .tor_zeile { font-size:13.5px; }
  /* Die Angebotsbilder flacher – 16:9 auf 2:1, das sind je rund 20 Punkte. */
  .angebote .werk_abbild { aspect-ratio:2 / 1; }
  /* Die zweite Postadresse steht schon im Formular darueber. */
  .zweitweg { font-size:15px; margin-top:16px; }
}


/* Die Zeile am Fenster – klein, in der Leitfarbe, direkt ueber der oberen
   Kante. Sie macht aus einem anonymen Produktfenster einen benannten Beleg. */
.schirm_marke {
  margin:0 0 10px;
  font-size:12.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--hervor);
  white-space:nowrap;
}
.schirm_marke span { color:#8b8378; }
/* Sie gehoert zum Fenster und steht darum MIT ihm in einem Kasten. Als
   eigenes drittes Flexkind nebenan machte sie den Kopf dreispaltig: die
   Schlagzeile fiel auf sieben Zeilen und ihre Achse rutschte von 100 auf
   rund 200 Punkte, waehrend der Rest der Seite bei 100 bleibt. Gemessen am
   Abzug von P5A mit drei Flexkindern. */
.kopf_fenster {
  flex:0 0 auto;
  align-self:end;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.kopf_fenster .kopf_schirm { margin-right:calc(-1 * var(--luft)); }
.schirm_marke { align-self:flex-start; }
@media (max-width: 900px) {
  .schirm_marke { margin:clamp(18px, 3.4vw, 28px) 0 8px; white-space:normal; }
}