/* Figtree (SIL Open Font License 1.1, siehe ../fonts/OFL.txt), lokal eingebunden */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Recipe Manager – Stimmung "Markthalle" (frisch, grün). Hell und Dunkel folgen dem System.
   Layout: eine ruhige Spalte (max. 60rem), Karten als Liste, Aktionen rechts bzw. unter dem Titel auf dem Handy. */
:root {
  color-scheme: light dark;

  /* --- Farben --- */
  --rm-bg:            light-dark(#f5f7f2, #131714);
  --rm-surface:       light-dark(#ffffff, #1c221d);
  --rm-surface-2:     light-dark(#e9efe5, #262e27);
  --rm-text:          light-dark(#1b241d, #e8eee6);
  --rm-muted:         light-dark(#566258, #a3b0a4);
  --rm-border:        light-dark(#cfd8cb, #384339);
  --rm-accent:        light-dark(#2a7449, #6fcf8f);
  --rm-accent-contrast: light-dark(#ffffff, #0d1a11);
  --rm-accent-soft:   light-dark(#dcefe1, #213a2a);
  --rm-danger:        light-dark(#b3261e, #ff9a8f);
  --rm-danger-contrast: light-dark(#ffffff, #2b0a06);
  --rm-danger-soft:   light-dark(#fbe4e1, #3d1814);
  --rm-success:       light-dark(#1f6f43, #84d8a3);

  /* --- Form, Abstände, Schrift --- */
  --rm-radius:      14px;
  --rm-radius-sm:   10px;
  --rm-radius-pill: 999px;
  --rm-border-width: 1px;
  --rm-space:       1rem;      /* Abstand zwischen Karten */
  --rm-pad:         1rem;      /* Innenabstand der Karten */
  --rm-tap:         44px;      /* Mindestgröße für Touch-Flächen */
  --rm-font:        "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rm-font-head:   var(--rm-font);
  --rm-font-base:   1rem;
  --rm-scale:       1;
  --rm-font-size:   calc(var(--rm-font-base) * var(--rm-scale));
  --rm-shadow:      0 1px 2px light-dark(rgba(27,36,29,.08), rgba(0,0,0,.4));

  /* --- Bootstrap an die eigenen Variablen anbinden --- */
  --bs-body-bg: var(--rm-bg);
  --bs-body-color: var(--rm-text);
  --bs-body-font-family: var(--rm-font);
  --bs-body-font-size: var(--rm-font-size);
  --bs-secondary-color: var(--rm-muted);
  --bs-border-color: var(--rm-border);
  --bs-border-radius: var(--rm-radius-sm);
  --bs-border-radius-lg: var(--rm-radius);
  --bs-heading-color: var(--rm-text);
  --bs-form-invalid-color: var(--rm-danger);
  --bs-form-invalid-border-color: var(--rm-danger);
}

body { background: var(--rm-bg); color: var(--rm-text); font-family: var(--rm-font); font-size: var(--rm-font-size); line-height: 1.5; }
h1, h2, h3, .card-title { font-family: var(--rm-font-head); text-wrap: balance; }
a { color: var(--rm-accent); }
:focus-visible { outline: 3px solid var(--rm-accent); outline-offset: 2px; }

.rm-shell { max-width: 60rem; margin-inline: auto; padding-inline: 16px; padding-block: 1.25rem 6rem; }
.rm-page-title { font-size: 1.6em; font-weight: 700; margin: 0; }
.rm-muted { color: var(--rm-muted); }

/* --- Buttons --- */
.btn { --bs-btn-font-size: var(--rm-font-size); --bs-btn-border-radius: var(--rm-radius-sm); --bs-btn-border-width: var(--rm-border-width);
  --bs-btn-font-weight: 600; min-height: var(--rm-tap); display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.btn-primary { --bs-btn-bg: var(--rm-accent); --bs-btn-border-color: var(--rm-accent); --bs-btn-color: var(--rm-accent-contrast);
  --bs-btn-hover-bg: color-mix(in srgb, var(--rm-accent) 86%, var(--rm-text)); --bs-btn-hover-border-color: var(--bs-btn-hover-bg); --bs-btn-hover-color: var(--rm-accent-contrast);
  --bs-btn-active-bg: color-mix(in srgb, var(--rm-accent) 76%, var(--rm-text)); --bs-btn-active-border-color: var(--bs-btn-active-bg); --bs-btn-active-color: var(--rm-accent-contrast);
  --bs-btn-disabled-bg: var(--rm-border); --bs-btn-disabled-border-color: var(--rm-border); --bs-btn-disabled-color: var(--rm-muted); }
.btn-outline-secondary { --bs-btn-color: var(--rm-text); --bs-btn-border-color: var(--rm-border); --bs-btn-bg: var(--rm-surface);
  --bs-btn-hover-bg: var(--rm-surface-2); --bs-btn-hover-color: var(--rm-text); --bs-btn-hover-border-color: var(--rm-muted);
  --bs-btn-active-bg: var(--rm-surface-2); --bs-btn-active-color: var(--rm-text); --bs-btn-active-border-color: var(--rm-muted); }
.btn-outline-danger { --bs-btn-color: var(--rm-danger); --bs-btn-border-color: var(--rm-border); --bs-btn-bg: var(--rm-surface);
  --bs-btn-hover-bg: var(--rm-danger); --bs-btn-hover-color: var(--rm-danger-contrast); --bs-btn-hover-border-color: var(--rm-danger);
  --bs-btn-active-bg: var(--rm-danger); --bs-btn-active-color: var(--rm-danger-contrast); --bs-btn-active-border-color: var(--rm-danger); }
.btn-danger { --bs-btn-bg: var(--rm-danger); --bs-btn-border-color: var(--rm-danger); --bs-btn-color: var(--rm-danger-contrast);
  --bs-btn-hover-bg: color-mix(in srgb, var(--rm-danger) 86%, var(--rm-text)); --bs-btn-hover-border-color: var(--bs-btn-hover-bg); --bs-btn-hover-color: var(--rm-danger-contrast);
  --bs-btn-active-bg: var(--bs-btn-hover-bg); --bs-btn-active-border-color: var(--bs-btn-hover-bg); --bs-btn-active-color: var(--rm-danger-contrast); }
.btn-icon { width: var(--rm-tap); padding: 0; flex: none; }

/* --- Formulare --- */
.form-control, .form-select { min-height: var(--rm-tap); font-size: var(--rm-font-size); background-color: var(--rm-surface); color: var(--rm-text);
  border: var(--rm-border-width) solid var(--rm-border); border-radius: var(--rm-radius-sm); }
.form-control::placeholder { color: var(--rm-muted); opacity: 1; }
.form-control:focus, .form-select:focus { background-color: var(--rm-surface); color: var(--rm-text); border-color: var(--rm-accent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--rm-accent) 30%, transparent); }
.form-label { font-size: .85em; font-weight: 600; color: var(--rm-muted); margin-bottom: .2rem; }
.alert-danger { --bs-alert-bg: var(--rm-danger-soft); --bs-alert-color: var(--rm-text); --bs-alert-border-color: var(--rm-danger); border-radius: var(--rm-radius-sm); }

/* --- Karten --- */
.card { --bs-card-bg: var(--rm-surface); --bs-card-border-color: var(--rm-border); --bs-card-border-width: var(--rm-border-width);
  --bs-card-border-radius: var(--rm-radius); --bs-card-inner-border-radius: var(--rm-radius); --bs-card-spacer-x: var(--rm-pad); --bs-card-spacer-y: var(--rm-pad);
  --bs-card-color: var(--rm-text); box-shadow: var(--rm-shadow); }
.card-title { font-size: 1.15em; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.rm-list { display: flex; flex-direction: column; gap: var(--rm-space); }
.rm-card-head { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-start; justify-content: space-between; }
.rm-card-main { min-width: 0; flex: 1 1 14rem; display: flex; flex-direction: column; gap: .35rem; }
.rm-card-actions { display: flex; gap: .5rem; }
.rm-meta { color: var(--rm-muted); font-size: .9em; font-variant-numeric: tabular-nums; }
.tag-list { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag { background: var(--rm-accent-soft); color: var(--rm-text); border-radius: var(--rm-radius-pill); padding: .1rem .6rem; font-size: .82em; font-weight: 600; }
.details-toggle { background: none; border: 0; color: var(--rm-accent); font: inherit; font-weight: 600; min-height: var(--rm-tap);
  padding: 0 .25rem 0 0; margin-top: .25rem; display: inline-flex; align-items: center; gap: .35rem; border-radius: var(--rm-radius-sm); }
.details-toggle svg { transition: transform .15s; }
.details-toggle:not(.collapsed) svg { transform: rotate(180deg); }
.rm-details { border-top: var(--rm-border-width) solid var(--rm-border); margin-top: .5rem; padding-top: .9rem; display: grid; gap: 1rem 2rem; }
.rm-details h3 { font-size: .8em; text-transform: uppercase; letter-spacing: .08em; color: var(--rm-muted); margin: 0 0 .4rem; font-family: var(--rm-font); font-weight: 700; }
.ingredient-list { list-style: none; padding: 0; margin: 0; }
.ingredient-list li { display: grid; grid-template-columns: 5.5em 1fr; gap: .75rem; padding: .3rem 0; border-bottom: 1px solid var(--rm-border); }
.ingredient-list li:last-child { border-bottom: 0; }
.ingredient-list .qty { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ingredient-list small { color: var(--rm-muted); }
.step-list { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: .6rem; max-width: 65ch; }
.step-list li::marker { font-weight: 700; color: var(--rm-accent); }
.step-list .tip { display: block; color: var(--rm-muted); font-size: .92em; }
.plan-recipes { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --- Startseite --- */
.rm-home { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 1rem; }
.rm-home h1 { font-size: 2.1em; font-weight: 700; margin: 0; }
.rm-entries { display: grid; gap: var(--rm-space); }
.rm-entry { display: flex; align-items: center; gap: 1rem; text-align: left; width: 100%; padding: 1.25rem; min-height: 6rem;
  background: var(--rm-surface); color: var(--rm-text); border: var(--rm-border-width) solid var(--rm-border); border-radius: var(--rm-radius); box-shadow: var(--rm-shadow); font: inherit; }
.rm-entry:hover { border-color: var(--rm-accent); }
.rm-entry-icon { flex: none; width: 3.25rem; height: 3.25rem; border-radius: var(--rm-radius-sm); background: var(--rm-accent-soft); color: var(--rm-accent); display: grid; place-items: center; }
.rm-entry strong { display: block; font-family: var(--rm-font-head); font-size: 1.2em; }
.rm-entry span span { color: var(--rm-muted); font-size: .92em; }

/* --- Kopfzeile und Filter --- */
.rm-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .9rem; }
.rm-toolbar .rm-page-title { flex: 1 1 auto; }
.rm-searchrow { display: grid; grid-template-columns: minmax(0, 1fr) 4.75rem auto; gap: .5rem; align-items: end; margin-bottom: .75rem; }
#filter-toggle:not(.collapsed) { border-color: var(--rm-accent); background: var(--rm-accent-soft); }
.filter-badge { background: var(--rm-accent); color: var(--rm-accent-contrast); border-radius: 999px; min-width: 1.5em; padding: 0 .4em; font-size: .85em; line-height: 1.5; font-variant-numeric: tabular-nums; }
.rm-filter { background: var(--rm-surface-2); border-radius: var(--rm-radius); padding: .65rem .75rem; margin-bottom: .75rem; display: grid; gap: .6rem; }
.rm-filter > * { min-width: 0; }
/* Tags: auf dem Handy eine Zeile zum Wischen, ab Tablet umbrechend */
.chip-scroll { display: flex; gap: .45rem; overflow-x: auto; padding: 3px; margin: -3px; scrollbar-width: thin; }
.chip-scroll .chip { flex: none; }
.rm-filter-active { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: .75rem; }
#filter-active-chips { display: contents; }
.chip-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--rm-tap); padding: 0 .95rem; cursor: pointer; user-select: none;
  background: var(--rm-surface); color: var(--rm-text); border: var(--rm-border-width) solid var(--rm-border); border-radius: var(--rm-radius-pill); font-weight: 600; font-size: .92em; }
.btn-check:checked + .chip, .chip.is-active { background: var(--rm-accent); border-color: var(--rm-accent); color: var(--rm-accent-contrast); }
.btn-check:focus-visible + .chip { outline: 3px solid var(--rm-accent); outline-offset: 2px; }
.rm-ingfilter { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.rm-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.1rem; }
#list-status { color: var(--rm-muted); font-variant-numeric: tabular-nums; }
.rm-state { text-align: center; padding: 3rem 1rem; color: var(--rm-muted); display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.rm-state strong { color: var(--rm-text); font-size: 1.1em; }
.spinner-border { color: var(--rm-accent); }

/* --- Rezept-Dialog --- */
.modal { --bs-modal-bg: var(--rm-surface); --bs-modal-color: var(--rm-text); --bs-modal-border-color: var(--rm-border);
  --bs-modal-border-radius: var(--rm-radius); --bs-modal-inner-border-radius: var(--rm-radius);
  --bs-modal-header-border-color: var(--rm-border); --bs-modal-footer-border-color: var(--rm-border); }
.modal-title { font-family: var(--rm-font-head); font-weight: 700; }
.rm-close { background: none; border: 0; color: var(--rm-text); font-size: 1.5rem; line-height: 1; width: var(--rm-tap); height: var(--rm-tap); border-radius: var(--rm-radius-sm); margin-left: auto; }
.rm-section { display: grid; gap: .7rem; margin-top: 1.5rem; }
.rm-section > h3 { font-size: 1.05em; font-weight: 700; margin: 0; }
#ingredients-container, #steps-container { display: grid; gap: .7rem; }
.ingredient-row { display: grid; gap: .5rem; align-items: start; grid-template-columns: 1fr 1fr var(--rm-tap);
  grid-template-areas: "name name del" "amount unit unit" "note note note";
  padding-bottom: .7rem; border-bottom: 1px solid var(--rm-border); }
.ingredient-row > * { min-width: 0; }
.ingredient-row .f-name { grid-area: name; } .ingredient-row .f-amount { grid-area: amount; }
.ingredient-row .f-unit { grid-area: unit; } .ingredient-row .f-note { grid-area: note; }
.ingredient-row .remove-row { grid-area: del; }
.step-row { counter-increment: step; background: var(--rm-surface-2); border: 0; box-shadow: none; }
#steps-container { counter-reset: step; }
.step-row .step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.step-row .step-head strong::after { content: " " counter(step); }
.step-grid { display: grid; gap: .6rem; grid-template-columns: 1fr; margin-top: .6rem; }
.step-uses { margin-top: .6rem; }

/* --- Toasts --- */
.rm-toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 16px; z-index: 1090; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; pointer-events: none; }
.toast { --bs-toast-bg: var(--rm-surface); --bs-toast-color: var(--rm-text); --bs-toast-border-color: var(--rm-border); --bs-toast-border-radius: var(--rm-radius-sm);
  --bs-toast-font-size: .95em; --bs-toast-max-width: 26rem; pointer-events: auto; border-left: 6px solid var(--rm-muted); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.toast.is-success { border-left-color: var(--rm-success); }
.toast.is-error { border-left-color: var(--rm-danger); }
.toast-row { display: flex; align-items: center; gap: .5rem; padding: .35rem .35rem .35rem .9rem; }
.toast-row .msg { flex: 1; min-width: 0; }
.toast-row .btn { --bs-btn-padding-x: .6rem; }

@media (min-width: 768px) {
  .rm-entries { grid-template-columns: 1fr 1fr; }
  .rm-details { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .rm-filter { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: 1rem; }
  .chip-scroll { flex-wrap: wrap; overflow: visible; }
  .ingredient-row { grid-template-columns: 2fr 5.5rem 6.5rem 2fr var(--rm-tap); grid-template-areas: "name amount unit note del"; border-bottom: 0; padding-bottom: 0; }
  .step-grid { grid-template-columns: 9rem 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: .01s !important; } .spinner-border { animation-duration: 1.5s !important; } }

/* Fehlerhinweis im Dialog darf mehrere Zeilen zeigen (z. B. mehrere Serverfehler) */
#form-error { white-space: pre-line; }

/* ============ Essenspläne, Einkaufsliste, Kochmodus ============ */

/* --- Status --- */
.rm-status { display: inline-block; padding: .05rem .65rem; border-radius: var(--rm-radius-pill); font-size: .8em; font-weight: 700;
  background: var(--rm-surface-2); color: var(--rm-muted); border: 1px solid var(--rm-border); white-space: nowrap; }
.rm-status.is-active, .rm-status.is-in_progress { background: var(--rm-accent-soft); color: var(--rm-text); border-color: transparent; }
.rm-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; }

/* --- Rezepte im Essensplan --- */
.plan-items { display: grid; gap: .6rem; padding-top: .6rem; }
.plan-item { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between;
  padding: .65rem .8rem; background: var(--rm-surface-2); border-radius: var(--rm-radius-sm); }
.plan-item-main { min-width: 0; flex: 1 1 12rem; }
.plan-item-title { font-weight: 700; overflow-wrap: anywhere; }
.plan-item-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --- Rezept-Auswahl (Dialoge) --- */
.picker-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .75rem; }
.picker-list { display: grid; gap: .5rem; margin-top: .9rem; }
.picker-row { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; justify-content: space-between;
  padding: .6rem .8rem; border: var(--rm-border-width) solid var(--rm-border); border-radius: var(--rm-radius-sm); background: var(--rm-surface); }
.picker-row-main { min-width: 0; flex: 1 1 10rem; overflow-wrap: anywhere; font-weight: 600; }
.picker-row .rm-meta { font-weight: 400; }
button.picker-row { width: 100%; text-align: left; color: var(--rm-text); font: inherit; min-height: var(--rm-tap); }
button.picker-row:hover { border-color: var(--rm-accent); }

/* --- Einkaufsliste --- */
.shop-head { display: grid; gap: .75rem; margin-bottom: 1rem; }
.shop-controls { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: end; }
.shop-controls .form-select { width: auto; min-width: 11rem; }
.shop-progress { color: var(--rm-muted); font-variant-numeric: tabular-nums; }
.rm-hint { color: var(--rm-muted); font-size: .9em; }
.shop-add { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr) 5.5rem; margin-bottom: 1rem; }
.shop-add .shop-add-title { grid-column: 1 / -1; }
.shop-add .btn { grid-column: 1 / -1; }
.rm-bucket { margin-bottom: var(--rm-space); }
.rm-bucket h2 { font-size: 1.05em; font-weight: 700; margin: 0 0 .25rem; }
.rm-bucket .rm-meta { margin-bottom: .35rem; }
.shop-item { display: flex; align-items: center; gap: .25rem; border-bottom: 1px solid var(--rm-border); }
.shop-item:last-child { border-bottom: 0; }
.shop-item label { flex: 1; min-width: 0; display: flex; align-items: center; gap: .85rem; min-height: var(--rm-tap); padding: .25rem 0; cursor: pointer; }
.shop-item input[type="checkbox"] { width: 1.5rem; height: 1.5rem; flex: none; accent-color: var(--rm-accent); }
.shop-text { overflow-wrap: anywhere; }
.shop-qty { font-weight: 700; font-variant-numeric: tabular-nums; margin-right: .35rem; }
.shop-item.is-checked .shop-text { text-decoration: line-through; color: var(--rm-muted); }
.shop-source { color: var(--rm-muted); font-size: .85em; display: block; }

/* --- Kochmodus --- */
.cook-shell { max-width: 46rem; }
.cook-title { font-size: 1.8em; font-weight: 700; margin: 0 0 .35rem; overflow-wrap: anywhere; }
.cook-section { margin-top: 1.5rem; }
.cook-section h2 { font-size: .85em; text-transform: uppercase; letter-spacing: .08em; color: var(--rm-muted); font-family: var(--rm-font); font-weight: 700; margin: 0 0 .5rem; }
.cook-ingredients { list-style: none; padding: 0; margin: 0; }
.cook-ingredients li label { display: flex; align-items: center; gap: .85rem; min-height: var(--rm-tap); padding: .2rem 0; border-bottom: 1px solid var(--rm-border); font-size: 1.1em; cursor: pointer; }
.cook-ingredients input { width: 1.4rem; height: 1.4rem; flex: none; accent-color: var(--rm-accent); }
.cook-ingredients .is-done-text { text-decoration: line-through; color: var(--rm-muted); }
.cook-steps { display: grid; gap: .75rem; list-style: none; padding: 0; margin: 0; counter-reset: cook; }
.cook-step { counter-increment: cook; display: flex; gap: 1rem; align-items: flex-start; width: 100%; text-align: left; font: inherit; font-size: 1.2em;
  color: var(--rm-text); background: var(--rm-surface); border: var(--rm-border-width) solid var(--rm-border); border-radius: var(--rm-radius); padding: 1rem; min-height: var(--rm-tap); }
.cook-step::before { content: counter(cook); flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--rm-accent-soft); color: var(--rm-text); font-weight: 700; }
.cook-step.is-done { opacity: .55; }
.cook-step.is-done::before { content: "✓"; background: var(--rm-accent); color: var(--rm-accent-contrast); }
.cook-step.is-done .cook-step-text { text-decoration: line-through; }
.cook-step-text { min-width: 0; overflow-wrap: anywhere; }
.cook-step .tip { display: block; color: var(--rm-muted); font-size: .85em; margin-top: .25rem; }

@media (min-width: 768px) {
  .shop-add { grid-template-columns: minmax(0, 1fr) 6rem 7rem auto; }
  .shop-add .shop-add-title { grid-column: auto; }
  .shop-add .btn { grid-column: auto; }
}

/* mehrere Aktionen an einer Karte dürfen umbrechen */
.rm-card-actions { flex-wrap: wrap; }
.shop-item { padding-block: 2px; }

/* --- Artikel-Historie (Einkaufsliste) --- */
.history { margin: -.25rem 0 1rem; }
.history-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.history-chip { display: inline-flex; align-items: stretch; background: var(--rm-surface);
  border: var(--rm-border-width) solid var(--rm-border); border-radius: var(--rm-radius-pill); overflow: hidden; }
.history-chip .chip { border: 0; border-radius: 0; background: transparent; padding-right: .6rem; }
.history-chip .chip:hover { background: var(--rm-accent-soft); }
.history-qty { color: var(--rm-muted); font-weight: 400; margin-left: .45rem; font-variant-numeric: tabular-nums; }
.history-remove { border: 0; background: transparent; color: var(--rm-muted); min-width: var(--rm-tap); min-height: var(--rm-tap); padding: 0 .25rem; }
.history-remove:hover { color: var(--rm-danger); }

/* --- Anmeldung --- */
.rm-login-shell { min-height: 100svh; display: grid; align-items: center; padding-block: 2rem; }
.rm-login { width: min(100%, 24rem); margin-inline: auto; display: grid; gap: 1.25rem; }
.rm-login-form { display: grid; gap: 1rem; background: var(--rm-surface); border: var(--rm-border-width) solid var(--rm-border);
  border-radius: var(--rm-radius); padding: var(--rm-pad); box-shadow: var(--rm-shadow); }
.rm-login-form .btn { width: 100%; }

/* --- Angemeldeter Benutzer (Kopfzeile aller Seiten) --- */
.rm-session { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; margin-bottom: .5rem; font-size: .9em; color: var(--rm-muted); }
.rm-session-name { font-weight: 600; color: var(--rm-text); }
.rm-session .btn-sm { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .9em; }
.rm-session-link { color: var(--rm-accent); font-weight: 600; display: inline-flex; align-items: center; min-height: var(--rm-tap); padding-inline: .25rem; }

/* --- Konto --- */
.rm-account { display: grid; gap: 1.75rem; }
.rm-account-form { display: grid; gap: 1rem; max-width: 26rem; }

/* --- Offline --- */
.rm-offline-banner { background: var(--rm-surface-2); color: var(--rm-text); border: var(--rm-border-width) solid var(--rm-border);
  border-left: 6px solid var(--rm-muted); border-radius: var(--rm-radius-sm); padding: .6rem .9rem; margin-bottom: .75rem; font-size: .95em; }
.rm-offline-banner[hidden] { display: none; }

/* Essensplan-Übersicht: offline nur lesbar. Einkaufsliste: Abhaken, Hinzufügen, Entfernen werden vorgemerkt;
   Zusammenführen, Status und Historie bearbeiten brauchen die Verbindung. */
.rm-offline #new-plan-button,
.rm-offline [data-act="new-plan"],
.rm-offline [data-act="edit"],
.rm-offline [data-act="delete"],
.rm-offline [data-act="add-recipe"],
.rm-offline [data-act="remove-item"],
.rm-offline #condense-button,
.rm-offline #list-status-select,
.rm-offline .history-remove { pointer-events: none; opacity: .5; }