:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --ink: #1f2430;
  --muted: #6b7280;
  --line: #e5e7eb;
  --accent: #6d4aff;
  --accent-ink: #ffffff;
  --ok: #16a34a;
  --ok-bg: #ecfdf3;          /* zarter Grünschleier für „gewählt“ (AA als Fläche) */
  --ok-border: #16a34a;      /* Auswahl-Rahmen */
  --no: #dc2626;
  --open: #d97706;
  --whatsapp: #25d366;       /* WhatsApp-Markenton (Icon-Button) */
  --whatsapp-ink: #128c4a;   /* dunkler für Kontrast auf hellem Grund */
  /* Festliche Zweitfarbe + Party-Verläufe – nur für Flächen/Deko, nicht für kleinen Text */
  --accent-2: #ff5d8f;
  --party-gradient: linear-gradient(135deg, #6d4aff 0%, #9b5cff 48%, #ff5d8f 100%);
  --party-banner: linear-gradient(150deg, #6d4aff 0%, #8b54ff 60%, #ff5d8f 115%);
}

* { box-sizing: border-box; }

/* Sichtbarer Fokus für Tastaturnutzung (gilt app-weit) */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Bewegung respektieren: Animationen/Übergänge praktisch aus, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

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

header.app {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 18px 24px;
}
header.app h1 { margin: 0; font-size: 20px; }
header.app p { margin: 4px 0 0; opacity: .85; font-size: 13px; }

/* Anmelde-Status oben rechts */
.auth-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.auth-bar .muted { color: rgba(255, 255, 255, .85); }
.auth-bar strong { color: #fff; }

/* Login-Karte: Zentrierung übernimmt .auth-screen (Flex); kein eigener Versatz. */
#auth-card { margin: 0; }

main {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  display: grid;
  gap: 20px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
}
.card h2 { margin: 0 0 14px; font-size: 16px; }

label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
/* Inputs ohne expliziten Type (=Default text) und URL/Search ebenfalls stylen,
   damit z.B. der Rezept-Editor (Name, Hinweis, Link, Zutaten) konsistent aussieht. */
input:not([type]), input[type="text"], input[type="date"], input[type="time"], input[type="number"], input[type="tel"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  /* 16px verhindert das iOS-Auto-Zoom beim Fokussieren von Feldern. */
  font-size: 16px;
  background: #fff;
  color: var(--ink);
}
textarea { font-family: inherit; resize: vertical; line-height: 1.5; }
code { background: #f3f0ff; border-radius: 4px; padding: 1px 5px; font-size: 12px; }

/* Format-Toolbar über dem Einladungs-Textfeld (WhatsApp-Markdown). */
.format-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.format-toolbar .fmt-btn { min-width: 44px; min-height: 44px; padding: 4px 8px; }
.format-toolbar .fmt-hint { margin-left: auto; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > div { flex: 1 1 160px; }

/* Formular-Abschnitte: gruppieren das Event-Formular klar (fieldset/legend). */
.form-section { border: none; margin: 0 0 18px; padding: 0; min-width: 0; }
.form-section + .form-section { border-top: 1px solid var(--line); padding-top: 16px; }
.form-section > legend { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--accent); padding: 0; margin-bottom: 8px; }
.form-section .fs-hint { margin-top: 0; }
/* Zweispaltiges Raster mit sauberen Paaren; .full spannt über beide Spalten. */
.form-grid { display: grid; gap: 12px 14px; grid-template-columns: 1fr 1fr; }
.form-grid > .full { grid-column: 1 / -1; }
.form-details { margin-top: 10px; }
.form-details > summary { cursor: pointer; font-size: 13px; color: var(--accent); padding: 6px 0; }
.form-details[open] > summary { margin-bottom: 6px; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

.flags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.flags label { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); font-size: 13px; }

button {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-ink);
}
button.ghost { background: #eef0f6; color: var(--ink); }
button.small { padding: 6px 10px; font-size: 13px; }
button:disabled { opacity: .5; cursor: not-allowed; }
/* Destruktive Aktion (z. B. Event löschen) – Farbe + Text, nie Farbe allein. */
button.danger { background: #fee2e2; color: var(--no); }
button.danger:hover { background: #fecaca; }

.muted { color: var(--muted); font-size: 13px; }
/* Utility: blendet immer aus – schlägt auch Komponenten mit eigenem display. */
.hidden { display: none !important; }

table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge.zugesagt { background: #dcfce7; color: var(--ok); }
.badge.abgesagt { background: #fee2e2; color: var(--no); }
.badge.offen { background: #fef3c7; color: var(--open); }

/* Status-Dropdown des Planers: Farbe + Text (nie Farbe allein – a11y). */
.status-select {
  padding: 4px 8px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); cursor: pointer; background: var(--card);
}
.status-select.status-zugesagt { background: #dcfce7; color: var(--ok); border-color: #bbf7d0; }
.status-select.status-abgesagt { background: #fee2e2; color: var(--no); border-color: #fecaca; }
.status-select.status-offen { background: #fef3c7; color: var(--open); border-color: #fde68a; }

.stats { display: flex; gap: 18px; flex-wrap: wrap; }
.stat { background: #f3f0ff; border-radius: 10px; padding: 12px 16px; min-width: 96px; }
.stat .num { font-size: 24px; font-weight: 700; }
.stat .lbl { font-size: 12px; color: var(--muted); }

.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.toast.show { opacity: 1; }

.linkbox { background: #f3f0ff; border-radius: 8px; padding: 12px; margin-top: 10px; word-break: break-all; font-size: 13px; }
.linkbox .actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.linkbox .link-url { margin-top: 6px; }
/* Im Modal liegt die Box bündig im Body – kein zusätzlicher oberer Abstand. */
.modal-body .linkbox { margin-top: 0; }

/* Änderungs-Mitteilung: Schnellbausteine + Ergebnisliste der Zusagen */
.bc-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.chip {
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.bc-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
}

/* Quick-Start-Kacheln (Admin: Anlass wählen, Profil-Presets im Hintergrund) */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 4px 0 18px; }
.tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; background: #f3f0ff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  font-weight: 600; transition: transform .08s ease, border-color .15s ease;
}
.tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.tile[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.tile .tile-emoji { font-size: 26px; line-height: 1; }
.tile .tile-name { font-size: 14px; }
.tile .tile-desc { font-size: 12px; color: var(--muted); font-weight: 400; }

/* Personenzahl-Eingabe (Erwachsene / Kinder), kompakt */
.count-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.count-row > div { flex: 0 1 130px; }
.count-row input[type="number"] { max-width: 130px; }

/* Aktionen in Tabellenzeilen */
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Quadratischer Icon-Button (z.B. WhatsApp-Versand) */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border-radius: 9px; font-size: 17px; line-height: 1;
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .06s ease;
}
.icon-btn:hover { border-color: var(--accent); background: var(--bg); }
.icon-btn:active { transform: scale(.94); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-btn svg { display: block; }
.btn-wa { color: var(--whatsapp-ink); border-color: var(--whatsapp); }
.btn-wa:hover { background: var(--whatsapp); color: #fff; border-color: var(--whatsapp); }
.btn-wa:focus-visible { outline: 2px solid var(--whatsapp-ink); outline-offset: 2px; }
.btn-tg { color: #229ED9; border-color: #229ED9; }
.btn-tg:hover { background: #229ED9; color: #fff; border-color: #229ED9; }
.btn-tg:focus-visible { outline: 2px solid #229ED9; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .icon-btn { transition: none; } }

/* „Gesendet"-Markierung: grünes Häkchen-Badge, anklickbar zum Aufheben */
.sent-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #dcfce7; color: var(--ok); border: 1px solid transparent; cursor: pointer;
}
.sent-badge:hover { border-color: var(--ok); }
.sent-badge:focus-visible { outline: 2px solid var(--ok); outline-offset: 2px; }

/* Checkbox mit Beschriftung in einer Zeile (z.B. „Als Administrator anlegen") */
.check-inline { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.check-inline input { width: auto; margin: 0; }

/* Berechnung */
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.calc-grid h3 { font-size: 13px; margin: 0 0 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.num-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Quellen-Fußnote: kleiner, zurückhaltender Beleg unter den Mengen. */
.calc-quelle { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); font-style: italic; }
.calc-diaeten { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.calc-diaeten h3 { font-size: 13px; margin: 0 0 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.calc-diaeten p { margin: 0 0 8px; font-size: 13px; }

/* Budget */
.budget { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.budget > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.budget .gesamt { font-weight: 700; font-size: 16px; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
/* Kosten pro Kopf + Budget-Ziel/Restbudget. */
.budget .pro-kopf { color: var(--muted); }
.budget .ziel-zeile.ok { color: var(--ok); font-weight: 600; }
.budget .ziel-zeile.ueber { color: var(--no); font-weight: 700; }
/* Eingabezeile für das Budget-Ziel. */
.budget-ziel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.budget-ziel label { font-size: 13px; color: var(--muted); margin: 0; }
.budget-ziel input { width: 120px; }
/* Export-/Teilen-Leiste unter dem Budget. */
.shop-export { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* KI-Menüvorschlag: Varianten als Karten. */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 8px; }
.menu-variante { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--bg); }
.buffet-apply { margin-top: auto; align-self: flex-start; }
.menu-variante h3 { margin: 0 0 6px; font-size: 15px; }
.menu-variante ul { margin: 8px 0 0; padding-left: 18px; }
.menu-variante li { margin: 3px 0; }
.menu-fuss { margin-top: 12px; font-size: 12px; }
/* Kurs-Gliederung (Vorspeise/Hauptgang/…) + Richtmenge je Gericht. */
.menu-kurs { margin-top: 10px; }
.menu-kurs h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.menu-kurs ul { margin: 0; padding-left: 18px; }
.menu-menge { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; }

/* Sitzordnung / Tischplan-Editor */
:root {
  --seat-floor: #faf9ff;      /* Boden der „Bühne" */
  --seat-grid: #e9e5fb;       /* Meter-Raster */
  --seat-tisch-fill: #efeaff; /* Tischfläche */
  --seat-frei: #c7cdda;       /* freier Platz (Rand) */
}
#seating-vorlagen { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seating-wrap { display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: start; margin-top: 8px; }
.seating-stage-host {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  /* Festliche, ruhige Bühne mit sanftem Verlauf (Eye-Catcher, aber dezent). */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(109, 74, 255, .06) 0, transparent 60%),
    var(--seat-floor);
  height: 62vh; min-height: 480px;
}
.seating-pool { border: 1px solid var(--line); border-radius: 12px; padding: 12px; max-height: 600px; overflow-y: auto; }
.seating-pool h3 { margin: 0 0 10px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.seat-avatar { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; margin-bottom: 8px; cursor: grab; background: var(--card); }
.seat-avatar:active { cursor: grabbing; }
.seat-ava-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.seat-ava-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kinder farblich abgesetzt (Farbe + Symbol, nicht nur Farbe). */
.seat-avatar.ist-kind .seat-ava-badge { background: var(--open); }
.seat-avatar.ist-kind { border-color: color-mix(in srgb, var(--open) 40%, #fff); }
@media (max-width: 760px) { .seating-wrap { grid-template-columns: 1fr; } }
/* Belegbarkeits-Marker an den Gerichten. */
.quelle-katalog, .quelle-ki { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; white-space: nowrap; }
.quelle-katalog { background: color-mix(in srgb, var(--ok) 16%, #fff); color: var(--ok); }
.quelle-ki { background: color-mix(in srgb, var(--open) 18%, #fff); color: var(--open); }

/* Rezepte-Bereich */
.rz-search { width: 220px; max-width: 100%; }
/* Kompakte Filterleiste statt vier voll-breiter Dropdowns – wirkt aufgeraeumter. */
.rz-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 14px; }
.rz-filter::before { content: "Filter:"; font-size: 12px; color: var(--muted); letter-spacing: .03em; text-transform: uppercase; margin-right: 4px; }
.rz-filter select {
  width: auto; min-width: 0; max-width: 200px;
  padding: 6px 28px 6px 10px; font-size: 13px; border-radius: 999px;
  background-color: #fff; border-color: var(--line); color: var(--ink);
}
.rz-filter select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* aktive Filter (Wert != "") farblich hervorheben */
.rz-filter select.rz-filter-aktiv {
  background: rgba(109, 74, 255, .08); border-color: var(--accent); color: var(--accent); font-weight: 600;
}
@media (max-width: 600px) { .rz-filter select { flex: 1 1 auto; max-width: 100%; } }
.rz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px; align-items: stretch; }
/* Alle Karten gleich hoch: Card fuellt die Grid-Zelle, der Toggle innen
   stretcht ueber die Hoehe, Footer (Aktionen + Sterne) klebt unten. */
.rz-card { position: relative; display: flex; flex-direction: column; height: 100%;
  border: 2px solid var(--line); border-radius: 12px; background: var(--card);
  transition: border-color .15s, background .15s, box-shadow .15s; overflow: hidden; }
.rz-card:hover { border-color: var(--accent); }
.rz-card.is-aktiv {
  border-color: var(--ok-border); background: var(--ok-bg);
  box-shadow: 0 0 0 1px var(--ok-border) inset;
}
/* Ganze Karte = Auswahl-Toggle (großes Touch-Target). Border/Bg liegen jetzt
   auf .rz-card, damit auch der Sterne-Footer im aktiven Zustand mitfaerbt. */
.rz-toggle {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  width: 100%; flex: 1; padding: 12px 14px 10px; font: inherit; color: var(--ink); cursor: pointer;
  border: 0; background: transparent; min-height: 110px;
}
.rz-toggle:hover strong { color: var(--accent); }
.rz-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
.rz-card.is-aktiv .rz-toggle strong { color: var(--ink); }
/* Häkchen-Badge oben rechts nur im gewählten Zustand (Farbe nie allein). */
.rz-check {
  position: absolute; top: 9px; right: 9px; width: 24px; height: 24px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; background: var(--ok); color: #fff;
  font-size: 14px; font-weight: 700; z-index: 2; pointer-events: none;
}
.rz-card.is-aktiv .rz-check { display: inline-flex; }
.rz-state { display: none; }  /* redundant zum Check + grünem Rahmen */
/* Aktionen + Sterne als echter Footer-Block (kein absolutes Positionieren mehr,
   damit es nichts mehr ueberlappt – egal wie lang der Titel ist). */
.rz-actions { display: flex; gap: 4px; padding: 4px 8px 0; justify-content: flex-end;
  flex-wrap: wrap; }
.rz-act { padding: 4px 10px; font-size: 12px; background: none; border: 0; color: var(--muted); cursor: pointer; border-radius: 6px; min-height: 28px; }
.rz-act:hover { color: var(--accent); background: rgba(109, 74, 255, .06); }
.rz-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rz-card strong { font-size: 15px; }
.rz-gang { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); }
.rz-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.rz-tag { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.rz-zutaten { margin: 6px 0 0; padding-left: 18px; }
.rz-schritte { margin: 6px 0 0; padding-left: 20px; }
.rz-schritte li, .rz-zutaten li { margin: 3px 0; }
.rz-link { margin-top: 12px; }
/* Bewertung (Sterne) – Farbe nicht alleiniger Träger: leere Sterne bleiben sichtbar */
/* Sterne-Reihe = Teil des Footers, klebt unten an der Karte und ueberschneidet nie. */
.rz-rating { display: flex; align-items: center; gap: 1px; padding: 4px 12px 10px; flex-wrap: wrap; }
.rz-star { background: none; border: 0; padding: 0 1px; font-size: 15px; line-height: 1; cursor: pointer; color: var(--line); }
.rz-star.avg { color: #f5b301; opacity: .55; }
.rz-star.on { color: #f5b301; }
/* Beim Hovern auf Stern N werden 1..N gefüllt (per JS gesetzte .hover-Klasse). */
.rz-star.hover { color: #f5b301; opacity: 1; }
.rz-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
.rz-star-clear { background: none; border: 0; padding: 0 2px 0 4px; font-size: 12px; line-height: 1; color: var(--muted); cursor: pointer; }
.rz-star-clear:hover { color: var(--no); }
.rz-star-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
.rz-rate-count { font-size: 11px; margin-left: 6px; }
.ai-persona-feld { margin-top: 12px; }
.ai-persona-feld textarea { width: 100%; resize: vertical; font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .rz-card, .rz-toggle { transition: none; } }

/* Rezepte-Layout mit Buffet-Seitenleiste (analog zum Sitzordnungs-Pool). */
.rz-wrap { display: flex; gap: 16px; align-items: flex-start; }
.rz-wrap .rz-grid { flex: 1; min-width: 0; }
.rz-aside {
  width: 260px; flex-shrink: 0; position: sticky; top: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px 14px;
}
.rz-aside-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rz-aside h3 { margin: 0 0 8px; font-size: 14px; }
.rz-aside-head h3 { margin: 0; }
.rz-aside-gang { margin-top: 10px; }
.rz-aside-gang h4 { margin: 0 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); }
.rz-aside-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 0; font-size: 13px; }
.rz-aside-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 6px; }
.rz-aside-x:hover { color: var(--no); background: var(--bg); }
.rz-aside-x:focus-visible { outline: 2px solid var(--no); outline-offset: 1px; }
@media (max-width: 880px) {
  .rz-wrap { flex-direction: column; }
  .rz-aside { width: 100%; position: static; order: -1; }  /* mobil: Buffet oben */
}

/* Rezept-Editor (Dialog) */
/* ===== Rezept-Editor (modernisiert) ============================== */
.re-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 4px; }
.re-grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; margin-bottom: 4px; }
@media (max-width: 600px) {
  .re-grid-2, .re-grid-3 { grid-template-columns: 1fr; gap: 8px; }
}
.re-grid-2 > div, .re-grid-3 > div { min-width: 0; }
.re-grid-2 label, .re-grid-3 label { margin-top: 0; }

.re-fs { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 12px; margin: 12px 0; }
.re-fs legend { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent); padding: 0 6px; }
/* Checkbox-Gruppen als responsive Grid statt flex-wrap: ergibt schoene Spalten */
.re-checkgrid { display: grid; gap: 6px 14px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.re-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 400; margin: 0; color: var(--ink); }
.re-chk input { accent-color: var(--accent); width: 16px; height: 16px; }
.re-global { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px;
  padding: 10px 12px; background: var(--bg); border: 1px dashed var(--accent); border-radius: 8px; }

/* Zutaten-Zeile: festes Grid statt flex, saubere Spalten + Preis (Welle D #74) */
.re-zrow { display: grid; gap: 8px; align-items: center; margin: 6px 0;
  grid-template-columns: 1fr 80px 110px 110px 36px; }
.re-zrow input { width: 100%; }
.re-zrow .re-z-preis { background: rgba(109, 74, 255, 0.04); }
@media (max-width: 700px) {
  .re-zrow { grid-template-columns: 1fr 1fr 1fr 36px; }
  .re-zrow .re-z-name { grid-column: 1 / -1; }
  .re-zrow .re-z-preis { grid-column: 1 / 4; }
}

/* Zubereitung als grosses Textfeld */
.re-zubereitung { width: 100%; min-height: 180px; resize: vertical;
  font: inherit; line-height: 1.55; padding: 12px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.re-zubereitung:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* Block-Ueberschriften und kleine Hinweise */
.re-h { margin: 20px 0 4px; font-size: 15px; font-weight: 700; }
.re-hint { font-size: 12px; color: var(--muted); margin: 0 0 8px; line-height: 1.5; }
.re-hint code { background: #f3f0ff; border-radius: 4px; padding: 0 4px; font-size: 11px; }

.re-x { background: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 6px; }
.re-x:hover { color: var(--no); border-color: var(--no); background: rgba(220, 38, 38, .04); }
.re-x:focus-visible { outline: 2px solid var(--no); outline-offset: 1px; }

/* Bild-Upload im Rezept-Editor */
.re-bild { display: flex; gap: 16px; align-items: flex-start; margin: 10px 0 14px; }
.re-bild-vorschau {
  width: 180px; height: 135px; border: 1px dashed var(--line); border-radius: 10px;
  background: var(--bg); overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.re-bild-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.re-bild-leer { font-size: 12px; color: var(--muted); }
.re-bild-aktionen { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.re-bild-aktionen .re-hint { margin-top: 4px; }

/* Thumbnail in der Rezept-Karte (Buffet-Designer) */
.rz-thumb {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 8px; margin: -2px 0 6px; display: block;
  background: var(--bg);
}
/* Grosses Bild im Detail-Modal */
.rz-detail-bild {
  width: 100%; max-height: 320px; object-fit: cover;
  border-radius: 10px; margin: 0 0 14px; display: block;
}

/* ===== Catering-Modus im Catering-Block =========================== */
.modus-block { margin-top: 16px; padding: 12px;
  background: var(--bg); border-radius: 8px; }
.pauschale-row { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.pauschale-row label { margin: 0; font-size: 13px; color: var(--muted); }
.pauschale-row input { max-width: 140px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 6px; }

/* ===== Preis-Tier-Pills im Catering-Block ========================= */
.tier-block { margin-top: 16px; padding: 12px;
  background: var(--bg); border-radius: 8px; }
.tier-titel { margin: 0 0 8px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.tier-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.tier-pill {
  padding: 6px 12px; font-size: 13px; font-weight: 500;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.tier-pill:hover { color: var(--ink); border-color: var(--accent); }
.tier-pill.is-aktiv {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.tier-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tier-hint { margin: 8px 0 0; font-size: 11px; line-height: 1.4; }

/* === Platzkarten drucken (Welle E #77) ============================= */
.pk-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 12px; background: var(--bg); border-radius: 10px; margin-bottom: 12px; }
.pk-toolbar .pk-opt { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.pk-toolbar select { padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); }
.pk-hint { margin: 0 0 12px; padding: 8px 12px; background: rgba(109, 74, 255, 0.05);
  border-radius: 8px; border-left: 3px solid var(--accent); }

/* Bildschirm-Vorschau: A4 simulieren */
.pk-vorschau .pk-seite {
  width: 210mm; min-height: 297mm; margin: 0 auto 20px;
  background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  padding: 10mm; display: grid; gap: 6mm;
  border: 1px dashed var(--line);
}
.pk-vorschau .pk-seite.pk-4 { grid-template: repeat(2, 1fr) / repeat(2, 1fr); }
.pk-vorschau .pk-seite.pk-8 { grid-template: repeat(4, 1fr) / repeat(2, 1fr); }
.pk-vorschau .pk-seite.pk-10 { grid-template: repeat(5, 1fr) / repeat(2, 1fr); }
.pk-karte {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(135deg, rgba(109, 74, 255, 0.04), rgba(255, 93, 143, 0.03));
  border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; min-height: 0;
}
.pk-front, .pk-rueck {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 6mm;
  border-top: 4px solid var(--accent);
}
.pk-rueck { transform: rotate(180deg); border-top: none;
  border-bottom: 4px solid var(--accent-2, #ff5d8f); }
.pk-falz-linie { height: 1px; background: var(--line); margin: 0 8mm;
  border-top: 1px dashed var(--muted); }
.pk-tisch { font-size: 11pt; color: var(--muted); margin-bottom: 4mm;
  text-transform: uppercase; letter-spacing: 0.5px; }
.pk-name { font-size: 18pt; font-weight: 700; color: var(--ink); line-height: 1.2; }

/* Druck: nur den Vorschau-Bereich, ohne Seitenraender vom Browser dazu */
@media print {
  body.pk-drucken-aktiv > * { display: none !important; }
  body.pk-drucken-aktiv #platzkarten-dialog,
  body.pk-drucken-aktiv #platzkarten-dialog[open] { display: block !important;
    position: static !important; background: #fff !important;
    border: none !important; padding: 0 !important; box-shadow: none !important; }
  body.pk-drucken-aktiv #platzkarten-dialog .modal-head,
  body.pk-drucken-aktiv #platzkarten-dialog .pk-toolbar,
  body.pk-drucken-aktiv #platzkarten-dialog .pk-hint { display: none !important; }
  body.pk-drucken-aktiv .pk-seite {
    box-shadow: none !important; border: none !important;
    page-break-after: always; margin: 0 !important;
  }
  body.pk-drucken-aktiv .pk-seite:last-child { page-break-after: auto; }
  @page { size: A4; margin: 0; }
}

/* === Marktpreis-Editor (Welle D1) ================================== */
.mp-section { margin-top: 18px; }
.mp-section h3 { margin: 0 0 4px; font-size: 16px; }
.mp-meta { padding: 8px 12px; background: var(--bg); border-radius: 8px;
  border-left: 3px solid var(--accent); margin: 6px 0 14px; }
.mp-table-wrap { max-height: 420px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 8px; }
.mp-table { width: 100%; border-collapse: collapse; }
.mp-table thead { position: sticky; top: 0; background: var(--card);
  z-index: 1; box-shadow: 0 1px 0 var(--line); }
.mp-table th { font-size: 12px; padding: 8px 10px; text-align: left;
  color: var(--muted); font-weight: 600; }
.mp-table th:nth-child(n+3) { text-align: right; }
.mp-table td { padding: 4px 10px; border-top: 1px solid var(--line); }
.mp-table tbody tr:hover { background: rgba(109, 74, 255, 0.04); }
.mp-table input[type="number"], .mp-table select {
  width: 100%; max-width: 110px; padding: 4px 8px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card);
}
.mp-table .num-cell { text-align: right; font-variant-numeric: tabular-nums; }
#mp-kommentar { width: 100%; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 8px; margin-top: 6px; }

/* KI-Diff-Tabelle: alt vs. neu, Aenderungs-% farbig */
.mp-diff-table tr.diff-neu td { background: rgba(109, 74, 255, 0.07); }
.mp-diff-table tr.diff-hoch td { background: rgba(220, 38, 38, 0.05); }
.mp-diff-table tr.diff-runter td { background: rgba(22, 163, 74, 0.05); }
.mp-diff-table tr.diff-gleich td { color: var(--muted); }
.mp-inv-details { margin-top: 16px; }
.mp-inv-details summary { cursor: pointer; padding: 6px 0; }
.success { color: #16a34a; font-weight: 600; padding: 12px; background: rgba(22, 163, 74, 0.08);
  border-radius: 8px; }
.error { color: var(--no); padding: 12px; background: rgba(220, 38, 38, 0.06); border-radius: 8px; }

/* Info-Tooltip ⓘ (Browser-Default-Title-Hint, dezent stylen) */
.info-tooltip { display: inline-block; margin-left: 4px;
  width: 16px; height: 16px; line-height: 16px;
  text-align: center; font-size: 11px; font-weight: 700;
  background: var(--bg); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 50%;
  cursor: help; }

/* Quellen-Info im KI-Diff-Modal */
.ki-quellen-info { margin-top: 12px; padding: 10px 14px;
  background: var(--bg); border-radius: 8px; }
.ki-quellen-info summary { cursor: pointer; }
.ki-quellen-info ul { margin: 8px 0 0; padding-left: 18px; line-height: 1.5; }

/* Welle H2: Auto-Job-Panel */
.mp-auto-job { padding: 14px; background: var(--bg); border-radius: 10px;
  border-left: 3px solid var(--accent); }
.mp-auto-job h3 { margin: 0 0 4px; font-size: 15px; }
.mp-auto-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin: 10px 0; }
.mp-auto-row label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.mp-auto-row select { padding: 6px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); }
.mp-auto-row .switch-label input[type="checkbox"] { width: 18px; height: 18px;
  accent-color: var(--accent); }
.auto-history-liste { list-style: none; padding: 0; margin: 6px 0; font-size: 13px; }
.auto-history-liste li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.auto-history-liste li:last-child { border-bottom: 0; }
.auto-history-liste code { font-size: 11px; padding: 1px 6px; background: var(--card);
  border-radius: 4px; }

/* Menue-Vorlagen-Button im Buffet-Designer: deutlich erkennbar als
   "Komplett-Loesung", damit Planer ihn nicht zwischen den anderen Tools
   ueberlesen. */
.mv-uebernehmen-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2, #ff5d8f)) !important;
  color: #fff !important; border-color: transparent !important;
  font-weight: 600 !important;
}
.mv-uebernehmen-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(109, 74, 255, 0.25); }
@media (prefers-reduced-motion: reduce) { .mv-uebernehmen-btn { transition: none; } }

/* ===== Wein/Bier-Anteile-Slider im Catering-Block ================== */
.anteile-block { margin-top: 16px; padding: 12px;
  background: var(--bg); border-radius: 8px; }
.anteile-titel { margin: 0 0 8px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.anteile-row { display: grid; grid-template-columns: 80px 1fr 50px;
  align-items: center; gap: 10px; margin: 6px 0; }
.anteile-row label { font-size: 14px; color: var(--ink); margin: 0; }
.anteile-row input[type="range"] { width: 100%; cursor: pointer; accent-color: var(--accent); }
.anteile-prozent { text-align: right; font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 600; color: var(--accent); }
.anteile-hint { margin: 8px 0 0; font-size: 11px; line-height: 1.4; }
.anteile-hint .hint-info { display: inline-block; margin-left: 4px; padding: 2px 8px;
  background: rgba(109, 74, 255, 0.08); border-radius: 6px; color: var(--ink); }

/* Live-Summe Wein+Bier: farbcodiert je nach Stand */
.anteile-summe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 12px 0 4px; padding: 8px 12px; border-radius: 8px;
  font-size: 13px; transition: background .15s; }
.anteile-summe-wert { font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums; }
.anteile-summe-info { color: var(--ink); }
.anteile-summe.ok { background: rgba(22, 163, 74, 0.08); border: 1px solid rgba(22, 163, 74, 0.25); }
.anteile-summe.ok .anteile-summe-wert { color: #16a34a; }
.anteile-summe.info { background: rgba(217, 119, 6, 0.08); border: 1px solid rgba(217, 119, 6, 0.25); }
.anteile-summe.info .anteile-summe-wert { color: #d97706; }
.anteile-summe.warn { background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.25); }
.anteile-summe.warn .anteile-summe-wert { color: var(--no); }

/* ===== Menü-Komposition (Tuning) =================================== */
.kr-profil-leiste { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.kr-profil-leiste select { padding: 6px 10px; }
.kr-editor { display: flex; flex-direction: column; gap: 12px; }
.kr-editor fieldset.re-fs { margin: 0; }
.kr-editor .re-checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.kr-override-wrap { overflow-x: auto; }
.kr-override { border-collapse: collapse; width: 100%; min-width: 600px; }
.kr-override th, .kr-override td { border: 1px solid var(--line); padding: 6px 8px; text-align: center; font-size: 13px; }
.kr-override thead th { background: var(--bg); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .03em; }
.kr-override tbody th { text-align: left; background: var(--bg); }
.kr-override input { width: 60px; padding: 4px 6px; text-align: center; border: 1px solid var(--line); border-radius: 4px; }
.kr-defaults { margin-top: 16px; }
.kr-defaults summary { cursor: pointer; padding: 6px 0; font-size: 13px; }
.kr-defaults pre { background: var(--bg); padding: 12px; border-radius: 8px; font-size: 12px; overflow-x: auto; max-height: 240px; }

/* ===== Menü-Vorlagen (Einstellungen-Tab + Anwenden-Dialog) ======== */
.mv-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mv-zeile { display: flex; align-items: center; gap: 16px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  transition: border-color .15s, background .15s; }
.mv-zeile:hover { border-color: var(--accent); background: rgba(109, 74, 255, .03); }
.mv-meta { flex: 1 1 auto; min-width: 0; }
.mv-name { font-weight: 600; }
.mv-besch { font-size: 13px; margin-top: 2px; }
.mv-sub { font-size: 12px; margin-top: 4px; text-transform: uppercase; letter-spacing: .03em; }
.mv-rezepte { font-size: 12px; margin-top: 4px; }
.mv-actions { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 600px) {
  .mv-zeile { flex-direction: column; align-items: stretch; }
  .mv-actions { justify-content: flex-end; }
}

/* Multi-Select-Raster fuer Rezepte im Menü-Vorlage-Editor */
.mv-rez-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px; max-height: 320px; overflow-y: auto;
  padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.mv-rez-box { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; cursor: pointer; }
.mv-rez-box:hover { border-color: var(--accent); }
.mv-rez-box input { margin: 0; flex-shrink: 0; }
.mv-range { display: flex; align-items: center; gap: 6px; }
.mv-range input { width: 70px; }
.mv-range span { color: var(--muted); font-size: 12px; }

/* "Vorlage übernehmen"-Dialog im Buffet-Designer */
.mv-ersetzen { display: flex; align-items: center; gap: 8px; padding: 10px;
  background: var(--bg); border-radius: 8px; margin-bottom: 12px;
  font-size: 14px; cursor: pointer; }
.mv-ersetzen input { margin: 0; }
.mv-grid { display: flex; flex-direction: column; gap: 8px; }
.mv-vorschlag { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; transition: border-color .15s, background .15s; background: #fff; }
.mv-vorschlag:hover { border-color: var(--accent); background: rgba(109, 74, 255, .05); }
.mv-vorschlag-name { font-weight: 600; margin-bottom: 2px; }
.mv-vorschlag-rezepte { font-size: 12px; margin-top: 4px; line-height: 1.4; }

/* Umschalter Basis ↔ "fuer dein Event" im Detail-Modal */
.rz-mengen-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  margin: 8px 0 16px;
}
.rz-mengen-btn {
  padding: 6px 14px; font-size: 13px; font-weight: 500;
  background: transparent; color: var(--muted); border: 0; border-radius: 999px;
  cursor: pointer; transition: background .15s, color .15s;
}
.rz-mengen-btn:hover { color: var(--ink); }
.rz-mengen-btn.is-aktiv {
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
.rz-mengen-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) {
  .re-bild { flex-direction: column; }
  .re-bild-vorschau { width: 100%; height: 200px; }
}

/* Geloeschte/destruktive Aktion im Footer */
.modal-foot .ghost.danger { color: var(--no); border-color: var(--no); }
.modal-foot .ghost.danger:hover { background: rgba(220, 38, 38, .06); }
/* Loeschen-Button nach links schieben, Speichern bleibt rechts */
#re-delete { margin-right: auto; }

/* Druckansicht: nur die Einkaufsliste (Tabelle + Budget), Rest ausblenden.
   Checkbox-Spalte bleibt sichtbar – praktisch zum Abhaken auf Papier. */
@media print {
  .sidebar, .topbar, .scrim, #toast, dialog,
  .shop-tools, .shop-export, .budget-ziel, .card-foot,
  #section-shopping .row, .row-actions { display: none !important; }
  .app-shell { display: block; }
  .content { min-height: 0; }
  .card { box-shadow: none; border: 0; padding: 0; }
  body, .app-shell, .content, .card { background: #fff; }
  a[href]::after { content: ""; }
}
/* Geschätzte Gesamtsumme: zurückhaltend, klar als Schätzung erkennbar. */
.budget .gesch-summe { color: var(--muted); font-style: italic; }
/* Geschätzte Richtpreise in der Tabelle: dezent, antippbar wirkend. */
.schaetz { color: var(--muted); font-style: italic; }
/* Werkzeugleiste über der Einkaufstabelle (Schätzpreise übernehmen / zurücksetzen). */
.shop-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
/* Abhaken: Checkbox-Spalte, erledigte Zeilen dezent durchgestrichen. */
.check-cell { width: 34px; text-align: center; }
.check-cell input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
tr.erledigt td:not(.check-cell) { opacity: .5; text-decoration: line-through; }
/* Fortschrittsbalken über der Einkaufsliste. */
.shop-progress { margin: 6px 0 12px; }
.shop-progress-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.shop-progress-bar > span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .25s ease;
}
.shop-progress-text, #shop-progress-text { margin: 6px 0 0; }
@media (prefers-reduced-motion: reduce) { .shop-progress-bar > span { transition: none; } }

/* RSVP-Seite (öffentlicher Gäste-View – hier darf es feierlich sein) */
body.rsvp-page {
  background: radial-gradient(1100px 520px at 50% -10%, #efe9ff 0%, var(--bg) 60%);
  min-height: 100vh;
}
.rsvp-wrap { max-width: 460px; margin: 7vh auto; padding: 0 16px; }
.rsvp-card {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 60px -24px rgba(109, 74, 255, .45);
  text-align: center;
}
/* Festlicher Kopfbereich mit Verlauf; trägt nur großen weißen Titel (AA als Large Text) */
.rsvp-banner { background: var(--party-banner); color: #fff; padding: 30px 24px 26px; }
.rsvp-banner .emoji { font-size: 42px; line-height: 1; }
/* Schließen-Knopf (nur in der Vorschau aus der Admin-Ansicht sichtbar). */
.rsvp-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .22); color: #fff;
  border: none; font-size: 18px; line-height: 1; cursor: pointer;
  transition: background .15s ease;
}
.rsvp-close:hover { background: rgba(255, 255, 255, .38); }
.rsvp-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rsvp-card h1 { font-size: 22px; margin: 12px 0 0; color: inherit; }
/* Sekundärtext bewusst auf weißer Fläche (sicherer Kontrast), nicht auf dem Verlauf */
.rsvp-meta { color: var(--muted); margin: 0 0 12px; font-size: 14px; }
.rsvp-body { padding: 22px 28px 28px; }
.rsvp-body p { margin: 0 0 6px; }
/* Personenzahl-Abfrage auf der RSVP-Karte (Erwachsene/Kinder) – dezent, gut sichtbar */
.rsvp-counts {
  margin-top: 18px;
  padding: 14px 16px;
  background: #f3f0ff;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
}
.rsvp-counts-hint { margin: 0 0 10px; font-size: 14px; color: var(--ink); font-weight: 600; }
.rsvp-counts .count-row { justify-content: center; }
.rsvp-counts label { margin-top: 0; }

/* Ernährungswünsche: dezenter, freiwilliger Aufklapp-Block (nur Einladung). */
.rsvp-diet { margin: 14px 0 2px; text-align: center; }
.rsvp-diet > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--muted); padding: 6px 10px; border-radius: 999px;
}
.rsvp-diet > summary::-webkit-details-marker { display: none; }
.rsvp-diet > summary:hover { color: var(--ink); }
.rsvp-diet > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rsvp-diet-opt { font-size: 12.5px; opacity: .8; }
.rsvp-diet-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.diet-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  font-size: 14px; cursor: pointer; user-select: none; min-height: 40px;
}
.diet-chip input { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
.diet-chip:has(input:checked) {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, #fff);
}
.diet-chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Vorfreude-Countdown im Banner – auf dem Verlauf, daher heller, kräftiger Text. */
.rsvp-countdown {
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
}

/* Phasen-Badge im Banner (Save the Date vs. Einladung). Auf dem Verlauf, daher
   heller Pillen-Look; Farbe + Text (nie Farbe als einziger Träger). */
.rsvp-phase-badge {
  display: inline-block;
  margin: 0 0 4px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
}
.rsvp-phase-badge.save-the-date { background: rgba(255, 255, 255, .14); }

/* Google-Maps-Link (ausgehend, kein Embed). */
.rsvp-maps { margin: 0 0 12px; }
.rsvp-maps a {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent); font-weight: 600; text-decoration: none;
  font-size: 14px;
}
.rsvp-maps a:hover { text-decoration: underline; }
.rsvp-maps a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Hinweis in der Save-the-Date-Phase, dass Ort/Uhrzeit noch folgen. */
.rsvp-details-hinweis {
  margin: 0 0 12px; font-size: 14px; color: var(--muted); font-style: italic;
}

/* Touch-Stepper für die Personenzahl: große Tap-Ziele (≥ 44 px). */
.step-group { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stepper { display: flex; align-items: stretch; gap: 0; }
.step-btn {
  width: 46px; min-height: 46px;
  font-size: 22px; font-weight: 700; line-height: 1;
  border: 1px solid var(--accent); background: #fff; color: var(--accent);
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s ease;
}
.step-btn:first-child { border-radius: 12px 0 0 12px; }
.step-btn:last-child { border-radius: 0 12px 12px 0; }
.step-btn:hover { background: rgba(109, 74, 255, .12); }
.step-btn:active { background: rgba(109, 74, 255, .22); }
.step-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 1; }
.step-val {
  width: 58px; max-width: 58px; text-align: center;
  border: 1px solid var(--line); border-left: none; border-right: none;
  border-radius: 0; font-size: 18px; font-weight: 700;
  -moz-appearance: textfield;
}
.step-val::-webkit-outer-spin-button,
.step-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.rsvp-actions { display: flex; gap: 12px; margin-top: 20px; }
.rsvp-actions button {
  flex: 1; padding: 15px; font-size: 15px; border-radius: 12px;
  transition: transform .08s ease, filter .15s ease;
}
.rsvp-actions button:hover { filter: brightness(1.04); }
.rsvp-actions button:active { transform: translateY(1px); }
button.yes { background: var(--ok); }
/* Absage dezent halten, damit der Happy Path (Zusage) optisch dominiert */
button.no { background: #eef0f6; color: var(--ink); }
.current { margin-top: 20px; font-size: 15px; min-height: 1.2em; }
.error { color: var(--no); }

/* Konfetti-Moment bei Zusage – winzig, ohne Library; respektiert Reduced-Motion */
.confetti-piece {
  position: fixed; top: -16px; width: 10px; height: 14px;
  z-index: 9999; pointer-events: none; will-change: transform, opacity;
  animation: confetti-fall var(--dur, 2.4s) linear forwards;
}
.confetti-piece.rund { border-radius: 50%; }
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-piece { display: none; }
}

/* =====================================================================
   State-of-the-Art Admin-Shell: Sidebar + Sektionen + Modals
   Festlich-modern, aber datendicht & bedienbar. Tokens statt Magic-Werte.
   ===================================================================== */
:root {
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-sm: 0 1px 2px rgba(31, 36, 48, .06), 0 1px 3px rgba(31, 36, 48, .08);
  --shadow-md: 0 8px 24px -8px rgba(31, 36, 48, .18);
  --shadow-lg: 0 24px 60px -24px rgba(109, 74, 255, .45);
  --sidebar-w: 264px;
  /* Dunkles, festliches Lila für die Sidebar – weißer Text darauf erfüllt AA. */
  --sidebar: linear-gradient(180deg, #2d2060 0%, #241a4d 100%);
}

/* --- Login-Screen (festlich, modern, „Party") ----------------------- */
.auth-screen {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow: hidden;
  /* Lebendiger, tiefer Party-Verlauf als Bühne für die Glas-Karte. */
  background:
    radial-gradient(900px 600px at 12% 8%, rgba(255, 93, 143, .35) 0, transparent 55%),
    radial-gradient(900px 600px at 88% 92%, rgba(109, 74, 255, .40) 0, transparent 55%),
    linear-gradient(135deg, #2a1d5e 0%, #4a2c8f 45%, #7a3da6 100%);
}
/* Zwei weich gezeichnete, langsam schwebende Farb-Blobs (Tiefe + Bewegung). */
.auth-screen::before,
.auth-screen::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: .55; z-index: 0; pointer-events: none;
  animation: blobFloat 16s ease-in-out infinite;
}
.auth-screen::before {
  width: 42vw; height: 42vw; max-width: 460px; max-height: 460px;
  top: -8%; left: -6%;
  background: radial-gradient(circle, var(--accent-2) 0, transparent 70%);
}
.auth-screen::after {
  width: 46vw; height: 46vw; max-width: 520px; max-height: 520px;
  bottom: -10%; right: -8%;
  background: radial-gradient(circle, #6d4aff 0, transparent 70%);
  animation-delay: -8s;
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(28px, -22px) scale(1.12); }
}

/* Glas-Karte über der Bühne. */
.auth-box {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px; padding: 0; overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 60px -12px rgba(28, 16, 70, .55), 0 2px 8px rgba(28, 16, 70, .25);
  animation: authIn .5s cubic-bezier(.21, 1, .35, 1) both;
}
@keyframes authIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Festliche Kopfleiste mit animiertem Markenverlauf + sanftem Glanz. */
.auth-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #6d4aff 0%, #9b5cff 45%, #ff5d8f 100%);
  background-size: 200% 200%;
  animation: heroShift 9s ease infinite;
  color: #fff;
  padding: 30px 30px; display: flex; align-items: center; gap: 15px;
}
.auth-hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 85% -20%, rgba(255, 255, 255, .35) 0, transparent 50%);
  pointer-events: none;
}
@keyframes heroShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.auth-hero-text { display: flex; flex-direction: column; gap: 3px; position: relative; z-index: 1; }
.auth-brand {
  font-size: 24px; font-weight: 800; letter-spacing: -.02em;
}
.auth-tagline { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .92); }
.auth-body { padding: 28px 30px 30px; }
.auth-body h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.01em; }

/* Größere, modern gerundete Eingabefelder mit weichem Fokus-Glow. */
.auth-body label { margin-top: 16px; font-weight: 600; }
.auth-body input {
  padding: 13px 15px; border-radius: 12px; border: 1.5px solid var(--line);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-body input:focus,
.auth-body input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(109, 74, 255, .18);
}

.auth-actions { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.auth-actions > button { flex: 1 1 auto; padding: 13px 16px; border-radius: 12px; }
/* Primärer CTA: Markenverlauf, Schatten, sanftes Anheben beim Hover. */
.auth-actions #btn-login {
  background: var(--party-gradient); color: #fff;
  box-shadow: 0 10px 24px -6px rgba(109, 74, 255, .55);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.auth-actions #btn-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -6px rgba(109, 74, 255, .65);
  filter: brightness(1.04);
}
.auth-actions #btn-login:active { transform: translateY(0); }
.auth-actions #btn-register {
  background: rgba(109, 74, 255, .08); color: var(--accent);
  border: 1.5px solid rgba(109, 74, 255, .25);
}
.auth-actions #btn-register:hover { background: rgba(109, 74, 255, .14); }
/* Dezenter Text-Button („← Zurück zum Login"). */
.linklike {
  margin-top: 14px; padding: 6px 4px;
  background: none; border: none; color: var(--accent);
  font-size: 14px; cursor: pointer; text-align: left;
}
.linklike:hover { text-decoration: underline; }
.linklike:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
#register-extra textarea { width: 100%; }

.logo-chip {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--party-gradient); font-size: 18px;
}
/* Größeres Logo-Chip in der Login-Hero (auf dem Verlauf: heller Glas-Look). */
.logo-chip-lg {
  position: relative; z-index: 1;
  width: 54px; height: 54px; border-radius: 16px; font-size: 30px;
  background: rgba(255, 255, 255, .24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}

/* Nur für Screenreader sichtbar (visuell ausgeblendet, aber vorlesbar). */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- App-Shell ------------------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* --- Sidebar --------------------------------------------------------- */
.sidebar {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow-y: auto;
  background: var(--sidebar); color: #fff;
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px 16px;
}
.sidebar .brand {
  font-size: 18px; font-weight: 800; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px;
  /* Als <button> gestaltet: keine Default-Optik, voll klickbar. */
  background: none; border: 0; padding: 4px 2px; margin: 0;
  color: inherit; font-family: inherit; cursor: pointer; width: 100%;
  border-radius: 10px;
}
.sidebar .brand:hover { opacity: .9; }
.sidebar .brand:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.event-switcher {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-md);
  padding: 12px;
}
.event-switcher .es-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: rgba(255, 255, 255, .7);
}
.event-switcher .es-current {
  font-weight: 700; margin: 2px 0 10px; font-size: 14px; word-break: break-word;
}
.es-new {
  width: 100%; background: rgba(255, 255, 255, .16); color: #fff;
}
.es-new:hover { background: rgba(255, 255, 255, .26); }
.es-select {
  width: 100%; margin-top: 6px; padding: 8px 10px; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .18);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.es-select option { color: var(--ink); }  /* Dropdown-Liste auf hellem Grund lesbar */
.es-select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: transparent; color: rgba(255, 255, 255, .85);
  font-weight: 600; padding: 11px 12px; border-radius: 10px;
  position: relative;
}
.nav-item:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.nav-item[aria-current="true"] {
  background: rgba(255, 255, 255, .16); color: #fff;
}
/* Aktiv-Markierung zusätzlich über einen Balken (Farbe nicht alleiniger Träger) */
.nav-item[aria-current="true"]::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 4px; border-radius: 0 4px 4px 0; background: var(--accent-2);
}
.nav-ico { font-size: 16px; line-height: 1; }
/* Kleines "bald/in Arbeit"-Label – Farbe + Text (nicht nur Farbe als Träger) */
.nav-badge {
  display: inline-block; margin-left: 8px;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  background: var(--accent-2); color: #fff;
  vertical-align: middle; letter-spacing: .02em;
}
.nav-item .nav-badge { margin-left: auto; }
/* Gruppierung: Catering/Gaeste als Oberpunkt + Sub-Items.
   Sub-Items: leicht eingerueckt, schwaecherer Hover, dezenter aktiv-Stil --
   semantisch klar als Unterpunkt erkennbar ohne ueberflutete UI. */
.nav-group { display: flex; flex-direction: column; gap: 2px;
  border-radius: 10px; padding: 2px; }
.nav-sub { padding-left: 28px; font-weight: 500; font-size: 14px;
  color: rgba(255, 255, 255, .72); }
.nav-sub:hover { color: #fff; }
.nav-sub[aria-current="true"] { background: rgba(255, 255, 255, .12); }
.nav-sub[aria-current="true"]::before { background: var(--accent-2); width: 3px; }

.sidebar-foot {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.sidebar-foot .acct { display: flex; flex-direction: column; min-width: 0; }
.sidebar-foot .muted { color: rgba(255, 255, 255, .7); }
.sidebar-foot strong { color: #fff; font-size: 13px; word-break: break-all; }
.sidebar-foot #btn-logout { align-self: flex-start; }
/* Dezenter Sidebar-Link (z.B. Datenschutzerklärung) – passt zur dunklen Sidebar */
.sidebar-link {
  font-size: 12px; color: rgba(255, 255, 255, .55); text-decoration: none;
  border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 10px; margin-top: 2px;
}
.sidebar-link:hover { color: #fff; text-decoration: underline; }
.sidebar-link:focus-visible { outline: 2px solid rgba(255, 255, 255, .6); outline-offset: 2px; border-radius: 4px; }

/* --- Inhalt + Topbar ------------------------------------------------- */
.content { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 14px 24px;
}
.topbar h1 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.nav-toggle {
  display: none; background: var(--bg); color: var(--ink);
  font-size: 18px; padding: 8px 12px;
}
.phase-badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: #f3f0ff; color: var(--accent);
}

/* Inhalts-„main" überschreibt das alte zentrierte Grid-Layout */
main {
  max-width: 100%; margin: 0;
  padding: 28px 24px 64px;
  display: block;
}
.section { display: grid; gap: 20px; }
/* Höhere Spezifität als .section, damit ausgeblendete Sektionen wirklich weg sind */
.section.hidden { display: none; }

/* --- Hero (Übersicht) ------------------------------------------------ */
.hero-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--party-banner); color: #fff;
  border-radius: var(--radius-lg); padding: 22px 24px;
  box-shadow: var(--shadow-lg);
}
.hero-card .hero-emoji { font-size: 40px; line-height: 1; }
.hero-card h2 { margin: 0; font-size: 22px; color: #fff; }
.hero-card .hero-meta { margin: 4px 0 0; color: rgba(255, 255, 255, .9); font-size: 14px; }

.card { box-shadow: var(--shadow-sm); }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.card-head h2 { margin: 0; }
.card-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.card-foot { margin-top: 14px; }
.table-wrap { overflow-x: auto; }

.quick-actions .qa-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* --- Leere Zustände einladend --------------------------------------- */
.empty-state {
  text-align: center; padding: 40px 24px;
  background: var(--card); border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
}
.empty-state .empty-emoji { font-size: 46px; line-height: 1; }
.empty-state h2 { margin: 12px 0 6px; }
.empty-state p { max-width: 460px; margin: 0 auto 18px; }
/* Schlanke Variante: Neuanlage unter den Event-Kacheln. */
.empty-state--compact { padding: 22px 24px; }
.empty-state--compact p { margin-bottom: 12px; }

/* Event-Auswahlkacheln auf der Übersicht: etwas luftiger als Profil-Kacheln. */
.event-tile { min-height: 118px; cursor: pointer; }

/* Dashboard-Raster: Event-Details + Gäste-Vorschau nebeneinander, mobil unterm. */
.dash-grid {
  display: grid; gap: 16px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* Event-Eckdaten als zweispaltige Definitionsliste. */
.detail-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 12px 0 0; }
.detail-list dt { color: var(--muted); font-size: 14px; }
.detail-list dd { margin: 0; font-weight: 600; }
/* Gäste-Vorschau: Name links, Status-Badge rechts. */
.gp-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line);
}
.gp-row:last-of-type { border-bottom: 0; }
.gp-name { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-rest { margin: 10px 0 0; }
/* Letzte Antworten: Zeitangabe zwischen Name und Status-Badge. */
.la-zeit { font-size: 13px; white-space: nowrap; flex: 0 0 auto; }
/* Hinweis, wann zuletzt aktualisiert wurde (über den Schnellaktionen). */
.refresh-info { margin: -6px 0 14px; font-size: 13px; }
.refresh-info:empty { display: none; }

/* --- Modal / Dialog (natives <dialog>: Fokus-Falle + ESC gratis) ----- */
.modal.modal-sm { width: min(440px, calc(100vw - 32px)); }
.kie-diaet { border: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.kie-diaet > legend { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.modal {
  border: none; padding: 0; background: transparent;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -24px rgba(31, 36, 48, .5);
}
.modal::backdrop { background: rgba(31, 36, 48, .5); backdrop-filter: blur(2px); }
.modal[open] { animation: modal-in .18s ease; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-card {
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 48px);
  background: var(--card); border-radius: var(--radius-lg);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.modal-head h2 { margin: 0; font-size: 18px; }
.modal-x {
  background: var(--bg); color: var(--ink);
  width: 40px; height: 40px; padding: 0; border-radius: 9px; font-size: 15px;
}
.modal-body { padding: 18px 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Footer bleibt beim Scrollen sichtbar – „Speichern" immer erreichbar. */
.modal-foot {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 16px 22px; border-top: 1px solid var(--line);
  background: var(--card); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* --- Mobile: Dialog als Vollbild-Sheet, Footer-Buttons gestapelt ------ */
@media (max-width: 600px) {
  .modal {
    width: 100vw; max-width: 100vw; max-height: 100dvh;
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; margin: 0;
    border-radius: 16px 16px 0 0;
  }
  .modal-card { max-height: 100dvh; border-radius: 16px 16px 0 0; }
  .modal-foot {
    flex-direction: column-reverse; align-items: stretch; border-radius: 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .modal-foot button { width: 100%; }
}

/* --- Scrim (mobile Sidebar-Overlay) --------------------------------- */
.scrim { display: none; position: fixed; inset: 0; background: rgba(31, 36, 48, .45); z-index: 40; }

/* --- Responsive: Sidebar wird off-canvas ---------------------------- */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--sidebar-w);
    transform: translateX(-100%); transition: transform .2s ease; z-index: 50;
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .scrim { display: block; }
  .nav-toggle { display: inline-flex; align-items: center; }
  main { padding: 20px 16px 56px; }
  .topbar { padding: 12px 16px; }
}

/* (Der Datenschutz-Link liegt jetzt in .sidebar-foot, siehe oben.) */

/* Statische Rechtstexte (Datenschutzerklärung) */
.legal-page { background: var(--bg); color: var(--ink); }
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
.legal-back { color: var(--accent); text-decoration: none; font-weight: 600; }
.legal-back:hover { text-decoration: underline; }
.legal { padding: 28px; line-height: 1.6; }
.legal h1 { margin-top: 0; }
.legal h2 { margin-top: 28px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.legal h3 { margin-top: 18px; font-size: 16px; }
.legal ul { padding-left: 20px; }
.legal li { margin: 4px 0; }
.legal code { background: var(--bg); padding: 1px 5px; border-radius: 6px; font-size: 13px; }
.legal-stand { margin-top: 28px; }

/* Phase C: über Rezepte abgedeckte Essens-Kategorie (nicht generisch kaufen) */
.shop-deckung {
  margin: 4px 0 10px; padding: 8px 12px; border-radius: 10px;
  background: var(--ok-bg); color: var(--ink); font-size: 13px; border: 1px solid var(--ok-border);
}
tr.abgedeckt td { color: var(--muted); background: color-mix(in srgb, var(--ok) 6%, #fff); }
tr.abgedeckt td:nth-child(3) { text-decoration: none; font-weight: 600; }

/* Deaktivierte Benutzer in der Verwaltung dezent abheben */
tr.planer-gesperrt td { opacity: .6; }

/* KI-Verbindungstest-Ergebnis */
.ai-test-result { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 13px; }
.ai-test-result.ai-ok { background: var(--ok-bg); color: var(--ink); border: 1px solid var(--ok-border); }
.ai-test-result.ai-fehler { background: #fef2f2; color: var(--ink); border: 1px solid var(--no); }

/* Buffet-Vorlagen in der "Dein Buffet"-Seitenleiste */
.rz-vorlagen { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.rz-vorlagen h4 { margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); }
.rz-vorlagen select { width: 100%; margin-bottom: 6px; }
.rz-vorlagen-actions { display: flex; gap: 6px; margin-bottom: 6px; }
.rz-vorlagen-actions button { flex: 1; }
.rz-vorlagen #bv-save { width: 100%; }

/* === Catering-Modus-Auswahl OBEN (Welle B) ========================= */
/* Drei grosse Kacheln steuern die gesamte Catering-Seite. Aktive Kachel
   bekommt den Akzent-Lila-Rahmen + leichten Shadow -- soll als "Schalter"
   wirken, nicht als Button. */
.catering-top { margin-bottom: 18px; }
.catering-top h2 { margin-top: 0; }
.catering-modus-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-top: 8px;
}
.modus-kachel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left; padding: 18px;
  border: 2px solid var(--line); border-radius: 16px; background: var(--card);
  color: var(--ink); cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .08s, background .15s;
}
.modus-kachel:hover { transform: translateY(-2px); border-color: var(--accent); }
.modus-kachel.is-aktiv, .modus-kachel[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 4px 16px rgba(109, 74, 255, 0.12);
  background: linear-gradient(180deg, rgba(109, 74, 255, 0.04) 0%, var(--card) 100%);
}
.modus-kachel-emoji { font-size: 30px; line-height: 1; }
.modus-kachel-titel { font-size: 16px; font-weight: 700; }
.modus-kachel-desc { font-size: 13px; color: var(--muted); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .modus-kachel { transition: none; } }

/* Pauschal-Card: Personen × Pauschalpreis = Gesamtkosten */
.pauschal-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end;
  margin: 10px 0 6px;
}
@media (max-width: 640px) { .pauschal-grid { grid-template-columns: 1fr; } }
.pauschal-input-row { display: flex; flex-direction: column; gap: 6px; }
.pauschal-input-row label { font-size: 14px; color: var(--muted); }
.pauschal-input-row input[type="number"] {
  font-size: 24px; font-weight: 700; padding: 10px 14px;
  border: 2px solid var(--line); border-radius: 12px; background: var(--card);
  color: var(--ink);
}
.pauschal-input-row input[type="number"]:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.18);
}
.pauschal-summe {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(109, 74, 255, 0.08), rgba(255, 93, 143, 0.05));
  border-radius: 12px; border: 1px solid var(--line);
}
.pauschal-summe-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.pauschal-summe-wert { font-size: 28px; font-weight: 800; color: var(--accent); }
.pauschal-summe-formel { font-size: 13px; }
.small { font-size: 12px; }

/* Cards, die im Pauschal-Modus ausgeblendet werden (Catering-Berechnung,
   Trinker-Mix, Preis-Tier, Buffet-Designer-Vorschau). Eigene Klasse, damit
   die "hidden"-Klasse fuer "kein Event"-Zustaende unberuehrt bleibt. */
.hidden-by-modus { display: none !important; }

/* Nav-Item gesperrt: ausgegraut + Cursor signalisiert "nicht klickbar" */
.nav-item.is-locked { opacity: 0.45; cursor: not-allowed; }
.nav-item.is-locked:hover { background: transparent; }

/* Pauschal: "Getraenke inkludiert"-Toggle */
.pauschal-toggle { margin-top: 14px; padding: 10px 14px;
  background: var(--bg); border-radius: 10px; border: 1px solid var(--line); }
.pauschal-toggle .switch-label { display: flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: 14px; color: var(--ink); }
.pauschal-toggle input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer;
  accent-color: var(--accent); }
.pauschal-toggle p { margin: 4px 0 0 28px; }

/* Pauschal: Anbieter-Dropdown (Adressbuch-Auswahl) */
.pauschal-anbieter { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.pauschal-anbieter .anbieter-head { display: flex; align-items: center;
  justify-content: space-between; gap: 8px; }
.pauschal-anbieter select { width: 100%; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); font-size: 14px; }

/* Anbieter-Suche (OpenStreetMap, Welle F #78) */
.abs-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end;
  padding: 12px; background: var(--bg); border-radius: 10px; margin-bottom: 10px; }
.abs-toolbar .abs-opt { display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--muted); }
.abs-toolbar select, .abs-toolbar input {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); font-size: 14px; color: var(--ink);
}
.abs-toolbar #abs-suchen { padding: 8px 18px; }
.abs-attrib { margin: 4px 0 14px; }
.abs-attrib a { color: var(--accent); }
.abs-treffer { display: flex; gap: 12px; justify-content: space-between;
  align-items: center; padding: 10px 14px; margin-bottom: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.abs-treffer.ist-bekannt { opacity: 0.6; background: var(--bg); }
.abs-treff-haupt { display: flex; gap: 12px; align-items: flex-start; flex: 1; min-width: 0; }
.abs-emoji { font-size: 22px; line-height: 1; }
.abs-treff-name { font-weight: 600; color: var(--ink); }
.abs-treff-actions { white-space: nowrap; }
.abs-bekannt-badge { font-size: 12px; color: var(--ok, #16a34a); font-weight: 600; }

/* Anbieter-Adressbuch in den Einstellungen */
.anbieter-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.anbieter-eintrag { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 12px 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; }
.anbieter-haupt { display: flex; gap: 12px; align-items: flex-start; flex: 1; }
.anbieter-typ { font-size: 22px; line-height: 1; }
.anbieter-name { font-weight: 600; color: var(--ink); }
.anbieter-aktionen { display: flex; gap: 6px; flex-wrap: wrap; }
.sterne-anzeige { color: #f59e0b; font-size: 14px; letter-spacing: 1px; margin-left: 6px; }

/* Sterne-Eingabe im Anbieter-Editor (Welle F #79) */
.ab-bewertung-row { padding: 12px 14px; margin-top: 8px;
  background: var(--bg); border-radius: 10px; border: 1px solid var(--line); }
.ab-bewertung-row > label { display: block; margin-bottom: 6px; font-size: 13px; }
.sterne-eingabe { display: flex; gap: 4px; align-items: center; margin-bottom: 8px; }
.sterne-eingabe .stern { font-size: 24px; line-height: 1; padding: 4px 8px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: #cbd5e1; cursor: pointer; transition: color .12s; }
.sterne-eingabe .stern:hover, .sterne-eingabe .stern.aktiv { color: #f59e0b; }
.sterne-eingabe .stern:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sterne-eingabe #ab-sterne-reset { margin-left: 8px; }
.ab-bewertung-row textarea { width: 100%; padding: 8px 12px; font-family: inherit;
  font-size: 13px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); resize: none; overflow: hidden; min-height: 50px; }
/* ab-notiz analog auto-wachsen (Welle G) */
#ab-notiz { resize: none; overflow: hidden; min-height: 70px; }

/* Schnellzugriff-Leiste: erkannte URLs/Tel/E-Mail aus Textarea-Inhalt */
.text-links-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: 6px; padding: 6px 10px;
  background: rgba(109, 74, 255, 0.05); border-radius: 8px;
  border: 1px solid rgba(109, 74, 255, 0.18); }
.text-link-chip { display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; font-size: 12px; font-weight: 500;
  background: var(--card); color: var(--accent); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px;
  transition: background .12s, color .12s, border-color .12s; }
.text-link-chip:hover { background: var(--accent); color: #fff;
  border-color: var(--accent); }
@media (max-width: 500px) {
  .anbieter-eintrag { flex-direction: column; align-items: stretch; }
}

/* Pauschal-Kommentar (Anbieter-Notizen) */
.pauschal-kommentar { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.pauschal-kommentar textarea {
  width: 100%; padding: 10px 14px; font-family: inherit; font-size: 14px;
  line-height: 1.45; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
  /* Welle G: Auto-Resize via JS -- kein manuelles Resizen mehr noetig,
     overflow:hidden verhindert den Scrollbalken-Aufblitzer. */
  resize: none; overflow: hidden; min-height: 70px;
}
.pauschal-kommentar textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.18);
}

/* Alte .catering-modus-/.modus-card-Klassen bleiben fuer Backward-Compat
   (z.B. wenn der Browser noch SW-Cache mit altem HTML hat). */
.catering-modus { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px; }
.modus-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  padding: 18px; border: 2px solid var(--line); border-radius: 16px; background: var(--card);
  color: var(--ink); cursor: pointer;
}
.modus-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.modus-card .modus-emoji { font-size: 30px; line-height: 1; }
.modus-card .modus-titel { font-size: 16px; font-weight: 700; }
.modus-card .modus-desc { font-size: 13px; color: var(--muted); font-weight: 400; }
.bald-hinweis { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--bg); border: 1px dashed var(--line); color: var(--muted); font-size: 14px; }

/* ===== Menükarte (Vorschau + Druck) ================================= */
.modal.modal-lg { width: min(900px, calc(100vw - 32px)); }
.mk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.mk-chips { display: flex; align-items: center; gap: 6px; }
.mk-chip-label { font-size: 12px; color: var(--muted); }
.chip { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--ink); font-size: 13px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#mk-print { margin-left: auto; }
.mk-stage { background: var(--bg); border-radius: 12px; padding: 18px; display: flex; justify-content: center; }

/* Karte – Basis */
.mk-card { background: #fff; width: 100%; max-width: 600px; padding: 34px 40px; border-radius: 10px;
  box-shadow: 0 2px 14px -6px rgba(31,36,48,.3); color: #1f2430;
  /* Themen-Hintergründe (Sepia/Tafel) auch im Druck/PDF mitdrucken. */
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.mk-empty { text-align: center; padding: 40px 0; }
.mk-head { text-align: center; margin-bottom: 18px; }
.mk-head h1 { margin: 0; font-size: 30px; line-height: 1.15; }
.mk-sub { margin: 6px 0 0; font-style: italic; color: #555; }
.mk-datum { margin: 8px 0 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #888; }
.mk-gang { margin: 18px 0; }
.mk-gang h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  text-align: center; margin: 0 0 8px; }
.mk-gang ul { list-style: none; margin: 0; padding: 0; }
.mk-dish { margin: 7px 0; text-align: center; }
.mk-dish-name { font-size: 17px; }
.mk-hinweis { display: block; font-size: 13px; color: #777; font-style: italic; }
.mk-badge { display: inline-block; font-size: 10px; font-weight: 700; border: 1px solid currentColor;
  border-radius: 4px; padding: 0 3px; vertical-align: middle; text-decoration: none; color: #2e7d32; }
.mk-zutaten { list-style: disc; text-align: left; max-width: 320px; margin: 4px auto 0; padding-left: 20px;
  font-size: 12px; color: #666; }
.mk-foot { margin-top: 22px; text-align: center; border-top: 1px solid #eee; padding-top: 14px; }
.mk-fuss { margin: 0; font-style: italic; }
.mk-legende { margin: 8px 0 0; font-size: 11px; color: #999; }

/* Theme: Festliche Tafel (serif, dezent) */
.mk-theme-tafel { font-family: Georgia, "Times New Roman", serif; }
.mk-theme-tafel .mk-head { border-bottom: 2px solid #e7c200; padding-bottom: 14px; }

/* Theme: Restaurantkarte (creme/anthrazit, elegant) */
.mk-theme-restaurant { font-family: Georgia, "Times New Roman", serif; background: #fffdf7; border: 1px solid #e9e2cf; }
.mk-theme-restaurant .mk-head h1 { letter-spacing: .02em; }
.mk-theme-restaurant .mk-gang h3 { color: #8a6d3b; }
.mk-theme-restaurant .mk-gang { border-bottom: 1px dotted #d8cdb0; padding-bottom: 12px; }
.mk-theme-restaurant .mk-gang:last-of-type { border-bottom: none; }

/* Druck: nur die Karte, alles andere ausblenden (Vorschau = PDF). */
@media print {
  body * { visibility: hidden !important; }
  #menukarte-preview, #menukarte-preview * { visibility: visible !important; }
  #menukarte-preview { position: fixed; inset: 0; padding: 0; background: #fff; display: block; }
  .mk-stage { padding: 0; background: #fff; }
  .mk-card { box-shadow: none; max-width: 100%; border: none; }
  .no-print { display: none !important; }
  .modal::backdrop { display: none !important; }
  @page { size: A4; margin: 16mm; }
}

/* ===== Buffet-Wizard ================================================ */
.wiz-step { margin-top: 0; }
.wiz-opts { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.wiz-gang { margin: 10px 0; }
.wiz-gang h4 { margin: 0 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); }
.wiz-gang ul { margin: 0; padding-left: 20px; }
.wiz-gang li { margin: 2px 0; }

/* Theme: Schatzkarte (Kinder) – Pergament/Sepia, verspielt */
.mk-theme-schatzkarte { font-family: "Comic Sans MS", "Segoe Print", system-ui, sans-serif;
  background: #f5ecd6; border: 3px dashed #b08d57; color: #4a3a1f; }
.mk-theme-schatzkarte .mk-head h1 { color: #8a5a2b; }
.mk-theme-schatzkarte .mk-gang h3 { color: #b5651d; }
.mk-theme-schatzkarte .mk-foot { border-top: 2px dashed #b08d57; }

/* Theme: Vintage – vergilbtes Album, nostalgisch */
.mk-theme-vintage { font-family: "Courier New", Courier, monospace; background: #f7f1e1;
  border: 1px solid #d8c9a3; color: #4b4334; }
.mk-theme-vintage .mk-head { border-bottom: 1px solid #b9a87f; padding-bottom: 12px; }
.mk-theme-vintage .mk-head h1 { font-size: 26px; }
.mk-theme-vintage .mk-gang h3 { color: #8a7a52; }

/* Theme: Streetfood – Tafel-Optik (dunkel, Kreide) */
.mk-theme-streetfood { font-family: "Segoe UI", system-ui, sans-serif; background: #23262b;
  color: #f3f1e9; border: 1px solid #000; }
.mk-theme-streetfood .mk-head h1 { color: #ffd54a; letter-spacing: .04em; }
.mk-theme-streetfood .mk-sub, .mk-theme-streetfood .mk-hinweis, .mk-theme-streetfood .mk-datum,
.mk-theme-streetfood .mk-legende { color: #c7c3b6; }
.mk-theme-streetfood .mk-gang h3 { color: #6fd08c; }
.mk-theme-streetfood .mk-foot { border-top: 1px solid #444; }
.mk-theme-streetfood .mk-badge { color: #6fd08c; }
.mk-theme-streetfood .mk-zutaten { color: #b7b3a6; }

/* Kinderfreundlich-Tag auf Rezeptkarten besonders hervorheben */
.rz-tag-kids { background: #fff4d6; border-color: #f0c64a; color: #8a5a00; font-weight: 600; }

/* Datei-Import-Button (Label statt input, sieht aus wie Ghost-Button) */
.btn-fileimport { display: inline-block; padding: 9px 14px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; cursor: pointer; }
.btn-fileimport:hover { border-color: var(--accent); color: var(--accent); }
.recipes-import-mode { display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted); cursor: pointer; margin-left: 6px; }
.recipes-import-mode input { margin: 0; }

/* ===== Einkauf & Budget: kompakteres Layout ==================== */
/* Eingabe-Bar: Posten breit, Menge/Einheit/Preis schmal, Button gleich daneben. */
.shop-add {
  display: grid; gap: 12px; align-items: end; margin-bottom: 14px;
  grid-template-columns: minmax(220px, 1fr) 100px 120px 130px auto;
}
.shop-add > div { min-width: 0; }
.shop-add input { width: 100%; }
.shop-add label { margin: 0 0 4px; }
.shop-add button { height: 44px; align-self: end; padding: 0 18px; }
@media (max-width: 700px) {
  .shop-add { grid-template-columns: 1fr; }
  .shop-add button { width: 100%; }
}

/* === Einkauf: Lösch-Button + Versteckt-Chips (Welle G) =============== */
.shop-edit.shop-del { margin-left: 4px; opacity: 0.6; }
.shop-edit.shop-del:hover { opacity: 1; color: var(--no); }

.shop-versteckt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 6px 0; padding: 6px 12px;
  background: rgba(148, 163, 184, 0.08); border-radius: 8px;
  border: 1px dashed var(--line); }
.versteckt-chip { padding: 3px 10px; font-size: 12px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; transition: background .12s, border-color .12s; }
.versteckt-chip:hover { background: var(--accent); color: #fff;
  border-color: var(--accent); }
.versteckt-chip:hover .muted { color: rgba(255,255,255,0.8); }

/* Luecken-Banner in Einkauf & Budget: dezenter orangener Hinweis */
.shop-luecken { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 6px 0; padding: 8px 12px;
  background: rgba(217, 119, 6, 0.08); border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 8px; font-size: 13px; color: var(--ink); }
.shop-luecken .luecken-zahl { display: inline-block; padding: 2px 10px;
  background: #d97706; color: #fff; border-radius: 999px;
  font-weight: 700; font-variant-numeric: tabular-nums; }
.shop-luecken button { margin-left: auto; }

/* === Einkauf & Budget: Filter + Suche (Welle E #76) =================== */
.shop-filter { display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; margin: 8px 0 4px; }
.shop-filter-pills { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.shop-pill { padding: 6px 12px; font-size: 13px; font-weight: 500;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap; }
.shop-pill:hover { color: var(--ink); border-color: var(--accent); }
.shop-pill.is-aktiv { background: var(--accent); color: #fff; border-color: var(--accent); }
#shop-suche { padding: 8px 14px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); min-width: 200px; flex: 0 0 220px; }
#shop-suche:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.15); }
@media (max-width: 600px) { #shop-suche { flex: 1 1 100%; } }

/* Tools (Preise schaetzen / leeren) rechts ueber der Tabelle */
.shop-tools { display: flex; justify-content: flex-end; gap: 8px; margin: 4px 0 12px; flex-wrap: wrap; }

/* Deckungs-Hinweis dezent: Akzent-Strich links statt grosser gruener Banner */
.shop-deckung {
  font-size: 13px; line-height: 1.5; color: var(--muted);
  margin: 0 0 12px; padding: 8px 12px;
  background: var(--bg); border-left: 3px solid var(--ok);
  border-radius: 0 6px 6px 0;
}
.shop-deckung strong { color: var(--ink); font-weight: 600; }

/* Tabelle: fixed layout + explizite Spaltenbreiten -> beruhigte Optik */
.shop-table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.shop-table col.c-check { width: 36px; }
.shop-table col.c-kat   { width: 110px; }
.shop-table col.c-name  { width: auto; min-width: 0; }
.shop-table col.c-menge { width: 110px; }
.shop-table col.c-preis { width: 130px; }
.shop-table col.c-kost  { width: 130px; }
.shop-table th, .shop-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.shop-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); font-weight: 600; text-align: left; }
.shop-table td.num, .shop-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Posten-Name: nur an Wortgrenzen umbrechen (kein anywhere - das stapelt Buchstaben) */
.shop-table td { word-break: normal; overflow-wrap: break-word; }
/* Kategorie-Pille (statt nackter Text) */
.shop-kat { display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line); font-size: 11px;
  color: var(--muted); text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap; }
/* Kleines Edit-Icon in der Kosten-Zelle (statt eigener Aktionsspalte) */
.shop-edit { background: none; border: 0; padding: 4px 6px; margin-left: 8px;
  color: var(--muted); cursor: pointer; border-radius: 6px; font-size: 14px; line-height: 1; }
.shop-edit:hover { color: var(--accent); background: var(--bg); }
.shop-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Mobil: Tabelle schmaler */
@media (max-width: 700px) {
  .shop-table col.c-kat   { width: 90px; }
  .shop-table col.c-menge, .shop-table col.c-preis, .shop-table col.c-kost { width: 110px; }
}

/* ===== Einkauf & Budget: Sticky-Status-Sidebar (Phase 2) ============ */
/* Desktop: 2-Spalten-Grid mit klebriger Status-Sidebar rechts.
   Mobil/iPad portrait: einspaltig, Sidebar wandert unter den Hauptbereich. */
#shop-card { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) {
  #shop-card { grid-template-columns: minmax(0, 1fr) 300px; }
}
.shop-main { min-width: 0; }              /* verhindert Grid-Overflow durch breite Tabelle */
.shop-main > h2 { margin-top: 0; }

.shop-status {
  display: flex; flex-direction: column; gap: 16px;
  padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
@media (min-width: 1200px) {
  .shop-status { position: sticky; top: 16px; align-self: start; }
}
.shop-status-block + .shop-status-block { border-top: 1px solid var(--line); padding-top: 14px; }
.shop-status-titel {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent); margin: 0 0 8px;
}
/* Fortschritt: Text oben, Balken darunter */
.shop-status .shop-progress { margin: 0; }
.shop-status .shop-progress-text { margin: 0 0 6px; font-size: 13px; }
.shop-status-leer { margin: 0; font-size: 13px; }
/* Budget-Block in der Sidebar enger gesetzt */
.shop-status .budget { margin-top: 0; border-top: 0; padding-top: 0; }
.shop-status .budget > div { font-size: 13px; }
.shop-status .budget-ziel { margin-top: 12px; flex-wrap: wrap; }
.shop-status .budget-ziel label { width: 100%; }
.shop-status .budget-ziel input { width: 120px; }
/* Export-Buttons in der Sidebar full-width gestapelt fuer kompakte Optik */
.shop-status .shop-export { flex-direction: column; gap: 6px; margin-top: 0; }
.shop-status .shop-export button { width: 100%; }
/* Druck: Sidebar ausblenden, Hauptbereich nimmt die volle Breite */
@media print {
  #shop-card { display: block; }
  .shop-status { display: none !important; }
}

/* ===== Rezepte verwalten (Einstellungen) ===================== */
.rz-admin-filter { margin-top: 8px; }
.ra-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ra-zeile { display: flex; align-items: center; gap: 16px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
  transition: border-color .15s, background .15s; }
.ra-zeile:hover { border-color: var(--accent); background: rgba(109, 74, 255, .03); }
.ra-zeile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.ra-meta { flex: 1 1 auto; min-width: 0; }
.ra-name { font-weight: 600; }
.ra-sub { font-size: 12px; margin-top: 2px; }
.ra-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ra-tag { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line); color: var(--muted);
  text-transform: uppercase; letter-spacing: .03em; }
.ra-tag-global { background: rgba(109, 74, 255, .08); border-color: var(--accent); color: var(--accent); }
.ra-tag-eigen { background: rgba(22, 163, 74, .08); border-color: var(--ok); color: var(--ok); }
.ra-actions { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 600px) {
  .ra-zeile { flex-direction: column; align-items: stretch; }
  .ra-actions { justify-content: flex-end; }
}

/* ===== Einstellungen-Untermenue ================================== */
/* Tab-Leiste oben in den Einstellungen: kein endloses Runter-Scrollen mehr,
   je Bereich (Mein Konto / KI / Rezepte / Bibliothek / Benutzer / Antraege)
   ein eigener Tab. Rollen-versteckte Bereiche (.hidden) tauchen nicht auf. */
.settings-nav {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 16px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  position: sticky; top: 0; z-index: 5;
}
.settings-tab {
  padding: 8px 14px; font-size: 14px; font-weight: 500;
  background: transparent; color: var(--muted); border: 0; border-radius: 8px;
  cursor: pointer; transition: background .15s, color .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.settings-tab:hover { background: rgba(109, 74, 255, .06); color: var(--ink); }
.settings-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-tab.is-active {
  background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.settings-tab.is-active:hover { background: var(--accent); color: #fff; }
/* Panes: per Default versteckt, nur der aktive ist sichtbar. .hidden
   (rollen-basierte Sichtbarkeit) ueberschreibt is-active und bleibt versteckt. */
.settings-pane { display: none; }
.settings-pane.is-active { display: block; }
.settings-pane.hidden { display: none !important; }
@media (max-width: 600px) {
  .settings-nav { flex-direction: column; align-items: stretch; }
  .settings-tab { justify-content: flex-start; }
}

/* ===== Sitz-Kontextmenue (Rechtsklick auf Sitz) =================== */
/* Schwebt als HTML-Overlay ueber dem Konva-Canvas. Position via JS (top/left).
   Kein inline-Style ueber JS (CSP-konform: alle Anordnung via Klasse). */
.sitz-kontext {
  position: fixed; z-index: 200;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 180px; padding: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
  font-size: 13px;
}
.sitz-kontext button {
  padding: 8px 12px; text-align: left;
  background: transparent; border: 0; border-radius: 6px;
  color: var(--ink); cursor: pointer; font: inherit;
}
.sitz-kontext button:hover { background: rgba(109, 74, 255, .08); }
.sitz-kontext button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ===== Event-Wizard (2 Schritte beim Anlegen) ================== */
.ev-step.hidden { display: none; }
.ev-step-frage { font-size: 18px; font-weight: 700; margin: 4px 0 4px; color: var(--ink); }
.ev-step-hint { margin: 0 0 16px; }
.ev-step-skip { margin-top: 20px; text-align: center; border-top: 1px solid var(--line); padding-top: 14px; }
.ev-vorlage-kontext { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 8px 12px; background: var(--bg); border-radius: 8px;
  font-size: 13px; }
/* Inline-Link-Button: sieht aus wie ein Link, ist aber ein <button> */
.linkbutton { background: none; border: 0; padding: 0; color: var(--accent);
  text-decoration: underline; cursor: pointer; font: inherit; }
.linkbutton:hover { color: var(--ink); }
.linkbutton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* RSVP: Bereits zugesagt - Bestaetigungs-Karte statt Formular. */
.rsvp-bestaetigung { background: rgba(22, 163, 74, .06); border: 1px solid rgba(22, 163, 74, .25);
  border-radius: 12px; padding: 16px 18px; margin-top: 18px; }
.rsvp-bestaetigung-titel { font-size: 18px; font-weight: 700; color: var(--ok); margin: 0 0 8px; }
.rsvp-bestaetigung p { margin: 4px 0; line-height: 1.5; }

/* Gesperrte Felder (z.B. Personenzahl nach Zusage) dezent visuell markieren. */
input.gesperrt, input.gesperrt:focus { background: #f3f3f5; color: var(--muted); cursor: not-allowed; }