/* ==========================================================================
   Nexapps Design System — Gestaltungsmerkmale
   Zusammengefasst aus tokens/{colors,typography,spacing,effects,motion,base}.css
   des Design-Systems „Nexapps Design System". Werte unverändert.
   Nicht von Hand ändern, ohne es dort nachzuziehen.
   ========================================================================== */

/* --- Farbwelt (verbatim aus frontend/src/styles/index.css) ---------------- */
:root{
--ink-950:#0b0b0f; /* Seitenhintergrund */
--ink-900:#101016;
--ink-850:#16161d; /* Karten */
--ink-800:#1d1d26; /* Karten im Hover */
--ink-700:#26262f; /* Rahmen */
--ink-600:#3a3a46;
--mist-100:#f2f2f5; /* Fliesstext */
--mist-300:#c3c3ce;
--mist-500:#9a9aa8; /* gedimmt */
--mist-600:#6f6f80;
--accent-400:#ff3b4e;
--accent-500:#e11d2f; /* Hauptakzent */
--accent-600:#b91626;
--accent-700:#8f0f1c;
--ok-500:#22c55e;
--warn-500:#eab308;
--bad-500:#f87171;
/* Semantische Rollen */
--surface-page:var(--ink-950);
--surface-raised:var(--ink-900);
--surface-card:var(--ink-850);
--surface-card-hover:var(--ink-800);
--border-default:var(--ink-700);
--border-strong:var(--ink-600);
--text-body:var(--mist-100);
--text-secondary:var(--mist-300);
--text-dim:var(--mist-500);
--text-faint:var(--mist-600);
--brand:var(--accent-500);
--brand-hover:var(--accent-400);
/* Status-Etiketten (Hintergrund / Text / Ring) */
--status-neutral-bg:rgb(16 16 22/.85);--status-neutral-fg:var(--mist-300);--status-neutral-ring:var(--ink-600);
--status-pending-bg:rgb(234 179 8/.2);--status-pending-fg:var(--warn-500);--status-pending-ring:rgb(234 179 8/.4);
--status-requested-bg:rgb(225 29 47/.2);--status-requested-fg:var(--accent-400);--status-requested-ring:rgb(225 29 47/.4);
--status-searching-bg:rgb(225 29 47/.25);--status-searching-fg:var(--accent-400);--status-searching-ring:rgb(225 29 47/.5);
--status-ok-bg:rgb(34 197 94/.2);--status-ok-fg:var(--ok-500);--status-ok-ring:rgb(34 197 94/.4);
--status-bad-bg:rgb(248 113 113/.2);--status-bad-fg:var(--bad-500);--status-bad-ring:rgb(248 113 113/.4);
--status-muted-bg:rgb(16 16 22/.85);--status-muted-fg:var(--mist-500);--status-muted-ring:var(--ink-600);
}

/* --- Schrift -------------------------------------------------------------
   Inter, wenn installiert; sonst Systemschrift. Absichtlich keine
   Webfont-Auslieferung: kein fremder Server, kein Ladeverzug, kein Textsprung.
   -------------------------------------------------------------------------- */
:root{
--font-sans:'Inter','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
--font-mono:ui-monospace,Menlo,Consolas,monospace;
--text-display:clamp(2.25rem,5vw,3.5rem); /* Held-Ueberschrift */
--text-h1:2rem;
--text-h2:1.5rem;
--text-h3:1.125rem;
--text-body:1rem;
--text-sm:.875rem;
--text-xs:.75rem;
--text-2xs:.6875rem; /* 11px — Etiketten */
--leading-tight:1.1;
--leading-snug:1.35;
--leading-relaxed:1.65;
--tracking-tight:-0.02em;
--tracking-wide:.06em;
}

/* --- Abstaende (4-px-Schritte) ------------------------------------------- */
:root{
--space-1:.25rem;--space-1-5:.375rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;
--page-max:80rem;
--page-pad:1rem;
--page-pad-sm:1.5rem;
}

/* --- Radien, Schatten, Fokus, Rotschimmer -------------------------------- */
:root{
--radius-md:.5rem;
--radius-lg:.75rem;
--radius-xl:1rem;
--radius-2xl:1.5rem;
--radius-full:9999px;
--shadow-card:0 25px 50px -12px rgb(0 0 0/.4);
--shadow-pop:0 25px 50px -12px rgb(0 0 0/.6);
--shadow-accent:0 10px 15px -3px rgb(143 15 28/.25),0 4px 6px -4px rgb(143 15 28/.25);
--glow-hover:0 25px 50px -12px rgb(143 15 28/.2);
--focus-ring:2px solid var(--accent-500);
--focus-offset:2px;
--glow-page:radial-gradient(45rem 26rem at 18% 0%,rgb(225 29 47/.16),transparent 65%),radial-gradient(38rem 22rem at 88% 8%,rgb(143 15 28/.18),transparent 70%);
}

/* --- Bewegung ------------------------------------------------------------ */
:root{
--ease-soft:cubic-bezier(.22,1,.36,1);
--dur-fast:.2s;
--dur-rise:.7s;
--dur-fade:1.1s;
--stagger:90ms;
}
@keyframes nv-rise{from{opacity:0;transform:translateY(2rem) scale(.97)}to{opacity:1;transform:none}}
@keyframes nv-fade{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes nv-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes nv-spin{to{transform:rotate(360deg)}}
.nv-rise{animation:nv-rise var(--dur-rise) var(--ease-soft) both}
.nv-fade{animation:nv-fade var(--dur-fade) var(--ease-soft) both}
@media (prefers-reduced-motion:reduce){.nv-rise,.nv-fade{animation:none!important}}

/* --- Grundstile ----------------------------------------------------------
   Nur dunkel. Es gibt kein helles Thema.
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-relaxed);-webkit-font-smoothing:antialiased;min-height:100dvh}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
::selection{background:rgb(225 29 47/.4)}
a{color:var(--accent-400);text-decoration:none;transition:color var(--dur-fast)}
a:hover{color:var(--mist-100)}
h1,h2,h3,h4{margin:0;letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);text-wrap:pretty}
p{margin:0}
img,video,svg{max-width:100%}
code,pre{font-family:var(--font-mono)}
.nv-glow{position:relative}
.nv-glow::before{content:'';position:fixed;inset:-20% -10% auto -10%;height:60vh;background:var(--glow-page);pointer-events:none;z-index:0}