/* ============================================================
   TWA Web-Designsystem · tokens.css · Stand 21.10.2026
   Quelle: twa_mini_styleguide (Farben, Novel Sans Pro),
   Broschüre v2 (Schwung-Keile, Ghost-Ziffern, angeschnittene Bilder),
   Startseiten-Struktur 13.10.2026.
   Schrift: Adobe Fonts Webprojekt „TWA“, Kit zac4rmq
   <link rel="stylesheet" href="https://use.typekit.net/zac4rmq.css">
   ============================================================ */

:root {
  /* ---- Farbe: Marke (aus dem Styleguide) ---- */
  --twa-blau:     #004373;   /* Primärfarbe, Marke, Grund dunkler Flächen */
  --twa-nacht:    #003054;   /* abgeleitet: Keile auf Blau, Footer-Tiefe */
  --twa-hblau:    #5497B3;   /* Sekundär: Zahlen, Ghost-Ziffern, Linien auf Blau */
  --twa-dgruen:   #66805E;   /* Sekundär: Nachhaltigkeit, ruhige Flächen */
  --twa-gruen:    #8BB542;   /* Sekundär: Sämling, Handlung, Akzentlinie */

  /* ---- Farbe: Akzente (Kennfarben der Aussendungen, sparsam) ---- */
  --twa-ocker:    #EBAC18;
  --twa-gelb:     #EDC725;
  --twa-orange:   #ED6937;
  --twa-apricot:  #EE9C4F;

  /* ---- Farbe: Neutrale (abgeleitet, blaustichig) ---- */
  --twa-weiss:    #FFFFFF;
  --twa-flaeche:  #ECF1F5;   /* Sektionsgrund hell */
  --twa-tblau:    #DDEBF1;   /* Tint für Kacheln, Tags */
  --twa-tgruen:   #E8F0DA;   /* Tint Sämling */
  --twa-linie:    #D6E0EA;
  --twa-grau:     #78828A;   /* Nebentext, Meta */
  --twa-text:     #1F2A33;   /* Fließtext, nie reines Schwarz */

  /* ---- Rollen (damit Komponenten nie Markenfarben direkt greifen) ---- */
  --bg:        var(--twa-weiss);
  --bg-alt:    var(--twa-flaeche);
  --bg-brand:  var(--twa-blau);
  --fg:        var(--twa-text);
  --fg-muted:  var(--twa-grau);
  --fg-brand:  var(--twa-blau);
  --on-brand:  var(--twa-weiss);
  --accent:    var(--twa-gruen);
  --accent-2:  var(--twa-hblau);
  --line:      var(--twa-linie);
  --ghost:     var(--twa-tblau);   /* Ghost-Ziffern auf hellem Grund */
  --ghost-on-brand: rgba(84,151,179,.28);

  /* ---- Schrift ---- */
  --font: "novel-sans-pro", "Alegreya Sans", "Segoe UI", Calibri, sans-serif;
  --w-light: 300; --w-regular: 400; --w-medium: 500; --w-bold: 700; --w-xbold: 800;

  /* Typo-Skala (fluid, Basis 18 px Desktop / 17 px mobil) */
  --t-display: clamp(2.6rem, 1.2rem + 5.2vw, 5.6rem);   /* Hero, 1 Zeile XBold + 1 Zeile Light */
  --t-h1:      clamp(2.2rem, 1.2rem + 3.4vw, 4rem);
  --t-h2:      clamp(1.7rem, 1rem + 2.2vw, 2.9rem);
  --t-h3:      clamp(1.2rem, 1rem + .7vw, 1.5rem);
  --t-lead:    clamp(1.15rem, 1rem + .6vw, 1.4rem);
  --t-body:    clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  --t-small:   .9375rem;
  --t-label:   .8125rem;   /* Versal, Tracking .12em */
  --t-ghost:   clamp(8rem, 22vw, 20rem);   /* Ghost-Ziffern */

  --lh-tight: 1.02; --lh-head: 1.12; --lh-body: 1.55;
  --track-label: .12em; --track-caps: .06em;

  /* ---- Raster & Abstand ---- */
  --max: 1280px;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --measure: 62ch;
  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4rem;
  --s-6: clamp(4rem, 9vw, 8rem);   /* Sektionsabstand */

  /* ---- Schwung (das Signaturmotiv) ---- */
  --schwung-angle: 7deg;           /* Neigung der Keile, immer gleich */
  --schwung-rise: 6vw;             /* Höhe, die ein Keil über die Breite gewinnt */
  --wedge-top-l:    polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--schwung-rise)));
  --wedge-top-r:    polygon(0 0, 100% 0, 100% calc(100% - var(--schwung-rise)), 0 100%);
  --wedge-bottom-l: polygon(0 var(--schwung-rise), 100% 0, 100% 100%, 0 100%);
  --wedge-bottom-r: polygon(0 0, 100% var(--schwung-rise), 100% 100%, 0 100%);

  /* ---- Form ---- */
  --radius: 2px;            /* fast keine Rundung, Architektur-Kante */
  --shadow: 0 10px 30px rgba(0,67,115,.10);

  /* ---- Bewegung (Stufe 2 „Lebendig“, zurückhaltend) ---- */
  --d-micro: 160ms; --d-state: 300ms; --d-reveal: 600ms;
  --ease-out: cubic-bezier(.2,.7,.2,1); --ease-in: cubic-bezier(.6,0,.8,.4);
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-micro: 0ms; --d-state: 0ms; --d-reveal: 0ms; }
}