/* Ergänzungen zum Webflow-Export: Scrollbar, Zustandsklassen, Animationen.
   Zeiten entsprechen den Webflow-Interaktionen des Originals. */

/* Scrollbar (vorher inline im <head>) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e08f7a; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background: #668563; border-radius: 5px; }

/* ---------- Megamenü ---------- */
.nav-overlay[data-menu-overlay] {
  opacity: 0;
  transition: opacity 300ms ease;
}
.nav-overlay[data-menu-overlay].is-open { display: block; }
.nav-overlay[data-menu-overlay].is-visible { opacity: 1; }

.nav-megamenue[data-menu] {
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 400ms ease;
}
.nav-megamenue[data-menu].is-open { display: flex; }
.nav-megamenue[data-menu].is-visible { transform: scaleY(1); }

/* Burger pulsiert einmal beim Seitenstart (Scale 1.2 in 900 ms, zurück in 700 ms) */
@keyframes it-burger-pulse {
  0%   { transform: scale(1); }
  56%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.link-menue[data-menu-toggle] { animation: it-burger-pulse 1600ms ease 1; }
.link-menue[data-menu-toggle].is-active { background-color: var(--illegallytastycolor); }

/* ---------- Popups ---------- */
.pop-up[data-popup],
.popup-offerta[data-popup] {
  opacity: 0;
  transition: opacity 400ms ease;
}
.pop-up[data-popup].is-open,
.popup-offerta[data-popup].is-open { display: flex; }
.pop-up[data-popup].is-visible,
.popup-offerta[data-popup].is-visible {
  opacity: 1;
  transition-duration: 700ms;
}
[data-popup-open] { cursor: pointer; }

/* Speisekarten-Cover pulsiert beim Seitenstart nur dort, wo es sichtbar ist (Tablet/Handy) */
@keyframes it-karte-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@media screen and (max-width: 991px) {
  .karte[data-popup-open] { animation: it-karte-pulse 1400ms ease 1; }
}

/* ---------- Slider ---------- */
[data-slider] .w-slide {
  transition-property: transform;
  transition-timing-function: ease;
}
[data-slider] .w-slider-arrow-left.is-disabled,
[data-slider] .w-slider-arrow-right.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}
[data-slider]:focus { outline: none; }
[data-slider]:focus-visible { outline: 2px solid var(--randfarbe); outline-offset: 2px; }

/* ---------- Überschriften-Hierarchie ---------- */
/* Jede Seite hat genau eine H1: die erste Überschrift des Inhalts, im Export eine H2.
   Die H1 übernimmt deshalb die H2-Maße des Exports und sieht aus wie vorher. */
h1 { margin-top: 20px; font-size: 32px; line-height: 36px; }
/* Die Menüeinträge waren im Export H1 und dadurch fett; jetzt sind es Divs. */
.nav-menue-link { font-weight: 700; }

/* ---------- 404-Seite ---------- */
.notfound-text {
  color: var(--braun);
  text-align: center;
  margin: 0 15px 40px;
  font-family: Droidsans, sans-serif;
  font-size: 20px;
  line-height: 30px;
}