/* ================================================================
   rezepte.css — Rezeptansicht, Rezept-Blatt, Kochmodus (rezepte.js)
   ================================================================
   Nur Rollen aus theme.css, nie eigene Farbwerte — dieselben Regeln
   wie app.css, geprüft von test/contrast.js. Maße (--r-*, --pad,
   --ease, --safe-*) kommen aus app.css.
   ================================================================ */

/* ---------------- Seite ---------------- */
.rzPage{display:flex;flex-direction:column;gap:14px;padding-bottom:8px}
.rzHead{padding:4px 2px 0}
.rzHead .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.09em;color:var(--text-brand)}
.rzHead h2{margin:4px 0 4px;font-size:1.55rem;letter-spacing:-.02em;line-height:1.15}
.rzHead p{margin:0;color:var(--text-secondary);font-size:.92rem;line-height:1.45}

.rzSearch{
  display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;
  background:var(--surface-primary);border:1px solid var(--border-subtle);border-radius:var(--r-md);
  box-shadow:var(--shadow-control);
}
.rzSearch:focus-within{border-color:var(--brand-primary);box-shadow:0 0 0 3px var(--focus-ring)}
.rzSearchIcon{color:var(--text-muted);font-size:1.15rem}
.rzSearch input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:1rem;color:var(--text-primary);padding:12px 0}
.rzSearch input::placeholder{color:var(--text-muted)}

.rzChips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--pad) * -1);padding:2px var(--pad)}
.rzChips::-webkit-scrollbar{display:none}
.rzChip{
  flex:0 0 auto;min-height:38px;padding:0 14px;border-radius:999px;font:inherit;font-size:.86rem;font-weight:600;
  border:1px solid var(--border-subtle);background:var(--surface-primary);color:var(--text-primary);cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease),transform .12s var(--ease);
}
.rzChip:active{transform:scale(.96)}
.rzChip.on{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--text-on-brand)}

.rzResults{display:flex;flex-direction:column;gap:18px}
.rzGroup{display:flex;flex-direction:column;gap:10px}
.rzGroupHead{display:flex;align-items:center;gap:8px;padding:0 2px}
.rzGroupHead h3{margin:0;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.rzList{display:flex;flex-direction:column;gap:10px}
.rzMore{
  align-self:flex-start;border:0;background:transparent;color:var(--text-brand);font:inherit;font-weight:600;
  font-size:.9rem;padding:6px 2px;cursor:pointer;
}

/* ---- Karte ---- */
.rzCard{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface-primary);border:1px solid var(--border-subtle);border-radius:var(--r-lg);
  box-shadow:var(--shadow-control);overflow:hidden;
  transition:transform .14s var(--ease),box-shadow .14s var(--ease);
}
.rzCard:has(.rzCardMain:active){transform:scale(.985)}
.rzCardTop{display:flex;align-items:stretch}
.rzCardActions{display:flex;justify-content:flex-end;gap:8px;padding:0 14px 12px 74px;margin-top:-4px}
.rzQuick{
  min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--border-subtle);font:inherit;font-size:.84rem;
  font-weight:700;cursor:pointer;background:var(--brand-soft);color:var(--text-brand);
}
.rzQuick:active{transform:scale(.96)}
.rzQuick.done,.rzQuick:disabled{background:var(--fill-subtle);color:var(--text-muted);cursor:default}
.rzGroupWhy{margin:0;padding:10px 12px;border-radius:var(--r-md);font-size:.86rem;font-weight:600;background:var(--warning-soft);color:var(--warning-text)}
.rzCardMain{
  flex:1;min-width:0;display:flex;gap:12px;align-items:flex-start;text-align:left;
  padding:14px 4px 14px 14px;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;
}
.rzCardIcon{
  flex:0 0 48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center;font-size:1.6rem;
  background:var(--surface-secondary);
}
.rzCardText{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.rzCardTitle{font-size:1rem;font-weight:700;line-height:1.25;overflow-wrap:break-word}
.rzCardMeta{display:flex;flex-wrap:wrap;gap:6px}
.rzTag{
  display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;
  font-size:.74rem;font-weight:600;background:var(--fill-subtle);color:var(--text-secondary);
}
.rzTag.time::before{content:"⏱";margin-right:4px;font-size:.7rem}
.rzTag.ok{background:var(--success-soft);color:var(--success-text)}
.rzTag.warn{background:var(--warning-soft);color:var(--warning-text)}
.rzWhy{font-size:.82rem;font-weight:600;color:var(--warning-text)}
.rzNote{font-size:.8rem;color:var(--text-muted)}
.rzBar{display:block;height:4px;border-radius:99px;background:var(--fill-strong);overflow:hidden;max-width:160px}
.rzBar i{display:block;height:100%;background:var(--success);border-radius:99px}

.rzHeart{
  flex:0 0 48px;border:0;background:transparent;font-size:1.35rem;color:var(--text-muted);cursor:pointer;
  display:grid;place-items:center;transition:transform .15s var(--ease),color .15s var(--ease);
}
.rzHeart.on{color:var(--mascot-pink-text)}
.rzHeart:active{transform:scale(1.25)}

/* ---- Heldenkarte ---- */
.rzHero{
  border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(145deg,var(--hero-bg),var(--hero-bg-2));color:var(--hero-text);box-shadow:var(--shadow-hero);
}
.rzHeroTop{display:flex;align-items:center;justify-content:space-between}
.rzHeroEyebrow{font-size:.72rem;font-weight:700;letter-spacing:.09em;color:var(--hero-text-secondary)}
.rzHeart.onHero{flex:0 0 40px;height:40px;color:var(--hero-text)}
.rzHeart.onHero.on{color:var(--hero-text)}
.rzHeroMain{
  display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;text-align:left;
  border:0;background:transparent;color:inherit;font:inherit;padding:0;cursor:pointer;
}
.rzHeroIcon{grid-row:span 2;font-size:2.4rem;width:60px;height:60px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--hero-pressed)}
.rzHeroTitle{font-size:1.28rem;font-weight:750;line-height:1.2;letter-spacing:-.015em}
.rzHeroSub{font-size:.86rem;color:var(--hero-text-secondary);line-height:1.35}
.rzHeroActions{display:flex;gap:8px;flex-wrap:wrap}

/* ---- Knöpfe ---- */
.rzBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 18px;
  border-radius:var(--r-md);border:0;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;
  background:var(--action-secondary);color:var(--text-primary);
  transition:transform .12s var(--ease),filter .12s var(--ease);
}
.rzBtn:active{transform:scale(.97)}
.rzBtn:disabled{background:var(--action-disabled-bg);color:var(--action-disabled-text);cursor:default}
.rzBtn.primary{background:var(--action-primary);color:var(--text-on-brand)}
.rzBtn.primary:active{background:var(--action-primary-pressed)}
.rzBtn.secondary{background:var(--action-secondary);color:var(--text-primary)}
.rzBtn.light{background:var(--hero-pressed);color:var(--hero-text)}
.rzBtn.onHero{background:var(--hero-action-bg);color:var(--hero-action-text)}
.rzBtn.small{min-height:38px;padding:0 14px;font-size:.86rem}
.rzBtn.big{min-height:56px;font-size:1.02rem;flex:1}
.rzBtn.timer{align-self:flex-start;background:var(--info-soft);color:var(--info-text)}

/* ---------------- Rezept-Blatt ---------------- */
html.rzLocked,html.rzLocked body{overflow:hidden}
.rzOverlay{
  position:fixed;inset:0;z-index:95;display:flex;justify-content:center;align-items:flex-end;
  background:var(--bg-scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  animation:rzFade .2s var(--ease);
}
.rzOverlay.closing,.rzCook.closing{animation:rzFadeOut .18s var(--ease) forwards}
.rzSheet{
  position:relative;width:100%;max-width:640px;height:calc(100dvh - max(var(--safe-top),12px) - 8px);
  display:flex;flex-direction:column;background:var(--bg-primary);
  border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;box-shadow:var(--shadow-lift);
  animation:rzRise .32s var(--ease);
}
.rzBar2{
  position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:6px;padding:10px 12px;
  transition:background .2s var(--ease),box-shadow .2s var(--ease);
}
.rzBar2.scrolled{background:var(--bg-material);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 1px 0 var(--divider)}
.rzBarTitle{flex:1;min-width:0;font-weight:700;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s var(--ease)}
.rzBar2.scrolled .rzBarTitle{opacity:1}
.rzIconBtn{
  flex:0 0 42px;height:42px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  font:inherit;font-size:1.3rem;line-height:1;background:var(--surface-elevated);color:var(--text-primary);
  box-shadow:var(--shadow-control);
}
.rzHeartBtn.on{color:var(--mascot-pink-text)}
.rzScroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:64px var(--pad) 24px;-webkit-overflow-scrolling:touch}

.rzDetailHead{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px}
.rzDetailIcon{
  width:84px;height:84px;border-radius:24px;display:grid;place-items:center;font-size:3rem;
  background:var(--surface-secondary);box-shadow:var(--shadow-control);
}
.rzDetailTitle{margin:0;font-size:1.65rem;line-height:1.15;letter-spacing:-.02em;overflow-wrap:break-word}
.rzFacts{display:flex;flex-wrap:wrap;gap:8px}
.rzFact{
  display:inline-flex;align-items:baseline;gap:4px;padding:7px 12px;border-radius:999px;font-size:.84rem;
  background:var(--surface-primary);border:1px solid var(--border-subtle);color:var(--text-secondary);
}
.rzFact b{color:var(--text-primary);font-size:.95rem}
.rzSource{margin:0;font-size:.82rem;color:var(--text-muted)}

.rzCallout{
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px 14px;margin:0 0 12px;
  border-radius:var(--r-md);background:var(--warning-soft);color:var(--warning-text);font-size:.88rem;line-height:1.4;
}
.rzCallout strong{font-size:.93rem}
.rzCallout.ok{background:var(--success-soft);color:var(--success-text)}
.rzCallout.warm{background:var(--accent-warm-soft);color:var(--accent-warm-text)}
.rzCallout .rzBtn{margin-top:4px}

.rzSection{margin-top:22px}
.rzSectionHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.rzSectionHead h3{margin:0;font-size:1.12rem;letter-spacing:-.01em}

.rzStepper{
  display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:var(--surface-primary);border:1px solid var(--border-subtle);
}
.rzStepBtn{
  width:36px;height:36px;border-radius:50%;border:0;font:inherit;font-size:1.2rem;font-weight:700;cursor:pointer;
  background:var(--fill-subtle);color:var(--text-primary);
}
.rzStepBtn:disabled{color:var(--action-disabled-text);cursor:default}
.rzStepVal{min-width:96px;text-align:center;font-size:.88rem;font-weight:700}

.rzIngredients{list-style:none;margin:0;padding:0;background:var(--surface-primary);border:1px solid var(--border-subtle);border-radius:var(--r-lg);overflow:hidden}
.rzIng{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--divider);text-align:left}
.rzIng:first-child{border-top:0}
.rzIngState{
  flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800;
  background:var(--fill-subtle);color:var(--text-muted);
}
.rzIng.rzIngDa .rzIngState{background:var(--success-soft);color:var(--success-text)}
.rzIng.rzIngFehlt .rzIngState{background:var(--warning-soft);color:var(--warning-text)}
.rzIngName{flex:1;min-width:0;font-size:.96rem;font-weight:600;overflow-wrap:break-word}
.rzIngName small{display:block;font-size:.78rem;font-weight:500;color:var(--text-muted);margin-top:2px}
.rzIng.rzIngFehlt .rzIngName small{color:var(--warning-text)}
.rzIngAmount{flex:0 0 auto;max-width:45%;text-align:right;font-size:.9rem;font-weight:700;color:var(--text-secondary)}
.rzExtra{margin:10px 2px 0;font-size:.86rem;color:var(--text-secondary);line-height:1.45}

.rzSteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rzStep{display:flex;gap:12px;align-items:flex-start;padding:14px;background:var(--surface-primary);border:1px solid var(--border-subtle);border-radius:var(--r-lg)}
.rzStepNo{
  flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.9rem;
  background:var(--brand-primary);color:var(--text-on-brand);
}
.rzStepText{flex:1;min-width:0;font-size:.98rem;line-height:1.5;overflow-wrap:break-word}
.rzStepTime{display:flex;width:fit-content;margin-top:8px;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700;background:var(--info-soft);color:var(--info-text)}
.rzSafety{
  margin:12px 0 0;padding:10px 12px;border-radius:var(--r-md);font-size:.84rem;line-height:1.4;
  background:var(--critical-soft);color:var(--critical-text);
}

.rzActions{
  display:flex;gap:10px;padding:12px var(--pad) calc(var(--safe-bottom) + 12px);
  background:var(--bg-material);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-top:1px solid var(--divider);
}
.rzActions .rzBtn{flex:1}
.rzActions .rzBtn.primary{flex:1.6}
/* In der iOS-Hülle liegt die native Glasleiste über allem — die
   Aktionen stehen darüber, wie bei den übrigen Blättern (app.css). */
html.native-ios-shell .rzActions{padding-bottom:calc(var(--native-glass-height) + var(--native-glass-bottom) + 14px)}

/* ---------------- Kochmodus ---------------- */
.rzCook{
  position:fixed;inset:0;z-index:96;display:flex;flex-direction:column;background:var(--bg-primary);
  padding-top:max(var(--safe-top),10px);animation:rzRise .3s var(--ease);
}
.rzCookTop{display:flex;align-items:center;gap:10px;padding:6px var(--pad) 8px}
.rzCookTitle{flex:1;min-width:0;font-weight:700;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-secondary)}
.rzProgress{height:5px;margin:0 var(--pad);border-radius:99px;background:var(--fill-strong);overflow:hidden}
.rzProgress i{display:block;height:100%;width:0;background:var(--brand-primary);border-radius:99px;transition:width .3s var(--ease)}
.rzTimers{display:flex;gap:8px;overflow-x:auto;padding:10px var(--pad) 0;scrollbar-width:none}
.rzTimers[hidden]{display:none}
.rzTimer{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:999px;
  background:var(--info-soft);color:var(--info-text);font-size:.84rem;
}
.rzTimer strong{font-variant-numeric:tabular-nums;font-size:1rem}
.rzTimer.paused{background:var(--fill-subtle);color:var(--text-secondary)}
.rzTimer.done{background:var(--warning-soft);color:var(--warning-text);animation:rzPulse 1s var(--ease) infinite}
.rzTimerLabel{max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rzTimerBtn{
  width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;font:inherit;font-size:.8rem;font-weight:700;
  background:var(--surface-elevated);color:var(--text-primary);
}
.rzStage{
  flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:18px;
  padding:26px calc(var(--pad) + 6px) 20px;max-width:720px;width:100%;margin:0 auto;
}
.rzCookEyebrow{font-size:.78rem;font-weight:800;letter-spacing:.1em;color:var(--text-brand)}
.rzCookHeading{margin:0;font-size:1.7rem;letter-spacing:-.02em;line-height:1.2}
.rzCookSub{margin:0;font-size:1.02rem;color:var(--text-secondary);line-height:1.5}
.rzCookStep{margin:0;font-size:clamp(1.4rem,5.4vw,2rem);line-height:1.38;font-weight:650;letter-spacing:-.01em;overflow-wrap:break-word}
.rzCookIngs{display:flex;flex-wrap:wrap;gap:8px}
.rzCookIng{
  display:inline-flex;gap:6px;align-items:baseline;padding:8px 12px;border-radius:999px;font-size:.92rem;
  background:var(--surface-secondary);color:var(--text-primary);
}
.rzCookIng b{color:var(--text-brand)}
.rzCheckList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rzCheck{
  display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-md);cursor:pointer;
  background:var(--surface-primary);border:1px solid var(--border-subtle);transition:opacity .15s var(--ease);
}
.rzCheck input{width:24px;height:24px;accent-color:var(--brand-primary);flex:0 0 auto}
.rzCheck.on{opacity:.55}
.rzCheck.on .rzCheckName{text-decoration:line-through}
.rzCheckName{flex:1;min-width:0;font-size:1.02rem;font-weight:600}
.rzCheckHint{font-size:.76rem;font-weight:600;color:var(--text-muted);margin-left:4px}
.rzCheckHint.rzCheckMissing{color:var(--warning-text)}
.rzCheckAmount{font-size:.95rem;font-weight:700;color:var(--text-secondary)}
.rzDoneIcon{font-size:4.2rem;text-align:center;animation:rzPop .5s var(--ease)}
.rzDone .rzCookHeading,.rzStage .rzDoneIcon+.rzCookHeading{text-align:center}
.rzDoneActions{display:flex;flex-direction:column;gap:10px}
.rzCookNav{
  display:flex;gap:10px;padding:12px var(--pad) calc(var(--safe-bottom) + 14px);
  border-top:1px solid var(--divider);background:var(--bg-material);
}
html.native-ios-shell .rzCookNav{padding-bottom:calc(var(--native-glass-height) + var(--native-glass-bottom) + 14px)}

@keyframes rzFade{from{opacity:0}to{opacity:1}}
@keyframes rzFadeOut{to{opacity:0}}
@keyframes rzRise{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes rzPop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.1)}100%{transform:none;opacity:1}}
@keyframes rzPulse{50%{filter:brightness(.92)}}

/* Breite Bildschirme: das Blatt als Karte in der Mitte. */
@media (min-width:720px){
  .rzOverlay{align-items:center;padding:24px}
  .rzSheet{height:min(88vh,900px);border-radius:var(--r-lg)}
  .rzList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .rzOverlay,.rzSheet,.rzCook,.rzDoneIcon,.rzTimer.done{animation:none}
  .rzProgress i{transition:none}
}