/* Pinky and the Family — kompakte Rezeptküche mit Navy, Pink und Laborhumor. */

:root {
  color-scheme: dark;
  --bg: #101626;
  --surface: #192238;
  --raised: #222e46;
  --field: #111a2c;
  --ink: #f7f2eb;
  --muted: #b9c3d5;
  --line: #3b4962;
  --accent: #ff94c2;
  --accent-hover: #ffb1d3;
  --accent-ink: #291629;
  --highlight: #ffe18b;
  --mint: #a7e7cf;
  --danger: #ffb8b2;
  --chip: #29344d;
  --success-bg: #183831;
  --success-line: #397d69;
  --warning-bg: #382f26;
  --warning-line: #8e7447;
  --error-bg: #38232f;
  --error-line: #98566b;
  --radius: 18px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: var(--sans);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

main {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 16px 64px;
}

h1 { font-size: 1.6rem; margin: 0.2em 0 0.6em; }
h2 { font-size: 1.15rem; margin: 1.4em 0 0.5em; }

a { color: var(--accent); }

/* ---------- Buttons & Eingaben ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-danger { color: var(--danger); border-color: var(--danger); }

input, textarea, select {
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 44px;
  width: 100%;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

label { display: block; font-weight: 600; margin: 14px 0 6px; }
.hint { font-size: 0.85rem; color: var(--muted); margin: 4px 0 0; }

/* ---------- Liste ---------- */

.list-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.list-head h1 { margin: 0; flex: 1 1 100%; }

.search { flex: 1 1 220px; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.card-hero {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
  background: var(--chip);
  display: block;
}
.card h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--ink); }
.card .desc {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.92rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card .meta { font-size: 0.88rem; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--chip);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.8rem;
  color: var(--ink);
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: 48px 16px;
}

/* ---------- Rezeptansicht ---------- */

.back { display: inline-block; margin: 4px 0 10px; text-decoration: none; font-weight: 600; }

.detail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.detail .desc { color: var(--muted); }
.detail .meta { color: var(--muted); margin: 10px 0 0; }

/* ---------- Rezeptbilder: Galerie, Titelbild, Löschen ---------- */

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 16px 0 4px;
}
.gallery-item {
  position: relative;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--chip);
}
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
}
.gallery-hero img { max-height: 340px; }
.gallery-item:not(.gallery-hero) img { max-height: 260px; }
.hero-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(45, 42, 38, 0.75);
  color: #fff;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.78rem;
  font-weight: 600;
}
.img-del {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(45, 42, 38, 0.75);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-del:hover { background: var(--danger); }

.servings {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 4px;
  padding: 12px;
  background: var(--bg);
  border-radius: 10px;
}
.servings .label { font-weight: 700; }
.servings input {
  width: 84px;
  text-align: center;
  min-height: 48px;
  font-size: 1.2rem;
  font-weight: 700;
}
.step-btn {
  width: 48px;
  min-height: 48px;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
}

ul.ingredients { padding-left: 0; list-style: none; }
ul.ingredients li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
ul.ingredients li:last-child { border-bottom: none; }
ul.ingredients .qty { font-weight: 700; white-space: nowrap; }
ul.ingredients .free { color: var(--muted); font-style: italic; }

ol.steps { padding-left: 1.4em; }
ol.steps li { margin: 10px 0; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* ---------- Editor ---------- */

.editor { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.ing-row, .step-row {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}
.ing-row { grid-template-columns: 92px 84px 1fr auto; }
.ing-row input { min-height: 44px; }
.step-row { grid-template-columns: 1fr auto auto auto; }

.icon-btn {
  width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 1.1rem;
}

/* ---------- Editor: Bildvorschau ---------- */

.file-btn {
  display: inline-flex;
  margin: 12px 0 4px;
  width: auto;
}
.img-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin: 12px 0 4px;
}
.img-preview-item {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--chip);
}
.img-preview-item img {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
}
.img-preview-item .hero-badge { top: 6px; left: 6px; padding: 2px 10px; }
.img-preview-item .img-del {
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
}

.error-box {
  background: #fdecea;
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 0.95rem;
}
.error-box ul { margin: 6px 0 0; padding-left: 1.2em; }

/* ---------- KI-Rezeptimport (Textmodus, Teilblock A) ---------- */

.import-view { max-width: 720px; }

/* Stufe 8 Teilblock A: Modus-Tabs Text/Bilder + nummerierte Importbild-Vorschau */
.imp-mode-tabs { display: flex; gap: 6px; margin: 4px 0 10px; }
.imp-mode-tab {
  flex: 1 1 0;
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--chip);
  color: var(--ink);
  border-radius: 10px;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
}
.imp-mode-tab.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.imp-mode-tab:not(.is-active):hover { background: var(--bg); }
.imp-img-preview { margin-top: 10px; }
.imp-img-item img { image-orientation: from-image; }
.imp-img-item .imp-img-num {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(45, 42, 38, 0.75);
  color: #fff;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 600;
}

.ai-status {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 14px 0 4px;
}
.ai-status .hint { margin: 4px 0 0; }

.ai-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.82rem;
  font-weight: 700;
}
.ai-badge-on { background: #e3f0e0; color: #2e6b34; }
.ai-badge-unavailable { background: #fdf1dc; color: #8a5b00; }
.ai-badge-off { background: var(--chip); color: var(--muted); }

.imp-text { min-height: 260px; }

/* Teilblock B: Consent, Aktionszeile, Ladezustand, Meldung */
.imp-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 0.9rem;
  cursor: pointer;
}
.imp-consent input { margin-top: 3px; flex: 0 0 auto; }

.imp-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.imp-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--muted);
}
.imp-progress { margin-top: 16px; padding: 17px; background: #152c36; border: 1px solid #426978; border-radius: 14px; }
.imp-progress-heading { display: flex; align-items: center; gap: 10px; line-height: 1.4; }
.imp-progress-heading strong { color: #b7efd9; font-size: 1rem; }
.imp-progress-spinner { width: 20px; height: 20px; flex: 0 0 20px; border: 3px solid #426978; border-top-color: #ff98cb; border-radius: 50%; animation: imp-spin 1.1s linear infinite; }
.imp-progress-steps { display: flex; gap: 6px; padding: 0; margin: 16px 0 12px; list-style: none; counter-reset: import-step; }
.imp-progress-steps li { flex: 1; min-width: 0; padding: 7px 3px; border-top: 3px solid #426978; color: #b5c2cd; font-size: .75rem; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.imp-progress-steps li.is-current { border-color: #ff98cb; color: #ffd2e8; }
.imp-progress-steps li.is-complete { border-color: #72d6ac; color: #b7efd9; }
.imp-progress .hint { margin: 0; font-size: .85rem; line-height: 1.55; }
.imp-progress-time { margin: 12px 0 0; font-size: .85rem; color: #d6e6e8; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .imp-progress-spinner { animation: none; } }
.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: imp-spin 0.8s linear infinite;
}
@keyframes imp-spin { to { transform: rotate(360deg); } }

.imp-msg {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 0.92rem;
}
.imp-msg-err {
  background: #fdeceb;
  border-color: #f2c6c3;
  color: var(--danger);
}
.imp-msg-ok {
  background: #e3f0e0;
  border-color: #c4dcc7;
  color: #2e6b34;
}

/* Teilblock C1: Hinweis im Editor nach KI-Draft-Übernahme (nichts gespeichert) */
.imp-draft-note {
  padding: 8px 12px;
  border: 1px solid #d9c9a3;
  border-radius: 8px;
  background: #fdf6e3;
  color: #7a5c1e;
}

/* Teilblock C2: Warning-Boxen (Editor + Importansicht) und
   Hervorhebung des ersten betroffenen Editorfelds */
.imp-warn-box {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #e0c98f;
  background: #fdf9ec;
  color: #6b5313;
  font-size: 0.92rem;
}
.imp-warn-box-need {
  border-color: #f0b26b;
  background: #fff4e4;
  color: #7a3e00;
}
.imp-warn-heading {
  margin: 0 0 4px;
  font-weight: 700;
}
.imp-warn-title {
  margin: 8px 0 2px;
  font-weight: 700;
}
.imp-warn-list {
  margin: 4px 0 0;
  padding-left: 1.2em;
}
.imp-warn-list li { margin: 2px 0; }
.imp-warn-item-err,
.imp-warn-item-error { color: var(--danger); }
.imp-warn-item-info { color: var(--muted); }
.imp-warn-target {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
  background: #fff4e4;
}

/* Importeditor: lange Quelle/Warnungen, sichtbarer Fokus und echte Touchziele. */
[hidden] { display: none !important; }
.editor, .editor > *, .row2 > *, .ing-row > *, .step-row > * { min-width: 0; }
.imp-mode-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.imp-mode-tab[aria-selected="true"] { outline: 2px solid var(--accent); }
.imp-warn-box, .imp-msg, .hint, .detail, .chips, .card { overflow-wrap: anywhere; }
#import-panel { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 18px; }
#import-panel button, #import-panel input[type="file"], .img-del, .icon-btn { min-width: 44px; min-height: 44px; }
.imp-consent { min-height: 44px; align-items: center; }
.imp-consent input { width: 24px; height: 24px; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}

/* ---------- Mobil ---------- */

@media (max-width: 640px) {
  main { padding: 12px 10px 48px; }
  h1 { font-size: 1.35rem; }
  .detail, .editor { padding: 14px 12px; }
  .row2 { grid-template-columns: 1fr; }
  .ing-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .ing-row .ing-unit { grid-column: 2 / -1; }
  .ing-row .ing-name { grid-column: 1 / 3; }
  .step-row { grid-template-columns: repeat(3, 44px) minmax(0, 1fr); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
  .step-row .step-text { order: 1; grid-column: 1 / -1; }
  .step-row .icon-btn { order: 2; }
  .actions .btn { flex: 1 1 auto; }
  .list-head .btn { flex: 1 1 auto; }
  .file-btn { width: 100%; }
  .card-hero { height: 140px; }
  .gallery { grid-template-columns: 1fr; }
  .img-preview-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
/* Familienkonten ergänzen die bestehende Rezeptoberfläche. */
[hidden] { display: none !important; }
.topbar { flex-wrap: wrap; gap: 12px; }
#account-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }
#account-nav a { color: inherit; font-size: .9rem; }
.active-user { font-weight: 700; overflow-wrap: anywhere; }
.scope-tabs { display: flex; gap: 8px; margin: 0 0 20px; }
.scope-tabs .is-active { background: var(--accent, #4b6f44); color: white; }
.recipe-ownership { font-size: .88rem; font-weight: 600; color: #465d48; margin: 8px 0; overflow-wrap: anywhere; }
.provenance { background: #f0f3ec; padding: 12px 16px; border-left: 3px solid #748969; margin: 12px 0 20px; overflow-wrap: anywhere; }
.success-box { padding: 12px 16px; background: #e8f2e5; border-radius: 8px; }
.auth-card { max-width: 500px; margin: 40px auto; padding: 24px; background: white; border-radius: 14px; border: 1px solid #ddd; }
.auth-card label, .family-dialog label { display: block; margin: 14px 0 5px; font-weight: 600; }
.auth-card input:not([type=checkbox]), .family-dialog input:not([type=checkbox]), .family-dialog select { display: block; width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px; border: 1px solid #b9c0b5; border-radius: 7px; font: inherit; }
.auth-card button[type=submit] { margin-top: 18px; }
.checkbox-label { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; }
.checkbox-label input { width: 18px; height: 18px; flex-shrink: 0; }
.family-dialog { max-width: min(560px, calc(100vw - 32px)); width: 100%; border: 1px solid #bcc3b7; border-radius: 14px; padding: 24px; box-sizing: border-box; }
.family-dialog::backdrop { background: #17251999; }
.family-dialog .actions { margin-top: 20px; }
.temporary-password { padding: 16px; background: #edf2e9; font-family: monospace; font-size: 1.25rem; user-select: all; }
.password-field { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.password-field input { flex: 1; min-width: 0; }
.password-field .password-toggle { flex: 0 0 auto; min-height: 44px; padding: 8px 10px; font-size: .85rem; }
.family-dialog input.temporary-password { font-family: monospace; font-size: clamp(1.05rem,4vw,1.25rem); white-space: nowrap; overflow-wrap: normal; }
.temporary-password-copy { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.temporary-password-copy p { flex: 1 1 180px; font-size: .9rem; margin: 0; }
.user-card { padding: 18px; border: 1px solid #ddd; border-radius: 10px; margin: 14px 0; background: white; }
.user-card h2 { margin-top: 0; }
.conflict-panel { padding: 16px; background: #fff8e5; border: 1px solid #cfb85a; border-radius: 10px; margin-bottom: 20px; }
.conflict-panel pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 340px; overflow: auto; font-size: .85rem; }
.session-status { padding: 20px; text-align: center; }
.session-locked #view, .session-locked #account-nav, .session-locked dialog { visibility: hidden; }
@media (max-width: 600px) {
  #account-nav { margin-left: 0; width: 100%; gap: 10px; }
  #account-nav .btn { padding: 7px 9px; font-size: .8rem; }
  .auth-card { margin: 16px 0; padding: 18px; }
  .actions { flex-wrap: wrap; }
}

/* ---------- Gestaltung: Familienkochbuch ---------- */
body { font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font-family: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -.035em; line-height: 1.16; }
h1 { font-size: 2.6rem; }
h2 { font-size: 1.8rem; }
a { text-underline-offset: 4px; }
.ui-icon { width: 19px; height: 19px; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.eyebrow { font: 600 .65rem/1.4 "Segoe UI", sans-serif; letter-spacing: .16em; color: #5c6d51; margin: 0 0 12px; }
.topbar { padding: 18px max(28px, calc((100vw - 1220px) / 2)); min-height: 90px; gap: 24px; background: #f6f4edf5; border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: 12px; font: 500 1.8rem/1 var(--serif); letter-spacing: -.05em; white-space: nowrap; }
.brand-mark { width: 44px; height: 48px; display: grid; place-items: center; border-radius: 13px 13px 13px 3px; color: #f9f5e9; background: var(--accent); }
.brand-mark svg { width: 29px; height: 29px; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.brand-caption { display: block; margin-top: 6px; font: 400 .65rem/1.2 "Segoe UI", sans-serif; letter-spacing: .07em; color: var(--muted); }
#account-nav { gap: 22px; font-size: .82rem; }
#account-nav a { font-size: .82rem; text-decoration: none; color: #56614f; }
#account-nav a:hover { color: var(--ink); text-decoration: underline; }
.account-identity { display: flex; align-items: center; gap: 9px; padding-left: 22px; border-left: 1px solid var(--line); }
.avatar { display: grid; place-items: center; background: #e3e8d8; color: #4c6348; width: 34px; height: 34px; border: 1px solid #d4ddc6; border-radius: 50%; font: 500 1.05rem var(--serif); text-transform: uppercase; }
.active-user { font-size: .82rem; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { max-width: 1276px; padding: 36px 28px 72px; min-height: calc(100vh - 180px); }
.site-footer { max-width: 1220px; padding: 24px 0 32px; border-top: 1px solid var(--line); margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; color: #6c7463; font-size: .73rem; }
.site-footer span:first-child { font: italic 1rem var(--serif); color: #6e7c63; }
.btn { gap: 8px; border-radius: 9px; padding: 11px 18px; font-size: .83rem; font-weight: 600; line-height: 1.4; transition: background .18s, border-color .18s, box-shadow .18s, transform .18s; }
.btn:hover { background: #eeefe6; border-color: #b7c0ac; }
.btn-primary { box-shadow: 0 3px 5px #2438280c; }
.btn-primary:hover { background: #263f2e; border-color: #263f2e; color: white; box-shadow: 0 4px 12px #24382820; }
.btn-secondary { background: transparent; }
.btn-quiet { border-color: transparent; background: transparent; color: var(--muted); padding: 8px; }
.btn-danger { border-color: #e5c8bb; color: #9a4b39; background: #fffaf6; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
input, textarea, select { border-radius: 8px; background: #fffefb; border-color: #d9ddcf; font-size: .92rem; }
input::placeholder, textarea::placeholder { color: #6c7563; }
label { font-size: .83rem; color: #495640; }
.hint { font-size: .79rem; line-height: 1.65; }
.collection-hero { display: flex; position: relative; overflow: hidden; min-height: 306px; align-items: center; background: #eaece0; border: 1px solid #e3e5d6; border-radius: 22px; padding: 36px 44px; }
.hero-copy { position: relative; z-index: 1; width: 58%; }
.collection-hero .eyebrow { margin-bottom: 17px; font-size: .62rem; }
.collection-hero h1 { font-size: clamp(2.65rem, 4.5vw, 3.65rem); line-height: 1.03; letter-spacing: -.045em; margin: 0; color: #314730; }
.collection-hero h1 em { font-weight: 400; color: #687b52; }
.hero-subtitle { color: #5e6a53; font-size: .88rem; line-height: 1.75; margin: 18px 0 0; }
.hero-illustration { position: absolute; width: 53%; right: -8px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.admin-hero { min-height: 220px; }
.admin-hero h1 { font-size: 2.8rem; }
.admin-hero .hero-illustration { width: 36%; opacity: .8; }
.collection-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 38px 0 23px; }
.collection-heading .eyebrow { font-size: .58rem; margin-bottom: 7px; }
.collection-heading h2 { font-size: 1.9rem; margin: 0; }
.collection-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.list-head { padding: 0; margin-bottom: 16px; gap: 20px; flex-wrap: nowrap; }
.search-wrap { position: relative; flex: 1 1 auto; }
.search-wrap > .ui-icon { position: absolute; top: 15px; left: 16px; color: #818b75; width: 18px; height: 18px; }
.search { padding: 13px 16px 13px 45px; height: 48px; background: #fffef9; border-color: #dedfd2; }
.scope-tabs { display: flex; margin: 0; gap: 4px; padding: 4px; background: #eaece2; border: 1px solid #e2e5d8; border-radius: 10px; flex: 0 0 auto; }
.scope-tabs .btn { min-height: 44px; padding: 8px 22px; border: 0; background: transparent; color: #616d53; font-size: .8rem; border-radius: 7px; }
.scope-tabs .btn.is-active { background: #fffef9; color: #354b32; box-shadow: 0 2px 5px #37432e10; }
.scope-tabs .btn:hover { color: #253d28; background: #f3f4ea; }
.collection-meta { display: flex; justify-content: space-between; gap: 10px; align-items: center; color: #68735e; font-size: .69rem; margin: 20px 0 16px; }
#recipe-count { color: #5f6b55; font-weight: 600; }
.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { padding: 0; display: flex; flex-direction: column; border-radius: 14px; background: #fffef9; border-color: #e2e4d9; box-shadow: 0 3px 6px #343d2904; transition: transform .2s, box-shadow .2s, border-color .2s; }
@media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-4px); border-color: #bfc8b1; box-shadow: 0 9px 26px #33442b0d; } }
.card-content { padding: 18px 21px 16px; display: flex; flex: 1; flex-direction: column; }
.card h3 { font-size: 1.5rem; margin: 10px 0 10px; letter-spacing: -.025em; }
.card .desc { font-size: .81rem; line-height: 1.65; color: #68715f; margin-bottom: 15px; }
.card .chips { margin-bottom: 18px; }
.chip { color: #646d54; background: #f0f1e7; border-radius: 5px; font-size: .64rem; padding: 4px 9px; }
.card-photo { height: 196px; overflow: hidden; }
.card-hero { height: 100%; width: 100%; border-radius: 0; margin: 0; object-fit: cover; transition: transform .35s; }
@media (hover: hover) and (pointer: fine) { .card:hover .card-hero { transform: scale(1.035); } }
.card-art { height: 196px; position: relative; display: grid; place-items: center; overflow: hidden; }
.card-art svg { width: 230px; height: 162px; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .72; transform: rotate(-9deg); }
.art-0 { background: #e3e8d7; color: #718761; }
.art-1 { background: #ede4d2; color: #a79268; }
.art-2 { background: #ebddd4; color: #b28b71; }
.art-3 { background: #dfe6dc; color: #728872; }
.art-stamp { position: absolute; left: 17px; top: 14px; font-size: .49rem; text-transform: uppercase; letter-spacing: .17em; opacity: .85; }
.art-corner { position: absolute; right: 14px; bottom: 13px; font: italic .7rem var(--serif); opacity: .8; }
.recipe-ownership { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #68715f; font: 400 .75rem/1.5 "Segoe UI", sans-serif; margin: 0; }
.visibility-label { display: inline-flex; align-items: center; gap: 5px; color: #5f744e; }
.visibility-label .ui-icon { width: 13px; height: 13px; }
.visibility-label.is-private { color: #806b51; }
.ownership-dot { color: #bbc0af; }
.card .recipe-ownership { font-size: .66rem; }
.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #edefe4; margin-top: auto; padding-top: 13px; }
.card .meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: .67rem; }
.card .meta > span { display: inline-flex; align-items: center; gap: 5px; }
.card .meta .ui-icon { width: 14px; height: 14px; }
.card-arrow { color: #8c9b79; line-height: 1; }
.empty { grid-column: 1 / -1; padding: 48px 24px 55px; border: 1px dashed #cfd6bf; border-radius: 16px; background: #f0f1e7; }
.empty > .ui-icon { width: 36px; height: 36px; color: #879974; }
.empty h2 { font-size: 1.8rem; color: #586c49; margin: 18px 0 12px; }
.empty p { font-size: .88rem; margin-bottom: 24px; }
.back { font-size: .8rem; color: #69785b; margin: 0 0 22px; }
.detail, .editor { padding: 36px 42px; border-radius: 18px; border-color: #e0e2d4; }
.detail h1 { font-size: clamp(2.1rem, 4vw, 3.3rem); margin: 10px 0 16px; max-width: 840px; }
.detail > .desc { font-size: 1rem; line-height: 1.8; max-width: 720px; margin: 20px 0 24px; }
.detail > .meta { font-size: .8rem; margin: 14px 0; }
.detail > .chips { margin: 24px 0 20px; }
.gallery { gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0; }
.gallery-hero { grid-column: 1 / -1; }
.gallery-hero img { max-height: 440px; }
.recipe-columns { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 48px; margin: 34px 0 8px; padding-top: 32px; border-top: 1px solid var(--line); align-items: start; }
.ingredient-section { background: #f2f3e9; padding: 26px; border-radius: 12px; }
.recipe-columns h2 { margin: 0 0 22px; font-size: 1.9rem; }
.servings { gap: 7px; padding: 0 0 20px; background: transparent; margin: 0; border-bottom: 1px solid #d9deca; border-radius: 0; }
.servings .label { width: 100%; font-size: .73rem; font-weight: 500; color: #68745c; margin-bottom: 3px; }
.servings .step-btn { width: 44px; min-height: 44px; padding: 0; font-size: 1.1rem; background: #fffef8; }
.servings input { width: 57px; min-height: 44px; font-size: .95rem; padding: 7px 2px; }
.servings .hint { display: block; flex-basis: 100%; margin: 5px 0 0; font-size: .67rem; }
ul.ingredients { margin: 14px 0 0; font-size: .88rem; }
ul.ingredients li { padding: 12px 0; border-bottom: 1px solid #e0e4d4; line-height: 1.65; }
ul.ingredients .qty { font-weight: 600; color: #435c38; }
.method-section { padding: 10px 0; }
.method-section .eyebrow { margin-bottom: 8px; }
ol.steps { list-style: none; counter-reset: steps; padding: 0; }
ol.steps li { counter-increment: steps; position: relative; padding: 0 0 22px 48px; margin: 0 0 22px; border-bottom: 1px solid #ebede2; font-size: .94rem; line-height: 1.85; }
ol.steps li::before { content: counter(steps, decimal-leading-zero); position: absolute; left: 0; top: 0; color: #8d9d76; font: italic 1.5rem var(--serif); }
.detail .actions { border-top: 1px solid var(--line); padding-top: 25px; margin-top: 28px; }
.detail .actions > .hint { flex-basis: 100%; }
.provenance { margin: 20px 0; border-left-color: #afbc93; color: #677356; font-size: .79rem; background: #f0f3e6; border-radius: 0 8px 8px 0; }
.editor { max-width: 900px; margin: 0 auto; }
.editor h1 { margin-bottom: 26px; font-size: 2.25rem; }
.editor h2 { font-size: 1.55rem; margin-top: 32px; }
.editor label { margin-top: 20px; }
.editor .actions { border-top: 1px solid var(--line); padding-top: 22px; }
.imp-mode-tab { font-size: .83rem; }
.ai-status { background: #f3f4ec; }
.auth-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 65px; align-items: center; padding: 30px 45px 55px; }
.auth-story { position: relative; min-height: 530px; padding: 40px 0 230px; }
.auth-story h2 { font-size: clamp(2.5rem, 4vw, 3.6rem); line-height: 1.12; margin: 20px 0; }
.auth-story h2 em { color: #7a8b5e; }
.auth-story > p:not(.eyebrow) { font-size: .9rem; color: #68735b; line-height: 1.8; }
.auth-story img { position: absolute; width: 400px; max-width: 100%; height: 260px; object-fit: contain; left: -25px; bottom: -10px; }
.auth-card { max-width: 470px; padding: 35px; margin: 0 auto; border-color: #e0e3d3; border-radius: 18px; background: #fffef9; box-shadow: 0 12px 45px #39422b05; width: 100%; }
.auth-card h1 { font-size: 2.1rem; margin-bottom: 16px; }
.auth-card > p:not(.eyebrow) { color: #68735b; font-size: .85rem; line-height: 1.75; }
.auth-card input:not([type=checkbox]), .family-dialog input:not([type=checkbox]), .family-dialog select { border-radius: 8px; padding: 11px 12px; border-color: #d9ddcf; background: #fffefb; font-size: .92rem; }
.auth-card label { font-size: .79rem; margin-top: 21px; }
.auth-card .checkbox-label { font-size: .74rem; line-height: 1.6; }
input[type=checkbox] { accent-color: var(--accent); min-height: 18px; }
.auth-card button[type=submit] { width: 100%; margin-top: 24px; }
.auth-help { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 24px; font-size: .73rem !important; }
.family-dialog { border-color: #d7ddc8; border-radius: 16px; padding: 30px; box-shadow: 0 20px 80px #25351f30; }
.family-dialog h2 { font-size: 1.8rem; }
.family-dialog p { font-size: .9rem; line-height: 1.7; }
.family-dialog::backdrop { background: #26352366; backdrop-filter: blur(3px); }
.user-card { background: var(--surface); border-color: var(--line); border-radius: 14px; padding: 25px; }
.user-card h2 { font-size: 1.45rem; }
.user-card p { font-size: .87rem; color: var(--muted); }
.success-box { font-size: .86rem; background: #e7eddd; color: #48623e; border: 1px solid #d3dfc4; }
.error-box { font-size: .86rem; background: #fff1eb; border-color: #e7c4b5; color: #a34e3a; }
@media (max-width: 1080px) {
  .topbar { padding: 16px 28px; gap: 20px; }
  #account-nav { gap: 14px; }
  .account-identity { padding-left: 0; border: 0; }
  .hero-copy { width: 65%; }
  .cards { gap: 18px; }
  .card-content { padding: 17px; }
  .card h3 { font-size: 1.35rem; }
  .card-art, .card-photo { height: 176px; }
  .site-footer { margin: 0 28px; }
  .auth-layout { gap: 30px; padding: 20px 0; }
}
@media (max-width: 800px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar { gap: 15px; padding: 16px 22px; }
  #account-nav { gap: 12px; }
  .active-user { max-width: 105px; }
  .collection-hero { padding: 30px; min-height: 290px; }
  .hero-copy { width: 80%; }
  .hero-illustration { right: -120px; width: 430px; opacity: .45; }
  .collection-hero h1 { font-size: 3rem; }
  .recipe-columns { gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .detail, .editor { padding: 28px; }
  .ingredient-section { padding: 19px; }
  .auth-layout { display: block; padding: 15px 0; }
  .auth-story { display: none; }
  .auth-card { max-width: 480px; margin: 15px auto 25px; }
}
@media (max-width: 600px) {
  main { padding: 22px 18px 45px; }
  .topbar { padding: 14px 18px 12px; gap: 15px; align-items: center; position: static; }
  .brand { font-size: 1.5rem; gap: 10px; }
  .brand-mark { width: 36px; height: 40px; border-radius: 10px 10px 10px 3px; }
  .brand-mark svg { width: 25px; height: 25px; }
  .brand-caption { font-size: .57rem; }
  #account-nav { width: 100%; justify-content: flex-start; gap: 13px; margin: 0; padding: 11px 0 0; border-top: 1px solid #e4e5da; }
  #account-nav a { font-size: .72rem; display: inline-flex; align-items: center; min-height: 44px; }
  #account-nav .btn { padding: 6px; min-height: 44px; min-width: 44px; }
  #account-nav .account-identity { order: -1; margin-right: auto; gap: 7px; }
  .avatar { width: 28px; height: 28px; font-size: .9rem; }
  .active-user { font-size: .74rem; max-width: 90px; }
  .collection-hero { min-height: 264px; border-radius: 16px; padding: 27px 23px; }
  .hero-copy { width: 100%; }
  .collection-hero .eyebrow { font-size: .51rem; margin-bottom: 18px; letter-spacing: .13em; }
  .collection-hero h1 { font-size: 2.35rem; line-height: 1.08; }
  .hero-subtitle { font-size: .76rem; line-height: 1.8; max-width: 240px; margin-top: 18px; }
  .hero-illustration { width: 200px; right: -86px; top: 19px; transform: none; opacity: .38; }
  .desktop-break { display: none; }
  .collection-heading { align-items: flex-start; flex-direction: column; gap: 19px; margin: 28px 0 18px; }
  .collection-heading h2 { font-size: 1.65rem; }
  .collection-heading .eyebrow { font-size: .5rem; }
  .collection-actions { width: 100%; gap: 8px; }
  .collection-actions .btn { flex: 1 1 auto; min-height: 46px; padding: 10px 13px; }
  .list-head { flex-direction: column; align-items: stretch; gap: 13px; }
  .search-wrap { flex: 0 0 auto; }
  .search { font-size: .79rem; }
  .scope-tabs .btn { flex: 1; padding: 8px; }
  .scope-tabs { align-self: stretch; }
  .collection-meta { margin: 18px 0 14px; font-size: .64rem; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .card-art, .card-photo { height: 194px; }
  .card-content { padding: 19px 20px 17px; }
  .card h3 { font-size: 1.6rem; }
  .card .desc { font-size: .83rem; }
  .card .recipe-ownership, .card .meta { font-size: .7rem; }
  .chip { font-size: .66rem; }
  .detail, .editor { padding: 23px 19px; border-radius: 14px; }
  .detail h1 { font-size: 2.15rem; }
  .detail > .desc { font-size: .9rem; }
  .recipe-columns { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 24px; margin-top: 24px; }
  .recipe-columns h2 { font-size: 1.7rem; }
  .ingredient-section { padding: 23px 20px; }
  .method-section { padding: 0; }
  ol.steps li { font-size: .9rem; padding-left: 40px; }
  .gallery { gap: 12px; grid-template-columns: 1fr; }
  .auth-card { padding: 28px 23px; margin: 5px 0 20px; }
  .auth-card h1 { font-size: 2rem; }
  .family-dialog { padding: 24px; }
  .site-footer { margin: 0 18px; padding: 23px 0; display: block; text-align: center; }
  .site-footer span { display: block; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .card:hover, .card:hover .card-hero { transform: none; }
}

/* ---------- Kompakte Alltagsansicht ---------- */
:root { --import-accent: #b84322; --import-accent-hover: #973619; --import-spark: #ffe39d; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.topbar {
  position: relative;
  flex-wrap: nowrap;
  min-height: 64px;
  padding: calc(8px + env(safe-area-inset-top)) max(24px, calc((100vw - 1220px) / 2)) 8px;
  gap: 16px;
  backdrop-filter: none;
}
.brand { font-size: 1.55rem; gap: 10px; min-height: 44px; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto; object-fit: contain; }
#account-nav { width: auto; flex: 0 1 auto; flex-wrap: nowrap; margin: 0 0 0 auto; padding: 0; border: 0; gap: 0; min-width: 0; }
.account-menu { position: relative; }
.account-menu > summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
}
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary:hover, .account-menu[open] > summary { background: #e9eddf; border-color: #d9dfcd; }
.account-menu > summary .avatar { width: 30px; height: 30px; font-size: .95rem; }
.account-menu > summary .active-user { max-width: 120px; font-size: .82rem; }
.account-menu > summary .ui-icon { width: 16px; height: 16px; }
.account-menu-panel {
  position: absolute;
  z-index: 30;
  right: 0;
  top: calc(100% + 7px);
  width: min(260px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px;
  border: 1px solid #d8ddcd;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 35px #20312826;
}
#account-nav .account-menu-panel a, #account-nav .account-menu-panel .btn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-height: 44px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
  text-decoration: none;
  font-size: .88rem;
  color: var(--ink);
  background: transparent;
}
#account-nav .account-menu-panel a:hover, #account-nav .account-menu-panel .btn:hover { background: #edf0e5; }
summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
main { min-height: calc(100vh - 65px); padding-top: 24px; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.collection-heading { margin: 0 0 18px; gap: 18px; }
.collection-heading h1, .collection-heading h2 { margin: 0; font-size: 2.15rem; }
.collection-actions { gap: 9px; }
.btn-ai, .btn-ai:visited { background: var(--import-accent); border-color: var(--import-accent); color: #fff; box-shadow: 0 3px 9px #85311618; }
.btn-ai:hover { background: var(--import-accent-hover); border-color: var(--import-accent-hover); color: #fff; }
.btn-ai .ui-icon { color: var(--import-spark); stroke-width: 2; }
.collection-meta { margin: 12px 0 12px; }
.card-art { height: 132px; }
.card-art svg { height: 120px; width: 172px; }
.card-photo { height: 180px; }
.card-content { padding-top: 13px; }
.card h3 { margin-top: 5px; }
.back { min-height: 44px; display: inline-flex; align-items: center; margin-bottom: 10px; }
.detail, .editor { padding: 28px 32px; }
.detail h1 { font-size: clamp(1.85rem, 3.5vw, 2.7rem); margin: 0 0 12px; }
.detail > .desc { margin: 14px 0 16px; line-height: 1.65; }
.recipe-columns { margin-top: 22px; padding-top: 22px; gap: 32px; }
.recipe-columns h2 { margin-bottom: 16px; }
.ingredient-section { padding: 22px; }
.servings { padding-bottom: 14px; }
ul.ingredients li { padding: 9px 0; }
ol.steps li { margin-bottom: 16px; padding-bottom: 16px; line-height: 1.7; }
.detail .actions { padding-top: 18px; margin-top: 18px; align-items: flex-start; }
.recipe-more { flex: 1 1 200px; }
.recipe-more > summary, .import-details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  cursor: pointer;
  color: #536049;
  font-size: .83rem;
  font-weight: 600;
  list-style: none;
  border-radius: 8px;
}
.recipe-more > summary::-webkit-details-marker, .import-details > summary::-webkit-details-marker { display: none; }
.recipe-more > summary::after, .import-details > summary::after { content: '⌄'; font: 700 1rem/1 system-ui, sans-serif; margin-left: auto; }
.recipe-more[open] > summary::after, .import-details[open] > summary::after { transform: rotate(180deg); }
.recipe-more > summary { border: 1px solid var(--line); background: #f6f7ef; justify-content: center; }
.recipe-more > summary:hover, .import-details > summary:hover { background: #edf0e5; }
.recipe-more-panel { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
.recipe-more-panel > .hint { flex-basis: 100%; }
.scaling-note { margin: 12px 0 0; padding: 10px 12px; border: 1px solid #e0c49c; border-radius: 8px; background: #fff4df; color: #6c4b22; font-size: .82rem; line-height: 1.55; }
.editor h1 { margin: 0 0 18px; font-size: 2rem; }
.editor label { margin-top: 15px; }
.editor h2 { margin-top: 24px; }
.ai-status { padding: 8px 10px; margin-top: 10px; }
.ai-status .hint { line-height: 1.5; }
.imp-mode-tabs { margin: 14px 0 10px; }
.imp-mode-tab { padding: 10px 12px; }
.imp-photo-action { flex-grow: 1.3; background: #fae1cb; border-color: #c75f36; color: #82321c; }
.imp-photo-action:not(.is-active):hover { background: #f6ceb0; border-color: #aa4524; }
.imp-photo-action .ui-icon { color: #ad3d1e; stroke-width: 1.9; }
.imp-photo-action.is-active { background: var(--import-accent); border-color: var(--import-accent); color: #fff; }
.imp-photo-action.is-active .ui-icon { color: var(--import-spark); }
.imp-photo-action[aria-selected="true"] { outline-color: var(--import-accent-hover); outline-offset: 2px; }
.import-details { margin: 8px 0 0; border-top: 1px solid var(--line); }
.import-details > summary { padding-left: 0; padding-right: 2px; font-weight: 500; font-size: .78rem; }
.import-details > p { margin: 4px 0 10px; font-size: .79rem; line-height: 1.6; color: var(--muted); }
.imp-actions { margin-top: 12px; }
.imp-text { min-height: 190px; }
.imp-photo-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.imp-photo-controls .btn { flex: 1 1 150px; }

@media (max-width: 600px) {
  .topbar { min-height: 62px; padding: calc(7px + env(safe-area-inset-top)) 14px 7px; gap: 10px; }
  .brand { font-size: 1.4rem; gap: 8px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 9px; }
  #account-nav { width: auto; margin-left: auto; padding: 0; border: 0; }
  .account-menu > summary { gap: 6px; padding: 4px; }
  .account-menu > summary .active-user { max-width: 84px; }
  main { padding: 18px 14px calc(32px + env(safe-area-inset-bottom)); }
  .collection-heading { gap: 14px; margin-bottom: 14px; }
  .collection-heading h1, .collection-heading h2 { font-size: 1.9rem; }
  .collection-actions { gap: 8px; }
  .collection-actions .btn { min-height: 46px; padding: 10px 12px; }
  .list-head { gap: 10px; margin-bottom: 10px; }
  .search { font-size: 1rem; }
  .collection-meta { margin: 10px 0 10px; font-size: .73rem; }
  .cards { gap: 15px; }
  .card-art { height: 116px; }
  .card-art svg { height: 110px; width: 155px; }
  .card-photo { height: 168px; }
  .card-content { padding: 14px 17px; }
  .card h3 { font-size: 1.45rem; margin-top: 4px; margin-bottom: 8px; }
  .detail, .editor { padding: 19px 16px; }
  .detail h1 { font-size: 1.9rem; line-height: 1.16; }
  .detail > .desc { font-size: .89rem; margin: 12px 0 15px; }
  .recipe-columns { gap: 23px; margin-top: 18px; padding-top: 18px; }
  .recipe-columns h2 { font-size: 1.6rem; margin-bottom: 15px; }
  .ingredient-section { padding: 18px 16px; }
  .servings .label { width: auto; flex: 1 1 auto; margin: 0 5px 0 0; font-size: .8rem; }
  .servings .hint { font-size: .73rem; }
  ul.ingredients { margin-top: 8px; font-size: .91rem; }
  ul.ingredients li { padding: 9px 0; }
  ol.steps li { padding-left: 35px; margin-bottom: 14px; padding-bottom: 14px; font-size: .91rem; line-height: 1.68; }
  ol.steps li::before { font-size: 1.3rem; }
  .editor h1 { font-size: 1.85rem; margin-bottom: 16px; }
  .editor label { margin-top: 14px; }
  input, textarea, select, .servings input,
  .auth-card input:not([type=checkbox]), .family-dialog input:not([type=checkbox]), .family-dialog select { font-size: 1rem; }
  .imp-mode-tab { font-size: .83rem; padding: 11px 9px; }
  .recipe-more { flex-basis: 160px; }
}
@media (max-width: 350px) {
  .account-menu > summary .active-user { display: none; }
  .collection-actions .btn { padding: 10px 9px; font-size: .78rem; gap: 6px; }
  .imp-mode-tab { gap: 5px; padding: 10px 7px; font-size: .78rem; }
}

/* ---------- Pinky and the Family: Farben und Markenwelt ---------- */
/* Die bewährte kompakte Struktur bleibt bestehen; alle Oberflächen verwenden
   dieselben dunklen Farbstufen, einschließlich Konten, Import und Dialogen. */
:root { --import-accent: var(--accent); --import-accent-hover: var(--accent-hover); --import-spark: var(--highlight); }
html { background: var(--bg); }
body {
  min-height: 100vh;
  font-family: var(--sans);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 65% 430px at 96% -40px, #b7498620, transparent 75%),
    radial-gradient(ellipse 70% 650px at -12% 75%, #28667b13, transparent 75%),
    linear-gradient(#9cb5dd05 1px, transparent 1px),
    linear-gradient(90deg, #9cb5dd05 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}
::selection { color: var(--accent-ink); background: var(--accent); }
h1, h2, h3 { font-family: var(--sans); font-weight: 750; letter-spacing: -.025em; line-height: 1.2; color: var(--ink); }
h1 { overflow-wrap: anywhere; }
.eyebrow { color: var(--accent); font-family: var(--sans); font-weight: 700; letter-spacing: .1em; }
.topbar { min-height: 82px; padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; background: #111828; border-color: #344059; box-shadow: 0 1px 0 #f7f2eb05; }
.brand { flex: 0 0 auto; line-height: 1; letter-spacing: 0; }
.brand .brand-wordmark { display: block; width: 164px; height: 70px; max-width: 100%; object-fit: contain; object-position: left center; }
.brand-mark { background: transparent; }
.avatar { background: #3a2943; border-color: #83536f; color: #ffd2e5; font-family: var(--sans); font-weight: 700; }
.account-menu > summary { color: var(--ink); }
.account-menu > summary:hover, .account-menu[open] > summary { background: var(--raised); border-color: #51607a; }
.account-menu-panel { background: #1b253b; border-color: #53617c; box-shadow: 0 16px 40px #05081080; }
#account-nav a, #account-nav a:hover { color: var(--ink); }
#account-nav .account-menu-panel a, #account-nav .account-menu-panel .btn { color: var(--ink); }
#account-nav .account-menu-panel a:hover, #account-nav .account-menu-panel .btn:hover { background: #303b55; color: var(--ink); }
main { min-height: calc(100vh - 82px); }

.family-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 88px; margin: -6px 0 20px; padding: 0 4px 12px 0; border-bottom: 1px solid var(--line); }
.family-intro > div { min-width: 0; }
.family-intro .eyebrow { margin: 0 0 6px; font-size: .62rem; }
.family-intro h1, .family-intro h2, .family-intro h3 { margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.3; font-weight: 700; }
.family-intro p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.family-mascot { display: block; flex: 0 0 110px; width: 110px; height: 84px; object-fit: cover; object-position: center; border: 2px solid #bb83a5; border-radius: 9px; box-shadow: 4px 4px 0 #060d1c; transform: rotate(2deg); }
.collection-heading h1, .collection-heading h2 { font-size: 1.9rem; }
.collection-meta, #recipe-count { color: var(--muted); }
.collection-meta { font-size: .78rem; }
.list-head { align-items: center; }

.btn { background: var(--raised); color: var(--ink); border-color: #52617e; box-shadow: none; }
.btn:hover { background: #303d57; border-color: #8290aa; color: var(--ink); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 12px #f277b01a; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); box-shadow: 0 3px 16px #f277b027; }
.collection-actions .btn-primary { background: #25314b; color: var(--ink); border-color: #53617e; box-shadow: none; }
.collection-actions .btn-primary:hover { background: #35415c; border-color: #8391aa; }
.btn-ai, .btn-ai:visited { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 14px #ff94c21c; }
.btn-ai:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn-ai .ui-icon { width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: #33213d; color: var(--highlight); }
.btn-secondary { background: transparent; }
.btn-quiet { color: var(--muted); background: transparent; }
.btn-danger { background: #362434; color: var(--danger); border-color: #92516b; }
.btn-danger:hover { background: #512c40; border-color: #dc8297; color: #ffe1dd; }
.btn:disabled { opacity: .55; }
input, textarea, select,
.auth-card input:not([type=checkbox]), .family-dialog input:not([type=checkbox]), .family-dialog select { background: var(--field); color: var(--ink); border-color: #586780; caret-color: var(--accent); }
input::placeholder, textarea::placeholder { color: #a7b4c9; opacity: 1; }
select option { background: var(--field); color: var(--ink); }
input[type=file]::file-selector-button { min-height: 36px; padding: 6px 12px; margin-right: 10px; border: 1px solid #687994; border-radius: 6px; background: var(--raised); color: var(--ink); font: inherit; cursor: pointer; }
input[type=checkbox] { accent-color: var(--accent); }
input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 50px var(--field) inset; caret-color: var(--accent); }
label { color: #e1e5ed; }
.hint, .detail .meta, .detail .desc { color: var(--muted); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible { outline-color: var(--highlight); }
.search { background: var(--field); border-color: #586780; }
.search-wrap > .ui-icon { color: #b6c4d8; }
.scope-tabs { background: #162035; border-color: var(--line); }
.scope-tabs .btn { background: transparent; color: var(--muted); }
.scope-tabs .btn:hover { background: #303b55; color: var(--ink); }
.scope-tabs .btn.is-active { background: #3b2b46; color: #ffd2e5; box-shadow: inset 0 0 0 1px #8c5a7a; }

.card { background: var(--surface); border-color: #3a4963; box-shadow: 0 4px 18px #03081324; }
@media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-2px); border-color: #c878a1; box-shadow: 0 8px 22px #03081345; } }
/* Decorative card images must not become a pink selection while swiping.
   Keep text selection and keyboard focus available on the rest of the card. */
.card { -webkit-tap-highlight-color: transparent; }
.card img { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.card img::selection { background: transparent; }
.card h3 { color: var(--ink); font-size: 1.25rem; line-height: 1.28; letter-spacing: -.02em; }
.card .desc, .card .meta { color: var(--muted); }
.card .desc { font-size: .86rem; }
.card .meta, .card .recipe-ownership { font-size: .75rem; }
.card-bottom { border-color: var(--line); }
.card-arrow { color: var(--accent); }
.chip { background: #2e3952; color: #e0d8ed; border: 1px solid #485574; }
.art-0, .art-1, .art-2, .art-3 { background: #202c43; color: #b9afcd; }
.pinky-card-art { display: flex; flex-direction: column; align-items: stretch; gap: 7px; height: auto; padding: 12px 12px 9px; background: radial-gradient(ellipse at 30% 110%, #67447366, transparent 75%), #202b43; border-bottom: 1px solid #3a4963; }
.pinky-card-art > img { display: block; flex: none; width: 100%; max-width: none; height: auto; max-height: 260px; aspect-ratio: 4 / 3; object-fit: contain; object-position: center; background: #090b13; border: 1px solid #8a789e; border-radius: 8px; }
.pinky-card-art > span { align-self: flex-end; max-width: 100%; color: #d1bbd3; font-size: .67rem; line-height: 1.5; }
.recipe-ownership, .ownership-dot { color: var(--muted); }
.visibility-label { color: var(--mint); }
.visibility-label.is-private { color: #dbc9e6; }
.empty { background: #192238; border-color: #69728d; }
.empty > .ui-icon { color: var(--accent); }
.empty h2 { color: var(--ink); }
.back { color: #e2bbd3; }
.back:hover { color: var(--accent-hover); }
.detail, .editor { background: var(--surface); border-color: #3a4963; box-shadow: 0 5px 24px #0308131a; }
.detail h1 { max-width: 920px; font-size: clamp(1.65rem, 3vw, 2.3rem); }
.detail > .desc { font-size: 1rem; }
.recipe-columns { border-color: var(--line); }
.recipe-columns h2 { font-size: 1.45rem; }
.ingredient-section { background: #122033; border: 1px solid #344a62; }
.servings { background: transparent; border-color: #3c5068; }
.servings .label { color: var(--muted); }
.servings .step-btn { color: var(--ink); background: #26334c; border-color: #60708c; }
.servings .step-btn:hover { background: #394763; border-color: #93a0b5; }
ul.ingredients { font-size: 1rem; }
ul.ingredients li { border-color: #354960; line-height: 1.65; }
ul.ingredients .qty { color: var(--mint); font-weight: 700; }
ul.ingredients .free { color: var(--muted); }
ol.steps li { font-size: 1rem; border-color: var(--line); line-height: 1.75; }
ol.steps li::before { color: var(--accent); font-family: var(--sans); font-style: normal; font-weight: 750; font-size: 1.25rem; }
.recipe-more > summary, .import-details > summary { color: #d2c8df; }
.recipe-more > summary { background: #253149; border-color: #53617e; }
.recipe-more > summary:hover, .import-details > summary:hover { background: #303c55; color: var(--ink); }
.provenance { color: #d8c5e1; background: #2a2841; border-left-color: #c782bb; }
.gallery-item, .img-preview-item { background: #25304a; border-color: var(--line); }
.hero-badge, .imp-img-item .imp-img-num, .img-del { background: #111828e8; color: var(--ink); }
.img-del { border: 1px solid #6c7790; }
.img-del:hover { color: #251923; background: var(--danger); border-color: var(--danger); }
.editor h1 { font-size: 1.8rem; }
.editor h2 { font-size: 1.25rem; line-height: 1.35; }

.imp-mode-tab { background: #26314a; color: var(--ink); border-color: #5a6884; }
.imp-mode-tab:not(.is-active):hover { background: #35405b; }
.imp-mode-tab.is-active { background: #3c2d49; border-color: #bb739e; color: #ffd2e5; }
.imp-mode-tab[aria-selected="true"] { outline-color: #e18bb9; outline-offset: 2px; }
.imp-photo-action { background: #39283f; border-color: #a7658e; color: #ffd2e5; }
.imp-photo-action:not(.is-active):hover { background: #51324f; border-color: #db8ab7; }
.imp-photo-action .ui-icon { color: var(--highlight); }
.imp-photo-action.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.imp-photo-action.is-active .ui-icon { color: #4c2444; }
.imp-photo-action[aria-selected="true"] { outline-color: var(--accent-hover); }
.ai-status { background: #142336; border-color: #3b5367; }
.ai-badge-on { background: #244b3e; color: #b4f1d9; }
.ai-badge-unavailable { background: #4a3e2d; color: var(--highlight); }
.ai-badge-off { background: var(--chip); color: var(--muted); }
.ai-status .hint { color: #c4cfdd; }
.imp-msg-ok, .success-box { background: var(--success-bg); border-color: var(--success-line); color: #b7efd9; }
.imp-msg-err, .error-box { background: var(--error-bg); border-color: var(--error-line); color: var(--danger); }
.imp-draft-note, .imp-warn-box, .imp-warn-box-need, .scaling-note, .conflict-panel { background: var(--warning-bg); border-color: var(--warning-line); color: #f6dfae; }
.imp-warn-box-need { border-color: #cca064; }
.imp-warn-item-info { color: #ded1c0; }
.imp-warn-target { background: #3a3040; outline-color: var(--highlight); }
.import-details > p { color: var(--muted); }
.auth-story h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
.auth-story h2 em { color: var(--accent); font-style: normal; }
.auth-story > p:not(.eyebrow), .auth-card > p:not(.eyebrow) { color: var(--muted); }
.auth-story img { left: 0; object-fit: cover; object-position: center; border: 2px solid #8d6e95; border-radius: 14px; box-shadow: 7px 7px 0 #050d1b; }
.auth-card { background: var(--surface); border-color: #43516b; box-shadow: 0 12px 45px #04081340; }
.auth-card h1 { font-size: 1.85rem; }
.family-dialog { background: #1a243a; color: var(--ink); border-color: #6a728c; box-shadow: 0 25px 90px #030610a6; }
.family-dialog::backdrop { background: #050914b8; backdrop-filter: blur(5px); }
.family-dialog h2 { font-size: 1.55rem; }
.family-dialog p { color: #d4dbe6; }
.temporary-password { background: #193c36; color: #c7f4e2; border: 1px solid #549980; border-radius: 8px; }
.user-card { background: var(--surface); border-color: var(--line); }
.ai-settings { margin: 18px 0 26px; }
.ai-settings select { width: 100%; max-width: 430px; }
.ai-settings .hint { margin: 12px 0 18px; }
.ai-settings .imp-msg { margin-bottom: 0; }
#imp-analysis-model { overflow-wrap: anywhere; }
.session-status { background: #2f2942; color: #f3d7e6; border-bottom: 1px solid #785973; }

@media (max-width: 800px) {
  .family-intro { gap: 14px; }
  .family-mascot { width: 96px; flex-basis: 96px; height: 76px; }
}
@media (max-width: 600px) {
  .topbar { min-height: 76px; padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
  .brand .brand-wordmark { width: 148px; height: 64px; }
  .account-menu > summary .active-user { max-width: 76px; }
  main { min-height: calc(100vh - 76px); }
  .family-intro { margin: -4px 0 16px; padding-bottom: 10px; gap: 10px; min-height: 80px; }
  .family-intro h1, .family-intro h2, .family-intro h3 { font-size: 1.02rem; }
  .family-intro .eyebrow { font-size: .57rem; }
  .family-intro p:not(.eyebrow) { font-size: .77rem; }
  .family-mascot { width: 82px; flex-basis: 82px; height: 66px; }
  .collection-heading h1, .collection-heading h2 { font-size: 1.7rem; }
  .list-head { align-items: stretch; }
  .card h3 { font-size: 1.22rem; }
  .card .desc { font-size: .88rem; }
  .pinky-card-art { padding: 10px 10px 8px; }
  .detail h1 { font-size: 1.65rem; line-height: 1.25; }
  .detail > .desc { font-size: .95rem; }
  .recipe-columns h2 { font-size: 1.35rem; }
  ul.ingredients, ol.steps li { font-size: 1rem; line-height: 1.7; }
  ol.steps li::before { font-size: 1.15rem; }
  .editor h1 { font-size: 1.65rem; }
  .editor h2 { font-size: 1.2rem; }
}
@media (max-width: 350px) {
  .brand .brand-wordmark { width: 140px; height: 60px; }
  .family-mascot { width: 70px; flex-basis: 70px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: none; }
  .spinner { animation: none; }
}
.app-version { color: var(--muted); font: 400 .72rem/1.5 var(--sans); letter-spacing: .015em; }
.account-menu-panel .app-version { margin: 3px 12px 7px; }
.app-footer { max-width: 1220px; margin: 0 auto; padding: 16px 24px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); text-align: center; }
/* Zutatenabschnitte und mit den Portionen verknüpfte Schrittmengen. */
.ingredient-group { margin: 24px 0 4px; color: var(--accent); font: 700 1rem var(--sans); overflow-wrap: anywhere; }
.ingredient-group:first-child { margin-top: 16px; }
.step-description { margin: 0; }
.step-ingredients { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.step-ingredient { display: inline-block; border: 1px solid #416678; background: #143139; border-radius: 8px; padding: 5px 9px; font-size: .88rem; line-height: 1.5; overflow-wrap: anywhere; }
.step-ingredient .qty { font-weight: 700; color: var(--mint); }
.step-reserved { margin: 10px 0 0; padding: 9px 12px; border-left: 3px solid var(--accent); background: #302b3a; font-size: .88rem; line-height: 1.5; }
.ing-row .ing-group { grid-column: 1 / 4; grid-row: 2; font-size: .88rem; }
.ing-row > [data-del] { grid-column: 4; grid-row: 1; }
.step-usage-editor { grid-column: 1 / -1; min-width: 0; background: #132034; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.step-usage-editor summary { cursor: pointer; color: var(--mint); font-size: .9rem; }
.step-usage-editor .hint { margin-bottom: 0; font-size: .8rem; }
.usage-list { display: grid; gap: 10px; }
.usage-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 7px; border-bottom: 1px solid var(--line); padding: 10px 0; }
.usage-row > * { min-width: 0; }
.usage-row select, .usage-row input { margin: 0; font-size: .9rem; }
.usage-amount { grid-column: 1 / 3; display: flex; align-items: center; gap: 8px; }
.usage-amount input { width: 120px; max-width: 75%; }
.usage-remove { grid-column: 3; grid-row: 1; }
.add-usage { margin-top: 10px; font-size: .88rem; }
.servings input.is-original { background: #153d32; border-color: #72d6ac; color: #baffdd; }
.original-serving-badge { flex-basis: 100%; color: #baffdd; font-size: .75rem; font-weight: 700; }
.original-servings { flex-basis: 100%; color: var(--muted); font-size: .85rem; }
/* Standardmotive: eine kompakte Vorschau, die Galerie erst auf Wunsch. */
.detail-artwork { width: min(100%, 420px); margin: 18px 0; border: 1px solid #3a4963; border-radius: 12px; }
.detail-artwork > img { max-height: 245px; }
.artwork-picker { min-width: 0; margin: 12px 0 16px; border: 1px solid #56627c; border-radius: 12px; background: #152036; overflow: hidden; }
.artwork-picker > summary { display: flex; align-items: center; gap: 13px; padding: 12px; cursor: pointer; list-style: none; }
.artwork-picker > summary::-webkit-details-marker { display: none; }
.artwork-picker > summary:hover { background: #253149; }
.artwork-picker > summary:focus-visible { outline: 3px solid var(--highlight); outline-offset: -3px; }
.artwork-picker > summary > img { display: block; width: 100px; height: 75px; flex: 0 0 100px; object-fit: contain; background: #090f1c; border: 1px solid #5c6580; border-radius: 7px; }
.artwork-summary-text { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 3px; line-height: 1.35; overflow-wrap: anywhere; }
.artwork-summary-text > strong { color: var(--accent); font-size: .95rem; }
.artwork-summary-text > span { font-size: .87rem; }
.artwork-summary-text > small { color: var(--muted); font-size: .75rem; }
.artwork-picker > summary > .ui-icon { flex: 0 0 20px; }
.artwork-picker[open] > summary > .ui-icon { transform: rotate(180deg); }
.artwork-picker .artwork-explanation, .artwork-picker #artwork-empty { margin: 12px; font-size: .85rem; }
.artwork-picker .artwork-search-label { margin: 12px 12px 6px; font-size: .85rem; }
.artwork-picker #artwork-search { width: calc(100% - 24px); margin: 0 12px 12px; font-size: .9rem; }
.artwork-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; margin: 0; padding: 0 12px 14px; border: 0; }
.artwork-options > legend { padding: 0 0 9px; color: var(--muted); font-size: .85rem; }
.artwork-options .artwork-choice { position: relative; min-width: 0; margin: 0; cursor: pointer; }
.artwork-choice[hidden] { display: none; }
.artwork-choice > input[type=radio] { position: absolute; right: 9px; top: 9px; width: 21px; height: 21px; margin: 0; accent-color: var(--accent); z-index: 1; cursor: pointer; }
.artwork-choice-card { display: flex; flex-direction: column; gap: 6px; min-height: 100%; padding: 7px; border: 2px solid #465570; border-radius: 10px; background: #1b2840; }
.artwork-choice-card > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #090f1c; border-radius: 5px; }
.artwork-choice-card > strong { font-size: .85rem; line-height: 1.35; overflow-wrap: anywhere; }
.artwork-tags { color: var(--muted); font-size: .7rem; line-height: 1.5; overflow-wrap: anywhere; }
.artwork-choice:hover .artwork-choice-card { border-color: #c780a8; }
.artwork-choice > input:checked + .artwork-choice-card { border-color: var(--accent); background: #3c2d49; box-shadow: inset 0 0 0 1px #ffb9d733; }
.artwork-choice > input:focus-visible + .artwork-choice-card { outline: 3px solid var(--highlight); outline-offset: 2px; }
.artwork-photo-note { margin: 10px 0 16px; padding: 10px 12px; border-left: 3px solid var(--mint); background: #143139; font-size: .85rem; }
@media (max-width: 600px) {
  .artwork-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .artwork-picker > summary { gap: 9px; padding: 10px; }
  .artwork-picker > summary > img { width: 80px; height: 60px; flex-basis: 80px; }
  .artwork-summary-text > strong { font-size: .88rem; }
  .artwork-summary-text > span { font-size: .8rem; }
  .artwork-choice-card { padding: 6px; }
}
@media (max-width: 640px) {
  .ing-row .ing-group { grid-column: 1 / -1; grid-row: 3; }
  .ing-row > [data-del] { grid-column: 3; grid-row: 2; }
  .step-usage-editor { order: 3; padding: 9px; }
  .usage-row { grid-template-columns: minmax(0, 1fr) 44px; }
  .usage-ingredient { grid-column: 1; }
  .usage-mode { grid-column: 1; grid-row: 2; }
  .usage-remove { grid-column: 2; grid-row: 1; }
  .usage-amount { grid-column: 1 / -1; }
  .step-ingredients { gap: 6px; }
}

.neutral-wordmark{font:700 1.5rem system-ui,sans-serif;letter-spacing:.02em;color:#f3f4f6;}