/* Welt Rezepte: "Handgeschriebenes Kochbuch". Alle Regeln mit Präfix .rz- (oder .rz-main). */
.rz-main {
  --rz-paper: #fffaf0; --rz-ink: #2b2118; --rz-red: #b83a24; --rz-green: #4d7a3a;
  --rz-grid: rgba(70, 110, 170, .14); --rz-rule: rgba(70, 110, 170, .24);
  --rz-hand: "Bradley Hand", "Segoe Print", "Ink Free", "Segoe Script", cursive;
  background:
    linear-gradient(var(--rz-grid) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, var(--rz-grid) 1px, transparent 1px) 0 0 / 26px 26px,
    var(--w-bg);
  color: var(--rz-ink);
}
.rz-main .page-hero, .rz-main .page-body { background: transparent; }
.rz-main h1, .rz-main h2, .rz-main .hand { font-family: var(--rz-hand); font-weight: 700; }
.rz-main code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 3px; }

/* Hero der Übersichtsseiten */
.rz-hero { min-height: 0; padding-top: 132px; padding-bottom: 30px; }
.rz-hero h1 { color: var(--rz-ink); margin-bottom: .6rem; transform: rotate(-.8deg); transform-origin: left; }
.rz-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 1.4rem; padding: 0; font-family: var(--sans); font-size: .78rem; letter-spacing: .06em; }
.rz-crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .45; }
.rz-crumbs a { color: var(--rz-red); text-decoration: none; }
.rz-crumbs a:hover { text-decoration: underline; }
.rz-crumbs [aria-current] { opacity: .7; }

/* Filter */
.rz-filter { display: grid; gap: 14px 40px; grid-template-columns: 1fr; padding: 20px 22px; background: var(--rz-paper); border: 1px solid rgba(90,60,30,.16); box-shadow: 0 14px 30px -18px rgba(60,30,10,.4); transform: rotate(-.25deg); }
.js-off .rz-filter { display: none; }
.rz-filter fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rz-filter legend { font-family: var(--rz-hand); font-weight: 700; font-size: 1.25rem; color: var(--rz-red); padding: 0; margin-bottom: 8px; }
.rz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rz-chip { font: inherit; font-family: var(--sans); font-size: .82rem; letter-spacing: .03em; color: var(--rz-ink); background: transparent; border: 1.5px solid rgba(43,33,24,.55); border-radius: 999px; padding: 6px 14px; cursor: pointer;
  transition: background-color .25s, color .25s, transform .25s var(--ease); min-height: 36px; }
.rz-chip:hover { transform: translateY(-2px) rotate(-1deg); }
.rz-chip[aria-pressed="true"] { background: var(--rz-ink); color: var(--rz-paper); border-color: var(--rz-ink); }
.rz-chip[data-frei][aria-pressed="true"] { background: var(--rz-red); border-color: var(--rz-red); }
.rz-count { margin: 0; font-family: var(--sans); font-size: .82rem; opacity: .75; }
.rz-reset, .rz-calc-reset { font: inherit; font-family: var(--sans); font-size: .8rem; color: var(--rz-red); background: none; border: 0; text-decoration: underline; cursor: pointer; justify-self: start; padding: 4px 0; }
.rz-reset[hidden], .rz-calc-reset[hidden] { display: none; }
.rz-preview { margin: 0; padding: 10px 14px; background: rgba(184,58,36,.08); border-left: 3px solid var(--rz-red); font-family: var(--sans); font-size: .85rem; }
.rz-note { font-family: var(--sans); font-size: .8rem; opacity: .75; max-width: 70ch; margin: 0; }
.rz-empty { font-family: var(--rz-hand); font-size: 1.4rem; margin: 0; }
.rz-empty[hidden] { display: none; }
.rz-empty-static { padding: 40px 28px; border: 2px dashed rgba(43,33,24,.4); background: rgba(255,250,240,.6); }
.rz-empty-static .hand { font-size: 1.8rem; margin: 0 0 .4rem; }

/* Kartenraster */
.rz-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 30px 26px; }
.rz-li[hidden] { display: none; }
.rz-li { animation: rz-pop .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rz-pop { from { opacity: 0; transform: translateY(22px) rotate(1.5deg); } to { opacity: 1; transform: none; } }
.rz-card, .rz-post { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--rz-paper); color: var(--rz-ink); text-decoration: none;
  border: 1px solid rgba(90,60,30,.14); box-shadow: 0 18px 34px -20px rgba(60,30,10,.5); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.rz-li:nth-child(3n+1) .rz-card, .rz-li:nth-child(3n+1) .rz-post { transform: rotate(-.7deg); }
.rz-li:nth-child(3n+2) .rz-card, .rz-li:nth-child(3n+2) .rz-post { transform: rotate(.5deg); }
.rz-card:hover, .rz-card:focus-visible { transform: translateY(-8px) rotate(-1.2deg); box-shadow: 0 30px 44px -22px rgba(60,30,10,.55); }
.rz-card:focus-visible { outline: 3px solid var(--rz-red); outline-offset: 4px; }
.rz-tape { position: absolute; top: -11px; left: 50%; width: 92px; height: 24px; margin-left: -46px; transform: rotate(-3deg); background: rgba(231, 208, 140, .78); box-shadow: 0 1px 2px rgba(0,0,0,.12); z-index: 2;
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 92% 0, 96% 10%, 100% 0, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 8% 100%, 4% 90%, 0 100%); }
.rz-card-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; margin: 12px 12px 0; background: #f7eed8; border: 1px solid rgba(90,60,30,.12); }
.rz-card-img svg, .rz-card-img img, .rz-fig svg, .rz-fig img { width: 100%; height: 100%; object-fit: cover; }
.rz-card-b { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; flex: 1; background: linear-gradient(90deg, transparent 0 16px, rgba(184,58,36,.3) 16px 17px, transparent 17px); }
.rz-kat { font-family: var(--sans); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--rz-red); display: flex; gap: 8px; align-items: center; }
.rz-card-t { font-family: var(--rz-hand); font-weight: 700; font-size: 1.55rem; line-height: 1.15; }
.rz-card-d { font-size: .95rem; line-height: 1.45; opacity: .85; }
.rz-meta { font-family: var(--sans); font-size: .78rem; letter-spacing: .04em; opacity: .7; margin-top: auto; padding-top: 6px; }
.rz-mini { font-family: var(--sans); font-size: .76rem; color: var(--rz-red); }
.rz-post { padding: 26px 24px 22px; gap: 8px; }
.rz-post-first { border: 2px dashed rgba(43,33,24,.4); background: rgba(255,250,240,.75); }
.rz-ghost { opacity: .55; }
.rz-bar { display: block; height: 10px; border-radius: 5px; background: rgba(43,33,24,.14); }
.rz-bar.w60 { width: 60%; } .rz-bar.w70 { width: 70%; } .rz-bar.w90 { width: 90%; }
a.rz-post:hover { transform: translateY(-6px) rotate(-1deg); }

/* Stempel */
.rz-stamp { position: absolute; z-index: 3; top: 14px; right: 14px; font-family: var(--sans); font-weight: 800; font-size: .95rem; letter-spacing: .22em; text-transform: uppercase; color: var(--rz-red); border: 3px double var(--rz-red); border-radius: 6px; padding: 6px 12px; transform: rotate(9deg); opacity: .88; background: rgba(255,250,240,.6); animation: rz-stamp .55s .6s var(--ease) backwards; text-align: center; line-height: 1.15; }
.rz-stamp-s { font-size: .68rem; padding: 3px 8px; top: 20px; right: 10px; }
.rz-stamp-ok { color: var(--rz-green); border-color: var(--rz-green); letter-spacing: .12em; font-size: .8rem; }
@keyframes rz-stamp { from { opacity: 0; transform: scale(1.8) rotate(-4deg); } to { opacity: .88; transform: rotate(9deg); } }

/* ---------- Rezeptseite ---------- */
.rz-top { padding: 118px var(--gutter) 0; }
.rz-top > div { width: min(1080px, 100%); margin: 0 auto; }
.rz-top .rz-crumbs ol { margin-bottom: .8rem; }
.rz-draft-note { margin: 0 0 6px; padding: 10px 14px; background: rgba(184,58,36,.09); border-left: 3px solid var(--rz-red); font-family: var(--sans); font-size: .85rem; }
.rz-stage { padding: 22px var(--gutter) 30px; perspective: 1400px; overflow-x: clip; }
.rz-sheet { position: relative; width: min(1080px, 100%); margin: 0 auto; padding: 46px clamp(20px, 4vw, 56px) 34px clamp(40px, 6vw, 84px); color: var(--rz-ink);
  background:
    linear-gradient(90deg, transparent calc(clamp(40px, 6vw, 84px) - 16px), rgba(184,58,36,.42) calc(clamp(40px, 6vw, 84px) - 16px), rgba(184,58,36,.42) calc(clamp(40px, 6vw, 84px) - 14px), transparent calc(clamp(40px, 6vw, 84px) - 14px)),
    repeating-linear-gradient(transparent 0 33px, var(--rz-rule) 33px 34px),
    var(--rz-paper);
  background-position: 0 0, 0 12px, 0 0;
  border: 1px solid rgba(90,60,30,.16); box-shadow: 0 40px 80px -30px rgba(60,30,10,.55), 0 2px 0 rgba(255,255,255,.6) inset;
  transform: rotate(-.35deg); animation: rz-land .95s var(--ease) backwards; transform-origin: 30% 0; }
@keyframes rz-land { from { opacity: 0; transform: translateY(-46px) rotate(-3.5deg) scale(1.02); } 60% { opacity: 1; } to { opacity: 1; transform: rotate(-.35deg); } }
.rz-tape.t1 { left: 14%; transform: rotate(-6deg); }
.rz-tape.t2 { left: auto; right: 12%; margin: 0; transform: rotate(5deg); }
.rz-sheet-h { max-width: 62ch; }
.rz-sheet h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); line-height: 1.05; margin: .3rem 0 .6rem; color: var(--rz-ink); overflow-wrap: anywhere; }
.rz-desc { font-size: 1.1rem; margin: 0 0 1rem; line-height: 1.5; }
.rz-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 30px; padding: 0; margin: 0 0 18px; }
.rz-facts li { display: flex; flex-direction: column; }
.rz-facts span { font-family: var(--sans); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rz-red); }
.rz-facts b { font-family: var(--rz-hand); font-size: 1.35rem; }
.rz-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px clamp(24px, 4vw, 56px); align-items: start; }
.rz-sheet h2 { font-size: 1.7rem; color: var(--rz-red); margin: 1rem 0 .5rem; line-height: 1.2; }
.rz-fig { margin: 0 0 6px; background: #fff; padding: 10px 10px 8px; border: 1px solid rgba(90,60,30,.14); box-shadow: 0 12px 24px -14px rgba(60,30,10,.5); transform: rotate(1deg); }
.rz-fig > svg, .rz-fig > img { aspect-ratio: 4 / 3; height: auto; }
.rz-fig figcaption { font-family: var(--sans); font-size: .74rem; padding-top: 7px; opacity: .8; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Allergene */
.rz-chips-a { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 6px; }
.rz-chip-a span { display: inline-block; font-family: var(--sans); font-weight: 700; font-size: .92rem; letter-spacing: .04em; color: #fff; background: var(--rz-red); border-radius: 999px; padding: 7px 16px; box-shadow: 0 3px 0 rgba(120,30,15,.45); }
.rz-chip-a { animation: rz-pop .6s var(--ease) backwards; }
.rz-chip-a:nth-child(2) { animation-delay: .1s; } .rz-chip-a:nth-child(3) { animation-delay: .2s; } .rz-chip-a:nth-child(n+4) { animation-delay: .3s; }
.rz-noal { margin: 0; font-family: var(--sans); font-size: .9rem; }
.rz-hint { font-family: var(--sans); font-size: .8rem; line-height: 1.45; margin: 6px 0 0; padding-left: 10px; border-left: 2px solid var(--rz-red); }

/* Portionsrechner */
.js-off .rz-calc { display: none; }
.rz-calc { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 10px 12px; background: rgba(255,255,255,.75); border: 1.5px dashed rgba(43,33,24,.4); }
.rz-calc-l { font-family: var(--sans); font-size: .82rem; }
.rz-step { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--rz-ink); background: transparent; color: var(--rz-ink); font: 700 1.4rem/1 var(--sans); cursor: pointer; transition: transform .2s var(--ease), background-color .2s, color .2s; }
.rz-step:hover { background: var(--rz-ink); color: var(--rz-paper); }
.rz-step:active { transform: scale(.88); }
.rz-step[disabled] { opacity: .3; cursor: default; }
.rz-pn { font-family: var(--rz-hand); font-weight: 700; font-size: 1.9rem; min-width: 2ch; text-align: center; display: inline-block; }
.rz-pn.bump { animation: rz-bump .3s var(--ease); }
@keyframes rz-bump { 40% { transform: scale(1.3) rotate(-4deg); } }

/* Zutaten */
.rz-ings { list-style: none; margin: 0; padding: 0; }
.rz-ing label { display: flex; align-items: flex-start; gap: 12px; min-height: 34px; padding: 3px 0; cursor: pointer; line-height: 28px; font-family: var(--rz-hand); font-size: 1.2rem; }
.js-off .rz-ing label { cursor: default; }
.rz-cb { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rz-box { flex: none; width: 24px; height: 24px; margin-top: 2px; border: 2px solid var(--rz-ink); border-radius: 4px; background: #fff; display: grid; place-items: center; transform: rotate(-3deg); transition: transform .3s var(--ease), background-color .25s; }
.rz-box svg { width: 20px; height: 20px; fill: none; stroke: var(--rz-red); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.3) rotate(-20deg); transition: opacity .25s, transform .4s var(--ease); }
.rz-cb:checked + .rz-box { transform: rotate(3deg) scale(1.08); }
.rz-cb:checked + .rz-box svg { opacity: 1; transform: none; }
.rz-cb:focus-visible + .rz-box { outline: 3px solid var(--rz-red); outline-offset: 3px; }
.rz-ing-t { position: relative; transition: opacity .3s; }
.rz-ing-t::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: var(--rz-red); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); border-radius: 2px; }
.rz-cb:checked ~ .rz-ing-t { opacity: .5; }
.rz-cb:checked ~ .rz-ing-t::after { transform: scaleX(1); }
.rz-q { font-weight: 700; color: var(--rz-red); white-space: nowrap; }
.rz-q-free { font-weight: 400; color: var(--rz-ink); opacity: .7; font-size: .9em; }
.rz-tickhint { font-family: var(--sans); font-size: .74rem; opacity: .6; margin: 8px 0 0; }
.js-off .rz-tickhint { display: none; }

/* Schritte */
.rz-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.rz-steps li { display: flex; gap: 14px; padding: 6px 0 10px; font-family: var(--rz-hand); font-size: 1.2rem; line-height: 34px; animation: rz-pop .6s var(--ease) backwards; }
.rz-steps li:nth-child(2) { animation-delay: .1s; } .rz-steps li:nth-child(3) { animation-delay: .2s; } .rz-steps li:nth-child(n+4) { animation-delay: .3s; }
.rz-num { flex: none; width: 32px; height: 32px; margin-top: 1px; border: 2px solid var(--rz-red); color: var(--rz-red); border-radius: 50%; display: grid; place-items: center; font: 700 1.1rem/1 var(--rz-hand); transform: rotate(-6deg); }
.rz-step-t { line-height: 1.5; padding-top: 4px; }
.rz-tipp { margin-top: 22px; padding: 14px 18px; background: rgba(231,208,140,.35); border: 1.5px dashed rgba(43,33,24,.4); transform: rotate(.6deg); }
.rz-tipp h2 { margin: 0 0 .2rem; font-size: 1.4rem; }
.rz-tipp p { margin: 0; font-family: var(--rz-hand); font-size: 1.1rem; line-height: 1.5; }

.rz-sheet-f { margin-top: 26px; padding-top: 14px; border-top: 1.5px solid rgba(43,33,24,.3); font-family: var(--sans); font-size: .76rem; line-height: 1.5; }
.rz-sheet-f p { margin: 0 0 6px; opacity: .85; }
.rz-printline { display: none; }
.rz-actions { padding: 0 var(--gutter) 90px; }
.rz-actions > div { width: min(1080px, 100%); margin: 0 auto; display: grid; gap: 26px; }
.rz-print { justify-self: start; font: 700 .85rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--rz-paper); background: var(--rz-ink); border: 0; padding: 14px 26px; cursor: pointer; border-radius: 3px; transition: transform .25s var(--ease), background-color .25s; }
.rz-print:hover { background: var(--rz-red); transform: translateY(-2px) rotate(-.6deg); }
.rz-print[hidden] { display: none; }
.rz-btns { display: flex; flex-wrap: wrap; gap: 12px; }
a.rz-print { display: inline-block; text-decoration: none; }
.rz-inapp { margin: 0; font-family: var(--sans); font-size: .9rem; line-height: 1.5; max-width: 52ch; }
.rz-inapp[hidden] { display: none; }
@media (max-width: 560px) { .rz-btns > * { flex: 1 1 100%; text-align: center; } }
.rz-main :focus-visible { outline: 3px solid var(--rz-red); outline-offset: 3px; }

@media (max-width: 860px) {
  .rz-cols { grid-template-columns: 1fr; }
  .rz-sheet { transform: none; padding-top: 40px; }
  .rz-stamp { top: 10px; right: 10px; font-size: .78rem; padding: 4px 9px; }
  .rz-hero { padding-top: 110px; }
}
@media (min-width: 720px) { .rz-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); } .rz-filter .rz-count, .rz-filter .rz-reset { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) {
  .rz-li, .rz-sheet, .rz-stamp, .rz-chip-a, .rz-steps li { animation: none !important; }
  .rz-card:hover, a.rz-post:hover, .rz-chip:hover { transform: none; }
}

/* ---------- Druck: A5 und A4 ---------- */
@page { margin: 11mm; }
@media print {
  html, body { background: #fff !important; }
  .nav, .wipe, .glow, .footer, .skip, .rz-noprint, .rz-top, .rz-tape, .rz-stamp, .burger, .rz-print { display: none !important; }
  .rz-main { background: #fff !important; color: #000; }
  .rz-stage { padding: 0; perspective: none; }
  .rz-sheet { width: 100%; margin: 0; padding: 0; background: #fff !important; box-shadow: none; border: 0; transform: none !important; animation: none !important; color: #000; }
  .rz-sheet h1 { font-size: 22pt; color: #000; margin: 0 0 2mm; }
  .rz-sheet h2 { font-size: 13pt; margin: 4mm 0 2mm; color: #000; }
  .rz-desc { font-size: 10pt; margin-bottom: 3mm; }
  .rz-kat, .rz-facts span { color: #000; }
  .rz-facts { margin-bottom: 3mm; }
  .rz-facts b { font-size: 11pt; }
  .rz-cols { display: block; }
  .rz-fig { display: none; }
  .rz-ing label { min-height: 0; padding: 1mm 0; font-size: 10.5pt; line-height: 1.35; }
  .rz-box { width: 4mm; height: 4mm; border-width: 1px; margin-top: 1mm; transform: none; }
  .rz-box svg, .rz-ing-t::after { display: none; }
  .rz-cb:checked ~ .rz-ing-t { opacity: 1; }
  .rz-q { color: #000; }
  .rz-steps li { font-size: 10.5pt; line-height: 1.4; padding: 1mm 0 2mm; animation: none; break-inside: avoid; }
  .rz-num { width: 6mm; height: 6mm; font-size: 9pt; color: #000; border-color: #000; transform: none; }
  .rz-step-t { padding-top: 0; }
  .rz-chip-a span { background: none; color: #000; border: 1.2px solid #000; box-shadow: none; font-size: 9pt; padding: 1mm 3mm; }
  .rz-hint, .rz-disc, .rz-quelle { font-size: 8pt; }
  .rz-tipp { transform: none; background: none; border: 1px solid #000; break-inside: avoid; }
  .rz-tipp p { font-size: 10pt; }
  .rz-sheet-f { margin-top: 5mm; }
  .rz-printline { display: block; margin-top: 3mm; letter-spacing: .1em; }
  .rz-zut, .rz-allerg { break-inside: avoid; }
}
/* A4 (breite Druckseite): Zutaten links, Schritte rechts */
@media print and (min-width: 160mm) {
  .rz-cols { display: grid; grid-template-columns: 5fr 6fr; gap: 0 9mm; }
  .rz-sheet h1 { font-size: 26pt; }
}