/* Seite 47 – Gestaltung.
 *
 * Leitbild: ein Dossier, keine App. Der Name ist eine Seitenzahl, die Inhalte
 * sind Zitate aus Programmen – also Papier, Serifen in den Überschriften,
 * Haarlinien statt Kästen, viel Weißraum.
 *
 * Farbregel: Die Oberfläche ist bewusst unbunt. Jede Buntfarbe im deutschen
 * Politikkontext ist besetzt (Schwarz, Rot, Grün, Gelb, Blau, Magenta), eine
 * bunte Oberfläche würde also immer nach einer Partei aussehen. Farbe ist
 * deshalb reserviert für genau zwei Dinge: die eigene Wahl (grün/rot als
 * Richtung, nicht als Partei) und die Parteifarben NACH der Aufdeckung.
 *
 * Nur systemeigene Schriften, keine externen Fonts (Nicht-Ziel: Drittanbieter).
 * Georgia liegt auf Windows und macOS vor; die Kette endet bei generischem
 * serif, das Layout hängt an keiner einzelnen Schrift.
 */

:root {
  color-scheme: light;

  --papier: #ebe8e1;
  --flaeche: #f2f0ea;
  --flaeche-tief: #e2ded5;
  --linie: #cdc8bd;
  --linie-stark: #a19b8f;
  --text: #181817;
  --text-leise: #5a5750;
  --akzent: #181817;
  --akzent-text: #f2f0ea;
  --gut: #1f6b3a;
  --gut-grund: #dbe5d9;
  --schlecht: #93342f;
  --schlecht-grund: #eedcd7;
  --warnung: #7d6110;
  --ring: rgba(0, 0, 0, .22);

  --radius: 4px;
  --radius-klein: 3px;
  --spalte: 44rem;
  --schatten: 0 1px 1px rgba(24, 24, 23, .06), 0 6px 14px -9px rgba(24, 24, 23, .22), inset 0 0 22px rgba(24, 24, 23, .035);
  --schatten-hoch: 0 2px 4px rgba(24, 24, 23, .08), 0 14px 32px -18px rgba(24, 24, 23, .4);

  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tempo: 160ms cubic-bezier(.2, .7, .3, 1);
  --textur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 -.38'/%3E%3C/filter%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .28' numOctaves='2' seed='6' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -2'/%3E%3C/filter%3E%3Cfilter id='k' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 0 0 0 -.76'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.07'/%3E%3Crect width='100%25' height='100%25' filter='url(%23v)' opacity='0.08'/%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='0.22'/%3E%3C/svg%3E");
  --textur-blatt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 -.38'/%3E%3C/filter%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .28' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -2'/%3E%3C/filter%3E%3Cfilter id='k' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='14' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.7 0 0 0 -.76'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.045'/%3E%3Crect width='100%25' height='100%25' filter='url(%23v)' opacity='0.06'/%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='0.16'/%3E%3C/svg%3E");
  --raster: rgba(0, 0, 0, .26);
  --raster-hell: color-mix(in srgb, var(--text) 13%, transparent);
  --kopflinie: var(--text);
}
/* Hell ist der Standard, unabhaengig von der Systemeinstellung - so hat der
 * Nutzer es verlangt. Die dunkle Palette haengt deshalb nur noch an der
 * ausdruecklichen Wahl im Kopf (data-modus am Wurzelelement); den frueheren
 * Block fuer prefers-color-scheme gibt es nicht mehr. */
:root[data-modus="dunkel"] {
  color-scheme: dark;
  --papier: #121314;
  --flaeche: #191a1c;
  --flaeche-tief: #212225;
  --linie: #2d2f32;
  --linie-stark: #45484d;
  --text: #e7e5e0;
  --text-leise: #9c9a95;
  --akzent: #e7e5e0;
  --akzent-text: #121314;
  --gut: #6db58b;
  --gut-grund: #16251c;
  --schlecht: #e08f88;
  --schlecht-grund: #2b1b1a;
  --warnung: #d3b25e;
  --ring: rgba(255, 255, 255, .32);
  --schatten: 0 1px 1px rgba(0, 0, 0, .45), 0 8px 18px -10px rgba(0, 0, 0, .75), inset 0 0 22px rgba(255, 255, 255, .018);
  --schatten-hoch: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 40px -20px rgba(0, 0, 0, .9);
  --textur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 -.38'/%3E%3C/filter%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .28' numOctaves='2' seed='6' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3.2 0 0 0 -2'/%3E%3C/filter%3E%3Cfilter id='k' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.7 0 0 0 -.76'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.035'/%3E%3Crect width='100%25' height='100%25' filter='url(%23v)' opacity='0.025'/%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='0.05'/%3E%3C/svg%3E");
  --textur-blatt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 -.38'/%3E%3C/filter%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .28' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3.2 0 0 0 -2'/%3E%3C/filter%3E%3Cfilter id='k' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='14' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.7 0 0 0 -.76'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.02'/%3E%3Crect width='100%25' height='100%25' filter='url(%23v)' opacity='0.02'/%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='0.035'/%3E%3C/svg%3E");
  --raster: rgba(0, 0, 0, .32);
  --raster-hell: color-mix(in srgb, var(--text) 6%, transparent); --kopflinie: #5d5e61;
}
/* Der Knopf traegt das Symbol des Modus, in den er wechselt. */
.modus {
  font: inherit;
  font-size: .95rem;
  line-height: 1;
  background: none;
  border: 1px solid var(--linie);
  border-radius: 999px;
  color: var(--text-leise);
  cursor: pointer;
  padding: .35rem .5rem;
  min-width: 2rem;
  transition: border-color var(--tempo), color var(--tempo);
}
.modus:hover { border-color: var(--text-leise); color: var(--text); }
@media (pointer: coarse) { .modus { min-height: 2.4rem; min-width: 2.4rem; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  color: var(--text);
  font: 400 16.5px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Papier statt Bildschirmflaeche. Die Textur liegt direkt auf dem Grund,
 * nicht mehr als Schleier ueber allem: So hat jede Flaeche ihr eigenes Blatt
 * (siehe TEXTUR am Ende), statt dass ein gemeinsames Korn alles gleich
 * macht. Erzeugt aus SVG-Rauschen, als Daten-URI - kein Bild, kein Netz. */
body { background-image: var(--textur); }
body > * { position: relative; z-index: 1; }
.huelle {
  width: 100%;
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 0 1.25rem;
}
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: 4px;
}
/* ---------- Kopf ---------- */

/* Doppellinie unter dem Kopf: die Titelzeile einer Zeitung. Der Kopf steht
 * auf dem Papier, nicht als hellerer Streifen darueber. */
.kopf {
  background: color-mix(in srgb, var(--papier) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 3px double var(--linie-stark);
  position: sticky;
  top: 0;
  z-index: 15;
}
.kopf-inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
}
.marke {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
/* Die Seitenzahl als Marke: gesetzt wie eine Paginierung im Buch. */
.marke-zahl {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--akzent-text);
  background: var(--akzent);
  border-radius: 4px;
  padding: .15rem .4rem;
  font-variant-numeric: tabular-nums;
}
.schritte { display: flex; align-items: center; gap: .1rem; }
.schritte[aria-hidden="true"] { display: none; }
.schritt {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-leise);
  padding: .2rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: color var(--tempo), background var(--tempo);
}
.schritt::before {
  content: "";
  width: .4rem; height: .4rem;
  border-radius: 50%;
  background: var(--linie-stark);
  transition: background var(--tempo), transform var(--tempo);
}
.schritt--erledigt { color: var(--text); }
.schritt--erledigt::before { background: var(--text-leise); }
.schritt--aktiv { color: var(--text); background: var(--flaeche-tief); }
.schritt--aktiv::before { background: var(--text); transform: scale(1.3); }
/* Fortschrittsband unter dem Kopf: zeigt die Fragen, nicht die Phasen. */
.band {
  height: 2px;
  background: var(--linie);
  overflow: hidden;
}
.band[hidden] { display: none; }
.band-fuell {
  height: 100%;
  width: 0;
  background: var(--text);
  transition: width 320ms cubic-bezier(.2, .7, .3, 1);
}
main { padding: 2.25rem 0 4rem; flex: 1 0 auto; }
/* ---------- Typografie ---------- */

h1 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.015em;
  margin: 0 0 .7rem;
  text-wrap: balance;
}
h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 2.75rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--linie);
}
h3 { font-size: 1rem; margin: 0; font-weight: 650; }
.fliess { color: var(--text-leise); margin: 0 0 1.35rem; max-width: 38rem; }
.fliess--klein { font-size: .875rem; line-height: 1.55; }
/* Überzeile: kleine Versalien, wie die Rubrik über einem Artikel. */
.fortschritt {
  font-size: .72rem;
  font-weight: 650;
  color: var(--text-leise);
  margin: 0 0 .55rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.hinweis {
  min-height: 1.3rem;
  font-size: .875rem;
  color: var(--schlecht);
  margin: .6rem 0;
}
.hinweis:empty { min-height: 0; margin: 0; }
/* ---------- Karten ---------- */

.liste { display: flex; flex-direction: column; gap: .9rem; }
/* Ein Kasten in der Zeitung ist ein Rahmen, keine hellere Flaeche mit
 * Schatten. Die Flaeche liegt deshalb nur einen Hauch ueber dem Papier;
 * getrennt wird mit der Linie. */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  padding: 1.15rem;
  box-shadow: var(--schatten);
  transition: box-shadow var(--tempo), border-color var(--tempo), opacity var(--tempo);
}
.karte--start { padding: 1.75rem; }
.karte--aus { opacity: .48; box-shadow: none; }
.karte--aufdeckung { text-align: center; padding: 2.5rem 1.25rem; }
/* ---------- Startseite ---------- */

.hero { margin-bottom: 2rem; }
.hero h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 2.9rem); margin-bottom: .9rem; }
.hero-lead {
  font-size: 1.075rem;
  line-height: 1.55;
  color: var(--text-leise);
  max-width: 34rem;
  margin: 0;
}
/* Der Ablauf in drei Schritten – nimmt dem Einstieg die Erklärungslast. */
.ablauf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.ablauf-schritt {
  background: var(--flaeche);
  padding: 1.1rem 1rem;
}
.ablauf-nr {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--linie-stark);
  line-height: 1;
  margin-bottom: .5rem;
}
.ablauf-titel { display: block; font-weight: 650; font-size: .9rem; margin-bottom: .2rem; }
.ablauf-text { display: block; font-size: .82rem; color: var(--text-leise); line-height: 1.45; }
/* ---------- Formulare ---------- */

.label {
  display: block;
  font-size: .72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-leise);
  margin-bottom: .45rem;
}
.feld {
  width: 100%;
  padding: .8rem .85rem;
  font: inherit;
  color: inherit;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  transition: border-color var(--tempo), box-shadow var(--tempo);
}
.feld:hover { border-color: var(--text-leise); }
.feld:focus { border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent); outline: none; }
select.feld {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
  /* Pfeil als Verlauf statt als Bild oder SVG-Datei. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .85rem) 55%;
  background-size: .3rem .3rem, .3rem .3rem;
  background-repeat: no-repeat;
}
.knopf {
  font: inherit;
  font-size: .95rem;
  font-weight: 650;
  padding: .75rem 1.35rem;
  border-radius: var(--radius-klein);
  border: 1px solid var(--akzent);
  background: var(--flaeche);
  color: var(--text);
  cursor: pointer;
  min-height: 2.9rem;
  transition: background var(--tempo), color var(--tempo), border-color var(--tempo),
              transform var(--tempo), box-shadow var(--tempo);
}
.knopf:hover { box-shadow: var(--schatten); }
.knopf:active { transform: translateY(1px); }
.knopf--haupt {
  background: var(--akzent);
  color: var(--akzent-text);
  box-shadow: var(--schatten);
}
.knopf--haupt:hover { box-shadow: var(--schatten-hoch); }
.knopf--still { border-color: var(--linie-stark); color: var(--text); }
.knopf--still:hover { border-color: var(--text-leise); }
.knopf[disabled] {
  opacity: .4;
  cursor: default;
  box-shadow: none;
  transform: none;
}
.navi {
  display: flex;
  gap: .75rem;
  justify-content: space-between;
  margin-top: 1.75rem;
  flex-wrap: wrap;
}
.navi .knopf { flex: 1 1 auto; }
.link {
  font: inherit;
  font-size: .82rem;
  font-weight: 550;
  background: none;
  border: 0;
  padding: .3rem 0;
  color: var(--text-leise);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--linie-stark);
  cursor: pointer;
  transition: color var(--tempo), text-decoration-color var(--tempo);
  align-self: flex-start;
}
.link:hover { color: var(--text); text-decoration-color: var(--text); }
/* ---------- Themen und Gewichtung ---------- */

.thema-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}
.thema-titel { font-weight: 650; font-size: 1.02rem; }
.gewicht-wert {
  font-size: .72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-leise);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* ---------- Tipp vor dem Durchgang ----------
 * Bewusst nur Text, keine Parteifarben und keine Logos: Farbe gehört zur
 * Aufdeckung, und ein Farbschema an dieser Stelle wäre ein Marker, den das
 * Auge in den Aussagen wiederzuerkennen glaubt.
 */
.tipp-liste {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.4rem 0;
}
/* Zwei Fragen auf einer Seite brauchen je eine eigene Ueberschrift - sonst
 * sieht die zweite Knopfreihe aus wie eine Fortsetzung der ersten. */
.tipp-frage {
  margin: 1.8rem 0 0;
  font-family: var(--serif);
  font-size: 1.12rem;
}
.tipp-frage + .tipp-liste { margin-top: .7rem; }
.tipp-knopf {
  font-family: var(--sans);
  font-size: .95rem;
  padding: .65rem 1.05rem;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--tempo), background var(--tempo);
}
.tipp-knopf:hover { border-color: var(--text); }
.tipp-knopf--offen { color: var(--text-leise); font-style: italic; }
.tipp-knopf--aktiv {
  color: var(--akzent-text);
  background: var(--akzent);
  border-color: var(--akzent);
}
.karte--tipp {
  border-left: 3px solid var(--linie-stark);
  margin-top: 1rem;
}
.tipp-zeile {
  margin: 0 0 .5rem;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-leise);
}
/* ---------- Wer war wer? ---------- */
.tipp-liste--eng { gap: .4rem; margin: .9rem 0 0; }
.tipp-knopf--klein { font-size: .82rem; padding: .45rem .8rem; }
.karte--zuordnung {
  border-left: 3px solid var(--linie);
  transition: border-color var(--tempo);
}
.karte--zuordnung-fertig { border-left-color: var(--text-leise); }
.zuordnung-kopf {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .8rem;
}
.zuordnung-marke {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--akzent-text);
  background: var(--akzent);
  border-radius: 50%;
}
.zuordnung-zahl {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.zuordnung-nr {
  margin: 0;
  font-size: .74rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
.zuordnung-label {
  margin: 0 0 .4rem;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.zuordnung-belege { margin-bottom: .3rem; }
.zuordnung-text {
  margin: 0 0 .45rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-leise);
}
/* Schon anderswo vergeben: nicht gesperrt, nur zurueckgenommen. Ein Klick
 * nimmt die Partei dem anderen Buchstaben weg - das ist bequemer als eine
 * Fehlermeldung und macht das Ausschlussverfahren erst benutzbar. */
.tipp-knopf--weg {
  opacity: .32;
  text-decoration: line-through;
}
/* Der Wortlaut hinter der vereinfachten Fassung. Klein und eingerückt: er
 * ist Beleg, nicht Hauptsache - wer ihn aufklappt, weiß, was er sucht. */
.wert-zitat-block { margin: .25rem 0 .1rem; }
.link--zitat {
  font-size: .76rem;
  color: var(--text-leise);
}
.link--zitat:hover { color: var(--text); }
.wert-zitat {
  margin: .4rem 0 0;
  padding-left: .8rem;
  border-left: 1px solid var(--linie);
  font-family: var(--serif);
  font-size: .88rem;
  line-height: 1.6;
  color: var(--text-leise);
}
/* Die Einordnung am Ende: gedeckt, aber nicht versteckt. */
.karte--schluss {
  margin-top: 2rem;
  background: var(--flaeche-tief);
  box-shadow: none;
}
/* ---------- Gegenprobe ----------
 * Die einzige Stelle, an der eigene Zustimmung und abgelehntes Etikett
 * direkt nebeneinanderstehen. Deshalb hebt sie sich ab - aber ohne Farbe,
 * die waere hier eine Wertung.
 */
.karte--gegenprobe {
  border-left: 3px solid var(--text-leise);
  margin-top: 1rem;
}
.gegenprobe-satz {
  margin: .9rem 0 0;
  padding-left: .9rem;
  border-left: 1px solid var(--linie);
}
.gegenprobe-frage {
  margin: 0 0 .25rem;
  font-size: .76rem;
  color: var(--text-leise);
}
.gegenprobe-text {
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
}
/* Der geschlagene Satz steht kleiner und zurueckgenommen: er ist der
 * Vergleichsmassstab, nicht die Aussage. Gleich gross gesetzt lasen sich
 * beide wie zwei Zitate ohne Rangfolge. */
.gegenprobe-gegen {
  margin: .5rem 0 0;
  padding-left: .7rem;
  border-left: 2px solid var(--linie);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-leise);
}
.karte--treffer { border-left: 3px solid var(--linie-stark); margin-top: 1rem; }
.treffer-zahl {
  margin: 0;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.aufloesung {
  margin-top: 1rem;
  border-top: 1px solid var(--linie);
}
.aufloesung-zeile {
  padding: .7rem 0;
  border-bottom: 1px solid var(--linie);
}
.aufloesung-zeile:last-child { border-bottom: 0; }
.aufloesung-marke {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0;
  font-size: .88rem;
  color: var(--schlecht);
}
.aufloesung-buchstabe {
  flex: 0 0 auto;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
}
.aufloesung-zeile--gut .aufloesung-marke { color: var(--gut); }
.fortschritt--offen { color: var(--warnung); }
@media (pointer: coarse) { }
/* ---------- Ergebnis ---------- */

/* Die erste Zeile bekommt Gewicht: sie ist die Antwort auf alles davor. */
.karte--sieger {
  padding: 1.6rem;
  border-color: var(--linie-stark);
  box-shadow: var(--schatten-hoch);
}
.sieger-zeile {
  font-size: .72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-leise);
  margin: 0 0 .5rem;
}
.sieger-name {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.sieger-name + .balken + .sieger-name { margin-top: 1.1rem; }
.sieger-wert {
  font-variant-numeric: tabular-nums;
  color: var(--text-leise);
  font-size: .95rem;
  font-family: var(--sans);
  font-weight: 600;
  margin-left: auto;
}
.karte--rang {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .55rem .8rem;
}
.rang-nr {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
  min-width: 1.2rem;
}
.rang-wert { font-weight: 700; font-variant-numeric: tabular-nums; }
.balken {
  position: relative;
  grid-column: 1 / -1;
  height: 8px;
  background: var(--flaeche-tief);
  border-radius: 4px;
  overflow: hidden;
}
/* Die Muenzwurflinie, wie bei den Saeulen im Spiel. */
.balken::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--linie-stark);
}
.balken-fuell {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--ring);
  transition: width 700ms cubic-bezier(.2, .8, .25, 1),
              left 700ms cubic-bezier(.2, .8, .25, 1),
              right 700ms cubic-bezier(.2, .8, .25, 1);
}
.partei-marke { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
.partei-punkt {
  width: .8rem; height: .8rem;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px var(--ring);
}
/* Logos kommen im Original; eine helle Unterlage haelt dunkle Logos im Dunkelmodus sichtbar. */
/* Feste Breite fuer jedes Logo, Logo mittig darin: Logos sind verschieden
 * breit, und mit width:auto begann jeder Parteiname an einer anderen Stelle.
 * So steht jeder Name auf derselben Kante. 5.25rem passt das breiteste
 * (SPD, Seitenverhaeltnis 4,2) bei voller Hoehe. */
.partei-logo { height: 1.25rem; width: 5.25rem; flex: none; object-fit: contain; object-position: center; background: #fff; padding: .12rem .25rem; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--ring); box-sizing: content-box; }
.partei-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.themen-werte { display: flex; flex-direction: column; gap: .5rem; margin-top: .9rem; }
.wert-kopf { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.wert-zahl { font-variant-numeric: tabular-nums; color: var(--text-leise); font-size: .9rem; }
.wert-zeile {
  border-top: 1px solid var(--linie);
  padding-top: .7rem;
  margin-top: .7rem;
}
.wert-aussage { font-size: .875rem; color: var(--text-leise); margin: .35rem 0 .15rem; }
.fragen-liste { margin-top: 1.25rem; }
.frage-block { margin-top: 1.25rem; }
.frage-text {
  margin: 0;
  font-size: .9rem;
  font-weight: 650;
  color: var(--text);
}
.karte--aufdeckung .knopf { margin: .4rem .25rem 0; }
.karte--aufdeckung .fliess { max-width: 30rem; }
/* ---------- Fuß ---------- */

.fuss {
  border-top: 3px double var(--linie-stark);
  background: transparent;
  padding: 1.5rem 0;
  font-size: .78rem;
  color: var(--text-leise);
}
.fuss p { margin: 0; max-width: 34rem; }
/* ---------- Quellenanzeige (erst nach der Aufdeckung) ---------- */

.quelle-schicht {
  position: fixed; inset: 0; z-index: 30;
  background: rgba(14, 15, 16, .74);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.quelle-rahmen {
  background: var(--flaeche);
  border-radius: var(--radius);
  width: 100%; max-width: 62rem; max-height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--schatten-hoch);
}
.quelle-kopf {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .95rem; border-bottom: 1px solid var(--linie);
}
.quelle-titel { font-weight: 650; font-size: .88rem; flex: 1 1 auto; min-width: 0; }
.quelle-zu { padding: .45rem .9rem; min-height: 2.4rem; font-size: .85rem; }
.quelle-buehne { overflow: auto; padding: .95rem; background: var(--flaeche-tief); }
.quelle-seite { position: relative; margin: 0 auto; background: #fff; box-shadow: var(--schatten); }
.quelle-seite canvas { display: block; }
.quelle-treffer {
  position: absolute;
  background: rgba(255, 214, 0, .42);
  outline: 1px solid rgba(180, 140, 0, .55);
  border-radius: 2px;
  pointer-events: none;
}
.quelle-stand { margin: 0; padding: 1.75rem .5rem; text-align: center; color: var(--text-leise); }
.quelle-stand--fehler { color: var(--warnung); }
/* ---------- Bewegung ---------- */

.einblenden { animation: einblenden 260ms cubic-bezier(.2, .7, .3, 1) both; }
@keyframes einblenden {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
/* ============================================================
   DAS SPIEL
   ============================================================
   Zwei Saetze, einer gewinnt. Die Gestaltung hat genau eine Aufgabe: den
   Blick auf die beiden Karten zwingen und danach das Feld sichtbar
   umsortieren. Alles andere tritt zurueck.

   Farbe bleibt auch hier verboten (CLAUDE.md Punkt 8) - die Bewegung
   uebernimmt, was sonst Farbe leisten wuerde. Gruen erscheint nur an der
   eigenen Wahl, und zwar erst nach dem Klick.
   ============================================================ */

.spiel { max-width: 52rem; margin: 0 auto; }
.spiel-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.spiel-thema {
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.spiel-uhr::before { content: "b7"; margin: 0 .45em; }
.spiel-zaehler {
  font-family: var(--serif);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-leise);
}
/* Der Fortschritt sitzt direkt ueber den Karten, wo der Blick ohnehin ist. */
.spiel-bogen {
  height: 3px;
  border-radius: 2px;
  background: var(--linie);
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.spiel-bogen-fuell {
  height: 100%;
  width: 0;
  background: var(--text);
  transition: width 520ms cubic-bezier(.2, .8, .2, 1);
}
.spiel-frage {
  margin: 0 0 1.3rem;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}
/* ---------- Die beiden Karten ---------- */

.duell-buehne {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: .9rem;
}
.duell-karte {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 11rem;
  padding: 1.6rem 1.5rem 1.5rem;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(.2, .8, .2, 1),
              box-shadow 200ms ease, border-color 160ms ease;
  animation: karte-rein 420ms cubic-bezier(.2, .8, .2, 1) backwards;
}
.duell-karte--links { animation-delay: 40ms; }
.duell-karte--rechts { animation-delay: 130ms; }
@keyframes karte-rein {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.duell-karte:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: var(--linie-stark);
  box-shadow: var(--schatten-hoch);
}
.duell-karte:active:not(:disabled) { transform: translateY(-1px) scale(.995); }
/* Die Ziffer als Tastenkappe: sie nummeriert nicht nur, sie sagt zugleich,
 * welche Taste dasselbe tut. Eine eigene Hinweiszeile darunter erledigt sich
 * damit - und die stand ohnehin an der Stelle, an der niemand hinsieht. */
.duell-nr {
  position: absolute;
  top: .7rem;
  left: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 650;
  color: var(--text-leise);
  background: var(--flaeche-tief);
  border: 1px solid var(--linie);
  border-bottom-width: 2px;
  border-radius: 4px;
  transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
}
.duell-karte:hover:not(:disabled) .duell-nr {
  color: var(--text);
  border-color: var(--linie-stark);
}
.duell-karte--sieg .duell-nr {
  color: var(--gut);
  border-color: var(--gut);
  background: transparent;
}
.duell-satz {
  margin: .35rem 0 0;
  font-size: clamp(.95rem, .9rem + .25vw, 1.05rem);
  line-height: 1.62;
}
/* Nach dem Klick: der Gewinner haelt kurz inne und leuchtet, der Verlierer
 * faellt weg. Beides zusammen ist die Quittung fuer den Klick - ohne sie
 * fuehlt sich die Entscheidung folgenlos an. */
.duell-karte--sieg {
  border-color: var(--gut);
  background: var(--gut-grund);
  animation: karte-sieg 460ms cubic-bezier(.2, .8, .2, 1) forwards;
  z-index: 2;
}
@keyframes karte-sieg {
  0% { transform: none; }
  35% { transform: scale(1.035); box-shadow: var(--schatten-hoch); }
  100% { transform: scale(1.01); }
}
.duell-karte--raus {
  animation: karte-raus 420ms cubic-bezier(.4, 0, .7, .3) forwards;
  pointer-events: none;
}
@keyframes karte-raus {
  to { opacity: 0; transform: translateY(26px) scale(.93); filter: saturate(0); }
}
.duell-karte:disabled { cursor: default; }
.duell-gegen {
  align-self: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: .9rem;
  color: var(--text-leise);
  padding: 0 .2rem;
}
/* Der Stoss am Klickort. Bewusst unbunt und kurz: er soll den Klick
 * quittieren, nicht ihn kommentieren. */
.stoss {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--gut);
  opacity: .32;
  pointer-events: none;
  animation: stoss-welle 600ms cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes stoss-welle {
  from { transform: scale(1); opacity: .32; }
  to { transform: scale(46); opacity: 0; }
}
.duell-karte { overflow: hidden; }
/* ---------- Der fliegende Marker ----------
 * Er traegt den Buchstaben des Kandidaten von der gewaehlten Karte hinunter
 * ins Feld. Das ist der Kern der Rueckmeldung: Der Nutzer sieht, WEM er
 * gerade recht gegeben hat, ohne zu erfahren, wer das ist.
 */
/* Der Marker trägt keinen Buchstaben mehr: er ist der Punkt selbst, nicht
 * sein Empfänger. Deshalb klein und rund statt Kürzel im Kreis. */
.marker {
  position: fixed;
  z-index: 90;
  width: 1.1rem;
  height: 1.1rem;
  margin: -.55rem 0 0 -.55rem;
  background: var(--akzent);
  border-radius: 50%;
  box-shadow: var(--schatten-hoch);
  pointer-events: none;
  transition: transform 420ms cubic-bezier(.35, .9, .3, 1), opacity 420ms ease-in;
}
/* ---------- Das Feld der verdeckten Kandidaten ---------- */

.feld-huelle {
  position: sticky;
  bottom: 0;
  margin-top: 1.6rem;
  padding: .9rem 0 .7rem;
  border-top: 1px solid var(--linie);
  background: linear-gradient(to bottom, transparent, var(--papier) 22%);
  backdrop-filter: blur(4px);
}
/* Sieben Saeulen nebeneinander. Sie tauschen die Plaetze, sobald sich die
 * Rangfolge aendert - das Umsortieren ist der Moment, den man sehen soll,
 * und waagerecht braucht es ein Siebtel der Hoehe einer Zeilenliste. */
.feld {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(.35rem, 1.4vw, .9rem);
}
.chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  width: clamp(2.4rem, 8vw, 3.4rem);
  will-change: transform;
}
.chip--leer { opacity: .38; }
.chip-saeule {
  position: relative;
  width: 100%;
  height: 4.4rem;
  border-radius: var(--radius-klein);
  background: var(--flaeche-tief);
  box-shadow: inset 0 0 0 1px var(--linie);
  overflow: hidden;
}
/* Die Muenzwurflinie. Sie ist der Bezugspunkt, von dem aus alle Saeulen
 * wachsen - ohne sie waere "55 %" eine Zahl ohne Massstab. */
.chip-saeule::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--linie-stark);
  opacity: .8;
}
.chip-fuell {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50%;
  height: 0;
  border-radius: 3px;
  background: var(--text);
  transition: height 520ms cubic-bezier(.2, .8, .2, 1),
              bottom 520ms cubic-bezier(.2, .8, .2, 1),
              top 520ms cubic-bezier(.2, .8, .2, 1),
              background 260ms ease;
}
.chip-marke {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.chip-quote {
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-leise);
  line-height: 1;
}
/* Die Welle: das ganze Feld quittiert, nicht eine einzelne Säule. Genau das
 * ist der Punkt - ein Aufleuchten an einer Stelle war der Zeigefinger auf
 * die Zuordnung Satz->Kandidat. */
.feld--welle { animation: feld-welle 620ms cubic-bezier(.2, .8, .2, 1); }
@keyframes feld-welle {
  0% { box-shadow: inset 0 0 0 0 transparent; }
  30% { box-shadow: inset 0 0 0 1px var(--gut); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}
/* ---------- Haltepunkte: Zwischenstand und Finale ----------
 * Beide unterbrechen die Reihe der Duelle. Sie duerfen deshalb gross und
 * ruhig sein - viel Weissraum, eine einzige Aussage, ein Knopf. Wer hier
 * anhaelt, soll merken, dass etwas passiert ist.
 */
.halt {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
  padding-top: 1rem;
}
.halt-marke {
  margin: 0 0 .4rem;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-leise);
  animation: halt-rein 460ms cubic-bezier(.2, .8, .2, 1) backwards;
}
.halt-titel {
  margin: 0 0 .6rem;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  animation: halt-rein 520ms cubic-bezier(.2, .8, .2, 1) 60ms backwards;
}
@keyframes halt-rein {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
/* Die Notiz steht nicht immer - deshalb traegt sie den Abstand selbst, statt
 * ihn dem Titel zu ueberlassen. Sonst klebte das Feld am Titel, sobald sie
 * ausfaellt. */
.halt-notiz { margin: 0 0 1.6rem; min-height: 1.2rem; }
.halt-notiz--an {
  font-size: .92rem;
  color: var(--text-leise);
  animation: halt-rein 520ms cubic-bezier(.2, .8, .2, 1) 180ms backwards;
}
.feld-huelle--halt {
  position: static;
  border-top: 0;
  background: none;
  backdrop-filter: none;
  padding: 0 0 1.4rem;
}
.feld--gross .chip { width: clamp(3rem, 10vw, 4.4rem); }
.feld--gross .chip-saeule { height: clamp(5.5rem, 17vw, 8.5rem); }
.feld--gross .chip-marke { font-size: 1.35rem; }
.feld--gross .chip-quote { font-size: .78rem; }
.wette {
  margin: .6rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
}
.wette-frage {
  margin: 0 0 .2rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.7rem);
}
.wette .tipp-liste { justify-content: center; margin-top: 1rem; }
.wette .fliess { margin-left: auto; margin-right: auto; }
/* ---------- Die Aufdeckung ----------
 * Dieselben Saeulen wie im Spiel, nur gross und mit Namen. Die Verwandlung
 * ist der Sinn der Sache: Wer hier eine neue Liste baute, verschenkte den
 * einzigen Moment, auf den fuenf Minuten hingearbeitet haben.
 */
.auf-buehne {
  margin: 1.6rem 0 2.4rem;
  padding: 1.6rem .6rem 1.2rem;
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.feld--auf { align-items: flex-end; gap: clamp(.3rem, 1.2vw, .8rem); }
.feld--auf .chip {
  position: relative;
  width: clamp(2.6rem, 11vw, 5rem);
  padding-top: 1.4rem;
}
.feld--auf .chip-saeule { height: clamp(6.5rem, 21vw, 11rem); }
.chip-rang {
  position: absolute;
  top: 0;
  font-family: var(--serif);
  font-size: .8rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}
.chip-name {
  /* Feste Hoehe fuer zwei Zeilen. Ohne sie waere die Kachel bei "Die Linke"
   * hoeher als bei "FDP" - und weil die Saeulen am unteren Rand ausgerichtet
   * sind, laege die Muenzwurflinie dann nicht bei allen auf derselben Hoehe.
   * Genau dieser Vergleich ist aber der Zweck der Linie. */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 2.1em;
  font-size: clamp(.6rem, 1.7vw, .78rem);
  line-height: 1.05;
  text-align: center;
  color: var(--text);
  overflow-wrap: anywhere;
}
/* Der erste Platz bekommt mehr Gewicht - ohne Farbe, die gehoert der
 * Partei. Groessere Zahl, kraeftigerer Name, ein Ring um die Saeule. */
.feld--auf .chip:first-child .chip-saeule { box-shadow: inset 0 0 0 1.5px var(--linie-stark); }
.feld--auf .chip:first-child .chip-name { font-weight: 700; }
.feld--auf .chip:first-child .chip-quote { font-size: clamp(1rem, 3vw, 1.3rem); }
.feld--auf .chip:first-child .chip-rang { color: var(--text); font-weight: 700; }
/* Verdeckt: der Buchstabe steht, der Name ist noch nicht da. */
.chip--verdeckt .chip-name,
.chip--verdeckt .chip-quote { opacity: 0; }
.chip--verdeckt .chip-fuell { background: var(--linie-stark); }
/* Aufgedeckt: die Saeule kippt einmal kurz, der Buchstabe weicht dem Namen. */
.chip--auf .chip-saeule { animation: auf-kippen 520ms cubic-bezier(.2, .8, .2, 1); }
.chip--auf .chip-marke { animation: auf-marke 520ms ease forwards; }
.chip--auf .chip-name,
.chip--auf .chip-quote { animation: auf-name 460ms ease 180ms backwards; opacity: 1; }
.chip--auf .chip-fuell { box-shadow: inset 0 0 0 1px var(--ring); }
@keyframes auf-kippen {
  0% { transform: rotateX(0deg); }
  45% { transform: rotateX(-16deg) scale(1.04); }
  100% { transform: none; }
}
@keyframes auf-marke {
  0% { opacity: 1; transform: none; }
  40% { opacity: 0; transform: translateY(-6px) scale(.8); }
  100% { opacity: .35; transform: none; }
}
@keyframes auf-name {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.feld--auf .chip-marke { font-size: .8rem; color: var(--text-leise); }
.feld--auf .chip-quote {
  font-family: var(--serif);
  font-size: clamp(.85rem, 2.4vw, 1.05rem);
  color: var(--text);
}
/* ---------- Finale ---------- */
.finale-titel {
  margin: 0 0 1.6rem;
  font-size: clamp(2.1rem, 1.4rem + 4vw, 3.6rem);
  letter-spacing: -.02em;
  animation: halt-rein 560ms cubic-bezier(.2, .8, .2, 1) 60ms backwards;
}
.finale-paar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.4rem);
  margin-bottom: 1.8rem;
}
.finale-marke {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.6rem, 12vw, 5.4rem);
  height: clamp(3.6rem, 12vw, 5.4rem);
  font-family: var(--serif);
  font-size: clamp(1.8rem, 1.2rem + 3vw, 2.8rem);
  font-weight: 700;
  color: var(--akzent-text);
  background: var(--akzent);
  border-radius: 50%;
  box-shadow: var(--schatten-hoch);
  animation: finale-marke 620ms cubic-bezier(.2, 1.2, .3, 1) backwards;
}
.finale-marke:first-child { animation-delay: 180ms; }
.finale-marke:last-child { animation-delay: 300ms; }
@keyframes finale-marke {
  from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; transform: none; }
}
.finale-gegen {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-leise);
  animation: halt-rein 400ms ease 420ms backwards;
}
/* Im Finale bekommt der Kopf eine andere Marke - sonst unterscheidet sich
 * der Hoehepunkt in nichts von Duell 12. */
.spiel-thema--finale {
  color: var(--text);
  font-weight: 700;
  letter-spacing: .18em;
}
.spiel--finale .spiel-bogen-fuell { background: var(--gut); }
/* Der Fuehrende bekommt eine Kante, keine Farbe: welche Partei das ist,
 * steht noch nicht fest, und eine Buntfarbe waere hier eine Behauptung. */
.chip--fuehrt .chip-saeule { box-shadow: inset 0 0 0 1.5px var(--text-leise); }
.chip--fuehrt .chip-marke { color: var(--text); }
.wett-zeile {
  margin: .35rem 0 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--schlecht);
}
.wett-zeile--gut { color: var(--gut); }
/* ---------- Serie ----------
 * Erscheint erst ab drei gleichen Treffern in Folge. Sie wertet keine
 * Meinung, sie stellt eine Frage: "Wer ist eigentlich dieses C?" Genau die
 * Frage loest die Aufdeckung spaeter ein.
 */
.spiel-serie {
  display: block;
  min-height: 1.4rem;
  margin: .9rem 0 0;
  text-align: center;
  font-size: .82rem;
  color: var(--text-leise);
  opacity: 0;
  transition: opacity 240ms ease;
}
.spiel-serie--an { opacity: 1; animation: serie-rein 420ms cubic-bezier(.2, .8, .2, 1); }
@keyframes serie-rein {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}
/* Zurueck und Ueberspringen sind Nebenwege und sollen nicht wie das Ziel
 * aussehen - in voller Breite taten sie genau das. */
.navi--spiel { justify-content: center; gap: .6rem; margin-top: 1.6rem; }
.navi--spiel .knopf { flex: 0 0 auto; }
.knopf--klein { padding: .5rem 1rem; font-size: .82rem; }
/* ---------- Das Duell auf schmalen Geraeten ----------
 * Die entscheidende Anforderung: BEIDE Saetze muessen gleichzeitig im Bild
 * stehen. Ein Vergleich, fuer den man scrollen muss, ist keiner - man
 * erinnert den ersten Satz nicht mehr, waehrend man den zweiten liest.
 *
 * Gemessen auf 375 x 812: mit den Desktop-Groessen brauchte allein die erste
 * Karte 480 px, die zweite lag komplett unter dem Falz. Deshalb hier alles
 * enger - kleinere Schrift, dichterer Zeilenfall, schmalere Innenraender,
 * flacheres Feld. Zusammen kommen Kopf, Frage, zwei Karten und Feld auf rund
 * 640 px und passen auf jedes gaengige Telefon.
 */
@media (max-width: 44rem) {
  .duell-buehne {
    grid-template-columns: 1fr;
    gap: .45rem;
  }
  .duell-karte {
    min-height: 0;
    padding: .85rem .95rem .8rem;
    border-radius: var(--radius-klein);
  }
  .duell-satz {
    font-size: .88rem;
    line-height: 1.45;
  }
  .duell-nr {
    top: .35rem;
    left: .5rem;
    min-width: 1.1rem;
    height: 1.1rem;
    font-size: .62rem;
  }
  .duell-satz { margin-top: .25rem; }
  /* Der Trenner wird zur Haarlinie mit Wort - als Block kostete er 40 px,
   * die an den Karten fehlten. */
  .duell-gegen {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0;
  }
  .duell-gegen::before,
  .duell-gegen::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--linie);
  }
  .duell-gegen-text { font-size: .78rem; }
  .spiel-frage {
    font-size: 1.05rem;
    line-height: 1.28;
    margin-bottom: .8rem;
  }
  .spiel-bogen { margin-bottom: .9rem; }
  .spiel-serie { min-height: 1.1rem; margin-top: .5rem; font-size: .76rem; }
  .feld-huelle { margin-top: .8rem; padding: .55rem 0 .45rem; }
  .chip-saeule { height: 2.6rem; }
  .chip-marke { font-size: .82rem; }
  .chip-quote { font-size: .62rem; }
  .chip { gap: .18rem; }
  /* Zurueck und Ueberspringen sind Nebenwege. In voller Breite kosteten sie
   * 200 px, die der Vergleich braucht - hier stehen sie klein nebeneinander. */
  .navi--spiel {
    margin-top: .7rem;
    flex-wrap: nowrap;
    gap: .5rem;
  }
  .navi--spiel .knopf {
    flex: 0 1 auto;
    padding: .35rem .9rem;
    font-size: .74rem;
    min-height: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
/* ---------- Bedienung mit dem Finger ----------
 * Zwei getrennte Fragen: wie schmal ist es (max-width) und wird mit dem
 * Finger bedient (pointer: coarse). Ein schmales Fenster am Rechner soll
 * keine Fingerflächen bekommen, ein Tablet in Querlage aber schon.
 */
.knopf, .link, .tipp-knopf, .thema-aus, .duell-karte { touch-action: manipulation; }
@media (pointer: coarse) {
  .link { padding: .6rem 0; min-height: 2.75rem; }
  .quelle-zu { min-height: 2.75rem; }
  .kopf .link, .quelle-kopf .link { min-height: 2.5rem; display: inline-flex; align-items: center; }
  .karte:hover { box-shadow: var(--schatten); }
}
/* ---------- Schmale Fenster ---------- */

@media (max-width: 40rem) {
  .ablauf { grid-template-columns: 1fr; }
  .ablauf-schritt { display: flex; gap: .8rem; align-items: baseline; padding: .9rem 1rem; }
  .ablauf-nr { margin-bottom: 0; font-size: 1.15rem; }
  /* Die Beschriftungen der Phasen kosten auf dem Handy mehr Platz als sie
   * einbringen; das Fortschrittsband trägt die Information weiter. */
  .schritte .schritt { padding: .2rem .3rem; }
  .schritte .schritt-text { display: none; }
  .schritte .schritt--aktiv .schritt-text { display: inline; }
}
@media (max-width: 30rem) {
  main { padding: 1.5rem 0 3rem; }
  .huelle { padding: 0 .9rem; }
  .karte { padding: 1rem; }
  .karte--start { padding: 1.2rem; }
  /* Auf ganz schmalen Geraeten stapeln sich die Knoepfe - ausser in der
   * Spielansicht: dort sind Zurueck und Ueberspringen Nebenwege und
   * duerfen keine zwei vollen Zeilen kosten, die dem Vergleich fehlen. */
  .navi:not(.navi--spiel) .knopf { flex: 1 1 100%; }
  .kopf-inhalt { min-height: 3rem; }
  .thema-kopf { flex-wrap: wrap; }
  .sieger-name { flex-wrap: wrap; }
  .sieger-wert { margin-left: 0; width: 100%; }
}
@media (max-width: 34rem) {
  /* Vollbild-Viewer: die Bühne bekommt die restliche Höhe, damit senkrecht
   * und waagerecht in der Seite gescrollt werden kann statt im Rahmen. */
  .quelle-schicht { padding: 0; }
  .quelle-rahmen { max-height: 100%; border-radius: 0; }
  .quelle-buehne { flex: 1 1 auto; padding: .5rem; }
  .quelle-kopf { padding: .5rem .6rem; gap: .5rem; flex-wrap: wrap; }
  .quelle-titel { flex: 1 1 100%; font-size: .8rem; }
}
/* =====================================================================
 * TEXTUR: DIE ZEITUNG
 *
 * Die Farben allein reichten nicht - die Oberflaeche war zu glatt und zu
 * leer (Nutzerurteil: "zu minimalistisch"). Eine Zeitung ist dicht: Kopf
 * mit Doppellinie, Dachzeilen, Spaltenlinien, gerasterte
 * Grafiken. Alles davon kommt hier aus CSS, ohne Bilddatei und ohne
 * Buntfarbe; die Farbregel oben gilt unveraendert.
 *
 * Mit Absicht NICHT: Schraeglagen, Papierrisse, Klebeband. Das waere
 * Bastelbogen, nicht Zeitung, und es kostete Platz genau dort, wo auf dem
 * Telefon beide Saetze ins Bild muessen.
 * ===================================================================== */

/* ---------- Vignette: das Blatt dunkelt zum Rand hin nach ----------
 * Neutralgrau, nicht Sepia - der Sepiaschleier war der Grund fuer das
 * Braun, das der Nutzer abgelehnt hat. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 35%, transparent 55%, rgba(0, 0, 0, .07) 100%);
}
/* ---------- Der Zeitungskopf (nur Startseite) ---------- */
.zeitungskopf {
  margin: .4rem 0 2.2rem;
  text-align: center;
}
.zeitungskopf-titel {
  margin: 0;
  padding: .5rem 0 .35rem;
  border-top: 1px solid var(--text);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.6rem, 1.4rem + 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--text);
}
/* Dick-duenn unter dem Titel: die klassische Kopflinie. */
.zeitungskopf-zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: .45rem 0;
  border-top: 3px solid var(--kopflinie);
  border-bottom: 1px solid var(--text);
  box-shadow: 0 -5px 0 -4px var(--text);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
}
.zeitungskopf-zeile span:nth-child(2) { font-family: var(--serif); font-style: italic;
  text-transform: none; letter-spacing: 0; font-size: .82rem; }
@media (max-width: 40rem) {
  .zeitungskopf-zeile { justify-content: center; }
  .zeitungskopf-zeile span:first-child,
  .zeitungskopf-zeile span:last-child { display: none; }
}
/* ---------- Dachzeile und Rubrikmarke ---------- */
.dachzeile {
  margin: 1.4rem 0 .5rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);
}
/* Das kleine Druckquadrat vor jeder Rubrik: das Zeichen, mit dem Zeitungen
 * einen Abschnitt anmelden. Traegt keine Information, nur Halt fuers Auge. */
.dachzeile::before,
.spiel-thema::before,
.tipp-zeile::before,
.label::before,
.fortschritt::before {
  content: "";
  display: inline-block;
  width: .55em;
  height: .55em;
  margin-right: .5em;
  background: currentColor;
  vertical-align: .05em;
}
.spiel-thema, .tipp-zeile, .label, .fortschritt { color: var(--text); font-weight: 700; }
.spiel-thema--finale::before { background: var(--text); }
.hero-lead { font-family: var(--serif); color: var(--text); font-size: 1.12rem; line-height: 1.6; }
/* ---------- Ablauf als Zeitungsspalten ----------
 * Drei Spalten mit Spaltenlinien statt dreier Kaesten. */
.ablauf {
  gap: 0;
  background: transparent;
  border: 0;
  border-top: 3px solid var(--kopflinie);
  border-bottom: 1px solid var(--text);
  border-radius: 0;
}
.ablauf-schritt { background: transparent; padding: 1rem 1.1rem 1.1rem; }
.ablauf-schritt + .ablauf-schritt { border-left: 1px solid var(--linie-stark); }
.ablauf-nr { color: var(--text); font-size: 2rem; }
.ablauf-titel { font-family: var(--serif); font-size: 1rem; }
@media (max-width: 40rem) {
  .ablauf-schritt + .ablauf-schritt { border-left: 0; border-top: 1px solid var(--linie-stark); }
}
/* ---------- Ueberschriften als Rubrikkoepfe ---------- */
h2 {
  border-top: 3px solid var(--kopflinie);
  border-bottom: 1px solid var(--linie-stark);
  padding-top: .55rem;
}
/* ---------- Kaesten mit Kopflinie ----------
 * Wie ein Kasten im Blatt: oben eine kraeftige Linie, sonst Haarlinie. */
.karte { border-top: 3px solid var(--kopflinie); }
/* ---------- Rasterpunkte ----------
 * Gedruckte Grafiken bestehen aus Punkten. Das Raster liegt als eigene
 * Schicht UEBER der Fuellung, nicht als Hintergrund - die Parteifarbe wird
 * in der Aufdeckung per style.background gesetzt, und diese Kurzform
 * loeschte jedes Hintergrundbild. */
.chip-fuell::before,
.balken-fuell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(circle, var(--raster) 30%, transparent 34%);
  background-size: 4px 4px;
  pointer-events: none;
}
/* Die leere Saeule als hellgraue Rasterflaeche, wie ein Tonwert im Druck. */
.chip-saeule {
  background-color: var(--flaeche-tief);
  background-image: radial-gradient(circle, var(--raster-hell) 28%, transparent 32%);
  background-size: 5px 5px;
}
.balken { border-radius: 0; }
.balken-fuell { border-radius: 0; }
/* ---------- Duellkarten ----------
 * Kopflinie wie ein Artikel, dazu ein Rasterverlauf aus der oberen rechten
 * Ecke - Tonwert, der ins Papier auslaeuft. Gleich auf beiden Karten, damit
 * er nichts ueber einen der beiden Saetze sagt. */
.duell-karte { border-top: 3px solid var(--kopflinie); }
.duell-karte::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--raster-hell) 26%, transparent 30%);
  background-size: 5px 5px;
  -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 42%);
  mask-image: linear-gradient(225deg, #000 0%, transparent 42%);
  pointer-events: none;
}
.duell-satz { position: relative; }
.duell-satz { font-family: var(--serif); font-size: 1.04rem; line-height: 1.55; }
/* "oder" als Zierzeile, wie ein Trenner zwischen zwei Meldungen. */
.duell-gegen-text::before,
.duell-gegen-text::after { content: " \2014 "; color: var(--linie-stark); font-style: normal; }
/* ---------- Kopf und Fuss ---------- */
.marke-zahl { border-radius: 0; }
.fuss p { font-family: var(--serif); font-style: italic; }
/* ---------- Jede Flaeche ein Blatt ----------
 * Eigene Maserung (anderer Zufallswert als die Seite), damit Karte und
 * Grund nicht dieselbe Struktur zeigen - sonst verschmelzen sie, und die
 * Karte wirkt aufgemalt statt aufgelegt. Dazu der Blattschatten aus
 * --schatten: eine Kante und eine leicht dunklere Randzone, wie Papier. */
.karte,
.duell-karte,
.feld,
.tipp-knopf {
  background-image: var(--textur-blatt);
}
.kopf { background-image: var(--textur); }
.feld-huelle { background: var(--textur), linear-gradient(to bottom, transparent, var(--papier) 22%); }
/* ---------- Feld und Knoepfe: feste Leiste am unteren Rand ----------
 * Vorher hingen sie unter den Karten, und die Karten sind so hoch wie ihr
 * laengster Satz - beides sprang bei jeder Frage (Nutzer: "nicht bei jeder
 * Frage huepfen"). Zwei Zwischenversuche sind gescheitert und stehen hier,
 * damit sie nicht wiederkommen:
 *  - Spalte mit Fensterhoehe + margin-top:auto: auf 720 px hohen Fenstern
 *    sind lange Duelle hoeher als das Fenster, das Feld sprang weiter um
 *    bis zu 69 px.
 *  - Hoehe von Frage und Karten auf das Maximum aller Duelle reservieren:
 *    auf dem Telefon rutschten die Knoepfe unter den Bildschirmrand.
 *  - Fest am Fensterrand (position:fixed): auf hohen Bildschirmen weit weg
 *    von den Karten, und die Fusszeile lag darueber.
 * Jetzt: Frage und Karten haben die Hoehe des laengsten Duells im Durchgang
 * (js/spiel.js, messeMitte), die Leiste steht direkt darunter. Liegt das
 * unterhalb des Fensters, haelt sie per sticky am unteren Rand. */
.spiel-dock {
  position: sticky;
  bottom: 0;
  z-index: 12;
  margin-top: .9rem;
  padding: 0 0 .6rem;
  background-color: var(--papier);
  background-image: var(--textur);
}
/* Weicher Uebergang nach oben, damit Text nicht an einer harten Kante
 * unter der Leiste verschwindet. */
.spiel-dock::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1.4rem;
  background: linear-gradient(to bottom, transparent, var(--papier));
  pointer-events: none;
}
.spiel-dock .feld-huelle {
  position: static;
  margin-top: 0;
  background: none;
  backdrop-filter: none;
}
.spiel-dock .navi--spiel { margin-top: .5rem; }
/* Die Spielansicht blendet NICHT als Ganzes ein. Die allgemeine Einblendung
 * arbeitet mit transform, und ein Vorfahr mit transform macht aus
 * position:fixed ein "fest relativ zum Vorfahren": die Leiste fuhr waehrend
 * jeder Einblendung im Textfluss mit und sprang danach nach unten - genau das
 * Springen, das sie verhindern soll. Nur Deckkraft ginge fuer die Position,
 * liesse die Leiste aber bei jeder Frage aufflackern. Die Karten blenden mit
 * karte-rein weiter selbst ein. */
.spiel.einblenden { animation: none; }
/* ---------- Die Leiste flach halten ----------
 * Jeder Pixel Leiste fehlt den Karten: mit 214 px (Desktop) und 155 px
 * (Telefon) lag bei langen Saetzen das Ende der zweiten Karte unter ihr -
 * bis zu 82 px auf 1280x720, bis zu 28 px auf 375x812. Beide Saetze muessen
 * aber vollstaendig im Bild stehen. Drei Stellen kosteten Hoehe ohne Nutzen:
 *  - der Formular-Innenabstand, den das Kandidatenfeld von .feld erbt
 *    (Namensgleichheit mit dem Auswahlfeld),
 *  - die Zaehlerzeile unter den Buchstaben, die im Duell leer ist,
 *  - eine eigene Zeile fuer Zurueck und Ueberspringen. */
.spiel-dock { padding-bottom: .4rem; border-top: 1px solid var(--linie); }
.spiel-dock::before { height: .8rem; }
.spiel-dock .feld-huelle { padding: .45rem 0 .3rem; border-top: 0; }
.spiel-dock .feld { padding: .4rem .6rem; }
.spiel-dock .chip-quote:empty { display: none; }
.spiel-dock .navi--spiel { margin-top: .3rem; }
.spiel-dock .knopf--klein { min-height: 2.4rem; padding: .35rem .8rem; }
/* Wo Platz ist, stehen die Knoepfe links und rechts neben dem Feld statt in
 * einer eigenen Zeile darunter. display:contents macht die beiden Knoepfe zu
 * Rasterzellen der Leiste, ohne das Markup umzubauen. */
@media (min-width: 44.01rem) {
  .spiel-dock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 31rem) minmax(0, 1fr);
    grid-template-areas: "zurueck feld weiter";
    align-items: center;
    column-gap: .9rem;
  }
  .spiel-dock .navi--spiel { display: contents; }
  .spiel-dock .feld-huelle { grid-area: feld; }
  .spiel-dock .navi--spiel .knopf:first-child { grid-area: zurueck; justify-self: end; }
  .spiel-dock .navi--spiel .knopf:last-child { grid-area: weiter; justify-self: start; }
}
/* Auf dem Telefon ebenfalls neben dem Feld - dort als Pfeile, weil zwei
 * Woerter neben sieben Saeulen keinen Platz haben. Die eigene Knopfzeile
 * kostete 49 px, und bei 4 von 15 Duellen lag damit das Ende der zweiten
 * Karte bis zu 35 px unter der Leiste. Der volle Name steht im title. */
@media (max-width: 44rem) {
  .spiel-dock {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "zurueck feld weiter";
    align-items: center;
    column-gap: .35rem;
  }
  .spiel-dock .navi--spiel { display: contents; }
  .spiel-dock .feld-huelle { grid-area: feld; min-width: 0; }
  .spiel-dock .navi--spiel .knopf:first-child { grid-area: zurueck; }
  .spiel-dock .navi--spiel .knopf:last-child { grid-area: weiter; }
  .spiel-dock .navi--spiel .knopf {
    width: 2.3rem;
    min-height: 2.6rem;
    padding: 0;
    font-size: 0;
  }
  .spiel-dock .navi--spiel .knopf::before { font-size: 1.1rem; line-height: 1; }
  .spiel-dock .navi--spiel .knopf:first-child::before { content: "\2190"; }
  .spiel-dock .navi--spiel .knopf:last-child::before { content: "\2192"; }
  .spiel-dock .feld { padding: .35rem .3rem; gap: .2rem; justify-content: space-between; }
  .spiel-dock .chip { width: clamp(1.7rem, 7.4vw, 2.4rem); }
}
/* Messbereich fuer messeMitte(): im Abschnitt, damit Breite und Regeln
 * stimmen, aber unsichtbar und ohne Einfluss auf das Layout. */
.spiel { position: relative; }
.spiel-messung {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}
.spiel-messung .duell-karte { animation: none; }
/* Der Inhalt liegt ueber der Fusszeile. Vorher hatten main und footer
 * dieselbe Ebene, und die spaeter kommende Fusszeile wurde ueber die Leiste
 * gezeichnet - deren eigener z-index gilt nur innerhalb von main. */
body > main { z-index: 2; }
/* =====================================================================
 * TITELSEITE AUF BREITEN SCHIRMEN
 *
 * Auf 16:9 blieben zwei Drittel der Flaeche leer (Nutzer: "der Platz links
 * und rechts sollte besser genutzt werden"). Ab 75rem wird die Startseite
 * zur Titelseite einer Zeitung: Kopf ueber die ganze Breite, links die
 * Randspalte "So funktioniert es", in der Mitte der Aufmacher mit dem
 * Wahl-Kasten, rechts "Zur Wahl stehen" als Terminkaesten, die direkt
 * starten. Getrennt durch Spaltenlinien, keine neuen Farben.
 *
 * Unter 75rem aendert sich nichts; die Randspalte rechts ist dort aus, das
 * Auswahlfeld ist der Weg. Kein transform fuers Ausbrechen aus der Spalte -
 * nur Breite und Rand.
 * ===================================================================== */
.wahl-rand { display: none; }
.wahl-teaser {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: .9rem;
  align-items: baseline;
  width: 100%;
  padding: .95rem 0;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linie-stark);
  cursor: pointer;
}
.wahl-teaser-tag {
  grid-row: 1 / span 3;
  align-self: start;
  min-width: 2.6ch;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: .95;
  letter-spacing: -.03em;
}
.wahl-teaser-monat {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.wahl-teaser-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.25;
}
.wahl-teaser-frist {
  font-family: var(--serif);
  font-style: italic;
  font-size: .82rem;
  color: var(--text-leise);
}
.wahl-teaser:hover .wahl-teaser-name,
.wahl-teaser:focus-visible .wahl-teaser-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (min-width: 75rem) {
  .titelseite {
    --titel-breite: min(76rem, calc(100vw - 4rem));
    width: var(--titel-breite);
    margin-left: calc(50% - var(--titel-breite) / 2);
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr) 17.5rem;
    grid-template-areas:
      "kopf   kopf  kopf"
      "ablauf hero  rand"
      "ablauf start rand";
    grid-template-rows: auto auto 1fr;
    align-items: start;
  }
  .titelseite > .zeitungskopf { grid-area: kopf; }
  /* Linke Randspalte: die drei Schritte untereinander */
  .titelseite > .ablauf {
    grid-area: ablauf;
    grid-template-columns: 1fr;
    align-self: stretch;
    margin: 0;
    padding-right: 1.6rem;
    border-bottom: 0;
    border-right: 1px solid var(--linie-stark);
  }
  .titelseite > .ablauf::before {
    content: "So funktioniert es";
    display: block;
    padding: .9rem 0 .2rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text);
  }
  .titelseite > .ablauf .ablauf-schritt { padding: 1rem 0; }
  .titelseite > .ablauf .ablauf-schritt + .ablauf-schritt {
    border-left: 0;
    border-top: 1px solid var(--linie-stark);
  }
  /* Mitte: der Aufmacher */
  .titelseite > .hero {
    grid-area: hero;
    padding: 0 2.2rem;
    margin: 0 0 1.8rem;
  }
  .titelseite > .hero h1 { font-size: clamp(2.6rem, 1rem + 2.4vw, 3.6rem); }
  .titelseite > .hero .hero-lead { max-width: 40rem; font-size: 1.2rem; }
  .titelseite > .karte--start { grid-area: start; margin: 0 2.2rem; }
  /* Rechte Randspalte: die Wahlen als Terminkaesten */
  .titelseite > .wahl-rand {
    display: block;
    grid-area: rand;
    align-self: stretch;
    padding-left: 1.6rem;
    border-top: 3px solid var(--kopflinie);
    border-left: 1px solid var(--linie-stark);
  }
  .titelseite > .wahl-rand .dachzeile { margin: .9rem 0 .2rem; }
  /* Kopfleiste und Fusszeile laufen auf der Titelseite mit, sonst standen
   * Logo und Umschalter mitten im Bild statt an der Kante des Blatts. */
  body:has(.titelseite) .kopf .huelle,
  body:has(.titelseite) .fuss .huelle { max-width: 76rem; }
}
/* Lange Namen ("Abgeordnetenhauswahl") ragten ueber die Spaltenlinie bzw.
 * wurden am Rand abgeschnitten - deutsche Silbentrennung, notfalls Umbruch
 * an beliebiger Stelle. Vergangene Wahlen treten zurueck, bleiben aber
 * waehlbar. */
.wahl-teaser-name { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.wahl-teaser { min-width: 0; }
.wahl-teaser--vorbei { opacity: .55; }
.wahl-teaser--vorbei:hover { opacity: .8; }
/* ---------- Die Gutschrift ----------
 * Links im Feldkasten, ausserhalb der Saeulen: so viele Marken wie ein
 * Wellenschritt Duelle hat. Der Punkt aus der gewaehlten Karte fliegt
 * hierher, nicht mehr in die Feldmitte - dort lag er auf einer verdeckten
 * Partei. */
.spiel-dock .feld-huelle { display: flex; align-items: center; gap: .55rem; }
.spiel-dock .feld-huelle .feld { flex: 1 1 auto; min-width: 0; }
.gutschrift {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 0 0 auto;
}
.gutschrift-punkt {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--linie-stark);
  transition: background 220ms ease;
}
.gutschrift-punkt--voll { background: var(--text); box-shadow: none; }
@media (max-width: 44rem) {
  .gutschrift { flex-direction: row; flex-wrap: wrap; width: .95rem; gap: .18rem; }
  .gutschrift-punkt { width: .38rem; height: .38rem; }
}
/* =====================================================================
 * LAENGE UND SCHWERPUNKTE (frueher: Punktebudget)
 *
 * Das Budget mit Plus/Minus je Thema und Restanzeige war eine
 * Rechenaufgabe; hier stehen zwei Fragen. Gesetzt wie eine Zeitungsseite:
 * Kopflinie, Spaltenlinien, Rubrikmarke - keine neuen Farben, keine
 * Bedienelemente, die nach App aussehen.
 * ===================================================================== */
.laenge {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: .4rem 0 1.9rem;
  border-top: 3px solid var(--kopflinie);
  border-bottom: 1px solid var(--linie-stark);
}
.laenge-karte {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  border-left: 1px solid var(--linie-stark);
  cursor: pointer;
}
.laenge-karte:first-child { border-left: 0; }
.laenge-karte--aktiv {
  background: var(--flaeche);
  box-shadow: inset 0 3px 0 var(--text);
}
.laenge-name { font-family: var(--serif); font-weight: 700; font-size: 1.12rem; }
.laenge-zahl { font-size: .88rem; font-variant-numeric: tabular-nums; }
.laenge-zeit {
  font-family: var(--serif);
  font-style: italic;
  font-size: .82rem;
  color: var(--text-leise);
}
.themen-wahl { margin: .4rem 0 1.2rem; border-top: 3px solid var(--kopflinie); }
.thema-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  border-bottom: 1px solid var(--linie-stark);
}
.thema-haupt {
  display: grid;
  gap: .12rem;
  padding: .8rem 0;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
}
.thema-zeile .thema-titel { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; }
.thema-text { font-size: .84rem; color: var(--text-leise); line-height: 1.45; }
.thema-stand {
  margin-top: .1rem;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-leise);
}
/* Der Schwerpunkt bekommt die Rubrikmarke, die sonst Abschnitte anmeldet -
 * kein Haken, kein Stern: dieselbe Sprache wie der Rest der Seite. */
.thema-zeile--schwer .thema-titel::before {
  content: "";
  display: inline-block;
  width: .5em;
  height: .5em;
  margin-right: .45em;
  background: currentColor;
  vertical-align: .06em;
}
.thema-zeile--schwer .thema-stand { color: var(--text); font-weight: 700; }

/* Nicht gewaehlt ist seit der Umkehrung der NORMALFALL, nicht die Ausnahme:
 * die Liste startet leer. Deshalb kein Durchstreichen mehr - das las sich wie
 * "herausgenommen", wo nichts herausgenommen wurde. Gewaehlte Themen treten
 * hervor (voller Ton, Balken am Bund), ungewaehlte stehen still. */
.thema-zeile--aus .thema-titel,
.thema-zeile--aus .thema-text,
.thema-zeile--aus .thema-stand { color: var(--text-leise); }
.thema-haupt {
  padding-left: 0;
  box-shadow: inset 3px 0 0 transparent;
  transition: box-shadow .12s linear, padding-left .12s linear;
}
.thema-zeile:not(.thema-zeile--aus) .thema-haupt {
  padding-left: .7rem;
  box-shadow: inset 3px 0 0 var(--text);
}
.thema-aus[disabled] { opacity: .3; cursor: default; }
.thema-aus[disabled]:hover { color: var(--text-leise); border-color: var(--linie-stark); }
.thema-aus {
  width: 2.3rem;
  height: 2.3rem;
  font: inherit;
  font-size: .9rem;
  color: var(--text-leise);
  background: none;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  cursor: pointer;
}
.thema-aus:hover { color: var(--text); border-color: var(--text-leise); }
@media (pointer: coarse) { .thema-aus { width: 2.75rem; height: 2.75rem; } }
.bilanz { margin: 0 0 1.1rem; font-size: .85rem; line-height: 1.5; color: var(--text-leise); }

/* ---------- Wortlaut im Duell ----------
 * Der Umschalter steht ueber den Karten und gilt fuer beide. Das Zitat ist
 * laenger als die Zusammenfassung, deshalb bekommt es einen Kasten mit
 * Deckel, in dem es notfalls scrollt: Die Karten bleiben gleich hoch
 * (Raster mit align-items: stretch), und die Leiste darunter steht weiter
 * fest. Ohne Deckel sprengte ein langer Programmabsatz auf dem Telefon das
 * Bild, und beide Saetze standen nicht mehr gleichzeitig darin. */
.wortlaut-zeile {
  display: flex;
  justify-content: flex-end;
  margin: -.2rem 0 .35rem;
}
.duell-satz--wortlaut {
  max-height: 14rem;
  overflow-y: auto;
  font-size: clamp(.86rem, .82rem + .2vw, .95rem);
  line-height: 1.5;
  font-family: var(--serif);
}
@media (max-width: 44rem) {
  .duell-satz--wortlaut { max-height: 8.5rem; font-size: .82rem; line-height: 1.42; }
  .wortlaut-zeile { margin: -.1rem 0 .25rem; }
}
.spiel-messung .duell-satz--wortlaut { overflow: hidden; }

/* =====================================================================
 * ERGEBNIS AUF BREITEN SCHIRMEN
 *
 * Wie die Titelseite: Auf 16:9 stand das Ergebnis als 660 px schmale Spalte
 * mitten in leerem Papier, 30.000 px lang. Ab 75rem zwei Spalten wie eine
 * Zeitungsseite - links die Wertung (Sieger, alle Plaetze), rechts die
 * Randspalte mit der Abrechnung (Tipp, Gegenprobe, Wetten, Zuordnung).
 * "Nach Themen" laeuft zweispaltig mit Spaltenlinie.
 *
 * Schmal bleibt alles wie vorher: Die Spaltenhuellen loesen sich auf, und
 * die Karten stehen per order in der alten Reihenfolge untereinander. Die
 * Aufdeckung (Stufe 1) ist davon nicht betroffen - dort gehoert der ganze
 * Blick dem einen Feld.
 * ===================================================================== */
.ergebnis-spalten { display: flex; flex-direction: column; gap: .9rem; }
.ergebnis-haupt, .ergebnis-rand { display: contents; }
.ergebnis-spalten .karte--sieger { order: 1; }
.ergebnis-spalten .karte--tipp { order: 2; }
.ergebnis-spalten .karte--gegenprobe { order: 3; }
.ergebnis-spalten .karte--wette { order: 4; }
.ergebnis-spalten .karte--rang { order: 5; }
.ergebnis-spalten .karte--treffer { order: 6; }

@media (min-width: 75rem) {
  .ergebnis-blatt {
    --titel-breite: min(76rem, calc(100vw - 4rem));
    width: var(--titel-breite);
    margin-left: calc(50% - var(--titel-breite) / 2);
  }
  .ergebnis-blatt > .fliess { max-width: 46rem; }
  .ergebnis-spalten {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
    gap: 0;
  }
  .ergebnis-haupt, .ergebnis-rand { display: flex; flex-direction: column; gap: .9rem; }
  .ergebnis-haupt { padding-right: 1.8rem; }
  .ergebnis-rand { padding-left: 1.8rem; border-left: 1px solid var(--linie-stark); }
  .ergebnis-rand .karte--treffer { margin-top: 0; }
  /* Raster statt Zeitungsspalten: gleich breite Karten, Zeile fuer Zeile
   * nebeneinander. align-items:start, damit eine aufgeklappte Karte ihre
   * Nachbarin nicht mitzieht; gleich hoch macht das Skript (Summen). */
  .themen-spalten {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.4rem;
    row-gap: 1.2rem;
    align-items: start;
  }
  .themen-spalten > .karte { margin: 0; }
  body:has(.ergebnis-blatt) .kopf .huelle,
  body:has(.ergebnis-blatt) .fuss .huelle { max-width: 76rem; }
}


/* ---------- DUELL AUF BREITEN SCHIRMEN ----------
 * Ab 75rem dieselbe Blattbreite wie Titelseite und Ergebnis: links eine ruhige
 * Randspalte (Ablauf des Durchgangs, Themen mit Zaehler), rechts Frage,
 * Karten und Leiste - die Karten werden breiter, Saetze brechen seltener um.
 * Die Leiste bleibt Teil der rechten Spalte und haelt per sticky wie vorher.
 * Der Messbereich (messeMitte) liegt im selben Rasterfeld wie die Mitte,
 * sonst misst er die volle Blattbreite und reserviert zu wenig Hoehe.
 * Gebunden an :has(> .spiel-rand), nicht an .spiel allein. */
.spiel-rand { display: none; }
@media (min-width: 75rem) {
  .spiel:has(> .spiel-rand) {
    --titel-breite: min(76rem, calc(100vw - 4rem));
    width: var(--titel-breite);
    max-width: none;
    margin-left: calc(50% - var(--titel-breite) / 2);
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    /* Letzte Zeile leer und flexibel: ist die Randspalte hoeher als die
     * Mitte, landet der Ueberschuss dort und nicht zwischen Karten und
     * Leiste - die Leiste gehoert direkt unter die Karten. */
    grid-template-areas: "rand kopf" "rand bogen" "rand mitte" "rand dock" "rand .";
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 2.6rem;
  }
  .spiel > .spiel-kopf { grid-area: kopf; }
  .spiel > .spiel-bogen { grid-area: bogen; }
  .spiel > .spiel-mitte { grid-area: mitte; }
  .spiel > .spiel-messung { grid-area: mitte; }
  .spiel > .spiel-dock { grid-area: dock; }
  .spiel-rand {
    display: block;
    grid-area: rand;
    padding-right: 1.6rem;
    border-right: 1px solid var(--linie-stark);
  }
  .spiel-rand .dachzeile { margin: 0 0 .35rem; }
  body:has(.spiel-rand) .kopf .huelle,
  body:has(.spiel-rand) .fuss .huelle { max-width: 76rem; }
}
.spiel-rand-liste { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.spiel-rand-schritt {
  position: relative;
  padding: .45rem 0 .45rem 1.1rem;
  border-top: 1px solid var(--linie);
  font-size: .85rem;
  color: var(--text-leise);
}
.spiel-rand-schritt small { display: block; font-size: .74rem; }
.spiel-rand-schritt::before {
  content: "";
  position: absolute;
  left: 0;
  top: .8rem;
  width: .45rem;
  height: .45rem;
  box-shadow: inset 0 0 0 1px var(--text-leise);
}
.spiel-rand-schritt--fertig::before { background: var(--text-leise); }
.spiel-rand-schritt--jetzt { color: var(--text); font-weight: 700; }
.spiel-rand-schritt--jetzt small { font-weight: 400; }
.spiel-rand-schritt--jetzt::before { background: var(--text); box-shadow: none; }
.spiel-rand-thema {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  padding: .3rem 0;
  border-top: 1px solid var(--linie);
  font-size: .8rem;
  color: var(--text-leise);
}
.spiel-rand-thema--jetzt { color: var(--text); font-weight: 700; }
/* Nur der aktuelle Schritt und das aktuelle Thema sollen auffallen; alles
 * andere tritt deutlich zurueck (Nutzerwunsch: unscheinbarer). */
.spiel-rand-thema:not(.spiel-rand-thema--jetzt) { opacity: .5; }
/* Ein Thema, dessen Duelle alle gespielt sind, wird durchgestrichen. */
.spiel-rand-thema--fertig > span:first-child { text-decoration: line-through; }
/* Meilensteine: zuerst alle schwarz, erreichte werden abgehakt und grau. */
.spiel-rand-schritt { color: var(--text); }
.spiel-rand-schritt--fertig { opacity: .45; }
.spiel-rand-schritt--fertig::before {
  content: "\2713";
  top: .45rem;
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  font-size: .8rem;
  line-height: 1;
}
.spiel-rand-zahl { font-variant-numeric: tabular-nums; flex: none; }

/* ---------- TITELSEITE WIE EINE ZEITUNG ----------
 * Kein Auswahlkasten, kein animiertes Band mehr: gewaehlt wird ueber die
 * Terminkaesten, die deshalb auch schmal sichtbar sind (unter dem Aufmacher).
 * Vergangene Wahlen tragen ihr Ergebnis als Kurzmeldung (grau, wie die
 * ganze abgelaufene Wahl). Darunter ein Leitartikel in zwei Spalten. */
.titelseite > .wahl-rand {
  display: block;
  margin: 0 0 2rem;
  border-top: 3px solid var(--kopflinie);
}
.titelseite > .wahl-rand .dachzeile { margin: .9rem 0 .2rem; }
.wahl-ergebnis {
  grid-column: 1 / -1;
  display: block;
  margin-top: .6rem;
  padding-top: .5rem;
  border-top: 1px solid var(--linie);
}
.wahl-ergebnis-zeile {
  display: grid;
  grid-template-columns: minmax(0, 5.2rem) minmax(0, 1fr) 3.1rem;
  align-items: center;
  gap: .5rem;
  font-size: .74rem;
  line-height: 1.55;
  color: var(--text);
}
.wahl-ergebnis-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wahl-ergebnis-balken { display: block; height: .38rem; background: var(--linie); }
.wahl-ergebnis-fuell { display: block; height: 100%; background: var(--text-leise); }
.wahl-ergebnis-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.wahl-ergebnis-quelle {
  display: block;
  margin-top: .4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: .7rem;
  line-height: 1.35;
  color: var(--text-leise);
}
.leitartikel {
  margin: 0 0 1.5rem;
  padding-top: .9rem;
  border-top: 3px solid var(--kopflinie);
}
.leitartikel h2 {
  margin: .25rem 0 .8rem;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.2;
}
.leitartikel-text { font-family: var(--serif); font-size: 1rem; line-height: 1.6; color: var(--text); }
.leitartikel-text p { margin: 0 0 .8rem; }
@media (min-width: 48rem) {
  .leitartikel-text { columns: 2; column-gap: 2rem; column-rule: 1px solid var(--linie-stark); }
  .leitartikel-text p { break-inside: avoid-column; }
}
@media (min-width: 75rem) {
  .titelseite {
    grid-template-areas:
      "kopf   kopf kopf"
      "ablauf hero rand"
      "ablauf leit rand";
  }
  .titelseite > .leitartikel { grid-area: leit; margin: 0 2.2rem 1.5rem; }
  .titelseite > .wahl-rand { margin: 0; }
}

/* ---------- Wer war wer? aufklappbar ----------
 * Jede Zeile der Aufloesung ist ein <details>: ein Klick zeigt die Saetze,
 * die bei der Zuordnung unter diesem Buchstaben standen. */
.aufloesung-zeile > summary { cursor: pointer; list-style: none; }
.aufloesung-zeile > summary::-webkit-details-marker { display: none; }
.aufloesung-marke::after {
  content: "\25B8";
  margin-left: auto;
  color: var(--text-leise);
  transition: transform 160ms ease;
}
.aufloesung-zeile[open] > .aufloesung-marke::after { transform: rotate(90deg); }
.aufloesung-zeile > summary:hover > span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.aufloesung-belege { padding: .5rem 0 .1rem 1.6rem; }
.aufloesung-belege-kopf { margin: 0 0 .35rem; font-size: .78rem; color: var(--text-leise); }
.aufloesung-belegliste {
  margin: 0;
  padding-left: 1rem;
  font-family: var(--serif);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text);
}
.aufloesung-beleg + .aufloesung-beleg { margin-top: .35rem; }

/* ---------- Turnier zwischen den Finalisten ----------
 * Eigene Ansicht nach dem Ergebnis: nur zwei Programme, Stand von null an.
 * Karten und Frage uebernehmen die Gestaltung des Duells. */
.turnier { max-width: 52rem; margin: 0 auto; }
.turnier h1 { margin-bottom: .6rem; }
.turnier-stand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  gap: 1.2rem;
  margin: 1rem 0 .4rem;
  font-family: var(--serif);
}
.turnier-name { font-size: 1.1rem; font-weight: 700; }
.turnier-name:first-child { text-align: right; }
.turnier-zahl { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.turnier-hinweis { text-align: center; margin: 0 auto 1.4rem; }
.turnier-zaehler {
  margin: 1.4rem 0 .5rem;
  text-align: center;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.turnier .navi { margin-top: 1.2rem; }
.turnier-start { margin-top: .9rem; }

/* ---------- Balken mit deutlichem Umriss ----------
 * Die Leiste hob sich kaum vom Papier ab (Nutzer: "man erkennt die Umrisse
 * kaum"). Jetzt: kraeftige Kontur, Muenzwurflinie in Textfarbe, Fuellung
 * mit dunkler Kante - auch helle Parteifarben stehen damit sichtbar. */
.balken {
  height: 10px;
  box-shadow: inset 0 0 0 1px var(--text-leise);
}
.balken::after { width: 2px; margin-left: -1px; background: var(--text); z-index: 1; }
.balken-fuell { box-shadow: inset 0 0 0 1px var(--text); }

/* ---------- Themenkarten: Fragen aufklappbar ---------- */
.thema-details { margin-top: .9rem; border-top: 1px solid var(--linie); }
.thema-details-knopf {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem 0 .1rem;
  font-size: .82rem;
  font-weight: 650;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.thema-details-knopf::-webkit-details-marker { display: none; }
.thema-details-knopf::before {
  content: "\25B8";
  color: var(--text-leise);
  transition: transform 160ms ease;
}
.thema-details[open] > .thema-details-knopf::before { transform: rotate(90deg); }
.thema-details-knopf:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Ergebnis: Tipp als Schlagzeile ----------
 * Statt eines Kastens "Ihr Tipp hat gehalten" steht die Abrechnung als
 * Schlagzeile ueber der Seite, darunter eine Unterzeile wie im Aufmacher. */
.ergebnis-schlagzeile {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem);
  line-height: 1.1;
  margin: .2rem 0 .6rem;
  text-wrap: balance;
}
.ergebnis-unterzeile {
  max-width: 46rem;
  margin: 0 0 .6rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--text);
}

/* ---------- Turnierergebnis neben dem Knopf ---------- */
.turnier-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.6rem;
  margin-top: .9rem;
}
.turnier-zeile .turnier-start { margin-top: 0; }
.turnier-ergebnis {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-left: 1.2rem;
  border-left: 1px solid var(--linie-stark);
}
.turnier-ergebnis-kopf {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.turnier-ergebnis-stand {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.turnier-ergebnis-fuss { font-size: .76rem; color: var(--text-leise); }

/* ---------- Blaettern im Ergebnis ----------
 * Drei Seiten wie in einer Zeitung. Oben der Seitenkopf (Ressortleiste mit
 * Seitenzahlen, aktuelle Seite unterstrichen), unten zwei Blaetter "Zurueck
 * auf Seite n" / "Weiter auf Seite n" hinter einer Doppellinie. Beim Zeigen
 * klappt an der aeusseren unteren Ecke ein Eselsohr um - die Seite, die man
 * greift. Keine Farbe, nur Papier, Linie und Schatten. */
.blatt-kopf {
  display: flex;
  margin: .4rem 0 1.6rem;
  border-top: 3px solid var(--kopflinie);
  border-bottom: 1px solid var(--linie-stark);
}
.blatt-kopf-seite {
  flex: 1 1 0;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  min-width: 0;
  padding: .6rem .8rem;
  font: inherit;
  text-align: left;
  color: var(--text-leise);
  background: none;
  border: 0;
  border-right: 1px solid var(--linie);
  cursor: pointer;
}
.blatt-kopf-seite:last-child { border-right: 0; }
.blatt-kopf-nr { font-family: var(--serif); font-style: italic; font-size: .82rem; flex: none; }
.blatt-kopf-name {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blatt-kopf-seite--jetzt { color: var(--text); cursor: default; box-shadow: inset 0 -3px 0 var(--text); }
.blatt-kopf-seite:not(.blatt-kopf-seite--jetzt):hover .blatt-kopf-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.blaettern {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  margin: 2.6rem 0 1rem;
  padding-top: 1rem;
  border-top: 3px double var(--linie-stark);
}
.blaettern-seite { font-family: var(--serif); font-style: italic; font-size: .88rem; color: var(--text-leise); }
.blatt-knopf {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.3rem;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: 3px;
  box-shadow: var(--schatten);
  cursor: pointer;
  overflow: hidden;
  transition: transform 180ms ease;
}
.blatt-knopf--zurueck { justify-self: start; text-align: left; }
.blatt-knopf--vor { justify-self: end; text-align: right; }
.blatt-knopf-text { display: flex; flex-direction: column; }
.blatt-knopf-text small { font-family: var(--serif); font-style: italic; font-size: .8rem; color: var(--text-leise); }
.blatt-knopf-text span { font-family: var(--serif); font-weight: 700; font-size: 1.2rem; line-height: 1.25; }
.blatt-knopf-pfeil { font-size: 1.5rem; line-height: 1; }
.blatt-knopf::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  box-shadow: -1px -1px 3px rgba(0, 0, 0, .18);
  transition: width 200ms ease, height 200ms ease;
}
.blatt-knopf--vor::after { right: 0; background: linear-gradient(to top left, var(--papier) 50%, var(--flaeche-tief) 50%); }
.blatt-knopf--zurueck::after { left: 0; background: linear-gradient(to top right, var(--papier) 50%, var(--flaeche-tief) 50%); box-shadow: 1px -1px 3px rgba(0, 0, 0, .18); }
.blatt-knopf:hover::after,
.blatt-knopf:focus-visible::after { width: 1.6rem; height: 1.6rem; }
.blatt-knopf--vor:hover { transform: translateX(3px); }
.blatt-knopf--zurueck:hover { transform: translateX(-3px); }
@media (max-width: 40rem) {
  .blatt-kopf-seite { flex-direction: column; gap: 0; padding: .5rem .45rem; }
  .blatt-kopf-name { font-size: .62rem; letter-spacing: .06em; white-space: normal; }
  .blaettern { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .blaettern-seite { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .blatt-knopf { padding: .75rem .8rem; gap: .6rem; }
  .blatt-knopf-text span { font-size: 1rem; }
}

/* Rechenweg auf Seite 3: Infokasten in Lesebreite, zwei Absaetze. */
.karte--rechenweg { max-width: 52rem; margin-bottom: 1.6rem; }
.karte--rechenweg .fliess { max-width: none; margin-bottom: .7rem; }
.karte--rechenweg .fliess:last-child { margin-bottom: 0; }
@media (min-width: 75rem) {
  .karte--rechenweg { max-width: none; }
  .karte--rechenweg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.4rem; }
  .karte--rechenweg .tipp-zeile { grid-column: 1 / -1; }
  .karte--rechenweg .fliess { margin-bottom: 0; }
}

/* ---------- Eigene Durchgaenge auf der Titelseite ----------
 * Unter dem Terminkasten einer Wahl, die in dieser Sitzung schon gespielt
 * wurde: Modus, Zeitpunkt, die ersten Plaetze. Mehrere Durchgaenge lassen
 * sich mit < > durchblaettern; ein Klick oeffnet das Ergebnis wieder. */
.lauf-kasten {
  margin: -.2rem 0 0;
  padding: .7rem 0 .9rem;
  border-bottom: 1px solid var(--linie-stark);
}
.lauf-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
}
.lauf-titel {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
}
.lauf-blaettern { display: flex; align-items: center; gap: .25rem; }
.lauf-pfeil {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  font: inherit;
  font-size: .9rem;
  line-height: 1;
  color: var(--text);
  background: none;
  border: 1px solid var(--linie-stark);
  border-radius: 2px;
  cursor: pointer;
}
.lauf-pfeil:disabled { opacity: .35; cursor: default; }
.lauf-zaehler { font-size: .72rem; font-variant-numeric: tabular-nums; color: var(--text-leise); min-width: 2.6rem; text-align: center; }
.lauf-meta {
  margin: 0 0 .45rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: .8rem;
  color: var(--text-leise);
}
.lauf-oeffnen {
  display: block;
  width: 100%;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.lauf-oeffnen:hover .lauf-weiter,
.lauf-oeffnen:focus-visible .lauf-weiter { text-decoration: underline; text-underline-offset: 3px; }
.lauf-weiter {
  display: block;
  margin-top: .4rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
}

/* ---------- Schwerpunkte im Ergebnis sofort erkennbar ----------
 * Ohne Farbe: dicke schwarze Kopflinie und ein gefuelltes Etikett fuer
 * Schwerpunkte, das Etikett normaler Themen tritt zurueck. */
.karte--schwerpunkt { border-top: 6px solid var(--text); }
.gewicht-wert { opacity: .6; }
.gewicht-wert--schwer {
  opacity: 1;
  padding: .22rem .5rem;
  color: var(--papier);
  background: var(--text);
  border-radius: 2px;
}

/* Durchgang und Terminkasten gehoeren sichtbar zusammen: keine Linie
 * dazwischen, der Durchgang haengt an einer Randlinie unter seiner Wahl.
 * Die Linie darunter trennt zur naechsten Wahl. */
.wahl-teaser:has(+ .lauf-kasten) { border-bottom: 0; padding-bottom: .45rem; }
.lauf-kasten {
  margin: 0 0 0 .15rem;
  padding: .15rem 0 .9rem .85rem;
  border-left: 2px solid var(--text);
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--linie-stark);
}
.lauf-kasten .wahl-ergebnis { margin-top: .15rem; padding-top: 0; border-top: 0; }
.lauf-kasten .lauf-meta { margin-bottom: .35rem; }

/* Die dicke Randlinie endet vor der Trennlinie zur naechsten Wahl -
 * aneinanderstossend sah es unsauber aus (Nutzerurteil). */
.lauf-kasten { position: relative; box-shadow: none; margin-bottom: .75rem; }
.lauf-kasten::after {
  content: "";
  position: absolute;
  left: calc(-2px - .15rem);
  right: 0;
  bottom: -.75rem;
  height: 1px;
  background: var(--linie-stark);
}

/* Durchlaeufe loeschen - ganz unten auf der Titelseite, zurueckhaltend. */
.laeufe-loeschen {
  margin: 2rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie-stark);
  text-align: center;
}
.laeufe-loeschen-frage { margin: 0 0 .6rem; font-family: var(--serif); font-size: 1rem; }
.laeufe-loeschen .navi { justify-content: center; margin-top: 0; }

/* Durchgaenge uebereinander in einer Zelle: Hoehe = hoechster Durchgang,
 * beim Blaettern bewegt sich nichts. visibility statt display, damit die
 * verborgenen Tafeln ihre Hoehe behalten. */
.lauf-stapel { display: grid; }
.lauf-tafel { grid-area: 1 / 1; visibility: hidden; }
.lauf-tafel--an { visibility: visible; }

/* Randspalte im Duell mit Luft nach oben: sie klebte an der Kopfleiste.
 * Jetzt wie die Randspalten der Titelseite - Abstand, kraeftige Kopflinie,
 * etwas mehr Zeilenabstand. */
@media (min-width: 75rem) {
  .spiel-rand {
    margin-top: 2.4rem;
    padding-top: .9rem;
    border-top: 3px solid var(--kopflinie);
  }
  .spiel-rand .dachzeile { margin-bottom: .6rem; }
  .spiel-rand-schritt { padding-top: .6rem; padding-bottom: .6rem; }
  .spiel-rand-schritt::before { top: .95rem; }
  .spiel-rand-schritt--fertig::before { top: .6rem; }
  .spiel-rand-liste + .dachzeile { margin-top: 1.8rem; }
  .spiel-rand-thema { padding: .4rem 0; }
}

/* Loeschen als Kleingedrucktes am Fuss der Titelseite, nicht als Kasten -
 * der Knopf passte nicht zum Zeitungsblatt (Nutzerurteil). */
.laeufe-loeschen { margin: 2.2rem 0 .6rem; padding-top: .7rem; border-top: 1px solid var(--linie-stark); text-align: right; }
.loeschen-link {
  padding: 0;
  font: inherit;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-leise);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.loeschen-link:hover, .loeschen-link:focus-visible { color: var(--text); }
.loeschen-link--ja { color: var(--text); }
.laeufe-loeschen-frage { margin: 0; font-family: var(--serif); font-style: italic; font-size: .9rem; color: var(--text); }
.loeschen-trenner { color: var(--text-leise); }

/* Hervorheben ohne Springen: Fett machte Zeilen breiter, lange Themen
 * brachen dann um, und die Liste rutschte. Jetzt gleiche Schriftstaerke fuer
 * alle Zeilen, das Aktuelle nur schwarz und mit Randbalken; Themen stehen
 * immer einzeilig (voller Titel im title). */
.spiel-rand-thema,
.spiel-rand-thema--jetzt,
.spiel-rand-schritt,
.spiel-rand-schritt--jetzt { font-weight: 400; }
.spiel-rand-thema { padding-left: .55rem; }
.spiel-rand-thema-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spiel-rand-thema--jetzt { box-shadow: inset 3px 0 0 var(--text); }
.spiel-rand-schritt--jetzt > span:first-child { box-shadow: 0 2px 0 var(--text); }

/* ---------- Keine Kante ueber der Leiste ----------
 * Die Leiste malte ihren eigenen Papiergrund ueber die Vignette und mit
 * einer anders ansetzenden Textur - dazu Trennlinie und Verlauf. Ergebnis
 * war ein sichtbares Band (Nutzer: "komische Kante"). Jetzt liegt die
 * Vignette ueber allem, beide Texturen haengen am Fenster und decken sich,
 * Linie und Verlauf entfallen. */
body { background-attachment: fixed; }
body::after { z-index: 20; }   /* ueber Inhalt (2) und Kopf (15), unter Quellen-Viewer (30) */
.spiel-dock { background-attachment: fixed; border-top: 0; }
.spiel-dock::before { display: none; }

/* ---------- Begriffe im Fragetext ----------
 * Fachwoerter wie "Bezahlkarte" oder "Netzentgelte" tragen eine gepunktete
 * Linie und erklaeren sich bei Mauszeiger, Tastaturfokus oder Tipp. Die
 * Marke ist ein Knopf, sieht aber wie Text aus: gleiche Schrift, gleiche
 * Laufweite, kein Innenabstand - sonst braeche die Zeile anders um als in
 * der verdeckten Messung, und die Leiste unter den Karten spraenge.
 * Kein Buntton: die Oberflaeche ist unbunt (CLAUDE.md, Abschnitt 8).
 */
.begriff {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--text-leise);
  cursor: help;
}
.begriff:hover,
.begriff[aria-expanded="true"] { border-bottom-color: var(--text); }
.begriff:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}
/* Fingerflaeche nur an Tastgeraeten (CLAUDE.md, Abschnitt 7): am Rechner
 * waere ein groesseres Ziel nur ein Loch im Satzspiegel. */
@media (pointer: coarse) {
  .begriff { padding: .25rem 0; }
}

/* Die Blase haengt am Fenster und schiebt nichts. Ueber Leiste (10) und
 * Vignette (20), unter dem Quellen-Viewer (30). */
.begriff-blase {
  position: fixed;
  z-index: 25;
  max-width: min(24rem, calc(100vw - 2rem));
  padding: .7rem .85rem;
  font-family: var(--sans);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--flaeche);
  background-image: var(--textur-blatt);
  border: 1px solid var(--linie-stark);
  border-top: 3px solid var(--kopflinie);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten);
}

/* Begriffszeile unter beiden Duellkarten: leise gesetzt, damit sie den
 * Vergleich nicht stoert, aber da, wenn man ein Wort nicht kennt. Sie steht
 * unter der Buehne und nicht in einer Karte - beide Saetze sollen gleich
 * aussehen. Leer bleibt sie sichtbar reserviert, damit die Leiste darunter
 * bei jeder Frage auf demselben Pixel steht. */
.duell-begriffe {
  margin: .7rem 0 0;
  font-size: .78rem;
  line-height: 1.5;
  text-align: center;
  color: var(--text-leise);
}
.duell-begriffe .begriff { color: var(--text-leise); }
.duell-begriffe .begriff:hover,
.duell-begriffe .begriff[aria-expanded="true"] { color: var(--text); }
.duell-begriffe--leer { visibility: hidden; }