/* ============================================================
   SOLID ESTATE — Design-Tokens
   1:1 aus dem Jetlag-System übernommen (Fluid-Formel, Spacing, Radius,
   Motion, Z-Bänder). Nur Farben und Schriften sind Solid-spezifisch.
   ============================================================ */
:root {
  /* ---- Farben ----
     Anthrazit/Weiß + warmes Stein/Taupe (gesampelt aus den bestehenden
     Solid-Grafiken: Leistungs-Diagramm #75726d, Solid Ring #999590/#d6d6d6).
     --color-dark bleibt reines Schwarz: Navbar und Hero-Titel laufen unter
     mix-blend-mode: difference, jede Abweichung würde dort grau durchschlagen. */
  --color-light: #ffffff;
  --color-dark: #000000;
  --color-brand: #75726d;        /* Taupe — Akzent (Buttons, Marker, Fokus) */
  --color-brand-light: #98948e;  /* Stein — Akzent auf dunklen Sektionen */
  --color-stone: #d6d6d6;        /* helles Steingrau — Divider/Marker auf dunkel */
  --color-signal: #c9352a;       /* Signalrot — Status „im Bau" auf hellem Grund */
  --color-signal-light: #e4584c; /* Signalrot auf dunklen Sektionen (mehr Leuchtkraft) */
  --color-caution: #98948e;      /* Status „in Planung" */
  /* #757575 ist der einzige Grauwert, der auf Weiss UND auf Schwarz ueber 4,5:1
     liegt (4,61 bzw. 4,56) — die Tags laufen in beiden Kontexten. #808080 lag auf
     Weiss bei 3,95:1 und damit unter der Lesbarkeitsschwelle. */
  --color-grey: #757575;
  --color-grey-dark: #333333;

  --color-dark-20: rgba(0, 0, 0, .2);
  --color-dark-50: rgba(0, 0, 0, .5);
  --color-light-20: rgba(255, 255, 255, .2);
  --color-light-50: rgba(255, 255, 255, .5);

  --color-border: var(--color-dark-20);

  /* ---- Fluid-Basis: EINE stetige Kurve fuer alle Breiten ----
     Frueher rechnete jede Breakpoint-Stufe mit eigener Bezugsbreite — an den
     Nahtstellen sprang die Grundschrift (991→992 px von 19 auf 11 px, iPad quer
     landete bei 11,4 px). Jetzt:
       Telefon    bis  390 px:  16/390 = 4.1026vw, nach unten auf 14 px begrenzt
       390–1440 px:             16 px fest (Handy, Tablet, kleine Laptops)
       ab 1440 px:              16/1440 = 1.1111vw, Deckel 21,33 px (ab 1920 px)
     Die Rollen-Tokens (Headline/Subhead/Copy/Tag) staffeln wie gehabt in em. */
  --size-font: clamp(14px, max(min(4.1026vw, 16px), 1.1111vw), 21.3333px);
  --size-container: min(100vw, 2560px);

  /* ---- Schriften ----
     Raleway bleibt die Stimme; die Instrumente (Tafeln, Codes, Specs) laufen
     in IBM Plex Mono statt der Cockpit-Schrift B612. */
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, "Courier New", monospace;
  --font-ui: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Raleway", "Arial Black", sans-serif;
  --font-display-stretch: normal;

  /* ---- Typo-Skala: vier Rollen, je EINE Größe auf der ganzen Site ----
     Headline (h1/h2, Claims, Kennzahlen, Marquee) · Subhead (h3/Blocktitel,
     Tafelzeilen, Ablauf-/Ring-Titel, Menüpunkte) · Copy (alles Lesbare: Absätze, Listen,
     Tafel-Beschreibungen, Rechtstexte, Specs) · Tag (Tags, Codes, Nav,
     Buttons, Bildunterschriften, Labels). Einzige Ausnahme: .display.is-quote. */
  --text-headline: 3em;
  --text-subhead: 1.5em;
  --text-copy: 1.125em;
  --text-tag: .75em;
  --tag-ratio: .75;   /* unitless Zwilling von --text-tag: Divisor für Elemente in .75em-Kontexten (Tafeln, Punktlisten) */
  --lh-heading: 1;
  --lh-body: 1.35;

  /* ---- Spacing (×2-Reihe) ---- */
  --space-3xs: .3125em;   /*  5px */
  --space-2xs: .375em;    /*  6px — Icon<->Text */
  --space-xs: .5em;       /*  8px */
  --space-sm: .625em;     /* 10px — Karten-intern */
  --space-md: 1.25em;     /* 20px — Basis-Gap, Panel-Insets */
  --space-lg: 2.5em;      /* 40px — Sektionsblöcke */
  --space-xl: 5em;        /* 80px */

  --padding-global: 2.5em;
  --padding-section: 10em;
  --padding-button: .9375em;

  /* ---- Radius & Border ---- */
  --radius-small: .125em;   /* 2px — de-facto einziger Radius */
  --border-1: 1px solid var(--color-border);
  --border-dark: 1px solid var(--color-dark);
  --border-brand: 1px solid var(--color-brand);

  /* ---- Motion ---- */
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.625, .05, 0, 1);
  --dur-instant: .1s;
  --dur-fast: .3s;
  --dur-base: .4s;
  --dur-medium: .5s;
  --dur-slow: .6s;
  --dur-slower: .8s;

  --opacity-dim: .2;
  /* .58 statt .5: Schwarz auf Weiss ergab bei .5 exakt #808080 — 3,94:1 und damit
     unter der Lesbarkeitsschwelle (WCAG AA 4,5:1). Jetzt rund 5,3:1, optisch fast
     unveraendert. Gilt auch fuer helle Schrift auf dunklem Grund. */
  --opacity-muted: .58;
  --opacity-marker: .05;

  /* ---- Signatur-Maße ---- */
  --card-inset: 1em;        /* Bild-Einrückung beim Hover */
  --marker-size: .625em;    /* 10px Eckwinkel */
  --tag-dot: .4375em;       /* 7px Quadrat */

  /* ---- Z-Bänder ---- */
  --z-card: 2;
  --z-hero: 100;
  --z-hud: 950;
  --z-footer: 995;
  --z-cta: 997;
  --z-chrome: 998;
  --z-cursor: 999;
  --z-wipe: 9999;
}

@media (max-width: 991px) {
  :root {
    --text-headline: 2em;
    --text-copy: 1em;
  }
}
@media (max-width: 767px) {
  :root {
    --padding-global: 1.25em;
    --padding-section: 7.5em;
    --text-copy: .875em;
    --text-subhead: 1.25em;
  }
}