/* Routetree — Gestaltungssystem
 *
 * Dauerhaft dunkel, auf Wunsch von Niklas. Das Werkzeug wird abends am
 * Kuechentisch und am Spieltag am Rand des Platzes bedient; ein einziges
 * Thema haelt die Oberflaeche berechenbar und spart den Umschalter.
 *
 * Die Farben sind keine Erfindung, sondern die Notation der Zeichnung:
 * Petrol steht in Diagramm und Oberflaeche fuer Deckung und Bedienung,
 * Gold fuer den Ball, Ziegelrot fuer die Defense. Der AUSDRUCK bleibt
 * hell -- Papier hat kein dunkles Thema, die Druckfarben stehen fest in
 * designer/render.py.
 */

:root {
  /* --- Grundflaechen. Dunkel, mit einem Hauch Petrol im Neutralton. */
  --flaeche:        oklch(0.175 0.012 240);
  --flaeche-panel:  oklch(0.215 0.014 240);
  --flaeche-hoch:   oklch(0.252 0.014 240);
  --flaeche-tief:   oklch(0.148 0.012 240);

  /* --- Schrift */
  --ink:            oklch(0.945 0.006 240);
  --ink-leise:      oklch(0.795 0.010 240);
  --ink-still:      oklch(0.655 0.012 240);

  /* --- Linien */
  --linie:          oklch(0.305 0.014 240);
  --linie-stark:    oklch(0.405 0.016 240);

  /* --- Bedeutung. Identisch mit der Diagrammnotation. */
  --petrol:         oklch(0.755 0.078 220);
  /* Der Akzent der Marke IST Petrol. Bis heute benutzte die Startseite
     `--akzent`, ohne dass es definiert war -- sie fiel damit still auf
     Gold zurueck, also auf die WARNFARBE. Ein Fehler, den man nicht
     sieht, weil beides fuer sich gut aussieht. */
  --akzent:         oklch(0.755 0.078 220);
  --petrol-tief:    oklch(0.825 0.070 220);
  --auf-petrol:     oklch(0.16 0.012 240);
  --petrol-hell:    oklch(0.285 0.036 222);
  --petrol-rand:    oklch(0.405 0.050 222);
  --gold:           oklch(0.790 0.105 78);
  --gold-hell:      oklch(0.285 0.040 70);
  --ziegel:         oklch(0.715 0.115 32);
  --ziegel-hell:    oklch(0.275 0.045 32);

  /* --- Zustaende */
  --gut:            oklch(0.735 0.115 155);
  --warnung:        oklch(0.790 0.105 78);
  --fehler:         oklch(0.720 0.140 27);
  --fehler-hell:    oklch(0.270 0.055 27);

  /* --- Schrift: zwei Familien mit klarer Aufgabenteilung.
     Barlow liest sich in kleinen Groessen ruhig und ist fuer Beschriftung
     gezeichnet worden, nicht fuer Fliesstext im Roman. Genau das ist der
     Fall hier: kurze Zeilen, viele Zahlen, oft im Hellen auf dem Platz.
     Barlow Condensed traegt die Marke und die Ueberschriften. Schmal
     laufende Grotesk ist die Schriftsprache des Sports, von der
     Anzeigetafel bis zum Trikot, und sie bringt lange deutsche Woerter
     wie „Mannschaftseinstellungen" in einer Zeile unter.
     Beide liegen im Projekt, nicht bei Google -- siehe schrift.css. */
  --schrift: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-marke: "Barlow Condensed", "Barlow", ui-sans-serif, system-ui,
                   sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-xs:   0.6875rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   1.5rem;

  /* Rund statt eckig -- durchgaengig, nicht nur an Kacheln. */
  --r1: 8px;
  --r2: 12px;
  --r3: 18px;
  --r4: 26px;
  --rund: 999px;

  --schatten-1: 0 1px 2px oklch(0 0 0 / .32);
  --schatten-2: 0 2px 6px oklch(0 0 0 / .36), 0 10px 28px oklch(0 0 0 / .32);

  /* --- Ebenen. Benannt, nie willkuerliche Zahlen. */
  --z-inhalt: 1;
  --z-haftend: 20;
  --z-menue: 40;
  --z-hinweis: 60;

  --tempo: 180ms;
  --kurve: cubic-bezier(0.22, 1, 0.36, 1);

  /* Formularelemente und Bildlaufleisten sollen mitziehen. */
  color-scheme: dark;
}

/* --- Grundlagen ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--ink);
  font-family: var(--schrift);
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.012em;
             text-wrap: balance; }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }
p { margin: 0 0 0.75rem; max-width: 68ch; text-wrap: pretty; }

a { color: var(--petrol); text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 2px;
  border-radius: var(--r1);
}

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- Kopfleiste ----------------------------------------------------- */

.kopfleiste {
  position: sticky; top: 0; z-index: var(--z-haftend);
  display: flex; align-items: center; gap: 1rem;
  padding: 0.55rem 1rem;
  background: var(--flaeche-panel);
  border-bottom: 1px solid var(--linie);
}

/* Die Marke: Zeichen und Wort, immer zusammen.
   Das Zeichen nimmt seine Farbe ueber `currentColor` vom Text, damit es
   in Kopfleiste, Fusszeile und auf hellem Grund ohne eigene Fassung
   funktioniert. */
.marke {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--petrol); text-decoration: none; white-space: nowrap;
}
.marke-zeichen { width: 1.35rem; height: 1.35rem; flex: none; }
.marke-wort {
  font-family: var(--schrift-marke);
  font-weight: 700; font-size: 1.28rem; line-height: 1;
  letter-spacing: 0.002em; color: var(--ink);
}
.marke .marke-zusatz {
  font-family: var(--schrift-marke);
  font-weight: 600; font-size: 0.86rem; line-height: 1;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-still); align-self: center;
}
.marke.klein .marke-zeichen { width: 1.1rem; height: 1.1rem; }
.marke.klein .marke-wort { font-size: 1.05rem; }

/* Auf schmalen Geraeten faellt der Zusatz weg, bevor die Leiste bricht. */
@media (max-width: 620px) { .marke .marke-zusatz { display: none; } }

/* --- Fusszeile ------------------------------------------------------- */

.fussleiste {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem 1.5rem;
  margin-top: 3rem; padding: 1.25rem clamp(0.9rem, 3vw, 2rem);
  border-top: 1px solid var(--linie);
  background: var(--flaeche-tief);
  font-size: var(--t-sm);
}
.fussleiste nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.fussleiste a:not(.marke) { color: var(--ink-still); text-decoration: none; }
.fussleiste a:not(.marke):hover { color: var(--ink); text-decoration: underline; }

/* Auf den Druckseiten hat die Fusszeile nichts verloren. */
@media print { .fussleiste { display: none; } }

.kopf-pfad {
  display: flex; align-items: center; gap: 0.4rem; min-width: 0;
  font-size: var(--t-sm); color: var(--ink-leise);
}
.kopf-pfad a { color: var(--ink-leise); text-decoration: none; }
.kopf-pfad a:hover { color: var(--ink); text-decoration: underline; }
.kopf-pfad .jetzt { color: var(--ink); font-weight: 600;
                    overflow: hidden; text-overflow: ellipsis;
                    white-space: nowrap; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center;
               gap: 0.4rem; }

/* --- Schaltflaechen -------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem;
  min-height: 34px; padding: 0 0.75rem;
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  color: var(--ink);
  background: var(--flaeche-hoch);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve),
              color var(--tempo) var(--kurve);
}
.knopf:hover { background: var(--flaeche-tief); border-color: var(--ink-still); }
.knopf:active { background: var(--flaeche-tief); transform: translateY(0.5px); }
.knopf[disabled], .knopf[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

.knopf.haupt {
  color: var(--auf-petrol); background: var(--petrol);
  border-color: var(--petrol);
}
.knopf.haupt:hover { background: var(--petrol-tief); border-color: var(--petrol-tief); }

.knopf.leise { background: transparent; border-color: transparent;
               color: var(--ink-leise); }
.knopf.leise:hover { background: var(--flaeche-tief); color: var(--ink); }

.knopf.klein { min-height: 28px; padding: 0 0.5rem; font-size: var(--t-xs); }

/* --- Formularfelder -------------------------------------------------- */

.feld { display: flex; flex-direction: column; gap: 0.25rem; }
.feld > label {
  font-size: var(--t-xs); font-weight: 650; color: var(--ink-leise);
  letter-spacing: 0.02em;
}

/* Nebensache im Label (Wertebereich) und erklaerende Zeile unter einem Feld.
   Bewusst zurueckgenommen: Die Erklaerung soll da sein, wenn jemand sie sucht,
   und sonst nicht mit dem Wert um Aufmerksamkeit streiten. */
.feld > label .feldnebensache {
  font-weight: 400; color: var(--ink-still); letter-spacing: 0;
}
.feld > label .feldnebensache::before { content: "· "; }
.feldhinweis {
  margin: 0; font-size: var(--t-xs); line-height: 1.35; color: var(--ink-still);
}
/* Bewusst --ziegel und nicht --ziegel-hell: letzteres ist mit Helligkeit
   0,275 eine dunkle Toenung fuer Flaechen und waere als Schrift auf dem
   dunklen Grund nicht zu lesen. */
.feldhinweis.fehler { color: var(--ziegel); font-weight: 600; }
input[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--ziegel);
}
input[aria-invalid="true"]:focus { outline-color: var(--ziegel); }

input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"],
           [type="color"], [type="submit"], [type="button"], [type="reset"],
           [type="image"], [type="hidden"]),
select, textarea {
  font: inherit; font-size: var(--t-sm);
  color: var(--ink);
  background: var(--flaeche-hoch);
  border: 1px solid var(--linie-stark);
  border-radius: var(--r2);
  padding: 0.4rem 0.55rem;
  min-height: 34px;
  width: 100%;
  transition: border-color var(--tempo) var(--kurve);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-still); }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--petrol); outline-offset: 0; border-color: var(--petrol);
}
input::placeholder, textarea::placeholder { color: var(--ink-still); }
textarea { min-height: 76px; resize: vertical; line-height: 1.5; }

/* --- Etiketten ------------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.1rem 0.4rem;
  font-size: var(--t-xs); font-weight: 650;
  border: 1px solid var(--linie-stark); border-radius: var(--r1);
  color: var(--ink-leise); background: var(--flaeche-hoch);
  white-space: nowrap;
}
.chip .punkt { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.chip.warn { color: var(--gold); border-color: var(--gold);
             background: var(--gold-hell); }

/* --- Seiten ---------------------------------------------------------- */

.seite { max-width: 1080px; margin: 0 auto; padding: 1.75rem 1rem 4rem; }
.seitenkopf { display: flex; align-items: flex-end; gap: 1rem;
              margin-bottom: 1.25rem; flex-wrap: wrap; }
.seitenkopf .wachsen { flex: 1 1 auto; min-width: 0; }
.seitenkopf p { margin: 0.15rem 0 0; color: var(--ink-leise);
                font-size: var(--t-sm); }

/* --- Listen statt Kacheln -------------------------------------------- */

.liste { border: 1px solid var(--linie); border-radius: var(--r3);
         overflow: hidden; background: var(--flaeche-hoch); }
.liste > * + * { border-top: 1px solid var(--linie); }

.zeile {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 0.9rem;
  text-decoration: none; color: inherit;
  transition: background var(--tempo) var(--kurve);
}
a.zeile:hover { background: var(--flaeche-panel); }
.zeile .titel { font-weight: 600; }
.zeile .unter { font-size: var(--t-sm); color: var(--ink-leise); }
.zeile .wachsen { flex: 1 1 auto; min-width: 0; }
.zeile .nummer {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-still);
  font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right;
}

/* --- Leerzustand: erklaert, statt nur festzustellen ------------------ */

.leerzustand {
  border: 1px dashed var(--linie-stark); border-radius: var(--r3);
  padding: 2rem 1.5rem; text-align: center; background: var(--flaeche-panel);
}
.leerzustand h3 { margin-bottom: 0.3rem; }
.leerzustand p { margin: 0 auto 1rem; color: var(--ink-leise);
                 max-width: 46ch; font-size: var(--t-sm); }

/* --- Meldungen -------------------------------------------------------- */

.meldung {
  display: flex; align-items: flex-start; gap: 0.5rem;
  padding: 0.6rem 0.75rem; border-radius: var(--r2);
  font-size: var(--t-sm);
  border: 1px solid var(--linie-stark); background: var(--flaeche-panel);
}
.meldung.fehler { color: var(--fehler); border-color: var(--fehler);
                  background: var(--fehler-hell); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ======================================================================
   Oberflaechen — Glaskacheln
   ----------------------------------------------------------------------
   Auf Wunsch von Niklas: runde, spiegelnde Kacheln statt Formularseiten.
   Damit Glas ueberhaupt wirkt, braucht der Hintergrund etwas zum Brechen —
   deshalb zwei sehr schwache Lichtquellen hinter allem. Ohne die waere
   der Weichzeichner reine Behauptung.
   ====================================================================== */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58rem 40rem at 12% -8%,
      oklch(0.755 0.078 220 / .16), transparent 62%),
    radial-gradient(46rem 34rem at 96% 4%,
      oklch(0.790 0.105 78 / .10), transparent 60%),
    radial-gradient(70rem 50rem at 50% 118%,
      oklch(0.715 0.115 32 / .07), transparent 64%);
}
body > * { position: relative; z-index: var(--z-inhalt); }

/* --- die Kachel selbst ------------------------------------------------ */

.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.15rem 1.2rem;
  border-radius: var(--r3);
  background: linear-gradient(
      160deg,
      oklch(1 0 0 / .075) 0%,
      oklch(1 0 0 / .028) 42%,
      oklch(1 0 0 / .012) 100%);
  border: 1px solid oklch(1 0 0 / .085);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow:
    0 1px 0 0 oklch(1 0 0 / .11) inset,
    0 18px 40px -22px oklch(0 0 0 / .8);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve),
              box-shadow var(--tempo) var(--kurve);
}

/* Der Lichtstreifen auf der Oberkante — das, was Glas zu Glas macht. */
.kachel::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, oklch(1 0 0 / .38) 22%, oklch(1 0 0 / .38) 78%, transparent);
  pointer-events: none;
}

a.kachel:hover, button.kachel:hover {
  transform: translateY(-2px);
  border-color: oklch(1 0 0 / .17);
  box-shadow:
    0 1px 0 0 oklch(1 0 0 / .15) inset,
    0 26px 52px -24px oklch(0 0 0 / .9);
}
a.kachel:active, button.kachel:active { transform: translateY(0); }

/* Teamfarbe als Schimmer in der Ecke, gesetzt per --ton. */
.kachel.getoent::before {
  content: "";
  position: absolute;
  width: 15rem; height: 15rem;
  right: -6rem; top: -7rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ton, transparent) 0%, transparent 68%);
  opacity: .5;
  pointer-events: none;
}

/* --- Umsortieren ------------------------------------------------------ */

/* Der Griff liegt in der Ecke und meldet sich erst, wenn die Kachel dran
   ist -- er soll den Play nicht ueberstrahlen. Sichtbar bleibt er, sobald
   er den Tastaturfokus hat, sonst waere er blind bedienbar. */
.griff {
  position: absolute;
  top: 0.55rem; right: 0.55rem;
  z-index: 2;
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r2);
  background: transparent;
  color: var(--ink-still);
  font-size: 1rem; line-height: 1;
  cursor: grab;
  opacity: 0;
  touch-action: none;          /* sonst scrollt der Finger die Seite */
  transition: opacity var(--tempo) var(--kurve),
              background var(--tempo) var(--kurve);
}
.kachel:hover .griff, .griff:focus-visible { opacity: 1; }
.griff:hover, .griff:focus-visible {
  background: var(--flaeche-hoch); border-color: var(--linie-stark);
  color: var(--ink);
}
.griff:active { cursor: grabbing; }

.kachel.wandert {
  opacity: .55;
  border-color: var(--petrol);
  transform: none;
}
.kachelraster.sortiert .kachel { cursor: grabbing; }
/* Waehrend des Zugs darf kein Text markiert werden, sonst faerbt sich beim
   Ziehen die halbe Seite blau. */
.kachelraster.sortiert { user-select: none; -webkit-user-select: none; }

/* Die Frage nach den Nummern. Sie bleibt stehen, bis sie beantwortet ist --
   eine Meldung, die von selbst verschwindet, waere hier das Gegenteil von
   dem, was sie soll. */
.aktionsleiste {
  position: sticky; bottom: 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem;
  margin-top: 1.25rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--petrol);
  border-radius: var(--r3);
  background: var(--flaeche-hoch);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 18px 40px -20px oklch(0 0 0 / .85);
}
.aktionsleiste[hidden] { display: none; }
.aktionsleiste .leistentext {
  flex: 1 1 18rem; margin: 0; font-size: var(--t-sm); color: var(--ink-leise);
}
.aktionsleiste .leistentext strong { color: var(--ink); }
.aktionsleiste .leistenknoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.sortiermeldung {
  position: sticky; bottom: 1rem;
  margin: 1rem 0 0;
  padding: 0.7rem 1rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--r3);
  background: var(--flaeche-hoch);
  font-size: var(--t-sm); color: var(--ink-leise);
}

.kachelraster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: 1rem;
}

/* --- Wappen ------------------------------------------------------------ */

.wappen {
  width: 3.25rem; height: 3.25rem;
  border-radius: var(--r2);
  display: grid; place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: oklch(1 0 0 / .07);
  border: 1px solid oklch(1 0 0 / .1);
  font-weight: 700; font-size: var(--t-md);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.wappen img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.wappen.gross { width: 4.75rem; height: 4.75rem; font-size: var(--t-xl);
                border-radius: var(--r3); }
.wappen.klein { width: 2.1rem; height: 2.1rem; font-size: var(--t-xs);
                border-radius: var(--r1); }

/* --- Kachelinhalt ------------------------------------------------------ */

.kachelkopf { display: flex; align-items: center; gap: 0.8rem; }
.kachelkopf .wachsen { flex: 1 1 auto; min-width: 0; }
.kacheltitel {
  font-size: var(--t-md); font-weight: 650; letter-spacing: -0.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kachelunter { font-size: var(--t-sm); color: var(--ink-still); }

.zahlen { display: flex; gap: 1.25rem; margin-top: auto; padding-top: 0.35rem; }
.zahl { display: flex; flex-direction: column; gap: 0.1rem; }
.zahl b {
  font-size: var(--t-lg); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.zahl span { font-size: var(--t-xs); color: var(--ink-still); }

/* --- Kachel als Aktion (gestrichelt) ---------------------------------- */

.kachel.aktion {
  align-items: center; justify-content: center; text-align: center;
  min-height: 9.5rem;
  border-style: dashed;
  border-color: oklch(1 0 0 / .16);
  background: oklch(1 0 0 / .018);
}
.kachel.aktion::after { display: none; }
.kachel.aktion:hover { border-color: var(--petrol); background: oklch(1 0 0 / .045); }
.kachel.aktion .zeichen {
  width: 2.6rem; height: 2.6rem; border-radius: var(--rund);
  display: grid; place-items: center;
  background: var(--petrol); color: var(--auf-petrol);
  font-size: 1.35rem; font-weight: 400; line-height: 1;
}

/* --- Seitenkopf mit Wappen -------------------------------------------- */

.buehnenkopf {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.6rem 1.35rem;
  border-radius: var(--r4);
  background: linear-gradient(160deg,
    oklch(1 0 0 / .07), oklch(1 0 0 / .015));
  border: 1px solid oklch(1 0 0 / .09);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  margin-bottom: 1.5rem;
  position: relative; overflow: hidden;
  flex-wrap: wrap;
}
.buehnenkopf .wachsen { flex: 1 1 14rem; min-width: 0; }
.buehnenkopf h1 { font-size: clamp(1.35rem, 3.4vw, 1.85rem); }
.buehnenkopf .unterzeile {
  color: var(--ink-leise); font-size: var(--t-sm); margin-top: 0.2rem;
}
.buehnenkopf .aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* --- Abschnittsüberschrift -------------------------------------------- */

.abschnitt {
  display: flex; align-items: baseline; gap: 0.7rem;
  margin: 2.1rem 0 0.85rem;
}
.abschnitt h2 { font-size: var(--t-md); font-weight: 650; }
.abschnitt .zaehler {
  font-size: var(--t-xs); color: var(--ink-still);
  font-variant-numeric: tabular-nums;
}
.abschnitt .rest { flex: 1 1 auto; height: 1px;
                   background: linear-gradient(90deg, var(--linie), transparent); }

/* --- Wegweiser (dreistufig) ------------------------------------------- */

.wegweiser {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin: 0.5rem 0 0;
  counter-reset: schritt;
  padding: 0;
  list-style: none;
}
.wegweiser li {
  counter-increment: schritt;
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.85rem 0.95rem;
  border-radius: var(--r2);
  background: oklch(1 0 0 / .035);
  border: 1px solid oklch(1 0 0 / .07);
  margin: 0;
  font-size: var(--t-sm);
}
.wegweiser li::before {
  content: counter(schritt);
  flex: 0 0 auto;
  width: 1.55rem; height: 1.55rem; border-radius: var(--rund);
  display: grid; place-items: center;
  background: var(--petrol); color: var(--auf-petrol);
  font-size: var(--t-xs); font-weight: 700;
}
.wegweiser b { display: block; color: var(--ink); }
.wegweiser span { color: var(--ink-still); }

/* --- Formulare in Glas ------------------------------------------------- */

.formkarte {
  max-width: 34rem; margin: 0 auto;
  padding: 1.5rem 1.5rem 1.35rem;
  border-radius: var(--r4);
  background: linear-gradient(160deg, oklch(1 0 0 / .07), oklch(1 0 0 / .02));
  border: 1px solid oklch(1 0 0 / .09);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 24px 60px -30px oklch(0 0 0 / .9);
}
.formkarte.breit { max-width: 46rem; }
.formkarte + .formkarte { margin-top: 1.15rem; }
.formfelder { display: flex; flex-direction: column; gap: 1.05rem; }

/* Registrierung: das Formular und daneben, was man dafuer bekommt.
   Auf dem Handy untereinander, und zwar Formular zuerst -- wer auf
   „Kostenlos ausprobieren" getippt hat, ist ueberzeugt und will
   ausfuellen, nicht noch einmal lesen. */
.anmeldespalten { display: grid; gap: 1.35rem; align-items: start; }
.anmeldespalten .formkarte { margin: 0; max-width: none; }
.formkarte.leise {
  background: oklch(1 0 0 / .035);
  box-shadow: none;
}
.formkarte.leise h2 { margin: 0 0 .85rem; font-size: 1.05rem; }
.formkarte.leise .hinweistext { margin: .9rem 0 0; }
@media (min-width: 62rem) {
  .anmeldespalten {
    grid-template-columns: minmax(0, 34rem) minmax(0, 23rem);
    justify-content: center; gap: 2rem;
  }
}

/* Der Abo-Vorschlag stellt gegenueber, statt zu behaupten: worum es
   geht, was die Demo hergibt, was ein Abo daraus macht. Drei Spalten
   bleiben auch auf dem Handy drei Spalten -- untereinander verliert die
   Gegenueberstellung genau das, wofuer sie da ist. Statt umzubrechen
   wird die Schrift kleiner. */
.abovergleich { margin: 1.35rem 0 0; }
.abovergleich > div {
  display: grid; align-items: baseline; gap: 0.5rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  padding: 0.5rem 0; border-top: 1px solid var(--linie);
}
.abovergleich > div:first-child { border-top: 0; padding-top: 0; }
.abovergleich dt { color: var(--ink-leise); }
.abovergleich dd { margin: 0; color: var(--ink-still); }
/* Die rechte Spalte ist die Aussage. Petrol und nicht Gold: Gold ist in
   diesem System die Warnfarbe, und ein Angebot ist keine Warnung. */
.abovergleich dd.ja { color: var(--ink); font-weight: 550; }
.abokopf dd {
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-still);
}
.aborechnung {
  margin: 0.9rem 0 0; padding: 0.55rem 0.8rem;
  border-left: 3px solid var(--petrol);
  background: oklch(1 0 0 / .04);
  border-radius: 0 var(--r1) var(--r1) 0;
}
@media (max-width: 34rem) {
  .abovergleich > div { font-size: var(--t-sm); }
}

/* Nur fuer Vorleseprogramme: Die Kategoriezeile traegt ihre Beschriftungen
   in der Kopfzeile der Liste, jedes Feld einzeln zu beschriften wuerde die
   Zeile zerreissen -- verschwinden darf die Beschriftung deshalb trotzdem
   nicht. */
.nurvorleser {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Drucken ---------------------------------------------------------- */

.druckfelder {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  align-items: start;
}
.eigenmass {
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid var(--linie);
}
.eigenmass > summary {
  cursor: pointer; font-size: var(--t-sm); color: var(--ink-leise);
  list-style: none;
}
.eigenmass > summary::-webkit-details-marker { display: none; }
.eigenmass > summary::before { content: "▸ "; color: var(--ink-still); }
.eigenmass[open] > summary::before { content: "▾ "; }
.eigenmass > summary:hover { color: var(--ink); }

/* --- Textliste --------------------------------------------------------- */
/*
 * Zwischen Kachelraster und PDF fehlte die schnellste Form: alles auf
 * einmal, zum Ueberfliegen und Weiterschicken.
 */
.textliste .playzeile { align-items: flex-start; gap: 0.75rem; }
.listennummer {
  min-width: 2.2rem; text-align: right; flex: 0 0 auto;
  font-family: var(--mono); font-weight: 700; color: var(--ink-leise);
  font-variant-numeric: tabular-nums;
}
.textliste .titel a { color: var(--ink); text-decoration: none; }
.textliste .titel a:hover { text-decoration: underline; }
.textliste .wege {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; margin-top: 0.25rem;
}
.textliste .weg {
  font-size: var(--t-xs); color: var(--ink-leise);
  padding: 0.05rem 0.4rem; border-radius: var(--rund);
  background: oklch(1 0 0 / .05);
}
.textliste .ohne { font-size: var(--t-xs); color: var(--ink-still); }

/* --- Spieleransicht --------------------------------------------------- */
/*
 * Gross, ruhig, ohne Werkzeuge. Ueberladene Diagramme sind laut den
 * Coach-Quellen der haeufigste Fehler in Jugend-Playbooks -- deshalb
 * tritt hier alles zurueck, was nicht die eigene Position ist, statt
 * ganz zu verschwinden: Wer nur seinen Weg sieht, verliert den Bezug
 * zur Aufstellung.
 */
.spieleransicht { max-width: 62rem; }
.spielerkopf { margin-bottom: 1rem; }
.spielerkopf h1 { display: flex; align-items: baseline; gap: 0.6rem; }
.playnummer {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.2rem; height: 2.2rem; padding: 0 0.4rem;
  border-radius: var(--r2); background: var(--petrol);
  color: var(--auf-petrol); font-size: var(--t-lg); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.positionswahl {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem;
}
/* Grosse Trefferflaechen: Das hier wird mit dem Daumen bedient, im
   Stehen, am Platz. */
.posknopf {
  min-width: 3rem; min-height: 44px; padding: 0 0.9rem;
  font: inherit; font-size: var(--t-md); font-weight: 700;
  color: var(--ink-leise); background: var(--flaeche-hoch);
  border: 1px solid var(--linie-stark); border-radius: var(--rund);
  cursor: pointer;
}
.posknopf[aria-pressed="true"] {
  color: var(--auf-petrol); background: var(--petrol); border-color: var(--petrol);
}

.spielerfeld {
  background: var(--flaeche-panel); border: 1px solid var(--linie);
  border-radius: var(--r3); padding: 0.6rem; text-align: center;
}
.spielerfeld svg { width: 100%; height: auto; max-height: 72vh; }
/* Zurueckgetreten, nicht weg. */
.spielerfeld [data-spieler].zurueck { opacity: .16; }
.spielerfeld [data-spieler] {
  transition: opacity var(--tempo) var(--kurve);
}

.aufgabenliste { margin-top: 1.4rem; }
.aufgaben { list-style: none; margin: 0.6rem 0 0; padding: 0;
            display: flex; flex-direction: column; gap: 2px; }
.aufgaben li {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 0.55rem 0.7rem; border-radius: var(--r2);
  background: oklch(1 0 0 / .03);
}
.aufgaben li.zurueck { opacity: .38; }
.aufgaben .pos {
  min-width: 2.4rem; font-weight: 700; font-size: var(--t-md);
  color: var(--ink);
}
.aufgaben .wastun { font-size: var(--t-base); }
.aufgaben .art { color: var(--ink-still); font-size: var(--t-sm); }
.aufgaben .ohne { color: var(--ink-still); }
.spielerhinweise { margin-top: 1.4rem; }
.spielerhinweise p { font-size: var(--t-md); line-height: 1.6; }

/* --- Kader und Zugaenge ------------------------------------------------ */

.zugangszeile { flex-wrap: wrap; gap: 0.5rem; }
/* Der Kader traegt vier Angaben und bis zu zwei Formulare in einer Zeile.
   Ausrichtung oben, nicht mittig: Sonst haengt der Rollenkasten neben dem
   Balken in der Luft, sobald eine Zeile hoeher wird als die anderen. */
.kaderzeile { flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }
.kaderzeile .lernzahl { align-self: center; }
/* Ohne Trennlinie und mit wenig Luft: In einer Kaderzeile waere die
   Linie von `.eigenmass` ein zweiter Zeilentrenner. */
.namenszelle { margin-top: 0.45rem; padding-top: 0; border-top: none; }
.namenszelle > form { margin-top: 0.4rem; }
.namenszelle input { max-width: 16rem; min-height: 28px; font-size: var(--t-xs); }
.zugangsform {
  display: flex; align-items: center; gap: 0.4rem; margin: 0; flex-wrap: wrap;
}
.zugangsform select { width: auto; min-height: 28px; font-size: var(--t-xs); }

/* --- Einladungen ------------------------------------------------------ */

.einladungsform {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.75rem;
}
.einladungsform .feld { flex: 0 1 12rem; }
.einladungszeile { align-items: flex-start; }
.einladungszeile .linkzeile {
  display: flex; gap: 0.4rem; margin: 0.4rem 0 0.3rem; max-width: 34rem;
}
.einladungszeile .einladungslink {
  font-family: var(--mono); font-size: var(--t-xs);
}
/* Der Zustand steht als Wort neben der Rolle. Farbe ist Zugabe, nicht die
   Information -- wer sie nicht unterscheidet, liest trotzdem "widerrufen". */
.zustand {
  margin-left: 0.5rem; padding: 0.05rem 0.4rem;
  border-radius: var(--rund); border: 1px solid var(--linie-stark);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-still);
  vertical-align: 1px;
}
.zustand.offen { color: var(--gut, var(--petrol)); border-color: currentColor; }
.zustand.widerrufen, .zustand.abgelaufen { color: var(--ink-still); }

/* --- Kategorien ------------------------------------------------------- */

.kategorienliste { display: flex; flex-direction: column; gap: 0.5rem; }
.kategoriezeile {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--linie);
  border-radius: var(--r2);
  background: oklch(1 0 0 / .022);
}
.kategoriezeile .feld { gap: 0; }
.kategoriezeile .feld.wachsen { flex: 1 1 11rem; min-width: 0; }
.kategoriezeile .farbfeld { width: 7rem; font-family: var(--mono); }
.kategoriezeile .zeilenzahl {
  font-size: var(--t-xs); color: var(--ink-still); white-space: nowrap;
}
.kategoriezeile .zeilenknoepfe { display: flex; gap: 0.3rem; }
.punkt.gross {
  width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: 0 0 0 1px oklch(1 0 0 / .18);
}
.knopf.gefahr:hover:not(:disabled) {
  border-color: var(--ziegel); color: var(--ziegel);
}
.knopf:disabled { opacity: .35; cursor: default; }
.formfuss {
  display: flex; gap: 0.6rem; justify-content: flex-end;
  margin-top: 1.35rem; padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
  flex-wrap: wrap;
}
.hinweistext { font-size: var(--t-xs); color: var(--ink-still); margin: 0; }

/* Was die Demo hergibt. Ruhig und nicht rot: Eine Grenze ist kein Fehler
   des Benutzers, sondern eine Auskunft. Der linke Balken hebt sie aus dem
   uebrigen Kleingedruckten heraus, ohne die Seite zu alarmieren. */
.demohinweis {
  margin: 0.9rem 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--warnung);
  background: oklch(1 0 0 / .04);
  border-radius: 0 var(--r1) var(--r1) 0;
}
/* Die Warnung am Teamcode. Deutlicher als `.demohinweis`, weil hier
   nicht eine Grenze erklaert wird, sondern eine Entscheidung ansteht,
   die sich schlecht zuruecknehmen laesst: Ein weitergereichter Code ist
   weg. Trotzdem nicht rot -- rot ist in dieser Oberflaeche der
   Fehlschlag, und einen Code zu erzeugen ist keiner. */
.warntext {
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--warnung);
  background: oklch(1 0 0 / .05);
  border-radius: 0 var(--r1) var(--r1) 0;
  font-size: var(--t-xs); color: var(--ink-leise);
}
.warntext strong { color: var(--ink); }

/* Der Code selbst wird abgetippt und vorgelesen. Deshalb Schreibmaschine
   (jede Stelle gleich breit) und gross genug, um ihn quer durch die
   Halle von einem Bildschirm abzulesen. */
.teamcodewert {
  font-family: var(--mono); font-size: var(--t-md);
  letter-spacing: 0.08em;
}
.codefeld {
  font-family: var(--mono); font-size: 1.15rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.feldfehler {
  font-size: var(--t-xs); color: var(--fehler);
  background: var(--fehler-hell); border-radius: var(--r1);
  padding: 0.25rem 0.5rem; margin: 0;
}

input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"],
           [type="color"], [type="submit"], [type="button"], [type="reset"],
           [type="image"], [type="hidden"]),
select, textarea {
  border-radius: var(--r2);
  background: oklch(1 0 0 / .045);
  border-color: oklch(1 0 0 / .12);
}
input[type="file"] {
  font: inherit; font-size: var(--t-sm); color: var(--ink-leise);
  width: 100%;
}
input[type="file"]::file-selector-button {
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  color: var(--ink); background: oklch(1 0 0 / .08);
  border: 1px solid oklch(1 0 0 / .14);
  border-radius: var(--rund);
  padding: 0.35rem 0.8rem; margin-right: 0.7rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: oklch(1 0 0 / .13); }

/* --- Farbwahl im Formular --------------------------------------------- */

.farbzeile { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.farbzeile input.farbfeld { width: 7.5rem; font-family: var(--mono); }
.farbtupfer {
  width: 1.75rem; height: 1.75rem; border-radius: var(--rund);
  border: 1px solid oklch(1 0 0 / .2); padding: 0; cursor: pointer;
  transition: transform var(--tempo) var(--kurve);
}
.farbtupfer:hover { transform: scale(1.12); }

/* --- Logo-Vorschau ----------------------------------------------------- */

.logovorschau {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem; border-radius: var(--r2);
  background: oklch(1 0 0 / .03); border: 1px dashed oklch(1 0 0 / .12);
}

/* --- Meldungen --------------------------------------------------------- */

.meldungen { display: flex; flex-direction: column; gap: 0.5rem;
             margin-bottom: 1.1rem; }
.meldung {
  border-radius: var(--r2);
  background: oklch(1 0 0 / .05);
  border-color: oklch(1 0 0 / .1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.meldung.erfolg { color: var(--gut); border-color: var(--gut); }

/* Betriebshinweis: steht ueber allem, gehoert aber nicht zum Inhalt.
   Deshalb ruhig statt rot -- eine Wartung ist kein Fehler des Benutzers. */
.betriebshinweis {
  margin: 0 auto 1.1rem;
  max-width: var(--breite, 72rem);
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--warnung);
  border-radius: var(--r2);
  background: oklch(1 0 0 / .05);
  color: var(--warnung);
  font-size: 0.92rem;
}

/* --- Listen runder ----------------------------------------------------- */

.liste {
  border-radius: var(--r3);
  background: oklch(1 0 0 / .035);
  border-color: oklch(1 0 0 / .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.liste > * + * { border-top-color: oklch(1 0 0 / .06); }
a.zeile:hover { background: oklch(1 0 0 / .05); }

.leerzustand {
  border-radius: var(--r4);
  border-color: oklch(1 0 0 / .13);
  background: oklch(1 0 0 / .025);
}

/* Wer weniger Bewegung will, bekommt keine Schwebeeffekte. */
@media (prefers-reduced-motion: reduce) {
  a.kachel:hover, button.kachel:hover { transform: none; }
}

/* Geraete ohne Weichzeichner bekommen eine kraeftigere Flaeche, damit die
   Kachel nicht durchsichtig und damit unlesbar wirkt. */
@supports not (backdrop-filter: blur(1px)) {
  .kachel, .buehnenkopf, .formkarte, .liste {
    background: var(--flaeche-panel);
  }
}

/* Schmale Seite fuer Formulare. */
.seite.schmal { max-width: 44rem; }

/* Der Pfad in der Kopfleiste ist der Weg zurueck — auf kleinen Schirmen
   zaehlt nur noch die letzte Stufe. */
@media (max-width: 40rem) {
  .kopf-pfad > *:not(.jetzt) { display: none; }
  .buehnenkopf { padding: 1.15rem 1rem; border-radius: var(--r3); }
  .buehnenkopf .aktionen { width: 100%; }
  .buehnenkopf .aktionen .knopf { flex: 1 1 auto; }
}

/* Titel und Unterzeile sind spans (damit sie in einem <a> stehen duerfen)
   und brauchen deshalb ausdrueckliche Blockdarstellung. */
.kachelkopf .wachsen { display: block; }
.kacheltitel, .kachelunter { display: block; }
.zahl span { display: block; }

/* --- Dateiwahl mit eigener Beschriftung -------------------------------- */
/* Der native Knopf heisst je nach Browsersprache „Choose File" — in einer
   deutschen Oberflaeche stoert das. Das Feld bleibt bedienbar und fuer
   Screenreader sichtbar, nur optisch ersetzt. */
.dateiwahl { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.dateiwahl input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.dateiwahl .auswahlknopf {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: 0 0.85rem; border-radius: var(--rund);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink);
  background: oklch(1 0 0 / .08); border: 1px solid oklch(1 0 0 / .14);
  cursor: pointer;
  transition: background var(--tempo) var(--kurve);
}
.dateiwahl .auswahlknopf:hover { background: oklch(1 0 0 / .14); }
.dateiwahl input[type="file"]:focus-visible + .auswahlknopf {
  outline: 2px solid var(--petrol); outline-offset: 2px;
}
.dateiname { font-size: var(--t-xs); color: var(--ink-still); }

/* --- Reiter für Offense / Defense ------------------------------------- */
.seitenreiter {
  display: inline-flex; gap: 3px; padding: 3px;
  border-radius: var(--rund);
  background: oklch(1 0 0 / .045); border: 1px solid oklch(1 0 0 / .08);
  margin-bottom: 1rem;
}
.seitenreiter a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.8rem; border-radius: var(--rund);
  font-size: var(--t-sm); font-weight: 600; text-decoration: none;
  color: var(--ink-leise);
  transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}
.seitenreiter a:hover { color: var(--ink); background: oklch(1 0 0 / .06); }
.seitenreiter a[aria-current="true"] {
  color: var(--auf-petrol); background: var(--petrol);
}
.seitenreiter .anzahl { font-variant-numeric: tabular-nums; opacity: .75;
                        font-weight: 500; }

/* --- Platzmodus ------------------------------------------------------- */
/*
 * Sonne auf dem Display, Handy in der Hand, Spiel laeuft.
 *
 * Das dunkle Erscheinungsbild der App bleibt, wie festgelegt -- der
 * Platzmodus greift AUSSCHLIESSLICH die beiden Ansichten an, die auf dem
 * Platz gelesen werden: die Spieleransicht eines Plays und die Textliste
 * eines Playbooks. Alles andere, auch die Kopfleiste ringsum, bleibt
 * dunkel. Das ist kein Kompromiss, sondern hilft: Der helle Kasten hebt
 * sich vom dunklen Rand ab, das Auge findet ihn sofort.
 *
 * Zwei Dinge macht der Modus, und nur diese zwei:
 *
 *   Kontrast   Weisser Grund, schwarze Linien, dunklere Hilfslinien.
 *              Die Wege werden nachgedunkelt statt umgefaerbt, damit die
 *              Farbe weiter sagt, wer laeuft -- ein Gold, das drinnen gut
 *              aussieht, verschwindet draussen auf Weiss.
 *   Groesse    Symbole, Kuerzel und Wege wachsen. Das Feld bleibt gleich
 *              gross -- gezoomt wird nicht, sonst sieht man den Play nicht
 *              mehr im Ganzen.
 */

html.platz .spieleransicht,
html.platz .leseansicht {
  background: #F3F3EF;
  color: #10161C;
  border-radius: var(--r3);
  padding: 1rem 1.1rem 1.4rem;
  /* Der helle Kasten braucht Luft zum dunklen Rand, sonst sieht es aus
     wie ein Darstellungsfehler. */
  margin-top: 0.4rem;
}

html.platz .spieleransicht h1,
html.platz .spieleransicht h2,
html.platz .leseansicht h1,
html.platz .leseansicht h2 { color: #10161C; }

html.platz .spieleransicht .unterzeile,
html.platz .spieleransicht .hinweistext,
html.platz .leseansicht .unterzeile {
  color: #3C4650;
  font-size: var(--t-md);
}

/* Knoepfe: schwarz auf weiss statt leiser Grautoene. */
html.platz .posknopf {
  min-height: 50px; font-size: var(--t-lg);
  color: #10161C; background: #FFFFFF;
  border: 2px solid #10161C;
}
html.platz .posknopf[aria-pressed="true"] {
  color: #FFFFFF; background: #10161C; border-color: #10161C;
}

html.platz .spielerfeld {
  background: #FFFFFF; border: 2px solid #10161C; padding: 0.4rem;
}
html.platz .spielerfeld svg { max-height: 78vh; }
/* Zurueckgetreten, aber bei Sonne noch zu sehen -- 0.16 waere draussen
   dasselbe wie geloescht. */
html.platz .spielerfeld [data-spieler].zurueck { opacity: .34; }

/* --- Das Feld selbst.
   Die Regeln stechen die eingebettete Stilvorlage aus designer/render.py
   aus: gleiche Klassen, aber eine Stelle mehr im Selektor. */

html.platz .spielerfeld .grund { fill: #FFFFFF; }
/* Gezeichnet werden nur Fuenf-Yard-, Tor- und Mittellinie (siehe
   ``build_field`` in designer/render.py) -- Ein-Yard-Linien gibt es gar
   nicht. Die vorhandenen werden dunkler, nicht mehr. */
html.platz .spielerfeld .linie.fuenf { stroke: #9AA3AA; stroke-width: 1.4; }
html.platz .spielerfeld .linie.torlinie { stroke: #000000; stroke-width: 3; }
html.platz .spielerfeld .linie.mittellinie { stroke: #7A4C08; stroke-width: 2.6; }
html.platz .spielerfeld .seitenlinien { stroke: #000000; stroke-width: 3.2; }
html.platz .spielerfeld .los { stroke: #000000; stroke-width: 3.4; }
html.platz .spielerfeld .rushlinie { stroke: #0C3B49; stroke-width: 2.4; }
html.platz .spielerfeld .norunzone { fill-opacity: .105; }
html.platz .spielerfeld .beschriftung,
html.platz .spielerfeld .zonenname { fill: #333D46; font-size: 8px; }

/* Symbole wachsen um ein Drittel. Ueber die Groesse und nicht ueber den
   Radius: ``transform-box: fill-box`` skaliert um die eigene Mitte und
   nimmt die Strichstaerke mit, waehrend ``r`` als CSS-Eigenschaft nicht
   ueberall zu haben ist. Fuer das Defense-Kreuz an den Linien statt an
   der Gruppe -- beide Diagonalen haben dieselbe Mitte wie das Kreuz. */
html.platz .spielerfeld .spieler.offense,
html.platz .spielerfeld .spieler.defense line {
  transform-box: fill-box; transform-origin: center; transform: scale(1.34);
}
html.platz .spielerfeld .spieler.offense { stroke: #000000; stroke-width: 2.6; }
html.platz .spielerfeld .spieler.defense line { stroke: #7A2417; }
html.platz .spielerfeld .spielerlabel { fill: #000000; font-size: 12px; }
html.platz .spielerfeld .spielername { fill: #7A2417; font-size: 9px; }

/* Die Wege behalten ihre Farbe -- sie sagt, wer laeuft --, werden aber
   nachgedunkelt. Ein Gold, das drinnen gut aussieht, verschwindet
   draussen auf Weiss. */
html.platz .spielerfeld .laufweg,
html.platz .spielerfeld .zonenflaeche { filter: brightness(.66) saturate(1.35); }
html.platz .spielerfeld .laufweg { stroke-width: 4.4; }
html.platz .spielerfeld .laufweg-motion { stroke-width: 3.2; }
html.platz .spielerfeld .laufweg-block { stroke-width: 4.8; }
html.platz .spielerfeld .laufweg-zone { stroke-width: 3.2; }
/* Der Passweg ist fein gepunktet (2 8). Auf 4.4 haette er statt
   Punkten fette Klekse. */
html.platz .spielerfeld .laufweg-pass { stroke-width: 3.2; }

/* Wegnamen (Go, Out, Slant) liegen oft ueber einer Linie. Ein weisser
   Saum darunter haelt sie lesbar, ohne etwas zu verdecken. */
html.platz .spielerfeld .linienname {
  font-size: 9.5px; font-weight: 800;
  paint-order: stroke; stroke: #FFFFFF; stroke-width: 2.6;
  stroke-linejoin: round;
}

/* --- Die Aufgabenliste darunter. */
html.platz .aufgaben li {
  background: #FFFFFF; border: 1px solid #C4CBD1;
  padding: 0.7rem 0.8rem;
}
html.platz .aufgaben li.zurueck { opacity: .5; }
html.platz .aufgaben .pos { color: #10161C; font-size: var(--t-lg); }
html.platz .aufgaben .wastun { font-size: var(--t-md); color: #10161C; }
html.platz .aufgaben .art,
html.platz .aufgaben .ohne { color: #3C4650; }
html.platz .spielerhinweise p { color: #10161C; }
html.platz .playnummer { background: #10161C; color: #FFFFFF; }

/* --- Die Textliste. */
html.platz .leseansicht .zeile {
  background: #FFFFFF; border: 1px solid #C4CBD1;
}
html.platz .leseansicht .titel a { color: #10161C; font-size: var(--t-lg);
                                   font-weight: 700; }
html.platz .leseansicht .unter { color: #3C4650; font-size: var(--t-md); }
html.platz .leseansicht .listennummer { color: #10161C; font-size: var(--t-lg); }
html.platz .leseansicht .textliste .weg {
  color: #10161C; background: #E4E7E4; font-size: var(--t-sm);
}
html.platz .leseansicht .textliste .ohne { color: #3C4650; }

/* Die Reiter standen hell auf hell und waren damit weg. Aufgefallen ist
   das erst auf dem Bildschirmfoto -- die Regeln daneben griffen, diese
   eine nicht. */
html.platz .leseansicht .seitenreiter {
  background: #FFFFFF; border-color: #C4CBD1;
}
html.platz .leseansicht .seitenreiter a {
  color: #3C4650; font-size: var(--t-md);
  min-height: 40px; padding: 0 0.9rem;
}
html.platz .leseansicht .seitenreiter a[aria-current="true"] {
  color: #FFFFFF; background: #10161C;
}
html.platz .leseansicht .seitenreiter .anzahl { opacity: 1; }

/* Der Umschalter selbst. Sichtbar gedrueckt, damit niemand raet. */
.platzknopf[aria-pressed="true"] {
  background: var(--gold); color: var(--auf-petrol); border-color: var(--gold);
}

/* --- Lernmodus --------------------------------------------------------- */
/*
 * Ein Playbook nuetzt nichts, das nur der Trainer kennt. Geuebt wird
 * genau das, was auf dem Feld passiert: Diagramm sehen, Namen nennen.
 *
 * Bewusst ohne Zeitdruck, ohne Punkte, ohne Rangliste. Das hier sollen
 * Vierzehnjaehrige freiwillig aufmachen -- und eine Rangliste hat den
 * Nebeneffekt, dass die hinteren aufhoeren.
 */
.lernseite { max-width: 46rem; }
.lernkopf {
  display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.9rem;
}
.lernkopf h1 { margin: 0; }

.fortschrittsbalken {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: oklch(1 0 0 / .07); border: 1px solid var(--linie);
}
.fortschrittsbalken.klein { height: 6px; margin-top: 0.4rem; max-width: 22rem; }
.fortschrittsbalken .gefuellt {
  height: 100%; background: var(--petrol);
  transition: width var(--tempo) var(--kurve);
}
.fortschrittstext {
  margin: 0.45rem 0 1.1rem; font-size: var(--t-sm); color: var(--ink-leise);
}
.fortschrittstext strong { color: var(--ink); }

.quizfeld {
  background: var(--flaeche-panel); border: 1px solid var(--linie);
  border-radius: var(--r3); padding: 0.6rem; text-align: center;
}
.quizfeld svg { width: 100%; height: auto; max-height: 58vh; }

/* Die Antworten sind das, was mit dem Daumen getroffen werden muss --
   eine Spalte, grosse Flaechen, keine engen Reihen. */
.quizantworten {
  display: grid; gap: 0.5rem; margin: 1rem 0 0.8rem;
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) {
  .quizantworten { grid-template-columns: 1fr 1fr; }
}
.antwortknopf {
  min-height: 52px; justify-content: center; font-size: var(--t-md);
  font-weight: 600; text-align: center;
}
.lernfuss { margin-top: 0.4rem; }

.lernzeile { align-items: center; gap: 0.9rem; }
.lernzahl {
  font-family: var(--mono); font-weight: 700; font-size: var(--t-md);
  color: var(--ink); font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.lernzahl .von { color: var(--ink-still); font-weight: 500; }

/* --- Bibliothek -------------------------------------------------------- */
/*
 * Ein leeres Playbook ist eine unangenehme Startseite. Hier stehen die
 * Konzepte, die im 5 gegen 5 ueberall gespielt werden -- mit Zeichnung,
 * denn eine Liste aus Namen waere wertlos: „Snag" sagt niemandem etwas,
 * der es nicht schon kennt, und genau die sollen es kennenlernen.
 */
.bibliothek {
  display: grid; gap: 0.9rem; margin: 1rem 0 1.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .bibliothek { grid-template-columns: 1fr 1fr; }
}
.bibkarte {
  display: block; cursor: pointer;
  background: var(--flaeche-panel); border: 1px solid var(--linie);
  border-radius: var(--r3); padding: 0.8rem 0.9rem 0.9rem;
  transition: border-color var(--tempo) var(--kurve);
}
.bibkarte:hover { border-color: var(--linie-stark); }
.bibkarte:has(input:checked) { border-color: var(--petrol); }
.bibkarte.schon-da { opacity: .72; }
.bibkopf { display: flex; align-items: flex-start; gap: 0.6rem; }
.bibkopf input { margin-top: 0.25rem; flex: 0 0 auto; }
.bibtitel { display: block; font-weight: 700; font-size: var(--t-md); }
.bibunter {
  display: block; font-size: var(--t-xs); color: var(--ink-still);
  margin-top: 0.1rem;
}
.bibfeld {
  margin: 0.7rem 0 0.6rem; border-radius: var(--r2); overflow: hidden;
  background: var(--flaeche-tief);
}
.bibfeld svg { width: 100%; height: auto; display: block; }
.bibhinweis {
  margin: 0; font-size: var(--t-sm); color: var(--ink-leise); line-height: 1.5;
}

/* Die Leiste am Fuss ist hier immer da, nicht nur nach einer Aenderung. */
.aktionsleiste.sichtbar { position: sticky; bottom: 0.6rem; }

.leerknoepfe {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
  margin-bottom: 0.6rem;
}

/* --- Schlüssel für andere Programme ------------------------------------ */
/*
 * Der Klartext wird genau einmal gezeigt. Der Kasten muss deshalb
 * auffallen -- wer ihn ueberliest, legt gleich den naechsten Schluessel an.
 */
.einmalkasten {
  margin-top: 1rem; padding: 0.9rem 1rem;
  border: 1px solid var(--gold); border-radius: var(--r2);
  background: var(--gold-hell);
}
.einmaltitel {
  margin: 0 0 0.6rem; font-size: var(--t-sm); font-weight: 700; color: var(--ink);
}
.kennung { font-family: var(--mono); font-size: var(--t-xs); }
.beispiel {
  margin: 0.5rem 0; padding: 0.7rem 0.8rem; overflow-x: auto;
  background: var(--flaeche-tief); border: 1px solid var(--linie);
  border-radius: var(--r2);
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-leise);
  line-height: 1.5;
}


/* --- Die oeffentliche Startseite -----------------------------------------
 *
 * Sie stand bis heute als 40-Zeilen-Block in `start.html` und benutzte
 * fast nichts vom Gestaltungssystem -- sie sah neben der Anwendung fremd
 * aus. Hier gehoert sie hin, neben alles andere.
 *
 * DUNKEL BLEIBT DUNKEL. Eine helle Verkaufsseite vor einer dunklen
 * Anwendung braeche das Versprechen und liesse jedes Bildschirmfoto wie
 * einen Fremdkoerper aussehen. Der einzige helle Bereich sind die
 * Druckseiten, und dort ist der Kontrast Absicht.
 */

.start { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem 5rem; }
.start > section { margin-top: 5.5rem; }
.start > .buehne + .beweis { margin-top: 3.5rem; }
.start h2 { font-family: var(--schrift-marke); font-weight: 700;
            font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.05;
            letter-spacing: -.004em; margin: 0 0 .9rem; text-wrap: balance; }
.start .vorspann { color: var(--ink-leise); font-size: var(--t-md);
                   max-width: 44rem; }

/* --- Die Buehne der Startseite ---------------------------------------
 *
 * Randlos ueber die ganze Breite, obwohl sie in `.start` steht: Der
 * Griff dafuer ist `margin-inline: calc(50% - 50vw)`. Ohne ihn saesse
 * das Spielfeld in einer 68rem breiten Spalte und saehe aus wie ein
 * Kasten, nicht wie ein Platz.
 *
 * Die Leinwand liegt darunter, der Schleier darueber, der Text ganz
 * oben. Der Schleier ist keine Deko: Ohne ihn steht heller Text auf
 * wechselnden Linien, und die Lesbarkeit haengt davon ab, welcher Zug
 * gerade gezeichnet wird.
 */
/* AN DIE STARTSEITE GEBUNDEN, und das ist kein Schoenheitsfehler.
 *
 * Ungebunden traf diese Regel auch `.buehne` im EDITOR -- dort heisst so
 * die Zeichenflaeche zwischen den beiden Spalten. Das
 * `margin-inline: calc(50% - 50vw)` zog sie ueber die volle Fensterbreite
 * und damit UEBER die Playliste links und die Eigenschaften rechts: In
 * der Messung lag sie bei 1680 Pixeln Fensterbreite von -32 bis 1648,
 * die Spalten waren verdeckt und nur ihre letzten 32 Pixel blieben
 * sichtbar. Dazu schob das Polster die Werkzeugleiste nach unten.
 *
 * Aufgefallen ist es an den Verkaufsbildern (25.08.2026): Auf jedem war
 * die Playliste leer und am rechten Rand standen Wortreste. Der Fehler
 * war nicht im Bild, sondern in der Seite. */
.start .buehne {
  position: relative; isolation: isolate;
  margin-top: 0; margin-inline: calc(50% - 50vw);
  padding: clamp(4rem, 11vh, 7rem) max(1.25rem, calc(50vw - 33rem))
           clamp(3.5rem, 9vh, 5.5rem);
  min-height: min(84vh, 46rem);
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  background: var(--flaeche-tief);
}
.buehnenfeld { position: absolute; inset: 0; width: 100%; height: 100%;
               display: block; z-index: -2; }
.buehnenschleier {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
      oklch(0.148 0.012 240 / .96) 0%, oklch(0.148 0.012 240 / .86) 30%,
      oklch(0.148 0.012 240 / .22) 58%, oklch(0.148 0.012 240 / 0) 88%);
}
.start .buehne .augenbraue {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--petrol); margin: 0 0 1.1rem;
}
.start .buehne h1 {
  font-family: var(--schrift-marke); font-weight: 700;
  font-size: clamp(2.4rem, 5.6vw, 4.2rem); line-height: 1.0;
  letter-spacing: -.006em; margin: 0 0 1.1rem; max-width: 20ch;
  text-wrap: pretty;
}
.start .buehne h1 em { font-style: normal; color: var(--petrol); }
.start .buehne .vorspann { max-width: 42ch; }
.buehnenmasse, .buehnenzug {
  position: absolute; bottom: 1.5rem; z-index: 1; margin: 0;
  font-family: var(--mono); font-size: var(--t-xs);
  color: var(--ink-still); letter-spacing: .04em;
}
.buehnenmasse { left: max(1.25rem, calc(50vw - 33rem)); }
.buehnenzug { right: max(1.25rem, calc(50vw - 33rem)); text-transform: uppercase; }
.buehnenzug b { color: var(--petrol); font-weight: 400; }

@media (max-width: 60rem) {
  /* Hochkant kommt der Text von oben, nicht von links. */
  .buehnenschleier { background: linear-gradient(180deg,
      oklch(0.148 0.012 240 / .95) 0%, oklch(0.148 0.012 240 / .88) 58%,
      oklch(0.148 0.012 240 / .50) 100%); }
  .buehnenzug { display: none; }
  /* Und der Text steht oben, nicht in der Mitte: Zentriert blieb ueber
     der Ueberschrift ein Drittel Bildschirm leer, und wer scrollt, ohne
     etwas gelesen zu haben, scrollt weiter. */
  .buehne { justify-content: flex-start; min-height: 0;
            padding-top: clamp(2rem, 6vh, 3.5rem); }
}

/* Auf sehr schmalen Geraeten bricht die Augenbraue in zwei Zeilen und
   sieht aus wie ein Fehler. Dann reicht die kurze Fassung. */
@media (max-width: 26rem) {
  .buehne .augenbraue .lang { display: none; }
}

.buehnenknopfe { display: flex; gap: .7rem; flex-wrap: wrap;
                 margin-top: 1.7rem; }
.buehnenknopfe .knopf.leise {
  border-color: oklch(0.945 0.006 240 / .30);
  background: oklch(0.148 0.012 240 / .45);
  backdrop-filter: blur(3px);
}
.buehnenknopfe .knopf.leise:hover {
  border-color: oklch(0.945 0.006 240 / .55);
}
.knopf.gross { height: 44px; padding: 0 1.4rem; font-size: var(--t-base); }

/* Bilder: der 1px-Rand ist Pflicht. Ohne ihn zerfliesst eine dunkle
   Aufnahme im dunklen Seitengrund, und man sieht nicht, wo sie aufhoert. */
.beweis { margin: 0; }
.beweis img { display: block; width: 100%; height: auto;
              border-radius: var(--r3); border: 1px solid var(--linie);
              box-shadow: var(--schatten-2); }
.beweis figcaption { margin-top: .85rem; color: var(--ink-still);
                     font-size: var(--t-sm); max-width: 40rem;
                     line-height: 1.55; }

.zweispaltig { display: grid; gap: 2.5rem; align-items: center; }
.zweispaltig .wort p { margin: 0 0 .9rem; color: var(--ink-leise); }
.zweispaltig .wort .hervor { color: var(--ink); font-weight: 550;
                             border-left: 2px solid var(--akzent);
                             padding-left: .9rem; margin-top: 1.4rem; }
.bildunterzeile { color: var(--ink-still); font-size: var(--t-sm);
                  margin-top: .85rem; }

.zweihandys { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.beweis.handy img { border-radius: var(--r2); }

/* `.wegweiser` gibt es SCHON (Zeile 563) -- Nummernkreis, Flexzeile,
   fertig gestaltet. Hier stand kurzzeitig eine zweite Fassung, und beide
   haben sich gestritten: Die Schritte standen nebeneinander statt
   uebereinander, und die Nummer schrumpfte zu einem Punkt.
   Statt der Klasse bekommt das Markup einen Umschlag (`.schritttext`),
   damit aus zwei Flexkindern eins wird. */
.wegweiser .schritttext b { display: block; margin-bottom: .2rem; }
.wegweiser .schritttext span { display: block; line-height: 1.5; }
.start .wegweiser { margin-top: 1.6rem; }

.formate { display: grid; gap: 1rem; margin-top: 1.6rem;
           grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.formate article { padding: 1.15rem 1.25rem; border: 1px solid var(--linie);
                   border-radius: var(--r2); background: oklch(1 0 0 / .025); }
.formate h3 { font-size: var(--t-base); margin: 0 0 .45rem; }
.formate p { margin: 0; color: var(--ink-still); font-size: var(--t-sm);
             line-height: 1.55; }
.papier .nachsatz { margin-top: 1.4rem; color: var(--ink-leise);
                    max-width: 44rem; }

.sachlich .punkte { list-style: none; padding: 0; margin: 1.4rem 0 0;
                    display: grid; gap: .8rem; max-width: 48rem; }
.sachlich .punkte li { color: var(--ink-still); line-height: 1.6;
                       padding-left: 1.1rem; position: relative; }
.sachlich .punkte li::before { content: ""; position: absolute; left: 0;
                               top: .62em; width: .5rem; height: 2px;
                               background: var(--petrol); border-radius: 1px; }
.sachlich .punkte b { color: var(--ink); font-weight: 550; }
.sachlich.stand { border-top: 1px solid var(--linie); padding-top: 3rem; }

.fragen dl { margin: 1.6rem 0 0; max-width: 48rem; }
.fragen dt { font-weight: 550; margin-top: 1.4rem; }
.fragen dd { margin: .35rem 0 0; color: var(--ink-still); line-height: 1.6; }

/* Der Aufruf am Ende der Startseite und der Fuss der Registrierung.
   Frueher hingen diese Regeln am Anfrageformular, das es seit dem
   21.08.2026 nicht mehr gibt. */
.feldzeile { display: flex; align-items: center; gap: 1rem;
             flex-wrap: wrap; margin-top: 1.4rem; }
.kleingedruckt { color: var(--ink-still); font-size: var(--t-xs);
                 margin: 1.1rem 0 0; line-height: 1.5; max-width: 44rem; }
/* Der Honigtopf gegen selbsttaetige Ausfueller. Nicht `display:none` --
   manche pruefen darauf; ausserhalb des Bildes bleibt er fuer sie ein
   normales Feld. */
input[name="webseite"] { position: absolute; left: -9999px;
                         width: 1px; height: 1px; }

/* Ab Tablet nebeneinander. Darunter bleibt alles untereinander -- auf
   dem Handy ist zweispaltig immer schlechter als einspaltig. */
@media (min-width: 60rem) {
  .zweispaltig { grid-template-columns: 1fr 1fr; }
  .zweispaltig.gedreht .wort { order: 2; }
}

/* --- Lernauftrag (A7) --------------------------------------------------- */
/*
 * Was der Coach jemandem aufgegeben hat, muss auf den ersten Blick von
 * dem zu unterscheiden sein, was einfach im Playbook steht. Petrol und
 * nicht Gold: Gold ist in dieser Marke die Warnfarbe, und eine Aufgabe
 * ist keine Warnung.
 */
.aufgabenmarke {
  display: inline-block; margin-left: 0.45rem; vertical-align: 1px;
  padding: 0.08rem 0.42rem; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.02em;
  color: var(--petrol-tief); background: var(--petrol-hell);
  border: 1px solid var(--petrol-rand);
  /* Umbricht nicht: „Deine Aufgabe" auf zwei Zeilen in einer Kachel
     sieht aus wie ein zweiter Titel. */
  white-space: nowrap;
}
.aufgabenhinweis a { color: var(--petrol-tief); }

.fortschrittsbalken.aus-auftrag .gefuellt { background: var(--petrol-tief); }

.lernzahl .marker {
  display: block; margin-top: 0.1rem;
  /* Die Zahl darueber steht in Monospace, damit Ziffern untereinander
     stehen. Ein Wort in Monospace sieht dagegen nach Quelltext aus. */
  font-family: var(--schrift); font-size: var(--t-xs);
  font-weight: 600; color: var(--petrol-tief); letter-spacing: 0.02em;
}

/* Der Link in die Kaderzeile. Leise, weil er neben einem Namen steht und
   nicht neben einer Entscheidung. */
.aufgabenlink { margin-top: 0.5rem; }

/* Die Kreuzchenliste auf der Aufgabenseite. Die ganze Zeile ist der
   Schalter: Wer auf dem Telefon ein 16-Pixel-Kaestchen treffen muss,
   hakt daneben. */
.auftragsliste { display: grid; gap: 0.25rem; margin-bottom: 0.4rem; }
.auftragszeile {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0.7rem; border-radius: var(--r3);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--tempo) var(--kurve);
}
.auftragszeile:hover { background: var(--flaeche-hoch); }
.auftragszeile:has(input:checked) {
  background: var(--petrol-hell); border-color: var(--petrol-rand);
}
.auftragszeile input { width: 20px; height: 20px; flex: 0 0 auto; }
.auftragszeile .titel { display: block; font-weight: 600; }
.auftragszeile .unter {
  display: block; font-size: var(--t-sm); color: var(--ink-leise);
}