/* Sorrento — was kein Panel-Feld hat (E-059).
   Gold und Grün gibt es dort nicht, Überschriften lassen sich nicht
   kursiv stellen, und Größen als clamp() kennt kein Zahlenfeld. */
:root{
  --rot:#BD2F27; --rot-dunkel:#8E231D; --rot-tief:#6E1A15;
  --creme:#F1E9D1; --creme-hell:#FAF6EC;
  --tinte:#2B1512; --tinte-leise:#6B4A42;
  --gold:#D9A441; --gruen:#4C8A3F;
  --rand:clamp(1.15rem,5vw,3.5rem);
}
/* Display ist die kursive Serifenschrift der gedruckten Karte */
h1,h2,h3,h4,.uk-h1,.uk-h2,.uk-h3,.uk-h4{font-style:italic;line-height:.98;letter-spacing:-.005em}
h1,.uk-h1{font-size:clamp(2.1rem,1.5rem + 3vw,3.6rem)}
h2,.uk-h2{font-size:clamp(1.9rem,1.4rem + 2.4vw,3rem)}
h3,.uk-h3{font-size:clamp(1.7rem,1.3rem + 2vw,2.7rem)}
body{font-size:clamp(1rem,.95rem + .25vw,1.09rem)}
/* Fokus bleibt sichtbar — 3 px Gold, nicht wegstylen */
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:3px}
/* Knöpfe sind Pillen */
.uk-button{border-radius:999px;border:2px solid currentColor;font-weight:700;padding:.68rem 1.35rem;text-transform:none}
.uk-button-primary{border-color:var(--creme)}

/* ---- Kopf des Onepagers ---- */
.kopf{padding:clamp(1.8rem,6vw,3.6rem) 0 clamp(1.4rem,4vw,2.4rem);text-align:center;
  background:radial-gradient(60% 70% at 50% 18%,rgba(255,228,180,.13),transparent 70%)}
.marke{display:block;width:min(100%,var(--marke-breite,30rem));margin:0 auto;color:var(--creme)}
.marke svg{width:100%;height:auto;display:block}
.standort{margin:.7rem 0 0;font-family:fraunces-variable,Georgia,serif;font-style:italic;font-weight:700;
  font-size:1.05rem;letter-spacing:.22em;opacity:.75}
.aktionen{margin-top:clamp(1.4rem,4vw,2rem);display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.knopf{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;font-weight:700;
  padding:.68rem 1.35rem;border-radius:999px;white-space:nowrap;font-size:1rem;
  border:2px solid var(--creme);transition:transform .12s ease}
.knopf:active{transform:translateY(1px)}
.knopf.voll{background:var(--creme);color:var(--rot)}
.knopf.voll:hover{background:var(--creme-hell)}
.knopf.leer:hover{background:rgba(241,233,209,.14)}
@media (prefers-reduced-motion:reduce){.knopf{transition:none}}

/* ---- Eröffnungsband, zwischen Marke und Knöpfen ---- */
.eroeffnung{margin:clamp(1.5rem,4vw,2.2rem) auto 0;display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:center;gap:.25rem .9rem;
  border-top:1px solid rgba(217,164,65,.5);border-bottom:1px solid rgba(217,164,65,.5);
  padding:.7rem 0;max-width:40rem}
.eroeffnung .gross{font-family:fraunces-variable,Georgia,serif;font-style:italic;font-weight:900;
  font-size:clamp(1.15rem,1rem + .8vw,1.5rem);color:var(--gold);line-height:1.1}
.eroeffnung .wann{font-weight:700}
.eroeffnung .gruss{font-family:fraunces-variable,Georgia,serif;font-style:italic;font-weight:700;opacity:.72;flex-basis:100%}

/* ---- Leiste, die beim Scrollen von oben hereinfährt ----
   Versteckt, bis das Skript sie am Wächter einschaltet. Ohne
   JavaScript fehlt sie — die Leiste am Handyfuß unten ist reines CSS
   und trägt dieselben beiden Wege. */
/* Der Wächter braucht eine messbare Höhe, sonst meldet der
   Beobachter in manchen Browsern nie eine Überschneidung. */
#kopfwaechter{display:block;height:1px}
.navleiste{position:fixed;top:0;left:0;right:0;z-index:60;visibility:hidden;
  background:var(--rot-dunkel);padding-top:env(safe-area-inset-top,0px);
  box-shadow:0 1px 0 rgba(241,233,209,.2),0 8px 20px rgba(0,0,0,.2);
  transform:translateY(-100%);transition:transform .22s ease,visibility .22s}
.navleiste.sichtbar{visibility:visible;transform:none}
@media (prefers-reduced-motion:reduce){.navleiste{transition:none}}
.navinhalt{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:.55rem;padding-bottom:.55rem}
.navmarke{display:block;flex:0 0 auto;line-height:0}
.navrechts{display:flex;align-items:center;gap:.5rem}
.navruf{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .7rem;
  border-radius:999px;text-decoration:none;color:inherit;font-weight:700;white-space:nowrap}
.navruf svg{width:1.05rem;height:1.05rem;flex:0 0 auto}
.navruf:hover{background:rgba(241,233,209,.14)}
.knopf.klein{padding:.42rem .95rem;font-size:.94rem}
/* Auf schmalen Handys bleibt nur das Telefonzeichen */
@media (max-width:460px){.navruf .nummer{display:none}.navruf{padding:.42rem .5rem}}
/* Pflichtseiten haben keinen Wächter: dort steht die Leiste von
   Anfang an und braucht ihren Platz. */
.leiste-oben body{padding-top:calc(env(safe-area-inset-top,0px) + 3.7rem)}

/* ---- Feste Leiste am Handy ---- */
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
  background:linear-gradient(180deg,#7C1D18,var(--rot-tief));padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -1px 0 rgba(241,233,209,.22)}
.leiste a{flex:1;text-align:center;padding:.95rem .5rem;text-decoration:none;
  font-weight:700;font-size:1rem;color:var(--creme);
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
.leiste .bestellen{background:var(--creme);color:var(--rot)}
body{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 4.6rem)}
@media (min-width:760px){.leiste{display:none}body{padding-bottom:0}}


/* ---- Faktenstreifen ---- */
.fakten{background:linear-gradient(180deg,var(--rot-dunkel),#7C1D18)}
.faktengitter{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 1rem;text-align:center;
  padding-top:clamp(1.6rem,4vw,2.4rem);padding-bottom:clamp(1.6rem,4vw,2.4rem)}
@media (min-width:820px){.faktengitter{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}}
.fakt .zahl{display:block;font-family:fraunces-variable,Georgia,serif;font-style:italic;font-weight:900;
  font-size:clamp(1.6rem,1.3rem + 1.4vw,2.3rem);color:var(--gold);line-height:1.05}
.fakt p{margin:.3rem 0 0;font-size:.88rem;opacity:.82;line-height:1.4}

/* ---- Drei Tafeln ---- */
.einleitung{max-width:44rem;margin:0 auto clamp(1.8rem,4vw,2.6rem);text-align:center}
.einleitung p{margin:1rem 0 0;opacity:.88;font-size:1.05rem}
.tafeln{display:grid;gap:1.3rem;grid-template-columns:1fr}
@media (min-width:780px){.tafeln{grid-template-columns:repeat(3,1fr)}}
.tafel{background:linear-gradient(158deg,#9A2720,var(--rot-tief));border-radius:8px;
  padding:1.7rem 1.6rem;border:1px solid rgba(241,233,209,.14);
  transition:transform .18s ease,border-color .18s ease}
.tafel:hover{transform:translateY(-3px);border-color:rgba(217,164,65,.5)}
@media (prefers-reduced-motion:reduce){.tafel{transition:none}.tafel:hover{transform:none}}
.tafelzeichen{width:2.9rem;height:2.9rem;border-radius:999px;background:rgba(217,164,65,.16);
  display:grid;place-items:center;margin-bottom:1.1rem;color:var(--gold)}
.tafelzeichen svg{width:1.4rem;height:1.4rem}
.tafel h3{font-size:1.4rem;margin:0 0 .45rem}
.tafel p{margin:0;opacity:.85;font-size:.96rem}
.tafel .dazu{margin-top:.9rem;font-weight:700;font-size:.94rem;opacity:1}
.tafel .dazu a{text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:1px}

/* ---- Abschluss ---- */
.aufruf{background:linear-gradient(180deg,#FFFDF6,var(--creme-hell));color:var(--tinte);
  border-radius:10px;padding:clamp(2rem,5vw,3.2rem) var(--rand);text-align:center}
.aufruf h2{color:var(--rot)}
.aufruf p{margin:.9rem auto 1.7rem;max-width:36rem;color:var(--tinte-leise)}
.aufrufknoepfe{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.aufruf .knopf{border-color:var(--rot)}
.aufruf .knopf.voll{background:var(--rot);color:var(--creme-hell)}
.aufruf .knopf.voll:hover{background:var(--rot-dunkel)}
.aufruf .knopf.leer{color:var(--rot)}
.aufruf .knopf.leer:hover{background:rgba(189,47,39,.08)}

/* ---- Vor Ort und Liefergebiet, vier Spalten ---- */
.vorortspalten{display:grid;gap:clamp(1.8rem,4vw,2.6rem);grid-template-columns:1fr}
@media (min-width:620px){.vorortspalten{grid-template-columns:repeat(2,1fr)}}
/* auto-fit, damit drei Spalten die Breite füllen statt ein Viertel
   leer zu lassen — die Spalte „Bezahlen" erscheint erst, wenn der
   Betrieb gesagt hat, was angenommen wird. */
@media (min-width:980px){.vorortspalten{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));align-items:start}}
.spalte{min-width:0}
.spalte h3{font-size:1.25rem;margin:0 0 1rem}

/* Die Woche als Tabelle — dieselbe Frage, ohne dass jemand rechnet */
.woche{margin:0;font-variant-numeric:tabular-nums}
.woche .tag{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.3rem 0;border-bottom:1px solid rgba(241,233,209,.12)}
.woche dt{margin:0}
.woche dd{margin:0;font-weight:700;text-align:right;white-space:nowrap}
.woche .ruht{font-weight:400;opacity:.5}
.woche .heute{color:var(--gold)}
.woche .heute dt::after{content:" — heute";font-size:.75em;opacity:.8;font-weight:400}

.spalte .frage{margin:0 0 .2rem;opacity:.82}
.spalte .nummer{margin:0;font-family:fraunces-variable,Georgia,serif;font-style:italic;font-weight:900;
  font-size:clamp(1.45rem,1.2rem + 1vw,1.9rem);line-height:1.1}
.spalte .nummer a{text-decoration:none;color:inherit}
.spalte .nummer a:hover{text-decoration:underline;text-underline-offset:.14em}
.anschrift{font-style:normal;margin-top:1.1rem;display:grid;gap:.2rem;opacity:.92}
.anschrift a{color:inherit;text-decoration:none}

.zahlarten{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.zahlarten li{border:1px solid rgba(241,233,209,.35);border-radius:999px;
  padding:.3rem .85rem;font-size:.9rem;font-weight:600}
.zahlhinweis{margin:1rem 0 0;font-size:.88rem;opacity:.78;line-height:1.5}

.ortsschild{margin:0;border-radius:8px;padding:1.1rem;
  background:linear-gradient(158deg,#9A2720,var(--rot-tief));border:1px solid rgba(241,233,209,.14)}
.ortsschild img{width:100%;height:auto;display:block}
.orte{margin:1rem 0 0;font-size:.88rem;opacity:.78;line-height:1.7}

/* ---- Kartenabschnitt ---- */
.gaenge{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .9rem}
.gaenge a{text-decoration:none;border-bottom:2px solid rgba(241,233,209,.35);padding-bottom:1px}
.gaenge a:hover{border-bottom-color:var(--creme)}
.kartenwege{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.7rem}

/* ---- Fuß ---- */
.fuss h3{font-size:.8rem;font-weight:700;font-style:normal;font-family:inherit;
  margin:0 0 .45rem;opacity:.72;letter-spacing:.06em;text-transform:uppercase}
.fussgitter{display:grid;gap:1.6rem}
@media (min-width:700px){.fussgitter{grid-template-columns:1.4fr 1fr 1fr}}
.fuss ul{list-style:none;margin:0;padding:0;line-height:1.9}
.fuss a{text-decoration:none;opacity:.92;color:inherit}
.fuss a:hover{text-decoration:underline;text-underline-offset:.15em}
.legende{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(241,233,209,.3)}
.legende-symbole span{display:inline-block;margin-right:1.2rem}
.legende-kuerzel{margin:.6rem 0 0;font-size:.82rem;opacity:.78;line-height:1.8}
.legende-eintrag{white-space:nowrap}
.legende-hinweis{margin:.9rem 0 0;font-size:.8rem;opacity:.6;max-width:62ch;line-height:1.6}