/* =============================================================
   tokens.css — gemeinsame Grundlage
   Wird von der Produktseite UND vom Aktivator-Designer eingebunden.
   Änderungen hier wirken in beiden Oberflächen.

   Aufbau:
     1  Tokens (dunkel = Standard, hell = zweite Ausprägung)
     2  Schrift, Abstand, Radius, Bewegung
     3  Basis (Reset, Fokus, Druck)
     4  Typo-Skala als Hilfsklassen
     5  Primitive (Button, Chip, Feldzeile)

   Regel: Komponenten verwenden ausschließlich Tokens.
   Ein Festwert wie #FFFFFF in einer Komponente ist ein Fehler.
   ============================================================= */

/* ---------- 1  Farbtokens ---------- */

:root,
.theme-dark {
  color-scheme: dark;

  --brand:        #46B8BC;
  --brand-strong: #6ACFD3;
  --brand-soft:   rgba(70,184,188,.14);
  --brand-line:   rgba(70,184,188,.45);
  --on-brand:     #04181A;

  --accent-2:      #E27FA6;
  --accent-2-soft: rgba(226,127,166,.16);

  --ground:    #06070C;
  --surface:   #0E1016;
  --surface-2: #161A22;
  --line:      #222733;
  --line-soft: #171B23;
  --ink:       #EDEFF4;
  --ink-2:     #79808F;
  --ink-3:     #4E5563;

  --ok:     #4FB88A;
  --warn:   #F0A84A;
  --danger: #E8695E;

  color: var(--ink);
}

.theme-light {
  color-scheme: light;

  --brand:        #025356;
  --brand-strong: #0A6469;
  --brand-soft:   #E7EFEF;
  --brand-line:   #9CBDBE;
  --on-brand:     #FFFFFF;

  --accent-2:      #DB608F;
  --accent-2-soft: #FBEAF1;

  --ground:    #F2F3F5;
  --surface:   #FFFFFF;
  --surface-2: #FAFAFC;
  --line:      #DFE2E7;
  --line-soft: #EBEDF1;
  --ink:       #14171B;
  --ink-2:     #626A76;
  --ink-3:     #8A929E;

  --ok:     #2E7D5B;
  --warn:   #E08A1E;
  --danger: #C4362C;

  color: var(--ink);
}

/* ---------- 2  Schrift, Maß, Bewegung ---------- */

:root {
  /* Display: Avant-Garde-Typ · Text: neutrale Grotesk · Mono: Plex */
  --display: "ITC Avant Garde Gothic", "Poppins", "Questrial",
             "TeX Gyre Adventor", "Century Gothic", sans-serif;
  --text:    "Inter", "Helvetica Now Text", "TeX Gyre Heros",
             "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", "DejaVu Sans Mono", ui-monospace, monospace;

  --s1:4px;  --s2:8px;   --s3:12px; --s4:16px;  --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px; --s9:96px;  --s10:128px;

  --r-sm:6px; --r-md:10px; --r-lg:18px; --r-pill:999px;

  --col:1200px;     /* Inhaltsbreite */
  --gutter-page:72px;
  --gutter-tool:32px;

  --ease:cubic-bezier(.2,.6,.2,1);
  --dur:.24s;
}

@media (max-width:760px) {
  :root { --gutter-page:24px; --gutter-tool:20px; }
}

/* ---------- 3  Basis ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); }

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

::selection { background: var(--brand-soft); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Druck und PDF-Export erzwingen das helle Thema. */
@media print {
  :root, .theme-dark {
    color-scheme: light;
    --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#FAFAFC;
    --line:#C9CDD4; --line-soft:#E4E6EA;
    --ink:#14171B; --ink-2:#4A5260; --ink-3:#767E8A;
    --brand:#025356; --brand-strong:#0A6469;
    --brand-soft:#E7EFEF; --brand-line:#9CBDBE; --on-brand:#FFFFFF;
    --accent-2:#DB608F;
  }
  body { background:#FFFFFF; }
}

/* ---------- 4  Typo-Skala ---------- */

.t-display-xl{font-family:var(--display);font-weight:400;font-size:74px;line-height:.98;letter-spacing:-.028em;margin:0}
.t-display-l {font-family:var(--display);font-weight:400;font-size:54px;line-height:1.06;letter-spacing:-.022em;margin:0}
.t-display-m {font-family:var(--display);font-weight:400;font-size:38px;line-height:1.10;letter-spacing:-.018em;margin:0}
.t-figure    {font-family:var(--display);font-weight:400;font-size:74px;line-height:.92;letter-spacing:-.030em;font-variant-numeric:tabular-nums;margin:0}
.t-title     {font-family:var(--display);font-weight:400;font-size:23px;line-height:1.28;letter-spacing:-.008em;margin:0}
.t-body-l    {font-size:17px;line-height:1.75;margin:0}
.t-body      {font-size:15.5px;line-height:1.70;margin:0}
.t-caption   {font-size:13px;line-height:1.55;color:var(--ink-2);margin:0}
.t-label     {font-size:10.5px;line-height:1.4;letter-spacing:.3em;text-transform:uppercase;margin:0}
.t-mono      {font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.01em;font-variant-numeric:tabular-nums}

@media (max-width:1100px){
  .t-display-xl{font-size:54px;letter-spacing:-.022em}
  .t-display-l {font-size:40px;letter-spacing:-.018em}
  .t-display-m {font-size:30px}
  .t-figure    {font-size:56px}
}
@media (max-width:760px){
  .t-display-xl{font-size:38px;line-height:1.06;letter-spacing:-.018em}
  .t-display-l {font-size:30px}
  .t-display-m {font-size:25px}
  .t-figure    {font-size:46px}
}

/* ---------- 5  Primitive ---------- */

.btn{
  display:inline-block;
  font-family:var(--text);font-size:15px;line-height:1.2;letter-spacing:.01em;
  padding:11px 22px;border-radius:var(--r-sm);
  border:1px solid transparent;
  background:var(--brand);color:var(--on-brand);
  cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover{background:var(--brand-strong);color:var(--on-brand)}

.btn--secondary{background:transparent;color:var(--brand);border-color:var(--brand-line)}
.btn--secondary:hover{background:var(--brand-soft);color:var(--brand-strong)}

.btn--quiet{background:transparent;color:var(--ink-2);border-color:var(--line)}
.btn--quiet:hover{background:transparent;color:var(--ink);border-color:var(--ink-3)}

/* Zweiter Akzent: Betonung, kein Zustand. Höchstens eine Aktion je Ansicht. */
.btn--accent{background:var(--accent-2);color:var(--on-brand)}
.btn--accent:hover{background:var(--accent-2);filter:brightness(1.08);color:var(--on-brand)}

.btn--sm{font-size:12.5px;padding:7px 14px}

.pill{
  display:inline-block;font-family:var(--text);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 10px;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--ink-2);
}
.pill--ok{background:var(--brand-soft);color:var(--brand)}
.pill--warn{background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn)}
.pill--danger{background:color-mix(in srgb, var(--danger) 16%, transparent);color:var(--danger)}
.pill--accent{background:var(--accent-2-soft);color:var(--accent-2)}

/* Feldzeile — Grundbaustein der Werkzeugoberfläche */
.field{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  padding:9px 0;border-bottom:1px solid var(--line-soft);
}
.field:last-child{border-bottom:0}
.field__key{font-size:13.5px;color:var(--ink-2)}
.field__value{font-family:var(--mono);font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}