/* ============================================================
   will-mixen.de — Recipe Page Stylesheet
   Theme: willmixen2026-child (Astra Pro Child)
   Source: design_handoff_recipe_page/styles.css (Claude Design)
   Implementation: WordPress + Astra + WP Recipe Maker

   CONTENT:
   1. Font-Face (Gilroy + Perfectly Nineties, self-hosted)
   2. Tokens (:root CSS variables — palette "warm" default)
   3. Resets / Base
   4. Layout (page, hero, breadcrumb, quickfacts, TOC)
   5. Recipe Card (.recipe-card and sub-blocks)
   6. Affiliate / Author / Related / Mobile-Bar
   7. Print
   ============================================================ */

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Light.ttf') format('truetype');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Medium.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-SemiBold.ttf') format('truetype');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('../fonts/PerfectlyNineties-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('../fonts/PerfectlyNineties-RegularItalic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('../fonts/PerfectlyNineties-Semibold.ttf') format('truetype');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('../fonts/PerfectlyNineties-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

:root {
  /* Default palette (Variant A: warm cream) — overridden by data-theme */
  --bg: #fbf8f3;
  --bg-alt: #f3ecdf;
  --surface: #ffffff;
  --ink: #1a1a1a;
  --ink-2: #3d3d3d;
  --ink-3: #6b6b6b;
  --ink-4: #a8a8a8;
  --border: #ece5d6;
  --border-strong: #d8cdb5;
  --accent: #c2410c;       /* terracotta */
  --accent-fg: #ffffff;
  --accent-soft: #fdebe0;
  --accent-2: #65803a;     /* sage */
  --highlight: #f5d65a;    /* gold */
  --shadow-sm: 0 2px 8px rgba(26,26,26,0.05);
  --shadow-md: 0 8px 24px rgba(26,26,26,0.08);
  --shadow-lg: 0 20px 48px rgba(26,26,26,0.12);

  --font-serif: 'Perfectly Nineties', Georgia, serif;
  --font-sans: 'Gilroy', -apple-system, system-ui, sans-serif;

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  --maxw: 1240px;
  --readw: 720px;
}

/* Variant B: Fresh greens & off-white */
[data-theme="fresh"] {
  --bg: #f7f7f3;
  --bg-alt: #ebefe3;
  --surface: #ffffff;
  --ink: #1c2117;
  --ink-2: #3a4233;
  --ink-3: #6a7261;
  --ink-4: #a3aa9b;
  --border: #e3e8d8;
  --border-strong: #c8d1b6;
  --accent: #2d5a2a;        /* deep green */
  --accent-fg: #ffffff;
  --accent-soft: #e8efe0;
  --accent-2: #d97742;       /* tomato accent */
  --highlight: #f5c542;
}

/* Variant C: Bold modern (dark accent + cream) */
[data-theme="bold"] {
  --bg: #ffffff;
  --bg-alt: #f4f0e8;
  --surface: #ffffff;
  --ink: #0a0a0a;
  --ink-2: #2a2a2a;
  --ink-3: #5e5e5e;
  --ink-4: #a0a0a0;
  --border: #e8e8e3;
  --border-strong: #cfcfc8;
  --accent: #0a0a0a;
  --accent-fg: #ffffff;
  --accent-soft: #f0ede4;
  --accent-2: #e8542b;
  --highlight: #ffd23f;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ============================================================
   v0.8.6 — Mobile Horizontal-Overflow Fix
   ------------------------------------------------------------
   Hauptregel jetzt in global.css (site-weit).
   Hier nur Recipe-Page-spezifisches Layout-Fix.
   ============================================================ */

/* ============================================================
   v0.8.7 — Mobile Layout-Fix fuer <main>
   ------------------------------------------------------------
   Astra-Pro-Sidebar-Layout berechnet auf Mobile faelschlicher-
   weise eine fixe Width fuer #main (z.B. 425px statt 100%).
   Das fuehrt zu rechts-Overflow + linkem Leerraum.
   Override mit hoher Specificity damit Astra's Inline-/Plugin-
   Styles ueberschrieben werden.
   ============================================================ */
@media (max-width: 979px) {
  body.wm-recipe-page main,
  body.wm-recipe-page #main,
  body.wm-recipe-page .main {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.wm-recipe-page article,
  body.wm-recipe-page .article {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* wm-content-grid auf Mobile: kein zusaetzliches Padding */
  body.wm-recipe-page .wm-content-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

/* ----- Header ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(1.2);
}
.site-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 20px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
.brand__mark {
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-fg);
  display: grid; place-items: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.brand em {
  color: var(--accent);
  font-style: normal;
}
.nav {
  display: none;
  gap: 28px;
  margin-left: 16px;
  flex: 1;
}
.nav a {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  transition: color .15s;
}
.nav a:hover { color: var(--accent); }
.header-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  color: var(--ink-2);
  transition: all .15s;
}
.icon-btn:hover { border-color: var(--ink-2); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }

@media (min-width: 880px) {
  .nav { display: flex; }
}

/* ----- Breadcrumb ----- */
.breadcrumb {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 20px 0;
  font-size: 13px;
  color: var(--ink-3);
}
.breadcrumb a { text-decoration: none; color: var(--ink-3); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { margin: 0 6px; color: var(--ink-4); }

/* ----- Hero ----- */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px 20px 32px;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 880px) {
  .hero__grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
  }
}
.hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
}
.tag--ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--ink-3);
}
.hero h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(34px, 6.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: var(--ink);
  text-wrap: balance;
}
.hero__lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 20px;
  max-width: 56ch;
  text-wrap: pretty;
}
.hero__rating {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: 24px;
}
.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--highlight);
}
.stars svg { width: 16px; height: 16px; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-fg);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.05); }
.btn--ghost {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--ink); }
.btn svg { width: 16px; height: 16px; }

.hero__image {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-alt);
}
.hero__image img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero__image-badge {
  position: absolute;
  top: 16px; right: 16px;
  background: var(--surface);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 6px;
}
.hero__image-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2);
}

/* ----- Quick facts strip ----- */
.quickfacts {
  max-width: var(--maxw);
  margin: 0 auto 32px;
  padding: 0 20px;
}
.quickfacts__inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 8px;
  display: grid;
  /* Auto-fit: bei 4 Cells ergibt sich 4 Spalten, bei 3 Cells 3 Spalten etc. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
}
@media (max-width: 720px) {
  .quickfacts__inner { grid-template-columns: repeat(2, 1fr); }
}
.fact {
  padding: 14px 16px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.fact:nth-child(2n) { border-right: none; }
.fact:nth-last-child(-n+2) { border-bottom: none; }
@media (min-width: 720px) {
  .fact { border-bottom: none; border-right: 1px solid var(--border); }
  .fact:last-child { border-right: none; }
  .fact:nth-child(2n) { border-right: 1px solid var(--border); }
  .fact:last-child { border-right: none; }
}
.fact__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.fact__label svg { width: 12px; height: 12px; }
.fact__value {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.fact__value small {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  margin-left: 2px;
}

/* ----- Layout: content + sticky recipe ----- */
.main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 980px) {
  .main--sidebar {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 56px;
  }
  .main--inline {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
    gap: 0;
  }
}

/* ----- WPRM-style inline recipe card wrapper ----- */
.wprm-wrap {
  margin: 40px -8px 36px;
  position: relative;
}
.wprm-wrap .recipe-card {
  border-width: 2px;
  box-shadow: 0 1px 0 var(--border), 0 24px 48px -28px rgba(0,0,0,0.18);
}
.wprm-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wprm-label > span:first-child {
  font-weight: 700;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wprm-label > span:first-child::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--accent);
}
.wprm-label__plugin { opacity: 0.55; }
@media (max-width: 600px) {
  .wprm-label__plugin { display: none; }
  .wprm-wrap { margin-left: 0; margin-right: 0; }
}

/* ----- Article body ----- */
.article {
  max-width: var(--readw);
}
.article p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 1.1em;
}
.article p strong { color: var(--ink); }
.article h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 40px 0 14px;
  color: var(--ink);
}
.article h2 .num {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  vertical-align: middle;
  margin-right: 10px;
  padding: 4px 8px;
  background: var(--accent-soft);
  border-radius: var(--r-pill);
  text-transform: uppercase;
}
.article figure {
  margin: 28px 0;
}
.article figure img {
  width: 100%;
  border-radius: var(--r-lg);
  aspect-ratio: 16/10;
  object-fit: cover;
}
.article figcaption {
  font-size: 13.5px;
  font-style: italic;
  color: var(--ink-3);
  margin-top: 10px;
  text-align: center;
}

/* ----- Recipe Card (sticky) ----- */
.recipe-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  position: relative;
}
@media (min-width: 980px) {
  .recipe-aside { position: sticky; top: 90px; align-self: start; }
}

.recipe-card__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.recipe-card__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--ink);
  flex: 1;
}
.recipe-card__author {
  font-size: 13px;
  color: var(--ink-3);
}
.recipe-card__author a { color: var(--accent); text-decoration: none; }
.recipe-card__thumb {
  width: 72px; height: 72px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-alt);
}
.recipe-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.recipe-card__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 16px;
}

.recipe-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
.btn--small {
  padding: 10px 12px;
  font-size: 13px;
}
.btn--block { width: 100%; }

/* Portion stepper */
.portions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  background: var(--bg-alt);
  border-radius: var(--r-md);
  margin-bottom: 18px;
}
.portions__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.portions__count {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  min-width: 80px;
  text-align: center;
}
.portions__count small {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  margin-left: 4px;
}
.stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.step-btn {
  width: 34px; height: 34px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  display: grid; place-items: center;
  color: var(--ink);
  transition: all .12s;
}
.step-btn:hover:not(:disabled) { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.step-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Section heading inside card */
.rc-section-h {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rc-section-h .sub {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-4);
}

/* Ingredients */
.ingredients {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ingredient {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
}
.ingredient:last-child { border-bottom: none; }
.checkbox {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  display: grid; place-items: center;
  background: var(--surface);
  transition: all .12s;
}
.checkbox svg { width: 12px; height: 12px; opacity: 0; color: var(--accent-fg); }
.ingredient.checked .checkbox { background: var(--accent); border-color: var(--accent); }
.ingredient.checked .checkbox svg { opacity: 1; }
.ingredient.checked .ing__text { text-decoration: line-through; color: var(--ink-4); }
.ing__qty {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  min-width: 64px;
}
.ing__text {
  font-size: 15px;
  color: var(--ink-2);
  flex: 1;
  line-height: 1.45;
}
.ing__text small { color: var(--ink-3); display: block; font-size: 12.5px; margin-top: 1px; }

/* Steps */
.steps {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: all .15s;
}
.step.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.step.done .step__num {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.step__num {
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border-strong);
  background: var(--bg-alt);
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.step__body p {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
.step__body p strong { color: var(--ink); }
.step__used {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 8px;
}
.step__photo {
  margin: 14px 0 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  aspect-ratio: 16 / 10;
}
.step__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.step__photo:hover img { transform: scale(1.03); }

/* Steps section header with photo toggle (mirrors WPRM camera/eye icons) */
.rc-section-h--steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.step-photo-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.spt-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 9px;
  cursor: pointer;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.spt-btn + .spt-btn { border-left: 1px solid var(--border); }
.spt-btn:hover { color: var(--ink); }
.spt-btn.on {
  background: var(--ink);
  color: var(--surface);
}

.step__used span {
  font-size: 11.5px;
  padding: 3px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--ink-soft);
  font-family: var(--font-sans);
}

/* Affiliate / Rezept-Zubehör grid */
.affiliate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 520px) {
  .affiliate-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
.aff-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 10px 12px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.aff-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -12px rgba(0,0,0,0.18);
}
.aff-card__img {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
  background: var(--surface);
}
.aff-card__img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.aff-card__name {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.2;
  color: var(--accent);
  font-weight: 500;
}
.aff-card__sub {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 2px;
}
  background: var(--bg-alt);
  border-radius: var(--r-pill);
  color: var(--ink-3);
}

/* Cook mode toggle */
.cook-mode-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-md);
  margin-bottom: 16px;
  font-size: 13px;
}
.cook-mode-bar .left { display: flex; align-items: center; gap: 10px; }
.cook-mode-bar svg { width: 14px; height: 14px; }
.toggle {
  position: relative;
  width: 38px; height: 22px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bg);
  transition: transform .18s;
}
.toggle.on { background: var(--highlight); }
.toggle.on::after { transform: translateX(16px); }

/* Nutrition */
.nutrition {
  background: var(--bg-alt);
  border-radius: var(--r-md);
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.nut {
  text-align: center;
}
.nut__v {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.nut__l {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-top: 2px;
}

/* Notes box */
.notes-box {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 14px 16px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-bottom: 18px;
}
.notes-box strong { color: var(--ink); }
.notes-box p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* TOC (mobile shown above body, desktop sticky) */
/* TOC — horizontal pill-style. body-Prefix gegen Astra-Specifity. */
body.wm-recipe-page .toc {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin: 0 0 32px !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  list-style: none !important;
}
body.wm-recipe-page .toc__label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-right: 4px;
  flex-shrink: 0;
}
body.wm-recipe-page .toc a {
  text-decoration: none !important;
  color: var(--ink-2) !important;
  padding: 5px 12px !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: all .15s;
}
body.wm-recipe-page .toc a:hover {
  color: var(--accent) !important;
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  body.wm-recipe-page .toc { padding: 12px 14px; gap: 6px; }
  body.wm-recipe-page .toc a { font-size: 12px; padding: 4px 10px !important; }
}

/* Author block */
.author-card {
  display: flex;
  gap: 18px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin: 32px 0;
}
.author-card__avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bg-alt);
  overflow: hidden;
}
.author-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-card__name {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 4px;
}
.author-card__bio {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 8px;
}
.author-card__link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

/* Related grid */
.related {
  margin-top: 56px;
}
.related__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.related h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.related__more {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 720px) {
  .related-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
.rcard {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .18s;
}
.rcard:hover { transform: translateY(-3px); }
.rcard__img {
  aspect-ratio: 4/5;
  border-radius: var(--r-md);
  background: var(--bg-alt);
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
}
.rcard__img img { width: 100%; height: 100%; object-fit: cover; }
.rcard__time {
  position: absolute;
  bottom: 8px; left: 8px;
  background: var(--surface);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--r-pill);
}
.rcard__title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--ink);
}
.rcard__meta {
  font-size: 12px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mobile sticky bottom bar */
.mobile-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  z-index: 40;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.04);
}
@media (min-width: 980px) {
  .mobile-bar { display: none; }
}
.mobile-bar .btn { flex: 1; padding: 12px; font-size: 14px; }

body { padding-bottom: 76px; }
@media (min-width: 980px) { body { padding-bottom: 0; } }

/* Footer */
.footer {
  background: var(--ink);
  color: var(--bg);
  padding: 56px 20px 32px;
  margin-top: 80px;
}
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.footer__top {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  margin-bottom: 40px;
}
@media (min-width: 720px) {
  .footer__top { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer h4 {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg-alt);
  margin: 0 0 14px;
  opacity: 0.6;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer a { color: var(--bg); text-decoration: none; font-size: 14px; opacity: 0.85; }
.footer a:hover { opacity: 1; }
.footer__brand {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.footer__brand em { color: var(--highlight); font-style: normal; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-4);
  flex-wrap: wrap;
  gap: 12px;
}

/* Ad placeholder (subtle, integrated) */
.ad-slot {
  margin: 32px 0;
  text-align: center;
}
.ad-slot__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-4);
  margin-bottom: 8px;
}
.ad-slot__box {
  background: var(--bg-alt);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 32px 16px;
  color: var(--ink-4);
  font-size: 13px;
}

/* Variant-specific subtle tweaks */
[data-theme="bold"] .hero h1 { font-weight: 700; }
[data-theme="bold"] .recipe-card { border: 2px solid var(--ink); border-radius: 0; }
[data-theme="bold"] .btn { border-radius: 0; }
[data-theme="bold"] .tag, [data-theme="bold"] .recipe-card__thumb { border-radius: 0; }
[data-theme="bold"] .quickfacts__inner { border-radius: 0; }
[data-theme="bold"] .step { border-radius: 0; }
[data-theme="bold"] .ingredient .checkbox { border-radius: 0; }

[data-theme="fresh"] .hero h1 { font-style: italic; font-weight: 400; }
[data-theme="fresh"] .article h2 { font-style: italic; font-weight: 400; }
[data-theme="fresh"] .recipe-card__title { font-weight: 400; font-style: italic; }


/* ============================================================
   WORDPRESS / ASTRA COMPAT
   ============================================================
   Diese Regeln greifen NUR auf Recipe-Posts (body.wm-recipe-page),
   weil die CSS auch nur dort enqueued wird. Zusaetzlich erhoehen
   wir mit dem body-Prefix die Spezifitaet gegenueber Astra-Defaults.
   ============================================================ */

/* Astra wraps content in #primary > .entry-content. Wir wollen unsere
   eigene Vollbreiten-Section-Logik (hero, quickfacts) nutzen — also
   die Standard-Gutter aufheben fuer unsere Top-Level Sections.
   !important wo noetig weil Astra hohe Spezifitaet hat. */
body.wm-recipe-page #primary,
body.wm-recipe-page .content-area,
body.wm-recipe-page .ast-no-sidebar #primary {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  flex: 1 0 100% !important;
}

body.wm-recipe-page .ast-container,
body.wm-recipe-page .site-content > .ast-container,
body.wm-recipe-page .ast-separate-container .site-content > .ast-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Astra Separate-Container Background neutralisieren — wir setzen unser eigenes */
body.wm-recipe-page.ast-separate-container .site-content,
body.wm-recipe-page .ast-separate-container .ast-article-single {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.wm-recipe-page .entry-header { display: none; }

/* Astra entry-content Resets, damit unsere Sections frei atmen */
body.wm-recipe-page .entry-content { padding: 0; margin: 0; }
body.wm-recipe-page .entry-content > * { max-width: none; }

/* Body Background auf unser Token */
body.wm-recipe-page {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
}

/* SIDEBAR — bleibt erhalten fuer Ad-Placement.
   Sidebar wird in single.php / archive.php INNERHALB von .wm-content-grid
   gerendert, daneben das Article. */
body.wm-recipe-page #secondary {
  display: block; /* Astra default war oft hidden in Customizer-Kontext */
}
/* Astra default-Sidebar AUSSERHALB unseres .wm-content-grid neutralisieren
   (es gibt nur eine Sidebar, unsere). Falls Astra sie in .ast-container
   ausserhalb #primary rendern wuerde, blenden wir die zweite aus. */
body.wm-recipe-page > .hfeed > #content > .ast-container > #secondary,
body.wm-recipe-page .site-content > .ast-container > #secondary {
  display: none;
}

/* ============================================================
   2-SPALTEN-LAYOUT: ARTICLE + SIDEBAR
   ============================================================ */
body.wm-recipe-page .wm-content-grid,
body.wm-archive-page .wm-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  max-width: 1240px;
  margin: 32px auto 0;
  padding: 0 20px;
  align-items: start;
}

body.wm-recipe-page .wm-content-grid #secondary,
body.wm-archive-page .wm-content-grid #secondary {
  position: sticky;
  top: 24px;
  align-self: start;
  /* Sidebar stylen damit Astra-Widget-Defaults zu unserem Look passen */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
}

body.wm-recipe-page .wm-content-grid #secondary .widget,
body.wm-archive-page .wm-content-grid #secondary .widget {
  margin-bottom: 24px;
}
body.wm-recipe-page .wm-content-grid #secondary .widget:last-child,
body.wm-archive-page .wm-content-grid #secondary .widget:last-child {
  margin-bottom: 0;
}
body.wm-recipe-page .wm-content-grid #secondary .widget-title,
body.wm-archive-page .wm-content-grid #secondary .widget-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Mobile: Sidebar unter Content stapeln */
@media (max-width: 980px) {
  body.wm-recipe-page .wm-content-grid,
  body.wm-archive-page .wm-content-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 16px;
  }
  body.wm-recipe-page .wm-content-grid #secondary,
  body.wm-archive-page .wm-content-grid #secondary {
    position: static;
    /* Auf mobile evtl. ganz aus — Ads kommen meistens nur Desktop */
  }
}

/* ============================================================
   FULLBLEED: Hero / Quickfacts / Mobile-Bar / Cat-Strip / Newsletter
   sollen die volle Viewport-Breite nutzen (ueber Sidebar drueber).
   Container-Breakout-Trick: 100vw mit calc-margins.
   ============================================================ */
body.wm-recipe-page .hero,
body.wm-recipe-page .quickfacts,
body.wm-recipe-page .breadcrumb,
body.wm-recipe-page .mobile-bar,
body.wm-archive-page .arc-hero,
body.wm-archive-page .cat-strip,
body.wm-archive-page .featured,
body.wm-archive-page .filterbar {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  position: relative;
  left: 0;
}

/* Innere Container der FullBleed-Sektionen behalten ihre 1240px max-width */
body.wm-recipe-page .hero__grid,
body.wm-recipe-page .quickfacts__inner,
body.wm-recipe-page .breadcrumb,
body.wm-archive-page .arc-hero__inner,
body.wm-archive-page .cat-strip__inner,
body.wm-archive-page .featured__inner,
body.wm-archive-page .filterbar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}

/* Astra Sidebar Layout-Class neutralisieren — die Sidebar steht jetzt
   in unserem .wm-content-grid, nicht im Astra-Default-Slot */
body.wm-recipe-page.ast-right-sidebar #primary,
body.wm-archive-page.ast-right-sidebar #primary {
  width: 100% !important;
  max-width: 100% !important;
}

/* Cook-Mode Active: dezenter Vollbild-Hint, dass Wake Lock aktiv ist */
body.cook-mode-active { box-shadow: inset 0 0 0 3px var(--highlight); }

/* Step-Photos Hidden Toggle (vom JS gesetzt) */
.recipe-card.photos-hidden .step__photo { display: none; }


/* ============================================================
   WPRM STANDARD OUTPUT COMPAT
   ============================================================
   Wenn das WPRM Custom Template NICHT greift (Fallback), sollen
   die WPRM-Default-Klassen trotzdem halbwegs zu unserem Design
   passen. Das ist KEIN Pixel-Match, sondern eine "passable"
   Notloesung damit nichts haesslich kaputt aussieht.
   ============================================================ */

/* Container der Standard-WPRM-Card */
.wprm-recipe-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  margin: 32px auto;
  max-width: 760px;
  font-family: var(--font-sans);
  color: var(--ink-2);
}

/* Recipe Title */
.wprm-recipe-name,
.wprm-recipe-roundup-item-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
}

/* Author / Summary */
.wprm-recipe-author { color: var(--ink-3); font-size: 14px; margin-bottom: 12px; }
.wprm-recipe-author a { color: var(--accent); text-decoration: none; }
.wprm-recipe-author a:hover { text-decoration: underline; }

.wprm-recipe-summary {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 16px;
  font-style: italic;
}

/* Section Headers */
.wprm-recipe-header,
.wprm-recipe-ingredients-header,
.wprm-recipe-instructions-header,
.wprm-recipe-equipment-header,
.wprm-recipe-nutrition-header,
.wprm-recipe-notes-header {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.4;
  color: var(--ink);
  margin: 24px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Stars */
.wprm-recipe-rating,
.wprm-recipe-rating .wprm-recipe-rating-star,
.wprm-recipe-rating svg { color: var(--highlight); fill: var(--highlight); }

.wprm-recipe-rating-details,
.wprm-recipe-rating-count { color: var(--ink-3); font-size: 13px; }

/* Times / Servings */
.wprm-recipe-times-container,
.wprm-recipe-servings-container {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: var(--bg-alt);
  border-radius: var(--r-md);
  margin: 4px 8px 4px 0;
  font-size: 13px;
}
.wprm-recipe-time-container-name,
.wprm-recipe-servings-container-name {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.wprm-recipe-prep-time,
.wprm-recipe-cook-time,
.wprm-recipe-total-time,
.wprm-recipe-servings,
.wprm-recipe-custom-time {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  font-size: 16px;
}

/* Ingredients */
.wprm-recipe-ingredients-container ul.wprm-recipe-ingredients,
.wprm-recipe-ingredients { list-style: none; padding: 0; margin: 0; }

.wprm-recipe-ingredient {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
  cursor: pointer;
  transition: background 0.15s;
}
.wprm-recipe-ingredient:hover {
  background: var(--accent-soft);
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: var(--r-sm);
}
.wprm-recipe-ingredient:last-child { border-bottom: 0; }

.wprm-recipe-ingredient-checkbox-container input[type="checkbox"] {
  appearance: none;
  width: 20px; height: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  margin-right: 4px;
  position: relative;
  flex-shrink: 0;
}
.wprm-recipe-ingredient-checkbox-container input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.wprm-recipe-ingredient-checkbox-container input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px; left: 6px;
  width: 5px; height: 10px;
  border: solid var(--accent-fg);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.wprm-recipe-ingredient-amount,
.wprm-recipe-ingredient-unit {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  font-size: 16px;
  letter-spacing: -0.01em;
}
.wprm-recipe-ingredient-name { color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.wprm-recipe-ingredient-name a { color: var(--accent); text-decoration: none; }
.wprm-recipe-ingredient-notes { color: var(--ink-3); font-size: 13px; font-style: italic; margin-left: 4px; }

/* Instructions */
.wprm-recipe-instructions-container ol,
.wprm-recipe-instructions { list-style: none; padding: 0; margin: 0; counter-reset: wprm-step; }

.wprm-recipe-instruction {
  position: relative;
  padding: 16px 16px 16px 60px;
  margin: 8px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  counter-increment: wprm-step;
  transition: border-color 0.15s, background 0.15s;
}
.wprm-recipe-instruction::before {
  content: counter(wprm-step);
  position: absolute;
  left: 14px; top: 14px;
  width: 36px; height: 36px;
  background: var(--bg-alt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--ink);
  font-size: 16px;
}
.wprm-recipe-instruction-text { color: var(--ink-2); line-height: 1.6; font-size: 15px; }
.wprm-recipe-instruction-text strong { color: var(--ink); font-weight: 600; }

.wprm-recipe-instruction-image,
.wprm-recipe-instruction-image-container img {
  border-radius: var(--r-md);
  margin-top: 12px;
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}
.wprm-recipe-instruction-image-container:hover img { transform: scale(1.03); }

/* Equipment */
.wprm-recipe-equipment-container { margin: 16px 0; }
.wprm-recipe-equipment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 520px) {
  .wprm-recipe-equipment { grid-template-columns: repeat(2, 1fr); }
}
.wprm-recipe-equipment-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  transition: transform 0.15s, border-color 0.15s;
}
.wprm-recipe-equipment-item:hover { transform: translateY(-2px); border-color: var(--accent); }
.wprm-recipe-equipment-item a { text-decoration: none; }
.wprm-recipe-equipment-image,
.wprm-recipe-equipment-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-sm);
  margin-bottom: 8px;
}
.wprm-recipe-equipment-name {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--accent);
  font-size: 15px;
  display: block;
  line-height: 1.3;
}

/* Notes */
.wprm-recipe-notes-container,
.wprm-recipe-notes {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 14px 16px;
  margin: 16px 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Nutrition */
.wprm-nutrition-label-container,
.wprm-recipe-nutrition-container {
  background: var(--bg-alt);
  border-radius: var(--r-md);
  padding: 16px;
  margin: 16px 0;
}
.wprm-nutrition-label-text-nutrition-container,
.wprm-recipe-nutrition {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.wprm-recipe-nutrition-label,
.wprm-nutrition-label-text-nutrition-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  display: block;
}
.wprm-recipe-nutrition-container .wprm-recipe-nutrition-value,
.wprm-nutrition-label-text-nutrition-amount {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  font-size: 22px;
  letter-spacing: -0.01em;
  display: block;
}

/* Servings Counter (Adjustable Servings) */
.wprm-recipe-servings-counter-button,
.wprm-recipe-adjustable-servings-button {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.18s;
}
.wprm-recipe-servings-counter-button:hover,
.wprm-recipe-adjustable-servings-button:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Buttons (Save / Print / Pin) */
.wprm-recipe-buttons-container,
.wprm-recipe-pin-print-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.wprm-recipe-print-button,
.wprm-recipe-pin-button,
.wprm-recipe-saved-button,
.wprm-recipe-buttons-container a,
.wprm-recipe-buttons-container button {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.18s;
  cursor: pointer;
}
.wprm-recipe-print-button:hover,
.wprm-recipe-pin-button:hover,
.wprm-recipe-saved-button:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Image */
.wprm-recipe-image,
.wprm-recipe-image img {
  border-radius: var(--r-md);
  width: 100%;
  height: auto;
}


/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .site-header,
  .ast-mobile-header,
  .breadcrumb,
  .toc,
  .ad-slot,
  .related,
  .mobile-bar,
  .author-card,
  .footer,
  .site-footer,
  .hero__cta,
  .recipe-card__actions,
  .cook-mode-bar,
  .step-photo-toggle,
  .wprm-recipe-buttons-container { display: none !important; }

  body.wm-recipe-page,
  .recipe-card,
  .wprm-recipe-container { background: #fff !important; box-shadow: none !important; border: none !important; }

  .recipe-card,
  .wprm-recipe-container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }

  .step,
  .wprm-recipe-instruction { break-inside: avoid; page-break-inside: avoid; }

  .article h2,
  .recipe-card__title,
  .wprm-recipe-name { color: #000 !important; }

  /* URLs ausgeben fuer Affiliate-Links */
  .aff-card[href]::after,
  .wprm-recipe-equipment a[href]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
}


/* ============================================================
   GLOBAL: overflow-x SCHUTZ (FullBleed-Trick mit 100vw kann
   sonst horizontale Scrollbars erzeugen)
   ============================================================ */
body.wm-recipe-page,
body.wm-archive-page,
body.wm-home-page {
  overflow-x: hidden !important;
}

/* ============================================================
   WPRM CLEANUP: alle WPRM-Default-Outputs unsichtbar machen die
   nicht zum Design passen (Snippet-Buttons, Jump-To-Recipe, alte
   RoarTheme-Pink-Buttons).
   ============================================================ */

/* ENTFERNT in v0.5.7:
   Die WPRM Klassen .wprm-recipe-snippet + .wprm-recipe-template-snippet-buttons-new
   sind auf will-mixen.de der Standard-Class-Name fuer DIE HAUPT-RECIPE-CARDS,
   nicht fuer Mini-Snippets. Wenn wir die hiden, sind alle Recipes leer.

   Die echten "Jump-To-Recipe" Inline-Buttons hiden wir nur ueber
   .wprm-recipe-jump unten. */

/* "Zum Rezept" + "Zum Video" + "Rezept drucken" Inline-Buttons im Content
   (RoarTheme/Astra-Pro Style mit pink/magenta) */
body.wm-recipe-page .wprm-recipe-jump,
body.wm-recipe-page .wprm-recipe-link.wprm-jump-to-recipe-shortcode,
body.wm-recipe-page .wprm-recipe-link.wprm-jump-to-video-shortcode,
body.wm-recipe-page .wprm-recipe-link.wprm-print-recipe-shortcode {
  /* Inline-Versions als dezente Tags statt pink Buttons */
  background: var(--bg-alt) !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-pill) !important;
  padding: 6px 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 4px 4px 4px 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.wm-recipe-page .wprm-recipe-jump:hover,
body.wm-recipe-page .wprm-recipe-link.wprm-jump-to-recipe-shortcode:hover,
body.wm-recipe-page .wprm-recipe-link.wprm-jump-to-video-shortcode:hover,
body.wm-recipe-page .wprm-recipe-link.wprm-print-recipe-shortcode:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Yoast/RankMath Breadcrumb ausblenden (wir haben unsere eigene) */
body.wm-recipe-page .ast-breadcrumbs,
body.wm-archive-page .ast-breadcrumbs,
body.wm-home-page .ast-breadcrumbs {
  display: none !important;
}

/* Astra Single-Post Header (Title, Meta) ausblenden — wir haben Hero */
body.wm-recipe-page .ast-single-post-header,
body.wm-recipe-page .post-thumb-img-content,
body.wm-recipe-page .post-thumb,
body.wm-recipe-page .ast-blog-single-element.ast-blog-meta-container,
body.wm-recipe-page .entry-title.ast-blog-post-title {
  display: none !important;
}

/* WPRM Comment-Rating-Form (am Ende vom Post) — moderner Look */
body.wm-recipe-page .wprm-comment-rating-container {
  margin: 24px 0;
}
body.wm-recipe-page .wprm-comment-rating-stars svg {
  color: var(--highlight) !important;
}


/* ============================================================
   MOBILE-POLISH (≤ 760px)
   ============================================================ */
@media (max-width: 760px) {
  /* Hero kleiner skalieren */
  body.wm-recipe-page .hero {
    padding: 16px 16px 24px;
  }
  body.wm-recipe-page .hero h1 {
    font-size: clamp(28px, 8vw, 40px);
  }
  body.wm-recipe-page .hero__cta {
    flex-wrap: wrap;
    gap: 8px;
  }
  body.wm-recipe-page .hero__cta .btn {
    font-size: 14px;
  }

  /* Quickfacts kompakter */
  body.wm-recipe-page .quickfacts {
    padding: 0 16px;
  }
  body.wm-recipe-page .fact {
    padding: 12px 14px;
  }
  body.wm-recipe-page .fact__value {
    font-size: 18px;
  }

  /* TOC weniger dominant auf Mobile */
  body.wm-recipe-page .toc {
    padding: 10px 14px !important;
  }

  /* Recipe-Card padding etwas reduzieren */
  body.wm-recipe-page .recipe-card {
    padding: 18px 16px;
  }

  /* Author-Card gestapelt */
  body.wm-recipe-page .author-card {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  body.wm-recipe-page .author-card__avatar {
    margin: 0 auto;
  }

  /* Mobile-Bar nicht ueberlappen mit Content */
  body.wm-recipe-page {
    padding-bottom: 76px;
  }
}

/* Sehr kleine Phones (≤ 380px) */
@media (max-width: 380px) {
  body.wm-recipe-page .hero h1 {
    font-size: 26px;
  }
  body.wm-recipe-page .recipe-card {
    padding: 14px 12px;
  }
  body.wm-recipe-page .ingredient {
    gap: 8px;
  }
  body.wm-recipe-page .step {
    padding: 12px 12px 12px 48px;
  }
  body.wm-recipe-page .step__num {
    width: 30px;
    height: 30px;
    font-size: 14px;
    left: 10px;
  }
}


/* ============================================================
   ENTFERNT in v0.5.6: SAFETY-NET (display:none) fuer WPRM-Container
   ============================================================
   Der the_content-Filter ist deaktiviert. WPRM rendert seine Cards
   in Standard-Form. Unser Compat-CSS oben styled sie passabel.
   Body-Content wird nicht mehr geloescht.

   Nur die Snippet-Templates (Mini-Card am Anfang) bleiben gehidet:
   ============================================================ */

/* ENTFERNT in v0.6.3:
   Der Selektor wprm-recipe-template-* hat ALLE WPRM-Custom-Templates
   versteckt — auch Tobias' "wprm-recipe-template-will-mixen-chic-2021"
   Custom Template (sein eigenes Card-Design). Damit waren ALLE Recipe-
   Cards leer/0px.
   Statt pauschal hide nutzen wir das Compat-Layer um Standard-WPRM-Output
   zu stylen. */


/* ============================================================
   RECIPE-CARD CONTAINER CONSTRAINT
   ============================================================
   Astra Pro Custom-Layout rendert `the_content` z.T. AUSSERHALB
   des normalen <article>-Containers. Damit unsere Card trotzdem
   sauber zentriert auf 760px steht (statt 100%-Viewport),
   constrainen wir `.recipe-card` und `.wprm-wrap` per CSS hart.
   ============================================================ */
body.wm-recipe-page .wprm-wrap {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 20px;
  box-sizing: border-box;
}

body.wm-recipe-page .recipe-card {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Falls .wprm-wrap selbst direkt in #content liegt — auch der inner Padding 20px */
@media (max-width: 760px) {
  body.wm-recipe-page .wprm-wrap {
    padding: 0 12px;
  }
  body.wm-recipe-page .recipe-card {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    width: calc(100% + 24px) !important;
  }
}

/* WPRM Label (Rezept | powered by WP Recipe Maker) auch begrenzen */
body.wm-recipe-page .wprm-label {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}


/* ============================================================
   WPRM SNIPPET-CARDS POLISH (v0.6.1)
   ============================================================
   WPRM rendert die Recipe-Card als "snippet" Variante:
     .wprm-recipe.wprm-recipe-snippet.wprm-recipe-template-snippet-buttons-new
   Das ist die HAUPT-Card, nicht eine Mini-Variante. Wir muessen alle
   pinken/magenta Buttons der Card explizit in unsere Tokens umschreiben.
   ============================================================ */

/* Container Polish: weicher Border, mehr Padding, unser Token-Background */
body.wm-recipe-page .wprm-recipe.wprm-recipe-snippet,
body.wm-recipe-page .wprm-recipe-template-snippet-buttons-new {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
  margin: 32px auto !important;
  max-width: 760px;
  box-shadow: var(--shadow-sm) !important;
  font-family: var(--font-sans) !important;
}

/* Title + Author + Lede-Block */
body.wm-recipe-page .wprm-recipe-name {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
  margin: 0 0 8px !important;
}
body.wm-recipe-page .wprm-recipe-author {
  color: var(--accent) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
}
body.wm-recipe-page .wprm-recipe-summary {
  color: var(--ink-2) !important;
  font-style: normal !important;
  font-size: 15px !important;
}

/* Stars + Rating-Count */
body.wm-recipe-page .wprm-recipe-rating-stars,
body.wm-recipe-page .wprm-recipe-rating svg,
body.wm-recipe-page .wprm-recipe-comment-rating svg {
  color: var(--highlight) !important;
  fill: var(--highlight) !important;
}

/* PINK BUTTONS → Terracotta */
body.wm-recipe-page .wprm-recipe-pin-button,
body.wm-recipe-page .wprm-recipe-print-button,
body.wm-recipe-page .wprm-recipe-saved-button,
body.wm-recipe-page .wprm-recipe-buttons-container > * {
  background: var(--surface) !important;
  border: 1.5px solid var(--border-strong) !important;
  border-radius: var(--r-pill) !important;
  color: var(--ink) !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
body.wm-recipe-page .wprm-recipe-pin-button:hover,
body.wm-recipe-page .wprm-recipe-print-button:hover,
body.wm-recipe-page .wprm-recipe-saved-button:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-fg) !important;
  transform: translateY(-1px);
}

/* Print-Button war besonders pink — explizit zähmen */
body.wm-recipe-page .wprm-recipe-print-button[style],
body.wm-recipe-page a.wprm-recipe-print[style] {
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--border-strong) !important;
}

/* Times / Servings / Course / Cuisine Boxes — Cream-Background */
body.wm-recipe-page .wprm-recipe-times-container,
body.wm-recipe-page .wprm-recipe-servings-container,
body.wm-recipe-page .wprm-recipe-course-container,
body.wm-recipe-page .wprm-recipe-cuisine-container,
body.wm-recipe-page .wprm-recipe-nutrition-label-container {
  background: var(--bg-alt) !important;
  border-radius: var(--r-md) !important;
  padding: 14px !important;
}

body.wm-recipe-page .wprm-recipe-time-container-name,
body.wm-recipe-page .wprm-recipe-servings-container-name,
body.wm-recipe-page .wprm-recipe-course-name,
body.wm-recipe-page .wprm-recipe-cuisine-name,
body.wm-recipe-page .wprm-recipe-nutrition-label-name {
  color: var(--ink-3) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

body.wm-recipe-page .wprm-recipe-time,
body.wm-recipe-page .wprm-recipe-servings-with-unit,
body.wm-recipe-page .wprm-recipe-course,
body.wm-recipe-page .wprm-recipe-cuisine,
body.wm-recipe-page .wprm-recipe-nutrition-amount {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  font-size: 18px !important;
}

/* Magenta/Pink-Akzent in Portionen-Zahl → Terracotta */
body.wm-recipe-page .wprm-recipe-servings-counter,
body.wm-recipe-page .wprm-recipe-servings-counter-value,
body.wm-recipe-page .wprm-recipe-servings-with-unit strong {
  color: var(--accent) !important;
}

/* Section Headers (ZUTATEN, ANLEITUNGEN, NÄHRWERTE etc.) */
body.wm-recipe-page .wprm-recipe-ingredients-header,
body.wm-recipe-page .wprm-recipe-instructions-header,
body.wm-recipe-page .wprm-recipe-equipment-header,
body.wm-recipe-page .wprm-recipe-nutrition-header,
body.wm-recipe-page .wprm-recipe-notes-header,
body.wm-recipe-page .wprm-recipe-video-header {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 8px !important;
  margin-top: 28px !important;
  margin-bottom: 14px !important;
}

/* Ingredient-Amounts in Serif */
body.wm-recipe-page .wprm-recipe-ingredient-amount,
body.wm-recipe-page .wprm-recipe-ingredient-unit {
  font-family: var(--font-serif) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
}

/* Ingredient-Notes muted (z.B. "Größe M") */
body.wm-recipe-page .wprm-recipe-ingredient-notes {
  color: var(--ink-3) !important;
}

/* Camera-Toggle (Schritt-Foto an/aus) Buttons in der Anleitung */
body.wm-recipe-page .wprm-recipe-instructions-toggle-container {
  background: var(--bg-alt) !important;
  border-radius: var(--r-pill) !important;
}


/* ============================================================
   SLICKSTREAM "MEHR IDEEN" SECTION POLISH
   ============================================================
   Slickstream rendert die "Related Recipes" Section automatisch.
   Wir constrainen die Container-Breite und uebersetzen Pink in
   Terracotta — damit's optisch zum Theme passt.
   ============================================================ */

body.wm-recipe-page [class*="slick-container"],
body.wm-recipe-page [class*="slickstream"],
body.wm-recipe-page .slickstream-related,
body.wm-recipe-page #slickstream-content,
body.wm-recipe-page [data-slickstream] {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-sans);
}

/* "Mehr Ideen" Header in Serif */
body.wm-recipe-page [class*="slick"] h2,
body.wm-recipe-page [class*="slickstream"] h2 {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 28px !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
}

/* Slickstream Heart-Icons in Terracotta */
body.wm-recipe-page [class*="slick"] svg[fill*="ec"],
body.wm-recipe-page [class*="slick"] [class*="heart"],
body.wm-recipe-page [class*="slick"] [class*="favorite"] {
  color: var(--accent) !important;
  fill: var(--accent) !important;
}

/* Slickstream "ZEIGE ALLES" Button + "MEHR" Pagination — Pink in Terracotta */
body.wm-recipe-page [class*="slick"] button,
body.wm-recipe-page [class*="slick"] a[role="button"],
body.wm-recipe-page [class*="slickstream"] button {
  color: var(--accent) !important;
  font-weight: 600 !important;
}
body.wm-recipe-page [class*="slick"] [style*="background"][style*="rgb(2"],
body.wm-recipe-page [class*="slick"] [style*="background-color"][style*="ec"] {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-radius: var(--r-pill) !important;
}

/* Slickstream Recipe-Card-Titles in unsere Body-Schrift */
body.wm-recipe-page [class*="slick"] [class*="title"],
body.wm-recipe-page [class*="slick"] [class*="card-title"] {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

/* Slickstream Search-Box im Token-Style */
body.wm-recipe-page [class*="slick"] input[type="search"],
body.wm-recipe-page [class*="slick"] input[type="text"] {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-pill) !important;
  background: var(--surface) !important;
  font-family: var(--font-sans) !important;
}
body.wm-recipe-page [class*="slick"] input[type="search"]:focus,
body.wm-recipe-page [class*="slick"] input[type="text"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: 0 !important;
}


/* ============================================================
   TOBIAS' CUSTOM WPRM-TEMPLATE: will-mixen-chic-2021
   ============================================================
   Tobias hat ein eigenes WPRM Premium Custom Template gebaut.
   Class: .wprm-recipe-template-will-mixen-chic-2021
   Wir stellen sicher dass es sichtbar ist und stylen die
   pinken Akzente in unsere Tokens um.
   ============================================================ */

body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 {
  display: block !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 24px !important;
  margin: 32px auto !important;
  max-width: 760px !important;
  box-shadow: var(--shadow-sm) !important;
  font-family: var(--font-sans) !important;
  color: var(--ink-2) !important;
}

/* Title in Serif */
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-name {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 26px !important;
  color: var(--ink) !important;
}

/* Author + Lede */
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-author {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* Pinke Buttons (Pin/Drucken) → Terracotta-Pills */
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-print,
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-pin,
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 a.wprm-recipe-print-shortcode,
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 a.wprm-recipe-pin-shortcode,
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 [class*="wprm-recipe-print"],
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 [class*="wprm-recipe-pin"] {
  background: var(--surface) !important;
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  border: 1.5px solid var(--border-strong) !important;
  border-radius: var(--r-pill) !important;
  padding: 12px 22px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-print:hover,
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 [class*="wprm-recipe-print"]:hover,
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 [class*="wprm-recipe-pin"]:hover {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-fg) !important;
}

/* Inline-Style-Override (WPRM nutzt oft inline style="background:#ec...") */
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 [style*="background-color: rgb(2"],
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 [style*="background-color:#ec"],
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 [style*="background:rgb(2"],
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 [style*="background:#ec"] {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
}

/* Magenta Akzent-Texte (Portionen-Wert, Star-Count) → Terracotta */
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 [style*="color: rgb(2"][style*="background"],
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 [style*="color:#ec"][style*="background"] {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
}

/* Times/Servings/Course/Cuisine Boxen */
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-times-container,
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-servings-container,
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-course-container,
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-cuisine-container {
  background: var(--bg-alt) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 12px !important;
}

/* Section Headers ZUTATEN/ANLEITUNGEN */
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-ingredients-header,
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-instructions-header,
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-equipment-header,
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-nutrition-header,
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-notes-header {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 8px !important;
  margin: 24px 0 14px !important;
}

/* Stars in Highlight-Gold */
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-rating svg,
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-rating-stars {
  color: var(--highlight) !important;
  fill: var(--highlight) !important;
}

/* Ingredient-Mengen in Serif */
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-ingredient-amount,
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 .wprm-recipe-ingredient-unit {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
}

/* Generic Magenta-Color-Override fuer alles im Template */
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 [style*="color: rgb(236"],
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 [style*="color:#ec"] {
  color: var(--accent) !important;
}


/* ============================================================
   v0.6.6 FIXES — User-Feedback nach v0.6.5 Live-Test
   ============================================================ */

/* ============================================================
   FIX: DOPPEL-BORDER auf Recipe-Cards
   ============================================================
   Tobias' "will-mixen-chic-2021" Custom Template hat einen
   eigenen Card-Border. Unser zusätzlicher Border in v0.6.3
   führt zu Doppel-Rahmen. → Outer Border entfernen.
   ============================================================ */
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  /* Container voll nutzen — kein hartes max-width */
  max-width: none !important;
  width: 100% !important;
}

/* ============================================================
   FIX: AFFILIATE / EQUIPMENT-CARDS (REZEPT-ZUBEHÖR)
   ============================================================
   Tobias' Custom-Template rendert Equipment-Items mit pinker
   Schrift + ohne Theme-Font. Wir überschreiben das.
   ============================================================ */
body.wm-recipe-page .wprm-recipe-equipment {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 16px 0 !important;
}
@media (max-width: 540px) {
  body.wm-recipe-page .wprm-recipe-equipment {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

body.wm-recipe-page .wprm-recipe-equipment-item,
body.wm-recipe-page .wprm-recipe-equipment li {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 12px !important;
  text-align: center !important;
  list-style: none !important;
  transition: all 0.15s !important;
}
body.wm-recipe-page .wprm-recipe-equipment-item:hover {
  border-color: var(--accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-sm) !important;
}

body.wm-recipe-page .wprm-recipe-equipment-image,
body.wm-recipe-page .wprm-recipe-equipment-item img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: var(--r-sm) !important;
  margin-bottom: 10px !important;
}

body.wm-recipe-page .wprm-recipe-equipment-name,
body.wm-recipe-page .wprm-recipe-equipment-item a,
body.wm-recipe-page .wprm-recipe-equipment-item span {
  font-family: var(--font-serif) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  display: block !important;
}
body.wm-recipe-page .wprm-recipe-equipment-name:hover {
  color: var(--ink) !important;
  text-decoration: underline !important;
}

/* Plus: Equipment-Notes (kleiner Subtitel) */
body.wm-recipe-page .wprm-recipe-equipment-notes {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  margin-top: 4px !important;
}

/* ============================================================
   FIX: HERO "DIREKT ZUM REZEPT" Button war dunkel
   ============================================================ */
body.wm-recipe-page .hero__cta .btn--primary {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border: 0 !important;
}
body.wm-recipe-page .hero__cta .btn--primary:hover {
  background: #a4360a !important;
  color: var(--accent-fg) !important;
}

/* ============================================================
   FIX: WPRM "Hat dir das Rezept geschmeckt?" PINK CTA
   ============================================================
   Das ist eine Tobias' "Mention us"-CTA mit pink Background.
   In Terracotta-Soft umstylen.
   ============================================================ */
body.wm-recipe-page [class*="wprm-recipe"] [style*="background-color: rgb(236"],
body.wm-recipe-page [class*="wprm-recipe"] [style*="background:#e91"],
body.wm-recipe-page .wprm-recipe-mention-shortcode,
body.wm-recipe-page [class*="mention"][style*="background"] {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  color: var(--accent-fg) !important;
}

/* WPRM Notizen-Box (peach background) */
body.wm-recipe-page .wprm-recipe-notes-container {
  background: var(--accent-soft) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
}

/* Naehrwerte-Box subtler */
body.wm-recipe-page .wprm-nutrition-label-container {
  background: var(--bg-alt) !important;
  border-radius: var(--r-md) !important;
  padding: 16px !important;
}

/* Hero-Gap zur naechsten Section reduzieren wenn Author-Card weg */
body.wm-recipe-page .wprm-recipe-author-bio,
body.wm-recipe-page [class*="wprm-recipe-author"] {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px !important;
  margin: 24px 0 !important;
}


/* ============================================================
   v0.6.7 — LAYOUT: Content full-width in Article-Spalte
   ============================================================
   User-Feedback: "Inhalt soll nicht zentriert auf 760px sein,
   sondern linksbuendig unter dem Hero-Text bis zum rechten Rand
   des Hero-Bildes."

   → Aufheben: max-width Constraints auf wprm-wrap, recipe-card,
     entry-content, TOC. Lass alles die volle Breite der Article-
     Spalte nutzen (~850px bei Sidebar-Layout, sonst 1240px).
   ============================================================ */

/* Article-Body Container voll ausnutzen */
body.wm-recipe-page .entry-content,
body.wm-recipe-page article.article {
  max-width: none !important;
  width: 100% !important;
}

/* Astra-Container für Single-Post: gleiche Breite wie Hero */
body.wm-recipe-page .wm-content-grid {
  /* maxw passt zum Hero-Container (1240px) — kein Zentrieren mehr */
}

/* WPRM-Wrap (unser Recipe-Card-Outer) — voll ausnutzen */
body.wm-recipe-page .wprm-wrap {
  max-width: none !important;
  width: 100% !important;
  margin: 32px 0 !important;
  padding: 0 !important;
}

/* Recipe-Card (unser Custom + Tobias' Custom Template) — voll ausnutzen */
body.wm-recipe-page .recipe-card {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.wm-recipe-page .wprm-recipe.wprm-recipe-snippet,
body.wm-recipe-page .wprm-recipe-template-snippet-buttons-new {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* TOC voll ausnutzen */
body.wm-recipe-page .toc {
  max-width: none !important;
  width: 100% !important;
}

/* WPRM Container/Items linksbündig */
body.wm-recipe-page .wprm-recipe-container {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Astra .entry-content max-width Override (Astra setzt oft 720px) */
body.wm-recipe-page .entry-content > * {
  max-width: 100% !important;
}

/* Aber: Body-Text-Paragraphen mit max-width fuer Lesbarkeit
   (ca. 60-65 Zeichen pro Zeile ist optimal). Andere Elemente
   wie Bilder, Cards, Tabellen bleiben full-width. */
body.wm-recipe-page .entry-content > p,
body.wm-recipe-page .entry-content > ul:not([class*="wprm"]),
body.wm-recipe-page .entry-content > ol:not([class*="wprm"]) {
  max-width: 70ch;
}

/* H2-Headings auch linksbuendig + breit (passt sich an Container an) */
body.wm-recipe-page .entry-content > h2,
body.wm-recipe-page .entry-content > h3 {
  max-width: none !important;
}

/* Bilder volle Spalten-Breite */
body.wm-recipe-page .entry-content > figure,
body.wm-recipe-page .entry-content > figure.wp-block-image,
body.wm-recipe-page .entry-content > .wp-block-image {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Mobile: Auf <760px keine max-width mehr fuer Lesbarkeit-P, full width */
@media (max-width: 760px) {
  body.wm-recipe-page .entry-content > p,
  body.wm-recipe-page .entry-content > ul,
  body.wm-recipe-page .entry-content > ol {
    max-width: 100%;
  }
}


/* ============================================================
   v0.6.8 — POLISH-FIXES nach Live-Test
   ============================================================ */

/* ============================================================
   FIX: WPRM Inline-Buttons-Box "Zum Rezept | Zum Video | Rezept drucken"
   ============================================================
   Diese Box ist DOPPELT zur Hero-CTA. Komplett ausblenden.
   ============================================================ */
body.wm-recipe-page .wprm-template-chic-buttons,
body.wm-recipe-page .wprm-container-columns-spaced-middle.wprm-container-columns-gutter,
body.wm-recipe-page .entry-content > .wprm-template-chic-buttons,
body.wm-recipe-page .entry-content > [class*="wprm-template-chic"] {
  display: none !important;
}

/* Plus die einzelnen Inline-Jump-Buttons (gleiches Pattern aber andere Container) */
body.wm-recipe-page .entry-content > div > .wprm-recipe-jump,
body.wm-recipe-page .entry-content > p > .wprm-recipe-jump,
body.wm-recipe-page .wprm-jump-to-recipe-shortcode + .wprm-jump-to-video-shortcode,
body.wm-recipe-page a.wprm-recipe-jump.wprm-jump-to-recipe-shortcode {
  display: none !important;
}

/* ============================================================
   FIX: Pink CTA "Hat dir das Rezept geschmeckt?" → Terracotta
   ============================================================
   Der WPRM Mention-Block hat hartcodiertes Pink. Ueberschreiben
   mit hoher Spezifitaet + !important.
   ============================================================ */
body.wm-recipe-page [class*="wprm"] [style*="rgb(242, 50, 142)"],
body.wm-recipe-page [class*="wprm"] [style*="background-color: rgb(242"],
body.wm-recipe-page .wprm-recipe-mention,
body.wm-recipe-page .wprm-recipe-mention-shortcode,
body.wm-recipe-page [class*="wprm-mention"],
body.wm-recipe-page .wprm-recipe-template-will-mixen-chic-2021 [style*="rgb(242"] {
  background: var(--accent) !important;
  background-color: var(--accent) !important;
  color: var(--accent-fg) !important;
}

/* Und alle Children der Pink-Box auch in white text */
body.wm-recipe-page [style*="rgb(242, 50, 142)"] *,
body.wm-recipe-page .wprm-recipe-mention * {
  color: var(--accent-fg) !important;
}

/* ============================================================
   FIX: Times-Boxen horizontal Grid statt vertikal stapeln
   ============================================================ */
body.wm-recipe-page .wprm-recipe-times-container,
body.wm-recipe-page [class*="wprm-recipe-times"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  gap: 8px !important;
}
body.wm-recipe-page .wprm-recipe-time-container,
body.wm-recipe-page [class*="wprm-recipe-time-container"] {
  background: var(--bg-alt) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 8px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Times-Container Innen: Label oben, Wert mittig */
body.wm-recipe-page .wprm-recipe-time-container-name {
  font-family: var(--font-sans) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--ink-3) !important;
  display: block !important;
}
body.wm-recipe-page .wprm-recipe-time {
  font-family: var(--font-serif) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  color: var(--ink) !important;
  display: block !important;
}

/* ============================================================
   FIX: Author-Box (Tobias) subtler
   ============================================================
   Aktuell: dicker Terracotta-Border um den Author-Namen.
   Gewuenscht: dezent, nur Text + kleine Hover-Animation.
   ============================================================ */
body.wm-recipe-page .wprm-recipe-author,
body.wm-recipe-page .wprm-recipe-author-link,
body.wm-recipe-page a.wprm-recipe-author-link {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  text-decoration: none !important;
  display: inline !important;
}
body.wm-recipe-page .wprm-recipe-author:hover,
body.wm-recipe-page .wprm-recipe-author-link:hover {
  text-decoration: underline !important;
}

/* "von" Prefix vor dem Author */
body.wm-recipe-page .wprm-recipe-author-prefix {
  color: var(--ink-3) !important;
  font-weight: 400 !important;
  margin-right: 4px !important;
}

/* ============================================================
   POLISH: Stars sicher in Highlight-Gold
   ============================================================ */
body.wm-recipe-page .wprm-recipe-rating *,
body.wm-recipe-page .wprm-recipe-rating svg,
body.wm-recipe-page .wprm-recipe-rating-stars,
body.wm-recipe-page .wprm-rating-stars-shortcode svg,
body.wm-recipe-page .comment-form-wprm-rating svg {
  color: var(--highlight) !important;
  fill: var(--highlight) !important;
}

/* Plus alle Inline-Style Pink Stars (rgb(181, 98, 106) o.ae.) */
body.wm-recipe-page [style*="color: rgb(181"],
body.wm-recipe-page [style*="fill: rgb(181"],
body.wm-recipe-page [style*="color:rgb(181"] {
  color: var(--highlight) !important;
  fill: var(--highlight) !important;
}

/* ============================================================
   FIX: Equipment-"*" Marker (Affiliate-Indicator) dezenter
   ============================================================ */
body.wm-recipe-page .wprm-recipe-equipment-name::before,
body.wm-recipe-page .wprm-recipe-equipment-name sup,
body.wm-recipe-page .wprm-recipe-equipment-name [class*="affiliate"] {
  display: none !important;
}

/* Falls "*" als Plain-Text im Inhalt: kleiner und grauer */
body.wm-recipe-page .wprm-recipe-equipment-item {
  position: relative;
}
body.wm-recipe-page .wprm-recipe-equipment-item::after {
  content: "Affiliate";
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  opacity: 0.6;
}


/* ============================================================
   v0.7.0 — CUSTOM CARD AKTIV
   ============================================================
   Wir rendern jetzt unsere editorial Recipe-Card via Shortcode-
   Interception. Tobias' altes Custom-Template wird nicht mehr
   gerendert (weil [wprm-recipe] zu [wmc-recipe] transformiert wird).

   Falls aus irgendeinem Grund BEIDE rendern: hide das alte.
   ============================================================ */

/* Falls unsere .recipe-card auf der Page existiert UND
   ein Tobias-Template auch da ist → das alte hide */
body.wm-recipe-page:has(.recipe-card) .wprm-recipe-template-will-mixen-chic-2021,
body.wm-recipe-page:has(.recipe-card) .wprm-recipe-snippet,
body.wm-recipe-page:has(.recipe-card) .wprm-recipe-template-snippet-buttons-new {
  display: none !important;
}

/* Plus: unsere .recipe-card vollbreit nutzen (in der Article-Spalte) */
body.wm-recipe-page .recipe-card {
  max-width: none !important;
  width: 100% !important;
  margin: 32px 0 !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

/* Plus: wprm-wrap (unser outer-Wrapper um die Card) auch full-width */
body.wm-recipe-page .wprm-wrap {
  max-width: none !important;
  width: 100% !important;
  margin: 32px 0 !important;
  padding: 0 !important;
}


/* ============================================================
   v0.7.2 — STEP USED-INGREDIENTS als Mini-Checkbox-Pills
   ============================================================
   Pro Step: kleine Liste der verwendeten Zutaten unter dem
   Step-Text. Click → strikethrough + filled box. Sync mit
   Master-Zutaten-Liste via UID (wenn man oben Zucker abhakt,
   ist's auch hier abgehakt).
   ============================================================ */
body.wm-recipe-page .step__used {
  list-style: none !important;
  padding: 0 !important;
  margin: 10px 0 0 !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--ink-3);
}

body.wm-recipe-page .step__used-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.12s;
  user-select: none;
}
body.wm-recipe-page .step__used-item:hover {
  background: var(--bg-alt);
}

body.wm-recipe-page .step__used-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: transparent;
  flex-shrink: 0;
  transition: all 0.12s;
}
body.wm-recipe-page .step__used-checkbox svg {
  width: 9px;
  height: 9px;
  opacity: 0;
  color: var(--accent-fg);
  transition: opacity 0.12s;
}

/* Checked state — sync mit Master via JS */
body.wm-recipe-page .step__used-item.checked .step__used-checkbox {
  background: var(--accent);
  border-color: var(--accent);
}
body.wm-recipe-page .step__used-item.checked .step__used-checkbox svg {
  opacity: 1;
}
body.wm-recipe-page .step__used-item.checked .step__used-label {
  text-decoration: line-through;
  color: var(--ink-4);
}

/* Wenn ein step__used-item NICHT in der Master-Liste matcht
   (kein UID-Sync), dezent grau + nicht klickbar machen */
body.wm-recipe-page .step__used-item:not([data-wmc-uid]) {
  cursor: default;
}
body.wm-recipe-page .step__used-item:not([data-wmc-uid]) .step__used-checkbox {
  border-style: dashed;
  opacity: 0.6;
}

/* Mobile: noch kompakter */
@media (max-width: 540px) {
  body.wm-recipe-page .step__used {
    font-size: 12px;
  }
  body.wm-recipe-page .step__used-item {
    padding: 3px 6px;
  }
}


/* ============================================================
   v0.7.3 — INGREDIENT QUANTITY-SPALTE bündig auch bei "1 Päckchen"
   ============================================================
   Vorher: min-width 64px → "1 Päckchen" passt nicht, Names rutschen rechts.
   Jetzt: min-width 110px für längere Mengen-Strings.
   ============================================================ */
body.wm-recipe-page .ingredient .ing__qty,
body.wm-recipe-page .ingredients .ing__qty {
  min-width: 110px !important;
  flex-shrink: 0;
  display: inline-block;
}

/* Plus: bei sehr langen Quantities (z.B. "1 Päckchen") nicht umbrechen */
body.wm-recipe-page .ing__qty {
  white-space: nowrap;
}


/* ============================================================
   v0.7.4 — AFFILIATE/EQUIPMENT CARD POLISH
   ============================================================
   3-Spalten-Grid mit kleinem Bild oben + Name in Serif unten.
   Wenn kein Bild: dezenter Placeholder-Icon (Tool-Symbol).
   ============================================================ */

body.wm-recipe-page .affiliate-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  margin: 16px 0 !important;
  list-style: none !important;
  padding: 0 !important;
}

@media (max-width: 540px) {
  body.wm-recipe-page .affiliate-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

body.wm-recipe-page .aff-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 12px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s !important;
  color: inherit !important;
}
body.wm-recipe-page a.aff-card:hover {
  border-color: var(--accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Image-Slot — fixed aspect ratio damit alle gleich groß */
body.wm-recipe-page .aff-card__img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: var(--bg-alt) !important;
  border-radius: var(--r-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
body.wm-recipe-page .aff-card__img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Placeholder-Icon wenn kein Bild — dezent grau */
body.wm-recipe-page .aff-card__placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: var(--ink-4) !important;
  opacity: 0.5 !important;
}
body.wm-recipe-page .aff-card--no-image .aff-card__img {
  background: var(--bg-alt) !important;
}

/* Name in Serif Terracotta */
body.wm-recipe-page .aff-card__name {
  font-family: var(--font-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  line-height: 1.3 !important;
  margin-top: 4px !important;
}
body.wm-recipe-page a.aff-card:hover .aff-card__name {
  color: var(--ink) !important;
}

/* Optional Sub-Title (Notes) */
body.wm-recipe-page .aff-card__sub {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  line-height: 1.3 !important;
}

/* Wenn das ein <div> ist (kein Link) — Cursor default */
body.wm-recipe-page div.aff-card {
  cursor: default;
}

/* Section-Header "Rezept-Zubehör" + "Affiliate" subtle */
body.wm-recipe-page .recipe-card .rc-section-h .sub,
body.wm-recipe-page .wprm-wrap .rc-section-h .sub {
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--ink-4) !important;
  float: right;
}


/* ============================================================
   v0.7.5 — WPRM-EQUIPMENT in unsere Card integrieren
   ============================================================
   Strategie: WPRM rendert seine Equipment-Items selbst (mit EAFL-Links
   und WP-Media-Bildern). Wir wrappen das Output in .wmc-equipment-from-wprm
   und ueberschreiben das Standard-WPRM-CSS mit unseren Tokens.
   ============================================================ */

body.wm-recipe-page .wmc-equipment-from-wprm {
  margin: 16px 0;
}

/* WPRM rendert das Equipment als Container mit .wprm-recipe-equipment-container
   oder als ungeordnete Liste. Wir machen daraus ein Grid. */
body.wm-recipe-page .wmc-equipment-from-wprm .wprm-recipe-equipment-container,
body.wm-recipe-page .wmc-equipment-from-wprm .wprm-recipe-equipment,
body.wm-recipe-page .wmc-equipment-from-wprm > div:not(:has(*))  {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 540px) {
  body.wm-recipe-page .wmc-equipment-from-wprm .wprm-recipe-equipment-container,
  body.wm-recipe-page .wmc-equipment-from-wprm .wprm-recipe-equipment {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* Plus: falls die WPRM-Items NICHT in einem List-Container sind sondern direkt
   als Geschwister-Divs gerendert, wenden wir Grid auf den Wrapper an */
body.wm-recipe-page .wmc-equipment-from-wprm:has(> .wprm-recipe-equipment-item:nth-child(2)) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}

/* Each Equipment-Item — Card-Style */
body.wm-recipe-page .wmc-equipment-from-wprm .wprm-recipe-equipment-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 12px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  list-style: none !important;
  transition: all 0.15s !important;
  margin: 0 !important;
  position: relative;
}
body.wm-recipe-page .wmc-equipment-from-wprm .wprm-recipe-equipment-item:hover {
  border-color: var(--accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Image-Slot 1:1 (cover) */
body.wm-recipe-page .wmc-equipment-from-wprm .wprm-recipe-equipment-image,
body.wm-recipe-page .wmc-equipment-from-wprm .ns-pinterest-image {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: var(--bg-alt) !important;
  border-radius: var(--r-sm) !important;
  overflow: hidden !important;
}
body.wm-recipe-page .wmc-equipment-from-wprm img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Equipment-Name in Serif Terracotta */
body.wm-recipe-page .wmc-equipment-from-wprm .wprm-recipe-equipment-name {
  font-family: var(--font-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  display: block !important;
}

/* Notes (optional Sub) */
body.wm-recipe-page .wmc-equipment-from-wprm .wprm-recipe-equipment-notes {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ink-3) !important;
  margin: 0 !important;
}

/* EAFL-Link transparent (keine Underlines, keine Default-Styles) */
body.wm-recipe-page .wmc-equipment-from-wprm a,
body.wm-recipe-page .wmc-equipment-from-wprm .eafl-link {
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Pinterest-Bubble (ns-pinterest) wegblenden weil wir eigene Card haben */
body.wm-recipe-page .wmc-equipment-from-wprm .ns-pinterest-cta,
body.wm-recipe-page .wmc-equipment-from-wprm .pinit-link {
  display: none !important;
}

/* "*"-Affiliate-Marker im Name dezent */
body.wm-recipe-page .wmc-equipment-from-wprm .wprm-recipe-equipment-name sup,
body.wm-recipe-page .wmc-equipment-from-wprm .wprm-recipe-equipment-name [class*="affiliate"] {
  display: none !important;
}