/* Design nach dem Vereinslogo (public/img/logo.png): Grün #1c7331, Gold #c9ab79, Weiß; Arial, nur helles Farbschema.
   Gold nur für Linien und Flächen – als Schriftfarbe ist es auf Weiß zu blass (dafür --gold-text). */
:root {
  color-scheme: light;
  --bg: #f8f6f1;
  --card: #fff;
  --ink: #1b1b1b;
  --mute: #6a6458;
  --line: #e3ddd1;
  --g: #1c7331;
  --g-dunkel: #145526;
  --gold: #c9ab79;
  --gold-text: #7d6237;
  --gold-flaeche: #f6efe2;
  --grau: #ece8e0;
  --rot-flaeche: #fde4e4;
  --rot-rand: #e08a8a;
  --rot-text: #a61b1b;
  --ok-flaeche: #e6f2e8;
  --gelb: #f6efe2;
  /* Auswertung nach Altersgruppe: Gold-Abstufung hell (jung) → dunkel (alt), ein Farbton, geprüft (hellste Stufe ≥ 2:1 zu Weiß) */
  --alter-1: #d6aa71; --alter-2: #c39457; --alter-3: #af7e3d; --alter-4: #9a6a23;
  --alter-5: #855603; --alter-6: #704300; --alter-7: #5b3200; --alter-8: #452100;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 16px/1.4 Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3 { font-weight: 600; margin: 0 0 12px; }
h1 { color: var(--g); }
h1 { font-size: 24px; }
h2 { font-size: 19px; }
a { color: var(--g); }
:focus-visible { outline: 3px solid var(--g); outline-offset: 2px; }

/* Testumgebung */
.testbalken { display: none; background: #c62828; color: #fff; text-align: center; font-weight: 700; padding: 6px 16px; }
.ist-test .testbalken { display: block; }

/* Kopfzeile */
.top {
  background: var(--card);
  min-height: 84px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 6px solid var(--g);
  border-bottom: 3px solid var(--gold);
}
.titel { flex: 1; display: flex; flex-direction: column; text-decoration: none; color: var(--g); }
.titel-verein { font: 700 24px Arial, Helvetica, sans-serif; letter-spacing: .2px; }
.titel-app { color: var(--gold-text); font-size: 14px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.logo { display: block; flex: none; line-height: 0; }
.logo img { height: 68px; width: auto; max-width: 160px; object-fit: contain; }   /* Vereinslogo aus Stammdaten → Verein, auch breite Logos */
.konto { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.konto-name { color: var(--g); }
.konto-wer { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.konto-rolle { color: var(--mute); font-size: 12.5px; }
.konto-rolle:empty { display: none; }
.konto:empty { display: none; }

/* Inhalt */
main { flex: 1; width: 100%; max-width: 900px; margin: 0 auto; padding: 20px 16px 32px; outline: none; }
main:focus-visible { outline: none; } /* Fokus nach Seitenwechsel nur für Screenreader, ohne Rahmen */
.karte { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 20px; margin-bottom: 16px; }
.karte.schmal { max-width: 440px; margin-left: auto; margin-right: auto; }
.leise { color: var(--mute); font-size: 14px; }
.hinweis { background: var(--gold-flaeche); border-left: 4px solid var(--gold); padding: 10px 12px; border-radius: 6px; }

/* Startseite: zwei gleichwertige Wege */
.wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.wahlkarte {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--card); border: 2px solid var(--g); border-radius: 10px; padding: 22px 20px;
  text-decoration: none; color: var(--ink); min-height: 140px;
}
.wahlkarte { border-top-width: 6px; }
.wahlkarte:hover { background: var(--gold-flaeche); border-color: var(--g-dunkel); }
.wahl-titel { font: 700 21px Arial, Helvetica, sans-serif; color: var(--g); }
.wahl-text { color: #333; }

/* Formulare */
label { display: block; color: var(--mute); font-size: 14px; margin: 12px 0 4px; }
input, select, textarea {
  width: 100%; font: inherit; padding: 9px 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
}
input:focus, select:focus, textarea:focus { border-color: var(--g); outline: 2px solid var(--g); outline-offset: 0; }
.knopfreihe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.knopfreihe a { font-size: 14px; margin-left: auto; }
button {
  font: 13.5px Arial, Helvetica, sans-serif; padding: 8px 14px; cursor: pointer;
  background: var(--card); color: var(--g); border: 1px solid var(--g); border-radius: 6px;
}
button:hover:not(:disabled) { background: var(--gold-flaeche); }
button.haupt { font-weight: 700; font-size: 15px; padding: 10px 18px; background: var(--g); color: #fff; }
button.haupt:hover:not(:disabled) { background: var(--g-dunkel); }
button:disabled { opacity: .55; cursor: default; }
.meldung { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; }
.meldung.fehler { color: var(--rot-text); background: var(--rot-flaeche); border: 1px solid var(--rot-rand); border-radius: 6px; padding: 8px 10px; }
.meldung.ok { color: var(--g); background: var(--ok-flaeche); border: 1px solid #9cc7a5; border-radius: 6px; padding: 8px 10px; }

/* Anmeldung mit zweitem Faktor (intern-konto.js) */
.oder { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; color: var(--mute); font-size: 13px; }
.oder::before, .oder::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
button.passkey-knopf { width: 100%; font-weight: 700; padding: 10px 18px; }
.qr { display: block; margin: 8px auto 12px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px; }
.code-eingabe { font-size: 20px; letter-spacing: 4px; max-width: 12ch; }
code.geheim { word-break: break-all; font-size: 14px; }
.schritte-liste { margin: 8px 0; padding-left: 22px; }

/* Antrag in Schritten */
.fortschritt { margin: 4px 0 18px; }
.fortschritt-text { font-size: 15px; margin-bottom: 6px; }
.fortschritt-balken { height: 8px; background: var(--grau); border-radius: 4px; overflow: hidden; }
.fortschritt-balken span { display: block; height: 100%; background: var(--g); }
.feld { margin-bottom: 4px; }
.feldfehler { color: var(--rot-text); font-size: 14px; margin: 4px 0 0; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--rot-rand); background: var(--rot-flaeche); }
.klein { font-size: 13px; margin: 4px 0 0; }
.zweispaltig { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 16px; }
/* Antrag „Weitere Angaben“: LK schmal (ein Viertel der halben Breite), Link zum LK-Profil breit – auch am Handy nebeneinander */
.zweispaltig.lk-zeile { grid-template-columns: minmax(96px, 1fr) 7fr; }
/* Antrag „Weitere Angaben“: eBusy-Benutzer halb so breit (am Handy mindestens 200px) */
.feld-halb { width: 50%; min-width: min(100%, 200px); }
label.haken { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-size: 15px; margin: 14px 0 0; cursor: pointer; }
label.haken input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--g); }
fieldset.auswahl { border: 0; padding: 0; margin: 12px 0 0; }
fieldset.auswahl legend { color: var(--mute); font-size: 14px; margin-bottom: 6px; }
.auswahl-karte { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-size: 15px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin: 0 0 8px; cursor: pointer; }
.auswahl-karte:has(input:checked) { border-color: var(--g); background: var(--ok-flaeche); }
.auswahl-karte input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; accent-color: var(--g); }
/* Antrag „Weitere Angaben“: je Frage ein Block, Ja/Nein nebeneinander, Altersklassen in 2 oder 3 Spalten (je nach Platz) */
fieldset.frage { border: 0; border-top: 1px solid var(--line); padding: 14px 0 4px; margin: 14px 0 0; }
fieldset.frage:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
fieldset.frage legend { font-weight: 700; color: var(--g); padding: 0; margin-bottom: 4px; float: left; width: 100%; }
fieldset.frage legend + * { clear: both; }
fieldset.frage p { margin: 6px 0; }
.ja-nein { display: flex; gap: 28px; }
.ja-nein label.haken { margin-top: 6px; }
.mehrfach-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.mehrfach-spalten label.haken { margin-top: 8px; }
@media (min-width: 640px) { .mehrfach-spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.textblock { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 14px; max-height: 320px; overflow-y: auto; font-size: 15px; }
.unterblock { border-left: 4px solid var(--gold); padding: 4px 0 4px 14px; margin-top: 16px; }
h3 { font-size: 17px; margin: 18px 0 8px; }
.zusammen { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }
.zusammen-kopf { display: flex; align-items: center; justify-content: space-between; }
.zusammen-kopf h3 { margin: 4px 0; }
.zusammen dl { display: grid; grid-template-columns: minmax(130px, 35%) 1fr; gap: 4px 12px; margin: 6px 0 0; }
.zusammen dt { color: var(--mute); font-size: 14px; }
.zusammen dd { margin: 0; overflow-wrap: anywhere; }
button.leicht { background: var(--card); }
.antrag-knoepfe { justify-content: space-between; margin-top: 20px; }
.antrag-knoepfe a { margin-left: 0; }
.lockfeld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Kacheln der Übersicht */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 12px; }
.kachel { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 4px; color: var(--mute); font-size: 14px; }
.kachel .zahl { font: 600 28px Arial, Helvetica, sans-serif; color: var(--g); }
.kachel.warn { background: var(--rot-flaeche); border-color: var(--rot-rand); }
.kachel.warn .zahl { color: var(--rot-text); }

/* Fußzeile */
.fuss { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; padding: 16px; font-size: 14px; border-top: 3px solid var(--gold); background: var(--g); }
.fuss a { color: #fff; }
.fuss :focus-visible { outline-color: #fff; }

/* Handy */
@media (max-width: 700px) {
  .top { min-height: 0; padding: 8px 12px; flex-wrap: wrap; gap: 8px 12px; }
  .titel-verein { font-size: 20px; }
  .titel-app { font-size: 12px; }
  .logo img { height: 50px; max-width: 110px; }
  .konto { order: 3; width: 100%; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 8px; }
  .konto-wer { align-items: flex-start; }
  main { padding: 12px 10px 24px; }
  .karte { padding: 16px; }
  h1 { font-size: 21px; }
  input, select, textarea { font-size: 16px; }
}
@media (pointer: coarse) {
  button, .wahlkarte, input, select { min-height: 44px; }
}

/* Geschützter Bereich: Gruppen als Reiter oben, Unterpunkte links, Inhalt rechts */
body.bereich-intern main { max-width: 1200px; }
.intern-reiter { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; border-bottom: 3px solid var(--gold); }
.intern-reiter a { padding: 10px 18px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; margin-bottom: -1px; }
.intern-reiter a:hover { background: var(--gold-flaeche); }
.intern-reiter a.aktiv { background: var(--g); border-color: var(--g); color: #fff; }
.intern { display: flex; gap: 20px; align-items: flex-start; }
.intern-nav { flex: 0 0 200px; display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--g); border-radius: 8px; padding: 10px; position: sticky; top: 12px; }
.intern-nav a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.intern-nav a:hover { background: var(--gold-flaeche); }
.intern-nav a.aktiv { background: var(--g); color: #fff; font-weight: 700; }
.intern-nav p { margin: 8px 4px 0; }
.intern-nav p.nav-abschnitt { margin: 10px 4px 0; padding-top: 8px; border-top: 1px solid var(--line); color: var(--mute); font-size: 12.5px; font-weight: 700; }
.intern-nav p.nav-titel + p.nav-abschnitt { margin-top: 0; padding-top: 0; border-top: 0; }
.intern-inhalt { flex: 1; min-width: 0; }
a.kachel { text-decoration: none; }
a.kachel:hover { border-color: var(--g); }

/* Vorgangsliste */
.filterleiste { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; background: var(--grau); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.filterleiste label { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.filterleiste select, .filterleiste input { width: auto; min-width: 150px; background: var(--card); }
.filterleiste .breit { flex: 1; min-width: 200px; }
.filterleiste .breit input { width: 100%; }
.zaehler { margin-left: auto; color: var(--mute); font-size: 14px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabelle th { text-align: left; color: var(--mute); font-weight: 600; font-size: 13px; border-bottom: 2px solid var(--line); padding: 6px 8px; }
.tabelle td { border-bottom: 1px solid var(--line); padding: 8px; vertical-align: top; }
.tabelle tbody tr:hover { background: var(--ok-flaeche); }
.status { display: inline-block; font-size: 13px; padding: 2px 8px; border-radius: 10px; background: var(--grau); white-space: nowrap; }
.st-neu { background: #dbeafe; }
.st-abteilung { background: var(--gold-flaeche); }
.st-rueckfrage { background: #fff1c2; }
.st-hauptverein { background: var(--ok-flaeche); color: var(--g-dunkel); }
.st-erledigt { background: var(--grau); }
.st-abgelehnt { background: var(--rot-flaeche); }

/* Detail */
.detail-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.detail-kopf h1 { margin: 0; }
.aktionen { margin-top: 14px; }
.aktionen .mailentwurf { margin-left: auto; font-size: 14px; }
button.warnung { background: #F9D6D2; color: #b3261e; border-color: var(--rot-rand); }
dl.angaben { display: grid; grid-template-columns: minmax(150px, 30%) 1fr; gap: 6px 14px; margin: 0; }
dl.angaben dt { color: var(--mute); font-size: 14px; }
dl.angaben dd { margin: 0; overflow-wrap: anywhere; }
.notizen { list-style: none; padding: 0; margin: 0 0 12px; }
.notizen li { border-left: 3px solid var(--line); padding: 4px 0 4px 10px; margin-bottom: 8px; }
textarea { width: 100%; font: inherit; padding: 9px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.unterblock { border-left: 4px solid var(--gold); padding: 4px 0 4px 14px; margin-top: 16px; }
button.leicht { background: var(--card); }
.klein { font-size: 13px; }

@media (max-width: 700px) {
  .intern { flex-direction: column; }
  .intern-nav { position: static; flex: none; width: 100%; flex-direction: row; flex-wrap: wrap; }
  .intern-nav p { width: 100%; }
  dl.angaben { grid-template-columns: 1fr; }
  dl.angaben dd { margin-bottom: 6px; }
  .tabelle thead { display: none; }
  .tabelle tr { display: block; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; padding: 6px; }
  .tabelle td { display: grid; grid-template-columns: 90px 1fr; border: 0; padding: 3px 4px; }
  .tabelle td::before { content: attr(data-titel); color: var(--mute); font-size: 13px; }
}

/* Sicherheitsprüfung (Turnstile) im letzten Schritt */
.turnstile { margin: 16px 0 0; min-height: 65px; }

/* Zusammenfassung als PDF: nur beim Drucken sichtbar */
.nur-druck { display: none; }
@media print {
  @page { margin: 15mm; }
  body { background: #fff; min-height: 0; display: block; }
  .nur-druck { display: block; }
  .fuss, .konto, button, .knopfreihe, .lockfeld { display: none !important; }
  .top { min-height: 0; border-top-width: 3px; }
  main { max-width: none; padding: 0; }
  .karte { border: 0; padding: 0 0 8px; }
  .nur-druck .nur-schritt, .nicht-drucken { display: none !important; }
  .zusammen { break-inside: avoid; }
  .testbalken { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== Verwaltung ===== */
.nav-titel { margin: 2px 4px 6px !important; font-weight: 700; color: var(--g); text-transform: uppercase; font-size: 12px; letter-spacing: .5px; }
button.klein-knopf { font-size: 12.5px; padding: 4px 9px; }
td.reihenfolge { white-space: nowrap; }
td.reihenfolge button.klein-knopf { padding: 2px 7px; }
.tabelle-rahmen { overflow-x: auto; }

/* Vorgänge-Tafel: Kopf + Spalten je Status */
body.bereich-intern main { max-width: 1500px; }
.board-kopf .kacheln { margin-bottom: 12px; }
/* Kopf der Tafel: genau eine Kachel je Status-Spalte, Streifen in der Farbe des Status (Verwaltung → Vorgang-Status) */
.status-kacheln { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.status-kachel { font: inherit; font-size: 14px; text-align: left; cursor: pointer; border-top: 4px solid var(--st-farbe, var(--line)); }
.status-kachel:hover { border-color: var(--g); border-top-color: var(--st-farbe, var(--g)); }
.status-kachel.warn { border-top-color: var(--st-farbe, var(--rot-rand)); }
@media (max-width: 1000px) { .status-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .status-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.board { display: grid; grid-template-columns: repeat(6, minmax(200px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; max-width: 100%; }
.intern-inhalt { min-width: 0; max-width: 100%; }
.spalte { background: var(--grau); border: 2px solid transparent; border-radius: 8px; padding: 8px; min-height: 160px; transition: border-color .12s, background .12s; }
.spalte h2 { font-size: 14px; margin: 2px 4px 8px; display: flex; justify-content: space-between; gap: 6px; color: var(--g); }
.spalte .anzahl { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0 8px; font-size: 12px; color: var(--ink); }
.spalte .leer { margin: 4px; }
.board.zieht .spalte:not(.ziel-ok) { opacity: .55; }
.spalte.ziel-ok { border-color: var(--g); background: var(--ok-flaeche); }
.spalte.drueber { border-style: dashed; background: #d3ead8; }
.karten { display: flex; flex-direction: column; gap: 8px; }
/* Hintergrund je Status: --vk-farbe kommt aus status_farben (Verwaltung → Vorgang-Status), sonst weiß */
.vkarte { background: var(--vk-farbe, var(--card)); border: 1px solid var(--line); border-left: 4px solid var(--g); border-radius: 6px; padding: 8px 10px; font-size: 14px; }
.vkarte.art-kuendigung { border-left-color: var(--gold); }
.vkarte.beweglich { cursor: grab; }
.vkarte.beweglich:active { cursor: grabbing; }
.vkarte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.vkarte-kopf a { font-weight: 700; }
.vkarte-name { font-weight: 600; margin: 2px 0; }
.vkarte .status { margin-top: 4px; }
/* auf farbigem Grund: Nummer und Nebentext in Schriftfarbe statt Grün/Grau (sonst z. B. Grün auf Grün) */
.vkarte[style] .vkarte-kopf a, .vkarte[style] .leise { color: inherit; }
.vkarte[style] .leise { opacity: .85; }
.vkarte.dunkel, .vkarte.dunkel a, .vkarte.dunkel .leise { color: #fff; }
.vkarte.dunkel .marke { background: rgba(255, 255, 255, .85); }
.marke { font-size: 11.5px; color: var(--gold-text); background: var(--gold-flaeche); border-radius: 8px; padding: 1px 7px; }
.spalte .mehr { width: 100%; margin-top: 8px; }

/* Dialog für Eingaben */
dialog.dialog { border: 0; border-top: 6px solid var(--g); border-radius: 10px; padding: 20px; width: min(560px, calc(100vw - 32px)); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
dialog.dialog::backdrop { background: rgba(20, 40, 25, .45); }
dialog.dialog h2 { margin-top: 0; }
dialog.dialog > form > p.leise { white-space: pre-line; }   /* Zeilenumbrüche im Hinweistext (z. B. Vorschau des Imports) */
dialog.dialog input[type=color] { width: 64px; height: 40px; padding: 2px; cursor: pointer; }
dialog.dialog textarea, dialog.dialog select { width: 100%; font: inherit; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }

/* Benutzer */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--ok-flaeche); border: 1px solid #9cc7a5; border-radius: 12px; padding: 1px 4px 1px 9px; font-size: 13px; }
button.chip-x { border: 0; background: transparent; color: var(--mute); padding: 0 4px; font-size: 15px; line-height: 1; }
button.chip-x:hover { color: var(--rot-text); background: transparent; }
.knopfspalte { white-space: nowrap; text-align: right; }
.knopfspalte button { margin: 2px 0 2px 4px; }

/* Rollen & Rechte */
.matrix th.mitte, .matrix td.mitte { text-align: center; }
.matrix input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--g); }
.matrix tfoot td { border-bottom: 0; }

/* Texte */
.text-feld { border-bottom: 1px solid var(--line); padding: 4px 0 10px; }
.text-feld label { color: var(--ink); font-weight: 600; }
.text-feld .knopfreihe { margin-top: 6px; }
.text-feld .meldung { margin: 0; min-height: 0; }
/* Stammdaten → Mitglieder */
.m-suche { max-width: 360px; }
label.haken.m-aus { margin: 0; align-items: center; }
/* Logo eines Vereins in der Liste (Stammdaten → Verein) */
.vereinslogo { display: block; max-width: 96px; max-height: 48px; object-fit: contain; }
.farbpunkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 1px var(--line); }
/* Mitglieder: Auswertungen als waagrechte Balken (eine Reihe, Vereinsgrün), Blättern */
.auswertungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px 32px; }
.auswertung { margin: 0; }
.auswertung figcaption { font-weight: 600; margin-bottom: 8px; }
.balken-liste { display: flex; flex-direction: column; gap: 4px; }
.balken-zeile { display: grid; grid-template-columns: 170px minmax(0, 1fr) 72px; align-items: center; gap: 8px; font-size: 14px; padding: 2px 0; }
.balken-zeile:hover { background: var(--gold-flaeche); }
.balken-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balken-spur { display: block; height: 14px; border-left: 1px solid var(--line); }
.balken { display: block; height: 100%; min-width: 0; background: var(--g); border-radius: 0 4px 4px 0; }
.balken-zeile:hover .balken { filter: brightness(.85); }
.balken.alter-1 { background: var(--alter-1); } .balken.alter-2 { background: var(--alter-2); } .balken.alter-3 { background: var(--alter-3); } .balken.alter-4 { background: var(--alter-4); }
.balken.alter-5 { background: var(--alter-5); } .balken.alter-6 { background: var(--alter-6); } .balken.alter-7 { background: var(--alter-7); } .balken.alter-8 { background: var(--alter-8); }
.balken.ohne-angabe { background: var(--mute); }
.balken-wert { color: var(--mute); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.auswertung p { margin: 8px 0 0; }
.seitenleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: 14px; }
.seitenleiste .seitengroesse { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--mute); }
.seitenleiste select { width: auto; min-height: 0; padding: 4px 8px; }
.seitenknoepfe { display: flex; align-items: center; gap: 8px; margin-left: auto; }
@media print { .seitenleiste { display: none; } }
@media (max-width: 480px) { .balken-zeile { grid-template-columns: 120px minmax(0, 1fr) 64px; font-size: 13px; } .seitenknoepfe { margin-left: 0; } }
/* Farbfelder (Verwaltung → Vorgang-Status, Mitgliedsarten): Farbe mit Vorschau */
.farb-feld { display: grid; grid-template-columns: 160px auto minmax(120px, 260px); gap: 6px 16px; align-items: center; border-bottom: 1px solid var(--line); padding: 10px 0; }
.farb-feld label { margin: 0; color: var(--ink); font-weight: 600; }
.farb-eingabe { display: flex; gap: 8px; align-items: center; }
.farb-eingabe input:not([type=color]) { width: 110px; font-family: Consolas, monospace; }
.farb-eingabe input[type=color] { width: 44px; height: 38px; padding: 2px; flex: none; cursor: pointer; }
.farb-feld .meldung { grid-column: 2 / -1; margin: 0; min-height: 0; }
.farb-feld .meldung:empty { display: none; }
/* Vorschau einer Mitgliedsart: Balken wie in der Auswertung (Name steht schon links) */
.farb-feld .balken-zeile { grid-template-columns: minmax(0, 1fr) 72px; } .farb-feld .balken-zeile .balken-name { display: none; }
@media (max-width: 760px) { .farb-feld { grid-template-columns: minmax(0, 1fr); } .farb-feld .meldung { grid-column: auto; } }

@media (max-width: 700px) {
  .board { grid-template-columns: repeat(6, minmax(230px, 85vw)); }
  .knopfspalte { text-align: left; white-space: normal; }
}

/* Mitgliedsarten */
.tabelle tr.inaktiv td { color: var(--mute); }

/* Verwaltung → Prozess: Matrix Status × Rolle mit Kästchen und Pfeilen (intern-prozess.js) */
.pz-arten { display: flex; gap: 8px; flex-wrap: wrap; }
.pz-schalter { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; margin: 4px 0; font-weight: normal; }
.pz-schalter input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--g); }
.pz-hinweise { margin: 8px 0; padding: 8px 12px 8px 28px; background: var(--gold-flaeche); border-left: 4px solid var(--gold); border-radius: 6px; font-size: 14px; }
.pz-karte { padding: 8px; }
.pz-rahmen { overflow-x: auto; max-width: 100%; }
.prozess { position: relative; display: grid; grid-template-columns: 150px repeat(var(--spalten), minmax(150px, 1fr)); min-width: calc(150px + var(--spalten) * 150px); }
.pz-ecke, .pz-kopf { padding: 8px; font-weight: 600; font-size: 14px; color: var(--g); border-bottom: 2px solid var(--gold); }
.pz-ecke { color: var(--mute); font-weight: normal; }
.pz-rolle { padding: 10px 8px; font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; background: var(--gold-flaeche); }
.pz-zelle { min-height: 140px; padding: 26px 16px; border-bottom: 1px solid var(--line); border-left: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; }
.pz-zelle.drueber { background: var(--ok-flaeche); outline: 2px dashed var(--g); outline-offset: -4px; }
.prozess.zieht .pz-zelle:not(:has(.pbox)) { background: var(--ok-flaeche); }
button.pz-plus { opacity: .25; border: 1px dashed var(--mute); background: transparent; width: 36px; height: 36px; padding: 0; font-size: 20px; border-radius: 50%; }
.pz-zelle:hover button.pz-plus, button.pz-plus:focus-visible { opacity: 1; }
.pbox { position: relative; z-index: 4; width: 100%; max-width: 170px; background: var(--card); border: 2px solid var(--g); border-radius: 8px; padding: 6px 8px; font-size: 13.5px; cursor: grab; }
.pbox.quelle { box-shadow: 0 0 0 3px var(--gold); }
.prozess.verbindet .pbox:not(.quelle) { cursor: crosshair; }
.prozess.verbindet .pbox:not(.quelle):hover { background: var(--ok-flaeche); }
.pbox-titel { font-weight: 600; margin-bottom: 4px; overflow-wrap: anywhere; }
.pbox-fuss { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.pbox-knoepfe { margin-left: auto; white-space: nowrap; }
button.pz-anker { min-height: 0; padding: 0 6px; font-size: 15px; line-height: 20px; color: var(--g); border: 1px solid var(--g); border-radius: 10px; background: var(--card); cursor: crosshair; touch-action: none; }
.pz-svg { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: visible; }
.pz-bahn { fill: none; stroke-width: 2; }
.pz-temp { fill: none; stroke: var(--gold-text); stroke-width: 2; stroke-dasharray: 5 4; }
.pz-texte { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pbox:hover { z-index: 5; }
button.pz-text { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; min-height: 0; max-width: 150px; padding: 1px 6px; font-size: 11.5px; line-height: 1.3; border-radius: 9px; background: var(--card); border: 1px solid currentColor; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prozess.ohne-texte button.pz-text { max-width: 14px; height: 14px; padding: 0; color: transparent !important; border-radius: 50%; }
.pz-bahn.f-grau { stroke: var(--mute); } marker path.f-grau, .pz-punkt.f-grau { fill: var(--mute); background: var(--mute); } button.pz-text.f-grau { color: var(--mute); }
.pz-bahn.f-gold { stroke: var(--gold-text); } marker path.f-gold, .pz-punkt.f-gold { fill: var(--gold-text); background: var(--gold-text); } button.pz-text.f-gold { color: var(--gold-text); }
.pz-bahn.f-gruen { stroke: var(--g); } marker path.f-gruen, .pz-punkt.f-gruen { fill: var(--g); background: var(--g); } button.pz-text.f-gruen { color: var(--g); }
.pz-bahn.f-rot { stroke: var(--rot-text); } marker path.f-rot, .pz-punkt.f-rot { fill: var(--rot-text); background: var(--rot-text); } button.pz-text.f-rot { color: var(--rot-text); }
.pz-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
@media print { .pz-svg, .pz-texte { display: block !important; } }
.pz-anzahl { font-weight: 700; }
.tabelle tr.markiert td { background: var(--gold-flaeche); }

/* Verwaltung → Protokoll und Handbuch (Stufe 4) */
.tabelle.protokoll td { font-size: 14px; }
.aenderungen { margin: 0; padding-left: 16px; }
.aenderungen li { overflow-wrap: anywhere; }
.laeufe { margin: 4px 0; padding-left: 20px; font-size: 14px; }
.fehlertext { color: var(--rot-text); }
.handbuch h2 { margin-top: 24px; padding-top: 8px; border-top: 2px solid var(--gold); }
.handbuch li { margin: 4px 0; }
.inhalt-liste { background: var(--gold-flaeche); border-radius: 8px; padding: 8px 16px; display: inline-block; }
.inhalt-liste ol { margin: 4px 0; padding-left: 20px; }
@media print {
  .intern-nav, .intern-reiter, .inhalt-liste { display: none !important; }
  .intern { display: block; }
  .hb-kapitel { break-inside: avoid-page; }
}