/* Mitfeiern – Design-System
   Warme Abendstimmung: Nachtblau, Abendrot, Bernstein. Mobile first, hell & dunkel. */

:root {
  --bg: #fbf7f2;
  --bg-soft: #f4ede4;
  --surface: #ffffff;
  --surface-2: #faf6f1;
  --ink: #1f1b2e;
  --ink-soft: #3d3650;
  --muted: #6b6478;
  --line: #e9e1d7;
  --line-strong: #d8cdc0;
  --primary: #c33f28;
  --primary-hover: #a4321d;
  --primary-soft: #fde9e3;
  --on-primary: #ffffff;
  --accent: #f2a33a;
  --accent-soft: #fdf0dc;
  --night: #2b2550;
  --success: #1f8a5b;
  --success-soft: #e2f4ea;
  --warning: #a86200;
  --warning-soft: #fff1d6;
  --danger: #c0352b;
  --danger-soft: #fde6e3;
  --info: #3a5bc7;
  --info-soft: #e6ecfb;
  --focus: #3a5bc7;

  --hero-a: #2b2550;
  --hero-b: #d4472e;
  --hero-c: #f2a33a;

  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 24px;
  --shadow-s: 0 1px 2px rgba(31, 27, 46, .06), 0 1px 1px rgba(31, 27, 46, .04);
  --shadow: 0 6px 24px -8px rgba(31, 27, 46, .18), 0 2px 6px rgba(31, 27, 46, .05);
  --shadow-l: 0 24px 60px -20px rgba(31, 27, 46, .35);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 64px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14111d;
    --bg-soft: #1b1726;
    --surface: #1f1b2d;
    --surface-2: #262137;
    --ink: #f4efe8;
    --ink-soft: #d9d2e3;
    --muted: #a59db3;
    --line: #332c45;
    --line-strong: #463d5c;
    --primary: #ff7457;
    --primary-hover: #ff8e75;
    --primary-soft: #3a2027;
    --on-primary: #1a0d0a;
    --accent: #ffb84d;
    --accent-soft: #3a2d17;
    --success: #4cc28a;
    --success-soft: #16301f;
    --warning: #ffb84d;
    --warning-soft: #372a12;
    --danger: #ff6b5e;
    --danger-soft: #3a1b1a;
    --info: #8ea8ff;
    --info-soft: #1d2445;
    --focus: #8ea8ff;
    --shadow: 0 6px 24px -8px rgba(0, 0, 0, .6);
    --shadow-l: 0 24px 60px -20px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

/* Veranstaltungs-Themen */
.theme-abendrot { --hero-a: #2b2550; --hero-b: #d4472e; --hero-c: #f2a33a; }
.theme-nachtblau { --hero-a: #0f1b3d; --hero-b: #2e4a9e; --hero-c: #7fb2ff; }
.theme-gartenfest { --hero-a: #1d3b2a; --hero-b: #3f8f5a; --hero-c: #d9c95b; }
.theme-sekt { --hero-a: #2a2218; --hero-b: #a67c2e; --hero-c: #f4d58d; }
.theme-schlicht { --hero-a: #2e2c33; --hero-b: #57535e; --hero-c: #a9a3b0; }
.theme-blitzlicht { --hero-a: #1d1633; --hero-b: #6d28d9; --hero-c: #ff5fa2; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* iPhone/iPad: follow the text size chosen in the system settings (Bedienungshilfen → Größerer Text). */
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }
}

body {
  margin: 0;
  font-family: var(--font);
  /* Relative, so a larger default font size in the browser or phone settings applies. */
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
}

img, video, svg { max-width: 100%; display: block; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 750; }
h2 { font-size: 1.35rem; font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 650; }
p { margin: 0 0 1em; }
small, .small { font-size: .875rem; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.setup-card .meter { margin-bottom: .6rem; }
.setup-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.setup-steps li { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.setup-steps li:last-child { border-bottom: 0; }
/* Ein Punkt, der von diesem Gerät aus nicht zu erfüllen ist (Push in Safari), zählt nicht
   mit – er soll aber auch nicht so aussehen wie die, die noch anstehen. */
.setup-steps li.is-optional { opacity: .75; }
.setup-steps li.is-optional .setup-tick::before { content: "\00B7"; color: var(--muted); font-size: 1.4rem; line-height: 1; }
.setup-tick { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; color: #fff; }
.setup-steps .is-done .setup-tick { background: var(--success); border-color: var(--success); }
.setup-steps .is-done strong { color: var(--muted); text-decoration: line-through; font-weight: 550; }
.setup-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.reminder-text { margin: 0 0 .8rem; padding: .7rem .9rem; border-left: 3px solid var(--primary); background: var(--bg-soft); border-radius: 0 var(--radius-s) var(--radius-s) 0; font-size: .95rem; overflow-wrap: anywhere; }
.suggest { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .6rem 0; }
.suggest .chip { display: inline-flex; align-items: center; gap: .25rem; padding: .35rem .75rem; min-height: 36px; border-radius: 999px; border: 1px dashed var(--line-strong); background: var(--surface); color: var(--ink-soft); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.suggest .chip:hover { border-color: var(--primary); color: var(--primary); }
.suggest .chip .icon { width: 1em; height: 1em; }
.after-nudge { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .9rem 1rem; border-radius: var(--radius); background: var(--primary-soft); }
.after-nudge > div { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.after-nudge > .icon { color: var(--primary); width: 1.6rem; height: 1.6rem; }
.after-costs { padding: .9rem 1rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); }
.after-costs-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.after-costs .list li { padding: .35rem 0; }
.join-rsvp { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.join-rsvp .btn-primary { grid-column: 1 / -1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
/* „Zum Inhalt springen“ muss sichtbar werden, sobald jemand mit der Tastatur dorthin kommt –
   sonst ist der Sprunglink zwar da, aber niemand sieht ihn. */
a.sr-only:focus, a.sr-only:focus-visible {
  position: fixed; top: .5rem; left: .5rem; z-index: 200; width: auto; height: auto; clip: auto;
  margin: 0; padding: .6rem 1rem; border-radius: var(--radius-s);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-weight: 600;
}
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.icon { display: inline-block; vertical-align: -.22em; width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 1.75rem; height: 1.75rem; }
.icon-xl { width: 2.5rem; height: 2.5rem; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 16px; }
.container-narrow { max-width: 720px; }
.container-tight { max-width: 460px; }
.stack > * + * { margin-top: var(--gap, 1rem); }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grid { display: grid; gap: 1rem; }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
/* Übersicht am Schreibtisch: links die breite Spalte, mit der man arbeitet, rechts die schmale
   zum Nachschlagen. Zwei gleich breite Spalten wirkten schief, weil rechts die Textkarten
   stehen – die Spalte wurde lang, während links viel Luft blieb. Am Handy bleibt alles
   untereinander, dort ist die Reihenfolge die ganze Gestaltung. */
@media (min-width: 900px) {
  .grid-2.grid-haupt { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
}
.grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.spacer { flex: 1; }
main { padding-block: 1.5rem 3rem; }
.page-with-tabbar main { padding-bottom: 2rem; }

/* ---------- Kopfzeile ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; gap: .25rem .75rem; min-height: 60px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 750; font-size: 1.15rem; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--night), var(--primary) 60%, var(--accent)); display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-s); }
.brand-mark svg { width: 20px; height: 20px; }
.topnav { display: flex; gap: .25rem; margin-left: auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.topnav a, .topnav button { display: inline-flex; gap: .4rem; align-items: center; padding: .5rem .75rem; border-radius: 999px; color: var(--ink-soft); text-decoration: none; font-weight: 550; font-size: .95rem; background: none; border: 0; cursor: pointer; font-family: inherit; }
.topnav a:hover, .topnav button:hover, .topnav a[aria-current="page"] { background: var(--bg-soft); color: var(--ink); }
.topnav .hide-sm { display: none; }
@media (min-width: 720px) { .topnav .hide-sm { display: inline-flex; } }
.badge-dot { min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: .72rem; font-weight: 700; display: inline-grid; place-items: center; }

/* ---------- Karten ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-s); }
.card-flush { padding: 0; overflow: hidden; }
.card-header { display: flex; align-items: center; gap: .75rem; justify-content: space-between; margin-bottom: 1rem; }
.card-header h2, .card-header h3 { margin: 0; }
.card-link { display: block; color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.card-link:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--shadow); }
.section-title { display: flex; align-items: center; gap: .5rem; margin: 2rem 0 1rem; }
.section-title h2 { margin: 0; }
.divider { height: 1px; background: var(--line); margin: 1.25rem 0; border: 0; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-border: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .6rem 1.1rem; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-border);
  font: 600 .98rem/1.2 var(--font); text-decoration: none; cursor: pointer;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease, border-color .15s;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.btn:hover { color: var(--btn-fg); border-color: var(--ink-soft); }
.btn:active { transform: scale(.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { --btn-bg: var(--primary); --btn-fg: var(--on-primary); --btn-border: transparent; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 60%, transparent); }
.btn-primary:hover { --btn-bg: var(--primary-hover); border-color: transparent; }
.btn-ghost { --btn-bg: transparent; --btn-border: transparent; }
.btn-ghost:hover { --btn-bg: var(--bg-soft); border-color: transparent; }
.btn-danger { --btn-fg: var(--danger); --btn-border: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn-danger:hover { --btn-bg: var(--danger-soft); border-color: var(--danger); }
.btn-night { --btn-bg: var(--night); --btn-fg: #fff; --btn-border: transparent; }
.btn-sm { min-height: 36px; padding: .4rem .8rem; font-size: .9rem; }
.btn-lg { min-height: 54px; padding: .8rem 1.5rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-icon { width: 44px; padding: 0; }
/* Fingers need bigger targets than a mouse pointer. */
@media (pointer: coarse) {
  .reaction, .toast-action, .comment-form .input { min-height: 44px; }
  .btn-sm { min-height: 44px; }
  .btn-sm.btn-icon { width: 44px; }
  .suggest .chip, .chip-check span { min-height: 44px; }
}
.btn-icon.btn-sm { width: 36px; }
.btn-group { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Formulare ---------- */
/* align-content: Ohne das dehnt sich in einer Zeile das Feld ohne Hinweistext auf die Höhe des
   Nachbarn mit Hinweis – die Eingabefelder stehen dann unterschiedlich hoch und wirken ungleich groß. */
.field { display: grid; gap: .35rem; margin-bottom: 1rem; align-content: start; }
.field label, .label { font-weight: 600; font-size: .95rem; }
.field .hint { color: var(--muted); font-size: .85rem; }
.field .error { color: var(--danger); font-size: .875rem; font-weight: 550; }
.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: .65rem .9rem; border-radius: var(--radius-s);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 400 1rem/1.4 var(--font); transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 110px; resize: vertical; }
/* Datum und Uhrzeit sehen sonst aus wie ein Fremdkörper: iOS stellt den Wert in diesen Feldern
   mittig, alle anderen Felder schreiben links. Dazu schrumpft ein leeres Datumsfeld dort auf
   Textgröße zusammen, sodass man nicht sieht, dass da ein Feld ist. */
input[type="date"], input[type="datetime-local"], input[type="time"] {
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  min-height: 46px;
}
/* Das Kalender-Symbol am rechten Rand soll nicht am Text kleben. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { margin-left: auto; opacity: .6; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.form-row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
/* Auswahl neben Zahlenfeldern: Die Auswahl trägt lange Namen („Kindergeburtstag“), die Zahlen
   zwei Ziffern. Gleich breit wirkt die Auswahl gedrängt und die Zahlenfelder überdimensioniert. */
.form-row-choice { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; }
/* Bricht eine Beschriftung um, bleiben die Eingaben trotzdem auf einer Linie. */
.form-row-choice .field { align-self: end; }
@media (max-width: 720px) {
  .form-row-choice { grid-template-columns: 1fr 1fr; }
  .form-row-choice > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .form-row-choice { grid-template-columns: 1fr; }
  .form-row-choice > :first-child { grid-column: auto; }
}
.check { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 0; cursor: pointer; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--primary); flex: none; }
.check strong { display: block; font-weight: 600; }
.check span.muted { font-size: .9rem; }
.switch-list > .check + .check { border-top: 1px solid var(--line); }
.segmented { display: inline-flex; background: var(--bg-soft); border-radius: 999px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; }
.segmented span { display: block; padding: .45rem .9rem; border-radius: 999px; font-weight: 600; font-size: .92rem; cursor: pointer; color: var(--muted); }
.segmented input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-s); }
.segmented input:focus-visible + span { outline: 3px solid var(--focus); }

/* ---------- Hinweise ---------- */
.alert { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--radius-s); background: var(--info-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--info) 25%, transparent); }
/* „info“ wurde im Markup benutzt, war aber nie definiert – es sah nur zufällig richtig aus. */
.alert-info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.alert .icon { color: var(--info); margin-top: .15rem; }
.alert p:last-child { margin-bottom: 0; }
.alert-success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.alert-success .icon { color: var(--success); }
.alert-warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.alert-warning .icon { color: var(--warning); }
.alert-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.alert-danger .icon { color: var(--danger); }
.flash-stack { display: grid; gap: .5rem; margin-bottom: 1rem; }

.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 650; background: var(--bg-soft); color: var(--ink-soft); white-space: nowrap; }
.pill .icon { width: .95em; height: .95em; }
.pill-primary { background: var(--primary-soft); color: var(--primary); }
.pill-success { background: var(--success-soft); color: var(--success); }
.pill-warning { background: var(--warning-soft); color: var(--warning); }
.pill-danger { background: var(--danger-soft); color: var(--danger); }
.pill-night { background: var(--night); color: #fff; }

/* ---------- Fortschritt ---------- */
.meter { height: 10px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .3s ease; }
.meter.is-warn > span { background: var(--warning); }
.meter.is-full > span { background: var(--danger); }
.meter-stacked { display: flex; }
.meter-stacked > span { border-radius: 0; }

/* ---------- Hero / Veranstaltung ---------- */
.hero {
  position: relative; color: #fff; border-radius: var(--radius-l); padding: 1.5rem; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, var(--hero-c) 0%, transparent 45%), linear-gradient(135deg, var(--hero-a) 0%, var(--hero-b) 100%);
  box-shadow: var(--shadow);
}
.hero::after { content: ""; position: absolute; inset: auto -20% -60% 30%; height: 120%; background: radial-gradient(closest-side, rgba(255,255,255,.14), transparent); pointer-events: none; }
.hero h1 { color: #fff; margin-bottom: .35rem; }
.hero .hero-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; opacity: .95; font-weight: 500; }
.hero .hero-meta span { display: inline-flex; gap: .4rem; align-items: center; }
.hero .btn { --btn-bg: rgba(255,255,255,.16); --btn-fg: #fff; --btn-border: rgba(255,255,255,.3); backdrop-filter: blur(6px); }
.hero .btn:hover { --btn-bg: rgba(255,255,255,.26); border-color: rgba(255,255,255,.5); }
.hero .btn-primary { --btn-bg: #fff; --btn-fg: var(--hero-a); --btn-border: transparent; }
@media (min-width: 720px) { .hero { padding: 2.25rem; } }

.event-card { display: grid; grid-template-columns: 72px 1fr auto; gap: 1rem; align-items: center; }
.event-date { border-radius: 14px; overflow: hidden; text-align: center; background: var(--surface-2); border: 1px solid var(--line); }
.event-date b { display: block; font-size: 1.6rem; line-height: 1.1; padding-top: .35rem; font-family: var(--font-display); }
.event-date span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding-bottom: .4rem; color: var(--muted); }
.event-date i { display: block; font-style: normal; font-size: .7rem; font-weight: 700; color: #fff; padding: .15rem 0; background: linear-gradient(90deg, var(--hero-a), var(--hero-b)); }

/* ---------- Tab-Leiste (mobil) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); padding-bottom: var(--safe-bottom);
}
/* Warum die Leiste eine eigene Ebene bekommt: iOS malt feste Elemente während des Scrollens
   nicht in jedem Bild neu. Eine Leiste mit Hintergrundunschärfe muss dabei jedes Mal neu
   gerechnet werden und hinkt sichtbar hinterher – sie „schwimmt“. Eine eigene Ebene nimmt ihr
   diese Arbeit ab. */
.tabbar { transform: translateZ(0); will-change: transform; }

/* Als abgelegte App: kein Mitschwingen des Dokuments beim Überziehen (dabei wandert auf dem
   iPhone alles Feste mit), und statt der Unschärfe ein undurchsichtiger Hintergrund. Ohne
   Browserleiste sieht man die Unschärfe ohnehin kaum – ruhig stehen bleibt wichtiger. */
@media (display-mode: standalone) {
  html, body { overscroll-behavior-y: none; }
  .tabbar {
    background: var(--surface);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}
.tabbar-inner { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 640px; margin: 0 auto; height: var(--tabbar-h); align-items: center; }
/* Ohne Planung bleibt der Kamera-Knopf in der Mitte: Der letzte Reiter nimmt zwei Spalten ein. */
@media (max-width: 959px) { .tabbar-inner[data-plaetze="4"] > :last-child { grid-column: span 2; } }
.tabbar a { display: grid; justify-items: center; gap: 2px; color: var(--muted); text-decoration: none; font-size: .7rem; font-weight: 650; padding: .35rem 0; }
.tabbar a .icon { width: 24px; height: 24px; }
.tabbar a[aria-current="page"] { color: var(--primary); }
.tabbar .capture-fab {
  justify-self: center; width: 60px; height: 60px; margin-top: -26px; border-radius: 50%; border: 4px solid var(--bg);
  background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--primary) 70%, transparent); cursor: pointer;
}
.tabbar .capture-fab .icon { width: 28px; height: 28px; }
.tabbar .capture-fab:active { transform: scale(.96); }
/* Die Hauptnavigation als feste Leiste unten – nur am Handy. Auf breiteren Schirmen steht sie
   oben in der Kopfzeile, dort ist genug Platz. */
.mainnav { display: none; }
.mainnav .tabbar-inner { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
@media (max-width: 560px) {
  .mainnav { display: block; }
  /* Sonst stünde jeder Punkt zweimal auf dem Schirm. Das Zeichen des Produkts bleibt oben. */
  body:has(.mainnav) .topnav { display: none; }
  body:has(.mainnav) main { padding-bottom: calc(var(--tabbar-h) + 2rem + var(--safe-bottom)); }
  body:has(.mainnav) .footer { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }
}

@media (min-width: 960px) {
  .tabbar { top: 60px; bottom: auto; left: 0; right: auto; width: 96px; height: calc(100vh - 60px); border-top: 0; border-right: 1px solid var(--line); background: var(--surface); padding: 1rem 0; }
  .tabbar-inner { grid-template-columns: 1fr; grid-auto-rows: 72px; height: auto; align-content: start; gap: .25rem; }
  .tabbar .capture-fab { margin: .5rem auto; order: -1; }
  .page-with-tabbar main, .page-with-tabbar .event-shell { padding-left: 96px; }
}

/* ---------- Aktionsblatt (Sheet) ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(12, 10, 20, .5); z-index: 90; animation: fade .15s ease; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; background: var(--surface); border-radius: 24px 24px 0 0;
  padding: .75rem 1rem calc(1rem + var(--safe-bottom)); box-shadow: var(--shadow-l); max-height: 90vh; overflow: auto;
  animation: slide-up .22s cubic-bezier(.2, .9, .3, 1);
}
.sheet::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 9px; background: var(--line-strong); margin: 0 auto .75rem; }
@media (min-width: 720px) { .sheet { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 50%); width: 480px; border-radius: 24px; animation: pop .18s ease; } .sheet::before { display: none; } }
.sheet h2 { font-size: 1.2rem; }
.action-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
/* Treffer der Ortssuche: oben der kurze Name, darunter die ganze Anschrift. Als eine Zeile war
   „Kaltenbach, Bezirk Schwaz, Tirol, 6272, Österreich“ breiter als das Blatt. */
.ortstreffer button { display: block; width: 100%; text-align: left; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: inherit; min-height: 44px; }
.ortstreffer button:hover { background: var(--bg-soft); }
.ortstreffer .ort-name { display: block; font-weight: 600; }
.ortstreffer .ort-zeile { display: block; font-size: .82rem; color: var(--muted); overflow-wrap: anywhere; }
.action-list button, .action-list a, .action-list label {
  width: 100%; display: flex; gap: 1rem; align-items: center; text-align: left; padding: .9rem 1rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; text-decoration: none;
}
.action-list button:hover, .action-list a:hover, .action-list label:hover { border-color: var(--primary); color: var(--ink); }
.action-list .action-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; }
.action-list strong { display: block; }
.action-list small { color: var(--muted); }

@keyframes fade { from { opacity: 0; } }
@keyframes slide-up { from { transform: translateY(100%); } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, 50%) scale(.96); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ---------- Listen & Tabellen ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; gap: .75rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.list > li:last-child { border-bottom: 0; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--hero-a), var(--hero-b)); flex: none; font-size: .95rem; }
.avatar-sm { width: 30px; height: 30px; font-size: .78rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.table th, .table td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface-2); font-weight: 700; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Betriebstabellen haben viele Spalten. Ohne Mindestbreite quetscht der Browser ausgerechnet die
   erste – den Namen – auf wenige Zeichen und bricht ihn um. Lieber die Tabelle seitlich scrollen
   lassen (der Rahmen kann das) und den Namen lesbar halten. */
.admin-table th:first-child, .admin-table td:first-child { min-width: 15rem; }
.admin-table .num, .admin-table .nowrap { white-space: nowrap; }
.admin-table td:first-child strong { overflow-wrap: anywhere; }
/* Ein Etikett wie „Kostenlos“ darf nicht Buchstabe für Buchstabe untereinander stehen. */
.admin-table .pill { white-space: nowrap; }

.stat { display: grid; gap: .2rem; }
.stat b { font-size: 1.6rem; font-family: var(--font-display); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .88rem; }

.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.empty .icon-xl { margin: 0 auto .75rem; color: var(--line-strong); }
.empty h3 { color: var(--ink); }

/* ---------- Auth ---------- */
.auth-wrap { min-height: calc(100dvh - 60px); display: grid; place-items: center; padding: 2rem 16px; background: radial-gradient(80% 60% at 100% 0%, var(--accent-soft), transparent), radial-gradient(70% 60% at 0% 100%, var(--primary-soft), transparent); }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { font-size: 1.7rem; }

/* ---------- Tarife ---------- */
.plans { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.plan { position: relative; display: flex; flex-direction: column; gap: .75rem; }
.plan.is-featured { border: 2px solid var(--primary); box-shadow: var(--shadow); }
.plan.is-current { border-color: var(--success); }
.plan .price { font-size: 2rem; font-weight: 800; font-family: var(--font-display); line-height: 1; }
.plan .price small { font-size: .9rem; font-weight: 500; color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; flex: 1; }
.plan li { display: flex; gap: .5rem; align-items: flex-start; font-size: .95rem; }
.plan li .icon { color: var(--success); margin-top: .2rem; width: 1.05em; height: 1.05em; }
.plan li.is-off { color: var(--muted); }
.plan li.is-off .icon { color: var(--line-strong); }
.plan-ribbon { position: absolute; top: -12px; right: 16px; }

/* ---------- Chat ---------- */
.chat { display: flex; flex-direction: column; gap: .5rem; }
.msg { max-width: 82%; padding: .6rem .9rem 1.1rem; position: relative; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); align-self: flex-start; word-wrap: break-word; }
.msg.is-mine { align-self: flex-end; background: var(--primary-soft); border-color: transparent; }
.msg.is-announcement { max-width: 100%; align-self: stretch; background: var(--accent-soft); border-color: transparent; }
.msg-meta { font-size: .75rem; color: var(--muted); margin-bottom: .1rem; display: flex; gap: .5rem; }
/* Reaktionen sitzen am unteren Rand der Blase und ragen halb heraus – so bleiben sie erkennbar Teil
   der Nachricht, ohne den Text zu verdrängen. Der Platz dafür steckt im Abstand der Blase. */
.msg-reactions { position: absolute; left: .7rem; right: .7rem; bottom: -.55rem; display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.msg.is-mine .msg-reactions { justify-content: flex-end; }
.reaction { display: inline-flex; align-items: center; gap: .2rem; min-height: 26px; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .8rem; font-weight: 650; line-height: 1; cursor: pointer; box-shadow: var(--shadow-s); }
.reaction.is-mine { border-color: var(--primary); background: var(--primary-soft); color: var(--ink); }
.reaction-add { color: var(--muted); opacity: 0; transition: opacity .15s; }
.reaction-add .icon { width: 15px; height: 15px; }
.msg:hover .reaction-add, .msg:focus-within .reaction-add, .reaction-add:focus-visible { opacity: 1; }
/* Ohne Zeigegerät gibt es kein Überfahren – dort steht der Knopf einfach da. */
@media (hover: none) { .reaction-add { opacity: .55; } }
.reaction-picker { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.reaction-pick { font-size: 1.6rem; min-height: 52px; min-width: 52px; justify-content: center; padding: .3rem; }
.chat-composer { position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + .5rem); margin-top: 1rem; display: grid; gap: .45rem; padding: .5rem; border-radius: 22px; transition: background .2s ease, box-shadow .2s ease; }
.chat-form { display: flex; gap: .5rem; background: var(--surface); padding: .5rem; border-radius: 999px; border: 1px solid var(--line); box-shadow: var(--shadow); transition: border-color .2s, background .2s; }
/* Schalter „Als Ankündigung senden“ als echter Umschalter */
.announce-toggle { justify-self: start; display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .8rem .35rem .45rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .86rem; font-weight: 650; cursor: pointer; box-shadow: var(--shadow-s); user-select: none; }
.announce-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.announce-toggle .switch { width: 34px; height: 20px; border-radius: 999px; background: var(--line-strong); position: relative; transition: background .2s; flex: none; }
.announce-toggle .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s; }
.announce-toggle input:checked + .switch { background: #d97a00; }
.announce-toggle input:checked + .switch::after { transform: translateX(14px); }
.announce-toggle input:focus-visible + .switch { outline: 3px solid var(--focus); outline-offset: 2px; }
.announce-hint { margin: 0; font-size: .84rem; }
/* Aktiver Ankündigungsmodus: ganzer Eingabebereich wird bernsteinfarben */
.chat-composer.is-announcement, .chat-composer:has(.announce-toggle input:checked) {
  background: linear-gradient(135deg, #ffb020, #f28c28); box-shadow: 0 10px 30px -10px rgba(242, 140, 40, .7);
}
.chat-composer.is-announcement .announce-toggle, .chat-composer:has(.announce-toggle input:checked) .announce-toggle { background: #fff; color: #7a3d00; border-color: transparent; }
.chat-composer.is-announcement .announce-hint, .chat-composer:has(.announce-toggle input:checked) .announce-hint { color: #3b1d00; font-weight: 600; }
.chat-composer.is-announcement .chat-form, .chat-composer:has(.announce-toggle input:checked) .chat-form { border-color: transparent; background: #fffaf0; }
.chat-composer.is-announcement .chat-form .input, .chat-composer:has(.announce-toggle input:checked) .chat-form .input { background: transparent; color: #2a1600; }
.chat-composer.is-announcement .chat-form .input::placeholder, .chat-composer:has(.announce-toggle input:checked) .chat-form .input::placeholder { color: #9a6a3a; }
.chat-composer.is-announcement .btn-primary, .chat-composer:has(.announce-toggle input:checked) .btn-primary { --btn-bg: #7a3d00; --btn-fg: #fff; box-shadow: none; }
.msg.is-announcement { background: linear-gradient(135deg, #fff1d6, #ffe3b8); color: #2a1600; border-left: 4px solid #f28c28; }
@media (prefers-color-scheme: dark) { .msg.is-announcement { background: linear-gradient(135deg, #3a2a10, #4a3212); color: var(--ink); } }
.topic-bar { display: flex; gap: .4rem; overflow-x: auto; padding: .1rem 0 .75rem; margin-bottom: .5rem; scrollbar-width: none; }
.topic-bar::-webkit-scrollbar { display: none; }
.topic-bar a { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .9rem; }
.topic-bar a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.topic-bar a.is-closed { opacity: .6; }
.topic-bar .topic-new { border-style: dashed; color: var(--primary); }
.topic-list > li { padding: 0; }
.topic-row { display: flex; gap: .75rem; align-items: center; padding: .85rem 1rem; color: inherit; text-decoration: none; width: 100%; }
.topic-row:hover { background: var(--surface-2); color: inherit; }
.topic-row.is-closed { opacity: .65; }
.topic-emoji { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--bg-soft); font-size: 1.3rem; flex: none; }
.topic-side { display: grid; justify-items: end; gap: .25rem; flex: none; }
.emoji-chip span { font-size: 1.2rem; padding: .25rem .6rem; }
.hide-sm-inline { display: none; }
@media (min-width: 720px) { .hide-sm-inline { display: inline; } }
.chat-form .input { border: 0; min-height: 44px; border-radius: 999px; }
.chat-form .input:focus { box-shadow: none; }
@media (min-width: 960px) { .chat-composer { bottom: 1rem; } }

/* ---------- Planung ---------- */
.plan-item { display: flex; gap: .75rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.plan-item.is-done .plan-title { text-decoration: line-through; color: var(--muted); }
.plan-title { font-weight: 600; }

/* ---------- Toast ---------- */
.toast-region { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + 1rem + var(--safe-bottom)); z-index: 120; display: grid; gap: .5rem; width: min(92vw, 420px); pointer-events: none; }
.toast { pointer-events: auto; background: var(--ink); color: var(--bg); padding: .75rem 1rem; border-radius: 14px; box-shadow: var(--shadow-l); display: flex; gap: .6rem; align-items: center; animation: toast-in .2s ease; font-weight: 550; }
.toast > span { flex: 1; }
.toast-action { margin-left: auto; background: transparent; border: 1.5px solid currentColor; color: inherit; border-radius: 999px; padding: .35rem .8rem; font-weight: 700; cursor: pointer; min-height: 36px; }
.flash-stack .undo-form { margin-left: auto; }
.flash-stack .alert { align-items: center; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 1.5rem 0; color: var(--muted); font-size: .88rem; }
.footer a { color: var(--muted); }
/* „Habe ich die aktuelle Fassung?“ – Datum und Knopf stehen in der Fußzeile, wo man sie sucht,
   und rutschen am Handy in eine eigene Zeile, statt die Pflichtlinks zu quetschen. */
.fassung-stand { gap: .5rem; font-size: .95em; }
@media (max-width: 719px) { .fassung-stand { flex-basis: 100%; } }
/* In einer Feier bleibt die Fußzeile – Impressum und Datenschutz müssen auch Gäste finden –,
   aber schmal, und unten mit Platz für die Leiste, die über ihr steht. */
.page-with-tabbar .footer { padding: .9rem 0 calc(var(--tabbar-h) + 1.5rem + var(--safe-bottom)); font-size: .8rem; }
@media (min-width: 960px) { .page-with-tabbar .footer { padding: 1rem 0 1rem 96px; } }

/* ---------- Hilfsklassen ----------
   Diese Handvoll Klassen ersetzt die immer gleichen Inline-Stile in den Vorlagen. Sie stehen hier,
   damit eine Änderung an einer Stelle wirkt und nicht an zweihundert. */
.grow { flex: 1; min-width: 0; }
.no-shrink { min-width: 0; }
.items-start { align-items: flex-start; }
.center-x { justify-content: center; }
.text-danger { color: var(--danger); }
.block { display: block; }
.dim { opacity: .9; }
/* ---------- Hilfsklassen ---------- */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.w-full { width: 100%; }
.text-right { text-align: right; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg-soft); padding: .1rem .4rem; border-radius: 6px; font-size: .9em; letter-spacing: .08em; }
.code-display { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(2rem, 8vw, 3.5rem); letter-spacing: .2em; font-weight: 700; }
details.disclosure { border: 1px solid var(--line); border-radius: var(--radius-s); padding: .75rem 1rem; background: var(--surface); }
details.disclosure summary { cursor: pointer; font-weight: 600; }
details.disclosure[open] summary { margin-bottom: .5rem; }

/* ---------- Gäste-Menü ---------- */
.guest-menu { position: relative; }
.guest-menu > summary { list-style: none; }
.guest-menu > summary::-webkit-details-marker { display: none; }
.guest-menu-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 230px; padding: .4rem; display: grid; gap: .2rem; box-shadow: var(--shadow); }
.guest-menu-panel .btn { justify-content: flex-start; }
/* Namen berichtigen: Feld und Knopf untereinander, damit der Name auch lang sein darf.
   Darunter ein Strich – was hier steht, ändert eine Angabe; darunter stehen Eingriffe. */
.guest-rename { display: grid; gap: .35rem; padding: .1rem .1rem .45rem; }
.guest-rename + * { border-top: 1px solid var(--line); padding-top: .45rem; }

/* ---------- Feature-Kacheln ---------- */
.feature-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.feature-icon.is-accent { background: var(--accent-soft); color: var(--warning); }
.feature-icon.is-success { background: var(--success-soft); color: var(--success); }

/* ---------- Kommentare & Ajax-Formulare ---------- */
form.is-busy { opacity: .6; pointer-events: none; position: relative; }
/* Ein ruhiger Hinweis, dass gerade etwas läuft – ohne Springen im Layout. */
form.is-busy::after { content: ''; position: absolute; inset: auto .5rem .5rem auto; width: 16px; height: 16px; border: 2px solid var(--line-strong); border-top-color: var(--primary); border-radius: 50%; animation: dreh .7s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { form.is-busy::after { animation: none; } }
.comments { margin-top: .4rem; }
.comments > summary { list-style: none; cursor: pointer; display: inline-flex; gap: .35rem; align-items: center; font-size: .82rem; color: var(--muted); font-weight: 600; padding: .15rem 0; }
.comments > summary::-webkit-details-marker { display: none; }
/* Auch hier muss zu sehen sein, dass sich etwas öffnet – nur leiser als bei einer ganzen Karte. */
.comments > summary::after { content: ""; flex: none; width: .4rem; height: .4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.1rem) rotate(45deg); opacity: .6; transition: transform .15s ease; }
.comments[open] > summary::after { transform: translateY(.08rem) rotate(-135deg); }
.comments-body { display: grid; gap: .5rem; margin-top: .5rem; padding-left: .75rem; border-left: 2px solid var(--line); }
.comment { font-size: .92rem; }
.comment-meta { display: flex; align-items: center; gap: .4rem; font-size: .8rem; }
.comment-delete { margin-left: auto; }
.comment-form { display: flex; gap: .4rem; }
.comment-form .input { min-height: 38px; padding: .4rem .7rem; font-size: .92rem; }

/* ---------- Unternavigation (Planung) ---------- */
/* Ein Kern für alle waagerechten Leisten: Planung, Chat-Themen, Album-Filter. Vorher war
   derselbe Satz dreimal getippt – und dreimal leicht anders. */
.subnav, .topic-bar, .chip-row { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.subnav::-webkit-scrollbar, .topic-bar::-webkit-scrollbar, .chip-row::-webkit-scrollbar { display: none; }
.subnav { display: flex; gap: .4rem; overflow-x: auto; padding: .1rem 0 .75rem; margin-bottom: .5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .9rem; }
.subnav a:hover { border-color: var(--line-strong); color: var(--ink); }
.subnav a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.subnav .icon { width: 1.05em; height: 1.05em; }
/* Phones: swipe sideways, a soft edge shows there is more. Wider screens: wrap onto a second row, nothing hidden. */
.subnav.has-more-end { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.subnav.has-more-start.has-more-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }
.subnav.has-more-start:not(.has-more-end) { -webkit-mask-image: linear-gradient(to right, transparent, #000 18%); mask-image: linear-gradient(to right, transparent, #000 18%); }
@media (min-width: 720px) {
  .subnav { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none !important; mask-image: none !important; }
}

/* Eine Navigation, zwei Breiten – nur in der Planung.
   Am Telefon steht dort nur der Weg zurück zu den Kacheln: Ein seitlich scrollender Streifen
   zeigte drei von vierzehn Einträgen und verlangte, dass man vom Rest schon weiß. Die Kacheln
   der Nabe können das besser. Ab 720 px bricht der Streifen um, verbirgt nichts und spart
   einen Klick – dort bleibt er, mit denselben Gruppentiteln wie über den Kacheln.
   Die Kategorien der Hilfe scrollen weiterhin: Dort sind es wenige, und eine Nabe gibt es nicht. */
.plan-nav .subnav-breit { display: none; }
.plan-nav .subnav-gruppe { display: none; }
@media (min-width: 720px) {
  .plan-nav .subnav-breit { display: contents; }
  .plan-nav .subnav-alle { display: none; }
  .plan-nav .subnav-gruppe {
    display: inline-flex; align-items: center; flex: none;
    margin-left: .5rem; padding-left: .5rem; border-left: 1px solid var(--line);
    color: var(--ink-soft); font-size: .78rem; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase;
  }
}

/* ---------- Planungs-Kacheln ---------- */
.plan-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.plan-card { display: flex; flex-direction: column; gap: .5rem; }
.plan-card.is-attention { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
/* Zeile einer Zusammenfassung, die man vor dem Abschließen noch einmal ansehen sollte. */
/* Eingabefelder eines Bereichs, der von einer Auswahl abhängt: sichtbar nur, wenn sie an ist.
   Ohne Skript – der Browser kennt den Zustand der Auswahl selbst. */
/* Suchfeld über den Einstellungen: bleibt beim Blättern oben, damit man tippen und lesen kann. */
.settings-search { position: sticky; top: .5rem; z-index: 3; background: var(--bg); padding: .5rem 0; }

/* Alles, was ausschließlich der Betrieb sieht, trägt dieselbe Handschrift: gestrichelter Rahmen
   und Schild-Zeichen. So ist auf einen Blick klar, dass die Gastgeberin das nicht vor Augen hat. */
.nur-betrieb {
  display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  padding: .75rem .9rem; color: var(--ink-soft); font-size: .92rem;
}
.nur-betrieb .icon { color: var(--muted); flex: none; margin-top: .15rem; }
.nur-betrieb-abzeichen {
  border: 1px dashed var(--line-strong); background: transparent; color: var(--muted);
  font-size: .78rem; gap: .25rem;
}

.wenn-an { display: none; }
form:has(input[data-an]:checked) .wenn-an { display: block; }
.wenn-aus { display: block; }
form:has(input[data-an]:checked) .wenn-aus { display: none; }

.list li.is-attention { background: var(--warning-soft, color-mix(in srgb, var(--warning) 12%, transparent)); border-radius: var(--radius-s); }
.plan-card-head { display: flex; align-items: center; gap: .6rem; }
.plan-card-head .feature-icon { width: 40px; height: 40px; border-radius: 12px; }
.plan-card-head h3 { margin: 0; font-size: 1.02rem; }
.plan-card .headline { font-size: 1.35rem; font-weight: 750; font-family: var(--font-display); line-height: 1.15; }
.plan-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .92rem; }
.plan-card ul a { color: var(--ink-soft); text-decoration: none; }
.plan-card ul a:hover { color: var(--primary); }
.activity-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.activity-feed li { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .94rem; }
.activity-feed li:last-child { border-bottom: 0; }
.activity-feed .muted { font-size: .8rem; white-space: nowrap; margin-left: auto; }
.chip-check { display: inline-flex; position: relative; }
.chip-check input { position: absolute; opacity: 0; inset: 0; }
.chip-check span { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--line-strong); font-size: .88rem; font-weight: 600; cursor: pointer; color: var(--ink-soft); }
.chip-check input:checked + span { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.chip-check input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Rote Hinweis-Badges an der Tab-Leiste */
.tabbar .tab-icon { position: relative; display: inline-grid; place-items: center; }
.tab-badge { position: absolute; top: -7px; right: -13px; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px;
  background: #e5322d; color: #fff; font-size: .66rem; font-weight: 800; line-height: 1.15rem; text-align: center;
  box-shadow: 0 0 0 2px var(--surface); animation: badge-pop .25s ease; }
@keyframes badge-pop { from { transform: scale(.4); opacity: 0; } }
.badge-dot { background: #e5322d; color: #fff; }
.code-input { font-size: 1.6rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Demo installation */
.demo-banner { background: var(--warning-soft); border-bottom: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); font-size: .88rem; }
.demo-banner .container { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; padding-block: .45rem; }
.demo-banner-cta { margin-left: auto; font-weight: 600; white-space: nowrap; }
.demo-banner svg { width: 1rem; height: 1rem; color: var(--warning); }
@media (min-width: 960px) { .page-with-tabbar .demo-banner { padding-left: 96px; } }

/* Push-Nachrichten */
.push-head { display: flex; gap: .75rem; align-items: flex-start; }
.push-head h2 { font-size: 1.05rem; }
.push-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--primary-soft); color: var(--primary); }
.push-prompt { border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.push-status { display: flex; gap: .4rem; align-items: center; color: var(--success); font-weight: 650; }
.check strong .icon { width: 1em; height: 1em; vertical-align: -.12em; color: var(--muted); }

/* Gast-Teilnahme mit Konto verbinden */
.link-offer { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.link-offer-text { flex: 1 1 260px; display: grid; gap: .15rem; min-width: 0; }

/* ---------- crewgo ----------
   Same layout, own colours: a calmer blue-green for trips instead of the warm party red. */
.produkt-crewgo {
  --primary: #1f6f8b;
  --primary-hover: #185a72;
  --primary-soft: #e2f0f5;
  --accent: #f2a33a;
  --accent-soft: #fdf0dc;
  --night: #0f2b3a;
}
@media (prefers-color-scheme: dark) {
  .produkt-crewgo { --primary: #57b6d4; --primary-hover: #7ccbe4; --primary-soft: #14313d; --night: #0b2130; }
}

/* ---------- Knipsmit ----------
   Violett statt Feierrot und Reiseblau: Das Produkt soll neben den beiden anderen nicht wie ein
   Ableger aussehen. Weiß auf #6d28d9 bleibt deutlich über 4,5 : 1. */
.produkt-knipsmit {
  --primary: #6d28d9;
  --primary-hover: #5b21b6;
  --primary-soft: #efe7fd;
  --accent: #ff5fa2;
  --accent-soft: #ffe6f1;
  --night: #1d1633;
}
@media (prefers-color-scheme: dark) {
  .produkt-knipsmit { --primary: #a78bfa; --primary-hover: #c4b5fd; --primary-soft: #251a3f; --night: #140f24; }
}

/* ---------- Große Schrift ----------
   Grid and flex children may shrink below their content, otherwise large text (browser or phone setting)
   pushes cards past the screen edge. Kept at the end so it wins over the component rules above. */
body { overflow-wrap: break-word; }
/* Proper German hyphenation instead of breaking words anywhere (e.g. „Benachrichtigungen“ on a narrow phone). */
@media (max-width: 560px) { body { hyphens: auto; -webkit-hyphens: auto; } .btn, .pill, input, .input { hyphens: manual; } }
.grid > *, .grid-2 > *, .grid-3 > *, .list li > *, .setup-text, .card-header > *, .stat, summary > *, label > *,
.setup-steps > li, .activity-feed li > *, .need-card > *, .help-list > *, .timeline-item > *, .plan-cards > * { min-width: 0; }
.input, .select, .textarea { max-width: 100%; min-width: 0; }
@media (max-width: 560px) {
  /* Auf dem Handy nimmt eine mitlaufende Kopfzeile Platz weg, den der Inhalt braucht – und die
     Navigation steht bei Feiern ohnehin unten. Sie scrollt deshalb einfach weg. */
  .topbar { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .btn { white-space: normal; text-align: center; overflow-wrap: anywhere; }
  .pill { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
  .shop-amount { white-space: normal; }
  .card-header { flex-wrap: wrap; }
  .activity-feed .muted { white-space: normal; }
  .list li, .help-item > summary, .contrib-item { flex-wrap: wrap; }
  .setup-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .setup-steps li > .btn { grid-column: 2; justify-self: start; }
  /* Am Handy steht die Auswahl untereinander. Damit sie nicht wie eine Liste von Wörtern wirkt,
     bekommt jede Möglichkeit einen eigenen Rahmen und die gewählte eine deutliche Füllung.
     Kein zusätzlicher Haken: der steht im Text schon für „Schlüssel hinterlegt“. */
  .segmented { display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); border-radius: 18px; gap: 4px; }
  .segmented label { display: block; height: 100%; }
  .segmented span { display: grid; place-items: center; height: 100%; text-align: center; padding: .6rem .5rem; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); }
  .segmented input:checked + span {
    background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: none;
  }
}

/* Auf Feier-Seiten trägt die untere Leiste schon fünf Ziele. Oben bleiben am Handy nur Glocke und
   Konto – die beiden, die dort fehlen. Ab Tablet ist Platz für alles. */
@media (max-width: 560px) {
  .topnav-schmal a:not([aria-label="Benachrichtigungen"]):not([aria-label="Mein Konto"]) { display: none; }
}
/* Der letzte Eintrag der Planungsleiste führt zurück zum Überblick – sichtbar abgesetzt. */
.subnav .subnav-alle { color: var(--primary); }

/* Der Ort im Kopf ist ein Link zur Karte – er soll aussehen wie der Rest der Kopfzeile,
   aber erkennbar antippbar sein. */
.hero-ort { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Die Antworten hinter dem Namen der Liste: ✓ kommen, ? vielleicht, ✗ abgesagt, und was noch
   offen ist. Auf dem farbigen Kopf müssen die Töne hell bleiben, sonst liest sie niemand –
   deshalb nicht die Ampelfarben der Karten, sondern deren helle Verwandte. Die Zeichen tragen
   die Bedeutung, die Farbe hilft nur; wer nicht farbsehen kann, liest denselben Satz im Titel. */
.hero-zusagen > span { display: inline-flex; gap: .3rem; margin-left: .35rem; }
.hero-zusagen .z-zu,
.hero-zusagen .z-viell,
.hero-zusagen .z-ab,
.hero-zusagen .z-offen { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-zusagen .z-zu { color: #b9f6c4; }
.hero-zusagen .z-viell { color: #ffe08a; }
.hero-zusagen .z-ab { color: rgba(255, 255, 255, .55); }
/* Offen fordert zu etwas auf – als Einziges bekommt es eine Fläche. */
.hero-zusagen .z-offen {
  background: rgba(255, 92, 92, .9); color: #fff;
  padding: 0 .4rem; border-radius: 999px; font-size: .82rem;
}
.hero-ort:hover { text-decoration-thickness: 2px; }

/* Ortssuche unter dem Ortsfeld */
.ortssuche { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }

/* ---------- Sprachkarte zum Vorzeigen ----------
   Wer eine fremde Sprache nicht sprechen mag, hält das Telefon hin. Deshalb groß, ruhig und ohne
   alles, was ablenkt – und dunkel, damit sie auch in der Sonne zu lesen ist. */
.sprachkarte {
  position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; gap: 1rem;
  grid-template-rows: 1fr auto; padding: 2rem 1.5rem calc(2rem + var(--safe-bottom));
  background: #14121c; color: #fff; text-align: center; cursor: pointer; animation: fade .15s ease;
}
.sprachkarte-inhalt { display: grid; gap: .75rem; align-content: center; }
.sprachkarte-satz { font-size: clamp(2rem, 9vw, 4rem); font-weight: 750; line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
.sprachkarte-laut { font-size: clamp(1rem, 4vw, 1.5rem); opacity: .75; margin: 0; }
.sprachkarte-deutsch { font-size: clamp(.95rem, 3.5vw, 1.25rem); opacity: .6; margin: 0; }
.sprachkarte-zu { color: #fff; border-color: rgba(255, 255, 255, .3); }

/* ---------- Aufklappen: ein Zeichen für alle ----------
   Ein Kasten, der sich aufklappen lässt, muss das zeigen – und wenn er offen ist, dass man ihn
   wieder zuklappen kann. Die Zeilen der Planung, die Hilfe und die Betriebseinstellungen bringen
   dafür ihr eigenes Zeichen mit; alle übrigen bekommen es hier, damit es überall dasselbe ist:
   ein Winkel rechts außen, der sich beim Öffnen dreht.

   Ausgenommen sind Zusammenfassungen, die als Knopf gestaltet sind („Ich bringe etwas mit“) –
   dort wäre der Winkel am rechten Rand vom Knopf abgetrennt und sähe aus wie ein Versehen.
   Ebenso die Zusage-Karte: Sie trägt ihren Winkel schon links neben der Frage (.zusage-pfeil),
   und zwei Winkel an einer Karte sehen nach Fehler aus, nicht nach System. */
details:not(.plan-details, .task-details, .shop-details, .need-details, .help-item, .settings-group, .comments, .guest-menu, .zusage-karte) > summary:not(.btn) {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  list-style: none;
}
details:not(.plan-details, .task-details, .shop-details, .need-details, .help-item, .settings-group, .comments, .guest-menu, .zusage-karte) > summary:not(.btn)::-webkit-details-marker { display: none; }
details:not(.plan-details, .task-details, .shop-details, .need-details, .help-item, .settings-group, .comments, .guest-menu, .zusage-karte) > summary:not(.btn)::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.15rem) rotate(45deg);
  opacity: .5;
  transition: transform .15s ease;
}
details[open]:not(.plan-details, .task-details, .shop-details, .need-details, .help-item, .settings-group, .comments, .guest-menu, .zusage-karte) > summary:not(.btn)::after {
  transform: translateY(.1rem) rotate(-135deg);
}

/* Ohne Netz sieht man den gesicherten Stand – und muss es wissen. Deshalb oben, in Ruhe, aber
   nicht zu übersehen: Ein alter Ablauf ohne Hinweis ist schlimmer als eine weiße Seite. */
.offline-band {
  position: sticky; top: 0; z-index: 140; padding: .5rem 1rem;
  background: #4a4458; color: #fff; text-align: center; font-size: .85rem; font-weight: 600;
}

/* ---------- Assistent: ein Formular in Schritten ----------
   Der Kopf sagt, wo man ist und wie weit es noch ist. Beides zusammen, weil „Schritt 2 von 3“
   allein nichts über den Inhalt sagt und eine Überschrift allein nichts über die Länge. */
.assistent-kopf { display: grid; gap: .15rem; margin-bottom: 1.25rem; }
.assistent-kopf .assistent-zaehler { font-size: .8rem; color: var(--muted); font-weight: 600; }
.assistent-kopf strong { font-size: 1.15rem; }
.assistent-balken { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: .4rem; }
.assistent-balken > span { display: block; height: 100%; background: var(--primary); transition: width .2s ease; }
/* „Weiter“ steht rechts, auch wenn „Zurück“ im ersten Schritt fehlt – der Knopf soll nicht
   springen, sobald man einmal zurückgegangen ist. */
.assistent-fuss { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem; }
.assistent-fuss > .btn-ghost { margin-right: auto; }

/* ---------- Kopfbereich der Übersicht ----------
   Was mich betrifft, steht oben und flach: eine Zeile je Sache, keine Karte. Karten sind für
   Inhalte, an denen man arbeitet – ein Status ist keiner. */
.kopf-zeile {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .85rem; margin-bottom: .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface); color: inherit; text-decoration: none;
}
.kopf-zeile .grow { min-width: 0; }
.kopf-marke { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--line); color: var(--ink-soft); }
.kopf-marke.is-ja { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.kopf-marke.is-vielleicht { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.kopf-wetter:hover { border-color: var(--line-strong); }
.kopf-zeile.is-attention { border-color: var(--danger); }
.kopf-zeile form { display: flex; align-items: center; gap: .4rem; margin: 0; }
.select-sm { min-height: 36px; padding: .25rem .5rem; width: auto; font-size: .9rem; }
/* Das Seltene direkt unter der Zeile, ohne eigene Karte drumherum. */
.kopf-mehr { margin: -.2rem 0 .6rem; }
.zusage-frage { margin-bottom: .6rem; }
@media (max-width: 520px) {
  .kopf-zeile { flex-wrap: wrap; }
  .kopf-zeile form { width: 100%; }
  .select-sm { width: 100%; }
}

/* ---------- Meine Notizen: eine Zeile, ein Haken ---------- */
.notiz-neu { display: flex; gap: .5rem; align-items: center; }
.notiz-neu .input { flex: 1; }
.notiz-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.notiz-liste li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.notiz-liste li:last-child { border-bottom: 0; }
.notiz-liste form { margin: 0; display: flex; }
.notiz-liste .grow { min-width: 0; overflow-wrap: anywhere; }
/* Der Haken ist die Hauptsache: groß genug für einen Daumen, ohne wie ein Knopf zu wirken. */
.notiz-haken {
  flex: none; width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--success);
  display: grid; place-items: center; padding: 0;
}
.notiz-haken:hover { border-color: var(--ink-soft); }
.notiz-haken .icon { width: 16px; height: 16px; }
.notiz-liste li.is-done .grow { text-decoration: line-through; color: var(--muted); }
.notiz-liste li.is-done .notiz-haken { border-color: var(--success); background: var(--success-soft); }
@media (pointer: coarse) { .notiz-haken { width: 32px; height: 32px; } }

/* Eine amtliche Warnung steht bei den Details wie jede andere Angabe – sie darf dort aber nicht
   aussehen wie eine Uhrzeit. Farbe an genau einer Stelle, damit sie etwas wert bleibt. */
.list li.is-warnung { border-left: 3px solid var(--danger); padding-left: .6rem; }
.list li.is-warnung strong { color: var(--danger); }

/* Die ganze Zeile ist das Ziel, nicht der Pfeil am Rand.
   Ein Listeneintrag, dessen Text nach Inhalt aussieht und dessen einziges Ziel ein 30 Pixel
   breites Dreieck ist, wird am Telefon verfehlt – und wer danebentippt, hält die Zeile für
   tot. Die Fläche ist kostenlos; sie muss nur vergeben werden. */
.list > li > .zeile-link {
  display: flex; align-items: center; gap: .75rem; flex: 1 1 auto; min-width: 0;
  color: inherit; text-decoration: none; margin: -.35rem -.4rem; padding: .35rem .4rem;
  border-radius: var(--radius-s);
}
.list > li > .zeile-link:hover { background: var(--bg-soft); }
.list > li > .zeile-link .block { display: block; }
.list > li > .zeile-link .zeile-pfeil { flex: none; display: inline-flex; color: var(--muted); }
.list > li > .zeile-link:hover .zeile-pfeil { color: var(--ink-soft); }

/* ---------- Nachschlagen am Telefon ----------
   Am Schreibtisch steht „Details“ rechts im Blick. Am Telefon stapeln die Spalten (links zuerst),
   und die Karte landete hinter allem – wer Adresse oder Telefonnummer suchte, scrollte an der
   ganzen Feier vorbei. Unterhalb der Spaltenbreite lösen wir die beiden Hüllen auf, damit die
   Karten selbst zu Geschwistern werden und sich ordnen lassen. */
@media (max-width: 899.98px) {
  .grid-2.grid-haupt { display: flex; flex-direction: column; }
  .grid-2.grid-haupt > .grid { display: contents; }
  /* Zuerst der Kopfbereich (Status, Wetter, Knöpfe), dann das Nachschlagen, dann der Rest.
     Die drei Stufen stehen einzeln da, weil „alles außer“ beim nächsten neuen Kasten falsch wäre. */
  .grid-2.grid-haupt > .grid > * { order: 2; }
  .grid-2.grid-haupt > .grid > .zusage-frage,
  .grid-2.grid-haupt > .grid > .kopf-zeile,
  .grid-2.grid-haupt > .grid > .kopf-mehr,
  .grid-2.grid-haupt > .grid > .schnellaktionen { order: 0; }
  .grid-2.grid-haupt [data-nachschlagen] { order: 1; }
}

/* Die Notizen sitzen unten in „Für dich“ – abgesetzt, aber ohne eigene Karte. */
.notizen-block { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .75rem; }
.notizen-block > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .4rem; }

/* ---------- Eigener Status im Kopfblock ----------
   Die Antwort steht direkt neben der Rolle, über dem Titel – beides beantwortet „wer bin ich
   hier?“, und danach sucht man beim Öffnen zuerst. Geändert wird gleich dort; ein Auswahlfeld
   statt eines Weges über eine Karte weiter unten. Solange niemand geantwortet hat, ist es hell
   gefüllt: Dann ist es keine Anzeige, sondern eine Frage. */
.hero .hero-ich { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.hero .hero-zusage { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.hero .hero-zusage .select {
  min-height: 34px; width: auto; padding: .2rem 1.8rem .2rem .6rem;
  background-color: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35);
  color: #fff; font-weight: 600; font-size: .92rem;
}
.hero .hero-zusage .select option { color: var(--ink); background: var(--surface); }
.hero .hero-zusage.is-offen .select { background-color: #fff; color: var(--night, #1b1726); border-color: #fff; }
.hero .hero-warnung { font-weight: 650; text-decoration-thickness: 2px; }
/* Die Zeile im Kopf darf umbrechen, ohne dass das Feld die Breite sprengt. */
@media (max-width: 520px) { .hero .hero-zusage .select { max-width: 100%; } }