/* =====================================================================
   jdzphotos — gemeinsames Stylesheet der Kundenseiten (seit 02.11.2026)
   preview/index.html (Galerie /g/…) und preview/event.html (Eventseite /e/…)

   Vorher stand dieser Teil dreimal inline in den Seiten und lief auseinander. Hier
   steht nur, was beide Seiten gleich brauchen: Farb-Token (dunkel/hell), Grundlage,
   Hintergrund, Kopfleiste, Titelbild, Fußzeile, Knöpfe. Alles Seitenspezifische
   (Raster, Lightbox, Kasse, Eventkacheln) bleibt inline in der jeweiligen Seite.

   Die Grundwerte kommen aus site/site.css (Corporate Design der Hauptseite) und
   tragen dort, wo sie übernommen sind, einen Verweis. site.css selbst wird hier
   bewusst NICHT geladen: dessen .grid, .tiles, h1–h4, :focus-visible und die
   pauschale Bewegungsregel kollidieren mit den Galerieseiten.

   Eingebunden mit ABSOLUTEM Pfad (/preview/gallery.css): Die Seiten laufen unter
   /g/<slug> und /e/<slug>, share.php liefert dort die HTML-Datei aus. Ein relativer
   Pfad zeigte ins Leere.
   ===================================================================== */

/* ---------- Token: Dunkel ist Standard, [data-theme="light"] überschreibt ---------- */
:root {
  color-scheme: dark;
  --fg-rgb: 225,224,204;          /* = site.css --cream-rgb; alle Abstufungen erben davon */
  --line-rgb: 225,224,204;        /* Linien in Creme wie auf der Hauptseite (--line) */
  --primary: rgb(var(--fg-rgb));
  --on-primary: #000;             /* Text auf gefüllten Flächen */
  --bg: #0a0a0a;                  /* = site.css --ink */
  --nav-bg: #000;                 /* = site.css .site-nav */
  --card-bg: #111;                /* = --surface: Platzhalter der Kacheln, Panels */
  --card-bg-2: #1a1a1a;           /* = --surface-2: Hover */
  --input-bg: #0d0d0d;
  --sheet-bg: #111;               /* Warenkorb, Kasse, Dialoge */
  --foot-bg: #000;
  --red: #bc1822;                 /* = site.css --red, i-Punkt im Logo. Nur als Akzent. */
  --danger: #e07a7a;
  --ok: #9ec49a;
  --heart: #bc1822;
  --warn: #e0b26a;
  --warn-rgb: 224,178,106;
  --dot: rgba(225,224,204,.09);   /* Punktraster wie body::before der Hauptseite */
  --dot-lit: rgba(225,224,204,.55);
  --bar-grad-a: rgba(10,10,10,.94);
  --bar-grad-b: rgba(10,10,10,.6);
  --shadow: none;
  --img-shadow: none;
  --img-shadow-hover: 0 14px 40px rgba(0,0,0,.55);
  /* Deckkraft-Stufen für Nebentext. Vorher .45/.55/.7 — .45 ergab auf Schwarz nur
     3,6:1 (Kicker, Fußnoten, Rechtslinks). Jetzt ab .62 wie --cream-muted der
     Hauptseite (≈ 6:1). */
  --a-lo: .62; --a-mid: .7; --a-hi: .84;

  --sans: 'Almarai', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  /* Kanit SemiBold Italic wie die Hauptseite (seit 06.11.2026): Untertitel immer,
     Galerietitel im Titelstil „Racing“. Schrift in /site/fonts.css. */
  --akzent: 'Kanit', var(--sans);
  --r-sm: 12px;                   /* = site.css */
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;
  --r-tile: 14px;                 /* Kacheln am Handy; ab 768 px --r-md */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --nav-h: 60px;
  --frame: 12px;                  /* Rand um Titelbild und Fußzeile, wie .hero / .site-footer */
}
@media (min-width: 768px) { :root { --r-tile: var(--r-md); --frame: 16px; } }

[data-theme="light"] {
  color-scheme: light;
  --fg-rgb: 26,26,24;
  --line-rgb: 26,26,24;
  --on-primary: #f7f6f0;
  --bg: #f2f1e9;                  /* Papier */
  --nav-bg: #f2f1e9;              /* Leiste in Papierfarbe statt schwarzem Block */
  --card-bg: #e8e7dd;
  --card-bg-2: #dfded3;
  --input-bg: #fff;
  --sheet-bg: #fbfaf5;
  --foot-bg: #fbfaf5;
  --danger: #a83232;
  --ok: #2f7a3a;
  --heart: #bc1822;
  --warn: #8a5a12;
  --warn-rgb: 138,90,18;
  --dot: rgba(26,26,24,.1);
  --dot-lit: rgba(26,26,24,.4);
  --bar-grad-a: rgba(242,241,233,.96);
  --bar-grad-b: rgba(242,241,233,.7);
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  --img-shadow: none;
  --img-shadow-hover: 0 2px 4px rgba(0,0,0,.07), 0 18px 44px rgba(0,0,0,.16);
  /* Auf Papier trägt dieselbe Deckkraft weniger weit — unter .62 rutscht kleiner
     Text unter 4,5:1. */
  --a-lo: .66; --a-mid: .74; --a-hi: .86;
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  background: var(--bg); color: var(--primary);
  font-family: var(--sans); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh; overflow-x: clip;
  /* Spalte, in der <main> den freien Platz füllt: Die Fußzeile steht bei leerer oder kurzer
     Galerie unten am Fenster statt mittendrin, bei langer wie gehabt nach dem letzten Bild.
     Überlagerungen (Kaufleiste, Lightbox, Kasse) sind fixed und davon unberührt. */
  display: flex; flex-direction: column;
}
/* width: 100% — als Flex-Element mit margin: 0 auto würde <main> sonst auf Inhaltsbreite
   schrumpfen, und das Raster (absolut positionierte Kacheln) hat keine. */
body > main { flex: 1 0 auto; width: 100%; }
/* Akzentfarbe der Galerie (im Admin wählbar, seit 05.11.2026; Vorgabe Markenrot). Für Text
   gibt es lesbare Fassungen je Grund — das Skript rechnet sie aus der gewählten Farbe
   (akzentSetzen in preview/index.html): --accent-ink-d auf Dunkel, -l auf Papier, --accent-cr
   auf Creme (aktive Herzen). */
:root { --accent: var(--red); --accent-ink: var(--accent-ink-d, #e2585f); --accent-on-cream: var(--accent-cr, var(--red)); }
[data-theme="light"] { --accent-ink: var(--accent-ink-l, var(--red)); }
::selection { background: var(--accent); color: #fff; }
img, svg { display: block; }
/* hidden muss gewinnen — sonst hebelt jedes display:grid/flex eines Knopfes das Attribut aus */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
a { color: inherit; }
/* Serif-Akzent wie „Selected *Work*." auf der Hauptseite — nur an festen Wörtern
   (Warenkorb, Kasse, Danke), nie an Kundentiteln: die sind Freitext. */
em, .serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.punkt { color: var(--red); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Punktraster als feste Ebene — dieselbe Teilung wie die Hauptseite (site.css body::before) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
/* Leuchtendes Raster unter dem Mauszeiger (site.css .raster-licht). Gesetzt wird es per
   Skript in der Seite, nur bei echter Maus und ohne „Bewegung reduzieren". */
.raster-licht {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--dot-lit) 1.1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle 190px at var(--mx, -500px) var(--my, -500px), #000 0%, rgba(0,0,0,.45) 45%, transparent 100%);
          mask-image: radial-gradient(circle 190px at var(--mx, -500px) var(--my, -500px), #000 0%, rgba(0,0,0,.45) 45%, transparent 100%);
  opacity: 0; transition: opacity .6s ease;
}
.raster-licht.an { opacity: 1; }

/* ---------- Kopfleiste ----------
   Ersetzt die frühere „Lasche" (zentrierter Kasten mit unten gerundeten Ecken). Wie
   die Hauptseite: volle Breite, Marke links, Sprache und Modus rechts.
   - Unter 768 px scrollt sie mit weg: unten sitzt dort die Kaufleiste, zwei feste
     Leisten kosten zu viel Bildhöhe.
   - Ab 768 px klebt sie oben. z-index 20 — unter Kaufleiste (40), Lightbox (50),
     Kasse (60) und E-Mail-Dialog (70), sonst verdeckte sie deren Schließknöpfe. */
.gnav {
  position: relative; z-index: 20;
  background: var(--nav-bg);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
@media (min-width: 768px) { .gnav { position: sticky; top: 0; } }
.gnav.is-scrolled, [data-theme="light"] .gnav { border-bottom-color: rgba(var(--line-rgb),.12); }
.gnav-shell {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--nav-h); padding: .5rem clamp(16px, 3vw, 32px);
}
.gnav-brand {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 44px;
  color: var(--primary); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; text-decoration: none;
}
.gnav-brand img { width: 24px; height: 24px; object-fit: contain; }
/* Zwei Logos, eins je Modus — umgeschaltet ohne Skript */
.gnav-brand .logo-light, [data-theme="light"] .gnav-brand .logo-dark { display: none; }
[data-theme="light"] .gnav-brand .logo-light { display: block; }
/* „/ Galerie" hinter der Marke, wie ein Brotkrumen. Auf dem Handy fehlt der Platz. */
.gnav-ctx {
  display: none; font-size: .9375rem; color: rgba(var(--fg-rgb),var(--a-lo));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.gnav-ctx::before { content: "/"; margin-right: .6rem; color: rgba(var(--fg-rgb),.3); }
.gnav-ctx a { color: inherit; text-decoration: none; }
.gnav-ctx a:hover { color: var(--primary); }
@media (min-width: 768px) { .gnav-ctx { display: block; } }
.gnav-tools { margin-left: auto; display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
/* = site.css .nav-lang: DE vor EN, 44-px-Tippfläche */
.gnav-lang { display: inline-flex; align-items: center; padding-right: .5rem; margin-right: .2rem; border-right: 1px solid rgba(var(--line-rgb),.14); }
.gnav-lang button {
  background: none; border: 0; cursor: pointer; padding: .25rem .3rem;
  min-width: 44px; min-height: 44px;
  font-size: .8125rem; letter-spacing: .06em; color: rgba(var(--fg-rgb),var(--a-lo));
  transition: color .2s;
}
.gnav-lang button:hover, .gnav-lang button.on { color: var(--primary); }
.gnav-lang button.on { font-weight: 700; }
/* Hell/Dunkel: runder Knopf mit Haarlinie statt Schiebeschalter mit gelbem Knopf */
.theme-sw {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid rgba(var(--line-rgb),.16); background: transparent;
  color: var(--primary); cursor: pointer; transition: background .25s, border-color .25s;
}
.theme-sw:hover { background: rgba(var(--fg-rgb),.08); border-color: rgba(var(--line-rgb),.3); }
.theme-sw .knob { display: grid; place-items: center; }
.theme-sw .knob svg { width: 18px; height: 18px; }
@media (max-width: 359.98px) { .gnav-brand span { display: none; } }

/* ---------- Titelbild ----------
   Gerahmt wie der Hero der Hauptseite (Rand 12/16 px, Radius 28 px) und UNTER der
   Leiste — vorher randlos mit einer halbtransparenten Leiste darüber.
   Drei Varianten: keins (Vorgabe), „banner" (Band, Titel darunter), „full" (fast
   bildschirmfüllend, Titel links unten auf dem Foto). */
.cover { position: relative; z-index: 1; padding: calc(var(--frame) / 2) var(--frame) 0; }
.cover:empty { display: none; }
.cover .shot { position: relative; overflow: hidden; background: var(--card-bg); border-radius: var(--r-lg); isolation: isolate; }
.cover .shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; pointer-events: none;
}
.cover.cv-banner .shot { height: clamp(13rem, 42vh, 28rem); }
/* Die feste Kaufleiste unten (--buybar-h, setzt die Galerie) wird abgezogen — sonst lag
   sie am Handy über dem Titel */
.cover.cv-full .shot { height: calc(100svh - var(--nav-h) - var(--frame) * 1.5 - var(--buybar-h, 0px)); min-height: 22rem; }
/* Abdunklung: bei „banner" nur weicher Übergang, bei „full" Lesbarkeit des Titels,
   in drei Stufen einstellbar (Messwerte in handoff.md 1e). Der Verlauf liegt jetzt
   unten links, wo der Titel steht. */
.cover .scrim { position: absolute; inset: 0; pointer-events: none; }
.cover.cv-banner .scrim { background: linear-gradient(to top, rgba(0,0,0,.28), transparent 45%); }
.cover.cv-full .scrim {
  background:
    linear-gradient(to top, rgba(0,0,0,var(--scrim-edge)) 0%, rgba(0,0,0,var(--scrim-mid)) 38%, transparent 72%),
    linear-gradient(to bottom, rgba(0,0,0,calc(var(--scrim-mid) * .8)) 0%, transparent 30%);
}
.cover.scrim-light  { --scrim-edge: .55; --scrim-mid: .22; }
.cover.scrim-medium { --scrim-edge: .7;  --scrim-mid: .34; }
.cover.scrim-strong { --scrim-edge: .82; --scrim-mid: .5; }
/* Text auf dem Foto: FESTE helle Werte, nicht --fg-rgb (sonst im Hellmodus dunkel
   auf dunklem Bild). Der weiche Schatten fängt einzelne helle Bildstellen ab. */
.cover.cv-full .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.4rem, 4vw, 3rem); color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 26px rgba(0,0,0,.5);
}
.cover.cv-full .cap .kicker { color: rgba(255,255,255,.82); }
.cover.cv-full .cap h1 { color: #fff; max-width: 18ch; }
.cover.cv-full .cap .sub { margin-top: .9rem; font-size: .9375rem; color: rgba(255,255,255,.85); }
/* Untertitel auf dem Foto: hell wie der Titel — eine Akzentfarbe ist auf einem Motiv nicht
   verlässlich lesbar. Der Akzent sitzt dort im Strich vor der Kicker-Zeile. */
.cover .cap .tagline { color: rgba(255,255,255,.92); }

/* „Kino": Breitbild 2,39 : 1, Titel mittig auf dem Foto. Am Handy wäre 2,39 : 1 ein
   schmaler Streifen — dort trägt die Mindesthöhe. Bewusst Höhe statt aspect-ratio: Mit
   aspect-ratio überträgt sich die Mindesthöhe auf die Breite, am Handy wurde das Foto
   dadurch 574 px breit und rechts abgeschnitten. */
.cover.cv-cinema .shot {
  height: clamp(15rem, calc((100vw - var(--frame) * 2) / 2.39),
    calc(100svh - var(--nav-h) - var(--frame) * 1.5 - var(--buybar-h, 0px)));
}
.cover.cv-cinema .scrim {
  background:
    radial-gradient(ellipse 70% 75% at 50% 50%, rgba(0,0,0,var(--scrim-mid)) 0%, rgba(0,0,0,calc(var(--scrim-mid) * .55)) 55%, transparent 100%),
    linear-gradient(to top, rgba(0,0,0,calc(var(--scrim-edge) * .55)) 0%, transparent 35%);
}
.cover.cv-cinema .cap {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center;
  padding: clamp(1.2rem, 4vw, 3rem); color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 30px rgba(0,0,0,.55);
}
.cover.cv-cinema .cap .kicker { color: rgba(255,255,255,.82); }
.cover.cv-cinema .cap h1 { color: #fff; max-width: 22ch; }
.cover .hint {
  position: absolute; right: clamp(1.25rem, 4vw, 3rem); bottom: 1.5rem; display: none;
  align-items: center; gap: .4rem;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.75); pointer-events: none;
}
.cover .hint svg { width: .9rem; height: .9rem; animation: coverbob 2s var(--ease) infinite; }
@media (min-width: 768px) { .cover.cv-full .hint { display: flex; } }
@keyframes coverbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ---------- Kopfbereich ---------- */
.kicker {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .14em;
  color: rgba(var(--fg-rgb),var(--a-lo)); margin-bottom: .9rem;
}
/* Mit gewählter Akzentfarbe: kurzer Strich vor der Zeile über dem Titel */
.has-accent .kicker::before {
  content: ""; display: inline-block; width: 1.8rem; height: 2px; margin-right: .75rem;
  vertical-align: .28em; background: var(--accent);
}

/* ---- Inszenierung: Titelstil, Untertitel, Einleitung (seit 05.11.2026) ----
   Klassisch = wie bisher. Kino: Versalien, weit gesperrt, zentriert. Editorial: große
   Serif kursiv. Racing (seit 06.11.2026): Kanit SemiBold Italic wie die Akzentwörter der
   Hauptseite, auf .84 verkleinert, weil Kanit breiter und kräftiger ist als Almarai.
   Gelten auch für den Titel auf dem Foto (.cover .cap h1) und den Vorspann. */
.ttl-cinema h1 { text-transform: uppercase; letter-spacing: .16em; line-height: 1.08; font-size: clamp(1.9rem, 4.4vw, 3.6rem); }
.ttl-serif h1 { font-family: var(--serif); font-style: italic; letter-spacing: -.015em; line-height: .95; font-size: clamp(3rem, 7.4vw, 6.2rem); }
.ttl-racing h1 { font-family: var(--akzent); font-style: italic; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-size: clamp(2.1rem, 4.7vw, 3.9rem); }
.ttl-cinema .ghead:not(.has-prices) .ghead-main { margin-inline: auto; text-align: center; }
.ttl-cinema .ghead:not(.has-prices) .meta, .ttl-cinema .ghead:not(.has-prices) .head-acts { justify-content: center; }
.ttl-cinema .ghead:not(.has-prices) .howto, .ttl-cinema .ghead:not(.has-prices) .intro { margin-inline: auto; }
/* Untertitel seit 06.11.2026 in jedem Titelstil Kanit (vorher Serif kursiv, bei Editorial
   kleine Versalien). Größe auf .84 der alten Serif-Größe, damit er den Titel nicht überholt. */
.tagline {
  margin-top: .85rem; font-family: var(--akzent); font-style: italic; font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -.02em; color: var(--accent-ink);
  text-wrap: balance;
}
.intro { margin-top: 1.5rem; max-width: 40rem; font-size: 1.125rem; line-height: 1.7; color: rgba(var(--fg-rgb),var(--a-hi)); text-wrap: pretty; }
.intro p + p { margin-top: .9rem; }
/* *Wort* in der Einleitung und im Abschiedsgruß: Serif kursiv in der Akzentfarbe */
.akz { font-family: var(--serif); font-style: italic; font-size: 1.14em; letter-spacing: -.01em; color: var(--accent-ink); }
/* In der Einleitung seit 06.11.2026 nur die Akzentfarbe, Schrift wie der Fließtext —
   die Serif mitten im Satz war eine dritte Schrift neben Almarai und Kanit. */
.intro .akz { font-family: inherit; font-style: normal; font-size: 1em; letter-spacing: inherit; }
/* = site.css .page-hero__title, kleiner: Kundentitel sind oft lang */
h1 {
  font-weight: 400; letter-spacing: -.045em; line-height: .98;
  font-size: clamp(2.5rem, 5.6vw, 4.6rem); color: var(--primary);
  text-wrap: balance;
}
.state { padding: 6rem 1rem; text-align: center; }
.state .big { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 400; letter-spacing: -.035em; margin-bottom: 1rem; text-wrap: balance; }
.state p { color: rgba(var(--fg-rgb),var(--a-mid)); font-size: 1rem; line-height: 1.7; max-width: 36rem; margin: 0 auto; }
.state a { color: var(--primary); }

/* ---------- Knöpfe (= site.css .btn-pill / .btn-ghost) ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .6rem 1.25rem; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  font-size: .9375rem; font-weight: 700; line-height: 1.2;
  transition: background .25s, border-color .25s, color .25s, opacity .25s, transform .3s var(--ease);
}
.pill-solid { background: var(--primary); color: var(--on-primary); }
.pill-solid:hover { opacity: .88; }
.pill-ghost { background: transparent; color: var(--primary); border-color: rgba(var(--line-rgb),.2); font-weight: 400; }
.pill-ghost:hover { background: rgba(var(--fg-rgb),.07); border-color: rgba(var(--line-rgb),.36); }
.pill:disabled { opacity: .45; cursor: default; }

/* ---------- Fußzeile ----------
   Gerundetes Panel wie site.css .site-footer, aber schlanker: Kundenseiten brauchen
   keine Seitenliste, nur Kontakt und Rechtliches. */
.gfoot {
  position: relative; z-index: 1;
  margin: clamp(3rem, 7vw, 5rem) var(--frame) var(--frame);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 3rem) 1.4rem;
  background: var(--foot-bg); border: 1px solid rgba(var(--line-rgb),.12); border-radius: var(--r-lg);
}
.gfoot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1.5rem 3rem; }
.gfoot-brand { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.6rem; letter-spacing: -.04em; text-decoration: none; color: var(--primary); }
.gfoot-brand img { width: 28px; height: 28px; }
.gfoot-brand .logo-light, [data-theme="light"] .gfoot-brand .logo-dark { display: none; }
[data-theme="light"] .gfoot-brand .logo-light { display: block; }
.gfoot .note { margin-top: .9rem; font-size: .875rem; line-height: 1.65; color: rgba(var(--fg-rgb),var(--a-lo)); max-width: 30rem; }
.gfoot .links { display: flex; flex-direction: column; gap: .2rem; font-size: .9375rem; }
.gfoot .links a, .gfoot .legal a { text-decoration: none; color: rgba(var(--fg-rgb),var(--a-mid)); display: inline-block; padding: .3rem 0; }
.gfoot .links a:hover, .gfoot .legal a:hover { color: var(--primary); }
/* Widerrufsfunktion (§ 356a BGB, seit 06.11.2026): dezent, nur heller als die übrigen Links */
.gfoot .legal a.gfoot-widerruf { color: var(--primary); }
.gfoot-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1.2rem;
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(var(--line-rgb),.12);
  font-size: .8125rem; color: rgba(var(--fg-rgb),var(--a-lo));
}
.gfoot .legal { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }

/* ---------- Weniger Bewegung (= site.css am Ende) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cover .hint svg { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}