/* Deutschland-Geschenke · Design-Tokens (28.10.2026)
   Vorbild: Bécane Paris (becaneparis.com) – nur der Stil: helle Bühne, Objekte stehen wie Figuren,
   sehr luftig, feine graue Schrift, elegante Zurückhaltung. Nichts kopiert.
   Layout-Typ: Schaufenster-Katalog (gestaffelte Produkt-Sockel, Geschenkfinder mit Filter-Chips, Katalog-Raster).
   Schriften lokal in assets/fonts, keine CDNs. Einzige Design-Quelle – deploy.py kopiert sie in die Website. */

@font-face {
  font-family: "Young Serif";
  src: url("../fonts/youngserif-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hankengrotesk-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hankengrotesk-var-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* Farben – Porzellan-Bühne, Graphit-Schrift, ein einziger warmer Akzent */
  --porzellan: #f8f5f0;            /* Grundfläche, warm getöntes Weiß */
  --porzellan-2: #fffdfa;          /* Karten, Sockel-Oberseite */
  --sand: #e7dccb;                 /* Sockel, Flächen, Trennungen */
  --sand-2: #f1eae0;               /* ganz blasser Sand für Streifen */
  --graphit: #2a2a2e;              /* Text */
  --nebel: #5c5c63;              /* Nebentext (AA auf Porzellan 6,5:1 und auf Sand 5,2:1) */
  --nebel-2: #8a8a90;              /* feine Beschriftungen auf Weiß, nur groß */
  --linie: rgba(42, 42, 46, 0.14);
  --preiselbeer: #9e2a3c;          /* Akzent: Knöpfe, Links, Etiketten */
  --preiselbeer-dunkel: #7d1f2f;   /* Hover */
  --preiselbeer-hell: #f5e6e8;     /* Hintergrund für Hinweise */
  --auf-dunkel: #f8f5f0;

  /* Schriften */
  --serif: "Young Serif", "Georgia", serif;
  --grotesk: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  /* Schriftgrößen (Verhältnis ca. 1,25, Display gespreizt) */
  --gr-mini: 0.72rem;
  --gr-klein: 0.86rem;
  --gr-text: 1.02rem;
  --gr-gross: 1.22rem;
  --gr-zwischen: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem);
  --gr-titel: clamp(2.2rem, 1.3rem + 3.6vw, 4.6rem);
  --gr-riesig: clamp(4.5rem, 2rem + 11vw, 11rem);

  /* Abstände */
  --ab-1: 0.5rem;
  --ab-2: 1rem;
  --ab-3: 1.6rem;
  --ab-4: clamp(2.2rem, 1.4rem + 3vw, 4rem);
  --ab-5: clamp(4rem, 2.4rem + 7vw, 9rem);
  --rand: clamp(1rem, 0.6rem + 2vw, 2.4rem);
  --breite: 84rem;

  /* Formen: weich, aber nicht verspielt */
  --radius-karte: 14px;
  --radius-etikett: 6px;
  --radius-knopf: 999px;

  /* Schatten: Objekt steht auf der Bühne */
  --schatten-sockel: 0 18px 40px -18px rgba(42, 42, 46, 0.35);
  --schatten-karte: 0 1px 0 rgba(42, 42, 46, 0.06), 0 12px 30px -16px rgba(42, 42, 46, 0.25);
  --schatten-karte-hover: 0 1px 0 rgba(42, 42, 46, 0.06), 0 26px 46px -18px rgba(42, 42, 46, 0.32);

  /* Bewegung: ruhig, nur Hover und Übergänge */
  --ease-aus: cubic-bezier(0.16, 1, 0.3, 1);
  --dauer-kurz: 200ms;
  --dauer-mittel: 420ms;
}