:root {
  --sb-accent: #567a3c;
  --sb-accent-dark: #435f2f;
  --sb-navy: #202944;
  --sb-border: #dee2e6;
  --sidebar-w: 230px;
  --sidebar-w-collapsed: 60px;
  --topbar-h: 52px;
}

body {
  background: #f3f4f6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #222;
}

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

/* ── Sidebar ─────────────────────────────────────────────── */
#sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: #fff;
  border-right: 1px solid var(--sb-border);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  overflow: hidden;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  min-height: var(--topbar-h);
}
.sidebar-brand img { height: 38px; width: auto; }
.sidebar-brand strong { font-size: .95rem; color: var(--sb-navy); display: block; }
.sidebar-brand small { font-size: .72rem; color: #888; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: #222;
  text-decoration: none;
  font-size: .9rem;
  border-left: 3px solid transparent;
}
.sidebar-link:hover { background: rgba(86,122,60,.08); color: #111; text-decoration: none; }
.sidebar-link.active { background: rgba(86,122,60,.12); color: var(--sb-navy); font-weight: 600; border-left-color: var(--sb-accent); }
.sidebar-link i { font-size: 1.05rem; width: 20px; text-align: center; color: var(--sb-accent-dark); }
.sidebar-divider { height: 1px; background: rgba(0,0,0,.08); margin: 8px 12px; }

/* Aufklappbare Seiten-Gruppen (Seebach Wartburgkreis / Klubhaus / Wohnungsverwaltung) */
.sidebar-item { position: relative; }
.sidebar-link[data-bs-toggle="collapse"] .bi-chevron-down { transition: transform .2s; }
.sidebar-link[aria-expanded="true"] .bi-chevron-down { transform: rotate(-180deg); }
.sidebar-submenu { background: rgba(0,0,0,.02); }
.sidebar-submenu .sidebar-link { padding-left: 30px; font-size: .85rem; }

/* Gruppen-Überschriften innerhalb einer Website-Sektion (z.B. "Inhalte",
   "Redaktion") - reine Gliederung, keine eigenen Rechte. Als <div> steht sie
   nur da (Gruppe mit einem einzigen Punkt); als <a data-bs-toggle="collapse">
   lässt sie sich zusätzlich auf- und zuklappen, damit die Liste kürzer wird. */
.sidebar-caption {
  padding: 14px 16px 4px 30px;
  color: #7c8a71;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.sidebar-submenu .sidebar-caption:first-child { padding-top: 6px; }
a.sidebar-caption {
  padding: 10px 16px 10px 30px;
  cursor: pointer;
}
a.sidebar-caption:hover { background: transparent; color: #435f2f; }
a.sidebar-caption i { width: auto; font-size: .6rem; color: inherit; }
.sidebar-subgroup .sidebar-link { padding-left: 42px; }

.sidebar-footer { border-top: 1px solid rgba(0,0,0,.08); padding: 10px 14px; font-size: .85rem; }
.sidebar-footer .user-name { font-weight: 600; color: var(--sb-navy); display: block; }
.sidebar-footer a { font-size: .82rem; }

/* ── Topbar & Content ────────────────────────────────────── */
#topbar {
  position: fixed;
  top: 0; right: 0; left: var(--sidebar-w);
  height: var(--topbar-h);
  background: #fff;
  border-bottom: 1px solid var(--sb-border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  z-index: 1030;
}

#main-content {
  margin-left: var(--sidebar-w);
  padding: calc(var(--topbar-h) + 24px) 24px 40px;
}

.page-title { color: var(--sb-navy); font-weight: 700; }
.admin-seitenkopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 1.5rem;
}
.admin-seitenkopf-aktionen {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 767.98px) {
  .admin-seitenkopfzeile {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-seitenkopf-aktionen {
    justify-content: flex-start;
  }
}

.btn-sb { background: var(--sb-accent); border-color: var(--sb-accent); color: #fff; }
.btn-sb:hover { background: var(--sb-accent-dark); border-color: var(--sb-accent-dark); color: #fff; }

.benutzer-neu-karte {
  border-color: rgba(86,122,60,.45);
  box-shadow: 0 12px 30px rgba(67,95,47,.08);
}
.benutzer-karte { overflow: hidden; }
.benutzer-karte--inaktiv { opacity: .72; }
.rechte-matrix-wrap {
  border: 1px solid var(--sb-border);
  border-radius: 10px;
}
.rechte-matrix thead th {
  padding: .75rem;
  background: #f0f3ed;
  color: var(--sb-navy);
  text-align: center;
  white-space: nowrap;
}
.rechte-matrix thead th:first-child { text-align: left; }
.rechte-matrix tbody th {
  width: 34%;
  min-width: 220px;
  padding: .85rem;
  background: #fbfcfa;
}
.rechte-matrix tbody th i { color: var(--sb-accent-dark); font-size: 1.15rem; }
.rechte-matrix tbody th small {
  display: block;
  margin-top: .15rem;
  color: #6c757d;
  font-weight: 400;
  line-height: 1.35;
}
.rechte-matrix td { min-width: 105px; padding: .85rem; text-align: center; }
.rechte-option { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
/* Schieberegler statt Haken: Bootstrap richtet den Schalter sonst an einem
   linken Innenabstand aus, den die zentrierten Tabellenzellen hier nicht
   haben - und die Breite muss zurueckgesetzt werden, sonst bleibt der
   Schalter quadratisch und laesst sich nicht als Regler lesen. */
.rechte-option.form-switch { padding-left: 0; }
/* In den Listenblöcken (Redaktionsseiten, Gemeindemanager) steht der Schalter
   sonst weit links vom Text: Bootstrap rueckt ihn mit einem negativen
   Aussenabstand aus dem Innenabstand des Containers heraus - zusammen mit dem
   Flex-Abstand ergibt das eine Luecke, die Schalter und Beschriftung
   auseinanderreisst. */
.form-check.form-switch.d-flex { padding-left: 0; }
.form-check.form-switch.d-flex > .form-check-input { margin-left: 0; }

/* Eingeschaltete Schalter und Haken in der Hausfarbe statt im Bootstrap-Blau.
   Ein blauer Schalter neben grünen Schaltflächen liest sich wie ein fremdes
   Bedienelement. */
.form-check-input:checked {
  background-color: var(--sb-accent);
  border-color: var(--sb-accent);
}
.form-check-input:focus {
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 .2rem rgba(86, 122, 60, .25);
}
.rechte-option .form-check-input { width: 2.15rem; height: 1.2rem; margin: 0; }

@media (max-width: 991.98px) {
  .rechte-matrix,
  .rechte-matrix thead,
  .rechte-matrix tbody,
  .rechte-matrix tr,
  .rechte-matrix th,
  .rechte-matrix td { display: block; width: 100%; }
  .rechte-matrix thead { display: none; }
  .rechte-matrix tbody th { min-width: 0; border-bottom: 0; }
  .rechte-matrix td { display: inline-flex; width: 49%; min-width: 0; padding: .55rem .85rem; text-align: left; border-top: 0; }
  .rechte-matrix tbody tr { padding-bottom: .55rem; border-bottom: 1px solid var(--sb-border); }
  .rechte-matrix tbody tr:last-child { border-bottom: 0; }
}

.card { border: 1px solid var(--sb-border); }
.badge-platzhalter { background: #fff4d6; color: #6b5a12; }
.badge-entwurf { background: #e2e3e5; color: #383d41; }
.badge-veroeffentlicht { background: #d4edda; color: #155724; }

.table > :not(caption) > * > * { vertical-align: middle; }

.admin-schnellzugriff {
  padding: 22px;
  border: 1px solid var(--sb-border);
  border-radius: 14px;
  background:
    radial-gradient(circle at 94% 8%, rgba(86,122,60,.11), transparent 26%),
    #fff;
  box-shadow: 0 12px 32px rgba(32,41,68,.055);
}
.admin-schnellzugriff-kopf {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 17px;
}
.admin-schnellzugriff-kopf h5 {
  margin: 0;
  color: var(--sb-navy);
  font-weight: 700;
}
.admin-schnellzugriff-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--sb-accent-dark);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.admin-schnellzugriff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
@media (min-width: 992px) {
  .admin-schnellzugriff-grid--websites {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.admin-schnellzugriff-karte {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 14px;
  border: 1px solid #dfe5dc;
  border-radius: 10px;
  background: #f8faf7;
  color: #222;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.admin-schnellzugriff-karte:hover,
.admin-schnellzugriff-karte:focus-visible {
  border-color: var(--sb-accent);
  box-shadow: 0 9px 22px rgba(67,95,47,.11);
  color: #111;
  text-decoration: none;
  transform: translateY(-2px);
}
.admin-schnellzugriff-karte:focus-visible {
  outline: 3px solid rgba(86,122,60,.22);
  outline-offset: 2px;
}
.admin-schnellzugriff-karte--sekundaer {
  border-color: #e4ddcc;
  background: #f6f1e7;
}
/* Jede Website bekommt im Dashboard eine eigene Leitfarbe, damit auf einen
   Blick erkennbar ist, in welcher Datenbank ein Eintrag landet. */
.admin-schnellzugriff--seebach { --sz-akzent: 86, 122, 60; }
.admin-schnellzugriff--klubhaus { --sz-akzent: 162, 120, 48; }
.admin-schnellzugriff--wohnen { --sz-akzent: 42, 92, 141; }
.admin-schnellzugriff--seebach,
.admin-schnellzugriff--klubhaus,
.admin-schnellzugriff--wohnen {
  border-left: 4px solid rgba(var(--sz-akzent), .5);
  background:
    radial-gradient(circle at 94% 8%, rgba(var(--sz-akzent), .13), transparent 30%),
    #fff;
}
.admin-schnellzugriff--seebach .admin-schnellzugriff-kicker,
.admin-schnellzugriff--klubhaus .admin-schnellzugriff-kicker,
.admin-schnellzugriff--wohnen .admin-schnellzugriff-kicker,
.admin-schnellzugriff--seebach .admin-schnellzugriff-kopf h5 > i,
.admin-schnellzugriff--klubhaus .admin-schnellzugriff-kopf h5 > i,
.admin-schnellzugriff--wohnen .admin-schnellzugriff-kopf h5 > i {
  color: rgb(var(--sz-akzent));
}
.admin-schnellzugriff-karte--wohnen {
  border-color: #d3e0ee;
  background: #eff5fb;
}
.admin-schnellzugriff-karte--wohnen:hover,
.admin-schnellzugriff-karte--wohnen:focus-visible {
  border-color: #2a5c8d;
  box-shadow: 0 9px 22px rgba(42, 92, 141, .14);
}
.admin-schnellzugriff-karte--wohnen:focus-visible {
  outline-color: rgba(42, 92, 141, .25);
}
.admin-schnellzugriff-karte--wohnen .admin-schnellzugriff-icon {
  background: rgba(42, 92, 141, .12);
  color: #22496f;
}
.admin-schnellzugriff-karte--wohnen .admin-schnellzugriff-pfeil {
  color: #2a5c8d;
}
.admin-schnellzugriff-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: rgba(86,122,60,.12);
  color: var(--sb-accent-dark);
  font-size: 1.12rem;
}
.admin-schnellzugriff-karte--sekundaer .admin-schnellzugriff-icon {
  background: rgba(32,41,68,.09);
  color: var(--sb-navy);
}
.admin-schnellzugriff-karte--inaktiv {
  border-color: #e4e6e1;
  background: #f6f7f4;
  cursor: default;
}
.admin-schnellzugriff-karte--inaktiv:hover {
  border-color: #e4e6e1;
  box-shadow: none;
  color: #222;
  transform: none;
}
.admin-schnellzugriff-karte--inaktiv .admin-schnellzugriff-icon {
  background: #e9ece6;
  color: #6f776b;
}
.admin-schnellzugriff-inhalt {
  display: grid;
  gap: 2px;
}
.admin-schnellzugriff-inhalt strong {
  color: var(--sb-navy);
  font-size: .88rem;
  line-height: 1.25;
}
.admin-schnellzugriff-inhalt small {
  color: #6c757d;
  font-size: .72rem;
  line-height: 1.35;
}
.admin-schnellzugriff-pfeil {
  color: var(--sb-accent);
  font-size: .88rem;
  transition: transform .18s ease;
}
.admin-schnellzugriff-status {
  max-width: 78px;
  color: #7a8175;
  font-size: .64rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
  text-transform: uppercase;
}
.admin-schnellzugriff-karte:hover .admin-schnellzugriff-pfeil,
.admin-schnellzugriff-karte:focus-visible .admin-schnellzugriff-pfeil {
  transform: translateX(3px);
}

.admin-form-abschnitt {
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(32,41,68,.035);
}
.admin-form-abschnitt > .card-header {
  min-height: 67px;
  padding: 13px 18px;
}
.admin-form-abschnitt-nummer {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(86,122,60,.13);
  color: var(--sb-accent-dark);
  font-weight: 700;
}
.admin-form-hinweis {
  padding: 14px;
  border: 1px solid #dfe5dc;
  border-radius: 9px;
  background: #f8faf7;
}

/* Hinweis, der nicht übersehen werden darf. Bewusst kein Rot: Rot steht in
   allen anderen Masken für einen Fehler. Blau bleibt zudem vom gelb/grünen
   Statuskasten unterscheidbar, der oft direkt daneben steht. Balken links und
   Hintergrund heben den Text deutlich vom Formular ab. */
.admin-hinweis-auffaellig {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid #bcd7ea;
  border-left: 5px solid #2b6d97;
  border-radius: 8px;
  background: #eef6fb;
  color: #204b66;
  font-size: 0.875rem;
  line-height: 1.45;
}
.admin-hinweis-auffaellig > i {
  flex: 0 0 auto;
  margin-top: 1px;
  color: #2b6d97;
  font-size: 1rem;
}

/* Veröffentlicht oder nicht - die wichtigste Entscheidung im Formular.
   Der Kasten färbt sich mit der Auswahl: grün = steht auf der Website,
   gelb = liegt nur in der Verwaltung. */
.admin-statusfeld {
  padding: 13px 15px;
  border: 1px solid #dfe5dc;
  border-left: 5px solid #9aa79a;
  border-radius: 9px;
  background: #f8faf7;
}
.admin-statusfeld-kopf {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}
.admin-statusfeld-lampe {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #9aa79a;
}
.admin-statusfeld-schild {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: #e7ebe6;
  color: #4a544a;
}
.admin-statusfeld[data-status="veroeffentlicht"] {
  border-color: #bcdcb4;
  border-left-color: #3f7d33;
  background: #f1f8ee;
}
.admin-statusfeld[data-status="veroeffentlicht"] .admin-statusfeld-lampe { background: #3f7d33; }
.admin-statusfeld[data-status="veroeffentlicht"] .admin-statusfeld-schild {
  background: #dcecd6;
  color: #2f5f26;
}
.admin-statusfeld[data-status="entwurf"] {
  border-color: #ffd9a3;
  border-left-color: #e08a1e;
  background: #fff6e7;
}
.admin-statusfeld[data-status="entwurf"] .admin-statusfeld-lampe { background: #e08a1e; }
.admin-statusfeld[data-status="entwurf"] .admin-statusfeld-schild {
  background: #ffe7c4;
  color: #6b4407;
}

.admin-form-gruppe {
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(32,41,68,.045);
}
.admin-form-gruppe > .card-header {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 13px 18px;
  border-bottom-color: rgba(0,0,0,.08);
}
.admin-form-gruppe > .card-header strong {
  color: var(--sb-navy);
}
.admin-form-gruppe > .card-header .small {
  margin-top: 2px;
  color: #667085;
}
.admin-form-gruppe--inhalt > .card-header {
  background: #f8faf7;
  border-left: 5px solid var(--sb-accent);
}
.admin-form-gruppe--boxen > .card-header {
  background: #f5f1e8;
  border-left: 5px solid #b59b68;
}
.admin-form-gruppe--medien > .card-header {
  background: #f4f7fa;
  border-left: 5px solid #7089a1;
}
.admin-form-gruppe--veroeffentlichung > .card-header {
  background: #f7f4fa;
  border-left: 5px solid #8a709a;
}
.admin-form-gruppe--navigation > .card-header {
  background: #f8f5ef;
  border-left: 5px solid #9b8260;
}
.admin-form-gruppe--organisation > .card-header {
  background: #f1f7f6;
  border-left: 5px solid #5f8e86;
}
.admin-form-gruppe--kontakt > .card-header {
  background: #f2f7f8;
  border-left: 5px solid #5f8793;
}
.admin-form-gruppe--vorschau > .card-header {
  background: #fff;
  border-left: 5px solid #b6bec7;
}

/* Einheitliche lange Redaktionsformulare für Seebach, Klubhaus und Wohnungsverwaltung */
.admin-formular-sprungmarken,
.klubhaus-formular-sprungmarken {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 10px;
  border: 1px solid #dfe5dc;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(32,41,68,.035);
}
.admin-formular-sprungmarken a,
.klubhaus-formular-sprungmarken a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #f5f7f4;
  color: #3f4850;
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.admin-formular-sprungmarken a:hover,
.admin-formular-sprungmarken a:focus-visible,
.admin-formular-sprungmarken a.ist-aktiv,
.klubhaus-formular-sprungmarken a:hover,
.klubhaus-formular-sprungmarken a:focus-visible,
.klubhaus-formular-sprungmarken a.ist-aktiv {
  background: var(--sb-navy);
  color: #fff;
  transform: translateY(-1px);
}
.admin-formular-sprungmarken span,
.klubhaus-formular-sprungmarken span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(86,122,60,.15);
  color: var(--sb-accent-dark);
  font-size: .68rem;
}
.admin-formular-sprungmarken a:hover span,
.admin-formular-sprungmarken a:focus-visible span,
.admin-formular-sprungmarken a.ist-aktiv span,
.klubhaus-formular-sprungmarken a:hover span,
.klubhaus-formular-sprungmarken a:focus-visible span,
.klubhaus-formular-sprungmarken a.ist-aktiv span {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.admin-editor-abschnitt,
.klubhaus-editor-abschnitt {
  scroll-margin-top: calc(var(--topbar-h) + 18px);
  border-color: #dfe3dd;
}
.admin-editor-abschnitt.admin-form-gruppe--inhalt .admin-form-abschnitt-nummer,
.klubhaus-editor-abschnitt.admin-form-gruppe--inhalt .admin-form-abschnitt-nummer {
  background: #dfeadc;
  color: #355625;
}
.admin-editor-abschnitt.admin-form-gruppe--medien .admin-form-abschnitt-nummer,
.klubhaus-editor-abschnitt.admin-form-gruppe--medien .admin-form-abschnitt-nummer {
  background: #dfe8f0;
  color: #405d77;
}
.admin-editor-abschnitt.admin-form-gruppe--navigation .admin-form-abschnitt-nummer,
.klubhaus-editor-abschnitt.admin-form-gruppe--navigation .admin-form-abschnitt-nummer {
  background: #ebe1d3;
  color: #765b35;
}
.admin-editor-abschnitt.admin-form-gruppe--boxen .admin-form-abschnitt-nummer,
.klubhaus-editor-abschnitt.admin-form-gruppe--boxen .admin-form-abschnitt-nummer {
  background: #eee2ca;
  color: #715a2b;
}
.admin-editor-abschnitt.admin-form-gruppe--veroeffentlichung .admin-form-abschnitt-nummer,
.klubhaus-editor-abschnitt.admin-form-gruppe--veroeffentlichung .admin-form-abschnitt-nummer {
  background: #e8dfed;
  color: #654d76;
}
.klubhaus-form-untergruppe {
  padding: 14px;
  border: 1px solid #e2e6df;
  border-radius: 9px;
  background: #fafbf9;
  transition: opacity .16s ease, filter .16s ease;
}
.klubhaus-form-schaltinhalt--inaktiv {
  opacity: .55;
  filter: grayscale(.2);
}
.admin-editor-abschnitt.admin-form-gruppe--organisation .admin-form-abschnitt-nummer {
  background: #dcecea;
  color: #38665f;
}
.admin-editor-abschnitt.admin-form-gruppe--kontakt .admin-form-abschnitt-nummer {
  background: #dce9ed;
  color: #385f69;
}
/* ── Formular mit Reitern ─────────────────────────────────
   Wichtig: Ohne die Klasse "reiter-modus" am <html>-Element stehen alle
   Bereiche untereinander wie vorher. Die Klasse setzt erst das Skript der
   Maske - fällt JavaScript aus, bleibt jedes Feld erreichbar. */

.admin-maskenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 13px 16px;
  border: 1px solid #dfe5dc;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(32,41,68,.035);
}
.admin-maskenkopf-text { min-width: 0; }
.admin-maskenkopf-text strong {
  display: block;
  color: var(--sb-navy);
  line-height: 1.25;
}
.admin-maskenkopf-text span {
  display: block;
  font-size: .76rem;
  color: #7c8177;
  overflow-wrap: anywhere;
}
.admin-maskenkopf-plakette {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
.admin-maskenkopf-plakette::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.admin-maskenkopf-plakette--veroeffentlicht { background: #e7f1e2; color: #2f5f26; }
.admin-maskenkopf-plakette--entwurf { background: #ffe7c4; color: #6b4407; }

.admin-reiter-leiste {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 18px;
  padding: 6px 8px;
  border: 1px solid #dfe5dc;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(32,41,68,.035);
}
html.reiter-modus .admin-reiter-leiste,
html.reiter-alles .admin-reiter-leiste { display: flex; }
/* In der Ansicht "Alles auf einer Seite" bleibt die Leiste stehen, damit der
   Umschalter erreichbar ist - nur die Reiter selbst verschwinden. */
html.reiter-alles .admin-reiter { display: none; }

.admin-reiter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: #4a5450;
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.admin-reiter:hover { background: #f2f5f0; color: var(--sb-navy); }
.admin-reiter:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 1px; }
.admin-reiter[aria-selected="true"] {
  background: var(--sb-accent);
  color: #fff;
}
.admin-reiter i { font-size: .95rem; }

.admin-reiter-zaehler {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eaeee7;
  color: #55605a;
  font-size: .7rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.admin-reiter-zaehler.ist-leer { opacity: .45; }

/* Punkt am Reiter: In diesem Bereich steht eine Änderung, die noch nicht
   gespeichert ist. Farbe wie beim Entwurfs-Status, damit "offen" im ganzen
   Backend dasselbe Gelb hat. */
.admin-reiter.hat-aenderung::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e08a1e;
  box-shadow: 0 0 0 2px #fff;
}
.admin-reiter.hat-aenderung[aria-selected="true"]::after {
  box-shadow: 0 0 0 2px var(--sb-accent);
}

.admin-ungespeichert {
  margin-top: 3px;
  font-weight: 700;
  color: #8a5a0c !important;
}
.admin-reiter[aria-selected="true"] .admin-reiter-zaehler {
  background: rgba(255,255,255,.25);
  color: #fff;
}

.admin-reiter-alles {
  margin-left: auto;
  padding: 8px 13px;
  border: 1px solid #dfe5dc;
  border-radius: 9px;
  background: #fff;
  color: #6f777d;
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}
.admin-reiter-alles:hover { background: #f5f7f4; color: var(--sb-navy); }
.admin-reiter-alles.ist-aktiv {
  border-color: var(--sb-accent);
  background: #eef3ea;
  color: var(--sb-accent-dark);
}
html.reiter-alles .admin-reiter-alles { margin-left: 0; }
.admin-reiter-alles:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 1px; }

html.reiter-modus .admin-reiter-tafel { display: none; }
html.reiter-modus .admin-reiter-tafel[data-aktiv] { display: block; }
html.reiter-modus .admin-nur-alles { display: none; }

/* Die Abschnittsnummern zählen die ganze Maske durch. Innerhalb eines Reiters
   ergäbe eine Folge wie 3, 4, 8 keinen Sinn - dort bleiben sie weg. */
html.reiter-modus .admin-reiter-buehne .admin-form-abschnitt-nummer { display: none; }

.admin-formular-aktion,
.klubhaus-formular-aktion {
  position: sticky;
  z-index: 20;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 4px;
  padding: 13px 16px;
  border: 1px solid #d7ddd3;
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 30px rgba(32,41,68,.14);
  backdrop-filter: blur(8px);
}
.admin-formular-aktion span,
.admin-formular-aktion small,
.klubhaus-formular-aktion span,
.klubhaus-formular-aktion small {
  display: block;
}
.admin-formular-aktion strong,
.klubhaus-formular-aktion strong {
  color: var(--sb-navy);
}
.admin-formular-aktion small,
.klubhaus-formular-aktion small {
  margin-top: 2px;
  color: #6f777d;
}

@media (max-width: 575.98px) {
  .admin-formular-sprungmarken a,
  .klubhaus-formular-sprungmarken a {
    flex: 1 1 calc(50% - 8px);
  }
  .admin-formular-aktion,
  .klubhaus-formular-aktion {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-formular-aktion .btn,
  .klubhaus-formular-aktion .btn {
    width: 100%;
  }
}

/* ── Zentrale Hilfeseite ────────────────────────────────── */
.hilfe-einstieg {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 18px;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid #dce5d8;
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 18%, rgba(86,122,60,.18), transparent 34%),
    linear-gradient(135deg, #fff, #f4f7f1);
  box-shadow: 0 14px 36px rgba(32,41,68,.06);
}
.hilfe-einstieg-text { max-width: 820px; }
.hilfe-einstieg h5,
.hilfe-bereich-kopf h5 {
  margin: 0;
  color: var(--sb-navy);
  font-weight: 750;
}
.hilfe-einstieg h5 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.hilfe-einstieg p {
  max-width: 75ch;
  margin: 12px 0 0;
  color: #5f6871;
}
.hilfe-einstieg-icon {
  flex: 0 0 auto;
  color: rgba(67,95,47,.24);
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: 1;
}
.hilfe-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--sb-accent-dark);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.hilfe-sprungmarken {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.hilfe-sprungkarte {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 78px;
  padding: 13px;
  border: 1px solid #dfe5dc;
  border-radius: 11px;
  background: #fff;
  color: #222;
  text-decoration: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.hilfe-sprungkarte:hover,
.hilfe-sprungkarte:focus-visible {
  border-color: var(--sb-accent);
  box-shadow: 0 8px 22px rgba(67,95,47,.1);
  color: #111;
  text-decoration: none;
  transform: translateY(-2px);
}
.hilfe-sprungkarte > span:nth-child(2) { min-width: 0; }
.hilfe-sprungkarte strong,
.hilfe-sprungkarte small { display: block; }
.hilfe-sprungkarte strong { color: var(--sb-navy); font-size: .86rem; }
.hilfe-sprungkarte small { margin-top: 2px; color: #747c84; font-size: .68rem; line-height: 1.3; }
.hilfe-sprungkarte > .bi-arrow-down { color: #9aa29a; font-size: .78rem; }
.hilfe-sprung-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(86,122,60,.12);
  color: var(--sb-accent-dark);
}
.hilfe-sprungkarte--klubhaus .hilfe-sprung-icon { background: rgba(32,41,68,.09); color: var(--sb-navy); }
.hilfe-sprungkarte--vorbereitet { background: #fafafa; }
.hilfe-sprungkarte--vorbereitet .hilfe-sprung-icon { background: #eceeeb; color: #69716a; }
.hilfe-zusammenspiel,
.hilfe-bereich {
  scroll-margin-top: calc(var(--topbar-h) + 18px);
  margin-bottom: 24px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--sb-border);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(32,41,68,.045);
}
.hilfe-zusammenspiel {
  border-color: rgba(86,122,60,.4);
  background:
    linear-gradient(180deg, rgba(86,122,60,.035), transparent 180px),
    #fff;
}
.hilfe-bereich-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.hilfe-bereich-kopf h5 i { margin-right: 5px; color: var(--sb-accent-dark); }
.hilfe-merksatz {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #eaf2e6;
  color: #365326;
  font-size: .77rem;
  font-weight: 750;
  white-space: nowrap;
}
.hilfe-fluss {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.hilfe-fluss-spalte {
  overflow: hidden;
  border: 1px solid #dce5d8;
  border-radius: 13px;
  background: #fbfcfa;
}
.hilfe-fluss-spalte--klubhaus { border-color: #dedfE6; background: #faf9f6; }
.hilfe-fluss-kopf {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 17px;
  border-bottom: 1px solid #dce5d8;
  background: #eef4eb;
}
.hilfe-fluss-spalte--klubhaus .hilfe-fluss-kopf { border-color: #dedfe6; background: #eeeef2; }
.hilfe-fluss-kopf > i { color: var(--sb-accent-dark); font-size: 1.45rem; }
.hilfe-fluss-spalte--klubhaus .hilfe-fluss-kopf > i { color: var(--sb-navy); }
.hilfe-fluss-kopf strong,
.hilfe-fluss-kopf small { display: block; }
.hilfe-fluss-kopf strong { color: var(--sb-navy); }
.hilfe-fluss-kopf small { margin-top: 2px; color: #68716a; font-size: .73rem; }
.hilfe-fluss-schritte {
  margin: 0;
  padding: 18px 20px 14px 44px;
}
.hilfe-fluss-schritte li { margin-bottom: 11px; padding-left: 4px; color: #4f5751; font-size: .86rem; }
.hilfe-fluss-schritte li::marker { color: var(--sb-accent-dark); font-weight: 800; }
.hilfe-fluss-ergebnis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 16px 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  color: #6a726c;
  font-size: .75rem;
}
.hilfe-fluss-ergebnis strong { color: var(--sb-navy); font-size: .8rem; }
.hilfe-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 18px;
  padding: 15px 17px;
  border: 1px solid #dce5d8;
  border-radius: 10px;
  background: #f8faf7;
}
.hilfe-hinweis > i { flex: 0 0 auto; margin-top: 1px; color: var(--sb-accent-dark); font-size: 1.15rem; }
.hilfe-hinweis strong { display: block; margin-bottom: 3px; color: var(--sb-navy); }
.hilfe-hinweis p { margin: 0; color: #626a64; font-size: .85rem; }
.hilfe-hinweis--wichtig { border-color: #ead9a8; background: #fffaf0; }
.hilfe-hinweis--wichtig > i { color: #9b6b12; }
.hilfe-entscheidung {
  margin-top: 18px;
  border: 1px solid var(--sb-border);
  border-radius: 10px;
}
.hilfe-entscheidung thead th {
  padding: 11px 13px;
  background: #f2f4f1;
  color: var(--sb-navy);
  font-size: .78rem;
  white-space: nowrap;
}
.hilfe-entscheidung tbody td { padding: 12px 13px; font-size: .82rem; }
.hilfe-badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
}
.hilfe-badge--seebach { background: #e6f0e2; color: #365326; }
.hilfe-badge--klubhaus { background: #e7e8ee; color: var(--sb-navy); }
.hilfe-themen-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.hilfe-thema {
  min-width: 0;
  padding: 16px;
  border: 1px solid #e2e5e0;
  border-radius: 10px;
  background: #fafbfa;
}
.hilfe-thema-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border-radius: 9px;
  background: rgba(86,122,60,.11);
  color: var(--sb-accent-dark);
}
.hilfe-thema h6,
.hilfe-detailkarte h6 { color: var(--sb-navy); font-weight: 750; }
.hilfe-thema p,
.hilfe-detailkarte p { color: #636b65; font-size: .84rem; }
.hilfe-thema p { margin: 0; }
.hilfe-detailkarte { border-radius: 11px; background: #fcfcfb; }
.hilfe-detailkarte .card-body { padding: 20px; }
.hilfe-detailkarte--facebook { border-color: #d7dde9; background: #f8f9fc; }
.hilfe-detailkarte--facebook h6 i { color: #1877f2; }
.hilfe-liste { margin: 0; padding-left: 19px; color: #565e58; font-size: .86rem; }
.hilfe-liste li { margin-bottom: 8px; }
.hilfe-kurzschritte { padding-left: 20px; color: #565e58; font-size: .84rem; }
.hilfe-kurzschritte li { margin-bottom: 5px; }
.hilfe-klein { color: #747c76 !important; font-size: .76rem !important; }
.hilfe-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 18px; }
.hilfe-vergleich > div { padding: 13px; border: 1px solid #e1e4df; border-radius: 9px; background: #fff; }
.hilfe-vergleich strong { display: block; margin-bottom: 6px; color: var(--sb-navy); font-size: .82rem; }
.hilfe-vergleich strong i { color: var(--sb-accent-dark); }
.hilfe-vergleich p { margin: 0; font-size: .76rem; }
.hilfe-bereich--vorbereitet { border-style: dashed; background: #fafafa; }
.hilfe-vorbereitung { display: flex; align-items: flex-start; gap: 18px; padding: 19px; border-radius: 11px; background: #f1f2ef; }
.hilfe-vorbereitung > i { flex: 0 0 auto; color: #8a7042; font-size: 1.8rem; }
.hilfe-vorbereitung strong { display: block; margin-bottom: 5px; color: var(--sb-navy); }
.hilfe-vorbereitung p { max-width: 90ch; margin: 0 0 9px; color: #676e68; font-size: .86rem; }
.hilfe-merkpunkte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hilfe-merkpunkte > div { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid #e2e5e0; border-radius: 9px; background: #fafbfa; color: #5e665f; font-size: .83rem; }
.hilfe-merkpunkte > div > i { flex: 0 0 auto; color: var(--sb-accent-dark); font-size: 1.05rem; }
.hilfe-merkpunkte strong { color: var(--sb-navy); }
.hilfe-abschluss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--sb-navy);
  color: #fff;
}
.hilfe-abschluss strong,
.hilfe-abschluss span { display: block; }
.hilfe-abschluss span { margin-top: 2px; color: rgba(255,255,255,.7); font-size: .78rem; }

@media (max-width: 1199.98px) {
  .hilfe-sprungmarken,
  .hilfe-themen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .hilfe-einstieg-icon { display: none; }
  .hilfe-fluss,
  .hilfe-merkpunkte { grid-template-columns: 1fr; }
  .hilfe-bereich-kopf { align-items: flex-start; flex-direction: column; }
  .hilfe-merksatz { white-space: normal; }
}

@media (max-width: 575.98px) {
  .hilfe-sprungmarken,
  .hilfe-themen-grid,
  .hilfe-vergleich { grid-template-columns: 1fr; }
  .hilfe-zusammenspiel,
  .hilfe-bereich { padding: 17px; }
  .hilfe-fluss-ergebnis { align-items: flex-start; flex-direction: column; }
  .hilfe-abschluss { align-items: stretch; flex-direction: column; }
  .hilfe-abschluss .btn { width: 100%; }
}

/* ── Öffentliche Fotoalben ───────────────────────────────── */
.fotoalbum-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.fotoalbum-admin-karte {
  overflow: hidden;
  border: 1px solid var(--sb-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(32,41,68,.055);
}
.fotoalbum-admin-bild {
  position: relative;
  display: grid;
  place-items: center;
  height: 210px;
  overflow: hidden;
  background: #edf0ea;
  color: #7d8e73;
  font-size: 2.8rem;
}
.fotoalbum-admin-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fotoalbum-admin-bild .badge {
  position: absolute;
  top: 12px;
  right: 12px;
}
.fotoalbum-admin-inhalt { padding: 20px; }
.fotoalbum-admin-inhalt > small {
  display: block;
  margin-bottom: 4px;
  color: var(--sb-accent-dark);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fotoalbum-admin-inhalt h5 {
  margin-bottom: 6px;
  color: var(--sb-navy);
}
.fotoalbum-admin-inhalt > p {
  margin-bottom: 16px;
  color: #6c757d;
  font-size: .84rem;
}
.fotoalbum-admin-aktionen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fotoalbum-admin-leer-icon {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(86,122,60,.12);
  color: var(--sb-accent-dark);
  font-size: 1.55rem;
}
.fotoalbum-bilder-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.fotoalbum-bild-admin-karte {
  overflow: hidden;
  border: 1px solid var(--sb-border);
  border-radius: 13px;
  background: #fff;
}
.fotoalbum-bild-admin-vorschau {
  position: relative;
  height: 230px;
  padding: 18px;
  background:
    linear-gradient(45deg, #f3f4f1 25%, transparent 25%),
    linear-gradient(-45deg, #f3f4f1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f3f4f1 75%),
    linear-gradient(-45deg, transparent 75%, #f3f4f1 75%),
    #fff;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}
.fotoalbum-bild-admin-vorschau img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fotoalbum-bild-admin-vorschau .badge {
  position: absolute;
  top: 10px;
  left: 10px;
}
.fotoalbum-bild-admin-position {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(32,41,68,.88);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}
.fotoalbum-bild-admin-inhalt { padding: 16px; }
.fotoalbum-bild-admin-aktionen {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid #edf0eb;
}

@media (max-width: 600px) {
  .fotoalbum-admin-aktionen { grid-template-columns: 1fr; }
}

/* ── Bearbeitbare historische Zeittafel ─────────────────── */
.zeittafel-admin-liste {
  position: relative;
  display: grid;
  gap: 13px;
  padding-left: 24px;
}
.zeittafel-admin-liste::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 2px;
  background: rgba(86,122,60,.24);
}
.zeittafel-admin-eintrag {
  position: relative;
  display: grid;
  grid-template-columns: 110px 96px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 92px;
  padding: 14px 16px;
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  background: #fff;
}
.zeittafel-admin-eintrag::before {
  content: '';
  position: absolute;
  left: -23px;
  width: 12px;
  height: 12px;
  border: 3px solid #f3f4f6;
  border-radius: 50%;
  background: var(--sb-accent);
  box-shadow: 0 0 0 1px var(--sb-accent);
}
.zeittafel-admin-datum {
  display: grid;
}
.zeittafel-admin-datum strong {
  color: var(--sb-accent-dark);
  font-size: .95rem;
}
.zeittafel-admin-datum small {
  color: #7a8175;
  font-size: .68rem;
}
.zeittafel-admin-eintrag > img {
  width: 96px;
  height: 68px;
  object-fit: contain;
  border-radius: 7px;
  background: #f1f2ef;
}
.zeittafel-admin-inhalt { min-width: 0; }
.zeittafel-admin-inhalt h5 { color: var(--sb-navy); font-size: .94rem; }
.zeittafel-admin-aktionen {
  display: flex;
  gap: 6px;
}

@media (max-width: 900px) {
  .zeittafel-admin-eintrag {
    grid-template-columns: 95px minmax(0, 1fr) auto;
  }
  .zeittafel-admin-eintrag > img { display: none; }
}
@media (max-width: 650px) {
  .zeittafel-admin-eintrag {
    grid-template-columns: 1fr;
  }
  .zeittafel-admin-aktionen { justify-content: flex-start; }
}

/* ── Seebacher Bilderbuch ───────────────────────────────── */
.bilderbuch-admin-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 20px;
}
.bilderbuch-admin-karte {
  overflow: hidden;
}
.bilderbuch-admin-vorschau {
  position: relative;
  aspect-ratio: 2600 / 1710;
  overflow: hidden;
  border-bottom: 1px solid var(--sb-border);
  background: #e9e5d9;
}
.bilderbuch-admin-vorschau img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bilderbuch-admin-vorschau span {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(32, 41, 68, .9);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}
.bilderbuch-admin-karte h5 {
  color: var(--sb-navy);
  font-size: .98rem;
}
.bilderbuch-admin-detailbild {
  padding: 12px;
  border-bottom: 1px solid var(--sb-border);
  background: #ece8dc;
}
.bilderbuch-admin-detailbild img {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
}

.admin-form-auswahl {
  cursor: pointer;
  background: #fff;
  transition: border-color .18s ease, background-color .18s ease;
}
.admin-form-auswahl:hover {
  border-color: var(--sb-accent) !important;
  background: #f8faf7;
}
@media (min-width: 1200px) {
  .admin-form-seitenleiste {
    position: sticky;
    top: calc(var(--topbar-h) + 18px);
  }
}

.admin-editor { background: #fff; }
.admin-editor--gross { height: 380px; }
.admin-editor--klein { height: 190px; }
.admin-editor--menue { height: 150px; }
.admin-editor--bereich { height: 220px; }

/* quill.snow.css wird nach dieser Datei geladen und setzt .ql-container auf
   height: 100%. Bei gleicher Spezifität gewinnt sonst Quill, der Editor
   bekommt keine feste Höhe und läuft aus seiner Karte heraus. Die Regeln
   unten sind spezifischer und setzen die Vorgaben von oben wieder durch. */
/* Ein an der Cursorposition eingefügtes Bild soll den Editor nicht sprengen:
   quill.snow.css begrenzt nur die Breite, hochformatige Fotos werden damit
   mehrere hundert Pixel hoch. Die Höhenbegrenzung hält das Bild im sichtbaren
   Ausschnitt; auf der Website wird es unverändert in voller Grösse angezeigt. */
.ql-snow .ql-editor img {
  max-height: 220px;
  width: auto;
  height: auto;
}

.admin-editor--gross.ql-container { height: 380px; }
.admin-editor--klein.ql-container { height: 190px; }
.admin-editor--menue.ql-container { height: 150px; }
.admin-editor--bereich.ql-container { height: 220px; }

.inhaltsbereich-editor {
  border-color: #d8ded3;
  box-shadow: 0 2px 10px rgba(31, 61, 43, 0.055);
}
.inhaltsbereich-editor .card-header {
  border-bottom-color: #e4e8e0;
}
.inhaltsbereich-editor .medien-auswahl-widget {
  background: #f8faf7;
}

.einstellungen-bildvorschau {
  width: 180px;
  height: 116px;
  overflow: hidden;
  border: 1px solid var(--sb-border);
  border-radius: 8px;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}
.einstellungen-bildvorschau img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.seitenkopf-bildvorschau {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 5;
  min-height: 112px;
  border: 1px solid var(--sb-border);
  border-radius: 8px;
  background: #eef1ec;
  color: #6c757d;
}
.seitenkopf-bildvorschau::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(31,61,43,.92), rgba(31,61,43,.08));
  pointer-events: none;
}
.seitenkopf-bildvorschau img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.seitenkopf-bildvorschau span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .88rem;
}
.seitenkopf-bildvorschau [hidden] {
  display: none;
}
.seitenkopf-bildvorschau.ist-leer::after {
  display: none;
}

@media (max-width: 767.98px) {
  .admin-schnellzugriff {
    padding: 17px;
  }
  .admin-schnellzugriff-kopf {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .admin-schnellzugriff-grid {
    grid-template-columns: 1fr;
  }
}

#vorschau-frame {
  width: 100%;
  height: 600px;
  border: 0;
  display: block;
  background: #fff;
}

/* Maßstäbliche Seitenvorschau: Der Rahmen arbeitet in Bildschirmbreite und
   wird per transform verkleinert. Die Bühne begrenzt die Höhe, die Fläche
   darin trägt die verkleinerten Maße - eine Verkleinerung ändert die
   Layoutgrösse nicht, ohne die Fläche würde das Scrollen nicht passen. */
.admin-vorschau-buehne {
  position: relative;
  overflow: auto;
  height: clamp(360px, 48vh, 560px);
  background: #fff;
}
.admin-vorschau-flaeche { position: relative; }
.admin-vorschau-buehne #vorschau-frame {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  transform-origin: top left;
}

.admin-vorschau-karte {
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(32, 41, 68, .055);
}

.admin-vorschau-frame {
  width: 100%;
  height: clamp(440px, 56vh, 620px) !important;
  border: 0;
  display: block;
  background:
    linear-gradient(135deg, rgba(86, 122, 60, .035) 25%, transparent 25%) 0 0 / 18px 18px,
    #fff;
}

/* ── Visuelle Medienauswahl ─────────────────────────────── */
.medien-auswahl-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Abschnitt "Dateien zum Herunterladen" in den Redaktionsformularen von
   Meldungen, Terminen und Bekanntmachungen. */
.beitrags-dokumente-liste {
  display: grid;
  gap: 10px;
}

/* Die Karte steht in der schmalen rechten Formularspalte. Dateiangabe und
   Schaltflächen teilen sich deshalb die erste Zeile, die Beschriftung bekommt
   eine eigene Zeile darunter - so bleibt es auch bei langen Dateinamen
   lesbar. */
.beitrags-dokument-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--sb-border);
  border-radius: 9px;
  background: #fff;
}

.beitrags-dokument-datei {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
  align-self: center;
}

.beitrags-dokument-kuerzel {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ee;
  color: #2f4a37;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.beitrags-dokument-name {
  font-size: 0.9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.beitrags-dokument-titel {
  grid-column: 1 / -1;
  grid-row: 2;
  display: block;
  min-width: 0;
}

.beitrags-dokument-aktionen {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: 6px;
  align-items: center;
  align-self: center;
}

.medien-auswahl-widget {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 90px;
  padding: 10px;
  border: 1px solid var(--sb-border);
  border-radius: 9px;
  background: #fff;
}

.medien-auswahl-miniatur {
  width: 88px;
  height: 68px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e1e5e8;
  border-radius: 7px;
  background: #f7f8f9;
}

.medien-auswahl-miniatur img {
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
  background: #fff;
}

.medien-auswahl-miniatur-placeholder {
  color: #adb5bd;
  font-size: 1.45rem;
}

.medien-auswahl-angabe {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.medien-auswahl-label {
  overflow: hidden;
  color: #6c757d;
  font-size: .75rem;
  text-overflow: ellipsis;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.medien-auswahl-dateiname {
  overflow: hidden;
  color: var(--sb-navy);
  font-size: .9rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.medien-auswahl-aktionen {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 10px;
  padding-top: 2px;
}

.medien-auswahl-aktionen .medien-auswahl-oeffnen {
  flex: 1 1 190px;
  white-space: nowrap;
}

.medien-auswahl-aktionen .medien-auswahl-entfernen {
  flex: 0 0 auto;
  white-space: nowrap;
}

.medien-auswahl-entfernen:disabled {
  opacity: .38;
  pointer-events: none;
}

.medien-auswahl-modal .modal-content {
  min-height: min(760px, calc(100vh - 3.5rem));
}

.medien-auswahl-suche {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 16px;
  border-bottom: 1px solid var(--sb-border);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
}

.medien-auswahl-upload-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sb-border);
  background: #f8faf7;
}

.medien-auswahl-upload {
  padding: 18px;
  border-bottom: 1px solid #d9dfd6;
  background: #f3f6f0;
}

.medien-auswahl-upload-einleitung {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.medien-auswahl-upload-einleitung strong {
  color: var(--sb-navy);
}

.medien-auswahl-upload-einleitung span {
  color: #667085;
  font-size: .82rem;
}

.medien-auswahl-upload-meldung {
  min-height: 22px;
  margin-top: 12px;
  font-size: .85rem;
  font-weight: 600;
}

.medien-auswahl-upload-meldung.ist-laden { color: #5c6670; }
.medien-auswahl-upload-meldung.ist-erfolg { color: #267044; }
.medien-auswahl-upload-meldung.ist-fehler { color: #a42331; }

.medien-auswahl-treffer {
  min-width: 88px;
  justify-content: center;
  color: #6c757d;
  font-size: .82rem;
}

.medien-auswahl-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 16px;
}

.medien-auswahl-kachel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid #dfe3e6;
  border-radius: 9px;
  background: #fff;
  color: #222;
  text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.medien-auswahl-kachel:hover,
.medien-auswahl-kachel:focus-visible {
  border-color: var(--sb-accent);
  box-shadow: 0 5px 18px rgba(32,41,68,.12);
  transform: translateY(-1px);
  outline: none;
}

.medien-auswahl-kachel.ist-ausgewaehlt {
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 2px rgba(86,122,60,.22);
}

.medien-auswahl-kachelbild {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid #e7eaec;
  background: #f4f6f4;
}

.medien-auswahl-kachelbild img {
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain;
  background: #fff;
}

.medien-auswahl-kachelbild.ist-leer {
  flex-direction: column;
  gap: 6px;
  color: #8a939b;
  font-size: .78rem;
}

.medien-auswahl-kachelbild.ist-leer i {
  font-size: 1.6rem;
}

.medien-auswahl-kachelname {
  display: block;
  overflow: hidden;
  padding: 9px 10px 10px;
  font-size: .78rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.medien-auswahl-haken {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 25px;
  height: 25px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--sb-accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
}

.medien-auswahl-kachel.ist-ausgewaehlt .medien-auswahl-haken {
  display: flex;
}

.medien-auswahl-keine-treffer {
  grid-column: 1 / -1;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #6c757d;
  text-align: center;
}

.medien-auswahl-keine-treffer i {
  color: #adb5bd;
  font-size: 2rem;
}

@media (min-width: 1200px) {
  .admin-seitenleiste:not(.admin-seitenleiste--sprungziele) {
    position: sticky;
    top: calc(var(--topbar-h) + 20px);
  }
  .border-lg-start { border-left: 1px solid var(--sb-border); }
}

@media (max-width: 900px) {
  #sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  #sidebar.mobile-open { transform: translateX(0); }
  #topbar { left: 0; }
  #main-content { margin-left: 0; }
}

@media (max-width: 575.98px) {
  .medien-auswahl-widget {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .medien-auswahl-miniatur {
    width: 72px;
    height: 58px;
  }
  .medien-auswahl-aktionen {
    align-items: stretch;
    flex-direction: column;
  }
  .medien-auswahl-aktionen .medien-auswahl-oeffnen {
    flex: 0 0 auto;
  }
  .medien-auswahl-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 12px;
  }
  .medien-auswahl-suche {
    padding: 12px;
  }
  .medien-auswahl-treffer {
    display: none;
  }
}

/* Startseitenpflege: ruhige, einheitliche Bildvorschauen in den Redaktionskarten. */
.startseite-admin-bild {
  min-height: 190px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  background: #f3f5f2;
  color: #7b847b;
}
.startseite-admin-bild--kachel {
  min-height: 150px;
}
.startseite-admin-bild img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}
.startseite-admin-bild--kachel img {
  height: 150px;
}
.startseite-admin-bild span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
}
.startseite-admin-bild span i {
  font-size: 1.7rem;
}

/* REWA Connect – gemeinsame, direkt in die Übersichten integrierte Statistik. */
.rewa-statistik {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--sb-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 95% 0, rgba(86,122,60,.12), transparent 25%),
    #fff;
  box-shadow: 0 14px 36px rgba(32,41,68,.055);
}

.rewa-statistik--dashboard {
  margin-top: 0;
}

.rewa-statistik-kopf,
.rewa-statistik-panel-kopf,
.rewa-statistik-website-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.rewa-statistik-kopf {
  align-items: flex-end;
  margin-bottom: 20px;
}

.rewa-statistik-kopf h5,
.rewa-statistik-panel-kopf h6,
.rewa-statistik-website-kopf h6 {
  margin: 0;
  color: var(--sb-navy);
  font-weight: 750;
}

.rewa-statistik-kopf p {
  margin: 4px 0 0;
  color: #69717c;
  font-size: .86rem;
}

.rewa-statistik-kicker,
.rewa-statistik-panel-kopf > div > span,
.rewa-statistik-website-kopf > div > span {
  display: block;
  margin-bottom: 3px;
  color: var(--sb-accent-dark);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.rewa-statistik-zeiträume {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 4px;
  border: 1px solid #dfe5dc;
  border-radius: 10px;
  background: #f5f7f3;
}

.rewa-statistik-zeiträume a {
  padding: 7px 10px;
  border-radius: 7px;
  color: #5e6770;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.rewa-statistik-zeiträume a:hover,
.rewa-statistik-zeiträume a:focus-visible {
  background: rgba(86,122,60,.1);
  color: var(--sb-accent-dark);
}

.rewa-statistik-zeiträume a.ist-aktiv {
  background: var(--sb-accent-dark);
  color: #fff;
  box-shadow: 0 3px 9px rgba(67,95,47,.2);
}

.rewa-statistik-website-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rewa-statistik-website-karte {
  min-width: 0;
  padding: 18px;
  border: 1px solid #dde5da;
  border-radius: 12px;
  background: #f9fbf8;
}

/* Leitfarben wie bei den Schnellzugriffen, damit dieselbe Website im
   Dashboard überall gleich eingefärbt ist. */
.rewa-statistik-website-karte--klubhaus {
  border-color: #e7deca;
  background: #f8f4eb;
}

.rewa-statistik-website-karte--wohnen {
  border-color: #d3e0ee;
  background: #eff5fb;
}

.rewa-statistik-website-karte--wohnen .rewa-statistik-website-kopf a {
  border-color: #cddcec;
  color: #22496f;
}

.rewa-statistik-website-karte--wohnen .rewa-statistik-website-kopf a:hover,
.rewa-statistik-website-karte--wohnen .rewa-statistik-website-kopf a:focus-visible {
  border-color: #2a5c8d;
  background: #2a5c8d;
  color: #fff;
}

.rewa-statistik-website-karte.ist-inaktiv {
  border-style: dashed;
  background: #f7f8f6;
}

.rewa-statistik-website-kopf a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #d8dfd4;
  border-radius: 50%;
  background: #fff;
  color: var(--sb-accent-dark);
}

.rewa-statistik-website-kopf a:hover,
.rewa-statistik-website-kopf a:focus-visible {
  border-color: var(--sb-accent);
  background: var(--sb-accent);
  color: #fff;
}

.rewa-statistik-kompaktwerte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 18px;
}

.rewa-statistik-kompaktwerte > div {
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
}

.rewa-statistik-kompaktwerte strong,
.rewa-statistik-kompaktwerte span {
  display: block;
}

.rewa-statistik-kompaktwerte strong {
  overflow: hidden;
  color: var(--sb-navy);
  font-size: 1.18rem;
  line-height: 1.1;
  text-overflow: ellipsis;
}

.rewa-statistik-kompaktwerte span {
  margin-top: 3px;
  color: #737b83;
  font-size: .66rem;
}

.rewa-statistik-topseite {
  display: grid;
  gap: 1px;
  margin: 13px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(32,41,68,.09);
}

.rewa-statistik-topseite span {
  color: #7a828a;
  font-size: .67rem;
  text-transform: uppercase;
}

.rewa-statistik-topseite strong {
  overflow: hidden;
  color: #31383f;
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rewa-statistik-kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.rewa-statistik-kennzahlen article {
  padding: 17px;
  border: 1px solid #e1e6df;
  border-radius: 11px;
  background: #fafbf9;
}

.rewa-statistik-kennzahlen span,
.rewa-statistik-kennzahlen strong,
.rewa-statistik-kennzahlen small {
  display: block;
}

.rewa-statistik-kennzahlen span {
  color: #717983;
  font-size: .76rem;
}

.rewa-statistik-kennzahlen strong {
  margin: 4px 0 1px;
  color: var(--sb-navy);
  font-size: 1.75rem;
  line-height: 1.1;
}

.rewa-statistik-kennzahlen small {
  color: #8a9198;
  font-size: .67rem;
}

.rewa-statistik-panel {
  min-width: 0;
  padding: 18px;
  border: 1px solid #e1e5e0;
  border-radius: 12px;
  background: #fff;
}

.rewa-statistik-panel--verlauf {
  margin-bottom: 14px;
  background: linear-gradient(180deg, #fcfdfb, #f7f9f5);
}

.rewa-statistik-vergleich {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #eef1ec;
  color: #606971;
  font-size: .71rem;
  font-weight: 700;
}

.rewa-statistik-vergleich.ist-positiv {
  background: #e8f3e7;
  color: #2f6a38;
}

.rewa-statistik-vergleich.ist-negativ {
  background: #f8eaea;
  color: #9a3d45;
}

.rewa-statistik-diagramm-scroll {
  overflow-x: auto;
  padding-top: 14px;
}

.rewa-statistik-diagramm {
  min-width: 600px;
  height: 190px;
  display: flex;
  align-items: stretch;
  gap: 5px;
  padding: 16px 7px 0;
  border-bottom: 1px solid #dfe4dc;
  background-image: linear-gradient(to bottom, rgba(32,41,68,.055) 1px, transparent 1px);
  background-size: 100% 25%;
}

.rewa-statistik-tag {
  min-width: 13px;
  flex: 1 1 0;
  display: grid;
  grid-template-rows: 16px minmax(0, 1fr) 22px;
  align-items: end;
  justify-items: stretch;
  gap: 3px;
}

.rewa-statistik-balkenwert {
  color: #69717a;
  font-size: .58rem;
  line-height: 1;
  text-align: center;
}

.rewa-statistik-balken {
  width: 100%;
  height: var(--rewa-balken);
  min-height: 3px;
  display: block;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #6f9255, var(--sb-accent-dark));
}

.rewa-statistik-tag time {
  min-height: 18px;
  color: #80878e;
  font-size: .57rem;
  text-align: center;
  white-space: nowrap;
}

.rewa-statistik-auswertung-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(290px, .85fr);
  gap: 14px;
}

.rewa-statistik-nebenwerte {
  display: grid;
  align-content: start;
  gap: 14px;
}

.rewa-statistik-rangliste {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.rewa-statistik-rangliste li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #ecefeb;
}

.rewa-statistik-rangliste li:last-child {
  border-bottom: 0;
}

.rewa-statistik-rang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #eef2eb;
  color: var(--sb-accent-dark);
  font-size: .7rem;
  font-weight: 800;
}

.rewa-statistik-rangliste a {
  min-width: 0;
  display: grid;
  color: #2a3037;
  text-decoration: none;
}

.rewa-statistik-rangliste a:hover strong {
  color: var(--sb-accent-dark);
  text-decoration: underline;
}

.rewa-statistik-rangliste strong,
.rewa-statistik-rangliste small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rewa-statistik-rangliste strong {
  font-size: .78rem;
}

.rewa-statistik-rangliste small {
  color: #838a91;
  font-size: .65rem;
}

.rewa-statistik-anzahl {
  color: var(--sb-navy);
  font-size: .78rem;
  font-weight: 800;
}

.rewa-statistik-verteilung {
  display: grid;
  gap: 11px;
  margin-top: 13px;
}

.rewa-statistik-verteilung-zeile > div,
.rewa-statistik-verweise > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rewa-statistik-verteilung-zeile strong,
.rewa-statistik-verteilung-zeile span,
.rewa-statistik-verweise strong,
.rewa-statistik-verweise span {
  font-size: .7rem;
}

.rewa-statistik-verteilung-zeile strong,
.rewa-statistik-verweise strong {
  overflow: hidden;
  color: #454c54;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rewa-statistik-fortschritt {
  height: 5px;
  display: block;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0eb;
}

.rewa-statistik-fortschritt > span {
  width: var(--rewa-anteil);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--sb-accent);
}

.rewa-statistik-verweise {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid #e9ece7;
}

.rewa-statistik-verweise > span {
  color: #7b838a;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.rewa-statistik-vorbereitet {
  min-height: 104px;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 16px;
  padding: 16px;
  border: 1px dashed #ccd4c9;
  border-radius: 10px;
  background: rgba(255,255,255,.7);
}

.rewa-statistik-vorbereitet--gross {
  min-height: 150px;
  justify-content: center;
  margin-top: 0;
}

.rewa-statistik-vorbereitet > i {
  color: var(--sb-accent-dark);
  font-size: 1.7rem;
}

.rewa-statistik-vorbereitet strong,
.rewa-statistik-vorbereitet span {
  display: block;
}

.rewa-statistik-vorbereitet strong {
  color: var(--sb-navy);
  font-size: .83rem;
}

.rewa-statistik-vorbereitet span,
.rewa-statistik-leertext {
  margin: 3px 0 0;
  color: #747d84;
  font-size: .72rem;
  line-height: 1.45;
}

.rewa-statistik-datenschutz {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 17px 0 0;
  color: #737b82;
  font-size: .68rem;
}

.rewa-statistik-datenschutz i {
  color: var(--sb-accent-dark);
  font-size: .85rem;
}

@media (max-width: 1099.98px) {
  .rewa-statistik-website-grid,
  .rewa-statistik-kennzahlen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rewa-statistik-auswertung-grid {
    grid-template-columns: 1fr;
  }
  .rewa-statistik-nebenwerte {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .rewa-statistik {
    padding: 17px;
  }
  .rewa-statistik-kopf {
    align-items: stretch;
    flex-direction: column;
  }
  .rewa-statistik-zeiträume {
    align-self: flex-start;
  }
  .rewa-statistik-website-grid,
  .rewa-statistik-nebenwerte {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 479.98px) {
  .rewa-statistik-kennzahlen {
    grid-template-columns: 1fr 1fr;
  }
  .rewa-statistik-zeiträume {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .rewa-statistik-zeiträume a {
    padding-inline: 5px;
    text-align: center;
  }
  .rewa-statistik-kompaktwerte {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ── Support / Ticketsystem ──────────────────────────────── */
.support-eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.support-eintrag:last-child { border-bottom: 0; }
.support-eintrag:hover { background: rgba(86, 122, 60, .07); text-decoration: none; }
.support-eintrag--aktiv { background: rgba(86, 122, 60, .12); }
.support-eintrag-symbol {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sb-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
}
.support-eintrag-text { min-width: 0; flex: 1 1 auto; }
.support-eintrag-text strong {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--sb-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.support-eintrag-text small { display: block; font-size: .75rem; color: #777; }

.support-verlauf { max-height: 460px; overflow-y: auto; }
.support-blase-zeile { display: flex; justify-content: flex-start; margin-bottom: 12px; }
.support-blase-zeile--eigen { justify-content: flex-end; }
.support-blase {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--sb-navy);
  color: #fff;
}
.support-blase--eigen { background: #eef1ec; color: #222; }
.support-blase-kopf { font-size: .72rem; opacity: .75; margin-bottom: 3px; }
.support-blase-text { font-size: .9rem; overflow-wrap: anywhere; }

/* Anwesenheit in der Benutzerübersicht ------------------------------------ */
.benutzer-anwesenheit { display: flex; align-items: center; gap: 6px; }
.benutzer-punkt {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #c3c7bd;
}
.benutzer-punkt--online {
  background: #2e9e4b;
  /* Heller Ring, damit der Punkt auch bei Rot-Grün-Schwäche auffällt; die
     Textangabe daneben bleibt die eigentliche Information. */
  box-shadow: 0 0 0 3px rgba(46, 158, 75, .22);
}
.benutzer-punkt--kuerzlich { background: #d9a441; }
.benutzer-punkt--offline { background: #a9aea3; }
.benutzer-punkt--nie { background: #d0d3cb; }

/* ── Entwurfsbereich "Gemeindemanager" ─────────────────
   Nur für den klickbaren Entwurf der künftigen Plattform. Bewusst als
   Entwurf erkennbar, damit niemand ihn für fertige Funktion hält. */

.entwurf-fahne {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px 15px;
  border: 1px solid #ffd9a3;
  border-left: 5px solid #e08a1e;
  border-radius: 9px;
  background: #fff6e7;
  color: #6b4407;
  font-size: .9rem;
  line-height: 1.45;
}
.entwurf-fahne > i { font-size: 1.1rem; color: #e08a1e; margin-top: 1px; }
.entwurf-lead { max-width: 70ch; margin-bottom: 22px; }

.entwurf-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.entwurf-kachel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 17px;
  border: 1px solid #dfe5dc;
  border-top: 3px solid var(--sb-accent);
  border-radius: 11px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 5px 18px rgba(32,41,68,.035);
  transition: transform .14s ease, box-shadow .14s ease;
}
a.entwurf-kachel:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(32,41,68,.09);
  color: inherit;
}
.entwurf-kachel-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.entwurf-kachel-kopf > i { font-size: 1.35rem; color: var(--sb-accent-dark); }
.entwurf-kachel strong { color: var(--sb-navy); }
.entwurf-kachel-text { font-size: .86rem; color: #6f777d; }
.entwurf-kachel--ruhig { border-top-color: #c9cfc6; background: #fbfcfa; }
.entwurf-kachel--ruhig .entwurf-kachel-kopf > i { color: #8a938a; }

.entwurf-liste { list-style: none; margin: 0; padding: 0; }
.entwurf-liste li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #f0f2ee;
  font-size: .92rem;
}
.entwurf-liste li:last-child { border-bottom: 0; }
.entwurf-liste li > i { color: var(--sb-accent); margin-top: 3px; }

/* Kette der Vorgangsstationen */
.entwurf-ablauf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.entwurf-schritt {
  position: relative;
  padding: 7px 14px;
  border: 1px solid #dfe5dc;
  border-radius: 999px;
  background: #f7f9f5;
  font-size: .84rem;
  font-weight: 700;
  color: #55605a;
}
.entwurf-schritt + .entwurf-schritt::before {
  content: "→";
  margin-right: 12px;
  margin-left: -8px;
  color: #b3bbb0;
  font-weight: 400;
}
.entwurf-schritt.ist-aktiv {
  border-color: var(--sb-accent);
  background: var(--sb-accent);
  color: #fff;
}

.entwurf-stand {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
}
.entwurf-stand--warnung { background: #ffe7c4; color: #6b4407; }
.entwurf-stand--offen { background: #e7ebe6; color: #4a544a; }
.entwurf-stand--ruhig { background: #e7f1e2; color: #2f5f26; }

.entwurf-abgrenzung {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
  padding: 13px 15px;
  border: 1px solid #bcd7ea;
  border-left: 5px solid #2b6d97;
  border-radius: 9px;
  background: #eef6fb;
  color: #204b66;
  font-size: .9rem;
  line-height: 1.45;
}
.entwurf-abgrenzung > i { font-size: 1.1rem; color: #2b6d97; margin-top: 1px; }

.entwurf-feldkasten {
  height: 100%;
  padding: 13px 15px;
  border: 1px solid #dfe5dc;
  border-radius: 9px;
  background: #f8faf7;
}
.entwurf-feldlabel {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7c8177;
}
.entwurf-feldwert { margin: 4px 0 6px; font-weight: 700; color: var(--sb-navy); }

.entwurf-tabelle thead th {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7c8177;
}

.entwurf-grundzeile { display: flex; flex-wrap: wrap; gap: 8px; }
.entwurf-grundstein {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid #dfe5dc;
  border-radius: 999px;
  background: #f7f9f5;
  font-size: .84rem;
  font-weight: 700;
  color: #4a5450;
}
.entwurf-grundstein > i { color: var(--sb-accent-dark); }
.entwurf-beispiel {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed #dfe5dc;
  font-size: .82rem;
  font-style: italic;
  color: #7c8177;
}

/* ==========================================================================
   Menü: schmal schalten und Hell/Dunkel

   Zwei Schalter, beide unten in der Seitenleiste, beide dauerhaft gemerkt.
   Gesetzt werden sie serverseitig als Klasse am <body> (siehe layout.php) -
   dadurch steht der Zustand schon beim ersten Malen fest und das Menü
   flackert beim Laden nicht kurz in der falschen Darstellung auf.
   ========================================================================== */

/* ── Schmal ──────────────────────────────────────────────
   Es genügt, die Breitenvariable zu ändern: Kopfleiste und Inhalt richten
   sich ohnehin nach ihr aus und rücken automatisch mit. */
body.menue-schmal { --sidebar-w: var(--sidebar-w-collapsed, 62px); }

/* Die Beschriftungen stehen als reiner Text in den Verweisen, nicht in
   eigenen Elementen. font-size: 0 blendet sie deshalb zuverlässig aus,
   während das Symbol seine Größe zurückbekommt. */
body.menue-schmal #sidebar .sidebar-link {
  font-size: 0;
  gap: 0;
  justify-content: center;
  padding: 11px 0;
}
body.menue-schmal #sidebar .sidebar-link i { font-size: 1.15rem; width: auto; }
body.menue-schmal #sidebar .sidebar-link .bi-chevron-down { display: none; }
body.menue-schmal .sidebar-brand { justify-content: center; padding: 14px 4px; }
body.menue-schmal .sidebar-brand > div { display: none; }
/* Über die Breite begrenzen, nicht über die Höhe: Manche Gemeinden haben ein
   quadratisches Wappen, andere ein breites Logo mit Schriftzug. Nur eine feste
   Höhe vorzugeben liesse ein breites Logo seitlich aus dem schmalen Menü
   herausragen. */
body.menue-schmal .sidebar-brand img { height: auto; max-width: 42px; max-height: 34px; object-fit: contain; }
/* Im Fussbereich bleibt nur das Personensymbol als Weg zum eigenen Konto.
   Die Regeln darunter setzen ihre eigene Schriftgröße, deshalb müssen Name,
   Rolle und Abmelden-Verweis hier ausdrücklich ausgeblendet werden - eine
   Schriftgröße von 0 am Elternteil allein genügt nicht. */
body.menue-schmal .sidebar-footer { padding: 10px 4px; text-align: center; font-size: 0; }
body.menue-schmal .sidebar-footer .user-name { font-size: 0; display: block; }
body.menue-schmal .sidebar-footer .user-name i { font-size: 1.15rem; }
body.menue-schmal .sidebar-footer > span,
body.menue-schmal .sidebar-footer > a:not(.user-name) { display: none; }
body.menue-schmal .sidebar-footer i { font-size: 1.05rem; }
body.menue-schmal .sidebar-divider { margin: 8px 10px; }

/* Zahlenkennzeichen (offene Freigaben usw.) werden im schmalen Menü zum
   Punkt: Die Zahl wäre nicht lesbar, aber dass etwas offen ist, muss man
   trotzdem sehen. */
body.menue-schmal #sidebar .sidebar-link .badge {
  position: absolute;
  top: 6px;
  right: 12px;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  overflow: hidden;
}
body.menue-schmal #sidebar .sidebar-link { position: relative; }

/* Untermenüs klappen im schmalen Zustand seitlich auf, sonst wären die
   Punkte darin nicht mehr erreichbar. */
body.menue-schmal #sidebar .sidebar-submenu {
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 1050;
  display: none;
  width: 250px;
  padding: 6px 0;
  border: 1px solid var(--sb-border);
  border-radius: 0 10px 10px 0;
  background: #fff;
  box-shadow: 0 10px 30px rgba(32,41,68,.14);
  /* Die Gemeinde-Gruppe hat über ein Dutzend Punkte - ohne Begrenzung liefe
     die Liste unten aus dem Bild. */
  max-height: 78vh;
  overflow-y: auto;
}
/* Eine bereits aufgeklappte Gruppe bleibt im schmalen Menü zu: Ihre Punkte
   stünden sonst als beschriftungslose Symbole untereinander und wären nicht
   auseinanderzuhalten. Sie erscheinen stattdessen beim Zeigen seitlich. */
body.menue-schmal #sidebar .sidebar-submenu.show { display: none; }
body.menue-schmal #sidebar .sidebar-item:hover > .sidebar-submenu,
body.menue-schmal #sidebar .sidebar-item:focus-within > .sidebar-submenu {
  display: block;
}
body.menue-schmal #sidebar .sidebar-submenu .sidebar-link {
  font-size: .85rem;
  gap: 12px;
  justify-content: flex-start;
  padding: 8px 16px;
}
body.menue-schmal #sidebar .sidebar-submenu .sidebar-link i { font-size: 1rem; width: 20px; }
body.menue-schmal #sidebar .sidebar-submenu .sidebar-link .badge {
  position: static;
  width: auto;
  height: auto;
  padding: .28em .55em;
  border-radius: 999px;
  font-size: .7rem;
  overflow: visible;
}
/* Das Menü darf im schmalen Zustand nicht mehr abschneiden - sonst bliebe
   das seitlich aufklappende Untermenü unsichtbar. */
/* Wichtig: overflow-x und overflow-y lassen sich nicht mischen - sobald eine
   Achse scrollt, kappt der Browser auch die andere. Ein "overflow-x: visible"
   neben "overflow-y: auto" bliebe wirkungslos, und das seitlich aufklappende
   Untermenü wäre abgeschnitten. Im schmalen Zustand darf deshalb gar nichts
   kappen; die Liste ist dort kurz genug, weil die Gruppen zu sind. */
body.menue-schmal #sidebar { overflow: visible; }
body.menue-schmal .sidebar-nav { overflow: visible; }

/* ── Dunkles Menü ────────────────────────────────────────
   Bewusst nur die Seitenleiste. Der Arbeitsbereich bleibt hell, weil in den
   Bearbeitungsmasken die Vorschau der öffentlichen Website steht - die ist
   immer hell, und sie soll zeigen, was Besucher wirklich sehen. */
body.menue-dunkel #sidebar {
  background: #23291f;
  border-right-color: rgba(255,255,255,.10);
}
body.menue-dunkel .sidebar-brand { border-bottom-color: rgba(255,255,255,.10); }
body.menue-dunkel .sidebar-brand strong { color: #fff; }
body.menue-dunkel .sidebar-brand small { color: rgba(255,255,255,.55); }
body.menue-dunkel #sidebar .sidebar-link { color: rgba(255,255,255,.82); }
body.menue-dunkel #sidebar .sidebar-link i { color: #a9c98c; }
body.menue-dunkel #sidebar .sidebar-link:hover { background: rgba(255,255,255,.09); color: #fff; }
body.menue-dunkel #sidebar .sidebar-link.active {
  background: rgba(255,255,255,.14);
  color: #fff;
  border-left-color: #a9c98c;
}
body.menue-dunkel .sidebar-divider { background: rgba(255,255,255,.12); }
body.menue-dunkel #sidebar .sidebar-submenu { background: rgba(0,0,0,.22); }
body.menue-dunkel .sidebar-caption { color: rgba(255,255,255,.45); }
body.menue-dunkel .sidebar-footer { border-top-color: rgba(255,255,255,.10); color: rgba(255,255,255,.6); }
body.menue-dunkel .sidebar-footer .user-name { color: #fff; }
body.menue-dunkel .sidebar-footer a { color: #a9c98c; }
body.menue-dunkel .sidebar-footer .text-muted { color: rgba(255,255,255,.5) !important; }
/* Im schmalen Zustand klappt das Untermenü als eigene Fläche auf - die
   braucht ebenfalls den dunklen Grund, sonst steht ein weisser Kasten
   neben dem dunklen Menü. */
body.menue-dunkel.menue-schmal #sidebar .sidebar-submenu {
  background: #2b3226;
  border-color: rgba(255,255,255,.14);
}

/* ── Die beiden Schalter ─────────────────────────────────── */
.menue-schalter {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid rgba(0,0,0,.08);
}
body.menue-dunkel .menue-schalter { border-top-color: rgba(255,255,255,.10); }
body.menue-schmal .menue-schalter { flex-direction: column; padding: 8px 4px; }
/* Farbig hinterlegt statt nur umrandet: In der ersten Fassung waren die
   beiden Schalter durchsichtig mit dünnem Rand - sie gingen unter dem
   Benutzernamen darüber unter und wurden schlicht übersehen. Die Grüntöne
   des Backends machen sie erkennbar, ohne mit dem Speichern-Knopf zu
   konkurrieren: Der ist gefüllt und kräftig, diese hier sind flächig, aber
   deutlich heller. */
.menue-schalter button {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(86,122,60,.30);
  border-radius: 8px;
  background: rgba(86,122,60,.12);
  color: var(--sb-accent-dark);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.menue-schalter button i { color: var(--sb-accent); }
.menue-schalter button:hover {
  background: var(--sb-accent);
  border-color: var(--sb-accent);
  color: #fff;
}
.menue-schalter button:hover i { color: #fff; }
.menue-schalter button:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; }

/* Im dunklen Menü kehrt sich das Verhältnis um: Dort ist eine aufgehellte
   Fläche der sichtbare Kontrast, nicht eine dunkle. */
body.menue-dunkel .menue-schalter button {
  border-color: rgba(169,201,140,.34);
  background: rgba(169,201,140,.16);
  color: #d7e8c4;
}
body.menue-dunkel .menue-schalter button i { color: #a9c98c; }
body.menue-dunkel .menue-schalter button:hover {
  background: #a9c98c;
  border-color: #a9c98c;
  color: #23291f;
}
body.menue-dunkel .menue-schalter button:hover i { color: #23291f; }
body.menue-schmal .menue-schalter button { font-size: 0; padding: 8px 0; }
body.menue-schmal .menue-schalter button i { font-size: 1rem; }

/* Auf dem Handy schiebt sich das Menü ohnehin als Ganzes ein; ein zusätzlich
   schmaler Zustand hilft dort nicht und würde nur verwirren. */
@media (max-width: 767.98px) {
  body.menue-schmal { --sidebar-w: 230px; }
  body.menue-schmal #sidebar .sidebar-link { font-size: .9rem; gap: 12px; justify-content: flex-start; padding: 10px 16px; }
  body.menue-schmal .sidebar-brand > div { display: block; }
  body.menue-schmal .sidebar-footer { font-size: .85rem; }
  .menue-schalter { display: none; }
}

/* ==========================================================================
   Belegungsplan des Klubhauses

   Räume als Zeilen, Tage als Spalten - aber nicht Kästchen für Kästchen.
   Eine Belegung erscheint als durchgehender Balken mit Beschriftung, damit
   eine Feier von Freitag bis Sonntag als ein Vorgang lesbar ist und nicht als
   drei gleich aussehende Felder, die man erst zusammenzählen muss.
   ========================================================================== */
.belegplan-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
/* Die Überschrift des Zeitraums. Hiess früher .belegplan-monat und traf damit
   auch auf das Raster zu, das in der Monatsansicht dieselbe Klasse bekommt. */
.belegplan-zeitraum {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sb-navy);
}
.belegplan-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: .82rem;
  color: #555c50;
}
.belegplan-muster {
  display: inline-block;
  width: 22px;
  height: 12px;
  margin-right: 5px;
  vertical-align: -1px;
  border-radius: 3px;
}

/* Waagerecht scrollbar, falls der Monat breiter ist als das Fenster. */
.belegplan-rahmen { overflow-x: auto; }

.belegplan-gitter {
  display: grid;
  /* Erste Spalte: Raumnamen. Danach ein Feld je Tag, mindestens 30 px breit,
     damit auch ein einzelner Tag noch anklickbar bleibt. */
  grid-template-columns: 160px repeat(var(--tage), minmax(24px, 1fr));
  /* 31 Tage müssen auf einen normalen Bildschirm passen. Vorher waren es
     190 px für die Namen und 32 px je Tag - zusammen 1182 px, mehr als der
     Arbeitsbereich neben dem Menü hergibt. Die letzten Tage lagen dadurch
     ausserhalb, und wer nicht seitlich scrollte, hielt den Monat für leer.
     Die Wochenansicht bleibt grosszügig, dort sind es nur sieben Spalten. */
  min-width: 0;
  align-items: stretch;
}

.belegplan-ecke,
.belegplan-kopfzelle {
  padding: 7px 0 8px;
  border-bottom: 2px solid var(--sb-border);
  text-align: center;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.2;
  background: #fff;
}
.belegplan-ecke {
  grid-column: 1;
  padding-left: 12px;
  text-align: left;
  font-size: .82rem;
  color: var(--sb-navy);
  position: sticky;
  left: 0;
  z-index: 3;
}
.belegplan-wochentag {
  display: block;
  font-weight: 400;
  font-size: .64rem;
  color: #8a8f86;
}
.belegplan-kopfzelle.ist-wochenende { background: #f4f6f2; }
.belegplan-kopfzelle.ist-heute { background: var(--sb-accent); color: #fff; }
.belegplan-kopfzelle.ist-heute .belegplan-wochentag { color: rgba(255,255,255,.82); }

.belegplan-raumname {
  grid-column: 1;
  display: flex;
  align-items: center;
  padding: 0 12px;
  min-height: 38px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-size: .85rem;
  font-weight: 600;
  color: var(--sb-navy);
  background: #fff;
  /* Beim seitlichen Scrollen muss der Raumname stehen bleiben - sonst weiss
     man am rechten Monatsende nicht mehr, welche Zeile man liest. */
  position: sticky;
  left: 0;
  z-index: 2;
}

/* Die leeren Tagesfelder. Sie liegen unter den Balken und zeichnen nur das
   Raster und die Wochenenden. */
.belegplan-hintergrund {
  min-height: 38px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  border-left: 1px solid rgba(0,0,0,.05);
}
.belegplan-hintergrund.ist-wochenende { background: #f7f9f5; }

.belegplan-balken {
  /* Muss über den Rasterfeldern liegen. Die haben seit den Klickflächen
     "position: relative" und würden die Balken sonst verdecken - positionierte
     Elemente werden über nicht-positionierten gezeichnet. Ohne diese zwei
     Zeilen sind Belegungen unsichtbar und nicht mehr anklickbar. */
  position: relative;
  z-index: 2;
  align-self: center;
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 26px;
  margin: 0 2px;
  padding: 0 8px;
  border-radius: 6px;
  color: #fff;
  font-size: .76rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(32,41,68,.18);
}
a.belegplan-balken:hover { color: #fff; filter: brightness(1.08); text-decoration: none; }
a.belegplan-balken:focus-visible { outline: 2px solid var(--sb-navy); outline-offset: 2px; }
.belegplan-balken-text { overflow: hidden; text-overflow: ellipsis; }

/* Die drei Zustände. Nicht allein über Farbe unterscheidbar: Jeder Balken
   trägt seine Beschriftung im Feld und zusätzlich einen title-Text. */
.belegplan-angefragt {
  background: repeating-linear-gradient(45deg, #e0a83c 0 6px, #edc069 6px 12px);
  color: #3a2c07;
}
.belegplan-fest { background: #4f7d3a; }
.belegplan-veranstaltung { background: #5b7fa6; }

@media (max-width: 767.98px) {
  .belegplan-gitter { grid-template-columns: 130px repeat(var(--tage), minmax(26px, 1fr)); }
  .belegplan-raumname, .belegplan-ecke { font-size: .76rem; padding: 0 8px; }
}

/* Wochenansicht: sieben breite Spalten. Hier passt auch bei einem einzelnen
   Tag der Name in den Balken - genau dafür gibt es diese Ansicht. */
.belegplan-gitter.belegplan-woche {
  grid-template-columns: 190px repeat(var(--tage), minmax(96px, 1fr));
  min-width: 820px;
}
.belegplan-woche .belegplan-kopfzelle { font-size: .8rem; }
.belegplan-woche .belegplan-wochentag { font-size: .72rem; }
.belegplan-woche .belegplan-hintergrund,
.belegplan-woche .belegplan-raumname { min-height: 44px; }
.belegplan-woche .belegplan-balken { height: 30px; font-size: .8rem; }

/* ── Liste unter dem Belegungsplan ──────────────────────────
   Was am Telefon zählt, in einer Zeile: Zeitraum und Raum, wer es ist,
   Rufnummer, Zustand. Der Sprung aus einem Balken hebt die Zeile kurz hervor,
   damit man bei vielen Einträgen sofort sieht, welche gemeint war. */
.belegplan-listentitel {
  margin: 26px 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sb-navy);
}
.belegplan-liste {
  overflow: hidden;
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  background: #fff;
}
.belegplan-eintrag {
  display: grid;
  grid-template-columns: 6px minmax(170px, 1.1fr) minmax(160px, 1.3fr) minmax(150px, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  scroll-margin-top: 90px;
}
.belegplan-eintrag:last-child { border-bottom: 0; }
.belegplan-eintrag:target {
  background: #fdf6df;
  box-shadow: inset 0 0 0 2px var(--sb-accent);
}
.belegplan-eintrag-farbe {
  align-self: stretch;
  min-height: 42px;
  border-radius: 0 4px 4px 0;
}
.belegplan-eintrag-zeit strong { font-size: .9rem; color: var(--sb-navy); }
.belegplan-eintrag-wer strong { font-size: .92rem; }
.belegplan-eintrag-kontakt a { white-space: nowrap; }
.belegplan-eintrag-status,
.belegplan-eintrag-aktion { justify-self: end; }

@media (max-width: 900px) {
  .belegplan-eintrag {
    grid-template-columns: 6px 1fr auto;
    gap: 8px 14px;
    padding-bottom: 14px;
  }
  .belegplan-eintrag-farbe { grid-row: 1 / span 3; }
  .belegplan-eintrag-kontakt { grid-column: 2; }
  .belegplan-eintrag-status { grid-column: 3; grid-row: 1; }
  .belegplan-eintrag-aktion { grid-column: 3; grid-row: 2 / span 2; align-self: start; }
}

/* Freie Felder im Belegungsplan sind anklickbar: Ein Anruf kommt, der Tag ist
   frei, die Buchung wird sofort eingetragen - ohne den Plan zu verlassen.
   Unauffällig, bis man mit der Maus darüber geht; der Plan soll weiter wie
   eine Übersicht wirken und nicht wie ein Formular. */
.belegplan-eintragen {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.belegplan-hintergrund { position: relative; }
.belegplan-eintragen::before {
  content: "+";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--sb-accent);
  font-size: 1rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity .12s ease, background .12s ease;
}
.belegplan-eintragen:hover::before,
.belegplan-eintragen:focus-visible::before {
  opacity: 1;
  background: rgba(86,122,60,.14);
}
.belegplan-eintragen:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: -2px; }

/* Raumauswahl in mehreren Spalten - neun Räume untereinander wären eine
   unnötig lange Liste, sowohl im Fenster als auch in der Terminmaske. */
.admin-raumwahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px 18px;
}

/* Kennzeichen an den Website-Zeilen der Seitenleiste: Wie viele Vorgänge
   warten dort? Rot, weil es um Liegengebliebenes geht - und nur sichtbar,
   wenn wirklich etwas offen ist. Stünde überall dauerhaft eine Zahl, schaut
   nach einer Woche niemand mehr hin. */
.sidebar-offen {
  min-width: 20px;
  margin-right: 8px;
  padding: .28em .5em;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}
body.menue-schmal #sidebar .sidebar-link .sidebar-offen {
  /* Im schmalen Menü bleibt nur ein Punkt - die Zahl wäre nicht lesbar. */
  position: absolute;
  top: 5px;
  right: 10px;
  min-width: 0;
  width: 9px;
  height: 9px;
  margin: 0;
  padding: 0;
  font-size: 0;
}

/* ==========================================================================
   Nutzungsauswertung des Klubhauses

   Die Seite wird ausgedruckt und weitergereicht - deshalb ruhig, ohne Kacheln
   und Schatten, mit klarer Überschriftenfolge. Beim Drucken fallen Menü und
   Bedienelemente weg, das Blatt beginnt mit dem Titel.
   ========================================================================== */
.auswertung-blatt {
  /* Über die ganze Breite des Arbeitsbereichs. Vorher waren es 900 px - bei
     einem Bericht, der ausgedruckt und im Rat herumgereicht wird, ist der
     Platz für die Balken aber der eigentliche Gewinn. */
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  background: #fff;
}
.auswertung-titel {
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--sb-accent);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--sb-navy);
}
.auswertung-abschnitt {
  margin: 30px 0 6px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--sb-navy);
}
.auswertung-erklaerung {
  margin-bottom: 12px;
  color: #5a6155;
  font-size: .88rem;
}

.auswertung-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 8px;
}
.auswertung-zahl {
  padding: 14px 16px;
  border-left: 4px solid var(--sb-accent);
  background: #f6f8f4;
}
.auswertung-wert {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--sb-navy);
  font-variant-numeric: tabular-nums;
}
.auswertung-label { display: block; margin-top: 3px; font-size: .88rem; font-weight: 600; }
.auswertung-hinweis { display: block; margin-top: 2px; color: #6d7468; font-size: .78rem; }

.auswertung-tabelle { margin-bottom: 0; }
.auswertung-tabelle th { font-size: .82rem; color: #5a6155; }
.auswertung-tabelle td { font-variant-numeric: tabular-nums; }
/* Auf breiten Bildschirmen stehen die beiden kurzen Tabellen nebeneinander -
   sonst bliebe rechts nur Leerraum, und man müsste unnötig scrollen. */
.auswertung-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  gap: 0 40px;
}
.auswertung-balkenspalte { width: 34%; }
.auswertung-balken {
  display: block;
  height: 12px;
  min-width: 2px;
  border-radius: 3px;
  background: var(--sb-accent);
}
.auswertung-fussnote {
  margin: 26px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--sb-border);
  color: #6d7468;
  font-size: .78rem;
}

@media print {
  /* Gedruckt untereinander: Nebeneinander würde auf A4 zu schmal. */
  .auswertung-spalten { display: block; }
  /* Beim Drucken bleibt nur das Blatt. Menü, Kopfleiste und Bedienknöpfe
     gehören nicht auf ein Papier, das in den Gemeinderat geht. */
  #sidebar, #topbar, .admin-seitenkopfzeile, .d-print-none { display: none !important; }
  #main-content { margin: 0; padding: 0; }
  .auswertung-blatt { max-width: none; padding: 0; border: 0; }
  .auswertung-abschnitt { break-after: avoid; }
  .auswertung-tabelle { break-inside: avoid; }
  .auswertung-balken { background: #666 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .auswertung-zahl { background: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Prüfliste beim Übernehmen eines Kalenders. Die Raumauswahl steht als
   kompaktes Feld in der Zeile - neun Räume untereinander würden die Tabelle
   auf mehrere Bildschirmhöhen strecken. */
.import-tabelle td { vertical-align: top; }
.import-raumwahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 1px 10px;
  min-width: 240px;
}
.import-raum {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .76rem;
  white-space: nowrap;
}
.import-raum .form-check-input { margin: 0; flex: 0 0 auto; }

/* Zahlenblock in der Raummaske. Abgesetzt, weil er etwas anderes ist als die
   Textfelder darüber: Text ist für die Website, diese Zahlen sind zum Rechnen. */
.klubhaus-kennzahlen {
  padding: 16px 18px;
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  background: #f7f9f5;
}

/* ---------------------------------------------------------------------------
 * Tabellen im Texteditor
 *
 * Quill bringt für Tabellen keine Gestaltung mit - ohne diese Regeln stünden
 * die Zellen als Fließtext ohne Linien untereinander, und der Redakteur
 * könnte nicht erkennen, ob die Tabelle heil angekommen ist.
 * ------------------------------------------------------------------------- */
.ql-editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: .95em;
}
.ql-editor table th,
.ql-editor table td {
  border: 1px solid var(--sb-border, #d8d8d0);
  padding: .4rem .6rem;
  text-align: left;
  vertical-align: top;
}
.ql-editor table thead th {
  background: #f2f5ee;
  font-weight: 600;
}
/* Der Block wird als Ganzes eingefügt und gelöscht - ein dezenter Rahmen beim
   Überfahren macht das sichtbar, bevor jemand vergeblich hineinklickt. */
.ql-editor table:hover {
  outline: 2px solid rgba(86, 122, 60, .35);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Statusfeld: veröffentlicht oder Entwurf
 *
 * Die Farbe beantwortet die Frage, die beim Bearbeiten am häufigsten gestellt
 * wird - ist das online? Der Text darunter sagt dasselbe noch einmal in
 * Worten: Farbe allein wäre für Menschen mit Farbsehschwäche keine Auskunft.
 * ------------------------------------------------------------------------- */
.status-feld {
  padding: .85rem 1rem;
  border-radius: 10px;
  border-left: 5px solid transparent;
}
.status-feld--oeffentlich {
  background: #eef4e8;
  border-left-color: var(--sb-accent);
}
.status-feld--entwurf {
  background: #fdf6e3;
  border-left-color: #c99a2e;
}
.status-feld .form-label {
  margin-bottom: .35rem;
}
.status-feld-hinweis {
  margin: .5rem 0 0;
  font-size: .875rem;
  line-height: 1.4;
}
.status-feld--oeffentlich .status-feld-hinweis { color: #3d5c28; }
.status-feld--entwurf .status-feld-hinweis { color: #7a5c12; }

/* Untergruppe im Gemeindemanager, die immer offen steht - für Bereiche ohne
   'aufklappbar' in menue.php. Wird derzeit von keinem Punkt genutzt: Die
   Klubhaus-Vermietung klappt auf Wunsch auf und zu wie die Websites. */
.sidebar-subgroup--offen {
  display: block;
}

/* Websites eine Ebene tiefer: Die Blöcke darin brauchen keinen zusätzlichen
   Einzug - sonst rutschen die eigentlichen Menüpunkte auf vier Ebenen nach
   rechts und das Menü wird schmaler als lesbar. */
.sidebar-webseiten > .sidebar-item > .sidebar-link {
  padding-left: 1.5rem;
  font-weight: 600;
}
.sidebar-webseiten .sidebar-submenu .sidebar-link {
  padding-left: 2.1rem;
}
.sidebar-webseiten .sidebar-subgroup .sidebar-link {
  padding-left: 2.7rem;
}
/* Auch die reinen Beschriftungen („Verwaltung", „Inhalte") - sonst stehen sie
   eine Stufe weiter links als die aufklappbaren Gruppen daneben. */
.sidebar-webseiten .sidebar-submenu > .sidebar-caption {
  padding-left: 2.1rem;
}

/* ---------------------------------------------------------------------------
 * Reihenfolge der Kästen in der rechten Spalte
 *
 * Die Liste bildet nach, was sie beschreibt: untereinander, jede Zeile ein
 * Kasten. Deshalb sind die Zeilen umrandet und nicht nur Text - sonst sähe
 * eine Reihenfolge aus wie eine Aufzählung.
 * ------------------------------------------------------------------------ */
.seitenleiste-reihenfolge {
  display: grid;
  gap: .4rem;
  max-width: 34rem;
}

.seitenleiste-reihenfolge-zeile {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .6rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .5rem;
  background: var(--bs-body-bg, #fff);
}

.seitenleiste-reihenfolge-griff {
  color: #9aa0a6;
  line-height: 1;
}

.seitenleiste-reihenfolge-name {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Schnelleinstieg - das Blatt zum Ausdrucken
 *
 * Zwei Anforderungen zugleich: am Bildschirm lesbar und auf A4 brauchbar.
 * Deshalb ist die Gestaltung bewusst schlicht und einspaltig - ein zweispaltiges
 * Raster bricht beim Drucken an Stellen, die man nicht vorhersehen kann.
 *
 * Die eingetragenen Flächen (Adresse, Benutzername, Telefon) sind Linien zum
 * Ausfüllen mit dem Stift: Die Zettel werden ausgedruckt, bevor feststeht, wer
 * sie bekommt.
 * ------------------------------------------------------------------------- */
.topbar-hilfe {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.topbar-hilfe .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar-hilfe .btn.active { box-shadow: inset 0 0 0 2px rgba(0,0,0,.12); }
@media (max-width: 767.98px) {
  /* Am Handy nur die Symbole - sonst drängt die Kopfzeile den Titel heraus. */
  .topbar-hilfe .btn span { display: none; }
}

.se-leiste {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  background: #f7f9f5;
}
.se-wahl { display: flex; gap: 8px; flex-wrap: wrap; }

.se-blatt {
  max-width: 820px;
  padding: 32px 36px 28px;
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  background: #fff;
  color: #23281f;
  line-height: 1.55;
}
.se-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 3px solid var(--sb-accent);
}
.se-oberzeile {
  margin: 0 0 4px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6d7468;
}
.se-titel { margin: 0; font-size: 1.62rem; font-weight: 700; color: var(--sb-navy); }
.se-unterzeile { margin: 6px 0 0; color: #4d5348; max-width: 44ch; }

.se-kennzeile {
  margin: 0;
  min-width: 250px;
  font-size: .86rem;
}
.se-kennzeile dt {
  margin-top: 8px;
  font-weight: 600;
  color: #6d7468;
  font-size: .76rem;
}
.se-kennzeile dd { margin: 0; }
.se-kennzeile--breit { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; align-items: baseline; }
.se-kennzeile--breit dt { margin-top: 0; }
/* Eine Linie zum Ausfüllen; als Rahmen und nicht als Unterstrich, weil ein
   leerer Unterstrich in manchen Browsern gar nicht mitgedruckt wird. */
.se-luecke {
  display: inline-block;
  min-width: 190px;
  height: 1.1em;
  border-bottom: 1px solid #9aa294;
}

.se-abschnitt { margin-bottom: 24px; break-inside: avoid; }
.se-abschnitt h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--sb-navy);
}
.se-nummer {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sb-accent);
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.se-vorspann { margin: 0 0 10px; color: #4d5348; }
.se-schritte, .se-punkte { margin: 0; padding-left: 1.35rem; }
.se-schritte li, .se-punkte li { margin-bottom: .3rem; }
.se-notiz {
  margin: 10px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--sb-border);
  color: #4d5348;
  font-size: .9rem;
}

.se-menue { list-style: none; margin: 0; padding: 0; }
.se-menue li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 10px;
  padding: 7px 0;
  border-bottom: 1px dotted var(--sb-border);
}
.se-menue li i { grid-row: span 2; font-size: 1.05rem; color: var(--sb-accent); padding-top: 2px; }
.se-menue li span { font-size: .88rem; color: #4d5348; }

.se-kasten {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--sb-border);
  border-radius: 8px;
  background: #f7f9f5;
  font-size: .92rem;
}
.se-kasten--wichtig { border-left: 4px solid #d08a1c; background: #fdf6e8; }

.se-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.se-status-karte {
  padding: 12px 14px;
  border: 1px solid var(--sb-border);
  border-radius: 8px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.se-status-karte strong { display: block; margin-bottom: 3px; }
.se-status-karte span { font-size: .88rem; color: #4d5348; }
.se-status-karte--entwurf { background: #fdf6e8; border-left: 4px solid #d08a1c; }
.se-status-karte--online { background: #eef6ea; border-left: 4px solid var(--sb-accent); }

.se-abschnitt--schluss { margin-bottom: 18px; }
.se-fuss {
  padding-top: 12px;
  border-top: 1px solid var(--sb-border);
  font-size: .78rem;
  color: #6d7468;
}

@media (max-width: 575.98px) {
  .se-blatt { padding: 22px 18px 20px; }
  .se-status { grid-template-columns: 1fr; }
  .se-kennzeile--breit { grid-template-columns: 1fr; }
}

/*
 * Seitenrand für alles, was aus der Verwaltung auf Papier geht.
 *
 * Ohne diese Angabe nimmt der Browser seinen eigenen Rand - beim Schnelleinstieg
 * stand der Text dadurch links und oben fast an der Blattkante. 18 mm oben und
 * 15 mm an den Seiten: genug Luft zum Abheften, und bei 210 mm Blattbreite
 * bleiben 180 mm Text - eine Zeilenlänge, die sich noch gut liest.
 *
 * Die Angabe gilt für jede Druckseite der Verwaltung, also auch für die
 * Nutzungsauswertung. Das ist Absicht: Ein einheitlicher Rand ist für jedes
 * Blatt richtig, das in einen Ordner kommt.
 */
@page {
  size: A4;
  margin: 18mm 15mm 16mm;
}

@media print {
  /* Nur das Blatt kommt aufs Papier. Menü, Kopfleiste und Bedienknöpfe würden
     sonst als graue Balken mitgedruckt - und der Zettel soll aussehen wie ein
     Merkblatt, nicht wie ein Bildschirmfoto. */
  .se-leiste { display: none !important; }
  .se-blatt {
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    /* In Punkt statt Pixel: Am Bildschirm ist 16px richtig, auf A4 ist das
       Grossdruck und kostet eine halbe Seite. */
    font-size: 10.5pt;
    line-height: 1.45;
  }
  .se-titel { font-size: 17pt; }
  .se-oberzeile { font-size: 7.5pt; }
  .se-unterzeile { font-size: 10pt; }
  /*
   * Auf Papier enger gesetzt als am Bildschirm - nicht aus Sparsamkeit,
   * sondern weil das Blatt dadurch auf zwei Seiten passt statt auf drei.
   * Ein Merkblatt, das man auf ein Blatt vorn und hinten drucken kann, liegt
   * neben der Tastatur; drei lose Seiten gehen verloren.
   */
  .se-kopf { padding-bottom: 8px; margin-bottom: 11px; }
  .se-abschnitt { margin-bottom: 9px; }
  .se-abschnitt h2 { margin-bottom: 6px; }
  .se-schritte li, .se-punkte li { margin-bottom: .12rem; }
  /* Die Menüliste zweispaltig: sechs kurze Punkte untereinander kosten auf
     A4 ein Drittel Seite, nebeneinander ein Sechstel - und genau daran hing,
     ob der letzte Abschnitt noch auf die zweite Seite passt. */
  .se-menue { columns: 2; column-gap: 20px; }
  .se-menue li { padding: 4px 0; break-inside: avoid; }
  .se-notiz { margin-top: 7px; }
  .se-kasten { margin-top: 8px; padding: 9px 11px; }
  .se-status-karte { padding: 7px 10px; }
  .se-status { gap: 9px; }
  .se-abschnitt h2 { font-size: 12pt; }
  .se-nummer { width: 24px; height: 24px; font-size: 9.5pt; }
  .se-notiz, .se-kasten, .se-menue li span, .se-status-karte span { font-size: 9.5pt; }
  .se-menue li { break-inside: avoid; }
  .se-status-karte { break-inside: avoid; }
  .se-fuss { font-size: 8pt; }
}

/* ---------------------------------------------------------------------------
 * Rechtevergabe: Rollen statt Häkchenraster
 *
 * Die Karten beantworten die Frage „wofür ist dieser Zugang da?", der grüne
 * Kasten darunter die Frage „was darf er dann?". Die einzelnen Schalter
 * bleiben darunter in der Feineinstellung - sie sind weiterhin die Wahrheit,
 * nur nicht mehr das Erste, was man sieht.
 * ------------------------------------------------------------------------- */
.zugangsrolle {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  background: #fff;
  text-align: left;
}
.zugangsrolle:hover {
  border-color: var(--sb-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.zugangsrolle--aktiv {
  border-color: var(--sb-accent);
  box-shadow: inset 0 0 0 1px var(--sb-accent);
  background: #f2f7ef;
}
.zugangsrolle > i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 1.3rem;
  color: var(--sb-accent);
}
.zugangsrolle strong { display: block; }
.zugangsrolle small {
  display: block;
  color: #5a6154;
  line-height: 1.35;
}

.zugang-klartext {
  padding: 12px 14px;
  border-left: 4px solid var(--sb-accent);
  border-radius: 0 8px 8px 0;
  background: #f2f7ef;
}
.zugang-klartext ul {
  margin: .35rem 0 0;
  padding-left: 1.1rem;
}
.zugang-klartext li { margin-bottom: .15rem; }

.zugang-feineinstellung > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--sb-navy);
  padding: 8px 0;
}
.zugang-feineinstellung[open] > summary { margin-bottom: .25rem; }

/* Kontaktzeile am Fuss des Schnelleinstiegs: drei Felder nebeneinander. */
.se-kontaktzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin: 8px 0 0;
  font-size: .9rem;
}
.se-luecke--kurz { min-width: 120px; }

/* ---------------------------------------------------------------------------
 * Schaltbare Bereiche (Seitenboxen, Linkbox)
 *
 * Ein ausgeschalteter Kasten sah bisher aus wie ein eingeschalteter. Jetzt
 * ist er blass und trägt einen Balken, der sagt, was das bedeutet. Die
 * Bedienelemente bleiben benutzbar - es geht um Sichtbarkeit des Zustands,
 * nicht ums Sperren: Wer in ein blasses Feld schreibt, schaltet den Kasten
 * damit ein (siehe assets/js/bereich-schalter.js).
 * ------------------------------------------------------------------------- */
.schaltbereich-balken {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid #e0c9a0;
  border-left: 4px solid #d08a1c;
  border-radius: 8px;
  background: #fdf6e8;
  font-size: .92rem;
}
.schaltbereich-balken[hidden] { display: none; }

/* Blass, aber nicht ausgegraut: Ausgegraute Felder wirken gesperrt, und
   gesperrt sind sie gerade nicht. */
.schaltbereich-inhalt--aus {
  opacity: .55;
  filter: saturate(.4);
  transition: opacity .15s ease, filter .15s ease;
}
.schaltbereich-inhalt--aus:focus-within {
  opacity: 1;
  filter: none;
}

/* ---------------------------------------------------------------------------
 * Statusstreifen über der Bearbeitungsmaske
 *
 * Grün heisst öffentlich, gelb heisst Entwurf - dieselbe Farblogik wie bei
 * den Statusfeldern in den Listen. Die Farbe ist die eigentliche Botschaft;
 * der Text steht daneben für alle, die Farben nicht unterscheiden.
 * ------------------------------------------------------------------------- */
.admin-statusstreifen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: -0.5rem 0 1.5rem;
  padding: 10px 16px;
  border: 1px solid #cfe0c4;
  border-left: 5px solid var(--sb-accent);
  border-radius: 10px;
  background: #eef6ea;
}
.admin-statusstreifen--entwurf {
  border-color: #e0c9a0;
  border-left-color: #d08a1c;
  background: #fdf6e8;
}
.admin-statusstreifen-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.admin-statusstreifen-text strong { color: var(--sb-navy); }
.admin-statusstreifen-text span { color: #4d5348; font-size: .92rem; }

/* Luft vor der Auswertung: Sie beginnt einen neuen Gedanken und klebte
   bisher an den Kennzahlen darüber. */
.rewa-statistik--voll,
.admin-statistik-eigene {
  margin-top: clamp(28px, 3vw, 44px);
}

/* Zusatz in der Kopfleiste: „Ihr Bereich der Gemeinde-Website". Leiser als
   der Name daneben – er ordnet ein, er ist nicht die Überschrift. */
.topbar-zusatz {
  color: #6d7468;
  font-size: .85rem;
  border-left: 1px solid var(--sb-border);
  padding-left: 12px;
}

/* ---------------------------------------------------------------------------
 * Ungespeicherte Änderungen
 *
 * Der Satz „Es gibt noch ungespeicherte Änderungen" stand klein in der
 * Fussleiste und wurde überlesen - man sieht ihn erst, wenn man ohnehin schon
 * beim Speichern-Knopf ist. Deshalb färbt sich die ganze Arbeitsfläche leicht
 * warm ein, sobald etwas geändert wurde. Eine Farbe, die das ganze Bild
 * betrifft, lässt sich nicht übersehen, ohne sie zu lesen.
 *
 * Bewusst sehr blass: Es ist eine Erinnerung, keine Warnung. Der Text bleibt
 * daneben stehen, damit die Aussage auch ankommt, wenn jemand Farben nicht
 * unterscheidet.
 * ------------------------------------------------------------------------- */
body.hat-offene-aenderungen #main-content {
  background: #fdfaf0;
  box-shadow: inset 0 0 0 1px #f0e3c4;
  transition: background .25s ease;
}
body.hat-offene-aenderungen .admin-formular-aktion {
  border-color: #e0c9a0;
  background: #fdf6e8;
}
.admin-ungespeichert { animation: admin-ungespeichert-auftauchen .25s ease; }
@keyframes admin-ungespeichert-auftauchen {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.hat-offene-aenderungen #main-content { transition: none; }
  .admin-ungespeichert { animation: none; }
}

/* ---------------------------------------------------------------------------
 * Umfrage-Auswertung: Rangliste der Ideen
 *
 * Die Farbskala läuft von Grün (dafür) über Grau (neutral) nach Rotbraun
 * (dagegen). Bewusst nicht Rot/Grün allein: Rot-Grün-Blindheit ist die
 * häufigste Farbsehschwäche. Die Reihenfolge der Abschnitte im Balken ist
 * deshalb fest (immer dafür → neutral → dagegen), und die Zahlen stehen
 * zusätzlich als Prozentwerte daneben.
 * ------------------------------------------------------------------------- */
.umfrage-stimmung {
  display: flex;
  height: 22px;
  min-width: 200px;
  overflow: hidden;
  border-radius: 5px;
  background: #eef0ec;
}
.umfrage-stimmung > span { display: block; }
.umfrage-stufe-2  { background: #4a7c3f; }
.umfrage-stufe-1  { background: #8ab07c; }
.umfrage-stufe-0  { background: #d8dcd5; }
.umfrage-stufe-m1 { background: #e0a86a; }
.umfrage-stufe-m2 { background: #c2603a; }

.umfrage-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: .82rem;
  color: #4d5348;
}
.umfrage-legende span { display: inline-flex; align-items: center; gap: 5px; }
.umfrage-legende i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.umfrage-rang {
  text-align: right;
  color: #6d7468;
  font-variant-numeric: tabular-nums;
}
.umfrage-wert { font-variant-numeric: tabular-nums; font-weight: 600; }
.umfrage-ablehnung { color: #b0472a; }
.umfrage-umstritten-zahl { color: #b06a1e; }
/* Bootstrap färbt Tabellenzellen über --bs-table-bg ein und überdeckt damit
   jeden Hintergrund an der Zeile. Deshalb beides setzen - sonst bleibt die
   Markierung unsichtbar, und genau sie soll den Blick lenken. */
.umfrage-zeile-umstritten { --bs-table-bg: #fdf6e8; }
.umfrage-zeile-umstritten > td { background-color: #fdf6e8; }

@media print {
  /* Die Rangliste ist das, was in den Gemeinderat geht. */
  .umfrage-stimmung > span,
  .umfrage-legende i {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .umfrage-zeile-umstritten > td {
    background-color: #fdf6e8 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---------------------------------------------------------------------------
 * Auswertungsbericht einer Umfrage
 *
 * Ein Blatt, das man im Gemeinderat auf den Tisch legt. Deshalb schlicht und
 * einspaltig: Mehrspaltige Berichte brechen beim Drucken an Stellen um, die
 * man nicht vorhersehen kann.
 *
 * Die Diagramme sind Rechtecke und ein SVG-Kreis - keine Bibliothek. Eine
 * Diagrammbibliothek zeichnet meist auf eine Canvas-Fläche, und die wird von
 * vielen Browsern gar nicht mitgedruckt. Ausgerechnet beim Ausdruck stünde
 * dann nichts da.
 * ------------------------------------------------------------------------- */
.umfrage-bericht {
  max-width: 880px;
  padding: 34px 38px 28px;
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  background: #fff;
  color: #23281f;
  line-height: 1.55;
}
.umfrage-bericht-kopf {
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 3px solid var(--sb-accent);
}
.umfrage-bericht-oberzeile {
  margin: 0 0 4px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6d7468;
}
.umfrage-bericht-kopf h1 {
  margin: 0;
  font-size: 1.62rem;
  font-weight: 700;
  color: var(--sb-navy);
}
.umfrage-bericht-unterzeile { margin: 6px 0 0; color: #4d5348; }
.umfrage-bericht-laufzeit { margin: 10px 0 0; font-size: .9rem; color: #6d7468; }

.umfrage-bericht-kennzahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin: 16px 0 0;
}
.umfrage-bericht-kennzahlen dt {
  font-size: .76rem;
  font-weight: 600;
  color: #6d7468;
}
.umfrage-bericht-kennzahlen dd {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sb-navy);
}

.umfrage-bericht-abschnitt { margin-bottom: 30px; }
.umfrage-bericht-abschnitt > h2 {
  margin: 0 0 8px;
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--sb-navy);
}
.umfrage-bericht-vorspann { margin: 0 0 14px; color: #4d5348; font-size: .92rem; }
.umfrage-bericht-zwischentitel {
  margin: 24px 0 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sb-navy);
}
.umfrage-bericht-stufe { font-weight: 400; color: #6d7468; }

.umfrage-bericht-frage {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  break-inside: avoid;
}
.umfrage-bericht-frage h4 { margin: 0 0 4px; font-size: .98rem; font-weight: 700; }
.umfrage-bericht-zahl { margin: 0 0 10px; font-size: .86rem; color: #6d7468; }
.umfrage-bericht-leer { color: #6d7468; font-style: italic; }

.umfrage-bericht-diagramm {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
}
.umfrage-bericht-diagramm > .umfrage-bericht-tabelle { flex: 1 1 320px; }
.umfrage-bericht-kreis { flex: 0 0 auto; }
.umfrage-kreis { width: 112px; height: 112px; }

.umfrage-bericht-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.umfrage-bericht-tabelle th {
  padding: 6px 8px;
  border-bottom: 2px solid var(--sb-border);
  text-align: left;
  font-size: .8rem;
  color: #6d7468;
}
.umfrage-bericht-tabelle td {
  padding: 6px 8px;
  border-bottom: 1px solid #eceee8;
  vertical-align: middle;
}
.umfrage-bericht-tabelle .rechts { text-align: right; }
.umfrage-bericht-tabelle--schmal td { padding: 4px 8px; }

.umfrage-balkenzelle { width: 45%; min-width: 120px; }
.umfrage-balken {
  display: block;
  height: 14px;
  min-width: 2px;
  border-radius: 3px;
}
.umfrage-punkt {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: baseline;
}
.umfrage-stimmung--gross { height: 28px; margin-bottom: 10px; }

.umfrage-marke {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid #e0c9a0;
  border-radius: 999px;
  background: #fdf6e8;
  font-size: .74rem;
  color: #8a5a0c;
}

.umfrage-bericht-freitexte {
  margin: 0;
  padding-left: 1.4rem;
  font-size: .92rem;
}
.umfrage-bericht-freitexte li {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dotted var(--sb-border);
  break-inside: avoid;
}
.umfrage-bericht-freitexte li:last-child { border-bottom: 0; }

.umfrage-bericht-fuss {
  padding-top: 12px;
  border-top: 1px solid var(--sb-border);
  font-size: .78rem;
  color: #6d7468;
}

/* ---------------------------------------------------------------------------
   Themenfilter für Freitext-Antworten (Bildschirm)

   Die Knöpfe sind absichtlich kräftig und mit Zahl: Ein Filter, den man für
   Zierde hält, wird nicht benutzt. Der eingeschaltete Zustand ist durch Farbe
   UND Rahmen erkennbar, nicht nur durch Farbe.
   --------------------------------------------------------------------------- */
.umfrage-filter {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--sb-border);
  border-radius: 8px;
  background: #f7f9f5;
}
.umfrage-filter-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.umfrage-filter-titel { font-weight: 600; font-size: .95rem; }
.umfrage-filter-stand { font-size: .85rem; color: #5d6b55; font-variant-numeric: tabular-nums; }

.umfrage-filter-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.umfrage-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border: 1px solid #c6d2bd;
  border-radius: 999px;
  background: #fff;
  font-size: .85rem;
  line-height: 1.5;
  color: #2f3a2b;
  cursor: pointer;
}
.umfrage-chip:hover { border-color: #4a7c3f; background: #eef4ea; }
.umfrage-chip-aktiv,
.umfrage-chip-aktiv:hover {
  border-color: #2f5a27;
  background: #4a7c3f;
  color: #fff;
  font-weight: 600;
}
.umfrage-chip-zahl {
  padding: 0 5px;
  border-radius: 999px;
  background: #eef1ec;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: #44523e;
}
.umfrage-chip-aktiv .umfrage-chip-zahl { background: rgba(255, 255, 255, .25); color: #fff; }
/* „Ohne Thema" grau: Es ist kein Thema, sondern der Rest. */
.umfrage-chip-rest { border-style: dashed; color: #5c625a; }
.umfrage-chip-rest.umfrage-chip-aktiv { background: #6d7468; border-color: #555b50; }

.umfrage-filter-suche { max-width: 520px; }
.umfrage-filter-woerter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  margin-top: 8px;
}
.umfrage-wort {
  padding: 1px 8px;
  border: 1px dashed #c6d2bd;
  border-radius: 4px;
  background: #fff;
  font-size: .8rem;
  color: #2f3a2b;
  cursor: pointer;
}
.umfrage-wort:hover { border-style: solid; border-color: #4a7c3f; background: #eef4ea; }

.umfrage-filter-hinweis {
  margin: 10px 0 0;
  font-size: .8rem;
  line-height: 1.45;
  color: #5d6b55;
}

.umfrage-antwort-text { white-space: pre-wrap; }
.umfrage-antwort-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}
.umfrage-thema-marke {
  padding: 1px 8px;
  border: 1px solid #c6d2bd;
  border-radius: 999px;
  background: #eef4ea;
  font-size: .74rem;
  color: #3c5635;
}

/* ---------------------------------------------------------------------------
   Themen im gedruckten Bericht
   --------------------------------------------------------------------------- */
.umfrage-bericht-marken { white-space: normal; }
.umfrage-bericht-marke {
  display: inline-block;
  margin-left: 5px;
  padding: 0 6px;
  border: 1px solid #c6d2bd;
  border-radius: 999px;
  background: #eef4ea;
  font-size: .72rem;
  color: #3c5635;
  white-space: nowrap;
}
.umfrage-bericht-woerter {
  margin: 8px 0 0;
  font-size: .84rem;
  line-height: 1.5;
  color: #44523e;
}
/* Die Zeile „keinem Thema zugeordnet" ist kein Thema, sondern der Rest -
   deshalb abgesetzt und nicht in der Reihe mitgezählt. */
.umfrage-bericht-rest > td {
  border-top: 1px solid var(--sb-border);
  color: #5c625a;
  font-style: italic;
}

@media print {
  /* Nur der Bericht kommt aufs Papier - Menü und Knöpfe blendet die
     allgemeine Druckregel oben bereits aus. */
  .umfrage-bericht {
    max-width: none;
    padding: 0;
    border: 0;
    font-size: 10.5pt;
    line-height: 1.45;
  }
  .umfrage-bericht-kopf h1 { font-size: 17pt; }
  .umfrage-bericht-abschnitt > h2 { font-size: 12.5pt; }
  .umfrage-bericht-abschnitt { margin-bottom: 20px; }
  .umfrage-bericht-frage { break-inside: avoid; }
  /* Die Themenliste darf umbrechen: Sie ist oft zwanzig Zeilen lang und
     würde als unteilbarer Block eine halbleere Seite hinterlassen. */
  .umfrage-bericht-themenblock { break-inside: auto; }
  .umfrage-bericht-themenblock h4,
  .umfrage-bericht-themenblock .umfrage-bericht-zahl,
  .umfrage-bericht-themenblock thead { break-after: avoid; }
  .umfrage-bericht-tabelle tr { break-inside: avoid; }
  /* Der Anhang beginnt auf einer neuen Seite: Er ist etwas anderes als die
     Auswertung und wird oft getrennt herumgereicht. */
  .umfrage-bericht-anhang { break-before: page; }
  /* Der Filter ist zum Klicken da und hat auf Papier nichts verloren. */
  .umfrage-filter { display: none; }
  /* Farbflächen müssen mitgedruckt werden, sonst sind alle Diagramme weiss. */
  .umfrage-stimmung > span,
  .umfrage-balken,
  .umfrage-punkt,
  .umfrage-legende i,
  .umfrage-kreis path,
  .umfrage-kreis circle,
  .umfrage-bericht-marke,
  .umfrage-marke {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}