/* ==========================================================================
   nextrmnl — Gestaltungsmerkmale der Projektseite

   ⚠️ **Keine Farbe ist hier erfunden.** Jeder Wert steht wörtlich in
   `nextrmnl/frontend/src/styles/index.css` (Block `@theme` und darunter
   `[data-theme='light']`) — derselben Datei, aus der die Anwendung ihre
   Farben nimmt. Wer hier etwas ändert, ändert es dort zuerst; sonst
   beschreibt die Seite eine Anwendung, die es nicht gibt.

   ⚠️ **Die Rollennamen kommen von der Nexview-Projektseite** (`--ink-*`,
   `--mist-*`, `--accent-*`). nextrmnl benutzt dieselben Namen, deshalb ist
   die Zuordnung hier eins zu eins: `--color-ink-950` dort ist `--ink-950`
   hier. `components.css` ist von der Nexview-Seite übernommen und spricht
   diese Namen; so bleiben alle Projektseiten ein Bauwerk.

   Zwei Stufen, die nextrmnl hat und die Seite nicht braucht: `--mist-400`
   und `--accent-300`. Sie stehen trotzdem hier, damit die Liste die Datei
   der Anwendung spiegelt und ein Vergleich Zeile für Zeile geht.
   ========================================================================== */

:root{
/* --- Flächen ------------------------------------------------------------- */
--ink-950:#0b0b0f;
--ink-900:#101016;
--ink-850:#16161d;
--ink-800:#1d1d26;
--ink-700:#26262f;
--ink-600:#3a3a46;
/* --- Text ---------------------------------------------------------------- */
--mist-100:#f2f2f5;
--mist-200:#dcdce4;
--mist-300:#c3c3ce;
--mist-400:#aeaebc;
--mist-500:#9a9aa8;
--mist-600:#6f6f80;
/* --- Akzent: nextrmnls Violett ------------------------------------------- */
--accent-300:#ddd6fe;
--accent-400:#c4b5fd;
--accent-500:#a78bfa;
--accent-600:#8b5cf6;
--accent-700:#6d28d9;
/* ⚠️ **Auf Violett steht Dunkles.** Nexviews Rot trägt weiße Schrift; auf
   nextrmnls hellem Violett wäre Weiß nicht zu lesen. Die Anwendung nimmt
   dafür `--color-on-accent`, und die Knöpfe hier tun dasselbe. */
--auf-akzent:#1b0f38;
--ok-500:#4ade80;
--warn-500:#fbbf24;
--bad-500:#fb7185;

/* --- Dieselben Farben als RGB-Tripel -------------------------------------
   Für alles, was Deckkraft braucht: rgb(var(--ink-950-rgb)/.8). Ohne sie
   stünden feste Zahlen in der CSS, und im hellen Modus blieben sie dunkel —
   die Seite zöge dunkle Schleier über hellen Grund. */
--ink-950-rgb:11 11 15;
--ink-900-rgb:16 16 22;
--ink-850-rgb:22 22 29;
--ink-800-rgb:29 29 38;
--ink-700-rgb:38 38 47;
--ink-600-rgb:58 58 70;
--mist-100-rgb:242 242 245;
--accent-400-rgb:196 181 253;
--accent-500-rgb:167 139 250;
--accent-600-rgb:139 92 246;
--accent-700-rgb:109 40 217;
--schatten-rgb:0 0 0;
--warn-500-rgb:251 191 36;
--ok-500-rgb:74 222 128;
--bad-500-rgb:251 113 133;
/* Wie stark Schatten wirken. Im Hellen zurückgenommen: ein schwarzer
   Schatten auf hellem Grund wirkt wie Schmutz. */
--schatten-staerke:1;

/* Zwischentöne, die nur je einmal vorkommen: das Streifenband und der Grund
   hinter dem Suchfenster. Eigene Variablen statt Rundung auf den nächsten
   Token — das Band lebt davon, dass seine Stufen dicht beieinanderliegen.
   Abgeleitet aus ink-850, ink-900, ink-950 und ink-700 mit Deckkraft. */
--band-1:rgb(22 22 29/.85);
--band-2:rgb(16 16 22/.6);
--band-3:rgb(13 13 19/.75);
--band-oben:rgb(38 38 47/.7);
--band-unten:rgb(8 8 11/.9);
--band-glanz:rgb(255 255 255/.025);
--grund-schleier:rgb(6 6 10/.72);
--grund-fenster:rgb(6 6 10/.94);
--flaeche-hauch:rgb(255 255 255/.03);

/* --- 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);
}

/* --- Schrift -------------------------------------------------------------
   ⚠️ **Selbst mitgeliefert, kein fremder Server.** Ein Projekt, das die
   Zugänge zu fremden Rechnern hält, holt seine Schriften nicht bei Google;
   die Datenschutzerklärung dieser Seite verspricht, dass der Browser keinen
   fremden Server anspricht. Die Dateien kommen aus dem npm-Paket @fontsource
   und sind dieselben wie auf der nexmail-Seite.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/space-grotesk-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/space-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/space-grotesk-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ibm-plex-sans-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}

:root{
--font-display:'Space Grotesk','Helvetica Neue',Helvetica,sans-serif;
--font-sans:'IBM Plex Sans','Helvetica Neue',Helvetica,sans-serif;
--font-mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
--text-display:clamp(2.25rem,5vw,3.5rem); /* Held-Überschrift */
--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;
}

/* --- Abstände (4-px-Schritte) -------------------------------------------- */
:root{
--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;
--space-8:2rem;--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, Violettschimmer ---------------------------- */
:root{
--radius-sm:.375rem;
--radius-md:.5rem;
--radius-lg:.75rem;
--radius-xl:1rem;
--radius-2xl:1.5rem;
--radius-full:9999px;
--shadow-card:0 25px 50px -12px rgb(var(--schatten-rgb)/calc(.4 * var(--schatten-staerke)));
--shadow-pop:0 25px 50px -12px rgb(var(--schatten-rgb)/calc(.6 * var(--schatten-staerke)));
--shadow-accent:0 10px 15px -3px rgb(var(--accent-700-rgb)/.3),0 4px 6px -4px rgb(var(--accent-700-rgb)/.3);
--glow-hover:0 25px 50px -12px rgb(var(--accent-700-rgb)/.25);
--focus-ring:2px solid var(--accent-500);
--focus-offset:2px;
/* Derselbe Schimmer wie `.nt-glow::before` in der Anwendung. */
--glow-page:radial-gradient(45rem 26rem at 18% 0%,rgb(var(--accent-500-rgb)/.1),transparent 65%),radial-gradient(38rem 22rem at 88% 8%,rgb(var(--accent-700-rgb)/.16),transparent 70%);
}

/* --- Bewegung ------------------------------------------------------------ */
:root{
--ease-soft:cubic-bezier(.22,1,.36,1);
--dur-fast:.2s;
--dur-rise:.7s;
--dur-fade:1.1s;
}
@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-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 ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-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(var(--accent-500-rgb)/.35)}
a{color:var(--accent-500);text-decoration:none;transition:color var(--dur-fast)}
a:hover{color:var(--mist-100)}

/* Marken werden im Fließtext violett markiert — in Überschriften nicht.
   Farbe mitten in einer Überschrift zerreißt sie: Die Überschrift ist selbst
   schon die Betonung. Dass es ein Verweis ist, zeigt beim Zeigen der
   Unterstrich. */
h1 a,h2 a,h3 a,h4 a,.nx-kicker a{color:inherit}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,.nx-kicker a:hover{
  color:inherit;text-decoration:underline;text-underline-offset:.18em}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;
  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}

/* ==========================================================================
   Heller Modus

   ⚠️ **Nur die Werte werden getauscht, die Rollen bleiben.** Aus dem
   dunkelsten Seitengrund wird der hellste, aus dem hellsten Text der
   dunkelste. Wörtlich aus `[data-theme='light']` in nextrmnls index.css —
   dieselbe Quelle, aus der auch die dunklen Werte stammen.

   ⚠️ **Dunkel ist die Voreinstellung**, wie in der Anwendung: nextrmnl IST
   dunkel, und die Projektseite soll aussehen wie das Produkt. Hell kommt
   deshalb nur, wenn jemand es wählt — oder „System" wählt und sein System
   hell steht. Das löst das Skript im Kopf auf; die CSS kennt nur zwei.
   ========================================================================== */
:root[data-theme="light"]{
--ink-950:#f5f5f8;
--ink-900:#ffffff;
--ink-850:#ffffff;
--ink-800:#ececf2;
--ink-700:#dcdce4;
--ink-600:#b4b4c2;
--mist-100:#14141a;
--mist-200:#26262f;
--mist-300:#3c3c48;
--mist-400:#4e4e5c;
--mist-500:#61616f;
--mist-600:#8a8a97;
--accent-300:#4c1d95;
--accent-400:#6d28d9;
--accent-500:#7c3aed;
--accent-600:#6d28d9;
--accent-700:#5b21b6;
/* Auf dem dunkleren Violett des hellen Modus liest sich Weiß besser. */
--auf-akzent:#ffffff;
--ok-500:#16a34a;
--warn-500:#b45309;
--bad-500:#e11d48;

--ink-950-rgb:245 245 248;
--ink-900-rgb:255 255 255;
--ink-850-rgb:255 255 255;
--ink-800-rgb:236 236 242;
--ink-700-rgb:220 220 228;
--ink-600-rgb:180 180 194;
--mist-100-rgb:20 20 26;
--accent-400-rgb:109 40 217;
--accent-500-rgb:124 58 237;
--accent-600-rgb:109 40 217;
--accent-700-rgb:91 33 182;
--schatten-rgb:11 11 15;
--warn-500-rgb:180 83 9;
--ok-500-rgb:22 163 74;
--bad-500-rgb:225 29 72;
--schatten-staerke:.28;

/* Im Hellen wird aus dem dunklen Band ein zartes graues — dieselbe Rolle,
   andere Werte. Der Glanz von oben fällt weg: Weiß auf Weiß ist nichts. */
--band-1:rgb(236 236 242/.9);
--band-2:rgb(242 242 246/.7);
--band-3:rgb(232 232 238/.85);
--band-oben:rgb(220 220 228/.9);
--band-unten:rgb(212 212 222/.9);
--band-glanz:rgb(255 255 255/0);
--grund-schleier:rgb(11 11 15/.35);
--grund-fenster:rgb(245 245 248/.98);
--flaeche-hauch:rgb(11 11 15/.035);
/* Derselbe Schimmer wie in der Anwendung im Hellen: leiser. */
--glow-page:radial-gradient(45rem 26rem at 18% 0%,rgb(124 58 237/.08),transparent 65%),radial-gradient(38rem 22rem at 88% 8%,rgb(109 40 217/.05),transparent 70%);
}

/* ⚠️ **„System" steht hier bewusst NICHT.** Ein Element trägt nur EIN
   data-theme; ein Selektor `[data-theme="system"]` plus Media Query bräuchte
   die ganze Farbliste ein zweites Mal — und zwei Listen, die dasselbe wissen
   müssen, laufen irgendwann auseinander. Das Skript im Kopf löst „system" auf
   und schreibt „light" oder „dark" ans Wurzelelement. Ohne JavaScript bleibt
   es dunkel; das ist die Voreinstellung, also richtig und kein Ausfall. */
:root[data-theme="light"]{color-scheme:light}
:root:not([data-theme="light"]){color-scheme:dark}