:root {
  --hinter: #fbf6ee;
  --karte: #ffffff;
  --text: #2b2320;
  --leise: #776a61;
  --linie: #eadfd1;
  --wald: #2f5d50;
  --akzent: #c8553d;
  --gold: #e0a43a;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hinter);
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1, h2 { font-family: Fraunces, Georgia, serif; line-height: 1.15; }

.kopf {
  position: relative;
  padding: 56px 16px 24px;
  color: var(--hinter);
  /* Konfetti-Punkte über dunklem Waldgrün */
  background:
    radial-gradient(circle at 8% 12%, var(--gold) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 42%, var(--akzent) 0 4px, transparent 5px),
    radial-gradient(circle at 72% 86%, var(--gold) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 95%, #f3c9b8 0 3px, transparent 4px),
    radial-gradient(circle at 95% 70%, #f3c9b8 0 2px, transparent 3px),
    var(--wald);
}
.kopf h1 { margin: 4px 0 8px; font-size: 2rem; font-weight: 800; }
.datum { margin: 0; font-size: .9rem; opacity: .85; letter-spacing: .02em; }
.countdown { margin: 0; font-weight: 600; color: var(--gold); }
.ich {
  position: absolute; top: 12px; right: 12px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: inherit;
  border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .85rem;
}

html { scroll-behavior: smooth; }

/* Klebt beim Scrollen oben; Abschnitte halten Abstand, damit die Leiste ihre Überschrift nicht verdeckt. */
.sprung {
  position: sticky; top: 0; z-index: 1;
  display: flex; gap: 4px; overflow-x: auto;
  /* safe: passt die Leiste nicht, beginnt sie links (wischbar) statt links abgeschnitten zu werden */
  justify-content: flex-start; justify-content: safe center;
  padding: 8px; background: var(--hinter); border-bottom: 1px solid var(--linie);
}
.sprung a {
  flex: none; padding: 5px 7px; border-radius: 999px; font-size: .82rem; font-weight: 600;
  color: var(--wald); background: var(--karte); border: 1px solid var(--linie); text-decoration: none;
}
section { scroll-margin-top: 60px; }

main { max-width: 640px; margin: 0 auto; padding: 8px 16px 48px; }

section {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 16px;
}
section h2 { margin: 0 0 4px; font-size: 1.35rem; }
.hinweis { margin: 0 0 12px; color: var(--leise); font-size: .9rem; }

.liste { list-style: none; margin: 0 0 12px; padding: 0; }
.liste li {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--linie);
}
.liste li:last-child { border-bottom: 0; }
.liste .text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.liste small { color: var(--leise); }
.liste .leer { color: var(--leise); font-style: italic; }
.liste .mein small { color: var(--wald); font-weight: 600; }

.fehlt { border-color: var(--gold); background: #fff8e8; }
.fehlt a { color: inherit; text-decoration: none; display: block; }
.fehlt .fertig { color: var(--wald); font-weight: 600; }

.liste .auto { align-items: flex-start; }
.auto .text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sitze { color: var(--wald); letter-spacing: 2px; }
.sitze small { letter-spacing: 0; margin-left: 4px; }
.mitfahrer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mitfahrer:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--hinter); border: 1px solid var(--linie); border-radius: 999px; padding: 2px 10px; font-size: .9rem;
}
.chip.mein { border-color: var(--wald); color: var(--wald); font-weight: 600; }
.chip .weg { background: none; color: var(--leise); padding: 0 0 0 4px; font-weight: 400; }
.mitfahren { margin-top: 6px; background: var(--wald); padding: 8px 14px; }

#koch-liste h3, #einkauf h3, #ablauf-liste h3 { margin: 16px 0 0; font-size: 1rem; color: var(--wald); }
.uhr { flex: 0 0 3.2em; font-weight: 600; color: var(--wald); font-variant-numeric: tabular-nums; }
.einkauf label { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
.einkauf input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--wald); }
.einkauf .text small { display: block; }
.einkauf .erledigt .text { color: var(--leise); text-decoration: line-through; }
h3.geburtstag {
  display: inline-block; background: var(--gold); color: var(--text); padding: 2px 10px; border-radius: 999px;
}
.liste .offen em { color: var(--akzent); }
.liste .gericht { flex-wrap: wrap; align-items: flex-start; }
.gericht .text { display: flex; flex-direction: column; }
.zutaten { flex-basis: 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.zutaten:empty { display: none; }
form.zutat { flex-basis: 100%; min-width: 0; flex-wrap: nowrap; gap: 6px; }
form.zutat input, form.zutat select { padding: 8px; font-size: .95rem; }
form.zutat input[name="menge"] { flex: 0 0 64px; }
form.zutat select { flex: 0 0 76px; }
form.zutat input[name="name"] { flex: 1 1 0; }
form.zutat button { padding: 8px 14px; }

details summary { cursor: pointer; color: var(--akzent); font-weight: 600; padding: 4px 0; }
details[open] summary { margin-bottom: 10px; }

form { display: flex; flex-wrap: wrap; gap: 8px; }
input, select {
  flex: 1 1 160px; min-width: 0;
  font: inherit; padding: 10px 12px;
  border: 1px solid var(--linie); border-radius: 10px; background: var(--hinter);
}
button {
  font: inherit; padding: 10px 16px; border: 0; border-radius: 10px;
  background: var(--akzent); color: #fff; font-weight: 600; cursor: pointer;
}
button.abbrechen { background: var(--linie); color: var(--text); }
.klein {
  padding: 6px 10px; background: transparent; color: var(--leise);
  border: 1px solid var(--linie); font-weight: 400;
}

dialog {
  border: 0; border-radius: var(--radius); padding: 20px;
  width: min(420px, calc(100vw - 32px));
}
dialog::backdrop { background: rgba(43, 35, 32, .55); }
dialog h2 { margin: 0 0 4px; }
.namen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.namen button { background: var(--wald); padding: 14px 4px; }