/* ============================================================
   GS Fitness · tokens.css
   Einzige Quelle aller Werte: Farbe, Abstand, Typografie, Layout.
   Ausserhalb dieser Datei steht kein Roh-Farbwert und kein freier
   Abstands-/Schriftgroessen-Wert (Coding-Guidelines Kap. 5).
   Reihenfolge der Stylesheets: tokens.css -> utilities.css -> components.css
   ============================================================ */

/* ---------- Lokale Webfonts (kein externer Request, DSGVO) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-500-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-600-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-700-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/outfit-400-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/outfit-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/outfit-500-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/outfit-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/outfit-600-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/outfit-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/outfit-700-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/outfit-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/outfit-800-latinext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/outfit-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{

  /* ==========================================================
     1 · FARBE — primitive Palette
     ========================================================== */
  --color-ink-900:#181818;
  --color-ink-800:#26242b;
  --color-ink-700:#3a3840;
  --color-ink-600:#4a474f;
  --color-ink-500:#6b6870;
  --color-ink-a07:rgba(38,36,43,.07);
  --color-ink-a08:rgba(38,36,43,.08);
  --color-ink-a10:rgba(38,36,43,.1);
  --color-ink-a12:rgba(38,36,43,.12);
  --color-ink-a15:rgba(38,36,43,.15);
  --color-ink-a18:rgba(38,36,43,.18);
  --color-ink-a25:rgba(38,36,43,.25);
  --color-ink-a55:rgba(38,36,43,.55);

  --color-green-900:#063F24;
  --color-green-800:#0A6B41;
  --color-green-700:#0D824F;

  --color-violet-700:#7A2F82;
  --color-violet-600:#9D3FA5;
  --color-violet-600-a10:rgba(157,63,165,.1);
  --color-violet-600-a45:rgba(157,63,165,.45);
  --color-violet-300:#E77BEA;
  --color-violet-100:#E9D8EA;

  /* Fehlerrot. Wertgleich mit --color-kurs-cardio-strength, aber eine eigene
     Primitive: die 13 Kursfarben sind eine geschlossene Skala und duerfen sich
     verschieben, ohne die Fehlerrolle mitzuziehen. */
  --color-red-700:#AE2929;

  /* Kursfarben – je Kursart ein Paar: gesaettigte Linie (dekorativ, linke Kante) und
     blasse Flaeche (Hintergrund). Gleichmaessig ueber den Farbkreis verteilt, damit die
     13 Kursarten unterscheidbar bleiben. Kontrast --color-text auf jeder Flaeche
     gerechnet: 15,16-16,92 – alle AA. Eintraege siehe CLAUDE.md Kap. 6. */
  --color-kurs-cardio-strength:#AE2929;   --color-kurs-cardio-strength-soft:#FCEBEB;
  --color-kurs-zumba:#AE6729;             --color-kurs-zumba-soft:#FCF3EB;
  --color-kurs-total-body:#8C8321;        --color-kurs-total-body-soft:#FCFAEB;
  --color-kurs-bodywork:#638C21;          --color-kurs-bodywork-soft:#F5FCEB;
  --color-kurs-core-floor:#318C21;        --color-kurs-core-floor-soft:#EEFCEB;
  --color-kurs-stability:#218C41;         --color-kurs-stability-soft:#EBFCF0;
  --color-kurs-mobility:#29AE8F;          --color-kurs-mobility-soft:#EBFCF8;
  --color-kurs-stretching:#298FAE;        --color-kurs-stretching-soft:#EBF8FC;
  --color-kurs-maennerturnen:#2951AE;     --color-kurs-maennerturnen-soft:#EBF0FC;
  --color-kurs-qigong:#3D29AE;            --color-kurs-qigong-soft:#EEEBFC;
  --color-kurs-sessel-vital:#7B29AE;      --color-kurs-sessel-vital-soft:#F5EBFC;
  --color-kurs-dance-cardio:#AE29A2;      --color-kurs-dance-cardio-soft:#FCEBFA;
  --color-kurs-fun-dance:#AE2967;         --color-kurs-fun-dance-soft:#FCEBF3;

  --color-blush-50:#FFF3FA;
  --color-blush-50-a86:rgba(255,243,250,.86);
  --color-blush-50-a95:rgba(255,243,250,.95);
  --color-cream-50:#FFF9F2;
  --color-sand-50:#fbf7f4;

  --color-white:#fff;
  --color-white-a10:rgba(255,255,255,.1);
  --color-white-a12:rgba(255,255,255,.12);
  --color-white-a18:rgba(255,255,255,.18);
  --color-white-a55:rgba(255,255,255,.55);
  --color-white-a60:rgba(255,255,255,.6);
  --color-white-a62:rgba(255,255,255,.62);
  --color-white-a78:rgba(255,255,255,.78);
  --color-white-a82:rgba(255,255,255,.82);
  --color-white-a92:rgba(255,255,255,.92);

  /* Metall-Akzente der Mitgliedschaftskarten */
  --color-bronze-700:#8C5A2B;
  --color-bronze-600:#9A6430;
  --color-bronze-400:#CD7F32;
  --color-bronze-50:#F7EEE4;
  --color-bronze-ink:#3E2E1E;
  --color-silver-700:#6B7680;
  --color-silver-600:#8E9AA3;
  --color-silver-500:#9BA5AD;
  --color-silver-200:#DDE3E8;
  --color-silver-50:#EDF0F3;
  --color-silver-ink:#1F2933;
  --color-gold-700:#A67C00;
  --color-gold-600:#B8860B;
  --color-gold-400:#E8C05A;
  --color-gold-50:#FBF4DD;
  --color-gold-ink:#3E330F;

  /* ==========================================================
     2 · FARBE — semantische Rollen (nur hierüber wird gestylt)
     Kontrastwerte gegen WCAG 2.1 AA sind in CLAUDE.md dokumentiert.
     ========================================================== */
  --color-text:var(--color-ink-900);
  --color-text-muted:var(--color-ink-700);
  --color-text-body:var(--color-ink-600);
  --color-text-subtle:var(--color-ink-500);
  --color-text-invert:var(--color-white);
  --color-text-invert-strong:var(--color-white-a92);
  --color-text-invert-muted:var(--color-white-a82);
  --color-text-invert-subtle:var(--color-white-a78);
  --color-text-invert-faint:var(--color-white-a62);

  --color-brand:var(--color-green-700);
  --color-brand-dark:var(--color-green-900);
  --color-action:var(--color-green-700);
  --color-accent:var(--color-violet-600);
  --color-accent-strong:var(--color-violet-700);
  --color-accent-soft:var(--color-violet-100);
  --color-accent-invert:var(--color-violet-300);
  --color-accent-wash:var(--color-violet-600-a10);

  --color-surface:var(--color-blush-50);
  --color-surface-alt:var(--color-white);
  --color-surface-soft:var(--color-cream-50);
  --color-surface-sand:var(--color-sand-50);
  --color-surface-dark:var(--color-ink-900);
  --color-surface-glass:var(--color-blush-50-a86);
  --color-surface-glass-strong:var(--color-blush-50-a95);
  --color-surface-invert-wash:var(--color-white-a10);
  --color-surface-invert-soft:var(--color-white-a12);

  --color-line:var(--color-ink-a08);
  --color-line-soft:var(--color-ink-a07);
  --color-line-mid:var(--color-ink-a10);
  --color-line-strong:var(--color-ink-a18);
  --color-line-dashed:var(--color-ink-a25);
  --color-scrim-modal:var(--color-ink-a55);
  --color-line-divider:var(--color-ink-a15);
  --color-line-invert:var(--color-white-a18);
  --color-line-invert-strong:var(--color-white-a60);
  --color-line-accent:var(--color-violet-600-a45);

  --color-focus:var(--color-green-700);
  --color-focus-invert:var(--color-white);
  --color-selection:var(--color-violet-100);

  /* Feldfehler in Formularen (Meldungstext und Feldrand) */
  --color-danger:var(--color-red-700);

  /* Verläufe und Schatten enthalten Farbe – deshalb ebenfalls Tokens */
  --gradient-brand:linear-gradient(90deg,var(--color-green-900),var(--color-green-700));
  --gradient-hero-dark:linear-gradient(115deg,var(--color-ink-900) 0%,var(--color-green-800) 46%,var(--color-green-700) 100%);
  --gradient-accent:linear-gradient(150deg,var(--color-violet-600),var(--color-violet-100));
  --gradient-scrim:linear-gradient(100deg,rgba(38,36,43,.5) 0%,rgba(38,36,43,.22) 40%,rgba(38,36,43,0) 72%);
  --gradient-scrim-mobile:linear-gradient(180deg,rgba(38,36,43,.35) 0%,rgba(38,36,43,0) 45%,var(--color-blush-50) 100%);
  --gradient-sheen:linear-gradient(115deg,transparent 30%,var(--color-white-a55) 50%,transparent 70%);
  /* Alpha-Maske: blendet ein Motiv nach links aus, damit der Hero-Text darauf lesbar bleibt */
  --mask-fade-inline-start:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 24%,rgba(0,0,0,.72) 56%,rgba(0,0,0,1) 80%);
  /* Laesst das Motiv nach unten in den dunklen Grund auslaufen statt hart abzuschneiden.
     Setzt bei 48 % ein – das ist die tiefste Marke, die alle Motive der sechs Hero-Bilder
     noch voll deckend laesst (kritisch: Slim-Body-Logo bis 44 %, Portraits bis 41 %). */
  --mask-fade-block-end:linear-gradient(180deg,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 48%,rgba(0,0,0,.8) 66%,rgba(0,0,0,.35) 84%,transparent 100%);
  --gradient-bronze:linear-gradient(120deg,var(--color-bronze-700),var(--color-bronze-400),var(--color-bronze-600));
  --gradient-silver:linear-gradient(120deg,var(--color-silver-600),var(--color-silver-200),var(--color-silver-500));
  --gradient-gold:linear-gradient(120deg,var(--color-gold-700),var(--color-gold-400),var(--color-gold-600));

  --shadow-card-sm:0 6px 18px rgba(38,36,43,.1);
  --shadow-card-md:0 14px 30px rgba(38,36,43,.1);
  --shadow-card-lg:0 18px 40px rgba(38,36,43,.2);
  --shadow-card-xl:0 16px 34px rgba(38,36,43,.16);
  --shadow-menu:0 18px 44px rgba(38,36,43,.16);
  --shadow-dark:0 12px 30px rgba(38,36,43,.28);
  --shadow-rating:0 14px 30px rgba(38,36,43,.14);
  --shadow-action-sm:0 6px 18px rgba(6,63,36,.28);
  --shadow-action:0 10px 28px rgba(6,63,36,.32);

  /* ==========================================================
     3 · ABSTAND — primitive Stufen (4px-Raster, rem)
     ========================================================== */
  --s-0:0;
  --s-1:.25rem;    /* 4  */
  --s-2:.5rem;     /* 8  */
  --s-3:.75rem;    /* 12 */
  --s-4:1rem;      /* 16 */
  --s-5:1.25rem;   /* 20 */
  --s-6:1.5rem;    /* 24 */
  --s-7:1.75rem;   /* 28 */
  --s-8:2rem;      /* 32 */
  --s-9:2.25rem;   /* 36 */
  --s-10:2.5rem;   /* 40 */
  --s-11:2.75rem;  /* 44 – Mindestgröße interaktiver Controls */
  --s-12:3rem;     /* 48 */
  --s-13:3.25rem;  /* 52 */
  --s-14:3.5rem;   /* 56 */
  --s-15:3.75rem;  /* 60 */
  --s-16:4rem;     /* 64 */
  --s-17:4.25rem;  /* 68 */
  --s-18:4.5rem;   /* 72 */
  --s-19:4.75rem;  /* 76 */
  --s-20:5rem;     /* 80 */
  --s-21:5.25rem;  /* 84 */
  --s-22:5.5rem;   /* 88 */
  --s-24:6rem;     /* 96 */
  --s-25:6.25rem;  /* 100 */
  --s-30:7.5rem;   /* 120 */
  --s-31:7.75rem;  /* 124 */

  /* semantische Abstands-Rollen (Dichtestufe „normal“) */
  --space-inline:var(--s-2);
  --space-tight:var(--s-3);
  --space-comp:var(--s-4);
  --space-block:var(--s-6);
  --space-group:var(--s-8);
  --space-gap:var(--s-6);
  --space-stack:var(--s-12);
  --space-gutter:var(--s-5);
  --space-section:var(--s-16);
  --space-section-tight:var(--s-12);
  --space-hero:var(--s-14);
  --space-header:var(--s-19);

  /* ==========================================================
     4 · TYPOGRAFIE — modulare Skala, Basis 16px, Faktor 1,2
     Mobiler Default; Desktop-Overrides ausschliesslich unten
     im min-width-Block dieser Datei.
     ========================================================== */
  --font-body:'Inter',system-ui,sans-serif;
  --font-display:'Outfit',sans-serif;

  --text-sm:.83333rem;       /* 13.33 */
  --text-base:1rem;          /* 16    */
  --text-md:1.2rem;          /* 19.2  */
  --text-lg:1.2rem;          /* mobil eine Stufe tiefer */
  --text-xl:1.44rem;
  --text-2xl:1.728rem;
  --text-3xl:2.0736rem;
  --text-display:2.0736rem;  /* mobil zwei Stufen tiefer */

  --leading-flat:1;
  --leading-tight:1.12;
  --leading-snug:1.4;
  --leading-normal:1.5;
  --leading-relaxed:1.6;
  --leading-loose:2;

  --tracking-tight:-.015em;
  --tracking-tighter:-.02em;
  --tracking-wide:.12em;
  --tracking-caps:.08em;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semi:600;
  --weight-bold:700;
  --weight-black:800;

  /* ==========================================================
     5 · LAYOUT
     ========================================================== */
  --measure:65ch;
  --width-page:67.5rem;    /* 1080 */
  --width-nav:77.5rem;     /* 1240 */
  --width-shell:118.75rem; /* 1900 */
  --width-narrow:51.25rem; /* 820  */
  --width-intro:42.5rem;   /* 680  */
  --width-media:40rem;     /* 640  */
  --width-hero-card:38.75rem; /* 620 */
  --width-img:37.5rem;     /* 600  */
  --width-brand:18.75rem;  /* 300  */
  --width-news-fig:20rem;  /* 320 – Flyer-Vorschau in der News-Karte */
  --height-hero:min(82vh,720px);
  --height-media:28.75rem; /* 460 */
  --height-map:22.5rem;    /* 360 – mobil */
  --height-hero-img:22rem;
  --height-hero-media:22rem;
  --size-logo:3rem;        /* 48 – mobil */
  --size-logo-footer:3.5rem;
  --size-hero-badge:min(45vw,12rem); /* 45 % der Breite, ab 427px auf 192 gedeckelt */
  --size-control:var(--s-11);
  --size-icon:var(--s-10);
  --size-blob-sm:15rem;    /* 240 */
  --size-blob-md:16.25rem; /* 260 */
  --size-blob-lg:17.5rem;  /* 280 */
  --size-blob-xl:18.75rem; /* 300 */

  --radius-xs:3px;
  --radius-sm:10px;
  --radius-md:12px;
  --radius-lg:14px;
  --radius-xl:16px;
  --radius-2xl:20px;
  --radius-3xl:26px;
  --radius-4xl:30px;
  --radius-pill:999px;
  --radius-circle:50%;
  --radius-blob-a:42% 58% 63% 37%/45% 38% 62% 55%;
  --radius-blob-b:38% 62% 58% 42%/45% 45% 55% 55%;

  --border-hair:1px;
  --border-thick:2px;
  --border-marker:3px;
  --border-accent:5px;

  --z-base:0;
  --z-raised:1;
  --z-content:2;
  --z-nav:80;
  --z-menu:90;
  --z-overlay:100;
  --z-skip:200;

  --duration-fast:.15s;
  --duration-base:.2s;
  --duration-slow:.28s;
  --duration-sheen:.7s;
  --ease-base:ease;
}

/* ---------- Dichtestufen (regionaler Override per data-density erlaubt) ---------- */
[data-density="kompakt"]{
  --space-inline:var(--s-1);
  --space-tight:var(--s-2);
  --space-comp:var(--s-3);
  --space-block:var(--s-4);
  --space-group:var(--s-6);
  --space-gap:var(--s-4);
  --space-stack:var(--s-8);
  --space-section:var(--s-12);
  --space-section-tight:var(--s-8);
}
[data-density="luftig"]{
  --space-inline:var(--s-3);
  --space-tight:var(--s-4);
  --space-comp:var(--s-6);
  --space-block:var(--s-8);
  --space-group:var(--s-12);
  --space-gap:var(--s-8);
  --space-stack:var(--s-16);
  --space-section:var(--s-20);
  --space-section-tight:var(--s-16);
}

/* ============================================================
   Desktop ab 1025px — zweiter, entworfener Zustand.
   Nur hier stehen Schriftgroessen in einer Media Query.
   ============================================================ */
@media (min-width:1025px){
  :root{
    /* Typografie: sm/base/md unveraendert, obere Stufen eine Stufe hoeher */
    --text-lg:1.44rem;         /* 23.04 */
    --text-xl:1.728rem;        /* 27.65 */
    --text-2xl:2.0736rem;      /* 33.18 */
    --text-3xl:2.48832rem;     /* 39.81 */
    --text-display:2.98598rem; /* 47.78 */

    --space-gutter:var(--s-8);
    --space-section:var(--s-24);
    --space-section-tight:var(--s-18);
    --space-hero:var(--s-22);
    --space-header:var(--s-31);

    --height-map:32.5rem;      /* 520 */
    --height-hero-img:auto;
    --size-logo:5rem;          /* 80 */
  }
  [data-density="kompakt"]{--space-section:var(--s-18);--space-section-tight:var(--s-12)}
  [data-density="luftig"]{--space-section:var(--s-30);--space-section-tight:var(--s-24)}
}