/* =========================================================
   PNFLOW VARIABLEN
   Zentrale Design-Tokens. Einzige Quelle für Farben,
   Abstände, Typo-Größen, Radien und Layout-Maße.

   Regel: Wenn ein Wert hier existiert, wird er in keiner
   anderen Datei hart geschrieben.
========================================================= */


/* =========================================================
   1 · MARKENFARBEN
   Flächen, Striche, Icons, dekorative Elemente.
   Für Text gilt Abschnitt 3.
========================================================= */

:root {
  --primary: #022842;              /* Dunkelblau, Headlines und dunkle Flächen */
  --secondary: #3c9497;            /* Petrol */
  --accent: #d89e48;               /* Sonnengelb: Striche, Linien, Ränder – trägt keine Schrift */
  --accent-deep: #c38529;          /* Goldfläche mit weißer Schrift ab 19px/700 */
  --accent-dark: #8f6220;          /* Goldfläche mit heller Schrift jeder Größe, und goldener Text */
  --text: #0d0a04;                 /* Fließtext */

  --secondary-blue: #225D86;       /* Links ehemals #225e87*/
  --deep-blue: #114467;            /* Hover-Zustände */

  --secondary-green: #638675;
  --soft-green: #a8b08a;           /* nur dekorativ, für Text zu hell */
  --soft-gold: #f6dca0;            /* nur auf dunklen Flächen */

  --cream: #fefdfa;
  --white: #ffffff;
  --muted-text: #5f6870;
  --border: #d8dfe2;
  --error: #a7463e;

  --pnflow-page-bg: #fefdfa;       /* globaler Seitenhintergrund */
  --header-max-width: 1440px;
}


/* =========================================================
   2 · RGB-PENDANTS
   Für rgba(). Immer paarweise mit Abschnitt 1 pflegen.
========================================================= */

:root {
  --primary-rgb: 2, 40, 66;
  --secondary-rgb: 60, 148, 151;
  --accent-rgb: 216, 158, 72;
  --accent-deep-rgb: 195, 133, 41;
  --accent-dark-rgb: 143, 98, 32;
  --text-rgb: 13, 10, 4;

  --secondary-blue-rgb: 34, 94, 135;
  --deep-blue-rgb: 17, 68, 103;

  --secondary-green-rgb: 99, 134, 117;
  --soft-green-rgb: 168, 176, 138;
  --soft-gold-rgb: 246, 220, 160;

  --cream-rgb: 254, 253, 250;
  --white-rgb: 255, 255, 255;
  --muted-text-rgb: 95, 104, 112;
  --border-rgb: 216, 223, 226;
  --black-rgb: 0, 0, 0;

  --accent-text-rgb: 143, 98, 32;
  --secondary-text-rgb: 49, 120, 123;
  --green-text-rgb: 86, 116, 102;
}


/* =========================================================
   3 · TEXTFARBEN MIT GEPRÜFTEM KONTRAST
   Diese Werte sind gegen ALLE hellen Sektionshintergründe
   auf mindestens 4.5:1 geprüft (WCAG AA, Fließtext).

   --accent      auf hell = 2.32:1  -> NICHT für Text
   --accent-deep auf hell = 3.08:1  -> nur Fläche, nicht für Text
   --accent-text auf hell = 5.25:1  -> für Text
========================================================= */

:root {
  --accent-text: var(--accent-dark);  /* goldener Text auf hell, 5.25:1 */
  --secondary-text: #31787b;       /* gedunkeltes Petrol, 5.03:1 auf hell */
  --green-text: #567466;           /* gedunkeltes Grün, 5.05:1 auf hell */

  --text-body: rgba(var(--primary-rgb), 0.72);   /* 6.13:1, gedämpfter Fließtext */
  --text-on-dark: var(--cream);                  /* 14.91:1 auf --primary */
  --text-on-dark-muted: rgba(var(--cream-rgb), 0.70);  /* 7.91:1 auf --primary */
}


/* =========================================================
   4 · ALPHA-STUFEN
========================================================= */

:root {
  --alpha-soft: 0.08;
  --alpha-medium: 0.24;
  --alpha-strong: 0.72;
  --alpha-solid: 0.9;
}


/* =========================================================
   5 · SEKTIONS-HINTERGRÜNDE
========================================================= */

:root {
  --bg-section-soft: #f4f0ef;
  --bg-section-gold: #f7f0df;
  --bg-section-green: #eaf3f1;
  --bg-section-green-soft: #edf5f4;
  --bg-section-green-strong: #2f7d78;   /* dunkel: Text nur in --cream oder --white */
  --bg-event-card: #eef6f5;
}


/* =========================================================
   6 · CLAIM-FARBEN
========================================================= */

:root {
  --claim-atmen: var(--primary);
  --claim-bewegen: var(--secondary);
  --claim-entfalten: var(--accent);
  --claim-erleben: var(--cream);

  /* Textvarianten der Claim-Farben.
     Die Markenfarben oben sind für Flächen gedacht. Als Text
     erreichen --claim-entfalten (2.3:1) und --claim-erleben auf
     Gold (2.3:1) den geforderten Kontrast nicht. */

  --claim-atmen-text: var(--primary);          /* 14.9:1 auf hell */
  --claim-bewegen-text: var(--secondary-text); /*  5.0:1 auf hell */
  --claim-entfalten-text: var(--accent-text);  /* 5.25:1 auf hell */
  --claim-erleben-text: var(--cream);          /*  3.1:1 auf --accent-deep, ab 24px */
}


/* =========================================================
   7 · TYPOGRAFIE
   Schriftgrößen als Tokens, damit Sektionen keine
   eigenen clamp()-Werte mehr definieren.
========================================================= */

:root {
  --font-primary: "Montserrat", sans-serif;      /* Headlines, Kicker, Buttons */
  --font-secondary: "Source Sans 3", sans-serif; /* Fließtext */

  --fs-hero: clamp(50px, 4.5vw, 76px);
  --fs-h1: clamp(50px, 4.5vw, 76px);
  --fs-h2: clamp(42px, 3.6vw, 64px);
  --fs-h2-sm: clamp(30px, 2.4vw, 44px);   /* Zwischengröße H2/H3 */
  --fs-body-sm: clamp(16px, 1.1vw, 18px); /* Hinweise, Bildunterschriften */
  --fs-h3: clamp(24px, 1.8vw, 32px);
  --fs-h4: clamp(20px, 1.4vw, 26px);
  --fs-h5: 18px;
  --fs-h6: 15px;
  --fs-lead: clamp(22px, 1.4vw, 26px);
  --fs-body: clamp(18px, 1.25vw, 22px);
  --fs-small: 14px;

  --lh-tight: 1.06;
  --lh-heading: 1.15;
  --lh-body: 1.6;

  --ls-h1: -0.04em;
  --ls-h2: -0.035em;
  --ls-h3: -0.02em;
}


/* =========================================================
   8 · KOMPONENTEN-TOKENS · KICKER / EYEBROW
   Der Einrückungswert wird berechnet, nicht geraten:
   Strichbreite + Abstand. Ändert man den Strich, wandert
   der Text automatisch mit.
========================================================= */

:root {
  --kicker-color: var(--primary);      /* Schrift auf hellen Flächen */
  --kicker-color-dark: var(--accent);      /* Schrift auf --primary */
  --kicker-color-green: var(--cream);      /* Schrift auf --bg-section-green-strong */
  --kicker-line-color: var(--accent);      /* Strich, bleibt bewusst sonnengelb */
  --kicker-size: 15px;                     /* Standard */
  --kicker-size-sm: 13px;                  /* Modifier --sm */
  --kicker-weight: 600;
  --kicker-tracking: 0.16em;
  --kicker-line-w: 28px;
  --kicker-line-h: 2px;
  --kicker-gap: 16px;
}


/* =========================================================
   9 · ABSTÄNDE
========================================================= */

:root {
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 140px;

  --section-py-sm: clamp(64px, 7vw, 96px);
  --section-py: clamp(88px, 9vw, 140px);
  --section-py-lg: clamp(110px, 11vw, 170px);
}


/* =========================================================
   10 · LAYOUT
   --gutter ist der Seitenabstand PRO SEITE.
   Er wird weiter unten responsiv überschrieben, dadurch
   brauchen die Container-Klassen keine eigenen Media Queries.
========================================================= */

:root {
  --container-sm: 800px;
  --container-md: 1000px;
  --container-lg: 1200px;
  --container-xl: 1440px;
  --container-xxl: 1800px;

  --gutter: 32px;
  --gutter-xl: 40px;
}


/* =========================================================
   11 · RADIEN
========================================================= */

:root {
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --radius-circle: 50%;
}


/* =========================================================
   12 · SCHATTEN
========================================================= */

:root {
  --shadow-soft: 0 12px 32px rgba(var(--primary-rgb), 0.06);
  --shadow-medium: 0 18px 48px rgba(var(--primary-rgb), 0.10);
  --shadow-strong: 0 24px 60px rgba(var(--primary-rgb), 0.14);
}


/* =========================================================
   13 · ÜBERGÄNGE
========================================================= */

:root {
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.18s var(--ease);
  --transition-base: 0.25s var(--ease);
  --transition-slow: 0.40s var(--ease);
}


/* =========================================================
   14 · Z-INDEX-SKALA
   Verhindert willkürliche z-index-Werte in den Sektionen.
========================================================= */

:root {
  --z-below: -1;
  --z-base: 0;
  --z-raised: 1;
  --z-content: 2;
  --z-overlay: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-modal: 1000;
}


/* =========================================================
   15 · RESPONSIVE TOKEN-ANPASSUNG
   Nur Werte, keine Regeln. Alles was --gutter benutzt,
   passt sich dadurch automatisch an.
========================================================= */

@media (max-width: 1024px) {
  :root { --gutter: 24px; --gutter-xl: 24px; }
}

@media (max-width: 767px) {
  :root { --gutter: 16px; --gutter-xl: 16px; --kicker-size: 13px; --kicker-size-sm: 12px; --kicker-line-w: 24px; --kicker-gap: 14px;
    --section-py-sm: 56px; --section-py: 72px; --section-py-lg: 88px; }
}