/*
 * Gemeinsames Design der Plattform (Eventseite, Helferplan, Shop): Farben, Schrift, Kopfleiste, Karten, Kacheln.
 * Massstab ist die Eventseite (Entwurf «Eventseite», E 23.10.2026). Nur Klassen und Farben, keine nackten
 * Element-Regeln für Knöpfe oder Felder, damit die Apps ihre eigenen Bedienelemente behalten.
 * Ausgeliefert unter event.swisslug.ch/design.css (plattform-aktualisieren kopiert die Datei).
 */
:root {
  /* Farben (Eventseite) */
  --accent: #C8102E;
  --accent-hover: #A50D26;
  --accent-soft: #FDECEF;
  --page-bg: #F5F6F8;
  --surface: #ffffff;
  --border: #E2E8F0;
  --text: #1E293B;
  --muted: #64748B;
  --danger: #DC2626;
  --danger-soft: #FEF2F2;
  --ok: #15803D;
  --border-strong: #CBD5E1;
  --dunkel: #0F172A;
  --radius: 10px;
  --radius-gross: 12px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
body {
  font-family: var(--schrift);
  background: var(--page-bg); color: var(--text); margin: 0; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Kopfleiste: rot, Logo, Titel, rechts der Benutzer */
header { background: var(--accent); color: #fff; }
.header-bar { max-width: 760px; margin: 0 auto; height: 64px; padding: 0 1rem; display: flex; align-items: center; gap: 0.75rem; }
.header-bar img { height: 34px; width: auto; display: block; }
.header-bar h1 { margin: 0; padding-left: 0.75rem; border-left: 1px solid rgba(255,255,255,0.3); font-size: 1.05rem; font-weight: 600; white-space: nowrap; }
.header-bar .who { margin-left: auto; font-size: 0.85rem; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Rücksprung zur Eventseite in Helferplan und Shop */
.zurueck-events {
  display: inline-flex; align-items: center; gap: 0.15rem; flex-shrink: 0; height: 36px; padding: 0 0.7rem 0 0.4rem; border-radius: 8px;
  background: rgba(255,255,255,0.18); color: #fff; text-decoration: none; font-size: 0.9rem; font-weight: 600; white-space: nowrap;
}
.zurueck-events:hover { background: rgba(255,255,255,0.28); }
.zurueck-events svg { width: 18px; height: 18px; stroke-width: 2.4; }

/* Karten, Hinweise, Marken */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1rem; }
.meta { font-size: 0.85rem; color: var(--muted); }
.error { background: var(--danger-soft); color: var(--danger); border-radius: 8px; padding: 0.5rem 0.7rem; margin-bottom: 0.7rem; font-size: 0.9rem; }
.tag { display: inline-block; font-size: 0.72rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); margin: 0 0.2rem 0.2rem 0; }
.tag.off { background: #EEF1F5; color: var(--muted); }
#toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); background: var(--text); color: #fff; padding: 0.6rem 1rem; border-radius: 8px; font-size: 0.9rem; display: none; max-width: calc(100% - 2rem); z-index: 10; }
#toast.err { background: var(--danger); }

/* Eventseite: Umschalter, Event-Karte, Kacheln, Listen (Entwurf «Eventseite», 23.10.2026) */
.admin-band { background: var(--text); color: #fff; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; }
.admin-band { padding: 0.4rem max(1rem, calc((100% - 760px) / 2 + 1rem)); }
.schalter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: var(--border); border-radius: 10px; padding: 4px; margin-bottom: 1rem; max-width: 420px; }
.schalter button { background: transparent; border: 0; color: #475569; min-height: 40px; border-radius: 7px; }
.schalter button:hover { background: rgba(255,255,255,0.6); }
.schalter button.aktiv { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(15,23,42,0.15); }
.event-karte { border-radius: 12px; }
.event-karte .ueber, .sektion { font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.event-karte .ev-name { font-size: 1.4rem; font-weight: 700; line-height: 1.2; margin: 0.15rem 0; }
.wechsel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; max-width: 100%; margin: 0.7rem 0 0; color: var(--accent); font-size: 0.85rem; }
.wechsel select { width: auto; max-width: 100%; min-width: 0; text-overflow: ellipsis; border-color: var(--accent-soft); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sektion { margin: 1.4rem 0.25rem 0.5rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.6rem; }
@media (max-width: 520px) { .kacheln { grid-template-columns: 1fr; } }
button.kachel, a.kachel {
  display: flex; align-items: center; gap: 0.9rem; justify-content: flex-start; text-align: left; width: 100%; min-height: 72px;
  padding: 0.85rem 1rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px; font-weight: 400; text-decoration: none;
}
button.kachel:hover, a.kachel:hover { background: var(--surface); border-color: var(--accent); }
.k-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.k-icon svg, .zeile > svg:first-child { width: 22px; height: 22px; }
.k-text, .z-text { display: flex; flex-direction: column; gap: 0.1rem; flex-grow: 1; min-width: 0; }
.k-titel { font-size: 1rem; font-weight: 600; }
.k-unter, .z-unter { font-size: 0.82rem; color: var(--muted); }
.kachel.disabled { opacity: 0.5; pointer-events: none; }
.k-unter.ok { color: var(--ok); font-weight: 600; }
button.kachel.dunkel { background: var(--text); color: #fff; border-color: var(--text); }
button.kachel.dunkel:hover { background: #0F172A; }
.kachel.dunkel .k-icon { background: rgba(255,255,255,0.12); color: #fff; }
.kachel.dunkel .k-unter { color: #CBD5E1; }
.liste { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
button.zeile, a.zeile {
  display: flex; align-items: center; gap: 0.75rem; justify-content: flex-start; text-align: left; width: 100%; min-height: 52px;
  padding: 0.6rem 1rem; background: none; color: var(--text); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; font-weight: 400; text-decoration: none;
}
.liste > :last-child { border-bottom: 0; }
button.zeile:hover, a.zeile:hover { background: #F8FAFC; }
.zeile > svg:first-child { color: var(--muted); }
.z-titel { font-size: 0.95rem; font-weight: 600; }
.zeile.rot, .zeile.rot > svg:first-child { color: var(--accent); }
.kachel svg, .zeile svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
svg.pfeil { width: 18px; height: 18px; color: #94A3B8; stroke-width: 2.2; }
.kachel.dunkel svg.pfeil { color: #CBD5E1; }
.foot { text-align: center; font-size: 0.75rem; color: var(--muted); margin-top: 1.5rem; }