/* Genuss Atelier Voehringen — stil.css (Besitzer kleim-bau)
   Grundlayout, Bausteine, Farben, Typografie. KEINE Breitenabfragen:
   Handy/Tablet in handy.css (kleim-mobile), ab 1200px in desktop.css
   (kleim-desktop). Jede Grundregel bricht von allein um (flex-wrap,
   auto-fit, clamp) und ist damit zugleich die Fassung fuer schmale Schirme.

   Palette (Quellen mit Ort in inhalt/auftrag.json -> markenfarben):
   --rot     #F83E1E  Original-Logo IMG_0243.PNG, Schriftzug "Genuss"
   --creme   #FEEEDE  gedruckte Logokarte 31ad52ad...JPG, Kartengrund
   --grund   #FFF9F2  Creme stark aufgehellt
   --rot-tief #C22A12 Markenrot abgedunkelt: Knoepfe, Links, rotes Band
   --flasche #1E2B24  frei gewaehlt (Olivenoelflasche), Abgrenzung gegen
                      die Rot/Orange-Nachbarn Effenberger und Kanold
   --pistazie #B9C77E nur auf --flasche
   Kontrast: Tinte auf Grund 15:1 · Rot-tief auf Grund 5,5:1, auf Creme 5,1:1 ·
   Weiss auf Rot-tief 5,8:1 · Pistazie auf Flasche 8,1:1 · Hell-Text auf
   Flasche 12:1 · Grau auf Creme 6,7:1 · Rot #F83E1E nur Grafik oder
   Schrift ab 28px (3,5:1 auf Grund).

   Bildboxen folgen der Datei (Falle "Bildbox folgt dem Dateiverhaeltnis"):
   fast alle Fotos 4:5 (700/1400 breit), held-vitrine 3:2, Galerie 4:5,
   1:1 und 5:4 gemischt -> Galerie per object-fit in 4:5-Kacheln. */

/* Young Serif (OFL): kraeftige, warme Display-Serife ohne Haarstriche (Tim 02.10.2026: Gloock
   "manche Buchstaben sind ziemlich duenn"). Ein Schnitt; die Gewichtsspanne 400-900 im
   Deskriptor verhindert falsches Fettrechnen, wenn eine Regel 600/700 verlangt. */
@font-face{font-family:'Young Serif';src:url(/assets/fonts/youngserif-400.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'Golos Text';src:url(/assets/fonts/golos-var.woff2) format('woff2');font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --grund:#FFF9F2;       /* Seitengrund */
  --weiss:#FFFFFF;
  --creme:#FEEEDE;       /* getoente Sektionsflaeche, Logokarte */
  --creme-tief:#F4D9BE;  /* Linien auf Creme */
  --linie:#EADCCD;       /* Linien auf Grund */
  --rot:#F83E1E;         /* Markenrot: Grafik, grosse Schrift */
  --rot-tief:#C22A12;    /* Knoepfe, Links, rotes Band */
  --rot-dunkel:#9E200C;  /* Knopf beim Ueberfahren */
  --rosa:#FFE3D6;        /* Kicker und Nebentext auf Rot-tief (4,8:1) */
  --flasche:#1E2B24;     /* dunkles Band, Fusszeile */
  --flasche-2:#2E3D34;   /* Linien und Karten auf Flasche */
  --pistazie:#B9C77E;    /* nur auf Flasche */
  --tinte:#2A211D;       /* Schrift */
  --grau:#5E514A;        /* Nebentext */
  --hell-text:#F3EADF;   /* Fliesstext auf Flasche */
  --wa:#1F7A4C;          /* WhatsApp-Knopf, weisse Schrift 5,4:1 */

  --disp:'Young Serif',Georgia,'Times New Roman',serif;
  --sans:'Golos Text','Segoe UI',Arial,sans-serif;
  --wrapw:1180px;
  --sp:clamp(18px,5vw,56px);
  --sek:clamp(64px,8.5vw,120px);
  --kopfh:72px;          /* gebaut: height 72 inkl. border-bottom (box-sizing) */
  --rad:6px;
  --feder:cubic-bezier(.34,1.42,.64,1);  /* Eisdiele federt: leichter Ueberschwinger */
  --sanft:cubic-bezier(.22,.68,.34,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopfh) + 12px);touch-action:manipulation}
/* Tim 02.10.: zwei schnelle Tipps auf +/− zoomten auf dem iPhone hinein. manipulation schaltet den
   Doppeltipp-Zoom ab, Zoomen mit zwei Fingern bleibt (Barrierefreiheit). Felder ab 16px, sonst zoomt iOS beim Antippen. */
input,select,textarea{font-size:max(16px,1em)}
body{margin:0;background:var(--grund);color:var(--tinte);font:450 17px/1.62 var(--sans);overflow-x:clip}
body.starr{overflow:hidden}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote,fieldset{margin:0}
fieldset{border:0;padding:0;min-width:0}
legend{padding:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration-color:var(--rot-tief);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--rot-tief);outline-offset:3px}
em{font-style:normal;color:var(--rot)}
[hidden]{display:none!important}
.m-only.m-only{display:none}

.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.sr:focus{position:fixed!important;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:100000;
  background:var(--weiss);padding:10px 14px;border-radius:var(--rad)}

.wrap{width:min(var(--wrapw),100% - 2*var(--sp));margin-inline:auto}
section{padding-block:var(--sek)}

/* ---------------- Typografie ---------------- */
.h1{font:400 clamp(44px,6.6vw,92px)/1.04 var(--disp);letter-spacing:-.015em;color:var(--tinte)}
.h2{font:400 clamp(32px,4.2vw,58px)/1.08 var(--disp);letter-spacing:-.01em}
h3{font:600 1.12rem/1.3 var(--sans)}
.kicker{display:flex;align-items:center;gap:10px;width:fit-content;font:600 .82rem/1.25 var(--sans);
  letter-spacing:.08em;text-transform:uppercase;color:var(--rot-tief);margin-bottom:16px}
.kicker::before{content:"";width:22px;height:2px;background:currentColor;flex:0 0 auto}
.kicker-hell{color:var(--pistazie)}
.flaeche-rot .kicker-hell{color:var(--rosa)}
.lead{font-size:1.12rem;line-height:1.6;color:var(--grau);max-width:52ch;margin-top:20px}
.hinweis{font-size:.92rem;color:var(--grau);line-height:1.55}

/* ---------------- Knoepfe: 6px, kein Glanz ---------------- */
.knopf{display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;min-height:48px;
  padding:12px 22px;border-radius:var(--rad);font:600 1rem/1.2 var(--sans);text-decoration:none;
  border:2px solid transparent;transition:background-color .2s,color .2s,border-color .2s;text-align:left}
.knopf-rot{background:var(--rot-tief);color:var(--weiss)}
.knopf-rot:hover{background:var(--rot-dunkel)}
.knopf-rand{border-color:var(--tinte);color:var(--tinte);background:transparent}
.knopf-rand:hover{background:var(--tinte);color:var(--grund)}
.knopf-hell{background:var(--grund);color:var(--tinte)}
.knopf-hell:hover{background:var(--creme)}
.knopf-hell-rand{border-color:var(--hell-text);color:var(--hell-text);background:transparent}
.knopf-hell-rand:hover{background:var(--hell-text);color:var(--flasche)}
.knopf-wa{background:var(--wa);color:var(--weiss)}
.knopf-wa::before{content:"";width:18px;height:18px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2s-1 .3-3.4-.7a11.7 11.7 0 0 1-4.6-4.1c-.4-.5-1-1.6-1-2.9 0-1.4.7-2 1-2.3.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.9 2.1c0 .2.1.4 0 .6l-.4.6-.4.4c-.1.2-.3.3-.1.6.2.3.7 1.2 1.6 2a7 7 0 0 0 2.3 1.4c.3.1.5.1.6-.1l.9-1c.2-.3.4-.2.6-.1l2 .9c.3.2.5.2.5.4.1.1.1.6-.1 1.2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2s-1 .3-3.4-.7a11.7 11.7 0 0 1-4.6-4.1c-.4-.5-1-1.6-1-2.9 0-1.4.7-2 1-2.3.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.9 2.1c0 .2.1.4 0 .6l-.4.6-.4.4c-.1.2-.3.3-.1.6.2.3.7 1.2 1.6 2a7 7 0 0 0 2.3 1.4c.3.1.5.1.6-.1l.9-1c.2-.3.4-.2.6-.1l2 .9c.3.2.5.2.5.4.1.1.1.6-.1 1.2z'/%3E%3C/svg%3E") center/contain no-repeat}
.knopf-wa:hover{background:#17603B}

/* ---------------- Kopfleiste ---------------- */
.kopf{position:sticky;top:0;z-index:50;background:var(--grund);border-bottom:1px solid var(--linie)}
.kopf-in{display:flex;align-items:center;gap:clamp(14px,2vw,32px);height:var(--kopfh)}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.marke-bild img{height:48px;width:auto}
.marke-name{display:flex;flex-direction:column;line-height:1.1}
.marke-name b{font:400 1.32rem/1 var(--disp);color:var(--tinte)}
.marke-name small{font-size:.74rem;color:var(--grau);margin-top:4px;letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);flex:1 1 auto;justify-content:center;min-width:0}
.nav a{font-weight:600;font-size:.94rem;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{border-bottom-color:var(--rot)}
.nav a.hier{border-bottom-color:var(--rot-tief);color:var(--rot-tief)}
.kopf-akt{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.kopf-akt .knopf{min-height:42px;padding:9px 16px;font-size:.94rem}
.kopf-wa,.kopf-karte{display:none}   /* nur Handy-Bodenleiste, handy.css schaltet ein (kleim-mobile) */
.kopf-menue{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 12px;font-weight:600;
  border:1px solid var(--linie);border-radius:var(--rad)}
.menue-striche{display:flex;flex-direction:column;gap:5px;width:18px}
.menue-striche i{display:block;height:2px;background:currentColor}
.menue-striche i:last-child{width:12px}

/* ---------------- Held ---------------- */
.held{padding-block:clamp(20px,3vw,44px);min-height:calc(100svh - var(--kopfh));display:flex}
.held-in{display:flex;flex-wrap:wrap;align-items:stretch;gap:clamp(28px,4vw,64px);width:min(var(--wrapw),100% - 2*var(--sp))}
.held-text{flex:1 1 380px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.held-unter{font-size:1.14rem;line-height:1.6;color:var(--grau);max-width:44ch;margin-top:22px}
.held-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.held-fakten{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:34px;padding-top:22px;border-top:1px solid var(--linie)}
.held-sterne{display:flex;align-items:baseline;gap:8px;font-size:.95rem;color:var(--grau)}
.held-sterne b{font:400 1.6rem/1 var(--disp);color:var(--tinte)}
.sterne{color:var(--rot-tief);letter-spacing:.08em}
/* Collage: Hauptkachel hochkant (Loop ab 1200px), zwei Nebenkacheln; die Bildflaeche
   laeuft bis an den rechten Fensterrand. Prozentmargen an einem Flex-Kind rechnen
   gegen den Flex-Container (.held-in), also ist (100% - 100vw)/2 genau der Rand. */
.held-bild{flex:1.75 1 520px;position:relative;min-width:0;min-height:clamp(380px,64vh,820px);
  margin-right:calc((100% - 100vw) / 2);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:clamp(8px,.9vw,14px)}
.hc{position:relative;overflow:hidden;border-radius:var(--rad);background:var(--creme);min-height:0}
.hc-haupt{grid-row:1 / 3}
.hc-a{border-radius:var(--rad) 0 0 var(--rad)}
.hc-b{border-radius:var(--rad) 0 0 var(--rad)}
.hc picture,.hc img,.hc-video{position:absolute;inset:0;width:100%;height:100%}
.hc img,.hc-video{object-fit:cover}
.hc-video{opacity:0;transition:opacity .8s ease}
.hc-haupt.spielt .hc-video{opacity:1}
.hc-chip{position:absolute;left:12px;bottom:12px;z-index:2;max-width:calc(100% - 24px);padding:7px 12px;border-radius:4px;
  background:var(--grund);color:var(--tinte);font:600 .84rem/1.25 var(--sans)}
.hc-haupt .hc-chip{left:auto;right:12px}
.held-signet{position:absolute;z-index:3;left:clamp(-34px,-2.4vw,-14px);bottom:clamp(-30px,-2.4vw,-14px);width:clamp(96px,10vw,138px);
  aspect-ratio:1;border-radius:50%;background:var(--grund);padding:10px;box-shadow:0 0 0 1px var(--linie)}
.held-signet img{width:100%;height:auto}

/* Offen-Zeile: Kugel setzt sich auf die Tuete, wenn geoeffnet */
.offen{display:flex;align-items:center;gap:10px;font-size:.95rem;color:var(--grau)}
.offen b{color:var(--tinte);font-weight:600}
.offen-zeichen{width:24px;height:24px;flex:0 0 auto;overflow:visible}
.offen-zeichen .tuete{fill:none;stroke:var(--tinte);stroke-width:1.6;stroke-linejoin:round}
.offen-zeichen .kugel{fill:var(--creme-tief);stroke:var(--tinte);stroke-width:1.4;transform-box:fill-box;transform-origin:50% 100%}
.offen.ist-auf .kugel{fill:var(--rot)}
/* Uhr statt Eistuete an der Oeffnungszeile der Startseite (Tim 02.10.2026) */
.offen-uhr circle{fill:none;stroke:var(--tinte);stroke-width:1.6}
.offen-uhr path{fill:none;stroke:var(--rot-tief);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kn-ico{display:none;width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html.on .offen.ist-auf .kugel{animation:kugel-setzt .9s var(--feder) .9s both}
@keyframes kugel-setzt{from{transform:translateY(-7px) scale(.7);opacity:0}to{transform:none;opacity:1}}

/* ---------------- Flaechen ---------------- */
.flaeche-creme{background:var(--creme)}
.flaeche-creme .knopf-rand:hover{color:var(--creme)}
.flaeche-flasche,.band-flasche{background:var(--flasche);color:var(--hell-text)}
.flaeche-flasche .h2,.band-flasche b{color:var(--weiss)}
.flaeche-flasche a:not(.knopf),.band-flasche a:not(.knopf){color:var(--weiss);text-decoration-color:var(--pistazie)}
.flaeche-rot{background:var(--rot-tief);color:var(--weiss)}
.flaeche-rot .h2{color:var(--weiss)}
.flaeche-rot em,.flaeche-flasche em{color:inherit}
.sek-kopf{margin-bottom:clamp(30px,4vw,52px)}
.sek-kopf-zeile{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px}
.sek-kopf-zeile > div{flex:1 1 360px}
.sek-kopf-satz{flex:1 1 340px;max-width:52ch;color:var(--grau)}

/* ---------------- Start: Wegweiser (dunkles Band, sechs Wege) ---------------- */
.sek-wegweiser{padding-block:clamp(22px,2.6vw,36px)}
.wegweiser{display:flex;flex-wrap:wrap;gap:10px}
.wegweiser li{flex:1 1 190px;min-width:0;display:flex}
.ww{display:flex;align-items:center;gap:14px;width:100%;padding:10px 14px 10px 10px;border-radius:var(--rad);text-decoration:none;
  color:var(--weiss);background:var(--flasche-2);border:1px solid transparent;text-align:left;transition:border-color .2s,background-color .2s}
.ww:hover{border-color:var(--pistazie);background:#34463B}
.ww-foto{flex:0 0 auto;width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--rot-tief)}
.ww-foto img{width:100%;height:100%;object-fit:cover}
.ww-logo img{object-fit:contain;padding:9px}
.ww span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ww b{font:400 1.32rem/1.1 var(--disp)}
.ww small{color:var(--pistazie);font-size:.86rem;margin-top:3px}

/* ---------------- Start: drei Theken (Mosaik) ---------------- */
.drei-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(12px,1.6vw,22px)}
.drei-kachel{position:relative;display:block;border-radius:var(--rad);overflow:hidden;text-decoration:none;color:var(--weiss);
  aspect-ratio:4/5;background:var(--flasche)}
.drei-foto,.drei-foto img{position:absolute;inset:0;width:100%;height:100%}
.drei-foto img{object-fit:cover;transition:transform .9s var(--sanft)}
.drei-kachel:hover .drei-foto img{transform:scale(1.04)}
.drei-kachel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,10,0) 45%,rgba(20,14,10,.78) 100%)}
.drei-text{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:6px}
.drei-text b{font:400 clamp(30px,3vw,42px)/1 var(--disp)}
.drei-marke{align-self:flex-start;padding:4px 10px;border-radius:4px;background:var(--grund);color:var(--rot-tief);
  font:600 .76rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.drei-marke-it{color:var(--flasche)}
.drei-text small{font-size:.96rem;line-height:1.45;max-width:30ch;color:#FFF2E6}

/* ---------------- Start: Saisonband ---------------- */
.saison-in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,80px)}
.saison-bild{flex:0 1 420px;min-width:0}
.saison-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rad)} /* Tim 02.10.: kein Kreis, wirkt billig */
/* Bild wechselt mit der Saison (Tim 01.10.): Sommer volle Theke, Winter Schokolade */
.saison-foto{display:block}
.saison-sommer img{object-position:30% 70%}
.saison-winter,[data-saison=winter] .saison-sommer{display:none}
[data-saison=winter] .saison-winter{display:block}
.saison-text{flex:1 1 380px;min-width:0}
.saison-satz{margin-top:18px;max-width:46ch;color:var(--hell-text)}
.saison-tafel{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.saison-tafel li{padding:10px 18px;border-radius:var(--rad);font-weight:600;border:1px solid var(--flasche-2)}
.sorte-vanille{background:#F6E7C1;color:var(--tinte)}
.sorte-schoko{background:#5A3626;color:var(--weiss)}
.sorte-mehr{color:var(--pistazie)}
[data-saison=winter] .saison-tafel li{transform-origin:50% 0}
html.on [data-saison=winter] .saison-tafel.in li{animation:schild-schwingt 1.1s var(--feder) both}
html.on [data-saison=winter] .saison-tafel.in li+li{animation-delay:.12s}
@keyframes schild-schwingt{from{transform:rotate(-6deg)}to{transform:none}}

/* ---------------- Start: Shop ---------------- */
.shop-in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,80px)}
.shop-bild{flex:0 1 400px;min-width:0}
.shop-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rad)}
.shop-text{flex:1 1 400px;min-width:0}
.preis-leiste{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,110px),1fr));gap:0;margin-top:30px;
  border-block:1px solid var(--linie)}
.preis-leiste li{display:flex;flex-direction:column;padding:18px 16px;border-left:1px solid var(--linie)}
.preis-leiste li:first-child{border-left:0;padding-left:0}
.preis-leiste b{font:400 clamp(34px,3.6vw,52px)/1 var(--disp);color:var(--rot-tief)}
.preis-leiste small{color:var(--tinte);font-size:.95rem;font-weight:600;margin-top:8px}
.shop-gutschein{margin:22px 0 28px;max-width:48ch;font-size:1.08rem;font-weight:500;color:var(--tinte)}
.shop-gutschein b{font-weight:700}
.shop-knoepfe{display:flex;flex-wrap:wrap;gap:12px}

/* ---------------- Start: Pastaband ---------------- */
.pasta-in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,4vw,64px)}
.pasta-kopf{flex:1 1 380px;min-width:0}
.pasta-kopf .h2{font-size:clamp(30px,3.3vw,46px)}
.pasta-satz{margin-top:18px;max-width:40ch;color:var(--rosa)}
.pasta-stufen{flex:1 1 300px;display:grid;grid-template-rows:1fr 1fr auto;gap:12px;min-width:0} /* 1fr-Zeilen: beide Stufen gleich hoch (Tim 02.10.) */
.stufe{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 18px;padding:18px 20px;border-radius:var(--rad);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,227,214,.35)}
.stufe-nr{grid-row:1/3;font-weight:600;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:var(--rosa)}
.stufe-preis{font:400 clamp(36px,3.4vw,48px)/1 var(--disp)}
.stufe small{color:var(--rosa);font-size:.95rem}
.pasta-stufen .knopf{justify-self:start;margin-top:8px}
.pasta-bild{flex:0 1 300px;min-width:0}
.pasta-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rad)}

/* ---------------- Start: Anfragen (Foto randlos links) ---------------- */
.sek-anfragen{padding-block:0}
.anfragen-in{display:flex;flex-wrap:wrap;align-items:stretch}
.anfragen-bild{flex:1 1 420px;min-height:clamp(320px,44vw,620px);position:relative;min-width:0}
.anfragen-foto,.anfragen-foto img{position:absolute;inset:0;width:100%;height:100%}
.anfragen-foto img{object-fit:cover}
.anfragen-text{flex:1 1 420px;padding:var(--sek) var(--sp);display:flex;flex-direction:column;justify-content:center;min-width:0}
.anfragen-text > p:not(.kicker){margin-top:18px;max-width:42ch;color:var(--grau)}
.anfragen-wege{margin-top:28px;border-top:1px solid var(--creme-tief);max-width:520px}
.weg-zeile{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--creme-tief);
  text-decoration:none;font:400 clamp(22px,2vw,28px)/1.2 var(--disp)}
.weg-zeile span{flex:1 1 auto}
.weg-zeile svg{width:26px;height:26px;fill:none;stroke:var(--rot-tief);stroke-width:2;transition:transform .35s var(--feder)}
.weg-zeile:hover svg{transform:translateX(6px)}

/* ---------------- Start: Stimmen ---------------- */
/* Stimmen kompakt (Tim 02.10.2026: "etwas kleiner allover"), die Note steht im Startschirm */
.stimmen-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-bottom:20px}
/* Google-Kennzeichen in Originalfarben, Sterne im Google-Gelb (Tim 02.10.2026) */
.g-logo{width:20px;height:20px;flex:0 0 auto}
.note-marke{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--tinte)}
.sterne-gelb{display:inline-flex;gap:2px;color:#FBBC05;line-height:0}
.sterne-gelb svg{width:1em;height:1em;fill:currentColor;flex:0 0 auto}
.sterne-note{position:relative;display:inline-block;line-height:0}
.sterne-leer{display:inline-flex;gap:2px;color:#E6D6C4}
.sterne-voll{position:absolute;left:0;top:0;display:flex;gap:2px;width:92%;overflow:hidden;color:#FBBC05} /* 4,6 von 5 */
.note-link{display:inline-block;font-weight:600;color:var(--rot-tief)}
.stimmen-reihe{min-width:0}
.zitate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.zitat{margin:0;display:flex;flex-direction:column;gap:12px;padding:20px 22px;border-radius:var(--rad);background:var(--weiss);border-top:3px solid var(--rot)}
.zitat-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.zitat-kopf .sterne-gelb{font-size:.95rem}
.zitat blockquote{margin:0}
.zitat p{font:400 1.02rem/1.45 var(--disp)}
/* Google-Note im Startschirm, angerissen (Tim 02.10.2026) */
.held-google{display:inline-flex;align-items:center;gap:8px;color:var(--tinte);font-size:.95rem;text-decoration:none}
.held-google b{font:400 1.35rem/1 var(--disp)}
.held-google .sterne-note{font-size:1.05rem}
.held-google-zahl{color:var(--grau)}
/* Gutscheine als eigener Abschnitt: rote Karte und ein Weg */
.gs-in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,80px)}
.gs-text{flex:1 1 400px;min-width:0}
.gs-karte .gk-wert{font-size:clamp(40px,4.4vw,64px);white-space:nowrap}
.gs-schritte small{display:block;font-weight:500;font-size:.88rem;color:var(--grau);margin-top:2px}
.gs-satz{margin:18px 0 26px;max-width:46ch;font-size:1.08rem;font-weight:500;color:var(--tinte)}
.wisch-punkte{display:none}

/* ---------------- Start: Karriereband ---------------- */
.band-karriere{padding-block:clamp(26px,3vw,40px)}
.karriere-band,.galerie-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.karriere-band p,.galerie-band p{font-size:1.12rem;flex:1 1 360px}
.karriere-band b,.galerie-band b{font:400 clamp(24px,2.4vw,32px)/1.2 var(--disp);margin-right:10px}

/* ---------------- Start: Besuch ---------------- */
.besuch-in{display:flex;flex-wrap:wrap;align-items:stretch;gap:clamp(28px,5vw,72px)}
.besuch-text{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.besuch-adr{color:var(--grau);margin-top:12px;display:flex;align-items:flex-start;gap:10px}
.besuch-adr svg{width:20px;height:20px;flex:0 0 auto;margin-top:2px;fill:none;stroke:var(--rot-tief);stroke-width:1.8}
.adr-zeile{display:block} /* Adresse und Parkhinweis je eine Zeile statt Umbruch mitten im Satz */
/* Umbruch (Tim 01.10.: "das woerter nicht komisch random iwo stehen"):
   Ueberschriften ausgeglichen, Fliesstext ohne Einzelwort in der letzten Zeile */
h1,h2,h3,.h1,.h2,.kicker,.drei-text b,.drei-text small,.hc-chip,legend{text-wrap:balance}
p,li,dd,dt,small,figcaption,label > span{text-wrap:pretty}
/* Gutschein in zwei Schritten */
.weiter-zeile{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.zurueck-link{display:inline-block;margin:0 0 14px;padding:0;border:0;background:none;font:inherit;font-size:.92rem;
  color:var(--rot-tief);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* Bild vergroessern */
html.js .zoombar{cursor:zoom-in}
html.js .zoombar:focus-visible{outline:3px solid var(--rot-tief);outline-offset:3px}
.lightbox{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:clamp(56px,6vw,80px) clamp(12px,6vw,96px);background:rgba(24,16,13,.94)}
.lb-bild{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;max-height:100%}
.lb-bild img{display:block;max-width:100%;max-height:calc(100svh - 190px);width:auto;height:auto;object-fit:contain;border-radius:var(--rad)}
.lb-text{color:#F3EADF;font-size:.95rem;text-align:center;max-width:60ch}
.lb-zu,.lb-pfeil{position:absolute;display:grid;place-items:center;border:0;cursor:pointer;color:#fff;background:rgba(255,255,255,.12);border-radius:var(--rad)}
.lb-zu{top:12px;right:12px;width:48px;height:48px;font-size:2rem;line-height:1}
.lb-pfeil{top:50%;transform:translateY(-50%);width:48px;height:64px;font-size:2.4rem;line-height:1}
.lb-vor{left:10px}.lb-nach{right:10px}
.lb-einzeln .lb-pfeil{display:none}
.lb-zu:focus-visible,.lb-pfeil:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* Gutschein kaufen in vier Schritten (Tim 02.10.) */
.sek-kauf{padding-block:clamp(36px,6vw,96px) var(--sek)}
.kauf-in{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(28px,5vw,80px)}
.kauf-karte{flex:0 1 440px;min-width:0;position:sticky;top:calc(var(--kopfh) + 24px)}
.kauf-karte .gutschein-karte{width:100%}
.kauf-foto img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rad)}
.korb-raster.kauf-koerbe{margin-top:20px;grid-template-columns:repeat(2,minmax(0,1fr))}   /* 2x2, nie 3+1 */
.kauf-schritt .hinweis-18,.kauf-schritt .hinweis{margin-top:16px}
.kauf-karte-satz{margin-top:14px;color:var(--grau);font-size:.95rem}
.gk-fuer{margin-top:6px;font-weight:600;color:var(--weiss)}
.kauf-ablauf{flex:1 1 460px;min-width:0}
.kauf-schritte{display:flex;gap:8px;margin:0 0 28px;padding:0;list-style:none;counter-reset:none}
.kauf-schritte > [role=listitem]{flex:1 1 0;display:flex;align-items:center;gap:8px;padding-top:10px;border-top:3px solid var(--linie);
  font-size:.9rem;font-weight:600;color:var(--grau);min-width:0}
.kauf-schritte b{display:grid;place-items:center;flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--linie);color:var(--tinte);font-size:.82rem}
.kauf-schritte .ist{border-top-color:var(--rot-tief);color:var(--tinte)}
.kauf-schritte .ist b{background:var(--rot-tief);color:var(--weiss)}
.kauf-schritte .fertig{border-top-color:var(--tinte);color:var(--tinte)}
.kauf-schritte .fertig b{background:var(--tinte);color:var(--weiss)}
.kauf-schritte span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kauf-titel{font:400 clamp(30px,3.4vw,46px)/1.08 var(--disp);color:var(--tinte);margin:0;outline:none}
.kauf-frage{margin-top:10px;font-size:1.15rem;color:var(--grau)}
.kauf-schritt .werte{margin-top:20px}
.kauf-schritt .gutschein-zeile{margin-top:22px}
.wert-eingabe{margin-top:22px}
.wert-feld{display:block;font-weight:600;font-size:.95rem;margin-bottom:8px}
.wert-rahmen{display:flex;align-items:stretch;max-width:360px;border:1.5px solid #CDBBA9;border-radius:var(--rad);background:var(--weiss);overflow:hidden}
.wert-rahmen:focus-within{border-color:var(--rot-tief);box-shadow:0 0 0 3px rgba(194,42,18,.15)}
.wert-rahmen input{flex:1 1 auto;min-width:0;width:100%;border:0;border-radius:0;padding:14px 4px 14px 16px;text-align:right;
  font:400 clamp(34px,4vw,44px)/1 var(--disp);color:var(--tinte);background:transparent;-moz-appearance:textfield;appearance:textfield}
.wert-rahmen input::-webkit-outer-spin-button,.wert-rahmen input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wert-rahmen input:focus{outline:none}
.wert-euro{display:flex;align-items:center;padding:0 14px 0 6px;font:400 clamp(30px,3.4vw,38px)/1 var(--disp);color:var(--tinte)}
.wert-knopf{flex:0 0 56px;border:0;background:var(--creme);color:var(--tinte);font-size:1.6rem;font-weight:600;cursor:pointer}
.wert-knopf:hover{background:var(--creme-tief)}
.wert-knopf:focus-visible{outline:3px solid var(--rot-tief);outline-offset:-3px}
.wert-feld i{font-style:normal;font-weight:400;color:var(--grau)}
.kauf-stell{display:none}   /* −/+ an der Anzahl: nur Handy und Tablet mit Skript (handy.css), Desktop behaelt das Zahlenfeld */
.kauf-wege{margin:22px 0 0;display:grid;gap:12px;border:0;padding:0}
.kauf-wege .wahl{padding:18px 20px}
.kauf-wege .wahl b{font-size:1.1rem}
.kauf-schritt .felder{margin-top:22px}
.kauf-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.kauf-knoepfe .knopf{min-width:140px;min-height:50px}
.kauf-schritt .uebersicht{margin-top:22px}
.kauf-schritt .summe b{color:var(--tinte)}   /* Grundregel ist weiss fuer das dunkle Band */
.kauf-schritt .summe-fein{color:var(--grau)}
.kauf-angaben{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:22px 0 24px;padding:16px 18px;
  border:1px solid var(--linie);border-radius:var(--rad);background:var(--weiss);font-size:.95rem}
.kauf-angaben:empty{display:none}
.kauf-angaben dt{color:var(--grau)}
.kauf-angaben dd{margin:0;font-weight:600;white-space:pre-line;min-width:0;overflow-wrap:anywhere}
.kauf-schritt .zahlung,.kauf-schritt [data-anfrage]{margin-top:8px}
[data-abgebrochen] .kauf-ablauf::before{content:"Die Zahlung wurde abgebrochen. Sie können es einfach noch einmal versuchen.";display:block;
  margin:0 0 18px;padding:12px 14px;border-radius:var(--rad);background:var(--weiss);font-size:.95rem}
/* Online bezahlen: Haken, Bezahlknopf, Dankeseite */
.zahlung{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.haken{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;line-height:1.5;cursor:pointer}
.haken input{width:22px;height:22px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--rot-tief)}
.textlink{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.flaeche-flasche .haken{color:var(--hell-text)}
.flaeche-flasche .karte-form .haken{color:var(--tinte)}
.knopf-kasse{align-self:flex-start;min-height:52px}
.knopf-kasse[disabled]{opacity:.7;cursor:progress}
[data-abgebrochen] .sek-kasse .kasse-daten::before{content:"Die Zahlung wurde abgebrochen. Sie können es einfach noch einmal versuchen.";display:block;
  margin:0 0 16px;padding:12px 14px;border-radius:var(--rad);background:var(--creme);color:var(--tinte);font-size:.95rem}
.sek-danke{padding-block:var(--sek)}
.danke-inhalt{margin-top:22px;max-width:640px}
.danke-posten,.danke-codes{list-style:none;padding:0;margin:16px 0}
.danke-posten li,.danke-codes li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--linie);font-variant-numeric:tabular-nums}
.danke-codes b{font-size:1.25rem;letter-spacing:.04em}
.danke-wege{margin-top:28px}
/* Gelato-Karte: Theke mit vielen Sorten, Ausschnitt auf die Wannen */
.drei-theke img{object-position:40% 78%}
/* Oeffnungszeiten: Live-Status plus zusammengefasste Zeiten (Tim 01.10.) */
.besuch-zeiten{margin-top:28px;max-width:600px}
.besuch-status{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--weiss);
  border:1px solid var(--linie);border-radius:var(--rad)}
/* Statuszeichen im Abschnitt "Tisch reservieren": Eistuete wie im Startbildschirm statt
   pulsierendem Punkt (Negativliste 28.09.2026). Kugel faerbt sich rot, wenn offen. */
.besuch-status .status-zeichen{width:28px;height:28px}
.besuch-status.ist-auf .kugel{fill:var(--rot)}
html.on .besuch-status.ist-auf .kugel{animation:kugel-setzt .9s var(--feder) .3s both}
.status-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.besuch-status .offen-text{font-size:1.12rem;color:var(--grau)}
.besuch-status .offen-text b{color:var(--tinte);font-weight:700}
.offen-rest{font-size:.92rem;color:var(--grau);font-variant-numeric:tabular-nums}
.offen-rest:empty{display:none}
.zeiten-kurz{margin:14px 0 0}
.zeiten-kurz > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:14px 14px;border-bottom:1px solid var(--creme-tief)}
.zeiten-kurz > div:first-child{border-top:1px solid var(--creme-tief)}
.zeiten-kurz dt{font-weight:600;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;min-width:0}
.zeiten-kurz dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.zeiten-kurz .zu dt,.zeiten-kurz .zu dd{color:var(--grau);font-weight:500}
.lang-zusatz{font-size:.84rem;font-weight:600;color:var(--rot-tief)}
.heute-marke{display:none;font-size:.78rem;font-weight:700;padding:2px 8px;border-radius:4px;
  background:var(--rot-tief);color:var(--weiss)}
.zeiten-kurz .heute{background:var(--weiss);box-shadow:inset 3px 0 0 var(--rot-tief)}
.zeiten-kurz .heute .heute-marke{display:inline-block}
.besuch-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.besuch-bild{flex:0 1 420px;min-width:0}
.besuch-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rad)}

/* ---------------- Startseite in Tims Reihenfolge (02.10.2026) ----------------
   Held · Bewertungen · Essen · Pastakurse · Speisekarte · Tisch reservieren · Catering ·
   Saison · Verschenken · Karriere. Grundton wechselt bei jedem Uebergang. */
/* Bewertungen auf Creme: Zitatkarten weiss, das grosse Zitat ohne Karte */
/* Essen: vier Kacheln, ohne Breitenabfrage nur 4 oder 2 Spuren (nie 3+1 mit leerer Zelle):
   unter 900px Rasterbreite greift das 34-%-Minimum, darueber ein Viertel. */
.vier-raster{grid-template-columns:repeat(auto-fit,minmax(max(calc(25% - 18px),min(34%,calc((900px - 100%) * 999))),1fr))}
.drei-torte img{object-position:50% 60%}
.essen-alle{display:inline-block;margin-top:14px;font-weight:600;color:var(--rot-tief)}
/* Galerie-Knopf neben dem Link (Tim 03.10.2026) */
.essen-wege{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:18px}
.essen-wege .essen-alle{margin-top:0}
/* Speisekarte: gewaehlter Filter */
.sprung a[aria-pressed="true"]{background:var(--rot-tief);border-color:var(--rot-tief);color:var(--weiss)}
[data-kat]{scroll-margin-top:calc(var(--kopfh, 70px) + 8px)}
/* Karriere als rotes Band: die Fusszeile darunter traegt Flasche */
.band-rot{background:var(--rot-tief);color:var(--weiss)}
.band-rot b{color:var(--weiss)}

/* ---------------- Speisekarte: Auszug auf der Startseite und Unterseite ----------------
   Quelle Kundenfotos IMG_8068/8069. Kartenblatt = weisse Flaeche mit Rand, Gerichte als
   Zeile Name | Preis, Zutaten klein darunter. */
.karte-in{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(28px,5vw,80px)}
.karte-kopf{flex:1 1 340px;min-width:0}
.karte-satz{margin-top:18px;max-width:42ch;color:var(--grau)}
.karte-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.karte-fotos{display:flex;gap:16px;margin-top:32px}
.karte-foto{flex:0 1 170px;min-width:0}
.karte-foto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px;border:1px solid var(--creme-tief)}
.karte-foto:first-child{transform:rotate(-2.5deg)}
.karte-foto + .karte-foto{transform:rotate(2deg) translateY(10px)}
.karte-blatt{flex:1 1 520px;min-width:0;background:var(--weiss);border:1px solid var(--creme-tief);border-radius:var(--rad);
  padding:clamp(22px,3vw,40px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:clamp(24px,3vw,40px) clamp(28px,4vw,56px);align-content:start}
.karte-gruppe{min-width:0}
.karte-titel{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding-bottom:10px;margin-bottom:4px;
  border-bottom:2px solid var(--rot-tief);font:400 clamp(24px,2.2vw,30px)/1.15 var(--disp);color:var(--rot-tief)}
.karte-titel small{font:600 .84rem/1.2 var(--sans);color:var(--grau)}
.karte-liste li{display:flex;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px dotted #DCC5AE;break-inside:avoid}
.karte-liste li > span{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;font-weight:600;color:var(--tinte)}
.karte-liste small{font-weight:450;font-size:.88rem;line-height:1.4;color:var(--grau);margin-top:2px}
.karte-liste b{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--tinte)}
.karte-fein{grid-column:1 / -1;font-size:.88rem;line-height:1.5;color:var(--grau)}
/* Unterseite: breite Blaetter setzen die Liste selbst zweispaltig */
.karte-blatt-breit{display:block}
.karte-blatt-breit .karte-gruppe + .karte-gruppe{margin-top:clamp(28px,3.4vw,44px)}
.karte-blatt-breit .karte-liste{columns:2 300px;column-gap:clamp(28px,4vw,56px)}
.karte-blatt-breit .karte-fein{margin-top:18px}
/* Aufklapper: steht offen im Markup, seite.js klappt nur auf dem Handy ein (details.mehr-liste).
   Offen braucht es den Knopf nicht. */
.karte-mehr > summary{margin-top:16px;list-style:none;cursor:pointer}
.karte-mehr > summary::-webkit-details-marker{display:none}
.karte-mehr[open] > summary{display:none}
/* Unterseite: Foto neben dem Blatt, gleich hoch wie das Blatt */
.karte-zeile{display:flex;flex-wrap:wrap;align-items:stretch;gap:clamp(28px,5vw,72px)}
.karte-zeile-bild{flex:0 1 380px;min-width:0;position:relative;min-height:clamp(300px,34vw,520px)}
.karte-zeile-foto,.karte-zeile-foto img{position:absolute;inset:0;width:100%;height:100%}
.karte-zeile-foto img{object-fit:cover;border-radius:var(--rad)}
/* Unterseite: die Karte als Bild, dunkles Band */
.kartenbild-in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,72px)}
.kartenbild-text{flex:1 1 320px;min-width:0}
.kartenbild-text > p:not(.kicker){margin-top:18px;max-width:40ch;color:var(--hell-text)}
.kartenbild-fotos{flex:1 1 420px;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.kartenbild-foto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--rad)}

/* ---------------- Unterseiten: Seitenkopf ---------------- */
.seitenkopf{padding-block:clamp(32px,5vw,72px)}
.seitenkopf-in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,72px)}
.seitenkopf-text{flex:1 1 440px;min-width:0}
.seitenkopf-text > .knopf{margin-top:28px}
.seitenkopf-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.seitenkopf-text .offen{margin-top:22px}
.seitenkopf-bild{flex:0 1 420px;min-width:0}
.kopf-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rad)}
.shop-schritte{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px}
.shop-schritte li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem}
.shop-schritte b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--rot-tief);color:var(--weiss);font-size:.9rem}
.sprung{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.sprung a{padding:9px 16px;border:1px solid var(--linie);border-radius:var(--rad);text-decoration:none;font-weight:600;font-size:.94rem}
.sprung a:hover{border-color:var(--rot-tief);color:var(--rot-tief)}

/* ---------------- Formulare ---------------- */
.felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px}
.feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.feld-breit{grid-column:1/-1}
.feld > span,.menge > span,legend{font-weight:600;font-size:.9rem}
.feld i{font-style:normal;font-weight:400;color:var(--grau)}
input,textarea,select{font:400 16px/1.4 var(--sans);color:var(--tinte);background:var(--weiss);border:1.5px solid #CDBBA9;
  border-radius:5px;padding:11px 12px;width:100%;min-width:0}
textarea{resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--rot-tief);outline-offset:1px;border-color:var(--rot-tief)}
.formular-wege{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.formular-fein{font-size:.86rem;color:var(--grau);margin-top:14px;line-height:1.5}
.formular-fehler{margin-top:12px;font-weight:600;color:var(--rot-tief)}
.karte-form{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--rad);padding:clamp(20px,2.6vw,34px)}
.form-titel{font:400 1.7rem/1.2 var(--disp);margin-bottom:18px}
.wahl-reihe{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.wahl-reihe legend,.lieferung legend{margin-bottom:10px}
.wahl{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1.5px solid #CDBBA9;border-radius:var(--rad);
  background:var(--weiss);cursor:pointer;flex:1 1 180px}
.wahl input{width:20px;height:20px;accent-color:var(--rot-tief);flex:0 0 auto;padding:0}
.wahl span{display:flex;flex-direction:column;line-height:1.25}
.wahl small{color:var(--grau);font-size:.86rem}
.wahl:has(input:checked){border-color:var(--rot-tief);box-shadow:inset 0 0 0 1px var(--rot-tief)}
.flaeche-flasche input,.flaeche-flasche textarea{border-color:var(--flasche-2)}
.flaeche-flasche .feld > span{color:var(--hell-text)}
.flaeche-flasche .formular-fein{color:#CFC4B6}
.flaeche-flasche .feld i{color:#CFC4B6}
/* Weisse Formularkarte auf Flasche: dunkle Schrift zurueck, sonst 1,2:1 */
.flaeche-flasche .karte-form{color:var(--tinte)}
.flaeche-flasche .karte-form .feld > span{color:inherit}
.flaeche-flasche .karte-form .formular-fein,.flaeche-flasche .karte-form .feld i{color:var(--grau)}
.flaeche-flasche .karte-form input,.flaeche-flasche .karte-form textarea{border-color:#CDBBA9}
.flaeche-flasche .karte-form a:not(.knopf){color:var(--rot-tief)}

/* ---------------- Shop ---------------- */
.korb-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.korb{display:flex;flex-direction:column;gap:10px;padding:24px 22px;background:var(--grund);border:1px solid var(--creme-tief);border-radius:var(--rad)}
.korb-preis{font:400 1.2rem/1 var(--sans);color:var(--grau)}
.korb-preis b{font:400 clamp(48px,4.6vw,64px)/1 var(--disp);color:var(--rot-tief)}
.korb-name{font-weight:600}
.korb-gross{background:var(--rot-tief);border-color:var(--rot-tief);color:var(--weiss)}
.korb-gross .korb-preis,.korb-gross .korb-preis b{color:var(--weiss)}
.menge{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--creme-tief)}
.menge input{width:84px;text-align:center}
.korb-gross .menge{border-top-color:rgba(255,227,214,.4)}
.lieferung{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.lieferung legend{width:100%}
.lieferung .hinweis{flex:1 1 100%;max-width:70ch}
.gutschein-in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,80px)}
.gutschein-karte{flex:0 1 400px;aspect-ratio:1.6;border-radius:10px;background:var(--rot);color:var(--weiss);padding:clamp(20px,2.4vw,32px);
  display:grid;grid-template-rows:1fr auto auto;min-width:0;position:relative;overflow:hidden}
.gutschein-karte::after{content:"";position:absolute;right:-18%;top:-30%;width:62%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.35)}
.gutschein-logo img{width:72px;height:auto}
.gk-wert{font:400 clamp(52px,6vw,84px)/1 var(--disp)}
.gk-text{font-weight:600;letter-spacing:.04em}
.gutschein-wahl{flex:1 1 440px;min-width:0}
.werte{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-top:22px}
.werte legend{grid-column:1/-1;margin-bottom:10px}
.werte label{position:relative;cursor:pointer}
.werte input{position:absolute;opacity:0;width:1px;height:1px}
.werte span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1.5px solid #CDBBA9;border-radius:var(--rad);font-weight:600;
  background:var(--weiss);font-variant-numeric:tabular-nums;transition:background-color .2s,color .2s,border-color .2s}
.werte span::after{content:" €";font-weight:400;margin-left:2px}
.werte input:checked + span{background:var(--rot-tief);border-color:var(--rot-tief);color:var(--weiss)}
.werte input:focus-visible + span{outline:3px solid var(--rot-tief);outline-offset:2px}
.gutschein-zeile{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;margin:20px 0 14px}
.gutschein-zeile .menge{border-top:0;padding-top:0;margin-top:0;flex:0 0 auto;flex-direction:column;align-items:flex-start;gap:6px}
.gutschein-zeile .feld{flex:1 1 240px}
.kasse-in{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,80px);align-items:flex-start}
.kasse-liste{flex:1 1 360px;min-width:0}
.uebersicht{margin-top:26px;border-top:1px solid var(--flasche-2)}
.uebersicht li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--flasche-2)}
.uebersicht li.leer{color:#CFC4B6}
.summe{display:flex;justify-content:space-between;align-items:baseline;margin-top:20px}
.summe b{font:400 clamp(34px,3.4vw,46px)/1 var(--disp);color:var(--weiss)}
.summe-fein{font-size:.88rem;color:#CFC4B6;margin-top:6px}
.kasse-daten{flex:1 1 440px;min-width:0}

/* ---------------- Pastakurse ---------------- */
.kurs-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;align-items:stretch}
.kurs{padding:clamp(22px,2.6vw,34px);border-radius:var(--rad);background:var(--grund);color:var(--tinte)}
.kurs-zwei{background:var(--creme)}
.kurs-stufe{font-weight:600;color:var(--rot-tief);letter-spacing:.02em}
.kurs-preis{margin-top:10px;color:var(--grau)}
.kurs-preis b{font:400 clamp(52px,5vw,72px)/1 var(--disp);color:var(--tinte);margin-right:6px}
.kurs-liste{margin-top:20px;border-top:1px solid var(--linie)}
.kurs-liste li{padding:11px 0 11px 28px;border-bottom:1px solid var(--linie);position:relative}
.kurs-liste li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:12px;border-radius:50%;border:2px solid var(--rot)}
.kurs-liste li b{font-weight:600}
.kurs-bild{min-width:0}
.kurs-foto,.kurs-foto img{height:100%}
.kurs-foto img{width:100%;min-height:320px;object-fit:cover;border-radius:var(--rad)}
.anfrage-in{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px);align-items:flex-start}
.anfrage-kopf{flex:1 1 360px;min-width:0}
.anfrage-kopf > p:not(.kicker){margin-top:16px;color:var(--grau);max-width:44ch}
.anfrage-foto img{width:min(100%,380px);aspect-ratio:4/5;object-fit:cover;border-radius:var(--rad);margin-top:28px}
.anfrage-in > form{flex:1 1 440px;min-width:0}
.abend{display:flex;flex-wrap:wrap;gap:22px 0;position:relative}
.abend li{position:relative;display:flex;flex-direction:column;gap:14px;padding:0 18px 0 0;min-width:0;flex:1 1 170px}
.abend li::before{content:"";position:absolute;left:46px;right:0;top:22px;height:2px;background:var(--creme-tief)}
.abend li:last-child::before{display:none}
.abend b{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--rot-tief);color:var(--weiss);font:400 1.4rem/1 var(--disp)}
.abend span{font:400 clamp(22px,1.9vw,28px)/1.2 var(--disp);display:flex;flex-direction:column}
.abend-foto img{width:100%;aspect-ratio:21/8;object-fit:cover;border-radius:var(--rad);margin-top:clamp(28px,4vw,52px)}
.abend small{font:400 .9rem/1.4 var(--sans);color:var(--grau);margin-top:6px}

/* ---------------- Praesentkoerbe ---------------- */
.hinweis-18{display:flex;align-items:center;gap:14px;flex:1 1 100%;max-width:70ch;padding:12px 16px;border-radius:var(--rad);
  background:var(--grund);border:1px solid var(--creme-tief);font-size:.92rem;line-height:1.5}
.hinweis-18 > b{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--tinte);color:var(--weiss);font-size:.9rem}
.regal-in{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px);align-items:center}
.regal-kopf{flex:1 1 320px;min-width:0}
.regal-kopf > p:not(.kicker){margin-top:16px;color:var(--grau);max-width:42ch}
.regal-kopf .knopf{margin-top:24px}
.regal-bilder{flex:2 1 480px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px}
.regal-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rad)}
.regal-foto:nth-child(2){margin-top:clamp(0px,3vw,48px)}

/* ---------------- Gutscheine ---------------- */
.sek-gutschein-weg{padding-block:clamp(36px,4vw,56px)}
.sek-gutschein-weg .lieferung{margin-top:0;flex:1 1 420px;align-content:center}
.gw-in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,64px)}
.gw-foto{flex:0 1 380px;min-width:0}
.gw-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rad)}

/* ---------------- Catering ---------------- */
.angebot-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(16px,2vw,28px)}
.angebot{display:flex;flex-direction:column;background:var(--grund);border-radius:var(--rad);overflow:hidden;min-width:0;
  scroll-margin-top:calc(var(--kopfh) + 20px)}
.angebot-foto img{width:100%;aspect-ratio:16/10;object-fit:cover}
.angebot-text{padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:10px;flex:1 1 auto}
.angebot-text h3{font:400 clamp(30px,2.8vw,40px)/1.1 var(--disp)}
.angebot-text p{color:var(--grau)}
.angebot-text .weg-zeile{margin-top:auto;border-top:1px solid var(--creme-tief);border-bottom:0;padding-bottom:0}
.buchung-in{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,80px);align-items:flex-start}
.buchung-kopf{flex:1 1 320px;min-width:0}
.buchung-schritte{margin-top:28px;border-top:1px solid var(--flasche-2)}
.buchung-schritte li{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--flasche-2)}
.buchung-schritte b{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2px solid var(--pistazie);
  color:var(--pistazie);font:400 1.2rem/1 var(--disp)}
.buchung-form{flex:1.5 1 460px;min-width:0}
.buchung-uebersicht{margin-top:20px;padding:16px 18px;border-radius:var(--rad);background:var(--creme)}
.ue-titel{font-weight:600;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rot-tief)}
.buchung-uebersicht ul{margin-top:8px}
.buchung-uebersicht li{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid var(--creme-tief);font-size:.95rem}
.buchung-uebersicht li:last-child{border-bottom:0}
.buchung-uebersicht li span{color:var(--grau)}
.buchung-uebersicht li b{font-weight:600;text-align:right;overflow-wrap:anywhere}
.buchung-uebersicht li.leer{color:var(--grau)}
.buchung-foto img{width:min(100%,420px);aspect-ratio:4/5;object-fit:cover;border-radius:var(--rad);margin-top:28px}
.weg-wahl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:18px}
.weg-wahl legend{float:left;margin-right:6px;font-weight:600;font-size:.9rem}
.weg-wahl label{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.weg-wahl input{width:20px;height:20px;accent-color:var(--rot-tief);padding:0}

/* ---------------- Galerie ---------------- */
.gal-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.filter{padding:10px 18px;border:1.5px solid var(--creme-tief);border-radius:var(--rad);font-weight:600;background:var(--grund)}
.filter.an{background:var(--tinte);color:var(--grund);border-color:var(--tinte)}
.gal-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px}
.gal-item{border-radius:var(--rad);overflow:hidden;background:var(--creme-tief)}
.gal-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .8s var(--sanft)}
.gal-item:hover .gal-foto img{transform:scale(1.03)}
.gal-item:nth-child(7n+1){grid-row:span 2}
.gal-item:nth-child(7n+1) .gal-foto,.gal-item:nth-child(7n+1) .gal-foto img{height:100%}
.band-galerie{padding-block:clamp(26px,3vw,40px)}
.gal-mehr{margin-top:12px}
.gal-mehr > summary{list-style:none;margin:14px auto 0;display:flex;width:fit-content;justify-content:center}
.gal-mehr > summary::-webkit-details-marker{display:none}
.gal-mehr .auf-text,.gal-mehr[open] .zu-text{display:none}
.gal-mehr[open] .auf-text{display:inline}
.gal-mehr[open] > summary{order:2}
.gal-mehr[open]{display:flex;flex-direction:column}

/* ---------------- Ueber mich ---------------- */
.weg-in{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,80px);align-items:flex-start}
.weg-kopf{flex:0 1 340px;min-width:0}
.weg-logo img{width:min(100%,280px);margin-top:30px}
.weg-achse{flex:1 1 440px;position:relative;padding-left:36px;min-width:0}
.weg-achse::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--creme-tief)}
.weg-achse::after{content:"";position:absolute;left:8px;top:8px;width:2px;height:calc(100% - 16px);background:var(--rot);
  transform-origin:50% 0;transform:scaleY(var(--weg,1))}
html.js .weg-achse::after{--weg:0}
html.on .weg-achse::after{animation:weg-zeichnet linear both;animation-timeline:view();animation-range:entry 20% cover 60%}
@keyframes weg-zeichnet{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@supports not (animation-timeline:view()){html.js .weg-achse::after{--weg:1}}
.weg-punkt{position:relative;padding-bottom:34px}
.weg-punkt:last-child{padding-bottom:0}
.weg-punkt::before{content:"";position:absolute;left:-36px;top:6px;width:18px;height:18px;border-radius:50%;background:var(--creme);border:3px solid var(--rot);z-index:1}
.weg-jahr{font:400 clamp(30px,3vw,42px)/1 var(--disp);color:var(--rot-tief)}
.weg-punkt h3{margin-top:8px}
.weg-punkt p:not(.weg-jahr){margin-top:6px;color:var(--grau);max-width:56ch}
.sek-haltung{padding-block:0}
.haltung-in{display:flex;flex-wrap:wrap;align-items:stretch}
.haltung-text{flex:1 1 440px;padding:var(--sek) var(--sp);min-width:0;display:flex;flex-direction:column;justify-content:center}
.haltung-liste{margin-top:28px;border-top:1px solid var(--flasche-2);max-width:560px}
.haltung-liste li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:6px 20px;padding:16px 0;border-bottom:1px solid var(--flasche-2)}
.haltung-liste b{color:var(--pistazie);font-weight:600}
.haltung-bild{flex:1 1 420px;position:relative;min-height:clamp(320px,40vw,600px);min-width:0}
.haltung-foto,.haltung-foto img{position:absolute;inset:0;width:100%;height:100%}
.haltung-foto img{object-fit:cover}
.schluss-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.schluss-knoepfe{display:flex;flex-wrap:wrap;gap:12px}

/* ---------------- Karriere ---------------- */
.sek-eckdaten{padding-block:clamp(36px,4vw,56px)}
.eckdaten-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0}
.eckdatum{display:flex;flex-direction:column;gap:6px;padding:12px 24px;border-left:1px solid rgba(255,227,214,.4)}
.eckdatum:first-child{border-left:0;padding-left:0}
.eckdatum b{font:400 clamp(32px,3.4vw,48px)/1.05 var(--disp)}
.eckdatum span{color:var(--rosa)}
.eckdatum-hervor b{text-decoration:underline;text-decoration-color:var(--rosa);text-decoration-thickness:2px;text-underline-offset:8px}
.bewerbung-in{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,72px);align-items:flex-start}
.bewerbung-text{flex:1 1 380px;min-width:0}
.punkt-liste{margin-top:22px;border-top:1px solid var(--creme-tief)}
.punkt-liste li{padding:13px 0 13px 28px;border-bottom:1px solid var(--creme-tief);position:relative}
.punkt-liste li::before{content:"";position:absolute;left:0;top:21px;width:14px;height:2px;background:var(--rot-tief)}
.bewerbung-foto img{width:min(100%,380px);aspect-ratio:4/5;object-fit:cover;border-radius:var(--rad);margin-top:28px}
.bewerbung-in > form{flex:1 1 440px;min-width:0}

/* ---------------- Kontakt ---------------- */
.sek-wege{padding-block:clamp(36px,4vw,56px)}
.wege-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.weg-kachel{display:flex;align-items:center;gap:14px;padding:20px;background:var(--grund);border:1px solid var(--creme-tief);
  border-radius:var(--rad);text-decoration:none;min-height:84px;min-width:0}
.weg-kachel svg{width:28px;height:28px;flex:0 0 auto;fill:none;stroke:var(--rot-tief);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.weg-kachel span{display:flex;flex-direction:column;min-width:0}
.weg-kachel b{font-weight:600}
.weg-kachel small{color:var(--grau);font-size:.86rem;overflow-wrap:anywhere}
.weg-kachel:hover{border-color:var(--rot-tief)}
.weg-wa{background:var(--wa);border-color:var(--wa);color:var(--weiss)}
.weg-wa svg{stroke:var(--weiss)}
.weg-wa small{color:#E3F2EA}
.zeiten-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(36px,5vw,80px)}
.zeiten-block{min-width:0;scroll-margin-top:calc(var(--kopfh) + 20px)}
.zeiten-tafel{margin-top:24px;border-top:1px solid var(--flasche-2)}
.zeiten-tafel div{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--flasche-2)}
.zeiten-tafel dt{font-weight:600;color:var(--weiss)}
.zeiten-tafel dd{font-variant-numeric:tabular-nums}
.zeiten-tafel .zu dd{color:#CFC4B6}
.zeiten-tafel .lang dd{color:var(--pistazie)}
.zeiten-tafel .heute dt::after{content:" · heute";font-weight:400;color:var(--pistazie)}
.zeiten-fein{margin-top:14px;font-size:.88rem;color:#CFC4B6}
.anfahrt-adr{font:400 clamp(24px,2.4vw,32px)/1.3 var(--disp);color:var(--weiss);margin:22px 0 14px}
.zeiten-block > p:not(.kicker):not(.anfahrt-adr):not(.zeiten-fein){max-width:44ch}
.zeiten-block .knopf{margin-top:22px}
.anfahrt-foto img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--rad);margin-top:30px}

/* ---------------- Fusszeile: kompakt ---------------- */
.fuss{background:var(--flasche);color:var(--hell-text);padding-block:clamp(36px,4vw,52px) 20px;font-size:.94rem}
.fuss a{color:var(--hell-text);text-decoration-color:var(--pistazie)}
.fuss-in{display:flex;flex-wrap:wrap;gap:22px clamp(28px,4vw,64px);align-items:flex-start}
.fuss-marke{display:flex;align-items:center;gap:16px;flex:1 1 300px}
.fuss-logo img{width:64px;height:auto}
.fuss-name{display:flex;flex-direction:column;line-height:1.4}
.fuss-name b{font:400 1.4rem/1.1 var(--disp);color:var(--weiss);margin-bottom:4px}
.fuss-kontakt{display:flex;flex-direction:column;gap:6px;flex:1 1 240px}
.fuss-nav{flex:1 1 240px}
.fuss-nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
.fuss-nav a{text-decoration:none}
.fuss-nav a:hover{text-decoration:underline}
.fuss-unten{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:28px;padding-top:16px;border-top:1px solid var(--flasche-2);font-size:.84rem}
.fuss-unten [data-modal]{color:var(--hell-text);text-decoration:underline;text-decoration-color:var(--flasche-2);text-underline-offset:3px}
.fuss-unten [data-modal]:hover{text-decoration-color:var(--pistazie)}
.credit{margin-left:auto;color:#CFC4B6}

/* ---------------- Modale ---------------- */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,32px);background:rgba(20,16,13,.62);overflow-y:auto;overscroll-behavior:contain}
.modal.offen{display:flex}
.modal:target{display:flex} /* ohne JavaScript: Fusszeilen-Anker oeffnen Impressum und Datenschutz */
.fuss-unten [data-modal]{display:inline-flex;align-items:center}
.modal-karte{position:relative;width:min(560px,100%);margin:auto;background:var(--grund);border-radius:10px;
  padding:clamp(24px,3.4vw,40px);color:var(--tinte);animation:karte-rein .45s var(--feder) both}
.modal-karte.breit{width:min(760px,100%)}
@keyframes karte-rein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.modal-zu{position:absolute;top:10px;right:10px;width:44px;height:44px;font-size:30px;line-height:1;border-radius:var(--rad);color:var(--tinte)}
.modal-zu:hover{background:var(--creme)}
.modal-vor{font-weight:600;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rot-tief)}
.modal-karte h2{font:400 clamp(32px,3.4vw,42px)/1.1 var(--disp);margin:8px 44px 10px 0}
.modal-text{color:var(--grau);margin-bottom:22px}
.modal-lang{font-size:.96rem;line-height:1.6}
.modal-lang h3{margin:22px 0 6px}
.modal-lang p{margin-top:8px}
.modal-lang .platzhalter{padding:14px 16px;background:var(--creme);border-radius:var(--rad);margin-top:6px}
.menue-rubrik{font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);margin:22px 0 8px}
.menue-liste{display:flex;flex-direction:column;border-top:1px solid var(--linie)}
.menue-liste a{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--linie);text-decoration:none;
  font:400 1.5rem/1.2 var(--disp);min-height:48px}
.menue-liste a span{font:600 .8rem/1 var(--sans);color:var(--rot-tief);font-variant-numeric:tabular-nums}
.menue-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px}
.kachel{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--linie);border-radius:var(--rad);text-decoration:none;min-height:60px;background:var(--weiss)}
.kachel svg{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:var(--rot-tief);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.kachel span{display:flex;flex-direction:column;line-height:1.25}
.kachel small{color:var(--grau);font-size:.84rem}

/* ---------------- Bewegung: Eisdiele federt ----------------
   .rv blendet ein und federt leicht nach, .ln faehrt zeilenweise hinter
   der Maske hoch. Erst nach dem Gate (html.on), Muster CLAUDE.md 3.7. */
html.js .rv{opacity:0;transform:translateY(18px)}
html.js .rv.in{opacity:1;transform:none;
  transition:opacity .6s ease,transform .8s var(--feder);transition-delay:var(--d,0ms)}
html.js .ln{display:block;overflow:hidden;padding:.14em .06em .22em;margin:-.14em -.06em -.22em}
html.js .ln>span{display:block;transform:translateY(112%)}
html.js .ln.in>span{transform:none;transition:transform .95s var(--sanft);transition-delay:var(--d,0ms)}
html.js .held .kicker{--d:60ms}
html.js .held .ln:nth-of-type(1){--d:140ms}
html.js .held .ln:nth-of-type(2){--d:260ms}
html.js .held-unter{--d:380ms}
html.js .held-knoepfe{--d:480ms}
html.js .held-fakten{--d:580ms}
html.js .h1 .ln + .ln,html.js .h2 .ln + .ln{--d:120ms}
html.js .drei-kachel:nth-child(2),html.js .korb:nth-child(2),html.js .zitat:nth-child(2),html.js .weg-punkt:nth-child(2),
html.js .eckdatum:nth-child(2),html.js .weg-kachel:nth-child(2),html.js .stufe + .stufe{--d:110ms}
html.js .drei-kachel:nth-child(3),html.js .korb:nth-child(3),html.js .zitat:nth-child(3),html.js .weg-punkt:nth-child(3),
html.js .eckdatum:nth-child(3),html.js .weg-kachel:nth-child(3){--d:220ms}
html.js .korb:nth-child(4),html.js .weg-kachel:nth-child(4){--d:330ms}
/* Held-Foto zieht nach dem Gate von unten auf, das Signet rollt herein */
html.js .held-bild.rv{opacity:1;transform:none}
html.js main img{opacity:0;transition:opacity .7s ease}
html.js main img.da{opacity:1}
html.js .hc{clip-path:inset(100% 0 0 0)}
html.on .hc{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--sanft) .2s}
html.on .hc-a{transition-delay:.42s}
html.on .hc-b{transition-delay:.6s}
html.js .ww{--d:0ms}
html.js .wegweiser li:nth-child(2) .ww{--d:70ms}
html.js .wegweiser li:nth-child(3) .ww{--d:140ms}
html.js .wegweiser li:nth-child(4) .ww{--d:210ms}
html.js .wegweiser li:nth-child(5) .ww{--d:280ms}
html.js .wegweiser li:nth-child(6) .ww{--d:350ms}
html.js .abend li:nth-child(2){--d:90ms}
html.js .abend li:nth-child(3){--d:180ms}
html.js .abend li:nth-child(4){--d:270ms}
html.js .abend li:nth-child(5){--d:360ms}
html.js .held-signet{opacity:0;transform:rotate(-120deg) scale(.6)}
html.on .held-signet{opacity:1;transform:none;transition:opacity .5s ease 1s,transform 1.1s var(--feder) 1s}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none}
  html.js .rv.in{transition:none}
  html.js .ln>span,html.js .ln.in>span{transform:none;transition:none}
  html.js .hc{clip-path:none}
  html.js main img{transition:none}
  html.js .held-signet{opacity:1;transform:none}
  html.on .offen.ist-auf .kugel,html.on .besuch-status.ist-auf .kugel,html.on [data-saison=winter] .saison-tafel.in li{animation:none}
  html.js .weg-achse::after{--weg:1;animation:none}
  .modal-karte{animation:none}
}



/* ---------- Pizza Giro (Tim 06.10.2026) ---------- */
.giro-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px clamp(32px,5vw,80px);align-items:center}
.giro-kopf{grid-row:1 / 3}
.giro-satz{margin-top:16px;font-size:1.1rem;color:var(--hell-text);max-width:40ch}
.giro-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.giro-reihe{min-width:0}
.giro-regeln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.giro-regel{padding:22px 22px 20px;border:1px solid rgba(255,255,255,.14);border-radius:var(--rad);background:rgba(255,255,255,.04)}
.giro-regel svg{width:46px;height:46px;fill:none;stroke:var(--rot);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.giro-regel h3{margin-top:12px;font:400 1.3rem/1.15 var(--disp);color:var(--weiss)}
.giro-regel p{margin-top:6px;font-size:.98rem;line-height:1.5;color:var(--hell-text)}
.giro-regel b{color:#FF7657;font-weight:600}
.giro-alacarte{font:400 1.15rem/1.35 var(--disp);color:var(--weiss)}
.giro-preis{margin-top:18px;color:var(--hell-text);font-size:1.05rem}
.giro-preis b{font:400 clamp(40px,4vw,60px)/1 var(--disp);color:var(--weiss);margin-right:6px}

/* ---------- Über mich: Startseite und Unterseite (Tim 06.10.2026) ---------- */
.inhaber-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.inhaber-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;border-radius:var(--rad)}
.inhaber-satz{margin:16px 0 24px;font-size:1.1rem;max-width:44ch;color:var(--tinte)}
.ich-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px clamp(32px,5vw,80px);align-items:start}
.ich-text > p{font-size:1.06rem;line-height:1.6;max-width:58ch}
.ich-text > p + p{margin-top:14px}
.ich-sorte{margin-top:24px;padding:20px 22px;border-left:3px solid var(--rot);background:var(--creme);border-radius:0 var(--rad) var(--rad) 0;max-width:52ch}
.ich-sorte-titel{font-weight:600;font-size:.84rem;color:var(--rot-tief)}
.ich-sorte-name{font:400 clamp(30px,3vw,42px)/1.05 var(--disp);color:var(--tinte);margin:4px 0 6px}
.ich-gruss{margin-top:22px;font:400 1.25rem/1.35 var(--disp);color:var(--tinte)}
.ich-bild{margin-top:28px}
.ich-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rad)}
.giro-bild{display:none;margin-top:28px} /* nur Desktop, desktop.css */
.giro-foto img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--rad)}
.giro-regel h3,.giro-regel p{text-wrap:balance}

/* Kuechenpause (Tim 09.10.2026) */
.kueche-pause dt,.kueche-pause dd{color:var(--grau);font-size:.92em}
.menue-kueche{display:block;margin-top:2px;font-size:.88rem;color:var(--grau)}

/* Vorbestellung: Auswahl aus der Karte (Tim 09.10.2026) */
.vb{display:block}
.vb-gruppen{display:grid;gap:8px;margin-top:8px}
.vb-gruppe{border:1px solid var(--linie);border-radius:var(--rad);background:var(--weiss)}
.vb-gruppe summary{cursor:pointer;padding:12px 14px;font:400 1.08rem/1.2 var(--disp);color:var(--tinte);min-height:44px;display:flex;align-items:center}
.vb-posten{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--linie)}
.vb-posten.gewaehlt{background:var(--creme)}
.vb-name{font-weight:500;color:var(--tinte);min-width:0}
.vb-preis{font-size:.9rem;color:var(--grau);white-space:nowrap}
.vb-stell{display:inline-flex;align-items:center;gap:6px}
.vb-stell button{width:36px;height:36px;border:1px solid var(--linie);border-radius:var(--rad);background:var(--grund);color:var(--tinte);font-size:1.15rem;line-height:1;cursor:pointer}
.vb-stell output{min-width:1.4em;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.vb-korb{margin-top:12px;padding:12px 14px;border-radius:var(--rad);background:var(--creme)}
.vb-korb ul{margin:6px 0 0;padding-left:1.1em}
.vb-korb-titel{font-weight:600;color:var(--tinte)}
.vb-summe{margin-top:8px;font-weight:600;color:var(--rot-tief)}
.vb-leer{color:var(--grau)}
.vb-fehler{margin-top:8px;color:var(--rot-tief);font-weight:600}

/* EU-KI-Kennzeichnung (Art. 50, Tim 12.10.2026): Label unten rechts im Bildrahmen, immer sichtbar */
.ki-bild{position:relative;min-width:0}
.ki-bild .ki-label,.lb-rahmen .ki-label{position:absolute;right:8px;bottom:8px;height:24px;width:auto;aspect-ratio:265/84;pointer-events:none}
.lb-rahmen{position:relative;display:block;max-width:100%;line-height:0}
.lb-bild .lb-rahmen .ki-label{max-height:none;border-radius:0}
.lb-rahmen .ki-label[hidden]{display:none}

/* Klick-Feedback (abnahme 1e): kurzer Druck auf Knöpfen und Kacheln, kein grauer Tap-Blitz */
a,button,summary,label{-webkit-tap-highlight-color:transparent}
.knopf:active,.knopf-rot:active,.knopf-rand:active,.knopf-hell:active,.knopf-hell-rand:active,.knopf-wa:active,.knopf-kasse:active,.wert-knopf:active{transform:scale(.97)}