/* ============================================================
   Event-Gästeverwaltung – Design-System v2.1
   Minimalistisch, ruhig, Mobile First.
   Gastseiten: Editorial-Look (Serif-Display, viel Weißraum).
   Management: klares SaaS-Layout.
   ============================================================ */

:root {
  --c1: #1e3a5f;                 /* Primärfarbe: tiefes Marineblau (einstellbar) */
  --c2: #b9974e;                 /* Akzentfarbe: gedämpftes Gold (einstellbar) */
  --bg: #f7f7f5;
  --card: #ffffff;
  --text: #16181d;
  --muted: #71757e;
  --border: #e8e8e4;
  --danger: #c2362b;
  --ok: #1d8a4e;
  --warn: #b97309;
  --radius: 18px;
  --radius-s: 11px;
  --shadow: 0 1px 2px rgba(20, 22, 26, .04), 0 8px 24px -12px rgba(20, 22, 26, .10);
  --font-display: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c1); text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1 { font-size: 1.4rem; margin: .6rem 0 1.2rem; letter-spacing: -.015em; }
h2 { font-size: 1.08rem; margin: 0 0 .7rem; letter-spacing: -.01em; }
p { margin: .4rem 0 .8rem; }
.small { font-size: .85rem; }
.muted { color: var(--muted); }

.eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c1);
  margin-bottom: .35rem;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--c1) 45%, white);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  .card, .stat, .block { animation: rise .35s cubic-bezier(.21,.61,.35,1) both; }
  .card:nth-child(2) { animation-delay: .04s; }
  .card:nth-child(3) { animation-delay: .08s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* --- Container ---------------------------------------------------------- */
.wrap { max-width: 680px; margin: 0 auto; padding: 1.1rem; }

/* --- Karten --------------------------------------------------------------- */
.card, .block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.5rem;
  margin: 0 0 1.1rem;
}
@media (max-width: 480px) { .card, .block { padding: 1.25rem 1.1rem; } }

.callout, .block-hint {
  background: #fdf6e7;
  border: 1px solid #f3e3bd;
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.1rem;
}

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

/* --- Formulare ----------------------------------------------------------------- */
.form-row { margin-bottom: 1.05rem; }
.form-row label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .9rem; }
.form-row .hint { color: var(--muted); font-size: .8rem; margin-top: .3rem; }
.req { color: var(--danger); }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel],
input[type=date], input[type=time], input[type=datetime-local], input[type=color],
input[type=file], select, textarea {
  width: 100%;
  padding: .68rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-s);
  font: inherit;
  background: #fcfcfb;
  color: var(--text);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--c1);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1) 10%, transparent);
  outline: none;
}
input[type=color] { padding: .18rem; height: 2.8rem; }
textarea { resize: vertical; }

/* Großes Code-Eingabefeld (Gast-Login) */
.code-input {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 1.25rem !important;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  padding: .9rem 1rem !important;
}

.check { font-weight: 400 !important; display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; }
/* flex:0 0 auto + feste Größe -> Checkbox schrumpft auf schmalen Displays nicht
   weg und bleibt gut tippbar (vorher konnte langer Text die Checkbox verdrängen) */
.check input { margin-top: .15rem; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--c1); }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 600px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 600px) { .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }

/* --- Ja/Nein-Auswahl (RSVP) ----------------------------------------------- */
.choice-grid { display: grid; grid-template-columns: 1fr; gap: .7rem; }
@media (min-width: 520px) { .choice-grid { grid-template-columns: 1fr 1fr; } }
.choice {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .15rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1rem 1.15rem;
  cursor: pointer;
  background: #fcfcfb;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.choice:hover { transform: translateY(-1px); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .choice-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: #eef0ee; color: var(--muted);
  font-size: 1.3rem; font-weight: 700;
  margin-bottom: .45rem;
  transition: background .15s ease, color .15s ease;
}
.choice strong { font-size: 1.02rem; }
.choice .sub { color: var(--muted); font-size: .82rem; }
.choice:has(input:checked) { border-color: var(--c1); background: color-mix(in srgb, var(--c1) 5%, white); }
.choice.yes:has(input:checked) { border-color: var(--ok); background: #f2faf5; }
.choice.yes:has(input:checked) .choice-icon { background: var(--ok); color: #fff; }
.choice.no:has(input:checked) { border-color: #b9bdc4; background: #f6f7f8; }
.choice.no:has(input:checked) .choice-icon { background: #6b7280; color: #fff; }

/* Klassische Radio-Karten (Management) */
.radio-cards { display: grid; gap: .5rem; }
.radio-cards label {
  display: flex; gap: .6rem; align-items: center; font-weight: 500;
  border: 1.5px solid var(--border); border-radius: var(--radius-s); padding: .8rem 1rem;
  cursor: pointer; background: #fcfcfb; font-size: .92rem;
}
.radio-cards input { width: auto; accent-color: var(--c1); }
.radio-cards label:has(input:checked) { border-color: var(--c1); background: color-mix(in srgb, var(--c1) 5%, white); }

/* --- Begleitpersonen ------------------------------------------------------------ */
.companion-row {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: #fcfcfb;
  padding: 1.1rem 1rem .6rem;
  margin-bottom: .7rem;
}
.remove-companion {
  position: absolute; top: .55rem; right: .55rem;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: #eceeec; color: var(--muted);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.remove-companion:hover { background: #fbe5e2; color: var(--danger); }

.add-tile {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%;
  border: 1.5px dashed #c9ccc9;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text);
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: .9rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.add-tile:hover { border-color: var(--c1); background: color-mix(in srgb, var(--c1) 4%, transparent); }
.add-tile .plus {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c1); color: #fff;
  font-size: 1.15rem; font-weight: 700; line-height: 1;
}
.counter { font-size: .82rem; }

/* --- Buttons --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--c1); color: #fff;
  border: 0; border-radius: 999px;
  padding: .68rem 1.45rem;
  font: inherit; font-weight: 600; font-size: .95rem;
  cursor: pointer; text-decoration: none;
  transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 1px 2px rgba(20,22,26,.12);
}
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-sec { background: #3c4250; }
.btn-ghost { background: transparent; color: var(--text); border: 1.5px solid #d4d6d2; box-shadow: none; }
.btn-ghost:hover { border-color: var(--c1); color: var(--c1); filter: none; }
.btn-danger { background: var(--danger); }
.btn-ok { background: var(--ok); }
.btn-small { padding: .38rem .95rem; font-size: .84rem; }
.btn-xl { padding: .95rem 1.9rem; font-size: 1.06rem; min-height: 54px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn svg { width: 18px; height: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; align-items: center; }

/* --- Klickbare Symbol-Kacheln (selbsterklärende Aktionen) ------------------- */
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.tile {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .45rem;
  padding: 1.25rem 1rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: #fcfcfb;
  text-decoration: none;
  color: var(--text);
  font-weight: 600; font-size: .93rem;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tile:hover {
  border-color: var(--c1);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.tile .ico {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c1) 8%, white);
  color: var(--c1);
}
.tile .ico svg { width: 21px; height: 21px; }
.tile .sub { font-weight: 400; color: var(--muted); font-size: .78rem; }

/* --- Hinweise --------------------------------------------------------------------- */
.flash { border-radius: var(--radius-s); padding: .8rem 1.05rem; margin: 0 0 1rem; font-size: .93rem; }
.flash-ok   { background: #eef9f1; border: 1px solid #c4e8d0; color: #14532d; }
.flash-err  { background: #fdf1f0; border: 1px solid #f3cbc6; color: #8c241c; }
.flash-info { background: #eff4fc; border: 1px solid #cdddf5; color: #1e3f76; }
.flash-warn { background: #fdf6e7; border: 1px solid #f3e3bd; color: #845207; }

/* --- Tabellen ---------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th {
  background: #fafaf8;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted);
  position: sticky; top: 0;
}
tbody tr:hover td { background: #fbfbf9; }
tbody tr:last-child td { border-bottom: 0; }

.badge {
  display: inline-block; padding: .14rem .62rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600; white-space: nowrap;
}
.badge-open { background: #eef0ee; color: #595f59; }
.badge-yes  { background: #e6f5eb; color: #14532d; }
.badge-no   { background: #fdeeec; color: #8c241c; }
.badge-in   { background: color-mix(in srgb, var(--c2) 22%, white); color: #7a4d06; }
.badge-warn { background: #fdf6e7; color: #845207; }

/* ============ GAST-BEREICH ============ */
.guest-head {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: .85rem 1rem;
  display: flex; align-items: center; gap: .7rem; justify-content: center;
}
.guest-head .logo { max-height: min(var(--logo-max-h, 34px), 64px); width: auto; }
.guest-head-title { font-weight: 600; font-size: .98rem; letter-spacing: -.01em; }

/* Hero */
.hero {
  position: relative;
  /* Dekoratives Netzwerk-SVG als oberste Hintergrundebene (liegt hinter dem Text,
     da Background-Images stets hinter dem Inhalt gezeichnet werden -> kein z-index nötig). */
  background:
    url(hero-network.svg) center / cover no-repeat,
    radial-gradient(900px 380px at 80% -10%, color-mix(in srgb, var(--c2) 26%, transparent), transparent 60%),
    linear-gradient(150deg, color-mix(in srgb, var(--c1) 92%, #000), color-mix(in srgb, var(--c1) 55%, #0c0a1e));
  color: #fff;
  padding: 3.4rem 1.3rem 4.4rem;
  text-align: center;
  overflow: hidden;
}
.hero .logo { max-height: 52px; margin-bottom: 1.1rem; }
/* Hauptlogo oben – gut erkennbar, mittig (links/rechts genug Platz) */
.hero .hero-mainlogo { display: block; max-height: var(--logo-max-h, 64px); max-width: 60%; width: auto; margin: 0 auto 1.1rem; object-fit: contain;
  /* weicher Leucht-Halo (folgt der transparenten Logo-Silhouette) */
  filter: drop-shadow(0 0 16px rgba(150, 185, 235, .55)) drop-shadow(0 0 38px rgba(110, 150, 210, .40)); }
/* Bis zu 5 Logos IMMER in EINER Reihe: Grid mit gleich breiten Spalten -> kein Umbruch.
   Sitzen unten im Hero (unter dem Rückmeldung-Button): Abstand nach oben. */
.hero .hero-logos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .7rem; align-items: center; width: 100%; margin-top: 1.6rem; }
.hero .hero-logos .logo { width: 100%; height: 44px; object-fit: contain; object-position: center; margin: 0; }
@media (max-width: 560px) {
  .hero .hero-mainlogo { max-height: 48px; max-width: 70%; }
  .hero .hero-logos { gap: .4rem; margin-top: 1.2rem; }
  .hero .hero-logos .logo { height: 30px; }
}
.hero .hero-eyebrow {
  font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  opacity: .8; margin-bottom: .8rem;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 6vw, 3rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0 0 .7rem;
}
.hero .hero-meta { font-size: 1rem; opacity: .88; margin: 0 0 1.4rem; }
.hero .hero-meta .dot { opacity: .5; margin: 0 .45rem; }
.hero .status-pill {
  display: inline-block;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(4px);
  border-radius: 999px;
  padding: .38rem 1.05rem;
  font-size: .86rem;
  margin-bottom: 1.6rem;
}
.hero .cta-row { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.hero .btn-yes { background: #fff; color: var(--c1); box-shadow: 0 10px 28px -10px rgba(0,0,0,.45); }
.hero .btn-no { background: transparent; border: 1.5px solid rgba(255,255,255,.55); color: #fff; box-shadow: none; }
.hero .btn-no:hover { border-color: #fff; }
/* QR-Sprunglink als Detail-Eintrag in der „Wann & Wo"-Karte */
.detail .qr-jump { color: var(--c1); text-decoration: underline; font-weight: 500; display: inline-block; }
.detail .qr-jump:hover { opacity: .85; }
/* Große Nummer auf den QR-Namensschildern (schnelles Auffinden) */
.qr-no { display: block; font-size: 1.3rem; font-weight: 700; letter-spacing: .02em; margin: .15rem 0 .1rem; }
/* Check-in-Ergebnis: sehr große Gastnummer + Suchzeilen-Badge + Scan-Historie */
.result-card .r-no { font-size: 2.6rem; font-weight: 800; line-height: 1.05; letter-spacing: .01em; margin-bottom: .1rem; }
.r-no-inline { display: inline-block; font-weight: 700; background: rgba(0,0,0,.06); border-radius: 6px; padding: 0 .4rem; }
.scan-history { margin-top: .4rem; }
.scan-hist-line { display: flex; justify-content: space-between; gap: .6rem; padding: .25rem .1rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.scan-hist-line.r-ok span:first-child { color: #15803d; font-weight: 600; }
.scan-hist-line.r-warn span:first-child { color: #b45309; font-weight: 600; }
.scan-hist-line.r-err span:first-child { color: #b91c1c; font-weight: 600; }

/* ============ NOTFALL-NEWSTICKER (Gäste-Seite) ============ */
.ticker { margin: 0 0 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.ticker-item { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem 1rem;
  border-radius: 10px; border-left: 5px solid #2563eb; background: #eef4fe; }
.ticker-tag { flex: 0 0 auto; font-weight: 700; font-size: .8rem; white-space: nowrap;
  padding: .15rem .55rem; border-radius: 6px; background: rgba(0,0,0,.06); }
.ticker-text { min-width: 0; }
.ticker-text strong { display: block; margin-bottom: .15rem; }
.ticker-body { white-space: normal; word-break: break-word; font-size: .95rem; }
.ticker-info { border-left-color: #2563eb; background: #eef4fe; }
.ticker-info .ticker-tag { background: #dbeafe; color: #1e40af; }
.ticker-warning { border-left-color: #d97706; background: #fff7ed; }
.ticker-warning .ticker-tag { background: #fde9c8; color: #92400e; }
.ticker-emergency { border-left-color: #dc2626; background: #fef2f2; border-left-width: 7px;
  box-shadow: 0 0 0 1px rgba(220,38,38,.25); }
.ticker-emergency .ticker-tag { background: #dc2626; color: #fff; }
.ticker-emergency .ticker-text strong { color: #b91c1c; }
@media (max-width: 560px) { .ticker-item { flex-direction: column; gap: .35rem; } }
.has-hero .wrap { margin-top: -2.4rem; position: relative; }

/* Detailzeilen mit Icons (Wann & Wo) */
.detail-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; margin-top: .4rem; }
@media (min-width: 560px) { .detail-grid { grid-template-columns: 1fr 1fr; } }
.detail { display: flex; gap: .8rem; align-items: flex-start; }
.detail .ico {
  flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c1) 8%, white);
  color: var(--c1);
}
.detail .ico svg { width: 19px; height: 19px; }
.detail .lbl { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.detail .val { font-weight: 600; font-size: .95rem; }

/* Inhaltsblöcke */
.block h2, .qr-card h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; }
.agenda { list-style: none; margin: .3rem 0 0; padding: 0; }
.agenda-item { display: flex; gap: 1.1rem; padding: .65rem 0; position: relative; }
.agenda-time {
  font-weight: 700; color: var(--c1);
  min-width: 3.6rem; font-variant-numeric: tabular-nums;
  font-size: .92rem; padding-top: .1rem;
}
.agenda-body { border-left: 2px solid var(--border); padding-left: 1.1rem; padding-bottom: .2rem; }
.agenda-item:last-child .agenda-body { border-left-color: transparent; }
.agenda-body strong { font-size: .97rem; }

.faq-item { border-bottom: 1px solid var(--border); padding: .55rem 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary {
  font-weight: 600; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::after { content: "+"; color: var(--c1); font-size: 1.2rem; font-weight: 400; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--muted); margin: .4rem 0 .3rem; }

.block-img { max-width: 100%; border-radius: var(--radius-s); }
.map-frame { width: 100%; height: 320px; border: 0; border-radius: var(--radius-s); }

/* QR-Karte */
.qr-card { text-align: center; }
.qr-card .qr-box {
  display: inline-block;
  background: #fff;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow);
  margin: .4rem 0 .6rem;
}

.token-box {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  background: #f4f4f2; border: 1px dashed #d4d6d2; border-radius: var(--radius-s);
  padding: .6rem .8rem; word-break: break-all; font-size: .88rem;
}

.site-foot { text-align: center; color: var(--muted); padding: 1.6rem 1rem 2.6rem; font-size: .85rem; }
.site-foot a { color: var(--muted); }

/* ============ MANAGEMENT (helles SaaS-Layout) ============ */
.topbar {
  background: #fff; color: var(--text);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .8rem;
  padding: .65rem 1rem;
  position: sticky; top: 0; z-index: 30;
}
.topbar .brand { font-weight: 700; font-size: .95rem; letter-spacing: -.01em; }
.topbar-logo { max-height: min(var(--logo-max-h, 26px), 44px); width: auto; }
.login-logo { display: block; max-height: var(--logo-max-h, 52px); width: auto; margin: 0 auto 1.1rem; }
.topbar-user { margin-left: auto; font-size: .83rem; color: var(--muted); }
.role-pill {
  background: color-mix(in srgb, var(--c1) 9%, white); color: var(--c1);
  border-radius: 999px; padding: .14rem .62rem; font-size: .7rem;
  font-weight: 600; margin-left: .4rem;
}
.burger { background: none; border: 0; color: var(--text); font-size: 1.3rem; cursor: pointer; padding: .2rem .4rem; display: none; }
.nav-collapse { background: none; border: 0; color: var(--muted); cursor: pointer; padding: .2rem .4rem; display: inline-flex; align-items: center; }
.nav-collapse svg { width: 20px; height: 20px; }
.nav-collapse:hover { color: var(--text); }
.brand-link { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; }
.brand-link:hover { text-decoration: none; opacity: .9; }

.layout { display: flex; min-height: calc(100vh - 50px); }
.sidebar {
  background: #fbfbfa;
  border-right: 1px solid var(--border);
  width: 242px; flex-shrink: 0;
  padding: 1.1rem .75rem 2rem;
  display: block;            /* Desktop: dauerhaft sichtbar */
}
/* Desktop: zur schmalen Icon-Leiste eingeklappt (per Cookie/Toggle, body.nav-collapsed) */
@media (min-width: 900px) {
  body.nav-collapsed .sidebar { width: 60px; padding-left: .4rem; padding-right: .4rem; }
  body.nav-collapsed .sidebar a span,
  body.nav-collapsed .sidebar .nav-group-title,
  body.nav-collapsed .sidebar .logout-btn span { display: none; }
  body.nav-collapsed .sidebar a,
  body.nav-collapsed .sidebar .logout-btn { justify-content: center; padding: .55rem 0; gap: 0; }
  body.nav-collapsed .sidebar .nav-group.nav-collapsed a { display: flex; } /* Rail zeigt alle Icons */
}
/* Mobil: Navigation ausgeblendet, per Burger als Overlay */
@media (max-width: 899px) {
  .sidebar { display: none; }
  .sidebar.open {
    display: block; position: fixed; top: 50px; bottom: 0; left: 0; width: 242px; z-index: 25;
    overflow-y: auto; box-shadow: 0 20px 50px -10px rgba(20,22,26,.25);
  }
  .burger { display: inline-flex; align-items: center; }
  .nav-collapse { display: none; }
}
.nav-group { margin-bottom: 1.15rem; }
.nav-group-title {
  display: block; font-size: .68rem; text-transform: uppercase; font-weight: 700;
  letter-spacing: .09em; color: #5f6671; margin: 0 .7rem .35rem;
}
.sidebar a {
  display: flex; align-items: center; gap: .6rem;
  color: #474d56; text-decoration: none;
  padding: .46rem .7rem; border-radius: 9px; font-size: .89rem;
}
.sidebar a svg { width: 17px; height: 17px; opacity: .65; flex-shrink: 0; }
.sidebar a:hover { background: #f0f1ef; color: var(--text); }
.sidebar a.active {
  background: color-mix(in srgb, var(--c1) 9%, white);
  color: var(--c1); font-weight: 600;
}
.sidebar a.active svg { opacity: 1; }

.content { flex: 1; padding: 1.4rem; max-width: 1280px; min-width: 0; margin: 0 auto; width: 100%; }

/* Schlanker Mitgliederbereich (#26): keine linke Navigation/Sidebar mehr.
   Topbar mit Logo links, Logout rechts; Inhalt zentriert und etwas schmaler. */
.topbar-spacer { flex: 1 1 auto; }
body.portal-slim .content--portal { max-width: 1040px; }

/* Linke Navigation standardmäßig vollständig ausgeblendet – auch auf Desktop.
   Nur per Burger einblendbar als Overlay (.sidebar.open); belegt keinen dauerhaften
   Platz, der Inhalt nutzt die volle Breite. */

/* Dashboard */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1.1rem; }
.stat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem 1.05rem;
}
.stat .num { font-size: 1.75rem; font-weight: 800; color: var(--c1); line-height: 1.15; letter-spacing: -.02em; }
.stat .lbl { color: var(--muted); font-size: .78rem; margin-top: .1rem; }
/* Klickbare Kacheln (verlinken auf die gefilterte Gästeliste) */
a.stat { display: block; text-decoration: none; color: inherit; cursor: pointer;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease; }
a.stat:hover { border-color: var(--c1); transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px rgba(20,22,26,.22); }
.stat.stat-warn .num { color: var(--warn); }
.stat.stat-ok .num { color: var(--ok); }

.bar-chart { display: grid; gap: .5rem; }
.bar-row { display: grid; grid-template-columns: 90px 1fr 44px; align-items: center; gap: .7rem; font-size: .87rem; }
.bar-track { background: #eef0ee; border-radius: 999px; height: 10px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--c1); transition: width .5s ease; }
.bar-fill.f-yes { background: var(--ok); }
.bar-fill.f-no { background: var(--danger); }
.bar-fill.f-open { background: #aab0ab; }

.searchbar { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.searchbar input[type=text], .searchbar select { width: auto; flex: 1 1 170px; }

/* ============ CHECK-IN (Tablet) ============ */
.checkin-shell { max-width: 680px; margin: 0 auto; padding: 1.1rem; }
.checkin-counters { display: flex; gap: .8rem; justify-content: center; margin-bottom: 1.1rem; }
.checkin-counters .stat { text-align: center; flex: 1; }
#scanArea { max-width: 420px; margin: 0 auto 1.1rem; border-radius: var(--radius); overflow: hidden; }
.result-card {
  border-radius: var(--radius);
  padding: 1.4rem;
  margin-bottom: 1.1rem;
  border: 2px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow);
}
.result-card.r-ok { border-color: var(--ok); background: #f4fbf6; }
.result-card.r-warn { border-color: var(--warn); background: #fdf8ec; }
.result-card.r-err { border-color: var(--danger); background: #fdf2f1; }
.result-card .r-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.search-results .result-line {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-s);
  padding: .8rem 1rem; margin-bottom: .55rem;
  box-shadow: var(--shadow);
}
.search-results .result-line .grow { flex: 1; min-width: 150px; }

/* ============ DRUCK ============ */
@media print {
  .topbar, .sidebar, .searchbar, .actions, .btn, .no-print { display: none !important; }
  body { background: #fff; font-size: 10.5pt; }
  .content { padding: 0; max-width: none; }
  .card, .table-wrap { border: 0; box-shadow: none; }
  .table-wrap { overflow: visible; }
  th { position: static; }
  @page { size: A4; margin: 14mm 12mm; }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }
  .print-head { display: block !important; }
  .qr-sheet-item { page-break-inside: avoid; }
}
.print-head { display: none; margin-bottom: .6rem; }
.qr-sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.qr-sheet-item { border: 1px dashed #999; border-radius: 8px; padding: 1rem; text-align: center; }

/* ============ EINLASSKARTE (Gast-Ticket) ============ */
.ticket {
  max-width: 400px;
  margin: 0 auto 1.2rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.1rem 1.7rem 1.6rem;
  text-align: center;
}
.ticket .tk-logo { max-height: 44px; margin-bottom: .9rem; }
.ticket .tk-eyebrow {
  display: block;
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--c2); margin-bottom: .45rem;
}
.ticket .tk-event {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.5rem; letter-spacing: -.01em; line-height: 1.2;
  margin: 0 0 .35rem;
}
.ticket .tk-meta { color: var(--muted); font-size: .88rem; margin: 0 0 1.1rem; }
.ticket .tk-qr { margin-bottom: .4rem; }
.ticket .tk-qr-box {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .9rem .9rem .6rem;
}
.ticket .tk-name { font-weight: 700; font-size: 1.12rem; margin: .7rem 0 .15rem; }
.ticket .tk-comp { color: var(--muted); font-size: .85rem; margin: 0; }
.ticket .tk-divider { border-top: 1.5px dashed var(--border); margin: 1.1rem -1.7rem; }
.ticket .tk-note { color: var(--muted); font-size: .78rem; margin: 0; }

@media print {
  body.guest .guest-head, body.guest .site-foot, body.guest .flash { display: none !important; }
  body.guest { background: #fff; }
  body.guest .wrap { max-width: none; padding: 0; }
  .ticket { box-shadow: none; border: 1px solid #888; margin-top: 12mm; page-break-inside: avoid; }
}

/* ============ EINLADUNGSKARTEN (Seriendruck) ============ */
.invite-sheet { display: grid; gap: 1rem; max-width: 620px; margin: 0 auto; }
.invite-card {
  border: 1px dashed #b5b8b5;            /* Schnittlinie */
  border-radius: 12px;
  background: #fff;
  padding: 2rem 1.8rem 1.7rem;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.invite-card .ic-logo { max-height: 38px; margin-bottom: .7rem; }
.invite-card .ic-eyebrow {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .2em; color: var(--c2);
  margin-bottom: .5rem;
}
.invite-card .ic-event {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.55rem; letter-spacing: -.01em; line-height: 1.2;
  margin: 0 0 .3rem;
}
.invite-card .ic-meta { color: var(--muted); font-size: .88rem; margin: 0 0 .9rem; }
.invite-card .ic-name { font-weight: 700; font-size: 1.05rem; margin: 0 0 .9rem; }
.invite-card .ic-qr { display: flex; justify-content: center; margin: 0 0 .9rem; }
.invite-card .ic-code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 1.12rem; letter-spacing: .12em; font-weight: 600;
  border: 1.5px solid var(--border); border-radius: 9px;
  padding: .45rem 1rem; display: inline-block; margin: 0 0 .7rem;
}
.invite-card .ic-note { color: var(--muted); font-size: .78rem; max-width: 40ch; margin: 0; }
@media print {
  .invite-sheet { gap: 6mm; max-width: none; }
  .invite-card { height: 128mm; page-break-inside: avoid; border-radius: 0; }
}

/* ============ LOGOUT (CSRF-geschütztes POST-Formular statt Link) ============ */
.logout-form { display: inline; margin: 0; }
.logout-btn {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-decoration: underline;
}
.logout-btn:hover { opacity: .8; }
/* Im Verwaltungs-Menü wie ein normaler Navigationseintrag aussehen */
.sidebar .logout-form { display: block; }
.sidebar .logout-btn {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  color: #474d56; text-decoration: none;
  padding: .46rem .7rem; border-radius: 9px; font-size: .89rem; text-align: left;
}
.sidebar .logout-btn svg { width: 17px; height: 17px; opacity: .65; flex-shrink: 0; }
.sidebar .logout-btn:hover { background: #f0f1ef; color: var(--text); opacity: 1; }

/* ============ ANFAHRT (Kartendienst-Auswahl, kein JS, kein iframe) ============ */
.anfahrt { margin-top: 1.1rem; }
.map-locations { margin-top: .4rem; }
.map-locations .maps-directions { margin: .3rem 0; }
/* Adresse/Ziel als klickbarer Link (kein separater Button) */
.maps-directions > summary {
  display: inline-block; cursor: pointer; list-style: none;
  color: var(--c1); text-decoration: underline; font-weight: 500; font-size: .92rem;
}
.maps-directions > summary::-webkit-details-marker { display: none; }
.maps-directions > summary::before { content: "📍 "; text-decoration: none; }
.maps-directions.maps-directions--park > summary::before { content: "🅿 "; }
.maps-directions[open] > summary { margin-bottom: .55rem; }
.maps-directions-body { border-left: 3px solid var(--c2); padding: .2rem 0 .2rem .8rem; }
.maps-providers { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

/* ============================================================
   Vereinsverwaltung – Ergänzungen (bauen auf dem Event-Design auf)
   ============================================================ */

/* Definitionslisten für Detailansichten (Mitglied, Antrag) */
.deflist { display: grid; grid-template-columns: 1fr; gap: .1rem; margin: .2rem 0 0; }
@media (min-width: 560px) { .deflist { grid-template-columns: 200px 1fr; gap: .35rem 1rem; } }
.deflist dt { color: var(--muted); font-size: .85rem; }
.deflist dd { margin: 0 0 .55rem; font-weight: 500; }
@media (min-width: 560px) { .deflist dd { margin: 0; } }

/* Mehr Status-Badges (gleiche Optik wie im Event-Tool) */
.badge-info { background: #eff4fc; color: #1e3f76; }
.badge-muted { background: #eef0ee; color: #595f59; }

/* Pflichtfeld-Markierung in öffentlichen Formularen */
.legend { color: var(--muted); font-size: .85rem; margin: 0 0 1rem; }

/* Kennzahl-Kacheln dürfen auch ohne Link erscheinen */
.stat .num.danger { color: var(--danger); }

/* Tabellen-Aktionsspalte */
td.row-actions { white-space: nowrap; }
td.row-actions .btn { margin-right: .3rem; }

/* Kompakte Filterleiste (wie searchbar, zusätzliche Felder) */
.searchbar label { align-self: center; font-size: .82rem; color: var(--muted); }

/* Hervorgehobener Sicherheitshinweis im Antrag */
.secure-hint { display:flex; gap:.5rem; align-items:center; color: var(--ok); font-size:.88rem; font-weight:600; margin:.2rem 0 1rem; }
.secure-hint svg { width:18px; height:18px; }

/* SEPA-/Mandatstext-Box */
.mandate-box { background:#fafaf8; border:1px solid var(--border); border-radius: var(--radius-s); padding:1rem 1.1rem; font-size:.88rem; color:#3a3f46; margin:.2rem 0 1rem; }

/* Summenzeile (Finanzen) */
.sumrow { display:flex; gap:2rem; flex-wrap:wrap; margin:.6rem 0 0; font-size:1.02rem; }
.sumrow strong { color: var(--c1); }
.sum-pos { color: var(--ok); }
.sum-neg { color: var(--danger); }

/* ============================================================
   Dashboard-Warnungen: schlanke, moderne Chip-Leiste (Punkt 2)
   ============================================================ */
.warnbar { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; }
.warn-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--card); border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: 999px; padding: .34rem .55rem .34rem .85rem;
  font-size: .85rem; color: var(--text); text-decoration: none;
  transition: border-color .12s ease, transform .12s ease;
}
.warn-chip:hover { border-color: var(--warn); transform: translateY(-1px); }
.warn-chip .wc-count {
  background: var(--warn); color: #fff; border-radius: 999px;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
  display: inline-grid; place-items: center; font-size: .74rem; font-weight: 700;
}
.warn-chip.sev-info { border-left-color: var(--c1); }
.warn-chip.sev-info .wc-count { background: var(--c1); }
.warn-ok { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ok); }

/* ============================================================
   QR-Geschenke: Mitglieder-Anzeige + Scanner
   ============================================================ */
.qr-gift-details { margin-top: .4rem; }
.qr-gift-details > summary { display: inline-flex; list-style: none; cursor: pointer; }
.qr-gift-details > summary::-webkit-details-marker { display: none; }
.qr-gift-box {
  display: inline-block; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-s); box-shadow: var(--shadow);
  padding: 1rem; margin: .8rem 0 .4rem;
}
.qr-gift-box svg { width: 220px; height: 220px; display: block; }
@media (max-width: 480px) { .qr-gift-box svg { width: 180px; height: 180px; } }

/* Rechte-Matrix (Rollen & Rechte) */
.perm-matrix td, .perm-matrix th { white-space: nowrap; vertical-align: middle; }
.perm-matrix th:first-child, .perm-matrix td:first-child {
  position: sticky; left: 0; background: #fafaf8; z-index: 1;
  white-space: normal; min-width: 190px;
}
.perm-matrix tbody td:first-child { background: var(--card); }
.perm-matrix .pm-cell { text-align: center; }
.perm-matrix .pm-role { font-size: .74rem; }
.perm-matrix .pm-all { color: var(--ok); font-weight: 700; }
.perm-matrix input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--c1); }

/* ============================================================
   Barrierefrei Plus (Punkt 13) – optionale Sehbehinderten-Ansicht
   ============================================================ */
.topbar-link { margin-left: .6rem; font-weight: 700; font-size: .8rem; color: var(--c1);
  text-decoration: none; border: 1.5px solid var(--border); border-radius: 8px; padding: .12rem .45rem; white-space: nowrap; }
.topbar-link:hover { background: #f0f1ef; }

body.a11y { line-height: 1.75; }
body.a11y-f1 { font-size: 18px; }
body.a11y-f2 { font-size: 21px; }

/* Hoher Kontrast – hell */
body.a11y-hc-light { --bg:#fff; --card:#fff; --text:#000; --muted:#2a2a2a; --border:#000; --c1:#0a2a4a; }
body.a11y-hc-light .muted { color:#2a2a2a; }
body.a11y-hc-light a { color:#093b73; text-decoration: underline; }
body.a11y-hc-light .btn { background:#08203a; color:#fff; }

/* Hoher Kontrast – dunkel */
body.a11y-hc-dark { --bg:#000; --card:#0c0c0c; --text:#fff; --muted:#e6e6e6; --border:#fff; --c1:#ffd84d; --c2:#ffd84d; background:#000; color:#fff; }
body.a11y-hc-dark .card, body.a11y-hc-dark .table-wrap, body.a11y-hc-dark .block,
body.a11y-hc-dark input, body.a11y-hc-dark select, body.a11y-hc-dark textarea,
body.a11y-hc-dark .topbar, body.a11y-hc-dark .sidebar { background:#0c0c0c; color:#fff; border-color:#fff; }
body.a11y-hc-dark .muted, body.a11y-hc-dark .sidebar a { color:#e6e6e6; }
body.a11y-hc-dark th { background:#111; color:#fff; }
body.a11y-hc-dark .btn { background:#ffd84d; color:#000; }
body.a11y-hc-dark .btn-ghost, body.a11y-hc-dark .btn-sec { background:transparent; color:#ffd84d; border:1.5px solid #ffd84d; }
body.a11y-hc-dark a { color:#ffd84d; text-decoration: underline; }
body.a11y-hc-dark .badge { border:1px solid #fff; }

/* Extra große Bedienelemente */
body.a11y-big .btn { padding:.9rem 1.7rem; font-size:1.12rem; min-height:56px; }
body.a11y-big input, body.a11y-big select, body.a11y-big textarea { font-size:1.12rem; padding:.85rem 1rem; }
body.a11y-big .sidebar a { padding:.7rem .8rem; font-size:1.05rem; }

/* Bewegungen reduzieren */
body.a11y-reduce *, body.a11y-reduce *::before, body.a11y-reduce *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* Vereinfachte, ruhige Darstellung */
body.a11y-simple .card, body.a11y-simple .stat, body.a11y-simple .table-wrap { box-shadow: none; }
body.a11y-simple .hero { background: var(--c1) !important; }

/* Sehr starke, sichtbare Fokusmarkierung in der ganzen App */
body.a11y a:focus, body.a11y button:focus, body.a11y input:focus,
body.a11y select:focus, body.a11y textarea:focus, body.a11y summary:focus, body.a11y :focus-visible {
  outline: 4px solid #ff7a00 !important; outline-offset: 2px !important; border-radius: 4px;
}

/* ============================================================
   Monatskalender (Punkt 4)
   ============================================================ */
.cal-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.cal-toolbar .cal-title { font-size: 1.1rem; font-weight: 700; min-width: 11rem; text-align: center; }
.month-cal { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.month-cal th { background: #fafaf8; color: var(--muted); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; padding: .5rem; text-align: center; }
.month-cal td { border: 1px solid var(--border); vertical-align: top; height: 92px; width: 14.28%;
  padding: .25rem; position: relative; }
.month-cal td.cal-empty { background: #fbfbf9; }
.month-cal .cal-num { font-size: .8rem; color: var(--muted); font-weight: 600; }
.month-cal td.cal-today { background: color-mix(in srgb, var(--c1) 7%, white); }
.month-cal td.cal-today .cal-num { color: var(--c1); }
.cal-ev { display: block; font-size: .72rem; line-height: 1.25; margin: .15rem 0 0; padding: .12rem .35rem;
  border-radius: 6px; color: #16181d; text-decoration: none; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; border: 1px solid rgba(0,0,0,.06); }
a.cal-ev:hover { filter: brightness(.95); }
@media (max-width: 640px) {
  .month-cal td { height: auto; min-height: 64px; }
  .cal-ev { font-size: .66rem; }
}
.cal-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; font-size: .8rem; }
.cal-legend .lg { display: inline-flex; align-items: center; gap: .35rem; }
.cal-legend .sw { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.1); }

/* Editierbare Welcome-Page (Portal) */
.welcome-block { margin-bottom: 1rem; }
.welcome-img { max-width: 100%; height: auto; border-radius: var(--radius-s); }
.welcome-list { margin: .4rem 0 .6rem; padding-left: 1.1rem; }
.welcome-list li { margin: .25rem 0; }
.welcome-gift { border-left: 4px solid var(--c2); }
.qr-figure { margin: .8rem 0 .2rem; display: inline-block; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-s); padding: 1rem; box-shadow: var(--shadow); }
.qr-figure svg { width: 220px; height: 220px; display: block; }
@media (max-width: 480px) { .qr-figure svg { width: 180px; height: 180px; } }
.qr-reveal > summary { display: inline-flex; list-style: none; cursor: pointer; }
.qr-reveal > summary::-webkit-details-marker { display: none; }

/* Mitglieder-Welcome-Page: Hero im Portal + Schnellbuttons (Punkt 20) */
.hero--portal { border-radius: var(--radius); padding: 2.4rem 1.3rem 2.6rem; margin-bottom: 1.2rem; }
.hero--portal h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
.hero-quickbar { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin-top: 1.4rem; }
.hero-qbtn { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: .9rem; font-weight: 600;
  backdrop-filter: blur(4px); }
.hero-qbtn svg { width: 17px; height: 17px; }
.hero-qbtn:hover { background: rgba(255,255,255,.22); text-decoration: none; }
@media (max-width: 560px) { .hero-qbtn { font-size: .82rem; padding: .45rem .72rem; } }

/* Einklappbare Navigation (Akkordeon, Punkt 10) */
.sidebar .nav-group-title[data-nav-group-toggle] { cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; }
.sidebar .nav-group-title[data-nav-group-toggle]::after { content: '▾'; font-size: .7rem; opacity: .55; transition: transform .15s; }
.sidebar .nav-group.nav-collapsed .nav-group-title[data-nav-group-toggle]::after { transform: rotate(-90deg); }
.sidebar .nav-group.nav-collapsed a { display: none; }
/* Gruppe mit nur einem sichtbaren Unterpunkt: Überschrift ist direkter Link (kein Aufklappen). */
.sidebar a.nav-single { font-weight: 600; }

/* Portal: Vereinswechsel im Hero + Kalenderfilter */
.hero-tenant-switch { display: inline-flex; gap: .45rem; align-items: center; margin: 0 0 1rem; }
.hero-tenant-switch label { opacity: .85; }
.hero-tenant-switch select { background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.3); border-radius: 8px; padding: .3rem .55rem; }
.hero-tenant-switch select option { color: #16181d; }
.cal-filter { display: flex; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 .7rem; }
.cal-filter .chip { font-size: .8rem; padding: .25rem .65rem; border: 1px solid var(--border);
  border-radius: 999px; color: var(--muted); }
.cal-filter .chip.active { border-color: var(--c1); background: color-mix(in srgb, var(--c1) 8%, white); color: var(--text); }

/* Progressive UI / Punkt 19 */
[hidden] { display: none !important; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 1rem; }
.toolbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.preview-bar { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-top: .7rem; }
.preview-bar .btn.active, .btn.active { border-color: var(--c1); background: color-mix(in srgb, var(--c1) 8%, white); }
/* Geräte-Vorschau-Rahmen */
.wp-preview { margin: 0 auto; transition: max-width .2s ease; }
.wp-preview.pv-desktop { max-width: 100%; }
.wp-preview.pv-tablet  { max-width: 768px; }
.wp-preview.pv-mobile  { max-width: 380px; }
.wp-preview.pv-tablet, .wp-preview.pv-mobile { border: 1px dashed var(--border); border-radius: var(--radius-s); padding: .8rem; background: color-mix(in srgb, var(--bg) 60%, white); }
/* Leerzustände */
.empty-state { text-align: center; padding: 2rem 1rem; color: var(--muted); }
.empty-state .ico { display: inline-flex; }
.empty-state .ico svg { width: 40px; height: 40px; opacity: .5; }
.empty-state p { margin: .6rem 0 1rem; }
/* QR-Block-Fieldset im Welcome-Editor */
.qr-fieldset { border: 1px solid var(--border); border-radius: var(--radius-s); padding: .6rem .8rem; }

/* Dashboard-Schnellaktionen (Punkt 19.6) */
.quick-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.qa-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .85rem;
  border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--card);
  color: var(--text); font-size: .9rem; font-weight: 600; box-shadow: var(--shadow); }
.qa-btn svg { width: 18px; height: 18px; color: var(--c1); }
.qa-btn:hover { border-color: var(--c1); text-decoration: none; }
.qa-primary { background: var(--c1); color: #fff; border-color: var(--c1); }
.qa-primary svg { color: #fff; }
/* Ruhigeres, professionelleres Admin-Farbschema im Stil von Teams/SharePoint
   (Abschnitt 9) – NUR Verwaltung (body.mgmt), reversibel. Neutrale App-Chrome,
   weiße Flächen, feine Ränder, Akzent-Leiste am aktiven Navi-Eintrag. Die
   konfigurierbare Primär-/Akzentfarbe (--c1/--c2) bleibt erhalten. */
body.mgmt {
  --radius: 8px; --radius-s: 6px;
  --border: #e1e5ea;
  background: #f3f5f8;
}
body.mgmt .card {
  border-color: #e6eaef;
  box-shadow: 0 1px 2px rgba(20,22,26,.03), 0 6px 18px -14px rgba(20,22,26,.10);
}
body.mgmt.admin .card { background: rgba(255, 255, 255, .82); }   /* Adminbereich: luftiger/transparenter rechts */
body.mgmt .area-tile, body.mgmt .qa-btn { border-color: #e6eaef; }
body.mgmt .nav-group-title { letter-spacing: .07em; color: #5b626c; font-weight: 700; }

/* Kopfzeile: ruhige, leicht erhöhte Suite-Bar wie in M365 */
body.mgmt .topbar {
  background: #ffffff;
  border-bottom: 1px solid #e1e5ea;
  box-shadow: 0 1px 3px rgba(20,22,26,.04);
}
body.mgmt .topbar .brand { color: var(--c1); }

/* Linke Leiste im ADMINBEREICH: moderne, farbige Navigation (blau, über
   admin_nav_color anpassbar) mit hellen Texten; aktiver Eintrag mit hellem Balken.
   Bewusst nur body.mgmt.admin – das Mitgliederportal bleibt unverändert. */
body.mgmt.admin .sidebar { background: var(--nav); border-right: 0; color: #fff; }
body.mgmt.admin .sidebar a { color: rgba(255, 255, 255, .82); }
body.mgmt.admin .sidebar a svg { opacity: .9; }
body.mgmt.admin .sidebar a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
body.mgmt.admin .sidebar a.active { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: inset 3px 0 0 0 #fff; }
body.mgmt.admin .sidebar a.active svg { opacity: 1; }
body.mgmt.admin .sidebar .nav-group-title { color: rgba(255, 255, 255, .88); font-weight: 700; }
body.mgmt.admin .sidebar .nav-group-title[data-nav-group-toggle]::after { opacity: .75; }
body.mgmt.admin .sidebar .logout-btn { color: rgba(255, 255, 255, .82); }
body.mgmt.admin .sidebar .logout-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* === Navigations-Styling (WCAG 2.2 AA), Hintergrund Dunkelblau #0E2440 ===
   Nur visuelles Styling – Struktur, IDs, Klassenlogik und JS bleiben unverändert.
   Kontraste: Text #F1F5F9 ~13:1, Überschriften #E6EEF7, aktiv weiß auf #235A93 ~6.8:1,
   Akzentbalken/Fokus >=3:1. Aktiv ist nie nur über Farbe erkennbar (Balken + fett). */
body.mgmt.admin .sidebar { --menu-active-bg: #235A93; --menu-accent: #93C5FD; --menu-focus: #FACC15; }
body.mgmt.admin .sidebar a,
body.mgmt.admin .sidebar .logout-btn {
  color: #F1F5F9; font-size: 16px; font-weight: 500; line-height: 1.5;
  min-height: 44px; padding: .7rem 1rem; border-radius: 10px; gap: .6rem;
  transition: background-color 160ms ease, color 160ms ease, outline-color 160ms ease;
}
body.mgmt.admin .sidebar a svg,
body.mgmt.admin .sidebar .logout-btn svg { opacity: .9; width: 20px; height: 20px; }
body.mgmt.admin .sidebar a:hover,
body.mgmt.admin .sidebar .logout-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
body.mgmt.admin .sidebar a.active,
body.mgmt.admin .sidebar a[aria-current="page"] {
  background: var(--menu-active-bg); color: #fff; font-weight: 700;
  box-shadow: inset 4px 0 0 0 var(--menu-accent);
}
body.mgmt.admin .sidebar a.active svg { opacity: 1; color: #fff; }
body.mgmt.admin .sidebar .nav-group-title {
  color: #E6EEF7; font-size: 16px; font-weight: 600; letter-spacing: .03em; margin: 0 .35rem .3rem;
}
body.mgmt.admin .sidebar a:focus-visible,
body.mgmt.admin .sidebar .logout-btn:focus-visible,
body.mgmt.admin .sidebar .nav-group-title[data-nav-group-toggle]:focus-visible {
  outline: 3px solid var(--menu-focus); outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(250, 204, 21, .22);
}
@media (prefers-reduced-motion: reduce) {
  body.mgmt.admin .sidebar a,
  body.mgmt.admin .sidebar .logout-btn { transition: none; }
}

/* Kacheln/Buttons: dezenter „App"-Look mit klarer Hover-Anhebung */
body.mgmt .area-tile:hover { box-shadow: 0 2px 6px rgba(20,22,26,.06); }

/* Systemebene (/system): klar abgesetzte, dunkle Suite-Bar (Superadmin) */
body.mgmt.sys .sys-topbar { background: #1f2430; border-bottom-color: #1f2430; box-shadow: 0 2px 8px rgba(20,22,26,.18); }
body.mgmt.sys .sys-topbar .brand { color: #fff; display: inline-flex; align-items: center; gap: .4rem; }
body.mgmt.sys .sys-topbar .brand svg { width: 18px; height: 18px; }
body.mgmt.sys .sys-topbar .topbar-user { color: #c7ccd6; }
.sys-nav { display: flex; gap: .2rem; margin-left: 1rem; flex-wrap: wrap; }
.sys-nav a { display: inline-flex; align-items: center; gap: .35rem; color: #c7ccd6; text-decoration: none; padding: .35rem .6rem; border-radius: 7px; font-size: .85rem; }
.sys-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.sys-nav a.active { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.sys-nav a svg { width: 16px; height: 16px; opacity: .85; }
.sys-topbar .topbar-link { color: #c7ccd6; }
.sys-topbar .topbar-link:hover { background: rgba(255,255,255,.1); }
.sys-content { max-width: 1100px; margin: 0 auto; }

/* Mini-Monatskalender im Admin-Dashboard (§22.1) */
.mini-cal-card { max-width: 520px; }
.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 440px; }
.mini-cal .mc-wd { text-align: center; font-size: .68rem; color: var(--muted); font-weight: 600; padding: .2rem 0; }
.mc-day { position: relative; display: flex; align-items: center; justify-content: center; min-height: 36px; border: 1px solid transparent; border-radius: 8px; font-size: .85rem; color: var(--text); background: transparent; }
.mc-empty { border: 0; }
button.mc-day { cursor: pointer; font: inherit; }
.mc-day.mc-has { background: color-mix(in srgb, var(--c1) 8%, white); border-color: color-mix(in srgb, var(--c1) 22%, white); font-weight: 600; }
.mc-day.mc-has:hover { background: color-mix(in srgb, var(--c1) 16%, white); }
.mc-day.mc-today { outline: 2px solid var(--c1); outline-offset: -2px; }
.mc-dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--c1); }
.mc-events { margin-top: .7rem; padding: .6rem .7rem; background: var(--bg); border-radius: var(--radius-s); }
.mc-event { display: flex; align-items: center; gap: .4rem; padding: .25rem 0; text-decoration: none; color: var(--text); }
.mc-event:hover { color: var(--c1); }

/* Impersonation-Banner („Als Nutzer anzeigen") – immer deutlich sichtbar */
.imp-banner { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: #8a3b00; color: #fff; padding: .5rem 1rem; font-size: .85rem; }
.imp-banner .btn { background: #fff; color: #8a3b00; border: 0; font-weight: 600; }
.imp-banner em { color: #ffd9b3; font-style: normal; }

/* Kalender-Vereinsfilter als gemerkte Checkbox-Chips (§19) */
.cal-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
label.chip-check { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
label.chip-check input { margin: 0; accent-color: var(--c1); }

/* Fachbereichs-Kacheln auf dem Dashboard (Punkt 10/11) */
.area-tiles { margin-bottom: 1.1rem; }
.area-tile { position: relative; display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-s); box-shadow: var(--shadow); color: var(--text); }
.area-tile:hover { border-color: var(--c1); text-decoration: none; transform: translateY(-1px); transition: .12s; }
.at-ico { display: inline-flex; }
.at-ico svg { width: 26px; height: 26px; color: var(--c1); }
.at-body { display: flex; flex-direction: column; line-height: 1.25; }
.at-badge { position: absolute; top: .55rem; right: .65rem; min-width: 20px; height: 20px; padding: 0 .35rem;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }

/* Dashboard: Modul-Kachelübersicht (Korrektur 2026) – modern, responsive */
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: .4rem 0 1.4rem; }
.dash-tile { position: relative; background: var(--card); border: 1px solid #e6eaef; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20,22,26,.04), 0 8px 22px -16px rgba(20,22,26,.18);
  transition: transform .12s, box-shadow .12s, border-color .12s; min-height: 124px; }
.dash-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c1) 35%, white); box-shadow: 0 4px 10px rgba(20,22,26,.07), 0 14px 30px -18px rgba(20,22,26,.30); }
.dt-link { display: flex; flex-direction: column; gap: .55rem; padding: 1.15rem 1.15rem 1.25rem; height: 100%; color: var(--text); text-decoration: none; }
.dt-link:hover { text-decoration: none; }
.dash-tile .dt-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
  background: color-mix(in srgb, var(--c1) 10%, white); color: var(--c1); }
.dash-tile .dt-ico svg { width: 24px; height: 24px; }
.dash-tile .dt-title { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.dash-tile .dt-desc { color: var(--muted); font-size: .82rem; line-height: 1.3; margin-top: -.2rem; }
.dash-tile .dt-badge { position: absolute; top: .9rem; right: .95rem; min-width: 24px; height: 24px; padding: 0 .45rem;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: .78rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(194,54,43,.35); }
.dash-tile.dt-warn .dt-ico { background: color-mix(in srgb, var(--warn) 14%, white); color: var(--warn); }
.dash-tile.dt-warn .dt-badge { background: var(--warn); box-shadow: 0 2px 6px rgba(185,115,9,.35); }
.dash-tile.dt-ok .dt-ico { background: color-mix(in srgb, var(--ok) 12%, white); color: var(--ok); }

/* Kachelgrößen (rein darstellend) */
.dt-size-breit { grid-column: span 2; }
.dt-size-gross { grid-column: span 2; min-height: 168px; }
.dt-size-klein { min-height: 96px; }
.dt-size-klein .dt-desc { display: none; }
@media (max-width: 680px) { .dt-size-breit, .dt-size-gross { grid-column: span 1; } }

/* „Dashboard anpassen": Edit-Leiste, Kachel-Controls, Ausgeblendet-Panel */
.dash-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .8rem; }
.dash-edit-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dt-edit { display: none; position: absolute; top: .5rem; right: .5rem; z-index: 2; gap: .25rem; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: .15rem .3rem; box-shadow: var(--shadow); }
body.dash-editing .dt-edit { display: inline-flex; }
body.dash-editing .dash-tile { cursor: grab; }
body.dash-editing .dash-tile:active { cursor: grabbing; }
body.dash-editing .dt-link { pointer-events: none; }
.dt-edit .dt-size-sel { font-size: .72rem; padding: .12rem .2rem; height: auto; width: auto; min-width: 0; }
.dt-edit .dt-hide, .dt-edit .dt-drag { background: none; border: 0; cursor: pointer; color: var(--muted); display: inline-flex; padding: .1rem; }
.dt-edit .dt-hide svg, .dt-edit .dt-drag svg { width: 15px; height: 15px; }
.dt-edit .dt-hide:hover { color: var(--danger); }
.dash-hidden { margin: 0 0 1.2rem; padding: .7rem 1rem 1rem; background: var(--bg); border: 1px dashed var(--border); border-radius: var(--radius-s); }
.dash-tiles--hidden .dash-tile { opacity: .72; }
/* Drag-and-drop-Zustand: klare visuelle Rückmeldung */
.dash-tile.dragging { opacity: .45; outline: 2px dashed var(--c1); outline-offset: -3px; }

/* Kompakte Terminliste (Punkt 19.7) */
.cal-list { list-style: none; margin: .3rem 0 .6rem; padding: 0; }
.cal-list li { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.cal-list li:last-child { border-bottom: 0; }
.cal-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.cal-date { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--muted); min-width: 130px; }
.cal-title { font-weight: 600; }

/* Projekt-/Material-Kacheln (Punkt 19.9/19.10) */
.proj-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-s); overflow: hidden; box-shadow: var(--shadow); color: var(--text); }
.proj-card:hover { border-color: var(--c1); text-decoration: none; transform: translateY(-1px); transition: .12s; }
.proj-img { display: block; height: 110px; background-size: cover; background-position: center;
  background-color: color-mix(in srgb, var(--c1) 8%, white); }
/* Materialbilder vollständig zeigen (kein Beschnitt, Seitenverhältnis erhalten) */
.proj-img--contain { background-size: contain; background-repeat: no-repeat; }
.proj-img--ph { display: flex; align-items: center; justify-content: center; }
.proj-img--ph svg { width: 34px; height: 34px; color: var(--c1); opacity: .55; }
.proj-body { display: flex; flex-direction: column; gap: .3rem; padding: .7rem .8rem; }
.proj-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .2rem; }
/* Material-/Projektkachel mit Aktionsleiste (Buttons außerhalb des Links) */
.proj-card-wrap { display: flex; flex-direction: column; gap: .4rem; }
.proj-card-wrap .proj-card { flex: 1 1 auto; }
.proj-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.proj-actions .btn { flex: 1 1 auto; justify-content: center; }
/* Materialfoto in der Detailansicht: vollständig sichtbar, Seitenverhältnis erhalten */
.material-photo { display: block; width: 100%; max-height: 320px; object-fit: contain;
  background: color-mix(in srgb, var(--c1) 6%, white); border: 1px solid var(--border);
  border-radius: var(--radius-s); }
.material-photo--ph { display: flex; align-items: center; justify-content: center; height: 180px; }
.material-photo--ph svg { width: 46px; height: 46px; color: var(--c1); opacity: .5; }
/* Datenschutz-/Protokoll-Hinweis (§14) – nicht blockierend, gut sichtbar */
.privacy-note { display: flex; align-items: center; gap: .55rem; margin: 0 0 .8rem;
  padding: .55rem .75rem; border-radius: var(--radius-s); font-size: .85rem;
  color: #5a4b13; background: color-mix(in srgb, var(--c2) 16%, white);
  border-left: 4px solid var(--c2); }
.privacy-note svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }

/* Mitglieder-Autocomplete (Empfänger/Chips, Punkt 3/8) */
.member-ac { position: relative; }
.member-ac .chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .35rem; }
.ac-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .15rem .12rem .55rem;
  background: color-mix(in srgb, var(--c1) 12%, white);
  border: 1px solid color-mix(in srgb, var(--c1) 30%, white); border-radius: 999px; font-size: .82rem; }
.ac-chip-x { border: 0; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1;
  padding: 0 .3rem; color: inherit; }
.ac-chip-x:hover { color: #b3261e; }
.ac-suggest { position: absolute; left: 0; right: 0; z-index: 30; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-s); box-shadow: var(--shadow);
  max-height: 240px; overflow: auto; margin-top: 2px; }
.ac-opt { padding: .45rem .6rem; cursor: pointer; font-size: .87rem; }
.ac-opt:hover, .ac-opt.active { background: color-mix(in srgb, var(--c1) 10%, white); }

/* Finanz-Diagramme (Inline-SVG, Punkt 5/19) */
.chart-svg { width: 100%; height: auto; display: block; }
.pie-svg { width: 150px; flex: 0 0 150px; }
.pie-wrap { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.pie-legend { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; min-width: 140px; }
.pie-lg .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: middle; }

/* Mitgliedsausweis (druckbare Karte) */
.member-card { width: 340px; max-width: 100%; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; box-shadow: var(--shadow); background: #fff; }
.mc-head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; background: var(--c1); color: #fff; }
.mc-logo { height: 34px; width: auto; background: #fff; border-radius: 4px; padding: 2px; }
.mc-club { font-weight: 700; line-height: 1.1; }
.mc-title { font-size: .8rem; opacity: .85; }
.mc-body { display: flex; gap: .8rem; padding: 1rem; align-items: center; }
.mc-info { flex: 1; }
.mc-name { font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.mc-dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; margin: 0; font-size: .85rem; }
.mc-dl dt { color: var(--muted); } .mc-dl dd { margin: 0; font-weight: 600; }
.mc-qr svg { width: 110px; height: 110px; display: block; }
@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .wrap { margin: 0; padding: 0; }
  .member-card { box-shadow: none; border: 1px solid #999; }
}