@charset "UTF-8";
/* =============================================================
   Miros Grill Haus – Karlsruhe-Durlach
   Gestaltung abgeleitet aus dem Laden selbst:
   goldenes Deckengitter, warmes Schwarz, Nussbaum, Leinenpapier.
   ============================================================= */

/* ---------- 1. Token ---------- */

:root {
  /* Farben – aus den Materialien des Ladens */
  --kohl:         #12100D;   /* warmes Schwarz: Decke, Marmor */
  --kohl-2:       #1B1713;   /* angehobene Fläche */
  --kohl-3:       #262019;   /* Karte, Rand */
  --nuss:         #3A2417;   /* Nussbaumtheke */
  --messing:      #C79242;   /* das Deckengitter – Hauptakzent */
  --messing-hell: #E9BE72;
  --messing-tief: #8A6224;
  --glut:         #9E2B1E;   /* tiefes Rot, sparsam */
  --leinen:       #F5EFE4;   /* Papier der Speisekarte */
  --leinen-2:     #EAE0D0;
  --tinte:        #241D16;
  --tinte-2:      #6E6053;
  --creme:        #EDE4D6;   /* Text auf Dunkel */
  --creme-dim:    #A2917D;

  /* Typografie */
  --schrift-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --schrift-text:    "Karla", "Segoe UI", system-ui, sans-serif;

  --stufe-1: clamp(0.78rem, 0.75rem + 0.15vw, 0.84rem);
  --stufe-2: clamp(0.94rem, 0.9rem + 0.2vw, 1.02rem);
  --stufe-3: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  --stufe-4: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --stufe-5: clamp(1.9rem, 1.5rem + 1.8vw, 3rem);
  --stufe-6: clamp(2.6rem, 1.8rem + 3.6vw, 5.5rem);

  /* Raum */
  --breite: 76rem;
  --breite-eng: 46rem;
  --rand: clamp(1.15rem, 4vw, 3rem);
  --abstand: clamp(4rem, 9vw, 8rem);

  --rund: 3px;
  --uebergang: 260ms cubic-bezier(.2, .7, .3, 1);
}

/* ---------- 2. Grundlage ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--kohl);
  color: var(--creme);
  font-family: var(--schrift-text);
  font-size: var(--stufe-3);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--schrift-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: "opsz" 96;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

.nur-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.sprungmarke {
  position: absolute; left: var(--rand); top: -4rem; z-index: 200;
  background: var(--messing); color: var(--kohl);
  padding: .7rem 1.2rem; font-weight: 700; text-decoration: none;
  transition: top var(--uebergang);
}
.sprungmarke:focus { top: .75rem; }

.huelle {
  width: min(100% - var(--rand) * 2, var(--breite));
  margin-inline: auto;
}

/* ---------- 3. Das goldene Gitter (Signatur) ---------- */

/* Das Muster erbt seine Farbe von hier, nicht von der nutzenden Stelle. */
.gitter-defs { position: absolute; width: 0; height: 0; overflow: hidden; color: var(--messing); }

.gitter {
  display: block;
  width: 100%;
  color: var(--messing);
}

/* schmale Trennlinie zwischen Abschnitten */
.gitter-linie {
  height: 26px;
  overflow: hidden;
  opacity: .5;
}
.gitter-linie .gitter { height: 26px; }

/* Rosette als Auszeichnung */
.rosette { width: 1em; height: 1em; flex: none; color: var(--messing); }

/* ---------- 4. Kopfzeile ---------- */

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(18, 16, 13, .82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(199, 146, 66, .16);
  transition: background var(--uebergang), border-color var(--uebergang);
}
.kopf__innen {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 4.4rem;
}

.marke {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; margin-right: auto;
  font-family: var(--schrift-display);
  font-size: 1.12rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  font-variation-settings: "opsz" 20;
  color: var(--creme);
}
.marke svg { width: 1.7rem; height: 1.7rem; color: var(--messing); }
.marke b { font-weight: 700; color: var(--messing-hell); }
.marke span { font-weight: 400; letter-spacing: .1em; font-size: .82em; color: var(--creme-dim); }

.hauptnav ul {
  display: flex; gap: clamp(.9rem, 2vw, 1.9rem);
  list-style: none; margin: 0; padding: 0;
}
.hauptnav a {
  text-decoration: none;
  font-size: var(--stufe-1);
  letter-spacing: .13em; text-transform: uppercase;
  font-weight: 600; color: var(--creme-dim);
  padding: .4rem 0; position: relative;
  transition: color var(--uebergang);
}
.hauptnav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--messing);
  transition: right var(--uebergang);
}
.hauptnav a:hover, .hauptnav a:focus-visible { color: var(--creme); }
.hauptnav a:hover::after { right: 0; }

.nav-schalter {
  display: none;
  width: 2.7rem; height: 2.7rem;
  background: none; border: 1px solid rgba(199,146,66,.3);
  color: var(--creme); cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav-schalter span { display: block; width: 1.1rem; height: 1px; background: currentColor; position: relative; }
.nav-schalter span::before, .nav-schalter span::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor;
  transition: transform var(--uebergang), opacity var(--uebergang);
}
.nav-schalter span::before { top: -6px; }
.nav-schalter span::after  { top: 6px; }
.nav-schalter[aria-expanded="true"] span { background: transparent; }
.nav-schalter[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-schalter[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 5. Schaltflächen ---------- */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.5rem;
  font-family: var(--schrift-text);
  font-size: var(--stufe-2); font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none; border: 1px solid transparent;
  border-radius: var(--rund); cursor: pointer;
  transition: transform var(--uebergang), background var(--uebergang), color var(--uebergang), border-color var(--uebergang);
  white-space: nowrap;
}
.knopf svg { width: 1.15em; height: 1.15em; flex: none; }

.knopf--gold {
  background: linear-gradient(160deg, var(--messing-hell), var(--messing) 58%, var(--messing-tief));
  color: #1A1409;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 26px -14px rgba(199,146,66,.9);
}
.knopf--gold:hover { transform: translateY(-2px); }

.knopf--linie {
  border-color: rgba(199, 146, 66, .45);
  color: var(--creme);
}
.knopf--linie:hover { border-color: var(--messing); background: rgba(199,146,66,.1); transform: translateY(-2px); }

.knopf--dunkel { background: var(--tinte); color: var(--leinen); }
.knopf--dunkel:hover { background: #150F0A; transform: translateY(-2px); }

/* ---------- 6. Hero ---------- */

/* Das Foto füllt die Startseite. Lesbarkeit kommt aus dem Schleier
   darüber, nicht daraus, das Bild wegzudimmen. */
.hero {
  position: relative;
  min-height: min(92vh, 44rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--kohl);
}

.hero__bild { position: absolute; inset: 0; display: block; }
.hero__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 54% 46%;
  filter: saturate(.98) contrast(1.05);
}

.hero__schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(12,10,8,.9)  0%,
      rgba(12,10,8,.74) 32%,
      rgba(12,10,8,.44) 60%,
      rgba(12,10,8,.3)  100%),
    linear-gradient(to bottom,
      rgba(12,10,8,.7) 0%,
      rgba(12,10,8,.1) 24%,
      rgba(12,10,8,.15) 52%,
      rgba(12,10,8,.82) 100%);
}

.hero__inhalt {
  position: relative; z-index: 2;
  margin-top: auto;
  padding-block: clamp(5.5rem, 14vw, 10rem) clamp(2.2rem, 5vw, 3.6rem);
  text-align: left;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: var(--stufe-1); font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--messing-hell);
  margin: 0 0 1.2rem;
}
.eyebrow::before {
  content: ""; width: clamp(1.8rem, 4vw, 3.2rem); height: 1px;
  background: var(--messing); flex: none;
}

.wortmarke {
  font-size: var(--stufe-6);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 144;
  margin: 0 0 1.1rem;
  max-width: 22ch;
  text-wrap: balance;
}
.wortmarke em {
  font-style: italic;
  font-weight: 400;
  color: var(--messing-hell);
}

.hero__claim {
  max-width: 33rem; margin: 0 0 2.1rem;
  font-size: var(--stufe-3);
  line-height: 1.6; font-weight: 400;
  color: var(--creme);
}

/* Qualitätssiegel – nimmt den Stern aus dem Deckengitter auf. */
.hero__siegel {
  display: inline-flex; align-items: center; gap: .65rem;
  max-width: 100%;
  margin: 0 0 1.7rem;
  padding: .5rem .95rem .5rem .75rem;
  border: 1px solid rgba(199,146,66,.45);
  border-radius: var(--rund);
  background: rgba(12,10,8,.45);
  font-size: var(--stufe-2);
  line-height: 1.4;
  color: var(--creme);
}
.hero__siegel svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--messing); }
.hero__siegel strong { font-weight: 700; color: var(--messing-hell); }
.hero__siegel i {
  font-style: normal; color: var(--messing);
  padding-inline: .18em;
}

.hero__aktionen {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-start;
}

/* Eckdaten als Leiste am unteren Bildrand */
.fakten {
  position: relative; z-index: 3;
  border-top: 1px solid rgba(199,146,66,.3);
  background: rgba(12,10,8,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.fakten__innen {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.fakten__innen li {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: 1.1rem clamp(.8rem, 2vw, 1.6rem);
  border-left: 1px solid rgba(199,146,66,.16);
}
.fakten__innen li:first-child { border-left: 0; padding-left: 0; }
.fakten__innen svg {
  width: 1.1rem; height: 1.1rem; flex: none;
  color: var(--messing); margin-top: .2rem;
}
.fakten__innen strong {
  display: block;
  font-size: var(--stufe-2); font-weight: 700; color: var(--creme);
  letter-spacing: .01em;
}
.fakten__innen span {
  display: block;
  font-size: var(--stufe-1); color: var(--creme-dim); line-height: 1.5;
}
.fakten a { text-decoration: none; }
.fakten a:hover { color: var(--messing-hell); }

/* ---------- 7. Abschnitte allgemein ---------- */

.abschnitt { padding-block: var(--abstand); position: relative; }
.abschnitt--leinen { background: var(--leinen); color: var(--tinte); }
.abschnitt--nuss {
  background:
    linear-gradient(to bottom, var(--kohl), var(--kohl-2) 40%, var(--kohl));
}

.titelzeile { max-width: var(--breite-eng); margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.titelzeile .eyebrow { color: var(--messing); }
/* Zentrierte Abschnittsköpfe brauchen den Strich auf beiden Seiten,
   der linksbündige Hero nur vorn. */
.titelzeile .eyebrow::after,
.erzaehlung .eyebrow::after {
  content: ""; width: clamp(1.8rem, 4vw, 3.2rem); height: 1px;
  background: var(--messing); flex: none;
}
.abschnitt--leinen .titelzeile .eyebrow { color: var(--messing-tief); }
.abschnitt--leinen .titelzeile .eyebrow::before,
.abschnitt--leinen .titelzeile .eyebrow::after { background: var(--messing-tief); }

.titelzeile h2 {
  font-size: var(--stufe-5);
  font-weight: 500;
  margin-bottom: .7rem;
}
.titelzeile p {
  font-size: var(--stufe-3);
  font-weight: 300;
  color: var(--creme-dim);
  line-height: 1.6;
}
.abschnitt--leinen .titelzeile p { color: var(--tinte-2); }

/* ---------- 8. Erzählabschnitt ---------- */

.erzaehlung {
  max-width: var(--breite-eng); margin-inline: auto; text-align: center;
}
.erzaehlung p {
  font-size: var(--stufe-4);
  font-weight: 300; line-height: 1.6;
  color: var(--creme);
}
.erzaehlung p + p { margin-top: 1.1rem; font-size: var(--stufe-3); color: var(--creme-dim); }

.merkmale {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: rgba(199,146,66,.16);
  border: 1px solid rgba(199,146,66,.16);
}
.merkmal {
  background: var(--kohl);
  padding: 1.8rem 1.5rem;
  text-align: center;
}
.merkmal svg { width: 1.9rem; height: 1.9rem; color: var(--messing); margin-bottom: .8rem; }
.merkmal h3 {
  font-size: var(--stufe-3); font-weight: 600; margin-bottom: .35rem;
  font-variation-settings: "opsz" 30;
}
.merkmal p { font-size: var(--stufe-2); color: var(--creme-dim); line-height: 1.55; }

/* ---------- 9. Die Räume ---------- */

.raeume {
  display: grid; gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.raum {
  position: relative; overflow: hidden;
  background: var(--kohl-2);
  border: 1px solid rgba(199,146,66,.18);
  display: flex; flex-direction: column;
}
.raum__bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.raum__bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms cubic-bezier(.2,.7,.3,1);
}
.raum:hover .raum__bild img { transform: scale(1.05); }
.raum__bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,16,13,.85), transparent 55%);
}
.raum__text { padding: 1.5rem clamp(1.2rem, 2.5vw, 1.9rem) 1.9rem; }
.raum__text h3 {
  font-size: var(--stufe-4); margin-bottom: .55rem; font-weight: 500;
  font-variation-settings: "opsz" 48;
}
.raum__text p { font-size: var(--stufe-2); color: var(--creme-dim); line-height: 1.6; }
.raum__marke {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-size: var(--stufe-1); letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: var(--messing-hell);
  background: rgba(18,16,13,.75);
  padding: .35rem .8rem;
  border: 1px solid rgba(199,146,66,.3);
}

/* ---------- 9b. Das Fleisch (Handwerk) ---------- */

/* Ein ruhiger Halt zwischen Haus und Karte. Die Aussage trägt sich selbst –
   deshalb hier kein Bild, kein Kasten, keine Schmuckelemente. */
.handwerk {
  background: var(--kohl-2);
  border-block: 1px solid rgba(199,146,66,.2);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.handwerk__innen { text-align: center; }

.handwerk__stern {
  width: 1.6rem; height: 1.6rem;
  color: var(--messing);
  margin: 0 auto 1.5rem;
  display: block;
}

.handwerk__satz {
  margin: 0 auto;
  font-family: var(--schrift-display);
  font-size: clamp(1.32rem, 1rem + 1.6vw, 2.5rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 72;
  color: var(--creme);
}
/* Jeder Satz auf einer eigenen Zeile – die drei Aussagen sollen
   nacheinander wirken, nicht als Fließtext verschwimmen. */
.handwerk__satz span { display: block; text-wrap: balance; }
.handwerk__satz span + span { margin-top: .18em; }
.handwerk__satz em {
  font-style: italic;
  font-weight: 400;
  color: var(--messing-hell);
}

/* ---------- 10. Speisekarte ---------- */

.karte__kopf { text-align: center; margin-bottom: 2rem; }

.karten-nav {
  position: sticky; top: 4.4rem; z-index: 40;
  background: var(--leinen);
  border-block: 1px solid var(--leinen-2);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.karten-nav ul {
  display: flex; gap: .3rem; list-style: none; margin: 0;
  padding: .6rem 0; overflow-x: auto;
  scrollbar-width: thin;
}
.karten-nav li { flex: none; }
.karten-nav button {
  font-family: var(--schrift-text);
  font-size: var(--stufe-1); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .55rem 1rem;
  background: none; border: 1px solid transparent; color: var(--tinte-2);
  cursor: pointer; white-space: nowrap;
  transition: color var(--uebergang), background var(--uebergang), border-color var(--uebergang);
}
.karten-nav button:hover { color: var(--tinte); }
.karten-nav button[aria-current="true"] {
  color: var(--tinte); border-color: rgba(138,98,36,.4);
  background: rgba(199,146,66,.14);
}

.karten-suche {
  display: flex; align-items: center; gap: .7rem;
  max-width: 24rem; margin: 0 auto clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(110,96,83,.35);
  padding-bottom: .5rem;
}
.karten-suche svg { width: 1.1rem; height: 1.1rem; color: var(--tinte-2); flex: none; }
.karten-suche input {
  flex: 1; border: 0; background: none; outline: none;
  font-family: var(--schrift-text); font-size: var(--stufe-2);
  color: var(--tinte); padding: .2rem 0;
}
.karten-suche input::placeholder { color: var(--tinte-2); opacity: .8; }

.karte-gruppe { margin-bottom: clamp(2.8rem, 6vw, 4.5rem); scroll-margin-top: 9rem; }
.karte-gruppe[hidden] { display: none; }

.gruppe__kopf {
  display: flex; align-items: baseline; gap: 1rem;
  margin-bottom: 1.6rem;
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--tinte);
}
.gruppe__kopf h3 {
  font-size: var(--stufe-4); font-weight: 600;
  letter-spacing: .02em;
  font-variation-settings: "opsz" 48;
  margin: 0;
}
.gruppe__hinweis {
  margin-left: auto; text-align: right;
  font-size: var(--stufe-1); color: var(--tinte-2);
  letter-spacing: .06em; font-weight: 500;
}

.gerichte { list-style: none; margin: 0; padding: 0; }

.gericht {
  display: grid;
  grid-template-columns: 2.9rem 1fr;
  gap: 0 1rem;
  padding: .72rem 0;
  border-bottom: 1px solid rgba(110,96,83,.16);
}
.gericht:last-child { border-bottom: 0; }
.gericht--extra { opacity: .78; }

.gericht__nr {
  font-family: var(--schrift-display);
  font-variation-settings: "opsz" 20;
  font-size: var(--stufe-3);
  font-weight: 600;
  color: var(--messing-tief);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.gericht__zeile {
  display: flex; align-items: baseline; gap: .55rem;
  grid-column: 2;
}
.gericht__name {
  font-weight: 600; font-size: var(--stufe-3); color: var(--tinte);
}
.gericht__fuellung {
  flex: 1 1 auto; min-width: 1.5rem;
  border-bottom: 2px dotted rgba(110,96,83,.45);
  transform: translateY(-.28em);
}
.gericht__preis {
  font-weight: 700; font-size: var(--stufe-3); color: var(--tinte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gericht__preis--offen { color: var(--tinte-2); font-weight: 500; font-size: var(--stufe-2); }

.gericht__zusatz {
  grid-column: 2;
  font-size: var(--stufe-2); color: var(--tinte-2); line-height: 1.5;
}
.gericht__kenn {
  font-size: .72em; color: rgba(110,96,83,.75);
  letter-spacing: .05em; margin-left: .4rem;
}

.karte-leer {
  text-align: center; color: var(--tinte-2);
  padding: 3rem 0; font-size: var(--stufe-3);
}
.karte-leer[hidden] { display: none; }

/* Kennzeichnung */
.kennzeichnung {
  max-width: var(--breite-eng); margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  border-top: 1px solid rgba(110,96,83,.25);
  padding-top: 1.8rem;
  font-size: var(--stufe-1); color: var(--tinte-2); line-height: 1.7;
}
.kennzeichnung h3 {
  font-size: var(--stufe-2); color: var(--tinte); margin-bottom: .5rem;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  font-family: var(--schrift-text);
}
.kennzeichnung dl { margin: 0 0 1.2rem; }
.kennzeichnung dl div { display: inline; }
.kennzeichnung dt, .kennzeichnung dd { display: inline; margin: 0; }
.kennzeichnung dt { font-weight: 700; color: var(--tinte); }
.kennzeichnung dt::after { content: " "; }
.kennzeichnung dd::after { content: " · "; color: rgba(110,96,83,.5); }
.kennzeichnung dl div:last-child dd::after { content: ""; }

/* ---------- 11. Galerie ---------- */

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: rgba(199,146,66,.18);
  border: 1px solid rgba(199,146,66,.18);
}
.galerie figure { margin: 0; position: relative; overflow: hidden; background: var(--kohl); }
.galerie img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1;
  transition: transform 800ms cubic-bezier(.2,.7,.3,1), opacity var(--uebergang);
  opacity: .88;
}
.galerie figure:hover img { transform: scale(1.06); opacity: 1; }
.galerie figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem 1rem .9rem;
  background: linear-gradient(to top, rgba(18,16,13,.9), transparent);
  font-size: var(--stufe-1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--creme); font-weight: 600;
}
.galerie figure:nth-child(1) { grid-column: span 2; }
.galerie figure:nth-child(1) img { aspect-ratio: 2 / 1; }

/* ---------- 12. Finden ---------- */

.finden {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.karte-block {
  background: var(--kohl-2);
  border: 1px solid rgba(199,146,66,.2);
  padding: clamp(1.6rem, 3vw, 2.5rem);
}
.karte-block h3 {
  font-size: var(--stufe-4); margin-bottom: 1.2rem; font-weight: 500;
  font-variation-settings: "opsz" 48;
}

.zeiten { margin: 0; }
.zeiten div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid rgba(199,146,66,.12);
}
.zeiten div:last-child { border-bottom: 0; }
.zeiten dt { color: var(--creme-dim); font-size: var(--stufe-2); }
.zeiten dd {
  margin: 0; font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: var(--stufe-2);
}
.zeiten div.heute dt, .zeiten div.heute dd { color: var(--messing-hell); }

.anschrift { font-style: normal; line-height: 1.8; margin-bottom: 1.5rem; }
.anschrift strong { display: block; font-size: var(--stufe-3); font-weight: 700; }

.kontakt-liste { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.kontakt-liste li {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem 0;
}
.kontakt-liste svg { width: 1.2rem; height: 1.2rem; color: var(--messing); flex: none; }
.kontakt-liste a { text-decoration: none; font-weight: 600; }
.kontakt-liste a:hover { color: var(--messing-hell); }

.hinweis-klein { font-size: var(--stufe-1); color: var(--creme-dim); line-height: 1.6; }

/* ---------- 13. Fußzeile ---------- */

.fuss {
  background: var(--kohl-2);
  border-top: 1px solid rgba(199,146,66,.2);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}
.fuss__innen {
  display: flex; flex-wrap: wrap; gap: 2rem;
  justify-content: space-between; align-items: flex-start;
}
.fuss__marke { max-width: 22rem; }
.fuss__marke .marke { margin-bottom: .8rem; }
.fuss__marke p { font-size: var(--stufe-2); color: var(--creme-dim); }
.fuss nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.fuss nav a {
  text-decoration: none; font-size: var(--stufe-2); color: var(--creme-dim);
  transition: color var(--uebergang);
}
.fuss nav a:hover { color: var(--messing-hell); }
.fuss__unten {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(199,146,66,.12);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: var(--stufe-1); color: var(--creme-dim);
}

/* Baustein-Markierung für noch fehlende Angaben */
.offen {
  display: inline-block;
  background: rgba(158,43,30,.16);
  border: 1px dashed rgba(158,43,30,.55);
  color: #E0A79E;
  padding: .1em .5em; border-radius: 2px;
  font-size: .9em; font-weight: 600;
}
.abschnitt--leinen .offen { color: var(--glut); background: rgba(158,43,30,.08); }

/* ---------- 14. Ruftaste auf kleinen Geräten ---------- */

.ruftaste {
  position: fixed; z-index: 90;
  left: var(--rand); right: var(--rand); bottom: 1rem;
  display: none;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.85);
  transition: transform var(--uebergang), opacity var(--uebergang);
}
/* Solange der Hero mit seinem eigenen Ruf-Knopf zu sehen ist, tritt die
   Leiste zurück. Ohne Skript bleibt sie einfach dauerhaft sichtbar. */
.ruftaste--zurueck {
  opacity: 0;
  transform: translateY(120%);
  pointer-events: none;
}

/* ---------- 15. Bewegung ---------- */

/* Inhalte sind grundsätzlich sichtbar. Verborgen werden sie nur, wenn das
   Skript die Klasse am <html> gesetzt hat – also nur dann, wenn es sie auch
   wieder einblenden kann. Fällt das Skript aus, bleibt alles lesbar. */
.js-auftritt .auftritt {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms cubic-bezier(.2,.7,.3,1), transform 700ms cubic-bezier(.2,.7,.3,1);
}
.js-auftritt .auftritt.sichtbar { opacity: 1; transform: none; }

@keyframes ruhig-auf {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bild-heran {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}

.hero__bild img { animation: bild-heran 1400ms cubic-bezier(.2,.7,.3,1) both; }
.hero__inhalt > * { animation: ruhig-auf 800ms cubic-bezier(.2,.7,.3,1) both; }
.hero__inhalt > .eyebrow       { animation-delay: 260ms; }
.hero__inhalt > .wortmarke     { animation-delay: 380ms; }
.hero__inhalt > .hero__claim   { animation-delay: 520ms; }
.hero__inhalt > .hero__siegel  { animation-delay: 620ms; }
.hero__inhalt > .hero__aktionen{ animation-delay: 720ms; }
.fakten { animation: ruhig-auf 800ms cubic-bezier(.2,.7,.3,1) 840ms both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js-auftritt .auftritt { opacity: 1; transform: none; }
}

/* ---------- 16. Anpassung an kleine Geräte ---------- */

@media (max-width: 60rem) {
  .finden { grid-template-columns: 1fr; }
  .galerie figure:nth-child(1) { grid-column: span 1; }
  .galerie figure:nth-child(1) img { aspect-ratio: 1 / 1; }
}

@media (max-width: 48rem) {
  .nav-schalter { display: inline-flex; }

  .hauptnav {
    position: fixed; inset: 4.4rem 0 auto 0;
    background: var(--kohl);
    border-bottom: 1px solid rgba(199,146,66,.2);
    max-height: 0; overflow: hidden;
    transition: max-height 380ms cubic-bezier(.2,.7,.3,1);
  }
  .hauptnav.offen { max-height: 24rem; }
  .hauptnav ul {
    flex-direction: column; gap: 0;
    padding: .5rem var(--rand) 1.4rem;
  }
  .hauptnav li { border-bottom: 1px solid rgba(199,146,66,.1); }
  .hauptnav a { display: block; padding: .95rem 0; font-size: var(--stufe-2); }
  .hauptnav a::after { display: none; }

  .kopf .knopf { display: none; }

  .fakten__innen { grid-template-columns: 1fr; }
  .fakten__innen li {
    border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(199,146,66,.14);
    padding-block: .85rem;
  }
  .fakten__innen li:first-child { border-top: 0; }

  .karten-nav { top: 4.4rem; }
  .karte-gruppe { scroll-margin-top: 12rem; }

  .gericht { grid-template-columns: 2.4rem 1fr; }

  /* Titel und Hinweis nebeneinander wird hier zu eng – untereinander setzen. */
  .gruppe__kopf { flex-wrap: wrap; gap: .35rem; }
  .gruppe__hinweis { margin-left: 0; text-align: left; width: 100%; }

  .ruftaste { display: flex; }
  body { padding-bottom: 4.8rem; }
}

@media (max-width: 30rem) {
  .hero__aktionen .knopf { width: 100%; }
}

/* ---------- 17. Druck ---------- */

@media print {
  .kopf, .karten-nav, .karten-suche, .ruftaste, .galerie, .gitter-linie, .hero__schleier { display: none !important; }
  body { background: #fff; color: #000; }
  .abschnitt { padding-block: 1rem; }
  .karte-gruppe[hidden] { display: block !important; }
}

/* ---------- 18. Rechtstexte ---------- */

.rechtstext {
  max-width: var(--breite-eng);
  margin-inline: auto;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.rechtstext h1 {
  font-size: var(--stufe-5); margin-bottom: 2rem; font-weight: 500;
}
.rechtstext h2 {
  font-size: var(--stufe-4); margin: 2.6rem 0 .8rem; font-weight: 500;
  font-variation-settings: "opsz" 48;
}
.rechtstext h3 {
  font-size: var(--stufe-3); margin: 1.8rem 0 .5rem; font-weight: 600;
  font-family: var(--schrift-text); letter-spacing: .04em;
}
.rechtstext p, .rechtstext li { color: var(--creme-dim); font-size: var(--stufe-2); line-height: 1.75; }
.rechtstext strong { color: var(--creme); }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .4rem; }
.rechtstext a { color: var(--messing-hell); }

.entwurfshinweis {
  border: 1px dashed rgba(158,43,30,.6);
  background: rgba(158,43,30,.12);
  padding: 1.2rem 1.4rem;
  margin-bottom: 2.5rem;
}
.entwurfshinweis p { color: #E8B5AC; margin: 0; font-size: var(--stufe-2); }
.entwurfshinweis strong { color: #F3D3CC; }

.zurueck {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--messing);
  font-size: var(--stufe-2); font-weight: 600;
  margin-bottom: 2rem;
}
.zurueck:hover { color: var(--messing-hell); }