/* ===== BAUKASTEN START: Sin City UI-Baukasten sc_ui v2, Live-Stand (r301 Kokosnuss/Lila), unveraendert uebernommen
   von werkzeuge/baukasten_holen.py. Nicht von Hand aendern, eigene Regeln stehen unter BAUKASTEN ENDE.
   Fuers Web angepasst: 1 u = 1 px, Schriften als woff2, Material als webp, ohne cfx-nui-Verweise. ===== */
@font-face { font-family: 'Purista'; font-weight: 500; font-display: swap; src: url('schrift/purista-medium.woff2') format('woff2'); }
@font-face { font-family: 'Purista'; font-weight: 600; font-display: swap; src: url('schrift/purista-semibold.woff2') format('woff2'); }
@font-face { font-family: 'Purista'; font-weight: 700 800; font-display: swap; src: url('schrift/purista-bold.woff2') format('woff2'); }
@font-face { font-family: 'RevxNeue'; font-weight: 400; font-display: swap; src: url('schrift/revxneue-regular.woff2') format('woff2'); }
@font-face { font-family: 'RevxNeue'; font-weight: 500; font-display: swap; src: url('schrift/revxneue-medium.woff2') format('woff2'); }
@font-face { font-family: 'RevxNeue'; font-weight: 600 700; font-display: swap; src: url('schrift/revxneue-semibold.woff2') format('woff2'); }
@font-face { font-family: 'MrDafoe'; font-weight: 400; font-display: swap; src: url('schrift/mrdafoe-regular.woff2') format('woff2'); }

/* Sin City UI-Baukasten v2 (sc_ui), r286.
   Grundlage sind die Originale des Sin-City-Designers vom Server, nichts ist frei erfunden:
   - Regeln fuer Flaechen, Knoepfe, Reiter, Chips und Zustaende 1:1 aus Frakfights (sc_frakfights, Jasons Lieblings-UI),
   - Panels und Kacheln aus dem Inventar (bg.png, box_item.png), skalierbar nachgebaut und per Pixelvergleich geprueft (panels.py, teile.py),
   - Glanz-Varianten (st-glanz) aus HUD und ESX-Menues (btn, pnl, pnllb, pnlinput).
   Gleiche Klassennamen wie v1, damit alle Menues durch Tausch dieser Datei umgestellt werden koennen.
   Masse sind px bei 1080p, bauen.py rechnet sie auf die Bildschirmhoehe um (--u). Platzhalter in doppelten At-Zeichen setzt bauen.py aus den Messungen ein.
   Zustaende immer mit st-Praefix. Kein backdrop-filter, kein color-mix(). st-hover zeigt den Hover-Zustand fest an (Musterseite, Tastatur). */
:root {
    --u: 1px;
    /* Farben wie Frakfights (config.css des Designers) */
    --sc-orange: #f4007a;
    --sc-orange-hell: #ff66ab;
    --sc-orange-mitte: #ff4aae;
    --sc-orange-dunkel: #d40072;
    --sc-ton: rgba(244, 0, 122, .15);
    --sc-schatten: rgba(244, 0, 122, .25);
    --sc-reihe: rgba(244, 0, 122, .35);
    --sc-glut: rgba(244, 0, 122, .75);
    --sc-flaeche: rgba(255, 255, 255, .05);
    --sc-flaeche-hell: rgba(255, 255, 255, .09);
    --sc-kante: rgba(255, 255, 255, .15);
    --sc-geld: #74ff58;
    --sc-rot: #ff5858;
    --sc-gelb: #ffd27a;
    --sc-gruen: #74ff58;
    --sc-text: #ffffff;
    --sc-text2: rgba(255, 255, 255, .75);
    --sc-text3: rgba(255, 255, 255, .45);
    --sc-dunkel: rgba(0, 0, 0, .75);
    /* Ecken: Panel wie Inventar, Bedienteile wie Frakfights */
    --sc-r-panel: calc(var(--u) * 10);
    --sc-r: calc(var(--u) * 3);
    --sc-r-klein: calc(var(--u) * 2);
    --sc-titel: 'Purista', 'Segoe UI', sans-serif;
    --sc-schrift: 'RevxNeue', 'Segoe UI', sans-serif;
    --sc-akzent: 'MrDafoe', cursive;
    --sc-weich: cubic-bezier(0.16, 1, 0.3, 1);
    --sc-krone: none;
    --sc-strich: none;
    --sc-glanz-weiss: 0 0 calc(var(--u) * 32) rgba(255, 255, 255, .5);
}
.sc-ui, .sc-ui * { box-sizing: border-box; }
.sc-ui { font-family: var(--sc-schrift); font-weight: 500; color: var(--sc-text); user-select: none; -webkit-font-smoothing: antialiased; }
.sc-ui svg { display: block; }
/* Weiche Uebergaenge nur fuer Baukasten-Teile (nicht fuer alles im Menue, sonst stoeren sie eigene Einblend-Effekte, z. B. Tuner) */
.sc-reiter > div, .sc-seiten > div, .sc-kachel, .sc-zeile, .sc-haupt, .sc-zweit, .sc-ja, .sc-nein, .sc-zu, .sc-pfeil, .sc-mini, .sc-wahl > div,
.sc-knopf, .sc-aktion, .sc-eintrag, .sc-eingabe, .sc-textfeld, .sc-suche, .sc-haken, .sc-dienst {
    transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease, border-color .3s ease; }
.sc-panel { position: relative; width: calc(var(--u) * 339); padding: calc(var(--u) * 20) calc(var(--u) * 18); display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.sc-panel.st-breit { width: calc(var(--u) * 420); }
.sc-panel { isolation: isolate; border: 0; box-shadow: none; border-radius: calc(var(--u) * 10.00); background: linear-gradient(90deg, #ff8a3d, #ff3d7f 45%, #a74dff) calc(50% + calc(var(--u) * -2.00)) 0 / calc(var(--u) * 40.00) calc(var(--u) * 3.00) no-repeat, url('bilder/panel_inventar.webp') 0 0 / 100% 100% no-repeat; }
.sc-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; mix-blend-mode: color-dodge; background-image: linear-gradient(90deg, rgb(58, 61, 68) calc(var(--u) * 1.00), transparent calc(var(--u) * 1.00)), linear-gradient(180deg, rgb(58, 61, 68) calc(var(--u) * 1.00), transparent calc(var(--u) * 1.00)); background-size: calc(var(--u) * 17.318) calc(var(--u) * 17.318); background-position: calc(var(--u) * 11.00) calc(var(--u) * 16.00); -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 1.000) calc(var(--u) * 11.50), rgba(0, 0, 0, 0.825) calc(var(--u) * 30.00), rgba(0, 0, 0, 0.611) calc(var(--u) * 50.00), rgba(0, 0, 0, 0.367) calc(var(--u) * 72.50), rgba(0, 0, 0, 0.091) calc(var(--u) * 97.50), rgba(0, 0, 0, 0.000) calc(var(--u) * 122.50), transparent calc(var(--u) * 135.00)); }
/* Kinder brauchen kein position: relative, das Gitter (::before, z-index -1) liegt durch isolation sowieso dahinter */
/* ================= Kopf (Frakfights) ================= */
.sc-kopf { display: flex; align-items: center; position: relative; min-height: calc(var(--u) * 52); gap: calc(var(--u) * 12); padding-bottom: calc(var(--u) * 14); margin-bottom: calc(var(--u) * 2); border-bottom: calc(var(--u) * 1) solid var(--sc-kante); }
.sc-logo { width: calc(var(--u) * 46); height: calc(var(--u) * 50); flex: none; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 calc(var(--u) * 14) rgba(244, 0, 122, .55)); }
.sc-logo img, .sc-logo svg { width: 100%; height: 100%; object-fit: contain; }
.sc-titel { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 0; }
/* Titel: Krone sitzt im eigenen Platz rechts (padding), lange Titel werden mit ... gekuerzt statt ueberzulaufen */
.sc-titel b { order: 1; position: relative; align-self: flex-start; max-width: 100%; padding: calc(var(--u) * 6) calc(var(--u) * 26) 0 0; margin-top: calc(var(--u) * -6);
    font-family: var(--sc-titel); font-weight: 700; font-size: calc(var(--u) * 26); line-height: calc(var(--u) * 28); letter-spacing: calc(var(--u) * -1);
    text-shadow: 0 0 calc(var(--u) * 37) rgba(255, 255, 255, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-titel b::after { content: ""; position: absolute; right: calc(var(--u) * 2); top: 0; width: calc(var(--u) * 22); height: calc(var(--u) * 16);
    background: var(--sc-krone) no-repeat center / contain; filter: drop-shadow(0 0 calc(var(--u) * 5) rgba(244, 0, 122, .6)); }
.sc-titel small { order: 2; align-self: flex-start; display: inline-flex; align-items: center; height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 6); margin-top: calc(var(--u) * 1);
    font-family: var(--sc-titel); font-weight: 600; font-size: calc(var(--u) * 15); letter-spacing: calc(var(--u) * -.6); color: rgba(0, 0, 0, .7);
    border-radius: var(--sc-r); background: linear-gradient(159deg, rgba(97, 30, 120, 0.998) 3.1%, rgba(144, 12, 78, 0.999) 9.4%, rgba(154, 12, 83, 0.999) 15.6%, rgba(167, 13, 90, 0.999) 21.9%, rgba(181, 15, 98, 0.999) 28.1%, rgba(196, 16, 106, 0.999) 34.4%, rgba(211, 17, 114, 0.999) 40.6%, rgba(226, 18, 122, 0.999) 46.9%, rgba(223, 18, 120, 0.999) 53.1%, rgba(208, 17, 112, 0.999) 59.4%, rgba(193, 16, 104, 0.999) 65.6%, rgba(179, 14, 96, 0.999) 71.9%, rgba(166, 13, 89, 0.999) 78.1%, rgba(155, 12, 82, 0.999) 84.4%, rgba(148, 12, 80, 0.999) 90.6%, rgba(151, 12, 82, 0.988) 96.9%); box-shadow: 0 0 calc(var(--u) * 31) var(--sc-reihe); }
.sc-kopf .sc-rechts { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 8); align-self: flex-start; }
.sc-zu {
    width: calc(var(--u) * 27); height: calc(var(--u) * 27); flex: none; border-radius: var(--sc-r); display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: linear-gradient(135deg, rgba(196, 44, 47, 0.753) 3.1%, rgba(202, 45, 48, 0.781) 9.4%, rgba(209, 47, 50, 0.812) 15.6%, rgba(217, 49, 52, 0.843) 21.9%, rgba(224, 50, 54, 0.876) 28.1%, rgba(234, 53, 56, 0.915) 34.4%, rgba(243, 55, 58, 0.953) 40.6%, rgba(251, 56, 60, 0.985) 46.9%, rgba(250, 56, 59, 0.976) 53.1%, rgba(242, 54, 58, 0.946) 59.4%, rgba(232, 51, 55, 0.907) 65.6%, rgba(223, 49, 53, 0.868) 71.9%, rgba(215, 48, 51, 0.836) 78.1%, rgba(208, 46, 49, 0.804) 84.4%, rgba(202, 45, 48, 0.772) 90.6%, rgba(195, 43, 46, 0.722) 96.9%); border-top: calc(var(--u) * 1) solid rgba(219, 49, 52, 0.641); border-bottom: calc(var(--u) * 1) solid rgba(218, 47, 52, 0.213); border-left: calc(var(--u) * 1) solid rgba(220, 49, 53, 0.862); border-right: calc(var(--u) * 1) solid rgba(219, 48, 52, 0.853); box-shadow: 0 0 calc(var(--u) * 32) rgba(255, 57, 61, .35);
}
.sc-zu:hover, .sc-zu.st-hover { transform: translateY(calc(var(--u) * 2)); box-shadow: 0 0 calc(var(--u) * 32) rgba(255, 57, 61, .55); }
.sc-zu:active { opacity: .75; }
.sc-zu svg { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
/* Grosser Marken-Kopf wie das Inventar (Logo ohne Untertitel, Wort und Symbol setzt das Menue) */
/* ================= Reiter (Frakfights) ================= */
.sc-reiter { display: flex; gap: calc(var(--u) * 8); width: 100%; }
.sc-reiter > div {
    flex: 1; min-width: 0; height: calc(var(--u) * 36); padding: 0 calc(var(--u) * 12); border-radius: var(--sc-r); display: flex; align-items: center; justify-content: center; cursor: pointer;
    font-family: var(--sc-titel); font-weight: 500; font-size: calc(var(--u) * 14); color: var(--sc-text2); white-space: nowrap; background: var(--sc-flaeche);
}
.sc-reiter > div:hover, .sc-reiter > div.st-hover { transform: translateY(calc(var(--u) * 2)); background: #fff; color: var(--sc-dunkel); font-weight: 600; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 35) rgba(255, 255, 255, .25); }
.sc-reiter > div.st-an { background: linear-gradient(90deg, #ff8a3d 0%, #ff3d7f 42%, #e62ad6 72%, #a74dff 100%); color: rgba(0, 0, 0, .8); font-weight: 600; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 27) var(--sc-schatten); transform: none; }
.sc-reiter > div:active { opacity: .75; }
/* Seiten-Reiter (Admin) gleich wie Reiter */
.sc-seiten { display: flex; gap: calc(var(--u) * 8); }
.sc-seiten > div { flex: 1; height: calc(var(--u) * 36); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--sc-r);
    font-family: var(--sc-titel); font-weight: 500; font-size: calc(var(--u) * 13); color: var(--sc-text2); background: var(--sc-flaeche); }
.sc-seiten > div:hover, .sc-seiten > div.st-hover { background: #fff; color: var(--sc-dunkel); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 35) rgba(255, 255, 255, .25); }
.sc-seiten > div.st-an { background: linear-gradient(90deg, #ff8a3d 0%, #ff3d7f 42%, #e62ad6 72%, #a74dff 100%); color: rgba(0, 0, 0, .8); font-weight: 600; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 27) var(--sc-schatten); }
/* Abschnitts-Ueberschrift: orange Strich wie in Frakfights (.line), Text, Linie */
.sc-abschnitt { display: flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 6) calc(var(--u) * 2) 0; font-family: var(--sc-titel); font-weight: 600; font-size: calc(var(--u) * 12); letter-spacing: calc(var(--u) * .6);
    text-transform: uppercase; color: var(--sc-text3); }
.sc-abschnitt::before { content: ""; width: calc(var(--u) * 2); height: calc(var(--u) * 12); flex: none; background: linear-gradient(90deg, #ff8a3d 0%, #ff3d7f 42%, #e62ad6 72%, #a74dff 100%); box-shadow: 0 0 calc(var(--u) * 16) rgba(244, 0, 122, .55); }
.sc-abschnitt::after { content: ""; flex: 1; border-top: calc(var(--u) * 1) solid var(--sc-kante); }
/* ================= Kacheln (Inventar-Kachel mit Raute) ================= */
.sc-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 8); }
.sc-kacheln.st-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-kachel {
    position: relative; min-width: 0; height: calc(var(--u) * 122); border-radius: var(--sc-r-klein); padding: calc(var(--u) * 8) calc(var(--u) * 4) calc(var(--u) * 8); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    background: linear-gradient(102deg, rgba(254, 254, 254, 0.032) 3.1%, rgba(218, 218, 218, 0.038) 9.4%, rgba(177, 176, 176, 0.047) 15.6%, rgba(160, 151, 148, 0.055) 21.9%, rgba(151, 137, 126, 0.065) 28.1%, rgba(139, 98, 153, 0.088) 34.4%, rgba(138, 76, 159, 0.125) 40.6%, rgba(140, 66, 164, 0.147) 46.9%, rgba(167, 63, 114, 0.154) 53.1%, rgba(142, 66, 168, 0.146) 59.4%, rgba(147, 73, 172, 0.126) 65.6%, rgba(155, 78, 181, 0.119) 71.9%, rgba(189, 77, 131, 0.125) 78.1%, rgba(203, 75, 136, 0.137) 84.4%, rgba(221, 74, 144, 0.152) 90.6%, rgba(240, 74, 154, 0.166) 96.9%); background-clip: padding-box; border-top: calc(var(--u) * 1) solid rgba(150, 129, 157, 0.068); border-bottom: calc(var(--u) * 1) solid rgba(189, 64, 125, 0.181); border-left: calc(var(--u) * 1) solid rgba(212, 205, 201, 0.044); border-right: calc(var(--u) * 1) solid rgba(197, 63, 128, 0.189);
}
.sc-kachel:hover, .sc-kachel.st-hover, .sc-kachel.st-an { background: linear-gradient(102deg, rgba(255, 41, 139, 0.098) 3.1%, rgba(242, 41, 134, 0.104) 9.4%, rgba(223, 37, 123, 0.113) 15.6%, rgba(210, 35, 113, 0.119) 21.9%, rgba(202, 33, 109, 0.128) 28.1%, rgba(195, 31, 109, 0.150) 34.4%, rgba(190, 30, 106, 0.185) 40.6%, rgba(190, 31, 106, 0.206) 46.9%, rgba(191, 31, 106, 0.213) 53.1%, rgba(193, 32, 108, 0.206) 59.4%, rgba(200, 33, 112, 0.188) 65.6%, rgba(206, 35, 115, 0.180) 71.9%, rgba(210, 35, 117, 0.185) 78.1%, rgba(219, 36, 123, 0.197) 84.4%, rgba(231, 36, 129, 0.211) 90.6%, rgba(244, 37, 134, 0.223) 96.9%); background-clip: padding-box; border-top: calc(var(--u) * 1) solid rgba(209, 33, 114, 0.130); border-bottom: calc(var(--u) * 1) solid rgba(210, 34, 117, 0.238); border-left: calc(var(--u) * 1) solid rgba(236, 40, 129, 0.111); border-right: calc(var(--u) * 1) solid rgba(214, 35, 120, 0.245); }
.sc-kachel.st-an { box-shadow: 0 0 calc(var(--u) * 22) var(--sc-schatten); }
.sc-kachel > b { max-width: 100%; padding: 0 calc(var(--u) * 4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
    font-family: var(--sc-titel); font-weight: 600; font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 17); text-shadow: 0 0 calc(var(--u) * 24) rgba(255, 255, 255, .35); }
/* Raute des Inventars sitzt hinter dem Bild (wie im Inventar), nur wo ein Bild ist */
.sc-kachel > img, .sc-kachel > .sc-bild { width: calc(var(--u) * 58); height: calc(var(--u) * 58); object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 6) calc(var(--u) * 10) rgba(0, 0, 0, .45)); transition: transform .25s var(--sc-weich);
    background: url('bilder/raute_kachel.webp') center / 86% auto no-repeat; }
.sc-kachel:hover > img, .sc-kachel.st-hover > img, .sc-kachel.st-an > img, .sc-kachel:hover > .sc-bild, .sc-kachel.st-an > .sc-bild { background-image: url('bilder/raute_kachel_an.webp'); }
.sc-kachel:hover > img, .sc-kachel:hover > .sc-bild, .sc-kachel.st-hover > img { transform: scale(1.08) translateY(calc(var(--u) * -2)); }
.sc-kachel.st-gesperrt, .sc-kachel.st-voll { opacity: .5; cursor: default; }
/* Preis als Chip wie die Belohnung in Frakfights */
.sc-preis { display: inline-flex; align-items: center; height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 8); border-radius: var(--sc-r-klein); white-space: nowrap;
    font-family: var(--sc-titel); font-weight: 600; font-size: calc(var(--u) * 13); color: var(--sc-orange); background: var(--sc-ton); }
/* Anzahl oben rechts wie das Wert-Kaestchen in Frakfights */
/* sitzt rechts neben dem Bild (unter der Namenszeile), damit sie keinen Namen verdeckt */
.sc-anzahl {
    position: absolute; top: calc(var(--u) * 30); right: calc(var(--u) * 6); min-width: calc(var(--u) * 26); height: calc(var(--u) * 18); padding: 0 calc(var(--u) * 5); display: grid; place-items: center;
    font-family: var(--sc-titel); font-weight: 600; font-size: calc(var(--u) * 12); color: rgba(0, 0, 0, .75);
    border-radius: var(--sc-r-klein); background: linear-gradient(135deg, rgba(173, 13, 93, 0.556) 3.1%, rgba(165, 13, 89, 0.577) 9.4%, rgba(161, 13, 87, 0.615) 15.6%, rgba(165, 13, 89, 0.668) 21.9%, rgba(176, 14, 94, 0.735) 28.1%, rgba(191, 15, 102, 0.810) 34.4%, rgba(207, 17, 111, 0.887) 40.6%, rgba(223, 18, 120, 0.957) 46.9%, rgba(225, 18, 122, 0.962) 53.1%, rgba(208, 17, 113, 0.885) 59.4%, rgba(191, 15, 103, 0.809) 65.6%, rgba(176, 14, 95, 0.734) 71.9%, rgba(165, 13, 89, 0.668) 78.1%, rgba(161, 13, 87, 0.614) 84.4%, rgba(164, 13, 89, 0.577) 90.6%, rgba(172, 13, 92, 0.556) 96.9%); background-clip: padding-box; border-top: calc(var(--u) * 1) solid rgba(223, 17, 119, 0.935); border-bottom: calc(var(--u) * 1) solid rgba(223, 18, 120, 0.934); border-left: calc(var(--u) * 1) solid rgba(200, 16, 108, 0.780); border-right: calc(var(--u) * 1) solid rgba(200, 16, 109, 0.779); box-shadow: 0 0 calc(var(--u) * 20) var(--sc-reihe);
}
/* Rang-Kaestchen (Frakfights-Tabelle) */
.sc-rang { display: inline-grid; place-items: center; min-width: calc(var(--u) * 27); height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 4); flex: none;
    font-family: var(--sc-titel); font-weight: 700; font-size: calc(var(--u) * 13); color: rgba(0, 0, 0, .75);
    border-radius: var(--sc-r-klein); background: linear-gradient(123deg, rgba(187, 15, 101, 0.630) 3.1%, rgba(175, 14, 94, 0.626) 9.4%, rgba(170, 14, 92, 0.652) 15.6%, rgba(174, 14, 94, 0.699) 21.9%, rgba(184, 15, 100, 0.763) 28.1%, rgba(195, 16, 105, 0.826) 34.4%, rgba(210, 17, 114, 0.894) 40.6%, rgba(224, 18, 121, 0.961) 46.9%, rgba(224, 18, 121, 0.960) 53.1%, rgba(209, 17, 113, 0.892) 59.4%, rgba(195, 16, 106, 0.824) 65.6%, rgba(183, 14, 98, 0.761) 71.9%, rgba(173, 14, 93, 0.696) 78.1%, rgba(171, 14, 93, 0.650) 84.4%, rgba(175, 14, 94, 0.624) 90.6%, rgba(187, 15, 101, 0.628) 96.9%); background-clip: padding-box; border-top: calc(var(--u) * 1) solid rgba(224, 18, 121, 0.470); border-bottom: calc(var(--u) * 1) solid rgba(224, 18, 121, 0.469); border-left: calc(var(--u) * 1) solid rgba(202, 16, 109, 0.791); border-right: calc(var(--u) * 1) solid rgba(201, 16, 109, 0.789); box-shadow: 0 0 calc(var(--u) * 32) var(--sc-glut); }
/* ================= Blaettern ================= */
.sc-blaettern { position: relative; height: calc(var(--u) * 36); display: flex; align-items: center; justify-content: space-between; }
.sc-blaettern > span { position: absolute; inset: 0; border-radius: var(--sc-r); display: flex; align-items: center; justify-content: center;
    font-family: var(--sc-titel); font-weight: 600; font-size: calc(var(--u) * 14); background: var(--sc-flaeche); }
.sc-blaettern > span em { font-style: normal; color: var(--sc-orange); }
.sc-pfeil { position: relative; z-index: 1; width: calc(var(--u) * 30); height: calc(var(--u) * 28); margin: 0 calc(var(--u) * 4); border-radius: var(--sc-r); cursor: pointer; color: rgba(0, 0, 0, .75);
    display: flex; align-items: center; justify-content: center; background: linear-gradient(90deg, #ff8a3d 0%, #ff3d7f 42%, #e62ad6 72%, #a74dff 100%); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 20) var(--sc-schatten); }
.sc-pfeil:hover, .sc-pfeil.st-hover { background: #fff; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 20) rgba(255, 255, 255, .25); transform: translateY(calc(var(--u) * 1)); }
.sc-pfeil svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
/* ================= Summe und Wahl (Bar/Karte, Bank-Rahmen des Designers) ================= */
.sc-summe { display: flex; justify-content: space-between; align-items: center; font-family: var(--sc-titel); font-weight: 600; font-size: calc(var(--u) * 15); }
.sc-summe > em { font-style: normal; font-weight: 700; color: var(--sc-geld); text-shadow: 0 0 calc(var(--u) * 18) rgba(116, 255, 88, .35); }
.sc-wahl { display: flex; gap: calc(var(--u) * 8); }
/* Ruhe: neutrale Flaeche; Hover: Bank-Rahmen des Designers (orange Kante); gewaehlt: orange getoent mit Glut */
.sc-wahl > div {
    flex: 1; height: calc(var(--u) * 70); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 5);
    font-family: var(--sc-titel); font-weight: 600; font-size: calc(var(--u) * 13); color: var(--sc-text2);
    border-radius: var(--sc-r); background: var(--sc-flaeche); border: calc(var(--u) * 1) solid var(--sc-kante);
}
.sc-wahl > div:hover, .sc-wahl > div.st-hover { background: linear-gradient(18deg, rgba(254, 175, 225, 0.066) 3.1%, rgba(255, 255, 255, 0.051) 9.4%, rgba(255, 255, 255, 0.051) 15.6%, rgba(255, 255, 255, 0.051) 21.9%, rgba(255, 255, 255, 0.051) 28.1%, rgba(255, 255, 255, 0.051) 34.4%, rgba(254, 253, 255, 0.051) 40.6%, rgba(254, 249, 255, 0.052) 46.9%, rgba(251, 238, 255, 0.054) 53.1%, rgba(254, 249, 255, 0.052) 59.4%, rgba(255, 255, 255, 0.051) 65.6%, rgba(255, 255, 255, 0.051) 71.9%, rgba(255, 255, 255, 0.051) 78.1%, rgba(255, 255, 255, 0.051) 84.4%, rgba(255, 255, 255, 0.051) 90.6%, rgba(255, 104, 199, 0.116) 96.9%); background-clip: padding-box; border-top: calc(var(--u) * 1) solid rgba(249, 0, 156, 0.623); border-bottom: calc(var(--u) * 1) solid rgba(249, 0, 156, 0.611); border-left: calc(var(--u) * 1) solid rgba(254, 1, 160, 0.281); border-right: calc(var(--u) * 1) solid rgba(255, 10, 164, 0.956); color: #fff; }
.sc-wahl > div.st-an { background: var(--sc-ton); border: calc(var(--u) * 1) solid var(--sc-orange); color: #fff; box-shadow: 0 0 calc(var(--u) * 22) var(--sc-schatten), inset 0 0 calc(var(--u) * 18) rgba(244, 0, 122, .18); }
.sc-wahl > div > img, .sc-wahl > div > svg { height: calc(var(--u) * 30); max-width: calc(var(--u) * 52); object-fit: contain; }
/* ================= Zeilen und Listen (Frakfights-Zeile, Glanz-Variante aus dem HUD) ================= */
.sc-liste { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.sc-zeile {
    position: relative; min-height: calc(var(--u) * 41); padding: 0 calc(var(--u) * 8) 0 calc(var(--u) * 11); border-radius: var(--sc-r); display: flex; align-items: center; gap: calc(var(--u) * 12); cursor: pointer;
    background: var(--sc-flaeche);
}
.sc-zeile:hover, .sc-zeile.st-hover { background: var(--sc-flaeche-hell); box-shadow: inset calc(var(--u) * 2) 0 0 rgba(255, 255, 255, .6); }
.sc-zeile.st-an { background: var(--sc-ton); box-shadow: inset calc(var(--u) * 3) 0 0 var(--sc-orange), 0 0 calc(var(--u) * 20) rgba(244, 0, 122, .12); }
.sc-zeile.st-gesperrt { opacity: .45; cursor: default; }
.sc-zeile.st-glanz { background: linear-gradient(150deg, rgba(255, 255, 255, 0.033) 3.1%, rgba(255, 255, 255, 0.041) 9.4%, rgba(255, 255, 255, 0.050) 15.6%, rgba(255, 255, 255, 0.059) 21.9%, rgba(255, 255, 255, 0.068) 28.1%, rgba(255, 255, 255, 0.077) 34.4%, rgba(255, 255, 255, 0.086) 40.6%, rgba(255, 255, 255, 0.094) 46.9%, rgba(255, 255, 255, 0.094) 53.1%, rgba(255, 255, 255, 0.086) 59.4%, rgba(255, 255, 255, 0.076) 65.6%, rgba(255, 255, 255, 0.067) 71.9%, rgba(255, 255, 255, 0.059) 78.1%, rgba(255, 255, 255, 0.050) 84.4%, rgba(255, 255, 255, 0.041) 90.6%, rgba(255, 255, 255, 0.033) 96.9%); background-clip: padding-box; border-top: calc(var(--u) * 1) solid rgba(255, 255, 255, 0.159); border-bottom: calc(var(--u) * 1) solid rgba(255, 255, 255, 0.159); border-left: calc(var(--u) * 1) solid rgba(255, 255, 255, 0.135); border-right: calc(var(--u) * 1) solid rgba(255, 255, 255, 0.134); }
.sc-zeile.st-glanz:hover, .sc-zeile.st-glanz.st-hover { background: linear-gradient(150deg, rgba(255, 255, 255, 0.050) 3.1%, rgba(255, 255, 255, 0.062) 9.4%, rgba(255, 255, 255, 0.075) 15.6%, rgba(255, 255, 255, 0.088) 21.9%, rgba(255, 255, 255, 0.102) 28.1%, rgba(255, 255, 255, 0.116) 34.4%, rgba(255, 255, 255, 0.129) 40.6%, rgba(255, 255, 255, 0.142) 46.9%, rgba(255, 255, 255, 0.142) 53.1%, rgba(255, 255, 255, 0.129) 59.4%, rgba(255, 255, 255, 0.115) 65.6%, rgba(255, 255, 255, 0.102) 71.9%, rgba(255, 255, 255, 0.088) 78.1%, rgba(255, 255, 255, 0.075) 84.4%, rgba(255, 255, 255, 0.062) 90.6%, rgba(255, 255, 255, 0.050) 96.9%); background-clip: padding-box; border-top: calc(var(--u) * 1) solid rgba(255, 255, 255, 0.327); border-bottom: calc(var(--u) * 1) solid rgba(255, 255, 255, 0.327); border-left: calc(var(--u) * 1) solid rgba(255, 255, 255, 0.296); border-right: calc(var(--u) * 1) solid rgba(255, 255, 255, 0.296); box-shadow: none; }
.sc-zeile.st-glanz.st-an { background: linear-gradient(153deg, rgba(255, 75, 171, 0.496) 3.1%, rgba(255, 75, 171, 0.560) 9.4%, rgba(255, 75, 171, 0.628) 15.6%, rgba(255, 75, 171, 0.695) 21.9%, rgba(255, 75, 171, 0.759) 28.1%, rgba(255, 75, 170, 0.822) 34.4%, rgba(255, 75, 170, 0.882) 40.6%, rgba(255, 75, 170, 0.929) 46.9%, rgba(255, 75, 170, 0.928) 53.1%, rgba(255, 75, 170, 0.879) 59.4%, rgba(255, 75, 170, 0.819) 65.6%, rgba(255, 75, 171, 0.757) 71.9%, rgba(255, 75, 171, 0.693) 78.1%, rgba(255, 75, 171, 0.625) 84.4%, rgba(255, 75, 171, 0.557) 90.6%, rgba(255, 75, 170, 0.493) 96.9%); background-clip: padding-box; border-top: calc(var(--u) * 1) solid rgba(255, 75, 170, 1.000); border-bottom: calc(var(--u) * 1) solid rgba(255, 75, 170, 1.000); border-left: calc(var(--u) * 1) solid rgba(255, 75, 170, 1.000); border-right: calc(var(--u) * 1) solid rgba(255, 75, 170, 1.000); color: rgba(0, 0, 0, .8); }
.sc-zeile > b { flex: 1; min-width: 0; font-family: var(--sc-titel); font-weight: 600; font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 18); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: var(--sc-glanz-weiss); }
.sc-zeile > small { font-family: var(--sc-schrift); font-weight: 500; font-size: calc(var(--u) * 13); color: var(--sc-text2); white-space: nowrap; }
.sc-zeile.st-an > small { color: #ffcfe7; }
.sc-zeile > em { font-style: normal; font-family: var(--sc-titel); font-weight: 600; font-size: calc(var(--u) * 13); color: #fff; white-space: nowrap; min-width: calc(var(--u) * 58); text-align: right; }
.sc-symbol { width: calc(var(--u) * 30); height: calc(var(--u) * 30); flex: none; border-radius: var(--sc-r); display: flex; align-items: center; justify-content: center; color: var(--sc-orange); background: var(--sc-ton); }
.sc-symbol svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-symbol img { width: 80%; height: 80%; object-fit: contain; }
.sc-zeile.st-an .sc-symbol { background: linear-gradient(123deg, rgba(187, 15, 101, 0.630) 3.1%, rgba(175, 14, 94, 0.626) 9.4%, rgba(170, 14, 92, 0.652) 15.6%, rgba(174, 14, 94, 0.699) 21.9%, rgba(184, 15, 100, 0.763) 28.1%, rgba(195, 16, 105, 0.826) 34.4%, rgba(210, 17, 114, 0.894) 40.6%, rgba(224, 18, 121, 0.961) 46.9%, rgba(224, 18, 121, 0.960) 53.1%, rgba(209, 17, 113, 0.892) 59.4%, rgba(195, 16, 106, 0.824) 65.6%, rgba(183, 14, 98, 0.761) 71.9%, rgba(173, 14, 93, 0.696) 78.1%, rgba(171, 14, 93, 0.650) 84.4%, rgba(175, 14, 94, 0.624) 90.6%, rgba(187, 15, 101, 0.628) 96.9%); color: rgba(0, 0, 0, .75); box-shadow: 0 0 calc(var(--u) * 18) var(--sc-reihe); }
.sc-weiter { width: calc(var(--u) * 7); height: calc(var(--u) * 7); flex: none; border-top: calc(var(--u) * 2) solid currentColor; border-right: calc(var(--u) * 2) solid currentColor; transform: rotate(45deg); margin-right: calc(var(--u) * 3); opacity: .7; }
.sc-schloss { width: calc(var(--u) * 15); height: calc(var(--u) * 15); flex: none; fill: none; stroke: var(--sc-text3); stroke-width: 2.2; stroke-linecap: round; }
.sc-zeile.st-info { cursor: default; }
.sc-zeile.st-info > b { font-family: var(--sc-schrift); font-weight: 600; color: var(--sc-text2); text-shadow: none; }
.sc-zeile.st-info.st-an > b { color: #fff; }
.sc-mini { width: calc(var(--u) * 24); height: calc(var(--u) * 22); flex: none; border-radius: var(--sc-r-klein); display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--sc-flaeche-hell); color: #fff; }
.sc-mini:hover, .sc-mini.st-hover { background: #fff; color: #000; }
.sc-mini svg { width: calc(var(--u) * 11); height: calc(var(--u) * 11); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sc-mini.st-rot { width: calc(var(--u) * 30); height: calc(var(--u) * 30); background: rgba(255, 88, 88, .16); color: var(--sc-rot); }
.sc-mini.st-aus { opacity: .35; cursor: default; }
.sc-menge { display: flex; align-items: center; gap: calc(var(--u) * 6); flex: none; }
.sc-menge > small { min-width: calc(var(--u) * 26); text-align: center; font-family: var(--sc-titel); font-weight: 600; font-size: calc(var(--u) * 13); color: #fff; }
/* Auswahl in der Zeile: < Wert > */
.sc-auswahl { display: flex; align-items: center; gap: calc(var(--u) * 6); font-family: var(--sc-titel); font-weight: 600; font-size: calc(var(--u) * 13); white-space: nowrap; }
.sc-auswahl i { width: calc(var(--u) * 20); height: calc(var(--u) * 18); border-radius: var(--sc-r-klein); background: linear-gradient(90deg, #ff8a3d 0%, #ff3d7f 42%, #e62ad6 72%, #a74dff 100%); position: relative; box-shadow: 0 0 calc(var(--u) * 12) var(--sc-schatten); }
.sc-auswahl i::after { content: ""; position: absolute; left: calc(var(--u) * 8); top: calc(var(--u) * 6); width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-left: calc(var(--u) * 2) solid rgba(0, 0, 0, .75); border-bottom: calc(var(--u) * 2) solid rgba(0, 0, 0, .75); transform: rotate(45deg); }
.sc-auswahl i + span + i::after { left: calc(var(--u) * 6); transform: rotate(-135deg); }
/* ================= Knoepfe (Frakfights-Lobbyknopf; Glanz aus dem HUD) ================= */
.sc-haupt {
    width: 100%; height: calc(var(--u) * 42); border: 0; border-radius: var(--sc-r); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6);
    font-family: var(--sc-titel); font-weight: 600; font-size: calc(var(--u) * 15); color: rgba(0, 0, 0, .75);
    background: linear-gradient(90deg, #ff8a3d 0%, #ff3d7f 42%, #e62ad6 72%, #a74dff 100%); box-shadow: 0 calc(var(--u) * 11) calc(var(--u) * 32) var(--sc-schatten);
}
.sc-haupt:hover, .sc-haupt.st-hover { transform: translateY(calc(var(--u) * 2)); background: #fff; box-shadow: 0 calc(var(--u) * 11) calc(var(--u) * 32) rgba(255, 255, 255, .25); }
.sc-haupt:active { opacity: .75; }
.sc-haupt svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sc-haupt:disabled, .sc-haupt.st-aus { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .55); box-shadow: none; cursor: default; transform: none; }
.sc-haupt.st-rot { background: var(--sc-rot); box-shadow: 0 calc(var(--u) * 11) calc(var(--u) * 32) rgba(255, 88, 88, .25); }
.sc-haupt.st-weiss { background: #fff; box-shadow: 0 calc(var(--u) * 11) calc(var(--u) * 32) rgba(255, 255, 255, .25); }
.sc-haupt.st-glanz { background: linear-gradient(153deg, rgba(255, 0, 136, 0.326) 3.1%, rgba(255, 0, 136, 0.412) 9.4%, rgba(255, 0, 136, 0.502) 15.6%, rgba(255, 0, 136, 0.589) 21.9%, rgba(255, 0, 136, 0.667) 28.1%, rgba(255, 0, 136, 0.737) 34.4%, rgba(255, 0, 136, 0.806) 40.6%, rgba(255, 0, 136, 0.858) 46.9%, rgba(255, 0, 136, 0.857) 53.1%, rgba(255, 0, 136, 0.805) 59.4%, rgba(255, 0, 136, 0.735) 65.6%, rgba(255, 0, 136, 0.664) 71.9%, rgba(255, 0, 136, 0.586) 78.1%, rgba(255, 0, 136, 0.499) 84.4%, rgba(255, 0, 136, 0.408) 90.6%, rgba(255, 0, 136, 0.323) 96.9%); background-clip: padding-box; border-top: calc(var(--u) * 1) solid rgba(255, 0, 136, 1.000); border-bottom: calc(var(--u) * 1) solid rgba(255, 0, 136, 1.000); border-left: calc(var(--u) * 1) solid rgba(255, 0, 136, 1.000); border-right: calc(var(--u) * 1) solid rgba(255, 0, 136, 1.000); color: #fff; text-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 0, 0, .4); }
.sc-zweit {
    height: calc(var(--u) * 42); padding: 0 calc(var(--u) * 16); border: 0; border-radius: var(--sc-r); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6);
    font-family: var(--sc-titel); font-weight: 500; font-size: calc(var(--u) * 14); color: var(--sc-text2); background: var(--sc-flaeche);
}
.sc-zweit:hover, .sc-zweit.st-hover { transform: translateY(calc(var(--u) * 2)); background: #fff; color: var(--sc-dunkel); font-weight: 600; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 35) rgba(255, 255, 255, .25); }
.sc-zweit.st-glanz { background: linear-gradient(153deg, rgba(255, 255, 255, 0.047) 3.1%, rgba(255, 255, 255, 0.060) 9.4%, rgba(255, 255, 255, 0.073) 15.6%, rgba(255, 255, 255, 0.087) 21.9%, rgba(255, 255, 255, 0.099) 28.1%, rgba(255, 255, 255, 0.109) 34.4%, rgba(255, 255, 255, 0.120) 40.6%, rgba(255, 255, 255, 0.127) 46.9%, rgba(255, 255, 255, 0.127) 53.1%, rgba(255, 255, 255, 0.120) 59.4%, rgba(255, 255, 255, 0.109) 65.6%, rgba(255, 255, 255, 0.098) 71.9%, rgba(255, 255, 255, 0.086) 78.1%, rgba(255, 255, 255, 0.073) 84.4%, rgba(255, 255, 255, 0.059) 90.6%, rgba(255, 255, 255, 0.046) 96.9%); color: #fff; }
.sc-zweit.st-glanz:hover, .sc-zweit.st-glanz.st-hover { background: linear-gradient(153deg, rgba(255, 0, 136, 0.326) 3.1%, rgba(255, 0, 136, 0.412) 9.4%, rgba(255, 0, 136, 0.502) 15.6%, rgba(255, 0, 136, 0.589) 21.9%, rgba(255, 0, 136, 0.667) 28.1%, rgba(255, 0, 136, 0.737) 34.4%, rgba(255, 0, 136, 0.806) 40.6%, rgba(255, 0, 136, 0.858) 46.9%, rgba(255, 0, 136, 0.857) 53.1%, rgba(255, 0, 136, 0.805) 59.4%, rgba(255, 0, 136, 0.735) 65.6%, rgba(255, 0, 136, 0.664) 71.9%, rgba(255, 0, 136, 0.586) 78.1%, rgba(255, 0, 136, 0.499) 84.4%, rgba(255, 0, 136, 0.408) 90.6%, rgba(255, 0, 136, 0.323) 96.9%); background-clip: padding-box; border-top: calc(var(--u) * 1) solid rgba(255, 0, 136, 1.000); border-bottom: calc(var(--u) * 1) solid rgba(255, 0, 136, 1.000); border-left: calc(var(--u) * 1) solid rgba(255, 0, 136, 1.000); border-right: calc(var(--u) * 1) solid rgba(255, 0, 136, 1.000); color: #fff; box-shadow: none; transform: none; }
.sc-ja, .sc-nein { flex: 1; height: calc(var(--u) * 36); border-radius: var(--sc-r); cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-family: var(--sc-titel); font-size: calc(var(--u) * 14); font-weight: 600; }
.sc-ja { background: linear-gradient(90deg, #ff8a3d 0%, #ff3d7f 42%, #e62ad6 72%, #a74dff 100%); color: rgba(0, 0, 0, .75); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 26) var(--sc-schatten); }
.sc-ja:hover, .sc-ja.st-hover { background: #fff; transform: translateY(calc(var(--u) * 2)); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 26) rgba(255, 255, 255, .25); }
.sc-nein { background: var(--sc-flaeche); color: var(--sc-text2); }
.sc-nein:hover, .sc-nein.st-hover { background: rgba(255, 88, 88, .18); color: var(--sc-rot); }
.sc-paar { display: flex; width: 100%; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 4); }
/* ================= Popup und Eingaben ================= */
.sc-abdunkeln { position: absolute; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; border-radius: var(--sc-r-panel); background: rgba(0, 0, 0, .72); }
.sc-popup { width: calc(var(--u) * 290); padding: calc(var(--u) * 22) calc(var(--u) * 20); border-radius: var(--sc-r-panel); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 12);
    background: rgba(12, 6, 14, .97); border: calc(var(--u) * 1) solid var(--sc-kante); box-shadow: 0 0 0 calc(var(--u) * 1) rgba(0, 0, 0, .4), 0 calc(var(--u) * 18) calc(var(--u) * 50) rgba(0, 0, 0, .8), inset 0 calc(var(--u) * 1) 0 rgba(244, 0, 122, .35); }
.sc-popup > b { font-family: var(--sc-titel); font-weight: 700; font-size: calc(var(--u) * 18); letter-spacing: calc(var(--u) * -.4); text-shadow: 0 0 calc(var(--u) * 30) rgba(255, 255, 255, .3); }
.sc-eingabe, .sc-textfeld {
    width: 100%; padding: calc(var(--u) * 9) calc(var(--u) * 12); border-radius: var(--sc-r); outline: none; color: #fff; user-select: text;
    font-family: var(--sc-schrift); font-weight: 500; font-size: calc(var(--u) * 14); background: var(--sc-flaeche); border: calc(var(--u) * 1) solid var(--sc-kante);
}
.sc-eingabe { text-align: center; height: calc(var(--u) * 40); }
.sc-textfeld { min-height: calc(var(--u) * 110); line-height: 1.45; resize: none; }
.sc-eingabe:focus, .sc-textfeld:focus, .sc-eingabe.st-hover { border-color: var(--sc-orange); box-shadow: 0 0 calc(var(--u) * 18) var(--sc-schatten); }
.sc-eingabe::placeholder, .sc-textfeld::placeholder { color: var(--sc-text3); }
.sc-eingabe.st-glanz { background: linear-gradient(156deg, rgba(255, 255, 255, 0.044) 3.1%, rgba(255, 255, 255, 0.063) 9.4%, rgba(255, 255, 255, 0.083) 15.6%, rgba(255, 255, 255, 0.104) 21.9%, rgba(255, 255, 255, 0.124) 28.1%, rgba(255, 255, 255, 0.145) 34.4%, rgba(255, 255, 255, 0.165) 40.6%, rgba(255, 255, 255, 0.183) 46.9%, rgba(255, 255, 255, 0.182) 53.1%, rgba(255, 255, 255, 0.164) 59.4%, rgba(255, 255, 255, 0.144) 65.6%, rgba(255, 255, 255, 0.124) 71.9%, rgba(255, 255, 255, 0.103) 78.1%, rgba(255, 255, 255, 0.083) 84.4%, rgba(255, 255, 255, 0.062) 90.6%, rgba(255, 255, 255, 0.043) 96.9%); border-color: transparent; }
.sc-fehler { font-family: var(--sc-titel); font-weight: 500; font-size: calc(var(--u) * 12); color: var(--sc-rot); margin-top: calc(var(--u) * -6); }
.sc-suche { height: calc(var(--u) * 44); border-radius: var(--sc-r); display: flex; align-items: center; padding: 0 calc(var(--u) * 14); gap: calc(var(--u) * 12); background: var(--sc-flaeche); border: calc(var(--u) * 1) solid var(--sc-kante); }
.sc-suche:focus-within { border-color: var(--sc-orange); box-shadow: 0 0 calc(var(--u) * 18) var(--sc-schatten); }
.sc-suche svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); flex: none; opacity: .55; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.sc-suche input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font-family: var(--sc-schrift); font-size: calc(var(--u) * 14); font-weight: 500; user-select: text; }
.sc-suche input::placeholder { color: var(--sc-text3); }
/* Haken-Kaestchen wie der Einloese-Knopf in Frakfights */
.sc-haken { width: calc(var(--u) * 24); height: calc(var(--u) * 24); flex: none; border-radius: var(--sc-r-klein); display: flex; align-items: center; justify-content: center;
    background: var(--sc-flaeche-hell); border: calc(var(--u) * 1) solid var(--sc-kante); }
.sc-haken.st-an { background: linear-gradient(90deg, #ff8a3d 0%, #ff3d7f 42%, #e62ad6 72%, #a74dff 100%); border-color: var(--sc-orange); box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 30) var(--sc-reihe); }
.sc-haken.st-an::after, input.sc-haken-feld:checked + .sc-haken::after { content: ""; width: calc(var(--u) * 9); height: calc(var(--u) * 5); margin-top: calc(var(--u) * -3); border-left: calc(var(--u) * 2.5) solid rgba(0, 0, 0, .8); border-bottom: calc(var(--u) * 2.5) solid rgba(0, 0, 0, .8); transform: rotate(-45deg); }
input.sc-haken-feld { display: none; }
input.sc-haken-feld:checked + .sc-haken { background: linear-gradient(90deg, #ff8a3d 0%, #ff3d7f 42%, #e62ad6 72%, #a74dff 100%); border-color: var(--sc-orange); box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 30) var(--sc-reihe); }
.sc-haken-zeile { display: flex; align-items: center; gap: calc(var(--u) * 10); cursor: pointer; font-family: var(--sc-schrift); font-weight: 500; font-size: calc(var(--u) * 14); color: var(--sc-text2); }
.sc-leer { text-align: center; font-family: var(--sc-titel); font-weight: 500; font-size: calc(var(--u) * 14); color: rgba(255, 255, 255, .55); padding: calc(var(--u) * 24) 0; }
/* Hinweis (Frakfights: Beschreibungszeile mit orangem Strich) */
.sc-hinweis { display: flex; align-items: center; gap: calc(var(--u) * 9); padding: calc(var(--u) * 8) calc(var(--u) * 12); border-radius: var(--sc-r-klein); border: calc(var(--u) * 1) solid var(--sc-kante);
    font-family: var(--sc-schrift); font-weight: 500; font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 18); color: var(--sc-text); text-shadow: 0 0 calc(var(--u) * 32) rgba(255, 255, 255, .5); }
.sc-hinweis::before { content: ""; width: calc(var(--u) * 2); height: calc(var(--u) * 12); flex: none; background: linear-gradient(90deg, #ff8a3d 0%, #ff3d7f 42%, #e62ad6 72%, #a74dff 100%); box-shadow: 0 0 calc(var(--u) * 16) rgba(244, 0, 122, .55); }
.sc-hinweis span { white-space: pre-line; }
.sc-hinweis svg { display: none; }
/* ================= Admin-Aktionen ================= */
.sc-aktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 8); }
.sc-aktion { height: calc(var(--u) * 46); padding: 0 calc(var(--u) * 14); border-radius: var(--sc-r); display: flex; align-items: center; gap: calc(var(--u) * 12); cursor: pointer;
    font-family: var(--sc-titel); font-weight: 600; font-size: calc(var(--u) * 14); background: var(--sc-flaeche); }
.sc-aktion:hover, .sc-aktion.st-hover { background: var(--sc-flaeche-hell); box-shadow: inset calc(var(--u) * 2) 0 0 var(--sc-orange); }
.sc-aktion svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: none; fill: none; stroke: var(--sc-orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-aktion > b { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-aktion .sc-weiter { color: var(--sc-text3); }
/* ================= Tablets (MD, PD, Fraktion, Firma) ================= */
.sc-karte { position: relative; overflow: hidden; border-radius: calc(var(--u) * 6); background: var(--sc-flaeche); border: calc(var(--u) * 1) solid rgba(255, 255, 255, .08); }
.sc-zahlen { height: calc(var(--u) * 126); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; text-align: center; }
.sc-zahlen svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); margin: 0 auto calc(var(--u) * 12); fill: none; stroke: var(--sc-orange); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 calc(var(--u) * 10) rgba(244, 0, 122, .5)); }
.sc-zahlen b { display: block; font-family: var(--sc-titel); font-size: calc(var(--u) * 20); font-weight: 700; text-shadow: 0 0 calc(var(--u) * 30) rgba(255, 255, 255, .35); }
.sc-zahlen small { display: block; font-size: calc(var(--u) * 12); font-weight: 500; color: var(--sc-text3); margin-top: calc(var(--u) * 2); }
.sc-knopf { height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 16); border-radius: var(--sc-r); display: inline-flex; align-items: center; gap: calc(var(--u) * 8); cursor: pointer;
    font-family: var(--sc-titel); font-size: calc(var(--u) * 14); font-weight: 500; color: var(--sc-text2); background: var(--sc-flaeche); }
.sc-knopf:hover, .sc-knopf.st-hover { background: #fff; color: var(--sc-dunkel); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 35) rgba(255, 255, 255, .25); }
.sc-knopf svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-knopf.st-orange { background: linear-gradient(90deg, #ff8a3d 0%, #ff3d7f 42%, #e62ad6 72%, #a74dff 100%); color: rgba(0, 0, 0, .75); font-weight: 600; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 27) var(--sc-schatten); }
.sc-knopf.st-rot { background: rgba(255, 88, 88, .16); color: #ffb3b3; }
.sc-knopf.st-gruen { background: rgba(116, 255, 88, .13); color: #c6ffba; }
.sc-knopf.st-aus { opacity: .35; cursor: default; }
.sc-chip { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 8); border-radius: var(--sc-r-klein); white-space: nowrap;
    font-family: var(--sc-titel); font-size: calc(var(--u) * 13); font-weight: 500; background: var(--sc-ton); color: var(--sc-orange); }
.sc-chip.st-orange { background: var(--sc-ton); color: var(--sc-orange); }
.sc-chip.st-rot { background: rgba(255, 88, 88, .16); color: #ff8a8a; }
.sc-chip.st-gelb { background: rgba(255, 122, 158, .15); color: var(--sc-gelb); }
.sc-chip.st-gruen { background: rgba(116, 255, 88, .13); color: #9dff8a; }
.sc-chip.st-grau { background: var(--sc-flaeche-hell); color: var(--sc-text2); }
.sc-status { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); font-family: var(--sc-titel); font-weight: 500; font-size: calc(var(--u) * 14); }
.sc-status i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: calc(var(--u) * 1); background: var(--sc-text3); transform: rotate(45deg); }
.sc-status.st-an i { background: var(--sc-gruen); box-shadow: 0 0 calc(var(--u) * 10) var(--sc-gruen); }
.sc-status.st-frei i { background: var(--sc-gelb); box-shadow: 0 0 calc(var(--u) * 10) rgba(255, 122, 158, .6); }
.sc-dienst { width: calc(var(--u) * 130); height: calc(var(--u) * 44); border-radius: var(--sc-r); display: grid; place-items: center; cursor: pointer;
    font-family: var(--sc-titel); font-weight: 700; font-size: calc(var(--u) * 16); letter-spacing: calc(var(--u) * .3); text-transform: uppercase; }
.sc-dienst.st-an { background: linear-gradient(90deg, #ff8a3d 0%, #ff3d7f 42%, #e62ad6 72%, #a74dff 100%); color: rgba(0, 0, 0, .78); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 34) var(--sc-schatten); }
.sc-dienst.st-aus { background: rgba(255, 88, 88, .16); color: #ffb3b3; }
.sc-eintrag { display: flex; gap: calc(var(--u) * 12); align-items: center; padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: var(--sc-r); background: var(--sc-flaeche); cursor: pointer; }
.sc-eintrag:hover, .sc-eintrag.st-hover { background: var(--sc-flaeche-hell); }
.sc-eintrag.st-an { background: var(--sc-ton); box-shadow: inset calc(var(--u) * 3) 0 0 var(--sc-orange); }
.sc-eintrag > div { flex: 1; min-width: 0; }
.sc-eintrag b { display: block; font-family: var(--sc-titel); font-size: calc(var(--u) * 15); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--sc-glanz-weiss); }
.sc-eintrag small { display: block; font-size: calc(var(--u) * 13); color: var(--sc-text2); margin-top: calc(var(--u) * 3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-eicon { width: calc(var(--u) * 42); height: calc(var(--u) * 42); flex: none; border-radius: var(--sc-r); display: grid; place-items: center; background: var(--sc-ton); color: var(--sc-orange); }
.sc-eicon svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sc-eicon.st-rot { background: rgba(255, 88, 88, .16); color: var(--sc-rot); }
.sc-eicon.st-gruen { background: rgba(116, 255, 88, .13); color: var(--sc-gruen); }
.sc-eicon.st-gelb { background: rgba(255, 122, 158, .14); color: var(--sc-gelb); }
/* Meldung oben rechts (Killfeed-Kasten aus Frakfights) */
.sc-meldung { display: flex; gap: calc(var(--u) * 12); align-items: center; padding: calc(var(--u) * 10) calc(var(--u) * 14) calc(var(--u) * 10) calc(var(--u) * 12); border-radius: var(--sc-r); width: calc(var(--u) * 340);
    background: rgba(0, 0, 0, .62); border-left: calc(var(--u) * 3) solid var(--sc-orange); box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 40) rgba(0, 0, 0, .4); animation: scRechtsRein .35s cubic-bezier(.2, .8, .2, 1); }
.sc-meldung .sc-eicon { width: calc(var(--u) * 36); height: calc(var(--u) * 36); }
.sc-meldung > div { flex: 1; min-width: 0; }
.sc-meldung b { display: block; font-family: var(--sc-titel); font-size: calc(var(--u) * 14); font-weight: 600; text-shadow: 0 0 calc(var(--u) * 37) rgba(255, 255, 255, .35); }
.sc-meldung small { display: block; font-size: calc(var(--u) * 13); color: var(--sc-text2); margin-top: calc(var(--u) * 2); }
@keyframes scRechtsRein { from { opacity: 0; transform: translateX(calc(var(--u) * 30)); } to { opacity: 1; transform: none; } }
/* ================= HUD-Teile ================= */
/* Balken wie die Frakfights-Statistik: dunkler Rahmen, heller Kanal, orange Fuellung */
.sc-balken { height: calc(var(--u) * 12); padding: calc(var(--u) * 3); border-radius: var(--sc-r-klein); background: linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, .15)) content-box, rgba(0, 0, 0, .35); overflow: hidden; }
.sc-balken > i { display: block; height: 100%; background: linear-gradient(90deg, #ff8a3d 0%, #ff3d7f 42%, #e62ad6 72%, #a74dff 100%); box-shadow: 0 0 calc(var(--u) * 17) var(--sc-glut); }
.sc-tasten { display: inline-flex; align-items: center; gap: calc(var(--u) * 18); padding: calc(var(--u) * 8) calc(var(--u) * 14) calc(var(--u) * 8) calc(var(--u) * 12); border-radius: var(--sc-r); background: rgba(0, 0, 0, .62); border-left: calc(var(--u) * 3) solid var(--sc-orange); }
.sc-tasten > b { font-family: var(--sc-titel); font-weight: 700; font-size: calc(var(--u) * 15); color: #fff; white-space: nowrap; padding-right: calc(var(--u) * 4); text-shadow: 0 0 calc(var(--u) * 37) rgba(255, 255, 255, .35); }
.sc-tasten > span { display: flex; align-items: center; gap: calc(var(--u) * 8); font-family: var(--sc-titel); font-weight: 500; font-size: calc(var(--u) * 13); color: var(--sc-text2); white-space: nowrap; }
/* Taste wie das E-Kaestchen des HUD */
.sc-taste { min-width: calc(var(--u) * 28); height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 8); display: inline-grid; place-items: center; font-style: normal;
    font-family: var(--sc-titel); font-weight: 700; font-size: calc(var(--u) * 14); color: #fff; text-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 0, 0, .5);
    border-radius: 0; background: linear-gradient(180deg, rgba(255, 0, 110, .43) 0%, rgba(255, 0, 110, .62) 50%, rgba(255, 0, 110, .43) 100%); background-clip: padding-box; border: 0; box-shadow: 0 0 calc(var(--u) * 14) var(--sc-schatten); }
/* Akzent-Schrift (Frakfights: "Fraktion" unter dem Namen) */
.sc-akzent { font-family: var(--sc-akzent); font-weight: 400; font-size: calc(var(--u) * 26); line-height: 1; color: var(--sc-orange); text-shadow: 0 0 calc(var(--u) * 18) var(--sc-glut); letter-spacing: -.02em; }
/* Scrollbereich: Leiste wie im Inventar ausgeblendet, dezent orange */
.sc-scroll { overflow-y: auto; overflow-x: hidden; padding-right: calc(var(--u) * 4); }
.sc-scroll::-webkit-scrollbar { width: calc(var(--u) * 3); }
.sc-scroll::-webkit-scrollbar-thumb { background: rgba(244, 0, 122, .6); border-radius: calc(var(--u) * 2); }
/* ===== r301: Neue Marke (Kokosnuss). Farbverlauf wie im Logo: Orange -> Pink -> Magenta -> Violett (Jason: "genau wie mein Logo, richtig hochwertig").
   Nur Farben, Aufbau bleibt. Die kleine Marke neben dem Titel (frueher Krone) ist weg, die Kokosnuss steht nur noch gross im Kopf. ===== */
:root {
    --sc-verlauf: linear-gradient(90deg, #ff8a3d 0%, #ff3d7f 42%, #e62ad6 72%, #a74dff 100%);
    --sc-verlauf-schraeg: linear-gradient(115deg, #ff8a3d 0%, #ff3d7f 40%, #e62ad6 70%, #a74dff 100%);
    --sc-verlauf-senkrecht: linear-gradient(180deg, #ff8a3d 0%, #ff3d7f 45%, #a74dff 100%);
    --sc-verlauf-weich: linear-gradient(90deg, rgba(206, 61, 255, .20) 0%, rgba(255, 61, 127, .17) 45%, rgba(167, 77, 255, .15) 100%);
    --sc-verlauf-glut: 0 calc(var(--u) * 8) calc(var(--u) * 28) rgba(255, 61, 127, .30), 0 0 calc(var(--u) * 18) rgba(167, 77, 255, .18);
    --sc-krone: none;
}
.sc-titel b::after { display: none; }
.sc-titel b { padding-right: 0; }
/* Panel: leichter Schimmer im Verlauf ueber dem Material */
.sc-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background: linear-gradient(118deg, rgba(206, 61, 255, .09) 0%, rgba(255, 61, 127, .05) 38%, rgba(230, 42, 214, .04) 64%, rgba(167, 77, 255, .10) 100%); }
/* Marken-Chip unter dem Titel, Hauptknoepfe, aktive Reiter und Schalter */
.sc-titel small { background: var(--sc-verlauf-schraeg); color: rgba(0, 0, 0, .78); }
.sc-haupt, .sc-ja, .sc-knopf.st-orange, .sc-dienst.st-an, .sc-reiter > div.st-an, .sc-seiten > div.st-an {
    background: var(--sc-verlauf); color: rgba(0, 0, 0, .8); box-shadow: var(--sc-verlauf-glut); }
.sc-haupt.st-glanz, .sc-zweit { background-blend-mode: normal; }
/* Aktive Zeile: weicher Verlauf, Kante links im Verlauf */
.sc-zeile.st-an, .sc-eintrag.st-an { background: var(--sc-verlauf-weich); box-shadow: 0 0 calc(var(--u) * 20) rgba(255, 61, 127, .12); }
.sc-zeile.st-an::before, .sc-eintrag.st-an::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--u) * 3);
    border-radius: var(--sc-r) 0 0 var(--sc-r); background: var(--sc-verlauf-senkrecht); }
.sc-eintrag.st-an { position: relative; }
.sc-zeile.st-an .sc-symbol { background: var(--sc-verlauf-schraeg); color: rgba(0, 0, 0, .78); box-shadow: 0 0 calc(var(--u) * 18) rgba(255, 61, 127, .4); }
.sc-wahl > div.st-an { background: var(--sc-verlauf-weich); border-color: #ff3d7f; }
/* Kleine Akzente */
.sc-abschnitt::before, .sc-hinweis::before { background: var(--sc-verlauf-senkrecht); box-shadow: 0 0 calc(var(--u) * 14) rgba(255, 61, 127, .55); }
.sc-balken > i { background: var(--sc-verlauf); box-shadow: 0 0 calc(var(--u) * 17) rgba(255, 61, 127, .7); }
.sc-auswahl i, .sc-haken.st-an, input.sc-haken-feld:checked + .sc-haken { background: var(--sc-verlauf-schraeg); border-color: transparent; }
.sc-tasten { border-left-color: #ff3d7f; }
.sc-akzent { background: var(--sc-verlauf); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none;
    filter: drop-shadow(0 0 calc(var(--u) * 10) rgba(255, 61, 127, .55)); }
/* ===== r301 Lila (19.10.): kein Braun mehr (Jason: "ueberall diese Farbmischung wie das Logo"). Dunkle Flaechen sind Lila (Material
   und Farbwerte per lila.py), hier die letzten vollen Pink-Flaechen auf den Logo-Verlauf. Kein Orange auf dunklen Flaechen, das wird Braun. ===== */
.sc-panel::after { background: linear-gradient(118deg, rgba(255, 61, 127, .07) 0%, rgba(230, 42, 214, .04) 45%, rgba(167, 77, 255, .11) 100%); }
.sc-pfeil { background: var(--sc-verlauf-schraeg); box-shadow: var(--sc-verlauf-glut); }
.sc-scroll::-webkit-scrollbar-thumb { background: var(--sc-verlauf-senkrecht); }
/* Kokosnuss im Kopf groesser und mit Leuchten im Verlauf (Jason: "muss mehr herausstechen"), Bild hat jetzt eine dunkle Kontur */
.sc-logo { width: calc(var(--u) * 60); height: calc(var(--u) * 60); margin: calc(var(--u) * -4) 0;
    filter: drop-shadow(0 0 calc(var(--u) * 10) rgba(255, 61, 127, .65)) drop-shadow(0 0 calc(var(--u) * 22) rgba(167, 77, 255, .40)); }
/* Logo-Kopf: Der neue Schriftzug traegt "SinCity Roleplay" selbst, das Menue-Wort lag ueber "ROLEPLAY" */
/* ===== BAUKASTEN ENDE ===== */


/* =====================================================================================================================
   Sin City Support-Panel (r666, 02.11.2026): Anordnung im Baukasten-Look. Alles Sichtbare kommt aus dem Baukasten oben
   (Flaechen 5 % Weiss, Rundung 3 px, aktiv voll im Logo-Verlauf mit Glut, Hover Weiss mit Glanz, getoente Chips,
   Panel-Material mit Lichtkarte + Gitter + Kerbe, Rauten-Kachel, Purista/RevxNeue, MrDafoe nur als Akzent).
   Hier nur Seitenaufbau, Tabellen, Diagramme, Formulare und Web-Dinge (Fokus, Handy, reduzierte Bewegung).
   Eckig ("eckig immer"), kein Braun: dunkle Flaechen und Toenungen sind Lila. Eigene Zustaende mit st-.
   ===================================================================================================================== */
:root {
  --sc-text3: rgba(255, 255, 255, .6);     /* Web: Kleintext lesbar (Kontrast > 4.5:1 auf dem Lila-Grund) */
  --grund: #0d0616;
  --grund-2: #150a22;
  --linie: rgba(255, 255, 255, .08);
  --rosa: #ff9cc6;
  --pink-hell: #ff6fae;
  --breite: 1440px;
  --rand: 32px;
  /* Farben fuer Kategorien und Quellen (deckend, als Schrift und Fuellung; Toenungen bleiben lila/pink) */
  --f-pink: #ff3d7f; --f-magenta: #e62ad6; --f-violett: #a74dff; --f-cyan: #3fd0ff;
  --f-gruen: #74ff58; --f-gelb: #ffd27a; --f-rot: #ff5858; --f-grau: rgba(255, 255, 255, .45);
  color-scheme: dark;
}

html { background: var(--grund); scrollbar-color: rgba(167, 77, 255, .55) transparent; scrollbar-width: thin; -webkit-text-size-adjust: 100%; }
body { position: relative; z-index: 0; margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-size: 15px; line-height: 1.5;
  background: radial-gradient(900px 700px at 92% 1050px, rgba(167, 77, 255, .13), transparent 70%),
              radial-gradient(800px 600px at 4% 1500px, rgba(255, 61, 127, .07), transparent 70%), var(--grund); }
.sc-ui { user-select: text; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; margin: 0; }
code { padding: 1px 6px; border-radius: var(--sc-r-klein); background: var(--sc-flaeche-hell); color: #fff; font: 600 .9em/1.4 ui-monospace, Consolas, monospace; }
::selection { background: rgba(255, 61, 127, .45); color: #fff; }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.leise { color: var(--sc-text3); }
.block { display: block; }
.sprung { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--sc-r); background: #fff; color: #000; font: 600 14px/1 var(--sc-titel); text-decoration: none; }
.sprung:focus { top: 12px; }

/* Bedienteile: Tastatur bekommt den Hover-Zustand (wie st-hover im Baukasten) */
.sc-haupt, .sc-zweit, .sc-knopf { text-decoration: none; white-space: nowrap; }
.sc-haupt:focus-visible, .sc-zweit:focus-visible, .sc-knopf:focus-visible { outline-offset: 3px; }
.sc-zweit:focus-visible, .sc-knopf:focus-visible { background: #fff; color: var(--sc-dunkel); }
.sc-haupt svg, .sc-zweit svg, .sc-knopf svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sc-haupt[disabled] { opacity: .55; cursor: wait; transform: none; }
.sc-zu svg path { stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }

/* ---------- Spielszene hinter dem Kopf (Baukasten-Hintergrund, auf Lila umgefaerbt) ---------- */
.hintergrund { position: absolute; left: 0; right: 0; top: 0; height: 980px; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13, 6, 22, .34) 0%, rgba(13, 6, 22, .30) 22%, rgba(13, 6, 22, .74) 50%, rgba(13, 6, 22, .94) 72%, var(--grund) 100%),
    radial-gradient(130% 80% at 50% 0%, transparent 45%, rgba(13, 6, 22, .75) 100%),
    url('bilder/stadt.webp') 50% 34% / cover no-repeat; }
/* Gitter des Panel-Materials ueber der Szene, oben am staerksten (wie im Spiel) */
.hintergrund::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 520px; mix-blend-mode: color-dodge; opacity: .55;
  background-image: linear-gradient(90deg, rgb(58, 61, 68) 1px, transparent 1px), linear-gradient(180deg, rgb(58, 61, 68) 1px, transparent 1px);
  background-size: 34.636px 34.636px; background-position: 11px 16px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .55) 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .55) 45%, transparent 100%); }

/* ---------- Leiste oben ---------- */
.leiste { position: sticky; top: 0; z-index: 40; background: linear-gradient(180deg, rgba(11, 4, 19, .94), rgba(11, 4, 19, .84)); box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .95); }
.leiste::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .03), rgba(255, 61, 127, .55) 30%, rgba(167, 77, 255, .55) 70%, rgba(255, 255, 255, .03)); }
.leiste-innen { max-width: var(--breite); min-height: 76px; margin: 0 auto; padding: 10px var(--rand); display: flex; align-items: center; gap: 30px; }
.marke { display: flex; align-items: center; gap: 12px; flex: none; color: #fff; text-decoration: none; }
.marke .sc-logo { width: 54px; height: 54px; margin: -6px 0; transition: transform .35s var(--sc-weich); }
.marke:hover .sc-logo { transform: rotate(-8deg) scale(1.06); }
/* Titel und Chip in Baukasten-Groesse (26 px / 15 px) wie der Kopf im Spiel */

.leiste-nav { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
/* Seiten-Reiter wie .sc-seiten im Baukasten */
.leiste-nav a { height: 42px; padding: 0 18px; display: inline-flex; align-items: center; gap: 9px; border-radius: var(--sc-r); background: var(--sc-flaeche);
  font-family: var(--sc-titel); font-weight: 500; font-size: 15px; color: var(--sc-text2); text-decoration: none; white-space: nowrap;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease; }
.leiste-nav a svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.leiste-nav a[aria-current="page"] { background: var(--sc-verlauf); color: rgba(0, 0, 0, .8); font-weight: 600; box-shadow: var(--sc-verlauf-glut); }
.leiste-nav a:focus-visible:not([aria-current="page"]) { background: #fff; color: var(--sc-dunkel); }
.konto { flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nutzer { height: 46px; display: flex; align-items: center; gap: 11px; padding: 0 16px 0 6px; border-radius: var(--sc-r); background: var(--sc-flaeche); }
.nutzer-text { display: grid; line-height: 1.15; }
.nutzer-text b { max-width: 180px; overflow: hidden; font-family: var(--sc-titel); font-weight: 600; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; text-shadow: var(--sc-glanz-weiss); }
.nutzer-text small { font-size: 12.5px; color: var(--sc-text3); }
.avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: var(--sc-r);
  background: var(--sc-verlauf-schraeg); box-shadow: 0 0 18px rgba(255, 61, 127, .4); color: rgba(0, 0, 0, .78); font: 700 13px/1 var(--sc-titel); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.abmelden { height: 46px; }
@media (hover: hover) {
  .leiste-nav a:not([aria-current="page"]):hover { transform: translateY(2px); background: #fff; color: var(--sc-dunkel); font-weight: 600; box-shadow: 0 8px 35px rgba(255, 255, 255, .25); }
}

/* ---------- Inhalt + Buehne (Kopf jeder Ansicht ueber der Szene) ---------- */
.inhalt { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand) 96px; flex: 1 0 auto; outline: none; }
.ansicht { animation: scAnsicht .45s var(--sc-weich) both; }
@keyframes scAnsicht { from { opacity: 0; transform: translateY(12px); } }
.buehne { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; min-height: 280px; padding: 70px 0 32px; }
.buehne-text { min-width: 0; }
.kicker { max-width: 460px; margin: 0 0 16px; padding: 0; font-size: 12.5px; letter-spacing: .14em; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.kicker::after { border-top-color: rgba(255, 255, 255, .25); }
h1 { margin: 0; color: #fff; font: 700 52px/1.04 var(--sc-titel); letter-spacing: -1.8px; text-shadow: 0 0 37px rgba(255, 255, 255, .35), 0 2px 24px rgba(13, 6, 22, .7); }
h1 .sc-akzent { display: inline-block; margin-left: 6px; font-size: 50px; line-height: 1; letter-spacing: 0; transform: rotate(-7deg) translateY(-8px); }
.unter { max-width: 760px; margin: 14px 0 0; color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 1.5; text-shadow: 0 1px 14px rgba(0, 0, 0, .75); }
.unter b { color: #fff; font-weight: 600; }
.buehne-knoepfe { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.buehne-knoepfe .sc-haupt { width: auto; height: 50px; padding: 0 28px; font-size: 16px; }
.buehne-knoepfe .sc-zweit { height: 50px; padding: 0 22px; font-size: 15px; background: linear-gradient(var(--sc-flaeche-hell), var(--sc-flaeche-hell)), rgba(12, 5, 20, .78); }
@media (hover: hover) { .buehne-knoepfe .sc-zweit:hover { background: #fff; } }
.zeitraum-auswahl { display: inline-block; }

/* ---------- Kennzahlen: Inventar-Kachel mit Raute, Wasserzeichen, Verlauf ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; min-height: 150px; }
.kpi.sc-kachel { height: auto; min-height: 150px; padding: 20px 20px 0; display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: auto 1fr;
  column-gap: 16px; align-items: start; justify-content: stretch; overflow: hidden; cursor: default; background-color: rgba(17, 7, 28, .9); }
/* Symbol auf der Inventar-Raute (Ausschnitt aus raute_kachel, Hover wie im Inventar: raute_kachel_an + anheben) */
.kpi > .sc-bild { width: 62px; height: 62px; margin: -3px 0 0 -3px; display: grid; place-items: center; grid-row: 1;
  background: url('bilder/raute_symbol.webp') center / 100% 100% no-repeat; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.kpi:hover > .sc-bild { background-image: url('bilder/raute_symbol_an.webp'); }
.kpi > .sc-bild svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 61, 127, .95)); }
.kpi-text { position: relative; z-index: 1; min-width: 0; padding-top: 3px; }
.kpi-titel { margin: 0 0 7px; color: var(--sc-text3); font: 600 12.5px/1.2 var(--sc-titel); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-wert { display: flex; align-items: baseline; gap: 5px; margin: 0; color: #fff; font: 700 40px/1 var(--sc-titel); letter-spacing: -1.2px; white-space: nowrap;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(255, 255, 255, .35); }
.kpi-wert small { margin-right: 6px; color: rgba(255, 255, 255, .62); font-size: 17px; font-weight: 600; letter-spacing: -.2px; text-shadow: none; }
.kpi-wert small:last-child { margin-right: 0; }
.kpi-unter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; color: var(--sc-text2); font-size: 13px; line-height: 1.3; }
.kpi-unter b { color: #fff; font-weight: 600; }
.kpi-unter .sc-chip { height: 22px; padding: 0 7px; font-size: 12.5px; font-weight: 600; }
.kpi-unter .sc-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.kpi-zeichen { position: absolute; right: -22px; top: -16px; width: 150px; height: 150px; fill: none; stroke: #fff; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
  opacity: .055; pointer-events: none; transition: opacity .4s ease, transform .6s var(--sc-weich); }
.kpi-fuss { position: relative; grid-column: 1 / -1; align-self: end; height: 58px; margin: 14px -20px 0; }
.kpi-fuss.st-leer { height: 18px; }
.kpi-linie { display: block; width: 100%; height: 100%; overflow: visible; }
.kpi-gesichter { display: flex; align-items: center; gap: 2px; height: 100%; padding: 0 20px 14px; }
.kpi-gesichter small { margin-left: 8px; color: var(--sc-text3); font: 600 12.5px/1 var(--sc-titel); }
.kpi-anteil { padding: 0 20px 20px; display: grid; gap: 6px; align-content: end; height: 100%; }
.kpi-anteil small { color: var(--sc-text3); font-size: 12px; }
@media (hover: hover) {
  .kpi:hover .kpi-zeichen { opacity: .1; transform: rotate(-8deg) scale(1.05); }
}

/* ---------- Fenster: Panel-Material des Inventars ---------- */
.fenster.sc-panel { width: auto; padding: 22px 24px 24px; gap: 14px; margin-bottom: 20px; }
/* Lange Fenster (Listen): Lichtkarte in drei Teilen (oben, Mitte gestreckt, unten), sonst zieht sich das Licht oben mittig
   bei 3000 px Hoehe zu einem Strahl. Kerbe wie im Baukasten. */
.sc-panel.st-lang { background:
  linear-gradient(90deg, #ff8a3d, #ff3d7f 45%, #a74dff) calc(50% - 2px) 0 / 40px 3px no-repeat,
  url('bilder/panel_oben.webp') 0 0 / 100% 260px no-repeat,
  url('bilder/panel_unten.webp') 0 100% / 100% 220px no-repeat,
  url('bilder/panel_mitte.webp') 0 0 / 100% 100% no-repeat; }
.fenster-kopf { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.fenster-kopf .sc-abschnitt { flex: 1 1 auto; margin: 0; padding: 0; color: rgba(255, 255, 255, .8); font-size: 13.5px; letter-spacing: .12em; }
.fenster-kopf .sc-abschnitt em { font-style: normal; color: #fff; letter-spacing: .02em; }
.fenster-unter { margin: 0; color: var(--sc-text3); font-size: 13px; }

/* ---------- Filter ---------- */
.filter { display: flex; flex-direction: column; gap: 10px; }
.filter-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.zeitraum-reiter > button { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: var(--sc-r); display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--sc-flaeche); color: var(--sc-text2); font-family: var(--sc-titel); font-weight: 500; font-size: 14.5px; white-space: nowrap;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease; }
.zeitraum-reiter > button[aria-pressed="true"] { background: var(--sc-verlauf); color: rgba(0, 0, 0, .8); font-weight: 600; box-shadow: var(--sc-verlauf-glut); }
.zeitraum-reiter > button:focus-visible:not([aria-pressed="true"]) { background: #fff; color: var(--sc-dunkel); }
.zeitraum-reiter > button:active { opacity: .75; }
@media (hover: hover) {
  .zeitraum-reiter > button:not([aria-pressed="true"]):hover { transform: translateY(2px); background: #fff; color: var(--sc-dunkel); font-weight: 600; box-shadow: 0 8px 35px rgba(255, 255, 255, .25); }
}
.stat-reiter { margin: -6px 0 18px; padding: 6px; border-radius: var(--sc-r); background: rgba(12, 5, 20, .7); }
.suche.sc-suche { flex: 1 1 320px; height: 44px; }
.suche.sc-suche input { min-height: 0; height: 100%; padding: 0; border: 0; background: none; box-shadow: none; font-size: 14.5px; }
.suche.sc-suche input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
input, select, textarea { min-height: 44px; padding: 0 12px; border: 1px solid var(--sc-kante); border-radius: var(--sc-r); background-color: var(--sc-flaeche); color: #fff;
  font-family: var(--sc-schrift); font-weight: 500; font-size: 14.5px; outline: none; transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease; }
textarea { padding: 10px 12px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, .45); }
input:focus, select:focus, textarea:focus { border-color: #ff3d7f; background-color: rgba(255, 255, 255, .07); box-shadow: 0 0 18px rgba(255, 61, 127, .3); }
input:disabled, select:disabled, textarea:disabled { opacity: .5; cursor: not-allowed; }
select { padding-right: 36px; appearance: none; -webkit-appearance: none; cursor: pointer; font-family: var(--sc-titel); font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6fae' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 16px; }
select option { background: #1a0f22; color: #fff; }
input[type="date"], input[type="datetime-local"] { color-scheme: dark; font-family: var(--sc-titel); }
.auswahl select { min-width: 176px; }
.eigen-zeitraum { display: flex; align-items: center; gap: 8px; color: var(--sc-text3); font-family: var(--sc-titel); font-size: 13.5px; }
.hinweis-eigen { margin: 0; font-size: 13.5px; }

/* ---------- Tabellen als Baukasten-Zeilen ---------- */
.tabelle-rahmen { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.tabelle { width: 100%; border-collapse: separate; border-spacing: 0 6px; margin: -6px 0; font-size: 14px; }
.tabelle th { padding: 8px 14px 2px; color: var(--sc-text3); font: 600 11.5px/1.2 var(--sc-titel); letter-spacing: .1em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.tabelle td { padding: 12px 14px; background: var(--sc-flaeche); vertical-align: middle; transition: background-color .3s ease, box-shadow .3s ease; }
.tabelle td:first-child { border-radius: var(--sc-r) 0 0 var(--sc-r); }
.tabelle td:last-child { border-radius: 0 var(--sc-r) var(--sc-r) 0; }
.tabelle .rechts { text-align: right; }
.tabelle td b { color: #fff; font-family: var(--sc-titel); font-weight: 600; font-size: 15px; text-shadow: var(--sc-glanz-weiss); }
.tabelle td small { display: block; margin-top: 2px; color: var(--sc-text3); font-size: 12.5px; }
.tabelle .zahl { font-family: var(--sc-titel); font-weight: 600; font-variant-numeric: tabular-nums; }
.tabelle tbody tr { animation: scZeile .4s var(--sc-weich) both; }
.tabelle tbody tr:nth-child(2) { animation-delay: .02s; } .tabelle tbody tr:nth-child(3) { animation-delay: .04s; } .tabelle tbody tr:nth-child(4) { animation-delay: .06s; }
.tabelle tbody tr:nth-child(5) { animation-delay: .08s; } .tabelle tbody tr:nth-child(6) { animation-delay: .1s; } .tabelle tbody tr:nth-child(n+7) { animation-delay: .12s; }
@keyframes scZeile { from { opacity: 0; transform: translateY(6px); } }
/* eigene Eintraege: Kante links im Logo-Verlauf (wie aktive Zeile im Baukasten) */
.tabelle tr.eigen td:first-child { background: var(--sc-verlauf-senkrecht) left / 3px 100% no-repeat, var(--sc-flaeche); }
@media (hover: hover) {
  .tabelle tbody tr:hover td { background-color: var(--sc-flaeche-hell); }
  .tabelle tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 rgba(255, 255, 255, .6); }
  .tabelle tr.eigen:hover td:first-child { background: var(--sc-verlauf-senkrecht) left / 3px 100% no-repeat, var(--sc-flaeche-hell); box-shadow: none; }
}
.sortieren { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.sortieren::after { content: "↕"; opacity: .5; font-size: 12px; letter-spacing: 0; }
.sortieren.st-aktiv { color: #fff; }
.sortieren.st-aktiv[data-richtung="ab"]::after { content: "↓"; opacity: 1; color: var(--pink-hell); }
.sortieren.st-aktiv[data-richtung="auf"]::after { content: "↑"; opacity: 1; color: var(--pink-hell); }
@media (hover: hover) { .sortieren:hover { color: #fff; } }

.z-datum { width: 1%; white-space: nowrap; }
.z-datum b { font-variant-numeric: tabular-nums; }
.person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.person-text { display: grid; min-width: 0; line-height: 1.25; }
.person-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Raute als Avatar (Rauten-Motiv des Designers) */
.raute { position: relative; width: 36px; height: 36px; flex: none; display: grid; place-items: center; color: #fff; font: 700 12px/1 var(--sc-titel); letter-spacing: .02em; }
.raute::before { content: ""; position: absolute; inset: 6px; z-index: 0; border-radius: 3px; transform: rotate(45deg); background: var(--r-ton, rgba(255, 61, 127, .2));
  border: 1px solid var(--r-kante, rgba(255, 61, 127, .75)); box-shadow: 0 0 14px var(--r-glut, rgba(255, 61, 127, .22)); }
.raute > span { position: relative; z-index: 1; }
.raute.st-f1 { --r-ton: rgba(255, 61, 127, .2); --r-kante: rgba(255, 61, 127, .8); --r-glut: rgba(255, 61, 127, .25); }
.raute.st-f2 { --r-ton: rgba(230, 42, 214, .2); --r-kante: rgba(230, 42, 214, .8); --r-glut: rgba(230, 42, 214, .25); }
.raute.st-f3 { --r-ton: rgba(167, 77, 255, .24); --r-kante: rgba(178, 102, 255, .85); --r-glut: rgba(167, 77, 255, .28); }
.raute.st-f4 { --r-ton: rgba(63, 208, 255, .14); --r-kante: rgba(63, 208, 255, .7); --r-glut: rgba(63, 208, 255, .2); }
.raute.st-f5 { --r-ton: rgba(255, 156, 198, .16); --r-kante: rgba(255, 156, 198, .8); --r-glut: rgba(255, 156, 198, .2); }
.raute.st-gross { width: 44px; height: 44px; font-size: 14px; }
.raute.st-gross::before { inset: 7px; }

/* Kategorie-Chips: Baukasten-Chip, Farbe je Kategorie, kleine Raute davor */
.sc-chip { color: var(--pink-hell); }
.sc-chip.kat { height: 26px; padding: 0 10px 0 9px; gap: 7px; font-size: 13px; font-weight: 600; background: rgba(255, 61, 127, .15); color: var(--pink-hell); }
.sc-chip.kat::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 1px; background: currentColor; transform: rotate(45deg); box-shadow: 0 0 8px currentColor; }
.st-k-pink { --k: var(--f-pink); } .st-k-magenta { --k: var(--f-magenta); } .st-k-violett { --k: var(--f-violett); } .st-k-cyan { --k: var(--f-cyan); }
.st-k-gruen { --k: var(--f-gruen); } .st-k-gelb { --k: var(--f-gelb); } .st-k-rot { --k: var(--f-rot); } .st-k-grau { --k: var(--f-grau); }
.sc-chip.kat.st-k-magenta { background: rgba(230, 42, 214, .16); color: #f58bff; }
.sc-chip.kat.st-k-violett { background: rgba(167, 77, 255, .2); color: #cfa6ff; }
.sc-chip.kat.st-k-cyan { background: rgba(63, 208, 255, .13); color: #8de6ff; }
.sc-chip.kat.st-k-gruen { background: rgba(116, 255, 88, .13); color: #9dff8a; }
.sc-chip.kat.st-k-gelb { background: rgba(255, 210, 122, .14); color: var(--f-gelb); }
.sc-chip.kat.st-k-rot { background: rgba(255, 88, 88, .16); color: #ff9a9a; }
.sc-chip.kat.st-k-grau { background: var(--sc-flaeche-hell); color: var(--sc-text2); }

.z-dauer { width: 1%; white-space: nowrap; }
.dauer-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 8px; border-radius: var(--sc-r-klein); background: var(--sc-flaeche-hell);
  color: #fff; font: 600 14px/1 var(--sc-titel); font-variant-numeric: tabular-nums; }
.dauer-chip svg { width: 15px; height: 15px; fill: none; stroke: var(--pink-hell); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dauer-chip.st-leer { color: var(--sc-text3); }
.z-dauer small { padding-left: 2px; }
.quelle { display: inline-flex; align-items: center; gap: 9px; color: var(--sc-text2); font-family: var(--sc-titel); font-weight: 500; font-size: 14px; white-space: nowrap; }
.quelle .sc-symbol { width: 30px; height: 30px; }
.quelle .sc-symbol svg { width: 16px; height: 16px; }
.sc-symbol.st-q-ingame { color: var(--pink-hell); background: rgba(255, 61, 127, .16); }
.sc-symbol.st-q-fall { color: #f58bff; background: rgba(230, 42, 214, .16); }
.sc-symbol.st-q-ticket { color: #cfa6ff; background: rgba(167, 77, 255, .2); }
.sc-symbol.st-q-panel { color: #8de6ff; background: rgba(63, 208, 255, .13); }
.z-notiz { min-width: 210px; max-width: 360px; }
.notiz { display: -webkit-box; margin: 0; overflow: hidden; color: var(--sc-text2); font-size: 14px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.aktionen { color: var(--sc-text3) !important; font-size: 12.5px !important; }
.z-knoepfe { width: 1%; white-space: nowrap; }
.zeile-knoepfe { display: flex; justify-content: flex-end; gap: 6px; }
.symbol-knopf { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: var(--sc-r-klein); background: var(--sc-flaeche-hell); color: #fff; cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }
.symbol-knopf svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.symbol-knopf.gefahr { background: rgba(255, 88, 88, .16); color: var(--sc-rot); }
.symbol-knopf:focus-visible { background: #fff; color: #000; }
@media (hover: hover) {
  .symbol-knopf:hover { transform: translateY(2px); background: #fff; color: #000; box-shadow: 0 6px 22px rgba(255, 255, 255, .22); }
  .symbol-knopf.gefahr:hover { background: var(--sc-rot); color: #1a0000; box-shadow: 0 6px 22px rgba(255, 88, 88, .35); }
}
.leer { display: grid; justify-items: center; gap: 12px; padding: 54px 20px 46px; color: var(--sc-text3); text-align: center; font-family: var(--sc-titel); }
.leer img { width: 64px; height: 64px; opacity: .9; filter: drop-shadow(0 0 14px rgba(255, 61, 127, .55)) drop-shadow(0 0 26px rgba(167, 77, 255, .35)); }
.leer p { margin: 0; }
.leer b { color: #fff; font-size: 16px; }
.leer-zelle { padding: 32px 16px !important; color: var(--sc-text3); text-align: center; font-family: var(--sc-titel); }

/* ---------- Seiten ---------- */
.seiten { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.seiten:empty { display: none; }
.seiten-text { margin: 0; color: var(--sc-text3); font-family: var(--sc-titel); font-size: 13.5px; }
.seiten-text b { color: #fff; font-weight: 600; }
.seiten-knoepfe { display: flex; align-items: center; gap: 6px; }
.seite { min-width: 38px; height: 38px; display: grid; place-items: center; padding: 0 10px; border-radius: var(--sc-r); background: var(--sc-flaeche); color: var(--sc-text2);
  font: 600 14px/1 var(--sc-titel); cursor: pointer; transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }
.seite svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.seite.aktiv { background: var(--sc-verlauf); color: rgba(0, 0, 0, .8); box-shadow: var(--sc-verlauf-glut); cursor: default; }
.seite:disabled:not(.aktiv) { opacity: .35; cursor: default; }
.seite:focus-visible:not(.aktiv) { background: #fff; color: #000; }
@media (hover: hover) { .seite:not(:disabled):hover { transform: translateY(2px); background: #fff; color: #000; box-shadow: 0 6px 22px rgba(255, 255, 255, .22); } }
.seite-luecke { padding: 0 4px; color: var(--sc-text3); }

/* ---------- Statistik ---------- */
.stat-raster { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(360px, 1fr); gap: 20px; align-items: start; }
.stat-seite { display: grid; gap: 0; }
.stat th, .stat td { padding-left: 12px; padding-right: 12px; }
.stat .rang { width: 1%; }
.sc-rang.st-grau { background: var(--sc-flaeche-hell); color: var(--sc-text2); box-shadow: none; }
.stat tr.klickbar { cursor: pointer; }
.stat tr.klickbar:focus-visible { outline-offset: -2px; }
.z-zeit { min-width: 150px; }
.z-zeit .sc-balken { display: block; width: 100%; max-width: 170px; height: 10px; margin-top: 8px; padding: 2px; }
.stat td.leise { white-space: nowrap; font-size: 13.5px; }

/* Saeulen: Eintraege pro Tag */
.saeulen { padding: 4px 0 0; }
.saeulen-flaeche { position: relative; height: 250px; margin-left: 40px; }
.achse { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--linie); }
.achse span { position: absolute; left: -42px; top: -7px; width: 34px; color: var(--sc-text3); font: 500 11.5px/1 var(--sc-titel); text-align: right; font-variant-numeric: tabular-nums; }
.saeulen-reihe { position: absolute; inset: 0 0 28px 0; display: grid; align-items: end; gap: 5px; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.saeule { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; outline-offset: 2px; }
.saeule i { display: block; width: 100%; max-width: 30px; min-height: 2px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #ff3d7f 0%, #e62ad6 55%, #a74dff 100%);
  box-shadow: 0 0 18px -4px rgba(255, 61, 127, .8); transform-origin: bottom; animation: scWachsen .7s var(--sc-weich) both; transition: background .3s ease, box-shadow .3s ease; }
.saeule.st-null i { background: rgba(255, 255, 255, .12); box-shadow: none; }
.saeule:focus-visible i { background: #fff; box-shadow: 0 0 24px rgba(255, 255, 255, .5); }
@media (hover: hover) { .saeule:hover i { background: #fff; box-shadow: 0 0 24px rgba(255, 255, 255, .5); } }
@keyframes scWachsen { from { transform: scaleY(0); } }
.saeule-text { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); color: var(--sc-text3); font: 500 11.5px/1 var(--sc-titel); white-space: nowrap; }
.schnitt { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(255, 255, 255, .55); pointer-events: none; }
.schnitt span { position: absolute; right: 0; top: -24px; padding: 3px 7px; border-radius: var(--sc-r-klein); background: rgba(12, 5, 20, .92); color: #fff; font: 600 12px/1 var(--sc-titel); white-space: nowrap; }

/* Balken: Kategorien (Baukasten-Balken, Fuellung in Kategoriefarbe) */
.balken-liste { display: grid; gap: 12px; }
.balken-zeile { display: grid; grid-template-columns: 128px minmax(0, 1fr) 104px; align-items: center; gap: 12px; padding: 2px 0; border-radius: var(--sc-r-klein); outline-offset: 3px; }
.balken-name { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--sc-text2); font: 500 14px/1.2 var(--sc-titel); }
.balken-name::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 1px; background: var(--k, var(--f-pink)); transform: rotate(45deg); box-shadow: 0 0 8px var(--k, var(--f-pink)); }
.balken-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balken-zeile .sc-balken { height: 14px; }
.balken-zeile .sc-balken > i { background: var(--k, var(--f-pink)); box-shadow: 0 0 14px var(--k, var(--f-pink)); transform-origin: left; animation: scBreit .8s var(--sc-weich) both; }
@keyframes scBreit { from { transform: scaleX(0); } }
.balken-wert { display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; white-space: nowrap; }
.balken-wert b { color: #fff; font: 700 15px/1 var(--sc-titel); font-variant-numeric: tabular-nums; }
.balken-wert small { color: var(--sc-text3); font-size: 12.5px; }
@media (hover: hover) { .balken-zeile:hover .balken-name { color: #fff; } }

/* Ring: Quellen */
.quellen { display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 22px; }
.ring { position: relative; width: 168px; height: 168px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 15; }
.ring .ring-spur { stroke: rgba(255, 255, 255, .06); }
.ring-mitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-mitte b { color: #fff; font: 700 32px/1 var(--sc-titel); letter-spacing: -1px; text-shadow: 0 0 30px rgba(255, 255, 255, .35); }
.ring-mitte small { margin-top: 4px; color: var(--sc-text3); font-size: 12px; line-height: 1.25; }
.legende { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.legende li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--sc-r); background: var(--sc-flaeche); font-family: var(--sc-titel); font-size: 14px; }
.legende li i { width: 9px; height: 9px; border-radius: 1px; transform: rotate(45deg); background: var(--k); box-shadow: 0 0 10px var(--k); }
.legende li span { color: var(--sc-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legende li b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.legende li b small { margin-left: 6px; color: var(--sc-text3); font-weight: 500; font-size: 12.5px; }

/* ---------- Protokoll ---------- */
.aktion { height: 26px; padding: 0 10px 0 8px; font-weight: 600; }
.aktion svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.eintrag-nr { display: inline-grid; place-items: center; height: 26px; padding: 0 8px; border-radius: var(--sc-r-klein); background: var(--sc-flaeche-hell); color: #fff; font: 600 13px/1 var(--sc-titel); font-variant-numeric: tabular-nums; }
.diff { margin: 0; padding: 0; list-style: none; color: var(--sc-text2); font-size: 13.5px; }
.diff b { color: #fff; font-family: var(--sc-schrift) !important; font-weight: 600 !important; font-size: 13.5px !important; text-shadow: none !important; }
.z-diff { color: var(--sc-text2); font-size: 13.5px; }
.protokoll .z-aktion, .protokoll .z-nr { width: 1%; white-space: nowrap; padding-right: 28px; }
.protokoll th:nth-child(2) { width: 22%; }

/* ---------- Dialog: Panel-Material ---------- */
.dialog { width: min(800px, calc(100vw - 32px)); max-width: none; max-height: none; margin: auto; padding: 0; overflow: visible; border: 0; background: transparent; color: #fff; }
.dialog.klein { width: min(520px, calc(100vw - 32px)); }
.dialog[open] { animation: scAuf .35s var(--sc-weich); }
.dialog::backdrop { background: rgba(8, 3, 14, .74); }
@keyframes scAuf { from { opacity: 0; transform: translateY(16px) scale(.985); } }
.dialog-panel.sc-panel { background-color: #12081c; width: 100%; max-height: min(92vh, 940px); padding: 22px 26px 0; gap: 0; overflow: hidden;
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .95), 0 0 90px -30px rgba(255, 61, 127, .5); }
.dialog-kopf { flex: none; }
.dialog-kopf .sc-titel b { font-size: 27px; line-height: 30px; }
.dialog-kopf .sc-rechts { align-self: center; }
.dialog .sc-zu { width: 36px; height: 36px; border: 0; padding: 0; }
.dialog .sc-zu svg { width: 12px; height: 12px; }
.dialog-inhalt { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; margin: 0 -10px; padding: 18px 10px 20px; color: var(--sc-text2); }
.dialog-inhalt > p { margin: 0; }
.dialog-inhalt > .sc-abschnitt { padding: 4px 0 0; margin: 0; }
.raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.feld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.feld input, .feld select, .feld textarea { width: 100%; min-width: 0; }
.feld > span, .feld > label { color: var(--sc-text3); font: 600 12px/1.2 var(--sc-titel); letter-spacing: .08em; text-transform: uppercase; }
.feld.breit { grid-column: 1 / -1; }
.feld textarea { min-height: 110px; resize: vertical; }
.zaehler { align-self: flex-end; color: var(--sc-text3); font: 500 12px/1 var(--sc-titel); }
.dauer-zeile { display: flex; gap: 6px; }
.dauer-zeile input { width: 92px; flex: none; font-family: var(--sc-titel); font-weight: 600; }
.chip-knopf { flex: 1; min-width: 0; height: 44px; padding: 0 6px; border-radius: var(--sc-r); background: var(--sc-flaeche); color: var(--sc-text2); font: 600 14px/1 var(--sc-titel); cursor: pointer;
  transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }
.chip-knopf:disabled { opacity: .4; cursor: not-allowed; }
.chip-knopf:focus-visible { background: #fff; color: #000; }
@media (hover: hover) { .chip-knopf:not(:disabled):hover { transform: translateY(2px); background: #fff; color: var(--sc-dunkel); box-shadow: 0 8px 30px rgba(255, 255, 255, .25); } }
.d-hinweis { margin: 2px 0 0 !important; font-size: 13.5px; text-shadow: none; }
.d-fehler { padding: 10px 12px; border-radius: var(--sc-r); border-left: 3px solid var(--sc-rot); background: rgba(255, 88, 88, .12); color: #ffd0d0; font-size: 14px; }
.d-verlauf h3 { margin: 6px 0 8px; padding: 0; }
.d-verlauf ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.d-verlauf li { padding: 9px 12px; border-radius: var(--sc-r); background: var(--sc-flaeche); }
.d-verlauf li b { color: #fff; font-family: var(--sc-titel); font-weight: 600; }
.d-verlauf li small { color: var(--sc-text3); }
.dialog-fuss { flex: none; display: flex; align-items: center; gap: 10px; margin: 0 -26px; padding: 16px 26px 20px; border-top: 1px solid var(--sc-kante); background: rgba(8, 3, 14, .4); }
.dialog-fuss .sc-haupt { width: auto; height: 46px; padding: 0 26px; }
.dialog-fuss .sc-zweit, .dialog-fuss .sc-knopf { height: 46px; }
.platz { flex: 1; }

/* ---------- Meldung + Tooltip ---------- */
.meldung.sc-meldung { position: fixed; right: 24px; bottom: 24px; z-index: 80; width: auto; min-width: 300px; max-width: min(440px, calc(100vw - 48px)); background: rgba(12, 5, 20, .96);
  border-left-color: #ff3d7f; box-shadow: 0 20px 50px rgba(0, 0, 0, .6), 0 0 40px -12px rgba(255, 61, 127, .45); }
.meldung.st-fehler { border-left-color: var(--sc-rot); }
.meldung .sc-eicon svg { width: 18px; height: 18px; }
.meldung.st-gut .sc-eicon { color: var(--sc-gruen); background: rgba(116, 255, 88, .13); }
.meldung.st-fehler .sc-eicon { color: var(--sc-rot); background: rgba(255, 88, 88, .16); }
.tip { position: fixed; z-index: 90; max-width: 280px; padding: 8px 11px; border-radius: var(--sc-r); border-left: 2px solid #ff3d7f; background: rgba(12, 5, 20, .97);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .9); color: #fff; font: 500 13px/1.4 var(--sc-titel); pointer-events: none; }

/* ---------- Login ---------- */
.login-seite .hintergrund { height: 100%; min-height: 100vh;
  background: linear-gradient(180deg, rgba(13, 6, 22, .25) 0%, rgba(13, 6, 22, .5) 55%, rgba(13, 6, 22, .9) 100%),
    radial-gradient(70% 70% at 50% 45%, transparent 30%, rgba(13, 6, 22, .7) 100%), url('bilder/stadt.webp') 50% 30% / cover no-repeat; }
.login-buehne { flex: 1; display: grid; place-items: center; align-content: center; gap: 20px; padding: 48px 20px; }
.login-karte.sc-panel { width: min(600px, 100%); padding: 32px 38px 30px; gap: 0; box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .95), 0 0 100px -40px rgba(255, 61, 127, .55); }
.login-schriftzug { width: 270px; height: auto; margin: 0 auto 22px; filter: drop-shadow(0 14px 40px rgba(255, 46, 151, .45)); }
.login-kicker { margin: 0 0 10px; padding: 0; font-size: 12.5px; }
.login-karte h1 { margin: 0 0 12px; font-size: 40px; text-shadow: 0 0 37px rgba(255, 255, 255, .35); }
.login-karte h1 .sc-akzent { font-size: 40px; }
.login-text { margin: 0 0 22px; color: var(--sc-text2); font-size: 15px; }
.discord-knopf.sc-haupt { height: 54px; font-size: 16.5px; gap: 10px; }
.discord-knopf svg { width: 24px; height: 24px; }
.discord-knopf .voll-pfad { fill: currentColor; stroke: none; }
.login-zugang-titel { margin: 24px 0 10px; padding: 0; }
.login-rollen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.login-klein { margin: 0; color: var(--sc-text3); font-size: 13px; }
.login-fehler { margin: 0 0 18px; padding: 11px 14px; border-radius: var(--sc-r); border-left: 3px solid var(--sc-rot); background: rgba(255, 88, 88, .12); color: #ffd0d0; font-size: 14px; }
.login-fehler.st-gut { border-left-color: #ff3d7f; background: rgba(167, 77, 255, .14); color: #fff; }
.test-login { margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--sc-kante); }
.test-login .sc-abschnitt { margin: 0 0 10px; padding: 0; }
.test-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.login-fuss { display: flex; align-items: center; gap: 8px; margin: 0; color: rgba(255, 255, 255, .7); font: 500 13.5px/1 var(--sc-titel); text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.login-fuss img { width: 22px; height: 22px; filter: drop-shadow(0 0 8px rgba(255, 46, 151, .5)); }
.login-fuss a { color: var(--rosa); font-weight: 600; text-decoration: none; }
.login-fuss a:hover { text-decoration: underline; }

/* ---------- Mittlere Breiten ---------- */
@media (max-width: 1280px) {
  .stat-raster { grid-template-columns: 1fr; }
  .stat-seite { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .kpi-wert { font-size: 34px; }
}
@media (max-width: 1100px) {
  :root { --rand: 24px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nutzer-text { display: none; }
  .nutzer { padding: 0 6px; }
  .leiste-innen { gap: 18px; }
  .marke .sc-titel small { display: none; }
  .z-notiz { min-width: 180px; }
  .stat-seite { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .abmelden span { display: none; }
  .abmelden { width: 46px; padding: 0; justify-content: center; }
  .buehne { flex-direction: column; align-items: stretch; min-height: 0; }
  .buehne-knoepfe { justify-content: flex-start; }
}

/* ---------- Handy: Zeilen werden Karten ---------- */
@media (max-width: 760px) {
  :root { --rand: 16px; }
  body { font-size: 14.5px; }
  .hintergrund { height: 760px; background-position: 0 0, 0 0, 46% 30%; }
  .leiste-innen { flex-wrap: wrap; min-height: 0; gap: 10px 12px; padding: 10px 16px; }
  .marke .sc-logo { width: 44px; height: 44px; }
  .marke .sc-titel b { font-size: 20px; line-height: 22px; }
  .konto { gap: 8px; }
  .nutzer { height: 42px; }
  .avatar { width: 30px; height: 30px; font-size: 12px; }
  .abmelden { width: 42px; height: 42px; }
  .leiste-nav { order: 3; flex: 1 0 100%; gap: 6px; }
  .leiste-nav a { flex: 1; justify-content: center; height: 40px; padding: 0 8px; font-size: 14px; gap: 7px; }
  .leiste-nav a svg { width: 15px; height: 15px; }
  body:not(.st-voll) .leiste-nav { display: none; }
  .buehne { padding: 34px 0 20px; gap: 18px; }
  .kicker { margin-bottom: 12px; font-size: 11.5px; }
  h1 { font-size: 34px; letter-spacing: -1.1px; }
  h1 .sc-akzent { font-size: 34px; transform: rotate(-7deg) translateY(-4px); }
  .unter { font-size: 14.5px; margin-top: 10px; }
  .buehne-knoepfe { display: grid; grid-template-columns: 1fr auto; }
  .buehne-knoepfe .sc-haupt { grid-column: 1; grid-row: 1; height: 50px; }
  .buehne-knoepfe .sc-zweit { grid-row: 1; padding: 0 16px; }
  .buehne-knoepfe .sc-zweit:only-child, .buehne-knoepfe #s-export { grid-column: 1 / -1; }
  .kpis { gap: 10px; margin-bottom: 14px; min-height: 0; }
  .kpi.sc-kachel { min-height: 0; padding: 14px 14px 0; grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .kpi > .sc-bild { width: 44px; height: 44px; }
  .kpi > .sc-bild svg { width: 19px; height: 19px; }
  .kpi-titel { font-size: 11px; letter-spacing: .06em; margin-bottom: 5px; }
  .kpi-wert { font-size: 27px; letter-spacing: -.8px; }
  .kpi-wert small { font-size: 13px; margin-right: 3px; }
  .kpi-unter { margin-top: 8px; font-size: 12px; }
  .kpi-zeichen { width: 100px; height: 100px; right: -20px; top: -14px; }
  .kpi-fuss { height: 40px; margin: 6px -14px 0; }
  .kpi-fuss.st-leer { height: 12px; }
  .kpi-gesichter { padding: 0 14px 10px; }
  .kpi-gesichter .raute { width: 30px; height: 30px; font-size: 10.5px; }
  .kpi-gesichter .raute::before { inset: 5px; }
  .kpi-gesichter small { display: none; }
  .kpi-anteil { padding: 0 14px 14px; }
  .fenster.sc-panel { padding: 16px 14px 16px; gap: 12px; margin-bottom: 14px; }
  .fenster-kopf .sc-abschnitt { font-size: 12.5px; }
  .fenster-unter { font-size: 12.5px; }
  .zeitraum-reiter { overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 4px 14px 6px; width: auto; }
  .zeitraum-reiter::-webkit-scrollbar { display: none; }
  .zeitraum-reiter > button { flex: none; height: 38px; padding: 0 14px; font-size: 14px; }
  .stat-reiter { margin: -4px 0 14px; padding: 6px; }
  .suche.sc-suche { flex: 1 0 100%; }
  .auswahl { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .auswahl select { width: 100%; min-width: 0; }
  .eigen-zeitraum { flex: 1 0 100%; }
  .eigen-zeitraum label { flex: 1; }
  .eigen-zeitraum input { width: 100%; }

  .tabelle thead { display: none; }
  .tabelle, .tabelle tbody, .tabelle tr { display: block; width: 100%; }
  .tabelle td { display: block; width: auto; min-width: 0; }
  .tabelle { margin: 0; border-spacing: 0; }
  .tabelle tbody { display: grid; gap: 8px; }
  .tabelle tr { position: relative; display: grid; gap: 10px 12px; padding: 14px; border-radius: var(--sc-r); background: var(--sc-flaeche); }
  .tabelle td, .tabelle td:first-child, .tabelle td:last-child { padding: 0; border-radius: 0; background: none !important; box-shadow: none !important; }
  .tabelle td[data-titel]::before { content: attr(data-titel); display: block; margin-bottom: 3px; color: var(--sc-text3); font: 600 10.5px/1.2 var(--sc-titel); letter-spacing: .1em; text-transform: uppercase; }
  .tabelle .rechts { text-align: left; }
  .tabelle tr.eigen { background: var(--sc-verlauf-senkrecht) left / 3px 100% no-repeat, var(--sc-flaeche); }
  .eintraege tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sup sup kn" "spi spi spi" "kat dau dau" "not not not" "dat dat que"; }
  .eintraege td:nth-child(1) { grid-area: dat; display: flex; gap: 6px; align-items: center; padding-top: 10px; border-top: 1px solid var(--linie); }
  .eintraege tr { column-gap: 10px; }
  .eintraege td:nth-child(1) b { font-size: 13px; text-shadow: none; }
  .eintraege td:nth-child(1) small { margin: 0; }
  .eintraege td:nth-child(1)::before, .eintraege td:nth-child(2)::before, .eintraege td:nth-child(4)::before, .eintraege td:nth-child(5)::before,
  .eintraege td:nth-child(6)::before, .eintraege td:nth-child(7)::before { display: none; }
  .eintraege td:nth-child(2) { grid-area: sup; }
  .eintraege td:nth-child(3) { grid-area: spi; }
  .eintraege td:nth-child(4) { grid-area: kat; align-self: center; }
  .eintraege td:nth-child(5) { grid-area: dau; display: flex; align-items: center; gap: 6px; }
  .eintraege td:nth-child(5) small { margin: 0; line-height: 1; }
  .eintraege td:nth-child(6) { grid-area: que; justify-self: stretch; text-align: right; align-self: center; margin-left: -10px; padding-left: 10px; padding-top: 10px; border-top: 1px solid var(--linie); }
  .eintraege td.z-notiz.st-leer { display: none; }
  .eintraege td:nth-child(7) { grid-area: not; max-width: none; min-width: 0; }
  .eintraege td:nth-child(8) { grid-area: kn; width: auto; }
  .eintraege td.z-dauer { width: auto; }
  .eintraege .quelle .sc-symbol { width: 26px; height: 26px; }
  .z-notiz .notiz { -webkit-line-clamp: 3; }
  .stat tr { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-right: 54px; }
  .stat td.rang { position: absolute; top: 14px; right: 14px; width: auto; }
  .stat td.rang::before, .stat td:nth-child(2)::before { display: none; }
  .stat td:nth-child(2) { grid-column: 1 / -1; }
  .stat td.z-zeit { min-width: 0; }
  .stat td:nth-child(6) { grid-column: 1 / span 2; }
  .protokoll tr { grid-template-columns: minmax(0, 1fr) auto; }
  .protokoll td:nth-child(1)::before, .protokoll td:nth-child(2)::before, .protokoll td:nth-child(3)::before, .protokoll td:nth-child(4)::before { display: none; }
  .protokoll td:nth-child(2) { grid-column: 1; grid-row: 1; }
  .protokoll td:nth-child(3) { grid-column: 2; grid-row: 1; align-self: center; }
  .protokoll td:nth-child(1) { grid-column: 1; grid-row: 3; display: flex; gap: 6px; align-items: baseline; }
  .protokoll td:nth-child(1) b { font-size: 13px; text-shadow: none; }
  .protokoll td:nth-child(1) small { margin: 0; }
  .protokoll td:nth-child(4) { grid-column: 2; grid-row: 3; justify-self: end; }
  .protokoll td.z-diff { grid-column: 1 / -1; grid-row: 2; }
  .seiten { flex-direction: column; align-items: stretch; }
  .seiten-knoepfe { justify-content: center; }
  .saeulen-flaeche { height: 200px; margin-left: 32px; }
  .achse span { left: -34px; width: 28px; }
  .saeulen-reihe { gap: 2px; }
  .balken-zeile { grid-template-columns: 96px minmax(0, 1fr) 84px; gap: 8px; }
  .balken-wert small { display: none; }
  .quellen { grid-template-columns: 1fr; justify-items: center; }
  .legende { width: 100%; }

  .dialog { width: 100vw; margin: auto 0 0; }
  .dialog[open] { animation-name: scHoch; }
  @keyframes scHoch { from { opacity: 0; transform: translateY(40px); } }
  .dialog-panel.sc-panel { max-height: 94vh; padding: 16px 16px 0; border-radius: 10px 10px 0 0; }
  .dialog-kopf .sc-logo { width: 46px; height: 46px; }
  .dialog-kopf .sc-titel b { font-size: 21px; line-height: 24px; }
  .dialog-inhalt { padding: 14px 10px 16px; }
  .raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .raster .feld:nth-child(n+3) { grid-column: 1 / -1; }
  .raster.einsatz .feld { grid-column: 1 / -1; }
  .dauer-zeile input { width: 76px; }
  .dialog-fuss { flex-wrap: wrap; margin: 0 -16px; padding: 12px 16px 18px; }
  .dialog-fuss .platz { display: none; }
  .dialog-fuss > * { flex: 1; }
  .meldung.sc-meldung { left: 12px; right: 12px; bottom: 12px; min-width: 0; max-width: none; }
  .login-karte.sc-panel { padding: 26px 20px 22px; }
  .login-schriftzug { width: 240px; }
  .login-karte h1 { font-size: 32px; }
}
@media (max-width: 380px) {
  .nutzer { display: none; }
  .kpi-wert { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .saeule i, .balken-zeile .sc-balken > i, .z-zeit .sc-balken > i { background: CanvasText; forced-color-adjust: none; }
  .raute::before { border-color: CanvasText; }
}

/* =====================================================================================================================
   r677 (02.11.2026) F9 im Browser: Spieler (live), Akte, Banns, Logs, Aktions-Dialog, Panel-Protokoll.
   Gleiche Bausteine wie oben (Flaechen, Chips, Raute, Panel-Material, Rang-Kaestchen), eckig, Lila statt Braun.
   ===================================================================================================================== */
.kpis.st-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Bruecken-Status oben rechts (Raute wie .sc-status) */
.bruecke { display: inline-flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 16px 8px 14px; border-radius: var(--sc-r);
  background: linear-gradient(var(--sc-flaeche-hell), var(--sc-flaeche-hell)), rgba(12, 5, 20, .78); }
.bruecke:empty { display: none; }
.bruecke > i { width: 10px; height: 10px; flex: none; border-radius: 2px; transform: rotate(45deg); background: var(--sc-rot); box-shadow: 0 0 12px rgba(255, 88, 88, .8); }
.bruecke.st-an > i { background: var(--sc-gruen); box-shadow: 0 0 12px rgba(116, 255, 88, .8); animation: scPuls 2.4s ease-in-out infinite; }
.bruecke > span { display: grid; line-height: 1.2; }
.bruecke b { color: #fff; font: 600 14.5px/1.2 var(--sc-titel); }
.bruecke small { color: var(--sc-text3); font-size: 12.5px; }
@keyframes scPuls { 50% { box-shadow: 0 0 2px rgba(116, 255, 88, .4); } }
.bruecke-hinweis { margin: -4px 0 18px; border-color: rgba(255, 88, 88, .35); background: rgba(255, 88, 88, .07); }

/* Knoepfe: zweite Wahl in Gefahr-Farbe, Haupt in Rot (Bann) */
.sc-zweit.st-gefahr { color: #ffb3b3; background: linear-gradient(rgba(255, 88, 88, .16), rgba(255, 88, 88, .16)), rgba(12, 5, 20, .78); }
.sc-haupt.st-rot { color: #1a0000; box-shadow: 0 11px 32px rgba(255, 88, 88, .3); }
@media (hover: hover) { .sc-zweit.st-gefahr:hover { background: var(--sc-rot); color: #1a0000; } .sc-haupt.st-rot:hover { background: #fff; } }

/* ---------- Spieler ---------- */
.tabelle tr.klickbar { cursor: pointer; }
.tabelle tr.klickbar:focus-visible { outline-offset: -2px; }
.z-id { width: 1%; }
.z-id .sc-rang { min-width: 38px; height: 28px; font-size: 14px; }
.z-person .person + .sc-chip { margin-top: 6px; }
.z-person { min-width: 210px; }
.z-zeit2 { white-space: nowrap; }
.z-ping { width: 1%; white-space: nowrap; color: var(--sc-text2); }
.offline-treffer { display: grid; gap: 10px; padding-top: 6px; }
.offline-treffer .sc-abschnitt { margin: 0; padding: 0; color: rgba(255, 255, 255, .8); }
.offline-treffer .sc-abschnitt em { font-style: normal; color: #fff; }
.personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.person-karte { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px 10px 8px; border-radius: var(--sc-r); background: var(--sc-flaeche);
  color: inherit; text-decoration: none; transition: background-color .3s ease, box-shadow .3s ease; }
.person-karte .person-text { flex: 1; }
.person-karte .person-text b { color: #fff; font: 600 15px/1.25 var(--sc-titel); text-shadow: var(--sc-glanz-weiss); }
.person-karte .person-text small { color: var(--sc-text3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-karte > svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--sc-text3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.person-karte:focus-visible { background: var(--sc-flaeche-hell); }
@media (hover: hover) { .person-karte:hover { background: var(--sc-flaeche-hell); box-shadow: inset 2px 0 0 rgba(255, 255, 255, .6); } }

/* ---------- Akte ---------- */
.kicker .zurueck { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.kicker > span[aria-hidden] { opacity: .6; }
.ak-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.ak-chips .sc-status { height: 30px; padding: 0 12px; border-radius: var(--sc-r-klein); background: rgba(12, 5, 20, .72); color: #fff; font-size: 13.5px; }
.ak-chips .sc-chip { height: 30px; padding: 0 11px; font-weight: 600; }
.ak-chips .sc-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ak-chips .sc-chip.st-rot { background: rgba(255, 88, 88, .22); }
.akte-raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr); gap: 20px; align-items: start; }
.akte-haupt, .akte-seite { display: grid; min-width: 0; }
.zeitleiste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.zeit-eintrag { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 14px; border-radius: var(--sc-r); background: var(--sc-flaeche); }
.zeit-eintrag .sc-eicon { width: 42px; height: 42px; }
.zeit-eintrag .sc-eicon:not(.st-gelb):not(.st-rot) { color: #8de6ff; background: rgba(63, 208, 255, .13); }
.zeit-text { min-width: 0; }
.zeit-text p { margin: 0; }
.zeit-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zeit-kopf b { color: #fff; font: 600 15px/1.3 var(--sc-titel); text-shadow: var(--sc-glanz-weiss); }
.zeit-kopf .sc-chip { height: 22px; font-size: 12px; font-weight: 600; }
.zeit-grund { margin-top: 4px !important; color: var(--sc-text); font-size: 14.5px; overflow-wrap: anywhere; }
.zeit-text small { display: block; margin-top: 4px; color: var(--sc-text3); font-size: 12.5px; }
.kompakt-liste { display: grid; gap: 6px; }
.kompakt-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--sc-r); background: var(--sc-flaeche); }
.kompakt-datum { display: grid; line-height: 1.2; white-space: nowrap; }
.kompakt-datum b { color: #fff; font: 600 14px/1.2 var(--sc-titel); font-variant-numeric: tabular-nums; }
.kompakt-datum small, .kompakt-mitte small { color: var(--sc-text3); font-size: 12.5px; }
.kompakt-mitte { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.kompakt-mitte b { color: #fff; font: 600 14.5px/1.25 var(--sc-titel); }
.kompakt-mitte .notiz { flex: 1 0 100%; font-size: 13.5px; }
.kompakt-zeile.auto { grid-template-columns: auto minmax(0, 1fr) auto; }
.kompakt-zeile.auto .kompakt-mitte { display: grid; gap: 0; }
.kennzeichen { display: inline-grid; place-items: center; min-width: 88px; height: 28px; padding: 0 9px 0 13px; border-radius: 3px; background: #f4effb; color: #1d1028;
  font: 700 13.5px/1 var(--sc-titel); letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 4px 0 0 #a74dff, 0 0 16px rgba(167, 77, 255, .25); white-space: nowrap; }
.chars { display: grid; gap: 8px; }
.char-karte { display: grid; gap: 12px; padding: 14px; border-radius: var(--sc-r); background: var(--sc-flaeche); }
.char-karte.st-an { background: var(--sc-verlauf-senkrecht) left / 3px 100% no-repeat, var(--sc-flaeche); }
.char-kopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.char-kopf .person-text { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.char-kopf .person-text b { color: #fff; font: 600 16px/1.25 var(--sc-titel); text-shadow: var(--sc-glanz-weiss); }
.char-kopf .person-text small { color: var(--sc-text3); font-size: 12.5px; }
.geld { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; margin: 0; }
.geld > div { padding: 8px 10px; border-radius: var(--sc-r-klein); background: rgba(12, 5, 20, .45); }
.geld dt { color: var(--sc-text3); font: 600 11px/1.2 var(--sc-titel); letter-spacing: .08em; text-transform: uppercase; }
.geld dd { margin: 3px 0 0; color: #fff; font: 700 15px/1.2 var(--sc-titel); font-variant-numeric: tabular-nums; white-space: nowrap; }
.char-fuss { color: var(--sc-text3); font-size: 12.5px; }

/* ---------- Banns ---------- */
.tabelle tr.st-alt td { opacity: .62; }
.dauer-chip.st-rot { background: rgba(255, 88, 88, .16); color: #ffb3b3; }
.dauer-chip.st-rot svg { stroke: #ff8a8a; }
.banns .z-notiz { min-width: 240px; max-width: 420px; }
.banns .z-von b { font-size: 14px; }
.banns .z-dauer small { white-space: nowrap; }

/* ---------- Logs ---------- */
.kanal-reiter { flex-wrap: wrap; }
.kanal-reiter > button { flex: 0 0 auto; gap: 8px; padding: 0 12px; }
.kanal-reiter > button small { color: inherit; opacity: .6; font-size: 12px; font-variant-numeric: tabular-nums; }
.kanal-reiter > button i { width: 7px; height: 7px; border-radius: 1px; transform: rotate(45deg); background: var(--k, var(--f-pink)); box-shadow: 0 0 8px var(--k, var(--f-pink)); }
.kanal-reiter > button[aria-pressed="true"] i { background: rgba(0, 0, 0, .7); box-shadow: none; }
.log-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.log-eintrag { padding: 11px 14px; border-radius: var(--sc-r); background: var(--sc-flaeche); cursor: pointer; transition: background-color .3s ease, box-shadow .3s ease; }
.log-eintrag:focus-visible { outline-offset: -2px; }
.log-kopf { display: flex; align-items: center; gap: 12px; min-width: 0; }
.log-zeit { display: flex; align-items: baseline; gap: 8px; flex: none; white-space: nowrap; }
.log-zeit b { color: #fff; font: 600 14.5px/1 var(--sc-titel); font-variant-numeric: tabular-nums; }
.log-zeit small { color: var(--sc-text3); font-size: 12px; }
.log-kopf .sc-chip { flex: none; height: 24px; font-size: 12.5px; }
.log-titel { min-width: 0; overflow: hidden; color: #fff; font: 600 14.5px/1.3 var(--sc-titel); text-overflow: ellipsis; white-space: nowrap; }
.log-text { display: -webkit-box; margin: 7px 0 0; overflow: hidden; color: var(--sc-text2); font-size: 13.5px; line-height: 1.5; white-space: pre-line;
  overflow-wrap: anywhere; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.log-eintrag.st-offen .log-text { display: block; -webkit-line-clamp: unset; }
.log-eintrag.st-offen .log-titel { white-space: normal; }
mark { padding: 0 2px; border-radius: 2px; background: rgba(255, 61, 127, .38); color: #fff; }
@media (hover: hover) { .log-eintrag:hover { background: var(--sc-flaeche-hell); box-shadow: inset 2px 0 0 rgba(255, 255, 255, .6); } }

/* ---------- Panel-Protokoll ---------- */
.panelprotokoll .z-diff .sc-chip { height: 22px; font-size: 12px; font-weight: 600; }
.panelprotokoll .z-diff small.block { margin-top: 5px; }
#p-panel .fenster-kopf .auswahl select { min-width: 230px; }

/* ---------- Aktions-Dialog ---------- */
.a-ziel { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 10px; border-radius: var(--sc-r); background: var(--sc-flaeche); }
.a-ziel .person-text { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.a-ziel .person-text b { color: #fff; font: 600 17px/1.25 var(--sc-titel); text-shadow: var(--sc-glanz-weiss); }
.a-ziel .person-text small { color: var(--sc-text3); font-size: 13px; }
.a-ziel .sc-status { font-size: 13.5px; color: var(--sc-text2); }
.a-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.a-felder .feld[hidden] { display: none; }
.vorlagen { display: flex; flex-wrap: wrap; gap: 6px; }
.vorlagen .chip-knopf { flex: 0 0 auto; height: 36px; padding: 0 12px; font-size: 13.5px; }
.vorlagen .chip-knopf.st-an { background: var(--sc-verlauf); color: rgba(0, 0, 0, .8); box-shadow: var(--sc-verlauf-glut); }
.a-status { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--sc-r); background: var(--sc-flaeche); border-left: 3px solid #a74dff; }
.a-status.st-ok { border-left-color: var(--sc-gruen); background: rgba(116, 255, 88, .07); }
.a-status.st-fehler { border-left-color: var(--sc-rot); background: rgba(255, 88, 88, .08); }
.a-status > div { display: grid; min-width: 0; }
.a-status b { color: #fff; font: 600 15px/1.3 var(--sc-titel); }
.a-status small { color: var(--sc-text2); font-size: 13.5px; }
.a-status .sc-eicon:not(.st-gruen):not(.st-rot) { color: #cfa6ff; background: rgba(167, 77, 255, .18); }
.rad { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(207, 166, 255, .3); border-top-color: #cfa6ff; animation: scDreh .8s linear infinite; }
@keyframes scDreh { to { transform: rotate(360deg); } }

/* ---------- Breiten ---------- */
@media (max-width: 1280px) {
  .akte-raster { grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); }
}
@media (max-width: 1100px) {
  .akte-raster { grid-template-columns: 1fr; }
  .akte-seite { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
  .leiste-nav { overflow-x: auto; scrollbar-width: none; }
  .leiste-nav::-webkit-scrollbar { display: none; }
  .leiste-nav a { padding: 0 14px; }
}
@media (max-width: 900px) {
  .akte-seite { grid-template-columns: 1fr; }
  .bruecke { min-height: 46px; }
  .ak-knoepfe { display: flex !important; flex-wrap: wrap; }
  .ak-knoepfe > * { flex: 1 1 auto; }
}
@media (max-width: 760px) {
  body.st-nav .leiste-nav { display: flex; }
  .leiste-nav { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .leiste-nav a { flex: 1 0 auto; padding: 0 10px; gap: 6px; font-size: 13.5px; }
  .kpis.st-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis.st-drei .kpi-wert { font-size: 24px; }
  .kpis.st-drei .kpi-unter { display: none; }
  .kpis.st-drei .kpi-titel { white-space: normal; line-height: 1.25; }
  .kpis.st-drei .kpi-fuss { display: none; }
  .bruecke { width: 100%; }
  .buehne-knoepfe .bruecke { grid-column: 1 / -1; }
  .ak-chips { margin-top: 12px; }
  .ak-knoepfe .sc-zweit, .ak-knoepfe .sc-haupt { height: 46px; padding: 0 12px; font-size: 14.5px; }

  /* Spieler als Karten */
  .spieler tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "id per per" "job job zeit" "kn kn kn"; }
  .spieler td:nth-child(1) { grid-area: id; align-self: center; }
  .spieler td:nth-child(2) { grid-area: per; }
  .spieler td:nth-child(3) { grid-area: job; }
  .spieler td:nth-child(4) { grid-area: zeit; text-align: right; }
  .spieler td:nth-child(5) { display: none; }
  .spieler td:nth-child(6) { grid-area: kn; width: auto; padding-top: 10px; border-top: 1px solid var(--linie); }
  .spieler td:nth-child(1)::before, .spieler td:nth-child(2)::before { display: none; }
  .spieler .zeile-knoepfe { justify-content: space-between; }
  .spieler .symbol-knopf { flex: 1; height: 40px; }
  .z-person { min-width: 0; }
  .z-person .person + .sc-chip { margin-top: 4px; }
  .personen { grid-template-columns: 1fr; }

  /* Banns als Karten */
  .banns tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "nr per kn" "gr gr gr" "dau dau von"; }
  .banns td:nth-child(1) { grid-area: nr; align-self: center; }
  .banns td:nth-child(2) { grid-area: per; align-self: center; }
  .banns td:nth-child(3) { grid-area: gr; max-width: none; min-width: 0; }
  .banns td:nth-child(4) { grid-area: dau; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  .banns td:nth-child(5) { grid-area: von; text-align: right; }
  .banns td:nth-child(6) { grid-area: kn; width: auto; }
  .banns td:nth-child(1)::before, .banns td:nth-child(2)::before, .banns td:nth-child(3)::before, .banns td:nth-child(4)::before, .banns td:nth-child(6)::before { display: none; }
  .banns td:nth-child(4) small { margin: 0; }

  /* Panel-Protokoll als Karten */
  .panelprotokoll tr { grid-template-columns: minmax(0, 1fr) auto; }
  .panelprotokoll td:nth-child(1)::before, .panelprotokoll td:nth-child(2)::before, .panelprotokoll td:nth-child(3)::before { display: none; }
  .panelprotokoll td:nth-child(2) { grid-column: 1; grid-row: 1; }
  .panelprotokoll td:nth-child(3) { grid-column: 2; grid-row: 1; align-self: center; }
  .panelprotokoll td:nth-child(4) { grid-column: 1 / -1; grid-row: 2; }
  .panelprotokoll td:nth-child(5) { grid-column: 1 / -1; grid-row: 3; }
  .panelprotokoll td:nth-child(1) { grid-column: 1 / -1; grid-row: 4; display: flex; gap: 6px; align-items: baseline; padding-top: 8px; border-top: 1px solid var(--linie); }
  .panelprotokoll td:nth-child(1) b { font-size: 13px; text-shadow: none; }
  .panelprotokoll td:nth-child(1) small { margin: 0; }
  #p-panel .fenster-kopf .auswahl { flex: 1 0 100%; }
  #p-panel .fenster-kopf .auswahl select { width: 100%; min-width: 0; }

  /* Logs */
  .kanal-reiter { flex-wrap: nowrap; }
  .log-eintrag { padding: 11px 12px; }
  .log-kopf { flex-wrap: wrap; gap: 6px 10px; }
  .log-titel { flex: 1 0 100%; white-space: normal; }
  .log-text { -webkit-line-clamp: 4; }

  /* Akte */
  .zeit-eintrag { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .zeit-eintrag .sc-eicon { width: 36px; height: 36px; }
  .kompakt-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .kompakt-zeile .kompakt-datum { grid-column: 1 / -1; display: flex; gap: 6px; align-items: baseline; }
  .kompakt-zeile.auto { grid-template-columns: auto minmax(0, 1fr); }
  .kompakt-zeile.auto > .sc-chip { grid-column: 2; justify-self: start; }

  /* Dialog */
  .a-felder { grid-template-columns: 1fr; }
  .vorlagen .chip-knopf { height: 34px; padding: 0 10px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .rad { animation: none !important; border-top-color: rgba(207, 166, 255, .3); } }