/* ============================================================
   GRAND POSITION GmbH · Design Tokens
   Verbindliche Quelle: https://grandposition.grandposition.digital
   Stand: September 2026
   Dark-first. Light nur als Kontrastsektion via [data-theme="light"].
   ============================================================ */

:root {
  /* ---------- Farben · Dark Anchor (Basis) ---------- */
  --gp-nacht:         #0B1E2D;  /* Haupthintergrund, Dark Hero */
  --gp-tiefblau:      #1C3448;  /* Dark Sections, Navigation */
  --gp-schieferblau:  #2D4F68;  /* Karten auf Dark, Hover; Muted Text auf Hell */
  --gp-schiefer:      #8DA5BB;  /* Muted Text auf Dark, Meta */

  /* ---------- Farben · Blue (Signatur) ---------- */
  --gp-eis:           #D0F5FF;  /* Signature-Ton, helle Hero-Flächen */
  --gp-horizont:      #87DCFF;  /* Karten-Akzente, Trennlinien, Link-Hover auf Dark */
  --gp-signal:        #1AABDF;  /* Links & Interaktion auf dunklem Grund (NICHT auf Weiß) */
  --gp-tiefe:         #0075B0;  /* Primäre Buttons, Links auf hellem Grund, Logo „grand“ */

  /* ---------- Farben · Magenta (Identität) ---------- */
  --gp-rose:          #FFE0F3;
  --gp-magenta:       #FF3DA8;  /* nur auf Dark oder als Headline ≥ 24 px; nie Fläche */
  --gp-tiefmagenta:   #C4006B;  /* Hover; einzige Magenta-Textfarbe auf Weiß */
  --gp-dunkelmagenta: #5E0033;  /* Text auf Magenta-Flächen */

  /* ---------- Farben · Teal (Leistung) ---------- */
  --gp-tealhauch:     #D4F7F5;
  --gp-teal:          #00C4B4;  /* Labels, Icons, Button-Hover auf Dark */
  --gp-tiefteal:      #008B7F;  /* Labels auf Hell */
  --gp-dunkelteal:    #00413D;  /* Text auf Teal-Flächen */

  /* ---------- Farben · Lime (Energie, Zahlen) ---------- */
  --gp-limettenhauch: #EDFFD1;
  --gp-lime:          #AAFF2E;  /* Kennzahlen, Ergebnisse – nur auf Dark */
  --gp-tieflime:      #78C400;  /* große Kennzahlen auf Hell */
  --gp-dunkellime:    #2E4A00;  /* Text auf Lime-Flächen */

  /* ---------- Neutral ---------- */
  --gp-weiss:         #FFFFFF;
  --gp-logo-grau:     #646363;  /* nur im Logo „position“ */

  /* ---------- Semantik · Dark (Standard) ---------- */
  --bg:            var(--gp-nacht);
  --bg-2:          var(--gp-tiefblau);
  --text:          #FFFFFF;
  --text-muted:    var(--gp-schiefer);
  --heading:       #FFFFFF;
  --link:          var(--gp-signal);
  --link-hover:    #FFFFFF;
  --accent:        var(--gp-teal);
  --accent-number: var(--gp-lime);
  --accent-brand:  var(--gp-magenta);
  --border:        rgba(141,165,187,.28);
  --focus:         var(--gp-signal);
  --btn-primary-bg:   #FFFFFF;
  --btn-primary-text: var(--gp-nacht);
  --btn-primary-hover-bg:   var(--gp-teal);
  --btn-primary-hover-text: var(--gp-dunkelteal);

  /* ---------- Typografie ---------- */
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;   /* alles */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;       /* Statements, Zitate, Intro */

  --fw-regular: 400;  --fw-medium: 500;   /* Headlines 500, nie 700/800. Laufweite normal (0 bis -.01em), nie condensed, nie eng */

  --fs-display: clamp(3rem, 7.5vw, 6.5rem);       /* 48–104 px · LH 1.04 · LS -.01em */
  --fs-h2:      clamp(2rem, 4vw, 3.25rem);        /* 32–52 px  · LH 1.12 · LS 0 */
  --fs-h3:      clamp(1.375rem, 2vw, 1.75rem);    /* 22–28 px  · LH 1.25 · LS 0 */
  --fs-serif:   clamp(1.625rem, 2.6vw, 2.5rem);   /* 26–40 px  · LH 1.2 */
  --fs-body:    clamp(1.125rem, 1.35vw, 1.375rem);/* 18–22 px  · LH 1.4 · max 34em */
  --fs-small:   .9375rem;                         /* 15 px · LH 1.5 */
  --fs-label:   .6875rem;                         /* 11 px · Versalien · LS .08em · in Klammern */

  /* ---------- Spacing (8er-Basis) ---------- */
  /* ---------- Skalierung (verbindlich) ----------
     1 rem = 16 px bis 1440 px Viewport. Darüber wächst rem proportional zur Breite (100vw / 90):
     1920 → 21 px · 2560 → 28 px · 3840 → 43 px · 7680 → 85 px. Die Seite zoomt, nichts bricht um.
     Unter 1440 px bleibt rem bei 16 px, das Layout reflowt über Breakpoints (900 px, 600 px).
     Alle Maße in rem oder em. px nur für Haarlinien (1px) und Breakpoints. Logo, Nav, Bilder, Abstände: rem. */
  --root:     max(16px, calc(100vw / 90));
  --logo-h:   1.75rem;                  /* Header-Logo Desktop; 1.375rem unter 600 px */
  --nav-h:    4.5rem;                   /* Header-Höhe */
  --nav-fs:   .8125rem;                 /* Nav-Links, Versalien */
  --gutter:   clamp(1.25rem, 4vw, 4rem);/* Seitenrand */
  --col-gap:  clamp(1rem, 2vw, 2rem);   /* 12-Spalten-Raster, Labels in 1–3, Inhalt in 5–13 */
  --section:  clamp(6rem, 14vw, 14rem); /* Abstand zwischen Sektionen */
  --block:    clamp(3rem, 6vw, 6rem);   /* Abstand zwischen Blöcken */
  --measure:  34em;                     /* Fließtext-Breite */

  /* ---------- Form ---------- */
  --radius: 2px;      /* Buttons. Sonst nichts ist gerundet */
  --line: rgba(141,165,187,.28);   /* Haarlinien auf Dark; auf Hell rgba(11,30,45,.18) */
  /* Keine Schatten. Keine Rahmen um Inhalte. Keine Verläufe. Keine Icons. */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: .15s;  --dur-base: .6s;  --dur-counter: 1.2s;
}


html { font-size: var(--root); }
@media (max-width: 600px) { :root { --logo-h: 1.375rem; --nav-fs: .75rem; } }

/* Helle Kontrastsektion */
[data-theme="light"] {
  --bg:            #FFFFFF;
  --bg-2:          #F2F2F2;
  --text:          var(--gp-nacht);
  --text-muted:    var(--gp-schieferblau);
  --heading:       var(--gp-nacht);
  --link:          var(--gp-tiefe);
  --link-hover:    var(--gp-nacht);
  --btn-primary-bg:   var(--gp-nacht);
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover-bg:   var(--gp-tiefe);
  --btn-primary-hover-text: #FFFFFF;
  --accent:        var(--gp-tiefteal);
  --accent-number: var(--gp-tieflime);
  --accent-brand:  var(--gp-tiefmagenta);
  --border:        rgba(11,30,45,.18);
  --focus:         var(--gp-tiefe);
}

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