:root {
  --bg:          #f3f8f3;
  --surface:     #ffffff;
  --primary:     #3a7d52;
  --primary-dk:  #2d6340;
  --accent:      #72b54a;
  --accent-lt:   #e8f5e0;
  --text:        #1a2e22;
  --muted:       #5e7a67;
  --border:      #cce0d0;
  --danger:      #c0392b;
  --radius:      12px;
  --shadow:      0 2px 12px rgba(40,90,55,.08);
  --max:         860px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Kumbh Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

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

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ── Navigation ──────────────────────────────────────────────────── */
.nav {
  background: linear-gradient(150deg, #2d6340 0%, #72b54a 100%);
  color: #fff;
}
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: .9rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.1rem;
}
.nav__brand {
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  text-decoration: none;
  margin-right: auto;
}
.nav a:not(.nav__brand) {
  color: #fff;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  opacity: .9;
  padding: .3rem 0;
}
.nav a:not(.nav__brand):hover { opacity: 1; text-decoration: underline; }

main { padding: 1.75rem 0 3.5rem; }

h1 { font-size: 1.6rem; margin-bottom: 1rem; color: var(--primary-dk); }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .75rem; color: var(--primary-dk); }

.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* ── Messages ────────────────────────────────────────────────────── */
.messages { list-style: none; margin-bottom: 1rem; }
.messages li {
  padding: .7rem 1rem;
  border-radius: 8px;
  margin-bottom: .5rem;
  font-size: .9rem;
  background: var(--accent-lt);
  border: 1.5px solid #b8dda0;
  color: var(--primary-dk);
}
.messages li.error {
  background: #fdf0ed;
  border-color: #e07060;
  color: #a0302a;
}
.messages li.warning {
  background: #fff8e6;
  border-color: #e8c766;
  color: #7a5c00;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: .7rem 1.15rem;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.btn:hover { background: var(--primary-dk); }
.btn:active { transform: scale(.98); }
.btn--ghost {
  background: var(--accent-lt);
  color: var(--primary-dk);
  border: 1.5px solid #b8dda0;
}
.btn--ghost:hover { background: #d8eecc; }
.btn--danger { background: var(--danger); }
.btn--danger:hover { background: #96271c; }
.btn--sm { padding: .4rem .7rem; font-size: .82rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }

/* ── Forms ───────────────────────────────────────────────────────── */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.form-group { margin-bottom: 1.1rem; }
.form-label,
.form-group > label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .4rem;
}
input[type="text"], input[type="email"], input[type="url"],
input[type="number"], input[type="search"], textarea, select {
  width: 100%;
  padding: .6rem .8rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 1rem;
  background: var(--bg);
  color: var(--text);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(114,181,74,.15);
}
textarea { resize: vertical; }
.errorlist {
  list-style: none;
  color: var(--danger);
  font-size: .82rem;
  margin-top: .3rem;
}
.form-errors-top {
  background: #fdf0ed;
  border: 1.5px solid #e07060;
  border-radius: 8px;
  padding: .7rem 1rem;
  margin-bottom: 1rem;
  font-size: .9rem;
  color: #a0302a;
}
.checkbox-list { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.checkbox-list label {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .9rem; text-transform: none; letter-spacing: 0;
  font-weight: 600; color: var(--text);
}
.checkbox-list input { width: auto; }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* ── Recipe list ─────────────────────────────────────────────────── */
.toolbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-end;
}
.toolbar .form-group { margin-bottom: 0; flex: 1 1 160px; }
.toolbar .form-label { margin-bottom: .25rem; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.recipe-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-decoration: none;
  color: inherit;
  transition: transform .1s, box-shadow .15s;
}
.recipe-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(40,90,55,.14); }
.recipe-card__title { font-weight: 700; font-size: 1.05rem; color: var(--primary-dk); }
.recipe-card__meta { font-size: .82rem; color: var(--muted); display: flex; gap: .75rem; flex-wrap: wrap; }

.tag-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  display: inline-block;
  padding: .15rem .6rem;
  background: var(--accent-lt);
  color: var(--primary-dk);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
}

.pill {
  display: inline-block;
  padding: .1rem .55rem;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
}

/* ── Recipe detail ──────────────────────────────────────────────── */
.detail-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: baseline; }
.meta-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: .75rem 0 1.25rem; }
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.25rem;
}
.ingredient-table { width: 100%; border-collapse: collapse; }
.ingredient-table td { padding: .4rem 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.ingredient-table td:first-child { width: 6.5rem; font-weight: 700; white-space: nowrap; }
.ingredient-table tr:last-child td { border-bottom: none; }
.instructions { white-space: pre-wrap; }

.servings-control {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .9rem; color: var(--muted); margin-bottom: .75rem;
}
.servings-control input { width: 4rem; }

/* ── Ingredient formset ─────────────────────────────────────────── */
.ing-rows { display: flex; flex-direction: column; gap: .6rem; }
.ing-row {
  display: grid;
  grid-template-columns: minmax(0,2fr) 5rem 6rem minmax(0,2fr) auto auto;
  gap: .5rem;
  align-items: center;
}
.ing-row input, .ing-row select { padding: .5rem .6rem; font-size: .92rem; }
.ing-row__del { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; color: var(--muted); }
.ing-row__preg { display: inline-flex; align-items: center; gap: .2rem; font-size: 1.05rem; cursor: pointer; }
.ing-row.is-deleted { opacity: .45; }
@media (max-width: 640px) {
  /* Name über die volle Breite, dann Menge+Einheit und 🍼+entfernen je als Paar
     nebeneinander – braucht weniger Zeilen pro Zutat als eine Spalte je Feld. */
  .ing-row { grid-template-columns: 1fr 1fr; }
  .ing-row__name { grid-column: 1 / -1; }
  .ing-row__note { grid-column: 1 / -1; }
}

/* ── Shopping list ──────────────────────────────────────────────── */
.recipe-picker { display: flex; flex-direction: column; gap: .5rem; }
.recipe-picker__row {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.recipe-picker__row:has(input[type=checkbox]:checked) {
  border-color: var(--accent);
  background: var(--accent-lt);
}
.recipe-picker__row label { flex: 1; font-weight: 600; cursor: pointer; }
.recipe-picker__row .servings-mini { width: 4.5rem; }

.shop-group { margin-bottom: 1.5rem; }
.shop-group__title {
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--primary);
  border-bottom: 2px solid var(--accent-lt); padding-bottom: .3rem; margin-bottom: .5rem;
}
.shop-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .2rem;
  border-bottom: 1px solid var(--border);
}
.shop-item:last-child { border-bottom: none; }
.shop-item__check { width: 1.25rem; height: 1.25rem; flex-shrink: 0; accent-color: var(--primary); }
.shop-item__qty { font-weight: 700; min-width: 5rem; }
.shop-item.is-done .shop-item__label,
.shop-item.is-done .shop-item__qty { text-decoration: line-through; color: var(--muted); }
.shop-item__manual { font-size: .7rem; color: var(--accent); font-weight: 700; }
.shop-item__pantry {
  font-size: .72rem; font-weight: 600; color: #9a6b00;
  background: #fff8e6; border: 1px solid #e8c766; border-radius: 999px;
  padding: .05rem .5rem;
}

.progress { font-size: .9rem; color: var(--muted); margin-bottom: 1rem; }

.pantry-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  padding: .55rem .2rem; border-bottom: 1px solid var(--border);
}
.pantry-row:last-child { border-bottom: none; }
.pantry-row__main { display: flex; align-items: center; gap: .5rem; flex: 1 1 15rem; flex-wrap: wrap; }
.pantry-row__edit { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pantry-row__edit input { padding: .4rem .5rem; font-size: .88rem; }
.pantry-row.is-expired .shop-item__label { color: var(--muted); }
.pill--expired { border-color: var(--danger); color: var(--danger); }
.pill--soon { border-color: #d9a200; color: #9a6b00; }
.pill--preg { border-color: #d9a200; font-size: .95rem; padding: 0 .4rem; cursor: help; }

/* ── Wochenplan ─────────────────────────────────────────────────── */
.plan-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-bottom: .6rem;
}
.plan-grid {
  display: grid; gap: .75rem; margin: 1rem 0 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.plan-day {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .8rem .9rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.plan-day.is-today { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-lt); }
.plan-day.is-away { opacity: .7; }
.plan-day__head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.plan-day__body { min-height: 2.5rem; display: flex; flex-direction: column; gap: .3rem; }
.plan-day__recipe { font-weight: 600; color: var(--primary-dk); }
.plan-day__meta { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8rem; color: var(--muted); }
.plan-day__form { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.plan-day__form select { padding: .4rem .5rem; font-size: .88rem; }
.plan-day__btns { display: flex; flex-wrap: wrap; gap: .3rem; }

.catalog-table { width: 100%; border-collapse: collapse; }
.catalog-table td { padding: .4rem .3rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.catalog-table tr:last-child td { border-bottom: none; }
.catalog-table tr.is-uncategorized td { background: #fffdf5; }
.catalog-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: 0;
}
.catalog-row input[name="name"] { flex: 1 1 12rem; min-width: 8rem; padding: .4rem .55rem; }
.catalog-row select { flex: 1 1 14rem; padding: .4rem .5rem; }
.catalog-row .muted { flex-shrink: 0; }

/* Zutaten-Katalog: echte Tabellenspalten statt Freihand-Layout pro Zeile */
.table-scroll { overflow-x: auto; }
.scroll-hint { display: none; margin-bottom: .5rem; }
@media (max-width: 720px) { .scroll-hint { display: block; } }
.catalog-table--grid { table-layout: auto; }
.catalog-table--grid th {
  padding: 0 .3rem .5rem; text-align: left;
  font-size: .78rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .02em;
}
.catalog-table--grid td.center, .catalog-table--grid th.center { text-align: center; }
.catalog-table--grid td.right { text-align: right; }
.catalog-table--grid td:first-child, .catalog-table--grid td:nth-child(2) { min-width: 9rem; }
.catalog-table--grid td:first-child input, .catalog-table--grid td:nth-child(2) select {
  width: 100%; padding: .4rem .55rem;
}
/* Spalten für 🍼 und "Speichern" sollen nur so breit wie ihr Inhalt sein,
   damit Name/Kategorie den restlichen Platz bekommen. */
.catalog-table--grid td:nth-child(3), .catalog-table--grid td:nth-child(4) { width: 1%; white-space: nowrap; }
.catalog-table--grid td:last-child { width: 1%; white-space: nowrap; }

.recipe-tags { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .5rem; }
.chip--recipe { display: inline-flex; align-items: center; gap: .3rem; }
.chip--recipe form { display: inline; margin: 0; }
.chip--recipe button {
  border: none; background: none; padding: 0 0 0 .1rem; margin: 0;
  cursor: pointer; color: var(--primary-dk); font: inherit; font-weight: 700; line-height: 1;
}
.chip--recipe button:hover { color: var(--danger); }

/* ── Print ──────────────────────────────────────────────────────── */
@media print {
  .nav, .btn, .btn-row, .messages, .no-print, form.manual-add { display: none !important; }
  body { background: #fff; }
  .panel { box-shadow: none; border: none; padding: 0; }
  .shop-item { break-inside: avoid; }
  a { text-decoration: none; color: #000; }
}