/* ================================================================
   Foxhole – Design-Pakete (2026-10-03): Konzern · Edgerunner · Streetgang · Nomad · Polizei
   body[data-theme] = Wahl des Benutzers (Design-Karte auf der Startseite), body[data-bg] = Hintergrund (fx-bg.js).
   Ohne Wahl gilt der Seiten-Akzent aus den Admin-Einstellungen (body[data-accent]). Keine echten Logos/Marken.
   ================================================================ */
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;
}
/* Edgerunner: Neon-Magenta + Cyan + Gelb, violette Nacht */
body[data-theme="magenta"] {
	--acc: #ff2bd6; --acc2: #00f0ff; --acc-rgb: 255, 43, 214; --acc-ink: #12021a; --yellow: #f5f000;
	--bg: #0b0614; --bg2: #140a22; --bg3: #1c0f2e; --panel: rgba(20, 10, 34, .88);
	--line: rgba(255, 43, 214, .16); --line2: rgba(0, 240, 255, .28); --muted: #a99bc4;
}
body[data-theme="magenta"] .start-title, body[data-theme="magenta"] .brand-hero .glitch, body[data-theme="magenta"] .fx-intro-title {
	text-shadow: 2px 0 0 rgba(0, 240, 255, .55), -2px 0 0 rgba(255, 43, 214, .55) !important; }
body[data-theme="magenta"] .tile.svc::before, body[data-theme="magenta"] .tile.svc::after { border-color: var(--acc2); }
body[data-theme="magenta"] .panel::after { background: var(--acc2); }
body[data-theme="magenta"] .side { background: linear-gradient(180deg, #170a28, #0b0614); }
body[data-theme="magenta"] .fx-intro { background: radial-gradient(ellipse at 50% 45%, #2a0838 0%, #0b0614 60%, #000 100%); }
/* Streetgang: Säuregrün + Orange, Beton, Warnband-Kanten */
body[data-theme="green"] {
	--acc: #c6ff00; --acc2: #ff6a00; --acc-rgb: 198, 255, 0; --acc-ink: #0c0d08; --yellow: #ff6a00;
	--bg: #0c0d08; --bg2: #14160e; --bg3: #1b1e13; --panel: rgba(20, 22, 14, .9);
	--line: rgba(198, 255, 0, .12); --line2: rgba(255, 255, 255, .2); --muted: #a2a68e;
}
body[data-theme="green"] .panel::before { height: 4px; width: 160px; background: repeating-linear-gradient(-45deg, var(--acc) 0 10px, #0c0d08 10px 20px); }
body[data-theme="green"] .start-title, body[data-theme="green"] .brand-hero .glitch { transform: skewX(-6deg); transform-origin: left; }
body[data-theme="green"] .start-name, body[data-theme="green"] .fx-card-h .ic { color: var(--acc2); }
body[data-theme="green"] .side { background: linear-gradient(180deg, #15170e, #0c0d08); }
body[data-theme="green"] .fx-intro { background: radial-gradient(ellipse at 50% 45%, #1d2408 0%, #0c0d08 60%, #000 100%); }
/* Nomad: Wüstenabend, Bernstein + Sand, Rost */
body[data-theme="amber"] {
	--acc: #ff8a2a; --acc2: #d9b38c; --acc-rgb: 255, 138, 42; --acc-ink: #160b02; --yellow: #ffb347;
	--bg: #120c07; --bg2: #1b130b; --bg3: #241a10; --panel: rgba(27, 19, 11, .9);
	--line: rgba(255, 190, 130, .13); --line2: rgba(217, 179, 140, .26); --muted: #ae9c84;
}
body[data-theme="amber"] .panel { border-color: rgba(217, 179, 140, .2); }
body[data-theme="amber"] .tile.svc::before, body[data-theme="amber"] .tile.svc::after { border-color: var(--acc2); }
body[data-theme="amber"] .side { background: linear-gradient(180deg, #1d140b, #120c07); }
body[data-theme="amber"] .fx-intro { background: radial-gradient(ellipse at 50% 45%, #2b1707 0%, #120c07 60%, #000 100%); }
/* Polizei: Variablen + Seitenleiste stehen in theme-foxhole.css; Lichtleiste kommt jetzt vom Hintergrund „Lichtbalken“ */
body[data-theme="polizei"][data-bg]::before { display: none; }
body[data-theme="polizei"] .fx-label, body[data-theme="polizei"] .sec-title { color: var(--acc2); }

/* Hintergrund-Ebenen: CSS-Raster nur bei Konzern/Daten voll, sonst zurückhaltend; „Aus“ = ruhiges Raster ohne Bewegung */
body[data-bg]:not([data-bg="daten"]):not([data-bg="raster"]) .grid-bg { opacity: .35; }
body[data-bg]:not([data-bg="daten"]) .grid-bg::after { display: none; }
body[data-bg="aus"] .grid-bg::before { animation: none; }
body[data-theme="magenta"] .scanlines, body[data-theme="amber"] .scanlines { opacity: .45; }

/* ---------------- Design-Karte (Startseite) ---------------- */
.fx-w-design { grid-column: 1 / -1; display: grid; gap: .75rem; }
.fx-themes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.fx-theme { position: relative; display: grid; gap: .35rem; justify-items: start; padding: .6rem .6rem .55rem; min-height: 4.4rem; cursor: pointer; text-align: left;
	color: #fff; font-family: var(--head); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, .16); background: var(--sw-bg); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.fx-theme .sw { display: flex; gap: 3px; } .fx-theme .sw i { width: 18px; height: 6px; display: block; }
.fx-theme[aria-pressed="true"] { border-color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.fx-theme[aria-pressed="true"]::after { content: "✓"; position: absolute; right: .55rem; bottom: .4rem; font-size: .9rem; }
.fx-theme:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.fx-theme[data-t="foxhole"] { --sw-bg: linear-gradient(135deg, #111214, #0a0a0b); } .fx-theme[data-t="foxhole"] .sw i:nth-child(1) { background: #ff3b30; } .fx-theme[data-t="foxhole"] .sw i:nth-child(2) { background: #ff8a80; } .fx-theme[data-t="foxhole"] .sw i:nth-child(3) { background: #ececee; }   /* fox-design-20261012 */
.fx-theme[data-t="magenta"] { --sw-bg: linear-gradient(135deg, #111214, #0a0a0b); } .fx-theme[data-t="magenta"] .sw i:nth-child(1) { background: #ff2d6f; } .fx-theme[data-t="magenta"] .sw i:nth-child(2) { background: #ff7aa2; } .fx-theme[data-t="magenta"] .sw i:nth-child(3) { background: #ececee; }   /* fox-design-20261012 */
.fx-theme[data-t="green"] { --sw-bg: linear-gradient(135deg, #111214, #0a0a0b); } .fx-theme[data-t="green"] .sw i:nth-child(1) { background: #19d26b; } .fx-theme[data-t="green"] .sw i:nth-child(2) { background: #7cf2ae; } .fx-theme[data-t="green"] .sw i:nth-child(3) { background: #ececee; }   /* fox-design-20261012 */
.fx-theme[data-t="amber"] { --sw-bg: linear-gradient(135deg, #111214, #0a0a0b); } .fx-theme[data-t="amber"] .sw i:nth-child(1) { background: #ffb000; } .fx-theme[data-t="amber"] .sw i:nth-child(2) { background: #ffd36b; } .fx-theme[data-t="amber"] .sw i:nth-child(3) { background: #ececee; }   /* fox-design-20261012 */
.fx-theme[data-t="polizei"] { --sw-bg: linear-gradient(135deg, #0a1328, #050a17); } .fx-theme[data-t="polizei"] .sw i:nth-child(1) { background: #4d8bff; } .fx-theme[data-t="polizei"] .sw i:nth-child(2) { background: #36d6ff; } .fx-theme[data-t="polizei"] .sw i:nth-child(3) { background: #e6eeff; }   /* fox-design-20261012 */
.fx-bgs { display: flex; flex-wrap: wrap; gap: .4rem; }
.fx-bgs button { font: inherit; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; padding: .5rem .8rem; min-height: 2.5rem; color: var(--text);
	background: transparent; border: 1px solid var(--line2); cursor: pointer; }
.fx-bgs button[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
.fx-bgs button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.fx-design-note { color: var(--muted); font-size: .68rem; }
@media (max-width: 899px) { .fx-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .fx-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fx-bgs button { flex: 1 1 40%; } }

/* Fuchs-Emblem in Paketfarbe (Masken-SVG; Bildpunkte des <img> werden ausgeblendet, Hintergrund = Akzent) */
body[data-theme]:not([data-theme="foxhole"]) img[src="/brand/foxhole-emblem.svg"] {
	background: linear-gradient(160deg, var(--acc), var(--acc) 55%, var(--acc2)); object-position: -99999px 0;
	-webkit-mask: url("/brand/foxhole-emblem-mask.svg") center / contain no-repeat; mask: url("/brand/foxhole-emblem-mask.svg") center / contain no-repeat; }
body[data-theme="polizei"] img[src="/brand/foxhole-emblem.svg"] { background: linear-gradient(160deg, #1e6bff, #1e6bff 50%, #36d6ff); }

/* Phase 2 Teil 3: "Seiten-Standard" = keine eigene Wahl (Seiten-Akzent aus den Admin-Einstellungen) */
.fx-theme[data-t="seite"] { --sw-bg: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px), linear-gradient(135deg, #17181b, #0a0a0b); }
.fx-theme[data-t="seite"] .sw i:nth-child(1) { background: #ececee; } .fx-theme[data-t="seite"] .sw i:nth-child(2) { background: #8e9198; } .fx-theme[data-t="seite"] .sw i:nth-child(3) { background: #4a4d55; }
@media (max-width: 1180px) and (min-width: 900px) { .fx-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }