/*
 * Design-Tokens – gemeinsame Grundlage für Portfolio und Integrity Architecture.
 *
 * Herkunft jedes Werts:
 *   [ÜBERNOMMEN] – Wert von Frauke Brinkmann (Farbliste vom 24.10.2026, Schriftangaben)
 *                  oder aus der bisherigen WordPress-Website (Export vom 24.10.2026)
 *   [ZUORDNUNG]  – Wert übernommen, aber Name/Rolle von Claude vergeben – zur Freigabe
 *   [VORSCHLAG]  – von Claude ergänzt, nicht aus den Originalen
 */

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Special Gothic Condensed One";
  src: url("../fonts/special-gothic-condensed-one-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Markenpalette: Vollton + heller Ton [ÜBERNOMMEN], Namen [ZUORDNUNG] ── */
  --color-orchid: #d665c7;        --color-orchid-soft: #ecdbe9;
  --color-rosewood: #c57272;      --color-rosewood-soft: #dddddd;
  --color-gold: #fed145;          --color-gold-soft: #efecd8;
  --color-sage: #6db895;          --color-sage-soft: #e5efd8;
  --color-plum: #713d87;          --color-plum-soft: #dbdbea;
  --color-ocean: #007eb7;         --color-ocean-soft: #dbe3ea;
  --color-tuerkis: #4cadc4;       --color-tuerkis-soft: #d2e8e5;
  --color-amber: #f79624;         --color-amber-soft: #e8ded1;
  --color-rosa: #f05a88;          --color-rosa-soft: #f6ebe8;

  /* ── Neutrale Töne [ÜBERNOMMEN] ── */
  --color-white: #ffffff;
  --color-ink: #1f1421;           /* Typo */
  --color-paper: #f9f7f6;         /* Seitengrund, wie in den Diagrammen [ZUORDNUNG] */
  --color-mint: #d2e8e5;
  --color-grey: #e6e6e6;
  --color-ivory: #f8f8f5;
  --color-fog: #efefef;           /* helles Neutralgrau, Hintergrund Portfolio-Menü und Abschnitte [FESTLEGUNG Frauke Brinkmann 31.10.2026] */
  --color-cream: #fffbc6;         /* Gelb für hervorgehobene Textbänder [FESTLEGUNG 25.10., kräftiger 26.10.2026] */
  --color-overlay: #1a1a1a;       /* Menü-Overlay [ÜBERNOMMEN aus Screenshot der bisherigen Website] */
  --color-taupe: #5f5454;         /* dunkle Buttons [ÜBERNOMMEN aus WordPress] */

  /* ── Rollen [ZUORDNUNG] – pro Website überschreibbar ── */
  --color-surface: var(--color-paper);
  --color-surface-raised: var(--color-white);
  --color-surface-alt: var(--color-ivory);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink);   /* alle Texte in #1F1421 [FESTLEGUNG 24.10.2026] */
  --color-line: var(--color-grey);
  --color-accent: var(--color-rosa);
  --color-accent-2: var(--color-tuerkis);
  --color-button-dark: #5a4540;  /* Seitenende-Buttons, schokoladiger und dunkler als WordPress (#706868) [FESTLEGUNG 31.10.2026] */
  --color-button-hover: #ede0de;  /* helle Buttons bei Hover [FESTLEGUNG 24.10.2026] */
  --color-menu-text: var(--color-ink); /* Menü invertiert: Textfarbe auf hellem Grund [FESTLEGUNG 31.10.2026] */
  --menu-opacity: 96%;            /* Menü-Overlay: dunkler, Hintergrund nur noch zu ahnen [FESTLEGUNG 24.10.2026] */

  /* Flächen für Bänder (volle Breite) [ZUORDNUNG nach bisheriger Website] */
  --band-white: var(--color-white);
  --band-paper: var(--color-paper);
  --band-ivory: var(--color-ivory);
  --band-grey: var(--color-grey);
  --band-fog: var(--color-fog);
  --band-silver: var(--color-rosewood-soft); /* #DDDDDD – Display-Blöcke in WordPress [ÜBERNOMMEN, vermessen] */
  --band-mint: var(--color-mint);
  --band-blush: var(--color-rosa-soft);
  --band-cream: var(--color-cream);
  --band-diagram: #f9f7f6;        /* Grund der Diagramm-SVGs [ÜBERNOMMEN, aus den SVGs] */
  --band-diagram-ivory: #f9f7f6;  /* Economics-SVG hat denselben Grund */

  /* ── Schriften [ÜBERNOMMEN] ── */
  --font-display: "Special Gothic Condensed One", "Arial Narrow", sans-serif; /* nur Versalien */
  --font-body: "Public Sans", system-ui, sans-serif;
  --font-serif: "Spectral", Georgia, serif;   /* Zitate und Erläuterungen [ÜBERNOMMEN aus WordPress] */

  /* ── Typo-Skala, fließend zwischen Mobil und Desktop [VORSCHLAG] ── */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --text-2xl: clamp(2.25rem, 1.6rem + 3vw, 4rem);

  /* ════ Typografie-Vorlagen [ÜBERNOMMEN aus WordPress, vermessen an Frauke Brinkmanns Screenshots] ════
     Referenz: MacBook, Safari, 1728 px Fensterbreite. Die Werte rechts sind die Desktop-Größen,
     kleinere Bildschirme rechnen fließend herunter. Gewicht Public Sans überall 300 (Light). */
  --weight-light: 250;   /* Fließtext: in WordPress ~150 (gemessen), für Lesbarkeit etwas kräftiger [VORSCHLAG] */
  --weight-title: 150;   /* Titel, zentrale Aussage, Statement: sehr fein wie in WordPress [ÜBERNOMMEN, gemessen] */
  --text-h6: clamp(1.5rem, 0.9rem + 1.65vw, 2.375rem);      /* 38 px – Abschnittstitel und Hero-Titel, Versalien */
  --tracking-h6: 0.065em;
  --leading-title: 1.32;
  --text-h5: clamp(1.375rem, 0.85rem + 1.45vw, 2.125rem);   /* 34 px – zentrale Aussage in Versalien */
  --tracking-h5: 0.02em;
  --text-statement: clamp(1.25rem, 1rem + 0.9vw, 1.625rem); /* 26 px – Statement, normale Schreibweise, gesperrt */
  --tracking-statement: 0.068em;
  --leading-statement: 1.42;
  --text-body1: clamp(1.125rem, 1rem + 0.3vw, 1.25rem);     /* 20 px – Unterzeile und Aufzählungen */
  --text-body2: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);     /* 18 px – Fließtext */
  --leading-body: 1.8;
  --text-quote: clamp(1.4rem, 1rem + 1.25vw, 2.0625rem);    /* 33 px – Zitat, Spectral [FESTLEGUNG 24.10.2026: 32–34 px] */
  --leading-quote: 1.36;
  --text-display: clamp(2rem, 1.2rem + 2vw, 2.875rem);      /* 46 px – Display-Titel, Special Gothic */
  --tracking-display: 0.09em;
  --text-display-sub: clamp(1.125rem, 1rem + 0.3vw, 1.25rem); /* 20 px – Display-Text, Spectral */
  --leading-display-sub: 1.6;
  --text-banner: clamp(2.25rem, 1.2rem + 2.6vw, 3.5625rem); /* 57 px – Bildbanner, Special Gothic */
  --tracking-banner: 0.08em;
  --text-button: clamp(1rem, 0.9rem + 0.3vw, 1.1875rem);    /* 19 px – Buttons, Versalien */
  --tracking-button: 0.065em;
  --leading: var(--leading-body);
  --font-quote: var(--font-serif);
  --font-display-title: var(--font-display);
  --font-display-text: var(--font-serif);

  /* ════ Abstände und Höhen der Abschnitte [ÜBERNOMMEN aus WordPress] ════ */
  --gap-heading: clamp(0.625rem, 0.4rem + 0.5vw, 1rem);    /* sichtbar 35 px – Titel → Unterzeile (Rest ist Zeilenabstand) */
  --gap-title: clamp(1.25rem, 0.6rem + 1.45vw, 2.25rem);     /* Titel → Text: 1,5-facher sichtbarer Abstand (ca. 58 px) [FESTLEGUNG 24.10.2026] */
  --gap-block: clamp(2.5rem, 0.5rem + 7vw, 7.95rem);       /* sichtbar 137 px – jeder weitere Schritt im Textblock */
  --gap-display: clamp(1rem, 0.7rem + 0.8vw, 1.8rem);      /* sichtbar 43 px – Display-Titel → Display-Text */
  --band-pad: clamp(3.5rem, 2rem + 4.5vw, 6rem);           /* 96 px – oben und unten in jedem Abschnitt */
  --band-min: clamp(16rem, 23vw, 25rem);                   /* 400 px – Mindesthöhe, Inhalt mittig */
  --band-min-action: clamp(20rem, 29vw, 31.25rem);         /* 500 px – Abschnitte mit Button unten rechts */
  --col-start: 10%;                                        /* Textblöcke beginnen bei 10 % der Breite … */
  --col-width: 56%;                                        /* … und sind 56 % breit (WordPress 50 %, breiter auf Wunsch 24.10.2026) */
  --col-center: 50vw;                                       /* mittige Textspalte, Display-Text: 50 % */
  --col-statement: 56vw;                                    /* Statement: etwas breiter [FESTLEGUNG 24.10.2026] */
  --col-wide: 58vw;
  --col-quote: 58vw;                                        /* Zitat, Display-Titel und zentrale Aussage: 58 % mittig */
  --tracking-caps: 0.14em;

  /* ── Abstände, Layout, Form [VORSCHLAG] ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: clamp(4rem, 3rem + 5vw, 7.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);   /* Seitenrand, auf allen Bildschirmen für alle Abschnitte gleich */
  --content-width: 76rem;
  --text-width: 56rem;   /* breiter, weil alles in Basisgröße steht */
  --header-height: 4.5rem;
  --radius: 4px;
  --shadow-card: 0 1px 2px rgb(31 20 33 / 0.06), 0 6px 18px rgb(31 20 33 / 0.05); /* wie Karten in den Diagrammen */
}