/* ══ BatZEN – das Gesicht ═════════════════════════════════════════════
   Iris, P2A, 08.10.2026.

   WAS AN P1B DURCHGEFALLEN IST. Simon, 08.10.2026 22:14:40, über die
   Sprachausgabe: „Danke für die Flohmarkt Seite. Sie ist wieder nach dem
   alten Muster gestartet. Bitte ein passenderes Design entwickeln mit Iris
   und der RTX." Das ist kein Einwand gegen eine Entscheidung, sondern gegen
   die Familie: warmes Hauspapier, flach, Null-Radius, Grotesk, eine
   Leitfarbe, Tafel mit Achse links – dieselbe Handschrift wie eventsZENe
   und glanZEN. Jede Entscheidung darin war begründet; zusammen ergaben sie
   eine Seite, die er kennt, bevor er sie ansieht. Darum eine neue Runde,
   kein Nachjustieren.

   WONACH SAH P1B AUS: nach dem Veranstaltungskalender einer Gemeinde.
   Gemessen am Abzug 430x932: der erste Bildschirm zeigte Wortmarke, zwei
   Knöpfe, ein Feld, eine Auswahl, zwei weitere Knöpfe – und darunter EINEN
   Markt. Vier Reihen Apparat vor der ersten Sache.

   WONACH ES JETZT AUSSIEHT: nach einem Auktionskatalog für Dinge, die
   niemand versteigert. Dunkler, warmer Grund; die Gegenstände stehen im
   Licht; die Märkte sind Lose mit Stunde, Namen und Ort. Das Vergleichbare
   ist der Katalogsatz eines Auktionshauses, nicht der Gemeindekalender –
   und genau diese Verschiebung ist die Aussage: auf einem Flohmarkt liegt
   etwas, das Wert hat, und die Seite behauptet das, bevor ein Wort gelesen
   ist. Das ist zugleich das Gegenteil der Billigsignatur (Simon,
   28.09.2026): ein Ton, Unterscheidung über Helligkeit, keine zweite
   kräftige Buntfarbe.

   DER EINE BRUCH, UND ER IST LAUT: in jedem Los ist die ANFANGSSTUNDE die
   grösste Type, grösser als der Name des Marktes. Gebrochen wird damit
   hierarchie:1 in der erlaubten Form des Zweikampfs – und der Zweikampf ist
   entschieden, nicht offen: der Name steht in der Serifenschrift daneben,
   alles andere im Los verstummt. Was er leistet: auf einem Flohmarkt
   entscheidet nicht der Name und nicht einmal der Tag, sondern wann er
   aufgeht. Wer um neun kommt, kriegt den Rest. Die Stunde ist die einzige
   Angabe auf dieser Seite, die eine Handlung auslöst, und sie stand in P1B
   als „ab 06.00 Uhr" in grauer Kleinschrift hinter dem Ort.

   FARBE, ABGELEITET STATT ERFUNDEN. Die Hauspalette wird umgekehrt, nicht
   ersetzt: der Grund ist die Haustinte, die Schrift ist das Hauspapier.
   Jeder Wert hier rechnet mit einer Variablen aus haus.css – ändert Simon
   die Palette, zieht diese Seite mit. Gerechnet gegen den Grund #1b1a17
   (WCAG 2.1, 1.4.3): Papier 15,6:1 · Stilles 6,3:1 · Ocker 7,0:1;
   nachgemessen wird am Bildpunkt in `schau.py`. Grün und Orange kommen
   nicht vor.

   DIE BILDER HABEN ZWEI AUFGABEN, BEIDE AN P1B GEMESSEN:
   1. Der Auftakt – bei 1440 endete der Inhalt von P1B bei 925 px, rechts
      davon standen 515 px Nichts. Das Objektbild füllt diese Hälfte und
      beantwortet in einer Sekunde, was auf einem Flohmarkt liegt.
   2. Die Monatsmarke – die Tafel von P1B war bei 1440 **14 830 px hoch**.
      Den Tag trägt jede Zeile, den Monat trug nichts. Die Marke gliedert
      die Länge und ist zugleich die einzige Stelle, an der die Seite die
      ganze Breite nimmt: breit, schmal, breit, schmal.
   Gerechnet auf der RTX 4060 in np52nte, SDXL base 1.0; Wortlaut, Seed und
   Schrittzahl in `bilder.py` und `static/bilder/nachweis.json`.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Die Umkehrung. Zuerst ein Rückfall ohne color-mix, darunter die
     Ableitung – kennt ein Browser color-mix nicht, bleibt der Hauswert
     stehen und nie eine leere Farbe. */
  --floh-grund: var(--text);
  --floh-grund: color-mix(in srgb, var(--text) 86%, #000);

  --floh-papier: var(--bg);

  /* Stilles und Ocker müssen auf dem dunklen Grund HELLER werden, nicht
     dunkler – dieselbe Rechnung wie in P1B, nur in die andere Richtung.
     Gerechnet: 6,30:1 und 7,01:1 gegen den Grund. */
  --floh-still: var(--line);
  --floh-still: color-mix(in srgb, var(--muted) 70%, var(--bg));
  --floh-ocker: var(--akzent);
  --floh-ocker: color-mix(in srgb, var(--akzent) 60%, var(--bg));

  /* Linien sind Zierde, nicht Text – hier gilt keine Kontrastschwelle. */
  --floh-linie: color-mix(in srgb, var(--line) 22%, var(--floh-grund));
  --floh-linie-hell: color-mix(in srgb, var(--line) 38%, var(--floh-grund));
  --floh-flaeche: color-mix(in srgb, var(--bg) 5%, var(--floh-grund));

  /* Die Satzkante links. EIN Wert, an dem Kopfband, Blatt, Auftakt und Fuss
     hängen – vier Elemente an einer Kante statt vier eigene Polster. */
  --floh-kante: clamp(20px, 5vw, 64px);

  /* Die Spalte der Stunde. Sie ist die Achse der ganzen Tafel: Tagkopf,
     Monatsmarke und jedes Los fluchten an ihrer linken Kante. */
  --floh-stunde: clamp(72px, 9vw, 116px);
  --floh-fuge: clamp(16px, 2.2vw, 32px);

  /* Zwei Familien, mehr nicht. Die Grotesk ist die des Hauses (haus.css
     liefert Arial/Helvetica), die Serife ist die Katalogschrift und steht
     ausschliesslich an den Namen der Märkte und an den Überschriften –
     nirgends im Fliesstext. Keine Webschrift: nichts nachzuladen, nichts,
     das beim ersten Aufbau springt. */
  --floh-serife: "Iowan Old Style", "Palatino Linotype", Palatino,
                 "Book Antiqua", Georgia, serif;
}

body {
  background: var(--floh-grund);
  color: var(--floh-papier);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--floh-ocker);
  outline-offset: 2px;
}

/* ── Kopfband ──────────────────────────────────────────────────────────────
   Dünn, und es tritt zurück: auf einer Katalogseite steht der Verlag oben
   klein, nicht als Balken. P1B hatte dort einen schwarzen Riegel über die
   ganze Breite – das Erste, was man sah, und das Unwichtigste auf der
   Seite. */
.marke {
  background: transparent;
  border-bottom: 1px solid var(--floh-linie);
}

.marke-innen {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 16px var(--floh-kante) 14px;
}

.wortmarke {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--floh-papier);
}

.wortmarke span { color: var(--floh-ocker); }

.marke-weg {
  display: flex;
  gap: 24px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--floh-still);
}

.marke-weg a { padding-bottom: 2px; border-bottom: 1px solid transparent; }
.marke-weg a:hover { color: var(--floh-papier); }

.marke-weg a.jetzt {
  color: var(--floh-papier);
  border-bottom-color: var(--floh-ocker);
}

/* ── Auftakt ───────────────────────────────────────────────────────────────
   Achse links, Bild rechts, randabfallend bis an die Kante – das ist der
   erlaubte Fall der Randregel, nicht ihr Bruch („aber dann ganz bis an die
   Kante, nie zwei Millimeter davor"). Links blendet das Bild über eine
   Maske in den Seitengrund aus, damit zwischen Fläche und Bild keine Naht
   steht; die Maske rechnet mit dem Grund, nicht mit einer eingebrannten
   Farbe in der Datei. */
.auftakt {
  position: relative;
  padding: clamp(28px, 5vw, 64px) var(--floh-kante) clamp(24px, 4vw, 48px);
  overflow: hidden;
}

.auftakt-bild {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  /* Zwei Verläufe, einer je Richtung: links in den Grund, unten in den
     Grund. Ohne den unteren stünde eine waagrechte Kante quer über die
     Seite, genau dort, wo die Tafel anfängt. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 62%),
    linear-gradient(to bottom, #000 56%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 62%),
    linear-gradient(to bottom, #000 56%, transparent 100%);
  mask-composite: intersect;
}

.auftakt-satz { position: relative; }

/* Die Breite steht am TITEL, nicht an seinem Kasten: `em` rechnet mit der
   Schriftgrösse des Elements, an dem es steht. Am 08.10.2026 stand hier
   `max-width: 12.5em` am Kasten mit 15 px Grundschrift – das sind 187 px,
   und die 60-px-Zeile lief als Buchstabenleiter über sieben Zeilen. Am
   Titel selbst sind 9em bei 60 px rund 540 px, also zwei Zeilen. */
.auftakt h1 {
  margin: 0;
  max-width: 9em;
  font-family: var(--floh-serife);
  font-weight: 400;
  font-size: clamp(30px, 5.4vw, 60px);
  line-height: 1.06;
  letter-spacing: -.012em;
}

.auftakt h1 em {
  font-style: normal;
  color: var(--floh-ocker);
}

.auftakt-beisatz {
  position: relative;
  margin: clamp(14px, 2vw, 22px) 0 0;
  max-width: 32em;
  font-size: clamp(14px, 1.2vw, 17px);
  color: var(--floh-still);
}

/* Derselbe Satz in zwei Längen – breit die ganze Aussage, schmal nur der
   Namenswitz. Umgeschaltet wird in der Telefonabfrage weiter unten, damit
   die Entscheidung an EINER Stelle steht und nicht an zwei. */
.auftakt-beisatz .nur-schmal { display: none; }

/* Der Bestand als Zeile, nicht als Kennzahlenkachel: eine Zahl, die der
   Betrachter nachzählen kann, indem er weiterliest. */
.auftakt-stand {
  position: relative;
  margin: clamp(16px, 2.4vw, 26px) 0 0;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--floh-ocker);
}

/* ── Suche ─────────────────────────────────────────────────────────────────
   P1B hatte hier vier Bedienteile in zwei Reihen und einen Trennstrich –
   zusammen rund 160 px, bevor der erste Markt kam. Hier: eine Zeile mit
   einem Feld und zwei Griffen, darunter die Zeitfenster als stille Wörter.
   Ein Auswahlfeld gibt es nicht mehr; vier Wörter nebeneinander sind kürzer
   als eine Liste, die man erst öffnen muss, und sie zeigen ihren Stand,
   ohne dass jemand sie anfasst. */
.suche {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  padding: 0 var(--floh-kante);
  margin: 0;
}

body.floh .suche input[type="text"] {
  flex: 1 1 200px;
  width: auto;
  min-height: 46px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--floh-linie-hell);
  border-radius: 0;
  background: transparent;
  color: var(--floh-papier);
  font-size: 16px;
}

body.floh .suche input[type="text"]::placeholder {
  color: var(--floh-still);
  opacity: 1;
}

body.floh .suche input[type="text"]:focus {
  border-bottom-color: var(--floh-ocker);
  outline: none;
}

.suche .griff {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-bottom: 1px solid var(--floh-linie-hell);
  border-radius: 0;
  background: transparent;
  color: var(--floh-papier);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.suche .griff:hover { color: var(--floh-ocker); }

.fenster {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px var(--floh-kante) 0;
  margin: 0;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--floh-still);
}

.fenster a { padding-bottom: 3px; border-bottom: 1px solid transparent; }
.fenster a:hover { color: var(--floh-papier); }

.fenster a.jetzt,
.fenster .wortgriff.jetzt {
  color: var(--floh-papier);
  border-bottom-color: var(--floh-ocker);
}

/* Ein Knopf, der aussieht wie die Wörter daneben – weil er zur selben Reihe
   gehört. Ein Verweis darf er nicht sein: er fragt den Standort ab, und das
   ist keine Adresse, die man weitergibt. */
.fenster .wortgriff {
  margin-left: auto;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid var(--floh-linie-hell);
  background: transparent;
  color: var(--floh-still);
  font: inherit;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.fenster .wortgriff:hover { color: var(--floh-papier); }

.hinweis {
  margin: 14px 0 0;
  padding: 0 var(--floh-kante);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--floh-ocker);
}

/* ── Die Tafel ─────────────────────────────────────────────────────────────
   Eine Spalte, Achse links an der Stundenkante. Der Satz der Lose bleibt
   unter 75 Zeichen; die Breite daneben gehört den Monatsmarken, nicht dem
   Text. */
.tafel {
  padding: clamp(20px, 3vw, 36px) var(--floh-kante) 0;
}

.leer {
  max-width: 30em;
  color: var(--floh-still);
}

/* Monatsmarke: die einzige Stelle, an der die Seite die ganze Breite nimmt.
   Das Bild liegt rechts und läuft bis an die Kante; der Monatsname steht
   links auf derselben Achse wie die Stunden. */
.monat {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 16px;
  min-height: clamp(104px, 13vw, 168px);
  margin: clamp(44px, 7vw, 92px) calc(-1 * var(--floh-kante))
          clamp(18px, 3vw, 30px);
  padding: clamp(26px, 4vw, 48px) var(--floh-kante) clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--floh-linie-hell);
  overflow: hidden;
}

/* DREI Kanten müssen verlaufen, nicht eine. Am 08.10.2026 stand hier nur
   der Verlauf nach links – oben, unten und rechts blieb die Bildkante hart,
   und die Marke lag als heller Klotz auf der Seite statt in ihr. Genau
   dieser Fehler ist am 02.10.2026 schon einmal gemessen worden (der
   technisch beste Entwurf war am 1:1-Abzug der einzige Farbklotz der
   Leinwand). Rechts darf die Kante hart bleiben: dort ist die Seitenkante,
   und ein randabfallendes Bild gehört ganz bis an sie heran. */
.monat-bild {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: clamp(190px, 32vw, 400px);
  object-fit: cover;
  object-position: 50% 45%;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 78%),
    linear-gradient(to bottom, transparent 0, #000 34%, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 78%),
    linear-gradient(to bottom, transparent 0, #000 34%, #000 62%, transparent 100%);
  mask-composite: intersect;
}

.monat-name {
  position: relative;
  font-family: var(--floh-serife);
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1;
}

.monat-anzahl {
  position: relative;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--floh-still);
}

/* Tagkopf: eine Zeile, kein Block. Die grosse Ziffer von P1B ist weg – sie
   würde mit der Stunde um dieselbe Aufmerksamkeit kämpfen, und der Kampf
   ist zugunsten der Stunde entschieden. */
.tag { margin: clamp(26px, 4vw, 40px) 0 0; }

.tag.erste { margin-top: 0; }

.tag-kopf {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--floh-linie-hell);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.tag-datum { color: var(--floh-ocker); font-weight: 700; }
.tag-anzahl { color: var(--floh-still); margin-left: auto; }

/* ── Das Los ───────────────────────────────────────────────────────────────
   Hier sitzt der Bruch. Die Stunde ist die grösste Type im Los; der Name
   steht in der Serife daneben, Ort und Quelle verstummen. */
.los {
  display: grid;
  grid-template-columns: var(--floh-stunde) minmax(0, 1fr);
  column-gap: var(--floh-fuge);
  align-items: baseline;
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: 1px solid var(--floh-linie);
}

.los:last-child { border-bottom: 0; }

.los-stunde {
  grid-column: 1;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 400;
  color: var(--floh-papier);
  font-variant-numeric: tabular-nums;
}

.los-stunde small {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--floh-still);
}

/* Ohne Anfangszeit steht ein Strich – still verschwinden darf nichts, und
   ein leeres Feld sähe aus wie ein Fehler. */
.los-stunde.ohne { color: var(--floh-still); }

.los-text { grid-column: 2; }

.los-titel {
  margin: 0;
  font-family: var(--floh-serife);
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.22;
  max-width: 26em;
}

.los-wo {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--floh-still);
}

.los-wo .los-ort { color: var(--floh-papier); }

.kanton {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--floh-linie-hell);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--floh-still);
}

.los-fuss {
  margin: 6px 0 0;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--floh-ocker);
}

.los-fuss a:hover { color: var(--floh-papier); }

/* ── Fuss ──────────────────────────────────────────────────────────────── */
.fuss {
  margin-top: clamp(56px, 8vw, 112px);
  padding: clamp(24px, 3vw, 40px) var(--floh-kante) clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--floh-linie);
  font-size: 12px;
  color: var(--floh-still);
}

/* 46em bei 12 px sind 552 px, und darin stehen 100 bis 103 Zeichen je Zeile
   – gemessen am 09.10.2026 mit `handwerk.py` an der oeffentlichen Adresse,
   gegen Bringhursts 45 bis 75 (2.1.2). Die Falle liegt in der Einheit: `em`
   rechnet mit der Schriftgroesse, und 12 px sind so klein, dass dieselben
   46em viel mehr Zeichen aufnehmen als im Fliesstext. `ch` rechnet
   stattdessen in Zeichenbreiten und bleibt darum ueber jede Schriftgroesse
   hinweg richtig.

   Der Wert ist ausgemessen, nicht gegriffen: 46em ergaben 552 px und 100
   bis 103 Zeichen, 68ch ergaben 454 px und 82 bis 85, 60ch ergeben 400 px
   und 73 bzw. 75. Ein `ch` ist hier also rund 6,7 px breit, waehrend ein
   Durchschnittszeichen dieser Schrift bei 12 px nur 5,5 px braucht - darum
   fasst 60ch mehr als 60 Zeichen, und darum musste der Wert gemessen und
   nicht gerechnet werden. */
.fuss p { margin: 0 0 6px; max-width: 60ch; }

/* ── Der Selbsteintrag ─────────────────────────────────────────────────────
   Dieselbe Seite, dasselbe Dunkel. Jeder Riegel aus Normas Härtung bleibt
   unangetastet – hier ändert sich ausschliesslich, wie es aussieht.

   Das Feldgewicht ist der Grund für `body.floh` vor jedem Selektor:
   haus.css setzt `input:not([type="checkbox"]):not([type="radio"])`, und
   das wiegt wie zwei Klassen. In P1A sind daran die Felder rund geblieben,
   obwohl `border-radius: 0` dastand. */
.satz {
  padding: clamp(28px, 5vw, 56px) var(--floh-kante) 0;
  max-width: 44em;
}

.satz h2 {
  margin: 0 0 14px;
  font-family: var(--floh-serife);
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.08;
}

.vorwort {
  margin: 0 0 clamp(24px, 3vw, 36px);
  max-width: 34em;
  color: var(--floh-still);
  font-size: 15px;
}

.fehler {
  margin: 0 0 24px;
  padding: 12px 14px;
  border-left: 3px solid var(--warn);
  background: var(--floh-flaeche);
  color: var(--floh-papier);
}

.feld {
  display: block;
  margin: 0 0 20px;
  max-width: 30em;
}

.feld > span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--floh-still);
}

body.floh .feld input,
body.floh .feld textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--floh-linie-hell);
  border-radius: 0;
  background: transparent;
  color: var(--floh-papier);
  font-size: 16px;
}

body.floh .feld textarea { min-height: 96px; resize: vertical; }

body.floh .feld input::placeholder,
body.floh .feld textarea::placeholder {
  color: var(--floh-still);
  opacity: 1;
}

body.floh .feld input:focus,
body.floh .feld textarea:focus {
  border-bottom-color: var(--floh-ocker);
  outline: none;
}

/* Der Datumswähler von Chrome zeichnet sein Zeichen in Tinte – auf dunklem
   Grund wäre es unsichtbar. Am Abzug gefunden, nicht im Quelltext. */
body.floh .feld input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .6;
}

.feld.kurz { max-width: 12em; }

.satz .griff,
.satz button.griff {
  display: inline-block;
  margin-top: 8px;
  padding: 14px 28px;
  border: 1px solid var(--floh-ocker);
  border-radius: 0;
  background: transparent;
  color: var(--floh-ocker);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

.satz .griff:hover {
  background: var(--floh-ocker);
  color: var(--floh-grund);
}

/* ── Breiten ───────────────────────────────────────────────────────────────
   Der Auftakt wechselt die Anordnung, nicht nur die Grösse: auf dem Schirm
   Text links und Bild rechts in goldener Teilung, auf dem Telefon der Text
   IM Bild. Das ist die einzige Stelle, an der Text über einem Bild steht;
   der Kontrast dort wird am Bildpunkt gemessen (`schau.py`), nicht aus der
   CSS-Regel gerechnet – über einem Bild weiss getComputedStyle nichts. */
@media (min-width: 900px) {
  .auftakt {
    display: grid;
    grid-template-columns: 1fr .618fr;
    align-content: center;
    min-height: 376px;
  }

  /* Schmaler heisst hier: MEHR vom Bild. Ein `cover`-Zuschnitt skaliert auf
     die Breite, also schneidet eine breitere Spalte oben und unten mehr weg
     – bei 52 Prozent stand der Deckel der Kanne angeschnitten im Bild, und
     ein Schnitt genau durch den Knauf sieht nach Versehen aus, nicht nach
     Absicht. Bei 44 Prozent steht der ganze Gegenstand drin. */
  .auftakt-bild { width: 44%; object-position: 62% 18%; }
  .auftakt-satz { grid-column: 1; }
  .auftakt-beisatz { grid-column: 1; }
  .auftakt-stand { grid-column: 1; }

  /* Rechts bleibt ein Rand, damit die Lose nicht über die ganze Breite
     laufen – 45 bis 75 Zeichen (Bringhurst 2.1.2), gemessen in schau.py.
     Er sitzt an den TAGEN, nicht an der Tafel: läge er an der Tafel, würde
     er auch die Monatsmarke einziehen, und die soll als einzige die ganze
     Breite nehmen. Am 08.10.2026 am Abzug gefunden – das Band hörte 138 px
     vor der Seitenkante auf. */
  .tag { padding-right: clamp(64px, 14vw, 260px); }
}

@media (max-width: 899px) {
  .auftakt {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 238px;
    padding-top: 74px;
  }

  .auftakt-bild {
    width: 100%;
    /* Hoch im Bild, damit der Deckel der Kanne drinbleibt – derselbe Grund
       wie auf dem Schirm, nur rechnet sich der Zuschnitt hier aus der
       vollen Breite. */
    object-position: 58% 12%;
    -webkit-mask-image:
      linear-gradient(to bottom, #000 0, #000 30%, transparent 97%),
      linear-gradient(to right, transparent 0, #000 34%);
    mask-image:
      linear-gradient(to bottom, #000 0, #000 30%, transparent 97%),
      linear-gradient(to right, transparent 0, #000 34%);
  }

  /* NICHT abschalten, sondern kürzen. P2A schaltete diesen Absatz hier ganz
     ab und holte damit den ersten Markt von 650 auf 441 px – richtig,
     solange hier eine Selbstbeschreibung stand. Seit D2A steht hier der
     Name der Seite, und am 09.10.2026 war er im echten Chromium bei 390 px
     `display: none`: die einzige sichtbare Nennung lag in der Fusszeile bei
     14'930 px, also hinter allen 248 Märkten. Ein Name, den Simon auf
     seinem Telefon nicht sieht, erfüllt den Auftrag nicht – und der
     Selbsttest konnte es nicht sehen, weil Jinja kein CSS ausführt. */
  .auftakt-beisatz .nur-breit { display: none; }
  .auftakt-beisatz .nur-schmal { display: inline; }

  /* Wortmarke und zwei Wege in EINE Zeile. Bei 12 px und 24 px Fuge brach
     „Markt eintragen" auf 430 px um und machte aus dem Kopfband zwei
     Zeilen; gemessen passen 11 px und 18 px Fuge in 390 px Satzbreite. */
  .marke-weg { font-size: 11px; gap: 18px; }
  .marke-weg a { white-space: nowrap; }
}

/* Unter 380 px wird die Stundenspalte schmaler – sonst bleibt für den Namen
   keine Zeile mehr übrig. */
@media (max-width: 379px) {
  :root { --floh-stunde: 64px; --floh-fuge: 12px; }
}

/* ── Stillstand ────────────────────────────────────────────────────────────
   Wer Bewegung abbestellt hat, bekommt keine. Gilt für jeden Übergang auf
   dieser Seite, nicht nur für den, an den ich gerade gedacht habe. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}