/* ================================================================
   Foxhole – Corporate-Cyberpunk-Theme (2026-10-01)
   Schwarz / Signalrot, scharfe Kanten (clip-path), Linien-Icons, keine Neon-Glows.
   Wird NACH style.css / dashboard.css / access.css / admin.css geladen und überschreibt nur Optik.
   Themes: body[data-accent] (Admin-Einstellung, seitenweit) bzw. body[data-theme] (pro Benutzer, Profil/Startseite).
   Rückbau: <link rel="stylesheet" href="/theme-foxhole.css"> aus den HTML-Köpfen entfernen.
   ================================================================ */
@font-face { font-family: "Chakra Petch"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/chakra-petch-medium.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/chakra-petch-semibold.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/chakra-petch-bold.woff2") format("woff2"); }

:root, body, body[data-accent="cyan"], body[data-theme="foxhole"] {
	--acc: #e10600; --acc2: #ff3b30; --acc-rgb: 225, 6, 0; --acc-ink: #fff;
	--bg: #0a0a0b; --bg2: #111214; --bg3: #17181b; --panel: rgba(17, 18, 20, .9);
	--line: rgba(255, 255, 255, .09); --line2: rgba(255, 255, 255, .18);
	--text: #ececee; --muted: #8e9198; --green: #22d36b; --red: #ff3b3b; --yellow: #ffb000;
	--cyan: var(--acc); --magenta: var(--acc2);
	--head: "Chakra Petch", "Bahnschrift", "DIN Condensed", "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow", sans-serif;
	--cut: 14px;
}
body[data-accent="magenta"], body[data-theme="magenta"] { --acc: #ff2d6f; --acc2: #ff7aa2; --acc-rgb: 255, 45, 111; }
body[data-accent="yellow"],  body[data-theme="amber"]   { --acc: #ffb000; --acc2: #ffd36b; --acc-rgb: 255, 176, 0; --acc-ink: #111; --yellow: #ff7a00; }
body[data-accent="green"],   body[data-theme="green"]   { --acc: #19d26b; --acc2: #7cf2ae; --acc-rgb: 25, 210, 107; --acc-ink: #06140c; }
/* Theme „Polizei“: dunkles Marineblau, Polizeiblau + Cyan, dezente Blau/Rot-Lichtleiste */
body[data-accent="polizei"], body[data-theme="polizei"] {
	--acc: #1e6bff; --acc2: #36d6ff; --acc-rgb: 30, 107, 255; --acc-ink: #fff;
	--bg: #050a17; --bg2: #0a1328; --bg3: #0f1c38; --panel: rgba(9, 18, 38, .9);
	--line: rgba(120, 170, 255, .14); --line2: rgba(150, 190, 255, .28); --muted: #8ea3c7;
}
/* Benutzer-Theme schlägt Seiten-Akzent: gleiche Spezifität, steht später */
body[data-theme="foxhole"] { --acc: #e10600; --acc2: #ff3b30; --acc-rgb: 225, 6, 0; --acc-ink: #fff; --bg: #0a0a0b; --bg2: #111214; --bg3: #17181b; --panel: rgba(17, 18, 20, .9); --line: rgba(255,255,255,.09); --line2: rgba(255,255,255,.18); --muted: #8e9198; }

html { background: var(--bg); }
body, body.dash, body.admin { background: var(--bg); color: var(--text); font-family: var(--mono); }
body *, body *::before, body *::after { text-shadow: none !important; }
::selection { background: var(--acc); color: var(--acc-ink); }
a { color: var(--acc2); }

/* ---------- Hintergrund: rotes Raster (driftet langsam, nur transform -> GPU), dezente Scanlines ---------- */
.bg-photo { display: none !important; }
.grid-bg, body.dash .grid-bg {
	opacity: 1; overflow: hidden; background: none;
	mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.15) 100%);
}
.grid-bg::before {
	content: ""; position: absolute; inset: -48px 0 0 0;
	background-image:
		linear-gradient(rgba(var(--acc-rgb), .075) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--acc-rgb), .075) 1px, transparent 1px),
		linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px);
	background-size: 48px 48px, 48px 48px, 100% 4px;
	animation: fx-grid-drift 18s linear infinite;
	will-change: transform;
}
.grid-bg::after {   /* langsamer roter Scan-Balken */
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 140px;
	background: linear-gradient(to bottom, transparent, rgba(var(--acc-rgb), .07), transparent);
	animation: fx-scan 11s linear infinite; will-change: transform;
}
@keyframes fx-grid-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 48px, 0); } }
@keyframes fx-scan { from { transform: translate3d(0, -160px, 0); } to { transform: translate3d(0, 110vh, 0); } }
.scanlines { background: repeating-linear-gradient(to bottom, rgba(255,255,255,.022) 0 1px, transparent 1px 3px); opacity: .8; }
.scanlines::after { display: none; }
#fx-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .9; }
body.no-anim .grid-bg::before, body.no-anim .grid-bg::after, body.fx-paused .grid-bg::before, body.fx-paused .grid-bg::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .grid-bg::after { display: none; } }

/* ---------- Typo ---------- */
h1, h2, h3, h4, .glitch, .panel-head h2, .sec-title, .tele-head h2, .side-brand .lb, .fx-h { font-family: var(--head); }
.tag { color: var(--acc); font-size: .74rem; letter-spacing: .22em; }
.tag .sep, .foot .sep { color: var(--acc); }
.blink { color: var(--acc); }
.conn { color: var(--yellow); } .conn.live { color: var(--green); } .conn.off { color: var(--red); }
.glitch { color: #fff; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.glitch::before { color: var(--acc); mix-blend-mode: normal; opacity: .9; }
.glitch::after  { color: #fff; mix-blend-mode: normal; opacity: .55; }
.sub { color: var(--muted); font-size: clamp(.92rem, 2.2vw, 1.08rem); }
.sub .cursor { color: var(--acc); }
.fx-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--acc); }

/* ---------- Panels: scharfe Ecken, dünne rote Linie, Eck-Klammern ---------- */
.panel, body.dash .panel {
	background: var(--panel); border: 1px solid var(--line); box-shadow: none; backdrop-filter: none;
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.panel::before { width: 132px; height: 2px; background: var(--acc); }
.panel::after { content: ""; position: absolute; right: 0; top: 22px; width: 1px; height: 46px; background: var(--acc); opacity: .8; }
.panel.guest { border-color: var(--line); box-shadow: none; }
.panel.guest::before { background: var(--acc); }
.panel-head { border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
.panel-head h2, .guest .panel-head h2 { color: #fff; font-size: 1.15rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.meta { color: var(--muted); font-size: .66rem; letter-spacing: .2em; }
.sec-title { color: var(--acc); font-family: var(--mono); font-size: .68rem; letter-spacing: .26em; font-weight: 400; }
.welcome { color: var(--text); }

/* ---------- Kopfzeile / Buttons ---------- */
.topnav { font-family: var(--mono); }
.who { color: var(--muted); } .who b { color: #fff; }
.navbtn, button.navbtn {
	color: var(--text); border: 1px solid var(--line2); background: rgba(10, 10, 11, .6);
	clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
	font-family: var(--mono); letter-spacing: .16em;
}
.navbtn:hover, .navbtn:focus-visible, button.navbtn:hover { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
#nav-admin { color: var(--acc); border-color: var(--acc); }
#nav-admin:hover, #nav-admin:focus-visible { background: var(--acc); color: var(--acc-ink); }
.acc-actions .navbtn:not(.ghost) { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.acc-badge { background: var(--acc); color: var(--acc-ink); border-radius: 0; clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%); }
.acc-tag { color: var(--acc2); }
.hamburger { border-color: var(--line2); color: #fff; }
.hamburger span { box-shadow: none; }
.hamburger:hover, .hamburger:focus-visible { background: rgba(var(--acc-rgb), .2); border-color: var(--acc); }
.tele-btn .tele-frame { stroke: #fff; opacity: .45; }
.tele-btn .tele-pulse { stroke: var(--acc); filter: none; }
.tele-btn:hover, .tele-btn:focus-visible { background: rgba(var(--acc-rgb), .14); box-shadow: none; }
.tele-btn:hover .tele-pulse, .tele-btn.on .tele-pulse { stroke: #fff; filter: none; }
.tele-btn.on { background: var(--acc); border-color: var(--acc); box-shadow: none; }
body:not(.no-anim) .tele-btn.on .tele-pulse { animation: none; }

/* ---------- Hero ---------- */
.brand-hero { gap: clamp(1rem, 3vw, 2rem); padding-bottom: .4rem; border-bottom: 1px solid var(--line); position: relative; }
.brand-hero::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 38%; height: 2px; background: linear-gradient(90deg, var(--acc), transparent); }
.hero-mark { display: grid; justify-items: center; gap: .35rem; flex: none; }
.hero-logo { width: clamp(96px, 14vw, 150px); height: auto; filter: none; }
.brand-hero .glitch { font-size: clamp(2rem, 6vw, 3.9rem); }
.hero-wordmark { display: block; font-family: var(--head); font-weight: 700; font-size: .9rem; letter-spacing: .5em; color: var(--acc); margin-top: .2rem; }
@media (max-width: 600px) { .hero-logo { width: 110px; margin: 0; } .brand-hero { flex-direction: row; align-items: center; } }
@media (max-width: 420px) { .hero-logo { width: 84px; } .brand-hero .glitch { font-size: 1.9rem; } }

/* ---------- Seitenleiste ---------- */
.side {
	background: linear-gradient(180deg, #0e0f11, #0a0a0b); border-right: 1px solid var(--line);
	box-shadow: 6px 0 30px rgba(0, 0, 0, .55); backdrop-filter: none;
}
body[data-theme="polizei"] .side, body[data-accent="polizei"] .side { background: linear-gradient(180deg, #0a1428, #060c1a); }
.side::after { width: 2px; height: 120px; background: var(--acc); top: 0; right: -1px; }
.side-head { border-bottom: 1px solid var(--line); }
.side-brand img { filter: none; width: 38px; height: 38px; }
.side-brand .lb { color: var(--acc); font-weight: 700; font-size: 1.05rem; letter-spacing: .2em; }
.side-toggle, .side-close { color: #fff; border-color: var(--line2); }
.side-toggle:hover, .side-toggle:focus-visible, .side-close:hover, .side-close:focus-visible { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.side-nav { scrollbar-color: rgba(var(--acc-rgb), .4) transparent; }
.sg-h { color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .24em; }
.sg-h .ic { color: var(--acc); }
.sg-h:hover, .sg-h:focus-visible { background: rgba(var(--acc-rgb), .07); color: #fff; }
.si { color: var(--text); font-family: var(--head); font-weight: 600; font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; }
.si .ic { color: #fff; }
.si:hover, .si:focus-visible, .si[aria-current="page"] { background: rgba(var(--acc-rgb), .12); border-left-color: var(--acc); color: #fff; }
.si:hover .ic, .si:focus-visible .ic, .si[aria-current="page"] .ic { color: var(--acc); }
.si .sdot { opacity: .5; }
.si.up .sdot { background: var(--green); box-shadow: 0 0 0 2px rgba(34, 211, 107, .18); }
.si.down .sdot { background: var(--red); box-shadow: 0 0 0 2px rgba(255, 59, 59, .25); }
.side-foot { border-top: 1px solid var(--line); color: var(--acc); font-size: .62rem; letter-spacing: .24em; }
.side-scrim { background: rgba(0, 0, 0, .7); }
.badge.vpn, .svc-go.vpn { color: var(--yellow); border-color: rgba(255, 176, 0, .55); }

/* Linien-Icons (fox-icons.js) */
.fx-ic { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic .fx-ic, .si .ic .fx-ic, .sg-h .ic .fx-ic { width: 20px; height: 20px; margin: 0 auto; }
.si .ic, .sg-h .ic { display: grid; place-items: center; }
body.rail .si .ic .fx-ic { width: 22px; height: 22px; }

/* ---------- Dienst-Kacheln (Mockup: Icon oben, Name, Status, Öffnen-Button) ---------- */
.svc-list { grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: .9rem; }
.tile.svc {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: .5rem;
	padding: 1.15rem .8rem .95rem; min-height: 196px;
	background: linear-gradient(180deg, rgba(23, 24, 27, .95), rgba(14, 15, 17, .95)); border: 1px solid var(--line2);
	clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
	transition: border-color .2s, background .2s, transform .2s;
}
.tile.svc::before, .tile.svc::after { content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none; border: 0 solid var(--acc); opacity: .85; }
.tile.svc::before { top: 7px; left: 7px; border-top-width: 2px; border-left-width: 2px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.tile.svc::after { bottom: 7px; right: 7px; border-bottom-width: 2px; border-right-width: 2px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.tile.svc:hover, .tile.svc:focus-within { border-color: rgba(var(--acc-rgb), .75); background: linear-gradient(180deg, rgba(var(--acc-rgb), .1), rgba(14, 15, 17, .96)); }
.tile.svc .svc-ic { width: 54px; height: 54px; font-size: 2rem; line-height: 54px; color: #fff; filter: none; flex: none; transition: color .2s; }
.tile.svc:hover .svc-ic, .tile.svc:focus-within .svc-ic { color: var(--acc); }
.tile.svc .svc-body { display: grid; justify-items: center; gap: .3rem; min-width: 0; width: 100%; }
.tile.svc .name { font-family: var(--head); font-weight: 700; font-size: 1.02rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; white-space: normal; line-height: 1.15; }
.tile.svc .svc-sub { display: block; margin-top: .15rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; font-weight: 400; }
.tile.svc .st { justify-content: center; font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; color: var(--muted); flex-wrap: wrap; }
.tile.svc .st-emoji { display: none; }
.tile.svc .st::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.tile.svc.up .st::before { background: var(--green); box-shadow: 0 0 0 3px rgba(34, 211, 107, .16); }
.tile.svc.down .st::before { background: var(--red); box-shadow: 0 0 0 3px rgba(255, 59, 59, .2); }
.tile.up, .tile.svc.up { border-color: var(--line2); }
.tile.svc.down { border-color: rgba(255, 59, 59, .55); }
.tile.up .st, .tile.svc.up .st { color: #c9cbd0; }
.tile.down .st { color: var(--red); }
.tile.svc .st-akt { color: var(--muted); }
.tile.svc .st-akt.on { color: #fff; }
.tile.svc .st-akt.on::first-letter { color: var(--acc); }
.svc-go {
	margin-top: auto; min-width: 9.5em; text-align: center; color: var(--acc); border: 1px solid var(--acc); background: rgba(var(--acc-rgb), .06);
	font-family: var(--head); font-weight: 700; font-size: .72rem; letter-spacing: .16em; padding: .42rem .7rem;
	clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
a.svc-go:hover, a.svc-go:focus-visible { background: var(--acc); color: var(--acc-ink); }
.svc-go.none { color: var(--muted); border-color: var(--line2); background: transparent; }
.svc-sum { color: var(--green); } .svc-sum.bad { color: var(--red); }
/* Startseite: Anzeige-Modus Symbol (kompakt) */
.tile.svc[data-mode="icon"] { min-height: 0; padding: .9rem .6rem .8rem; }
.tile.svc[data-mode="icon"] .st, .tile.svc[data-mode="icon"] .svc-live, .tile.svc[data-mode="icon"] .svc-sub { display: none; }
.tile.svc[data-mode="icon"] .svc-go { min-width: 0; font-size: .64rem; }
.tile.svc .svc-live { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; color: #d9dbe0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; justify-content: center; }
.tile.svc .svc-live b { color: var(--acc); font-weight: 700; }
.tile.svc .svc-mode { position: absolute; top: 6px; right: 6px; z-index: 2; font: inherit; font-size: .58rem; letter-spacing: .12em; padding: .15rem .35rem; cursor: pointer;
	color: var(--muted); background: var(--bg); border: 1px solid var(--line2); }
.tile.svc .svc-mode:hover, .tile.svc .svc-mode:focus-visible { color: var(--acc-ink); background: var(--acc); border-color: var(--acc); outline: none; }

@media (max-width: 560px) {
	.svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
	.tile.svc { min-height: 168px; padding: .95rem .5rem .75rem; --cut: 11px; }
	.tile.svc .svc-ic { width: 42px; height: 42px; line-height: 42px; font-size: 1.6rem; }
	.tile.svc .name { font-size: .86rem; letter-spacing: .08em; }
	.svc-go { min-width: 0; width: 100%; font-size: .64rem; padding: .4rem .3rem; }
}

/* ---------- Gerade aktiv (Admin-Karte) ---------- */
.aktiv-card { background: var(--panel); border: 1px solid var(--line2); box-shadow: none; }
.aktiv-card::before { background: var(--acc); width: 96px; }
.aktiv-card > summary:hover, .aktiv-card > summary:focus-visible { background: rgba(var(--acc-rgb), .08); }
.aktiv-card .ak-ttl { color: #fff; font-family: var(--head); font-weight: 700; letter-spacing: .2em; font-size: .8rem; }
.aktiv-card .ak-chev { color: var(--acc); }
.aktiv-card.live .ak-pulse { background: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .2); }
@keyframes ak-pulse { 50% { box-shadow: 0 0 0 1px rgba(var(--acc-rgb), .2); opacity: .6; } }
.aktiv-card .ak-body { border-top-color: var(--line); }
.aktiv-card .ak-h { color: var(--acc); font-family: var(--mono); }
.aktiv-card .ak-row { background: rgba(255, 255, 255, .03); border-left-color: var(--line2); }
.aktiv-card .ak-row.play { border-left-color: var(--acc); }
.aktiv-card .ak-badge.tc { color: var(--acc2); border-color: rgba(var(--acc-rgb), .6); }
.aktiv-card .ak-bar i { background: var(--acc); box-shadow: none; }

/* ---------- Telemetrie ---------- */
.tele { background: rgba(12, 13, 15, .94); border: 1px solid var(--line2); box-shadow: 0 12px 40px rgba(0, 0, 0, .6); backdrop-filter: none; }
.tele::before { background: var(--acc); width: 90px; }
.tele-head h2 { color: #fff; font-weight: 700; }
.tele-close:hover, .tele-close:focus-visible { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.gauge .track { stroke: rgba(255, 255, 255, .1); }
.gauge .bar { --c: var(--acc); filter: none; }
.gauge.warn .bar { --c: var(--yellow); } .gauge.crit .bar { --c: var(--red); }
.gauge-val { color: #fff; }
.spark .line, .ro.rx .spark .line, .ro.tx .spark .line, [data-hist="mem"] .spark .line { stroke: var(--acc); filter: none; }
.spark .area, .ro.rx .spark .area, .ro.tx .spark .area, [data-hist="mem"] .spark .area { fill: rgba(var(--acc-rgb), .12); }
.ro.tx .spark .line { stroke: #fff; } .ro.tx .spark .area { fill: rgba(255, 255, 255, .06); }
.ro, .ro.rx, .ro.tx, .ro.plain { background: rgba(255, 255, 255, .03); border-left-color: var(--acc); }
.ro.tx, .ro.plain { border-left-color: var(--line2); }
.tele::after { background: rgba(12, 13, 15, .96) !important; border-color: var(--line2) !important; }

/* ---------- Dialoge / Formulare ---------- */
.acc-dlg, .dlg {
	background: var(--bg2); border: 1px solid var(--acc); box-shadow: 0 20px 60px rgba(0, 0, 0, .7); color: var(--text);
	clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.acc-dlg::backdrop, .dlg::backdrop { background: rgba(0, 0, 0, .78); }
.acc-form h2, .dlg h2 { color: #fff; font-family: var(--head); font-weight: 700; letter-spacing: .12em; }
.acc-form input, .acc-form textarea, input, select, textarea { border-color: var(--line2); background: rgba(0, 0, 0, .45); border-radius: 0; }
.acc-form input:focus, .acc-form textarea:focus, input:focus, select:focus, textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--acc); }
.acc-link:hover { color: var(--acc); }
.acc-msg.ok { color: var(--green); } .acc-msg.err { color: var(--red); }

/* ---------- Admin-Seiten ---------- */
.btn { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-family: var(--head); }
.btn:hover, .btn:focus-visible { box-shadow: none; filter: brightness(1.12); }
.btn.ghost { background: transparent; color: var(--acc); }
.topnav .navbtn.active { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.qbtn { background: rgba(255, 255, 255, .03); border-left-color: var(--acc); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.qbtn:hover, .qbtn:focus-visible { background: rgba(var(--acc-rgb), .1); }
.qbtn b { color: #fff; font-family: var(--head); letter-spacing: .1em; }
.tbl th { border-bottom-color: rgba(var(--acc-rgb), .45); }
.tbl tr:hover td { background: rgba(var(--acc-rgb), .05); }
.tbl .you { color: var(--acc); }
.form h3, .grp h3 { color: #fff; font-family: var(--head); }
.grp { border-top-color: var(--acc); background: rgba(255, 255, 255, .03); }
.mv { color: #fff; border-color: var(--line2); }
.toast { background: var(--bg2); box-shadow: none; }
.swatch:has(input:checked) { border-color: var(--acc); }
.hero.small .glitch { font-size: clamp(1.7rem, 5vw, 2.8rem); }
code { color: var(--acc2); }
.secret { border-color: var(--acc); }
.maint { background: repeating-linear-gradient(135deg, var(--yellow) 0 18px, #c98a00 18px 36px); }

/* ---------- Footer ---------- */
.foot { color: var(--muted); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; border-top: 1px solid var(--line); padding-top: 1rem; }
.foot .fx-intro-toggle { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted); background: none; border: 0; border-bottom: 1px dotted var(--muted); cursor: pointer; padding: 0; }
.foot .fx-intro-toggle:hover, .foot .fx-intro-toggle:focus-visible { color: var(--acc); border-color: var(--acc); outline: none; }

/* ---------- Polizei: Lichtleiste (blau/rot) oben ---------- */
body[data-theme="polizei"]::before, body[data-accent="polizei"]:not([data-theme])::before {
	content: ""; position: fixed; z-index: 80; top: 0; left: 0; right: 0; height: 3px; pointer-events: none;
	background: linear-gradient(90deg, #1e6bff 0 46%, transparent 46% 54%, #ff2a3d 54% 100%);
	opacity: .85; animation: fx-lightbar 2.4s steps(1) infinite;
}
@keyframes fx-lightbar { 0%, 100% { opacity: .85; } 50% { opacity: .35; } }
body[data-theme="polizei"] .tile.svc::before, body[data-theme="polizei"] .tile.svc::after { border-color: var(--acc2); }

/* ================================================================
   Intro-Overlay (fx.js) – reine SVG/CSS-Animation, ~3 s, Überspringen per Klick/Taste
   ================================================================ */
.fx-intro {
	position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; overflow: hidden; cursor: pointer;
	background: radial-gradient(ellipse at 50% 45%, #140405 0%, #070708 60%, #000 100%); color: #fff;
	transition: opacity .55s ease, visibility .55s;
}
body[data-theme="polizei"] .fx-intro { background: radial-gradient(ellipse at 50% 45%, #061433 0%, #040914 60%, #000 100%); }
.fx-intro.out { opacity: 0; visibility: hidden; }
.fx-intro::before { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); }
.fx-intro::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(rgba(var(--acc-rgb), .09) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--acc-rgb), .09) 1px, transparent 1px);
	background-size: 56px 56px; mask-image: radial-gradient(circle at 50% 45%, #000 0, transparent 70%); animation: fx-intro-grid 3.2s ease-out both; }
@keyframes fx-intro-grid { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: none; } }
.fx-intro-core { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.1rem; padding: 1rem; text-align: center; }
.fx-intro-emblem { width: min(46vw, 230px); height: auto; overflow: visible; }
.fx-intro-emblem .ring { fill: none; stroke: var(--acc); stroke-width: 13; stroke-dasharray: 1440; stroke-dashoffset: 1440; animation: fx-draw 1.1s cubic-bezier(.6,.05,.3,1) .1s forwards; }
.fx-intro-emblem .head { fill: transparent; stroke: var(--acc); stroke-width: 4; stroke-linejoin: miter; stroke-dasharray: 2200; stroke-dashoffset: 2200;
	animation: fx-draw 1.15s cubic-bezier(.6,.05,.3,1) .35s forwards, fx-fill .35s ease-out 1.35s forwards; }
.fx-intro-emblem .cut { fill: #070708; opacity: 0; animation: fx-show .2s steps(2) 1.5s forwards; }
.fx-intro-emblem .facet { fill: none; stroke: #070708; stroke-width: 7; opacity: 0; animation: fx-show .2s steps(2) 1.55s forwards; }
.fx-intro-emblem .glitch-g { animation: fx-glitch 2.9s steps(1) both; }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-fill { to { fill: var(--acc); } }
@keyframes fx-show { to { opacity: 1; } }
@keyframes fx-glitch {
	0%, 54%, 60%, 70%, 100% { transform: none; filter: none; }
	55% { transform: translate(-7px, 2px) skewX(-8deg); filter: drop-shadow(5px 0 0 rgba(255,255,255,.6)); }
	57% { transform: translate(6px, -3px); filter: drop-shadow(-6px 0 0 rgba(var(--acc-rgb), .9)); }
	66% { transform: translate(-3px, 0) scaleY(1.04); }
}
.fx-intro-title { font-family: var(--head); font-weight: 700; font-size: clamp(1.7rem, 7vw, 3.2rem); letter-spacing: .32em; color: var(--acc); margin-right: -.32em;
	opacity: 0; animation: fx-show .01s linear 1.45s forwards; position: relative; }
.fx-intro-title.glitching { animation: fx-show .01s linear 1.45s forwards, fx-title-glitch .5s steps(2) 1.5s 1; }
@keyframes fx-title-glitch { 0% { clip-path: inset(0 0 55% 0); transform: translate(-6px, 0); } 50% { clip-path: inset(45% 0 0 0); transform: translate(5px, 0); } 100% { clip-path: none; transform: none; } }
.fx-intro-type { min-height: 1.4em; font-family: var(--mono); font-size: clamp(.7rem, 2.6vw, .9rem); letter-spacing: .3em; color: #d9dbe0; white-space: pre; }
.fx-intro-type::after { content: "▮"; color: var(--acc); margin-left: .2em; animation: blink 1s steps(1) infinite; }
.fx-intro-bar { width: min(62vw, 300px); height: 2px; background: rgba(255,255,255,.1); position: relative; overflow: hidden; }
.fx-intro-bar i { position: absolute; inset: 0; background: var(--acc); transform-origin: left; transform: scaleX(0); animation: fx-bar 2.6s linear .2s forwards; }
@keyframes fx-bar { to { transform: scaleX(1); } }
.fx-intro-ui { position: absolute; z-index: 2; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .6rem 1rem; }
.fx-intro-skip { font-family: var(--head); font-weight: 700; font-size: .78rem; letter-spacing: .2em; color: #fff; background: rgba(0,0,0,.4); border: 1px solid var(--acc); padding: .5rem 1rem; cursor: pointer;
	clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.fx-intro-skip:hover, .fx-intro-skip:focus-visible { background: var(--acc); color: var(--acc-ink); outline: none; }
.fx-intro-never { display: flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--muted); cursor: pointer; text-transform: none; }
.fx-intro-never input { width: 1rem; height: 1rem; accent-color: var(--acc); }
.fx-intro-corner { position: absolute; z-index: 1; left: max(1rem, env(safe-area-inset-left)); top: max(1rem, env(safe-area-inset-top)); font-family: var(--mono); font-size: .62rem; letter-spacing: .26em; color: var(--acc); opacity: .85; }
.fx-intro.static .ring, .fx-intro.static .head, .fx-intro.static .cut, .fx-intro.static .facet, .fx-intro.static .fx-intro-title, .fx-intro.static .fx-intro-bar i, .fx-intro.static .glitch-g, .fx-intro.static::after { animation: none !important; stroke-dashoffset: 0; opacity: 1; transform: none; }
.fx-intro.static .head { fill: var(--acc); }