/* WABEO Shell — CSS Tokens 1:1 aus observer-mockup.html */

/* Schulungs-Player: Player-Styles parallel laden, damit der erste Player-
   Mount sofort gerendert wird (alternativ tut's der dynamische Lader in
   schulung-player.js → ensurePlayerCssLoaded()). */
@import url('schulung-player.css');

/* Wahlkreisreservierung: analog zum Player. Der dynamische Lader in
   reservierung.js → ensureCssLoaded() ist Fallback, wenn app.css aus
   irgendeinem Grund nicht durchgezogen wurde. */
@import url('reservierung.css');


:root {
  --wabeo-primary: #e5007e;
  --wabeo-hover: #73003f;
  --wabeo-secondary: #212a59;
  --wabeo-bg-light: #dcedf9;
  --wabeo-bg-neutral: #f7f7f7;
  --wabeo-text: #364249;
  --wabeo-text-muted: #6c757d;
  --wabeo-success: #198754;
  --wabeo-warning: #ff9800;
  --wabeo-danger: #dc3545;
  --wabeo-info: #0d6efd;
  --wabeo-border-color: #dee2e6;
  --wabeo-font-body: 'Titillium Web', 'Helvetica Neue', Arial, sans-serif;
  --wabeo-font-heading: 'Roboto Slab', 'Times New Roman', serif;
  --wabeo-font-mono: SFMono-Regular, Menlo, Consolas, monospace;
  --nav-bar-height: 48px;   /* gemeinsam für Header und Footer */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--wabeo-font-body);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--wabeo-text);
  background: var(--wabeo-bg-neutral);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* App-View-Modus überschreibt body-Hintergrund */
body.app-view { background: var(--wabeo-bg-light); }

main { flex: 1; }

/* ============================================================
   APP LOADING SPINNER
   ============================================================ */
.app-loading {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--wabeo-bg-neutral);
  z-index: 2000;
}
.app-loading.hidden { display: none; }
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--wabeo-border-color);
  border-top-color: var(--wabeo-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   TOP-NAV — Drei-Spalten-Grid (Logo | Titel | Abmelden)
   Höhe, Schriftgröße und Layout stimmen mit dem Footer überein.
   ============================================================ */
.nav-top {
  background: var(--wabeo-secondary);
  height: var(--nav-bar-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  padding: 0;
  position: sticky; top: 0; z-index: 1050;
}
.nav-top-brand,
.nav-top-link,
.nav-top-title {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  padding: 0 20px;
  height: 100%;
  font-family: var(--wabeo-font-heading);
  letter-spacing: .5px;
  cursor: pointer;
  background: none; border: none;
}
.nav-top-link { letter-spacing: 0; font-weight: 600; font-family: inherit; gap: 8px; }
.nav-top-title { justify-self: center; text-align: center; }
.nav-top-left  { display: flex; align-items: stretch; justify-content: flex-start; }
.nav-top-right { display: flex; align-items: stretch; justify-content: flex-end; }
.nav-top-brand:hover,
.nav-top-link:hover,
.nav-top-title:hover { background: rgba(255,255,255,.08); }

/* ============================================================
   SUB-TABS — zweiter Tab-Strip unter dem Header,
   nur im Main-Modus (Datenblatt / Ergebnisse / Verstöße / Hilfe).
   Bricht die Header↔Footer-Symmetrie nicht, weil eigenes Element.
   ============================================================ */
.sub-tabs {
  display: flex;
  background: var(--wabeo-secondary);
  border-top: 1px solid rgba(255,255,255,.08);
  position: fixed; top: var(--nav-bar-height); left: 0; right: 0;
  height: 40px;
  z-index: 1049;
}
body.is-offline .sub-tabs { top: calc(var(--nav-bar-height) + 28px); }
.sub-tabs .nav-tab {
  flex: 1;
  display: inline-flex;
  align-items: center; justify-content: center;
  height: 40px;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.sub-tabs .nav-tab.active {
  color: #fff;
  border-bottom-color: var(--wabeo-primary);
  background: rgba(255,255,255,.04);
}
.sub-tabs .nav-tab:hover { background: rgba(255,255,255,.08); }
/* Doku-Sperre vor dem Wahltag: Reiter sichtbar deaktiviert (kein Klick,
   kein Hover, gedimmt) — statt still zurückzuspringen. */
.sub-tabs .nav-tab.disabled {
  color: rgba(255,255,255,.35);
  cursor: not-allowed;
  border-bottom-color: transparent;
}
.sub-tabs .nav-tab.disabled:hover { background: none; }

/* Magenta/Dunkelblau-Streifen unter Header — nur Landing-Modus */
.stripe {
  height: .4rem;
  background: linear-gradient(to right,
    var(--wabeo-primary) 0, var(--wabeo-primary) 20%,
    var(--wabeo-secondary) 20%, var(--wabeo-secondary) 40%,
    var(--wabeo-primary) 40%, var(--wabeo-primary) 60%,
    var(--wabeo-secondary) 60%, var(--wabeo-secondary) 80%,
    var(--wabeo-primary) 80%, var(--wabeo-primary) 100%);
}
.stripe.hidden { display: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.app-footer {
  background: var(--wabeo-secondary);
  color: #fff;
  padding: 24px 20px;
  margin-top: 40px;
}
.app-footer.app-view-mode {
  background: #fff;
  color: var(--wabeo-text);
  margin-top: 0;
  border-top: 1px solid var(--wabeo-border-color);
  padding: 0;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: center;
}
.footer-link {
  color: #fff;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
}
.footer-link:hover { text-decoration: underline; }

/* App-View Tab-Reiter mit Magenta-Underline */
.app-view-tabs {
  display: flex;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
}
.app-view-tab {
  padding: 14px 20px;
  text-decoration: none;
  color: var(--wabeo-text-muted);
  font-weight: 600;
  font-size: .9rem;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.app-view-tab:hover { color: var(--wabeo-secondary); }
.app-view-tab.active {
  color: var(--wabeo-primary);
  border-bottom-color: var(--wabeo-primary);
}

/* ============================================================
   MAIN CONTENT WRAPPER
   ============================================================ */
.main-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}
.page-title {
  font-family: var(--wabeo-font-heading);
  font-size: 2rem;
  color: var(--wabeo-secondary);
  margin: 0 0 4px;
  font-weight: 700;
}
.page-subtitle {
  color: var(--wabeo-text-muted);
  font-size: .95rem;
  margin: 0 0 36px;
}

/* Theme-Override: css/style.min.css (WordPress-Theme-Erbe der wabeo.de-
 * Marketing-Seite) setzt für jeden <section>-Tag ein riesiges padding
 * (clamp(5rem, 6.25vw, 7.5rem) oben+unten = 80–120 Pixel). In der App-
 * Shell sind <section>-Elemente dichte Layout-Container; wir wollen
 * dort kein Hero-Padding. Selektor zielt nur auf Sektionen INNERHALB
 * der App (.main-content), damit Theme-Sektionen außerhalb (Footer,
 * Marketing-Pages) unangetastet bleiben. */
.main-content section { padding-top: 0; padding-bottom: 0; }

/* Modals hängen an <body>, ausserhalb von .main-content — die globale
   Landing-Regel `section { padding: clamp(5rem…) 0 }` (style.min.css) schlägt
   sonst mit ~80px oben/unten je <section> durch (ueberdimensionale Abstaende in
   den Abo-/SEPA-Checkout-Pop-ups). Gleicher Reset wie oben, nur fuers Modal. */
.modal-body section { padding-top: 0; padding-bottom: 0; }
.modal-body .abo-consent-section,
.modal-body .sepa-checkout-section { margin-bottom: 18px; }
.modal-body .abo-consent-section:last-of-type,
.modal-body .sepa-checkout-section:last-of-type { margin-bottom: 0; }
/* Das gewählte Abo (Paketname + Preis) mit je einer Freizeile davor und
   danach hervorheben, damit es klar sichtbar ist (User-Festlegung 25.07.2026). */
.modal-body .abo-checkout-package-summary { margin: 22px 0; }

.section { margin-bottom: 40px; }
.section-heading {
  font-family: var(--wabeo-font-heading);
  color: var(--wabeo-secondary);
  font-size: 1.25rem;
  font-weight: 700;
  border-bottom: 2px solid var(--wabeo-primary);
  padding-bottom: 6px;
  margin: 0 0 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.section-meta {
  font-size: .85rem;
  color: var(--wabeo-text-muted);
  font-weight: 400;
  font-family: var(--wabeo-font-body);
}

/* ============================================================
   CARDS, BUTTONS, BADGES — aus Mockup
   ============================================================ */
.eval-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.eval-card-header {
  font-family: var(--wabeo-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--wabeo-secondary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--wabeo-bg-light);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: 1px solid transparent;
  font-family: var(--wabeo-font-body);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.5;
  background: none;
}
.btn-primary { background: var(--wabeo-primary); border-color: var(--wabeo-primary); color: #fff; }
.btn-primary:hover { background: var(--wabeo-hover); border-color: var(--wabeo-hover); }
.btn-secondary { background: var(--wabeo-secondary); border-color: var(--wabeo-secondary); color: #fff; }
.btn-secondary:hover { background: #16204a; border-color: #16204a; }
.btn-outline { background: #fff; border-color: var(--wabeo-border-color); color: var(--wabeo-secondary); }
.btn-outline:hover { border-color: var(--wabeo-primary); color: var(--wabeo-primary); }
.btn-sm { padding: 4px 12px; font-size: .85rem; }

.eval-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: .75rem;
  font-weight: 600;
}
.eval-badge-ok      { background: #d1e7dd; color: #0f5132; }
.eval-badge-warning { background: #fff3cd; color: #664d03; }
.eval-badge-error   { background: #f8d7da; color: #842029; }
.eval-badge-info    { background: var(--wabeo-bg-light); color: var(--wabeo-secondary); }
.eval-badge-muted   { background: #e9ecef; color: var(--wabeo-text-muted); }

/* ============================================================
   DASHBOARD-KACHELN
   ============================================================ */
.dashboard-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.dashboard-tile {
  background: #fff;
  border: 2px solid var(--wabeo-border-color);
  border-radius: 8px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
}
.dashboard-tile:hover {
  border-color: var(--wabeo-primary);
  box-shadow: 0 2px 12px rgba(229, 0, 126, .12);
}
.dashboard-tile-icon {
  color: var(--wabeo-secondary);
  margin-bottom: 4px;
}
.dashboard-tile-title {
  font-family: var(--wabeo-font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--wabeo-secondary);
}
.dashboard-tile-status {
  color: var(--wabeo-text-muted);
  font-size: .85rem;
  margin-top: auto;
}

/* ============================================================
   OBSERVER-LANDING — Mockup-Stilabschnitte
   ============================================================ */
.todo-list {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  overflow: hidden;
}
.todo-item {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--wabeo-border-color);
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}
.todo-item:first-child { border-top: none; }
.todo-item:hover { background: var(--wabeo-bg-neutral); }
.todo-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--wabeo-bg-light);
  color: var(--wabeo-secondary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.todo-text { font-size: .95rem; }
.todo-text strong { font-weight: 600; color: var(--wabeo-secondary); }
.todo-text .todo-context {
  color: var(--wabeo-text-muted);
  font-size: .85rem;
  margin-left: 4px;
}
.todo-deadline {
  font-size: .8rem;
  color: var(--wabeo-text-muted);
  white-space: nowrap;
}
.todo-arrow { color: var(--wabeo-primary); font-size: 1.2rem; line-height: 1; }

.training-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.training-stat {
  font-family: var(--wabeo-font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--wabeo-secondary);
  line-height: 1;
}
.training-stat em {
  font-family: var(--wabeo-font-body);
  font-style: normal;
  font-size: 1rem;
  color: var(--wabeo-text-muted);
  font-weight: 400;
  margin-left: 6px;
}
.training-progress {
  flex: 1;
  min-width: 180px;
  height: 10px;
  background: #e9ecef;
  border-radius: 5px;
  overflow: hidden;
}
.training-progress-bar {
  height: 100%;
  background: var(--wabeo-success);
  border-radius: 5px;
}

.election-list { display: flex; flex-direction: column; gap: 14px; }
.election-card {
  background: #fff;
  border: 2px solid var(--wabeo-border-color);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.election-card:hover {
  border-color: var(--wabeo-primary);
  box-shadow: 0 2px 12px rgba(229, 0, 126, .12);
}
.election-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #fff;
  gap: 16px;
}
.election-title-block {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.election-name {
  font-family: var(--wabeo-font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--wabeo-secondary);
  margin: 0;
}
.election-date-block { text-align: right; flex-shrink: 0; }
.election-date {
  font-size: .9rem;
  font-weight: 700;
  color: var(--wabeo-secondary);
  font-variant-numeric: tabular-nums;
}
.election-countdown {
  display: block;
  font-size: .75rem;
  color: var(--wabeo-text-muted);
  margin-top: 2px;
}

.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--wabeo-bg-neutral);
  border-top: 1px solid var(--wabeo-border-color);
}
.action-cell {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid var(--wabeo-border-color);
  background: #fff;
  min-height: 130px;
}
.action-cell:last-child { border-right: none; }
.action-cell.locked { background: var(--wabeo-bg-neutral); }
.action-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--wabeo-secondary);
  font-size: .9rem;
  /* Erlaubt mehrzeilige Labels wie „Dokumentation der Wahlbeobachtung" zu
     wrappen, ohne dass die Tile-Höhe asymmetrisch wird. Icon bleibt oben
     ausgerichtet, Text fließt unten weiter. */
  line-height: 1.3;
}
.action-label > span { min-width: 0; }
.action-label svg { flex-shrink: 0; }
.action-status-text {
  font-size: .82rem;
  color: var(--wabeo-text-muted);
  line-height: 1.4;
}
.action-link {
  margin-top: auto;
  font-size: .85rem;
  text-decoration: none;
  color: var(--wabeo-primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.action-link:hover { color: var(--wabeo-hover); text-decoration: underline; }
.action-link.disabled {
  color: var(--wabeo-text-muted);
  pointer-events: none;
  font-weight: 400;
}
.action-link.muted { color: var(--wabeo-text-muted); font-weight: 600; }
.action-link.muted:hover { color: var(--wabeo-secondary); }

/* Storno-Icons in der Set-Cell (Briefing 25.5.2026 §6). Schmal, neben
   „Bestellung ansehen ↗" — Pencil + Trash. */
.reservation-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.reservation-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--wabeo-border-color);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 500;
  color: var(--wabeo-secondary);
  line-height: 1.2;
}
.reservation-icon-btn:hover { background: var(--wabeo-bg-light); }
.reservation-icon-btn.danger { color: var(--wabeo-danger); border-color: rgba(220,53,69,0.4); }
.reservation-icon-btn.danger:hover { background: #f8d7da; }
.reservation-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.reservation-icon-glyph { font-size: 1.1em; line-height: 1; }
.reservation-icon-label { white-space: nowrap; }

/* Merkbox „Mission" — zwischen Schulungen und Kommende Wahlen. Klare visuelle
 * Trennung, betont aber nicht zu laut (kein voller Section-Header). */
.mission-box {
  background: var(--wabeo-bg-light, #dcedf9);
  border-left: 4px solid var(--wabeo-primary, #e5007e);
  border-radius: 6px;
  padding: 14px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 4px 0 24px;
}
.mission-emoji {
  font-size: 1.6em;
  line-height: 1.2;
  flex-shrink: 0;
}
.mission-text {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--wabeo-text, #364249);
}
.mission-text strong { color: var(--wabeo-secondary, #212a59); }

/* „Meine Dokumentationen"-Karten — eine pro Reservierung. */
.mydoku-list { display: flex; flex-direction: column; gap: 10px; }
.mydoku-card {
  display: block;
  background: #fff;
  border: 2px solid var(--wabeo-border-color);
  border-radius: 8px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, background .15s;
}
.mydoku-card:hover {
  border-color: var(--wabeo-primary, #e5007e);
  background: #fffafd;
}
.mydoku-card-body {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mydoku-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mydoku-text { flex: 1; min-width: 0; }
.mydoku-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.mydoku-title-line strong {
  color: var(--wabeo-secondary, #212a59);
  font-size: 1.02em;
}
.mydoku-sub {
  font-size: .9em;
  color: var(--wabeo-text-muted, #6c757d);
}
.mydoku-chevron {
  flex-shrink: 0;
  font-size: 1.4em;
  color: var(--wabeo-primary, #e5007e);
  line-height: 1;
}

.review-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.review-card {
  background: #fff;
  border: 2px solid var(--wabeo-border-color);
  border-radius: 8px;
  padding: 16px 20px;
  transition: border-color .15s, box-shadow .15s;
}
.review-card:hover {
  border-color: var(--wabeo-primary);
  box-shadow: 0 2px 12px rgba(229, 0, 126, .12);
}
.review-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.review-title-block { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.review-name-line { display: flex; align-items: center; gap: 10px; }
.review-name {
  font-family: var(--wabeo-font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wabeo-secondary);
}
.review-meta { font-size: .8rem; color: var(--wabeo-text-muted); }
.review-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

.archive-year {
  background: #fff;
  border: 1px solid var(--wabeo-border-color);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  margin-bottom: 10px;
  overflow: hidden;
}
.archive-year-head {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: var(--wabeo-bg-light);
}
.archive-year-title {
  font-family: var(--wabeo-font-heading);
  font-weight: 700;
  color: var(--wabeo-secondary);
  font-size: 1rem;
}
.archive-year-count {
  color: var(--wabeo-text-muted);
  font-size: .85rem;
  margin-left: 8px;
  font-weight: 400;
}
.archive-year-chevron {
  color: var(--wabeo-secondary);
  transition: transform .2s;
  display: inline-flex;
}
.archive-year.open .archive-year-chevron { transform: rotate(90deg); }
.archive-year-body { display: none; background: #fff; }
.archive-year.open .archive-year-body { display: block; }
.archive-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid #f0f0f0;
}
.archive-row:first-child { border-top: none; }
.archive-name { font-size: .9rem; font-weight: 600; color: var(--wabeo-secondary); }
.archive-date {
  font-size: .85rem;
  color: var(--wabeo-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   VERIFY-BANNER (oben in /observer wenn nicht verifiziert)
   ============================================================ */
.verify-banner {
  background: #fff3cd;
  border-left: 4px solid var(--wabeo-warning);
  color: #664d03;
  padding: 14px 18px;
  margin: 0 0 24px;
  border-radius: 4px;
}
.verify-banner strong { font-weight: 700; }
.verify-banner a {
  color: var(--wabeo-primary);
  font-weight: 600;
  text-decoration: none;
  margin-left: 8px;
}
.verify-banner a:hover { text-decoration: underline; }

/* ============================================================
   PAYMENT-BANNER (Rückkehr aus dem Bezahlvorgang, /wallet)
   ============================================================ */
.payment-banner {
  background: #d1e7dd;
  border-left: 4px solid var(--wabeo-success, #198754);
  color: #0a3622;
  padding: 14px 18px;
  margin: 0 0 24px;
  border-radius: 4px;
}
.payment-banner strong { font-weight: 700; }
.payment-banner-failed {
  background: #f8d7da;
  border-left-color: var(--wabeo-danger, #dc3545);
  color: #58151c;
}

/* Sektionen ausgegraut, wenn nicht verifiziert */
.section.locked-by-verify { opacity: .45; pointer-events: none; }

/* Platzhalter-Markierung */
.placeholder-marker {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--wabeo-warning);
  background: #fff3cd;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: 2px;
}

/* ============================================================
   WALLET — Bestellhistorie-Tabelle
   ============================================================ */
.eval-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  background: #fff;
}
.eval-table th, .eval-table td {
  padding: 10px 14px;
  text-align: left;
  border-top: 1px solid var(--wabeo-border-color);
  vertical-align: top;
}
.eval-table thead th {
  border-top: none;
  border-bottom: 2px solid var(--wabeo-bg-light);
  font-family: var(--wabeo-font-heading);
  font-weight: 700;
  color: var(--wabeo-secondary);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.eval-table tbody tr:first-child td { border-top: none; }
.eval-table .col-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eval-table .col-date   { white-space: nowrap; color: var(--wabeo-text-muted); font-variant-numeric: tabular-nums; }
.eval-table .col-status { white-space: nowrap; }
.eval-table .col-pdf    { text-align: right; }
.eval-table .row-subline {
  display: block;
  font-size: .78rem;
  color: var(--wabeo-text-muted);
  margin-top: 2px;
}

.orders-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  overflow: hidden;
  margin-bottom: 14px;
}
.orders-year-label {
  font-family: var(--wabeo-font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--wabeo-text-muted);
  padding: 12px 16px 4px;
}
.orders-empty {
  padding: 24px 20px;
  text-align: center;
  color: var(--wabeo-text-muted);
  font-style: italic;
}

/* ============================================================
   WALLET — Pakete-Sektion
   ============================================================ */
.package-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.package-card {
  background: #fff;
  border: 2px solid var(--wabeo-border-color);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .15s, box-shadow .15s;
  position: relative;
}
.package-card.active {
  border-color: var(--wabeo-primary);
  box-shadow: 0 2px 12px rgba(229, 0, 126, .12);
}
.package-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.package-name {
  font-family: var(--wabeo-font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--wabeo-secondary);
  margin: 0;
}
.package-price {
  font-family: var(--wabeo-font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--wabeo-secondary);
}
.package-price .per {
  font-family: var(--wabeo-font-body);
  font-size: .9rem;
  font-weight: 400;
  color: var(--wabeo-text-muted);
  margin-left: 4px;
}
.package-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.package-features li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .92rem;
  line-height: 1.45;
}
.package-features li::before {
  content: '✓';
  color: var(--wabeo-success);
  font-weight: 700;
  flex-shrink: 0;
  width: 1em;
  text-align: center;
}
.package-features li.bonus {
  color: var(--wabeo-primary);
  font-weight: 600;
}
.package-features li.bonus::before {
  content: '★';
  color: var(--wabeo-primary);
}
.package-status {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--wabeo-border-color);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.package-status-line {
  font-size: .85rem;
  color: var(--wabeo-text-muted);
}
.package-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* ============================================================
   WALLET — B-Token-Karte (mit Avatar) und T-Token parallel
   ============================================================ */
.token-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.token-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  padding: 24px;
  display: flex;
  flex-direction: column;
}
.token-balance {
  font-family: var(--wabeo-font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--wabeo-secondary);
  line-height: 1;
}
.token-balance em {
  font-family: var(--wabeo-font-body);
  font-style: normal;
  font-size: 1rem;
  color: var(--wabeo-text-muted);
  font-weight: 400;
  margin-left: 6px;
}
.token-equiv {
  margin-top: 6px;
  color: var(--wabeo-text-muted);
  font-size: .85rem;
}
.token-explainer {
  margin: 16px 0 0;
  color: var(--wabeo-text);
  font-size: .92rem;
  line-height: 1.55;
  max-width: 60ch;
}
.token-status {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--wabeo-border-color);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .85rem;
  color: var(--wabeo-text-muted);
}

/* Token-Münze oben in den Token-Karten — echtes Münz-SVG aus assets/tokens/.
   Die SVGs bringen Kreis + pinken Rand selbst mit (kein CSS-Kreis nötig). */
.token-coin {
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  flex-shrink: 0;
  display: block;
}
.token-avatar-todo {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #842029;
  background: #f8d7da;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

/* ============================================================
   PROFIL — Stammdaten-Felderliste
   ============================================================ */
.profile-fields {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  overflow: hidden;
}
/* Feste Spaltenbreiten statt `auto auto`: Jede Zeile ist ein eigenes Grid, mit
   `auto` richtet sich die Spalte deshalb am Inhalt DER JEWEILIGEN ZEILE aus —
   gemessen ergab das acht verschiedene Startpositionen fuer den Status, die
   Tabelle franste sichtbar aus. Feste Breiten erzwingen dieselbe Spaltenkante
   ueber alle Zeilen. Werte knapp ueber dem gemessenen Maximalbedarf
   (Status 151 px, Aktionen 186 px). */
.profile-field-row {
  display: grid;
  grid-template-columns: 180px 1fr 172px 192px;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--wabeo-border-color);
}
.profile-field-row:first-child { border-top: none; }
.profile-field-label {
  font-weight: 600;
  color: var(--wabeo-secondary);
  font-size: .9rem;
}
.profile-field-value {
  color: var(--wabeo-text);
  font-size: .95rem;
  word-break: break-word;
}
.profile-field-value.empty { color: var(--wabeo-text-muted); font-style: italic; }
/* Umbruch erlaubt: Die langen Hinweistexte ("kann beim Kontakt-WABEO-Treffen
   mitgeprueft werden") waren mit nowrap 303 px breit und haetten die feste
   Spalte gesprengt. Kurze Badges brechen bei 172 px ohnehin nicht um. */
.profile-field-status {
  white-space: normal;
}
/* Rechtsbuendig, damit die Aktionen an EINER Kante enden -- auch dort, wo zwei
   Links uebereinander stehen (Namenszeile). */
.profile-field-actions {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  white-space: nowrap;
}
.field-action-link {
  font-size: .85rem;
  font-weight: 600;
  color: var(--wabeo-primary);
  text-decoration: none;
}
.field-action-link:hover { color: var(--wabeo-hover); text-decoration: underline; }
.field-action-link.muted {
  color: var(--wabeo-text-muted);
  font-weight: 400;
}

/* ============================================================
   FORM-ELEMENTE
   ============================================================ */
.form-stack { display: flex; flex-direction: column; gap: 16px; max-width: 480px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--wabeo-secondary);
}
.form-input {
  font-family: inherit;
  font-size: .95rem;
  padding: 8px 12px;
  border: 1px solid var(--wabeo-border-color);
  background: #fff;
  color: var(--wabeo-text);
}
.form-input:focus {
  outline: none;
  border-color: var(--wabeo-primary);
  box-shadow: 0 0 0 3px rgba(229, 0, 126, .15);
}
.form-input.invalid { border-color: var(--wabeo-danger); }
.form-error {
  color: var(--wabeo-danger);
  font-size: .82rem;
  min-height: 1em;
}
.form-actions { display: flex; gap: 10px; margin-top: 8px; }

/* ============================================================
   TOGGLE-SWITCH
   ============================================================ */
.toggle-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.toggle-switch {
  position: relative;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
  background: #e9ecef;
  border-radius: 13px;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background .15s;
}
.toggle-switch.on { background: var(--wabeo-success); }
.toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch.on .toggle-thumb { transform: translateX(22px); }
.toggle-status {
  font-weight: 600;
  color: var(--wabeo-text-muted);
  font-size: .9rem;
}
.toggle-status.on { color: var(--wabeo-success); }
.toggle-explainer {
  color: var(--wabeo-text-muted);
  font-size: .9rem;
  margin: 8px 0 0;
}

/* ============================================================
   DANGER-SEKTION (Konto löschen)
   ============================================================ */
.danger-section {
  background: #fff;
  border: 2px solid var(--wabeo-danger);
  border-radius: 8px;
  padding: 20px;
}
.danger-section .eval-card-header { color: var(--wabeo-danger); border-bottom-color: #f5c2c7; }
.btn-danger {
  background: var(--wabeo-danger);
  border-color: var(--wabeo-danger);
  color: #fff;
}
.btn-danger:hover { background: #b02a37; border-color: #b02a37; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(33, 42, 89, .6);
  display: flex; align-items: center; justify-content: center;
  z-index: 1500;
  padding: 20px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: #fff;
  border-radius: 8px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}
.modal-header {
  font-family: var(--wabeo-font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--wabeo-secondary);
  padding: 18px 22px 12px;
  border-bottom: 2px solid var(--wabeo-bg-light);
}
.modal-header.danger { color: var(--wabeo-danger); border-bottom-color: #f5c2c7; }
.modal-body {
  padding: 16px 22px;
  overflow-y: auto;
  font-size: .95rem;
  line-height: 1.55;
}
.modal-footer {
  padding: 14px 22px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--wabeo-border-color);
  flex-wrap: wrap;
}

/* ============================================================
   TODO:BACKEND-Marker
   ============================================================ */
.backend-todo {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #842029;
  background: #f8d7da;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: 2px;
}

/* ============================================================
   ICON DEFAULT
   ============================================================ */
.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767.98px) {
  .main-content { padding: 20px 14px 60px; }
  .page-title { font-size: 1.5rem; }
  .action-grid { grid-template-columns: 1fr; }
  .action-cell {
    border-right: none;
    border-bottom: 1px solid var(--wabeo-border-color);
    min-height: auto;
  }
  .action-cell:last-child { border-bottom: none; }
  .training-progress { width: 100%; flex-basis: 100%; }
  .review-actions { width: 100%; }
  .review-actions .btn { flex: 1; justify-content: center; }
  .election-head { flex-direction: column; align-items: flex-start; }
  .election-date-block { text-align: left; }
  .todo-item { grid-template-columns: 32px 1fr auto; }
  .todo-deadline { grid-column: 2 / 3; font-size: .75rem; }
  .todo-arrow { grid-row: 1; grid-column: 3; }
  .footer-inner { flex-direction: column; gap: 12px; }
  .profile-field-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .profile-field-status, .profile-field-actions {
    grid-column: 1;
  }
  .eval-table { font-size: .82rem; }
  .eval-table th, .eval-table td { padding: 8px 10px; }
  .token-balance { font-size: 2rem; }
  .package-grid, .token-grid { grid-template-columns: 1fr; }
}