/* 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;

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

  color-scheme: dark;
}

* { 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: var(--petrol-dunkel);
  background: var(--petrol);
  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, nicht das Datum.** Gemessen bei 390 px:
   «Volksstimme» und «Dienstag, 18. August 2026» passen nicht nebeneinander, das Datum
   wurde abgeschnitten. Von beidem ist die Marke die entbehrliche — sie steht in Fraktur
   quer über der Zeitungsseite direkt darunter. Welche Ausgabe man vor sich hat, steht
   dort dagegen nur klein im Kopf. */
.marke { display: none; margin: 0; line-height: 0; }
.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;
}
.datum {
  margin: 0;
  margin-inline-start: auto;
  /* 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. */
.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;
}
.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 */
  place-items: start center;
  touch-action: pan-x pan-y pinch-zoom;
}
.blatt.gezoomt .seite {
  max-width: none;
  max-height: none;
  width: min(240%, 2400px);
  cursor: zoom-out;
}

/* **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; }

.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 {
  /* 62 Zeichen: die Zeilenlänge, bei der Fliesstext am ruhigsten liest. Eine Zeitung
     setzt schmaler, aber sie hat auch mehrere Spalten nebeneinander. */
  max-width: 38em;
  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;
}
.artikel-dach { margin: 0 0 0.2em; color: var(--schrift-leis); font-size: 0.95em; }
.artikel h2 {
  margin: 0 0 0.45em;
  font-size: 1.55em;
  line-height: 1.2;
  font-weight: 700;
  text-wrap: balance;
}
.artikel-lead { margin: 0 0 1em; font-weight: 600; line-height: 1.5; }
.artikel-autor {
  margin: 0 0 1.4em;
  color: var(--schrift-leis);
  font-size: 0.9em;
}
.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); }
.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; }

.artikel-legenden {
  margin: 1.4em 0 0;
  padding: 0;
  list-style: none;
  color: var(--schrift-leis);
  font-size: 0.88em;
  line-height: 1.5;
}
.artikel-legenden li { margin-bottom: 0.5em; padding-inline-start: 1.4em; position: relative; }
.artikel-legenden li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.45em;
  width: 0.85em; height: 0.7em;
  border: 1px solid currentColor;
  border-radius: 2px;
}

/* 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);
}

/* ---- 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; }
}

/* ==== 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; }
}