/* Zusätze zum 1:1-Abbild der früheren WordPress-Seite. Nur was die festgelegten Abweichungen brauchen,
   alles andere kommt unverändert aus den Original-Stylesheets unter /wp-content/ und /wp-includes/. */

/* 1) Hinweis zur Speicherung (Info-Hinweis, Knopf „Nicht mehr anzeigen“). Farben des früheren Hinweises:
      Weiß, Text #2b2b2b, Knopf #34518b. Sichtbar über transform + visibility, Höhe per ResizeObserver in --cookie-h. */
html { scroll-padding-bottom: var(--cookie-h, 0px); }
body.has-cookie { padding-bottom: calc(var(--cookie-extra, 24px) + var(--cookie-h, 0px)); }
#cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000001;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.25rem;
  margin: 0; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: #fff; color: #2b2b2b; box-shadow: 0 -5px 13px rgba(0, 0, 0, .2);
  font-family: "Open Sans", Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.45; text-align: left;
  transform: translateY(110%); visibility: hidden;
}
#cookie.is-visible { transform: none; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  #cookie { transition: transform .35s ease, visibility 0s linear .35s; }
  #cookie.is-visible { transition: transform .35s ease, visibility 0s; }
}
#cookie p { margin: 0; padding: 0; flex: 1 1 200px; max-width: 46rem; color: inherit; font-size: inherit; line-height: inherit; }
#cookie a { color: #2b2b2b; text-decoration: underline; }
#cookie button {
  font: inherit; font-weight: 700; min-height: 44px; margin: 0; padding: .45rem 1.1rem;
  border: 0; border-radius: 5px; background: #34518b; color: #fff; cursor: pointer;
}
#cookie button:active { background: #263c68; }   /* Druck-Feedback dunkler statt blasser, Kontrast steigt */
#cookie :focus-visible { outline: 3px solid #34518b; outline-offset: 2px; }
/* Die untere Leiste auf dem Handy (Anrufen, WhatsApp, Facebook, Instagram; Divi-Sticky mit bottom:0 inline) weicht dem
   Hinweis aus, solange er steht. Im Querformat bleibt dafür zu wenig Höhe, dort ist sie so lange ausgeblendet. */
body.has-cookie .et_pb_sticky--bottom { bottom: var(--cookie-h, 0px) !important; }
@media (max-height: 420px) { body.has-cookie .et_pb_sticky--bottom { display: none !important; } }

/* Fußknopf „Hinweis zur Speicherung“ (Widerruf): sieht aus wie die Links daneben, das Skript blendet ihn ein */
.music-foot-menu li.mg-hinweis-li[hidden] { display: none !important; }
.fuss-speicher { font: inherit; color: inherit; line-height: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }
@media (hover: hover) { .fuss-speicher:hover { text-decoration: underline; } }
.fuss-speicher:active { text-decoration: underline; text-decoration-thickness: 2px; }
.fuss-speicher:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (forced-colors: active) { .fuss-speicher { color: LinkText; } }

/* 2) Instagram-Beiträge als Standbild: Die Kachel ist quadratisch wie vorher, als das Feed-Skript die Höhe setzte. */
#sb_instagram .sbi_photo { aspect-ratio: 1 / 1; overflow: hidden; }
#sb_instagram .sbi_photo img { display: block; height: 100%; }

/* 3) Kontaktformular ohne Divis Skript, Versand per POST an /contact.php. Rückmeldung: contact.php leitet auf
   /#kontakt-<schlüssel>, nur die angesprungene Meldung erscheint, bei Erfolg statt des Formulars. */
.mg-meldung { display: none; }
.mg-meldung:target { display: block; margin: 0 0 20px; }
.mg-meldung p { padding: 0; }
#kontakt-danke:target ~ .et_pb_contact { display: none; }
/* Honeypot: für Menschen unsichtbar, nie left:-9999px (Bau-Guardrail 2) */
.mg-hp { position: absolute !important; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Feldbeschriftungen für Screenreader statt display:none, sichtbar bleibt der Platzhalter wie auf der Altseite */
.et_pb_contact_form_1 label.et_pb_contact_form_label[for] {
  display: block; position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* Haken: Divi blendet die echte Checkbox aus (display:none), ohne Divis Skript wäre sie dann per Tastatur nicht erreichbar
   und required scheiterte still. Sie liegt jetzt unsichtbar deckungsgleich auf Divis Kästchen, der Fokus zeigt sich dort. */
.et_pb_contact_form_1 .et_pb_contact_field_checkbox { position: relative; }
.et_pb_contact_form_1 .et_pb_contact .et_pb_contact_field input[type=checkbox] {
  /* Divis Kästchen (18 px) steht mittig in der ersten Zeile des Labels (line-height 1.7em) */
  display: block; position: absolute; left: 0; top: calc((1.7em - 18px) / 2); width: 18px; height: 18px; margin: 0;
  font-size: inherit; opacity: 0; cursor: pointer;
}
.et_pb_contact_form_1 .et_pb_contact .et_pb_contact_field input[type=checkbox]:focus-visible + label i { outline: 2px solid #34518b; outline-offset: 2px; }
/* Knopfsperre beim Absenden (/mg/zusatz.js) */
.et_pb_contact_form_1 .et_pb_contact_submit:disabled { opacity: .65; cursor: progress; }

/* 4) Allergen-Hinweis beim Knopf „Unsere Speisekarte“, im Stil des Einleitungstexts darüber */
.mg-allergene { position: relative; width: 80%; max-width: 1080px; margin: 0 auto; padding: 0 0 10px; }
.mg-allergene p {
  max-width: 525px; margin: 0 auto; padding: 0; text-align: center;
  font-family: Inter, Helvetica, Arial, Lucida, sans-serif; font-size: 17px; font-weight: 500; line-height: 25.5px; color: #a4833a;
}
@media (max-width: 980px) { .mg-allergene p { font-size: 18px; line-height: 27px; } }

/* 4b) 500-Seite (neu, im Look der 404): Links im Text in Marine und unterstrichen, sonst Divi-Standardblau mit 2,8:1 */
.mg-fehlerseite .entry p a { color: #34518b; text-decoration: underline; }

/* 4c) Credit-Fuß nach Hausstandard (Footer_Standard.md) statt „Designed by MB-COMPUTERS | Powered by WordPress“: dunkle
       Leiste der früheren Seite (#171717), Gold des Fußes (#a4833a) für Hover, Druck und Fokus. Auf #171717: Text #cfcfcf
       11,5:1, Link Weiß 18,1:1, Gold 5,0:1; Symbol Weiß auf dem Abzeichen 14:1, dunkel auf Gold 5,0:1. */
.ft-credit {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
  margin: 0; padding: 20px clamp(20px, 5vw, 40px); background: #171717; border-top: 1px solid rgba(255, 255, 255, .14);
  font-family: Inter, Helvetica, Arial, Lucida, sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; color: #cfcfcf;
}
/* Textlink: immer unterstrichen (nur über die Farbe hebt er sich nicht 3:1 vom Text ab), inline-block für 24 px Zielhöhe.
   :first-child, weil auch span.ft-socials ein Kind ist: „> span > a“ träfe die Abzeichen mit (im Hover Gold auf Gold). */
.ft-credit > span:first-child > a { display: inline-block; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ft-socials { display: inline-flex; gap: 16px; align-items: center; }   /* 16px: darunter überlappen die 44er-Trefferflächen */
.ft-socials a {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; transition: background-color .2s, color .2s;
}
.ft-socials a::before { content: ""; position: absolute; inset: -8px; }   /* Optik 28×28, Trefferfläche 44×44 */
.ft-socials svg { width: 14px; height: 14px; fill: currentColor; }
@media (hover: hover) {
  .ft-credit > span:first-child > a:hover { color: #a4833a; }
  .ft-socials a:hover { background: #a4833a; color: #171717; }
}
.ft-credit > span:first-child > a:active { color: #a4833a; }   /* Druck-Feedback, am Handy gibt es kein Hover */
.ft-socials a:active { background: #a4833a; color: #171717; }
.ft-credit a:focus-visible { outline: 2px solid #a4833a; outline-offset: 3px; }
@media (max-width: 720px) { .ft-credit { flex-direction: column; gap: 8px; } }

/* 5) Bewegung reduzieren: Einblend- und Übergangsanimationen der Seite enden sofort, nur wenn der Besucher das eingestellt hat.
   Ausnahme Spur des Partnerbands: Divis Karussell zählt auf seine Transition, mit 0,01 ms raste es (ein Logo je 50 ms,
   gemessen 12.11.2026). Still steht es über /mg/zusatz.js (Divis "auto" aus). */
@media (prefers-reduced-motion: reduce) {
  *:not(.et_pb_group_carousel_track), *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  #cookie, #cookie * { transition: none !important; }
}

/* 6) Partnerband: Die Logos laufen am Rand der Logozeile weich aus, statt mitten im dunklen Band an einer harten Kante
      abgeschnitten zu werden. Der Verlauf ist 8 % breit, höchstens so breit wie die Lücke vor dem äußeren Logo minus 6 px:
      Steht das Band, ist jedes sichtbare Logo voll deckend. Lücke = Drittel der Zeile minus Logo (Desktop 10vw, Tablet 20vw),
      am Handy ein Logo 40vw, aktiv 1,08-fach. */
.et_pb_group_carousel_0 { --mg-rand: min(8%, calc(16.667% - 5vw - 6px)); }
@media only screen and (max-width: 980px) { .et_pb_group_carousel_0 { --mg-rand: min(8%, calc(16.667% - 10vw - 6px)); } }
@media only screen and (max-width: 767px) { .et_pb_group_carousel_0 { --mg-rand: min(8%, calc(50% - 21.6vw - 6px)); } }
.et_pb_group_carousel_0 .et_pb_group_carousel_container {
  padding: 16px 0; margin: -16px 0;   /* die Maske wirkt nur im Rahmen: Luft für das vergrößerte aktive Logo, ohne Versatz */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--mg-rand), #000 calc(100% - var(--mg-rand)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--mg-rand), #000 calc(100% - var(--mg-rand)), transparent);
}
/* Divi beschneidet die Slides neben dem Fenster per clip-path an ihrem eigenen Rahmen. Beim Austritt trifft das das noch
   vergrößerte Logo oben und unten (am Handy). Außerhalb des Fensters schneidet ohnehin der Container. */
.et_pb_group_carousel_0.et_pb_group_carousel .et_pb_group_carousel_slide_bleed_clip_prev,
.et_pb_group_carousel_0.et_pb_group_carousel .et_pb_group_carousel_slide_bleed_clip_next { clip-path: none; }

/* 7) Schmale und niedrige Bildschirme
   a) Große Überschriften brachen auf Handys unter rund 350 px Breite mitten im Wort. Dort wird die Schrift nur so weit
      kleiner, dass das längste Wort in die Zeile passt; ab 334, 346 bzw. 354 px gilt wieder Divis Größe. */
@media only screen and (max-width: 767px) {
  .home .et_pb_text_0 .et_pb_text_inner h1 { font-size: min(53px, 15vw); }               /* „Genussvolle“ */
  .home .et_pb_text_7 .et_pb_text_inner h2 { font-size: min(45px, 13.5vw); }             /* „Geschmack.“ */
  .page-id-339490 .et_pb_text_6 .et_pb_text_inner h1 { font-size: min(45px, 13vw); }     /* „Datenschutz“ */
  /* Knopf „TISCHRESERVIERUNG“ (Divi: 40 px Polster je Seite, 294 px breit) ragte unter rund 370 px über seine Spalte (80 %),
     bei 320 px 6 px über den Bildschirmrand. Nur die seitlichen Polster schrumpfen, bis er mittig in die Spalte passt. */
  .home .et_pb_button_module_wrapper.et_pb_button_1_wrapper .et_pb_button_1,
  .home .et_pb_button_module_wrapper.et_pb_button_1_wrapper .et_pb_button_1:hover {
    padding-left: min(40px, calc(40vw - 109px)) !important; padding-right: min(40px, calc(40vw - 109px)) !important;
  }
}
/* b) Handy-Menü im Querformat: Divis Menü hängt im Kopf und reichte unter den Bildschirmrand, ganz oben lag außerdem die
      untere Leiste darüber („Reservieren“, „Kontakt“ nicht erreichbar). Das Menü endet jetzt am sichtbaren Rand (Kopf etwa
      20vw hoch, Hinweis abgezogen) und scrollt bei Bedarf; solange es offen ist, liegt der Kopf über der Leiste. */
@media only screen and (max-width: 980px) {
  .et_mobile_menu {
    max-height: calc(100vh - 20vw - var(--cookie-h, 0px)); max-height: calc(100svh - 20vw - var(--cookie-h, 0px));
    overflow-y: auto; overscroll-behavior: contain;
  }
}
header .et_builder_inner_content:has(.mobile_nav.opened) { z-index: 9999; }
/*    Bis 420 px Höhe passten die vier Punkte mit Divis Abständen (je 57 px, oben und unten 5 % der Breite) trotzdem nicht
      unter den Kopf: „Kontakt“ lag bei 568 × 320, 740 × 360 und 812 × 375 ganz unter dem sichtbaren Rand, ohne Hinweis aufs
      Scrollen. Dort enger: Punkte 45 px hoch (Trefferfläche über 44 px), Rand oben und unten 8 px. */
@media only screen and (max-width: 980px) and (max-height: 420px) {
  .header-menu .et_mobile_menu { padding-top: 8px; padding-bottom: 8px; }
  .header-menu .et_mobile_menu li a { padding-top: 12px !important; padding-bottom: 12px !important; }
}
/* c) Der „Nach oben“-Knopf (Divi, 125 px über dem Rand) rückt mit der Handy-Leiste über den Hinweis, sonst liegt er,
      solange der Hinweis steht, auf der Leiste (bei 600 px auf dem Instagram-Symbol). Im Querformat ist die Leiste dann aus. */
@media only screen and (max-width: 767px) and (min-height: 421px) {
  body.has-cookie .et_pb_scroll_top { bottom: calc(125px + var(--cookie-h, 0px)); }
}
/* d) Telefonnummern brechen nicht mitten in der Nummer um (500-Seite bei 600 px „04834 | 9627680“, ebenso möglich in den
      Formular-Meldungen). Die längste Nummer hat 15 Zeichen und passt ab 320 px in jede Spalte. */
a[href^="tel:"] { white-space: nowrap; }

/* Druck: Hinweis und Fußknopf nicht mitdrucken */
@media print {
  #cookie, .mg-hinweis-li, .fuss-speicher { display: none !important; }
  body.has-cookie { padding-bottom: 0 !important; }
}