/* ============================================================
   GRAUTON Galerie — spacing.css  ·  fine.rayhen.art
   Einzige Quelle aller Abstands-Tokens (--sp-*).
   Galerie.css referenziert diese Werte per var(--sp-*) und
   verändert sie nicht selbst — so lässt sich der Seiten-Rhythmus
   an EINEM Ort justieren.

   Typo-Skala (--ts-*, --tk-*, --lh-*) → typo.css
   Schriften (@font-face)               → base.css
   Farben, Themes, Komponenten-Layout   → galerie.css
   Laden: base.css → typo.css → spacing.css → galerie.css

   ── WIE LESEN ──
     clamp(MIN, IDEAL, MAX)
       MIN   = kleinster Wert auf schmalen Viewports (Mobilgerät)
       IDEAL = fluid, wächst proportional mit der Viewport-Dimension
               vw = Viewportbreite  ·  vh = Viewporthöhe
       MAX   = Deckel auf breiten/hohen Bildschirmen
     Faustregel:
       vertikale Abstände (Abschnitte, Kopf, Fuß)  → vh
       horizontale Abstände (Seiten-Rand, Raster)   → vw

   ── INHALT ── per Cmd-F nach „§N" suchen.
   §1  Seiten-Rahmen ......... .gx-page (Innenabstand, rundum)
   §2  Kopf-Zone ............. .gx-head
   §3  Headline-Zone ......... .gx-hl, .gx-hl__label, .gx-hl__note
   §4  Serien-Index .......... .gx-toc
   §5  Serien-Block .......... .gx-serie, .gx-serie__head, .gx-serie__intro
   §6  Foto-Raster ........... .gx-grid gap
   §7  Foto-Karte ............ .gx-card, .gx-card__meta
   §8  Fuß ................... .gx-footer
   §9  Responsive Overrides .. enge Werte für ≤560px
   ============================================================ */

:root {

  /* ═══ §1 · SEITEN-RAHMEN ═════════════════════════════════════
     Innenabstand der zentrierten .gx-page-Spalte.
     Vertikal: großzügig — eine Galerie braucht Luft nach oben/unten.
     Horizontal: fluid — schmal auf Mobilgeräten, weit auf Desktop. */
  --sp-page-v: clamp(2.5rem, 4vh, 4rem);    /* Innenabstand oben + unten */
  --sp-page-h: clamp(1.5rem, 5vw, 4rem);  /* Innenabstand links + rechts */

  /* ═══ §2 · KOPF-ZONE ════════════════════════════════════════
     .gx-head zeigt Marken-Link (→ rayhen.art) und Domain-Name.
     --sp-head-b   Luftpuffer unter dem Trennstrich zur Galerie.
     --sp-head-pb  Innenabstand vor dem 0.5px-Trennstrich selbst. */
  --sp-head-b:  clamp(1.5rem, 2vh, 3rem);  /* margin-bottom .gx-head */
  --sp-head-pb: 1.5rem;                     /* padding-bottom .gx-head (vor dem Strich) */

  /* ═══ §3 · HEADLINE-ZONE ════════════════════════════════════
     .gx-hl: Label + großer Galerie-Titel + Einführungszeile.
     Die drei Elemente bilden ein Trio und sitzen eng zusammen:
       --sp-label-b   sehr gering  → Label und Titel gehören zusammen
       --sp-note-t    moderat      → Note ist Kommentar, kein Titel
     --sp-hl-b schafft die Luft vom Trio zum darauffolgenden Serien-Index. */
  --sp-hl-b:    clamp(2rem, 4vh, 3.5rem);  /* margin-bottom .gx-hl */
  --sp-label-b: 0.4rem;                     /* margin-bottom .gx-hl__label → Titel */
  --sp-note-t:  1.1rem;                     /* margin-top .gx-hl__note (Einführungstext) */

  /* ═══ §4 · SERIEN-INDEX ══════════════════════════════════════
     .gx-toc: waagerechte Sprungmarken (z. B. „I Limited · II Grauton…").
     --sp-toc-v   Innenabstand oben + unten (hält die feinen Linien frei)
     --sp-toc-b   Abstand nach unten zur ersten Serie */
  --sp-toc-v: 0.8rem;                    /* padding-top + padding-bottom .gx-toc */
  --sp-toc-b: clamp(1rem, 2vh, 1.5rem);  /* margin-bottom .gx-toc */

  /* ═══ §5 · SERIEN-BLOCK ══════════════════════════════════════
     Jede Série = Kopf (Ordinalzahl + Titel) + optionale Einleitung + Raster.
     --sp-serie-t        Abstand OBERHALB — gering gehalten, Serien folgen dicht.
     --sp-serie-head-b   Abstand Kopf → Einleitung oder Raster.
     --sp-serie-intro-b  Abstand Einleitung → Raster. */
  --sp-serie-t:       clamp(0.2rem, 1vh, 2rem);    /* margin-top .gx-serie */
  --sp-serie-head-b:  clamp(1.25rem, 3vh, 2rem);   /* margin-bottom .gx-serie__head */
  --sp-serie-intro-b: clamp(1.5rem, 3vh, 2.25rem); /* margin-bottom .gx-serie__intro */

  /* ═══ §6 · FOTO-RASTER ═══════════════════════════════════════
     Lücke zwischen den Foto-Karten.
     Verändert den Charakter der Galerie spürbar:
       kleiner → dichter, filmisch   größer → klassischer Galerieabstand */
  --sp-grid-gap: clamp(0.75rem, 2vw, 2rem);  /* gap .gx-grid */

  /* ═══ §7 · FOTO-KARTE ════════════════════════════════════════
     --sp-card-pad  Passepartout: Innenabstand rund ums Foto.
                    Gibt dem Bild den Rahmen-Charakter eines Passepartouts.
                    Kleiner = fotografisch flach, größer = editioner Print.
     --sp-meta-t    Abstand zwischen Bildfläche und Beschriftungszeile.
     --sp-meta-pad  Innenabstand in der Beschriftungszeile selbst. */
  --sp-card-pad:  clamp(0.6rem, 1.2vw, 1rem);  /* padding .gx-card */
  --sp-meta-t:    0.55rem;                       /* margin-top .gx-card__meta */
  --sp-meta-pad:  0.55rem 0.1rem 0.3rem;         /* padding .gx-card__meta */

  /* ═══ §8 · FUSS ══════════════════════════════════════════════
     Großer Atem-Raum über dem Footer — die Galerie soll ausreichend
     ausklingen, bevor Copyright und Rechts-Links sichtbar werden. */
  --sp-footer-t: clamp(3rem, 6vh, 5rem);  /* margin-top .gx-footer */

  /* ═══ §9 · RESPONSIVE OVERRIDES ≤560px ══════════════════════
     Nur die Abstände, die auf Mobilgeräten enger werden.
     Das 3-Spalten-Raster bleibt unverändert — nur Lücken
     und die Beschriftungszeile schrumpfen auf kleinen Screens. */
  --sp-grid-gap-sm:  clamp(0.45rem, 2.2vw, 0.9rem);  /* enger Raster-Gap auf Mobil */
  --sp-meta-pad-sm:  0.4rem 0.05rem 0.25rem;           /* enge Beschriftungszeile auf Mobil */
  --sp-meta-t-sm:    0.4rem;                            /* enger Bild→Meta-Abstand auf Mobil */
}