/* ==========================================================================
   Baukasten „Elegant“ – Design-Grundwerte (Tokens)
   Wiederverwendbar für gehobene Betriebe. Für einen neuen Kunden reicht es
   meist, den Block „Marke“ anzupassen; alles andere greift auf Rollen zu.
   Kontrastwerte (WCAG) stehen im Styleguide.
   ========================================================================== */

/* ---------- Schriften (lokal, SIL Open Font License) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Marke (pro Kunde anpassen) ---------- */
  --papier: #F7F2EA;          /* Seitenhintergrund */
  --papier-hell: #FFFDF9;     /* Karten, Speisekarte */
  --papier-dunkel: #EDE4D6;   /* Platzhalter, Flächen */
  --espresso: #2B1D16;        /* Text, dunkle Flächen */
  --espresso-weich: #3A2920;  /* Hover auf dunklen Flächen */
  --rinde: #6B5B50;           /* Nebentext */
  --bordeaux: #6E1E2B;        /* Akzent: Links, „heute“, Hervorhebung */
  --bordeaux-dunkel: #561621;
  --messing: #A8834A;         /* nur Linien und Zierrat, nie kleiner Text auf hell */
  --messing-text: #7A5A2B;    /* Messington, der als Text auf hell lesbar ist */
  --messing-hell: #C9A66E;    /* Messing als Text auf dunkel */
  --linie: #E1D5C2;           /* Hairlines auf hell */
  --logo: #4A2E20;            /* Ton des Stern-Schriftzugs */

  /* ---------- Rollen ---------- */
  --grund: var(--papier);
  --flaeche: var(--papier-hell);
  --text: var(--espresso);
  --text-leise: var(--rinde);
  --akzent: var(--bordeaux);
  --zier: var(--messing);
  --zier-text: var(--messing-text);
  --rand: var(--linie);
  --auf-dunkel: var(--papier);
  --fokus: var(--bordeaux);

  /* ---------- Typografie ---------- */
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  /* Fließende Größen: Handy (375 px) → Desktop (1440 px) */
  --gr-klein: 0.8125rem;                                  /* 13 px */
  --gr-text: 1rem;                                        /* 16 px */
  --gr-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);     /* 17 → 20 */
  --gr-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);      /* 22 → 28 */
  --gr-h2: clamp(2rem, 1.6rem + 1.6vw, 3rem);             /* 32 → 48 */
  --gr-h1: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);           /* 40 → 72 */
  --gr-preis: clamp(1.375rem, 1.25rem + 0.4vw, 1.625rem);

  --zeile-eng: 1.08;
  --zeile-text: 1.7;
  --sperrung: 0.18em;          /* Kapitälchen-Labels */

  /* ---------- Abstände ---------- */
  --abstand-1: 0.25rem;
  --abstand-2: 0.5rem;
  --abstand-3: 0.75rem;
  --abstand-4: 1rem;
  --abstand-5: 1.5rem;
  --abstand-6: 2rem;
  --abstand-7: 3rem;
  --abstand-8: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);  /* Sektionsabstand */
  --rand-seite: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); /* seitlicher Rand */
  --breite: 72rem;             /* max. Inhaltsbreite */
  --breite-text: 38rem;        /* angenehme Zeilenlänge */

  /* ---------- Form ---------- */
  --radius: 0;                 /* Eleganz: kantig, keine Pillen */
  --hairline: 1px solid var(--rand);
  --ziel: 2.75rem;             /* 44 px Touch-Ziel */

  /* ---------- Bewegung ---------- */
  --dauer: 220ms;
  --dauer-lang: 700ms;
  --kurve: cubic-bezier(.2, .7, .2, 1);
}

/* Dunkler Abend-Ton für einzelne Sektionen: class="ton-abend" */
.ton-abend {
  --grund: var(--espresso);
  --flaeche: var(--espresso-weich);
  --text: var(--papier);
  --text-leise: #D8CBBB;
  --akzent: var(--messing-hell);
  --zier: var(--messing);
  --zier-text: var(--messing-hell);
  --rand: rgba(247, 242, 234, .18);
  --fokus: var(--messing-hell);
  background: var(--grund);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dauer: 0ms; --dauer-lang: 0ms; }
}