/*
  Oberfläche der Taktiktafel.

  Gebaut nach den Gestaltungsprinzipien von Apple: Klarheit, Zurückhaltung,
  Tiefe. Konkret heißt das hier - der Platz ist der Inhalt und bekommt fast die
  ganze Fläche. Alles Bedienbare liegt in zwei schmalen, halb durchscheinenden
  Leisten darüber und darunter. Es gibt genau eine Akzentfarbe (das Blau der
  eigenen Mannschaft), eine Gegenfarbe (das Rot des Gegners) und sonst
  Grautöne. Keine Rahmen, wo ein Abstand reicht.

  Keine Webschriften. Die Tafel läuft in der Kabine, womöglich ohne Netz, und
  eine Schrift von einem fremden Server wäre ein Abruf, den niemand bestellt
  hat. Die Systemschrift ist auf jedem Gerät die richtige.
*/

:root {
  --grund: #f2f2f7;
  --flaeche: #ffffff;
  --leiste: rgba(249, 249, 251, 0.82);
  --tinte: #1d1d1f;
  --gedaempft: #6e6e73;
  --still: #8e8e93;
  --linie: rgba(0, 0, 0, 0.10);
  --feld: #ffffff;
  --knopf: rgba(120, 120, 128, 0.12);
  --knopf-aktiv: rgba(120, 120, 128, 0.20);
  --akzent: #0a84ff;
  --gegner: #ff3b30;
  --pass: #f0a500;
  --gut: #34c759;
  --warnung: #c77700;
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 28px rgba(0, 0, 0, 0.08);
  --rundung: 14px;
  --tafel: #ffffff;
  --tafel-band: #f4f4f7;
  --kreide: rgba(0, 0, 0, 0.32);
  --tafel-schrift: rgba(0, 0, 0, 0.42);
  --tafel-blass: rgba(0, 0, 0, 0.24);
  --tafel-hilfslinie: rgba(0, 0, 0, 0.15);
  --neutral-weg: rgba(0, 0, 0, 0.45);
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
             system-ui, Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  /* Die eingebettete Ansicht stempelt data-theme, die eigene Seite data-thema -
     beide muessen eine ausdrueckliche helle Wahl gewinnen lassen. */
  :root:not([data-theme="light"]):not([data-thema="hell"]) {
    --grund: #0b0b0c;
    --flaeche: #1c1c1e;
    --leiste: rgba(28, 28, 30, 0.80);
    --tinte: #f5f5f7;
    --gedaempft: #98989d;
    --still: #8e8e93;
    --linie: rgba(255, 255, 255, 0.12);
    --feld: #2c2c2e;
    --knopf: rgba(120, 120, 128, 0.24);
    --knopf-aktiv: rgba(120, 120, 128, 0.36);
    --gegner: #ff453a;
    --pass: #ffd60a;
    --gut: #30d158;
    --warnung: #ffb340;
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.5);
    --tafel: #17171a;
    --tafel-band: #1e1e22;
    --kreide: rgba(255, 255, 255, 0.36);
    --tafel-schrift: rgba(255, 255, 255, 0.46);
    --tafel-blass: rgba(255, 255, 255, 0.26);
    --tafel-hilfslinie: rgba(255, 255, 255, 0.14);
    --neutral-weg: rgba(255, 255, 255, 0.55);
  }
}

:root[data-theme="dark"],
:root[data-thema="dunkel"] {
  --grund: #0b0b0c;
  --flaeche: #1c1c1e;
  --leiste: rgba(28, 28, 30, 0.80);
  --tinte: #f5f5f7;
  --gedaempft: #98989d;
  --linie: rgba(255, 255, 255, 0.12);
  --feld: #2c2c2e;
  --knopf: rgba(120, 120, 128, 0.24);
  --knopf-aktiv: rgba(120, 120, 128, 0.36);
  --gegner: #ff453a;
  --pass: #ffd60a;
  --gut: #30d158;
  --warnung: #ffb340;
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.5);
  --tafel: #17171a;
  --tafel-band: #1e1e22;
  --kreide: rgba(255, 255, 255, 0.36);
  --tafel-schrift: rgba(255, 255, 255, 0.46);
  --tafel-blass: rgba(255, 255, 255, 0.26);
  --tafel-hilfslinie: rgba(255, 255, 255, 0.14);
  --neutral-weg: rgba(255, 255, 255, 0.55);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinte);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

/* Der Platz ist hoehenbegrenzt: sein Seitenverhaeltnis ist flacher als das
   eines Fensters, also bleibt auf breiten Schirmen waagerecht Platz uebrig -
   gemessen rund 500 px bei 1440 Breite. Genau dort steht der Ablauf. Er kostet
   die Tafel damit nichts und liegt dort, wo beim Tippen hingeschaut wird. */
.tafel-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "kopf    kopf"
    "buehne  ablauf"
    "eingabe eingabe";
  height: 100dvh;
}

.kopfleiste { grid-area: kopf; }
.buehne { grid-area: buehne; }
.ablaufspalte { grid-area: ablauf; }
.eingabeleiste { grid-area: eingabe; }

/* ------------------------------ Ablaufspalte ----------------------------- */

.ablaufspalte {
  width: clamp(250px, 23vw, 330px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--linie);
  background: var(--leiste);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.spaltenkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 8px;
}

.spaltenkopf h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 590;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gedaempft);
}

.spalteninhalt {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 14px 14px;
  font-size: 13.5px;
}

.knopf.klein { padding: 4px 10px; font-size: 12.5px; }
.nurschmal { display: none; }

/* Rasterkinder haben von sich aus min-width: auto und werden nie schmaler als
   ihr Inhalt. Ohne diese Zeile schiebt das Eingabefeld die ganze Seite
   breiter als den Bildschirm, und auf dem Telefon rutscht alles seitlich. */
.tafel-app > * { min-width: 0; }

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

.kopfleiste {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
  background: var(--leiste);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linie);
  position: relative;
  z-index: 5;
}

.wortmarke {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-right: auto;
  min-width: 0;
}

/* TAKTX ist kurz und in Versalien - ohne Sperrung wirkt es gedrungen. */
.wortmarke strong {
  font-size: 15px;
  font-weight: 640;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

.wortmarke span {
  font-size: 12.5px;
  color: var(--gedaempft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.werkzeuge {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  /* Ohne min-width behält ein Flexkind seine volle Inhaltsbreite und schiebt
     die ganze Seite breiter, als der Bildschirm ist. */
  min-width: 0;
}

.werkzeuge .knopf { flex: none; }
.werkzeuge .knopf[hidden] { display: none; }

/* Der Umschalter sagt, WAS man gerade tut: eine Lage bauen oder einen Spielzug
   beschreiben. Zwei Zustaende, einer davon immer an - deshalb ein
   zusammenhaengendes Feld und keine zwei einzelnen Knoepfe. */
.modus {
  flex: none;
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border-radius: 9px;
  background: var(--knopf);
}

.modus button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--gedaempft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}

.modus button[aria-pressed="true"] {
  background: var(--flaeche);
  color: var(--tinte);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Zustandsschalter links, Handlungen rechts. Der Strich dazwischen sagt, dass
   das zwei verschiedene Dinge sind - sieben gleich laute Knoepfe sagen nichts. */
.trenner {
  flex: none;
  width: 1px;
  align-self: stretch;
  margin: 3px 4px;
  background: var(--linie);
}

.werkzeuge::-webkit-scrollbar { display: none; }

button { font-family: inherit; }

.knopf {
  appearance: none;
  border: 0;
  background: var(--knopf);
  color: var(--tinte);
  padding: 7px 13px;
  border-radius: 980px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.1s ease, color 0.15s ease;
}

/* Zurueckhaltung: die Werkzeuge tragen von sich aus keine Flaeche. Erst
   Zeigen oder ein eingeschalteter Zustand macht sie sichtbar - so hat die
   Leiste eine Rangfolge statt sechs gleich lauter Knoepfe. */
.werkzeuge .knopf { background: transparent; color: var(--gedaempft); }
.werkzeuge .knopf:hover { background: var(--knopf); color: var(--tinte); }
.werkzeuge .knopf[aria-pressed="true"] { background: var(--akzent); color: #fff; }
.knopf:hover { background: var(--knopf-aktiv); }
.knopf:active { transform: scale(0.96); }
.knopf[aria-pressed="true"] { background: var(--akzent); color: #fff; }
.knopf.gefahr:hover { background: rgba(255, 59, 48, 0.16); color: var(--gegner); }

/* --------------------------------- Platz --------------------------------- */

.buehne {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  min-height: 0;
}

#platz {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.18));
}

#platz text { user-select: none; }

/* --------------------------------- Meldung ------------------------------- */

.meldung {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translate(-50%, 8px);
  max-width: min(92%, 560px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 980px;
  background: var(--flaeche);
  box-shadow: var(--schatten);
  font-size: 13.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}

.meldung.sichtbar { opacity: 1; transform: translate(-50%, 0); }
.meldung b { font-weight: 600; }
.meldung .punkt {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--gut);
}
.meldung.unklar .punkt { background: var(--warnung); }

/* ------------------------------- Eingabe --------------------------------- */

.eingabeleiste {
  background: var(--leiste);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--linie);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  z-index: 5;
}

.vorschlaege {
  display: flex;
  gap: 6px;
  max-width: 760px;
  margin: 0 auto 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.vorschlaege::-webkit-scrollbar { display: none; }

/* Ohne diese Zeile gewinnt das display:flex oben gegen das hidden-Attribut
   des Browsers - die Beispiele blieben sichtbar, obwohl sie ausgeblendet
   waren. */
.vorschlaege[hidden] { display: none; }

/* Abgeschnittener Text sieht aus wie ein Fehler. Ein Verlauf am Rand sagt:
   hier geht es weiter. */
.vorschlaege {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

.vorschlaege button {
  appearance: none;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--gedaempft);
  border-radius: 980px;
  padding: 5px 12px;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
}

.vorschlaege button:hover { color: var(--tinte); }

.feldzeile {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--feld);
  border: 1px solid var(--linie);
  border-radius: 22px;
  padding: 5px 5px 5px 15px;
  box-shadow: var(--schatten);
}

.feldzeile:focus-within { border-color: rgba(10, 132, 255, 0.5); }

#eingabe {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  color: inherit;
  outline: 0;
  padding: 8px 0;
  max-height: 120px;
}

#eingabe::placeholder { color: var(--still); }

#senden {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: var(--akzent);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.15s ease;
}

#senden:active { transform: scale(0.92); }
#senden:disabled { opacity: 0.35; cursor: default; }

/* -------------------------------- Ablage --------------------------------- */

.schleier {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 15;
}

.schleier.offen { opacity: 1; pointer-events: auto; }

.ablage {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border-left: 1px solid var(--linie);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
  transform: translateX(102%);
  transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 20;
}

.ablage.offen { transform: none; }

.ablage-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  padding-top: max(12px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--linie);
}

.reiter {
  display: flex;
  gap: 2px;
  background: var(--knopf);
  border-radius: 9px;
  padding: 2px;
  margin-right: auto;
}

.reiter button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--tinte);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
}

.reiter button[aria-selected="true"] {
  background: var(--flaeche);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.ablage-inhalt {
  overflow-y: auto;
  padding: 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  flex: 1;
}

.ablage-fuss {
  border-top: 1px solid var(--linie);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
}

.ablage-fuss .knopf { flex: 1; text-align: center; }
.knopf.stark { background: var(--akzent); color: #fff; }
.knopf.stark:hover { background: #0071e3; }

.leerhinweis {
  color: var(--gedaempft);
  font-size: 13.5px;
  text-align: center;
  padding: 28px 12px;
}

.szene {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--grund);
  margin-bottom: 8px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}

.szene:hover { border-color: rgba(10, 132, 255, 0.45); }
.szene .titel { font-weight: 550; font-size: 14px; }
.szene .neben { font-size: 12px; color: var(--gedaempft); }
.szene .mitte { flex: 1; min-width: 0; }
.szene .weg {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--still); font-size: 16px; padding: 4px 6px; border-radius: 8px;
}
.szene .weg:hover { color: var(--gegner); background: rgba(255, 59, 48, 0.12); }

.verlaufzeile {
  display: flex;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 13.5px;
}

.verlaufzeile .nr {
  flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--knopf); color: var(--gedaempft);
  font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
}

.verlaufzeile.unklar .nr { background: rgba(255, 149, 0, 0.18); color: var(--warnung); }
.verlaufzeile .satz { flex: 1; }
.verlaufzeile .deutung { color: var(--gedaempft); font-size: 12px; }

.hilfe h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gedaempft);
  font-weight: 600;
  margin: 22px 0 8px;
}

.hilfe h3:first-child { margin-top: 0; }
.hilfe p { margin: 0 0 10px; color: var(--gedaempft); font-size: 13.5px; }
.hilfe code {
  display: block;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 8px 11px;
  margin-bottom: 6px;
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.hilfe code:hover { border-color: rgba(10, 132, 255, 0.45); }
.hilfe ul { margin: 0 0 10px; padding-left: 18px; color: var(--gedaempft); font-size: 13.5px; }

/* ------------------------------- Namensblatt ----------------------------- */

.blatt {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 30;
  padding: 20px;
  background: rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.blatt.offen { display: grid; }

.blatt-innen {
  width: min(360px, 100%);
  background: var(--flaeche);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  padding: 20px;
  text-align: center;
}

.blatt-innen h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.blatt-innen p { margin: 0 0 14px; font-size: 13.5px; color: var(--gedaempft); }

.blatt-innen input {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid var(--linie);
  background: var(--grund);
  color: inherit;
  outline: 0;
  margin-bottom: 14px;
}

.blatt-innen input:focus { border-color: var(--akzent); }
.blatt-knoepfe { display: flex; gap: 8px; }
.blatt-knoepfe .knopf { flex: 1; padding: 10px; font-size: 14.5px; }

/* ------------------------------ Kleine Geräte ---------------------------- */

/* Unter dieser Breite bleibt neben dem Platz nichts uebrig - dann uebernimmt
   die Schublade den Ablauf wieder. */
@media (max-width: 1000px) {
  .tafel-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kopf" "buehne" "eingabe";
  }
  .ablaufspalte { display: none; }
  /* Statt der Spalte fuehrt hier ein Knopf in die Schublade. */
  .nurschmal { display: inline-flex; }
}

@media (max-width: 700px) {
  /* Sechs Werkzeuge passen nicht auf 375 Punkte. Die Leiste schiebt sich, und
     der Verlauf am Rand sagt das - abgeschnittene Woerter sehen sonst aus wie
     ein Fehler. */
  .werkzeuge {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .werkzeuge .knopf { padding-left: 10px; padding-right: 10px; }
  /* Auf dem Telefon ist jeder Punkt Platz. Die Wortmarke steht im Reiter und
     im Startbild - auf der Leiste kostet sie nur Breite und schiebt sich
     ueber die Werkzeuge. */
  .wortmarke { display: none; }
  .buehne { padding: 8px; }
  .kopfleiste { padding-top: max(9px, env(safe-area-inset-top)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ------------------------------ Die Tafel -------------------------------- */

/* Die Tafel ist eine Tafel, kein Rasen: weisse Flaeche, dunkle Linien. Die
   sechs Baender bleiben als ganz blasse Streifen stehen - sie sind die
   Bandeinteilung A-F des Rasters und helfen beim Zielen. */
.rasen { fill: var(--tafel); }
.streifen { fill: var(--tafel-band); }
.tor { fill: none; stroke: var(--kreide); stroke-width: 0.45; }

.kreide {
  fill: none;
  stroke: var(--kreide);
  stroke-width: 0.42;
}

.kreide.voll { fill: var(--kreide); stroke: none; }

.randschrift text {
  fill: var(--tafel-schrift);
  font-size: 2.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Immer sichtbar, aber leiser als die Spielfeldlinien - das Raster ordnet,
   es soll nicht mitreden. Sind die Namen eingeblendet, darf es deutlicher
   werden. */
.zonenlinie {
  stroke: var(--tafel-hilfslinie);
  stroke-width: 0.22;
  stroke-dasharray: 1.4 2;
}

.zonen.benannt .zonenlinie { stroke-width: 0.3; stroke-dasharray: 1.8 1.6; }

.zonenlinie.stark { stroke: var(--kreide); stroke-dasharray: 2.6 1.8; }

.zonenschrift {
  fill: var(--tafel-schrift);
  font-size: 2.4px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.zonenschrift.mitte { text-anchor: middle; }

/* Der Ablauf liest sich als nummerierte Liste; parallele Zeilen ruecken unter
   ihre Nummer statt eine eigene zu bekommen. */
.ablaufkopf {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 10px; font-weight: 600;
}
.ablaufzeile { display: flex; gap: 10px; padding: 7px 0; align-items: baseline; }
.ablaufzeile + .ablaufzeile { border-top: 1px solid rgba(128, 128, 128, 0.16); }
.ablaufzeile.zugleich { border-top: none; padding-top: 0; }
.ablaufzeile .nr {
  flex: 0 0 1.9em; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600; opacity: 0.55;
}
.ablaufzeile.zugleich .nr { font-weight: 400; opacity: 0.32; }
.ablaufzeile .satz { display: block; }
.ablaufzeile .gesagt { display: block; font-size: 0.82em; color: var(--still); margin-top: 1px; }
.ablaufzeile.unklar .satz { opacity: 0.6; }

/* Die Ausgangslage ist kein Schritt: kleiner, ohne Nummer, abgesetzt. */
.ablaufzeile.lage { padding: 3px 0; }
.ablaufzeile.lage .satz { font-size: 0.92em; color: var(--gedaempft); }
.ablaufzeile.lage .gesagt { display: none; }
.ablaufzeile.lage + .ablaufzeile:not(.lage) { border-top-width: 0; margin-top: 8px; }

/* Die Rasternamen sind Nachschlagehilfe, nicht Inhalt: gross genug zum Lesen,
   blass genug, um die Spieler nicht zu stoeren. */
.rasterschrift {
  fill: var(--tafel-blass);
  font-size: 4.2px;
  font-weight: 600;
  letter-spacing: 0.12px;
  text-anchor: middle;
  pointer-events: none;
}

.weg {
  fill: none;
  stroke-width: 0.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.22s ease;
}

.weg.verdeckt, .schrittzahl.verdeckt, .geist.verdeckt { opacity: 0; }

.weg-pass { stroke: var(--pass); }
.weg-lauf { stroke: var(--akzent); stroke-dasharray: 2.6 1.9; }
.weg-lauf.gegen { stroke: var(--gegner); }
.weg-dribbling { stroke: var(--akzent); }
.weg-dribbling.gegen { stroke: var(--gegner); }
.weg-tausch { stroke: var(--neutral-weg); stroke-dasharray: 1.5 1.5; }

/* Ein Vorschlag ist kein Befehl: die Antwort des Gegners wird duenner und
   blasser gezeichnet als das, was der Trainer gesagt hat. */
.weg.vorschlag { opacity: 0.5; stroke-width: 0.42; }
.ablaufzeile.vorschlag .satz { font-style: italic; color: var(--gedaempft); }
.ablaufzeile.vorschlag .gesagt { display: none; }

.spitze-pass { fill: var(--pass); }
.spitze-wir { fill: var(--akzent); }
.spitze-gegner { fill: var(--gegner); }
.spitze-neutral { fill: var(--neutral-weg); }

.schrittzahl circle { fill: rgba(0, 0, 0, 0.55); }
.schrittzahl text {
  fill: #fff;
  font-size: 2.2px;
  font-weight: 600;
  text-anchor: middle;
}

.geist {
  fill: none;
  stroke: var(--akzent);
  stroke-width: 0.4;
  stroke-dasharray: 1.2 1.1;
  opacity: 0.75;
}

.geist.gegen { stroke: var(--gegner); }

.marke { cursor: grab; }

/* Gewaehlte Marken tragen einen Ring in der Akzentfarbe - man muss sehen, wen
   das Ziehen mitnimmt, bevor man zieht. */
.marke.gewaehlt .scheibe { stroke: var(--akzent); stroke-width: 0.75; }

.gummiband {
  fill: rgba(10, 132, 255, 0.08);
  stroke: var(--akzent);
  stroke-width: 0.25;
  stroke-dasharray: 1.5 1.2;
  pointer-events: none;
}
.marke.gefasst { cursor: grabbing; }
.marke .scheibe {
  stroke: var(--tafel);
  stroke-width: 0.35;
  filter: drop-shadow(0 0.5px 0.8px rgba(0, 0, 0, 0.45));
}
.marke-wir .scheibe { fill: var(--akzent); }
.marke-gegner .scheibe { fill: var(--gegner); }
.marke .nummer {
  fill: #fff;
  font-size: 2.7px;
  font-weight: 600;
  text-anchor: middle;
  pointer-events: none;
}

.ball { cursor: grab; }
.ballhaut {
  fill: var(--tafel);
  stroke: var(--tinte);
  stroke-width: 0.3;
  filter: drop-shadow(0 0.4px 0.7px rgba(0, 0, 0, 0.5));
}
.ballfleck { fill: var(--tinte); }

#platz.spielt .marke, #platz.spielt .ball { cursor: default; }

.verborgen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}