/* Genuss Atelier Voehringen — handy.css
   Besitzer: kleim-mobile (Hanni). Handy und Tablet, nur Breitenabfragen
   bis 1199.98px. Grundlayout und Palette in stil.css (kleim-bau).

   Handy (<600): eigene Anordnung, kein gestapelter Desktop.
   - Wiederkehrendes Raster: jede Seite oeffnet mit einem randlosen
     Fotostreifen oben, der die Restluft des ersten Schirms traegt, und
     dem Text darunter. Auf der Startseite sitzt das Signet klein rechts
     an der Streifenkante (nie mittig).
   - Feste Bodenleiste aus den Kopfknoepfen: WhatsApp + Reservieren
     (ohne WhatsApp-Knopf: Vorbestellen + Reservieren), faehrt an der
     Fusszeile weg.
   - Je Sektion ein eigenes Muster: Wischreihe, Rundbild neben dem Kopf,
     Foto neben dem Kopf mit Zahlenband, Bento mit Fotostreifen,
     Linkzeilen, Note mit Zitat-Wischreihe, Band, Wochenraster.
   Tablet (600–1199.98): Navigation ins Menueblatt, Fotostreifen-Kopf,
   zweispaltige Raster dort, wo stil.css sonst einen Einzelblock stellt. */

/* ============================================================
   Bis 1199.98: alles, was Handy und Tablet gemeinsam haben
   ============================================================ */
@media (max-width:1199.98px){
  /* Navigation lebt im Menueblatt */
  .nav{display:none}
  .kopf-akt{margin-left:auto}
  .kopf-akt .kopf-wa{display:inline-flex}
  .kopf-menue{min-height:44px;padding:8px 14px}

  /* Menueblatt: ein Zeilensystem fuer Seiten und Sprungziele */
  .menue-akt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:4px}
  .menue-akt .knopf{min-height:48px;padding:10px 14px}
  .menue-liste a{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto 12px;align-items:center;gap:0 10px;
    padding:0;min-height:52px;font:400 1.32rem/1.15 var(--disp)}
  .menue-liste a span{grid-column:1}
  .menue-liste a small{grid-column:3;font:500 .84rem/1.2 var(--sans);color:var(--grau);white-space:nowrap}
  .menue-liste a::after{content:"";grid-column:4;width:8px;height:8px;justify-self:end;
    border-top:2px solid var(--rot-tief);border-right:2px solid var(--rot-tief);transform:rotate(45deg)}
  .menue-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .menue-kacheln .kachel{min-height:64px;padding:12px;min-width:0}
  .kachel span{min-width:0}
  .kachel-wa{background:var(--wa);border-color:var(--wa);color:var(--weiss)}
  .kachel-wa svg{stroke:var(--weiss)}
  .kachel-wa small{color:#E3F2EA}
  .menue-kacheln .kachel-wa b{color:inherit} /* offenes Menue traegt .offen, und .offen b (Statuszeile) faerbte das Wort dunkel auf Gruen */
  /* Gutscheinkarte als kompakte Vorschauzeile ueber der Wertwahl */
  .gutschein-in{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:22px}
  .gutschein-karte{flex:0 0 auto;aspect-ratio:auto;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
    column-gap:18px;align-items:center;padding:18px 20px}
  .gutschein-logo{grid-row:1 / 3}
  .gutschein-logo img{width:64px}
  .gutschein-wahl{flex:0 0 auto}
  .menue-zeiten{margin-top:14px;font-size:.9rem;color:var(--grau)}
  .menue-zeiten a{display:inline-flex;align-items:center;min-height:44px}

  /* Tippflaechen auf Touch-Geraeten */
  .note-link,.fuss-kontakt a,.fuss-nav a{display:inline-flex;align-items:center;min-height:44px}
  .fuss-unten [data-modal]{min-height:44px}
  .werte span{min-height:48px;display:flex;align-items:center;justify-content:center} /* Raster stellte " €" unter die Zahl */
  input,textarea,select{min-height:48px}
  .menge input{min-height:48px}

  /* Umbruch (Tim 01.10.2026: "das woerter nicht komisch random iwo stehen"):
     kurze Beschriftungen gleichmaessig umbrechen, Preise nie zwischen Zahl und Waehrung */
  .knopf,.weg-zeile,.wahl small,.kurs-stufe,.stufe small,.note-link,.hinweis,.hinweis-18,.eckdatum span{text-wrap:balance}
  .preis-leiste b,.korb-preis,.stufe-preis,.kurs-preis b,.gk-wert{white-space:nowrap}
  .fuss-nav a,.fuss-kontakt a[href^="https://wa.me"],.fuss-kontakt a[href^="tel:"],.credit a[href^="tel:"]{white-space:nowrap} /* "Über / mich", "0172 / 9485107" */
}

/* ============================================================
   Handy (<600)
   ============================================================ */
@media (max-width:599.98px){
  :root{
    --kopfh:60px;
    --bar:calc(58px + env(safe-area-inset-bottom, 0px));
    --sek:clamp(62px,16.5vw,70px);
    --streifen:clamp(170px,30svh,320px);
  }
  body{font-size:16px}

  /* ---------- Diaet-Umschalter ---------- */
  .d-only.d-only{display:none}
  span.m-only.m-only,small.m-only.m-only,b.m-only.m-only{display:inline}
  p.m-only.m-only,div.m-only.m-only{display:block}

  /* Einblendungen kuerzer und weicher (Tim 01.10.2026: ≈0,45 s) */
  html.js .rv.in{transition:opacity .42s ease,transform .5s var(--sanft);transition-delay:var(--d,0ms)}
  html.js .rv{transform:translateY(14px)}
  html.js .ln.in>span{transition-duration:.7s}

  /* ---------- Typografie ---------- */
  .h1{font-size:clamp(38px,min(12.4vw,6.4svh),60px);line-height:1.02}
  .h2{font-size:clamp(29px,8.4vw,38px)}
  /* Unterseiten-H1: laengste Zeilenmaske ("zusammen essen.", "Falkenstrasse 34,")
     misst 7,9em und muss auf 320-599 ohne Umbruch in der Maske stehen */
  .seitenkopf .h1{font-size:clamp(34px,min(11.2vw,6.4svh),56px)}
  .kicker{font-size:.76rem;margin-bottom:12px}
  .lead{font-size:1rem;margin-top:12px;line-height:1.55}
  .sek-kopf{margin-bottom:22px}

  /* ---------- Kopfleiste ---------- */
  .kopf-in{gap:10px}
  .marke{gap:10px;min-width:0;flex:0 1 auto}
  .marke-bild img{height:36px}
  .marke-name{min-width:0}
  /* Tim 02.10.2026: "das genuss atelier nicht so gut lesbar ... schriftart und groesse" —
     Gloock gross statt 18px, ein Hauch Kontur gegen die Haarstriche */
  .marke-name b{font-size:clamp(20px,5.7vw,24px);letter-spacing:.01em;white-space:nowrap;-webkit-text-stroke:.3px currentColor}
  .marke-name small{display:none} /* wiederholt nur den Kicker des ersten Schirms */
  .kopf-menue{padding:8px 12px;flex:0 0 auto}

  /* ---------- Bodenleiste aus den Kopfknoepfen ----------
     Die Knoepfe sind einzeln fixiert (kein transform am Kopf, sonst
     haengen sie am Kopf statt am Fenster). Rein ueber translate,
     raus an der Fusszeile ueber transform — zwei Eigenschaften, damit
     sich die beiden Zeitachsen nicht gegenseitig ueberschreiben.
     Tim 02.10.2026 („nicht so elegant"): schwebend im Satzspiegel statt
     randloser Farbbloecke, WhatsApp hell mit gruenem Zeichen, und erst
     sichtbar, wenn die Knoepfe des ersten Schirms weg sind (seite.js
     setzt html.knoepfe-da, solange .held-knoepfe im Bild steht). */
  .kopf-akt .knopf{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom, 0px));z-index:60;
    width:calc(50% - var(--sp) - 4px);height:48px;min-height:0;margin:0;padding:0 12px;border:0;
    border-radius:var(--rad);justify-content:center;font-size:.96rem;
    box-shadow:0 10px 26px -12px rgba(42,33,29,.55)}
  .kopf-akt .kopf-wa,.kopf-akt .kopf-wa:hover{left:var(--sp);background:var(--grund);color:var(--tinte);
    box-shadow:inset 0 0 0 1px var(--linie),0 10px 26px -12px rgba(42,33,29,.55)}
  .kopf-akt .kopf-wa::before{background:var(--wa)}
  .kopf-akt .kopf-vorbestellen{left:var(--sp);background:var(--grund);color:var(--tinte)}
  .kopf-akt:has(.kopf-wa) .kopf-vorbestellen{display:none}
  .kopf-akt .kopf-reserv{right:var(--sp)}
  /* Startseite: Speisekarte statt WhatsApp in der Leiste (Tim 02.10.2026: Reservieren, Speisekarte) */
  body:has(.held) .kopf-akt .kopf-wa{display:none}
  body:has(.held) .kopf-akt .kopf-karte{display:inline-flex;left:var(--sp);background:var(--grund);color:var(--tinte);
    box-shadow:inset 0 0 0 1px var(--linie),0 10px 26px -12px rgba(42,33,29,.55)}
  html.js .kopf-akt .knopf{translate:0 calc(100% + 30px)}
  html.on .kopf-akt .knopf{translate:0 0;transition:translate .45s var(--sanft)}
  html.on.knoepfe-da .kopf-akt .knopf{translate:0 calc(100% + 30px)}
  @supports (animation-timeline:view()){
    html{timeline-scope:--fusszeile}
    .fuss{view-timeline:--fusszeile}
    .kopf-akt .knopf{animation:leiste-raus linear both;animation-timeline:--fusszeile;animation-range:entry 0% entry 25%}
  }
  /* Die Reservierung steht in der Leiste — im ersten Schirm der Unterseiten nicht doppeln.
     Auf der Startseite ist sie der Hauptknopf; die Leiste kommt dort erst danach. */
  main > section:first-child:not(.held) [data-modal="m-reserv"]{display:none}

  /* ---------- Startseite: Held ----------
     Tim 02.10.2026: „oben schriftzug und dann darunter die bilder / das video",
     danach „nicht so elegant": Text, zwei Knoepfe in klarer Rangfolge, Status,
     darunter EIN Motiv — der Loop als Karte im Satzspiegel, ohne Stempel.
     Die Leiste steht im ersten Schirm nicht, also kein --bar-Abzug; die
     Restluft traegt die Karte (flex:1), nie eine Luecke. */
  .held{padding:0;min-height:calc(100svh - var(--kopfh))}
  .held>.wrap.held-in{width:100%;margin:0;flex-direction:column;flex-wrap:nowrap;gap:0;align-items:stretch}
  /* Tim 02.10.2026: kein Video auf dem Handy. Pizza Burrata fuellt den ganzen Startschirm,
     ein dunkler Verlauf traegt Schrift und Knoepfe darauf ("schrift auf das hintergrund bild legen
     und ein leichten schwarzen fade ... das man aber pizza trotzdem noch etwas sieht"). */
  .held-bild{position:absolute;inset:0;z-index:0;margin:0;min-height:0;max-height:none;border-radius:0;overflow:hidden}
  .held-bild::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to bottom,rgba(18,12,9,.84) 0%,rgba(18,12,9,.7) 36%,rgba(18,12,9,.28) 60%,rgba(18,12,9,.05) 74%,rgba(18,12,9,.4) 100%)}
  .held .hc-haupt,.held .hc-a,.held-signet{display:none} /* Logo steht schon in der Kopfleiste */
  .held .hc-b{position:absolute;inset:0;border-radius:0;background:none}
  .held .hc-b img{object-position:50% 70%}
  .hc-haupt .hc-chip{left:12px;right:auto;bottom:12px;font-size:.78rem;padding:6px 10px}
  .held-text{flex:0 0 auto;justify-content:flex-start;padding:clamp(20px,3.2svh,32px) var(--sp) clamp(18px,2.8svh,26px)}
  .held .kicker{margin-bottom:clamp(10px,1.6svh,16px)}
  .held-unter{margin-top:clamp(12px,1.8svh,18px);font-size:clamp(16px,min(4.4vw,2.25svh),19px);line-height:1.5}
  .held-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:clamp(18px,2.8svh,28px)}
  .held-knoepfe .knopf{min-height:50px;padding:12px 8px;justify-content:center;text-align:center}
  .held-knoepfe .knopf-rand{border-width:1.5px} /* zweitrangig, leiser als der gefuellte Hauptknopf */
  /* Tim 02.10.2026: Reservieren direkt im ersten Schirm, "aber nicht zu aufdringlich" — eine ruhige Reihe, keiner vollbreit */
  .held-knoepfe{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  /* Tim 02.10.2026: "die 3 punkte hinschreiben und bisschen groesser" — Kachelknoepfe mit Symbol */
  .held-knoepfe .knopf{flex-direction:column;justify-content:center;gap:6px;min-height:76px;padding:10px 6px;font-size:.95rem;font-weight:600}
  .held-knoepfe .kn-ico{display:block;width:24px;height:24px}
  .held-knoepfe .knopf-rand{background:rgba(255,249,242,.9)}
  /* Google-Note und Oeffnung als Leiste unten im Startbild (Tim 02.10.2026) */
  .held{position:relative}
  .held-text{position:static}
  .held-text > *:not(.held-fakten){position:relative;z-index:1}
  .held-fakten{position:absolute;left:var(--sp);right:var(--sp);bottom:clamp(14px,2.4svh,22px);z-index:2;margin:0;
    display:grid;gap:8px;padding:12px 14px;background:rgba(255,249,242,.94);border-radius:var(--rad);
    box-shadow:0 10px 28px -16px rgba(42,33,29,.6)}
  .held-google{font-size:1.05rem}
  .held .hc-chip{display:none} /* die Leiste steht an dieser Stelle */
  .held-fakten{border-top:0}
  .held-sterne{display:none} /* die Note steht gross im Abschnitt Stimmen, auf dem Handy nur einmal */
  .held .offen{font-size:clamp(16px,2.2svh,18.5px)}
  /* Schrift hell auf dem Verlauf, groesser */
  .held .kicker{color:#FFD7C9;font-size:.92rem;margin-bottom:clamp(12px,2svh,20px)}
  .held .h1{color:#fff;font-size:clamp(50px,min(15.2vw,7.8svh),72px)} /* Tim 03.10.: Schrift noch groesser, 15,2vw ist die Grenze fuer "Suess, salzig," einzeilig */
  .held .h1 em{color:#FF7657}
  .held-unter{color:rgba(255,255,255,.95);font-size:clamp(19px,min(5.7vw,2.8svh),23px);line-height:1.42;margin-top:clamp(14px,2.2svh,22px)}
  .held-knoepfe{margin-top:clamp(22px,3.4svh,34px)}
  .held-knoepfe .knopf{min-height:90px;font-size:1.12rem}
  /* halbtransparent, damit die Pizza durchscheint (Tim 03.10.2026), kein Milchglas (3.5) */
  .held-knoepfe .knopf-rot{background:rgba(194,42,18,.82);border-color:rgba(255,255,255,.35)}
  .held-knoepfe .kn-ico{width:27px;height:27px}
  .held-knoepfe .knopf-rand{background:rgba(18,12,9,.36);border:1.5px solid rgba(255,255,255,.75);color:#fff}

  /* ---------- Unterseiten: Kopf mit Fotostreifen ---------- */
  .seitenkopf{padding:0 0 clamp(18px,2.6svh,26px);min-height:calc(100svh - var(--kopfh) - var(--bar));display:flex}
  .seitenkopf>.wrap.seitenkopf-in{width:100%;margin:0;flex-direction:column;flex-wrap:nowrap;gap:0;align-items:stretch}
  .seitenkopf-bild{order:-1;flex:1 1 auto;min-height:var(--streifen);max-height:58svh;position:relative;overflow:hidden}
  .seitenkopf-bild .kopf-foto{position:absolute;inset:0}
  .kopf-foto img{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
  .seitenkopf-text{flex:0 0 auto;padding:clamp(18px,2.8svh,28px) var(--sp) 0}
  .seitenkopf-text > .knopf{margin-top:20px;width:100%;min-height:52px}
  .seitenkopf-knoepfe{margin-top:20px}
  .seitenkopf-knoepfe .knopf{flex:1 1 100%;min-height:52px}
  .seitenkopf-text .offen{margin-top:16px}
  .shop-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px}
  .shop-schritte li{flex-direction:column;align-items:flex-start;gap:6px;font-size:.84rem;line-height:1.3;padding-top:10px;border-top:2px solid var(--rot-tief)}
  .shop-schritte b{width:26px;height:26px;font-size:.82rem}

  /* ---------- Startseite: Wegweiser als Bento 2x3 ---------- */
  .sek-wegweiser{padding-block:16px 18px}
  .wegweiser{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .wegweiser li{display:flex;min-width:0}
  .ww{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;padding:12px 12px 14px;min-height:44px}
  .ww-foto{width:46px;height:46px}
  .ww b{font-size:1.2rem}
  .ww small{display:none} /* Preise stehen in den Abschnitten darunter */

  /* ---------- Startseite: drei Theken als Wischreihe ---------- */
  .drei-raster{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--sp));padding:0 var(--sp) 2px;scroll-padding-inline:var(--sp);scrollbar-width:none}
  .drei-raster::-webkit-scrollbar{display:none}
  .drei-kachel{flex:0 0 70%;scroll-snap-align:start;aspect-ratio:4/5}
  .drei-text{padding:16px}
  .drei-text b{font-size:32px}
  .drei-text small{display:none} /* Saison und Catering haben eigene Abschnitte */
  .sek-drei .kicker,.sek-besuch .kicker,.sek-saison .kicker,.sek-shop .kicker,.sek-pasta .kicker,.sek-anfragen .kicker{display:none} /* die H2 sagt es schon, spart je einen Textblock */
  .sek-drei .sek-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
  .sek-drei .sek-kopf::after{content:"wischen";flex:0 0 auto;padding-right:22px;margin-bottom:6px;font-size:.8rem;font-weight:600;
    color:var(--grau);background:linear-gradient(90deg,var(--rot-tief),var(--rot-tief)) right 2px center/14px 2px no-repeat;
    animation:stupser 2.4s ease-in-out infinite}

  /* ---------- Startseite: Saison, Kopf ueber Foto + Sortentafel ----------
     Tim 02.10.2026: Rundbild neben der H2 "verschoben, wirkt billig" — jetzt
     H2 und Satz ueber die volle Breite, darunter 4:5-Foto links, Sorten rechts */
  .saison-in{display:grid;grid-template-columns:min(44vw,190px) minmax(0,1fr);gap:0 16px;align-items:start}
  .saison-text{display:contents}
  .saison-text .h2{grid-column:1 / -1;grid-row:1}
  .saison-satz{grid-column:1 / -1;grid-row:2;margin-top:12px;font-size:.98rem}
  .saison-bild{grid-column:1;grid-row:3;margin-top:22px}
  .saison-tafel{grid-column:2;grid-row:3;align-self:center;margin-top:22px;flex-direction:column;align-items:stretch;gap:8px}
  .saison-tafel li{padding:12px 14px;min-height:48px;display:flex;align-items:center;text-wrap:balance} /* "und viele / weitere Sorten" ohne Waise */

  /* ---------- Startseite: Shop, Text mittig neben dem Korbfoto + Zahlenband ----------
     Tim 02.10.2026: Schrift "dicker / besser lesbar" und "mittig ... von dem bild" —
     Leerzeilen 1fr oben und unten zentrieren H2 und Gutscheinsatz am Foto */
  .shop-in{display:grid;grid-template-columns:min(34vw,150px) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr) auto auto auto;gap:0 18px;align-items:center}
  .shop-text{display:contents}
  .shop-bild{grid-column:1;grid-row:1 / 5}
  .shop-foto img{aspect-ratio:4/5}
  .shop-text .h2{grid-column:2;grid-row:2;align-self:end;font-size:clamp(22px,6.4vw,30px)} /* "Praesentkoerbe" muss in die Textspalte passen */
  .preis-leiste{grid-column:1 / -1;grid-row:5;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:22px}
  .preis-leiste li{padding:14px 8px}
  .preis-leiste b{font-size:clamp(24px,7.4vw,32px);white-space:nowrap}
  .shop-gutschein{grid-column:2;grid-row:3;align-self:start;margin:10px 0 0;font-size:1.02rem;line-height:1.45;font-weight:600}
  .shop-knoepfe{grid-column:1 / -1;grid-row:6;margin-top:18px;display:grid;grid-template-columns:1fr;gap:10px} /* zweispaltig brach "Praesentkoerbe ansehen" um */
  .shop-knoepfe .knopf{min-height:52px;padding:10px 16px}

  /* ---------- Startseite: Pastakurse, Bento + Fotostreifen unten ---------- */
  .sek-pasta{padding-top:0}
  .pasta-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch} /* stil.css zentriert: Stufen 120 gegen 139px */
  .pasta-kopf{grid-column:1 / -1;margin-bottom:12px}
  .pasta-satz{margin-top:12px;font-size:.98rem}
  .pasta-stufen{display:contents}
  .stufe{grid-template-columns:1fr;gap:6px;padding:16px 14px;align-content:start}
  .stufe-nr{grid-row:auto;font-size:.76rem}
  .stufe small{font-size:.86rem;line-height:1.35}
  .pasta-stufen .knopf{grid-column:1 / -1;margin-top:4px;width:100%;min-height:52px}
  .pasta-bild{grid-column:1 / -1;order:-1;margin:0 calc(-1 * var(--sp)) 26px}
  .pasta-foto img{aspect-ratio:auto;height:min(64vw,28svh);border-radius:0}

  /* ---------- Startseite: Anfragen, Fotostreifen + Linkzeilen ---------- */
  /* Karte ueberlappt das Foto */
  .anfragen-in{display:block}
  .anfragen-bild{flex:0 0 auto;width:100%;min-height:0;height:min(78vw,36svh)}
  .anfragen-text{flex:0 0 auto;position:relative;z-index:2;margin:-64px 14px 0;padding:24px 18px 10px;background:var(--grund);
    border-top:3px solid var(--rot-tief);border-radius:var(--rad)}
  .sek-anfragen{padding-bottom:var(--sek)}
  .anfragen-text > p:not(.kicker){margin-top:12px}
  .anfragen-wege{margin-top:20px}
  .weg-zeile{padding:14px 0;min-height:56px;font-size:23px}

  /* ---------- Startseite: Stimmen, Note als Kopf + Zitat-Wischreihe ---------- */
  .sek-stimmen{padding-block:40px}
  .stimmen-kopf{gap:0 16px;margin-bottom:12px}
  .note-marke{font-size:.95rem}
  .zitat p{font-size:.98rem;text-wrap:balance}
  .shop-gutschein{text-wrap:balance}

  /* ---------- Startseite: Karriereband ---------- */
  .karriere-band,.galerie-band{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:16px}
  .karriere-band p,.galerie-band p{flex:0 0 auto;font-size:1rem}
  .karriere-band b,.galerie-band b{display:block;font-size:26px;margin:0 0 4px}
  .karriere-band .knopf,.galerie-band .knopf{min-height:50px}

  /* ---------- Startseite: Besuch, Wochenraster + Fotostreifen ---------- */
  .sek-besuch{padding-bottom:0}
  .besuch-in{display:block}
  .besuch-adr{margin-top:8px}
  .sek-besuch .besuch-zeiten{display:none} /* Offen-Status steht im ersten Schirm, Zeiten im Menue und auf /kontakt/; sonst bleiwueste 4,7 */
  .besuch-knoepfe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}
  .besuch-knoepfe .knopf{padding:12px 14px;font-size:.95rem;min-height:52px}
  .besuch-bild{margin:var(--sek) calc(-1 * var(--sp)) 0}
  .besuch-foto img{aspect-ratio:auto;height:min(64vw,28svh);border-radius:0}

  /* ---------- Formulare ---------- */
  .felder{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .formular-wege{display:grid;grid-template-columns:1fr;gap:10px}
  .formular-wege .knopf{width:100%;min-height:52px;justify-content:center}
  .karte-form{padding:20px 16px}
  .wahl-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .wahl{padding:12px;gap:10px;min-height:56px}

  /* ---------- Shop ---------- */
  .sek-kopf-zeile{gap:10px}
  .sek-kopf-zeile > div,.sek-kopf-satz{flex:1 1 100%}
  .korb-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sek-koerbe,.sek-gutschein,.sek-kasse{padding-block:calc(var(--sek) + 14px)}
  .korb{padding:20px 14px 16px;gap:8px}
  .korb-preis b{font-size:clamp(44px,13vw,58px)}
  .korb-name{display:none} /* die Ueberschrift sagt Praesentkoerbe */
  .korb .menge{flex-direction:column;align-items:stretch;gap:6px;padding-top:10px}
  .korb .menge input{width:100%;font-size:18px}
  .lieferung{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
  .lieferung .wahl{flex:none}
  .lieferung .hinweis{grid-column:1 / -1}
  .gk-wert{font-size:52px}
  .gk-text{display:none}
  .gutschein-wahl{flex:0 0 auto}
  .werte{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:16px}
  .werte span{font-size:.95rem}
  .gutschein-zeile{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;margin:16px 0 12px}
  .gutschein-zeile .menge input{width:100%}
  .kasse-daten .felder{grid-template-columns:1fr}

  /* ---------- Kurse & Catering ---------- */
  .kurs-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kurs{padding:16px 14px}
  .kurs-stufe{font-size:.86rem;line-height:1.3}
  .kurs-preis{font-size:.9rem;margin-top:8px}
  .kurs-preis b{display:block;font-size:44px;margin:0 0 2px}
  .kurs-kurz{margin-top:12px;padding-top:12px;border-top:1px solid var(--linie);font-size:.92rem;line-height:1.45}
  .kurs-bild{grid-column:1 / -1}
  .kurs-foto,.kurs-foto img{height:auto}
  .kurs-foto img{min-height:0;height:min(56vw,28svh)}
  .anfrage-kopf{display:grid;grid-template-columns:minmax(0,1fr) min(30vw,140px);column-gap:16px;align-items:start}
  .anfrage-kopf .kicker,.anfrage-kopf .h2,.anfrage-kopf > p:not(.kicker){grid-column:1}
  .anfrage-kopf > p:not(.kicker){margin-top:12px}
  .anfrage-foto{grid-column:2;grid-row:1 / 4}
  .anfrage-foto img{width:100%;margin-top:0}
  .anfrage-in{gap:24px}

  /* ---------- Catering: Angebote als Paar, Buchung mit Schrittleiste ---------- */
  .sek-angebote .kicker,.sek-buchung .kicker{display:none} /* die H2 sagt es */
  .angebot-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .angebot-foto img{aspect-ratio:1}
  .angebot-text{padding:14px 12px 4px;gap:6px}
  .angebot-text h3{font-size:clamp(20px,5.6vw,24px)}
  .angebot-text p{font-size:.9rem;line-height:1.4}
  .angebot-text .weg-zeile{font-size:1rem;font-weight:600;gap:8px;min-height:52px;padding:10px 0;margin-top:auto}
  .angebot-text .weg-zeile svg{flex:0 0 auto;width:18px}
  .buchung-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px;border-top:0}
  .buchung-schritte li{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 0 0;border-bottom:0;border-top:2px solid var(--pistazie);
    font-size:.86rem;line-height:1.3}
  .buchung-schritte b{width:30px;height:30px}
  .buchung-in{gap:22px}
  .buchung-form .wahl-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .buchung-form .wahl:last-of-type{grid-column:1 / -1}
  .buchung-form .wahl small{display:none} /* Eiswagen, Pizza, Beides spricht fuer sich */
  .buchung-form .wahl{min-height:52px}
  .weg-wahl{gap:4px 18px}
  .weg-wahl legend{float:none;width:100%;margin:0}

  /* ---------- Gutscheine ---------- */
  .sek-gutschein .kicker,.sek-koerbe .kicker,.sek-kasse .kicker{display:none} /* die Wertwahl hat ihre Legende */
  .sek-gutschein .hinweis,.sek-gutschein-weg .hinweis{display:none} /* "einloesbar im Atelier" steht schon im Kopf */
  .gw-in{display:grid;grid-template-columns:min(30vw,128px) minmax(0,1fr);gap:16px;align-items:stretch}
  .gw-foto{min-width:0}
  .gw-foto img{height:100%;aspect-ratio:auto}
  .sek-gutschein-weg .lieferung{grid-template-columns:1fr;margin:0}

  /* ---------- Praesentkoerbe ---------- */
  .lieferung .hinweis-18{grid-column:1 / -1;padding:10px 12px;gap:12px}
  .hinweis-18 > span{min-width:0}
  .regal-kopf > p:not(.kicker){display:none} /* derselbe Satz steht ueber den Koerben */
  .regal-bilder{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .regal-foto:nth-child(2){margin-top:0}
  .regal-foto img{aspect-ratio:3/4}
  .regal-in{gap:22px}

  /* ---------- Pastakurse: Abend als Zeitleiste ---------- */
  .sek-kurse .kicker,.sek-anfrage .kicker{display:none} /* wiederholt den Seitenkopf */
  .sek-anfrage{padding-bottom:44px} /* letzter Abschnitt: kein leerer Boden ueber der Fusszeile */
  .abend{display:block}
  .abend li{flex-direction:row;align-items:center;gap:16px;padding:0 0 14px}
  .abend li::before{left:22px;right:auto;top:46px;bottom:0;width:2px;height:auto}
  .abend b{flex:0 0 auto}
  .abend span{font-size:21px}
  .abend small{display:none} /* Stufe 2 steht in den Kurskarten */
  .abend-foto img{aspect-ratio:auto;height:min(52vw,24svh);margin-top:12px}

  /* ---------- Galerie ---------- */
  .gal-filter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:16px}
  .filter{min-height:44px;padding:8px 10px}
  .gal-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;grid-auto-flow:dense}
  .gal-item:nth-child(7n+1){grid-row:auto} /* Hochkachel waere auf dem Handy ein halber Schirm Bild */
  .gal-mehr > summary{width:100%;min-height:52px}
  /* Erstes Foto quer ueber beide Spalten: 1 + 14 = sieben volle Reihen, kein einzelnes Foto in der Schlusszeile */
  :not(.gal-mehr) > .gal-raster > .gal-item:first-child{grid-column:1 / -1}
  :not(.gal-mehr) > .gal-raster > .gal-item:first-child .gal-foto img{aspect-ratio:2/1} /* 16:10 waere auf 667 ueber 30 % Schirmhoehe */

  /* ---------- Ueber mich ---------- */
  .weg-in{display:block}
  .weg-kopf{display:grid;grid-template-columns:minmax(0,1fr) min(34vw,150px);column-gap:16px;align-items:end;margin-bottom:28px}
  .weg-kopf .kicker,.weg-kopf .h2{grid-column:1}
  .weg-logo{grid-column:2;grid-row:1 / 3}
  .weg-logo img{width:100%;margin-top:0}
  .weg-punkt{padding-bottom:24px}
  .weg-punkt p:not(.weg-jahr){font-size:.95rem}
  .weg-punkt span.weg-kurz.m-only{display:block;margin-top:6px;color:var(--grau);font-size:.95rem;line-height:1.45}
  .haltung-bild{flex:0 0 auto;width:100%;min-height:0;height:min(58vw,30svh);order:-1}
  .haltung-text{padding:28px var(--sp) var(--sek)}
  .haltung-liste{margin-top:20px}
  .haltung-liste li{grid-template-columns:1fr;gap:2px;padding:12px 0}
  .schluss-in{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:20px}
  .schluss-knoepfe .knopf{flex:1 1 100%;min-height:52px}

  /* ---------- Karriere ---------- */
  .eckdaten-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .eckdatum{padding:14px 0 14px 14px;border-left:1px solid rgba(255,227,214,.4);border-top:0}
  .eckdatum:first-child{padding-left:0;border-left:0}
  .eckdatum-hervor{grid-column:1 / -1;grid-row:1;padding:0 0 14px;border-left:0;border-bottom:1px solid rgba(255,227,214,.4)}
  .eckdatum:nth-child(3){padding-left:14px}
  .eckdatum b{font-size:clamp(26px,7.6vw,32px)}
  .eckdatum-hervor b{font-size:clamp(34px,10vw,44px)}
  .eckdatum span{font-size:.92rem}
  .bewerbung-in{gap:26px}
  .punkt-kurz{margin-top:14px;color:var(--grau)}
  .bewerbung-foto{display:none}

  /* ---------- Kontakt ---------- */
  /* Bento: WhatsApp quer, darunter drei Symbolkacheln */
  .wege-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .weg-kachel{flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:16px 12px;min-height:112px}
  .weg-kachel:not(.weg-wa) small{display:none}
  .weg-wa{grid-column:1 / -1;order:1;flex-direction:row;align-items:center;gap:14px;min-height:76px} /* quer am Ende: traegt den Abschnitt */
  .weg-wa b{font-size:1.15rem}
  .zeiten-in{gap:var(--sek)}
  .zeiten-tafel div{grid-template-columns:minmax(0,92px) minmax(0,1fr);padding:17px 0}
  .anfahrt-adr{font-size:24px;margin:16px 0 10px}
  .zeiten-block .knopf{width:100%;min-height:52px}
  .anfahrt-foto img{aspect-ratio:auto;height:min(60vw,30svh);margin-top:24px}
  /* Anfahrt hell: sonst bilden Zeiten, Anfahrt und Fusszeile ein dunkles Band ueber zwei Schirme */
  .sek-zeiten{padding-bottom:0}
  .sek-zeiten .zeiten-in{gap:0}
  #zeiten{padding-bottom:var(--sek)}
  #anfahrt{margin-inline:calc(-1 * var(--sp));padding:var(--sek) var(--sp);background:var(--grund);color:var(--tinte)}
  #anfahrt .kicker-hell{color:var(--rot-tief)}
  #anfahrt .h2,#anfahrt .anfahrt-adr{color:var(--tinte)}
  #anfahrt .knopf-hell{background:transparent;border-color:var(--tinte);color:var(--tinte)}

  /* ---------- Fusszeile: kompakt, ohne Doppelungen ---------- */
  .fuss{padding:30px 0 calc(16px + var(--bar))}
  .fuss-in{display:grid;grid-template-columns:1fr;gap:14px}
  .fuss-marke{gap:14px}
  .fuss-logo img{width:52px}
  .fuss-nav{display:none} /* alle Seiten stehen im Menueblatt */
  .fuss-kontakt{gap:0}
  .fuss-unten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;margin-top:16px;padding-top:8px}
  .fuss-unten [data-modal]{text-align:left;font-size:.84rem;line-height:1.25}
  .credit{grid-column:1 / -1;margin:8px 0 0}

  /* ---------- Modale: Vollbild-Blaetter ----------
     Keine transform-Animation an der Karte, sonst haengt der fixierte
     Schliesser an der Karte statt am Fenster. */
  .modal{padding:0;align-items:stretch;background:var(--grund)}
  .modal-karte,.modal-karte.breit{width:100%;min-height:100%;margin:0;border-radius:0;
    padding:calc(18px + env(safe-area-inset-top, 0px)) var(--sp) calc(32px + env(safe-area-inset-bottom, 0px));
    animation:blatt-rein .28s ease both}
  .modal-zu{position:fixed;top:calc(8px + env(safe-area-inset-top, 0px));right:8px;z-index:5;
    background:var(--grund);border:1px solid var(--linie)}
  .modal-karte h2{margin:2px 56px 8px 0;font-size:34px}
  .modal-text{margin-bottom:18px}

  /* Bildvergroesserung: Pfeile unter das Foto in Daumenhoehe statt ueber die Bildkanten */
  .lightbox{padding:64px 12px calc(100px + env(safe-area-inset-bottom, 0px))}
  .lb-bild img{max-height:calc(100svh - 230px)}
  .lb-pfeil{top:auto;bottom:calc(24px + env(safe-area-inset-bottom, 0px));transform:none;width:60px;height:56px}
  .lb-vor{left:calc(50% - 70px)}
  .lb-nach{right:calc(50% - 70px)}
}

@keyframes blatt-rein{from{opacity:0}to{opacity:1}}
@keyframes leiste-raus{to{transform:translateY(calc(100% + 30px))}}
@keyframes stupser{0%,60%,100%{background-position:right 2px center}30%{background-position:right -4px center}}

/* Schmale Handys: Unterzeile der Marke und das Wort im Menueknopf
   duerfen weichen, die Tippflaeche bleibt. */
@media (max-width:379.98px){
  .werte{grid-template-columns:repeat(4,minmax(0,1fr))}
  .buchung-form .wahl-reihe{grid-template-columns:1fr} /* "Pizza-Catering" lief bei 320 aus der Wahlkachel */
  .weg-kachel{padding:16px 8px}                          /* "Instagram" passt in die Drittelkachel */
  .besuch-knoepfe{grid-template-columns:1fr}             /* "Anfahrt & Kontakt" bleibt einzeilig */
  .kurs-stufe{font-size:.76rem}                          /* "Stufe 1 · Grundkurs" einzeilig */
  .stufe small{font-size:.8rem}                          /* "p. P. · Grundkurs" einzeilig */
  .h2{font-size:clamp(26px,8.4vw,38px)}                  /* "Nicht schnell gemacht." passt bei 320 in die Maske */
  .shop-text .h2{font-size:clamp(21px,6.4vw,28px)}
  .marke-bild img{height:32px}
  .kurs{padding:16px 10px}
  .weg-zeile{font-size:20px}                             /* "Pizza-Catering buchen" einzeilig */
  .karriere-band b{font-size:23px}                       /* "Wir suchen Servicekraefte." einzeilig */
  .lieferung{grid-template-columns:1fr}                  /* "Falkenstrasse 34," lief bei 320 aus der Halbkachel */
}

/* Handy, niedrige Schirme (iPhone SE): Luft statt Inhalt kuerzen */
@media (max-width:599.98px) and (max-height:700px){
  :root{--streifen:clamp(150px,26svh,220px);--sek:46px}
  .gal-foto img{aspect-ratio:1}
  .gw-in{align-items:start}
  .gw-foto img{height:auto;max-height:29svh;aspect-ratio:3/4} /* sonst 31-33 % der Schirmhoehe ohne Text */
  .kurs-foto img{height:24svh}
  .saison-foto img{max-height:29svh} /* 4:5 neben der Sortentafel waren auf 667 31 % */
  textarea{min-height:48px}
  .formular-wege{gap:8px}
  .formular-wege .knopf{min-height:48px}
  .sek-anfrage{padding-bottom:36px}
}

/* ============================================================
   Tablet hoch und quer (600–1199.98)
   ============================================================ */
@media (min-width:600px) and (max-width:1199.98px){
  :root{--streifen:clamp(240px,34svh,460px)}
  .kopf-akt .knopf{min-height:44px}
  .marke{flex:0 1 auto;min-width:0}
  .kopf-akt:has(.kopf-wa) .kopf-vorbestellen{display:none}

  /* Held und Seitenkoepfe: Fotostreifen oben, Text darunter zweispaltig */
  .held{padding:0;min-height:calc(100svh - var(--kopfh))}
  .held>.wrap.held-in{width:100%;margin:0;flex-direction:column;flex-wrap:nowrap;gap:0;align-items:stretch}
  .held-bild{order:-1;flex:1 1 auto;min-height:var(--streifen);max-height:50svh}
  .held-foto{border-radius:0}
  .held-signet{left:auto;right:var(--sp);bottom:-52px;width:clamp(104px,13vw,132px);z-index:2}
  .held-text{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:clamp(24px,4vw,48px);
    align-items:end;width:min(var(--wrapw),100% - 2 * var(--sp));margin-inline:auto;padding-block:clamp(26px,3.6svh,44px) clamp(22px,3svh,36px)}
  .held .kicker{grid-column:1;max-width:calc(100% - 20px)}
  .held .h1{grid-column:1;font-size:clamp(46px,8.2vw,84px)}
  .held-unter{grid-column:2;grid-row:2;margin:0;max-width:none}
  .held-knoepfe{grid-column:1;margin-top:26px}
  .held-fakten{grid-column:2;margin-top:26px;align-self:center;padding-top:16px}

  .seitenkopf{padding:0 0 clamp(26px,3.4svh,40px);min-height:calc(100svh - var(--kopfh));display:flex}
  .seitenkopf>.wrap.seitenkopf-in{width:100%;margin:0;flex-direction:column;flex-wrap:nowrap;gap:0;align-items:stretch}
  .seitenkopf-bild{order:-1;flex:1 1 auto;min-height:var(--streifen);max-height:50svh;position:relative;overflow:hidden}
  .seitenkopf-bild .kopf-foto{position:absolute;inset:0}
  .kopf-foto img{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
  .seitenkopf-text{flex:0 0 auto;width:min(var(--wrapw),100% - 2 * var(--sp));margin-inline:auto;padding-top:clamp(26px,3.6svh,44px)}
  .seitenkopf-text .lead{max-width:60ch}

  /* Zweispalter, die stil.css bei Tabletbreite stapeln wuerde */
  .saison-in,.shop-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:center}
  .saison-bild,.shop-bild{min-width:0}
  .drei-raster{grid-template-columns:repeat(3,minmax(0,1fr))} /* sonst 2+1 mit leerer Zelle */
  .preis-leiste{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pasta-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:24px clamp(24px,4vw,48px);align-items:start}
  .pasta-kopf{grid-column:1}
  .pasta-stufen{grid-column:1}
  .pasta-bild{grid-column:2;grid-row:1 / 3}
  .anfragen-bild{flex:1 1 0;min-height:clamp(300px,44vw,480px)} /* nebeneinander: gestapelt stand die Textspalte halbbreit vor leerem Creme */
  .anfragen-text{flex:1 1 0}
  .besuch-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,48px)}
  .besuch-foto img{height:100%}
  .gutschein-karte{width:min(100%,520px)}
  .anfrage-in,.bewerbung-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(24px,4vw,48px)}
  .kurs-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kurs-bild{grid-column:1 / -1}
  .kurs-foto img{min-height:0;height:clamp(240px,32vw,380px)}
  .weg-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:clamp(24px,4vw,48px)}
  .haltung-bild{flex:1 1 100%;min-height:0;height:clamp(260px,36vw,420px);order:-1}
  .haltung-text{flex:1 1 100%}
  .haltung-liste{max-width:none} /* gestapelt: Liste ueber die volle Breite statt 560px vor leerem Grund */
  .gal-raster{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense}
  .gal-raster:not(.gal-mehr *) > .gal-item:nth-child(15){grid-column:3;grid-row:5 / span 2} /* sonst letzte Zeile mit Loch */
  .gal-mehr .gal-item:nth-child(7n+1){grid-row:auto}
  .gal-mehr .gal-item:nth-child(7n+1) .gal-foto,.gal-mehr .gal-item:nth-child(7n+1) .gal-foto img{height:auto}
  .gw-in{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1fr);align-items:center}
  .buchung-kopf{flex:1 1 100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);column-gap:clamp(24px,4vw,48px);align-items:start}
  .buchung-kopf > :not(.buchung-foto){grid-column:1}
  .buchung-foto{grid-column:2;grid-row:1 / 4}
  .buchung-foto img{width:100%;margin-top:0}
  .buchung-form{flex:1 1 100%}
  .fuss-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .fuss-marke{grid-column:1 / -1}

  /* Modale als Blatt mit fixem Schliesser ab Kartenhoehe */
  .modal-karte h2{margin-right:56px}
}

/* Tablet bis 1199: Abend als senkrechte Zeitleiste neben dem Foto —
   als Reihe passten bei 768 nur vier Schritte (der fuenfte allein in Zeile zwei),
   bei 1024 brachen alle fuenf Beschriftungen einzeln um */
@media (min-width:600px) and (max-width:1199.98px){
  .sek-abend .wrap{display:grid;grid-template-columns:fit-content(56%) minmax(0,1fr);column-gap:clamp(28px,5vw,48px);align-items:stretch}
  .sek-abend .sek-kopf{grid-column:1 / -1}
  .abend{display:block}
  .abend li{flex-direction:row;align-items:center;gap:18px;padding:0 0 18px}
  .abend li::before{left:22px;right:auto;top:46px;bottom:0;width:2px;height:auto}
  .abend li:last-child{padding-bottom:0}
  .abend b{flex:0 0 auto}
  .abend span{font-size:clamp(22px,3vw,26px)}
  .abend-foto,.abend-foto img{height:100%}
  .abend-foto img{aspect-ratio:auto;margin-top:0}
  .held-sterne{flex-wrap:wrap;row-gap:2px}
  .held-sterne span:last-child{white-space:nowrap} /* "64 Google-Bewertungen" bricht als Ganzes in die zweite Zeile */
}

@media (min-width:600px) and (max-width:1023.98px){
  .preis-leiste{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px} /* vier Preise passten neben dem Foto nicht nebeneinander */
  .preis-leiste li:nth-child(3){border-left:0;padding-left:0}
}

/* Tablet hoch, schmal (600-767): Kopf ohne Unterzeile, Werdegang und Besuch
   einspaltig wie am Handy, sonst steht neben der kurzen Spalte ein Loch */
@media (min-width:600px) and (max-width:767.98px){
  .marke-name small{display:none}
  .kopf-akt .kopf-wa{display:none} /* steht im Menueblatt; sonst quetscht die Marke auf zwei Zeilen */
  .fuss-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .anfrage-in,.bewerbung-in{grid-template-columns:1fr} /* Formular neben dem Kopf war 260px schmal, Knoepfe brachen um */
  .weg-in{display:block}
  .weg-kopf{display:grid;grid-template-columns:minmax(0,1fr) min(28vw,190px);column-gap:24px;align-items:end;margin-bottom:32px}
  .weg-kopf .kicker,.weg-kopf .h2{grid-column:1}
  .weg-logo{grid-column:2;grid-row:1 / 3}
  .weg-logo img{width:100%;margin-top:0}
  .besuch-in{display:block}
  .besuch-bild{margin-top:36px}
  .besuch-foto img{height:min(52vw,360px);aspect-ratio:auto}
}

/* Wegweiser 768-1199 als 3x2 wie am Desktop: als Flexzeile standen bei 1024 vier plus zwei,
   bei 1199 fuenf plus eine Kachel, und "Eiswagen & Pizza" brach mit einer Waise um */
@media (min-width:768px) and (max-width:1199.98px){
  .wegweiser{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .ww small{white-space:nowrap}
}

/* Touch-Tablets: Tippflaechen auch dort */
@media (min-width:600px) and (max-width:1199.98px) and (pointer:coarse){
  .fuss-unten [data-modal],.note-link,.fuss-kontakt a{min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  html.js .kopf-akt .knopf,html.on .kopf-akt .knopf{translate:none;transition:none}
  .sek-drei .sek-kopf::after{animation:none}
}

/* Unter der Wischreihe „Selbst gemacht“ stand gut 130 px leere Creme (Befund 02.10.) */
@media (max-width:599.98px){
  .sek-drei{padding-bottom:28px}
}

/* ============================================================
   Kaufablauf Gutschein und Praesentkorb (Tim 02.10.2026: „den Durchgang
   … schöner und übersichtlicher machen … Auf Handy ist das vor allem ein
   Ansichtsproblem“). Unter 1200 px: Anzahl per − und +, Koerbe als
   Auswahlzeilen, Weiter klebt am unteren Rand, solange der Schritt laeuft.
   ============================================================ */
@media (max-width:1199.98px){
  .kauf-wege > legend.sr{width:1px;margin:0}   /* .lieferung legend{width:100%} schlug .sr: 20 px Seitwaertsscrollen in Schritt 2 */
  /* Anzahl: Minus, Zahl, Plus als ein Bedienteil */
  html.js .kauf-form .menge{display:grid;grid-template-columns:minmax(0,1fr) 48px 54px 48px;align-items:center;gap:0;
    margin:0;padding:0;border:0}
  html.js .kauf-form .menge > span{grid-column:1;padding-right:12px}
  html.js .kauf-form .menge input{grid-column:3;grid-row:1;width:100%;min-height:48px;padding:0;border-radius:0;border-inline:0;
    text-align:center;font:600 1.15rem/1 var(--sans);-moz-appearance:textfield;appearance:textfield}
  html.js .kauf-form .menge input::-webkit-outer-spin-button,html.js .kauf-form .menge input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  html.js .kauf-form .kauf-stell{display:grid;place-items:center;grid-row:1;height:48px;padding:0;border:1.5px solid #CDBBA9;
    background:var(--creme);color:var(--tinte);font:600 1.5rem/1 var(--sans);cursor:pointer;touch-action:manipulation}
  html.js .kauf-form .kauf-stell[data-menge-schritt="-1"]{grid-column:2;border-radius:var(--rad) 0 0 var(--rad)}
  html.js .kauf-form .kauf-stell[data-menge-schritt="1"]{grid-column:4;border-radius:0 var(--rad) var(--rad) 0}
  html.js .kauf-form .kauf-stell:active{background:var(--creme-tief)}
  html.js .kauf-form .kauf-stell:focus-visible{outline:3px solid var(--rot-tief);outline-offset:1px}
  /* Praesentkoerbe als Auswahlzeilen statt 2x2-Kacheln mit winzigen Zahlenfeldern */
  .korb-raster.kauf-koerbe{grid-template-columns:1fr;gap:10px;margin-top:18px}
  .kauf-koerbe .korb,.kauf-koerbe .korb-gross{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;
    min-height:76px;padding:12px 12px 12px 18px;background:var(--weiss);border:1.5px solid var(--creme-tief);color:var(--tinte)}
  .kauf-koerbe .korb-gross .korb-preis{color:var(--grau)}
  .kauf-koerbe .korb-preis b,.kauf-koerbe .korb-gross .korb-preis b{font-size:clamp(34px,9.6vw,44px);color:var(--rot-tief)}
  .kauf-koerbe .korb-name{display:none}   /* jede Zeile hiesse "Praesentkorb", die Ueberschrift sagt es */
  html.js .kauf-koerbe .menge{grid-template-columns:0 48px 54px 48px}   /* Spalte 1 traegt das ausgeblendete "Anzahl" */
  html.js .kauf-koerbe .menge > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .kauf-koerbe .korb.gewaehlt{border-color:var(--rot-tief);box-shadow:inset 0 0 0 1px var(--rot-tief)}
  .kauf-koerbe .gewaehlt .kauf-stell[data-menge-schritt="1"]{background:var(--rot-tief);border-color:var(--rot-tief);color:var(--weiss)}
  /* Weiter klebt unten, solange der Schritt laenger als der Schirm ist; danach steht er unter dem Inhalt */
  .kauf-knoepfe{position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:10px;
    margin:24px calc(-1 * var(--sp)) 0;padding:12px var(--sp) calc(12px + env(safe-area-inset-bottom));
    background:var(--creme);box-shadow:0 -1px 0 var(--linie)}
  .kauf-knoepfe .knopf{min-width:0;width:100%;min-height:52px;justify-content:center;font-size:1.02rem}
  .kauf-knoepfe .knopf:only-child{grid-column:1 / -1}
  /* letzter Schritt: die Bestellknoepfe sind die Hauptsache, Zurueck nur noch ein Textknopf */
  .kauf-schritt:last-child .kauf-knoepfe{position:static;display:block;margin:14px 0 0;padding:0;background:none;box-shadow:none}
  .kauf-schritt:last-child .kauf-knoepfe .knopf{width:auto;min-height:44px;padding:0 2px;border:0;background:none;color:var(--tinte);
    font-weight:600;text-decoration:underline;text-underline-offset:4px}
}
@media (max-width:899.98px){
  /* Kopf: Mini-Karte bzw. Korbfoto links, Schrittleiste rechts; darunter ein Schritt, der den Schirm traegt */
  .sek-kauf{padding-block:14px 36px}   /* ohne Mindesthoehe: leere Creme unter einem kurzen Schritt meldete leerboden 253px */
  .kauf-in{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:0;align-items:center}
  .kauf-ablauf{display:contents}
  .kauf-ablauf::before{grid-column:1 / -1}
  .kauf-karte{grid-column:1;grid-row:1;flex:none;position:static}
  .kauf-karte-satz{display:none}
  .kauf-karte .gutschein-karte{display:flex;align-items:flex-end;width:96px;height:62px;padding:7px 10px;border-radius:8px;aspect-ratio:auto}
  .kauf-karte .gutschein-logo{position:absolute;left:8px;top:7px}
  .kauf-karte .gutschein-logo img{width:22px}
  .kauf-karte .gk-wert{position:relative;margin-left:auto;font-size:25px;line-height:1}
  .kauf-karte .gk-fuer,.kauf-karte .gk-text{display:none}
  .kauf-foto img{width:64px;height:64px;aspect-ratio:1;object-fit:cover;object-position:50% 60%;border-radius:10px}
  .kauf-schritte{grid-column:2;grid-row:1;margin:0;gap:5px}
  .kauf-schritte > [role=listitem]{flex:1 1 0;min-width:24px;gap:6px;padding-top:9px;border-top-width:4px;font-size:.9rem;font-weight:700}
  .kauf-schritte > [role=listitem].ist{flex:0 0 auto}
  .kauf-schritte > [role=listitem]:not(.ist) span{display:none}   /* nur der aktuelle Schritt traegt seinen Namen */
  .kauf-schritte b{width:26px;height:26px;font-size:.82rem}
  .kauf-schritte .fertig b{font-size:0}
  .kauf-schritte .fertig b::after{content:"\2713";font-size:.82rem}
  .kauf-schritt{grid-column:1 / -1;margin-top:24px}
  .kauf-titel{font-size:min(30px,calc((100vw - 2 * var(--sp)) / 12.9));line-height:1.12}   /* "Präsentkorb verschenken" = 12,6em in Young Serif: eine Zeile statt Einzelwort-Zeilen (umbruch.js) */
  .kauf-frage{margin-top:6px;font-size:1.02rem}
  /* Schritt 1 Gutschein: Betrag gross, darunter Anzahl und Empfaenger */
  .wert-eingabe{margin-top:18px}
  .wert-rahmen{max-width:none}
  .wert-knopf{flex-basis:60px}
  .wert-rahmen input{font-size:44px;padding-block:12px}
  .kauf-schritt .gutschein-zeile{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:14px;margin:18px 0 0}
  .kauf-schritt .gutschein-zeile > *{flex:0 0 auto}   /* .feld{flex:1 1 240px} waere in der Spalte 240 px HOEHE */
  .gutschein-zeile .feld{order:2}
  /* Schritt 2: Zustellwege als grosse Wahlkarten */
  .kauf-wege{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}
  .kauf-wege .wahl{padding:16px 18px;width:100%;min-height:68px}
  .kauf-wege .wahl small{display:block;margin-top:2px}
  /* Schritt 3: Name und Mail volle Breite, Telefon und Abholtag nebeneinander */
  .kauf-schritt .felder{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;margin-top:18px}
  .kauf-schritt .felder > .feld:nth-child(-n+2){grid-column:1 / -1}
  .kauf-schritt .felder:has(> [data-nur-abholung][hidden]) > .feld:nth-child(3){grid-column:1 / -1}
  /* Schritt 4: Posten, Summe, Angaben ruhig untereinander */
  .kauf-schritt .uebersicht{margin-top:16px}
  .kauf-schritt .uebersicht li{padding:12px 0}
  .kauf-schritt .summe{margin-top:14px}
  .kauf-angaben{margin:16px 0 18px;padding:14px 16px;gap:4px 14px}
  .kauf-schritt .formular-wege{display:grid;grid-template-columns:1fr;gap:10px}
  .kauf-schritt .formular-wege .knopf{width:100%;min-height:52px;justify-content:center}
}
@media (min-width:600px) and (max-width:899.98px){
  .sek-kauf .kauf-in{width:min(600px,100% - 2 * var(--sp))}   /* eine ruhige Ablaufspalte; zweispaltig liess die Karte 276x308 px Leere unter sich */
  .kauf-karte .gutschein-karte{width:120px;height:76px}
  .kauf-karte .gk-wert{font-size:30px}
  .kauf-foto img{width:76px;height:76px}
}
@media (max-width:599.98px){
  /* Im Kaufablauf keine schwebende Leiste ueber den Bestellknoepfen */
  body:has(form[data-schritte]) .kopf-akt .kopf-wa,
  body:has(form[data-schritte]) .kopf-akt .kopf-reserv{display:none}
}
@media (min-width:900px) and (max-width:1199.98px){
  /* Tablet quer: Karte bzw. Korbfoto links mitlaufend, Ablauf rechts (gestapelt stand das Foto 1100 px hoch vor dem ersten Schritt) */
  .sek-kauf{padding-block:clamp(24px,3vw,40px) var(--sek)}
  .kauf-in{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(28px,4vw,48px);align-items:start}
  .kauf-karte{position:sticky;top:calc(var(--kopfh) + 20px)}
  .kauf-karte .gutschein-karte{width:100%;aspect-ratio:1.6;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto auto;padding:18px 20px}
  .kauf-karte .gutschein-logo{grid-row:auto}   /* Karte in Kartenform statt Vorschauzeile: die Zeile liess 276x308 px leer unter sich (768) */
  .kauf-foto img{aspect-ratio:4/5;max-height:calc(100svh - var(--kopfh) - 140px)}
  .kauf-knoepfe{margin-inline:0;padding-inline:0}
  .kauf-schritte > [role=listitem]:not(.ist) span{display:none}   /* "Zustel…" und "Bestell…" waren bei 768 abgeschnitten */
  .kauf-schritte > [role=listitem].ist{flex:0 0 auto;padding-right:6px}
  .kauf-wege{display:grid;grid-template-columns:1fr}   /* .lieferung ist ab 600 ein Flexumbruch, drei Wege standen 2+1 */
}

/* ============================================================
   Startseite in Tims Reihenfolge (02.10.2026 abends): von 7,7 auf
   rund 6 Schirme. Speisekarte als Wischreihe zweier Kartenblaetter,
   Tisch ohne zweites Raumfoto, Fotos flacher. /speisekarte/: je
   Kategorie zwei Posten, der Rest im Aufklapper; Sprungleiste wischt.
   ============================================================ */
@media (max-width:599.98px){
  :root{--sek:clamp(52px,14vw,58px)}
  .pasta-foto img{height:min(46vw,21svh)}
  .pasta-bild{margin-bottom:22px}

  .sek-karte .karte-in{display:block}
  .sek-karte .karte-fotos{display:none}   /* das Kartenbild oeffnet "Als Bild" in der Lightbox */
  .sek-karte .karte-knoepfe{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px;margin-top:20px}
  .sek-karte .karte-knoepfe .knopf{min-height:52px;padding-inline:12px;justify-content:center;text-align:center}
  .sek-karte .karte-knoepfe .knopf[hidden]{display:none}
  .sek-karte .karte-blatt{display:flex;gap:12px;margin:24px calc(-1 * var(--sp)) 0;padding:0 var(--sp) 2px;
    background:none;border:0;border-radius:0;overflow-x:auto;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;scroll-padding-inline:var(--sp);scrollbar-width:none}
  .sek-karte .karte-blatt::-webkit-scrollbar{display:none}
  .sek-karte .karte-gruppe{flex:0 0 84%;scroll-snap-align:start;padding:20px 18px 8px;background:var(--weiss);
    border:1px solid var(--creme-tief);border-radius:var(--rad)}
  .sek-karte .karte-liste li:last-child{border-bottom:0}
  .sek-karte .karte-fein{display:none}    /* der Hinweis steht in der Handyfassung des Satzes */
  .sek-karte .karte-liste li:nth-child(n+3){display:none} /* Auszug: zwei je Blatt, die ganze Karte steht auf /speisekarte/ (bleiwueste 5,1) */
  .sek-essen .sek-kopf-satz > p{display:none} /* "Gelato und Pizzateig selbst gemacht" sagt schon der Startschirm */
  .sek-essen .h2{font-size:min(7.9vw,36px)} /* "Nicht schnell gemacht." einzeilig ab 360 */

  .sek-reserv{padding-bottom:var(--sek)}
  /* Gastraum oben im Abschnitt (Tim 02.10.2026: beim Runterscrollen ein, zwei schoene Bilder),
     unten stand es direkt vor dem Cateringfoto */
  /* Tim 07.10.2026: nach dem Vollbild-Startbild erst der Text, dann das Gastraumfoto ("wirkt selektierter") */
  .sek-reserv{padding-top:52px;padding-bottom:0}
  .sek-reserv .besuch-in{display:flex;flex-direction:column}
  .sek-reserv .besuch-bild{flex:none;margin:30px calc(-1 * var(--sp)) 0}
  .sek-reserv .besuch-text{flex:none} /* flex-basis 420/440px aus stil.css wirkte in der Spalte als Hoehe */
  .karte-motiv{margin:calc(-1 * var(--sek)) calc(-1 * var(--sp)) 28px}
  .karte-motiv img{display:block;width:100%;height:min(66vw,28svh);object-fit:cover} /* wie das Gastraumfoto, Grenze alleingrafik 30 % */

  .anfragen-bild{height:min(62vw,28svh)}

  .karte-liste small{font-weight:500;font-size:.9rem}
  .sek-reserv .besuch-knoepfe .knopf{justify-content:center}
  #dolci .karte-blatt{display:flex;align-items:flex-start;gap:12px;margin-inline:calc(-1 * var(--sp));padding:0 var(--sp) 2px;
    background:none;border:0;border-radius:0;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    scroll-padding-inline:var(--sp);scrollbar-width:none} /* Spezialitaeten | Becher als Wischreihe: sonst drei gleiche Skelette in Folge */
  #dolci .karte-blatt::-webkit-scrollbar{display:none}
  #dolci .karte-gruppe{flex:0 0 86%;scroll-snap-align:start;padding:20px 18px 12px;background:var(--weiss);
    border:1px solid var(--creme-tief);border-radius:var(--rad)}
  .sek-karteseite .karte-gruppe:not(#pizza):has(> .karte-mehr:not([open])) > .karte-liste > li:nth-child(n+3),
  .sek-karteseite #pizza:has(> .karte-mehr:not([open])) > .karte-liste > li:nth-child(n+4){display:none}
  .sek-karteseite .karte-mehr > summary{margin-top:12px;min-height:48px;width:100%;justify-content:center;padding-inline:10px}
  .sek-karte-bild .karte-zeile-bild img{width:100%;aspect-ratio:auto;height:min(46vw,26svh);object-fit:cover}
  .sprung{flex-wrap:nowrap;overflow-x:auto;margin:22px calc(-1 * var(--sp)) 0;padding:0 var(--sp) 2px;
    scroll-padding-inline:var(--sp);scrollbar-width:none}
  .sprung::-webkit-scrollbar{display:none}
  .sprung a{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
}

/* Google-Stimmen: drei Karten als Wischreihe mit Punkten (Tim 02.10.2026: "3 stück zum swipen") */
@media (max-width:1199.98px){
  .zitate{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin:0 calc(-1 * var(--sp));padding:0 var(--sp) 2px;scroll-padding-inline:var(--sp);scrollbar-width:none}
  .zitate::-webkit-scrollbar{display:none}
  .zitate .zitat{flex:0 0 min(80%,340px);scroll-snap-align:start;padding:18px 18px 16px}
  .wisch-punkte{display:flex;justify-content:center;gap:10px;margin-top:16px}
  .wisch-punkte i{width:8px;height:8px;border-radius:50%;background:rgba(42,33,29,.2);transition:background-color .2s}
  .wisch-punkte i.an{background:var(--rot-tief)}
}


/* Vier Theken: 2x2 im schmalen Tablet, 4 in Reihe ab 900 (3 Spalten liessen eine Zelle leer) */
@media (min-width:600px) and (max-width:899.98px){
  .drei-raster.vier-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px) and (max-width:1199.98px){
  .drei-raster.vier-raster{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Tablet: Foto neben dem Kartenblatt statt eigener Zeile (1024: 504x429 Loch neben dem Foto) */
@media (min-width:600px) and (max-width:1199.98px){
  .sek-karte-bild .karte-zeile{flex-wrap:nowrap;gap:clamp(20px,3vw,40px)}
  .sek-karte-bild .karte-zeile-bild{flex:0 0 34%;min-height:0}
}
@media (min-width:900px) and (max-width:1199.98px){
  .sek-essen .h2{font-size:min(3.8vw,44px)} /* "Nicht schnell gemacht." einzeilig neben dem Satz */
  #dolci .karte-blatt{grid-template-columns:repeat(2,minmax(0,1fr))} /* gestapelt war das Blatt 1100px hoch, das Foto daneben zog auf Faktor 1,19 */
}
/* Zutatenzeilen ohne Einzelwort-Zeile (umbruch.js 360-768) */
@media (max-width:1199.98px){
  .karte-liste small,.karte-liste li > span{text-wrap:balance}
}

/* ---------- Startseite: Themen klar trennen (Tim 03.10.2026) ----------
   "abschnitte fast alle gleich gross ... weil man themen schlechter auseinander halten soll
   ... auch unten z.b wir suchen servicekraefte geht bisschen unter". Rubrik ueber jedem Thema
   wieder sichtbar, kurze Abschnitte auf eine gemeinsame Mindesthoehe, Karriere als eigener
   Abschnitt mit Foto statt Fussnotenband. */
@media (max-width:599.98px){
  body:has(.held) main > section .kicker{display:flex}
  /* gleiche Abstaende statt gestreckter Mindesthoehe: die zentrierte Streckung liess 96 bis 160px
     leere Baender ueber und unter dem Inhalt (Tim 03.10.2026: "immernoch so ein kleiner freiraum der nervt") */
  .sek-stimmen,.start-koerbe,.start-gutschein,.sek-saison{padding-block:52px}
  .band-karriere{min-height:min(52svh,440px);display:flex;flex-direction:column;justify-content:center}
  /* Pastakurs: Szene am Tisch plus fertige Tortellini statt nur Teller mit Ei */
  .pasta-bild{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:4px}
  .pasta-bild .pasta-foto img{height:min(64vw,28svh)}
  .pasta-bild > .pasta-foto img{object-position:28% 40%}
  /* Foto als Hintergrund (nur Handy, laedt am Desktop nicht), roter Verlauf traegt die Schrift */
  .band-karriere{padding-block:56px;background:linear-gradient(to bottom,rgba(150,32,14,.76),rgba(112,22,8,.93)),
    var(--rot-tief) url(/assets/bilder/laden-innen-1400.webp) center 40% / cover no-repeat}
  .karriere-band{gap:20px}
  .band-karriere .kicker{color:#FFD7C9;font-size:.82rem}
  .karriere-band b{font-size:clamp(34px,10vw,42px);line-height:1.05;margin-bottom:10px} /* Handyfassung "Servicekraefte", einzeilig */
  body:has(.held) .sek-saison .kicker{display:none} /* schmale Textspalte, "Alle Sorten da" traegt das Thema */
  .karriere-band p{font-size:1.05rem}
}

/* ---------- Menueblatt (Tim 03.10.2026: "bisschen schoener ... uebersichtlicher groesser minimal") ----------
   Angebote als 2x2-Kacheln mit Preis, Seiten als grosse Zeilen ohne Ordnungszahlen, Rubriken rot. */
@media (max-width:1199.98px){
  #m-menue h2{font-size:2rem}
  .menue-akt .knopf{min-height:54px;font-size:1.02rem;justify-content:center}
  .menue-rubrik{font-size:.84rem;color:var(--rot-tief);margin:28px 0 12px}
  .menue-ziele{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border-top:0}
  .menue-ziele a{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;min-height:98px;
    padding:14px 14px 12px;border:1px solid var(--linie);border-radius:var(--rad);background:var(--weiss);font:400 1.32rem/1.1 var(--disp)}
  .menue-ziele a small{font:600 .88rem/1.2 var(--sans);color:var(--rot-tief);white-space:normal}
  .menue-ziele a::after{display:none}
  .menue-liste:not(.menue-ziele) a{grid-template-columns:minmax(0,1fr) 12px;min-height:58px;font-size:1.45rem}
  .menue-liste:not(.menue-ziele) a::after{grid-column:2}
  .menue-zeiten{display:flex;align-items:center;gap:10px;font-size:.98rem;margin-top:18px}
}

/* Tablet: Gutscheine Karte | Text, die drei Schritte als Zeile darunter (Loch 461x256 bei 1024) */
@media (min-width:600px) and (max-width:1199.98px){
  .gs-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:28px clamp(24px,4vw,48px);align-items:center}
  .gs-karte{width:100%}
  .gs-schritte{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}
  .gs-schritte li{align-items:flex-start}
}

/* Reservieren auf dem Handy: ein grosser Hauptknopf, Anfahrt darunter (Tim 03.10.2026: "cleaner") */
@media (max-width:599.98px){
  .sek-reserv .besuch-knoepfe{grid-template-columns:1fr;gap:10px}
  .sek-reserv .besuch-knoepfe .knopf-rot{min-height:58px;font-size:1.06rem}
  .essen-wege .knopf{min-height:50px}
}

/* ---------- Handy-Startbild fuellt die ganze Hoehe (Tim 06.10.2026) ----------
   "auf ca. 70% der hoehe ist nichts ... die pizza als hintergrund". Gemessen 204 bis 264px
   nur Pizza zwischen Knoepfen und Leiste. Jetzt: Botschaft oben gross ueber drei Zeilen,
   Knoepfe unten direkt ueber der Leiste, Pizza als Hintergrund hinter allem. */
@media (max-width:599.98px){
  .held{display:flex;flex-direction:column}
  .held > .wrap.held-in{flex:1 1 auto}
  .held-text{flex:1 1 auto;display:flex;flex-direction:column;
    padding-bottom:calc(var(--leiste-h, 92px) + clamp(14px,2.4svh,22px) + clamp(16px,2.6svh,26px))}
  .held .h1 .h1-bruch{display:block}               /* "Suess, / salzig, / italienisch." */
  .held .h1{font-size:clamp(52px,min(16vw,8.6svh),78px);line-height:.98}
  .held-unter{font-size:clamp(20px,min(6vw,3svh),24px)}
  .held-knoepfe{margin-top:auto;padding-top:clamp(18px,3svh,30px)}
  .held-bild::after{background:linear-gradient(to bottom,rgba(18,12,9,.8) 0%,rgba(18,12,9,.64) 40%,
    rgba(18,12,9,.32) 60%,rgba(18,12,9,.38) 72%,rgba(18,12,9,.62) 100%)}
}

/* Pizza Giro: Kopf, Regeln zum Wischen, Knoepfe darunter */
@media (max-width:1199.98px){
  .giro-in{grid-template-columns:minmax(0,1fr)}
  .giro-kopf{grid-row:auto}
  .giro-regeln{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin:0 calc(-1 * var(--sp));padding:0 var(--sp) 2px;scroll-padding-inline:var(--sp);scrollbar-width:none}
  .giro-regeln::-webkit-scrollbar{display:none}
  .giro-regel{flex:0 0 min(84%,330px);scroll-snap-align:start}
  .sek-giro .wisch-punkte i{background:rgba(255,255,255,.25)}
  .sek-giro .wisch-punkte i.an{background:var(--rot)}
}
@media (max-width:599.98px){
  .sek-giro{padding-block:52px}
  .giro-knoepfe.m-only.m-only{display:grid;grid-template-columns:1fr;gap:10px;margin-top:0} /* m-only setzt sonst block */
  .giro-knoepfe .knopf{min-height:54px;justify-content:center}
}

/* Über mich: Foto links schmal, Text rechts; Unterseite einspaltig */
@media (max-width:599.98px){
  .sek-inhaber{padding-block:52px}
  .inhaber-in{grid-template-columns:min(40vw,170px) minmax(0,1fr);gap:18px;align-items:center}
  .inhaber-text .h2{font-size:clamp(28px,8vw,36px)}
  .inhaber-satz{margin:10px 0 16px;font-size:1rem}
  .inhaber-text .knopf{min-height:48px}
  .ich-in{grid-template-columns:minmax(0,1fr)}
  .giro-preis b{font-size:44px}
}
@media (min-width:600px) and (max-width:1199.98px){
  .ich-in{grid-template-columns:minmax(0,1fr)}
  .ich-bild{display:none} /* einspaltig gibt es kein Loch neben dem Text */
}

/* Textdichte Handy (bleiwueste): Rubrik und Satz tragen nichts Neues, wo die H2 es sagt */
@media (max-width:599.98px){
  body:has(.held) .sek-inhaber .kicker,.sek-giro .giro-satz{display:none}
  .sek-ich .kicker,.ich-gruss{display:none}
  .ich-sorte-titel{display:none}
  .ich-sorte-name::before{content:"Meine Lieblingssorte";display:block;margin-bottom:4px;font:600 .82rem/1.2 var(--sans);color:var(--rot-tief)}
}
/* Tablet: Ueber mich einspaltig, Lesespalte statt Loch rechts daneben */
@media (min-width:600px) and (max-width:1199.98px){
  .sek-ich .wrap{max-width:680px}
}

/* Restluft im Startbild traegt das Mittwochsangebot (Tim 06.10.2026: "immernoch ein kleiner freiraum"),
   mittig zwischen Unterzeile und Knoepfen; auf kleinen Schirmen rueckt es einfach zusammen */
@media (max-width:599.98px){
  a.held-aktion.m-only.m-only{display:flex}
  .held-aktion{align-items:center;gap:12px;margin:auto 0;padding:12px 14px;border-radius:var(--rad);
    background:rgba(18,12,9,.55);border:1px solid rgba(255,255,255,.28);color:#fff;text-decoration:none}
  .held-aktion-tag{flex:0 0 auto;padding:5px 8px;border-radius:4px;background:var(--rot-tief);font:600 .78rem/1.1 var(--sans);color:#fff}
  .held-aktion-text{flex:1 1 auto;min-width:0;font:400 1.08rem/1.2 var(--disp)}
  .held-aktion svg{flex:0 0 auto;width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .held-aktion ~ .held-knoepfe{margin-top:0}
  .held-text:has(.held-aktion) .held-unter{margin-bottom:16px} /* Mindestabstand, wenn kaum Restluft bleibt */
  .held-aktion-text{white-space:nowrap}
}
/* Sehr kurze Schirme (iPhone SE 1. Gen.): kein Platz fuer den Hinweis, sonst rutschen die Knoepfe in die Leiste */
@media (max-width:599.98px) and (max-height:600px){
  a.held-aktion.m-only.m-only{display:none}
}
/* Sehr schmale Handys (320): Leiste bricht auf drei Zeilen, mehr Platz reservieren; Knopftext kleiner */
@media (max-width:359.98px){
  .held-text{--leiste-h:146px}
  .held-knoepfe .knopf{font-size:.9rem;padding-inline:4px}
}
/* Tim 06.10.2026: "minimal groesser text ... nicht zu viel text" — gleiche Woerter, groesser */
@media (min-width:360px) and (max-width:599.98px){
  .held .kicker{font-size:1rem}
  .held .h1{font-size:clamp(54px,min(16.3vw,8.8svh),80px)}
  .held-unter{font-size:clamp(21px,min(6.3vw,3.1svh),26px)}
  .held-aktion-text{font-size:1.2rem}
  .held-aktion-tag{font-size:.84rem}
  .held-knoepfe .knopf{font-size:1.16rem}
  .held .offen{font-size:clamp(16px,2.1svh,17.5px)}
  .held-text{--leiste-h:100px}
  .held-google-zahl{white-space:nowrap}
}
@media (min-width:390px) and (max-width:599.98px){
  .held-google{font-size:1.1rem}
}
@media (min-width:360px) and (max-width:374.98px){
  .held-text{--leiste-h:122px} /* Leiste bricht bei 360 zweizeilig um */
  .held-knoepfe .knopf{font-size:1.04rem;padding-inline:4px} /* "Reservieren" passt sonst 2px nicht */
}

/* Fruehstueck und Getraenke (Tim 09.10.2026): auf dem Handy Wischreihen wie die Dolci,
   sonst vier gleiche Kartenblatt-Skelette in Folge (matrix handyskelett) */
@media (max-width:599.98px){
  #fruehstueck .karte-blatt,#getraenke .karte-blatt{display:flex;align-items:flex-start;gap:12px;margin-inline:calc(-1 * var(--sp));padding:0 var(--sp) 2px;
    background:none;border:0;border-radius:0;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    scroll-padding-inline:var(--sp);scrollbar-width:none}
  #fruehstueck .karte-blatt::-webkit-scrollbar,#getraenke .karte-blatt::-webkit-scrollbar{display:none}
  #fruehstueck .karte-gruppe,#getraenke .karte-gruppe{flex:0 0 86%;scroll-snap-align:start;padding:20px 18px 12px;background:var(--weiss);
    border:1px solid var(--creme-tief);border-radius:var(--rad);margin-top:0}
  #fruehstueck .karte-legende{margin-top:16px;font-size:.84rem}
}
/* Tablet: zwei Spalten */
@media (min-width:600px) and (max-width:1199.98px){
  #fruehstueck .karte-blatt-breit,#getraenke .karte-blatt-breit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px}
  #fruehstueck .karte-blatt-breit .karte-gruppe + .karte-gruppe,#getraenke .karte-blatt-breit .karte-gruppe + .karte-gruppe{margin-top:0}
  #fruehstueck .karte-blatt-breit .karte-liste,#getraenke .karte-blatt-breit .karte-liste{columns:1}
}
@media (max-width:599.98px){
  #fruehstueck .karte-titel,#getraenke .karte-titel{font-size:20px}
  #fruehstueck .karte-legende{margin-top:16px}
  #fruehstueck .karte-legende .karte-fein{font-size:.84rem}
}
@media (max-width:599.98px){
  /* Wischkarten Fruehstueck/Getraenke: je Karte ein Posten sichtbar, Rest hinter "Alle anzeigen" (bleiwueste 5,4) */
  #fruehstueck .karte-gruppe:has(> .karte-mehr:not([open])) > .karte-liste > li:nth-child(n+2),
  #getraenke .karte-gruppe:has(> .karte-mehr:not([open])) > .karte-liste > li:nth-child(n+2){display:none}
}
@media (max-width:599.98px){
  #fruehstueck .sek-kopf .kicker,#getraenke .sek-kopf .kicker{display:none}
}
/* Getraenke auf dem Handy: Kategorie-Kacheln im Raster statt Wischreihe (handyskelett: sonst drei
   gleiche Abschnitte Foto plus Wischreihe); aufgeklappt nimmt eine Kachel die ganze Breite */
@media (max-width:599.98px){
  #getraenke .karte-blatt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-inline:0;padding:0;overflow:visible;scroll-snap-type:none}
  #getraenke .karte-gruppe{flex:none;padding:16px 14px 12px}
  #getraenke .karte-gruppe:has(> .karte-mehr:not([open])) > .karte-liste > li{display:none}
  #getraenke .karte-gruppe:has(> .karte-mehr[open]){grid-column:1 / -1}
  #getraenke .karte-gruppe:not(:has(> .karte-mehr)){grid-column:1 / -1}
  #getraenke .karte-titel{font-size:18px}
  #getraenke .karte-mehr > summary{margin-top:10px;min-height:44px;font-size:.84rem;padding-inline:6px}
}
/* Getraenke Handy, Feinschliff: Kategorie-Zeilen (Titel links, Aufklapper rechts) statt halber Kacheln,
   in 127px brachen die Titel um */
@media (max-width:599.98px){
  #getraenke .karte-blatt{grid-template-columns:minmax(0,1fr);gap:8px}
  #getraenke .karte-gruppe{grid-column:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:12px 14px}
  #getraenke .karte-gruppe > .karte-titel{margin:0}
  #getraenke .karte-gruppe > .karte-liste{grid-column:1 / -1}
  #getraenke .karte-mehr > summary{margin-top:0;min-height:44px;width:auto}
  #getraenke .karte-mehr[open]{grid-column:1 / -1}
  #getraenke .karte-gruppe:has(> .karte-mehr[open]){grid-column:auto}
}
@media (max-width:599.98px){
  /* Kategorie-Zeilen einspaltig: Titel, darunter der Aufklapper (eigenes Skelett, handyskelett) */
  #getraenke .karte-gruppe{grid-template-columns:minmax(0,1fr);row-gap:8px}
  #getraenke .karte-mehr > summary{width:100%}
}