/* Erst das Rezept – Shop. Farben = Marke der Hauptseite. */
:root {
  --cream: #f7f1e5;
  --paper: #fffdf8;
  --ink: #173c32;
  --sage: #668263;
  --leaf: #285b45;
  --coral: #ec6b4d;
  --butter: #f2c95d;
  --line: #d9decf;
  --mint: #e4ede0;
  --peach: #f6d9cc;
  --muted: #4f6158;
  --coral-ink: #b8462b;
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: Arial, Helvetica, sans-serif;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 12px;
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--leaf); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid #315f50; outline-offset: 4px; border-radius: 6px; }
:where(a,button):active:not(:disabled) { filter:brightness(.94); transform:translateY(1px); }
@media(prefers-reduced-motion:reduce) { :where(a,button):active:not(:disabled) { transform:none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

/* ---------- Vorschau-Banner ---------- */
.vorschau-banner {
  background: var(--butter);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 9px 16px;
  border-bottom: 1px solid #d9b24a;
  line-height: 1.35;
}
.vorschau-banner span { display: inline-flex; align-items: center; gap: 8px; }
.vorschau-banner svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 639px) { .vorschau-banner { font-size: 13px; } }
.vorschau-banner[hidden] { display: none; }

/* ---------- Kopf ---------- */
.kopf { border-bottom: 1px solid var(--line); background: var(--cream); }
.kopf-innen { display: flex; align-items: center; gap: 12px; min-height: 72px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
.marke img { width: 42px; height: 42px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); }
.marke-text { font: 700 19px/1.1 var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.marke-text em { font-style: normal; color: var(--coral); }
.marke-shop {
  font: 700 12px/1 var(--sans); background: var(--leaf); color: #fff;
  padding: 6px 10px; border-radius: 99px; letter-spacing: .02em;
}
.kopf-links { display: flex; align-items: center; gap: 8px; }
.zurueck {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 14px/1 var(--sans); color: var(--ink); text-decoration: none;
  padding: 10px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper);
}
.zurueck:hover { border-color: var(--sage); color: var(--ink); }
.korb-knopf {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font: 700 14px/1 var(--sans); color: #fff; background: var(--leaf); text-decoration: none;
  padding: 10px 16px; border-radius: 99px;
}
.korb-knopf:hover { background: var(--ink); color: #fff; }
.korb-knopf svg { width: 18px; height: 18px; }
.korb-zahl {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px;
  background: var(--butter); color: var(--ink); font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.korb-zahl[data-leer="1"] { background: rgba(255,255,255,.18); color: #fff; }
@media (max-width: 639px) {
  .marke-text { font-size: 17px; }
  .marke img { width: 38px; height: 38px; }
  .kopf-innen { gap: 10px; }
  .kopf-links { width: 100%; justify-content: space-between; }
  .korb-text { display: none; }
}

/* ---------- Typografie ---------- */
.eyebrow {
  display: block; color: var(--coral-ink); font: 700 12px/1.3 var(--sans);
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px;
}
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; color: var(--ink); }
h1 { font-size: clamp(36px, 7vw, 64px); line-height: 1.02; margin: 0 0 18px; }
h2 { font-size: clamp(28px, 4.4vw, 42px); line-height: 1.08; margin: 0 0 10px; }
h3 { font-size: 24px; line-height: 1.15; margin: 0 0 8px; }
.lead { font-size: 17px; line-height: 1.65; color: var(--ink); max-width: 34em; margin: 0 0 24px; }
.klein { font-size: 13px; color: var(--muted); }
p { margin: 0 0 14px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px/1 var(--sans); text-decoration: none; cursor: pointer;
  padding: 15px 22px; border-radius: 99px; border: 2px solid var(--leaf);
  background: var(--leaf); color: #fff; transition: background .15s, border-color .15s;
}
.knopf:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.knopf:disabled { opacity: .55; cursor: not-allowed; }
.knopf-hell { background: var(--paper); color: var(--ink); border: 1px solid var(--line); padding: 16px 22px; }
.knopf-hell:hover { background: #fff; border-color: var(--sage); color: var(--ink); }
.knopf-gelb { background: #fbe9b4; color: var(--ink); border: 1px solid #e6c56b; }
.knopf-gelb:hover { background: var(--butter); border-color: var(--butter); color: var(--ink); }
.knopf-breit { width: 100%; }
.knopf svg { width: 16px; height: 16px; flex: none; }

/* ---------- Startseite: Einstieg ---------- */
.einstieg { padding: 40px 0 24px; }
.einstieg-raster { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) {
  .einstieg { padding: 56px 0 40px; }
  .einstieg-raster { grid-template-columns: 1.15fr .85fr; gap: 48px; }
}
.einstieg h1 span { display: block; color: var(--coral); font-style: italic; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 10px; }
.vertrauen { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.vertrauen li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.vertrauen svg { width: 18px; height: 18px; color: var(--sage); flex: none; }

.buehne { position: relative; width: 100%; max-width: 480px; justify-self: center; display: grid; place-items: center; padding: 34px 0; }
.buehne-oval { position: absolute; inset: 0; border-radius: 50%; background: var(--mint); overflow: hidden; }
.buehne-oval::before { content: ""; position: absolute; left: -10%; top: -10%; width: 45%; height: 120%; background: var(--peach); transform: rotate(-12deg); }
.buehne-oval::after { content: ""; position: absolute; right: -12%; top: 6%; width: 46%; height: 90%; border-radius: 50%; background: var(--butter); }
.buehne-quadrat { position: absolute; left: 12%; top: 22%; width: 24px; height: 24px; background: var(--leaf); transform: rotate(-10deg); z-index: 2; }
.buehne-punkt { position: absolute; left: 9%; bottom: 24%; width: 20px; height: 20px; border-radius: 50%; background: var(--coral); z-index: 2; }
.buehne-karte {
  position: relative; z-index: 3; width: 56%; max-width: 270px; min-height: 120px;
  transform: rotate(3deg);
  background: var(--paper); border-radius: 14px; padding: 10px 10px 14px;
  box-shadow: 0 18px 40px -22px rgba(23, 60, 50, .55);
  text-decoration: none; color: var(--ink);
}
@media (max-width: 639px) { .buehne { padding: 22px 0; max-width: 320px; } .buehne-karte { width: 60%; } .buehne-karte strong { font-size: 17px; } }
.buehne-karte .bild { background: var(--mint); border-radius: 10px; aspect-ratio: 4/3; display: grid; place-items: center; padding: 10px; overflow: hidden; }
.buehne-karte .bild img { width: 100%; height: 100%; object-fit: contain; }
.buehne-karte .eyebrow { font-size: 10px; margin: 10px 0 4px; }
.buehne-karte strong { display: block; font: 400 20px/1.15 var(--serif); }
.buehne-karte .preis-zeile { margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--coral-ink); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 36px 0; }
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; }
.abschnitt-kopf p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- Produktkarten ---------- */
.raster-produkte { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .raster-produkte { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .raster-produkte { grid-template-columns: repeat(3, 1fr); } }
.produkt-karte {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 10px; display: flex; flex-direction: column; color: var(--ink); text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.produkt-karte:hover { border-color: var(--sage); color: var(--ink); }
.produkt-bild { position: relative; border-radius: var(--r-md); aspect-ratio: 4/3; display: grid; place-items: center; padding: 18px; overflow: hidden; }
.ton-0 { background: var(--mint); }
.ton-1 { background: #f5ead2; }
.ton-2 { background: #f7e1d7; }
.produkt-bild img { width: 100%; height: 100%; object-fit: contain; }
.marke-chip {
  position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255, 253, 248, .92); border-radius: 99px; padding: 5px 10px; font-size: 12px; font-weight: 700;
}
.marke-chip svg { width: 13px; height: 13px; color: var(--sage); }
.produkt-text { padding: 16px 8px 8px; display: flex; flex-direction: column; flex: 1; }
.produkt-text .eyebrow { letter-spacing: .04em; text-transform: none; font-size: 13px; margin-bottom: 6px; }
.produkt-text h3 { font-size: 24px; margin-bottom: 8px; }
.produkt-text p { color: var(--muted); font-size: 15px; line-height: 1.55; margin-bottom: 18px; }
.produkt-fuss { margin-top: auto; display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.preis { font: 700 22px/1 var(--sans); }
.preis-hinweis { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 6px; }
.mehr { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; }
.mehr svg { width: 15px; height: 15px; }

.bald-karte {
  border: 2px dashed var(--line); border-radius: var(--r-lg); padding: 28px 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 220px; color: var(--muted);
}
.bald-karte h3 { color: var(--ink); font-size: 22px; margin: 0; }
.bald-karte p { margin: 0; font-size: 15px; }

/* ---------- Infokacheln ---------- */
.infos { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .infos { grid-template-columns: repeat(3, 1fr); } }
.info { background: var(--mint); border-radius: var(--r-sm); padding: 16px 18px; }
.info strong { display: block; font-size: 15px; margin-bottom: 4px; }
.info span { font-size: 14px; color: var(--muted); }
.info a { font-weight: 700; }

/* ---------- Brotkrumen ---------- */
.krumen { font-size: 14px; color: var(--muted); padding: 22px 0 6px; }
.krumen a { color: var(--muted); text-decoration: none; }
.krumen a:hover { color: var(--ink); text-decoration: underline; }
.krumen span[aria-hidden] { margin: 0 6px; }

/* ---------- Produktseite ---------- */
.produkt-raster { display: grid; gap: 28px; padding: 14px 0 20px; }
@media (min-width: 900px) { .produkt-raster { grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start; } }
.galerie-gross { border-radius: var(--r-lg); aspect-ratio: 4/3; display: grid; place-items: center; padding: 28px; border: 1px solid var(--line); }
.galerie-gross img { width: 100%; height: 100%; object-fit: contain; }
.galerie-klein { display: flex; gap: 10px; margin-top: 10px; }
.galerie-klein button {
  width: 88px; aspect-ratio: 4/3; padding: 6px; border-radius: var(--r-sm);
  border: 2px solid transparent; cursor: pointer;
}
.galerie-klein button[aria-current="true"] { border-color: var(--leaf); }
.galerie-klein img { width: 100%; height: 100%; object-fit: contain; }
.produkt-info h1 { font-size: clamp(32px, 4.6vw, 46px); margin-bottom: 12px; }
.produkt-info .lead { font-size: 17px; margin-bottom: 18px; }
.preis-block { padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.preis-gross { font: 700 34px/1 var(--sans); }
.preis-block .klein { margin-top: 8px; }
.lieferzeit { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-top: 12px; }
.lieferzeit::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sage); }
.kauf-reihe { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.kauf-reihe .knopf { flex: 1 1 200px; }
.menge {
  display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--paper);
  border-radius: 99px; height: 52px; flex: none;
}
.menge button { width: 44px; height: 100%; border: 0; background: none; font: 700 20px/1 var(--sans); color: var(--ink); cursor: pointer; border-radius: 99px; }
.menge button:hover { background: var(--mint); }
.menge input { width: 36px; text-align: center; border: 0; background: none; font: 700 16px var(--sans); color: var(--ink); -moz-appearance: textfield; }
.menge input::-webkit-inner-spin-button, .menge input::-webkit-outer-spin-button { -webkit-appearance: none; }
.menge.klein-menge { height: 40px; }
.menge.klein-menge button { width: 36px; font-size: 18px; }
.vorteile { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.vorteile li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.vorteile svg { width: 20px; height: 20px; color: var(--leaf); flex: none; margin-top: 1px; }
.beschreibung { max-width: 680px; }
.beschreibung p { font-size: 16px; line-height: 1.7; }
.rezepte-liste { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .rezepte-liste { grid-template-columns: repeat(2, 1fr); } }
.rezept-link {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; text-decoration: none; color: var(--ink);
}
.rezept-link strong { font: 400 20px/1.2 var(--serif); }
.rezept-link:hover { border-color: var(--sage); color: var(--ink); }
.rezept-link svg { width: 18px; height: 18px; flex: none; }

/* ---------- Hinweis-Meldung ---------- */
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; padding: 12px 14px 12px 18px; border-radius: 99px; z-index: 50;
  display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 15px;
  box-shadow: 0 14px 30px -12px rgba(23, 60, 50, .6); transition: opacity .2s, transform .2s; max-width: calc(100% - 32px);
}
.toast.an { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: var(--ink); background: var(--butter); padding: 8px 14px; border-radius: 99px; text-decoration: none; white-space: nowrap; }

/* ---------- Warenkorb ---------- */
.seiten-kopf { padding: 22px 0 18px; }
.seiten-kopf h1 { font-size: clamp(34px, 6vw, 52px); margin-bottom: 6px; }
.korb-raster { display: grid; gap: 24px; padding-bottom: 32px; }
@media (min-width: 900px) { .korb-raster { grid-template-columns: 1fr 380px; align-items: start; gap: 32px; } }
.karte { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
@media (min-width: 720px) { .karte { padding: 26px; } }
.korb-zeile { display: grid; grid-template-columns: 84px 1fr; gap: 14px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.korb-zeile:first-child { padding-top: 0; }
.korb-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.korb-bild { border-radius: var(--r-sm); aspect-ratio: 1; padding: 8px; display: grid; place-items: center; }
.korb-bild img { width: 100%; height: 100%; object-fit: contain; }
.korb-name { font: 400 21px/1.2 var(--serif); color: var(--ink); text-decoration: none; display: block; margin-bottom: 4px; }
.korb-name:hover { text-decoration: underline; }
.korb-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.korb-summe { margin-left: auto; font-weight: 700; font-size: 17px; }
.entfernen { background: none; border: 0; color: var(--muted); font: 14px var(--sans); text-decoration: underline; cursor: pointer; padding: 6px 0; }
.entfernen:hover { color: var(--coral-ink); }
.summen { display: grid; gap: 10px; margin: 0 0 18px; }
.summen div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.summen dt, .summen dd { margin: 0; }
.summen .gesamt { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; font-size: 19px; font-weight: 700; }
.summen .gesamt dd { font-size: 22px; }
.frei-hinweis { background: var(--mint); border-radius: var(--r-sm); padding: 12px 14px; font-size: 14px; margin-bottom: 18px; }
.balken { height: 6px; background: rgba(23, 60, 50, .12); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.balken i { display: block; height: 100%; background: var(--leaf); border-radius: 99px; }
.leer { text-align: center; padding: 40px 20px; }
.leer h2 { font-size: 30px; }
.leer p { color: var(--muted); }
.zahl-logos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; justify-content: center; }
.zahl-logos span { font-size: 12px; font-weight: 700; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; background: #fff; color: var(--muted); }

/* ---------- Kasse ---------- */
.kasse-raster { display: grid; gap: 24px; padding-bottom: 40px; }
@media (min-width: 960px) { .kasse-raster { grid-template-columns: 1fr 400px; align-items: start; gap: 32px; } .kasse-seite { position: sticky; top: 20px; } }
.schritt + .schritt { margin-top: 18px; }
.schritt h2 { font-size: 26px; margin-bottom: 4px; display: flex; align-items: center; gap: 12px; }
.schritt-nr { width: 30px; height: 30px; border-radius: 50%; background: var(--leaf); color: #fff; font: 700 14px/30px var(--sans); text-align: center; flex: none; }
.schritt > p { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.felder { display: grid; gap: 14px; grid-template-columns: repeat(6, 1fr); }
.feld { grid-column: span 6; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (min-width: 560px) {
  .feld.halb { grid-column: span 3; }
  .feld.zwei-drittel { grid-column: span 4; }
  .feld.drittel { grid-column: span 2; }
}
.feld label { font-size: 14px; font-weight: 700; }
.feld label small { font-weight: 400; color: var(--muted); }
.feld input, .feld select {
  font: 16px var(--sans); color: var(--ink); background: #fff; border: 1px solid #c9d0bf; border-radius: var(--r-sm);
  padding: 13px 14px; width: 100%; min-height: 50px;
}
.feld input:focus, .feld select:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(40, 91, 69, .18); }
.feld[data-fehler] input, .feld[data-fehler] select { border-color: var(--coral-ink); background: #fff8f5; }
.feld-fehler { color: var(--coral-ink); font-size: 13px; font-weight: 700; min-height: 0; }
.feld-fehler:empty { display: none; }
.zahlarten { display: grid; gap: 10px; }
.zahlart { position: relative; display: flex; gap: 14px; align-items: center; border: 1px solid #c9d0bf; border-radius: var(--r-md); padding: 16px; background: #fff; cursor: pointer; }
.zahlart:has(input:checked) { border-color: var(--leaf); box-shadow: 0 0 0 2px var(--leaf) inset; background: #fbfdf9; }
.zahlart input { width: 20px; height: 20px; accent-color: var(--leaf); flex: none; margin: 0; }
.zahlart strong { display: block; font-size: 16px; }
.zahlart span { font-size: 14px; color: var(--muted); }
.zahlart .zahl-logos { margin: 0 0 0 auto; justify-content: flex-end; }
@media (max-width: 559px) { .zahlart { display: grid; grid-template-columns: 20px 1fr; gap: 6px 14px; align-items: start; } .zahlart input { margin-top: 2px; } .zahlart .zahl-logos { grid-column: 2; margin: 6px 0 0; justify-content: flex-start; } }
.mini-positionen { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 12px; }
.mini-positionen li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.mini-positionen .korb-bild { padding: 5px; }
.mini-positionen strong { display: block; font-size: 15px; line-height: 1.3; }
.bestaetigen { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; margin: 0 0 6px; cursor: pointer; }
.bestaetigen input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--leaf); flex: none; }
.bestaetigen-fehler { margin: 0 0 12px 32px; }
.rechts-hinweis { font-size: 12px; color: var(--muted); margin: 12px 0 0; line-height: 1.5; }
.formular-fehler { background: #fdece6; border: 1px solid #f2b9a6; color: #8a2f18; border-radius: var(--r-sm); padding: 12px 14px; font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.formular-fehler[hidden] { display: none; }

/* ---------- Ergebnis (Vorschau / Danke / Abbruch) ---------- */
.ergebnis { max-width: 720px; margin: 0 auto; padding: 40px 0 56px; }
.ergebnis-symbol { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 18px; }
.ergebnis-symbol svg { width: 30px; height: 30px; }
.symbol-gut { background: var(--leaf); color: #fff; }
.symbol-warten { background: var(--butter); color: var(--ink); }
.symbol-abbruch { background: var(--peach); color: var(--coral-ink); }
.ergebnis h1 { font-size: clamp(34px, 6vw, 50px); }
.bestellnr { display: inline-block; font: 700 16px/1 var(--sans); background: var(--paper); border: 1px solid var(--line); border-radius: 99px; padding: 10px 16px; margin: 4px 0 18px; }
.ergebnis .karte { margin: 22px 0; }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 760px; padding: 8px 0 56px; }
.rechtstext h2 { font-size: 28px; margin: 34px 0 10px; }
.rechtstext h3 { font-size: 21px; margin: 22px 0 8px; }
.rechtstext p, .rechtstext li { font-size: 16px; line-height: 1.7; }
.rechtstext ul, .rechtstext ol { padding-left: 22px; margin: 0 0 14px; }
.entwurf {
  border: 2px solid var(--coral); background: #fdeee8; border-radius: var(--r-md);
  padding: 14px 16px; font-weight: 700; font-size: 15px; margin: 0 0 24px; color: #7c2a14;
}
.platzhalter { background: #fbe9b4; padding: 1px 5px; border-radius: 4px; font-weight: 700; }
.formular-muster { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; }
.tabelle { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: 15px; background: var(--paper); border-radius: var(--r-sm); overflow: hidden; }
.tabelle th, .tabelle td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.tabelle th { background: var(--mint); font-size: 14px; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--line); margin-top: 24px; padding: 30px 0 40px; font-size: 14px; }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 18px 32px; justify-content: space-between; align-items: flex-start; }
.fuss-marke { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.fuss-marke img { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); }
.fuss nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.fuss nav a { color: var(--ink); text-decoration: none; font-weight: 700; }
.fuss nav a:hover { text-decoration: underline; }
.fuss .klein { width: 100%; margin: 0; }
.shop-next-steps h2 { font: clamp(28px, 4vw, 38px)/1.2 var(--serif); margin: 12px 0 24px; }
.shop-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.shop-next-grid > div { padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.shop-next-grid strong { font-size: 18px; }
.shop-next-grid p { margin: 8px 0 0; color: var(--muted); }
@media (max-width: 760px) { .shop-next-grid { grid-template-columns: 1fr; } }

.laden { color: var(--muted); padding: 30px 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* Boutique refresh · 15.10.2026 */
:root { --cream:#f8f5ef;--paper:#fffefa;--ink:#183d32;--coral:#bf5c3b;--line:#e5e2d8;--wrap:1280px; }
html { scroll-behavior:smooth; }
body { background:var(--cream); }
.vorschau-banner { background:#173e32;color:#f4ead6;border:0;font-size:12px;font-weight:500;letter-spacing:.09em;padding:10px 16px; }
.vorschau-banner svg {display:none;}
.kopf {background:rgba(255,254,250,.97);border-bottom:1px solid #dfdfd5;}
.kopf-innen {min-height:92px;}
.marke-text {font-size:21px;letter-spacing:-.04em;}
.marke-shop {background:transparent;color:#6d7567;font-size:10px;letter-spacing:.15em;border:1px solid #deded2;border-radius:4px;padding:7px;}
.korb-knopf {background:transparent;color:var(--ink);border:1px solid #cbd2c5;box-shadow:none;}
.korb-knopf svg,.korb-zahl {display:none;}
.zurueck {border:0;background:transparent;font-size:13px;font-weight:500;}
.einstieg {padding:64px 0 56px;}
.einstieg-raster {grid-template-columns:1fr 1.1fr;gap:64px;}
.eyebrow {color:#8b5f3d;font-size:10px;letter-spacing:.19em;line-height:1.6;}
h1,h2,h3 {font-weight:400;letter-spacing:-.035em;}
.einstieg h1 {font-size:clamp(44px,4.7vw,70px);line-height:1.04;margin:20px 0 26px;}
.einstieg h1 span {color:#a75a3f;margin-top:5px;}
.lead {font-size:16px;line-height:1.8;max-width:420px;color:#5b665b;margin-bottom:28px;}
.knopf {border-radius:5px;padding:15px 22px;font-size:12px;letter-spacing:.025em;background:#234b3a;box-shadow:0 6px 14px -10px #163a2b;}
.knopf-hell {background:#fffefa;color:var(--ink);border-color:#d8d8ca;box-shadow:none;}
.launch-note {margin:24px 0 0;font-size:11px;color:#677363;display:flex;align-items:center;gap:8px;}
.launch-note>span {width:6px;height:6px;border-radius:50%;background:#9ca97d;}
.shop-hero {position:relative;isolation:isolate;margin:0 0 0 0;border-radius:8px;overflow:hidden;min-height:440px;box-shadow:0 24px 50px -35px #2e382a; background:#e1dfd1;}
.shop-hero>img {width:100%;height:500px;object-fit:cover;}
.shop-hero:after {content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(16,36,23,.78));z-index:0;pointer-events:none;}
.shop-hero figcaption {position:absolute;bottom:28px;left:30px;right:25px;color:#fff8e9;z-index:1;font:italic 25px/1.25 Georgia,serif;letter-spacing:-.02em;}
.shop-hero figcaption small {display:block;font:9px/1.5 Arial,sans-serif;letter-spacing:.04em;color:#eee8d9;margin-top:10px;}
.hero-stamp {position:absolute;top:24px;right:24px;width:96px;height:96px;border:1px solid #faf5e4aa;border-radius:50%;background:#244536d9;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff8e5;text-align:center;font:13px/1.2 Georgia,serif;letter-spacing:.08em;}
.hero-stamp span {font:italic 9px/1.3 Georgia,serif;letter-spacing:0;margin-top:5px;}
.abschnitt {padding:48px 0;}
.abschnitt-kopf {margin-bottom:30px;border-top:1px solid #dcded2;padding-top:36px;}
.abschnitt-kopf h2 {font-size:38px;margin:10px 0 12px;}
.abschnitt-kopf p {font-size:13px;}
.raster-produkte {gap:24px;}
.produkt-karte {padding:0;border:1px solid #e1e3d7;border-radius:8px;overflow:hidden;box-shadow:0 10px 25px -24px #173c32;transition:transform .25s,box-shadow .25s;}
.produkt-karte:hover {transform:translateY(-4px);box-shadow:0 18px 35px -25px #173c3266;border-color:#cbd3c0;}
.produkt-bild {border-radius:0;aspect-ratio:1.25;padding:40px;}
.produkt-bild img {filter:drop-shadow(0 16px 10px #233c2425);max-height:195px;transition:transform .4s;}
.produkt-karte:hover img {transform:scale(1.04) rotate(-1deg);}
.ton-0 {background:radial-gradient(ellipse at 40% 15%,#f1f1df,#dce4cc);}
.ton-1 {background:radial-gradient(ellipse at 40% 15%,#fff7e9,#ece1cc);}
.coming-badge {position:absolute;top:16px;left:16px;border:1px solid #fff9;background:#fffdf5cf;padding:5px 9px;border-radius:3px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#56634e;}
.produkt-text {padding:25px 26px 28px;}
.produkt-text h3 {font-size:26px;margin:8px 0 14px;}
.produkt-text p {font-size:13px;min-height:36px;}
.coming-label {display:block;margin-top:28px;border-top:1px solid #e5e6d9;padding-top:15px;font-size:10px;letter-spacing:.02em;color:#6d765f;}
.recipe-card {position:relative;overflow:hidden;background:linear-gradient(145deg,#204936,#153529);padding:28px;border-radius:8px;color:#f9f4e7;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:440px;}
.recipe-card .eyebrow {color:#d6cfaa;position:relative;}
.recipe-card h3 {font:36px/1.1 Georgia,serif;margin:16px 0;z-index:1;}
.recipe-card p {font-size:13px;color:#d0d8c6;max-width:250px;z-index:1;}
.recipe-card a {margin-top:15px;z-index:1;}
.recipe-mark {position:absolute;top:-10px;right:-15px;font:italic 240px/1 Georgia,serif;color:#ffffff08;pointer-events:none;}
.manifesto {margin-top:24px;background:#eeeee2;border-top:1px solid #e2e4d6;border-bottom:1px solid #e2e4d6;padding:60px 0;}
.manifesto-inner>h2 {font:38px/1.18 Georgia,serif;margin:18px 0 36px;}
.manifesto .infos {gap:40px;}
.manifesto .info {background:transparent;padding:0;border-radius:0;}
.info strong {font-size:13px;}
.info span {font-size:13px;line-height:1.8;color:#626d5d;}
.fuss {background:#fffdf8;padding:32px 0;border-top:0;}
.fuss nav a {font-size:11px;}
.fuss .klein {font-size:10px;}
@media(max-width:900px){.einstieg-raster{grid-template-columns:1fr 1fr;gap:28px;}.shop-hero>img{height:440px;}.shop-hero{min-height:400px;}.hero-stamp{width:74px;height:74px;font-size:11px;}.einstieg h1{font-size:48px;}}
@media(max-width:639px){.kopf-innen{min-height:74px;gap:8px;}.marke-text{font-size:17px;}.marke img{width:32px;height:32px;}.marke-shop{display:none;}.kopf-links{gap:4px;}.zurueck{font-size:10px;padding:8px 2px;}.zurueck svg{display:none;}.korb-knopf{font-size:10px;padding:7px;}.einstieg{padding:32px 0 26px;}.einstieg-raster{grid-template-columns:1fr;gap:30px;}.einstieg h1{font-size:52px;margin:15px 0 20px;}.lead{font-size:14px;}.shop-hero>img{height:340px;}.shop-hero{min-height:340px;}.shop-hero figcaption{font-size:22px;left:22px;bottom:22px;}.abschnitt{padding:28px 0;}.abschnitt-kopf{padding-top:24px;}.abschnitt-kopf h2{font-size:31px;}.recipe-card{min-height:320px;}.manifesto{padding:40px 0;}.manifesto-inner>h2{font-size:31px;}.manifesto .infos{gap:28px;}.vorschau-banner{font-size:10px;letter-spacing:.06em;}.raster-produkte{gap:20px;}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,*:before,*:after{transition:none!important;}}
.recipe-card h3 {color:#fff8e9;}
body[data-seite="uebersicht"] .korb-knopf {font-weight:600;}
@media(max-width:639px){.korb-text{display:inline;}.kopf-links{width:auto;margin-left:auto;}.kopf-innen{flex-wrap:nowrap;}.zurueck{display:none;}.korb-knopf{white-space:nowrap;}}