/* Ergänzungen aus den Kundenanmerkungen vom September 2026. */
html{scroll-padding-top:110px}
.kopf{max-width:1560px;padding-inline:clamp(20px,3vw,48px);gap:16px}
.kopf > .knopf{white-space:nowrap;flex:none;padding-inline:16px;font-size:11.5px}
.kopf .thema{flex:none}
nav.haupt{align-items:center;gap:clamp(12px,1.2vw,20px)}
nav.haupt > a,.nav-gruppe > a{display:inline-flex;align-items:center;min-height:44px}
.nav-gruppe{position:relative;display:flex;align-items:center}
.nav-auf{display:inline-flex;align-items:center;justify-content:center;
  flex:none;width:28px;min-height:44px;padding:0;border:0;background:none;
  color:var(--schrift);cursor:pointer}
.nav-auf svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5}
.nav-auf[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-auf:hover{color:var(--akzent)}
.nav-auf:focus-visible,.nav-unter button:focus-visible{outline:2px solid var(--marke);outline-offset:2px}
.nav-unter{position:absolute;top:100%;left:-16px;z-index:2;min-width:220px;
  padding:8px 16px;background:var(--flaeche);border:1px solid var(--linie-stark)}
.nav-unter[hidden]{display:none}
nav.haupt .nav-unter a,.nav-unter button{display:flex;align-items:center;width:100%;min-height:44px;
  padding:12px 0;font:400 14px/1.4 var(--text);letter-spacing:0;text-transform:none;
  text-align:left;color:var(--schrift);background:none;border:0;cursor:pointer;text-decoration:none}
nav.haupt .nav-unter a:hover,.nav-unter button:hover{color:var(--akzent);text-decoration:underline;text-underline-offset:4px}
.oeffnungszeiten-kurz{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:4px 24px;padding:10px var(--rand);border-bottom:1px solid var(--linie-stark);
  font:400 13px/1.5 var(--text);color:var(--schrift-schwach);text-align:center}
.oeffnungszeiten-kurz a{font-weight:600;color:var(--schrift);text-underline-offset:3px}
.oeffnungszeiten-kurz span{white-space:nowrap}
#oeffnungszeiten,#mittagstisch{scroll-margin-top:20px}
/* Native Auswahlmenüs brauchen explizite, zusammenpassende Vorder- und
   Hintergrundfarben: insbesondere bei dunkler Seite und hellem Betriebssystem. */
.maske select{color-scheme:light}
[data-thema="dunkel"] .maske select{color-scheme:dark}
.maske select option{background-color:var(--flaeche);color:var(--schrift)}
@media(max-width:1279px){
  .menue{display:inline-flex;margin-left:auto}
  nav.haupt{position:absolute;top:100%;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:0;background:var(--flaeche);
    border-bottom:1px solid var(--linie-stark);padding:6px var(--rand) 18px;
    max-height:calc(100dvh - 150px);overflow-y:auto}
  nav.haupt[data-offen]{display:flex}
  nav.haupt > a,.nav-gruppe{border-bottom:1px solid var(--linie)}
  nav.haupt > a,.nav-gruppe > a{padding:15px 0;font-size:15px;letter-spacing:.04em}
  .nav-gruppe{flex-wrap:wrap}
  .nav-gruppe > a{flex:1;border-bottom:0}
  .nav-auf{width:44px}
  .nav-unter{position:static;flex-basis:100%;min-width:0;padding:0 0 8px 16px;border:0}
  nav.haupt .nav-unter a,.nav-unter button{font-size:15px}
  .kopf{position:relative}
}
@media(max-width:1080px){.kopf > .kopf-tisch{display:none}}
@media(max-width:700px){
  .kopf{gap:10px}
  .kopf > .knopf{display:none}
  .oeffnungszeiten-kurz{gap:3px 10px;padding:9px 12px;font-size:12px}
  .oeffnungszeiten-kurz a{flex-basis:100%}
}
@media(max-width:360px){
  .kopf{gap:8px;padding-inline:14px}
  .oeffnungszeiten-kurz{font-size:11.5px}
}