/* Bäckerei Kühnast · Runde 2 · 29.09.2026
   Grundordnung wie alle Musterseiten: Musterleiste, Kopf (einzige klebende Leiste am Rechner),
   erster Bildschirm mit Foto, Signatur „Heute frisch“ mit Vorbestellung, Leistungen,
   Vertrauen, Kontakt, Fuß. Der Grund bleibt zu jeder Tageszeit hell.

   Farben (aus der Firmen-DNA): Grund Mehlweiß, Wechselfläche Honig, dunkler Fuß Nachtkruste.
   Eckenradius (R106), feste Zuordnung:
   - Fotos: 4px
   - Eingabefelder: 8px
   - Karten und Flächen (Ware, Korb, Anfrage, Blatt): 12px
   - Knöpfe und Reiter: Pille
   Verläufe: keine. Milchglas: keins. Farbbalken an der Seite: keine. */

@font-face { font-family: "Alegreya"; src: url("schriften/alegreya-latin-wght-normal.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: optional; }
@font-face { font-family: "Alegreya"; src: url("schriften/alegreya-latin-wght-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: optional; }
@font-face { font-family: "Alegreya Sans"; src: url("schriften/alegreya-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: optional; }
@font-face { font-family: "Alegreya Sans"; src: url("schriften/alegreya-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: optional; }
@font-face { font-family: "Alegreya Sans"; src: url("schriften/alegreya-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: optional; }
@font-face { font-family: "Alegreya Sans"; src: url("schriften/alegreya-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: optional; }

:root {
  --mehlweiss: #F6F5F0;
  --honig: #F4E8D0;
  --karte: #FFFDF9;
  --krustenbraun: #5B351A;
  --krume: #2A211B;
  --nachtkruste: #1E1712;
  --senf: #E0A526;
  --senf-tief: #7A5500;
  --mehl-hell: #F3EDE2;
  --leise: #5A5047;
  --linie: rgba(42, 33, 27, .16);
  --linie-stark: rgba(42, 33, 27, .32);
  --gruen: #2F6B3A;

  --schrift-kopf: "Alegreya", Georgia, "Times New Roman", serif;
  --schrift: "Alegreya Sans", "Segoe UI", Arial, sans-serif;
  --rand: clamp(16px, 4vw, 40px);
  --breite: 77.5rem;
  --kopf-h: 60px;
  --r-foto: 4px;
  --r-feld: 8px;
  --r-karte: 12px;
  --abstand: clamp(3.5rem, 2rem + 4vw, 5.5rem);
  color-scheme: light;
}
@media (min-width: 64em) { :root { --kopf-h: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--mehlweiss); color: var(--krume);
  font-family: var(--schrift); font-size: 1.0625rem; line-height: 1.55;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--schrift-kopf); color: var(--krustenbraun); line-height: 1.1; margin: 0; font-weight: 700; }
h2, h3, h4 { hyphens: auto; overflow-wrap: break-word; }
h1 { hyphens: manual; overflow-wrap: break-word; }
h2 { font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); letter-spacing: -.005em; }
p { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--senf-tief); outline-offset: 2px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-weight: 700; margin-bottom: .5rem; }
.mitte { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.nur-js { display: none !important; }
html.js .nur-js { display: revert !important; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bild-hinweis { margin-top: .9rem; font-size: .9375rem; color: var(--leise); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .55rem 1.25rem; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--schrift); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; text-decoration: none; text-align: center;
}
.knopf-voll { background: var(--senf); color: var(--nachtkruste); }
.knopf-voll:hover { background: #EBB23B; }
.knopf-linie { background: transparent; border-color: var(--krustenbraun); color: var(--krustenbraun); }
.knopf-linie:hover { background: var(--krustenbraun); color: var(--mehl-hell); }
.knopf-gross { min-height: 54px; padding-inline: 1.9rem; font-size: 1.125rem; }
.knopf-breit { width: 100%; }

/* ---------- Musterleiste (R109, R60): oben, nicht klebend ---------- */
.nw-musterleiste { background: #14100C; color: #fff; font-size: .875rem; line-height: 1.35; padding: .15rem 0; }
.nw-musterleiste .mitte { display: flex; flex-wrap: wrap; gap: 0 1.5rem; align-items: center; justify-content: space-between; }
.nw-musterleiste .nw-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .4rem; }
.nw-musterleiste a { color: #fff; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; border-radius: 999px; }
.nw-musterleiste a:hover { background: rgba(255, 255, 255, .14); }
.nw-musterleiste a.nw-cta { background: var(--mehl-hell); color: var(--nachtkruste); text-decoration: none; font-weight: 700; }
.nw-musterleiste .nw-ki { color: #F1C664; font-weight: 700; }
.nw-musterleiste .nw-lang { display: none; }
.nw-zeit { align-items: center; gap: .45rem; margin-right: .4rem; color: #E9E1D3; }
html.js .nw-zeit.nur-js { display: inline-flex !important; }
.nw-zeit select {
  min-height: 44px; padding: 0 2rem 0 .8rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35);
  background: #2B221B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F3EDE2' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .75rem center / .7rem;
  color: #fff; font-size: .875rem; appearance: none; cursor: pointer;
}
@media (min-width: 80em) { .nw-musterleiste .nw-lang { display: inline; } }
@media (max-width: 59.99em) { .nw-musterleiste .nw-mittel { display: none; } }
@media (max-width: 47.99em) {
  .nw-musterleiste { font-size: .8125rem; }
  .nw-musterleiste .mitte { gap: 0 .4rem; }
  .nw-musterleiste a { padding: 0 .55rem; }
  .nw-zeit-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 23.99em) {
  .nw-zeit { margin-right: 0; }
  .nw-zeit select { padding: 0 1.5rem 0 .55rem; background-position: right .5rem center; }
  .nw-musterleiste a { padding: 0 .4rem; }
}
@media print { .nw-musterleiste { display: none; } }
.sprung { position: absolute; left: .5rem; top: -4rem; z-index: 80; background: var(--nachtkruste); color: #fff; padding: .7rem 1rem; border-radius: 999px; }
.sprung:focus { top: .5rem; }

/* ---------- Kopf: eine Zeile, klebt ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--mehlweiss); border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; gap: 1rem; height: var(--kopf-h); }
.marke { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--krustenbraun); min-height: 44px; margin-right: auto; }
.marke-zeichen { width: 2.1rem; height: auto; color: var(--senf); flex: none; }
.marke-text { display: flex; flex-direction: column; line-height: 1; }
.marke-name { font-family: var(--schrift-kopf); font-style: italic; font-weight: 700; font-size: 1.75rem; }
.marke-zusatz { font-size: .8125rem; color: var(--leise); margin-top: .2rem; letter-spacing: .02em; }
.menue { display: none; }
.menue a { display: flex; align-items: center; min-height: 44px; padding: 0 .75rem; text-decoration: none; font-weight: 500; border-radius: 999px; color: var(--krume); }
.menue a:hover { background: var(--honig); }
.kopf-telefon { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 44px; min-height: 44px; border-radius: 999px; color: var(--krustenbraun); text-decoration: none; font-weight: 700; }
.kopf-telefon svg { width: 1.3rem; height: 1.3rem; }
.kopf-nummer { display: none; }
.kopf-knopf { display: none; white-space: nowrap; }
.menue-knopf { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--linie-stark); border-radius: 999px; background: transparent; }
.menue-striche, .menue-striche::before, .menue-striche::after { display: block; width: 18px; height: 2px; background: var(--krume); position: relative; content: ""; }
.menue-striche::before { position: absolute; top: -6px; }
.menue-striche::after { position: absolute; top: 6px; }
@media (max-width: 69.99em) {
  .menue.offen { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: var(--kopf-h); background: var(--mehlweiss); border-bottom: 1px solid var(--linie); padding: .5rem var(--rand) 1rem; box-shadow: 0 12px 24px -16px rgba(30, 23, 18, .4); }
  .menue.offen a { min-height: 48px; font-size: 1.125rem; border-radius: var(--r-feld); }
}
@media (min-width: 64em) { .kopf-knopf { display: inline-flex; } }
@media (min-width: 70em) {
  .menue { display: flex; gap: .15rem; margin-right: .5rem; }
  .menue-knopf { display: none; }
}
@media (min-width: 84em) {
  .kopf-nummer { display: inline; }
  .kopf-telefon { padding: 0 .6rem; }
}
@media (max-width: 22em) { .marke-zusatz { display: none; } .marke-name { font-size: 1.5rem; } }

/* ---------- Erster Bildschirm (Einstieg C, 01.10.2026): Foto bzw. Video im Hintergrund, Schrift darauf ----------
   Handy/Tablet: Bild oben, Status und Überschrift in Weiß auf dem Verlauf, Satz und Knöpfe darunter.
   Rechner: Bild über die volle Breite, der ganze Text links auf einem dunklen Verlauf. Das Video legt sich über das Foto,
   sobald es läuft; ohne Video (weniger Bewegung, Datensparen, kein JavaScript) bleibt das Foto. */
.held { display: grid; grid-template-columns: minmax(0, 1fr); }
.held-bild { position: relative; grid-row: 1; grid-column: 1; aspect-ratio: 1 / 1; width: 100%; overflow: hidden; background: var(--nachtkruste); }
.held-bild img, .held-video { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.held-video { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.held-video.laeuft { opacity: 1; }
.held-bild::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(20, 14, 9, .88) 0%, rgba(20, 14, 9, .5) 40%, rgba(20, 14, 9, 0) 70%); }
.ki-zeichen { position: absolute; right: .6rem; bottom: .6rem; background: rgba(20, 16, 12, .78); color: #fff; font-size: .75rem; padding: .15rem .5rem; border-radius: 999px; }
.held-bild .ki-zeichen { z-index: 3; left: .6rem; right: auto; top: .6rem; bottom: auto; }
.video-knopf { position: absolute; z-index: 3; right: .6rem; top: .6rem; min-height: 44px; padding: 0 1rem; border: 0; border-radius: 999px;
  background: rgba(20, 16, 12, .78); color: #fff; font: inherit; font-size: .875rem; cursor: pointer; }
.video-knopf:hover { background: rgba(20, 16, 12, .92); }
.video-knopf:focus-visible { outline-color: #fff; }
.held-text { display: contents; }
.held-kopf { grid-row: 1; grid-column: 1; align-self: end; position: relative; z-index: 2; padding: 0 var(--rand) 1.1rem; }
.held-status { display: flex; align-items: center; gap: .5rem; font-size: 1rem; color: rgba(255, 255, 255, .92); margin-bottom: .6rem; }
.punkt { width: .6rem; height: .6rem; border-radius: 50%; background: #CFC6BB; flex: none; }
html[data-offen="ja"] .punkt { background: #7FD08F; }
.held h1 { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.5rem); letter-spacing: -.01em; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.held-satz { grid-row: 2; font-size: 1.1875rem; margin: 0; padding: 1.25rem var(--rand) 0; max-width: calc(34rem + 2 * var(--rand)); }
.held-handeln { grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.4rem; padding: 0 var(--rand) 2rem; }
.telefon-link { display: inline-flex; align-items: baseline; gap: .4rem; min-height: 44px; align-items: center; color: var(--krustenbraun); text-decoration: none; }
.telefon-link strong { font-size: 1.1875rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.telefon-wort { color: var(--leise); }
@media (max-width: 47.99em) {
  .held-handeln .knopf-gross { flex: 1 1 100%; }
}
@media (min-width: 40em) and (max-width: 63.99em) { .held-bild { aspect-ratio: 16 / 9; } }
@media (min-width: 64em) {
  .held {
    grid-template-columns: [rand-l] minmax(var(--rand), 1fr) [text] minmax(0, 30rem) 3rem [bild] minmax(0, 44.5rem) [rand-r] minmax(var(--rand), 1fr);
    height: clamp(34rem, calc(100svh - 48px - var(--kopf-h) - 80px), 52rem);
  }
  .held-bild { grid-column: 1 / -1; grid-row: 1; aspect-ratio: auto; height: 100%; }
  .held-bild img, .held-video { object-position: 60% 40%; }
  .held-bild::after { background: linear-gradient(90deg, rgba(20, 14, 9, .9) 0%, rgba(20, 14, 9, .74) 30%, rgba(20, 14, 9, .25) 47%, rgba(20, 14, 9, 0) 58%); }
  .held-bild .ki-zeichen { left: auto; right: .6rem; top: .6rem; }
  .video-knopf { top: auto; bottom: .9rem; right: .9rem; }
  .held-text { display: block; grid-column: text; grid-row: 1; align-self: center; position: relative; z-index: 2; padding: 0 0 1rem; }
  .held-kopf { padding: 0; }
  .held-satz { padding: 0; margin-top: 1rem; color: rgba(255, 255, 255, .92); }
  .held-handeln { padding: 0; margin-top: 1.6rem; }
  .held-text .telefon-link, .held-text .telefon-wort { color: #fff; }
  .held-text :focus-visible { outline-color: #fff; }
  .held h1 { font-size: clamp(2.6rem, 1.2rem + 2.2vw, 3.6rem); }
}

/* ---------- Signatur: Heute frisch (Auslage mit Vorbestellen) ---------- */
.auslage { background: var(--honig); padding: 2.5rem 0 var(--abstand); }
.auslage-kopf { margin-bottom: 1.25rem; }
.auslage-satz { margin-top: .6rem; font-family: var(--schrift-kopf); font-style: italic; font-size: 1.1875rem; color: var(--krume); max-width: 44rem; }
.auslage-satz .wer { font-family: var(--schrift); font-style: normal; font-size: .9375rem; color: var(--leise); white-space: nowrap; }
.auslage-satz .wer::before { content: "· "; }
.reiter { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
html.js .reiter.nur-js { display: flex !important; }
.reiter button { min-height: 44px; padding: 0 clamp(.7rem, 2.5vw, 1.1rem); font-size: clamp(.9375rem, .85rem + .4vw, 1.0625rem); border-radius: 999px; border: 1.5px solid var(--linie-stark); background: transparent; font-weight: 500; }
.reiter button[aria-selected="true"] { background: var(--krustenbraun); border-color: var(--krustenbraun); color: var(--mehl-hell); }
.gruppe + .gruppe { margin-top: 1.5rem; }
.gruppe-titel { font-size: 1.375rem; margin-bottom: .75rem; }
html.js .gruppe-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.js .gruppe + .gruppe { margin-top: 0; }
.waren { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ware {
  display: grid; grid-template-columns: 76px auto minmax(0, 1fr); grid-template-areas: "bild text text" "bild preis knopf";
  column-gap: .85rem; row-gap: .35rem; align-items: center;
  background: var(--karte); border-radius: var(--r-karte); padding: .6rem .7rem .6rem .6rem;
}
.ware > * { min-width: 0; }
.ware img { grid-area: bild; align-self: start; width: 76px; height: 76px; object-fit: cover; border-radius: var(--r-foto); }
.ware-text { grid-area: text; }
.ware h4 { font-size: 1.125rem; line-height: 1.2; }
.bestand { font-size: .9375rem; color: var(--leise); margin-top: .15rem; }
.bestand.knapp { color: var(--senf-tief); font-weight: 700; }
.preis { grid-area: preis; font-family: var(--schrift-kopf); font-weight: 700; font-size: 1.125rem; color: var(--krume); white-space: nowrap; }
.ware .preis { text-align: left; }
.ware-knopf { grid-area: knopf; justify-self: end; }
.in-korb { min-height: 44px; padding: 0 .95rem; border-radius: 999px; border: 1.5px solid var(--krustenbraun); background: transparent; color: var(--krustenbraun); font-weight: 700; font-size: .9375rem; white-space: nowrap; }
.in-korb:hover { background: var(--krustenbraun); color: var(--mehl-hell); }
.menge { display: inline-flex; align-items: center; gap: .15rem; }
.menge button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--senf); color: var(--nachtkruste); font-size: 1.35rem; font-weight: 700; line-height: 1; }
.menge output { min-width: 1.8rem; text-align: center; font-weight: 700; font-size: 1.0625rem; }

.korb { background: var(--karte); border-radius: var(--r-karte); padding: 1.25rem; margin-top: 1.5rem; box-shadow: 0 1px 0 var(--linie); }
.korb h3 { font-size: 1.5rem; }
.korb-regel { margin-top: .35rem; color: var(--leise); }
.korb-innen { margin-top: 1rem; }
html.js .korb-innen.nur-js { display: grid !important; gap: 1rem; }
.wahl { display: grid; gap: .4rem; }
.wahl-zwei { grid-template-columns: 1fr 1fr; }
.wahl-tage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wahl label { position: relative; display: block; }
.wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: .25rem .4rem; border-radius: var(--r-feld); border: 1.5px solid var(--linie-stark); text-align: center; line-height: 1.15; font-weight: 500; }
.wahl small { font-size: .8125rem; font-weight: 400; color: var(--leise); }
.wahl input:checked + span { background: var(--krustenbraun); border-color: var(--krustenbraun); color: var(--mehl-hell); }
.wahl input:checked + span small { color: var(--mehl-hell); }
.wahl input:focus-visible + span { outline: 3px solid var(--senf-tief); outline-offset: 2px; }
.wahl input:disabled + span { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.korb-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.korb-liste li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--linie); }
.korb-liste li:empty { display: none; }
.korb-leer { color: var(--leise); }
.korb-summe { font-weight: 700; font-size: 1.0625rem; }
.korb-summe:empty { display: none; }
.korb-summe .warnung { display: block; font-weight: 400; color: var(--senf-tief); margin-top: .2rem; }

@media (min-width: 40em) and (max-width: 63.99em) {
  .waren { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64em) {
  .auslage-raster { display: grid; grid-template-columns: minmax(0, 1fr) 21.5rem; gap: 2.5rem; align-items: start; }
  .waren { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
  .ware { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bild bild" "text preis" "knopf knopf"; padding: .6rem .6rem .7rem; row-gap: .5rem; align-items: start; }
  .ware img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .ware-text { padding-left: .25rem; }
  .ware .preis { padding-right: .25rem; text-align: right; }
  .ware-knopf { justify-self: stretch; }
  .ware-knopf .in-korb { width: 100%; }
  .ware-knopf.menge { justify-content: space-between; background: var(--honig); border-radius: 999px; }
  .korb { position: sticky; top: calc(var(--kopf-h) + 1rem); margin-top: 0; max-height: calc(100vh - var(--kopf-h) - 2rem); overflow-y: auto; overscroll-behavior: contain; }
  html.js .korb-innen.nur-js { gap: .75rem; }
}

/* ---------- Leistungen ---------- */
.angebot { padding: var(--abstand) 0; }
.karten { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.karte { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 1rem; align-items: start; }
.karte > * { min-width: 0; }
.karte img { grid-row: 1 / span 3; width: 112px; height: 112px; object-fit: cover; border-radius: var(--r-foto); }
.karte h3 { font-size: 1.3125rem; }
.karte p { margin-top: .35rem; }
.karte-fuss { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
.karte .preis { font-size: 1.0625rem; color: var(--senf-tief); text-align: left; white-space: normal; }
.karte-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--krustenbraun); }
@media (min-width: 40em) {
  .karten { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .karte { display: flex; flex-direction: column; }
  .karte img { width: 100%; height: auto; aspect-ratio: 3 / 2; margin-bottom: .9rem; }
  .karte-fuss { margin-top: auto !important; padding-top: .6rem; border-top: 1px solid var(--linie); }
  .karte p:not(.karte-fuss) { flex: 1 0 auto; margin-bottom: .8rem; }
}
@media (min-width: 64em) {
  .karten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Über uns und Stimmen ---------- */
.ueber { padding: 0 0 var(--abstand); }
.ueber-raster { display: grid; gap: 1.5rem; }
.ueber-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-foto); }
.bildzeile { font-size: .9375rem; color: var(--leise); margin-top: .5rem; }
.ki-klein { font-size: .8125rem; }
.ueber-text h2 { margin-bottom: 1.1rem; }
.ueber-text > p { margin-top: .9rem; max-width: 36rem; }
.ilka { display: flex; align-items: center; gap: 1rem; }
.ilka img { width: 84px; height: 84px; object-fit: cover; object-position: center 20%; border-radius: 50%; }
.ilka p { line-height: 1.35; }
.ilka strong { font-family: var(--schrift-kopf); font-size: 1.25rem; color: var(--krustenbraun); }
.stimmen-titel { font-size: 1.5rem; margin-top: 3rem; }
.stimmen { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.stimmen li { border-top: 2px solid var(--senf); padding-top: 1rem; }
.stimmen blockquote { margin: 0; font-family: var(--schrift-kopf); font-style: italic; font-size: 1.1875rem; line-height: 1.4; }
.stimmen .wer { margin-top: .6rem; color: var(--leise); font-size: .9375rem; }
@media (min-width: 48em) { .stimmen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
@media (min-width: 64em) {
  .ueber-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: center; }
}

/* ---------- Läden, Zeiten, Anfrage ---------- */
.laeden { background: var(--honig); padding: var(--abstand) 0; }
.laeden-raster { display: grid; gap: 2rem; margin-top: 1.75rem; }
.laden img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-foto); margin-bottom: .9rem; }
.laden h3 { font-size: 1.5rem; }
.laden-art { color: var(--leise); }
.laden-jetzt { margin-top: .5rem; font-weight: 700; }
.laden-jetzt:empty { display: none; }
.laden-jetzt.offen { color: var(--gruen); }
.laden address { font-style: normal; margin-top: .4rem; }
.zeiten { display: grid; grid-template-columns: auto 1fr; gap: .15rem 1rem; margin: .6rem 0 0; }
.zeiten dt { color: var(--leise); }
.zeiten dd { margin: 0; font-variant-numeric: tabular-nums; }
.anfrage { background: var(--karte); border-radius: var(--r-karte); padding: 1.25rem; }
.anfrage h3 { font-size: 1.5rem; }
.laeden-info { display: grid; gap: .9rem; border-top: 1px solid var(--linie-stark); padding-top: 1.1rem; }
.laeden-info p { line-height: 1.4; }
.laeden-info strong { font-size: .9375rem; color: var(--leise); font-weight: 500; }
.laeden-info a[href^="mailto"] { font-size: 1rem; }
.laeden-info a { display: inline-block; min-height: 44px; line-height: 44px; font-weight: 700; font-size: 1.125rem; color: var(--krustenbraun); overflow-wrap: anywhere; }
#anfrage-form { display: grid; gap: .8rem; margin-top: 1rem; }
.felder-zwei { display: grid; gap: .8rem; }
.feld { display: grid; gap: .3rem; }
.feld > span:first-child { font-weight: 500; font-size: .9375rem; }
.feld small { color: var(--leise); font-weight: 400; }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 44px; padding: .5rem .75rem; border-radius: var(--r-feld);
  border: 1.5px solid var(--linie-stark); background: #fff; font-size: 1rem;
}
.feld textarea { resize: vertical; min-height: 4.5rem; }
.fehler { color: #9B2C1C; font-size: .9375rem; }
.rueckmeldung { background: var(--honig); border-radius: var(--r-feld); padding: .75rem .9rem; font-size: 1rem; }
.anfrage .rueckmeldung { background: var(--mehlweiss); }
@media (min-width: 40em) {
  .laeden-raster { grid-template-columns: 1fr 1fr; }
  .anfrage, .laeden-info { grid-column: 1 / -1; }
  .laeden-info { grid-template-columns: max-content max-content minmax(0, 1fr); gap: 2rem; }
  .felder-zwei { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64em) {
  .laeden-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem; align-items: start; }
  .laeden-info { grid-column: 1 / 3; grid-row: 2; }
  .anfrage { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- Fuß ---------- */
.fuss { background: var(--nachtkruste); color: var(--mehl-hell); padding: 3rem 0 2rem; }
.fuss a { color: var(--mehl-hell); }
.fuss-raster { display: grid; gap: 1.5rem; }
.fuss-marke { font-family: var(--schrift-kopf); font-style: italic; font-weight: 700; font-size: 2rem; line-height: 1; margin-bottom: .5rem; }
.fuss p a { display: inline-block; min-height: 44px; line-height: 44px; }
.fuss-satz { color: #F1C664; font-family: var(--schrift-kopf); font-style: italic; font-size: 1.125rem; margin-top: .3rem; }
.fuss-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; align-content: start; }
.fuss-links a, .fuss-knopf { display: inline-flex; align-items: center; min-height: 44px; }
.fuss-knopf { background: transparent; border: 0; padding: 0; color: var(--mehl-hell); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; font-size: 1rem; }
.musterhinweis { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(243, 237, 226, .2); font-size: .875rem; color: #CBBFAE; max-width: 60rem; }
@media (min-width: 48em) { .fuss-raster { grid-template-columns: 1.2fr 1fr 1fr; } }

/* ---------- Handy: Korbleiste unten, nur mit Inhalt ---------- */
.korbleiste {
  position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 52px; padding: .5rem .6rem .5rem 1.1rem; border-radius: 999px;
  background: var(--nachtkruste); color: var(--mehl-hell); text-decoration: none; font-weight: 700;
  box-shadow: 0 8px 24px -8px rgba(30, 23, 18, .5);
}
.korbleiste-weiter { background: var(--senf); color: var(--nachtkruste); border-radius: 999px; padding: .45rem .9rem; white-space: nowrap; }
@media (min-width: 64em) { .korbleiste { display: none !important; } }

/* ---------- Kündigungsblatt ---------- */
.blatt { width: min(32rem, calc(100vw - 2rem)); border: 0; border-radius: var(--r-karte); padding: 0; background: var(--karte); color: var(--krume); }
.blatt::backdrop { background: rgba(30, 23, 18, .55); }
.blatt-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--linie); }
.blatt-kopf h2 { font-size: 1.5rem; }
.schliessen { min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--linie-stark); background: transparent; font-weight: 500; }
.blatt-inhalt { display: grid; gap: .9rem; padding: 1.25rem; }

/* ---------- Impressum und Datenschutz ---------- */
.zurueck { flex: none; }
.rechtsseite { padding: 2.5rem 0 var(--abstand); }
.rechtsseite .mitte { max-width: calc(46rem + 2 * var(--rand)); }
.rechtsseite h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.vorspann { font-size: 1.1875rem; margin-top: 1rem; }
.rechtsseite section { margin-top: 2rem; }
.rechtsseite h2 { font-size: 1.375rem; margin-bottom: .5rem; }
.rechtsseite a { display: inline-block; min-height: 44px; line-height: 44px; }
.erklaerung { margin-top: .5rem; color: var(--leise); font-size: 1rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .kopf, .korbleiste, .reiter { display: none !important; } }