/* 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; }

*, *::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; }
.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)); }
.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; }
.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; }
.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; }

/* ---------- 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; }
.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; }
}

/* ---------- 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; }
}

/* ---------- 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; }
.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; }