/* ==========================================================================
   LSPD · Innenbereich — Stylesheet
   ==========================================================================
   Die Optik einer Nachtschicht im Revier: Mitternachtsblau als Grund,
   Messing wie das Abzeichen als einziger Schmuck, die Statusfarben des
   Funks fuer alles Betriebliche. Der siebenzackige Stern traegt die Marke;
   die schmale rot/blaue Linie ueber dem Kopf ist die Lightbar - mehr
   Zierde erlaubt sich eine Dienststelle nicht.

   Alle Klassennamen sind unveraendert; nur das Aussehen ist neu.
   ========================================================================== */

/* Die vier sicheren Raender des Geraets als Variablen.

   Zweimal geschrieben mit Absicht: erst Null, dann - wenn der Browser
   env() ueberhaupt kennt - die echten Werte. So steht in jedem Fall eine
   gueltige Laenge drin; ein leeres var() macht sonst aus calc(58px + )
   Unsinn und die ganze Zeile faellt aus.

   Als Variable und nicht direkt als env(), damit man sie zum Messen
   ueberschreiben kann: ein iPhone 15 hat oben 59 Pixel Statusleiste, und
   die stellt man am Schreibtisch nur nach, indem man --sat setzt. */
:root { --sat: 0px; --sar: 0px; --sab: 0px; --sal: 0px; }
@supports (top: env(safe-area-inset-top)) {
    :root {
        --sat: env(safe-area-inset-top, 0px);
        --sar: env(safe-area-inset-right, 0px);
        --sab: env(safe-area-inset-bottom, 0px);
        --sal: env(safe-area-inset-left, 0px);
    }
}

:root {
    --kopf:     58px;

    --grund:    #090d15;
    --flaeche:  #0d1320;
    --karte:    #101828;
    --karte2:   #152033;
    --rand:     #1e293d;
    --randhell: #2d3c58;

    --text:     #c4ccdA;
    --hell:     #eef2f8;
    --grau:     #9198a6;

    --gold:     #c9a45c;      /* Messing des Abzeichens */
    --goldhell: #e9cd8d;
    --golddun:  #453718;

    --blau:     #4d8fd1;      /* Streifenblau */
    --blaudun:  #132b47;
    --rot:      #cf5850;
    --rotdun:   #3a1b1d;
    --gelb:     #d3a54e;
    --gruen:    #53a878;
    --lila:     #8d80d6;

    --schatten: 0 10px 30px rgba(0,0,0,.45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: var(--text);
    min-height: 100vh;
    background:
        radial-gradient(1100px 520px at 50% -180px, rgba(77,143,209,.10), transparent 60%),
        radial-gradient(900px 600px at 110% 115%, rgba(201,164,92,.05), transparent 55%),
        linear-gradient(180deg, #0a0f1a 0%, var(--grund) 40%);
    background-attachment: fixed;
}

/* Der Stern als stilles Wasserzeichen im Hintergrund. */
body::after {
    content: "";
    position: fixed;
    right: -140px; bottom: -160px;
    width: 620px; height: 620px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cpath%20d%3D%22M60.0%208.0%20L74.3%2030.3%20L100.7%2027.6%20L92.2%2052.7%20L110.7%2071.6%20L85.8%2080.6%20L82.6%20106.9%20L60.0%2093.0%20L37.4%20106.9%20L34.2%2080.6%20L9.3%2071.6%20L27.8%2052.7%20L19.3%2027.6%20L45.7%2030.3%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23c9a45c%22%20stroke-width%3D%222.2%22%20stroke-linejoin%3D%22round%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2218%22%20fill%3D%22none%22%20stroke%3D%22%23c9a45c%22%20stroke-width%3D%221.8%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2225%22%20fill%3D%22none%22%20stroke%3D%22%23c9a45c%22%20stroke-width%3D%221.1%22%20opacity%3D%22.5%22/%3E%3C/svg%3E") center/contain no-repeat;
    opacity: .05;
    pointer-events: none;
    z-index: 0;
}
#anwendung, .tor { position: relative; z-index: 1; }

::selection { background: rgba(201,164,92,.30); color: var(--hell); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--grund); }
::-webkit-scrollbar-thumb { background: #23304a; border-radius: 5px; border: 2px solid var(--grund); }
::-webkit-scrollbar-thumb:hover { background: #31436a; }

a { color: var(--blau); text-decoration: none; }
a:hover { color: var(--goldhell); text-decoration: underline; }
.verborgen { display: none !important; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-radius: 4px; }

/* ---- Kopf: die Wache ----------------------------------------------------- */

header {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 1.1rem;
    padding: 0 1.1rem; height: var(--kopf);
    background: linear-gradient(180deg, var(--karte) 0%, var(--flaeche) 100%);
    border-bottom: 1px solid var(--rand);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
/* Die Lightbar: ein Hauch Rot und Blau, mehr nicht. */
header::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg,
        rgba(207,88,80,.85) 0%, rgba(207,88,80,.15) 28%,
        rgba(201,164,92,.5) 50%,
        rgba(77,143,209,.15) 72%, rgba(77,143,209,.85) 100%);
}

.marke { display: flex; flex-direction: column; line-height: 1.12; padding-left: 40px; position: relative; }
.marke::before {
    content: "";
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 30px; height: 36px;
    /* Justins Wappen (02.09.) statt des gezeichneten Sterns - die
       Datei ist aus seinem Aufnaeher freigestellt (logo-lspd.png).
       Seit 25.09. aus dem Markenordner DER Fraktion: der Rueckfall
       zeigt weiter auf dieselbe Datei, das LSPD sieht also unveraendert
       aus. */
    background: var(--marke-wappen, url("/pd/logo-lspd.png?v=2"))
                center/contain no-repeat;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.55));
}
.marke b {
    color: var(--gold); font-size: 17px; font-weight: 700;
    letter-spacing: .22em;
}
.marke i {
    font-style: normal; font-size: 9px; color: var(--grau);
    letter-spacing: .2em; text-transform: uppercase;
    max-width: 250px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

nav.tabs { display: flex; gap: 2px; margin-left: .8rem; height: 100%; }
nav.tabs button {
    background: none; border: 0; border-bottom: 2px solid transparent;
    color: var(--grau); font: inherit; font-size: 11.5px; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase;
    padding: 0 .85rem; cursor: pointer; height: 100%;
    transition: color .12s ease;
}
nav.tabs button:hover { color: var(--goldhell); }
nav.tabs button.an { color: var(--hell); border-bottom-color: var(--gold); }
nav.tabs button .zahl {
    display: inline-block; min-width: 17px; margin-left: .4rem;
    padding: 0 4px; border-radius: 9px; font-size: 10px; line-height: 16px;
    letter-spacing: 0;
    background: var(--rand); color: var(--text); text-align: center;
    vertical-align: 1px;
}
nav.tabs button .zahl.warn {
    background: var(--rot); color: #fff;
    box-shadow: 0 0 8px rgba(207,88,80,.55);
}

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: .85rem; }

.puls { display: flex; align-items: center; gap: .45rem; font-size: 12px; color: var(--grau); }
.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--grau); }
.punkt.gut      { background: var(--gruen); box-shadow: 0 0 7px rgba(83,168,120,.7); }
.punkt.schlecht { background: var(--rot);   box-shadow: 0 0 7px rgba(207,88,80,.7); }
.punkt.mittel   { background: var(--gelb);  box-shadow: 0 0 7px rgba(211,165,78,.6); }

.ich { display: flex; align-items: center; gap: .55rem; }
/* EIN Mass fuer jedes Personenbild: --av. Foto und Buchstabe sind damit
   aussen gleich gross - box-sizing sorgt dafuer, dass Rahmen und
   Schimmer des Buchstabens nach INNEN gehen und nicht 2px obendrauf
   legen. Justin: "dass die alle gleich gross sind egal ob ring namen
   oder sonst was". */
.ich img, .av, .avatar {
    width: var(--av, 28px); height: var(--av, 28px);
    box-sizing: border-box; border-radius: 50%; flex: none;
}
.avatar, .ich img {
    background: var(--karte2); border: 1px solid var(--golddun);
    box-shadow: 0 0 0 1px rgba(201,164,92,.25);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--gold); flex: none;
}
.avatar { font-size: calc(var(--av, 28px) * .4); }
/* Auch am RING, nicht nur am Bild: der Ring ist das Umfeld, aus dem
   --av gelesen wird. Stand es nur innen, war der Ring 28px gross und
   das Bild darin 34px - der Kreis sass sichtbar daneben. */
.av.gross, .avatar.gross, .u-ring.gross { --av: 34px; }
.ich .name  { color: var(--hell); font-size: 13px; }
.ich .rolle { font-size: 9.5px; color: var(--gold); text-transform: uppercase; letter-spacing: .14em; }

/* ---- Grundgeruest --------------------------------------------------------- */

main { padding: 1.1rem; max-width: 1440px; margin: 0 auto; }
.ansicht { display: none; }
.ansicht.an { display: block; animation: erscheinen .16s ease-out; }
@keyframes erscheinen { from { opacity: 0; transform: translateY(4px); } }

.reihe { display: flex; gap: .8rem; align-items: flex-start; flex-wrap: wrap; }
.spalten { display: grid; gap: 1rem; }
.k2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.k3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.k4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.karte {
    background: linear-gradient(180deg, var(--karte2) 0%, var(--karte) 100%);
    border: 1px solid var(--rand);
    border-radius: 9px; overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 4px 14px rgba(0,0,0,.25);
}
.karte > h2 {
    font-size: 10.5px; font-weight: 700; letter-spacing: .2em;
    text-transform: uppercase; color: var(--gold);
    padding: .75rem .95rem; border-bottom: 1px solid var(--rand);
    background: rgba(201,164,92,.035);
    display: flex; align-items: center; gap: .6rem;
}
.karte > h2::before {
    content: ""; width: 13px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--gold), rgba(201,164,92,.2));
    flex: none;
}
.karte > h2 .rechts { margin-left: auto; display: flex; gap: .4rem; letter-spacing: 0; text-transform: none; color: var(--grau); font-weight: 400; }
.karte .inhalt { padding: .95rem; }
.karte .inhalt.eng { padding: 0; }

/* ---- Kacheln: die Lagezahlen ---------------------------------------------- */

.kachel { padding: 1rem 1.1rem; position: relative; }
.kachel::after {
    content: ""; position: absolute; left: 1.1rem; right: 55%; bottom: .8rem;
    height: 2px; border-radius: 1px;
    background: linear-gradient(90deg, rgba(201,164,92,.55), transparent);
}
.kachel .wert {
    font-size: 28px; font-weight: 300; color: var(--hell); line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.kachel .titel {
    font-size: 10px; color: var(--grau); text-transform: uppercase;
    letter-spacing: .16em; margin-top: .4rem;
}
.kachel.warn .wert { color: var(--rot); text-shadow: 0 0 14px rgba(207,88,80,.35); }
.kachel.warn::after { background: linear-gradient(90deg, rgba(207,88,80,.6), transparent); }
.kachel.gut .wert { color: var(--gruen); }

/* ---- Knoepfe und Felder --------------------------------------------------- */

button, .knopf {
    background: var(--karte2); color: var(--text);
    border: 1px solid var(--randhell); border-radius: 6px;
    padding: .42rem .75rem; font: inherit; font-size: 12.5px;
    cursor: pointer; white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
button:hover, .knopf:hover {
    background: var(--karte2); color: var(--hell); border-color: var(--randhell);
}
button.haupt, .knopf.haupt {
    background: linear-gradient(180deg, #d7b26b 0%, #b8924a 100%);
    border-color: #8a6b32; color: #171207;
    font-weight: 700; font-size: 11.5px;
    letter-spacing: .09em; text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(201,164,92,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
button.haupt:hover { background: linear-gradient(180deg, #e4c07c 0%, #c49d52 100%); color: #171207; }
button.gefahr { border-color: #5c2f2c; color: #e59a93; }
button.gefahr:hover { background: var(--rotdun); border-color: #7c3e3a; color: #f4b6b0; }
button.klein { padding: .22rem .5rem; font-size: 11.5px; letter-spacing: 0; text-transform: none; }
button:disabled { opacity: .45; cursor: not-allowed; }

#dienst-knopf { border-radius: 999px; padding: .38rem .9rem; }

input, select, textarea {
    background: var(--grund); color: var(--text);
    border: 1px solid var(--rand); border-radius: 6px;
    padding: .45rem .6rem; font: inherit; font-size: 13px; width: 100%;
    transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,164,92,.14);
}
/* Der Platzhalter hing FEST auf #55617a - kein Schema, kein Regler,
   nichts. Gemessen 3,07 bis 3,38:1 auf dem Feldgrund: in allen 19
   Schemata unter der Schwelle von 4,5:1. Im Einstell-Ablauf war das die
   auffaelligste Sorte Schrift ueberhaupt, weil dort fast jedes Feld
   einen Platzhalter traegt.
   Jetzt am Schema: die stille Schrift, ein Stueck zum Feldgrund hin
   abgedunkelt - 4,87 bis 5,56:1, und noch sichtbar blasser als eine
   echte Eingabe. Zieht ein Betrachter "Text, still" um, zieht der
   Platzhalter mit. */
input::placeholder, textarea::placeholder {
    color: color-mix(in srgb, var(--grau) 86%, var(--grund));
}
textarea { resize: vertical; min-height: 70px; line-height: 1.45; }
label {
    display: block; font-size: 10px; color: var(--gold);
    text-transform: uppercase; letter-spacing: .14em; margin-bottom: .3rem;
    /* Volle Deckung. Bei 10px, Grossbuchstaben und .14em Sperrung ist
       jede weggenommene Deckung eine, die man beim Lesen merkt: .85
       kostete rund einen Punkt Kontrast (5,4-6,2 statt 6,4-7,3:1) und
       hat dafuer nichts gebracht - Beschriftungen sollen nicht
       zurueckhaltend sein, sie sagen, was in das Feld gehoert. */
}
.feld { margin-bottom: .7rem; }
.felder { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---- Tabellen: das Register ------------------------------------------------ */

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
    text-align: left; font-size: 10px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--grau); font-weight: 600;
    padding: .5rem .8rem .4rem; border-bottom: 1px solid var(--randhell);
    opacity: .7;
}
td { padding: .52rem .8rem; border-bottom: 1px solid #17202f; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .1s ease; }
tr.klickbar { cursor: pointer; }
tr.klickbar:hover td { background: rgba(201,164,92,.05); }
tr.klickbar:hover td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
td.rechts, th.rechts { text-align: right; }
td.zahl { font-variant-numeric: tabular-nums; }

/* ---- Marken ---------------------------------------------------------------- */

.marke-etikett, .etikett {
    display: inline-block; padding: .12rem .5rem; border-radius: 4px;
    font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
    font-weight: 600;
    background: var(--rand); color: var(--text); white-space: nowrap;
    border: 1px solid transparent;
}
.etikett.blau  { background: var(--blaudun); color: #9ec7ef; border-color: #1e3d61; }
.etikett.rot   { background: var(--rotdun);  color: #eda29b; border-color: #57282a; }
.etikett.gruen { background: #12301f;        color: #85d3a4; border-color: #1e4a30; }
.etikett.gelb  { background: #33270f;        color: #e2c07a; border-color: #4f3d1a; }
.etikett.lila  { background: #221d3b;        color: #b7abee; border-color: #37305c; }
.etikett.grau  { background: #1a2333;        color: var(--grau); border-color: #253046; }

.online  { color: var(--gruen); }

/* ---- Wer gerade IC ist (AP60) ------------------------------------------
   Ein Punkt, kein Wort: die Zeile traegt schon Nummer, Name und Stufe.
   Bewusst dieselbe Farbe wie der gruene Punkt im Streifenpool - es ist
   dieselbe Auskunft aus derselben Quelle, und zwei verschiedene Farben
   fuer dasselbe waeren eine Behauptung, es sei etwas anderes. */
/* ---- Gaeste auf der Tafel (AP62) --------------------------------------
   Ein Soldat sieht aus wie ein Officer - dieselbe Form, dieselbe Groesse,
   derselbe Griff. Unterschieden wird er durch den Rahmen in der Farbe
   SEINER Organisation und das Kuerzel davor, nicht durch eine eigene
   Bauform: er soll sich genauso anfassen lassen, und alles, was anders
   aussieht, laedt dazu ein, es auch anders zu bedienen. */
/* Eine Zeile im Gaeste-Pool, die man anfassen kann - und eine, die
   schon in einem Wagen sitzt und deshalb hier nur noch nachrichtlich
   steht. */
#l-gastpool .sitz[draggable="true"] { cursor: grab; }
#l-gastpool .sitz[draggable="true"]:active { cursor: grabbing; }
#l-gastpool .sitz.gewaehlt {
    outline: 2px solid var(--gold); outline-offset: -2px;
}
#l-gastpool .sitz-fest { opacity: .55; }
#l-gastpool .in-wagen { color: var(--hell); font-weight: 700; }

/* ---- Geteilte Officer-Leiste (AP64) -----------------------------------
   Justin: "mach wenn army welche frei sind dass sich das oben splittet
   bitte das ist ordentlicher". Nur dann - ohne Gaeste bleibt die Leiste
   unveraendert und kostet keine einzige zusaetzliche Zeile. */
.pool-block { display: grid; gap: .3rem; }
.pool-kopf {
    font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--stumm);
    display: flex; align-items: center; gap: .45rem;
    margin-top: .15rem;
}
.pool-kopf::after {
    content: ''; flex: 1 1 auto; height: 1px; background: var(--rand);
}
.pool-kopf.gast { color: var(--uf, #4d8fd1); }
.pool-kopf.gast::after {
    background: color-mix(in srgb, var(--uf, #4d8fd1) 35%, transparent);
}
.pool-kopf > span {
    order: 3; flex: none; padding: 0 .3rem; border-radius: 999px;
    font-size: 9px; color: var(--uf, var(--stumm));
    border: 1px solid color-mix(in srgb, var(--uf, #7e8899) 40%, transparent);
}
.pool-reihe { display: flex; flex-wrap: wrap; gap: .35rem; }

.crew-gast {
    border-color: color-mix(in srgb, var(--uf, #4d8fd1) 55%, transparent);
    background: color-mix(in srgb, var(--uf, #4d8fd1) 10%, var(--karte2, #121b2d));
}
.crew-gast .gk {
    font-style: normal; font-weight: 700; font-size: 10px;
    letter-spacing: .04em; opacity: .85;
    color: color-mix(in srgb, var(--uf, #4d8fd1) 55%, var(--hell));
}

/* Der Schalter fuer die Mitnutzung - er ist die erste Zeile der Karte
   und soll auch so aussehen: eine Aussage, kein Kaestchen unter vielen. */
/* ---- Gastzugaenge unter Personal (AP63) --------------------------------
   Nach Organisation gruppiert, mit einem farbigen Balken links: man soll
   auf einen Blick sehen, wo ein Block anfaengt und aufhoert, ohne die
   Ueberschriften zu lesen. */
/* Das Schild in der Schwebekarte eines Soldaten - dieselbe Stelle, an
   der ein Officer seinen Avatar traegt. Ein Gast hat keinen, und ein
   leerer Kreis saehe aus wie ein Ladefehler. */
.pf-gastschild {
    flex: none; align-self: center;
    padding: .3rem .5rem; border-radius: 7px;
    font-size: 11px; font-weight: 800; letter-spacing: .07em;
    color: var(--uf, #4d8fd1);
    border: 1px solid color-mix(in srgb, var(--uf, #4d8fd1) 55%, transparent);
    background: color-mix(in srgb, var(--uf, #4d8fd1) 14%, transparent);
}
/* In der Gastkarte darf der Wert umbrechen - Kennungen wie
   "VINEWOOD GRENZPOSTEN-1" sind laenger als eine halbe Karte, und
   abgeschnitten sind sie wertlos. */
.profilkarte .pf-zeile > b {
    text-align: right; white-space: normal; word-break: break-word;
    line-height: 1.3;
}
.profilkarte .pf-zeile > span { flex: none; }

.profilkarte .pf-fuss {
    padding: .5rem .7rem; margin-top: .5rem;
    border-top: 1px solid var(--rand);
    font-size: 11px; color: var(--stumm); line-height: 1.4;
}

/* ---- Gast-Akte (AP65) -------------------------------------------------- */
.ga-kopf {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem .85rem; margin-bottom: .8rem; border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--uf, #4d8fd1) 40%, var(--rand));
    background: color-mix(in srgb, var(--uf, #4d8fd1) 10%, var(--karte2));
}
.ga-kopf > div { flex: 1 1 auto; min-width: 0; display: grid; gap: .15rem; }
.ga-kopf b { color: var(--hell); }
.ga-kopf i { font-style: normal; font-size: 11.5px; color: var(--stumm); }
.ga-kopf .g-schild {
    flex: none; padding: .25rem .45rem; border-radius: 6px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
    color: var(--uf, #4d8fd1);
    border: 1px solid color-mix(in srgb, var(--uf, #4d8fd1) 55%, transparent);
}
.ga-stand { flex: none; font-size: 11.5px; color: var(--stumm);
    text-align: right; }
.ga-jetzt {
    padding: .55rem .75rem; margin-bottom: .8rem; border-radius: 8px;
    font-size: 12.5px;
    border: 1px solid color-mix(in srgb, var(--gruen) 35%, transparent);
    background: color-mix(in srgb, var(--gruen) 8%, var(--karte2));
}
.ga-zeile {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .32rem 0; border-bottom: 1px solid var(--rand);
    font-size: 12.5px;
}
.ga-zeile:last-child { border-bottom: 0; }
.ga-zeile > span { color: var(--stumm); }
.ga-zeile > b { color: var(--hell); text-align: right; min-width: 0; }
.ga-wagen { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }

.gl-block {
    border-left: 3px solid var(--uf, #4d8fd1);
    background: var(--karte2, #121b2d);
    border-radius: 8px; padding: .6rem .8rem; margin-bottom: .8rem;
}
.gl-block:last-child { margin-bottom: 0; }
.gl-kopf {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    padding-bottom: .5rem; margin-bottom: .4rem;
    border-bottom: 1px solid var(--rand);
}
.gl-kopf > b { color: var(--uf, #4d8fd1); }
.gl-zahl { margin-left: auto; font-size: 11px; color: var(--stumm); }
.gl-zeile {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem 0; border-bottom: 1px solid var(--rand2, rgba(255,255,255,.04));
}
.gl-zeile:last-child { border-bottom: 0; }
.gl-zeile.aus { opacity: .5; }
.gl-name { flex: 1 1 auto; min-width: 0; }
.gl-name .etikett { margin-left: .35rem; }
.gl-nach { flex: none; text-align: right; line-height: 1.4; }

.gast-schalter {
    display: flex; gap: .9rem; align-items: center;
    padding: .7rem .9rem; margin-bottom: .8rem; border-radius: 8px;
    border: 1px solid var(--rand); background: var(--karte2, #121b2d);
}
.gast-schalter > div { flex: 1 1 auto; min-width: 0; display: grid; gap: .2rem; }
.gast-schalter > button { flex: none; }
.gast-schalter.an {
    border-color: color-mix(in srgb, var(--gruen) 45%, transparent);
    background: color-mix(in srgb, var(--gruen) 8%, var(--karte2, #121b2d));
}

.ic-punkt {
    width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--gruen); box-shadow: 0 0 7px rgba(79,157,105,.75);
}
/* Der Name etwas heller - der Punkt allein geht in einer langen
   Aufstellung unter, umfaerben will man die ganze Zeile aber auch nicht. */
.u-zeile.ic > b, .div-zeile.ic > b { color: var(--hell); }

.ic-zahl {
    flex: none; padding: .05rem .35rem; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    color: var(--gruen); background: rgba(79,157,105,.12);
    border: 1px solid rgba(79,157,105,.4);
}
.offline { color: var(--grau); }
.stumm   { color: var(--grau); }
.klein   { font-size: 11.5px; }
.leer    { padding: 1.8rem; text-align: center; color: var(--grau); font-size: 13px; }

/* ---- Leitstelle: der Einsatztisch ------------------------------------------ */

.einsatz {
    border-left: 3px solid var(--rand);
    background: linear-gradient(90deg, rgba(255,255,255,.02), transparent 40%), var(--karte2);
    border-radius: 6px; padding: .65rem .8rem; margin-bottom: .55rem;
    cursor: pointer; transition: transform .1s ease, background .12s ease;
}
.einsatz:hover { background: var(--karte2); transform: translateX(2px); }
.einsatz.prio1 { border-left-color: var(--rot);  box-shadow: inset 0 0 24px rgba(207,88,80,.07); }
.einsatz.prio2 { border-left-color: var(--gelb); }
.einsatz.prio3 { border-left-color: var(--blau); }
.einsatz .kopf { display: flex; align-items: center; gap: .5rem; }
.einsatz .titel { color: var(--hell); font-weight: 600; }
.einsatz .unten { margin-top: .35rem; display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; font-size: 11.5px; color: var(--grau); }

/* ---- Der Einsatztisch, Stand 20.09. ---------------------------------------
   Justin: "Der Bereich der offenen Einsaetze Umranden in Rot evtl wie die
   anderen Bereiche / Aktive Felder in Gruen". Der KASTEN traegt die rote
   Kante (dieselbe Machart wie .wsp: eine Kante oben plus getoenter Rahmen),
   die einzelne ZEILE zeigt, ob schon jemand darauf faehrt: rot = offen,
   niemand drauf; gruen = laufend. Die alten prio-Klassen bleiben stehen,
   damit eine alte Ansicht nicht farblos wird - gemalt werden sie nicht mehr. */
.eins-karte {
    border-color: color-mix(in srgb, var(--rot) 45%, var(--rand));
    box-shadow: inset 0 2px 0 var(--rot), 0 4px 14px rgba(0,0,0,.25);
}
.eins-karte > h2 { border-bottom-color: color-mix(in srgb, var(--rot) 28%, var(--rand)); }
.eins-karte > h2::before { background: var(--rot); }

.einsatz.eins-offen  { border-left-color: var(--rot);   box-shadow: inset 0 0 24px rgba(207,88,80,.08); }
.einsatz.eins-laeuft { border-left-color: var(--gruen); box-shadow: inset 0 0 24px rgba(83,168,120,.09); }

/* Der Funkcode - das Erste, was man sieht. An der Stelle, an der bis
   heute das P1/P2/P3-Etikett hing. */
.eins-funk {
    flex: none; padding: .1rem .5rem; border-radius: 5px;
    font-size: 12.5px; font-weight: 800; letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    color: var(--gruen);
    background: color-mix(in srgb, var(--gruen) 16%, var(--karte2));
    border: 1px solid color-mix(in srgb, var(--gruen) 40%, transparent);
}
.eins-funk.leer-funk {
    color: var(--grau); font-weight: 600; letter-spacing: .02em;
    background: transparent; border-style: dashed;
    border-color: var(--rand);
}
/* Der Funkcode laesst sich anfassen, wenn man ihn setzen darf (23.09.).
   Der Stift steht NEBEN dem Code, nicht darueber: ein Kanal, der beim
   Zeigen die Ziffern wechselt, ist im Funkverkehr keine gute Idee. */
.eins-funk-auf { cursor: pointer; }
.eins-funk-auf:hover {
    border-color: var(--gold);
    color: color-mix(in srgb, var(--gold) 55%, var(--hell));
}
.eins-funk-stift {
    font-style: normal; font-size: 10px; margin-left: .3rem;
    opacity: .45; letter-spacing: 0;
}
.eins-funk-auf:hover .eins-funk-stift { opacity: 1; }

/* Der Kartenschnipsel im Einsatz: ein quadratisches Fenster auf
   karte.jpg, die Nadel auf dem markierten Punkt. Quadratisch, weil die
   Karte es ist - nur dann rechnet einSchnipsel() fuer beide Achsen mit
   derselben Formel (siehe app.js). */
.eins-schnipsel {
    position: relative; width: 100%; max-width: 260px; aspect-ratio: 1 / 1;
    margin-top: .7rem; border-radius: 10px; overflow: hidden; cursor: pointer;
    border: 1px solid var(--rand); background-color: var(--karte2);
    background-repeat: no-repeat;
}
.eins-schnipsel:hover { border-color: var(--gold); }
.es-nadel {
    position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
    border-radius: 50%; border: 2px solid rgba(10,15,24,.85);
    box-shadow: 0 0 0 2px rgba(255,255,255,.28), 0 0 12px rgba(0,0,0,.5);
}
.es-marke {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: .28rem .5rem; font-size: 11.5px; color: #e6ecf6;
    background: linear-gradient(transparent, rgba(8,12,20,.82) 45%);
    text-align: center;
}

.eins-nr { margin-left: auto; font-size: 11px; color: var(--grau); font-variant-numeric: tabular-nums; }
.eins-schloss { font-size: 11px; opacity: .75; }

.eins-knopf {
    padding: .1rem .45rem; border-radius: 5px; font-size: 11.5px;
    background: var(--karte); border: 1px solid var(--rand); color: var(--text);
    cursor: pointer; line-height: 1.5;
}
.eins-knopf:hover { border-color: var(--randhell); color: var(--hell); }
.eins-rein { margin-left: auto; }
.eins-rein.an {
    color: var(--gruen);
    border-color: color-mix(in srgb, var(--gruen) 45%, transparent);
    background: color-mix(in srgb, var(--gruen) 12%, var(--karte));
}
.eins-kennungen { margin-top: .45rem; display: flex; flex-wrap: wrap; gap: .3rem; }

/* ---- Sitzungen - der Besprechungsraum (22.09.) -----------------------------
   Dieselbe Machart wie eine Einsatzzeile, aber BLAU und ohne Zeiger: eine
   Sitzung ist kein Vorfall, den man aufschlaegt, sondern ein Raum, in den
   man hineingeht. Wo man das tut, steht als Knopf darin - die Zeile selbst
   ist nicht anklickbar, damit niemand versehentlich einer Besprechung
   beitritt, die ihn nichts angeht. */
.sz {
    border-left: 3px solid color-mix(in srgb, var(--blau) 70%, var(--rand));
    background: linear-gradient(90deg, rgba(255,255,255,.02), transparent 40%), var(--karte2);
    border-radius: 6px; padding: .65rem .8rem; margin-bottom: .55rem;
}
/* Sitzt man selbst drin, ist die Kante gruen - dieselbe Sprache wie beim
   laufenden Einsatz. */
.sz.sz-drin {
    border-left-color: var(--gruen);
    box-shadow: inset 0 0 24px rgba(83,168,120,.08);
}
.sz .kopf  { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sz .titel { color: var(--hell); font-weight: 600; }
.sz .unten {
    margin-top: .35rem; display: flex; align-items: center; gap: .65rem;
    flex-wrap: wrap; font-size: 11.5px; color: var(--grau);
}

/* Das Unit-Etikett vorne - die Farbe kommt aus dem Unit-Katalog und
   steht als --uf am Element. */
.sz-unit {
    flex: none; padding: .1rem .5rem; border-radius: 5px;
    font-size: 12px; font-weight: 800; letter-spacing: .06em;
    color: var(--uf, var(--blau));
    background: color-mix(in srgb, var(--uf, var(--blau)) 16%, var(--karte2));
    border: 1px solid color-mix(in srgb, var(--uf, var(--blau)) 42%, transparent);
}
.sz-unit.sz-unit-alle {
    color: var(--grau); font-weight: 700; letter-spacing: .02em;
    background: transparent; border-style: dashed; border-color: var(--rand);
}
/* Die laufende Uhr ganz rechts - sie tickt im Sekundentakt, also feste
   Ziffernbreite, sonst wackelt die Zeile. */
.sz-uhr {
    margin-left: auto; font-size: 11.5px; color: var(--grau);
    font-variant-numeric: tabular-nums;
}
.sz-start { font-weight: 600; color: var(--text); }
.sz-notiz {
    margin-top: .4rem; font-size: 11.5px; color: var(--grau);
    border-left: 2px solid var(--rand); padding-left: .55rem;
}
.sz .sz-rein { margin-left: auto; }
.sz .sz-rein.an {
    color: var(--gruen);
    border-color: color-mix(in srgb, var(--gruen) 45%, transparent);
    background: color-mix(in srgb, var(--gruen) 12%, var(--karte));
}
.sz .sz-zu:hover {
    color: var(--rot);
    border-color: color-mix(in srgb, var(--rot) 45%, transparent);
}
.sz-liste {
    margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .3rem;
    padding-top: .5rem; border-top: 1px solid var(--rand);
}
.sz-chip { cursor: default; }

/* ---- Flugscheine der ASD (23.09., zweiter Aufbau) --------------------------
   Die Sterne sind der Schein (die Discord-Rolle), die Zellen sind
   Antritte. Eine Zelle ist ein Knopf ohne Knopf-Optik - das Raster soll
   aussehen wie die Tabelle, aus der es kommt. */
.fl-sterne {
    color: #e8b93e; font-size: 14px; letter-spacing: .12em;
    text-shadow: 0 0 8px rgba(232, 185, 62, .35); white-space: nowrap;
}
.fl-zelle {
    background: transparent; border: 1px dashed transparent;
    border-radius: 5px; padding: .1rem .3rem; cursor: pointer;
    line-height: 1.4;
}
.fl-zelle:hover { border-color: var(--randhell); }
.fl-frei { color: var(--grau); opacity: .55; }
.fl-gruppe td {
    background: var(--karte2); color: var(--hell); font-weight: 700;
    font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
    padding: .35rem .6rem; border-top: 2px solid var(--rand);
}
.fl-intern {
    font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
    color: var(--gelb); border: 1px solid color-mix(in srgb, var(--gelb) 45%, transparent);
    border-radius: 4px; padding: 0 .25rem; vertical-align: middle;
}

/* Heute geschlossen - eine Zeile je Einsatz statt einer Tabelle. */
.eins-zu-liste { display: flex; flex-direction: column; }
.eins-zu {
    display: flex; align-items: center; gap: .55rem; cursor: pointer;
    padding: .42rem .8rem; border-bottom: 1px solid var(--rand);
    font-size: 12px;
}
.eins-zu:last-child { border-bottom: 0; }
.eins-zu:hover { background: var(--karte2); }
.eins-zu-zeit { color: var(--grau); font-variant-numeric: tabular-nums; flex: none; }
.eins-zu-titel { color: var(--hell); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eins-zu .etikett { margin-left: auto; flex: none; }
.eins-weg {
    flex: none; background: none; border: 0; cursor: pointer; padding: 0 .2rem;
    color: var(--grau); font-size: 13px; line-height: 1;
}
.eins-weg:hover { color: var(--rot); }

/* Die Einsatzmarke am Code-Platz einer Streife. Sie darf lang sein,
   aber nicht die Karte sprengen. */
.e-karte .code.eins-marke {
    letter-spacing: .03em; max-width: 13rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.e-funk {
    flex: none; font-size: 10px; font-weight: 800; letter-spacing: .06em;
    padding: .08rem .35rem; border-radius: 4px;
    color: var(--gruen);
    background: color-mix(in srgb, var(--gruen) 15%, var(--karte2));
    border: 1px solid color-mix(in srgb, var(--gruen) 38%, transparent);
    font-variant-numeric: tabular-nums;
}

/* Ziehziel: eine Einsatzzeile, auf der eine Einheit landen darf. */
.einsatz.drop-ziel {
    border-left-color: var(--gruen);
    outline: 2px dashed color-mix(in srgb, var(--gruen) 60%, transparent);
    outline-offset: -2px;
}

.einheit {
    display: flex; align-items: center; gap: .55rem;
    padding: .5rem .65rem; border-radius: 6px; background: var(--karte2);
    margin-bottom: .4rem; border-left: 3px solid var(--rand);
}
.einheit.s-einsatzbereit { border-left-color: var(--gruen); }
.einheit.s-anfahrt       { border-left-color: var(--gelb); }
.einheit.s-vor_ort       { border-left-color: var(--blau); }
.einheit.s-gebunden      { border-left-color: var(--lila); }
.einheit.s-notruf        { border-left-color: var(--rot); animation: blinken 1.1s ease-in-out infinite; }
.einheit.s-pause, .einheit.s-ausser_dienst { opacity: .5; }
.einheit .kennung {
    font-weight: 700; color: var(--hell);
    font-variant-numeric: tabular-nums; letter-spacing: .05em;
}
@keyframes blinken { 50% { background: #33191d; box-shadow: 0 0 14px rgba(207,88,80,.25); } }

.journal { max-height: 340px; overflow-y: auto; }
.journal .zeile {
    display: flex; gap: .6rem; padding: .38rem 0;
    border-bottom: 1px solid #17202f; font-size: 12.5px;
}
.journal .zeit { color: var(--gold); opacity: .75; font-variant-numeric: tabular-nums; flex: none; font-size: 11.5px; }

/* ---- Dienstplan: die Wachtafel --------------------------------------------- */

.plan { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tag { background: var(--karte); border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; }
.tag > h3 {
    font-size: 11px; color: var(--hell); padding: .5rem .7rem;
    background: var(--karte2); border-bottom: 1px solid var(--rand);
    display: flex; gap: .5rem; align-items: baseline;
    text-transform: uppercase; letter-spacing: .1em;
}
.tag > h3 span { color: var(--grau); font-weight: 400; font-size: 10.5px; text-transform: none; letter-spacing: 0; }
.tag.heute > h3 {
    background: linear-gradient(90deg, rgba(201,164,92,.16), rgba(201,164,92,.05));
    color: var(--goldhell); border-bottom-color: var(--golddun);
}
.schicht { padding: .55rem .7rem; border-bottom: 1px solid #17202f; }
.schicht:last-child { border-bottom: 0; }
.schicht.klickbar:hover { background: rgba(201,164,92,.05); cursor: pointer; }
.schicht .zeit { color: var(--hell); font-variant-numeric: tabular-nums; font-weight: 600; }
.schicht .leute { margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.balken { height: 3px; background: var(--rand); border-radius: 2px; margin-top: .45rem; overflow: hidden; }
.balken i { display: block; height: 100%; background: var(--gruen); }
.balken i.knapp { background: var(--gelb); }
.balken i.leer  { background: var(--rot); }

/* ---- Schublade: die Fallakte ------------------------------------------------ */

.schublade {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%);
    background: linear-gradient(180deg, var(--karte) 0%, var(--flaeche) 100%);
    border-left: 1px solid var(--randhell);
    box-shadow: -14px 0 40px rgba(0,0,0,.55); z-index: 60;
    display: flex; flex-direction: column;
    border-radius: 14px 0 0 14px;
    transform: translateX(100%);
    /* Schneller als vorher (.18s) und mit einem Hauch Schwung am Ende -
       die Schublade geht im Betrieb dutzende Male auf. */
    transition: transform .13s cubic-bezier(.22, .9, .3, 1);
}
/* Fuer das ganze Profil: das rechnet mit zwei Spalten, und in 560px
   staenden die Balken uebereinander statt nebeneinander. Die Breite
   haengt am Inhalt und wird beim Schliessen wieder abgeraeumt.

   MIT `html[data-geraet]` DAVOR, und das ist kein Zierrat: weiter unten
   steht `html[data-geraet="tisch"] .schublade { width: min(560px,100%) }`,
   und die staeche ein blosses `.schublade.breit` aus - die Schublade
   bliebe schmal, ohne dass man saehe warum. Gemessen, nicht geraten.

   `min(…, 100%)` haelt es auf schmalen Schirmen von selbst im Rahmen;
   auf dem Handy ist die Schublade ohnehin ein Blatt von unten. */
html[data-geraet] .schublade.breit,
.schublade.breit { width: min(1080px, 100%); }
.schublade::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(180deg, var(--gold), transparent 60%);
    opacity: .8;
}
.schublade.auf { transform: none; }

/* ---- Der Griff an der Kante ------------------------------------------
   Justin: "sodass die leute vernünftig arbeiten können".

   Acht Pixel breit, aber der Zeiger findet ihn auch daneben: die
   Trefferflaeche geht ueber ::before nach beiden Seiten hinaus, ohne
   dass der Streifen selbst dicker aussieht. Sichtbar wird er erst beim
   Darueberfahren - eine Kante, die immer leuchtet, ist eine Kante, die
   man immer sieht. */
.s-griff {
    position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
    cursor: ew-resize; z-index: 2; touch-action: none;
}
.s-griff::before {
    content: ''; position: absolute; left: -4px; right: -4px;
    top: 0; bottom: 0;
}
.s-griff::after {
    content: ''; position: absolute; left: 2px; top: 50%;
    width: 3px; height: 46px; margin-top: -23px; border-radius: 3px;
    background: var(--gold); opacity: 0; transition: opacity .12s ease;
}
.s-griff:hover::after { opacity: .75; }
.schublade.zieht .s-griff::after { opacity: 1; }
/* Waehrend des Ziehens NICHT mitanimieren - die Schublade wuerde dem
   Zeiger hinterherlaufen statt an ihm zu haengen. */
.schublade.zieht { transition: none; user-select: none; }

/* Auf schmalen Schirmen gibt es nichts zu ziehen: die Schublade ist
   dort ohnehin so breit wie alles. */
@media (max-width: 760px) {
    .s-griff { display: none; }
}
.schublade > header {
    position: static; height: auto; padding: .9rem 1.1rem;
    display: flex; align-items: flex-start; gap: .7rem;
    background: none; box-shadow: none;
    border-bottom: 1px solid var(--golddun);
}
.schublade > header::before { display: none; }
.schublade > header h2 { font-size: 15px; color: var(--hell); letter-spacing: .02em; }
.schublade > header .zu { margin-left: auto; }
.schublade .rumpf { padding: 1.05rem; overflow-y: auto; flex: 1; }
.dunkel {
    position: fixed; inset: 0; background: rgba(4,7,13,.62); z-index: 50;
    opacity: 0; pointer-events: none; transition: opacity .13s ease-out;
}
.dunkel.auf { opacity: 1; pointer-events: auto; }

dl.paare { display: grid; grid-template-columns: auto 1fr; gap: .32rem .9rem; font-size: 13px; }
dl.paare dt { color: var(--grau); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; padding-top: .1rem; }
dl.paare dd { color: var(--text); }

/* ---- Anmeldung: das Tor ----------------------------------------------------- */

.tor { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.tor .karte {
    max-width: 27.5rem; width: 100%;
    border-color: var(--golddun);
    box-shadow: 0 0 0 1px rgba(201,164,92,.12), 0 0 60px rgba(201,164,92,.06), var(--schatten);
}
.tor .inhalt { padding: 2.1rem 1.8rem 1.9rem; text-align: center; }
.tor .inhalt::before {
    content: "";
    display: block; width: 88px; height: 88px; margin: 0 auto 1.1rem;
    background: var(--marke-wappen, url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cpath%20d%3D%22M60.0%208.0%20L74.3%2030.3%20L100.7%2027.6%20L92.2%2052.7%20L110.7%2071.6%20L85.8%2080.6%20L82.6%20106.9%20L60.0%2093.0%20L37.4%20106.9%20L34.2%2080.6%20L9.3%2071.6%20L27.8%2052.7%20L19.3%2027.6%20L45.7%2030.3%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23c9a45c%22%20stroke-width%3D%224.0%22%20stroke-linejoin%3D%22round%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2218%22%20fill%3D%22none%22%20stroke%3D%22%23c9a45c%22%20stroke-width%3D%223.2%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2225%22%20fill%3D%22none%22%20stroke%3D%22%23c9a45c%22%20stroke-width%3D%222.0%22%20opacity%3D%22.5%22/%3E%3C/svg%3E"))
                center/contain no-repeat;
    filter: drop-shadow(0 0 14px rgba(201,164,92,.35));
}
.tor h1 {
    font-size: 16px; color: var(--hell); margin-bottom: .2rem;
    letter-spacing: .3em; text-transform: uppercase; font-weight: 700;
}
.tor h1::after {
    /* Der Wahlspruch DIESER Fraktion. Ohne eigene Angabe bleibt
       der des LSPD stehen - Einstellung `fraktion_motto`. */
    content: var(--fraktion-motto, "Obey & Survive");
    display: block; margin-top: .45rem;
    font-size: 10.5px; font-weight: 400; font-style: italic;
    letter-spacing: .28em; text-transform: uppercase; color: var(--gold);
}
.tor p { color: var(--grau); line-height: 1.6; margin: 1rem 0 1.4rem; font-size: 13px; }
.tor .discord {
    display: inline-flex; align-items: center; gap: .55rem;
    background: #5865f2; border-color: #5865f2; color: #fff;
    padding: .65rem 1.25rem; font-size: 13.5px; font-weight: 600;
    letter-spacing: .02em; text-transform: none; border-radius: 7px;
    box-shadow: 0 4px 16px rgba(88,101,242,.35);
}
.tor .discord:hover { background: #6b76f5; color: #fff; }

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

#meldung {
    position: fixed; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
    animation: meldungAuf .18s ease-out;
    background: var(--karte2); border: 1px solid var(--randhell);
    border-radius: 7px; padding: .65rem 1.05rem; z-index: 90;
    box-shadow: var(--schatten); font-size: 13px; max-width: 90vw;
}
#meldung.fehler { border-color: #6a3531; color: #f0aca5; background: #241417; }
#meldung.gut    { border-color: #2d5a3d; color: #9adcb4; background: #12231a; }
/* Weder gut noch schlecht: "3 verschoben, 2 gesperrt stehengeblieben". */
#meldung.warnung { border-color: #5c4520; color: #e2c07a; background: #241d10; }

@media (max-width: 760px) {
    header { height: auto; flex-wrap: wrap; padding: .55rem .7rem .0; gap: .6rem; }
    nav.tabs { order: 3; width: 100%; overflow-x: auto; margin-left: 0; height: auto; }
    nav.tabs button { padding: .65rem .6rem; }
    body::after { width: 420px; height: 420px; right: -120px; bottom: -140px; }
    .marke { padding-left: 34px; }
    .marke::before { width: 27px; height: 27px; }
}

/* ---- Einheitentafel: Reviere und Besatzung --------------------------------- */

.wache { margin-bottom: 1rem; }
.wache-kopf {
    display: flex; align-items: center; gap: .5rem;
    font-size: 10px; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--grau);
    padding: .2rem .1rem .45rem;
}
.wpunkt { width: 7px; height: 7px; border-radius: 50%; background: var(--rand); flex: none; }
.wpunkt.an { background: var(--blau); box-shadow: 0 0 7px rgba(77,143,209,.6); }
.wzahl {
    margin-left: auto; padding: .1rem .5rem; border-radius: 4px;
    font-size: 9.5px; letter-spacing: .08em;
    background: var(--blaudun); color: #9ec7ef; border: 1px solid #1e3d61;
}

.e-karte {
    border: 1px solid var(--rand); border-left-width: 3px;
    border-radius: 7px; background: var(--karte2);
    padding: .5rem .65rem .45rem; margin-bottom: .45rem;
    cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.e-karte:hover { background: var(--karte2); }
.e-karte.unbesetzt { background: var(--karte); opacity: .8; }
.e-karte.s-einsatzbereit { border-color: #1e4a30; border-left-color: var(--gruen);
    background: linear-gradient(90deg, rgba(83,168,120,.06), transparent 55%), var(--karte2); }
.e-karte.s-anfahrt  { border-left-color: var(--gelb); }
.e-karte.s-vor_ort  { border-left-color: var(--blau); }
.e-karte.s-gebunden { border-left-color: var(--lila); }
.e-karte.s-notruf   { border-color: #57282a; border-left-color: var(--rot);
    animation: blinken 1.1s ease-in-out infinite; }

/* Die Beweisliste in der IA-Schublade. Ein Link je Zeile, und lange
   Links duerfen umbrechen - sonst schieben sie die Schublade breit. */
.ia-beweise { list-style: none; margin: .2rem 0 0; padding: 0;
    display: flex; flex-direction: column; gap: .3rem; }
.ia-beweise li { font-size: 12.5px; line-height: 1.45;
    overflow-wrap: anywhere; }

/* Der goldene Ring, wenn "zu meiner Streife" hierher gesprungen ist.
   outline statt animation: .e-karte.s-notruf blinkt, und eine zweite
   Animation auf derselben Karte haette das Blinken verdraengt. */
.e-karte.e-hebe {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 16%, transparent);
}

.e-zeile { display: flex; align-items: center; gap: .5rem; }
.e-name { font-weight: 700; color: var(--hell); letter-spacing: .04em;
    font-variant-numeric: tabular-nums; }
.e-rechts { margin-left: auto; display: flex; align-items: center; gap: .4rem; }

.code {
    padding: .12rem .55rem; border-radius: 5px;
    font-size: 10px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; border: 1px solid transparent;
    font-variant-numeric: tabular-nums;
    color: var(--cc, var(--text));
    background: color-mix(in srgb, var(--cc, var(--text)) 16%, var(--karte2));
    border-color: color-mix(in srgb, var(--cc, var(--text)) 35%, transparent);
}
.code.notruf { position: relative; }
.code.notruf::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; box-shadow: 0 0 14px rgba(207,88,80,.55);
    animation: glut 1.3s ease-in-out infinite;
}
.code.gruen { background: #12301f; color: #85d3a4; border-color: #1e4a30; }
.code.gelb  { background: #33270f; color: #e2c07a; border-color: #4f3d1a; }
.code.blau  { background: var(--blaudun); color: #9ec7ef; border-color: #1e3d61; }
.code.lila  { background: #221d3b; color: #b7abee; border-color: #37305c; }
.code.grau  { background: #1a2333; color: var(--grau); border-color: #253046; }
.code.rot   { background: var(--rotdun); color: #eda29b; border-color: #57282a;
    box-shadow: 0 0 10px rgba(207,88,80,.35); }

.e-plus {
    width: 26px; height: 26px; padding: 0; border-radius: 7px;
    font-size: 15px; line-height: 1; color: var(--gold);
    border-color: var(--golddun); background: rgba(201,164,92,.06);
}
.e-plus:hover { background: rgba(201,164,92,.16); border-color: var(--gold); color: var(--goldhell); }

.e-crew, .pool { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.pool { padding: .1rem .1rem .3rem; }
.ohne { color: #55617a; font-size: 11.5px; font-style: italic; letter-spacing: .06em; }

.crew {
    --av: 20px;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: 0 .5rem 0 .28rem; border-radius: 999px;
    background: #0e1524; border: 1px solid var(--rand);
    font-size: 11.5px; white-space: nowrap;
    /* FESTE Hoehe: sonst bestimmt der hoechste Inhalt die Zeile, und ein
       Chip mit Ring, langem Namen oder einem Abzeichen mehr war
       groesser als der daneben. */
    height: calc(var(--av) + .55rem);
    box-sizing: border-box; line-height: 1;
}
.crew .cn b { color: var(--goldhell); font-weight: 700; letter-spacing: .02em; }
.crew.da { border-color: #1e4a30; }
.crew.da .cn { color: var(--hell); }

/* Am Bereich, aber nicht im Spiel. Bewusst KEIN Gruen: der gruene Rand
   heisst "sofort einsatzbereit", und das waere hier gelogen. Ein
   ruhiges Blau sagt "da, aber nicht auf der Strasse". */
/* Eingeladen, aber noch ohne Antwort (Termin-Einladungen, 23.09.).
   Gestrichelt und blass: die Person GEHOERT zum Termin, steht aber
   noch nicht dafuer ein - ein voller Chip wie bei den Zusagen haette
   den Termin besetzter aussehen lassen, als er ist. */
.crew.offen {
    border-style: dashed; border-color: #3a4560;
    opacity: .75;
}
.crew.offen .cn { color: #9aa6bd; }
.k-geladen { margin-top: .45rem; }
.k-geladen .k-crew { margin-top: .2rem; }

.crew.am-bereich { border-color: #2a3f5c; }
.crew.am-bereich .cn { color: var(--text); }
.crew .rk {
    font-style: normal; font-size: 10px; font-weight: 700;
    letter-spacing: .1em; padding: .06rem .3rem; border-radius: 3px;
    background: var(--blaudun); color: #9ec7ef;
}
.crew a { color: #55617a; font-size: 11px; text-decoration: none; padding: 0 .1rem; }
.crew a:hover { color: var(--rot); text-decoration: none; }
/* Deckname: aktueller IC-Name aus der Presence, wenn er vom Dienstnamen
   abweicht - nur Anzeige, damit die Leitstelle weiss, wer wer ist. */
.cn .deck {
    font-style: normal; font-size: 10px; color: #8a94ac;
    margin-left: .35rem; letter-spacing: .03em;
}

.wahl-liste { display: flex; flex-direction: column; gap: .35rem; }
.crew-wahl {
    display: flex; align-items: center; gap: .6rem; width: 100%;
    text-align: left; padding: .45rem .6rem;
}
.crew-wahl { --av: 24px; }

/* ---- Dispatch-Brett --------------------------------------------------------- */

.codes-kopf { display: flex; align-items: flex-start; gap: 1rem;
    flex-wrap: wrap; padding: .8rem .95rem .3rem; }
/* Die Kennung im Text kann lang sein - der Knopf darf dafuer nicht die
   halbe Kopfzeile fressen. */
#l-zumir { max-width: 48vw; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.codes-titel { font-size: 15px; font-weight: 700; color: var(--hell); letter-spacing: .02em; }
.codes-leiste { display: flex; flex-wrap: wrap; gap: .45rem; padding: .55rem .95rem .85rem; }

.code-pille {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .34rem .8rem; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
    background: #0e1524; border: 1px solid var(--rand); color: var(--text);
}
.code-pille .cp { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.code-pille:hover { border-color: currentColor; background: #131c2e; }
.code-pille.an {
    border-color: currentColor;
    box-shadow: 0 0 0 1px currentColor, 0 0 12px -2px currentColor;
    background: #131c2e;
}

.tipp {
    font-size: 12px; color: var(--blau); margin: 0 0 .7rem .2rem;
}
.tipp::before { content: "●  "; font-size: 9px; vertical-align: 2px; }
.tipp b { color: var(--goldhell); font-weight: 600; }

#l-pool { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 2.4rem; }
#l-pool.drop-ziel { outline: 2px dashed var(--rot); outline-offset: 4px; border-radius: 6px; }
.pool-chip { cursor: grab; padding: .28rem .6rem .28rem .24rem; }
.pool-chip:active { cursor: grabbing; }
.crew.gewaehlt,
.pool-chip.gewaehlt {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 0 14px -2px rgba(201,164,92,.8);
}

/* Das Zeichen "alle waehlen" - zweimal dasselbe, beide Male am Rand.

   Justin, 30.08.: "mach den knopf anders bitte irgendwie nur eine sache
   am rand oder so, etwas dezenter". Vorher stand hier ein beschrifteter
   Knopf MITTEN in der Chipreihe ("alle 27") - zwischen lauter Menschen
   das Auffaelligste auf der Karte. Jetzt: kein Rand, kein Grund, nur das
   Zeichen, und das auch nur halb sichtbar, bis man hinfaehrt.

   Die Zahl steht im Tipp. Sie gehoert nicht in eine Zeile, die man
   fuenfzigmal untereinander sieht. */
.wahlalle {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .18rem .3rem; margin: 0;
    border: none; background: none; border-radius: 6px;
    color: var(--grau); opacity: .5; line-height: 0; cursor: pointer;
    transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.wahlalle:hover:not(:disabled) {
    opacity: 1; color: var(--goldhell);
    background: rgba(255,255,255,.05); border-color: transparent;
}
.wahlalle:disabled { opacity: .16; cursor: not-allowed; }
.wahlalle.an { opacity: 1; color: var(--goldhell); }

/* An der Einheit noch eine Spur stiller: dort steht es in JEDER Zeile,
   und was in jeder Zeile steht, muss leiser sein als das, was einmal
   oben steht. Sichtbar wird es beim Darueberfahren der Karte. */
.wahlalle.klein-rand { padding: .1rem .15rem; opacity: .26; }
.e-karte:hover .wahlalle.klein-rand { opacity: .62; }
.wahlalle.klein-rand:hover, .e-karte:hover .wahlalle.klein-rand:hover,
.wahlalle.klein-rand.an { opacity: 1; }

/* Drei, vier Revier-Spalten nebeneinander */
.wsp {
    background: linear-gradient(180deg, var(--karte2) 0%, var(--karte) 100%);
    border: 1px solid var(--rand); border-radius: 10px;
    padding: .7rem .7rem .5rem;
    box-shadow: inset 0 2px 0 var(--wf), 0 4px 14px rgba(0,0,0,.25);
}
.wkopf {
    display: flex; align-items: center; gap: .6rem;
    padding: .35rem .35rem .65rem;
    border-bottom: 1px solid var(--rand); margin-bottom: .6rem;
}
.wschild {
    width: 34px; height: 34px; border-radius: 9px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--wf);
    background: color-mix(in srgb, var(--wf) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--wf) 40%, transparent);
}
.wname { line-height: 1.15; min-width: 0; }
.wname b {
    display: block; color: var(--wf); font-size: 13.5px;
    letter-spacing: .12em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wname i { font-style: normal; font-size: 10px; color: var(--grau); }
.wzaehler { margin-left: auto; text-align: right; line-height: 1.1; }
.wzaehler b { font-size: 20px; font-weight: 700; color: var(--hell); font-variant-numeric: tabular-nums; }
.wzaehler span { color: var(--grau); font-size: 12px; }
.wzaehler i {
    display: block; font-style: normal; font-size: 10px; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: var(--grau);
}
.wzaehler i.duenn { color: var(--gelb); }

.sitz {
    display: flex; align-items: center; gap: .5rem;
    background: #0e1524; border: 1px solid var(--rand); border-radius: 8px;
    padding: .45rem .55rem; margin-bottom: .3rem; font-size: 12px;
}
.sitz .cn b { color: var(--goldhell); }
/* Zwei Reviere, EIN Leitstellen-Platz: das Buendel (.wgr) spannt seine
   Spalten im Brett-Raster (grid-column: span N, N als --wgn) - "auch
   optisch" (Justin, 07.09.). Die inneren Spalten sind ein eigenes
   Raster, damit sie exakt so breit laufen wie ihre Nachbarn.

   Der gemeinsame Sitz hing hier bis zum 16.09. als Balken DARUEBER
   (.wgr-sitz). Er ist jetzt ein eigener Block (.ls-sitze, ganz unten) -
   ein eigenes Buehnen-Feld, das man einzeln legen kann. */
.wgr { grid-column: span var(--wgn, 2); display: flex;
       flex-direction: column; min-width: 0; }
.wgr-spalten {
    flex: 1; display: grid; gap: calc(1rem * var(--ls-eng, 1));
    grid-template-columns: repeat(var(--wgn, 2), minmax(0, 1fr));
}
.wgr-spalten > .wsp { display: flex; flex-direction: column; min-width: 0; }
.wgr-spalten > .wsp > :last-child { margin-bottom: 0; }
/* Die EINE Verbund-Spalte ist so breit wie die ganze Tafel - als
   flex-Spalte wuerden die Karten absurd breit. Also ein Raster: die
   Karten laufen in so vielen Spalten, wie Platz ist; Wachen-Kopf,
   Typ-Kopfzeilen und "alle besetzt" spannen drueber. */
.wgr-spalten > .wsp.wsp-verbund {
    display: grid; align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    column-gap: calc(1rem * var(--ls-eng, 1));
}
/* Die Typ-Koepfe spannen ueber alle Kartenspalten. DESCENDANT, nicht
   `>`: seit jede Art in einem `.typ-block` liegt (der selbst
   `display: contents` ist), sind sie Enkel im Markup und trotzdem
   Raster-Kinder. */
.wsp.wsp-verbund > .wkopf, .wsp.wsp-verbund .wache-kopf,
.wsp.wsp-verbund .ohne { grid-column: 1 / -1; }
/* Der Kasten um eine Art ist ueberall unsichtbar - die Tafel bleibt,
   wie sie war. Nur wo eine Spalte ihre Arten nebeneinander legen soll,
   wird er zum echten Block (siehe #l-brett-eigen). */
.typ-block { display: contents; }
.wsp > .typ-block:last-child > :last-child { margin-bottom: 0; }
@media (max-width: 1100px) {
    .wgr-spalten { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
/* Am Finger und im engen Fenster: eine Spalte, kein Spannen - sonst
   legte span 2 im einspaltigen Raster eine zweite Spalte an (dieselbe
   Falle wie bei .felder im Bogen). */
@media (max-width: 760px) {
    .wgr { grid-column: auto; }
    .wgr-spalten { grid-template-columns: 1fr; }
}
html[data-geraet="handy"] #a-leitstelle .wgr,
html[data-eng] #a-leitstelle .wgr { grid-column: auto; }
html[data-geraet="handy"] #a-leitstelle .wgr-spalten,
html[data-eng] #a-leitstelle .wgr-spalten { grid-template-columns: 1fr; }
.sitz-raus { margin-left: auto; padding: .15rem .5rem; border-radius: 6px; }
/* Der Leitstellen-Knopf traegt die Signalfarbe - die einzige Farbe im
   Bereich, die nicht Messing ist, und deshalb im Aussehen frei
   waehlbar. Die Schriftfarbe rechnet das Programm dazu aus, damit ein
   heller Ton nicht weisse Schrift auf Gelb ergibt. */
.sitz-frei {
    width: 100%; padding: .6rem; border-radius: 8px; margin-bottom: .3rem;
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--signaltext, #1c1206);
    border-color: color-mix(in srgb, var(--signal) 62%, #000);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--signal) 88%, #fff) 0%, var(--signal) 100%);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--signal) 32%, transparent),
        inset 0 1px 0 rgba(255,255,255,.35);
}
.sitz-frei:hover {
    color: var(--signaltext, #1c1206);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--signal) 74%, #fff) 0%,
        color-mix(in srgb, var(--signal) 94%, #fff) 100%);
}

/* Die naechste freie Einheit: gestrichelt, mit goldenem Einstiegsknopf. */
.e-karte.e-frei {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--wf, #c9a45c) 50%, transparent);
    background: color-mix(in srgb, var(--wf, #c9a45c) 6%, transparent);
}
.e-frei .e-name { opacity: .85; }
.rein {
    padding: .42rem .75rem; border-radius: 7px; cursor: pointer;
    font-size: 11.5px; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase;
    color: #1a1206; border: 1px solid #8a6a2f;
    background: linear-gradient(180deg, #e6c47e 0%, #c9a45c 100%);
    box-shadow: 0 2px 10px rgba(201,164,92,.28),
        inset 0 1px 0 rgba(255,255,255,.35);
}
.e-karte.e-frei { cursor: pointer; }
.e-frei .rein { display: inline-flex; align-items: center; }
.e-karte.e-frei:hover {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 0 14px -5px var(--gold);
}
.e-karte.e-frei:hover .rein {
    background: linear-gradient(180deg, #efd08c 0%, #d4af64 100%);
}

/* Statistiken: Kachelreihe, Tagesbalken, Revier- und Bestenlisten. */
.stat-reihe {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: .45rem; margin: .8rem 0 .55rem;
}
.stat-reihe.drei { grid-template-columns: repeat(3, 1fr); }
.stat-k {
    background: rgba(255,255,255,.03); border: 1px solid var(--rand);
    border-radius: 8px; padding: .5rem .3rem; text-align: center;
}
.stat-k b { display: block; font-size: .92rem; color: var(--gold); }
.stat-k span {
    font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--grau);
}
.tage-balken {
    display: flex; align-items: flex-end; gap: 3px; height: 46px;
    margin: .2rem 0 .6rem; padding: 0 .1rem;
}
.tage-balken i {
    flex: 1; min-height: 5px; border-radius: 2px 2px 0 0;
    background: rgba(255,255,255,.07);
}
.tage-balken i.an { background: linear-gradient(180deg, #e6c47e, #8a6a2f); }
.stat-zeile {
    display: flex; flex-wrap: wrap; gap: .35rem .9rem;
    font-size: .78rem; color: var(--grau); margin: 0 0 .6rem;
}
.rev-balken .rz, .rang-liste .rz {
    display: flex; align-items: center; gap: .5rem; padding: .3rem 0;
}
.rz .rn { flex: 0 0 auto; min-width: 7.4rem; font-size: .8rem; }
.rz .rb {
    flex: 1; height: 7px; border-radius: 4px;
    background: rgba(255,255,255,.06); overflow: hidden;
}
.rz .rb i {
    display: block; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, #e6c47e, #c9a45c);
}
.rz .rw {
    flex: 0 0 auto; min-width: 4.6rem; text-align: right;
    font-size: .75rem; color: var(--grau);
}
.rang-liste .platz {
    flex: 0 0 1.35rem; height: 1.35rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 800;
    background: rgba(255,255,255,.07); color: var(--grau);
}
#v-aktivste, #v-reviere { padding: .45rem .75rem .65rem; }
.rang-liste .p1 { background: linear-gradient(180deg,#e6c47e,#b8934e); color: #1a1206; }
.rang-liste .p2 { background: linear-gradient(180deg,#d7dbe2,#9aa1ad); color: #14181f; }
.rang-liste .p3 { background: linear-gradient(180deg,#d9a06a,#a06a3a); color: #1a1206; }

.wsp .e-karte { margin-bottom: .4rem; }
.wsp .e-karte:last-child { margin-bottom: .15rem; }
.e-karte.drop-ziel {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 0 16px -4px var(--gold);
}
.brett.wahl-an .e-karte { border-style: dashed; }
.brett.wahl-an .e-karte:hover { border-color: var(--gold); }


/* ---- Feinschliff (AP4) ------------------------------------------------------ */

@keyframes meldungAuf { from { opacity: 0; transform: translate(-50%, 8px); } }

/* Abschnittstitel in Schubladen und Karten - vorher Inline-Stil. */
.s-abschnitt {
    margin: 1.2rem 0 .4rem; font-size: 12px; color: var(--grau);
    text-transform: uppercase; letter-spacing: .1em;
}

/* Waehrend eine Ansicht laedt, wird sie kurz gedimmt statt tot zu wirken. */
.laedt { opacity: .6; cursor: progress; transition: opacity .15s ease; }

/* Breite Tabellen rollen im eigenen Mantel, nie die ganze Seite. */
.tab-rollen { overflow-x: auto; }

/* Wer weniger Bewegung will, bekommt sie: Animationen praktisch aus,
   der 11-99-Alarm bleibt als ruhige rote Flaeche erkennbar. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .einheit.s-notruf, .e-karte.s-notruf { background: #33191d; }
}

/* ---- Personal: Werkzeuge, Rangmarken, Laufbahn (AP5) ------------------------ */

.werkzeuge {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .55rem .8rem; border-bottom: 1px solid var(--rand);
    background: rgba(255,255,255,.012);
}
.werkzeuge input { flex: 0 1 240px; width: auto; padding: .34rem .6rem; font-size: 12.5px; }
/* Ohne diese Zeile streckt sich ein <select> auf den ganzen freien
   Platz und schiebt die Siebknoepfe in die naechste Zeile. */
.werkzeuge select { flex: 0 1 190px; width: auto; padding: .3rem .5rem; font-size: 12.5px; }
.sieb { display: flex; gap: 4px; flex-wrap: wrap; }
.sieb button {
    background: none; border: 1px solid transparent; border-radius: 999px;
    color: var(--grau); font-size: 11.5px; padding: .26rem .65rem;
}
.sieb button:hover { color: var(--hell); background: var(--karte2); border-color: transparent; }
.sieb button.an {
    color: var(--goldhell); background: rgba(201,164,92,.10);
    border-color: rgba(201,164,92,.4);
}

.rang-chip {
    display: inline-block; min-width: 30px; text-align: center;
    font-size: 10px; font-weight: 700; letter-spacing: .08em;
    padding: .1rem .32rem; border-radius: 4px;
    background: var(--blaudun); color: #9ec7ef; border: 1px solid #1e3d61;
    vertical-align: 1px;
}
.rang-chip.hoch {
    background: var(--golddun); color: var(--goldhell); border-color: #6b5526;
}

.zeitstrahl { padding: .9rem .95rem; }
.zs { display: flex; gap: .7rem; position: relative; padding-bottom: .95rem; }
.zs:last-child { padding-bottom: .15rem; }
.zs::before {
    content: ""; position: absolute; left: 5px; top: 15px; bottom: 0;
    width: 1px; background: var(--rand);
}
.zs:last-child::before { display: none; }
.zs > i {
    flex: none; width: 11px; height: 11px; border-radius: 50%;
    margin-top: 3px; background: var(--karte2);
    border: 2px solid var(--randhell); position: relative; z-index: 1;
}
.zs > i.hoch {
    border-color: var(--gold); background: var(--golddun);
    box-shadow: 0 0 8px rgba(201,164,92,.35);
}
.zs > i.runter { border-color: var(--rot); background: var(--rotdun); }
.zs-was   { font-size: 13px; color: var(--text); }
.zs-was b { color: var(--goldhell); font-weight: 600; }
.zs-grund { font-size: 12px; color: var(--grau); margin-top: .15rem; font-style: italic; }
.zs-wann  { font-size: 11px; color: var(--grau); margin-top: .15rem; }

/* Statuswechsel auf Karten gleiten, statt zu springen. */
.einheit, .e-karte { transition: border-color .2s ease, background .2s ease; }

/* ---- Dienstplan-Feinschliff (AP6) ------------------------------------------- */

@media (min-width: 1180px) {
    .plan { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.tag > h3 b { font-weight: 700; margin-right: .1rem; }
.tag.vergangen { opacity: .55; transition: opacity .15s ease; }
.tag.vergangen:hover { opacity: 1; }
.tag.wochenende:not(.heute) > h3 {
    background: linear-gradient(90deg, rgba(77,143,209,.12), var(--karte2));
}

.schicht { border-left: 3px solid transparent; }
.schicht.sa-streife       { border-left-color: var(--blau); }
.schicht.sa-leitstelle    { border-left-color: var(--gold); }
.schicht.sa-ausbildung    { border-left-color: var(--gruen); }
.schicht.sa-sondereinsatz { border-left-color: var(--rot); }
.schicht.sa-buero         { border-left-color: var(--grau); }

.s-kopf { display: flex; align-items: baseline; gap: .45rem; }
.s-art {
    font-size: 9.5px; color: var(--grau);
    text-transform: uppercase; letter-spacing: .08em;
}
.s-staerke {
    margin-left: auto; font-size: 10.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.s-staerke.voll  { color: var(--gruen); }
.s-staerke.knapp { color: var(--gelb); }
.s-staerke.leer  { color: var(--rot); }
.s-name { color: var(--text); margin-top: .15rem; }
.leute .etikett {
    font-size: 9.5px; padding: .06rem .4rem;
    letter-spacing: .02em; text-transform: none;
}
.tag-abwesend {
    padding: .4rem .7rem; font-size: 11px; color: var(--grau);
    border-top: 1px dashed var(--rand);
}

/* ---- Einsatzkarte (AP7) ----------------------------------------------------- */

#karte {
    position: fixed; inset: 0; z-index: 70;
    background: #070b12; display: flex; flex-direction: column;
}
.ko-kopf {
    flex: none; display: flex; align-items: center; gap: .8rem;
    padding: .55rem 1rem; background: var(--flaeche);
    border-bottom: 1px solid var(--rand); flex-wrap: wrap;
}
.ko-kopf > b { color: var(--goldhell); font-size: 13px; letter-spacing: .04em; }
.ko-funk { color: var(--gruen); font-size: 12.5px; font-weight: 600; }
.ko-werkzeuge {
    display: flex; gap: 5px; margin-left: auto;
    align-items: center; flex-wrap: wrap;
}
.ko-farbe {
    width: 20px; height: 20px; padding: 0; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer;
}
.ko-farbe.an { border-color: var(--hell); box-shadow: 0 0 6px rgba(255,255,255,.35); }
.ko-werkzeuge .an-werkzeug { border-color: var(--gold); color: var(--goldhell); }
.ko-flaeche { flex: 1; overflow: auto; }
.ko-leinwand { position: relative; width: 100%; min-width: 480px; }
.ko-leinwand img {
    width: 100%; display: block;
    user-select: none; -webkit-user-drag: none;
}
#ko-svg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    touch-action: none; cursor: grab;
}
#ko-svg.zeichnet { cursor: crosshair; }

/* Der Fassring eines Radius-Kreises. Er ist ein durchsichtiger, dicker
   Strich auf dem Rand - `pointer-events: stroke` ist der Kern der
   Sache: damit zaehlt NUR der Rand als Ziel, egal ob dort Farbe liegt.
   Ohne die Zeile haengt es am Browser, ob ein stroke="transparent"
   ueberhaupt getroffen wird, und der Kreis waere je nach Browser
   anfassbar oder nicht. */
.ko-griff { pointer-events: stroke; cursor: nwse-resize; }

/* ---- Bild wählen fürs Handbuch (21.09.) ----------------------------
   Justin: "die bilder aussuchen für die handbücher ist schrecklich".
   Vorher öffnete jeder Bild-Knopf stumm den Datei-Dialog; jetzt liegt
   hier ein Blatt mit dem, was im Handbuch schon steckt. */
.hbb-dunkel {
    position: fixed; inset: 0; z-index: 260;
    background: rgba(4,8,14,.72); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.hbb-blatt {
    background: linear-gradient(180deg, var(--karte2) 0%, var(--karte) 100%);
    border: 1px solid var(--rand); border-radius: 12px;
    box-shadow: 0 18px 50px rgba(0,0,0,.5);
    width: min(860px, 100%); max-height: min(78vh, 720px);
    display: flex; flex-direction: column; overflow: hidden;
    outline: none;
}
.hbb-dunkel.hbb-drueber .hbb-blatt {
    border-color: var(--gruen);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gruen) 45%, transparent),
                0 18px 50px rgba(0,0,0,.5);
}
.hbb-kopf {
    display: flex; align-items: center; gap: .6rem;
    padding: .75rem .95rem; border-bottom: 1px solid var(--rand);
}
.hbb-kopf b { color: var(--hell); letter-spacing: .04em; }
.hbb-zu {
    margin-left: auto; background: none; border: 0; cursor: pointer;
    color: var(--grau); font-size: 15px; line-height: 1;
}
.hbb-zu:hover { color: var(--hell); }
.hbb-neu {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .85rem .95rem; border-bottom: 1px solid var(--rand);
}
.hbb-oder { font-size: 11.5px; color: var(--grau); flex: 1 1 18rem; line-height: 1.45; }
.hbb-oder b { color: var(--text); }
.hbb-titel {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    padding: .8rem .95rem .3rem;
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--grau);
}
.hbb-titel i {
    font-style: normal; font-variant-numeric: tabular-nums;
    padding: .05rem .4rem; border-radius: 4px;
    background: var(--karte2); border: 1px solid var(--rand);
    color: var(--text); letter-spacing: 0;
}
.hbb-titel .klein { letter-spacing: 0; text-transform: none; margin-left: auto; }
.hbb-gitter {
    display: grid; gap: .5rem; padding: .6rem .95rem .95rem;
    grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
    overflow-y: auto;
}
.hbb-kachel {
    padding: 0; border: 1px solid var(--rand); border-radius: 8px;
    background: var(--karte2); cursor: pointer; overflow: hidden;
    aspect-ratio: 4 / 3; transition: border-color .12s ease, transform .1s ease;
}
.hbb-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hbb-kachel:hover { border-color: var(--goldhell); transform: translateY(-1px); }
.hbb-kachel:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.hbb-last {
    padding: .7rem .95rem; border-top: 1px solid var(--rand);
    font-size: 12px; color: var(--grau);
}
@media (max-width: 560px) {
    .hbb-gitter { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}
#ko-svg.zieht { cursor: grabbing; }

.besetzt-liste { display: flex; flex-direction: column; }
.besetzt-liste .bz { padding: .45rem .2rem; border-bottom: 1px solid #17202f; }
.besetzt-liste .bz:last-child { border-bottom: 0; }
.besetzt-liste .bz:hover { background: rgba(201,164,92,.05); }
.besetzt-liste b { color: var(--hell); font-weight: 600; }
.funkcode { color: var(--gruen); letter-spacing: .06em; }

/* ---- HR: Dienstnummern-Liste (AP9) ------------------------------------------ */

.hr-zeile {
    display: flex; align-items: center; gap: .5rem;
    padding: .42rem .8rem; border-bottom: 1px solid #17202f;
}
.hr-zeile:last-child { border-bottom: 0; }
.hr-zeile .klickbar { cursor: pointer; }
.hr-zeile b { color: var(--hell); font-weight: 600; }
.hr-nr {
    min-width: 36px; text-align: right; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--goldhell);
}
.hr-knoepfe { margin-left: auto; display: flex; gap: 4px; }
.hr-frei {
    padding: .5rem .8rem; font-size: 11.5px; color: var(--grau);
    border-top: 1px dashed var(--rand); line-height: 1.9;
}

/* "Offene Vorgänge" - hier wartet jemand wirklich, das darf man der
   Zeile ansehen: eine goldene Kante statt der schlichten Trennlinie,
   und zwei Zeilen statt einer, damit Kopf und Knoepfe auf breiten
   Schirmen nicht auseinanderreissen (margin-left:auto in .hr-knoepfe
   tat genau das). */
.vg-zeile {
    display: flex; flex-direction: column; gap: .45rem;
    padding: .65rem .85rem; border-bottom: 1px solid #17202f;
    border-left: 3px solid var(--gold);
    background: color-mix(in srgb, var(--gold) 6%, transparent);
}
.vg-zeile:last-child { border-bottom: 0; }
.vg-zeile:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.vg-kopf { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vg-name { color: var(--hell); font-weight: 600; font-size: 14.5px; }
.vg-fuss {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; flex-wrap: wrap;
}
.vg-knoepfe { display: flex; gap: .4rem; flex: none; }

.hr-zeile[draggable] { cursor: grab; }
.karte.drop-ziel {
    outline: 2px dashed var(--gold); outline-offset: 2px;
    background: rgba(201,164,92,.05);
}

/* ---- Design-Pass: Bewegung und Tiefe (AP11) --------------------------------
   Eine Einsatzzentrale darf leben, aber nie zappeln: Bewegung nur auf
   transform/opacity/Schatten, 100-280 ms, und nichts, was der 4-Sekunden-
   Repaint der Tafel neu anstossen wuerde - Einblendungen gibt es deshalb
   nur fuer Dinge, die ein Mensch selbst oeffnet (Tab, Schublade, Meldung).
   Der prefers-reduced-motion-Block weiter oben schaltet alles hier mit ab. */

/* Der Kopf ist ruhig und deckend - Unschaerfe gibt es nur noch im
   Glasmodus (Nutzerentscheid 26.08.: "unschaerfe raus, standardmaessig
   sparsam"). Die Lightbar steht still: ein Zustandsband, kein
   Dauerlaeufer. */
#anwendung > header {
    background: color-mix(in srgb, var(--flaeche) 96%, transparent);
}

/* Tabs: der goldene Unterstrich gleitet, statt hart umzuspringen. */
nav.tabs button { position: relative; }
nav.tabs button.an { border-bottom-color: transparent; }
nav.tabs button::after {
    content: ""; position: absolute; left: .7rem; right: .7rem; bottom: 0;
    height: 2px; border-radius: 2px 2px 0 0;
    background: linear-gradient(90deg, transparent, var(--gold) 18%,
        var(--goldhell) 50%, var(--gold) 82%, transparent);
    transform: scaleX(0); opacity: 0;
    transition: transform .22s cubic-bezier(.33,0,.2,1), opacity .18s ease;
}
nav.tabs button.an::after { transform: scaleX(1); opacity: 1; }
nav.tabs button:hover:not(.an)::after { transform: scaleX(.45); opacity: .35; }

/* Ansichtswechsel: ruhiges Aufsteigen statt Kurzblitz. */
@keyframes ansichtAuf { from { opacity: 0; transform: translateY(7px); } }
.ansicht.an { animation: ansichtAuf .24s cubic-bezier(.25,.6,.25,1); }

/* Knoepfe: fuehlbarer Druckpunkt, der Hauptknopf hebt sich dem Finger an. */
button, .knopf {
    transition: background .14s ease, border-color .14s ease, color .14s ease,
        transform .12s ease, box-shadow .16s ease;
}
button:not(:disabled):active { transform: translateY(1px) scale(.98); }
button.haupt:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(201,164,92,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.sitz-frei:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(240,145,58,.4), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Der Einsteigen-Knopf bekommt einen Glanzlauf, wenn die Karte lockt. */
.rein {
    position: relative; overflow: hidden;
    transition: transform .12s ease, box-shadow .16s ease;
}
.rein::after {
    content: ""; position: absolute; top: -40%; bottom: -40%;
    left: -55%; width: 45%;
    transform: skewX(-22deg); opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
@keyframes glanz {
    from { transform: skewX(-22deg) translateX(0); opacity: .85; }
    to   { transform: skewX(-22deg) translateX(420%); opacity: 0; }
}
.e-karte.e-frei:hover .rein {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(201,164,92,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
.e-karte.e-frei:hover .rein::after { animation: glanz .7s ease .05s; }

/* Einheiten-Karten: unter der Hand leicht anheben. */
.e-karte {
    transition: border-color .2s ease, background .2s ease,
        transform .14s ease, box-shadow .18s ease;
}
.e-karte:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.3); }

/* 11-99: ein Alarm glueht, er blinkt nicht wie eine Bahnschranke.
   Gepulst wird die DECKSCHICHT, nicht der Schatten der Karte selbst:
   ein wandernder box-shadow laesst den Browser jedes Bild neu malen,
   eine Deckschicht mit wechselnder Deckkraft schiebt nur der Compositor.
   Bei einer vollen Tafel mit mehreren Notrufen ist das der Unterschied
   zwischen ruhig und zaeh. */
@keyframes glut { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.einheit.s-notruf, .e-karte.s-notruf { position: relative; }
.einheit.s-notruf::after, .e-karte.s-notruf::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; background: rgba(207,88,80,.10);
    box-shadow: 0 0 18px -2px rgba(207,88,80,.5),
        inset 0 0 22px rgba(207,88,80,.12);
    animation: glut 1.3s ease-in-out infinite;
}
.code.rot { position: relative; }
.code.rot::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; box-shadow: 0 0 14px rgba(207,88,80,.55);
    animation: glut 1.3s ease-in-out infinite;
}

/* Status-Pillen: der aktive Punkt atmet ganz langsam. */
.code-pille {
    transition: border-color .14s ease, background .14s ease,
        box-shadow .18s ease, transform .12s ease;
}
.code-pille:hover { transform: translateY(-1px); }

/* Chips im Pool und auf Streifen: greifbar. */
.crew, .pool-chip {
    transition: border-color .14s ease, background .14s ease,
        transform .12s ease, box-shadow .14s ease;
}
.pool-chip:hover, .e-crew .crew:hover {
    transform: translateY(-1px); background: #131c2e;
    border-color: var(--randhell);
}

/* Einsaetze und HR-Zeilen: Tiefe unter dem Zeiger. */
.einsatz:hover { box-shadow: 0 5px 16px rgba(0,0,0,.3); }
.hr-zeile { transition: background .12s ease; }
.hr-zeile:hover { background: rgba(201,164,92,.04); }

/* Lagezahlen: die Goldlinie waechst dem Blick entgegen. */
.kachel::after { transition: right .25s cubic-bezier(.3,.7,.3,1); }
.kachel:hover::after { right: 30%; }

/* Schublade: ausrollen mit Gewicht; der Vorhang dimmt nur noch,
   Unschaerfe gibt es allein im Glasmodus. */
.schublade { transition: transform .28s cubic-bezier(.32,.72,.25,1); }
.dunkel { transition: opacity .24s ease; }

/* Meldung: federt kurz ein - einmal, beim Erscheinen. */
@keyframes meldungAuf { from { opacity: 0; transform: translate(-50%, 10px) scale(.97); } }
#meldung { animation: meldungAuf .26s cubic-bezier(.25,1.1,.4,1); }

/* Der Serverpuls glimmt still, solange die Bruecke steht - ohne Pumpen. */
.punkt.gut { box-shadow: 0 0 5px 1px rgba(83,168,120,.3); }

/* Sanftes Scrollen - ausser jemand hat Bewegung reduziert. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==========================================================================
   Seiten-Leiste, Divisionen, Akten & IA (AP12/13)
   ==========================================================================
   Die Hauptbereiche wandern in eine schmale Konsole am linken Rand - Icons
   wie an einem Funkpult, der aktive glueht messingfarben. Die Untertabs im
   Inhalt behalten die gleitende Goldlinie aus dem Design-Pass. Bewegung
   weiterhin nur transform/opacity/Schatten, nichts haengt am 4-s-Repaint. */

#anwendung { padding-left: 64px; }

.leiste {
    position: fixed; left: 0; top: 0; bottom: 0; width: 64px; z-index: 50;
    display: flex; flex-direction: column; align-items: center;
    padding: .8rem 0 .9rem; gap: .3rem;
    background: linear-gradient(180deg, var(--flaeche) 0%, var(--grund) 100%);
    border-right: 1px solid var(--rand);
    box-shadow: 6px 0 18px rgba(0,0,0,.3);
}
/* Die Lightbar laeuft an der Leiste senkrecht weiter. */
.leiste::before {
    content: "";
    position: absolute; inset: 0 auto 0 0; width: 2px;
    background: linear-gradient(180deg,
        rgba(207,88,80,.85) 0%, rgba(207,88,80,.15) 28%,
        rgba(201,164,92,.5) 50%,
        rgba(77,143,209,.15) 72%, rgba(77,143,209,.85) 100%);
}
.leiste nav {
    display: flex; flex-direction: column; align-items: center;
    gap: .3rem; flex: 1; width: 100%;
    /* Wachsen die Bereiche (Unit-Reiter), scrollt die Reihe INNEN -
       der Fuss (Diensthandbuch, Ideen & Bugs, Abmelden) bleibt immer
       unten stehen, egal wie lang die Liste wird. */
    overflow-y: auto; min-height: 0; scrollbar-width: none;
}
.leiste nav::-webkit-scrollbar { display: none; }

/* Der duenne Strich zwischen den Gruppen der Leiste. */
.leiste-strich {
    width: 32px; height: 1px; flex: none;
    background: var(--rand); margin: .25rem 0;
}
.leiste nav button, .leiste-aus, .leiste-report, .leiste-buch {
    /* flex: none - sonst QUETSCHT eine lange Leiste die Knoepfe klein,
       statt dass die Reihe scrollt (die nav hat overflow-y: auto). */
    flex: none;
    width: 44px; height: 44px; border-radius: 13px;
    display: grid; place-items: center; position: relative;
    background: transparent; border: 1px solid transparent;
    color: var(--grau); cursor: pointer;
    transition: color .14s ease, background .14s ease, border-color .14s ease,
        box-shadow .18s ease, transform .12s ease;
}
.leiste nav button svg, .leiste-aus svg, .leiste-report svg, .leiste-buch svg { width: 21px; height: 21px; }
.leiste nav button:hover, .leiste-aus:hover, .leiste-report:hover, .leiste-buch:hover {
    color: var(--goldhell); background: rgba(201,164,92,.07);
    transform: translateY(-1px);
}
.leiste nav button.an {
    color: #100c04;
    background: linear-gradient(180deg, var(--goldhell) 0%, var(--gold) 100%);
    border-color: var(--goldhell);
    box-shadow: 0 0 16px rgba(201,164,92,.45), 0 4px 12px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.5);
}
.leiste nav button .zahl {
    position: absolute; top: -3px; right: -3px;
    min-width: 16px; padding: 0 4px; border-radius: 8px;
    font-size: 9.5px; line-height: 15px; font-weight: 700; text-align: center;
    background: var(--rand); color: var(--text);
    border: 1px solid var(--randhell);
}
.leiste nav button .zahl.warn {
    background: var(--rot); color: #fff; border-color: #7e3a38;
    box-shadow: 0 0 8px rgba(207,88,80,.55);
}
.leiste-aus { margin-top: auto; }
.leiste-aus:hover { color: var(--rot); background: rgba(207,88,80,.08); }

/* Untertabs im Inhalt: gleiche Optik wie frueher die Kopf-Tabs. */
nav.tabs.untertabs {
    margin-left: 0; height: 38px;
    border-bottom: 1px solid var(--rand); width: 100%;
}

/* Auf schmalen Schirmen rutscht die Konsole an den unteren Rand. */
@media (max-width: 760px) {
    #anwendung { padding-left: 0; padding-bottom: 64px; }
    .leiste {
        top: auto; right: 0; bottom: 0; width: auto; height: 60px;
        flex-direction: row; padding: 0 .6rem; gap: .2rem;
        border-right: 0; border-top: 1px solid var(--rand);
        box-shadow: 0 -6px 18px rgba(0,0,0,.3);
    }
    .leiste::before { inset: 0 0 auto 0; width: auto; height: 2px;
        background: linear-gradient(90deg,
            rgba(207,88,80,.85) 0%, rgba(207,88,80,.15) 28%,
            rgba(201,164,92,.5) 50%,
            rgba(77,143,209,.15) 72%, rgba(77,143,209,.85) 100%); }
    .leiste nav { flex-direction: row; justify-content: center; }
    .leiste-strich { display: none; }
    .leiste-fussstrich { display: none; }
    .leiste nav button, .leiste-aus { width: 42px; height: 42px; }
    .leiste-aus { margin-top: 0; margin-left: auto; }
}

/* ---- Status-Pillen: volle Codeleiste mit farbiger Umrandung ------------- */

.code-pille { border-color: color-mix(in srgb, currentColor 30%, var(--rand)); }

.code.pink   { background: #2e1626; color: #e69ac6; border-color: #592b45; }
.code.orange { background: #2f2110; color: #eab27e; border-color: #5c3c1c; }
/* Eigenes Zeichen fuer einen Kartenpunkt: Feld, Aufnehmen, Entfernen. */
.kt-zeichen-neu {
    display: flex; align-items: center; gap: .3rem; margin-top: .35rem;
}
.kt-zeichen-neu input {
    flex: 1; min-width: 0; text-align: center; font-size: 15px;
    padding: .25rem .3rem;
}
.kt-zeichen-neu button { flex: none; margin: 0; padding: .25rem .5rem; }

/* Gruppen-Ueberschrift im Kennzahlen-Block des Profils. Traegt den
   Namen und daneben leise, woher die Gruppe kommt. */
.mp-kz-gruppe {
    display: flex; align-items: baseline; gap: .5rem;
    margin: 1rem 0 .45rem; font-size: 11px; letter-spacing: .04em;
    text-transform: uppercase; color: var(--goldhell); font-weight: 700;
}
.mp-kz-gruppe:first-child { margin-top: 0; }
.mp-kz-gruppe i {
    font-style: normal; font-size: 10px; letter-spacing: 0;
    text-transform: none; color: var(--grau); font-weight: 500;
}

/* IA-Notizen in der Personalakte. Eine Notiz ist ein Satz, kein
   Datensatz - deshalb keine Tabelle. */
.ian-zeile {
    padding: .5rem 0; border-top: 1px solid var(--rand);
}
.ian-zeile:first-of-type { border-top: 0; padding-top: 0; }
.ian-kopf {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    margin-bottom: .3rem;
}
.ian-tat { margin-left: auto; display: flex; gap: .3rem; }
.ian-tat button { margin: 0; }
.ian-text {
    font-size: 12.5px; line-height: 1.55; color: var(--text);
    /* Wer in Absaetzen tippt, hat sie so gemeint. */
    white-space: pre-wrap; word-break: break-word;
}

.etikett.pink   { background: #2e1626; color: #e69ac6; border-color: #592b45; }
.etikett.orange { background: #2f2110; color: #eab27e; border-color: #5c3c1c; }

/* Einheitenkarten kennen die neuen Codes als linke Statuskante. */
.e-karte.s-kontrolle   { border-left-color: #b7abee; }
.e-karte.s-essen       { border-left-color: #eda29b; }
.e-karte.s-innendienst { border-left-color: #eab27e; }

/* ---- Divisionen: die farbige Umrandung ---------------------------------- */

.crew.div-um, .pool-chip.div-um {
    border-color: var(--divf);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--divf) 35%, transparent);
}
.div-chip {
    display: inline-block; padding: .05rem .45rem; border-radius: 999px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
    color: var(--divf); border: 1px solid var(--divf);
    background: color-mix(in srgb, var(--divf) 10%, transparent);
    vertical-align: 1px;
}

/* ---- Der Einstieg als Plus --------------------------------------------- */

.rein-plus {
    width: 30px; height: 30px; border-radius: 9px;
    display: inline-grid !important; place-items: center;
    padding: 0; color: var(--gold); border: 1px solid var(--golddun);
    background: rgba(201,164,92,.07);
}
.rein-plus svg { display: block; }
.e-karte.e-frei:hover .rein-plus {
    color: #100c04;
    background: linear-gradient(180deg, var(--goldhell), var(--gold));
    border-color: var(--goldhell);
}

/* ---- Rechte-Matrix ------------------------------------------------------ */

.rechte-tafel { max-height: 60vh; overflow: auto; }
.rechte-tafel th {
    font-size: 9px; letter-spacing: .04em; white-space: nowrap;
    position: sticky; top: 0; background: var(--karte); z-index: 2;
}
.rechte-tafel .rm-name {
    white-space: nowrap; font-size: 11.5px; font-weight: 600;
    color: var(--hell);
    position: sticky; left: 0; background: var(--karte); z-index: 1;
}
.rechte-tafel .rm-zelle { text-align: center; }
.rechte-tafel input[type="checkbox"] {
    accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer;
}
.rechte-tafel tr:hover td { background: rgba(201,164,92,.05); }

/* Bewegung reduziert? Dann steht auch die Konsole still. */
@media (prefers-reduced-motion: reduce) {
    .leiste nav button, .leiste-aus, .rein-plus { transition: none; }
}

/* ==========================================================================
   PersoNet: Personalpult, HR-Bereich, Fragebogen (AP13)
   ==========================================================================
   Der Personalbereich bekommt einen eigenen Kopf - PersoNet ist im Revier
   ein Begriff, also darf es auch so aussehen. Darunter das HR-Pult: erst
   die Lage in Zahlen, dann die drei Reviere als Karten. */

.bereichskopf {
    display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
    padding: .85rem 1.1rem; margin-bottom: .9rem;
    border: 1px solid var(--rand); border-radius: 10px;
    background:
        linear-gradient(90deg, rgba(77,143,209,.10), transparent 45%),
        linear-gradient(180deg, var(--karte) 0%, var(--flaeche) 100%);
    position: relative; overflow: hidden;
}
.bereichskopf::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--blau), var(--gold));
}
.bk-marke b {
    display: block; font-size: 19px; letter-spacing: .04em;
    color: var(--hell); font-weight: 700;
}
.bk-marke b span { color: var(--blau); }
.bk-marke i {
    font-style: normal; font-size: 11px; color: var(--grau);
    letter-spacing: .04em;
}
.bk-zahlen { display: flex; gap: 1.6rem; margin-left: auto; }
.bk-z { text-align: right; }
.bk-z b {
    display: block; font-size: 20px; color: var(--goldhell); font-weight: 700;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.bk-z span {
    font-size: 9.5px; color: var(--grau); letter-spacing: .12em;
    text-transform: uppercase;
}

/* ---- Das HR-Pult -------------------------------------------------------- */

.hr-pult {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: .8rem 1rem; margin-bottom: .8rem;
    border: 1px solid var(--rand); border-radius: 10px;
    background: linear-gradient(180deg, var(--karte) 0%, var(--flaeche) 100%);
}
.hr-pult-text b {
    display: block; font-size: 13px; color: var(--hell);
    letter-spacing: .1em; text-transform: uppercase;
}
.hr-pult-text i {
    font-style: normal; font-size: 11.5px; color: var(--grau);
}
.hr-pult .reihe { margin-left: auto; }

.hr-kacheln {
    display: grid; gap: .55rem; margin-bottom: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}
.hr-k {
    padding: .6rem .75rem; border-radius: 9px;
    border: 1px solid var(--rand); background: var(--karte);
    border-left: 3px solid var(--randhell);
}
.hr-k b {
    display: block; font-size: 21px; font-weight: 700; color: var(--hell);
    font-variant-numeric: tabular-nums; line-height: 1.15;
}
.hr-k span {
    font-size: 9.5px; color: var(--grau); letter-spacing: .1em;
    text-transform: uppercase;
}
.hr-k.gut  { border-left-color: var(--gruen); }
.hr-k.gut b  { color: #85d3a4; }
.hr-k.warn { border-left-color: var(--gelb); }
.hr-k.warn b { color: #e2c07a; }

/* ---- Revier-Karten ------------------------------------------------------ */

.hr-revier { border-top: 2px solid var(--wf); }
.hr-revier .hr-revier-kopf {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .7rem .8rem .5rem;
}
.hr-revier-kopf b {
    display: block; font-size: 13px; color: var(--hell); font-weight: 700;
}
.hr-revier-kopf i {
    font-style: normal; font-size: 10px; color: var(--grau);
    letter-spacing: .12em; text-transform: uppercase;
}
.hr-revier-zahl { margin-left: auto; text-align: right; }
.hr-revier-zahl b {
    display: block; font-size: 20px; color: var(--wf); font-weight: 700;
    font-variant-numeric: tabular-nums; line-height: 1;
}
.hr-revier-zahl span {
    font-size: 9px; color: var(--grau); letter-spacing: .1em;
    text-transform: uppercase;
}
.hr-balken {
    height: 3px; margin: 0 .8rem; border-radius: 2px;
    background: var(--rand); overflow: hidden;
}
.hr-balken i {
    display: block; height: 100%; background: var(--wf);
    transition: width .3s cubic-bezier(.3,.7,.3,1);
}
.hr-revier-zeile {
    display: flex; justify-content: space-between; gap: .5rem;
    padding: .45rem .8rem .1rem; font-size: 11px;
}
.hr-revier-zeile b { color: var(--goldhell); }
.hr-revier.drop-ziel { border-color: var(--gold); }
.hr-punkt {
    width: 6px; height: 6px; border-radius: 50%; background: var(--gruen);
    box-shadow: 0 0 6px rgba(83,168,120,.7); flex: none; margin-left: .35rem;
}

/* ---- Fragebogen --------------------------------------------------------- */

.pflicht {
    font-style: normal; font-size: 8.5px; color: var(--gold);
    letter-spacing: .1em; text-transform: uppercase;
}
.fb-zeile {
    display: flex; align-items: flex-start; gap: .5rem;
    padding: .55rem 0; border-bottom: 1px solid var(--rand);
}
.fb-zeile:last-child { border-bottom: 0; }
.fb-griff {
    width: 22px; height: 22px; flex: none; border-radius: 6px;
    display: grid; place-items: center; font-size: 10px; font-weight: 700;
    background: var(--karte2); color: var(--grau); border: 1px solid var(--rand);
}
.fb-felder { flex: 1; display: flex; flex-wrap: wrap; gap: .35rem; }
.fb-felder .fb-label { flex: 1 1 100%; }
.fb-felder .fb-art { flex: 0 0 130px; width: auto; }
.fb-felder .fb-optionen { flex: 1 1 200px; }
.fb-pflicht {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: 10.5px; color: var(--grau); letter-spacing: .04em;
}
.fb-pflicht input { accent-color: var(--gold); width: 14px; height: 14px; }
.fb-knoepfe { display: flex; gap: 3px; flex: none; }

/* Der ausgefuellte Bogen in der Personalakte: lange Antworten umbrechen. */
dl.paare.bogen dd { white-space: pre-wrap; line-height: 1.5; }

/* ---- Vermerke in der Personalakte (AP14) -------------------------------- */

.vm-liste { display: flex; flex-direction: column; gap: .5rem; }
.vm {
    padding: .55rem .7rem; border-radius: 8px;
    background: var(--karte2); border: 1px solid var(--rand);
    border-left: 3px solid var(--randhell);
}
.vm-kopf {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}
.vm-kopf b { color: var(--hell); font-size: 12.5px; font-weight: 600; }
.vm-kopf button { margin-left: auto; }
.vm-text {
    margin: .4rem 0 0; font-size: 12px; line-height: 1.5;
    white-space: pre-wrap; color: var(--text);
}
.vm-fuss {
    margin-top: .35rem; font-size: 10px; color: var(--grau);
    letter-spacing: .04em;
}
.vm-lob           { border-left-color: var(--gruen); }
.vm-verwarnung    { border-left-color: var(--gelb); }
.vm-suspendierung { border-left-color: var(--rot); background: #1c1417; }

/* ---- Divisionen im HR-Bereich (AP15) ------------------------------------ */

.div-tafel {
    display: grid; gap: .6rem;
    /* 295 und nicht 250: gemessen sind das 4 Spalten a 335 px, und damit
       fallen 95 abgeschnittene Namen auf 3. Bei 250 waren es 5 Spalten a
       266 px - zu schmal schon vor der Leistungsspalte (38 von 119). */
    grid-template-columns: repeat(auto-fit, minmax(295px, 1fr));
}
.div-karte {
    border: 1px solid var(--rand); border-radius: 9px;
    border-top: 2px solid var(--divf);
    background: var(--karte2); overflow: hidden;
}
.div-kopf {
    display: flex; align-items: center; gap: .45rem;
    padding: .5rem .6rem .45rem;
    border-bottom: 1px solid var(--rand);
}
.div-kopf b {
    color: var(--divf); font-size: 12px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
}
.div-zahl {
    font-size: 10px; color: var(--grau); font-variant-numeric: tabular-nums;
    padding: .05rem .4rem; border-radius: 999px;
    border: 1px solid var(--rand); background: var(--karte);
}
.div-kopf button { margin-left: auto; }
.div-leute { padding: .2rem .3rem .35rem; }
.div-zeile {
    display: flex; align-items: center; gap: .35rem;
    padding: .3rem .3rem; border-radius: 6px; font-size: 12px;
}
.div-zeile:hover { background: rgba(255,255,255,.03); }
.div-zeile b { color: var(--text); font-weight: 600; }
/* Eine Zeile, immer. Ohne das wickelt der erste lange Name in der
   schmalen Spalte um - und weil alle Karten im selben Raster liegen,
   zieht das jede Spalte mit (gemessen: 24,2 -> 37,6 px je Zeile). */
.div-zeile > b {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.div-zeile .hr-nr { font-size: 10px; min-width: 32px; }
.div-stufe {
    margin-left: auto; font-size: 9.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--divf);
    padding: .05rem .4rem; border-radius: 999px;
    border: 1px solid var(--divf);
    background: color-mix(in srgb, var(--divf) 10%, transparent);
    white-space: nowrap;
    /* Von den drei Angaben rechts ist die Stufe die, der die letzten
       Buchstaben am wenigsten fehlen: "CO. DIRECTO…" liest sich noch,
       ein halber Name nicht. */
    max-width: 84px; overflow: hidden; text-overflow: ellipsis;
}
.div-zeile button { padding: 0 .35rem; }

.div-wahl { display: flex; flex-direction: column; gap: .1rem; }
.div-opt {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .5rem; border-radius: 7px; cursor: pointer;
    border: 1px solid transparent; font-size: 12.5px;
}
.div-opt:hover { background: var(--karte2); border-color: var(--rand); }
.div-opt input { accent-color: var(--gold); width: 15px; height: 15px; }

/* Eine Stufe, die dieser Betrachter nicht vergeben darf: sichtbar, aber
   erkennbar zu. NICHT ausgeblendet - wer sie nicht sieht, haelt sie fuer
   nicht vorhanden und fragt nach einer Rolle, die es laengst gibt. */
.div-opt.aus { opacity: .45; cursor: not-allowed; }
.div-opt.aus:hover { background: none; border-color: transparent; }
.div-opt.aus input { cursor: not-allowed; }

/* Steht an der Stelle des Antragsknopfes, wenn eine Unit keine Antraege
   nimmt (Unit-Katalog, Schalter "Antraege"). Kein Knopfaussehen - es ist
   eine Auskunft und nichts zum Draufdruecken. */
.u-zutritt {
    display: inline-block; max-width: 46rem;
    padding: .45rem .7rem; border-radius: 8px;
    border: 1px solid #4f3d1a; background: #33270f; color: #e2c07a;
    font-size: 13px; line-height: 1.45; white-space: normal;
}

/* ---- Officer-Pool als gleichmaessiges Raster (AP17) --------------------- */
/*  Vorher richteten sich die Kacheln nach der Namenslaenge - eine Wand aus
    unterschiedlich breiten Kloetzen. Jetzt tragen alle dieselbe Breite,
    lange Namen enden mit Auslassungspunkten. */

#l-pool {
    display: grid; gap: .4rem;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
}
#l-pool .pool-chip {
    width: 100%; min-width: 0; box-sizing: border-box;
    /* Feste Hoehe: sonst wachsen Kacheln mit zwei Rangmarken oder einem
       Decknamen ueber ihre Nachbarn hinaus und die Reihe wird schief. */
    height: 34px; align-items: center; overflow: hidden;
}
#l-pool .pool-chip img, #l-pool .pool-chip .avatar { flex: none; }
#l-pool .pool-chip .deck { display: none; }
#l-pool .pool-chip .cn {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Rang und Units stehen rechts und werden NICHT gequetscht - der Name
   gibt nach, nicht die Marken (sonst schneidet die feste Hoehe sie ab). */
#l-pool .pool-chip .rk { flex: none; }
#l-pool .pool-chip .rk.uf { max-width: 46px; overflow: hidden; }
#l-pool .ohne { grid-column: 1 / -1; }

@media (max-width: 620px) {
    #l-pool { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* Rollenwahl beim Einstellen: je Abschnitt ein Block. */
.rw-block { margin-bottom: .7rem; }
.rw-block > b {
    display: block; font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gold); margin-bottom: .25rem;
}
.rw-liste {
    display: grid; gap: 1px;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    max-height: 210px; overflow: auto;
    border: 1px solid var(--rand); border-radius: 8px; padding: .2rem;
    background: var(--karte);
}
.rw-liste .div-opt { padding: .3rem .45rem; font-size: 12px; }

/* ---- Rechte-Matrix mit Gruppen (AP18) ---------------------------------- */

.rechte-tafel { max-height: 55vh; }
.rechte-tafel .rm-gruppe td {
    position: sticky; left: 0;
    padding: .5rem .5rem .3rem; background: var(--flaeche);
    font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gold);
    border-bottom: 1px solid var(--rand);
}
.rechte-tafel tr.verborgen { display: none; }
#rm-suche { width: 100%; }

/* ---- Unit-Zugehoerigkeit und Kuendigung (AP20) -------------------------- */

/* Je Unit ein Block mit ihrer Farbe an der Kante - dieselbe Sprache wie
   die Divisions-Karten im HR-Bereich, nur schmaler fuer die Schublade. */
.unit-block {
    border-left: 3px solid var(--divf, var(--rand));
    padding-left: .7rem; margin: .9rem 0;
}
.unit-block .s-abschnitt { margin-top: 0; }
.unit-block .etikett { margin-left: .4rem; vertical-align: middle; }

.kd-warnung {
    background: var(--rotdun); border: 1px solid #57282a; border-radius: 9px;
    padding: .7rem .8rem; font-size: 12.5px; line-height: 1.55;
    color: #eda29b; margin-bottom: .4rem;
}
.kd-warnung b { color: #f6c3bd; }

.kd-teil { margin: .7rem 0; }
.kd-titel {
    font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--grau); margin-bottom: .25rem;
}

/* ---- Units: jede bewirtschaftet ihre eigenen Antraege (AP21) ------------ */

/* Zehn Units passen in keinen Reiterbalken (der ist 38 px hoch und
   traegt genau eine Zeile) - deshalb eine eigene Wahl aus Kacheln,
   gruppiert wie im Discord und alle gleich gross. */
.u-wahl { margin-bottom: .9rem; }
.u-gruppe + .u-gruppe { margin-top: .7rem; }
.u-gruppe-titel {
    display: block; font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--grau); margin-bottom: .35rem;
}
.u-chips {
    display: grid; gap: .45rem;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.u-chips button {
    position: relative; display: block; width: 100%; min-width: 0;
    text-align: left; padding: .5rem .7rem; border-radius: 9px;
    border: 1px solid var(--rand); background: var(--karte2);
    cursor: pointer; overflow: hidden;
}
.u-chips button:hover { border-color: #33405a; background: #18202e; }
.u-chips button b {
    display: block; font-size: 12.5px; color: var(--hell); font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-right: 1.4rem;
}
.u-chips button i {
    display: block; font-style: normal; font-size: 11px; color: var(--grau);
    margin-top: .1rem;
}
.u-chips button.an {
    border-color: var(--gold); background: #1d2434;
    box-shadow: inset 0 0 0 1px rgba(201,164,92,.25);
}
.u-chips button.an b { color: var(--gold); }
.u-chip-zahl {
    position: absolute; top: .45rem; right: .5rem;
    min-width: 17px; padding: 0 4px; border-radius: 8px;
    background: var(--gold); color: #17202e;
    font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}

.u-pult {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.u-pult-text b { display: block; font-size: 15px; color: var(--hell); }
.u-pult-text i {
    display: block; font-style: normal; font-size: 12px; color: var(--grau);
    margin-top: .15rem;
}

/* Antraege links, Mannschaft rechts - unter 900 px untereinander. */
.u-spalten {
    display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem;
}
@media (max-width: 900px) { .u-spalten { grid-template-columns: 1fr; } }

.u-zeile {
    display: flex; align-items: center; gap: .5rem;
    padding: .35rem .1rem; border-bottom: 1px solid var(--rand2, #1b2434);
}
.u-zeile:last-child { border-bottom: 0; }
.u-zeile b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.u-stufe { font-size: 11.5px; color: var(--grau); white-space: nowrap; }
.u-stufe.fuehrung { color: var(--gold); font-weight: 600; }

.u-antrag {
    padding: .55rem 0; border-bottom: 1px solid var(--rand2, #1b2434);
}
.u-antrag:last-child { border-bottom: 0; }
.u-a-kopf { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.u-a-kopf .stumm { margin-left: auto; }
.u-a-text {
    margin: .35rem 0 .45rem; font-size: 12.5px; line-height: 1.55;
    color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* Der Rauswurf-Haken in der Kuendigung - bewusst abgesetzt und rot. */
.kd-kick {
    display: flex; gap: .6rem; align-items: flex-start; margin-top: .9rem;
    padding: .6rem .7rem; border-radius: 9px;
    border: 1px solid #57282a; background: var(--rotdun);
    cursor: pointer;
}
.kd-kick input { accent-color: #e05a52; width: 16px; height: 16px;
    margin-top: .15rem; flex: none; }
.kd-kick b { display: block; font-size: 12.5px; color: #f6c3bd; }
.kd-kick i {
    display: block; font-style: normal; font-size: 11.5px; line-height: 1.5;
    color: #eda29b; margin-top: .15rem;
}

/* ---- Units an der Person (AP22) ---------------------------------------- */

/* Eine Unit: schlichtes Kaestchen in ihrer Discord-Farbe. */
.u-chip {
    display: inline-block; vertical-align: middle;
    padding: 1px 7px; margin-left: .25rem; border-radius: 999px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
    line-height: 16px; white-space: nowrap;
    color: var(--uf, #9aa4b4);
    border: 1px solid color-mix(in srgb, var(--uf, #7e8899) 45%, transparent);
    background: color-mix(in srgb, var(--uf, #7e8899) 14%, transparent);
}
.u-chip.fuehrt { font-weight: 700; box-shadow: 0 0 0 1px rgba(201,164,92,.3); }

/* Mehrere Units: EIN Band, in gleiche Felder GETEILT - zwei Units halb
   und halb, drei gedrittelt, vier geviertelt (Justin, 26.08.: "teile
   oder drittel oder vierteil das nach farbe"). Vorher lief hier ein
   Verlauf durch; bei drei Toenen war am Ende keiner mehr zu erkennen. */
.u-chip.u-viele {
    color: #0f1621; border-color: transparent;
    text-shadow: 0 1px 0 rgba(255,255,255,.3);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}

/* ---- Der Unit-Ring um die Person (AP23, geteilt seit AP31) -------------
   Ein Farbkreis aus allen Units, in gleiche Segmente geteilt: eine Unit
   faerbt den ganzen Ring, zwei teilen ihn in Haelften, drei in Drittel,
   vier in Viertel. Ein einziger conic-gradient, keine Animation - das
   kostet nichts, auch wenn die Leitstelle alle vier Sekunden neu malt. */
.u-ring {
    position: relative; display: inline-block; line-height: 0;
    border-radius: 50%; vertical-align: middle; isolation: isolate;
}
/* Der Farbkreis liegt UEBER dem Rand des Bildes und HINTER ihm - er
   braucht damit keinen eigenen Platz. Vorher sass er als Polster
   darum: der Chip wurde 6px hoeher, und wer das Polster nach innen
   nahm, bekam ein kleineres Gesicht. Beides war ungleich. */
.u-ring::after {
    content: ''; position: absolute; inset: -2px; border-radius: 50%;
    /* Standard "Fuehrung zuerst": --kreisf (nur die gefuehrte Unit)
       schlaegt --kreis (alle geteilt); data-uring am <html> stellt um. */
    background: conic-gradient(from -90deg,
        var(--kreisf, var(--kreis, #7e8899)));
    z-index: 0;
}
/* KEIN box-shadow am Bild: der frisst den Ring von aussen auf. Der
   Abstand zum Bild kommt aus dem padding des Rings selbst. */
.u-ring > * {
    position: relative; z-index: 1; display: block; border-radius: 50%;
}

/* Der Ring ist genau so gross wie das Bild darin - er traegt nichts
   auf. Das Bild behaelt sein volles Mass, mit Ring wie ohne. */
.u-ring { width: var(--av, 28px); height: var(--av, 28px); }
/* Ein Rand am Bild wuerde den Kreis von innen ueberdecken - der
   Buchstabe bekommt deshalb im Ring seinen eigenen dunklen Saum, damit
   die Farbe ein Ring bleibt und kein Fleck. */
.u-ring > .avatar { border-color: var(--grund); box-shadow: none; }

/* ---- Einheit bearbeiten und verschieben (AP24) -------------------------- */

/* Der Stift bleibt unauffaellig, bis man die Karte anfasst - die Tafel
   soll im Betrieb ruhig bleiben. */
.e-stift {
    border: 0; background: none; color: var(--grau); cursor: pointer;
    padding: 0 .3rem; font-size: 12px; line-height: 1;
    opacity: 0; transition: opacity .12s;
}
.e-karte:hover .e-stift, .e-stift:focus-visible { opacity: 1; }
.e-stift:hover { color: var(--gold); }

/* Am Namen wird gezogen - das darf man sehen. */
.e-name[draggable="true"] { cursor: grab; }
.e-name[draggable="true"]:active { cursor: grabbing; }

/* Die Revier-Spalte als Ablage. */
.wsp.drop-ziel {
    outline: 2px dashed var(--gold); outline-offset: 3px;
    border-radius: 12px;
}

/* ---- Dienstplan-Kalender (AP25) ---------------------------------------- */

.k-leiste {
    display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem;
    flex-wrap: wrap;
}
.k-leiste b {
    font-size: 16px; color: var(--gold); min-width: 9.5rem;
    text-align: center; letter-spacing: .03em;
}
.k-leiste .k-luecke { flex: 1; }
#k-zurueck, #k-vor {
    width: 30px; height: 30px; padding: 0; font-size: 17px; line-height: 1;
    border-radius: 50%;
}

/* Justin (04.09.): "noch geiler son strahl der sich durchzieht" - die
   Lightbar aus dem Kopfbalken, hier mit einem wandernden Lichtpunkt,
   quer ueber die ganze Kalenderkarte. Der Laeufer ist die ERSTE
   Hintergrund-Schicht; "Bewegung: sparsam" haelt alles an (globales
   animation:none), dann bleibt die stille Leiste stehen und der Laeufer
   parkt unsichtbar vor dem linken Rand. */
#a-plan > .karte { position: relative; overflow: hidden; }
#a-plan > .karte::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    z-index: 2; pointer-events: none;
    background:
        linear-gradient(90deg, transparent,
            rgba(255, 240, 200, .95) 50%, transparent)
            no-repeat -20% 0 / 16% 100%,
        linear-gradient(90deg,
            rgba(207, 88, 80, .85) 0%, rgba(207, 88, 80, .15) 28%,
            rgba(201, 164, 92, .55) 50%,
            rgba(77, 143, 209, .15) 72%, rgba(77, 143, 209, .85) 100%);
    animation: k-strahllauf 8s linear infinite;
}
@keyframes k-strahllauf {
    0%   { background-position: -20% 0, 0 0; }
    55%  { background-position: 120% 0, 0 0; }
    100% { background-position: 120% 0, 0 0; }
}

.k-wochentage, .k-gitter {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45rem;
}

/* Die Heute-Spur: ein goldener Strahl, der sich vom Wochentag oben durch
   die ganze Spalte zieht - ueber alle Wochen des Monats. Liegt ALS HAUCH
   ueber den Kacheln (pointer-events: none), die Spalte kommt per --ksp
   aus dem Maler. Die Rechnung traegt den Gitterabstand mit ein, sonst
   sitzt der Strahl ab Mittwoch neben seiner Spalte. */
.k-gitter.k-spur { position: relative; }
.k-gitter.k-spur::before {
    content: ""; position: absolute; z-index: 1; pointer-events: none;
    top: -1.45rem; bottom: 0;
    left: calc(var(--ksp, 0) * ((100% - 2.7rem) / 7 + .45rem));
    width: calc((100% - 2.7rem) / 7);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(201, 164, 92, .5),
            rgba(201, 164, 92, 0)) no-repeat top / 100% 2px,
        linear-gradient(180deg, rgba(201, 164, 92, .12),
            rgba(201, 164, 92, .045) 42%, rgba(201, 164, 92, .015));
    box-shadow: inset 1px 0 0 rgba(201, 164, 92, .22),
                inset -1px 0 0 rgba(201, 164, 92, .22);
}
/* Der Wochentag ueber dem Strahl leuchtet als sein Ursprung. */
.k-wochentage span.an {
    color: var(--gold);
    text-shadow: 0 0 10px rgba(201, 164, 92, .55);
}
.k-wochentage {
    margin-bottom: .4rem;
}
.k-wochentage span {
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--grau); text-align: center; font-weight: 600;
}

.k-tag {
    min-height: 104px; padding: .38rem .38rem .42rem; border-radius: 11px;
    border: 1px solid var(--rand); background: var(--karte2);
    cursor: pointer; overflow: hidden;
    display: flex; flex-direction: column; gap: .2rem;
    transition: border-color .15s ease, box-shadow .15s ease,
                transform .15s ease;
}
.k-tag:hover {
    border-color: var(--randhell, #33405a);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.k-tag.we { background: color-mix(in srgb, var(--karte2) 72%, var(--grund)); }
.k-tag.fremd { opacity: .38; }
.k-tag.fremd:hover { opacity: .7; }
/* Heute traegt die Zahl eine goldene Muenze - kraeftiger als der alte
   duenne Rahmen, und von weitem zu finden. */
.k-tag.heute {
    border-color: color-mix(in srgb, var(--gold) 55%, var(--rand));
    box-shadow: inset 0 0 0 1px rgba(201, 164, 92, .22);
}
.k-zahl {
    font-size: 11px; color: var(--grau); font-weight: 700;
    width: 20px; height: 20px; line-height: 20px; text-align: center;
    border-radius: 50%; flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}
.k-tag.heute .k-zahl { background: var(--gold); color: #16130a; }

/* Eine Schicht in der Tageskachel: Farbe der Art als Kante. */
.k-schicht {
    display: block; border-left: 3px solid var(--sf, #7e8899);
    background: color-mix(in srgb, var(--sf, #7e8899) 13%, transparent);
    border-radius: 5px; padding: .16rem .35rem; font-size: 10.5px;
    line-height: 1.35; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k-schicht:hover { background: color-mix(in srgb, var(--sf, #7e8899) 26%, transparent); }
.k-schicht b {
    color: var(--hell); font-weight: 700; font-variant-numeric: tabular-nums;
}
.k-schicht i { font-style: normal; color: var(--grau); float: right; margin-left: .25rem; }
.k-schicht.knapp i { color: #eda29b; font-weight: 700; }

/* Eine geplante Ankuendigung: goldene Kante, Megafon, ↻ bei Serien. */
.k-ank {
    display: block; border-left: 3px solid var(--gold);
    background: color-mix(in srgb, var(--gold) 9%, transparent);
    border-radius: 5px; padding: .16rem .35rem; font-size: 10.5px;
    line-height: 1.35; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k-ank b {
    color: var(--hell); font-weight: 700; font-variant-numeric: tabular-nums;
}
.k-ank .k-takt { font-style: normal; color: var(--gold); float: right; }

/* Mehr, als die Kachel zeigt - der Tag sagt beim Oeffnen alles. */
.k-mehr {
    display: block; text-align: center; font-size: 10px; color: var(--grau);
    border: 1px dashed var(--rand); border-radius: 5px; padding: .07rem .3rem;
}
.k-tag:hover .k-mehr { color: var(--hell); border-color: var(--randhell, #33405a); }

/* ALLE Abgemeldeten eines Tages als ein Chip - zwanzig laufende Urlaube
   sind sonst zwanzig Namenszeilen in jeder Kachel. Vorn bis zu drei
   Gesichter gestapelt: wer fehlt, erkennt man schneller am Kopf als am
   Wort dahinter. */
.k-abwchip {
    margin-top: auto; align-self: flex-start; max-width: 100%;
    display: inline-flex; align-items: center; gap: .32rem;
    font-size: 10px; color: #e2c07a; border-radius: 999px;
    background: rgba(226, 192, 122, .07);
    border: 1px solid rgba(226, 192, 122, .18);
    padding: .09rem .5rem .09rem .14rem;
    white-space: nowrap; overflow: hidden;
}
.k-abwchip i { font-style: normal; opacity: .65; }
.k-abwstapel { display: inline-flex; flex: none; }
.k-abwkopf {
    width: 15px; height: 15px; border-radius: 50%;
    border: 1px solid #2a3245; background: var(--karte);
    object-fit: cover; display: inline-block;
}
.k-abwstapel .k-abwkopf + .k-abwkopf { margin-left: -5px; }
.k-abwbuchstabe {
    font-size: 8px; font-weight: 700; color: var(--hell);
    display: inline-flex; align-items: center; justify-content: center;
    background: #2c3650;
}
/* In der Tagesansicht darf der Kopf groesser sein. */
.k-abwzeile .k-abwkopf { width: 20px; height: 20px; flex: none; }
.k-abwzeile .k-abwbuchstabe { font-size: 10px; }

/* Kopfzahlen im Abnahmen-Reiter: dieselben Zahlenbloecke wie im
   Bereichskopf, nur links buendig in der Karte. */
.az-abkopf { margin: 0 0 .9rem; }
.az-abkopf .bk-z { text-align: left; }

/* --- Schulungs-Warteliste auf der Unit-Seite (DQA) ---------------------
   Wer laenger wartet als die Frist, BLINKT - ein ruhiges Pulsieren der
   roten Kante, kein Stroboskop. "Bewegung: sparsam" haelt die Animation
   global an; die rote Kante bleibt dann stehen und sagt dasselbe. */
.uh-abkarte { margin-bottom: .9rem; }
.uh-abzeile {
    display: flex; align-items: center; gap: .55rem; padding: .38rem .5rem;
    border-bottom: 1px solid var(--rand2, #1b2434); font-size: 12.5px;
    border-left: 3px solid transparent; border-radius: 4px;
    cursor: pointer;
}
.uh-abzeile:last-child { border-bottom: 0; }
.uh-abzeile:hover { background: color-mix(in srgb, var(--hell) 5%, transparent); }
.uh-abzeile b { color: var(--hell); }
.uh-abfehlt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uh-abseit {
    margin-left: auto; flex: none; font-size: 11.5px; color: var(--grau);
    font-variant-numeric: tabular-nums;
}
.uh-abseit.rot { color: #e05a52; font-weight: 700; }
.uh-abzeile.alarm {
    border-left-color: #e05a52;
    animation: uh-abpuls 1.6s ease-in-out infinite;
}
@keyframes uh-abpuls {
    0%, 100% { background: rgba(224, 90, 82, .05); }
    50%      { background: rgba(224, 90, 82, .16); }
}
@media (prefers-reduced-motion: reduce) {
    .uh-abzeile.alarm { animation: none; background: rgba(224, 90, 82, .1); }
}

/* Die rote Zahl am Schulungen-Reiter: wie viele ueber der Frist sind. */
.uh-abmarke {
    display: inline-block; min-width: 16px; padding: 0 4px;
    border-radius: 999px; background: #e05a52; color: #fff;
    font-size: 10px; line-height: 16px; text-align: center;
    font-weight: 700; margin-left: .25rem; vertical-align: 1px;
}

/* Der Hinweis am Terminblock, dass er sich selbst ankuendigt. */
.k-anknotiz {
    margin: .35rem 0 .1rem; font-size: 11.5px;
    color: color-mix(in srgb, var(--gold) 80%, var(--text));
}

/* Der Block in der Schublade. */
.k-block {
    border-left: 3px solid var(--sf, #7e8899); padding: .6rem .75rem;
    background: var(--karte2); border-radius: 9px; margin-bottom: .7rem;
}
.k-block-kopf {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}
.k-block-kopf b { font-size: 14px; color: var(--hell); }
.k-zeit { font-size: 12px; color: var(--grau); margin-left: auto; }
.k-notiz {
    margin: .4rem 0 .2rem; font-size: 12.5px; line-height: 1.55;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.k-crew { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.k-abwzeile {
    display: flex; align-items: center; gap: .5rem; padding: .3rem 0;
    border-bottom: 1px solid var(--rand2, #1b2434); font-size: 12.5px;
}
.k-abwzeile:last-child { border-bottom: 0; }
/* Die Zeitspanne schiebt sich nach rechts, Zustand und das ✕ stehen
   dahinter - so hat jede Zeile dieselbe Kante. */
.k-abwzeile .stumm.klein:first-of-type { margin-left: auto; }
.k-abwzeile .stumm:not(.klein) { margin-left: auto; }
.k-abwzeile button { margin: 0; padding: .12rem .4rem; line-height: 1.1; }
.k-ankzeile {
    /*  UMBRECHEND seit 24.09.2026: die Vorschau der naechsten Sendungen
        haengt als eigene Reihe darunter (flex-basis 100%). Ohne
        flex-wrap staende sie in derselben Zeile und quetschte den
        Titel. Auf schmalen Geraeten bricht jetzt auch der Rest um,
        statt ueberzulaufen - das war vorher schon nicht schoen. */
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding: .3rem 0;
    border-bottom: 1px solid var(--rand2, #1b2434); font-size: 12.5px;
}
.k-ankzeile:last-child { border-bottom: 0; }
.k-ankzeile b { color: var(--hell); }
.k-ankzeile .stumm.klein { margin-left: auto; }
.k-ankzeile button { margin: 0; padding: .12rem .4rem; line-height: 1.1; }
/* Die Karte unter dem Kalender endet rechts dort, wo die schwebenden
   Werkzeug-Knoepfe haengen - ohne die Luft laegen deren Scheiben genau
   auf den Zeilen-Knoepfen (per Hit-Test gemessen: ✕ unklickbar). */
#k-ankplan .k-ankzeile { padding-right: 4.5rem; }

@media (max-width: 720px) {
    .k-wochentage, .k-gitter { gap: .3rem; }
    /* Enger Abstand -> andere Spur-Rechnung (6 Luecken x .3rem). */
    .k-gitter.k-spur::before {
        left: calc(var(--ksp, 0) * ((100% - 1.8rem) / 7 + .3rem));
        width: calc((100% - 1.8rem) / 7);
        top: -1.3rem;
    }
    .k-tag { min-height: 72px; padding: .28rem; border-radius: 8px; }
    .k-zahl { width: 17px; height: 17px; line-height: 17px; font-size: 10px; }
    .k-schicht i, .k-ank .k-takt { display: none; }
    .k-schicht, .k-ank { font-size: 9.5px; padding: .1rem .28rem; }
    .k-abwchip { font-size: 9px; }
    .k-abwkopf { width: 13px; height: 13px; }
}

/* ==========================================================================
   Aussehen: Farbschemata, freier Akzent und Glasmodus (AP28)
   ==========================================================================
   Alle Schemata drehen NUR an den Variablen aus :root - deshalb zieht der
   ganze Bereich mit, ohne dass eine einzige Regel doppelt existiert. Wer
   spaeter Farben setzt, nimmt bitte die Variablen und keine festen
   Hexwerte, sonst bleibt seine Stelle beim Umschalten stehen.
   Es sind bewusst alles DUNKLE Varianten: ein Hellmodus braeuchte erst das
   Aufraeumen der historisch fest eingetragenen Dunkelwerte.
   ========================================================================== */

/* --- Mitternacht: fast schwarz, sehr ruhig ------------------------------- */
:root[data-thema="mitternacht"] {
    --grund: #05070c;  --flaeche: #080b12;
    --karte: #0a0e17;  --karte2: #0f141f;
    --rand:  #171d2b;  --randhell: #263048;
    --text:  #bcc4d2;  --hell: #eef1f6;  --grau: #8a909c;
}

/* --- Stahl: kuehles Grau, technisch ------------------------------------- */
:root[data-thema="stahl"] {
    --grund: #0d1013;  --flaeche: #12161a;
    --karte: #171c22;  --karte2: #1d232a;
    --rand:  #272e37;  --randhell: #3a444f;
    --text:  #c6ccd3;  --hell: #f0f3f6;  --grau: #959ba1;
}

/* --- Marine: tiefes Blau, naeher am Streifenwagen ------------------------ */
:root[data-thema="marine"] {
    --grund: #060d1a;  --flaeche: #0a1425;
    --karte: #0e1b31;  --karte2: #13223c;
    --rand:  #1c2f4f;  --randhell: #2a4570;
    --text:  #c2cee0;  --hell: #eef3fa;  --grau: #8e9aac;
}

/* --- Wald: dunkles Gruen, ruhig fuer lange Schichten -------------------- */
:root[data-thema="wald"] {
    --grund: #060d0b;  --flaeche: #0a1310;
    --karte: #0d1a16;  --karte2: #12231d;
    --rand:  #1b3129;  --randhell: #2a4a3d;
    --text:  #c1cfc8;  --hell: #eef6f2;  --grau: #8e9a94;
}

/* --- Wein: warmes Dunkelrot, fuer die Nachtschicht ---------------------- */
:root[data-thema="wein"] {
    --grund: #0c0709;  --flaeche: #130a0d;
    --karte: #1a0e12;  --karte2: #231318;
    --rand:  #331c23;  --randhell: #4d2b35;
    --text:  #d3c4c8;  --hell: #f7eef1;  --grau: #9d9094;
}

/* --- Glasmodus ----------------------------------------------------------
   Die Flaechen werden durchscheinend und milchig; damit die Unschaerfe
   ueberhaupt etwas zu tun hat, bekommt der Grund mehr Zeichnung. Wer
   backdrop-filter nicht kann, sieht schlicht halbtransparente Karten -
   kaputt geht dabei nichts. */
body.glas {
    --karte:  rgba(255,255,255,.055);
    --karte2: rgba(255,255,255,.085);
    --rand:   rgba(255,255,255,.11);
    --randhell: rgba(255,255,255,.2);
    /* Die Anteile waren 22 / 20 / 16 Prozent. An der hellsten Stelle
       (oben links) hob der Gold-Verlauf den Grund so weit, dass die
       stille Schrift auf der durchscheinenden Karte auf 3,75 bis
       4,29:1 fiel - unter die Schwelle. Halbiert: >= 4,83:1 an
       derselben Stelle, und der Schimmer ist weiter zu sehen. Wer hier
       wieder aufdreht, muss neu rechnen. */
    background-image:
        radial-gradient(760px 460px at 12% -8%,
            color-mix(in srgb, var(--gold) 10%, transparent), transparent 62%),
        radial-gradient(900px 560px at 88% 8%, rgba(77,143,209,.10), transparent 60%),
        radial-gradient(820px 620px at 55% 108%, rgba(141,128,214,.08), transparent 58%),
        linear-gradient(180deg, #0a0f1a 0%, var(--grund) 55%);
}
/* Bewusst NUR wenige grosse Flaechen: backdrop-filter auf vielen kleinen
   Elementen ruckelt, und die Leitstelle zeichnet sich im Takt neu. Der
   Kopf, der Vorhang und die Meldung bringen ihre Unschaerfe schon selbst
   mit und stehen deshalb nicht in dieser Liste - sonst stapelt es sich. */
body.glas .karte,
body.glas .leiste {
    backdrop-filter: blur(15px) saturate(150%);
    -webkit-backdrop-filter: blur(15px) saturate(150%);
}
/* Die Schublade NICHT. Sie liegt ueber dem Seiteninhalt, und in ihr wird
   gelesen und getippt - durchscheinend heisst dort, dass hinter jedem
   Wort etwas anderes steht. Bei bewegung=sparsam (Voreinstellung) fehlt
   zusaetzlich die Unschaerfe, dann steht der Inhalt sogar scharf
   dahinter. Also deckend, mit einem Hauch Aufhellung oben, damit sie im
   Glasmodus trotzdem wie eine gehobene Flaeche wirkt. Kostet auch
   nichts mehr: kein backdrop-filter auf der groessten beweglichen
   Flaeche. */
body.glas .schublade {
    /* Von --flaeche nach --grund: beides deckend und beides dunkler als
       die Karte. Hier stand einmal eine Aufhellung um 8 % Weiss, damit
       die Flaeche "gehoben" wirkt - die hat die stille Schrift von 5,51
       auf 4,64:1 gedrueckt, gemessen im Browser. Abgesetzt ist die
       Schublade durch den Goldstreifen an der Kante, den Schatten und
       den Verdunkler dahinter; ein Lichteffekt ist keinen Punkt
       Kontrast wert. */
    background: linear-gradient(180deg,
        var(--flaeche) 0%, var(--grund) 100%);
}
/* Die Revierspalten bekommen weniger: sie zeichnen sich im Takt neu, und
   jede Unschaerfe darunter muss dann mit. Sechs Pixel sehen fast gleich
   aus und kosten einen Bruchteil. */
body.glas .wsp {
    backdrop-filter: blur(6px) saturate(130%);
    -webkit-backdrop-filter: blur(6px) saturate(130%);
}
body.glas .karte, body.glas .wsp {
    box-shadow: 0 8px 30px rgba(0,0,0,.28),
                inset 0 1px 0 rgba(255,255,255,.06);
}

/* --- Der Aussehen-Dialog ------------------------------------------------ */
.as-gitter {
    display: grid; gap: .5rem; margin-bottom: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.as-probe {
    border: 1px solid var(--rand); border-radius: 10px; padding: .55rem;
    cursor: pointer; text-align: left; background: var(--karte2);
}
.as-probe:hover { border-color: var(--randhell); }
.as-probe.an { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(201,164,92,.3); }
.as-probe b { display: block; font-size: 12.5px; color: var(--hell); }
.as-streifen { display: flex; gap: 3px; margin-top: .4rem; }
.as-streifen i {
    flex: 1; height: 16px; border-radius: 3px; display: block;
    border: 1px solid rgba(255,255,255,.07);
}
.as-reihe {
    display: flex; align-items: center; gap: .7rem; padding: .55rem 0;
    border-top: 1px solid var(--rand);
}
.as-reihe label { flex: 1; font-size: 13px; color: var(--hell); }
.as-reihe i {
    display: block; font-style: normal; font-size: 11.5px; color: var(--grau);
    margin-top: .1rem;
}
.as-reihe input[type="color"] {
    width: 46px; height: 30px; padding: 0; border: 1px solid var(--rand);
    border-radius: 7px; background: none; cursor: pointer;
}

/* ---- Streifen-Tafel: Bauplan je Revier und Typ -------------------------
   Der Bauplan stand hier als eine Spalte aus Zeilen (.st-zeile) - JE
   BEREICH sechzehn davon. Er liegt jetzt als Kacheln in der Breite,
   ganz unten im Abschnitt "Streifen-Tafel, zweiter Aufbau". */
.st-mehr { margin: .35rem 0 .2rem; }
.st-mehr summary {
    cursor: pointer; font-size: 12px; color: var(--grau);
    padding: .25rem .1rem; list-style: none;
}
.st-mehr summary::before { content: '▸ '; }
.st-mehr[open] summary::before { content: '▾ '; }
.st-mehr summary:hover { color: var(--hell); }

/* ---- Zuweisen mit zwei Klicks ----------------------------------------- */
.zuweis {
    position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
    z-index: 60; display: flex; align-items: center; gap: .7rem;
    padding: .5rem .6rem .5rem .55rem; border-radius: 999px;
    background: color-mix(in srgb, var(--flaeche) 92%, transparent);
    border: 1px solid var(--gold);
    box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.3);
    max-width: min(92vw, 560px);
}
.zuweis .zw-wer {
    display: flex; align-items: center; gap: .45rem; min-width: 0;
    font-size: 13px; color: var(--hell);
}
.zuweis .zw-wer b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zuweis .zw-wer img, .zuweis .zw-wer .avatar {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
}
.zuweis .zw-text {
    font-size: 12px; color: var(--grau); white-space: nowrap;
    padding-left: .55rem; border-left: 1px solid var(--rand);
}
.zuweis button { flex: none; }
@media (prefers-reduced-motion: no-preference) {
    .zuweis { animation: zwRein .16s ease-out; }
    @keyframes zwRein {
        from { opacity: 0; transform: translate(-50%, 6px); }
        to   { opacity: 1; transform: translate(-50%, 0); }
    }
}
@media (max-width: 620px) { .zuweis .zw-text { display: none; } }

/* Im Zuweis-Modus ist jede Einheit ein Ziel - die freien deutlicher. */
.brett.wahl-an .e-karte { cursor: pointer; }
.brett.wahl-an .e-karte.e-frei {
    border-color: color-mix(in srgb, var(--gold) 55%, var(--rand));
    background: color-mix(in srgb, var(--gold) 7%, transparent);
}
.brett.wahl-an .e-karte:hover {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 0 16px -6px var(--gold);
}

/* Arten und ihre Reihenfolge - oben in der Streifen-Tafel. */
.st-art {
    display: grid; grid-template-columns: 22px 1fr auto auto auto auto;
    gap: .5rem; align-items: center; padding: .22rem 0;
}
/* Der dauerhafte Status je Art. Schmal gehalten: die Bezeichnung
   daneben ist das Feld, in dem wirklich getippt wird. */
.st-fest {
    margin: 0; padding: .3rem .4rem; font-size: 11.5px;
    max-width: 9.5rem; min-width: 0;
}
.st-nr {
    font-size: 11px; color: var(--grau); text-align: center;
    font-variant-numeric: tabular-nums;
}
.st-art input { margin: 0; padding: .38rem .5rem; font-size: 13px; }
.st-schluessel {
    font-size: 10px; color: var(--grau); padding: .1rem .45rem;
    border-radius: 999px; border: 1px solid var(--rand);
    background: var(--karte); white-space: nowrap;
}
.st-pfeile { display: flex; gap: .2rem; }
.st-pfeile button { padding: .2rem .45rem; line-height: 1; }

/* ---- Unit-Marke am Officer-Chip (AP31) --------------------------------
   Rechts am Namen steht die Unit statt des Rangs - in ihrer Farbe, bei
   mehreren in gleiche Felder geteilt. */
.crew .rk.uf {
    color: var(--uf, #9aa4b4);
    border: 1px solid color-mix(in srgb, var(--uf, #7e8899) 45%, transparent);
    background: color-mix(in srgb, var(--uf, #7e8899) 16%, transparent);
    letter-spacing: .06em;
}
/* Ab der dritten Unit nur noch "+n" - der Rest steht im Tooltip und
   laeuft farbig um das Bild. */
.crew .rk.uf.mehr { letter-spacing: 0; opacity: .85; cursor: default; }

/* ---- Unit-Katalog: das Verwalten-Menue --------------------------------- */
.uk-zeile {
    display: grid; grid-template-columns: 22px 10px 1fr auto; gap: .5rem;
    align-items: center; padding: .4rem 0;
    border-bottom: 1px solid var(--rand);
}
.uk-zeile:last-child { border-bottom: none; }
.uk-zeile.aus { opacity: .42; }
.uk-an { display: flex; align-items: center; }
.uk-an input { margin: 0; width: 16px; height: 16px; accent-color: var(--gold); }
.uk-punkt { width: 10px; height: 10px; border-radius: 50%; display: block; }
.uk-felder {
    display: grid; grid-template-columns: 1fr 84px 122px; gap: .4rem;
    align-items: center;
}
/* Das Logo einer Unit: Auswahl mit Vorschau daneben (22.09.). */
.uk-logo { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.uk-logo-schau {
    display: flex; flex: 0 0 auto; width: 18px; height: 18px;
    color: var(--gold);
}
.uk-logo-schau svg { width: 18px; height: 18px; }
/* NICHT width:100% - das misst sich am Flex-Behaelter und legt die
   Auswahl ueber ihre eigene Vorschau (gesehen, 22.09.). Sie nimmt den
   Rest der Zeile. */
.uk-logo select {
    margin: 0; flex: 1 1 auto; width: auto; min-width: 0;
    padding: .3rem .25rem; font-size: 12px;
}
/* Das Logo bekommt eine EIGENE ZEILE - nicht aus Bequemlichkeit,
   sondern gemessen: die Schublade ist rund 520 px breit, und vier
   Spalten (Name, Kuerzel, Farbe, Logo) druecken den Anzeigenamen auf
   18 px. Die dritte Spalte ist jetzt auch wirklich so breit, wie das
   Farbfeld ist (Tupfer 34 px + Hex-Feld 82 px) - vorher stand sie auf
   46 px, und das Hex-Feld ragte ueber die Nachbarspalte. Die Haken
   "Leiste" und "Antraege" stehen ohnehin schon je in ihrer Zeile. */
.uk-felder .uk-logo { grid-column: 1 / -1; }
.uk-felder input { margin: 0; padding: .34rem .5rem; font-size: 13px; }
.uk-felder .uk-kurz { text-align: center; }
/* Das Hinweisfeld traegt einen Satz und kein Kuerzel - es laeuft ueber
   alle drei Spalten des Rasters, sonst stuenden 300 Zeichen in 46 px. */
.uk-felder .uk-hinweis { grid-column: 1 / -1; }
.uk-felder .uk-farbe {
    padding: 0; height: 30px; border: 1px solid var(--rand);
    border-radius: 7px; background: none; cursor: pointer;
}
/* Ein Wort in der Herkunftszeile, das nicht uebersehen werden darf -
   "Kanal fehlt" und "Kanal wird geloescht" (22.09.). */
.uk-quelle .warnwort { color: var(--rot); font-weight: 600; }
.uk-quelle {
    grid-column: 1 / -1; font-style: normal; font-size: 11px;
    color: var(--grau); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
}
.uk-pfeile { display: flex; gap: .2rem; }
.uk-pfeile button { padding: .2rem .45rem; line-height: 1; }
.uk-wahl { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 13px; }
.uk-wahl label { display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.uk-wahl input { accent-color: var(--gold); }

/* Die Unit-Kachel traegt ihre Farbe als Kante. */
.u-chips button { border-left: 3px solid var(--uf, transparent); }

/* ---- Code an der Einheit setzen (AP32) ---------------------------------
   Die Marke auf der Karte ist ein Knopf, sobald man sie setzen darf -
   Leitung, der Sitzinhaber des Reviers oder die eigene Besatzung. */
.code-knopf {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: 0; margin: 0; border: none; background: none;
    cursor: pointer; line-height: 1;
}
.code-knopf .ck-pfeil { font-size: 9px; color: var(--grau); }
.code-knopf:hover .code { filter: brightness(1.25); }
.code-knopf:hover .ck-pfeil { color: var(--hell); }

/* Das kleine Menue: haengt am body, damit es aus keiner Karte
   herausgeschnitten wird. */
.popmenue {
    position: fixed; z-index: 80; min-width: 178px;
    padding: .3rem; border-radius: 10px;
    background: color-mix(in srgb, var(--flaeche) 96%, transparent);
    border: 1px solid var(--randhell);
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.pop-kopf {
    font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--grau); padding: .3rem .5rem .35rem;
}
.pop-zeile {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .38rem .5rem; margin: 0; border: none; background: none;
    border-radius: 7px; color: var(--text); font-size: 12.5px;
    text-align: left; cursor: pointer;
}
.pop-zeile:hover { background: var(--karte2); }
.pop-zeile.an { color: var(--goldhell); font-weight: 700; }
.pop-zeile.aus { color: var(--grau); border-top: 1px solid var(--rand);
    margin-top: .25rem; padding-top: .45rem; border-radius: 0 0 7px 7px; }
.pop-zeile .cp {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: currentColor;
}
/* Die Einsaetze unter den Codes (23.09.): eine eigene Ueberschrift mit
   Trennlinie, damit nicht eine Zeile weiter unten aus einem Code ein
   Einsatz wird, ohne dass es jemand merkt. */
.pop-trenn {
    border-top: 1px solid var(--rand);
    margin-top: .3rem; padding-top: .45rem;
}
/* Der Funkcode als schmale Spalte vor dem Titel - die Zeilen stehen
   dadurch untereinander bündig, auch wenn ein Einsatz keinen hat. */
.pop-funk {
    flex: none; min-width: 26px; text-align: center;
    font-size: 11px; font-weight: 800; letter-spacing: .04em;
    font-variant-numeric: tabular-nums; color: var(--gruen);
}
.pop-zeile.an .pop-funk { color: inherit; }

/* Die Knopfreihe am Fuss des Einsatzes. Der harmlose Knopf steht links
   und heisst, was er tut; die zwei, die den Einsatz beenden, sind durch
   die Linie darueber sichtbar etwas anderes als der Rest des Blattes. */
.s-abschluss {
    margin-top: 1.4rem; padding-top: .9rem;
    border-top: 1px solid var(--rand);
}
@media (prefers-reduced-motion: no-preference) {
    .popmenue { animation: popRein .12s ease-out; }
    @keyframes popRein { from { opacity: 0; transform: translateY(-4px); } }
}

/* ---- Aussehen: Ecken und Dichte (AP32) --------------------------------
   Zwei Regler, die dem ganzen Bereich einen anderen Charakter geben,
   ohne dass irgendwo eine zweite Farbtabelle noetig waere. */
:root { --signal: #ef8f34; }

:root[data-ecken="kantig"] .karte,
:root[data-ecken="kantig"] .wsp,
:root[data-ecken="kantig"] .e-karte,
:root[data-ecken="kantig"] .schublade,
:root[data-ecken="kantig"] .popmenue,
:root[data-ecken="kantig"] button,
:root[data-ecken="kantig"] input,
:root[data-ecken="kantig"] select,
:root[data-ecken="kantig"] textarea { border-radius: 3px; }
:root[data-ecken="kantig"] .crew,
:root[data-ecken="kantig"] .pool-chip { border-radius: 4px; }
:root[data-ecken="kantig"] .schublade { border-radius: 0; }

:root[data-ecken="rund"] .karte,
:root[data-ecken="rund"] .wsp { border-radius: 18px; }
:root[data-ecken="rund"] .e-karte,
:root[data-ecken="rund"] .popmenue { border-radius: 14px; }
:root[data-ecken="rund"] button,
:root[data-ecken="rund"] input,
:root[data-ecken="rund"] select,
:root[data-ecken="rund"] textarea { border-radius: 10px; }
:root[data-ecken="rund"] .schublade { border-radius: 22px 0 0 22px; }

/* Eng: dieselbe Ordnung, nur naeher zusammen - fuer den Zweitbildschirm,
   auf dem die Leitstelle den ganzen Dienst laeuft. */
/* Die Dichte bestimmt auch die BREITE des Bereichs - eng heisst
   schmaler und deutlich mittig, weit ausladend. Justin: "dann an
   dichte anpassen generell". Sie gilt fuer alles, nicht nur die
   Tafel, sonst haette jede Ansicht ihre eigene Vorstellung davon. */
:root[data-dichte="eng"] .karte .inhalt { padding: .6rem .65rem; }
:root[data-dichte="eng"] .karte > h2 { padding: .5rem .65rem; }
:root[data-dichte="eng"] .wsp { padding: .5rem .5rem .35rem; }
:root[data-dichte="eng"] .e-karte { padding: .3rem .45rem; }
:root[data-dichte="eng"] td { padding: .32rem .6rem; }
:root[data-dichte="eng"] th { padding: .3rem .6rem; }
:root[data-dichte="eng"] .brett { gap: .6rem; }
:root[data-dichte="eng"] .spalten { gap: .6rem; }
:root[data-dichte="eng"] main { padding: .7rem; max-width: 1180px; }

/* Weit: mehr Luft, wenn der Bereich auf einem grossen Schirm laeuft. */
:root[data-dichte="weit"] .karte .inhalt { padding: 1.3rem; }
:root[data-dichte="weit"] .wsp { padding: 1rem 1rem .8rem; }
:root[data-dichte="weit"] td { padding: .72rem .9rem; }
:root[data-dichte="weit"] .brett { gap: 1.4rem; }
:root[data-dichte="weit"] main { padding: 1.6rem; max-width: 1680px; }

/* Drei-Wege-Schalter im Aussehen-Dialog. */
.as-schalter { display: flex; gap: 0; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--rand); }
.as-schalter button {
    margin: 0; border: none; border-radius: 0; padding: .32rem .6rem;
    font-size: 12px; background: var(--karte); color: var(--grau);
    border-right: 1px solid var(--rand);
}
.as-schalter button:last-child { border-right: none; }
.as-schalter button:hover { color: var(--hell); background: var(--karte2); }
.as-schalter button.an {
    background: color-mix(in srgb, var(--gold) 22%, transparent);
    color: var(--goldhell); font-weight: 700;
}

/* Ab der dritten Unit eingeklappt - beim Darueberfahren stehen alle da.
   Rein ueber CSS, damit es ohne Verzoegerung erscheint. */
.crew .rk.uf.extra { display: none; }
.crew:hover .rk.uf.extra { display: inline-block; }
.crew:hover .rk.uf.mehr { display: none; }
/* In der Pool-Kachel ist die Breite fest: dort gibt der NAME nach,
   damit die Marken hineinpassen statt abgeschnitten zu werden. */
#l-pool .pool-chip:hover .cn { flex: 0 1 auto; min-width: 1.5rem; }

/* ---- Profilkarte beim Darueberfahren (AP33) ---------------------------- */
.profilkarte {
    /* Anfassbar seit AP34: unten sitzen echte Knoepfe. */
    position: fixed; z-index: 85; width: 268px;
    padding: .75rem .8rem .6rem; border-radius: 14px; overflow: hidden;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--karte2) 92%, transparent) 0%,
            color-mix(in srgb, var(--flaeche) 98%, transparent) 46%);
    /* Zwei Kanten statt einer: aussen eine dunkle Fassung, innen eine
       helle Haarlinie - das ist der Unterschied zwischen "Kasten" und
       "Karte". */
    border: 1px solid color-mix(in srgb, var(--gold) 26%, var(--rand));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 0 0 1px rgba(0,0,0,.45),
        0 20px 46px rgba(0,0,0,.5);
}
/* Oben die Farbe der ersten Unit als Band - dieselbe Sprache wie der
   Ring um das Bild. */
/* Die Gastkarte ist reine Auskunft - kein Knopf, nichts anzuklicken.
   Deshalb darf die Maus durch sie hindurch auf den naechsten Chip:
   sonst verdeckt eine offene Karte ihre Nachbarn, und der zweite
   Officer, ueber den man faehrt, bekommt keine mehr. Die
   Officer-Karte bleibt anfassbar - dort sitzt der Akte-Knopf. */
.profilkarte.gast { pointer-events: none; }

/* --- Der eigene Hinweis statt des Browser-Tooltips -------------------- */
#tipp {
    position: fixed; z-index: 9999; top: 0; left: 0;
    max-width: 260px; padding: .38rem .55rem;
    border-radius: 8px; border: 1px solid var(--rand);
    background: var(--karte, #141b28);
    color: var(--text); font-size: 12px; line-height: 1.35;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    /* Der Hinweis darf die Maus NIE anfassen: sonst loest er ein
       mouseout auf dem Knopf aus, raeumt sich weg, der Knopf bekommt
       wieder ein mouseover - und es flackert. */
    pointer-events: none;
    opacity: 0; transform: translateY(2px);
    transition: opacity .12s ease, transform .12s ease;
    white-space: normal;
}
#tipp.da { opacity: 1; transform: none; }
#tipp b { color: var(--gold, #c9a45c); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
    #tipp { transition: none; }
}
/* Auf dem Handy gibt es kein Drueberfahren - dort waere der Hinweis nur
   ein Kasten, der beim Tippen aufblitzt. */
[data-geraet="handy"] #tipp { display: none; }

.profilkarte::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--pfband, var(--gold));
}
.pf-kopf { display: flex; align-items: center; gap: .6rem; }
.pf-name { min-width: 0; }
.pf-name b {
    display: block; font-size: 14px; color: var(--hell);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-name i {
    font-style: normal; font-size: 11.5px; color: var(--grau);
    font-variant-numeric: tabular-nums;
}
.pf-units { display: flex; flex-wrap: wrap; gap: .25rem; margin: .55rem 0 .1rem; }
.pf-units .u-chip { margin-left: 0; }
.pf-liste { margin-top: .5rem; display: grid; gap: .18rem; }
.pf-zeile {
    display: flex; align-items: baseline; gap: .6rem; font-size: 12px;
}
.pf-zeile span {
    color: var(--grau); font-size: 10.5px; letter-spacing: .07em;
    text-transform: uppercase; flex: none; width: 92px;
}
.pf-zeile b {
    color: var(--text); font-weight: 600; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-fuss {
    margin-top: .55rem; padding-top: .5rem; border-top: 1px solid var(--rand);
    display: flex; gap: .4rem;
}
.pf-fuss button {
    flex: 1; font-size: 11px; padding: .3rem .4rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (prefers-reduced-motion: no-preference) {
    .profilkarte { animation: popRein .12s ease-out; }
}
@media (max-width: 720px) { .profilkarte { display: none; } }

/* ---- Bewegung: sparsam ------------------------------------------------
   Ein Regler fuer schwache Rechner und fuer alle, denen der Bereich zu
   unruhig ist: keine Uebergaenge, keine Dauerlaeufer, keine Unschaerfe.
   Die Anzeige bleibt vollstaendig - nur still. */
:root[data-bewegung="sparsam"] *,
:root[data-bewegung="sparsam"] *::before,
:root[data-bewegung="sparsam"] *::after {
    animation: none !important;
    transition: none !important;
}
:root[data-bewegung="sparsam"] .einheit.s-notruf::after,
:root[data-bewegung="sparsam"] .e-karte.s-notruf::after,
:root[data-bewegung="sparsam"] .code.rot::after { opacity: 1; }
:root[data-bewegung="sparsam"] #anwendung > header::before {
    background-position: 0 0;
}
:root[data-bewegung="sparsam"] .e-karte:hover,
:root[data-bewegung="sparsam"] .pool-chip:hover,
:root[data-bewegung="sparsam"] .code-pille:hover { transform: none; }
:root[data-bewegung="sparsam"] body.glas .karte,
:root[data-bewegung="sparsam"] body.glas .leiste,
:root[data-bewegung="sparsam"] body.glas .wsp,
:root[data-bewegung="sparsam"] #anwendung > header,
:root[data-bewegung="sparsam"] .dunkel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ---- Vier weitere Schemata (AP33) -------------------------------------
   Alle nach demselben Muster: nur die Variablen, kein zweiter Satz
   Regeln. Dunkel bleiben sie - die gewachsenen Bloecke tragen an vielen
   Stellen feste dunkle Werte, ein Hellmodus waere ein eigenes Paket. */

/* Kupfer: warmes Braun, Werkstatt statt Rechenzentrum. */
:root[data-thema="kupfer"] {
    --grund: #0b0806;  --flaeche: #14100c;
    --karte: #1a1510;  --karte2: #221b14;
    --rand:  #2d2419;  --randhell: #46392a;
    --text:  #d6c8b6;  --hell: #f6efe5;  --grau: #9e9385;
}

/* Nebel: blaugraues Zwielicht, sehr ruhig. */
:root[data-thema="nebel"] {
    --grund: #0b0e11;  --flaeche: #121619;
    --karte: #171c21;  --karte2: #1e242a;
    --rand:  #29323a;  --randhell: #3d4a55;
    --text:  #c3ccd4;  --hell: #eef3f7;  --grau: #939ba2;
}

/* Tinte: tiefes Indigo, fast schwarzblau. */
:root[data-thema="tinte"] {
    --grund: #06060f;  --flaeche: #0b0b1a;
    --karte: #101024;  --karte2: #171730;
    --rand:  #22224a;  --randhell: #33336b;
    --text:  #c2c2e0;  --hell: #eeeeff;  --grau: #9191ab;
}

/* Kohle: neutrales Schwarzgrau, hoher Kontrast fuer helle Raeume. */
:root[data-thema="kohle"] {
    --grund: #000000;  --flaeche: #0b0b0b;
    --karte: #131313;  --karte2: #1b1b1b;
    --rand:  #292929;  --randhell: #444444;
    --text:  #d2d2d2;  --hell: #ffffff;  --grau: #949494;
}

/* ---- Leiste einrichten und Revier zuteilen (AP34) ---------------------- */
#tabs [data-ansicht].vom-nutzer-aus { display: none; }

.hd-zeile {
    display: flex; align-items: center; gap: .6rem; padding: .4rem 0;
    border-bottom: 1px solid var(--rand); font-size: 13px;
}
.hd-zeile:last-child { border-bottom: none; }
.hd-zeile.aus { opacity: .45; }
.hd-nr {
    font-size: 11px; color: var(--grau); width: 18px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.hd-zeile b { flex: 1; color: var(--hell); font-weight: 600; }
.hd-knoepfe {
    display: flex; gap: .25rem; flex-wrap: wrap; justify-content: flex-end;
}
.hd-knoepfe button { margin: 0; padding: .2rem .5rem; line-height: 1.1; }

/* Am Handy passen drei Knopfnamen nicht neben ihr Etikett: der
   Schalter endete bei 433 px von 390, und sein eigenes
   `overflow: hidden` (fuer die runden Ecken) laesst dort nichts
   rollen - "Grenzposten" war nicht erreichbar. Unter 560 px bekommt
   das Etikett die ganze Zeile und der Schalter die naechste. Nur in
   diesem Dialog: dieselben Klassen stehen auch im Aussehen-Dialog,
   und dort passen die Schalter. */
@media (max-width: 560px) {
    #hd-box .as-reihe { flex-wrap: wrap; }
    #hd-box .as-reihe label { flex: 1 0 100%; }
    /* Vier Knoepfe (↑ ↓ + an) passen am Handy nicht neben Namen und
       Zeichenfeld. Nicht abschneiden und nicht mal so, mal so
       umbrechen: hier steht der Name oben und die Knopfreihe
       darunter - in jeder Zeile gleich. */
    .hd-zeile { flex-wrap: wrap; padding: .3rem 0; }
    .hd-zeile b { min-width: 0; }
    .hd-knoepfe { flex: 1 0 100%; justify-content: flex-end; margin-top: .15rem; }
}

.rv-wahl { display: grid; gap: .5rem; }
.rv-karte {
    display: block; width: 100%; text-align: left; padding: .6rem .7rem;
    border-radius: 10px; border: 1px solid var(--rand);
    background: var(--karte); border-left: 4px solid var(--wf, #7e8899);
}
.rv-karte:hover { border-color: var(--wf, var(--randhell)); background: var(--karte2); }
.rv-karte.an { box-shadow: inset 0 0 0 1px var(--wf, var(--gold)); }
.rv-karte b { display: block; font-size: 13.5px; color: var(--hell); }
.rv-karte i {
    font-style: normal; font-size: 11.5px; color: var(--grau);
}
.rv-jetzt {
    float: right; font-size: 10.5px; color: var(--goldhell);
    letter-spacing: .06em; text-transform: uppercase;
}

/* ---- Das bewegliche Fenster (AP35) ------------------------------------
   Kein Vorhang, keine Unschaerfe: wer das Aussehen einrichtet, will den
   Bereich dahinter SEHEN, waehrend er dreht. */
.fenster {
    position: fixed; z-index: 70; width: min(420px, calc(100vw - 24px));
    max-height: min(78vh, 760px); display: flex; flex-direction: column;
    border-radius: 14px; overflow: hidden;
    background: var(--flaeche);
    border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--rand));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
        0 0 0 1px rgba(0,0,0,.45), 0 26px 60px rgba(0,0,0,.55);
}
.fenster.zieht { user-select: none; cursor: grabbing; }
.fe-kopf {
    display: flex; align-items: center; gap: .6rem; cursor: grab;
    padding: .6rem .5rem .6rem .85rem;
    border-bottom: 1px solid var(--golddun);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gold) 12%, transparent), transparent);
}
.fe-kopf b {
    flex: 1; font-size: 13px; color: var(--hell); letter-spacing: .02em;
}
/* Griffrillen: das Fenster soll aussehen, als koennte man es anfassen. */
.fe-kopf::before {
    content: ''; width: 10px; height: 12px; flex: none; opacity: .5;
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 4px 4px; color: var(--gold);
}
.fe-zu {
    margin: 0; padding: .15rem .45rem; line-height: 1;
    background: none; border: none; color: var(--grau); font-size: 14px;
}
.fe-zu:hover { color: var(--rot); background: none; }
.fe-rumpf { padding: .9rem 1rem 1rem; overflow-y: auto; }
.fe-rumpf .s-abschnitt:first-child { margin-top: 0; }
@media (max-width: 620px) {
    .fenster { left: 8px !important; right: 8px; width: auto; }
}

/* ---- Reviere unter Personal (AP35) ------------------------------------ */
.rv-tafel {
    display: grid; gap: .7rem; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.rv-spalte {
    border: 1px solid var(--rand); border-radius: 10px;
    border-top: 3px solid var(--wf, #7e8899);
    background: var(--karte); padding: .5rem .5rem .35rem;
}
.rv-spalte.drop-ziel {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 0 18px -6px var(--gold);
}
.rv-spalte.ohne { opacity: .85; }
.rv-kopf {
    display: flex; align-items: baseline; gap: .5rem; padding: .1rem .2rem .45rem;
}
.rv-kopf b { flex: 1; font-size: 12.5px; color: var(--hell); }
.rv-zahl {
    font-size: 11px; color: var(--grau); font-variant-numeric: tabular-nums;
}
.rvz {
    display: flex; align-items: center; gap: .45rem; cursor: grab;
    padding: .26rem .35rem; border-radius: 7px; font-size: 12.5px;
    border: 1px solid transparent;
}
.rvz:hover { background: var(--karte2); border-color: var(--rand); }
.rvz:active { cursor: grabbing; }
.rvz b { flex: 1; color: var(--text); font-weight: 600; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvz[data-gewaehlt] {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 0 14px -4px var(--gold);
}
.rvz .online { font-size: 9px; }

/* ---- Fenster: Groesse aendern (AP36) ---------------------------------- */
.fe-griff {
    position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
    cursor: nwse-resize; z-index: 2;
}
.fe-griff::before {
    content: ''; position: absolute; right: 3px; bottom: 3px;
    width: 9px; height: 9px; opacity: .55;
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 4px 4px; color: var(--gold);
}
.fe-griff:hover::before { opacity: 1; }
/* Wird die Hoehe gesetzt, muss der Rumpf mitwachsen statt ueberzulaufen. */
.fenster { min-width: 280px; min-height: 180px; }
.fenster .fe-rumpf { flex: 1; min-height: 0; }

/* ---- Eigene Zeichen und Groesse der Leiste (AP36) --------------------- */
.leiste nav button.eigenes-zeichen svg { display: none; }
.tab-eigen { font-size: 20px; line-height: 1; }

:root[data-leiste="klein"] .leiste { width: 52px; }
:root[data-leiste="klein"] #anwendung { padding-left: 52px; }
:root[data-leiste="klein"] .leiste nav button,
:root[data-leiste="klein"] .leiste-aus { width: 36px; height: 36px; border-radius: 10px; }
:root[data-leiste="klein"] .leiste nav button svg,
:root[data-leiste="klein"] .leiste-aus svg { width: 17px; height: 17px; }
:root[data-leiste="klein"] .tab-eigen { font-size: 16px; }

:root[data-leiste="gross"] .leiste { width: 82px; }
:root[data-leiste="gross"] #anwendung { padding-left: 82px; }
:root[data-leiste="gross"] .leiste nav button,
:root[data-leiste="gross"] .leiste-aus { width: 58px; height: 58px; border-radius: 17px; }
:root[data-leiste="gross"] .leiste nav button svg,
:root[data-leiste="gross"] .leiste-aus svg { width: 27px; height: 27px; }
:root[data-leiste="gross"] .tab-eigen { font-size: 26px; }

/* Kuerzel-Zeichen der dynamischen Unit-Reiter (SWAT, SHP, ...) - eine
   eigene Klasse, denn .tab-eigen raeumt hudAnwenden() weg, wenn kein
   selbstgewaehltes Zeichen gesetzt ist. */
.tab-unit { font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
:root[data-leiste="klein"] .tab-unit { font-size: 9.5px; }
:root[data-leiste="gross"] .tab-unit { font-size: 13px; }
.eigenes-zeichen .tab-unit { display: none; }

/* Der 'Leiste'-Haken im Unit-Katalog. */
.uk-bereich {
    grid-column: 1 / -1; display: flex; align-items: center; gap: .35rem;
    font-size: 11.5px; white-space: nowrap; cursor: pointer;
}
.uk-bereich input { margin: 0; width: 14px; height: 14px; accent-color: var(--gold); }

/* Symbol und eigenes Zeichen in der Editorzeile. */
.hd-symbol, .hd-eigen {
    width: 22px; height: 22px; flex: none;
    display: grid; place-items: center; color: var(--gold);
}
.hd-symbol svg { width: 18px; height: 18px; }
.hd-eigen { font-size: 17px; }
.hd-zeichen {
    width: 46px; margin: 0; padding: .22rem .3rem; text-align: center;
    font-size: 15px; line-height: 1.2;
}

/* ---- Reports-Briefkasten & eigene Nummer (AP35) ------------------------ */

/* Der dicke Trennstrich ueber dem Fuss der Leiste (Diensthandbuch,
   Ideen & Bugs, Abmelden): links satt, nach rechts auslaufend
   (Justin: "nen dicken strich ... mit nen fade nach rechts hin").
   ER traegt jetzt das margin-top: auto, das den Fuss nach unten
   drueckt - vorher sass das am Handbuch-Knopf. */
.leiste-fussstrich {
    flex: none; width: 40px; height: 3px; border-radius: 999px;
    margin: auto 0 .5rem;
    background: linear-gradient(90deg, var(--gold) 0%,
        rgba(201,164,92,.28) 65%, transparent 100%);
}
/* Quer-Layouts bauen den Fuss als Reihe - da waere der Strich ein
   Fremdkoerper. */
html[data-geraet="handy"] .leiste-fussstrich { display: none; }
/* Ausgeklappt zieht sich der Strich ueber die ganze Breite - die
   Leiste steht dann auf align-items:stretch, width:100% folgt ihr. */
html[data-geraet="tisch"][data-leiste-auf="ja"] .leiste-fussstrich {
    width: 100%;
}
.leiste-buch { margin-top: 0; }
.leiste-report { margin-top: .3rem; }
.leiste-aus { margin-top: .3rem; }
/* Gewaehlt sieht das Handbuch aus wie ein gewaehlter Reiter - es ist
   einer, er steht nur woanders. */
.leiste-buch.an {
    color: #100c04;
    background: linear-gradient(180deg, var(--goldhell) 0%, var(--gold) 100%);
    border-color: var(--goldhell);
    box-shadow: 0 0 16px rgba(201,164,92,.45), 0 4px 12px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.5);
}

/* Die eigene Dienstnummer oben rechts - dieselbe Marken-Sprache wie
   [PD-###] ueberall sonst im Bereich. */
.ich-nr {
    font-size: 12px; font-weight: 700; color: var(--gold);
    border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rand));
    background: color-mix(in srgb, var(--gold) 10%, transparent);
    padding: .22rem .5rem; border-radius: 9px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    align-self: center;
}

.rp-zeile {
    border: 1px solid var(--rand); border-radius: 10px;
    padding: .5rem .6rem; margin-bottom: .5rem; background: var(--karte);
}
.rp-kopf { display: flex; align-items: center; gap: .4rem; font-size: 12px; }
.rp-text {
    margin-top: .3rem; font-size: 12.5px;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.rp-antwort {
    margin-top: .35rem; font-size: 12px; color: var(--gold);
    border-left: 2px solid var(--gold); padding-left: .5rem;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.rp-tun { margin-top: .45rem; }
.rp-tun input { flex: 1; min-width: 0; }
#rp-art button.an { border-color: var(--gold); color: var(--gold); }

/* ---- Schaumodus: das Band fuer Gaeste (AP37) --------------------------- */
.schau-band {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    padding: .45rem 1rem; font-size: 12px;
    color: #1c1206; background: linear-gradient(180deg, #f0c164, #d9a13c);
    box-shadow: 0 -6px 20px rgba(0,0,0,.35);
}
.schau-band b { letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
.schau-band span { opacity: .85; }
/* Das Band nimmt unten Platz weg - der Bereich rueckt nach. */
body:has(.schau-band) main { padding-bottom: 3.2rem; }
body:has(.schau-band) .zuweis { bottom: 3.4rem; }

/* ---- Report-Stimmen & Tonwert-Regler (AP36) ---------------------------- */

.rp-stimmen {
    font-size: 11px; font-weight: 700; padding: .12rem .5rem;
    border-radius: 999px; border: 1px solid var(--rand);
    background: var(--karte2); color: var(--text);
    font-variant-numeric: tabular-nums; line-height: 1.4;
}
button.rp-stimmen { cursor: pointer; }
button.rp-stimmen:hover:not(:disabled) {
    border-color: var(--gold); color: var(--gold);
}
button.rp-stimmen:disabled { opacity: .45; cursor: default; }
.rp-stimmen.an {
    border-color: var(--gold); color: var(--gold);
    background: color-mix(in srgb, var(--gold) 12%, transparent);
}

.as-reihe input[type=range] { flex: 1; min-width: 0; accent-color: var(--gold); }
.as-wert {
    flex: none; width: 44px; text-align: right;
    font-size: 11.5px; font-variant-numeric: tabular-nums;
}

/* Der Schaumodus-Link in der Verwaltung. */
.schau-link { display: flex; gap: .4rem; align-items: center; }
.schau-link input {
    flex: 1; margin: 0; font-family: ui-monospace, monospace; font-size: 12.5px;
}
.schau-link button { margin: 0; flex: none; }

/* Gespeicherte Aussehen-Vorlagen. */
.as-vorlage {
    display: flex; align-items: center; gap: .55rem; padding: .35rem 0;
    border-bottom: 1px solid var(--rand); font-size: 13px;
}
.as-vorlage:last-child { border-bottom: none; }
.as-vorlage .as-streifen { width: 58px; flex: none; margin: 0; }
.as-vorlage .as-streifen i { height: 13px; }
.as-vorlage b { flex: 1; color: var(--hell); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-vorlage button { margin: 0; padding: .2rem .5rem; }
#as-vname { flex: 1; margin: 0; }

/* ---- Verbund: drei Leitstellen zu einer (AP39) ------------------------------
   Die Leiste ueber der Tafel sagt, wie duenn es gerade ist, und traegt den
   einen Knopf. Zusammengeschaltet wird sie zum Band, das den Zustand
   festhaelt - man soll nie raten muessen, ob man gerade im Verbund ist. */
.verbund-leiste {
    display: flex; align-items: center; gap: .7rem;
    margin: 0 0 .9rem; padding: .6rem .8rem;
    border: 1px solid var(--rand); border-radius: 10px;
    background: var(--karte);
}
.verbund-leiste .vb-marke { font-size: 18px; line-height: 1; }
.verbund-leiste .vb-text { flex: 1; min-width: 0; }
.verbund-leiste .vb-text b {
    display: block; color: var(--hell); font-size: 13px; font-weight: 600;
}
.verbund-leiste .vb-text i {
    display: block; color: var(--grau); font-size: 12px; font-style: normal;
    margin-top: .1rem;
}
.verbund-leiste button { margin: 0; white-space: nowrap; }
/* Der uebergeordnete Leitstellen-Platz in der Leiste - der Baustein ist
   fuer die Spalte gebaut und bringt einen Unterrand mit, der hier stoert. */
/* Duenn besetzt: der Vorschlag faellt auf, bleibt aber ein Vorschlag. */
.verbund-leiste.tipp-an {
    border-color: color-mix(in srgb, var(--gold) 55%, var(--rand));
    background: color-mix(in srgb, var(--gold) 7%, var(--karte));
}
.verbund-leiste.an {
    border-color: color-mix(in srgb, var(--signal) 50%, var(--rand));
    background: color-mix(in srgb, var(--signal) 8%, var(--karte));
}

/* Die wsp-verbund-Regeln (eine zusammengelegte Spalte) sind seit dem
   07.09. weg - der Verbund laesst die Revierspalten stehen. */

/* Vor dem Zusammenschalten: wer sitzt gerade in welchem Revier. */
.vb-vorschau { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 .2rem; }
.vb-vor {
    padding: .18rem .5rem; border-radius: 6px; font-size: 11px;
    color: var(--rf, var(--grau));
    border: 1px solid color-mix(in srgb, var(--rf, #7e8899) 40%, transparent);
    background: color-mix(in srgb, var(--rf, #7e8899) 10%, transparent);
}
.vb-vor b { color: var(--hell); margin-left: .2rem; }

/* ---- Kennzahlen (AP40) ------------------------------------------------------
   Die Leitung liest hier oben die acht Zahlen, die eine Entscheidung
   ausloesen, und darunter die Bilder, die sie erklaeren. Nichts blinkt und
   nichts blendet ein: der Bereich wird beim Poll neu gemalt. */
.kpi-gitter {
    display: grid; gap: .6rem; margin-bottom: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.kpi {
    background: var(--karte); border: 1px solid var(--rand);
    border-radius: 10px; padding: .6rem .75rem;
}
.kpi b {
    display: block; font-size: 1.45rem; line-height: 1.15;
    color: var(--hell); font-weight: 700;
}
.kpi span {
    display: block; font-size: 10px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--grau); margin-top: .1rem;
}
.kpi i {
    display: block; font-style: normal; font-size: .74rem;
    color: var(--grau); margin-top: .3rem;
}
.kpi.gut b { color: #6cc08a; }
.kpi.warn b { color: #e7a95e; }
.kpi.warn { border-color: color-mix(in srgb, #e7a95e 40%, var(--rand)); }

.kz-reihe {
    display: grid; gap: .8rem; margin-bottom: .8rem; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.kz-reihe .karte { margin: 0; }

/* Zu- und Abgaenge: zwei Saeulen je Monat, nebeneinander statt gestapelt -
   gestapelt saehe ein Monat mit 3 ein und 3 aus wie Wachstum aus. */
.bew-balken { display: flex; align-items: flex-end; gap: .5rem; height: 84px; }
.bw { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.bw-saeulen {
    flex: 1; width: 100%; display: flex; align-items: flex-end;
    justify-content: center; gap: 3px;
}
.bw-saeulen i {
    width: 42%; min-height: 3px; border-radius: 3px 3px 0 0;
    background: rgba(255,255,255,.07);
}
.bw-saeulen i.ein { background: linear-gradient(180deg, #6cc08a, #3f7d57); }
.bw-saeulen i.aus { background: linear-gradient(180deg, #e0796f, #94443c); }
.bw span { font-size: 10px; color: var(--grau); }
.bw-legende::before {
    content: ''; display: inline-block; width: 8px; height: 8px;
    border-radius: 2px; margin-right: .3rem; vertical-align: middle;
}
.bw-legende.ein::before { background: #6cc08a; }
.bw-legende.aus::before { background: #e0796f; }

.kz-person {
    display: flex; align-items: center; gap: .45rem;
    padding: .32rem 0; border-bottom: 1px solid var(--rand);
}
.kz-person:last-child { border-bottom: 0; }
.kz-person b { font-weight: 600; }
.kz-person .rechts { margin-left: auto; }

/* ---- Sättigung (AP41) -------------------------------------------------------
   Justin: "sättigung etc geht um die farben nh". Der Regler wirkte vorher
   nur auf die neun Grundwerte - fast neutrale Blautoene, an denen es kaum
   etwas zu saettigen gibt. Jetzt liegt er als Filter ueber den
   Oberflaechen und trifft damit auch Revierfarben, Unit-Marken,
   Code-Marken und Bilder.

   NICHT auf html/body: ein Filter dort zieht jedem position:fixed-Element
   den Bezugsrahmen weg. Deshalb einzeln - und die Ueberlagerungen haengen
   ohnehin am body, brauchen den Filter also selbst. Nichts davon
   verschachtelt sich, sonst wirkte der Filter zweimal. */
:root[data-saett] #anwendung > header,
:root[data-saett] #anwendung > .leiste,
:root[data-saett] #anwendung > main,
:root[data-saett] > body > .schublade,
:root[data-saett] > body > .fenster,
:root[data-saett] > body > .popmenue,
:root[data-saett] > body > .profilkarte,
:root[data-saett] > body > .zuweis,
:root[data-saett] > body > .schau-band,
:root[data-saett] > body > #meldung,
:root[data-saett] > body > #karte,
:root[data-saett] > body > .tor {
    filter: saturate(var(--saett, 1));
}

/* Beförderungs-Vorschlag: alter Rang, Pfeil, neuer Rang. */
.kz-weg { font-size: .78rem; color: var(--grau); white-space: nowrap; }
.kz-weg i { font-style: normal; opacity: .6; margin: 0 .15rem; }
.kz-weg b { color: var(--gold); font-weight: 600; }
.kz-person button { margin: 0; }

/* ---- Uprank-Sperren (AP-20.09.) --------------------------------------------
   Unter jeder Person steht WARUM sie wartet, im Wortlaut des Servers.
   Eingerueckt und mit einer Kante daneben, damit die Zeile zur Person
   darueber gehoert und nicht wie ein eigener Eintrag aussieht. */
.us-grund {
    margin: -.18rem 0 .5rem .2rem; padding-left: .7rem;
    border-left: 2px solid var(--rand);
    font-size: .8rem; line-height: 1.5; color: var(--grau);
}
.us-grund div + div { margin-top: .15rem; }
#us-liste .kz-person { border-bottom: 0; }

/* ---- 11-99: das Band und die Toneinstellung (AP42) --------------------------
   Das Band liegt ueber allem, auch ueber der Schublade: ein Notruf ist
   das Einzige, was einen laufenden Vorgang unterbrechen darf. */
.notrufband {
    position: fixed; left: 50%; top: .7rem; transform: translateX(-50%);
    z-index: 120; display: flex; align-items: center; gap: .7rem;
    max-width: min(880px, calc(100vw - 24px));
    padding: .55rem .8rem; border-radius: 10px;
    background: linear-gradient(180deg, #7d211c 0%, #5e1714 100%);
    border: 1px solid #c8574c; color: #ffe9e5;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.notrufband .nb-marke {
    flex: 0 0 auto; font-weight: 800; letter-spacing: .06em;
    font-size: .82rem; padding: .18rem .45rem; border-radius: 5px;
    background: #ffd7d1; color: #6b1a16;
}
.notrufband .nb-text {
    flex: 1; min-width: 0; display: flex; flex-wrap: wrap;
    align-items: baseline; gap: .1rem .45rem; font-size: .82rem;
}
.notrufband .nb-text b { font-weight: 700; }
.notrufband .nb-text i { font-style: normal; opacity: .8; font-size: .76rem; }
.notrufband .nb-wache {
    font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    opacity: .75;
}
.notrufband .nb-trenn { opacity: .45; }
.notrufband button { margin: 0; white-space: nowrap; }
/* Das Kreuz ist absichtlich still: es steht neben dem lautesten Band im
   Bereich und darf nicht mit "Zur Leitstelle" um den Blick streiten.
   KEIN transform zum Mittigsetzen - die globale Regel fuer :active
   ersetzt es, und der Knopf springt unter der Maus weg. */
.notrufband .nb-zu {
    flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,233,229,.28); border-radius: 8px;
    background: rgba(0,0,0,.18); color: #ffe9e5;
    font-size: 12px; line-height: 1; cursor: pointer;
}
.notrufband .nb-zu:hover {
    background: rgba(0,0,0,.34); border-color: rgba(255,233,229,.55);
}
/* Der Puls sitzt auf einer eigenen Ebene - ein animierter Schatten am
   Band selbst laesst bei jedem Takt das ganze Band neu zeichnen. */
.notrufband::after {
    content: ''; position: absolute; inset: -2px; border-radius: 12px;
    border: 2px solid #ff8b7e; pointer-events: none; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .notrufband::after {
        animation: nbPuls 1.15s ease-out infinite;
    }
}
@keyframes nbPuls { 0% { opacity: .85; } 100% { opacity: 0; } }


/* ---- Eigene Bereiche (AP43) ------------------------------------------------- */
.be-zeile {
    display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem;
}
.be-zeile input[type="color"] { width: 34px; height: 30px; padding: 0; margin: 0; }
.be-zeile input[type="text"] { flex: 1; margin: 0; }
.be-zeile button { margin: 0; }

/* Marke an der Kennung: im Verbund tragen sie nur die Wagen, die NICHT
   zum fuehrenden Revier gehoeren. */
.e-revier {
    margin-left: .35rem; padding: .05rem .35rem; border-radius: 4px;
    font-size: 10px; font-weight: 700; letter-spacing: .04em;
    color: var(--rf); border: 1px solid color-mix(in srgb, var(--rf) 45%, transparent);
    background: color-mix(in srgb, var(--rf) 12%, transparent);
    white-space: nowrap; vertical-align: middle;
}

/* ---- Weitere Schemata (AP44) ------------------------------------------------
   Justin: "ich brauche noch mehr stile, mach kreativ". Neun weitere, jedes
   mit eigenem Charakter statt einer weiteren Graustufe. Die Flaechen
   (Kopf, Leiste, Revierspalten, Schublade) haengen seit diesem Stand an
   den Schema-Werten - vorher waren sie fest verdrahtet und blieben in
   jedem Schema dasselbe Blau. */

/* Bernstein: alter Funkraum, warmes Braun mit Bernsteinschrift. */
:root[data-thema="bernstein"] {
    --grund: #0a0704;  --flaeche: #120c06;
    --karte: #17100a;  --karte2: #1f160d;
    --rand:  #2e2113;  --randhell: #4a3520;
    --text:  #e0c9a0;  --hell: #fff3dd;  --grau: #a29072;
}

/* Neon: Nachtstadt, tiefes Violett mit hellem Flieder. */
:root[data-thema="neon"] {
    --grund: #07040f;  --flaeche: #0e0720;
    --karte: #140a2b;  --karte2: #1c1039;
    --rand:  #2b1a55;  --randhell: #45287f;
    --text:  #d9c8ff;  --hell: #f7f0ff;  --grau: #988ab8;
}

/* Terminal: gruener Leuchtstoff auf Schwarz, wie eine alte Konsole. */
:root[data-thema="terminal"] {
    --grund: #030603;  --flaeche: #061006;
    --karte: #08160a;  --karte2: #0c1f0e;
    --rand:  #14351a;  --randhell: #1f5228;
    --text:  #a8e8b4;  --hell: #dcffe2;  --grau: #719f79;
}

/* Rost: Eisen und Rost, warm und stumpf. */
:root[data-thema="rost"] {
    --grund: #0b0705;  --flaeche: #150d09;
    --karte: #1c120c;  --karte2: #251811;
    --rand:  #3a2418;  --randhell: #5c3924;
    --text:  #dcc3ad;  --hell: #fbeade;  --grau: #a4907f;
}

/* Eis: Gletscher, kuehl und eine Spur heller als der Rest. */
:root[data-thema="eis"] {
    --grund: #0a1014;  --flaeche: #101a20;
    --karte: #142129;  --karte2: #1a2b35;
    --rand:  #243b47;  --randhell: #365a6b;
    --text:  #c5dbe4;  --hell: #eef8fd;  --grau: #8fa1a9;
}

/* Purpur: satter Purpurton, dunkel und ruhig. */
:root[data-thema="purpur"] {
    --grund: #0a0612;  --flaeche: #120a1f;
    --karte: #180e29;  --karte2: #201336;
    --rand:  #2f1d4d;  --randhell: #4a2d78;
    --text:  #d0c2e6;  --hell: #f4eeff;  --grau: #9b8eae;
}

/* Olive: Feldgruen, gedeckt - taktisch statt bunt. */
:root[data-thema="olive"] {
    --grund: #0a0b06;  --flaeche: #12140c;
    --karte: #171a0f;  --karte2: #1e2215;
    --rand:  #2b3020;  --randhell: #454d33;
    --text:  #cbd2b6;  --hell: #eef3dd;  --grau: #959b85;
}

/* Meer: tiefes Petrol, wie Wasser bei Nacht. */
:root[data-thema="meer"] {
    --grund: #040c0e;  --flaeche: #08171b;
    --karte: #0b1e23;  --karte2: #10282e;
    --rand:  #173d46;  --randhell: #235e6c;
    --text:  #b9d8de;  --hell: #e8fafd;  --grau: #849ea4;
}

/* Daemmerung: Blauviolett mit einem Hauch Rosé, spaeter Abend. */
:root[data-thema="daemmerung"] {
    --grund: #0c0a12;  --flaeche: #151020;
    --karte: #1b1428;  --karte2: #241b34;
    --rand:  #342748;  --randhell: #513c6d;
    --text:  #d6cadd;  --hell: #f6f0fa;  --grau: #9e94a6;
}

/* HIER STAND `--grau` EINMAL ZENTRAL ALS color-mix - und das war falsch.
   Die Absicht war richtig (nicht 19 Paletten pflegen), der Weg nicht:
   `--grau` ist im Bereich keine reine CSS-Sache. Sie steht in
   FARBFELDER, ist im Aussehen-Dialog einstellbar ("Text, still") und
   wird von tonwerteAnwenden() als INLINE-Stil auf documentElement
   geschrieben - was jede Regel hier schlaegt. Gelesen wird sie dort mit
   farbeJetzt(), und die kennt nur #rrggbb und rgb(): bei einem
   color-mix greift kein Regex und sie liefert #000000.

   Folge: der Farb-Editor zeigte "Text, still" als Schwarz, und wer die
   Helligkeit nicht auf 100 % hat, bekam die stille Schrift schwarz auf
   dunkel gesetzt. Wer hier eine Farbe ableiten will, muss vorher
   farbeJetzt() beibringen, sie zu lesen.

   Die Werte stehen jetzt wieder in den Paletten oben - aber gerechnet:
   der kleinste Anteil von --text (zur Flaeche hin gemischt), der auf
   --karte 6,0:1 traegt. Vorher lagen sie zwischen 4,20:1 (tinte, unter
   der Schwelle) und 6,02:1. */

/* ---- Das Brett: Reviere oben, eigene Bereiche darunter ----------------------
   Justin: "MACH alle extra bereiche unten drunter und guck dass das
   ordentlich abschneidet, also jedes revier". Also zwei Reihen: die drei
   Reviere in gleich breiten Spalten, die alle auf derselben Hoehe enden,
   und darunter die eigenen Bereiche in einer eigenen Reihe. */
/* Das Brett steht als Block in der Mitte, statt sich bis an beide Raender
   zu ziehen. Justin: "vinewood mission row vespucci waren alle zusammen
   mittiger". Die Breite ist so gewaehlt, dass drei Spalten bequem
   nebeneinander stehen - auf schmalen Schirmen greift sie gar nicht. */
.brett { display: flex; flex-direction: column; gap: 1rem; }
.brett-zeile {
    display: grid; gap: 1rem; align-items: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Die eigenen Bereiche fuellen ihre Reihe, so breit sie eben sind.
   Zwischenstand v=84 hatte sie auf Drittelbreite mittig gestellt -
   Justin: "ne die anderen hatten auch eine andere breite sah besser aus
   vorher". Also wieder wie zuvor. */
.brett-zeile.eigen {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.brett-zeile > .wsp { display: flex; flex-direction: column; }
/* Damit die Spalten gleich hoch ENDEN und nicht der laengste Abschnitt
   den Rand mit sich zieht. */
.brett-zeile > .wsp > :last-child { margin-bottom: 0; }
/* Die Ueberschrift steht mit der Reihe darunter in der Mitte - eine
   Linie links und rechts, damit sie die beiden Reihen trennt. */
/* Steht die Kopfzeile als ERSTES auf der Tafel (der Gaestekasten seit
   AP61), braucht sie oben keinen Trennabstand - darueber ist keine
   Spalte, sondern die Karte "Verfuegbare Officer". */
.brett-kopfzeile {
    display: flex; align-items: center; gap: .7rem;
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--grau); margin: .2rem 0 -.4rem;
}
.brett-kopfzeile::before,
.brett-kopfzeile::after {
    content: ''; flex: 1; height: 1px; background: var(--rand);
}
@media (max-width: 1100px) {
    .brett-zeile { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

/* Volle Einheit: die Karte bleibt sichtbar, sagt aber, dass hier nichts
   mehr hineingeht - sonst klickt man sich am Zuweisen 409er ab. */
.e-karte.e-voll { opacity: .92; }
.e-karte.e-voll .e-name { opacity: .85; }
.e-vollmarke {
    padding: .05rem .35rem; border-radius: 4px; font-size: 10px;
    font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--grau); border: 1px solid var(--rand);
    background: rgba(255,255,255,.04); margin-right: .3rem;
}
.brett.wahl-an .e-karte.e-voll { border-style: solid; opacity: .55; }
.brett.wahl-an .e-karte.e-voll:hover { border-color: var(--rand); }


/* ---- Ruhe als Standard (AP45) ------------------------------------------
   "Unschaerfe raus, standardmaessig sparsam": der Grundzustand hat keine
   backdrop-filter und keine Dauerlaeufer mehr. Wer Glas WILL, schaltet
   den Glasmodus an - nur dort gibt es Unschaerfe, auch am Kopf. */
body.glas #anwendung > header {
    background: color-mix(in srgb, var(--flaeche) 84%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.25);
    backdrop-filter: blur(12px) saturate(1.25);
}

/* ---- Mein Profil (AP46) -----------------------------------------------------
   Praefix .mp-* - .pf-* gehoert der Profilkarte beim Darueberfahren und
   darf sich damit nicht vermischen.

   Der Bereich borgt sich, was es schon gibt: .kpi/.kpi-gitter fuer die
   Kacheln, .stat-reihe/.stat-k und .tage-balken fuer die Dienstzeit,
   .rz/.rn/.rb/.rw fuer liegende Balken, .zeitstrahl fuer die Laufbahn.
   Neu ist nur, was es vorher nirgends gab: der Kopf, die stehenden
   Saeulen, die Abzeichen und die Bestenliste. */

/* Der eigene Name im Kopf fuehrt ins Profil - er sieht aus wie vorher,
   nur mit Zeigefinger. */
.ich-klick {
    display: flex; align-items: center; gap: .55rem;
    background: none; border: 0; padding: .15rem .25rem; margin: -.15rem -.25rem;
    border-radius: 8px; cursor: pointer; color: inherit; font: inherit;
    text-align: left;
}
.ich-klick:hover { background: rgba(201,164,92,.08); }
.ich-klick:hover .name { color: var(--goldhell); }

/* ---- Der Kopf: Dienstmarke links, Lage rechts ---- */

.mp-kopf {
    display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
    padding: .9rem 1.1rem;
}
/* Oben ausgerichtet, nicht mittig: der Textblock wurde mit den
   Unit-Karten hoeher, und ein senkrecht zentriertes Portraet wandert
   dann auf Hoehe der Units. Ein Gesicht gehoert neben den Namen. */
.mp-ident { display: flex; align-items: flex-start; gap: .9rem; min-width: 0; }
/* Die Groesse NUR ueber --av - so bekommen Ring und Bild dasselbe Mass.
   Breite und Hoehe direkt am Bild waren genau der Fehler: sie schlagen
   jede Regel, der Ring aber liest --av und blieb bei seinen 28px.
   Die Schriftgroesse des Buchstabens rechnet sich daraus von selbst. */
.mp-bild { --av: 46px; margin-top: 2px; }
.mp-bild .u-ring, .mp-bild .av.gross, .mp-bild .avatar.gross { --av: 46px; }
.mp-name {
    font-size: 18px; color: var(--hell); font-weight: 700;
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}
.mp-unter { font-size: 11.5px; color: var(--grau); margin-top: .15rem; }
.mp-unter b { color: var(--goldhell); font-variant-numeric: tabular-nums; }
/* ---- Die Units im Profilkopf ----
   Je Unit eine eigene Karte statt eines geteilten Bandes. Das Band
   (.u-chip.u-viele) bleibt, wo es hingehoert: in Tabellenzeilen, die
   nicht breiter werden duerfen. Hier stand die Farbgrenze quer durch
   die Namen, und bei 7px Innenabstand gegen 999px Eckenrundung
   draengte sich die Rundung an die erste und letzte Silbe. */
.mp-units { margin-top: .5rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.mp-unit {
    /* Bei 15 von 118 Zugehoerigkeiten heisst die Stufe wie die Unit
       ("Internal Affairs" / "Internal Affairs") - dann faellt die zweite
       Zeile weg. Die Karten stehen trotzdem gleich hoch nebeneinander
       (Flex streckt sie), deshalb sitzt der Name dann mittig statt oben
       mit Leerraum darunter. */
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 1px;
    padding: .22rem .6rem .28rem; border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--uf, #7e8899) 38%, transparent);
    border-left: 3px solid var(--uf, #7e8899);
    background: color-mix(in srgb, var(--uf, #7e8899) 12%, transparent);
    min-width: 0;
}
.mp-unit b {
    font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
    line-height: 15px;
    /* Nicht var(--uf) pur: die Toene kommen aus dem Discord, und die
       Units geben sie sich selbst. S.W.A.T. hat #4400ff - als Schrift
       auf dunklem Grund kaum zu lesen. Zur hellen Textfarbe hin
       gemischt bleibt der Ton erkennbar, ohne dass die Lesbarkeit
       davon abhaengt, was sich jemand ausgesucht hat. */
    /* 55 % ist der farbstaerkste Wert, bei dem ALLE zehn Unit-Toene
       ueber 4.5:1 kommen (schlechtester: S.W.A.T. mit 4.8:1). Bei 57 %
       faellt S.W.A.T. auf 4.49 - nachgerechnet, nicht geschaetzt. */
    color: color-mix(in srgb, var(--uf, #9aa4b4) 55%, var(--hell));
}
/* Die Stufe ist die Nebenauskunft - sie soll den Namen nicht ueberholen. */
.mp-unit i {
    font-size: 10px; font-style: normal; color: var(--grau);
    line-height: 13px;
}
.mp-unit.fuehrt { box-shadow: 0 0 0 1px rgba(201,164,92,.35); }
.mp-unit.fuehrt b::after {
    content: ' ★'; color: var(--gold); font-size: 9px;
}

.mp-lagen { margin-left: auto; display: flex; gap: .6rem; flex-wrap: wrap; }
.mp-lage {
    border: 1px solid var(--rand); border-radius: 8px;
    padding: .45rem .7rem; background: rgba(255,255,255,.02);
    min-width: 9rem;
}
.mp-lage b { display: block; font-size: 13px; color: var(--text); }
.mp-lage span { display: block; font-size: 10.5px; color: var(--grau); }
.mp-lage.an { border-color: color-mix(in srgb, var(--gruen) 45%, var(--rand)); }
.mp-lage.an b { color: var(--gruen); }

/* ---- Zeilen: Termine, Einsaetze, Anzeigen, Ausgaben ---- */

.mp-zeile {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .42rem .8rem; border-bottom: 1px solid var(--rand);
    font-size: 12.5px;
}
.mp-zeile:last-child { border-bottom: 0; }
.mp-zeile b { color: var(--hell); font-weight: 600; }
.mp-zeile .etikett { margin-left: auto; }
.mp-zeile.klickbar { cursor: pointer; }
.mp-zeile.klickbar:hover { background: rgba(201,164,92,.05); }
.mp-z-tag {
    min-width: 5.6rem; font-size: 11px; color: var(--goldhell);
    font-variant-numeric: tabular-nums;
}

/* ---- Liegende Balken (Einsatzarten) ---- */

.mp-balken .rz { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; }

/* ---- Stehende Saeulen (Monate, Wochentage) ---- */

.mp-saeulen { display: flex; align-items: flex-end; gap: .5rem; }
.mp-s { flex: 1; text-align: center; min-width: 0; }
.mp-s-b {
    display: flex; height: 78px; align-items: flex-end; justify-content: center;
}
.mp-s-b i {
    display: block; width: 100%; border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #3f6f9e, #23405e);
}
.mp-s.beste .mp-s-b i { background: linear-gradient(180deg, #e6c47e, #8a6a2f); }
.mp-s-w {
    display: block; font-size: 10.5px; color: var(--text); margin-top: .25rem;
    font-variant-numeric: tabular-nums;
}
.mp-s-l {
    display: block; font-size: 9.5px; color: var(--grau);
    letter-spacing: .08em; text-transform: uppercase;
}

/* ---- Die 24 Stunden ---- */

.mp-uhr { display: flex; align-items: flex-end; gap: 2px; }
.mp-u { flex: 1; text-align: center; min-width: 0; }
.mp-u-b {
    display: flex; height: 54px; align-items: flex-end; justify-content: center;
}
.mp-u-b i {
    display: block; width: 100%; border-radius: 2px 2px 0 0;
    background: rgba(255,255,255,.09);
}
.mp-u.beste .mp-u-b i { background: linear-gradient(180deg, #e6c47e, #8a6a2f); }
.mp-u-l {
    display: block; font-size: 9px; color: var(--grau); height: 12px;
    font-variant-numeric: tabular-nums;
}

/* ---- Abzeichen: Schwellen, keine Verleihung ---- */

.mp-abz {
    display: grid; gap: .55rem;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.mp-abzeichen {
    border: 1px solid var(--rand); border-radius: 9px;
    padding: .6rem .55rem; text-align: center;
    background: rgba(255,255,255,.015);
    /* Nicht erreichte Abzeichen sind blass, nicht weg: sie sind das Ziel. */
    opacity: .5;
}
.mp-abzeichen.hat { opacity: 1; border-color: var(--randhell); }
.mp-az-z { display: block; font-size: 20px; line-height: 1.1; }
.mp-az-n {
    display: block; font-size: 10px; color: var(--grau); margin-top: .2rem;
    letter-spacing: .06em; text-transform: uppercase;
    /* Ein langer Abzeichenname malte in schmalen Fenstern drei Pixel über
       seine Kachel hinaus - Großbuchstaben mit Sperrung brechen sonst
       nirgends. */
    overflow-wrap: anywhere;
}
.mp-az-p { display: flex; gap: 3px; justify-content: center; margin: .35rem 0 .3rem; }
.mp-az-p i {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,.14);
}
.mp-az-p i.an { background: var(--gold); }
.mp-az-w {
    display: block; font-size: 10.5px; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.mp-az-b {
    display: block; height: 3px; border-radius: 2px; margin-top: .35rem;
    background: rgba(255,255,255,.07); overflow: hidden;
}
.mp-az-b i {
    display: block; height: 100%;
    background: linear-gradient(90deg, #e6c47e, #c9a45c);
}

/* ---- Bestenliste ---- */

.mp-tafel {
    display: flex; align-items: center; gap: .55rem;
    padding: .42rem .8rem; border-bottom: 1px solid var(--rand);
    font-size: 12.5px;
}
.mp-tafel:last-child { border-bottom: 0; }
.mp-tafel b { color: var(--hell); font-weight: 600; }
.mp-tafel.ich {
    background: rgba(201,164,92,.07);
    box-shadow: inset 3px 0 0 var(--gold);
}
.mp-t-p {
    min-width: 1.9rem; text-align: right; font-weight: 700;
    color: var(--goldhell); font-variant-numeric: tabular-nums;
}
.mp-t-b .avatar, .mp-t-b img { width: 22px; height: 22px; font-size: 10px; }
.mp-t-b2 {
    flex: 1; min-width: 3rem; height: 6px; border-radius: 4px;
    background: rgba(255,255,255,.06); overflow: hidden; margin-left: .3rem;
}
.mp-t-b2 i {
    display: block; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, #4d8fd1, #2c5c8c);
}
.mp-tafel.ich .mp-t-b2 i { background: linear-gradient(90deg, #e6c47e, #c9a45c); }
.mp-t-w {
    min-width: 5.2rem; text-align: right; color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* ---- Laufbahn: Fortschritt zum naechsten Rang ---- */

.mp-riegel { margin-bottom: .7rem; }
.mp-r-kopf {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 11.5px; color: var(--grau); margin-bottom: .25rem;
}
.mp-r-kopf b { color: var(--text); font-variant-numeric: tabular-nums; }
.mp-r-b {
    display: block; height: 7px; border-radius: 4px;
    background: rgba(255,255,255,.06); overflow: hidden;
}
.mp-r-b i {
    display: block; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, #4d8fd1, #2c5c8c);
}
.mp-r-b i.voll { background: linear-gradient(90deg, #6cc08a, #3d7a56); }
.mp-reif { font-size: 12px; color: var(--gruen); }

.mp-rang { display: flex; align-items: baseline; gap: .5rem; }
.mp-rang b {
    font-size: 1.6rem; color: var(--goldhell); font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.mp-rang span { font-size: 11px; color: var(--grau); }

/* ---- Die eigene Personalakte ---- */

.mp-vermerk {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .5rem .8rem; border-bottom: 1px solid var(--rand);
}
.mp-vermerk:last-child { border-bottom: 0; }
.mp-vermerk b { color: var(--hell); font-size: 12.5px; }
.mp-vermerk .etikett { flex: none; }

@media (max-width: 620px) {
    .mp-lagen { margin-left: 0; width: 100%; }
    .mp-t-w { min-width: 4.2rem; }
}

/* Ein Satz unter einem Formularfeld - fuer Zahlen, deren Wirkung die
   Beschriftung allein nicht hergibt. */
.feld-hinweis {
    display: block; margin-top: .3rem; font-size: 11px;
    color: var(--grau); line-height: 1.5;
}

/* ---- Units im Vergleich (Kennzahlen) ----
   Eine Zeile je Unit. Die Fußzeile läuft in derselben Rasterzeile über
   die Spalten 2 bis zum Ende - so steht sie unter dem Namen und nicht
   unter dem Kürzel-Schild. */
.kzu {
    display: grid;
    grid-template-columns: 42px minmax(0, 1.3fr) 2.2fr auto auto;
    align-items: center; gap: .1rem .55rem;
    padding: .45rem .55rem; border-radius: 8px;
    border-left: 3px solid var(--uf, #4d8fd1);
    background: color-mix(in srgb, var(--uf, #4d8fd1) 7%, var(--karte2));
}
.kzu + .kzu { margin-top: .3rem; }
.kzu-kurz {
    font-size: 10px; font-weight: 700; text-align: center;
    padding: .1rem .2rem; border-radius: 5px; letter-spacing: .02em;
    /* Nicht var(--uf) pur: die Töne kommen aus dem Discord, S.W.A.T. hat
       #4400ff - als Schrift auf dunklem Grund kaum zu lesen. */
    color: color-mix(in srgb, var(--uf, #9aa4b4) 58%, var(--hell));
    border: 1px solid color-mix(in srgb, var(--uf, #7e8899) 45%, transparent);
}
.kzu > b {
    font-size: 12.5px; font-weight: 600; color: var(--hell);
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
}
.kzu-balken {
    height: 7px; border-radius: 4px; background: var(--rand);
    overflow: hidden;
}
.kzu-balken i {
    display: block; height: 100%; border-radius: 4px;
    background: color-mix(in srgb, var(--uf, #4d8fd1) 70%, var(--hell));
}
.kzu-zeit, .kzu-quote {
    text-align: right; font-variant-numeric: tabular-nums;
    font-size: 12px; font-weight: 600; line-height: 14px;
}
.kzu-zeit em, .kzu-quote em {
    display: block; font-style: normal; font-weight: 400;
    font-size: 9.5px; color: var(--stumm); line-height: 12px;
}
.kzu-quote { min-width: 52px; }
.kzu-quote.gut  { color: #6cc08a; }
.kzu-quote.warn { color: #e7a95e; }
.kzu-fuss {
    grid-column: 2 / -1; font-size: 10.5px; color: var(--stumm);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Auf dem Handy ist für fünf Spalten kein Platz: Balken und Schnitt
   fallen weg, Kürzel, Name, Zeit und Quote bleiben. */
@media (max-width: 620px) {
    .kzu { grid-template-columns: 38px minmax(0, 1fr) auto auto; }
    .kzu-balken { display: none; }
    .kzu-zeit em { display: none; }
}

/* ---- Sonderauszahlung für die Leitstelle (AP47) ---------------------------
   Eine Lohnzeile liest man von rechts: erst der Betrag, dann wofür. Die
   Zahlen stehen deshalb rechtsbündig und auf gleicher Breite. */
.az-zeile {
    display: flex; align-items: center; gap: .5rem;
    padding: .42rem .8rem; border-bottom: 1px solid var(--rand);
    font-size: 12.5px;
}
.az-zeile:last-child { border-bottom: 0; }
.az-zeile b { color: var(--hell); font-weight: 600; }
.az-zeile b.klickbar { cursor: pointer; }
.az-zeile b.klickbar:hover { color: var(--goldhell); }
/* Wer nicht mehr da ist, steht trotzdem drin - der Dienst wurde geleistet. */
.az-zeile.fort { opacity: .6; }
.az-zeit {
    min-width: 5.2rem; text-align: right; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.az-sitz {
    min-width: 2.4rem; text-align: right; color: var(--grau);
    font-variant-numeric: tabular-nums; font-size: 11px;
}
.az-geld {
    min-width: 6.4rem; text-align: right; font-weight: 700;
    color: var(--gruen); font-variant-numeric: tabular-nums;
}
.az-geld.deckel { color: var(--gelb); }
.az-geld.deckel::after { content: " ▲"; font-size: 9px; }
.az-fuss {
    padding: .6rem .8rem; border-top: 1px solid var(--rand);
    font-size: 11.5px; color: var(--grau);
}
.az-fuss b { color: var(--gruen); font-size: 13px; }

/* ---- Ausgezahlt: der Beleg und der Verlauf nach Wochen (31.08.) ----------
   "so dass man sieht an welche person man dass dann in der jeweiligen
   woche ausgezahlt hat" - eine Woche ist ein Block mit Kopf und einer
   Reihe von Namen. */
#az-kw {
    /* `flex: 0 0 auto` und nicht die geerbte Basis: die richtet sich
       nach der Richtung der Leiste, und die dreht sich am Handy. */
    flex: 0 0 auto; max-width: 15rem; font-size: 12px; padding: .3rem .5rem;
}
.sz-woche {
    padding: .5rem .8rem; border-bottom: 1px solid var(--rand);
}
.sz-woche:last-child { border-bottom: 0; }
.sz-woche-kopf {
    display: flex; align-items: baseline; gap: .5rem;
    font-size: 12.5px;
}
.sz-woche-kopf b { color: var(--hell); }
.sz-woche-kopf b.rechts {
    margin-left: auto; color: var(--gruen);
    font-variant-numeric: tabular-nums;
}
/* Umbrechen, nicht abschneiden: eine Woche kann zwoelf Empfaenger haben,
   und am Handy waere die Reihe sonst dreimal so breit wie der Schirm. */
.sz-woche-leute {
    display: flex; flex-wrap: wrap; gap: .3rem .7rem;
    margin-top: .3rem; font-size: 11.5px; color: var(--grau);
}
.sz-empf { font-variant-numeric: tabular-nums; }
.sz-empf b { color: var(--text); cursor: pointer; font-weight: 600; }
.sz-empf b:hover { color: var(--goldhell); }
/* Haken und "Teil" nebeneinander, ohne Umbruch mitten in der Zeile. */
.sz-tun { display: flex; gap: .3rem; justify-content: flex-end; }
.sz-tun button { white-space: nowrap; }

/* ---- Aufnahmeweg: HR-Stationen und der Schreibtisch der Academy (AP48) ----
   Ein Weg mit Stationen, nicht eine Wand mit Feldern: die Leiste oben sagt
   wo man ist, die Punkte im AzubiNet sagen, was schon erledigt wurde. */

.wz-leiste {
    display: flex; gap: .3rem; margin: 0 0 1rem;
    border-bottom: 1px solid var(--rand); padding-bottom: .7rem;
    flex-wrap: wrap;
}
.wz-punkt {
    display: flex; align-items: center; gap: .4rem;
    background: none; border: 1px solid transparent; border-radius: 20px;
    padding: .25rem .6rem .25rem .3rem; cursor: pointer;
    color: var(--grau); font: inherit; font-size: 11.5px;
}
.wz-punkt b {
    width: 20px; height: 20px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--karte2); border: 1px solid var(--rand);
    font-size: 10.5px; font-weight: 700;
}
.wz-punkt:hover { color: var(--text); }
.wz-punkt.durch b { background: var(--golddun); color: var(--goldhell);
    border-color: #6b5526; }
.wz-punkt.an {
    color: var(--hell); border-color: var(--randhell);
    background: rgba(255,255,255,.03);
}
.wz-punkt.an b {
    background: linear-gradient(180deg, #e6c47e, #c9a45c);
    color: #241c07; border-color: #8a6a2f;
}
.wz-titel {
    font-size: 15px; color: var(--hell); font-weight: 700;
    margin: 0 0 .8rem;
}
.wz-titel i {
    display: block; font-style: normal; font-size: 11.5px;
    color: var(--grau); font-weight: 400; margin-top: .1rem;
}
.wz-fuss { margin-top: 1.2rem; }
.wz-fuss .abbrechen { margin-left: auto; }
.wz-wahl { display: flex; gap: .5rem; flex-wrap: wrap; }
.wz-zusammen { margin-bottom: .5rem; }
.wz-zusammen code {
    font-size: 11.5px; color: var(--goldhell);
    background: rgba(255,255,255,.04); padding: .05rem .3rem; border-radius: 4px;
}
/* Ein Artikel, von dem nichts mehr da ist, bleibt sichtbar - man soll
   sehen, dass es ihn gibt und dass er gerade fehlt. */
.div-opt.aus { opacity: .45; cursor: default; }

/* ---- Die Vorpruefung im Einstell-Ablauf --------------------------------
   Sie steht zwischen der Discord-Id und dem Einladungsknopf, also genau
   dort, wo entschieden wird, ob dieser Mensch ueberhaupt einen Link
   bekommt. Deshalb darf sie auffallen. */
.vp-kasten {
    margin-top: .7rem; display: flex; flex-direction: column; gap: .4rem;
}
.vp-zeile {
    border: 1px solid var(--rand); border-left-width: 3px;
    border-radius: 7px; padding: .5rem .65rem;
    background: rgba(255,255,255,.015);
    display: flex; flex-direction: column; gap: .15rem;
}
.vp-zeile b { color: var(--hell); font-size: 12.5px; }
.vp-zeile span, .vp-zeile i {
    font-size: 11.5px; color: var(--grau); font-style: normal;
    line-height: 1.45;
}
/* Drei Toene, drei Bedeutungen: gut = nichts spricht dagegen,
   warn = beachten, schlecht = hier geht es nicht weiter. */
.vp-zeile.gut     { border-left-color: var(--gruen); }
.vp-zeile.warn    { border-left-color: var(--gold); }
.vp-zeile.schlecht {
    border-left-color: var(--rot); border-color: #57282a;
    background: rgba(207,88,80,.06);
}
.vp-zeile.schlecht b { color: #eda29b; }

/* ---- Rechte: der dichte Satz Karten -----------------------------------
   Dieselben Karten wie in der Rechte-Tafel, nur enger gesetzt: sie
   stehen hier in einem Block INNERHALB einer Ansicht (Unit-Vergabe je
   Stufe, Rechte einer Person) und nicht als ganze Seite. 280px
   Mindestbreite waeren dort drei Spalten auf einem Schreibtisch und
   eine viel zu lange Zeile. */
.rt-karten.eng {
    padding: .55rem 0; gap: .4rem;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.rt-karten.eng .rt-karte { padding: .45rem .55rem; gap: .45rem; }
.rt-karten.eng .rt-karte .rt-t i { font-size: 10.5px; }
/* Der Rahmen einer Unit ist die Ebene DARUEBER - was die Leitung
   freigibt, nicht was die Fuehrung verteilt. Gold, damit man die zwei
   Ebenen ueberhaupt auseinanderhalten kann; vorher sahen sie gleich
   aus. */
.rt-karten.eng.rahmen .rt-karte.an {
    border-color: #6b5526; background: rgba(201,164,92,.07);
}
.rt-karten.eng.rahmen .rt-karte.an .rt-schalter {
    background: rgba(201,164,92,.3); border-color: #6b5526;
}
.rt-karten.eng.rahmen .rt-karte.an .rt-schalter::after {
    background: var(--gold);
}
/* Wer nicht vergeben darf, sieht die Karten - und dass sie ihm nicht
   gehoeren. Ausgrauen statt Verstecken: die Fuehrung soll sehen, was
   ihre Unit ueberhaupt haette. */
.rt-karte.aus { opacity: .5; cursor: default; }

.ur-stufe > b { display: flex; align-items: center; gap: .5rem; }
.ur-stufe > b .stumm { margin-left: auto; font-weight: 400; }

/* ---- Rechte direkt an einer Person ----------------------------------
   Abgesetzt und mit Warnung, weil es der Notnagel unter den sechs
   Rechtequellen ist: unsichtbar von aussen und wandert bei einer
   Befoerderung nicht mit. */
.rt-direkt {
    padding: .8rem .9rem; border-bottom: 1px solid var(--rand);
    background: rgba(201,164,92,.03);
}
.rt-direkt-kopf { display: flex; align-items: baseline; gap: .6rem; }
.rt-direkt-kopf b { color: var(--hell); font-size: 13.5px; }
.rt-direkt-kopf span { margin-left: auto; text-align: right; }
.rt-direkt-warnung {
    margin: .3rem 0 0; padding: .5rem .6rem; border-radius: 7px;
    border: 1px solid #57282a; background: rgba(207,88,80,.07);
    line-height: 1.5;
}

/* ---- Der Ablaufzettel im AzubiNet ---- */

.ab-karte {
    border-bottom: 1px solid var(--rand);
    padding: .6rem .8rem .7rem;
}
.ab-karte:last-child { border-bottom: 0; }
.ab-kopf {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    font-size: 13px;
}
.ab-kopf b { color: var(--hell); font-weight: 600; }
.ab-kopf b.klickbar { cursor: pointer; }
.ab-kopf b.klickbar:hover { color: var(--goldhell); }
.ab-seit { margin-left: .3rem; }
.ab-knoepfe { margin-left: auto; display: flex; gap: 4px; }

.ab-weg {
    margin: .55rem 0 0 .3rem; padding-left: .85rem;
    border-left: 1px solid var(--rand);
}
.ab-stufe {
    display: flex; align-items: center; gap: .5rem;
    padding: .22rem 0; font-size: 12px; color: var(--grau);
    position: relative;
}
.ab-stufe > i {
    position: absolute; left: -1.2rem; width: 9px; height: 9px;
    border-radius: 50%; background: var(--karte2);
    border: 2px solid var(--randhell); flex: none;
}
.ab-stufe.an { color: var(--text); }
.ab-stufe.an > i { background: var(--gruen); border-color: var(--gruen); }
.ab-stufe.warn > i { background: var(--gelb); border-color: var(--gelb); }
.ab-stufe.schlecht > i { background: var(--rot); border-color: var(--rot); }
.ab-stufe b { color: var(--hell); font-weight: 600; }
.ab-tat { margin-left: auto; }

/* ---- Der Weg einer Aufnahme: erst waehlen, dann anzeigen ------------------
   Justin: "erst muss der weg ausgewählt werden und dann kann der weg auch
   angezeigt werden". Also zwei grosse Karten zur Wahl - und danach eine
   Marke, die den gewählten Weg überall mitträgt. */
.wz-wege { display: grid; gap: .6rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.wz-weg {
    display: block; position: relative; cursor: pointer;
    border: 1px solid var(--rand); border-radius: 10px;
    padding: .9rem 1rem .95rem; background: rgba(255,255,255,.015);
}
.wz-weg:hover { border-color: var(--randhell); }
.wz-weg input { position: absolute; opacity: 0; pointer-events: none; }
.wz-weg.an {
    border-color: color-mix(in srgb, var(--gold) 55%, var(--rand));
    background: rgba(201,164,92,.07);
}
.wz-weg-z { display: block; font-size: 22px; line-height: 1.1; }
.wz-weg b {
    display: block; color: var(--hell); font-size: 14px; margin-top: .3rem;
}
.wz-weg.an b { color: var(--goldhell); }
.wz-weg i {
    display: block; font-style: normal; font-size: 11.5px;
    color: var(--grau); margin-top: .3rem; line-height: 1.5;
}

.ab-weg-marke {
    display: inline-block; font-size: 10.5px; font-weight: 700;
    padding: .1rem .4rem; border-radius: 5px; vertical-align: 1px;
    background: var(--blaudun); color: #9ec7ef; border: 1px solid #1e3d61;
}
.ab-weg-marke.wieder {
    background: var(--golddun); color: var(--goldhell); border-color: #6b5526;
}

/* ---- Fuhrpark (AP49) ------------------------------------------------------
   Eine Zeile je Gegenstand: was es ist, in welchem Zustand, wer es hat.
   Der Zustand steht als Balken da und nicht als Prozentzahl im Fliesstext -
   er entscheidet, ob der Wagen nach der Rueckgabe in die Werkstatt geht. */

.fp-zeile {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    padding: .45rem .8rem; border-bottom: 1px solid var(--rand);
    font-size: 12.5px;
}
.fp-zeile:last-child { border-bottom: 0; }
.fp-zeile b { color: var(--hell); font-weight: 600; }
.fp-zeile.knapp { box-shadow: inset 3px 0 0 var(--gelb); }
.fp-kz {
    min-width: 4.6rem; font-weight: 700; letter-spacing: .04em;
    color: var(--goldhell); font-variant-numeric: tabular-nums;
}
.fp-zustand, .fp-bestand {
    width: 68px; height: 6px; border-radius: 4px; flex: none;
    background: rgba(255,255,255,.07); overflow: hidden;
}
.fp-zustand i, .fp-bestand i {
    display: block; height: 100%; border-radius: 4px; background: var(--gruen);
}
.fp-zustand i.mittel { background: var(--gelb); }
.fp-zustand i.schlecht { background: var(--rot); }
.fp-bestand i { background: linear-gradient(90deg, #4d8fd1, #2c5c8c); }
.fp-zahl { font-variant-numeric: tabular-nums; color: var(--text); }
.fp-zahl.warn { color: var(--gelb); font-weight: 700; }
.fp-zahl i { font-style: normal; font-size: 11px; }
.fp-fahrer { color: var(--text); cursor: pointer; }
.fp-fahrer:hover { color: var(--goldhell); }
.fp-fahrer i { font-style: normal; font-size: 11px; }
.fp-knoepfe { margin-left: auto; display: flex; gap: 4px; align-items: center; }

.fp-person {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .5rem .8rem; border-bottom: 1px solid var(--rand);
    font-size: 12.5px;
}
.fp-person:last-child { border-bottom: 0; }
.fp-person b { color: var(--hell); font-weight: 600; cursor: pointer; }
.fp-person b:hover { color: var(--goldhell); }
.fp-sachen { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.fp-tag {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: 11px; padding: .1rem .4rem; border-radius: 5px;
    background: rgba(255,255,255,.05); border: 1px solid var(--rand);
    color: var(--text);
}
.fp-tag.wagen {
    background: var(--blaudun); color: #9ec7ef; border-color: #1e3d61;
    font-weight: 700; letter-spacing: .03em;
}
.fp-x {
    background: none; border: 0; color: var(--grau); cursor: pointer;
    font-size: 10px; padding: 0 0 0 .1rem; line-height: 1;
}
.fp-x:hover { color: var(--rot); }

/* ---- Rechte und Einsicht (AP50) -------------------------------------------
   Vorher: zwoelf Spalten und hundert Zeilen in einer 560px-Schublade. Man
   konnte darin Haken setzen, aber nicht lesen, was man tat. Jetzt zwei
   Spalten - links wer, rechts was - und jedes Recht als lesbare Karte mit
   seiner Beschreibung daneben. */

.rt-tafel {
    display: grid; gap: .8rem; align-items: start;
    grid-template-columns: minmax(220px, 300px) 1fr;
}
@media (max-width: 780px) { .rt-tafel { grid-template-columns: 1fr; } }

.rt-links {
    background: var(--karte); border: 1px solid var(--rand);
    border-radius: 9px; overflow: hidden;
}
#rt-suche {
    width: 100%; border: 0; border-bottom: 1px solid var(--rand);
    border-radius: 0; background: rgba(255,255,255,.02);
}
.rt-liste { max-height: 62vh; overflow-y: auto; }
.rt-gruppe {
    padding: .5rem .8rem .3rem; font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gold);
    background: rgba(201,164,92,.04); border-top: 1px solid var(--rand);
}
.rt-liste > .rt-gruppe:first-child { border-top: 0; }
.rt-traeger {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    background: none; border: 0; border-left: 3px solid transparent;
    padding: .38rem .8rem; cursor: pointer; text-align: left;
    color: var(--text); font: inherit; font-size: 12.5px;
}
.rt-traeger:hover { background: rgba(255,255,255,.03); }
.rt-traeger.an {
    background: rgba(201,164,92,.09); border-left-color: var(--gold);
    color: var(--hell);
}
.rt-traeger span { flex: 1; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.rt-traeger i {
    font-style: normal; font-size: 10px; font-weight: 700;
    min-width: 18px; text-align: center; border-radius: 9px;
    padding: .05rem .3rem; background: var(--golddun); color: var(--goldhell);
}

.rt-rechts {
    background: var(--karte); border: 1px solid var(--rand);
    border-radius: 9px; overflow: hidden;
}
.rt-kopf {
    padding: .7rem .9rem; border-bottom: 1px solid var(--rand);
    background: rgba(201,164,92,.035);
}
.rt-kopf b { display: block; color: var(--hell); font-size: 14px; }
.rt-kopf span { display: block; margin-top: .15rem; }
.rt-inhalt { padding: .9rem; }

.rt-karten {
    display: grid; gap: .5rem; padding: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.rt-karte {
    display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
    border: 1px solid var(--rand); border-radius: 9px; padding: .6rem .7rem;
    background: rgba(255,255,255,.015); position: relative;
}
.rt-karte:hover { border-color: var(--randhell); }
.rt-karte.an {
    border-color: color-mix(in srgb, var(--gruen) 45%, var(--rand));
    background: rgba(83,168,120,.07);
}
.rt-karte input { position: absolute; opacity: 0; pointer-events: none; }
.rt-z { font-size: 17px; line-height: 1.2; flex: none; }
.rt-t { flex: 1; min-width: 0; }
.rt-t b { display: block; color: var(--hell); font-size: 12.5px; }
.rt-t i {
    display: block; font-style: normal; font-size: 11px; color: var(--grau);
    margin-top: .15rem; line-height: 1.45;
}
.rt-t code {
    display: block; margin-top: .25rem; font-size: 10px; color: #5d6778;
}
.rt-schalter {
    flex: none; width: 30px; height: 17px; border-radius: 10px;
    background: rgba(255,255,255,.09); border: 1px solid var(--rand);
    position: relative; margin-top: .1rem;
}
.rt-schalter::after {
    content: ""; position: absolute; top: 1px; left: 1px;
    width: 13px; height: 13px; border-radius: 50%; background: var(--grau);
}
.rt-karte.an .rt-schalter { background: rgba(83,168,120,.35); border-color: #2f6a48; }
.rt-karte.an .rt-schalter::after { left: 14px; background: var(--gruen); }

.rt-block { margin-bottom: .8rem; }
.rt-block > b {
    display: block; font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--gold); margin-bottom: .35rem;
}
.rt-tags { display: flex; gap: .3rem; flex-wrap: wrap; }
.rt-tag {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: 11px; padding: .12rem .45rem; border-radius: 6px;
    background: rgba(255,255,255,.05); border: 1px solid var(--rand);
    color: var(--text);
}
.rt-tag.rolle {
    background: var(--golddun); color: var(--goldhell); border-color: #6b5526;
}
.rt-traegerliste { display: flex; gap: .3rem; flex-wrap: wrap; margin: .6rem 0; }

.rt-person {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem 0 .2rem;
}
.rt-person b { color: var(--hell); }
.rt-summe {
    margin-left: auto; text-align: right; font-size: 1.4rem;
    color: var(--goldhell); font-weight: 700;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.rt-summe i {
    display: block; font-style: normal; font-size: 9.5px; color: var(--grau);
    letter-spacing: .12em; text-transform: uppercase; font-weight: 400;
}
.rt-pruef { border-top: 1px solid var(--rand); }
.rt-pz {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .5rem 0; border-bottom: 1px solid var(--rand); opacity: .5;
}
.rt-pz:last-child { border-bottom: 0; }
.rt-pz.an { opacity: 1; }
.rt-woher {
    margin-left: auto; display: flex; gap: .25rem; flex-wrap: wrap;
    justify-content: flex-end; max-width: 55%;
}
#rt-stand.warn { color: var(--gelb); }

/* ---- Handbuch je Unit (31.08., umgebaut 01.09.) ----------------------
   Frontpage eines Bereichs: oben ein schmaler Steckbrief (Widgets),
   darunter die Kapitel als Untertab-Pillen, darunter das Blatt.
   Nur Klassen, keine IDs: vier Bereiche halten gleichzeitig je ein
   Handbuch im DOM. */

.uh-steck { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.uh-widget {
    flex: 1 1 140px; background: var(--karte); border: 1px solid var(--rand);
    border-radius: 9px; padding: .7rem .9rem; display: flex;
    flex-direction: column; gap: .15rem;
}
.uh-widget b { color: var(--hell); font-size: 16px; line-height: 1.35; }
/* Das Widget "Mitglieder" ist ein Knopf. Alles, was die Grundregel fuer
   Knoepfe mitbringt, muss hier zurueckgenommen werden - besonders
   white-space: nowrap, sonst schneidet ein langer Unterschriftstext
   mitten im Wort ab. */
button.uh-widget {
    font: inherit; color: var(--text); text-align: left;
    white-space: normal; cursor: pointer;
    background: var(--karte); border: 1px solid var(--rand);
    border-radius: 9px; padding: .7rem .9rem;
}
button.uh-widget:hover { border-color: var(--gold); background: var(--karte2); }

.uh-tafel { display: flex; flex-direction: column; gap: .8rem; padding: .9rem; }
.uh-leiste { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.uh-kapitel {
    background: none; border: 1px solid var(--rand); border-radius: 999px;
    padding: .35rem .8rem; color: var(--text); font: inherit;
    font-size: 12.5px; cursor: pointer;
}
.uh-kapitel:hover { border-color: var(--randhell); }
.uh-kapitel.an {
    border-color: var(--gold); background: rgba(201,164,92,.09);
    color: var(--hell);
}
/* DIE KAPITEL-LEISTE KLEBT (17.09.2026)

   Justin: "unter azubinet ist das sehr sehr schwierig zwischen den
   dingern zu bedienen". Gemessen im AzubiNet: die Reiter stehen bei
   y=321, die Kapitel sind 931-2101px hoch - wer unten liest, muss zum
   Umschalten die ganze Strecke hoch. Jetzt bleiben sie unter dem Kopf
   stehen, solange das Kapitel in Sicht ist.

   `overflow: clip` an der Karte ist der Kern: `.karte` hat
   `overflow: hidden`, und ein Vorfahr mit hidden ist ein
   Scroll-Container - darin klebt NICHTS mehr, sticky wird still zu
   static. clip klippt genauso (runde Ecken bleiben), macht aber
   keinen Scroll-Container. Derselbe Kniff steht schon einen Block
   weiter fuer den Baukasten (`.karte:has(.uhe-block)`). */
.karte:has(> .uh-tafel) { overflow: clip; }
.uh-tafel > .uh-leiste {
    position: sticky; top: var(--kopf); z-index: 12;
    /* Bis an die Kartenkante, sonst laeuft der Text seitlich an der
       Leiste vorbei - die Tafel hat .9rem Polster. */
    margin: -.9rem -.9rem 0; padding: .7rem .9rem .35rem;
    background: var(--karte);
}
/* Das Register traegt seine Linie selbst; im Klebemodus braucht sie
   etwas Luft nach unten, damit der erste Absatz nicht daran klebt. */
.uh-tafel > .uh-leiste.uh-nav-ordner { padding-bottom: 0; }
.uh-punkt {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--gelb); margin-left: .3rem; vertical-align: middle;
}

/* Das Schloss am Kapitel: "fertig, aber nur fuer die Unit" - eine
   andere Aussage als der gelbe Punkt ("noch Entwurf"), deshalb ein
   anderes Zeichen und keine zweite Farbe am selben Punkt (22.09.). */
.uh-schloss { font-size: 10px; margin-left: .3rem; vertical-align: middle;
    opacity: .85; }

.uh-blatt { min-height: 180px; }
.uh-kopf {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding-bottom: .6rem; margin-bottom: .7rem;
    border-bottom: 1px solid var(--rand);
}
.uh-kopf b { color: var(--hell); font-size: 15px; }
.uh-knoepfe { margin-left: auto; }
.uh-inhalt { line-height: 1.65; }
.uh-inhalt h3 { color: var(--hell); margin: .9rem 0 .35rem; font-size: 14px; }
.uh-inhalt img { max-width: 100%; border-radius: 8px; margin: .4rem 0; }
.uh-inhalt ul { padding-left: 1.3rem; }

.uh-editor { display: flex; flex-direction: column; gap: .6rem; }
.uh-editor .uh-titel { font-size: 14px; }
/*  Die Werkzeug-Leiste ueber den Handbuch-Textfeldern. Sticky, damit
    sie bei langen Texten beim Rollen oben haengen bleibt.

    SIE KLEBT UNTER DEM KOPF, NICHT DARIN. Bis zum 23.09. stand hier
    `top: .4rem` - gemessen im Browser landete sie beim Rollen auf
    y=6..55, also mitten im Band der LSPD-NET-Leiste (0..58), und legte
    sich mit z-index 60 darueber. Justin: "die geht ja mit runter aber
    leider bleibt das oben unter der lspdnet leiste beim mitgehen".

    Der Abstand ist NICHT fest: darunter klebt schon das Kapitel-
    Register (.uh-tafel > .uh-leiste, gemessen 113 px - je nach Anzahl
    der Kapitel auch zwei Zeilen mehr). uhKlebeMessen() in app.js legt
    die wirkliche Unterkante als --uh-klebe ab; ohne Register faellt der
    Wert auf die Kopfhoehe zurueck.

    z-index 11 statt 60: Kopf (30) und Register (12) sind die Ordnung
    der Seite und muessen gewinnen, wenn sich doch einmal etwas
    ueberlappt. Ueber dem Fliesstext steht die Leiste damit immer noch. */
.uh-werkzeug {
    position: sticky; z-index: 11;
    /* BUENDIG an das Register, ohne Spalt: gesehen im Bildschirmfoto -
       durch die .4rem Luft lief beim Rollen ein schmaler Streifen Text
       zwischen Register und Leiste hindurch. Das Register selbst sitzt
       aus demselben Grund buendig am Kopf. */
    top: calc(var(--uh-klebe, var(--kopf)) + var(--sat));
    gap: .15rem; align-items: center; flex-wrap: wrap;
    padding: .3rem .4rem; margin-bottom: .35rem;
    background: rgba(10,15,24,.97); border: 1px solid var(--randhell);
    border-radius: 10px;
}
.uh-werkzeug > button {
    min-width: 26px; height: 26px; padding: 0 .35rem; border-radius: 6px;
    background: none; border: 1px solid transparent; color: var(--text);
    font: inherit; font-size: 12.5px; cursor: pointer; line-height: 1;
}
.uh-werkzeug > button:hover { border-color: var(--gold); color: var(--goldhell); }
.uh-werkzeug .uhw-trenn {
    width: 1px; height: 18px; background: var(--rand); margin: 0 .2rem;
}
/* Woerter statt Zeichen in der Leiste (13.09.). */
.uh-werkzeug > .uhw-wort {
    min-width: 0; padding: 0 .5rem; font-size: 12px;
    border-color: var(--rand);
}
.uh-werkzeug .uhw-gruppe {
    font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--grau); margin: 0 .15rem 0 .25rem;
}
.uh-werkzeug .uhw-groesse {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: 12px; opacity: .9;
}
.uh-werkzeug .uhw-px { width: 54px; height: 26px; padding: 0 .3rem; font-size: 12.5px; }
.uh-werkzeug .farbfeld .farbhex { width: 76px; height: 26px; font-size: 12px; }
.uh-werkzeug .uhw-merk { position: relative; }
.uh-werkzeug .uhw-zahl {
    position: absolute; top: -6px; right: -6px; min-width: 15px;
    height: 15px; border-radius: 8px; background: var(--gold);
    color: #1a1608; font-size: 10px; line-height: 15px; padding: 0 3px;
    font-style: normal;
}
/* Die gemerkten Stellen (Strg+M) - gemalt, ohne das HTML anzufassen. */
::highlight(uh-merk) { background: rgba(233, 205, 141, .32); }

/* Aufklapp-Punkte (Akkordeon). */
.uhb-akkordeon { display: grid; gap: .45rem; }
.uhb-klappe {
    border: 1px solid var(--rand); border-radius: 9px;
    background: rgba(255,255,255,.025); overflow: hidden;
}
.uhb-klappe summary {
    cursor: pointer; padding: .55rem 2rem .55rem .8rem;
    font-weight: 600; list-style: none; position: relative;
}
.uhb-klappe summary::-webkit-details-marker { display: none; }
.uhb-klappe summary::after {
    content: "▾"; position: absolute; right: .8rem; top: 50%;
    transform: translateY(-50%); color: var(--gold);
    transition: transform .25s ease;
}
.uhb-klappe[open] summary::after {
    transform: translateY(-50%) rotate(180deg);
}
.uhb-klappe summary:hover { color: var(--goldhell); }
.uhb-klappe > .uh-fliess { padding: 0 .8rem .7rem; }

/* Zitat. */
.uhb-zitat blockquote {
    margin: 0; padding: .35rem 0 .35rem 1rem;
    border-left: 3px solid var(--gold);
    font-size: 15px; font-style: italic; color: var(--hell);
}
.uhb-quelle {
    display: block; margin-top: .4rem; padding-left: 1rem;
    font-size: 12px; color: var(--grau);
}

/* Editor: Akkordeon-Zeilen, Format-Wahl, Link-Kaestchen. */
.uhe-klapp {
    border: 1px dashed var(--rand); border-radius: 8px;
    padding: .5rem; margin-bottom: .5rem;
}
.uh-werkzeug .uhw-format {
    height: 26px; font-size: 12px; width: auto; padding: 0 .3rem;
}
.uhw-linkkasten {
    flex-basis: 100%; display: flex; gap: .4rem; padding-top: .35rem;
}
.uhw-linkkasten input { height: 28px; flex: 1; font-size: 12.5px; }
.uhw-linkkasten { flex-wrap: wrap; }
.uhw-linkkasten .uhw-ziel {
    flex-basis: 100%; height: 28px; font-size: 12px;
}

/* Tabellen- und Bild-Aufsatz der Werkzeugleiste (13.09.). Eigene
   Knopf-Optik, weil '.uh-werkzeug > button' nur die direkten Kinder
   der Leiste trifft. */
.uhw-tabkasten, .uhw-bildkasten {
    flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .4rem;
    align-items: center; padding-top: .35rem;
}
.uhw-tabreihe {
    flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .3rem;
    align-items: center;
}
.uhw-tabkasten button, .uhw-bildkasten button {
    height: 26px; padding: 0 .55rem; border-radius: 6px;
    border: 1px solid var(--rand); background: var(--karte);
    color: var(--text); font: inherit; font-size: 12px; cursor: pointer;
    white-space: nowrap;
}
.uhw-tabkasten button:hover, .uhw-bildkasten button:hover {
    border-color: var(--gold); color: var(--goldhell);
}
.uhw-tabkasten button.haupt, .uhw-bildkasten button.haupt {
    border-color: var(--gold); color: var(--goldhell);
}
.uhw-tabkasten button.gefahr:hover {
    border-color: #5e2d2c; color: #f0b4af;
}
.uhw-tabkasten input[type="number"],
.uhw-bildkasten input[type="number"] {
    width: 58px; height: 26px; padding: 0 .3rem; font-size: 12px;
}
/* Im Schreibfeld sollen Tabellenzellen sichtbar sein, auch die leeren -
   sonst zielt man beim Klicken ins Nichts. Der Platz oben und links
   gehoert den Griffen (uhTabGriffe). */
.uh-mini table { margin: 1.9rem 0 1.4rem; }
/* Platz fuer die Griffe links und unter Tabellen UND Aufzaehlungen. */
.uh-mini:has(table), .uh-mini:has(.hb-punkte),
.uh-mini:has(.hb-schritte) { padding-left: 1.7rem; }
.uh-mini .hb-punkte, .uh-mini .hb-schritte { margin-bottom: 1.5rem; }
.uh-mini td, .uh-mini th {
    outline: 1px dotted rgba(201,164,92,.28); min-width: 2.5rem;
}

/* Die Griffe an der Tabelle: eigene Ebene, damit nichts davon im
   gespeicherten Text landet. */
.uh-tabgriffe {
    position: absolute; inset: 0; pointer-events: none; z-index: 5;
}
.uh-tabgriffe > * { position: absolute; pointer-events: auto; }
.uh-tg-plus {
    width: 16px; height: 16px; padding: 0; border-radius: 50%;
    border: 1px solid var(--rand); background: var(--karte);
    color: var(--grau); font: inherit; font-size: 11px; line-height: 1;
    cursor: pointer; z-index: 2; display: grid; place-items: center;
}
.uh-tg-plus:hover {
    border-color: var(--gold); color: var(--goldhell);
    background: rgba(201,164,92,.16);
}
.uh-tg-spalte, .uh-tg-zeilegriff {
    border-radius: 5px; background: rgba(255,255,255,.03);
    display: grid; place-items: center;
}
.uh-tg-spalte:hover, .uh-tg-zeilegriff:hover {
    background: rgba(201,164,92,.12);
}
.uh-tg-weg {
    width: 15px; height: 15px; padding: 0; border: 0; background: none;
    color: #cf5850; font: inherit; font-size: 10px; line-height: 1;
    cursor: pointer; opacity: 0; transition: opacity .12s;
}
.uh-tg-spalte:hover .uh-tg-weg,
.uh-tg-zeilegriff:hover .uh-tg-weg { opacity: 1; }
.uh-tg-unten {
    height: 15px; padding: 0; border-radius: 5px;
    border: 1px dashed var(--rand); background: none;
    color: var(--grau); font: inherit; font-size: 10.5px; line-height: 1;
    cursor: pointer;
}
.uh-tg-unten:hover {
    border-color: var(--gold); border-style: solid;
    color: var(--goldhell); background: rgba(201,164,92,.1);
}

/* Layout-Spielarten: Hero-Schriftlage. */
.uhb-hero.uhh-links { justify-content: flex-start; text-align: left; }
.uhb-hero.uhh-links .uhb-hero-text { padding-left: 2rem; max-width: 62%; }
.uhb-hero.uhh-untenlinks {
    justify-content: flex-start; align-items: flex-end; text-align: left;
}
.uhb-hero.uhh-untenlinks .uhb-hero-text {
    padding: 0 0 1.3rem 2rem; max-width: 72%;
}

/* Spalten-Teilung. */
.uhb-spalten.uhsp-33 { grid-template-columns: 1fr 2fr; }
.uhb-spalten.uhsp-66 { grid-template-columns: 2fr 1fr; }
.uhb-spalten.uhsp-drittel { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 780px) {
    .uhb-spalten.uhsp-33, .uhb-spalten.uhsp-66,
    .uhb-spalten.uhsp-drittel { grid-template-columns: 1fr; }
}

/* Galerie-Anordnungen. */
.uhb-galerie.uhg-gross {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.uhb-galerie.uhg-mosaik { display: block; columns: 3 220px; column-gap: .5rem; }
.uhb-galerie.uhg-mosaik a { margin-bottom: .5rem; break-inside: avoid; }
.uhb-galerie.uhg-mosaik img { aspect-ratio: auto; }
.uhb-galerie.uhg-reihe { display: flex; overflow-x: auto; padding-bottom: .4rem; }
.uhb-galerie.uhg-reihe a { flex: 0 0 240px; }

/* Knopf-Spielarten. */
.uhb-knoepfe.uhk-mitte { justify-content: center; }
.uhb-knoepfe.uhk-gold .uhb-knopf {
    background: var(--gold); color: #1a1608; font-weight: 600;
}
.uhb-knoepfe.uhk-gold .uhb-knopf:hover { background: var(--goldhell); }

/* Kacheln. */
.uhb-kacheln {
    display: grid; gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.uhb-kachel {
    border: 1px solid var(--rand); border-radius: 10px; padding: .9rem;
    background: rgba(255,255,255,.03);
    transition: transform .18s ease, border-color .18s ease;
}
.uhb-kachel:hover { transform: translateY(-2px); border-color: var(--gold); }
.uhb-kachel .uhk-zeichen { font-size: 22px; display: block; margin-bottom: .35rem; }
.uhb-kachel b { display: block; margin-bottom: .3rem; }

/* Zeitstrahl. */
.uhb-zeitstrahl { padding-left: .4rem; }
.uhz-schritt {
    position: relative; padding: 0 0 1rem 1.5rem;
    border-left: 2px solid var(--rand);
}
.uhz-schritt:last-child { border-left-color: transparent; padding-bottom: .2rem; }
.uhz-schritt::before {
    content: ""; position: absolute; left: -6px; top: 2px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 8px rgba(201,164,92,.5);
}
.uhz-schritt > b { display: block; margin-bottom: .25rem; }

/* Kennzahlen-Band. */
.uhb-zahlen { display: flex; flex-wrap: wrap; gap: .6rem; }
.uhb-zahl {
    flex: 1 1 140px; text-align: center; padding: .9rem .6rem;
    border: 1px solid var(--rand); border-radius: 10px;
    background: rgba(255,255,255,.03);
}
.uhb-zahl b { display: block; font-size: 26px; color: var(--gold); }
.uhb-zahl span { font-size: 12px; color: var(--grau); letter-spacing: .04em; }

/* Team-Karten. */
.uhb-personen {
    display: grid; gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.uhb-person {
    text-align: center; border: 1px solid var(--rand);
    border-radius: 10px; padding: .9rem .6rem;
    background: rgba(255,255,255,.03);
}
.uhb-person img, .uhb-person .uhp-kreis {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: .45rem; border: 2px solid var(--randhell);
}
.uhb-person .uhp-kreis {
    background: var(--karte2); color: var(--gold);
    font-size: 24px; font-weight: 700;
}
.uhb-person b { display: block; }
.uhb-person span { font-size: 12px; color: var(--grau); }
.uhe-stufen { flex-wrap: wrap; gap: .6rem; margin-bottom: .5rem; }

/* Einzeilige Schreibfelder (Ueberschriften) samt Platzhalter. */
.uh-mini.uh-mini-zeile { min-height: 0; margin-bottom: .4rem; }
.uh-mini[data-platz]:empty::before {
    content: attr(data-platz); color: var(--grau); pointer-events: none;
}

/* Hero-Knoepfe (CTA) unter dem Untertitel. */
.uhb-hero-text .uhh-knoepfe { margin-top: .8rem; justify-content: center; }
.uhb-hero.uhh-links .uhh-knoepfe,
.uhb-hero.uhh-untenlinks .uhh-knoepfe { justify-content: flex-start; }

/* Team-Ausrichtung: mittig/rechts als Flex, sonst bleibt das Raster. */
.uhb-personen.uhp-mitte, .uhb-personen.uhp-rechts {
    display: flex; flex-wrap: wrap;
}
.uhb-personen.uhp-mitte { justify-content: center; }
.uhb-personen.uhp-rechts { justify-content: flex-end; }
.uhb-personen.uhp-mitte .uhb-person,
.uhb-personen.uhp-rechts .uhb-person { flex: 0 0 170px; }

/* Sticky-Befreiung: die Karte klippt (overflow hidden) und wuerde die
   Werkzeug-Leiste festklemmen - sticky haftet nur am naechsten
   rollenden Vorfahren. Solange ein Sektions-Editor offen ist, darf
   die Karte nicht klippen. */
.karte:has(.uhe-block) { overflow: visible; }

/* Sektions-Hintergruende ("gradients und so weiter"). */
.uh-grund-karte, .uh-grund-blau, .uh-grund-gold, .uh-grund-nacht {
    padding: 1rem 1.1rem; border-radius: 10px;
    border: 1px solid var(--rand);
}
.uh-grund-karte { background: rgba(255,255,255,.035); }
.uh-grund-blau {
    background: linear-gradient(135deg, rgba(64,110,178,.30), rgba(10,15,24,.55));
    border-color: rgba(130,170,230,.28);
}
.uh-grund-gold {
    background: linear-gradient(135deg, rgba(201,164,92,.20), rgba(10,15,24,.45));
    border-color: rgba(201,164,92,.38);
}
.uh-grund-nacht {
    background: linear-gradient(180deg, rgba(4,9,18,.8), rgba(16,24,38,.35));
}

/* Trenner-Spielarten. */
.uhb-trenner.uht-verlauf {
    border-top: 2px solid;
    border-image: linear-gradient(90deg, transparent,
        rgba(201,164,92,.85), transparent) 1;
}
.uhb-trenner.uht-punkte {
    border-top: 3px dotted rgba(201,164,92,.55);
}

/* Einblend-Effekte der Sektionen (uhFxBeleben schaltet .uh-fx-an,
   sobald die Sektion ins Bild rollt). */
/* Dauer/Verzoegerung/Weite kommen als Variablen aus dem Editor. */
.uh-fx {
    opacity: 0;
    transition: opacity var(--fxdauer, .8s) ease,
        transform var(--fxdauer, .8s) ease;
    transition-delay: var(--fxverzug, 0s);
}
.uh-fx-hoch { transform: translateY(var(--fxweg, 34px)); }
.uh-fx-links { transform: translateX(calc(-1 * var(--fxweg, 28px))); }
.uh-fx-rechts { transform: translateX(var(--fxweg, 28px)); }
.uh-fx-zoom { transform: scale(.93); }
.uh-fx-fallen { transform: translateY(calc(-1 * var(--fxweg, 34px))); }
.uh-fx-klappen {
    transform: perspective(700px) rotateX(16deg) translateY(14px);
    transform-origin: top center;
}
.uh-fx-drehen { transform: rotate(-3deg) scale(.95); }
.uh-fx.uh-fx-an { opacity: 1; transform: none; }
.uhb-hero[data-par] .uhb-hero-bild { will-change: transform; }

/* Kamerafahrt uebers Hero-Bild (Ken Burns) - laeuft dauerhaft. Die
   Animation ueberstimmt waehrend des Laufs den Parallax-Inline-Stil. */
@keyframes uh-kenburns {
    0% { transform: scale(1.06); }
    100% { transform: scale(1.22) translate(1.5%, -1.5%); }
}
.uhb-hero[data-bewegt] .uhb-hero-bild {
    animation: uh-kenburns 18s ease-in-out infinite alternate;
}

/* Titel-Effekte im Hero. */
@keyframes uh-schimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -100% 0; }
}
.uhb-hero-text.uht-schimmer h2 {
    background: linear-gradient(100deg, #fff 38%, #ffe9b8 47%,
        #c9a45c 50%, #ffe9b8 53%, #fff 62%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; text-shadow: none;
    animation: uh-schimmer 5.5s linear infinite;
}
@keyframes uh-gluehen {
    0%, 100% { text-shadow: 0 2px 10px rgba(0,0,0,.55),
        0 0 14px rgba(233,205,141,.25); }
    50% { text-shadow: 0 2px 10px rgba(0,0,0,.55),
        0 0 32px rgba(233,205,141,.85); }
}
.uhb-hero-text.uht-gluehen h2 {
    animation: uh-gluehen 2.8s ease-in-out infinite;
}

/* Leben in Galerie und Link-Knoepfen. */
.uhb-galerie a { display: block; overflow: hidden; border-radius: 7px; }
.uhb-galerie img { transition: transform .35s ease, filter .35s ease; }
.uhb-galerie a:hover img { transform: scale(1.06); filter: brightness(1.08); }
.uhb-knopf { transition: transform .18s ease, box-shadow .18s ease; }
.uhb-knopf:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.35); }

/* Die Effekt-Wahl im Sektions-Editor. */
.uhe-fx { margin: .5rem 0 0; flex-wrap: wrap; gap: .8rem; }
.uhe-fx select { width: auto; margin-left: .35rem; }
.uh-text {
    min-height: 260px; border: 1px solid var(--rand); border-radius: 7px;
    padding: .7rem; background: rgba(255,255,255,.015); line-height: 1.6;
}
.uh-text:focus { outline: none; border-color: var(--gold); }
.uh-text img { max-width: 100%; border-radius: 8px; }
.uh-text h3 { color: var(--hell); font-size: 14px; }

/* ---- Baukasten-Sektionen (01.09.) ------------------------------------ */

.uh-fliess { line-height: 1.65; }
.uh-fliess ul { padding-left: 1.3rem; }
.uhb { margin: 0 0 1.1rem; }
.uhb h3 { color: var(--hell); margin: 0 0 .4rem; font-size: 14px; }

.uhb-bildtext { display: flex; gap: .9rem; align-items: flex-start; }
.uhb-bildtext img {
    width: 38%; max-width: 340px; border-radius: 8px; flex: none;
}
.uhb-bildtext.rechts { flex-direction: row-reverse; }
.uhb-bt-text { min-width: 0; }
@media (max-width: 780px) {
    .uhb-bildtext, .uhb-bildtext.rechts { flex-direction: column; }
    /* !important, weil die Breite INLINE am Bild steht (sie ist ja
       einstellbar) - ohne das blieb das Bild am Telefon bei seinen
       38 %, obwohl hier seit jeher 100 % stehen. Gilt auch fuer das
       Zuschnitt-Fenster, das die Breite ebenso inline traegt. */
    /* Das nackte Bild ist ausgenommen (:not): dort ist die gewaehlte
       Breite die Aussage - ein Wappen soll klein bleiben, und es
       teilt sich die Zeile mit niemandem. Ausnehmen statt
       ueberschreiben, denn gegen das !important oben kaeme eine
       zweite Regel nicht an. */
    .uhb-bildtext:not(.uhb-nurbild) img,
    .uhb-bildtext:not(.uhb-nurbild) .uhb-bt-fenster {
        width: 100% !important; max-width: none;
    }
}

/* Nur ein Bild, ohne Text (Justin, 02.09.). Derselbe Flex-Grundriss
   wie Bild+Text - uhn-* sagt nur, wo es in der Zeile sitzt. */
.uhb-nurbild img, .uhb-nurbild .uhb-bt-fenster { max-width: none; }
.uhb-nurbild.uhn-mitte { justify-content: center; }
.uhb-nurbild.uhn-rechts { justify-content: flex-end; }

/* Einbettung mit Text daneben. */
.uhb-ifneben { display: flex; gap: .9rem; align-items: flex-start; }
.uhb-ifneben.rechts { flex-direction: row-reverse; }
.uhb-if-rahmen { flex: none; min-width: 0; }
@media (max-width: 780px) {
    .uhb-ifneben, .uhb-ifneben.rechts { flex-direction: column; }
    /* Auch hier steht die Breite inline. */
    .uhb-if-rahmen { width: 100% !important; }
}

.uhb-galerie {
    display: grid; gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.uhb-galerie img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 7px; display: block;
}

.uhb-hinweis {
    border: 1px solid var(--rand); border-left: 4px solid var(--blau);
    border-radius: 7px; padding: .6rem .8rem;
    background: rgba(255,255,255,.02);
}
.uhb-hinweis.wichtig { border-left-color: var(--gold); }
.uhb-hinweis.warnung { border-left-color: var(--rot); }

.uhb-trenner {
    border-top: 1px solid var(--rand); margin: 1.3rem 0;
    text-align: center; line-height: 0;
}
.uhb-trenner span {
    position: relative; top: -1px; background: var(--karte);
    padding: 0 .7rem; font-size: 11.5px; color: var(--grau);
    text-transform: uppercase; letter-spacing: .06em;
}

/* Der Editor des Baukastens. */
.uhe-block {
    border: 1px solid var(--rand); border-radius: 9px;
    padding: .6rem .7rem; margin-bottom: .6rem;
    background: rgba(255,255,255,.015);
    /* Bezugsrahmen fuer die Tabellen-Griffe (13.09.). */
    position: relative;
}
.uhe-block input, .uhe-block select { margin-bottom: .4rem; }
.uhe-kopf {
    display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem;
}
.uhe-kopf b { color: var(--hell); font-size: 12.5px; }
.uhe-knoepfe { margin-left: auto; display: flex; gap: .25rem; }
.uh-mini {
    min-height: 90px; border: 1px solid var(--rand); border-radius: 7px;
    padding: .55rem .65rem; line-height: 1.6;
    background: rgba(255,255,255,.015);
}
.uh-mini:focus { outline: none; border-color: var(--gold); }
.uhe-thumb {
    height: 44px; border-radius: 6px; display: block;
}
.uhe-galerie {
    display: grid; gap: .4rem; margin-bottom: .45rem;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}
.uhe-gbild { position: relative; display: block; }
.uhe-gbild img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: 6px; display: block;
}
.uhe-gbild button {
    position: absolute; top: .25rem; right: .25rem;
    padding: .1rem .35rem; line-height: 1;
}
.uhe-palette {
    display: flex; gap: .35rem; flex-wrap: wrap; align-items: center;
    border-top: 1px dashed var(--rand); padding-top: .6rem;
}

/* Hero: Banner mit Schrift in der Mitte. */
.uhb-hero {
    position: relative; min-height: 230px; border-radius: 10px;
    overflow: hidden; background-size: cover; background-position: center;
    background-color: var(--blaudun);
    display: flex; align-items: center; justify-content: center;
    text-align: center;
}
.uhb-hero-schleier { position: absolute; inset: 0; background: rgba(4,9,18,.45); }
.uhb-hero-text { position: relative; padding: 2.2rem 1.2rem; max-width: 80%; }
.uhb-hero-text h2 {
    color: #fff; font-size: 26px; margin: 0 0 .45rem;
    letter-spacing: .02em; text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.uhb-hero-text p {
    color: rgba(255,255,255,.88); margin: 0; font-size: 14.5px;
    text-shadow: 0 1px 6px rgba(0,0,0,.55);
}

/* Zwei Spalten. */
.uhb-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.uhe-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 780px) {
    .uhb-spalten, .uhe-spalten { grid-template-columns: 1fr; }
}

/* Link-Knoepfe. */
.uhb-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; }
.uhb-knopf {
    display: inline-block; padding: .45rem .9rem; border-radius: 8px;
    border: 1px solid var(--gold); color: var(--goldhell);
    text-decoration: none; font-size: 13px;
}
.uhb-knopf:hover { background: rgba(201,164,92,.12); }
.uhe-link { margin-bottom: .35rem; }
.uhe-link input { margin-bottom: 0; }

/* Einbettung. */
.uhb-iframe iframe {
    width: 100%; border: 1px solid var(--rand); border-radius: 9px;
    background: #0a0f18; display: block;
}

/* Bildbreite bei Bild+Text. */
.uhb-bildtext.schmal img { width: 22%; max-width: 220px; }
.uhb-bildtext.breit img { width: 52%; max-width: 520px; }

/* Sektions-Knoepfe: schweben rechts oben ueber der Sektion, nur
   sichtbar wenn man drueber ist - die Leser sehen sie nie (kein darf,
   kein Markup). */
.uh-sektion { position: relative; }
.uh-sektion .uh-sek-knoepfe {
    position: absolute; top: .3rem; right: .3rem; display: flex;
    gap: .25rem; opacity: 0; transition: opacity .12s ease;
    background: rgba(10,15,24,.85); border: 1px solid var(--rand);
    border-radius: 8px; padding: .2rem;
}
.uh-sektion:hover .uh-sek-knoepfe,
.uh-sektion:focus-within .uh-sek-knoepfe { opacity: 1; }

/* Live-Vorschau im Sektions-Editor. */
.uhe-vorschau-wort { margin: .55rem 0 .25rem; }
.uhe-vorschau {
    border: 1px dashed var(--rand); border-radius: 9px;
    padding: .7rem; background: rgba(255,255,255,.01);
}

/* Anfasser in der Vorschau: Ecke am Bild, Balken unten an Hero/iframe. */
.uh-anfass-rahmen { position: relative; display: block; flex: none; }
.uh-anfass-rahmen img { width: 100% !important; display: block; }
.uh-anfasser {
    position: absolute; right: -7px; bottom: -7px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--gold); border: 2px solid #131826;
    cursor: nwse-resize; box-shadow: 0 1px 5px rgba(0,0,0,.55);
}
/* Bei 'Bild rechts' sitzt der Griff an der freien, linken Ecke -
   nach aussen ziehen heisst dann ueberall: groesser. */
.uh-anfasser.links { right: auto; left: -7px; cursor: nesw-resize; }
.uh-anfasser-unten {
    position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
    width: 46px; height: 11px; border-radius: 6px; background: var(--gold);
    border: 2px solid #131826; cursor: ns-resize;
    box-shadow: 0 1px 5px rgba(0,0,0,.55);
}
.uhb-iframe { position: relative; }
.uh-zieht iframe { pointer-events: none; }

/* Trennstrich-Zeile im Leiste-einrichten-Dialog. */
.hd-strichzeile b { font-weight: 400; }
.hd-strich {
    display: block; width: 22px; height: 2px;
    background: var(--rand); border-radius: 1px;
}

/* Der Zoom-Schieber im Sektions-Editor. */
.uh-zoomzeile { display: inline-flex; align-items: center; gap: .45rem; }
.uh-zoomzeile input[type="range"] {
    width: 170px; margin: 0; accent-color: var(--gold);
}
.uh-zoomwert { color: var(--goldhell); font-size: 11.5px; min-width: 44px; }

/* Bild-Ebenen in Zuschnitt-Fenstern (Hero, Bild+Text mit Hoehe). */
.uhb-hero-bild { position: absolute; object-fit: cover; }
.uhb-bt-fenster {
    display: block; flex: none; position: relative; overflow: hidden;
    border-radius: 8px;
}
.uhb-bt-fenster img { position: absolute; object-fit: cover; display: block; }

/* Ausschnitt waehlen: greifbare Flaeche + Uebersichtskarte. */
.uhe-vorschau { position: relative; }
.uh-fokus-flaeche { cursor: move; }
.uh-fokus-karte {
    position: absolute; left: .6rem; bottom: .6rem; z-index: 6;
    background: rgba(8,12,20,.94); border: 1px solid var(--rand);
    border-radius: 9px; padding: .4rem; pointer-events: none;
    display: flex; flex-direction: column; gap: .3rem; align-items: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.uh-fokus-bild { position: relative; display: block; line-height: 0; }
.uh-fokus-bild img {
    display: block; max-width: 150px; max-height: 96px;
    opacity: .75; border-radius: 5px;
}
.uh-fokus-bild i {
    position: absolute; border: 2px solid var(--gold); border-radius: 3px;
    box-shadow: 0 0 6px rgba(201,164,92,.6);
}
.uh-fokus-karte b { font-size: 10.5px; color: var(--goldhell); }

/* Ziehen: der Griff und die Gold-Linie am Ziel. */
.uh-sek-griff { cursor: grab; }
.uh-sektion.ziehend { opacity: .35; }
.uh-sektion.ziel-oben { box-shadow: 0 -3px 0 0 var(--gold); }
.uh-sektion.ziel-unten { box-shadow: 0 3px 0 0 var(--gold); }

/* Titel umbenennen im Kapitel-Kopf. */
.uh-tedit { max-width: 280px; }
.uh-kopf .uh-titel-edit { padding: .15rem .4rem; }

/* ---- Erstattung: Tuning-Antraege (AP51) -----------------------------------
   Ein Antrag ist ein Beleg mit einer Zahl daran. Das Bild steht deshalb
   links und nicht als Anhang unten - man erkennt einen Umbau schneller,
   als man ihn liest. */

.ka-zeile {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .6rem .8rem; border-bottom: 1px solid var(--rand);
    border-left: 3px solid transparent;
}
.ka-zeile:last-child { border-bottom: 0; }
.ka-zeile.gelb  { border-left-color: var(--gelb); }
.ka-zeile.blau  { border-left-color: var(--blau); }
.ka-zeile.gruen { border-left-color: var(--gruen); }
.ka-zeile.grau  { opacity: .55; }

.ka-bild {
    flex: none; width: 72px; height: 52px; border-radius: 7px;
    overflow: hidden; border: 1px solid var(--rand); background: var(--karte2);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--grau); text-decoration: none;
}
.ka-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ka-bild:not(.leer-bild):hover { border-color: var(--gold); }

.ka-text { flex: 1; min-width: 0; }
.ka-oben {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    font-size: 12.5px;
}
.ka-oben b { color: var(--hell); font-weight: 600; }
.ka-oben b.klickbar { cursor: pointer; }
.ka-oben b.klickbar:hover { color: var(--goldhell); }
.ka-wagen { color: var(--goldhell); font-weight: 600; font-size: 12.5px; }
.ka-was {
    font-size: 12px; color: var(--text); margin-top: .2rem; line-height: 1.5;
}
.ka-fuss { font-size: 10.5px; color: var(--grau); margin-top: .25rem; }
.ka-fuss i { font-style: italic; }

.ka-betrag {
    flex: none; text-align: right; font-weight: 700; font-size: 14px;
    color: var(--gruen); font-variant-numeric: tabular-nums; min-width: 5.5rem;
}
.ka-betrag i {
    display: block; font-style: normal; font-size: 10.5px; color: var(--gelb);
    font-weight: 400;
}
.ka-knoepfe { flex: none; display: flex; gap: 4px; flex-wrap: wrap;
    justify-content: flex-end; max-width: 13rem; }

.ka-schuld {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .5rem .8rem; border-bottom: 1px solid var(--rand);
    font-size: 12.5px;
}
.ka-schuld:last-child { border-bottom: 0; }
.ka-schuld b { color: var(--hell); font-weight: 600; cursor: pointer; }
.ka-schuld b:hover { color: var(--goldhell); }
.ka-summe {
    margin-left: auto; font-weight: 700; font-size: 15px; color: var(--gruen);
    font-variant-numeric: tabular-nums;
}

/* Der Beleg beim Einreichen: eine Flaeche, auf die man das Bild zieht -
   und die sofort zeigt, was ankommen wird. Blind abschicken soll niemand. */
.ka-drop {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    justify-content: center; min-height: 120px; cursor: pointer;
    border: 1px dashed var(--randhell); border-radius: 10px;
    padding: .8rem; background: rgba(255,255,255,.015);
    color: var(--grau); font-size: 12px; text-align: center;
}
.ka-drop:hover { border-color: var(--gold); color: var(--text); }
.ka-drop input[type=file] { display: none; }
.ka-drop img {
    max-width: 100%; max-height: 220px; border-radius: 7px; display: block;
}

/* ==========================================================================
   HANDY (AP52)
   ==========================================================================
   Justin: "wenn man mit pc auf fivem server ist, dann mit handy auch auf
   die seite kann und alles abgepasst und smooth nutzen kann egal ob
   leitstelle oder sonst was als ersatz".

   Der zweite Bildschirm ist das Handy neben der Tastatur. Wer im Spiel
   sitzt, hat keine Hand frei zum Zoomen und Schieben - alles muss auf
   einen Daumen passen, ohne dass die Seite seitlich wegläuft.

   Vier Dinge waren dafür wirklich im Weg und stehen deshalb ganz vorn:

   1. Eingabefelder mit 13px. iOS zoomt beim Antippen jedes Feld unter
      16px heran und kommt nicht von selbst zurück - die Seite steht
      danach schief. 16px ist keine Geschmacksfrage, sondern die Grenze.
   2. Die Leiste unten hatte elf Knöpfe auf fester Breite. Auf einem
      390px-Schirm waren die letzten drei nicht erreichbar.
   3. Die Tafel stand in drei Spalten - drei Reviere nebeneinander sind
      auf 390px drei unlesbare Streifen.
   4. Die Zuweis-Leiste und die Meldungen saßen 1,1rem über dem unteren
      Rand, also GENAU unter der Leiste.
   ========================================================================== */

@media (max-width: 760px) {

    /* --- 1. Kein Heranzoomen beim Antippen --- */
    input, select, textarea { font-size: 16px; padding: .55rem .65rem; }
    /* Der Daumen trifft keine 22px. */
    button, .knopf { padding: .5rem .8rem; }
    button.klein { padding: .4rem .6rem; font-size: 12px; }

    /* --- 2. Die Leiste unten scrollt --- */
    .leiste {
        overflow-x: auto; overflow-y: hidden;
        justify-content: flex-start;
        /* Der Streifen unter dem Home-Balken des iPhones. */
        padding-bottom: env(safe-area-inset-bottom, 0);
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        scrollbar-width: none;
    }
    .leiste::-webkit-scrollbar { display: none; }
    .leiste nav { flex: none; }
    .leiste nav button, .leiste-aus, .leiste-report, .leiste-buch { flex: none; }
    .leiste-buch { margin-left: .2rem; }
    .leiste-report { margin-left: .2rem; }
    .leiste-aus { margin-left: .2rem; }
    #anwendung {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* --- 3. Die Tafel untereinander --- */
    .brett-zeile, .brett-zeile.eigen { grid-template-columns: 1fr; }
    .spalten.k2, .spalten.k3, .spalten.k4 { grid-template-columns: 1fr; }
    .felder { grid-template-columns: 1fr; }
    /* JEDES Element mit `span 2`, nicht nur `.feld`. Eine Ueberschrift
       im Bogen ist ein `div.bg-abschnitt` und traegt dieselbe Angabe;
       ein `span 2` in einem einspaltigen Raster legt eine zweite,
       automatisch breite Spalte an - und damit stand der Bogen am Handy
       wieder zweispaltig, die rechte Spalte ausserhalb des Bildes. */
    .felder > [style*="span 2"] { grid-column: span 1 !important; }

    /* --- 4. Nichts sitzt mehr unter der Leiste --- */
    .zuweis {
        bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        max-width: 94vw;
    }
    #meldung { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

    /* --- Kopf: die Marke bleibt, das Beiwerk weicht --- */
    main { padding: .7rem .6rem 1rem; }
    .kopf-rechts { gap: .5rem; }
    /* Der Punkt sagt schon alles - der Satz daneben kostet die halbe
       Zeile und steht im Profil ohnehin. */
    #puls-text { display: none; }
    .ich .rolle { display: none; }
    .ich .name { font-size: 12px; max-width: 7.5rem; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap; }
    .ich > .knopf { padding: .35rem .5rem; }

    /* --- Schublade: von unten, über die ganze Breite --- */
    .schublade {
        width: 100%; border-radius: 16px 16px 0 0; border-left: 0;
        border-top: 1px solid var(--randhell);
        top: 6vh; height: 94vh;
        transform: translateY(100%);
        box-shadow: 0 -14px 40px rgba(0,0,0,.6);
    }
    .schublade.auf { transform: none; }
    .schublade::before {
        left: 50%; top: 7px; bottom: auto; transform: translateX(-50%);
        width: 42px; height: 4px; border-radius: 3px;
        background: var(--randhell);
    }
    .schublade > header { padding-top: 1.3rem; }
    .schublade .rumpf {
        padding: .9rem .8rem;
        padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
        -webkit-overflow-scrolling: touch;
    }

    /* --- Die neuen Bereiche --- */
    .stat-reihe { grid-template-columns: repeat(2, 1fr); }
    .mp-kopf { flex-direction: column; align-items: flex-start; }
    .mp-lagen { margin-left: 0; width: 100%; }
    .mp-lage { flex: 1; min-width: 8rem; }
    .mp-abz { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
    .mp-t-w, .az-zeit, .az-geld { min-width: 4rem; }
    .mp-t-b2 { display: none; }        /* der Balken ist der erste, der weicht */
    .rt-karten { grid-template-columns: 1fr; padding: .6rem; }
    .rt-liste { max-height: 40vh; }
    .rt-woher { max-width: none; margin-left: 0; width: 100%;
        justify-content: flex-start; margin-top: .3rem; }
    .rt-pz { flex-wrap: wrap; }
    .fp-knoepfe, .ka-knoepfe { margin-left: 0; max-width: none; width: 100%; }
    .ka-zeile { flex-wrap: wrap; }
    .ka-betrag { margin-left: auto; }
    .ka-bild { width: 56px; height: 42px; }
    .wz-wege { grid-template-columns: 1fr; }
    .wz-punkt span { display: none; }  /* nur noch die Ziffern */
    .wz-punkt.an span { display: inline; }
    .bereichskopf { padding: .7rem .8rem; gap: .7rem; }
    .bk-marke b { font-size: 16px; }
    .bk-zahlen { gap: 1rem; }
    .bk-z b { font-size: 16px; }

    /* Untertabs scrollen, statt zu brechen - fuenf Reiter passen sonst
       nicht nebeneinander. */
    nav.tabs.untertabs {
        overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap;
    }
    nav.tabs.untertabs::-webkit-scrollbar { display: none; }
    nav.tabs.untertabs button { white-space: nowrap; flex: none; }
    /* Dieselbe Loesung fuer die Kapitel-Leiste des Handbuchs: EINE
       Zeile, seitlich schiebbar. Umgebrochen waeren es bei der Police
       Academy drei Reihen (gemessen 400px), und weil die Leiste seit
       dem 17.09. klebt, haette sie dauerhaft ein Fuenftel des Schirms
       belegt. */
    .uh-tafel > .uh-leiste {
        overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap;
    }
    .uh-tafel > .uh-leiste::-webkit-scrollbar { display: none; }
    .uh-tafel > .uh-leiste > * { flex: none; white-space: nowrap; }
}

/* Ganz schmal (kleine Handys quer im Menue, 360er hochkant) */
@media (max-width: 400px) {
    .marke i { display: none; }
    .ich-nr { display: none; }
    .stat-reihe { grid-template-columns: repeat(2, 1fr); }
    .kpi-gitter { grid-template-columns: 1fr 1fr; gap: .4rem; }
    .kpi b { font-size: 1.15rem; }
}

/* Auf dem Handy zeigt der Browser keine Zeigerspitze - Schwebe-Effekte
   bleiben nach dem Antippen haengen und sehen aus wie ein Fehler. */
@media (hover: none) {
    .rt-traeger:hover, .fp-zeile:hover, .mp-zeile.klickbar:hover,
    .ka-oben b.klickbar:hover, .ab-kopf b.klickbar:hover,
    .az-zeile b.klickbar:hover { background: none; }
    .wz-weg:hover, .rt-karte:hover, .ka-drop:hover { border-color: var(--rand); }
    .wz-weg.an { border-color: color-mix(in srgb, var(--gold) 55%, var(--rand)); }
    .rt-karte.an {
        border-color: color-mix(in srgb, var(--gruen) 45%, var(--rand));
    }
    /* Die Karte beim Darueberfahren gibt es ohne Zeiger gar nicht. */
    .profilkarte { display: none; }
}

/* Die Bildschirmhoehe auf dem Handy ist nicht konstant - die Adresszeile
   faehrt beim Scrollen ein und aus. dvh rechnet das mit, vh nicht: mit vh
   steht der Rand der Schublade mal ueber und mal unter dem Bildrand. */
@supports (height: 100dvh) {
    body { min-height: 100dvh; }
    .tor { min-height: 100dvh; }
    @media (max-width: 760px) {
        .schublade { height: 94dvh; top: 6dvh; }
    }
}

/* Auf dem Handy soll ein Tipp ein Tipp sein: kein 300ms-Warten auf einen
   moeglichen Doppeltipp, kein markierter Text beim Halten, und kein
   nativer Zieh-Vorgang an den Besatzungs-Chips (die Tafel hat fuers
   Antippen ihren eigenen Weg - Person tippen, dann Einheit tippen). */
@media (hover: none) {
    button, .knopf, .leiste nav button, nav.tabs button,
    .e-karte, .crew, .pool-chip, .code-pille, .rt-traeger, .wz-punkt {
        touch-action: manipulation;
    }
    #l-brett, .leiste, nav.tabs { -webkit-user-select: none; user-select: none; }
    [draggable="true"] { -webkit-user-drag: none; }
    /* Kapitel-Reiter sind 30px hoch mit 2px Luecke - am Finger zu
       wenig. Dieselbe Groesse wie die Untertabs (42px), damit man
       zwischen "Leitfaden" und "Kleidung / Autos" nicht danebentippt
       (Justin, 17.09.). */
    .uh-kapitel { padding: .55rem 1rem; min-height: 40px; }
}

/* ==========================================================================
   HANDY, ZWEITER DURCHGANG (AP53) — gemessen statt geraten
   ==========================================================================
   Die Seite wurde diesmal wirklich in 360 und 390 Pixel Breite gerendert
   und vermessen (Chrome, Schaumodus). Was hier steht, sind die Funde
   daraus - nicht meine Vermutung, wie es aussehen koennte.

   Zwei Klassen von Fehlern kamen heraus:

   1. ZU KLEIN ZUM TIPPEN. Ein Daumen braucht ~9mm, das sind rund 36px.
      Gemessen: Dienst-Knopf 28px, "Aus" 27px, die Status-Pillen der
      Leitstelle 27px, die Unterreiter 24px, die Monatspfeile 30px. Genau
      die Dinge, die man am haeufigsten trifft.
   2. ZOOMT HERAN. #p-suche stand auf 12,5px - die Regel aus dem ersten
      Durchgang galt fuer "input", aber ".werkzeuge input" ist
      spezifischer und hat gewonnen. Auf iOS zoomt das Feld beim Antippen
      heran und die Seite steht danach schief.
   ========================================================================== */

@media (max-width: 760px) {

    /* --- 1. Nichts unter 36px, was man treffen muss --- */
    #dienst-knopf { padding: .5rem 1.05rem; min-height: 38px; }
    #aussehen-knopf { min-width: 38px; min-height: 38px; }
    .ich-klick { min-height: 38px; }
    header .knopf.klein {
        min-height: 34px; display: inline-flex; align-items: center;
        padding: .4rem .7rem;
    }
    /* Die Status-Pillen sind der meistbenutzte Knopf im ganzen Bereich. */
    .code-pille { padding: .52rem .9rem; font-size: 12.5px; }
    nav.tabs.untertabs { height: auto; }
    nav.tabs.untertabs button { padding: .7rem .85rem; min-height: 42px; }
    .sieb button { padding: .45rem .85rem; font-size: 12.5px; min-height: 36px; }
    #k-zurueck, #k-vor { min-width: 38px; min-height: 38px; }
    button.klein, .knopf.klein { min-height: 36px; }
    /* Das kleine Kreuz in einer Marke traf man nie. */
    .fp-x { min-width: 28px; min-height: 28px; font-size: 12px; }

    /* --- 2. Eingabefelder: die Werkzeugleiste war spezifischer --- */
    .werkzeuge input, #p-suche, #rt-suche {
        font-size: 16px; padding: .55rem .65rem;
    }
    .werkzeuge { padding: .6rem .7rem; gap: .5rem; }
    .werkzeuge input { flex: 1 1 100%; }

    /* --- Die Leiste unten wird zur richtigen App-Leiste --------------------
       Elf Zeichen ohne Beschriftung sind ein Ratespiel. Die Beschriftung
       steht schon im aria-label - sie muss nur sichtbar werden, ohne dass
       im Markup etwas doppelt gepflegt wird. */
    .leiste {
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        align-items: stretch; padding-top: 3px;
    }
    .leiste nav { align-items: stretch; }
    .leiste nav button {
        width: auto; min-width: 54px; height: 54px; border-radius: 12px;
        display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: 3px; padding: 0 .3rem;
    }
    .leiste nav button svg { width: 20px; height: 20px; }
    .leiste nav button::after {
        content: attr(aria-label);
        font-size: 8.5px; letter-spacing: .02em; line-height: 1;
        max-width: 56px; overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Statt des schweren Goldblocks der Strich oben - so kennt man es von
       jeder App, und die Beschriftung bleibt lesbar. */
    .leiste nav button.an {
        color: var(--goldhell); background: rgba(201,164,92,.10);
        border-color: transparent; box-shadow: none;
    }
    .leiste nav button.an::before {
        content: ""; position: absolute; top: 0; left: 50%;
        transform: translateX(-50%); width: 20px; height: 3px;
        border-radius: 0 0 3px 3px; background: var(--gold);
    }
    .leiste-aus, .leiste-report, .leiste-buch { height: 54px; width: 44px; border-radius: 12px; }
    .leiste nav button .zahl { top: 2px; right: 4px; }
    #anwendung {
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    }
    .zuweis { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    #meldung { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

    /* --- Etwas ruhiger und groesser: es ist ein kleiner Schirm --- */
    .karte { border-radius: 12px; }
    .karte > h2 { font-size: 11px; padding: .8rem .9rem; }
    .karte .inhalt { padding: .85rem .8rem; }
    .spalten { gap: .7rem; }
    .leer { padding: 1.4rem 1rem; }
    /* Der Kopf klebt oben - Sprungziele sollen nicht darunter verschwinden. */
    html { scroll-padding-top: calc(var(--kopf) + 8px); }
    main { -webkit-overflow-scrolling: touch; }
}

/* Der Rest aus der zweiten Messung: 32 bis 34 Pixel hohe Knoepfe. Das
   liegt genau an der Grenze - ein Daumen trifft sie, aber nicht sicher.
   Eine Grundhoehe fuer ALLE Knoepfe ist ehrlicher als zwoelf Einzelregeln,
   die beim naechsten neuen Knopf wieder fehlen. */
@media (max-width: 760px) {
    button:not(.fp-x) { min-height: 36px; }
    button.haupt, .knopf.haupt { min-height: 40px; }
    .code-pille { min-height: 38px; }
}

/* ==========================================================================
   HANDY, DRITTER DURCHGANG (AP54) — gesehen, nicht nur gemessen
   ==========================================================================
   Diesmal wurden die Bildschirmfotos angeschaut. Drei Dinge sahen falsch
   aus, die keine Messung meldet:

   1. "DIENST ANTRETEN" nahm 43 % der Kopfzeile ein und drueckte Marke,
      Name und Abmelden an den Rand.
   2. Die Verbund-Leiste zerfiel: ihr Knopf steht auf nowrap, also blieben
      dem Text neben ihm rund 90px - "Duenn besetzt: 1 Officer auf 3
      Reviere" stand mit EINEM WORT je Zeile da.
   3. Die Unterreiter scrollen zwar, aber nichts sagt es: "Bestenliste"
      war am rechten Rand abgeschnitten und sah aus wie ein Fehler.
   ========================================================================== */

/* 1. Der Dienst-Knopf traegt beide Beschriftungen, sichtbar ist eine. */
#dienst-knopf .kurz { display: none; }
@media (max-width: 760px) {
    #dienst-knopf .lang { display: none; }
    #dienst-knopf .kurz { display: inline; }
    #dienst-knopf { padding: .5rem .95rem; font-size: 11px; }
}

@media (max-width: 760px) {
    /* 2. Die Verbund-Leiste bricht um, der Knopf geht auf ganze Breite. */
    .verbund-leiste { flex-wrap: wrap; }
    .verbund-leiste .vb-text { flex: 1 1 auto; min-width: 60%; }
    .verbund-leiste button { flex: 1 1 100%; white-space: normal; }

    /* 3. Ein Verlauf am Rand sagt: hier geht es weiter. Auf BEIDEN
          Seiten, je nach Scrollstand - der erste Versuch verblasste nur
          rechts, und sobald die Leiste den aktiven Reiter herangeholt
          hatte, stand links ein hart abgeschnittenes "bersicht".
          Als Maske, damit der Verlauf auf jedem Untergrund stimmt; ein
          aufgemalter Farbverlauf muesste die Kartenfarbe kennen. */
    .roller-l {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 100%);
    }
    .roller-r {
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    }
    .roller-l.roller-r {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    }

    /* Das Schaumodus-Band lag ueber der Leiste. */
    .schau-band { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   HANDY QUER (AP55) — die Breite war die falsche Frage
   ==========================================================================
   Die Messung ueber drei Geraete zeigte: ein Handy im Querformat ist
   844 Pixel BREIT und faellt damit aus jeder max-width-Regel heraus. Dort
   galt bisher der Schreibtisch-Stil - mit 27px hohen Status-Pillen und
   einem Suchfeld, das iOS heranzoomt. Genau der Fall, den Justin nennt:
   das Handy liegt quer neben der Tastatur.

   Also zwei Fragen statt einer:

     Wie GROSS ist der Schirm?   -> Umbruch, Spalten, Schublade  (max-width)
     Womit wird BEDIENT?         -> Tippziele, Feldgroessen      (pointer)

   Ein Finger wird nicht breiter, wenn man das Geraet dreht.
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
    input, select, textarea,
    .werkzeuge input, #p-suche, #rt-suche {
        font-size: 16px; padding: .55rem .65rem;
    }
    button:not(.fp-x) { min-height: 36px; }
    button.haupt, .knopf.haupt { min-height: 40px; }
    button.klein, .knopf.klein { min-height: 36px; padding: .4rem .65rem; }
    .code-pille { min-height: 38px; padding: .52rem .9rem; font-size: 12.5px; }
    .sieb button { min-height: 36px; padding: .45rem .85rem; font-size: 12.5px; }
    nav.tabs.untertabs { height: auto; }
    nav.tabs.untertabs button { padding: .7rem .85rem; min-height: 42px; }
    #dienst-knopf { min-height: 38px; }
    #aussehen-knopf { min-width: 38px; min-height: 38px; }
    .ich-klick { min-height: 38px; }
    header .knopf.klein {
        min-height: 34px; display: inline-flex; align-items: center;
    }
    #k-zurueck, #k-vor { min-width: 38px; min-height: 38px; }
    .fp-x { min-width: 28px; min-height: 28px; font-size: 12px; }
}

/* Ein flacher Schirm mit Finger - das Handy im Querformat. Die Leiste
   steht dort senkrecht und braucht 11 mal 44 = 484 Pixel Hoehe, hat aber
   nur 390: die Knoepfe wurden auf 23 Pixel zusammengedrueckt und die
   Seite rutschte fuenf Pixel zur Seite. Unten quer passt sie immer. */
@media (min-width: 761px) and (max-height: 560px) and (pointer: coarse) {
    #anwendung {
        padding-left: 0;
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    }
    .leiste {
        top: auto; right: 0; bottom: 0; width: auto;
        height: calc(52px + env(safe-area-inset-bottom, 0px));
        flex-direction: row; padding: 0 .6rem;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-right: 0; border-top: 1px solid var(--rand);
        box-shadow: 0 -6px 18px rgba(0,0,0,.3);
        overflow-x: auto; overflow-y: hidden; justify-content: flex-start;
        scrollbar-width: none;
    }
    .leiste::-webkit-scrollbar { display: none; }
    .leiste::before {
        inset: 0 0 auto 0; width: auto; height: 2px;
        background: linear-gradient(90deg,
            rgba(207,88,80,.85) 0%, rgba(207,88,80,.15) 28%,
            rgba(201,164,92,.5) 50%,
            rgba(77,143,209,.15) 72%, rgba(77,143,209,.85) 100%);
    }
    .leiste nav { flex-direction: row; justify-content: flex-start; flex: none; }
    .leiste nav button, .leiste-aus, .leiste-report, .leiste-buch {
        width: 46px; height: 46px; flex: none;
    }
    .leiste-aus, .leiste-report, .leiste-buch { margin: 0 0 0 .2rem; }
    .zuweis, #meldung { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    .schau-band { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
    /* Bei 390 Pixel Hoehe ist die Schublade als Blatt von unten falsch -
       sie kommt quer von rechts und nimmt zwei Drittel. */
    .schublade { width: min(520px, 72%); }
}

/* Namen in Listen sind anklickbar, aber nur 16 Pixel hoch - mit der Maus
   trifft man sie, mit dem Daumen nicht. Etwas Luft darueber und darunter
   vergroessert die Trefferflaeche, ohne die Zeile umzubauen. */
@media (hover: none) and (pointer: coarse) {
    b.klickbar, .klickbar > b { padding: .5rem 0; display: inline-block; }
}

/* ==========================================================================
   HANDY, LETZTER DURCHGANG (AP56) — angemeldet gemessen
   ==========================================================================
   Die vorigen Messungen liefen als Schau-Gast und sahen deshalb nur sieben
   Ansichten. Mit einer echten Leitungs-Sitzung kamen vier weitere Funde -
   und einer davon war der eigentliche Grund fuers Wegrutschen im
   Querformat:

   DIE KOPFZEILE verlangte 910 Pixel (Marke + Puls-Text + Aussehen + "Dienst
   antreten" + Name + Rolle + Aus). Bei 844 Pixeln Breite dehnt der Browser
   daraufhin das Ansichtsfenster, und ALLES rutscht 66 Pixel zur Seite -
   in jeder Ansicht, weil der Kopf ueberall derselbe ist. Die Suche nach
   dem Schuldigen ging vorher fehl, weil ein festes Element nicht als
   "ragt raus" gemeldet wurde: der Kopf ist klebrig, nicht fest, aber die
   Leiste darunter ist fest und lenkte den Blick.

   Am Finger, nicht an der Breite: ein Geraet mit grobem Zeiger braucht die
   ausfuehrliche Kopfzeile nie. */

@media (hover: none) and (pointer: coarse) {
    header { flex-wrap: wrap; row-gap: .3rem; }
    /* Der Punkt sagt alles - der Satz daneben kostet 100 Pixel. */
    #puls-text { display: none; }
    .ich .rolle { display: none; }
    .ich .name {
        font-size: 12px; max-width: 8rem; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap;
    }
    #dienst-knopf .lang { display: none; }
    #dienst-knopf .kurz { display: inline; }

    /* Der Schau-Link: eigenes Feld, eigene Schriftgroesse, und er lief
       ueber seinen Kasten hinaus. */
    #v-schau-link { font-size: 16px; min-width: 0; }
    .schau-link { flex-wrap: wrap; }

    /* Anklickbare Zeilen in Listen (Raenge, Reviere) auf Trefferhoehe. */
    .rz.klickbar { min-height: 36px; }
    b.klickbar, .klickbar > b { padding: .55rem 0; }

    /* Vierstellige Rangkuerzel (COMU, CMDR) passten nicht in die Marke -
       sie stand auf fester Mindestbreite und schnitt ab. */
    .rang-chip { min-width: 34px; padding: .12rem .4rem; }
}

/* Die Rangmarke stand in einer Flex-Zeile und wurde von ihr
   zusammengedrueckt - vierstellige Kuerzel (COMU, CMDR) malten dann ueber
   ihren eigenen Rand hinaus. Sie soll ihre Breite behalten, egal wie eng
   die Zeile wird. */
.rang-chip { flex: none; }

/* ==========================================================================
   WORAUF LÄUFT DAS HIER (AP57) — erkennen statt an der Breite raten
   ==========================================================================
   Justin: "nicht nur irgendein suchfeld auch die navbar etc, jz bau das
   vernünftig für handy, soll das halt erkennen worauf es ist".

   Bis hierher hat der Stil das Gerät an der Fensterbreite geraten. Das ging
   in BEIDE Richtungen schief:

     - Ein Handy im Querformat ist 844 Pixel breit. Es fiel aus jeder
       max-width-Regel und bekam den Schreibtisch-Stil - genau der Fall,
       den Justin nennt: das Handy liegt quer neben der Tastatur.
     - Ein schmal gezogenes Fenster auf einem 27-Zoll-Schirm bekam die
       Daumen-Leiste unten, obwohl dort eine Maus führt.

   Jetzt entscheidet das der Kopf der Seite EINMAL (siehe app.blade.php) und
   schreibt es ans <html>:

     data-geraet="handy|tablet|tisch"   womit wird bedient
     data-lage="hoch|quer"              wie wird es gehalten
     data-eng="1"                       schmales Fenster (Spalten, Umbrüche)

   Die alten max-width-Blöcke (AP52 bis AP56) bleiben stehen: sie regeln
   Umbrüche und Spalten, und dafür IST die Breite die richtige Frage. Was
   hier folgt, hängt am Gerät - und steht am Ende der Datei, gewinnt also
   jeden Gleichstand.
   ========================================================================== */

/* --- 1. Fingergrößen: alles, was kein Schreibtisch ist ------------------
   Nicht nur das eine Suchfeld. Die Regel greift für JEDES Feld und JEDEN
   Knopf, auch für die, die es noch nicht gibt - der letzte Durchgang hat
   drei Wochen lang ein 12,5px-Feld übersehen, weil die Regel damals nur
   "input" hieß und ".werkzeuge input" spezifischer war. */
html:not([data-geraet="tisch"]) input,
html:not([data-geraet="tisch"]) select,
html:not([data-geraet="tisch"]) textarea {
    font-size: 16px; padding: .55rem .65rem;
}
html:not([data-geraet="tisch"]) button:not(.fp-x) { min-height: 36px; }
html:not([data-geraet="tisch"]) button.haupt,
html:not([data-geraet="tisch"]) .knopf.haupt { min-height: 40px; }
html:not([data-geraet="tisch"]) button.klein,
html:not([data-geraet="tisch"]) .knopf.klein {
    min-height: 36px; padding: .4rem .65rem;
}
html:not([data-geraet="tisch"]) .code-pille {
    min-height: 38px; padding: .52rem .9rem; font-size: 12.5px;
}
html:not([data-geraet="tisch"]) .sieb button {
    min-height: 36px; padding: .45rem .85rem; font-size: 12.5px;
}
/* Ein ✕ ist schmal - der Kasten darum darf es nicht sein. */
html:not([data-geraet="tisch"]) .zu { min-width: 36px; }
/* Das Austragen-Kreuz an einem Besatzungs-Chip maß 12 mal 13 Pixel - mit
   dem Daumen nicht zu treffen. Die Trefferfläche liegt als unsichtbares
   Feld DARÜBER, nicht im Kasten: ein größerer Kasten hätte den Chip
   verbreitert und die Einsatzkarte über den Bildrand geschoben. Gemessen,
   nicht vermutet - der erste Versuch tat genau das. */
html:not([data-geraet="tisch"]) a[data-raus],
html:not([data-geraet="tisch"]) a[data-loesen] { position: relative; }
html:not([data-geraet="tisch"]) a[data-raus]::after,
html:not([data-geraet="tisch"]) a[data-loesen]::after {
    content: ""; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 36px; height: 36px;
}

/* Ein Besatzungs-Chip mit langem Decknamen UND drei Unit-Marken brauchte
   mehr als die Karte breit ist - und schob damit die ganze Seite zur Seite.
   Auf dem Handy darf er deshalb umbrechen: die Marken rutschen in eine
   zweite Zeile IM Chip. Abschneiden wäre falsch - an den Marken sieht die
   Leitstelle, wer SWAT ist und wer HR.

   Das hängt an der BREITE, nicht am Finger: dieselbe Tafel wird auch in
   einem schmal gezogenen Fenster am Schreibtisch einspaltig, und dort
   schob derselbe Chip die Seite neun Pixel zur Seite. Deshalb data-eng
   dazu. */
html[data-geraet="handy"] .crew, html[data-eng] .crew {
    max-width: 100%; min-width: 0; flex-wrap: wrap; white-space: normal;
}
html[data-geraet="handy"] .crew .cn, html[data-eng] .crew .cn {
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
html:not([data-geraet="tisch"]) nav.tabs.untertabs { height: auto; }
html:not([data-geraet="tisch"]) nav.tabs.untertabs button {
    padding: .7rem .85rem; min-height: 42px;
}
/* Eine Karte, die beim Darüberfahren erscheint, gibt es ohne Zeiger nicht. */
html:not([data-geraet="tisch"]) .profilkarte { display: none; }

/* --- 2. Die Werkzeugleiste: Suche oben, Siebe darunter ------------------
   Nebeneinander blieben dem Suchfeld auf 360px rund 130 Pixel. Untereinander
   hat es die ganze Breite, und die Siebe rollen quer wie die Unterreiter -
   mit demselben Verblassen am Rand, das sagt: hier geht es weiter. */
html:not([data-geraet="tisch"]) .werkzeuge {
    flex-direction: column; align-items: stretch; gap: .5rem;
    padding: .6rem .7rem;
    /* flex-wrap kommt aus der Grundregel und heisst in einer SPALTE etwas
       anderes: der Kasten legt dann Spalten nebeneinander und wird so breit
       wie sein breitestes Kind. Die Siebreihe wurde damit 408px breit in
       einem 369px-Kasten und ragte hinaus, statt zu rollen. */
    flex-wrap: nowrap;
}
html:not([data-geraet="tisch"]) .werkzeuge input { flex: none; width: 100%; }
/* Dasselbe fuer ein Auswahlfeld, und aus demselben Grund: die Grundregel
   gibt ihm `flex: 0 1 190px`, und das heisst in einer SPALTE "190 Pixel
   hoch". Das Wochenfeld der Sonderzahlungen stand so als leerer Kasten
   ueber der halben Leiste - seitlich ragte nichts hinaus, deshalb hat es
   keine Pruefung gefunden, nur das Bildschirmfoto. */
html:not([data-geraet="tisch"]) .werkzeuge select {
    flex: none; width: 100%; max-width: 100%;
}
html:not([data-geraet="tisch"]) .sieb {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    gap: .3rem; padding-bottom: 2px;
    /* Ohne das ist die Siebreihe so breit wie ihr Inhalt (gemessen: 408px
       in einem 369px breiten Kasten) - sie rollt dann nicht, sondern wird
       von der Karte hart abgeschnitten. "Stillg" stand am Rand und sah
       aus wie ein Fehler. */
    min-width: 0;
}
html:not([data-geraet="tisch"]) .sieb::-webkit-scrollbar { display: none; }
html:not([data-geraet="tisch"]) .sieb button { flex: none; }

/* --- 3. Die Leiste unten: fünf Plätze, mehr passt nicht -----------------
   Elf Zeichen auf 360 Pixel heißt: sechs sind nur durch seitliches Schieben
   erreichbar - und niemand schiebt an einer Leiste, von der er nicht weiß,
   dass sie sich schieben lässt. Also vier Bereiche mit lesbarem Namen und
   ein fünfter Platz "Mehr". Nichts rollt mehr, nichts ist versteckt. */
.leiste-mehr {
    width: 44px; height: 44px; border-radius: 13px;
    display: grid; place-items: center; position: relative;
    background: transparent; border: 1px solid transparent;
    color: var(--grau); cursor: pointer;
}
.leiste-mehr svg { width: 21px; height: 21px; }
.leiste-mehr .zahl {
    position: absolute; top: -3px; right: -3px;
    min-width: 16px; padding: 0 4px; border-radius: 8px;
    font-size: 9.5px; line-height: 15px; font-weight: 700; text-align: center;
    background: var(--rand); color: var(--text);
    border: 1px solid var(--randhell);
}
.leiste-mehr .zahl.warn {
    background: var(--rot); color: #fff; border-color: #7e3a38;
    box-shadow: 0 0 8px rgba(207,88,80,.55);
}

html[data-geraet="handy"] #anwendung {
    padding-left: 0;
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
}
html[data-geraet="handy"] .leiste {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    flex-direction: row; align-items: stretch; gap: 2px;
    padding: 3px .35rem env(safe-area-inset-bottom, 0px);
    border-right: 0; border-top: 1px solid var(--rand);
    box-shadow: 0 -6px 18px rgba(0,0,0,.3);
    overflow: visible;
}
html[data-geraet="handy"] .leiste::before {
    inset: 0 0 auto 0; width: auto; height: 2px;
    background: linear-gradient(90deg,
        rgba(207,88,80,.85) 0%, rgba(207,88,80,.15) 28%,
        rgba(201,164,92,.5) 50%,
        rgba(77,143,209,.15) 72%, rgba(77,143,209,.85) 100%);
}
/* Vier Plätze für die Bereiche, einer für "Mehr" - also bekommt die
   Reihe der Bereiche vier Anteile und "Mehr" einen. Mit einem gierigen
   flex:1 an der Reihe blieben dem Mehr-Knopf sechs Pixel; gemessen. */
html[data-geraet="handy"] .leiste nav {
    flex-direction: row; flex: 4 1 0; min-width: 0; gap: 2px;
    align-items: stretch; width: auto; overflow: visible;
}
/* Was keinen der vier Plätze bekommen hat, liegt im Blatt. */
html[data-geraet="handy"] .leiste nav button { display: none; }
html[data-geraet="handy"] .leiste nav button[data-primaer],
html[data-geraet="handy"] .leiste-mehr {
    display: flex; flex: 1 1 0; min-width: 0; width: auto; height: 54px;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 0 2px; border-radius: 12px; position: relative;
}
html[data-geraet="handy"] .leiste-mehr { max-width: 78px; min-width: 46px; }
html[data-geraet="handy"] .leiste nav button[data-primaer] svg,
html[data-geraet="handy"] .leiste-mehr svg { width: 21px; height: 21px; }
/* Der Name steht schon im aria-label - er muss nur sichtbar werden, ohne
   dass im Markup etwas doppelt gepflegt wird. Ein title-Attribut hilft hier
   nicht: auf dem Handy gibt es kein Darüberfahren. */
html[data-geraet="handy"] .leiste nav button[data-primaer]::after {
    content: attr(aria-label);
    font-size: 9.5px; line-height: 1; letter-spacing: .01em;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
}
html[data-geraet="handy"] .leiste-mehr::after {
    content: "Mehr"; font-size: 9.5px; line-height: 1;
}
html[data-geraet="handy"] .leiste-aus,
html[data-geraet="handy"] .leiste-buch,
html[data-geraet="handy"] .leiste-report { display: none; }
html[data-geraet="handy"] .leiste nav button .zahl { top: 2px; right: 4px; }
html[data-geraet="handy"] .leiste-mehr .zahl { top: 2px; right: 6px; }
/* Der aktive trägt oben einen Strich. Der schwere Goldblock von der
   Konsole erschlüge die Beschriftung darunter. */
html[data-geraet="handy"] .leiste nav button.an,
html[data-geraet="handy"] .leiste-mehr.an {
    color: var(--goldhell); background: rgba(201,164,92,.10);
    border-color: transparent; box-shadow: none;
}
html[data-geraet="handy"] .leiste nav button.an::before,
html[data-geraet="handy"] .leiste-mehr.an::before {
    content: ""; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%); width: 22px; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--gold);
}

/* --- 7. Fünf Zahlen, drei Bildschirme voll ------------------------------
   Die Kacheln der Übersicht standen einspaltig - man musste dreimal
   wischen, um fünf Zahlen zu sehen. Nebeneinander passen sie auf einen
   Blick; die Zahl wird dafür etwas kleiner, sonst bricht "30 h 59 min". */
html[data-geraet="handy"] .spalten.k4 { grid-template-columns: 1fr 1fr; }
html[data-geraet="handy"] .kachel { padding: .8rem .85rem; }
html[data-geraet="handy"] .kachel .wert { font-size: 21px; }
html[data-geraet="handy"] .kachel::after { left: .85rem; bottom: .6rem; }
html[data-geraet="handy"] .zuweis,
html[data-geraet="handy"] #meldung {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}
html[data-geraet="handy"] .schau-band {
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
}

/* --- 4. Das Blatt "Alle Bereiche" ---------------------------------------
   Hier steht ALLES, auch die vier von unten. Zwei Orte im Kopf zu behalten
   ist schlimmer als eine Liste, die einen Eintrag doppelt hat. */
.mb-dunkel {
    position: fixed; inset: 0; background: rgba(4,7,13,.62); z-index: 58;
    opacity: 0; pointer-events: none; transition: opacity .16s ease-out;
}
.mb-dunkel.auf { opacity: 1; pointer-events: auto; }
.mehr-blatt {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 59;
    background: linear-gradient(180deg, var(--karte) 0%, var(--flaeche) 100%);
    border-top: 1px solid var(--randhell);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 40px rgba(0,0,0,.6);
    padding: .4rem .8rem calc(.9rem + env(safe-area-inset-bottom, 0px));
    max-height: 88vh; overflow-y: auto;
    transform: translateY(101%); pointer-events: none;
    transition: transform .2s cubic-bezier(.22, .9, .3, 1);
}
.mehr-blatt.auf { transform: none; pointer-events: auto; }
.mb-griff {
    width: 42px; height: 4px; border-radius: 3px;
    background: var(--randhell); margin: .35rem auto .55rem;
}
.mb-kopf { display: flex; align-items: center; margin-bottom: .7rem; }
.mb-kopf b {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold);
}
.mb-kopf .zu { margin-left: auto; }
.mb-gitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.mb-feld {
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    padding: .75rem .2rem; border-radius: 14px; min-height: 78px;
    background: var(--karte2); border: 1px solid var(--rand);
    color: var(--text); cursor: pointer;
}
.mb-feld b {
    font-size: 10px; font-weight: 600; line-height: 1.15; text-align: center;
    max-width: 100%; overflow-wrap: anywhere;
}
.mb-feld.an {
    border-color: color-mix(in srgb, var(--gold) 55%, var(--rand));
    background: rgba(201,164,92,.10);
}
.mb-feld.an b, .mb-feld.an .mb-zeichen { color: var(--goldhell); }
.mb-zeichen {
    position: relative; display: grid; place-items: center;
    width: 26px; height: 26px; color: var(--gold); font-size: 17px;
}
.mb-zeichen svg { width: 22px; height: 22px; }
.mb-zeichen .zahl {
    position: absolute; top: -6px; right: -10px;
    min-width: 16px; padding: 0 4px; border-radius: 8px;
    font-size: 9.5px; line-height: 15px; font-weight: 700; font-style: normal;
    text-align: center; background: var(--rot); color: #fff;
    border: 1px solid #7e3a38;
}
.mb-fuss {
    display: grid; gap: .25rem; margin-top: .8rem;
    border-top: 1px solid var(--rand); padding-top: .7rem;
}
.mb-tat {
    display: flex; align-items: center; gap: .7rem; min-height: 44px;
    padding: .5rem .7rem; border-radius: 12px; text-align: left;
    background: transparent; border: 1px solid transparent;
    color: var(--text); font-size: 13px; cursor: pointer;
}
.mb-tat span {
    width: 22px; flex: none; text-align: center; font-size: 15px;
    display: inline-grid; place-items: center; color: var(--gold);
}
.mb-tat span svg { width: 19px; height: 19px; }
.mb-tat.gefahr span { color: var(--rot); }
.mb-tat.gefahr { color: var(--rot); }
/* Am Schreibtisch gibt es das Blatt gar nicht - dort passen alle elf
   Bereiche an die Konsole. */
html[data-geraet="tisch"] .mehr-blatt,
html[data-geraet="tisch"] .mb-dunkel { display: none; }

/* --- 5. Der Kopf auf dem Handy -----------------------------------------
   Er verlangte 910 Pixel und dehnte damit das Ansichtsfenster. Was er nicht
   braucht, liegt jetzt im Blatt: Aussehen und Abmelden. Übrig bleibt, was
   man im Spiel wirklich anfasst - Marke, Zustand, Dienst, das eigene Bild
   (das ist der Weg ins Profil). */
html[data-geraet="handy"] header { gap: .55rem; padding: 0 .7rem; }
html[data-geraet="handy"] .marke { padding-left: 30px; }
html[data-geraet="handy"] .marke::before { width: 24px; height: 24px; }
html[data-geraet="handy"] .marke i { display: none; }
html[data-geraet="handy"] #puls-text { display: none; }
html[data-geraet="handy"] #aussehen-knopf { display: none; }
html[data-geraet="handy"] .ich > .knopf { display: none; }
html[data-geraet="handy"] #ich-nummer { display: none; }
html[data-geraet="handy"] .ich .rolle { display: none; }
html[data-geraet="handy"] .ich .name {
    font-size: 12px; max-width: 7rem; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
html[data-geraet="handy"] #dienst-knopf .lang { display: none; }
html[data-geraet="handy"] #dienst-knopf .kurz { display: inline; }

/* --- 6. Am Schreibtisch bleibt die Konsole links ------------------------
   Auch wenn das Fenster schmal gezogen ist. Bisher kippte sie ab 760 Pixel
   nach unten - auf einem großen Schirm mit halbem Fenster sah das aus wie
   ein Handy, war aber keins. */
html[data-geraet="tisch"] #anwendung { padding-left: 64px; padding-bottom: 0; }
html[data-geraet="tisch"] .leiste {
    top: 0; bottom: 0; left: 0; right: auto; width: 64px; height: auto;
    flex-direction: column; align-items: center; padding: .8rem 0 .9rem;
    gap: .3rem; border-right: 1px solid var(--rand); border-top: 0;
    box-shadow: 6px 0 18px rgba(0,0,0,.3); overflow: visible;
}
html[data-geraet="tisch"] .leiste::before {
    inset: 0 auto 0 0; width: 2px; height: auto;
    background: linear-gradient(180deg,
        rgba(207,88,80,.85) 0%, rgba(207,88,80,.15) 28%,
        rgba(201,164,92,.5) 50%,
        rgba(77,143,209,.15) 72%, rgba(77,143,209,.85) 100%);
}
html[data-geraet="tisch"] .leiste nav {
    flex-direction: column; flex: 1; width: 100%; gap: .3rem;
}
html[data-geraet="tisch"] .leiste nav button {
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 13px; padding: 0;
}
html[data-geraet="tisch"] .leiste nav button::after { content: none; }
html[data-geraet="tisch"] .leiste nav button.an {
    color: #100c04;
    background: linear-gradient(180deg, var(--goldhell) 0%, var(--gold) 100%);
    border-color: var(--goldhell);
    box-shadow: 0 0 16px rgba(201,164,92,.45), 0 4px 12px rgba(0,0,0,.4),
        inset 0 1px 0 rgba(255,255,255,.5);
}
html[data-geraet="tisch"] .leiste nav button.an::before { content: none; }
html[data-geraet="tisch"] .leiste nav button .zahl { top: -3px; right: -3px; }
html[data-geraet="tisch"] .leiste-buch { margin: auto 0 0; }
html[data-geraet="tisch"] .leiste-report { margin: .3rem 0 0; }
html[data-geraet="tisch"] .leiste-aus { margin: .3rem 0 0; }
html[data-geraet="tisch"] .leiste-aus,
html[data-geraet="tisch"] .leiste-buch,
html[data-geraet="tisch"] .leiste-report { width: 44px; height: 44px; }

/* Die Rolltreppe. Vierzehn Reiter passen heute; der fuenfzehnte oder
   ein kleinerer Bildschirm schoebe den letzten unter den Fuss, und
   dort ist er unerreichbar - der Fuss steht fest. Also rollt der
   Teil DAZWISCHEN, und die drei Knoepfe unten bleiben stehen.
   Das Polster mit dem negativen Rand daneben ist kein Schmuck: ein
   Rollkasten schneidet in BEIDEN Richtungen ab, und ohne ihn waeren
   die Zaehler-Marken (right:-3px) und der Schein des goldenen
   Knopfes an den Seiten abgesaebelt. */
html[data-geraet="tisch"] .leiste nav {
    min-height: 0; overflow-y: auto; overflow-x: hidden;
    padding: 3px 14px; margin: -3px -14px;
    width: calc(100% + 28px);
    scrollbar-width: none; -ms-overflow-style: none;
    overscroll-behavior: contain;
}
html[data-geraet="tisch"] .leiste nav::-webkit-scrollbar { width: 0; height: 0; }
html[data-geraet="tisch"] .zuweis,
html[data-geraet="tisch"] #meldung { bottom: 1.1rem; }
html[data-geraet="tisch"] .schau-band { bottom: 0; }
html[data-geraet="tisch"] .schublade {
    top: 0; height: auto; width: min(560px, 100%);
    border-radius: 14px 0 0 14px; border-left: 1px solid var(--randhell);
    border-top: 0; transform: translateX(100%);
    box-shadow: -14px 0 40px rgba(0,0,0,.55);
}
html[data-geraet="tisch"] .schublade.auf { transform: none; }
html[data-geraet="tisch"] .schublade::before {
    left: 0; top: 0; bottom: 0; transform: none;
    width: 2px; height: auto; border-radius: 0;
    background: linear-gradient(180deg, var(--gold), transparent 60%);
}
html[data-geraet="tisch"] .schublade > header { padding-top: .9rem; }

/* ==========================================================================
   HANDY: BESSER AUSSEHEN UND SINNIGER (AP58)
   ==========================================================================
   Justin: "das muss besser aussehen und auch sinniger bitte".

   Die Leiste stimmte, der Inhalt darüber nicht. Auf den Bildschirmfotos
   aller elf Ansichten in 390 Pixel fielen vier Dinge auf, die dieselbe
   Wurzel haben: die Seite trägt einen Schreibtisch-Kopf mit sich herum.

   1. DER BEREICHSKOPF kostete 250 von 844 Pixeln - Titel, ein erklärender
      Satz und drei Zahlen übereinander, in JEDER Ansicht. Man scrollt jedes
      Mal daran vorbei. Er steht jetzt in EINER Zeile: Titel links, Zahlen
      rechts, Zahl und Bezeichnung nebeneinander statt gestapelt. Das ist
      ein Fünftel der Höhe.
   2. IM HR STAND DIE ÜBERSCHRIFT DREIMAL: einmal im Bereichskopf, einmal
      im Pult darunter, und die beiden Zahlen daneben noch einmal als
      Kacheln. Der Pult-Text weicht, die Knöpfe bleiben.
   3. DIE UNTERREITER wurden hart abgeschnitten ("BESTE…"), weil GROSS-
      SCHRIFT MIT SPERRUNG auf 390 Pixel nicht fünfmal nebeneinander passt.
      Sie sind jetzt eine Segmentleiste in Normalschrift und brechen um,
      statt zu verschwinden.
   4. DIE UHRZEIT "Stand 14:55:36" hatte eine eigene Zeile für sich. Wo sie
      nichts entscheidet, fällt sie weg; in der Leitstelle bleibt sie.
   ========================================================================== */

/* --- 1. Der Bereichskopf: eine Zeile statt eines Plakats ---------------- */
/* Titel oben, Zahlen darunter - beide über die volle Breite. Nebeneinander
   blieben den Zahlen keine 180 Pixel, und "Platz · 30 Ta…" war abgeschnitten;
   ein Titel "Mein P…" ist noch schlimmer. Zwei Zeilen sind rund 70 Pixel
   hoch statt 250 und schneiden nichts ab. */
html[data-geraet="handy"] .bereichskopf {
    flex-wrap: wrap; align-items: baseline; gap: .25rem .7rem;
    padding: .5rem .75rem .55rem .9rem; margin-bottom: .7rem;
    border-radius: 12px;
}
html[data-geraet="handy"] .bk-marke { flex: 1 1 100%; min-width: 0; }
html[data-geraet="handy"] .bk-marke b {
    font-size: 15px; letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Der erklärende Satz wird einmal gelesen und danach ewig weggescrollt. */
html[data-geraet="handy"] .bk-marke i { display: none; }
html[data-geraet="handy"] .bk-zahlen {
    gap: .85rem; margin-left: 0; flex: 1 1 100%; min-width: 0;
    overflow-x: auto; scrollbar-width: none;
}
html[data-geraet="handy"] .bk-zahlen::-webkit-scrollbar { display: none; }
/* Zahl und Bezeichnung NEBENEINANDER: gestapelt brach "davon meine" um und
   schob den ganzen Kopf eine Zeile tiefer. */
html[data-geraet="handy"] .bk-z {
    display: flex; align-items: baseline; gap: .3rem;
    flex: none; white-space: nowrap; text-align: left;
}
html[data-geraet="handy"] .bk-z b { display: inline; font-size: 15px; }
html[data-geraet="handy"] .bk-z span {
    font-size: 10px; letter-spacing: 0; text-transform: none;
}
/* Knöpfe, die im Bereichskopf mitfahren (Zurück, Units verwalten). */
html[data-geraet="handy"] .bereichskopf button { flex: none; }

/* --- 2. Keine Überschrift zweimal -------------------------------------- */
html[data-geraet="handy"] .hr-pult-text { display: none; }
html[data-geraet="handy"] .hr-pult { padding: .6rem; margin-bottom: .7rem; }
html[data-geraet="handy"] .hr-pult .reihe { margin-left: 0; width: 100%; }
html[data-geraet="handy"] .hr-pult .reihe button { flex: 1 1 auto; }

/* --- 3. Unterreiter als Segmentleiste ----------------------------------- */
/* Einzelne Chips in einer rollenden Zeile - genau wie die Siebe darunter
   im Personal. Ein Kasten mit Rahmen um die ganze Zeile sähe beim Rollen
   falsch aus, weil der Verlauf am Rand dann den Rahmen wegblendet. Und
   Umbruch war auch nichts: fünf Reiter ergaben eine zweite Zeile mit einem
   einzelnen, über die volle Breite gezogenen Knopf. */
html[data-geraet="handy"] nav.tabs.untertabs {
    border-bottom: 0; background: none; border: 0; padding: 0 0 2px;
    gap: .3rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
html[data-geraet="handy"] nav.tabs.untertabs::-webkit-scrollbar { display: none; }
html[data-geraet="handy"] nav.tabs.untertabs button {
    flex: none; border-radius: 999px;
    border: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
    background: var(--karte2);
    text-transform: none; letter-spacing: 0; font-size: 12.5px;
    font-weight: 600; padding: .5rem .8rem; min-height: 38px;
    white-space: nowrap;
}
html[data-geraet="handy"] nav.tabs.untertabs button.an {
    background: rgba(201,164,92,.13); color: var(--goldhell);
    border-color: color-mix(in srgb, var(--gold) 45%, var(--rand));
}

/* Der Verlauf am Rand einer rollenden Zeile stand bisher nur unter
   max-width:760px - ein Handy im Querformat hatte ihn also nicht, und dort
   sah ein angeschnittenes Wort wie ein Fehler aus. */
html[data-geraet="handy"] .roller-l {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 100%);
}
html[data-geraet="handy"] .roller-r {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
}
html[data-geraet="handy"] .roller-l.roller-r {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}

/* --- 4. Uhrzeiten, die nichts entscheiden ------------------------------- */
html[data-geraet="handy"] #mp-stand,
html[data-geraet="handy"] #rt-stand,
html[data-geraet="handy"] #fp-stand { display: none; }

/* --- 5. Kachelbeschriftungen ------------------------------------------- */
/* Gesperrte Großschrift kostet auf 390 Pixel eine ganze Zeile Umbruch. */
html[data-geraet="handy"] .kachel .titel,
html[data-geraet="handy"] .hr-k span,
html[data-geraet="handy"] .stat-k span { letter-spacing: .06em; }

/* Der Hinweis zur Antragsgrenze steht am Schreibtisch rechts neben den
   Knöpfen. Auf dem Handy fiel er in eine eigene Zeile und stand dort
   rechtsbündig für sich allein - jetzt schließt er links an. */
.ka-grenze { margin-left: auto; align-self: center; }
html[data-geraet="handy"] .ka-grenze { margin-left: 0; }

/* Der ausgeschriebene Rang neben der Rangmarke. Am Schreibtisch gehört er
   dazu; auf dem Handy machte er die Mannschaftstabelle 623 Pixel breit und
   brach "Commissioner of Units" über drei Zeilen. */
html[data-geraet="handy"] .rang-lang { display: none; }

/* Eine Spalte der Tafel ist ein Gitter-Kind und hat damit min-width:auto -
   sie kann ihre Bahn breiter machen als den Kasten, in dem sie steht. Bei
   einer Spalte (Handy, oder schmal gezogenes Fenster) schob ein einzelner
   breiter Eintrag so die ganze Seite. Mit min-width:0 gibt die Spalte nach,
   und was nicht passt, bricht innen um. */
html[data-geraet="handy"] .brett-zeile > *,
html[data-eng] .brett-zeile > * { min-width: 0; }

/* Letzter Riegel: auf einem Fingergeraet ist eine seitlich verrutschende
   Seite immer ein Fehler, nie eine Absicht. (Erst nur fuers Handy; das
   iPad rutschte danach in der Leitstelle noch drei Pixel - dieselbe
   Ursache, dieselbe Antwort.) Die Leitstelle rutschte im Querformat noch
   neun Pixel, und zwar ohne dass ein einziges Element über den Rand ragte -
   die Breite kam aus der Tafel selbst. Statt weiter zu suchen, kann der
   Inhaltsbereich sie gar nicht mehr weitergeben.

   clip und nicht hidden: hidden würde aus main einen Rollkasten machen und
   dem klebrigen Kopf den Halt nehmen. clip lässt die senkrechte Achse in
   Ruhe. Waagerechte Roller (Tabellen, Chip-Reihen) haben ihren eigenen
   Kasten und rollen weiter. */
html:not([data-geraet="tisch"]) main { overflow-x: clip; }

/* ---- Leiste ausklappbar (AP58) -----------------------------------------
   Schmal steht sie als Symbolspalte da; ausgeklappt traegt jeder Knopf
   seinen Namen. Rein am Schreibtisch: am Finger liegt die Leiste unten,
   dort waere Ausklappen sinnlos. Der Zustand wird je Betrachter gemerkt
   (pd_hud.auf) und vor dem ersten Zeichnen gesetzt. */

:root { --leiste-breit: 210px; }

.leiste-griff {
    width: 44px; height: 32px; border-radius: 10px; flex: none;
    display: grid; place-items: center; margin-bottom: .2rem;
    background: transparent; border: 1px solid transparent;
    color: var(--grau); cursor: pointer;
    transition: color .14s ease, background .14s ease;
}
.leiste-griff:hover { color: var(--goldhell); background: rgba(201,164,92,.07); }
.leiste-griff svg { width: 19px; height: 19px; transition: transform .18s ease; }

/* Der Name liegt immer im Baum, sichtbar wird er erst ausgeklappt -
   so muss beim Klappen nichts neu gebaut werden. */
.leiste .lname { display: none; }

html[data-geraet="tisch"]:root[data-leiste-auf="ja"] .leiste,
html[data-geraet="tisch"][data-leiste-auf="ja"] .leiste {
    width: var(--leiste-breit); align-items: stretch; padding-left: .5rem;
    padding-right: .5rem;
}
html[data-geraet="tisch"][data-leiste-auf="ja"] #anwendung {
    padding-left: var(--leiste-breit);
}
html[data-geraet="tisch"][data-leiste-auf="ja"] .leiste nav button,
html[data-geraet="tisch"][data-leiste-auf="ja"] .leiste-aus,
html[data-geraet="tisch"][data-leiste-auf="ja"] .leiste-buch,
html[data-geraet="tisch"][data-leiste-auf="ja"] .leiste-report {
    width: 100%; height: 40px; justify-content: flex-start;
    display: flex; align-items: center; gap: .65rem; padding: 0 .6rem;
}
html[data-geraet="tisch"][data-leiste-auf="ja"] .leiste nav button svg,
html[data-geraet="tisch"][data-leiste-auf="ja"] .leiste-aus svg,
html[data-geraet="tisch"][data-leiste-auf="ja"] .leiste-buch svg,
html[data-geraet="tisch"][data-leiste-auf="ja"] .leiste-report svg {
    flex: none;
}
html[data-geraet="tisch"][data-leiste-auf="ja"] .leiste .lname {
    display: block; font-size: 12.5px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    /* order: der Name steht im Baum HINTER der Zahl (app.js haengt ihn
       an). Ohne diese Umsortierung schiebt das margin-left:auto unten
       die Zahl zwischen Symbol und Schrift - und die Schrift steht
       eingerueckt. min-width:0 laesst lange Namen kuerzen, statt die
       Zahl aus der Zeile zu draengen. */
    order: 1; min-width: 0;
}
/* Ausgeklappt sitzt die Zahl am Zeilenende statt am Symbol zu kleben. */
html[data-geraet="tisch"][data-leiste-auf="ja"] .leiste nav button .zahl {
    position: static; margin-left: auto; flex: none; order: 2;
}
html[data-geraet="tisch"][data-leiste-auf="ja"] .leiste-griff {
    width: 100%; justify-content: flex-end; display: flex; align-items: center;
    padding-right: .5rem;
}
html[data-geraet="tisch"][data-leiste-auf="ja"] .leiste-griff svg {
    transform: rotate(180deg);
}
/* Am Finger gibt es die untere Leiste - kein Griff, kein Ausklappen. */
html:not([data-geraet="tisch"]) .leiste-griff { display: none; }

/* ---- Entwürfe (AP60) ---------------------------------------------------
   Ein wiederhergestellter Entwurf muss AUFFALLEN. Ein Formular, das sich
   still mit altem Zeug füllt, merkt man erst nach dem Speichern. */
.entwurf-leiste {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    margin: 0 0 .9rem; padding: .5rem .7rem; border-radius: 8px;
    font-size: 12px; line-height: 1.5;
    color: var(--goldhell); background: rgba(201,164,92,.09);
    border: 1px dashed rgba(201,164,92,.45);
}
.entwurf-leiste b { color: var(--goldhell); }
.entwurf-leiste button { margin-left: auto; flex: none; }

/* ---- Gastzugänge in der Verwaltung (AP60) ----------------------------- */
.gt-zeile {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .4rem 0; border-top: 1px solid var(--rand); font-size: 13px;
}
.gt-zeile:first-child { border-top: 0; }
.gt-zeile .cn { color: var(--hell); font-weight: 600; }
.gt-zeile .rechts { margin-left: auto; display: flex; gap: .3rem;
    flex-wrap: wrap; }

/* ---- Rechte in den Units (AP58) ---------------------------------------- */
.ur-reiter { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .8rem; }
.ur-reiter button {
    font-size: 11.5px; padding: .3rem .6rem; border-radius: 999px;
    border: 1px solid var(--rand); background: var(--karte); cursor: pointer;
    border-left: 3px solid var(--uf, var(--gold));
}
.ur-reiter button.an { border-color: var(--gold); color: var(--gold); }
.ur-rahmen {
    border: 1px solid var(--rand); border-radius: 10px;
    padding: .6rem .7rem; background: var(--karte); margin-bottom: .4rem;
}
.ur-rahmen > b { display: block; font-size: 12.5px; }
.ur-rahmen > i {
    display: block; font-style: normal; font-size: 11px; color: var(--grau);
    margin: .15rem 0 .5rem;
}
.ur-stufe {
    border: 1px solid var(--rand); border-radius: 10px;
    padding: .5rem .65rem; margin-bottom: .45rem; background: var(--karte);
}
.ur-stufe > b { display: block; font-size: 12.5px; margin-bottom: .35rem; }
.ur-liste {
    display: grid; gap: 1px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.ur-liste .div-opt { padding: .25rem .4rem; font-size: 12px; }

/* ==========================================================================
   ALS APP AUF DEM STARTBILDSCHIRM (AP59)
   ==========================================================================
   Justin: "mach dass das als web app vernünftig funktioniert, oben ist
   alles abgeschnitten beim iphone".

   Er hat die Seite auf den Startbildschirm gelegt. Dort läuft sie ohne
   Safari-Rahmen - und weil im Kopf

       <meta name="apple-mobile-web-app-status-bar-style"
             content="black-translucent">

   steht und die Ansicht auf viewport-fit=cover, beginnt der Inhalt GANZ
   OBEN: unter der Uhr, unter dem Akku, unter der Dynamic Island. Genau die
   59 Pixel, die Justin fehlen. Im Safari-Tab fällt das nicht auf, weil dort
   die Adresszeile darüber steht und env(safe-area-inset-top) 0 liefert.

   Das ist kein Fehler dieser Einstellung - so soll es sein. Der Fehler war,
   dass wir den Platz nie freigehalten haben. Nirgends im Stylesheet stand
   ein safe-area-inset-TOP; nur unten am Home-Balken war daran gedacht.

   Dieselbe Frage stellt sich seitlich: quer gehalten liegt die Aussparung
   links oder rechts, und dort standen bisher die äußeren Knöpfe der
   unteren Leiste.
   ========================================================================== */

/* --- Der Kopf hält die Statusleiste frei -------------------------------- */
html header { padding-top: var(--sat); }
/* Auf breiten Schirmen hat der Kopf eine feste Höhe - sie muss um den
   freigehaltenen Streifen wachsen, sonst schrumpft der Inhalt darin. */
html:not([data-eng]) header { height: calc(var(--kopf) + var(--sat)); }
/* Auf schmalen bricht er ohnehin um und wächst von selbst. */
html[data-eng] header { padding-top: calc(.55rem + var(--sat)); }
/* Die Lightbar ist die Oberkante des KOPFES, nicht des Bildschirms -
   unter der Uhr sähe sie aus wie ein Streifen im Hintergrundbild. */
html header::before { top: var(--sat); }

/* Sprungziele dürfen nicht unter dem klebrigen Kopf landen. */
html { scroll-padding-top: calc(var(--kopf) + var(--sat) + 8px); }

/* --- Das Anmeldetor ----------------------------------------------------- */
.tor { padding-top: var(--sat); padding-bottom: var(--sab); }

/* --- Seitliche Aussparung im Querformat --------------------------------- */
html[data-geraet="handy"] header {
    padding-left: calc(.7rem + var(--sal));
    padding-right: calc(.7rem + var(--sar));
}
html[data-geraet="handy"] main {
    padding-left: calc(.6rem + var(--sal));
    padding-right: calc(.6rem + var(--sar));
}
html[data-geraet="handy"] .leiste {
    padding-left: calc(.35rem + var(--sal));
    padding-right: calc(.35rem + var(--sar));
}
/* Die Konsole am Schreibtisch steht oben am Rand - auch sie beginnt in der
   App unter der Uhr. */
html[data-geraet="tisch"] .leiste,
html[data-geraet="tablet"] .leiste {
    padding-top: calc(.8rem + var(--sat));
}

/* --- Was sonst noch am oberen Rand klebt -------------------------------- */
/* Die Schublade kommt von rechts über die ganze Höhe. */
html:not([data-eng]) .schublade > header {
    padding-top: calc(.9rem + var(--sat));
}
/* Die Einsatzkarte liegt über allem. */
.ko-kopf { padding-top: calc(.55rem + var(--sat)); }

/* --- Kein Gummiband ----------------------------------------------------- */
/* In der App gibt es keine Adresszeile, die das Ziehen am oberen Rand
   erklären würde - es sieht dort schlicht kaputt aus. */
html[data-app] body { overscroll-behavior: none; }

/* Die Blätter, die von unten und von rechts hereinkommen, stoßen quer
   gehalten an dieselbe Aussparung. Gemessen mit gesetzten Rändern: das ✕
   des Mehr-Blatts saß 13 Pixel vom rechten Rand - also mitten darin. */
.mehr-blatt {
    padding-left: calc(.8rem + var(--sal));
    padding-right: calc(.8rem + var(--sar));
}
.schublade > header,
.schublade .rumpf {
    padding-right: calc(1.05rem + var(--sar));
}
html[data-eng] .schublade .rumpf { padding-right: calc(.8rem + var(--sar)); }

/* Die Platzzahl je Einheit ("2 max ist z.b. quatsch") und die enge
   Fassung fuer schmale Schirme stehen jetzt unten im Abschnitt
   "Streifen-Tafel, zweiter Aufbau" - und zwar an der BREITE DER
   SCHUBLADE, nicht am Geraet: die Schublade laesst sich ziehen, ein
   1600px-Schirm mit 560px-Schublade braucht dieselbe enge Fassung wie
   ein Handy. */
.st-zahl { text-align: center; }
.st-art input::placeholder { opacity: .45; }
/* ---- Farbe waehlen oder tippen (AP59) ----------------------------------
   Justin: "und dass ich hex code als farben nehmen kann". Der Tupfer und
   das Textfeld stehen als ein Bedienteil zusammen - wer eine Farbe hat,
   tippt sie; wer eine sucht, klickt. */

.farbfeld { display: inline-flex; align-items: center; gap: .3rem; flex: none; }
/*  Der Tupfer ist ein KNOPF, kein <input type="color">. Justin: "color
    picker auch in eigenem design und flüssiger" - das native Feld öffnet
    ein Fenster des Betriebssystems: überall anders, nirgends im Design
    dieses Bereichs, und zwischen Ziehen und Ergebnis liegen zwei Klicks.

    Das Karo darunter ist kein Zierrat: es zeigt, dass die Fläche die
    FARBE trägt und nicht bloß hell oder dunkel ist. */
.farbfeld .farbtupfer {
    width: 34px; height: 30px; padding: 0; margin: 0; flex: none;
    border-radius: 8px; cursor: pointer;
    border: 1px solid var(--randhell);
    background: var(--f, #7e8899);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.farbfeld .farbtupfer:hover { border-color: var(--gold); }
.farbfeld .farbtupfer:focus-visible {
    outline: 2px solid var(--gold); outline-offset: 2px;
}
.farbfeld .farbhex {
    width: 82px; margin: 0; padding: .3rem .35rem; flex: none;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px; text-align: center; text-transform: lowercase;
}
/* Solange da kein gueltiges #rrggbb steht, wird nichts uebernommen -
   und man sieht auch, warum. */
.farbfeld .farbhex.schief { border-color: var(--rot); color: var(--rot); }

/* ---- Bereiche: Reviere und eigene Bereiche in einem Dialog (AP59) ------ */

.be-revier {
    border: 1px solid var(--rand); border-radius: 12px;
    padding: .6rem .7rem; margin-bottom: .55rem;
    background: rgba(255,255,255,.015);
}
.be-kopf { display: flex; align-items: center; gap: .45rem; }
.be-kopf input[type="text"] { flex: 1; margin: 0; }
.be-kopf button { margin: 0; }
.be-technik {
    display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap;
}
.be-technik label {
    display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 110px;
    font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--grau);
}
.be-technik input { margin: 0; padding: .32rem .5rem; font-size: 13px; }
.be-fuss {
    display: block; margin-top: .45rem; font-size: 11.5px;
    color: var(--grau); font-style: normal;
}
.be-tipp {
    margin-top: .5rem; padding: .5rem .6rem; border-radius: 10px;
    background: rgba(201,164,92,.07); border: 1px solid rgba(201,164,92,.22);
    font-size: 12.5px; color: var(--hell);
}
.be-tipp button { margin: .25rem .3rem 0 0; }

/* ---- Unit anlegen und aufraeumen (AP59) -------------------------------- */

.un-reihe { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }
.un-reihe > label {
    display: flex; flex-direction: column; gap: .25rem;
    font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--grau);
}
.un-reihe > label.un-weit { flex: 1; min-width: 160px; }
.un-reihe input { margin: 0; }
#un-stufen {
    width: 100%; margin: 0; font-family: ui-monospace, Menlo, monospace;
    font-size: 12.5px; line-height: 1.7;
}
.un-vorschau {
    margin-top: .8rem; padding: .6rem .7rem; border-radius: 10px;
    border: 1px solid var(--rand); background: rgba(255,255,255,.02);
    font-size: 12.5px;
}
.un-vorschau ol { margin: .4rem 0 .4rem 1.1rem; padding: 0; }
.un-vorschau li { font-family: ui-monospace, Menlo, monospace; line-height: 1.75; }
.un-vorschau i { color: var(--grau); font-size: 11.5px; }

/* Eine Rolle, die in keinem Abschnitt haengt, zaehlt nirgends mit -
   das sieht man ihr im Discord nicht an, hier schon. */
.uk-verirrt {
    margin: .2rem 0 .9rem; padding: .55rem .7rem; border-radius: 10px;
    background: rgba(224,90,82,.08); border: 1px solid rgba(224,90,82,.28);
    font-size: 12.5px;
}
.uk-verirrt b { color: var(--rot); }
.uk-verirrt div { margin-top: .4rem; display: flex; gap: .4rem;
    align-items: center; flex-wrap: wrap; }
.uk-verirrt code {
    font-family: ui-monospace, Menlo, monospace; font-size: 12px;
    color: var(--hell);
}
.uk-verirrt button { margin: 0; }

/* Am Finger zoomt iOS in jedes Feld unter 16px hinein und bleibt dann
   schief stehen - gemessen, nicht geraten (dialog-check.cjs). Der
   Hex-Code und die Stufenliste sind die einzigen neuen Felder, die
   darunter lagen. */
html:not([data-geraet="tisch"]) .farbfeld .farbhex,
html:not([data-geraet="tisch"]) #un-stufen {
    font-size: 16px;
}
html:not([data-geraet="tisch"]) .farbfeld .farbhex { width: 100px; }

/* ==========================================================================
   FILTER UEBER EINER LISTE (AP60)
   ==========================================================================
   Justin: "und mach generell in die tabellen filter nach rein". Eine
   Mechanik fuer alle Listen: das Feld traegt data-tabfilter und
   data-tabziel, gefiltert wird zeilenweise am sichtbaren Text.
   ========================================================================== */
.filterleiste {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .8rem; border-bottom: 1px solid var(--rand);
    background: rgba(255,255,255,.012);
}
.filterleiste input {
    flex: 1 1 auto; min-width: 0; margin: 0;
    padding: .34rem .6rem; font-size: 12.5px;
}
.filterleiste input.hat-text {
    border-color: color-mix(in srgb, var(--gold) 45%, var(--rand));
}
.filter-zahl {
    flex: none; font-size: 11px; color: var(--grau);
    font-variant-numeric: tabular-nums;
}
.filter-weg { display: none !important; }
/* Am Finger dieselbe Groesse wie jedes andere Feld - sonst zoomt iOS. */
html:not([data-geraet="tisch"]) .filterleiste input { font-size: 16px; }
html[data-geraet="handy"] .filterleiste { padding: .5rem .6rem; }

/* ==========================================================================
   FIVEM-NAME IM PROFIL, UND WER NUR ZUSEHEN DARF (AP61)
   ========================================================================== */
.mp-spiel {
    display: flex; align-items: center; gap: .45rem;
    flex-wrap: wrap; margin-top: .45rem;
}
.mp-spielname {
    font-size: 12px; padding: .12rem .45rem; border-radius: 6px;
    border: 1px solid var(--rand); background: var(--karte2);
}
.mp-spiel button.flach {
    background: none; border: none; padding: .1rem .2rem;
    color: var(--grau); text-decoration: underline;
}
.mp-spiel button.flach:hover { color: var(--text); }

/* Der freie Platz, den man nicht nehmen kann: dieselbe Form, aber kein
   Knopfgefuehl. Ein Knopf, der beim Druecken nur eine Absage bringt,
   ist schlimmer als ein Schild. */
.sitz-frei.zuschauen { opacity: .55; cursor: default; text-align: center; }
.tipp.zuschauer { color: var(--gelb); }

/* ---- Warnstreifen (AP60) -----------------------------------------------
   Eine stehende Ansage, die immer da ist - also gedaempft genug, dass man
   die Tafel darunter noch sieht, und deutlich genug, dass man sie nicht
   fuer eine Beschriftung haelt. Kein Blinken, keine Bewegung: was staendig
   blinkt, sieht man nach drei Tagen nicht mehr. */
.warnstreifen {
    display: flex; align-items: center; box-sizing: border-box;
    /* Abstaende gehen mit dem Stellrad der Tafel mit (--ls-eng, 0.6
       gedraengt bis 1.4 luftig). Ohne das bliebe der Streifen als
       einziger Block breit stehen, waehrend die Tafel darunter enger
       wird - und genau der Bruch faellt auf. Keine feste Hoehe: Text
       bricht auf schmalen Schirmen um. */
    gap: calc(.6rem * var(--ls-eng, 1));
    margin: 0 0 calc(.7rem * var(--ls-eng, 1));
    padding: calc(.5rem * var(--ls-eng, 1)) calc(.8rem * var(--ls-eng, 1));
    border-radius: 9px;
    font-size: 12.5px; line-height: 1.5; color: #f0c4bf;
    background: linear-gradient(180deg, rgba(207,88,80,.16) 0%,
        rgba(207,88,80,.08) 100%);
    border: 1px solid rgba(207,88,80,.42);
    border-left: 3px solid var(--rot);
}
.warnstreifen .ws-zeichen {
    flex: none; width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 13px; font-weight: 800; line-height: 1;
    color: #2a0d0b; background: #e08b83;
}
.warnstreifen .ws-text { min-width: 0; }
.warnstreifen b { color: #ffdcd7; font-weight: 700; }
/* Der Nachsatz traegt die Drohung: seit v=117 steht bei jedem 11-99, wer
   ihn ausgeloest hat. Deshalb steht er da - leiser, aber er steht da. */
.warnstreifen i { font-style: normal; opacity: .72; }

@media (max-width: 560px) {
    .warnstreifen { font-size: 12px; align-items: flex-start; }
    .warnstreifen .ws-zeichen { margin-top: .1rem; }
}

/* ==========================================================================
   AUSWAHLFELDER (AP62)
   ==========================================================================
   Justin: "kannst du alle dropdowns mal schoen designen etc". Ein select
   war bisher optisch ein Textfeld - kein Pfeil, kein Zeigefinger, und in
   manchen Browsern klappte eine weisse Liste aus einer dunklen Seite auf.

   Der Pfeil ist mit Absicht KEIN SVG: zwei Verlaeufe nehmen var(--grau)
   mit und wechseln damit die Farbe, wenn jemand das Thema umstellt. Ein
   eingebettetes SVG haette eine feste Farbe und saehe in sechs der zehn
   Themen fremd aus.
   ========================================================================== */
:root { color-scheme: dark; }

select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    cursor: pointer; padding-right: 1.9rem;
    background-color: var(--grund);
    background-image:
        linear-gradient(45deg,  transparent 50%, var(--grau) 50%),
        linear-gradient(135deg, var(--grau) 50%, transparent 50%);
    background-position: calc(100% - 1.05rem) 53%, calc(100% - .75rem) 53%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: border-color .12s ease, box-shadow .12s ease,
                background-image .12s ease;
}
select:hover { border-color: var(--randhell); }
select:hover, select:focus {
    background-image:
        linear-gradient(45deg,  transparent 50%, var(--gold) 50%),
        linear-gradient(135deg, var(--gold) 50%, transparent 50%);
}
select:disabled { cursor: not-allowed; opacity: .45; background-image: none; }

/* Eine Mehrfachauswahl klappt nicht auf - ein Pfeil waere dort gelogen. */
select[multiple], select[size]:not([size="1"]) {
    background-image: none; padding-right: .6rem; cursor: default;
    min-height: 5rem;
}

/* Die aufgeklappte Liste. color-scheme oben erledigt Safari und die
   Bildlaufleiste, diese beiden Regeln Chrome und Firefox. */
option { background: var(--karte); color: var(--text); }
option:disabled { color: var(--grau); }
optgroup {
    background: var(--flaeche); color: var(--gold);
    font-style: normal; font-weight: 600;
}

/* Am Finger gilt weiter 16px (sonst zoomt iOS hinein) - aber der Platz
   fuer den Pfeil muss trotzdem bleiben: die Handy-Regel setzt padding
   als Kurzform und wuerde padding-right sonst ueberschreiben. */
html:not([data-geraet="tisch"]) select { padding-right: 2.1rem; }

/* Das Datumsfeld klappt genauso etwas auf und gehoert deshalb dazu. Sein
   Kalender-Symbol kommt vom Browser blendend weiss und stand neben dem
   gedaempften Pfeil wie aus einem anderen Bereich. Gefaerbt wird es
   nicht - ein Filter trifft die Themenfarbe ohnehin nicht -, es wird nur
   zurueckgenommen und hellt beim Anfassen auf, genau wie der Pfeil. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    cursor: pointer; opacity: .45;
    transition: opacity .12s ease;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus::-webkit-calendar-picker-indicator,
input[type="time"]:focus::-webkit-calendar-picker-indicator,
input[type="month"]:focus::-webkit-calendar-picker-indicator { opacity: .9; }

/* ==========================================================================
   ABMELDUNGEN (AP63)
   ========================================================================== */
/* Die Summe des laufenden Jahres ueber der Abmelde-Historie in der Akte.
   Sie ist die Antwort auf "wie viel Urlaub hatte der schon?" - die Liste
   darunter beantwortet das erst nach Kopfrechnen. */
.ab-summe {
    margin: 0 0 .6rem; padding: .4rem .6rem; border-radius: 7px;
    font-size: 12.5px; color: var(--grau);
    background: rgba(201,164,92,.06);
    border: 1px solid var(--rand);
}
.ab-summe b { color: var(--goldhell); font-weight: 700; font-size: 13.5px; }

/* Der Zeitraum-Waehler sitzt in der Filterleiste des Reiters und soll
   dort nicht die Suche zerdruecken. */
.filterleiste #ab-zeitraum { flex: none; width: auto; margin: 0; }

#ab-liste tr.vergangen td { opacity: .5; }
#ab-liste tr.laeuft td:first-child { box-shadow: inset 3px 0 0 var(--gelb); }

/* ==========================================================================
   DAS LOG (AP66)
   ========================================================================== */
.log-sieb { flex-wrap: wrap; margin-top: .6rem; }
.log-sieb button i {
    font-style: normal; opacity: .5; font-size: 10px; margin-left: .2rem;
}
.log-zeile {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .4rem .2rem; border-bottom: 1px solid #17202f;
}
.log-zeile:last-child { border-bottom: 0; }
/* Eine Zeile mit Sprungziel ist anklickbar - und sagt das auch. Ohne
   den Hinweis am Zeiger probiert es niemand aus (23.09.). Der Balken
   links ist derselbe wie bei den klickbaren Tabellenzeilen. */
.log-zeile.klickbar { cursor: pointer; }
.log-zeile.klickbar:hover {
    background: rgba(201,164,92,.05);
    box-shadow: inset 3px 0 0 var(--gold);
}
.log-wann { font-size: 11.5px; color: var(--grau); min-width: 3.4rem; }
.log-bereich { font-size: 13px; width: 1.2rem; text-align: center; }
.log-ziel { font-size: 12px; }
.log-details {
    font-size: 12px; flex: 1; min-width: 8rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.log-zeit { margin-left: auto; white-space: nowrap; }
.log-roh { font-style: normal; opacity: .6; font-size: 9px; }

/* Mehrere Gewaehlte in der Zuweis-Leiste: die Gesichter ruecken
   zusammen, damit vier davon nicht breiter sind als der Rest. */
.zw-wer .av, .zw-wer .avatar, .zw-wer .u-ring { margin-right: -6px; }
.zw-wer .av:last-of-type, .zw-wer .u-ring:last-of-type { margin-right: .3rem; }
.zw-mehr {
    font-size: 11px; color: var(--grau); margin: 0 .35rem 0 .5rem;
}

html[data-geraet="handy"] .log-zeit { display: none; }
html[data-geraet="handy"] .log-details { white-space: normal; }

/* ==========================================================================
   DIE TAFEL EINRICHTEN (AP65)
   ==========================================================================
   Justin: "ich moechte die leitstelle besser auf einen fleck haben,
   nochmal ein wenig knackiger, lass die sich auch von namenshoehe im
   aussehen einstellen lassen ... dass alles auf einen blick ist".

   Drei Variablen auf dem Bereich, mehr nicht. Jede Regel darunter haengt
   an einer davon, die Voreinstellung steht genau einmal da. Ein Satz
   Klassen (.klein/.mittel/.gross) haette jede Regel dreimal gebraucht -
   und beim naechsten Feld drei Stellen zu pflegen statt einer.

   Eingestellt wird je BETRACHTER (localStorage pd_leitstelle), nicht
   fuer alle: ein Zweitmonitor neben dem Spiel braucht etwas anderes als
   ein Laptop.
   ========================================================================== */
#a-leitstelle {
    --ls-name: 11.5px;          /* Namen in den Besatzungs-Chips */
    --ls-eng: 1;                /* Abstaende: 0.6 gedraengt ... 1.4 luftig */
    --ls-spalten: 3;            /* Spalten je Revier-Reihe */

    /* So klein darf ein Name auf dem SCHIRM hoechstens werden (21.09.).
       Das Stellrad und der Zoom multiplizieren sich: 9 px bei 50 %
       waren 4,5 px, und der fertige Knopf "Knackig" landete bei 8,5.
       Justin: "achte darauf dass die prio immer ist die gut zu sehen
       egal wie man das sich selber verrueckt".

       Gerechnet wird gegen den Zoom - bei 50 % steht hier die doppelte
       Schriftgroesse, auf dem Schirm kommen dieselben 10 px an.
       Dasselbe Mittel wie bei der Zoom-Leiste im Kopf, nur andersherum:
       dort haelt ein Knopf dagegen, hier der Name. Alles andere
       (Abstaende, Karten, Bilder) schrumpft weiter mit. */
    --ls-lesbar: 10px;
    --ls-name-gut: max(var(--ls-name),
                       calc(var(--ls-lesbar) / var(--ls-zoom, 1)));
}

/* --- Die Besatzungs-Chips: hier steckt die "Namenshoehe" -------------
   Alles am Chip haengt an --ls-name-gut, nicht am rohen Regler: das
   Polster und die Luecke sollen mit der Schrift wachsen, sonst klebt
   ein hochgehaltener Name an der Kante seines Chips. */
#a-leitstelle .crew {
    font-size: var(--ls-name-gut);
    gap: calc(var(--ls-name-gut) * .035 * 10);
    padding: calc(var(--ls-name-gut) * .014 * 10) calc(var(--ls-name-gut) * .043 * 10)
             calc(var(--ls-name-gut) * .014 * 10) calc(var(--ls-name-gut) * .016 * 10);
}
/* Das Bild waechst mit der Schrift - sonst schwimmt ein winziger Name
   neben einem unveraendert grossen Kopf. EIN Mass genuegt: alles im
   Chip haengt daran, der Ring eingeschlossen. */
#a-leitstelle .crew { --av: calc(var(--ls-name-gut) * 1.74); }
#a-leitstelle .crew .rk,
#a-leitstelle .cn .deck { font-size: calc(var(--ls-name-gut) * .87); }

/* --- Abstaende: eine Zahl, alles darunter ---------------------------- */
#a-leitstelle .e-karte {
    padding: calc(.5rem * var(--ls-eng)) calc(.65rem * var(--ls-eng))
             calc(.45rem * var(--ls-eng));
    margin-bottom: calc(.45rem * var(--ls-eng));
}
#a-leitstelle .e-crew,
#a-leitstelle .pool {
    gap: calc(.3rem * var(--ls-eng));
    margin-top: calc(.45rem * var(--ls-eng));
}
#a-leitstelle .brett { gap: calc(1rem * var(--ls-eng)); }
#a-leitstelle .brett-zeile { gap: calc(1rem * var(--ls-eng)); }
#a-leitstelle .wsp { padding: calc(.75rem * var(--ls-eng)); }
#a-leitstelle .karte { margin-bottom: calc(.7rem * var(--ls-eng)); }

/* --- Spalten: 0 heisst "so viele wie passen" -------------------------
   ACHTUNG Spezifitaet: eine Regel mit #a-leitstelle schlaegt jede reine
   Klassenregel. Sie darf deshalb NICHT einfach .brett-zeile treffen,
   sonst ueberfaehrt sie drei bestehende Entscheidungen:
     * .brett-zeile.eigen laeuft absichtlich auf auto-fit (Justin:
       "ne die anderen hatten auch eine andere breite sah besser aus")
     * der Umbruch bei 1100px
     * die eine Spalte am Finger
   Also: nur die Revier-Reihen, und beide Umbrueche eigens nachgezogen. */
#a-leitstelle .brett-zeile:not(.eigen) {
    grid-template-columns: repeat(var(--ls-spalten), minmax(0, 1fr));
}
#a-leitstelle[data-ls-auto] .brett-zeile:not(.eigen) {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (max-width: 1100px) {
    #a-leitstelle .brett-zeile:not(.eigen) {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

/* --- Was man wegblenden kann, um Platz zu gewinnen ------------------- */
#a-leitstelle[data-ls-ohne-codes] .codes-leiste,
#a-leitstelle[data-ls-ohne-tipp] .tipp:not(.zuschauer) { display: none; }
/* Der Kopf der Codes-Karte bleibt: dort steht der Ansicht-Knopf, und
   eine Einstellung, die sich selbst unerreichbar macht, ist eine Falle.
   Die Ueberschrift geht aber mit - "Klick auf einen Code" ueber einer
   leeren Leiste ist eine Anleitung fuer etwas, das nicht da ist. Uebrig
   bleibt eine schmale Zeile mit Stand und Knopf. */
/* Die Zoom-Leiste im Kopf der Status-Codes (15.09.2026).

   ZOOM-AUSGLEICH: die Leiste sitzt IN #a-leitstelle, wird also vom
   `zoom` der Tafel mitverkleinert. Bei 50 % waere die Prozentzahl acht
   Pixel gross - genau der Knopf, den man dann braucht, um wieder
   herauszukommen. `zoom: calc(1 / var(--ls-zoom))` hebt es auf; die
   Variable setzt lsAnwenden() mit. */
.ls-zoom {
    display: inline-flex; align-items: center; gap: .18rem;
    zoom: calc(1 / var(--ls-zoom, 1));
}
.ls-zoom > button {
    min-width: 26px; padding: .12rem .3rem; line-height: 1.1;
}
.ls-zoom > .ls-zoom-wert {
    min-width: 54px; font-variant-numeric: tabular-nums;
    color: var(--grau);
}
.ls-zoom > .ls-zoom-wert.an { color: var(--goldhell); border-color: var(--gold); }

#a-leitstelle[data-ls-ohne-codes] .codes-kopf > div:first-child {
    display: none;
}
#a-leitstelle[data-ls-ohne-codes] .karte:has(> .codes-kopf) {
    margin-bottom: calc(.45rem * var(--ls-eng));
    padding: calc(.2rem * var(--ls-eng)) 0;
}

/* Am Finger bleibt es bei einer Spalte - dort ist "alles auf einen
   Blick" eine Frage des Scrollens, nicht der Spalten. */
html[data-geraet="handy"] #a-leitstelle .brett-zeile,
html[data-geraet="handy"] #a-leitstelle .brett-zeile.eigen,
html[data-eng] #a-leitstelle .brett-zeile,
html[data-eng] #a-leitstelle .brett-zeile.eigen {
    grid-template-columns: 1fr;
}

/* Das Stellrad selbst. */
.ls-rad { display: grid; gap: .8rem; min-width: 260px; }
.ls-reihe { display: grid; gap: .3rem; }
.ls-reihe > label {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 0;
}
.ls-reihe > label span {
    color: var(--grau); text-transform: none; letter-spacing: 0;
    font-size: 11px;
}
.ls-rad input[type="range"] { width: 100%; accent-color: var(--gold); }
.ls-haken { display: flex; align-items: center; gap: .45rem;
    font-size: 12px; color: var(--text); cursor: pointer; }
.ls-haken input { width: auto; }

/* ==========================================================================
   ZU- UND ABGAENGE (AP64)
   ========================================================================== */
.mo-zeile {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .45rem .2rem; border-bottom: 1px solid #17202f;
    border-left: 3px solid transparent;
    padding-left: .55rem;
}
.mo-zeile:last-child { border-bottom: 0; }
.mo-zeile.zu { border-left-color: var(--gruen); }
.mo-zeile.ab { border-left-color: var(--rot); }
.mo-zeile[data-person] { cursor: pointer; }
.mo-zeile[data-person]:hover { background: rgba(201,164,92,.05); }
.mo-wann { font-size: 11.5px; color: var(--grau); min-width: 3.6rem; }
.mo-grund { font-size: 12px; }
.mo-zeit { margin-left: auto; white-space: nowrap; }

.mo-wer {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .35rem .2rem; border-bottom: 1px solid #17202f;
}
.mo-wer:last-child { border-bottom: 0; }

.mo-bot { margin-left: .7rem; font-size: 11.5px; }
.mo-bot.an  { color: var(--gruen); }
.mo-bot.aus { color: var(--rot); }

html[data-geraet="handy"] .mo-zeit { margin-left: 0; }
html[data-geraet="handy"] .mo-zeile { gap: .35rem; }

/* ---- Fragenkatalog: der Baukasten (AP60) ------------------------------
   Justin: "mach den fragenkatalog schöner, dass man das schön aufbauen
   kann". Eine Zeile je Frage, das Seltene erst auf Aufklappen - sonst
   steht bei zwanzig Fragen mehr Bedienung als Inhalt da. */

.fk-liste { display: flex; flex-direction: column; gap: .4rem; }

.fk-zeile {
    border: 1px solid var(--rand); border-radius: 11px;
    background: rgba(255,255,255,.015); overflow: hidden;
}
.fk-zeile.auf { border-color: var(--randhell); background: var(--karte2); }
/* Eine Überschrift ist keine Frage - das sieht man ihr auch an. */
.fk-zeile.teil { background: rgba(201,164,92,.06); border-color: rgba(201,164,92,.25); }
.fk-zeile.teil .fk-label { font-weight: 700; color: var(--goldhell); }

.fk-kopf {
    display: flex; align-items: center; gap: .4rem; padding: .4rem .5rem;
}
.fk-nr {
    width: 20px; flex: none; text-align: center; font-size: 11px;
    color: var(--grau); font-variant-numeric: tabular-nums;
}
.fk-zeichen { flex: none; font-size: 14px; line-height: 1; }
.fk-kopf .fk-label { flex: 1; min-width: 90px; margin: 0; padding: .32rem .5rem; }
.fk-kopf .fk-art { flex: none; width: 150px; margin: 0; padding: .32rem .4rem;
    font-size: 12px; }
.fk-knoepfe { display: flex; gap: .2rem; flex: none; }
.fk-knoepfe button { margin: 0; padding: .25rem .45rem; line-height: 1; }
.fk-knoepfe button[disabled] { opacity: .3; cursor: default; }

.fk-mehr {
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: end;
    padding: 0 .5rem .55rem calc(20px + .9rem);
    border-top: 1px dashed var(--rand); margin-top: -1px; padding-top: .55rem;
}
.fk-feld {
    display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 170px;
    font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--grau);
}
.fk-feld input { margin: 0; padding: .32rem .5rem; font-size: 13px;
    text-transform: none; letter-spacing: 0; }
.fk-pflicht { display: flex; align-items: center; gap: .35rem; font-size: 12.5px;
    white-space: nowrap; }
.fk-pflicht input { accent-color: var(--gold); margin: 0; }
.fk-schluessel { flex-basis: 100%; }
.fk-schluessel code { font-size: 11px; color: var(--grau); }

/* Die Arten stehen als Kasten unten - man nimmt eine und sie liegt da. */
.fk-neu {
    display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem;
    padding-top: .7rem; border-top: 1px solid var(--rand);
}
.fk-neu button { margin: 0; font-size: 12px; }

.fk-vorschau {
    border: 1px solid var(--randhell); border-radius: 12px;
    padding: .8rem; background: var(--karte2);
}


/* ---- Die Fragen-Werkstatt: EIN Satz Klassen fuer BEIDE Kataloge ------
   Der Einstellungsbogen (HR) und der Pruefungskatalog eines Moduls
   (AzubiNet) sehen ab hier gleich aus und werden gleich bedient.
   Justin, 30.08.: "bis dato ist alles sehr durchwürfelt". */

.kat-leiste {
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
    margin: .6rem 0 .4rem;
}
.kat-leiste input[type="search"] { flex: 1 1 180px; min-width: 130px;
    margin: 0; padding: .34rem .55rem; }
.kat-leiste select { flex: 0 1 190px; width: auto; margin: 0;
    padding: .34rem .4rem; font-size: 12px; }
.kat-leiste button { margin: 0; }
.kat-leiste .rechts { margin-left: auto; }
.kat-stand { margin: .1rem 0 .5rem; }

/* Der Griff. Er zeigt, dass sich hier etwas ziehen laesst - ohne ihn
   probiert es niemand. */
.kat-griff {
    flex: none; width: 14px; text-align: center; cursor: grab;
    color: var(--stumm); font-size: 13px; line-height: 1; user-select: none;
}
.kat-griff.leer { cursor: default; opacity: 0; }
.kat-zieht { opacity: .45; }
/* Die Linie sagt, WO es landet. Ohne sie ist Ziehen ein Ratespiel. */
.kat-ueber-oben { box-shadow: inset 0 2px 0 0 var(--gold); }
.kat-ueber-unten { box-shadow: inset 0 -2px 0 0 var(--gold); }

/* ---- Kapitel (nur HR) ---- */
.kat-liste { display: flex; flex-direction: column; gap: .5rem; }
.kat-gruppe {
    border: 1px solid var(--rand); border-radius: 12px;
    background: rgba(255,255,255,.012); overflow: hidden;
}
.kat-gruppe.teil { border-color: rgba(201,164,92,.28);
    background: rgba(201,164,92,.05); }
.kat-gkopf {
    display: flex; align-items: center; gap: .4rem; padding: .42rem .5rem;
    background: rgba(255,255,255,.03); border-bottom: 1px solid var(--rand);
}
.kat-gruppe.zu .kat-gkopf { border-bottom: 0; }
.kat-klapp {
    flex: none; margin: 0; padding: .2rem .35rem; line-height: 1;
    font-size: 11px; background: none; border: 0; color: var(--grau);
}
.kat-gtitel { flex: 1; min-width: 90px; margin: 0; padding: .3rem .5rem;
    font-weight: 700; color: var(--goldhell); }
.kat-gtitel.fest { font-size: 12.5px; color: var(--stumm);
    font-weight: 400; padding-left: .2rem; }
.kat-gzahl { flex: none; font-size: 11px; color: var(--stumm);
    white-space: nowrap; }
.kat-ginhalt { display: flex; flex-direction: column; gap: .35rem;
    padding: .45rem; }
.kat-leerkapitel { padding: .5rem; font-size: 12px; color: var(--stumm); }
.kat-ende { display: flex; flex-wrap: wrap; gap: .35rem; padding: .1rem 0; }
.kat-ende button { margin: 0; font-size: 12px; }
.kat-treffer { font-size: 11px; color: var(--stumm); padding: .1rem 0 .3rem; }

/* ---- Die Artenauswahl ---- */
.kat-anhang { margin-top: .9rem; padding-top: .7rem;
    border-top: 1px solid var(--rand); }
.kat-anhang-kopf { font-size: 11px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--stumm); margin-bottom: .4rem; }
.kat-palette {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .35rem; margin: .3rem 0;
}
.kat-palette button {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem;
    margin: 0; padding: .4rem .5rem; text-align: left;
    /* Ein Knopf, der einen ganzen Satz traegt, darf umbrechen - die
       Grundregel fuer Knoepfe setzt nowrap. */
    white-space: normal; font-size: 12px;
}
.kat-p-zeichen { flex: none; }
.kat-p-name { font-weight: 600; color: var(--hell); }
.kat-p-wozu { flex-basis: 100%; font-size: 11px; color: var(--stumm);
    line-height: 1.35; }

/* ---- Marken an der Zeile ---- */
.kat-marke {
    flex: none; font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
    color: var(--stumm); border: 1px solid var(--rand); border-radius: 6px;
    padding: .1rem .3rem; white-space: nowrap;
}
.kat-marke.punkt { color: var(--goldhell); border-color: rgba(201,164,92,.35); }
/* Die Art als Marke statt als Auswahlfeld in der Zeile: das Feld hat
   150 px gefressen, und die letzten zwei Knoepfe lagen dahinter
   ausserhalb des Kastens (der abschneidet - man sah es nicht einmal). */
.kat-marke.art { text-transform: none; letter-spacing: 0; font-size: 11px; }
/* Der Schalter "Antworten zeigen" ist an oder aus - das muss man sehen,
   sonst drueckt man ihn zweimal und wundert sich. */
.kat-leiste button.an { border-color: var(--gold); color: var(--gold); }
/* Die Antwortzeile unter einer Frage: sie gehoert zur Zeile und nicht
   in ihren Kopf - deshalb der Einzug bis unter den Fragetext. */
.fk-zeile > .az-katopt { padding: 0 .6rem .5rem calc(20px + 2rem); }
.kat-text {
    flex: 1; min-width: 90px; font-size: 13px; color: var(--hell);
    line-height: 1.35; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.fk-zeile.aus { opacity: .55; }
.fk-zeile.neu { border-color: var(--gold); }
.fk-feld.breit { flex-basis: 100%; }

/* ---- Der Editor in der Zeile (AzubiNet) ---- */
.kat-editor .fk-wahl { flex-basis: 100%; }
.kat-editor-fuss { flex-basis: 100%; margin-top: .3rem; align-items: center; }
.kat-schmutz {
    display: none; font-size: 11.5px; color: var(--gelb); margin-left: .3rem;
}
.kat-schmutz.an { display: inline; }

/* ---- "Was noch fehlt" ---- */
.kat-pruef {
    border: 1px solid var(--rand); border-radius: 10px; overflow: hidden;
    margin: .2rem 0 .5rem; background: rgba(255,255,255,.015);
}
.kat-pruef.schwer { border-color: rgba(207,88,80,.4); }
.kat-pruef.gut { padding: .35rem .6rem; font-size: 11.5px;
    color: var(--gruen); border-color: rgba(83,168,120,.3); }
.kat-pruef-kopf {
    display: flex; align-items: center; width: 100%; margin: 0;
    padding: .4rem .6rem; background: none; border: 0; font-size: 12px;
    color: var(--text); text-align: left; white-space: normal;
}
.kat-pruef.schwer .kat-pruef-kopf { color: #eda29b; }
.kat-pruef-pfeil { margin-left: auto; color: var(--stumm); }
.kat-pruef-liste { display: flex; flex-direction: column;
    border-top: 1px solid var(--rand); }
.kat-mangel {
    display: block; width: 100%; margin: 0; padding: .35rem .6rem;
    background: none; border: 0; border-bottom: 1px solid var(--rand);
    text-align: left; white-space: normal; font-size: 11.5px;
    color: var(--stumm); line-height: 1.4;
}
.kat-mangel:last-child { border-bottom: 0; }
.kat-mangel.schwer { color: #eda29b; }
.kat-mangel:hover { background: rgba(255,255,255,.04); color: var(--hell); }

/* ---- Vorschau (AzubiNet) ---- */
.kat-vorschau { display: flex; flex-direction: column; gap: .7rem; }
.kat-v-frage { border: 1px solid var(--rand); border-radius: 11px;
    padding: .6rem .8rem; background: var(--karte2); }
.kat-v-kopf { display: flex; align-items: center; gap: .5rem; }
.kat-v-opt { display: flex; flex-direction: column; gap: .25rem;
    font-size: 12.5px; color: var(--text); }
.kat-v-feld { font-size: 12px; color: var(--stumm); font-style: italic; }

/* ---- Fragen aus einem anderen Modul uebernehmen ---- */
.azh-zeile {
    display: flex; align-items: center; gap: .5rem; padding: .35rem .2rem;
    border-bottom: 1px solid var(--rand); font-size: 12.5px;
}
.azh-zeile input { margin: 0; accent-color: var(--gold); }

/* Am Handy ist kein Platz fuer die Auswahl der Art neben dem Text - und
   HTML-Ziehen gibt es dort ohnehin nicht, die Pfeile machen die Arbeit. */
html[data-geraet="handy"] .kat-griff { display: none; }
html[data-geraet="handy"] .fk-kopf { flex-wrap: wrap; }
html[data-geraet="handy"] .fk-kopf .fk-art { width: 100%; }
html[data-geraet="handy"] .kat-palette { grid-template-columns: 1fr; }
html[data-geraet="handy"] .kat-leiste select { flex-basis: 100%; }

/* ---- Der Modul-Dialog: dieselbe Werkstatt ---------------------------- */

.amd-teil { margin-top: 1.1rem; padding-top: .8rem;
    border-top: 1px solid var(--rand); }
.amd-teil h3 {
    margin: 0 0 .55rem; font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--goldhell); font-weight: 700;
}
.amd-teil p { margin: .45rem 0 0; }

/* Ein Schalter mit dem Satz darunter, der sagt, was er bewirkt. Als
   Haken in einer Zeile sahen alle vier gleich aus - obwohl der eine
   bestimmt, WORAUS das Modul besteht, und der andere, ob es zaehlt. */
.amd-schalter {
    display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .4rem;
    padding: .5rem .6rem; border: 1px solid var(--rand); border-radius: 10px;
    background: rgba(255,255,255,.012); cursor: pointer;
    /* ZURUECKSETZEN: `label` traegt bereichsweit Versalien und .14em
       Sperrung. Richtig fuer eine Feldbeschriftung ("TITEL"), falsch
       fuer einen ganzen Satz - und der Schalter ist ein `label`, damit
       ein Klick auf den Text das Ankreuzfeld trifft. */
    text-transform: none; letter-spacing: 0; font-size: 12.5px;
    color: var(--text); margin-bottom: .4rem;
}
.amd-schalter.an { border-color: rgba(201,164,92,.4);
    background: rgba(201,164,92,.06); }
/* WIDTH MUSS SEIN. `input { width: 100% }` gilt bereichsweit; mit
   `flex: none` daneben bleibt die volle Breite stehen, das Ankreuzfeld
   fuellt die Zeile und der Text wird hinausgeschoben. Dieselbe Loesung
   wie bei .div-opt. */
.amd-schalter input { margin: .15rem 0 0; accent-color: var(--gold);
    flex: none; width: 15px; height: 15px; }
.amd-schalter > span { flex: 1; min-width: 0; }
.amd-schalter b { display: block; font-size: 13px; color: var(--hell);
    font-weight: 600; }
.amd-schalter i { display: block; margin-top: .15rem; font-style: normal;
    font-size: 11.5px; color: var(--stumm); line-height: 1.4; }
.amd-grenze { flex: 0 0 110px; }
.amd-grenze input { margin: 0; padding: .32rem .5rem; }
#amd .sieb { flex: none; }

/* ---- Die IA-Akten einer Beschwerde ------------------------------------
   Der Verlauf selbst benutzt `.erm-chronik` wie die Detective-Akte -
   Justin: "so wie Detectives von der Chronik her". Hier steht nur die
   Marke, mit der eine Beschwerde auf ihre Akten zeigt. */

.ia-akten { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
.ia-akte-marke {
    display: flex; align-items: center; gap: .45rem; margin: 0;
    padding: .35rem .6rem; text-align: left;
    /* Sie traegt einen ganzen Namen - die Grundregel fuer Knoepfe setzt
       `nowrap`, und der waere damit mitten im Wort abgeschnitten. */
    white-space: normal; font-size: 12.5px;
}
.ia-akte-marke b { color: var(--goldhell); font-weight: 600; }
.ia-akte-marke span { color: var(--stumm); }
.ia-akte-marke .etikett { color: inherit; }

/* ---- Scheine: der Haken ----------------------------------------------
   Justin, 30.08.: "dass man unter scheine nur abhaken braucht nicht
   alles konkret reinpacken". Ein Kaestchen, kein Knopf mit Rahmen -
   drei geraenderte Knoepfe nebeneinander saehen aus wie eine
   Werkzeugleiste, und man soll die Spalte ueberfliegen koennen. */

.sc-haken {
    margin: 0; padding: .1rem .35rem; min-width: 1.9rem;
    background: none; border: 1px solid transparent; border-radius: 6px;
    font-size: 15px; line-height: 1.2; color: var(--stumm);
}
.sc-haken:hover { border-color: var(--randhell); color: var(--hell); }
.sc-haken.an { color: var(--gruen); }
.sc-haken.an:hover { color: var(--gruen); border-color: var(--gruen); }

/* ---- Der Bogen selbst: neun Arten (AP60) ------------------------------ */

.bg-abschnitt {
    margin: .9rem 0 .1rem; padding-bottom: .3rem;
    border-bottom: 1px solid var(--rand);
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--goldhell);
}
.bg-abschnitt i {
    display: block; margin-top: .2rem; font-style: normal; font-weight: 400;
    letter-spacing: 0; text-transform: none; font-size: 11.5px;
    color: var(--grau);
}
.bg-hinweis {
    display: block; margin: -.15rem 0 .3rem; font-style: normal;
    font-size: 11.5px; color: var(--grau);
}
.bg-wahl { display: flex; flex-wrap: wrap; gap: .35rem .9rem; padding: .2rem 0; }

.bg-papier {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .45rem .6rem; border: 1px dashed var(--randhell);
    border-radius: 10px; background: rgba(255,255,255,.02);
}
.bg-papier a { font-size: 13px; }
.bg-papier button { margin: 0; }
/* Die echte Dateiauswahl ist überall anders hässlich - der Knopf davor
   ist überall gleich. */
.bg-hoch {
    display: inline-flex; align-items: center; cursor: pointer;
    padding: .3rem .6rem; border-radius: 8px; margin-left: auto;
    border: 1px solid var(--rand); color: var(--text);
}
.bg-hoch:hover { border-color: var(--gold); color: var(--goldhell); }
.bg-hoch input[type="file"] { display: none; }

/* In der Akte: die Gliederung des Bogens bleibt erhalten. */
.paare.bogen .bogen-abschnitt {
    margin-top: .7rem; padding-top: .5rem; border-top: 1px solid var(--rand);
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--goldhell);
}
.paare.bogen dd .etikett { margin-right: .25rem; }

/* Am Finger zoomt iOS in jedes Feld unter 16px hinein. */
html:not([data-geraet="tisch"]) .fk-kopf .fk-label,
html:not([data-geraet="tisch"]) .fk-kopf .fk-art,
html:not([data-geraet="tisch"]) .fk-feld input { font-size: 16px; }
html:not([data-geraet="tisch"]) .fk-kopf { flex-wrap: wrap; }
html:not([data-geraet="tisch"]) .fk-kopf .fk-art { width: 100%; }

/* ---- Rechte-Tafel: alle Quellen, auch die Units (AP60) ----------------
   Justin: "generell die permissions panel top machen". Der Anfang davon
   ist, dass sie die Wahrheit sagt: eine Unit-Vergabe ist eine Quelle wie
   Rang oder Rolle, und die Grundrechte gehoeren dazugesagt. */

.rt-tag.unit {
    border-color: rgba(83,168,120,.45); color: #7fd3a2;
    background: rgba(83,168,120,.12);
}

.rt-alarm {
    margin: .6rem 0; padding: .6rem .7rem; border-radius: 10px;
    background: rgba(207,88,80,.1); border: 1px solid rgba(207,88,80,.35);
    font-size: 12.5px; line-height: 1.5;
}
.rt-alarm b { color: var(--rot); }

.rt-grund {
    margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--rand);
}
.rt-grund > b { font-size: 12.5px; }
.rt-grund > i {
    display: block; margin: .15rem 0 .5rem; font-style: normal;
    font-size: 11.5px; color: var(--grau);
}
.rt-grund > div { display: flex; flex-wrap: wrap; gap: .3rem; }


/* ---- Freitext: was jemand mit Form getippt hat, behaelt sie ---------- */

.freitext { font-size: 13px; line-height: 1.6; color: var(--text); }
.freitext > *:first-child { margin-top: 0; }
.freitext > *:last-child { margin-bottom: 0; }
.freitext p { margin: 0 0 .7rem; }
.freitext ul, .freitext ol { margin: 0 0 .7rem; padding-left: 1.2rem; }
.freitext li { margin: .15rem 0; }
.freitext li::marker { color: var(--gold); }
.freitext strong { color: var(--hell); font-weight: 600; }
.freitext em { color: var(--hell); font-style: italic; }
.freitext a { color: var(--blau); word-break: break-all; }
/* NICHT kursiv und NICHT grau: die IA schreibt ganze Berichtsabschnitte
   als Zitat-Bloecke - als "alles schraeg und abgeblendet" war das
   unlesbar (Justin, 08.09.: "Formatierung funktioniert nicht mehr
   richtig"). Die goldene Kante traegt die Zitat-Bedeutung allein. */
.freitext blockquote {
    margin: 0 0 .7rem; padding: .45rem .7rem;
    border-left: 2px solid var(--gold);
    background: color-mix(in srgb, var(--gold) 5%, transparent);
    border-radius: 0 8px 8px 0;
}
.freitext blockquote > *:last-child { margin-bottom: 0; }
/* Die drei Discord-Stufen (#/##/###) landen als h4-h6 - ohne eigene
   Regel machte der Browser daraus WINZIGE Zeilen (h5/h6 sind ab Werk
   kleiner als 13px Fliesstext), und eine Ueberschrift, die kleiner ist
   als ihr Absatz, sieht aus wie kaputt. */
.freitext h4, .freitext h5, .freitext h6 {
    margin: 1rem 0 .35rem; color: var(--goldhell);
    line-height: 1.3; font-weight: 700;
}
.freitext h4 { font-size: 16px; }
.freitext h5 { font-size: 14.5px; }
.freitext h6 {
    font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em;
}

/* ---- Der Werkzeugkasten ueber einem Textfeld ------------------------- */

.schreib { display: block; }
.schreib-leiste {
    display: flex; gap: .25rem; align-items: center; flex-wrap: wrap;
    margin-bottom: .3rem;
}
.schreib-leiste button {
    min-width: 30px; height: 26px; padding: 0 .45rem;
    font-size: 12px; line-height: 1; border-radius: 6px;
    background: var(--karte2); border: 1px solid var(--rand);
    color: var(--grau); cursor: pointer;
}
.schreib-leiste button:hover { color: var(--hell); border-color: var(--randhell); }
.schreib-leiste button i { font-style: italic; }
.schreib-leiste .rechts { margin-left: auto; min-width: 0; }
.schreib-leiste .rechts.an {
    color: var(--goldhell); border-color: rgba(201,164,92,.45);
    background: rgba(201,164,92,.12);
}
.schreib textarea { width: 100%; }
.schreib-vorschau {
    min-height: 4.5rem; padding: .5rem .6rem; border-radius: 8px;
    background: var(--karte2); border: 1px dashed var(--randhell);
}


/* ---- Der Faden am IA-Bericht ---------------------------------------- */

.ia-faden {
    max-height: 320px; overflow-y: auto; padding: .1rem;
    display: flex; flex-direction: column; gap: .45rem;
}
.ia-faden .fb {
    padding: .45rem .6rem; border-radius: 10px;
    background: var(--karte2); border: 1px solid var(--rand);
}
/* Eigene Beitraege ruecken ein und tragen die Hausfarbe - im Faden
   erkennt man sie so, ohne den Namen zu lesen. */
.ia-faden .fb.ich {
    margin-left: 1.6rem; border-color: rgba(201,164,92,.32);
    background: rgba(201,164,92,.07);
}
/* Interne Beitraege sind gestrichelt: das ist derselbe Rand wie an der
   Vorschau - "nicht endgueltig draussen". */
.ia-faden .fb.intern { border-style: dashed; }
.ia-faden .fb-kopf {
    display: flex; align-items: center; gap: .4rem;
    margin-bottom: .25rem; font-size: 11.5px;
}
.ia-faden .fb-kopf b { color: var(--hell); font-size: 12px; }
.ia-faden .fb-kopf .zeit {
    color: var(--gold); opacity: .75; font-variant-numeric: tabular-nums;
}
.ia-faden .fb-kopf .etikett { padding: 0 .35rem; font-size: 10px; }
.ia-faden .fb-weg {
    margin-left: auto; width: 20px; height: 20px; padding: 0; flex: none;
    background: none; border: 0; color: var(--grau);
    font-size: 15px; line-height: 1; cursor: pointer; border-radius: 5px;
}
.ia-faden .fb-weg:hover { color: var(--rot); background: var(--rotdun); }
.ia-faden .freitext { font-size: 12.5px; }

.ia-schreiben { margin-top: .6rem; }
.ia-schreiben textarea { width: 100%; margin-bottom: .35rem; }
.ia-schreiben .reihe { align-items: center; gap: .5rem; }
.ia-schreiben .reihe small { line-height: 1.35; }

/* Zwei Knoepfe statt eines Hakens: wohin der Beitrag geht, soll als
   Wort dastehen und nicht als Kaestchen, das man uebersieht. */
.ia-wohin { display: flex; gap: .3rem; margin-bottom: .35rem; }
.ia-wohin button {
    padding: .2rem .55rem; font-size: 11.5px; border-radius: 999px;
    background: var(--karte2); border: 1px solid var(--rand);
    color: var(--grau); cursor: pointer;
}
.ia-wohin button.an {
    color: var(--goldhell); border-color: rgba(201,164,92,.45);
    background: rgba(201,164,92,.12);
}

.faden-zahl {
    font-size: 11px; color: var(--grau); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}


/* ---- Wer wieviel gemacht hat ---------------------------------------- */

/* Rechts in der Zeile, feste Breite, damit die Zahlen untereinander
   stehen und man sie ohne Lesen vergleichen kann. Der Balken sitzt
   UNTER der Zahl und rechtsbuendig wie sie - er macht die Zeile keinen
   Millimeter hoeher. */
.u-leist {
    position: relative; flex: none; width: 54px; text-align: right;
    padding-bottom: 4px; font-size: 11px;
    font-variant-numeric: tabular-nums; cursor: default;
}
.u-leist b { color: var(--goldhell); font-weight: 600; }
.u-leist i {
    position: absolute; right: 0; bottom: 0; height: 2px;
    background: var(--gold); opacity: .75; border-radius: 2px;
}
/* Wer im Zeitraum nichts hat: grau, kein Balken - dort steht dann, wie
   lange es her ist. */
.u-leist.still b { color: var(--grau); font-weight: 400; }

.div-zeile .u-leist { width: 42px; font-size: 10.5px; }
.div-leist {
    font-size: 10px; font-variant-numeric: tabular-nums;
    color: var(--goldhell); padding: .05rem .4rem; border-radius: 999px;
    border: 1px solid rgba(201,164,92,.35);
    background: rgba(201,164,92,.1); white-space: nowrap;
}
.div-kopf .div-zahl { margin-left: 0; }

.u-tage { display: inline-flex; gap: .2rem; margin-left: .5rem; }
.u-tage button {
    padding: .1rem .45rem; font-size: 10px; border-radius: 999px;
    background: var(--karte2); border: 1px solid var(--rand);
    color: var(--grau); cursor: pointer; white-space: nowrap;
}
.u-tage button:hover { color: var(--hell); border-color: var(--randhell); }
.u-tage button.an {
    color: var(--goldhell); border-color: rgba(201,164,92,.45);
    background: rgba(201,164,92,.12);
}


/* ---- Kennzahlen-Tafel einer Unit ------------------------------------ */

.u-kpi table { font-size: 12px; }
.u-kpi th { white-space: nowrap; }
.u-kpi th.klickbar { cursor: pointer; user-select: none; }
.u-kpi th.klickbar:hover { color: var(--hell); }
.u-kpi th.sortiert { color: var(--goldhell); }
/* Nichts passiert im Zeitraum: blasser, aber da. */
.u-kpi th.leer { opacity: .45; }
/* Zahlen rechts und untereinander - eine Spalte, die man vergleichen
   soll, muss auch vergleichbar aussehen. Der Name bleibt links. */
.u-kpi td:not(:nth-child(2)), .u-kpi th:not(:nth-child(2)) {
    text-align: right; font-variant-numeric: tabular-nums;
}
.u-kpi td:first-child, .u-kpi th:first-child { text-align: right; }
.u-kpi td b { color: var(--goldhell); font-weight: 600; }
.u-kpi tr.ic td b.klickbar { color: var(--hell); }
.u-kpi tbody td .stumm { opacity: .5; }
.u-kpi tfoot td {
    border-top: 1px solid var(--randhell); color: var(--grau);
    font-weight: 600; font-variant-numeric: tabular-nums;
}
.u-kpi .etikett { font-size: 9.5px; padding: 0 .3rem; }


/* ---- "Im Spiel heisst du anders" ------------------------------------ */

/* Steht neben dem eigenen Namen im Kopf - da, wo man ohnehin hinsieht,
   wenn es um den eigenen Namen geht. Er pulsiert leise: ein Band ueber
   die ganze Seite ist die Lautstaerke, die 11-99 verdient, und sonst
   nichts. */
.ich-neuname {
    display: inline-flex; align-items: center; gap: .3rem; flex: none;
    padding: .25rem .55rem; border-radius: 999px; cursor: pointer;
    font-size: 11px; font-weight: 600; white-space: nowrap;
    color: var(--goldhell); background: rgba(201,164,92,.14);
    border: 1px solid rgba(201,164,92,.5);
    animation: neuname-puls 2.6s ease-in-out infinite;
}
.ich-neuname:hover {
    background: rgba(201,164,92,.24); border-color: var(--gold);
    animation: none;
}
.ich-neuname span { font-size: 12px; }
@keyframes neuname-puls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,164,92,.35); }
    50%      { box-shadow: 0 0 0 4px rgba(201,164,92,0); }
}
/* Wer die Bewegung nicht mag oder nicht vertraegt, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
    .ich-neuname { animation: none; }
}

.neuname { color: var(--goldhell); }


/* Der Stift hinter dem eigenen Namen im Profil - leise, bis man
   darauf zeigt. Er soll da sein, wenn man ihn sucht, und nicht
   auffallen, wenn nicht. */
.mp-stift {
    padding: 0 .35rem; font-size: 13px; line-height: 1;
    background: none; border: 0; cursor: pointer;
    color: var(--grau); vertical-align: middle;
}
.mp-stift:hover { color: var(--goldhell); }


/* ---- Command Palette (Strg+K) --------------------------------------- */

/* z-index 130: ueber dem Notrufband (120), weil sie gerade ausdruecklich
   geoeffnet wurde - und unter dem Tipp (9999). */
/*  Justin: "beim strg und f den hintergrund blurren".

    Vorher lag hier nur ein Dunkelschleier, und dahinter blieb die
    Leitstelle scharf lesbar - genau deshalb springt das Auge beim Tippen
    in die Tabelle dahinter.

    Die Unschaerfe bleibt AUCH bei bewegung=sparsam stehen, anders als
    bei den Nachbarn weiter unten. Jene Regel gilt der Leitstelle:
    Flaechen, die sich im Takt neu zeichnen, mit einer Unschaerfe
    darunter. Die Palette zeichnet sich nicht im Takt neu, sie steht
    still - und sparsam ist die VOREINSTELLUNG, hier abzuschalten hiesse
    also, die Bitte fuer fast jeden wirkungslos zu machen.

    Wer backdrop-filter nicht kann, sieht den Schleier wie bisher; damit
    er dort allein genug traegt, wird er in dem Fall etwas dichter. */
.palette {
    position: fixed; inset: 0; z-index: 130;
    display: none; justify-content: center;
    padding: 12vh 1rem 1rem;
    background: rgba(5, 8, 14, .66);
    opacity: 0;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .palette {
        background: rgba(5, 8, 14, .5);
        backdrop-filter: blur(7px) saturate(120%);
        -webkit-backdrop-filter: blur(7px) saturate(120%);
    }
}
.palette.da { display: flex; opacity: 1; }

.pal-kasten {
    width: min(680px, 100%); max-height: min(62vh, 560px);
    display: flex; flex-direction: column;
    background: var(--karte); border: 1px solid var(--randhell);
    border-radius: 14px; box-shadow: var(--schatten);
    overflow: hidden;
}

.pal-kopf {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem .85rem; border-bottom: 1px solid var(--rand);
    flex: none;
}
.pal-lupe { width: 18px; height: 18px; color: var(--gold); flex: none; }
.pal-kopf input {
    flex: 1; min-width: 0; border: 0; background: none; padding: 0;
    color: var(--hell); font-size: 15px; outline: none;
}
.pal-kopf input::placeholder { color: var(--grau); }
.pal-zu {
    flex: none; width: 26px; height: 26px; padding: 0; border-radius: 7px;
    background: none; border: 0; color: var(--grau); cursor: pointer;
}
.pal-zu:hover { color: var(--hell); background: var(--karte2); }

.pal-liste { flex: 1; overflow-y: auto; padding: .35rem; }
.pal-gruppe {
    display: flex; align-items: baseline; gap: .3rem;
    padding: .55rem .55rem .25rem; font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--grau);
}
.pal-gruppe i { margin-left: auto; font-style: normal; opacity: .7;
    letter-spacing: 0; text-transform: none; font-size: 10.5px; }

.pal-zeile {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .55rem; border-radius: 9px; cursor: pointer;
}
/* Der Balken folgt der Tastatur UND der Maus - Enter nimmt immer das,
   was hervorgehoben ist. Zwei verschiedene Hervorhebungen (Hover und
   Auswahl) waeren an dieser Stelle eine Falle. */
.pal-zeile.an { background: var(--karte2); }
.pal-zeile.an .pal-pfeil { opacity: .8; }
.pal-zeichen { flex: none; width: 20px; text-align: center; font-size: 14px; }
.pal-text { flex: 1; min-width: 0; }
.pal-text b {
    display: block; color: var(--hell); font-size: 13px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pal-text i {
    display: block; font-style: normal; font-size: 11.5px; color: var(--grau);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pal-text mark {
    background: rgba(201, 164, 92, .28); color: var(--goldhell);
    border-radius: 3px; padding: 0 1px;
}
.pal-pfeil { flex: none; color: var(--gold); font-size: 12px; opacity: 0; }
.pal-liste .leer { padding: 1.6rem 1rem; }

.pal-fuss {
    flex: none; display: flex; gap: 1rem; justify-content: center;
    padding: .5rem; border-top: 1px solid var(--rand);
    font-size: 10.5px; color: var(--grau); background: var(--flaeche);
}
/* Die Herkunft rechts in der Fusszeile - sie soll die drei Hinweise
   links nicht auseinanderschieben. */
.pal-fuss .rechts { margin-left: auto; }

.pal-fuss kbd {
    display: inline-block; min-width: 16px; padding: 0 .25rem; margin-right: .2rem;
    border: 1px solid var(--rand); border-bottom-width: 2px; border-radius: 4px;
    background: var(--karte2); color: var(--text);
    font-family: inherit; font-size: 10px; text-align: center;
}

/* Die Lupe im Kopf - sieht aus wie die Nachbarknoepfe. */
#such-knopf svg { width: 16px; height: 16px; }

/* ---- Bewegung: kurz, und nur wenn erlaubt ---- */
html[data-bewegung="voll"] .palette {
    transition: opacity .11s ease;
    backdrop-filter: blur(3px);
}
html[data-bewegung="voll"] .palette .pal-kasten {
    transition: transform .11s ease;
    transform: translateY(-6px);
}
html[data-bewegung="voll"] .palette.da .pal-kasten { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .palette, .palette .pal-kasten { transition: none !important;
        transform: none !important; backdrop-filter: none !important; }
}

/* ---- Handy: Vollbild-Blatt statt schwebendem Kasten ---- */
html[data-geraet="handy"] .palette { padding: 0; }
html[data-geraet="handy"] .pal-kasten {
    width: 100%; max-height: none; height: 100%;
    border-radius: 0; border: 0;
    padding-top: env(safe-area-inset-top);
}
html[data-geraet="handy"] .pal-kopf { padding: .9rem 1rem; }
html[data-geraet="handy"] .pal-kopf input { font-size: 16px; }
html[data-geraet="handy"] .pal-zeile { padding: .7rem .6rem; min-height: 52px; }
html[data-geraet="handy"] .pal-text b { font-size: 14px; }
/* Ohne Tastatur sind Tastenhinweise nur Platzverbrauch. */
html[data-geraet="handy"] .pal-fuss { display: none; }


/* ---- Postfach: Glocke, Zaehler, Klapptafel -------------------------- */

#post-knopf { position: relative; }
#post-knopf svg { width: 17px; height: 17px; }
#post-knopf.hat-post { color: var(--goldhell); }
.post-zahl {
    position: absolute; top: -3px; right: -4px; min-width: 15px; height: 15px;
    padding: 0 3px; border-radius: 999px;
    background: var(--rot); color: #fff;
    font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
    border: 1px solid var(--grund);
}

/* z-index 100: ueber der Leiste (50) und dem Popmenue (80), unter dem
   Notrufband (120) - ein 11-99 ist wichtiger als das Postfach. */
.postfach {
    position: fixed; z-index: 100; width: 380px; max-width: calc(100vw - 16px);
    max-height: min(70vh, 560px); display: flex; flex-direction: column;
    background: var(--karte); border: 1px solid var(--randhell);
    border-radius: 12px; box-shadow: var(--schatten); overflow: hidden;
}
.po-kopf {
    display: flex; align-items: center; gap: .5rem; flex: none;
    padding: .6rem .7rem; border-bottom: 1px solid var(--rand);
}
.po-kopf b { flex: 1; color: var(--hell); font-size: 13px; }
.po-zu {
    width: 24px; height: 24px; padding: 0; border: 0; background: none;
    color: var(--grau); cursor: pointer; border-radius: 6px; flex: none;
}
.po-zu:hover { color: var(--hell); background: var(--karte2); }
.po-siebe { flex: none; padding: .45rem .6rem; gap: .25rem; }
.po-siebe button { font-size: 11px; }

.po-liste { flex: 1; overflow-y: auto; padding: .25rem .35rem .5rem; }
.po-zeile {
    position: relative;   /* Traeger fuer den Ungelesen-Streifen */
    display: flex; align-items: flex-start; gap: .5rem;
    padding: .5rem .45rem; border-radius: 9px; cursor: pointer;
}
.po-zeile:hover { background: var(--karte2); }
/* Ungelesen wird nicht durch Fettschrift markiert, sondern durch einen
   Streifen - Fettschrift in einer Liste, die zur Haelfte fett ist,
   sieht aus wie ein Fehler. */
.po-zeile.neu { background: rgba(201,164,92,.06); }
.po-zeile.neu::before {
    content: ''; position: absolute; left: 0; top: .55rem;
    width: 2px; height: 1.4rem; border-radius: 2px; background: var(--gold);
}
.po-punkt {
    flex: none; width: 7px; height: 7px; margin-top: .38rem;
    border-radius: 50%; background: var(--grau);
}
.po-punkt.gruen { background: var(--gruen); }
.po-punkt.gelb  { background: var(--gelb); }
.po-punkt.rot   { background: var(--rot); }
.po-punkt.blau  { background: var(--blau); }
.po-text { flex: 1; min-width: 0; }
.po-text b {
    display: block; color: var(--hell); font-size: 12.5px; font-weight: 600;
    line-height: 1.35;
}
.po-text i {
    display: block; font-style: normal; font-size: 11.5px; color: var(--text);
    line-height: 1.4; margin-top: .1rem;
}
.po-fuss { display: block; font-size: 10.5px; color: var(--grau); margin-top: .2rem; }
.po-weg, .po-stumm {
    flex: none; width: 22px; height: 22px; padding: 0; border: 0;
    background: none; color: var(--grau); cursor: pointer;
    border-radius: 6px; font-size: 11px; opacity: 0;
}
.po-zeile:hover .po-weg, .po-zeile:hover .po-stumm { opacity: 1; }
.po-weg:hover { color: var(--rot); background: var(--rotdun); }
.po-stumm:hover { color: var(--goldhell); background: var(--karte); }

/* Am Finger: volle Breite unten, grosse Zeilen, Knoepfe immer sichtbar
   (es gibt kein Hover). */
html[data-geraet="handy"] .postfach {
    left: 8px !important; right: 8px; width: auto;
    top: auto !important; bottom: calc(68px + env(safe-area-inset-bottom));
    max-height: 70vh;
}
html[data-geraet="handy"] .po-zeile { padding: .7rem .5rem; }
html[data-geraet="handy"] .po-weg,
html[data-geraet="handy"] .po-stumm { opacity: .6; width: 30px; height: 30px; }


/* ---- Wen markieren? Die Ping-Auswahl im Ankuendigen-Dialog ----------- */
/*  Justin: "auch auszuwaehlen wer markiert wird". Marken oben, Suche in
    der Mitte, Haken unten - in dieser Reihenfolge, weil die Frage "wen
    pinge ich gerade an?" vor "was gibt es noch?" kommt. */

.pingwahl { display: flex; flex-direction: column; gap: .35rem; }

.pw-marken {
    display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
    min-height: 26px;
}
.pw-marke {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .16rem .3rem .16rem .45rem; border-radius: 999px;
    background: var(--blaudun); color: #9ec7ef; border: 1px solid #1e3d61;
    font-size: 11.5px; line-height: 1.3; max-width: 100%;
}
.pw-marke > button {
    all: unset; cursor: pointer; width: 15px; height: 15px;
    display: grid; place-items: center; border-radius: 999px;
    color: #9ec7ef; font-size: 13px; line-height: 1; flex: none;
}
.pw-marke > button:hover { background: #1e3d61; color: var(--hell); }

.pw-liste {
    /* Feste Hoehe, eigener Rollbalken: sonst schiebt eine Liste mit
       zweihundert Zeilen den Absenden-Knopf aus der Schublade. */
    max-height: 210px; overflow-y: auto;
    border: 1px solid var(--rand); border-radius: 8px;
    padding: .2rem; background: var(--karte2);
}
.pw-liste .div-opt { padding: .28rem .4rem; }
.pw-kopf {
    font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--grau); padding: .45rem .4rem .2rem;
}
.pw-kopf:first-child { padding-top: .2rem; }
.pw-fuss { padding: .4rem; font-size: 11.5px; color: var(--grau); }

/* ---- Wohin/Kanal: eine Liste wie in Discord, kein <select> ---------- */

.zielwahl {
    max-height: 220px; overflow-y: auto;
    border: 1px solid var(--rand); border-radius: 8px;
    padding: .2rem; background: var(--karte2);
}
.zw-kopf {
    font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--grau); padding: .45rem .4rem .2rem;
}
.zw-kopf:first-child { padding-top: .2rem; }
.zw-zeile {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .32rem .5rem; border-radius: 6px; border: none;
    background: transparent; color: var(--hell); font-size: 13px;
    text-align: left; cursor: pointer;
}
.zw-zeile:hover { background: var(--karte); }
.zw-zeile.an { background: rgba(201,164,92,.14); color: var(--goldhell); }
.zw-raute {
    width: 16px; flex: none; text-align: center; font-weight: 600;
    color: var(--grau);
}
.zw-zeile.an .zw-raute { color: var(--goldhell); }
.zw-name {
    flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zw-fehlt {
    flex: none; font-size: 10.5px; color: var(--grau);
    border: 1px solid var(--rand); border-radius: 999px; padding: .05rem .4rem;
}

/* ---- Geplante Ankuendigungen, im selben Dialog verwaltbar ------------ */

.ank-geplant { margin-top: .7rem; display: flex; flex-direction: column; gap: .3rem; }
.ank-geplant-zeile {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .35rem .55rem; border: 1px solid var(--rand); border-radius: 8px;
    background: var(--karte2); font-size: 12px;
}

/* ---- Die drei Marken, die freitext() dazubekommen hat --------------- */

.freitext h4, .freitext h5, .freitext h6 {
    margin: .8rem 0 .35rem; color: var(--hell); font-weight: 600;
    line-height: 1.3;
}
.freitext > h4:first-child, .freitext > h5:first-child,
.freitext > h6:first-child { margin-top: 0; }
.freitext h4 { font-size: 15px; }
.freitext h5 { font-size: 13.5px; }
.freitext h6 { font-size: 12.5px; color: var(--gold); }
.freitext del { color: var(--grau); }
.freitext u { text-decoration-color: var(--gold); }

/* ---- Meldewege (Verwaltung) ------------------------------------------ */
/*  Neun Zeilen, vier Spalten. Die dritte ist die wichtige: eine Kanal-Id
    beantwortet nicht, wem eine Meldung zusteht - "125 von 125 lesen mit"
    beantwortet es. Deshalb steht sie nicht am Rand, sondern mittendrin. */

.mw { display: flex; flex-direction: column; gap: .15rem; }
.mw-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.5fr) minmax(0, 1fr) auto;
    align-items: center; gap: .2rem .7rem;
    padding: .5rem .55rem; border-radius: 8px;
    border: 1px solid transparent; font-size: 12.5px;
}
.mw-zeile:hover { background: var(--karte2); border-color: var(--rand); }
.mw-was { display: flex; flex-direction: column; min-width: 0; }
.mw-was b { color: var(--hell); font-weight: 600; }
.mw-was i {
    font-style: normal; font-size: 11.5px; color: var(--grau);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mw-kanal { min-width: 0; }
.mw-kanal code {
    display: inline-block; max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.mw-leser { display: flex; flex-direction: column; min-width: 0; }
.mw-leser b { color: var(--hell); }
.mw-leser i {
    font-style: normal; font-size: 11px; color: var(--grau);
    border-bottom: 1px dotted var(--randhell); align-self: flex-start;
    cursor: help;
}
/* Die Warnung laeuft ueber alle Spalten - sie gehoert unter die Zeile,
   auf die sie sich bezieht, und nicht in eine davon. */
.mw-warn {
    grid-column: 1 / -1; font-size: 11.5px; color: #e79992;
    padding-top: .15rem;
}

html[data-geraet="handy"] .mw-zeile {
    grid-template-columns: 1fr auto; row-gap: .3rem;
}
html[data-geraet="handy"] .mw-kanal,
html[data-geraet="handy"] .mw-leser { grid-column: 1 / -1; }

/* ---- Mehrere Namen in einem Feld (IA-Bericht) ------------------------ */
/*  Justin: "IA multiple leute auswählen". Marken oben, darunter wählen
    ODER tippen - eine Beschwerde kann sich gegen einen Bürger richten,
    der kein Konto hat. */

.namenfeld { display: flex; flex-direction: column; gap: .4rem; }
.nf-marken {
    display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
    min-height: 24px;
}
.nf-marke {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .18rem .32rem .18rem .5rem; border-radius: 999px;
    background: var(--blaudun); color: #9ec7ef; border: 1px solid #1e3d61;
    font-size: 12px; line-height: 1.3; max-width: 100%;
}
.nf-marke > button {
    all: unset; cursor: pointer; width: 16px; height: 16px;
    display: grid; place-items: center; border-radius: 999px;
    color: #9ec7ef; font-size: 13px; line-height: 1; flex: none;
}
.nf-marke > button:hover { background: #1e3d61; color: var(--hell); }
/*  Die Auswahl ist EIGEN gebaut und keine datalist. Justin: "manche
    sehen auch nur recruit etc" - bei einer datalist entscheidet der
    Browser, was von Wert und Etikett zu sehen ist, und in Safari steht
    dann tatsächlich nur "#351 · Recruit" ohne Namen. Über die
    Darstellung lässt sich dort nichts sagen; hier schon. */
.nf-such { position: relative; display: flex; gap: .4rem; align-items: center; }
.nf-such .nf-neu { flex: 1; min-width: 0; margin: 0; }
.nf-such .nf-dazu { flex: none; }

.nf-liste {
    position: absolute; left: 0; right: 0; top: calc(100% + .3rem);
    z-index: 20; max-height: 264px; overflow-y: auto;
    background: var(--karte); border: 1px solid var(--randhell);
    border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.45);
    padding: .25rem;
}
/*  Drei Spalten: Name, Nummer, Rang. Der Name trägt, die anderen beiden
    unterscheiden - bei zwei ähnlichen Namen ist die Nummer der
    Unterschied. */
.nf-zeile {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline; gap: .1rem .6rem;
    padding: .38rem .5rem; border-radius: 7px; cursor: pointer;
    font-size: 12.5px;
}
.nf-zeile.an, .nf-zeile:hover { background: var(--karte2); }
.nf-name {
    color: var(--hell); font-weight: 600; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nf-nr {
    font-size: 11px; color: var(--gold);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.nf-rang { font-size: 11px; color: var(--grau); white-space: nowrap; }
.nf-fuss { padding: .5rem; font-size: 11.5px; color: var(--grau); }

html[data-geraet="handy"] .nf-liste { max-height: 208px; }

/* ---- Die Betroffenen im geöffneten Bericht --------------------------- */
/*  Jede Marke führt in die Personalakte, wenn ein Konto dahintersteht.
    Wer keines hat, steht als bloße Marke da: ein Zeiger, der nichts tut,
    ist schlimmer als keiner. */

.ia-wen { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.ia-kopf {
    display: inline-flex; align-items: baseline; gap: .3rem;
    padding: .1rem .45rem; border-radius: 7px;
    background: var(--karte2); border: 1px solid var(--rand);
}
.ia-kopf b { color: var(--hell); font-weight: 600; }
.ia-kopf i { font-style: normal; font-size: 11px; color: var(--grau); }
.ia-kopf.klickbar { cursor: pointer; }
.ia-kopf.klickbar:hover { border-color: var(--gold); }

/* ---- Die IA-Vorgänge an einer Person --------------------------------- */

.ia-person { display: flex; flex-direction: column; gap: .2rem; }
.iap-zeile {
    display: flex; align-items: center; gap: .55rem;
    padding: .45rem .5rem; border-radius: 8px;
    border: 1px solid transparent; font-size: 12.5px;
}
.iap-zeile.klickbar { cursor: pointer; }
.iap-zeile.klickbar:hover { background: var(--karte2); border-color: var(--rand); }
.iap-was { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.iap-was b {
    color: var(--hell); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iap-was i {
    font-style: normal; font-size: 11px; color: var(--grau);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Der Titel im Kopf der Schublade - kleiner als die Nummer, damit die
   Zeile eine Rangfolge hat und nicht zwei gleich laute Hälften. */
.s-untertitel {
    font-weight: 500; color: var(--text); font-size: 13px;
}

/* ---- Der Farbwähler --------------------------------------------------- */
/*  Justin: "color picker auch in eigenem design und flüssiger".

    Gerechnet wird in HSV: das Feld trägt Sättigung (waagerecht) und
    Helligkeit (senkrecht), das Band darunter den Farbton. Genau diese
    drei Achsen - in RGB wären es drei Schieber, mit denen niemand eine
    Farbe findet, die er im Kopf hat.

    z-index 200: über der Schublade (60) und über der Palette (130), denn
    er wird ausdrücklich aus einer von beiden heraus geöffnet. */

.farbwaehler {
    position: fixed; z-index: 200; width: 232px;
    padding: .55rem; border-radius: 12px;
    background: var(--karte); border: 1px solid var(--randhell);
    box-shadow: 0 14px 34px rgba(0,0,0,.5);
    display: flex; flex-direction: column; gap: .5rem;
    touch-action: none;
}

.fw-feld {
    position: relative; height: 132px; border-radius: 8px; cursor: crosshair;
    /* Erst Schwarz von unten, dann Weiß von links über den reinen Ton -
       die Reihenfolge ist die des HSV-Modells und nicht beliebig. */
    background:
        linear-gradient(to top, #000, transparent),
        linear-gradient(to right, #fff, transparent),
        var(--ton, #f00);
    border: 1px solid var(--rand);
}
.fw-punkt {
    position: absolute; width: 13px; height: 13px; margin: -7px 0 0 -7px;
    border-radius: 50%; border: 2px solid #fff; pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.5);
}

.fw-ton {
    position: relative; height: 14px; border-radius: 7px; cursor: ew-resize;
    border: 1px solid var(--rand);
    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%,
        #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.fw-schieber {
    position: absolute; top: 50%; width: 12px; height: 12px;
    margin: -6px 0 0 -6px; border-radius: 50%;
    border: 2px solid #fff; background: transparent; pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,.5);
}

.fw-fuss { display: flex; align-items: center; gap: .45rem; }
.fw-probe {
    width: 22px; height: 22px; border-radius: 6px; flex: none;
    border: 1px solid var(--randhell);
}
.fw-hex {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px; color: var(--text); text-transform: lowercase;
}

/*  Die Hausfarben. Man will meistens die - nicht irgendein Lila aus dem
    Regenbogen. */
.fw-griffe { display: flex; gap: .3rem; flex-wrap: wrap; }
.fw-griff {
    all: unset; width: 22px; height: 22px; border-radius: 6px;
    cursor: pointer; background: var(--f);
    border: 1px solid var(--randhell); box-sizing: border-box;
}
.fw-griff:hover { border-color: var(--gold); }

/* ---- Der Griff ins Gastprofil ---------------------------------------- */
/*  Justin: "wo ich beim drüberhovern auch auf zum profil kann".

    Sichtbar beim Drüberfahren, nicht dauerhaft: auf dem Brett stehen zu
    Spitzenzeiten dreißig Zeilen, und dreißig Knöpfe, die niemand drückt,
    sind dreißig Ablenkungen. Am Finger - wo es kein Drüberfahren gibt -
    steht er immer da. */

/*  Der Griff sitzt an der Pool-Kachel und ist ein Doppelklick, kein
    Knopf: die Kachel ist 228 Pixel breit und trägt schon Name, Nummer
    und Marken - ein zehntes Element darauf wäre keins mehr. Sichtbar
    wird die Möglichkeit beim Drüberfahren, über den Zeiger und einen
    Hauch Kante. */
.pool-chip[data-gprofil], .crew[data-gprofil] { cursor: pointer; }
.pool-chip[data-gprofil]:hover, .crew[data-gprofil]:hover {
    border-color: var(--uf, var(--gold));
    box-shadow: 0 0 0 1px var(--uf, var(--gold)) inset;
}


/* ---- Das Dienstblatt ---------------------------------------------------
   Funkcodes, Status, Kanäle, Rechte - alles auf einen Blick, erreichbar
   von jeder Seite über den Knopf unten rechts.

   z-index 105/110: über der Leiste (50), dem Mehr-Blatt (59), dem
   Fenster (70) und dem Postfach (100) - aber UNTER dem Notrufband (120)
   und der Palette (130). Ein 11-99 muss auch dann zu sehen sein, wenn
   gerade jemand einen Funkcode nachschlägt. */
#db-knopf {
    /* --sar: die Aussparung rechts. Quer gehalten sind das am iPhone 59
       Pixel, und ohne den Zuschlag liegt der Knopf darin. */
    position: fixed; right: calc(1.1rem + var(--sar)); bottom: 1.1rem;
    z-index: 105;
    width: 46px; height: 46px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; cursor: pointer;
    color: var(--goldhell);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gold) 22%, var(--flaeche)), var(--flaeche));
    border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--rand));
    box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
}
#db-knopf:hover {
    color: #fff;
    border-color: var(--gold);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gold) 34%, var(--flaeche)), var(--flaeche));
}
#db-knopf.verborgen { display: none; }

/* Die Knoepfe darueber: dasselbe Aussehen, je eine Etage hoeher.
   Justin, 29.08.: "einen extra popup unten rechts mit dem link"
   (Aktensystem), und 31.08. derselbe Satz fuer den Grenzposten der Navy.

   EINE REGEL FUER ALLE, JE KNOPF NUR DIE HOEHE: drei abgeschriebene
   Flaechen laufen beim naechsten Farbwechsel auseinander. */
#akten-knopf, #navy-knopf {
    position: fixed; right: calc(1.1rem + var(--sar)); z-index: 105;
    width: 46px; height: 46px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; cursor: pointer; text-decoration: none;
    color: var(--goldhell);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gold) 22%, var(--flaeche)), var(--flaeche));
    border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--rand));
    box-shadow: 0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
}
/* Je eine Knopfhoehe plus eine Handbreit ueber dem Vorgaenger -
   ausgeschrieben und nicht gerechnet, damit die Stapelung dasteht. */
#akten-knopf { bottom: calc(1.1rem + 46px + .55rem); }
#navy-knopf  { bottom: calc(1.1rem + 46px + .55rem + 46px + .55rem); }
#akten-knopf:hover, #navy-knopf:hover {
    color: #fff;
    border-color: var(--gold);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gold) 34%, var(--flaeche)), var(--flaeche));
}
/* Der kleine Pfeil sagt vor dem Klick, dass es hier aus dem Panel
   hinausgeht. Alles andere unten rechts bleibt drin. */
#akten-knopf::after, #navy-knopf::after {
    content: "\2197"; position: absolute; top: 3px; right: 5px;
    font-size: 9px; line-height: 1; color: var(--grau);
}
#akten-knopf:hover::after, #navy-knopf:hover::after { color: var(--goldhell); }

/* Vom Betrachter selbst weggeschaltet (Dialog "Leiste & Knoepfe").
   ABSICHTLICH EINE ANDERE KLASSE ALS `verborgen`: mit der arbeitet das
   Dienstblatt selbst (auf = Knopf weg, zu = Knopf da), ein gemeinsames
   Merkmal haette das Ausblenden beim naechsten Schliessen aufgehoben. */
#db-knopf.vom-nutzer-aus, #akten-knopf.vom-nutzer-aus,
#navy-knopf.vom-nutzer-aus { display: none; }

#dienstblatt {
    position: fixed; inset: 0; z-index: 110;
    display: flex; flex-direction: column;
    background: #070b12;
}
#dienstblatt.verborgen { display: none; }
.db-kopf {
    flex: none; display: flex; align-items: center; gap: .75rem;
    padding: .6rem 1rem; background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
}
.db-marke {
    width: 30px; height: 30px; flex: none; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; letter-spacing: .04em;
    color: var(--goldhell);
    background: color-mix(in srgb, var(--gold) 16%, transparent);
    border: 1px solid var(--golddun);
}
.db-titel { display: flex; flex-direction: column; line-height: 1.15; }
.db-titel b {
    font-size: 13px; color: var(--hell); letter-spacing: .07em;
    text-transform: uppercase;
}
.db-titel span {
    font-size: 9.5px; color: var(--grau); letter-spacing: .16em;
    text-transform: uppercase;
}
.db-kopf .zu { margin-left: auto; }

.db-flaeche {
    flex: 1; overflow-y: auto; padding: 1rem;
    display: grid; gap: .9rem; align-items: start;
    /* Genau drei, nicht auto-fit: bei 1500 px legte auto-fit eine
       vierte, leere Spur an und machte die Karten schmaler als noetig. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1080px) {
    .db-flaeche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .db-flaeche { grid-template-columns: minmax(0, 1fr); }
}
.db-spalte { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }

.db-karte {
    border: 1px solid var(--rand); border-radius: 12px;
    background: var(--karte); overflow: hidden;
    padding: .75rem .85rem .85rem;
}
.db-karte h3 {
    margin: 0 0 .55rem; font-size: 9.5px; font-weight: 700;
    letter-spacing: .17em; text-transform: uppercase; color: var(--grau);
}
.db-karte h4 {
    margin: .9rem 0 .4rem; font-size: 9.5px; font-weight: 700;
    letter-spacing: .17em; text-transform: uppercase; color: var(--grau);
}

/* Eine Zeile: Kennung links, Bedeutung rechts. Feste Spaltenbreite,
   damit die Bedeutungen untereinander stehen und das Auge sie als
   Liste liest statt als Fließtext. */
.db-liste { display: flex; flex-direction: column; }
.db-zeile {
    display: grid; grid-template-columns: 5.6rem minmax(0, 1fr);
    gap: .6rem; align-items: baseline;
    padding: .34rem .45rem; border-radius: 6px;
    font-size: 12.5px;
}
.db-zeile + .db-zeile { border-top: 1px solid var(--rand); border-radius: 0; }
.db-zeile > b {
    font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--goldhell); letter-spacing: .01em;
}
.db-zeile > span { color: var(--text); overflow-wrap: anywhere; }

/* Die zwei Stufen, die im Funk anders klingen müssen. */
.db-zeile.warn { background: color-mix(in srgb, #e7a95e 12%, transparent); }
.db-zeile.warn > b { color: #e7a95e; }
.db-zeile.not { background: color-mix(in srgb, var(--rot) 14%, transparent); }
.db-zeile.not > b,
.db-zeile.not > span { color: #f0857c; }

/* Statuscodes tragen ihre Farbe als Balken links - so sind sie beim
   Überfliegen auseinanderzuhalten, ohne die Schrift zu verfärben. */
.db-zeile.db-code {
    border-left: 3px solid var(--cf, var(--rand));
    margin-bottom: 3px; border-radius: 6px;
    background: color-mix(in srgb, var(--cf, #7e8899) 8%, transparent);
}
.db-zeile.db-code + .db-zeile.db-code { border-top: 0; }
.db-zeile.db-code > b { color: var(--cf, var(--goldhell)); }

/* Die eigenen drei Kanäle zuerst erkennen: der Rest ist Nachbarschaft. */
.db-zeile.db-funk > b { color: var(--stumm); font-weight: 600; }
.db-zeile.db-funk > span { color: var(--hell); font-weight: 600; }
.db-zeile.db-funk.eigen {
    background: color-mix(in srgb, var(--rot) 13%, transparent);
}
.db-zeile.db-funk.eigen > b,
.db-zeile.db-funk.eigen > span { color: #f0857c; }
.db-zeile.db-funk.frei > b,
.db-zeile.db-funk.frei > span {
    color: var(--stumm); font-style: italic; font-weight: 400;
}

.db-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.db-zahl {
    border: 1px solid var(--rand); border-radius: 10px;
    background: var(--karte2); padding: .6rem .5rem; text-align: center;
}
.db-zahl b {
    display: block; font-size: 17px; font-weight: 700; color: var(--hell);
    font-variant-numeric: tabular-nums; line-height: 1.2;
}
.db-zahl span {
    display: block; margin-top: .2rem; font-size: 9px; color: var(--grau);
    letter-spacing: .1em; text-transform: uppercase;
}

.db-tabelle { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.db-tabelle th {
    text-align: left; font-size: 9px; font-weight: 700; color: var(--grau);
    letter-spacing: .12em; text-transform: uppercase;
    padding: .3rem .45rem; border-bottom: 1px solid var(--rand);
}
.db-tabelle td {
    padding: .38rem .45rem; border-bottom: 1px solid var(--rand);
    color: var(--text); font-variant-numeric: tabular-nums;
}
.db-tabelle tr:last-child td { border-bottom: 0; }
.db-tabelle td b { color: var(--goldhell); font-weight: 600; }

.db-belehrung {
    margin: 0; padding: .1rem 0 .1rem .75rem;
    border-left: 3px solid var(--rot);
    font-size: 12.5px; line-height: 1.6; color: var(--text);
}
/* Zwei Belehrungen, und jede traegt ihren Namen. Ohne Beschriftung waere
   die gefaehrlichste Verwechslung des Blattes moeglich: bei einer
   normalen Festnahme vorlesen, dass kein Anwalt zusteht. */
.db-bel + .db-bel { margin-top: .85rem; }
.db-bel > h4 { margin-top: 0; }
.db-frage {
    margin: .75rem 0 0; font-size: 12.5px; font-weight: 700;
    color: #f0857c;
}

.db-karte-bild {
    display: block; width: 100%; height: auto; border-radius: 8px;
    border: 1px solid var(--rand); background: var(--karte2);
}
.db-fuss {
    margin: .45rem 0 0; font-size: 10.5px; color: var(--stumm);
}

/* Auf dem Handy sitzt unten die Leiste - der Knopf muss darüber, sonst
   liegt er auf "Mehr". Dieselbe Rechnung wie bei .zuweis und #meldung. */
html[data-geraet="handy"] #db-knopf {
    right: calc(.8rem + var(--sar));
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: 42px; height: 42px; border-radius: 12px;
}
html[data-geraet="handy"] #akten-knopf {
    right: calc(.8rem + var(--sar));
    bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 42px + .5rem);
    width: 42px; height: 42px; border-radius: 12px;
}
/* Der dritte sitzt eine Etage darueber. --sab statt env(): Chrome kann
   env() nicht emulieren, eine Regel damit ist fuer die Handy-Pruefung
   unsichtbar - der Wert ist derselbe, :root fuellt --sab aus env(). */
html[data-geraet="handy"] #navy-knopf {
    right: calc(.8rem + var(--sar));
    bottom: calc(76px + var(--sab) + 42px + .5rem + 42px + .5rem);
    width: 42px; height: 42px; border-radius: 12px;
}
html[data-geraet="handy"] .db-flaeche { padding: .7rem; gap: .7rem; }
@media (max-width: 620px) {
    .db-zeile { grid-template-columns: 4.8rem minmax(0, 1fr); font-size: 12px; }
}

/* ---- Eine Telefonnummer, wie man sie liest --------------------------- */
/*  Justin: "auch telefonnummer etc bitte schön".

    Eine Nummer ist zum Ablesen und Abtippen da - im Spiel sitzt jemand
    davor und gibt sieben Ziffern in ein Handy ein. Feste Zeichenbreite,
    damit 1 und 7 gleich breit sind und man beim Abtippen die Stelle
    nicht verliert; ein Hauch größer als der Fließtext, weil man sie aus
    zwei Metern Abstand liest. Das Zeichen daneben sagt, dass ein Griff
    genügt. */

.tel {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .1rem .4rem; border-radius: 7px; cursor: pointer;
    background: var(--karte2); border: 1px solid var(--rand);
    max-width: 100%;
}
.tel b {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 13px; letter-spacing: .04em; color: var(--hell);
    font-weight: 600; white-space: nowrap;
}
.tel i {
    font-style: normal; font-size: 11px; color: var(--grau);
    opacity: 0; transition: opacity .12s ease;
}
.tel:hover, .tel:focus-visible { border-color: var(--gold); }
.tel:hover i, .tel:focus-visible i { opacity: 1; color: var(--gold); }
.tel:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/*  Am Finger gibt es kein Drüberfahren - dort steht das Zeichen immer. */
html[data-geraet="handy"] .tel i,
html[data-geraet="finger"] .tel i { opacity: .6; }


/* ---- Die grosse Karte -------------------------------------------------
   Leaflet auf einem BILD (CRS.Simple), nicht auf der Welt. Das Blatt
   fuellt die Ansicht ganz aus - eine Karte, die man scrollen muss, um
   sie zu sehen, ist keine.

   Leaflet bringt eigene Farben mit (weisser Grund, blaue Kacheln). Was
   hier steht, holt es in unser Blatt zurueck. */
#a-karte.an { display: flex; }
.kt-rahmen {
    display: flex; flex-direction: column; gap: .6rem;
    /* Die Kopfleiste des Bereichs steht darueber - ohne diese Rechnung
       haengt die Karte unten heraus und der Rand wird zum Scrollbalken. */
    height: calc(100vh - 132px); min-height: 420px; width: 100%;
}
.kt-rahmen:fullscreen { height: 100vh; padding: .6rem; background: var(--grund); }
.kt-mitte { flex: 1; display: flex; gap: .6rem; min-height: 0; }

.kt-leiste {
    flex: none; display: flex; align-items: center; gap: .8rem;
    flex-wrap: wrap;
    padding: .5rem .6rem; border-radius: 12px;
    background: var(--karte); border: 1px solid var(--rand);
}
.kt-gruppe { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.kt-gruppe.kt-rechts { margin-left: auto; }
.kt-leiste button.an {
    border-color: var(--gold); color: var(--goldhell);
    background: color-mix(in srgb, var(--gold) 16%, transparent);
}
.kt-vorgabe {
    padding-left: .8rem; border-left: 1px solid var(--rand);
    font-size: 11px; color: var(--grau);
}
.kt-vorgabe label { display: flex; align-items: center; gap: .3rem; }
.kt-vorgabe input[type=color] {
    width: 30px; height: 26px; padding: 0; border-radius: 6px;
    border: 1px solid var(--rand); background: none; cursor: pointer;
}
.kt-vorgabe input[type=number] { width: 3.6rem; }
/* Derselbe Grund wie unten bei .kt-haken: ohne feste Breite nimmt der
   Haken die volle Zeile und schiebt "Kurven" ueber das Nachbarfeld. */
.kt-vorgabe input[type=checkbox] {
    flex: none; margin: 0; width: 15px; height: 15px; min-width: 0;
    min-height: 0; padding: 0;
}
.kt-vorgabe .kt-text input { width: 8rem; }
.kt-frei {
    font-size: 11px; font-weight: 700; color: #6cc08a;
    padding: .2rem .5rem; border-radius: 7px;
    border: 1px solid color-mix(in srgb, #6cc08a 40%, transparent);
    background: color-mix(in srgb, #6cc08a 12%, transparent);
}

.kt-flaeche {
    flex: 1; min-width: 0; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--rand);
    /* Der Grund unter dem Kartenbild. Leaflets Vorgabe ist hellgrau und
       blitzt an jedem Rand durch. */
    background: #070b12;
}
.kt-flaeche.zeichnet { cursor: crosshair; }
/* Ueber die Id, nicht ueber die Klasse: leaflet.css wird zur Laufzeit
   nachgeladen und kommt damit NACH stil.css - bei gleicher Spezifitaet
   gewinnt sein "#ddd". Eine Id schlaegt jede Klasse. */
#kt-flaeche.leaflet-container { background: #070b12; font: inherit; }

/* Leaflets Bedienelemente sind hell. Hier stehen sie auf Nachtblau. */
.kt-flaeche .leaflet-bar a,
.db-mini .leaflet-bar a {
    background: var(--karte); color: var(--hell);
    border-bottom-color: var(--rand);
}
.kt-flaeche .leaflet-bar a:hover {
    background: var(--karte2); color: var(--goldhell);
}
.kt-flaeche .leaflet-bar {
    border: 1px solid var(--rand);
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

.kt-seite {
    flex: none; width: 300px; overflow-y: auto;
    border-radius: 12px; border: 1px solid var(--rand);
    background: var(--karte); padding: .7rem .75rem;
}
.kt-seite h3 {
    margin: 0 0 .5rem; font-size: 9.5px; font-weight: 700;
    letter-spacing: .17em; text-transform: uppercase; color: var(--grau);
}
.kt-seite h4 {
    margin: .7rem 0 .3rem; font-size: 10.5px; color: var(--goldhell);
    font-weight: 700; letter-spacing: .04em;
}
.kt-liste-kopf { display: flex; align-items: baseline; justify-content: space-between; }
.kt-gr:first-of-type h4 { margin-top: 0; }

/* Die Gruppenueberschrift ist jetzt ein Schalter. Justin: "Die
   Kategorien einklappbar machen". */
.kt-gr h4 {
    display: flex; align-items: center; gap: .4rem;
    cursor: pointer; user-select: none;
    padding: .2rem .3rem; border-radius: 6px;
}
.kt-gr h4:hover { background: var(--karte2); }
.kt-gr h4 > span { flex: 1; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.kt-gr-pfeil { font-style: normal; font-size: 10px; color: var(--grau);
    width: .8em; flex: none; }
.kt-gr-zahl { font-weight: 600; color: var(--grau); font-size: 10px;
    letter-spacing: 0; flex: none; }

/* Die Ordner-Knoepfe: umbenennen, nur dieser, ausblenden. Schmal, damit
   der Name den Platz behaelt - und erst beim Darueberfahren voll
   sichtbar, ausser der Ordner ist aus. Den Weg zurueck muss man ohne
   Suchen finden. */
.kt-gr-knopf {
    flex: none; margin: 0; padding: 0 .18rem; border: 0; background: none;
    font-size: 11px; line-height: 1; cursor: pointer; opacity: .25;
    color: var(--grau); min-width: 0; min-height: 0;
}
.kt-gr h4:hover .kt-gr-knopf { opacity: 1; }
.kt-gr-knopf:hover { color: var(--goldhell); }
/* Ausgeblendet: durchgestrichen und blass, aber DA - er soll sich
   zurueckholen lassen. */
.kt-gr.ordneraus > h4 > span {
    text-decoration: line-through; color: var(--grau);
}
.kt-gr.ordneraus > h4 { opacity: .75; }
.kt-gr.ordneraus .kt-gr-auge { opacity: 1; }

/* Das Auge nimmt ein Objekt NUR FUER MICH von der Karte. Sichtbar wird
   es beim Darueberfahren - ausser es ist gerade aktiv, denn den Weg
   zurueck muss man ohne Suchen finden. */
.kt-e-auge {
    flex: none; margin: 0; padding: 0 .2rem; border: 0; background: none;
    font-size: 12px; line-height: 1; cursor: pointer; opacity: 0;
    color: var(--grau); min-width: 0; min-height: 0;
}
.kt-eintrag:hover .kt-e-auge, .kt-eintrag.weg .kt-e-auge { opacity: 1; }
.kt-e-auge:hover { color: var(--goldhell); }
/* Weggeklickt sieht anders aus als "fuer alle ausgeblendet" (.aus):
   durchgestrichen statt blass. Zwei Zustaende, zwei Bilder. */
.kt-eintrag.weg > b { text-decoration: line-through; color: var(--grau); }
.kt-e-v { font-style: normal; font-size: 11px; }

/* Die Zeile ueber der Liste: wie viel gerade zurueckgehalten wird. */
.kt-sichtleiste {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    margin: .5rem 0 .2rem; padding: .45rem .55rem; border-radius: 8px;
    background: var(--karte2); border: 1px solid var(--rand);
    font-size: 11.5px; color: var(--grau); line-height: 1.4;
}
.kt-sichtleiste b { color: var(--goldhell); }
.kt-sichtleiste button { margin: 0 0 0 auto; }
.kt-sichtleiste.auf { border-color: var(--gold); }

/* Der Haken "Verdeckt" traegt seinen Nebensatz mit - sonst nimmt jeder
   den falschen von beiden. */
.kt-haken-warn { align-items: flex-start; flex-wrap: wrap; }
.kt-haken-warn i {
    flex: 1 0 100%; font-style: normal; font-size: 10.5px;
    color: var(--grau); padding-left: 1.45rem; margin-top: .15rem;
    line-height: 1.4;
}

.kt-eintrag {
    display: flex; align-items: center; gap: .45rem;
    padding: .32rem .4rem; border-radius: 7px; cursor: pointer;
    font-size: 12.5px;
}
.kt-eintrag:hover { background: var(--karte2); }
.kt-eintrag.aus { opacity: .5; }
.kt-eintrag > b {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-weight: 600; color: var(--text);
}
.kt-e-z {
    width: 20px; text-align: center; flex: none; font-size: 13px;
    color: var(--of, #4d8fd1);
}
.kt-e-k { color: var(--grau); font-style: normal; font-size: 13px; }
.kt-e-a {
    font-style: normal; font-size: 9px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--grau);
}

.kt-hilfe p { font-size: 12px; color: var(--grau); line-height: 1.6; margin: .4rem 0; }
.kt-zaehler b { color: var(--goldhell); }
.kt-knoepfe { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; }
.kt-knoepfe button { margin: 0; }

.kt-b-kopf {
    display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem;
}
.kt-b-kopf > b { font-size: 12.5px; color: var(--goldhell); }
.kt-feld { display: block; margin-bottom: .6rem; }
.kt-feld > span {
    display: block; margin-bottom: .22rem; font-size: 9.5px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--grau);
}
.kt-feld > span b { color: var(--goldhell); letter-spacing: 0; }
.kt-feld input[type=text] { width: 100%; }
.kt-feld input[type=range] { width: 100%; }
.kt-haken {
    display: flex; align-items: center; justify-content: flex-start;
    gap: .45rem; margin-bottom: .5rem;
    font-size: 12px; color: var(--text);
    /* Gegen die allgemeine Formularregel fuer <label>: die stellt den
       Text rechtsbuendig und in Grossbuchstaben - dann steht der Kasten
       links und sein Wort am anderen Ende der Spalte. */
    text-align: left; text-transform: none; letter-spacing: 0;
}
/* NACHGEMESSEN: das Kaestchen war 274 Pixel BREIT und schob seine
   Beschriftung aus der Spalte heraus - die allgemeine Formularregel
   setzt "input { width: 100% }", und die gilt auch fuer einen Haken.
   "flex: none" allein half nichts: das regelt die Verteilung, nicht die
   Breite. */
.kt-haken input[type=checkbox] {
    flex: none; margin: 0; width: 15px; height: 15px; min-width: 0;
    min-height: 0; padding: 0;
}
.kt-nurlesen { padding: .3rem 0 .6rem; }

/* Zeichen und Farben als Raster - eine Auswahl, die man SIEHT, statt
   eines Feldes, in das man ein Emoji tippen muesste. */
.kt-zeichen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.kt-zeichen button {
    margin: 0; padding: .25rem 0; font-size: 15px; line-height: 1.2;
    border-radius: 7px; min-height: 0;
}
.kt-zeichen button.an {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 18%, transparent);
}
.kt-farben { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.kt-farben button {
    width: 22px; height: 22px; padding: 0; margin: 0; min-height: 0;
    border-radius: 50%; background: var(--f);
    border: 2px solid transparent;
}
.kt-farben button.an { border-color: var(--hell); }
.kt-farben input[type=color] {
    width: 26px; height: 22px; padding: 0; border-radius: 6px;
    border: 1px solid var(--rand); background: none; cursor: pointer;
}
.kt-b-fuss { margin-top: .8rem; border-top: 1px solid var(--rand); padding-top: .6rem; }

/* Ein Punkt auf der Karte: Zeichen plus Namensschild. Kein Kasten
   drumherum - das Zeichen IST die Marke. */
.kt-punkt {
    display: flex; flex-direction: column; align-items: center;
    line-height: 1; white-space: nowrap;
}
.kt-punkt .kt-p-z { filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.kt-punkt .kt-p-n {
    margin-top: 2px; font-size: 10px; font-weight: 700;
    color: var(--pf, #eef2f8);
    padding: 1px 5px; border-radius: 5px;
    background: rgba(7,11,18,.78);
    border: 1px solid rgba(255,255,255,.14);
}
.kt-punkt.an .kt-p-z { filter: drop-shadow(0 0 6px var(--gold)); }
.leaflet-marker-icon.kt-punkt { background: none; border: none; }

/* ---- Die kleine Karte im Dienstblatt ---- */
.db-mini {
    height: 260px; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--rand); background: #070b12;
}
#db-mini.leaflet-container { background: #070b12; }
.db-mini-fuss {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-top: .45rem;
}
.db-mini-fuss button { margin: 0; }

/* Auf dem Handy steht die Seitenspalte UNTER der Karte - nebeneinander
   blieben von der Karte 90 Pixel uebrig. */
@media (max-width: 860px) {
    .kt-mitte { flex-direction: column; }
    .kt-flaeche { min-height: 320px; }
    .kt-seite { width: auto; max-height: 40vh; }
    .kt-rahmen { height: auto; min-height: 0; }
}


/* ---- Karte: Name beim Darueberfahren, Regler fuer die Rundung ----
   Leaflets Sprechblase ist weiss mit Pfeil. Hier traegt sie das Blatt. */
.leaflet-tooltip.kt-tip {
    background: rgba(9, 14, 24, .95);
    border: 1px solid var(--randhell, #263048);
    border-radius: 8px; padding: .35rem .55rem;
    color: var(--hell); font: inherit; font-size: 12px; line-height: 1.35;
    box-shadow: 0 8px 22px rgba(0,0,0,.5);
    white-space: nowrap;
}
.leaflet-tooltip.kt-tip b { display: block; font-weight: 700; }
.leaflet-tooltip.kt-tip span {
    display: block; font-size: 10.5px; color: var(--grau);
}
.leaflet-tooltip.kt-tip::before { border-top-color: var(--randhell, #263048); }

/* Der Regler gehoert zu eingeschalteten Kurven. Ist "Kurven" aus, bleibt
   er stehen, aber sichtbar wirkungslos - ihn wegzunehmen liesse die
   Spalte bei jedem Haken springen. */
.kt-nur-glatt { transition: opacity .12s ease-out; }
.kt-nur-glatt.aus { opacity: .35; pointer-events: none; }

/* Die Fangleitung ueber jeder Linie. Unsichtbar, aber treffbar:
   "stroke" statt des voreingestellten "visiblePainted" - sonst fiele
   der Zeiger durch eine Leitung mit Deckkraft 0 hindurch.

   NACHGEMESSEN, warum die kurze Fassung ".kt-fang" nicht reichte:
   leaflet.css setzt "pointer-events: auto" ueber
   ".leaflet-pane > svg path.leaflet-interactive" - drei Klassen, zwei
   Elemente. Und es wird ZUR LAUFZEIT nachgeladen, kommt also nach
   stil.css. Eine kuerzere Regel verliert damit doppelt. Diese hier hat
   eine Klasse mehr und gewinnt ohne "!important". */
.leaflet-pane > svg path.leaflet-interactive.kt-fang {
    pointer-events: stroke;
    cursor: pointer;
}

/* ---- Das Schloss ------------------------------------------------------
   Justin: "dann noch einen sperren und entsperren modus". Ein gesperrtes
   Objekt laesst sich ansehen und auswaehlen, aber nicht verschieben und
   nicht loeschen - es schuetzt vor der eigenen Hand, nicht vor Kollegen. */
.kt-schloss { margin: 0 0 0 auto; padding: .18rem .45rem; font-size: 11px; }
.kt-schloss.zu {
    color: #e7a95e;
    border-color: color-mix(in srgb, #e7a95e 45%, transparent);
    background: color-mix(in srgb, #e7a95e 12%, transparent);
}
.kt-gesperrt-hinweis {
    margin: 0 0 .7rem; padding: .45rem .6rem; border-radius: 8px;
    font-size: 11.5px; line-height: 1.5; color: var(--text);
    border-left: 3px solid #e7a95e;
    background: color-mix(in srgb, #e7a95e 10%, transparent);
}
.kt-e-s { font-style: normal; font-size: 11px; }

/* Der Knopf, der die Werkzeuge wieder weglegt. Gruen, weil er den
   OFFENEN Zustand anzeigt - gedrueckt wird er, um ihn zu beenden. */
button.kt-frei {
    color: #6cc08a; font-weight: 700;
    border-color: color-mix(in srgb, #6cc08a 40%, transparent);
    background: color-mix(in srgb, #6cc08a 12%, transparent);
}
button.kt-frei:hover {
    color: var(--hell); border-color: #6cc08a;
    background: color-mix(in srgb, #6cc08a 22%, transparent);
}

/* ---- Die kleine Karte laesst sich jetzt bedienen ---- */
.db-mini { cursor: grab; }
.db-mini.wach { cursor: default; }
.db-mini .leaflet-bar a { width: 22px; height: 22px; line-height: 22px; }
.kt-heim a { font-size: 15px; font-weight: 700; text-decoration: none; }


/* ---- Ermittlung: die Akten der Detectives ---------------------------
   Justin: "akten zu familien unterakten zu deren mitgliedern". Der
   Bereich borgt sich alles Sichtbare - Etiketten, Tabellen, Schublade -
   und braucht deshalb nur das, was es sonst nirgends gibt: den
   Farbpunkt einer Gruppe und die Chronik. */

/* Die Gruppenfarbe als Punkt vor dem Namen. Eine ganze Zeile
   einzufaerben waere zu laut - man liest sie dann als Warnung. */
.erm-punkt {
    display: inline-block; width: .62rem; height: .62rem;
    border-radius: 50%; margin-right: .45rem;
    background: var(--ef, var(--rot)); vertical-align: baseline;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ef, var(--rot)) 25%, transparent);
}

/* ---------- "Meine Akten": Filterzeile und Ordner ----------

   Justin, 30.08.: "wir als Leitung werden von den Akten bisschen
   erschlagen. Vielleicht das man oben nach Namen Filtern kann oder das
   jeder Detective einen Ordner hat". */

.da-werkzeuge {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .5rem .8rem; border-bottom: 1px solid var(--rand);
}

/* Eine BREITE, keine Dehnung: ein <select> in einer Flex-Zeile nimmt
   sich sonst alles und drueckt die Knoepfe daneben zusammen. */
.da-werkzeuge select {
    flex: 0 1 220px; width: auto; min-width: 0; margin: 0;
    padding: .3rem .5rem; font-size: 12.5px;
}

#da-sicht, #ib-sicht { margin-left: auto; }

/* Das Suchfeld in der Leiste: eine BREITE, keine Dehnung - dieselbe
   Ueberlegung wie beim Auswahlfeld darueber. */
.da-werkzeuge input[type="search"] {
    flex: 1 1 200px; min-width: 140px; width: auto; margin: 0;
    padding: .3rem .5rem; font-size: 12.5px;
}

.da-ordner { display: flex; flex-direction: column; gap: .5rem; }

.da-o {
    border: 1px solid var(--rand); border-radius: 8px;
    background: rgba(255,255,255,.012); overflow: hidden;
}
.da-o.auf { border-color: var(--randhell); }

/* Der Kopf ist ein Knopf ueber die volle Breite - also ausdruecklich
   linksbuendig und umbrechend, gegen die Grundregel fuer Knoepfe. */
.da-o-kopf {
    display: flex; align-items: center; gap: .55rem; width: 100%;
    text-align: left; white-space: normal;
    background: transparent; border: 0; border-radius: 0;
    padding: .55rem .75rem;
}
.da-o-kopf:hover { background: var(--karte2); }
.da-o.auf .da-o-kopf { border-bottom: 1px solid var(--rand); }

.da-o-pfeil { color: var(--grau); font-size: 11px; width: .8rem; }
.da-o-name { font-weight: 600; color: var(--hell); }
.da-o-zahl { color: var(--grau); font-size: 11.5px; }
/* Steht rechts und faellt am schmalen Bild als Erstes weg - "zuletzt
   vorgestern" ist die unwichtigste der vier Angaben im Kopf. */
.da-o-wann { margin-left: auto; }

.da-o-inhalt { padding: 0; }
.da-o-inhalt .tab-rollen { border: 0; }

/* Die IA-Liste gruppiert nach Betroffenem - jede Gruppe ist eine EIGENE
   Tabelle, und ohne festes Raster setzte jede ihre Spalten anders:
   "Status" stand in jedem Ordner woanders (Justin, 07.09.: "die bitte
   bei IA vernuenftig einruecken"). Feste Anteile richten alle Ordner an
   einer Flucht aus; der Einzug der ersten Spalte holt die Zeilen unter
   den Ordnernamen (Pfeil .8rem + Abstand .55rem + Polster .75rem).
   Bewusst nur #ia-liste: die Detective-Akten teilen sich die
   da-o-Bausteine, haben aber andere Spalten. */
#ia-liste .da-o-inhalt table { table-layout: fixed; width: 100%; }
#ia-liste .da-o-inhalt th:nth-child(1),
#ia-liste .da-o-inhalt td:nth-child(1) { width: 13%; padding-left: 2.1rem; }
#ia-liste .da-o-inhalt th:nth-child(2),
#ia-liste .da-o-inhalt td:nth-child(2) { width: 37%; }
#ia-liste .da-o-inhalt th:nth-child(3),
#ia-liste .da-o-inhalt td:nth-child(3) { width: 16%; }
#ia-liste .da-o-inhalt th:nth-child(4),
#ia-liste .da-o-inhalt td:nth-child(4) { width: 22%; }
#ia-liste .da-o-inhalt th:nth-child(5),
#ia-liste .da-o-inhalt td:nth-child(5) { width: 12%; }
@media (max-width: 900px) {
    /* Am schmalen Bild sind feste Anteile enger als der Inhalt - dort
       scrollt die Tabelle ohnehin, das Raster bleibt aus. */
    #ia-liste .da-o-inhalt table { table-layout: auto; }
    #ia-liste .da-o-inhalt th:nth-child(1),
    #ia-liste .da-o-inhalt td:nth-child(1) { padding-left: .75rem; }
}

@media (max-width: 640px) {
    .da-o-wann { display: none; }
    .da-werkzeuge select { flex: 1 1 100%; }
    #da-sicht { margin-left: 0; }
}

.erm-chronik { display: flex; flex-direction: column; gap: .5rem; }

/* Jeder Eintrag als eigene Karte mit farbiger Kante. Die Kante traegt
   die ART - Verdacht und Ergebnis sollen sich schon beim Ueberfliegen
   unterscheiden, ohne dass man das Wort liest. */
.erm-eintrag {
    background: var(--karte2); border: 1px solid var(--rand);
    border-left: 3px solid var(--grau);
    border-radius: .4rem; padding: .5rem .65rem;
}
.erm-eintrag.erm-beobachtung { border-left-color: var(--blau); }
.erm-eintrag.erm-hinweis     { border-left-color: var(--gold); }
.erm-eintrag.erm-verdacht    { border-left-color: var(--gelb); }
.erm-eintrag.erm-ergebnis    { border-left-color: var(--gruen); }
.erm-eintrag.erm-vermerk     { border-left-color: var(--grau); }

.erm-e-kopf {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-bottom: .25rem;
}
.erm-e-art { font-weight: 600; font-size: .86rem; }
/* Zu wem der Eintrag gehoert, wenn die Chronik der Gruppe und die der
   Mitglieder in einem Strang stehen. */
.erm-e-wer {
    font-size: .8rem; padding: .05rem .4rem; border-radius: .3rem;
    background: var(--flaeche); border: 1px solid var(--rand);
}
/* Der Knopf zum Entfernen ganz nach rechts - er soll nicht als Teil
   der Angaben gelesen werden. */
.erm-e-kopf button { margin-left: auto; }
.erm-e-titel { display: block; margin-bottom: .15rem; }
.erm-eintrag p { margin: .2rem 0; }

.erm-bez { display: flex; flex-direction: column; gap: .35rem; }
.erm-bez-zeile { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.erm-bez-zeile button { margin-left: auto; }

/* Ein Verweis auf eine andere Akte. Bewusst KEIN <a>: ein Anker mit
   href="#" scrollt die Schublade nach oben, und ohne href ist er fuer
   die Tastatur nichts wert. Ein Span mit Zeigefinger tut genau das,
   was er soll. */
.erm-verweis {
    cursor: pointer; font-weight: 600;
    text-decoration: underline; text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.erm-verweis:hover { color: var(--gold); }


/* ---- Raube: das Bild in der Schublade -------------------------------
   Justin: "wo die leute ein bild von machen muessen". Es steht ganz
   oben und gross - es ist der Grund, warum es den Eintrag gibt. Mit
   Hoehenbremse, damit ein hochkantiger Screenshot nicht die ganze
   Schublade fuellt und alles Uebrige unter den Rand schiebt. */
.rb-bild {
    display: block; margin: 0 0 .9rem;
    border: 1px solid var(--rand); border-radius: .45rem;
    overflow: hidden; background: var(--karte2);
}
.rb-bild img {
    display: block; width: 100%; max-height: 420px;
    object-fit: contain; background: var(--karte2);
}
.rb-bild:hover { border-color: var(--gold); }
/* Meldet sich nur, wenn das Bild wirklich nicht kommt (onerror setzt
   .kaputt). Vorher ist es unsichtbar und nimmt keinen Platz. */
.rb-bild-weg { display: none; }
.rb-bild.kaputt img { display: none; }
.rb-bild.kaputt .rb-bild-weg {
    /* Keine eigene Farbe: `--stumm` gibt es hier nicht, und eine
       erfundene Variable faellt beim naechsten Themenwechsel auf. */
    display: block; padding: 1rem; font-size: .88rem; line-height: 1.5;
}


/* ---- Die Bildflaeche nimmt auch Gezogenes an -----------------------
   Ohne sichtbare Antwort laesst niemand los: man zieht darueber, sieht
   nichts und zieht wieder weg. */
.ka-drop.drueber {
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    color: var(--text);
}


/* ---- Detective-Akten: die Beweismittel -----------------------------
   Eine Galerie und keine Liste: Bilder vergleicht man nebeneinander,
   nicht untereinander. Feste Zeilenhoehe, damit ein Hochkant-Screenshot
   die Reihe nicht auseinanderzieht. */
.da-beweise {
    display: grid; gap: .7rem;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.da-beweis {
    margin: 0; background: var(--karte2);
    border: 1px solid var(--rand); border-radius: .45rem; overflow: hidden;
}
.da-beweis a { display: block; }
.da-beweis img {
    display: block; width: 100%; height: 140px; object-fit: cover;
    background: var(--flaeche);
}
.da-beweis figcaption {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
    padding: .45rem .55rem; font-size: .84rem; line-height: 1.35;
}
.da-beweis figcaption b { flex-basis: 100%; }
.da-beweis figcaption button { margin-left: auto; }
.da-beweis:hover { border-color: var(--gold); }

/* Meldet sich nur, wenn das Bild wirklich nicht kommt. */
.da-beweis-weg { display: none; }
.da-beweis.kaputt img { display: none; }
.da-beweis.kaputt .da-beweis-weg { display: block; flex-basis: 100%; }

/* ---- Sonderzahlungen: sortierbare Kopfzellen ------------------------
   Justin: "auch gerne sortieren lassen". Der Zeiger und die Unterkante
   sagen, dass hier etwas passiert - eine Kopfzeile, die nur auf Klick
   reagiert und sonst aussieht wie jede andere, probiert niemand aus. */
.sz-tabelle th.sz-sort, .p-tabelle th.sz-sort {
    cursor: pointer; user-select: none;
    border-bottom: 2px solid transparent;
}
.sz-tabelle th.sz-sort:hover, .p-tabelle th.sz-sort:hover { color: var(--text); }
.sz-tabelle th.sz-sort.an, .p-tabelle th.sz-sort.an {
    color: var(--gold); border-bottom-color: var(--gold);
}
.sz-tabelle th.sz-sort i, .p-tabelle th.sz-sort i { font-style: normal; }

/* ---- Das PD in der Mannschaftsliste --------------------------------
   Die Farbe kommt als --uf vom Revier (WACHEN_META), damit die Marke
   dieselbe Farbe traegt wie der Bereich auf der Tafel.

   KEIN nowrap: hier steht ein ganzer Reviername ("Mission Row PD"), und
   die Grundregel fuer Marken wuerde ihn mitten im Wort abschneiden. */
.pd-marke {
    display: inline-block; white-space: normal; font-size: 10.5px;
    padding: .1rem .4rem; border-radius: 4px; line-height: 1.35;
    color: var(--uf, #7e8899);
    background: color-mix(in srgb, var(--uf, #7e8899) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--uf, #7e8899) 38%, transparent);
}

/* ---- Auswahlmodus der Mannschaftsliste ------------------------------
   Die Leiste steht UNTER der Liste, nicht darin: der Kasten darueber
   wird im Takt ersetzt, und ein Knopf, der dabei verschwindet, ist beim
   Klicken nicht mehr da. */
.p-wahlleiste {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .55rem .8rem; border-top: 1px solid var(--rand);
    background: rgba(201,164,92,.06);
}
.p-wahlleiste b { color: var(--goldhell); }
.p-tabelle tr.gewaehlt > td { background: rgba(201,164,92,.09); }
.p-tabelle .p-hak { width: 15px; height: 15px; vertical-align: middle; }
.p-tabelle th.p-hak-sp, .p-tabelle td.p-hak-sp { width: 26px; }

/* ---- Rechte im Profil ----------------------------------------------
   Borgt sich .rt-karte aus dem Rechte-Bereich. Zwei Zusaetze:
   `.hat` markiert ein Recht, das die Person ueber eine ANDERE Quelle
   schon hat - der Haken davor waere dann ueberfluessig, und das soll man
   sehen, bevor man ihn setzt. `.mp-her` ist die Zeile, die sagt woher. */
#mp-rechte .rt-karte { align-items: flex-start; }
#mp-rechte .rt-karte.hat { border-color: color-mix(in srgb, var(--gruen) 45%, var(--rand)); }
#mp-rechte .mp-her {
    display: block; margin-top: .2rem; color: var(--gruen);
    font-style: normal; font-size: 10.5px;
}
#mp-rechte .rt-karte input[disabled] { opacity: .45; }

/* =====================================================================
   Sanktionen
   =====================================================================

   Karten und keine Tabellenzeilen: an einer offenen Sanktion haengen bis
   zu drei Haken mit langen Texten ("2x Runden um Army Base /
   Reflexionsgespraech erledigt"). In einer Tabellenspalte waeren die
   entweder abgeschnitten oder die Zeile vier Zeilen hoch - und
   angeklickt werden muessen sie auch noch. */

.sk-karte { margin-bottom: .8rem; }

.sk-kopf {
    display: flex; align-items: flex-start; gap: 1rem;
    justify-content: space-between; flex-wrap: wrap;
}
.sk-wer { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.sk-wer b { color: var(--hell); }
.sk-summe {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: .1rem; flex: none; text-align: right;
}
.sk-summe b {
    font-variant-numeric: tabular-nums; font-size: 1.15rem;
    color: var(--gold);
}

.sk-titel { margin: .55rem 0 .2rem; }
.sk-titel b { color: var(--hell); }
.sk-titel .zahl { margin-right: .35rem; }

/* Der Sachverhalt ist Fliesstext aus einem Formularfeld - Zeilenumbrueche
   muessen erhalten bleiben, sonst wird aus drei Absaetzen eine Wurst. */
.sk-text {
    margin: .35rem 0 .55rem; color: var(--text);
    white-space: pre-wrap; overflow-wrap: anywhere;
}

.sk-balken {
    height: 4px; border-radius: 2px; background: var(--rand);
    overflow: hidden; margin: .5rem 0 .7rem;
}
.sk-balken i {
    display: block; height: 100%; background: var(--gruen);
    transition: width .25s ease;
}

.sk-punkte { display: flex; flex-direction: column; gap: .3rem; }

.sk-punkt {
    display: flex; align-items: flex-start; gap: .55rem;
    padding: .4rem .55rem; border-radius: 7px;
    background: var(--karte2); border: 1px solid var(--rand);
    cursor: pointer;
}
.sk-punkt:hover { border-color: var(--randhell); }
.sk-punkt.fertig { opacity: .62; }
.sk-punkt.fertig > span { text-decoration: line-through; }
.sk-punkt > span { min-width: 0; overflow-wrap: anywhere; }
.sk-punkt i { font-style: normal; }

/*  GEMESSEN, nicht geraten: `input { width: 100% }` gilt im Bereich
    global, und ein Kaestchen wird davon 270px breit - die Beschriftung
    steht dann ausserhalb der Karte. `flex: none` allein reicht NICHT,
    das regelt nur die Verteilung und nicht die Breite. Dieselbe Falle
    wie bei den Karten-Kaestchen (.kt-haken). */
.sk-punkt input[type=checkbox] {
    flex: none; margin: .12rem 0 0; width: 15px; height: 15px;
    min-width: 0; min-height: 0; padding: 0; cursor: pointer;
}

.sk-hinweis {
    margin: .6rem 0 0; padding: .5rem .65rem; border-radius: 7px;
    background: var(--karte2); border: 1px solid var(--rand);
    color: var(--grau); font-size: .86rem;
}

.sk-fuss { margin-top: .7rem; gap: .4rem; }

/* Die Rechnung unter dem Betragsfeld. Eine Zahl, die einfach erscheint,
   glaubt man entweder blind oder gar nicht - hier steht, woraus sie
   kommt. */
.sk-vorschau {
    margin: .35rem 0 0; color: var(--grau);
    grid-column: span 2;
}
.sk-vorschau b { color: var(--gold); }


/* ---- Konami: Code 3 -------------------------------------------------------
   Ein Fund, kein Werkzeug. Er aendert nichts, speichert nichts und ist nach
   sechs Sekunden von selbst wieder weg.

   ZWEI DINGE SIND HIER ABSICHT UND KEINE KOSMETIK:

   1. pointer-events: none auf allem. Der Balken liegt ueber der ganzen
      Breite und der Wagen ueber der ganzen unteren Kante. Ohne diese Zeile
      klaut ein Spass sechs Sekunden lang Klicks an der Leitstelle - und das
      ausgerechnet dort, wo jemand gerade eine Einheit zieht.

   2. Bei prefers-reduced-motion: reduce faellt jede Bewegung weg. Schnell
      wechselndes Rot/Blau ist fuer photosensible Menschen ein
      Gesundheitsrisiko; hier laeuft es ohnehin gemaechlich (1,1 s je
      Runde), aber wer ruhige Bilder eingestellt hat, bekommt gar keins.
      Den Wagen laesst app.js in dem Fall von vornherein weg - ein Auto,
      das nicht faehrt, ist kein Witz, sondern ein Bild im Weg. */

.code3-balken {
    position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 200;
    pointer-events: none; opacity: .9;
    background: linear-gradient(90deg, #d1495b 0%, #d1495b 50%, #4d8fd1 50%, #4d8fd1 100%);
    background-size: 200% 100%;
    box-shadow: 0 0 22px rgba(209,73,91,.55);
}
/*  z-index 88 und nicht 200: der Wagen faehrt HINTER dem Funkspruch
    durch (#meldung liegt auf 90). Auf 200 fuhr er darueber und deckte
    beim Vorbeikommen genau die Meldung zu, die er ankuendigt. Der Balken
    oben bleibt auf 200 - dort liegt nichts, was er verdecken koennte. */
.code3-wagen {
    position: fixed; bottom: 0; left: 0; z-index: 88;
    pointer-events: none; width: 132px; height: 52px;
    transform: translateX(-160px);
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
}
.code3-wagen .lampe-r { fill: #d1495b; }
.code3-wagen .lampe-b { fill: #4d8fd1; }

/*  DIE POLARITAET IST ABSICHT: erst animieren, dann unter `reduce`
    abschalten - NICHT umgekehrt unter `no-preference` einschalten.

    Gemessen am 29.08.: in Headless-Chrome ist prefers-reduced-motion gar
    nicht gesetzt. Dann trifft weder `reduce` noch `no-preference`, und ein
    Aufbau, der die Fahrt erst unter `no-preference` einschaltet, laesst
    den Wagen unsichtbar links neben dem Bild stehen. Ein echter Browser
    meldet immer eines von beidem, hier waere also nie etwas aufgefallen -
    ausser dass der eigene Pruefbogen dann etwas Gruenes behauptet, das es
    nicht gibt. So herum ist der Normalfall der Normalfall. */
/*  DAS !important HIER IST EINE ENTSCHEIDUNG, KEINE FAULHEIT.
    Es gibt zwei Schalter fuer Bewegung, und sie bedeuten Verschiedenes:

      data-bewegung="sparsam"  ist der VORGABEWERT des Bereichs
                               (app.js: `a.bewegung || 'sparsam'`). Fast
                               niemand hat ihn bewusst gewaehlt - er ist
                               einfach da. Er raeumt jede Animation mit
                               `* { animation: none !important }` ab.
      prefers-reduced-motion   sagt der Mensch dem Betriebssystem. Das ist
                               eine Aussage, keine Vorgabe.

    Wer den Konami-Code eintippt, BITTET um Blaulicht. Diese sechs
    Sekunden gegen den Vorgabewert durchzusetzen ist richtig, sonst sieht
    den Fund praktisch niemand. Die Aussage des Menschen dagegen gilt: der
    reduce-Block darunter nimmt alles wieder weg, und zwar ebenfalls mit
    !important, damit er diese Zeilen hier schlaegt. */
/*  UND DER DOPPELTE WAEHLER IST AUCH EINER: `!important` allein reicht
    nicht. Stehen zwei !important gegeneinander, gewinnt der SPEZIFISCHERE
    Waehler, und `:root[data-bewegung="sparsam"] *` (0,2,0) ist
    spezifischer als `.code3-wagen` (0,1,0). Gemessen: der Wagen stand
    still, obwohl das !important dastand. Mit `:root[data-bewegung]`
    davor sind es (0,3,0) und die Sache ist entschieden. Der kurze Waehler
    bleibt daneben stehen, damit es auch dann sitzt, wenn das Attribut
    einmal fehlt - dann kann die sparsam-Regel ohnehin nicht greifen. */
.code3-balken,
:root[data-bewegung] .code3-balken {
    animation: code3Balken 1.1s linear infinite !important; }
/* Die Fahrt ist bewusst laenger als die Lichter: der Wagen soll einmal
   ruhig durchs Bild rollen, nicht durchhuschen. */
.code3-wagen,
:root[data-bewegung] .code3-wagen {
    animation: code3Fahrt 5s linear forwards !important; }
.code3-wagen .lampe-r,
:root[data-bewegung] .code3-wagen .lampe-r {
    animation: code3Lampe 1.1s steps(1) infinite !important; }
.code3-wagen .lampe-b,
:root[data-bewegung] .code3-wagen .lampe-b {
    animation: code3Lampe 1.1s steps(1) infinite reverse !important; }

@media (prefers-reduced-motion: reduce) {
    .code3-balken, .code3-wagen,
    .code3-wagen .lampe-r, .code3-wagen .lampe-b,
    :root[data-bewegung] .code3-balken,
    :root[data-bewegung] .code3-wagen,
    :root[data-bewegung] .code3-wagen .lampe-r,
    :root[data-bewegung] .code3-wagen .lampe-b { animation: none !important; }
    /* Ohne Wechsel bleibt ein ruhiger Streifen in Messing stehen - er
       sagt dasselbe, nur ohne Blinken. app.js baut den Wagen in diesem
       Fall ohnehin nicht. */
    .code3-balken { background: linear-gradient(90deg,
        transparent, var(--gold), transparent); box-shadow: none; }
}
@keyframes code3Balken { to { background-position: 200% 0; } }
@keyframes code3Fahrt {
    from { transform: translateX(-160px); }
    to   { transform: translateX(calc(100vw + 40px)); }
}
@keyframes code3Lampe { 0% { opacity: 1; } 50% { opacity: .18; } 100% { opacity: 1; } }

/* ---- Die Katalogtafel: alle Dienstgrade nebeneinander ----

   Justin, 29.08.: "es soll doch aber alles da stehen nt nur 4 raenge".
   Einundzwanzig Spalten passen in keinen Bildschirm, also rollt die
   Tafel waagerecht - INNERHALB ihres Kastens. Die Seite selbst darf das
   nie tun; das prueft tools/sanktion-check.cjs mit. */

.sk-kattafel { overflow-x: auto; }
.sk-kattafel table { min-width: max-content; }
.sk-kattafel th, .sk-kattafel td { white-space: nowrap; }

/*  Die erste Spalte bleibt stehen. Ohne sie weiss man nach drei
    Spalten Rollen nicht mehr, in welcher Zeile man liest - und dann ist
    die ganze Tabelle wertlos. `background` ist Pflicht: eine
    durchsichtige klebende Zelle laesst die rollenden Zahlen unter sich
    durchscheinen. */
.sk-kattafel .sk-fix {
    position: sticky; left: 0; z-index: 2;
    background: var(--karte); min-width: 240px; max-width: 340px;
    white-space: normal;
    box-shadow: 1px 0 0 var(--rand);
}
/*  GEMESSEN: `th { opacity: .7 }` gilt im Bereich global - und opacity
    macht das Element HALBDURCHSICHTIG, ganz gleich welchen Hintergrund
    es traegt. Die durchgerollten Rangspalten schimmerten dadurch hinter
    "SANKTION" durch. Also volle Deckkraft, und die Daempfung kommt
    stattdessen aus der Schriftfarbe - die erzeugt keinen
    Stapelkontext. */
.sk-kattafel thead .sk-fix {
    z-index: 3; background: var(--karte2); opacity: 1;
    color: color-mix(in srgb, var(--grau) 72%, transparent);
}
.sk-kattafel tbody tr:hover .sk-fix { background: var(--karte2); }

.sk-kattafel .sk-rang, .sk-kattafel .sk-grund { text-align: right; }
.sk-kattafel th.sk-rang, .sk-kattafel th.sk-grund { text-align: right; }
.sk-kattafel th.sk-rang i {
    display: block; font-style: normal; font-weight: 400;
    font-size: .74rem; color: var(--grau);
}

/*  Officer I traegt den Faktor 1,0 - an dieser Spalte haengen die
    Grundbetraege. Sie hervorzuheben ist keine Zierde: ohne sie sucht
    man in achtzehn gleich aussehenden Spalten die eine, die man
    aendern muesste. */
.sk-kattafel .sk-anker {
    background: color-mix(in srgb, var(--gold) 9%, transparent);
}
.sk-kattafel th.sk-anker { color: var(--goldhell); }

/* ---- Der Mehrfach-Wähler beim Vergeben ----

   Justin, 29.08.: "mach auch dass man beim erstellen mehrere dinge
   zusammen wählen kann das zusammenberechnet wird". Kein
   <select multiple>: bei dreissig Zeilen trifft man damit die falsche
   und sieht nie, was gewaehlt ist. */

/*  Zugeklappt ist der Waehler ein Knopf wie das "Gegen wen?"-Feld
    darueber - dieselbe Hoehe, derselbe Rand, derselbe Pfeil. Genau
    dieser Unterschied war die Meldung: das eine ein Dropdown, das
    andere eine Wand aus dreissig Zeilen. */
.sk-waehler { position: relative; }
.sk-wknopf {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    margin-top: .4rem; padding: .5rem .7rem; text-align: left;
    border: 1px solid var(--rand); border-radius: 8px;
    background: var(--flaeche); color: var(--text);
    font-size: 13px; text-transform: none; letter-spacing: normal;
    cursor: pointer;
}
.sk-wknopf:hover { border-color: var(--gold); }
.sk-wknopf > span { flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-wknopf svg { flex: none; width: 16px; height: 16px; color: var(--grau);
    transition: transform .15s ease; }
.sk-waehler.auf .sk-wknopf { border-color: var(--gold); }
.sk-waehler.auf .sk-wknopf svg { transform: rotate(180deg); }

/*  Das Panel liegt UEBER dem Bogen, nicht darin. Sonst schoebe jedes
    Aufklappen die Felder darunter weg, und der Dialog waere wieder so
    hoch wie vorher - dann haette der Umbau nichts gebracht. */
.sk-wpanel {
    position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
    margin-top: .3rem; padding: .5rem;
    border: 1px solid var(--gold); border-radius: 10px;
    background: var(--karte);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.sk-wpanel input[type=search] { margin: 0 0 .45rem; }

.sk-waehler .sk-wliste {
    max-height: 260px; overflow-y: auto;
    border: 1px solid var(--rand); border-radius: 8px;
    background: var(--flaeche);
}
/*  GEMESSEN: eine Zeile ist ein <label>, und global gilt
    `label { font-size: 10px; text-transform: uppercase;
    letter-spacing: .14em; color: var(--gold) }`. Die Sanktionsnamen
    standen dadurch in gesperrten Grossbuchstaben und brauchten drei
    Zeilen statt einer - dreissig davon waren nicht mehr lesbar. Also
    hier zurueckgesetzt: eine anklickbare Zeile ist keine
    Feldbeschriftung, auch wenn sie technisch dasselbe Element ist. */
.sk-w {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .6rem; cursor: pointer;
    border-bottom: 1px solid var(--rand);
    text-transform: none; letter-spacing: normal; font-size: 13px;
    color: var(--text); margin-bottom: 0;
}
.sk-w:last-child { border-bottom: 0; }
.sk-w:hover { background: var(--karte2); }
.sk-w.an { background: color-mix(in srgb, var(--gold) 11%, transparent); }

/*  Dieselbe gemessene Falle wie bei den Haken: `input { width: 100% }`
    gilt global und macht das Kaestchen 270px breit. `flex: none`
    regelt nur die Verteilung, nicht die Breite. */
.sk-w input[type=checkbox] {
    flex: none; margin: 0; width: 15px; height: 15px;
    min-width: 0; min-height: 0; padding: 0; cursor: pointer;
}
.sk-wt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sk-wt b {
    color: var(--hell); font-size: 13px; font-weight: 600;
    text-transform: none; letter-spacing: normal;
}
/*  Nicht mehr eine graue Zeile, die hinten abbricht, sondern Marken:
    die Nummer, dann je Auflage eine. Umbrechen duerfen sie - eine
    Auflage, die man nicht sieht, ist keine. */
.sk-wt i {
    font-style: normal; font-size: 11px; color: var(--grau);
    text-transform: none; letter-spacing: normal;
    display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
    margin-top: .15rem;
}
.sk-wnr {
    font-variant-numeric: tabular-nums; color: var(--grau);
    padding: .05rem .3rem; border-radius: 4px; background: var(--karte2);
}
.sk-wchip {
    padding: .05rem .4rem; border-radius: 999px; font-size: 11px;
    background: var(--flaeche); border: 1px solid var(--rand);
    color: var(--text);
}
.sk-w.an .sk-wchip { border-color: color-mix(in srgb, var(--gold) 40%, var(--rand)); }
.sk-wb {
    flex: none; font-variant-numeric: tabular-nums; color: var(--gold);
    font-size: 13px; text-transform: none; letter-spacing: normal;
}

.sk-wsumme {
    margin-top: .45rem; padding: .5rem .65rem; border-radius: 7px;
    background: var(--karte2); border: 1px solid var(--rand);
    font-size: 13px; color: var(--text);
}
/* Mehr Luft, sobald die Schublade breit ist - dreissig Zeilen wollen
   gesehen werden, nicht durch ein Guckloch gescrollt. */
.schublade.breit .sk-waehler .sk-wliste { max-height: 420px; }
.sk-wsumme b { color: var(--gold); }

/* ---- Die Aufschlüsselung auf der Karte ---- */

.sk-posten {
    margin: .5rem 0 .2rem; border: 1px solid var(--rand);
    border-radius: 8px; overflow: hidden;
}
.sk-po {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .35rem .6rem; font-size: .86rem;
    border-bottom: 1px solid var(--rand);
}
.sk-po:last-child { border-bottom: 0; }
.sk-po > span { min-width: 0; overflow-wrap: anywhere; }
.sk-po-summe { background: var(--karte2); }
.sk-po-summe b { color: var(--gold); }

/* Was an Auflagen zusammenkommt - neben der Summe. Sonst sieht man nur
   das Geld und uebersieht, dass drei Runden dazugehoeren. */
.sk-wauflagen {
    display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem;
}
.sk-wauflagen span {
    padding: .12rem .45rem; border-radius: 999px; font-size: 12px;
    background: var(--flaeche); border: 1px solid var(--rand);
    color: var(--text);
}


/* ==========================================================================
   AzubiNet — Ausbildung, Pruefungen, Fortschritt
   ==========================================================================
   Alles, was hier steht, benutzt die Variablen von oben. Kein neuer
   Farbton, kein zweites Schriftsystem.
   ========================================================================== */

/* --- Bausteine, die ueberall im Bereich vorkommen --- */

.az-person { display: flex; align-items: center; gap: .55rem;
    flex-wrap: wrap; margin-bottom: .7rem; }
.az-person > b { font-size: 15px; color: var(--hell); letter-spacing: .01em; }

.az-nr { font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px; color: var(--gold); background: var(--golddun);
    border: 1px solid #5c4a22; border-radius: 4px; padding: .1rem .4rem;
    white-space: nowrap; }

.az-balken { height: 5px; border-radius: 3px; background: var(--rand);
    overflow: hidden; margin: .45rem 0; }
.az-balken > i { display: block; height: 100%; background: var(--gold);
    transition: width .25s ease; }
.az-balken > i.voll { background: var(--gruen); }
.az-balken > i.leer { background: transparent; }

.az-fort { margin: .2rem 0 .3rem; }
.az-fort-kopf { display: flex; justify-content: space-between;
    align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.az-fort-kopf > b { color: var(--hell); font-size: 14px; }
.az-fort-kopf > span { color: var(--grau); font-size: 12px; }
.az-fort-fuss { margin-top: -.2rem; }

.az-fortmini { display: inline-flex; flex-direction: column;
    min-width: 84px; font-size: 11px; color: var(--grau); }
.az-fortmini .az-balken { margin: .2rem 0 0; height: 4px; }

.az-hinweis { border: 1px solid var(--rand); background: var(--karte2);
    border-radius: 8px; padding: .6rem .8rem; font-size: 13px;
    color: var(--text); margin: .6rem 0; }
.az-hinweis.gut { border-color: #1e4a30; background: #12301f;
    color: #b9e2cb; }
.az-hinweis.warn { border-color: #4f3d1a; background: #33270f;
    color: #e8d3a6; }
.az-uprank { display: flex; align-items: center; gap: 1rem;
    flex-wrap: wrap; justify-content: space-between; }

/* --- Zeilen: eine Pruefung, eine Person, eine laufende Sitzung --- */

.az-zeile { display: flex; align-items: center; gap: .55rem;
    flex-wrap: wrap; padding: .55rem .1rem; border-bottom: 1px solid var(--rand); }
.az-zeile:last-child { border-bottom: 0; }
.az-zeile > b { color: var(--hell); font-weight: 600; }
.az-zeile .rechts { margin-left: auto; }
.az-zeile.klickbar:hover { background: var(--karte2); }
.az-wer { color: var(--grau); font-size: 12px; }
.az-punkte { font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px; color: var(--text); }

.az-livemarke { animation: az-puls 2.4s ease-in-out infinite; }
@keyframes az-puls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.az-livemodul { color: var(--text); font-size: 13px; }

/* --- Der Ausbildungsplan --- */

.az-modul { display: flex; align-items: center; gap: .55rem;
    flex-wrap: wrap; padding: .6rem .7rem; margin-bottom: .4rem;
    border: 1px solid var(--rand); border-left: 3px solid var(--randhell);
    border-radius: 8px; background: var(--karte2); }
.az-modul > b { color: var(--hell); font-weight: 600; }
.az-modul.gruen { border-left-color: var(--gruen); }
.az-modul.rot   { border-left-color: var(--rot); }
.az-modul.gelb  { border-left-color: var(--gelb); }
.az-modul.blau  { border-left-color: var(--blau); }
.az-modul.aus   { opacity: .55; }
.az-modul-rechts { margin-left: auto; display: flex; align-items: center;
    gap: .45rem; flex-wrap: wrap; }
.az-modul-text { flex-basis: 100%; margin: .15rem 0 0; }

/* Wer hat abgenommen, wer bewertet. Eigene Zeile unter dem Modul -
   `flex-basis: 100%`, weil `.az-modul` eine Flex-Zeile ist; ohne das
   quetschte sie sich zwischen die Marken und die Knoepfe.
   Justin, 30.08.: "wenn leute was abnehmen dann auch den officer
   dazuschreiben". */
.az-abnahme {
    flex-basis: 100%; display: flex; flex-direction: column; gap: .1rem;
    margin: .25rem 0 0; padding-left: 1.6rem; line-height: 1.45;
}
.az-abnahme b { color: var(--text); font-weight: 600; }
html[data-geraet="handy"] .az-abnahme { padding-left: 0; }
.az-haken { width: 1.1rem; text-align: center; color: var(--grau);
    font-size: 13px; }
.az-modul.gruen .az-haken { color: var(--gruen); }
.az-modul.rot .az-haken { color: var(--rot); }

/* --- Der Schreibmodus --- */

.az-schreib-kopf { display: flex; justify-content: space-between;
    align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.az-schreib-stand { font-size: 13px; color: var(--hell);
    white-space: nowrap; }

/* Die Leiste der Fragen. Ein Blick sagt: wo bin ich, was fehlt noch. */
.az-rail { display: flex; flex-wrap: wrap; gap: .3rem; margin: .7rem 0 1rem; }
.az-rail-f { width: 30px; height: 30px; padding: 0; border-radius: 6px;
    border: 1px solid var(--rand); background: var(--karte2);
    color: var(--grau); font-size: 12px; cursor: pointer; }
.az-rail-f.voll { border-color: #1e4a30; background: #12301f;
    color: #85d3a4; }
.az-rail-f.an { border-color: var(--gold); color: var(--goldhell);
    box-shadow: 0 0 0 1px var(--gold) inset; }

.az-frage { border-top: 1px solid var(--rand); padding-top: 1rem; }
.az-frage-kopf { display: flex; align-items: center; gap: .6rem;
    margin-bottom: .5rem; flex-wrap: wrap; }
.az-frage-text { font-size: 15px; line-height: 1.5; color: var(--hell);
    margin: .2rem 0 .8rem; }
.az-frage-hinweis { margin-top: -.55rem; }

.az-opt-liste { display: flex; flex-direction: column; gap: .4rem; }
.az-opt { display: flex; align-items: flex-start; gap: .6rem;
    width: 100%; text-align: left; padding: .65rem .8rem;
    border: 1px solid var(--rand); border-radius: 8px;
    background: var(--karte2); color: var(--text); font-size: 14px;
    cursor: pointer; }
.az-opt:hover { border-color: var(--randhell); background: #1a2740; }
.az-opt.an { border-color: var(--gold); background: #1d1a12;
    color: var(--hell); }
.az-opt-zeichen { color: var(--grau); font-size: 15px; line-height: 1.3; }
.az-opt.an .az-opt-zeichen { color: var(--goldhell); }

.az-sort { list-style: none; margin: 0; padding: 0; display: flex;
    flex-direction: column; gap: .4rem; }
.az-sort > li { display: flex; align-items: center; gap: .6rem;
    padding: .55rem .7rem; border: 1px solid var(--rand);
    border-radius: 8px; background: var(--karte2); cursor: grab; }
.az-sort > li.drop-ziel { border-color: var(--gold); }
.az-sort-platz { font-family: ui-monospace, Menlo, monospace;
    font-size: 12px; color: var(--gold); width: 1.2rem; }
.az-sort-text { flex: 1; color: var(--text); font-size: 14px; }
.az-sort-knoepfe { display: flex; gap: .2rem; }

.az-schreib-fuss { display: flex; align-items: center; gap: .5rem;
    flex-wrap: wrap; margin-top: 1.1rem; padding-top: .8rem;
    border-top: 1px solid var(--rand); }
.az-schreib-fuss .rechts { margin-left: auto; }
.az-sicher { min-width: 8rem; }

/* --- Ergebnis und Bewertung --- */

.az-ergebnis { display: flex; align-items: baseline; gap: 1rem;
    flex-wrap: wrap; padding: .9rem 1.1rem; border-radius: 10px;
    border: 1px solid var(--rand); background: var(--karte2);
    margin: .8rem 0 1rem; }
.az-ergebnis > b { font-size: 17px; letter-spacing: .1em; }
.az-ergebnis > span { font-family: ui-monospace, Menlo, monospace;
    font-size: 14px; color: var(--text); }
.az-ergebnis > i { margin-left: auto; font-style: normal; }
.az-ergebnis.gut { border-color: #1e4a30; background: #12301f; }
.az-ergebnis.gut > b { color: #85d3a4; }
.az-ergebnis.schlecht { border-color: #57282a; background: var(--rotdun); }
.az-ergebnis.schlecht > b { color: #eda29b; }

.az-erg-kopf { display: flex; align-items: baseline; gap: .8rem;
    flex-wrap: wrap; }
.az-erg-frage { border-top: 1px solid var(--rand); padding: .9rem 0; }
.az-erg-nr { display: flex; align-items: center; gap: .8rem;
    margin-bottom: .35rem; }
.az-antwort { margin: .3rem 0; padding: .6rem .8rem; border-radius: 8px;
    background: var(--karte2); border-left: 3px solid var(--randhell);
    color: var(--text); font-size: 14px; white-space: pre-wrap; }
.az-erg-opt { display: flex; flex-direction: column; gap: .25rem; }
.az-erg-z { display: flex; gap: .5rem; padding: .3rem .5rem;
    border-radius: 6px; font-size: 13px; color: var(--grau); }
.az-erg-z.gewaehlt { color: var(--text); }
.az-erg-z.gut { background: #12301f; color: #b9e2cb; }
.az-erg-z.schlecht { background: var(--rotdun); color: #eda29b; }
.az-erg-z > i { font-style: normal; color: var(--gruen); }
.az-erg-sort { margin: .3rem 0; padding-left: 1.4rem; font-size: 13px;
    color: var(--text); }
.az-erg-sort > li.gut { color: #85d3a4; }
.az-erg-sort > li.schlecht { color: #eda29b; }
.az-loesung { margin-top: .3rem; }

.az-punkte-anz { font-family: ui-monospace, Menlo, monospace;
    font-size: 12px; padding: .1rem .5rem; border-radius: 4px;
    border: 1px solid var(--rand); color: var(--grau); }
.az-punkte-anz.gut { border-color: #1e4a30; background: #12301f;
    color: #85d3a4; }
.az-punkte-anz.halb { border-color: #4f3d1a; background: #33270f;
    color: #e2c07a; }
.az-punkte-anz.schlecht { border-color: #57282a; background: var(--rotdun);
    color: #eda29b; }
.az-bewerten { display: flex; align-items: center; gap: .5rem;
    flex-wrap: wrap; }
.az-punkte-wahl { display: flex; gap: .25rem; }
.az-punkte-wahl > button.an { border-color: var(--gold);
    color: var(--goldhell); }

/* --- Zuschauen --- */

.az-zuschau-f { border-left: 3px solid transparent; padding-left: .7rem; }
.az-zuschau-f.an { border-left-color: var(--gold); background: #131a29; }

/* --- Verwaltung: der Fragenkatalog --- */

.az-katfrage { border: 1px solid var(--rand); border-radius: 8px;
    padding: .7rem .8rem; margin-bottom: .5rem; background: var(--karte2); }
.az-katfrage.aus { opacity: .55; }
.az-katkopf { display: flex; align-items: center; gap: .5rem;
    flex-wrap: wrap; margin-bottom: .4rem; }
.az-katkopf .rechts { margin-left: auto; display: flex; gap: .3rem; }
.az-katopt { display: flex; flex-direction: column; gap: .15rem;
    font-size: 12px; color: var(--grau); }
.az-katopt > span.gut { color: #85d3a4; }
.az-katopt > span.ord { color: var(--text); }

.az-optbau { display: flex; flex-direction: column; gap: .35rem;
    margin: .5rem 0; }
.az-optzeile { display: flex; align-items: center; gap: .5rem; }
.az-optzeile > input[type=text] { flex: 1; }
.az-richtighaken { display: flex; align-items: center; }

.az-frage-text + .az-antwort { margin-top: .4rem; }

/* --- Handy: enger, aber nichts faellt weg --- */

html[data-geraet="handy"] .az-zeile,
html[data-geraet="handy"] .az-modul { font-size: 13px; }
html[data-geraet="handy"] .az-rail-f { width: 27px; height: 27px; }
html[data-geraet="handy"] .az-schreib-fuss .rechts { margin-left: 0;
    flex-basis: 100%; }
html[data-geraet="handy"] .az-schreib-fuss .rechts > button { width: 100%; }
html[data-geraet="handy"] .az-ergebnis > i { margin-left: 0;
    flex-basis: 100%; }
html[data-geraet="handy"] .az-modul-rechts { margin-left: 0;
    flex-basis: 100%; }

/* Wer weniger Bewegung will, bekommt weniger Bewegung. */
@media (prefers-reduced-motion: reduce) {
    .az-balken > i { transition: none; }
    .az-livemarke { animation: none; }
}

/* --- Ausbildung im Ablaufzettel der Aufnahme und im Profil --- */
.ab-fort { display: inline-block; width: 90px; vertical-align: middle;
    margin-left: .5rem; }
.ab-fort .az-balken { margin: 0; height: 4px; }
.ab-grund { display: block; font-size: 11px; margin-top: .15rem; }
.az-uprank-tat { display: flex; gap: .4rem; flex-wrap: wrap; }
.az-plan + .s-abschnitt { margin-top: 1rem; }

/* --- Die zwei Teile eines Moduls: praktisch und schriftlich --- */
.az-teile { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.az-teil { font-size: 11px; color: var(--grau); white-space: nowrap; }
.az-teil.an { color: var(--gruen); }
.az-modul-rechts > button + button { margin-left: .3rem; }

/* --- Freigaben in der Verwaltung --- */
.fg-weg { font-size: 13px; color: var(--text); }
.fg-weg b { color: var(--hell); }
#v-freigaben .az-zeile .rechts { display: flex; gap: .3rem; }


/* ==========================================================================
   Luft in den Karten
   ==========================================================================
   `.karte` traegt selbst kein Innenmass - das bringt `.inhalt` mit. Alles
   andere, was direkt in einer Karte steht, klebte deshalb am Rahmen:
   die Knopfreihe ueber einer Liste ("Akte anlegen", "Beschwerde
   einreichen", "Bericht anlegen") und der Hinweissatz darunter. Hier
   bekommen sie dasselbe Mass wie `.inhalt`.
   ========================================================================== */

.karte > .reihe { padding: .8rem .95rem 0; }
/* Steht die Reihe ganz unten (ohne Liste dahinter), braucht sie auch
   unten Luft - sonst sitzt der Knopf auf der Kante. */
.karte > .reihe:last-child { padding-bottom: .8rem; }
/* Eine Reihe direkt UEBER der Filterleiste hat deren Rand als Abschluss;
   der eigene Abstand nach unten waere dort doppelt. */
.karte > .reihe + .filterleiste { margin-top: .8rem; }
.karte > p { padding: 0 .95rem; }
.karte > p:last-child { padding-bottom: .95rem; }
.karte > h2 + p { padding-top: .8rem; }

/* Der Ausbildungsplan benutzt `.inhalt.eng` (Innenmass 0, richtig fuer
   Tabellen), traegt aber gerundete Kaesten - die sollen nicht an der
   Kante kleben. */
.inhalt.eng.az-plan { padding: .8rem .95rem; }
/* Steht ein gepolstertes `.inhalt` darueber, ist dessen unteres Mass
   schon da - sonst klaffte zwischen Hinweis und erstem Modul die
   doppelte Luecke. */
.inhalt + .inhalt.eng.az-plan { padding-top: 0; }


/* --- Einzug im AzubiNet ---------------------------------------------
   Dieselbe Regel wie bei den Karten: was in einer Karte steht und kein
   `.inhalt` ist, klebt sonst am Rahmen. Diese drei Kaesten baue ich
   selbst zusammen, also bekommen sie ihr Mass hier. */
.karte.az-schreiben, .karte.az-erg, .karte.az-zuschau { padding: .95rem; }
.karte.az-schreiben > .reihe, .karte.az-erg > .reihe,
.karte.az-zuschau > .reihe { padding: 0; }

/* Die Zeilen einer Liste bekommen dasselbe Mass wie ein `.inhalt` - die
   Trennlinie laeuft dafuer ueber die volle Breite. Eine Liste, deren
   Zeilen eingerueckt sind, deren Linien aber nicht, sieht aus wie zwei
   Listen. */
.az-zeile { padding-left: .95rem; padding-right: .95rem; }
.az-zeile.klickbar:hover { background: var(--karte2); }

/* Marken und Fortschritt rechts, in fester Breite - damit die Balken
   untereinander liegen. */
.az-leute-rechts { margin-left: auto; display: flex; align-items: center;
    gap: .45rem; flex-wrap: wrap; justify-content: flex-end; }
.az-fortmini { width: 108px; flex: none; }
.az-fortzahl { display: block; text-align: right; font-size: 11px;
    color: var(--grau); }
.az-fortmini .az-balken { margin: .25rem 0 0; height: 4px; }

/* Der Fragenkatalog steht in einem `.inhalt.eng` (Mass 0, richtig fuer
   Tabellen) - seine Kaesten brauchen den Einzug selbst. */
.inhalt.eng > .az-katfrage { margin-left: .95rem; margin-right: .95rem; }
.inhalt.eng > .az-katfrage:first-child { margin-top: .8rem; }
.inhalt.eng > .az-katfrage:last-child { margin-bottom: .8rem; }

html[data-geraet="handy"] .az-leute-rechts { margin-left: 0;
    flex-basis: 100%; justify-content: flex-start; }

/* ---- Diensthandbuch (AP-Handbuch) -------------------------------------

   Ein Nachschlagewerk, kein Arbeitsplatz: links das Verzeichnis, das
   stehen bleibt, rechts genau EIN Kapitel. Alle fuenfzehn untereinander
   waeren eine Bleiwueste, durch die niemand scrollt - und wer etwas
   sucht, sucht ohnehin ueber das Feld oben, nicht mit den Augen.

   Die Grundfarben kommen aus den Themen-Variablen, damit das Handbuch
   jedes Farbschema mitmacht, das jemand sich eingestellt hat. */

.hb-rahmen {
    display: grid; grid-template-columns: 258px minmax(0, 1fr);
    gap: .9rem; align-items: start;
}
.hb-seite {
    position: sticky; top: calc(var(--kopf) + var(--sat) + .6rem);
    min-width: 0;
}

.hb-suchzeile { position: relative; margin-bottom: .55rem; }
.hb-suchzeile input { width: 100%; padding-right: 2rem; }
/* Mittig ueber margin-top, NICHT ueber transform: translateY(-50%).
   Weiter oben steht 'button:not(:disabled):active { transform:
   translateY(1px) scale(.98) }' - das ERSETZT die Zentrierung, sobald
   die Maustaste unten ist. Der Knopf sprang dann 12 px nach unten,
   das mouseup landete im Eingabefeld, und der Browser schickte den
   Klick an den gemeinsamen Vorfahren statt an den Knopf: das Kreuz
   war mit der Maus schlicht nicht zu treffen. Mit el.click() aus dem
   Skript ging es - deshalb faellt so etwas nur im echten Mausklick
   auf (gemessen in handbuch-check.cjs, Abschnitt 7). */
.hb-suchweg {
    position: absolute; right: .3rem; top: 50%; margin-top: -11px;
    width: 22px; height: 22px; border-radius: 6px; padding: 0;
    background: transparent; border: 0; color: var(--grau);
    font-size: 17px; line-height: 1; cursor: pointer;
}
.hb-suchweg:hover { color: var(--hell); background: var(--rand); }

/* Diensthandbuch seit 11.09.: Unit-Handbuch-Engine statt eigener
   Blaetter-Ansicht. Verzeichnis-Spalte und .hb-kap-Artikel sind aus
   dem Markup verschwunden (ihre Regeln unten bleiben stehen - die
   hb-Inhaltsklassen leben WOERTLICH in den Text-Sektionen weiter).
   Die Suchzeile steht seither allein ueber dem Handbuch - in voller
   Seitenbreite saehe sie nach Formular aus. Das Handbuch selbst
   laeuft ueber die volle Breite wie bei den Units (11.09., Justin:
   "das ist viel zu schmal").  */
#a-handbuch .hb-suchzeile { max-width: 340px; }
/* Sektions-Ueberschriften des Diensthandbuchs tragen die Optik der
   alten hb-h-Zwischentitel - seit dem 12.09. ist die Ueberschrift
   ein eigenes Feld der Sektion, kein Markup im Fliesstext mehr. */
/* Kapitel-Navigation in Spielarten (12.09.): Aktenordner-Register und
   Schreibtisch-Symbole; die Seitenleiste nutzt die hb-rahmen/hb-liste-
   Regeln der alten Diensthandbuch-Ansicht weiter (samt Handy-Umbruch
   im Schmaler-Schirm-Block). */
.uh-nav-ordner {
    /* Bei vielen Kapiteln bricht das Register in 2-3 Reihen um
       (Justins Ansage: "dann halt 2 oder 3 reihig") - die Reihen
       brauchen etwas Luft zueinander. */
    gap: .35rem .15rem; align-items: flex-end;
    border-bottom: 2px solid var(--rand);
    padding-bottom: 0; margin-bottom: .9rem;
}
.uh-nav-ordner .uh-kapitel {
    border-radius: 10px 10px 0 0; border-bottom: 0;
    padding: .4rem .9rem .48rem;
    background: rgba(255,255,255,.02);
    position: relative; top: 0;
}
.uh-nav-ordner .uh-kapitel.an {
    background: var(--karte2); border-color: var(--randhell);
    border-top: 2px solid var(--gold); color: var(--hell);
}
.uh-nav-ordner .uh-modus { margin-bottom: .4rem; }
.uh-schreibtisch {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .5rem; padding: .6rem .2rem 1rem;
}
.uh-symbol {
    display: flex; flex-direction: column; align-items: center;
    gap: .5rem; padding: 1rem .6rem .8rem; border-radius: 12px;
    text-align: center; background: transparent;
    border: 1px solid transparent; color: var(--text); font: inherit;
    font-size: 12.5px; line-height: 1.35; cursor: pointer;
    /* Die Knopf-Grundregel setzt nowrap - ein Kapiteltitel braucht
       Zeilen, sonst laufen die Beschriftungen ineinander (dieselbe
       Falle wie bei .hb-liste). */
    white-space: normal; min-width: 0;
}
.uh-symbol-wort { display: block; width: 100%; overflow-wrap: anywhere; }
.uh-symbol:hover { background: var(--karte2); border-color: var(--rand); }
.uh-symbol-bild { font-size: 36px; line-height: 1; }
.uh-symbol-wort b { color: var(--goldhell); }
.uh-nav-stell select { margin-left: .35rem; }

#a-handbuch .uh-inhalt .uhb > h3 {
    margin: 1.25rem 0 .5rem; font-size: 12px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--goldhell);
    padding-bottom: .3rem; border-bottom: 1px solid var(--rand);
}

.hb-liste {
    display: flex; flex-direction: column; gap: 2px;
    max-height: calc(100vh - var(--kopf) - var(--sat) - 170px);
    overflow-y: auto;
    padding-right: 3px;
}
.hb-liste button {
    display: flex; align-items: flex-start; gap: .55rem; width: 100%;
    padding: .42rem .55rem; border-radius: 8px; text-align: left;
    /* Die Grundregel fuer Knoepfe (Zeile 256) setzt white-space:
       nowrap - richtig fuer einen Knopf mit zwei Woertern, falsch
       fuer einen Kapitelnamen. Ohne das hier wurden die Namen im
       Verzeichnis mitten im Wort abgeschnitten, und beim Suchen lag
       die Trefferzahl obendrauf. */
    white-space: normal;
    background: transparent; border: 1px solid transparent;
    color: var(--text); cursor: pointer; font-size: 12.5px; line-height: 1.3;
}
.hb-liste button:hover { background: var(--karte); border-color: var(--rand); }
.hb-liste button.an {
    background: var(--karte2); border-color: var(--randhell);
    color: var(--hell);
}
.hb-liste button.an .hb-lnr { color: var(--goldhell); }
.hb-lnr {
    flex: none; width: 1.35rem; font-variant-numeric: tabular-nums;
    font-weight: 700; font-size: 11px; color: var(--grau);
    padding-top: 1px;
}
.hb-ltitel { flex: 1 1 auto; min-width: 0; }
/* Waehrend gesucht wird, steht neben dem Kapitel, wie viel dort zu holen
   ist - sonst klickt man sich durch fuenfzehn Kapitel, in denen nichts
   steht. */
.hb-ltreffer {
    margin-left: auto; flex: none; font-size: 10px; font-weight: 700;
    padding: 0 5px; border-radius: 7px;
    background: var(--golddun); color: var(--goldhell);
}
.hb-liste button.taub { opacity: .35; }

.hb-inhalt { min-width: 0; max-width: 1060px; }
.hb-kap { display: none; }
.hb-kap.an { display: block; }

.hb-h {
    margin: 1.25rem 0 .5rem; font-size: 12px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--goldhell);
    padding-bottom: .3rem; border-bottom: 1px solid var(--rand);
}
.hb-kopf + .hb-h, .hb-sprung + .hb-h { margin-top: .9rem; }
.hb-text { margin: 0 0 .6rem; font-size: 13px; line-height: 1.6; }

.hb-punkte, .hb-schritte { margin: 0 0 .6rem; padding: 0; list-style: none; }
.hb-punkte li, .hb-schritte li {
    position: relative; padding: .2rem 0 .2rem 1.5rem;
    font-size: 13px; line-height: 1.55;
}
.hb-punkte > li::before {
    content: ""; position: absolute; left: .45rem; top: .78rem;
    width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.hb-verboten > li::before { background: var(--rot); }
/* Die Schritte zaehlen sich selbst - eine Nummer, die im Text steht,
   stimmt nach dem ersten Einschub nicht mehr. */
.hb-schritte { counter-reset: hbs; }
.hb-schritte > li { counter-increment: hbs; padding-left: 1.85rem; }
.hb-schritte > li::before {
    content: counter(hbs); position: absolute; left: 0; top: .22rem;
    width: 19px; height: 19px; border-radius: 6px;
    display: grid; place-items: center;
    font-size: 10.5px; font-weight: 700;
    background: var(--rand); color: var(--goldhell);
}
.hb-punkte b, .hb-schritte b, .hb-text b { color: var(--hell); font-weight: 600; }

.hb-merk {
    margin: .8rem 0; padding: .7rem .85rem;
    border: 1px solid var(--rand); border-left: 3px solid var(--gold);
    border-radius: 0 10px 10px 0;
    background: linear-gradient(180deg, var(--karte) 0%, var(--flaeche) 100%);
}
.hb-merk > b {
    display: block; font-size: 11px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--goldhell); margin-bottom: .3rem;
}
.hb-merk p { margin: 0; font-size: 13px; line-height: 1.6; }
.hb-merk .hb-punkte { margin-bottom: 0; }
.hb-merk.warn { border-left-color: var(--rot); }
.hb-merk.warn > b { color: #ffdcd7; }

.hb-zitat {
    margin: .8rem 0; padding: .7rem .85rem;
    border: 1px dashed var(--randhell); border-radius: 10px;
    background: rgba(77,143,209,.05);
}
.hb-zkopf {
    display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem;
}
.hb-zkopf b {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--blau);
}
.hb-zkopf button { margin-left: auto; }
.hb-zitat p {
    margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--hell);
    font-style: italic;
}

.hb-gitter {
    display: grid; gap: .4rem; margin-bottom: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.hb-code {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .4rem .6rem; border-radius: 8px;
    border: 1px solid var(--rand); background: var(--karte);
}
.hb-code b {
    flex: none; font-size: 12.5px; font-weight: 700; color: var(--goldhell);
    font-variant-numeric: tabular-nums;
}
.hb-code span { font-size: 11.5px; color: var(--grau); line-height: 1.35; }
.hb-code.rot { border-color: #5e2d2c; background: rgba(207,88,80,.07); }
.hb-code.rot b { color: #ff9d95; }
.hb-code.blau { border-color: #234260; background: rgba(77,143,209,.06); }
.hb-code.blau b { color: #8ec0ef; }

.hb-marken { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.hb-mark {
    padding: .22rem .5rem; border-radius: 7px; font-size: 11.5px;
    border: 1px solid var(--rand); background: var(--karte); color: var(--text);
}
.hb-mark.rot { border-color: #5e2d2c; background: rgba(207,88,80,.08); color: #f0b4af; }
.hb-mark.gut { border-color: #2b5340; background: rgba(83,168,120,.08); color: #a5dcbe; }

.hb-tab { margin-bottom: .5rem; }
.hb-tab th {
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--grau); text-align: left; padding: .35rem .55rem;
    border-bottom: 1px solid var(--rand);
}
.hb-tab td {
    padding: .42rem .55rem; border-bottom: 1px solid var(--rand);
    font-size: 12.5px; line-height: 1.5; vertical-align: top;
}
.hb-tab tr:last-child td { border-bottom: 0; }
.hb-tab tbody tr:hover td { background: rgba(201,164,92,.04); }
.hb-tab.hb-schmal td:first-child, .hb-tab.hb-schmal th:first-child {
    width: 34%; white-space: nowrap;
}
.hb-mod {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px; letter-spacing: .02em; color: var(--goldhell);
    background: var(--rand); padding: .1rem .35rem; border-radius: 5px;
    white-space: nowrap;
}
/* Sonderfahrzeuge stehen unter einem Vorbehalt - das soll man sehen,
   ohne die Spalte "Freigabe" zu lesen. */
.hb-tab tr.hb-sonder td:first-child { color: var(--gelb); }

.hb-zwei { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; }

/* ---- Suche ------------------------------------------------------------- */

.hb-treffer { margin-bottom: .4rem; }
.hb-tkopf {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--grau); margin-bottom: .5rem;
}
.hb-tr {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: .5rem .7rem; margin-bottom: .35rem; border-radius: 9px;
    border: 1px solid var(--rand); background: var(--karte); color: var(--text);
}
.hb-tr:hover { border-color: var(--randhell); background: var(--karte2); }
.hb-tweg {
    display: block; font-size: 10px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gold); margin-bottom: .18rem;
}
.hb-ttext {
    font-size: 12.5px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.hb-treffer mark, .hb-blaetter mark {
    background: rgba(201,164,92,.28); color: var(--hell);
    border-radius: 3px; padding: 0 1px;
}
/* Der Sprung aus der Trefferliste landet mitten im Kapitel. Ohne ein
   kurzes Aufleuchten sucht man die Zeile, zu der man gerade gesprungen
   ist, ein zweites Mal mit den Augen. */
@keyframes hb-blitz {
    from { background: rgba(201,164,92,.30); }
    to   { background: transparent; }
}
.hb-blitz { animation: hb-blitz 1.6s ease-out; border-radius: 6px; }
:root[data-bewegung="sparsam"] .hb-blitz { animation: none;
    box-shadow: 0 0 0 2px rgba(201,164,92,.45); border-radius: 6px; }

/* ---- Schmaler Schirm --------------------------------------------------- */

@media (max-width: 900px) {
    .hb-rahmen { grid-template-columns: 1fr; }
    .hb-seite { position: static; }
    /* Aus dem Verzeichnis wird eine Reihe, durch die man wischt - eine
       Liste mit fuenfzehn Zeilen ueber dem Text waere auf dem Handy die
       halbe Seite, bevor das erste Wort kommt. */
    .hb-liste {
        flex-direction: row; max-height: none; overflow-x: auto;
        padding-bottom: .3rem; scrollbar-width: none;
    }
    .hb-liste::-webkit-scrollbar { display: none; }
    .hb-liste button { width: auto; white-space: nowrap; flex: none; }
    .hb-ltitel { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
    .hb-zwei { grid-template-columns: 1fr; }
}

/* ---- Handbuch: Kopf, Sprungleiste, Blaetterfuss ------------------------

   Ein Kapitel fing bisher mit seiner ersten Ueberschrift an. Wer aus der
   Suche hineinsprang, wusste nicht, wo er gelandet war - im Verzeichnis
   links stand es, aber dorthin schaut man nicht, wenn man liest. */

.hb-kopf {
    display: flex; align-items: flex-start; gap: .85rem;
    padding-bottom: .75rem; margin-bottom: .2rem;
    border-bottom: 1px solid var(--rand); position: relative;
}
/* Der Messingstrich unter dem Kopf - dasselbe Gold wie am Abzeichen, und
   nur so breit wie die Nummer, damit es eine Marke bleibt und kein
   Balken wird. */
.hb-kopf::after {
    content: ""; position: absolute; left: 0; bottom: -1px;
    width: 44px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--goldhell), var(--gold));
}
.hb-knr {
    flex: none; font-size: 30px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
    color: transparent; -webkit-text-stroke: 1.4px var(--gold);
    opacity: .85; padding-top: 2px;
}
.hb-kwort { min-width: 0; }
.hb-ktitel {
    display: block; font-size: 17px; font-weight: 700; color: var(--hell);
    line-height: 1.2; letter-spacing: .01em;
}
.hb-kunter {
    display: block; font-style: normal; font-size: 11.5px; color: var(--grau);
    margin-top: .2rem; letter-spacing: .03em;
}

.hb-sprung {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
    margin: .7rem 0 .2rem;
}
.hb-swort {
    font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--grau); margin-right: .2rem;
}
.hb-sprung button {
    padding: .22rem .55rem; border-radius: 20px; cursor: pointer;
    font-size: 11px; line-height: 1.4;
    border: 1px solid var(--rand); background: var(--karte);
    color: var(--text);
}
.hb-sprung button:hover {
    border-color: var(--gold); color: var(--goldhell); background: var(--karte2);
}

.hb-fuss {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    margin-top: 1.6rem; padding-top: .9rem; border-top: 1px solid var(--rand);
}
.hb-blatt {
    display: block; text-align: left; cursor: pointer;
    padding: .55rem .8rem; border-radius: 10px;
    border: 1px solid var(--rand); background: var(--karte); color: var(--text);
    min-width: 0;
}
.hb-blatt.rechts { text-align: right; }
.hb-blatt:hover { border-color: var(--randhell); background: var(--karte2); }
.hb-blatt i {
    display: block; font-style: normal; font-size: 9.5px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
    margin-bottom: .15rem;
}
.hb-blatt b {
    display: block; font-size: 12.5px; font-weight: 600; color: var(--hell);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hb-blatt.links i::before { content: "\2190  "; }
.hb-blatt.rechts i::after { content: "  \2192"; }

/* ---- Verzeichnis: Gruppen ---------------------------------------------- */

.hb-gruppe {
    font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold); padding: .75rem .55rem .3rem;
}
.hb-liste > .hb-gruppe:first-child { padding-top: .1rem; }

/* ---- Tabellen mit Bedeutung -------------------------------------------- */

/* Der Vorbehalt steht EINMAL ueber den Sonderfahrzeugen statt achtmal in
   derselben Spalte. Achtmal derselbe Satz ist keine Auskunft mehr. */
.hb-vorbehalt {
    padding: .45rem .7rem; margin-bottom: .45rem;
    border-radius: 0 8px 8px 0; font-size: 12px; color: #f0dcae;
    border: 1px solid #5c4a22; border-left: 3px solid var(--gold);
    background: rgba(201,164,92,.08);
}
.hb-vorbehalt b { color: var(--goldhell); font-weight: 700; }

/* Die Teams aus dem Kapitel darueber, sichtbar in der Rangtabelle. */
.hb-teamzeile td {
    font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 700; padding-top: .7rem; border-bottom: 0;
}
.hb-tab tbody tr.hb-teamzeile:hover td { background: transparent; }
.hb-teamzeile[data-team="start"]   td { color: var(--grau); }
.hb-teamzeile[data-team="green"]   td { color: #7fc79b; }
.hb-teamzeile[data-team="silver"]  td { color: #b9c4d4; }
.hb-teamzeile[data-team="gold"]    td { color: var(--goldhell); }
.hb-teamzeile[data-team="red"]     td { color: #e79088; }
.hb-teamzeile[data-team="leitung"] td { color: #a99ae4; }
.hb-tab tbody tr[class*="hb-t-"] td:first-child {
    border-left: 2px solid transparent; padding-left: .8rem;
}
.hb-t-start   td:first-child { border-left-color: #3a4353; }
.hb-t-green   td:first-child { border-left-color: #53a878; }
.hb-t-silver  td:first-child { border-left-color: #8d9bb0; }
.hb-t-gold    td:first-child { border-left-color: var(--gold); }
.hb-t-red     td:first-child { border-left-color: var(--rot); }
.hb-t-leitung td:first-child { border-left-color: var(--lila); }

/* ---- Lesbarkeit --------------------------------------------------------

   Fliesstext bekommt eine Zeilenbreite. Ueber etwa 90 Zeichen findet das
   Auge beim Umbruch den Zeilenanfang nicht mehr zuverlaessig - auf einem
   breiten Schirm lief der Text sonst ueber die volle Spalte. Tabellen und
   Gitter bleiben ausgenommen, die brauchen die Breite. */
.hb-text, .hb-punkte, .hb-schritte, .hb-merk, .hb-zitat { max-width: 78ch; }

@media (max-width: 900px) {
    .hb-liste .hb-gruppe { display: none; }
    .hb-fuss { grid-template-columns: 1fr; }
    .hb-blatt.rechts { text-align: left; }
    .hb-knr { font-size: 26px; }
    .hb-ktitel { font-size: 15.5px; }
}

/* Eine Tabelle mit drei kurzen Spalten ueber 1060 px zu ziehen macht aus
   "1 | Recruit | Rang 1" drei einsame Inseln. Die globale Regel sagt
   table{width:100%}; hier ist auto richtig. */
.hb-tab.hb-eng { width: auto; min-width: min(620px, 100%); }
.hb-tab.hb-eng.hb-schmal td:first-child,
.hb-tab.hb-eng.hb-schmal th:first-child { width: auto; padding-right: 2.5rem; }

/* Unten rechts stehen die schwebenden Knoepfe (Akten, Postfach) fest im
   Bild. Der Blaetterfuss ist das Einzige, was oft genau dort landet - und
   dann liest man den halben Kapitelnamen nicht mehr. */
html[data-geraet="tisch"] .hb-fuss { padding-right: 58px; }

/* ==== Einstellungsbogen: Haken, Bewertung, Ergebnis =================
   Justin, 30.08.: "bei hr auch den einstellungstest schoener machen
   bitte, als auch die moeglichkeiten, z.b. bei der einarbeitung dass
   verena ... job vergeben etc abhakbar machen kann anstatt das auf ja
   zu stellen". */

/* ---- Der Haken ---------------------------------------------------- */
/* `label { text-transform: uppercase; 10px; gold }` gilt global und ist
   richtig fuer eine Feldbeschriftung. Der Text neben einem Haken ist
   aber der PUNKT selbst und kein Etikett - hier zurueckgenommen. Ein
   <label> bleibt es trotzdem, damit ein Klick auf den Text den Haken
   setzt. */
.bg-haken, .bg-haken-t b, .bg-stufe {
    text-transform: none; letter-spacing: 0; color: var(--text);
    font-size: 13px; font-weight: 400; margin-bottom: 0;
}
.bg-haken {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .5rem .7rem; border: 1px solid var(--rand); border-radius: 8px;
    background: var(--karte2); cursor: pointer;
    transition: border-color .12s, background .12s;
}
.bg-haken:hover { border-color: color-mix(in srgb, var(--gold) 40%, var(--rand)); }
.bg-haken.an {
    border-color: color-mix(in srgb, var(--gruen) 45%, var(--rand));
    background: color-mix(in srgb, var(--gruen) 8%, var(--karte2));
}
.bg-haken input { width: 17px; height: 17px; margin-top: .1rem; flex: 0 0 auto; }
.bg-haken-t { display: block; min-width: 0; }
.bg-haken-t b { font-weight: 600; }
.bg-haken-t i { display: block; font-style: normal; font-size: 11.5px;
                color: var(--grau); margin-top: .1rem; }
.bg-haken-t .bg-stempel { color: var(--gruen); }

.wz-einw-kopf { display: flex; align-items: center; gap: .7rem;
                flex-wrap: wrap; margin-bottom: .6rem; }
.wz-einw-kopf p { margin: 0; flex: 1 1 220px; }
.wz-einw-kopf .rechts { display: flex; align-items: center; gap: .6rem; }

/* ---- Die bewertete Frage ------------------------------------------ */
.bg-bewertung {
    border: 1px solid var(--rand); border-radius: 9px;
    padding: .65rem .8rem; background: var(--karte2);
}
/* KEIN <label> und damit kein uppercase: eine Frage kann zwei Zeilen
   lang sein, und in Grossbuchstaben ist sie dann eine Wand. */
.bg-frage {
    font-size: 13px; line-height: 1.45; margin-bottom: .35rem;
    display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap;
}
.bg-frage .bg-punkte {
    margin-left: auto; font-size: 10.5px; color: var(--grau);
    letter-spacing: .04em; white-space: nowrap;
}
/* „Pflicht" gehoert hinter die Frage, nicht in eine eigene Zeile. */
.bg-frage .pflicht {
    font-style: normal; font-size: 9.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--gold); white-space: nowrap;
}
.bg-erwartet {
    font-size: 12px; line-height: 1.45; color: var(--grau);
    border-left: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
    padding: .1rem 0 .1rem .55rem; margin: 0 0 .5rem;
}
.bg-erwartet b { color: var(--goldhell); font-weight: 600; }

.bg-stufen { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.bg-stufe {
    display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
    border: 1px solid var(--rand); border-radius: 999px;
    padding: .22rem .7rem; font-size: 11.5px; color: var(--grau);
    text-transform: none; letter-spacing: 0; margin-bottom: 0;
    /* Kein nowrap-Erbe und kein transform: siehe Kopf des Flick-Skripts. */
    white-space: nowrap; user-select: none;
}
.bg-stufe input { position: absolute; opacity: 0; pointer-events: none; }
.bg-stufe:hover { color: var(--hell); }
.bg-stufe.richtig.an   { color: var(--gruen);
    border-color: color-mix(in srgb, var(--gruen) 55%, var(--rand));
    background: color-mix(in srgb, var(--gruen) 12%, transparent); }
.bg-stufe.teilweise.an { color: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 55%, var(--rand));
    background: color-mix(in srgb, var(--gold) 12%, transparent); }
.bg-stufe.falsch.an    { color: var(--rot);
    border-color: color-mix(in srgb, var(--rot) 55%, var(--rand));
    background: color-mix(in srgb, var(--rot) 12%, transparent); }
.bg-leeren { margin-left: auto; }
.bg-notiz { margin-top: .45rem; font-size: 12px; }
.bg-wissen { margin-top: .2rem; }
.bg-wissen .div-opt span { white-space: normal; }

/* ---- Der Ergebnisbalken ------------------------------------------- */
.bg-ergebnis {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .5rem .8rem; border-radius: 9px; margin-bottom: .7rem;
    border: 1px solid var(--rand); background: var(--karte2);
    font-size: 12.5px;
}
.bg-ergebnis.gut {
    border-color: color-mix(in srgb, var(--gruen) 45%, var(--rand));
    background: color-mix(in srgb, var(--gruen) 8%, var(--karte2));
}
.bg-ergebnis.schlecht {
    border-color: color-mix(in srgb, var(--rot) 40%, var(--rand));
    background: color-mix(in srgb, var(--rot) 7%, var(--karte2));
}
.bg-ergebnis.leerlauf { border-style: dashed; }
.bg-ergebnis b { font-size: 15px; }
.bg-ergebnis .bg-erg-p { font-weight: 700; color: var(--goldhell); }
.bg-ergebnis .klein { margin-left: auto; }

/* ---- Der Katalog-Editor: Wahlliste und Erklaerzeile ---------------- */
.fk-wozu {
    font-size: 11.5px; line-height: 1.45; color: var(--grau);
    border-left: 2px solid var(--rand); padding-left: .55rem;
    margin-bottom: .1rem;
}
.fk-punkte input { max-width: 90px; }
.fk-wahl { display: flex; flex-direction: column; gap: .35rem; }
.fk-wahlzeile { display: flex; align-items: center; gap: .45rem; }
.fk-wahlzeile input[type=text], .fk-wahlzeile > input:not([type=checkbox]) {
    flex: 1 1 auto; min-width: 0;
}
.fk-wahlzeile.gut > input:not([type=checkbox]) {
    border-color: color-mix(in srgb, var(--gruen) 45%, var(--rand));
}
.fk-schieben { display: flex; gap: .15rem; flex: 0 0 auto; }
.fk-schieben button { padding: .18rem .4rem; line-height: 1.1; }
.fk-richtig {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex: 0 0 auto; cursor: pointer;
    border: 1px solid var(--rand); border-radius: 6px;
}
.fk-richtig input { width: 15px; height: 15px; }

/* ---- AzubiNet: der Loeschfuss ------------------------------------- */
.az-loeschfuss {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    margin-top: 1rem; padding-top: .7rem;
    border-top: 1px solid var(--rand);
}

/* ---- Bestehensgrenze im Fragenkatalog ------------------------------ */
.fk-grenze {
    display: inline-flex; align-items: center; gap: .4rem;
    text-transform: none; letter-spacing: 0; font-size: 11.5px;
    color: var(--grau); margin-bottom: 0;
}
.fk-grenze input { width: 62px; padding: .22rem .35rem; font-size: 12px; }
/* Die laufende Nummer vor einer Pruefungsfrage. */
.az-katkopf .az-nr { min-width: 20px; }

/* ==== Archivakte und Vorgeschichte ==================================
   Justin (Leadership & IA), 30.08.: die Akte bleibt erhalten, und beim
   Wiedereinstellen muss man hineinsehen koennen. */
.ak-austritt {
    padding: .6rem .8rem; border-radius: 9px; margin-bottom: .8rem;
    border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--rand));
    background: color-mix(in srgb, var(--gold) 7%, var(--karte2));
}
/* NUR die DIREKTEN Kinder. Ohne den `>` traf die Regel auch ein <b>
   INNERHALB eines Satzes ("wird <b>diese</b> Akte übernommen") und
   brach ihn dort um - gemessen im Bildschirmfoto. */
.ak-austritt > b { display: block; color: var(--goldhell); font-size: 13px; }
.ak-austritt > span { display: block; font-size: 12px; color: var(--grau);
                      margin-top: .15rem; }

.vp-vg { display: flex; flex-direction: column; gap: .28rem;
         margin-top: .25rem; }
.vp-vg-zeile { font-size: 12px; line-height: 1.45; color: var(--text); }
.vp-vg-zeile i { display: block; font-style: normal; font-size: 11px;
                 color: var(--grau); }
.vp-vg-zeile.schwer { color: var(--hell); }
.vp-vg-zeile .rot { color: var(--rot); }

/* Handbuch-Effekte trotz ruhiger Bewegung */
/* "Bewegung: sparsam" und die System-Einstellung "reduzierte
   Animationen" meinen die Unruhe der OBERFLAECHE. Die Effekte in den
   Unit-Handbuechern sind dagegen bewusst gesetzte Gestaltung - ohne
   diese Ausnahmen sah jeder mit der Vorgabe-Einstellung schlicht
   keine ("effekte funktionieren nicht", 02.09.). */
:root[data-bewegung="sparsam"] .uh-fx,
.uh-fx {
    transition-property: opacity, transform !important;
    transition-duration: var(--fxdauer, .8s) !important;
    transition-timing-function: ease !important;
    transition-delay: var(--fxverzug, 0s) !important;
}
:root[data-bewegung="sparsam"] .uhb-hero[data-bewegt] .uhb-hero-bild,
.uhb-hero[data-bewegt] .uhb-hero-bild {
    animation: uh-kenburns 18s ease-in-out infinite alternate !important;
}
:root[data-bewegung="sparsam"] .uhb-hero-text.uht-schimmer h2,
.uhb-hero-text.uht-schimmer h2 {
    animation: uh-schimmer 5.5s linear infinite !important;
}
:root[data-bewegung="sparsam"] .uhb-hero-text.uht-gluehen h2,
.uhb-hero-text.uht-gluehen h2 {
    animation: uh-gluehen 2.8s ease-in-out infinite !important;
}
:root[data-bewegung="sparsam"] .uhb-galerie a img,
.uhb-galerie a img {
    transition: transform .35s ease, filter .35s ease !important;
}
:root[data-bewegung="sparsam"] .uhb-knopf,
a.uhb-knopf {
    transition: transform .18s ease, box-shadow .18s ease !important;
}
@media (prefers-reduced-motion: reduce) {
    .uh-fx { transition-duration: var(--fxdauer, .8s) !important; }
    .uhb-hero[data-bewegt] .uhb-hero-bild {
        animation-duration: 18s !important;
        animation-iteration-count: infinite !important;
    }
    .uhb-hero-text.uht-schimmer h2 {
        animation-duration: 5.5s !important;
        animation-iteration-count: infinite !important;
    }
    .uhb-hero-text.uht-gluehen h2 {
        animation-duration: 2.8s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ---- Schmuck-Schalter aus dem Aussehen-Dialog ---------------------------
   Alles hier haengt an data-Marken am <html>, die aussehenAnwenden() und
   der Fruehstart in app.blade.php setzen - der Wechsel braucht kein
   einziges Neuzeichnen. OHNE Marke gilt der Standard: Ring "Fuehrung
   zuerst", alle Umrandungen und Marken an, kein Muster, keine Streifen. */

html[data-uring="alle"] .u-ring::after {
    background: conic-gradient(from -90deg, var(--kreis, #7e8899));
}
html[data-uring="aus"] .u-ring::after { display: none; }
/* Ohne Ring bekommt der Buchstaben-Avatar seinen normalen Messing-Saum
   zurueck - im Ring traegt er sonst einen dunklen. */
html[data-uring="aus"] .u-ring > .avatar {
    border-color: var(--golddun); box-shadow: 0 0 0 1px rgba(201,164,92,.25);
}

html[data-divum="aus"] .crew.div-um, html[data-divum="aus"] .pool-chip.div-um {
    border-color: var(--rand); box-shadow: none;
}
/* "Im Dienst" behaelt seinen gruenen Rand auch ohne Divisions-Farbe. */
html[data-divum="aus"] .crew.da.div-um { border-color: #1e4a30; }

/* Beide Welten: .u-chip/.rang-chip stehen in den Listen, .rk/.rk.uf
   an den Tafel-Chips (chipMarke) - wer die Marken abschaltet, meint
   beide ("die drei gehen nicht", 04.09.: getestet wurde auf der
   Tafel, versteckt wurde nur in den Listen). */
html[data-chips="aus"] .u-chip,
html[data-chips="aus"] .rk.uf { display: none; }
html[data-rangchips="aus"] .rang-chip,
html[data-rangchips="aus"] .rk:not(.uf) { display: none; }


/* Schriftarten: auch Knoepfe und Felder, die erben von sich aus nicht. */
html[data-schriftart="schmal"] body, html[data-schriftart="schmal"] button,
html[data-schriftart="schmal"] input, html[data-schriftart="schmal"] select,
html[data-schriftart="schmal"] textarea {
    font-family: "Arial Narrow", "Segoe UI", system-ui, sans-serif;
}
html[data-schriftart="amt"] body, html[data-schriftart="amt"] button,
html[data-schriftart="amt"] input, html[data-schriftart="amt"] select,
html[data-schriftart="amt"] textarea {
    font-family: Georgia, "Times New Roman", serif;
}
html[data-schriftart="maschine"] body, html[data-schriftart="maschine"] button,
html[data-schriftart="maschine"] input, html[data-schriftart="maschine"] select,
html[data-schriftart="maschine"] textarea {
    font-family: Consolas, ui-monospace, Menlo, monospace;
}

/* Das Muster liegt HINTER allem Inhalt (z-index -1): Karten und Tabellen
   decken es mit ihren eigenen Flaechen ab, sichtbar bleibt es nur auf dem
   freien Grund. pointer-events aus, damit es nie einen Klick faengt. */
html[data-muster]::before {
    content: ''; position: fixed; inset: 0; z-index: -1;
    pointer-events: none;
}
html[data-muster="punkte"]::before {
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
    background-size: 22px 22px;
}
html[data-muster="raster"]::before {
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 34px 34px;
}
html[data-muster="schraege"]::before {
    background-image: repeating-linear-gradient(45deg,
        rgba(255,255,255,.022) 0 1px, transparent 1px 16px);
}

/* --------------------------------------------------------------------
   Die Doku am Kartenobjekt (Detectives, 09.09.) - Beschreibung,
   Bewirtschafter und eine kleine Bildergalerie in der Seitenspalte. */
.kt-doku {
    margin-top: .9rem; border-top: 1px solid var(--rand);
    padding-top: .7rem;
}
.kt-doku h4 {
    margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--stumm, #8b93a3);
}
.kt-doku textarea {
    width: 100%; resize: vertical; min-height: 74px; font: inherit;
    font-size: .85rem;
}
.kt-d-bewirt {
    display: flex; gap: .45rem; align-items: baseline; margin: 0 0 .45rem;
}
.kt-d-bewirt span {
    font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--stumm, #8b93a3); flex: none;
}
.kt-d-text { margin: 0 0 .5rem; font-size: .85rem; line-height: 1.45; }
.kt-d-dateien { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; }
.kt-d-datei {
    display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem;
    border: 1px solid var(--rand); border-radius: 8px;
    background: color-mix(in srgb, var(--rand) 22%, transparent);
    font-size: .8rem;
}
.kt-d-datei a { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.kt-d-datei i { font-style: normal; flex: none; }
.kt-d-datei .kt-d-weg { position: static; margin-left: auto; flex: none; }
.kt-d-bilder {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: .5rem; margin-top: .6rem;
}
.kt-d-bild { position: relative; margin: 0; }
.kt-d-bild img {
    width: 100%; height: 74px; object-fit: cover; display: block;
    border-radius: 8px; border: 1px solid var(--rand);
    background: color-mix(in srgb, var(--rand) 30%, transparent);
}
.kt-d-bild figcaption {
    font-size: .68rem; line-height: 1.25; padding-top: .15rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kt-d-bild figcaption i { color: var(--stumm, #8b93a3); font-style: normal; }
.kt-d-bild figcaption i::before { content: " · "; }
.kt-d-bild figcaption:empty { display: none; }
.kt-d-weg {
    position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
    min-height: 0; padding: 0; margin: 0; border-radius: 6px;
    font-size: 11px; line-height: 1; background: rgba(10, 12, 18, .72);
    border: 1px solid var(--rand); color: #eef2f8;
}
.kt-e-d { font-style: normal; font-size: 11px; flex: none; }

/* ---- Orte & Routen (Detectives): die Karten-Doku als Liste -------- */
.eo-zeile { display:flex; align-items:center; gap:.55rem;
    padding:.45rem .35rem; border-bottom:1px solid var(--rand);
    cursor:pointer; }
.eo-zeile:hover { background:var(--karte2); }
.eo-zeile b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.eo-marken { margin-left:auto; white-space:nowrap; }
.eo-kopfzeile { display:flex; align-items:center; gap:.6rem;
    flex-wrap:wrap; margin-bottom:.7rem; }
.eo-kopfzeile .rechts { margin-left:auto; }

/* Nur-unit-intern markierte Handbuch-Sektionen (09.09.): der Server
   liefert sie ausschliesslich Mitgliedern/Pflegern aus - die Marke
   erinnert die, die sie sehen, dass draussen niemand mitliest. */
.uh-sektion.uh-sek-intern {
    outline: 1px dashed rgba(233, 205, 141, .28);
    outline-offset: 4px;
}
.uh-sektion .uh-intern-marke {
    position: absolute; top: .3rem; left: .3rem; font-size: .72rem;
    color: var(--gold); background: rgba(10, 15, 24, .78);
    border: 1px solid var(--rand); border-radius: 7px;
    padding: .1rem .4rem; opacity: .75;
}

/* Die Kontroll-Leiste ("Bist du noch im Dienst?") stand hier.
   Am 21.09. mit der Nachfrage selbst entfernt - Justin: "komplett die
   privat nachrichten an die leute raus also auch die im dienst frage". */


/* Der Automatik-Schalter im Profilkopf (11.09.) - Selbstauskunft wie
   Handy und Twitch daneben, aber mit einem Zustand darunter. */
.mp-auto { margin-top: .5rem; font-size: .9rem; }
.mp-auto-schalter {
    display: flex; align-items: center; gap: .5rem; cursor: pointer;
    color: var(--text);
}
.mp-auto-schalter input { width: 1rem; height: 1rem; }
.mp-auto-sicht { margin: .25rem 0 0 1.5rem; font-size: .85rem; }
.mp-auto-tipp {
    margin: .4rem 0 0 1.5rem; padding: .5rem .65rem;
    background: color-mix(in srgb, var(--gelb) 12%, var(--karte));
    border: 1px solid color-mix(in srgb, var(--gelb) 35%, var(--rand));
    border-radius: 9px; font-size: .82rem; line-height: 1.4;
}

/* ===================================================================
   DIE UMSCHALT-LEISTE (11.09.) - nur der Vollzugriff (Betreuer
   ausserhalb der Fraktion) sieht sie. Fixes Overlay ganz oben, zwei
   Reiter: PD intern <-> Gast-Leitstelle.
   =================================================================== */
#modus-leiste {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    display: flex; align-items: center; gap: .5rem;
    padding: .3rem .7rem;
    background: color-mix(in srgb, var(--gold) 18%, #0b0f18);
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rand));
    font-size: .82rem;
}
#modus-leiste .ml-was {
    color: var(--gold); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; font-size: .72rem; margin-right: .3rem;
}
#modus-leiste button {
    padding: .2rem .7rem; border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--rand));
    background: transparent; color: var(--text); cursor: pointer;
}
#modus-leiste button.an {
    background: color-mix(in srgb, var(--gold) 30%, var(--karte));
    color: var(--hell); border-color: var(--gold);
    font-weight: 700; cursor: default;
}
/* Der Kopf steht sonst unter der festen Leiste. Nur wenn sie da ist. */
body.mit-modus-leiste header { top: 2rem; }
body.mit-modus-leiste #anwendung { padding-top: 2rem; }


/* ==========================================================================
   DIE LEITSTELLE SELBST EINRICHTEN (13.09.2026)

   Zwei Dinge, die zusammengehoeren:

   1. Die BUEHNE - drei Zonen (oben ueber die ganze Breite, links,
      rechts) mit ziehbarer Trennlinie. Justin: "links das allgemeine
      und rechts dann die anderen streifen, generell am besten so dass
      man die felder sich so zurecht ziehen kann wie man will und auch
      anordnen, diese individualisierungen gehen mir naemlich so auf die
      nerven weil jeder hat was anderes". Also die letzte Einstellung
      statt der naechsten: wer etwas anders will, zieht es sich hin.

   2. Der TAFEL-STIL aus dem Aussehen (data-lsstil am <html>): "dass
      alles mehr gecrammed ist ... vorallem wenn vinewood spaeter
      alleine da steht". Gesetzt wird die Marke nur fuer kompakt und
      gedraengt - "tafel" loescht sie, wie jede andere Aussehen-Marke.
      Darum traegt html[data-lsstil] den ganzen Regelsatz und die zwei
      Zeilen darunter nur noch die Masse.
   ========================================================================== */

/* Die Leitstelle nimmt die ganze Fensterbreite - nur sie, und nur die
   neue Tafel. `main` deckelt auf 1440px, was fuer Text und Listen
   richtig ist; eine Tafel dagegen soll den Schirm nutzen, den es gibt.
   `:has` kann jeder Browser, der auch die Buehne malt; wer es nicht
   kann, bekommt die gedeckelte Breite und damit den Stand von vorher. */
html:not([data-lsaufbau="klassisch"]) main:has(#a-leitstelle.an) {
    max-width: none;
}

.ls-buehne {
    display: grid;
    column-gap: .35rem;
    row-gap: calc(.8rem * var(--ls-eng, 1));
    /* Eine Spalte ist die Vorgabe - das Raster kommt aus den Regeln
       darunter, je nachdem, WELCHE Spalten etwas zu zeigen haben. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "oben" "links" "mitte" "rechts";
}
.ls-zone[data-sp="oben"] { grid-area: oben; }
.ls-zone[data-sp="links"] { grid-area: links; }
.ls-zone[data-sp="mitte"] { grid-area: mitte; }
.ls-zone[data-sp="rechts"] { grid-area: rechts; }
#l-teiler { grid-area: t1; }
#l-teiler2 { grid-area: t2; }
/* Eine Linie ohne zwei Nachbarn hat nichts zu teilen. */
.ls-teiler { display: none; }
/* Eine Spalte, die nichts zu zeigen hat. Zwei Klassen, damit sie die
   `display: flex` der Zone schlaegt - `hidden` koennte das nicht. */
.ls-zone.ls-aus { display: none; }

/* Die Spuren. Die Trennlinien sind eigene, schmale Spalten - so
   bleiben sie genau zwischen den Zonen und brauchen kein
   position:absolute. Die Untergrenzen stehen in PIXELN: 28 % sind an
   einem breiten Schirm bequem und an einem 1000px-Fenster eine
   Bruchkante; darunter bricht in den Karten der Text.
   WELCHE Regel gilt, entscheidet lsPlanAnwenden() an data-spalten -
   nach dem, was in den Spalten wirklich steht, nicht nach dem Plan. */
.ls-buehne[data-spalten="links-mitte-rechts"] {
    grid-template-columns: minmax(220px, var(--ls-links, 28%)) 12px
                           minmax(0, 1fr) 12px
                           minmax(220px, var(--ls-rechts, 26%));
    grid-template-areas: "oben oben oben oben oben"
                         "links t1 mitte t2 rechts";
}
.ls-buehne[data-spalten="links-mitte"] {
    grid-template-columns: minmax(250px, var(--ls-links, 28%)) 12px
                           minmax(0, 1fr);
    grid-template-areas: "oben oben oben" "links t1 mitte";
}
.ls-buehne[data-spalten="links-rechts"] {
    grid-template-columns: minmax(250px, var(--ls-links, 28%)) 12px
                           minmax(0, 1fr);
    grid-template-areas: "oben oben oben" "links t1 rechts";
}
.ls-buehne[data-spalten="mitte-rechts"] {
    grid-template-columns: minmax(0, 1fr) 12px
                           minmax(220px, var(--ls-rechts, 26%));
    grid-template-areas: "oben oben oben" "mitte t2 rechts";
}
.ls-buehne[data-spalten="links-mitte-rechts"] #l-teiler,
.ls-buehne[data-spalten="links-mitte"] #l-teiler,
.ls-buehne[data-spalten="links-rechts"] #l-teiler,
.ls-buehne[data-spalten="links-mitte-rechts"] #l-teiler2,
.ls-buehne[data-spalten="mitte-rechts"] #l-teiler2 { display: block; }
.ls-zone {
    display: flex; flex-direction: column; min-width: 0;
    gap: calc(.8rem * var(--ls-eng, 1));
    align-content: start;
}
/* Die Bloecke tragen im Rumpf eigene Abstaende, teils inline
   (style="margin-bottom:.7rem", die Knopfreihe sogar oben und unten) -
   dagegen kommt nur !important an. Der Abstand gehoert jetzt der Zone,
   sonst addiert sich beides und die Zonen fluchten nicht mehr. */
.ls-zone > [data-lsf] { margin: 0 !important; }
/* Ein LEERES Fach kostet sonst trotzdem eine Luecke: die Zone hat
   row-gap, und der zaehlt je Kind - auch wenn das Kind 0px hoch ist
   (gemessen: 12,8px fuer die leere Verbund-Leiste bei einem PD).
   Im Anordnen-Modus greift das nicht, weil dort ein Griff im Fach
   haengt - beim Anordnen soll man auch die leeren Faecher sehen. */
.ls-zone > [data-lsf]:empty { display: none; }
.ls-zone:empty { display: none; }

.ls-teiler {
    align-self: stretch; border-radius: 999px; cursor: col-resize;
    background: var(--rand); opacity: .5;
    transition: opacity .12s ease, background .12s ease;
    touch-action: none;   /* sonst scrollt der Finger die Seite */
}
.ls-teiler:hover, .ls-buehne.zieht .ls-teiler {
    opacity: 1; background: var(--gold);
}
.ls-buehne.zieht { cursor: col-resize; user-select: none; }

/* --- Anordnen-Modus ------------------------------------------------- */
.ls-ordnenbalken {
    /* Unter dem festen Kopf, nicht an der Fensterkante - sonst liegt
       der Balken beim Scrollen hinter der Leiste (im Bild gesehen).
       Dasselbe Mass wie die Handbuch-Seitenleiste. */
    position: sticky; top: calc(var(--kopf) + var(--sat) + .4rem);
    z-index: 6;
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    margin: 0 0 .7rem; padding: .5rem .7rem; border-radius: 9px;
    background: linear-gradient(180deg, var(--karte2) 0%, var(--karte) 100%);
    border: 1px solid var(--gold);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.ls-ordnenbalken > b { color: var(--goldhell); font-size: 12.5px; }
.ls-ob-knoepfe { margin-left: auto; display: flex; gap: .4rem; }

.lsf-griff {
    display: flex; align-items: center; gap: .5rem;
    margin: 0 0 .35rem; padding: .3rem .45rem; border-radius: 7px;
    background: rgba(201,164,92,.1); border: 1px dashed var(--gold);
    cursor: grab; font-size: 11px; color: var(--goldhell);
}
.lsf-griff:active { cursor: grabbing; }
.lsf-punkte { opacity: .7; letter-spacing: .1em; }
.lsf-knoepfe { margin-left: auto; display: flex; gap: .25rem; }
.lsf-knoepfe .klein { padding: .1rem .4rem; line-height: 1.4; }
.lsf-knoepfe .klein.an {
    border-color: var(--gold); color: var(--goldhell);
    background: rgba(201,164,92,.16);
}
.ls-buehne.ordnen > .ls-zone {
    border: 1px dashed var(--rand); border-radius: 10px;
    padding: .4rem; min-height: 70px;
}
.ls-buehne.ordnen > .ls-zone.lsf-ziel {
    border-color: var(--gold); background: rgba(201,164,92,.05);
}
.ls-buehne.ordnen .ls-zone:empty { display: block; }
.ls-buehne.ordnen [data-lsf] { outline: 1px solid rgba(201,164,92,.25); }
.ls-buehne.ordnen [data-lsf].lsf-zieht { opacity: .5; }
/* Im Modus ist der INHALT der Bloecke stillgelegt: kein Einsteigen,
   kein Officer-Zug, und der Tafel-Zuhoerer am Dokument bekommt gar
   kein [data-drop] mehr unter den Zeiger. Der Griff bleibt frei. */
.ls-buehne.ordnen [data-lsf] > *:not(.lsf-griff) { pointer-events: none; }

/* Am Finger und im engen Fenster: eine Spalte, die Zonen der Reihe
   nach. Zwei Spalten auf 390px waeren zwei unlesbare Spalten. */
/* Die Spalten-Regeln oben tragen ein Attribut und schlagen damit jede
   reine Klassenregel - die enge Fassung muss dieselbe Spezifitaet
   haben, sonst bleibt am Handy das dreispaltige Raster stehen. */
@media (max-width: 900px) {
    .ls-buehne[data-spalten] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "oben" "links" "mitte" "rechts";
    }
    /* Ueber die Id verstecken, nicht ueber die Klasse: die Zeig-Regel
       oben nennt #l-teiler, und eine Id schlaegt jede Klasse. Sonst
       bleibt die Linie stehen, verlangt ihren Bereich t1/t2 - den es
       hier nicht gibt - und das Raster legt dafuer je eine implizite
       Spalte an (gemessen: drei Spuren statt einer). */
    .ls-buehne[data-spalten] #l-teiler,
    .ls-buehne[data-spalten] #l-teiler2 { display: none; }
}
html[data-geraet="handy"] .ls-buehne[data-spalten],
html[data-eng] .ls-buehne[data-spalten] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "oben" "links" "mitte" "rechts";
}
html[data-geraet="handy"] .ls-buehne[data-spalten] #l-teiler,
html[data-geraet="handy"] .ls-buehne[data-spalten] #l-teiler2,
html[data-eng] .ls-buehne[data-spalten] #l-teiler,
html[data-eng] .ls-buehne[data-spalten] #l-teiler2 { display: none; }

/* --- Der gedraengte Tafel-Stil -------------------------------------- */
html[data-lsstil] #a-leitstelle {
    --lsk-karte: 218px;   /* Mindestbreite einer Streifen-Karte */
    --lsk-sp: 248px;      /* Mindestbreite einer Revier-Spalte */
    --lsk-p: .72;         /* Polster-Faktor, mit --ls-eng multipliziert */
}
html[data-lsstil="gedraengt"] #a-leitstelle {
    --lsk-karte: 188px; --lsk-sp: 214px; --lsk-p: .55;
}
/* Die Masse sind NACHGEMESSEN, nicht geschaetzt (1800px Fenster, Brett
   rechts = 904px): mit 300px Mindestbreite passten dort nur ZWEI
   Revier-Spuren, das dritte Revier rutschte in eine zweite Zeile und
   die Tafel wurde hoeher statt flacher. Wer hier dreht, rechnet nach:
   drei Spuren brauchen 3 * --lsk-sp + 2 * Spaltenluecke. */

/* Der Kern: die Revier-Reihe bricht nach PLATZ um. Steht nur noch ein
   Revier da, fuellt es die Breite - statt als Drittel neben zwei leeren
   Dritteln zu stehen (Justin: "vorallem wenn vinewood spaeter alleine
   da steht"). Die Spaltenwahl des Stellrads tritt in diesem Stil
   zurueck; sie beschreibt eine Tafel mit drei festen Revieren. */
html[data-lsstil] #a-leitstelle .brett-zeile:not(.eigen),
html[data-lsstil] #a-leitstelle .brett-zeile.eigen {
    grid-template-columns: repeat(auto-fit, minmax(var(--lsk-sp), 1fr));
}
/* Und die zweite Haelfte: die Streifen einer Spalte stehen NEBEN-
   einander, sobald die Spalte breit genug ist. Wachen-Kopf, Typ-Kopf
   und "alle besetzt" spannen darueber - dieselbe Bauform, die die
   Verbund-Spalte schon hatte. */
html[data-lsstil] #a-leitstelle .wsp {
    /* align-ITEMS start, nicht nur align-content: sonst zieht die
       Karte mit Besatzung die leere Nachbarkarte auf ihre Hoehe. */
    display: grid; align-content: start; align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(var(--lsk-karte), 1fr));
    column-gap: calc(.6rem * var(--ls-eng, 1));
    padding: calc(.7rem * var(--lsk-p)) calc(.7rem * var(--lsk-p))
             calc(.5rem * var(--lsk-p));
}
html[data-lsstil] #a-leitstelle .wsp > .wkopf,
html[data-lsstil] #a-leitstelle .wsp .wache-kopf,
html[data-lsstil] #a-leitstelle .wsp > .sitz,
html[data-lsstil] #a-leitstelle .wsp > .sitz-frei,
html[data-lsstil] #a-leitstelle .wsp .ohne { grid-column: 1 / -1; }

/* Masse: alles haengt an --lsk-p, das Stellrad (--ls-eng) bleibt
   wirksam - der Stil DRUECKT zusaetzlich, er ersetzt nichts. */
html[data-lsstil] #a-leitstelle .e-karte {
    padding: calc(.5rem * var(--ls-eng, 1) * var(--lsk-p))
             calc(.65rem * var(--ls-eng, 1) * var(--lsk-p))
             calc(.45rem * var(--ls-eng, 1) * var(--lsk-p));
    margin-bottom: calc(.45rem * var(--ls-eng, 1) * var(--lsk-p));
    border-radius: 6px;
}
html[data-lsstil] #a-leitstelle .wkopf {
    padding: .25rem .2rem calc(.5rem * var(--lsk-p));
    margin-bottom: calc(.5rem * var(--lsk-p)); gap: .45rem;
}
html[data-lsstil] #a-leitstelle .wschild {
    width: 27px; height: 27px; border-radius: 7px;
}
html[data-lsstil] #a-leitstelle .wname b { font-size: 12px; }
html[data-lsstil] #a-leitstelle .wzaehler b { font-size: 16px; }
/* Die Typ-Kopfzeile traegt ihr Polster INLINE (typAbschnitte in
   app.js) - ohne !important bleibt sie die hoechste Zeile der Spalte. */
html[data-lsstil] #a-leitstelle .wache-kopf {
    padding: calc(.3rem * var(--lsk-p)) .1rem
             calc(.35rem * var(--lsk-p)) !important;
}
html[data-lsstil] #a-leitstelle .karte > h2 {
    padding: calc(.75rem * var(--lsk-p)) calc(.95rem * var(--lsk-p));
}
html[data-lsstil] #a-leitstelle .karte .inhalt {
    padding: calc(.95rem * var(--lsk-p));
}
html[data-lsstil] #a-leitstelle .codes-kopf {
    padding: calc(.8rem * var(--lsk-p)) calc(.95rem * var(--lsk-p)) .2rem;
}
html[data-lsstil] #a-leitstelle .codes-leiste {
    padding: calc(.55rem * var(--lsk-p)) calc(.95rem * var(--lsk-p))
             calc(.85rem * var(--lsk-p));
    gap: calc(.45rem * var(--lsk-p));
}
html[data-lsstil] #a-leitstelle .code-pille {
    padding: calc(.34rem * var(--lsk-p)) calc(.8rem * var(--lsk-p));
}
/* Gedraengt nimmt zusaetzlich die Tiefe heraus: bei sechs Spalten
   nebeneinander sind sechs Schlagschatten nur noch Unruhe. */
html[data-lsstil="gedraengt"] #a-leitstelle .wsp {
    box-shadow: inset 0 2px 0 var(--wf);
}
html[data-lsstil="gedraengt"] #a-leitstelle .e-karte:hover {
    transform: none; box-shadow: none;
}
html[data-lsstil] #a-leitstelle .sitz-frei {
    padding: calc(.6rem * var(--lsk-p));
}


/* ==========================================================================
   DIE SAMMELSTELLEN LINKS (13.09.2026)

   Justin: "links dann Verfuegbare officer / allgemeine Einheiten wie
   innendienst bewerbung Abwesennd Bewerbugnsgespraech ... mach das
   richtig schoen, auch nen neuen stil".

   Also ausdruecklich NICHT die Streifen-Optik: keine Lightbar-Kante,
   kein Status-Streifen, keine Schlagschatten. Hier ruecken keine Wagen
   aus, hier sitzen Leute - eine ruhige Liste mit Belegungsbalken.
   ========================================================================== */

.brett-allg:empty { display: none; }
/* Leer heisst weg - sonst stuende in der Zone ein Kasten ohne Inhalt
   und nahme den Abstand mit (dieselbe Regel wie bei den
   Sammelstellen). */
.brett:empty { display: none; }
/* Die eigenen Bereiche stehen in der Vorgabe in der LINKEN Zone. Dort
   ist weniger Platz als rechts, also laufen ihre Karten wie in der
   Verbund-Spalte: so viele Spalten, wie hineingehen. */
#l-brett-eigen .brett-zeile.eigen > .wsp {
    display: grid; align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0 calc(1rem * var(--ls-eng, 1));
}
/* HIER ist der Kasten ein echter Block: die Arten stehen
   nebeneinander, jede mit ihrem Kopf darueber. Genau das macht aus
   sieben Zeilen vier - und darum muss man fuer die Special Units nicht
   mehr scrollen. */
#l-brett-eigen .typ-block { display: block; min-width: 0; }
/* Der Bereichs-Kopf schmaler: in der linken Spalte zaehlt jede Zeile,
   und das Wappen sagt nichts, was der Name nicht sagt. */
#l-brett-eigen .wkopf { padding: .1rem .3rem .45rem; margin-bottom: .45rem; }
#l-brett-eigen .wschild { display: none; }
#l-brett-eigen .wzaehler b { font-size: 16px; }
#l-brett-eigen .wname b { font-size: 12.5px; }
#l-brett-eigen .brett-zeile.eigen > .wsp > .wkopf { grid-column: 1 / -1; }
#l-brett-eigen .wache-kopf { padding-top: .25rem !important; }
/* So viele Sammelstellen nebeneinander, wie hineingehen. Untereinander
   waren drei leere Einzeiler 210px hoch und schoben alles darunter aus
   dem Fenster - gemessen an der Tafel von Justins Mitglied. */
.allg {
    display: grid; gap: .55rem; align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
/* Eine Sammelstelle, in der jemand sitzt, darf ueber die ganze Breite
   gehen: dort stehen Namen, und die brauchen den Platz. */
.allg > .allg-typ.besetzt { grid-column: 1 / -1; }

.allg-typ {
    border: 1px solid var(--rand); border-radius: 10px;
    background: linear-gradient(180deg, var(--karte2) 0%, var(--karte) 100%);
    padding: .55rem .6rem .5rem;
}
/* Besetzt heisst: hier ist gerade jemand. Das ist die einzige Farbe,
   die dieser Block braucht - der Rest ist Ruhe. */
.allg-typ.besetzt { border-color: #2a3f5c; }

.allg-kopf {
    display: flex; align-items: center; gap: .5rem;
    font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--grau);
}
.allg-kopf b { color: var(--text); font-weight: 700; }
.allg-typ.besetzt .allg-kopf b { color: var(--hell); }
.allg-punkt {
    width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--rand);
}
.allg-punkt.an {
    background: var(--blau); box-shadow: 0 0 7px rgba(77,143,209,.6);
}
.allg-zahl {
    margin-left: auto; letter-spacing: 0; font-size: 12.5px;
    color: var(--hell); font-variant-numeric: tabular-nums;
}
.allg-zahl i { font-style: normal; color: var(--grau); font-size: 11px; }

/* Der Balken sagt in einem Blick, wie voll es ist - "3 / 60" allein
   sagt das nicht. Bei 0 bleibt er als leere Spur stehen: eine Spur,
   die verschwindet, sieht wie ein Fehler aus. */
.allg-balken {
    height: 3px; border-radius: 999px; background: var(--rand);
    margin: .4rem 0 .5rem; overflow: hidden;
}
.allg-balken > span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--blau), var(--gold));
    transition: width .2s ease;
}

.allg-e { border-radius: 8px; padding: .25rem .3rem; cursor: pointer; }
.allg-e + .allg-e { margin-top: .25rem; }
.allg-e:hover { background: rgba(255,255,255,.03); }
.allg-e.leer:hover { background: rgba(201,164,92,.07); }
.allg-e-kopf {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .2rem;
}
.allg-e-zahl {
    margin-left: auto; font-size: 10.5px; color: var(--grau);
    font-variant-numeric: tabular-nums;
}
.allg-frei {
    font-size: 11px; color: var(--grau); font-style: italic;
    padding: .15rem .1rem;
}
.allg-e.leer .allg-frei { opacity: .8; }
/* Voll ist voll - dieselbe Aussage wie bei den Streifen, nur leiser. */
.allg-e.voll { opacity: .75; cursor: default; }
.allg-e .e-crew { margin-top: .15rem; gap: .3rem; }
/* Im Zuweis-Modus sind die Sammelstellen Ziele wie jede Streife. */
.brett-allg.wahl-an .allg-e { outline: 1px dashed var(--rand); }
.brett-allg.wahl-an .allg-e:hover { outline-color: var(--gold); }
.allg-e.drop-ziel {
    outline: 2px solid var(--gold); background: rgba(201,164,92,.08);
}

/* Die Seite der Tafel war ein Auswahlfeld und hat die Arten-Zeile auf
   sieben Spuren getrieben; sie ist jetzt ein Umschalt-Knopf (.st-seit)
   in einem eigenen Kasten - siehe unten. */

/* Im gedraengten Stil auch hier enger - dieselbe Variable wie rechts. */
html[data-lsstil] #a-leitstelle .allg-typ {
    padding: calc(.55rem * var(--lsk-p)) calc(.6rem * var(--lsk-p))
             calc(.5rem * var(--lsk-p));
}
html[data-lsstil] #a-leitstelle .allg { gap: calc(.55rem * var(--lsk-p)); }
html[data-lsstil] #a-leitstelle .allg-balken { margin: .3rem 0 .35rem; }
/* Und wenn die linke Spalte breit gezogen ist, stehen die
   Sammelstellen nebeneinander statt in einer langen Kolonne. */
html[data-lsstil] #a-leitstelle .allg {
    display: grid; align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(var(--lsk-karte), 1fr));
}


/* --- Chips duerfen nicht aus ihrer Karte laufen (13.09.) -------------
   Im Bild der geteilten Tafel lief "[PD-101] Vera Ahrens JSGT ASD B..."
   in einer 270px-Spalte rechts aus der Karte heraus, das ✕ stand
   ausserhalb. Grund: der Chip ist eine flex-Zeile ohne Schrumpf-
   Erlaubnis, der Name darin hat keine Ellipse. Gilt fuer die ganze
   Tafel, nicht nur fuer die neue Seite - schmale Spalten gab es auch
   vorher (Stellrad, Handy). */
.e-crew, .pool { min-width: 0; }
.crew { max-width: 100%; min-width: 0; }
/* Der Name gibt zuerst nach - Nummer, Rang-Marke und das ✕ bleiben
   lesbar, die sind die Handgriffe. ABER: er gibt nicht bis auf null
   nach. Im Pool stand bei grossen Chips nur noch "[PD-308] …" da;
   ein Name ohne einen einzigen Buchstaben ist keine Auskunft mehr.
   Mit der Mindestbreite bricht lieber die Chip-REIHE um (die Pool-
   und Besatzungs-Reihen sind flex-wrap). */
.crew .cn {
    /* 4.2rem tragen die Dienstnummer ("[PD-121]") - Nummer und Name
       stehen in EINEM Element, die Ellipse frisst sich sonst durch den
       Namen hindurch bis in die Nummer ("[PD-..." im Bild). Die
       Nummer ist das, woran man jemanden erkennt. */
    min-width: 4.2rem; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
}

/* Die leise Zeile "+ N weitere frei" unter einer Sammelstelle. */
.allg-rest {
    font-size: 10.5px; color: var(--grau); padding: .25rem .3rem 0;
    letter-spacing: .04em;
}
.allg-e-kopf .allg-frei {
    margin-left: auto; font-size: 10.5px; color: var(--grau);
    font-style: italic; white-space: nowrap;
}
/* Die Kennung darf UMBRECHEN, aber nicht abgeschnitten werden: sie
   ist die Identitaet der Einheit. Im Bild stand bei zwei Spalten
   "VINEWOOD INNEN..." und "ALLGEMEIN AB..." - daraus liest niemand,
   welche Einheit das ist. Zwei Zeilen sind billiger als ein
   halber Name. */
.allg-e-kopf .e-name {
    min-width: 0; white-space: normal; overflow-wrap: anywhere;
    line-height: 1.25;
}
/* Damit der Zaehler bzw. der Frei-Hinweis daneben stehen bleibt und
   nicht mitwandert. */
.allg-e-kopf .allg-e-zahl,
.allg-e-kopf .allg-frei { flex: none; align-self: flex-start; }


/* ==========================================================================
   DREI WEITERE STILE FUER DIE TAFEL (13.09.2026)
   Justin: "mach mehr stil ideen" - "es ging mir um leitstellen stile".

   Bisher war der Schalter eine Dichte-Leiter (Tafel -> Kompakt ->
   Gedraengt). Diese drei bauen die Tafel anders, nicht nur enger.
   Jeder setzt zuerst seine drei Variablen - dann rechnet der
   gemeinsame Regelsatz oben (html[data-lsstil]) schon das meiste
   richtig, und hier steht nur, was wirklich anders ist.

   ACHTUNG Reihenfolge: html[data-lsstil="x"] hat dieselbe Spezifitaet
   wie html[data-lsstil] - diese Regeln MUESSEN also nach dem
   gemeinsamen Satz stehen, sonst gewinnt der.
   ========================================================================== */

html[data-lsstil="zeilen"] #a-leitstelle {
    --lsk-karte: 240px; --lsk-sp: 290px; --lsk-p: .58;
}
html[data-lsstil="signal"] #a-leitstelle {
    --lsk-karte: 232px; --lsk-sp: 264px; --lsk-p: .78;
}
html[data-lsstil="wandtafel"] #a-leitstelle {
    --lsk-karte: 340px; --lsk-sp: 380px; --lsk-p: 1.15;
}

/* --- ZEILEN ----------------------------------------------------------
   Eine Einheit, eine Zeile: Kennung und Code links, Besatzung rechts
   daneben statt darunter. Damit passen doppelt so viele Einheiten auf
   den Schirm, und die Kennungen fluchten untereinander - man liest die
   Spalte hinunter statt von Karte zu Karte zu springen. */
html[data-lsstil="zeilen"] #a-leitstelle .wsp {
    grid-template-columns: 1fr;
}
/* Die Reviere UNTEREINANDER, jedes ueber die ganze Breite - nachge-
   messen: in einer 440px-Spalte bleiben neben der Kennung ~220px, dort
   bricht die Besatzung um und die Zeile ist wieder ein Kasten (Karte
   blieb 138px hoch, genau wie im Tafel-Stil). Mit voller Breite passt
   die ganze Besatzung daneben.
   Das `grid-column: auto` MUSS mit: ein Buendel mit span 2 legt in
   einem einspaltigen Raster sonst eine zweite Spalte an (dieselbe
   Falle wie am Handy). */
html[data-lsstil="zeilen"] #a-leitstelle .brett-zeile:not(.eigen),
html[data-lsstil="zeilen"] #a-leitstelle .brett-zeile.eigen {
    grid-template-columns: minmax(0, 1fr);
}
html[data-lsstil="zeilen"] #a-leitstelle .wgr { grid-column: auto; }
html[data-lsstil="zeilen"] #a-leitstelle .wgr-spalten {
    grid-template-columns: minmax(0, 1fr);
}
html[data-lsstil="zeilen"] #a-leitstelle .e-karte {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .2rem .7rem; padding: .22rem .5rem; border-radius: 5px;
    margin-bottom: .22rem;
}
/* Die feste Mindestbreite ist der Grund, warum die Zeile funktioniert:
   ohne sie steht der Code bei kurzen Kennungen weit links und bei
   langen weit rechts, und nichts fluchtet. */
html[data-lsstil="zeilen"] #a-leitstelle .e-zeile {
    flex: 0 1 auto; min-width: 13.5rem; max-width: 55%;
}
html[data-lsstil="zeilen"] #a-leitstelle .e-crew {
    margin-top: 0; flex: 1 1 auto; justify-content: flex-end;
    gap: .22rem;
}
html[data-lsstil="zeilen"] #a-leitstelle .wache-kopf {
    padding: .3rem .1rem .2rem !important;
}
/* Die freie Einheit bleibt eine Zeile wie die anderen - sonst reisst
   ein hoher leerer Kasten die Reihe auseinander. */
html[data-lsstil="zeilen"] #a-leitstelle .e-karte.e-frei { padding: .2rem .5rem; }
html[data-lsstil="zeilen"] #a-leitstelle .allg-e .e-crew {
    justify-content: flex-start;
}
/* Links wie rechts: eine Sammelstelle je Reihe, volle Breite. Zwei
   Spalten waeren hier genau die Enge, die den Zeilen-Stil rechts
   erst noetig gemacht hat. */
html[data-lsstil="zeilen"] #a-leitstelle .allg {
    grid-template-columns: minmax(0, 1fr);
}

/* --- SIGNAL ----------------------------------------------------------
   Die Statusfarbe traegt die ganze Karte. Der Code steht weiter da,
   aber man muss ihn nicht mehr lesen, um die Lage zu sehen: gebunden,
   vor Ort, Notruf - das ist auf der ganzen Tafel auf einmal sichtbar.
   Gemischt wird gegen die Kartenfarbe (color-mix), damit jedes
   Farbschema und jede Saettigung mitgehen. */
html[data-lsstil="signal"] #a-leitstelle .e-karte {
    border-left-width: 5px;
}
html[data-lsstil="signal"] #a-leitstelle .e-karte.s-einsatzbereit {
    background: color-mix(in srgb, var(--gruen) 14%, var(--karte2));
}
html[data-lsstil="signal"] #a-leitstelle .e-karte.s-anfahrt {
    background: color-mix(in srgb, var(--gelb) 15%, var(--karte2));
}
html[data-lsstil="signal"] #a-leitstelle .e-karte.s-vor_ort {
    background: color-mix(in srgb, var(--blau) 17%, var(--karte2));
}
html[data-lsstil="signal"] #a-leitstelle .e-karte.s-gebunden {
    background: color-mix(in srgb, var(--lila) 17%, var(--karte2));
}
html[data-lsstil="signal"] #a-leitstelle .e-karte.s-notruf {
    background: color-mix(in srgb, var(--rot) 24%, var(--karte2));
}
html[data-lsstil="signal"] #a-leitstelle .e-karte.s-kontrolle {
    background: color-mix(in srgb, #b7abee 15%, var(--karte2));
}
html[data-lsstil="signal"] #a-leitstelle .e-karte.s-essen {
    background: color-mix(in srgb, #eda29b 15%, var(--karte2));
}
html[data-lsstil="signal"] #a-leitstelle .e-karte.s-innendienst {
    background: color-mix(in srgb, #eab27e 15%, var(--karte2));
}
/* Eine LEERE Einheit bleibt neutral, egal welchen Status sie noch
   traegt: eine gruen leuchtende Karte, in der niemand sitzt, waere
   genau die falsche Auskunft. Steht NACH den Statusfarben. */
html[data-lsstil="signal"] #a-leitstelle .e-karte.unbesetzt,
html[data-lsstil="signal"] #a-leitstelle .e-karte.e-frei {
    background: var(--karte);
}
/* Auf farbigem Grund braucht der Chip mehr Stand. */
html[data-lsstil="signal"] #a-leitstelle .crew {
    background: color-mix(in srgb, var(--grund) 55%, transparent);
}

/* --- WANDTAFEL -------------------------------------------------------
   Fuer den zweiten Schirm neben dem Spiel: aus zwei Metern lesbar.
   Also grosse Kennungen, grosse Codes, grosse Namen - und alles
   Kleingedruckte weg, das man aus der Entfernung ohnehin nicht liest.
   Die Groessen stehen hier FEST und nicht in --ls-name: die Variable
   setzt das Stellrad inline am Bereich, und ein Inline-Wert schlaegt
   jede Regel. */
html[data-lsstil="wandtafel"] #a-leitstelle .e-name { font-size: 16.5px; }
html[data-lsstil="wandtafel"] #a-leitstelle .crew {
    font-size: 13.5px; --av: 25px;
}
html[data-lsstil="wandtafel"] #a-leitstelle .crew .rk,
html[data-lsstil="wandtafel"] #a-leitstelle .cn .deck { font-size: 11.5px; }
html[data-lsstil="wandtafel"] #a-leitstelle .code,
html[data-lsstil="wandtafel"] #a-leitstelle .code-pille {
    font-size: 12.5px; padding: .34rem .75rem;
}
html[data-lsstil="wandtafel"] #a-leitstelle .wname b { font-size: 16px; }
html[data-lsstil="wandtafel"] #a-leitstelle .wzaehler b { font-size: 26px; }
html[data-lsstil="wandtafel"] #a-leitstelle .wache-kopf {
    font-size: 11.5px !important; letter-spacing: .2em;
    padding: .5rem .1rem .4rem !important;
}
html[data-lsstil="wandtafel"] #a-leitstelle .allg-kopf { font-size: 12px; }
html[data-lsstil="wandtafel"] #a-leitstelle .allg-zahl { font-size: 15px; }
/* Das Kleingedruckte: Erklaertexte und die Fussnoten der Spalten. Wer
   am Schirm sitzt, hat sie schon gelesen; wer hinsieht, will die Lage. */
html[data-lsstil="wandtafel"] #a-leitstelle .tipp:not(.zuschauer),
html[data-lsstil="wandtafel"] #a-leitstelle .wzaehler i,
html[data-lsstil="wandtafel"] #a-leitstelle .wname i,
html[data-lsstil="wandtafel"] #a-leitstelle .allg-rest { display: none; }
html[data-lsstil="wandtafel"] #a-leitstelle .e-karte {
    padding: .55rem .7rem .5rem; border-left-width: 5px;
}
html[data-lsstil="wandtafel"] #a-leitstelle .wschild {
    width: 34px; height: 34px;
}

/* --- Marken weichen nach PLATZ (13.09.) ------------------------------
   In einer schmalen Spalte konkurrieren Nummer, Name und bis zu drei
   Marken um denselben Platz. Vorher verlor der Name (bis auf null),
   nach dem Schutz der Nummer lief der Chip aus der Karte heraus.
   Also fallen die Marken - aber nach dem wirklichen PLATZ, nicht nach
   dem gewaehlten Stil: dieselbe Enge gibt es im Tafel-Stil auf einem
   schmalen Fenster genauso.

   Die Spalte ist der Container; die Abfrage gilt fuer alles darin.
   Was weichen darf, in dieser Reihenfolge: Marken, dann der Name
   (Ellipse) - Nummer und ✕ nie, das sind die Handgriffe. */
#a-leitstelle .wsp { container: wsp / inline-size; }
@container wsp (max-width: 320px) {
    .e-crew .crew .rk { display: none; }
}
/* Die Sammelstellen links sind ihr eigener Container - dort stehen
   dieselben Chips in noch schmaleren Zellen. */
#a-leitstelle .allg-typ { container: allg / inline-size; }
@container allg (max-width: 300px) {
    .allg-e .crew .rk { display: none; }
}


/* --- Die Kennung bleibt am Stueck (13.09., aus Justins Bild) --------
   "VINEWOOD-" / "100" stand dort in zwei Zeilen: der Browser brach am
   Bindestrich der Kennung, weil Kennung + VOLL + Stift + Code-Pille
   zusammen breiter sind als eine 240px-Karte. Eine Kennung ist ein
   Name - sie bricht nicht. Stattdessen darf die Kopfzeile umbrechen,
   dann rutscht die rechte Gruppe (VOLL, Stift, Code) darunter.

   Ellipse nur als LETZTES Mittel: erst wenn die Kennung allein in
   ihrer Zeile nicht passt, wird sie gekuerzt. */
#a-leitstelle .e-zeile { flex-wrap: wrap; row-gap: .15rem; }
#a-leitstelle .e-name {
    white-space: nowrap; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
}
/* Die rechte Gruppe bleibt zusammen und haelt sich rechts - auch wenn
   sie in die zweite Zeile rutscht. */
#a-leitstelle .e-rechts { flex: 0 0 auto; margin-left: auto; }

/* Im ZEILEN-Stil waere ein Umbruch in der Kopfzeile das Ende der
   Zeile. Dort bleibt sie starr und bekommt die Breite, die Kennung,
   Marke und Code zusammen brauchen (nachgerechnet: ~105 + 42 + 16 +
   72 + Luecken). */
html[data-lsstil="zeilen"] #a-leitstelle .e-zeile {
    flex-wrap: nowrap; min-width: 17.5rem;
}

/* --- Schulungen quer (15.09.) ----------------------------------
   Die Schulung der ANDEREN Seite steht als Etikett in der Zeile:
   ✅ in der Ausbildungsliste der Academy (Aktenschulung der DQA),
   ❌ im Abnahmen-Reiter der DQA (Gesetzesschulung der Academy).
   Schmal halten - es sind Beiwerk-Zahlen in einer Zeile, die schon
   Name, Nummer, Rang und Fortschritt traegt. */
.etikett.az-quer { font-weight: 600; letter-spacing: .01em; }
.az-zeile .az-quer { margin-left: .2rem; }

/* Die Leiste mit dem eigenen Fragebogen im Abnahmen-Reiter. */
.az-bogenleiste { display: flex; flex-wrap: wrap; align-items: center;
    gap: .4rem; padding-top: 0; }
.az-bogenleiste .klein.warn { color: var(--gelb); }

/* Der Waehler "Officer ansetzen" (24.09.).

   Zweihundert Namen brauchen einen EIGENEN Rollbereich: rollte die
   ganze Schublade, wanderten Suchfeld, "Alle auswaehlen" und der
   Ansetzen-Knopf aus dem Bild, und man suchte sie unter der Liste.

   Die Zeile ist dieselbe `.az-modul` wie ueberall im AzubiNet - nur
   traegt sie hier ein Kaestchen und ist ein <label>, damit der ganze
   Streifen anklickbar ist und nicht nur das Kaestchen selbst. */
#ans-liste { max-height: 52vh; overflow-y: auto; margin-top: .2rem; }
#ans-liste .az-modul { cursor: pointer; }
/* Wer schon dransteht, ist kein Ziel mehr - das Kaestchen ist aus, und
   die Zeile soll auch so aussehen. */
#ans-liste .az-modul:has(input:disabled) { cursor: default; opacity: .7; }
#ans-liste input[type="checkbox"] { flex: none; margin: 0; }
#ans-zahl { margin-left: auto; }

/* ==========================================================================
   Streifen-Tafel, zweiter Aufbau (14.09.)
   ==========================================================================
   Justin: "die ist auch komplett verranzt ... uebersichtlicher dass man
   alles direkt auf einen Blick sieht, das nimmt alles noch zu viel Platz
   ein ... generell die streifentafel in dem stil jetzt vom neuen
   innendienst".

   Zwei Sachen waren schuld, und nur eine davon war Stil:
   1. JEDE Arten-Zeile war ihr eigenes Raster mit `auto`-Spuren. Damit
      war jede Zeile anders breit - der zerfranste Rand im Bild. Jetzt
      sind alle Spuren ausser der Bezeichnung FEST, und die vier
      Einstellungsfelder sitzen in einem Kasten (.st-art-f), der in
      jeder Zeile gleich breit ist.
   2. Der Bauplan war eine Kolonne: 16 Zeilen je Bereich, dreimal
      untereinander. Jetzt Kacheln, die sich in die Breite legen -
      dieselbe Zahl an Feldern auf einem Drittel der Hoehe.

   Gemessen wird an der Breite der SCHUBLADE (container), nicht am
   Schirm: die Schublade laesst sich ziehen. */

#st-box { container: stbox / inline-size; }

/* Beide Bloecke sind Karten wie die Sammelstellen auf der neuen Tafel. */
.st-rev {
    border: 1px solid var(--rand); border-radius: 12px;
    background: linear-gradient(180deg, var(--karte2) 0%, var(--karte) 100%);
    padding: .5rem .55rem .55rem; margin-bottom: .55rem;
}
.st-rev-kopf {
    display: flex; align-items: center; gap: .5rem; min-width: 0;
    font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--grau); margin-bottom: .45rem;
}
.st-rev-kopf b {
    color: var(--text); font-weight: 700; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.st-punkt { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.st-rev-zahl {
    margin-left: auto; letter-spacing: 0; text-transform: none;
    font-size: 11.5px; color: var(--grau); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Ein Bereich ohne Einheiten steht zu und ist eine Zeile hoch. */
details.st-rev > summary.st-rev-kopf {
    cursor: pointer; list-style: none; margin-bottom: 0;
}
details.st-rev > summary.st-rev-kopf::-webkit-details-marker { display: none; }
details.st-rev > summary.st-rev-kopf::after {
    content: '▸'; letter-spacing: 0; color: var(--grau); margin-left: .1rem;
}
details.st-rev[open] > summary.st-rev-kopf { margin-bottom: .45rem; }
details.st-rev[open] > summary.st-rev-kopf::after { content: '▾'; }

/* ---- oben: die Arten ---------------------------------------------------- */
.st-tab { display: block; }
.st-tab-kopf, .st-tab .st-art {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 78px;
    gap: .4rem; align-items: center;
}
.st-tab-kopf {
    font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--grau); padding: 0 .25rem .25rem;
}
.st-tab-kopf .st-art-f > span { padding-left: .1rem; }
.st-tab .st-art {
    padding: .2rem .25rem; border-radius: 8px; margin: 0;
}
/* Ein Hauch Streifen - in einer dichten Tafel findet das Auge die Zeile
   sonst nicht wieder. */
.st-tab .st-art:nth-child(even) { background: rgba(255, 255, 255, .017); }
.st-tab .st-art:hover { background: rgba(255, 255, 255, .04); }
/* Links/rechts sieht man an der Kante, ohne zu lesen. */
.st-tab .st-art.st-allg { box-shadow: inset 2px 0 0 rgba(77, 143, 209, .55); }
/* Eine Art ohne jede Einheit: sie steht im Katalog, aber auf keiner
   Seite der Tafel. Der gelbe Streifen sticht den blauen aus - "gibt es
   gar nicht" ist die wichtigere Nachricht als "waere links". */
.st-tab .st-art.st-ohne { box-shadow: inset 2px 0 0 rgba(214, 158, 46, .8); }
.st-art.st-ohne .st-label { opacity: .62; }
.st-art.st-ohne .st-schluessel {
    border-color: rgba(214, 158, 46, .5); color: rgba(214, 158, 46, .95);
}
.st-art input, .st-art select, .st-art button { margin: 0; }
.st-art input { padding: .26rem .45rem; font-size: 12.5px; }
.st-art-f {
    display: grid; grid-template-columns: 74px 112px 56px 54px 48px 72px;
    gap: .4rem; align-items: center; min-width: 0;
}
/* Die Zaehlweise ist ein Umschalter wie die Seite - 100er traegt die
   Messingfarbe, weil es die Ausnahme ist. */
.st-schritt.hundert {
    color: var(--goldhell);
    border-color: color-mix(in srgb, var(--gold) 45%, var(--rand));
}
.st-seit {
    padding: .26rem .2rem; font-size: 11px; letter-spacing: .02em;
    border-radius: 7px; border: 1px solid var(--rand); background: var(--karte);
    color: var(--hell); white-space: nowrap; text-align: center;
    cursor: pointer; min-width: 0;
}
.st-seit:hover { border-color: var(--randhell); }
.st-seit.links {
    color: var(--blau);
    border-color: color-mix(in srgb, var(--blau) 45%, var(--rand));
}
.st-art .st-fest { padding: .26rem .3rem; font-size: 11.5px; max-width: none; }
.st-art .st-schluessel {
    overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.st-pfeile { justify-content: flex-end; }
.st-pfeile button { padding: .18rem .35rem; font-size: 11.5px; }
.st-pfeile button[disabled] { opacity: .3; cursor: default; }

/* ---- unten: der Bauplan als Kacheln ------------------------------------ */
.st-gitter {
    display: grid; gap: .4rem;
    grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));
}
.st-k {
    border: 1px solid var(--rand); border-radius: 9px; background: var(--karte);
    padding: .32rem .38rem .38rem; min-width: 0;
}
/* Wo wirklich Einheiten stehen, ist die Kante blau - dieselbe Aussage
   wie ".besetzt" auf der Tafel. */
.st-k.hat { border-color: #2a3f5c; }
.st-k-kopf {
    display: flex; align-items: baseline; gap: .3rem; min-width: 0;
    font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--grau); margin-bottom: .26rem;
}
.st-k-kopf b {
    color: var(--hell); font-weight: 700; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto;
}
.st-k-kopf i {
    font-style: normal; letter-spacing: .04em; opacity: .65;
    white-space: nowrap; overflow: hidden; flex: 0 1 auto;
}
/* Die Kennungen, wie sie nach dem Übernehmen heissen. Das ist die
   Antwort, um die es in diesem Dialog geht - also steht sie da. */
.st-k-vor {
    margin-left: auto; letter-spacing: 0; text-transform: none;
    font-size: 10.5px; color: var(--gold); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto;
    font-variant-numeric: tabular-nums;
}
.st-k-f {
    display: grid; grid-template-columns: minmax(0, 1fr) 46px 46px; gap: .3rem;
}
.st-k-f input { margin: 0; padding: .26rem .4rem; font-size: 12.5px; }
.st-k .ohne { padding: .1rem; }
.st-rev > .ohne { padding: .1rem .1rem .2rem; font-size: 12px; }
.st-mehr { margin: .4rem 0 0; }

/* ---- enge Schublade ----------------------------------------------------- */
/* Unter ~620px passen vier Einstellungsfelder nicht mehr neben die
   Bezeichnung: sie gehen in die zweite Zeile, der Schluessel fliegt
   raus (er steht auch im Werkzeug-Tipp). */
@container stbox (max-width: 620px) {
    .st-tab-kopf { display: none; }
    .st-tab .st-art {
        grid-template-columns: 22px minmax(0, 1fr) 78px;
        row-gap: .28rem; padding: .32rem .25rem;
    }
    /* Alle vier ausdruecklich setzen. Nur den Kasten auf 2/-1 zu legen
       reichte NICHT: die Selbstverteilung setzt die Pfeile dann hinter
       ihn in eine dritte Reihe - nachgemessen 91px statt 66px. */
    .st-tab .st-art > .st-nr { grid-area: 1 / 1; }
    .st-tab .st-art > .st-label { grid-area: 1 / 2; }
    .st-tab .st-art > .st-pfeile { grid-area: 1 / 3; }
    .st-tab .st-art > .st-art-f {
        grid-area: 2 / 2 / 3 / 4;
        grid-template-columns: 74px minmax(0, 1fr) 56px 48px;
    }
    .st-art .st-schluessel { display: none; }
    .st-gitter { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@container stbox (max-width: 420px) {
    .st-gitter { grid-template-columns: 1fr; }
    .st-k-vor { display: none; }
}


/* ==========================================================================
   DER LEITSTELLEN-PLATZ ALS EIGENER BLOCK (16.09.2026)

   Justin: "kannst du bitte machen dass leitstelle gesondert ist und auch
   einzelnt bewegt werden kann". Der Kasten sieht aus wie der alte Balken
   (.wgr-sitz) - dieselbe Kante, derselbe Verlauf -, ist aber ein eigenes
   Buehnen-Feld und steht deshalb da, wo man ihn hinlegt.
   ========================================================================== */

/* Leer heisst weg: ohne Reviere stuende hier ein Kasten ohne Inhalt.
   In der Buehne besorgt das schon `.ls-zone > [data-lsf]:empty`, in der
   klassischen Tafel haengt der Block direkt im Bereich. */
#l-sitze:empty { display: none; }
/* Eine Reihe: links die Plaetze, rechts der Zuruecksetzen-Knopf. Im
   engen Fenster bricht er unter die Plaetze (flex-wrap), statt die
   Namen zu quetschen. */
.ls-sitze {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: calc(.5rem * var(--ls-eng, 1));
    border: 1px solid var(--rand); border-radius: 10px;
    background: linear-gradient(180deg, var(--karte2) 0%, var(--karte) 100%);
    padding: calc(.5rem * var(--ls-eng, 1)) .55rem;
}
/* Die Plaetze: mehrere nebeneinander, solange sie passen - liegt der
   Block oben ueber der ganzen Breite, sollen drei Leitstellen nicht drei
   Zeilen kosten. min() statt 260px: in einer schmalen Spalte waere die
   Spur sonst breiter als die Spalte. */
.ls-sitz-reihe {
    flex: 1 1 260px; min-width: 0;
    display: grid; align-content: start;
    gap: calc(.5rem * var(--ls-eng, 1));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
/* Der Knopf bleibt so schmal, wie sein Text ist - er soll dem Platz
   nichts wegnehmen. */
.ls-sitze > .ls-reset { flex: 0 0 auto; white-space: nowrap; }
/* Die Zeile selbst traegt ihren Abstand aus der Zeit im Balken - im
   eigenen Kasten macht das Polster das, sonst steht sie tiefer als
   ihre Nachbarin. */
.ls-sitze .sitz, .ls-sitze .sitz-frei { margin-bottom: 0; }
/* ZWEI AN EINEM TISCH (24.09.). Die Zeilen eines Platzes stehen
   untereinander - .sitz traegt im Block bewusst keinen eigenen Abstand
   (siehe oben), also gibt ihn der Platz. Flush uebereinander lesen sich
   zwei Zeilen als ein Kasten mit doppelter Hoehe und nicht als zwei
   Leute. */
.ls-sitz-platz {
    display: flex; flex-direction: column;
    gap: calc(.3rem * var(--ls-eng, 1));
}
.ls-sitz-wo {
    font-size: 10px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--grau);
    margin: 0 0 .25rem .15rem;
}
/* Die sechs Tafel-Stile druecken auch hier (wie beim alten Balken). */
html[data-lsstil] #a-leitstelle .ls-sitze {
    padding: calc(.5rem * var(--ls-eng, 1) * var(--lsk-p)) .55rem;
    gap: calc(.5rem * var(--ls-eng, 1) * var(--lsk-p));
}


/* ==========================================================================
   DER NAME HAT VORFAHRT (21.09.2026)
   ==========================================================================
   Justin: "einige leute sehen in der leitstelle die namen nicht richtig,
   achte darauf dass die prio immer ist die gut zu sehen egal wie man das
   sich selber verrueckt".

   Nachgemessen an der echten Tafel (45 Namen, 1769 px Fenster,
   tools/ls-namen-check.cjs):

     Vorgabe                    4 Namen abgeschnitten
     "Knackig"                 15 abgeschnitten, 44 von 45 unter 10 px
     Namen 9 px + Zoom 50 %    13 abgeschnitten, ALLE bei 4,5 px
     Namen 17 px + Zoom 150 %  26 abgeschnitten - wer die Namen GROESSER
                               stellt, WEIL er sie nicht lesen kann,
                               bekam mehr Ellipsen: die Pool-Kacheln
                               standen auf festen 228 px.

   Die Groesse regelt der Block "DIE TAFEL EINRICHTEN" weiter oben
   (--ls-name-gut). Hier steht, was den Namen sonst noch gekuerzt hat.
   ========================================================================== */

/* ---------------------------------------------------------------------
   FASSUNG 3 (21.09., Justin: "auch mit den units am ende etc mit
   umbruch geht nicht mach das einfach vernuenftig dass der rahmen
   stimmt bei denen und mach keinen umbruch in der ganzen leiste").

   Kein Umbruch mehr, nirgends. Statt dessen waechst der PLATZ mit der
   Namenshoehe: jede Spaltenbreite, in der Chips stehen, ist ein
   Vielfaches von --ls-name-gut statt einer festen Zahl. Bei 11,5 px
   kommt ueberall genau die alte Zahl heraus.
   --------------------------------------------------------------------- */

/* 1. Ein Chip ist EINE Zeile: eine Hoehe, eine Pille, ein Rahmen, der
      sitzt. (Die Grundregel sagt das ohnehin - hier stehen nur die
      Masse, die mit der Namenshoehe mitgehen muessen.) */
#a-leitstelle #l-pool .pool-chip {
    /* Die Kachel war 34 px hoch, gerechnet auf 11,5-px-Namen. Mit der
       Schrift waechst auch das Bild (--av), sonst schnitte die feste
       Hoehe beides ab. */
    height: calc(var(--av) + .85rem);
}
/* Die Unit-Marke in der Kachel war auf 46 px gedeckelt - ohne Ellipse,
   also schnitt sie mitten im Wort ab. Auch sie haengt jetzt an der
   Schrift (4 * 11.5 = 46). */
#a-leitstelle #l-pool .pool-chip .rk.uf {
    max-width: calc(var(--ls-name-gut) * 4);
}
/* Rang, Marken und ✕ stehen in einer Huelle (app.js: chip(),
   crewChip()). Sie bleibt eine Zeile und traegt denselben Abstand wie
   der Chip selbst. */
.crew-ende {
    display: inline-flex; align-items: center;
    gap: inherit;
    /* Schrumpffaktor 100 gegen 1 beim Namen: passt der Chip nicht in
       seine Karte, geben die Marken nach und nicht die Auskunft. Erst
       wenn von ihnen nichts mehr uebrig ist, kuerzt der Name. */
    flex: 0 100 auto; min-width: 0; overflow: hidden;
    /* Und was nachgibt, gibt GANZ nach: die Huelle ist eine Zeile hoch
       und darf umbrechen, also rutscht eine Marke, die nicht mehr
       passt, in die zweite Zeile - und die ist abgeschnitten. Vorher
       stand am Rand der Pille ein halbes Rähmchen. */
    flex-wrap: wrap;
    align-content: flex-start;
    /* Das Fenster: genau eine Markenzeile hoch. Eine Marke misst 1,04
       bis 1,07 Namenshoehen (Schrift .87, dazu Polster und Rand), sie
       steht also mittig und ganz darin. */
    --ls-marke-h: calc(var(--ls-name-gut, 11.5px) * 1.35);
    max-height: var(--ls-marke-h);
}
/* Das ✕ ist ein Knopf, kein Beiwerk - es bleibt ganz da und an seinem
   Platz. */
#a-leitstelle .crew > a[data-raus] { flex: none; }
/* Ein Gast traegt keine Marken - eine leere Huelle waere nur eine
   Luecke vor dem Rand. (:empty schaut auf die Kinder im Markup, das
   ::before unten stoert es nicht.) */
.crew-ende:empty { display: none; }
/* Das erste Kind einer flex-Zeile kann nicht umbrechen: es hat nichts
   vor sich, hinter das es fallen koennte. Also wurde die erste Marke
   gekappt und stand als zwei Pixel breiter Splitter am Rand der Pille.
   Ein leeres Kind davor gibt auch ihr einen Vorgaenger - die Luecke
   dahinter wird mit einem negativen Rand ausgeglichen, sonst ruecken
   alle Marken um eine Luecke nach rechts. */
.crew-ende::before {
    content: ""; width: 0; flex: none;
    margin-right: calc(var(--ls-name-gut, 11.5px) * -.35);
    /* Es ist so hoch wie das ganze Fenster. Sonst waere die erste
       Zeile (in der nur IT steht, wenn keine Marke mehr passt) null
       hoch, die zweite finge nach 4 px an und schaute ins Fenster -
       gemessen stand die Marke dann oben angeschnitten da statt zu
       verschwinden. So beginnt die zweite Zeile immer unter dem
       Fensterrand. */
    height: var(--ls-marke-h);
}

/* 1c. Ein Chip schrumpft nicht mit. In einer Streifen-Karte stehen
      mehrere nebeneinander; reicht die Breite nicht, quetschte flex
      alle (und jeder gequetschte Chip kuerzte seinen Namen), statt den
      letzten in die naechste Zeile zu setzen. Die Reihen sind seit
      jeher flex-wrap - es wurde nur nie ausgenutzt.
      `max-width: 100%` aus der Regel vom 13.09. bleibt die Notbremse
      fuer den Chip, der allein schon breiter ist als seine Karte. */
#a-leitstelle .e-crew > .crew,
#a-leitstelle .pool > .crew,
#a-leitstelle .pool-reihe > .crew { flex: none; }
/* Und er darf einen Hauch weiter reichen als seine Reihe: zwei Pixel,
   also hoechstens bis ins Polster der Karte. Gemessen fehlten einem
   Namen im gedraengten Stil 0,23 px - dafuer wirft der Browser vier
   Buchstaben weg und setzt drei Punkte. Die Karte selbst wird dadurch
   nicht breiter. */
#a-leitstelle .e-crew > .crew,
#a-leitstelle .pool > .crew,
#a-leitstelle .pool-reihe > .crew { max-width: calc(100% + 2px); }

/* 1d. Und die Punkte stehen im Kaestchen, nicht im Namen (Justin:
      "blende dann einfach ... in die unit kaestchen anstatt namen").
      Ein Rang- oder Unit-Kaestchen darf schmaler werden und kuerzt
      dann seinen eigenen Text - sein Rähmchen bleibt ganz. Unter etwa
      anderthalb Namenshoehen lohnt das nicht mehr, dann verschwindet
      es lieber ganz (oben, ueber die unsichtbare zweite Zeile). */
#a-leitstelle .crew-ende .rk {
    flex: 0 1 auto;
    min-width: calc(var(--ls-name-gut) * 1.6);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 2. Der Name gibt als LETZTER nach. Er behaelt seine Mindestbreite,
      und sie geht mit der Schrift mit (5.8 * 11.5 = 67 px = die
      Dienstnummer "[PD-121]"). Was vorher zuerst nachgab, war er. */
#a-leitstelle .crew .cn {
    min-width: max(4.2rem, calc(var(--ls-name-gut) * 5.8));
    /* Fast null: flex verteilt einen Fehlbetrag nach Schrumpffaktor mal
       Breite, und mit der 1 von Haus aus nahm der Name 1,3 % davon mit -
       zwei Pixel, also der letzte Buchstabe. Sind die Marken ganz weg,
       friert flex sie ein und legt den Rest doch auf den Namen; dann
       ist die Karte aber wirklich schmaler als der Name allein.
       0.00001 und nicht 0.001: mit 0.001 blieben 0,15 px Anteil
       uebrig, und auch fuer 0,15 px setzt der Browser drei Punkte und
       wirft vier Buchstaben weg. */
    flex-shrink: .00001;
}
/* In der Pool-Kachel stand am Namen `flex: 1` - Grundgroesse NULL,
   dazu "nimm dir vom uebrigen Platz". Seine eigene Breite zaehlte
   damit gar nicht mit, und er wurde gekuerzt, waehrend die Marken in
   voller Breite danebenstanden (gemessen: 271 px fuer einen Namen, der
   342 braucht, daneben 209 px Marken). Grundgroesse ist der Inhalt,
   das Wachsen bleibt. */
#a-leitstelle #l-pool .pool-chip .cn { flex: 1 1e-05 auto; }

/* Im Pool galt bisher das Gegenteil: beim Darueberfahren schrumpfte
   der Name auf 1,5rem, damit die eingeklappten Unit-Marken aufklappen
   konnten - vom Namen blieb "[PD-308] …". Jetzt aendert sich beim
   Zeigen an der Kachel NICHTS mehr (aus ihr wird gezogen, sie darf
   nicht springen); wer alle Units sehen will, bekommt sie in der
   Profilkarte, die beim selben Zeigen aufgeht. */
#a-leitstelle #l-pool .pool-chip:hover .cn {
    flex: 1 1e-05 auto;
    min-width: max(4.2rem, calc(var(--ls-name-gut) * 5.8));
}
#a-leitstelle #l-pool .pool-chip:hover .rk.uf.extra { display: none; }
#a-leitstelle #l-pool .pool-chip:hover .rk.uf.mehr { display: inline-block; }

/* 3. Und hier ist der Platz, der mitwachsen muss. Jede dieser Zahlen
      stand vorher fest im Stil; sie ist jetzt ein Vielfaches der
      Namenshoehe und bei 11,5 px unveraendert. min(100%, ...) haelt
      das Raster in einer schmalen Zone - ein minmax, das breiter ist
      als sein Kasten, laeuft sonst hinaus (dieselbe Falle wie bei
      .ls-sitz-reihe). */

/* Die Pool-Kacheln: 24 statt der alten 19.8 (228 px). Gemessen
   brauchen die Kacheln der freien Officer 191 bis 311 px; bei 228
   passten Name UND Marken bei dreien von sechs nicht in eine Zeile,
   ab 276 bei allen. */
#a-leitstelle #l-pool {
    grid-template-columns:
        repeat(auto-fill, minmax(min(100%, calc(var(--ls-name-gut) * 24)), 1fr));
}
@media (max-width: 620px) {
    #a-leitstelle #l-pool {
        grid-template-columns:
            repeat(auto-fill, minmax(min(100%, calc(var(--ls-name-gut) * 14.8)), 1fr));
    }
}
/* Die eigenen Bereiche (Special Units & Co.) - hier war es am
   schlimmsten: 200 px Spalten in der linken Zone, bei 50 % Zoom also
   100 echte Pixel fuer Bild, Namen, zwei Marken und das ✕. */
#a-leitstelle #l-brett-eigen .brett-zeile.eigen > .wsp {
    grid-template-columns:
        repeat(auto-fill, minmax(min(100%, calc(var(--ls-name-gut) * 17.4)), 1fr));
}
#a-leitstelle .allg {
    grid-template-columns:
        repeat(auto-fill, minmax(min(100%, calc(var(--ls-name-gut) * 17.4)), 1fr));
}
#a-leitstelle .brett-zeile.eigen {
    grid-template-columns:
        repeat(auto-fit, minmax(min(100%, calc(var(--ls-name-gut) * 24.3)), 1fr));
}
#a-leitstelle[data-ls-auto] .brett-zeile:not(.eigen) {
    grid-template-columns:
        repeat(auto-fit, minmax(min(100%, calc(var(--ls-name-gut) * 22.6)), 1fr));
}
#a-leitstelle .wsp.wsp-verbund {
    grid-template-columns:
        repeat(auto-fill, minmax(min(100%, calc(var(--ls-name-gut) * 26.1)), 1fr));
}
@media (max-width: 1100px) {
    #a-leitstelle .brett-zeile:not(.eigen),
    #a-leitstelle .wgr-spalten {
        grid-template-columns:
            repeat(auto-fit, minmax(min(100%, calc(var(--ls-name-gut) * 22.6)), 1fr));
    }
}
/* Die sechs Tafel-Stile bringen eigene Masse mit (--lsk-karte,
   --lsk-sp: 188 bis 340 px). Sie bleiben, solange sie GROESSER sind
   als das, was die Schrift braucht - ihr Zweck ist ja, die Tafel
   dichter oder luftiger zu machen, nicht, den Namen zu kuerzen. */
html[data-lsstil] #a-leitstelle .wsp {
    grid-template-columns:
        repeat(auto-fill, minmax(min(100%,
            max(var(--lsk-karte), calc(var(--ls-name-gut) * 17.4))), 1fr));
}
html[data-lsstil] #a-leitstelle .brett-zeile:not(.eigen),
html[data-lsstil] #a-leitstelle .brett-zeile.eigen {
    grid-template-columns:
        repeat(auto-fit, minmax(min(100%,
            max(var(--lsk-sp), calc(var(--ls-name-gut) * 22.6))), 1fr));
}

/* 4. Der Leitstellen-Platz traegt auch einen Namen. Er haengt nicht am
      Stellrad (er ist kein Chip), wohl aber am Zoom - also dieselbe
      Untergrenze wie bei den Chips. */
#a-leitstelle .sitz .cn {
    font-size: max(12px, calc(var(--ls-lesbar) / var(--ls-zoom, 1)));
}

/* ---- Leute zu einer Besprechung dazuholen (24.09.2026) ---------------
   Drei Reihen Schnellgriffe ueber einer Hakenliste. Die Liste bekommt
   eine feste Hoehe mit eigenem Lauf: bei vierzig Leuten im Dienst
   waere der Knopf "Dazuholen" sonst zwei Bildschirme weiter unten und
   niemand faende ihn. */
.sz-dazu { grid-column: 1 / -1; display: flex; flex-direction: column;
    gap: .6rem; }
.sz-griffe { display: flex; align-items: baseline; gap: .5rem;
    flex-wrap: wrap; }
.sz-griffe > label { flex: 0 0 8.5rem; font-size: 11px;
    text-transform: uppercase; letter-spacing: .08em; color: var(--stumm); }
.sz-griffe > div { flex: 1 1 12rem; display: flex; gap: .35rem;
    flex-wrap: wrap; }
.sz-griff {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .5rem; border-radius: 6px; cursor: pointer;
    font-size: 12px; line-height: 1.2;
    color: var(--uf, var(--text));
    border: 1px solid color-mix(in srgb, var(--uf, #7e8899) 45%, transparent);
    background: color-mix(in srgb, var(--uf, #7e8899) 12%, transparent);
}
.sz-griff b { font-size: 11px; opacity: .75; }
.sz-griff:hover { background: color-mix(in srgb, var(--uf, #7e8899) 24%, transparent); }
/* Angetippt heisst: alle aus dieser Gruppe stehen schon im Haken. Ein
   zweiter Tipp nimmt sie wieder weg. */
.sz-griff.an {
    color: var(--hell);
    border-color: color-mix(in srgb, var(--uf, #9adcb4) 85%, transparent);
    background: color-mix(in srgb, var(--uf, #2d5a3d) 38%, transparent);
}
.sz-dazu-kopf { display: flex; align-items: baseline; gap: .4rem;
    border-top: 1px solid var(--rand); padding-top: .55rem; }
.sz-dazu-kopf label { flex: 1; font-size: 11px; text-transform: uppercase;
    letter-spacing: .08em; color: var(--stumm); }
.sz-dazu-kopf b { color: var(--hell); }
.sz-dazu-liste { max-height: 40vh; overflow-y: auto; display: flex;
    flex-direction: column; gap: .15rem; padding-right: .2rem; }
.sz-dazu-zeile { display: flex; align-items: center; gap: .5rem;
    padding: .25rem .35rem; border-radius: 6px; cursor: pointer;
    text-transform: none; letter-spacing: 0; font-size: 13px; }
.sz-dazu-zeile:hover { background: var(--karte2); }
.sz-dazu-zeile input { width: 15px; flex: 0 0 auto; }
.sz-dazu-zeile img, .sz-dazu-zeile .avatar { flex: 0 0 auto; }
.sz-dazu-zeile .cn { flex: 1; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.sz-dazu-zeile .rk { flex: 0 0 auto; }
/* Wer schon in einer ANDEREN Besprechung sitzt: er wird dort
   ausgetragen. Richtig so - aber niemand soll es erst hinterher
   merken. */
.sz-dazu-zeile .rk.sz-warn {
    color: #e2c07a; border-color: #5c4520; background: #241d10;
}

/* ---- Gruppenzeile im Namensfeld (24.09.2026) -------------------------
   Eine Unit, ein Rang oder die ganze Mannschaft stehen OBEN in der
   Vorschlagsliste und sehen anders aus als ein Kopf - sonst klickt man
   im Vorbeigehen zwoelf Leute an, wo man einen meinte. Der Strich
   links tut das mit einem Pixel; ein zweites Etikett waere in einer
   Zeile mit drei Spalten nur Gedraenge. */
.nf-zeile.nf-gruppe {
    border-left: 3px solid var(--gold);
    padding-left: calc(.5rem - 3px);
    background: color-mix(in srgb, var(--gold) 7%, transparent);
}
.nf-zeile.nf-gruppe.an, .nf-zeile.nf-gruppe:hover {
    background: color-mix(in srgb, var(--gold) 16%, transparent);
}
.nf-zeile.nf-gruppe .nf-nr { color: var(--gold); text-transform: uppercase;
    letter-spacing: .06em; font-family: inherit; font-size: 10.5px; }
.nf-zeile.nf-gruppe .nf-rang { color: var(--text); }

/*  Eine gewaehlte GRUPPE sieht auch als Marke anders aus als ein Kopf
    (24.09.2026). Sie steht fuer einen Kreis, der sich bis zum Termin
    noch aendern kann - das darf man ihr ansehen, sonst haelt man sie
    fuer einen besonders langen Namen. */
.nf-marke.nf-gmarke {
    background: color-mix(in srgb, var(--gold) 14%, transparent);
    color: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 45%, transparent);
    font-weight: 600;
}
.nf-marke.nf-gmarke > button { color: var(--gold); }
.nf-marke.nf-gmarke > button:hover {
    background: color-mix(in srgb, var(--gold) 28%, transparent);
    color: var(--hell);
}

/*  Die eingeladenen GRUPPEN an der Termin-Kachel. Bewusst getrennt von
    den Zusagen: eingeladen zu sein ist keine Antwort. Die Zahl steht
    klein dahinter und ist die von heute. */
.k-gruppen {
    display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
    margin-top: .45rem;
}
/*  Seit 24.09.2026 ein KNOPF: er führt zu der Liste, wer aus der
    Gruppe geantwortet hat. Die Zahlen stehen schon daran, damit man
    für den Überblick gar nicht erst klicken muss. */
.k-gruppe {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .12rem .5rem; border-radius: 999px; font-size: 11.5px;
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    color: var(--gold);
    border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
    font-family: inherit; cursor: pointer; margin: 0;
}
.k-gruppe:hover {
    background: color-mix(in srgb, var(--gold) 22%, transparent);
}
.k-gruppe > i {
    font-style: normal; font-size: 10.5px; opacity: .8;
    padding-left: .3rem;
    border-left: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}
.k-gruppe > i.ja   { color: var(--gruen, #3ba55d); opacity: 1; }
.k-gruppe > i.nein { color: var(--rot); opacity: 1; }
.k-gruppe > i.off  { opacity: .65; }

/*  Die aufgeschlagene Liste: drei Blöcke, der wichtigste zuerst. */
.kr-block { margin-bottom: .7rem; }
.kr-kopf {
    font-size: 11.5px; letter-spacing: .04em; color: var(--stumm, #8a93a3);
    margin-bottom: .2rem;
}
.kr-kopf b { color: var(--hell); }
.kr-block.ja   .kr-kopf b { color: var(--gruen, #3ba55d); }
.kr-block.nein .kr-kopf b { color: var(--rot); }
.kr-block.offen .kr-kopf b { color: var(--gelb); }

/*  Wer noch nicht geantwortet hat - nur bei Antwortpflicht. Ein
    eigener Ton, weil es kein Zustand ist, sondern eine offene Aufgabe. */
.k-offen {
    border-left: 3px solid var(--gelb);
    padding-left: .5rem;
}

/*  Die naechsten Sendungen einer Ankuendigungs-Serie (24.09.2026).
    Justin musste nachfragen, ob in einer Woche die richtige Karte mit
    dem richtigen Termin kommt - eine Liste, die das selbst sagt,
    erspart die Frage. Volle Breite unter der Zeile, damit sie die
    ohnehin enge Kopfreihe nicht sprengt. */
.k-ankvor {
    flex: 0 0 100%;
    display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
    margin-top: .1rem;
}
.k-ankvor-z {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .1rem .45rem; border-radius: 6px; font-size: 11px;
    background: rgba(255,255,255,.04); color: var(--stumm, #8a93a3);
    border: 1px solid rgba(255,255,255,.07);
}
.k-ankvor-z > i {
    font-style: normal; color: var(--gold); opacity: .85;
}