/* =============================================================
   Zülfi’s — gemeinsamer Header
   Setzt tokens.css voraus. Gilt für alle drei Bereiche; die Farben
   kommen über [data-site] aus den Tokens.

   Grundgedanke: zwei Fragen, mehr nicht. Wohin will ich (drei Bereiche)
   und wie erreiche ich euch (Telefon, WhatsApp, Anfrage). Deshalb kein
   Hamburger — auf schmalen Displays stehen die Bereiche als Segmentleiste
   unter dem Logo und die Aktionen fest am unteren Rand.
   ============================================================= */

.skip{
  position:fixed;top:.5rem;left:.5rem;z-index:300;transform:translateY(-180%);
  background:var(--accent);color:var(--navy);font-weight:700;
  padding:.7rem 1.1rem;border-radius:10px;text-decoration:none;
  transition:transform .2s var(--ease);
}
.skip:focus{transform:translateY(0)}

.kopfleiste{
  /* Der Kopf setzt seine eigene Grundschrift, statt sie vom <body> zu erben.
     Grund: Die Weihnachtsseite bringt ein eigenes Grundsystem mit — andere
     Schriftliste, 17,2 statt 17,28 px, Zeile 1,65 statt 1,6, Textfarbe Creme
     statt Navy. Geerbt wurden diese Unterschiede bis in den Kopf hinein und
     verschoben dort jede Einzelposition. Mit eigenen Werten steht derselbe
     Kopf auf jeder Seite gleich, egal was die Seite sonst mitbringt. */
  font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,
              Helvetica,Arial,sans-serif;
  font-size:clamp(1rem,.97rem + .15vw,1.08rem);
  line-height:1.6;
  color:var(--navy);
  /* Über dem Overlay (z-index 120): Der Auftrag will, dass der Kopf beim
     geöffneten Menü sichtbar bleibt — dort sitzt der Schließen-Knopf. */
  position:sticky;top:0;z-index:130;
  background:var(--surface);
  /* Feste Linie statt --line: Die Weihnachtsseite legt das Token auf
     rgba(20,47,78,.1) um, der Kopf hatte dort eine andere Trennlinie
     als auf Imbiss und Catering. */
  border-bottom:1px solid rgba(20,47,78,.14);
  transition:background-color .2s var(--ease),box-shadow .2s var(--ease),
             border-color .2s var(--ease);
}
/* Drei Spalten: Aktionen links, Logo mittig, Burger rechts.
   Die beiden Außenspalten sind beide 1fr — dadurch steht das Logo in der
   Mitte der Leiste, nicht in der Mitte des Restplatzes. Mit „auto 1fr auto"
   hinge seine Lage an der Breite der Telefonnummer und wanderte mit. */
.kopfleiste__reihe{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:.75rem clamp(.5rem,1.6vw,1.5rem);
  max-width:var(--shell);margin-inline:auto;
  padding:.55rem var(--gutter);
}
.kopfleiste__logo{display:inline-flex;flex:0 0 auto;text-decoration:none;justify-self:center}
.kopfleiste__logo img{
  height:clamp(48px,6.4vw,80px);width:auto;
  transition:height .2s var(--ease);
}

/* ---------- Telefon, WhatsApp, Anfrage ---------- */
/* Telefon, WhatsApp, Anfrage und Burger stehen jetzt auf jeder Breite im
   Kopf — die feste Leiste am unteren Rand ist entfallen. Früher war das
   hier auf display:none, weil die Aktionen mobil unten lagen. */
.kopfleiste__aktionen{display:flex;align-items:center;gap:.3rem;justify-content:flex-start;justify-self:start;min-width:0}
.kopfleiste .burger{justify-self:end}
.kopfaktion{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;padding:.5rem .85rem;
  border-radius:var(--radius-pill);text-decoration:none;
  /* Navy fest, nicht --text: Die Weihnachtsseite legt --text auf
     Creme um. Die Sonderregel, die das bisher geradebog, galt
     auch beim Überfahren und überschrieb dort die Hover-Farbe. */
  color:var(--navy);
  font-family:var(--font-head);font-size:.9rem;font-weight:600;
  transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.kopfaktion svg{width:20px;height:20px;flex:0 0 auto}
/* Auch hier feste Werte: --surface-alt und --accent sind auf der
   Weihnachtsseite anders belegt, der Hover sah dort anders aus. */
.kopfaktion:hover{background:#F2EDE4;color:var(--orange)}
.kopfaktion--cta{
  background:var(--accent);color:var(--on-accent);
  padding-inline:1.15rem;letter-spacing:.03em;
}
.kopfaktion--cta svg{width:17px;height:17px;transition:transform .2s var(--ease)}
.kopfaktion--cta:hover{background:var(--orange-hi);color:var(--on-accent);transform:translateY(-1px)}
.kopfaktion--cta:hover svg{transform:translateX(3px)}


@media (min-width:1024px){
  /* Logo mittig, Aktionen links, Burger rechts — die Bereiche liegen im Menü. */
  .kopfleiste__reihe{padding-block:.7rem}
  .kopfleiste__aktionen{gap:.4rem}
}
/* Die ausgeschriebene Nummer erst ab 1180 px. Darunter kostet sie 92 px,
   und weil beide Außenspalten für die Mittigkeit gleich breit sein müssen,
   schlagen die doppelt zu Buche: Bei 1024 px blieben zwischen der linken
   Gruppe und dem Logo exakt 0 px eigener Abstand — nur noch der Rasterspalt.
   Mit dem Zeichen allein sind es dort 108 px. */
@media (min-width:1180px){
  .kopfaktion--tel .kopfaktion__text{display:inline}
}
@media (max-width:1023px){
  /* Mobil tragen Telefon und WhatsApp nur ihr Zeichen; den Namen liest
     der Screenreader aus dem versteckten Text. Der Burger behält sein
     Wort nicht, aber seine 44 px. */
  .kopfaktion--wa .kopfaktion__text{display:none}
  .kopfaktion--cta svg{display:none}
}
/* Die Nummer verschwindet schon unterhalb von 1180 px, nicht erst bei 1024 —
   siehe die Begründung weiter unten. */
@media (max-width:1179px){
  .kopfaktion--tel .kopfaktion__text{display:none}
}

/* ---------- Unter 768 px: Logo zwischen den Gruppen statt exakt mittig ----------
   Gemessen bei 360 px: links brauchen Telefon, WhatsApp und Anfrage 202 px,
   rechts der Burger 48 px, das Logo selbst 76 px. Für echte Mittigkeit
   müssten beide Außenspalten gleich breit sein, also 2 × 202 + 76 = 480 px —
   zur Verfügung stehen 320 px. Das geht nicht auf; mit „1fr auto 1fr" schob
   sich die linke Gruppe 80 px unter das Logo.

   Statt das Logo zu verkleinern oder „Anfrage" auf ein Zeichen zu kürzen,
   verteilt die Leiste hier mit space-between. Das Logo steht dadurch etwas
   rechts der echten Mitte — sichtbar wird das erst im Messschieber. */
@media (max-width:767px){
  .kopfleiste__reihe{grid-template-columns:auto auto auto;justify-content:space-between}
  .kopfleiste__aktionen{gap:.15rem}
  /* Schmalere Polster schaffen die Luft, die der space-between braucht. */
  .kopfaktion{padding-inline:.5rem}
  .kopfaktion--cta{padding-inline:.8rem}
}
@media (max-width:359px){
  .kopfleiste__logo img{height:42px;width:auto}
}

/* ---------- Kompakt beim Scrollen ---------- */
.kopfleiste.ist-kompakt{box-shadow:0 10px 28px -22px rgba(20,47,78,.6)}
.kopfleiste.ist-kompakt .kopfleiste__logo img{height:clamp(40px,5vw,62px)}
.kopfleiste.ist-kompakt .kopfleiste__reihe{padding-block:.35rem}

/* ---------- Der Kopf ist überall weiß ----------
   Früher wurde er über dem dunklen Hero durchsichtig und die Schrift weiß.
   Vorgabe des Kunden: überall dieselbe weiße Leiste, die Weihnachts-Seite
   ist die verbindliche Vorlage. Der Hero beginnt deshalb jetzt UNTER dem
   Kopf statt darunter durchzulaufen — sonst läge sein oberer Rand hinter
   einer deckenden Fläche. */


/* ============================================================
   Burger und Vollbild-Menü
   ============================================================
   Die drei Bereiche liegen auf Desktop UND Mobil im Overlay. Im Header
   bleiben nur Telefon, WhatsApp, Anfrage und der Burger stehen.

   Ohne JavaScript trägt `:target`: Der Burger ist ein Link auf #site-menu,
   das Menü wird dadurch sichtbar, das ✕ führt zurück. Deshalb ist der
   Burger ein <a role="button"> und kein <button> — ein Knopf kann kein
   :target auslösen.
   ============================================================ */

.burger{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:44px;min-width:44px;padding:.45rem .8rem;
  border-radius:var(--radius-pill);
  /* Feste Werte statt Bereichs-Tokens — aus demselben Grund wie beim
     Hintergrund: Die Weihnachtsseite legt --white, --line und
     --surface-alt auf dunkle Werte um, damit gemeinsame Bausteine dort
     auf dunklem Grund funktionieren. Der Menü-Knopf gehört aber zum
     Kopf, und der sieht auf allen drei Bereichen gleich aus.

     Gemessen am 6. November 2026, bevor das hier stand:
       Rahmen  Imbiss rgba(20,47,78,.14) · Weihnachten rgba(255,247,239,.14)
               — creme auf weiß, also unsichtbar.
       Hover   Imbiss rgb(242,237,228) · Weihnachten rgb(27,60,99)
               — der Knopf wurde dort dunkelblau statt creme. */
  border:1.5px solid rgba(20,47,78,.14);
  background:#fff;color:var(--navy);
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-sm);
  text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-s,.28s) var(--ease),
             border-color var(--dur-s,.28s) var(--ease);
}
.burger:hover{background:#F2EDE4;border-color:rgba(20,47,78,.3)}
.burger__striche{display:grid;gap:4px;width:20px}
.burger__striche i{
  display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform var(--dur-s,.28s) var(--ease),
             opacity var(--dur-s,.28s) var(--ease);
}
.burger__wort{display:none}
@media (min-width:1024px){ .burger__wort{display:inline} }

/* Burger wird zum ✕, solange das Menü offen ist */
.menue-offen .burger__striche i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menue-offen .burger__striche i:nth-child(2){opacity:0}
.menue-offen .burger__striche i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Das Overlay ---------- */
.menue{
  position:fixed;inset:0;z-index:120;
  /* Eigene Grundschrift, genau wie bei .kopfleiste und aus demselben
     Grund: Die Weihnachtsseite setzt am <body> 17,2 px und Zeile 1,65,
     die anderen 17,056 und 1,6. Geerbt wurden diese Unterschiede bis in
     jeden Menüpunkt hinein. */
  font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,
              Helvetica,Arial,sans-serif;
  font-size:clamp(1rem,.97rem + .15vw,1.08rem);
  line-height:1.6;
  visibility:hidden;opacity:0;
  transition:opacity var(--dur-s,.28s) var(--ease),
             visibility 0s linear var(--dur-s,.28s);
}
.menue.ist-offen,
.menue:target{
  visibility:visible;opacity:1;
  transition:opacity var(--dur-m,.6s) var(--ease-out,var(--ease)),visibility 0s;
}
/* Die halbdurchsichtige Fläche hinter dem Menü ist entfallen.
   .menue__innen deckt mit inset:0 den ganzen Schirm ab — die Fläche lag
   vollständig dahinter und war nie anklickbar. Ein Vollbild-Menü hat
   kein „daneben"; geschlossen wird mit dem ✕ oder mit Escape. */
.menue__innen{
  position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
  background:var(--blue-900);color:#fff;
  padding:calc(var(--kopf-h, var(--nav-h)) + clamp(1.5rem,5vh,3.5rem)) 0
          calc(clamp(1.5rem,5vh,3rem) + env(safe-area-inset-bottom));
  /* Fläche fährt von oben herein */
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--dur-l,.9s) var(--ease-inout,var(--ease));
}
.menue.ist-offen .menue__innen,
.menue:target .menue__innen{clip-path:inset(0 0 0 0)}

.menue__raster{display:grid;gap:clamp(2rem,5vw,4rem)}
@media (min-width:1024px){
  .menue__raster{grid-template-columns:7fr 5fr;align-items:start}
  .menue__fuss{grid-column:1 / -1}
}

/* ---------- Die drei Bereiche ---------- */
.menue__bereiche ul{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,2.6vw,1.9rem)}
.menue__punkt a{
  display:grid;grid-template-columns:auto 1fr;gap:.2rem clamp(.8rem,2vw,1.4rem);
  text-decoration:none;color:#fff;
  transition:transform var(--dur-s,.28s) var(--ease),opacity var(--dur-s,.28s) var(--ease);
}
.menue__nr{
  grid-row:1 / span 2;align-self:center;
  font-family:var(--font-head);font-weight:800;font-size:var(--fs-sm);
  color:var(--accent);letter-spacing:.1em;
}
.menue__name{
  font-family:var(--font-display);font-weight:800;line-height:.98;
  font-size:clamp(2.4rem,1.2rem + 5.4vw,7rem);letter-spacing:-.02em;
}
/* Fester Grad statt --fs-base: Das Token ist je Bereich anders belegt. */
.menue__unter{font-size:1rem;line-height:1.6;color:rgba(255,255,255,.72)}
.menue__punkt a:hover,.menue__punkt a:focus-visible{transform:translateX(.5rem)}
.menue__punkt a:hover .menue__name,
.menue__punkt a:focus-visible .menue__name{color:var(--accent)}
/* Die übrigen treten zurück, solange einer angefasst wird */
.menue__bereiche ul:hover .menue__punkt a:not(:hover){opacity:.5}
.menue__punkt a[aria-current] .menue__name{
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:100% 3px;background-position:0 100%;background-repeat:no-repeat;
  padding-bottom:.08em;
}

/* ---------- Info-Spalte ---------- */
.menue__info{display:grid;gap:1.1rem;align-content:start}
/* .pille aus sektionen.css wird später geladen und gewinnt sonst mit
   gleicher Spezifität — die Pille stand deshalb weiß im dunklen Menü. */
/* Die Pille im Menü trägt ihre Gestalt hier, nicht in sektionen.css.
   Grund: Die Weihnachtsseite lädt sektionen.css nicht — die Datei wird
   zwar in ihren Asset-Ordner kopiert, aber in ihrem <head> nicht
   verlinkt. Die Öffnungszeiten standen dort deshalb als nackter Absatz
   im Menü: ohne Rundung, ohne Polster, ohne Punkt, in 17,2 px statt
   13,4 px und in der falschen Schrift. Das Menü gehört allen drei
   Bereichen, also gehört seine Pille in den gemeinsamen Kopf. */
.menue .pille{
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:34px;padding:.35rem .9rem;
  border-radius:var(--radius-pill);
  font-family:var(--font-head);font-size:.84rem;font-weight:600;
}
.menue .pille::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:#4A5568;flex:0 0 auto;
}
.menue .pille:not(.pille--zu)::before{background:#1F7A4D}
.menue .pille--menue{
  justify-self:start;align-self:start;width:auto;max-width:max-content;margin:0;
  background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);
}
.menue__zeiten{margin:0;font-family:var(--font-head);font-weight:700;font-size:var(--fs-lead)}
.menue__zeiten span{font-weight:500;color:rgba(255,255,255,.72)}
.menue__adresse{margin:0;color:rgba(255,255,255,.82);line-height:1.6}
.menue__adresse a{color:#fff;text-underline-offset:3px}
.menue__ctas{display:grid;gap:.6rem;margin-top:.4rem}
/* Die Knöpfe im Menü gehören zum Kopf, nicht zur Seite. Auf der
   Weihnachtsseite setzt style.css ein eigenes .btn — Eckenradius 10 px
   statt 999, anderer Grad, andere Sperrung. Hier festgelegt, damit das
   Menü überall gleich aussieht. */
.menue__ctas .btn{
  border-radius:var(--radius-pill);
  font-family:var(--font-head);font-weight:800;
  font-size:.94rem;line-height:1.6;letter-spacing:.0375em;
  min-height:48px;padding:.85rem 1.6rem;
}
.btn--block{width:100%;justify-content:center}
.menue .btn--ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.75);color:#fff}
.menue .btn--ghost:hover{background:rgba(255,255,255,.18);border-color:#fff}

.menue__fuss{
  display:flex;flex-wrap:wrap;gap:1.2rem;margin:clamp(1.5rem,4vh,3rem) 0 0;
  font-size:var(--fs-sm);
}
.menue__fuss a{color:rgba(255,255,255,.72)}
.menue__fuss a:hover{color:#fff}

.menue__zu{
  /* Unterhalb der Kopfleiste: Die liegt mit z-index 130 über dem Overlay,
     ein ✕ ganz oben verschwände dahinter. */
  position:absolute;top:calc(var(--kopf-h, var(--nav-h)) + .9rem);right:var(--gutter);
  display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);color:#fff;
}
.menue__zu svg{width:22px;height:22px}
.menue__zu:hover{background:rgba(255,255,255,.14)}
/* Mit JavaScript übernimmt der Burger das Schließen — dann stört das ✕ nur. */
.js .menue__zu{display:none}

@media (prefers-reduced-motion:reduce){
  .menue,.menue__innen{transition-duration:.01ms}
  .menue__innen{clip-path:none}
}

/* Die Weihnachtsseite brauchte hier eine eigene Trennlinie und einen
   eigenen Schatten, solange sie einen eigenen Kopf hatte. Sie nutzt
   jetzt denselben, und zwei abweichende Werte machen aus „derselbe
   Kopf" wieder „fast derselbe". Beides entfernt; was bleibt, ist die
   Schriftfarbe, weil die Seite --text auf Creme legt. */
[data-site="xmas"] .kopfleiste{background:#fff}

/* Die Sonderregel für die Weihnachtsseite ist entfallen — der Kopf
   gehört allen Bereichen und verhält sich überall gleich, auch beim
   Überfahren mit der Maus. */
/* Dieser Knopf trug auf der Weihnachtsseite Navy, auf Imbiss und
   Catering Weiß. Mit Chris' Entscheidung vom 6. November 2026 gilt
   überall weiße Schrift auf Orange — die Sonderregel ist damit nicht
   mehr nötig und hätte den Kopf wieder auseinanderlaufen lassen. */
/* Auch die feste Leiste unten bleibt hell */