/* ==========================================================================================
   Kowal — WERKBANK

   Kowal heisst Schmied. Die Oberflaeche ist deshalb ein MASCHINENPULT, keine Kartenwand:
   Register statt Kacheln, Haarlinien statt Schatten, eingelassene Lampen statt Pillen,
   eine Skala mit Teilstrichen statt eines Fortschrittsbalkens.

   WOVON DAS WEGGEHT, UND ZWAR ABSICHTLICH — das sind die vier Merkmale, an denen man
   generierte Oberflaechen erkennt, und die hier bis 0.3.0 alle vier drin waren:
     1. eine gesperrte ALL-CAPS-Zeile ueber JEDEM Block
     2. Mittelpunkte als Trenner („de253 · de · 1 Konto")
     3. lauter gleich grosse Karten mit demselben weichen Schatten
     4. alles untereinander, nichts hat Vorrang

   Kleine Grossbuchstaben gibt es weiter — aber nur noch als SPALTENBESCHRIFTUNG IM
   Register, wie auf einem Geraet. Nie mehr als Ueberschrift ueber einem Block.

   WARUM KEINE style="…"-ATTRIBUTE IM HTML
   Die Kopfzeile des Dienstes erlaubt `style-src 'self'`. Das blockiert auch ATTRIBUTE,
   nicht nur <style>-Bloecke — und zwar lautlos.
   ========================================================================================== */

@import url('schrift/schrift.css');

:root {
  color-scheme: dark;

  /* Warmes Graphit, nicht Blauschwarz. Ein Pult ist aus Metall, nicht aus Glas. */
  --grund: #16151A;
  --flaeche: #1A191F;
  --vertieft: #121116;
  --erhoeht: #22212A;
  --erhoeht-hell: #2A2832;

  --linie: #22212A;
  --linie-stark: #2E2C35;
  --linie-hell: #3A3744;
  --linie-heller: #4A4654;

  --tinte: #EDE9E3;
  --matt: #9B948C;
  --leise: #6E6A74;
  --stumm: #5E5966;

  /* Erhitzter Stahl. EIN Akzent, und er bedeutet immer dasselbe: hier arbeitet etwas,
     oder hier ist das Hauptziel. */
  --amber: #E9A23B;
  --amber-hell: #F6B758;
  --amber-tief: #8A5A1B;
  --amber-flaeche: #2A2030;

  --gut: #86C7A4;
  --gut-rand: #2C5244;
  --gut-flaeche: #16241E;
  --fehler: #E0695A;
  --fehler-hell: #EE9589;
  --fehler-rand: #6B3230;
  --fehler-flaeche: #1E1413;

  /* Eckig. Zwei Pixel sind kein Radius, sondern eine gebrochene Kante. */
  --r: 2px;
  --r-gross: 3px;

  --takt: .14s;
  --takt-lang: .24s;
  --kurve: cubic-bezier(.2, .7, .3, 1);
  --feder: cubic-bezier(.3, 1.4, .5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Die Flaeche ist GEFRAEST, nicht gefuellt: ein fast unsichtbares Linienraster und ein
   warmes Licht von links oben. Man sieht es nicht als Muster — man sieht nur, dass die
   Flaeche ein Material hat. `fixed`, sonst verraet sich der Verlauf beim Scrollen. */
body {
  margin: 0;
  min-height: 100dvh;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 3px),
    radial-gradient(1100px 520px at 16% -8%, rgba(233, 162, 59, .07), transparent 64%),
    var(--grund);
  background-attachment: fixed;
  color: var(--tinte);
  font-family: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
h1 { font-size: 38px; }
h2 { font-size: 21px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
p { margin: 0; }

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amber-hell); text-decoration: underline; }

/* ALLE Zahlen sind mono. Das ist keine Zierde: Tempo, Minuten je Feld und Schluessel
   stehen in Spalten, und eine Proportionalschrift laesst sie tanzen. */
code, .mono, .zahl, input[type='number'] {
  font-family: 'Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
::selection { background: var(--amber-tief); color: var(--tinte); }

.verborgen { display: none !important; }
.nur-vorleser {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ================================================================== Der Weg herein
   Zwei Haelften. Links die TIEFER liegende Bahn mit dem Ablauf, rechts das Blatt. */
.tor {
  display: grid;
  grid-template-columns: clamp(320px, 36%, 540px) minmax(0, 1fr);
  min-height: 100dvh;
}
.tor-links,
.tor-rechts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 6vh, 64px) clamp(22px, 3vw, 50px);
}
.tor-links {
  position: relative;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #191820 0%, var(--vertieft) 52%, #0F0E13 100%);
  border-right: 1px solid var(--linie-stark);
  /* Die linke Bahn liegt TIEFER und wirft nach rechts. Dadurch wirkt die rechte Seite wie
     das Blatt, das darauf liegt — nicht wie zwei Felder nebeneinander. */
  box-shadow: 16px 0 44px rgba(0, 0, 0, .42);
  z-index: 1;
}
.tor-rechts { align-items: center; }
.tor-inhalt { width: 100%; max-width: 460px; }

@media (max-width: 880px) {
  .tor { grid-template-columns: 1fr; }
  .tor-links { order: 2; border-right: 0; border-top: 1px solid var(--linie-stark); box-shadow: none; }
  .tor-rechts { order: 1; padding: 28px 16px; }
  .tor-links { padding: 28px 16px 40px; }
}

.marke {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 800; letter-spacing: .16em; color: var(--tinte);
  text-decoration: none;
}
.marke:hover { text-decoration: none; color: var(--tinte); }
.marke svg { flex: none; }

/* ================================================================== Kopfschiene
   Eine Schiene aus Segmenten, getrennt durch senkrechte Haarlinien — wie die Felder auf
   einem Geraet. Keine schwebende Leiste mit abgerundeten Knoepfen. */
.leiste {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: stretch; flex-wrap: wrap;
  min-height: 54px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie-stark);
}
.leiste-feld {
  display: flex; align-items: center; gap: 11px;
  padding: 0 20px;
  border-right: 1px solid var(--linie-stark);
}
.leiste-wege { display: flex; align-items: stretch; flex: 1; min-width: 0; }
.leiste-schub {
  display: flex; align-items: center; gap: 11px;
  margin-left: auto; padding: 0 18px;
  border-left: 1px solid var(--linie-stark);
}

/* Der Reiter ist eine Beschriftung, die aufleuchtet — kein Knopf mit Hintergrund. */
.weg {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 17px; min-height: 54px;
  color: #8C8690; font-size: 13.5px; font-weight: 600;
  text-decoration: none;
  transition: color var(--takt) ease, background-color var(--takt) ease;
}
.weg:hover { color: var(--tinte); background: #1E1D24; text-decoration: none; }
.weg.hier { color: var(--tinte); }
.weg.hier::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 2px;
  background: var(--amber); box-shadow: 0 0 12px rgba(233, 162, 59, .9);
}
.weg-zahl {
  min-width: 19px; padding: 0 5px;
  background: var(--amber); color: var(--grund);
  font-family: 'Plex Mono', monospace; font-size: 11px; font-weight: 600;
  text-align: center; line-height: 17px;
}

/* ------------------------------------------------------------------ Schmales Fenster
   Die Wege rutschen unter die Schiene und rollen seitlich. ZWEI Fallen stecken darin, und
   beide sahen vorher nach einem kaputten Kasten aus:

   1. `width: 100%` BRICHT NICHT UM, solange `flex: 1` steht. Fuer den Umbruch zaehlt die
      Flex-Basis, und die ist dann 0 — der Kasten passt also immer noch in die Zeile und
      blieb zwischen Zeichen und Konto eingeklemmt. Deshalb `flex: 1 0 100%`.

   2. `overflow-x: auto` setzt `overflow-y` STILL auf `auto` mit. Und da `.weg.hier::after`
      einen Pixel unter dem Kasten sitzt, gab es eine senkrechte Rollleiste in einer Zeile
      von 46 Pixeln. Also `overflow-y: hidden`, ausdruecklich. */
@media (max-width: 860px) {
  .leiste { min-height: 0; padding-bottom: 0; }
  .leiste-feld, .leiste-schub { min-height: 46px; }
  .weg { min-height: 46px; }
  .leiste-wege {
    order: 3; flex: 1 0 100%;
    overflow-x: auto; overflow-y: hidden;
    border-top: 1px solid var(--linie-stark);
    scrollbar-width: none;
  }
  .leiste-wege::-webkit-scrollbar { display: none; }
}

/* Die Kopfschiene KLEBT. Alles, was angesprungen wird — `scrollIntoView`, ein Anker, die
   Tabulatortaste —, landet sonst darunter und sieht aus, als waere es nicht da. Gemessen
   beim Ziehen: Eine Zeile, die rechnerisch bei y=90 stand, lag unter der Schiene, und der
   Klick traf den Navigationslink darueber. */
html { scroll-padding-top: 76px; }
@media (max-width: 860px) { html { scroll-padding-top: 116px; } }
.reihen-zeile, .zeile, .anw-zeile { scroll-margin-top: 12px; }

.seite { max-width: 1240px; margin: 0 auto; padding: 0 0 72px; }
.seite-kopf {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 24px;
  padding: 28px 26px 20px;
  border-bottom: 1px solid var(--linie-stark);
}
.seite-kopf > div:first-child { flex: 1; min-width: 260px; }
.seite-kopf .lede { margin-top: 8px; color: var(--matt); max-width: 70ch; font-size: 14.5px; }

/* ================================================================== Flaechen
   Ein Block ist eine PLATTE mit gebrochener Kante: Haarlinie aussen, Lichtkante oben,
   kein weicher Schatten darunter. Tiefe kommt vom Material, nicht vom Schlagschatten. */
.platte {
  background: linear-gradient(180deg, #1D1C23 0%, var(--flaeche) 100%);
  border: 1px solid var(--linie-stark);
  border-radius: var(--r-gross);
  padding: 20px 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.platte + .platte { margin-top: 16px; }
.gitter > .platte + .platte { margin-top: 0; }
.platte-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.platte-kopf h2 { flex: 1; min-width: 0; }

/* Wo eine Platte an die Seitenkante stoesst, soll sie dort KEINE Kante haben — ein Rahmen
   im Rahmen sieht aus wie ein Fehler. */
.seite > .platte,
.seite > .gitter { margin-left: 26px; margin-right: 26px; }
.seite > .platte:first-of-type { margin-top: 20px; }

.gitter { display: grid; gap: 16px; }
.gitter-2 { grid-template-columns: 1fr; align-items: start; }
@media (min-width: 880px) { .gitter-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gitter-3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.gitter-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.reihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.reihe-ende { margin-left: auto; }
.stapel { display: flex; flex-direction: column; gap: 10px; }
.strich { height: 1px; background: var(--linie-stark); border: 0; margin: 18px 0; }

/* Die Spaltenbeschriftung. KLEIN, gesperrt, und nur INNERHALB eines Registers oder ueber
   einer Werteleiste — nie als Ueberschrift ueber einem Block. */
.hut {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  color: var(--leise); margin-bottom: 7px;
}

/* ------------------------------------------------------------------ Werteleiste
   Zahlen stehen in geripptem Feld, getrennt durch senkrechte Haarlinien — wie die
   Anzeigen auf einem Pult. Keine einzeln schwebenden Kaertchen. */
.werte { display: flex; flex-wrap: wrap; border: 1px solid var(--linie-stark); border-radius: var(--r); }
.werte > * { padding: 11px 19px; border-right: 1px solid var(--linie-stark); }
.werte > *:last-child { border-right: 0; }

.kennzahl { background: transparent; }
.kennzahl .wert {
  font-family: 'Plex Mono', monospace; font-size: 23px; font-weight: 600;
  line-height: 1.05; letter-spacing: -.01em;
}
.kennzahl .was { margin-top: 4px; color: var(--leise); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.kennzahl.gut .wert { color: var(--gut); }
.kennzahl.warnung .wert { color: var(--amber); }
.kennzahl.fehler .wert { color: var(--fehler); }

/* Steht eine Kennzahl ALLEIN (nicht in `.werte`), bekommt sie ihre eigene Kante. */
.gitter .kennzahl {
  border: 1px solid var(--linie-stark); border-radius: var(--r);
  padding: 13px 16px; background: var(--vertieft);
}

/* ================================================================== Knoepfe
   Ein Tastknopf wird GEDRUECKT: er geht einen Pixel hinein. Kein Hochschweben, kein
   Lichtschein — das ist die Sprache von Glas, nicht von Metall. */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 17px;
  border: 1px solid var(--linie-hell); border-radius: var(--r);
  background: var(--erhoeht); color: var(--tinte);
  font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .1s var(--kurve), background-color var(--takt) ease,
              border-color var(--takt) ease, color var(--takt) ease, opacity var(--takt) ease;
}
.knopf:hover:not(:disabled) {
  background: var(--erhoeht-hell); border-color: var(--linie-heller);
  color: var(--tinte); text-decoration: none;
}
.knopf:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.knopf:disabled, .knopf[aria-disabled='true'] { opacity: .42; cursor: not-allowed; transform: none; }

.knopf-voll {
  border-color: var(--amber); background: var(--amber); color: var(--grund); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.knopf-voll:hover:not(:disabled) { background: var(--amber-hell); border-color: var(--amber-hell); color: var(--grund); }
.knopf-gefahr { color: var(--fehler-hell); border-color: var(--fehler-rand); }
.knopf-gefahr:hover:not(:disabled) { background: var(--fehler-flaeche); border-color: var(--fehler); color: var(--fehler-hell); }
/* OHNE FLAECHE, ABER MIT KANTE. Vorher war auch der Rand durchsichtig: Der Knopf
   „Gewicht und Stapel" sah aus wie eine Zwischenueberschrift, und die Einstellungen
   dahinter galten als nicht vorhanden. Ein Bedienelement muss als eines zu erkennen sein,
   auch wenn es zurueckhaltend ist. */
.knopf-leer { border-color: var(--linie); background: transparent; color: var(--matt); box-shadow: none; }
.knopf-leer:hover:not(:disabled) { background: var(--erhoeht); color: var(--tinte); border-color: var(--linie-heller); }
.knopf-klein { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
.knopf-breit { width: 100%; }

/* ================================================================== Felder
   Ein Eingabefeld liegt VERTIEFT. Hineinschreiben heisst hineingreifen. */
.feld {
  width: 100%; min-height: 42px; padding: 10px 13px;
  border: 1px solid var(--linie-hell); border-radius: var(--r);
  /* Auch hier `background-color`: Ein Feld kann ein Hintergrundbild tragen (der Winkel des
     Auswahlfelds), und die Kurzschreibweise wuerde es in jeder spaeteren Regel loeschen. */
  background-color: var(--vertieft); color: var(--tinte);
  font: inherit;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4);
  transition: border-color var(--takt) ease, box-shadow var(--takt) ease, background-color var(--takt) ease;
}
.feld::placeholder { color: var(--stumm); }
.feld:hover:not(:disabled) { border-color: var(--linie-heller); }
/* `background-color`, NICHT `background`.
   Die Kurzschreibweise setzt alles andere zurueck — auch `background-repeat` auf `repeat`
   und `background-position` auf `0% 0%`. Und weil `.feld:focus` staerker ist als
   `select.feld`, gewann sie gegen dessen `no-repeat`: Der gezeichnete Winkel KACHELTE das
   ganze Auswahlfeld zu, sobald man es anfasste. Zu sehen war es nur am fokussierten Feld,
   das daneben blieb heil. */
.feld:focus {
  border-color: var(--amber); outline: none; background-color: #17161C;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .34), 0 0 0 2px rgba(233, 162, 59, .18);
}
.feld:disabled { opacity: .5; cursor: not-allowed; }
.feld.schlecht { border-color: var(--fehler-rand); }
.feld.gut { border-color: var(--gut-rand); }
textarea.feld { resize: vertical; min-height: 96px; line-height: 1.6; }

.feld-klein {
  width: auto; min-height: 32px; padding: 0 28px 0 11px;
  font-family: 'Plex Mono', monospace; font-size: 12.5px; font-weight: 500;
  background-color: var(--amber-flaeche); border-color: var(--amber-tief); color: var(--amber);
  box-shadow: none;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23E9A23B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.feld-klein:disabled { opacity: .5; }
.feld-klein option { background: var(--flaeche); color: var(--tinte); }

/* Ein Auswahlfeld ist ein Feld mit WINKEL, und der Winkel ist gezeichnet. Ohne
   `appearance: none` sitzt auf der vertieften Flaeche der hellgraue Pfeil des
   Betriebssystems — das einzige Bauteil der Seite, das nicht aus derselben Werkstatt kommt.
   Die aufgeklappte Liste zeichnet weiterhin das System; was man ihr sagen kann, ist die
   Farbe der Einträge, und das steht hier. */
select.feld {
  -webkit-appearance: none; appearance: none;
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238C8690' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
select.feld:focus {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23E9A23B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
select.feld option { background: var(--flaeche); color: var(--tinte); }
select.feld optgroup { background: var(--flaeche); color: var(--leise); font-style: normal; font-weight: 600; }

.feldblock { margin-bottom: 15px; }
.feldblock > label, .marke-label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; }
.hilfe { margin-top: 6px; color: var(--leise); font-size: 12.5px; }
.hilfe.schlecht { color: var(--fehler-hell); }
.hilfe.gut { color: var(--gut); }
.hilfe.warnung { color: var(--amber); }

/* Vier Balken, eckig. „mittel" sagt nichts, vier gefuellte Balken schon. */
.guete { display: flex; gap: 4px; margin-top: 8px; }
.guete span { flex: 1; height: 4px; background: var(--linie-hell); transition: background-color var(--takt-lang) ease; }
.guete.s1 span:nth-child(1) { background: var(--fehler); }
.guete.s2 span:nth-child(-n+2) { background: var(--amber); }
.guete.s3 span:nth-child(-n+3) { background: var(--amber-hell); }
.guete.s4 span { background: var(--gut); }

/* ================================================================== Lampen
   Ein Zustand ist eine LAMPE, in die Flaeche eingelassen: der Ring ist der Rand des Lochs,
   der Schein kommt von innen. Das ersetzt die Pille ueberall, wo ein Ja/Nein steht. */
.lampe {
  width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block;
  background: #26252C;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9), 0 0 0 1px var(--linie-stark);
}
.lampe.an { background: var(--gut); box-shadow: inset 0 1px 1px rgba(0,0,0,.5), 0 0 0 1px var(--linie-stark), 0 0 9px rgba(134,199,164,.6); }
.lampe.arbeit { background: var(--amber); box-shadow: inset 0 1px 1px rgba(0,0,0,.5), 0 0 0 1px var(--linie-stark), 0 0 11px rgba(233,162,59,.8); animation: glimmen 1.6s ease-in-out infinite; }
.lampe.fehler { background: var(--fehler); box-shadow: inset 0 1px 1px rgba(0,0,0,.5), 0 0 0 1px var(--linie-stark), 0 0 10px rgba(224,105,90,.7); }
@keyframes glimmen { 0%, 100% { opacity: 1; } 50% { opacity: .42; } }

.lampzeile { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
.lampzeile.aus { color: var(--stumm); }

/* ================================================================== Marken (Pillen)
   Eckig, Haarlinie, keine Fuellung ausser bei Bedeutung. Eine Marke ist beschriftetes
   Blech, kein Bonbon. */
.pille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--r);
  border: 1px solid var(--linie-hell); background: var(--vertieft);
  color: var(--matt); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.pille.akzent { border-color: var(--amber-tief); background: var(--amber-flaeche); color: var(--amber); }
.pille.gut { border-color: var(--gut-rand); background: var(--gut-flaeche); color: var(--gut); }
.pille.warnung { border-color: var(--amber-tief); background: var(--amber-flaeche); color: var(--amber); }
.pille.fehler { border-color: var(--fehler-rand); background: var(--fehler-flaeche); color: var(--fehler-hell); }

.wahl {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 13px; border-radius: var(--r);
  border: 1px solid var(--linie-hell); background: var(--vertieft);
  color: #8C8690; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background-color var(--takt) ease, border-color var(--takt) ease, color var(--takt) ease, transform .1s var(--kurve);
}
.wahl:hover { border-color: var(--linie-heller); color: var(--tinte); }
.wahl:active { transform: translateY(1px); }
.wahl[aria-pressed='true'] { border-color: var(--amber-tief); background: var(--amber-flaeche); color: var(--amber); }
.wahl[aria-pressed='true'].gut { border-color: var(--gut-rand); background: var(--gut-flaeche); color: var(--gut); }
.wahl:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ================================================================== Hebel
   Zwei Rasten, dazwischen nichts. Eckig, weil er EINRASTET — ein runder Schieber mit
   Nachfedern waere die Sprache eines Telefons, nicht eines Pults. */
.kippe {
  width: 50px; height: 24px; flex: none; padding: 2px;
  border: 1px solid var(--linie-hell); border-radius: var(--r);
  background: var(--vertieft);
  display: inline-flex; align-items: center; cursor: pointer;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
  transition: background-color var(--takt-lang) ease, border-color var(--takt-lang) ease;
}
.kippe .kopf {
  width: 22px; height: 100%; border-radius: 1px; background: var(--linie-heller);
  transition: transform .2s var(--feder), background-color var(--takt-lang) ease;
}
.kippe[aria-checked='true'] { background: #3A2A14; border-color: var(--amber-tief); }
.kippe[aria-checked='true'] .kopf { transform: translateX(22px); background: var(--amber); box-shadow: 0 0 10px rgba(233, 162, 59, .6); }
.kippe.warnung[aria-checked='true'] { background: #3A2A14; border-color: #8A6A2A; }
.kippe:disabled { opacity: .4; cursor: not-allowed; }

.kippzeile {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 15px; border: 1px solid var(--linie-stark); border-radius: var(--r);
  background: var(--vertieft);
  transition: border-color var(--takt) ease, background-color var(--takt) ease;
}
.kippzeile.an { border-color: var(--amber-tief); background: #1C1A20; }
.kippzeile.warnt { border-color: var(--amber-tief); background: #221A12; }
.kippzeile .text { flex: 1; min-width: 0; }
.kippzeile .text strong { display: block; font-size: 13.5px; }
.kippzeile .text span { display: block; color: var(--matt); font-size: 12.5px; }

/* ================================================================== Register
   Eine Zeile ist eine ZEILE, kein Kaertchen. Getrennt wird mit einer Haarlinie, gehoben
   wird beim Zeigen — nicht dauerhaft durch einen Schatten. Der Balken links sagt, wo man
   gerade ist; dieselbe Geste wie die Lampe, nur fuer die ganze Zeile. */
.liste { display: flex; flex-direction: column; }
.liste > * + * { border-top: 1px solid var(--linie); }

.zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  background: transparent;
  transition: background-color var(--takt) ease, box-shadow var(--takt) ease;
}
.zeile.klickbar { cursor: pointer; }
.zeile:hover { background: #1C1B21; box-shadow: inset 3px 0 0 var(--linie-heller); }
.zeile.klickbar:hover { box-shadow: inset 3px 0 0 var(--amber); }
.zeile .haupt { flex: 1; min-width: 0; }
.zeile .haupt strong { display: block; font-weight: 600; }
.zeile .haupt span { display: block; color: var(--matt); font-size: 12.5px; }
.zeile.fehler { box-shadow: inset 3px 0 0 var(--fehler); }
.zeile.warnung { box-shadow: inset 3px 0 0 var(--amber); }
.zeile.schritt { box-shadow: inset 3px 0 0 var(--linie-heller); }
.zeile.spur { box-shadow: inset 3px 0 0 var(--linie); }

/* Aufklappen ohne Sprung: 1fr -> 0fr bewegt sich weich, `height: auto` kann das nicht. */
.falte { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--takt-lang) var(--kurve); }
.falte.offen { grid-template-rows: 1fr; }
.falte > .falte-inhalt { overflow: hidden; }
.falte.offen > .falte-inhalt { background: var(--vertieft); }

/* Der Inhalt eines aufgeklappten Fachs. Er liegt schon in der vertieften Flaeche der Falte
   und braucht nur Luft — KEINE eigene Platte. Eine Platte in einer Platte liest sich als
   Kaertchen im Kaertchen, und genau davon kommt diese Oberflaeche weg. */
.fach { padding: 18px 20px 20px; }
.fach > .feldblock:last-child, .fach > *:last-child { margin-bottom: 0; }

/* Dieselbe Lesebreite wie die Zahlenzeilen. Ein Auswahlfeld mit vier Wörtern darin über
   1150 Pixel zu ziehen macht es nicht klarer, nur länger. Die Ziehliste ist ausgenommen —
   die braucht die Breite wirklich. */
.fach .feldblock, .fach .kippzeile, .fach .summe, .fach .tafel, .fach > p.klein,
.fach .rohstoffe { max-width: 680px; }
.fach .liste { max-width: 760px; }
/* Luft zwischen den Abschnitten, nicht zwischen jeder Zeile. */
.fach .hut { margin-top: 22px; }
.fach > div:first-child .hut:first-child { margin-top: 0; }

.pfeil {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; min-height: 20px; padding: 0;
  border: 0; background: transparent; color: var(--leise);
  font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
  transition: transform var(--takt-lang) var(--kurve), color var(--takt) ease;
}
.pfeil:hover { color: var(--tinte); }
.pfeil.offen { transform: rotate(90deg); }

/* Tabellen sind Register mit Kopf. Dieselbe Haarlinie, dieselbe Ruhe. */
.tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabelle th {
  text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--linie-stark);
  color: var(--leise); font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap;
}
.tabelle td { padding: 11px 13px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tbody tr { transition: background-color var(--takt) ease, box-shadow var(--takt) ease; }
.tabelle tbody tr:hover { background: #1C1B21; box-shadow: inset 3px 0 0 var(--linie-heller); }
.tabelle-rollt { overflow-x: auto; }

/* ================================================================== Skala
   Warten ist ein MESSWERT. Eine Skala mit Teilstrichen, an der man abliest, wie weit es
   ist — kein Band, das nur sagt „es tut sich was". */
.skala { position: relative; height: 22px; border: 1px solid var(--linie-stark); border-radius: var(--r); background: var(--vertieft); overflow: hidden; }
.skala i {
  display: block; height: 100%;
  background: linear-gradient(180deg, var(--amber-hell), #C8803A);
  box-shadow: 0 0 14px rgba(233, 162, 59, .4);
  transition: width .5s var(--kurve);
}
.skala .striche {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, transparent 0 9.9%, rgba(255, 255, 255, .14) 9.9% 10%);
}
.skala .wert {
  position: absolute; inset: 0; display: flex; align-items: center; padding-left: 9px;
  font-family: 'Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  color: var(--grund); mix-blend-mode: difference;
}
/* Ohne Zahl, nur laufend: wenn der Fortschritt nicht messbar ist, wird er auch nicht
   behauptet — der Streifen wandert, statt eine Zahl zu erfinden. */
.skala.unbekannt i { width: 34%; animation: wandern 1.5s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes wandern { from { transform: translateX(-110%); } to { transform: translateX(400%); } }

.dreher {
  display: inline-block; width: 13px; height: 13px; flex: none;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: drehen .7s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }

/* ================================================================== Zustaende */
.leer {
  padding: 36px 22px; text-align: center;
  border: 1px dashed var(--linie-hell); border-radius: var(--r);
}
.leer strong { display: block; font-size: 15px; font-weight: 700; }
.leer span { display: block; margin-top: 5px; color: var(--matt); font-size: 13.5px; }
.leer .knopf { margin-top: 15px; }

.tafel {
  padding: 12px 14px; border: 1px solid var(--linie-stark); border-radius: var(--r);
  background: var(--vertieft); font-size: 13.5px;
  border-left-width: 3px;
}
.tafel.fehler { border-color: var(--fehler-rand); border-left-color: var(--fehler); background: var(--fehler-flaeche); color: var(--fehler-hell); }
.tafel.gut { border-color: var(--gut-rand); border-left-color: var(--gut); background: var(--gut-flaeche); color: var(--gut); }
.tafel.warnung { border-color: var(--amber-tief); border-left-color: var(--amber); background: #221A12; color: var(--amber); }
.tafel.akzent { border-color: var(--amber-tief); border-left-color: var(--amber); background: var(--amber-flaeche); color: var(--amber); }

/* ================================================================== Bewegung mit Aussage */
.rein { animation: rein var(--takt-lang) var(--kurve) backwards; }
@keyframes rein { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.rein:nth-child(1) { animation-delay: 0ms; }
.rein:nth-child(2) { animation-delay: 30ms; }
.rein:nth-child(3) { animation-delay: 60ms; }
.rein:nth-child(4) { animation-delay: 90ms; }
.rein:nth-child(5) { animation-delay: 120ms; }
.rein:nth-child(6) { animation-delay: 150ms; }
.rein:nth-child(n+7) { animation-delay: 180ms; }

.raus { animation: raus .18s ease forwards; }
@keyframes raus { to { opacity: 0; transform: translateX(14px); } }

.wackelt { animation: wackeln .32s ease; }
@keyframes wackeln {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.pulst { animation: glimmen 1.8s ease-in-out infinite; }

/* ================================================================== Zurufe
   Unten rechts, mit Zaehlbalken. Der Balken ist nicht Zierde: Er sagt, wie lange das
   Zuruecknehmen noch geht. */
.zurufe {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
  pointer-events: none;
}
.zuruf {
  pointer-events: auto;
  min-width: 280px; max-width: min(420px, calc(100vw - 36px));
  border: 1px solid var(--linie-heller); border-left-width: 3px; border-radius: var(--r);
  background: var(--erhoeht);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
  overflow: hidden;
  animation: zurufRein var(--takt-lang) var(--kurve);
}
@keyframes zurufRein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.zuruf.geht { animation: zurufRaus .18s ease forwards; }
@keyframes zurufRaus { to { opacity: 0; transform: translateY(6px); } }
.zuruf-inhalt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.zuruf-inhalt .text { flex: 1; min-width: 0; font-size: 13.5px; }
.zuruf-inhalt .text strong { font-weight: 700; }
.zuruf-inhalt .text span { display: block; color: var(--matt); font-size: 12.5px; }
.zuruf.fehler { border-left-color: var(--fehler); }
.zuruf.fehler .text strong { color: var(--fehler-hell); }
.zuruf.gut { border-left-color: var(--gut); }
.zuruf.gut .text strong { color: var(--gut); }
.zuruf-balken { height: 2px; background: var(--amber); transform-origin: left; }
.zuruf-balken.laeuft { animation: balken 6s linear forwards; }
@keyframes balken { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ================================================================== Ansage */
.ansage {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--amber-tief);
  background: linear-gradient(180deg, #2A2030, #221A26);
  color: var(--amber);
}
.ansage.zwingt { background: linear-gradient(180deg, #2A1F12, #221A12); }
.ansage .text { flex: 1; min-width: 0; }
.ansage .text strong { display: block; font-size: 13.5px; }
.ansage .text span { display: block; color: var(--matt); font-size: 13.5px; }
.ansage .weg-zu {
  flex: none; border: 0; background: transparent; color: var(--leise);
  font-size: 19px; line-height: 1; cursor: pointer; padding: 0 4px;
  transition: color var(--takt) ease;
}
.ansage .weg-zu:hover { color: var(--tinte); }

/* ================================================================== Code-Eingabe */
.codefelder { display: flex; gap: 8px; }
.codefelder.falsch { animation: wackeln .32s ease; }
.codefeld {
  width: 50px; height: 60px; padding: 0; text-align: center;
  border: 1px solid var(--linie-hell); border-radius: var(--r);
  background: var(--vertieft); color: var(--tinte);
  font-family: 'Plex Mono', monospace; font-size: 25px; font-weight: 600;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45);
  transition: border-color var(--takt) ease, transform var(--takt) var(--feder), background-color var(--takt) ease;
}
.codefeld:focus { border-color: var(--amber); background: #17161C; outline: none; }
.codefeld.voll { border-color: var(--amber-tief); transform: scale(1.05); }
@media (max-width: 460px) {
  .codefelder { gap: 5px; }
  .codefeld { width: 100%; height: 52px; font-size: 20px; }
}

/* ================================================================== Der Schluessel
   Eingeschlagen, nicht aufgedruckt: vertiefte Flaeche, Lichtkante oben. */
.schluesselkarte {
  width: 100%; display: block; cursor: pointer; text-align: left;
  padding: 20px; border: 1px solid var(--amber-tief); border-radius: var(--r);
  background: var(--vertieft); color: var(--amber);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .55), inset 0 0 40px rgba(233, 162, 59, .05);
  transition: border-color var(--takt) ease, box-shadow var(--takt) ease, transform .1s var(--kurve);
}
.schluesselkarte:hover { border-color: var(--amber); box-shadow: inset 0 2px 10px rgba(0,0,0,.55), inset 0 0 56px rgba(233,162,59,.1); }
.schluesselkarte:active { transform: translateY(1px); }
.schluesselkarte .wert {
  display: block;
  font-family: 'Plex Mono', monospace; font-size: clamp(16px, 4.6vw, 26px);
  font-weight: 600; letter-spacing: .1em; white-space: nowrap;
}
.schluesselkarte .hinweis { display: block; margin-top: 10px; color: var(--matt); font-size: 12.5px; }

/* ================================================================== Ablauf */
.ablauf { list-style: none; margin: 24px 0 0; padding: 0; }
.ablauf li { position: relative; padding: 0 0 20px 32px; color: var(--matt); font-size: 13.5px; }
.ablauf li::before { content: ""; position: absolute; left: 8px; top: 19px; bottom: 0; width: 1px; background: var(--linie-hell); }
.ablauf li:last-child { padding-bottom: 0; }
.ablauf li:last-child::before { display: none; }
.ablauf .punkt {
  position: absolute; left: 0; top: 2px;
  width: 17px; height: 17px; border-radius: var(--r);
  border: 1px solid var(--linie-heller); background: var(--vertieft);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plex Mono', monospace; font-size: 10px; font-weight: 600; color: var(--leise);
}
.ablauf li strong { display: block; color: var(--tinte); font-size: 13.5px; font-weight: 600; }
.ablauf li.jetzt .punkt { border-color: var(--amber); background: var(--amber); color: var(--grund); }
.ablauf li.fertig .punkt { border-color: var(--gut-rand); background: var(--gut-flaeche); color: var(--gut); }
.ablauf li.jetzt strong { color: var(--amber); }
.ablauf li.jetzt .punkt::after {
  content: ""; position: absolute; inset: -4px; border-radius: var(--r);
  border: 1px solid var(--amber); opacity: .4;
  animation: ring 2s ease-out infinite;
}
@keyframes ring {
  0% { transform: scale(.85); opacity: .55; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* ================================================================== Wischkarten */
.wischstapel { display: flex; flex-direction: column; gap: 12px; }
.wischkarte {
  position: relative; touch-action: pan-y;
  border: 1px solid var(--linie-stark); border-radius: var(--r-gross);
  background: linear-gradient(180deg, #1D1C23 0%, var(--flaeche) 100%);
  padding: 18px 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 30px rgba(0, 0, 0, .4);
  transform: translateX(var(--zug, 0px)) rotate(var(--dreh, 0deg));
  transition: transform var(--takt-lang) var(--kurve), border-color var(--takt) ease, opacity var(--takt-lang) ease;
}
.wischkarte.zieht { transition: none; }
.wischkarte.weg-rechts { transform: translateX(120%) rotate(10deg); opacity: 0; }
.wischkarte.weg-links { transform: translateX(-120%) rotate(-10deg); opacity: 0; }
.wischkarte .wischhinweis {
  position: absolute; top: 14px; padding: 3px 10px; border-radius: var(--r);
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; opacity: 0;
  transition: opacity var(--takt) ease;
}
.wischkarte .wischhinweis.ja { right: 16px; background: var(--gut-flaeche); border: 1px solid var(--gut-rand); color: var(--gut); }
.wischkarte .wischhinweis.nein { left: 16px; background: var(--fehler-flaeche); border: 1px solid var(--fehler-rand); color: var(--fehler-hell); }
.wischkarte.nach-rechts .wischhinweis.ja { opacity: 1; }
.wischkarte.nach-links .wischhinweis.nein { opacity: 1; }

/* ================================================================== Regler */
.regler-zeile { display: grid; grid-template-columns: 128px 1fr 56px; gap: 12px; align-items: center; }
.regler { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; }
.regler::-webkit-slider-runnable-track { height: 5px; background: var(--vertieft); border: 1px solid var(--linie-hell); }
.regler::-moz-range-track { height: 5px; background: var(--vertieft); border: 1px solid var(--linie-hell); }
.regler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 20px; margin-top: -9px; border: 0; border-radius: 1px;
  background: var(--amber); box-shadow: 0 0 8px rgba(233, 162, 59, .5);
  transition: transform var(--takt) var(--feder);
}
.regler::-moz-range-thumb { width: 10px; height: 20px; border: 0; border-radius: 1px; background: var(--amber); }
.regler:hover::-webkit-slider-thumb { transform: scaleY(1.12); }
.regler-wert { text-align: right; font-family: 'Plex Mono', monospace; font-size: 13px; font-weight: 600; }

.summe {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--linie-stark); border-radius: var(--r);
  background: var(--vertieft);
}
.summe .balken { flex: 1; height: 6px; background: #0E0D11; border: 1px solid var(--linie-stark); overflow: hidden; }
.summe .balken i { display: block; height: 100%; background: var(--amber); transition: width var(--takt-lang) var(--kurve), background-color var(--takt-lang) ease; }
.summe.zuviel { border-color: var(--amber-tief); background: #221A12; color: var(--amber); }

/* ================================================================== Vorschau (Discord) */
.schau-discord { border-radius: var(--r-gross); background: #313338; padding: 14px 16px; }
.schau-discord .kopf { display: flex; gap: 12px; }
.schau-discord .bild { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--amber); color: #1E1F22; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.schau-discord .name { font-weight: 600; color: var(--amber); }
.schau-discord .bot { padding: 1px 5px; border-radius: 3px; background: var(--amber); color: #1E1F22; font-size: 10px; font-weight: 700; }
.schau-discord .wann { color: #949BA4; font-size: 12px; }
.schau-discord .einbettung { margin-top: 6px; display: flex; border-radius: 4px; overflow: hidden; background: #2B2D31; }
.schau-discord .einbettung .kante { width: 4px; flex: none; background: var(--amber); }
.schau-discord .einbettung .inhalt { flex: 1; min-width: 0; padding: 12px 15px; }
.schau-discord .einbettung .titel { font-weight: 700; color: #F2F3F5; font-size: 15px; }
.schau-discord .einbettung .rumpf { margin-top: 5px; color: #DBDEE1; font-size: 14px; }
.schau-discord .einbettung .fuss { margin-top: 10px; color: #949BA4; font-size: 12px; }

.schau-rahmen { border: 1px solid var(--linie-stark); border-radius: var(--r); background: var(--flaeche); overflow: hidden; }
.schau-rahmen .darunter { padding: 20px 16px; color: var(--linie-heller); font-size: 12.5px; }

/* ================================================================== Kleinteile */
.leise { color: var(--leise); }
.matt { color: var(--matt); }
.rot { color: var(--fehler-hell); }
.gruen { color: var(--gut); }
.gelb { color: var(--amber); }
.klein { font-size: 13px; }
.winzig { font-size: 11.5px; }
.fett { font-weight: 600; }
.mitte { text-align: center; }
.rechts { text-align: right; }
.luft { margin-top: 16px; }
.luft-gross { margin-top: 24px; }
.abstand-unten { margin-bottom: 16px; }
.breit { width: 100%; }

.kv { display: grid; grid-template-columns: minmax(118px, auto) 1fr; gap: 7px 18px; font-size: 13.5px; }
.kv dt { color: var(--leise); }
.kv dd { margin: 0; }

.sperre { display: inline-flex; align-items: center; gap: 7px; color: var(--leise); font-size: 12.5px; }

.weltwahl { display: inline-flex; align-items: center; gap: 9px; }

/* Ein Wegnehmen-Kreuz. Stand bisher nur in der Ansage und im Zuruf; es wird an mehr
   Stellen gebraucht, also steht es hier ALLGEMEIN — nicht ein drittes Mal kopiert. */
.weg-zu {
  flex: none; border: 0; background: transparent; color: var(--leise);
  font: inherit; font-size: 18px; line-height: 1; padding: 0 5px; cursor: pointer;
  transition: color var(--takt) ease;
}
.weg-zu:hover { color: var(--fehler-hell); }

/* ==========================================================================================
   ZIEHLISTE — Vorrat links, Reihenfolge rechts
   ==========================================================================================
   Zwei Haelften, dazwischen eine Haarlinie. Nicht zwei Karten nebeneinander: Es ist EIN
   Bauteil, in dem etwas von der einen Seite auf die andere wandert. */
/* Zwei Haelften, dazwischen eine Haarlinie, BEIDE gleich hoch und in sich rollend.
   Vorher wuchs die Seite mit jedem Schritt: Bei siebzehn Eintraegen stand links eine leere
   Flaeche von einem halben Bildschirm, und der Vorrat zum Anhaengen war oben aus dem Bild. */
.ziehraum {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--linie-stark); border-radius: var(--r);
  background: var(--vertieft);
}
.ziehraum-halb {
  display: flex; flex-direction: column; min-width: 0;
  padding: 13px 15px;
  /* Mitwachsend, aber gedeckelt: auf einem grossen Bildschirm sind zwoelf Schritte zu
     sehen, auf einem kleinen Fenster bleiben es immer noch sechs. Ein fester Wert waere
     auf dem einen zu kurz und auf dem anderen zu lang. */
  max-height: clamp(280px, 55vh, 560px);
}
.ziehraum-halb + .ziehraum-halb { border-left: 1px solid var(--linie-stark); }
.halb-kopf { display: flex; align-items: center; gap: 10px; flex: none; margin-bottom: 9px; }
.halb-kopf .hut { margin: 0; }
.halb-kopf .pille { margin-left: auto; }
/* `overflow-y` allein macht `overflow-x` heimlich auch `auto` — deshalb steht beides da. */
.halb-rollt { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 4px; }
.halb-rollt::-webkit-scrollbar { width: 9px; }
.halb-rollt::-webkit-scrollbar-thumb { background: var(--linie-hell); border-radius: 9px; }
.halb-rollt::-webkit-scrollbar-track { background: transparent; }
.ziehraum-halb > .hilfe { flex: none; margin-top: 9px; }
.ziehraum-halb > .tafel { flex: none; }

@media (max-width: 760px) {
  .ziehraum { grid-template-columns: 1fr; }
  .ziehraum-halb { max-height: 340px; }
  .ziehraum-halb + .ziehraum-halb { border-left: 0; border-top: 1px solid var(--linie-stark); }
}

.vorrat { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 7px; }
.kachel {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  position: relative; min-height: 70px; padding: 9px 5px;
  border: 1px solid var(--linie-hell); border-radius: var(--r);
  background: var(--erhoeht); color: var(--matt);
  font: inherit; cursor: pointer; text-align: center;
  transition: border-color var(--takt) ease, color var(--takt) ease, background-color var(--takt) ease, transform .1s var(--kurve);
}
.kachel:hover { border-color: var(--amber-tief); color: var(--tinte); }
.kachel:active { transform: translateY(1px); }
.kachel-name { font-size: 11px; line-height: 1.25; }
/* Schon in der Reihenfolge: nicht ausgegraut (das sieht aus wie kaputt), sondern
   ABGEHAKT — die Kachel bleibt lesbar und sagt, dass sie drin ist. */
.kachel.drin { border-color: var(--gut-rand); color: var(--leise); background: var(--vertieft); }
.kachel-zahl {
  position: absolute; top: 4px; right: 5px;
  font-family: 'Plex Mono', monospace; font-size: 10px; font-weight: 700; color: var(--gut);
}

.reihen { display: flex; flex-direction: column; gap: 5px; }
.reihen-zeile {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px;
  border: 1px solid var(--linie-hell); border-radius: var(--r);
  background: var(--erhoeht);
  transition: border-color var(--takt) ease, box-shadow var(--takt) ease;
  /* Angefasst wird die ganze Zeile. Ohne das Folgende markiert ein Zug den Text, statt die
     Zeile zu schieben — und auf dem Tastbildschirm blaettert er die Seite. */
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
}
.reihen-zeile .weg-zu { cursor: pointer; }
.reihen-zeile:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.reihen-zeile.warnt { border-left: 3px solid var(--amber); }
/* Angefasst: angehoben und ueber allem. Hier IST ein Schatten richtig — die Zeile ist
   gerade wirklich in der Hand und nicht mehr in der Flaeche. */
.reihen-zeile.zieht {
  position: relative; z-index: 5;
  border-color: var(--amber); box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
  transition: none;
}
.reihen.zieht-gerade .reihen-zeile:not(.zieht) { transition: transform var(--takt) var(--kurve); }
.griff {
  flex: none; width: 14px; color: var(--stumm); cursor: grab;
  font-size: 15px; line-height: 1; text-align: center; touch-action: none;
}
.reihen-zeile.zieht { cursor: grabbing; }
.reihen-zeile.zieht .griff { color: var(--amber); }
/* Waehrend eines Zugs markiert nichts auf der Seite — sonst zieht man beim Vorbeifahren
   ueber die Beschriftungen daneben einen blauen Balken hinter sich her. */
body.zieht-gerade-etwas { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.nr {
  flex: none; min-width: 20px;
  font-family: 'Plex Mono', monospace; font-size: 11px; font-weight: 600; color: var(--leise);
}
.reihen-name { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================================
   ANWEISUNGEN
   ========================================================================================== */
/* Eine Anweisung ist eine Zeile mit Schalter und Fach. Steht sie auf AUS, bleibt sie
   lesbar — ausgegraut saehe aus wie „geht hier nicht". */
.anw-zeile { display: flex; align-items: center; gap: 11px; padding: 11px 14px; }
.anw-zeile .haupt { flex: 1; min-width: 0; }
.anw-zeile .haupt strong { display: block; font-weight: 600; font-size: 13.5px; }
.anw-zeile .haupt span { display: block; color: var(--matt); font-size: 12.5px; }
.anw-zeile.an { box-shadow: inset 3px 0 0 var(--amber); }

/* ------------------------------------------------------------------ Einstellungszeilen
   EINE LESEBREITE, nicht die ganze Platte.
   Vorher lief die Beschriftung samt Erklaerung ueber 1100 Pixel und das Feld stand ganz
   rechts am Rand — gelesen wird links, gehandelt rechts, und dazwischen liegt der halbe
   Bildschirm. Jetzt steht das Feld direkt hinter dem Satz. */
.zahlzeile { display: flex; align-items: center; gap: 14px; margin-bottom: 13px; max-width: 680px; }
.zahlzeile > label { flex: 1; min-width: 0; font-size: 13px; }
.zahlzeile > label small { display: block; margin-top: 2px; color: var(--leise); font-size: 11.5px; line-height: 1.45; }
.zahlzeile input {
  flex: none; width: 92px; min-height: 34px; padding: 0 10px; text-align: right;
  border: 1px solid var(--linie-hell); border-radius: var(--r);
  background: var(--vertieft); color: var(--tinte);
  font-family: 'Plex Mono', monospace; font-size: 13px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4);
}
.zahlzeile input:focus { border-color: var(--amber); outline: none; }
/* Eine Zahl, die auf einer Welt im Geltungsbereich nichts bedeutet (die Einheit gibt es
   dort nicht), wird MARKIERT statt gesperrt — sie gilt ja auf den anderen Welten. */
.zahlzeile.warnt > label strong, .zahlzeile.warnt > label small { color: var(--amber); }
.zahlzeile .einheit { flex: none; width: 38px; color: var(--leise); font-size: 11.5px; }


/* Der Speicherzustand einer Anweisung. Er steht IN der Zeile, nicht als Zuruf unten rechts:
   Bei sechzig Stellschrauben will man am Block sehen, ob der letzte Wert drin ist. */
.anw-stand { flex: none; display: inline-flex; align-items: center; min-width: 22px; }

/* Ein Namensfeld in einer Kopfzeile wächst nicht auf die ganze Breite. */
.feld-name { width: auto; min-width: 180px; min-height: 36px; padding: 0 12px; font-size: 13px; }


/* ==========================================================================================
   FORMTEILE — gestapelt statt nebeneinander
   ==========================================================================================
   Die erste Fassung setzte jede Einstellung als Zeile: Beschriftung links, Feld rechts.
   In einem Raster von 170 Pixeln blieb fuer die Beschriftung nichts uebrig — aus
   "Speertraeger" wurde "Speert", aus "Leichte Kavallerie" wurde "Leicht Kavall".

   Deshalb jetzt ZWEI Formen: .feld-block steht gestapelt und passt in enge Raster,
   .zahlzeile steht nebeneinander und ist auf Lesebreite begrenzt. Welche wo hingehoert,
   entscheidet der Platz, nicht die Gewohnheit. */
.feldraster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 13px;
  margin-bottom: 14px;
}
/* ALLE BEDIENELEMENTE EINER RASTERZEILE LIEGEN AUF EINER LINIE.
   Ohne das sitzt jedes Feld auf einer anderen Hoehe — je nachdem, ob die Erklaerung
   darueber eine Zeile lang ist oder drei. Das Raster macht die Bloecke einer Zeile ohnehin
   gleich hoch; die Beschriftung bekommt den Ueberschuss (`flex: 1`), und das Bedienelement
   faellt damit in jedem Block ganz nach unten. */
.feld-block { min-width: 0; display: flex; flex-direction: column; }
.feld-block > label { display: block; flex: 1; margin-bottom: 6px; }
.feld-block > label strong { display: block; font-size: 13px; font-weight: 600; }
/* Die Beschriftung darf UMBRECHEN und wird nie abgeschnitten. Genau daran ist die erste
   Fassung gescheitert. */
.feld-block > label strong, .zahlzeile > label strong { white-space: normal; overflow-wrap: anywhere; }
.feld-block > label small {
  display: block; margin-top: 3px; color: var(--leise); font-size: 11.5px; line-height: 1.45;
}
.feld-reihe { display: flex; align-items: center; gap: 7px; }
.feld-reihe input[type='number'] {
  flex: 1; min-width: 0; min-height: 36px; padding: 0 10px; text-align: right;
  border: 1px solid var(--linie-hell); border-radius: var(--r);
  background-color: var(--vertieft); color: var(--tinte);
  font-family: 'Plex Mono', monospace; font-size: 13px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4);
}
.feld-reihe input[type='number']:focus { border-color: var(--amber); outline: none; }
.feld-reihe .bis { flex: none; color: var(--leise); font-size: 11.5px; }
.feld-reihe .einheit { flex: none; color: var(--leise); font-size: 11.5px; white-space: nowrap; }
.feld-zeit { width: auto; flex: 1; min-width: 0; min-height: 36px; padding: 0 8px; font-size: 13px; }
.feld-block.warnt > label strong, .feld-block.warnt > label small { color: var(--amber); }

.abschnitt { margin-top: 24px; margin-bottom: 12px; }
.abschnitt:first-child { margin-top: 0; }
.abschnitt .hut { margin: 0 0 5px; }
.abschnitt .klein { margin: 0; max-width: 72ch; }

/* Eine Gruppe mit eigenem Schalter — Ausbildungsgebaeude, Freischaltregel. */
.gebaeudegruppe {
  border: 1px solid var(--linie-stark); border-radius: var(--r);
  background: var(--vertieft); padding: 12px 14px; margin-bottom: 12px;
}
.gebaeudegruppe > .kippzeile { border: 0; background: transparent; padding: 0 0 10px; align-items: center; }
.gebaeudegruppe > .kippzeile > .nr {
  flex: none; min-width: 22px; height: 22px; line-height: 20px; text-align: center;
  border: 1px solid var(--amber-tief); border-radius: var(--r);
  background: var(--amber-flaeche); color: var(--amber);
}
.gruppeninhalt { padding-top: 10px; border-top: 1px solid var(--linie); }

/* ------------------------------------------------------------------ Einheitentafel
   Eine Zeile je Einheit mit Ziel, Gewicht, Stapel und Rest. Vorher standen Gewicht und
   Stapel hinter einer Klappe, deren Knopf (`.knopf-leer`) wie gewoehnlicher Text aussah —
   gemeldet wurde daraufhin, die Priorisierung fehle komplett. Ein Bedienelement, das nicht
   aussieht wie eines, ist keines. */
.einheitentafel { margin-top: 4px; }
.einheitentafel th { font-size: 10px; }
.einheitentafel th:not(:first-child) { text-align: right; }
.einheitentafel th[title] { cursor: help; border-bottom-style: dashed; }
.einheitentafel td { padding: 6px 8px; }
.einheitentafel td:not(.einheitenname) { width: 1%; text-align: right; }
.einheitenname strong { display: block; font-size: 13px; font-weight: 600; }
.einheitenname span { display: block; color: var(--leise); font-size: 11px; }
.einheitentafel tr.warnt .einheitenname strong,
.einheitentafel tr.warnt .einheitenname span { color: var(--amber); }
.tafelzahl {
  width: 86px; min-height: 32px; padding: 0 9px; text-align: right;
  border: 1px solid var(--linie-hell); border-radius: var(--r);
  background-color: var(--vertieft); color: var(--tinte);
  font-family: 'Plex Mono', monospace; font-size: 13px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4);
}
.tafelzahl:focus { border-color: var(--amber); outline: none; }
@media (max-width: 760px) { .tafelzahl { width: 70px; } }
.kippzeile-klein { flex: none; display: inline-flex; align-items: center; }

.pfeil-klein {
  flex: none; width: 22px; min-height: 22px; padding: 0;
  border: 1px solid var(--linie-hell); border-radius: var(--r);
  background: var(--erhoeht); color: var(--leise);
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
}
.pfeil-klein:hover:not(:disabled) { color: var(--tinte); border-color: var(--linie-heller); }
.pfeil-klein:disabled { opacity: .3; cursor: not-allowed; }

/* Der letzte Anlass laesst sich nicht abwaehlen — sichtbar, nicht gesperrt. */
.wahl.fest { cursor: default; }
.wahl.fest::after { content: '·'; margin-left: 2px; color: var(--amber); }

/* Die Stufe, auf die ein Bauschritt baut. */
.stufe {
  flex: none; color: var(--leise);
  font-family: 'Plex Mono', monospace; font-size: 11px; white-space: nowrap;
}

/* Ziehen aus dem Vorrat: der Schatten unter dem Zeiger und der Strich in der Liste. */
.zieh-geist {
  position: fixed; top: 0; left: 0; z-index: 900; pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--linie-hell); border-radius: var(--r);
  background: var(--erhoeht); color: var(--matt);
  font-size: 12.5px; box-shadow: 0 12px 28px rgba(0, 0, 0, .55);
  opacity: .72;
}
.zieh-geist.trifft { border-color: var(--amber); color: var(--tinte); opacity: 1; }
.einfuegemarke {
  height: 2px; margin: 2px 0; background: var(--amber);
  box-shadow: 0 0 10px rgba(233, 162, 59, .8);
}

/* Rohstoffe und Einheiten stehen im selben Raster — eine Form, nicht zwei. */
.rohstoffe { display: contents; }

/* ==========================================================================================
   RUHE — wer Bewegung abgestellt hat, bekommt keine.
   ========================================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}