/* fun.datx.space – gemeinsame Basis (Marke: datx.space, dunkel, Akzent grün) */
@font-face { font-family: "JetBrains Mono"; src: url("/__brand/fonts/jetbrainsmono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/__brand/fonts/spacegrotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/__brand/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #07080B; --bg2: #0B0D12; --panel: #0E1118; --panel2: #121620; --line: #1E2330; --line2: #2A2E3A;
  --fg: #E8EAF0; --muted: #8A90A0; --dim: #5B6170;
  --accent: #4ADE80; --accent2: #22C55E; --amber: #FBBF24; --orange: #FB923C; --red: #F87171; --blue: #60A5FA; --violet: #A78BFA; --pink: #F472B6;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --r: 12px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "calt" 0 !important; } /* JetBrains-Mono-Ligaturen zerstören ASCII-Art */
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
kbd { font: 600 .72em/1 var(--mono); padding: .25em .45em; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 5px; color: var(--muted); background: var(--bg2); white-space: nowrap; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: .85em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* gemeinsame Kopfzeile der Unterseiten */
.bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: rgba(7,8,11,.85); backdrop-filter: blur(8px); position: relative; z-index: 5; flex-wrap: wrap; }
.back { font: 600 13px var(--mono); color: var(--muted); text-decoration: none; white-space: nowrap; }
.back span { color: var(--dim); }
.back:hover { color: var(--accent); }
.bar .title { font: 700 18px var(--mono); letter-spacing: .04em; }
.bar .title span { color: var(--accent); }
.tog { background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; transition: border-color .15s, background .15s; }
.tog:hover { border-color: var(--dim); }
.tog[aria-pressed="true"] { border-color: var(--accent); background: rgba(74,222,128,.1); color: var(--accent); }
.tog[aria-pressed="true"] kbd { color: var(--accent); border-color: rgba(74,222,128,.4); }