/*
 * ════════════════════════════════════════════════════════════
 *  theme.css — DEINE DATEI
 *  Hier kannst du Farben, Schrift und Abstände frei anpassen.
 *  Ändere NUR diese Datei, nie style.css.
 * ════════════════════════════════════════════════════════════
 */

:root {

  /* ── SEITEN-HINTERGRUND & TEXT ───────────────────────────── */

  --color-bg:           #ffffff;   /* Hintergrund der gesamten Seite */
  --color-text:         #1a1a18;
  --color-text-muted:   #7a756e;


  /* ── NAVIGATION (Header) ─────────────────────────────────── */

  --color-nav-bg:       #ffffff;   /* Header-Hintergrundfarbe — frei wählbar, z.B. #f5e642 für Gelb */
  --color-nav-text:     #1a1a18;   /* Text + Links in der Navigation */
  --color-nav-border:   rgba(0,0,0,0.08); /* Trennlinie unter dem Header */

  /*
   * Beispiel für dunklen Header:
   * --color-nav-bg:   #0a0a0a;
   * --color-nav-text: #f0ede8;
   * --color-nav-border: rgba(255,255,255,0.08);
   */


  /* ── FOOTER ──────────────────────────────────────────────── */

  --color-footer-bg:    #ffffff;   /* Footer-Hintergrundfarbe — frei wählbar, z.B. #f5e642 für Gelb */
  --color-footer-text:  #7a756e;   /* Text und Links im Footer */
  --color-footer-border: rgba(0,0,0,0.08); /* Trennlinie über dem Footer */

  /*
   * Beispiel für dunklen Footer:
   * --color-footer-bg:   #0a0a0a;
   * --color-footer-text: rgba(255,255,255,0.45);
   * --color-footer-border: rgba(255,255,255,0.08);
   */


  /* ── LIGHTBOX ────────────────────────────────────────────── */

  --color-lightbox-bg:  rgba(10, 8, 6, 0.94);


  /* ── TYPOGRAFIE ──────────────────────────────────────────── */

  /*
   * Schriftart: Name aus Google Fonts eintragen.
   * Die Schrift wird in index.php / gallery.php per <link> geladen.
   *
   * Beispiele:
   *   'DM Sans', sans-serif
   *   'Inter', sans-serif
   *   'Outfit', sans-serif
   *   'Jost', sans-serif
   *   'Raleway', sans-serif
   */
  --font-body:          'DM Sans', system-ui, sans-serif;

  /* Schriftgrößen */
  --text-xs:            0.6875rem;   /* 11px — Bildunterschriften, Metadaten */
  --text-sm:            0.8125rem;   /* 13px — Navigation */
  --text-base:          1rem;        /* 16px */
  --text-lg:            1.5rem;      /* 24px */
  --text-xl:            2.5rem;      /* 40px */

  /* Buchstabenabstand Navigation */
  --nav-letter-spacing: 0.12em;


  /* ── ABSTÄNDE ────────────────────────────────────────────── */

  /* Seitenrand links/rechts (gilt für Header, Footer, Galerie-Titel) */
  --page-margin:        clamp(1.5rem, 5vw, 5rem);

  /* Vertikaler Abstand zwischen Foto-Zeilen im Editorial Grid
   * 0px = kein Abstand, negative Werte = Überlappung
   * Hinweis: Der Parallax-Effekt schiebt Fotos zusätzlich visuell auseinander —
   * bei strength > 0 wirkt der Abstand daher größer als der eingestellte Wert. */
  --photo-gap:          0px;

  /* Abstand vor der ersten Foto-Zeile (verhindert Kleben am Galerie-Titel) */
  --grid-top-padding:   clamp(1rem, 3vw, 2.5rem);

  /* Header-Höhe */
  --header-height:      3.5rem;

  /* Vertikales Padding des Footers (oben und unten) */
  --footer-padding-v:   2.5rem;


  /* ── PARALLAX ────────────────────────────────────────────── */

  /*
   * 0   = kein Parallax
   * 0.1 = subtil (empfohlen)
   * 0.3 = stark
   */
  --parallax-strength:        0.15;
  /* Parallax-Stärke auf Smartphones (≤767px). Separat einstellbar,
   * da der Effekt auf kleinen Screens stärker wirkt.
   * Auf '' lassen um denselben Wert wie --parallax-strength zu verwenden. */
  --parallax-strength-mobile: 0.05;


  /* ── GALERIE INTRO-TEXT ───────────────────────────────────── */

  /* Überschrift (Playfair Display): min / preferred / max */
  --intro-headline-size:  clamp(2.5rem, 5.5vw, 4.5rem);

  /* Fließtext (Inter): min / preferred / max */
  --intro-text-size:      clamp(1.1rem, 1.6vw, 1.4rem);

  /* Breite des Intro-Blocks in Spalten (1–12, wie bei Fotos).
   * 12 = volle Breite, 8 = zwei Drittel, 6 = halbe Breite usw.
   * Skaliert automatisch mit dem Viewport. */
  --intro-col-span:       8;


  /* ── ÜBERGÄNGE ───────────────────────────────────────────── */

  --transition-base:    0.2s ease;
  --transition-slow:    0.5s cubic-bezier(0.25, 1, 0.5, 1);

}