/* PL-FOTO — Token-Layer
   Einzige Quelle für Farbe, Typo, Abstand, Tiefe. Nichts in den Komponenten
   hart kodieren. Reihenfolge: reset.css → tokens.css → glass.css → …

   Herkunft: Struktur, Typo-Pairing und Spacing-Dichte (0.85) stammen aus dem
   Design-System „Industry“; Grund, Farbwelt und Glas sind bewusst überschrieben
   (siehe ABWEICHUNGEN am Dateiende).

   WICHTIG (DSGVO): Schriften werden lokal ausgeliefert. Kein @import von
   fonts.googleapis.com — auch nicht indirekt über ein fremdes Stylesheet. */

/* ---------- Schriften, lokal ---------- */
/* Dateien liegen in /fonts. Bezugsquelle und Lizenz: Barlow, SIL OFL 1.1.

   ENTSCHEIDUNG (11.08.): Barlow Condensed entfällt. Überschriften laufen in
   Barlow Bold 700 normalbreit — dieser Schnitt liegt vor. Dadurch werden
   Überschriften bei gleicher Punktgröße rund 20 % breiter; die Display-Größen
   sind deshalb entsprechend zurückgenommen (siehe TYPOGRAFIE).

   OFFEN: Barlow Medium 500 fehlt noch. Wird derzeit nirgends zwingend
   gebraucht — 400 und 700 tragen die Seite. Kursive werden nicht verwendet. */
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Nachliefern und dann aktivieren:
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
*/

:root {
  /* ================= FARBE =================
     Dunkler Grund mit Blaustich aus dem Logo-Navy (#000956), damit Grund und
     Marke denselben Farbton teilen. Kein reines Schwarz: Fotos wirken auf
     leicht getöntem Grund plastischer. */

  --c-bg:          #0B0E18;   /* Layer 0, Seitenhintergrund */
  --c-bg-2:        #11151F;   /* Verlaufsende, Sektionswechsel */
  --c-surface:     #171C29;   /* Layer 1, opake Inhaltsflächen */
  --c-surface-2:   #1F2536;   /* Layer 1 erhöht, Tabellenzeilen, Inputs */

  --c-text:        #ECEEF2;   /* 16.4:1 auf --c-bg */
  --c-text-muted:  #9AA3B2;   /*  7.1:1 auf --c-bg — Fließtext noch AA */
  --c-text-faint:  #6B7385;   /*  3.6:1 — NUR Deko, nie Text unter 24px */

  /* Marke. Werte aus der Logodatei ausgelesen, nicht geschätzt. */
  --c-brand-yellow: #D5EA04;
  --c-brand-navy:   #000956;
  --c-brand-navy-2: #081D7B;  /* helleres Ende des Logo-Verlaufs */

  --c-accent:       var(--c-brand-yellow);  /* 14.8:1 auf --c-bg */
  --c-accent-hover: #E3F53A;
  --c-accent-press: #B5C704;
  --c-ink-on-accent: #0B0E18;               /* Schrift auf Akzentfläche, 14.8:1 */

  /* Akzent-Rampe, OKLCH-basiert, gleiche Helligkeitsstufen wie die Neutralen */
  --c-accent-100: #FAFDE0;
  --c-accent-200: #F0F9A8;
  --c-accent-300: #E3F35C;
  --c-accent-400: #D5EA04;
  --c-accent-500: #B5C704;
  --c-accent-600: #93A203;
  --c-accent-700: #6F7A02;
  --c-accent-800: #4B5301;
  --c-accent-900: #2C3101;

  /* Neutrale Rampe, blaustichig passend zum Navy */
  --c-neutral-100: #ECEEF2;
  --c-neutral-200: #C9CEDA;
  --c-neutral-300: #9AA3B2;
  --c-neutral-400: #6B7385;
  --c-neutral-500: #4A5164;
  --c-neutral-600: #333A4B;
  --c-neutral-700: #242A38;
  --c-neutral-800: #171C29;
  --c-neutral-900: #0B0E18;

  /* Linien. Haarlinien statt Kästen — Bauweise aus Industry. */
  --c-line:        rgb(236 238 242 / .16);
  --c-line-strong: rgb(236 238 242 / .28);
  --c-line-accent: rgb(213 234 4 / .55);

  /* Statusfarben, nur im Formular */
  --c-error:   #FF8A7A;   /* 8.2:1 auf --c-bg */
  --c-success: #7BE0A4;   /* 11.3:1 auf --c-bg */

  /* ================= TYPOGRAFIE =================
     Eine Familie, zwei Rollen: Barlow Bold 700 für Überschriften und Labels,
     Barlow 400/500 für Text. Der Kontrast entsteht über Gewicht, Versalien
     und Laufweite statt über eine zweite Familie.
     Skala mit clamp(), Basis 16→18px zwischen 380px und 1400px Viewport. */

  --font-heading: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Barlow", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --fw-heading: 700;   /* der einzige vorliegende Schnitt — nicht auf 600 ändern */

  --fs-xs:   0.75rem;                                        /* 12px, nur Meta */
  --fs-sm:   clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);   /* 13→14 */
  --fs-base: clamp(1rem, 0.961rem + 0.196vw, 1.125rem);      /* 16→18 */
  --fs-md:   clamp(1.125rem, 1.06rem + 0.29vw, 1.3125rem);   /* 18→21 */
  --fs-lg:   clamp(1.375rem, 1.22rem + 0.69vw, 1.875rem);    /* 22→30 */
  --fs-xl:   clamp(1.75rem, 1.46rem + 1.31vw, 2.5rem);       /* 28→40 */
  --fs-2xl:  clamp(2.25rem, 1.76rem + 2.16vw, 3.5rem);       /* 36→56 */
  --fs-3xl:  clamp(2.75rem, 1.99rem + 3.4vw, 4.75rem);       /* 44→76, nur Hero */

  --lh-tight: 1.02;   /* Display */
  --lh-head:  1.12;   /* h2, h3 */
  --lh-body:  1.55;
  --lh-loose: 1.7;    /* lange Fließtexte, Datenschutz */

  --ls-display: -0.005em;  /* normalbreite Versalien laufen von selbst weit genug */
  --ls-caps:    0.07em;    /* Labels, Buttons, Kicker */
  --ls-body:    0;

  --measure: 68ch;    /* max. Zeilenlänge Fließtext */
  --measure-narrow: 46ch;

  /* ================= ABSTAND =================
     Dichte 0.85 aus Industry, in derselben Progression fortgeführt. */

  --space-1:  3.4px;
  --space-2:  6.8px;
  --space-3:  10.2px;
  --space-4:  13.6px;
  --space-6:  20.4px;
  --space-8:  27.2px;
  --space-12: 40.8px;
  --space-16: 54.4px;
  --space-24: 81.6px;
  --space-32: 108.8px;

  /* Sektionsrhythmus — skaliert mit dem Viewport, sonst wirkt Mobil zerrissen */
  --space-section: clamp(var(--space-16), 7vw, var(--space-32));

  --container:      1320px;
  --container-text: 780px;   /* Impressum, Datenschutz, Blogbeitrag */
  --gutter: clamp(var(--space-4), 4vw, var(--space-12));

  /* ================= RADIEN =================
     Industry ist rechtwinklig. 0 ist der Normalfall; die Stufen existieren für
     Ausnahmen (Avatare, Chips) und dürfen nicht auf Karten angewendet werden. */

  --radius-0:  0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;
  --radius-pill: 999px;

  /* ================= TIEFE: BLUR =================
     Drei Stufen. Gleichzeitig sichtbar: maximal drei echte Blur-Flächen. */

  --blur-1: 10px;   --sat-1: 120%;
  --blur-2: 16px;   --sat-2: 130%;
  --blur-3: 24px;   --sat-3: 140%;

  /* Glasfüllung: dunkle Fläche mit niedriger Deckung. Stufe 3 ist so dicht,
     dass Text auch über einem hellen Foto AA erreicht (siehe glass.css). */
  --glass-fill-1: rgb(11 14 24 / .45);
  --glass-fill-2: rgb(11 14 24 / .62);
  --glass-fill-3: rgb(11 14 24 / .80);
  --glass-fill-on-image: rgb(11 14 24 / .72);   /* Pflichtwert über Bildern */

  /* Simulierte Glaskante: hell oben, dunkel unten */
  --glass-edge-1: inset 0 1px 0 rgb(255 255 255 / .07), inset 0 -1px 0 rgb(0 0 0 / .35);
  --glass-edge-2: inset 0 1px 0 rgb(255 255 255 / .10), inset 0 -1px 0 rgb(0 0 0 / .45);
  --glass-edge-3: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 -1px 0 rgb(0 0 0 / .55);

  /* Deckende Ersatzflächen für @supports-Fallback */
  --glass-solid-1: #121725;
  --glass-solid-2: #151B2B;
  --glass-solid-3: #1A2133;

  /* ================= TIEFE: SCHATTEN =================
     Gestaffelt pro Layer — größerer Radius bedeutet höhere Ebene. */

  --shadow-l1: 0 1px 2px rgb(0 0 0 / .30), 0 8px 24px rgb(0 0 0 / .35);
  --shadow-l2: 0 2px 4px rgb(0 0 0 / .35), 0 18px 50px rgb(0 0 0 / .45);
  --shadow-l3: 0 4px 8px rgb(0 0 0 / .40), 0 32px 90px rgb(0 0 0 / .60);
  --shadow-inset-image: inset 0 0 0 1px rgb(236 238 242 / .10);

  /* ================= EBENEN ================= */

  --z-base:    0;    /* Layer 0: Grund */
  --z-content: 1;    /* Layer 1: Bilder, opake Flächen */
  --z-glass:   20;   /* Layer 2: Nav, Cards, Formular */
  --z-float:   60;   /* Layer 3: Off-Canvas, Lightbox */
  --z-toast:   80;
  --z-skip:    100;

  /* ================= BEWEGUNG ================= */

  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 300ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);

  --hover-lift: 1.03;      /* Galeriekachel, Maximum laut Vorgabe */
  --parallax-max: 40px;    /* Hero, nur eine Ebene */

  /* ================= RASTER ================= */

  --grid-cols: 12;
  --grid-gap: clamp(var(--space-3), 1.4vw, var(--space-6));
  --gallery-gap: clamp(var(--space-2), 0.9vw, var(--space-4));

  /* ================= GRAIN =================
     Sehr dezentes Rauschen auf Layer 0. Inline-SVG, kein zusätzlicher Request. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* Grundtypografie auf dem Token-Layer, damit jede Seite gleich startet */
body {
  background-color: var(--c-bg);
  background-image: var(--grain), linear-gradient(168deg, var(--c-bg) 0%, var(--c-bg-2) 62%, var(--c-bg) 100%);
  background-attachment: fixed;
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-xl);  line-height: var(--lh-head); }
h3 { font-size: var(--fs-lg);  line-height: var(--lh-head); }
h4 { font-size: var(--fs-md);  line-height: var(--lh-head); text-transform: none; }

a { color: var(--c-accent); }
a:hover { color: var(--c-accent-hover); }

/* ================= ABWEICHUNGEN VOM DESIGN-SYSTEM =================
   Bewusst, nicht versehentlich:
   1. Grund invertiert. Industry ist hell (#f2f2f3). Fotografie steht auf
      dunklem Grund plastischer — Kernvorgabe des Projekts.
   2. Akzent ist das Markengelb statt Industry-Stahlblau. Zwei Signalfarben
      nebeneinander würden beiden die Wirkung nehmen.
   3. .duotone wird NICHT verwendet. Der Filter entsättigt Fotos und färbt sie
      ein — bei einer Fotografen-Website inakzeptabel.
   4. Kein Zwei-Familien-Pairing. Industry setzt Barlow Condensed über Barlow;
      hier trägt eine Familie beide Rollen, weil der Condensed-Schnitt nicht
      beschafft wird. Die Rollentrennung läuft über Gewicht und Versalien.
   Übernommen bleiben: Dichte 0.85, Rechtwinkligkeit, Haarlinien-Rahmen,
   Passermarken, modulares Raster, Fokusring-Regel. */