/* ============================================================
   SDO DESIGN-TOKENS — EINZIGE Hex-Quelle (aus markenmanual-final-v2 :root)
   Nur HIER stehen Hex-Werte. Alles andere (style.css, Templates) nutzt var(--…).
   Der token-guard blockt Hex/fremde Schrift/Verläufe außerhalb dieser Datei.
   ============================================================ */
:root{
  /* Farben — 9 Markenfarben, fix */
  --cream:#F9F7F2;      /* Naturweiß — Basis */
  --paper:#FCFBF8;      /* Papier — Karten auf getöntem Grund */
  --white:#ffffff;
  --tint:#F2EEE5;       /* Naturweiß tiefer — Bänder */
  --blue:#406277;       /* Schieferblau — Leitfarbe */
  --blue-deep:#36546A;  /* Blau-Hover / Footer */
  --gold:#A9842C;       /* Messinggold — verdienter Akzent. NUR große Schrift ab 24px + Nicht-Text-UI (3:1). Schlimmster Grund --tint: 3,01:1. */
  --gold-deep:#8A6700;  /* Gold für kleine Schrift (<24px) + Hover. Trifft 4,5:1 auf JEDEM hellen Markengrund — schlimmster Grund --tint: 4,51:1. */
  --gold-soft:#D4B35A;  /* Gold auf Dunkel — 7,36:1 auf --dark, 3,22:1 auf --blue (nur große Schrift) */
  /* CTA-Gold — Geometrie vom 16.07. unverändert (ellipse 74% 66%). Die ist der Grund, warum es
     als weiche Vignette wirkt und nicht als Oval: die Ellipse ist GRÖSSER als der Knopf, das
     helle Ende (d=1) liegt nur in den Ecken. Wer sie auf 50% 50% zieht, bekommt eine Linse.
     Gerechnet statt gegriffen (Marcel 17.07.):
     · Kern #916C04 = exakt 4,83:1 gegen weiße Schrift, flach bis d=0,65.
     · Die Schrift reicht über ALLE echten Knöpfe nie weiter als d=0,62 — gemessen, inklusive
       der gestreckten .btn--full, wo sie nicht mittig sitzt. Sie liegt also ganz auf dem Kern:
       4,83:1 am ersten Buchstaben UND in der Mitte.
     · Ab d=0,65 hellt es nach außen auf bis var(--gold) — dieselbe Farbe wie die Überschriften.
       Mit 3,26:1 gegen --cream hebt sich die Knopf-Fläche vom Grund ab (WCAG 1.4.11);
       das alte Markengold #B8933D schaffte dort nur 2,69 und war als Rand nie zulässig.
     ⚠️ axe kann Verläufe NICHT messen. Dieser Knopf ist nur so gut wie diese Rechnung —
     nach Änderungen mit scratchpad/pix2.py an echten Pixeln nachmessen (gemessen: 4,83 flach). */
  --gold-btn:radial-gradient(ellipse 74% 66% at center,#916C04 0%,#916C04 65%,var(--gold) 100%);
  --green:#4B6C59;      /* Waldgrün — Natur/See */
  --terra:#A6594E;      /* Terracotta — Café/Event */
  --ink:#221F1B;        /* Überschriften-Tinte */
  --body:#413D3A;       /* Fließtext */
  --meta:#6F6B64;       /* Meta/Labels — 4,58:1 auf --tint, 4,95:1 auf --cream (Kicker sind 11,5px = kleine Schrift) */
  --line:#E4DFD4;       /* Hairline */
  --line-strong:#D6CFC0;
  --dark:#2a2722;       /* Bild-Abdunklung (funktional, Manual .cover) */

  /* Aliasse für Alt-Klassen (Kompatibilität) */
  --bg:var(--cream); --bg-tint:var(--tint); --surface:var(--white);
  --headline:var(--ink); --terracotta:var(--terra);

  /* Schrift — fix Marcellus + Hanken (self-hosted) */
  --font-h:'Marcellus',Georgia,serif;
  --font-b:'Hanken Grotesk',system-ui,-apple-system,sans-serif;

  /* Schriftgrößen-Skala (14.08.2026).
     ------------------------------------------------------------------
     Vorher standen im style.css 145 font-size-Angaben mit 57 verschiedenen Werten,
     davon 19 allein zwischen 10 und 16 px — .78rem neben .8rem neben .82rem neben
     .85rem neben .86rem. Das hat niemand entschieden, das ist gewachsen: für Farbe,
     Schrift und Radius gab es Tokens UND einen Wächter, für die Größe nur einen
     Vorsatz. Was nicht erzwungen wird, driftet.

     Sechs Stufen für alles unterhalb der Überschriften, Verhältnis ~1,12. Beim Umbau
     wich kein Element um mehr als 1 px von seiner alten Größe ab — die Seite sieht
     gleich aus, sie ist nur noch zählbar.

     Die ÜBERSCHRIFTEN stehen bewusst nicht hier: ihre clamp()-Werte sind einzeln
     abgestimmt und abgenommen (h2 = 2,8rem ist als Referenz im Projekt festgehalten).
     Sie zusammenzufassen wäre kein Aufräumen, sondern ein Redesign.
     ------------------------------------------------------------------ */
  --fs-2xs:.68rem;   /* Kicker, Feldbeschriftungen, Meta — meist Versalien */
  --fs-xs:.76rem;    /* Kleintext, Fußnoten, Knopfschrift */
  --fs-sm:.85rem;    /* sekundärer Text, Bildunterschriften */
  --fs-md:.95rem;    /* kompakter Fließtext, Eingabefelder */
  --fs-lg:1.05rem;   /* Fließtext */
  --fs-xl:1.18rem;   /* Lead, hervorgehobene Absätze */
  --fs-2xl:1.35rem;  /* Überschrift in Karten und Boxen (fasst 1,3–1,45rem zusammen) */
  --fs-3xl:1.6rem;   /* größere Box-Überschrift */
  --fs-4xl:1.8rem;   /* größte feste Stufe — Preis-Anzeige in der Buchungs-Karte */

  /* Radien v3 — rundere, lockerere Ecken */
  --r-sm:9px; --r-md:16px; --r-lg:24px; --r-btn:12px;
  --radius:var(--r-btn); --radius-lg:var(--r-lg);

  /* Layout */
  --gutter:clamp(1.5rem,6vw,7rem); --section:clamp(5rem,10vw,9rem); --maxw:1180px; --measure:64ch;

  /* Abstands-Skala — die Stufen, die im Editor wählbar sind (Baustein-Abstände oben/unten).
     Eine Skala statt freier Pixel: jeder Wert bleibt im Rhythmus der Marke, und weil jede
     Stufe ein clamp() ist, schrumpft sie auf dem Telefon mit. Ein hart gesetztes „80px"
     täte das nicht — es säße auf dem Desktop richtig und auf dem Handy als Loch. */
  --sp-0:0rem;
  --sp-xs:clamp(.4rem,.8vw,.6rem);
  --sp-s:clamp(.8rem,1.6vw,1.2rem);
  --sp-m:clamp(1.4rem,3vw,2.2rem);
  --sp-l:clamp(2.2rem,5vw,3.6rem);
  --sp-xl:clamp(3.2rem,7vw,5.4rem);

  /* Schatten — sehr weich, warm */
  --shadow-soft:0 12px 34px -18px rgba(34,31,27,.14);
  --shadow:0 22px 50px -22px rgba(34,31,27,.18);
  --shadow-sm:var(--shadow-soft); --shadow-md:var(--shadow);

  --ease:cubic-bezier(.22,.61,.36,1); --dur:.5s;
}