/* TCG Journal, Stilblatt.

   Stand 11.09.2026: HELL als Grundfarbe, gebaut wie ein Nachschlagewerk.
   Vorbild ist tcgcheck.de, am 11.09.2026 bei 1280 und 375 Pixeln gemessen:
   Seitengrund #f9fafb, weisse Karten mit 1 Pixel Rahmen #e5e7eb und 16 Pixel
   Radius, kein einziger Schatten im Raster, eine Schriftfamilie, Produktbilder
   ruhig auf hellem Feld. Messwerte und Begruendung: docs/gestaltung.md.

   Die Farbe kommt aus den Karten, nicht aus der Oberflaeche: genau ein Akzent
   (Indigo), alles andere ist Grau. Spielfarben sind Kennpunkte, nie Schrift.

   Bis zum 10.09.2026 folgte die Seite der Systemeinstellung und zeigte auf
   einem dunkel gestellten Geraet die dunkle Fassung. Das tut sie nicht mehr:
   dunkel gibt es nur noch, wenn ein Besucher es mit dem Knopf im Kopf waehlt.

   Jedes Schriftfarbpaar ist gegen WCAG AA geprueft, von bin/kontrast-pruefen.py
   im Pruef-Workflow und am gerenderten HTML von bin/auftritt-messen.py. Wer
   hier einen Farbwert aendert, laesst beide laufen.

   1 Werte  2 Grundlagen  3 Rahmen  4 Bausteine  5 Seitenteile  6 Hilfen */

/* ---- 1 Werte ------------------------------------------------------------ */
:root {
  color-scheme: light;

  /* Flaechen */
  --papier:        #f9fafb;  /* Seitengrund */
  /* Derselbe Wert als Komponenten, fuer den Verlauf ueber dem Einstiegsfoto.
     Ohne ihn stuende dort ein fester rgba-Wert, der in der dunklen Fassung
     hell bliebe und das Foto in einen Milchschleier legte. */
  --papier-teile:  249 250 251;
  --karte:         #ffffff;  /* Karten, Kopf, Fuss, Tabellen */
  --papier-tief:   #f3f4f6;  /* Felder: Bildgrund, Chips */
  --papier-tiefer: #e5e7eb;  /* Chip beim Ueberfahren, Platzhalter */
  --linie:         #e5e7eb;  /* der eine Rahmen jeder Karte */
  --linie-stark:   #d1d5db;  /* derselbe Rahmen beim Ueberfahren */
  --rand-eingabe:  #8b919b;  /* Eingabefelder: 3,2:1 gegen Weiss, WCAG 1.4.11.
                                Mit #e3e6eb war das Suchfeld im Kopf nicht als
                                Feld erkennbar (1,25:1). */

  /* Schrift. --tinte-still steht nur auf --karte und --papier. Auf
     --papier-tief faellt es mit 4,39:1 unter AA. */
  --tinte:         #111827;
  --tinte-leise:   #4b5563;
  --tinte-still:   #6b7280;  /* bis 10.09.2026 #7b8494 mit 3,77:1 auf Weiss:
                                1.696 Textstellen unter AA, fast alle daher */

  /* Genau ein Akzent */
  --akzent:        #4338ca;
  --akzent-tief:   #3730a3;  /* beim Ueberfahren dunkler statt heller: Weiss auf
                                dem frueheren #6366f1 hatte nur 4,47:1 */
  --akzent-grund:  #eef2ff;
  --akzent-kante:  #c7d2fe;
  --auf-akzent:    #ffffff;

  /* Zustaende, keine Dekoration */
  --gruen:         #16a34a;  /* nur der Lebenspunkt, nie Schrift */
  --gruen-text:    #047857;
  --rot:           #be123c;
  --warn:          #92400e;
  --warn-grund:    #fef3c7;

  --radius-klein:  8px;
  --radius:        12px;
  --radius-gross:  16px;

  --breite:        1280px;
  --breite-text:   68ch;
  --luft:          clamp(1rem, 3.5vw, 2rem);

  /* Eine Familie fuer alles, Fliesstext, Zahlen und Ueberschriften. Bis zum
     10.09.2026 waren es drei: die Systemschrift, Georgia im Beitragstext und
     Menlo fuer Zahlen. Kein Webfont, solange die Schriftfrage fuer slabhit.de
     und dieses Haus nicht nach dem 15.09.2026 entschieden ist. */
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
             "Helvetica Neue", Arial, sans-serif;
}

/* Dunkel nur auf ausdrueckliche Wahl mit dem Knopf im Kopf. Kein
   prefers-color-scheme: genau das war der Weg, auf dem die dunkle Fassung bei
   jedem dunkel gestellten Geraet von selbst erschien. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --papier: #0f1115; --papier-teile: 15 17 21;
  --karte: #161920; --papier-tief: #1d212a; --papier-tiefer: #262b35;
  --linie: #262b35; --linie-stark: #39404d; --rand-eingabe: #6b7383;
  --tinte: #eef1f6; --tinte-leise: #b4bbc8; --tinte-still: #8e97a6;
  --akzent: #a5b4fc; --akzent-tief: #c7d2fe; --akzent-grund: #1e213a; --akzent-kante: #343a63;
  --auf-akzent: #0f1115;
  --gruen: #34d399; --gruen-text: #34d399; --rot: #fb7185; --warn: #fbbf24; --warn-grund: #2c2410;
}

/* ---- 2 Grundlagen ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .01ms !important; }
}
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font-family: var(--schrift); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0 0 .4em; color: var(--tinte); font-weight: 700; line-height: 1.15;
                 letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1.08; letter-spacing: -.03em; }
/* Zwischenueberschriften hoechstens 24 Pixel, wie bei tcgcheck.de gemessen.
   Eine lange Seite verlaegt keine 40-Pixel-Zwischentitel, sie zerfiele in
   Kapitel. */
h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); letter-spacing: -.025em; }
h3 { font-size: 1.0625rem; letter-spacing: -.012em; }
h4 { font-size: .95rem; }
p { margin: 0 0 1.05em; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--akzent); }
.artikeltext a, .fliess a { color: var(--akzent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.artikeltext a:hover, .fliess a:hover { color: var(--akzent-tief); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 6px;
}
img { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2rem 0; }

/* Gleich breite Ziffern ueberall, wo Zahlen untereinander stehen: sonst
   stehen die Stellen einer Spalte versetzt, und bei dreissig Zeilen sieht die
   Liste kaputt aus. */
table, .kennzahl, .bestand, .zahl, .termin-datum, .meldung-zeit, .kartensuche-zahl,
.laufkarte span, .kartenfeld figcaption span, .setkachel span { font-variant-numeric: tabular-nums; }

/* ---- 3 Rahmen ----------------------------------------------------------- */
.huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--luft); }
.huelle-schmal { max-width: calc(var(--breite-text) + 4rem); }
.abschnitt { padding-block: clamp(2rem, 5vw, 3.5rem); }
/* Frueher ein grau abgesetztes Band. Auf hellem Grund mit weissen Karten
   gliedert der Abschnittskopf die Seite, eine Haarlinie genuegt. */
.abschnitt-tief, .trennlinie { border-top: 1px solid var(--linie); }

/* Kopf: weiss, eine Linie darunter, klebt oben. Marke und Werkzeuge in der
   ersten Zeile, die Ressorts darunter. */
.kopf { position: sticky; top: 0; z-index: 60; background: var(--karte); border-bottom: 1px solid var(--linie); }
.kopf-oben { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.marke { display: inline-flex; align-items: center; gap: .42rem; font-size: 1.25rem; font-weight: 800;
         letter-spacing: -.035em; color: var(--tinte); }
.marke:hover { color: var(--tinte); }
.marke em { font-style: normal; background: var(--akzent); color: var(--auf-akzent);
            padding: .05em .36em .1em; border-radius: 6px; }
.marke:hover em { background: var(--akzent-tief); }
.kopf-werkzeuge { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

/* Suchfeld im Kopf: Feld und Lupe sitzen in einem Rahmen und sind zusammen so
   hoch wie der Ansichtsknopf daneben. Die Breite steht fest und ist klein, denn
   der Kopf ist eine Abkuerzung, nicht die Suchseite. */
.kopfsuche {
  display: flex; align-items: center; gap: .15rem; height: 40px;
  padding-inline: .75rem .2rem; border: 1px solid var(--rand-eingabe);
  border-radius: 10px; background: var(--karte);
}
.kopfsuche:focus-within { border-color: var(--akzent); outline: 2px solid var(--akzent); outline-offset: 1px; }
.kopfsuche-feld {
  width: 170px; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--tinte); font-family: inherit; font-size: .875rem; padding: 0;
}
.kopfsuche-feld::placeholder { color: var(--tinte-still); opacity: 1; }
/* Zwei Klassen tief, weil .ikonknopf weiter unten steht und sonst Rahmen und
   Flaeche zurueckholt: die Lupe sah dann aus wie ein zweites Feld im Feld. */
.kopfsuche .kopfsuche-knopf { width: 32px; height: 32px; border-color: transparent; background: transparent; }
.kopfsuche .kopfsuche-knopf svg { width: 16px; height: 16px; }

/* Unter 640 Pixeln nimmt das Feld dem Kopf die Luft. Dort bleibt der
   Ressort-Link Suche, der auf dieselbe Seite fuehrt. */
@media (max-width: 640px) { .kopfsuche { display: none; } }

.ressorts { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--linie); }
.ressorts::-webkit-scrollbar { display: none; }
/* 44 Pixel Fingerflaeche von Anfang an: nachtraeglich eingebaut, verschiebt es
   jede Hoehe. */
.ressorts a {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem;
  font-size: .875rem; font-weight: 550; color: var(--tinte-leise);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.ressorts a:hover { color: var(--tinte); }
.ressorts a[aria-current="page"] { color: var(--tinte); font-weight: 650; border-bottom-color: var(--akzent); }

.ikonknopf {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--linie); border-radius: 10px; background: var(--karte);
  color: var(--tinte-leise); cursor: pointer;
}
.ikonknopf:hover { border-color: var(--linie-stark); color: var(--tinte); }
.ikonknopf svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .ikonknopf { width: 44px; height: 44px; } }

/* Anmelden und Kontomenue im Kopf, seit 27.09.2026. Dieselben Farbpaare wie die
   Knoepfe daneben. Unter 641 Pixeln nur das Symbol mit 44 Pixeln Fingerflaeche,
   der Name steht dann im aria-label; sonst liefe der Kopf bei 360 Pixeln ueber. */
.kopf-anmelden {
  display: inline-flex; align-items: center; gap: .4rem; height: 40px; padding: 0 .8rem;
  border: 1px solid var(--linie-stark); border-radius: 10px; background: var(--karte);
  color: var(--tinte); font-size: .875rem; font-weight: 600; white-space: nowrap;
}
.kopf-anmelden:hover { border-color: var(--tinte-still); color: var(--tinte); }
.kopf-anmelden svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 640px) {
  .kopf-anmelden { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .kopf-anmelden span { display: none; }
}
.kontomenue { position: relative; }
.kontomenue > summary { list-style: none; }
.kontomenue > summary::-webkit-details-marker { display: none; }
.kontoknopf {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--akzent); color: var(--auf-akzent); font-size: .875rem; font-weight: 700; cursor: pointer;
}
.kontoknopf:hover { background: var(--akzent-tief); }
.kontoknopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
@media (max-width: 640px) { .kontoknopf { width: 44px; height: 44px; } }
/* Mit dem Kontoknopf ist die erste Kopfzeile 393 Pixel breit (gemessen am 27.09.2026,
   scrollWidth bei 360 und 375). Unter 401 Pixeln faellt deshalb der Link der Sprache
   weg, in der man die Seite gerade liest: er fuehrt auf sich selbst. Die andere
   Sprache bleibt als Textlink stehen, die Fingerflaechen bleiben 44 Pixel. */
@media (max-width: 400px) { .sprachwahl a[aria-current="true"] { display: none; } }
.kontomenue-liste {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 70; width: min(16rem, calc(100vw - 2rem));
  padding: .4rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte);
  box-shadow: 0 8px 24px rgb(17 24 39 / .12);
}
.kontomenue-wer { margin: .35rem .6rem .5rem; font-size: .8125rem; color: var(--tinte-still);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kontomenue-liste a, .kontomenue-liste button {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 .6rem; border: 0; border-radius: 8px;
  background: transparent; color: var(--tinte); font: inherit; font-size: .9375rem; text-align: left; cursor: pointer;
}
.kontomenue-liste a:hover, .kontomenue-liste button:hover { background: var(--papier-tief); color: var(--tinte); }
.kontomenue-liste form { margin: .25rem 0 0; padding-top: .25rem; border-top: 1px solid var(--linie); }

/* Sammlungs-Kasten der Startseite, nur angemeldet. Mengen, kein Betrag. */
.sammlungskasten-huelle { margin-top: 1.25rem; }
.sammlungskasten { display: grid; gap: 1rem; align-items: center; border-left: 3px solid var(--akzent); }
.sammlungskasten h2 { margin-bottom: .35rem; }
.sammlungskasten p:last-child { margin-bottom: 0; }
@media (min-width: 860px) { .sammlungskasten { grid-template-columns: minmax(0, 1fr) auto; } }

/* Sprachwahl im Kopf, seit 11.09.2026: Textlinks, keine Flaggen und keine
   selbst gezeichneten Symbole. Die aktuelle Sprache ist unterstrichen in der
   Akzentfarbe, wie der aktive Reiter darunter. Dieselben Farbpaare wie die
   Ressorts, bin/kontrast-pruefen.py kennt sie schon. */
.sprachwahl { display: flex; align-items: center; gap: .1rem; }
.sprachwahl a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 .55rem; border-radius: 8px;
  font-size: .8125rem; font-weight: 600; color: var(--tinte-leise); white-space: nowrap;
}
.sprachwahl a:hover { color: var(--tinte); background: var(--papier-tief); }
.sprachwahl a[aria-current="true"] {
  color: var(--tinte); text-decoration: underline; text-decoration-color: var(--akzent);
  text-decoration-thickness: 2px; text-underline-offset: .45em;
}
@media (max-width: 640px) { .sprachwahl a { min-height: 44px; padding: 0 .45rem; } }

/* ---- 4 Bausteine -------------------------------------------------------- */

/* Die Karte: weiss, 1 Pixel Rahmen, 16 Pixel Radius, kein Schatten. Zwoelf
   Karten mit Schatten ergeben zwoelf Lichtquellen; ein Rahmen trennt, ohne zu
   leuchten. Beim Ueberfahren wird nur der Rahmen dunkler, nichts hebt ab. */
.tafel { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: 1.25rem; }
a.tafel { display: block; transition: border-color .15s; }
a.tafel:hover { border-color: var(--linie-stark); color: inherit; }
a.tafel:hover h3 { color: var(--akzent); }

.raster { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .raster-2, .raster-3, .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                            .raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Auf dem Telefon zeigt ein Abschnitt hoechstens vier Eintraege, der Rest
   steht hinter "alle ansehen". Lehre aus tcgcheck.de: dort 10.296 Pixel
   Startseite auf 375 Pixeln, weil vier Bloecke zu je vier Karten
   ungedeckelt untereinander standen. */
@media (max-width: 559px) { .raster-deckel > :nth-child(n+5) { display: none; } }

/* Kennzeile ueber einer Ueberschrift: 12 Pixel, Grossbuchstaben, gesperrt, in
   der Akzentfarbe. Der Punkt davor traegt die Spielfarbe, wo es eine gibt, die
   Schrift nie: Pokemon-Gelb #f0b429 hatte als Schrift auf Weiss 1,86:1. */
.augenbraue, .marker {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .5rem;
  font-size: .75rem; font-weight: 650; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase;
  color: var(--akzent);
}
.augenbraue::before, .marker::before {
  content: ""; width: 6px; height: 6px; border-radius: 2px; flex: none;
  background: var(--spielfarbe, currentColor);
}
.augenbraue a { color: inherit; }
.augenbraue a:hover { color: var(--akzent-tief); }
.marker-spiel { color: var(--tinte-leise); }

/* Symbol, seit 20.09.2026, siehe lib/ikon.php. Groesse aus der Schriftgroesse,
   Farbe aus currentColor: damit erbt jedes Symbol den Kontrast seiner Zeile und
   kann keinen eigenen Kontrastfehler erzeugen. Die Strichstaerke ist die der
   beiden Kopfsymbole, die es seit dem 02.09.2026 gibt.

   Ein Symbol steht nie allein fuer eine Aussage, neben jedem steht das Wort.
   Deshalb traegt es aria-hidden und zaehlt nicht als Tippflaeche. */
.ikon { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor;
        stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* In der Kennzeile ersetzt es den Punkt davor, sonst staenden zwei Zeichen
   nebeneinander, die dasselbe sagen. */
.augenbraue.mit-ikon::before, .spalte-titel.mit-ikon::before { content: none; }
.spalte-titel.mit-ikon { display: inline-flex; align-items: center; gap: .45rem; }
.augenbraue .ikon, .spalte-titel .ikon { width: 15px; height: 15px; }

.chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; line-height: 1.25; background: var(--papier-tief); color: var(--tinte-leise);
}
.chip-akzent { background: var(--akzent-grund); color: var(--akzent); }
.chip-warn { background: var(--warn-grund); color: var(--warn); }
.chip-punkt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--spielfarbe, currentColor); }
a.chip:hover { background: var(--papier-tiefer); color: var(--tinte); }

/* Pille: eine Angabe, eine Pille. Zwei Angaben sind zwei Pillen. Auf Bildern
   die einzige Form fuer Zusatzangaben, damit ein Bild keine Textzone braucht. */
.pille {
  display: inline-flex; align-items: center; gap: .4rem; height: 26px; padding: 0 .7rem; border-radius: 999px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .03em; line-height: 1; white-space: nowrap;
  max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
}
.pille-glas { background: rgba(17, 24, 39, .74); color: #ffffff; }
.pille-hell { background: rgba(255, 255, 255, .94); color: #111827; border: 1px solid rgba(17, 24, 39, .08); }

/* Die Bestandszahl mit Lebenszeichen, das erste Vertrauenssignal der
   Startseite: eine gezaehlte Zahl statt einer Behauptung. Direkt darunter
   steht, woher sie kommt und wann zuletzt abgeglichen wurde. */
.bestand {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0; padding: .45rem .85rem .45rem .75rem;
  border: 1px solid var(--linie); border-radius: 999px; background: var(--karte);
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte);
}
.lebenszeichen { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); flex: none; }
.lebenszeichen::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gruen);
  animation: tj-puls 2.4s ease-out infinite;
}
@keyframes tj-puls { from { transform: scale(1); opacity: .55; } to { transform: scale(2.8); opacity: 0; } }
.herkunft { margin: .9rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--tinte-still); }
.herkunft a { color: var(--tinte-leise); text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: .2em; }
.herkunft a:hover { color: var(--akzent); text-decoration-color: currentColor; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px;
  padding: .6rem 1.15rem; border: 1px solid transparent; border-radius: 10px;
  font: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap;
}
.knopf-voll { background: var(--akzent); color: var(--auf-akzent); }
.knopf-voll:hover { background: var(--akzent-tief); color: var(--auf-akzent); }
.knopf-rand { background: var(--karte); border-color: var(--linie-stark); color: var(--tinte); }
.knopf-rand:hover { border-color: var(--tinte-still); color: var(--tinte); }

/* Eingabefeld. Der Rahmen erfuellt 3:1, sonst ist ein weisses Feld auf weisser
   Flaeche nicht als Feld zu erkennen. */
.eingabe {
  width: 100%; min-height: 44px; padding: .55rem .85rem; font: inherit; font-size: 1rem; line-height: 1.3;
  color: var(--tinte); background: var(--karte); border: 1px solid var(--rand-eingabe); border-radius: 10px;
}
input.eingabe { -webkit-appearance: none; appearance: none; }
.eingabe::placeholder { color: var(--tinte-still); opacity: 1; }
.eingabe:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); }
.feldname { display: block; margin-bottom: .35rem; font-size: .75rem; font-weight: 650; letter-spacing: .08em;
            text-transform: uppercase; color: var(--tinte-leise); }
.eingabe-wahl { width: auto; padding-right: .65rem; }

.tabelle-huelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius-gross); background: var(--karte); }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { padding: .7rem .95rem; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-still); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--papier); }
tr[aria-current="page"] td { background: var(--akzent-grund); }
td.zahl, th.zahl { text-align: right; }
/* Auf dem Telefon dichter: mit der Luft vom Rechner wurde die Liste aller 161
   Sets auf 375 Pixeln 1.347 Pixel laenger als vorher. */
@media (max-width: 559px) { th, td { padding: .55rem .7rem; } table { font-size: .9rem; } }

/* ---- Sofortfilter der Kartenliste (Setseiten) ---------------------------- */
/* Der Block wird ohne JavaScript nie sichtbar: das hidden-Attribut steht im
   HTML, erst tcgjournal.js nimmt es weg. Die [hidden]-Regel steht deshalb
   HINTER der Anzeigeregel und ist eine Klasse spezifischer, sonst gewaenne
   das display:flex gegen die Vorgabe des Browsers. */
.kartensuche { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .55rem 1.1rem; margin-bottom: 1.1rem; }
.kartensuche[hidden] { display: none; }
.kartensuche-feld { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 20rem; min-width: 0; }
.kartensuche-marke { font-size: .75rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-leise); }
.kartensuche input {
  width: 100%; min-height: 44px; font-family: var(--schrift); font-size: 1rem; line-height: 1.3;
  padding: .55rem .85rem; border-radius: 10px; background: var(--karte);
  border: 1px solid var(--rand-eingabe); color: var(--tinte); -webkit-appearance: none; appearance: none;
}
.kartensuche input::placeholder { color: var(--tinte-still); opacity: 1; }
.kartensuche input:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); }
.kartensuche-zahl { margin: 0 0 .7rem; font-size: .875rem; color: var(--tinte-leise); white-space: nowrap; }

.kartensuche-leer { margin-top: 1rem; padding: .9rem 1.05rem; border-radius: var(--radius);
                    border: 1px solid var(--linie); background: var(--karte);
                    color: var(--tinte-leise); font-size: .9rem; }
.kartensuche-leer[hidden] { display: none; }
.kartensuche-leer b { color: var(--tinte); }

/* Sicherheitsgurt: eine verborgene Zeile muss auch dann verschwinden, wenn ein
   Browser display:table-row hoeher gewichtet als das hidden-Attribut. */
#kartenliste tbody tr[hidden] { display: none; }
/* Beim Filtern ist die letzte Zeile im Dokument meist ausgeblendet. Ohne diese
   Regel behielte die letzte SICHTBARE Zeile ihre Trennlinie, und der Kasten
   bekaeme einen Strich zu viel am Fuss. */
#kartenliste tbody tr.ist-letzte td { border-bottom: 0; }

/* Dieselbe Karte in den anderen Sprachen, seit 11.09.2026 die letzte Spalte
   der Kartenliste. Kleiner als der Kartenname, der die Hauptsache der Zeile
   bleibt; gleiche Namen stehen einmal mit allen Sprachkuerzeln. Die
   Mindestbreite haelt die Spalte auf dem Telefon lesbar, dort scrollt die
   Tabelle ohnehin seitlich in .tabelle-huelle. */
td.andere-namen { min-width: 13rem; font-size: .8125rem; line-height: 1.45; color: var(--tinte-leise); }
td.andere-namen a { color: var(--akzent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
td.andere-namen a:hover { color: var(--akzent-tief); }
.kuerzel { font-size: .6875rem; font-weight: 650; letter-spacing: .06em; color: var(--tinte-still); white-space: nowrap; }
/* Wer ueber den Querverweis auf eine Karte springt, landet auf ihrer Zeile.
   Ohne Abstand laege sie unter dem klebenden Kopf, 108 Pixel hoch. Markiert
   mit einem Rahmen statt einer Flaeche: auf --akzent-grund faellt
   --tinte-still in der Illustratorspalte unter AA, und Schatten gibt es im
   Raster seit dem 11.09.2026 keine. */
#kartenliste tbody tr { scroll-margin-top: 8rem; }
#kartenliste tbody tr:target { outline: 2px solid var(--akzent); outline-offset: -2px; }

.kasten { border: 1px solid var(--linie); border-left: 3px solid var(--akzent); background: var(--karte);
          border-radius: var(--radius); padding: 1rem 1.15rem; margin: 1.6rem 0; }
.kasten p:last-child { margin-bottom: 0; }
.kasten-titel { font-weight: 700; margin-bottom: .3rem; font-size: .95rem; color: var(--tinte); }

.werbehinweis { font-size: .78rem; line-height: 1.5; color: var(--tinte-still); margin: .6rem 0 0; display: flex; gap: .35rem; }
.werbehinweis b { color: var(--tinte-leise); font-weight: 650; }
.werbehinweis a { text-decoration: underline; text-underline-offset: .2em; }

.liste-haken { list-style: none; padding: 0; margin: 0 0 1.1em; display: grid; gap: .5rem; }
.liste-haken li { padding-left: 1.4rem; position: relative; }
.liste-haken li::before { content: ""; position: absolute; left: 0; top: .6em; width: .42rem; height: .42rem; border-radius: 2px; background: var(--akzent); }

/* Abschnittskopf als feste Formel: Kennzeile, darunter die H2, rechts der Weg
   zu allem. Er ersetzt jede Trennlinie und beantwortet beim Scrollen die
   Frage, wo man gerade ist. */
.ressortkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: .25rem 1.5rem;
               flex-wrap: wrap; margin-bottom: 1.25rem; }
.ressortkopf h2 { margin: 0; }

/* Blaetterleiste unter Listen (SPEC-Webseitenbau 3.7), echte Links auf jede Seite */
.blaetter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 1.5rem 0 0; }
.blaetter a, .blaetter span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem;
  padding: 0 .9rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte);
  font-size: .9rem; font-weight: 600; color: var(--tinte); text-decoration: none; }
.blaetter a:hover { border-color: var(--linie-stark); }
.blaetter span[aria-current] { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.ressortkopf .augenbraue { margin-bottom: .35rem; }
.ressortkopf > a, .mehr {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px;
  font-size: .875rem; font-weight: 600; color: var(--akzent); white-space: nowrap;
}
.ressortkopf > a::after, .mehr::after { content: "\2192"; transition: transform .15s; }
.ressortkopf > a:hover, .mehr:hover { color: var(--akzent-tief); }
.ressortkopf > a:hover::after, .mehr:hover::after { transform: translateX(2px); }

/* Seitenkopf der Unterseiten */
.aufmacher { padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(1.1rem, 2.5vw, 1.75rem); }
.aufmacher h1 { max-width: 24ch; }

/* Bildband: eine Karte aus Text und Symbolfoto nebeneinander, seit 20.09.2026.
   Zwei Verwendungen, damit kein zweites Bauteil daneben entsteht: der Kopf der
   Kartendatenbank und der Abschnitt Kaufwege auf der Startseite. Beide standen
   vorher ganz ohne Bild da, die Kartendatenbank auf 14.224 Pixeln Hoehe.

   Wie beim Einstieg steht keine Schrift auf dem Foto. Die Pille "Symbolbild"
   ist seit 11.10.2026 weg (Auftrag Dennis: keine Symbolbilder). */
.bildband { display: grid; overflow: hidden; background: var(--karte);
            border: 1px solid var(--linie); border-radius: var(--radius-gross); }
@media (min-width: 860px) { .bildband { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); } }
.bildband-bild { position: relative; min-height: 220px; background: var(--papier-tief); }
.bildband-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 859px) { .bildband-bild { aspect-ratio: 21 / 9; min-height: 0; order: -1; } }
/* Gedreht: Foto links, Text rechts. Nur ab 860 Pixeln, darunter steht das Foto
   immer oben, sonst begaenne die Seite unter dem Kopf mit einem Textblock. */
@media (min-width: 860px) { .bildband-gedreht .bildband-bild { order: -1; } }
.bildband-text { display: flex; flex-direction: column; justify-content: center;
                 padding: clamp(1.15rem, 2.6vw, 1.9rem); }
.bildband-text > :last-child { margin-bottom: 0; }
.bildband-text h1, .bildband-text h2 { margin-bottom: .5rem; }

/* Kopfbild, seit 11.10.2026 (lib/bilder.php): ein breites Foto unter dem Vorspann
   der Unterseiten, die bis dahin ganz ohne Bild standen. Keine Schrift auf dem
   Foto, kein Hinweisschild; die Herkunft steht unter /datenquellen/#fotos. */
.kopfbild { margin: 1.4rem 0 0; aspect-ratio: 21 / 8; overflow: hidden; background: var(--papier-tief);
            border: 1px solid var(--linie); border-radius: var(--radius-gross); }
.kopfbild img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .kopfbild { aspect-ratio: 16 / 9; } }
.vorspann { font-size: clamp(1rem, .95rem + .3vw, 1.125rem); color: var(--tinte-leise); max-width: 62ch; margin-bottom: 1.2rem; }

/* ---- 5 Seitenteile ------------------------------------------------------ */

/* Einstieg der Startseite: Bestandszahl, eine Ueberschrift, die Suche. */
.held { padding-block: clamp(1.75rem, 4.5vw, 3.5rem) clamp(1.5rem, 3.5vw, 3rem); }
.held-raster { display: grid; gap: 2rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .held-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 3.25rem; } }
.held h1 { margin: 1.1rem 0 .8rem; max-width: 13ch; font-size: clamp(2.125rem, 1.3rem + 3.3vw, 3.5rem);
           line-height: 1.04; letter-spacing: -.035em; }
.held-vorspann { max-width: 44ch; margin-bottom: 1.4rem; font-size: clamp(1.02rem, .96rem + .3vw, 1.15rem); color: var(--tinte-leise); }
.held-suche { display: flex; gap: .5rem; max-width: 32rem; }
.held-suche .eingabe { flex: 1 1 auto; min-width: 0; }
.held-beispiele { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: .8rem 0 0; font-size: .8125rem; color: var(--tinte-still); }
.held-beispiele a { color: var(--tinte-leise); text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: .22em; }
.held-beispiele a:hover { color: var(--akzent); text-decoration-color: currentColor; }

/* Rechts vier Karten aus den vier neuesten Sets, gerade und vollstaendig auf
   ruhigem Feld: die Ware selbst, keine Geraeteattrappe, kein Faecher. Auf dem
   Telefon bleiben drei stehen. tcgcheck.de blendet sein Heldbild dort aus,
   dann hat der erste Bildschirm kein einziges Bild. */
.held-auslage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.6rem, 1.4vw, 1rem);
                padding: clamp(1rem, 2.4vw, 1.6rem); background: var(--karte);
                border: 1px solid var(--linie); border-radius: var(--radius-gross); }
.held-karte { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.held-karte img { width: 100%; aspect-ratio: 245 / 342; object-fit: contain; border-radius: 4.5% / 3.2%; background: var(--papier-tief); }
/* Zwei Zeilen statt Auslassungspunkten: "Wachsendes ..." sagte auf 375 Pixeln
   nicht mehr, aus welchem Set die Karte ist. */
.held-karte span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
                   text-wrap: balance; font-size: .75rem; font-weight: 600; line-height: 1.3; color: var(--tinte-leise); }
.held-karte:hover span { color: var(--akzent); }
@media (max-width: 559px) { .held-auslage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                            .held-karte:nth-child(4) { display: none; } }

/* Symbolfoto hinter der rechten Haelfte des Einstiegs, seit 20.09.2026.
   Anlass: Dennis am 20.09.2026, der erste Bildschirm soll einen Eindruck
   machen und nicht wie ein Formular mit Beilage aussehen.

   DIE REGEL, die diese Loesung bestimmt: Das Foto liegt HINTER der Auslage und
   NIE hinter Schrift. Jede Textstelle des Einstiegs steht weiter auf --papier
   oder auf der undurchsichtigen weissen Auslage. Schrift auf einem Foto waere
   schoener und nicht mehr messbar: bin/auftritt-messen.py prueft jede sichtbare
   Textstelle gegen ihren gerechneten Grund, ein Bild kennt es nicht. Der
   Bestand steht seit dem 11.09.2026 auf 0 Stellen unter AA, und diese Null
   soll eine gemessene bleiben und keine geschaetzte.

   Unter 960 Pixeln faellt das Foto weg. Dort steht der Einstieg einspaltig,
   das Foto laege also unter der Ueberschrift, und genau das soll es nicht.
   Den Bildeindruck traegt auf dem Telefon der Abschnitt "Drei Wege" darunter. */
.held { position: relative; overflow: hidden; }
.held > .huelle { position: relative; z-index: 1; }
.held-foto { position: absolute; inset: 0 0 0 auto; width: min(64%, 900px); pointer-events: none; }
.held-foto img { width: 100%; height: 100%; object-fit: cover; }
.held-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
      rgb(var(--papier-teile) / 1) 0%,
      rgb(var(--papier-teile) / .92) 22%,
      rgb(var(--papier-teile) / .58) 58%,
      rgb(var(--papier-teile) / .42) 100%);
}
@media (max-width: 959px) { .held-foto { display: none; } }

/* Drei Wege: die grossen Fotokacheln unter dem Einstieg, seit 20.09.2026.
   Sie sind kein Zierat, sondern der Rangunterschied, der der Startseite
   fehlte: bis hierher war jeder Abschnitt gleich laut, und der Blick fand
   keinen Ankerpunkt. Jede Kachel traegt ihre gezaehlte Zahl, damit ein Bild
   nicht ohne Aussage dasteht. */
.wege { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .wege { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.weg { display: flex; flex-direction: column; overflow: hidden; background: var(--karte);
       border: 1px solid var(--linie); border-radius: var(--radius-gross); }
.weg:hover { border-color: var(--linie-stark); color: inherit; }
.weg:hover h3 { color: var(--akzent); }
/* min-height: 0 ist hier kein Zierat, sondern die eigentliche Regel. .weg ist
   ein Flex-Kasten in Spaltenrichtung, und die automatische Mindesthoehe eines
   Flex-Elements ist seine Inhaltshoehe. Das Foto ist 1600 zu 900, also setzte
   sich am 20.09.2026 auf 375 Pixeln sein eigenes Verhaeltnis gegen das
   aspect-ratio darunter durch: gemessen 193 statt 147 Pixel, dreimal auf der
   Seite. Auf 1280 fiel es nicht auf, weil dort beide Verhaeltnisse gleich sind. */
.weg-bild { position: relative; aspect-ratio: 16 / 9; min-height: 0; background: var(--papier-tief); }
.weg-bild img { width: 100%; height: 100%; object-fit: cover; }
/* Auf dem Telefon stehen die drei untereinander. Bei 16:9 waeren das rund 580
   Pixel nur fuer Bilder, deshalb dort ein flacheres Band. */
@media (max-width: 759px) { .weg-bild { aspect-ratio: 21 / 9; } }
.weg-text { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.15rem 1.15rem; }
.weg h3 { margin: 0 0 .3rem; font-size: 1.125rem; line-height: 1.25; }
.weg p { margin: 0 0 .9rem; font-size: .9rem; color: var(--tinte-leise); }
/* p.weg-zahl und nicht .weg-zahl: die Regel .weg p darueber setzt margin als
   Kurzform und ist spezifischer als eine einzelne Klasse. Mit margin-top: auto
   allein stand die Zahlzeile der ersten Kachel 17 Pixel hoeher als die der
   anderen beiden, am 20.09.2026 im Bild gesehen. */
p.weg-zahl { display: flex; align-items: baseline; gap: .5rem; margin: auto 0 0;
             padding-top: .75rem; border-top: 1px solid var(--linie); }
.weg-zahl b { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--tinte); }
.weg-zahl span { font-size: .8125rem; color: var(--tinte-leise); }

/* Zwei Spalten: links das Raster, rechts eine Liste in einer Karte */
.aufmacher-raster { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .aufmacher-raster { grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr); gap: 1.5rem; } }

.liste-tafel { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-gross); padding: 1.1rem 1.25rem .5rem; }
.spalte-titel { margin: 0 0 .2rem; font-size: .75rem; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent); }
.meldung { display: block; padding: .85rem 0; border-bottom: 1px solid var(--linie); }
.meldung:last-of-type { border-bottom: 0; }
.meldung h3 { font-size: .98rem; margin: .2rem 0; line-height: 1.3; }
.meldung p { font-size: .875rem; color: var(--tinte-leise); margin: 0; }
.meldung-zeit { font-size: .75rem; color: var(--tinte-still); }
/* Seit 27.09.2026: Zusatz an einer Meldung, deren angekuendigter Termin vorbei ist, siehe tj_meldung_stand(). */
.meldung .meldung-nachtrag { font-size: .8rem; font-weight: 650; color: var(--akzent); margin: .1rem 0 .3rem; }

/* Beitragskarte. Das Bild sitzt buendig oben in der Karte, der Text darunter. */
.beitrag { display: flex; flex-direction: column; overflow: hidden; padding: 1.15rem 1.2rem 1.2rem;
           background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-gross); transition: border-color .15s; }
.beitrag:hover { border-color: var(--linie-stark); color: inherit; }
.beitrag:hover h2, .beitrag:hover h3 { color: var(--akzent); }
.beitrag > .auslage { margin: -1.15rem -1.2rem 1rem; border-radius: 0; }
.beitrag .marker { margin: 0 0 .35rem; }
.beitrag h3 { margin: 0 0 .35rem; font-size: 1.0625rem; line-height: 1.3; }
.beitrag p { font-size: .9rem; color: var(--tinte-leise); margin-bottom: .6rem; }
.beitrag-fuss { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; margin-top: auto; font-size: .78rem; color: var(--tinte-still); }
.beitrag-gross h3 { margin: .1rem 0 .5rem; font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem); line-height: 1.12; letter-spacing: -.03em; }
.beitrag-gross p { font-size: 1rem; max-width: 62ch; }

/* Leitgeschichte der Magazinuebersicht, seit 20.09.2026. Bild links, Text
   rechts, ueber die ganze Breite. Bis heute standen dort sieben gleich grosse
   Kacheln mit demselben Bildmotiv, und die Seite, auf die Menschen zum Lesen
   kommen, hatte keinen Anfang.

   Gebaut aus .beitrag und .auslage, die es beide seit dem 11.09.2026 gibt.
   Gebraucht werden nur die Ausnahmen: Raster statt Spalte, keine Polsterung
   aussen, und das Bildfeld ohne den negativen Rand, mit dem es in der kleinen
   Kachel den Kartenrand erreicht. */
.beitrag-leit { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; }
@media (min-width: 900px) { .beitrag-leit { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.beitrag-leit > .auslage { margin: 0; border-radius: 0; height: 100%; }
.beitrag-leit-text { display: flex; flex-direction: column; justify-content: center;
                     padding: clamp(1.15rem, 2.6vw, 2rem); }
.beitrag-leit h2 { margin: .1rem 0 .55rem; font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2.05rem);
                   line-height: 1.12; letter-spacing: -.03em; }
.beitrag-leit p { margin-bottom: .75rem; font-size: 1rem; color: var(--tinte-leise); max-width: 54ch; }
.beitrag-leit:hover h2 { color: var(--akzent); }

/* Laufband mit Karten */
.laufband { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .75rem; scroll-snap-type: x proximity; }
.laufband::-webkit-scrollbar { height: 6px; }
.laufband::-webkit-scrollbar-thumb { background: var(--linie-stark); border-radius: 99px; }
.laufband > * { flex: 0 0 auto; scroll-snap-align: start; }
.laufkarte { width: 150px; padding: .5rem .5rem .65rem; background: var(--karte); border: 1px solid var(--linie);
             border-radius: var(--radius); transition: border-color .15s; }
.laufkarte:hover { border-color: var(--linie-stark); color: inherit; }
.laufkarte img { width: 100%; aspect-ratio: 245 / 342; object-fit: contain; border-radius: 5px; background: var(--papier-tief); }
/* Kartenbild fehlt bei der Quelle (tcgjournal.js, seit 10.10.2026): Flaeche bleibt, kaputtes Symbol nicht. */
img.bild-fehlt { visibility: hidden; }
.laufkarte b { display: block; margin-top: .5rem; font-size: .8125rem; font-weight: 600; line-height: 1.3; color: var(--tinte); }
.laufkarte span { font-size: .75rem; color: var(--tinte-still); }

/* Setkachel: das Logo auf hellem Feld wie ein Produktfoto, darunter Name und
   Umfang. Das Feld macht Logos aus verschiedenen Jahren vergleichbar. */
.setkachel { display: flex; flex-direction: column; gap: .3rem; padding: .7rem .7rem 1rem;
             background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-gross); transition: border-color .15s; }
.setkachel:hover { border-color: var(--linie-stark); color: inherit; }
/* Flex und nicht Grid: in einem Grid ohne feste Zeilenhoehe greift
   max-height: 100% nicht, und auf 375 Pixeln sprengte das Logo von "Optimale
   Ordnung" sein Feld und ueberdeckte den Setnamen. */
.setkachel-logo { display: flex; align-items: center; justify-content: center; height: 88px; margin-bottom: .45rem;
                  padding: .7rem; background: var(--papier); border-radius: var(--radius); }
.setkachel-logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.setkachel-logo .setkachel-karte { height: 100%; border-radius: 3px; }
/* Auf dem Telefon zwei Setkacheln nebeneinander wie die Produktkacheln bei
   tcgcheck.de. Einzeln war jede 343 Pixel breit und fast leer. */
@media (max-width: 559px) { .raster-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }
.setkachel b { padding-inline: .3rem; font-size: .9375rem; font-weight: 650; line-height: 1.25; color: var(--tinte); }
.setkachel span { padding-inline: .3rem; font-size: .8125rem; color: var(--tinte-still); }

/* Versiegelte Produkte, seit 11.09.2026. Die Kachel folgt der Setkachel: weiss,
   1 Pixel Rahmen, oben ein ruhiges Feld. Dort steht ein Produktfoto mit
   object-fit: contain, sobald der Rechteweg fuer Fotos geklaert ist. Bis dahin
   traegt das Feld die Zahl der Boosterpacks, in --tinte und --tinte-leise:
   --tinte-still faellt auf --papier-tief unter AA. */
.produktraster { align-items: start; }
.produktkachel { display: flex; flex-direction: column; gap: .35rem; padding: .7rem .7rem 1rem;
                 background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-gross);
                 scroll-margin-top: 124px; }
.produktkachel:target { border-color: var(--akzent); }
.produktfeld { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
               aspect-ratio: 16 / 9; margin-bottom: .45rem; padding: .7rem; background: var(--papier-tief);
               border-radius: var(--radius); }
.produktfeld img { width: 100%; height: 100%; object-fit: contain; }
.produktfeld-zahl { font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); font-weight: 750; line-height: 1;
                    letter-spacing: -.04em; color: var(--tinte); font-variant-numeric: tabular-nums; }
.produktfeld-was { font-size: .8125rem; font-weight: 600; color: var(--tinte-leise); }
.produktkachel .marker, .produktkachel h3, .produktkachel p, .produktkachel ul { padding-inline: .3rem; }
.produktkachel .marker { margin: 0; }
.produktkachel h3 { margin: 0 0 .15rem; font-size: 1rem; line-height: 1.3; }
.inhalt-booster { list-style: none; margin: 0; display: grid; gap: .1rem; font-size: .9rem; font-weight: 650; color: var(--tinte); }
.inhalt-kopf { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--tinte-leise); }
.produkt-fuss { display: flex; flex-direction: column; gap: .15rem; margin: auto 0 0; padding-top: .45rem;
                font-size: .75rem; line-height: 1.4; color: var(--tinte-still); }
/* Auf dem Telefon wird das Feld zu einem flachen Band: sechzehn zu neun ueber
   die volle Breite waeren 190 Pixel fuer eine einzige Zahl. */
@media (max-width: 559px) {
  .produktfeld { aspect-ratio: auto; flex-direction: row; align-items: baseline; justify-content: flex-start;
                 gap: .5rem; padding: .55rem .85rem; }
  .produktfeld-zahl { font-size: 1.9rem; }
}
.produktart h3 { margin: 0 0 .35rem; }
.produktart p { margin: 0 0 .7rem; font-size: .875rem; color: var(--tinte-leise); }
.produktart .chip { margin: 0 .3rem .3rem 0; }
.produkttabelle td:first-child { min-width: 14rem; }
/* Belegadressen brechen ueberall um. Ohne diese Regel schob die laengste
   Galerieadresse die Setseite auf 375 Pixeln auf 397 Pixel Breite, gemessen am
   11.09.2026 mit bin/auftritt-messen.py. */
.belege a { overflow-wrap: anywhere; }

/* Spielkachel: der Punkt in der Spielfarbe ersetzt die farbige Oberkante */
.spielkachel h2, .spielkachel h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .35rem; }
.spielkachel h2::before, .spielkachel h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--spielfarbe, var(--akzent)); }
.spielkachel p { margin: 0; font-size: .875rem; }
.spielkachel .chip { margin-top: .7rem; }

/* Termine */
.termin { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; padding: .8rem 0; border-bottom: 1px solid var(--linie); }
.termin:last-of-type { border-bottom: 0; }
.termin-datum { padding-top: .12rem; font-size: .8125rem; font-weight: 600; white-space: nowrap; color: var(--tinte-leise); }
.termin-inhalt h3 { margin: 0 0 .15rem; font-size: .98rem; }
.termin-inhalt p { margin: .25rem 0 0; font-size: .875rem; color: var(--tinte-leise); }
.termin-zeile { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

/* Der naechste Termin als eigene Karte, seit 20.09.2026. Die Terminseite hatte
   keinen Anfang: unter der Ueberschrift "Was als Naechstes erscheint" stand als
   Erstes ein Termin, der schon vorbei war, weil die Liste 14 Tage Rueckschau
   mitnimmt. Ein Foto haette daran nichts erklaert, eine Zahl erklaert alles. */
.naechster { border-color: var(--akzent-kante); }
.naechster-zeile { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: .6rem; }
.naechster-datum { flex: none; }
.naechster-datum b { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); color: var(--akzent); }
.naechster-datum span { margin-top: .15rem; }
.naechster h2 { margin: 0; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); }

/* Schon erschienen: leiser, aber lesbar. --tinte-still haelt auf --karte
   4,83:1 und damit AA, gemessen von bin/kontrast-pruefen.py. Vorher sah ein
   vergangener Termin genauso aus wie ein kommender. */
.termin-vorbei .termin-datum, .termin-vorbei .termin-inhalt h3 { color: var(--tinte-still); }

/* Beitragsseite. Eine Schriftfamilie: der Fliesstext stand bis 10.09.2026 in
   Georgia und war damit die zweite von drei Familien auf einer Seite. */
.artikeltext { font-size: 1.0625rem; line-height: 1.75; }
.artikeltext h2 { margin-top: 2em; }
.artikeltext h3 { margin-top: 1.6em; }
.artikeltext ul, .artikeltext ol { margin: 0 0 1.1em; padding-left: 1.25em; }
.artikeltext li { margin-bottom: .4em; }
.byline { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin: 0 0 1.6rem; font-size: .875rem; color: var(--tinte-leise); }

/* Kartenraster auf Setseiten. Jede Karte in einer eigenen Kachel mit ruhigem
   Bildfeld, ohne Schatten. Auf dem Telefon drei nebeneinander, wie auf einer
   Albumseite; bei zweien war die Setseite 151 auf 375 Pixeln 47.062 Pixel hoch. */
.kartenraster { display: grid; gap: .6rem; margin-top: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 560px) { .kartenraster { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.kartenfeld { margin: 0; padding: .4rem .4rem .55rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); }
.kartenfeld img { width: 100%; aspect-ratio: 245 / 342; object-fit: contain; border-radius: 5px; background: var(--papier-tief); }
.kartenfeld figcaption { margin-top: .45rem; padding-inline: .15rem; font-size: .78rem; line-height: 1.3; }
.kartenfeld figcaption b { display: block; font-weight: 600; color: var(--tinte); overflow-wrap: anywhere; }
.kartenfeld figcaption span { font-size: .72rem; color: var(--tinte-still); }
@media (min-width: 560px) { .kartenfeld { padding: .5rem .5rem .65rem; } }

/* Kennzahl */
.kennzahl b { display: block; font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--tinte); }
.kennzahl span { display: block; margin-top: .35rem; font-size: .875rem; line-height: 1.4; color: var(--tinte-leise); }
/* Auf dem Telefon werden drei Kennzahlkacheln zu einer Karte mit drei Zeilen.
   Untereinander gestapelt belegten sie auf 375 Pixeln rund 690 Pixel Hoehe
   fuer drei Zahlen. */
@media (max-width: 559px) {
  .kennzahlen { gap: 0; overflow: hidden; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-gross); }
  .kennzahlen > .tafel { border: 0; border-radius: 0; padding: .8rem 1rem; }
  .kennzahlen > .tafel + .tafel { border-top: 1px solid var(--linie); }
  .kennzahlen .kennzahl { display: flex; align-items: baseline; gap: .8rem; }
  .kennzahlen .kennzahl b { flex: none; min-width: 3.2ch; font-size: 1.45rem; }
  .kennzahlen .kennzahl span { margin: 0; }
}

/* Auslage: Karten als Beitragsbild. Karten sind hochkant, Beitragsbilder quer.
   Statt zu beschneiden stehen drei oder vier vollstaendige Karten gerade
   nebeneinander auf ruhigem Feld, oben links eine Pille mit dem Set. Bis zum
   10.09.2026 lagen sie gedreht mit Schatten auf einem Verlauf in der
   Spielfarbe: das war eine Buehne, kein Nachschlagewerk. */
.auslage { position: relative; aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
           gap: 3%; padding: 9% 7% 7%; overflow: hidden; border-radius: var(--radius-gross); background: var(--papier-tief); }
.auslage img { flex: 0 1 auto; height: 100%; width: auto; min-width: 0; object-fit: contain; border-radius: 4px; }
.auslage-gross { aspect-ratio: 16 / 9; gap: 2.5%; padding: 7% 8% 6%; }
.auslage .pille { position: absolute; left: 12px; top: 12px; }
/* Im Seitenkopf der Produktseiten, seit 11.10.2026: so breit wie .kopfbild. */
.auslage-kopf { margin-top: 1.4rem; aspect-ratio: 21 / 8; padding: 4.5% 8% 3.5%; gap: 2.5%;
                border: 1px solid var(--linie); }
@media (max-width: 700px) { .auslage-kopf { aspect-ratio: 16 / 10; padding: 12% 5% 5%; }
                            .auslage-kopf img:nth-of-type(4) { display: none; } }
.auslage-leer { font-size: clamp(2rem, 8vw, 4rem); font-weight: 800; letter-spacing: -.05em; color: var(--tinte-still); }
/* Auf schmalen Bildschirmen passen vier Karten nicht nebeneinander, die
   aeussere wird angeschnitten. Dann lieber eine weglassen. */
@media (max-width: 620px) {
  .auslage-gross img:nth-of-type(4) { display: none; }
  .auslage:not(.auslage-gross) img:nth-of-type(3) { display: none; }
}
/* Im Seitenkopf der Produktseiten bleiben auch auf dem Telefon drei Karten
   stehen, seit 11.10.2026: das Feld ist dort breiter als eine Beitragskachel. */
@media (max-width: 620px) { .auslage-kopf img:nth-of-type(3) { display: block; } }

/* Suchseite */
.suchformular { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.suchformular-feld { flex: 1 1 16rem; min-width: 0; }

/* Fuss: weiss wie der Kopf. Zwei Spalten auch auf dem Telefon, eine einzelne
   Spalte machte ihn dort ueber 1.000 Pixel hoch. */
.fuss { background: var(--karte); border-top: 1px solid var(--linie); padding-block: 2.75rem 1.5rem; margin-top: 3.5rem; font-size: .875rem; }
.fuss .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
@media (min-width: 900px) { .fuss .raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fuss h4 { margin: 0 0 .5rem; font-size: .75rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-still); }
.fuss a { display: flex; align-items: center; min-height: 40px; color: var(--tinte-leise); }
.fuss a:hover { color: var(--akzent); }
.fuss .werbehinweis a { display: inline; min-height: 0; }
.fuss-unten a { display: inline; min-height: 0; color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.fuss-unten { display: flex; gap: .5rem 1.5rem; flex-wrap: wrap; justify-content: space-between;
              margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--linie); font-size: .8rem; color: var(--tinte-still); }

.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--tinte); color: var(--papier); padding: .55rem 1rem; border-radius: var(--radius-klein); }

/* ---- 6 Hilfen ----------------------------------------------------------- */
.leise { color: var(--tinte-leise); }
.still { color: var(--tinte-still); }
.reihe { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.nur-lesehilfe { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kaufwege, seit 27.09.2026: Logo als Verweis auf den Anbieter, nur offizielle
   Dateien (data/haendler.json, Feld logo), und Unterverweise je Anbieter. */
.anbieter-logo { display: inline-block; margin: 0 0 .55rem; }
.anbieter-logo img { display: block; height: 34px; width: auto; }
.anbieter-links { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .45rem 0 0; font-size: .82rem; }
.anbieter-links a { color: var(--tinte-leise); text-decoration: underline; text-underline-offset: .2em; }

/* Einstieg ins Konto auf der Startseite, seit 11.10.2026 (index.php). */
.vorteile { list-style: none; padding: 0; margin: .2rem 0 1.1rem; display: grid; gap: .45rem; }
.vorteile li { position: relative; padding-left: 1.6rem; color: var(--tinte-leise); line-height: 1.45; }
.vorteile li::before { content: ""; position: absolute; left: 0; top: .28em; width: 1rem; height: 1rem; border-radius: 50%;
                       background: var(--akzent-grund) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.4' fill='none' stroke='%234338ca' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .8rem no-repeat; }
.vorteile b { color: var(--tinte); font-weight: 650; }
.konto-schnell .feldname { display: block; margin-bottom: .35rem; }
.konto-schnell .haken { margin-top: .7rem; }
.konto-schnell-hinweis { margin: .6rem 0 0; font-size: .8125rem; }

/* Haken und Lockfeld auch ausserhalb des Kontobereichs (konto.css laedt nur dort). */
.konto-schnell .haken { display: flex; gap: .6rem; align-items: flex-start; min-height: 44px; padding-top: .6rem;
                        cursor: pointer; line-height: 1.4; font-size: .875rem; color: var(--tinte-leise); }
.konto-schnell .haken input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--akzent); }
.konto-schnell .lockfeld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }