/* AZAV School Landingpage · Fassung 2 · Tokens (Gate 2, 16.10.2026)
   Modus Marke: Farben und Schrift aus DESIGN.md, frei sind Raster, Rhythmus, Bewegung, Signatur.
   Ausnahme dieser Seite (Arta 16.10.2026): Überschriften Poppins 500 statt IBM Plex Serif 700.
   Nichts im Code erfindet einen Wert, der hier nicht steht. */

:root{
  /* Farbe · 60 Weiß und Hellgrau, 30 Blau und Navy, Gold nur am Kaufknopf */
  --grund:#ffffff;
  --flaeche:#eaeef3;          /* DESIGN.md hell */
  --flaeche-leise:#f8f9fb;    /* DESIGN.md Grund */
  --text:#191919;
  --gedaempft:#4c5557;        /* DESIGN.md Text-Boden für Sekundärtext */
  --akzent:#0e518d;           /* IfDQ-Blau */
  --akzent-tief:#0a3d6b;      /* Tiefe */
  --nacht:#082f53;            /* Ende des Navy-Verlaufs, aus #0a3d6b abgedunkelt (Annahme, DESIGN.md-Notiz) */
  --signal:#fcb900;           /* nur Kaufknopf */
  --signal-text:#3a2b00;
  --auf-nacht:rgba(255,255,255,.86);
  --auf-nacht-leise:rgba(255,255,255,.72);

  /* Typografie · eine Familie, zwei Gewichte, eine Skala */
  --schrift:"Poppins",system-ui,sans-serif;
  --gewicht-text:400;
  --gewicht-titel:500;
  --stufe-zahl:clamp(2.75rem,2.1rem + 2vw,3.5rem);    /* Preis */
  --stufe-1:clamp(1.625rem,1.2rem + 1.4vw,2.375rem);  /* H1, 26 bis 38 px, Gewicht 400 (Wortlaut lang, kleiner als LearningSuite) */
  --stufe-2:clamp(1.625rem,1.25rem + 1.2vw,2.25rem);  /* H2, 26 bis 36 px */
  --stufe-3:clamp(1.1875rem,1.1rem + .35vw,1.375rem); /* H3, 19 bis 22 px */
  --stufe-4:clamp(1.0625rem,1rem + .25vw,1.125rem);   /* Fließtext, 17 bis 18 px */
  --klein:.9375rem;                                   /* Beschriftung, 15 px */
  --mini:.875rem;                                     /* Bildzeile und Fuß, 14 px */
  --zeile-titel:1.3;
  --zeile-text:1.65;

  /* Raum · 8-Punkt-Raster */
  --raum-1:8px; --raum-2:16px; --raum-3:24px; --raum-4:32px;
  --raum-5:48px; --raum-6:64px; --raum-7:96px; --raum-8:128px;
  --breite:1200px;

  /* Kante */
  --radius:16px;
  --radius-klein:12px;
  --radius-gross:24px;
  --linie:1px solid rgba(10,61,107,.10);
  --schatten:0 1px 2px rgba(10,61,107,.06),0 16px 40px -20px rgba(10,61,107,.28);
  --schatten-tief:0 40px 80px -32px rgba(4,18,33,.55);
  --nacht-verlauf:radial-gradient(70% 60% at 85% 0%,rgba(255,255,255,.08),transparent 70%),
                  linear-gradient(170deg,var(--akzent-tief) 0%,var(--nacht) 78%);

  /* Bewegung · nur transform und opacity, eine Kurve */
  --dauer:.6s;
  --dauer-kurz:.25s;
  --kurve:cubic-bezier(.2,.7,.2,1);
}