/* ============================================================
   KAORU — Relaunch · shared design system
   Luxe / cinematic · deep blacks + anthracite
   ============================================================ */

:root{
  /* palette */
  --ink:        #0a0a0b;
  --ink-2:      #0e0e10;
  --anthra:     #16161a;
  --anthra-2:   #1d1d22;
  --anthra-3:   #25252c;
  --paper:      #f4f1ea;
  --paper-dim:  rgba(244,241,234,.66);
  --paper-faint:rgba(244,241,234,.40);
  --paper-ghost:rgba(244,241,234,.16);
  --red:        #e2001a;
  --red-deep:   #b00015;
  --gold:       #b19c83;
  /* Dunklere Stufe fuer Zeigerzustaende: Gold auf Gold waere kein
     Unterschied, Papier darunter wuerde den weissen Text verschlucken. */
  --gold-deep:  #8a7560;
  --gold-dim:   rgba(177,156,131,.55);
  --hair:       rgba(177,156,131,.20);
  --hair-soft:  rgba(244,241,234,.10);

  /* type */
  /* Zweitschrift fuer Ueberschriften und Auszeichnungen. Wird erprobt —
     zum Wechseln nur diese Zeile aendern, dazu die URL in
     kaoru_fonts_url() und das Preset in theme.json. --f-serif ist ein
     Aliasname aus der Zeit der Garamond und zeigt auf dieselbe Schrift;
     so muessen die rund fuenfzehn Stellen im Stylesheet nicht mit. */
  --f-display:'Roboto', system-ui, sans-serif;
  /* Strichstaerke der Zweitschrift. Steht als eigene Variable da, weil sie
     mit der Schrift wechselt: Eine Garamond traegt bei 500, eine Roboto
     wirkt bei 500 gedrungen und soll hier duenn stehen. */
  --fw-display:300;
  --f-body:   'Hanken Grotesk', system-ui, sans-serif;
  --f-serif:  var(--f-display);

  /* layout */
  --gut: clamp(20px, 5vw, 84px);
  --maxw: 1480px;

  /* hero tweak vars (driven by Tweaks panel; defaults here) */
  --hero-overlay: .68;

  /* Schriftskala — bewusst nur acht Stufen */
  --fs-hero:  clamp(34px, 4.6vw, 74px);
  --fs-h2:    clamp(29px, 3.5vw, 54px);
  --fs-h3:    clamp(22px, 2.2vw, 33px);
  --fs-lede:  clamp(19px, 1.9vw, 26px);
  /* Lesegroesse. Bis 1.43.4 gab es daneben --fs-small mit 16px; die beiden
     lagen zwei Pixel auseinander und trugen zusammen fast 500 Stellen.
     Zusammengelegt auf 18 — im Browser geprueft: kein Ueberlauf, die
     laengste Seite waechst um 1,5 Prozent. */
  --fs-body:  18px;
  /* Kleinste Stufe: Navigation, Buttons, Labels, Bildunterschriften.
     Hiess an 42 Stellen --fs-micro und an 12 --fs-ui, bei gleichem Wert;
     zusammengelegt auf einen Namen. */
  --fs-ui:    16px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--red); color:#fff; }

/* --- Core-Layout-Abstaende neutralisieren -------------------------------
   WordPress setzt margin-block-start auf Flow-Kinder. Spezifitaet 0,1,0:
   schlaegt die :where()-Regeln des Cores. Steht bewusst VOR dem
   Designsystem, damit dessen eigene Abstaende (.shead, .facts, .faq …)
   bei gleicher Spezifitaet per Quellreihenfolge gewinnen. ------------- */
.wp-site-blocks > *{ margin-block:0; }
.kaoru-main > *{ margin-block:0; }
.kaoru-main :where(.wp-block-group, .wp-block-columns, .wp-block-buttons) > *{ margin-block:0; }
.editor-styles-wrapper :where(.wp-block-group, .wp-block-columns, .wp-block-buttons) > *{ margin-block:0; }
/* Kopf und Fuss stehen ausserhalb von .kaoru-main, brauchen die Regel aber
   genauso — sie bestehen inzwischen ebenfalls aus Kernbloecken. */
.anns :where(.wp-block-group) > *,
.hdr :where(.wp-block-group, .wp-block-buttons) > *,
.ft :where(.wp-block-group, .wp-block-columns, .wp-block-column) > *{ margin-block:0; }

/* ---------- typographic primitives ---------- */
.kicker{
  font-family:var(--f-body);
  font-size:var(--fs-ui);
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
}
.serif{ font-family:var(--f-serif); }
.display{
  font-family:var(--f-display);
  font-weight:var(--fw-display);
  text-transform:none;
  letter-spacing:0;
  line-height:1.06;
  margin:0;
  text-wrap:balance;
}
h1.display{ font-size:var(--fs-hero); }
h2.display{ font-size:var(--fs-h2); }
h3.display{ font-size:var(--fs-h3); }

.lede{
  font-family:var(--f-serif);
  font-size:var(--fs-lede);
  line-height:1.32;
  color:var(--paper);
  font-weight:var(--fw-display);
  text-wrap:pretty;
}
/* Es ist kein 700er Schnitt mehr geladen. Ohne diese Regel staenden b und
   strong auf dem Browser-Standard 700 und wuerden je nach Browser aus dem
   600er kuenstlich verfettet. 600 uebernimmt die Rolle der Betonung. */
b, strong{ font-weight:600; }

/* Auch em: Ohne geladenen Kursivschnitt wuerde der Browser die Schraeglage
   selbst berechnen. Die Betonung traegt hier die Farbe, nicht die Neigung. */
em{ font-style:normal; }

.muted{ color:var(--paper-dim); }
.section{ padding:clamp(72px,11vh,150px) var(--gut); }
.wrap{ max-width:var(--maxw); margin-inline:auto; }
.eyebrow-row{ display:flex; align-items:center; gap:16px; }
.eyebrow-row .rule{ flex:1; height:1px; background:var(--hair); }

/* hairline tag with index number, MASA-ish */
.idx{ font-family:var(--f-serif); color:var(--gold); font-size:var(--fs-lede); }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--red); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  background:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-weight:600; font-size:var(--fs-ui);
  letter-spacing:.14em; text-transform:uppercase;
  padding:15px 28px; border:0; border-radius:0;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, box-shadow .3s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(226,0,26,.30); }
.btn--ghost{
  --bg:transparent; --fg:var(--paper);
  border:1px solid var(--paper-ghost);
}
.btn--ghost:hover{ --bg:var(--paper); --fg:var(--ink); box-shadow:none; border-color:var(--paper); }
.btn--gold{ --bg:var(--gold); --fg:#fff; border:1px solid var(--gold); }
.btn--gold:hover{ --bg:var(--gold-deep); --fg:#fff; border-color:var(--gold-deep); box-shadow:none; }
.btn--lg{ padding:18px 38px; font-size:var(--fs-ui); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-weight:600; font-size:var(--fs-ui); letter-spacing:.12em; text-transform:uppercase;
  color:var(--paper);
}
.link-arrow .ln{ width:34px; height:1px; background:var(--gold); transition:width .35s ease; }
.link-arrow:hover .ln{ width:58px; }
.link-arrow:hover{ color:var(--gold); }

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.anns{
  /* Gold statt Rot: Rot ist seit 1.56 die Farbe der Lieferung, die Leiste
     spricht aber ueber Aktionen im Haus. Schrift in Weiss auf Kundenwunsch —
     gemessen sind das 2,64:1, siehe Abschnitt „Farben der Schaltflaechen". */
  background:var(--gold);
  color:#fff;
  position:relative;
  z-index:60;
  font-size:var(--fs-ui); letter-spacing:.04em;
}
/* Boxen, die ihr Padding INNERHALB der max-width tragen, brauchen die
   Gutter zusätzlich in der Breite — sonst starten sie weiter rechts als
   die .section/.wrap-Kombination (Padding außen, max-width innen). */
.anns__track{
  max-width:calc(var(--maxw) + 2 * var(--gut)); margin-inline:auto;
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding:5px var(--gut);
  /* Höhe der höchsten Meldung, von kaoru.js gemessen. Fest verdrahtet
     wäre sie falsch, sobald ein Text umbricht — und der Kopf, der sich
     daran ausrichtet, läge dann über der Leiste. */
  min-height:var(--ann-h, 28px);
  text-align:center;
}
.anns__item{ display:none; align-items:center; gap:14px; }
.anns__item.is-on{ display:flex; animation:annIn .6s ease; }
.anns__txt b, .anns__txt strong{ font-weight:600; }

/* Die ganze Leiste führt zu den Aktionen der Startseite. Das echte Ziel ist
   der Link im Absatz — im Editor pflegbar, per Tastatur erreichbar, ohne
   JavaScript nutzbar. Die Fläche daneben leitet kaoru.js an ihn weiter;
   ein aufgespanntes ::after wäre hier von der Einblend-Animation des
   Elternelements eingefangen worden. */
.anns{ cursor:pointer; }
.anns__txt a{ color:inherit; }
.anns:hover .anns__item.is-on .anns__txt a{ text-decoration:underline; text-underline-offset:3px; }
@keyframes annIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

/* Auf schmalen Geräten kompakter, damit die Meldung mit zwei Zeilen
   auskommt statt mit dreien. Rechts bleibt Platz für den Schließer,
   sonst läuft der Text darunter durch. */
@media (max-width:700px){
  .anns{ font-size:var(--fs-ui); letter-spacing:.01em; line-height:1.35; }
  .anns__track{ gap:9px; padding:4px var(--gut); }
  .anns__item{ gap:8px; }
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .45s ease, border-color .45s ease, backdrop-filter .45s;
  border-bottom:1px solid transparent;
}
/* Der Kopf hängt an der tatsächlichen Höhe der Hinweisleiste. Auf schmalen
   Geräten bricht deren Text um und sie wird deutlich höher als 38px — mit
   einem festen Wert läge der Kopf dann über der Leiste. */
.hdr.has-ann{ top:var(--ann-h, 28px); }
.hdr__in{
  max-width:calc(var(--maxw) + 2 * var(--gut)); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px var(--gut);
  transition:padding .45s ease;
}
.hdr.scrolled{
  background:rgba(10,10,11,.82);
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--hair-soft);
}
.hdr.scrolled.has-ann{ top:0; }
.hdr.scrolled .hdr__in{ padding-top:13px; padding-bottom:13px; }
.brand{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.brand img{ height:60px; width:auto; }
.nav{ display:flex; align-items:center; gap:4px; min-width:0; }
.nav a, .nav button.navlink{
  position:relative;
  background:transparent; border:0;
  /* 600 statt 500: Der Fliesstext-Schnitt 500 wird sonst nur fuer diese
     eine Regel geladen. 600 nutzen bereits 39 andere Stellen. */
  color:var(--paper); font-size:var(--fs-ui); font-weight:600; letter-spacing:.04em;
  padding:10px 14px;
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px;
  transition:color .25s;
}
.nav a::after, .nav button.navlink::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.nav a:hover, .nav button.navlink:hover{ color:var(--gold); }
.nav a:hover::after, .nav button.navlink:hover::after{ transform:scaleX(1); }
.nav a.active{ color:var(--gold); }

/* Das Hauptmenü ist ein core/navigation-Block. Er bringt seine eigene Liste
   mit; die Optik liegt weiter auf .nav a, das auch den Link im Block trifft.
   Hier wird nur das Eigenlayout des Blocks zurückgenommen. */
.nav .wp-block-navigation{ align-items:center; }
.nav .wp-block-navigation__container{ gap:4px; margin:0; padding:0; align-items:center; }
.nav .wp-block-navigation-item{ margin:0; }

/* Core setzt auf den Link im Navigationsblock color:inherit — und schreibt
   die Klasse dafür doppelt, was Spezifität (0,3,0) ergibt. Das schlägt
   .nav a und damit auch den Hover. Die Doppelung hier ist deshalb kein
   Versehen, sondern die Gegenrechnung; das Element im Selektor hebt sie
   eindeutig darüber.

   Aktive Seite: die Klasse setzt der Navigationsblock selbst, sofern die
   Punkte als Seitenverweise angelegt sind. Die frühere PHP-Prüfung im
   Pattern entfällt damit. */
.nav a.wp-block-navigation-item__content.wp-block-navigation-item__content{
  color:var(--paper); text-decoration:none;
}
.nav a.wp-block-navigation-item__content.wp-block-navigation-item__content:hover{ color:var(--gold); }
.nav li.current-menu-item > a.wp-block-navigation-item__content.wp-block-navigation-item__content,
.nav li.current-menu-ancestor > a.wp-block-navigation-item__content.wp-block-navigation-item__content{ color:var(--gold); }

.caret{ width:7px;height:7px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg);transition:transform .3s; margin-bottom:2px;}
/* Zwei Schaltflaechen im Kopf: Reservierung (gefuellt) und Lieferung
   (Umriss). Beide kompakter als die Knoepfe im Inhalt, sonst draengen sie
   das Menue zusammen. Die Hierarchie kommt ueber die Fuellung, nicht ueber
   die Groesse — gleich gross wirken sie als Paar. */
.hdr__right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.hdr__right .wp-block-buttons{ gap:8px; flex-wrap:nowrap; }
.hdr__right .wp-block-button__link{
  /* Kompakter als der Rest der Schaltflaechen: 14px statt --fs-ui (16px)
     und engeres Polster. Die beiden Knoepfe sind damit rund 60 Pixel
     schmaler, und die Schublade muss erst spaeter uebernehmen — siehe die
     Grenze weiter unten. Zweiter fester Schriftgrad im Theme neben .mobar,
     aus demselben Grund: begleiten, nicht auftrumpfen. */
  padding:10px 14px; font-size:14px; letter-spacing:.1em; white-space:nowrap;
  /* Durchsichtiger Rand am gefuellten Knopf: Sonst ist er zwei Pixel
     niedriger als der Umriss-Knopf daneben und die beiden stehen schief. */
  border:1px solid transparent;
}
.kanji-mark{
  width:40px;height:40px; border:1px solid var(--hair); display:grid; place-items:center;
  font-family:var(--f-serif); font-size:var(--fs-lede); color:var(--gold);
}
.burger{ display:none; }

/* location dropdown */
.locpick{ position:relative; }
.locmenu{
  position:absolute; top:calc(100% + 10px); left:0; transform:translateY(-6px);
  /* 380 statt 330: Seit --fs-ui auf 16px steht, braucht die Zeile aus
     Standort und "Bestellen" mehr Platz — bei 330 ragte der Shop-Verweis
     rund 39 Pixel aus der Klappe heraus. */
  width:380px; background:rgba(14,14,16,.96); border:1px solid var(--hair-soft);
  backdrop-filter:blur(20px); padding:8px; opacity:0; visibility:hidden; transition:.3s;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.locpick.open .locmenu{ opacity:1; visibility:visible; transform:translateY(0); }
.locpick.open .caret{ transform:rotate(225deg); }
.locmenu__h{ display:flex; align-items:center; gap:10px; font-size:var(--fs-ui); letter-spacing:.24em; text-transform:uppercase; color:var(--gold); padding:12px 12px 8px; }
.locmenu__h::after{ content:""; flex:1; height:1px; background:var(--hair); }
.locmenu__h--del{ color:var(--red); margin-top:6px; border-top:1px solid var(--hair-soft); padding-top:14px; }
.locmenu__h--del::after{ background:rgba(226,0,26,.3); }
.locmenu .locitem{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:12px; width:100%; text-align:left; font-size:inherit; letter-spacing:normal;
  background:transparent; border:0; color:var(--paper); transition:background .2s, border-color .2s;
  border-left:2px solid transparent;
}
.locmenu .locitem::after{ display:none; content:none; }
.locmenu .locitem:hover{ background:var(--anthra); border-left-color:var(--gold); }
.locmenu .locitem--del:hover{ border-left-color:var(--red); }

/* Standort und Bestellshop in einer Zeile. Zwei Verweise koennen nicht
   ineinander liegen, deshalb die Zeile als Rahmen: links der Standort,
   rechts der Shop. Der farbige Rand wandert dabei auf die Zeile, damit er
   beim Ueberfahren beider Haelften steht. */
.locrow{ display:flex; align-items:stretch; border-left:2px solid transparent; transition:background .2s, border-color .2s; }
.locrow:hover{ background:var(--anthra); border-left-color:var(--gold); }
.locrow--del:hover{ border-left-color:var(--red); }
/* min-width:0 ist der eigentliche Fix und nicht die Breite oben: Ein
   Flex-Element steht auf min-width:auto und weigert sich, unter seine
   Textbreite zu schrumpfen. Die Zeile blieb deshalb so breit wie Adresse
   plus "Bestellen" verlangten — und schob den Shop-Verweis nach draussen,
   statt dass der Standortname umbricht. Mit 0 darf er schrumpfen; die
   Klappe haelt ihre Breite auch, wenn ein Standortname laenger wird. */
.locrow .locitem{ flex:1 1 auto; min-width:0; border-left:0; }
.locrow .locitem b,
.locrow .locitem span{ max-width:100%; overflow-wrap:anywhere; }
.locrow .locitem:hover{ background:transparent; }
.locshop{
  position:relative;
  flex:0 0 auto; display:flex; align-items:center;
  padding:0 30px 0 12px; border-left:1px solid var(--hair-soft);
  font-family:var(--f-body); font-weight:600; font-size:var(--fs-ui);
  letter-spacing:.12em; text-transform:uppercase; color:var(--paper-faint);
  white-space:nowrap; transition:color .2s;
}
/* Absolut gesetzt wie der Winkel an .drawer__loc — als Flex-Element in
   dieser Zeile kam er nicht auf seine Hoehe. */
.locshop::after{
  content:''; position:absolute; right:12px; top:50%;
  width:7px; height:7px; margin-top:-4px;
  border-top:1.4px solid currentColor; border-right:1.4px solid currentColor;
  transform:rotate(45deg); opacity:.8;
}
.locshop:hover{ color:var(--gold); }
.locrow--del .locshop:hover{ color:var(--red); }

/* In der Klappliste liegt der Verweis innerhalb von .nav — dort greifen
   `.nav a` (Innenabstand, Spezifitaet 0,1,1) und `.nav a::after` (die
   goldene Unterstreichung der Menuepunkte, 0,1,2). Beide schlagen die
   Regeln oben und haben den Winkel unsichtbar gemacht: Aus 7x7 gedreht
   wurde ein 1px hoher Balken mit scaleX(0).

   Fuer .locitem war dasselbe schon einmal zu entschaerfen (siehe
   `.locmenu .locitem::after`). Hier werden die Werte zurueckgeholt. */
.nav .locshop{ padding:0 30px 0 12px; }
.nav .locshop::after{
  left:auto; right:12px; top:50%; bottom:auto;
  width:7px; height:7px; margin-top:-4px;
  background:transparent;
  border-top:1.4px solid currentColor; border-right:1.4px solid currentColor;
  transform:rotate(45deg); transform-origin:center;
}
.nav .locshop:hover::after{ transform:rotate(45deg); }
.locitem b{ font-size:var(--fs-body); font-weight:600; letter-spacing:.02em; }
.locitem span{ font-size:var(--fs-ui); color:var(--paper-dim); letter-spacing:.02em; }
.locitem .dot{ color:var(--gold); font-style:normal; }
.locitem--del .dot{ color:var(--red); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:640px; overflow:hidden; background:var(--ink); }
/* isolation ist hier Pflicht, nicht Kosmetik: Die Folien tragen z-index 1
   und 2, damit die aufsteigende ueber der abgeloesten liegt. Ohne eigenen
   Stapelkontext gaelten diese Werte im Kontext des Heros — die aktive Folie
   laege dann ueber dem Scrim (z-index 2) und die dunkle Ebene waere
   wirkungslos. */
.hero__bg{ position:absolute; inset:0; overflow:hidden; z-index:0; isolation:isolate; background:var(--ink); }

/* ---- Bildfolge als Blende über Schwarz ----------------------------------
   Ein Motiv sinkt weg, der Hero steht kurz dunkel, das nächste steigt auf.
   Der schwarze Moment kommt nicht von einer eigenen Ebene, sondern vom
   Grund des Heros: Ist keine Folie sichtbar, sieht man ihn. Deshalb traegt
   .hero__bg eine Farbe — ohne sie blitzte an dieser Stelle die Seite durch.

   Die Zeiten stehen in kaoru.js, weil das Ausblenden vor dem Einblenden
   abgeschlossen sein muss. Zwei gleichzeitige Blenden waeren eine
   Ueberblendung und ergaeben in der Mitte ein Doppelbild statt Schwarz. */
.hslide{
  position:absolute; inset:0; z-index:1;
  opacity:0;
  /* Ab-Blende: beschleunigend. Das Motiv haelt seine Praesenz lange und
     faellt erst zum Schluss — mit einer symmetrischen Kurve schliche es
     eine halbe Sekunde knapp ueber Null und der schwarze Moment wuerde
     doppelt so lang wie gedacht. */
  transition:opacity 1.1s cubic-bezier(.45,0,.9,.35);
}
/* Auf-Blende: abbremsend, also gleich zu Beginn sichtbar. Die Regel steht
   auf .is-on und gilt deshalb nur, solange die Klasse haengt; beim
   Entfernen greift wieder die Kurve darueber. */
.hslide.is-on{
  z-index:2; opacity:1;
  transition:opacity 1.4s cubic-bezier(.15,.6,.3,1);
}

.hslide__img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Die stehende Aufnahme wandert unmerklich naeher: 105 auf 100 Prozent,
   danach haelt `both` den Endwert. Die Dauer deckt genau die Lebenszeit
   einer Folie ab — Auf-Blende, Stand und Ab-Blende zusammen rund vier
   Sekunden. Laenger gewaehlt bliebe die Fahrt auf halbem Weg stehen.

   Bewusst eine Animation und kein Uebergang: Sie laeuft auch beim ersten
   Motiv an, das die Klasse schon im Quelltext traegt und deshalb nie einen
   Klassenwechsel erlebt. */
.hslide.is-on .hslide__img{ animation:hero-drift 4s cubic-bezier(.33,0,.2,1) both; }

@keyframes hero-drift{
  from{ transform:scale(1.05); }
  to  { transform:scale(1); }
}

/* Nur waehrend der Blende auf eine eigene Ebene heben. Dauerhaft gesetzt
   laegen vier Vollbilder im Speicher, auf dem Telefon spuerbar. */
.hslide.is-moving{ will-change:opacity; }

@media (prefers-reduced-motion: reduce){
  .hslide{ transition:none; }
  .hslide.is-on .hslide__img{ animation:none; }
}

/* Die Stärke ist gemessen, nicht geschätzt: In der Textzone (34–68 % der Höhe)
   lagen bei der früheren Stufe je nach Motiv bis zu 20 % der Bildpunkte unter
   4,5:1 Kontrast zu weisser Schrift. Ab rund 55 % Deckkraft sind es null; die
   Verläufe halten dort jetzt etwa 60 %. Oben bleibt es heller, damit das Foto
   noch als Foto zu erkennen ist. */
.hero__scrim{
  position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 26%, rgba(10,10,11,.60) 100%),
    linear-gradient(180deg, rgba(10,10,11,.50) 0%, rgba(10,10,11,calc(var(--hero-overlay) - .10)) 35%, rgba(10,10,11,var(--hero-overlay)) 75%, rgba(10,10,11,.97) 100%);
}
.hero__grain{ position:absolute; inset:0; z-index:3; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__inner{
  position:relative; z-index:4; height:100%;
  max-width:calc(var(--maxw) + 2 * var(--gut)); margin-inline:auto; padding:0 var(--gut);
  display:flex; flex-direction:column; justify-content:center;
}
.hero__kicker{ margin-bottom:26px; }
.hero h1{ line-height:1.02; }
.hero h1 .ln1{ display:block; font-weight:var(--fw-display); }
.hero h1 .ln2{ display:block; color:var(--gold); font-weight:var(--fw-display); }
.hero__lede{ margin-top:34px; max-width:560px; }
.hero__cta{ margin-top:42px; display:flex; gap:16px; flex-wrap:wrap; }
/* motion is an enhancement: only armed once JS confirms (html.js-anim) */
html.js-anim .hero__kicker{ opacity:0; animation:rise .9s .25s ease forwards; }
html.js-anim .hero h1{ opacity:0; animation:rise 1s .4s ease forwards; }
html.js-anim .hero__lede{ opacity:0; animation:rise 1s .6s ease forwards; }
html.js-anim .hero__cta{ opacity:0; animation:rise 1s .78s ease forwards; }

/* hero variants (data-hero on body) */
[data-hero="left"]   .hero__inner{ align-items:flex-start; text-align:left; }
[data-hero="center"] .hero__inner{ align-items:center; text-align:center; }
[data-hero="center"] .hero__lede{ margin-left:auto; margin-right:auto; }
[data-hero="center"] .hero__cta{ justify-content:center; }
[data-hero="split"]  .hero__inner{ align-items:flex-start; text-align:left; }
[data-hero="split"]  .hero h1{ display:flex; flex-direction:column; }

@keyframes rise{ from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;} }

/* ============================================================
   GENERIC SECTION HEADERS
   ============================================================ */
.shead{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:54px; flex-wrap:wrap; }
.shead__l{ max-width:760px; }
.shead .kicker{ display:block; margin-bottom:20px; }

/* ============================================================
   AKTIONEN — SLIDER

   Die Zahl der Folien ist offen: das Layout kommt ohne Zählung aus,
   die Bedienelemente baut kaoru.js aus den vorhandenen .deal-Elementen.
   ============================================================ */
.deals{ background:var(--ink-2); border-top:1px solid var(--hair-soft);
  /* Sprungziel der Hinweisleiste — der feste Kopf darf die Überschrift
     nicht verdecken. */
  scroll-margin-top:100px; }

.dealsl{ position:relative; }
/* Grundzustand = Folien untereinander. So bleibt der Abschnitt im Editor
   und ohne JavaScript vollstaendig lesbar. */
.dealsl__track{ display:grid; gap:24px; }

/* Karussell erst im Frontend (kaoru.js setzt .js-anim als erste Anweisung). */
.js-anim .dealsl__track{
  grid-auto-flow:column; grid-auto-columns:100%; gap:0;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.js-anim .dealsl__track::-webkit-scrollbar{ display:none; }
.js-anim .deal{ scroll-snap-align:start; }
@media (prefers-reduced-motion: no-preference){
  .js-anim .dealsl__track{ scroll-behavior:smooth; }
}

.deal{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--anthra); border:1px solid var(--hair-soft);
  min-height:clamp(400px,42vw,520px);
  display:grid; align-content:end;
}

/* Foto als Stimmung, Text traegt die Aussage. */
.deal__bg{ position:absolute; inset:0; z-index:0; margin:0; }
.deal__bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.deal::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(10,10,11,.95) 0%, rgba(10,10,11,.80) 40%, rgba(10,10,11,.34) 74%, rgba(10,10,11,.14) 100%),
    linear-gradient(to right, rgba(10,10,11,.80) 0%, rgba(10,10,11,0) 64%);
}
.deal__in{ position:relative; z-index:2; padding:clamp(30px,4vw,58px); max-width:56ch; }

.deal__badge{
  display:inline-block; font-family:var(--f-body); font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; font-size:var(--fs-ui);
  padding:6px 11px; border:1px solid var(--gold-dim); color:var(--gold);
}
.deal--hh .deal__badge{ color:var(--red); border-color:var(--red); }

.deal__title{ font-family:var(--f-display); font-weight:var(--fw-display); text-transform:none;
  font-size:var(--fs-h2); line-height:1.0; letter-spacing:0; margin:24px 0 0; }
.deal__title em{ color:var(--gold); }
.deal--hh .deal__title em{ color:var(--red); }

.deal__day{ margin-top:16px; font-size:var(--fs-ui); letter-spacing:.18em;
  text-transform:uppercase; color:var(--paper); }
.deal__body{ margin-top:10px; color:var(--paper-dim); font-size:var(--fs-body); max-width:44ch; }
.deal__body strong{ color:var(--paper); font-weight:600; }

/* Aufzaehlung und Preis sind mit dem Inhaltstyp entfallen — eine Aktion
   traegt Badge, Schlagzeile, Zeitangabe, Beschreibung und Knopf. Der Preis
   steht, wo er hingehoert: in der hervorgehobenen Zeile der Schlagzeile. */
.deal__foot{ margin-top:28px; display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.deal__cta a{
  display:inline-block; font-size:var(--fs-ui); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:var(--gold); padding:13px 24px;
  transition:background .3s, color .3s;
}
.deal__cta a:hover{ background:var(--gold-deep); color:#fff; }

/* ---- Bedienung: Punkte und Pfeile ---- */
.dealsl__nav{ margin-top:22px; display:flex; align-items:center; gap:12px; }
.dealsl__dots{ display:flex; gap:8px; margin-right:auto; }
.dealsl__dot{
  width:30px; height:2px; padding:0; border:0; cursor:pointer;
  background:var(--hair); transition:background .3s;
}
.dealsl__dot:hover{ background:var(--paper-faint); }
.dealsl__dot[aria-current="true"]{ background:var(--gold); }
.dealsl__arrow{
  width:46px; height:46px; padding:0; cursor:pointer; line-height:1;
  border:1px solid var(--hair); background:transparent; color:var(--paper-dim);
  font-size:var(--fs-body); transition:border-color .3s, color .3s;
}
.dealsl__arrow:hover{ border-color:var(--gold-dim); color:var(--gold); }
.dealsl__arrow[disabled]{ opacity:.3; cursor:default; }

@media (max-width:700px){
  .deal__in{ max-width:none; }
  .deal::after{ background:linear-gradient(to top, rgba(10,10,11,.96) 0%, rgba(10,10,11,.86) 46%, rgba(10,10,11,.40) 78%, rgba(10,10,11,.18) 100%); }
  .dealsl__arrow{ display:none; }
}

/* ============================================================
   EDITORIAL / ABOUT
   ============================================================ */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,96px); align-items:center; }
.split--rev{ grid-template-columns:.95fr 1.05fr; }
.figure{ position:relative; overflow:hidden; }
.figure img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.8,.2,1); }
.figure:hover img{ transform:scale(1.05); }
.figure--tall{ aspect-ratio:4/5; }
.figure--wide{ aspect-ratio:16/11; }
/* Quadrat. Kam mit dem Shabu-Motiv dazu: Neben einer Textspalte von rund
   460 Pixeln laesst 4:5 (709px hoch) zu viel Luft stehen, 1:1 (567px) traegt
   die Spalte deutlich besser. */
.figure--quad{ aspect-ratio:1/1; }
.figure__cap{ position:absolute; left:0; bottom:0; padding:14px 18px; background:rgba(10,10,11,.7);
  backdrop-filter:blur(8px); font-size:var(--fs-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--paper-dim); }
.prose p{ margin:0 0 22px; color:var(--paper-dim); max-width:54ch; }
.prose p.first{ color:var(--paper); }
.prose .lede{ margin-bottom:30px; }
.feat-list{ list-style:none; margin:34px 0 0; padding:0; display:grid; gap:1px; background:var(--hair-soft); border:1px solid var(--hair-soft); }
.feat-list li{ background:var(--ink); padding:20px 22px; display:flex; gap:18px; align-items:baseline; }
.feat-list .n{ font-family:var(--f-serif); color:var(--gold); font-size:var(--fs-lede); flex:0 0 auto; width:34px; }
.feat-list .t b{ display:block; font-weight:600; font-size:var(--fs-body); letter-spacing:.02em; margin-bottom:3px; }
.feat-list .t span{ color:var(--paper-dim); font-size:var(--fs-body); }

/* plate-color legend chips */
.plates{ display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }
.plate{ display:flex; align-items:center; gap:10px; font-size:var(--fs-ui); letter-spacing:.08em; color:var(--paper-dim); border:1px solid var(--hair-soft); padding:8px 14px; }
.plate i{ width:13px;height:13px;border-radius:50%; display:block; }

/* ============================================================
   MENU SHOWCASE
   ============================================================ */
.showcase{ background:var(--ink-2); border-top:1px solid var(--hair-soft); }
.menu-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair-soft); border:1px solid var(--hair-soft); }
.mcard{ position:relative; overflow:hidden; aspect-ratio:1/1.18; background:var(--ink); }
.mcard img{ width:100%;height:100%;object-fit:cover; transition:transform 1s cubic-bezier(.2,.8,.2,1); filter:saturate(1.05); }
.mcard:hover img{ transform:scale(1.07); }
.mcard__v{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%, rgba(10,10,11,.85) 100%); }
.mcard__c{ position:absolute; left:0; right:0; bottom:0; padding:26px; }
.mcard .kicker{ font-size:var(--fs-ui); letter-spacing:.24em; margin-bottom:8px; }
.mcard h3{ font-family:var(--f-display); font-weight:var(--fw-display); text-transform:none; font-size:var(--fs-h3); letter-spacing:0; margin:0; }
.mcard p{ color:var(--paper-dim); font-size:var(--fs-ui); margin:6px 0 0; }

/* ============================================================
   FULL-BLEED CATERING BAND
   ============================================================ */
.band{ position:relative; min-height:min(78vh,720px); display:flex; align-items:center; overflow:hidden; }
.band__bg{ position:absolute; inset:0; }
.band__bg img{ width:100%;height:100%;object-fit:cover; }
.band__scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,10,11,.92) 0%, rgba(10,10,11,.7) 42%, rgba(10,10,11,.2) 100%); }
.band__in{ position:relative; max-width:calc(var(--maxw) + 2 * var(--gut)); margin-inline:auto; padding:0 var(--gut); width:100%; }
.band__c{ max-width:600px; }
.band__steps{ list-style:none; margin:34px 0 36px; padding:0; display:grid; gap:14px; }
.band__steps li{ display:flex; gap:16px; align-items:flex-start; }
.band__steps .n{ font-family:var(--f-serif); color:var(--gold); font-size:var(--fs-lede); line-height:1; flex:0 0 auto; }
.band__steps p{ margin:0; color:var(--paper-dim); }
.band__steps b{ color:var(--paper); }

/* ============================================================
   LOCATIONS STRIP (subtle)
   ============================================================ */
.locs{ border-top:1px solid var(--hair-soft); }
.locgroup + .locgroup{ margin-top:56px; }
.locgroup__h{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.locgroup__h .lbl{ font-size:var(--fs-ui); font-weight:600; letter-spacing:.24em; text-transform:uppercase; }
.locgroup__h .rule{ flex:1; height:1px; }
.locgroup__h .note{ font-size:var(--fs-ui); color:var(--paper-faint); letter-spacing:.04em; }
.locgroup--rest .lbl{ color:var(--gold); }
.locgroup--rest .rule{ background:var(--hair); }
.locgroup--del .lbl{ color:var(--red); }
.locgroup--del .rule{ background:rgba(226,0,26,.28); }

/* ---- Standort-Kacheln (Startseite) --------------------------------------
   Bildkachel statt Textkarte: Foto, dunkler Verlauf, mittig Ort und die
   wichtigsten Angaben, darunter eine Schaltflaeche.

   Die ganze Kachel ist anklickbar, ohne dass Verweise ineinander liegen —
   das waere ungueltiges Markup. Stattdessen traegt der Ortsname den Verweis
   und spannt ihn per ::after ueber die gesamte Flaeche; die Schaltflaeche
   liegt als zweiter, eigener Verweis eine Ebene darueber.

   Die Gruppenkoepfe (.locgroup__h) und ihre Farbcodierung — Gold fuer
   Restaurants, Rot fuer Lieferung — sind dieselben wie auf /standorte/.
   Nur die Karten darunter sind neu; .loc-row und .loc bleiben, weil die
   synchronisierten Bloecke „restaurants" und „lieferdienste" sie nutzen. */
.ltiles{ display:grid; gap:1px; background:var(--hair-soft); border:1px solid var(--hair-soft); }
.ltiles--rest{ grid-template-columns:repeat(2,1fr); }
.ltiles--del{ grid-template-columns:repeat(4,1fr); }

.ltile{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(280px,26vw,380px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:36px 22px; text-align:center; background:var(--ink);
}
/* Bild und Verlauf liegen auf z-index -1 im isolierten Stapelkontext der
   Kachel: Sie zeichnen sich hinter dem Inhalt, aber vor dem Kachelgrund.
   Das Bild liegt auf -2, der Verlauf auf -1 — sonst laege der Verlauf
   hinter dem Foto und dunkelte nichts ab.
   Der Inhalt braucht dadurch selbst keine Positionierung — und genau das
   ist die Bedingung dafuer, dass der Ueberzug des Ortsverweises sich am
   Rand der Kachel aufspannt und nicht am Rand der Ueberschrift. */
.ltile__bg{ position:absolute; inset:0; margin:0; z-index:-2; }
.ltile__bg img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:.5; transform:scale(1.02);
  transition:opacity .5s, transform 1.1s cubic-bezier(.2,.8,.2,1);
}
/* Verlauf statt flacher Abdunklung: oben und unten dunkel, in der Mitte
   heller — dort steht der Text, und das Foto bleibt trotzdem zu erkennen. */
.ltile::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,10,11,.62) 0%, rgba(10,10,11,.30) 45%, rgba(10,10,11,.85) 100%);
}
.ltile:hover .ltile__bg img{ opacity:.62; transform:scale(1.06); }

.ltile__brand{
  margin:0;
  font-size:var(--fs-ui); font-weight:600; letter-spacing:.28em;
  text-transform:uppercase; color:var(--paper-faint);
}
.ltile__city{
  margin:12px 0 0; font-family:var(--f-display); font-weight:var(--fw-display);
  font-size:var(--fs-h3); letter-spacing:0; line-height:1.1; color:var(--paper);
}
.ltile__city a{ color:inherit; }
.ltile__city a::after{ content:""; position:absolute; inset:0; z-index:1; }
.ltile__city a:hover{ color:var(--gold); }
.ltiles--del .ltile__city a:hover{ color:var(--red); }

/* „Frankfurt-Bockenheim" braucht zwei Zeilen, die anderen drei nur eine.
   Ohne reservierte Hoehe saessen die Schaltflaechen der Viererreihe auf
   unterschiedlicher Hoehe. Zwei Zeilen fest — nur in dieser Reihe, die
   Restaurants darueber haben kurze Namen und brauchen die Luft nicht. */
.ltiles--del .ltile__city{ min-height:2.2em; display:flex; align-items:center; }

.ltile__meta{
  margin:10px 0 0; max-width:28ch;
  font-size:var(--fs-ui); line-height:1.6; color:var(--paper-dim);
}

/* Die Schaltflaeche ist ein Absatz mit einem Verweis darin, kein eigener
   Block — so laesst sie sich im Editor wie normaler Text bearbeiten. Das
   Aussehen haengt deshalb am a, der Abstand am p.

   Bewusst eckig wie alle Schaltflaechen des Themes. Die Vorlage arbeitet mit
   Pillen; im Umfeld ohne einen einzigen Radius waere das ein Fremdkoerper. */
/* Ueber dem Ueberzug des Ortsverweises, sonst waere die Schaltflaeche nicht
   einzeln anklickbar. */
.ltile__cta{ position:relative; z-index:2; margin:22px 0 0; }
.ltile__cta a{
  display:inline-block; padding:11px 22px;
  font-family:var(--f-body); font-weight:600; font-size:var(--fs-ui);
  letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--gold);
  transition:background .25s, color .25s;
}
.ltile__cta a:hover{ background:var(--gold-deep); color:#fff; }
.ltiles--del .ltile__cta a{ background:var(--red); color:var(--paper); }
.ltiles--del .ltile__cta a:hover{ background:var(--red-deep); color:var(--paper); }

/* Auf schmalen Schirmen stehen Label und Zusatz des Gruppenkopfs sonst
   nebeneinander und zerfasern beide in zwei enge Spalten. Der Zusatz
   rutscht deshalb in eine eigene Zeile; die Linie bleibt beim Label.
   Gilt auch fuer /standorte/ — dort war es dasselbe Bild. */
@media (max-width:700px){
  .locgroup__h{ flex-wrap:wrap; row-gap:8px; }
  .locgroup__h .note{ flex-basis:100%; order:3; }
}

@media (max-width:1100px){ .ltiles--del{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){
  .ltiles--rest, .ltiles--del{ grid-template-columns:1fr; }
  .ltile{ min-height:250px; }
}

@media (prefers-reduced-motion: reduce){
  .ltile__bg img{ transition:opacity .5s; }
  .ltile:hover .ltile__bg img{ transform:none; }
}

.loc-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hair-soft); border:1px solid var(--hair-soft); }
.loc{ position:relative; background:var(--ink); padding:36px clamp(24px,3vw,40px) 34px; transition:background .4s; border-top:2px solid transparent; display:flex; flex-direction:column; }
.loc:hover{ background:var(--anthra); }
.loc--rest{ border-top-color:var(--gold-dim); }
.loc--del{ border-top-color:var(--red); background:linear-gradient(180deg,rgba(226,0,26,.055),transparent 40%),var(--ink); }
.loc--del:hover{ background:linear-gradient(180deg,rgba(226,0,26,.09),transparent 45%),var(--anthra); }
.loc__badge{ display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-size:var(--fs-ui); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 10px; border:1px solid; margin-bottom:18px; }
.loc__badge i{ width:6px; height:6px; border-radius:50%; background:currentColor; display:block; }
.loc--rest .loc__badge{ color:var(--gold); border-color:var(--gold-dim); }
.loc--del .loc__badge{ color:var(--red); border-color:rgba(226,0,26,.5); }
.loc__city{ font-family:var(--f-display); font-weight:var(--fw-display); text-transform:none; font-size:var(--fs-h3); letter-spacing:0; line-height:1.05; }
.loc__meta{ margin-top:14px; color:var(--paper-dim); font-size:var(--fs-body); line-height:1.7; }
.loc__meta .g{ color:var(--gold); }
.loc--del .loc__meta .g{ color:var(--red); }
.loc__link{ margin-top:auto; padding-top:24px; display:inline-flex; align-self:flex-start; }
.loc--del .link-arrow .ln{ background:var(--red); }
.loc--del .link-arrow:hover{ color:var(--red); }

/* ---- Standort-Detailseiten ---- */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair-soft); border:1px solid var(--hair-soft); margin-top:44px; }
.fact{ background:var(--ink); padding:26px 24px; }
.fact__h{ margin:0 0 9px; font-size:var(--fs-ui); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.fact p{ margin:0; font-size:var(--fs-body); color:var(--paper-dim); line-height:1.75; }
.fact p b{ color:var(--paper); font-weight:600; }
.ptag{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-ui); font-weight:600; letter-spacing:.18em; text-transform:uppercase; padding:6px 12px; border:1px solid var(--gold-dim); color:var(--gold); }
.is-del .ptag{ color:var(--red); border-color:rgba(226,0,26,.5); }
.ptag i{ width:6px;height:6px;border-radius:50%;background:currentColor;display:block; }

/* ============================================================
   RESERVATION
   ============================================================ */
.resv{ background:var(--anthra); border-top:1px solid var(--hair-soft); }
.resv__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,90px); align-items:center; }
.form{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1/-1; }
.field label{ font-size:var(--fs-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--paper-faint); }
.field .req{ color:var(--red); }
.input, .select, select.input{
  background:var(--ink); border:1px solid var(--hair-soft); color:var(--paper);
  padding:14px 15px; font-family:var(--f-body); font-size:var(--fs-body); border-radius:0;
  transition:border-color .25s, background .25s; width:100%;
  appearance:none;
}
.input:focus, select.input:focus{ outline:none; border-color:var(--gold); background:var(--ink-2); }
.input::placeholder{ color:var(--paper-faint); }
select.input{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b19c83' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:38px; }
.field.invalid .input, .field.invalid select.input{ border-color:var(--red); }
.field__err{ font-size:var(--fs-ui); color:var(--red); letter-spacing:.02em; display:none; }
.field.invalid .field__err{ display:block; }
.stepper{ display:flex; align-items:center; border:1px solid var(--hair-soft); background:var(--ink); }
.stepper button{ background:transparent; border:0; color:var(--gold); width:48px; height:48px; font-size:var(--fs-lede); }
.stepper button:hover{ background:var(--anthra-2); color:var(--paper); }
.stepper input{ flex:1; text-align:center; background:transparent; border:0; color:var(--paper); font-size:var(--fs-body); font-variant-numeric:tabular-nums; width:100%; }
.stepper input:focus{ outline:none; }
.form__submit{ grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:6px; flex-wrap:wrap; }
.form__note{ font-size:var(--fs-ui); color:var(--paper-faint); letter-spacing:.02em; max-width:38ch; }

/* ============================================================
   FOOTER
   ============================================================ */
/* Der Footer ist ein core/columns-Block. Das CSS setzt hier nur noch Abstand
   und Aussehen — die Aufteilung kommt aus dem Block selbst: die Marken-Spalte
   trägt eine feste Breite, die übrigen teilen sich den Rest. Eine zusätzliche
   Spalte im Editor fügt sich deshalb ein, ohne dass hier etwas nachzuziehen
   ist. */
.ft{ background:var(--ink-2); border-top:1px solid var(--hair); padding:clamp(60px,8vh,96px) var(--gut) 40px; }
.ft__top{ max-width:var(--maxw); margin-inline:auto; gap:48px; }
/* Der Abstand liegt am Bild, nicht am Bildblock — sonst kaeme der des
   figure-Elements dazu und es waeren 42px statt der gewuenschten 20px. */
.ft__brand .wp-block-image{ margin:0; }
/* Gleiche Hoehe wie die Marke im Kopf (.brand img, 60px) — im Fuss sass
   sie bisher zwanzig Pixel niedriger und wirkte wie eine andere Marke. */
.ft__brand img{ height:60px; width:auto; margin-bottom:20px; }
.ft__brand p{ color:var(--paper-dim); max-width:34ch; font-size:var(--fs-body); }
/* Verweise im Fließtext brauchen im Theme immer eine eigene Regel — sonst
   greift a{color:inherit} und sie sind vom Text nicht zu unterscheiden.
   Im Fuß bewusst leiser als auf den Inhaltsseiten: hellerer Text mit
   Haarlinie statt Gold, damit die vier Orte den Absatz nicht zerreißen. */
.ft__brand p a{
  color:var(--paper); border-bottom:1px solid var(--hair); padding-bottom:1px;
  transition:color .2s, border-color .2s;
}
.ft__brand p a:hover{ color:var(--gold); border-color:var(--gold-dim); }
.ft__h{ font-family:var(--f-body); font-weight:600; font-size:var(--fs-ui);
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 0 20px; }
.ft ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ft a{ color:var(--paper-dim); font-size:var(--fs-body); transition:color .2s; }
.ft a:hover{ color:var(--paper); }

/* Ort und Nummer untereinander statt in einer Zeile: „Ludwigshafen · 0621 490
   796 60" passt in eine 189px breite Spalte nicht und brach mitten in der
   Nummer um. Der Ort wird zur kleinen Zeile darüber — im Editor ist das ein
   fett ausgezeichnetes Wort, mehr braucht es nicht. */
.ft__list a strong{
  display:block; margin-bottom:3px;
  font-family:var(--f-body); font-weight:600; font-size:var(--fs-ui);
  letter-spacing:.16em; text-transform:uppercase; color:var(--paper-faint);
  transition:color .2s;
}
.ft__list a{ display:block; }
.ft__list a:hover strong{ color:var(--gold); }
.ft__bottom{ max-width:var(--maxw); margin:64px auto 0; padding-top:26px; border-top:1px solid var(--hair-soft);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:var(--fs-ui); letter-spacing:.06em; color:var(--paper-faint); }
.ft__bottom p{ margin:0; }
/* Soziale Netze in der Marken-Spalte. core/social-links, damit sich im
   Editor ein Kanal hinzufuegen oder entfernen laesst — der Kern liefert die
   Symbole gleich mit.

   Spezifitaet: Der Kern faerbt die Symbole ueber
   `.wp-block-social-links.is-style-logos-only .wp-block-social-link-anchor`
   (0,3,0). Die Regeln hier setzen die eigene Klasse dazwischen und kommen
   damit auf (0,4,0), statt mit !important zu arbeiten. */
.ft__social.wp-block-social-links{
  /* display:flex muss hier stehen: Weiter oben macht `.ft ul` (0,1,1) aus
     jeder Liste in der Fusszeile ein Grid und kommt in der Quelltextfolge
     nach der Flex-Regel des Kerns. Ohne diese Zeile stuenden die drei
     Symbole untereinander statt nebeneinander. */
  display:flex; flex-wrap:wrap; align-items:center;
  /* Der negative linke Rand gleicht das Innenpolster der Links aus, damit
     das erste Symbol an derselben Kante steht wie der Text darueber. Oben
     entsprechend 28 minus 11. */
  margin:19px 0 0 -9px; gap:0; padding:0;
}
.wp-block-social-links.is-style-logos-only.ft__social .wp-block-social-link{ margin:0; padding:0; }
.wp-block-social-links.is-style-logos-only.ft__social .wp-block-social-link-anchor{
  color:var(--paper-faint);
  transition:color .25s, transform .25s;
  /* Das Symbol misst 22 Pixel, ein Finger braucht mehr. Das Polster
     vergroessert die Tippflaeche auf 44 Pixel, ohne das Symbol zu aendern. */
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
}
.wp-block-social-links.is-style-logos-only.ft__social .wp-block-social-link-anchor:hover{
  color:var(--gold);
  transform:translateY(-2px);
}
.ft__social .wp-block-social-link-anchor svg{ width:26px; height:26px; }

.ft__bottom a:hover{ color:var(--gold); }

/* Impressum und Datenschutz muessen leicht erkennbar und mit zwei Klicks
   erreichbar sein. Die uebrigen Fusszeilen-Links geben sich erst beim
   Ueberfahren zu erkennen — diese beiden tragen deshalb dauerhaft eine
   dezente Unterstreichung. */
.ft__legal a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  text-decoration-color:var(--hair); transition:color .25s, text-decoration-color .25s; }
.ft__legal a:hover{ text-decoration-color:var(--gold); }

/* ============================================================
   404
   ============================================================ */
/* Der Kopf liegt fest ueber der Seite; ohne eigenes Polster stuende die
   Ueberschrift darunter. Dieselbe Groessenordnung wie bei den Kopfbildern
   der Inhaltsseiten, nur ohne Bild — eine Fehlerseite soll nicht wirken wie
   ein Angebot. */
.vier04{ padding-top:clamp(150px,20vh,230px); padding-bottom:clamp(80px,12vh,140px); }
.vier04__in{ max-width:var(--maxw); }
.vier04__lede{ margin:18px 0 0; max-width:52ch; }
.vier04__cta{ margin-top:clamp(28px,4vh,40px); }

/* Die Liste ist der eigentliche Dienst an dieser Stelle: vier Wege, jeder
   mit einem halben Satz Erklaerung. Zwei Spalten, damit sie nicht wie eine
   Restrampe wirkt. */
.vier04__liste{
  list-style:none; margin:clamp(40px,6vh,64px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1px; background:var(--hair-soft); border:1px solid var(--hair-soft);
}
.vier04__liste li{
  background:var(--ink); padding:22px clamp(18px,2.4vw,28px);
  display:grid; gap:6px; transition:background .3s;
}
.vier04__liste li:hover{ background:var(--anthra); }
.vier04__liste a{
  font-family:var(--f-display); font-weight:var(--fw-display);
  font-size:var(--fs-h3); line-height:1.1; color:var(--paper);
  transition:color .25s;
}
.vier04__liste li:hover a{ color:var(--gold); }
.vier04__liste span{ font-size:var(--fs-ui); color:var(--paper-dim); letter-spacing:.02em; }

.vier04__hinweis{ margin-top:clamp(30px,4vh,44px); max-width:60ch; }
.vier04__hinweis a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.vier04__hinweis a:hover{ color:var(--paper); }

@media (max-width:700px){
  .vier04__liste{ grid-template-columns:1fr; }
}

/* ============================================================
   PARTNERBAND (ueber dem Seitenfuss)
   ============================================================ */
/* Die Seitenpolster kommen sonst von .section; hier steht das Band fuer
   sich, also traegt es sie selbst. */
.partner{ background:var(--ink); border-top:1px solid var(--hair-soft); padding-inline:var(--gut); }
.partner__in{ padding-block:clamp(48px,7vh,82px); }

.partner__text{ max-width:64ch; }
.partner__h{
  margin:0; font-family:var(--f-display); font-weight:var(--fw-display);
  font-size:var(--fs-h3); line-height:1.1; letter-spacing:0; color:var(--paper);
}
.partner__lede{ margin:12px 0 0; color:var(--paper-dim); font-size:var(--fs-body); }

/* Eine Reihe statt zweier: Sieben Zeichen in gleich breiten Spalten, damit
   keines mehr Gewicht bekommt als das andere — unabhaengig davon, wie breit
   es gezeichnet ist. */
.partner__liste{
  list-style:none; margin:clamp(30px,4vh,48px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(7, 1fr);
  gap:clamp(8px,1vw,16px); align-items:center;
}
.partner__item{ display:flex; justify-content:center; }

/* Die Logos stehen in ihrer eigenen Farbe — auf Kundenwunsch, und weil
   mehrere von ihnen ohne Farbe kaum wiederzuerkennen waeren. Was die Reihe
   trotzdem ruhig haelt: gleich breite Rasterspalten und eine feste Hoehe mit
   object-fit:contain, unabhaengig davon, wie breit oder hoch das einzelne
   Zeichen gezeichnet ist. Die Haelfte davon bringt eine eigene Flaeche mit,
   zwei schwarze und eine weisse; daran laesst sich nichts aendern, ohne die
   Zeichen zu verfaelschen. */
.partner__logo{
  display:block; width:100%; max-width:200px;
  transition:opacity .3s, transform .3s;
  opacity:.92;
}
.partner__logo img{
  display:block; width:100%; height:clamp(54px,5.8vw,82px); object-fit:contain;
}
a.partner__logo:hover,
a.partner__logo:focus-visible{ opacity:1; transform:translateY(-2px); }
a.partner__logo:focus-visible{ outline:2px solid var(--gold-dim); outline-offset:6px; }

@media (hover: none){
  .partner__logo{ opacity:1; }
}

@media (max-width:1100px){
  .partner__liste{ grid-template-columns:repeat(4, 1fr); gap:clamp(12px,1.8vw,22px); }
}
@media (max-width:640px){
  .partner__liste{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:420px){
  .partner__liste{ grid-template-columns:repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce){
  .partner__logo{ transition:none; }
  a.partner__logo:hover{ transform:none; }
}

/* Der Widerrufs-Knopf mitten im Rechtstext: Er sieht aus wie ein Verweis,
   braucht aber die Luft eines Absatzes um sich. */
.legal .web2b-consent-link{
  display:inline-block; margin:6px 0 4px;
  color:var(--gold); text-underline-offset:4px;
}
.legal .web2b-consent-link:hover{ color:var(--paper); }

/* Das Consent-Banner des Plugins bringt neutrale Farben mit und liest sie
   aus CSS-Variablen. Hier bekommt es die Palette des Themes — so muss das
   Plugin fuer dieses Projekt nicht angefasst werden. */
.web2b-consent{
  --w2b-grund:var(--ink);
  --w2b-schrift:var(--paper);
  --w2b-leise:var(--paper-dim);
  --w2b-linie:var(--hair-soft);
  --w2b-ja:var(--gold);
  --w2b-ja-schrift:#fff;
}

/* Rechte Haelfte der Schlusszeile: Impressum, Datenschutz und — sofern das
   Consent-Plugin laeuft — der Widerruf. Der Trenner haengt am Knopf selbst,
   nicht an der Zeile: Ohne Plugin gibt es keinen Knopf und damit auch keinen
   einsamen Mittelpunkt. */
.ft__rechts{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ft__rechts p{ margin:0; }
.ft__rechts .web2b-consent-link{
  color:inherit; font-size:var(--fs-ui); letter-spacing:.06em;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  text-decoration-color:var(--hair); transition:color .25s, text-decoration-color .25s;
}
.ft__rechts .web2b-consent-link:hover{ color:var(--gold); text-decoration-color:var(--gold); }
/* display:inline-block, damit die Unterstreichung des Knopfes nicht bis in
   den Trenner laeuft — aus einem Inline-Kind kann man sie nicht entfernen. */
.ft__rechts .web2b-consent-link::before{
  content:"·"; display:inline-block; margin-right:.5em;
  text-decoration:none; color:var(--paper-faint);
}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.phero{ position:relative; overflow:hidden; padding:calc(140px + 6vh) var(--gut) clamp(60px,9vh,110px); }
.phero__bg{ position:absolute; inset:0; }
.phero__bg img{ width:100%;height:100%;object-fit:cover; opacity:.74; filter:grayscale(.08); }
.phero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.35) 0%, rgba(10,10,11,.60) 55%, rgba(10,10,11,.77) 100%); }
.phero__in{ position:relative; max-width:var(--maxw); margin-inline:auto; }

/* ============================================================
   MENU PAGE
   ============================================================ */
.mtabs{ display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--hair-soft); padding-bottom:0; margin-bottom:48px; }
.mtab{ background:transparent; border:0; color:var(--paper-dim); padding:16px 4px; margin-right:22px;
  font-size:var(--fs-ui); letter-spacing:.04em; position:relative; transition:color .25s; }
.mtab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.mtab:hover{ color:var(--paper); }
.mtab.active{ color:var(--paper); }
.mtab.active::after{ transform:scaleX(1); }
.mpanel{ display:none; }
.mpanel.show{ display:block; animation:rise .5s ease; }
.mlist{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(40px,6vw,90px); }
.mitem{ display:flex; gap:18px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--hair-soft); }
.mitem__main{ flex:1; }
.mitem__head{ display:flex; align-items:baseline; gap:10px; }
.mitem h4{ margin:0; font-size:var(--fs-body); font-weight:600; letter-spacing:.01em; }
.mitem .jp{ font-family:var(--f-serif); color:var(--gold); font-size:var(--fs-ui); }
.mitem .leader{ flex:1; border-bottom:1px dotted var(--hair); margin:0 4px 5px; min-width:20px; }
.mitem .price{ font-variant-numeric:tabular-nums; color:var(--paper); font-weight:600; font-size:var(--fs-body); }
.mitem p{ margin:6px 0 0; color:var(--paper-dim); font-size:var(--fs-ui); max-width:46ch; }
.mitem .plate-i{ width:11px;height:11px;border-radius:50%; flex:0 0 auto; align-self:center; }
.tags{ display:inline-flex; gap:6px; margin-left:4px; }
.tag{ font-size:var(--fs-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--gold); border:1px solid var(--hair); padding:2px 6px; }

/* ============================================================
   CATERING PAGE extras
   ============================================================ */
.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stepcard{ border:1px solid var(--hair-soft); padding:32px 28px; min-height:230px; display:flex; flex-direction:column; justify-content:space-between; transition:.4s; }
.stepcard:hover{ border-color:var(--gold-dim); background:var(--anthra); }
.stepcard .n{ font-family:var(--f-display); font-weight:700; font-size:var(--fs-h3); color:var(--anthra-3); line-height:1; }
.stepcard:hover .n{ color:var(--gold); }
.stepcard h4{ margin:24px 0 10px; font-size:var(--fs-body); font-weight:600; }
.stepcard p{ margin:0; color:var(--paper-dim); font-size:var(--fs-body); }
.callout{ border:1px solid var(--red); background:linear-gradient(180deg, rgba(226,0,26,.08), transparent); padding:30px 34px; display:flex; gap:20px; align-items:flex-start; }
.callout .ico{ color:var(--red); font-size:var(--fs-h3); flex:0 0 auto; }
.callout b{ color:var(--paper); }
.pkg-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pkg{ border:1px solid var(--hair-soft); padding:36px 32px; display:flex; flex-direction:column; transition:.4s; }
.pkg:hover{ border-color:var(--gold-dim); transform:translateY(-4px); }
.pkg.feat{ border-color:var(--gold-dim); background:var(--anthra); }
.pkg__tag{ font-size:var(--fs-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.pkg h3{ font-family:var(--f-display); font-weight:var(--fw-display); text-transform:none; font-size:var(--fs-h3); margin:18px 0 6px; letter-spacing:0; }
.pkg .from{ color:var(--paper-dim); font-size:var(--fs-body); margin-bottom:24px; }
.pkg .from b{ color:var(--paper); font-size:var(--fs-lede); font-weight:600; }
.pkg ul{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:13px; }
.pkg li{ color:var(--paper-dim); font-size:var(--fs-body); padding-left:22px; position:relative; }
.pkg li::before{ content:"—"; position:absolute; left:0; color:var(--gold); }
.pkg .btn{ margin-top:auto; }

/* ============================================================
   KARTEN / PDF-DOWNLOADS (Speisekarten-Seite)
   ============================================================ */
.kartblock{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(34px,5vw,80px); align-items:center; }
.kartblock + .kartblock{ margin-top:clamp(64px,9vh,120px); padding-top:clamp(64px,9vh,120px); border-top:1px solid var(--hair-soft); }
.kartblock--rev{ grid-template-columns:1.18fr .82fr; }
.kartblock--rev .kartcover{ order:2; }

/* Kompakte Fassung der Kartenblocks (Speisekarte, seit 1.52).
   Ohne Cover-Bilder: Die beiden Karten stehen nebeneinander, in jeder erst
   die Fassung zum Lesen im Browser, darunter das PDF zum Mitnehmen. Vorher
   lagen beide Wege in getrennten Abschnitten — wer oben herunterlud, erfuhr
   erst weiter unten, dass es die Karte auch zum Aufklappen gibt. */
.kartrow--flach{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,72px); align-items:start;
}
.kartrow--flach .kartblock{ display:block; }
.kartrow--flach .kartblock + .kartblock{ margin-top:0; padding-top:0; border-top:0; }
@media (max-width:860px){
  .kartrow--flach{ grid-template-columns:1fr; row-gap:clamp(48px,7vh,72px); }
}

/* Typ-Marke, die vorher auf dem Cover stand */
.kartlabel{
  display:block; margin-bottom:12px;
  font-size:var(--fs-ui); font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
}
.kartlabel--rest{ color:var(--gold); }
.kartlabel--del{ color:var(--red); }

/* Zwischenzeile ueber der PDF-Liste — sie macht den zweiten Weg sichtbar,
   ohne ihn gleichwertig neben den ersten zu stellen.

   Die Klasse allein reichte nicht: `.kartblock__c > p` (0,1,1) setzt weiter
   unten margin:0 und schlaegt sie. Deshalb hier mit demselben Kindselektor. */
.kartblock__c > p.kartblock__oder{
  margin:30px 0 0; font-size:var(--fs-ui); color:var(--paper-faint);
  letter-spacing:.06em; max-width:none;
}
.kartblock__oder + .dl-list{ margin-top:12px; }

/* Marke, Titel und Beschreibung standen sonst ohne Luft aufeinander. */
.kartrow--flach .kartblock__c h3{ margin:0 0 12px; }
.kartrow--flach .kartblock__c > p{ line-height:1.7; }

/* Karten-Cover: Bild als "Karte" mit Farbkante + Typ-Label */
.kartcover{ position:relative; aspect-ratio:3/4; overflow:hidden; border:1px solid var(--hair-soft); border-top:2px solid; background:var(--anthra); }
.kartcover img{ width:100%; height:100%; object-fit:cover; opacity:.5; transition:transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.kartblock:hover .kartcover img{ transform:scale(1.05); opacity:.62; }
.kartcover::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,11,.35) 0%, rgba(10,10,11,.88) 100%); }
.kartcover__c{ position:absolute; inset:0; z-index:2; padding:clamp(22px,3vw,34px); display:flex; flex-direction:column; justify-content:flex-end; }
.kartcover__t{ font-family:var(--f-display); font-weight:var(--fw-display); font-size:var(--fs-h3); line-height:1.1; letter-spacing:0; }
.kartcover--rest{ border-top-color:var(--gold-dim); }

/* Deckel weg, wo das Motiv selbst die Aussage ist. Die Kartencover sind
   bewusst abgedunkelt, damit der Titel darauf steht — bei einem Foto vom
   Essen kippt das ins Gegenteil. Hier also volle Helligkeit und ein
   Verlauf nur noch unten, so weit die Beschriftung reicht: Ohne ihn
   staende weisse Schrift auf einer hellen Platte. */
/* Zwei Regeln setzen hier opacity: .kartcover img und, spezifischer,
   .kartcover > .wp-block-image img (0,2,1). Deshalb den Modifikator
   doppelt schreiben — sonst bliebe das Bild bei halber Deckkraft. */
.kartcover.kartcover--foto img,
.kartcover.kartcover--foto > .wp-block-image img,
.kartblock:hover .kartcover.kartcover--foto > .wp-block-image img{ opacity:1; }
.kartcover--foto::after{
  background:linear-gradient(180deg, rgba(10,10,11,0) 46%, rgba(10,10,11,.55) 74%, rgba(10,10,11,.86) 100%);
}

/* ---- Hochkantes Video statt Bild -------------------------------------
   Der Abschnitt trug vorher ein 4:5-Bild. Das Kaestchen behaelt diesen
   Fussabdruck, damit die Zeilenhoehe des Abschnitts gleich bleibt; das
   hochkante Video (9:16) steht mittig darin. So muss der Player nichts
   schwarz auffuellen, und einen Rahmen gibt es nicht. */
/* ---- YouTube Shorts ------------------------------------------------
   Hochkant, 9:16. Der Rahmen fuellt seine Spalte, das iframe fuellt den
   Rahmen — kein schwarzes Auffuellen im Player, kein Leerraum daneben. */
.yt-short{ aspect-ratio:9/16; overflow:hidden; }
.yt-short iframe{ width:100%; height:100%; border:0; display:block; }

/* Dreierreihe (/event-catering/). Sie nutzt die volle Inhaltsbreite, die
   Luecke ist mit 20px enger als die 86px des Kerns — beides zugunsten der
   Videobreite: drei Spalten zu 414 x 735 Pixeln. Hochkant heisst, dass die
   Hoehe fast doppelt so schnell waechst wie die Breite; der Abschnitt wird
   dadurch hoch, das ist hier so gewollt. */
.shortsrow.wp-block-columns{ gap:20px; }

@media (max-width:781px){
  /* Gestapelt waeren das rund 1800 Pixel Scrollweg. Stattdessen eine
     seitlich wischbare Reihe mit Einrastpunkten, wie man Shorts kennt.
     Die !important stehen gegen den Kern, der hier auf einspaltig
     umstellt (flex-wrap:wrap und flex-basis:100% jeweils !important). */
  .shortsrow.wp-block-columns{
    flex-wrap:nowrap !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    gap:14px;
  }
  .shortsrow.wp-block-columns::-webkit-scrollbar{ display:none; }
  .shortsrow.wp-block-columns > .wp-block-column{
    flex:0 0 86% !important;
    scroll-snap-align:center;
  }
}

.kartcover--del{ border-top-color:var(--red); }

.kartblock__c .kicker{ display:block; margin-bottom:18px; }
.kartblock__c h2{ margin-bottom:16px; }
.kartblock__c > p{ color:var(--paper-dim); max-width:48ch; margin:0; }

/* Download-Liste */
.dl-list{ margin-top:34px; display:grid; gap:1px; background:var(--hair-soft); border:1px solid var(--hair-soft); }
.dl{ display:flex; align-items:center; gap:20px; padding:20px 22px; background:var(--ink);
  transition:background .3s, padding-left .3s; border-left:2px solid transparent; }
.dl:hover{ background:var(--anthra); padding-left:28px; }
.dl--rest:hover{ border-left-color:var(--gold); }
.dl--del:hover{ border-left-color:var(--red); }
.dl__ico{ flex:0 0 auto; width:42px; height:52px; border:1px solid var(--hair); display:grid; place-items:center;
  font-size:var(--fs-ui); font-weight:600; letter-spacing:.1em; color:var(--paper-faint); position:relative;
  transition:color .3s, border-color .3s; }
.dl__ico::before{ content:""; position:absolute; top:-1px; right:-1px; width:11px; height:11px;
  background:var(--ink); border-left:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.dl:hover .dl__ico{ border-color:var(--gold-dim); color:var(--gold); }
.dl--del:hover .dl__ico{ border-color:rgba(226,0,26,.5); color:var(--red); }
.dl__main{ flex:1; min-width:0; }
.dl__main b{ display:block; font-size:var(--fs-body); font-weight:600; letter-spacing:.01em; }
.dl__main span{ font-size:var(--fs-ui); color:var(--paper-faint); letter-spacing:.06em; }
.dl__arrow{ flex:0 0 auto; width:34px; height:1px; background:var(--hair); position:relative; transition:width .35s ease, background .3s; }
.dl__arrow::after{ content:""; position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); color:var(--paper-faint); transition:color .3s; }
.dl:hover .dl__arrow{ width:52px; background:var(--gold); }
.dl:hover .dl__arrow::after{ color:var(--gold); }
.dl--del:hover .dl__arrow{ background:var(--red); }
.dl--del:hover .dl__arrow::after{ color:var(--red); }
.dl--soon{ opacity:.5; cursor:default; }
.dl--soon:hover{ background:var(--ink); padding-left:22px; border-left-color:transparent; }
.dl--soon:hover .dl__ico{ border-color:var(--hair); color:var(--paper-faint); }
.dl--soon .dl__main span{ color:var(--paper-faint); }
.dl__soon{ flex:0 0 auto; font-size:var(--fs-ui); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold-dim); padding:5px 10px; white-space:nowrap; }
.dl--del .dl__soon{ color:var(--red); border-color:rgba(226,0,26,.45); }

/* Online-Karten Band */
.online-karten{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair-soft);
  border:1px solid var(--hair-soft); margin-top:34px; }
.okart{ background:var(--ink); padding:28px 24px; display:flex; flex-direction:column; gap:10px;
  transition:background .35s; border-top:2px solid transparent; }
.okart:hover{ background:var(--anthra); border-top-color:var(--red); }
.okart b{ font-family:var(--f-display); font-weight:var(--fw-display); font-size:var(--fs-h3); letter-spacing:0; }
.okart span{ font-size:var(--fs-ui); color:var(--paper-dim); }
.okart .go{ margin-top:auto; padding-top:16px; font-size:var(--fs-ui); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red); }

@media (max-width:1080px){
  .online-karten{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .kartblock, .kartblock--rev{ grid-template-columns:1fr; }
  .kartblock--rev .kartcover{ order:0; }
  .kartcover{ aspect-ratio:16/10; }
  .online-karten{ grid-template-columns:1fr; }
}

/* Spezifischer als .pkg-grid (0,2,0) und an min-width gebunden, damit die
   spätere @media(max-width:1080px){.pkg-grid{1fr}}-Regel sie nicht schlägt. */
@media (min-width:861px){ .pkg-grid.pkg-grid--2{ grid-template-columns:1fr 1fr; } }
.pkg--gold{ border-top:2px solid var(--gold-dim); }
.pkg--online{ border-top:2px solid var(--red); }
.pkg--online .pkg__tag{ color:var(--red); }
.pkg--online li::before{ color:var(--red); }
.pkg__price{ font-family:var(--f-display); font-weight:var(--fw-display); font-size:var(--fs-h3); line-height:1; letter-spacing:0; }
.pkg__price small{ font-size:var(--fs-h3); color:var(--paper-faint); font-weight:400; font-family:var(--f-body); }
.gs-ways{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
.gs-way{ display:inline-flex; align-items:center; gap:9px; font-size:var(--fs-ui); letter-spacing:.06em;
  color:var(--paper-dim); border:1px solid var(--hair-soft); padding:9px 14px; }
.gs-way i{ width:5px; height:5px; border-radius:50%; background:var(--gold); display:block; }
@media (max-width:860px){ .gs-ways{ gap:8px; } }

/* 3-Schritt-Variante: höhere Spezifität + min-width, damit die spätere
   @media(max-width:1080px){.steps-grid{1fr 1fr}}-Regel sie nicht schlägt. */
@media (min-width:861px){ .steps-grid.steps-grid--3{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:860px){ .steps-grid.steps-grid--3{ grid-template-columns:1fr; } }

/* Einzelpaket-Panel */
.cpkg__head{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:10px; }
.cpkg__cap{ font-family:var(--f-serif); font-size:var(--fs-lede); color:var(--gold); }
.cpkg__incl{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:1px;
  background:var(--hair-soft); border:1px solid var(--hair-soft); }
.cpkg__incl li{ background:var(--ink); padding:18px 22px; display:flex; align-items:baseline; gap:16px;
  transition:background .3s; }
.cpkg__incl li > div{ flex:1; }
.cpkg__incl .dl__soon{ align-self:center; }
.cpkg__incl li:hover{ background:var(--anthra); }
.cpkg__incl .n{ font-family:var(--f-serif); color:var(--gold); font-size:var(--fs-body);
  flex:0 0 auto; width:22px; }
.cpkg__incl b{ font-weight:600; font-size:var(--fs-body); }
.cpkg__incl span{ color:var(--paper-dim); font-size:var(--fs-body); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ display:grid; gap:1px; background:var(--hair-soft); border:1px solid var(--hair-soft); margin-top:34px; }
.faq details{ background:var(--ink); transition:background .3s; }
.faq details[open]{ background:var(--anthra); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 24px; display:flex; align-items:center; gap:20px;
  font-size:var(--fs-body); font-weight:600; letter-spacing:.01em; transition:color .25s; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--gold); }
.faq summary .q{ flex:1; }
.faq summary .ico{ flex:0 0 auto; width:14px; height:14px; position:relative; }
.faq summary .ico::before,
.faq summary .ico::after{ content:""; position:absolute; background:var(--gold); transition:transform .3s ease, opacity .3s; }
.faq summary .ico::before{ top:6px; left:0; width:14px; height:1px; }
.faq summary .ico::after{ left:6px; top:0; width:1px; height:14px; }
.faq details[open] summary .ico::after{ transform:rotate(90deg); opacity:0; }
.faq details[open] summary{ color:var(--gold); }
.faq__a{ padding:0 24px 24px 58px; color:var(--paper-dim); font-size:var(--fs-ui); max-width:70ch; }
.faq__a p{ margin:0; }
@media (max-width:640px){ .faq__a{ padding-left:24px; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  /* Brand über die volle Breite, die Link-Spalten dann sauber 2×2 — keine Waise.
     core/columns setzt oberhalb 782px flex-wrap:nowrap !important und
     flex-grow:1 mit Spezifität (0,3,0). Ohne beides hier zurückzunehmen
     würden die Spalten nur schrumpfen statt umzubrechen — das !important
     ist die Gegenrechnung zum !important von Core, nicht Bequemlichkeit. */
  .ft__top.wp-block-columns{ gap:40px; flex-wrap:wrap !important; }
  .ft__top > .wp-block-column{ flex-basis:calc(50% - 20px) !important; flex-grow:0 !important; }
  .ft__top > .ft__brand{ flex-basis:100% !important; }
  .menu-grid{ grid-template-columns:1fr 1fr; }
  .steps-grid{ grid-template-columns:1fr 1fr; }
  .pkg-grid{ grid-template-columns:1fr; }
  .mlist{ grid-template-columns:1fr; }
}

/* Zwischenbreiten: den Kopf enger stellen, bevor es klemmt. Seit dem
   zweiten Knopf braucht die rechte Seite 290 statt 155 Pixel, deshalb
   setzt das frueher ein als vorher (1280). */
@media (max-width:1400px){
  .hdr__in{ gap:16px; }
  .nav a, .nav button.navlink{ padding:10px 10px; font-size:var(--fs-ui); }
  .hdr__right{ gap:8px; }
  /* Seit der Umstellung auf core/button heisst der Knopf im Kopf nicht
     mehr .btn — beide Selektoren, damit die Regel nichts uebersieht. */
  .hdr__right .btn,
  .hdr__right .wp-block-button__link{ padding:10px 13px; letter-spacing:.08em; }
}

/* Umschalten auf die Schublade, bevor der Kopf ueberlaeuft.
   Gemessen mit beiden Schaltflaechen: Marke 178 + Menue 717 + Knoepfe.

   Die Grenze hing lange bei 1339px, weil --fs-ui auf 16px ging und das
   Menue dadurch breiter wurde. Seit 1.53.3 sind die beiden Knoepfe im Kopf
   kompakter (14px, engeres Polster) und zusammen nur noch 258 statt 319
   Pixel breit. Im Browser nachgemessen — Schublade dafuer voruebergehend
   abgeschaltet: bei 1240px ueberlappen Menue und Knoepfe noch um 20 Pixel,
   bei 1290px bleiben 21 Pixel Luft. Die Grenze liegt deshalb jetzt bei
   1289px statt 1339px.

   Folge: 1280er Notebooks bekommen weiterhin die Schublade, alles darueber
   das volle Menue. Wer die Grenze weiter senken will, muss entweder Text
   aus dem Menue nehmen oder die Knoepfe noch kleiner machen. */
@media (max-width:1289px){
  /* Reservierung entfaellt hier: Der Punkt steht in der Schublade, und der
     Kopf hat neben Logo und Menueknopf keinen Platz dafuer. */
  .nav, .hdr__right .btn, .hdr__right .wp-block-buttons, .kanji-mark{ display:none; }
  .burger{ display:inline-flex; }
}

/* Auf dem Telefon ist das Logo im Kopf kleiner — 60px nehmen dort zusammen
   mit der Hinweisleiste zu viel vom ersten Bildschirm weg. Bewusst auf .hdr
   eingegrenzt: Die Marke im Fuss traegt dieselbe Klasse, steht aber ganz
   unten und darf ihre 60px behalten. */
@media (max-width:700px){
  .hdr .brand img{ height:40px; }
}
@media (max-width:860px){
  .split, .split--rev, .resv__grid{ grid-template-columns:1fr; }
  .split--rev .figure{ order:-1; }
  .loc-row{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:1fr; }
  .form{ grid-template-columns:1fr; }
  .menu-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   MOBILE DRAWER
   Kopf und Fuss stehen fest, nur die Mitte scrollt. Der Inhalt ist
   hoeher als ein Handy-Viewport, ohne eigenen Scrollbereich waeren die
   letzten Eintraege unerreichbar.
   ============================================================ */
.burger{ flex-direction:column; gap:5px; background:transparent; border:0; padding:8px; }
.burger span{ width:24px; height:1.5px; background:var(--paper); transition:transform .35s ease, opacity .25s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:70;
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(177,156,131,.10), transparent 60%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), visibility .45s;
  visibility:hidden;
  padding:22px var(--gut) calc(22px + env(safe-area-inset-bottom, 0px));
}
.drawer.open{ transform:none; visibility:visible; }

/* Kopf */
.drawer__top{
  flex:0 0 auto; display:flex; justify-content:space-between; align-items:center;
  padding-bottom:20px; border-bottom:1px solid var(--hair-soft);
}
.drawer__logo{ height:30px; width:auto; }
.drawer__x{
  position:relative; width:42px; height:42px; flex:0 0 auto;
  background:transparent; border:1px solid var(--hair-soft); border-radius:50%;
  transition:border-color .3s, background .3s;
}
.drawer__x span{
  position:absolute; left:50%; top:50%; width:16px; height:1.5px; background:var(--paper);
  transform-origin:center;
}
.drawer__x span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.drawer__x span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); }
.drawer__x:hover, .drawer__x:focus-visible{ border-color:var(--gold); background:rgba(177,156,131,.10); }

/* Scrollbereich */
.drawer__scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  /* Seitlicher Innenabstand, per negativem Rand wieder herausgezogen: Die
     Textspalte steht damit exakt wie vorher, der Kasten selbst ist aber
     breiter. Nötig, weil overflow-y:auto die Waagerechte mitklemmt — die
     um 45 Grad gedrehte Pfeilspitze ragt über ihre 7px-Box hinaus und war
     abgeschnitten, ebenso die Standort-Kacheln mit ihrem negativen Rand. */
  padding:26px 16px 22px; margin-inline:-16px;
  scrollbar-width:none;
}
.drawer__scroll::-webkit-scrollbar{ display:none; }

/* Hauptmenue */
.drawer__nav{ display:flex; flex-direction:column; }
.drawer__nav a{
  position:relative;
  font-family:var(--f-display); font-weight:var(--fw-display); font-size:var(--fs-h3); letter-spacing:0; line-height:1.2;
  padding:13px 0; border-bottom:1px solid var(--hair-soft);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  transition:color .25s;
}
.drawer__nav a::after{
  content:""; width:7px; height:7px; flex:0 0 auto;
  border-top:1.4px solid var(--gold); border-right:1.4px solid var(--gold);
  transform:rotate(45deg); opacity:.45; transition:opacity .25s, transform .25s;
}
.drawer__nav a:active{ color:var(--gold); }
.drawer__nav a:active::after{ opacity:1; transform:rotate(45deg) translate(2px,-2px); }
.drawer__nav a.active{ color:var(--gold); }
.drawer__nav a.active::after{ opacity:1; }

/* Standort-Gruppe: gleiche Logik wie das Dropdown auf dem Desktop */
.drawer__group{ margin-top:34px; }
.drawer__label{
  display:flex; align-items:center; gap:12px;
  font-size:var(--fs-ui); font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  margin-bottom:10px;
}
.drawer__label::after{ content:""; flex:1; height:1px; }
.drawer__label--rest{ color:var(--gold); }
.drawer__label--rest::after{ background:var(--hair); }
.drawer__label--del{ color:var(--red); margin-top:26px; }
.drawer__label--del::after{ background:rgba(226,0,26,.28); }

.drawer__loc{
  position:relative;
  display:flex; flex-direction:column; gap:3px;
  padding:12px 34px 12px 14px; margin:0 -14px;
  border-left:2px solid var(--gold-dim);
  background:rgba(244,241,234,.03);
  transition:background .25s;
}
/* Derselbe Winkel wie an den Menuepunkten. Ohne ihn lesen sich die
   Standorte wie eine Aufzaehlung, nicht wie Verweise. */
.drawer__loc::after{
  content:""; position:absolute; right:14px; top:50%;
  width:7px; height:7px; margin-top:-4px;
  border-top:1.4px solid var(--gold); border-right:1.4px solid var(--gold);
  transform:rotate(45deg); opacity:.45; transition:opacity .25s, transform .25s;
}
.drawer__loc--del::after{ border-color:var(--red); }
.drawer__loc:active::after{ opacity:1; transform:rotate(45deg) translate(2px,-2px); }
.drawer__loc + .drawer__loc{ margin-top:8px; }

/* In der Schublade dieselbe Aufteilung wie in der Klappliste am Desktop:
   links der Standort, rechts der Bestellshop. Der farbige Rand sitzt an
   der Zeile, die Kachel gibt ihn ab. */
.drawerrow{ margin:0 -14px; border-left-width:2px; }
.drawerrow + .drawerrow{ margin-top:8px; }
.drawerrow .drawer__loc{ margin:0; border-left:0; flex:1 1 auto; }
.drawerrow{ border-left-color:var(--gold-dim); background:rgba(244,241,234,.03); }
.drawerrow--del{ border-left-color:var(--red); }
.drawerrow:hover, .drawerrow:active{ background:rgba(244,241,234,.07); }
.drawerrow .locshop{ border-left-color:var(--hair-soft); padding:0 32px 0 14px; }
.drawer__loc b{ font-size:var(--fs-body); font-weight:600; letter-spacing:.02em; }
/* Die Beizeile traegt Adresse und Rufnummer. Mit --fs-ui auf 16px passt
   beides nicht mehr in eine Zeile — sie darf umbrechen, aber nur am
   Trennpunkt. Adresse und Nummer stehen dafuer je in einem <i>, das nicht
   umbricht; kursiv wird davon nichts, das Theme setzt em/i aufrecht. */
.drawer__loc span{ font-size:var(--fs-ui); color:var(--paper-dim); letter-spacing:.02em; }
.drawer__loc span i{ white-space:nowrap; font-style:normal; }
.drawer__loc--del{ border-left-color:var(--red); }
.drawer__loc:active{ background:rgba(244,241,234,.07); }
.drawer__all{ margin-top:22px; }

/* Fuss */
/* Reservierung und Lieferung standen bis 1.46 im Fuss der Schublade. Dort
   sah sie nur, wer das Menue oeffnet — jetzt stehen sie in .mobar am
   unteren Rand, durchgehend sichtbar. */

/* Gestaffelter Auftritt */
@media (prefers-reduced-motion: no-preference){
  .drawer.open .drawer__nav a,
  .drawer.open .drawer__label,
  .drawer.open .drawer__loc,
  .drawer.open .drawer__all{
    opacity:0; animation:drawerIn .45s cubic-bezier(.2,.8,.2,1) forwards;
  }
  .drawer.open .drawer__nav a:nth-child(1){ animation-delay:.10s; }
  .drawer.open .drawer__nav a:nth-child(2){ animation-delay:.15s; }
  .drawer.open .drawer__nav a:nth-child(3){ animation-delay:.20s; }
  .drawer.open .drawer__nav a:nth-child(4){ animation-delay:.25s; }
  .drawer.open .drawer__nav a:nth-child(5){ animation-delay:.30s; }
  .drawer.open .drawer__group > *{ animation-delay:.34s; }
}
@keyframes drawerIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ---- Shabu-Shabu auf der Startseite -------------------------------------
   Zwei Splits im Wechsel. Der zweite braucht Abstand zum ersten — .split
   selbst bringt nur den Spaltenabstand mit, keinen zwischen zwei Splits. */
.shabu__zwei,
/* Die Filmreihe braucht denselben Abstand wie der zweite Split. */
.shabu__filme{ margin-top:clamp(56px,8vh,110px); }

/* Die englische Merkzeile steht wie eine Auszeichnung, nicht wie Fliesstext:
   Zweitschrift, gross, hell — dieselbe Rolle wie eine .lede, aber am Ende
   des Absatzes statt an seinem Anfang. */
.shabu__claim{
  font-family:var(--f-display); font-weight:var(--fw-display);
  font-size:var(--fs-h3); line-height:1.15; letter-spacing:0;
  color:var(--paper); margin:30px 0 26px;
}

/* ---- Feste Handlungsleiste am unteren Rand ------------------------------
   Nur dort, wo auch die Schublade greift (bis 1289px) — oberhalb stehen
   Reservierung und Lieferung als Knoepfe im Kopf, eine zweite Leiste waere
   doppelt.

   Sie liegt ueber dem Inhalt (z-index 60), aber unter der Schublade (70):
   Ist das Menue offen, deckt es die Leiste zu, wie es sich gehoert. Der
   Kopf liegt bei 50 und damit ebenfalls darunter — beide beruehren
   einander nicht, der eine klebt oben, die andere unten. */
.mobar{ display:none; }

@media (max-width:1289px){
  .mobar{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:grid; grid-template-columns:1fr 1fr;
    background:rgba(10,10,11,.94);
    backdrop-filter:blur(14px);
    border-top:1px solid var(--hair-soft);
    /* Auf iPhones liegt unten der Bedienbalken. Ohne diese Zeile schoebe
       er sich ueber die untere Haelfte der Schaltflaechen. */
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }

  .mobar__btn{
    display:flex; align-items:center; justify-content:center;
    padding:10px 8px; min-height:42px;
    font-family:var(--f-body); font-weight:600;
    /* Bewusste Ausnahme von der Skala: 14px, fest. Die kleinste Stufe
       (--fs-ui) steht seit 1.44 auf 16px und macht die Leiste hier zu
       schwer — sie soll begleiten, nicht auftrumpfen. Eine eigene Stufe
       fuer diese eine Stelle waere die Skala nicht wert. */
    font-size:14px;
    letter-spacing:.08em; text-transform:uppercase; text-align:center;
    color:var(--paper); background:transparent;
    border:0; border-left:1px solid transparent;
    transition:background .25s, color .25s;
  }
  .mobar__btn:active{ background:rgba(244,241,234,.08); }

  /* Beide Haelften gefuellt, in den Farben ihrer Rolle: Gold fuers
     Restaurant, Rot fuer die Lieferung. */
  .mobar__btn--res{
    background:var(--gold); color:#fff;
  }
  .mobar__btn--res:active{ background:var(--gold-deep); }

  .mobar__btn--del{
    background:var(--red); color:var(--paper);
    border-left-color:rgba(0,0,0,.25);
  }
  .mobar__btn--del:active{ background:var(--red-deep); }

  /* Der Seitenfuss braucht Luft, sonst verdeckt die Leiste die letzte
     Zeile. 42px Schaltflaeche plus Rand plus der Bedienbalken. */
  body{ padding-bottom:calc(43px + env(safe-area-inset-bottom, 0px)); }
}

/* Zwischen Telefon und Schublandengrenze wuerde die Leiste sonst zwei
   600 Pixel breite Schaltflaechen mit winziger Schrift in der Mitte zeigen.
   Der Grund bleibt durchgehend, die Knoepfe bekommen eine Hoechstbreite und
   ruecken zusammen — so wirkt die Leiste gesetzt statt gedehnt. */
@media (min-width:701px) and (max-width:1289px){
  .mobar{ grid-template-columns:minmax(0,300px) minmax(0,300px); justify-content:center; }
  .mobar__btn{ border-left:1px solid var(--hair-soft); }
  .mobar__btn--del{ border-left-color:rgba(0,0,0,.25); }
  .mobar__btn:last-child{ border-right:1px solid rgba(0,0,0,.25); }
}

@media (prefers-reduced-motion: reduce){
  .mobar__btn{ transition:none; }
}

/* Sehr flache Geraete: Hauptmenue etwas kompakter */
@media (max-height:680px){
  .drawer__nav a{ font-size:var(--fs-h3); padding:10px 0; }
  .drawer__group{ margin-top:26px; }
}

/* Hintergrund darf nicht mitscrollen, solange der Drawer offen ist */
html.drawer-open, html.drawer-open body{ overflow:hidden; }

/* reveal on scroll — hidden state only armed when JS is running */
[data-reveal]{ transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
html.js-anim [data-reveal]{ opacity:0; transform:translateY(34px); }
html.js-anim [data-reveal].in{ opacity:1; transform:none; }

/* GUARANTEED-VISIBLE FALLBACK: set by a JS timer independent of the animation
   clock / IntersectionObserver, so content can never get stuck invisible. */
html.anim-done .hero__kicker,
html.anim-done .hero h1,
html.anim-done .hero__lede,
html.anim-done .hero__cta,
html.anim-done [data-reveal]{ opacity:1 !important; transform:none !important; animation:none !important; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-delay:0s !important; transition-duration:.001ms !important; }
  .hero__kicker, .hero h1, .hero__lede, .hero__cta{ opacity:1 !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}



/* ============================================================
   WORDPRESS BLOCK INTEGRATION
   Das Designsystem sitzt auf nativem Gutenberg-Markup, damit alle
   Seiteninhalte im Block-Editor pflegbar bleiben.
   ============================================================ */

.hero__inner{ align-items:flex-start; text-align:left; }
.admin-bar .hdr{ top:32px; }
.admin-bar .hdr.has-ann{ top:calc(32px + var(--ann-h, 28px)); }
@media (max-width:782px){
  .admin-bar .hdr{ top:46px; }
  .admin-bar .hdr.has-ann{ top:calc(46px + var(--ann-h, 28px)); }
}

.wp-block-group.section{ margin-block:0; }
.wp-block-html{ margin:0; }

/* --- Buttons ---------------------------------------------------------- */
.wp-block-buttons{ gap:16px; }
.wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  background:var(--red); color:#fff;
  font-family:var(--f-body); font-weight:600; font-size:var(--fs-ui);
  letter-spacing:.14em; text-transform:uppercase;
  padding:15px 28px; border:0; border-radius:0;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, box-shadow .3s;
}
.wp-block-button__link:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(226,0,26,.30); color:#fff; }
.wp-block-button.is-style-ghost .wp-block-button__link{
  background:transparent; color:var(--paper); border:1px solid var(--paper-ghost); }
.wp-block-button.is-style-ghost .wp-block-button__link:hover{
  background:var(--paper); color:var(--ink); box-shadow:none; border-color:var(--paper); }
/* Gold gefuellt ist die Farbe des Restaurants: Reservieren, Tisch
   reservieren, der Knopf im Kopf. Rot bleibt der Lieferung vorbehalten,
   der Umriss allem Uebrigen. Dieselbe Rollenverteilung wie in den
   Standortkacheln (.ltile__cta). */
.wp-block-button.is-style-gold .wp-block-button__link{
  background:var(--gold); color:#fff; border:1px solid var(--gold); }
.wp-block-button.is-style-gold .wp-block-button__link:hover{
  background:var(--gold-deep); color:#fff; border-color:var(--gold-deep); box-shadow:none; }
/* Grosse Variante kontextabhaengig, damit Redakteure nichts einstellen muessen */
.hero__cta .wp-block-button__link,
.phero__in .wp-block-button__link,
.band__c .wp-block-button__link{ padding:18px 38px; font-size:var(--fs-ui); }

/* --- Bilder ----------------------------------------------------------- */
.wp-block-image{ margin:0; }
.wp-block-image.figure{ display:block; }
.wp-block-image.figure img{ width:100%; height:100%; object-fit:cover; }
.figure > figcaption{
  position:absolute; left:0; bottom:0; margin:0; text-align:left;
  padding:14px 18px; background:rgba(10,10,11,.7);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:var(--fs-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--paper-dim);
}
.wp-block-image.phero__bg, .wp-block-image.band__bg{ margin:0; }
.wp-block-image.phero__bg img, .wp-block-image.band__bg img{ width:100%; height:100%; object-fit:cover; }

/* --- Menu-Karten (Startseite) ----------------------------------------- */
.mcard > .wp-block-image{ position:absolute; inset:0; margin:0; }
.mcard > .wp-block-image img{ width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2,.8,.2,1); }
.mcard:hover > .wp-block-image img{ transform:scale(1.07); }
.mcard::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 35%, rgba(10,10,11,.85) 100%); }
.mcard__c{ z-index:2; }
.mcard__c .wp-block-heading{ font-family:var(--f-display); font-weight:var(--fw-display); font-size:var(--fs-h3); letter-spacing:0; margin:0; }

/* --- FAQ ueber core/details ------------------------------------------- */
.faq .wp-block-details{ background:var(--ink); transition:background .3s; margin:0; }
.faq .wp-block-details[open]{ background:var(--anthra); }
.faq .wp-block-details > summary{
  list-style:none; cursor:pointer; position:relative;
  padding:22px 62px 22px 24px; font-size:var(--fs-body); font-weight:600;
  letter-spacing:.01em; transition:color .25s;
}
.faq .wp-block-details > summary::-webkit-details-marker{ display:none; }
.faq .wp-block-details > summary::marker{ content:""; }
.faq .wp-block-details > summary:hover{ color:var(--gold); }
.faq .wp-block-details[open] > summary{ color:var(--gold); }
.faq .wp-block-details > summary::before,
.faq .wp-block-details > summary::after{
  content:""; position:absolute; background:var(--gold);
  transition:transform .3s ease, opacity .3s;
}
.faq .wp-block-details > summary::before{ right:24px; top:50%; width:14px; height:1px; margin-top:-1px; }
.faq .wp-block-details > summary::after{ right:30px; top:50%; width:1px; height:14px; margin-top:-7px; }
.faq .wp-block-details[open] > summary::after{ transform:rotate(90deg); opacity:0; }
.faq .wp-block-details > :not(summary){
  margin:0; padding:0 24px 24px; color:var(--paper-dim); font-size:var(--fs-body); max-width:70ch;
}

/* --- Aufzaehlung mit Ziffer bzw. Gedankenstrich (core/list) ------------ */
.cpkg__incl{ counter-reset:cpkg; }
.cpkg__incl li{
  background:var(--ink); padding:18px 22px 18px 56px; position:relative;
  transition:background .3s; color:var(--paper-dim); font-size:var(--fs-body); display:block;
}
.cpkg__incl li::before{
  counter-increment:cpkg; content:counter(cpkg,decimal-leading-zero);
  position:absolute; left:22px; top:18px;
  font-family:var(--f-serif); color:var(--gold); font-size:var(--fs-body);
}
.cpkg__incl--dash li::before{ content:"\2014"; }
.cpkg__incl li:hover{ background:var(--anthra); }
.cpkg__incl li strong{ display:block; color:var(--paper); font-weight:600; font-size:var(--fs-body); margin-bottom:3px; }

/* --- Merkmalsliste ---------------------------------------------------- */
.feat-list{ counter-reset:feat; }
.feat-list li{ background:var(--ink); padding:20px 22px 20px 56px; position:relative; display:block; }
.feat-list li::before{
  counter-increment:feat; content:counter(feat,decimal-leading-zero);
  position:absolute; left:22px; top:20px;
  font-family:var(--f-serif); color:var(--gold); font-size:var(--fs-lede);
}
.feat-list li strong{ display:block; color:var(--paper); font-weight:600; font-size:var(--fs-body); letter-spacing:.02em; margin-bottom:3px; }
.feat-list li{ color:var(--paper-dim); font-size:var(--fs-body); }

/* --- PDF-Downloads ueber core/file ------------------------------------ */
.dl-list .wp-block-file{
  display:flex; align-items:center; gap:20px; margin:0;
  padding:20px 22px; background:var(--ink);
  border-left:2px solid transparent;
  transition:background .3s, padding-left .3s, border-color .3s;
}
.dl-list .wp-block-file:hover{ background:var(--anthra); padding-left:28px; }
.dl-list .wp-block-file > a:not(.wp-block-file__button){
  flex:1; min-width:0; font-size:var(--fs-body); font-weight:600; letter-spacing:.01em; color:var(--paper);
}
.dl-list .wp-block-file__button{
  background:transparent; color:var(--gold); border:1px solid var(--gold-dim); border-radius:0;
  padding:8px 14px; margin-left:0; opacity:1;
  font-size:var(--fs-ui); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  transition:background .3s, color .3s;
}
.dl-list .wp-block-file__button:hover{ background:var(--gold); color:#fff; }
.dl-list--rest .wp-block-file:hover{ border-left-color:var(--gold); }
.dl-list--del .wp-block-file:hover{ border-left-color:var(--red); }
.dl-list--del .wp-block-file__button{ color:var(--red); border-color:rgba(226,0,26,.45); }
.dl-list--del .wp-block-file__button:hover{ background:var(--red); color:#fff; }

/* --- Online-Karten ---------------------------------------------------- */
.okart .wp-block-heading{ font-family:var(--f-display); font-weight:var(--fw-display); font-size:var(--fs-h3); letter-spacing:0; margin:0; }
.okart p{ margin:0; }

/* --- Tabellen (Oeffnungszeiten) --------------------------------------- */
.wp-block-table{ margin:0; }
.wp-block-table table{ border-collapse:collapse; width:100%; }
.wp-block-table th, .wp-block-table td{
  border:1px solid var(--hair-soft); padding:14px 18px; font-size:var(--fs-body); text-align:left;
}
.wp-block-table th{
  color:var(--gold); font-weight:600; font-size:var(--fs-body); letter-spacing:.2em; text-transform:uppercase;
}
.wp-block-table td{ color:var(--paper-dim); }
.wp-block-table tr:hover td{ background:var(--anthra); }

/* --- Karten-Cover ----------------------------------------------------- */
.kartcover > .wp-block-image{ position:absolute; inset:0; margin:0; }
.kartcover > .wp-block-image img{ width:100%; height:100%; object-fit:cover; opacity:.5; transition:transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.kartblock:hover .kartcover > .wp-block-image img{ transform:scale(1.05); opacity:.62; }
.kartcover__c{ z-index:2; }
.kartcover__t{ display:block; }

/* --- Standort-Karten -------------------------------------------------- */
.loc .wp-block-heading{ font-family:var(--f-display); font-weight:var(--fw-display); font-size:var(--fs-h3); letter-spacing:0; line-height:1.05; margin:0; }
.stepcard .wp-block-heading{ margin:24px 0 10px; font-size:var(--fs-body); font-weight:600; font-family:var(--f-body); }
.stepcard p{ margin:0; color:var(--paper-dim); font-size:var(--fs-body); }
.fact__h{ margin:0 0 9px; font-size:var(--fs-ui); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-family:var(--f-body); }
.is-del .fact__h{ color:var(--red); }
.pkg .wp-block-heading{ font-family:var(--f-display); font-weight:var(--fw-display); font-size:var(--fs-h3); margin:18px 0 6px; letter-spacing:0; }

/* --- Trenner ---------------------------------------------------------- */
.wp-block-separator{ border:0; border-top:1px solid var(--hair-soft); margin:0; opacity:1; }
/* ============================================================
   BLOCK-PATTERN-HILFSKLASSEN
   Ersetzen die frueheren Inline-Styles aus dem Click-Dummy, damit im
   Editor keine style-Attribute gepflegt werden muessen.
   ============================================================ */

/* Reveal-Hook: data-reveal ueberlebt die Blockvalidierung nicht, .reveal schon */
.reveal{ transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
html.js-anim .reveal{ opacity:0; transform:translateY(34px); }
html.js-anim .reveal.in{ opacity:1; transform:none; }
html.anim-done .reveal{ opacity:1 !important; transform:none !important; animation:none !important; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* Typo-Modifier */
.kicker--block{ display:block; margin-bottom:22px; }
.kicker--red{ color:var(--red); }
.display.display--s{ font-size:var(--fs-h3); }
.shead__note{ max-width:34ch; }
.showcase__intro{ max-width:62ch; margin:0 0 44px; }
.prose--wide p{ max-width:76ch; }

/* Hero: zweite Zeile traegt jetzt die lange Ortsangabe */
.hero h1 .ln2{ font-size:var(--fs-h3); line-height:1.18; margin-top:.4em; }

/* Seiten-Hero */
.phero__in .wp-block-heading{ margin-top:20px; }
.phero__lede{ margin-top:24px; max-width:660px; }
.phero__note{ margin-top:16px; max-width:620px; color:var(--paper-dim); }
.phero__in .wp-block-buttons{ margin-top:34px; }

/* Band */
.band--s{ min-height:min(56vh,520px); }
.band__lede{ margin:20px 0 30px; max-width:44ch; }
.band .cpkg__incl{ background:transparent; border:0; gap:14px; margin:30px 0 34px; }
.band .cpkg__incl li{ background:transparent; padding:0 0 0 44px; color:var(--paper-dim); }
.band .cpkg__incl li:hover{ background:transparent; }
.band .cpkg__incl li::before{ left:0; top:0; font-size:var(--fs-lede); }

/* Abschnitte */
.section--flush-top{ padding-top:0; }
.wrap--gap{ margin-top:clamp(50px,7vh,84px); }

/* Callout */
.callout--gold{ border-color:var(--gold-dim); background:linear-gradient(180deg,rgba(177,156,131,.08),transparent); }
.callout--split{ align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.callout__c{ flex:1; min-width:260px; }
.callout .ico--gold{ color:var(--gold); }
.callout > p{ margin:0; }
.callout__c > * + *{ margin-top:12px; }
.callout .wp-block-buttons{ flex:0 0 auto; }

/* Standort-Karten */
.loc__text{ margin-top:14px; color:var(--paper-dim); font-size:var(--fs-body); }
.locgroup__intro{ max-width:60ch; margin-bottom:22px; }

/* Reservierung / Kontakt */
.resv__lede{ margin-top:24px; max-width:38ch; }
.resv__phones{ margin-top:30px; font-size:var(--fs-body); }
.resv__phones .g{ color:var(--gold); }
.stepper__input{ border:0; background:transparent; }
.field .opt{ color:var(--paper-faint); }
.field--check .check{
  display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  font-size:var(--fs-body); letter-spacing:0; text-transform:none; color:var(--paper-dim);
}
.field--check .check input{ margin-top:3px; accent-color:var(--red); width:16px; height:16px; }

/* Pakete */
.pkg__price{ margin:14px 0 6px; }
.pkg .from{ margin-bottom:24px; }
.pkg .wp-block-buttons{ margin-top:auto; }

/* Menu-Karten: Titel-Link erbt die Farbe */
.mcard__c .wp-block-heading a{ color:inherit; }
.mcard__c .wp-block-heading a:hover{ color:var(--gold); }

/* PDF-Downloads als Absatz-Zeilen */
.dl{ margin:0; background:var(--ink); border-left:2px solid transparent; transition:background .3s, border-color .3s; }
.dl > a,
.dl.dl--soon{ display:flex; align-items:center; gap:20px; padding:20px 22px; transition:padding-left .3s; }
.dl:hover{ background:var(--anthra); }
.dl:hover > a{ padding-left:28px; }
.dl__main strong{ display:block; font-size:var(--fs-body); font-weight:600; letter-spacing:.01em; color:var(--paper); }
.dl-list--rest .dl:hover{ border-left-color:var(--gold); }
.dl-list--del .dl:hover{ border-left-color:var(--red); }
.dl--soon{ opacity:.5; }
.dl--soon:hover{ background:var(--ink); border-left-color:transparent; }

/* --- Abstaende, die im Click-Dummy als Inline-Styles standen -------------
   Beim Umbau auf Bloecke sind die style-Attribute entfallen; hier als
   Klassenregeln nachgezogen. --------------------------------------------- */
* + .callout{ margin-top:44px; }
.kartblock__c .wp-block-buttons{ margin-top:32px; }
.prose .wp-block-buttons{ margin-top:26px; }
.prose .link-arrow{ margin-top:8px; }
.prose .gs-ways{ margin-top:26px; }
.band__c .wp-block-buttons{ margin-top:0; }
.callout--split .wp-block-buttons{ margin-top:0; }
.faq + .callout{ margin-top:44px; }
.cpkg__incl + .callout{ margin-top:44px; }
.wp-block-table + .callout{ margin-top:44px; }
/* --- Erstes Flow-Kind ---------------------------------------------------
   WordPress nullt margin-block-start des ersten Kindes einer Flow-Gruppe
   mit :root :where(.is-layout-flow) > :first-child — Spezifitaet (0,2,0).
   Das schlaegt jede Designsystem-Regel (0,1,0). Container, die als erstes
   Kind stehen koennen und laut Designsystem einen Abstand tragen, brauchen
   deshalb dieselbe Spezifitaet. Diese Datei laedt nach den Global Styles,
   bei Gleichstand gewinnt also die Quellreihenfolge. -------------------- */
.kaoru-main :where(.wp-block-group) > .facts{ margin-top:44px; }
.kaoru-main :where(.wp-block-group) > :is(.dl-list, .faq, .online-karten){ margin-top:34px; }
.kaoru-main :where(.wp-block-group) > .cpkg__incl{ margin-top:30px; }
/* ============================================================
   CONTACT FORM 7
   CF7 bringt eigene Wrapper und Meldungselemente mit. Diese Regeln
   fuegen sie in das Designsystem ein, ohne das Formular-Markup im
   CF7-Editor anzufassen. Das Grid selbst kommt ueber html_class="form".
   ============================================================ */

/* Feld-Wrapper ist per Default inline — dann greift width:100% am Feld nicht */
.wpcf7-form-control-wrap{ display:block; }

/* Validierungshinweis am Feld: gleiche Optik wie .field__err */
.wpcf7-not-valid-tip{
  display:block; margin-top:8px;
  font-size:var(--fs-ui); color:var(--red); letter-spacing:.02em;
}
.input.wpcf7-not-valid, select.input.wpcf7-not-valid, textarea.input.wpcf7-not-valid{
  border-color:var(--red);
}

/* Sammelmeldung unter dem Formular */
.wpcf7-response-output{
  grid-column:1 / -1; margin:6px 0 0; padding:14px 18px;
  border:1px solid var(--hair-soft); font-size:var(--fs-body);
  color:var(--paper-dim);
}
/* Nach dem Absenden bleibt nur noch die Bestaetigung stehen. Das Formular
   auszublenden ist keine Kosmetik: Ein abgeschicktes Formular, das weiter
   ausgefuellt dasteht, laedt zum zweiten Klick auf „Absenden" ein — und die
   zweite Anfrage kommt dann als Dublette an.

   Versteckt wird ueber eine Regel auf die Geschwister der Meldung, nicht per
   Skript. CF7 setzt die Klasse .sent selbst, sobald die Mail raus ist; kommt
   der Besucher spaeter zurueck, ist die Seite neu geladen und alles steht
   wieder da.

   Das !important ist noetig und kein Faulheitszeichen: Die Erweiterung fuer
   bedingte Felder schaltet ihre Gruppen ueber ein inline gesetztes
   display:block, und dagegen kommt eine Klassenregel nicht an. */
form.sent > *:not(.wpcf7-response-output){ display:none !important; }

/* Die Bestaetigung tritt an die Stelle des Formulars und darf deshalb mehr
   Raum einnehmen als eine Fehlermeldung am Rand: goldener Rahmen wie bei den
   Restaurant-Schaltflaechen, ein Haken davor, Text in Lesegroesse. */
form.sent .wpcf7-response-output{
  margin:0; padding:clamp(26px,4vw,38px) clamp(24px,4vw,40px);
  border:1px solid var(--gold-dim);
  background:linear-gradient(180deg, rgba(177,156,131,.10), transparent 70%);
  color:var(--paper); font-size:var(--fs-body); line-height:1.6;
  display:flex; gap:18px; align-items:flex-start;
}
form.sent .wpcf7-response-output::before{
  content:"✓"; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:1px solid var(--gold-dim); border-radius:50%;
  color:var(--gold); font-size:var(--fs-body); line-height:1;
}

/* CF7 laesst in den Meldungen kein Markup zu — der Text kommt als reine
   Zeichenkette an. Mit pre-line wird wenigstens der Zeilenumbruch aus dem
   Meldungsfeld uebernommen, sodass sich Zusage und Nachsatz trennen lassen. */
form.sent .wpcf7-response-output{ white-space:pre-line; max-width:70ch; }

@media (max-width:560px){
  form.sent .wpcf7-response-output{ flex-direction:column; gap:14px; }
}
form.invalid .wpcf7-response-output,
form.unaccepted .wpcf7-response-output,
form.payment-required .wpcf7-response-output,
form.failed .wpcf7-response-output,
form.aborted .wpcf7-response-output{ border-color:rgba(226,0,26,.5); color:var(--red); }

/* Ladeanzeige neben dem Button */
.wpcf7-spinner{ margin:0 0 0 14px; background-color:var(--gold-dim); }

/* Datenschutz-Zustimmung: CF7 verschachtelt Label und Checkbox anders */
.field--check .wpcf7-form-control-wrap{ display:block; }
.field--check .wpcf7-acceptance .wpcf7-list-item{ margin:0; }
.field--check .wpcf7-list-item label{
  display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  font-size:var(--fs-body); letter-spacing:0; text-transform:none;
  color:var(--paper-dim);
}
.field--check input[type="checkbox"]{
  flex:0 0 auto; margin-top:3px; width:16px; height:16px; accent-color:var(--red);
}

/* Absenden: CF7 rendert ein <input type="submit">, .btn greift bereits */
.form__submit .wpcf7-submit{ border:0; }
/* Gaeste-Stepper mit CF7: der Wrapper wird zum Flex-Kind, nicht das Feld selbst */
.stepper{ flex-wrap:wrap; }
.stepper .wpcf7-form-control-wrap{ flex:1 1 auto; min-width:0; }
.stepper .wpcf7-not-valid-tip{ padding:0 15px 10px; }
/* Native Spinner aus, es gibt eigene Buttons */
.stepper input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
/* --- Bedingte Felder (Conditional Fields for CF7) ------------------------
   Die Gruppe selbst ist ein Grid-Kind und spannt ueber beide Spalten; das
   eigentliche Layout macht .form__group darin. So bleibt das Zweispalten-
   Raster erhalten, egal wie das Plugin die Sichtbarkeit umschaltet. */
.form > [data-class="wpcf7cf_group"]{ grid-column:1 / -1; }
.form__group{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.form__group > .field--full{ grid-column:1 / -1; }
@media (max-width:860px){ .form__group{ grid-template-columns:1fr; } }

/* --- Anliegen-Auswahl als Schalterreihe ---------------------------------- */
.field--choice .wpcf7-radio{ display:flex; gap:8px; flex-wrap:wrap; }
.field--choice .wpcf7-list-item{ margin:0; }
.field--choice .wpcf7-list-item label{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  border:1px solid var(--hair-soft); background:var(--ink); padding:12px 18px;
  font-size:var(--fs-body); letter-spacing:0; text-transform:none;
  color:var(--paper-dim); transition:border-color .25s, color .25s, background .25s;
}
.field--choice .wpcf7-list-item label:hover{ border-color:var(--gold-dim); color:var(--paper); }
.field--choice .wpcf7-list-item label:has(input:checked){
  border-color:var(--red); background:rgba(226,0,26,.08); color:var(--paper);
}
.field--choice input[type="radio"]{ width:15px; height:15px; accent-color:var(--red); flex:0 0 auto; }
/* --- Seiten-Hero: einheitliche Bandhoehe -----------------------------------
   Die Hoehe des .phero hing bisher allein am Textumfang. Gemessen bei 1280px:
   Kontakt 432px, Gutscheine 635px — 203px Unterschied, beim Seitenwechsel
   deutlich sichtbar. Jetzt gibt min-height das Band vor, der Inhalt sitzt
   ueber align-content:end unten drin, wie zuvor durch das Padding.

   Die Werte liegen bewusst ueber dem laengsten gemessenen Inhalt (bei 1280px
   367px + 260px Padding = 627px), sonst sprengt die textreichste Seite das
   Band und der Effekt ist wieder dahin. Wer Hero-Texte deutlich verlaengert,
   muss die Zahlen hier nachziehen.

   Die Startseite ist nicht betroffen — sie nutzt .hero mit Video. */
.phero{ display:grid; align-content:end; min-height:720px; }
/* .phero__in traegt margin-inline:auto. Als Grid-Item schaltet ein Auto-Rand
   das Strecken ab: der Block schrumpft auf seine Inhaltsbreite und zentriert
   sich. Auf inhaltsbreiten Seiten faellt das nicht auf, auf schmalen schon.
   width:100% fuellt die Spalte; die Auto-Raender greifen dann nur noch
   jenseits von --maxw, wo sie gedacht waren. */
.phero__in{ width:100%; }
@media (min-width:601px){  .phero{ min-height:670px; } }
@media (min-width:861px){  .phero{ min-height:670px; } }
@media (min-width:1025px){ .phero{ min-height:695px; } }
@media (min-width:1281px){ .phero{ min-height:730px; } }

/* Auf kleinen Schirmen ist die Kopfzeile niedriger — das Padding darf mit,
   sonst bleibt fuer den Text zu wenig Platz im Band. */
@media (max-width:860px){ .phero{ padding-top:150px; padding-bottom:56px; } }

/* Kopf ohne Foto (Impressum, Datenschutz). Ohne Bild waeren die 730 Pixel
   Mindesthoehe von oben eine leere schwarze Flaeche. Hier reicht der Platz,
   den der Text braucht, plus Luft unter der fixierten Kopfzeile. Doppelte
   Klasse, weil die Mindesthoehen weiter oben dieselbe Spezifitaet haben. */
.phero.phero--text{
  min-height:0;
  padding-top:calc(120px + 3vh);
  padding-bottom:clamp(40px,6vh,70px);
  border-bottom:1px solid var(--hair-soft);
}
@media (max-width:860px){
  .phero.phero--text{ padding-top:126px; padding-bottom:40px; }
}

/* Rechtstexte. Langer Fliesstext ohne Bilder: mehr Zeilenbreite als die
   54ch der .prose und deutliche Abstaende zwischen den Abschnitten,
   damit die Gliederung beim Ueberfliegen traegt. */
.legal p, .legal li{ max-width:76ch; }
.legal p{ margin:0 0 18px; color:var(--paper-dim); }
.legal h2{ margin:56px 0 20px; font-size:var(--fs-h3); }
.legal > .wp-block-heading:first-child{ margin-top:0; }
.legal h3{
  margin:34px 0 12px;
  font-size:var(--fs-ui); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper);
}
.legal ul{ margin:0 0 20px; padding-left:22px; }
.legal li{ margin-bottom:8px; color:var(--paper-dim); }
.legal strong{ color:var(--paper); }

/* Offene Stellen in den Rechtstexten. Rot, damit sie niemand uebersieht —
   diese Seiten duerfen so nicht live gehen. Ist alles ergaenzt, gibt es
   keine .todo mehr und die Regel laeuft ins Leere. */
.legal .todo{ color:var(--red); font-weight:600; }
@media (max-width:600px){ .phero{ padding-top:124px; padding-bottom:44px; } }
/* --- Standortkachel: Zeiten, Telefon, Anfahrt ------------------------------
   Kompakte Definitionsliste statt Fliesstext: dt ist die Art der Zeit,
   dd eine Zeile aus Tagesspanne und Uhrzeit. Die feste Spaltenbreite haelt
   die Uhrzeiten untereinander, tabular-nums verhindert das Zappeln der
   Ziffern. Farbe des dt folgt der Kachelrolle (Gold = Restaurant,
   Rot = Abholung & Lieferung). */
.loc__hours{ margin-top:18px; padding-top:16px; border-top:1px solid var(--hair-soft); }
.loc__hours dt{ margin:14px 0 0; font-size:var(--fs-ui); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.loc__hours dt:first-child{ margin-top:0; }
.loc__hours dd{ display:flex; gap:14px; margin:6px 0 0; font-size:var(--fs-body);
  color:var(--paper-dim); line-height:1.5; }
.loc__hours .d{ flex:0 0 4.5em; color:var(--paper-faint); }
.loc__hours time{ font-variant-numeric:tabular-nums; }
.loc--del .loc__hours dt{ color:var(--red); }

/* Telefonnummer in der Meta-Zeile anklickbar, ohne dass sie wie ein
   Fliesstext-Link schreit. */
.loc__meta a{ border-bottom:1px solid var(--hair); padding-bottom:1px;
  transition:color .25s, border-color .25s; }
.loc__meta a:hover{ color:var(--paper); border-color:var(--gold-dim); }
.loc--del .loc__meta a:hover{ border-color:rgba(226,0,26,.5); }

/* Aktionen am Kachelfuss: Detailseite, Anfahrt, Bestellshop. Die beiden
   letzten bewusst leiser als der Hauptverweis — sie sollen erreichbar sein,
   ihn aber nicht überstimmen. */
.loc__actions{ margin-top:auto; padding-top:24px; display:flex; flex-wrap:wrap;
  align-items:center; gap:10px 24px; }
.loc__actions .loc__link{ margin-top:0; padding-top:0; }
.loc__map, .loc__shop{ font-size:var(--fs-ui); letter-spacing:.02em; color:var(--paper-faint);
  border-bottom:1px solid var(--hair); padding-bottom:2px;
  transition:color .25s, border-color .25s; }
.loc__map:hover, .loc__shop:hover{ color:var(--paper); border-color:var(--gold-dim); }
.loc--del .loc__map:hover, .loc--del .loc__shop:hover{ border-color:rgba(226,0,26,.5); }
/* Winkel nach aussen: Der Shop liegt auf einer anderen Domain und oeffnet
   in einem neuen Tab - das gehoert angekuendigt. Gezeichnet aus Raendern
   wie die uebrigen Winkel im Theme; ein Schriftzeichen wie U+2197 haengt
   an der Schriftabdeckung und faellt sonst als leeres Kaestchen aus. */
.loc__shop{ display:inline-flex; align-items:center; gap:7px; }
.loc__shop::after{
  content:''; width:6px; height:6px; flex:0 0 auto;
  border-top:1.4px solid currentColor; border-right:1.4px solid currentColor;
  transform:rotate(45deg); opacity:.75;
}
/* --- Speisekarte: beide Karten nebeneinander -------------------------------
   Vorher standen die zwei Karten als volle Breite untereinander, jeder Block
   mit 3:4-Cover — zusammen deutlich ueber eine Bildschirmhoehe. Nebeneinander
   und mit flacherem Cover passen beide in den ersten Blick. */
.kartrow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,3.4vw,52px); }
/* align-content:start ist hier entscheidend. Die beiden Bloecke sind als
   Grid-Kinder gleich hoch; ohne die Angabe verteilt der Browser die
   Restflaeche auf die Zeilen, sodass die Cover-Zeile im inhaltsaermeren
   Block waechst und dessen Text tiefer sitzt. */
.kartrow .kartblock,
.kartrow .kartblock--rev{ grid-template-columns:1fr; grid-template-rows:auto auto;
  gap:0; align-items:start; align-content:start; }
.kartrow .kartblock + .kartblock{ margin-top:0; padding-top:0; border-top:0; }
.kartrow .kartcover{ aspect-ratio:16/10; order:0; }
.kartrow .kartblock__c{ padding-top:26px; }
.kartrow .kartblock__c .kicker{ margin-bottom:12px; }
.kartrow .kartblock__c h2{ margin-bottom:0; }
.kartrow .dl-list{ margin-top:22px; }
@media (max-width:860px){
  .kartrow{ grid-template-columns:1fr; gap:44px; }
  .kartrow .kartcover{ aspect-ratio:16/9; }
}

/* Kategorienliste zweispaltig — elf Zeilen untereinander sind unnoetig lang. */
.cpkg__incl--zwei{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(24px,3vw,56px); }
@media (max-width:760px){ .cpkg__incl--zwei{ grid-template-columns:1fr; } }
/* --- Kartentitel und Bestell-Link als echte Bloecke ------------------------
   Beide steckten in wp:html und waren im Editor nur als Roh-HTML erreichbar.
   Jetzt Gruppe + Absatz, damit der Text direkt im Backend schreibbar ist.
   Der Absatz braucht dafuer die Abstaende des alten span/a zurueck. */
.kartcover__c > .kartcover__t{ margin:0; }
.okart > .go{ margin:auto 0 0; }
/* Hinweis im Formular auf das eigene Catering-Formular. Steht als direktes
   Kind im Formular-Grid, deshalb ueber beide Spalten. */
.form__hinweis{ grid-column:1 / -1; margin:-6px 0 0; font-size:var(--fs-body); color:var(--paper-dim); }
.form__hinweis a,
.mehr-link a{ color:var(--gold); border-bottom:1px solid var(--gold-dim); padding-bottom:1px;
  transition:color .25s, border-color .25s; }
.form__hinweis a:hover,
.mehr-link a:hover{ color:var(--paper); border-color:var(--paper); }

/* Weiterfuehrender Hinweis am Ende eines Abschnitts — gleiche Sprache wie
   .form__hinweis, nur mit eigenem Abstand nach der Aufzaehlung darueber. */
.mehr-link{ margin-top:28px; font-size:var(--fs-body); color:var(--paper-dim); max-width:62ch; }
/* --- Verweise im Fliesstext ----------------------------------------------
   a{color:inherit; text-decoration:none} macht Links im Fliesstext sonst
   unsichtbar. Betrifft die internen Verweise in .prose, in den FAQ-Antworten
   und die Telefonnummer im Facts-Block. */
.prose p a,
.faq .wp-block-details a,
.cpkg__incl a,
.fact a{ color:var(--gold); border-bottom:1px solid var(--gold-dim); padding-bottom:1px;
  transition:color .25s, border-color .25s; }
.prose p a:hover,
.faq .wp-block-details a:hover,
.cpkg__incl a:hover,
.fact a:hover{ color:var(--paper); border-color:var(--paper); }

/* ============================================================
   SCHALTFLAECHEN AUF SCHMALEN SCHIRMEN
   ============================================================
   Am Schreibtisch tragen die Knoepfe 16 Pixel Schrift und ein weites
   Polster — dort stehen sie in breiten Zeilen und duerfen Gewicht haben.
   Auf dem Telefon sitzt derselbe Knopf in einer 390 Pixel schmalen Spalte
   und wirkt wie ein Balken: der grosse aus Buehne und Band kam auf
   187 × 63 Pixel, fast die halbe Bildschirmbreite.

   Deshalb hier eine Stufe kleiner. Der Schriftgrad geht auf 14 Pixel —
   derselbe feste Wert, den .hdr__right und .mobar schon benutzen, damit
   alle kompakten Knoepfe des Themes dieselbe Sprache sprechen. Das Polster
   schrumpft mit, die Sperrung wird etwas enger, weil Versalien in kleiner
   Schrift sonst auseinanderfallen.

   Die Reihenfolge der Groessen bleibt erhalten: Buehne und Band bleiben
   der groesste Knopf, die Kachel der kleinste.

   Nicht betroffen: .hdr__right (0,2,0 — schlaegt diese Regel ohnehin und
   ist unter 1289 Pixel ausgeblendet) und .mobar__btn mit eigener Klasse. */
@media (max-width:700px){
  .wp-block-button__link,
  .btn{ padding:12px 22px; font-size:14px; letter-spacing:.1em; }

  /* Grosse Variante — Buehne, Seitenkopf, Band, .btn--lg */
  .hero__cta .wp-block-button__link,
  .phero__in .wp-block-button__link,
  .band__c .wp-block-button__link,
  .btn--lg{ padding:14px 26px; font-size:14px; }

  /* Standort- und Lieferkacheln: schon vorher die kleinste Stufe */
  .ltile__cta a{ padding:10px 18px; font-size:14px; letter-spacing:.1em; }

  /* Aktionen im Schieber */
  .deal__cta a{ padding:11px 20px; font-size:14px; letter-spacing:.1em; }

  /* Zwei Knoepfe nebeneinander brauchen weniger Luft, wenn sie kleiner
     sind — sonst reisst die Zeile frueher um als noetig. */
  .wp-block-buttons{ gap:10px; }
}