/* ============================================================
   v11 only — Korrekturen aus der Abnahme der Chefin.
   Geladen nach v1 + v8 + v9 + v10, erbt also alles Bisherige.
   ============================================================ */

/* ---------- Hero auf flachen Laptops ----------
   Gemeldet: "rutscht alles zu weit nach unten, fast an den Rand".
   Gemessen auf 1512x820: der Hero wurde 865px hoch und lief damit 45px ueber
   das Fenster hinaus, die Subline endete 8px vor der Unterkante.

   Ursache ist die Schriftgroesse in v1.css: clamp(2.8rem, 12vw, 12rem) kennt
   nur die Fensterbreite. Auf 1512px ergibt 12vw 181px, drei Zeilen also 479px
   -- unabhaengig davon, wie flach das Fenster ist. Der min()-Term nimmt die
   Hoehe dazu, wodurch die Headline auf niedrigen Fenstern von allein kleiner
   wird, statt den Rest hinauszudruecken. */
.v11 .hero__title { font-size: clamp(2.8rem, min(10vw, 19vh), 10rem); }

/* ---------- Vollbild-Menue ----------
   Gemeldet: "Das Menue ist zu gross" und "scrolled ist nicht weiter".

   Die Groesse steht in v1.css dreimal identisch (Links, Order-Label,
   Contact-Button) -- hier gemeinsam gesetzt, sonst wandern die drei
   auseinander. Sieben Eintraege ergaben bei 7rem rund 787px Liste. */
.v11 .overlay__nav a,
.v11 .overlay__order-label,
.v11 .overlay__nav-btn { font-size: clamp(2rem, 7vw, 4.4rem); }

/* Der eigentliche Grund, warum sich nichts scrollen liess: .overlay hatte
   weder overflow noch eine Scrollachse, und justify-content: center schiebt zu
   hohen Inhalt symmetrisch ueber BEIDE Kanten. Die oberen Eintraege landen
   dadurch bei negativen Koordinaten und sind auch mit Scrollbalken nicht mehr
   erreichbar. 'safe center' zentriert nur, solange der Inhalt passt, und faellt
   sonst auf flex-start zurueck. */
.v11 .overlay {
  justify-content: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------- Burger dauerhaft sichtbar ----------
   Gemeldet: "Menue Button erscheint erst, wenn man runter scrolled."

   Das war kein Schoenheitsfehler, sondern eine Sackgasse: der Burger liegt in
   .nav__actions mit opacity: var(--nav-progress), und .nav selbst ist bei
   Progress 0 um -110% verschoben. Am Seitenanfang liess sich das Menue damit
   ueberhaupt nicht oeffnen.

   Erster Versuch war position: fixed auf dem Burger -- das greift hier nicht.
   .nav traegt eine transform, und innerhalb eines transformierten Vorfahren
   bezieht sich fixed auf diesen statt aufs Fenster; der Burger blieb bei
   top: -64px stehen. Stattdessen die beiden Ursachen einzeln aufheben:

   .nav bleibt an Ort und Stelle statt sich hochzuschieben. Sichtbar wird die
   Leiste dadurch nicht -- ihr Hintergrund ist color-mix mit progress * 85 %,
   bei Progress 0 also durchsichtig.

   .nav__actions wird deckend. Das enthaltene .nav__action-target hat sein
   eigenes opacity: 0 und bleibt damit unsichtbar, es taucht also nur der
   Burger auf und nicht die Messkopie von Menu/Order.

   pointer-events muss der Burger sich einzeln zurueckholen, weil
   .nav:not(.is-interactive) .nav__actions sie oben abschaltet. */
.v11 .nav { transform: none; }
.v11 .nav__actions { opacity: 1; transform: none; }
.v11 .burger { opacity: 1; pointer-events: auto; }

/* ---------- MENU-Button gefuellt ----------
   Gemeldet: "Das Farbton ist anders als bei den Buttons."

   Nachgemessen sind Overlay-Schrift und ORDER-Button exakt gleich (#eeb6a0).
   Abweichler ist der MENU-Button: Plum-Kontur auf transparent, also invertiert.
   Beide Ghost-Varianten muessen angefasst werden -- .btn--menu sitzt im Hero,
   .btn--ghost im Header. Die im gescrollten Header sichtbaren Buttons sind die
   angedockten Hero-Buttons; .nav__action-target ist nur die unsichtbare
   Messkopie. */
.v11 .btn--menu,
.v11 .btn--ghost {
  background: var(--plum);
  color: var(--blush);
}

/* ---------- Family-Kopfzeile ----------
   Die rechte Spalte traegt in v11 einen ganzen Satz statt drei Woertern.
   46ch war zu knapp: ch kennt das letter-spacing nicht, deshalb wurden es
   vier Zeilen auf 289 px. Flex-Restbreite laesst den Satz auf zwei Zeilen
   sitzen, ohne die Kopie der Chefin zu kuerzen. */
.v11 .family__head { align-items: flex-start; }
.v11 .family__head span:last-child {
  flex: 1 1 18rem;
  max-width: 42rem;
  text-align: right;
  line-height: 1.55;
}
@media (max-width: 860px) {
  .v11 .family__head { flex-direction: column; gap: 0.55rem; }
  .v11 .family__head span:last-child {
    flex: none;
    max-width: none;
    text-align: left;
  }
}

/* ---------- Kampagnenstreifen zwischen Menue und Catering ----------
   Endlosband aus den Kampagnenmotiven. Mechanik bewusst identisch zum
   Wortticker im Hero (v1.css:242): der Track ist width:max-content, die
   Gruppe steht zweimal im Markup, und die Animation schiebt um -50% --
   also exakt um eine Gruppenbreite. Dadurch schliesst die Schleife nahtlos
   und ohne JavaScript.

   Nahtlos heisst hier auch optisch: keine Fugen, keine Rundungen, keine
   Polsterung. Die Kacheln stossen kantenbuendig aneinander und bilden ein
   durchgehendes Band. Ein einziger Pixel Abstand oder Radius wuerde das
   Raster sichtbar machen und die Wirkung zerstoeren.

   Die Motive sind 1587x2245 (rund 1:1.41). Die Kachelbreite wird deshalb
   nicht gesetzt, sondern ergibt sich aus der Hoehe und dem aspect-ratio --
   sonst muesste die Breite bei jeder Hoehenaenderung nachgerechnet werden. */
.v11 .postermarquee {
  overflow: hidden;
  background: var(--cream, #fdf3ee);
  padding: 0;
  font-size: 0;                   /* toetet den Zeilenumbruch-Zwischenraum */
  line-height: 0;
}

.v11 .postermarquee__track {
  display: flex;
  width: max-content;
  animation: marquee 52s linear infinite;
}

.v11 .postermarquee__group {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.v11 .postermarquee__item {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;                 /* ohne dies schrumpfen die Kacheln im Flex */
  height: clamp(11rem, 26vh, 18rem);
  aspect-ratio: 1587 / 2245;
  overflow: hidden;
  border-radius: 0;
}

.v11 .postermarquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v11 .postermarquee:hover .postermarquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .v11 .postermarquee__track { animation: none; }
  /* Ohne Lauf waere die zweite Gruppe nur Ballast -- der Streifen wird
     stattdessen von Hand scrollbar. */
  .v11 .postermarquee { overflow-x: auto; }
}