/* ==========================================================================
   NADINE SCHADT · KI CONSULTING — Design-Tokens & Komponenten-Bibliothek
   Design-System „Variante E" (Fusion C×D)
   --------------------------------------------------------------------------
   Quelle der Wahrheit: _nadine-schadt.de/css/styles.css
   Zweck: In beliebige Tools / Web-Apps einbinden, damit sie sofort im
          Marken-Look erscheinen (Aubergine/Oxblood · Glassmorphism · Mono+Serif).

   EINBINDEN:
     <link rel="stylesheet" href="tokens.css">
     <!-- optional die Schriften (oder lokal hosten, siehe unten): -->
     <link rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap">

   BENUTZEN: entweder die CSS-Variablen (var(--accent)) in eigenem CSS,
             oder die fertigen .ns-* Klassen direkt im HTML.
   ========================================================================== */

:root {
  /* ---- Neutral / Tech-Grau ------------------------------------------- */
  --ink:           #1F1F26;   /* Headlines, Primärtext                    */
  --ink-2:         #36333E;   /* Fließtext                                */
  --ink-3:         #45464E;   /* Fließtext (etwas heller)                 */
  --ink-faint-45:  rgba(38, 38, 44, 0.45);  /* Korner-Labels             */
  --ink-faint-55:  rgba(38, 38, 44, 0.55);  /* Footer-Copy               */
  --ink-faint-65:  rgba(38, 38, 44, 0.65);  /* feinste Beschriftungen    */

  /* ---- Akzent Aubergine / Oxblood ------------------------------------ */
  --accent-deep:   #45102C;   /* dunkles Ende Button-Gradient            */
  --accent:        #8C2444;   /* helles Ende Gradient, Netz-Knoten       */
  --accent-text:   #5C1632;   /* Kicker, Links, Labels auf hellem Grund  */
  --accent-em:     #6E1B38;   /* kursive Akzentwörter in Headlines       */
  --wine-line:     rgba(122, 31, 61, 0.5);  /* Netz-Linien (SVG)         */

  /* ---- Rosé-Skala ---------------------------------------------------- */
  --rose-100:      #F4D9E2;   /* hellstes Rosé, Pill-Gradient-Start      */
  --rose-200:      #EFC2D0;   /* Tag-Text auf dunklen Cards              */
  --rose-300:      #E8A8BC;   /* Links auf dunklen Cards                 */
  --rose-400:      #DFA8BC;   /* Logo-Punkt, Pill-Gradient-Ende          */
  --rose-500:      #D687A0;   /* Terminal-Prompt, Caret                  */

  /* ---- Terminal & Status --------------------------------------------- */
  --term-text:     #ECEDF2;
  --term-comment:  #A5A0A8;
  --term-check:    #7FD49A;
  --traffic-red:   #FF5F57;
  --traffic-yellow:#FEBC2E;
  --traffic-green: #28C840;

  /* ---- Seitenhintergrund --------------------------------------------- */
  --bg-page-from:  #C9CCD4;
  --bg-page-to:    #BBBEC8;
  --bg-page:       linear-gradient(180deg, #C9CCD4, #BBBEC8);

  /* ---- Gradients (Marken-Signatur) ----------------------------------- */
  --gradient-primary:   linear-gradient(135deg, #8C2444, #45102C);                          /* Primär-Button       */
  --gradient-rose:      linear-gradient(135deg, #F4D9E2, #DFA8BC);                           /* CTA-Pill, Try-Button*/
  --gradient-glass:     linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0.07));   /* helle Glas-Karte */
  --gradient-glass-light: linear-gradient(135deg, rgba(255,255,255,0.5), rgba(255,255,255,0.2));  /* Blog/Legal-Karte */
  --gradient-card-dark: linear-gradient(150deg, rgba(64,16,42,0.88), rgba(32,7,22,0.82));   /* dunkle Cards/CTA    */
  --gradient-nav-dark:  linear-gradient(135deg, rgba(52,14,34,0.6), rgba(52,14,34,0.38));   /* Nav-Pill            */

  /* ---- Typografie ---------------------------------------------------- */
  --font-serif:    'Instrument Serif', Georgia, serif;
  --font-mono:     'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  /* Typo-Skala (px-Werte aus dem Original) */
  --fs-h1:         64px;   --lh-h1: 1.04;
  --fs-h2:         42px;
  --fs-h2-cta:     52px;
  --fs-h3-card:    29px;
  --fs-h3-blog:    26px;
  --fs-body:       14px;   --lh-body: 1.9;
  --fs-body-sm:    13px;   --lh-body-sm: 1.8;
  --fs-kicker:     12px;   --ls-kicker: 0.16em;
  --fs-tag:        11px;   --ls-tag: 0.12em;
  --fs-label:      10px;   --ls-label: 0.18em;

  /* ---- Radien -------------------------------------------------------- */
  --radius-pill:     999px;
  --radius-hero:     28px;
  --radius-card:     22px;
  --radius-terminal: 16px;
  --radius-button:   14px;
  --radius-button-sm:12px;

  /* ---- Schatten (immer zweiteilig: Tiefe + Glow) --------------------- */
  --shadow-nav:    0 16px 40px rgba(36,8,22,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  --shadow-hero:   0 50px 110px rgba(50,12,30,0.4), 0 0 90px rgba(140,36,68,0.28), inset 0 1px 0 rgba(255,255,255,0.75);
  --shadow-card-dark:  0 30px 60px rgba(36,8,22,0.45), 0 0 50px rgba(140,36,68,0.2);
  --shadow-card-light: 0 24px 50px rgba(50,12,30,0.16), inset 0 1px 0 rgba(255,255,255,0.75);
  --shadow-button: 0 14px 36px rgba(110,27,56,0.55), 0 0 30px rgba(140,36,68,0.35), inset 0 1px 0 rgba(255,255,255,0.45);
  --shadow-pill:   0 8px 24px rgba(140,36,68,0.5);
  --shadow-terminal: 0 36px 74px rgba(36,10,24,0.5), 0 0 60px rgba(140,36,68,0.25);

  /* ---- Glow-Bausteine ------------------------------------------------ */
  --glow-wine:     rgba(140,36,68,0.35);
  --glow-rose:     rgba(216,142,162,0.5);

  /* ---- Spacing / Layout ---------------------------------------------- */
  --space-section-y: 90px;   /* 84–96px im Original     */
  --space-section-x: 56px;   /* 56–64px im Original     */
  --space-card:      32px;
  --gap-cards:       22px;
  --stage-max:       1480px;

  /* ---- Motion -------------------------------------------------------- */
  --spring:        cubic-bezier(0.34, 1.56, 0.64, 1);   /* federndes „Schweben" */
  --ease-hover:    0.3s;     /* Buttons             */
  --ease-glass:    0.6s;     /* Glas-Karten/Cards   */

  /* ---- Effekte (Glassmorphism) --------------------------------------- */
  --blur-hero:     blur(8px) saturate(1.25);
  --blur-nav:      blur(18px);
  --blur-card:     blur(18px);
  --blur-terminal: blur(14px);
  --blur-button:   blur(12px);
}

/* ==========================================================================
   KEYFRAMES — das komplette Motion-System
   nsPulse  · pulsierende Glows / Output-Knoten (7–9s infinite)
   nsBlink  · Terminal-Caret (1.1s steps(1) infinite)
   nsDrawIn · SVG-Linien zeichnen sich (stroke-dashoffset → 0)
   nsNodeIn · SVG-Knoten / Labels faden ein (opacity → 1)
   ========================================================================== */
@keyframes nsPulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.06); }
}
@keyframes nsBlink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes nsDrawIn { to { stroke-dashoffset: 0; } }
@keyframes nsNodeIn { to { opacity: 1; } }

/* ==========================================================================
   BASIS — kann auf <body> eines Tools angewendet werden
   ========================================================================== */
.ns-surface {
  background: var(--bg-page);
  font-family: var(--font-mono);
  color: var(--ink);
}
.ns-surface ::selection { background: rgba(140,36,68,0.85); color: var(--rose-100); }

/* Fokus-Sichtbarkeit (Barrierefreiheit) */
.ns-surface a:focus-visible,
.ns-surface button:focus-visible,
.ns-focus:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   TYPOGRAFIE-HELFER
   ========================================================================== */
.ns-serif      { font-family: var(--font-serif); font-weight: 400; }
.ns-mono       { font-family: var(--font-mono); }
.ns-h1         { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--ink); margin: 0; text-wrap: balance; }
.ns-h2         { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2); color: var(--ink); margin: 0; }
.ns-h1 em, .ns-h2 em { color: var(--accent-em); font-style: italic; }
.ns-body       { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); }
.ns-kicker     { font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); color: var(--accent-text); font-family: var(--font-mono); }
.ns-mono-label { font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--ink-faint-45); font-family: var(--font-mono); }

/* ==========================================================================
   GLAS-FLÄCHEN
   ========================================================================== */
/* Helle, transparente Glas-Karte (Hero-Stil) */
.ns-glass {
  position: relative;
  background: var(--gradient-glass);
  -webkit-backdrop-filter: var(--blur-hero);
  backdrop-filter: var(--blur-hero);
  border: 1.5px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-hero);
  border-radius: var(--radius-hero);
  padding: 40px 36px;
  overflow: hidden;
  transition: transform var(--ease-glass) var(--spring), box-shadow var(--ease-glass);
}
.ns-glass::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 45%);
  pointer-events: none;
}
.ns-glass:hover { transform: translateY(-8px); }

/* Hellere Glas-Karte (Blog/Inhalt) */
.ns-glass-light {
  background: var(--gradient-glass-light);
  -webkit-backdrop-filter: var(--blur-card);
  backdrop-filter: var(--blur-card);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: var(--shadow-card-light);
  border-radius: var(--radius-card);
  padding: 30px;
  transition: transform 0.5s var(--spring), box-shadow 0.5s;
}
.ns-glass-light:hover {
  transform: translateY(-10px);
  box-shadow: 0 36px 72px rgba(50,12,30,0.24), 0 0 70px rgba(140,36,68,0.25), inset 0 1px 0 rgba(255,255,255,0.75);
}

/* Dunkle Glas-Karte (Projekte / CTA) */
.ns-card-dark {
  background: var(--gradient-card-dark);
  -webkit-backdrop-filter: var(--blur-card);
  backdrop-filter: var(--blur-card);
  border: 1px solid rgba(223,168,188,0.38);
  box-shadow: var(--shadow-card-dark);
  border-radius: var(--radius-card);
  padding: var(--space-card);
  color: rgba(247,235,240,0.75);
  transition: transform 0.5s var(--spring), box-shadow 0.5s;
}
.ns-card-dark h1, .ns-card-dark h2, .ns-card-dark h3 { color: #fff; font-family: var(--font-serif); font-weight: 400; }
.ns-card-dark:hover {
  transform: translateY(-10px) rotateX(3deg);
  box-shadow: 0 44px 84px rgba(36,8,22,0.55), 0 0 90px rgba(140,36,68,0.42);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.ns-btn,
.ns-btn-primary,
.ns-btn-glass,
.ns-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform var(--ease-hover), box-shadow var(--ease-hover), background var(--ease-hover);
}

/* Primär — Aubergine-Gradient */
.ns-btn-primary {
  color: #fff;
  background: var(--gradient-primary);
  padding: 16px 28px;
  border-radius: var(--radius-button);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: var(--shadow-button);
}
.ns-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(110,27,56,0.7), 0 0 44px rgba(140,36,68,0.5), inset 0 1px 0 rgba(255,255,255,0.45);
}

/* Sekundär — Glas */
.ns-btn-glass {
  color: var(--ink);
  background: rgba(255,255,255,0.35);
  -webkit-backdrop-filter: var(--blur-button);
  backdrop-filter: var(--blur-button);
  padding: 16px 28px;
  border-radius: var(--radius-button);
  border: 1px solid rgba(255,255,255,0.75);
}
.ns-btn-glass:hover { transform: translateY(-3px); background: rgba(255,255,255,0.55); }

/* Rosé-Pill — CTA */
.ns-pill {
  color: #380E22;
  background: var(--gradient-rose);
  padding: 17px 32px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pill), inset 0 1px 0 rgba(255,255,255,0.6);
}
.ns-pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(140,36,68,0.65), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ==========================================================================
   TAGS / PILLS (Labels)
   ========================================================================== */
.ns-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-tag);
  letter-spacing: var(--ls-tag);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}
/* hell (auf hellem Grund) */
.ns-tag--light {
  color: var(--accent-text);
  background: rgba(140,36,68,0.08);
  border: 1px solid rgba(140,36,68,0.28);
}
/* rosé (auf dunklem Grund) */
.ns-tag--rose {
  color: var(--rose-200);
  background: rgba(223,168,188,0.13);
  border: 1px solid rgba(223,168,188,0.4);
}

/* ==========================================================================
   TERMINAL-FENSTER (Signatur-Element)
   ========================================================================== */
.ns-terminal {
  border-radius: var(--radius-terminal);
  overflow: hidden;
  background: rgba(36,26,34,0.9);
  -webkit-backdrop-filter: var(--blur-terminal);
  backdrop-filter: var(--blur-terminal);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: var(--shadow-terminal);
  font-family: var(--font-mono);
}
.ns-terminal__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ns-terminal__dot { width: 11px; height: 11px; border-radius: 50%; }
.ns-terminal__dot--r { background: var(--traffic-red); }
.ns-terminal__dot--y { background: var(--traffic-yellow); }
.ns-terminal__dot--g { background: var(--traffic-green); }
.ns-terminal__title { margin-left: 10px; font-size: 11px; color: rgba(255,255,255,0.45); letter-spacing: 0.1em; }
.ns-terminal__body { padding: 24px 26px 28px; font-size: var(--fs-body-sm); line-height: 2.1; color: var(--term-text); }
.ns-terminal__prompt  { color: var(--rose-500); }
.ns-terminal__comment { color: var(--term-comment); }
.ns-terminal__check   { color: var(--term-check); }
.ns-caret {
  display: inline-block; width: 9px; height: 17px;
  background: var(--rose-500); vertical-align: -3px;
  animation: nsBlink 1.1s steps(1) infinite;
}

/* ==========================================================================
   PUNKTERASTER-OVERLAY (Marken-Hintergrund)
   Auf einen position:relative-Container legen.
   ========================================================================== */
.ns-grid-overlay {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(38,38,44,0.25) 1.2px, transparent 1.2px),
    linear-gradient(rgba(38,38,44,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,38,44,0.07) 1px, transparent 1px);
  background-size: 28px 28px, 140px 140px, 140px 140px;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}

/* ==========================================================================
   BARRIEREFREIHEIT — reduzierte Bewegung respektieren
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ns-glass, .ns-glass-light, .ns-card-dark,
  .ns-btn-primary, .ns-btn-glass, .ns-pill, .ns-caret {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}