/* ================================================================
   fox-design-20261012 – FOX-Designsystem 1.0.0 als Basis für Portal/Website
   Lädt NACH allen anderen Stylesheets. Farben/Schriften/3D kommen aus /fox/tokens.css (--fox-*),
   gesteuert über <html data-fox-theme="foxhole|magenta|amber|gruen|polizei"> (fox-boot.js + fx.js).
   Rückbau: <link …/fox/tokens.css> + <link …/fox/fox-portal.css> + <script …/fox/fox-boot.js> aus den HTML-Köpfen entfernen.
   ================================================================ */
@font-face { font-family: Orbitron; font-weight: 700; font-display: swap; src: url("/fox/fonts/orbitron-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: Orbitron; font-weight: 900; font-display: swap; src: url("/fox/fonts/orbitron-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: Rajdhani; font-weight: 500; font-display: swap; src: url("/fox/fonts/rajdhani-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: Rajdhani; font-weight: 600; font-display: swap; src: url("/fox/fonts/rajdhani-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: Rajdhani; font-weight: 700; font-display: swap; src: url("/fox/fonts/rajdhani-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url("/fox/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 400; font-style: italic; font-display: swap; src: url("/fox/fonts/inter-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url("/fox/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url("/fox/fonts/inter-latin-700-normal.woff2") format("woff2"); }

/* Shop-Name für die Tiefe (README §8) */
:root { --pk187-depth: var(--fox-depth); }

/* --- Portal-Variablen auf FOX-Tokens abbilden (gilt für Benutzer-Wahl UND Seiten-Akzent) --- */
html[data-fox-theme] body {
	--acc: var(--fox-accent); --acc2: var(--fox-accent2); --acc-rgb: var(--fox-accent-rgb); --acc-ink: var(--fox-on-accent);
	--bg: var(--fox-bg); --bg2: var(--fox-bg2); --panel: var(--fox-panel);
	--text: var(--fox-text); --muted: var(--fox-muted);
	--line: var(--fox-line); --line2: rgba(var(--fox-accent-rgb), .4);
	--green: var(--fox-success); --red: var(--fox-danger); --yellow: var(--fox-warning);
	--cyan: var(--fox-accent); --magenta: var(--fox-accent2);
	--head: var(--fox-font-ui);
}
html[data-fox-theme] body { --bg3: #17181b; }
html[data-fox-theme="polizei"] body { --bg3: #0f1c38; }
html[data-fox-theme] { background: var(--fox-bg); }

/* --- Typografie (README §2): Body Inter, UI Rajdhani, große Titel Orbitron --- */
html[data-fox-theme] body { font-family: var(--fox-font-body); }
html[data-fox-theme] body :is(button, .btn, .navbtn, .fx-mini, .tag, label, nav, .fx-card-h, .sec-title, .fx-label, th) { font-family: var(--fox-font-ui); }
html[data-fox-theme] body :is(code, kbd, pre, .mono, .ro) { font-family: var(--fox-font-mono); }
html[data-fox-theme] body :is(h1, .start-title, .brand-hero .glitch, .fx-intro-title, .welcome h1) {
	font-family: var(--fox-font-head); font-weight: 900; letter-spacing: .02em;
	text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 8px rgba(var(--fox-accent-rgb), .55), 0 0 22px rgba(var(--fox-accent-rgb), .25) !important; }
html[data-fox-theme] body :is(h2, h3) { font-family: var(--fox-font-ui); font-weight: 700; letter-spacing: .06em; }

/* --- 3D-Tiefe (README §4): Karten, Panels, Kacheln --- */
html[data-fox-theme] body :is(.panel, .fx-card, .tile, .tele, .box, .card) {
	background-color: var(--fox-panel); background-image: var(--fox-gradient);
	border: 1px solid var(--fox-line); box-shadow: var(--fox-shadow);
	transition: transform var(--fox-dur-base) var(--fox-ease), box-shadow var(--fox-dur-base) var(--fox-ease); }
@media (hover: hover) {
	html[data-fox-theme] body :is(a.tile, .tile.svc, .tile[href], .fx-card.is-interactive):hover { transform: var(--fox-lift); box-shadow: var(--fox-shadow-hover); }
}
html[data-fox-theme] body .side { background: var(--fox-bg2); background-image: var(--fox-gradient); box-shadow: var(--fox-hi), 6px 0 30px rgba(0, 0, 0, .55); }

/* --- Buttons (README §5) --- */
html[data-fox-theme] body :is(button.btn, a.btn, .btn, .fx-mini, .navbtn, button.primary, .fx-bgs button) {
	border-radius: var(--fox-radius-sm); box-shadow: var(--fox-btn-shadow);
	transition: transform var(--fox-dur-fast), box-shadow var(--fox-dur-base); }
html[data-fox-theme] body :is(button.btn, a.btn, .btn, .fx-mini, .navbtn, button.primary, .fx-bgs button):hover { box-shadow: var(--fox-btn-shadow-hover); }
html[data-fox-theme] body :is(button.btn, a.btn, .btn, .fx-mini, .navbtn, button.primary, .fx-bgs button):active { transform: translateY(1px); box-shadow: var(--fox-btn-shadow-active); }
html[data-fox-theme] body :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--fox-accent); outline-offset: 3px; }
html[data-fox-theme] body :is(button, .btn)[disabled] { opacity: .45; box-shadow: none; transform: none; }

/* --- Eingabefelder: vertieft, Fokus = Akzentrahmen + Glühen --- */
html[data-fox-theme] body :is(input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="number"], input[type="url"], input[type="tel"], select, textarea) {
	background: var(--fox-bg2); color: var(--fox-text); border: 1px solid rgba(var(--fox-accent-rgb), .35); border-radius: var(--fox-radius-sm);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45), inset 0 -1px 0 rgba(255, 255, 255, .04); }
html[data-fox-theme] body :is(input, select, textarea):focus { outline: none; border-color: var(--fox-accent);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45), 0 0 0 1px var(--fox-accent), 0 0 10px rgba(var(--fox-accent-rgb), .3); }

/* --- Pop-ups/Dialoge: abgedunkelter Hintergrund Schwarz 70 % + 4 px Blur, Dialog mit Akzentrahmen --- */
html[data-fox-theme] body :is(.dlg, .acc-dlg)::backdrop { background: var(--fox-backdrop); -webkit-backdrop-filter: blur(var(--fox-backdrop-blur)); backdrop-filter: blur(var(--fox-backdrop-blur)); }
html[data-fox-theme] body .side-scrim { background: var(--fox-backdrop); -webkit-backdrop-filter: blur(var(--fox-backdrop-blur)); backdrop-filter: blur(var(--fox-backdrop-blur)); }
html[data-fox-theme] body :is(dialog, .dlg, .acc-dlg) { background-color: var(--fox-bg2); background-image: var(--fox-gradient); color: var(--fox-text);
	border: 1px solid var(--fox-accent); border-radius: var(--fox-radius-md); box-shadow: var(--fox-shadow); }
html[data-fox-theme] body dialog[open] { animation: fox-in var(--fox-dur-base) var(--fox-ease); }
html[data-fox-theme] body dialog::backdrop { background: var(--fox-backdrop); -webkit-backdrop-filter: blur(var(--fox-backdrop-blur)); backdrop-filter: blur(var(--fox-backdrop-blur)); }
@keyframes fox-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (max-width: 480px) { html[data-fox-theme] body dialog:is(.dlg, .acc-dlg) { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; } }

/* --- Design-Karte = FOX-Switcher (README §1) --- */
html[data-fox-theme] body .fx-theme { font-family: var(--fox-font-ui); border-radius: var(--fox-radius-md); clip-path: none; box-shadow: var(--fox-hi), var(--fox-bevel); }
html[data-fox-theme] body .fx-theme[aria-pressed="true"] { border-color: #fff; box-shadow: inset 0 0 0 1px #fff, 0 0 12px rgba(255, 255, 255, .2); }
html[data-fox-theme] body .fx-theme:focus-visible { outline: 2px solid var(--fox-accent); outline-offset: 2px; }

/* --- Logo: weicher Schatten + leichtes Glühen in Akzentfarbe (README §7) --- */
html[data-fox-theme] body .fox-logo { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)) drop-shadow(0 0 10px rgba(var(--fox-accent-rgb), .35)); }

/* --- Bewegung aus (README §6) --- */
@media (prefers-reduced-motion: reduce) { html[data-fox-theme] body :is(.panel, .fx-card, .tile, .btn, button, dialog) { transition: none !important; animation: none !important; } }
html[data-fox-motion="off"] body * { transition: none !important; animation: none !important; }
html[data-fox-motion="off"] body :is(.tile, .fx-card):hover { transform: none !important; }