:root {
  --accent: #1d3557;
  --accent-text: #fff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  color: #1a1a1a;
  background: #f7f7f8;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

h1 { font-size: 1.6rem; margin: 0 0 .5rem; }

.meta { color: #555; margin: 0 0 1.5rem; }

a { color: var(--accent); }

/* ── Top navigation ──────────────────────────────────────────────────────── */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--accent);
  color: #fff;
  padding: .6rem 1rem;
}
.topnav .brand { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.15rem; min-width: 0; display: inline-flex; align-items: center; gap: .5rem; }
/* Schul-Bildmarke (branding/FvSS_Bildmarke.svg → fvs.svg). Als CSS-Maske
   eingebunden, damit sie per currentColor die Brand-Farbe jedes Themes
   übernimmt statt in ihrer eigenen Farbe zu bleiben. */
.brand-logo { flex: none; width: 28px; height: 28px; background-color: currentColor;
  -webkit-mask: url("fvs.16dbc121ca5f.svg") center / contain no-repeat;
          mask: url("fvs.16dbc121ca5f.svg") center / contain no-repeat; }
.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topnav .navlinks { display: flex; align-items: center; gap: .25rem 1rem; flex-wrap: wrap; }
/* Links, der Stil-Umschalter (als Textlink getarntes <select>) und der Abmelden-
   Button teilen sich Farbe, Schrift, Padding und vertikale Mitte, damit die Nav
   in jedem Thema einheitlich „brand · Start Galerie Konto Stil wählen ▾ Abmelden" liest.
   --nav-fg wird je Thema (und im Dark-Block von Stil 1) gesetzt. */
.topnav .navlinks a,
.topnav .navlinks .linklike,
.topnav .navlinks .style-select {
  color: var(--nav-fg, #fff);
  font: inherit;
  text-decoration: none;
  padding: .3rem .55rem;
  border-radius: 6px;
  font-size: .98rem;
  line-height: inherit;
}
/* Stil-Umschalter wie ein Textlink: native Box/Pfeil entfernen, transparent. */
.topnav .navlinks .style-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  cursor: pointer;
}
.topnav .navlinks .linklike {
  background: transparent;
  border: 0;
  cursor: pointer;
}
/* Der Dropdown-Hinweis ▾ steckt jetzt im Label des <select> selbst
   („Stil wählen ▾"), damit das Dreieck Teil des klickbaren Elements ist. */
.topnav .navlinks .style-switcher { display: inline-flex; align-items: center; }
.topnav .navlinks a:hover,
.topnav .navlinks .linklike:hover,
.topnav .navlinks .style-select:hover { background: rgba(255, 255, 255, .15); }
.topnav .navlinks .style-select:focus-visible { outline: 2px solid var(--nav-fg, #fff); outline-offset: 1px; }

/* ── Sticky RSVP status bar ──────────────────────────────────────────────── */
.statusbar {
  /* Kein Top-Bar mehr: ein abgesetzter Block im Inhalt, direkt über der Einladung,
     in Kartenbreite zentriert. Enthält je „Frage" (Aktivität) eine eigene Zeile. */
  background: var(--accent);
  color: var(--accent-text);
  padding: .85rem 1rem;
  border-radius: 10px;
  max-width: 680px;
  margin: 0 auto 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
  top:0px;
  position: sticky;
  z-index: 1;
}

.sb-heading { font-weight: 700; font-size: 1.05rem; }
/* Eine Frage (Aktivität) je Block; dünne Trennlinie nur ZWISCHEN den Fragen. */
.rsvp-question { display: flex; flex-direction: column; gap: .45rem; padding-top: .6rem; }
.rsvp-question + .rsvp-question { border-top: 1px solid rgba(255, 255, 255, .25); }
.rq-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; }
.rq-text { font-weight: 600; font-size: 1.05rem; }
/* Label + Hinweis: brechen auf schmalen Schirmen zuerst in eine eigene Zeile um. */
.sb-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
.sb-label { font-weight: 600; }
.sb-note { opacity: .85; font-size: .9rem; }
/* Warnhinweis (Frist abgelaufen / ausgebucht): helle, gut lesbare Warnfarbe auf
   der dunklen/akzentfarbenen Leiste. Volle Deckkraft, damit er auffällt. */
.sb-warn { opacity: 1; color: #ffd166; font-weight: 600; }
/* Info-Zeile (Belegung / Frist): bewusst zurückhaltend, wie .sb-note. */
.sb-info { opacity: .8; }

/* Begleitung-Stepper: kompakt, lesbar auf der farbigen Leiste; bricht bei
   Bedarf in eine eigene Zeile um (wie .sb-text/.sb-btns). */
.sb-guests { display: flex; align-items: center; gap: .4rem; font-size: .95rem; }
.sb-guests label { font-weight: 600; white-space: nowrap; }
.sb-guests input {
  width: 4.2rem;
  padding: .35rem .4rem;
  font-size: 1rem;
  line-height: 1.1;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 6px;
}

/* Die drei Buttons bleiben zusammen in einer Zeile (nowrap), so lange es geht. */
.sb-btns,
.rq-btns { display: flex; flex-wrap: nowrap; gap: .5rem; }

.statusbar button {
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .5);
  background: transparent;
  color: #fff;
  padding: .55rem 1.2rem;          /* ~50 % größer als zuvor (.35rem .8rem) */
  border-radius: 8px;
  font-size: 1.4rem;               /* ~50 % größer als zuvor (.95rem) */
  line-height: 1.1;
  white-space: nowrap;
  transition: opacity .15s;
}
.statusbar button:hover { background: rgba(255, 255, 255, .15); }
.statusbar .active {
  outline: 2px solid #fff;
  font-weight: bold;
  background: rgba(255, 255, 255, .2);
}
/* Gesperrte Buttons (Frist abgelaufen / ausgebucht): gedimmt, nicht klickbar,
   kein Hover-Highlight. Greift auch, wenn .active gesetzt ist (z. B. die eigene
   aktuelle Antwort nach Fristablauf). */
.statusbar button:disabled,
.statusbar button:disabled:hover { opacity: .4; cursor: not-allowed; background: transparent; }
.statusbar .active:disabled { background: rgba(255, 255, 255, .2); }
/* Ist eine Wahl getroffen, werden die anderen beiden gedimmt. */
.sb-btns.has-choice button:not(.active) { opacity: .5; }
.sb-btns.has-choice button:not(.active):hover { opacity: 1; }
/* Gesperrte Buttons bleiben auch in diesem Fall gedimmt (kein Hover-Aufhellen). */
.sb-btns.has-choice button:disabled:not(.active),
.sb-btns.has-choice button:disabled:not(.active):hover { opacity: .4; }

/* Aufmerksamkeits-Nudge (nur ohne Rückmeldung; getriggert in event_detail.js). */
.sb-btns.shake,
.rq-btns.shake { animation: sb-shake .6s ease; }
.sb-btns.shake button,
.rq-btns.shake button { animation: sb-flash .6s ease; }
@keyframes sb-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}
@keyframes sb-flash {
  0%, 100% { background: transparent; box-shadow: none; }
  40% { background: rgba(255, 255, 255, .35); box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
}

/* Buttons auf kleineren Schirmen verkleinern, damit sie in einer Zeile bleiben. */
@media (max-width: 520px) {
  .statusbar button { font-size: 1.15rem; padding: .5rem .7rem; }
}
@media (max-width: 380px) {
  .statusbar button { font-size: 1rem; padding: .45rem .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-btns.shake, .sb-btns.shake button,
  .rq-btns.shake, .rq-btns.shake button { animation: none; }
}

/* ── „Wer kommt" Antwort-Matrix + Staff-Frage-Zusammenfassung ────────────────── */
.rsvp-matrix-wrap { overflow-x: auto; }
.rsvp-matrix { border-collapse: collapse; width: 100%; font-size: .95rem; }
.rsvp-matrix th, .rsvp-matrix td {
  border: 1px solid var(--border, #e2e2e2);
  padding: .45rem .6rem;
  text-align: left;
  white-space: nowrap;
}
.rsvp-matrix thead th { background: rgba(0, 0, 0, .04); font-weight: 700; }
/* Leistungskurs-Gruppenüberschrift quer über die ganze Tabelle. */
.rsvp-matrix .rm-group th {
  background: rgba(0, 0, 0, .08);
  font-weight: 700;
  text-align: left;
}
.rsvp-matrix .rm-name { font-weight: 600; }
.rsvp-matrix .rm-yes   { color: #1f7a33; }
.rsvp-matrix .rm-no    { color: #b00020; }
.rsvp-matrix .rm-maybe { color: #8a6d00; }
.rsvp-matrix .rm-none  { color: #999; }
.rsvp-qsummary { margin: 0 0 1rem; }
.rsvp-qsummary-title { margin: 0 0 .35rem; font-size: 1.05rem; }

/* ── Theme „Immich" (style 1) — page chrome + card, light/dark ───────────────
   Scoped to body.theme-style1, which event_detail sets only when style == "1".
   Lives here (not in the card partial) so it applies on the WEB page only — the
   e-mail card stays pure inline + light. Immich tokens: primary #4250af / dark
   #accbfa · bg #fff / dark #0a0a0a · fg #000 / dark #e5e7eb · panel #f6f8fe. */
body.theme-style1 { background: #f6f8fe; }
body.theme-style1 .statusbar { background: #4250af; }

@media (prefers-color-scheme: dark) {
  body.theme-style1 { background: #0a0a0a; color: #e5e7eb; }
  body.theme-style1 .statusbar { background: #161616 !important; }
  body.theme-style1 .statusbar button { border-color: #3a3a3a; color: #e5e7eb; }
  body.theme-style1 .statusbar button:disabled,
  body.theme-style1 .statusbar button:disabled:hover { background: transparent; }
  body.theme-style1 .statusbar .active:disabled { background: rgba(172, 203, 250, .18); }
  body.theme-style1 .statusbar .active { background: rgba(172, 203, 250, .18); outline-color: #accbfa; }
  body.theme-style1 .sb-guests input { background: #1c1c1c; color: #e5e7eb; border-color: #3a3a3a; }
  body.theme-style1 footer { color: #9aa0ad; border-top-color: #212121; }

  /* Karte: die Inline-Hell-Styles per !important überschreiben. */
  body.theme-style1 .imv-card { background: #1c1c1c !important; border-color: #2b2b2b !important; }
  body.theme-style1 .imv-pad { color: #e5e7eb !important; }
  body.theme-style1 .imv-title { color: #ffffff !important; }
  body.theme-style1 .imv-meta { color: #accbfa !important; }
  body.theme-style1 .imv-body { color: #e5e7eb !important; border-top-color: #2b2b2b !important; }
  body.theme-style1 .imv-badge { background: #accbfa !important; color: #0a0a0a !important; }
}

/* ── Themes Stil 2–6 — nur Seiten-Chrome (Hintergrund/Statusbar/Footer) ──────
   Diese Regeln stylen ausschließlich das Umfeld der Karte (Seitenhintergrund,
   die Sticky-RSVP-Leiste, den Footer) — die Karte selbst bleibt rein inline +
   E-Mail-tauglich. Jeweils ein dezenter Akzent, der an die Palette der Karte
   erinnert; die Statusbar-Buttons (weiße Schrift/Rand) bleiben gut lesbar, die
   Leiste ist daher immer dunkel genug. event_detail setzt body.theme-styleN. */

/* Stil 2 — 90er-Web: ganz dezenter Nicken (kein Garish im Chrome). Heller,
   leicht bläulicher Seitenhintergrund, Navy-Statusbar wie der Karten-Rahmen. */
body.theme-style2 { background: #eef0f7; }
body.theme-style2 .statusbar { background: #000080; }
body.theme-style2 footer { color: #555a72; }

/* Stil 3 — Google/Material: heller, kühler Hintergrund, Google-Blau-Leiste. */
body.theme-style3 { background: #f1f3f4; }
body.theme-style3 .statusbar { background: #1a73e8; }
body.theme-style3 footer { color: #5f6368; }

/* Stil 4 — Polaroid/Scrapbook: warmes Creme-Papier, gedämpfte Kraft-Leiste. */
body.theme-style4 { background: #f4ecd8; }
body.theme-style4 .statusbar { background: #7a5c3a; }
body.theme-style4 footer { color: #8a7a5c; }

/* Stil 5 — Zeitung/Extrablatt: Zeitungspapier, tiefschwarze Leiste. */
body.theme-style5 { background: #f7f5ef; }
body.theme-style5 .statusbar { background: #1a1a1a; }
body.theme-style5 footer { color: #555555; }

/* Stil 6 — Gala (Schwarz & Gold): dunkles Chrome, Gold-Akzente. Lehnt sich an
   die formelle Karte an; Gold-Rand/aktiver Zustand statt Weiß. */
body.theme-style6 { background: #16161a; color: #e8e2d4; }
body.theme-style6 .statusbar { background: #0e0e10; }
body.theme-style6 .statusbar button { border-color: #c8a24a; color: #f1e9d6; }
body.theme-style6 .statusbar .active { outline-color: #d4af37; background: rgba(212, 175, 55, .2); }
body.theme-style6 .statusbar .active:disabled { background: rgba(212, 175, 55, .2); }
body.theme-style6 .sb-guests input { background: #1c1c1f; color: #e8e2d4; border-color: #c8a24a; }
body.theme-style6 footer { color: #9a937f; border-top-color: #2a2a2e; }

/* ════════════════════════════════════════════════════════════════════════════
   GANZSEITIGE THEMES — globales Chrome je Stil (1–6)
   ════════════════════════════════════════════════════════════════════════════
   Der Body trägt jetzt auf JEDER Seite body.theme-styleN; die Navigation
   enthält einen Stil-Umschalter (<form class="style-switcher"><select
   class="style-select" name="style">). Die folgenden Blöcke erweitern die obigen
   Karten-/Statusbar-Regeln, sodass jedes Thema das gesamte Umfeld einfärbt:
   Topnav, Brand, Navlinks, Stil-Umschalter, Container/Main, Footer, Überschriften,
   Buttons, Meldungen (.msg / .msg-success / .msg-error / .msg-warning / .msg-info),
   Galerie-Chrome (Filterleiste, Dropzone, Kacheln, Lightbox) sowie Auth-/Konto-
   Karten. Spezifität (body.theme-styleN …) schlägt die einfachen Klassenregeln in
   gallery.css/auth.css, auch wenn diese später geladen werden. Bilder/Thumbnails
   bleiben unangetastet. Es werden ausschließlich Farben/Ränder/Hintergründe/Fonts
   gesetzt — kein Layout, keine Größen, keine vorhandenen Selektoren entfernt. */

/* ──────────────────────────────────────────────────────────────────────────
   Stil 1 — Immich (clean, hell; eigene Dark-Variante weiter unten)
   Tokens: primary #4250af · panel #f6f8fe · border #e6e8f5 · fg #1a1a1a.
   ────────────────────────────────────────────────────────────────────────── */
body.theme-style1 { --nav-fg: #fff; }
body.theme-style1 .topnav { background: #4250af; }
body.theme-style1 .topnav .brand { color: #fff; }
body.theme-style1 .topnav .navlinks a:hover,
body.theme-style1 .topnav .navlinks .linklike:hover,
body.theme-style1 .topnav .navlinks .style-select:hover { background: rgba(255, 255, 255, .18); }
body.theme-style1 h1, body.theme-style1 h2 { color: #1a1a1a; }
body.theme-style1 a { color: #4250af; }
body.theme-style1 .btn,
body.theme-style1 .btn-block { background: #4250af; color: #fff; }
body.theme-style1 .btn-secondary { background: #fff; color: #4250af; border-color: #4250af; }
body.theme-style1 .tab-btn:hover,
body.theme-style1 .tab-btn.is-active { color: #4250af; }
body.theme-style1 .tab-btn.is-active { border-bottom-color: #4250af; }
body.theme-style1 .msg { background: #e8f0fe; border-color: #c5d9fb; color: #1a1a1a; }
body.theme-style1 .msg-success { background: #e6f4ea; border-color: #b7e1c4; color: #1e4620; }
body.theme-style1 .msg-error { background: #fdecec; border-color: #f5c2c2; color: #9b1c1c; }
body.theme-style1 .msg-warning { background: #fef7e0; border-color: #fde293; color: #6b5300; }
body.theme-style1 .msg-info { background: #e8f0fe; border-color: #c5d9fb; color: #1a3b6b; }
/* Galerie */
body.theme-style1 .gal-filter,
body.theme-style1 .gal-uploads li { background: #fff; border-color: #e6e8f5; }
body.theme-style1 .gal-filter select { background: #fff; border-color: #d6dae1; color: #1a1a1a; }
body.theme-style1 .gal-dropzone { border-color: #c6cdf0; background: #f6f8fe; }
body.theme-style1 .gal-dropzone:hover,
body.theme-style1 .gal-dropzone.is-dragover { border-color: #4250af; background: #eef2fe; }
body.theme-style1 .gal-quota-fill,
body.theme-style1 .gal-up-fill { background: #4250af; }
body.theme-style1 .gal-tile { background: #e6e8f5; }
/* Auth + Konto */
body.theme-style1 .auth-card { background: #fff; border-color: #e6e8f5; }
body.theme-style1 .auth-field input:focus { outline-color: #4250af; border-color: #4250af; }
body.theme-style1 .quota-box { background: #f1f4fb; border-color: #d7e0f3; }

/* ──────────────────────────────────────────────────────────────────────────
   Stil 2 — 90er-Web (Geocities): Navy/Schwarz, grelle Akzente (Lime/Cyan/
   Magenta/Gelb), Comic-Sans-Vibe — bunt, aber lesbar.
   ────────────────────────────────────────────────────────────────────────── */
body.theme-style2 {
  background: #000080;
  color: #f5f5f5;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard", "Marker Felt", cursive, sans-serif;
}
body.theme-style2 { --nav-fg: #00ffff; }
body.theme-style2 .topnav { background: #000000; border-bottom: 3px ridge #00ffff; }
body.theme-style2 .topnav .brand { color: #ffff00; }
body.theme-style2 .topnav .navlinks a:hover,
body.theme-style2 .topnav .navlinks .linklike:hover,
body.theme-style2 .topnav .navlinks .style-select:hover { background: #ff00ff; color: #000080; }
body.theme-style2 .topnav .navlinks .style-select:focus-visible { outline-color: #ff00ff; }
body.theme-style2 h1 { color: #ffff00; text-shadow: 1px 1px 0 #ff00ff; }
body.theme-style2 h2 { color: #00ffff; }
body.theme-style2 a { color: #00ffff; }
body.theme-style2 .meta,
body.theme-style2 .dash-event-when,
body.theme-style2 .dash-muted { color: #c8c8ff; }
body.theme-style2 .btn,
body.theme-style2 .btn-block { background: #ff00ff; color: #000080; border: 2px outset #ff66ff; }
body.theme-style2 .btn-secondary { background: #000080; color: #00ffff; border: 2px outset #00ffff; }
body.theme-style2 .tab-btn { color: #c8c8ff; }
body.theme-style2 .tab-btn:hover,
body.theme-style2 .tab-btn.is-active { color: #ffff00; }
body.theme-style2 .tab-btn.is-active { border-bottom-color: #ffff00; }
body.theme-style2 .tab-strip { border-bottom-color: #00ffff; }
/* Karten-/Listenflächen lesbar dunkelblau statt weiß */
body.theme-style2 .invitation,
body.theme-style2 ul.events li,
body.theme-style2 .dash-photo-tile {
  background: #000060; border-color: #00ffff; color: #f5f5f5;
}
body.theme-style2 .rsvp-chip,
body.theme-style2 .attendee-item { background: #000060; border-color: #00ffff; color: #f5f5f5; }
body.theme-style2 .attendee-empty { color: #c8c8ff; }
body.theme-style2 .msg { background: #000060; border: 2px ridge #00ffff; color: #f5f5f5; }
body.theme-style2 .msg-success { background: #003300; border-color: #00ff00; color: #b6ffb6; }
body.theme-style2 .msg-error { background: #4a0000; border-color: #ff3333; color: #ffb3b3; }
body.theme-style2 .msg-warning { background: #4a3a00; border-color: #ffff00; color: #fff0a0; }
body.theme-style2 .msg-info { background: #000060; border-color: #00ffff; color: #c8f5ff; }
body.theme-style2 footer { color: #c8c8ff; border-top-color: #00ffff; }
/* Galerie */
body.theme-style2 .gal-filter,
body.theme-style2 .gal-uploads li { background: #000060; border-color: #00ffff; color: #f5f5f5; }
body.theme-style2 .gal-filter label { color: #c8c8ff; }
body.theme-style2 .gal-filter select {
  background: #000080; color: #ffff00; border-color: #00ffff;
}
body.theme-style2 .gal-quota-text { color: #c8c8ff; }
body.theme-style2 .gal-quota-bar,
body.theme-style2 .gal-up-bar { background: #000040; }
body.theme-style2 .gal-quota-fill,
body.theme-style2 .gal-up-fill { background: #ff00ff; }
body.theme-style2 .gal-dropzone { border: 2px dashed #00ffff; background: #000060; }
body.theme-style2 .gal-dropzone:hover,
body.theme-style2 .gal-dropzone.is-dragover { border-color: #ff00ff; background: #000080; }
body.theme-style2 .gal-dz-hint { color: #c8c8ff; }
body.theme-style2 .gal-tile { background: #000040; }
body.theme-style2 .gal-empty { color: #c8c8ff; }
/* Auth + Konto */
body.theme-style2 .auth-card { background: #000060; border: 2px ridge #00ffff; color: #f5f5f5; }
body.theme-style2 .auth-card h2 { color: #ffff00; }
body.theme-style2 .auth-card .hint,
body.theme-style2 .auth-field .helptext,
body.theme-style2 .auth-field ul { color: #c8c8ff; }
body.theme-style2 .auth-field label { color: #f5f5f5; }
body.theme-style2 .auth-field input[type="text"],
body.theme-style2 .auth-field input[type="email"],
body.theme-style2 .auth-field input[type="password"] {
  background: #000080; color: #ffff00; border-color: #00ffff;
}
body.theme-style2 .auth-field input:focus { outline-color: #ff00ff; border-color: #ff00ff; }
body.theme-style2 .auth-sep { color: #c8c8ff; }
body.theme-style2 .auth-sep::before,
body.theme-style2 .auth-sep::after { background: #00ffff; }
body.theme-style2 .auth-error { background: #4a0000; border-color: #ff3333; color: #ffb3b3; }
body.theme-style2 .field-error { color: #ff9999; }
body.theme-style2 .quota-box { background: #000060; border-color: #00ffff; color: #ffff00; }

/* ──────────────────────────────────────────────────────────────────────────
   Stil 3 — Google / Material: weiß, Roboto, Google-Blau #1a73e8, vier
   Google-Farben als Sekundärakzente.
   ────────────────────────────────────────────────────────────────────────── */
body.theme-style3 {
  background: #f1f3f4;
  color: #202124;
  font-family: Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}
body.theme-style3 { --nav-fg: #fff; }
body.theme-style3 .topnav { background: #1a73e8; }
body.theme-style3 .topnav .brand { color: #fff; }
body.theme-style3 .topnav .navlinks a:hover,
body.theme-style3 .topnav .navlinks .linklike:hover,
body.theme-style3 .topnav .navlinks .style-select:hover { background: rgba(255, 255, 255, .18); }
body.theme-style3 h1, body.theme-style3 h2 { color: #202124; }
body.theme-style3 a { color: #1a73e8; }
body.theme-style3 .meta,
body.theme-style3 .dash-event-when,
body.theme-style3 .dash-muted { color: #5f6368; }
body.theme-style3 .btn,
body.theme-style3 .btn-block { background: #1a73e8; color: #fff; }
body.theme-style3 .btn-secondary { background: #fff; color: #1a73e8; border-color: #1a73e8; }
body.theme-style3 .tab-btn:hover,
body.theme-style3 .tab-btn.is-active { color: #1a73e8; }
body.theme-style3 .tab-btn.is-active { border-bottom-color: #1a73e8; }
body.theme-style3 .invitation,
body.theme-style3 ul.events li,
body.theme-style3 .dash-photo-tile { background: #fff; border-color: #dadce0; }
body.theme-style3 .rsvp-chip,
body.theme-style3 .attendee-item { background: #e8f0fe; border-color: #d2e3fc; color: #1a73e8; }
body.theme-style3 .msg { background: #e8f0fe; border-color: #d2e3fc; color: #174ea6; }
body.theme-style3 .msg-success { background: #e6f4ea; border-color: #ceead6; color: #137333; }
body.theme-style3 .msg-error { background: #fce8e6; border-color: #fad2cf; color: #c5221f; }
body.theme-style3 .msg-warning { background: #fef7e0; border-color: #feefc3; color: #b06000; }
body.theme-style3 .msg-info { background: #e8f0fe; border-color: #d2e3fc; color: #174ea6; }
body.theme-style3 footer { color: #5f6368; border-top-color: #dadce0; }
/* Galerie */
body.theme-style3 .gal-filter,
body.theme-style3 .gal-uploads li { background: #fff; border-color: #dadce0; }
body.theme-style3 .gal-filter label { color: #5f6368; }
body.theme-style3 .gal-filter select { background: #fff; border-color: #dadce0; color: #202124; }
body.theme-style3 .gal-dropzone { border-color: #dadce0; background: #f8f9fa; }
body.theme-style3 .gal-dropzone:hover,
body.theme-style3 .gal-dropzone.is-dragover { border-color: #1a73e8; background: #e8f0fe; }
body.theme-style3 .gal-quota-fill,
body.theme-style3 .gal-up-fill { background: #1a73e8; }
body.theme-style3 .gal-tile { background: #e8eaed; }
/* Auth + Konto */
body.theme-style3 .auth-card { background: #fff; border-color: #dadce0; }
body.theme-style3 .auth-card h2 { color: #202124; }
body.theme-style3 .auth-card .hint { color: #5f6368; }
body.theme-style3 .auth-field input[type="text"],
body.theme-style3 .auth-field input[type="email"],
body.theme-style3 .auth-field input[type="password"] { border-color: #dadce0; }
body.theme-style3 .auth-field input:focus { outline-color: #1a73e8; border-color: #1a73e8; }
body.theme-style3 .auth-error { background: #fce8e6; border-color: #fad2cf; color: #c5221f; }
body.theme-style3 .quota-box { background: #e8f0fe; border-color: #d2e3fc; color: #174ea6; }

/* ──────────────────────────────────────────────────────────────────────────
   Stil 4 — Polaroid / Scrapbook: warmes Creme-Papier #f4ecd8, handschrift-
   licher Look in Überschriften, Kraftpapier-/Klebeband-Anmutung.
   ────────────────────────────────────────────────────────────────────────── */
body.theme-style4 {
  background: #f4ecd8;
  color: #3a2e1f;
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", system-ui, sans-serif;
}
body.theme-style4 { --nav-fg: #fdf6e6; }
body.theme-style4 .topnav { background: #7a5c3a; border-bottom: 1px solid #5e4528; }
body.theme-style4 .topnav .brand { color: #fdf6e6; }
body.theme-style4 .topnav .navlinks a:hover,
body.theme-style4 .topnav .navlinks .linklike:hover,
body.theme-style4 .topnav .navlinks .style-select:hover { background: rgba(253, 246, 230, .2); }
body.theme-style4 h1, body.theme-style4 h2 {
  color: #5e4528;
  font-family: "Brush Script MT", "Segoe Script", "Bradley Hand", cursive;
}
body.theme-style4 a { color: #8a5a2b; }
body.theme-style4 .meta,
body.theme-style4 .dash-event-when,
body.theme-style4 .dash-muted { color: #8a7a5c; }
body.theme-style4 .btn,
body.theme-style4 .btn-block { background: #7a5c3a; color: #fdf6e6; }
body.theme-style4 .btn-secondary { background: #fffdf5; color: #7a5c3a; border-color: #7a5c3a; }
body.theme-style4 .tab-btn:hover,
body.theme-style4 .tab-btn.is-active { color: #7a5c3a; }
body.theme-style4 .tab-btn.is-active { border-bottom-color: #7a5c3a; }
body.theme-style4 .tab-strip { border-bottom-color: #d8c8a4; }
body.theme-style4 .invitation,
body.theme-style4 ul.events li,
body.theme-style4 .dash-photo-tile {
  background: #fffdf5; border-color: #d8c8a4;
}
body.theme-style4 .rsvp-chip,
body.theme-style4 .attendee-item { background: #efe3c8; border-color: #d8c8a4; color: #5e4528; }
body.theme-style4 .attendee-empty { color: #8a7a5c; }
body.theme-style4 .msg { background: #f3ead0; border: 1px solid #d8c8a4; color: #5e4528; }
body.theme-style4 .msg-success { background: #e3ecd4; border-color: #bcd0a0; color: #3d5223; }
body.theme-style4 .msg-error { background: #f6ddd2; border-color: #e0b39c; color: #8a3b1c; }
body.theme-style4 .msg-warning { background: #f7ecc8; border-color: #e0c878; color: #7a5a14; }
body.theme-style4 .msg-info { background: #f3ead0; border-color: #d8c8a4; color: #5e4528; }
body.theme-style4 footer { color: #8a7a5c; border-top-color: #d8c8a4; }
/* Galerie */
body.theme-style4 .gal-filter,
body.theme-style4 .gal-uploads li { background: #fffdf5; border-color: #d8c8a4; }
body.theme-style4 .gal-filter label { color: #8a7a5c; }
body.theme-style4 .gal-filter select { background: #fffdf5; border-color: #c9b894; color: #3a2e1f; }
body.theme-style4 .gal-quota-text { color: #8a7a5c; }
body.theme-style4 .gal-quota-bar,
body.theme-style4 .gal-up-bar { background: #e6dabd; }
body.theme-style4 .gal-quota-fill,
body.theme-style4 .gal-up-fill { background: #7a5c3a; }
body.theme-style4 .gal-dropzone { border-color: #c9b894; background: #f8f1de; }
body.theme-style4 .gal-dropzone:hover,
body.theme-style4 .gal-dropzone.is-dragover { border-color: #7a5c3a; background: #f0e6cc; }
body.theme-style4 .gal-dz-hint { color: #8a7a5c; }
body.theme-style4 .gal-tile { background: #e6dabd; }
body.theme-style4 .gal-empty { color: #8a7a5c; }
/* Auth + Konto */
body.theme-style4 .auth-card { background: #fffdf5; border-color: #d8c8a4; }
body.theme-style4 .auth-card h2 { color: #5e4528; }
body.theme-style4 .auth-card .hint,
body.theme-style4 .auth-field .helptext,
body.theme-style4 .auth-field ul { color: #8a7a5c; }
body.theme-style4 .auth-field input[type="text"],
body.theme-style4 .auth-field input[type="email"],
body.theme-style4 .auth-field input[type="password"] {
  background: #fffdf5; color: #3a2e1f; border-color: #c9b894;
}
body.theme-style4 .auth-field input:focus { outline-color: #7a5c3a; border-color: #7a5c3a; }
body.theme-style4 .auth-sep { color: #8a7a5c; }
body.theme-style4 .auth-sep::before,
body.theme-style4 .auth-sep::after { background: #d8c8a4; }
body.theme-style4 .auth-error { background: #f6ddd2; border-color: #e0b39c; color: #8a3b1c; }
body.theme-style4 .field-error { color: #8a3b1c; }
body.theme-style4 .quota-box { background: #efe3c8; border-color: #d8c8a4; color: #5e4528; }

/* ──────────────────────────────────────────────────────────────────────────
   Stil 5 — Zeitung / Extrablatt: Zeitungspapier #f7f5ef, Serif (Georgia),
   schwarze Tinte, Haarlinien.
   ────────────────────────────────────────────────────────────────────────── */
body.theme-style5 {
  background: #f7f5ef;
  color: #111111;
  font-family: Georgia, "Times New Roman", "Times", serif;
}
body.theme-style5 { --nav-fg: #f7f5ef; }
body.theme-style5 .topnav { background: #1a1a1a; border-bottom: 3px double #f7f5ef; }
body.theme-style5 .topnav .brand { color: #f7f5ef; font-family: Georgia, serif; letter-spacing: .02em; }
body.theme-style5 .topnav .navlinks a:hover,
body.theme-style5 .topnav .navlinks .linklike:hover,
body.theme-style5 .topnav .navlinks .style-select:hover { background: rgba(247, 245, 239, .18); }
body.theme-style5 h1, body.theme-style5 h2 {
  color: #111111;
  font-family: Georgia, "Times New Roman", serif;
}
body.theme-style5 h1 { border-bottom: 2px solid #111111; padding-bottom: .25rem; }
body.theme-style5 a { color: #111111; text-decoration: underline; }
body.theme-style5 .meta,
body.theme-style5 .dash-event-when,
body.theme-style5 .dash-muted { color: #555555; }
body.theme-style5 .btn,
body.theme-style5 .btn-block { background: #1a1a1a; color: #f7f5ef; border: 1px solid #1a1a1a; }
body.theme-style5 .btn-secondary { background: #f7f5ef; color: #1a1a1a; border: 1px solid #1a1a1a; }
body.theme-style5 .tab-btn { color: #555; }
body.theme-style5 .tab-btn:hover,
body.theme-style5 .tab-btn.is-active { color: #111111; }
body.theme-style5 .tab-btn.is-active { border-bottom-color: #111111; }
body.theme-style5 .tab-strip { border-bottom-color: #111111; }
body.theme-style5 .invitation,
body.theme-style5 ul.events li,
body.theme-style5 .dash-photo-tile {
  background: #fffefb; border: 1px solid #1a1a1a;
}
body.theme-style5 .rsvp-chip,
body.theme-style5 .attendee-item { background: #efece3; border: 1px solid #1a1a1a; color: #111111; }
body.theme-style5 .attendee-empty { color: #555555; }
body.theme-style5 .msg { background: #efece3; border: 1px solid #1a1a1a; color: #111111; }
body.theme-style5 .msg-success { background: #eef0e6; border-color: #2e5d2e; color: #1e3b1e; }
body.theme-style5 .msg-error { background: #f4e6e3; border-color: #7a1f17; color: #7a1f17; }
body.theme-style5 .msg-warning { background: #f5efdc; border-color: #6b5300; color: #5a4400; }
body.theme-style5 .msg-info { background: #efece3; border-color: #1a1a1a; color: #111111; }
body.theme-style5 footer { color: #555555; border-top: 1px solid #1a1a1a; }
/* Galerie */
body.theme-style5 .gal-filter,
body.theme-style5 .gal-uploads li { background: #fffefb; border: 1px solid #1a1a1a; }
body.theme-style5 .gal-filter label { color: #555555; }
body.theme-style5 .gal-filter select { background: #fffefb; border-color: #1a1a1a; color: #111111; }
body.theme-style5 .gal-quota-text { color: #555555; }
body.theme-style5 .gal-quota-bar,
body.theme-style5 .gal-up-bar { background: #ddd9cd; }
body.theme-style5 .gal-quota-fill,
body.theme-style5 .gal-up-fill { background: #1a1a1a; }
body.theme-style5 .gal-dropzone { border: 2px dashed #1a1a1a; background: #fbf9f3; }
body.theme-style5 .gal-dropzone:hover,
body.theme-style5 .gal-dropzone.is-dragover { border-color: #555555; background: #f1eee5; }
body.theme-style5 .gal-dz-hint { color: #555555; }
body.theme-style5 .gal-tile { background: #ddd9cd; }
body.theme-style5 .gal-empty { color: #555555; }
/* Auth + Konto */
body.theme-style5 .auth-card { background: #fffefb; border: 1px solid #1a1a1a; }
body.theme-style5 .auth-card h2 { color: #111111; font-family: Georgia, serif; }
body.theme-style5 .auth-card .hint,
body.theme-style5 .auth-field .helptext,
body.theme-style5 .auth-field ul { color: #555555; }
body.theme-style5 .auth-field input[type="text"],
body.theme-style5 .auth-field input[type="email"],
body.theme-style5 .auth-field input[type="password"] {
  background: #fffefb; color: #111111; border-color: #1a1a1a;
}
body.theme-style5 .auth-field input:focus { outline-color: #1a1a1a; border-color: #1a1a1a; }
body.theme-style5 .auth-sep { color: #555555; }
body.theme-style5 .auth-sep::before,
body.theme-style5 .auth-sep::after { background: #1a1a1a; }
body.theme-style5 .auth-error { background: #f4e6e3; border-color: #7a1f17; color: #7a1f17; }
body.theme-style5 .field-error { color: #7a1f17; }
body.theme-style5 .quota-box { background: #efece3; border: 1px solid #1a1a1a; color: #111111; }

/* ──────────────────────────────────────────────────────────────────────────
   Stil 6 — Gala (Schwarz & Gold): Anthrazit #0e0e10, Gold #c8a24a/#d4af37,
   Serif, elegant & dunkel.
   ────────────────────────────────────────────────────────────────────────── */
body.theme-style6 { font-family: Georgia, "Times New Roman", serif; }
body.theme-style6 { --nav-fg: #e8e2d4; }
body.theme-style6 .topnav { background: #0e0e10; border-bottom: 1px solid #c8a24a; }
body.theme-style6 .topnav .brand { color: #d4af37; }
body.theme-style6 .topnav .navlinks a:hover,
body.theme-style6 .topnav .navlinks .linklike:hover,
body.theme-style6 .topnav .navlinks .style-select:hover { background: rgba(212, 175, 55, .18); color: #d4af37; }
body.theme-style6 .topnav .navlinks .style-select:focus-visible { outline-color: #d4af37; }
body.theme-style6 h1, body.theme-style6 h2 { color: #d4af37; font-family: Georgia, serif; }
body.theme-style6 a { color: #d4af37; }
body.theme-style6 .meta,
body.theme-style6 .dash-event-when,
body.theme-style6 .dash-muted { color: #9a937f; }
body.theme-style6 .btn,
body.theme-style6 .btn-block { background: #c8a24a; color: #0e0e10; }
body.theme-style6 .btn-secondary { background: transparent; color: #d4af37; border: 1px solid #c8a24a; }
body.theme-style6 .tab-btn { color: #9a937f; }
body.theme-style6 .tab-btn:hover,
body.theme-style6 .tab-btn.is-active { color: #d4af37; }
body.theme-style6 .tab-btn.is-active { border-bottom-color: #d4af37; }
body.theme-style6 .tab-strip { border-bottom-color: #2a2a2e; }
body.theme-style6 .invitation,
body.theme-style6 ul.events li,
body.theme-style6 .dash-photo-tile {
  background: #1c1c1f; border-color: #3a3a2e; color: #e8e2d4;
}
body.theme-style6 .rsvp-chip,
body.theme-style6 .attendee-item { background: #1c1c1f; border-color: #c8a24a; color: #e8e2d4; }
body.theme-style6 .attendee-empty { color: #9a937f; }
body.theme-style6 .msg { background: #1c1c1f; border: 1px solid #c8a24a; color: #e8e2d4; }
body.theme-style6 .msg-success { background: #15251a; border-color: #4a7a55; color: #b6e0c2; }
body.theme-style6 .msg-error { background: #2a1414; border-color: #a8504a; color: #f0b6b0; }
body.theme-style6 .msg-warning { background: #2a2310; border-color: #c8a24a; color: #f0dca0; }
body.theme-style6 .msg-info { background: #1c1c1f; border-color: #c8a24a; color: #e8e2d4; }
/* Galerie */
body.theme-style6 .gal-filter,
body.theme-style6 .gal-uploads li { background: #1c1c1f; border-color: #3a3a2e; color: #e8e2d4; }
body.theme-style6 .gal-filter label { color: #9a937f; }
body.theme-style6 .gal-filter select { background: #1c1c1f; color: #e8e2d4; border-color: #c8a24a; }
body.theme-style6 .gal-quota-text { color: #9a937f; }
body.theme-style6 .gal-quota-bar,
body.theme-style6 .gal-up-bar { background: #2a2a2e; }
body.theme-style6 .gal-quota-fill,
body.theme-style6 .gal-up-fill { background: #c8a24a; }
body.theme-style6 .gal-dropzone { border-color: #c8a24a; background: #161618; }
body.theme-style6 .gal-dropzone:hover,
body.theme-style6 .gal-dropzone.is-dragover { border-color: #d4af37; background: #1c1c1f; }
body.theme-style6 .gal-dz-hint { color: #9a937f; }
body.theme-style6 .gal-tile { background: #2a2a2e; }
body.theme-style6 .gal-empty { color: #9a937f; }
/* Auth + Konto */
body.theme-style6 .auth-card { background: #1c1c1f; border-color: #c8a24a; color: #e8e2d4; }
body.theme-style6 .auth-card h2 { color: #d4af37; }
body.theme-style6 .auth-card .hint,
body.theme-style6 .auth-field .helptext,
body.theme-style6 .auth-field ul { color: #9a937f; }
body.theme-style6 .auth-field label { color: #e8e2d4; }
body.theme-style6 .auth-field input[type="text"],
body.theme-style6 .auth-field input[type="email"],
body.theme-style6 .auth-field input[type="password"] {
  background: #161618; color: #e8e2d4; border-color: #c8a24a;
}
body.theme-style6 .auth-field input:focus { outline-color: #d4af37; border-color: #d4af37; }
body.theme-style6 .auth-sep { color: #9a937f; }
body.theme-style6 .auth-sep::before,
body.theme-style6 .auth-sep::after { background: #3a3a2e; }
body.theme-style6 .auth-error { background: #2a1414; border-color: #a8504a; color: #f0b6b0; }
body.theme-style6 .field-error { color: #f0b6b0; }
body.theme-style6 .quota-box { background: #1c1c1f; border-color: #c8a24a; color: #d4af37; }

/* Stil 1 — Dark-Variante des neuen Chrome (ergänzt die bestehende Dark-Karte
   oben; Immich behält exakt sein Hell/Dunkel-Verhalten via prefers-color-scheme).
   Tokens dark: primary #accbfa · bg #0a0a0a · panel #161616 · fg #e5e7eb. */
@media (prefers-color-scheme: dark) {
  body.theme-style1 { --nav-fg: #e5e7eb; }
  body.theme-style1 .topnav { background: #161616; }
  body.theme-style1 .topnav .brand { color: #fff; }
  body.theme-style1 .topnav .navlinks a:hover,
  body.theme-style1 .topnav .navlinks .linklike:hover,
  body.theme-style1 .topnav .navlinks .style-select:hover { background: rgba(172, 203, 250, .18); }
  body.theme-style1 .topnav .navlinks .style-select:focus-visible { outline-color: #accbfa; }
  body.theme-style1 h1, body.theme-style1 h2 { color: #ffffff; }
  body.theme-style1 a { color: #accbfa; }
  body.theme-style1 .meta,
  body.theme-style1 .dash-event-when,
  body.theme-style1 .dash-muted { color: #9aa0ad; }
  body.theme-style1 .btn,
  body.theme-style1 .btn-block { background: #accbfa; color: #0a0a0a; }
  body.theme-style1 .btn-secondary { background: #1c1c1c; color: #accbfa; border-color: #accbfa; }
  body.theme-style1 .tab-btn { color: #9aa0ad; }
  body.theme-style1 .tab-btn:hover,
  body.theme-style1 .tab-btn.is-active { color: #accbfa; }
  body.theme-style1 .tab-btn.is-active { border-bottom-color: #accbfa; }
  body.theme-style1 .tab-strip { border-bottom-color: #212121; }
  body.theme-style1 .invitation,
  body.theme-style1 ul.events li,
  body.theme-style1 .dash-photo-tile { background: #1c1c1c; border-color: #2b2b2b; }
  body.theme-style1 .rsvp-chip { background: #1c1c1c; border-color: #2b2b2b; color: #e5e7eb; }
  body.theme-style1 .msg { background: #14233a; border-color: #2b4870; color: #e5e7eb; }
  body.theme-style1 .msg-success { background: #14281a; border-color: #2e6b3a; color: #b6e0c2; }
  body.theme-style1 .msg-error { background: #2a1414; border-color: #7a3030; color: #f0b6b0; }
  body.theme-style1 .msg-warning { background: #2a2310; border-color: #6b5300; color: #f0dca0; }
  body.theme-style1 .msg-info { background: #14233a; border-color: #2b4870; color: #cfe0fa; }
  /* Galerie dark */
  body.theme-style1 .gal-filter,
  body.theme-style1 .gal-uploads li { background: #1c1c1c; border-color: #2b2b2b; color: #e5e7eb; }
  body.theme-style1 .gal-filter label { color: #9aa0ad; }
  body.theme-style1 .gal-filter select { background: #1c1c1c; color: #e5e7eb; border-color: #3a3a3a; }
  body.theme-style1 .gal-quota-text { color: #9aa0ad; }
  body.theme-style1 .gal-quota-bar,
  body.theme-style1 .gal-up-bar { background: #2b2b2b; }
  body.theme-style1 .gal-quota-fill,
  body.theme-style1 .gal-up-fill { background: #accbfa; }
  body.theme-style1 .gal-dropzone { border-color: #3a3a3a; background: #161616; }
  body.theme-style1 .gal-dropzone:hover,
  body.theme-style1 .gal-dropzone.is-dragover { border-color: #accbfa; background: #1c1c1c; }
  body.theme-style1 .gal-dz-hint { color: #9aa0ad; }
  body.theme-style1 .gal-tile { background: #2b2b2b; }
  body.theme-style1 .gal-empty { color: #9aa0ad; }
  /* Auth + Konto dark */
  body.theme-style1 .auth-card { background: #1c1c1c; border-color: #2b2b2b; color: #e5e7eb; }
  body.theme-style1 .auth-card h2 { color: #ffffff; }
  body.theme-style1 .auth-card .hint,
  body.theme-style1 .auth-field .helptext,
  body.theme-style1 .auth-field ul { color: #9aa0ad; }
  body.theme-style1 .auth-field label { color: #e5e7eb; }
  body.theme-style1 .auth-field input[type="text"],
  body.theme-style1 .auth-field input[type="email"],
  body.theme-style1 .auth-field input[type="password"] {
    background: #161616; color: #e5e7eb; border-color: #3a3a3a;
  }
  body.theme-style1 .auth-field input:focus { outline-color: #accbfa; border-color: #accbfa; }
  body.theme-style1 .auth-sep { color: #9aa0ad; }
  body.theme-style1 .auth-sep::before,
  body.theme-style1 .auth-sep::after { background: #2b2b2b; }
  body.theme-style1 .auth-error { background: #2a1414; border-color: #7a3030; color: #f0b6b0; }
  body.theme-style1 .quota-box { background: #14233a; border-color: #2b4870; color: #cfe0fa; }
}

/* ── Tabs (staff invitation view: Einladung / Rückmeldungen) ─────────────── */
.tab-strip {
  display: flex;
  gap: .25rem;
  border-bottom: 2px solid #e3e3e6;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.tab-btn {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: .6rem 1rem;
  font-size: 1rem;
  color: #555;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.tab-btn:hover { color: var(--accent); }
.tab-btn.is-active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

.rsvp-summary { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin: 0 0 1rem; }
.rsvp-chip {
  background: #f0f3f8;
  border: 1px solid #dce3ee;
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .95rem;
}
.rsvp-table { width: 100%; border-collapse: collapse; }
.rsvp-table th, .rsvp-table td {
  text-align: left;
  padding: .55rem .6rem;
  border-bottom: 1px solid #ececf0;
}
.rsvp-table th { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: #888; }
.rsvp-table tbody tr:hover { background: #fafbfc; }

/* ── „Wer kommt": Zusagen-Liste (für alle sichtbar) ──────────────────────────
   Chips im Look der .rsvp-chip-Pillen, in einer umbrechenden Liste. */
.attendee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;
}
.attendee-item {
  background: #f0f3f8;
  border: 1px solid #dce3ee;
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .95rem;
}
.attendee-empty { color: #555; }

@media (prefers-color-scheme: dark) {
  body.theme-style1 .attendee-item { background: #1c1c1c; border-color: #2b2b2b; color: #e5e7eb; }
  body.theme-style1 .attendee-empty { color: #9aa0ad; }
}

/* ── Invitation body (rich text from CKEditor) ───────────────────────────── */
.invitation {
  background: #fff;
  border: 1px solid #e3e3e6;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}
.invitation img { max-width: 100%; height: auto; }

/* ── Event list ──────────────────────────────────────────────────────────── */
ul.events { list-style: none; padding: 0; }
ul.events li {
  background: #fff;
  border: 1px solid #e3e3e6;
  border-radius: 8px;
  padding: .9rem 1.1rem;
  margin-bottom: .75rem;
}
ul.events a { font-weight: 600; }

/* ── Messages ────────────────────────────────────────────────────────────── */
.msg {
  background: #e8f0fe;
  border: 1px solid #c5d9fb;
  border-radius: 6px;
  padding: .6rem .9rem;
  margin-bottom: 1rem;
}

/* ── Entwurf-Vorschau (Orga/Staff sieht eine noch nicht aktive Veranstaltung) ──
   Eigene, auffällige Farben (gelb/„draft"), bewusst themen-unabhängig, damit der
   Hinweis in jedem Stil sofort als Vorschau erkennbar ist. */
.preview-banner {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  background: #fff7d6;
  border: 1px solid #e6c200;
  border-left: 4px solid #e6c200;
  border-radius: 6px;
  padding: .6rem .9rem;
  margin-bottom: 1rem;
  color: #5e4b00;
}
.preview-banner-text { font-weight: 700; }
.preview-banner-edit {
  margin-left: auto;
  color: #5e4b00;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

/* ── Bearbeiter-Aktionen am Seitenende (Einladung versenden) ──────────────────
   Nur für Event-Bearbeiter:innen sichtbar; abgesetzt durch eine Trennlinie. */
.editor-actions {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e3e3e6;
}
.editor-actions-title { margin: 0 0 .75rem; font-size: 1.1rem; }
.editor-actions-btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.editor-actions-btns form { margin: 0; }
/* .btn is normally an <a>; on a <button> reset the native chrome so it matches. */
.editor-actions-btns .btn { border: 0; font: inherit; cursor: pointer; }
.editor-actions-note { margin: .75rem 0 0; color: #9a6a00; font-size: .9rem; }

/* ── Buttons / login ─────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: .6rem 1.2rem;
  border-radius: 6px;
}

/* ── Kalender-Export (.ics) — Aktion unter der Einladungskarte ──────────────── */
.ics-action { margin-top: 1.25rem; }
.ics-action .btn { color: #fff; }
.ics-hint { margin: .5rem 0 0; color: #888; font-size: .9rem; }

footer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid #e3e3e6;
  color: #666;
  font-size: .9rem;
}

/* ── Galerie-Lightbox: Download-Aktion ───────────────────────────────────────
   #gal-lb-download nutzt die Klasse .gal-lb-action (in gallery.css gestylt), ist
   aber ein <a>. Diese Ergänzungen lassen den Link exakt wie die Button-Aktionen
   aussehen (Höhe/Ausrichtung, keine Unterstreichung, Standard-Linkfarbe weg). */
#gal-lb-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.1;
  text-decoration: none;
  color: #fff;
}
#gal-lb-download:hover { text-decoration: none; }

/* ── Dashboard (Startseite) ──────────────────────────────────────────────────
   Begrüßung + Veranstaltungskarten + Foto-Streifen. Nutzt das bestehende
   Karten-Aussehen (vgl. ul.events) und die .btn-/.rsvp-chip-Bausteine weiter. */
.dash-section-title {
  font-size: 1.25rem;
  margin: 2rem 0 .75rem;
}

/* Veranstaltungskarten: erben den Look von ul.events li, ordnen den Inhalt
   aber vertikal an, mit etwas Abstand zwischen den Zeilen. */
.dash-events { margin-bottom: 0; }
.dash-event { display: flex; flex-direction: column; gap: .35rem; }
.dash-event-title { font-size: 1.1rem; }
.dash-event-when,
.dash-event-loc,
.dash-event-status { margin: 0; }
.dash-event-when { color: #555; }
.dash-event .btn { align-self: flex-start; margin-top: .4rem; }
.dash-muted { color: #888; }

/* Foto-Streifen: quadratische Kacheln in einem responsiven Raster. */
.dash-photo-stats { color: #555; margin: 0 0 .75rem; }
.dash-photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .5rem;
}
.dash-photo-tile {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e3e3e6;
  background: #fff;
}
.dash-photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dash-gallery-link { margin: .9rem 0 0; }
.dash-gallery-link a { font-weight: 600; }