/* ==========================================================================
   SkySkipperONE · Designsystem · Tokens & Basiskomponenten
   Version 1.0 · Stand 07.10.2026
   Quelle der Werte: skyskipperone.com (Site-DE/index.html)
   Einbinden:  <link rel="stylesheet" href="tokens.css">
   Fonts:      https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500
               &family=Barlow+Condensed:wght@300;500;700&family=JetBrains+Mono:wght@400;500&display=swap
   ========================================================================== */

:root {
  /* ---------- Farbe: Flächen ---------- */
  --ssk-bg:            #0b0c0e;   /* Seitenhintergrund, fast schwarz */
  --ssk-surface:       #0e0f12;   /* Karten, Kacheln */
  --ssk-surface-glass: rgba(8, 9, 11, .82);   /* Kacheln über Canvas, mit Blur */
  --ssk-nav-solid:     rgba(11, 12, 14, .86); /* Navigation nach der Scroll-Story */
  --ssk-silhouette:    #2a2c31;   /* Füllung Drohnen-Silhouetten */

  /* ---------- Farbe: Text ---------- */
  --ssk-ink:           #eceae4;   /* Überschriften, Werte        16,3:1 */
  --ssk-text:          #cfccc5;   /* Fließtext / Lead            12,2:1 */
  --ssk-text-2:        #a9a69f;   /* Beschreibungen in Karten     8,1:1 */
  --ssk-mute:          #8f8d87;   /* Labels, Meta, Fußzeile       5,9:1 */
  --ssk-value:         #d6d3cc;   /* Werte in Datenlisten/Tabellen 13,4:1 */

  /* ---------- Farbe: Akzent ---------- */
  --ssk-yellow:        #ffe500;   /* Signalgelb aus dem Messe-Folder  15,3:1 */
  --ssk-on-yellow:     #111111;   /* Text auf Gelb                    14,8:1 */

  /* ---------- Linien ---------- */
  --ssk-line:          rgba(236, 234, 228, .16);
  --ssk-line-strong:   rgba(236, 234, 228, .35);
  --ssk-line-accent:   rgba(255, 229, 0, .18);

  /* ---------- Antriebsmodi (Flammen, Diagramme) ---------- */
  --ssk-mode-rocket:      #ffa000;  --ssk-mode-rocket-core:  #fff6c8;
  --ssk-mode-ramjet:      #3d6dff;  --ssk-mode-ramjet-core:  #d8e6ff;
  --ssk-mode-fuelshift:   #ffe500;  --ssk-mode-fuelshift-core: #fbffe0;
  --ssk-mode-orbit:       #ff8f1f;  --ssk-mode-orbit-core:   #ffffff;

  /* ---------- Himmel (Scroll-Story, nach Höhe) ---------- */
  --ssk-sky-0-top:   #1a2230;  --ssk-sky-0-bottom:   #4a3f2c;  /* Boden, Dämmerung */
  --ssk-sky-18-top:  #0a1120;  --ssk-sky-18-bottom:  #1b2a44;  /* Stratosphäre */
  --ssk-sky-100-top: #000000;  --ssk-sky-100-bottom: #06101f;  /* Rand des Alls */

  /* ---------- Typografie ---------- */
  --ssk-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;  /* Headlines, Kartentitel, Buttons */
  --ssk-font-body:    'Barlow', system-ui, sans-serif;                 /* Fließtext */
  --ssk-font-mono:    'JetBrains Mono', ui-monospace, monospace;       /* Eyebrows, Daten, HUD, Labels */

  --ssk-fs-display: clamp(46px, 7.4vw, 112px);  /* H1 Hero */
  --ssk-fs-h2:      clamp(36px, 4.6vw, 68px);   /* Abschnitts-Headline */
  --ssk-fs-h3:      30px;                        /* Kartentitel groß */
  --ssk-fs-h4:      22px;                        /* Kartentitel klein */
  --ssk-fs-lead:    clamp(16px, 1.25vw, 19px);
  --ssk-fs-body:    15px;
  --ssk-fs-small:   13px;
  --ssk-fs-label:   11px;                        /* Mono-Eyebrow */
  --ssk-fs-micro:   10px;                        /* Mono-Labels, Noten */

  --ssk-lh-tight:   .95;
  --ssk-lh-body:    1.6;

  --ssk-ls-display: .01em;
  --ssk-ls-title:   .04em;
  --ssk-ls-button:  .16em;
  --ssk-ls-nav:     .2em;
  --ssk-ls-label:   .22em;

  /* ---------- Abstände (8er-Raster, plus Abschnitts-Größen) ---------- */
  --ssk-space-1: 4px;
  --ssk-space-2: 8px;
  --ssk-space-3: 16px;   /* Seitenrand mobil */
  --ssk-space-4: 24px;
  --ssk-space-5: 32px;   /* Seitenrand Desktop */
  --ssk-space-6: 48px;
  --ssk-space-7: 64px;   /* Spalten-Abstand */
  --ssk-space-8: 96px;   /* Abschnitt mobil */
  --ssk-space-9: 140px;  /* Abschnitt Desktop */

  --ssk-container: 1360px;
  --ssk-radius: 0;       /* bewusst keine Rundungen */

  /* ---------- Bewegung ---------- */
  --ssk-ease-out: cubic-bezier(.2, .7, .2, 1);
  --ssk-dur-reveal: .9s;
  --ssk-dur-ui: .2s;
  --ssk-stagger: 80ms;

  /* ---------- Breakpoints (Referenz, in @media nicht als var nutzbar) ----------
     mobil  < 820px · Tablet 820–1000px · Desktop > 1000px · Story-Mitte 820–1200px */
}

/* ==========================================================================
   Basis
   ========================================================================== */
body {
  margin: 0;
  background: var(--ssk-bg);
  color: var(--ssk-ink);
  font-family: var(--ssk-font-body);
  -webkit-font-smoothing: antialiased;
}

/* Eyebrow: Mono, Gelb, gesperrt, über jeder Headline */
.ssk-eyebrow {
  font-family: var(--ssk-font-mono);
  font-size: var(--ssk-fs-label);
  letter-spacing: var(--ssk-ls-label);
  text-transform: uppercase;
  color: var(--ssk-yellow);
  margin-bottom: 18px;
}

/* Headlines: Condensed, Versalien, leicht + fett gemischt */
.ssk-h1, .ssk-h2 {
  font-family: var(--ssk-font-display);
  font-weight: 300;
  text-transform: uppercase;
  line-height: var(--ssk-lh-tight);
  letter-spacing: var(--ssk-ls-display);
  margin: 0;
}
.ssk-h1 { font-size: var(--ssk-fs-display); }
.ssk-h2 { font-size: var(--ssk-fs-h2); margin-bottom: 18px; }
.ssk-h1 strong, .ssk-h2 strong { font-weight: 700; }

.ssk-lead {
  font-size: var(--ssk-fs-lead);
  line-height: var(--ssk-lh-body);
  font-weight: 300;
  color: var(--ssk-text);
  max-width: 520px;
}

.ssk-note {
  font-family: var(--ssk-font-mono);
  font-size: var(--ssk-fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ssk-mute);
}

/* Buttons: eckig, Condensed, gesperrt */
.ssk-btn {
  display: inline-block;
  font-family: var(--ssk-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ssk-ls-button);
  font-size: 14px;
  padding: 15px 26px;
  text-decoration: none;
  border-radius: var(--ssk-radius);
  transition: opacity var(--ssk-dur-ui);
}
.ssk-btn--primary   { background: var(--ssk-yellow); color: var(--ssk-on-yellow); }
.ssk-btn--secondary { border: 1px solid var(--ssk-line-strong); color: var(--ssk-ink); }
.ssk-btn--outline   { border: 1px solid var(--ssk-yellow); color: var(--ssk-yellow); padding: 8px 16px; font-size: 13px; letter-spacing: var(--ssk-ls-nav); font-weight: 500; }
.ssk-btn:hover { opacity: .85; }

/* Haarlinien-Raster: Kacheln mit 1px Fuge statt Abstand */
.ssk-grid {
  display: grid;
  gap: 1px;
  background: var(--ssk-line);
  border: 1px solid var(--ssk-line);
}
.ssk-grid > * { background: var(--ssk-surface); padding: 28px 26px; }

/* Kachel-Inhalt: Nummer · Titel · Text */
.ssk-tile__num   { font-family: var(--ssk-font-mono); font-size: var(--ssk-fs-label); letter-spacing: .18em; color: var(--ssk-yellow); }
.ssk-tile__title { display: block; font-family: var(--ssk-font-display); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ssk-ls-title); font-size: var(--ssk-fs-h4); margin: 10px 0 8px; }
.ssk-tile__text  { color: var(--ssk-text-2); font-size: var(--ssk-fs-body); line-height: 1.55; }

/* Datenliste (Spezifikationen) */
.ssk-specs { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 14px; margin: 0; }
.ssk-specs dt { font-family: var(--ssk-font-mono); font-size: var(--ssk-fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--ssk-mute); padding-top: 3px; }
.ssk-specs dd { margin: 0; color: var(--ssk-value); }

/* Badge / Status */
.ssk-badge {
  display: inline-block;
  font-family: var(--ssk-font-mono);
  font-size: var(--ssk-fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--ssk-yellow);
  color: var(--ssk-yellow);
  padding: 4px 8px;
}

/* Raute: Markierung für Kette, Höhenmesser, Meilensteine */
.ssk-diamond {
  display: inline-block;
  width: 9px; height: 9px;
  border: 1px solid var(--ssk-yellow);
  background: var(--ssk-bg);
  transform: rotate(45deg);
}

/* HUD-Wert: Label klein, Wert groß */
.ssk-hud { font-family: var(--ssk-font-mono); font-size: var(--ssk-fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ssk-mute); }
.ssk-hud b { display: block; color: var(--ssk-ink); font-weight: 500; font-size: 20px; letter-spacing: .04em; margin-top: 4px; white-space: nowrap; }
.ssk-hud--accent b { color: var(--ssk-yellow); }

/* Einblenden beim Scrollen */
.ssk-reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--ssk-dur-reveal) ease, transform var(--ssk-dur-reveal) var(--ssk-ease-out); }
.ssk-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ssk-reveal { opacity: 1; transform: none; transition: none; }
}