/* ==========================================================================
   FAHRSCHULE ZEBRA — App Design Tokens
   Stand: Agent-Flow / handoff-v2  →  Kupfer #D97757 · Inter · Rose-Akzent
   Mobile-first. Alle Komponenten ziehen NUR aus diesen Variablen — keine
   Magic-Numbers in der App. In Next.js: oben in src/app/globals.css einfügen
   (oder @import './tokens.css').
   ========================================================================== */

/* ---------- Fonts ----------
   Orbitron  = Display / Headlines / Buttons / Labels / Zahlen  (UPPERCASE)
   Inter     = Body / Fließtext / Form-Labels / Helper
   JetBrains = Mono: Aktionscodes, Session-IDs, Dev-Output
   In Next.js besser über next/font/google laden (siehe README). Dieser
   @import ist der Plain-HTML-Fallback. */
/* Google-@import entfernt (DSGVO): Fonts werden lokal aus /fonts.css geladen (self-hosted woff2). */

:root {
  /* ====================================================================
     BRAND PALETTE  —  ink + copper + paper ist der Hero-Look.
     Rose NUR auf ink-Flächen (z.B. Eyebrow in dunklen Cards).
     Nur zwei Hintergrundtöne: paper & ink. Kein Gradient-Chaos.
     ==================================================================== */
  --ink:        #141412;             /* Text, dunkle Flächen, Borders, Button-Fill */
  --ink-80:     rgba(20,20,18,0.80);
  --ink-60:     rgba(20,20,18,0.60); /* Sekundärtext */
  --ink-40:     rgba(20,20,18,0.40); /* Subtle-Text */
  --ink-20:     rgba(20,20,18,0.18); /* Borders */
  --ink-10:     rgba(20,20,18,0.10);
  --ink-08:     rgba(20,20,18,0.08); /* Subtle Borders / Tint */

  --paper:      #F4EFE6;             /* Haupt-Background (warmes Off-White) */
  --paper-soft: #EBE4D6;             /* Sekundär-Background, Cards */
  --paper-deep: #E0D7C4;             /* Hover-/Shadow-Surface */

  --copper:      #D97757;            /* Akzent: CTAs, Highlights, € , Stamp-Shadow */
  --copper-deep: #C25C3C;            /* Hover/Press von allem Copper */
  --copper-dim:  rgba(217,119,87,0.22); /* Background-Tint für Copper-Bereiche */
  --copper-soft: rgba(217,119,87,0.35); /* Focus-Ring-Tint */
  --copper-wash: #F9E7DF;            /* sehr heller Copper-Wash (Hinweis-Boxen) */

  --rose:       #F4C2D5;             /* Akzent NUR auf ink-Flächen (Eyebrows) */

  /* Semantische Status (entsättigt, on-brand) */
  --success:    #0F8A52;
  --warning:    #D97757;             /* reuse copper */
  --danger:     #B23A2A;
  --info:       #2E5F7D;

  /* ---------- Semantische Rollen ---------- */
  --bg:          var(--paper);
  --bg-elevated: var(--paper-soft);
  --bg-inverse:  var(--ink);

  --fg:          var(--ink);
  --fg-muted:    var(--ink-60);
  --fg-subtle:   var(--ink-40);
  --fg-inverse:  var(--paper);

  --accent:      var(--copper);
  --accent-deep: var(--copper-deep);

  --border:      var(--ink);         /* DIE Border: 2px solid ink auf paper */
  --border-soft: var(--ink-20);
  --border-hair: var(--ink-10);

  /* ====================================================================
     TYPOGRAPHY
     ==================================================================== */
  --font-display: 'Orbitron', 'Arial Black', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Skala — mobile-first; Display-Größen klettern per clamp() (siehe Klassen) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;   /* Body default */
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  34px;
  --fs-4xl:  44px;
  --fs-5xl:  60px;
  --fs-6xl:  84px;

  --fw-reg:  400;
  --fw-med:  500;
  --fw-sbd:  600;
  --fw-bld:  700;
  --fw-blk:  900;

  --lh-tight: 1.0;
  --lh-snug:  1.15;
  --lh-norm:  1.5;
  --lh-loose: 1.7;

  --tr-display: 0.01em;   /* Orbitron ist schon breit — minimal positiv */
  --tr-upper:   0.16em;   /* uppercase Labels / Eyebrows / Badges */
  --tr-wide:    0.22em;   /* Ribbon-Badges, Meta */
  --tr-body:    0;

  /* ====================================================================
     SPACING  —  4px-Baseline
     ==================================================================== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ====================================================================
     RADII
     ==================================================================== */
  --r-none: 0;
  --r-sm:   4px;
  --r-md:   8px;   /* Buttons, Inputs */
  --r-lg:   14px;  /* Cards */
  --r-xl:   20px;
  --r-pill: 999px;

  /* ====================================================================
     BORDERS
     ==================================================================== */
  --bw-hair: 1px;
  --bw-thin: 2px;   /* default ink border */
  --bw-bold: 3px;

  /* ====================================================================
     SIGNATUR-SCHATTEN  —  der „Kupfer-Stempel": hart versetzt, KEIN Blur.
     Immer nach rechts-unten. Weiche Schatten gehören zu einer anderen Marke.
     ==================================================================== */
  --shadow-copper:      6px 6px 0 0 var(--copper);
  --shadow-copper-lg:   10px 10px 0 0 var(--copper);
  --shadow-copper-sm:   3px 3px 0 0 var(--copper);
  --shadow-copper-deep: 6px 6px 0 0 var(--copper-deep);
  --shadow-ink:         6px 6px 0 0 var(--ink);
  --shadow-ink-sm:      3px 3px 0 0 var(--ink);
  --shadow-press:       2px 2px 0 0 var(--copper);   /* Press-State */

  /* Dezente Tiefe — sparsam (Dropdowns, Toasts) */
  --shadow-sm: 0 1px 2px rgba(20,20,18,0.08);
  --shadow-md: 0 4px 12px rgba(20,20,18,0.10);

  /* ====================================================================
     MOTION  —  präzise & kurz. Keine Bounces, keine Spring-Physik.
     ==================================================================== */
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   320ms;
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* ====================================================================
     LAYOUT
     ==================================================================== */
  --content-max: 1120px;   /* Desktop content cap */
  --app-max:     480px;    /* Mobile-App-Spalte (eine fokussierte Säule) */
  --gutter:      20px;     /* mobile Außenabstand */
  --gutter-lg:   24px;
  --tap:         44px;     /* minimale Hit-Target-Höhe (mobile) */
  --logo-top:    16px;
  --logo-size:   64px;
}

/* ==========================================================================
   BASE  —  greift, wenn dieses Stylesheet auf der Seite Root ist.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-norm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4 {
  font-family: var(--font-display);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  margin: 0;
}
h1 { font-weight: var(--fw-blk); font-size: var(--fs-4xl); line-height: var(--lh-snug); }
h2 { font-weight: var(--fw-bld); font-size: var(--fs-3xl); line-height: var(--lh-snug); }
h3 { font-weight: var(--fw-sbd); font-size: var(--fs-2xl); line-height: var(--lh-snug); }
h4 { font-weight: var(--fw-sbd); font-size: var(--fs-xl);  line-height: var(--lh-snug); }

p { margin: 0 0 var(--sp-4); }
a { color: var(--ink); text-decoration-color: var(--copper); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
code, pre { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--copper); color: var(--paper); }

:focus-visible {
  outline: var(--bw-thin) solid var(--copper);
  outline-offset: 2px;
}

/* ==========================================================================
   SEMANTISCHE TYPE-KLASSEN
   Orbitron = Display/Headlines/Buttons/Labels/Zahlen (UPPERCASE)
   Inter    = Body
   ========================================================================== */
.zb-display {
  font-family: var(--font-display); font-weight: var(--fw-blk);
  font-size: clamp(48px, 13vw, var(--fs-6xl));
  line-height: var(--lh-tight); letter-spacing: var(--tr-display);
  text-transform: uppercase; color: var(--fg); margin: 0;
}
.zb-h1 {
  font-family: var(--font-display); font-weight: var(--fw-bld);
  font-size: clamp(32px, 8vw, var(--fs-4xl));
  line-height: var(--lh-snug); letter-spacing: var(--tr-display);
  text-transform: uppercase; color: var(--fg); margin: 0;
}
.zb-h2 {
  font-family: var(--font-display); font-weight: var(--fw-bld);
  font-size: clamp(26px, 6.5vw, var(--fs-3xl));
  line-height: var(--lh-snug); letter-spacing: var(--tr-display);
  text-transform: uppercase; color: var(--fg); margin: 0;
}
.zb-h3 {
  font-family: var(--font-display); font-weight: var(--fw-sbd);
  font-size: var(--fs-2xl); line-height: var(--lh-snug);
  letter-spacing: var(--tr-display); text-transform: uppercase; color: var(--fg); margin: 0;
}
.zb-h4 {
  font-family: var(--font-display); font-weight: var(--fw-sbd);
  font-size: var(--fs-xl); line-height: var(--lh-snug);
  letter-spacing: var(--tr-display); text-transform: uppercase; color: var(--fg); margin: 0;
}
.zb-eyebrow, .zb-label {
  font-family: var(--font-display); font-weight: var(--fw-bld);
  font-size: var(--fs-xs); line-height: var(--lh-snug);
  letter-spacing: var(--tr-upper); text-transform: uppercase; color: var(--copper);
}
.zb-eyebrow--muted { color: var(--fg-muted); }
.zb-eyebrow--rose  { color: var(--rose); }   /* nur auf ink-Flächen */
.zb-number {
  font-family: var(--font-display); font-weight: var(--fw-bld);
  font-variant-numeric: tabular-nums; letter-spacing: var(--tr-display);
}
.zb-body    { font-family: var(--font-body); font-weight: var(--fw-reg); font-size: var(--fs-md); line-height: var(--lh-norm); color: var(--fg); }
.zb-body-lg { font-family: var(--font-body); font-weight: var(--fw-reg); font-size: var(--fs-lg); line-height: var(--lh-norm); color: var(--fg); }
.zb-body-sm { font-family: var(--font-body); font-weight: var(--fw-reg); font-size: var(--fs-sm); line-height: var(--lh-norm); color: var(--fg-muted); }
.zb-caption { font-family: var(--font-body); font-weight: var(--fw-med); font-size: var(--fs-xs); line-height: var(--lh-norm); color: var(--fg-subtle); }

/* ==========================================================================
   ZEBRA-STREIFEN  —  Signatur. Sparsam: Banner, runde Badges, Divider.
   Nie als Vollflächen-Tapete. ~110° Diagonale.
   ========================================================================== */
.zb-stripes        { background-image: repeating-linear-gradient(110deg, var(--ink) 0 14px, var(--paper) 14px 24px); }
.zb-stripes-tight  { background-image: repeating-linear-gradient(110deg, var(--ink) 0 8px,  var(--paper) 8px 14px); }
.zb-stripes-copper { background-image: repeating-linear-gradient(110deg, var(--ink) 0 14px, var(--copper) 14px 24px); }