/* Satt unter 5 – gemeinsames Design fuer alle Rezeptseiten (rezepte/*.html) */
/* Ausgelagert am 30.07.2026 aus 75x identischem Inline-<style>-Block, siehe Projektdoku */
html{overflow-x:hidden}
:root{
  --lime:#b9f400; --lime2:#9ce900; --black:#090909; --grey:#f4f5f2;
  --line:#e7e9e3; --text:#171717; --muted:#666; --radius:20px;
}
*{box-sizing:border-box}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
html{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,Arial,sans-serif;color:var(--text);background:#fff;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.btn{display:inline-flex;align-items:center;gap:12px;padding:17px 30px;border-radius:999px;font-weight:800;font-size:15px;transition:.2s;border:0;cursor:pointer;font-family:inherit}
.btn:hover{transform:translateY(-2px)}
.btn-lime{background:var(--lime);color:#000}
.btn-black{background:#070707;color:#fff}
/* Grok-Feedback V143: "Rezept drucken" soll visuell schwächer wirken als der primäre
   CTA ("Jetzt nachkochen") - sekundärer Outline-Stil statt gleichwertigem Schwarz-Button. */
.print-btn.btn-black{background:transparent;color:var(--text);border:1.5px solid var(--line)}
.print-btn.btn-black:hover{background:var(--grey)}

/* Header */
.site-header{height:100px;display:flex;align-items:center;justify-content:space-between}
.brand img{width:165px;height:70px;object-fit:contain;object-position:left center;transform:rotate(-1.5deg);transform-origin:left center}
.back-link{font-size:14px;font-weight:700}
.nav{display:flex;gap:26px;font-size:14px;font-weight:700}.nav-toggle-input{display:none}.nav-toggle-label{display:none;width:44px;height:44px;border-radius:50%;background:var(--lime);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px;border:0;justify-self:end}.nav-toggle-label span{width:20px;height:2px;background:#111;border-radius:2px;display:block}
.nav a.active{color:#78b900}

/* Zurück-Button (PWA-Fix 05.09.2026): im Standalone-Modus (Homescreen-App) fehlt das
   System-"Zurück" komplett (kein Browser-Chrome, keine Adressleiste) - ohne diesen Button
   war eine geöffnete Rezeptseite dort eine Sackgasse zurück zur Liste. Immer sichtbar (nicht
   nur im Standalone-Modus) - einfacher als eine Erkennung von display-mode:standalone, und
   schadet in der normalen Browser-Ansicht nicht. Mindestens 44x44px Tapfläche (Apple/Google-
   Empfehlung für Touch-Ziele). Siehe recipe.js für die history.back()-Logik dahinter. */
/* Nutzerwunsch 05.09.2026: Button wurde als schwaches Hellgrau leicht übersehen - jetzt in
   der Marken-Lime-Farbe (wie die primären CTAs), damit er sofort ins Auge fällt. */
.back-to-list{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 20px;margin-bottom:16px;background:var(--lime);border:1px solid var(--lime);border-radius:999px;font-size:14.5px;font-weight:800;color:#0a1a00}
.back-to-list:hover{background:var(--lime2);border-color:var(--lime2)}
/* Zweiter Zurück-Button unten am Seitenende (Nutzerwunsch 05.09.2026): nach den "Weitere
   Rezepte"-Karten, damit man nicht erst wieder ganz nach oben scrollen muss. */
.back-to-list-bottom{margin:8px 0 40px}

/* Breadcrumb */
.breadcrumb{font-size:12.5px;color:var(--muted);margin-bottom:18px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:#78b900}
.breadcrumb span{margin:0 6px}

/* Hero */
.recipe-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center;padding:6px 0 30px}
.recipe-hero h1{font:400 clamp(38px,4.6vw,58px)/1.05 Anton,'Anton Fallback',sans-serif;text-transform:uppercase;margin:0 0 18px}
.recipe-hero .lead{font-size:17px;line-height:1.6;color:#333;margin:0 0 22px;max-width:460px}
.badge-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.badge-row span{background:var(--grey);border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px}
.single-note{background:var(--lime2);color:#0a1a00;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:14px;font-size:13.5px;font-weight:700;margin-bottom:26px;max-width:100%}

.hero-media{position:relative}
.hero-media picture{border-radius:36px;overflow:hidden;display:block;box-shadow:0 26px 60px rgba(0,0,0,.16)}
.hero-media img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover}
.price-sticker{
  position:absolute;top:-18px;right:-14px;background:var(--lime);
  padding:20px 26px;border-radius:20px;transform:rotate(-7deg);
  box-shadow:0 14px 30px rgba(0,0,0,.22);text-align:center;line-height:1
}
.price-sticker strong{display:block;font:400 40px/1 Anton,'Anton Fallback',sans-serif}
.price-sticker span{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.price-sticker .per-portion{display:block;margin-top:4px;font-size:11px;font-weight:700;text-transform:none;letter-spacing:0;opacity:.75}

.photo-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#eef1e6,#e2e7d6);color:#8b9a78;text-align:center}
.photo-ph .ph-icon{font-size:56px;line-height:1}
.photo-ph .ph-text{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#93a380;padding:0 12px}
.hero-media .photo-ph{border-radius:36px;height:520px;box-shadow:0 26px 60px rgba(0,0,0,.1)}

@media(max-width:900px){

  /* Grok-Feedback V144: Newsletter-Leiste kostet auf Rezeptseiten First-Screen-Höhe,
     bevor Bild+Preis sichtbar sind. Nur auf Rezeptseiten (dieses CSS wird ausschließlich
     dort geladen) und nur auf Mobile ausblenden - site-nav.js misst die Header-Höhe live
     per header.offsetHeight, zieht sich also automatisch mit zusammen, kein JS-Umbau nötig.
     Startseite/Kategorien/etc. sind von diesem CSS nicht betroffen, Leiste bleibt dort. */
  .sn-newsbar{display:none}
  /* Grok-Feedback V144: Breadcrumb bricht bei langen Rezepttiteln zweizeilig um - auf
     Mobile stattdessen einzeilig mit Ellipsis abschneiden statt HTML pro Seite anzufassen. */
  .breadcrumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .recipe-hero{grid-template-columns:minmax(0,1fr);gap:18px}
  .hero-media img{height:auto}
  .hero-media .photo-ph{height:340px}
  .price-sticker{right:10px}
  .hero-media{order:-1;margin-bottom:6px}
  .recipe-hero h1{font-size:clamp(24px,7vw,34px);line-height:1.12;margin:0 0 10px}
  .recipe-hero .lead{margin:0 0 16px}
  .single-note{font-size:12.5px;padding:9px 14px;margin-bottom:18px}
  /* Grok-Feedback V143: "Lebst du allein?"-Hinweis wirkt direkt unter dem Titel zu laut ->
     per Flex-Order ans Ende des Text-Blocks schieben (nach den Buttons), ohne HTML anzufassen. */
  .recipe-hero > div:first-child{display:flex;flex-direction:column}
  .recipe-hero .single-note{order:1;margin-top:4px}
  /* Grok-Feedback V143: Kurzbeschreibung steht doppelt (im Hero als .lead UND nochmal in
     .intro-summary) - auf Mobile reicht einmal, .lead im Hero bleibt, intro-summary raus. */
  .intro-summary{display:none}
}

/* Intro Summary */
.intro-summary{background:var(--grey);border-radius:20px;padding:30px 34px;margin:10px 0 46px}
.intro-summary p{font-size:19px;line-height:1.55;margin:0;font-weight:500;max-width:820px}

/* Section title */
.section-title{font:400 27px/1 Anton,'Anton Fallback',sans-serif;text-transform:uppercase;margin:0 0 24px;border-bottom:4px solid var(--lime);display:inline-block;padding-bottom:4px}

/* Zutaten + Preis */
.two-col{display:grid;grid-template-columns:1.15fr 1fr;gap:30px;margin-bottom:54px;align-items:start}
.ingredient-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:8px;box-shadow:0 8px 22px rgba(0,0,0,.035)}
.ingredient-card ul{list-style:none;margin:0;padding:0}
.ingredient-card li{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid #f0f1ec;font-size:14.5px}
.ingredient-card li:last-child{border-bottom:0}
.ingredient-card li input[type=checkbox]{width:18px;height:18px;accent-color:var(--lime2);flex-shrink:0}
.ingredient-card li.checked{color:#aaa;text-decoration:line-through}
.ingredient-group-label{font-size:11.5px;font-weight:800;text-transform:uppercase;color:var(--muted);padding:14px 16px 4px}

.price-card{background:var(--black);color:#fff;border-radius:20px;padding:26px 26px 22px}
.price-card h3{font:400 19px/1 Anton,'Anton Fallback',sans-serif;text-transform:uppercase;margin:0 0 16px;color:var(--lime)}
.price-line{display:flex;justify-content:space-between;font-size:13.5px;padding:9px 0;border-bottom:1px solid #232323;color:#ddd}
.price-line span:last-child{font-weight:700;color:#fff}
.price-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-top:14px;border-top:2px solid var(--lime)}
.price-total strong{font:400 30px/1 Anton,'Anton Fallback',sans-serif;color:var(--lime)}
.price-per{font-size:12px;color:#999;margin-top:8px}
.nutrition-row{display:flex;gap:16px;margin-top:18px;flex-wrap:wrap}
.nutrition-row div{background:#161616;border-radius:10px;padding:8px 12px;text-align:center;flex:1;min-width:70px}
.nutrition-row strong{display:block;font-size:14px}
.nutrition-row span{font-size:9.5px;color:#999;text-transform:uppercase}

.portion-control{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:8px 14px;background:var(--lime);border-radius:999px;font-size:14px;font-weight:800;color:#000;width:fit-content}
.portion-btn{width:32px;height:32px;border-radius:50%;border:1px solid #000;background:#fff;font-size:17px;font-weight:900;cursor:pointer;display:grid;place-items:center;color:#000;transition:.15s;line-height:1}
.portion-btn:hover:not(:disabled){background:#000;color:#fff;border-color:#000}
.portion-btn:disabled{opacity:.3;cursor:not-allowed}
.zutaten-block{margin-bottom:54px}
.zutaten-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:8px 0 22px;box-shadow:0 8px 22px rgba(0,0,0,.035)}
.zutaten-table{width:100%;border-collapse:collapse;margin-top:4px}
.zutaten-table th{background:var(--grey);text-align:left;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);padding:10px 16px}
.zutaten-table th:last-child,.zutaten-table td:last-child{text-align:right}
.zutaten-table td{padding:12px 16px;font-size:14.5px;border-bottom:1px solid #f0f1ec}
.zutaten-table td:last-child{font-weight:700}
.zutaten-table tbody tr:last-child td{border-bottom:0}
.zutaten-total{display:flex;justify-content:space-between;align-items:center;background:var(--black);color:#fff;border-radius:14px;padding:16px 16px;margin:16px 0 0}
.zutaten-total .total-label{display:flex;flex-direction:column;gap:3px}
.zutaten-total .round-note{font-size:10.5px;font-weight:400;color:var(--lime)}
.zutaten-total strong{font:400 28px/1 Anton,'Anton Fallback',sans-serif;color:var(--lime)}
.zutaten-card .price-per{font-size:12px;color:#999;margin:10px 20px 0}.zutaten-motto{text-align:center;margin:8px 16px 14px;line-height:1.4;font-size:clamp(10.5px,.79vw + 8.4px,14.5px);color:#6b7280;font-weight:500}.zutaten-motto strong{color:var(--text);font-weight:700}
.price-note{text-align:center;font-weight:600;font-size:clamp(9.8px,calc(3.4vw - 1px),14px);letter-spacing:-.1px;color:var(--text);line-height:1.35;margin:14px 10px 0}.nutrition-disclaimer{text-align:center;font-size:clamp(10px,2.7vw,11.2px);font-weight:500;color:#6b7280;line-height:1.4;margin:4px 12px 0}.zutaten-card .nutrition-row{display:flex;gap:16px;margin:14px 16px 4px;flex-wrap:wrap}
.zutaten-card .nutrition-row div{background:var(--grey);border:1px solid var(--line);border-radius:10px;padding:8px 12px;text-align:center;flex:1;min-width:70px}
.zutaten-card .nutrition-row strong{display:block;font-size:14px;color:var(--text)}
.zutaten-card .nutrition-row span{font-size:9.5px;color:var(--muted);text-transform:uppercase}
@media(max-width:820px){ .two-col{grid-template-columns:minmax(0,1fr)} }

/* Zubereitung */
.steps{margin-bottom:20px}
.step{display:grid;grid-template-columns:64px 1fr;gap:22px;margin-bottom:34px}
.step-num{width:56px;height:56px;border-radius:50%;background:var(--black);color:var(--lime);display:grid;place-items:center;font:400 22px/1 Anton,'Anton Fallback',sans-serif;flex-shrink:0}
.step h3{font-family:Poppins,sans-serif;font-weight:800;font-size:16.5px;text-transform:none;margin:6px 0 8px;letter-spacing:0}
.step p{font-size:14.5px;line-height:1.6;color:#333;margin:0;max-width:640px}
.step-photo{grid-column:2;margin-top:16px;border-radius:18px;overflow:hidden;max-width:520px;box-shadow:0 10px 26px rgba(0,0,0,.1)}
.step-photo img{height:280px;object-fit:cover;width:100%}
@media(max-width:600px){
  .step{grid-template-columns:48px 1fr;gap:14px}
  .step-num{width:44px;height:44px;font-size:17px}
  .step-photo{grid-column:1/-1}
  .zutaten-total{gap:10px}
  .zutaten-total .round-note{font-size:9.5px}
  .zutaten-total strong{white-space:nowrap}
}

/* Spartipp */
.spartipp{background:var(--black);color:#fff;border-radius:22px;padding:34px 38px;display:flex;gap:20px;align-items:flex-start;margin:50px 0}
.spartipp .icon{width:46px;height:46px;border-radius:50%;background:var(--lime);display:grid;place-items:center;font-size:20px;flex-shrink:0}
.spartipp .spartipp-title{font:400 20px/1 Anton,'Anton Fallback',sans-serif;text-transform:uppercase;margin:2px 0 10px;color:var(--lime)}
.spartipp p{margin:0;font-size:14.5px;line-height:1.6;color:#ddd;max-width:640px}

/* FAQ */
.faq{margin:54px 0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:20px 4px;font-size:15.5px;font-weight:700;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:inherit;color:inherit}
.faq-q .plus{font-size:20px;color:#78b900;transition:transform .2s}
.faq-item.open .faq-q .plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-a p{font-size:14px;line-height:1.6;color:#444;padding:0 4px 20px;margin:0;max-width:680px}

/* Weitere Rezepte */
.more-recipes{margin:56px 0}
.recipe-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.recipe{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 6px 14px rgba(0,0,0,.05)}
.recipe-media{aspect-ratio:4/3;position:relative}
.recipe-media img{width:100%;height:100%;object-fit:cover}
.recipe-price{position:absolute;top:9px;left:9px;background:var(--lime);padding:5px 10px 4px;border-radius:14px;font-size:12px;font-weight:900;text-align:center}
.recipe-price::after{content:"Gesamt";display:block;font-size:7px;font-weight:700;letter-spacing:.3px;line-height:1;margin-top:1px;opacity:.65}
.recipe-body{padding:13px 14px 16px}
.recipe-title{font-size:13px;line-height:1.4;font-weight:700}
@media(max-width:760px){ .recipe-row{grid-template-columns:minmax(0,1fr)} }

/* Angebote + Spartipps Strip */
.mini-links{display:flex;gap:16px;flex-wrap:wrap;margin:54px 0}
.mini-link-card{flex:1;min-width:220px;background:var(--grey);border-radius:16px;padding:22px;border:1px solid var(--line)}
.mini-link-card h4{font:400 17px/1 Anton,'Anton Fallback',sans-serif;text-transform:uppercase;margin:0 0 8px}
.mini-link-card p{font-size:13px;color:var(--muted);margin:0 0 12px}
.mini-link-card a{font-size:13px;font-weight:700;color:#78b900}

/* Newsletter */
.newsletter{margin:20px 0 60px;background:var(--lime);border-radius:18px;padding:26px 30px;display:grid;grid-template-columns:1fr 1.4fr;align-items:center;gap:28px}
.newsletter h3{font:400 24px/1.35 Anton,'Anton Fallback',sans-serif;text-transform:uppercase;margin:0 0 4px}
.newsletter p{font-size:12.5px;margin:0}
.nform{display:flex;min-width:0}
.nform input{flex:1;min-width:0;padding:14px 18px;border:0;border-radius:999px 0 0 999px;font:inherit}
.nform button{border:0;border-radius:0 999px 999px 0;background:#060606;color:#fff;padding:0 25px;font-weight:800}
@media(max-width:700px){ .newsletter{grid-template-columns:minmax(0,1fr)} }

footer a{color:#666;text-decoration:underline}
footer{padding:14px 0 40px;text-align:center;color:#666;font-size:12px}
footer .footer-tagline{margin:0 0 10px;font:400 15px/1.2 Anton,'Anton Fallback',sans-serif;text-transform:uppercase;letter-spacing:.3px;color:var(--text)}

/* Druck-Kopfzeile mit Logo: per JS (recipe.js) einmalig vor <main> eingefügt,
   auf dem Bildschirm unsichtbar, erscheint nur beim Drucken. */
.print-header{display:none}

/* Druckansicht */
@media print{
  @page{margin:9mm}
  .sn-header,.back-to-list,.breadcrumb,.badge-row,.single-note,.print-btn,.favorite-inline,.recipe-hero .btn-lime,
  .spartipp,.faq,.more-recipes,.mini-links,.newsletter,footer,#cc-banner,#cc-settings-panel,#cc-footer-link,.step-photo,
  .intro-summary,.arrow-sketch,.hero-media .photo-ph{
    display:none !important;
  }
  body{background:#fff;color:#000;font-size:11px}
  .container{width:100%}
  /* Kopfzeile mit Logo auf JEDER physischen Druckseite: die von recipe.js/wochenplan.html
     eingefügte .print-header-Div (Logo-Bild + Text) wird per position:fixed oben links
     "angeheftet" - das reicht in Chrome/Chromium beim Drucken alleine NICHT (die fest
     positionierte Box würde die Überschrift auf Seite 1 überlappen, weil sie im druckbaren
     Bereich beginnt, nicht im Seitenrand). Deshalb zusätzlich oben in <main> Platz in exakt
     der Höhe der Kopfzeile reserviert (padding-top) - und mit box-decoration-break:clone
     dafür gesorgt, dass dieses Platzreservieren sich auf JEDEM Folge-Blatt wiederholt, nicht
     nur auf dem ersten (ohne das würde main seinen oberen Innenabstand nur einmal ganz am
     Anfang haben, wie bei einer normalen Box, die sich über mehrere Seiten aufteilt). Ein in
     die @page-Randbox (@top-left) eingebettetes Logo-BILD wurde mehrfach getestet und stellte
     sich als in diesem Chrome/Chromium-Druckmotor nicht zuverlässig darstellbar heraus (weder
     mit content:url() noch mit background-image) - über position:fixed + Platzreservierung
     funktioniert es dagegen zuverlässig mit dem echten kleinen Logo. */
  main{margin-top:0;padding-top:22px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .print-header{
    display:flex !important;align-items:center;gap:5px;margin:0;
    position:fixed;top:2px;left:0;
  }
  .print-header img{width:14px;height:14px;object-fit:contain}
  .print-header b{font:800 9px/1 Poppins,Arial,sans-serif;color:#000}
  .recipe-hero{grid-template-columns:1fr 130px;gap:14px;padding:0;align-items:start;margin-bottom:6px}
  .recipe-hero h1{font-size:24px;line-height:1.05;margin:0 0 6px}
  .recipe-hero .lead{font-size:11.5px;line-height:1.4;margin:0 0 6px;max-width:none}
  .hero-media{max-width:130px;order:2}
  .hero-media picture{box-shadow:none;border-radius:8px}
  .hero-media img{width:130px;aspect-ratio:4/3;height:auto;object-fit:cover}
  .price-sticker{position:static;transform:none;display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;align-items:baseline;margin-top:6px;padding:3px 8px;box-shadow:none;border:1px solid #000;border-radius:6px}
  .price-sticker strong{font-size:15px}
  .price-sticker span{font-size:9px}
  .price-sticker .per-portion{flex-basis:100%;margin-top:0}
  .portion-control{font-size:10.5px;margin:0 0 5px}
  .portion-btn{display:none}
  .zutaten-block{margin-bottom:8px}
  .section-title{font-size:15px;margin:0 0 6px;border-bottom:2px solid #000;padding-bottom:2px}
  .zutaten-card{box-shadow:none;border:1px solid #000;padding:2px 0 6px}
  .zutaten-table{margin-top:0}
  .zutaten-table th{background:#eee;color:#000;padding:3px 8px;font-size:8.5px}
  .zutaten-table td{color:#000;border-bottom:1px solid #ccc;padding:3px 8px;font-size:10.5px}
  .zutaten-total{background:#fff;color:#000;border:1px solid #000;padding:5px 10px;margin:5px 10px 0}
  .zutaten-total .round-note{color:#555}
  .zutaten-total strong{color:#000;font-size:15px}
  .price-per{color:#333;font-size:8.5px;margin:3px 10px 0}
  .nutrition-row{gap:6px;margin:6px 10px 2px}
  .nutrition-row div{background:#f4f5f2;color:#000;border:1px solid #ccc;padding:2px 6px}
  .nutrition-row strong{font-size:9.5px}
  .nutrition-row span{font-size:6.5px}
  .steps{margin-bottom:4px}
  .step{page-break-inside:avoid;grid-template-columns:24px 1fr;gap:8px;margin-bottom:6px}
  .step-num{width:22px;height:22px;font-size:10px}
  .step h3{font-size:11px;margin:1px 0 2px}
  .step p{font-size:10px;line-height:1.3;max-width:none}
  a[href]{color:#000}
}
@media(max-width:900px){.site-header{position:relative}.nav-toggle-label{display:flex}.nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:6px 0;margin:0;border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px;box-shadow:0 16px 28px rgba(0,0,0,.12);z-index:80}.nav a{padding:14px 22px;border-top:1px solid var(--line);font-size:15px}.nav a:first-child{border-top:0}.nav-toggle-input:checked ~ .nav{display:flex}}

/* Merkliste-Herz auf der Rezeptseite (inline, nicht absolut positioniert wie auf den Karten) */
.favorite-inline{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:19px;cursor:pointer;display:inline-grid;place-items:center;transition:.15s;flex-shrink:0}
.favorite-inline:hover{transform:scale(1.08)}
.favorite-inline.active{color:#e0325a;border-color:#e0325a}

/* Merkliste-Zähler-Badge im Hauptmenü */
.nav-merkliste-badge{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;margin-left:5px;border-radius:999px;background:var(--lime2);color:#000;font-size:10px;font-weight:800;vertical-align:2px}
.nav-merkliste-badge.is-empty{background:var(--line);color:#888}
/* Barrierefreiheit: Skip-Navigation + reduzierte Bewegung (WCAG 2.1/2.3.3) */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:9999;background:#78b900;color:#000;padding:12px 20px;border-radius:8px;font-weight:800;text-decoration:none}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;overflow:visible}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}