/* ============================================================
   Weberhof – Zentrales Designsystem "Schwarz & Gold"
   Eine Quelle der Wahrheit für alle GÄSTESICHTBAREN Oberflächen
   (buchen, gast, portal, bewerten, shop, rechnung, Rechtstexte).

   Farbwerte: 00 Kontext/Branding + Camping-Seite (Entscheidung Max
   20.07.2026). Gold = Handlungsfarbe (identisch Finnis Finest),
   mattschwarze Flächen, heller Sandgrund.

   Interne Werkzeuge (Cockpit, Kalender, Einstellungen, Parkplan)
   behalten bewusst ihr funktionales Farb-UI – das Cockpit-Grün ist
   laut Branding-Regel KEINE Markenfarbe.

   Nutzung je Seite: theme.css einbinden, dann im lokalen :root die
   eigenen Variablen auf die --wh-* Tokens mappen. Komponenten-CSS
   bleibt unverändert. So gibt es nur eine Schwarz&Gold-Definition.
   ============================================================ */

@font-face{
  font-family:"Montserrat";
  src:url("/font/montserrat-var.woff2") format("woff2-variations"),
      url("/font/montserrat-var.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;   /* Text bleibt sofort lesbar, Schrift tauscht nach */
}

:root{
  /* --- Gold: Handlungsfarbe --- */
  --wh-gold:#c9a843;        /* CTA-Fläche, Aktion (identisch Finnis Finest) */
  --wh-gold-d:#7b611e;      /* abgedunkelt: kleiner Text/Links, WCAG AA auf Sand */
  --wh-gold-light:#d9bd6a;  /* heller: Akzent auf dunklen Flächen (Dark Theme) */

  /* --- Schwarz: Text & dunkelste Flächen --- */
  --wh-black:#16171a;
  --wh-black-2:#2b2d31;

  /* --- Sand: Grundflächen --- */
  --wh-sand-50:#faf7f0;
  --wh-sand-100:#f2ece0;
  --wh-sand-200:#e2d8c4;

  /* --- Text --- */
  --wh-ink:#1c1d1f;
  --wh-muted:#63656a;
  --wh-invers:#fdfbf6;

  /* --- Schrift --- */
  --wh-font:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
            "Helvetica Neue",Arial,sans-serif;
}

/* [KOFFER-16] Scrollbalken-Platz dauerhaft reservieren.
   Verhindert den seitlichen Sprung zwischen kurzer und langer Seite
   UND die Zuckung beim Oeffnen eines Dialogs (overflow:hidden).
   Muss auf dem scrollenden Element stehen - das ist html.
   Auf Mobilgeraeten wirkungslos (Overlay-Balken = 0 Breite), aber unschaedlich.
   Quelle: 04 Ressourcen/UI-Bausteine/2026-08-23 Instagram-Reels Runde 3, Punkt 2 */
html{ scrollbar-gutter: stable; }