/* ============================================================
   v12 only — Menue-Tafeln statt Katalog, groesserer Kampagnenstreifen.
   Laedt nach v1/v8/v9/v10/v11, die bleiben damit nachweislich unberuehrt.
   ============================================================ */

/* --- Die drei Tafeln der Bildschirmkarte -----------------------------
   Uebernimmt Polsterung und Farben der abgeloesten Katalog-Section, damit
   der Seitenrhythmus zwischen Statement (plum) und Kampagnenstreifen
   unveraendert bleibt. */
.v12 .menuboards {
  padding: var(--section-y) var(--pad-x);
  background: var(--cream);
  color: var(--plum);
}

.v12 .menuboards__head {
  max-width: min(var(--maxw), 76rem);
  margin: 0 auto clamp(2.5rem, 6vw, 4.5rem);
}
.v12 .menuboards__title { font-size: var(--fs-display-lg); }

/* 1600px Seitenbreite mal drei 9:16-Tafeln waeren 925 px hohe Kacheln --
   die Section allein waere dann laenger als der Viewport. Deshalb ein
   eigener, engerer Deckel als --maxw. */
.v12 .menuboards__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.9rem, 2.2vw, 2rem);
  max-width: min(var(--maxw), 76rem);
  margin: 0 auto;
}

.v12 .menuboards__board {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Eigener Rahmen um das Bild, damit der Zoom beim Ueberfahren beschnitten
   wird, ohne den Link selbst zu einem overflow-Container zu machen. */
.v12 .menuboards__frame {
  display: block;
  overflow: hidden;
  background: var(--blush);
}
.v12 .menuboards__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 1920;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.v12 .menuboards__board:hover .menuboards__frame img,
.v12 .menuboards__board:focus-visible .menuboards__frame img { transform: scale(1.03); }

.v12 .menuboards__foot {
  max-width: min(var(--maxw), 76rem);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  text-align: center;
}

/* --- Line-Up: kein seitlicher Ueberlauf --------------------------------
   Sobald die Becher auffaechern, wurde die Seite auf Telefonbreite um 39 px
   breiter als das Fenster und liess sich seitlich wischen -- gemessen in
   WebKit (iPhone 13) und Chromium bei 390 px, auch auf der Live-Domain.
   Die aeusseren Becher schieben ueber die Kante hinaus; das overflow:hidden
   der Buehne haelt sie sichtbar zurueck, der Scrollbreite des Dokuments
   entgehen sie aber nicht. clip auf der Section schneidet beides ab und
   legt anders als hidden keinen eigenen Scroll-Container an. */
.v12 .lineup { overflow-x: clip; }

/* --- Kampagnenstreifen deutlich groesser ------------------------------
   v11 stand auf clamp(11rem, 26vh, 18rem), also 212 px auf einem
   815-px-Fenster. Hier rund das Anderthalbfache.

   Die Laufzeit muss mit: der Track ist so breit wie seine Kacheln, eine
   groessere Kachel macht ihn laenger. Bei gleichen 52 s liefe der Streifen
   entsprechend schneller. 52 s * (44/26) ~ 88 s halten die Geschwindigkeit
   in Pixeln pro Sekunde konstant. */
.v12 .postermarquee__item { height: clamp(17rem, 44vh, 30rem); }
.v12 .postermarquee__track { animation-duration: 88s; }

/* --- Verhaeltnis Kicker zu Ueberschrift ------------------------------
   "THE MENU" stand mit 11,5 px ueber einer 88 px hohen Zeile -- Faktor 7,6.
   Der Kicker las sich dadurch nicht als Teil der Ueberschrift, sondern wie
   eine versehentlich stehengebliebene Notiz. Beides zieht aufeinander zu:
   der Kicker deutlich groesser, die Ueberschriften etwas zurueck.

   Die Sektionstitel standen ausserdem auf vier verschiedenen Groessen
   (72 / 77 / 80 / 88 px), weil jede ihren eigenen clamp mitbringt. Sie
   landen jetzt gemeinsam bei rund 62 px. */
/* Ein Wert fuer alle redaktionellen Kleinlabels. Sie standen auf vier
   verschiedenen Groessen zwischen 11 und 11,5 px, jede in ihrer eigenen
   Datei -- .eyebrow in v1.css, .rule-row daneben, .fam__kicker wieder
   woanders, .lineup__eyebrow als feste 11px in v8.css. Alle vier meinen
   dasselbe und sehen jetzt auch gleich aus.

   Die Laufweite geht dabei zurueck (0,26-0,3em -> 0,2em): bei 11 px traegt
   weite Sperrung, bei 17 px zerfaellt das Wort. */
.v12 {
  --v12-label: clamp(0.9rem, 1.2vw, 1.2rem);
}

.v12 .eyebrow,
.v12 .rule-row,
.v12 .fam__kicker,
.v12 .lineup__eyebrow,
.v12 .lineup__rule {
  font-size: var(--v12-label);
  letter-spacing: 0.2em;
}

.v12 .eyebrow {
  opacity: 0.75;
  margin-bottom: 0.55rem;
}

/* Der zweite Eintrag der Regelzeile stand auf 55 % Deckkraft -- bei 11 px
   noch lesbar, jetzt unnoetig zurueckgenommen. */
.v12 .rule-row span:last-child { opacity: 0.7; }

/* Formularbeschriftungen im Kontaktfenster: etwas kleiner als die
   redaktionellen Labels, aber nicht mehr 11,5 px. */
.v12 .contact-field__label {
  font-size: clamp(0.82rem, 1vw, 1rem);
  letter-spacing: 0.12em;
}

.v12 { --fs-display-lg: clamp(2rem, 4.3vw, 3.85rem); }

.v12 .concept__title        { font-size: clamp(1.95rem, 4.1vw, 3.7rem); }
.v12 .findus__title         { font-size: clamp(2rem, 4.2vw, 3.8rem); }
.v12 .catering-promo__title { font-size: clamp(2.1rem, 5.6vw, 3.8rem); }
.v12 .family__title         { font-size: clamp(2rem, 4.3vw, 3.9rem); }

@media (max-width: 860px) {
  /* Drei Hochkant-Tafeln nebeneinander waeren auf 375 px je 110 px breit --
     unlesbar. Stattdessen eine wischbare Reihe: die Tafeln bleiben
     nebeneinander, nur eben nicht alle gleichzeitig im Bild. Die negative
     Margin zieht die Reihe bis an die Displaykanten, damit die Nachbarkachel
     angeschnitten sichtbar ist und die Wischgeste sich ankuendigt. */
  .v12 .menuboards__row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--pad-x) * -1);
    padding-inline: var(--pad-x);
  }
  .v12 .menuboards__row::-webkit-scrollbar { display: none; }
  .v12 .menuboards__board {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }

  /* Mobil gilt ein anderer Grundabstand (v1.css:707), und der Hub faellt
     kleiner aus. Grund: die wandernde Marke laeuft von der Hero- zur
     Kopfposition, und je hoeher sie startet, desto weiter taucht sie
     unterwegs ueber den oberen Bildrand. Gemessen in WebKit auf einem
     iPhone 13 -- v11 schneidet unterwegs 9 px ab, mit vollem Hub waren es
     16 px. Mit 0.7rem bleibt es auf dem Niveau von v11. */
  .v12 .hero__logo {
    margin-bottom: calc(clamp(1.35rem, 4.5vw, 2rem) + var(--v12-logo-lift));
  }

  /* Mobil ist der Streifen nicht 44vh hoch -- auf einem 812-px-Telefon
     waeren das 357 px, also fast das halbe Bild fuer eine Zaesur. */
  .v12 .postermarquee__item { height: clamp(13rem, 30vh, 20rem); }
  .v12 .postermarquee__track { animation-duration: 66s; }
}

/* --- Oeffnungs-Ampel neben Menu und Order ----------------------------
   Der Baustein steht IN .hero__actions und faehrt damit ohne eine Zeile
   JavaScript mit der Leiste in den Kopfbereich -- v1.js verschiebt und
   skaliert den ganzen Container, nicht die einzelnen Knoepfe.

   Damit das aufgeht, muss derselbe Baustein auch in der unsichtbaren
   Messkopie .nav__action-target stehen; dort liest die Leiste ihre
   Zielbreite ab. Fehlt er dort, skaliert sie auf eine Breite, die es im
   Kopfbereich gar nicht gibt (siehe nav-v1.php). */
.v12 .openstate {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  /* Steht links von Menu, der Abstand gehoert also nach rechts. */
  margin-right: 0.35rem;
  line-height: 1.2;
  white-space: nowrap;
}

.v12 .openstate__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--display);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--plum);
}

.v12 .openstate__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #9ca3af;
}
.v12 .openstate.is-open .openstate__dot { background: #16a34a; }
.v12 .openstate.is-closed .openstate__dot { background: #c8202b; }

/* Nur der offene Zustand pulst. Ein blinkendes Rot laese sich wie eine
   Stoerung, nicht wie Feierabend. Der Ring liegt im box-shadow, damit
   nichts umbricht, wenn er sich aufweitet. */
@keyframes v12-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
  70%  { box-shadow: 0 0 0 0.5rem rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.v12 .openstate.is-open .openstate__dot {
  animation: v12-pulse 2.2s var(--ease) infinite;
}

.v12 .openstate__times {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plum);
  opacity: 0.72;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  cursor: pointer;
  transition: opacity 0.25s var(--ease);
}
.v12 .openstate__times:hover,
.v12 .openstate__times:focus-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .v12 .openstate.is-open .openstate__dot { animation: none; }
}

/* --- Fenster mit den Oeffnungszeiten --------------------------------- */
.v12 .hours-dialog__inner { padding: clamp(1.8rem, 4.5vw, 2.8rem); }
.v12 .hours-dialog__title {
  font-size: clamp(1.9rem, 5vw, 3rem);
  margin: 0 0 1.4rem;
  line-height: 1;
}
.v12 .hours-dialog__list { margin: 0; }
.v12 .hours-dialog__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}
.v12 .hours-dialog__row dt { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.v12 .hours-dialog__row dd { margin: 0; font-variant-numeric: tabular-nums; }
.v12 .hours-dialog__row.is-today { font-weight: 700; }
.v12 .hours-dialog__row.is-today dt::after {
  content: " · today";
  font-weight: 400;
  opacity: 0.6;
}
.v12 .hours-dialog__note {
  margin: 1.2rem 0 0;
  font-size: 0.82rem;
  opacity: 0.65;
}

/* --- Logo im Hero etwas hoeher ---------------------------------------
   Der Hero zentriert seinen Inhalt. Eine reine negative margin-top wuerde
   die Inhaltshoehe verkleinern und damit den ganzen Block nach unten
   ruecken -- das Logo kaeme nur um die Haelfte hoch. Gegengleiche Margin
   unten haelt die Hoehe konstant: die Zentrierung bleibt, nur das Logo
   wandert um den vollen Betrag nach oben. Derselbe Kniff wie bei den
   Hero-Knoepfen in v9.css. */
.v12 { --v12-logo-lift: 1.4rem; }
/* Mobil kleinerer Hub. MUSS nach der Grunddefinition stehen: gleiche
   Spezifitaet, es gewinnt die spaetere Regel. Im Media-Block weiter oben
   blieb sie wirkungslos. */
@media (max-width: 860px) {
  .v12 { --v12-logo-lift: 0.7rem; }
}
.v12 .hero__logo {
  margin-top: calc(-1 * var(--v12-logo-lift));
  /* Der clamp ist der Wert aus v1.css:216 -- er MUSS hier wiederholt werden:
     margin-bottom ohne ihn wuerde ihn ersetzen statt ergaenzen, und der
     Abstand zur Headline waere um genau den Hub kleiner. Genau das war der
     erste, falsche Versuch: das Logo kam nur 5 statt 22 px hoch. */
  margin-bottom: calc(clamp(1.25rem, 3vw, 2.25rem) + var(--v12-logo-lift));
}

/* --- Die lange Family-Zeile ------------------------------------------
   "Different moments. Celebrate Life. ..." ist rund zehnmal so lang wie
   die drei bis vier Woerter, fuer die diese Zeile gebaut ist. Sie steht
   deshalb kleiner als ihr Gegenueber links. */
.v12 .family__head > :last-child {
  font-size: 0.8em;
  letter-spacing: 0.14em;
  max-width: 46ch;
  text-align: right;
}

/* --- Die Ampel im Hero, mobil ausserhalb der wandernden Leiste ---------
   Auf Telefonbreite gibt es im Kopf keinen Platz: gemessen bei 375 px
   stehen 335 px zur Verfuegung, Logo (99) + Luecke (16) + Leiste (297)
   verlangen 412. Weil .nav ein flex mit space-between ist und .nav__logo
   als Flex-Item schrumpfen darf, gab das Logo nach -- von 99 auf 21 px.
   Und da die wandernde Marke auf die Breite dieses Platzhalters skaliert
   (navSlot.width / heroSlot.width in v1.js), wurde sie im Kopf winzig.

   Die Ampel kleiner zu machen reicht nicht: selbst ohne sie kaeme die
   Leiste auf 222 px und damit knapp ueber die erlaubten 220. Deshalb steht
   mobil eine eigene Instanz unter den Knoepfen, die gar nicht erst
   mitfaehrt, und die Leiste ist wieder exakt so breit wie in v11. */
.openstate-mobile { display: none; }

@media (max-width: 860px) {
  .v12 .hero__actions .openstate,
  .v12 .nav__action-target .openstate { display: none; }

  /* Der Hero zentriert seinen Inhalt. Ein zusaetzlicher Block in der Reihe
     zieht ihn deshalb nach oben -- gemessen 37 px, das Logo staende dann
     noch hoeher als das, was gerade bemaengelt wurde. Mit gegengleicher
     Margin blieben immer noch 12 px uebrig (.hero__actions-slot traegt
     seinerseits schon eine negative Margin aus v9.css, die sich mit einem
     nachfolgenden Geschwister anders verrechnet).

     Deshalb gar nicht erst in den Fluss: absolut unter .hero__bottom, das
     ohnehin position:relative ist. Der Block traegt damit garantiert null
     zur Hoehe bei, und unter den Knoepfen sind 103 px Luft. */
  .v12 .openstate-mobile {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0.55rem 0 0;
  }
  .v12 .openstate-mobile .openstate {
    align-items: flex-end;
    margin-right: 0;
  }
}

/* ======================================================================
   Menue: der Burger ist der Knopf, der sich oeffnet
   ======================================================================
   Vorher lag das Overlay (z-index 60) ueber der Kopfleiste (50): der Burger
   verschwand darunter, und oben rechts stand ein zweites, fremdes Kreuz.
   Jetzt bleibt die Leiste sichtbar -- aber nur der Burger, alles andere in
   ihr tritt zurueck -- und seine beiden Striche werden zum Kreuz (.is-active
   steht schon in v1.css, es war nur nie zu sehen).

   Die Flaeche waechst als Kreis mit transform statt per clip-path: eine
   clip-path-Animation muss der Browser in jedem Bild neu zeichnen, samt der
   riesigen Schrift darin und der Seite dahinter, die beim Schliessen wieder
   auftaucht. Ein skalierender Kreis liegt beim Compositor. */
.v12 .overlay {
  background: transparent;
  clip-path: none;
  transition: none;
}
.v12 .overlay::before {
  content: "";
  position: absolute;
  /* Mittelpunkt des Kreises = Mitte des Burgers, ueber alle Breiten
     gemessen: 35 px von oben, --pad-x + 23 px von rechts. */
  top: 35px;
  right: calc(var(--pad-x) + 23px);
  width: 260vmax;
  height: 260vmax;
  margin: -130vmax -130vmax 0 0;
  border-radius: 50%;
  background: var(--plum);
  transform: scale(0);
  /* Nicht var(--ease): die Kurve der Seite ist stark ausklingend, damit waere
     der Kreis nach einem Viertel der Zeit schon ueber dem Bildschirm und das
     Aufziehen unsichtbar. Hier eine gleichmaessigere Kurve. */
  transition: transform 0.55s cubic-bezier(.45, .05, .25, 1);
}
.v12 .overlay.is-open::before { transform: scale(1); }
/* Der Inhalt liegt ueber der Flaeche und kommt, sobald sie steht. */
.v12 .overlay > * {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.v12 .overlay.is-open > * { opacity: 1; transition-delay: 0.3s; }
.v12 .overlay__close { display: none; }

/* Die Leiste liegt ueber dem Overlay, solange das Menue offen ist -- und beim
   Schliessen noch so lange, bis der Kreis eingefahren ist (0,55 s). Sonst
   faellt der Burger im Moment des Klicks unter die Flaeche und das Kreuz
   verschwindet, statt zurueckzuklappen.

   NICHT dauerhaft auf 61: die angedockten Hero-Knoepfe (.hero__bottom, 56)
   und das Logo (.brand-float, 55) muessen im Normalzustand UEBER der Leiste
   (50) liegen. Mit 61 verschwanden sie beim Scrollen hinter ihr -- so ging
   es am 16.09.2026 live.

   Die Verzoegerung haengt am Grundzustand, damit sie nur beim Schliessen
   greift; beim Oeffnen springt die Ebene sofort (Uebergang am offenen
   Zustand ohne Verzoegerung). */
.v12 .nav { transition: z-index 0s linear 0.55s; }
.no-scroll .v12 .nav { z-index: 61; transition: z-index 0s; }

/* Der Balken der Leiste (Farbe und Unschaerfe) sitzt jetzt auf einer eigenen
   Ebene dahinter. So kann er beim Oeffnen weich verschwinden, ohne dass die
   scrollabhaengige Farbe selbst eine Ueberblendung bekommt -- die wuerde beim
   Scrollen hinterherhinken. */
.v12 .nav {
  background: transparent;
  backdrop-filter: none;
}
.v12 .nav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--blush) calc(var(--nav-progress) * 85%), transparent);
  backdrop-filter: blur(calc(var(--nav-progress) * 10px));
  transition: opacity 0.3s var(--ease);
}
/* Offen bleibt von der Leiste nur der Burger: kein Balken, kein Logo, keine
   Menu- und Order-Knoepfe. Alles blendet, nichts springt. */
.v12 .nav__logo,
.v12 .nav__action-target { transition: opacity 0.25s var(--ease); }
.no-scroll .v12 .nav::after { opacity: 0; }
.no-scroll .v12 .nav__logo { opacity: 0; }
.no-scroll .v12 .nav__action-target {
  opacity: 0;
  pointer-events: none;
}

/* Der Burger selbst: seine Pille wird durchsichtig, die Striche hell -- beides
   ueberblendet, damit beim Schliessen das Kreuz sichtbar zu den zwei Strichen
   zurueckklappt, statt umzuspringen. Die Striche brauchen dafuer eine
   gleichmaessigere Kurve als die stark ausklingende der Seite: mit ihr war die
   Drehung nach 60 ms zu 80 % vorbei. */
.v12 .burger { transition: background-color 0.3s var(--ease); }
.v12 .burger span {
  transition:
    transform 0.42s cubic-bezier(.45, .05, .25, 1),
    background-color 0.3s var(--ease);
}
.no-scroll .v12 .burger {
  pointer-events: auto;
  background: transparent;
}
.no-scroll .v12 .burger span { background: var(--blush); }

@media (prefers-reduced-motion: reduce) {
  .v12 .overlay::before { transition: none; }
}


/* Die beiden Bestellwege im Seitenmenue standen so gross da wie die
   Menuepunkte selbst (bis 67 px) und sprengten die Zeile. Sie sind eine
   Unterauswahl -- also deutlich kleiner, aber weiter in der Hausschrift. */
.v12 .overlay__order-panel a,
.v12 .overlay__order-panel button {
  font-size: clamp(1.15rem, 2.6vw, 1.9rem);
  letter-spacing: 0;
}