/* ============================================================
   tokens.css — Design-Tokens (Single Source of Truth)
   Alle Farben, Schriften und Kernmaße der Seite.
   Look: technische Zeichnung nach DIN — Weiß, Haarlinien,
   sparsame Farbe. Hier ändern = überall ändern.
   ============================================================ */
:root{
  /* --- Farben --------------------------------------------- */
  --paper:#ffffff;                 /* Zeichenpapier / Hintergrund */
  --ink:#1F2041;                   /* Tusche: Linien & Text (statt Schwarz) */
  --ink-60:rgba(31,32,65,.60);     /* gedämpfter Text */
  --ink-45:rgba(31,32,65,.45);     /* Hilfslinien-Beschriftung */
  --line:rgba(31,32,65,.20);       /* Haarlinie */
  --line-2:rgba(31,32,65,.38);     /* kräftigere Linie */
  --grid:rgba(31,32,65,.055);      /* Koordinatengitter (Raster) */
  --yellow:#F0E100;                /* Marker — nur als Highlight/Fläche, nie als Text */
  --red:#CF2D2B;                   /* Redline: Akzent, Bemaßung, Kreuz, CTA */
  --red-d:#b3211f;                 /* Redline gedrückt/hover */

  /* --- Kartenfarben (Scroll-Intro) ------------------------
     Ein Satz Regler für beides: die Ebenen der Stadtkarte
     (assets/img/emden.svg — intro.js lädt sie inline, sie erbt
     daher diese Variablen) und die Farbfelder der Legende
     (.intro-legend in components.css). Hier ändern = Karte und
     Legende bleiben automatisch synchron.
     Die Hex-Werte in emden.svg sind nur noch Fallbacks für den
     Fall, dass die SVG wieder per img-Tag eingebunden wird — dort
     greifen die Seiten-Tokens nicht. */
  --map-ink:var(--ink);            /* Grundfarbe aller Kartenlinien */
  --map-water:#3d6b8c;             /* Hafen & Kanäle — Uferlinie */
  --map-water-fill:#dbeaf2;        /* Hafenbecken — Fläche */
  --map-street:#b3b3b3;            /* Straßennetz */
  --map-autobahn:#878787;    /* Autobahn */
  --map-rail:#323232;           /* Eisenbahn (gestrichelt) */
  --map-power:#a52422;             /* Energiewege */
  --map-wall:#1f8049;              /* Wallanlage — Linie */
  --map-wall-fill:#93cfa6;         /* Wallanlage — Fläche */

  /* --- Schrift -------------------------------------------- */
  /* "Inter Display" = Inter mit font-optical-sizing:auto + Display-Größen
     (Google Fonts hat keine separate Display-Familie). */
  --f-display:"Inter",system-ui,-apple-system,sans-serif; /* Headlines */
  --f-body:"Inter",system-ui,-apple-system,sans-serif;    /* Fließtext */
  --f-ui:"Roboto",system-ui,sans-serif;                   /* Nav, Buttons, Captions */
  --f-slab:"Roboto Slab",Georgia,serif;                   /* technische Labels, IDs, Schriftfeld */
  --f-tech:"osifont","Roboto Slab",Georgia,serif;         /* ISO-3098-Normschrift (Zeichnungs-Look) */
  /* Feinjustage nach unten für jeden in --f-tech (osifont) gesetzten Text.
     Seit fonts.css die Zeilenbox von osifont per ascent-/descent-override auf
     die Versalienmitte eicht (engine-unabhängig, iOS = Desktop), sitzt die
     Schrift bereits richtig → Ausgleich 0. Bleibt als zentraler Knopf: falls
     die kleinen Normschrift-Labels (Eyebrow-Linie, Legende, Schnitt-Label)
     minimal zu hoch/tief wirken, hier in em nachziehen. In em, skaliert also
     mit der Schriftgröße. */
  --tech-shift:0em;

  /* --- Maße ----------------------------------------------- */
  --frame:10px;                    /* Abstand des DIN-Zeichnungsrahmens zum Viewport */

  /* --- Breiten (Satzspiegel) ------------------------------
     Drei Bahnen, alle mittig. Hier zentral tweaken:
       --w-wide  Sektionen mit mehreren Spalten (Hero, Person, Wahl,
                 Kontakt, Kennwerte, Aktuelles) + Header/Footer.
       --w-text  Sektionen mit nur einer Spalte (Positionen, FAQ,
                 Stichtag, Impressum/Datenschutz) — bewusst schmaler.
       --w-prose Lesebreite eines einzelnen Fließtext-Absatzes
                 (Sektionskopf, Akkordeon-Inhalte, Hero-Lead).
     Reihenfolge einhalten: --w-prose < --w-text < --w-wide. */
  --w-wide:1180px;
  --w-text:880px;
  --w-prose:640px;
  --col-gap:54px;                  /* Abstand zwischen zwei gleich breiten Spalten */
  --pad:28px;                      /* horizontaler Seitenrand (Desktop) */
}
/* Einspaltig (≤760px): schmaler Rand links/rechts, Text füllt den Rest.
   --w-wide/--w-text/--w-prose liegen dann über der Viewportbreite und
   greifen nicht mehr — die Bahnen laufen fluid. */
@media(max-width:760px){:root{--pad:20px;--col-gap:32px}}