/* ═══════════════════════════════════════════════════════════
   Pizzeria Roma – rustikal, familiär, modern-edel
   Palette: Oliv dunkel · Terracotta · Creme · Stroh-Gold
   Typo:    Marcellus (Display) · Mulish (Text) · Caveat (Tafel)
   ═══════════════════════════════════════════════════════════ */

/* ── Schriften ─────────────────────────────────────────────
   Lokal eingebunden, NICHT über fonts.googleapis.com. Ein
   Google-Fonts-Link würde die IP-Adresse jedes Besuchers an Google
   übertragen – das LG München I hat das am 20.01.2022 (Az. 3 O 17493/20)
   als DSGVO-Verstoß gewertet. Die Dateien stammen aus den
   @fontsource-Paketen und liegen in assets/fonts/.
   Es sind genau die neun Schnitte, die auf der Seite gerendert werden –
   im Browser gemessen, nicht geschätzt. Wer einen weiteren Schnitt
   benutzt, muss ihn hier ergänzen, sonst rechnet der Browser ihn
   künstlich aus und die Schrift wirkt verzerrt. */

@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/marcellus-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/mulish-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Mulish";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/mulish-latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/mulish-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/mulish-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/mulish-latin-800-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/caveat-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/caveat-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/caveat-latin-700-normal.woff2") format("woff2");
}

:root {
  /* Farben
     Regel: --terracotta und --straw sind FLÄCHENFARBEN. Sobald sie Text auf
     Creme/Sand/Weiß einfärben, reißen sie die WCAG-AA-Grenze von 4.5:1
     (Terracotta 4.3:1, Straw 1.98:1). Für Text deshalb --terra-deep bzw.
     --gold-ink nehmen – gleicher Farbton, nur dunkel genug. Auf dunklem
     Oliv gilt das Gegenteil: dort ist --straw richtig. */
  --olive:        #2A331F;   /* dunkles Olivgrün – Header, Footer */
  --olive-deep:   #1E2517;
  --terracotta:   #C4472B;   /* Tomate/Terracotta – NUR Flächen & CTA-Hintergrund */
  --terra-deep:   #A93A21;   /* dieselbe Farbe für TEXT: 5.6:1 auf Creme, 5.0:1 auf Sand */
  --cream:        #F6F0E3;   /* warmes Creme – Grundfläche */
  --sand:         #ECE3CE;   /* Sand – Sekundärfläche */
  --ink:          #262119;   /* fast schwarzes Braun – Text */
  --ink-soft:     #5A5244;   /* Fließtext */
  --straw:        #D9A441;   /* Stroh-Gold – NUR auf Oliv/Kreidetafel (dort 5.9:1) */
  --gold-ink:     #815E18;   /* dasselbe Gold für Text auf hellem Grund: 5.2:1 auf Creme */
  --line:         #D8CCB0;   /* Linien auf Creme */
  --chalk-bg:     #20241B;   /* Kreidetafel */
  --chalk:        #F2EFE6;   /* Kreide-Weiß */

  /* Typografie */
  --font-display: "Marcellus", "Times New Roman", serif;
  --font-body:    "Mulish", "Segoe UI", sans-serif;
  --font-chalk:   "Caveat", cursive;

  /* Rhythmus */
  --space-section: clamp(4.5rem, 10vw, 8rem);
  --container: 72rem;
  --shadow-soft: 0 22px 55px -28px rgba(30, 37, 23, 0.45);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Basis ─────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  /* clip statt hidden: hidden macht den body zum Scroll-Container und
     zerstört damit die sticky-Leisten (Header, Speisekarten-Tabs). */
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

figure { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 1rem;
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.75rem, 7vw, 5rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.7rem); }
h3 { font-size: 1.35rem; }

p { margin: 0 0 1.1rem; }

a {
  color: var(--terra-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Erster Tabstopp der Seite. Liegt ausserhalb des Bildes und kommt erst
   hervor, wenn ihn jemand mit der Tastatur erreicht. Ohne ihn muss man sich
   auf jeder Seite durch alle sieben Navigationspunkte tabben. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 200;
  background: var(--olive);
  color: var(--cream);
  font-weight: 700;
  text-decoration: none;
  padding: 0.85rem 1.35rem;
  border-radius: 0 0 4px 4px;
  transition: top 180ms var(--ease);
}

.skip-link:focus-visible { top: 0; }

:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section { padding-block: var(--space-section); }

/* Sprungziele der Navigation nicht unter den Sticky-Header schieben */
section[id] { scroll-margin-top: calc(var(--header-h, 4rem) + 0.5rem); }

/* ── Eyebrow ───────────────────────────────────────────── */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terra-deep);
  margin-bottom: 1.25rem;
}

.eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: var(--straw);
  flex: none;
}

.eyebrow-center { justify-content: center; }

.eyebrow-center::after {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: var(--straw);
  flex: none;
}

.section-head {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto clamp(2.5rem, 6vw, 4rem);
}

.section-sub { color: var(--ink-soft); }

/* ── Buttons ───────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 2rem;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color 220ms var(--ease), color 220ms var(--ease),
              border-color 220ms var(--ease), transform 220ms var(--ease),
              box-shadow 220ms var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--terracotta);
  color: #FFF6EF;
  box-shadow: 0 14px 30px -14px rgba(196, 71, 43, 0.65);
}
.btn-primary:hover { background: #A93A21; }

.btn-outline {
  border-color: rgba(246, 240, 227, 0.7);
  color: #F6F0E3;
  background: rgba(30, 37, 23, 0.25);
}
.btn-outline:hover {
  background: rgba(246, 240, 227, 0.14);
  border-color: #F6F0E3;
}

/* Ruhige Variante für helle Flächen – gleiche Sprache wie die Kategorie-Chips */
.btn-line {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}
.btn-line:hover {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--cream);
}

/* ── Header ────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--olive);
  border-bottom: 1px solid rgba(246, 240, 227, 0.08);
  transition: box-shadow 250ms var(--ease);
}

.site-header.scrolled {
  box-shadow: 0 14px 35px -20px rgba(0, 0, 0, 0.6);
}

.header-inner {
  max-width: 80rem;
  margin-inline: auto;
  padding: 0.85rem clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--cream);
  min-height: 44px;
}

.brand-mark {
  width: 1.9rem;
  height: 1.9rem;
  color: var(--straw);
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.brand-name span { color: var(--straw); }

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.2vw, 1.7rem);
}

.main-nav a {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--cream);
  text-decoration: none;
  position: relative;
  padding-block: 0.3rem;
}

.main-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--straw);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease);
}

.main-nav a:not(.nav-cta):hover::after { transform: scaleX(1); }

.nav-cta {
  background: var(--terracotta);
  color: #FFF6EF !important;
  padding: 0.55rem 1.25rem;
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem !important;
  white-space: nowrap; /* Knopfbeschriftung nie umbrechen lassen */
  transition: background-color 220ms var(--ease);
}
.nav-cta:hover { background: #A93A21; }

.nav-toggle {
  display: none;
  flex: none;              /* sonst staucht der Header ihn auf 20px Breite */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 250ms var(--ease), opacity 200ms var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ──────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: min(92svh, 60rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--olive-deep);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 27, 16, 0.85), rgba(20, 27, 16, 0.32) 75%),
    linear-gradient(0deg, rgba(30, 37, 23, 0.95), transparent 55%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  padding: clamp(6rem, 14vh, 9rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 5vh, 4rem);
}

.hero-eyebrow {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--straw);
  margin-bottom: 1.5rem;
}

.hero-title {
  color: #FBF7EC;
  margin-bottom: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(1rem, 2.5vw, 1.75rem);
}

.ht-line { display: inline-block; }

.ht-accent { color: var(--straw); }

.hero-lead {
  color: rgba(246, 240, 227, 0.88);
  font-size: 1.15rem;
  max-width: 36rem;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Load-Sequenz: Zeilen steigen nacheinander auf */
.ht-line,
.hero-eyebrow,
.hero-lead,
.hero-actions {
  opacity: 0;
  transform: translateY(26px);
  animation: hero-rise 900ms var(--ease) forwards;
}

.hero-eyebrow { animation-delay: 80ms; }
.ht-line:nth-child(1) { animation-delay: 200ms; }
.ht-line:nth-child(2) { animation-delay: 340ms; }
.ht-line:nth-child(3) { animation-delay: 480ms; }
.hero-lead { animation-delay: 640ms; }
.hero-actions { animation-delay: 780ms; }

@keyframes hero-rise {
  to { opacity: 1; transform: none; }
}

.hero-strip {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(246, 240, 227, 0.18);
  background: rgba(30, 37, 23, 0.55);
  backdrop-filter: blur(6px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
}

.strip-item {
  padding: 1.1rem clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  gap: 0.1rem;
}

.strip-item + .strip-item {
  border-left: 1px solid rgba(246, 240, 227, 0.14);
}

.strip-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--straw);
}

.strip-value {
  color: rgba(246, 240, 227, 0.92);
  font-size: 0.95rem;
  font-weight: 600;
}

.strip-value a {
  color: inherit;
  text-decoration: none;
  /* Tapflaeche auf 44px ziehen, ohne den Streifen hoeher zu machen */
  display: inline-block;
  padding-block: calc((44px - 1.6em) / 2);
  margin-block: calc((44px - 1.6em) / -2);
}
.strip-value a:hover { color: var(--straw); }

/* Mobil: Das Querformat bleibt als Foto erkennbar; der Text erhält eine
   eigene ruhige Fläche. Die CTAs sind beim Einstieg direkt erreichbar. */
@media (max-width: 48rem) {
  .hero { min-height: 0; }

  .hero-bg {
    position: relative;
    inset: auto;
    flex: none;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 23rem;
  }

  .hero-bg img { object-position: center 55%; }

  .hero-bg::after {
    background: linear-gradient(180deg,
      rgba(30, 37, 23, 0.06) 45%,
      rgba(30, 37, 23, 0.42) 76%,
      var(--olive-deep) 100%);
  }

  .hero-content {
    margin-top: -0.5rem;
    padding: 0 clamp(1.25rem, 6vw, 2.5rem) 1.75rem;
  }

  .hero-eyebrow {
    margin-bottom: 0.9rem;
    color: var(--cream);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: none;
  }

  .hero-title {
    max-width: 30rem;
    margin-bottom: 0.9rem;
    column-gap: 0.22em;
    font-size: clamp(2.5rem, 11.7vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .hero-title .ht-accent { flex-basis: 100%; }

  .hero-lead {
    max-width: 24rem;
    margin-bottom: 1.35rem;
    color: var(--cream);
    font-size: 1rem;
    line-height: 1.55;
    text-wrap: balance;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 24rem;
    gap: 0.25rem;
  }

  .hero-actions .btn-primary {
    min-height: 52px;
    padding: 0.8rem 1rem;
    font-size: 0.82rem;
    letter-spacing: 0.07em;
  }

  .hero-actions .btn-outline {
    min-height: 44px;
    padding: 0.6rem 1rem;
    border-color: transparent;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  .hero .hero-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--olive-deep);
    backdrop-filter: none;
  }

  .hero-strip .strip-item { padding: 0.85rem 1.25rem; }
  .hero-strip .strip-item:first-child { grid-column: 1 / -1; }
  .hero-strip .strip-item:nth-child(3) { border-left: 1px solid rgba(246, 240, 227, 0.14); }
  .hero-strip .strip-value { font-size: 0.8rem; }
  .hero-strip .strip-label { font-size: 0.65rem; letter-spacing: 0.12em; }

  /* Ohne verzögerten Einstieg bleiben Überschrift und Aktionen sofort lesbar. */
  .hero .ht-line, .hero-eyebrow, .hero-lead, .hero-actions {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
/* ── Willkommen ────────────────────────────────────────── */

.about { background: var(--cream); }

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.about-copy { min-width: 0; }

.about-img {
  position: relative;
  min-width: 0;
}

.about-img img {
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: var(--shadow-soft);
  border: 8px solid #FFFDF6;
}

.about-img figcaption {
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--terracotta);
  color: #FFF6EF;
  font-family: var(--font-chalk);
  font-size: 1.25rem;
  padding: 0.35rem 1.2rem;
  border-radius: 2px;
  box-shadow: 0 10px 24px -12px rgba(196, 71, 43, 0.7);
  white-space: nowrap;
}

.about-values {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.3rem;
}

.about-values li {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

.value-num {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--gold-ink);
  border: 1.5px solid var(--line);
  border-radius: 50%;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  flex: none;
}

.about-values strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.12rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.about-values div span { font-size: 0.95rem; }

/* ── Highlights ────────────────────────────────────────── */

.highlights { background: var(--sand); }

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.card {
  background: #FFFDF6;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 18px 45px -30px rgba(38, 33, 25, 0.5);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 55px -30px rgba(38, 33, 25, 0.6);
}

.card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.card:hover .card-media img { transform: scale(1.05); }

.card-body {
  padding: 1.5rem 1.6rem 1.7rem;
  text-align: center;
}

.card-course {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.5rem;
}

.card-body h3 { margin-bottom: 0.5rem; }

.card-body p {
  font-size: 0.94rem;
  margin-bottom: 0.9rem;
}

.card-price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--terra-deep);
  margin: 0 !important;
}

/* ── Speisekarte ───────────────────────────────────────── */

.menu { background: var(--cream); }

/* Die Kategorieleiste klebt unter dem Header. --header-h misst main.js,
   weil der Header am Desktop 64px und mobil 72px hoch ist. */
.menu-bar {
  position: sticky;
  top: var(--header-h, 4rem);
  z-index: 50;
  background: var(--cream);
  padding-block: 0.9rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  transition: box-shadow 250ms var(--ease);
}

.menu-bar.stuck {
  box-shadow: 0 14px 30px -24px rgba(38, 33, 25, 0.75);
}

.menu-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}

.menu-jump button {
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 3px;
  padding: 0.55rem 1.2rem;
  min-height: 44px;        /* Fingerkuppe, nicht Mauszeiger */
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 200ms var(--ease), color 200ms var(--ease),
              border-color 200ms var(--ease);
}

.menu-jump button:hover,
.menu-jump button[aria-selected="true"],
.menu-jump button[aria-current="true"] {
  background: var(--olive);
  border-color: var(--olive);
  color: var(--cream);
}

.menu-block {
  max-width: 62rem;
  margin-inline: auto;
}

.menu-block[hidden] { display: none; }

/* Am Handy stehen alle sieben Kategorien untereinander (main.js nimmt dort
   das hidden von den Bloecken). Sie brauchen dann sichtbaren Abstand
   zueinander und einen Sprungabstand, der Header UND Leiste freihaelt -
   sonst landet die Ueberschrift hinter der klebenden Leiste. */
@media (max-width: 64rem) {
  .menu-block + .menu-block { margin-top: clamp(3rem, 8vw, 4.5rem); }

  .menu-block {
    scroll-margin-top: calc(var(--header-h, 4.5rem) + var(--bar-h, 3.5rem) + 0.5rem);
  }
}

/* Schmale Viewports: Die Leiste bricht sonst auf drei Zeilen um (177px) und
   fräße mit dem Header 30% des Bildschirms. Deshalb eine seitlich
   scrollbare Zeile mit weichen Kanten. */
@media (max-width: 64rem) {
  .menu-bar { padding-block: 0.6rem; }

  .menu-jump {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline: 0.15rem;
    mask-image: linear-gradient(90deg, transparent, #000 1.5rem,
                                #000 calc(100% - 1.5rem), transparent);
  }

  .menu-jump::-webkit-scrollbar { display: none; }

  .menu-jump button {
    flex: 0 0 auto;
    font-size: 0.8rem;
    padding: 0.45rem 0.9rem;
  }
}

.menu-cat {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  margin-bottom: 1.4rem;
  color: var(--ink);
}

.menu-cat::before,
.menu-cat::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.menu-cat span { white-space: nowrap; }

/* Untergruppe innerhalb einer Karten-Kategorie (z. B. Spaghetti, Penne) */
.menu-group + .menu-group { margin-top: clamp(2.25rem, 4vw, 3rem); }

.menu-sub {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--terra-deep);
  margin: 0 0 0.5rem;
}

.menu-intro {
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 44rem;
}

.menu-block > .menu-intro { margin-bottom: 1.75rem; }

.menu-note {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-soft);
}

/* Die Positionen einer Gruppe laufen zweispaltig – erst die linke
   Spalte von oben nach unten, dann die rechte. */
.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 2;
  column-gap: clamp(2rem, 5vw, 4rem);
}

.menu-list li {
  padding-block: 0.65rem;
  break-inside: avoid; /* eine Position wird nie über zwei Spalten gerissen */
}

.mi-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

/* Bestellnummer wie auf der gedruckten Karte */
.mi-no {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  opacity: 0.75;
  /* rechtsbündig auf fester Breite, damit die Gerichtsnamen
     auch bei 2- und 3-stelligen Nummern auf einer Kante starten */
  min-width: 3ch;
  text-align: right;
}

.mi-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 1.02rem;
}

.mi-dots {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 2px dotted var(--line);
  transform: translateY(-4px);
}

.mi-price {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--terra-deep);
  white-space: nowrap;
}

.mi-desc {
  margin: 0.15rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* ── Saisonkarte (Kreidetafel) ─────────────────────────── */

.chalk {
  background: var(--olive-deep);
}

.chalkboard {
  max-width: 46rem;
  margin-inline: auto;
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(255, 255, 255, 0.045), transparent 50%),
    radial-gradient(100% 90% at 85% 85%, rgba(255, 255, 255, 0.035), transparent 55%),
    var(--chalk-bg);
  border: 3px solid #6B5233;
  outline: 2px solid rgba(242, 239, 230, 0.25);
  outline-offset: -12px;
  border-radius: 6px;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3.5rem);
  box-shadow: 0 35px 80px -40px rgba(0, 0, 0, 0.8);
  color: var(--chalk);
}

.chalk-title {
  font-family: var(--font-chalk);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 3.75rem);
  text-align: center;
  color: var(--chalk);
  margin: 0 0 0.1rem;
  line-height: 1.1;
}

.chalk-sub {
  font-family: var(--font-chalk);
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  text-align: center;
  color: var(--straw);
  margin-bottom: 2.2rem;
}

.chalk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.4rem;
}

.chalk-list li {
  padding-bottom: 1.4rem;
  border-bottom: 1.5px dotted rgba(242, 239, 230, 0.28);
}

.chalk-list li:last-child { border-bottom: none; padding-bottom: 0; }

.chalk-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.chalk-name {
  font-family: var(--font-chalk);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.2;
}

.chalk-price {
  font-family: var(--font-chalk);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--straw);
  white-space: nowrap;
}

.chalk-desc {
  margin: 0.15rem 0 0;
  font-size: 0.92rem;
  color: rgba(242, 239, 230, 0.75);
}

.chalk-note {
  margin: 2rem 0 0;
  text-align: center;
  font-family: var(--font-chalk);
  font-size: 1.3rem;
  color: rgba(242, 239, 230, 0.7);
}

/* ── Feiern & Buffet ───────────────────────────────────── */

.events { background: var(--sand); }

.events-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.events-copy { min-width: 0; }

.events-img { min-width: 0; }

/* Querformat-Zuschnitt: blendet den eingebrannten Text
   im unteren Teil des Originalfotos aus */
.events-img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center top;
  border-radius: 3px;
  border: 8px solid #FFFDF6;
  box-shadow: var(--shadow-soft);
}

.events-points {
  list-style: none;
  margin: 1.6rem 0 2rem;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.events-points li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.98rem;
}

.events-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--straw);
}

.events-points strong { color: var(--ink); }

/* ── Galerie ───────────────────────────────────────────── */

/* Galerie und Kontakt liegen als einzige beide auf Creme. Ohne Farbwechsel
   dazwischen addieren sich die beiden Section-Polster zu über 200px Leere –
   deshalb hier unten deutlich knapper. */
.gallery {
  background: var(--cream);
  padding-bottom: clamp(1rem, 2vw, 1.75rem);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.g-item {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(38, 33, 25, 0.55);
}

.g-wide { grid-column: span 2; }

.g-item img {
  width: 100%;
  height: 100%;
  min-height: 16rem;
  object-fit: cover;
  transition: transform 650ms var(--ease);
}

.g-item:hover img { transform: scale(1.04); }

/* ── Laufendes Bildband ────────────────────────────────── */

.showcase {
  /* weiche Kanten statt harter Abriss am Bildschirmrand */
  mask-image: linear-gradient(90deg, transparent, #000 4rem,
                              #000 calc(100% - 4rem), transparent);
}

.showcase-row { overflow: hidden; }

@media (max-width: 48rem) {
  .showcase { mask-image: none; }
}

.showcase-track {
  display: flex;
  width: max-content;
  animation: sc-drift 80s linear infinite;
}


/* Verschoben wird immer um genau EINE Bilderreihe, also 100%/Anzahl der
   Kopien – dann sitzt die nächste Kopie exakt auf der Startposition der
   vorigen und die Naht ist unsichtbar. Wie viele Kopien es braucht, hängt
   von der Bildschirmbreite ab; main.js zählt sie in --sets.
   Der Abstand liegt als margin an den Elementen, nicht als gap am
   Container: sonst entspricht der Bruchteil nicht einer vollen Reihe. */
@keyframes sc-drift {
  from { transform: translate3d(calc(-100% / var(--sets, 2)), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Touchgeräte: gegen eine CSS-Animation, die den Track per transform
   verschiebt, kommt kein Finger an. Dort läuft das Band deshalb über
   scrollLeft (main.js) – das ist von Haus aus wischbar, inklusive Schwung
   und Gummiband am Rand. pointer: coarse statt einer Breite, weil es hier
   um den Finger geht, nicht um die Bildschirmgröße. */
@media (pointer: coarse) {
  .showcase-row {
    overflow-x: auto;
    scrollbar-width: none;
    /* Am Ende des Bandes nicht die ganze Seite mitziehen */
    overscroll-behavior-x: contain;
  }

  .showcase-row::-webkit-scrollbar { display: none; }

  .showcase-track { animation: none; transform: none; }
}

.sc-set {
  display: flex;
  flex: 0 0 auto;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc-item {
  flex: 0 0 clamp(9.5rem, 23vw, 26rem);
  width: clamp(9.5rem, 23vw, 26rem);
  margin-right: clamp(0.75rem, 2vw, 1.6rem);
}

.sc-item figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sc-item img {
  display: block;
  /* Eine einzelne Reihe – dafür groß genug, dass man das Gericht erkennt */
  height: clamp(12rem, 24vw, 20rem);
  width: 100%;
  object-fit: cover;
  max-width: none;
  border-radius: 4px;
  box-shadow: 0 18px 40px -28px rgba(38, 33, 25, 0.55);
}

.sc-item figcaption {
  font-family: var(--font-chalk);
  font-size: 1.25rem;
  color: var(--ink-soft);
  text-align: center;
}

/* Anhalten: per Knopf und sobald das Band aus dem Bild ist. Bewusst NICHT
   beim Überfahren mit der Maus – das ließ das Band stehenbleiben, sobald
   der Zeiger zufällig darauf lag. Der Knopf bleibt die Stopp-Möglichkeit,
   die WCAG 2.2.2 für Dauerbewegung verlangt. */
.showcase[data-paused] .showcase-track,
.showcase:focus-within .showcase-track {
  animation-play-state: paused;
}

.showcase-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.sc-pause {
  font-family: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.35rem 0.2rem;
  min-height: 44px;
  cursor: pointer;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}

.sc-pause:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
}

.g-item figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.4rem 1.1rem 0.9rem;
  background: linear-gradient(180deg, transparent, rgba(30, 37, 23, 0.82));
  color: #FBF7EC;
  font-family: var(--font-chalk);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}

/* Handlungsaufforderung mit sichtbarer Ausweichadresse darunter */
.cta-mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
}

.cta-mail-note {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ── Galerie-Seite ─────────────────────────────────────── */

.gal-intro { background: var(--cream); padding-bottom: 0; }
.gal-photos { background: var(--cream); padding-top: clamp(1.5rem, 3vw, 2.25rem); }

.gal-intro h1 { font-size: clamp(1.85rem, 3.8vw, 2.7rem); }

.gal-intro .section-head { margin-bottom: 0; }

/* Bildraster über CSS-Spalten: Hoch- und Querformate stehen nebeneinander,
   ohne dass etwas beschnitten wird. Der Browser gleicht die Spaltenhöhen
   selbst aus – deshalb braucht es dafür kein JavaScript. */
/* Die Galerie darf breiter laufen als der Textrahmen – bei 94 Bildern
   spart jede zusätzliche Spalte mehrere Tausend Pixel Scrollweg. */
.gal-photos .container { max-width: 88rem; }

/* Eigene Stufen statt der allgemeinen Seiten-Breakpoints: bei 94 Bildern
   entscheidet die Spaltenzahl über den Scrollweg. Zwei Spalten auf dem
   Handy, vier auf dem Desktop. */
.photo-grid {
  columns: 2;
  column-gap: clamp(0.8rem, 1.6vw, 1.25rem);
}

@media (min-width: 34rem) { .photo-grid { columns: 3; } }
@media (min-width: 64rem) { .photo-grid { columns: 4; } }

.photo {
  margin: 0 0 clamp(0.8rem, 1.6vw, 1.25rem);
  break-inside: avoid; /* ein Bild wird nie über zwei Spalten gerissen */
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 18px 40px -30px rgba(38, 33, 25, 0.55);
}

.gal-back {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  text-align: center;
}

/* ── Kontakt ───────────────────────────────────────────── */

.contact { background: var(--cream); }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact-copy { min-width: 0; }

.contact-details {
  font-style: normal;
  margin-top: 1.4rem;
}

.contact-details p { margin: 0 0 0.9rem; }

/* Rechte Spalte: Öffnungszeiten oben, Stimmungsbild darunter. Das Bild
   steht damit im Block statt als Banner darüber und schließt die Lücke,
   die die kurze Karte neben dem längeren Kontakttext lässt. */
.contact-side {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.contact-photo {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  flex: 1; /* füllt die Restspalte, falls sie höher ausfällt */
}

.contact-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 60%; /* Tische und Tafeln bleiben im Bild */
}

.contact-rating {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.contact-rating strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.rating-stars {
  color: var(--gold-ink);
  letter-spacing: 0.08em;
}

.contact-services {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* Zwei Knöpfe nebeneinander, auf schmalen Viewports untereinander */
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.contact-details strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ink);
}

.hours-card {
  background: var(--olive);
  color: rgba(246, 240, 227, 0.9);
  border-radius: 5px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-soft);
  min-width: 0;
}

.hours-card h3 {
  color: #FBF7EC;
  font-size: 1.5rem;
  margin-bottom: 1.4rem;
}

.hours-list {
  margin: 0;
  display: grid;
  gap: 0.9rem;
}

.hours-list div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(246, 240, 227, 0.16);
}

.hours-list dt { font-weight: 700; }

.hours-list dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--straw);
  font-weight: 700;
  text-align: right;
}

/* Kein Zeitraum, sondern ein Zustand - deshalb bewusst anders gesetzt als
   die Uhrzeiten daneben, damit niemand darueber hinwegliest. */
.hours-list .hours-closed {
  font-variant-numeric: normal;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  color: var(--cream);
}

.hours-note {
  margin: 1.2rem 0 0;
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(246, 240, 227, 0.65);
}

/* ── Footer ────────────────────────────────────────────── */

.site-footer {
  background: var(--olive-deep);
  color: rgba(246, 240, 227, 0.75);
  padding-block: 2.75rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand-footer { color: var(--cream); }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}

.footer-nav a {
  color: rgba(246, 240, 227, 0.85);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 700;
  /* Tapflaeche auf 44px, ohne die Zeilenhoehe des Footers zu veraendern */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: calc((44px - 1.6em) / -2);
}

.footer-nav a:hover { color: var(--straw); }

.footer-meta {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  font-size: 0.82rem;
  text-align: right;
}

.footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cream);
}

.footer-legal a:hover { color: var(--straw); }

/* ── Scroll-Reveal ─────────────────────────────────────── */

.reveal,
.reveal-left,
.reveal-right,
.reveal-zoom {
  opacity: 0;
  transition:
    opacity 1.15s var(--ease),
    transform 1.15s var(--ease);
  will-change: opacity, transform;
}

.reveal { transform: translateY(36px); }
/* Der seitliche Versatz ist genau so gross wie der Ueberstand, den ein
   noch nicht eingeblendetes Element rechts erzeugt. Auf schmalen Schirmen
   ist der Innenabstand des Containers kleiner als 44px, deshalb dort ein
   kleinerer Versatz - die Bewegung bleibt lesbar, der Ueberstand faellt weg. */
.reveal-left { transform: translateX(calc(var(--reveal-shift, 44px) * -1)); }
.reveal-right { transform: translateX(var(--reveal-shift, 44px)); }

@media (max-width: 48rem) {
  :root { --reveal-shift: 16px; }
}
.reveal-zoom { transform: translateY(24px) scale(0.96); }

/* Stagger-Verzögerung nur beim Einblenden, nicht beim Zurücksetzen */
.reveal.in-view,
.reveal-left.in-view,
.reveal-right.in-view,
.reveal-zoom.in-view {
  opacity: 1;
  transform: none;
  transition-delay: var(--reveal-delay, 0ms);
}

/* ── Reduced Motion ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal, .reveal-left, .reveal-right, .reveal-zoom {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ht-line, .hero-eyebrow, .hero-lead, .hero-actions {
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* Dauerbewegung steht still; beide Reihen werden von Hand schiebbar */
  .showcase-track { animation: none; transform: none; }
  .showcase-row { overflow-x: auto; }


  .hero-bg img { transform: none !important; }

  .btn, .card, .card-media img, .g-item img { transition: none; }
}

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 64rem) {
  .about-grid,
  .events-grid,
  .contact-grid { grid-template-columns: minmax(0, 1fr); }

  .about-img { order: -1; }

  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }


  .hero-strip { grid-template-columns: 1fr; }

  .strip-item + .strip-item {
    border-left: none;
    border-top: 1px solid rgba(246, 240, 227, 0.14);
  }
}

/* Logo, Wortmarke und Navigation brauchen einschließlich Abstand rund 1190 px.
   Darunter frühzeitig auf das Menü wechseln, statt die Marke zusammenzudrücken. */
@media (min-width: 76.001rem) {
  .header-inner > .brand,
  .header-inner > .main-nav { flex-shrink: 0; }
}
@media (max-width: 76rem) {
  .nav-toggle { display: flex; }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--olive);
    border-bottom: 1px solid rgba(246, 240, 227, 0.12);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.55);
    padding: 0.5rem 1.25rem 1.25rem;
    display: none;
  }

  .main-nav.open { display: flex; }

  .main-nav a {
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid rgba(246, 240, 227, 0.12);
    font-size: 1.02rem;
  }

  .main-nav a:not(.nav-cta)::after { content: none; }

  .nav-cta {
    margin-top: 1rem;
    text-align: center;
    border-bottom: none !important;
  }
}

@media (max-width: 48rem) {
  .cards { grid-template-columns: minmax(0, 1fr); }

  /* Gestapelte Kategorien, eine Spalte pro Gruppe */
  .menu-list { column-count: 1; }

  .gallery-grid { grid-template-columns: minmax(0, 1fr); }


  .g-wide { grid-column: auto; }

  .footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-meta { text-align: center; }
}

@media (max-width: 26rem) {
  .header-inner { gap: 0.75rem; padding-inline: 1rem; }
  .header-inner .brand { min-width: 0; gap: 0.5rem; }
  .header-inner .brand-mark { flex: 0 0 1.5rem; }
  .header-inner .brand-name {
    white-space: normal;
    font-size: 1.05rem;
    line-height: 1.2;
    letter-spacing: 0.03em;
  }
  .nav-toggle { flex-shrink: 0; }
  .brand-footer .brand-name { white-space: normal; }

  .btn { width: 100%; }

  .chalk-name { font-size: 1.4rem; }
  .chalk-price { font-size: 1.35rem; }
}

/* Freigestelltes Roma-Symbol in Header und Footer. */
.brand-mark.brand-mark-roma {
  width: 3.25rem;
  height: 2.25rem;
  flex: 0 0 3.25rem;
  object-fit: contain;
}

@media (max-width: 26rem) {
  .header-inner .brand-mark.brand-mark-roma {
    width: 2.75rem;
    height: 2rem;
    flex-basis: 2.75rem;
  }
}