/* ==========================================================================
   Ihrhover Dorfkrug — Design-Tokens „Dunkle Wirtsstube"
   Die Seite ist dunkel wie die Gaststube; das Essen leuchtet darauf.
   Messing als einziger Akzent, das Emailleschild als Zeichen des Hauses.
   ========================================================================== */
:root {
  /* Farben — sechs Werte, keine weiteren */
  --c-oak: #221a13;        /* Grundfläche: die Gaststube */
  --c-oak-2: #191309;      /* tiefer: Footer und Bühne */
  --c-oak-3: #2c221a;      /* aufgehellt: zweite dunkle Fläche */
  --c-enamel: #f7f2e7;     /* Emaille-Feld, Schrift auf Dunkel */
  --c-enamel-2: #efe7d7;   /* helle Ausnahmefläche */
  --c-white: #ffffff;
  --c-brass: #b07d24;      /* Messing — Akzent, trägt weiße Schrift */
  --c-brass-2: #8f6318;
  --c-brass-light: #e0ab4d; /* Akzent-TEXT auf dunklem Grund */

  --c-ink: #221a13;         /* Text auf hellen Ausnahmeflächen */
  --c-muted: #6b5d4c;
  --c-soft: rgba(247, 242, 231, 0.74);  /* Fließtext auf Dunkel */
  --line: rgba(34, 26, 19, 0.18);
  --line-strong: rgba(34, 26, 19, 0.4);
  --line-dark: rgba(247, 242, 231, 0.16);
  --on-dark-soft: var(--c-soft);

  /* Typografie */
  --font-serif: "Vollkorn", "Iowan Old Style", Georgia, serif;
  --font-sans: "Mulish", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --t-display: clamp(2.4rem, 5vw, 4.2rem);   --lh-display: 1.1;
  --t-h2: clamp(1.8rem, 3.2vw, 2.6rem);      --lh-h2: 1.18;
  --t-h3: 1.3rem;                            --lh-h3: 1.35;
  --t-body: clamp(1.02rem, 0.98rem + 0.3vw, 1.125rem); --lh-body: 1.68;
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;

  /* Rhythmus */
  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-6: 3rem;
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --head-gap: clamp(2.5rem, 6vw, 4rem);
  --wrap-max: 78rem;
  --wrap-x: clamp(1.25rem, 4vw, 3.5rem);

  /* Radius — Emailleschilder haben leicht gerundete Ecken */
  --radius-s: 0.3rem;
  --radius-m: 0.6rem;
  --radius-l: clamp(1rem, 2.5vw, 1.6rem);
  --radius-pill: 999px;

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 30rem) {
  :root {
    --t-display: clamp(1.9rem, 9vw, 2.4rem);
    --t-h2: clamp(1.45rem, 7vw, 1.75rem);
  }
}