/* Das E-Paper der Volksstimme.
 *
 * **Der Lesetisch ist dunkel, die Zeitung leuchtet darauf.** Das ist keine Mode: Eine
 * Zeitungsseite ist grossflächig weiss, und ein weisser Rahmen darum lässt die Ränder
 * verschwimmen — man sieht nicht mehr, wo die Seite aufhört. Dunkel gerahmt steht sie da
 * wie auf einem Tisch.
 *
 * **Drei Bedienelemente, nicht neun.** Das heutige Tecnavia-E-Paper zeigt eine Randleiste
 * mit neun Symbolen (Read · Ansicht · Seiten · Lesen · Kalender · Suchen · Optionen ·
 * Hilfe · Zoom). Hier: Ausgaben, Seiten, Blättern. Alles Weitere kommt, wenn jemand
 * danach fragt.
 *
 * Petrol #009aae ist aus dem gedruckten Logo gemessen, nicht geschätzt.
 */

/* Die Schrift der Website — dieselbe Datei, die auch das Mockup ausliefert. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter-latin.woff2') format('woff2');
}

:root {
  --tisch:        #16181a;   /* der dunkle Grund */
  --tisch-leiste: #1e2124;   /* die untere Leiste, eine Spur heller */
  --tisch-rand:   #2b2f33;
  --schrift:      #e8eaec;
  --schrift-leis: #9aa1a7;

  /* Volksstimme-Petrol, aus der Wortmarke gemessen — nicht geschätzt. */
  --petrol:       #009aae;
  --petrol-dunkel:#00808f;
  --petrol-hell:  #5ccfdd;
  /* Die Farbe der Kopfleiste. Im Dunkeln das lichte Petrol — auf schwarzem Grund trägt es
     und wirkt nicht schwer. Im Hellen wird es überschrieben (siehe unten). */
  --leiste-farbe: var(--petrol);

  /* Der gewählte Reiter im Kiosk. **Petrol trägt keine weisse Schrift**: #009aae auf Weiss
     ergibt 3,37:1 und reisst die 4,5:1 für Fliesstext. Mit fast schwarzer Schrift sind es
     5,40:1 — dieselbe Farbe, lesbar. Im Hellen kehrt sich das um (siehe unten). */
  --wahl-grund:   var(--petrol);
  --wahl-schrift: #06181c;

  --leiste-h: 3.25rem;
  --r: 0.5rem;

  color-scheme: dark;
}

/* ---- Hell ---------------------------------------------------------------- */

/* **Der helle Tisch ist kein umgedrehter dunkler.** Reines Weiss um eine weisse
   Zeitungsseite lässt ihre Ränder verschwimmen — genau das, was der dunkle Grund
   verhindert. Deshalb ein warmes, leicht ins Petrol gezogenes Grau als Tisch und ein
   sichtbarer Rand um das Blatt; die Seite bleibt das Hellste im Bild.

   Die Marken bleiben: Petrol ist gemessen und ändert sich nicht mit der Tageszeit. Nur
   `--petrol-hell` wird zu `--petrol-dunkel` umgewidmet — auf Weiss ist das lichte Petrol
   nicht mehr lesbar (2,1:1 gegen 4,8:1). */
:root[data-farbe="hell"] {
  --tisch:        #eceef0;
  --tisch-leiste: #f7f8f9;
  --tisch-rand:   #d3d7db;
  --schrift:      #14171a;
  --schrift-leis: #5c646b;
  --petrol-hell:  #007d8c;
  /* **Im Hellen das dunkle Petrol — dasselbe wie auf der Website** (`--secondary` des
     Mockups, gemessen: #005a70). Das lichte Petrol auf hellem Grund liess die weisse
     Schrift der Leiste flimmern; das dunkle trägt sie ruhig, und beide Oberflächen tragen
     denselben Balken. Entscheid der Redaktion, 20.08.2026. */
  --leiste-farbe: #005a70;
  /* #005a70 auf Weiss: 7,79:1. */
  --wahl-grund:   #005a70;
  --wahl-schrift: #fff;

  color-scheme: light;
}

* { box-sizing: border-box; }

/* `hidden` muss stärker sein als jedes `display` weiter unten. Ohne diese Zeile blieb der
   Ladehinweis stehen, nachdem die Seite längst da war: `.lader { display: flex }` schlägt
   das `display: none`, das der Browser dem Attribut mitgibt. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  /* Der Body scrollt NIE. Alles Rollen geschieht in `main` — sonst wandern beim Zoomen
     die Leisten aus dem Bild, und auf schmalen Geräten entsteht der waagerechte
     Rollbalken, an dem das heutige E-Paper scheitert. */
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* **`minmax(0, 1fr)` und nicht der Standard.** Eine Grid-Spalte ist von sich aus `auto`
     und wächst mit ihrem breitesten Inhalt. Gemessen am 19.08.2026 bei 390 px Viewport:
     Die Leseansicht wurde **482 px** breit, und weil der Body `overflow: hidden` trägt,
     gab es nicht einmal einen Rollbalken — der Text war rechts schlicht abgeschnitten und
     unerreichbar. Das ist schlimmer als das, was wir an Localpoint bemängeln.
     Dieselbe Lektion wie bei den Zeilen in `.blatt`, eine Achse weiter. */
  grid-template-columns: minmax(0, 1fr);
  background: var(--tisch);
  color: var(--schrift);
  font: 400 16px/1.5 "Inter", "Open Sans", system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---- Die beiden Leisten ------------------------------------------------- */

.leiste {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--leiste-h);
  padding: 0.375rem 0.75rem;
  background: var(--tisch-leiste);
  border-block: 1px solid var(--tisch-rand);
}
/* **Die Kopfleiste trägt die Marke, nicht der Text.** Petrol wie auf der Website und im
   Redaktionstool; die Wortmarke steht in ihrer eigenen Fraktur darauf. Nur diese eine
   Leiste ist farbig — die Bedienung unten bleibt zurückhaltend, damit die Zeitung der
   einzige farbige Gegenstand auf dem Schirm bleibt. */
.leiste-oben {
  border-top: 0;
  border-bottom-color: color-mix(in srgb, var(--leiste-farbe) 82%, #000);
  background: var(--leiste-farbe);
  /* **Alles auf der Leiste ist weiss.** Vorher erbten Symbole ihre Farbe vom Grundtext und
     standen im Hellen schwarz neben der weissen Wortmarke — schwarz und weiss gemischt auf
     einem farbigen Balken (Redaktion, 20.08.2026). Die Leiste setzt die Farbe einmal, alles
     darin erbt sie; `currentColor` in den Symbolen sorgt für den Rest. */
  color: #fff;
  padding-top: max(0.375rem, env(safe-area-inset-top));
}
.leiste-unten { border-bottom: 0; justify-content: center; gap: 1.25rem;
                position: relative;
                padding-bottom: max(0.375rem, env(safe-area-inset-bottom)); }

/* **Auf schmalen Geräten fällt die Marke weg** — sie steht in Fraktur quer über der
   Zeitungsseite direkt darunter. Bis zum 11.09.2026 blieb das Datum; seit Website- und
   Menüknopf dazukamen, passt auch das nicht mehr (Rechnung unten bei «Unter 40 rem»). */
.marke { display: none; margin: 0; line-height: 0; }
.marke button {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  cursor: pointer;
}
.marke button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.marke img {
  /* 1.375 rem Höhe: Die Fraktur bleibt bei dieser Grösse erkennbar, und die Leiste
     bleibt so flach, wie sie sein soll. */
  height: 1.375rem;
  width: auto;
}
/* Das Werkzeug rechts: Datum, Suchen, Hell/Dunkel, Konto. Die Gruppe trägt den Abstand
   nach links — nicht das Datum, das im Kiosk verschwindet. */
.links, .werkzeug {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* Beide Gruppen nehmen gleich viel vom freien Raum — so steht die Marke dazwischen in
     der Mitte des Schirms. `min-width: 0`, damit das Datum (Ellipse) nachgeben kann, wenn
     rechts mehr steht als links. */
  flex: 1 1 0;
  min-width: 0;
}
.werkzeug { justify-content: flex-end; }
.datum {
  margin: 0;
  /* Auf Petrol, nicht auf Dunkelgrau — deshalb hell und nicht `--schrift-leis`. */
  color: #ffffffdd;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Knöpfe ------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  /* 44 px ist die Mindestgrösse für einen Finger. Kein Knopf hier unterschreitet sie. */
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  color: var(--schrift);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.knopf svg { width: 1.25rem; height: 1.25rem; flex: none; }
.knopf:hover  { background: #ffffff14; }
.knopf:active { background: #ffffff22; }
.knopf:focus-visible {
  outline: 2px solid var(--petrol-hell);
  outline-offset: 2px;
}
.knopf[disabled] { opacity: 0.35; cursor: default; }
.knopf[disabled]:hover { background: transparent; }

/* In der Petrol-Leiste braucht der Fokusring Weiss — `--petrol-hell` auf Petrol wäre
   kaum zu sehen, und ein unsichtbarer Fokusring ist so gut wie keiner. */
/* **Was auf der Leiste steht, erbt ihre Schriftfarbe.** `.knopf` setzt sonst
   `color: var(--schrift)` — im Hellen fast schwarz. Damit stand «Ausgaben» samt Symbol
   schwarz neben der weissen Wortmarke auf dem farbigen Balken. */
.leiste-oben .knopf,
.leiste-oben .marke button,
.leiste-oben time { color: inherit; }
.leiste-oben .knopf:hover  { background: #ffffff26; }
.leiste-oben .knopf:active { background: #ffffff3a; }
.leiste-oben .knopf:focus-visible { outline-color: #fff; }

.knopf-rund { border-radius: 50%; padding: 0.5rem; }
.knopf-zaehler {
  min-width: 5.5rem;
  border-color: var(--tisch-rand);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ---- Die Seite ---------------------------------------------------------- */

.blatt {
  position: relative;
  overflow: auto;                 /* hier wird gerollt, nicht im Body */
  display: grid;
  /* **`minmax(0, 1fr)` ist der Kern, nicht Kosmetik.** Gemessen am 19.08.2026: Die
     Titelseite ragte unten aus dem Bild, mit Rollbalken — auf dem Desktop.
     Grund: Eine Grid-Zeile ist von sich aus `auto` und wächst mit ihrem Inhalt. Das
     `max-height: 100%` der Seite bezieht sich dann auf die bereits gewachsene Zeile und
     ist immer erfüllt — die Begrenzung wird zirkulär und damit wirkungslos. `min-height: 0`
     auf dem Container allein reicht nicht; es macht die Höhe von `.blatt` definit, nicht
     die der Zeile darin. Erst eine Zeile, die nicht über `1fr` hinauswachsen darf, begrenzt
     das Bild wirklich. */
  grid-template-rows: minmax(0, 1fr);
  /* **Und dieselbe Falle in der Spalte.** Ohne diese Zeile ist die Spalte `auto` und
     wächst mit ihrem Inhalt. Solange nur das Bild darin lag, fiel das nicht auf; seit die
     Ebene mit den antippbaren Artikeln danebenliegt und ihre Breite vom Bild übernimmt,
     schaukeln sich beide hoch. Gemessen am 19.08.2026 bei 390 px: Bild 389 px statt
     366 px, `.blatt` rollte waagerecht (413 gegen 390) — genau der Fehler, den wir dem
     heutigen E-Paper vorwerfen, nur eine Ebene tiefer. `minmax(0, 1fr)` deckelt die
     Spalte und bricht die Rückkopplung. */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 0;
  padding: 0.75rem;
  /* Wischen soll blättern, nicht die Seite verschieben — solange nicht gezoomt ist. */
  touch-action: pan-y pinch-zoom;
  scrollbar-width: thin;
}
.blatt:focus { outline: none; }

.seite {
  display: block;
  /* Der Kern: Die Seite passt IMMER in die Breite und in die Höhe. Kein Zoom nötig, um
     sie zu erfassen — und niemals ein waagerechter Rollbalken. */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;               /* solange das Bild lädt, steht schon die Fläche */
  border-radius: 2px;
  box-shadow: 0 2px 6px #0008, 0 12px 32px #0006;
  cursor: zoom-in;
  transition: opacity 160ms ease;
}
/* Im Hellen trägt die Seite einen Rand statt eines Schattens: Ein schwarzer Schlagschatten
   auf hellem Grund sieht nach Fenster aus, nicht nach Papier. */
:root[data-farbe="hell"] .seite {
  border: 1px solid var(--tisch-rand);
  box-shadow: 0 1px 3px #0000001f, 0 8px 24px #00000014;
}
.seite.blass { opacity: 0.35; }

/* Gezoomt: Die Seite wird breiter als der Rahmen, und DANN darf gerollt werden — die
   Zeile darf jetzt also ausdrücklich wachsen. */
.blatt.gezoomt {
  grid-template-rows: auto;
  grid-template-columns: auto;      /* gezoomt darf gerollt werden */
  /* **`start start`, nicht `start center`.** Ein zentriertes Element, das seinen
     Rollbereich überläuft, ist an der Startkante **nicht mehr erreichbar** — der Browser
     lässt nicht vor den Anfang des Inhalts rollen, und die Hälfte, die durch das Zentrieren
     nach links hinausragt, bleibt für immer weg. Gemessen am 19.08.2026 auf Seite 5 der
     087: Die linke Spalte war gezoomt abgeschnitten und mit keiner Geste zu erreichen.
     Die Mitte stellt jetzt `app.js` über die Rollposition ein — die ist nachgiebig, das
     Ausrichten war es nicht. */
  place-items: start start;
  touch-action: pan-x pan-y pinch-zoom;
}
.blatt.gezoomt .seite {
  max-width: none;
  max-height: none;
  /* Der Deckel steht in `app.js` (`zoomBreite`): 240 %, aber nie mehr Pixel, als die
     groesste gerechnete Datei hat. Der Rueckfall hier gilt nur, falls das Skript die
     Eigenschaft nicht gesetzt hat. */
  width: var(--zoom-breite, min(240%, 2400px));
  /* Die offene Hand sagt, was hier geht: schieben. Dass ein Klick auch wieder herauszoomt,
     lernt man beim ersten Versuch — umgekehrt hätte die Lupe das Schieben verschwiegen. */
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}
.blatt.gezoomt.greift .seite { cursor: grabbing; }

/* **Gezoomt sind die Artikelflächen aus.** Zwei Gründe, und der zweite wiegt schwerer:
   Wer hineinzoomt, will das Faksimile genau ansehen — der Weg hinaus ist ein Tipp, und ein
   Tipp, der stattdessen die Leseansicht öffnet, wäre eine Überraschung. Und technisch
   schaukeln sich Ebene und Bild sonst gegenseitig hoch: Die Ebene übernimmt die Breite des
   Bildes, die Spalte wächst mit der Ebene, und das Bild ist `240%` **der Spalte**. Gemessen
   am 19.08.2026: 366 → 878 → 2107 px, bis der Deckel von 2400 px griff, und die Flächen
   lagen dabei um das Doppelte daneben. */
.blatt.gezoomt .stellen { display: none; }

/* **Der sichtbare Weg aus der Vergrösserung.** Nur dort — ohne Zoom gibt es nichts zu
   schliessen. `fixed` und nicht `absolute`: Das Blatt rollt im gezoomten Zustand selbst
   (siehe oben), und ein mitrollender Knopf wäre nach der ersten Geste weg.

   **Über der unteren Leiste, nicht auf ihr.** Der erste Versuch setzte ihn auf 1 rem über
   den Rand — dort steht die Leiste (57 Punkt gemessen), und er legte sich genau auf den
   «Aa»-Knopf. Rechts, weil dort der Daumen liegt; der Sicherheitsabstand hält ihn über der
   Notch-Zone von iOS. */
.knopf-zoom-aus { display: none; }
.blatt.gezoomt .knopf-zoom-aus {
  display: inline-flex;
  position: fixed;
  right: 1rem;
  bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  box-shadow: 0 2px 10px rgb(0 0 0 / 35%);
}

.lader, .leermeldung {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--schrift-leis);
  font-size: 0.9375rem;
  text-align: center;
}
.leermeldung { display: block; max-width: 32ch; line-height: 1.6; }

.dreher {
  width: 1.125rem; height: 1.125rem;
  border: 2px solid var(--tisch-rand);
  border-top-color: var(--petrol);
  border-radius: 50%;
  animation: dreh 720ms linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

/* ---- Die beiden Übersichten --------------------------------------------- */

.dialog {
  width: min(100%, 60rem);
  max-width: 100%;
  /* **Höhe nach Inhalt, gedeckelt.** Vorher fest 44 rem — mit 16 Seiten in zwei Zeilen
     blieb auf dem Desktop ein Drittel des Kastens leer und sah aus, als fehle etwas.
     `fit-content` mit Deckel lässt das Raster wachsen und ab dem Deckel rollen.

     **Nicht `auto`** — das war der erste Versuch und blieb wirkungslos: Ein offener
     `<dialog>` ist absolut gesetzt, oben und unten auf 0, und bei `height: auto` mit
     zwei automatischen Rändern löst der Browser nach der Höhe auf statt nach den
     Rändern. Der Kasten füllte weiter die volle Höhe (gemessen: 704 px für vier
     Treffer). `fit-content` ist keine automatische Höhe mehr — jetzt greifen die
     Ränder und zentrieren. */
  block-size: fit-content;
  max-height: min(100%, 44rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--tisch-rand);
  border-radius: var(--r);
  background: var(--tisch-leiste);
  color: var(--schrift);
  overflow: hidden;
}
.dialog::backdrop { background: #000c; }
.dialog[open] { display: grid; grid-template-rows: auto 1fr; }

.dialog-kopf {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-bottom: 1px solid var(--tisch-rand);
}
.dialog-kopf h2 { margin: 0; font-size: 1.0625rem; }
.knopf-schliessen { margin-inline-start: auto; }

.raster {
  overflow: auto;
  display: grid;
  /* Drei Spalten auf dem Handy, mehr auf breiten Schirmen — ohne einen einzigen
     Umbruchpunkt. Eine Titelseite ist bei 6 rem noch erkennbar. */
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  /* **`start`, nicht der Standard.** Ein Grid streckt seine `auto`-Zeilen, bis der
     Container voll ist. Gemessen: sechs Seiten in zwei Zeilen à 297 px für ein Bild von
     151 px — die Hälfte der Fläche war Luft, und bei wenigen Seiten sah die Übersicht aus
     wie ein Fehler. */
  align-content: start;
  gap: 0.875rem;
  padding: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.kachel {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  color: var(--schrift-leis);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.kachel img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.41;         /* Platz reservieren: kein Springen beim Laden */
  object-fit: cover;
  object-position: top center;
  background: #fff;
  border: 1px solid var(--tisch-rand);
  border-radius: 3px;
  transition: outline-color 140ms ease;
  outline: 2px solid transparent;
  outline-offset: 1px;
}
.kachel:hover img          { outline-color: var(--petrol); }
.kachel:focus-visible      { outline: none; }
.kachel:focus-visible img  { outline-color: var(--petrol-hell); }
.kachel[aria-current="true"] img { outline-color: var(--petrol); }
.kachel[aria-current="true"]     { color: var(--petrol-hell); }
.kachel b { font-weight: 600; color: var(--schrift); }

/* ---- Breite Schirme ------------------------------------------------------ */

/* Ab hier ist Platz für beides — gemessen, nicht geraten: bei 30rem (480 px) stehen
   Marke und Datum nebeneinander, ohne dass eines gekürzt wird. */
@media (min-width: 30rem) {
  .marke { display: block; }
}

@media (min-width: 48rem) {
  .blatt { padding: 1.25rem; }
  .marke { font-size: 1.1875rem; }
}

/* Wer Bewegung ausgeschaltet hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==== Der Umschalter Seite ⇄ Lesen ======================================== */
/* Zwei Zustände, beschriftet — kein Symbol, das man raten muss. Er sitzt in der
   Petrol-Leiste und ist damit das einzige Bedienelement, das die Marke trägt: Er
   entscheidet, was für ein Ding man gerade vor sich hat. */

.umschalter {
  display: flex;
  margin-inline: auto;
  padding: 2px;
  border-radius: 999px;
  background: #00000026;
}
.um-knopf {
  min-height: 2rem;
  padding: 0.25rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #ffffffcc;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.um-knopf[aria-pressed="true"] {
  background: #fff;
  color: var(--petrol-dunkel);
  font-weight: 600;
}
.um-knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Ohne Lesetexte hat der Umschalter nichts zu schalten — dann bleibt er weg, statt in
   eine leere Ansicht zu führen. */
.umschalter[hidden] { display: none; }

/* ==== Die Leseansicht ===================================================== */

.lesen {
  overflow: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1rem 4rem;
  /* Die Schriftgrösse hängt an einer Variablen, die der Leser stellt. Alles darin
     rechnet in `em` weiter — eine Stufe verändert damit den ganzen Satz, nicht nur den
     Fliesstext. */
  font-size: var(--lese-groesse, 1.0625rem);
}
.lesen-inhalt {
  /* **Die Lesebreite.** Für Fliesstext am Bildschirm gilt seit je 45 bis 75 Zeichen je
     Zeile, mit dem ruhigsten Punkt bei 60 bis 70: Kürzer zerhackt es den Satz, länger
     verliert das Auge beim Rücksprung die nächste Zeile.

     `ch` ist dafür das richtige Mass, aber nicht wörtlich zu nehmen — es ist die Breite
     der Ziffer «0», und in einer Proportionalschrift wie Inter sind Kleinbuchstaben
     schmaler. Am 19.08.2026 nachgezählt: 60 ch ergeben rund 68 Zeichen je Zeile. Der Wert
     steht deshalb so und nicht auf «65», wie man ihn aus Anleitungen abschreiben würde.

     Er hängt an `em`, nicht an `rem`: Wer die Schrift grösser stellt, bekommt eine
     grössere Schrift — nicht eine längere Zeile. */
  max-width: 60ch;
  margin-inline: auto;
}

.artikel + .artikel {
  margin-top: 2.5em;
  padding-top: 2.5em;
  border-top: 1px solid var(--tisch-rand);
}
.artikel-sorte {
  margin: 0 0 0.35em;
  color: var(--petrol-hell);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* Das Gemeindewappen über einer amtlichen Meldung. Ohne Rahmen und ohne Hintergrund: Ein
   Wappen IST schon eine Form, und ein Kasten darum machte aus der Marke ein Bildchen. Die
   Sperrung der Versalien gilt für Buchstaben, nicht für Bilder — deshalb wird sie hier
   zurückgenommen, sonst schwäme das Schild in seinem eigenen Abstand. */
.artikel-wappen {
  height: 2.1em;
  width: auto;
  letter-spacing: normal;
  flex: 0 0 auto;
}

/* In der Baugesuchsliste steht es vor der fetten Ortsmarke, auf derselben Grundlinie wie
   der Text — nicht darüber: Die Zeile soll eine Zeile bleiben. Der hängende Einzug von
   `.liste-zeile` wird dabei zurückgenommen, sonst zieht das Bild die erste Zeile nach links
   und die Fortsetzung darunter passt nicht mehr dazu. */
.liste-zeile--wappen {
  padding-left: 0;
  text-indent: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  /* **Luft, und zwar mehr als man denkt.** Ein Wappen ist eine dichte, farbige Fläche und
     kein Buchstabe; bei einem halben Geviert Abstand stiess es an die Versalie des
     Gemeindenamens und las sich wie ein verunglueckter Initial (nachgesehen an der 089). */
  gap: 0 1.25em;
  align-items: start;
}

.liste-wappen {
  /* Etwas kleiner als die Zeile hoch ist: So sitzt das Schild IM Textblock statt ihn zu
     sprengen — der Rand oben bringt seine Mitte auf die Höhe der Versalie. */
  height: 1.3em;
  width: auto;
  grid-row: span 2;
  align-self: start;
  margin-top: 0.18em;
}
/* Der Untertitel steht UNTER dem Titel (siehe Kommentar in `app.js`) — also braucht der
   Titel darüber keinen Abstand nach unten mehr, und die Zeile selbst trägt ihn nach unten.
   Etwas grösser als der Fliesstext und in der Akzentfarbe der Ortsmarke: Im Blatt ist sie
   gesetzt, keine Fussnote. */
/* Der Untertitel ist im Blatt gesetzt, nicht beigefügt: halbfett und grösser als der
   Fliesstext. Grau und in Textgrösse las er sich wie eine Fussnote unter der Überschrift. */
.artikel-dach {
  margin: -0.1em 0 0.9em;
  color: var(--schrift);
  font-size: 1.12em;
  font-weight: 600;
  line-height: 1.35;
}
/* Wie im Blatt: der Ort kräftig, dann ein Strich mit Luft, dann die Zeile. Der Strich
   trägt seine Abstände selbst — im Druck stehen dort zwei Wortabstände (VS-Hausstil). */
.artikel-ort { color: var(--schrift); font-weight: 700; }
.artikel-strich { margin: 0 0.5em; color: var(--tisch-rand); }

.artikel h2 {
  margin: 0 0 0.45em;
  font-size: 1.55em;
  line-height: 1.2;
  font-weight: 700;
  text-wrap: balance;
}
/* Im Blatt steht der Lead abgesetzt oben links — kleiner Satzspiegel, kräftiger Schnitt.
   Hier: etwas grösser als der Fliesstext, halbfett, und eine Linie in der Hausfarbe an der
   Seite. Fettung allein reichte nicht; sie war im Fliess kaum zu sehen, und genau darum
   ging die Frage «woran erkenne ich den Lead» überhaupt auf. */
/* Im Blatt steht der Lead in grösserer Schrift — hier halbfett und eine Spur grösser.
   Ohne Linie an der Seite: Sie war ein Zeichen zu viel, und der Lead ist kein Kasten,
   sondern der Anfang des Textes. */
.artikel .artikel-lead {
  margin: 0 0 1.15em;
  font-size: 1.06em;
  font-weight: 700;
  line-height: 1.5;
}
.artikel-autor {
  margin: 0 0 1.4em;
  color: var(--schrift-leis);
  font-size: 0.9em;
}
/* Die Vita unter der Kolumne — im Blatt steht sie am Schluss, kursiv und kleiner als der
   Text. Ein abgesetzter Strich darüber, damit sie nicht als letzter Absatz gelesen wird. */
.artikel-vita {
  margin: 1.6em 0 0;
  padding-top: 0.9em;
  border-top: 1px solid var(--tisch-rand);
  color: var(--schrift-leis);
  font-size: 0.9em;
  font-style: italic;
}
.artikel p { margin: 0 0 1em; line-height: 1.68; hyphens: auto; }
/* Zwischentitel und Interviewfragen kommen als Rollen aus dem Blattspiegel — die Zeitung
   weiss, was sie gesetzt hat, also muss die Anzeige nicht raten. */
.artikel p.r-zwischentitel {
  margin: 1.8em 0 0.5em;
  font-size: 1.12em;
  font-weight: 700;
  line-height: 1.3;
}
.artikel p.r-frage { font-weight: 650; color: var(--petrol-hell); }
/* **Das Quadrat vor der Frage zeichnet die Anzeige, nicht der Text** (099 S. 5): Im Blatt
   steht es als Zeichen der Symbolschrift, und die Textebene lieferte es als «n». Der
   zweite `content` mit leerem Alternativtext hält es vom Screenreader fern; wer die Syntax
   nicht kennt, nimmt die erste Zeile. */
.artikel p.r-frage::before {
  content: "■\00a0";
  content: "■\00a0" / "";
  color: var(--petrol);
}

/* **Die dritte Stufe.** Im Kirchenzettel steht die Kirchgemeinde über dem Datum und das
   Datum über den Terminen. Ohne eigene Auszeichnung sah beides gleich aus, und die
   Gliederung des Blattes ging verloren (Redaktion, 22.08.2026). Kleiner als der
   Zwischentitel, aber deutlich abgesetzt — so steht es auch im Satz. */
.artikel p.r-datum {
  margin: 1.1em 0 0.3em;
  font-size: 0.98em;
  font-weight: 650;
  color: var(--petrol-hell);
}

/* Die Kurzvita am Fuss einer Kolumne — im Blatt klein gesetzt unter der Unterschrift.
   Sie ist keine Autorzeile: Als solche gelesen fiel sie aus dem Text (083, Seite 10). */
.artikel p.r-vita {
  margin-top: 1.6em;
  font-size: 0.92em;
  font-style: italic;
  color: var(--schrift-leis);
}
.artikel p.r-zitat {
  margin: 1.4em 0;
  padding-inline-start: 0.9em;
  border-inline-start: 3px solid var(--petrol);
  font-size: 1.12em;
  line-height: 1.45;
}

.artikel-kasten {
  margin: 1.6em 0;
  padding: 1em 1.1em;
  border: 1px solid var(--tisch-rand);
  border-radius: var(--r);
  background: #ffffff08;
  font-size: 0.95em;
}
.artikel-kasten h3 { margin: 0 0 0.5em; font-size: 1.05em; }
.artikel-kasten p:last-child { margin-bottom: 0; }
/* **Der Kasten wird nicht umbrochen, sondern gesetzt** (Entscheid der Redaktion,
   22.08.2026). Nachgemessen trägt der Kasten «Wie Tattoos Wünsche wahr werden lassen»
   (083, Seite 8) im ganzen Text **einen einzigen** Einzug — den der ersten Zeile. Was im
   Blatt wie Absätze aussieht, sind die Spaltenumbrüche. Einen Umbruch zu erfinden hiesse,
   etwas zu drucken, das nirgends steht; stattdessen bekommt der Block eine kürzere Zeile
   und mehr Durchschuss. Das ist die alte Setzerantwort auf denselben Wunsch. */
.artikel-kasten p {
  max-width: 34em;
  line-height: 1.78;
}

/* Teilen und Vorlesen stehen AM ARTIKEL, nicht in der Leiste — sie beziehen sich auf
   einen Text, nicht auf die Ansicht. So wächst die Bedienleiste nicht. */
.artikel-fuss { display: flex; gap: 0.5rem; margin-top: 1.2em; }
.artikel-fuss .knopf {
  min-height: 2.25rem;
  padding: 0.35rem 0.7rem;
  border-color: var(--tisch-rand);
  color: var(--schrift-leis);
  font-size: 0.85em;
}
.artikel-fuss .knopf:hover { color: var(--schrift); }
.artikel-fuss .knopf svg { width: 1em; height: 1em; }
.artikel-fuss .knopf[aria-pressed="true"] { color: var(--petrol-hell); border-color: var(--petrol); }

.lesen-leer { color: var(--schrift-leis); text-align: center; padding: 3em 0; }

/* ==== Schriftgrösse ====================================================== */

/* Sie schweben über dem Text — deshalb zurückhaltend, bis jemand hinlangt. Ganz weglassen
   wäre falsch: «grösser» ist bei einer Leserschaft, die älter ist als der Durchschnitt,
   keine Einstellung, die man erst suchen soll. */
/* Der Knopf sitzt am rechten Rand der unteren Leiste, ohne die Blätterknöpfe aus der
   Mitte zu drängen — deshalb `absolute` statt eines vierten Flex-Kindes. Gemessen bei
   390 px: die drei Blätterknöpfe brauchen 225 px, links und rechts bleiben je 82 px. */
.knopf-schrift {
  position: absolute;
  inset-inline-end: max(0.5rem, env(safe-area-inset-right));
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.knopf-schrift[aria-expanded="true"] {
  background: var(--tisch-rand);
  color: var(--schrift);
}

/* Das Feld erscheint **über** dem Knopf und ist deckend — es liegt nie über Text, weil
   es nur so lange da ist, wie jemand es aufgeklappt hat. */
.schriftgroesse {
  position: fixed;
  inset-block-end: calc(var(--leiste-h) + max(0.5rem, env(safe-area-inset-bottom)));
  inset-inline-end: max(0.5rem, env(safe-area-inset-right));
  z-index: 5;
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--tisch-rand);
  border-radius: var(--r);
  background: var(--tisch-leiste);
  box-shadow: 0 6px 20px #0009;
}
.schriftgroesse .knopf {
  min-width: 2.5rem; min-height: 2.5rem;
  padding: 0.25rem;
  font-size: 0.95rem;
}
.schriftgroesse .knopf span { font-size: 0.75em; margin-inline-start: 1px; }


/* Angesprungene Artikel bekommen den Fokus — aber keinen Rahmen: Der Sprung ist schon
   sichtbar, weil der Artikel oben steht. Für die Tastatur bleibt `:focus-visible` gültig. */
.artikel:focus { outline: none; }

/* Eine Seite, die es nicht gibt: gleiche Kachelgrösse, aber sichtbar leer und nicht
   anklickbar. Kein Warnton und kein Ausrufezeichen — es ist eine Auskunft, keine Störung. */
.kachel-fehlt {
  display: grid;
  gap: 0.35rem;
  cursor: default;
  color: var(--schrift-leis);
  text-align: center;
  font-size: 0.75rem;
}
.kachel-fehlt .fehlt-feld {
  aspect-ratio: 240 / 339;
  border: 1px dashed var(--tisch-rand);
  border-radius: 2px;
  background: repeating-linear-gradient(135deg, transparent 0 7px,
              color-mix(in srgb, var(--tisch-rand) 45%, transparent) 7px 8px);
}

/* Text, den nur eine Vorleseeinrichtung braucht. `clip-path` statt `display: none`:
   Verstecktes wird nicht vorgelesen. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Hell/Dunkel ---------------------------------------------------------- */

/* Ein Knopf, kein Menü. Er zeigt, **was passiert**, wenn man ihn drückt — die Sonne im
   Dunkeln, den Mond im Hellen —, und nicht, wo man gerade ist. Hell ist die Vorgabe
   (Verlag, 11.09.2026; `index.html` trägt das Attribut schon im Markup, `app.js` liest die
   gespeicherte Wahl). Es gibt nur zwei Stellungen — das Gerät wird nicht befragt. */
.knopf-farbe svg { width: 1.15rem; height: 1.15rem; }
.knopf-farbe .sym-hell { display: none; }
:root[data-farbe="hell"] .knopf-farbe .sym-hell { display: block; }
:root[data-farbe="hell"] .knopf-farbe .sym-dunkel { display: none; }

/* ---- Die Kopfleiste: Website, Suchen, Konto ---------------------------------- */

/* Ein Verweis in Knopfgestalt (Website): keine Unterstreichung, sonst wie die anderen. */
a.knopf { text-decoration: none; }

/* Reine Symbolknöpfe (Suchen, Hell/Dunkel, Konto) sind rund und 44 px; der Text steht für
   die Vorleseeinrichtung. Drei nebeneinander lesen sich als eine Gruppe «Werkzeug». */
.knopf-symbol { border-radius: 50%; padding: 0.5rem; min-width: 2.75rem; }

/* **Wo man ist, muss man sehen** — «Ausgaben» ist ein Schalter, und ein gedrückter Schalter
   ohne Ist-Stellung ist ein Rätsel. Gedrückt: ein heller Grund auf dem Petrol. */
.leiste-oben .knopf[aria-pressed="true"] { background: #ffffff2e; }
.leiste-oben .knopf[aria-pressed="true"]:hover { background: #ffffff3a; }

/* **Unter 40 rem wandern Suchen und Hell/Dunkel ins Menü, «Website» verliert sein Wort,
   das Datum fällt weg.** Gemessen am 11.09.2026 bei 390 px: Website (44) + Ausgaben (44,
   zusammengedrückt) + Umschalter (136) + Suchen, Farbe, Konto (3 × 44) + Abstände und
   Ränder (48) = 404 — zwei Pixel waagrechter Rollbalken, das Datum auf null Breite, das Wort
   «Ausgaben» abgeschnitten. Das Datum war schon vorher ein Rest von 46 px («Do, 2…»); es
   steht im Fenstertitel und im Kiosk. Mit Website (44) + Ausgaben (104) + Umschalter (136)
   + Menü (44) + 36 sind es 364. Das Haus allein versteht jeder; «Ausgaben» behält den Text,
   es ist das Hauptziel. */
@media (max-width: 39.99rem) {
  .knopf-symbol-schmal { border-radius: 50%; padding: 0.5rem; }
  .knopf-symbol-schmal span { position: absolute; width: 1px; height: 1px; margin: -1px;
                              padding: 0; border: 0; overflow: hidden; clip-path: inset(50%);
                              white-space: nowrap; }
  .leiste-oben, .links, .werkzeug { gap: 0.25rem; }
  .datum, .nur-breit { display: none; }
  .menue .sym-konto { display: none; }
}
/* Ab 40 rem stehen Suchen und Hell/Dunkel auf der Leiste; im Menü bleibt nur das Konto. */
/* `.menue-liste .menue-eintrag--schmal`, nicht nur die Klasse: `.menue-eintrag` setzt weiter
   unten `display: flex` mit gleicher Spezifität und gewann — «Dunkle Ansicht» stand bei
   1440 px doppelt (gesehen 11.09.2026). */
@media (min-width: 40rem) {
  .menue .sym-menue, .menue-liste .menue-eintrag--schmal, .menue .wort-menue { display: none; }
}
@media (max-width: 39.99rem) { .menue .wort-konto { display: none; } }

/* Das Konto-Menü. `details` bringt sein Auf und Zu selbst mit; `summary` ist der Knopf und
   verliert seinen Pfeil. Die Liste hängt unter der Leiste am rechten Rand, auf dem Tisch
   (nicht auf Petrol) — dort gilt `--schrift`, und die Kontraste sind die der Leseansicht. */
.menue { position: relative; }
.menue summary { list-style: none; }
.menue summary::-webkit-details-marker { display: none; }
.menue summary { color: inherit; }
.menue[open] summary { background: #ffffff2e; }
/* Angemeldet: ein Punkt am Symbol sagt es, ohne dass man aufklappen muss. Petrol-hell auf
   Petrol wäre unsichtbar — deshalb Weiss mit Petrol-Rand. */
.menue--angemeldet summary::after {
  content: "";
  position: absolute;
  top: 0.55rem; right: 0.55rem;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--leiste-farbe);
}
.menue-liste {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  z-index: 5;
  min-width: 13rem;
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  background: var(--tisch-leiste);
  color: var(--schrift);
  border: 1px solid var(--tisch-rand);
  border-radius: var(--r);
  box-shadow: 0 8px 24px #00000040;
}
.menue-stand {
  margin: 0;
  padding: 0.5rem 0.75rem 0.625rem;
  color: var(--schrift-leis);
  font-size: 0.875rem;
  line-height: 1.35;
  border-bottom: 1px solid var(--tisch-rand);
}
.menue-stand b { color: var(--schrift); font-weight: 600; }
.menue-eintrag {
  display: flex;
  align-items: center;
  min-height: 2.75rem;                 /* 44 px, auch hier */
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: calc(var(--r) - 2px);
  background: transparent;
  color: var(--schrift);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menue-eintrag:hover { background: color-mix(in srgb, var(--petrol) 14%, transparent); }
/* Der Farbeintrag sagt, was passiert — wie der Knopf auf der Leiste. */
.menue-eintrag .bei-dunkel { display: none; }
:root[data-farbe="dunkel"] .menue-eintrag .bei-dunkel { display: inline; }
:root[data-farbe="dunkel"] .menue-eintrag .bei-hell { display: none; }
/* Im Kiosk gibt es kein Blatt, in dem zu suchen wäre — auch nicht im Menü. */
body.im-kiosk .menue-eintrag[data-suche] { display: none; }
.menue-trenner { margin: 0.25rem 0; border: 0; border-top: 1px solid var(--tisch-rand); }
.menue-eintrag:focus-visible { outline: 2px solid var(--petrol-hell); outline-offset: -2px; }

/* ==== Zwei Spalten auf breiten Schirmen ================================== */

/* **Links das Blatt, rechts der Text — beides zugleich.** Auf dem Handy ist der
   Umschalter richtig: Eine A3-Seite und ein Lesetext passen nicht nebeneinander auf
   390 px. Ab 62 rem ist er umgekehrt lästig — der Platz ist da, und wer eine Zeitung am
   Bildschirm liest, will das Blatt sehen und den Text lesen, ohne dazwischen zu schalten.

   Genau das versucht auch Tecnavia (links Seite, rechts Inhaltsverzeichnis) — nur steht
   dort eine Liste von Überschriften. Hier steht der Wortlaut, weil das Werkzeug ihn hat.

   Der Umschalter verschwindet dabei; er hätte in dieser Ansicht nichts mehr zu schalten. */
@media (min-width: 62rem) {
  body {
    /* Die rechte Spalte wächst mit, bleibt aber lesbar breit: unter 22 rem wird der Satz
       hakelig, über 34 rem zu lang für ruhiges Lesen. */
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 38rem);
  }
  /* Eine Ausgabe ohne Blattspiegel hat keine Lesetexte — dann bekommt das Blatt alles. */
  body.einspaltig { grid-template-columns: minmax(0, 1fr); }
  .leiste { grid-column: 1 / -1; }
  .blatt { grid-column: 1; }
  .lesen {
    grid-column: 2;
    border-inline-start: 1px solid var(--tisch-rand);
    padding: 1.5rem 1.5rem 3rem;
  }
  /* Auch hier gilt die Lesebreite: Die Spalte kann breiter werden als der Text soll. */
  .lesen-inhalt { max-width: 60ch; }
  /* Der Kasten für die Schriftgrösse steht über der rechten Spalte, nicht über dem Blatt. */
  .schriftgroesse { inset-inline-end: max(1rem, env(safe-area-inset-right)); }
}

/* Der angesprungene Artikel wird kurz hinterlegt. In zwei Spalten wechselt beim Tippen
   nichts sichtbar die Ansicht — ohne ein Zeichen wüsste niemand, dass rechts etwas
   passiert ist. */
@keyframes artikel-gewaehlt {
  from { background: color-mix(in srgb, var(--petrol) 20%, transparent); }
  to   { background: transparent; }
}
.artikel.gewaehlt {
  animation: artikel-gewaehlt 1400ms ease-out both;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .artikel.gewaehlt { animation: none; }
}

/* ---- Die antippbaren Artikel -------------------------------------------- */

/* **Deckungsgleich ohne eine einzige gerechnete Koordinate.** Bild und Flächen liegen in
   derselben Rasterzelle und werden beide zentriert; die Grösse der Ebene setzt `app.js`
   auf die des Bildes. Damit stimmt die Deckung auch beim Zoomen und beim Rollen, ohne
   dass irgendwo ein Scroll-Ereignis abgehört wird. */
.seite, .stellen, .lader, .leermeldung { grid-area: 1 / 1; }

.stellen {
  position: relative;
  /* Durchlässig: Ein Tipp neben einen Artikel soll zoomen wie bisher. */
  pointer-events: none;
}

.stelle {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}
.stelle:hover,
.stelle:focus-visible {
  background: color-mix(in srgb, var(--petrol) 18%, transparent);
  box-shadow: inset 0 0 0 2px var(--petrol);
  outline: none;
}
.stelle:active { background: color-mix(in srgb, var(--petrol) 30%, transparent); }

/* **Einmal zeigen, nie erklären.** Beim ersten Blatt einer Sitzung leuchten die Flächen
   kurz auf. Das ist die einzige Stelle, an der dem Leser etwas beigebracht werden muss —
   ein Hinweistext oder ein Ein-/Ausschalter dafür wären beides mehr, als es wert ist. */
@keyframes stelle-zeigen {
  0%   { background: transparent; box-shadow: inset 0 0 0 0 transparent; }
  22%  { background: color-mix(in srgb, var(--petrol) 22%, transparent);
         box-shadow: inset 0 0 0 2px var(--petrol); }
  70%  { background: color-mix(in srgb, var(--petrol) 22%, transparent);
         box-shadow: inset 0 0 0 2px var(--petrol); }
  100% { background: transparent; box-shadow: inset 0 0 0 0 transparent; }
}
.stellen.zeigen .stelle { animation: stelle-zeigen 1800ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .stellen.zeigen .stelle { animation: none; }
  .stelle { transition: none; }
}

/* ---- Weiter auf Seite N ------------------------------------------------- */

/* Der einzige Knopf im Lesetext, der wie ein Knopf aussieht — er ist die Fortsetzung der
   Geschichte und nicht eine Nebensache wie Teilen oder Hören. Im Druck steht an dieser
   Stelle «Seite 10» und man blättert selbst; hier führt es hin. */
.weiter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--petrol);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}
.weiter svg { width: 1.1rem; height: 1.1rem; }
.weiter:hover { background: color-mix(in srgb, var(--petrol) 84%, #000); }

/* Ein Termin steht enger als Fliesstext — es ist eine Liste, keine Erzählung. */
.artikel .r-termin {
  margin: 0 0 0.45em;
  text-indent: 0;
}
.artikel .r-termin b { font-weight: 650; }

/* Ein Verzeichnis (Bestattungen, Baugesuche) kommt seit dem 07.09.2026 je Eintrag als
   Absatz (H27): die Ortszeile als `ort` (mit ihrer Marke in `listen`, also fett und mit
   Wappen), der Eintrag darunter eng wie ein Termin. */
.artikel p.r-ort { margin: 1.1em 0 0.3em; font-weight: 650; text-indent: 0; }
.artikel p.r-eintrag { margin: 0 0 0.45em; text-indent: 0; }

/* ---- Bilder im Lesetext -------------------------------------------------- */

/* Das Bild steht **vor** dem Text, wie im Blatt: Es ist der Einstieg, nicht die
   Fussnote. Die Legende klebt darunter — beides zusammen ist eine `figure`, damit eine
   Vorleseeinrichtung sie als Einheit nimmt. */
.artikel-bild {
  margin: 0 0 1.2em;
}
.artikel-bild img {
  display: block;
  width: 100%;
  height: auto;
  /* **Ein Hochformat darf den Text nicht verdrängen.** Ungedeckelt füllte ein stehendes
     Foto die ganze Spaltenhöhe, und vom Artikel blieb die Überschrift. Der Deckel schneidet
     — und schneidet richtig, weil der Fokuspunkt aus dem Blattspiegel als
     `object-position` mitgeht: Genau dafür setzt die Redaktion ihn. Querformate bleiben
     unter dem Deckel und damit unberührt. */
  /* **Seit dem 07.09.2026 ohne Deckel** (Übergabe H28, die Regel der App: im Beitrag das
     Bild in voller Lesebreite im eigenen Verhältnis, ohne Beschnitt). Der Verlag hat die
     Bildwahl der App als Vorbild benannt; ein stehendes Foto ist jetzt so hoch, wie es
     ist — die Spalte misst höchstens 32 rem, also bleibt auch ein 2:3-Bild unter 48 rem.
     `object-position` darunter gilt nur noch, wo eine Sonderform schneidet. */
  object-fit: contain;
  /* **Von oben schneiden, nicht aus der Mitte.** Ein Bild ohne Fokuspunkt (die aus der
     Druckseite geschnittenen tragen keinen) wurde mittig zugeschnitten — bei einem
     Hochformat-Porträt ist die Mitte der Hals, und der Kopf fiel weg. Gesehen am
     19.08.2026 auf Seite 7 der 087 an Alexandra Scriba. Ein Foto von einem Menschen ist
     fast immer so gerahmt, dass der Kopf im oberen Drittel steht; 30 % ist die Stelle, die
     Porträt und Landschaft beide überleben. Steht ein Fokuspunkt im Blattspiegel, setzt
     `app.js` ihn als `style` und schlägt diesen Wert. */
  object-position: 50% 30%;
  border-radius: 3px;
  background: var(--tisch-leiste);
}
/* **Ein Bild, das im Blatt klein war, bleibt klein.** Das Kopfbild eines Anreissers misst
   gedruckt 76 × 76 Punkt; über die volle Spaltenbreite gezogen wirkt es wie ein
   Reportagefoto und drängt den Text weg. Kein Deckel auf der Höhe und kein Zuschnitt: Bei
   dieser Grösse soll das ganze Bild zu sehen sein. */
/* **Eine gegliederte Liste — Impressum, Bestattungen, Kader.** Die Marke traegt die Zeile:
   Gemeinde, Rubrik oder Position steht fett voran, der Rest haengt daran. Der Einzug macht
   sichtbar, was zusammengehoert, ohne eine Aufzaehlung zu behaupten, die im Blatt keine ist. */
.liste-zeile {
  margin: 0 0 0.45em;
  padding-left: 1.1em;
  text-indent: -1.1em;
}
.liste-zeile b { font-weight: 650; }

/* **Der Termin ist eine Tabelle mit zwei Spalten, keine Zeile mit Einzug.** Im Blatt steht
   die Zeit links in ihrer eigenen Spalte, rechts der Anlass fett und darunter der Ort —
   Veranstaltungen, Sportanlaesse, Kirchenzettel (Redaktion, 23.08.2026). Die Zeitspalte
   misst 3,1 rem: «07.45» braucht 2,6, und die halbe Zeile Luft haelt die Ziffern von der
   Fettung weg. Tabellenziffern, damit die Zeiten untereinander stehen wie im Satz. */
.liste-zeile--termin {
  display: grid;
  grid-template-columns: 3.1rem 1fr;
  gap: 0 0.7rem;
  padding-left: 0;
  text-indent: 0;
  margin-bottom: 0.7em;
}
.liste-zeit {
  font-variant-numeric: tabular-nums;
  color: var(--schrift-leis);
}
.liste-sache b { display: block; }
.liste-ort { display: block; color: var(--schrift-leis); }

/* **Ein Rätsel wird nicht beschnitten.** Unter dem Höhendeckel fehlte dem Sudoku die erste
   Zeile und die linke Spalte — lösen liess es sich damit nicht mehr (Redaktion,
   22.08.2026). Kein Deckel, kein Zuschnitt: Diese Bilder sind der Inhalt, nicht sein Bild. */
.artikel-bild--ganz img {
  max-height: none;
  object-fit: contain;
}

.artikel-bild--klein img {
  max-width: 11rem;
  max-height: none;
  object-fit: contain;
}
.artikel-bild--klein figcaption {
  max-width: 11rem;
}

.artikel-bild figcaption {
  margin-top: 0.5em;
  color: var(--schrift-leis);
  font-size: 0.82em;
  line-height: 1.45;
}
/* Der Bildnachweis («Bild zvg») klein und rechtsbündig unter der Legende — so steht er im
   Blatt, und so liest er sich nicht als Teil des Satzes (099, 15.09.2026). */
.artikel-bild figcaption .bild-nachweis {
  display: block;
  text-align: end;
  font-size: 0.88em;
  letter-spacing: 0.01em;
}

/* ==== Suche und Trefferliste ============================================= */

.suche {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  max-width: 22rem;
  margin-inline-start: auto;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--tisch-rand);
  border-radius: var(--r);
  background: var(--tisch);
  color: var(--schrift-leis);
}
.suche svg { width: 1.05rem; height: 1.05rem; flex: none; }
.suche input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--schrift);
  font: inherit;
  font-size: 0.9375rem;
}
.suche input::placeholder { color: var(--schrift-leis); }
.suche input:focus { outline: none; }
.suche:focus-within { border-color: var(--petrol); }

.trefferliste { overflow: auto; padding: 0.5rem 1rem 1rem; }
.treffer {
  display: block;
  width: 100%;
  margin-bottom: 0.35rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  color: var(--schrift);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.treffer:hover { background: #ffffff10; }
.treffer:focus-visible { outline: 2px solid var(--petrol-hell); outline-offset: -2px; }
.treffer b { display: block; margin-bottom: 0.15rem; font-weight: 600; }
.treffer small { color: var(--schrift-leis); font-size: 0.85rem; }
.treffer mark { background: var(--petrol); color: #fff; border-radius: 2px; padding: 0 2px; }
.treffer-leer { padding: 2rem 1rem; color: var(--schrift-leis); text-align: center; }

@media (min-width: 48rem) {
  .lesen { padding: 2.5rem 1.5rem 5rem; }
}


/* ==== Der Kiosk ==========================================================
 *
 * Die Ausgabenansicht. Vorher ein Dialog mit einem flachen Kachelraster — jede Ausgabe
 * gleich gross, gleich wichtig. Jetzt eine Rangfolge: die neueste gross, daneben ihre
 * Inserate, darunter die letzten vier, darunter das Archiv nach Jahr und Monat.
 *
 * **Alle Masse hängen an zwei Zahlen** (Redaktion, 22.08.2026: «die Abstände und Grössen
 * sind nicht konsistent und proportional»). Vorher standen im Kiosk sechs verschiedene
 * Abstände (12, 14, 16, 24, 36 px) und zwei Kachelgrössen nebeneinander. Jetzt:
 *
 *   `--l1 … --l5`    ein Abstandsmass, 0,5 / 0,75 / 1 / 1,5 / 2,25 rem
 *   `--held-breite`  die Breite der Titelseite. Daraus folgen ihre Höhe, die Höhe des
 *                    Inseratefensters daneben und — halbiert — die Kachelgrösse.
 *
 * Er rollt selbst, wie `.blatt` und `.lesen` — der Body rollt nie (siehe dort).
 */

.kiosk {
  overflow: auto;
  overscroll-behavior: contain;

  --l1: 0.5rem;
  --l2: 0.75rem;
  --l3: 1rem;
  --l4: 1.5rem;
  --l5: 2.25rem;

  /* Die Titelseite ist das Mass. Ihre Höhe rechnet sich aus dem **echten** Verhältnis der
     Seite, das `app.js` als `--seiten-verh` mitgibt; der Rückfallwert ist die gemessene
     2394 × 3516 der 089 und nicht das angenommene A3. */
  --held-breite: 10.5rem;
  --seiten-verh: 1.4687;
  --seiten-hoehe: calc(var(--held-breite) * var(--seiten-verh));
  /* Eine Kachel ist die halbe Titelseite — so steht jede Grösse im Kiosk in einem
     erkennbaren Verhältnis zu jeder anderen. */
  --kachel: calc(var(--held-breite) / 2);
}
.kiosk:focus { outline: none; }

@media (min-width: 48rem) {
  .kiosk { --held-breite: 16rem; }
}
/* Grösser, seit das Anmeldeformular im Dialog liegt und nichts mehr über der Titelseite
   steht (Verlag, 11.09.2026: «das E-Paper darunter grösser anzeigen»). 20 rem = 320 px
   breit, 470 px hoch; die Kacheln der letzten vier folgen mit 10 rem. */
@media (min-width: 64rem) {
  .kiosk { --held-breite: 20rem; }
}

.kiosk-inhalt {
  /* **62 rem, nicht 68.** Bei 1874 px gemessen: Der Held füllte die Breite, die Reihe der
     vier letzten Ausgaben aber nur die Hälfte — die Ansicht wirkte rechts angeschnitten.
     Mit 62 rem füllen die vier Kacheln 56 % und das Archiv eine ganze Zeile. */
  max-width: 62rem;
  margin: 0 auto;
  padding: var(--l4) var(--l3) 3rem;
  display: flex;
  flex-direction: column;
  gap: var(--l5);
}
@media (min-width: 48rem) {
  .kiosk-inhalt { padding: var(--l5) var(--l4) 3rem; }
  /* **So breit wie der breiteste Block, nicht immer 62 rem.** Der Gast sieht keine Inserate:
     Sein Held ist 32 rem breit, die vier letzten Ausgaben 43 — beides stand links in einer
     62-rem-Spalte, und bei 1920 px lag die Masse 200 px links der Mitte (Verlag, 11.09.2026:
     «der Inhalt im Body ist nicht zentriert»). `fit-content` misst den breitesten Block und
     `margin: auto` stellt ihn mittig; mit Inseraten bleibt es bei 62 rem, weil der Rotator
     die Breite füllt. Erst ab 48 rem — darunter füllt der Inhalt ohnehin die Breite. */
  .kiosk-inhalt { width: fit-content; }
}

.kiosk-leer {
  margin: 3rem auto;
  max-width: 32ch;
  text-align: center;
  color: var(--schrift-leis);
}

/* ---- Die Schranke ------------------------------------------------------- */
/* Liegt **über** dem Held, nicht als Dialog davor: Die Titelseiten bleiben sichtbar, und
   wer sie sieht, weiss, wofür er sich anmeldet. Derselbe Rand wie ums Blatt, dazu die
   Petrol-Kante — ein Zettel auf dem Tisch, keine Fehlermeldung. */
.schranke {
  display: flex;
  flex-direction: column;
  gap: var(--l2);
  padding: var(--l3) var(--l4);
  border: 1px solid var(--tisch-rand);
  border-left: 4px solid var(--petrol);
  border-radius: var(--r);
  background: var(--tisch-leiste);
}
.schranke-text { margin: 0; max-width: 60ch; line-height: 1.5; color: var(--schrift-leis); }
.schranke-text b { color: var(--schrift); }
/* Der Link «Abo bestellen» in der Schranke: in der Schriftfarbe, nicht im Browser-Blau —
   das stand im dunklen Kiosk als violetter Fremdkörper (gesehen 03.09.2026). */
.schranke-text a { color: var(--schrift); text-decoration: underline; text-underline-offset: .15em; }
.schranke-text a:hover { color: var(--petrol-hell, var(--schrift)); }
.schranke-knoepfe {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--l2);
  align-items: center;
}
.schranke .knopf { text-decoration: none; }
.schranke .knopf-voll { margin-top: 0; }
.knopf-rand { border-color: var(--tisch-rand); }

/* Das Anmeldeformular in der Schranke — dieselben Masse wie die Knöpfe (44 px), damit
   ein Finger trifft; die Felder auf dem Tisch, nicht in einem zweiten Kasten. */
.schranke-form { display: flex; flex-direction: column; gap: var(--l2); max-width: 28rem; }
.schranke-form .schranke-text { max-width: none; }
.schranke-feld { display: flex; flex-direction: column; gap: 0.25rem; }
.schranke-feld span { font-size: 0.8125rem; color: var(--schrift-leis); }
.schranke-feld input {
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--tisch-rand);
  border-radius: var(--r);
  background: transparent;
  color: var(--schrift);
  font: inherit;
  font-size: 1rem;
}
.schranke-feld input:focus { outline: none; border-color: var(--petrol); }
.schranke-feld--check { flex-direction: row; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
.schranke-feld--check input { width: 1.1rem; height: 1.1rem; min-height: 0; margin-top: 0.15rem; flex: none; accent-color: var(--petrol); }
.schranke-feld--check span { font-size: 0.875rem; line-height: 1.45; }
/* Das Auge im Passwortfeld (16.09.2026): im Feld, nicht daneben — das Feld hält rechts Platz frei. */
.schranke-feld--pw { position: relative; }
.schranke-feld--pw input { padding-right: 2.9rem; }
.schranke-auge {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--schrift);
  cursor: pointer;
  opacity: 0.7;
}
.schranke-auge:hover { background: color-mix(in srgb, var(--schrift) 10%, transparent); opacity: 1; }
.schranke-auge:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
.schranke-auge .auge-strich { display: none; }
.schranke-auge[aria-pressed="true"] .auge-strich { display: inline; }
.schranke-fehler,
.schranke-hinweis {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--schrift);
}
.schranke-fehler  { background: color-mix(in srgb, #c62828 22%, transparent); }
.schranke-hinweis { background: color-mix(in srgb, var(--petrol) 22%, transparent); }
.schranke .knopf-rand { border: 1px solid var(--tisch-rand); }
/* Ein sichtbarer Fokus im Feld, nicht nur die Randfarbe: 1 px Petrol auf dunklem Grund ist
   zu wenig (Skill ui-ux-pro-max, «Focus States», 11.09.2026). */
.schranke-feld input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--petrol) 35%, transparent); }

/* ---- Die Anmeldemaske als Dialog (Verlag, 11.09.2026) ---------------------
   Schmal wie ein Formular, nicht wie die Seitenübersicht; der Grund lässt die Titelseite
   dahinter durchscheinen — sie ist das Argument für die Anmeldung. */
.dialog--anmelden {
  width: min(100%, 26rem);
  max-height: min(100%, 40rem);
  /* Das Abstandsmass des Kiosks gilt auch hier: `.schranke-form` und `.schranke-knoepfe`
     rechnen mit `--l2`, und der Dialog liegt ausserhalb von `.kiosk` — ohne diese Zeilen
     klebten Einleitung, Felder und Knöpfe aneinander (gesehen 11.09.2026). */
  --l1: 0.5rem; --l2: 0.75rem; --l3: 1rem; --l4: 1.5rem;
}
.dialog--anmelden::backdrop { background: #0009; }
.dialog-rumpf { padding: 1.25rem 1.5rem 1.5rem; overflow: auto; }
.dialog--anmelden .schranke-form { max-width: none; }
.dialog--anmelden .knopf { text-decoration: none; }
/* Der volle Knopf bringt `margin-top: var(--l2)` mit (fuer den Held); im Kiosk-Kasten hob das
   `.schranke .knopf-voll` auf, im Dialog nichts — «Anmelden» stand 12 px tiefer als «Zurueck
   zur Website» (Foto des Verlags, 11.09.2026). */
.dialog--anmelden .knopf-voll { margin-top: 0; }
.dialog--anmelden .schranke-knoepfe { align-items: stretch; }
.schranke-klein { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--schrift-leis); }
.schranke-klein a { color: var(--schrift); text-decoration: underline; text-underline-offset: .15em; }
.textknopf {
  padding: 0; border: 0; background: none;
  color: var(--schrift); font: inherit; text-decoration: underline; text-underline-offset: .15em;
  cursor: pointer;
}
.textknopf:hover, .schranke-klein a:hover { color: var(--petrol-hell, var(--schrift)); }
.textknopf:focus-visible, .schranke-klein a:focus-visible { outline: 2px solid var(--petrol-hell); outline-offset: 2px; }
}

.kiosk-block { display: flex; flex-direction: column; gap: var(--l2); }
.kiosk-kopf  { display: flex; align-items: baseline; gap: var(--l2); flex-wrap: wrap; }

.kiosk-titel {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
}
.kiosk-zahl {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--schrift-leis);
}
.kiosk-zahl--monat { margin-top: var(--l1); }

/* **Eine Kachelgrösse für beide Reihen.** Vorher waren es 82 px in der Vierer-Reihe und
   128 px im Archiv — dieselbe Sache in zwei Grössen.

   Auf dem Handy vier je Zeile in beiden Reihen: Eine feste Breite ginge nicht auf, denn
   4 × 84 px plus Abstände sind 384 und damit mehr als die 358 px, die ein iPhone hergibt —
   auf einem 360-px-Gerät noch weniger. Ab 48 rem ist Platz für das feste Mass. */
.kiosk-reihe {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--l2);
}
@media (min-width: 48rem) {
  .kiosk-reihe { grid-template-columns: repeat(auto-fill, var(--kachel)); gap: var(--l3); }
  .kiosk-reihe--vier { grid-template-columns: repeat(4, var(--kachel)); }
}

/* Auch die Kachel trägt das echte Verhältnis ihrer Titelseite. */
.kiosk-reihe .kachel img { aspect-ratio: 1 / var(--seiten-verh); }

/* ---- Der Held: die neueste Ausgabe -------------------------------------- */

.held { display: grid; gap: var(--l4); }

/* **Ab 56 rem steht die Ausgabe links und die Inserate daneben**, darunter gestapelt in
   derselben Reihenfolge.

   Nicht ab 48 rem: Dort gemessen (768 px) blieben der Textspalte neben der Titelseite
   **100 px**, und «Freitag, 21. August 2026» brach auf vier Zeilen. Gestapelt hat sie an
   derselben Stelle 448 px. Und links etwas mehr als rechts (1,15 : 1) — bei gleichen
   Hälften waren es 188 px und das Datum brach in der Mitte. */
@media (min-width: 56rem) {
  .held { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
  /* Ohne Inserate daneben (der Gast bekommt sie nicht): Titelseite plus 12 rem Text. Fest
     26 rem liess bei 20 rem Titelseite dem Datum 5 rem — «Freitag, 11. September 2026» brach
     auf vier Zeilen (gesehen 11.09.2026 bei 1440 px). */
  .held--allein { grid-template-columns: minmax(0, calc(var(--held-breite) + 18rem)); }
  /* 4 rem statt 1 rem zwischen Blatt und Text (Verlag, 11.09.2026: «nicht ganz so nah, du
     hast ja Platz» — 2.25 rem waren ihm noch «gleich»). Die Spalte oben wächst um dasselbe
     Mass mit, sonst bräche das Datum auf drei Zeilen. */
  .held .held-blatt { gap: 4rem; }   /* `.held-blatt` allein verlöre gegen die Grundregel weiter unten */
}

.held-blatt {
  display: grid;
  grid-template-columns: minmax(0, var(--held-breite)) minmax(0, 1fr);
  gap: var(--l3);
  align-items: center;
}

.held-bild {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.held-bild img {
  width: 100%;
  /* Höhe reservieren mit dem echten Verhältnis: kein Springen beim Laden **und** kein
     Anschnitt durch `cover` gegen ein angenommenes Format. */
  aspect-ratio: 1 / var(--seiten-verh);
  height: auto;
  object-fit: cover;
  object-position: top center;
  background: #fff;
  border: 1px solid var(--tisch-rand);
  border-radius: 3px;
  /* Die Titelseite darf einen Schatten werfen — sie ist der Gegenstand der Ansicht. */
  box-shadow: 0 6px 18px #0006;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 140ms ease;
}
.held-bild:hover img         { outline-color: var(--petrol); }
.held-bild:focus-visible     { outline: none; }
.held-bild:focus-visible img { outline-color: var(--petrol-hell); }

.held-text { display: flex; flex-direction: column; gap: var(--l1); min-width: 0; }
.held-oben {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--schrift-leis);
}
.held-datum {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.25;
  /* Kurze mehrzeilige Überschriften brechen ausgeglichen — «Dienstag, 25. August 2026»
     soll nicht mit einem einzelnen «2026» enden. */
  text-wrap: balance;
}
.held-zeile { margin: 0; font-size: 0.875rem; color: var(--schrift-leis); }
.held-ga { color: var(--petrol-hell); font-weight: 650; }

/* Der einzige gefüllte Knopf der ganzen Anwendung — er ist die eine Handlung, die diese
   Ansicht anbietet. */
.knopf-voll {
  align-self: start;
  margin-top: var(--l2);
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 0;
  border-radius: var(--r);
  background: var(--wahl-grund);
  color: var(--wahl-schrift);
  font: inherit;
  font-weight: 600;
}
.knopf-voll:hover  { background: color-mix(in srgb, var(--wahl-grund) 84%, #fff); }
.knopf-voll:active { background: color-mix(in srgb, var(--wahl-grund) 84%, #000); }

/* ---- Der Inserate-Rotator ----------------------------------------------- */

.rot { display: flex; flex-direction: column; gap: var(--l1); min-width: 0; }

/* **Gestapelt ist das Fenster gedeckelt.** Bei 768 px lief es über die ganzen 720 px, und
   ein quadratisches Inserat stand mit 170 px Grund auf jeder Seite darin — verloren.
   34 rem reichen: Ein Querbanner (800 × 168) füllt sie ganz, ein hochformatiges ist ohnehin
   durch die Höhe begrenzt. Nebeneinander bestimmt die Spalte die Breite. */
.rot { max-width: 34rem; }
@media (min-width: 56rem) { .rot { max-width: none; } }
.rot-oben {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--schrift-leis);
}

/* **Das Fenster ist genau so hoch wie die Titelseite daneben** und hat weder Rahmen noch
   Grund. Vorher war es ein weisser Kasten im Verhältnis 5 : 4 — ein Querbanner von
   233 × 49 mm schwamm darin mit 140 px Weiss über und unter sich (Redaktion, 22.08.2026).
   Jetzt trägt jedes Inserat seinen eigenen Rand, und was daneben bleibt, ist der Grund der
   Seite. Die feste Höhe verhindert, dass beim Wechsel alles darunter springt. */
.rot-fenster {
  height: var(--seiten-hoehe);
  /* `clip` und nicht `hidden`: Das Band ist bei neun Inseraten 3400 px breiter als sein
     Fenster. `hidden` machte daraus einen Rollbereich, den etwas anderes verschieben
     könnte; `clip` schneidet nur ab. */
  overflow: clip;
}
.rot-band {
  display: flex;
  height: 100%;
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Absolut gesetzt und mit `margin: auto` zentriert. `max-height: 100%` braucht einen Kasten
   mit fester Höhe; als Grid-Zeile hatte er keine, und das Inserat wurde unten
   angeschnitten (an der 089 gesehen). Der Verweis spannt die ganze Folie auf, damit das
   Bild darin denselben festen Kasten hat wie ohne ihn. */
.rot-folie {
  flex: 0 0 100%; min-width: 0;
  display: flex; flex-direction: column;
}
/* Die Flaeche nimmt, was die Zeile mit den Wegen uebriglaesst. `min-height: 0`, damit sie
   sich vom Bild nicht aufblaehen laesst — sonst waere die feste Hoehe des Fensters dahin. */
.rot-flaeche { position: relative; flex: 1 1 auto; min-height: 0; }
.rot-link  { position: absolute; inset: 0; display: block; }
.rot-folie img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: #fff;
  border: 1px solid var(--tisch-rand);
  box-shadow: 0 4px 14px #0007;
}

.rot-fuss {
  display: flex;
  align-items: center;
  gap: var(--l1);
  flex-wrap: wrap;
  min-height: 2.75rem;
}
.rot-wer {
  margin: 0;
  flex: 1 1 9rem;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--schrift-leis);
  /* Ein Kundenname ohne Leerzeichen darf die Zeile nicht aus dem Kasten schieben. */
  overflow-wrap: anywhere;
}
.rot-wer b { color: var(--schrift); font-weight: 650; }

.rot-steuer { display: flex; align-items: center; gap: 0.125rem; margin-inline-start: auto; }

.rot-zaehler {
  margin: 0;
  min-width: 4rem;
  text-align: center;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--schrift-leis);
}

/* Zwei Zeichen in einem Knopf: Was er tun wird, nicht was gerade geschieht. */
.rot-halt .rot-sym-lauf  { display: none; }
.rot-halt.haelt .rot-sym-pause { display: none; }
.rot-halt.haelt .rot-sym-lauf  { display: block; }

/* ---- Jahr und Monat ------------------------------------------------------ */

.reiter { display: flex; flex-wrap: wrap; gap: var(--l1); }
.reiter-knopf {
  min-height: 2.5rem;
  padding: 0 0.875rem;
  border: 1px solid var(--tisch-rand);
  border-radius: 999px;
  background: none;
  color: var(--schrift-leis);
  font: inherit;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.reiter-knopf:hover:not([disabled]) { border-color: var(--petrol); color: var(--schrift); }
.reiter-knopf:focus-visible { outline: 2px solid var(--petrol-hell); outline-offset: 2px; }
.reiter-knopf[aria-pressed="true"] {
  background: var(--wahl-grund);
  border-color: var(--wahl-grund);
  color: var(--wahl-schrift);
  font-weight: 600;
}
/* Ein Monat ohne Ausgabe steht mit da, matt und ohne Zeiger — die Lücke ist eine Auskunft
   und keine fehlende Zeile. */
.reiter-knopf[disabled] { opacity: 0.32; cursor: default; }
.reiter--monat .reiter-knopf { min-width: 3.25rem; padding: 0 var(--l1); text-align: center; }

/* Der Kiosk läuft über beide Spalten, wenn die Leseansicht daneben stünde. */
@media (min-width: 62rem) {
  .kiosk { grid-column: 1 / -1; }
}

/* ---- Die Anzeigen unter den Beiträgen ------------------------------------
 *
 * Im `inserate`-Feld stehen nur die Anzeigen, die fürs Netz gebucht haben. Sie standen bis
 * zum 23.08.2026 allein im Rotator der Kioskseite; in der Leseansicht — dort, wo gelesen
 * wird — kamen sie gar nicht vor (Redaktion: «mach auch dass die anzeigen … ins html kommen
 * aber als bild mit den optionen darunter»).
 *
 * **Sie stehen unter der Seite, nicht zwischen den Beiträgen.** Eine Anzeige mitten im Satz
 * zerschneidet den Lesefluss; im Druck steht sie auch nicht dort. Die Trennlinie oben sagt,
 * dass hier der redaktionelle Teil aufhört — das ist keine Schönheitsfrage, sondern die
 * Trennung von Redaktion und Werbung.
 */
.seiteninserate {
  margin: 2.5em 0 1em;
  padding-top: 1.4em;
  border-top: 1px solid var(--tisch-rand);
  display: flex;
  flex-direction: column;
  gap: 1.6em;
}
.ins-karte {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  max-width: 34rem;
}
.ins-karte img {
  width: 100%;
  height: auto;
  border: 1px solid var(--tisch-rand);
  border-radius: var(--r);
  background: #fff;          /* Inserate sind für weisses Papier gesetzt */
}
.ins-karte figcaption {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--schrift-leis);
}
/* Die Wege wickeln um: Auf dem Telefon stehen vier Knöpfe nicht nebeneinander. */
.ins-wege {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.rot-folie .ins-wege { flex: 0 0 auto; justify-content: center; margin-top: 0.6em; }

/* ==== Impressum ========================================================== */
/* **Gesetzt, nicht als Wand.** Im Blatt steht das Impressum in einer schmalen Spalte in
   6-Punkt-Schrift: Wortmarke, Adresse, dann Block für Block mit fetter Marke darüber. In
   der Leseansicht kam es als ein Absatz von 1196 Zeichen an, mit den Zeilenumbrüchen des
   Satzes als Leerzeichen mitten in den Wörtern (Redaktion, 23.08.2026). Der Wortlaut kommt
   jetzt aus `rules/vs/impressum.yaml`; hier steht nur, wie er aussieht.

   Zwei Spalten ab 40 rem — darunter ist eine Spalte von 20 rem breiter als die gedruckte
   und liest sich besser als zwei zerquetschte. */
.impressum {
  border-top: 2px solid var(--tisch-rand);
  border-bottom: 1px solid var(--tisch-rand);
  padding: 1rem 0 0.9rem;
  margin: 0 0 1.2rem;
  font-size: 0.86em;
  line-height: 1.5;
}
.impressum p { margin: 0; }
.impressum-wortmarke {
  font-size: 1.9em;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.35rem !important;
}
.impressum-adresse { color: var(--schrift-leis); }
.impressum-bloecke {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem 2rem;
}
@media (min-width: 40rem) {
  .impressum-bloecke { grid-template-columns: 1fr 1fr; }
}
.impressum-marke {
  font-weight: 650;
  /* Die Marke trägt den Block, darum steht sie darüber und nicht davor: «Inserate mm-Preis»
     ist länger als die Hälfte der Spalte, vorangestellt bliebe für den Wert eine Handbreit. */
  margin-bottom: 0.1rem !important;
}
.impressum-block b { font-weight: 650; }
.impressum-schluss {
  margin-top: 1rem !important;
  color: var(--schrift-leis);
  font-size: 0.94em;
}