/* ============================================================
   Design-Tokens — Oberstufe Gymnasium am Wall
   Abgeleitet aus dem Relaunch-Entwurf "Gymnasium am Wall - Startseite"
   (design_handoff_startseite/README.md, Juni 2026).
   Einzige Quelle für Farbe, Typografie, Abstand, Radius, Schatten.
   In site.css NUR var(--…) verwenden, keine Literalwerte.
   ============================================================ */

:root {
  /* --- Akzent ------------------------------------------------ */
  --accent:        #DA6A1C;   /* Logo-Orange, Primärfarbe        */
  --accent-deep:   #B8530C;   /* Hover, Icons, Eyebrow           */
  --accent-tint:   #FAEEE0;   /* Pills, Icon-Boxen, Hover-Fläche */

  /* --- Neutrale Flächen -------------------------------------- */
  --bg:            #FBF9F6;   /* Seitenhintergrund, warmes Off-White */
  --surface:       #FFFFFF;   /* Karten, Header                  */
  --surface-tint:  #F2EBE2;   /* Navigations-Hover               */
  --ink:           #211C16;   /* Überschriften, dunkle Flächen   */

  /* --- Text --------------------------------------------------- */
  --text:          #3A332B;
  --text-soft:     #5A5247;
  --text-muted:    #8A8378;
  --text-on-dark:  #D7D0C4;
  --text-on-dark-muted: #A39B8D;

  /* --- Linien ------------------------------------------------- */
  --line:          #ECE7E0;
  --line-strong:   #DDD5C9;
  --line-dark:     #38322A;

  /* --- Signalfarben ------------------------------------------- */
  --warn:          #E5BE7A;   /* Hinweisbanner, "Achtung"        */
  --warn-bg:       #FDF6E8;
  --info-bg:       #FAEEE0;
  --lock:          #8A8378;   /* geschützter Bereich             */

  /* --- Typografie --------------------------------------------- */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Spectral", Georgia, serif;

  /* Fluide Skala – ersetzt die festen px-Werte des Entwurfs.
     clamp(min, ideal, max) sorgt für Lesbarkeit ab 320 px Breite. */
  --fs-h1:    clamp(2.05rem, 1.35rem + 3.1vw, 3.6rem);
  --fs-h2:    clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem);
  --fs-h3:    clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
  --fs-lead:  clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --fs-body:  1.0625rem;   /* 17px */
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;     /* Eyebrows, Chips – uppercase        */

  --lh-tight: 1.08;
  --lh-body:  1.65;
  --ls-tight: -0.02em;
  --ls-label:  0.05em;

  /* --- Abstände (8er-Rhythmus) --------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.875rem;
  --sp-4: 1rem;     --sp-5: 1.375rem; --sp-6: 2rem;
  --sp-7: 2.5rem;   --sp-8: 3.5rem;   --sp-9: 5rem;

  /* --- Layout -------------------------------------------------- */
  --container:      77.5rem;  /* 1240px */
  --container-text: 46rem;    /* Lesebreite für Fließtext         */
  --gutter:         clamp(1rem, 0.5rem + 2.2vw, 2rem);

  /* --- Radius --------------------------------------------------- */
  --r-xs: 7px;  --r-sm: 10px; --r-md: 14px;
  --r-lg: 18px; --r-xl: 22px; --r-pill: 100px;

  /* --- Schatten -------------------------------------------------- */
  --sh-btn:   0 8px 22px -8px var(--accent);
  --sh-card:  0 14px 30px -18px rgba(33, 28, 22, 0.35);
  --sh-lift:  0 24px 48px -28px rgba(33, 28, 22, 0.4);

  /* --- Bewegung --------------------------------------------------- */
  --t-fast: 0.15s ease;
  --t-base: 0.2s ease;
}

/* Breakpoints als Referenz (CSS-Variablen wirken in @media nicht):
   Tablet   max-width: 64rem   (1024px)
   Handy    max-width: 40rem   (640px)
   Klein    max-width: 23.4rem (375px)  */

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-base: 0s; }
}

/* --- Schriften selbst hosten (DSGVO) -----------------------------
   Keine Google-Fonts-Einbindung. woff2-Dateien nach assets/fonts/
   legen. Quelle: das Bundle in "Schulhomepage Design-Update.zip"
   enthält 28 base64-kodierte woff2-Dateien, die sich extrahieren
   lassen; alternativ von Google Fonts herunterladen und lokal ablegen.
   Benötigte Schnitte:
     Bricolage Grotesque 400, 600, 700, 800
     Spectral 300, 400, 400 italic, 600
------------------------------------------------------------------ */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-Variable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/Spectral-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/Spectral-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("fonts/Spectral-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}