/* =========================================================
   Pizzeria Calimero, Hanau
   Editoriales Layout: grosse Typografie, viel Weissraum,
   Elfenbein, Flaschengruen, Messing.

   SCHRIFTEN: ausschliesslich Systemschriften. Keine Google
   Fonts, keine CDN, keine lizenzpflichtige Schrift. Es wird
   beim Seitenaufruf nichts von fremden Servern geladen.
   Bitte auch nichts nachruesten.
   ========================================================= */

:root{
  --grund:#faf7f0;
  --tief:#f1ead9;
  --blatt:#fffdf8;

  --tinte:#171512;
  --still:#6d6355;
  --leise:#9b9081;

  --gruen:#123f26;          /* dunkles Flaschengruen, Baender */
  --gruen-mittel:#1a5c37;
  --gold:#a8801d;
  --gold-hell:#c9a24a;
  --gold-still:rgba(168,128,29,.28);
  --rot:#a3141c;

  --linie:rgba(23,21,18,.12);
  --linie-stark:rgba(23,21,18,.24);

  /* Didone fuer die grossen Momente, Palatino fuer den Rest */
  /* Didone zuerst, danach bewusst Georgia statt Times New Roman.
     Times bricht bei grossen Graden optisch zusammen, Georgia nicht.
     Damit sieht die Seite auf Windows anders aus als auf dem Mac, aber
     in jedem Fall ordentlich. */
  --display:Didot,"Didot LT STD","Bodoni 72","Bodoni MT","Playfair Display",
            "Hoefler Text",Constantia,"Iowan Old Style",Georgia,serif;
  --serif:Palatino,"Palatino Linotype","Book Antiqua","Iowan Old Style",Constantia,Georgia,serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --breite:1280px;
  --schmal:820px;
  --gasse:clamp(1.25rem,5vw,4rem);
  --kopf-h:5rem;
}

*,*::before,*::after{box-sizing:border-box}

html{
  overflow-x:clip;
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--kopf-h) + 4.5rem);
  background:var(--grund);
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

body{
  margin:0;background:var(--grund);color:var(--tinte);
  font-family:var(--sans);font-size:clamp(1rem,.95rem + .25vw,1.09rem);
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.26;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block}
a{color:var(--gruen);text-underline-offset:.22em}
a:hover{color:var(--rot)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ---------------- Typografie ---------------- */
h1,h2,h3,h4{margin:0 0 .5em;color:var(--gruen);font-weight:700}
/* Seitenueberschrift: ruhig, lesbar, nicht bildschirmfuellend */
h1{font-family:var(--display);font-size:clamp(2.3rem,4.6vw,3.8rem);line-height:1.02;
  letter-spacing:-.028em;text-wrap:balance}
h2{font-family:var(--display);font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.1;
  letter-spacing:-.022em;text-wrap:balance}
h3{font-family:var(--serif);font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);line-height:1.2;
  letter-spacing:-.008em}
p{margin:0 0 1.1em;max-width:64ch}

.gross{font-size:clamp(1.1rem,1rem + .55vw,1.32rem);line-height:1.6;color:var(--still);
  max-width:46ch}
.marke{display:inline-flex;align-items:center;gap:.8rem;font-family:var(--sans);
  font-size:.68rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1.6rem}
.marke::before{content:"";width:2rem;height:1px;background:var(--gold-still)}

.huelle{width:min(100% - 2*var(--gasse),var(--breite));margin-inline:auto;
  position:relative;z-index:2}
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.sprung{position:absolute;left:.5rem;top:-4rem;z-index:200;background:var(--gruen);
  color:#fff;padding:.7rem 1.1rem;font-weight:700;transition:top .15s}
.sprung:focus{top:.5rem}

/* ---------------- Einblenden beim Scrollen ---------------- */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
[data-reveal].sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ [data-reveal]{opacity:1;transform:none} }

/* ---------------- Kopf ---------------- */
.kopf{position:sticky;top:0;z-index:90;background:rgba(250,247,240,.86);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.kopf[data-gescrollt="ja"]{border-bottom-color:var(--linie)}
.kopf__innen{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:5rem}
.kopf__logo{display:flex;align-items:center;text-decoration:none}
.kopf__markenzeichen{height:2.5rem;width:auto;display:block;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,0));
  transition:transform .35s cubic-bezier(.22,1,.36,1),filter .35s ease}
.kopf__logo:hover .kopf__markenzeichen{transform:translateY(-2px) scale(1.015)}
.kopf__nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem)}
.kopf__nav a{position:relative;font-family:var(--sans);font-size:.82rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--tinte);text-decoration:none;
  padding:.5rem 0}
.kopf__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:.15rem;height:1px;
  background:var(--gold);transition:right .35s cubic-bezier(.22,1,.36,1)}
.kopf__nav a:hover::after,.kopf__nav a[aria-current="page"]::after{right:0}
.kopf__nav a[aria-current="page"]{color:var(--gruen)}
.kopf__tel{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;
  background:var(--gruen);color:#fff;text-decoration:none;font-weight:700;font-size:.88rem;
  letter-spacing:.02em;padding:.85rem 1.4rem;transition:background .25s}
.kopf__tel:hover{background:var(--rot);color:#fff}
@media (max-width:900px){
  .kopf__tel{display:none}
  .kopf__innen{flex-wrap:wrap;justify-content:center;min-height:0;padding-block:.7rem;gap:.4rem}
  .kopf__logo{flex:0 0 100%;justify-content:center}
  .kopf__markenzeichen{height:2.15rem}
  .kopf__nav{flex:0 0 100%;justify-content:center;flex-wrap:wrap;gap:.2rem 1.15rem}
  .kopf__nav a{font-size:.72rem;letter-spacing:.11em;padding:.35rem 0}
}

/* ---------------- Buttons ---------------- */
.knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.7rem;font-family:var(--sans);font-weight:700;font-size:.84rem;letter-spacing:.13em;
  text-transform:uppercase;padding:1.1rem 2rem;border:1px solid transparent;
  text-decoration:none;cursor:pointer;overflow:hidden;
  transition:background .28s,color .28s,border-color .28s}
.knopf > *{position:relative;z-index:1}
.knopf--dunkel{background:var(--rot);color:#fff}
.knopf--dunkel:hover{background:#8d0f17;color:#fff}
.knopf--tel{background:var(--gruen);color:#fff}
.knopf--tel:hover{background:var(--gruen-mittel);color:#fff}
.knopf--wa{background:#1d6b42;color:#fff}
.knopf--wa:hover{background:#258552;color:#fff}
.knopf--linie{background:transparent;color:var(--gruen);border-color:var(--linie-stark)}
.knopf--linie:hover{background:var(--gruen);color:#fff;border-color:var(--gruen)}
.knopf--rand{background:var(--blatt);color:var(--tinte);border-color:var(--linie)}
.knopf--rand:hover{border-color:var(--gruen);color:var(--gruen)}
.knopf svg{width:1.05em;height:1.05em;flex:none;fill:currentColor}

/* ---------------- Bühne ---------------- */
.buehne{position:relative;overflow:hidden;background:#12100d;isolation:isolate}
.buehne__hintergrund{position:absolute;inset:0;z-index:0;display:block}
.buehne__hintergrund img{width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.06);animation:heranfahren 2.4s cubic-bezier(.22,1,.36,1) forwards}
@keyframes heranfahren{ to{ transform:scale(1) } }
@media (prefers-reduced-motion:reduce){
  .buehne__hintergrund img{animation:none;transform:none}
}
/* Dunkler Schleier, damit die Schrift auf jedem Bild lesbar bleibt */
.buehne__schleier{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(10,9,7,.92) 0%, rgba(10,9,7,.80) 34%,
                    rgba(10,9,7,.42) 62%, rgba(10,9,7,.30) 100%),
    linear-gradient(to top, rgba(10,9,7,.55), transparent 45%)}
.buehne__innen{position:relative;z-index:3;
  padding-block:clamp(4rem,10vw,8rem) clamp(3.5rem,8vw,7rem);
  min-height:min(78vh,780px);display:flex;flex-direction:column;justify-content:center}
.buehne .marke{color:var(--gold-hell)}
.buehne__jahre::after{background:rgba(233,198,106,.4)}
.buehne h1{color:#fff;margin-bottom:.2em;font-size:clamp(3rem,8.5vw,7rem);
  line-height:.92;letter-spacing:-.035em;
  text-shadow:0 2px 40px rgba(0,0,0,.45)}
.buehne h1 em{display:block;font-style:italic;color:var(--gold-hell);
  margin-left:clamp(0px,6vw,6rem)}
.buehne__text{color:rgba(255,255,255,.88);font-size:clamp(1.08rem,1rem + .5vw,1.32rem);
  max-width:36ch;line-height:1.55;margin-top:1.6rem;
  text-shadow:0 1px 24px rgba(0,0,0,.5)}
.buehne__tasten{display:flex;flex-wrap:wrap;gap:.8rem;margin:2.4rem 0 1.6rem}
.buehne__fakten{display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:center;
  list-style:none;font-size:.8rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.75);margin:0;padding:0}
.buehne__fakten a{color:#fff;text-decoration:none}
.buehne__fakten a:hover{color:var(--gold-hell)}
.buehne .status{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);
  color:#fff;backdrop-filter:blur(4px)}
.knopf--hell{background:rgba(255,255,255,.95);color:var(--gruen)}
.knopf--hell:hover{background:#fff;color:var(--gruen)}

/* Maskottchen als Akzent auf dem Bild */
.buehne__kueken{position:absolute;right:clamp(1rem,4vw,5rem);bottom:0;z-index:2;
  width:clamp(140px,17vw,270px);pointer-events:none;
  filter:drop-shadow(0 0 50px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(233,198,106,.25))}
@media (max-width:900px){
  .buehne__innen{min-height:0;
    padding-block:clamp(2.6rem,8vw,4rem) clamp(9.5rem,32vw,11.5rem)}
  .buehne h1 em{margin-left:0}
  /* Küken sitzt unter dem Inhalt, damit es die Schaltflächen nicht verdeckt */
  .buehne__kueken{width:auto;height:clamp(120px,30vw,160px);right:1rem;bottom:.4rem}
  .buehne__text{font-size:1.05rem;margin-top:1.2rem;max-width:30ch}
  .buehne__tasten{margin:1.8rem 0 1.2rem}
  .buehne__tasten .knopf{flex:1 1 9rem;justify-content:center;padding:1rem .8rem;font-size:.74rem}
  .buehne__jahre{font-size:.6rem;letter-spacing:.2em}
  .buehne__fakten{gap:.35rem 1.2rem;font-size:.72rem;max-width:64%}
}
@media (max-width:400px){
  .buehne__kueken{height:110px;right:.4rem;bottom:.3rem}
  .buehne__fakten{max-width:100%;flex-direction:column;align-items:flex-start;gap:.4rem}
  .buehne__innen{padding-bottom:8.5rem}
}

.status{display:inline-flex;align-items:center;gap:.6rem;font-size:.8rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinte)}
.status__punkt{width:.5rem;height:.5rem;border-radius:50%;background:var(--leise);flex:none}
.status[data-offen="ja"] .status__punkt{background:#1c8f4e;
  box-shadow:0 0 0 3px rgba(28,143,78,.2)}
.status[data-offen="nein"] .status__punkt{background:var(--rot)}

/* ---------------- Laufband ---------------- */
.laufband{background:var(--gruen);color:var(--grund);overflow:clip;
  padding-block:1.15rem;border-block:1px solid var(--gruen)}
.laufband__spur{display:flex;width:max-content;animation:laufen 46s linear infinite}
.laufband:hover .laufband__spur{animation-play-state:paused}
.laufband__satz{display:flex;align-items:center;gap:2.2rem;padding-right:2.2rem;
  font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;white-space:nowrap;color:rgba(250,247,240,.9)}
.laufband__satz em{font-style:normal;color:var(--gold-hell);font-size:.52rem}
@keyframes laufen{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){
  .laufband__spur{animation:none}
  .laufband{padding-inline:var(--gasse)}
}

/* ---------------- Abschnitte ---------------- */
.abschnitt{padding-block:clamp(3.2rem,7vw,6rem);position:relative}
.abschnitt--tief{background:var(--tief)}
.abschnitt--knapp{padding-block:clamp(3rem,6vw,5rem)}
.abschnitt__kopf{max-width:none;margin-bottom:clamp(2.4rem,5vw,4rem);position:relative;z-index:2}
.abschnitt__kopf h2{max-width:min(100%,42rem);text-wrap:balance}
.abschnitt__kopf > p{max-width:46ch}
.abschnitt__kopf p{color:var(--still);font-size:clamp(1.05rem,1rem + .3vw,1.2rem)}

/* Grosse Ziffer am Rand, wie im Magazin */
.ornament{display:flex;align-items:center;gap:1.2rem;margin:0;border:0;padding:0}
.ornament::before,.ornament::after{content:"";height:1px;flex:1;background:var(--gold-still)}
.ornament span{color:var(--gold);font-size:.6rem;letter-spacing:.5em}

/* ---------------- Mittagsangebot ---------------- */
.mittag{position:relative;overflow:hidden;background:var(--gruen);color:var(--grund);
  padding-block:clamp(3.4rem,8vw,6.5rem);isolation:isolate}
.mittag__bild{position:absolute;inset:0;z-index:0;display:block}
.mittag__bild img{width:100%;height:100%;object-fit:cover}
.mittag::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(95deg, rgba(10,32,20,.95) 0%, rgba(12,30,20,.86) 40%,
                    rgba(14,20,14,.55) 72%, rgba(14,18,13,.42) 100%),
    linear-gradient(to bottom, rgba(12,14,10,.35), rgba(12,14,10,.15))}
.mittag > .huelle{position:relative;z-index:2}
.mittag::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.mittag__block{position:relative;z-index:2;max-width:46ch}
.mittag__preis{font-family:var(--display);font-weight:700;line-height:.85;
  font-size:clamp(4rem,10vw,8rem);color:var(--gold-hell);margin:0 0 .2em;
  letter-spacing:-.04em}
.mittag__preis span{font-size:.34em;vertical-align:.9em;margin-left:.1em;letter-spacing:0}
.mittag h2{color:var(--grund);margin-bottom:.4em}
.mittag p{color:rgba(250,247,240,.82);margin:0;max-width:42ch}
.mittag .mittag__preis{color:var(--gold-hell);max-width:none}
.mittag strong{color:#fff}


/* ---------------- Karten und Raster ---------------- */
.raster{display:grid;gap:clamp(1.6rem,3.5vw,3rem)}
.raster--drei{grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.raster--zwei{grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr))}

.block{background:none;border:0;border-top:1px solid var(--linie-stark);
  padding:1.6rem 0 0}
.block h3{margin-top:0;color:var(--gruen)}
.block p{color:var(--still);font-size:.99rem}
.block p:last-child,.block ul:last-child{margin-bottom:0}
.abschnitt--tief .block{border-top-color:var(--gold-still)}

.zeiten{list-style:none;margin:0;padding:0}
.zeiten li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;
  border-bottom:1px solid var(--linie);font-size:.98rem;color:var(--still)}
.zeiten li:last-child{border-bottom:0}
.zeiten li[data-heute="ja"]{color:var(--gruen);font-weight:700}
.zeiten__tag{flex:none}
.zeiten__zeit{text-align:right;font-variant-numeric:tabular-nums}
.zeiten--stapel li{display:block}
.zeiten--stapel .zeiten__zeit{text-align:left;display:block}
@media (max-width:560px){
  .zeiten li{display:block}
  .zeiten .zeiten__zeit{text-align:left;display:block}
}

.gebiete{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .9rem}
.gebiete li{font-size:.94rem;color:var(--still);position:relative;padding-left:1rem}
.gebiete li::before{content:"";position:absolute;left:0;top:.72em;width:4px;height:4px;
  background:var(--gold);border-radius:50%}

/* ---------------- Fotos ---------------- */
.foto{position:relative;overflow:hidden;border:0;background:var(--tief);margin:0}
.foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.foto:hover img{transform:scale(1.04)}
.foto--breit{aspect-ratio:16/7}
.foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:3rem 1.4rem 1.1rem;
  font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(12,10,8,.8),transparent)}

/* ---------------- Speisekarte ---------------- */
.karte-nav{position:sticky;top:var(--kopf-h);z-index:80;
  background:rgba(250,247,240,.93);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linie);
  padding-block:.9rem}
.karte-nav__innen{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}
.karte-nav__gruppe{display:flex;gap:1.5rem;flex-wrap:wrap}
.karte-nav a{position:relative;font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--still);
  padding:.3rem 0}
.karte-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold);transition:right .3s}
.karte-nav a:hover{color:var(--gruen)}
.karte-nav a:hover::after{right:0}

.suche{margin-left:auto;position:relative;flex:1 1 16rem;max-width:24rem}
.suche input{width:100%;font:inherit;font-size:.97rem;padding:.6rem 2.4rem .6rem 0;
  border:0;border-bottom:1px solid var(--linie-stark);background:transparent;
  color:var(--tinte);border-radius:0}
.suche input:focus{outline:0;border-bottom-color:var(--gold)}
.suche input::placeholder{color:var(--leise)}
.suche input::-webkit-search-cancel-button,
.suche input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.suche__leeren{position:absolute;right:0;top:50%;transform:translateY(-50%);border:0;
  background:transparent;font-size:1.3rem;line-height:1;color:var(--still);cursor:pointer;
  padding:.2rem .4rem}
@media (max-width:860px){ .suche{margin-left:0;max-width:none;flex-basis:100%} }

.gruppe{margin-bottom:clamp(3.5rem,7vw,6rem)}
.gruppe__kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:1.6rem;border-bottom:1px solid var(--linie-stark);
  padding-bottom:1rem}
.gruppe__kopf h2{margin:0}
.gruppe__rechts{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;
  padding-bottom:.35rem}
.gruppe__masse{display:flex;gap:1rem;font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--leise);white-space:nowrap}
.gruppe__masse span{min-width:3.6rem;text-align:right}
.gruppe__bestellen{position:relative;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gruen);text-decoration:none;padding-bottom:.2rem;
  border-bottom:1px solid var(--gold-still)}
.gruppe__bestellen::after{content:"→";transition:transform .3s}
.gruppe__bestellen:hover{border-bottom-color:var(--gruen)}
.gruppe__bestellen:hover::after{transform:translateX(4px)}
@media (max-width:640px){
  .gruppe__kopf{align-items:flex-start}
  .gruppe__rechts{width:100%;justify-content:space-between;padding-bottom:0}
}

.gerichte{list-style:none;margin:0;padding:0}
.gericht{display:flex;gap:1.2rem;align-items:flex-start;padding:1.05rem 0;
  border-bottom:1px solid var(--linie)}
.gericht__zeile{display:flex;align-items:baseline;gap:.8rem;width:100%}
.gericht__fuehrung{flex:1 1 1.5rem;min-width:1rem;
  border-bottom:1px dotted rgba(23,21,18,.28);transform:translateY(-.25em)}
.gericht:last-child{border-bottom:0}
.gericht__bild{flex:none;width:72px;height:72px;overflow:hidden;background:var(--tief);
  align-self:center}
.gericht__bild img{width:100%;height:100%;object-fit:cover}
.gericht__bild--leer{background:transparent}
.gericht__nr{font-style:normal;display:inline-block;min-width:3.1rem;
  font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--gold);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.gericht__name{text-wrap:pretty}
.gericht__mitte{flex:1 1 auto;min-width:0}
.gericht__name{font-family:var(--serif);font-weight:700;font-size:1.16rem;display:block;
  color:var(--tinte);overflow-wrap:anywhere;letter-spacing:-.005em}
.gericht__zutaten{display:block;color:var(--still);font-size:.93rem;line-height:1.5;
  margin-top:.15rem}
.gericht__code{font-size:.7rem;color:var(--leise);letter-spacing:.06em;
  text-transform:uppercase;margin-top:.2rem;display:block}
.gericht__preise{flex:none;display:flex;gap:1.4rem;font-variant-numeric:tabular-nums;
  font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--tinte);
  white-space:nowrap}
.gericht__preise span{min-width:3.6rem;text-align:right}
.gericht__preise span:only-child{min-width:0}
.gericht[hidden]{display:none}
.gruppe[data-leer="ja"]{display:none}

.kein-treffer{display:none;padding:3rem 0;font-family:var(--display);
  font-size:clamp(1.4rem,3vw,2rem);color:var(--still)}
body[data-treffer="0"] .kein-treffer{display:block}

.hinweis{border:0;border-left:2px solid var(--gold);padding:.3rem 0 .3rem 1.4rem;
  margin:1.8rem 0 0;font-size:.93rem;color:var(--still);background:none}
.hinweis strong{color:var(--tinte)}
.hinweis p:last-child{margin-bottom:0}
.hinweis--warnung{border-left-color:var(--rot)}
.hinweis--warnung strong{color:var(--rot)}

.legende{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  gap:2.4rem 3rem}
.legende h3{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:1.2em}
.legende ul{list-style:none;margin:0;padding:0;font-size:.9rem;color:var(--still);
  columns:2;column-gap:1.6rem}
.legende li{break-inside:avoid;margin-bottom:.35rem}
.legende b{color:var(--tinte);font-family:var(--display);margin-right:.3em}

/* ---------------- Zwei-Klick-Karte ---------------- */
.zweiklick{position:relative;border:1px solid var(--linie);overflow:hidden;
  background:var(--tief);min-height:320px;display:flex;align-items:center;
  justify-content:center}
.zweiklick__hinweis{padding:2rem;text-align:center;max-width:40ch}
.zweiklick__hinweis p{font-size:.92rem;color:var(--still);margin-inline:auto}
.zweiklick iframe{width:100%;height:420px;border:0;display:block;filter:grayscale(.25)}

/* ---------------- Fuß ---------------- */
.fuss{position:relative;z-index:2;background:var(--gruen);color:rgba(250,247,240,.72);
  padding-block:clamp(3.5rem,8vw,6rem) 1.8rem;overflow:hidden}
.fuss a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.fuss a:hover{color:var(--gold-hell);border-bottom-color:var(--gold-hell)}
.fuss h3{color:var(--gold-hell);font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;margin-bottom:1.4em}
.fuss__raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));
  gap:2.6rem}
.fuss__marke{font-family:var(--display);color:#fff;line-height:.95;margin:0 0 1.2rem}
.fuss__marke span{display:block;font-size:.62rem;letter-spacing:.32em;color:var(--gold-hell);
  font-family:var(--sans);font-weight:700;text-transform:uppercase;margin-bottom:.5rem}
.fuss__marke b{font-size:clamp(2rem,4vw,2.8rem);font-weight:700;letter-spacing:-.025em}
.fuss__liste{list-style:none;margin:0;padding:0}
.fuss__liste li{margin-bottom:.5rem;font-size:.95rem}
.fuss__tel{font-family:var(--display);font-size:clamp(1.5rem,3vw,2rem);font-weight:700;
  color:#fff;text-decoration:none;display:inline-block;margin-bottom:.7rem;
  letter-spacing:-.02em;border:0}
.fuss__tel:hover{color:var(--gold-hell)}
.fuss .zeiten li{border-bottom-color:rgba(255,255,255,.14);color:rgba(250,247,240,.72);
  font-size:.93rem}
.fuss .zeiten li[data-heute="ja"]{color:var(--gold-hell)}
.fuss .zeiten .zeiten__zeit{color:rgba(250,247,240,.6)}
.fuss__unten{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.16);margin-top:3.2rem;padding-top:1.5rem;
  font-size:.78rem;letter-spacing:.06em}
.fuss__unten nav{display:flex;gap:1.6rem;flex-wrap:wrap}
.fuss__unten a{border:0}

/* ---------------- Mobile Aktionsleiste ---------------- */
.aktionsleiste{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;gap:0;
  background:var(--gruen);
  padding:0 0 env(safe-area-inset-bottom);
  box-shadow:0 -10px 30px -20px rgba(23,21,18,.8)}
.aktionsleiste .knopf{flex:1 1 0;padding:1.05rem .6rem;font-size:.74rem;border:0}
.aktionsleiste .knopf--rand{background:transparent;color:#fff;
  border-left:1px solid rgba(255,255,255,.2)}
.aktionsleiste .knopf--rand:hover{background:rgba(255,255,255,.1);color:#fff}
@media (max-width:900px){ .aktionsleiste{display:flex} body{padding-bottom:3.6rem} }
body[data-seite="bestellen"] .aktionsleiste{display:none}
body[data-seite="bestellen"]{padding-bottom:0}

/* ---------------- Rechtstexte ---------------- */
.rechtstext{padding-block:clamp(3rem,7vw,5.5rem)}
.rechtstext .huelle{max-width:var(--schmal)}
.rechtstext h1{margin-bottom:.7em}
.rechtstext h2{font-family:var(--serif);font-size:clamp(1.2rem,1.1rem + .7vw,1.5rem);
  margin-top:2.6em;letter-spacing:-.005em}
.rechtstext h3{font-size:1.06rem;margin-top:1.8em}
.rechtstext p,.rechtstext li{color:var(--still)}
.rechtstext ul{padding-left:1.2rem}
.rechtstext li{margin-bottom:.4rem}
.rechtstext address{font-style:normal}
.todo{background:#f5dd9c;color:#5a3d00;font-weight:700;padding:.1em .45em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* =========================================================
   BESTELLFUNKTION
   ========================================================= */
.best-kopf{padding-block:clamp(3rem,7vw,5rem) clamp(1.6rem,3vw,2.4rem);
  background:linear-gradient(175deg,var(--grund),var(--tief))}
.best-kopf h1{margin-bottom:.3em}
.best-kopf > .huelle > p{color:var(--still);font-size:clamp(1.04rem,1rem + .3vw,1.18rem);
  max-width:44ch}
.best-ablauf{list-style:none;display:flex;flex-wrap:wrap;gap:.8rem 2.4rem;margin:2rem 0 0;
  padding:0;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--still)}
.best-ablauf li{display:flex;align-items:baseline;gap:.6rem}
.best-ablauf b{font-family:var(--display);color:var(--gold);font-size:1.25rem;
  letter-spacing:0}

.best-nav{position:sticky;top:var(--kopf-h);z-index:80;background:rgba(250,247,240,.93);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linie);padding-block:.85rem}
.best-nav__innen{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.kat-tab{position:relative;font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;border:0;background:transparent;
  color:var(--still);padding:.4rem 0;margin-right:1.4rem;cursor:pointer}
.kat-tab::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold);transition:right .3s}
.kat-tab:hover{color:var(--gruen)}
.kat-tab[aria-pressed="true"]{color:var(--gruen)}
.kat-tab[aria-pressed="true"]::after{right:0;background:var(--gruen);height:2px}

.best-liste{display:grid;gap:0;margin-top:clamp(1.6rem,4vw,2.6rem);
  border-top:1px solid var(--linie)}
.best-artikel{display:flex;gap:1.2rem;align-items:center;width:100%;text-align:left;
  background:transparent;border:0;border-bottom:1px solid var(--linie);
  padding:1.1rem .6rem;cursor:pointer;font:inherit;color:var(--tinte);
  transition:background .25s,padding-left .25s}
.best-artikel:hover{background:var(--blatt);padding-left:1.1rem}
.best-artikel__bild{flex:none;width:66px;height:66px;overflow:hidden;background:var(--tief)}
.best-artikel__bild img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.best-artikel:hover .best-artikel__bild img{transform:scale(1.06)}
.best-artikel__mitte{flex:1 1 auto;min-width:0}
.best-artikel__nr{font-style:normal;display:inline-block;min-width:2.7rem;color:var(--gold);
  font-weight:700;font-family:var(--display)}
.best-artikel__name{display:block;font-family:var(--serif);font-weight:700;font-size:1.12rem}
.best-artikel__desc{display:block;color:var(--still);font-size:.9rem;line-height:1.45;
  overflow-wrap:anywhere;margin-top:.1rem}
.best-artikel__preis{flex:none;font-family:var(--serif);font-weight:700;font-size:1.02rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}

#korb-leiste{position:fixed;left:0;right:0;bottom:0;z-index:96;display:flex;align-items:center;
  gap:1rem;justify-content:space-between;width:min(100% - 2rem,36rem);margin:0 auto 1.2rem;
  background:var(--gruen);color:#fff;border:0;cursor:pointer;padding:1.15rem 1.6rem;
  font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 22px 44px -22px rgba(18,63,38,.95);transition:background .25s}
#korb-leiste[hidden]{display:none}
#korb-leiste:hover{background:var(--rot)}
body[data-korb="voll"]{padding-bottom:5.5rem}

/* ---------------- Overlay ---------------- */
.overlay{position:fixed;inset:0;z-index:130;background:rgba(23,21,18,.6);
  display:flex;align-items:flex-end;justify-content:center;padding:0;
  backdrop-filter:blur(3px)}
.overlay[hidden]{display:none}
.overlay__panel{background:var(--grund);width:min(100%,44rem);max-height:92vh;
  overflow-y:auto;border:0;padding:clamp(1.5rem,4vw,2.6rem);padding-bottom:0;
  position:relative;box-shadow:0 -30px 80px -30px rgba(23,21,18,.5)}
@media (min-width:720px){
  .overlay{align-items:center;padding:2rem}
  .overlay__panel{max-height:88vh;box-shadow:0 40px 90px -40px rgba(23,21,18,.6)}
}
.overlay__zu{position:absolute;right:.8rem;top:.7rem;z-index:5;border:0;background:transparent;
  font-size:1.9rem;line-height:1;cursor:pointer;color:var(--still);padding:.2rem .6rem;
  transition:color .2s,transform .3s}
.overlay__zu:hover{color:var(--rot);transform:rotate(90deg)}
.overlay__panel h2{margin-top:0;padding-right:2.5rem;
  font-size:clamp(1.5rem,3.4vw,2.1rem)}

.konfig__bild{margin:-.6rem 0 1.4rem;overflow:hidden;aspect-ratio:16/8;background:var(--tief)}
.konfig__bild img{width:100%;height:100%;object-fit:cover}
.konfig__desc{color:var(--still);margin-bottom:.4em}
.konfig__codes{font-size:.72rem;color:var(--leise);letter-spacing:.06em;text-transform:uppercase}
.konfig__hint{font-size:.86rem;color:var(--still);margin:.5rem 0 .9rem}
.konfig__block{border:0;border-top:1px solid var(--linie);margin:1.7rem 0 0;padding:1.4rem 0 0}
.konfig__block legend{font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);padding:0}
.konfig__block textarea,.feld input,.feld select,.feld textarea{width:100%;font:inherit;
  padding:.75rem 0;border:0;border-bottom:1px solid var(--linie-stark);background:transparent;
  color:var(--tinte);border-radius:0}
.konfig__block textarea{border:1px solid var(--linie-stark);padding:.75rem .9rem}
.feld input:focus,.feld select:focus,.feld textarea:focus,
.konfig__block textarea:focus{outline:0;border-bottom-color:var(--gold)}
.konfig__block textarea::placeholder,.feld textarea::placeholder,
.feld input::placeholder{color:var(--leise)}

.wahl{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr))}
.wahl--eng{grid-template-columns:repeat(auto-fit,minmax(min(9rem,100%),1fr))}
.wahl--eng .wahl__opt{font-size:.89rem;padding:.6rem .7rem}
.wahl__opt{display:flex;align-items:center;gap:.7rem;background:var(--blatt);
  border:1px solid var(--linie);padding:.75rem .9rem;cursor:pointer;font-size:.95rem;
  transition:border-color .2s,background .2s}
.wahl__opt:hover{border-color:var(--gold-still)}
.wahl__opt:has(input:checked){border-color:var(--gruen);background:rgba(18,63,38,.05)}
.wahl__opt input{accent-color:var(--gruen);flex:none;width:1rem;height:1rem}
.wahl__opt span{display:flex;justify-content:space-between;gap:.5rem;width:100%;
  align-items:baseline;min-width:0;overflow-wrap:anywhere}
.wahl__opt b{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--gold);
  font-weight:700;font-size:.85rem}

.feld{display:block;margin-bottom:1.1rem}
.feld > span{display:block;font-size:.66rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--leise);margin-bottom:.2rem}
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.konfig__fuss{display:flex;gap:.8rem;align-items:center;margin-top:2rem;
  position:sticky;bottom:0;z-index:2;background:var(--grund);flex-wrap:wrap;
  margin-inline:calc(-1 * clamp(1.5rem,4vw,2.6rem));
  padding:1.1rem clamp(1.5rem,4vw,2.6rem) calc(1.5rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--linie)}
.konfig__fuss--statisch{position:static;border-top:0}
.konfig__fuss .knopf{flex:1 1 auto;justify-content:center}
.konfig__add{display:flex;justify-content:space-between;gap:1rem}
.menge{display:flex;align-items:center;gap:.2rem;border:1px solid var(--linie-stark);
  flex:none}
.menge button{border:0;background:transparent;font-size:1.2rem;line-height:1;cursor:pointer;
  padding:.7rem .95rem;color:var(--tinte)}
.menge button:hover{color:var(--gruen)}
.menge output{min-width:1.6rem;text-align:center;font-weight:700;
  font-variant-numeric:tabular-nums}

.korb__liste{list-style:none;margin:1.4rem 0 0;padding:0}
.korb__zeile{display:flex;gap:.9rem;padding:1.1rem 0;border-bottom:1px solid var(--linie)}
.korb__menge{font-family:var(--display);font-weight:700;flex:none;min-width:2rem;
  font-variant-numeric:tabular-nums;color:var(--gold)}
.korb__mitte{flex:1 1 auto;min-width:0}
.korb__mitte b{font-family:var(--serif);font-size:1.05rem}
.korb__detail{display:block;font-size:.87rem;color:var(--still);line-height:1.5;
  margin-top:.15rem}
.korb__aktionen{display:flex;gap:1.1rem;margin-top:.5rem}
.korb__aktionen button{border:0;background:transparent;padding:0;font:inherit;font-size:.7rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gruen);
  cursor:pointer;border-bottom:1px solid var(--gold-still)}
.korb__aktionen button:hover{border-bottom-color:var(--gruen)}
.korb__preis{flex:none;font-family:var(--serif);font-weight:700;
  font-variant-numeric:tabular-nums}
.korb__summe{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem;
  font-family:var(--display);font-size:1.6rem;max-width:none;color:var(--gruen);
  letter-spacing:-.02em}

.kasse__summe{margin-top:2rem;border-top:1px solid var(--gold-still);padding-top:1.1rem}
.kasse__summe p{display:flex;justify-content:space-between;gap:1rem;margin:0 0 .45rem;
  max-width:none;color:var(--still);font-size:.97rem}
.kasse__gesamt{font-family:var(--display);font-size:1.7rem;font-weight:700;
  color:var(--gruen)!important;letter-spacing:-.02em;margin-top:.6rem!important}
.kasse__warnung{background:#f5dd9c;color:#5a3d00;padding:.75rem .95rem;font-size:.9rem;
  display:block!important}
.kasse__recht{font-size:.82rem;color:var(--still);margin-top:1.4rem;max-width:none;
  line-height:1.6}
.kasse__fehler{background:rgba(163,20,28,.07);color:var(--rot);border-left:2px solid var(--rot);
  padding:.8rem 1rem;font-size:.92rem;font-weight:600;max-width:none}

.fertig__pin{display:flex;flex-direction:column;gap:.3rem;background:var(--gruen);
  padding:1.4rem 1.6rem;margin:0 3rem 1.6rem 0;max-width:none;position:relative}
.fertig__pin span{font-size:.62rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}
.fertig__pin b{font-family:var(--display);font-size:3.2rem;line-height:1;letter-spacing:.1em;
  color:var(--gold-hell)}
.fertig__text{background:var(--blatt);border:1px solid var(--linie);padding:1.2rem;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.82rem;
  line-height:1.65;white-space:pre-wrap;word-break:break-word;max-height:17rem;
  overflow-y:auto;margin:1.4rem 0;color:var(--tinte)}
.fertig__tasten{display:flex;flex-wrap:wrap;gap:.7rem}
.fertig__tasten .knopf{flex:1 1 12rem;justify-content:center}

/* ---------------- Gesamtbewertung ---------------- */
.bewertung{background:var(--tief);padding-block:clamp(3.4rem,7vw,5.5rem);text-align:center}
.bewertung__innen{display:flex;flex-direction:column;align-items:center}
.bewertung__sterne{position:relative;display:inline-block;margin:0 0 1rem;
  font-size:clamp(1.4rem,3vw,1.8rem);line-height:1;letter-spacing:.24em}
.bewertung__leer{color:var(--gold-still)}
.bewertung__voll{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;
  color:var(--gold)}
.bewertung__satz{font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.4rem);
  color:var(--gruen);margin:0 0 .6rem;max-width:none;letter-spacing:-.025em;line-height:1.1}
.bewertung__stand{color:var(--leise);font-size:.35em;font-family:var(--sans);
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  display:block;margin-top:.7rem}
.bewertung__zusatz{color:var(--still);font-size:.96rem;max-width:50ch;margin:0 auto}
.bewertung__tasten{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem;
  justify-content:center}

/* ---------------- Hinweis zur Datenspeicherung ---------------- */
.consent{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:120;max-width:42rem;
  margin-inline:auto;background:var(--gruen);color:rgba(250,247,240,.82);border:0;
  padding:1.6rem 1.8rem;box-shadow:0 30px 60px -28px rgba(23,21,18,.7)}
.consent[hidden]{display:none}
.consent h2{font-family:var(--serif);font-size:1.1rem;margin:0 0 .5em;color:#fff}
.consent p{font-size:.88rem;margin:0 0 1.3rem;max-width:none;line-height:1.6}
.consent strong{color:#fff}
.consent__tasten{display:flex;flex-wrap:wrap;gap:.6rem}
.consent .knopf{padding:.8rem 1.4rem;font-size:.72rem}
.consent .knopf--tel{background:var(--gold-hell);color:#2a1f06}
.consent .knopf--tel:hover{background:#dbb968;color:#2a1f06}
.consent .knopf--rand{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.consent .knopf--rand:hover{border-color:#fff;color:#fff}
body[data-korb="voll"] .consent{bottom:5.8rem}
body[data-overlay="auf"] .consent{display:none}
@media (max-width:900px){ .consent{bottom:4.4rem} }
body[data-seite="bestellen"] .consent{bottom:1rem}
@media (max-width:560px){
  .consent{padding:1.2rem 1.3rem;left:.7rem;right:.7rem}
  .consent p{font-size:.84rem;margin-bottom:1rem}
  .consent .knopf{flex:1 1 auto;padding:.75rem .9rem}
}

@media (max-width:520px){
  .gericht{gap:.8rem;padding:.95rem 0}
  .gericht__bild{width:56px;height:56px}
  /* Auf schmalen Displays steht die Nummer als kleines Label ueber dem
     Namen, damit Name und Preis nebeneinander in eine Zeile passen. */
  .gericht__nr{display:block;min-width:0;font-family:var(--sans);font-size:.66rem;
    font-weight:700;letter-spacing:.18em;margin-bottom:.15rem}
  .gericht__name{font-size:1.03rem}
  .gericht__zeile{align-items:flex-end}
  .gericht__fuehrung{transform:translateY(-.35em)}
  .gericht__preise{gap:.7rem;font-size:.97rem}
  .gericht__preise span{min-width:0}
  .gericht__zeile{gap:.5rem}
  .gericht__fuehrung{min-width:.6rem}
  .gruppe__masse{gap:.7rem;font-size:.6rem}
  .gruppe__masse span{min-width:3rem}
  .best-artikel{padding:.9rem .3rem;gap:.8rem}
  .best-artikel:hover{padding-left:.3rem}
  .best-artikel__bild{width:54px;height:54px}
  .best-artikel__name{font-size:1.02rem}
  .best-artikel__nr{min-width:2.3rem;font-size:.95rem}
}
@media (max-width:420px){
  .legende ul{columns:1}
  .best-ablauf{flex-direction:column;gap:.45rem}
}

@media print{
  .kopf,.aktionsleiste,.overlay,.karte-nav,.best-nav,.fuss__unten,.consent,.laufband,
  .buehne__tasten,#korb-leiste{display:none!important}
  body::after{display:none}
  html,body{background:#fff;color:#000;padding:0}
  [data-reveal]{opacity:1!important;transform:none!important}
  .gericht{break-inside:avoid}
}

/* Bühne auf dem Handy straffen */
@media (max-width:900px){
  .marke{margin-bottom:1.1rem}
  .buehne__jahre::before{display:none}
  .buehne__jahre{font-size:.62rem;letter-spacing:.24em}
  .buehne__text{margin-top:1.3rem}
  .buehne__tasten{gap:.6rem;margin:1.6rem 0 1.1rem}
  .buehne__tasten .knopf{flex:1 1 9rem;padding:1rem .8rem;font-size:.74rem}
  .buehne__fakten{gap:.4rem 1.2rem;font-size:.72rem}
}

/* Lange URLs in den Rechtstexten dürfen umbrechen */
.rechtstext p,.rechtstext li,.rechtstext a,.rechtstext address{overflow-wrap:anywhere}
.laufband{max-width:100vw}

/* =========================================================
   POLITUR
   ========================================================= */

/* Blockueberschriften sind jetzt h2, sollen aber weiter wie h3 wirken */
.block h2,.legende h3{font-family:var(--serif);
  font-size:clamp(1.16rem,1.05rem + .5vw,1.38rem);line-height:1.2;letter-spacing:-.008em;
  margin:0 0 .6em;color:var(--gruen)}
.legende h3{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:1.2em}
.fuss h2{color:var(--gold-hell);font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;margin:0 0 1.4em}

/* Textmarkierung in der Hausfarbe */
::selection{background:var(--gold);color:#fff}

/* Aktionsschaltflaechen: leicht gerundet, mit ruhigem Schatten und Hebung */
.knopf,.kopf__tel,#korb-leiste{border-radius:5px}
.knopf--dunkel,.knopf--tel,.knopf--wa,.kopf__tel{
  box-shadow:0 6px 18px -10px rgba(23,21,18,.55);
  transition:background .28s,color .28s,border-color .28s,transform .28s,box-shadow .28s}
.knopf--dunkel:hover,.knopf--tel:hover,.knopf--wa:hover,.kopf__tel:hover{
  transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(23,21,18,.5)}
.knopf--dunkel:active,.knopf--tel:active,.knopf--wa:active,.kopf__tel:active{
  transform:translateY(0);box-shadow:0 4px 12px -8px rgba(23,21,18,.55)}
.knopf--linie,.knopf--rand{border-radius:5px;transition:background .28s,color .28s,
  border-color .28s,transform .28s}
.knopf--linie:hover,.knopf--rand:hover{transform:translateY(-1px)}
#korb-leiste{transition:background .25s,transform .25s,box-shadow .25s}
#korb-leiste:hover{transform:translateY(-2px)}
.aktionsleiste .knopf{border-radius:0;box-shadow:none}
.aktionsleiste .knopf:hover{transform:none}
@media (prefers-reduced-motion:reduce){
  .knopf:hover,#korb-leiste:hover{transform:none!important}
}

/* Fokus sichtbar, aber nicht ruppig */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.knopf:focus-visible,.kopf__tel:focus-visible{outline-offset:4px}

/* Laufband: an den Raendern weich auslaufen statt hart abschneiden */
.laufband{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5rem,
    #000 calc(100% - 5rem),transparent);
  mask-image:linear-gradient(to right,transparent,#000 5rem,
    #000 calc(100% - 5rem),transparent);
}
@media (max-width:640px){
  .laufband{-webkit-mask-image:linear-gradient(to right,transparent,#000 2rem,
    #000 calc(100% - 2rem),transparent);
    mask-image:linear-gradient(to right,transparent,#000 2rem,
    #000 calc(100% - 2rem),transparent)}
}

/* Absaetze schoener umbrechen lassen */
p,.gross,.buehne__text,.block p,.bewertung__zusatz{text-wrap:pretty}

/* Karten reagieren dezent */
.block{transition:border-top-color .3s}
.block:hover{border-top-color:var(--gold)}

/* Preis im Warenkorb-Button leicht abgesetzt */
.konfig__add b{padding-left:1rem;border-left:1px solid rgba(255,255,255,.28);
  font-variant-numeric:tabular-nums}

/* Eingabefelder: Uebergang beim Fokus */
.feld input,.feld select,.feld textarea,.suche input,.konfig__block textarea{
  transition:border-color .25s}

/* Zwei-Klick-Karte etwas einladender */
.zweiklick{transition:border-color .3s}
.zweiklick:hover{border-color:var(--gold-still)}

/* ---------------- Laden geschlossen ---------------- */
.geschlossen{background:var(--rot);color:#fff;padding-block:.95rem}
.geschlossen[hidden]{display:none}
.geschlossen__innen{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;
  font-size:.93rem}
.geschlossen strong{font-weight:700}
.geschlossen a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5);text-decoration:none;
  font-weight:700;white-space:nowrap}
.geschlossen a:hover{color:#fff;border-bottom-color:#fff}
.knopf[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none;box-shadow:none}
body[data-laden="zu"] #korb-leiste{background:var(--still)}

/* ---------------- Schaufenster auf der Startseite ---------------- */
.schaufenster{display:flex;flex-direction:column;gap:1px;background:var(--linie);
  margin-top:clamp(1.6rem,4vw,2.4rem);border-block:1px solid var(--linie)}
.schaufenster-reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--linie)}
/* Auf dem Handy nur die ersten zwei Bilder je Reihe, das dritte bleibt im
   Markup (fuer SEO und fuer breitere Fenster) und wird nur optisch versteckt. */
@media (max-width:700px){
  .schaufenster-reihe{grid-template-columns:repeat(2,1fr)}
  .schaufenster-reihe > :nth-child(3){display:none}
}
.schaufenster__kachel{position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--grund);overflow:hidden}
.schaufenster__bild{display:block;aspect-ratio:1;overflow:hidden;background:var(--tief)}
.schaufenster__bild img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.schaufenster__kachel:hover .schaufenster__bild img{transform:scale(1.05)}
.schaufenster__fuss{display:grid;grid-template-columns:1fr auto;
  gap:.1rem .8rem;padding:.9rem clamp(.9rem,1.6vw,1.2rem) 1.1rem}
.schaufenster__nr{grid-column:1 / -1;font-family:var(--sans);font-size:.62rem;
  font-weight:700;letter-spacing:.2em;color:var(--gold)}
.schaufenster__name{font-family:var(--serif);font-size:clamp(.95rem,1.2vw,1.08rem);
  font-weight:700;color:var(--gruen);line-height:1.25}
.schaufenster__preis{font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--leise);white-space:nowrap}
.schaufenster__kachel::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 0 var(--gold);transition:box-shadow .3s;pointer-events:none}
.schaufenster__kachel:hover::after{box-shadow:inset 0 0 0 2px var(--gold)}

@media (max-width:520px){
  .schaufenster__fuss{flex-direction:column;gap:.15rem;padding:.8rem .9rem 1rem}
  .schaufenster__name{font-size:.98rem}
}

/* Öffnungszeiten: alle Tage gleich kräftig, heute nur markiert */
.zeiten--kraeftig li{color:var(--tinte);font-weight:600}
.zeiten--kraeftig .zeiten__zeit{color:var(--still);font-weight:400}
.zeiten--kraeftig li[data-heute="ja"]{color:var(--gruen)}
.zeiten--kraeftig li[data-heute="ja"] .zeiten__zeit{color:var(--gruen);font-weight:600}
.zeiten__heute{display:none;margin-left:.6rem;font-size:.6rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--gold);
  padding:.16em .5em;border-radius:2px;vertical-align:.12em}
.zeiten li[data-heute="ja"] .zeiten__heute{display:inline-block}
.fuss .zeiten--kraeftig li{color:rgba(250,247,240,.92)}
.fuss .zeiten--kraeftig li[data-heute="ja"],
.fuss .zeiten--kraeftig li[data-heute="ja"] .zeiten__zeit{color:var(--gold-hell)}
.fuss__mittag{margin:1.1rem 0 0;font-size:.88rem;color:var(--gold-hell);
  border-top:1px solid rgba(255,255,255,.14);padding-top:1rem}
/* picture verhaelt sich wie das img darin */
.gericht__bild picture,.best-artikel__bild picture,.schaufenster__bild picture,
.konfig__bild picture,.foto picture{display:block;width:100%;height:100%}
.gericht__bild img,.best-artikel__bild img,.schaufenster__bild img,
.konfig__bild img{width:100%;height:100%;object-fit:cover}

/* ---------------- Zeitungsausschnitt ---------------- */
.zeitung picture{display:block;overflow:hidden;background:var(--tief);
  box-shadow:0 30px 60px -34px rgba(23,21,18,.55)}
.zeitung img{width:100%;height:auto;display:block}

/* Zentrierte Variante für Abschnitte, die um ein Bild herum aufgebaut sind */
.huelle--mitte{text-align:center}
.huelle--mitte .raster{text-align:left}
.abschnitt__kopf--mitte{margin-inline:auto}
.abschnitt__kopf--mitte h2,.abschnitt__kopf--mitte > p{margin-inline:auto}
.abschnitt__kopf--mitte .marke{justify-content:center}
.abschnitt__kopf--mitte .marke::before{display:none}

/* Zeitungsausschnitt mittig */
.zeitung{margin:0 auto clamp(1rem,2vw,1.6rem);max-width:62rem;position:relative;
  text-align:center}
.zeitung figcaption{margin-top:1rem;font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--leise)}
@media (min-width:900px){ .zeitung{transform:none} .zeitung figcaption{transform:none} }

/* Hakenliste */
.liste-haken{list-style:none;margin:0;padding:0}
.liste-haken li{position:relative;padding-left:1.6rem;margin-bottom:.6rem;
  color:var(--still);font-size:.98rem}
.liste-haken li::before{content:"";position:absolute;left:0;top:.78em;width:.7rem;
  height:1px;background:var(--gold)}


/* ---------------- Bildband über die volle Breite ---------------- */
.bildband{margin:0;width:100%;overflow:hidden;background:var(--tief);position:relative}
.bildband img{width:100%;height:clamp(240px,34vw,460px);object-fit:cover;display:block;
  transform:scale(1.04);transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.bildband.sichtbar img{transform:scale(1)}
.bildband::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(23,21,18,.18),transparent 30%,
             transparent 70%,rgba(23,21,18,.18))}

/* ---------------- Kopfzeile über der Bildbühne ---------------- */
body[data-buehne="bild"] .kopf{background:transparent;backdrop-filter:none;
  -webkit-backdrop-filter:none;border-bottom-color:transparent;
  transition:background .35s ease,backdrop-filter .35s ease,border-color .35s ease}
body[data-buehne="bild"] .kopf__markenzeichen{
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)) drop-shadow(0 0 14px rgba(0,0,0,.35))}
body[data-buehne="bild"] .kopf__nav a{color:rgba(255,255,255,.9)}
body[data-buehne="bild"] .kopf__nav a:hover,
body[data-buehne="bild"] .kopf__nav a[aria-current="page"]{color:#fff}
body[data-buehne="bild"] .kopf__nav a::after{background:var(--gold-hell)}
body[data-buehne="bild"] .kopf__tel{background:rgba(255,255,255,.14);color:#fff;
  backdrop-filter:blur(8px);box-shadow:none;border:1px solid rgba(255,255,255,.28)}
body[data-buehne="bild"] .kopf__tel:hover{background:#fff;color:var(--gruen);
  border-color:#fff}
/* Sobald gescrollt wird, verhält sich der Kopf wieder normal */
body[data-buehne="bild"] .kopf[data-gescrollt="ja"]{background:rgba(250,247,240,.9);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--linie)}
body[data-buehne="bild"] .kopf[data-gescrollt="ja"] .kopf__markenzeichen{filter:none}
body[data-buehne="bild"] .kopf[data-gescrollt="ja"] .kopf__nav a{color:var(--tinte)}
body[data-buehne="bild"] .kopf[data-gescrollt="ja"] .kopf__nav a[aria-current="page"]{color:var(--gruen)}
body[data-buehne="bild"] .kopf[data-gescrollt="ja"] .kopf__nav a::after{background:var(--gold)}
body[data-buehne="bild"] .kopf[data-gescrollt="ja"] .kopf__tel{background:var(--gruen);
  color:#fff;border-color:transparent;backdrop-filter:none}
body[data-buehne="bild"] .kopf[data-gescrollt="ja"] .kopf__tel:hover{background:var(--rot)}
/* Bühne beginnt dann unter dem Kopf, nicht daneben */
body[data-buehne="bild"] .buehne{margin-top:calc(-1 * var(--kopf-h))}
body[data-buehne="bild"] .buehne__innen{padding-top:calc(var(--kopf-h) + clamp(3rem,7vw,6rem))}