:root {
  --ink: #16292f;
  --muted: #63767c;
  --navy: #153b4b;
  --navy-2: #1e5367;
  --gold: #f4c56a;
  --bg: #eef3f4;
  --surface: #ffffff;
  --line: #dce5e7;
  --success: #2d7a60;
  --danger: #a84444;
  --shadow: 0 18px 48px rgba(19, 51, 62, .1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { margin: 0 0 .35rem; color: var(--navy-2); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.08; letter-spacing: -.035em; }
h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; }
h3 { margin: 0; font-size: 1rem; }

.primary, .secondary, .text-button, .icon-button, .nav-item, .plan-tabs button, .mobile-nav button {
  border: 0; border-radius: .75rem; min-height: 2.75rem; font-weight: 750;
}
.primary { padding: .75rem 1rem; background: var(--navy); color: white; box-shadow: 0 8px 20px rgba(21, 59, 75, .16); }
.primary:hover { background: var(--navy-2); }
.secondary { padding: .7rem 1rem; background: white; color: var(--navy); border: 1px solid var(--line); }
.text-button { background: transparent; color: var(--muted); text-align: left; padding: .5rem 0; }
.icon-button { width: 2.75rem; background: white; color: var(--navy); border: 1px solid var(--line); font-size: 1.3rem; }

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); background: radial-gradient(circle at 10% 10%, #d6e9ec, transparent 40%), var(--bg); }
.auth-card { width: min(100%, 28rem); padding: clamp(1.5rem, 6vw, 2.5rem); border: 1px solid rgba(255,255,255,.8); border-radius: 1.5rem; background: rgba(255,255,255,.92); box-shadow: var(--shadow); }
.auth-card h1 { margin-bottom: .75rem; }
.brand-mark { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; margin-bottom: 1.5rem; border-radius: 1rem; background: var(--navy); color: var(--gold); font-size: 1.5rem; font-weight: 900; }
.brand-mark.small { width: 2.4rem; height: 2.4rem; margin: 0; border-radius: .75rem; font-size: 1.1rem; }

.form-stack { display: grid; gap: 1rem; margin-top: 1.5rem; }
.form-stack label, #entry-fields { display: grid; gap: .4rem; color: var(--ink); font-size: .88rem; font-weight: 700; }
.form-stack input, .form-stack textarea, .form-stack select, #entry-fields input, #entry-fields select {
  width: 100%; border: 1px solid var(--line); border-radius: .75rem; background: #fbfdfd; color: var(--ink); padding: .8rem .9rem; min-height: 2.8rem; outline: none;
}
.form-stack input:focus, .form-stack textarea:focus, .form-stack select:focus { border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(30, 83, 103, .1); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 16rem 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2rem; padding: 1.5rem; background: var(--navy); color: white; }
.brand-row { display: flex; align-items: center; gap: .8rem; font-size: 1.1rem; }
.sidebar nav { display: grid; gap: .4rem; }
.nav-item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .7rem .8rem; background: transparent; color: #bad0d8; text-align: left; }
.nav-item.active { background: rgba(255,255,255,.11); color: white; }
.sidebar-footer { margin-top: auto; }
.user-chip { display: grid; grid-template-columns: 2.25rem 1fr; align-items: center; gap: .65rem; }
.user-chip > span { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--navy); font-weight: 900; }
.user-chip div { min-width: 0; display: grid; }
.user-chip small { color: #a9c1ca; overflow: hidden; text-overflow: ellipsis; }
.sidebar .text-button { color: #a9c1ca; }

.workspace { width: min(100%, 80rem); padding: clamp(1.25rem, 4vw, 3.5rem); }
.topbar { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 2rem; }
.plans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.plan-card { position: relative; display: grid; gap: 1.1rem; min-height: 14rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1.1rem; background: var(--surface); box-shadow: 0 8px 24px rgba(21, 59, 75, .05); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.plan-card .date-tile { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; border-radius: .9rem; background: #e4eff1; color: var(--navy); font-weight: 850; line-height: 1; }
.date-tile strong { font-size: 1.2rem; }
.date-tile small { font-size: .65rem; text-transform: uppercase; }
.plan-card h2 { font-size: 1.2rem; }
.plan-card p { margin: .3rem 0 0; color: var(--muted); font-size: .9rem; }
.progress-row { align-self: end; display: grid; grid-template-columns: 1fr auto; gap: .65rem; align-items: center; font-size: .75rem; color: var(--muted); }
progress { width: 100%; height: .42rem; border: 0; border-radius: 999px; background: #e3eaec; overflow: hidden; }
progress::-webkit-progress-bar { background: #e3eaec; }
progress::-webkit-progress-value { background: var(--success); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--success); border-radius: 999px; }
.role-badge { position: absolute; top: 1.1rem; right: 1.1rem; padding: .3rem .5rem; border-radius: 999px; background: #f2f6f7; color: var(--muted); font-size: .68rem; font-weight: 800; }
.empty-state { min-height: 50vh; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.empty-state h2 { color: var(--ink); margin-top: .8rem; }
.empty-state p { max-width: 30rem; }
.empty-icon { font-size: 3rem; color: var(--navy-2); }
.mobile-nav { display: none; }

.plan-shell { min-height: 100vh; }
.plan-header { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 1rem; padding: clamp(1.25rem, 4vw, 2.5rem); background: var(--navy); color: white; }
.plan-header .icon-button, .plan-header .secondary { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: white; }
.plan-heading { max-width: 55rem; }
.plan-heading .eyebrow { color: var(--gold); }
.plan-heading .muted { color: #bdd0d6; margin-bottom: 0; }
.plan-layout { width: min(100%, 78rem); margin: 0 auto; padding: clamp(1rem, 4vw, 2.5rem); }
.plan-tabs { display: flex; gap: .25rem; overflow-x: auto; padding: .25rem; margin-bottom: 1.5rem; border: 1px solid var(--line); border-radius: .9rem; background: white; }
.plan-tabs button { flex: 1 0 auto; padding: .65rem .85rem; background: transparent; color: var(--muted); }
.plan-tabs button.active { background: var(--navy); color: white; }
/* Ein Kind im Grid darf von sich aus nicht schmaler werden als sein
   Inhalt (`min-width: auto`). Ein einziges breites Element darin macht
   damit die ganze Spalte breiter als das Fenster - und schiebt die Seite
   seitwaerts. `min-width: 0` nimmt dem Kasten diese Sperre; was darin
   wirklich zu breit ist, faellt dann auch auf, statt sich zu verstecken. */
.tab-content { display: grid; gap: 1rem; }
.tab-content > *, .content-grid > * { min-width: 0; }
.content-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.panel { grid-column: span 6; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; background: white; }
.panel.wide { grid-column: 1 / -1; }
/* Eine Reihe Knoepfe, die nicht umbrechen darf, ist auf dem Handy
   breiter als das Display. Und weil sie die Seite mitzieht, verrutscht
   dann *alles*: Kopfzeile und Tabs stehen halb ausserhalb des Bildes, und
   man scrollt seitwaerts durch eine App, die eigentlich in eine Spalte
   passt. Deshalb darf jede Knopfreihe umbrechen - und was daneben steht,
   muss schrumpfen duerfen (`min-width: 0`), sonst haelt es die Zeile
   trotzdem auf. */
.panel-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.panel-header > * { min-width: 0; }
.panel-header button { min-height: 2.25rem; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.stat { padding: 1rem; border-radius: .85rem; background: #f1f6f7; }
.stat strong { display: block; font-size: 1.45rem; }
.stat small { color: var(--muted); }
.item-list { display: grid; gap: .65rem; }
.item { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; padding: .75rem; border: 1px solid var(--line); border-radius: .8rem; }
.item.done .item-main { opacity: .52; text-decoration: line-through; }
.item-main { display: grid; gap: .15rem; min-width: 0; }
.item-main strong, .item-main small { overflow-wrap: anywhere; }
.item-main small { color: var(--muted); }
.check-button { width: 1.55rem; height: 1.55rem; min-height: 0; display: grid; place-items: center; border: 1px solid #aabcc1; border-radius: .45rem; background: white; color: white; }
.item.done .check-button { background: var(--success); border-color: var(--success); }
.amount { font-weight: 800; white-space: nowrap; }
.time-tile { min-width: 3.4rem; padding: .45rem .5rem; display: grid; place-items: center; border-radius: .6rem; background: #e4eff1; color: var(--navy); font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums; }
.avatar { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: #e4eff1; color: var(--navy); font-weight: 850; }
.item .role-badge { position: static; }
.rsvp-choice { display: grid; gap: .6rem; margin: 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .85rem; }
.rsvp-choice legend { padding: 0 .35rem; color: var(--muted); font-size: .8rem; font-weight: 800; }
.rsvp-choice label { display: flex; align-items: center; gap: .65rem; margin: 0; }
.rsvp-choice input { width: 1.2rem; min-height: 1.2rem; accent-color: var(--navy); }

/* Art der Veranstaltung. Antippbare Kacheln statt einer Auswahlliste:
   die Entscheidung steht am Anfang des Formulars und legt fest, welche
   Bereiche die Planung bekommt - dafuer muss man sehen, was zur Wahl
   steht, ohne erst eine Liste aufzuklappen. */
.kind-choice { display: grid; gap: .55rem; margin: 0; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .85rem; }
.kind-choice legend { padding: 0 .35rem; color: var(--muted); font-size: .8rem; font-weight: 800; }
.kind-choice p { margin: 0; font-size: .8rem; font-weight: 600; }
.kind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .45rem; }
.kind-chip { display: grid; gap: .1rem; justify-items: start; text-align: left; min-height: 2.9rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: .7rem; background: white; color: var(--ink); }
.kind-chip strong { font-size: .88rem; font-weight: 800; }
.kind-chip small { color: var(--muted); font-size: .72rem; font-weight: 600; line-height: 1.25; }
.kind-chip.active { border-color: var(--navy); background: var(--navy); color: white; }
.kind-chip.active small { color: #c8dde3; }
.kind-tag { display: block; margin-bottom: .2rem; color: var(--navy-2); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.plan-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.item-trail, .row-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.row-controls .secondary { min-height: 2.4rem; padding: .4rem .7rem; font-size: .85rem; white-space: nowrap; }
.list-group + .list-group { margin-top: 1.25rem; }
.list-group > summary { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; gap: .25rem .75rem; margin-bottom: .6rem; padding: .35rem .15rem; border-radius: .5rem; color: var(--navy-2); font-size: 1rem; font-weight: 800; cursor: pointer; }
/* Ein `summary` mit `display: flex` verliert in Chrome sein Dreieck -
   der Abschnitt sieht dann aus wie eine Zeile, die nichts tut. Deshalb
   ein eigener Pfeil, der sich beim Aufklappen dreht. */
.list-group > summary { list-style: none; }
.list-group > summary::-webkit-details-marker { display: none; }
.list-group > summary::before { content: '›'; width: .8rem; color: var(--muted); font-size: 1.1em; line-height: 1; transition: transform .15s ease; }
.list-group[open] > summary::before { transform: rotate(90deg); }
.list-group > summary small { margin-left: auto; text-align: right; }
.list-group > summary small { color: var(--muted); font-weight: 700; }
.list-group:not([open]) > summary { margin-bottom: 0; }
.group-title { overflow-wrap: anywhere; }

/* Werkzeugleiste der Listenansicht: Fortschritt, Sortierung, Filter. */
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-bottom: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.list-progress { flex: 1 1 8rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 750; color: var(--muted); }
.toolbar-field { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 750; color: var(--muted); }
.toolbar-field select { padding: .45rem .55rem; min-height: 2.4rem; border: 1px solid var(--line); border-radius: .6rem; background: #fbfdfd; color: var(--ink); font-weight: 700; }
.chip { min-height: 2.4rem; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--muted); font-size: .8rem; font-weight: 800; }
.chip.active { border-color: var(--navy); background: var(--navy); color: white; }

/* Geschenke: Reservierung statt Haken. */
.share-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .8rem; background: #f7fafb; }
.share-row div { display: grid; gap: .15rem; }
.share-row small { color: var(--muted); font-weight: 600; }
/* Der Gruppenlink steht sichtbar da: kopiert wird er per Knopf, aber auf
   dem Handy wird er auch mal vorgelesen oder von Hand abgetippt. */
.link-box { margin: 0 0 1rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: .8rem; background: #f7fafb; overflow-wrap: anywhere; }
.link-box code { font-size: .85rem; color: var(--muted); }
.share-row .text-button.danger { color: var(--danger); font-weight: 700; padding: .5rem .2rem; }
.gift .avatar { background: #f6efdd; color: #8a6a1c; }
.gift.taken { background: #f7fafb; }
.gift.taken .item-main strong { color: var(--muted); }
a.icon-button { display: grid; place-items: center; text-decoration: none; }
/* Einladungstext und Ablauf am Zusage-Link. Der Text kommt aus einem
   Textfeld: seine Zeilenumbrueche muessen stehen bleiben. */
.rsvp-invitation { margin: .9rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.rsvp-schedule { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.rsvp-schedule .muted { margin: .35rem 0 1rem; font-size: .9rem; }
.rsvp-schedule .item { background: white; }
/* Die Mitbringliste am Zusage-Link. Das Feld darunter steht in einer
   Zeile mit seinem Knopf und bricht auf schmalen Geraeten um - der Knopf
   soll nie halb aus dem Bild ragen. */
.rsvp-list { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.rsvp-list .muted { margin: .35rem 0 1rem; font-size: .9rem; }
.rsvp-list .item { background: white; }
.bring .avatar { background: #e8f1f3; color: #3d6d7d; }
.bring.taken { background: #f7fafb; }
/* Ein Posten, den mehrere bestellen: statt eines Namens steht eine Anzahl
   daneben, und darunter, wer schon dabei ist. */
.pick.chosen { border-color: var(--navy-2); }
.pick-count { min-width: 2rem; text-align: center; font-weight: 700; }
.pick-note { width: 100%; margin-top: .4rem; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: .6rem; background: #fbfdfd; color: var(--ink); font-size: .9rem; }
.count-tile { display: grid; place-items: center; min-width: 2.6rem; min-height: 2.6rem; padding: 0 .4rem; border-radius: .7rem; background: #eef4f6; font-weight: 700; color: var(--ink); }
.pick-names { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
/* Kein Pillen-Rand: sobald ein Sonderwunsch ueber zwei Zeilen geht, sieht
   eine Pille aus wie ein Unfall. Der Text steht in einem eigenen Feld,
   damit das Kreuz daneben stehen bleibt statt darunter zu rutschen. */
.pick-chip { display: inline-flex; align-items: flex-start; gap: .35rem; max-width: 100%; padding: .25rem .55rem; border: 1px solid var(--line); border-radius: .7rem; background: #f7fafb; font-size: .8rem; color: var(--muted); font-weight: 600; }
.pick-chip .pick-who { min-width: 0; overflow-wrap: anywhere; }
.pick-drop { flex: none; border: 0; background: none; padding: 0; color: var(--danger); font-weight: 700; line-height: 1.35; cursor: pointer; }
.order-sums, .order-missing { margin: .8rem 0 0; font-size: .9rem; color: var(--muted); font-weight: 600; }
/* Wer was bestellt hat: je Person ein Kasten mit Namen, Summe und den
   eigenen Posten darin. Auf dem Handy ist das die Liste, die beim
   Austeilen abgehakt wird. */
.order-people { display: grid; gap: .65rem; margin-top: 1.1rem; }
.order-person { padding: .65rem .75rem; border: 1px solid var(--line); border-radius: .8rem; background: #fbfdfd; }
.order-person-head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.order-person-head small { color: var(--muted); font-weight: 700; }
.order-person-lines { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: .9rem; }
.order-person-lines li { display: flex; justify-content: space-between; gap: .75rem; color: var(--muted); font-weight: 600; }
.order-person-lines em { font-style: normal; color: var(--navy-2); }
.order-add { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.order-add input[name="name"] { flex: 1 1 10rem; }
.order-add input, .order-add select { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: .6rem; background: #fbfdfd; color: var(--ink); }
.order-add select { flex: 1 1 9rem; min-width: 0; max-width: 100%; }
.order-add input[name="quantity"] { width: 4.5rem; }
.order-panel form.form-stack { margin-top: 1rem; }
.menu-saved { display: grid; gap: .4rem; }
.menu-saved .muted { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.menu-saved-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: .7rem; background: #f7fafb; }
.menu-saved-row .item-main { display: grid; gap: .1rem; min-width: 0; }
.menu-saved-row small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-preview { margin-top: .25rem; max-height: 14rem; overflow-y: auto; }
.menu-preview .muted { margin: 0 0 .5rem; font-size: .85rem; }
.menu-row { display: flex; justify-content: space-between; gap: .75rem; padding: .35rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.menu-row small { color: var(--muted); white-space: nowrap; }
.rsvp-payment { margin: .9rem 0 0; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: .8rem; background: #f7fafb; font-size: .9rem; overflow-wrap: anywhere; }

.bring.taken .item-main strong { color: var(--muted); }
.rsvp-add { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.rsvp-add input { flex: 1 1 12rem; min-width: 0; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: .7rem; background: #fbfdfd; color: var(--ink); font: inherit; }
.rsvp-gifts { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.rsvp-gifts .muted { margin: .35rem 0 1rem; font-size: .9rem; }
.rsvp-gifts .item { background: white; }
.item.expired { border-style: dashed; }
.item.expired .item-main strong { color: var(--muted); }
.item-trail .icon-button, .row-controls .icon-button { width: 2.4rem; min-height: 2.4rem; font-size: 1.05rem; }
.dialog-actions .danger { margin-right: auto; color: var(--danger); font-weight: 750; }
.row-controls select { max-width: 8.5rem; padding: .5rem .55rem; min-height: 2.4rem; border: 1px solid var(--line); border-radius: .6rem; background: #fbfdfd; color: var(--ink); }
.guest .avatar { background: #f2f6f7; color: var(--muted); }
.guest-zugesagt .avatar { background: #dff0e8; color: var(--success); }
.guest-abgesagt .avatar { background: #f6e6e6; color: var(--danger); }
.guest-abgesagt .item-main strong { color: var(--muted); }

.empty-inline { padding: 1rem; border: 1px dashed #bdcdd1; border-radius: .8rem; color: var(--muted); text-align: center; }

dialog { width: min(calc(100% - 2rem), 34rem); padding: 0; border: 0; border-radius: 1.2rem; color: var(--ink); box-shadow: 0 28px 80px rgba(10, 33, 42, .28); }
dialog::backdrop { background: rgba(8, 30, 39, .55); backdrop-filter: blur(3px); }
dialog form { margin: 0; padding: 1.35rem; }
.dialog-heading, .dialog-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.dialog-actions { justify-content: flex-end; margin-top: .5rem; }
#entry-fields { gap: 1rem; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 1.25rem; transform: translate(-50%, 5rem); max-width: calc(100% - 2rem); padding: .8rem 1rem; border-radius: .75rem; background: var(--ink); color: white; box-shadow: var(--shadow); opacity: 0; transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.update-banner { position: fixed; z-index: 60; left: 0; right: 0; bottom: calc(1.25rem + env(safe-area-inset-bottom)); width: fit-content; margin-inline: auto; display: flex; align-items: center; gap: .9rem; max-width: calc(100% - 2rem); padding: .6rem .6rem .6rem 1rem; border-radius: .9rem; background: var(--ink); color: white; box-shadow: var(--shadow); }
.update-banner .primary { min-height: 0; padding: .5rem .9rem; white-space: nowrap; }

@media (max-width: 760px) {
  .app-shell { display: block; padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .sidebar { display: none; }
  .workspace { padding: calc(1.15rem + env(safe-area-inset-top)) max(1.15rem, env(safe-area-inset-right)) 1.15rem max(1.15rem, env(safe-area-inset-left)); }
  .topbar { align-items: center; }
  .topbar .primary { display: none; }
  .mobile-nav { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 4rem 1fr; align-items: center; padding: .55rem max(.75rem, env(safe-area-inset-left)) calc(.55rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
  .mobile-nav button { background: transparent; color: var(--muted); }
  .mobile-nav button.active { color: var(--navy); }
  #mobile-new { width: 3.25rem; height: 3.25rem; min-height: 0; justify-self: center; border-radius: 1rem; background: var(--navy); color: var(--gold); font-size: 1.55rem; }
  .plans-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .plan-header { grid-template-columns: auto 1fr; padding: calc(1rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left)); }
  .plan-header > .plan-actions { grid-column: 2; justify-self: start; }
  /* Schmalere Knoepfe, damit "Bearbeiten" und "Archivieren" auf einem
     Handy nebeneinander passen statt sich zu stapeln. */
  .plan-header .plan-actions .secondary { min-height: 2.4rem; padding: .5rem .8rem; font-size: .9rem; }
  .plan-layout { padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
  .plan-tabs { margin-inline: -1rem; border-radius: 0; border-inline: 0; }
  .panel { grid-column: 1 / -1; }
  .stat-grid { grid-template-columns: 1fr; }
  .item { grid-template-columns: auto 1fr; }
  .item-trail, .row-controls { grid-column: 1 / -1; justify-content: flex-end; }
  /* In einer Kopfzeile ist daneben kein Platz mehr: die Knoepfe stehen
     dann unter der Ueberschrift und fangen links an, statt am rechten
     Rand zu kleben. */
  .panel-header > .row-controls { width: 100%; justify-content: flex-start; }
  .row-controls select { flex: 1; max-width: none; }
  .item-trail:empty { display: none; }
  .update-banner { bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}