/* ============================================================
   LAYOUT & GRID — Bewerbungsmanager (Session 4)
   ------------------------------------------------------------
   Geteilte Abstandslogik lebt in tokens/spacing.css — hier
   stehen die getrennten LAYOUT-Systeme je Medium:

   DIGITAL  — fluides Layout: Breakpoints, Container, Z-Index.
   PRINT    — feste Geometrie: Papierformate, Satzspiegel nach
              DIN 5008 (Anschreiben), Dokumentränder, Bleed.

   BREAKPOINTS: CSS-Variablen funktionieren nicht in @media —
   die Tokens hier sind die KANONISCHE Referenz (lesbar via JS /
   getComputedStyle); in Media Queries stehen die px-Werte
   wörtlich, mit Kommentar auf den Token-Namen.
   ============================================================ */

:root {
  /* ===== DIGITAL ============================================ */

  /* ---- Breakpoints (min-width; Referenzwerte, s. o.) -------
       sm   640px  — Modal wird vom Vollbild zum Sheet
       md   768px  — zweispaltige Formulare, Board 2–3 Spalten
       lg  1024px  — Standard-Desktop, volles Board
       xl  1280px  — Inhaltsbreite rastet auf --container ein   */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---- Container & Seitenränder -----------------------------
     Drei Inhaltsbreiten — mehr gibt es nicht:
       narrow  Lese- & Formularseiten, Detail-Sheets
       page    Standardseiten (Listen, Einstellungen)
       Board   KEIN Container — fluid, begrenzt nur vom Gutter  */
  --container-narrow: 720px;
  --container-page: 1120px;
  --page-gutter: var(--space-24);      /* Seitenrand mobil */
  --page-gutter-lg: var(--space-48);   /* Seitenrand ab lg */

  /* ---- Z-Index-Skala ----------------------------------------
     Hunderterschritte, damit lokale Feinjustierung (+1…+9) nie
     eine Ebene überspringt. Kein z-index außerhalb der Skala.  */
  --z-raised: 10; /* @kind other */     /* angehobene Elemente im Fluss (gezogene Karte) */
  --z-sticky: 100; /* @kind other */    /* sticky Spaltenköpfe, Tabellen-Header */
  --z-header: 200; /* @kind other */    /* App-Header / globale Navigation */
  --z-dropdown: 300; /* @kind other */  /* Menüs, Dropdowns, Datepicker */
  --z-backdrop: 400; /* @kind other */  /* Bokeh-Backdrop unter Overlays */
  --z-modal: 500; /* @kind other */     /* Modal / Sheet */
  --z-popover: 600; /* @kind other */   /* Menüs INNERHALB eines Modals */
  --z-toast: 700; /* @kind other */     /* Toasts — liegen über allem */

  /* ===== PRINT ==============================================
     Nur in @media print / Print-Templates (Sessions 10/11).
     Auflösung: Rasterbilder mit 300 DPI anliefern (Foto im
     Lebenslauf 35×45 mm → mind. 413×531 px). Kein Token —
     DPI ist eine Anlieferungs-, keine CSS-Größe.               */

  /* ---- Papierformate ---------------------------------------- */
  --page-a4-w: 210mm; /* @kind spacing */
  --page-a4-h: 297mm; /* @kind spacing */
  /* DIN lang (Umschlag 110×220 mm): kein Satzformat — A4 wird
     zweimal gefalzt (Falzmarken unten) und passt ins Fenster.  */

  /* ---- Anschreiben — Satzspiegel nach DIN 5008 (Form B) ----- */
  --letter-margin-left: 25mm; /* @kind spacing */
  --letter-margin-right: 20mm; /* @kind spacing */
  --letter-margin-bottom: 20mm; /* @kind spacing */
  --letter-head-h: 45mm; /* @kind spacing */      /* Briefkopfbereich */
  --letter-address-top: 45mm; /* @kind spacing */ /* Anschriftfeld (fensterkompatibel) */
  --letter-address-left: 20mm; /* @kind spacing */
  --letter-address-w: 85mm; /* @kind spacing */
  --letter-address-h: 40mm; /* @kind spacing */
  --letter-body-top: 100mm; /* @kind spacing */   /* Betreffzeile beginnt hier */
  --letter-fold-1: 105mm; /* @kind spacing */     /* Falzmarken ab Blattoberkante */
  --letter-fold-2: 210mm; /* @kind spacing */
  --letter-punch: 148.5mm; /* @kind spacing */    /* Lochmarke (Blattmitte) */

  /* ---- Dokumente (Lebenslauf, Deckblatt, Mappe) -------------
     Nicht DIN-reguliert — ruhiger, gleichmäßiger Spiegel.      */
  --doc-margin: 20mm; /* @kind spacing */
  --doc-col-gap: 8mm; /* @kind spacing */         /* Spaltenabstand (z. B. Seitenleiste) */

  /* ---- Beschnitt & Sicherheitszone ---------------------------
     Nur für randabfallende Gestaltung (Deckblatt). Anschreiben
     und Lebenslauf sind randlos-frei → kein Bleed nötig.       */
  --print-bleed: 3mm; /* @kind spacing */         /* Beschnittzugabe über Endformat hinaus */
  --print-safety: 5mm; /* @kind spacing */        /* Abstand von Text/Logo zur Schnittkante */
}