/* ============================================================
   SD INTERACTIVE LEARNING — DESIGN SYSTEM
   Farben wie gehabt: Grau-Blau (Slate) als Grund, Jade als
   Akzent. Typografie und Rhythmus nach dem Muster der
   Apple-Produktseiten.

   Die Werte für Grau, Weiß, Schriftgrade und Laufweite sind an
   der Vorlage abgenommen, nicht geschätzt:
   Text hell #f5f5f7, Fließtext grau #86868b, Fließtext 19px/600
   mit POSITIVER Laufweite, Hervorhebungen darin in Hell.
   ============================================================ */

:root {
  /* --- Grund. Nicht reines Schwarz: auf OLED entsteht sonst
         Halation um weiße Schrift, und Tiefe lässt sich darauf
         nicht aufbauen. Ein Hauch Teal hält die Marke drin. --- */
  --paper:        #0f172a;   /* slate-900 */
  --canvas:       var(--paper);
  --surface-1:    #1e293b;   /* slate-800 */
  --surface-2:    #334155;   /* slate-700 */
  --surface-3:    #475569;   /* slate-600 */
  --surface-sunk: #0a1120;

  /* Glas: die Seitenleiste und aufliegende Flaechen stehen als
     durchscheinende Platten ueber dem Grund. */
  --glass:        rgba(30, 41, 59, 0.66);
  --glass-line:   rgba(148, 163, 184, 0.15);
  --glass-hover:  rgba(20, 184, 166, 0.08);

  /* --- Schrift. Hell und Grau exakt nach Vorlage. --- */
  --ink:    #f1f5f9;   /* slate-50  */
  /* Hervorhebungen im Fließtext: nicht reinweiß, sondern ein
     blasses Mint. Sichtbar als Marke, ohne zu rufen. */
  --ink-hl: #ccfbf1;
  --ink-2:  #94a3b8;   /* slate-400 */
  --ink-3:  #64748b;   /* slate-500 */
  --ink-4:  #556274;

  /* --- Linien --- */
  --line-soft:   rgba(148, 163, 184, 0.10);
  --line:        rgba(148, 163, 184, 0.17);
  --line-strong: rgba(148, 163, 184, 0.30);
  --line-jade:   oklch(0.855 0.125 181 / 0.38);
  --line-jade-2: oklch(0.855 0.125 181 / 0.16);

  /* --- Jade. Die bestehenden Markentöne, in OKLCH verankert. --- */
  --jade-050: oklch(0.962 0.035 180);
  --jade-100: oklch(0.910 0.093 180);   /* #99f6e4 */
  --jade-200: oklch(0.880 0.110 181);
  --jade-300: oklch(0.855 0.125 181);   /* #5eead4 */
  --jade-400: oklch(0.780 0.130 182);
  --jade-500: oklch(0.704 0.123 182);   /* #14b8a6 */
  --jade-600: oklch(0.600 0.104 185);   /* #0d9488 */
  --jade-700: oklch(0.480 0.082 188);
  --jade-800: oklch(0.370 0.060 192);
  --jade-900: oklch(0.269 0.038 195);   /* #0a2c2c */

  --accent:        var(--jade-500);
  --accent-bright: var(--jade-300);
  --accent-wash:   color-mix(in oklab, var(--jade-500) 13%, transparent);
  --accent-wash-2: color-mix(in oklab, var(--jade-500) 22%, transparent);
  --accent-glow:   color-mix(in oklab, var(--jade-400) 50%, transparent);
  --ink-jade:      var(--jade-300);

  /* Altnamen, damit bestehende Seiten weiterlaufen */
  --amber-300: var(--jade-200);
  --amber-400: var(--jade-300);
  --amber-500: var(--jade-400);
  --amber-600: var(--jade-500);
  --night:     var(--paper);

  /* --- Typoskala nach dem Muster der Vorlage ---
         Die großen Grade skalieren, der Fließtext nicht. --- */
  --fs-claim:   clamp(2.5rem, 0.95rem + 6.6vw, 6.5rem);   /*  40 → 104 */
  --fs-display: clamp(2.5rem, 1.30rem + 5.1vw, 5.5rem);   /*  40 →  88 */
  --fs-hero:    clamp(2.25rem, 1.32rem + 3.95vw, 4.5rem); /*  36 →  72 */
  --fs-section: clamp(1.875rem, 1.10rem + 3.3vw, 3.75rem);/*  30 →  60 */
  --fs-sub:     clamp(1.5rem, 1.13rem + 1.60vw, 2.5rem);  /*  24 →  40 */
  --fs-lead:    clamp(1.1875rem, 1.06rem + 0.55vw, 1.5rem);/* 19 →  24 */
  --fs-card:    clamp(1.1875rem, 1.13rem + 0.26vw, 1.375rem);
  --fs-body:    1.0625rem;   /* 17 */
  --fs-small:   0.875rem;    /* 14 */
  --fs-micro:   0.75rem;     /* 12 */

  /* --- Laufweite. Die Vorlage setzt im Fließtext POSITIVE
         Laufweite (+0.012em) und erst bei großen Graden
         negative. Pauschal negativ ist der häufigste Fehler
         beim Nachbau. --- */
  --tr-claim:   -0.015em;
  --tr-display: -0.014em;
  --tr-hero:    -0.012em;
  --tr-section: -0.009em;
  --tr-sub:     -0.004em;
  --tr-lead:     0.012em;
  --tr-body:    -0.014em;
  --tr-small:   -0.016em;
  --tr-eyebrow:  0.01em;

  --lh-claim:   1.05;
  --lh-display: 1.05;
  --lh-hero:    1.07;
  --lh-section: 1.08;
  --lh-sub:     1.15;
  --lh-lead:    1.42;
  --lh-body:    1.47;

  /* --- Rhythmus --- */
  --pad-section:    clamp(5rem, 3.24rem + 7.51vw, 10rem);
  --pad-section-lg: clamp(7rem, 4.36rem + 11.3vw, 13rem);
  --gap-head-sub: 1.25rem;
  --gap-sub-body: 2.5rem;
  --gutter: clamp(1.25rem, 0.83rem + 1.80vw, 2.5rem);

  --measure-text: 692px;
  --measure-page: 1060px;
  --measure-wide: 1440px;

  /* --- Bewegung: vier Kurven, mehr nicht --- */
  --ease-layout: cubic-bezier(0.66, 0, 0.1, 1);
  --ease-out:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-fade:   cubic-bezier(0, 0, 0.5, 1);
  --ease-pop:    cubic-bezier(0.34, 2.16, 0.64, 1);
  --dur-hover:   150ms;
  --dur-ui:      300ms;
  --dur-reveal:  400ms;
  --dur-max:     600ms;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  --font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
               Menlo, Consolas, monospace;
}

@property --ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ---------- BASIS -------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* clip statt hidden: hidden erzeugt einen Scroll-Kontext und
     zerstört jedes position:sticky auf der Seite. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }

button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }

:where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }

::selection { background: color-mix(in oklab, var(--jade-400) 40%, transparent); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--jade-300);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

:where([id]) { scroll-margin-top: clamp(4.5rem, 11vh, 7rem); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- TYPOGRAFIE --------------------------------- */

.t-claim {
  font-size: var(--fs-claim);
  line-height: var(--lh-claim);
  letter-spacing: var(--tr-claim);
  font-weight: 600;
  text-wrap: balance;
}

.t-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 600;
  text-wrap: balance;
}

.t-hero {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero);
  font-weight: 600;
  text-wrap: balance;
}

.t-section {
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  letter-spacing: var(--tr-section);
  font-weight: 600;
  text-wrap: balance;
}

.t-sub {
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  letter-spacing: var(--tr-sub);
  font-weight: 600;
  text-wrap: balance;
}

/* Der Signaturgriff der Vorlage: der Absatz steht in Grau,
   die tragenden Aussagen darin in Hell. Nicht fett — nur hell.
   Das zieht das Auge über den Absatz, ohne ihn zu zerhacken. */
.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--tr-lead);
  font-weight: 600;
  color: var(--ink-2);
  max-inline-size: var(--measure-text);
  text-wrap: pretty;
}

.t-lead b,
.t-lead strong { color: var(--ink-hl); font-weight: 600; }

.t-body { text-wrap: pretty; color: var(--ink-2); }

.t-small { font-size: var(--fs-small); letter-spacing: var(--tr-small); color: var(--ink-3); }

.t-eyebrow {
  display: block;
  font-size: var(--fs-lead);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  color: var(--jade-300);
  margin-block-end: 0.5rem;
}

.t-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---------- LAYOUT ------------------------------------- */

.wrap { width: min(100% - (var(--gutter) * 2), var(--measure-page)); margin-inline: auto; }
.wrap-wide { width: min(100% - (var(--gutter) * 2), var(--measure-wide)); margin-inline: auto; }
.measure { max-inline-size: var(--measure-text); }

.section { padding-block: var(--pad-section); }
.section-lg { padding-block: var(--pad-section-lg); }

.stack > * + * { margin-block-start: var(--gap-head-sub); }
.stack-lg > * + * { margin-block-start: var(--gap-sub-body); }

/* ---------- FLÄCHEN ------------------------------------ */

.surface { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-lg); }

.card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition:
    background-color var(--dur-hover) var(--ease-fade),
    border-color var(--dur-hover) var(--ease-fade),
    transform var(--dur-ui) var(--ease-out);
}

@media (hover: hover) {
  .card:hover { background: var(--surface-2); border-color: var(--line-strong); transform: translateY(-2px); }
}

.spot { position: relative; isolation: isolate; overflow: clip; }

.spot::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-fade);
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in oklab, var(--jade-400) 18%, transparent),
    transparent 72%
  );
}

@media (hover: hover) { .spot:hover::before { opacity: 1; } }

/* ---------- SCHALTFLÄCHEN ------------------------------ */
/* Die Vorlage nutzt kleine, runde, gefüllte Schalter. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.75em 1.35em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -0.012em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-hover) var(--ease-fade),
    border-color var(--dur-hover) var(--ease-fade),
    color var(--dur-hover) var(--ease-fade),
    transform var(--dur-hover) var(--ease-out);
}

.btn:active { transform: scale(0.975); }

.btn-primary { background: var(--jade-500); color: oklch(0.15 0.02 195); font-weight: 600; }
.btn-primary:hover { background: var(--jade-400); }

.btn-secondary { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:hover { border-color: var(--jade-300); color: var(--jade-200); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { color: var(--ink); background: oklch(1 0 0 / 0.07); }

.btn-sm { padding: 0.5em 1.05em; font-size: var(--fs-small); }

/* Der Textlink der Vorlage: Jade, Pfeil, kein Unterstrich. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--jade-300);
  font-size: var(--fs-lead);
  font-weight: 500;
  letter-spacing: var(--tr-lead);
  text-decoration: none;
}

.link-arrow::after { content: "\203A"; transition: transform var(--dur-hover) var(--ease-out); }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- MARKEN ------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.95em;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

.chip-jade { border-color: var(--line-jade); background: var(--accent-wash); color: var(--jade-100); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--jade-300); flex: none; }

.rule { height: 1px; border: 0; background: var(--line); }

/* ---------- REVEAL ------------------------------------- */
/* Sichtbar ist der Grundzustand. Versteckt wird erst, wenn
   feststeht, dass auch wieder aufgedeckt werden kann. */

.reveal { opacity: 1; transform: none; }

@keyframes sd-reveal-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .sda .reveal {
    animation: sd-reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 8% entry 62%;
  }

  .no-sda .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-max) var(--ease-out), transform var(--dur-max) var(--ease-out);
  }

  .no-sda .reveal.is-in { opacity: 1; transform: none; }
  .no-sda .reveal[data-delay="1"] { transition-delay: 80ms; }
  .no-sda .reveal[data-delay="2"] { transition-delay: 160ms; }
  .no-sda .reveal[data-delay="3"] { transition-delay: 240ms; }
  .no-sda .reveal[data-delay="4"] { transition-delay: 320ms; }
}

/* ---------- FORMULARE ---------------------------------- */

.field {
  display: block;
  width: 100%;
  padding: 0.85em 1em;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: border-color var(--dur-hover) var(--ease-fade), box-shadow var(--dur-hover) var(--ease-fade);
}

.field::placeholder { color: var(--ink-4); }
.field:focus { outline: none; border-color: var(--jade-400); box-shadow: 0 0 0 3px var(--accent-wash); }

.label { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); margin-block-end: 0.5rem; }

/* ---------- HILFSKLASSEN ------------------------------- */

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.75em 1.2em;
  background: var(--surface-3);
  border: 1px solid var(--line-jade);
  border-radius: var(--r-md);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-ui) var(--ease-out);
}

.skip-link:focus-visible { transform: none; }

.center { text-align: center; }
.center .t-lead { margin-inline: auto; }

/* ---------- BEWEGUNGSSTOPP ----------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}