/* ==========================================================================
   NAMI – Sushi & Asia Kitchen, Oldenburg
   Gold-auf-Dunkel-Design (nach dem Kunden-Entwurf), echte Daten & Speisen.
   Akzent: Gold. Display-Serif: Marcellus. Body: Inter.
   ========================================================================== */

/* ---------- Fonts (lokal, DSGVO-konform) ---------- */
@font-face {
  font-family: "Marcellus";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/marcellus-v14-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-v20-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-v20-latin_latin-ext-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/inter-v20-latin_latin-ext-700.woff2") format("woff2");
}

/* ---------- Design-Tokens ---------- */
:root {
  /* Grundfarbe ist Schwarz (wie in der Vorlage) */
  --bg: #000000;
  --bg-raise: #121110;
  --bg-deep: #000000;
  --line: #2b2519;
  --ink: #f3ecdd;
  --ink-muted: #b4a88f;

  --gold: #c8a24c;
  --gold-soft: #e3ca8b;
  --gold-deep: #a9852f;
  --gold-dim: rgba(200, 162, 76, 0.32);

  /* Helle Sektion (Beliebte Gerichte / Mittagsangebot) */
  --cream: #f6efe1;
  --cream-2: #efe6d3;
  --cream-ink: #2a2114;
  --cream-muted: #6e6350;
  --cream-line: #e2d6bd;

  --font-display: "Marcellus", "Georgia", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-section: clamp(4rem, 8vw, 7rem);
  --radius: 10px;
  --radius-sm: 6px;
  --measure: 62ch;
  --header-h: 4.75rem;
  /* Höhe des Aktionsbands ganz oben. Steht auf 0, solange keines da ist –
     main.js setzt den Wert erst, wenn das Band wirklich eingehängt wurde.
     Dadurch hat die Aktion im ausgeschalteten Zustand keinerlei Wirkung
     auf das Layout. */
  --promo-h: 0rem;
}

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

html {
  font-size: 106.25%;               /* 17px Grundgröße */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--promo-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.14;
  margin: 0 0 0.5em;
  letter-spacing: 0.01em;
  /* nur umbrechen, wenn ein Wort wirklich nicht passt (body erlaubt sonst "anywhere") */
  overflow-wrap: break-word;
}

p { margin: 0 0 1em; max-width: var(--measure); }

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

.container { width: min(100% - 2.5rem, 75rem); margin-inline: auto; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--gold); color: #1a1409; padding: 0.6rem 1rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.85rem 1.6rem; min-height: 48px;
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.9rem; letter-spacing: 0.06em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  white-space: nowrap;
}
.btn svg { flex: none; }
.btn--primary { background: var(--gold); color: #1a1409; border-color: var(--gold); }
.btn--primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #140f07; transform: translateY(-1px); }
.btn--outline { color: var(--gold-soft); border-color: var(--gold-dim); background: transparent; }
.btn--outline:hover { border-color: var(--gold); color: var(--gold-soft); background: rgba(200,162,76,0.08); }
.btn--dark { background: rgba(12,10,6,0.82); color: var(--ink); border-color: rgba(227,202,139,0.28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.btn--dark:hover { background: rgba(12,10,6,0.95); border-color: var(--gold); color: var(--gold-soft); transform: translateY(-1px); }
.btn--ghost-dark { color: var(--cream-ink); border-color: var(--cream-line); background: transparent; }
.btn--ghost-dark:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.btn--lg { padding: 1rem 2rem; font-size: 1rem; min-height: 54px; }
.btn--sm { padding: 0.6rem 1.15rem; font-size: 0.82rem; min-height: 44px; }

/* ---------- Kicker / Section-Header ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 0.9rem;
}
.kicker::before { content: ""; width: 2rem; height: 1px; background: var(--gold-dim); }
.kicker.center { justify-content: center; }
.kicker.center::after { content: ""; width: 2rem; height: 1px; background: var(--gold-dim); }

.section { padding-block: var(--space-section); position: relative; }
.section--light { background: var(--cream); color: var(--cream-ink); }
.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin: 0; }
.section--light .section-head h2 { color: var(--cream-ink); }

/* ---------- Header (transparent über dem Hero, dunkel beim Scrollen) ---------- */
.site-header {
  /* Rückt nach unten, sobald das Aktionsband oben steht. Ohne Band ist
     --promo-h gleich 0 und hier ändert sich nichts. */
  position: fixed; inset: var(--promo-h) 0 auto; z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, background-color 0.25s, backdrop-filter 0.25s;
}
.site-header.is-scrolled {
  background: rgba(16, 13, 8, 0.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.header-bar { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }

/* ---------- Aktionsband ganz oben ----------
   Wird von main.js eingehängt, sobald aktion.php eine laufende Aktion
   meldet, und steht dann fest über dem Kopf der Seite. Der Kopf liegt
   fest (position: fixed) – ein mitscrollendes Band würde darunter
   verschwinden, deshalb liegt auch dieses fest. */
.promo-bar {
  position: fixed; inset: 0 0 auto; z-index: 61;
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem 0.9rem; flex-wrap: wrap;
  min-height: var(--promo-h); padding: 0.35rem 1rem;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep));
  color: #1a1409; text-decoration: none;
  font-size: 0.86rem; line-height: 1.3; text-align: center;
}
.promo-bar:hover { color: #140f07; }
.promo-bar:focus-visible { outline: 2px solid #1a1409; outline-offset: -4px; }
.promo-bar b { font-weight: 700; }
.promo-bar .promo-bar-cta {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-weight: 700; text-decoration: underline; text-underline-offset: 2px;
}
/* Der Balken wiederholt nur, was danebensteht – deshalb aria-hidden im HTML. */
.promo-bar-bar {
  flex: none; width: 5.5rem; height: 5px; border-radius: 999px;
  background: rgba(26, 20, 9, 0.22); overflow: hidden;
}
.promo-bar-bar > span { display: block; height: 100%; border-radius: inherit; background: #1a1409; }

.promo-bar-short { display: none; }

@media (max-width: 620px) {
  /* Auf dem Handy zählt die Zeile, nicht die Verzierung: Balken weg,
     kurzer Satz statt langem, damit das Band einzeilig bleibt. */
  .promo-bar { font-size: 0.8rem; gap: 0.35rem 0.6rem; padding: 0.3rem 0.8rem; }
  .promo-bar-bar,
  .promo-bar-long { display: none; }
  .promo-bar-short { display: inline; }
}

/* ---------- Aktionsbanner unter dem Hero ----------

   Ein durchgehendes Band, nicht eine Karte im Raster: Die Karte schwebte
   vorher auf schwarzem Grund zwischen schwarzem Hero und cremefarbener
   Sektion – oben war überhaupt keine Kante zu sehen, das Banner fing
   einfach irgendwo an. Jetzt grenzen zwei Goldlinien es oben und unten
   sauber ab, und das Foto läuft rechts aus dem Bild.

   Dunkel und nicht golden, obwohl Gold die Aktionsfarbe ist: Das Foto ist
   eine Platte auf schwarzem Lack. Auf goldenem Grund läge sie als dunkler
   Kasten auf; auf dunklem Grund verschmilzt sie mit dem Band. Golden sind
   dafür die Kanten, das Plättchen, die Überschrift und der Knopf. */
.promo-strip {
  position: relative; overflow: hidden;
  padding-block: clamp(1.5rem, 3.5vw, 2.3rem);
  background:
    radial-gradient(46% 150% at 12% 50%, rgba(200, 162, 76, 0.20), transparent 72%),
    linear-gradient(90deg, #16120b 0%, #1b1509 48%, #0d0b06 100%);
}
/* [hidden] ist eine Attributregel des Browsers und verliert gegen jede
   Klassenregel mit display. Ohne diese Zeile stünde das Banner auch dann
   da, wenn gar keine Aktion läuft. */
.promo-strip[hidden] { display: none; }

/* Die Kanten. Als Pseudoelemente statt border, damit sie einen Verlauf
   tragen können: in der Mitte kräftig, an den Seiten auslaufend – eine
   harte Linie über die ganze Breite wirkt auf einer dunklen Seite wie ein
   Trennstrich im Textverarbeitungsprogramm. */
.promo-strip::before,
.promo-strip::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 18%, var(--gold) 50%, var(--gold-deep) 82%, transparent);
}
.promo-strip::before { top: 0; }
.promo-strip::after  { bottom: 0; }

/* Das Einblenden ist Zierrat und darf nie darüber entscheiden, ob man das
   Banner überhaupt sieht. Deshalb eine Animation ohne fill-mode: Vorher und
   nachher gilt der normale, sichtbare Zustand. Mit `opacity: 0` als
   Grundzustand wäre das Banner unsichtbar, sobald die Animation nicht
   durchläuft – und niemand würde es je bemerken. */
.promo-strip.is-on { animation: promo-ein 0.45s ease; }
@keyframes promo-ein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-strip.is-on { animation: none; }
}

/* Das Foto läuft rechts aus dem Band heraus und wird nach links
   ausgeblendet, damit es keine Kante gegen den Grund bildet. Es liegt
   hinter dem Text (z-index 0 gegen 1) und trägt aria-hidden – es
   wiederholt nichts, was im Text steht.

   **Wo das Bild steht, entscheidet, ob es geladen wird.** Zweimal
   nachgemessen, zweimal daneben gelegen:

     1. `<img loading="lazy">` im Abschnitt – Chrome holt es auch dann, wenn
        der Abschnitt `hidden` ist. 55 KB auf jedem Besuch, ohne Aktion.
     2. CSS-Hintergrund am selben Kasten – ebenfalls geholt. Die Regel
        „display:none lädt keine Hintergründe" gilt für das Element selbst,
        nicht für Nachfahren eines ausgeblendeten Abschnitts.

   Was wirklich hilft: die Regel an `.is-on` hängen. Solange die Klasse
   fehlt, gibt es keine Deklaration – und ohne Deklaration nichts zu holen.
   Gemessen: 0 KB bei ausgeschalteter Aktion.

   image-set() liefert WebP, wo es geht, und JPG als Rückfall – dieselbe
   Paarung wie überall sonst auf der Seite. Die einfache url()-Zeile davor
   ist der Rückfall für Browser ohne image-set(). */
.promo-strip-bild {
  position: absolute; inset: 0 0 0 auto; z-index: 0;
  width: min(42%, 34rem);
  background-size: cover; background-position: 46% 50%;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 58%);
          mask-image: linear-gradient(90deg, transparent, #000 58%);
}
.promo-strip.is-on .promo-strip-bild {
  background-image: url("../img/speisen/bento-lissabon.jpg");
  background-image: -webkit-image-set(
    url("../img/speisen/bento-lissabon.webp") type("image/webp"),
    url("../img/speisen/bento-lissabon.jpg")  type("image/jpeg"));
  background-image: image-set(
    url("../img/speisen/bento-lissabon.webp") type("image/webp"),
    url("../img/speisen/bento-lissabon.jpg")  type("image/jpeg"));
}
/* Unter 900 px bleibt neben Text und Knopf keine Breite übrig – dort ist
   das Foto nur noch Unruhe hinter der Schrift. */
@media (max-width: 899px) { .promo-strip-bild { display: none; } }

.promo-strip-in {
  position: relative; z-index: 1;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(0.9rem, 2.5vw, 1.7rem);
}
/* Rechts Platz lassen, sobald das Foto da ist: Der Ausblender macht dessen
   linke Hälfte durchsichtig, die rechte ist deckend. Ohne diese Sperre lag
   der Knopf halb auf der Sushi-Platte – lesbar, aber unsauber. Der Wert
   folgt der Fotobreite (42 %, gedeckelt bei 34rem), nicht einer geratenen
   Zahl. */
@media (min-width: 900px) {
  .promo-strip-in { padding-right: 22%; }
}

/* Das Plättchen trägt die Zahl und ist der Blickfang.

   Feste Breite plus aspect-ratio statt min-width/min-height: Mit
   Mindestmaßen zog „−10 %" den Kreis in die Breite – gemessen 101 × 88 px,
   also ein Ei. Jetzt bleibt es rund, und „−5 %" ist so groß wie „−25 %";
   die Zeile springt nicht, wenn der Kunde den Satz ändert. */
.promo-strip-badge {
  flex: none; display: grid; place-items: center;
  width: clamp(4.2rem, 7.5vw, 5.6rem); aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-soft), var(--gold) 45%, var(--gold-deep));
  color: #1a1409;
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.3vw, 1.55rem); line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(200, 162, 76, 0.45);
}
/* Ein ruhiger Puls alle vier Sekunden – gerade genug, um das Auge zu
   holen, ohne dass beim Lesen etwas zappelt. */
@media (prefers-reduced-motion: no-preference) {
  .promo-strip.is-on .promo-strip-badge { animation: promo-puls 4s ease-out 1.2s infinite; }
}
@keyframes promo-puls {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(200, 162, 76, 0.45); }
  20%           { box-shadow: 0 0 0 12px rgba(200, 162, 76, 0); }
}

/* Die Zeile wächst nur bis 38 Zeichen. Ohne Deckel schob sie den Knopf
   an den rechten Rand – also mitten auf die Sushi-Platte. So stehen
   Plättchen, Zeile und Knopf als Gruppe links, und rechts bleibt die
   Fläche frei, in die das Foto hineinläuft. */
.promo-strip-text { flex: 1 1 auto; min-width: 0; max-width: 38ch; }
.promo-strip-h {
  margin: 0 0 0.15em;
  font-size: clamp(1.45rem, 3.2vw, 2.1rem); line-height: 1.05;
  color: var(--gold-soft);
}
.promo-strip-p {
  margin: 0; max-width: 34ch;
  font-size: 0.95rem; line-height: 1.45; color: var(--ink);
}
/* Das Kleingedruckte. Dass es kleiner und stiller ist, ist kein Versteck,
   sondern Rangfolge: Der Satz gilt, muss aber nicht als Erstes gelesen
   werden. Unter 4.5:1 geht die Deckkraft nicht. */
.promo-strip-fine {
  margin: 0.4rem 0 0; max-width: 40ch;
  font-size: 0.8rem; line-height: 1.4; color: var(--ink-muted);
}
.promo-strip-cta { flex: none; }

/* Auf dem Handy bleiben Plättchen und Zeile **nebeneinander**, nur der Knopf
   rutscht auf eine eigene Zeile und wird über die ganze Breite treffbar.

   Alles zu stapeln war der erste Entwurf und kostete gemessene 524 px – mehr
   als die halbe Höhe eines iPhone. So sind es rund 300 px, und das Banner
   bleibt ein Banner statt ein eigener Abschnitt. */
@media (max-width: 640px) {
  .promo-strip-in { gap: 0.75rem 0.9rem; }
  .promo-strip-text { flex: 1 1 8rem; }
  .promo-strip-h { font-size: 1.3rem; }
  .promo-strip-p { font-size: 0.88rem; }
  .promo-strip-fine { font-size: 0.76rem; margin-top: 0.3rem; }
  .promo-strip-cta { flex: 1 1 100%; width: 100%; }
}

.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; flex: none; }
.brand img { width: 60px; height: 60px; }
.brand-name { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.16em; line-height: 1; color: var(--ink); }
.brand-sub {
  display: block; font-family: var(--font-body); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-top: 0.35em; white-space: nowrap;
}

.main-nav ul { list-style: none; display: flex; gap: 0.1rem; margin: 0; padding: 0; }
.main-nav a {
  display: inline-block; padding: 0.5rem 0.7rem; text-decoration: none;
  font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); white-space: nowrap; position: relative; transition: color 0.2s;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.25rem; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.2s;
}
.main-nav a:hover { color: var(--ink); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: var(--gold-soft); }

/* Telefonnummer im Header: feiner Goldrahmen, heller Text, goldenes Icon */
.header-phone { white-space: nowrap; color: var(--ink); border-color: rgba(200,162,76,0.55); background: transparent; }
.header-phone svg { color: var(--gold); }
.header-phone:hover { border-color: var(--gold); background: rgba(200,162,76,0.10); color: var(--ink); }

/* Mobile-Nav */
.nav-check { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); transition: transform 0.25s, opacity 0.25s; }

@media (max-width: 1200px) {
  .nav-toggle { display: flex; }
  .header-phone .btn-label { display: none; }
  .header-phone { padding: 0.85rem; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-raise);
    border-bottom: 1px solid var(--line); display: none; box-shadow: 0 16px 34px rgba(0,0,0,0.5);
  }
  .main-nav ul { flex-direction: column; padding: 0.75rem 1.25rem 1.25rem; gap: 0; }
  .main-nav a { display: block; padding: 0.95rem 0.5rem; font-size: 0.95rem; border-bottom: 1px solid var(--line); }
  .main-nav a::after { display: none; }
  .nav-check:checked ~ .main-nav { display: block; }
  .nav-check:checked ~ .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-check:checked ~ .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-check:checked ~ .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
.nav-check:focus-visible ~ .nav-toggle { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Hero (Full-Bleed nach Kunden-Entwurf) ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: min(92vh, 820px);
  display: flex; align-items: center;
  padding-top: calc(var(--header-h) + var(--promo-h));
  background: #000;                 /* Schwarz wie in der Vorlage */
}
/* Foto füllt den Hero und blutet bis an die Kanten (auch unter den Header) */
.hero-bg { position: absolute; inset: 0; z-index: 0; margin: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
/* Verlauf in Schwarz: links satt (Textbereich), nach rechts frei – Schrift liegt leicht überm Bild */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.70) 0, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.65) 100%),
    linear-gradient(95deg, #000 8%, rgba(0,0,0,0.92) 34%, rgba(0,0,0,0.5) 52%, rgba(0,0,0,0.08) 68%, transparent 82%);
}
.hero .container { position: relative; z-index: 2; }
.hero-copy { max-width: 34rem; padding-block: clamp(2rem, 6vw, 3.5rem); }

.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.1rem); margin-bottom: 0.34em; color: var(--ink); text-shadow: 0 2px 24px rgba(0,0,0,0.45); }
.hero h1 em { font-style: normal; color: var(--gold-soft); }
.hero .kicker { color: var(--gold-soft); }
/* Goldener Trenner unter der Überschrift (wie Vorlage) */
.hero-rule { display: block; width: 66px; height: 3px; margin: 0.2rem 0 1.5rem; border-radius: 2px; background: linear-gradient(90deg, var(--gold-soft), var(--gold-deep)); box-shadow: 0 1px 6px rgba(0,0,0,0.4); }
.hero-lead { color: #e7ddca; font-size: clamp(1.02rem, 1.5vw, 1.16rem); margin-bottom: 1.9rem; text-shadow: 0 1px 14px rgba(0,0,0,0.5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2rem; }

.hero-trust { display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; padding: 1.4rem 0 0; margin: 0; border-top: 1px solid rgba(227,202,139,0.18); }
.hero-trust li { list-style: none; display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: #d8ccb4; }
.hero-trust svg { flex: none; color: var(--gold-soft); }

/* Desktop: alle vier Merkmale in EINER Zeile – etwas größer, bündig zur linken Textkante */
@media (min-width: 760px) {
  .hero-trust { flex-wrap: nowrap; width: max-content; max-width: min(54rem, 94vw); gap: 1rem 1.8rem; padding: 1.6rem 0 0; }
  .hero-trust li { white-space: nowrap; font-size: 0.98rem; }
  .hero-trust svg { width: 20px; height: 20px; }
}

/* Auf schmalen Screens Bild etwas mehr abdunkeln, Text bleibt lesbar */
@media (max-width: 760px) {
  .hero { min-height: 82vh; }
  .hero-bg img { object-position: 58% center; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.78) 0, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0.88) 100%),
      linear-gradient(95deg, rgba(0,0,0,0.72), rgba(0,0,0,0.4));
  }
}

/* Social-Schiene (Gold-Pille am rechten Rand, wie im Entwurf) */
.social-rail {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 40;
  display: flex; flex-direction: column; gap: 1px; overflow: hidden;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm); box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.social-rail a {
  display: grid; place-items: center; width: 46px; height: 46px;
  background: var(--gold); color: #17110a;
  transition: background-color 0.2s, color 0.2s;
}
.social-rail a + a { border-top: 1px solid rgba(23,17,10,0.28); }
.social-rail a:hover { background: var(--gold-soft); color: #140f07; }
@media (max-width: 720px) { .social-rail { display: none; } }

/* ---------- Beliebte Gerichte (helle Sektion) ---------- */
/* Dreispaltiges Raster: Überschrift exakt in der Containermitte,
   der Speisekarten-Link rechts verschiebt sie nicht mehr. */
.favorites .section-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem; text-align: center; }
.favorites .head-left { grid-column: 2; text-align: center; }
.favorites .fav-more { grid-column: 3; justify-self: end; }
@media (max-width: 820px) {
  .favorites .section-head { grid-template-columns: 1fr; }
  .favorites .head-left, .favorites .fav-more { grid-column: 1; justify-self: center; }
}
.fav-more { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.fav-more:hover { color: var(--cream-ink); }

/* Alle Gerichte in einer Reihe (wie Vorlage) – kompakte Karten */
.dish-cards { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .dish-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .dish-cards { grid-template-columns: repeat(6, 1fr); gap: 0.9rem; } }
.dish-card {
  background: #fff; border: 1px solid var(--cream-line); border-radius: var(--radius-sm); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 8px 20px rgba(60,45,20,0.06);
  transition: transform 0.25s, box-shadow 0.25s;
}
.dish-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(60,45,20,0.14); }
.dish-media { position: relative; }
.dish-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dish-badge {
  position: absolute; top: 0.5rem; left: 0.5rem; display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--gold); color: #1a1409; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.26rem 0.5rem; border-radius: 999px;
}
.dish-info { padding: 0.8rem 0.75rem 0.95rem; display: flex; flex-direction: column; gap: 0.28rem; flex: 1; text-align: center; }
.dish-name { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.2; color: var(--cream-ink); margin: 0; }
.dish-desc { font-size: 0.74rem; line-height: 1.4; color: var(--cream-muted); margin: 0; }
.dish-price { margin-top: auto; padding-top: 0.5rem; font-family: var(--font-display); font-size: 1.12rem; color: var(--gold-deep); }
.dish-price .unit { font-size: 0.7rem; color: var(--cream-muted); }

/* ---------- Google Bewertungen (schwarz) ---------- */
.reviews { background: #000; border-block: 1px solid rgba(200,162,76,0.18); }
.reviews-grid { display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); align-items: center; }
@media (min-width: 900px) {
  .reviews-grid { grid-template-columns: 0.72fr 2.28fr; }
  /* senkrechte Linie zwischen Wertung und Zitaten (mittig im Grid-Abstand) */
  .reviews-rating { position: relative; }
  .reviews-rating::after {
    content: ""; position: absolute; top: 50%; transform: translateY(-50%);
    right: calc(clamp(1.6rem, 4vw, 2.6rem) / -2); width: 1px; height: 76%;
    background: linear-gradient(180deg, transparent, rgba(200,162,76,0.35) 22%, rgba(200,162,76,0.35) 78%, transparent);
  }
}
.reviews-rating { text-align: center; }
.g-brand { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; margin: 0 0 0.6rem; max-width: none; }
.g-logo { font-family: var(--font-body); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; }
.g-logo span:nth-child(1) { color: #4285f4; }
.g-logo span:nth-child(2) { color: #ea4335; }
.g-logo span:nth-child(3) { color: #fbbc05; }
.g-logo span:nth-child(4) { color: #4285f4; }
.g-logo span:nth-child(5) { color: #34a853; }
.g-logo span:nth-child(6) { color: #ea4335; }
.g-label { font-size: 1.05rem; color: var(--ink); }
.score-row { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 0; max-width: none; }
.reviews-rating .score { font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 3.8rem); line-height: 1; color: var(--ink); }
.rating-stars { display: inline-block; position: relative; font-size: 1.5rem; line-height: 1; }
.stars-bg { color: #3a3222; letter-spacing: 0.08em; }
/* Füllbreite = Bewertung / 5 (4,8 → 96 %) */
.stars-fg { position: absolute; inset: 0; width: 96%; overflow: hidden; color: var(--gold); letter-spacing: 0.08em; white-space: nowrap; }
.reviews-rating .count { font-size: 0.92rem; color: var(--ink-muted); margin: 0.7rem 0 0; max-width: none; }

.reviews-quotes { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.review-quote {
  position: relative; border: 1px solid rgba(200,162,76,0.22); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #15130f, #0c0b09);
  padding: 2.4rem 1.4rem 1.2rem; display: flex; flex-direction: column; gap: 0.6rem;
}
.review-quote .quote-mark {
  position: absolute; top: 0.5rem; left: 1.2rem; font-family: var(--font-display);
  font-size: 3.2rem; line-height: 1; color: var(--gold); opacity: 0.85;
}
.review-quote .qstars { color: var(--gold); letter-spacing: 0.14em; font-size: 0.95rem; margin: 0; }
.review-quote blockquote { margin: 0; font-size: 0.92rem; color: #ddd3c1; line-height: 1.6; }
.review-quote figcaption { color: var(--ink-muted); font-size: 0.84rem; margin-top: auto; padding-top: 0.3rem; }

/* ---------- Trio-Band: Über Nami / Mittagsangebot / Ambiente (randlos) ---------- */
.trio-band {
  display: grid; grid-template-columns: 1fr; background: #000;
  border-block: 1px solid rgba(200,162,76,0.30);
}
/* senkrechte Trennlinien zwischen den drei Containern */
@media (min-width: 900px) { .trio-band > * + * { border-left: 1px solid rgba(200,162,76,0.30); } }
@media (max-width: 899px) { .trio-band > * + * { border-top: 1px solid rgba(200,162,76,0.30); } }
@media (min-width: 900px) { .trio-band { grid-template-columns: 1fr 1.4fr 1fr; } }

.trio-panel {
  position: relative; overflow: hidden; min-height: 22rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.6rem, 2.6vw, 2.4rem); color: var(--ink);
}
.trio-panel picture { position: absolute; inset: 0; z-index: 0; }
.trio-panel img { width: 100%; height: 100%; object-fit: cover; }
.trio-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.88)); }
.trio-inner { position: relative; z-index: 2; }
.trio-panel h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); margin-bottom: 0.5rem; }
.trio-panel h3::after {
  content: ""; display: block; width: 54px; height: 2px; margin-top: 0.75rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold-deep));
}
.trio-panel p { color: #ded4c1; font-size: 0.92rem; margin-bottom: 1.2rem; }

/* Mittagsangebot: helle Karte mit Bild rechts */
.trio-lunch { background: var(--cream); color: var(--cream-ink); display: grid; grid-template-columns: 1fr; }
@media (min-width: 560px) { .trio-lunch { grid-template-columns: 1.2fr 0.8fr; } }
.lunch-copy { padding: clamp(1.6rem, 2.6vw, 2.4rem); display: flex; flex-direction: column; align-items: flex-start; }
.trio-lunch .lunch-icon {
  width: 46px; height: 46px; padding: 9px; color: var(--gold-deep);
  border: 1px solid rgba(169,133,47,0.55); border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.trio-lunch h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); color: var(--cream-ink); margin-bottom: 0.6rem; }
.trio-lunch .lunch-days { font-weight: 600; color: var(--cream-ink); font-size: 0.92rem; margin: 0; }
.trio-lunch .lunch-hours { color: var(--cream-ink); font-size: 0.92rem; margin: 0 0 0.8rem; }
.trio-lunch .lunch-text { color: var(--cream-muted); font-size: 0.88rem; margin-bottom: 0.8rem; }
.trio-lunch .lunch-price { font-family: var(--font-display); font-size: 1.45rem; color: var(--cream-ink); margin: 0 0 1.1rem; }
.trio-lunch .lunch-price .placeholder-inline { font-size: 0.9rem; color: var(--gold-deep); }
/* Bild liegt IM Mittagsangebot-Container – ringsum bleibt Creme sichtbar */
.lunch-figure { display: flex; min-height: 14rem; padding: 0 clamp(1.6rem, 2.6vw, 2.4rem) clamp(1.6rem, 2.6vw, 2.4rem); }
@media (min-width: 560px) {
  .lunch-figure { padding: clamp(1.6rem, 2.6vw, 2.4rem) clamp(1.6rem, 2.6vw, 2.4rem) clamp(1.6rem, 2.6vw, 2.4rem) 0; }
}
.lunch-figure picture { flex: 1; display: block; min-height: 0; }
.lunch-figure img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }

/* ---------- Reservierung (Formular) ---------- */
.reserve {
  border-block: 1px solid var(--line);
  background: radial-gradient(70% 90% at 12% 50%, rgba(200,162,76,0.10), transparent 65%), #000;
}
.reserve-grid { display: grid; gap: clamp(1.6rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 980px) { .reserve-grid { grid-template-columns: 0.8fr 2.2fr; } }
.reserve h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 0.2em; }
.reserve-sub { color: var(--ink-muted); margin-bottom: 0.6rem; }
.reserve-phone { color: var(--ink-muted); font-size: 0.92rem; margin: 0; }
.reserve-phone a { color: var(--gold-soft); text-decoration: none; white-space: nowrap; }
.reserve-phone a:hover { color: var(--gold); }

/* Gleichmäßiges Raster statt fester Spaltenbreiten. Seit die Bemerkung
   dazugekommen ist, füllen die Felder zwei saubere Reihen:
   Name+Personen+Datum+Uhrzeit, darunter E-Mail+Bemerkung+Knopf.
   Auf dem Handy bleiben Datum und Uhrzeit als Paar nebeneinander. */
.reserve-form { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, 1fr); align-items: end; }
.rf-field--name, .rf-field--persons,
.rf-field--mail, .rf-field--wide { grid-column: span 2; }
.rf-submit { grid-column: 1 / -1; }

@media (min-width: 700px) {
  /* Vier Spalten, drei volle Reihen - so steht kein Feld allein:
     Name+Personen, dann Datum+Uhrzeit+E-Mail, dann Bemerkung+Knopf.
     Vorher rutschte die Uhrzeit als einzelnes Feld in eine eigene Reihe. */
  .reserve-form { grid-template-columns: repeat(4, 1fr); }
  .rf-field--name { grid-column: span 3; }
  .rf-field--persons { grid-column: span 1; }
  .rf-field--mail { grid-column: span 2; }
  .rf-field--wide { grid-column: span 3; }
  .rf-submit { grid-column: span 1; }
}
@media (min-width: 1200px) {
  /* Fuenf Spalten, zwei volle Reihen: Name+Personen+Datum+Uhrzeit,
     darunter E-Mail+Bemerkung+Knopf. Der Name geht hier wieder auf zwei
     Spalten zurueck - mit drei bliebe fuer die Uhrzeit keine mehr. */
  .reserve-form { grid-template-columns: repeat(5, 1fr); }
  .rf-field--name { grid-column: span 2; }
  .rf-field--mail, .rf-field--wide { grid-column: span 2; }
}
.rf-field { margin: 0; max-width: none; display: flex; flex-direction: column; gap: 0.35rem; }
.rf-field label { white-space: nowrap; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.rf-opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.8; }
.rf-field input,
.rf-field textarea {
  width: 100%; padding: 0.7rem 0.8rem; min-height: 48px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #0d0c0a; color: var(--ink); font: inherit; font-size: 0.95rem;
}
/* Gleiche Höhe wie die Eingabefelder, damit in einer Reihe alle
   Beschriftungen auf einer Linie stehen. Wer mehr Platz braucht, zieht
   das Feld an der Ecke größer. */
.rf-field textarea { resize: vertical; height: 48px; min-height: 48px; line-height: 1.35; }
.rf-field input::placeholder,
.rf-field textarea::placeholder { color: #7d735f; }
.rf-field input:focus-visible,
.rf-field textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
/* Die Spaltenbelegung steht weiter oben beim Raster – hier nur das Aussehen. */
.rf-submit { margin: 0; max-width: none; }
.rf-submit .btn { width: 100%; }
.reserve-note { grid-column: 1 / -1; font-size: 0.8rem; color: var(--ink-muted); margin: 0.2rem 0 0; max-width: 70ch; }
.reserve-note a { color: var(--gold-soft); }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-deep); border-top: 1px solid var(--line); padding-block: clamp(2.6rem, 5vw, 3.6rem) 1.5rem; font-size: 0.92rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) {
  /* Kontakt-Spalte breiter: die E-Mail-Adresse soll in eine Zeile passen */
  .footer-grid { grid-template-columns: 0.9fr 1.25fr 1.2fr 1.2fr 0.72fr; gap: 1.3rem; }
  /* senkrechte Trennlinien zwischen den Footer-Spalten (wie Vorlage) */
  .footer-grid > * + * { border-left: 1px solid rgba(200,162,76,0.22); padding-left: 1.3rem; }
}

/* Anfahrt-Spalte */
.footer-address { color: var(--ink); line-height: 1.65; margin-bottom: 0.7rem; }
.footer-parking { color: var(--ink-muted); font-size: 0.86rem; margin-bottom: 1.1rem; max-width: 28ch; }
.footer-brand img { width: 96px; height: auto; margin-bottom: 1.1rem; }
.footer-brand p { color: var(--ink-muted); max-width: 32ch; }
.site-footer h4 { font-family: var(--font-body); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-list a { text-decoration: none; color: var(--ink); }
.footer-list a:hover { color: var(--gold-soft); }
.footer-contact { display: grid; gap: 0.6rem; }
.footer-contact a, .footer-contact span { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ink); text-decoration: none; }
.footer-contact svg { flex: none; color: var(--gold); margin-top: 0.15rem; }
.footer-contact a:hover { color: var(--gold-soft); }
/* E-Mail-Adresse: bricht nur an der vorgesehenen Stelle (<wbr> nach dem @),
   nie mitten in der Domain – trotz overflow-wrap:anywhere im Body. */
.footer-contact a { overflow-wrap: normal; }
.footer-mail { font-size: 0.86rem; }
.footer-hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.88rem; }
.footer-hours li { display: flex; justify-content: space-between; gap: 0.8rem; color: var(--ink-muted); }
/* Wochentag und Uhrzeit nie mitten im Wort umbrechen */
.footer-hours li b, .footer-hours li span { white-space: nowrap; }
.footer-hours li b { color: var(--ink); font-weight: 600; }
.footer-hours li.closed span { color: var(--gold-soft); }
.footer-social { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
.footer-social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-muted); transition: color 0.2s, border-color 0.2s; }
.footer-social a:hover { color: var(--gold-soft); border-color: var(--gold-dim); }
.footer-map { display: block; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; text-decoration: none; }
.footer-map .map-img { width: 100%; height: 110px; object-fit: cover; filter: saturate(0.85) brightness(0.85); }
.footer-map .map-cta { display: block; padding: 0.6rem 0.8rem; font-size: 0.8rem; color: var(--gold-soft); background: var(--bg-raise); }
.footer-meta { border-top: 1px solid var(--line); margin-top: 2.2rem; padding-top: 1.3rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; justify-content: space-between; color: var(--ink-muted); font-size: 0.84rem; }
.footer-meta a { color: var(--ink-muted); }
.footer-meta a:hover { color: var(--gold-soft); }
address { font-style: normal; }

/* ---------- Bestellknopf, läuft unten mit (nur Startseite) ----------

   Wer durch Gerichte, Bewertungen und Mittagsangebot scrollt, soll nicht
   erst zurück nach oben müssen, um zu bestellen.

   Damit er beim Lesen nicht stört:
   - Er erscheint erst, wenn der Bestellknopf im Hero aus dem Bild ist, und
     weicht, solange der Knopf im Rabatt-Banner zu sehen ist. Zwei gleiche
     Knöpfe auf einem Bildschirm sind nur Lärm. (Steuerung: js/main.js)
   - Solange ein Formularfeld ausgefüllt wird, weicht er. Auf dem Handy
     stünde er sonst direkt über der Tastatur, vor dem Feld.
   - Er blinkt und pulsiert nicht: einmal hereingleiten, dann Ruhe.
   - Die Fußzeile bekommt unten Luft, damit Impressum und Datenschutz am
     Seitenende nicht unter ihm liegen bleiben.

   Ab 721 px ein einzelner Knopf unten rechts – dort steht kein Text.
   Auf dem Handy eine angedockte Leiste über die ganze Breite: Ein
   schwebender Knopf schnitte Textzeilen in der Mitte ab und ließe sie links
   und rechts vorbeischauen. Die Leiste ist eine saubere Kante wie der
   Seitenkopf oben und sieht aus wie der Warenkorb auf der Bestellseite.

   Unter dem Seitenkopf (60) und seinem Menü, unter Pop-up und
   Jobs-Fenster (120). */
.order-dock {
  position: fixed; z-index: 50;
  right: clamp(1rem, 2.4vw, 1.75rem); bottom: clamp(1rem, 2.4vw, 1.75rem);
  display: block; text-decoration: none; border-radius: var(--radius-sm);
  opacity: 0; visibility: hidden; transform: translateY(1.25rem);
  /* Beim Ausblenden wird er erst nach dem Gleiten unsichtbar – und damit
     auch für Tastatur und Vorleseprogramm weg. */
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
/* [hidden] verliert gegen die Klassenregel mit display (siehe Aktionsbanner). */
.order-dock[hidden] { display: none; }
.order-dock.is-on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}
.order-dock-btn { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.order-dock:hover .order-dock-btn {
  background: var(--gold-deep); border-color: var(--gold-deep); color: #140f07;
}
.order-dock:not([hidden]) ~ .site-footer { padding-bottom: calc(1.5rem + 5rem); }

@media (max-width: 720px) {
  .order-dock {
    left: 0; right: 0; bottom: 0; border-radius: 0;
    display: flex; justify-content: center;
    padding: 0.5rem 1.25rem;
    background: rgba(16, 14, 10, 0.97);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--gold-dim);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.35);
    transform: translateY(100%);
  }
  /* Die ganze Leiste ist der Link; der Fokusrahmen liegt deshalb innen,
     außen liefe er über den Bildschirmrand. */
  .order-dock:focus-visible { outline-offset: -4px; }
  /* 44 px sind die Mindestgröße zum Antippen; mehr kostet nur Lesefläche. */
  .order-dock-btn {
    width: min(100%, 22rem); min-height: 44px;
    padding-block: 0.45rem; line-height: 1.3; box-shadow: none;
  }

  /* Andocken, auch wenn der Browser unten Seite zeigt – wie beim Warenkorb
     auf der Bestellseite (css/bestellen.css): Auf dem iPhone fährt beim
     Scrollen die Werkzeugleiste weg, `bottom: 0` endet dann über dem
     Streifen des Home-Balkens. Der Hintergrund läuft deshalb nach unten
     weiter; wo nichts ist, liegt er außerhalb des Bildschirms. */
  .order-dock::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%;
    height: 30vh; background: #100e0a;
  }
}
@media (prefers-reduced-motion: reduce) {
  .order-dock, .order-dock.is-on { transition: none; }
}

/* ---------- Galerie ---------- */
.gallery { padding-top: clamp(1.5rem, 3vw, 2.2rem); }
.gallery-intro { color: var(--ink-muted); max-width: var(--measure); margin: 0; }
.gal-group + .gal-group { margin-top: clamp(2.8rem, 6vw, 4.5rem); }
.gal-group h2 {
  font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.4rem;
  padding-bottom: 0.9rem; border-bottom: 1px solid rgba(200,162,76,0.22);
}

/* Mauerwerk-Raster: die Bilder behalten ihr eigenes Seitenverhältnis */
.gal-grid { columns: 1; column-gap: 1rem; }
@media (min-width: 600px) { .gal-grid { columns: 2; } }
@media (min-width: 1000px) { .gal-grid { columns: 3; column-gap: 1.2rem; } }

.gal-item {
  position: relative; display: block; break-inside: avoid; margin-bottom: 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--bg-raise); text-decoration: none;
}
@media (min-width: 1000px) { .gal-item { margin-bottom: 1.2rem; } }
.gal-item img { display: block; width: 100%; height: auto; transition: transform 0.5s ease; }
.gal-item:hover img, .gal-item:focus-visible img { transform: scale(1.05); }
.gal-item:hover, .gal-item:focus-visible { border-color: var(--gold-dim); }
.gal-cap {
  position: absolute; inset: auto 0 0 0; padding: 2.2rem 0.9rem 0.8rem;
  font-size: 0.85rem; color: var(--ink);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
  opacity: 0; transition: opacity 0.3s ease;
}
.gal-item:hover .gal-cap, .gal-item:focus-visible .gal-cap { opacity: 1; }
/* Touch-Geräte kennen kein Hover – dort die Bildunterschrift dauerhaft zeigen */
@media (hover: none) { .gal-cap { opacity: 1; } }
.gallery-more { margin-top: clamp(2.2rem, 5vw, 3.2rem); color: var(--ink-muted); max-width: var(--measure); }
.gallery-more a { color: var(--gold-soft); }

/* Großansicht: reines CSS über :target, JS ergänzt nur Tastatur-Bedienung */
.lightbox { display: none; position: fixed; inset: 0; z-index: 130; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.lightbox:target { display: grid; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.93); backdrop-filter: blur(3px); }
.lb-figure { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; max-width: 100%; }
.lb-figure picture { display: block; max-width: 100%; }
.lb-figure img {
  display: block; max-width: min(100%, 62rem); max-height: 74vh; width: auto; height: auto;
  border-radius: var(--radius-sm); box-shadow: 0 26px 70px rgba(0,0,0,0.7);
}
.lb-figure figcaption { color: var(--ink); font-size: 0.92rem; text-align: center; }
.lb-count { color: var(--ink-muted); margin-left: 0.6rem; font-size: 0.84rem; }
.lb-close, .lb-nav {
  position: absolute; display: grid; place-items: center;
  width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%;
  background: rgba(12,11,9,0.85); color: var(--ink); text-decoration: none;
  font-size: 1.7rem; line-height: 1; transition: color 0.2s, border-color 0.2s;
}
.lb-close:hover, .lb-nav:hover { color: var(--gold-soft); border-color: var(--gold-dim); }
.lb-close { top: clamp(0.8rem, 2vw, 1.6rem); right: clamp(0.8rem, 2vw, 1.6rem); font-size: 2rem; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-prev { left: clamp(0.5rem, 2vw, 1.6rem); }
.lb-next { right: clamp(0.5rem, 2vw, 1.6rem); }

/* ---------- Rechtsseiten ---------- */
.page-hero { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4rem)); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 0.2em; }
.legal-content { padding-block: 1.5rem var(--space-section); }
.legal-content h2 { font-size: 1.4rem; margin-top: 2em; }
.legal-content p, .legal-content li { color: var(--ink-muted); }
.legal-content strong { color: var(--ink); }
.legal-content a { color: var(--gold-soft); }
.placeholder-note { background: rgba(200,162,76,0.08); border: 1px dashed var(--gold-dim); padding: 0.9rem 1.1rem; font-size: 0.92rem; color: var(--ink-muted); max-width: var(--measure); }
.placeholder-inline { display: inline; color: var(--gold-soft); font-style: italic; }

/* ---------- Info-Popup ---------- */
.popup-overlay {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1.25rem;
  background: rgba(8,6,4,0.74); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  animation: popup-fade 0.25s ease;
}
.popup-card {
  position: relative; width: min(100%, 27rem); background: var(--bg-raise);
  border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius);
  padding: 2.2rem 1.9rem 1.9rem; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  animation: popup-rise 0.3s ease;
}
.popup-emblem { margin: 0 auto 0.9rem; width: 56px; height: 56px; }
.popup-image { width: 100%; border-radius: var(--radius-sm); margin: 0 auto 1rem; aspect-ratio: 3 / 2; object-fit: cover; }
.popup-title { font-size: 1.45rem; margin-bottom: 0.4em; }
.popup-text { color: var(--ink-muted); font-size: 0.97rem; margin: 0 auto 1.4rem; }
.popup-close { min-width: 11rem; }

/* ----- Popup im Breitformat (wenn ein Bild gewählt ist) ----- */
.popup-card--media {
  width: min(100%, 56rem);
  padding: 0; text-align: left; overflow: hidden;
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .popup-card--media { grid-template-columns: 1.05fr 1fr; } }
.popup-card--media .popup-image {
  width: 100%; height: 100%; margin: 0; border-radius: 0;
  aspect-ratio: 16 / 10; object-fit: cover;
}
@media (min-width: 720px) {
  .popup-card--media .popup-image { aspect-ratio: auto; min-height: 21rem; }
}
.popup-body {
  padding: clamp(1.6rem, 3.2vw, 2.8rem);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
/* ohne Bild: schmale, zentrierte Karte – Textblock erbt die Kartenpolsterung */
.popup-card:not(.popup-card--media) .popup-body { padding: 0; align-items: center; }
.popup-card--media .popup-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 0.35em; }
/* goldener Trenner wie im Hero */
.popup-card--media .popup-title::after {
  content: ""; display: block; width: 54px; height: 2px; margin-top: 0.7rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold-deep));
}
.popup-card--media .popup-text { margin: 0.9rem 0 1.7rem; font-size: 1rem; max-width: 38ch; }
.popup-card--media .popup-close { min-width: 0; }

/* ----- Nur ein Bild, kein Text -----
   Ohne Überschrift und Text bliebe die zweite Spalte leer. Die Karte wird
   deshalb einspaltig und nur so breit, wie ein Bild gut aussieht. Gezeigt
   wird es vollständig (contain) statt beschnitten: Ein Aushang verliert
   sonst genau die Ränder, auf denen die Aktion steht. */
.popup-card--media.popup-card--imageonly {
  width: min(100%, 34rem);
  grid-template-columns: 1fr;
}
.popup-card--media.popup-card--imageonly .popup-image {
  aspect-ratio: auto; min-height: 0;
  height: auto; max-height: 72vh;
  object-fit: contain; background: #0b0906;
}
.popup-card--media.popup-card--imageonly .popup-body {
  padding: 0.9rem 1rem 1.05rem; align-items: center;
}
/* Hier liegt der Schließer direkt auf dem Bild. Ohne eigene Fläche wäre er
   auf einem hellen Aushang unsichtbar – und er ist neben „Alles klar" die
   einzige Bedienung im Fenster. */
.popup-card--media.popup-card--imageonly .popup-x {
  background: rgba(8, 6, 4, 0.55); border-radius: 50%; color: #fff;
  top: 0.55rem; right: 0.55rem; width: 40px; height: 40px;
}
.popup-card--media.popup-card--imageonly .popup-x:hover { background: rgba(8, 6, 4, 0.8); }
.popup-x { position: absolute; top: 0.4rem; right: 0.4rem; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink-muted); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.popup-x:hover { color: var(--gold-soft); }
@keyframes popup-fade { from { opacity: 0; } }
@keyframes popup-rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  .popup-overlay, .popup-card,
  .jobs-modal:target, .jobs-modal.is-open { animation: none; }
}

/* ---------- Jobs-Formular (Overlay) ---------- */
.jobs-modal {
  display: none; position: fixed; inset: 0; z-index: 120; align-items: center; justify-content: center;
  padding: 1.25rem; background: rgba(8,6,4,0.9); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); overflow-y: auto;
}
.jobs-modal:target, .jobs-modal.is-open { display: flex; animation: popup-fade 0.25s ease; }
.jobs-card { width: min(100%, 30rem); text-align: left; margin-block: auto; }
.jobs-card .kicker { margin-bottom: 0.5rem; }
.jobs-card .popup-title { margin-bottom: 0.3em; text-align: left; }
.jobs-intro { color: var(--ink-muted); font-size: 0.95rem; margin-bottom: 1.4rem; }
.jobs-form p { margin: 0 0 1rem; max-width: none; }
.jobs-form label { display: block; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.35rem; }
.jobs-form input, .jobs-form textarea {
  width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem;
}
.jobs-form input:focus-visible, .jobs-form textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.jobs-form textarea { resize: vertical; min-height: 7rem; }
.jobs-privacy { font-size: 0.8rem; color: var(--ink-muted); }
.jobs-privacy a { color: var(--gold-soft); }
.jobs-form .btn { width: 100%; }
/* Hinweis „keine offenen Stellen“ (Formular im Backend abgeschaltet) */
.jobs-closed-btn { width: 100%; margin-top: 0.4rem; }
.jobs-result { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.jobs-card--result { text-align: center; }
.hp-field { 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; }

/* ---------- Scroll-Reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.45s ease, transform 0.45s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .dish-card, .btn, .trio-panel img { transition: none; }
  .gal-item img, .gal-cap { transition: none; }
  .gal-item:hover img, .gal-item:focus-visible img { transform: none; }
}