/* =========================================================
   Satt unter 10 — Designsystem "Kochbuch"
   Leitidee: handgezeichnete Teller-Illustrationen wie auf
   Rezeptkarten, warmes Küchentisch-Papier, handschriftliche
   Notizen als Eyebrow. Bilder statt Preistabellen im Fokus.
   ========================================================= */

/* =========================================================
   INHALTSVERZEICHNIS
   ---------------------------------------------------------
   Zeilennummern koennen sich beim Bearbeiten leicht
   verschieben - im Zweifel im Editor nach der jeweiligen
   Kommentar-Ueberschrift suchen (Strg/Cmd+F).

   WICHTIG: Die Reihenfolge der Regeln in dieser Datei ist
   teilweise bewusst so gewaehlt (spaetere Regeln ueber-
   schreiben fruehere, siehe z. B. Kommentare wie "muss NACH
   der bestehenden Regel..."). Beim Bearbeiten Regeln daher
   nicht einfach verschieben, sondern neue Anpassungen eher
   am Ende des jeweiligen Themenblocks ergaenzen.

   01. Basis & Variablen ................... Zeile 1
   02. Kopfzeile & Navigation ............... Zeile 58
   03. Buttons ............................... Zeile 100
   04. Eyebrow / Handschrift-Stil ........... Zeile 128
   05. Hero-Bereich .......................... Zeile 164
   06. Abschnitte (allgemein) ............... Zeile 178
   07. Rezeptkarten (Uebersicht) ............ Zeile 214
       weitere Rezeptkarten-Anpassungen ..... Zeile 1193, 2172
   08. Call-to-Action ........................ Zeile 281
   09. Footer ................................ Zeile 298
   10. Innenseiten (allgemein) .............. Zeile 315
   11. Responsive / Mobile ................... Zeile 330
   12. Diverse Layout-Nachtraege (v06-v37) .. Zeile 376
       - Rezeptdetailseite (Artikel-Layout) . Zeile 521
       - Omas-Kueche-Bereich ................. Zeile 731
       - Sterne-Bewertung .................... Zeile 752, 879
       - Teilen-Button ....................... Zeile 947
       - Newsletter (Startseite) ............. Zeile 969
       - Preis-Siegel / Badges ............... Zeile 1088
   13. Werbe-/Affiliate-Slots & Cookie-Banner Zeile 1332
   14. Wochenplan ............................ Zeile 1445
       - FAQ-Akkordeon ........................ Zeile 1556
       - Einkaufsliste ........................ Zeile 1692
   15. Merkliste (Favoriten) ................ Zeile 1921
   16. Zufalls-Rezept-Vorschlag ............. Zeile 2039
   17. Wochenplan aus Merkliste ............. Zeile 2041
   18. Feinschliff diverser Detailseiten .... Zeile 2161
   ========================================================= */

* { box-sizing: border-box; }

/* =========================================================
   FEATURE-SCHALTER: Sterne-Bewertung noch nicht live
   ---------------------------------------------------------
   Bewusste Entscheidung: Bewertungsfunktion bleibt vorerst
   ausgeblendet, bis sich echte Bewertungen angesammelt haben.
   Anzeige von 0-Sternen/0-Bewertungen waere sonst irrefuehrend.

   AKTIVIEREN: diese beiden Zeilen einfach loeschen, sobald
   echte Bewertungen praesentiert werden sollen. Der komplette
   Code (HTML, CSS, recipe-rating.js) bleibt unveraendert und
   ist sofort einsatzbereit.
   ========================================================= */
.recipe-card-rating,
.inline-rating-box { display: none !important; }

:root {
  --cream: #f4f3ef;
  --cream-2: #f3e8d4;
  --card: #fffdf9;
  --ink: #223026;
  --muted: #667066;
  --accent: #556f57;
  --accent-dark: #405742;
  --herb: #4c7a57;
  --herb-dark: #345940;
  --butter: #efb93c;
  --line: #e3d3b8;
  --cream2: #ece9e2;
  --paper: #fffdfa;
  --orange: #6c8b67;
  --orange2: #4f6f4b;
  --green: #557a56;
  --green2: #e3ece3;
  --yellow: #d7ddd3;
  --border: #dde3d9;
  --bg-soft: #f6f5f2;
  --panel: #ffffff;
  --panel-soft: #fbfbf8;
  --accent-soft: #e7efe8;
  --shadow-premium: 0 18px 40px rgba(35,49,36,.07),0 3px 10px rgba(35,49,36,.04);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
::selection { background: var(--butter); color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Kopfzeile ---------- */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem clamp(1.1rem, 4vw, 4rem);
  background: rgba(251, 245, 234, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}

.logo {
  font-family: Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.nav {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  flex-wrap: wrap;
  font-weight: 700;
  font-size: .96rem;
  color: var(--muted);
  align-items: center;
}

.nav a { position: relative; padding: .2rem 0; }
.nav a:hover { color: var(--accent-dark); }

.nav-toggle, .nav-toggle-label { display: none; }

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--accent);
  color: #fff8ec;
  border-radius: 999px;
  padding: .9rem 1.5rem;
  font-weight: 800;
  font-family: "Segoe UI", sans-serif;
  box-shadow: 0 8px 20px rgba(169, 67, 43, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}

.button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(169, 67, 43, .32); }

.button.secondary {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  border: 2px solid var(--ink);
}

.button.secondary:hover { background: var(--cream-2); transform: none; }

/* ---------- Eyebrow / Handschrift ---------- */

.eyebrow {
  display: inline-block;
  font-family: cursive;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent-dark);
  transform: rotate(-2deg);
  margin-bottom: .3rem;
}

h1, h2 {
  font-family: Georgia, serif;
  line-height: 1.12;
  margin: 0 0 1rem;
  font-weight: 700;
}

h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); max-width: 780px; }
h1 em, h2 em { font-style: italic; color: var(--accent); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }

h3 {
  font-family: "Segoe UI", sans-serif;
  font-size: 1.22rem;
  font-weight: 800;
  margin: 0 0 .6rem;
}

.lead {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: var(--muted);
  max-width: 560px;
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(2.6rem, 7vw, 5.5rem) clamp(1.1rem, 4vw, 4rem) clamp(2rem, 5vw, 3.5rem);
  max-width: 1280px;
  margin: 0 auto;
}

.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.8rem; }

/* ---------- Abschnitte ---------- */

.section {
  padding: clamp(2.2rem, 6vw, 4.5rem) clamp(1.1rem, 4vw, 4rem);
  max-width: 1280px;
  margin: 0 auto;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
}

.check-box {
  padding: 1.7rem 1.8rem;
  background: var(--card);
  border-radius: 20px;
  border: 2px dashed var(--herb);
  box-shadow: 0 14px 30px rgba(43, 36, 25, .07);
}

.check-box strong {
  display: block;
  font-family: Georgia, serif;
  font-size: 1.25rem;
  color: var(--herb-dark);
  margin-bottom: .6rem;
}

.check-box p { margin: .3rem 0; }
.check-box small { color: var(--muted); display: block; margin-top: .7rem; font-size: .85rem; }

.section-head { margin-bottom: 1.8rem; max-width: 620px; }

/* ---------- Rezeptkarten ---------- */

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.recipe-card {
  position: relative;
  background: var(--card);
  border-radius: 22px;
  box-shadow: 0 16px 34px rgba(43, 36, 25, .09);
  transition: transform .18s ease, box-shadow .18s ease;
}

.recipe-card:hover {
  transform: translateY(-4px) rotate(-.4deg);
  box-shadow: 0 22px 40px rgba(43, 36, 25, .14);
}

.recipe-card a { display: block; padding: 1.3rem 1.4rem 1.5rem; }

.recipe-card .plate-frame {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 16px;
  background: var(--cream-2);
  overflow: hidden;
  margin-bottom: 1.1rem;
}

.recipe-card .plate-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.recipe-card p { color: var(--muted); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .7rem;
  background: #f6e3c9;
  color: var(--accent-dark);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.tag.vegetarian { background: #dcefdd; color: var(--herb-dark); }

.card-meta {
  display: flex;
  justify-content: space-between;
  gap: .7rem;
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-weight: 800;
  font-size: .92rem;
  color: var(--accent-dark);
}

.card-meta span:last-child { color: var(--muted); font-weight: 600; }

/* ---------- CTA ---------- */

.cta {
  text-align: center;
  background: var(--herb-dark);
  color: #fdf8ec;
  margin: 1rem clamp(1.1rem, 4vw, 4rem) 3rem;
  border-radius: 26px;
  padding: clamp(2.4rem, 6vw, 3.6rem) 1.5rem;
  max-width: 1280px;
}

.cta h2, .cta h2 em { color: #fdf8ec; max-width: 620px; margin-inline: auto; }
.cta p { max-width: 460px; margin: 0 auto 1.7rem; opacity: .85; }
.cta .button { background: var(--butter); color: var(--ink); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.cta .button:hover { transform: translateY(-2px); }

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.8rem clamp(1.1rem, 4vw, 4rem) 2.4rem;
  color: var(--muted);
  font-size: .9rem;
  border-top: 1px solid var(--line);
}

.site-footer div { display: flex; gap: 1.2rem; }
.site-footer a:hover { color: var(--ink); }

/* ---------- Innenseiten ---------- */

.page { max-width: 920px; margin: 0 auto; padding: clamp(2.2rem, 6vw, 4.5rem) 1.1rem; }

.content-card {
  background: var(--card);
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(43, 36, 25, .07);
  padding: clamp(1.5rem, 4vw, 2.3rem);
  margin-bottom: 1.2rem;
}

.content-card ul, .content-card ol { padding-left: 1.25rem; }
.content-card li { margin-bottom: .4rem; }
.content-card h2, .content-card h3, .content-card h4 { overflow-wrap: break-word; word-break: break-word; hyphens: auto; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero, .split { grid-template-columns: 1fr; }
  .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .recipe-grid { grid-template-columns: 1fr; }
  .site-header { flex-wrap: wrap; }

  .nav-toggle-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.2rem;
    height: 2.2rem;
    cursor: pointer;
    order: 2;
  }

  .nav-toggle-label span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

  .nav {
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height .22s ease;
  }

  .nav-toggle:checked ~ .nav {
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
    padding-top: .8rem;
  }
  .nav a { width: 100%; padding: .5rem 0; min-height: 42px; display: flex; align-items: center; }

  .site-footer { flex-direction: column; align-items: flex-start; }
}


/* === Satt unter 10: Kartenbild + Farbvariablen (bereinigt in v69, vorher v03-v06 Altlasten) === */
.recipe-card img {
  width: 100%;
  height: auto;
  display: block;
}

.site-header{background:rgba(244,243,239,.92); border-bottom:1px solid rgba(221,227,217,.95)}


body{
  background:
    radial-gradient(circle at 12% 0%, rgba(211,219,211,.35), transparent 36%),
    radial-gradient(circle at 88% 10%, rgba(228,233,228,.65), transparent 30%),
    linear-gradient(180deg, #f4f3ef, #fbfaf7 45%, #f2f1ed);
}
.pill,.button.secondary,.tag,.content-card,.check-box,.recipe-card{border-color:var(--border)}
.logo-text span{font-size:1.15rem;color:#3c5140}
.logo-text small{color:#6b776b}
.hero{grid-template-columns:minmax(0,1.1fr) minmax(260px,.72fr)}
.recipe-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.recipe-grid > *{justify-self:center;width:100%}
.recipe-card{max-width:340px;background:#fff}
.button{background:#5f7d61}
.button:hover{background:#4f6f4b}
.nav a:hover{background:#fff;color:#4f6f4b}
@media (max-width:980px){
  .recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .recipe-grid{grid-template-columns:1fr;}
  .recipe-card{max-width:none}
}


/* === v06 premium layout upgrade === */

body{letter-spacing:0;background:linear-gradient(180deg,#f6f5f2 0%, #fbfbf8 40%, #f3f2ee 100%)}
.site-header{
  padding:.9rem clamp(1rem,4vw,4rem);
  border-bottom:1px solid rgba(219,225,217,.95);
  box-shadow:0 8px 28px rgba(61,80,63,.05);
}
.site-logo-img{width:152px}
.nav{gap:.45rem}
.nav a{
  padding:.72rem .92rem;
  border-radius:14px;
  font-size:.93rem;
  font-weight:800;
  transition:all .18s ease;
}
.nav a:hover{transform:translateY(-1px)}
.hero{
  align-items:center;
  gap:min(4vw,3rem);
  padding-top:3.8rem;
}
.hero h1{max-width:700px;font-size:clamp(2.8rem,7vw,5.4rem)}
.lead{max-width:700px}
.recipe-card,.content-card,.check-box{
  background:var(--panel);
  box-shadow:var(--shadow-premium);
}
.recipe-grid{align-items:start}
.recipe-card{
  border-radius:24px;
  overflow:hidden;
}
.section-head{margin-bottom:1.35rem}
.section-head h2{font-size:clamp(1.8rem,4vw,3.2rem)}
.metric-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  padding:0 clamp(1rem,4vw,4rem) 1rem;
  margin-top:-.5rem;
}
.metric-card{
  background:rgba(255,255,255,.78);
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:var(--shadow-premium);
  padding:1rem 1.1rem;
  text-align:center;
}
.metric-card strong{display:block;font-size:1.35rem;color:var(--accent-dark)}
.metric-card span{font-size:.82rem;color:var(--muted);font-weight:800}
.site-footer{background:rgba(255,255,255,.55);padding-top:2.4rem;padding-bottom:2.4rem}
.check-box{border-radius:24px}
@media (max-width:980px){
  .metric-strip,.recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:680px){
  .metric-strip,.recipe-grid{grid-template-columns:1fr;}
}


/* real food photos in cards and hero */
.recipe-card .plate-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* remove duplicate hero image area */
.hero {
  grid-template-columns: 1fr !important;
}
.hero-text {
  max-width: 760px;
}

/* center CTA band */
.cta {
  max-width: 1180px;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}
.cta .button {
  margin-left: auto;
  margin-right: auto;
}

/* updated logo display */
.site-logo-img {
  width: 190px !important;
  max-width: 46vw;
  height: auto;
  object-fit: contain;
}
.logo-text {
  display: none !important;
}
.site-header .logo {
  gap: 0;
}
@media (max-width: 640px) {
  .site-logo-img {
    width: 155px !important;
  }
}

/* detailed recipe article layout */
.recipe-article-page {
  background: #fbfaf7;
}
.recipe-article {
  max-width: 780px;
  margin: 0 auto;
  padding: 2.4rem 1rem 4rem;
}
.breadcrumbs {
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.recipe-article h1 {
  max-width: 760px;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  margin-bottom: .7rem;
}
.recipe-rating-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  font-size: .9rem;
  font-weight: 750;
  margin-bottom: 1rem;
}
.stars {
  color: #d85d26;
  letter-spacing: .04em;
}
.recipe-intro {
  font-size: 1.06rem;
  color: var(--muted);
  max-width: 720px;
}
.recipe-author {
  font-size: .92rem;
  color: var(--muted);
}
.recipe-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.25rem 0 1.8rem;
}
.recipe-action-row a,
.recipe-action-row button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-family: "Segoe UI", sans-serif;
  border-radius: 999px;
  padding: .55rem 1.15rem;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.recipe-action-row a:hover,
.recipe-action-row button:hover {
  background: var(--accent-soft, #e7efe8);
  border-color: #5f7d61;
  transform: translateY(-1px);
}
.recipe-action-row a:first-child {
  background: #5f7d61;
  color: #fff;
  border-color: #5f7d61;
}
.recipe-action-row a:first-child:hover {
  background: #4f6f4b;
  border-color: #4f6f4b;
}
.recipe-main-image {
  margin: 1.3rem 0 1.5rem;
}
.recipe-main-image img {
  width: 100%;
  max-height: 680px;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid var(--border);
  display: block;
}
.recipe-time-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-top: 6px solid #e9a733;
  background: #fff;
  margin: 1.5rem 0 2rem;
}
.recipe-time-card div {
  padding: 1rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.recipe-time-card div:nth-child(3n) {
  border-right: 0;
}
.recipe-time-card strong,
.recipe-time-card span {
  display: block;
}
.recipe-time-card strong {
  font-size: .82rem;
  margin-bottom: .35rem;
}
.recipe-time-card span {
  color: var(--muted);
}
.recipe-price-check,
.recipe-ingredients,
.recipe-method,
.made-it-box {
  margin: 2rem 0;
}
.recipe-price-check h2,
.recipe-ingredients h2,
.recipe-method h2 {
  font-size: clamp(1.8rem, 4vw, 2.35rem);
  margin-bottom: 1rem;
}
.recipe-cost-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  background: #fff;
  margin-top: 1rem;
}
.recipe-cost-table th,
.recipe-cost-table td {
  padding: .85rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.recipe-cost-table th {
  background: #f2eee7;
}
.recipe-ingredients h3 {
  margin-top: 1.35rem;
  font-size: 1.2rem;
}
.recipe-ingredients ul {
  padding-left: 1.2rem;
}
.recipe-ingredients li {
  margin: .55rem 0;
}
.recipe-ingredients li::marker {
  color: #d85d26;
}
.method-step {
  margin: 1.35rem 0;
}
.method-step span {
  display: block;
  font-weight: 950;
  font-size: .9rem;
  margin-bottom: .35rem;
}
.method-step p {
  margin: 0;
  color: #334138;
}
.recipe-action-row.bottom {
  justify-content: space-between;
}
.made-it-box {
  border: 1px solid var(--border);
  background: #fff;
  text-align: center;
  padding: 1.5rem;
}
.made-it-box a {
  display: inline-block;
  background: #d85d26;
  color: #fff;
  padding: .85rem 1.3rem;
  font-weight: 950;
  margin-top: .5rem;
}
@media (max-width: 720px) {
  .recipe-time-card {
    grid-template-columns: 1fr 1fr;
  }
  .recipe-time-card div:nth-child(3n) {
    border-right: 1px solid var(--border);
  }
}
@media (max-width: 520px) {
  .recipe-time-card {
    grid-template-columns: 1fr;
  }
  .recipe-time-card div {
    border-right: 0 !important;
  }
}

/* Omas günstige Küche */
.oma-section {
  background: linear-gradient(135deg, #fffdf8, #eef4ee);
  border: 1px solid var(--border);
  border-radius: 32px;
  padding: clamp(1.5rem, 4vw, 3rem);
  margin: 2rem auto;
  max-width: 1180px;
  box-shadow: 0 18px 40px rgba(35,49,36,.07);
}
.oma-badge {
  display: inline-flex;
  background: #e7efe8;
  color: #405742;
  border-radius: 999px;
  padding: .28rem .7rem;
  font-weight: 900;
  font-size: .78rem;
  margin-bottom: .7rem;
}

/* recipe rating box */
.recipe-rating-box {
  background: #fffdf8;
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: clamp(1.2rem, 3vw, 2rem);
  margin: 2rem 0;
  box-shadow: 0 16px 36px rgba(35,49,36,.07);
}
.recipe-rating-box h2 {
  margin-bottom: .35rem;
}
.recipe-rating-box p {
  color: var(--muted);
}
.recipe-stars {
  display: flex;
  gap: .35rem;
  margin: 1rem 0;
}
.recipe-stars button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #b9872e;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1;
  cursor: pointer;
  padding: .1rem;
  transition: transform .12s ease;
}
.recipe-stars button:hover,
.recipe-stars button:focus {
  transform: translateY(-2px) scale(1.04);
  outline: none;
}
.recipe-stars button.is-active {
  color: #b9872e;
}
.rating-message {
  min-height: 1.4em;
  font-weight: 900;
  margin-top: .8rem;
}


@media (max-width: 760px) {
  body {
    overflow-x: hidden;
  }
  .site-header {
    gap: .8rem;
    padding: .75rem .9rem;
  }
  .logo {
    width: 100%;
    justify-content: center;
  }
  .site-logo-img {
    max-height: 54px;
  }
  .hero, .page-hero {
    padding: 1.3rem .95rem;
    border-radius: 24px;
  }
  .hero h1, .page-hero h1 {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.05;
  }
  .lead {
    font-size: 1rem;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .button {
    width: 100%;
    min-height: 46px;
    text-align: center;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  .recipe-main-image {
    border-radius: 22px;
  }
  .recipe-rating-box, .oma-section {
    border-radius: 22px;
    padding: 1rem;
  }
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
  .recipe-stars {
    justify-content: center;
  }
  .recipe-stars button {
    min-width: 44px;
    min-height: 44px;
  }
}
@media (max-width: 430px) {
  .page, main {
    padding-left: .85rem;
    padding-right: .85rem;
  }
  .site-header {
    border-radius: 0 0 22px 22px;
  }
  .logo-text small {
    font-size: .72rem;
  }
  .recipe-grid {
    grid-template-columns: 1fr !important;
  }
  .pill, .oma-badge {
    font-size: .72rem;
  }
}


/* compact top rating */
.inline-rating-box {
  background: #fffdf8;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1rem 1.1rem;
  margin: 1rem 0 1.2rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}
.inline-rating-box strong {
  color: var(--text);
}
.inline-rating-box .recipe-stars {
  margin: 0;
}
.inline-rating-box .recipe-stars button {
  font-size: 1.85rem;
}
.inline-rating-box .rating-message {
  margin: 0;
  min-height: auto;
}
@media (max-width: 760px) {
  .inline-rating-box { align-items: flex-start; flex-direction: column; }
}


/* centered desktop navigation */
@media (min-width: 900px) {
  .site-header {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 240px;
    align-items: center;
  }
  .site-header .logo {
    grid-column: 1;
    justify-self: start;
  }
  .site-header .nav {
    grid-column: 2 / 4;
    justify-self: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
  }
}
.recipe-card-rating {
  display: none;
}
.recipe-card-rating small {
  color: var(--muted);
  font-weight: 800;
}

/* Edge/local file robustness */
img {
  max-width: 100%;
  height: auto;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}


/* compact sharing */
.compact-share-message {
  display: inline-flex;
  align-items: center;
  margin-left: .55rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: #e7efe8;
  color: #405742;
  font-weight: 900;
  font-size: .82rem;
}

@media (max-width: 760px) {
  .compact-share-message {
    margin-left: 0;
    margin-top: .45rem;
    justify-content: center;
  }
}


/* compact homepage newsletter */
.nav a[href="index.html#newsletter"],
.nav a[href="../index.html#newsletter"] {
  font-weight: 1000;
}
.newsletter-section {
  width: min(100% - 2rem, 980px);
  margin: 2rem auto;
  padding: clamp(1.2rem, 3vw, 2rem);
  border-radius: 28px;
  border: 1px solid rgba(64, 87, 66, .16);
  background: linear-gradient(135deg, #fffdf8, #edf4ed);
  box-shadow: 0 16px 38px rgba(35, 49, 36, .08);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: center;
}
.newsletter-section h2 { margin: .3rem 0 .35rem; }
.newsletter-section p { color: var(--muted); margin: 0; }
.newsletter-coming-soon {
  display: inline-block;
  background: var(--cream-2);
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: .7rem 1.3rem;
  font-weight: 700;
}
.newsletter-form { display: flex; gap: .55rem; align-items: center; }
.newsletter-form input:disabled {
  background: var(--cream-2);
  color: var(--muted);
  cursor: not-allowed;
}
.newsletter-disabled {
  cursor: not-allowed;
  opacity: .7;
}
.newsletter-form input {
  min-width: 260px;
  min-height: 46px;
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: .7rem 1rem;
  font: inherit;
  background: #fff;
}
.newsletter-form button {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.1rem;
  background: var(--herb);
  color: #fff;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(64, 87, 66, .18);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 480px;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink);
}
.contact-form input,
.contact-form textarea {
  font: inherit;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: .7rem 1rem;
  background: #fff;
  resize: vertical;
}
.contact-form button {
  align-self: flex-start;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.4rem;
  background: var(--herb);
  color: #fff;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(64, 87, 66, .18);
}
.contact-form .hidden-field {
  display: none;
}
@media (max-width: 760px) {
  .newsletter-section {
    width: min(100% - 1.2rem, 460px);
    grid-template-columns: 1fr;
    text-align: center;
    border-radius: 22px;
  }
  .newsletter-form { flex-direction: column; width: 100%; }
  .newsletter-form input,
  .newsletter-form button { width: 100%; min-width: 0; }
}

/* live image optimization */
.recipe-card .plate-frame img,
.recipe-main-image img {
  object-fit: cover;
}
.recipe-card .plate-frame img {
  display: block;
}

/* hidden newsletter honeypot */
.hidden-field {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* verified price badge */
.price-verified {
  display: block;
  padding: .65rem .95rem;
  border-radius: 12px;
  background: #e7efe8;
  color: #405742 !important;
  font-weight: 700;
  line-height: 1.5;
  margin: .3rem 0 .8rem;
}

/* weekplan live layout */
.weekplan-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.2rem;
}
.weekplan-day {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1rem;
  box-shadow: 0 12px 28px rgba(35,49,36,.06);
}
.weekplan-day strong {
  display: inline-flex;
  color: #405742;
  margin-bottom: .45rem;
}
.weekplan-day h3 {
  margin: 0 0 .45rem;
}
.weekplan-day p {
  color: var(--muted);
}
.weekplan-day span {
  font-weight: 1000;
  color: #d85d26;
}
.weekplan-total {
  margin-top: 1.2rem;
  font-size: 1.1rem;
}
.shopping-list-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.shopping-list-grid > div {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1rem;
}
@media (max-width: 900px) {
  .weekplan-grid,
  .weekplan-grid.compact,
  .shopping-list-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 560px) {
  .weekplan-grid,
  .weekplan-grid.compact,
  .shopping-list-grid {
    grid-template-columns: 1fr !important;
  }
}


/* v28 actual metric strip centering fix */
.metric-strip {
  width: min(100% - 2rem, 980px) !important;
  max-width: 980px !important;
  margin: 1.6rem auto 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  justify-content: center !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}
.metric-strip .metric-card {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
@media (max-width: 980px) {
  .metric-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 760px) {
  .metric-strip {
    width: min(100% - 1.2rem, 460px) !important;
    grid-template-columns: 1fr !important;
    margin-top: 1rem !important;
  }
}


/* v32 equal recipe cards
   Regel: Rezeptkarten werden vor Freigabe auf gleiche Höhe, gleiche Bildhöhe
   und unten ausgerichtete Preiszeile geprüft. */
.recipe-grid {
  align-items: stretch !important;
}
.recipe-card {
  height: 100% !important;
  display: flex !important;
}
.recipe-card > a {
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.recipe-card .plate-frame {
  width: 100% !important;
  height: clamp(190px, 18vw, 245px) !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}
.recipe-card .plate-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.recipe-card h3 {
  min-height: 3.05rem !important;
  display: flex !important;
  align-items: flex-start !important;
}
.recipe-card p {
  min-height: 4.6rem !important;
}
.recipe-card .card-meta {
  margin-top: auto !important;
}
.recipe-card .recipe-card-rating {
  min-height: 1.45rem !important;
}
@media (max-width: 760px) {
  .recipe-card .plate-frame {
    height: 210px !important;
  }
  .recipe-card h3,
  .recipe-card p {
    min-height: 0 !important;
  }
}


/* v34 homepage visibility and card restore */
main { display: block; }
.hero {
  width: min(100% - 2rem, 1180px);
  margin: 1.4rem auto 0;
}
.hero-text {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.metric-strip {
  width: min(100% - 2rem, 980px) !important;
  max-width: 980px !important;
  margin: 1.6rem auto 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  justify-content: center !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}
.metric-card {
  width: 100% !important;
  min-width: 0 !important;
  text-align: center !important;
}
.recipe-grid { align-items: stretch !important; }
.recipe-card { height: 100% !important; display: flex !important; }
.recipe-card > a {
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.recipe-card .plate-frame {
  width: 100% !important;
  height: clamp(190px, 18vw, 245px) !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}
.recipe-card .plate-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.recipe-card .card-meta { margin-top: auto !important; }
@media (max-width: 760px) {
  .metric-strip {
    width: min(100% - 1.2rem, 460px) !important;
    grid-template-columns: 1fr !important;
  }
  .recipe-card .plate-frame { height: 210px !important; }
}


/* v36 hero single button centered */
.hero .hero-actions-single,
.hero-actions-single {
  justify-content: center !important;
  display: flex !important;
  width: 100% !important;
}
.hero .hero-actions-single .button {
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 760px) {
  .hero .hero-actions-single {
    display: grid !important;
  }
}


/* v37 green check-box recipe button */
.check-box .button {
  background: var(--herb) !important;
  color: #fff !important;
  border-color: var(--herb) !important;
  box-shadow: 0 12px 26px rgba(64, 87, 66, .20) !important;
}

/* ==========================================================================
   Cookie-Consent-Banner
   ========================================================================== */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--ink);
  color: #fdf8ec;
  box-shadow: 0 -10px 30px rgba(0,0,0,.25);
  padding: 1rem clamp(1rem, 3vw, 2rem);
}

.cookie-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.cookie-banner-text {
  flex: 1 1 320px;
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
}

.cookie-banner-text a {
  color: var(--butter);
  text-decoration: underline;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.cookie-banner-actions .button,
.cookie-banner-actions .button.secondary {
  padding: .6rem 1.1rem;
  font-size: .88rem;
}

.cookie-banner-actions .button.secondary {
  background: transparent;
  color: #fdf8ec;
  border: 1px solid rgba(253,248,236,.5);
}

@media (max-width: 640px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions .button,
  .cookie-banner-actions .button.secondary { flex: 1 1 auto; text-align: center; }
}

/* Werbe-/Affiliate-Slots: bis zur Zustimmung unsichtbar/ohne Inhalt */
[data-ad-slot] {
  display: block;
  min-height: 0;
}
[data-ad-slot]:not([data-consent="granted"]) {
  display: none;
}

.affiliate-disclosure {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .8rem 1rem;
  font-size: .85rem;
  color: var(--muted);
  margin: 1.2rem 0;
}

/* Platzhalter-Styling fuer ein spaeteres Vertrauens-Siegel (z.B. eRecht24) */
.legal-seal {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
}
.legal-seal img {
  max-width: 150px;
  height: auto;
  opacity: .9;
  transition: opacity .18s ease;
}
.legal-seal img:hover {
  opacity: 1;
}

/* ==========================================================================
   Portionsrechner (Servings-Stepper)
   ========================================================================== */

.servings-control {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.servings-stepper {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
}

.servings-stepper button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .1s ease;
}

.servings-stepper button:hover {
  background: var(--cream-2);
}

.servings-stepper button:active {
  transform: scale(.92);
}

.servings-stepper [data-servings-value] {
  min-width: 1.4em;
  text-align: center;
  color: var(--accent-dark);
}

/* ==========================================================================
   Kategorien-Filter (Rezepte-Übersicht)
   ========================================================================== */

.category-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .7rem;
  margin: 0 auto 2rem;
  max-width: 100%;
}

.filter-chip {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  padding: .55rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.filter-chip:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.filter-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.filter-empty-message {
  color: var(--muted);
  font-style: italic;
  margin-bottom: 1.5rem;
}

/* Muss NACH der bestehenden ".recipe-card { display: flex !important; }"-Regel
   stehen, damit ausgeblendete Karten beim Kategorien-Filter wirklich verschwinden. */
.recipe-card.is-filtered-out {
  display: none !important;
}

@media (max-width: 640px) {
  .category-filter {
    gap: .55rem;
  }
  .filter-chip {
    flex: 0 0 auto;
  }
}

/* ---------- FAQ-Akkordeon (Wochenplan) ---------- */

.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: .2rem 1.1rem;
  margin: .7rem 0;
}

.faq-item summary {
  cursor: pointer;
  padding: .9rem 1.6rem .9rem 0;
  font-weight: 800;
  list-style: none;
  position: relative;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: .8rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: #5f7d61;
  transition: transform .15s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 0 0 1rem;
  color: var(--muted);
}

.weekplan-day.compact {
  padding: .6rem .7rem;
  border-radius: 14px;
}
.weekplan-day.compact strong {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: .15rem;
}
.weekplan-day.compact h3 {
  font-size: .88rem;
  line-height: 1.25;
  margin: 0 0 .15rem;
}
.weekplan-day.compact p {
  display: none;
}
.weekplan-day.compact span {
  font-size: .8rem;
}
.weekplan-day.removable {
  position: relative;
  padding-bottom: 2.2rem;
}
.weekplan-day-remove {
  position: absolute;
  bottom: .5rem;
  right: .5rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-size: .85rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all .15s ease;
}
.weekplan-day-remove:hover {
  background: #fbeaea;
  border-color: #d98;
  transform: scale(1.06);
}
.weekplan-grid.compact {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .6rem;
}
.weekplan-grid.compact.with-photos {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
.weekplan-day-photo {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1;
  margin-bottom: .5rem;
  background: var(--cream-2, #f3e8d4);
}
.weekplan-day-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.plan-eyebrow {
  display: block;
  font-family: cursive;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-dark);
  transform: rotate(-2deg);
  margin: 0 0 1.1rem;
}
.plan-eyebrow a {
  color: inherit;
  text-decoration: underline;
}

.weekplan-list-heading {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px dashed var(--border);
}

.print-only-header-page2 {
  display: none;
}

/* ---------- Einkaufsliste (Wochenplan) ---------- */


.print-only-header {
  display: none;
}

.print-only-hint {
  display: none;
}

@media print {
  html {
    font-size: 14px;
  }
  body {
    line-height: 1.32;
  }
  .site-header, .nav-toggle-label, .site-footer {
    display: none;
  }

  /* Seitenumbrüche verhindern: diese Blöcke sollen nie mitten
     durchgeschnitten werden, sondern als Ganzes auf eine Seite. */
  .recipe-time-card, .recipe-cost-table, .price-verified,
  .method-step, .recipe-main-image {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Überschrift nie allein am Seitenende stehen lassen - der Inhalt
     darunter soll immer mit auf dieselbe Seite rutschen. */
  h1, h2, h3, .recipe-ingredients h3 {
    break-after: avoid;
    page-break-after: avoid;
  }
  p, li {
    orphans: 3;
    widows: 3;
  }

  .print-only-header {
    display: flex !important;
    align-items: center;
    gap: .7rem;
    margin: 0 0 1rem;
  }
  .print-only-header img {
    width: 62px;
    height: auto;
  }
  .print-only-header span {
    font-family: Georgia, serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
  }

  /* Einkaufsliste erzwungen auf eine neue (zweite) Seite setzen, damit
     sie nicht mittendrin umbricht. Der zweite Logo-Header direkt davor
     rutscht dadurch automatisch mit auf den Anfang dieser neuen Seite. */
  .print-only-header-page2 {
    break-before: page;
    page-break-before: always;
  }
  .weekplan-list-heading {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Wochenplan-Seite: kompletten Plan + Einkaufsliste drucken,
     nur Werbe-/Interaktionselemente ausblenden */
  .newsletter-section, .faq-section, .plan-eyebrow, #plan-merkliste-trigger {
    display: none !important;
  }
  .oma-section .hero-actions {
    display: none !important;
  }
  /* Gezieltes Drucken: ist body[data-print-scope] gesetzt, wird jeder
     Plan-Block ausgeblendet, dessen ID NICHT in data-print-ids steht
     (siehe assets/js/print-section.js). Ohne data-print-scope (z. B.
     bei Strg+P ohne Knopfdruck) bleibt alles wie gewohnt sichtbar. */
  body[data-print-scope]:not([data-print-ids*=" plan-klassisch "]) #plan-klassisch,
  body[data-print-scope]:not([data-print-ids*=" plan-merkliste "]) #plan-merkliste,
  body[data-print-scope]:not([data-print-ids*=" plan-fleisch "]) #plan-fleisch,
  body[data-print-scope]:not([data-print-ids*=" plan-vegetarisch "]) #plan-vegetarisch,
  body[data-print-scope]:not([data-print-ids*=" plan-fisch "]) #plan-fisch {
    display: none !important;
  }
  .oma-section {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 1.2rem 0 !important;
  }
  .shopping-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .weekplan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Rezeptbilder sollen im Ausdruck/PDF sichtbar UND anklickbar bleiben
     (verlinkt auf die jeweilige Rezeptseite) - vorher hier ausgeblendet. */
  .weekplan-day-photo {
    display: block !important;
    max-width: 90px !important;
    margin: 0 auto .4rem !important;
  }
  /* Kurze Rezeptbeschreibung: auf dem Bildschirm bewusst ausgeblendet
     (".weekplan-day.compact p{display:none}"), im Druck wieder sichtbar. */
  .weekplan-day.compact p {
    display: block !important;
    font-size: .72rem !important;
    line-height: 1.35 !important;
    margin: .2rem 0 !important;
  }
  /* Rezeptkarten nie mitten durchschneiden. */
  .weekplan-day {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Hinweistext, dass Rezeptbilder anklickbar sind - nur im Druck sichtbar.
     Kombinierter Selektor (statt nur .print-only-hint), damit die Regel
     zuverlaessig die spaeter folgende .price-verified{font-size:.72rem}
     Regel ueberstimmt, unabhaengig von der Reihenfolge im Stylesheet. */
  .price-verified.print-only-hint {
    display: block !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    padding: .85rem 1.1rem !important;
    line-height: 1.4 !important;
  }

  /* Rezeptseiten: interaktive Elemente ausblenden ... */
  .recipe-action-row, .recipe-rating-line, .inline-rating-box,
  .recipe-rating-box, .made-it-box, .compact-share-message {
    display: none !important;
  }

  /* ... und den Rest kompakt setzen, damit ein Rezept auf 1-2 statt
     4-5 Seiten passt. */
  .recipe-article {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .recipe-article h1 {
    font-size: 1.5rem !important;
    margin-bottom: .3rem !important;
  }
  .breadcrumbs {
    font-size: .68rem !important;
    margin-bottom: .3rem !important;
  }
  .recipe-intro, .recipe-author {
    font-size: .85rem !important;
    margin: .15rem 0 !important;
  }
  .recipe-main-image {
    margin: .6rem 0 !important;
  }
  .recipe-main-image img {
    max-height: 130px !important;
    object-fit: cover !important;
  }
  .recipe-time-card {
    margin: .5rem 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .recipe-time-card div {
    padding: .35rem !important;
    border-right: 1px solid var(--border) !important;
  }
  /* Gegen mobile Handy-Regeln absichern: Tabellen sollen beim Drucken
     immer als normale Tabelle erscheinen, nicht gestapelt/scrollbar
     (manche mobile Browser wenden Bildschirm-Regeln auch beim Drucken an). */
  table {
    display: table !important;
    white-space: normal !important;
    overflow-x: visible !important;
    width: 100% !important;
  }
  .recipe-time-card strong {
    font-size: .68rem !important;
    margin-bottom: .1rem !important;
  }
  .recipe-time-card span {
    font-size: .8rem !important;
  }
  .recipe-price-check, .recipe-ingredients, .recipe-method {
    margin: .5rem 0 !important;
  }
  .recipe-price-check h2, .recipe-ingredients h2, .recipe-method h2 {
    font-size: 1.05rem !important;
    margin-bottom: .3rem !important;
  }
  .price-verified {
    font-size: .72rem !important;
    margin: .2rem 0 !important;
  }
  .recipe-cost-table {
    margin-top: .4rem !important;
  }
  .recipe-cost-table th, .recipe-cost-table td {
    padding: .3rem .5rem !important;
    font-size: .82rem !important;
  }
  .recipe-ingredients h3 {
    font-size: .95rem !important;
    margin-top: .55rem !important;
  }
  .recipe-ingredients li {
    margin: .2rem 0 !important;
    font-size: .85rem !important;
  }
  .method-step {
    margin: .4rem 0 !important;
    break-inside: avoid;
  }
  .method-step span {
    font-size: .78rem !important;
    margin-bottom: .05rem !important;
  }
  .method-step p {
    font-size: .85rem !important;
  }
}


/* ============ Merkliste (Favoriten) ============ */
.nav-merkliste-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 .35rem;
  margin-left: .35rem;
  border-radius: 999px;
  background: #5f7d61;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2rem;
  vertical-align: middle;
}
.nav-merkliste-badge.is-empty { background: var(--border, #ddd); color: var(--muted, #777); }

.card-merkliste-button {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbb26a;
  transition: transform .15s ease;
}
.card-merkliste-button:hover { transform: scale(1.08); }
.card-merkliste-button.is-active { color: #e0a500; }

.merkliste-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: var(--card);
  border-radius: 18px;
}
.merkliste-empty .button { margin-top: 1rem; display: inline-block; }

.merkliste-item {
  display: block;
  background: var(--card);
  border-radius: 18px;
  padding: 1.6rem 1.8rem !important;
  margin: 0 auto 1.8rem !important;
  max-width: 100% !important;
  box-shadow: 0 10px 24px rgba(43,36,25,.07);
}
.merkliste-item h1 {
  font-size: 1.7rem !important;
  max-width: none;
}
.merkliste-item .recipe-main-image img { max-height: 320px; object-fit: cover; }
.merkliste-item .servings-control { margin-bottom: .6rem; }
.merkliste-item-actions { text-align: right; margin-bottom: .5rem; }
.merkliste-remove {
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: .3rem .9rem;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.merkliste-remove:hover { background: #fbeaea; border-color: #d98; }

.merkliste-summary {
  background: var(--accent-soft, #e7efe8);
  border-radius: 18px;
  padding: 1.2rem 1.4rem;
  margin: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.merkliste-summary strong { font-size: 1.25rem; color: var(--accent-dark); }

@media (max-width: 560px) {
  .merkliste-item-head { grid-template-columns: 1fr; }
  .merkliste-item-photo img { width: 100%; height: auto; aspect-ratio: 4/3; }
}

@media print {
  .merkliste-remove, .merkliste-item-actions, .merkliste-summary .button,
  .site-header, .site-footer, .servings-stepper button, .weekplan-day-remove {
    display: none !important;
  }
  .merkliste-summary {
    background: none;
    padding: 0;
    margin: 0 0 .5rem;
    font-size: .8rem;
  }
  .merkliste-summary strong {
    font-size: .85rem !important;
  }
  /* Jedes gemerkte Rezept beginnt auf einer neuen Seite, genau wie beim
     Drucken einer einzelnen Rezeptseite - siehe print-only-header-page2. */
  .merkliste-item {
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ============ Zufalls-Rezept Vorschlag (Startseite) ============ */

/* ============ Wochenplan aus Merkliste ============ */
.merkliste-plan-box { text-align: left; }
.merkliste-plan-warning {
  font-weight: 700;
  color: var(--accent-dark, #a9432b);
  margin: .8rem 0 0;
}
.merkliste-plan-empty-msg { margin: 0 0 .8rem; }

p.merkliste-plan-subtitle {
  text-align: center;
  color: var(--muted);
  max-width: 900px;
  margin: 0 auto 1.8rem;
}
.merkliste-plan-steps-visual {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}
.merkliste-plan-step {
  flex: 1 1 180px;
  max-width: 220px;
  text-align: center;
}
.merkliste-plan-step-icon {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .9rem;
}
.merkliste-plan-step-icon svg { width: 2rem; height: 2rem; }
.merkliste-plan-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--accent-dark);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  margin-right: .4rem;
  vertical-align: middle;
}
.merkliste-plan-step-title {
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 .3rem;
}
.merkliste-plan-step-desc {
  color: var(--muted);
  font-size: .9rem;
  margin: 0;
}
.merkliste-plan-step-arrow {
  color: var(--border);
  font-size: 1.8rem;
  line-height: 1;
  align-self: center;
  margin-top: 2.1rem;
}
.merkliste-plan-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
  background: var(--card);
  border-radius: 16px;
  padding: 1.2rem 1.2rem 1.3rem;
  margin-bottom: 1.5rem;
}
.merkliste-plan-tip-icon {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--herb);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 .2rem;
}
.merkliste-plan-tip-icon svg { width: 1.2rem; height: 1.2rem; }
.merkliste-plan-tip p { margin: 0 0 .3rem; }
.merkliste-plan-tip p:last-child { margin-bottom: 0; }
.merkliste-plan-btn-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: -3px;
  margin-right: .35rem;
}
@media (max-width: 700px) {
  .merkliste-plan-steps-visual { flex-direction: column; align-items: center; }
  .merkliste-plan-step-arrow { display: none; }
  .merkliste-plan-step { max-width: 320px; }
}
.merkliste-plan-discover-row {
  text-align: center;
  margin-top: 1.6rem;
}
#merkliste-plan-clear[hidden], #merkliste-plan-button[hidden] { display: none; }
#merkliste-plan-button:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ============ "Mein Vorschlag" Hinweis oben rechts im Wochenplan ============ */
.weekplan-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem 1rem;
}
.weekplan-heading-row h2 { margin: 0; }
.weekplan-suggestion-note { margin: 0; white-space: nowrap; }

/* ============ Rezepte-Uebersicht: Ueberschrift buendig zu Kartentext ============ */
/* Rezeptkarten haben 1.4rem Innenabstand (.recipe-card a { padding: 1.3rem 1.4rem ... }),
   dadurch beginnt der Kartentitel sichtbar eingerueckt. Die Ueberschrift sass bisher
   buendig am aeusseren Containerrand - dieser Wrapper gleicht das an. */
.rezepte-heading { padding-left: 1.4rem; }

/* ============ Über-Seite: "Unser Versprechen" Karten ============ */
.promise-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.3rem 0 2.4rem;
}
.promise-card {
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.1rem 1rem;
  text-align: center;
  box-shadow: 0 8px 20px rgba(43, 36, 25, .06);
}
.promise-card strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--accent-dark);
  font-size: .95rem;
}
.promise-card p {
  margin: 0;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.4;
}
@media (max-width: 900px) {
  .promise-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .promise-grid { grid-template-columns: 1fr; }
}

/* ============ Startseite: "Unser Versprechen" (10-€-Check) zentriert ============ */
.preischeck-centered {
  display: flex;
  justify-content: center;
}
.preischeck-text {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 0 1rem;
}