/* ==========================================================================
   Coaches Cut · Gestaltungsgrundlage (Neugestaltung)

   Quelle ist NEUGESTALTUNG.md im Repo-Wurzelverzeichnis. Die Werte unten
   sind von dort übernommen, nicht erfunden; wo das Dokument keinen Wert
   nennt (etwa eine Fläche unter der Grundfläche), steht es dabei.

   Die Haltung in drei Sätzen: flach, ruhig, dunkle Graustufen mit genau
   einer leuchtenden Akzentfarbe. Keine Verläufe, keine Glaseffekte, keine
   Pillen -- die Kante ist hier gerade. Schatten nur dezent und nur, wo eine
   Ebene über einer anderen liegt.

   Drei Regeln, die nicht verhandelbar sind:
     1. Akzentblau steht nur für Bedienung: aktiv, primär, Auswahl, Playhead.
        Nie für einen Etikettwert, nie als große Fläche im Inhalt.
     2. Gold ist ausschließlich Warnung (Frist, Widerspruch, Strafe).
     3. Ziegel gehört der Defense.

   Diese Datei ist die einzige Quelle für Bausteine. Ein Seitenblock (block
   stil) enthält nur, was wirklich nur diese eine Seite betrifft.

   Die Token-Namen (--petrol, --ink, --flaeche-*) sind geblieben, obwohl der
   Akzent kein Petrol mehr ist: Sie stehen in über fünfzig Vorlagen und im
   Skript der Sichtung. Ein Umbenennen wäre Risiko ohne Gewinn.

   Seit dem 18.09.2026 steht dieses CSS in einer eigenen Datei statt in
   basis.html: Die React-Oberfläche lädt dieselbe Datei, damit beide
   Welten während des Umzugs gleich aussehen (REACT-UMBAU.md, Stufe 1).
   Die Werte selbst (Farben, Maße) stehen in tokens.css, und die wird aus
   oberflaeche/packages/tokens erzeugt. Hier stehen nur die Bausteine.
   ========================================================================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--flaeche-grund);color:var(--ink);
  font-family:var(--schrift);font-size:var(--t-base);line-height:1.533;letter-spacing:0;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;
}
/* H1 32/38 und H2 24/30 Bold Condensed · H3 13/18 SemiBold, Großbuchstaben,
   0,1 em, Sekundärtext · H4 17/24 SemiBold. */
h1,h2{margin:0;font-family:var(--schrift-marke);font-weight:700;letter-spacing:0;text-wrap:balance}
h1{font-size:2rem;line-height:2.375rem;margin-bottom:.125rem}
h2{font-size:1.5rem;line-height:1.875rem;margin:2rem 0 .75rem}
h3{margin:1.5rem 0 .5rem;font-family:var(--schrift);font-size:.8125rem;line-height:1.125rem;
   font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-leise)}
h4{margin:0 0 .25rem;font-family:var(--schrift);font-size:1.0625rem;line-height:1.5rem;font-weight:600}
p{margin:0 0 .75rem}
.p1{font-size:1.0625rem;line-height:1.625rem}
.p3{font-size:.8125rem;line-height:1.1875rem}
.zahl,.mono{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.leise{color:var(--ink-leise)}
.still{color:var(--ink-still)}
.klein{font-size:var(--t-sm)}
.verdichtet{font-family:var(--schrift-marke);font-weight:700}
a{color:var(--petrol);text-decoration:none}
a:hover{text-decoration:underline}
/* Sichtbarer Fokusring, überall: 2 px Akzentblau mit 2 px Abstand. */
:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
hr{border:0;border-top:1px solid var(--linie);margin:1.5rem 0}
.icon{display:block;flex:none}
/* hidden gewinnt immer: Bausteine setzen display selbst und blieben sonst sichtbar. */
[hidden]{display:none!important}
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── Kopfleiste (68 px, Figma `Page Template` 72:4) ──────────────────────
   EINE Zeile: Marke, Trennstrich, Mannschaftswahl, die Bereiche als
   gewöhnlicher Text, ganz rechts Rollenwechsel, Farbschema und Konto.

   Bis zum 23.09.2026 waren es zwei Zeilen -- diese und darunter eine
   klebende Leiste mit Icon über Großbuchstaben. Die Figma setzt beides in
   eine; `--kopf-hoehe` ist deshalb von 56 auf 68 Pixel gegangen. Die
   Unterleiste bleibt als eigene, dünne Zeile, aber nur wenn der gewählte
   Bereich Punkte HAT. */
.kopfleiste{
  position:sticky;top:0;z-index:var(--z-haftend);
  display:flex;align-items:center;gap:.875rem;
  height:var(--kopf-hoehe);padding:0 var(--rand-aussen);
  padding-top:env(safe-area-inset-top,0px);box-sizing:content-box;
  background:var(--flaeche-panel);
}
.marke{display:flex;align-items:center;gap:.625rem;color:var(--ink);
  text-decoration:none;white-space:nowrap;flex:0 0 auto}
.marke:hover{text-decoration:none}
/* Das Markenzeichen (seit 23.09.2026 eine echte Marke, kein Monogramm
   mehr): ein durchgeschnittenes C. Die Ecken sind im SVG gerundet, hier
   steht nur die Groesse -- sonst haette die Rundung zwei Wahrheiten. */
.marke-zeichen{width:2rem;height:2rem;flex:none;display:block}
.marke-wort{font-family:var(--schrift-marke);font-weight:700;font-size:1.25rem;
  line-height:1;color:var(--ink)}
.marke-zusatz{font-family:var(--schrift-marke);font-weight:600;font-size:1.25rem;
  line-height:1;color:var(--ink-leise)}
.trenn-lotrecht{width:1px;height:1.5rem;background:var(--linie);flex:none}
.kopf-trenner{width:1px;height:1.5rem;background:var(--linie);flex:none;margin:0 .25rem}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex:0 0 auto}

/* Klappmenüs der Kopfleiste (Mannschaft, Konto) und der Karten (Kebab). */
.mehr{position:relative;flex:0 0 auto;font-size:var(--t-sm)}
.mehr>summary{
  list-style:none;cursor:pointer;color:var(--ink);font-weight:600;
  padding:0 .625rem;min-height:2.25rem;border-radius:var(--r2);line-height:1;
  display:flex;align-items:center;gap:.5rem;white-space:nowrap;
  border:1px solid transparent;
}
.mehr>summary::-webkit-details-marker{display:none}
.mehr>summary:hover,.mehr[open]>summary{background:var(--flaeche-hoch)}
.mehr .klappe{
  position:absolute;right:0;top:calc(100% + .375rem);min-width:13rem;
  background:var(--flaeche-hoch);border:1px solid var(--linie);
  border-radius:var(--r2);box-shadow:var(--schatten-3);
  padding:.25rem;display:flex;flex-direction:column;z-index:var(--z-menue);
}
.mehr .klappe.links{right:auto;left:0}
.mehr .klappe a,.klappe-eintrag{
  color:var(--ink);padding:.5rem .75rem;border-radius:var(--r1);
  font-size:var(--t-sm);white-space:nowrap;font-weight:500;
}
.mehr .klappe a:hover{background:var(--flaeche-aktiv);text-decoration:none}
/* Der Eintrag, der etwas zerstoert. Er sieht aus wie die anderen und ist
   rot -- nicht als Knopf, denn im Klappmenue stehen Eintraege, keine
   Knoepfe. Stand bis zum 23.09.2026 in `aufnahmen.css`. */
.klappe .gefahr-text{background:none;border:0;width:100%;text-align:left;cursor:pointer;
  color:var(--fehler);font:inherit;font-weight:500}
.klappe .gefahr-text:hover{background:var(--flaeche-aktiv)}
.mehr .klappe .trenner{border-top:1px solid var(--linie);margin:.25rem 0}
.mehr .klappe .klappe-titel{padding:.5rem .75rem .25rem;font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-still)}
.unterleiste-trenner{flex:0 0 auto;width:1px;align-self:stretch;
  margin:.5rem .25rem;background:var(--linie)}
/* Zwei Warnungen im Kopf: Speicher knapp und Abo endet bald. Gold, weil es
   Warnungen sind -- und nur deshalb. */
.kopf-warnung{display:inline-block;margin-left:5px;padding:1px 6px;font-size:10px;
  border-radius:var(--r1);background:var(--gold);color:var(--flaeche-grund);
  font-weight:700;letter-spacing:.02em}
.mehr .klappe .abmeldeform{margin:0}
.mehr .klappe button.klappe-eintrag{
  display:block;width:100%;text-align:left;background:none;border:0;
  cursor:pointer;font:inherit;font-size:var(--t-sm);font-weight:500;
  color:var(--ink);padding:.5rem .75rem;border-radius:var(--r1);
}
.mehr .klappe button.klappe-eintrag:hover{background:var(--flaeche-aktiv)}
/* Die gewählte Mannschaft bekommt einen Haken. Ohne ihn muss man raten,
   worauf die Ansicht gerade eingegrenzt ist. */
.mehr .klappe button.klappe-eintrag.gewaehlt{color:var(--petrol)}
.mehr .klappe button.klappe-eintrag.gewaehlt::after{content:" ✓"}
.mehr .klappe form{margin:0;display:flex;flex-direction:column}
.mannschaft-abzeichen{display:inline-flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;border-radius:var(--r1);background:var(--flaeche-aktiv);
  color:var(--ink);font-family:var(--schrift-marke);font-weight:700;font-size:.8125rem}
.avatar{display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;border-radius:50%;background:var(--flaeche-aktiv);
  color:var(--ink);font-family:var(--schrift-marke);font-weight:700;
  font-size:.875rem;flex:none;letter-spacing:.02em}
.avatar.spieler{border-radius:var(--r1);font-variant-numeric:tabular-nums}
/* Mannschaft: Wappen-Platzhalter mit Kürzel. Die Farbe setzt der Baustein
   aus Mannschaft.farbe, die Schrift darauf aus --auf-hell oder --auf-dunkel. */
.avatar.mannschaft{border-radius:var(--r2)}
/* Klein, mittel, gross, einheitlich je Liste (REACT-UMBAU.md, Personenliste).
   Mittel ist .avatar selbst. */
.avatar.klein{width:1.5rem;height:1.5rem;font-size:.75rem}
.avatar.gross{width:3.25rem;height:3.25rem;font-size:1.25rem}
/* Konten tragen einen Blobatar statt der Initialen (NEUGESTALTUNG.md,
   Avatare). Er kommt ohne eigenen Hintergrund und sitzt auf dem Kreis oben,
   damit Hell und Dunkel aus den Tokens stimmen. Die Initialen bleiben im
   Element stehen, bis das Bild da ist, und ohne JavaScript für immer. */
.avatar.blob{overflow:hidden}
.avatar.blob>svg{display:block;width:100%;height:100%}
/* Ein fast schwarzer Körper verschwindet im Dunkelmodus im Kreis. Er bekommt
   einen Ring in der leisen Schriftfarbe (Gesamtkonzept 9.33). Die Klasse
   setzt kontobildMarkup; der Körper ist die Gruppe neben den Augen, dieselbe
   Stelle, die motion.css selbst einfärbt. */
html[data-thema="dunkel"] .avatar.blob.dunkel .mo-bob>g:not(.mo-eyes){
  stroke:var(--ink-leise);stroke-width:4;stroke-linejoin:round}
/* Bewegung (blobatar.css): Der ganze Kreis weckt das Wesen, nicht nur sein
   Körper. Wie in motion.css nur mit echtem Mauszeiger; wer weniger Bewegung
   eingestellt hat, bekommt ohnehin keine. */
@media (hover:hover) and (pointer:fine){
  .avatar.blob:hover .mo-root,summary:hover>.avatar.blob .mo-root{--mo-amp:1}
}
/* Statuspunkt, Figmas `Status = true` (72:400).
   **Auf keinem Bildschirm benutzt, und das mit Absicht.** Ein gruener
   Punkt allein sagt nicht, WAS gruen ist -- „Farbe ist nie der einzige
   Traeger" (NEUGESTALTUNG.md). Wo dieses Haus einen Zustand zeigt, steht
   er als Plakette mit Wort daneben („inaktiv" in der Spielerzeile). Der
   Baustein steht hier, damit das Gestaltungssystem zur Figma passt und
   die Bausteinseite ihn in beiden Schemata zeigt; wer ihn einsetzt,
   stellt ein Wort dazu. */
.avatar.mit-status{position:relative}
.avatar.mit-status::after{content:"";position:absolute;right:-1px;bottom:-1px;
  width:.625rem;height:.625rem;border-radius:50%;background:var(--gut);
  box-shadow:0 0 0 2px var(--flaeche-karte)}
.avatar.klein.mit-status::after{width:.5rem;height:.5rem}
.avatar.gross.mit-status::after{width:.875rem;height:.875rem}
.avatar-gruppe{display:inline-flex}
.avatar-gruppe>.avatar{margin-left:-.5rem;box-shadow:0 0 0 2px var(--flaeche-karte)}
.avatar-gruppe>.avatar:first-child{margin-left:0}

/* Rollenwechsel: ein Wort, das sagt, was ein Klick tut. Nur für
   Spielertrainer, die beide Rollen haben. */
.rollenwechsel{display:inline-flex;align-items:center;gap:.375rem;min-height:2.25rem;
  padding:0 .75rem;border-radius:var(--r2);font-size:var(--t-sm);font-weight:600;
  color:var(--ink-leise);white-space:nowrap}
.rollenwechsel:hover{background:var(--flaeche-hoch);color:var(--ink);text-decoration:none}
.thema-knopf{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;padding:0;border-radius:var(--r2);
  border:0;background:transparent;color:var(--ink-leise);cursor:pointer;flex:0 0 auto;
}
.thema-knopf:hover{background:var(--flaeche-hoch);color:var(--ink)}
.thema-knopf svg[hidden]{display:none}

/* ── Die Bereiche, als Text IN der Kopfzeile (Figma 72:4) ────────────────
   Vorher: Icon über Großbuchstaben, in einer eigenen klebenden Leiste.
   Jetzt: gewöhnliche Textlinks in Satzschreibweise, wie die Figma sie
   zeichnet. Das Icon bleibt, wo es trägt -- in der unteren Leiste am
   Telefon, wo es keinen Platz für Wörter gibt.

   Ein eigener Scroll-Container bleibt: Acht Bereiche passen bei 1024 px
   nicht immer, und seitwärts schieben ist besser als umbrechen -- eine
   Kopfzeile, die auf zwei Zeilen läuft, schiebt die ganze Seite. */
.bereiche{display:flex;align-items:center;gap:.125rem;min-width:0;
  overflow-x:auto;scrollbar-width:none}
.bereiche::-webkit-scrollbar{display:none}
.bereiche a,.bereiche .tot{
  display:inline-flex;align-items:center;white-space:nowrap;
  min-height:2.25rem;padding:0 .75rem;border-radius:var(--r2);
  font-size:.9375rem;line-height:1.25rem;font-weight:500;
  color:var(--ink-leise);
}
.bereiche a:hover{color:var(--ink);background:var(--flaeche-hoch);text-decoration:none}
/* Der gewählte Bereich: Fläche UND Farbe, wie Figmas `Nav Item` im Zustand
   „Active" (11:24). Die Farbe trägt es nicht allein -- `aria-current` sagt
   es dem Vorleseprogramm. */
.bereiche a[aria-current="page"]{color:var(--petrol);background:var(--flaeche-hoch);font-weight:600}
.bereiche .tot{opacity:.45}

/* ── Unterpunktzeile: die Punkte INNERHALB des gewählten Bereichs ────────
   Sie steht nur da, wenn es welche gibt. */
.reiterleiste{
  position:sticky;top:calc(var(--kopf-hoehe) + env(safe-area-inset-top,0px));z-index:19;
  background:var(--flaeche-panel);border-top:1px solid var(--linie);
  box-shadow:0 1px 0 var(--linie);
}
.unterleiste{display:flex;align-items:center;gap:.25rem;padding:0 var(--rand-aussen);
  min-height:2.5rem;
  overflow-x:auto;scrollbar-width:none}
.unterleiste::-webkit-scrollbar{display:none}
.unterleiste a,.unterleiste span.tot{
  display:inline-flex;align-items:center;white-space:nowrap;
  min-height:2.5rem;padding:0 .625rem;font-size:var(--t-sm);font-weight:500;
}
.unterleiste a{color:var(--ink-leise)}
.unterleiste a:hover{color:var(--ink);text-decoration:none}
.unterleiste a[aria-current="page"]{color:var(--petrol);font-weight:600}
/* Braucht eine geöffnete Aufnahme: sichtbar, aber ohne Link. */
.unterleiste span.tot{color:var(--ink-leise);opacity:.45;cursor:not-allowed}

/* ── Untere Leiste am Telefon ───────────────────────────────────────────── */
.unten-leiste{display:none}
@media (max-width:640px){
  .unten-leiste{
    position:fixed;left:0;right:0;bottom:0;z-index:var(--z-haftend);
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    background:var(--flaeche-panel);border-top:1px solid var(--linie);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .unten-leiste a,.unten-leiste .tot{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.1875rem;min-height:3.5rem;font-size:.6875rem;font-weight:600;letter-spacing:.04em;
    text-transform:uppercase;color:var(--ink-leise)}
  .unten-leiste a:hover{text-decoration:none;color:var(--ink)}
  .unten-leiste a[aria-current="page"]{color:var(--petrol)}
  .unten-leiste .tot{opacity:.45}
  .unten-leiste .punkt-neu{position:absolute;top:.5rem;left:calc(50% + .5rem);width:.5rem;height:.5rem;
    border-radius:50%;background:var(--fehler);box-shadow:0 0 0 2px var(--flaeche-panel)}
  body.hat-untenleiste{padding-bottom:calc(3.5rem + env(safe-area-inset-bottom,0px))}
  body.hat-untenleiste .bereiche{display:none}
  body.hat-untenleiste .reiterleiste:not(:has(.unterleiste)){display:none}
  body.hat-untenleiste .unterleiste{border-top:0}
}

/* ── Reiterzeile: die Reiter INNERHALB einer Seite ───────────────────────
   Nicht zu verwechseln mit `.reiterleiste` darueber: Die ist die klebende
   Bereichsnavigation der App, diese hier teilt EINE Seite auf (Verein,
   Freigaben/Austausch). Sie stand bis zum 23.09.2026 in `verein.css` und
   damit in einer Seitendatei -- global, aber nur an einer Stelle gepflegt.
   Als die zweite Seite sie brauchte, waere daraus eine zweite Fassung
   unter demselben Namen geworden. Dieselbe Falle wie `.segmente`.

   Sie traegt Knopf UND Verweis: In der Vereinsseite wechseln die Reiter
   einen Zustand, bei Freigaben/Austausch die Adresse. Beides ist richtig,
   und beides sieht gleich aus. */
.reiterzeile{display:flex;gap:.25rem;flex-wrap:wrap;
  border-bottom:1px solid var(--linie);margin-bottom:var(--panel-abstand)}
.reiterzeile>button,.reiterzeile>a{
  background:none;border:0;border-bottom:2px solid transparent;
  color:var(--ink-leise);padding:.5rem .75rem;cursor:pointer;
  font-size:var(--t-sm);text-decoration:none}
.reiterzeile>button:hover,.reiterzeile>a:hover{color:var(--ink)}
.reiterzeile>button[aria-current="page"],.reiterzeile>a[aria-current="page"]{
  color:var(--ink);border-bottom-color:var(--petrol);font-weight:600}

/* ── Seitengerüst ────────────────────────────────────────────────────────
   Inhalt höchstens 1240 px breit und mittig; die Sichtung nutzt die volle
   Breite (main.weit). */
main{padding:1.75rem var(--rand-aussen) 3rem;max-width:calc(var(--seite-max) + 2 * var(--rand-aussen));
  margin:0 auto;width:100%}
main.weit{max-width:none}
.seitenkopf{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:var(--panel-abstand)}
.seitenkopf>div:first-child{min-width:0}
.unterzeile{color:var(--ink-leise);font-size:var(--t-base);margin:.25rem 0 0;max-width:74ch}
.mass{max-width:74ch}

/* ── Datentabelle ────────────────────────────────────────────────────────
   Text links, Zahlen rechts, nie zentriert. Fett nur im Kopf. Überfahren
   nur, wenn Zeilen auswählbar sind (table.waehlbar). Breite Tabellen in
   einen eigenen Scrollrahmen, nie die Seite. */
.tabellenrahmen{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--karte-rand);border-radius:var(--r3);background:var(--flaeche-karte)}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm);font-variant-numeric:tabular-nums}
caption.titel{caption-side:top;text-align:left;padding:.75rem 1rem;font-weight:600;color:var(--ink)}
th{text-align:left;font-family:var(--schrift);font-weight:600;
  font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-leise);padding:.625rem .75rem;
  border-bottom:1px solid var(--linie);white-space:nowrap;background:var(--flaeche-karte)}
td{padding:.75rem;border-bottom:1px solid var(--linie);vertical-align:middle;font-weight:400}
tbody tr:last-child td{border-bottom:none}
table.waehlbar tbody tr{cursor:pointer}
table.waehlbar tbody tr:hover td{background:var(--flaeche-hoch)}
/* Gewaehlt, der dritte Zustand aus Figmas `Table Row` (10:42). Er liegt
   eine Ebene ueber Hover, damit eine gewaehlte Zeile gewaehlt BLEIBT,
   wenn der Zeiger daruebersteht -- sonst sieht sie aus wie jede andere,
   ueber der er gerade steht. Die Farbe traegt sie nicht allein: Wer
   `aria-selected` setzt, sagt es auch dem Vorleseprogramm. */
table.waehlbar tbody tr[aria-selected="true"]>td{background:var(--flaeche-aktiv)}
table.waehlbar tbody tr[aria-selected="true"]>td:first-child{
  box-shadow:inset 2px 0 0 var(--petrol)}
table.frei td,table.frei th{border-bottom:0}
table.gestreift tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--flaeche-hoch) 45%,transparent)}
table.haftend thead th{position:sticky;top:0;z-index:2}
td.rechts,th.rechts,td.zahl,th.zahl{text-align:right}
/* Tabellendichte, unter Profil → Darstellung wählbar: kompakt 6, normal 12. */
body[data-dichte="dicht"] td,body[data-dichte="dicht"] th{padding:.375rem .625rem}
body[data-dichte="weit"] td,body[data-dichte="weit"] th{padding:1rem .875rem}

/* ── Plaketten und Chips ─────────────────────────────────────────────────
   Farbe ist nie der einzige Träger: Jede Plakette trägt ihr Wort. */
.plakette,.chip,.etikett{
  display:inline-flex;align-items:center;gap:.3125rem;padding:.125rem .4375rem;
  min-height:1.375rem;font-size:.75rem;line-height:1rem;font-weight:600;border-radius:var(--r1);
  border:1px solid var(--linie);color:var(--ink-leise);
  background:var(--flaeche-hoch);white-space:nowrap;
}
/* DIE PLAKETTE NACH DER FIGMA (Baustein `Badge`, Knoten 4:141).
   Fuenf Zustaende: Success, Danger, Warning, Info, Neutral. Punkt links,
   Text in der Tonfarbe, Flaeche ruhig dahinter, kein farbiger Rand.

   HIER KOMMT DIE PILLE ZURUECK, und nur hier. `NEUGESTALTUNG.md` schafft
   sie ab („Keine Pillen -- die Kante ist hier gerade"), die Figma hat sie
   als `radius/full`. Das Papier verlangt ausdruecklich, dass diese Frage
   „beim Umzug zu entscheiden und nicht stillschweigend" beantwortet wird
   (NEUGESTALTUNG.md, Abweichung 3). Entschieden am 22.09.2026: Die Pille
   gilt fuer die PLAKETTE, weil die Figma sie dort benutzt, und fuer
   nichts sonst. Knoepfe, Karten und Felder behalten die gerade Kante.

   Und: keine erzwungenen Grossbuchstaben mehr. Figmas Textstile stehen
   auf `textCase: ORIGINAL`; wo Grossbuchstaben gemeint sind, steht der
   Text selbst so da. */
.plakette{font-size:.6875rem;letter-spacing:.01em;border-radius:999px;
  padding:.125rem .5rem;
  --ton:var(--ink-leise);color:var(--ton);border-color:transparent;
  background:var(--flaeche-hoch)}
.plakette::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:currentColor;flex:none}
.plakette.ohne-punkt::before{display:none}
/* Zustand einer Aufnahme. */
.p-neu{--ton:var(--z-neu)}
.p-einlesen{--ton:var(--z-einlesen)}
.p-erkennung{--ton:var(--z-erkennung)}
.p-erkennung::before{animation:puls 1.4s ease-in-out infinite}
.p-bereit{--ton:var(--z-bereit)}
.p-fehler{--ton:var(--z-fehler)}
.p-arbeit{--ton:var(--z-einlesen)}
/* Neutral, Warnung (Gold, nur Warnung), Bedienung (Blau). */
.p-ruhe{--ton:var(--ink-leise)}
.p-warnung{--ton:var(--gold)}
.p-akzent{--ton:var(--petrol)}
.p-gut{--ton:var(--gut)}
/* Prüfstand eines Spielzugs. */
.p-offen{--ton:var(--p-offen);background:transparent}
.p-bestaetigt{--ton:var(--p-bestaetigt)}
.p-korrigiert{--ton:var(--p-korrigiert)}
.p-verworfen{--ton:var(--p-offen);opacity:.45;text-decoration:line-through}
@keyframes puls{50%{opacity:.25}}
.marken{display:flex;flex-wrap:wrap;gap:.375rem}

/* Etikett-Chip in der Farbe seiner Gruppe. Leer: gestrichelter Umriss mit
   dem Gruppennamen. Unbekannt ("?"): ebenfalls gestrichelt -- eine Aufgabe,
   keine Leere. */
.etikett-chip{display:inline-flex;align-items:center;gap:.375rem;min-height:1.625rem;
  padding:0 .5rem;border-radius:var(--r1);font-size:var(--t-sm);font-weight:600;white-space:nowrap;
  --g:var(--ink-leise);color:var(--g);background:color-mix(in srgb,var(--g) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--g) 40%,transparent)}
.etikett-chip.gewaehlt{background:var(--g);color:var(--flaeche-grund);border-color:var(--g)}
/* Ein Chip, der etwas oeffnet. Er sieht aus wie die anderen und traegt
   den Zeiger -- ein Knopf, der sich als Beschriftung tarnt, waere die
   schlechtere Wahl, aber eine Beschriftung, die klickt, ohne es zu
   zeigen, auch. */
button.etikett-chip.klickbar{cursor:pointer;font:inherit}
button.etikett-chip.klickbar:hover{background:var(--flaeche-aktiv);color:var(--ink)}
button.etikett-chip.klickbar:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}

/* ── Farbwahl: die neun Mannschaftsfarben als Kreise ─────────────────────
   Eine freie Farbwahl waere die Stelle, an der jemand ein unlesbares Grau
   trifft. Die Auswahl traegt ihre Bedeutung im `aria-label`, nicht in der
   Farbe -- sonst waere sie fuer Farbenblinde neun gleiche Knoepfe. */
.farbwahl{display:flex;gap:.375rem;flex-wrap:wrap}
.farbwahl>.farbe{width:1.75rem;height:1.75rem;border-radius:50%;cursor:pointer;
  border:2px solid transparent;padding:0}
.farbwahl>.farbe[aria-pressed="true"]{border-color:var(--ink);
  box-shadow:0 0 0 2px var(--flaeche-panel)}
.farbwahl>.farbe:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
/* Die Gruppenklassen stehen NACH dem Chip, sonst gewinnt dessen neutrale
   Vorgabe bei gleicher Spezifität. */
.g-versuch{--g:var(--g-versuch)} .g-angriff{--g:var(--g-angriff)}
.g-richtung{--g:var(--g-richtung)} .g-formation{--g:var(--g-formation)}
.g-ergebnis{--g:var(--g-ergebnis)} .g-verteidigung{--g:var(--g-verteidigung)}
.g-besonderes{--g:var(--g-besonderes)}
/* Nicht .leer: Das ist der leere Zustand einer Seite, mit großem Innenabstand. */
.etikett-chip.ohne-wert,.chip.unbekannt{background:transparent;border:1px dashed var(--linie-stark);
  color:var(--ink-still);font-weight:500}
.farbpunkt{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--g,currentColor);flex:none}

/* ── Knöpfe ──────────────────────────────────────────────────────────────
   Primär, sekundär, Gefahr, nur Icon, nur Text. Radius 8, gerade Kante. */
/* DER KNOPF NACH DER FIGMA-FASSUNG (Baustein `Button`, Knoten 4:75).
   Vier Arten: Primary gefuellt, Secondary umrandet, Ghost nackt, Danger
   gefuellt. Drei Groessen. Seit dem 22.09.2026 abends, mit den Werten.

   ZWEI ECHTE AENDERUNGEN gegenueber vorher:
   - Sekundaer war grau GEFUELLT und ist jetzt durchsichtig mit Rand, wie
     in der Figma. Neben einem primaeren Knopf sah der gefuellte fast so
     wichtig aus wie dieser.
   - Gefahr war umrandeter Text und ist jetzt GEFUELLT. Ein Knopf, der
     etwas endgueltig loescht, soll aussehen wie eine Entscheidung und
     nicht wie ein Verweis. */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.4375rem;
  min-height:2.25rem;padding:0 .875rem;
  font:inherit;font-size:var(--t-base);font-weight:600;line-height:1.25;color:var(--ink);
  background:transparent;border:1px solid var(--linie-stark);
  border-radius:var(--r2);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--tempo) var(--kurve),border-color var(--tempo) var(--kurve),
             color var(--tempo) var(--kurve);
}
.knopf:hover{background:var(--flaeche-hoch);text-decoration:none}
.knopf:active{background:var(--flaeche-aktiv)}
.knopf[disabled],.knopf[aria-disabled="true"],.knopf:disabled{
  opacity:.45;cursor:not-allowed;pointer-events:none}
.knopf.haupt,.knopf.aktiv{color:var(--auf-petrol);background:var(--petrol);border-color:var(--petrol)}
.knopf.haupt:hover,.knopf.aktiv:hover{background:var(--petrol-tief);border-color:var(--petrol-tief)}
.knopf.haupt:active,.knopf.aktiv:active{background:var(--petrol-gedrueckt);filter:none}
.knopf.stumm,.knopf.leise{background:transparent;border-color:transparent;color:var(--ink-leise)}
.knopf.stumm:hover,.knopf.leise:hover{background:var(--flaeche-hoch);color:var(--ink)}
/* Gefuellt wie in der Figma. Die Schrift ist `--auf-petrol` und nicht
   Weiss: Im Dunkelschema ist das Fehlerrot hell (#FB7185), und weisse
   Schrift darauf waere nicht zu lesen. */
.knopf.gefahr{color:var(--auf-petrol);background:var(--fehler);border-color:var(--fehler)}
.knopf.gefahr:hover{background:color-mix(in srgb,var(--fehler) 86%,var(--ink));
  border-color:color-mix(in srgb,var(--fehler) 86%,var(--ink))}
.knopf.gefahr:active{background:color-mix(in srgb,var(--fehler) 76%,var(--ink))}
.knopf.abbrechen{background:var(--abbrechen);border-color:var(--abbrechen)}
/* Figmas drei Groessen: Small 30, Medium 36, Large 40 Punkte hoch. */
.knopf.mini,.knopf.klein{min-height:1.875rem;padding:0 .75rem;font-size:var(--t-sm)}
.knopf.gross{min-height:2.5rem;padding:0 1.25rem;font-size:var(--t-md)}
.knopf.breit{width:100%}
.knopf.nur-icon{width:2.25rem;padding:0}
.knopf.nur-icon.gross{width:2.5rem}
.knopf.nur-icon.klein,.knopf.nur-icon.mini{width:1.875rem}
.knopfreihe{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}

/* Segmented Control: Chips 46 px hoch, 22 px Innenabstand. Aktiv: blaue
   Fläche, dunkler Text. Für Filter über Links (a) wie über Knöpfe. */
.segmente{display:inline-flex;flex-wrap:wrap;gap:0;border:1px solid var(--linie);
  border-radius:var(--r2);background:var(--flaeche-karte);overflow:hidden}
.segmente>a,.segmente>button{display:inline-flex;align-items:center;gap:.375rem;min-height:2.875rem;
  padding:0 1.375rem;font:inherit;font-size:var(--t-base);font-weight:600;color:var(--ink-leise);
  background:transparent;border:0;border-right:1px solid var(--linie);cursor:pointer;white-space:nowrap}
.segmente>:last-child{border-right:0}
.segmente>a:hover,.segmente>button:hover{color:var(--ink);background:var(--flaeche-hoch);text-decoration:none}
.segmente>[aria-current="page"],.segmente>[aria-pressed="true"],.segmente>.aktiv{
  background:var(--petrol);color:var(--auf-petrol)}
.segmente .anzahl{font-family:var(--mono);font-size:var(--t-sm);opacity:.8}
.segmente.klein>a,.segmente.klein>button{min-height:2.125rem;padding:0 .875rem;font-size:var(--t-sm)}

/* Tastenkürzel: 11 px, Monospace, eigene Fläche, Radius 4. Ein Baustein,
   keine Beschriftung. */
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;
  font-family:var(--mono);font-size:11px;line-height:1;padding:.1875rem .3125rem;
  border-radius:var(--r1);background:var(--kbd-flaeche);border:0;color:var(--ink);
  font-weight:500;white-space:nowrap}
.knopf.haupt kbd{background:rgb(0 0 0 / .18);color:inherit}
.tastenraster{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;align-items:center;text-align:left}

/* ── Formularfelder ────────────────────────────────────────────────────── */
label{display:block;font-family:var(--schrift);font-size:var(--t-sm);
  font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--ink-leise);margin-bottom:.375rem}
label small,label .hilfe,label .hinweiszeile{
  display:block;font-family:var(--schrift);font-size:var(--t-sm);font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ink-still);margin-top:.25rem}
label:has(input[type=checkbox]),label:has(input[type=radio]){
  display:flex;align-items:center;gap:.5rem;font-family:var(--schrift);
  font-size:var(--t-base);font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--ink);cursor:pointer}
/* Ohne type-Angabe ist ein Feld trotzdem ein Textfeld, deshalb der Weg
   über Ausschluss statt über [type=text]. */
/* DAS FELD NACH DER FIGMA (Baustein `Input`, Knoten 4:117). Vier
   Zustaende: Default, Focus, Error, Disabled -- gefuellte Flaeche,
   zwei Pixel Rand im Fokus, zwei Pixel rot im Fehler.

   EINE ABWEICHUNG, und sie ist Absicht. Figmas Feld hat im Ruhezustand
   GAR KEINEN Rand, nur die Fuellung. Zwischen `--flaeche-hoch` (#F2F3F4)
   und der Karte darunter (#FFFFFF) liegen aber 1,05:1 -- die Feldgrenze
   waere damit nach WCAG 1.4.11 nicht erkennbar, und am Spielfeldrand in
   der Sonne sieht man sie sicher nicht. Deshalb bleibt eine Haarlinie
   stehen. Alles andere folgt der Figma. */
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-base);color:var(--ink);
  background:var(--flaeche-hoch);border:1px solid var(--linie);
  border-radius:var(--r2);padding:.4375rem .6875rem;min-height:2.375rem;width:100%;
  transition:border-color var(--tempo) var(--kurve),box-shadow var(--tempo) var(--kurve);
}
textarea{min-height:5rem;resize:vertical;line-height:1.5}
input:hover,select:hover,textarea:hover{border-color:var(--linie-stark)}
/* Zwei Pixel wie in der Figma, als Schatten statt als Rand: So springt
   die Zeile beim Hineinklicken nicht um einen Pixel. */
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--petrol);
  box-shadow:0 0 0 1px var(--petrol)}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}
input[aria-invalid="true"],.feld.fehler input,.feld.fehler select{
  border-color:var(--fehler);box-shadow:0 0 0 1px var(--fehler)}
input::placeholder,textarea::placeholder{color:var(--ink-still)}
select{appearance:none;padding-right:2.25rem;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239BA3AA' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center}
input[type=checkbox],input[type=radio]{width:1.125rem;height:1.125rem;
  accent-color:var(--petrol);cursor:pointer;flex:none}
input[type=range]{width:100%;accent-color:var(--petrol)}
.feld{margin-bottom:1rem}
.feld .hinweiszeile{font-size:var(--t-sm);color:var(--ink-still);margin-top:.3125rem}
.feld.fehler .hinweiszeile{color:var(--fehler)}
.feld.waagerecht{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.feld.waagerecht label{margin:0;font-size:var(--t-base);color:var(--ink);font-weight:400}
.feldreihe{display:flex;gap:.75rem;flex-wrap:wrap}
.feldreihe>.feld{flex:1 1 190px;min-width:0}
/* Feldzusatz: Einheit oder Knopf im Feld ("Yards", "s"). */
.feldzusatz{display:flex;align-items:stretch}
.feldzusatz>input{border-top-right-radius:0;border-bottom-right-radius:0}
.feldzusatz>.zusatz{display:inline-flex;align-items:center;padding:0 .625rem;font-size:var(--t-sm);
  color:var(--ink-leise);background:var(--flaeche-aktiv);border:1px solid var(--linie);border-left:0;
  border-radius:0 var(--r2) var(--r2) 0;white-space:nowrap}
/* Suchfeld mit Lupe. */
.suchfeld{position:relative;display:block}
.suchfeld>.icon{position:absolute;left:.6875rem;top:50%;transform:translateY(-50%);color:var(--ink-still);pointer-events:none}
.suchfeld>input{padding-left:2.25rem}
/* Suchauswahl: Uniform „Lookup Select" (REACT-UMBAU.md, Abschnitt 5).
   Erst ab etwa fünfzehn Einträgen; darunter zeichnet der Baustein ein
   gewöhnliches select. Die offene Liste zeigt 6,5 Zeilen, damit man sieht,
   dass sie scrollt -- daher die krumme Höhe. */
.suchauswahl{position:relative}
.suchauswahl>input{padding-right:2.25rem;text-overflow:ellipsis}
/* Mittig zum Feld, egal wie hoch es ist: In der Erfassungszeile ist es
   niedriger als im Formular. */
.suchauswahl-zeichen{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);
  color:var(--ink-still);pointer-events:none;display:flex}
/* Fest am Bildschirm, nicht im Feld: Ein Scroll-Container kappt absolut
   positionierte Kinder (MITARBEIT.md, „Zwei Fallen"), und die Suchauswahl
   steht in dreien -- Filterleiste, Dialog und Erfassungszeile. Links, Breite
   und Höhe misst der Baustein am Feld nach; hier steht nur, wie sie aussieht.
   Die Zeilenhöhe steht deshalb an ihr selbst und nicht am Feld: Sie hängt
   nicht mehr darin und erbt von dort nichts mehr. */
.suchauswahl-liste{
  position:fixed;margin:0;padding:.25rem;
  list-style:none;background:var(--flaeche-hoch);border:1px solid var(--linie);
  border-radius:var(--r2);box-shadow:var(--schatten-3);z-index:var(--z-menue);
  --suchauswahl-zeile:2.375rem;
  max-height:calc(6.5 * var(--suchauswahl-zeile) + .5rem);overflow-y:auto;
}
.suchauswahl-liste>li{
  display:flex;flex-direction:column;justify-content:center;gap:.0625rem;
  min-height:var(--suchauswahl-zeile);padding:.375rem .625rem;border-radius:var(--r1);
  font-size:var(--t-sm);color:var(--ink);cursor:pointer;
}
/* Nur die Zeile unter dem Zeiger oder der Taste ist hervorgehoben; die
   gewählte trägt den Haken, damit Farbe nicht der einzige Träger ist. */
.suchauswahl-liste>li.aktiv{background:var(--flaeche-aktiv)}
.suchauswahl-liste>li[aria-selected="true"]{color:var(--petrol);font-weight:600}
.suchauswahl-liste>li[aria-selected="true"]>span::after{content:" ✓"}
.suchauswahl-liste>li>small{color:var(--ink-still);font-size:var(--t-sm)}
.suchauswahl-leer{color:var(--ink-still);cursor:default}
/* Kippschalter. */
.kipp{position:relative;display:inline-flex;align-items:center;gap:.625rem;cursor:pointer}
.kipp>input{position:absolute;opacity:0;width:1px;height:1px}
.kipp>.bahn{width:2.25rem;height:1.25rem;border-radius:.625rem;background:var(--flaeche-aktiv);
  border:1px solid var(--linie);position:relative;flex:none;transition:background var(--tempo)}
.kipp>.bahn::after{content:"";position:absolute;top:1px;left:1px;width:1rem;height:1rem;border-radius:50%;
  background:var(--ink-leise);transition:transform var(--tempo) var(--kurve),background var(--tempo)}
.kipp>input:checked+.bahn{background:var(--petrol);border-color:var(--petrol)}
.kipp>input:checked+.bahn::after{transform:translateX(1rem);background:var(--auf-petrol)}
.kipp>input:focus-visible+.bahn{outline:2px solid var(--petrol);outline-offset:2px}
/* Gesperrt. Stand bis zum 23.09.2026 in `betrieb.css` -- also in einer
   Seitendatei, und damit global, aber nur an einer Stelle gepflegt.
   Dieselbe Bauart wie `.karte.flach` am selben Tag. Der Waechter hat sie
   nicht gefunden, weil `kipp` nicht in seiner Bausteinliste stand; sie
   steht jetzt drin. */
.kipp.gesperrt{opacity:.6;cursor:not-allowed}
.kipp>input:disabled+.bahn{opacity:.45}
@media (max-width:640px){
  input:not([type=checkbox],[type=radio],[type=hidden],[type=range]),
  select,textarea{font-size:1rem}
}

/* ── Zugang ──────────────────────────────────────────────────────────────
   Anmelden, Beitreten, Passwort, Registrieren (NEUGESTALTUNG.md, Screen 13):
   schmale Karte, mittig, 420 px, Marke darüber. Seit dem 19.09.2026 hier,
   weil die Anmeldeseite in React sie braucht; bis dahin stand dieselbe
   Zeile in jeder der vier Vorlagen. Seit dem 20.09.2026 gibt es keine
   Kopie mehr: Alle vier Seiten sind React und nehmen den Baustein
   `Zugangsseite`. */
.zugang{max-width:420px;margin:clamp(1.5rem,7vh,4.5rem) auto 2rem}
.zugang-marke{display:flex;flex-direction:column;align-items:center;gap:.625rem;
  margin-bottom:1.5rem;text-align:center}
.zugang-marke .marke-zeichen{width:3rem;height:3rem}
.zugang-marke .wort{font-family:var(--schrift-marke);font-weight:700;font-size:1.5rem;line-height:1;color:var(--ink)}
.zugang-marke .wort span{color:var(--ink-leise);font-weight:600}
.zugang-marke .zeile{margin:0;font-size:var(--t-sm);color:var(--ink-leise)}
.zugang>.karte{padding:1.75rem}
.zugang h1{font-size:1.5rem;line-height:1.875rem;margin:0 0 .375rem}
.zugang .unterzeile{margin:0 0 1.25rem;font-size:var(--t-base)}
.zugang .hinweis{margin-bottom:1rem}
.zugang form .knopf.breit{margin-top:.5rem}
.zugang-fuss{margin:1.25rem 0 0;padding-top:1rem;border-top:1px solid var(--linie);
  font-size:var(--t-sm);color:var(--ink-leise)}
.zugang-fuss+.zugang-fuss{margin-top:.75rem;padding-top:0;border-top:0}
/* Passwort zeigen: ein stiller Knopf im Feld. */
.passwortfeld{position:relative}
.passwortfeld input{padding-right:5.5rem}
.zeigen{position:absolute;right:.25rem;top:50%;transform:translateY(-50%);min-height:1.875rem;
  padding:0 .625rem;border:0;border-radius:var(--r1);background:transparent;cursor:pointer;
  font:inherit;font-size:var(--t-sm);font-weight:600;color:var(--ink-leise)}
.zeigen:hover{color:var(--ink);background:var(--flaeche-aktiv)}
/* Der erklärende Satz unter einem Feld. Stand bis zum 20.09.2026 im
   Stilblock von registrieren.html und ist mit der Vorlage hierher gezogen. */
.feld .beiwort{font-size:var(--t-sm);color:var(--ink-still);margin:.3125rem 0 0}
@media (max-width:640px){
  .zugang{margin-top:1rem}
  .zugang>.karte{padding:1.25rem}
  .zugang-marke{margin-bottom:1rem}
}

/* ── Umgebung und Ebenen ──────────────────────────────────────────────────
   Uniform „Environment“ und „Level“ (REACT-UMBAU.md, Abschnitt 5). Eine
   Umgebung setzt einen Bereich in ein festes Schema; die Farben dazu setzt
   tokens.css an jedem Element mit data-thema. Ebenen 0 bis 3 sind
   App-Hintergrund, Panel, Karte, Erhöht. Keine Ebene wirft einen Schatten. */
.umgebung{background:var(--flaeche-grund);color:var(--ink)}
.ebene{color:var(--ink)}
.ebene-0{background:var(--flaeche-grund)}
.ebene-1{background:var(--flaeche-panel)}
.ebene-2{background:var(--flaeche-karte)}
.ebene-3{background:var(--flaeche-hoch)}
.ebene.akzent{background:var(--petrol-hell)}

/* ── Flächen ─────────────────────────────────────────────────────────────
   Karte: flache Fläche, Radius 12, dünner Rand. Kein Verlauf, kein Glas. */
.karte,.kachel{
  position:relative;border-radius:var(--r3);padding:1.25rem;
  background:var(--flaeche-karte);border:1px solid var(--karte-rand);
  box-shadow:var(--schatten-1);
}
.karte+.karte{margin-top:var(--panel-abstand)}
/* In Rastern und Listen mit eigenem Abstand zählt nur der Abstand des Rasters. */
.raster>.karte,.raster.eng>.karte,.kartenraster>.karte,.aufnahmenliste>.karte,.kennzahlen>.karte{margin-top:0}
.karte>h2:first-child,.karte>h3:first-child,.karte>h4:first-child{margin-top:0}
.karte.akzent{border-color:var(--petrol);box-shadow:inset 3px 0 0 var(--petrol)}
/* Die flache Karte: Kopf, Abschnitte mit Trennlinien, Fuss -- die Karte
   traegt die Flaeche, die Teile darin ihre eigenen Abstaende. Bis zum
   23.09.2026 stand sie in `betrieb.css`, also in einer SEITENdatei. Alle
   Seiten-CSS landen in EINEM gebauten `app.css`; ein Waehler dort gilt
   ueberall. `.karte.flach` fasst aber einen Baustein an und ist damit
   keine Seitensache, sondern eine Variante -- dieselbe Bauart wie
   `.buehne` und `.segmente` am Tag davor. Eine Variante steht beim
   Baustein, sonst schlaegt sie ihn irgendwann von aussen. */
.karte.flach{padding:0;overflow:hidden}
.karte.flach>.kartenkopf{padding:var(--a4) var(--a5) var(--a3)}
.karte.flach>.fuss{padding:var(--a4) var(--a5);border-top:1px solid var(--linie);
  font-size:var(--t-sm);color:var(--ink-leise);margin:0}
/* Figmas Karte hat einen Hover-Zustand (Baustein `Card`, Knoten 8:29):
   Sie hebt sich an. Nur wo die Karte auch anklickbar IST -- eine Karte,
   die sich hebt und dann nichts tut, verspricht etwas. */
a.karte:hover,button.karte:hover,.karte.klickbar:hover{
  box-shadow:var(--schatten-2);border-color:var(--linie-stark);text-decoration:none}
.panel{background:var(--flaeche-panel);border-radius:var(--r4);border:1px solid var(--karte-rand)}
.kartenkopf{display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;padding-bottom:.75rem;margin-bottom:1rem;
  border-bottom:1px solid var(--linie);flex-wrap:wrap}
.kartenkopf h2,.kartenkopf h3,.kartenkopf h4{margin:0}
.kartenkopf h2{font-size:1.25rem;line-height:1.5rem}
.spaltenkopf{
  position:sticky;top:0;z-index:3;background:var(--flaeche-panel);
  padding:.5rem .875rem;border-bottom:1px solid var(--linie);
  font-family:var(--schrift);font-size:.75rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-leise);
  display:flex;justify-content:space-between;align-items:center;gap:.5rem;
}
.raster{display:grid;gap:var(--panel-abstand);
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.raster.eng{grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr))}
/* Karten-Raster: 20 px waagerecht, 44 px zwischen Reihen. */
.kartenraster{display:grid;gap:var(--a7) var(--a5);
  grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}

/* Kennzahlkachel: große Zahl in Condensed, Label darunter. */
.kennzahlen{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  gap:var(--panel-abstand);margin-bottom:var(--panel-abstand);
}
/* dd als display:contents, damit Zahl, Label und Untertext in dieser
   Reihenfolge stehen, obwohl das Markup dt vor dd schreibt. */
.kennzahlen>div{display:flex;flex-direction:column;justify-content:flex-start;
  background:var(--flaeche-karte);border:1px solid var(--karte-rand);
  border-radius:var(--r3);padding:1rem 1.125rem;box-shadow:var(--schatten-1);
}
.kennzahlen dt,.kennzahlen .name{order:1;
  font-family:var(--schrift);font-size:var(--t-sm);font-weight:500;
  color:var(--ink-leise);margin:.375rem 0 0}
.kennzahlen dd,.kennzahlen .wert{
  margin:0;font-family:var(--schrift-marke);font-weight:700;font-variant-ligatures:none;
  font-size:2.25rem;line-height:1;font-variant-numeric:tabular-nums}
.kennzahlen dd{display:contents}
.kennzahlen dd small{order:2;display:block;font-family:var(--schrift);font-weight:400;
  font-size:var(--t-sm);color:var(--ink-still);margin-top:.375rem;line-height:1.35}

/* ── Rückmeldung ─────────────────────────────────────────────────────────
   Notiz: ruhig, im Fluss. Hinweis: seitenweit, mit Icon, vier Töne.
   Melder: kurz, unten rechts, verblasst nach drei Sekunden. */
.notiz{font-size:var(--t-sm);color:var(--ink-leise);margin:0 0 .75rem}
.hinweis{
  --ton:var(--ink-leise);position:relative;
  background:var(--flaeche-karte);border:1px solid var(--linie);
  border-left:3px solid var(--ton);
  border-radius:var(--r2);padding:.875rem 1.125rem .875rem 2.875rem;margin-bottom:var(--panel-abstand);max-width:82ch}
.hinweis::before{content:"";position:absolute;left:1rem;top:.9375rem;width:1.125rem;height:1.125rem;
  background:var(--ton);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.2'/%3E%3C/svg%3E") center/contain no-repeat}
.hinweis>:last-child{margin-bottom:0}
.hinweis h2,.hinweis h3,.hinweis h4{margin:0 0 .25rem;font-family:var(--schrift);font-size:var(--t-base);
  line-height:1.4;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink)}
.hinweis p{font-size:var(--t-sm);color:var(--ink-leise)}
.hinweis.warnung{--ton:var(--gold);background:var(--gold-hell)}
.hinweis.warnung::before{
  -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.2'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.2v.2'/%3E%3C/svg%3E")}
.hinweis.gut{--ton:var(--gut);background:var(--gut-hell)}
.hinweis.gut::before{
  -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.8 2.7L16 9.5'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.8 2.7L16 9.5'/%3E%3C/svg%3E")}
.hinweis.fehler{--ton:var(--fehler);background:var(--fehler-hell)}
.hinweis.fehler::before{
  -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E")}

/* Fortschrittsbalken: Blau auf grauer Spur. */
.balken{display:block;height:6px;background:var(--flaeche-tief);border-radius:3px;overflow:hidden}
.balken i{display:block;height:100%;background:var(--petrol);border-radius:3px;
  transition:width .3s var(--kurve)}
.balken.gut i{background:var(--gut)}
.balken.fehler i{background:var(--fehler)}
/* Speicher und Stunden: eng wird gelb, voll wird rot. Standen bis zum
   23.09.2026 in `verein.css`, also in einer Seitendatei. Ein Ton eines
   Bausteins ist keine Seitensache -- die Vereinsseite ist nur die erste,
   die ihn braucht. */
.balken.eng i{background:var(--warnung)}
.balken.voll i{background:var(--fehler)}
.balken.leer{opacity:.55}
/* Unbestimmt: wandernder Abschnitt, solange die Erkennung läuft. */
.balken.unbestimmt i{width:35%!important;animation:wandern 1.6s ease-in-out infinite}
@keyframes wandern{0%{transform:translateX(-100%)}100%{transform:translateX(290%)}}
/* Lader. */
.lader{display:inline-block;width:1rem;height:1rem;border-radius:50%;
  border:2px solid var(--linie);border-top-color:var(--petrol);animation:drehen .8s linear infinite}
@keyframes drehen{to{transform:rotate(360deg)}}
/* Gerüstinhalt (Skelett): zeigt, wie es hier später aussieht. */
.skelett{background:var(--flaeche-hoch);border-radius:var(--r1);min-height:.875rem;
  animation:puls 1.6s ease-in-out infinite}

/* Klappabschnitt: eigener Kopf mit Pfeil, über <details>. */
.klappabschnitt{border-top:1px solid var(--linie)}
.klappabschnitt+.klappabschnitt{border-top:0}
.klappabschnitt>summary{
  display:flex;width:100%;align-items:center;gap:.625rem;
  padding:.5625rem .875rem;cursor:pointer;list-style:none;
  font-family:var(--schrift);font-size:.75rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-leise);
  border-bottom:1px solid var(--linie);background:var(--flaeche-panel);
}
.klappabschnitt>summary::-webkit-details-marker{display:none}
.klappabschnitt>summary::before{content:"";width:9px;height:6px;flex:none;
  background:var(--ink-still);clip-path:polygon(0 0,100% 0,50% 100%);
  transition:transform var(--tempo) var(--kurve);transform:rotate(-90deg)}
.klappabschnitt[open]>summary::before{transform:rotate(0deg)}
.klappabschnitt>summary .meta{margin-left:auto;font-family:var(--schrift);
  letter-spacing:0;text-transform:none;font-size:var(--t-sm);font-weight:400}
.klappabschnitt-inhalt{padding:.75rem .875rem}

/* ── Kleinteile ────────────────────────────────────────────────────────── */
.leiste{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.leiste.rechts{margin-left:auto;margin-bottom:0}
code{background:var(--flaeche-hoch);padding:.0625rem .3125rem;border-radius:var(--r1);
  font-family:var(--mono);font-size:.8125em}
/* Leerer Zustand: mittig in der Hauptfläche, eine Überschrift, ein Satz,
   ein Knopf. Keine eigene Ebene. */
.leer{padding:3.5rem 1.5rem;text-align:center;color:var(--ink-leise)}
.leer>.icon,.leer .leer-icon{margin:0 auto 1rem;color:var(--ink-still)}
.leer h2{margin:0 0 .5rem;font-size:1.5rem;color:var(--ink)}
.leer p{max-width:52ch;margin-left:auto;margin-right:auto;font-size:var(--t-base)}
.leer.beikasten{text-align:left;padding:1rem 0}
.leer.beikasten p{margin-left:0}

/* Melder: unten rechts. Nur für den Erfolg einer Aktion, nie für einen
   Fehler, der eine Entscheidung verlangt.
   Nach Uniform (Cyell, 19.09.2026, Gesamtkonzept 9.35): erscheint voll,
   geht sofort auf 90 %, hält vier Sekunden und verblasst in drei. Wer mit
   der Maus darüber fährt oder mit der Tastatur darin steht, hält ihn an;
   sonst wäre „Rückgängig“ weg, bevor man es trifft. Die Animation ist die
   einzige Uhr: Vorlagen und App blenden ihn bei `animationend` aus. */
.melde{position:fixed;right:var(--rand-aussen);bottom:1.375rem;
  display:flex;align-items:center;gap:.5rem;
  background:var(--flaeche-hoch);color:var(--ink);border:1px solid var(--linie);
  border-left:3px solid var(--gut);
  border-radius:var(--r2);padding:.625rem 1rem;font-size:var(--t-base);font-weight:500;
  box-shadow:var(--schatten-3);z-index:var(--z-hinweis);
  animation:melde-aus 7s linear forwards}
.melde:hover,.melde:focus-within{animation-play-state:paused}
.melde.schlecht{border-left-color:var(--fehler);animation:none}
.melde[hidden]{display:none}
@keyframes melde-aus{0%{opacity:1}4%,57%{opacity:.9}100%{opacity:0}}
/* Ohne Bewegung: kein Verblassen, aber dieselbe Zeit und dasselbe Anhalten.
   Eine Animation bleibt es, damit `animationend` auch hier kommt. */
@keyframes melde-still{0%{opacity:1}100%{opacity:0}}
@media (max-width:640px){.melde{left:1rem;right:1rem;bottom:calc(4.25rem + env(safe-area-inset-bottom,0px))}}

/* Tooltip über title reicht meist; für erklärende Blasen: */
.tipp{position:relative}
.tipp[data-tipp]:hover::after,.tipp[data-tipp]:focus-visible::after{
  content:attr(data-tipp);position:absolute;left:50%;bottom:calc(100% + .5rem);transform:translateX(-50%);
  width:max-content;max-width:18rem;white-space:normal;
  background:var(--flaeche-aktiv);color:var(--ink);font-size:var(--t-sm);font-weight:400;
  text-transform:none;letter-spacing:0;line-height:1.35;
  padding:.4375rem .625rem;border-radius:var(--r2);box-shadow:var(--schatten-3);z-index:var(--z-menue)}

/* ── Schmale Bildschirme ─────────────────────────────────────────────────
   Keine Seite läuft seitwärts. Tablet 834: 18 px Rand. Handy: 16 px. */
@media (max-width:1100px){
  :root{--rand-aussen:18px}
}
@media (max-width:900px){
  h1{font-size:1.75rem;line-height:2.125rem}
  /* HIER STAND `.marke-zusatz{display:none}`, und das war bis zum
     23.09.2026 richtig: Die Marke hiess „Routetree Analysis", und wer den
     Zusatz wegliess, hatte immer noch „Routetree" -- also die Marke.
     Seit der Umbenennung bleibt dabei „Coaches" stehen, und das ist
     keine Marke, sondern ein halbes Wort. Der Name wird deshalb nicht
     mehr beschnitten, nur kleiner. */
  .marke-wort,.marke-zusatz{font-size:1.125rem}
  .kennzahlen{grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}
  .bereiche a,.bereiche .tot{min-width:4.5rem;font-size:.8125rem;padding:.5rem .5rem .625rem}
}
@media (max-width:640px){
  :root{--rand-aussen:16px;--panel-abstand:16px}
  main{padding-top:1.25rem}
  .kopfleiste{gap:.5rem}
  /* Noch enger: Das Zeichen schrumpft mit, sonst nimmt es auf 390 Punkten
     mehr Platz als der Name daneben. */
  .marke{gap:.4375rem}
  .marke-zeichen{width:1.75rem;height:1.75rem}
  .marke-wort,.marke-zusatz{font-size:1rem}
  .kopf-rechts{gap:.25rem}
  .kopf-rechts .rollenwechsel,.kopf-rechts .thema-knopf{display:none}
  .karte{padding:1rem}
  .seitenkopf{align-items:flex-start;flex-direction:column;gap:.75rem}
  .kennzahlen dd,.kennzahlen .wert{font-size:1.75rem}
  .segmente{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .segmente>a,.segmente>button{min-height:2.5rem;padding:0 .875rem}
  /* Am Telefon tragen Abzeichen und Initialen dieselbe Auskunft wie der
     ausgeschriebene Name; der volle Text steht eine Berührung entfernt. */
  .mehr>summary>span:not(.avatar):not(.mannschaft-abzeichen){display:none}
  .mehr>summary{padding-left:.375rem;padding-right:.375rem}
}
.nur-telefon{display:none}
@media (max-width:640px){.nur-telefon{display:block}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (prefers-reduced-motion:reduce){.melde:not(.schlecht){animation:melde-still 7s step-end forwards!important}}
/* Ein unbestimmter Balken OHNE Bewegung steht sonst bei 35 Prozent --
   und sieht damit aus wie ein bestimmter, der 35 Prozent meldet. Genau
   das darf er nicht: Er weiss den Anteil ja nicht. Er wird deshalb voll
   und blass. Stand bis zum 23.09.2026 in `betrieb.css` und galt damit
   nur, weil ein Seiten-CSS zufaellig global ist. */
@media (prefers-reduced-motion:reduce){
  .balken.unbestimmt i{width:100%!important;opacity:.45}}
@media print{
  .kopfleiste,.reiterleiste,.unten-leiste,.leiste{display:none!important}
  body{background:#fff;color:#000;padding:0!important}
  main{max-width:none;padding:0}
}
/* ── Blende und Dialog ───────────────────────────────────────────────────
   Gestaltete Blende mit 20 px Radius und Abdunklung, nie ein roher Kasten. */
.blende{position:fixed;inset:0;background:var(--blende);z-index:var(--z-hinweis);
  display:grid;place-items:center;padding:20px}
.blende .karte{background:var(--flaeche-karte);border:1px solid var(--karte-rand);
  border-radius:var(--r5);box-shadow:var(--schatten-3);
  padding:1.5rem;max-width:520px;width:100%;max-height:84vh;overflow-y:auto}
.blende h2{margin:0 0 .25rem;font-size:1.5rem}
.blende .warum{font-size:var(--t-base);color:var(--ink-leise);margin:0 0 1rem}
.blende .zeile{display:flex;gap:.625rem;align-items:center;justify-content:flex-end;margin-top:1.25rem;flex-wrap:wrap}

/* Fusszeile: leise, aber immer da. Sie traegt die Pflichtangaben und
   darf deshalb weder wegscrollen noch im Dunkelmodus verschwinden. */
.seitenfuss{
  display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;align-items:center;
  max-width:var(--inhalt-breite,1240px);margin:var(--a6) auto 0;
  padding:1.25rem var(--a4);border-top:1px solid var(--linie);
  font-size:var(--t-sm);color:var(--ink-leise);
}
.seitenfuss a{color:var(--ink-still);text-decoration:none}
.seitenfuss a:hover,.seitenfuss a:focus-visible{color:var(--ink);text-decoration:underline}
@media print{.seitenfuss{display:none}}

/* ── Aus den Seitendateien geholt (23.09.2026) ───────────────────────────
   Sieben Namen standen in JE ZWEI Seitendateien. Alle Seiten-CSS landen
   in einem gebauten `app.css`; welche Fassung galt, entschied damit die
   Reihenfolge im Buendel und nicht eine Entscheidung. Gefunden hat sie
   `KeinKlassennameStehtInZweiSeitenCss`.
   Jede wird hier EINMAL beschrieben -- sie sind Bausteine, sie standen
   nur nicht hier. */

/* Zurueck-Verweis ueber einer Unterseite. Stand wortgleich in
   `reports.css` UND `sammlung.css`; in einem gemeinsam gebauten
   `app.css` ist das eine Definition zu viel. */
.zurueck {
  display: inline-block; margin-bottom: .5rem; font-size: var(--t-sm);
  color: var(--ink-leise);
}

/* „Grundlage: 9 Aufnahmen, 412 gepruefte Spielzuege." Der Kasten, der
   sagt, worauf eine Zahl beruht -- Auswertung, Reports und Lernstand
   zeigen ihn. Stand wortgleich in zwei Seitendateien. */
.grundlage {
  font-size: var(--t-sm); color: var(--ink-leise);
  padding: .625rem .875rem; background: var(--flaeche-panel);
  border: 1px solid var(--linie); border-radius: var(--r2);
  margin-bottom: var(--panel-abstand);
}

/* Eine Karte, die eine Liste traegt: kein Innenabstand, die Liste
   schneidet an der Kante ab. Stand wortgleich in `kabine.css` UND
   `sammlung.css`. */
.liste-karte{padding:0;overflow:hidden}

/* Die Zeile ueber einer Liste, in der gesiebt wird. Stand in
   `aufnahmen.css` UND `auswertung.css`, mit verschiedenen Abstaenden --
   welche galt, entschied die Reihenfolge im Buendel. Jetzt eine. */
.filterzeile {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: var(--panel-abstand);
}

/* Ein gesetztes Sieb, als Chip. **Hier standen zwei verschiedene
   Fassungen**: `aufnahmen.css` mit Petrolgrund und gerader Kante,
   `auswertung.css` mit 999-Pixel-Pille -- und die Pille hat
   `NEUGESTALTUNG.md` abgeschafft. Welche galt, entschied die
   Reihenfolge im gebauten `app.css`.
   Die gerade Kante gewinnt, weil sie die entschiedene ist. */
.filterchip{display:inline-flex;align-items:center;gap:.375rem;min-height:1.75rem;
  padding:0 .25rem 0 .625rem;border-radius:var(--r1);
  background:var(--petrol-hell);border:1px solid var(--petrol-rand);
  color:var(--ink);font-size:var(--t-sm);font-weight:500;text-decoration:none}
.filterchip.fest{color:var(--ink-still)}
.filterchip button{display:inline-flex;border:0;background:none;
  color:var(--ink-leise);cursor:pointer;padding:.125rem;border-radius:var(--r1)}
.filterchip button:hover{color:var(--ink);background:var(--flaeche-aktiv)}

/* Eine Karte, die Zahlen traegt: Kopf, Inhalt, Fuss mit Trennlinie.
   Auswertung und Studio benutzen sie beide. */
.datenkarte{padding:0;overflow:hidden}
.datenkarte .kartenkopf{padding:1rem 1.125rem .75rem}
.datenkarte .kartenkopf h3{margin:0}
.datenkarte .inhalt{padding:0 1.125rem 1rem}
.datenkarte .fuss{padding:.75rem 1.125rem;border-top:1px solid var(--linie);
  font-size:var(--t-sm);color:var(--ink-leise);margin:0}

/* Ein Balken aus Abschnitten, je ein Anteil. Auswertung und
   Zuweisungen benutzen ihn beide. */
.segmentbalken {
  display: flex; height: .625rem; border-radius: 999px; overflow: hidden;
  background: var(--flaeche-hoch);
}

/* Die Teile einer Listenkarte. Standen in `kabine.css` UND
   `sammlung.css`, mit verschiedenen Abstaenden. */
.liste-karte .kartenkopf{padding:1rem 1.25rem .75rem;margin:0}
.liste-karte .kartenkopf h3{margin:0}
.liste-karte .notiz{padding:.5rem 1.25rem;margin:0;border-bottom:1px solid var(--linie)}
.liste-karte .leerer-zustand{padding:2rem 1.25rem}

/* Das Anlegeformular ueber einer Liste -- Journal und
   Druckboegen benutzen es beide, und beide beschrieben es.
   Die Druckbogen-Zeilen kamen spaeter und galten damit auch
   im Journal. */
.anlegen{margin-bottom:var(--panel-abstand)}
.anlegen .feldreihe{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap}
.anlegen .feldreihe>.feld{flex:0 1 12rem;margin-bottom:0}
.anlegen .feldreihe>.feld.breit{flex:1 1 18rem}
.anlegen .knopf{flex:0 0 auto}
.anlegen .kartenkopf{margin-bottom:.875rem}

/* Ein Abschnitt mit Ueberschrift und Zahl -- und, wo er ein `<details>`
   ist, mit aufklappendem Pfeil. Drei Seiten benutzen ihn (Freigaben,
   Playlist, Meine Szenen); `trainer.css` und `aufnahmen.css`
   beschrieben ihn beide, jede nur zur Haelfte. */
.abschnitt{margin-bottom:var(--panel-abstand)}
.abschnitt h2{font-size:var(--t-md);margin:0 0 .625rem}
.abschnitt h2 .zahl{color:var(--ink-still);font-family:var(--mono)}
.abschnitt>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;
  margin-bottom:.75rem;font-family:var(--schrift-marke);font-weight:700;font-size:1.25rem}
.abschnitt>summary::-webkit-details-marker{display:none}
.abschnitt>summary .icon{transition:transform var(--tempo) var(--kurve)}
.abschnitt[open]>summary .icon{transform:rotate(90deg)}