/* ==========================================================================
   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.
   ========================================================================== */

:root {
    --kopf:     58px;

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

    --text:     #c4ccdA;
    --hell:     #eef2f8;
    --grau:     #7e8899;

    --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, #101a2c 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: 32px; height: 32px;
    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%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 6px rgba(201,164,92,.35));
}
.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; }
.ich img, .avatar {
    width: 28px; height: 28px; border-radius: 50%;
    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;
    font-size: 11px; color: var(--gold); flex: none;
}
.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: 1680px; 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, #121b2d 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: #1b2842; color: var(--hell); border-color: #3a4d75; }
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: #0b111d; 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);
}
input::placeholder, textarea::placeholder { color: #55617a; }
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;
    opacity: .85;
}
.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: 9.5px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--gold); font-weight: 700;
    padding: .55rem .8rem; border-bottom: 1px solid var(--randhell);
    position: sticky; top: var(--kopf); background: #131c2e; z-index: 2;
    opacity: .95;
}
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); }
.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: #1a2740; 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; gap: .65rem; flex-wrap: wrap; font-size: 11.5px; color: var(--grau); }

.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, #101827 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;
    transform: translateX(100%); transition: transform .18s ease-out;
}
.schublade.auf { transform: 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;
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .18s;
}
.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: 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 {
    content: "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%);
    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; }

@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; }
    th { top: 0; }
    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: #1a2740; }
.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; }

.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;
}
.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 {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .16rem .5rem .16rem .18rem; border-radius: 999px;
    background: #0e1524; border: 1px solid var(--rand);
    font-size: 11.5px; white-space: nowrap;
}
.crew img, .crew .avatar { width: 20px; height: 20px; font-size: 9px; }
.crew .cn b { color: var(--goldhell); font-weight: 700; letter-spacing: .02em; }
.crew.da { border-color: #1e4a30; }
.crew.da .cn { color: var(--hell); }
.crew .rk {
    font-style: normal; font-size: 8.5px; 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; }

.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 img, .crew-wahl .avatar { width: 24px; height: 24px; }

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

.codes-kopf { display: flex; align-items: flex-start; gap: 1rem; padding: .8rem .95rem .3rem; }
.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.gruen { color: #85d3a4; }  .code-pille.blau { color: #9ec7ef; }
.code-pille.gelb  { color: #e2c07a; }  .code-pille.lila { color: #b7abee; }
.code-pille.grau  { color: var(--grau); }
.code-pille.rot   { color: #eda29b; border-color: #57282a; }
.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; }
.pool-chip.gewaehlt {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 0 14px -2px rgba(201,164,92,.8);
}

/* Drei, vier Revier-Spalten nebeneinander */
.brett {
    display: grid; gap: 1rem; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.wsp {
    background: linear-gradient(180deg, #121b2d 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: 8.5px; 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); }
.sitz-raus { margin-left: auto; padding: .15rem .5rem; border-radius: 6px; }
.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: #1c1206; border-color: #b35c1e;
    background: linear-gradient(180deg, #f0913a 0%, #d97425 100%);
    box-shadow: 0 2px 10px rgba(240,145,58,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.sitz-frei:hover { background: linear-gradient(180deg, #f6a04d 0%, #e07e2c 100%); color: #1c1206; }

/* 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%);
}

.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); }

@media (max-width: 1100px) { .brett { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }