/* neofee Blaupause v0.9.0 — erzeugt aus src/, nicht von Hand ändern. Quelle: /opt/neofee-blueprint */
/* ==========================================================================
   neofee Blaupause — Tokens
   Drei Ebenen (siehe docs/GOVERNANCE.md):
     1. Global    --nf-<farbe>-<stufe>, --nf-space-*, --nf-text-* …  (Rohwerte)
     2. Semantik  --nf-bg, --nf-surface, --nf-accent …               (Bedeutung)
     3. Komponente --nf-btn-*, --nf-card-* … (in components.css)
   Komponenten nutzen NUR Semantik- oder Komponenten-Tokens, nie Rohwerte.
   Themes überschreiben NUR die Semantik-Ebene:
     data-mode  = "dark" | "light"            (Farbmodus)
     data-brand = "neofee" | "nexusdoc" | "games"  (Dienst)
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, keine externen Abrufe) ---------- */
@font-face { font-family: 'Geist'; font-weight: 100 900; font-display: swap;
  src: url('./fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; font-weight: 100 900; font-display: swap;
  src: url('./fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-weight: 100 900; font-display: swap;
  src: url('./fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+FEFF; }
@font-face { font-family: 'Geist Mono'; font-weight: 100 900; font-display: swap;
  src: url('./fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chakra Petch'; font-weight: 500; font-display: swap;
  src: url('./fonts/chakra-petch-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-display: swap;
  src: url('./fonts/chakra-petch-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 700; font-display: swap;
  src: url('./fonts/chakra-petch-700-latin.woff2') format('woff2'); }

/* ==========================================================================
   1. GLOBAL — Rohwerte. Nur hier stehen Hex-Werte.
   ========================================================================== */
:root {
  /* Neutral: kühles Schiefergrau */
  --nf-slate-0:   #ffffff;
  --nf-slate-25:  #f8fafc;
  --nf-slate-50:  #f1f4f9;
  --nf-slate-100: #e4e9f1;
  --nf-slate-200: #cfd7e3;
  --nf-slate-300: #a9b4c6;
  --nf-slate-400: #7d8aa1;
  --nf-slate-500: #5a6780;
  --nf-slate-600: #434f66;
  --nf-slate-700: #2e374a;
  --nf-slate-800: #1d2433;
  --nf-slate-850: #161c29;
  --nf-slate-900: #10151f;
  --nf-slate-950: #0a0d14;

  /* Indigo — neofee */
  --nf-indigo-50:  #eef0ff;
  --nf-indigo-100: #e0e3ff;
  --nf-indigo-200: #c6cbff;
  --nf-indigo-300: #a3a9fe;
  --nf-indigo-400: #8187fa;
  --nf-indigo-500: #6366f1;
  --nf-indigo-600: #4f4ee0;
  --nf-indigo-700: #423fbd;
  --nf-indigo-800: #363596;
  --nf-indigo-900: #2c2c73;
  --nf-indigo-950: #1a1945;

  /* Blau — NexusDoc */
  --nf-blue-50:  #eef5ff;
  --nf-blue-100: #d9e8ff;
  --nf-blue-200: #bcd7ff;
  --nf-blue-300: #8ebeff;
  --nf-blue-400: #5a9cfc;
  --nf-blue-500: #3479f6;
  --nf-blue-600: #1f5ce6;
  --nf-blue-700: #1c49c0;
  --nf-blue-800: #1d3e99;
  --nf-blue-900: #1c3678;
  --nf-blue-950: #132249;

  /* Aqua — neofee-Akzent (aus dem Logo: „.network“) */
  --nf-aqua-200: #b4eef5;
  --nf-aqua-300: #7fdde9;
  --nf-aqua-400: #4ac6d7;
  --nf-aqua-500: #2aaabd;
  --nf-aqua-600: #1f8b9c;
  --nf-aqua-700: #1b6e7c;
  --nf-aqua-800: #1a5864;
  --nf-aqua-950: #082a31;

  /* Nachtblau — neofee-Flächen (aus dem Logo-Hintergrund) */
  --nf-night-600: #2a3766;
  --nf-night-700: #1f2a52;
  --nf-night-800: #172042;
  --nf-night-850: #121a37;
  --nf-night-900: #0d142d;
  --nf-night-950: #080d1f;

  /* Violett — Flügel */
  --nf-violet-300: #c3b5fd;
  --nf-violet-400: #a48bfa;
  --nf-violet-500: #8b6cf3;
  --nf-violet-600: #7350e0;

  /* Cyan — Zweitakzent */
  --nf-cyan-300: #67e8f9;
  --nf-cyan-400: #22d3ee;
  --nf-cyan-500: #06b6d4;
  --nf-cyan-600: #0891b2;

  /* Neon-Grün — Gameserver */
  --nf-neon-300: #8affc8;
  --nf-neon-400: #3dffa6;
  --nf-neon-500: #12e88a;
  --nf-neon-600: #08b86c;
  --nf-neon-700: #078a53;
  --nf-neon-900: #053d26;
  --nf-neon-950: #02200f;

  /* Magenta — Gameserver-Zweitakzent */
  --nf-magenta-300: #ff8fc4;
  --nf-magenta-400: #ff5ca8;
  --nf-magenta-500: #f5308a;
  --nf-magenta-600: #d1166d;

  /* Spielraum-Schwarz — Gameserver-Flächen */
  --nf-void-700: #1c2230;
  --nf-void-800: #131823;
  --nf-void-850: #0e121b;
  --nf-void-900: #090c13;
  --nf-void-950: #05070b;

  /* Status */
  --nf-green-300: #86efac;  --nf-green-500: #22c55e;  --nf-green-600: #16a34a;  --nf-green-700: #15803d;  --nf-green-950: #052e16;
  --nf-amber-300: #fcd34d;  --nf-amber-500: #f59e0b;  --nf-amber-600: #d97706;  --nf-amber-700: #b45309;  --nf-amber-950: #451a03;
  --nf-red-300:   #fca5a5;  --nf-red-500:   #ef4444;  --nf-red-600:   #dc2626;  --nf-red-700:   #b91c1c;  --nf-red-950:   #450a0a;

  /* Dienst-Monogramm-Töne (feste Zuordnung, siehe Muster „Dienst-Kachel") */
  --nf-tint-blue-bg-dark: #181d4a;     --nf-tint-blue-fg-dark: #a7b9fc;     --nf-tint-blue-bg-light: #e0e7ff;     --nf-tint-blue-fg-light: #3341b4;
  --nf-tint-emerald-bg-dark: #022c22;  --nf-tint-emerald-fg-dark: #6ee7b7;  --nf-tint-emerald-bg-light: #d1fae5;  --nf-tint-emerald-fg-light: #047857;
  --nf-tint-amber-bg-dark: #451a03;    --nf-tint-amber-fg-dark: #fcd34d;    --nf-tint-amber-bg-light: #fef3c7;    --nf-tint-amber-fg-light: #b45309;
  --nf-tint-violet-bg-dark: #2e1065;   --nf-tint-violet-fg-dark: #c4b5fd;   --nf-tint-violet-bg-light: #ede9fe;   --nf-tint-violet-fg-light: #6d28d9;
  --nf-tint-rose-bg-dark: #4c0519;     --nf-tint-rose-fg-dark: #fda4af;     --nf-tint-rose-bg-light: #ffe4e6;     --nf-tint-rose-fg-light: #be123c;
  --nf-tint-teal-bg-dark: #042f2e;     --nf-tint-teal-fg-dark: #5eead4;     --nf-tint-teal-bg-light: #ccfbf1;     --nf-tint-teal-fg-light: #0f766e;
  --nf-tint-cyan-bg-dark: #083344;     --nf-tint-cyan-fg-dark: #67e8f9;     --nf-tint-cyan-bg-light: #cffafe;     --nf-tint-cyan-fg-light: #0e7490;
  --nf-tint-lime-bg-dark: #1a2e05;     --nf-tint-lime-fg-dark: #bef264;     --nf-tint-lime-bg-light: #ecfccb;     --nf-tint-lime-fg-light: #3f6212;
  --nf-tint-fuchsia-bg-dark: #4a044e;  --nf-tint-fuchsia-fg-dark: #f0abfc;  --nf-tint-fuchsia-bg-light: #fae8ff;  --nf-tint-fuchsia-fg-light: #a21caf;
  --nf-tint-orange-bg-dark: #431407;   --nf-tint-orange-fg-dark: #fdba74;   --nf-tint-orange-bg-light: #ffedd5;   --nf-tint-orange-fg-light: #c2410c;
  --nf-tint-indigo-bg-dark: #1e1b4b;   --nf-tint-indigo-fg-dark: #a5b4fc;   --nf-tint-indigo-bg-light: #e0e7ff;   --nf-tint-indigo-fg-light: #3730a3;
  --nf-tint-sky-bg-dark: #0c4a6e;      --nf-tint-sky-fg-dark: #7dd3fc;      --nf-tint-sky-bg-light: #e0f2fe;      --nf-tint-sky-fg-light: #0369a1;

  /* Schrift */
  --nf-font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nf-font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --nf-font-display-games: 'Chakra Petch', 'Geist', ui-sans-serif, sans-serif;

  /* Schriftgrößen — Verhältnis 1,25 (große Terz), Basis 16 px */
  --nf-text-xs:   0.75rem;   /* 12 — Hinweise, Kennzeichnungen */
  --nf-text-sm:   0.875rem;  /* 14 — UI-Text, Tabellen */
  --nf-text-md:   1rem;      /* 16 — Fließtext */
  --nf-text-lg:   1.25rem;   /* 20 — Zwischenüberschrift */
  --nf-text-xl:   1.5rem;    /* 24 — H3 */
  --nf-text-2xl:  2rem;      /* 32 — H2 */
  --nf-text-3xl:  2.5rem;    /* 40 — H1 */
  --nf-text-4xl:  3.25rem;   /* 52 — Display */

  --nf-weight-regular: 400;
  --nf-weight-medium: 500;
  --nf-weight-semibold: 600;
  --nf-weight-bold: 700;

  --nf-leading-tight: 1.15;
  --nf-leading-snug: 1.35;
  --nf-leading-normal: 1.55;
  --nf-leading-relaxed: 1.75;

  --nf-tracking-tight: -0.02em;
  --nf-tracking-normal: 0;
  --nf-tracking-wide: 0.06em;

  /* Abstände — Basis 4 px */
  --nf-space-0: 0;
  --nf-space-1: 0.25rem;  /*  4 */
  --nf-space-2: 0.5rem;   /*  8 */
  --nf-space-3: 0.75rem;  /* 12 */
  --nf-space-4: 1rem;     /* 16 */
  --nf-space-5: 1.5rem;   /* 24 */
  --nf-space-6: 2rem;     /* 32 */
  --nf-space-7: 3rem;     /* 48 */
  --nf-space-8: 4rem;     /* 64 */
  --nf-space-9: 6rem;     /* 96 */

  /* Radien */
  --nf-radius-xs: 4px;
  --nf-radius-sm: 6px;
  --nf-radius-md: 10px;
  --nf-radius-lg: 14px;
  --nf-radius-xl: 20px;
  --nf-radius-full: 999px;

  /* Bewegung */
  --nf-duration-fast: 120ms;
  --nf-duration-base: 200ms;
  --nf-duration-slow: 360ms;
  --nf-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --nf-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --nf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Ebenen */
  --nf-z-base: 0;
  --nf-z-sticky: 20;
  --nf-z-dropdown: 40;
  --nf-z-overlay: 60;
  --nf-z-modal: 70;
  --nf-z-toast: 80;

  /* Layout */
  --nf-container: 1200px;
  --nf-measure: 68ch;
  --nf-sidebar: 248px;
  --nf-topbar: 60px;
}

/* ==========================================================================
   2. SEMANTIK — Bedeutung. Standard: neofee, dunkel.
   ========================================================================== */
:root,
[data-mode='dark'] {
  color-scheme: dark;

  /* Flächen */
  --nf-bg:            var(--nf-night-950);
  --nf-bg-raised:     var(--nf-night-900);
  --nf-surface:       var(--nf-night-900);
  --nf-surface-2:     var(--nf-night-850);
  --nf-surface-hover: var(--nf-night-800);
  --nf-surface-inset: #060a18;
  --nf-overlay:       rgba(4, 6, 10, 0.72);

  /* Linien */
  --nf-border:        rgba(140, 170, 230, 0.13);
  --nf-border-strong: rgba(140, 170, 230, 0.25);
  --nf-border-control:var(--nf-night-600);

  /* Text */
  --nf-text-strong: var(--nf-slate-25);
  --nf-text:        var(--nf-slate-100);
  --nf-text-body:   var(--nf-slate-200);
  --nf-text-muted:  var(--nf-slate-400);
  --nf-text-faint:  var(--nf-slate-500);

  /* Akzent (Marke) */
  --nf-accent:          var(--nf-aqua-400);
  --nf-accent-strong:   var(--nf-aqua-400);
  --nf-accent-hover:    var(--nf-aqua-300);
  --nf-accent-soft:     rgba(74, 198, 215, 0.13);
  --nf-accent-soft-text:var(--nf-aqua-200);
  --nf-on-accent:       var(--nf-night-950);
  --nf-accent-2:        var(--nf-violet-400);
  --nf-gradient:        linear-gradient(135deg, var(--nf-violet-500) 0%, var(--nf-aqua-400) 100%);
  --nf-glow:            0 0 0 1px rgba(74, 198, 215, 0.4), 0 8px 32px -8px rgba(74, 198, 215, 0.5);

  --nf-link:       var(--nf-aqua-300);
  --nf-link-hover: var(--nf-aqua-200);
  --nf-focus-ring: 0 0 0 2px var(--nf-bg), 0 0 0 4px var(--nf-aqua-400);

  /* Status: Vordergrund, Fläche, Linie */
  --nf-success: var(--nf-green-300); --nf-success-bg: rgba(34, 197, 94, 0.12); --nf-success-line: rgba(34, 197, 94, 0.35);
  --nf-warning: var(--nf-amber-300); --nf-warning-bg: rgba(245, 158, 11, 0.12); --nf-warning-line: rgba(245, 158, 11, 0.35);
  --nf-danger:  var(--nf-red-300);   --nf-danger-bg:  rgba(239, 68, 68, 0.12);  --nf-danger-line:  rgba(239, 68, 68, 0.35);
  --nf-info:    var(--nf-cyan-300);  --nf-info-bg:    rgba(6, 182, 212, 0.12);  --nf-info-line:    rgba(6, 182, 212, 0.35);
  --nf-success-solid: var(--nf-green-600);
  --nf-warning-solid: var(--nf-amber-600);
  --nf-danger-solid:  var(--nf-red-600);
  --nf-info-solid:    var(--nf-cyan-600);

  /* Tiefe: im Dunkeln über hellere Flächen + feine Linie, kaum Schatten */
  --nf-highlight-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.09);
  --nf-btn-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 0 rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.38);
  --nf-btn-primary-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 0 rgba(0, 0, 0, 0.22), 0 2px 10px -2px rgba(0, 0, 0, 0.5);
  --nf-input-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.34), 0 1px 0 rgba(255, 255, 255, 0.04);
  --nf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --nf-shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --nf-shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.75);

  /* Hintergrund-Atmosphäre (dezent) */
  --nf-atmosphere: radial-gradient(60rem 30rem at 85% -10%, rgba(139, 108, 243, 0.16), transparent 60%),
                   radial-gradient(40rem 24rem at -10% 10%, rgba(74, 198, 215, 0.09), transparent 60%);

  /* Monogramm-Töne */
  --nf-tint-blue-bg: var(--nf-tint-blue-bg-dark);       --nf-tint-blue-fg: var(--nf-tint-blue-fg-dark);
  --nf-tint-emerald-bg: var(--nf-tint-emerald-bg-dark); --nf-tint-emerald-fg: var(--nf-tint-emerald-fg-dark);
  --nf-tint-amber-bg: var(--nf-tint-amber-bg-dark);     --nf-tint-amber-fg: var(--nf-tint-amber-fg-dark);
  --nf-tint-violet-bg: var(--nf-tint-violet-bg-dark);   --nf-tint-violet-fg: var(--nf-tint-violet-fg-dark);
  --nf-tint-rose-bg: var(--nf-tint-rose-bg-dark);       --nf-tint-rose-fg: var(--nf-tint-rose-fg-dark);
  --nf-tint-teal-bg: var(--nf-tint-teal-bg-dark);       --nf-tint-teal-fg: var(--nf-tint-teal-fg-dark);
  --nf-tint-cyan-bg: var(--nf-tint-cyan-bg-dark);       --nf-tint-cyan-fg: var(--nf-tint-cyan-fg-dark);
  --nf-tint-lime-bg: var(--nf-tint-lime-bg-dark);       --nf-tint-lime-fg: var(--nf-tint-lime-fg-dark);
  --nf-tint-fuchsia-bg: var(--nf-tint-fuchsia-bg-dark); --nf-tint-fuchsia-fg: var(--nf-tint-fuchsia-fg-dark);
  --nf-tint-orange-bg: var(--nf-tint-orange-bg-dark);   --nf-tint-orange-fg: var(--nf-tint-orange-fg-dark);
  --nf-tint-indigo-bg: var(--nf-tint-indigo-bg-dark);   --nf-tint-indigo-fg: var(--nf-tint-indigo-fg-dark);
  --nf-tint-sky-bg: var(--nf-tint-sky-bg-dark);         --nf-tint-sky-fg: var(--nf-tint-sky-fg-dark);

  /* Form der Marke */
  --nf-font-heading: var(--nf-font-sans);
  --nf-heading-transform: none;
  --nf-heading-tracking: var(--nf-tracking-tight);
  --nf-radius-control: 8px;
  --nf-radius-card: var(--nf-radius-lg);
  --nf-cut: 0px;            /* Eckenschnitt (nur Gameserver) */
}

[data-mode='light'] {
  color-scheme: light;

  --nf-bg:            var(--nf-slate-25);
  --nf-bg-raised:     var(--nf-slate-0);
  --nf-surface:       var(--nf-slate-0);
  --nf-surface-2:     var(--nf-slate-50);
  --nf-surface-hover: var(--nf-slate-50);
  --nf-surface-inset: var(--nf-slate-50);
  --nf-overlay:       rgba(15, 20, 32, 0.45);

  --nf-border:        var(--nf-slate-100);
  --nf-border-strong: var(--nf-slate-200);
  --nf-border-control:var(--nf-slate-200);

  --nf-text-strong: var(--nf-slate-950);
  --nf-text:        var(--nf-slate-900);
  --nf-text-body:   var(--nf-slate-700);
  --nf-text-muted:  var(--nf-slate-500);
  --nf-text-faint:  var(--nf-slate-400);

  --nf-accent:          var(--nf-aqua-700);
  --nf-accent-strong:   var(--nf-aqua-700);
  --nf-accent-hover:    var(--nf-aqua-800);
  --nf-accent-soft:     #e3f7fa;
  --nf-accent-soft-text:var(--nf-aqua-800);
  --nf-on-accent:       #ffffff;
  --nf-accent-2:        var(--nf-violet-600);
  --nf-gradient:        linear-gradient(135deg, var(--nf-violet-600) 0%, var(--nf-aqua-600) 100%);
  --nf-glow:            0 0 0 1px rgba(27, 110, 124, 0.25), 0 8px 24px -8px rgba(27, 110, 124, 0.35);

  --nf-link:       var(--nf-aqua-700);
  --nf-link-hover: var(--nf-aqua-800);
  --nf-focus-ring: 0 0 0 2px var(--nf-bg), 0 0 0 4px var(--nf-aqua-600);

  --nf-success: var(--nf-green-700); --nf-success-bg: #ecfdf3; --nf-success-line: #a7f3c7;
  --nf-warning: var(--nf-amber-700); --nf-warning-bg: #fffbeb; --nf-warning-line: #fde68a;
  --nf-danger:  var(--nf-red-700);   --nf-danger-bg:  #fef2f2; --nf-danger-line:  #fecaca;
  --nf-info:    var(--nf-cyan-600);  --nf-info-bg:    #ecfeff; --nf-info-line:    #a5f3fc;
  --nf-success-solid: var(--nf-green-600);
  --nf-warning-solid: var(--nf-amber-600);
  --nf-danger-solid:  var(--nf-red-600);
  --nf-info-solid:    var(--nf-cyan-600);

  --nf-highlight-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.85);
  --nf-btn-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 0 rgba(16, 21, 31, 0.06), 0 1px 2px rgba(16, 21, 31, 0.08);
  --nf-btn-primary-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 0 rgba(0, 0, 0, 0.15), 0 2px 8px -2px rgba(16, 21, 31, 0.25);
  --nf-input-shadow: inset 0 1px 2px rgba(16, 21, 31, 0.05);
  --nf-shadow-sm: 0 1px 2px rgba(16, 21, 31, 0.06);
  --nf-shadow-md: 0 1px 2px rgba(16, 21, 31, 0.05), 0 8px 24px -10px rgba(16, 21, 31, 0.14);
  --nf-shadow-lg: 0 24px 64px -20px rgba(16, 21, 31, 0.28);

  --nf-atmosphere: radial-gradient(60rem 30rem at 85% -10%, rgba(139, 108, 243, 0.08), transparent 60%),
                   radial-gradient(40rem 24rem at -10% 10%, rgba(74, 198, 215, 0.06), transparent 60%);

  --nf-tint-blue-bg: var(--nf-tint-blue-bg-light);       --nf-tint-blue-fg: var(--nf-tint-blue-fg-light);
  --nf-tint-emerald-bg: var(--nf-tint-emerald-bg-light); --nf-tint-emerald-fg: var(--nf-tint-emerald-fg-light);
  --nf-tint-amber-bg: var(--nf-tint-amber-bg-light);     --nf-tint-amber-fg: var(--nf-tint-amber-fg-light);
  --nf-tint-violet-bg: var(--nf-tint-violet-bg-light);   --nf-tint-violet-fg: var(--nf-tint-violet-fg-light);
  --nf-tint-rose-bg: var(--nf-tint-rose-bg-light);       --nf-tint-rose-fg: var(--nf-tint-rose-fg-light);
  --nf-tint-teal-bg: var(--nf-tint-teal-bg-light);       --nf-tint-teal-fg: var(--nf-tint-teal-fg-light);
  --nf-tint-cyan-bg: var(--nf-tint-cyan-bg-light);       --nf-tint-cyan-fg: var(--nf-tint-cyan-fg-light);
  --nf-tint-lime-bg: var(--nf-tint-lime-bg-light);       --nf-tint-lime-fg: var(--nf-tint-lime-fg-light);
  --nf-tint-fuchsia-bg: var(--nf-tint-fuchsia-bg-light); --nf-tint-fuchsia-fg: var(--nf-tint-fuchsia-fg-light);
  --nf-tint-orange-bg: var(--nf-tint-orange-bg-light);   --nf-tint-orange-fg: var(--nf-tint-orange-fg-light);
  --nf-tint-indigo-bg: var(--nf-tint-indigo-bg-light);   --nf-tint-indigo-fg: var(--nf-tint-indigo-fg-light);
  --nf-tint-sky-bg: var(--nf-tint-sky-bg-light);         --nf-tint-sky-fg: var(--nf-tint-sky-fg-light);
}

/* ---------- Marke: NexusDoc — ruhiges Blau, Lesefokus ---------- */
[data-brand='nexusdoc'] {
  --nf-bg:            var(--nf-slate-950);
  --nf-bg-raised:     var(--nf-slate-900);
  --nf-surface:       var(--nf-slate-900);
  --nf-surface-2:     var(--nf-slate-850);
  --nf-surface-hover: var(--nf-slate-800);
  --nf-surface-inset: #070a10;
  --nf-border-control:var(--nf-slate-700);
  --nf-on-accent:       #ffffff;
  --nf-accent:          var(--nf-blue-400);
  --nf-accent-strong:   var(--nf-blue-500);
  --nf-accent-hover:    var(--nf-blue-300);
  --nf-accent-soft:     rgba(52, 121, 246, 0.14);
  --nf-accent-soft-text:var(--nf-blue-200);
  --nf-accent-2:        var(--nf-cyan-400);
  --nf-gradient:        linear-gradient(135deg, var(--nf-blue-500) 0%, var(--nf-cyan-500) 100%);
  --nf-glow:            0 0 0 1px rgba(90, 156, 252, 0.35), 0 8px 32px -8px rgba(52, 121, 246, 0.45);
  --nf-link:            var(--nf-blue-300);
  --nf-link-hover:      var(--nf-blue-200);
  --nf-focus-ring:      0 0 0 2px var(--nf-bg), 0 0 0 4px var(--nf-blue-400);
  --nf-atmosphere:      radial-gradient(60rem 30rem at 85% -10%, rgba(52, 121, 246, 0.1), transparent 60%);
  --nf-radius-card:     var(--nf-radius-md);
}
[data-brand='nexusdoc'][data-mode='light'] {
  --nf-bg:            var(--nf-slate-25);
  --nf-bg-raised:     var(--nf-slate-0);
  --nf-surface:       var(--nf-slate-0);
  --nf-surface-2:     var(--nf-slate-50);
  --nf-surface-hover: var(--nf-slate-50);
  --nf-surface-inset: var(--nf-slate-50);
  --nf-border-control:var(--nf-slate-200);
  --nf-accent:          var(--nf-blue-600);
  --nf-accent-strong:   var(--nf-blue-600);
  --nf-accent-hover:    var(--nf-blue-700);
  --nf-accent-soft:     var(--nf-blue-50);
  --nf-accent-soft-text:var(--nf-blue-700);
  --nf-accent-2:        var(--nf-cyan-600);
  --nf-gradient:        linear-gradient(135deg, var(--nf-blue-600) 0%, var(--nf-cyan-600) 100%);
  --nf-link:            var(--nf-blue-700);
  --nf-link-hover:      var(--nf-blue-900);
  --nf-focus-ring:      0 0 0 2px var(--nf-bg), 0 0 0 4px var(--nf-blue-500);
  --nf-atmosphere:      none;
}

/* ---------- Marke: Gameserver — Spielraum-Schwarz, Neon, kantig ---------- */
[data-brand='games'] {
  --nf-bg:            var(--nf-void-950);
  --nf-bg-raised:     var(--nf-void-900);
  --nf-surface:       var(--nf-void-900);
  --nf-surface-2:     var(--nf-void-850);
  --nf-surface-hover: var(--nf-void-800);
  --nf-surface-inset: #030407;
  --nf-border:        rgba(61, 255, 166, 0.10);
  --nf-border-strong: rgba(61, 255, 166, 0.22);
  --nf-border-control:var(--nf-void-700);

  --nf-accent:          var(--nf-neon-400);
  --nf-accent-strong:   var(--nf-neon-500);
  --nf-accent-hover:    var(--nf-neon-300);
  --nf-accent-soft:     rgba(18, 232, 138, 0.10);
  --nf-accent-soft-text:var(--nf-neon-300);
  --nf-on-accent:       var(--nf-void-950);
  --nf-accent-2:        var(--nf-magenta-400);
  --nf-gradient:        linear-gradient(120deg, var(--nf-neon-500) 0%, var(--nf-cyan-400) 55%, var(--nf-magenta-400) 100%);
  --nf-glow:            0 0 0 1px rgba(61, 255, 166, 0.45), 0 0 24px -4px rgba(18, 232, 138, 0.55);
  --nf-link:            var(--nf-neon-300);
  --nf-link-hover:      #ffffff;
  --nf-focus-ring:      0 0 0 2px var(--nf-bg), 0 0 0 4px var(--nf-neon-400), 0 0 16px rgba(61, 255, 166, 0.6);

  --nf-success: var(--nf-neon-300);
  --nf-danger:  var(--nf-magenta-300); --nf-danger-bg: rgba(245, 48, 138, 0.12); --nf-danger-line: rgba(245, 48, 138, 0.4);
  --nf-danger-solid: var(--nf-magenta-600);

  --nf-atmosphere: radial-gradient(50rem 26rem at 90% -10%, rgba(18, 232, 138, 0.10), transparent 60%),
                   radial-gradient(40rem 22rem at -10% 20%, rgba(245, 48, 138, 0.07), transparent 60%);

  --nf-font-heading: var(--nf-font-display-games);
  --nf-heading-transform: uppercase;
  --nf-heading-tracking: 0.03em;
  --nf-radius-control: 2px;
  --nf-radius-card: 2px;
  --nf-cut: 12px;
}
[data-brand='games'][data-mode='light'] {
  /* Der Gameserver ist für dunkel gestaltet. Hell bleibt lesbar, aber schlicht. */
  --nf-bg:            #f3f6f4;
  --nf-bg-raised:     #ffffff;
  --nf-surface:       #ffffff;
  --nf-surface-2:     #eef2ef;
  --nf-surface-hover: #e6ece8;
  --nf-surface-inset: #e9eeeb;
  --nf-border:        rgba(5, 61, 38, 0.12);
  --nf-border-strong: rgba(5, 61, 38, 0.24);
  --nf-border-control:#cfd9d3;
  --nf-accent:          var(--nf-neon-700);
  --nf-accent-strong:   var(--nf-neon-700);
  --nf-accent-hover:    var(--nf-neon-900);
  --nf-accent-soft:     #dcfbe9;
  --nf-accent-soft-text:var(--nf-neon-900);
  --nf-on-accent:       #ffffff;
  --nf-accent-2:        var(--nf-magenta-600);
  --nf-link:            var(--nf-neon-700);
  --nf-link-hover:      var(--nf-neon-900);
  --nf-glow:            0 0 0 1px rgba(7, 138, 83, 0.3);
  --nf-focus-ring:      0 0 0 2px var(--nf-bg), 0 0 0 4px var(--nf-neon-600);
  --nf-success: var(--nf-neon-700);
  --nf-danger:  var(--nf-magenta-600); --nf-danger-bg: #fdecf4; --nf-danger-line: #f9b8d6;
  --nf-atmosphere: none;
}

@media (prefers-reduced-motion: reduce) {
  :root { --nf-duration-fast: 0ms; --nf-duration-base: 0ms; --nf-duration-slow: 0ms; }
}
/* ==========================================================================
   neofee Blaupause — Basis: Reset, Typografie, Layout-Helfer
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
img, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  overflow-x: clip; /* Sicherheitsnetz: nie waagerecht scrollen (clip statt hidden: sticky bleibt intakt) */
  background: var(--nf-atmosphere), var(--nf-bg);
  background-attachment: fixed;
  color: var(--nf-text-body);
  font-family: var(--nf-font-sans);
  font-size: var(--nf-text-md);
  line-height: var(--nf-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Typografie ---------- */
.nf-h1, .nf-h2, .nf-h3, .nf-h4, .nf-display {
  color: var(--nf-text-strong);
  font-family: var(--nf-font-heading);
  font-weight: var(--nf-weight-semibold);
  letter-spacing: var(--nf-heading-tracking);
  text-transform: var(--nf-heading-transform);
  line-height: var(--nf-leading-tight);
  text-wrap: balance;
}
.nf-display { font-size: clamp(var(--nf-text-2xl), 6vw, var(--nf-text-4xl)); font-weight: var(--nf-weight-bold); }
.nf-h1 { font-size: clamp(var(--nf-text-xl), 4.5vw, var(--nf-text-3xl)); }
.nf-h2 { font-size: clamp(var(--nf-text-lg), 3.5vw, var(--nf-text-2xl)); }
.nf-h3 { font-size: var(--nf-text-xl); line-height: var(--nf-leading-snug); }
.nf-h4 { font-size: var(--nf-text-lg); line-height: var(--nf-leading-snug); }
.nf-lead { font-size: var(--nf-text-lg); color: var(--nf-text-muted); line-height: var(--nf-leading-snug); max-width: var(--nf-measure); text-wrap: pretty; }
.nf-body { font-size: var(--nf-text-md); }
.nf-small { font-size: var(--nf-text-sm); }
.nf-caption { font-size: var(--nf-text-xs); color: var(--nf-text-muted); }
.nf-eyebrow {
  font-size: var(--nf-text-xs);
  font-weight: var(--nf-weight-semibold);
  letter-spacing: var(--nf-tracking-wide);
  text-transform: uppercase;
  color: var(--nf-accent);
}
.nf-muted { color: var(--nf-text-muted); }
.nf-strong { color: var(--nf-text-strong); font-weight: var(--nf-weight-semibold); }
.nf-mono, code, kbd, samp, pre { font-family: var(--nf-font-mono); font-size: 0.92em; }
.nf-gradient-text { background: var(--nf-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nf-prose { max-width: var(--nf-measure); line-height: var(--nf-leading-relaxed); color: var(--nf-text-body); }
.nf-prose > * + * { margin-top: var(--nf-space-4); }
.nf-prose h2, .nf-prose h3 { color: var(--nf-text-strong); font-family: var(--nf-font-heading); letter-spacing: var(--nf-heading-tracking); line-height: var(--nf-leading-snug); margin-top: var(--nf-space-6); }
.nf-prose h2 { font-size: var(--nf-text-xl); }
.nf-prose h3 { font-size: var(--nf-text-lg); }
.nf-prose ul, .nf-prose ol { padding-left: 1.25em; }
.nf-prose li + li { margin-top: var(--nf-space-1); }
.nf-prose :not(pre) > code { background: var(--nf-surface-2); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-xs); padding: 0.1em 0.35em; color: var(--nf-text); }
.nf-prose blockquote { border-left: 3px solid var(--nf-accent); padding-left: var(--nf-space-4); color: var(--nf-text-muted); }

a, .nf-link { color: var(--nf-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; transition: color var(--nf-duration-fast) var(--nf-ease-out); }
a:hover, .nf-link:hover { color: var(--nf-link-hover); text-decoration-color: currentColor; }

::selection { background: var(--nf-accent-soft); color: var(--nf-text-strong); }

/* ---------- Fokus: immer sichtbar bei Tastatur ---------- */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--nf-focus-ring); border-radius: var(--nf-radius-xs); }

/* ---------- Layout-Helfer ---------- */
.nf-container { width: 100%; max-width: var(--nf-container); margin-inline: auto; padding-inline: var(--nf-space-4); }
@media (min-width: 768px) { .nf-container { padding-inline: var(--nf-space-6); } }

.nf-stack { display: flex; flex-direction: column; gap: var(--nf-gap, var(--nf-space-4)); }
.nf-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nf-gap, var(--nf-space-3)); }
.nf-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nf-space-3); }
.nf-grid { display: grid; gap: var(--nf-gap, var(--nf-space-4)); grid-template-columns: repeat(auto-fill, minmax(var(--nf-min, 260px), 1fr)); }
.nf-gap-1 { --nf-gap: var(--nf-space-1); } .nf-gap-2 { --nf-gap: var(--nf-space-2); } .nf-gap-3 { --nf-gap: var(--nf-space-3); }
.nf-gap-5 { --nf-gap: var(--nf-space-5); } .nf-gap-6 { --nf-gap: var(--nf-space-6); } .nf-gap-7 { --nf-gap: var(--nf-space-7); }
.nf-section { padding-block: var(--nf-space-7); }

.nf-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nf-skip-link { position: absolute; left: var(--nf-space-4); top: -100px; z-index: var(--nf-z-toast); background: var(--nf-accent-strong); color: var(--nf-on-accent); padding: var(--nf-space-2) var(--nf-space-4); border-radius: var(--nf-radius-control); }
.nf-skip-link:focus { top: var(--nf-space-3); }

/* Nur ab mittlerer Breite zeigen (z. B. Nebensachen in der Kopfleiste) */
@media (max-width: 767px) { .nf-hide-sm { display: none !important; } }
@media (min-width: 768px) { .nf-show-sm { display: none !important; } }
/* ==========================================================================
   neofee Blaupause — Komponenten
   Jede Komponente: .nf-<name>, Varianten als Modifier .nf-<name>--<variante>,
   Teile als .nf-<name>__<teil>. Zustände über ARIA/HTML-Attribute
   (aria-current, aria-selected, aria-invalid, disabled, aria-busy) — keine
   eigenen Zustandsklassen, damit Barrierefreiheit und Optik zusammenhängen.
   ========================================================================== */

/* ---------- Icon & Icon-Box ---------- */
.nf-icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--nf-duration-fast) var(--nf-ease-out); }
.nf-icon--xs { width: 0.875em; height: 0.875em; }
.nf-icon--sm { width: 1em; height: 1em; }
.nf-icon--lg { width: 1.5em; height: 1.5em; }
.nf-icon--xl { width: 2em; height: 2em; stroke-width: 1.5; }
.nf-icon--duotone { fill: color-mix(in srgb, currentColor 16%, transparent); }
.nf-icon--spin { animation: nf-spin 1s linear infinite; }
.nf-icon--pulse { animation: nf-pulse 1.5s ease-in-out infinite; }

.nf-icon-box {
  --nf-ib-bg: var(--nf-surface-2); --nf-ib-fg: var(--nf-text); --nf-ib-line: var(--nf-border-strong);
  display: inline-grid; place-content: center; width: 38px; height: 38px; flex: none;
  border-radius: var(--nf-radius-md); background: var(--nf-ib-bg); color: var(--nf-ib-fg);
  border: 1px solid var(--nf-ib-line); box-shadow: var(--nf-highlight-top);
}
.nf-icon-box--sm { width: 28px; height: 28px; border-radius: var(--nf-radius-sm); font-size: var(--nf-text-xs); }
.nf-icon-box--lg { width: 48px; height: 48px; border-radius: var(--nf-radius-lg); font-size: var(--nf-text-lg); }
.nf-icon-box--accent  { --nf-ib-bg: var(--nf-accent-soft); --nf-ib-fg: var(--nf-accent); --nf-ib-line: color-mix(in srgb, var(--nf-accent) 30%, transparent); }
.nf-icon-box--success { --nf-ib-bg: var(--nf-success-bg); --nf-ib-fg: var(--nf-success); --nf-ib-line: var(--nf-success-line); }
.nf-icon-box--warning { --nf-ib-bg: var(--nf-warning-bg); --nf-ib-fg: var(--nf-warning); --nf-ib-line: var(--nf-warning-line); }
.nf-icon-box--danger  { --nf-ib-bg: var(--nf-danger-bg);  --nf-ib-fg: var(--nf-danger);  --nf-ib-line: var(--nf-danger-line); }
.nf-icon-box--info    { --nf-ib-bg: var(--nf-info-bg);    --nf-ib-fg: var(--nf-info);    --nf-ib-line: var(--nf-info-line); }
.nf-icon-box--glass   { --nf-ib-bg: color-mix(in srgb, var(--nf-surface) 60%, transparent); --nf-ib-fg: var(--nf-text-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ---------- Vektor-Grafiken & Radial-Ringe ---------- */
.nf-graphic { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; }
.nf-graphic--hero { max-width: 460px; margin-inline: auto; filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.28)); }
.nf-graphic--empty { width: 210px; height: 140px; margin-inline: auto; }

.nf-ring {
  --nf-pct: 0; --nf-ring-size: 64px; --nf-ring-stroke: 6; --nf-ring-color: var(--nf-accent);
  position: relative; display: inline-grid; place-content: center; width: var(--nf-ring-size); height: var(--nf-ring-size); flex: none;
}
.nf-ring--lg { --nf-ring-size: 88px; }
.nf-ring[data-level='warn'] { --nf-ring-color: var(--nf-amber-500); }
.nf-ring[data-level='crit'] { --nf-ring-color: var(--nf-red-500); }
.nf-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.nf-ring__track { fill: none; stroke: var(--nf-surface-inset); stroke-width: var(--nf-ring-stroke); }
.nf-ring__arc {
  fill: none; stroke: var(--nf-ring-color); stroke-width: var(--nf-ring-stroke); stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--nf-pct));
  transition: stroke-dashoffset var(--nf-duration-slow) var(--nf-ease-out), stroke var(--nf-duration-base);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--nf-ring-color) 45%, transparent));
}
.nf-ring__label { font-family: var(--nf-font-mono); font-size: var(--nf-text-xs); font-weight: var(--nf-weight-semibold); color: var(--nf-text-strong); font-variant-numeric: tabular-nums; }
.nf-ring--lg .nf-ring__label { font-size: var(--nf-text-sm); }

/* ---------- Button, Button-Gruppe & Aktionsleiste ---------- */
.nf-btn {
  --nf-btn-bg: var(--nf-surface-2);
  --nf-btn-fg: var(--nf-text);
  --nf-btn-border: var(--nf-border-strong);
  --nf-btn-bg-hover: var(--nf-surface-hover);
  --nf-btn-h: 40px;
  --nf-btn-px: var(--nf-space-4);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--nf-space-2);
  height: var(--nf-btn-h); padding-inline: var(--nf-btn-px);
  border: 1px solid var(--nf-btn-border); border-radius: var(--nf-radius-control);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)) var(--nf-btn-bg);
  color: var(--nf-btn-fg); box-shadow: var(--nf-btn-shadow);
  font-size: var(--nf-text-sm); font-weight: var(--nf-weight-medium); line-height: 1; white-space: nowrap;
  text-decoration: none; user-select: none; position: relative; overflow: hidden;
  transition: background-color var(--nf-duration-fast) var(--nf-ease-out), border-color var(--nf-duration-fast) var(--nf-ease-out), box-shadow var(--nf-duration-base) var(--nf-ease-out), transform var(--nf-duration-fast) var(--nf-ease-spring), color var(--nf-duration-fast), filter var(--nf-duration-fast);
}
.nf-btn:hover { background-color: var(--nf-btn-bg-hover); color: var(--nf-btn-fg); border-color: color-mix(in srgb, var(--nf-btn-border) 65%, var(--nf-text-muted)); }
.nf-btn:active { transform: translateY(1px) scale(0.985); }
.nf-btn:focus-visible { box-shadow: var(--nf-focus-ring); border-radius: var(--nf-radius-control); z-index: 2; }
.nf-btn:hover .nf-btn__arrow { transform: translateX(3px); }
.nf-btn > .nf-kbd { margin-left: 2px; margin-right: -4px; background: color-mix(in srgb, var(--nf-bg) 45%, transparent); border-color: color-mix(in srgb, currentColor 22%, transparent); color: inherit; opacity: 0.85; }

/* Primary: Tiefenverlauf + obere Glanzkante + Leuchtschein beim Hover */
.nf-btn--primary {
  --nf-btn-bg: var(--nf-accent-strong); --nf-btn-fg: var(--nf-on-accent);
  --nf-btn-border: color-mix(in srgb, var(--nf-accent-hover) 50%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--nf-accent-hover) 32%, var(--nf-accent-strong)) 0%, var(--nf-accent-strong) 100%);
  box-shadow: var(--nf-btn-primary-shadow); font-weight: var(--nf-weight-semibold);
}
.nf-btn--primary:hover { filter: brightness(1.07); box-shadow: var(--nf-btn-primary-shadow), var(--nf-glow); transform: translateY(-1px); border-color: var(--nf-accent-hover); }
.nf-btn--primary:active { transform: translateY(0); }

/* Gradient & Shine (Hero-CTA mit wanderndem Lichtreflex) */
.nf-btn--gradient, .nf-btn--shine {
  --nf-btn-fg: var(--nf-on-accent); --nf-btn-border: transparent;
  background: var(--nf-gradient); box-shadow: var(--nf-btn-primary-shadow); font-weight: var(--nf-weight-semibold);
}
.nf-btn--gradient:hover, .nf-btn--shine:hover { background: var(--nf-gradient); box-shadow: var(--nf-btn-primary-shadow), var(--nf-glow); filter: brightness(1.08); transform: translateY(-1px); border-color: transparent; }
.nf-btn--shine::before {
  content: ''; position: absolute; inset: 0 auto 0 -120%; width: 70%; pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.36) 50%, transparent 80%);
  transform: skewX(-18deg); transition: left 0.55s var(--nf-ease-out);
}
.nf-btn--shine:hover::before { left: 145%; }

/* Glow-Border (Dunkler Kern mit leuchtendem Marken-Verlaufsrahmen) */
.nf-btn--glow-border {
  --nf-btn-fg: var(--nf-text-strong);
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--nf-surface-2), var(--nf-surface)) padding-box, var(--nf-gradient) border-box;
  box-shadow: var(--nf-btn-shadow);
}
.nf-btn--glow-border:hover {
  background: linear-gradient(180deg, var(--nf-surface-hover), var(--nf-surface-2)) padding-box, var(--nf-gradient) border-box;
  border-color: transparent; box-shadow: var(--nf-glow); transform: translateY(-1px); color: var(--nf-text-strong);
}

/* Soft & Outline */
.nf-btn--soft { --nf-btn-bg: var(--nf-accent-soft); --nf-btn-fg: var(--nf-accent-soft-text); --nf-btn-border: color-mix(in srgb, var(--nf-accent) 30%, transparent); --nf-btn-bg-hover: color-mix(in srgb, var(--nf-accent) 22%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.nf-btn--soft:hover { border-color: color-mix(in srgb, var(--nf-accent) 60%, transparent); box-shadow: 0 0 20px -6px var(--nf-accent); }

.nf-btn--outline { --nf-btn-bg: transparent; --nf-btn-fg: var(--nf-accent); --nf-btn-border: color-mix(in srgb, var(--nf-accent) 55%, transparent); --nf-btn-bg-hover: var(--nf-accent-soft); background: transparent; box-shadow: none; }
.nf-btn--outline:hover { background: var(--nf-accent-soft); --nf-btn-fg: var(--nf-accent-soft-text); border-color: var(--nf-accent); box-shadow: 0 0 18px -6px var(--nf-accent); }

/* Glass & Ghost */
.nf-btn--glass { --nf-btn-bg: color-mix(in srgb, var(--nf-surface) 58%, transparent); --nf-btn-fg: var(--nf-text-strong); --nf-btn-border: var(--nf-border-strong); --nf-btn-bg-hover: color-mix(in srgb, var(--nf-surface-hover) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nf-btn--ghost { --nf-btn-bg: transparent; --nf-btn-border: transparent; --nf-btn-fg: var(--nf-text-muted); --nf-btn-bg-hover: var(--nf-surface-hover); background: transparent; box-shadow: none; }
.nf-btn--ghost:hover { background: var(--nf-surface-hover); --nf-btn-fg: var(--nf-text-strong); border-color: transparent; }

/* Semantische Aktions-Buttons */
.nf-btn--success { --nf-btn-bg: var(--nf-success-bg); --nf-btn-fg: var(--nf-success); --nf-btn-border: var(--nf-success-line); --nf-btn-bg-hover: var(--nf-success-solid); box-shadow: none; }
.nf-btn--success:hover { --nf-btn-fg: #fff; border-color: transparent; box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--nf-success-solid) 60%, transparent); }

.nf-btn--warning { --nf-btn-bg: var(--nf-warning-bg); --nf-btn-fg: var(--nf-warning); --nf-btn-border: var(--nf-warning-line); --nf-btn-bg-hover: var(--nf-warning-solid); box-shadow: none; }
.nf-btn--warning:hover { --nf-btn-fg: #fff; border-color: transparent; box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--nf-warning-solid) 60%, transparent); }

.nf-btn--danger { --nf-btn-bg: var(--nf-danger-bg); --nf-btn-fg: var(--nf-danger); --nf-btn-border: var(--nf-danger-line); --nf-btn-bg-hover: var(--nf-danger-solid); box-shadow: none; }
.nf-btn--danger:hover { --nf-btn-bg: var(--nf-danger-solid); --nf-btn-fg: #fff; border-color: transparent; box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--nf-danger-solid) 60%, transparent); }

/* Button mit abgesetzter Icon-Kammer (.nf-btn--well) */
.nf-btn--well { padding-left: 5px; gap: var(--nf-space-3); }
.nf-btn__well {
  display: inline-grid; place-content: center; width: calc(var(--nf-btn-h) - 10px); height: calc(var(--nf-btn-h) - 10px);
  border-radius: calc(var(--nf-radius-control) - 3px); background: color-mix(in srgb, currentColor 14%, transparent); flex: none;
}

.nf-btn--xs { --nf-btn-h: 26px; --nf-btn-px: var(--nf-space-2); font-size: 11px; gap: 4px; }
.nf-btn--sm { --nf-btn-h: 32px; --nf-btn-px: var(--nf-space-3); font-size: var(--nf-text-xs); }
.nf-btn--lg { --nf-btn-h: 48px; --nf-btn-px: var(--nf-space-5); font-size: var(--nf-text-md); }
.nf-btn--pill { border-radius: var(--nf-radius-full); }
.nf-btn--pill:focus-visible { border-radius: var(--nf-radius-full); }
.nf-btn--icon { --nf-btn-px: 0; width: var(--nf-btn-h); }
.nf-btn--block { width: 100%; }
.nf-btn:disabled, .nf-btn[aria-disabled='true'] { opacity: 0.45; pointer-events: none; box-shadow: none; }
.nf-btn[aria-busy='true'] { color: transparent; pointer-events: none; }
.nf-btn[aria-busy='true']::after {
  content: ''; position: absolute; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid var(--nf-btn-fg); border-right-color: transparent; animation: nf-spin 0.7s linear infinite;
}
@keyframes nf-spin { to { transform: rotate(360deg); } }

.nf-btn-group { display: inline-flex; align-items: center; vertical-align: middle; border-radius: var(--nf-radius-control); box-shadow: var(--nf-shadow-sm); }
.nf-btn-group > .nf-btn { border-radius: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.nf-btn-group > .nf-btn:first-child { border-top-left-radius: var(--nf-radius-control); border-bottom-left-radius: var(--nf-radius-control); }
.nf-btn-group > .nf-btn:last-child { border-top-right-radius: var(--nf-radius-control); border-bottom-right-radius: var(--nf-radius-control); }
.nf-btn-group > .nf-btn + .nf-btn { margin-left: -1px; }
.nf-btn-group > .nf-btn:hover, .nf-btn-group > .nf-btn:focus-visible { z-index: 2; }

/* Schwebende Aktions-/Speicherleiste (.nf-action-bar) */
.nf-action-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nf-space-3);
  padding: var(--nf-space-2) var(--nf-space-3) var(--nf-space-2) var(--nf-space-4);
  border-radius: var(--nf-radius-lg); border: 1px solid var(--nf-border-strong);
  background: color-mix(in srgb, var(--nf-bg-raised) 82%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--nf-highlight-top), var(--nf-shadow-lg); font-size: var(--nf-text-sm);
}
.nf-action-bar__info { display: flex; align-items: center; gap: var(--nf-space-2); color: var(--nf-text); font-weight: var(--nf-weight-medium); }
.nf-action-bar__msg { font-size: var(--nf-text-xs); color: var(--nf-text-muted); max-width: 46ch; }
.nf-action-bar__msg[data-tone='success'] { color: var(--nf-success); }
.nf-action-bar__msg[data-tone='warning'] { color: var(--nf-warning); }
.nf-action-bar__msg[data-tone='danger'] { color: var(--nf-danger); }
.nf-action-bar__actions { display: flex; align-items: center; gap: var(--nf-space-2); margin-left: auto; }
/* Schwebend am unteren Rand (ungespeicherte Änderungen); auf schmalen Bildschirmen über die volle Breite */
.nf-action-bar--floating { position: fixed; right: var(--nf-space-5); bottom: var(--nf-space-5); z-index: calc(var(--nf-z-sticky) + 5); justify-content: flex-end; max-width: calc(100vw - 2 * var(--nf-space-5)); animation: nf-toast-in var(--nf-duration-slow) var(--nf-ease-out); }
@media (max-width: 639px) { .nf-action-bar--floating { left: var(--nf-space-3); right: var(--nf-space-3); bottom: var(--nf-space-3); max-width: none; } }

/* ---------- Badges, Status-System & Filter-Chips ---------- */
.nf-badge {
  --nf-badge-bg: var(--nf-surface-2); --nf-badge-fg: var(--nf-text-muted); --nf-badge-line: var(--nf-border-strong);
  display: inline-flex; align-items: center; gap: 0.42em; height: 23px; padding-inline: 0.65em;
  border: 1px solid var(--nf-badge-line); border-radius: var(--nf-radius-full);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent) var(--nf-badge-bg);
  color: var(--nf-badge-fg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: var(--nf-text-xs); font-weight: var(--nf-weight-medium); line-height: 1; white-space: nowrap;
}
.nf-badge--lg { height: 27px; padding-inline: 0.8em; font-size: var(--nf-text-xs); }
.nf-badge--outline { background: transparent; box-shadow: none; }
.nf-badge--glass { background: color-mix(in srgb, var(--nf-surface) 60%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--nf-text-strong); }
.nf-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; box-shadow: 0 0 7px currentColor; }
.nf-badge--accent  { --nf-badge-bg: var(--nf-accent-soft); --nf-badge-fg: var(--nf-accent-soft-text); --nf-badge-line: color-mix(in srgb, var(--nf-accent) 38%, transparent); }
.nf-badge--success { --nf-badge-bg: var(--nf-success-bg); --nf-badge-fg: var(--nf-success); --nf-badge-line: var(--nf-success-line); }
.nf-badge--warning { --nf-badge-bg: var(--nf-warning-bg); --nf-badge-fg: var(--nf-warning); --nf-badge-line: var(--nf-warning-line); }
.nf-badge--danger  { --nf-badge-bg: var(--nf-danger-bg);  --nf-badge-fg: var(--nf-danger);  --nf-badge-line: var(--nf-danger-line); }
.nf-badge--info    { --nf-badge-bg: var(--nf-info-bg);    --nf-badge-fg: var(--nf-info);    --nf-badge-line: var(--nf-info-line); }
.nf-badge--glow    { box-shadow: 0 0 16px -4px currentColor, inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.nf-badge--solid   { --nf-badge-bg: var(--nf-accent-strong); --nf-badge-fg: var(--nf-on-accent); --nf-badge-line: transparent; font-weight: var(--nf-weight-semibold); }
.nf-badge--solid.nf-badge--success { --nf-badge-bg: var(--nf-success-solid); --nf-badge-fg: #fff; }
.nf-badge--solid.nf-badge--warning { --nf-badge-bg: var(--nf-warning-solid); --nf-badge-fg: #fff; }
.nf-badge--solid.nf-badge--danger  { --nf-badge-bg: var(--nf-danger-solid);  --nf-badge-fg: #fff; }

/* Zweiteiliges Key-Value-Badge (.nf-badge-kv, z. B. [ PORT | 25565 ]) */
.nf-badge-kv {
  display: inline-flex; align-items: stretch; height: 24px; border-radius: var(--nf-radius-sm);
  border: 1px solid var(--nf-border-strong); background: var(--nf-surface); overflow: hidden;
  font-size: 11px; line-height: 1; white-space: nowrap; box-shadow: var(--nf-highlight-top);
}
.nf-badge-kv__k { display: inline-flex; align-items: center; padding-inline: 7px; background: var(--nf-surface-2); color: var(--nf-text-muted); font-weight: var(--nf-weight-medium); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; border-right: 1px solid var(--nf-border); }
.nf-badge-kv__v { display: inline-flex; align-items: center; gap: 4px; padding-inline: 8px; font-family: var(--nf-font-mono); color: var(--nf-text-strong); font-weight: var(--nf-weight-medium); }
.nf-badge-kv[data-tone='accent'] .nf-badge-kv__v  { background: var(--nf-accent-soft); color: var(--nf-accent-soft-text); }
.nf-badge-kv[data-tone='success'] .nf-badge-kv__v { background: var(--nf-success-bg); color: var(--nf-success); }
.nf-badge-kv[data-tone='warning'] .nf-badge-kv__v { background: var(--nf-warning-bg); color: var(--nf-warning); }
.nf-badge-kv[data-tone='danger'] .nf-badge-kv__v  { background: var(--nf-danger-bg); color: var(--nf-danger); }

.nf-chip {
  display: inline-flex; align-items: center; gap: var(--nf-space-2); height: 32px; padding-inline: var(--nf-space-3);
  border-radius: var(--nf-radius-full); border: 1px solid var(--nf-border-strong);
  background: var(--nf-surface); color: var(--nf-text-muted); box-shadow: var(--nf-highlight-top);
  font-size: var(--nf-text-xs); font-weight: var(--nf-weight-medium); line-height: 1; white-space: nowrap;
  cursor: pointer; user-select: none; text-decoration: none;
  transition: background var(--nf-duration-fast), color var(--nf-duration-fast), border-color var(--nf-duration-fast), box-shadow var(--nf-duration-fast), transform var(--nf-duration-fast);
}
.nf-chip:hover { background: var(--nf-surface-hover); color: var(--nf-text-strong); border-color: var(--nf-border-control); }
.nf-chip[aria-pressed='true'], .nf-chip[aria-selected='true'], .nf-chip[aria-current='true'], .nf-chip[aria-current='page'] {
  background: var(--nf-accent-soft); color: var(--nf-accent-soft-text);
  border-color: color-mix(in srgb, var(--nf-accent) 48%, transparent);
  box-shadow: 0 0 14px -5px var(--nf-accent);
}
.nf-chip:not([aria-pressed='true'], [aria-selected='true'], [aria-current='true'], [aria-current='page']) .nf-chip__count { color: var(--nf-text-body); } /* Kontrast 4,5 : 1 */
.nf-chip__count { padding: 2px 6px; border-radius: var(--nf-radius-full); background: color-mix(in srgb, currentColor 14%, transparent); font-family: var(--nf-font-mono); font-size: 10.5px; }

/* Live-Status mit Sonar-Puls (.nf-status & .nf-status-pill) */
.nf-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.nf-status {
  --nf-st-color: var(--nf-slate-500);
  display: inline-flex; align-items: center; gap: 9px; font-size: var(--nf-text-sm); color: var(--nf-text-muted); position: relative; white-space: nowrap;
}
.nf-status::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--nf-st-color); flex: none; position: relative; z-index: 1;
}
.nf-status::after {
  content: ''; position: absolute; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--nf-st-color); opacity: 0; pointer-events: none;
}
.nf-status[data-status='online']      { --nf-st-color: var(--nf-green-500); color: var(--nf-text); }
.nf-status[data-status='online']::before { box-shadow: 0 0 8px color-mix(in srgb, var(--nf-st-color) 65%, transparent); }
.nf-status[data-status='online']::after  { animation: nf-sonar 2.4s var(--nf-ease-out) infinite; }
.nf-status[data-status='starting']    { --nf-st-color: var(--nf-amber-500); color: var(--nf-warning); }
.nf-status[data-status='starting']::before { animation: nf-pulse 1.1s ease-in-out infinite; }
.nf-status[data-status='starting']::after  { animation: nf-sonar 1.6s var(--nf-ease-out) infinite; }
.nf-status[data-status='maintenance'], .nf-status[data-status='degraded'] { --nf-st-color: var(--nf-amber-500); color: var(--nf-warning); }
.nf-status[data-status='maintenance']::before, .nf-status[data-status='degraded']::before { box-shadow: 0 0 0 3px var(--nf-warning-bg); }
.nf-status[data-status='error']       { --nf-st-color: var(--nf-red-500); color: var(--nf-danger); }
.nf-status[data-status='error']::before { box-shadow: 0 0 10px color-mix(in srgb, var(--nf-st-color) 60%, transparent); }
.nf-status[data-status='offline']     { --nf-st-color: transparent; }
.nf-status[data-status='offline']::before { border: 2px solid var(--nf-slate-500); background: transparent; }
[data-brand='games'] .nf-status[data-status='online'] { --nf-st-color: var(--nf-neon-400); }
[data-brand='games'] .nf-status[data-status='error']  { --nf-st-color: var(--nf-magenta-500); }
@keyframes nf-pulse { 50% { opacity: 0.35; } }
@keyframes nf-sonar { 0% { transform: scale(1); opacity: 0.65; } 100% { transform: scale(2.6); opacity: 0; } }

/* Eingerahmte Status-Kapsel (.nf-status-pill) */
.nf-status-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding-inline: 11px;
  border-radius: var(--nf-radius-full); border: 1px solid var(--nf-border-strong);
  background: var(--nf-surface-2); font-size: var(--nf-text-xs); font-weight: var(--nf-weight-medium);
  box-shadow: var(--nf-highlight-top);
}
.nf-status-pill[data-status='online']      { background: var(--nf-success-bg); border-color: var(--nf-success-line); color: var(--nf-success); }
.nf-status-pill[data-status='starting'], .nf-status-pill[data-status='maintenance'], .nf-status-pill[data-status='degraded'] { background: var(--nf-warning-bg); border-color: var(--nf-warning-line); color: var(--nf-warning); }
.nf-status-pill[data-status='error']       { background: var(--nf-danger-bg); border-color: var(--nf-danger-line); color: var(--nf-danger); }
.nf-status-pill__meta { padding-left: 8px; margin-left: 2px; border-left: 1px solid currentColor; opacity: 0.8; font-family: var(--nf-font-mono); font-size: 11px; }

/* Verfügbarkeits-Leiste (.nf-uptime — 24/30-Segmente-Grafik) */
.nf-uptime { display: flex; flex-direction: column; gap: var(--nf-space-2); }
.nf-uptime__head { display: flex; align-items: center; justify-content: space-between; gap: var(--nf-space-2); font-size: var(--nf-text-xs); color: var(--nf-text-muted); }
.nf-uptime__head b { color: var(--nf-success); font-family: var(--nf-font-mono); font-weight: var(--nf-weight-semibold); }
.nf-uptime__bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 26px; align-items: stretch; }
.nf-uptime__bars i {
  display: block; border-radius: 3px; background: var(--nf-green-500); opacity: 0.85;
  transition: transform var(--nf-duration-fast) var(--nf-ease-spring), opacity var(--nf-duration-fast), filter var(--nf-duration-fast);
}
[data-brand='games'] .nf-uptime__bars i { border-radius: 1px; background: var(--nf-neon-500); }
.nf-uptime__bars i:hover { transform: scaleY(1.14); opacity: 1; filter: brightness(1.15); z-index: 2; }
.nf-uptime__bars i[data-s='warn'] { background: var(--nf-amber-500); opacity: 1; }
.nf-uptime__bars i[data-s='down'] { background: var(--nf-red-500); opacity: 1; }
.nf-uptime__bars i[data-s='none'] { background: var(--nf-border-strong); opacity: 0.45; }
.nf-uptime__foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--nf-text-faint); font-family: var(--nf-font-mono); }

/* ---------- Formular (Modernisiert) ---------- */
.nf-field { display: flex; flex-direction: column; gap: 6px; }
.nf-label { font-size: var(--nf-text-sm); font-weight: var(--nf-weight-medium); color: var(--nf-text); display: flex; align-items: center; justify-content: space-between; gap: var(--nf-space-2); }
.nf-label__opt { font-size: var(--nf-text-xs); font-weight: var(--nf-weight-regular); color: var(--nf-text-muted); }
.nf-label--required { justify-content: flex-start; gap: var(--nf-space-1); }
.nf-label--required::after { content: '*'; color: var(--nf-danger); font-weight: var(--nf-weight-semibold); }
.nf-hint { font-size: var(--nf-text-xs); color: var(--nf-text-muted); }
.nf-error-text { font-size: var(--nf-text-xs); color: var(--nf-danger); display: flex; gap: var(--nf-space-1); align-items: center; }

.nf-input, .nf-select, .nf-textarea {
  width: 100%; min-height: 40px; padding: 0 var(--nf-space-3);
  background: var(--nf-surface-inset); color: var(--nf-text-strong);
  border: 1px solid var(--nf-border-control); border-radius: var(--nf-radius-control);
  box-shadow: var(--nf-input-shadow); font-size: var(--nf-text-sm);
  transition: border-color var(--nf-duration-fast), box-shadow var(--nf-duration-base), background-color var(--nf-duration-fast);
}
.nf-textarea { padding-block: 10px; min-height: 96px; resize: vertical; line-height: var(--nf-leading-normal); }
.nf-input::placeholder, .nf-textarea::placeholder { color: var(--nf-text-faint); }
.nf-input:hover, .nf-select:hover, .nf-textarea:hover { border-color: var(--nf-border-strong); }
.nf-input:focus-visible, .nf-select:focus-visible, .nf-textarea:focus-visible {
  border-color: var(--nf-accent); background: var(--nf-surface);
  box-shadow: 0 0 0 3px var(--nf-accent-soft), var(--nf-input-shadow); border-radius: var(--nf-radius-control);
}
.nf-input[aria-invalid='true'], .nf-select[aria-invalid='true'], .nf-textarea[aria-invalid='true'] {
  border-color: var(--nf-danger-line); box-shadow: 0 0 0 3px var(--nf-danger-bg), var(--nf-input-shadow);
}
.nf-input:disabled, .nf-select:disabled, .nf-textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.nf-select { appearance: none; padding-right: var(--nf-space-7); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8aa1' stroke-width='2' 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 10px center; background-size: 16px; }

.nf-input-group { position: relative; display: flex; align-items: center; }
.nf-input-group > .nf-icon { position: absolute; left: 12px; color: var(--nf-text-faint); pointer-events: none; transition: color var(--nf-duration-fast); }
.nf-input-group:focus-within > .nf-icon { color: var(--nf-accent); }
.nf-input-group > .nf-input { padding-left: 38px; }
.nf-input-group > .nf-kbd, .nf-input-group > .nf-btn { position: absolute; right: 6px; }

/* Verbundene Prefix-/Suffix-Felder (.nf-input-addon, z. B. [ https:// | app | .neofee.network ]) */
.nf-input-addon {
  display: flex; align-items: stretch; width: 100%; border-radius: var(--nf-radius-control);
  border: 1px solid var(--nf-border-control); background: var(--nf-surface-inset); box-shadow: var(--nf-input-shadow);
  overflow: hidden; transition: border-color var(--nf-duration-fast), box-shadow var(--nf-duration-base);
}
.nf-input-addon:hover { border-color: var(--nf-border-strong); }
.nf-input-addon:focus-within { border-color: var(--nf-accent); box-shadow: 0 0 0 3px var(--nf-accent-soft), var(--nf-input-shadow); background: var(--nf-surface); }
.nf-input-addon__tag {
  display: inline-flex; align-items: center; padding-inline: var(--nf-space-3);
  background: var(--nf-surface-2); color: var(--nf-text-muted); font-family: var(--nf-font-mono); font-size: var(--nf-text-xs);
  white-space: nowrap; user-select: none;
}
.nf-input-addon__tag:first-child { border-right: 1px solid var(--nf-border); }
.nf-input-addon__tag:last-child  { border-left: 1px solid var(--nf-border); }
.nf-input-addon > .nf-input { border: 0; border-radius: 0; box-shadow: none; background: transparent; min-height: 38px; }
.nf-input-addon > .nf-input:focus-visible { box-shadow: none; }

/* Floating-Label-Feld (.nf-floating) */
.nf-floating { position: relative; display: block; }
.nf-floating > .nf-input { height: 48px; padding-top: 16px; padding-bottom: 2px; }
.nf-floating > .nf-input::placeholder { color: transparent; }
.nf-floating > label {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%); pointer-events: none;
  color: var(--nf-text-faint); font-size: var(--nf-text-sm); transform-origin: left top;
  transition: top var(--nf-duration-fast) var(--nf-ease-out), transform var(--nf-duration-fast) var(--nf-ease-out), font-size var(--nf-duration-fast), color var(--nf-duration-fast);
}
.nf-floating > .nf-input:focus ~ label,
.nf-floating > .nf-input:not(:placeholder-shown) ~ label {
  top: 7px; transform: translateY(0); font-size: 11px; font-weight: var(--nf-weight-medium); color: var(--nf-accent);
}

/* Taktiler Zahlen-Stepper (.nf-stepper-input: [ - | 16 | + ]) */
.nf-stepper-input {
  display: inline-flex; align-items: stretch; height: 40px; border-radius: var(--nf-radius-control);
  border: 1px solid var(--nf-border-control); background: var(--nf-surface-inset); box-shadow: var(--nf-input-shadow); overflow: hidden;
}
.nf-stepper-input:focus-within { border-color: var(--nf-accent); box-shadow: 0 0 0 3px var(--nf-accent-soft); }
.nf-stepper-input button {
  width: 36px; display: grid; place-content: center; color: var(--nf-text-muted); background: var(--nf-surface-2);
  font-size: var(--nf-text-md); font-weight: var(--nf-weight-medium); transition: background var(--nf-duration-fast), color var(--nf-duration-fast);
}
.nf-stepper-input button:hover { background: var(--nf-surface-hover); color: var(--nf-text-strong); }
.nf-stepper-input input {
  width: 58px; border: 0; border-inline: 1px solid var(--nf-border); background: transparent;
  text-align: center; font-family: var(--nf-font-mono); font-size: var(--nf-text-sm); font-weight: var(--nf-weight-semibold);
  color: var(--nf-text-strong); font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield;
}
.nf-stepper-input input::-webkit-inner-spin-button, .nf-stepper-input input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.nf-stepper-input input:focus-visible { box-shadow: none; }

/* Passwort-/Schlüssel-Stärke (.nf-strength) */
.nf-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; height: 4px; margin-top: 2px; }
.nf-strength i { display: block; border-radius: var(--nf-radius-full); background: var(--nf-border-strong); transition: background var(--nf-duration-base); }
.nf-strength[data-score='1'] i:nth-child(-n+1) { background: var(--nf-red-500); }
.nf-strength[data-score='2'] i:nth-child(-n+2) { background: var(--nf-amber-500); }
.nf-strength[data-score='3'] i:nth-child(-n+3) { background: var(--nf-accent); }
.nf-strength[data-score='4'] i { background: var(--nf-green-500); }

.nf-check { display: inline-flex; align-items: flex-start; gap: var(--nf-space-3); font-size: var(--nf-text-sm); color: var(--nf-text); cursor: pointer; }
.nf-check input { appearance: none; width: 18px; height: 18px; margin-top: 1px; flex: none; display: grid; place-content: center;
  border: 1px solid var(--nf-border-control); background: var(--nf-surface-inset); border-radius: 5px; box-shadow: var(--nf-input-shadow); cursor: pointer;
  transition: background var(--nf-duration-fast), border-color var(--nf-duration-fast), box-shadow var(--nf-duration-fast); }
.nf-check input[type='radio'] { border-radius: 50%; }
.nf-check input::before { content: ''; width: 10px; height: 10px; transform: scale(0); transition: transform var(--nf-duration-fast) var(--nf-ease-spring); background: var(--nf-on-accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.nf-check input[type='radio']::before { clip-path: circle(50%); width: 8px; height: 8px; }
.nf-check input:checked { background: var(--nf-accent-strong); border-color: var(--nf-accent-strong); box-shadow: 0 0 12px -3px var(--nf-accent); }
.nf-check input:checked::before { transform: scale(1); }
.nf-check input:focus-visible { box-shadow: var(--nf-focus-ring); }

.nf-switch { display: inline-flex; align-items: center; gap: var(--nf-space-3); font-size: var(--nf-text-sm); color: var(--nf-text); cursor: pointer; }
.nf-switch input { appearance: none; width: 42px; height: 24px; flex: none; border-radius: var(--nf-radius-full); position: relative; cursor: pointer;
  border: 1px solid var(--nf-border-strong); background: var(--nf-surface-inset); box-shadow: var(--nf-input-shadow);
  transition: background var(--nf-duration-base) var(--nf-ease-out), border-color var(--nf-duration-base), box-shadow var(--nf-duration-base); }
.nf-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: var(--nf-shadow-sm); transition: transform var(--nf-duration-base) var(--nf-ease-spring); }
.nf-switch input:checked { background: var(--nf-accent-strong); border-color: transparent; box-shadow: 0 0 14px -3px var(--nf-accent); }
.nf-switch input:checked::after { transform: translateX(18px); }
.nf-switch input:focus-visible { box-shadow: var(--nf-focus-ring); border-radius: var(--nf-radius-full); }

/* Moderne Auswahl-Karten (.nf-choice-grid & .nf-choice für Radio/Checkbox) */
.nf-choice-grid { display: grid; gap: var(--nf-space-3); grid-template-columns: repeat(auto-fit, minmax(var(--nf-min, 210px), 1fr)); }
.nf-choice {
  position: relative; display: flex; align-items: flex-start; gap: var(--nf-space-3); padding: var(--nf-space-4);
  border-radius: var(--nf-radius-card); border: 1px solid var(--nf-border-strong); background: var(--nf-surface);
  box-shadow: var(--nf-highlight-top), var(--nf-shadow-sm); cursor: pointer; user-select: none;
  transition: border-color var(--nf-duration-fast), background var(--nf-duration-base), box-shadow var(--nf-duration-base), transform var(--nf-duration-fast) var(--nf-ease-spring);
}
.nf-choice:hover { border-color: var(--nf-border-control); background: var(--nf-surface-2); transform: translateY(-1px); }
.nf-choice > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nf-choice__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nf-choice__title { font-size: var(--nf-text-sm); font-weight: var(--nf-weight-semibold); color: var(--nf-text-strong); display: flex; align-items: center; gap: var(--nf-space-2); }
.nf-choice__desc { font-size: var(--nf-text-xs); color: var(--nf-text-muted); line-height: var(--nf-leading-snug); }
.nf-choice__check {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--nf-border-control); background: var(--nf-surface-inset);
  display: grid; place-content: center; flex: none; transition: background var(--nf-duration-fast), border-color var(--nf-duration-fast), transform var(--nf-duration-fast) var(--nf-ease-spring);
}
.nf-choice__check::after {
  content: ''; width: 9px; height: 9px; transform: scale(0); background: var(--nf-on-accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transition: transform var(--nf-duration-fast) var(--nf-ease-spring);
}
.nf-choice:has(> input:checked) {
  border-color: var(--nf-accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--nf-accent-soft) 65%, var(--nf-surface)), var(--nf-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--nf-accent) 40%, transparent), 0 8px 24px -10px color-mix(in srgb, var(--nf-accent) 45%, transparent);
}
.nf-choice:has(> input:checked) .nf-choice__check { background: var(--nf-accent-strong); border-color: transparent; transform: scale(1.05); }
.nf-choice:has(> input:checked) .nf-choice__check::after { transform: scale(1); }
.nf-choice:has(> input:focus-visible) { box-shadow: var(--nf-focus-ring); }

/* Einstellungs-Zeilenkarte mit Schalter (.nf-switch-card) */
.nf-switch-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nf-space-4); padding: var(--nf-space-3) var(--nf-space-4);
  border-radius: var(--nf-radius-card); border: 1px solid var(--nf-border); background: var(--nf-surface);
  box-shadow: var(--nf-highlight-top); cursor: pointer; transition: border-color var(--nf-duration-fast), background var(--nf-duration-fast);
}
.nf-switch-card:hover { border-color: var(--nf-border-strong); background: var(--nf-surface-2); }
.nf-switch-card:has(input:checked) { border-color: color-mix(in srgb, var(--nf-accent) 38%, var(--nf-border)); }
.nf-switch-card__info { display: flex; align-items: center; gap: var(--nf-space-3); min-width: 0; }
.nf-switch-card__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nf-switch-card__title { font-size: var(--nf-text-sm); font-weight: var(--nf-weight-medium); color: var(--nf-text-strong); }
.nf-switch-card__desc { font-size: var(--nf-text-xs); color: var(--nf-text-muted); }

.nf-range {
  appearance: none; width: 100%; height: 6px; border-radius: var(--nf-radius-full);
  background: var(--nf-surface-inset); border: 1px solid var(--nf-border-strong); cursor: pointer;
}
.nf-range::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--nf-accent); border: 2px solid var(--nf-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); transition: transform var(--nf-duration-fast) var(--nf-ease-spring), box-shadow var(--nf-duration-fast);
}
.nf-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--nf-accent); border: 2px solid var(--nf-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); transition: transform var(--nf-duration-fast) var(--nf-ease-spring), box-shadow var(--nf-duration-fast);
}
.nf-range:hover::-webkit-slider-thumb { transform: scale(1.14); box-shadow: 0 0 12px var(--nf-accent); }
.nf-range:hover::-moz-range-thumb { transform: scale(1.14); box-shadow: 0 0 12px var(--nf-accent); }
.nf-range:focus-visible { box-shadow: var(--nf-focus-ring); border-radius: var(--nf-radius-full); }

.nf-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--nf-space-2);
  padding: var(--nf-space-5) var(--nf-space-4); border: 1.5px dashed var(--nf-border-strong); border-radius: var(--nf-radius-card);
  background: radial-gradient(circle at 50% 0%, var(--nf-accent-soft), transparent 70%), color-mix(in srgb, var(--nf-surface-inset) 65%, transparent);
  color: var(--nf-text-muted); cursor: pointer;
  transition: border-color var(--nf-duration-base), background-color var(--nf-duration-base), color var(--nf-duration-base), transform var(--nf-duration-fast);
}
.nf-dropzone:hover, .nf-dropzone[data-dragover] { border-color: var(--nf-accent); background-color: var(--nf-accent-soft); color: var(--nf-text-strong); }
.nf-dropzone input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nf-dropzone:has(input:focus-visible) { border-color: var(--nf-accent); box-shadow: var(--nf-focus-ring); }

.nf-snippet {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nf-space-2);
  padding: 6px 6px 6px var(--nf-space-3); background: var(--nf-surface-inset);
  border: 1px solid var(--nf-border-strong); border-radius: var(--nf-radius-control); box-shadow: var(--nf-input-shadow);
  font-family: var(--nf-font-mono); font-size: var(--nf-text-xs); color: var(--nf-text);
}
.nf-snippet__code { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.nf-snippet__prompt { color: var(--nf-accent); user-select: none; margin-right: var(--nf-space-2); font-weight: var(--nf-weight-semibold); }

.nf-segmented { display: inline-flex; padding: 3px; gap: 3px; background: var(--nf-surface-inset); border: 1px solid var(--nf-border-strong); border-radius: calc(var(--nf-radius-control) + 3px); box-shadow: var(--nf-input-shadow); }
.nf-segmented button { height: 30px; padding-inline: var(--nf-space-3); border-radius: var(--nf-radius-control); font-size: var(--nf-text-xs); font-weight: var(--nf-weight-medium); color: var(--nf-text-muted); display: inline-flex; align-items: center; gap: 6px; transition: background var(--nf-duration-fast), color var(--nf-duration-fast), box-shadow var(--nf-duration-fast); }
.nf-segmented button:hover { color: var(--nf-text-strong); }
.nf-segmented button[aria-pressed='true'], .nf-segmented button[aria-checked='true'] { background: var(--nf-surface-hover); color: var(--nf-text-strong); box-shadow: var(--nf-highlight-top), var(--nf-shadow-sm); }

/* ---------- Karte ---------- */
.nf-card {
  --nf-card-pad: var(--nf-space-5);
  background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-card);
  padding: var(--nf-card-pad); box-shadow: var(--nf-highlight-top), var(--nf-shadow-sm); position: relative;
}
.nf-card--flat { box-shadow: none; background: var(--nf-surface-2); }
.nf-card--glass { background: color-mix(in srgb, var(--nf-surface) 70%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.nf-card--accent { border-color: color-mix(in srgb, var(--nf-accent) 40%, var(--nf-border)); background: linear-gradient(180deg, color-mix(in srgb, var(--nf-accent-soft) 45%, var(--nf-surface)) 0%, var(--nf-surface) 100%); }
.nf-card--compact { --nf-card-pad: var(--nf-space-4); }
.nf-card--interactive { transition: border-color var(--nf-duration-base), transform var(--nf-duration-base) var(--nf-ease-out), box-shadow var(--nf-duration-base); cursor: pointer; text-decoration: none; color: inherit; display: block; }
.nf-card--interactive:hover { border-color: var(--nf-border-strong); transform: translateY(-2px); box-shadow: var(--nf-highlight-top), var(--nf-shadow-md); color: inherit; }
.nf-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--nf-space-3); margin-bottom: var(--nf-space-4); }
.nf-card__title { color: var(--nf-text-strong); font-family: var(--nf-font-heading); text-transform: var(--nf-heading-transform); letter-spacing: var(--nf-heading-tracking); font-size: var(--nf-text-md); font-weight: var(--nf-weight-semibold); }
.nf-card__footer { margin-top: var(--nf-space-4); padding-top: var(--nf-space-4); border-top: 1px solid var(--nf-border); display: flex; gap: var(--nf-space-2); justify-content: flex-end; }

/* ---------- Monogramm & Dienst-Kachel ---------- */
.nf-monogram {
  --nf-mono-bg: var(--nf-accent-soft); --nf-mono-fg: var(--nf-accent-soft-text);
  display: inline-grid; place-content: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--nf-radius-md); background: var(--nf-mono-bg); color: var(--nf-mono-fg);
  font-family: var(--nf-font-mono); font-size: var(--nf-text-sm); font-weight: var(--nf-weight-semibold); letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nf-mono-fg) 22%, transparent);
}
.nf-monogram--sm { width: 32px; height: 32px; font-size: var(--nf-text-xs); border-radius: var(--nf-radius-sm); }
.nf-monogram--lg { width: 56px; height: 56px; font-size: var(--nf-text-md); border-radius: var(--nf-radius-lg); }
.nf-monogram[data-tint='blue']    { --nf-mono-bg: var(--nf-tint-blue-bg);    --nf-mono-fg: var(--nf-tint-blue-fg); }
.nf-monogram[data-tint='emerald'] { --nf-mono-bg: var(--nf-tint-emerald-bg); --nf-mono-fg: var(--nf-tint-emerald-fg); }
.nf-monogram[data-tint='amber']   { --nf-mono-bg: var(--nf-tint-amber-bg);   --nf-mono-fg: var(--nf-tint-amber-fg); }
.nf-monogram[data-tint='violet']  { --nf-mono-bg: var(--nf-tint-violet-bg);  --nf-mono-fg: var(--nf-tint-violet-fg); }
.nf-monogram[data-tint='rose']    { --nf-mono-bg: var(--nf-tint-rose-bg);    --nf-mono-fg: var(--nf-tint-rose-fg); }
.nf-monogram[data-tint='teal']    { --nf-mono-bg: var(--nf-tint-teal-bg);    --nf-mono-fg: var(--nf-tint-teal-fg); }
.nf-monogram[data-tint='cyan']    { --nf-mono-bg: var(--nf-tint-cyan-bg);    --nf-mono-fg: var(--nf-tint-cyan-fg); }
.nf-monogram[data-tint='lime']    { --nf-mono-bg: var(--nf-tint-lime-bg);    --nf-mono-fg: var(--nf-tint-lime-fg); }
.nf-monogram[data-tint='fuchsia'] { --nf-mono-bg: var(--nf-tint-fuchsia-bg); --nf-mono-fg: var(--nf-tint-fuchsia-fg); }
.nf-monogram[data-tint='orange']  { --nf-mono-bg: var(--nf-tint-orange-bg);  --nf-mono-fg: var(--nf-tint-orange-fg); }
.nf-monogram[data-tint='indigo']  { --nf-mono-bg: var(--nf-tint-indigo-bg);  --nf-mono-fg: var(--nf-tint-indigo-fg); }
.nf-monogram[data-tint='sky']     { --nf-mono-bg: var(--nf-tint-sky-bg);     --nf-mono-fg: var(--nf-tint-sky-fg); }

.nf-tile {
  display: flex; gap: var(--nf-space-4); align-items: flex-start; text-align: left; width: 100%;
  padding: var(--nf-space-4); border-radius: var(--nf-radius-card);
  background: var(--nf-surface); border: 1px solid var(--nf-border); color: inherit; text-decoration: none; position: relative; overflow: hidden;
  transition: border-color var(--nf-duration-base), transform var(--nf-duration-base) var(--nf-ease-out), box-shadow var(--nf-duration-base), background var(--nf-duration-base);
}
.nf-tile::before { /* Akzentschimmer am oberen Rand beim Hover */
  content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--nf-gradient); opacity: 0; transition: opacity var(--nf-duration-base);
}
.nf-tile:hover { border-color: var(--nf-border-strong); transform: translateY(-2px); box-shadow: var(--nf-shadow-md); color: inherit; background: var(--nf-surface-2); }
.nf-tile:hover::before { opacity: 1; }
.nf-tile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nf-tile__title { color: var(--nf-text-strong); font-weight: var(--nf-weight-semibold); font-size: var(--nf-text-md); }
.nf-tile__desc { color: var(--nf-text-muted); font-size: var(--nf-text-sm); line-height: var(--nf-leading-snug); }
.nf-tile__meta { margin-top: var(--nf-space-2); color: var(--nf-text-faint); font-family: var(--nf-font-mono); font-size: var(--nf-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-tile__arrow { color: var(--nf-text-faint); transition: transform var(--nf-duration-base) var(--nf-ease-out), color var(--nf-duration-base); align-self: center; }
.nf-tile:hover .nf-tile__arrow { transform: translateX(3px); color: var(--nf-accent); }
.nf-tile[aria-busy='true'] .nf-tile__meta::after { content: ' · wird geöffnet …'; color: var(--nf-accent); }

/* ---------- Kennzahl, Meter, Fortschritt ---------- */
.nf-stat { display: flex; flex-direction: column; gap: var(--nf-space-1); }
.nf-stat__label { font-size: var(--nf-text-xs); color: var(--nf-text-muted); text-transform: uppercase; letter-spacing: var(--nf-tracking-wide); font-weight: var(--nf-weight-medium); }
.nf-stat__value { font-size: var(--nf-text-2xl); color: var(--nf-text-strong); font-weight: var(--nf-weight-semibold); letter-spacing: var(--nf-tracking-tight); font-variant-numeric: tabular-nums; line-height: 1.1; font-family: var(--nf-font-heading); }
.nf-stat__value small { font-size: var(--nf-text-sm); color: var(--nf-text-muted); font-weight: var(--nf-weight-regular); margin-left: 2px; letter-spacing: 0; }
.nf-stat__delta { font-size: var(--nf-text-xs); color: var(--nf-text-muted); }
.nf-stat__delta[data-trend='up'] { color: var(--nf-success); }
.nf-stat__delta[data-trend='down'] { color: var(--nf-danger); }

.nf-meter { display: flex; flex-direction: column; gap: var(--nf-space-2); }
.nf-meter__head { display: flex; justify-content: space-between; font-size: var(--nf-text-xs); color: var(--nf-text-muted); }
.nf-meter__head b { color: var(--nf-text); font-weight: var(--nf-weight-medium); font-variant-numeric: tabular-nums; }
.nf-meter__track { height: 6px; border-radius: var(--nf-radius-full); background: var(--nf-surface-inset); border: 1px solid var(--nf-border); overflow: hidden; }
.nf-meter__bar { height: 100%; width: var(--nf-value, 0%); border-radius: inherit; background: var(--nf-accent); transition: width var(--nf-duration-slow) var(--nf-ease-out); }
.nf-meter[data-level='warn'] .nf-meter__bar { background: var(--nf-amber-500); }
.nf-meter[data-level='crit'] .nf-meter__bar { background: var(--nf-red-500); }
[data-brand='games'] .nf-meter__bar { background: linear-gradient(90deg, var(--nf-neon-600), var(--nf-neon-400)); box-shadow: 0 0 8px rgba(61, 255, 166, 0.5); }
[data-brand='games'] .nf-meter[data-level='crit'] .nf-meter__bar { background: linear-gradient(90deg, var(--nf-magenta-600), var(--nf-magenta-400)); box-shadow: 0 0 8px rgba(245, 48, 138, 0.5); }
[data-brand='games'] .nf-meter__track { border-radius: 0; }
[data-brand='games'] .nf-meter__bar { border-radius: 0; }

.nf-progress { height: 4px; width: 100%; background: var(--nf-surface-inset); border-radius: var(--nf-radius-full); overflow: hidden; position: relative; }
.nf-progress::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--nf-value, 35%); background: var(--nf-gradient); border-radius: inherit; }
.nf-progress[data-indeterminate]::after { width: 35%; animation: nf-indeterminate 1.3s var(--nf-ease-in-out) infinite; }
@keyframes nf-indeterminate { from { left: -35%; } to { left: 100%; } }

/* Mini-Balkendiagramm / Sparkline (rein CSS, Wert je Balken über --v: 0%..100%) */
.nf-bars { display: flex; align-items: flex-end; gap: 3px; height: 28px; padding-top: 2px; }
.nf-bars i { flex: 1; min-width: 4px; height: var(--v, 25%); border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--nf-accent) 45%, transparent); transition: height var(--nf-duration-base) var(--nf-ease-out), background var(--nf-duration-fast); }
.nf-bars i:last-child, .nf-bars i:hover { background: var(--nf-accent); }
.nf-bars[data-level='warn'] i:last-child { background: var(--nf-amber-500); }
.nf-bars[data-level='crit'] i:last-child { background: var(--nf-red-500); }

/* ---------- Tabelle ---------- */
.nf-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--nf-border); border-radius: var(--nf-radius-card); background: var(--nf-surface); }
.nf-table-wrap--flush { border: 0; border-radius: 0; background: transparent; }
.nf-table { width: 100%; font-size: var(--nf-text-sm); }
.nf-table th { text-align: left; font-weight: var(--nf-weight-medium); color: var(--nf-text-muted); font-size: var(--nf-text-xs); text-transform: uppercase; letter-spacing: var(--nf-tracking-wide);
  padding: var(--nf-space-3) var(--nf-space-4); border-bottom: 1px solid var(--nf-border); background: var(--nf-surface-2); white-space: nowrap; }
.nf-table td { padding: var(--nf-space-3) var(--nf-space-4); border-bottom: 1px solid var(--nf-border); color: var(--nf-text-body); vertical-align: middle; }
.nf-table tr:last-child td { border-bottom: 0; }
.nf-table tbody tr { transition: background var(--nf-duration-fast); }
.nf-table tbody tr:hover { background: var(--nf-surface-hover); }
.nf-table .nf-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--nf-font-mono); font-size: var(--nf-text-xs); }
.nf-table--compact td, .nf-table--compact th { padding: var(--nf-space-2) var(--nf-space-3); }

/* ---------- Tabs ---------- */
.nf-tabs { display: flex; gap: var(--nf-space-1); border-bottom: 1px solid var(--nf-border); overflow-x: auto; scrollbar-width: none; }
.nf-tabs [role='tab'] { position: relative; height: 40px; padding-inline: var(--nf-space-3); font-size: var(--nf-text-sm); font-weight: var(--nf-weight-medium); color: var(--nf-text-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--nf-space-2); }
.nf-tabs [role='tab']:hover { color: var(--nf-text-strong); }
.nf-tabs [role='tab'][aria-selected='true'] { color: var(--nf-text-strong); }
.nf-tabs [role='tab'][aria-selected='true']::after { content: ''; position: absolute; left: var(--nf-space-2); right: var(--nf-space-2); bottom: -1px; height: 2px; background: var(--nf-accent); border-radius: 2px 2px 0 0; }
[data-brand='games'] .nf-tabs [role='tab'][aria-selected='true']::after { box-shadow: 0 0 10px var(--nf-accent); }
.nf-tabs [role='tab'] .nf-badge { height: 18px; }
/* Reiter als Knopf oder Link (z. B. Router-Links mit aria-current="page"): .nf-tab verhält sich wie [role='tab'] */
.nf-tabs .nf-tab { position: relative; height: 40px; padding-inline: var(--nf-space-3); font-size: var(--nf-text-sm); font-weight: var(--nf-weight-medium); color: var(--nf-text-muted); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--nf-space-2); text-decoration: none; background: none; border: 0; cursor: pointer; flex: none; }
.nf-tabs .nf-tab:hover { color: var(--nf-text-strong); }
.nf-tabs .nf-tab[aria-selected='true'], .nf-tabs .nf-tab[aria-current='page'], .nf-tabs .nf-tab[aria-current='true'] { color: var(--nf-text-strong); }
.nf-tabs .nf-tab[aria-selected='true']::after, .nf-tabs .nf-tab[aria-current='page']::after, .nf-tabs .nf-tab[aria-current='true']::after { content: ''; position: absolute; left: var(--nf-space-2); right: var(--nf-space-2); bottom: -1px; height: 2px; background: var(--nf-accent); border-radius: 2px 2px 0 0; }
[data-brand='games'] .nf-tabs .nf-tab[aria-current='page']::after, [data-brand='games'] .nf-tabs .nf-tab[aria-selected='true']::after { box-shadow: 0 0 10px var(--nf-accent); }
.nf-tabs .nf-tab .nf-badge { height: 18px; }
.nf-tabs:has(> .nf-tab:focus-visible) { overflow-x: auto; }
.nf-tabs--sticky { position: sticky; top: var(--nf-topbar); z-index: var(--nf-z-sticky); background: color-mix(in srgb, var(--nf-bg) 80%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-inline: var(--nf-space-3); }

/* ---------- Hinweis, Toast ---------- */
.nf-alert {
  --nf-alert-fg: var(--nf-info); --nf-alert-bg: var(--nf-info-bg); --nf-alert-line: var(--nf-info-line);
  display: flex; gap: var(--nf-space-3); align-items: flex-start; padding: var(--nf-space-3) var(--nf-space-4);
  border: 1px solid var(--nf-alert-line); border-radius: var(--nf-radius-md); background: var(--nf-alert-bg); color: var(--nf-text-body); font-size: var(--nf-text-sm);
}
.nf-alert > .nf-icon { color: var(--nf-alert-fg); margin-top: 1px; }
.nf-alert__title { color: var(--nf-text-strong); font-weight: var(--nf-weight-semibold); display: block; }
.nf-alert--success { --nf-alert-fg: var(--nf-success); --nf-alert-bg: var(--nf-success-bg); --nf-alert-line: var(--nf-success-line); }
.nf-alert--warning { --nf-alert-fg: var(--nf-warning); --nf-alert-bg: var(--nf-warning-bg); --nf-alert-line: var(--nf-warning-line); }
.nf-alert--danger  { --nf-alert-fg: var(--nf-danger);  --nf-alert-bg: var(--nf-danger-bg);  --nf-alert-line: var(--nf-danger-line); }

.nf-toast-region { position: fixed; right: var(--nf-space-4); bottom: var(--nf-space-4); z-index: var(--nf-z-toast); display: flex; flex-direction: column; gap: var(--nf-space-2); max-width: min(380px, calc(100vw - 2rem)); }
.nf-toast { display: flex; gap: var(--nf-space-3); align-items: flex-start; padding: var(--nf-space-3) var(--nf-space-4);
  background: var(--nf-bg-raised); border: 1px solid var(--nf-border-strong); border-radius: var(--nf-radius-md); box-shadow: var(--nf-shadow-lg); font-size: var(--nf-text-sm); color: var(--nf-text-body);
  animation: nf-toast-in var(--nf-duration-slow) var(--nf-ease-out); }
.nf-toast > .nf-icon { color: var(--nf-success); }
.nf-toast[data-tone='danger'] > .nf-icon { color: var(--nf-danger); }
.nf-toast[data-tone='warning'] > .nf-icon { color: var(--nf-warning); }
.nf-toast[data-tone='info'] > .nf-icon { color: var(--nf-info); }
.nf-toast[data-tone='danger'] { border-color: var(--nf-danger-line); }
@keyframes nf-toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

/* ---------- Dialog (natives <dialog>) ---------- */
.nf-dialog { width: min(520px, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--nf-border-strong); border-radius: var(--nf-radius-lg);
  background: var(--nf-bg-raised); color: var(--nf-text-body); box-shadow: var(--nf-shadow-lg); margin: auto; }
.nf-dialog::backdrop { background: var(--nf-overlay); backdrop-filter: blur(4px); }
.nf-dialog[open] { animation: nf-dialog-in var(--nf-duration-slow) var(--nf-ease-out); }
.nf-dialog[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 2rem); }
.nf-dialog__head, .nf-dialog__foot { flex: none; }
.nf-dialog__body { min-height: 0; overflow-y: auto; }
@keyframes nf-dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.nf-dialog__head { padding: var(--nf-space-5) var(--nf-space-5) 0; display: flex; justify-content: space-between; gap: var(--nf-space-3); }
.nf-dialog__body { padding: var(--nf-space-3) var(--nf-space-5) var(--nf-space-5); }
.nf-dialog__foot { padding: var(--nf-space-4) var(--nf-space-5); border-top: 1px solid var(--nf-border); display: flex; justify-content: flex-end; gap: var(--nf-space-2); background: var(--nf-surface-2); border-radius: 0 0 var(--nf-radius-lg) var(--nf-radius-lg); }

/* ---------- Menü & Befehlspalette (Strg+K) ---------- */
.nf-menu { min-width: 200px; padding: var(--nf-space-1); background: var(--nf-bg-raised); border: 1px solid var(--nf-border-strong); border-radius: var(--nf-radius-md); box-shadow: var(--nf-highlight-top), var(--nf-shadow-lg); }
.nf-menu [role='menuitem'] { display: flex; width: 100%; align-items: center; gap: var(--nf-space-3); padding: var(--nf-space-2) var(--nf-space-3); border-radius: var(--nf-radius-sm); font-size: var(--nf-text-sm); color: var(--nf-text); text-decoration: none; transition: background var(--nf-duration-fast), color var(--nf-duration-fast); }
.nf-menu [role='menuitem']:hover, .nf-menu [role='menuitem']:focus-visible { background: var(--nf-surface-hover); color: var(--nf-text-strong); box-shadow: none; }
.nf-menu [role='menuitem'] .nf-kbd { margin-left: auto; }
.nf-menu [role='menuitem'][data-danger] { color: var(--nf-danger); }
.nf-menu hr { border: 0; border-top: 1px solid var(--nf-border); margin: var(--nf-space-1) 0; }

.nf-cmd { width: min(580px, calc(100vw - 2rem)); overflow: hidden; }
.nf-cmd__search { display: flex; align-items: center; gap: var(--nf-space-3); padding: var(--nf-space-3) var(--nf-space-4); border-bottom: 1px solid var(--nf-border); background: var(--nf-surface-inset); }
.nf-cmd__search > .nf-icon { color: var(--nf-accent); }
.nf-cmd__search input { flex: 1; height: 28px; background: transparent; border: 0; color: var(--nf-text-strong); font-size: var(--nf-text-md); }
.nf-cmd__search input:focus-visible { box-shadow: none; }
.nf-cmd__list { padding: var(--nf-space-2); max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.nf-cmd__group { padding: var(--nf-space-2) var(--nf-space-3) var(--nf-space-1); font-size: 11px; font-weight: var(--nf-weight-semibold); text-transform: uppercase; letter-spacing: var(--nf-tracking-wide); color: var(--nf-text-faint); }
.nf-cmd__item { display: flex; align-items: center; gap: var(--nf-space-3); padding: var(--nf-space-2) var(--nf-space-3); border-radius: var(--nf-radius-sm); color: var(--nf-text); text-decoration: none; font-size: var(--nf-text-sm); cursor: pointer; transition: background var(--nf-duration-fast), color var(--nf-duration-fast); }
.nf-cmd__item:hover, .nf-cmd__item:focus-visible, .nf-cmd__item[aria-selected='true'] { background: var(--nf-accent-soft); color: var(--nf-accent-soft-text); box-shadow: none; }
.nf-cmd__item .nf-kbd { margin-left: auto; }
.nf-cmd__foot { padding: var(--nf-space-2) var(--nf-space-4); border-top: 1px solid var(--nf-border); background: var(--nf-surface-2); display: flex; align-items: center; justify-content: space-between; font-size: var(--nf-text-xs); color: var(--nf-text-muted); }

/* ---------- Akkordeon, Zeitstrahl, Prozess-Schritte ---------- */
.nf-accordion-group { display: flex; flex-direction: column; gap: var(--nf-space-2); }
.nf-accordion { border: 1px solid var(--nf-border); border-radius: var(--nf-radius-card); background: var(--nf-surface); overflow: hidden; transition: border-color var(--nf-duration-fast); }
.nf-accordion:hover { border-color: var(--nf-border-strong); }
.nf-accordion[open] { border-color: var(--nf-border-strong); box-shadow: var(--nf-shadow-sm); }
.nf-accordion__head { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--nf-space-3); padding: var(--nf-space-3) var(--nf-space-4); font-weight: var(--nf-weight-medium); color: var(--nf-text-strong); font-size: var(--nf-text-sm); user-select: none; }
.nf-accordion__head::-webkit-details-marker { display: none; }
.nf-accordion__head:hover { background: var(--nf-surface-hover); }
.nf-accordion__icon { color: var(--nf-text-muted); transition: transform var(--nf-duration-base) var(--nf-ease-spring); }
.nf-accordion[open] .nf-accordion__icon { transform: rotate(180deg); color: var(--nf-accent); }
.nf-accordion__body { padding: 0 var(--nf-space-4) var(--nf-space-4); color: var(--nf-text-body); font-size: var(--nf-text-sm); border-top: 1px solid var(--nf-border); padding-top: var(--nf-space-3); }

.nf-timeline { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; position: relative; }
.nf-timeline__item { display: flex; gap: var(--nf-space-3); position: relative; padding-bottom: var(--nf-space-4); }
.nf-timeline__item:last-child { padding-bottom: 0; }
.nf-timeline__item:not(:last-child)::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 1px; background: var(--nf-border-strong); }
.nf-timeline__dot { width: 24px; height: 24px; border-radius: 50%; background: var(--nf-surface-2); border: 1px solid var(--nf-border-strong); color: var(--nf-text-muted); display: grid; place-content: center; flex: none; z-index: 1; font-size: 12px; }
.nf-timeline__item[data-tone='accent'] .nf-timeline__dot  { background: var(--nf-accent-soft); color: var(--nf-accent); border-color: color-mix(in srgb, var(--nf-accent) 40%, transparent); }
.nf-timeline__item[data-tone='success'] .nf-timeline__dot { background: var(--nf-success-bg); color: var(--nf-success); border-color: var(--nf-success-line); }
.nf-timeline__item[data-tone='warning'] .nf-timeline__dot { background: var(--nf-warning-bg); color: var(--nf-warning); border-color: var(--nf-warning-line); }
.nf-timeline__item[data-tone='danger'] .nf-timeline__dot  { background: var(--nf-danger-bg); color: var(--nf-danger); border-color: var(--nf-danger-line); }
.nf-timeline__body { flex: 1; min-width: 0; padding-top: 2px; display: flex; flex-direction: column; gap: 2px; }
.nf-timeline__title { font-size: var(--nf-text-sm); font-weight: var(--nf-weight-medium); color: var(--nf-text-strong); }
.nf-timeline__meta { font-size: var(--nf-text-xs); color: var(--nf-text-muted); }

.nf-stepper { display: flex; align-items: center; gap: var(--nf-space-2); list-style: none; padding: 0; margin: 0; overflow-x: auto; scrollbar-width: none; }
.nf-stepper__step { display: flex; align-items: center; gap: var(--nf-space-2); font-size: var(--nf-text-xs); font-weight: var(--nf-weight-medium); color: var(--nf-text-muted); white-space: nowrap; }
.nf-stepper__step + .nf-stepper__step::before { content: ''; width: 24px; height: 1px; background: var(--nf-border-strong); margin-right: var(--nf-space-1); }
.nf-stepper__num { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--nf-border-strong); background: var(--nf-surface-2); display: inline-grid; place-content: center; font-family: var(--nf-font-mono); font-size: 11px; color: var(--nf-text-muted); }
.nf-stepper__step[aria-current='step'] { color: var(--nf-text-strong); font-weight: var(--nf-weight-semibold); }
.nf-stepper__step[aria-current='step'] .nf-stepper__num { background: var(--nf-accent-strong); color: var(--nf-on-accent); border-color: transparent; box-shadow: var(--nf-glow); }
.nf-stepper__step[data-done] { color: var(--nf-text); }
.nf-stepper__step[data-done] .nf-stepper__num { background: var(--nf-success-bg); color: var(--nf-success); border-color: var(--nf-success-line); }

/* ---------- Avatar ---------- */
.nf-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-content: center; flex: none; overflow: hidden;
  background: var(--nf-gradient); color: #fff; font-size: var(--nf-text-xs); font-weight: var(--nf-weight-semibold); }
.nf-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.nf-avatar--lg { width: 48px; height: 48px; font-size: var(--nf-text-md); }
.nf-avatar-stack { display: flex; }
.nf-avatar-stack .nf-avatar { box-shadow: 0 0 0 2px var(--nf-surface); }
.nf-avatar-stack .nf-avatar + .nf-avatar { margin-left: -8px; }

/* ---------- Tastenkürzel, Code ---------- */
.nf-kbd { display: inline-grid; place-content: center; min-width: 22px; height: 22px; padding-inline: 5px; border-radius: var(--nf-radius-xs);
  border: 1px solid var(--nf-border-strong); border-bottom-width: 2px; background: var(--nf-surface-2); color: var(--nf-text-muted); font-family: var(--nf-font-mono); font-size: 11px; line-height: 1; }
.nf-code { background: var(--nf-surface-inset); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-md); padding: var(--nf-space-4); overflow-x: auto;
  font-family: var(--nf-font-mono); font-size: var(--nf-text-xs); line-height: var(--nf-leading-normal); color: var(--nf-text-body); tab-size: 2; }

/* ---------- Konsole (Gameserver, Logs) ---------- */
.nf-console { background: var(--nf-surface-inset); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-card); overflow: hidden; display: flex; flex-direction: column; }
.nf-console__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--nf-space-3); padding: var(--nf-space-2) var(--nf-space-3); border-bottom: 1px solid var(--nf-border); background: var(--nf-surface-2); font-size: var(--nf-text-xs); color: var(--nf-text-muted); }
.nf-console__log { padding: var(--nf-space-3) var(--nf-space-4); font-family: var(--nf-font-mono); font-size: 12.5px; line-height: 1.65; color: var(--nf-text-body); overflow: auto; max-height: var(--nf-console-h, 280px); white-space: pre-wrap; word-break: break-word; }
.nf-console__log .t { color: var(--nf-text-faint); }
.nf-console__log .i { color: var(--nf-info); }
.nf-console__log .w { color: var(--nf-warning); }
.nf-console__log .e { color: var(--nf-danger); }
.nf-console__log .ok { color: var(--nf-success); }
.nf-console__log .p { color: var(--nf-accent); }
.nf-console__input { display: flex; align-items: center; gap: var(--nf-space-2); border-top: 1px solid var(--nf-border); padding: 0 var(--nf-space-3); }
.nf-console__input span { color: var(--nf-accent); font-family: var(--nf-font-mono); font-size: var(--nf-text-sm); }
.nf-console__input input { flex: 1; height: 40px; background: transparent; border: 0; color: var(--nf-text-strong); font-family: var(--nf-font-mono); font-size: 12.5px; }
.nf-console__input input:focus-visible { box-shadow: none; }
.nf-console__input:focus-within { box-shadow: inset 0 0 0 1px var(--nf-accent); }

/* ---------- Spielserver-Karte ---------- */
.nf-server { display: flex; flex-direction: column; gap: var(--nf-space-4); }
.nf-server__head { display: flex; gap: var(--nf-space-3); align-items: center; }
.nf-server__art { width: 48px; height: 48px; flex: none; border-radius: var(--nf-radius-md); display: grid; place-content: center; font-family: var(--nf-font-heading); font-weight: var(--nf-weight-bold); font-size: var(--nf-text-md); color: #fff;
  background: var(--nf-art, var(--nf-gradient)); position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--nf-shadow-sm); }
.nf-server__art svg { width: 32px; height: 32px; position: relative; z-index: 1; }
.nf-server__art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.18), transparent 50%); pointer-events: none; }
.nf-server__name { color: var(--nf-text-strong); font-weight: var(--nf-weight-semibold); font-family: var(--nf-font-heading); text-transform: var(--nf-heading-transform); letter-spacing: var(--nf-heading-tracking); }
.nf-server__game { font-size: var(--nf-text-xs); color: var(--nf-text-muted); }
.nf-server__head :is(.nf-status, .nf-status-pill) { margin-left: auto; }
.nf-server__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nf-space-3); }
.nf-server__addr { display: flex; align-items: center; justify-content: space-between; gap: var(--nf-space-2); padding: var(--nf-space-2) var(--nf-space-3); background: var(--nf-surface-inset); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-control); font-family: var(--nf-font-mono); font-size: var(--nf-text-xs); color: var(--nf-text); }
.nf-server__actions { display: flex; gap: var(--nf-space-2); }
.nf-server__actions .nf-btn:first-child { flex: 1; }

/* ---------- Leerer Zustand, Skelett ---------- */
.nf-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--nf-space-3); padding: var(--nf-space-7) var(--nf-space-5); border: 1px dashed var(--nf-border-strong); border-radius: var(--nf-radius-card);
  background: radial-gradient(ellipse 65% 55% at 50% 0%, color-mix(in srgb, var(--nf-accent) 7%, transparent), transparent 70%), var(--nf-surface); }
.nf-empty__icon { width: 52px; height: 52px; display: grid; place-content: center; border-radius: var(--nf-radius-md); background: var(--nf-accent-soft); color: var(--nf-accent); border: 1px solid color-mix(in srgb, var(--nf-accent) 28%, transparent); box-shadow: 0 0 24px -8px var(--nf-accent); }
.nf-empty__title { color: var(--nf-text-strong); font-weight: var(--nf-weight-semibold); font-size: var(--nf-text-lg); }
.nf-empty__text { color: var(--nf-text-muted); font-size: var(--nf-text-sm); max-width: 44ch; }

.nf-skeleton { display: block; border-radius: var(--nf-radius-sm); min-height: 12px;
  background: linear-gradient(90deg, var(--nf-surface-2) 0%, var(--nf-surface-hover) 40%, var(--nf-surface-2) 80%); background-size: 300% 100%; animation: nf-shimmer 1.6s linear infinite; }
@keyframes nf-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* ---------- Tooltip (CSS, für kurze Hinweise; Inhalt zusätzlich in aria-label) ---------- */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
  /* Entsteht erst beim Überfahren/Fokus: Ein unsichtbarer Tooltip würde sonst am Rand die Seite verbreitern. */
  content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); pointer-events: none;
  white-space: nowrap; padding: 5px 8px; border-radius: var(--nf-radius-sm); background: var(--nf-text-strong); color: var(--nf-bg); font-size: var(--nf-text-xs); font-weight: var(--nf-weight-medium); z-index: var(--nf-z-dropdown);
  animation: nf-tooltip-in var(--nf-duration-fast) var(--nf-ease-out); }
@keyframes nf-tooltip-in { from { opacity: 0; transform: translate(-50%, 4px); } }

/* ---------- Brotkrumen, Seitenkopf, Seitenwechsel ---------- */
.nf-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nf-space-2); font-size: var(--nf-text-sm); color: var(--nf-text-muted); list-style: none; padding: 0; }
.nf-breadcrumb a { color: var(--nf-text-muted); text-decoration: none; }
.nf-breadcrumb a:hover { color: var(--nf-text-strong); }
.nf-breadcrumb li + li::before { content: '/'; margin-right: var(--nf-space-2); color: var(--nf-text-faint); }
.nf-breadcrumb [aria-current='page'] { color: var(--nf-text-strong); }

.nf-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--nf-space-4); margin-bottom: var(--nf-space-6); }
.nf-page-head__text { display: flex; flex-direction: column; gap: var(--nf-space-2); }

.nf-pagination { display: flex; align-items: center; gap: var(--nf-space-1); }
.nf-pagination a, .nf-pagination span { min-width: 34px; height: 34px; display: inline-grid; place-content: center; padding-inline: var(--nf-space-2); border-radius: var(--nf-radius-control); font-size: var(--nf-text-sm); color: var(--nf-text-muted); text-decoration: none; font-variant-numeric: tabular-nums; }
.nf-pagination a:hover { background: var(--nf-surface-hover); color: var(--nf-text-strong); }
.nf-pagination [aria-current='page'] { background: var(--nf-accent-soft); color: var(--nf-accent-soft-text); font-weight: var(--nf-weight-semibold); }

/* ==========================================================================
   App-Rahmen: Kopfleiste, Seitennavigation, Inhalt
   ========================================================================== */
.nf-topbar { position: sticky; top: 0; z-index: var(--nf-z-sticky); height: var(--nf-topbar); display: flex; align-items: center; gap: var(--nf-space-4); padding-inline: var(--nf-space-4);
  background: color-mix(in srgb, var(--nf-bg) 72%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--nf-border); }
.nf-topbar__spacer { flex: 1; }
.nf-brand { display: inline-flex; align-items: center; gap: var(--nf-space-2); color: var(--nf-text-strong); font-weight: var(--nf-weight-semibold); text-decoration: none; letter-spacing: var(--nf-tracking-tight); font-family: var(--nf-font-heading); text-transform: var(--nf-heading-transform); }
.nf-brand:hover { color: var(--nf-text-strong); }
.nf-brand__mark { width: 28px; height: 28px; border-radius: 8px; background: var(--nf-gradient); display: grid; place-content: center; color: #fff; box-shadow: var(--nf-glow); }
.nf-brand__mark svg { width: 16px; height: 16px; }
.nf-brand small { color: var(--nf-text-faint); font-weight: var(--nf-weight-regular); font-family: var(--nf-font-mono); font-size: var(--nf-text-xs); text-transform: none; letter-spacing: 0; }

.nf-shell { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - var(--nf-topbar)); }
@media (min-width: 960px) { .nf-shell { grid-template-columns: var(--nf-sidebar) minmax(0, 1fr); } }
.nf-shell__main { padding: var(--nf-space-5) var(--nf-space-4) var(--nf-space-8); min-width: 0; }
@media (min-width: 768px) { .nf-shell__main { padding: var(--nf-space-6) var(--nf-space-6) var(--nf-space-8); } }

.nf-sidenav { display: none; flex-direction: column; gap: var(--nf-space-5); padding: var(--nf-space-5) var(--nf-space-3); border-right: 1px solid var(--nf-border);
  position: sticky; top: var(--nf-topbar); height: calc(100vh - var(--nf-topbar)); overflow-y: auto; background: color-mix(in srgb, var(--nf-bg-raised) 50%, transparent); }
@media (min-width: 960px) { .nf-sidenav { display: flex; } }
.nf-sidenav[data-open] { display: flex; position: fixed; inset: var(--nf-topbar) 0 0 0; width: min(300px, 85vw); z-index: var(--nf-z-overlay); background: var(--nf-bg-raised); box-shadow: var(--nf-shadow-lg); }
.nf-sidenav__group { display: flex; flex-direction: column; gap: 2px; }
.nf-sidenav__label { padding: 0 var(--nf-space-3) var(--nf-space-2); font-size: 11px; font-weight: var(--nf-weight-semibold); text-transform: uppercase; letter-spacing: var(--nf-tracking-wide); color: var(--nf-text-faint); }
.nf-navlink { display: flex; align-items: center; gap: var(--nf-space-3); height: 36px; padding-inline: var(--nf-space-3); border-radius: var(--nf-radius-sm); color: var(--nf-text-muted); text-decoration: none; font-size: var(--nf-text-sm); font-weight: var(--nf-weight-medium); position: relative; }
.nf-navlink:hover { background: var(--nf-surface-hover); color: var(--nf-text-strong); }
.nf-navlink[aria-current='page'], .nf-navlink[aria-current='true'] { background: var(--nf-accent-soft); color: var(--nf-accent-soft-text); }
.nf-navlink[aria-current='page']::before, .nf-navlink[aria-current='true']::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--nf-accent); }
[data-brand='games'] .nf-navlink[aria-current='page']::before { box-shadow: 0 0 10px var(--nf-accent); }
.nf-navlink .nf-badge { margin-left: auto; height: 18px; }
.nf-navlink .nf-icon { width: 18px; height: 18px; }
.nf-menu-toggle { display: inline-flex; }
@media (min-width: 960px) { .nf-menu-toggle { display: none; } }

/* ---------- Layout: Inhalt + Seitenspalte ---------- */
/* Hauptinhalt links, Eckdaten/Kontext rechts; unter 1100 px untereinander. */
.nf-with-aside { display: grid; gap: var(--nf-space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .nf-with-aside { grid-template-columns: minmax(0, 1fr) 300px; } }
.nf-with-aside > aside { display: flex; flex-direction: column; gap: var(--nf-space-4); }
@media (min-width: 1100px) { .nf-with-aside > aside { position: sticky; top: calc(var(--nf-topbar) + var(--nf-space-5)); } }

/* ---------- Marke neofee: Wortmarke & Logo-Bild ---------- */
/* Wortmarke wie im Logo: „neofee" hell, „.network" im Akzent. */
.nf-wordmark { font-family: var(--nf-font-sans); font-weight: var(--nf-weight-semibold); letter-spacing: -0.03em; color: var(--nf-text-strong); line-height: 1; white-space: nowrap; }
.nf-wordmark__tld { color: var(--nf-accent); }
.nf-wordmark--xl { font-size: clamp(2.25rem, 7vw, 4rem); }

/* Logo-Illustration: Ränder laufen weich in den Hintergrund aus, damit das Bild
   ohne Kasten auf jeder Fläche steht. Bild: assets/brand/neofee-logo.jpg */
.nf-logo-art { position: relative; display: block; width: 100%; max-width: 760px; margin-inline: auto; }
.nf-logo-art img { width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 46%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 70% at 50% 46%, #000 55%, transparent 100%); }
.nf-logo-art::after { /* leichtes Leuchten hinter der Figur */
  content: ''; position: absolute; inset: 15% 20%; z-index: -1; filter: blur(60px);
  background: radial-gradient(circle, rgba(74, 198, 215, 0.25), rgba(139, 108, 243, 0.18) 50%, transparent 70%); }
[data-mode='light'] .nf-logo-art img { -webkit-mask-image: none; mask-image: none; border-radius: var(--nf-radius-xl); box-shadow: var(--nf-shadow-lg); }

/* ==========================================================================
   Erweiterungen v0.4.0 (aus Streamlabor): Liste, Detailliste, Kennzahlen-Raster,
   einklappbarer Abschnitt (.nf-collapse)
   ========================================================================== */

/* ---------- Liste (Zeilen mit Titel, Zusatz und Ende) ---------- */
.nf-list { list-style: none; margin: 0; padding: 0; }
.nf-list > li + li { border-top: 1px solid var(--nf-border); }
.nf-list__row { display: flex; align-items: center; gap: var(--nf-space-3); padding: var(--nf-space-3) 0; color: inherit; text-decoration: none; min-width: 0; transition: background-color var(--nf-duration-fast); }
a.nf-list__row:hover { background: var(--nf-surface-hover); }
.nf-list--inset > li > .nf-list__row { padding-inline: var(--nf-space-4); }
.nf-list__main { min-width: 0; flex: 1; }
.nf-list__title { font-weight: var(--nf-weight-medium); color: var(--nf-text-strong); font-size: var(--nf-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-list__meta { font-size: var(--nf-text-xs); color: var(--nf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-list__end { flex-shrink: 0; text-align: right; }
.nf-list__date { font-size: var(--nf-text-xs); color: var(--nf-text-faint); font-family: var(--nf-font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Detailliste als Spalten-Raster (.nf-dl.nf-dl--grid; Grundform .nf-dl steht in patterns.css) ---------- */
.nf-dl.nf-dl--grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--nf-space-4) var(--nf-space-5); }
.nf-dl.nf-dl--grid > div { display: block; }
.nf-dl.nf-dl--grid dt, .nf-dl.nf-dl--grid dd { padding: 0; border-bottom: 0; }
.nf-dl.nf-dl--grid dt { font-size: var(--nf-text-xs); text-transform: uppercase; letter-spacing: var(--nf-tracking-wide); font-weight: var(--nf-weight-medium); }
.nf-dl.nf-dl--grid dd { margin-top: 2px; font-family: var(--nf-font-sans); font-size: var(--nf-text-sm); font-weight: var(--nf-weight-medium); }

/* ---------- Kennzahlen-Raster ---------- */
.nf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--nf-space-3); }
.nf-stat--tile { padding: var(--nf-space-4); border-radius: var(--nf-radius-card); background: var(--nf-surface); border: 1px solid var(--nf-border); box-shadow: var(--nf-highlight-top); }

/* ---------- Einklappbarer Abschnitt (.nf-collapse) ----------
   Für lange Einstellungsseiten: Karte mit Kopf (Titel-Knopf, Zusammenfassung, Badges, Aktionen) und Inhalt, der
   per aria-expanded am Knopf und data-open am Inhalt auf-/zugleitet. Der Inhalt bleibt im DOM (Formularzustand
   bleibt erhalten); verborgen wird er mit hidden="until-found". Zustände nur über ARIA/data-Attribute. */
.nf-collapse { background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-card); box-shadow: var(--nf-highlight-top), var(--nf-shadow-sm); min-width: 0; transition: border-color var(--nf-duration-fast); }
.nf-collapse:has(> .nf-collapse__head [aria-expanded='true']) { border-color: var(--nf-border-strong); }
.nf-collapse[data-invalid] { border-color: var(--nf-danger-line); }
.nf-collapse__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nf-space-2) var(--nf-space-4); padding: var(--nf-space-4) var(--nf-space-5); }
.nf-collapse__titles { flex: 1 1 260px; min-width: 0; }
.nf-collapse__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--nf-space-2); margin: 0; font-family: var(--nf-font-heading); text-transform: var(--nf-heading-transform); letter-spacing: var(--nf-heading-tracking); font-size: var(--nf-text-md); font-weight: var(--nf-weight-semibold); color: var(--nf-text-strong); }
.nf-collapse__toggle { display: inline-flex; align-items: center; gap: var(--nf-space-2); min-height: 32px; margin: -2px 0; padding: 2px var(--nf-space-2) 2px 0; border: 0; border-radius: var(--nf-radius-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nf-collapse__toggle:hover { color: var(--nf-accent-soft-text); }
.nf-collapse__chev { width: 18px; height: 18px; flex: none; color: var(--nf-text-muted); transition: transform var(--nf-duration-base) var(--nf-ease-spring), color var(--nf-duration-fast); }
.nf-collapse__toggle[aria-expanded='true'] .nf-collapse__chev { transform: rotate(90deg); color: var(--nf-accent); }
.nf-collapse__sub { margin: 2px 0 0 26px; font-size: var(--nf-text-xs); line-height: 1.4; color: var(--nf-text-muted); text-wrap: pretty; }
.nf-collapse__aside { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nf-space-2); max-width: 100%; }
.nf-collapse__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--nf-duration-base) var(--nf-ease-out); }
.nf-collapse__panel[data-open] { grid-template-rows: 1fr; }
.nf-collapse__panel[hidden] { display: grid; }
.nf-collapse__clip { min-height: 0; overflow: hidden; }
.nf-collapse__panel[data-open] > .nf-collapse__clip { overflow: visible; }
.nf-collapse__body { padding: var(--nf-space-4) var(--nf-space-5) var(--nf-space-5); border-top: 1px solid var(--nf-border); }
.nf-collapse:has(> .nf-collapse__head [aria-expanded='false']) > .nf-collapse__head { border-bottom: 0; }
/* Untergruppe: flacher, ohne Schatten */
.nf-collapse--nested { background: transparent; box-shadow: none; border-color: var(--nf-border); }
.nf-collapse--nested > .nf-collapse__head { padding: var(--nf-space-2) var(--nf-space-3); }
.nf-collapse--nested .nf-collapse__title { font-size: var(--nf-text-sm); }
.nf-collapse--nested > .nf-collapse__panel > .nf-collapse__clip > .nf-collapse__body { padding: var(--nf-space-3); }
@media (max-width: 639px) {
  .nf-collapse__head { padding: var(--nf-space-3) var(--nf-space-4); }
  .nf-collapse__body { padding: var(--nf-space-3) var(--nf-space-4) var(--nf-space-4); }
  .nf-collapse__sub { margin-left: 0; }
  .nf-collapse__aside { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .nf-collapse__panel, .nf-collapse__chev { transition: none; } }
@media print { .nf-collapse__panel, .nf-collapse__panel[hidden] { display: block; } .nf-collapse__chev { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .nf-status::before, .nf-status::after, .nf-skeleton { animation: none !important; }
  .nf-btn--shine::before { display: none; }
}

/* ==========================================================================
   Medien & Raum (v0.4.0) — Wiedergabe, Chat-Verlauf, Playlist, Teilnehmer
   Erstmals gebaut für w2g („Gemeinsam schauen“); gedacht für jede Echtzeit-
   Ansicht mit Video, Verlauf und Teilnehmerliste.
   ========================================================================== */
.nf-icon--fill { fill: currentColor; }

/* Karte ohne Innenabstand: Kopf und Abschnitte tragen ihn selbst, Listen laufen bündig */
.nf-card--flush { padding: 0; }
.nf-card--flush > .nf-card__header { padding: var(--nf-space-4) var(--nf-space-5); margin-bottom: 0; border-bottom: 1px solid var(--nf-border); flex-wrap: wrap; }
.nf-card--flush > .nf-card__header:last-child { border-bottom: 0; }
.nf-card__section { padding: var(--nf-space-4) var(--nf-space-5); }
.nf-card__section + .nf-card__section { border-top: 1px solid var(--nf-border); }
.nf-card__count { color: var(--nf-text-muted); font-weight: var(--nf-weight-regular); font-family: var(--nf-font-mono); font-variant-numeric: tabular-nums; }

/* Raum-Raster: Hauptspalte + Seitenspalte (Breite über --nf-side-w) */
.nf-room { display: grid; grid-template-columns: minmax(0, 1fr) var(--nf-side-w, 440px); gap: var(--nf-space-6); align-items: start; }
.nf-room__main, .nf-room__side { display: flex; flex-direction: column; gap: var(--nf-space-6); min-width: 0; }
.nf-room__side { position: relative; }
@media (max-width: 1100px) { .nf-room { grid-template-columns: minmax(0, 1fr); } }

/* Bühne: 16:9-Fläche für Player; bleibt in beiden Modi dunkel (data-mode="dark" am Element setzen) */
.nf-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--nf-surface-inset); color: var(--nf-text);
  border: 1px solid var(--nf-border-strong); border-radius: var(--nf-radius-card); box-shadow: var(--nf-highlight-top), var(--nf-shadow-md); }
.nf-stage:fullscreen { border: 0; border-radius: 0; }
.nf-stage > iframe, .nf-stage__fill { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.nf-stage__center { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--nf-space-3); padding: var(--nf-space-6); text-align: center; color: var(--nf-text-muted); overflow: auto; }
.nf-stage__center > * { max-width: 36rem; }
.nf-stage__center--veil { background: color-mix(in srgb, var(--nf-surface-inset) 88%, transparent); }
.nf-stage__fill iframe { width: 100%; height: 100%; border: 0; }
.nf-stage__shield { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; background: color-mix(in srgb, var(--nf-surface-inset) 72%, transparent); color: inherit; }
.nf-stage__shield:focus-visible { box-shadow: inset 0 0 0 3px var(--nf-accent); border-radius: 0; }
.nf-stage__layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.nf-stage[data-drop='true'] { outline: 2px dashed var(--nf-accent); outline-offset: -6px; }

/* Bedienleiste unter der Bühne */
.nf-transport { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nf-space-3); padding-top: var(--nf-space-3); }
.nf-play { display: inline-flex; align-items: center; gap: var(--nf-space-2); height: 40px; padding-right: var(--nf-space-3); border-radius: var(--nf-radius-full); color: var(--nf-text-strong); font-size: var(--nf-text-sm); font-weight: var(--nf-weight-medium); transition: transform var(--nf-duration-fast); }
.nf-play:active { transform: translateY(1px); }
.nf-play:focus-visible { border-radius: var(--nf-radius-full); }
.nf-play__disc { width: 40px; height: 40px; border-radius: 50%; display: grid; place-content: center; flex: none; background: var(--nf-accent-strong); color: var(--nf-on-accent); box-shadow: var(--nf-btn-primary-shadow); transition: background var(--nf-duration-fast), box-shadow var(--nf-duration-base); }
.nf-play:hover .nf-play__disc { background: var(--nf-accent-hover); box-shadow: var(--nf-btn-primary-shadow), var(--nf-glow); }
.nf-timecode { font-family: var(--nf-font-mono); font-size: var(--nf-text-xs); color: var(--nf-text-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nf-timecode[data-tone='ok'] { color: var(--nf-success); }
.nf-timecode[data-tone='warn'] { color: var(--nf-warning); }
.nf-timecode[data-tone='err'] { color: var(--nf-danger); }
.nf-tc { display: inline; padding: 0; font-family: var(--nf-font-mono); font-size: var(--nf-text-xs); color: var(--nf-link); text-decoration: underline; text-underline-offset: 2px; }
.nf-tc:hover { color: var(--nf-link-hover); }
.nf-tc[disabled], .nf-tc[aria-disabled='true'] { color: var(--nf-text-body); text-decoration: none; cursor: default; }

/* Positions-/Lautstärkeregler mit Füllstand (--nf-fill: 0%–100% setzt der Dienst) */
.nf-seek { -webkit-appearance: none; appearance: none; height: 20px; margin: 0; padding: 0; background: none; border: 0; cursor: pointer; --nf-fill: 0%; min-width: 80px; }
.nf-seek::-webkit-slider-runnable-track { height: 6px; border-radius: var(--nf-radius-full); box-shadow: var(--nf-input-shadow);
  background: linear-gradient(var(--nf-accent), var(--nf-accent)) 0 0 / var(--nf-fill) 100% no-repeat, var(--nf-surface-inset); }
.nf-seek::-moz-range-track { height: 6px; border-radius: var(--nf-radius-full); background: var(--nf-surface-inset); box-shadow: var(--nf-input-shadow); }
.nf-seek::-moz-range-progress { height: 6px; border-radius: var(--nf-radius-full); background: var(--nf-accent); }
.nf-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: var(--nf-accent); border: 2px solid var(--nf-surface); box-shadow: var(--nf-shadow-sm); transition: transform var(--nf-duration-fast) var(--nf-ease-spring); }
.nf-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--nf-accent); border: 2px solid var(--nf-surface); box-shadow: var(--nf-shadow-sm); }
.nf-seek:hover::-webkit-slider-thumb { transform: scale(1.14); }
.nf-seek:focus-visible { box-shadow: var(--nf-focus-ring); border-radius: var(--nf-radius-full); }
.nf-seek:disabled { cursor: default; }
.nf-seek:disabled::-webkit-slider-thumb { background: var(--nf-text-faint); }
.nf-seek:disabled::-moz-range-thumb { background: var(--nf-text-faint); }

/* Reaktionen: Auswahlleiste und aufsteigende Emojis über der Bühne */
.nf-reaction { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--nf-radius-control); font-size: 1.15rem; line-height: 1; transition: background var(--nf-duration-fast), transform var(--nf-duration-fast) var(--nf-ease-spring); }
.nf-reaction:hover { background: var(--nf-surface-hover); transform: scale(1.12); }
.nf-flyer { position: absolute; bottom: 8%; display: flex; flex-direction: column; align-items: center; animation: nf-flyer-up 3.2s var(--nf-ease-out) forwards; }
.nf-flyer__name { margin-top: 2px; padding: 0 5px; border-radius: var(--nf-radius-xs); background: color-mix(in srgb, var(--nf-surface-inset) 78%, transparent); color: var(--nf-text-strong); font-size: 11px; font-weight: var(--nf-weight-medium); white-space: nowrap; }
@keyframes nf-flyer-up { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { transform: translateY(-20px) scale(1.1); opacity: 1; } 100% { transform: translateY(-260px) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nf-flyer { animation: none; } .nf-reaction:hover { transform: none; } }

/* Verlauf (Chat/Log): Zeit | Beitrag; data-kind="system|mention" */
.nf-feed { display: flex; flex-direction: column; gap: var(--nf-space-2); overflow-y: auto; overflow-x: hidden; }
.nf-feed__msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px; font-size: var(--nf-text-sm); line-height: 20px; color: var(--nf-text-body); overflow-wrap: anywhere; }
.nf-feed__time { font-family: var(--nf-font-mono); font-size: 11px; line-height: 20px; color: var(--nf-text-muted); font-variant-numeric: tabular-nums; }
.nf-feed__msg[data-kind='mention'] .nf-feed__time { color: var(--nf-text-body); }
.nf-feed__name { display: inline; padding: 0; font-weight: var(--nf-weight-semibold); color: var(--nf-text-strong); cursor: pointer; }
.nf-feed__name[data-self] { color: var(--nf-link); }
.nf-feed__name[data-role='guest'] { color: var(--nf-text-muted); }
.nf-feed__msg[data-kind='system'] { color: var(--nf-text-muted); font-size: var(--nf-text-xs); }
.nf-feed__msg[data-kind='mention'] { background: var(--nf-accent-soft); margin-inline: calc(-1 * var(--nf-space-5)); padding: 4px var(--nf-space-5); box-shadow: inset 2px 0 0 var(--nf-accent); }
.nf-feed__at { font-weight: var(--nf-weight-semibold); color: var(--nf-text-strong); }
.nf-feed__at[data-self] { background: var(--nf-accent-soft); color: var(--nf-accent-soft-text); padding: 0 4px; border-radius: var(--nf-radius-xs); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nf-accent) 40%, transparent); }

/* Playlist / Warteschlange: aria-current="true" markiert den laufenden Eintrag */
.nf-queue { list-style: none; margin: 0; padding: 0; }
.nf-queue__item { display: flex; align-items: center; gap: var(--nf-space-3); padding: var(--nf-space-3) var(--nf-space-5); border-top: 1px solid var(--nf-border); }
.nf-queue__item[aria-current='true'] { background: var(--nf-accent-soft); box-shadow: inset 2px 0 0 var(--nf-accent); }
.nf-queue__thumb { width: 96px; height: 54px; flex: none; border-radius: var(--nf-radius-sm); object-fit: cover; background: var(--nf-surface-inset); box-shadow: inset 0 0 0 1px var(--nf-border); display: grid; place-items: center; font-size: var(--nf-text-xs); font-weight: var(--nf-weight-medium); color: var(--nf-text-muted); }
.nf-queue__body { flex: 1; min-width: 0; }
.nf-queue__title { display: flex; align-items: center; gap: 6px; font-weight: var(--nf-weight-medium); color: var(--nf-text-strong); overflow: hidden; white-space: nowrap; }
.nf-queue__title > span { overflow: hidden; text-overflow: ellipsis; }
.nf-queue__title .nf-icon { color: var(--nf-accent-soft-text); width: 14px; height: 14px; }
.nf-queue__meta { font-size: var(--nf-text-xs); color: var(--nf-text-muted); }
.nf-queue__item[aria-current='true'] .nf-queue__meta { color: var(--nf-text-body); }
.nf-queue__actions { display: flex; gap: 2px; flex: none; }
@media (max-width: 639px) {
  .nf-queue__item { padding-inline: var(--nf-space-4); flex-wrap: wrap; row-gap: 4px; }
  .nf-queue__body { flex-basis: calc(100% - 80px); }
  .nf-queue__thumb { width: 64px; height: 36px; }
  .nf-queue__actions { margin-left: auto; }
}

/* Teilnehmerliste: Name, Rollen-Badges, Zustände, Freigaben rechts */
.nf-roster { list-style: none; margin: 0; padding: 0; }
.nf-roster__item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: var(--nf-space-3) var(--nf-space-5); border-top: 1px solid var(--nf-border); }
.nf-roster__name { font-weight: var(--nf-weight-medium); color: var(--nf-text-strong); overflow-wrap: anywhere; }
.nf-roster__name[data-self] { color: var(--nf-link); }
.nf-roster__actions { margin-left: auto; display: inline-flex; gap: 4px; }
@media (max-width: 639px) { .nf-roster__item { padding-inline: var(--nf-space-4); } }

/* Aktuelle Seite in Ghost-Buttons (z. B. Topbar-Navigation): aria-current statt Zustandsklasse */
.nf-btn--ghost[aria-current='page'] { --nf-btn-fg: var(--nf-accent-soft-text); background: var(--nf-accent-soft); }

/* ==========================================================================
   Bewertung & Prüfung (v0.4.0, GhostGrade IT)
   Listenzeilen, Bewertungsmarken, Bewertungsskala, Zitat/Fundstelle, Quellen
   ========================================================================== */

/* ---------- Mehrzeilige Befund-Zeilen (.nf-list--wrap, .nf-list--compact) ---------- */
/* Erweitert .nf-list (v0.5.0) für längere Texte: oben ausgerichtet, Titel und Zusatz umbrechen, Plaketten rechts dürfen umbrechen. */
.nf-list--wrap > li > .nf-list__row { align-items: flex-start; padding-inline: var(--nf-space-1); }
.nf-list--wrap .nf-list__main { display: flex; flex-direction: column; gap: 2px; }
.nf-list--wrap .nf-list__title, .nf-list--wrap .nf-list__meta { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.nf-list--wrap .nf-list__title { font-weight: var(--nf-weight-regular); color: var(--nf-text-body); }
.nf-list--wrap .nf-list__title b, .nf-list--wrap .nf-list__title strong { color: var(--nf-text-strong); font-weight: var(--nf-weight-semibold); }
.nf-list--wrap .nf-list__meta { line-height: var(--nf-leading-snug); }
.nf-list--wrap .nf-list__end { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--nf-space-1); margin-left: auto; max-width: 45%; flex-shrink: 1; }
.nf-list--compact > li > .nf-list__row { padding-block: var(--nf-space-2); }
@media (max-width: 639px) {
  .nf-list--wrap > li > .nf-list__row { flex-wrap: wrap; }
  .nf-list--wrap .nf-list__end { max-width: none; width: 100%; justify-content: flex-start; margin-left: calc(1.25em + var(--nf-space-3)); }
}

/* ---------- Bewertungsmarke (.nf-mark): Icon am Zeilenanfang, Tönung über data-tone ---------- */
/* <span class="nf-mark" data-tone="success"><svg class="nf-icon" role="img" aria-label="positiv">…</svg></span> */
.nf-mark { flex: none; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-top: 1px; color: var(--nf-text-faint); }
.nf-mark > .nf-icon { width: 100%; height: 100%; }
.nf-mark[data-tone='success'] { color: var(--nf-success); }
.nf-mark[data-tone='warning'] { color: var(--nf-warning); }
.nf-mark[data-tone='danger']  { color: var(--nf-danger); }
.nf-mark[data-tone='accent']  { color: var(--nf-accent); }

/* ---------- Bewertungsskala (.nf-scale): Notenschlüssel mit Zeiger und Spanne ---------- */
/* Zonen teilen die Breite nach --nf-w; die aktuelle Zone trägt aria-current="true".
   Marker (--nf-at) und Spanne (--nf-from/--nf-to) in Prozent der Gesamtbreite. */
.nf-scale { position: relative; padding-top: 6px; }
.nf-scale__zones { display: flex; gap: 2px; height: 30px; }
.nf-scale__zone { flex: var(--nf-w, 1) 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; white-space: nowrap;
  background: var(--nf-surface-inset); box-shadow: var(--nf-input-shadow); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-xs);
  color: var(--nf-text-muted); font-size: var(--nf-text-xs); font-weight: var(--nf-weight-medium); }
.nf-scale__zone b { font-family: var(--nf-font-mono); font-variant-numeric: tabular-nums; color: var(--nf-text-body); }
.nf-scale__zone[aria-current='true'] { background: var(--nf-accent-soft); border-color: color-mix(in srgb, var(--nf-accent) 55%, var(--nf-border)); color: var(--nf-accent-soft-text); }
.nf-scale__zone[aria-current='true'] b { color: var(--nf-accent-soft-text); }
.nf-scale__marker { position: absolute; left: var(--nf-at, 0%); top: 0; width: 4px; height: 42px; margin-left: -2px; border-radius: 2px; background: var(--nf-accent-strong); box-shadow: 0 0 10px -1px var(--nf-accent); pointer-events: none; }
.nf-scale__range { position: absolute; left: var(--nf-from, 0%); width: calc(var(--nf-to, 0%) - var(--nf-from, 0%)); top: 39px; height: 7px; border: 2px solid var(--nf-text-muted); border-top: 0; border-radius: 0 0 2px 2px; pointer-events: none; }
.nf-scale__ticks { position: relative; height: 18px; margin-top: var(--nf-space-3); font-family: var(--nf-font-mono); font-size: 11px; line-height: 18px; color: var(--nf-text-muted); font-variant-numeric: tabular-nums; }
.nf-scale__ticks > span { position: absolute; left: var(--nf-at, 0%); transform: translateX(-50%); }
.nf-scale__ticks > span:first-child { transform: none; }
.nf-scale__ticks > span:last-child { transform: translateX(-100%); }
@media (max-width: 639px) { .nf-scale__zone em { display: none; } .nf-scale__ticks > span[data-optional] { display: none; } }

/* ---------- Zitat / Fundstelle (.nf-quote) ---------- */
/* Wörtlicher Beleg aus einem Dokument: eingelassene Fläche mit Akzentkante. */
.nf-quote { margin: 0; padding: var(--nf-space-2) var(--nf-space-3); background: var(--nf-surface-inset); box-shadow: var(--nf-input-shadow);
  border-left: 2px solid var(--nf-border-strong); border-radius: 0 var(--nf-radius-sm) var(--nf-radius-sm) 0;
  color: var(--nf-text-body); font-size: var(--nf-text-sm); line-height: var(--nf-leading-snug); overflow-wrap: anywhere; }
.nf-quote[data-tone='accent'] { border-left-color: var(--nf-accent); }
.nf-quote[data-tone='danger'] { border-left-color: var(--nf-danger); }
.nf-quote__src { display: block; margin-top: 2px; color: var(--nf-text-faint); font-family: var(--nf-font-mono); font-size: var(--nf-text-xs); }

/* ---------- Quellen-/Beweisliste (.nf-evidence): aufklappbar, nummeriert ---------- */
/* <details class="nf-evidence"><summary>Herangezogene Quellen (3)</summary><ol>…</ol></details> */
.nf-evidence { font-size: var(--nf-text-sm); color: var(--nf-text-body); }
.nf-evidence > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--nf-space-2); padding: 2px 0; color: var(--nf-text-muted); font-size: var(--nf-text-xs); font-weight: var(--nf-weight-medium); border-radius: var(--nf-radius-xs); }
.nf-evidence > summary::-webkit-details-marker { display: none; }
.nf-evidence > summary::before { content: ''; width: 0.5em; height: 0.5em; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(-45deg); transition: transform var(--nf-duration-base) var(--nf-ease-spring); }
.nf-evidence[open] > summary::before { transform: rotate(45deg); }
.nf-evidence > summary:hover { color: var(--nf-text-strong); }
.nf-evidence > :not(summary) { margin-top: var(--nf-space-2); padding-left: var(--nf-space-3); border-left: 2px solid var(--nf-border-strong); }
.nf-evidence ol, .nf-evidence ul { margin-left: var(--nf-space-4); }
.nf-evidence li + li { margin-top: var(--nf-space-1); }
@media (prefers-reduced-motion: reduce) { .nf-evidence > summary::before { transition: none; } }
/* ==========================================================================
   neofee Blaupause — Dienst-Muster (ab v0.4.0)
   Entstanden beim Umbau von DNS-Tool, IT-News und Skriptablage.
   Nur Semantik-Tokens, Zustände über ARIA/data-Attribute.
   ========================================================================== */

/* ---------- Anmelde-/Einstiegsrahmen: .nf-auth ---------- */
.nf-auth { min-height: calc(100vh - var(--nf-topbar)); display: grid; place-items: center; padding: var(--nf-space-6) var(--nf-space-4); }
.nf-auth__col { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--nf-space-5); }
.nf-auth__mark { display: flex; align-items: center; justify-content: center; gap: var(--nf-space-3); color: var(--nf-text-strong); font-family: var(--nf-font-heading); font-size: var(--nf-text-lg); font-weight: var(--nf-weight-semibold); letter-spacing: var(--nf-tracking-tight); }
.nf-auth__card { display: flex; flex-direction: column; gap: var(--nf-space-4); }
.nf-auth__title { text-align: center; color: var(--nf-text-strong); font-family: var(--nf-font-heading); font-size: var(--nf-text-lg); font-weight: var(--nf-weight-semibold); }
.nf-auth__links { display: flex; flex-wrap: wrap; gap: var(--nf-space-2) var(--nf-space-4); padding-top: var(--nf-space-4); border-top: 1px solid var(--nf-border); font-size: var(--nf-text-sm); }

/* ---------- Hell/Dunkel-Umschalter: .nf-theme-toggle ---------- */
/* Zeigt im Dunkelmodus die Sonne (Ziel: hell), im Hellmodus den Mond. Kein JS-Zustand nötig. */
.nf-theme-toggle .nf-theme-toggle__moon { display: none; }
[data-mode='light'] .nf-theme-toggle .nf-theme-toggle__sun { display: none; }
[data-mode='light'] .nf-theme-toggle .nf-theme-toggle__moon { display: inline-block; }

/* ---------- Dienstkopf: Rücksprung zum Portal + Dienstname ---------- */
.nf-service { display: flex; align-items: center; gap: var(--nf-space-2); min-width: 0; }
.nf-service__home { display: inline-flex; align-items: center; gap: var(--nf-space-2); color: var(--nf-text-muted); font-size: var(--nf-text-sm); text-decoration: none; white-space: nowrap; }
.nf-service__home:hover { color: var(--nf-text-strong); }
.nf-service__sep { color: var(--nf-text-faint); }
.nf-service__name { display: inline-flex; align-items: center; gap: var(--nf-space-2); min-width: 0; color: var(--nf-text-strong); font-weight: var(--nf-weight-semibold); text-decoration: none; letter-spacing: var(--nf-tracking-tight); }
.nf-service__name:hover { color: var(--nf-text-strong); }
@media (max-width: 639px) { .nf-service__home span, .nf-service__sep { display: none; } }
.nf-topbar__tools { display: flex; align-items: center; gap: var(--nf-space-2); min-width: 0; }

/* ---------- Karte ohne Innenabstand + Kopfzeile: .nf-card--flush ---------- */
.nf-card--flush { padding: 0; overflow: hidden; }
.nf-card--flush > .nf-card__header { margin: 0; padding: var(--nf-space-4) var(--nf-space-5); border-bottom: 1px solid var(--nf-border); }
.nf-card--flush > .nf-card__body { padding: var(--nf-space-5); }
.nf-card__note { margin-top: 2px; font-size: var(--nf-text-xs); color: var(--nf-text-muted); font-weight: var(--nf-weight-regular); }

/* ---------- Zeilenliste: .nf-rows ---------- */
.nf-rows { list-style: none; padding: 0; margin: 0; }
.nf-rows__head { padding: var(--nf-space-2) var(--nf-space-5); background: var(--nf-surface-2); border-block: 1px solid var(--nf-border); font-size: 11px; font-weight: var(--nf-weight-semibold); letter-spacing: var(--nf-tracking-wide); text-transform: uppercase; color: var(--nf-text-muted); }
.nf-rows__head:first-child { border-top: 0; }
.nf-rows__item { display: flex; align-items: center; gap: var(--nf-space-3); padding: var(--nf-space-3) var(--nf-space-5); }
.nf-rows__item + .nf-rows__item { border-top: 1px solid var(--nf-border); }
.nf-rows__main { flex: 1; min-width: 0; }
.nf-rows__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nf-space-2); color: var(--nf-text-strong); font-size: var(--nf-text-sm); font-weight: var(--nf-weight-medium); }
.nf-rows__title[data-muted] { color: var(--nf-text-muted); }
.nf-rows__meta { display: block; margin-top: 2px; font-family: var(--nf-font-mono); font-size: var(--nf-text-xs); color: var(--nf-text-muted); overflow-wrap: anywhere; }
.nf-rows__end { margin-left: auto; display: flex; align-items: center; gap: var(--nf-space-2); flex: none; }
.nf-rows__item[data-sev='fail'] { box-shadow: inset 3px 0 0 var(--nf-danger); }
.nf-rows__item[data-sev='warn'] { box-shadow: inset 3px 0 0 var(--nf-warning); }

/* ---------- Detailliste (Schlüssel/Wert): .nf-dl ---------- */
.nf-dl { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); margin: 0; font-size: var(--nf-text-sm); }
.nf-dl > div { display: contents; }
.nf-dl dt, .nf-dl dd { padding: var(--nf-space-3) 0; border-bottom: 1px solid var(--nf-border); margin: 0; }
.nf-dl > div:last-child > * { border-bottom: 0; }
.nf-dl dt { color: var(--nf-text-muted); padding-right: var(--nf-space-4); }
.nf-dl dd { color: var(--nf-text-strong); font-family: var(--nf-font-mono); font-size: var(--nf-text-xs); line-height: 1.7; overflow-wrap: anywhere; }
.nf-dl dd[data-empty] { color: var(--nf-text-faint); font-family: var(--nf-font-sans); }
@media (max-width: 639px) { .nf-dl { grid-template-columns: minmax(0, 1fr); } .nf-dl dt { border-bottom: 0; padding-bottom: 0; } }

/* ---------- Streaming-/KI-Text: .nf-stream ---------- */
.nf-stream { white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--nf-leading-relaxed); color: var(--nf-text-body); font-size: var(--nf-text-sm); }
.nf-stream[aria-busy='true']::after { content: ''; display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--nf-accent); animation: nf-caret 1s steps(2) infinite; }
@keyframes nf-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nf-stream[aria-busy='true']::after { animation: none; } }

/* ---------- Bewertungsleiste 1–10: .nf-score ---------- */
.nf-score { display: inline-flex; align-items: center; gap: var(--nf-space-2); --nf-score-color: var(--nf-text-faint); }
.nf-score[data-level='mid'] { --nf-score-color: var(--nf-warning); }
.nf-score[data-level='high'] { --nf-score-color: var(--nf-danger); }
.nf-score__bar { position: relative; width: 68px; height: 12px; border-radius: 2px; overflow: hidden;
  -webkit-mask: repeating-linear-gradient(90deg, black 0 5px, transparent 5px 7px); mask: repeating-linear-gradient(90deg, black 0 5px, transparent 5px 7px);
  background: var(--nf-surface-inset); box-shadow: inset 0 0 0 1px var(--nf-border-strong); }
.nf-score__bar::before { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--nf-score, 0) * 7px); background: var(--nf-score-color); }
.nf-score__num { font-family: var(--nf-font-mono); font-size: var(--nf-text-xs); font-variant-numeric: tabular-nums; color: var(--nf-text-body); }

/* ---------- Meldungs-/Artikelkarte: .nf-article ---------- */
.nf-article { display: flex; flex-direction: column; overflow: hidden; padding: 0; color: inherit; text-decoration: none;
  background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-card); box-shadow: var(--nf-highlight-top), var(--nf-shadow-sm);
  transition: border-color var(--nf-duration-base), transform var(--nf-duration-base) var(--nf-ease-out), box-shadow var(--nf-duration-base); }
a.nf-article:hover { border-color: var(--nf-border-strong); transform: translateY(-2px); box-shadow: var(--nf-highlight-top), var(--nf-shadow-md); color: inherit; }
a.nf-article:hover .nf-article__title { text-decoration: underline; text-decoration-color: var(--nf-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nf-article__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--nf-surface-inset); border-bottom: 1px solid var(--nf-border); display: grid; place-items: center; }
.nf-article__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nf-article__fallback { font-size: var(--nf-text-xl); font-weight: var(--nf-weight-bold); letter-spacing: var(--nf-tracking-tight); color: var(--nf-text-faint); }
.nf-article__flags { position: absolute; top: var(--nf-space-2); left: var(--nf-space-2); right: var(--nf-space-2); display: flex; justify-content: space-between; gap: var(--nf-space-2); pointer-events: none; }
.nf-article__body { display: flex; flex-direction: column; flex: 1; gap: var(--nf-space-2); padding: var(--nf-space-4); }
.nf-article__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nf-article__title { color: var(--nf-text-strong); font-size: var(--nf-text-md); font-weight: var(--nf-weight-semibold); line-height: 1.35; letter-spacing: -0.011em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nf-article__excerpt { color: var(--nf-text-body); font-size: var(--nf-text-sm); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nf-article__foot { margin-top: auto; padding-top: var(--nf-space-3); border-top: 1px solid var(--nf-border); display: flex; align-items: center; justify-content: space-between; gap: var(--nf-space-2); font-size: var(--nf-text-xs); color: var(--nf-text-muted); }
.nf-article__foot > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- Umschalt-/Navigations-Button: .nf-btn[aria-pressed], .nf-btn[aria-current="page"] ---------- */
.nf-btn[aria-pressed='true'], .nf-btn[aria-current='page'] { border-color: color-mix(in srgb, var(--nf-accent) 55%, var(--nf-border-strong)); background: var(--nf-accent-soft); color: var(--nf-accent-soft-text); box-shadow: var(--nf-highlight-top); }

/* ---------- Codeblock mit Zeilennummern: .nf-codeblock ---------- */
/* Für serverseitig hervorgehobenen Code (Shiki, Themen als CSS-Variablen --shiki-light/--shiki-dark,
   defaultColor:false). Jede Zeile trägt die Klasse .zeile (Transformer). Shiki setzt den Hintergrund inline,
   deshalb das !important auf pre. Sichtbar gemachte Steuerzeichen: <span class="nf-codeblock__mark">. */
.nf-codeblock { counter-reset: zeile; overflow-x: auto; padding: var(--nf-space-4); background: var(--nf-surface-inset); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-md); box-shadow: var(--nf-input-shadow); font: 400 13px/24px var(--nf-font-mono); color: var(--nf-text-body); }
.nf-codeblock pre { margin: 0; background: transparent !important; }
.nf-codeblock code { font-family: var(--nf-font-mono); font-size: inherit; }
.nf-codeblock .shiki, .nf-codeblock .shiki span { color: var(--shiki-dark); }
[data-mode='light'] .nf-codeblock .shiki, [data-mode='light'] .nf-codeblock .shiki span { color: var(--shiki-light); }
.nf-codeblock .zeile { counter-increment: zeile; }
.nf-codeblock .zeile::before { content: counter(zeile); display: inline-block; width: 3ch; margin-right: 1.25rem; text-align: right; color: var(--nf-text-faint); user-select: none; }
.nf-codeblock__mark { background: var(--nf-warning-bg); color: var(--nf-warning); border: 1px solid var(--nf-warning-line); border-radius: 3px; padding: 0 2px; font-size: 0.85em; }
/* ==========================================================================
   neofee Blaupause — neofee.network (Portal): Bausteine, die beim Umbau des Portals fehlten.
   Regeln wie components.css: nur Semantik-Tokens, Zustände über ARIA, Präfix nf-.
   Gilt für alle Dienste, nicht nur für den, der den Baustein zuerst brauchte.
   ========================================================================== */

/* ---------- Ausklapp-Menü am Auslöser: .nf-dropdown ----------
   <div class="nf-dropdown">
     <button class="nf-btn nf-btn--ghost" aria-haspopup="menu" aria-expanded="true">… <svg class="nf-icon nf-btn__chev">…</svg></button>
     <div class="nf-dropdown__panel"><div class="nf-menu" role="menu">…</div></div>
   </div>
   Das Panel wird nur gerendert, solange es offen ist (Zustand = aria-expanded am Knopf). Rechtsbündig;
   data-align="start" richtet es links aus. */
.nf-dropdown { position: relative; display: inline-flex; min-width: 0; }
.nf-dropdown__panel { position: absolute; top: calc(100% + var(--nf-space-2)); right: 0; z-index: var(--nf-z-dropdown);
  min-width: 240px; max-width: calc(100vw - 2 * var(--nf-space-4)); animation: nf-dropdown-in var(--nf-duration-fast) var(--nf-ease-out); }
.nf-dropdown__panel[data-align='start'] { right: auto; left: 0; }
@keyframes nf-dropdown-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .nf-dropdown__panel { animation: none; } }

/* Kopf eines Menüs (z. B. Benutzermenü: Name, Adresse, Rolle) */
.nf-menu__head { display: flex; flex-direction: column; gap: 2px; padding: var(--nf-space-2) var(--nf-space-3) var(--nf-space-3); margin-bottom: var(--nf-space-1); border-bottom: 1px solid var(--nf-border); min-width: 0; }
.nf-menu__head b { color: var(--nf-text-strong); font-size: var(--nf-text-sm); font-weight: var(--nf-weight-semibold); overflow-wrap: anywhere; }
.nf-menu__head small { color: var(--nf-text-muted); font-size: var(--nf-text-xs); overflow-wrap: anywhere; }
.nf-menu__head .nf-badge { align-self: flex-start; margin-top: var(--nf-space-1); }
.nf-menu button[role='menuitem'] { text-align: left; }

/* Pfeil im Knopf, dreht sich, solange das zugehörige Menü offen ist */
.nf-btn__chev { width: 1em; height: 1em; transition: transform var(--nf-duration-base) var(--nf-ease-spring); }
[aria-expanded='true'] > .nf-btn__chev { transform: rotate(180deg); }

/* ---------- Abdunklung hinter einer ausgeklappten Seitennavigation: .nf-scrim ----------
   Gehört zu .nf-sidenav[data-open] (schmale Bildschirme). Liegt unter der Kopfleiste, ein Klick schließt. */
.nf-scrim { position: fixed; inset: var(--nf-topbar) 0 0 0; z-index: calc(var(--nf-z-overlay) - 1); background: var(--nf-overlay);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: nf-scrim-in var(--nf-duration-base) var(--nf-ease-out); }
@keyframes nf-scrim-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nf-scrim { animation: none; } }

/* ---------- Dienst-Kachel: Fokus, Auswahl, kompakte Form ---------- */
/* Fokusrahmen folgt dem Kartenradius (base.css setzt sonst --nf-radius-xs). */
.nf-tile:focus-visible { border-radius: var(--nf-radius-card); }
/* Kachel als Auswahl in einer Liste (Master-Detail): aria-current="true" bzw. aria-pressed="true" markiert die gewählte. */
.nf-tile[aria-current='true'], .nf-tile[aria-pressed='true'] {
  border-color: color-mix(in srgb, var(--nf-accent) 55%, var(--nf-border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--nf-accent-soft) 65%, var(--nf-surface)), var(--nf-surface));
  box-shadow: inset 2px 0 0 var(--nf-accent), var(--nf-highlight-top);
}
.nf-tile--compact { padding: var(--nf-space-3); gap: var(--nf-space-3); align-items: center; }
.nf-tile--compact .nf-tile__desc { font-size: var(--nf-text-xs); }
.nf-tile--compact:hover { transform: none; }

/* ---------- Master-Detail: Auswahlliste links, Inhalt rechts: .nf-split-view ----------
   Unter 1000 px untereinander. Die Liste trägt .nf-split-view__list. */
.nf-split-view { display: grid; gap: var(--nf-space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .nf-split-view { grid-template-columns: 300px minmax(0, 1fr); } }
.nf-split-view__list { display: flex; flex-direction: column; gap: var(--nf-space-2); min-width: 0; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1000px) { .nf-split-view__list { position: sticky; top: calc(var(--nf-topbar) + var(--nf-space-5)); } }

/* ---------- Auswahl-Karte gesperrt ---------- */
.nf-choice:has(> input:disabled) { opacity: 0.55; cursor: not-allowed; }
.nf-choice:has(> input:disabled):hover { transform: none; background: var(--nf-surface); border-color: var(--nf-border-strong); }
.nf-choice:has(> input:checked:disabled):hover { border-color: var(--nf-accent); }

/* ---------- Eingelassene Teilfläche in einer Karte: .nf-inset ----------
   Für Unterbereiche (Bestätigungsformular, Vorschau, Hilfe) statt Karte-in-Karte. */
.nf-inset { display: flex; flex-direction: column; gap: var(--nf-space-3); min-width: 0; padding: var(--nf-space-4);
  background: var(--nf-surface-inset); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-md); box-shadow: var(--nf-input-shadow); }
@media (max-width: 639px) { .nf-inset { padding: var(--nf-space-3); } }

/* ---------- Beitrag mit Abstimmung: .nf-post + .nf-vote ----------
   Für Ideen-, Wunsch- und Fehlerlisten: links der Abstimm-Knopf (aria-pressed = eigene Stimme), rechts der Inhalt.
   Langer Text wird mit data-clamp am .nf-post__text auf vier Zeilen gekürzt. */
.nf-post { display: flex; align-items: flex-start; gap: var(--nf-space-4); min-width: 0; }
.nf-post__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--nf-space-2); }
.nf-post__head { display: flex; align-items: flex-start; gap: var(--nf-space-3); min-width: 0; }
.nf-post__title { color: var(--nf-text-strong); font-family: var(--nf-font-heading); font-size: var(--nf-text-md); font-weight: var(--nf-weight-semibold); line-height: var(--nf-leading-snug); overflow-wrap: anywhere; }
.nf-post__text { color: var(--nf-text-body); font-size: var(--nf-text-sm); line-height: var(--nf-leading-relaxed); white-space: pre-wrap; overflow-wrap: anywhere; }
.nf-post__text[data-clamp] { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nf-post__meta { color: var(--nf-text-muted); font-size: var(--nf-text-xs); overflow-wrap: anywhere; }

.nf-vote { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: none; width: 52px; min-height: 60px;
  border-radius: var(--nf-radius-control); border: 1px solid var(--nf-border-strong); background: var(--nf-surface-2); color: var(--nf-text-muted);
  box-shadow: var(--nf-highlight-top); transition: background var(--nf-duration-fast), color var(--nf-duration-fast), border-color var(--nf-duration-fast), box-shadow var(--nf-duration-base), transform var(--nf-duration-fast) var(--nf-ease-spring); }
.nf-vote:hover { color: var(--nf-text-strong); border-color: var(--nf-border-control); background: var(--nf-surface-hover); }
.nf-vote:active { transform: translateY(1px); }
.nf-vote:focus-visible { border-radius: var(--nf-radius-control); }
.nf-vote__count { font-family: var(--nf-font-mono); font-size: var(--nf-text-sm); font-weight: var(--nf-weight-semibold); color: var(--nf-text-strong); font-variant-numeric: tabular-nums; line-height: 1; }
.nf-vote[aria-pressed='true'] { background: var(--nf-accent-soft); color: var(--nf-accent); border-color: color-mix(in srgb, var(--nf-accent) 55%, transparent); box-shadow: 0 0 14px -5px var(--nf-accent); }
.nf-vote[aria-pressed='true'] .nf-vote__count { color: var(--nf-accent-soft-text); }
@media (max-width: 639px) { .nf-post { gap: var(--nf-space-3); } .nf-vote { width: 44px; min-height: 52px; } }

/* ---------- Codeblock mit Umbruch: .nf-code--wrap ----------
   Lange Texte (Aufträge, Logs) brechen um statt seitlich zu scrollen; Höhe über --nf-code-h. */
.nf-code--wrap { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: hidden; overflow-y: auto; max-height: var(--nf-code-h, 420px); margin: 0; }

/* ---------- QR-Code auf heller Fläche: .nf-qr ----------
   Scanner brauchen hellen Grund, auch im Dunkelmodus. */
.nf-qr { display: inline-block; align-self: flex-start; padding: var(--nf-space-3); background: var(--nf-slate-0); border: 1px solid var(--nf-border-strong); border-radius: var(--nf-radius-md); box-shadow: var(--nf-shadow-sm); }
.nf-qr img { width: 180px; height: 180px; image-rendering: pixelated; }

/* ---------- Liste einmaliger Codes (Wiederherstellung, Tokens): .nf-codes ---------- */
.nf-codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--nf-space-2); }
.nf-codes > li { padding: var(--nf-space-2) var(--nf-space-3); text-align: center; background: var(--nf-surface-inset); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-control); box-shadow: var(--nf-input-shadow);
  color: var(--nf-text-strong); font-family: var(--nf-font-mono); font-size: var(--nf-text-sm); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; overflow-wrap: anywhere; }
/* ==========================================================================
   neofee Blaupause — NexusDoc: Bausteine, die beim Umbau von NexusDoc fehlten.
   Regeln wie components.css: nur Semantik-Tokens, Zustände über ARIA, Präfix nf-.
   Gilt für alle Dienste, nicht nur für den, der den Baustein zuerst brauchte.
   ========================================================================== */

/* ---------- Text-Helfer: Größe und Ton ohne eigene Farbwerte ----------
   Ergänzen .nf-small / .nf-caption / .nf-muted / .nf-strong aus base.css.
   .nf-xs = kleine Schrift ohne Farbwechsel; Töne nur für kurze Zustandstexte
   („abgelaufen“, „läuft in 12 Tagen“) — nie für Fließtext oder Flächen. */
.nf-xs { font-size: var(--nf-text-xs); }
.nf-medium { font-weight: var(--nf-weight-medium); }
.nf-text-strong { color: var(--nf-text-strong); }
.nf-text-body { color: var(--nf-text-body); }
.nf-text-faint { color: var(--nf-text-faint); }
.nf-text-accent { color: var(--nf-accent); }
.nf-text-success { color: var(--nf-success); }
.nf-text-warning { color: var(--nf-warning); }
.nf-text-danger { color: var(--nf-danger); }
.nf-text-info { color: var(--nf-info); }
.nf-tabular { font-variant-numeric: tabular-nums; }
/* Abschnitts-Kennzeile in Karten und Seitenleisten (klein, versal, gedämpft) */
.nf-overline { font-size: 11px; font-weight: var(--nf-weight-semibold); letter-spacing: var(--nf-tracking-wide); text-transform: uppercase; color: var(--nf-text-faint); }
/* Fließtext mit Absätzen aus Freitext (Notizen, Beschreibungen) */
.nf-pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Auf Touch-Geräten zoomt iOS-Safari in jedes Feld unter 16 px hinein und nicht wieder heraus. */
@media (max-width: 639px) {
  [data-brand='nexusdoc'] :is(.nf-input, .nf-select, .nf-textarea) { font-size: var(--nf-text-md); }
}

/* ---------- Datenfarben für Grafiken: [data-viz] ----------
   Für Diagramme, Portblenden, Schrankansichten und Legenden, die Kategorien oder
   Zustände farbig kodieren. Das Attribut setzt zwei Variablen:
     --nf-viz       kräftiger Ton (Füllung kleiner Marken, Linien, Text)
     --nf-viz-soft  zurückhaltende Fläche (große Flächen, Hintergründe)
   Töne: success | warning | danger | info | accent | neutral | muted
         sowie die zwölf Monogramm-Töne (blue, emerald, amber, violet, rose, teal,
         cyan, lime, fuchsia, orange, indigo, sky).
   Anwendung: <rect data-viz="success" class="nf-viz-fill"/>,
              <span class="nf-swatch" data-viz="sky"></span> Glasfaser */
[data-viz] { --nf-viz: var(--nf-text-faint); --nf-viz-soft: var(--nf-surface-2); }
[data-viz='success'] { --nf-viz: var(--nf-success); --nf-viz-soft: var(--nf-success-bg); }
[data-viz='warning'] { --nf-viz: var(--nf-warning); --nf-viz-soft: var(--nf-warning-bg); }
[data-viz='danger']  { --nf-viz: var(--nf-danger);  --nf-viz-soft: var(--nf-danger-bg); }
[data-viz='info']    { --nf-viz: var(--nf-info);    --nf-viz-soft: var(--nf-info-bg); }
[data-viz='accent']  { --nf-viz: var(--nf-accent);  --nf-viz-soft: var(--nf-accent-soft); }
[data-viz='neutral'] { --nf-viz: var(--nf-text-muted); --nf-viz-soft: var(--nf-surface-hover); }
[data-viz='muted']   { --nf-viz: var(--nf-border-strong); --nf-viz-soft: var(--nf-surface-2); }
[data-viz='blue']    { --nf-viz: var(--nf-tint-blue-fg);    --nf-viz-soft: var(--nf-tint-blue-bg); }
[data-viz='emerald'] { --nf-viz: var(--nf-tint-emerald-fg); --nf-viz-soft: var(--nf-tint-emerald-bg); }
[data-viz='amber']   { --nf-viz: var(--nf-tint-amber-fg);   --nf-viz-soft: var(--nf-tint-amber-bg); }
[data-viz='violet']  { --nf-viz: var(--nf-tint-violet-fg);  --nf-viz-soft: var(--nf-tint-violet-bg); }
[data-viz='rose']    { --nf-viz: var(--nf-tint-rose-fg);    --nf-viz-soft: var(--nf-tint-rose-bg); }
[data-viz='teal']    { --nf-viz: var(--nf-tint-teal-fg);    --nf-viz-soft: var(--nf-tint-teal-bg); }
[data-viz='cyan']    { --nf-viz: var(--nf-tint-cyan-fg);    --nf-viz-soft: var(--nf-tint-cyan-bg); }
[data-viz='lime']    { --nf-viz: var(--nf-tint-lime-fg);    --nf-viz-soft: var(--nf-tint-lime-bg); }
[data-viz='fuchsia'] { --nf-viz: var(--nf-tint-fuchsia-fg); --nf-viz-soft: var(--nf-tint-fuchsia-bg); }
[data-viz='orange']  { --nf-viz: var(--nf-tint-orange-fg);  --nf-viz-soft: var(--nf-tint-orange-bg); }
[data-viz='indigo']  { --nf-viz: var(--nf-tint-indigo-fg);  --nf-viz-soft: var(--nf-tint-indigo-bg); }
[data-viz='sky']     { --nf-viz: var(--nf-tint-sky-fg);     --nf-viz-soft: var(--nf-tint-sky-bg); }
/* SVG: Füllung/Strich aus dem Ton; ohne data-viz am Element gilt der Ton eines Vorfahren. */
.nf-viz-fill { fill: var(--nf-viz, var(--nf-text-faint)); }
.nf-viz-soft { fill: var(--nf-viz-soft, var(--nf-surface-2)); }
.nf-viz-stroke { stroke: var(--nf-viz, var(--nf-text-faint)); }
/* HTML: Farbfeld für Legenden und Tabellenzellen */
.nf-swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle;
  background: var(--nf-viz, var(--nf-text-faint)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nf-text-strong) 18%, transparent); }
.nf-swatch--soft { background: var(--nf-viz-soft, var(--nf-surface-2)); box-shadow: inset 0 0 0 1px var(--nf-viz, var(--nf-border-strong)); }
.nf-swatch--line { width: 16px; height: 3px; border-radius: 2px; box-shadow: none; }

/* ---------- Legende unter Grafiken: .nf-legend ----------
   <ul class="nf-legend"><li><span class="nf-swatch" data-viz="success"></span>verbunden</li>…</ul> */
.nf-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nf-space-2) var(--nf-space-4); list-style: none; margin: 0; padding: 0;
  font-size: var(--nf-text-xs); color: var(--nf-text-muted); }
.nf-legend > li { display: inline-flex; align-items: center; gap: var(--nf-space-2); white-space: nowrap; }

/* ---------- Grafik-Fläche: .nf-canvas ----------
   Eingelassene Fläche für SVG-/Canvas-Darstellungen (Portblende, Schrank, Netzplan) mit
   gemeinsamen Strichfarben. Kinder-Klassen für SVG-Elemente:
     .nf-canvas__frame  Gehäuse/Rahmen   .nf-canvas__grid  Hilfslinien
     .nf-canvas__label  Beschriftung     .nf-canvas__edge  Verbindung
   Ausgewählt/aktiv: aria-selected="true" bzw. aria-current="true" am SVG-Element. */
.nf-canvas { position: relative; background: var(--nf-surface-inset); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-card);
  box-shadow: var(--nf-input-shadow); overflow: hidden; }
.nf-canvas--plain { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.nf-canvas__frame { fill: var(--nf-surface-2); stroke: var(--nf-border-strong); }
.nf-canvas__grid { stroke: var(--nf-border); }
.nf-canvas__label { fill: var(--nf-text-muted); font-family: var(--nf-font-sans); }
.nf-canvas__label--strong { fill: var(--nf-text-strong); }
.nf-canvas__edge { stroke: var(--nf-text-faint); fill: none; }
.nf-canvas [aria-selected='true'], .nf-canvas [aria-current='true'] { stroke: var(--nf-accent); }
.nf-canvas__hit { cursor: pointer; }
.nf-canvas__hit:hover { filter: brightness(1.12); }
.nf-canvas__hit:focus-visible { outline: none; stroke: var(--nf-accent); stroke-width: 2; }

/* ---------- Reiterleiste mit Überlauf-Hinweis: .nf-tabs-scroll ----------
   Umschließt .nf-tabs; data-overflow am Rahmen blendet rechts einen Verlauf ein,
   solange dort noch Reiter folgen. */
.nf-tabs-scroll { position: relative; }
.nf-tabs-scroll[data-overflow]::after { content: ''; position: absolute; top: 0; right: 0; bottom: 1px; width: 48px; pointer-events: none;
  background: linear-gradient(to left, var(--nf-bg), transparent); }

/* ---------- Fuß der Seitennavigation: .nf-sidenav__foot ----------
   Konto-Verweis unten in der Seitenleiste (Avatar, Name, Rolle). */
.nf-sidenav__foot { margin-top: auto; display: flex; align-items: center; gap: var(--nf-space-3); padding: var(--nf-space-3); margin-inline: calc(-1 * var(--nf-space-3)); margin-bottom: calc(-1 * var(--nf-space-5));
  border-top: 1px solid var(--nf-border); color: inherit; text-decoration: none; min-width: 0; transition: background var(--nf-duration-fast); }
.nf-sidenav__foot:hover { background: var(--nf-surface-hover); color: inherit; }
.nf-sidenav__foot[aria-current='page'] { background: var(--nf-accent-soft); }
.nf-sidenav__who { display: flex; flex-direction: column; min-width: 0; }
.nf-sidenav__who b { color: var(--nf-text-strong); font-size: var(--nf-text-sm); font-weight: var(--nf-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-sidenav__who small { color: var(--nf-text-muted); font-size: var(--nf-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-navlink > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Menüeintrag mit Zweitzeile: .nf-menu__text ----------
   <a role="menuitem"><span class="nf-menu__text"><b>Konto</b><small>Passwort, 2FA</small></span></a>
   Aktueller Ort: aria-current="page" am Eintrag. */
.nf-menu__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nf-menu__text b { font-weight: var(--nf-weight-medium); color: var(--nf-text-strong); }
.nf-menu__text small { font-size: var(--nf-text-xs); color: var(--nf-text-muted); line-height: var(--nf-leading-snug); }
.nf-menu [role='menuitem'][aria-current='page'] { background: var(--nf-accent-soft); }
.nf-menu [role='menuitem'][aria-current='page'] .nf-menu__text b { color: var(--nf-accent-soft-text); }
.nf-menu__group { padding: var(--nf-space-2) var(--nf-space-3) var(--nf-space-1); font-size: 11px; font-weight: var(--nf-weight-semibold); text-transform: uppercase; letter-spacing: var(--nf-tracking-wide); color: var(--nf-text-faint); }

/* ---------- Seitenfuß: .nf-footer ---------- */
.nf-footer { border-top: 1px solid var(--nf-border); color: var(--nf-text-faint); }

/* ---------- Zähler an einem Knopf: .nf-counter ----------
   Kleine Zahl (offene Hinweise, ungelesene Einträge). Mit --float sitzt sie oben rechts
   am nächsten positionierten Vorfahren (z. B. .nf-dropdown) — nicht im .nf-btn selbst,
   der schneidet über overflow ab. Rein dekorativ: die Zahl gehört zusätzlich ins aria-label. */
.nf-counter { display: inline-grid; place-content: center; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: var(--nf-radius-full);
  background: var(--nf-warning-solid); color: var(--nf-on-accent); font-family: var(--nf-font-mono); font-size: 10px; font-weight: var(--nf-weight-bold);
  line-height: 1; font-variant-numeric: tabular-nums; }
.nf-counter[data-tone='danger'] { background: var(--nf-danger-solid); }
.nf-counter[data-tone='accent'] { background: var(--nf-accent-strong); }
.nf-counter--float { position: absolute; top: -5px; right: -5px; z-index: 3; pointer-events: none; box-shadow: 0 0 0 2px var(--nf-bg); }

/* ---------- Monogramm mit Bild (Kundenlogo): .nf-monogram--image ----------
   Gleiche Maße wie .nf-monogram, neutrale eingelassene Fläche statt Tönung. */
.nf-monogram--image { --nf-mono-bg: var(--nf-surface-inset); padding: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--nf-border-strong); }
.nf-monogram--image img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Papier (Druck/PDF): .nf-paper ----------
   Für Seiten, die gedruckt oder per kopflosem Browser zu PDF werden
   (Kundendokumentation, Etikettenbogen). Papier ist immer hell: Das äußerste
   Element trägt zusätzlich data-brand="…" data-mode="light", damit die Tokens im
   Teilbaum hell auflösen, auch wenn <html> dunkel eingestellt ist.
   Schriftgrade sind bewusst feste Druckmaße (pt/px) statt der Bildschirmstufen,
   damit Umfang und Seitenumbrüche des PDFs stabil bleiben. Umbrüche gehören an
   die Inhalte (break-inside-avoid / break-before-page), nie feste Höhen.
     .nf-paper           ganze Fläche, deckt den (dunklen) Seitengrund ab
     .nf-paper__sheet    das Blatt: max. 190 mm, 10 pt; darin h1/h2/h3 gesetzt
     .nf-paper__head     Kopf mit kräftiger Unterlinie
     .nf-paper__kicker   Kennzeile über dem Titel (versal, gesperrt, gedämpft)
     .nf-paper__meta     Stand, Ansprechpartner, Adresse (14 px, gedämpft)
     .nf-paper__label    Kennzeile eines Blocks (14 px, halbfett) …
     .nf-paper__dim      … und ihr gedämpfter, normaler Zusatz
     .nf-paper__note     Hinweis, Bildunterschrift (8 pt, gedämpft)
     .nf-paper__fine     Kleintext 8 pt ohne Farbwechsel
     .nf-paper__tiny     10 px (Etiketten)
     .nf-paper__table    Tabelle mit feinen Rahmen (9 pt); --compact 8 pt;
                         --rack Schrankliste: td.nf-paper__unit = HE-Nummer,
                         td[data-occupied] = belegte Höheneinheit
     .nf-paper__box      umrandetes Feld (z. B. ein Etikett)
     .nf-paper__foot     Schlussvermerk mit feiner Oberlinie
   <div class="nf-paper" data-brand="nexusdoc" data-mode="light">
     <div class="nf-paper__sheet"><header class="nf-paper__head">…</header>
       <table class="nf-paper__table w-full">…</table></div></div> */
.nf-paper { min-height: 100vh; background: var(--nf-surface); color: var(--nf-text-strong); color-scheme: light; }
.nf-paper__sheet { max-width: 190mm; margin-inline: auto; padding: var(--nf-space-6); background: var(--nf-surface);
  font-family: var(--nf-font-sans); font-size: 10pt; line-height: 1.375; color: var(--nf-text-strong); }
.nf-paper__sheet :is(h1, h2, h3) { color: var(--nf-text-strong); letter-spacing: -0.011em; }
.nf-paper__sheet h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: var(--nf-weight-bold); }
.nf-paper__sheet h2 { font-size: 1.5rem; line-height: 2rem; font-weight: var(--nf-weight-bold);
  padding-bottom: var(--nf-space-1); border-bottom: 2px solid var(--nf-text-strong); }
.nf-paper__sheet h3 { font-size: 1.125rem; line-height: 1.75rem; font-weight: var(--nf-weight-semibold); }
.nf-paper__head { padding-bottom: var(--nf-space-5); border-bottom: 4px solid var(--nf-text-strong); }
.nf-paper__kicker { font-size: 0.875rem; line-height: 1.25rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nf-text-muted); }
.nf-paper__meta { font-size: 0.875rem; line-height: 1.25rem; color: var(--nf-text-muted); }
.nf-paper__label { font-size: 0.875rem; line-height: 1.25rem; font-weight: var(--nf-weight-semibold); }
.nf-paper__dim { font-weight: var(--nf-weight-regular); color: var(--nf-text-muted); }
.nf-paper__note { font-size: 8pt; color: var(--nf-text-muted); }
.nf-paper__fine { font-size: 8pt; }
.nf-paper__tiny { font-size: 10px; line-height: 1.375; }
.nf-paper__table { border-collapse: collapse; font-size: 9pt; }
.nf-paper__table--compact { font-size: 8pt; }
.nf-paper__table :is(th, td) { border: 1px solid var(--nf-border-strong); padding: var(--nf-space-1) var(--nf-space-2); vertical-align: top; }
.nf-paper__table th { background: var(--nf-surface-2); text-align: left; font-weight: var(--nf-weight-semibold); }
.nf-paper__table--rack td { padding: 0 var(--nf-space-2); }
.nf-paper__table td.nf-paper__unit { padding: 0 var(--nf-space-1); text-align: right; color: var(--nf-text-faint); font-variant-numeric: tabular-nums; }
.nf-paper__table td[data-occupied] { background: var(--nf-surface-2); font-weight: var(--nf-weight-medium); }
.nf-paper__box { border: 1px solid var(--nf-border-strong); border-radius: var(--nf-radius-md); }
.nf-paper__foot { padding-top: var(--nf-space-4); border-top: 1px solid var(--nf-border-strong); font-size: 0.75rem; line-height: 1rem; color: var(--nf-text-muted); }
/* Schmale Bildschirme: weniger Rand, Zellen dürfen umbrechen (nur Bildschirm — das PDF bleibt unberührt). */
@media screen and (max-width: 639px) {
  .nf-paper__sheet { padding: var(--nf-space-4); }
  .nf-paper__table :is(th, td) { overflow-wrap: anywhere; }
}
/* Druck: Seitengrund außerhalb des Blatts (Ränder, Restfläche) wird Papier statt dunkler Fläche. */
@media print {
  html:has(.nf-paper), html:has(.nf-paper) body { background: none; color-scheme: light; }
}

/* ---------- Beschriftete Datenfläche und Buchse in Gerätegrafiken: .nf-viz-mid, .nf-port ----------
   Mittlerer Datenton, auf dem Beschriftung in --nf-text-strong lesbar bleibt (Hell wie Dunkel):
     SVG-Füllung .nf-viz-mid, passendes Legendenfeld <span class="nf-swatch nf-swatch--mid" data-viz="…">.
   Hellere Abstufung desselben Tons (etwa SFP neben SFP+): data-viz-shade="pale" am Element mit data-viz.
   Buchse einer Portblende (SVG):
     <g class="nf-port" data-viz="success" role="button" tabindex="0" aria-pressed="false">
       <rect class="nf-port__body"/> <rect class="nf-port__detail"/> <text class="nf-port__label">1</text>
     </g>
   Ausgewählt: aria-pressed="true" (oder aria-selected="true") an der Gruppe.
   Kleine Versal-Beschriftung unter Portgruppen o. ä.: <text class="nf-canvas__caption">. */
[data-viz] { --nf-viz-mix: 45%; }
[data-viz][data-viz-shade='pale'] { --nf-viz-mix: 25%; }
.nf-viz-mid { fill: color-mix(in srgb, var(--nf-viz, var(--nf-text-faint)) var(--nf-viz-mix, 45%), var(--nf-surface-2)); }
.nf-swatch.nf-swatch--mid { background: color-mix(in srgb, var(--nf-viz, var(--nf-text-faint)) var(--nf-viz-mix, 45%), var(--nf-surface-2)); }
.nf-port { cursor: pointer; outline: none; }
.nf-port__body { fill: color-mix(in srgb, var(--nf-viz, var(--nf-text-faint)) var(--nf-viz-mix, 45%), var(--nf-surface-2));
  stroke: var(--nf-text-faint); transition: stroke var(--nf-duration-fast); }
.nf-port:hover .nf-port__body { stroke: var(--nf-text-muted); }
.nf-port:focus-visible .nf-port__body,
.nf-port:is([aria-pressed='true'], [aria-selected='true']) .nf-port__body { stroke: var(--nf-accent); }
.nf-port__detail { fill: var(--nf-text-strong); fill-opacity: 0.22; pointer-events: none; }
.nf-port__label { fill: var(--nf-text-strong); font-family: var(--nf-font-mono); font-size: 9px; font-weight: var(--nf-weight-medium);
  font-variant-numeric: tabular-nums; pointer-events: none; }
.nf-canvas__caption { fill: var(--nf-text-faint); font-family: var(--nf-font-sans); font-size: 8px; font-weight: var(--nf-weight-semibold);
  letter-spacing: var(--nf-tracking-wide); text-transform: uppercase; }

/* ---------- Schrankansicht in Höheneinheiten: .nf-rack ----------
   Gehäuse .nf-rack (erhaben) > Montagefläche .nf-rack__bay (eingelassen; das Raster setzt der Dienst
   per Inline-Grid) mit
     .nf-rack__u       HE-Nummer am Rand
     .nf-rack__slot    freie HE, gestrichelt; als <button> erscheint der Text erst beim Zeigen
     .nf-rack__device  eingebautes Gerät, Rollenfarbe über data-viz (zarte Fläche, Akzentleiste links);
                       wird gezogen: data-dragging="true"; .nf-rack__device--chip = kompakte Form
                       (z. B. Liste „ohne Einbauposition“)
       .nf-rack__glyph Rollen-Symbol im Ton der Rolle    .nf-rack__name   Gerätename (gekürzt)
       .nf-rack__tag   kleine Kennung rechts (Portzahl)  .nf-rack__handle Griff-Knopf am rechten Rand
     .nf-rack__drop    Ablagevorschau beim Ziehen, data-valid="true|false"
   Mini-Abbild für Kacheln: <svg class="nf-rack-thumb"> mit .nf-rack-thumb__unit (freie HE) und
   <rect data-viz="…" class="nf-viz-fill"> (belegte HE). */
.nf-rack { padding: 10px; background: var(--nf-surface); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-card);
  box-shadow: var(--nf-highlight-top), var(--nf-shadow-sm); }
.nf-rack__bay { position: relative; background: var(--nf-surface-inset); border: 1px solid var(--nf-border); border-radius: var(--nf-radius-md);
  box-shadow: var(--nf-input-shadow); }
.nf-rack__u { display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-family: var(--nf-font-mono); font-size: 10px;
  font-variant-numeric: tabular-nums; color: var(--nf-text-faint); user-select: none; }
.nf-rack__slot { border: 1px dashed var(--nf-border-strong); border-radius: var(--nf-radius-sm); background: transparent; color: transparent;
  font-size: 11px; font-weight: var(--nf-weight-medium);
  transition: border-color var(--nf-duration-fast), background-color var(--nf-duration-fast), color var(--nf-duration-fast); }
button.nf-rack__slot { cursor: pointer; }
button.nf-rack__slot:hover, button.nf-rack__slot:focus-visible { border-color: var(--nf-accent); background: var(--nf-accent-soft); color: var(--nf-accent); }
.nf-rack__device { position: relative; display: flex; min-width: 0; overflow: hidden; color: var(--nf-text-strong);
  background: var(--nf-viz-soft, var(--nf-surface-2));
  border: 1px solid color-mix(in srgb, var(--nf-viz, var(--nf-border-strong)) 35%, var(--nf-border));
  border-left: 3px solid var(--nf-viz, var(--nf-text-faint)); border-radius: var(--nf-radius-sm);
  box-shadow: var(--nf-highlight-top); transition: box-shadow var(--nf-duration-fast), opacity var(--nf-duration-fast); }
.nf-rack__device:hover { box-shadow: var(--nf-highlight-top), var(--nf-shadow-md); }
.nf-rack__device[data-dragging='true'] { opacity: 0.4; }
.nf-rack__device a { color: inherit; text-decoration: none; }
.nf-rack__device--chip { display: inline-flex; align-items: stretch; font-size: var(--nf-text-xs); font-weight: var(--nf-weight-medium); }
.nf-rack__glyph { color: var(--nf-viz, var(--nf-text-muted)); }
.nf-rack__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--nf-text-xs); font-weight: var(--nf-weight-semibold); }
.nf-rack__tag { flex: none; padding: 1px 6px; border-radius: var(--nf-radius-full); background: color-mix(in srgb, var(--nf-surface) 60%, transparent);
  color: var(--nf-text-body); font-size: 10px; font-weight: var(--nf-weight-medium); font-variant-numeric: tabular-nums; }
.nf-rack__handle { display: grid; place-items: center; flex: none; width: 36px; color: var(--nf-text-muted); background: transparent; cursor: pointer;
  border-left: 1px solid color-mix(in srgb, var(--nf-text-strong) 10%, transparent);
  transition: background-color var(--nf-duration-fast), color var(--nf-duration-fast); }
.nf-rack__device--chip .nf-rack__handle { width: 32px; }
.nf-rack__handle:hover { background: color-mix(in srgb, var(--nf-text-strong) 6%, transparent); color: var(--nf-text-strong); }
.nf-rack__drop { pointer-events: none; border: 2px dashed var(--nf-accent); border-radius: var(--nf-radius-sm); background: var(--nf-accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-accent) 12%, transparent); }
.nf-rack__drop[data-valid='false'] { border-color: var(--nf-danger); background: var(--nf-danger-bg); box-shadow: none; }
.nf-rack-thumb { flex: none; background: var(--nf-surface-inset); border: 1px solid var(--nf-border-strong); border-radius: var(--nf-radius-sm); }
.nf-rack-thumb__unit { fill: none; stroke: var(--nf-border-strong); stroke-width: 0.3; }

/* ---------- Zurückgetretene Zeile/Karte: .nf-table tr[data-muted], .nf-card[data-muted] ----------
   Für Einträge, die zählen, aber nicht im Vordergrund stehen: gesperrte Konten,
   beim Import übersprungene Zeilen. Der Grund steht als Badge/Text daneben.
   <tr data-muted>…</tr>  ·  <div class="nf-card" data-muted>…</div> */
.nf-table tr[data-muted], .nf-card[data-muted] { opacity: 0.7; }

/* ---------- Abhakliste: .nf-checklist ----------
   Flüchtige Prüfliste aus .nf-check-Zeilen (z. B. Dienste nach einem Neustart);
   abgehakte Einträge treten über :checked zurück — ohne eigene Zustandsklasse.
   <ul class="nf-checklist"><li><label class="nf-check"><input type="checkbox"><span>…</span></label></li></ul> */
.nf-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nf-space-2); }
.nf-checklist .nf-check:has(> input:checked) > :not(input) { color: var(--nf-text-faint); text-decoration: line-through; }
/* ==========================================================================
   neofee Blaupause — Marke „Gameserver" (data-brand="games")
   Nur Formsprache: abgeschrägte Ecken, Neon-Kanten, Rasterhintergrund.
   Farben kommen ausschließlich aus tokens.css. Alles hier ist an
   [data-brand='games'] gebunden und wirkt in anderen Marken nicht.
   ========================================================================== */

[data-brand='games'] {
  --nf-cut-sm: 8px;
  --nf-clip: polygon(var(--nf-cut) 0, 100% 0, 100% calc(100% - var(--nf-cut)), calc(100% - var(--nf-cut)) 100%, 0 100%, 0 var(--nf-cut));
  --nf-clip-sm: polygon(var(--nf-cut-sm) 0, 100% 0, 100% calc(100% - var(--nf-cut-sm)), calc(100% - var(--nf-cut-sm)) 100%, 0 100%, 0 var(--nf-cut-sm));
}

/* Rasterhintergrund + Scanlines (sehr dezent, unter allem Inhalt) */
[data-brand='games'] body,
body[data-brand='games'] {
  background:
    linear-gradient(rgba(61, 255, 166, 0.025) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(61, 255, 166, 0.025) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--nf-atmosphere), var(--nf-bg);
  background-attachment: fixed;
}
[data-brand='games'][data-mode='light'] body,
body[data-brand='games'][data-mode='light'] { background: var(--nf-bg); }
[data-brand='games']:not([data-mode='light']) body::after,
body[data-brand='games']:not([data-mode='light'])::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1000;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply; opacity: 0.5;
}

/* Abgeschrägte Ecken */
[data-brand='games'] :is(.nf-card, .nf-tile, .nf-console, .nf-table-wrap, .nf-empty, .nf-accordion, .nf-dropzone, .nf-choice, .nf-switch-card, .nf-action-bar) { clip-path: var(--nf-clip); }
[data-brand='games'] :is(.nf-btn, .nf-input, .nf-select, .nf-segmented, .nf-server__addr, .nf-server__art, .nf-monogram, .nf-icon-box, .nf-snippet, .nf-chip, .nf-input-addon, .nf-stepper-input, .nf-badge-kv) { clip-path: var(--nf-clip-sm); }
[data-brand='games'] .nf-btn-group { clip-path: var(--nf-clip-sm); }
[data-brand='games'] .nf-btn-group > .nf-btn { clip-path: none; }
[data-brand='games'] .nf-input-addon > .nf-input { clip-path: none; }
/* Fokus darf nie abgeschnitten werden */
[data-brand='games'] :is(.nf-btn, .nf-input, .nf-select, .nf-tile, .nf-chip):focus-visible,
[data-brand='games'] :is(.nf-choice, .nf-switch-card, .nf-input-addon, .nf-stepper-input):focus-within { clip-path: none; }

/* Schnittkanten als Linie nachzeichnen (oben links, unten rechts) */
[data-brand='games'] :is(.nf-card, .nf-tile, .nf-console, .nf-table-wrap)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.75px), var(--nf-border-strong) calc(50% - 0.75px), var(--nf-border-strong) calc(50% + 0.75px), transparent calc(50% + 0.75px)) top left / var(--nf-cut) var(--nf-cut) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 0.75px), var(--nf-border-strong) calc(50% - 0.75px), var(--nf-border-strong) calc(50% + 0.75px), transparent calc(50% + 0.75px)) bottom right / var(--nf-cut) var(--nf-cut) no-repeat;
}
[data-brand='games'] :is(.nf-console, .nf-table-wrap) { position: relative; }

/* Knöpfe: Großbuchstaben, Neon beim Hover */
[data-brand='games'] .nf-btn { text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--nf-font-display-games); font-weight: 600; }
[data-brand='games'] .nf-btn--primary:hover { box-shadow: none; filter: drop-shadow(0 0 10px rgba(61, 255, 166, 0.55)); }
[data-brand='games'] :is(.nf-btn--gradient, .nf-btn--shine, .nf-btn--glow-border):hover { box-shadow: none; filter: drop-shadow(0 0 12px rgba(61, 255, 166, 0.5)) brightness(1.08); }
[data-brand='games'] .nf-btn--soft:hover,
[data-brand='games'] .nf-btn--outline:hover { box-shadow: none; filter: drop-shadow(0 0 8px rgba(61, 255, 166, 0.4)); }

/* Kacheln: Neon-Kante beim Hover */
[data-brand='games'] .nf-tile:hover,
[data-brand='games'] .nf-card--interactive:hover { border-color: var(--nf-accent); box-shadow: none; filter: drop-shadow(0 0 14px rgba(18, 232, 138, 0.25)); }
[data-brand='games'] .nf-tile:hover::after,
[data-brand='games'] .nf-card--interactive:hover::after {
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.75px), var(--nf-accent) calc(50% - 0.75px), var(--nf-accent) calc(50% + 0.75px), transparent calc(50% + 0.75px)) top left / var(--nf-cut) var(--nf-cut) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 0.75px), var(--nf-accent) calc(50% - 0.75px), var(--nf-accent) calc(50% + 0.75px), transparent calc(50% + 0.75px)) bottom right / var(--nf-cut) var(--nf-cut) no-repeat;
}

/* Überschriften und Kennzahlen mit leichtem Leuchten */
[data-brand='games']:not([data-mode='light']) :is(.nf-display, .nf-h1) { text-shadow: 0 0 24px rgba(61, 255, 166, 0.25); }
[data-brand='games'] .nf-stat__value { font-weight: 700; }
[data-brand='games'] .nf-eyebrow { font-family: var(--nf-font-display-games); letter-spacing: 0.16em; }
[data-brand='games'] .nf-eyebrow::before { content: '// '; color: var(--nf-accent-2); }

/* Marke im Kopf: Raute statt Rundung */
[data-brand='games'] .nf-brand__mark { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 30px; height: 30px; }
[data-brand='games'] .nf-avatar { border-radius: 0; clip-path: var(--nf-clip-sm); }

/* Konsole: Terminal-Grün */
[data-brand='games'] .nf-console__log { color: #c9f7df; text-shadow: 0 0 6px rgba(61, 255, 166, 0.15); }

/* Badges & Status-Pillen: eckig, technisch */
[data-brand='games'] :is(.nf-badge, .nf-status-pill) { border-radius: 2px; font-family: var(--nf-font-mono); text-transform: uppercase; letter-spacing: 0.04em; }

@media (prefers-reduced-motion: reduce) {
  [data-brand='games'] .nf-status[data-status='starting']::before { animation: none; }
}