/* ==========================================================================
   DESIGN TOKENS
   Alle Werte sind Schätzungen auf Basis der Screenshots und bewusst als
   CSS Custom Properties angelegt, damit du sie an einer Stelle final
   anpassen kannst (z.B. sobald Farbwerte/Fonts final feststehen).

   WICHTIG (CSS-Limitation): Custom Properties können in @media-Queries
   nicht direkt referenziert werden. Die Breakpoint-Werte sind daher unten
   zusätzlich als Kommentar an jeder @media-Stelle dokumentiert. Wenn du
   einen Breakpoint hier änderst, bitte auch im jeweiligen CSS-File suchen
   (Kommentar "// bp:") und den Wert dort synchron anpassen.
   ========================================================================== */

/* Pixel-Schriften für alle Elemente, die --font-pixel-serif/-grotesk
   referenzieren (s. unten in TYPOGRAFIE): --font-pixel-serif (Editorial-
   Inhalte, s. .text-Utility in components.css) zeigt aktuell primär auf PP
   Mondwest Regular (nur Schnitt 400, s. @font-face unten); --font-pixel-
   grotesk (Headings/Buttons/Tags) primär auf PP Neue Bit Bold (nur Schnitt
   700). Handjet ist in beiden Fallback-Ketten das gemeinsame letzte Glied
   vor den Systemfonts: die statischen Einzelschnitte oben decken jeweils
   nur ein Gewicht ab, alle anderen angefragten Gewichte fallen daher auf
   Handjets variable Datei (100–900) zurück statt direkt auf Systemfonts.
   Handjet selbst ist eine variable Datei (Achse wght 100–900, Original von
   Google Fonts, s. assets/fonts/Handjet/) statt einzelner statischer
   Schnitte – zwingend, weil sonst bei angefragten Gewichten ohne passende
   statische Datei der Browser SYNTHETISCH fett rechnet (Faux Bold: die
   Glyphen werden künstlich verbreitert/verschmiert), was bei einer
   Pixel-Schrift sichtbar das Raster und die Laufweite zerstört. Als woff2
   komprimiert (48 KB für alle Schnitte statt 2 × 212 KB TTF für nur zwei);
   die unkomprimierten Originaldateien bleiben im fonts-Ordner liegen,
   werden aber nicht mehr ausgeliefert. ELGR/ELSH (Element-Raster/-Form)
   bleiben bewusst auf ihren Defaults — das ist exakt die Darstellung, die
   Google Fonts zeigt. */
@font-face {
  font-family: "PPNeueBit-Bold";
  src: url("../fonts/PPNeueBit-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPMondwest-Regular";
  src: url("../fonts/PPMondwest-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Drei PP-Neue-York-Schnitte, gegeneinander austauschbar (Normal Medium,
   Narrow Medium = schmaler, Normal Extrabold = fetter). Welcher davon läuft,
   entscheidet allein --font-intro-heading (s. u.). Beim Umstellen den Namen
   dort ändern UND die Preload-Zeile in html-start.php auf dieselbe Datei
   ziehen – sonst lädt der Browser die falsche Datei vor und die Überschriften
   blitzen beim Seitenaufbau kurz in der Fallback-Schrift auf. Das je Schnitt
   deklarierte font-weight sagt nur, WAS in der Datei steht – die Elemente
   fragen weiterhin 400 an und bekommen den jeweils einzigen vorhandenen
   Schnitt der Familie, ohne synthetisches Fett. */
@font-face {
  font-family: "PPNeueYork-NormalMedium";
  src: url("../fonts/PPNeueYork-NormalMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPNeueYork-NarrowMedium";
  src: url("../fonts/PPNeueYork-NarrowMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PPNeueYork-NormalExtrabold";
  src: url("../fonts/PPNeueYork-NormalExtrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Handjet";
  /* format("woff2") und NICHT das alte "woff2-variations": letzteres kennen
     nur sehr alte Safari-Versionen, heutige Browser würden die Quelle
     überspringen und auf den Fallback-Font zurückfallen. */
  src: url("../fonts/Handjet/Handjet-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Serif-Font (EB Garamond) — --font-garamond (s. u.) aktuell von keinem
   Element referenziert (.services__heading/.project-fan__lead laufen über
   --font-pixel-serif, s. .intro-heading in components.css); Font-Face
   bleibt als Reserve für künftige Serifen-Verwendung UND als Fallback-Glied
   in --font-text/--font-intro-heading stehen, falls der jeweilige
   PP-Neue-York-Schnitt mal nicht lädt.
   Zwei variable Dateien (Achse wght 400–800, normal + italic) statt zehn
   einzelner Schnitte – gleiches Prinzip wie bei Handjet oben: eine Datei
   deckt alle angefragten Gewichte ab, ohne dass der Browser bei fehlendem
   statischem Schnitt synthetisch fett/kursiv rechnet. */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-VariableFont_wght.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------------------
     FARBEN
     Aus den Screenshots abgeleitet (Grayscale/Off-White Palette).
     TODO: finale Hex-Werte im Kirby Panel > Design-Tab pflegen, sobald
     Sebastian die echten Werte definiert hat.
     --------------------------------------------------------------------- */
  --color-background: #f3f2ee;
  --color-background-highlight: #ecebe6;
  --color-background-contrast: #d2d2d2;
  /* Reines Weiß im Design ist überall dieser eine Ton (nie #fff) —
     s. .site-header__logo-text (header.css), .color-swap__label-Hover
     (components.css), .testimonial__quote (testimonials.css). */
  --color-white: #f8f4f7;
  /* Gegenstück zu --color-white oben: EINE zentrale Stelle für den
     schwarzen/dunklen Grundton der Seite (nie direkt #000 in den Regeln
     unten, s. --color-badge-font/--color-font-dark/
     --color-nav-button-active-background/--color-heading-badge-background/
     --color-badge-background-dark/--color-section-dark-background, die alle
     darauf verweisen statt den Hex-Wert zu duplizieren). Zum Testen einer
     anderen Grundfarbe (z.B. Blau) reicht es, NUR diesen einen Wert zu
     ändern – alle abgeleiteten Stellen ziehen automatisch mit. */
  --color-black: #161616;
  /* "Badge" statt "Tag": Name deckt den tatsächlichen Einsatzbereich ab —
     neben .services__row-cta-list a und dem Footer-Bildhintergrund
     (s. jeweilige Datei) teilen sich diese eine Farbe. */
  --color-badge-background: #e1e0e6;
  --color-badge-font: var(--color-black);
  /* Etwas aufgehellt (85% --color-black / 15% Weiß) statt dem reinen
     Grundton – softeres Dunkel für Badges auf bereits dunklem Untergrund
     (.tag--dark, Project-Fan-Badges, s. component-/project-fan.css). */
  --color-badge-background-dark: color-mix(in srgb, var(--color-black) 85%, white);
  --color-badge-font-dark: #f8f7f4;
  --color-font-bright: #f8f7f4;
  --color-font-dark: var(--color-black);
  --color-button-background: #e6e5e0;
  /* Header-eigene Farben, unabhängig von den generischen Werten oben
     (siehe .site-header .btn in header.css) – im Panel unter Design >
     Header separat einstellbar (s. html-start.php). */
  --color-nav-button-background: var(--color-white);
  --color-nav-button-active-background: var(--color-black);
  --color-border: #d8d7d1;
  /* Schwarzes Badge (95% Deckkraft statt voll deckend) — geteilt von
     .section-heading, .tag, .placeholder-box (components.css) sowie
     .services__row-title-text und .services__row-number (services.css).
     color-mix() statt rgba(): gleiche Opacity-Technik wie
     --nav-btn-bg-opacity in header.css. */
  --color-heading-badge-background: color-mix(in srgb, var(--color-black) 10%, transparent);
  /* Section-Hintergrund des Project-Sliders (.project-fan, s.
     project-fan.css) — folgt jetzt ebenfalls --color-black, damit ein
     Farbtest (s. Kommentar dort) auch diese Fläche mitzieht statt einem
     festen #000 hinterherzuhängen. */
  --color-section-dark-background: var(--color-black);

  /* ---------------------------------------------------------------------
     GLAS-EFFEKT (backdrop-filter + Schatten)
     EINE Quelle für alle Glas-Oberflächen: Header-Nav-Buttons (header.css,
     via --nav-btn-*-Aliase), Hero-Pillen (.hero__email/.hero__elevator-item,
     hero.css) und dunkle Section-Heading-Badges (.section-heading--dark,
     components.css). Die Mix-FARBE bleibt bewusst pro Verwendung lokal
     (Weiß/Grau/Dunkelgrau unterscheiden sich je Untergrund), nur Blur,
     Sättigung und Schatten sind geteilt. Dark-Theme-Schatten s. Block am
     Dateiende.
     --------------------------------------------------------------------- */
  --glass-blur: 26px;
  --glass-saturate: 400%;
  --glass-shadow: 0 9px 20px rgba(0, 0, 0, 0.05);

  /* ---------------------------------------------------------------------
     TYPOGRAFIE
     Pixel-Font (PP Neue Bit Bold) via @font-face oben eingebunden. Restliche
     Font-Dateien fügst du später selbst hinzu, bis dahin greifen die
     Systemfont-Fallbacks.
     --------------------------------------------------------------------- */
  --font-logo: "Space Mono", "Courier New", monospace;
  /* ZWEI Stellen für die Pixel-Schrift statt einer: --font-pixel-serif für
     Fließtext/Editorial-Inhalte (s. .text-Utility, components.css) und
     --font-pixel-grotesk für UI-Chrome (Headings, Buttons, Tags, s. dortige
     Regeln). Ein künftiger Font-Wechsel innerhalb einer Kategorie
     (wie zuvor Pixer↔Handjet↔PP Neue Bit↔PP Mondwest) braucht dadurch nur
     noch die jeweils eine Zeile hier. */
  --font-pixel-serif: "PPMondwest-Regular", "PPNeueBit-Bold", "Handjet", "Rubik Black", "Rubik", system-ui, sans-serif;
  /* PP Neue Bit Bold nur Schnitt 700 (s. @font-face oben) – andere Gewichte
     fallen auf Handjet (100–900) zurück statt direkt auf die Systemfonts. */
  --font-pixel-grotesk: "PPNeueBit-Bold", "Handjet", "Rubik Black", "Rubik", system-ui, sans-serif;
  /* Fließtext-Font: alles, was .text trägt (components.css) sowie jedes <p>
     (base.css). Überschriften/UI-Chrome überschreiben das bewusst mit
     --font-pixel-grotesk. Gleiche Font-Datei wie --font-pixel-serif oben
     (PPMondwest-Regular, Schnitt 400 – trifft --fw-regular exakt, kein
     Gewichts-Mismatch), aber eigene, längere Fallback-Kette (EB Garamond
     statt Handjet/Rubik Black): Fließtext braucht einen lesbaren
     Fallback, keinen Pixel-/Display-Font. */
  --font-text: "PPMondwest-Regular", "EB Garamond", "Times New Roman", serif;
  /* Gegenstück zu --fs-intro-heading (s. u.): Schrift der großen
     Zwischenüberschriften (.intro-heading, components.css). Nur Schnitt 500
     (s. @font-face oben) – die Elemente fragen 400 an und bekommen trotzdem
     diesen einen vorhandenen Schnitt, ohne synthetisches Fett. */
  --font-intro-heading: "PPNeueYork-NormalExtrabold", "EB Garamond", "Times New Roman", serif;
  --font-heading-alt: "Rubik Light Italic", "Rubik", system-ui, sans-serif;
  --font-body: "Rubik", system-ui, sans-serif;
  --font-garamond: "EB Garamond", "Times New Roman", serif;

  --fw-black: 900;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Fluid Type Scale (clamp: verhindert Overflow bei langen CMS-Texten) */
  --fs-logo: clamp(1rem, 0.92rem + 0.35vw, 1.25rem);
  --fs-nav: 1rem;
  /* Minimal kleiner als --fs-nav, nur für die Header-Nav-/Menu-Buttons
     (s. header.css) – der globale .btn bleibt bei --fs-nav unverändert. */
  --fs-nav-btn: 0.87rem;
  --fs-tag: 0.87rem;
  --fs-small: 0.85rem;
  --fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  /* Vergrößerter Fließtext (1.5x --fs-body) — aktuell nur noch von der
     Projektbeschreibung auf der Projektseite genutzt (s. project.css);
     services__intro-text/-row-text sind inzwischen auf --fs-body zurück
     (s. services.css). */
  --fs-body-lg: calc(var(--fs-body) * 1.5);
  --fs-lead: clamp(1.125rem, 1rem + 0.4vw, 1.4375rem);
  --fs-h1: clamp(2.5rem, 1.5rem + 4.5vw, 5.75rem);
  --fs-h2: clamp(1.8rem, 1.25rem + 2.25vw, 2.9rem);
  --fs-h3: clamp(1.55rem, 1.3rem + 0.9vw, 2.1rem);
  /* Geteilte Größe für .section-heading (components.css) UND
     .services__row-title-text (services.css) — beide sind inhaltlich H2/H3-
     Badge-Überschriften und sollen IMMER exakt gleich groß sein, auf jedem
     Viewport. Vorher hatte .services__row-title-text einen fixen 2.9rem-Wert
     (nur das --fs-h2-Maximum), der auf schmaleren Viewports nicht mit der
     responsiven Schrumpfung von .section-heading mitging. */
  --fs-section-heading: max(calc(var(--fs-h1) / 2.25), var(--fs-h2));
  /* Eigener Token statt direkt --fs-h1 auf .intro-heading (components.css)
     – gleicher Grund wie bei --fs-section-heading oben: --fs-h1 gilt auch
     für echte h1-Elemente, eine künftige Änderung nur der Intro-Headings
     (.services__heading/.project-fan__lead) darf die nicht mitziehen.
     0.9x --fs-h1 statt 1:1 – bleibt aber über --fs-h1 weiterhin
     responsiv/viewport-abhängig. Faktor hier anpassen, um ALLE
     Intro-Headings gemeinsam größer/kleiner zu skalieren. */
  --fs-intro-heading: calc(var(--fs-h1) * 1);
  /* Skaliert NUR die per Bold hervorgehobenen Wörter innerhalb eines
     .intro-heading (.intro-heading strong, components.css) relativ zur
     umgebenden Textgröße hoch. Nötig als optischer Ausgleich: die Pixel-
     Serif-Hervorhebung (--font-pixel-serif, nur Schnitt 400) wirkt neben
     der fetten --font-intro-heading-Grundschrift (Schnitt 800) bei
     identischer font-size deutlich leichter/kleiner – ohne diesen Ausgleich
     würde die "Hervorhebung" optisch eher zurücktreten statt auffallen.
     Faktor hier anpassen, um NUR die Hervorhebungsgröße zu verändern (ohne
     die Grundgröße über --fs-intro-heading oben mit zu beeinflussen). */
  --intro-heading-highlight-scale: 1.2;
  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.55;
  /* Zeichenabstand für Buttons/Tags/.lang-toggle/Project-Fan-Tooltip
     (s. .tracking-wide in components.css) – die Laufweite kommt sonst
     ausschließlich aus der Schriftdatei (Handjet), dieser Wert legt bewusst
     noch etwas Extra-Luft zwischen die Zeichen. */
  --ls-btn-tag: 0.06em;

  /* Optischer Vertikal-Ausgleich für --font-pixel-grotesk (aktuell primär
     PP Neue Bit Bold, s. @font-face oben) in gepolsterten Pill-/Badge-
     Elementen (.tag, .btn, .section-heading__word, .services__row-title-
     text, .project-fan-tooltip). Ursache: die Schriftdatei hat ein stark
     asymmetrisches Ascent/Descent-Verhältnis (Ascent ~79% / Descent ~21%
     der Zeilenbox laut hhea-Tabelle) — align-items:center zentriert diese
     Zeilenbox, nicht die tatsächliche Versalien-Tinte, wodurch der Text in
     einer zentrierten Box optisch zu hoch sitzt. Ein einzelner CSS-Hebel
     (line-height/align-items) kann das nicht beheben, da beide die
     Zeilenbox immer symmetrisch behandeln. Der Fix verschiebt daher NICHT
     den Text selbst (transform würde die ganze Box inkl. Hintergrund
     mitverschieben und am eigentlichen Problem nichts ändern), sondern
     verteilt das vertikale Padding der jeweiligen Box asymmetrisch (oben
     minus, unten plus) – dadurch rückt der zentrierte Bereich innerhalb
     der GLEICH GROSSEN Gesamtbox nach unten, exakt dorthin, wo die
     Versalien optisch sitzen.
     In em statt einer festen px-Zahl, DAMIT der Ausgleich bei jeder
     Font-Size automatisch mitskaliert (die "Multiplikator"-Eigenschaft von
     em-Werten) – ein einzelner Wert reicht dadurch für --fs-tag bis
     --fs-h1. 0.05em ist aus den Font-Metriken (hhea: Ascent 2194 / Descent
     -585 / unitsPerEm 4096 bei PPNeueBit-Bold; OS/2 sCapHeight 2048)
     überschlagen – bei einem Font-Wechsel (s. --font-pixel-grotesk,
     TYPOGRAFIE unten) hier neu abgleichen, da der Wert direkt von den
     Metriken der jeweils aktiven Schriftdatei abhängt. */
  --font-pixel-grotesk-nudge: -0.1em;

  /* ---------------------------------------------------------------------
     SPACING-SKALA (geschätzt, frei anpassbar)
     --------------------------------------------------------------------- */
  --space-3xs: 0.35rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Abstand zwischen einzelnen .tag-Elementen (components.css) – lose
     gekoppelt statt an --space-2xs verankert (s. --ls-btn-tag oben zum
     selben Muster), damit alle .tag-Gruppen (Startseite/Projektseite,
     .hero__connect, .hero__elevator) über EINEN Wert synchron bleiben,
     ohne die generische Spacing-Skala anzufassen (--space-2xs wird auch
     für tag-fremde Abstände wie .site-header__nav-list genutzt). */
  --tag-gap: var(--space-3xs);

  /* KONVENTION (übernommen aus index.css, dort nur fürs Alt-System
     definiert und auf der Startseite NIE geladen — jetzt hier als echte,
     überall verfügbare Quelle): --section-gap ist der Abstand ZWISCHEN
     Sections/Boxen; Abstände zwischen Objekten INNERHALB einer Section
     (z.B. Intro → Slider, s. .project-fan in project-fan.css) nutzen
     --section-inner-gap (= 20% kleiner). */
  --section-gap: clamp(3rem, 9vh, 6rem);
  --section-inner-gap: calc(var(--section-gap) * 0.8);

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --container-max: 110rem;
  --container-padding: clamp(1.25rem, 1rem + 2vw, 3rem);

  /* Fallback, wird von nav.js zur Laufzeit mit der echten Header-Höhe
     überschrieben (padding-block + Inhalt), damit Anchor-Scroll und
     Section-Abstand immer exakt zur Header-Höhe passen. */
  --header-height: 5.5rem;

  /* Rein rechnerisch aus der Button-Box hergeleitet (s. header.css):
     line-height:1 * font-size (Inhalt) + 2 * Padding-Block, beides bezogen
     auf --fs-nav-btn. Ergibt exakt die reale Höhe der Header-Nav-Buttons,
     ganz ohne JS-Messung – Voraussetzung ist, dass diese Buttons dasselbe
     Padding-Block/line-height:1 gesetzt haben (s. --nav-btn-padding-block
     in header.css, dort von .site-header__nav-list .btn UND
     .site-header__menu-toggle geteilt). 3.58 = 1 + 2 * 1.29 (aktueller
     Wert von --nav-btn-padding-block) – bei Änderung dort auch hier
     anpassen, da :root kein --fs-nav-btn als em-Bezugsgröße hat. */
  --nav-btn-height: calc(var(--fs-nav-btn) * 3.58);

  /* Logo-Textgröße relativ zu --nav-btn-height oben – EIN Wert, geteilt
     zwischen .site-header__logo (header.css) UND .section-heading__word
     (components.css), damit die Wort-Badges aller Section-Headings
     (Latest/Testimonials/Project-Fan/Footer) immer exakt so groß wie das
     Logo in der Nav-Pille laufen, statt wie zuvor über das responsive
     --fs-section-heading eigenständig zu skalieren. */
  --logo-scale: 0.65;
  --logo-font-size: calc(var(--nav-btn-height) * var(--logo-scale));

  /* ---------------------------------------------------------------------
     BREAKPOINTS (als Referenz-Variablen; siehe Hinweis oben)
     --------------------------------------------------------------------- */
  --bp-tablet: 1024px;
  --bp-mobile: 640px;

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;

  /* Radius: geteilt von Tags, Nav-/Icon-Buttons und allen nicht-full-bleed
     Medienelementen (project-card, project-hero, media-item, services-Bilder). */
  --radius-sm: 5px;
  /* Stärker abgerundet: Hover- und aria-current-Zustand von .btn, s.
     components.css. */
  --radius-md: 19px;

  /* Gemeinsames Bildformat (3:2, B:H) für .project-card__media
     (components.css) UND die aufgeklappte Breite der Project-Fan-Karten
     (--project-fan-hover-width, project-fan.css) — eine Quelle, damit beide
     immer synchron bleiben, statt den 3:2-Wert an zwei Stellen zu
     duplizieren. Als reine Zahl statt "3 / 2"-Schreibweise: so direkt in
     aspect-ratio einsetzbar (die Property akzeptiert eine einzelne <number>
     als B:H-Verhältnis) UND multiplikativ in project-fan.css' calc(). */
  --project-media-ratio: 1.5;
}

/* bp: --bp-mobile (640px) — die Ränder, die den Content seitlich begrenzen
   (.wrapper padding-inline, base.css, plus alle anderen Stellen, die
   --container-padding referenzieren, z.B. Slider-Gutter/-Track-Padding),
   sollen bei Smartphone-Breite halb so groß sein wie im Fluid-Clamp
   darüber. Eigene, direkt ausgeschriebene clamp()-Kurve statt
   calc(var(--container-padding) / 2): eine Selbstreferenz auf denselben
   Custom-Property-Namen auf demselben Selektor (:root) wäre ein zyklischer
   Verweis und würde den Wert ungültig machen (CSS-Spec: var() sieht nur die
   nach der Kaskade gewinnende Deklaration, nie die "vorherige"). */
@media (max-width: 640px) {
  :root {
    --container-padding: clamp(0.625rem, 0.5rem + 1vw, 1.5rem);
  }
}

/* Dark-Theme: kräftigerer Glas-Schatten (vorher je einmal in header.css,
   hero.css und components.css dupliziert — jetzt nur noch hier). */
:root[data-theme="dark"] {
  --glass-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
}