Kampagnen-Kacheln: gegliederte Texte, Geschenke mit Preis, aufklappbar

Filipe, mit einem Bildschirmfoto des Regelblocks: "man soll die titel
in den texten besser erkennen und sehen was zu was passt. ich will
auch dass man sieht welche geschenke bei dem event zaehlen und so.
ich will alle informationen die moeglich sind wenn man den link
hochlaedt. ... auch wenn man teilt soll es einfach perfekt sein. man
soll alle infos sehen die man braucht. die kacheln von den events
soll auch nicht so lang sein, die soll man aufklappen koennen. genau
wie eine trennung fuer heute, letzte woche letzten monat und so."

DER FEHLER LAG NICHT IM TEXT, SONDERN IN SEINER ANZEIGE. Im Feld
stand die ganze Zeit eine Gliederung -- Hinweise mit "* ", eine
Ueberschrift mit Untertitel hinter einem Gedankenstrich, Absaetze
ohne Zeichen, Aufzaehlungen mit "- ". Die Kachel hat daraus mit
punkteAusText() EINE flache Liste gemacht: jede Zeile derselbe
Strich, alle gleich gross.

  gliederung()      liest die Gliederung, die schon dasteht, statt
                    den Text umzuschreiben. Die beiden Kampagnen, die
                    heute in der Datenbank liegen, sehen dadurch
                    sofort richtig aus -- ohne Umstellung.
  Geschenke         kommen aus der gelesenen LISTE, nicht aus dem
                    Text, und stehen OHNE Aufklappen auf der Kachel.
  Aufklappen        alles Uebrige hinter einem Druck: gemessen 555 px
                    weniger je Kachel bei Gipfelstuermer.
  Gruppen           je Spalte laeuft / kommt / vorbei, Vergangenes
                    nach diese Woche, dieser Monat, aelter.

NEU GELESEN (stand in allen vier gespeicherten Seiten und wurde nie
angesehen): die Rangliste mit ihren Gruppen ("Superstars" bis
"5. Liga", bei Glow Up "Team Glow"/"Team Shine"), die Beschreibung je
Missionsgruppe, der Steckbrief (Kurznummer, Markt, Sprache, Zone),
der zweite Bildbaustein, und Ueberschriften INNERHALB der Klapptexte
-- "WELCHE LIGA BIN ICH?" hat jetzt sechs eingerueckte Unterpunkte
statt zwoelf gleichrangiger Zeilen.

EVENT_TEXT_MAX 6000 -> 20000. Der Regeltext von Gipfelstuermer ist
7679 Zeichen lang; es fielen bisher jedes Mal rund 1600 Zeichen
echter Inhalt weg. Die Zahl steht jetzt an EINER Stelle.

TEILEN: Was die KAMPAGNE sagt, geht hinaus (Aufgaben, Geschenke,
Regeln) -- wer WIR sind, nicht (Name, Rolle, Haus, Kampagnennummer,
Steckbrief). Und keine Hinweiszeile: "Die Preise konnten nicht
gelesen werden -- bitte nachtragen" ist eine Notiz an DogFather und
hat auf einer Seite, die er in Discord postet, nichts zu suchen.

BERICHTIGT, WEIL NACHGEMESSEN:
  - Number(null) ist 0 und 0 ist endlich -- "Feuerwerk" bekam an drei
    Stellen "0 Coins" angeschrieben, also eine falsche Preisangabe.
  - Ein Kommentar im Leser behauptete, der Wertungszeitraum weiche
    vom Kampagnenzeitraum ab. Nachgemessen ist er in allen drei
    Seiten mit Rangliste auf die Millisekunde gleich; ich hatte zwei
    verschiedene Kampagnen verglichen.
  - bild-kampagne.mjs verlangte "jede Kachel traegt den Ton ihrer
    Seite" und war damit seit dem 07.10. rot, weil an dem Tag bewusst
    das Gegenteil entschieden wurde (Zustandston, Seitenkante). Nicht
    aufgefallen, weil nach dem Lauf nur die Zahl der MESSUNGEN notiert
    wurde, nicht die der FEHLER.
  - .kv-seite > .eintrag-karte wird .kv-seite .eintrag-karte: Die
    Karten haengen durch die Gruppen eine Ebene tiefer. Das waere der
    fuenfte Direktkind-Selektor gewesen, der nach einem Umbau still
    ausfaellt -- diesmal vorher gesehen.

GEPRUEFT: 186 (lesen, +58), 148 (Route/Teilen, +25), 158 (Kachel,
+64), 67 (Agentur, +5), 67 Messungen (Bild, +14), dazu struktur,
css-klassen, zeichen, deutsche-texte, tippziele, lesbarkeit und
haus-trennung (107, unveraendert). Sechs Gegenproben: alle sechs
Sabotagen werden bemerkt, alle Dateien byte-gleich wiederhergestellt.

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/assets/css/bereich.css

@@ -2679,7 +2679,12 @@ body[data-ton] .kopf-zeile::before {
 
    Deshalb bekommt die reine Anzeigezeile dasselbe Raster wie der
    Knopf -- nur eben ohne Hintergrund und ohne Zeiger. */
-.ev-punkt:not(:has(.ev-punkt__knopf)):not(.ev-punkt--regel) {
+/* `:not(.ev-punkt--regel)` ist am 07.10.2026 entfallen: Diese
+   Klasse gibt es nicht mehr (sie heisst jetzt `.ev-zeile` und ist
+   kein `.ev-punkt`). Ein `:not()` auf eine Klasse, die niemand
+   mehr setzt, schliesst nichts aus und liest sich wie eine
+   Bedingung, die es noch gibt. */
+.ev-punkt:not(:has(.ev-punkt__knopf)) {
   display: flex; align-items: flex-start; gap: 10px;
   padding: 9px 10px;
   font-size: .9rem; line-height: 1.45;
@@ -2768,22 +2773,30 @@ body[data-ton] .kopf-zeile::before {
 .ev-punkt[data-abgehakt="ja"] .ev-punkt__text { color: var(--text-leise); }
 .ev-punkt__text { flex: 1 1 auto; overflow-wrap: anywhere; }
 
-/* Die Regelliste: dasselbe Raster, aber ein Strich statt eines
-   Kaestchens -- man sieht auf einen Blick, dass hier nichts zu tun
-   ist. */
-.ev-punkt--regel {
+/* Eine Zeile in einem Abschnitt: dasselbe Raster wie bei den
+   Aufgaben, aber ein Strich statt eines Kaestchens -- man sieht auf
+   einen Blick, dass hier nichts zu tun ist.
+
+   HIESS BIS ZUM 07.10.2026 `.ev-punkt--regel` und stand in einer
+   flachen Regelliste. Die gibt es nicht mehr (siehe `gliederung()`
+   in kampagne-lesen.mjs); umbenannt statt verdoppelt, damit nicht
+   zwei Zeilenstile mit demselben Aussehen nebeneinander liegen. */
+.ev-zeile {
   display: flex; align-items: flex-start; gap: 10px;
-  padding: 6px 10px;
-  font-size: .87rem; line-height: 1.5;
+  margin: 0; padding: 5px 2px;
+  font-size: .87rem; line-height: 1.55;
   color: var(--text-leise);
 }
-.ev-punkt__zeichen {
+.ev-zeile__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
+.ev-punkt__zeichen,
+.ev-zeile__zeichen {
   flex: none;
   width: 19px; height: 19px;
   margin-top: 1px;
   position: relative;
 }
-.ev-punkt__zeichen::before {
+.ev-punkt__zeichen::before,
+.ev-zeile__zeichen::before {
   content: "";
   position: absolute; left: 3px; top: 9px;
   width: 11px; height: 1.5px;
@@ -3152,12 +3165,36 @@ body[data-ton] .kopf-zeile::before {
 /* Der Abstand kommt jetzt vom Raster. Zwei Abstandsquellen ergeben
    einen doppelten Abstand -- und zwar nur zwischen den Zeilen, was
    schwer zu finden ist. */
+/* ==== `.kv-seite` OHNE `>` -- DAS FUENFTE MAL (07.10.2026) =====
+
+   Hier stand `.kv-seite > .eintrag-karte`. Seit die Spalten nach
+   Zustand und Alter gegliedert sind, haengen die Karten in einem
+   `.ev-gruppe__inhalt` -- also eine Ebene tiefer, und der
+   Direktkind-Selektor haette aufgehoert zu greifen. Folge waere
+   gewesen: Eventkacheln ohne `display: flex`, also ohne den Fuss
+   unten und mit der Buehne eingerahmt vom Kartenpolster.
+
+   DAS IST IM PROJEKT SCHON VIERMAL PASSIERT -- zuletzt am
+   07.10.2026 bei `#liste > .eintrag-karte[data-event=...]`, wo
+   alle drei Zustandsfarben ausfielen und ein Feature vom Vortag
+   rueckgaengig gemacht wurde, ohne dass eine Pruefung rot wurde.
+   Diesmal vorher gesehen, nicht hinterher gemessen.
+
+   WAS DIREKTKIND BLEIBT UND WARUM: `> *:not(.ev-buehne)` meint
+   die eigenen Kinder DER KARTE. Die Karte ist nach wie vor der
+   Vater ihres Inhalts; dieser Selektor beschreibt also wirklich
+   eine Vater-Kind-Beziehung und nicht eine Lage im Baum. Nur die
+   Strecke von der SPALTE zur Karte wird frei.
+
+   Dass `.kv-seite` ueberhaupt davorsteht, bleibt noetig: Ohne sie
+   hiesse die Regel „jede Eventkachel ueberall" -- und `#liste >`
+   darueber waere dann sinnlos. */
 #liste > .eintrag-karte,
-.kv-seite > .eintrag-karte,
+.kv-seite .eintrag-karte,
 .kv-rest > .eintrag-karte { margin-bottom: 0; }
 
 #liste > .eintrag-karte[data-eventkarte="ja"],
-.kv-seite > .eintrag-karte[data-eventkarte="ja"] {
+.kv-seite .eintrag-karte[data-eventkarte="ja"] {
   display: flex;
   flex-direction: column;
   /* Die Buehne liegt am oberen Rand und soll ihn beruehren -- das
@@ -3166,13 +3203,13 @@ body[data-ton] .kopf-zeile::before {
   padding: 0 0 15px;
 }
 #liste > .eintrag-karte[data-eventkarte="ja"] > *:not(.ev-buehne),
-.kv-seite > .eintrag-karte[data-eventkarte="ja"] > *:not(.ev-buehne) {
+.kv-seite .eintrag-karte[data-eventkarte="ja"] > *:not(.ev-buehne) {
   padding-left: 18px; padding-right: 18px;
 }
 #liste > .eintrag-karte[data-eventkarte="ja"] .ev-block,
-.kv-seite > .eintrag-karte[data-eventkarte="ja"] .ev-block { margin-left: 0; margin-right: 0; }
+.kv-seite .eintrag-karte[data-eventkarte="ja"] .ev-block { margin-left: 0; margin-right: 0; }
 #liste > .eintrag-karte[data-eventkarte="ja"] .eintrag-fuss,
-.kv-seite > .eintrag-karte[data-eventkarte="ja"] .eintrag-fuss { margin-top: auto; }
+.kv-seite .eintrag-karte[data-eventkarte="ja"] .eintrag-fuss { margin-top: auto; }
 
 /* =====================================================================
    DIE KARTE SAGT, OB DAS EVENT LAEUFT (07.10.2026)
@@ -3740,3 +3777,366 @@ body[data-ton] .kopf-zeile::before {
 @media (prefers-reduced-motion: reduce) {
   .kampagneholen textarea { transition: none; }
 }
+
+/* =====================================================================
+   GEGLIEDERTE INFOS, GESCHENKE, AUFKLAPPEN, GRUPPEN (07.10.2026)
+
+   Filipe, mit einem Bildschirmfoto des Regelblocks: „man soll die
+   titel in den texten besser erkennen und sehen was zu was passt.
+   ich will auch dass man sieht welche geschenke bei dem event zaehlen
+   und so. ... die kacheln von den events soll auch nicht so lang
+   sein, die soll man aufklappen koennen damit die nicht zu lange
+   sind. genau wie eine trennung fuer heute, letzte woche letzten
+   monat und so."
+
+   AUGENSCHONEND (CLAUDE.md, 12.08.2026): Die Unterscheidung laeuft
+   ueber GROESSE, GEWICHT, SPERRUNG und EINRUECKUNG -- nicht ueber
+   grelle Farben. Eine Ueberschrift darf man sehen, ohne dass sie
+   leuchtet. Die einzige kraeftige Farbe im ganzen Block ist der
+   Coinpreis, und der ist ein gedecktes Gold, kein Neon.
+   ===================================================================== */
+
+/* ---- Der Abschnitt -------------------------------------------------- */
+.ev-abschnitte {
+  display: flex; flex-direction: column;
+  gap: 14px;
+}
+.ev-abschnitt { margin: 0; }
+
+/* STUFE 2 IST EIN EIGENER ABSCHNITT (KAMPAGNENGESCHENKE, BELOHNUNGEN,
+   TEILNAHME), STUFE 3 EINE UEBERSCHRIFT AUS EINEM FREMDEN TEXT
+   ("Superstars", "1. Liga", "WELCHE LIGA BIN ICH?").
+
+   Die Einrueckung macht die Verschachtelung sichtbar, ohne dass der
+   HTML-Baum sie nachbauen muss -- die Gliederung bleibt eine flache
+   Liste (Begruendung bei `gliederung()` in kampagne-lesen.mjs). */
+.ev-abschnitt[data-stufe="3"] {
+  margin-left: 2px;
+  padding-left: 11px;
+  border-left: 2px solid color-mix(in srgb, var(--rand) 85%, transparent);
+}
+
+.ev-abschnitt__titel {
+  margin: 0 0 6px;
+  /* .78rem = 12,5 px. In Grossbuchstaben mit Sperrung wirkt eine
+     Schrift kleiner, als die Zahl sagt -- dieselbe Begruendung steht
+     schon bei .ev-block__schild. */
+  font-size: .78rem; font-weight: 700;
+  letter-spacing: .08em; text-transform: uppercase;
+  line-height: 1.4;
+  color: color-mix(in srgb, var(--ev-ton, var(--akzent, #3fbdf5)) 55%, var(--text));
+}
+/* Die Unterstufe ist KEINE Grossschreibung: Sie kommt aus einem
+   fremden Text, und "Du kannst an dieser Liga teilnehmen" in
+   Grossbuchstaben waere geschrien. Sie unterscheidet sich durch
+   Gewicht und Farbe, nicht durch Lautstaerke. */
+.ev-abschnitt[data-stufe="3"] > .ev-abschnitt__titel {
+  font-size: .85rem; font-weight: 650;
+  letter-spacing: .01em; text-transform: none;
+  color: var(--text);
+}
+.ev-abschnitt__unter {
+  margin: -2px 0 7px;
+  font-size: .82rem; line-height: 1.5;
+  color: var(--text-still);
+}
+
+/* Ein Absatz. `--text-leise` und nicht `--text`: Der Regeltext ist
+   Nachschlagewerk, nicht das, weswegen jemand die Kachel aufmacht. */
+.ev-absatz {
+  margin: 0 0 7px;
+  font-size: .87rem; line-height: 1.6;
+  color: var(--text-leise);
+  overflow-wrap: anywhere;
+}
+.ev-absatz:last-child { margin-bottom: 0; }
+
+/* Eine Frage mit Antwort darunter -- die Gliederung der
+   Teilnahmebedingungen. Begruendung bei `gliederung()`. */
+.ev-frage {
+  margin: 11px 0 5px;
+  font-size: .87rem; font-weight: 650; line-height: 1.5;
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+.ev-frage:first-child { margin-top: 0; }
+
+.ev-zeilen {
+  list-style: none;
+  margin: 0 0 7px; padding: 0;
+  display: flex; flex-direction: column; gap: 1px;
+}
+.ev-zeilen:last-child { margin-bottom: 0; }
+
+/* ---- Die Geschenke -------------------------------------------------- */
+
+/* DER EINE BLOCK, DER NICHT HINTER DEM AUFKLAPPEN LIEGT.
+
+   "Welche Geschenke zaehlen" ist die Frage, die am haeufigsten
+   gestellt wird, und die Antwort passt in eine Zeile. Der Rahmen in
+   gedecktem Gold grenzt ihn vom Aufgabenblock daneben ab, ohne mit
+   ihm zu konkurrieren. */
+.ev-block--gaben {
+  border-color: color-mix(in srgb, #e2c15a 26%, var(--rand));
+  background:
+    linear-gradient(180deg,
+      color-mix(in srgb, #e2c15a 6%, transparent),
+      transparent 60%),
+    rgba(255, 255, 255, .022);
+}
+.ev-gaben__woher {
+  margin: 0 0 9px;
+  font-size: .82rem; line-height: 1.45;
+  color: var(--text-leise);
+}
+.ev-gaben__unter {
+  display: block; margin-top: 2px;
+  font-size: .8rem; color: var(--text-still);
+}
+
+.ev-gaben {
+  display: flex; flex-wrap: wrap; gap: 7px;
+  margin: 0; padding: 0; list-style: none;
+}
+/* Eine Plakette je Geschenk, nicht eine Zeile: Fuenf Geschenke
+   untereinander sind fuenf Zeilen, nebeneinander eine. Genau darum
+   ging es -- die Kachel soll kuerzer werden. */
+.ev-gabe {
+  display: inline-flex; align-items: center; gap: 7px;
+  margin: 0; padding: 5px 10px;
+  border: 1px solid color-mix(in srgb, #e2c15a 22%, var(--rand));
+  border-radius: 999px;
+  background: color-mix(in srgb, #e2c15a 7%, rgba(255, 255, 255, .02));
+  font-size: .84rem; line-height: 1.35;
+  color: var(--text);
+  max-width: 100%;
+}
+.ev-gabe__name { font-weight: 600; overflow-wrap: anywhere; }
+/* Der Coinpreis mit einem Muenzpunkt davor. `tabular-nums`, damit
+   1 und 12.000 untereinander dieselbe Breite je Ziffer haben. */
+.ev-gabe__coins {
+  display: inline-flex; align-items: center; gap: 5px;
+  flex: none;
+  padding: 1px 8px 1px 7px;
+  border-radius: 999px;
+  background: color-mix(in srgb, #e2c15a 17%, transparent);
+  color: color-mix(in srgb, #e2c15a 78%, var(--text));
+  font-size: .79rem; font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.ev-gabe__coins::before {
+  content: "";
+  flex: none;
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: color-mix(in srgb, #e2c15a 72%, transparent);
+}
+/* Der Hinweis zum Geschenk ("Sammle Feuerwerk in deinem LIVE!") --
+   bei einem Kampagnengeschenk steht hier, WIE man es bekommt, und
+   das ist die Auskunft anstelle eines Preises. */
+.ev-gabe__zusatz {
+  font-size: .79rem; color: var(--text-still);
+  overflow-wrap: anywhere;
+}
+.ev-gabe__zusatz::before {
+  content: "·";
+  margin-right: 5px;
+  opacity: .7;
+}
+
+/* ---- Die Hinweise --------------------------------------------------- */
+
+/* WAS BEIM EINLESEN GEFEHLT HAT -- still, aber nicht versteckt.
+
+   Im Bildschirmfoto vom 07.10.2026 standen diese Zeilen MITTEN in
+   der Regelliste, mit demselben Strich davor wie eine Regel. "Diese
+   Kampagne hat keine Preisliste auf der Seite" las sich damit wie
+   eine Teilnahmebedingung. Jetzt stehen sie unter den Bloecken, in
+   einem eigenen Kasten, mit einem Fragezeichen-Kreis davor. */
+.ev-hinweise {
+  display: flex; flex-direction: column; gap: 5px;
+  margin: 12px 0 0;
+  padding: 10px 13px;
+  border: 1px dashed color-mix(in srgb, var(--rand) 85%, transparent);
+  border-radius: var(--radius-klein);
+  background: rgba(255, 255, 255, .012);
+}
+.ev-hinweis {
+  display: flex; align-items: flex-start; gap: 8px;
+  margin: 0;
+  font-size: .81rem; line-height: 1.5;
+  color: var(--text-still);
+  overflow-wrap: anywhere;
+}
+.ev-hinweis::before {
+  content: "i";
+  flex: none;
+  width: 16px; height: 16px; margin-top: 2px;
+  border: 1px solid color-mix(in srgb, var(--text-still) 45%, transparent);
+  border-radius: 50%;
+  /* .74rem = 11,84 px. NICHT kleiner: pruef-css-klassen zieht die
+     Grenze bei 11,5 px, und sie gilt auch fuer ein einzelnes Zeichen
+     -- wer eine Ausnahme fuer "nur ein i" macht, macht die naechste
+     fuer "nur eine Zahl". Der Kreis ist dafuer 16 px statt 15. */
+  font-size: .74rem; font-weight: 700; font-style: italic;
+  line-height: 14px; text-align: center;
+  color: var(--text-still);
+}
+
+/* ---- Der Steckbrief ------------------------------------------------- */
+.ev-block--steck { background: rgba(255, 255, 255, .012); }
+.ev-steck {
+  display: grid;
+  /* Name und Wert in zwei Spalten: `auto` fuer den Namen, damit er
+     nur so breit wird, wie der laengste ihn braucht. */
+  grid-template-columns: auto 1fr;
+  gap: 4px 14px;
+  margin: 0;
+}
+.ev-steck__name {
+  margin: 0;
+  font-size: .78rem; font-weight: 600;
+  letter-spacing: .03em;
+  color: var(--text-still);
+}
+.ev-steck__wert {
+  margin: 0;
+  font-size: .82rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--text-leise);
+  overflow-wrap: anywhere;
+}
+
+/* ---- Aufklappen: alles Uebrige hinter einem Druck ------------------- */
+.ev-mehr { margin-top: 12px; }
+.ev-mehr__knopf {
+  display: flex; align-items: center; gap: 9px;
+  width: 100%;
+  padding: 8px 12px;
+  font: inherit; font-size: .78rem; font-weight: 600;
+  letter-spacing: .04em; text-transform: uppercase;
+  color: var(--text-leise);
+  text-align: left; cursor: pointer;
+  background: color-mix(in srgb, var(--tinte) 88%, #ffffff 12%);
+  border: 1px dashed color-mix(in srgb, var(--rand) 80%, transparent);
+  border-radius: 9px;
+}
+.ev-mehr__knopf:hover, .ev-mehr__knopf:focus-visible {
+  color: var(--text);
+  border-style: solid;
+  border-color: color-mix(in srgb, var(--ev-ton, var(--akzent)) 45%, transparent);
+}
+.ev-mehr__wort { flex: 0 0 auto; }
+/* DIE ZAHL SAGT, WAS DAHINTER STEHT. Ein zugeklappter Kasten ohne
+   Zahl sieht aus, als sei er leer -- und dann drueckt niemand. */
+.ev-mehr__zahl {
+  flex: 1 1 auto; min-width: 0;
+  font-size: .76rem; font-weight: 500;
+  letter-spacing: .01em; text-transform: none;
+  color: var(--text-still);
+}
+.ev-mehr__knopf .klapp-pfeil { flex: none; }
+.ev-mehr__inhalt { margin-top: 10px; }
+.ev-mehr__inhalt > .ev-block + .ev-block { margin-top: 10px; }
+
+/* ---- Die Gruppen einer Spalte --------------------------------------- */
+
+/* Dasselbe Aussehen wie die Zeitgruppen der anderen Bretter
+   (.zeitgruppe__kopf) -- ein zweiter Stil fuer dieselbe Sache waere
+   eine zweite Wahrheit darueber, wie eine Gruppe aussieht. Nur der
+   Ton kommt aus der Spalte (`--kv-ton`): So gehoeren die Gruppen
+   sichtbar zu ihrer Seite der Trennung. */
+.ev-gruppe__kopf {
+  display: flex; align-items: center; gap: 9px;
+  width: 100%; margin: 10px 0 0;
+  padding: 7px 10px;
+  font: inherit; font-size: .76rem; font-weight: 600;
+  letter-spacing: .04em; text-transform: uppercase;
+  color: var(--text-leise);
+  text-align: left; cursor: pointer;
+  background: color-mix(in srgb, var(--tinte) 88%, #ffffff 12%);
+  border: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
+  border-left: 3px solid color-mix(in srgb, var(--kv-ton, var(--akzent)) 45%, transparent);
+  border-radius: 9px;
+}
+.ev-gruppe__kopf:hover, .ev-gruppe__kopf:focus-visible {
+  color: var(--text);
+  border-color: color-mix(in srgb, var(--kv-ton, var(--akzent)) 45%, transparent);
+}
+/* Die erste Gruppe braucht oben keinen Abstand -- darueber steht
+   schon der Kopf der Spalte. */
+.kv-seite__kopf + .ev-gruppe__kopf { margin-top: 2px; }
+
+/* WAS LAEUFT, STEHT KRAEFTIGER DA ALS WAS VORBEI IST. Ein
+   zugeklappter Kasten „Vorbei — aelter" soll nicht so aussehen wie
+   „Laeuft gerade": Die Ueberschrift ist zugleich die Auskunft. */
+.ev-gruppe__kopf[data-gruppe="laeuft"] {
+  color: var(--text);
+  background: color-mix(in srgb, var(--kv-ton, var(--akzent)) 9%, var(--tinte));
+}
+.ev-gruppe__kopf[data-gruppe^="vorbei"] { opacity: .78; }
+
+.ev-gruppe__wort { flex: 1 1 auto; min-width: 0; }
+.ev-gruppe__zahl {
+  flex: none;
+  padding: 1px 8px;
+  font-size: .76rem; font-variant-numeric: tabular-nums;
+  color: var(--text);
+  background: color-mix(in srgb, var(--tinte) 70%, #ffffff 30%);
+  border-radius: 999px;
+}
+.ev-gruppe__inhalt {
+  display: flex; flex-direction: column; gap: 12px;
+  margin-top: 8px;
+}
+
+/* ---- Was zu einer Aufgabe noch dasteht ------------------------------ */
+
+/* Beschreibung und Zeitraum einer Missionsgruppe. EINGERUECKT auf die
+   Hoehe des Aufgabentextes (19 px Kaestchen + 10 px Luecke = 29 px),
+   damit es unter dem Text haengt und nicht unter dem Kaestchen. */
+.ev-punkt__zusatz {
+  display: flex; flex-wrap: wrap; align-items: baseline;
+  gap: 4px 9px;
+  margin: -2px 0 6px 39px;
+  font-size: .79rem; line-height: 1.45;
+  color: var(--text-still);
+}
+.ev-punkt__spanne {
+  flex: none;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--rand) 55%, transparent);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.ev-punkt__worte { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
+
+/* ---- Handy ---------------------------------------------------------- */
+@media (max-width: 560px) {
+  /* Auf dem Handy wird das Polster knapp. Die Einrueckung der
+     Unterabschnitte halbiert sich, damit der Text nicht in einer
+     Spalte von acht Zeichen endet. */
+  .ev-abschnitt[data-stufe="3"] { padding-left: 8px; }
+  .ev-punkt__zusatz { margin-left: 0; }
+  /* 44 px Tippziel -- dieselbe Vorgabe wie bei .ev-punkt__knopf. */
+  .ev-mehr__knopf, .ev-gruppe__kopf { min-height: 44px; }
+}
+
+/* ---- Starker Kontrast ----------------------------------------------- */
+@media (forced-colors: active) {
+  /* `color-mix` auf Systemfarben ergibt im Zwangsmodus nichts
+     Sichtbares -- deshalb echte Raender und Systemfarben. */
+  .ev-gabe, .ev-hinweise, .ev-mehr__knopf, .ev-gruppe__kopf {
+    border: 1px solid CanvasText;
+  }
+  .ev-gabe__coins { border: 1px solid CanvasText; }
+  .ev-abschnitt[data-stufe="3"] { border-left: 2px solid CanvasText; }
+  .ev-abschnitt__titel { color: CanvasText; }
+}
+
+/* ---- Weniger Bewegung ----------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  .ev-mehr__knopf, .ev-gruppe__kopf { transition: none; }
+}