/* Elternbeirat des GCE — gemeinsame Gestaltung
   Leitfarbe ist das Blau des Schullogos (#53C3FF). */

:root {
  --blau: #53C3FF;
  --blau-tief: #1f7fb8;
  --blau-blass: #eaf6ff;
  --dunkel: #0f2b3d;
  --grau: #5b6b74;
  --grau-hell: #8a99a2;
  --linie: #dce9f1;
  --flaeche: #ffffff;
  --hintergrund: #f4fafd;
  --gruen: #1c7c54;
  --gruen-blass: #e6f5ee;
  --rot: #b3261e;
  --rot-blass: #fdeceb;
  --gelb: #8a6100;
  --gelb-blass: #fff6e0;
  --radius: 14px;
  --schatten: 0 4px 18px rgba(20, 60, 90, .07);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--dunkel);
  background: var(--hintergrund);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blau-tief); }
a:hover { color: var(--dunkel); }

h1 { font-size: 1.9rem; line-height: 1.25; margin-bottom: .6rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin-bottom: .8rem; letter-spacing: -.005em; }
h3 { font-size: 1rem; margin: 1.4rem 0 .6rem; }
p { margin-bottom: .8rem; }

.marke {
  display: inline-block; font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--blau-tief); margin-bottom: .7rem;
}
.fuehrung { font-size: 1.06rem; color: var(--grau); margin-bottom: 1.4rem; }
.klein { font-size: .84rem; color: var(--grau); }
.gedaempft { color: var(--grau-hell); }
.leer { color: var(--grau-hell); font-style: italic; padding: .6rem 0; }
.nowrap { white-space: nowrap; }
.rechts { text-align: right; }
.voll { width: 100%; }

/* --- Kopf und Fuß (öffentlich) ------------------------------------------ */

.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf-innen {
  max-width: 1000px; margin: 0 auto; padding: 1rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.kopf-marke {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 700; color: var(--dunkel); text-decoration: none; font-size: .98rem;
}
/* Der Schriftzug führt zur Startseite — das darf man sehen. */
.kopf-marke:hover { color: var(--blau-tief); }
.kopf-marke:hover .kopf-punkt { box-shadow: 0 0 0 5px rgba(83, 195, 255, .32); }
.kopf-punkt {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--blau); flex: none;
  box-shadow: 0 0 0 4px rgba(83, 195, 255, .22);
  transition: box-shadow .15s;
}
.kopf-nav { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.kopf-nav a {
  color: var(--grau); text-decoration: none; font-size: .93rem; font-weight: 500;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.kopf-nav a:hover, .kopf-nav a.aktiv { color: var(--dunkel); border-bottom-color: var(--blau); }

/* Anmelden: graues Personensymbol ganz rechts, ohne Beschriftung. */
.kopf-nav a.kopf-login {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--linie); background: var(--flaeche);
  color: var(--grau-hell); padding: 0; margin-left: -.2rem;
  transition: color .15s, border-color .15s, background .15s;
}
.kopf-nav a.kopf-login svg { width: 20px; height: 20px; display: block; }
.kopf-nav a.kopf-login:hover, .kopf-nav a.kopf-login:focus-visible {
  color: var(--blau-tief); border-color: var(--blau); background: var(--blau-blass);
}
.kopf-nav a.kopf-login.aktiv {
  color: var(--blau-tief); border-color: var(--blau); background: var(--blau-blass);
}

/* Auf schmalen Schirmen rutscht die Navigation unter den Schriftzug. Das
   Anmelde-Symbol bleibt dann oben rechts neben dem Schriftzug stehen, statt in
   eine dritte Zeile zu fallen. */
@media (max-width: 560px) {
  .kopf-innen { position: relative; }
  .kopf-nav { width: 100%; gap: 1.1rem; }
  .kopf-nav a.kopf-login { position: absolute; top: .65rem; right: 1.5rem; margin: 0; }
}

/* Nur für Screenreader: Beschriftung zum Symbol. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.inhalt { max-width: 1000px; margin: 0 auto; padding: 2.6rem 1.5rem 3.5rem; }
.inhalt.schmal { max-width: 720px; }

.fuss { border-top: 1px solid var(--linie); background: var(--flaeche); margin-top: 2rem; }
/* Eine Zeile, links die Kontaktadresse, rechts die Verweise. Erst wenn es auf
   schmalen Geräten wirklich nicht mehr passt, rutscht die Navigation darunter
   — dafür bleibt `flex-wrap`. */
.fuss-innen {
  max-width: 1000px; margin: 0 auto; padding: 1.1rem 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  gap: .8rem 1.5rem; flex-wrap: wrap;
  font-size: .87rem; color: var(--grau);
}
.fuss-innen nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.fuss-kontakt { white-space: nowrap; }

/* --- Startseite ---------------------------------------------------------- */

.held {
  background: linear-gradient(155deg, #ffffff 0%, var(--blau-blass) 100%);
  border: 1px solid var(--linie); border-radius: 20px;
  padding: 2.8rem 2.2rem; margin-bottom: 2.5rem;
}
.held h1 { font-size: 2.3rem; }
.abschnitt { margin-bottom: 2.5rem; }
.hinweis-kasten {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.6rem 1.8rem;
}

.kachel-reihe {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.kachel {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.3rem;
  border-top: 3px solid var(--blau);
}
.kachel h3 { margin: .35rem 0 .5rem; font-size: 1.05rem; }
.kachel-datum { font-size: .8rem; font-weight: 700; color: var(--blau-tief); }
.kachel-ort, .kachel-frist { font-size: .86rem; color: var(--grau); margin-bottom: .5rem; }
.kachel p { font-size: .9rem; color: var(--grau); }

/* Terminübersicht: ein Termin je Zeile, untereinander. Links steht, wann und
   wo, in der Mitte, worum es geht, rechts der Weg zur Anmeldung. */
.termin-liste { display: grid; gap: 1rem; }
.termin {
  display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) auto;
  gap: 0 1.6rem; align-items: start;
}
.termin-was h3 { margin-top: 0; }
.termin-was p:last-child { margin-bottom: 0; }
.termin-wann .kachel-ort { margin: .3rem 0 0; }
.termin-aktion { align-self: center; }

@media (max-width: 780px) {
  .termin { grid-template-columns: 1fr; gap: .3rem 0; }
  .termin-aktion { justify-self: start; margin-top: .9rem; }
}

.text-block p { margin-bottom: 1rem; }
.text-block h2 { margin-top: 1.8rem; }

/* --- Leitworte, Projekte, Elternbeirat --------------------------------------- */

.leitwort-reihe {
  display: grid; gap: 1rem; margin: 2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.leitwort {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.5rem 1.4rem;
  border-top: 3px solid var(--blau);
}
.leitwort-wort {
  font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--blau-tief); font-variant: small-caps;
}
.leitwort-deutsch {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--grau-hell); font-weight: 700; margin-bottom: .7rem;
}
.leitwort p { font-size: .94rem; color: var(--grau); margin: 0; line-height: 1.6; }

.projekt-liste {
  list-style: none; display: grid; gap: .6rem; margin: 1.2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.projekt-liste li {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 10px; padding: .85rem 1rem;
  border-left: 3px solid var(--blau);
}
.projekt-liste strong { display: block; font-size: .96rem; margin-bottom: .15rem; }
.projekt-liste span { font-size: .87rem; color: var(--grau); }

.vorstand-liste {
  list-style: none; display: grid; gap: .5rem; margin: 1rem 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.vorstand-liste li {
  padding: .7rem .9rem; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 10px;
}
.vorstand-liste strong { display: block; font-size: .96rem; }
.vorstand-liste span { font-size: .85rem; color: var(--grau); }

.dokument-liste { list-style: none; display: grid; gap: .5rem; margin: 1rem 0; }
.dokument-liste a {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .8rem 1rem; border: 1px solid var(--linie); border-radius: 10px;
  background: var(--flaeche); text-decoration: none; color: var(--dunkel);
}
.dokument-liste a:hover { border-color: var(--blau); background: var(--blau-blass); }
.dokument-liste strong { color: var(--blau-tief); }
.dokument-liste span { font-size: .85rem; color: var(--grau); }

.schritt-liste { counter-reset: schritt; list-style: none; margin: 1rem 0 1.4rem; }
.schritt-liste li {
  counter-increment: schritt; position: relative;
  padding: 0 0 1rem 2.6rem; font-size: .95rem;
}
.schritt-liste li::before {
  content: counter(schritt); position: absolute; left: 0; top: -.1rem;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blau-blass); color: var(--blau-tief);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700;
}
.schritt-liste strong { display: block; }
.schritt-liste span { font-size: .89rem; color: var(--grau); }

.iban { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .02em; }

.fehler-liste { margin: .5rem 0 0 1.1rem; }
.fehler-liste li { margin-bottom: .25rem; }
em.pflicht { color: var(--rot); font-style: normal; margin-left: .15rem; }

/* Das Antragsformular ist lang — Abschnitte deutlich voneinander absetzen. */
#antrag h3 {
  margin: 1.8rem 0 .8rem; padding-top: 1.2rem;
  border-top: 1px solid var(--linie); font-size: 1.02rem; color: var(--blau-tief);
}
#antrag h3:first-of-type { border-top: none; padding-top: .4rem; }
#antrag [data-bankdaten][hidden] { display: none; }
#antrag input[name="iban"] { font-family: ui-monospace, Menlo, Consolas, monospace; }

.karte-mitte {
  max-width: 540px; margin: 12vh auto; background: var(--flaeche);
  border-radius: 18px; box-shadow: var(--schatten); padding: 2.8rem 2.4rem;
  text-align: center; border-top: 6px solid var(--blau);
}

/* --- Knöpfe -------------------------------------------------------------- */

.knopf {
  display: inline-block; background: var(--blau-tief); color: #fff;
  border: 1px solid var(--blau-tief); border-radius: 9px;
  padding: .6rem 1.15rem; font-size: .94rem; font-weight: 600;
  text-decoration: none; cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s;
}
.knopf:hover { background: #17698f; border-color: #17698f; color: #fff; }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
.knopf-leise { background: var(--flaeche); color: var(--dunkel); border-color: var(--linie); }
.knopf-leise:hover { background: var(--blau-blass); color: var(--dunkel); border-color: var(--blau); }
.knopf-warnung { background: var(--rot); border-color: var(--rot); }
.knopf-warnung:hover { background: #8f1e17; border-color: #8f1e17; }
.knopf-klein { padding: .38rem .8rem; font-size: .86rem; }
.knopf-voll { width: 100%; text-align: center; }
.knopf-reihe { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
/* Rueckmeldung neben dem Speichern-Knopf einer Nachrichtenvorlage. Die Kachel
   bleibt beim Speichern offen — dann braucht es hier ein sichtbares Zeichen,
   dass etwas geschehen ist. Leer nimmt sie keinen Platz weg. */
.vorlage-stand { font-size: .85rem; color: var(--gruen); }
.vorlage-stand:empty { display: none; }
.knopf-reihe form { display: inline; }

.verweis-knopf {
  background: none; border: none; color: var(--blau-tief); cursor: pointer;
  font: inherit; font-size: .87rem; padding: 0; text-decoration: underline;
}
.verweis-knopf:hover { color: var(--dunkel); }
.verweis-warnung { color: var(--rot); }

/* --- Hinweise ------------------------------------------------------------ */

.hinweis {
  border-radius: 10px; padding: .85rem 1.1rem; margin-bottom: 1.2rem;
  font-size: .92rem; border: 1px solid transparent;
}
.hinweis-erfolg { background: var(--gruen-blass); border-color: #bfe3d2; color: var(--gruen); }
.hinweis-fehler { background: var(--rot-blass); border-color: #f3c9c6; color: var(--rot); }
.hinweis-info { background: var(--blau-blass); border-color: #c5e5f8; color: var(--blau-tief); }
.hinweis-warnung { background: var(--gelb-blass); border-color: #f0dcae; color: var(--gelb); }
.hinweis a { color: inherit; font-weight: 600; }

/* --- Karten und Formulare ------------------------------------------------ */

.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.6rem 1.7rem; margin-bottom: 1.4rem;
  box-shadow: var(--schatten);
}
.karte-gedaempft { background: #fbfdfe; box-shadow: none; }
/* Ueberschrift einer Kachel mit einer Handlung daneben — der Stift an der
   Vorschau der Einladung. Die Ueberschrift behaelt ihre Groesse, das Symbol
   rueckt an den rechten Rand. */
.karte-kopfzeile { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; }
/* Der Versandbogen der Einladung steht in einer Spalte: Text, Vorschau,
   Empfaenger, Knopf. Nebeneinander wurden Vorschau und Empfaengerliste beide
   schmal — in der Kachel „Zur Sitzung einladen" ohnehin, die selbst nur eine
   Spalte der Sitzungsseite ist. */
.versand-stapel > .karte:last-of-type { margin-bottom: .9rem; }
.versand-fuss { align-items: center; gap: .8rem; margin-bottom: .4rem; }
.karte-kopfzeile h2 { margin-bottom: 0; }
.karte-kopfzeile > .symbol-knopf { margin-left: auto; flex: none; }
/* Haken, die ueber die ganze Breite des Formulars laufen — sie stehen unter
   der ersten Zeile und nicht in einer ihrer Spalten. */
.schalter-liste.schalter-breit { margin: .2rem 0 1rem; }
.schalter-liste.schalter-breit .schalter { max-width: none; }
/* Ein Feld, unter dem noch ein Hinweis steht: Er soll die Zeilenhoehe des
   Gitters nicht sprengen, sondern unter dem Feld weiterlaufen. */
.feld-mit-tipp .termin-vorschlag { display: block; margin-top: .35rem; }
/* Weisses Plus auf blauem Grund — die eine Handlung, die in der Kopfzeile
   einer Liste zaehlt: etwas hinzufuegen. */
.plus-knopf {
  margin-left: auto; flex: none; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--blau-tief); color: #fff;
  font-size: 1.05rem; line-height: 1; font-weight: 700;
  transition: background .15s;
}
.plus-knopf:hover { background: var(--dunkel); }
.plus-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
/* Dasselbe Plus, aber als schwebender Kreis unten rechts: die eine Handlung,
   fuer die man auf eine Uebersichtsseite kommt — etwas Neues anlegen. Es
   bleibt in Reichweite, auch wenn die Liste lang ist, statt oben ueber ihr zu
   stehen und mit dem ersten Scrollen zu verschwinden.

   Der Abstand nach unten nimmt die Systemleiste des Telefons mit, sonst liegt
   der Kreis unter der Bedienleiste von Safari. */
.schwebe-plus {
  position: fixed; z-index: 40;
  right: 1.25rem; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blau-tief); color: #fff; text-decoration: none;
  box-shadow: 0 6px 20px rgba(20, 60, 90, .3);
  transition: background .15s, box-shadow .15s;
}
/* Gezeichnet, nicht gesetzt: Ein „+" aus der Schrift steht in seiner Zeile
   nie genau mittig, und in einem Kreis sieht man das sofort. */
.schwebe-plus svg { width: 26px; height: 26px; display: block; }
.schwebe-plus:hover { background: var(--dunkel); box-shadow: 0 8px 24px rgba(20, 60, 90, .38); }
.schwebe-plus:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
@media print { .schwebe-plus { display: none; } }
/* Eine Zeile der Gaesteliste: die drei Felder nebeneinander, das rote Kreuz
   am rechten Rand auf Hoehe der Felder — unter dem Gitter sah es aus, als
   gehoerte es zur naechsten Zeile. */
/* Das rote Kreuz sass unter den Feldern, weil das Gitter darunter noch
   seinen Abstand zum naechsten Abschnitt mitbrachte. Der Abstand gehoert
   jetzt an die Zeile selbst; das Kreuz steht damit auf der Hoehe der
   Eingabefelder — der halbe Feldrand darunter macht es mittig. */
.gast-zeile {
  display: flex; align-items: flex-end; gap: .5rem; margin-bottom: 1rem;
}
.gast-zeile > .feld-gitter { flex: 1; min-width: 0; margin-bottom: 0; }
.gast-zeile > .gast-weg { flex: none; margin-bottom: .45rem; color: var(--rot); }
.gast-zeile > .gast-weg:hover { background: var(--rot-blass); color: var(--rot); }
/* Das Kreuz am Ende einer Teilnehmerzeile: rot und ohne Unterstrich — es
   ist eine Handlung, kein Verweis. */
.teilnehmer-weg {
  background: none; border: none; cursor: pointer; padding: .2rem .25rem;
  color: var(--rot); font-size: .95rem; line-height: 1;
  text-decoration: none; border-radius: 6px;
}
.teilnehmer-weg:hover { background: var(--rot-blass); }
/* Fuer Karten, an denen noch etwas zu tun ist. */
.karte-hervor { border-color: #f0d9a8; border-top: 3px solid var(--gelb); }

.formular { display: block; }
.feld-gitter {
  display: grid; gap: .9rem 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: 1rem;
}
.feld { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.feld-gitter .feld { margin-bottom: 0; }
.feld-voll { grid-column: 1 / -1; }
.feld-klein { max-width: 190px; }
.feld-label { font-size: .85rem; font-weight: 600; color: var(--dunkel); }
.feld-label em { color: var(--rot); font-style: normal; margin-left: .15rem; }
.feld-tipp { font-size: .79rem; color: var(--grau-hell); line-height: 1.45; }

/* Beschriftung mit „i“ daneben. Das „i“ steht ausserhalb des <label>, damit
   ein Klick darauf nicht ins Eingabefeld springt. */
.feld-kopf { display: flex; align-items: center; gap: .4rem; }

/* Die Blase haengt an der Beschriftungszeile, nicht am „i“: So beginnt sie
   buendig mit dem Feld und laeuft auf dem Telefon nicht aus dem Bild. */
.feld-kopf, .mit-info { position: relative; }

/* Das „i“ selbst und die Blase, die es aufklappt. Die Blase liegt absolut
   ueber dem Text und schiebt deshalb nichts auseinander. */
/* `details` bringt oben 1rem Abstand mit (siehe unten) — der gilt für
   aufklappbare Abschnitte, nicht für ein „i“ mitten in einer Zeile. */
.info-punkt {
  position: relative; display: inline-block; vertical-align: middle; margin: 0;
  cursor: help;
}
.info-punkt:focus { outline: none; }
/* In einer Überschrift zieht das „i“ als Inline-Block die Zeilenbox
   auseinander und hängt dann unter dem Text. Als Flexzeile steht es
   mittig daneben — dieselbe Bauart wie bei den Feldbeschriftungen. */
.mit-info { display: flex; align-items: center; gap: .35rem; }
/* Gebaut wie das „i“ im Antragsformular der Fakultät (studienzuschuesse):
   kursives Serifen-i in einem gefüllten Kreis mit hellem Rand — hier in Blau.
   Der Rand liegt farblich zwischen Füllung und Schrift, sonst wirkt der Kreis
   entweder zu hart oder er verschwindet. */
.info-zeichen {
  display: grid; place-items: center;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--blau-blass); color: var(--blau-tief);
  border: 1px solid #8fc0dd;
  font: italic 700 .78rem/1 Georgia, "Times New Roman", serif;
  user-select: none;
  transition: background .15s, color .15s, border-color .15s;
}

/* Das „i" ist gezeichnet (siehe INFO_I in lib/render.js): Das viewBox ist so
   hoch wie die Form selbst, deshalb setzt die Grid-Zentrierung sie genau in
   die Kreismitte. Mit einer Schriftglyphe ging das nicht auf — sie sitzt in
   ihrer Linienbox weder waagerecht noch senkrecht mittig, und jede Schrift
   verschiebt sie anders.

   Masse in `rem`: Die Form soll mit dem Kreis wachsen, nicht mit der
   Schriftgroesse des Knopfes, die hier ohnehin nichts mehr zu setzen hat. */
.info-zeichen > svg { width: .5rem; height: .74rem; display: block; }
.info-punkt:hover > .info-zeichen,
.info-punkt:focus > .info-zeichen {
  background: var(--blau-tief); color: #fff; border-color: var(--blau-tief);
}

/* Die Erklaerung erscheint beim Darueberfahren — ein Klick soll es nicht
   brauchen und tut auch nichts. Auf dem Telefon gibt es kein Darueberfahren;
   dort bringt ein Antippen den Punkt in den Fokus, und `:focus` zeigt die
   Blase ebenfalls.
   Die Breite richtet sich nach dem Text, nicht nach dem Kreis: `width: 100%`
   waeren die 1,15 rem des „i" — die Blase waere eine Spalte aus Buchstaben. */
.info-punkt:hover > .info-blase,
.info-punkt:focus > .info-blase {
  display: block;
}
.info-blase {
  display: none;
  /* Ueber dem „i", nicht darunter: Unter der Feldbeschriftung steht das Feld,
     das die Blase erklaert — dort legte sie sich genau auf das, worum es geht
     (Vorgabe vom 2026-08-24). Nach oben liegt der Abstand zwischen zwei
     Formularzeilen, da verdeckt sie nichts, was man gerade braucht. */
  position: absolute; z-index: 40; bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(26rem, 70vw);
  background: var(--dunkel); color: #fff;
  padding: .7rem .85rem; border-radius: 10px;
  font-size: .82rem; font-weight: 400; line-height: 1.5; text-align: left;
  box-shadow: 0 8px 24px rgba(15, 43, 61, .28);
}
/* Das Zipfelchen zeigt auf das „i" — sonst schwebt die Blase beziehungslos. */
.info-blase::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  margin-left: -5px; border: 5px solid transparent;
  border-top-color: var(--dunkel);
}

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="number"], input[type="search"], select, textarea {
  font-family: inherit; font-size: .94rem; color: var(--dunkel);
  border: 1px solid var(--linie); border-radius: 9px;
  padding: .52rem .7rem; background: #fff; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
/* Safari auf dem iPhone stellt Datum und Uhrzeit mittig in ihr Feld — als
   einzige Felder im Formular, die übrigen beginnen links. `text-align` allein
   greift dort nicht: Der Wert steckt in einem eigenen inneren Element, das
   nur über dieses Pseudoelement erreichbar ist. */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  text-align: left;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left;
}
/* Auf dem iPhone reicht das nicht: Der Wert sitzt dort in einem Kasten, der
   sich auf seine Breite zusammenzieht und in der Mitte des Feldes landet —
   `text-align` hat darin nichts auszurichten. Er muss die volle Breite
   bekommen, und die eingebaute Darstellung muss weichen. `-webkit-touch-
   callout` gibt es nur in Safari auf iOS: So bleibt das Kalendersymbol am
   Schreibtisch unangetastet. */
@supports (-webkit-touch-callout: none) {
  input[type="date"], input[type="time"], input[type="datetime-local"] {
    -webkit-appearance: none; appearance: none;
  }
  input[type="date"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value,
  input[type="datetime-local"]::-webkit-date-and-time-value {
    width: 100%; text-align: left;
  }
  /* Und weil `appearance: none` dem Feld zugleich seine eingebaute Hoehe
     nimmt, faellt ein *leeres* Datumsfeld auf dem iPhone flacher aus als
     seine Nachbarn — es hat dann keinen Inhalt, der es aufspannt. Die
     Mindesthoehe der Wertzeile haelt es auf einer Linie mit den uebrigen
     Feldern. */
  input[type="date"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value,
  input[type="datetime-local"]::-webkit-date-and-time-value {
    display: block; min-height: 1.45em;
  }
}

input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(83, 195, 255, .2);
}
input:disabled, select:disabled { background: #f4f7f9; color: var(--grau-hell); }
textarea { resize: vertical; line-height: 1.55; }

.schalter {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .8rem .9rem; border: 1px solid var(--linie); border-radius: 10px;
  margin-bottom: .6rem; cursor: pointer; background: #fff;
}
.schalter:hover { border-color: var(--blau); }
.schalter input { margin-top: .25rem; flex: none; width: 17px; height: 17px; accent-color: var(--blau-tief); }
.schalter span { display: block; font-size: .92rem; }
.schalter small { display: block; color: var(--grau); font-size: .83rem; margin-top: .12rem; }
/* Ein Schalter direkt unter einer Knopfreihe braucht Luft — sonst sieht er
   aus, als gehörte er noch zum Knopf darüber (etwa „Mehrere Antworten
   erlauben" unter „Antwortmöglichkeit hinzufügen"). */
.knopf-reihe + .schalter { margin-top: 1.5rem; }
.schalter-fest { background: #f7fafc; cursor: default; }
/* Ein Schalter ohne Kasten: Wo mehrere in einem Formular voller Felder stehen,
   sieht der Rahmen aus wie ein zweites Formular. Angeklickt wird trotzdem die
   ganze Zeile — das Label ist der Schalter. */
.schalter-schlicht {
  border-color: transparent; background: none; padding: .3rem .1rem;
  margin-bottom: .2rem;
}
.schalter-schlicht:hover { border-color: transparent; }
/* Der Text bleibt zurueckhaltend: Gelesen wird die Liste als Ganzes, und ein
   Dutzend fettgedruckter Zeilen untereinander schreit nur. Der Haken traegt
   die Aussage, nicht die Schrift. */
.schalter-schlicht > span { color: var(--grau); font-weight: 400; }
.schalter-schlicht > span strong { color: var(--dunkel); }
.schalter-schlicht:hover > span { color: var(--dunkel); }
.schalter-schlicht input:checked + span { color: var(--dunkel); }
.schalter-pflicht { border-color: #c5e5f8; background: var(--blau-blass); }
.schalter-liste { margin-bottom: 1rem; }

.inline-formular { display: inline-block; margin-left: .6rem; }

details { margin-top: 1rem; }
summary {
  cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--blau-tief);
  padding: .45rem 0;
}
summary:hover { color: var(--dunkel); }
details[open] summary { margin-bottom: .7rem; }

.kopier-feld { display: flex; gap: .5rem; margin-bottom: .6rem; }
.kopier-feld input { font-size: .8rem; font-family: ui-monospace, Menlo, Consolas, monospace; }

.feld-mit-knopf { display: flex; gap: .4rem; align-items: stretch; }
.feld-mit-knopf input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; }
.feld-mit-knopf .knopf { flex: none; white-space: nowrap; }

/* --- Definitionslisten und Tabellen -------------------------------------- */

.daten {
  display: grid; grid-template-columns: minmax(140px, auto) 1fr;
  gap: .45rem 1.2rem; margin-bottom: 1rem; font-size: .93rem;
}
.daten dt { color: var(--grau); }
.daten dd { color: var(--dunkel); }
.daten dd small { display: block; color: var(--grau-hell); font-size: .8rem; }
.daten-eng { max-width: 480px; margin-bottom: 1.4rem; }

.tabelle-huelle { overflow-x: auto; margin: 0 -.3rem 1rem; padding: 0 .3rem; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .89rem; }
.tabelle th {
  text-align: left; font-size: .77rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--grau); font-weight: 700;
  padding: .5rem .6rem; border-bottom: 2px solid var(--linie); white-space: nowrap;
}
/* Beträge stehen rechtsbündig — die Überschrift gehört über die letzte Ziffer,
   nicht an den linken Spaltenrand. Nötig als eigene Regel, weil `.tabelle th`
   oben eine Klasse mehr wiegt als `.rechts` allein. */
.tabelle th.rechts { text-align: right; }
.tabelle td { padding: .55rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle tbody tr:hover { background: #fafdff; }
.tabelle td.klein { font-size: .82rem; color: var(--grau); }
.tabelle a { text-decoration: none; }
.tabelle a:hover { text-decoration: underline; }
.tabelle .leer { text-align: center; padding: 1.6rem; }
.tabelle select { font-size: .82rem; padding: .25rem .4rem; }

.marker {
  display: inline-block; font-size: .72rem; font-weight: 700; padding: .12rem .5rem;
  border-radius: 20px; background: #eef3f6; color: var(--grau);
  margin-left: .3rem; white-space: nowrap;
}
.marker-aktiv { background: var(--gruen-blass); color: var(--gruen); }
.marker-gekuendigt, .marker-warnung { background: var(--gelb-blass); color: var(--gelb); }
.marker-ausgetreten, .marker-verstorben { background: #f0f3f5; color: var(--grau-hell); }
.marker-entwurf { background: #eef3f6; color: var(--grau); }
/* Ein Feld, das gerade nicht gebraucht wird — sichtbar, aber zurückgenommen.
   Etwa der Vorname, wenn der Datensatz eine Firma ist. */
.feld-gedaempft { opacity: .55; }
/* Neu aufgenommen — steht neben dem Status, nicht an seiner Stelle. */
.marker-neu { background: var(--blau-blass); color: var(--blau-tief); }
/* Eine laufende Abstimmung: das Einzige in der Beschlussliste, das noch
   eine Handlung verlangt — deshalb rot statt grau. */
.marker-laeuft { background: var(--rot-blass); color: var(--rot); }

.liste { list-style: none; }
.liste li { padding: .5rem 0; border-bottom: 1px solid var(--linie); font-size: .92rem; }
.liste li:last-child { border-bottom: none; }
.liste small { display: block; color: var(--grau); font-size: .82rem; }

.merkmal-liste { list-style: none; font-size: .9rem; margin-bottom: .8rem; }
.merkmal-liste li { padding: .3rem 0; display: flex; gap: .5rem; align-items: baseline; }
.merkmal-liste .ja { color: var(--gruen); font-weight: 700; }
.merkmal-liste .nein { color: var(--rot); font-weight: 700; }

.ergebnis-zeile { font-size: .89rem; color: var(--grau); margin-bottom: .8rem; }

/* --- Terminabstimmung ---------------------------------------------------- */

.tabelle-termine { text-align: center; }
.tabelle-termine th { text-align: center; font-size: .74rem; line-height: 1.3; }
.tabelle-termine th.beste { background: var(--gruen-blass); border-radius: 8px 8px 0 0; }
.tabelle-termine .spalte-name { text-align: left; min-width: 140px; font-weight: 600; }
.tabelle-termine .spalte-name small {
  display: block; font-weight: 400; color: var(--grau); font-size: .79rem;
}
.tabelle-termine .antwort { font-size: 1rem; font-weight: 700; }
.antwort-ja { background: var(--gruen-blass); color: var(--gruen); }
.antwort-vielleicht { background: var(--gelb-blass); color: var(--gelb); }
.antwort-nein { color: #cdd8de; }
.tabelle-termine .summe td { border-top: 2px solid var(--linie); background: #fafdff; }
.tabelle-termine .summe small { color: var(--grau); font-weight: 400; margin-left: .15rem; }

.termin-auswahl { display: grid; gap: .7rem; margin-bottom: 1rem; }
.termin-option { border: 1px solid var(--linie); border-radius: 10px; padding: .7rem .9rem; }
.termin-option legend { font-size: .88rem; font-weight: 600; padding: 0 .35rem; }
.wahl-reihe { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.wahl-reihe label { display: flex; align-items: center; gap: .35rem; cursor: pointer; font-size: .9rem; }
.wahl-reihe input { accent-color: var(--blau-tief); }

/* --- Interner Bereich ---------------------------------------------------- */

body.anmeldung { background: linear-gradient(160deg, #f5fbff 0%, #e4f3ff 100%); }
.anmelde-karte {
  max-width: 420px; margin: 10vh auto; background: var(--flaeche);
  border-radius: 18px; box-shadow: 0 12px 40px rgba(20, 60, 90, .13);
  padding: 2.4rem 2.2rem; border-top: 6px solid var(--blau);
}
.anmelde-karte h1 { font-size: 1.5rem; }
.anmelde-karte .formular { margin-top: 1.4rem; }
/* Fuer das Vergeben eines Passworts braucht es etwas mehr Platz. */
.anmelde-karte-breit { max-width: 540px; margin: 6vh auto; }
.mitte-formular { text-align: center; margin-top: 1rem; }

/* --- Passwort vergeben --------------------------------------------------- */

.pw-wahl { margin: 1.2rem 0 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.pw-option {
  display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--linie); border-radius: 12px; padding: .8rem .9rem;
  background: var(--flaeche);
}
.pw-option:hover { border-color: var(--blau); }
.pw-option:has(input:checked) { border-color: var(--blau-tief); background: var(--blau-blass); }
.pw-option input { margin-top: .3rem; flex: none; width: 17px; height: 17px; accent-color: var(--blau-tief); }
.pw-option strong { display: block; font-size: .95rem; }
.pw-option small { display: block; color: var(--grau); font-size: .83rem; margin-top: .15rem; }

.pw-vorschlag-feld { padding: 0 .3rem .4rem; }
.pw-vorschlag-feld input {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.02rem; letter-spacing: .02em; background: #f7fbfe;
}
.pw-eigenes-feld { padding: 0 .3rem; display: flex; flex-direction: column; gap: .5rem; }
.pw-eigenes-feld .feld { margin: 0; }

.pw-schwach { color: var(--rot); }
.pw-mittel { color: var(--gelb); }
.pw-gut { color: var(--gruen); }

.admin-huelle { display: flex; min-height: 100vh; }

.seitenleiste {
  width: 236px; flex: none; background: var(--flaeche);
  border-right: 1px solid var(--linie); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.seitenleiste-marke {
  display: flex; gap: .6rem; align-items: center;
  padding: 1.3rem 1.2rem; border-bottom: 1px solid var(--linie);
  font-weight: 700; font-size: .93rem; line-height: 1.25;
  /* Seit sie auf dem Telefon das Menue umschaltet, ist die Marke ein Knopf —
     aussehen soll sie wie zuvor. */
  width: 100%; background: none; border-top: 0; border-left: 0; border-right: 0;
  color: inherit; font-family: inherit; text-align: left; cursor: default;
}
.seitenleiste-marke small {
  display: block; font-weight: 500; color: var(--grau-hell); font-size: .76rem;
}
.seitenleiste-nav { padding: .8rem .7rem; flex: 1; overflow-y: auto; }
.seitenleiste-nav a {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .7rem; border-radius: 9px; margin-bottom: .15rem;
  color: var(--grau); text-decoration: none; font-size: .92rem; font-weight: 500;
}
.seitenleiste-nav a:hover { background: var(--blau-blass); color: var(--dunkel); }
.seitenleiste-nav a.aktiv { background: var(--blau-blass); color: var(--blau-tief); font-weight: 600; }
.seitenleiste-nav svg { width: 18px; height: 18px; flex: none; }
.seitenleiste-fuss {
  padding: 1rem 1.2rem; border-top: 1px solid var(--linie); font-size: .84rem;
}
.benutzer { margin-bottom: .5rem; }
.benutzer strong { display: block; font-size: .89rem; }
.benutzer small { color: var(--grau-hell); font-size: .78rem; word-break: break-all; }
.seitenleiste-fuss .klein { display: block; margin-top: .4rem; }

.admin-inhalt { flex: 1; padding: 1.8rem 2.2rem 3.5rem; max-width: 1100px; min-width: 0; }
.admin-inhalt-breit { max-width: none; }
.admin-kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.admin-kopf h1 { font-size: 1.6rem; margin-bottom: 0; }
.werkzeuge { display: flex; gap: .55rem; flex-wrap: wrap; }

.zahl-reihe {
  display: grid; gap: 1rem; margin-bottom: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.zahl-karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.15rem 1.3rem; box-shadow: var(--schatten);
}
.zahl-karte-flach { box-shadow: none; padding: .9rem 1rem; margin-bottom: .7rem; }
.zahl { font-size: 1.85rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.zahl-gruen { color: var(--gruen); }
.zahl-rot { color: var(--rot); }
.zahl-titel { font-size: .84rem; color: var(--grau); margin-top: .2rem; }
.zahl-zusatz { font-size: .78rem; color: var(--gelb); margin-top: .25rem; }
.zahl-verweis { text-decoration: none; display: block; }
.zahl-verweis:hover .zahl-karte { border-color: var(--blau); }

.spalten-zwei { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.spalten-haupt { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.seiten-spalte { position: sticky; top: 1.5rem; }

.filterleiste {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1rem;
}
.filterleiste input[type="search"] { flex: 1; min-width: 200px; }
.filterleiste select { width: auto; min-width: 130px; }
/* Das Suchfeld traegt jetzt ein Kreuz und steckt dafuer in einer Huelle —
   die Breite gehoert deshalb an die Huelle, nicht mehr ans Feld. */
.filterleiste .suchfeld { flex: 1 1 200px; }
/* In einer Kachel braucht die Filterzeile keinen eigenen Rahmen — die Kachel
   ist schon einer. Zwei Rahmen ineinander lassen die Felder eingesperrt
   wirken, obwohl jedes Feld ohnehin seinen eigenen mitbringt. */
.filterleiste-schlicht {
  background: none; border: none; border-radius: 0; padding: 0;
}

.mail-vorschau { border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
.mail-betreff {
  background: #f7fbfd; padding: .7rem 1rem; font-weight: 700; font-size: .95rem;
  border-bottom: 1px solid var(--linie);
}
.mail-inhalt { padding: 1.1rem 1.2rem; font-size: .93rem; }
.mail-inhalt h2 { font-size: 1.05rem; margin: 1rem 0 .5rem; }
.mail-inhalt ul { margin: .5rem 0 .8rem 1.2rem; }
.mail-fuss {
  padding: .8rem 1.2rem; border-top: 1px solid var(--linie);
  font-size: .78rem; color: var(--grau-hell); background: #fbfdfe;
}

code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em;
  background: #eef3f6; padding: .1rem .35rem; border-radius: 4px;
}

/* --- Sitzungen ----------------------------------------------------------- */

.ablauf {
  display: flex; list-style: none; gap: .3rem; margin-bottom: 1.5rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: .8rem 1rem; overflow-x: auto;
}
.ablauf li {
  display: flex; align-items: center; gap: .45rem; flex: none;
  font-size: .84rem; color: var(--grau-hell); padding-right: .5rem;
}
.ablauf li:not(:last-child)::after {
  content: ''; width: 18px; height: 1px; background: var(--linie); margin-left: .5rem;
}
.ablauf-punkt {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: #eef3f6; color: var(--grau-hell); font-size: .74rem; font-weight: 700;
}
.ablauf .erledigt { color: var(--gruen); }
.ablauf .erledigt .ablauf-punkt { background: var(--gruen-blass); color: var(--gruen); }
.ablauf .aktuell { color: var(--dunkel); font-weight: 600; }
.ablauf .aktuell .ablauf-punkt { background: var(--blau); color: #fff; }
/* Die Kurzfassung fuer schmale Schirme steht immer im Markup und zeigt sich
   erst dort (siehe Medienabfrage weiter unten). Der Selektor braucht dieselbe
   Staerke wie `.ablauf li` darueber — sonst gewinnt dessen `display: flex`,
   und am Schreibtisch stand die Kurzfassung doppelt vor der vollen Leiste. */
.ablauf .ablauf-kurz { display: none; }

.karte-schritt { border-top: 3px solid var(--blau); }

/* Der naechste Schritt sitzt im Fuss der Tagesordnung: erst die Lage in einem
   Satz, darunter die Aktionen nebeneinander. */
.schritt-fuss h3 { margin: 0 0 .5rem; font-size: .95rem; }
.schritt-reihe {
  display: flex; flex-wrap: wrap; gap: 1rem 1.8rem; align-items: flex-start;
}
.schritt-reihe > p { flex: 1 0 100%; margin: 0 0 .1rem; }
/* Der Erklaertext unter dem Knopf laeuft ueber die volle Breite: Auf 23rem
   beschnitten brach er nach vier Woertern um und stand als schmale Saeule
   neben viel leerem Platz (Vorgabe vom 2026-08-22). Der Knopf selbst ist
   inline und waechst dadurch nicht mit. */
.schritt-aktion { max-width: none; }
.schritt-aktion form { margin: 0; }
.schritt-aktion .klein { margin: .45rem 0 0; }
.karte-schritt .knopf-voll { margin-top: .3rem; }
.abstand { height: .8rem; }

/* Felder untereinander statt nebeneinander — fuer Auswahlfelder, deren
   Inhalt (etwa eine E-Mail-Adresse) sonst abgeschnitten wuerde. */
.feld-untereinander { display: block; }
.feld-untereinander > .feld { width: 100%; max-width: none; }

/* Aufklappbare Kachelkopfzeile — eine Zeile, Inhalt erst auf Klick. */
.karte-klapp { padding: 0; overflow: hidden; }
/* Kopfzeile einer Klappkarte: der breite Knopf klappt auf, das Stiftsymbol
   daneben oeffnet die Bearbeitung. Zwei Knoepfe nebeneinander statt
   ineinander — verschachtelte Knoepfe sind kein gueltiges HTML. */
.klapp-zeile { display: flex; align-items: center; }
.klapp-zeile .klapp-kopf { flex: 1; min-width: 0; }
.klapp-stift { flex: none; margin-right: 1.1rem; }
/* Stift oder Papierkorb rechts neben dem Kopf einer Klappkachel — etwa der
   Papierkorb an einer Sitzung im Protokollarchiv. Sie stehen ausserhalb des
   Knopfes, damit ein Klick darauf die Kachel nicht mit aufklappt. */
.klapp-werkzeuge {
  display: flex; align-items: center; gap: .1rem; flex: none;
  margin-right: .55rem;
}
.klapp-werkzeuge .inline-formular { display: inline-flex; margin: 0; }

.klapp-kopf {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  /* Waagerecht wie .karte, damit die Ueberschrift mit denen der uebrigen
     Kacheln auf einer Linie steht. */
  padding: 1.1rem 1.7rem; background: none; border: none; cursor: pointer;
  font: inherit; text-align: left; color: inherit;
}
.klapp-kopf:hover { background: #fafdff; }
.klapp-titel { font-weight: 700; font-size: 1.05rem; flex: none; }
.klapp-kurz {
  color: var(--grau); font-size: .89rem; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.klapp-pfeil { color: var(--grau-hell); flex: none; line-height: 0; }
/* Abstimmungsseite: Titel und Zusatz stehen zusammen, der Pfeil rechts. */
.umfrage-klapp .klapp-kurz { flex: 0 1 auto; }
.umfrage-klapp .klapp-pfeil { margin-left: auto; }
.klapp-pfeil svg { width: 18px; height: 18px; transition: transform .18s; }
.klapp-kopf.ist-offen .klapp-pfeil svg { transform: rotate(180deg); }
/* Nur der aufgeklappte Inhalt — die Kopfzeile ist ebenfalls ein div und bringt
   ihre Polsterung im Knopf schon mit. Ohne die Ausnahme bekäme sie die
   Polsterung ein zweites Mal und obendrein einen Strich über der
   Überschrift. */
.karte-klapp > div:not([hidden]):not(.klapp-zeile) {
  padding: 0 1.7rem 1.6rem; border-top: 1px solid var(--linie); padding-top: 1.2rem;
}

/* Ein Abschnitt, dessen Schritt im Ablauf oben abgehakt ist. Blau umrandet
   wie der Punkt in der Leiste; alles Offene behaelt den grauen Rahmen. */
.karte-erledigt { border-color: var(--blau); }

/* Tagesordnung: je Punkt eine Zeile */
.top-liste { border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
.top-zeile { border-bottom: 1px solid var(--linie); background: #fff; }
.top-zeile:last-child { border-bottom: none; }
.top-zeile.ist-offen { background: #fbfdfe; }
.top-kopf {
  display: flex; justify-content: space-between; gap: .8rem; align-items: center;
  padding: .7rem .9rem; cursor: pointer;
}
.top-kopf:hover { background: var(--blau-blass); }
.top-titel { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; min-width: 0; }
.top-titel strong { font-size: .96rem; }
.top-kopf small { color: var(--grau); font-weight: 400; font-size: .8rem; }
.top-nummer {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  color: var(--blau-tief); text-transform: uppercase; flex: none;
}
.top-werkzeuge { display: flex; gap: .25rem; flex: none; align-items: center; }
.top-werkzeuge form { display: inline; margin: 0; }
.top-werkzeuge .verweis-knopf {
  font-size: 1rem; text-decoration: none; line-height: 1; padding: .3rem;
  color: var(--grau-hell);
}
.top-werkzeuge .verweis-knopf:hover { color: var(--blau-tief); }
.top-werkzeuge button:disabled { color: #e2e9ee; cursor: default; }
.top-ansicht, .top-formularzeile {
  padding: .2rem 1rem 1rem 1rem; font-size: .93rem;
  border-top: 1px dashed var(--linie); margin: 0 .9rem;
}

/* --- Sitzung läuft: die Punkte sind aufgerufen -------------------------- */
/* Jeder Punkt ein eigener Block mit offenem Protokollfeld. Mehr Luft als in
   der schmalen Vorbereitungsliste — hier wird geschrieben, nicht überflogen. */

.top-liste-protokoll { border: none; border-radius: 0; overflow: visible; }
.top-liste-protokoll .top-zeile {
  border: 1px solid var(--linie); border-radius: 10px;
  margin-bottom: .9rem; overflow: hidden;
}
.top-liste-protokoll .top-zeile:last-child { margin-bottom: 0; }
/* Der Kopf schaltet hier nichts — also kein Hand-Zeiger und kein Hover. */
.top-aufgerufen > .top-kopf {
  cursor: default; background: #f7fbfe; border-bottom: 1px solid var(--linie);
}
.top-aufgerufen > .top-kopf:hover { background: #f7fbfe; }
.top-aufgerufen .top-titel strong { font-size: 1rem; }
.top-vorlage { padding: .6rem 1.1rem 0; }
.top-vorlage .antrag-kasten { margin-top: 0; }
.top-vorlage p:last-child { margin-bottom: 0; }
.top-protokollformular { padding: .9rem 1.1rem 1.1rem; }
.top-protokollformular .feld { margin-bottom: .7rem; }

/* --- Entscheidungen unter einem Punkt ----------------------------------- */
/* Ein Punkt kann mehrere tragen. Jede steht in einem eigenen, leicht
   abgesetzten Kasten — so bleibt sichtbar, wo eine aufhört und die nächste
   beginnt, auch wenn beide dieselben Felder haben. */

.top-beschluesse { padding: 0 1.1rem 1.1rem; }
.top-beschluesse > h4 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--grau); margin: .4rem 0 .6rem;
}
.top-beschluesse > h4 .klein { text-transform: none; letter-spacing: 0; }
.top-beschluss {
  border: 1px solid var(--linie); border-left: 3px solid var(--blau);
  border-radius: 0 10px 10px 0; padding: .8rem 1rem; margin-bottom: .7rem;
  background: #fbfdfe;
}
.top-beschluss-kopf {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .6rem;
}
.top-beschluss-nummer {
  font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  color: var(--blau-tief); text-transform: uppercase;
}
/* Wer den Antrag über den persönlichen Link eingebracht hat. */
.top-beschluss-von { font-size: .8rem; }
.top-beschluss-kopf form { margin-left: auto; }
.top-beschluss .feld { margin-bottom: .6rem; }
.top-formularzeile .top-beschluesse { padding: 0; }
.top-ansicht p { margin-bottom: .5rem; }
.top-formular { padding-top: .8rem; }
.top-gesperrt { opacity: .75; }

/* --- Unterlagen an Punkt und Entscheidung --------------------------------- */
/* Die Bueroklammer steht still in der Werkzeugreihe wie Stift und Papierkorb.
   Haengt etwas dran, traegt sie die Zahl — und wird dabei nicht bunt: Es ist
   ein Hinweis, keine Warnung. */
.dokument-knopf { position: relative; }
.dokument-knopf.hat-dokumente { color: var(--grau); }
.dokument-zahl {
  position: absolute; top: 0; right: -1px; line-height: 1;
  font-size: .62rem; font-weight: 700; color: var(--blau-tief);
  background: var(--blau-blass); border-radius: 6px; padding: .05rem .22rem;
}
.top-beschluss-kopf .dokument-knopf { margin-left: auto; }
/* Steht die Klammer schon rechts, braucht der Papierkorb daneben seinen
   eigenen Rand nicht mehr — sonst rutschte er in die naechste Zeile. */
.top-beschluss-kopf .dokument-knopf ~ form { margin-left: 0; }

/* Der Bereich klappt unter der Kopfzeile auf: erst was da ist, dann die
   Flaeche zum Hineinziehen. */
.dokument-bereich {
  border: 1px solid var(--linie); border-radius: 10px;
  padding: .8rem .9rem; margin: 0 0 .7rem; background: #fbfdfe;
}
.dokument-traeger { margin: 0; }
.dokument-liste { list-style: none; margin: 0 0 .7rem; padding: 0; }
.dokument-liste li {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  padding: .35rem 0; border-bottom: 1px solid var(--linie);
}
.dokument-liste li:last-child { border-bottom: none; }
.dokument-liste li > a { font-weight: 600; font-size: .92rem; }
.dokument-liste .dokument-weg { margin-left: auto; }
/* Dieselbe gestrichelte Flaeche wie in der Rubrik Dokumente, nur flacher —
   sie sitzt hier mitten in einer Liste und soll den Punkt nicht ueberragen. */
.dokument-ablage-eng { text-align: center; padding: 1rem .8rem; }
.dokument-ablage-eng .ablage-symbol { width: 26px; height: 26px; margin-bottom: .35rem; }
.dokument-ablage-eng .ablage-knoepfe { margin: .5rem 0 .4rem; }
.dokument-ablage-eng .feld-tipp { display: block; }
.top-neu-formular {
  border: 1px solid var(--linie); border-radius: 10px;
  padding: 1.1rem 1.2rem; margin-top: .8rem; background: #fbfdfe;
}

.antrag-kasten {
  background: var(--blau-blass); border-left: 3px solid var(--blau);
  border-radius: 0 8px 8px 0; padding: .7rem .9rem; margin: .5rem 0 .7rem;
  font-size: .93rem;
}
.antrag-gross { font-size: 1rem; padding: 1rem 1.1rem; }
.antrag-marke {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--blau-tief); margin-bottom: .25rem;
}

.to-liste { padding-left: 1.2rem; }
.to-liste li { margin-bottom: .8rem; font-size: .95rem; }
.to-liste small { display: block; color: var(--grau); font-size: .85rem; margin-top: .1rem; }

/* Beschlüsse in der Tagesordnung der persönlichen Seite (seit 2026-09-22):
   unter jedem Punkt die Anträge, die schon darunter stehen, und das Plättchen
   „Beschluss hinzufügen", das die Felder dafür aufklappt. */
.to-liste .antrag-kasten { margin: .45rem 0 .4rem; }
.antrag-titel { display: block; margin-bottom: .15rem; }
.to-liste small.antrag-von { margin-top: .3rem; }
.to-beschluss { margin: .45rem 0 0; }
.to-beschluss[open] > summary { margin-bottom: .6rem; }
.to-beschluss[open] > summary .plaettchen {
  color: var(--blau-tief); background: var(--blau-blass); border-color: var(--blau);
}
.to-beschluss-felder {
  border: 1px solid var(--linie); border-radius: 10px;
  padding: .9rem 1rem .8rem; background: #fbfdfe;
}
.to-beschluss-felder .knopf { margin-top: .2rem; }

.tabelle-teilnehmer td { padding: .45rem .35rem; font-size: .88rem; }
.tabelle-teilnehmer small { display: block; color: var(--grau); font-size: .79rem; }

/* --- Stand je Person im Teilnehmerkreis ---------------------------------- */
/* Links der Name, daneben sechs schmale Spalten mit je einem Kreis. Keine
   Linien zwischen den Zeilen: Sechs Punktreihen und dazu ein Liniengitter
   ergaeben ein Formular, in dem man nichts mehr findet. */
.tabelle-stand td, .tabelle-stand th { border-bottom: none; }
.tabelle-stand thead th {
  font-size: .7rem; color: var(--grau-hell); font-weight: 700;
  padding: .2rem .1rem; text-align: center;
}
.tabelle-stand .stand-name { width: 99%; padding-right: .5rem; }
.tabelle-stand .stand-zelle { width: 1.35rem; padding: .45rem .1rem; text-align: center; }
.stand-kreis {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  vertical-align: middle; border: 1.5px solid transparent;
}
.stand-ja { background: var(--gruen); }
.stand-nein { background: var(--rot); }
.stand-teils { background: #e8912a; }
/* Steht noch nicht an: leer, aber sichtbar — sonst sieht die Spalte aus,
   als fehlte dort etwas. */
.stand-offen { background: #fff; border-color: var(--blau); }
.stand-legende { margin-top: .2rem; }
.stand-legende ol { margin: 0 0 .6rem; padding-left: 1.4rem; font-size: .84rem; }
.stand-legende li { margin-bottom: .25rem; }
.stand-legende .stand-kreis { margin-right: .15rem; }

/* Merkposten: Stichwort in gedaempftem Blau, Erlaeuterung darunter. Statt
   einer Aufzaehlung mit Punkten — bei sieben Eintraegen zu je drei Zeilen
   traegt der Punkt nichts mehr bei, er zerhackt nur den Text. */
.merkposten { margin: 0 0 .9rem; }
.merkposten dt {
  color: var(--blau-tief); font-weight: 600; font-size: .92rem;
  margin-top: .9rem;
}
.merkposten dt:first-child { margin-top: 0; }
.merkposten dd {
  margin: .15rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--dunkel);
}

/* Quittung neben dem Speichern-Knopf: bestaetigt, ohne die Seite zu ruecken. */
.gespeichert-marke {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; font-weight: 600; color: var(--gruen);
  background: var(--gruen-blass); border-radius: 999px;
  padding: .25rem .6rem; margin-left: .1rem;
  transition: opacity .35s;
}
.gespeichert-marke::before { content: '\2713'; }
.gespeichert-marke.geht { opacity: 0; }
/* Dieselbe Quittung als Zeile — an einer Entscheidung, wo sie nicht neben
   den Knopf passt. Sie bleibt stehen, bis man sie wegnimmt. */
.gespeichert-zeile {
  display: flex; align-items: center; gap: .5rem;
  margin: .7rem 0 0; padding: .45rem .7rem;
  font-size: .86rem; font-weight: 600; color: var(--gruen);
  background: var(--gruen-blass); border-radius: 8px;
}
.gespeichert-zeile > span::before { content: '\2713'; margin-right: .35rem; }
.gespeichert-zu {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--gruen); font-size: .9rem; line-height: 1; padding: .2rem .3rem;
  border-radius: 6px;
}
.gespeichert-zu:hover { background: rgba(28, 124, 84, .12); }
.wahl-klein { font-size: .8rem; padding: .2rem .35rem; width: auto; min-width: 130px; }
.wahl-anwesend { background: var(--gruen-blass); color: var(--gruen); }
.wahl-entschuldigt { background: var(--gelb-blass); color: var(--gelb); }
.wahl-unentschuldigt { background: var(--rot-blass); color: var(--rot); }

.wahl-gross { display: grid; gap: .6rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.wahl-karte {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  border: 1px solid var(--linie); border-radius: 10px; padding: .9rem 1rem;
  background: #fff; transition: border-color .15s, background .15s;
}
.wahl-karte:hover { border-color: var(--blau); background: var(--blau-blass); }
.wahl-karte input { accent-color: var(--blau-tief); width: 18px; height: 18px; flex: none; }
.wahl-karte:has(input:checked) { border-color: var(--blau); background: var(--blau-blass); }

/* Eine schlichte Liste zum Ankreuzen: untereinander, ohne Kaesten. Beim Votum
   zum Protokoll stehen vier Moeglichkeiten zur Wahl — als Kacheln nebeneinander
   waren sie breiter als ihr Inhalt. */
.wahl-liste { display: flex; flex-direction: column; gap: .1rem; margin-bottom: 1rem; }
.wahl-zeile {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: .5rem .2rem; border-radius: 8px;
}
.wahl-zeile:hover { background: var(--blau-blass); }
.wahl-zeile input { accent-color: var(--blau-tief); width: 18px; height: 18px; flex: none; }
.wahl-zeile span { font-weight: 600; }

/* Die Quittung nach dem Votum: nur noch die Bestaetigung, mittig. */
.karte-quittung { text-align: center; padding: 2.6rem 1.6rem; }
.karte-quittung h1 { font-size: 1.35rem; margin: .2rem 0 .6rem; }
.karte-quittung .klein { margin: .2rem 0; }
.quittung-haken {
  font-size: 2.4rem; line-height: 1; color: var(--gruen); margin: 0 0 .4rem;
}

/* Die Entscheidung wird in der Sitzung mit einem Klick gesetzt — dieselben
   Plaettchen wie bei der Anwesenheit, nur in den Farben des Ergebnisses. */
.plaettchen-wahl.ist-aktiv.beschluss-angenommen {
  background: var(--gruen-blass); color: var(--gruen); border-color: var(--gruen);
}
.plaettchen-wahl.ist-aktiv.beschluss-abgelehnt {
  background: var(--rot-blass); color: var(--rot); border-color: var(--rot);
}
.plaettchen-wahl.ist-aktiv.beschluss-vertagt {
  background: var(--gelb-blass); color: var(--gelb); border-color: var(--gelb);
}

.feld-gitter-eng { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* --- Elternbeirat ------------------------------------------------------------ */

.zeile-inaktiv td { opacity: .6; }
.zeile-inaktiv strong { font-weight: 500; }
.zeile-gast td { background: #fbfdfe; }
.zeile-gast td:first-child { border-left: 3px solid var(--linie); padding-left: .5rem; }
[data-art-titel][hidden], [hidden] { display: none; }

.formular-eng .feld-gitter { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.formular-eng .knopf-reihe { margin-top: .6rem; }

/* Symbolknöpfe für Bearbeiten und Löschen — zurückhaltend grau, farbig erst
   beim Darüberfahren, damit die Liste ruhig bleibt. */
.symbol-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: .3rem; margin: 0 .1rem; cursor: pointer;
  color: var(--grau-hell); line-height: 0; border-radius: 7px;
  text-decoration: none; vertical-align: middle;
  transition: color .15s, background .15s;
}
a.symbol-knopf:hover { color: var(--blau-tief); }
.symbol-knopf svg { width: 17px; height: 17px; display: block; }
.symbol-knopf:hover { color: var(--blau-tief); background: var(--blau-blass); }
.symbol-knopf.symbol-warnung:hover { color: var(--rot); background: var(--rot-blass); }
/* Dauerhaft rot — dort, wo das Verwerfen die eigentliche Aktion der Zeile ist. */
.symbol-knopf.symbol-rot { color: var(--rot); }
.symbol-knopf.symbol-rot:hover { color: var(--rot); background: var(--rot-blass); }
.symbol-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }
.v-aktionen { white-space: nowrap; }
/* Die Pfeile zum Umsortieren gehoeren zu den Zeilenwerkzeugen und nicht zu
   den Verweisen: still grau wie Stift und Papierkorb, farbig erst beim
   Darueberfahren. */
.v-aktionen .verweis-knopf {
  color: var(--grau-hell); text-decoration: none; font-size: 1rem;
  padding: .3rem .2rem;
}
.v-aktionen .verweis-knopf:hover:not(:disabled) { color: var(--blau-tief); }
.v-aktionen .verweis-knopf:disabled { color: #e2e9ee; cursor: default; }
.v-aktionen form { display: inline-block; margin: 0; }

.tabelle-vorstand .v-formularzeile > td {
  background: #fbfdfe; padding: 1rem 1.1rem;
  border-bottom: 2px solid var(--linie);
}
.karte-schmal { max-width: 680px; }
.kachel-fuss { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--linie); }
/* Steht die Reihe unter einer Tabelle, bringt die letzte Tabellenzeile ihre
   Linie schon mit — `kachel-fuss` legte eine zweite dicht darunter. Hier
   also nur Abstand, die Trennung macht die Tabelle. */
.knopf-reihe-abgesetzt, .plaettchen-reihe.knopf-reihe-abgesetzt { margin-top: 1.3rem; }
/* Das aufgeklappte Formular in der Kachel zum Anlegen einer Kassenpruefung:
   Linie und Abstand trennen es vom Plaettchen darueber. */
.pruefung-neu-block {
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--linie);
}
/* Knopfreihe direkt unter der Seitenueberschrift statt rechts daneben. */
.kopf-knoepfe { margin-bottom: 1.4rem; }
.v-mobilhinweis { display: none; }

/* --- Mitgliederliste ----------------------------------------------------- */

/* --- Beschlusssammlung ---------------------------------------------------- */
/* Eine Zeile je Beschluss, keine zwei. Damit auch der laengste Titel die Zeile
   nicht sprengt, liegen die Spaltenbreiten fest (`table-layout: fixed`) und der
   Titel bekommt am Ende drei Punkte. Feste Breiten nimmt der Browser aus der
   **ersten** Zeile der Tabelle — sie stehen deshalb an den `th`, nicht an den
   `td`. Die zweite Spalte bekommt keine Breite: ihr bleibt der Rest. */
.tabelle-beschluesse { table-layout: fixed; }
.tabelle-beschluesse thead th:nth-child(1) { width: 6.5rem; }
.tabelle-beschluesse thead th:nth-child(3) { width: 7rem; }
/* Gerade so breit, dass das laengste Plaettchen („Abstimmung laeuft") hineinpasst
   — was uebrig bleibt, gehoert dem Titel. */
.tabelle-beschluesse thead th:nth-child(4) { width: 9.5rem; }

.tabelle-beschluesse .b-nummer { font-variant-numeric: tabular-nums; font-weight: 600; }
.tabelle-beschluesse .b-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabelle-beschluesse .b-herkunft { white-space: nowrap; }
.tabelle-beschluesse .b-ergebnis { white-space: nowrap; }

/* Der Satz, mit dem das Protokoll den Beschluss ausspricht — belegt, worauf
   sich die Einordnung stützt. */
.fundstelle {
  border-left: 3px solid var(--linie); padding: .2rem 0 .2rem .9rem;
  margin: .4rem 0 .8rem; color: var(--grau); font-style: italic; font-size: .92rem;
}

@media (max-width: 900px) {
  .tabelle-beschluesse .b-herkunft { display: none; }
  /* Ohne die Datumsspalte ist „Herkunft" die dritte Spalte. */
  .tabelle-beschluesse thead th:nth-child(3) { display: none; }
}

/* Zeilen, die zur Detailseite führen — dieselbe Rückmeldung wie bei den
   aufklappbaren Zeilen der Mitgliederliste. */
tr[data-verweis] { cursor: pointer; }
tr[data-verweis]:hover td { background: var(--blau-blass); }

.tabelle-mitglieder .m-zeile { cursor: pointer; }
.tabelle-mitglieder .m-zeile:hover td { background: var(--blau-blass); }
/* Elternbeiratsliste genauso: die ganze Zeile öffnet die Bearbeitung. */
.tabelle-vorstand .v-zeile { cursor: pointer; }
.tabelle-vorstand .v-zeile:hover td { background: var(--blau-blass); }
.tabelle-vorstand .v-zeile.ist-offen td { background: #f2f9fe; }
.tabelle-mitglieder tr.ist-offen td {
  background: var(--blau-blass); border-bottom-color: transparent;
}
.tabelle-mitglieder .m-formularzeile > td {
  background: #fbfdfe; padding: 1.1rem 1.2rem; border-bottom: 2px solid var(--linie);
}
.m-details {
  display: grid; gap: .4rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.m-details .daten { margin-bottom: 0; grid-template-columns: minmax(120px, auto) 1fr; }
.m-notiz { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--linie); }

/* --- Veranstaltungsliste -------------------------------------------------- */

/* Die Übersicht zeigt nur Termin, Titel und Referent; alles Weitere klappt
   unter der Zeile auf — wie in der Mitgliederliste. */
.tabelle-veranstaltungen .va-zeile { cursor: pointer; }
.tabelle-veranstaltungen .va-zeile:hover td { background: var(--blau-blass); }
.tabelle-veranstaltungen .va-zeile.ist-offen td {
  background: var(--blau-blass); border-bottom-color: transparent;
}
.tabelle-veranstaltungen .va-detailzeile > td {
  background: #fbfdfe; padding: 1.1rem 1.2rem; border-bottom: 2px solid var(--linie);
}
.va-mehr { margin-top: .8rem; }

/* --- Dokumente eines Mitglieds ------------------------------------------- */

/* Büroklammer in der Namensspalte: hinterlegtes Dokument auf einen Blick. */
.dokument-marke {
  display: inline-flex; vertical-align: -2px; margin-left: .35rem; color: var(--grau-hell);
}
.dokument-marke svg { width: 15px; height: 15px; }
.m-zeile:hover .dokument-marke { color: var(--blau-tief); }

/* Eigene Vorsilbe m-: ".dokument-liste" gehört oben schon der öffentlichen
   Liste der Vereinsunterlagen, die Namen dürfen sich nicht überschneiden. */
.m-dokument-liste { list-style: none; padding: 0; margin: 0 0 1rem; }
.m-dokument {
  padding: .7rem 0; border-bottom: 1px solid var(--linie);
}
.m-dokument:last-child { border-bottom: none; }
.m-dokument-kopf {
  display: flex; gap: 1rem; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap;
}
.m-dokument-titel a { font-weight: 600; }
.m-dokument-titel small { display: block; color: var(--grau); font-size: .82rem; }
.m-dokument-knoepfe { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.m-dokument-knoepfe form { display: inline; }

/* Vorschau: hoch genug für eine DIN-A4-Seite, ohne die Seite zu sprengen. */
.m-dokument-vorschau { margin-top: .8rem; }
.m-dokument-vorschau iframe {
  width: 100%; height: min(78vh, 900px); border: 1px solid var(--linie);
  border-radius: 8px; background: #f4f6f8;
}
.m-dokument-vorschau p { margin: .4rem 0 0; }

/* --- Vereinsregister ------------------------------------------------------ */
/* Eine Zeile je Eintragung, links die Nummer, die das Gericht vergeben hat.
   Eine angemeldete, noch nicht vollzogene Änderung hat noch keine — sie
   steht oben und ist am gelben Rand zu erkennen. */

.register-liste { list-style: none; display: grid; gap: .2rem; }
.register-eintrag {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--linie);
}
.register-eintrag:last-child { border-bottom: none; }
.register-nr {
  display: flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--blau-blass); color: var(--blau-tief);
  font-weight: 700; font-size: .95rem;
}
.register-offen .register-nr { background: var(--gelb-blass); color: var(--gelb); }
/* Kopfzeile einer einzelnen Eintragung: klappt die Einzelheiten auf. Die
   Kachelpolsterung von .klapp-kopf waere hier viel zu gross. */
.register-klapp { padding: .1rem 0; gap: .6rem; align-items: flex-start; }
.register-klapp:hover { background: none; }
.register-klapp:hover .register-kopf strong { text-decoration: underline; }
.register-kopfzeile { flex: 1; min-width: 0; }
.register-klapp .klapp-pfeil { margin-top: .15rem; }
.register-aktion { margin-top: .6rem; }
.register-kopf { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.register-kopf a { text-decoration: none; }
.register-kopf a:hover { text-decoration: underline; }
.register-daten { display: block; color: var(--grau); font-size: .82rem; }
/* Die abgekuerzte Ueberschrift gibt es nur auf dem Telefon (siehe unten). */
.register-kurz { display: none; }
.register-inhalt {
  margin: .5rem 0 0; font-size: .89rem; color: var(--dunkel);
  padding-left: .8rem; border-left: 2px solid var(--linie);
}
.register-dateien { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }

.marker-eingetragen { background: var(--gruen-blass); color: var(--gruen); }
.marker-angemeldet { background: var(--gelb-blass); color: var(--gelb); }

/* Der Wortlaut der Satzung: schmaler als der Rest, damit die Zeilen lesbar
   bleiben, und mit klaren Abständen vor jedem Paragrafen. */
.satzung-text .text-block { max-width: 62ch; margin-top: .8rem; }
.satzung-text h3 { margin: 1.6rem 0 .4rem; color: var(--blau-tief); }
.satzung-text h3:first-child { margin-top: .4rem; }

/* Auf dem Telefon steht in der Zeile allein die abgekuerzte Ueberschrift. Die
   Bezeichnung folgt dem Registerblatt („Aenderung in der Elternbeirat
   (Wiederwahl, neue Schriftfuehrerin)") und fuellt dort vier Zeilen; mit den
   beiden Marken und der Datumszeile kam eine einzelne Eintragung auf sieben.
   Alles Weggelassene steht eine Antippbewegung weiter. */
@media (max-width: 780px) {
  .register-kurz { display: block; font-size: .95rem; line-height: 1.35; }
  .register-kopf, .register-daten { display: none; }
}

@media (max-width: 640px) {
  .register-eintrag { grid-template-columns: 2rem 1fr; gap: .7rem; }
  .register-nr { width: 2rem; height: 2rem; font-size: .82rem; }
}

.filter-schalter {
  display: flex; align-items: center; gap: .4rem;
  font-size: .86rem; color: var(--grau); cursor: pointer; white-space: nowrap;
}
.filter-schalter input { width: 16px; height: 16px; accent-color: var(--blau-tief); }

/* --- Ein- und Austritte je Jahr ------------------------------------------ */

.bewegung {
  display: flex; gap: .5rem; align-items: flex-end;
  overflow-x: auto; padding: 1.2rem 0 0;
}
.bewegung-jahr { flex: 1 1 0; min-width: 46px; text-align: center; }
/* Die Balken reichen nur bis 88 % der Höhe — darüber steht der Wert, der
   sonst am oberen Rand abgeschnitten würde. */
.bewegung-balken {
  display: flex; gap: 3px; align-items: flex-end; justify-content: center;
  height: 124px; margin-bottom: .35rem;
}
.balken {
  width: 14px; border-radius: 4px 4px 0 0; min-height: 2px;
  position: relative; transition: opacity .15s;
}
.balken span {
  position: absolute; top: -1.05rem; left: 50%; transform: translateX(-50%);
  font-size: .68rem; color: var(--grau); font-weight: 600;
}
.balken-ein { background: var(--blau); }
.balken-aus { background: #f0c2be; }
.bewegung-jahr:hover .balken { opacity: .75; }
.bewegung-label { font-size: .74rem; color: var(--grau); }
.bewegung-bestand {
  font-size: .78rem; font-weight: 700; color: var(--dunkel);
  padding-top: .25rem; margin-top: .25rem; border-top: 1px solid var(--linie);
}
/* Jahre, für die sich der Bestand nicht rekonstruieren lässt — der Punkt hält
   die Zeile, ohne eine Zahl zu behaupten. */
.bewegung-bestand-leer { color: var(--grau-hell); font-weight: 400; }
.bewegung-legende {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  margin-top: 1rem; font-size: .8rem; color: var(--grau);
}
.punkt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .3rem; }
.punkt-ein { background: var(--blau); }
.punkt-aus { background: #f0c2be; }

/* --- Rechteebenen -------------------------------------------------------- */

.rolle-marke {
  display: inline-block; margin-top: .3rem; padding: .1rem .45rem;
  background: var(--blau-blass); color: var(--blau-tief);
  border-radius: 20px; font-size: .72rem; font-weight: 700;
}
.ebenen {
  display: grid; gap: 1rem; margin-top: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ebene {
  border: 1px solid var(--linie); border-radius: 10px;
  padding: 1.1rem 1.2rem; background: #fdfeff; position: relative;
}
.ebene-master { border-color: var(--blau); background: var(--blau-blass); }
.ebene-nummer {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blau); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700; margin-bottom: .6rem;
}
.ebene h3 { margin: 0 0 .4rem; font-size: 1rem; }
.ebene p { font-size: .89rem; color: var(--grau); margin: 0; line-height: 1.55; }

/* Anmeldungen im Mitgliederbereich */
.termin-liste { list-style: none; }
.termin-liste li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; padding: .8rem 0; border-bottom: 1px solid var(--linie);
}
.termin-liste li:last-child { border-bottom: none; }
.anhang-zeile { margin: -.4rem 0 1.2rem; }

/* --- Finanzen: Kontoauszug ----------------------------------------------- */
/* Nachempfunden dem gewohnten Bild des Online-Bankings: Saldo oben, darunter
   die Umsätze nach Monat und Tag gegliedert, Betrag rechts. */

.konto-kopf { border-top: 3px solid var(--blau); }
.konto-marke {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blau-tief);
}
.konto-saldo {
  font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em;
  margin: .35rem 0 .1rem; font-variant-numeric: tabular-nums;
}
.konto-saldo.plus { color: var(--gruen); }
.konto-saldo.minus { color: var(--rot); }
.konto-zeitraum { color: var(--grau); font-size: .86rem; }
/* Worauf sich die vier Zahlen darunter beziehen — einmal ueber der Reihe
   statt als Zusatz an jeder einzelnen Beschriftung. */
.konto-abschnitt {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--linie);
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--grau);
}
.konto-zahlen {
  display: flex; flex-wrap: wrap; gap: 1.8rem;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--linie);
}
/* Steht der Zeitraum darueber, bringt er den Strich schon mit. */
.konto-abschnitt + .konto-zahlen {
  margin-top: .7rem; padding-top: 0; border-top: none;
}
.konto-zahlen strong { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.konto-zahlen .plus { color: var(--gruen); }
.konto-zahlen .minus { color: var(--rot); }
.konto-label {
  display: block; font-size: .78rem; color: var(--grau);
  text-transform: uppercase; letter-spacing: .05em;
}

/* Zwei Spalten fuer die ganze Liste: die linke nimmt den Platz, der bleibt,
   die rechte den Betrag. Die Buchungen greifen per `subgrid` auf dieselben
   Spalten zu — dadurch stehen alle Betraege untereinander.

   Die Zeilen laufen ueber die volle Breite der Kachel: Eine Kachel in der
   Kachel, die auf halber Strecke aufhoert, sieht aus wie ein Fehler. */
.umsatzliste {
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: .45rem 1.6rem;
}
.umsatz-monat { grid-column: 1 / -1; }

.umsatz-monat {
  font-size: .95rem; color: var(--grau); margin: 1.4rem 0 .1rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--linie);
}
.umsatzliste .umsatz-monat:first-child { margin-top: 0; }
/* Tageszeile: links das Datum, rechts der Kontostand am Abend dieses Tages.
   Er stand frueher hinter jeder einzelnen Buchung — an einem Tag mit einem
   Dutzend Buchungen ein Dutzend Zahlen, von denen nur die letzte etwas sagt. */
.umsatz-tag {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: .82rem; font-weight: 600; color: var(--grau);
  padding: .55rem 0 .1rem;
}
.umsatz-tagesstand {
  font-weight: 400; color: var(--grau-hell);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Jede Buchung eine eigene Kachel — und zugleich der Weg zu ihren Nachweisen:
   Die Zeile ist ein Verweis, der den Bereich darunter aufklappt. Sie liegt
   leicht blau auf der weissen Kachel: Weiss auf Weiss liessen sich die
   Buchungen kaum von Tagesdatum und Kontostand daneben abheben. */
.umsatz-zeile {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid;
  align-items: baseline; gap: 1.6rem;
  padding: .7rem .95rem;
  background: #eff8ff; border: 1px solid var(--linie);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s, background .15s;
  color: inherit; text-decoration: none; cursor: pointer;
}
.umsatz-zeile:hover {
  border-color: var(--blau); box-shadow: var(--schatten); background: var(--blau-blass);
}
.umsatz-zeile:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
/* Eine Datei schwebt ueber der Zeile: Loslassen legt sie als Beleg ab. Etwas
   kraeftiger als der Ruhezustand, sonst ginge das Angebot darin unter. */
.umsatz-zeile.ist-bereit {
  border-color: var(--blau); border-style: dashed; background: #dff0fb;
}
/* Aufgeklappt waechst die Zeile mit dem Bereich darunter zusammen. */
.umsatz-zeile.ist-offen {
  border-color: var(--blau);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}

.umsatz-text { min-width: 0; }
.umsatz-name { font-weight: 600; font-size: .95rem; }
/* Die Erlaeuterung steht hinter dem Namen, nicht darunter. */
.umsatz-zweck {
  color: var(--grau); font-size: .87rem; margin-left: .5rem;
  overflow-wrap: anywhere;
}
/* Was zu der Buchung hinterlegt ist — nur da, wo etwas hinterlegt ist. */
.umsatz-marken { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin-left: .5rem; }
.umsatz-marke {
  /* Etwas kraeftiger als die blau hinterlegte Zeile, sonst verschwaemme das
     Merkmal („1 Beleg", „weitergereicht") mit seinem Untergrund. */
  font-size: .74rem; color: var(--grau); background: #e2edf5;
  border-radius: 999px; padding: .05rem .5rem; white-space: nowrap;
}
.umsatz-betrag {
  font-weight: 700; font-size: 1rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; text-align: right;
}
.umsatz-betrag.plus { color: var(--gruen); }
.umsatz-betrag.minus { color: var(--rot); }

/* Der Bereich unter einer Buchung: Rechnungen, Belege, Entscheidungen und
   die Verbindung zu einer weitergereichten Zweckspende. Er schliesst
   unmittelbar an die Zeile an — deshalb der negative Abstand gegen die
   Zeilenluecke des Rasters. */
.umsatz-nachweise {
  grid-column: 1 / -1;
  margin-top: -.45rem;
  padding: 1.1rem 1.1rem 1.2rem;
  /* Derselbe Ton wie die Zeile darueber — aufgeklappt ist beides ein Block. */
  background: #eff8ff;
  border: 1px solid var(--blau); border-top: none;
  border-radius: 0 0 10px 10px;
}
/* Auf der eigenen Seite der Buchung steht der Bereich fuer sich. */
.umsatz-nachweise-seite {
  margin-top: 0; padding: 0; background: none; border: none;
}
.nachweis-block { margin-bottom: 1.3rem; }
.nachweis-block:last-child { margin-bottom: 0; }
.nachweis-titel {
  font-size: .78rem; color: var(--grau); text-transform: uppercase;
  letter-spacing: .05em; margin: 0 0 .5rem;
}
.nachweis-liste { list-style: none; margin: 0 0 .7rem; padding: 0; }
.nachweis-liste li {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  padding: .4rem 0; border-bottom: 1px solid var(--linie);
}
.nachweis-liste li:last-child { border-bottom: none; }
.nachweis-liste li > a { font-weight: 600; font-size: .92rem; }
.nachweis-liste .inline-formular { margin-left: auto; }
.nachweis-form { margin: 0; }
.nachweis-waehlen { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.nachweis-waehlen select { width: auto; max-width: 100%; flex: 1; min-width: 220px; }
.nachweis-block .datei-ablage-feld { margin: 0; }
.nachweis-block .feld-eng { width: auto; }
/* Eine Datei schwebt ueber dem offenen Bereich, aber neben der Ablage:
   Loslassen legt sie trotzdem zu dieser Buchung. */
.umsatz-nachweise.ist-bereit { background: var(--blau-blass); }

/* Die Belege sind nummeriert — bei drei Rechnungen an einer Buchung will man
   sagen koennen, welche gemeint ist. Rechts die beiden Zeilenaktionen, das
   Formular zum Stift klappt darunter ueber die volle Breite auf. */
.nachweis-nummer { color: var(--grau); font-variant-numeric: tabular-nums; flex: none; }
.nachweis-taten { margin-left: auto; display: flex; align-items: center; gap: .1rem; }
.nachweis-taten .inline-formular { margin-left: 0; }
.nachweis-formular { flex: 0 0 100%; margin-top: .6rem; }
.nachweis-formular .feld-tipp { display: block; margin: .3rem 0 0; }

/* Ist nichts hinterlegt, steht das auch so da — kursiv und in Grau, damit es
   als Zustand lesbar ist und nicht als Eintrag. */
.nachweis-leer { margin: 0; color: var(--grau); font-style: italic; font-size: .92rem; }

/* Die drei Wege als Plaettchen am Fuss der Kachel. Sie stehen unter einer
   Trennlinie: oben was hinterlegt ist, unten was man tun kann. */
.nachweis-fuss {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--linie);
}
.plaettchen {
  display: inline-flex; align-items: center; gap: .38rem;
  font: inherit; font-size: .82rem; font-weight: 600; line-height: 1.35;
  color: var(--grau); background: #eef5f9;
  border: 1px solid transparent; border-radius: 999px;
  padding: .36rem .85rem .36rem .68rem; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.plaettchen svg { width: 14px; height: 14px; flex: none; opacity: .75; }
/* Auch als Verweis ein Plaettchen: ohne Unterstrich wie seine Nachbarn. */
a.plaettchen { text-decoration: none; }
.plaettchen:hover {
  color: var(--blau-tief); background: var(--blau-blass);
  border-color: #cfe6f5; box-shadow: var(--schatten);
}
.plaettchen:hover svg { opacity: 1; }
.plaettchen:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.plaettchen.ist-offen {
  color: var(--blau-tief); background: var(--blau-blass); border-color: var(--blau);
}
.plaettchen.ist-offen svg { opacity: 1; }
/* Ein Plaettchen, das nur berichtet: „Versendet am …". Es sieht aus wie die
   anderen, laesst sich aber nicht druecken — deshalb kein Hoverspiel. */
.plaettchen-still {
  background: var(--gruen-blass); color: var(--gruen); cursor: default;
}
.plaettchen-still:hover {
  background: var(--gruen-blass); color: var(--gruen);
  border-color: transparent; box-shadow: none;
}
/* Ein Plaettchen, dessen Sache vorbei ist — ein abgelaufenes Pruefjahr etwa.
   Es bleibt stehen, damit man sieht, dass es die Zuteilung gab; grau statt
   gruen sagt, dass sie nicht mehr traegt. */
.plaettchen-aus, .plaettchen-aus:hover {
  background: var(--blau-blass); color: var(--grau);
}
/* Die Taten am Ende einer Zeile stehen auf einer Linie, auch wenn eine davon
   in einem Formular steckt (Versand, Loeschen). */
.zeilen-plaettchen { display: inline-flex; align-items: center; gap: .35rem; }

/* Eine Tabellenzeile, die auf ihre eigene Seite fuehrt. Der Stift rechts ist
   der sichtbare Weg dorthin — die ganze Zeile tut dasselbe. */
.tabelle .klick-zeile { cursor: pointer; }
.tabelle .klick-zeile:hover td { background: var(--blau-blass); }
.tabelle .klick-zeile .symbol-knopf { color: var(--grau-hell); }
.tabelle .klick-zeile:hover .symbol-knopf { color: var(--blau-tief); }

/* Anfangs- und Endbestand stehen in der Umsatzliste selbst: oben, wo das Jahr
   endet, unten, wo es anfaengt. */
.bestand-zeile > td {
  background: #eff8ff; border-bottom: 1px solid var(--linie);
  font-variant-numeric: tabular-nums;
}

/* Der Prüfvermerk unter einer Buchung. */
.pruef-vermerk { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--linie); }
.pruef-vermerk .formular { margin: 0; }
.pruef-vermerk [data-vermerk-feld] { margin-top: .7rem; }

/* Die Angaben des gewaehlten Mitglieds unter der Auswahl: keine Eingabe,
   sondern was aus dem Bestand in die Bestaetigung wandert. */
.mitglied-daten {
  background: #eff8ff; border: 1px solid var(--linie); border-radius: 10px;
  padding: .7rem .9rem;
}
.mitglied-daten .daten { margin: .35rem 0 0; font-size: .88rem; gap: .25rem 1rem; }

/* Die Zeile einer Zuwendungsbestaetigung klappt auf und zeigt, was in ihr
   steht — nur zum Nachsehen. Geaendert wird an einer ausgestellten
   Bestaetigung nichts, deshalb stehen dort keine Felder, sondern Angaben. */
.tabelle-zuwendungen .z-zeile { cursor: pointer; }
.tabelle-zuwendungen .z-zeile:hover td { background: var(--blau-blass); }
.tabelle-zuwendungen .z-zeile.ist-offen td {
  background: var(--blau-blass); border-bottom-color: transparent;
}
.tabelle-zuwendungen .z-detailzeile > td {
  background: #fbfdfe; padding: 1.1rem 1.2rem; border-bottom: 2px solid var(--linie);
}
.tabelle-zuwendungen .z-detailzeile .daten { margin-bottom: .6rem; }
.tabelle-zuwendungen .z-detailzeile p { margin: 0; }
.nachweis-ausklapp { margin-top: .8rem; }

/* Kopfzeile einer Kachel, die statt eines einzigen Klappknopfes drei Wege
   anbietet: links Titel und Kurzfassung, rechts die Plaettchen. Zugeklappt
   ist das eine Zeile — offen steht immer nur einer der drei Bereiche. */
.klapp-zeile-plaettchen {
  flex-wrap: wrap; gap: .5rem .9rem; padding: 1.1rem 1.7rem;
}
.kachel-kopf-still {
  display: flex; align-items: baseline; gap: .8rem; flex: 1; min-width: 0;
}
.kachel-kopf-still .klapp-kurz { flex: 0 1 auto; }
.plaettchen-reihe { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Der Fuß eines Tagesordnungspunktes in der Vorbereitung: speichern,
   abbrechen, Entscheidung hinzufügen — unter einer Trennlinie, damit die
   Wege am Ende des Punktes stehen und nicht zwischen seinen Feldern. */
.top-plaettchen { align-items: center; margin-top: .8rem; }
.top-plaettchen .inline-formular { display: inline-flex; }
/* In der laufenden Sitzung stehen die Plaettchen unter dem offenen
   Protokollfeld: eingerueckt wie dieses und mit Luft nach unten. */
.top-plaettchen-offen { padding: 0 1.1rem 1.1rem; margin-top: .2rem; }

/* Steht die Anmerkung zur Entscheidung offen, ist ihr Plaettchen ueberfluessig:
   Zurueck geht es ueber das rote Kreuz am Feld, das den Text auch loescht. */
.plaettchen-anmerkung.ist-offen { display: none; }
.feld-kreuz { margin-left: .4rem; vertical-align: -3px; }
.feld-kreuz svg { width: 13px; height: 13px; }

/* Das „erledigt" in der Kopfzeile einer abgeschlossenen Schrittkachel. */
.plaettchen-mini {
  font-size: .72rem; padding: .18rem .55rem; flex: none;
}

/* Eine Unterkachel im Stil eines Tagesordnungspunktes: Kopfzeile, Rahmen,
   Inhalt mit derselben Polsterung wie das Protokollfeld. */
.unterkachel-inhalt { padding: .9rem 1.1rem 1.1rem; }

/* Eine Tabelle, die nur berichtet — enger als die Listentabellen. */
.tabelle-eng td { padding: .35rem .6rem; }

/* Ein Ausklapper im Formular der persoenlichen Seite (ohne Skript). */
.ausklapp { margin: .2rem 0 1rem; }
/* Die Teilnehmerseite laedt kein Skript — aufgeklappt wird dort mit
   `details`. Aussehen soll die Zeile trotzdem wie die Plaettchen der
   Verwaltung: Sie klappt etwas auf, sie fuehrt nirgendwohin. Dafuer muss das
   eingebaute Dreieck weichen, in allen drei Schreibweisen, die es dafuer
   gibt. */
.ausklapp-plaettchen > summary { list-style: none; padding: 0; }
.ausklapp-plaettchen > summary::-webkit-details-marker { display: none; }
.ausklapp-plaettchen > summary::marker { content: ''; }
.ausklapp-plaettchen[open] > summary { margin-bottom: .8rem; }

/* Aufgaben unter einem Tagesordnungspunkt: eine Zeile je Aufgabe, vorn der
   Haken zum Abhaken, hinten das Kreuz zum Entfernen. */
.top-aufgaben { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linie); }
.top-aufgaben h4 { font-size: .78rem; color: var(--grau); text-transform: uppercase;
  letter-spacing: .05em; margin: 0 0 .5rem; }
.aufgaben-liste { list-style: none; margin: 0 0 .7rem; padding: 0; }
.aufgabe {
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
  padding: .4rem 0; border-bottom: 1px solid var(--linie);
}
.aufgabe:last-child { border-bottom: none; }
.aufgabe-text { font-weight: 600; font-size: .93rem; }
.aufgabe.ist-erledigt .aufgabe-text { text-decoration: line-through; color: var(--grau); }
.aufgabe .inline-formular { display: inline-flex; }
.aufgabe-haken {
  background: none; border: none; cursor: pointer; font-size: 1.05rem;
  line-height: 1; color: var(--grau); padding: 0;
}
.aufgabe-haken:hover { color: var(--blau-tief); }
.aufgabe .symbol-knopf { margin-left: auto; }
/* Das Formular zum Aendern haengt unter der Zeile — in der umbrechenden
   Flexzeile bekommt es die volle Breite und rutscht damit unter den Text. */
.aufgabe-formular {
  flex-basis: 100%; margin: .5rem 0 .2rem; padding: .7rem .8rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.aufgabe-formular .formular { margin: 0; }

/* Der erste Handgriff der Sitzung: Wer ist da? Name links, Auswahl rechts —
   auf schmalen Schirmen untereinander. */
.anwesenheit-pruefung { margin-bottom: 1.2rem; }
.anwesenheit-liste { list-style: none; margin: .4rem 0 .8rem; padding: 0; }
.anwesenheit-liste li {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
  padding: .35rem 0; border-bottom: 1px solid var(--linie);
}
.anwesenheit-liste li:last-child { border-bottom: none; }
.anwesenheit-name { font-weight: 600; font-size: .93rem; }
/* Drei Plaettchen je Person: ein Klick genuegt, das gesetzte leuchtet in
   seiner Farbe. Ein zweiter Klick darauf nimmt die Angabe zurueck. */
.anwesenheit-wahl { flex: none; gap: .3rem; }
.anwesenheit-wahl.ist-unterwegs { opacity: .6; }
.plaettchen-wahl.ist-aktiv[data-wert="anwesend"] {
  background: var(--gruen-blass); color: var(--gruen); border-color: var(--gruen);
}
.plaettchen-wahl.ist-aktiv[data-wert="entschuldigt"] {
  background: var(--gelb-blass); color: var(--gelb); border-color: var(--gelb);
}
.plaettchen-wahl.ist-aktiv[data-wert="unentschuldigt"] {
  background: var(--rot-blass); color: var(--rot); border-color: var(--rot);
}
.plaettchen-wahl.ist-aktiv:hover { box-shadow: var(--schatten); }

/* Ein Schritt, der noch nicht an der Reihe ist: sichtbar, aber zurueckgenommen
   und ohne Bedienung. Die Kopfzeile sagt, was vorher fehlt. */
.karte-gesperrt { background: #fbfcfd; }
.klapp-kopf-gesperrt {
  display: flex; align-items: baseline; gap: .8rem; width: 100%;
  padding: 1.1rem 1.7rem; color: var(--grau-hell); cursor: not-allowed;
}
.klapp-kopf-gesperrt .klapp-titel { color: var(--grau); font-weight: 600; }
.klapp-kopf-gesperrt .klapp-kurz { white-space: normal; }
/* Steht die Kachel „Angaben zur Sitzung" offen, sagt die graue Kurzfassung
   im Kopf — Art, Termin, Ort — dasselbe wie die Liste unmittelbar darunter.
   Zugeklappt bleibt sie stehen: Dort ist sie der ganze Inhalt. */
.klapp-kopf[data-aufklappen="sitzung-angaben"].ist-offen .klapp-kurz,
.klapp-kopf[data-aufklappen="sitzung-angaben"][aria-expanded="true"] .klapp-kurz {
  display: none;
}

/* Rueckmeldungen der Teilnehmenden zum Entwurf, unter dem Punkt, zu dem sie
   gehoeren. */
.top-kommentare {
  margin-top: 1rem; padding: .8rem .9rem;
  background: var(--blau-blass); border-radius: var(--radius);
}
.top-kommentare h4 {
  font-size: .78rem; color: var(--blau-tief); text-transform: uppercase;
  letter-spacing: .05em; margin: 0 0 .5rem;
}


/* Der Protokollentwurf auf der persoenlichen Seite: Punkt fuer Punkt lesen
   und dazu anmerken. */
.entwurf-liste { list-style: none; margin: 0; padding: 0; }
.entwurf-punkt {
  padding: .9rem 0; border-bottom: 1px solid var(--linie);
}
.entwurf-punkt:last-child { border-bottom: none; }
.entwurf-punkt h3 { font-size: 1rem; margin: 0 0 .4rem; }

/* Zwischenueberschrift in einer Kachel, die mehrere Abschnitte traegt —
   „Wer ist da?", „Tagesordnung abarbeiten", „Ergaenzungen der Teilnehmenden". */
.kachel-abschnitt {
  font-size: .95rem; margin: 1.4rem 0 .5rem;
  padding-top: .9rem; border-top: 1px solid var(--linie);
}
.kachel-abschnitt:first-of-type { margin-top: .6rem; }
.karte > .anwesenheit-pruefung > .kachel-abschnitt { border-top: none; padding-top: 0; }
/* Steht ein Bereich offen, ist die Kopfzeile der Weg zurueck — dann zeigt sie
   sich auch als anklickbar. Zugeklappt gibt es dort nichts zu tun. */
.klapp-zeile-plaettchen:has(.plaettchen.ist-offen) .kachel-kopf-still { cursor: pointer; }

/* Kombifeld: Suchen und Auswaehlen in einem Feld. Die Trefferliste haengt
   darunter und legt sich ueber das, was folgt — sie soll die Kachel nicht
   auseinanderschieben. Ohne Skript steht hier die gewoehnliche Auswahlliste,
   dann greift nichts davon. */
/* `flex: … 240px` gilt nur in einer waagerechten Zeile (Nachweise an einer
   Buchung). In einem Feld — das ist eine senkrechte Flexbox — wuerde daraus
   eine Grundhoehe von 240px: Die Trefferliste haengt dann weit unter dem
   Eingabefeld, mit einer Luecke dazwischen. */
.kombi { position: relative; min-width: 0; }
.nachweis-waehlen .kombi, .filterleiste .kombi { flex: 1 1 240px; }
.kombi .kombi-select { display: none; }
.kombi-eingabe { width: 100%; }
.kombi-liste {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 16rem; overflow-y: auto;
  margin: 0; padding: .25rem; list-style: none;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 43, 61, .16);
}
.kombi-eintrag {
  padding: .42rem .55rem; border-radius: 7px; cursor: pointer;
  font-size: .9rem; line-height: 1.4;
}
.kombi-eintrag:hover, .kombi-eintrag.ist-aktiv {
  background: var(--blau-blass); color: var(--blau-tief);
}
.kombi-hinweis {
  padding: .42rem .55rem; color: var(--grau);
  font-size: .86rem; font-style: italic;
}
.kombi-fehler { display: none; margin-top: .35rem; color: var(--rot); font-size: .84rem; }
.kombi.ist-fehler .kombi-fehler { display: block; }
.kombi.ist-fehler .kombi-eingabe { border-color: var(--rot); }

/* Ein Kommentar ist Fliesstext — Zeilenumbrueche des Verfassers bleiben
   stehen, und der Text nimmt die ganze Breite ein. Datum und Symbole
   ruecken darunter. */
.kommentar-text {
  flex: 1 1 100%; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: .94rem; line-height: 1.55;
}

.kontrolle { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--linie); }

@media (max-width: 780px) {
  .konto-saldo { font-size: 1.7rem; }
  .konto-zahlen { gap: 1.1rem; }
  /* Auf schmalen Schirmen bringt die feste Spalte nichts mehr — dort darf
     die Kachel die volle Breite nutzen und der Betrag rechts stehen. */
  .umsatzliste { grid-template-columns: minmax(0, 1fr); gap: .45rem 0; }
  .umsatz-zeile {
    grid-template-columns: minmax(0, 1fr) max-content; gap: .8rem;
  }
  .umsatz-zweck { display: block; margin-left: 0; margin-top: .1rem; }
  .umsatz-marken { display: flex; margin-left: 0; margin-top: .25rem; }
  .umsatz-betrag { font-size: .95rem; }
  .umsatz-nachweise { padding: .9rem .8rem 1rem; }
  /* Ein Auswahlfeld mit 220px Mindestbreite sprengt das Telefon. */
  .nachweis-waehlen select { min-width: 0; flex-basis: 100%; }
}
.termin-liste strong { font-size: .98rem; }
.termin-liste small { display: block; color: var(--grau); font-size: .85rem; margin-top: .15rem; }

@media (max-width: 780px) {
  /* Je Zeile nur Nachname und Funktion; der Rest erscheint beim Antippen. */
  .tabelle-vorstand .v-detail { display: none; }
  .tabelle-vorstand tr.offen .v-detail { display: block; }
  /* Dieselbe Polsterung wie bei Name und Funktion (.tabelle-gestapelt td):
     VR-Eintrag, Telefon und E-Mail standen sonst um die linke Einrückung
     weiter aussen als die beiden Angaben darüber. */
  .tabelle-vorstand tr.offen td.v-detail {
    padding: .4rem .9rem; border-bottom: none;
  }
  .tabelle-vorstand .v-zeile td { border-bottom: 1px solid var(--linie); }
  .tabelle-vorstand tr.offen td { border-bottom: none; }
  .tabelle-vorstand tr.offen td.v-aktionen { border-bottom: 1px solid var(--linie); }
  .tabelle-vorstand .v-name strong { font-size: .98rem; }
  .tabelle-vorstand .v-vorname { display: none; color: var(--grau); font-size: .86rem; }
  .tabelle-vorstand tr.offen .v-vorname { display: block; }
  .tabelle-vorstand .v-funktion { color: var(--grau); font-size: .88rem; }
  .v-mobilhinweis { display: block; }
  .tabelle-huelle { overflow-x: visible; }
  .karte-schmal { max-width: none; }

  /* Mitgliederliste: E-Mail und Zahlungsart wandern in die aufgeklappte Ansicht */
  .tabelle-mitglieder .m-detail { display: none; }
  .m-details { grid-template-columns: 1fr; gap: .2rem; }
  .m-details .daten:last-child { margin-top: .8rem; }
  .bewegung-balken { height: 80px; }
  .balken { width: 11px; }
}

/* --- Beschlüsse und Abstimmungen ----------------------------------------- */

.beschluss-kachel { display: block; text-decoration: none; color: inherit; }
.beschluss-kachel:hover { border-color: var(--blau); box-shadow: var(--schatten); }
.beschluss-kachel h3 { color: var(--dunkel); }
.kachel-kopf {
  display: flex; justify-content: space-between; align-items: center;
  gap: .5rem; flex-wrap: wrap;
}
.kachel-fortschritt { margin-top: .9rem; }
.kachel-fortschritt small { color: var(--grau); font-size: .8rem; }
.kachel-zahlen { margin-top: .6rem; font-size: .82rem; color: var(--grau); }

/* Auszählung: je Antwort ein Balken, darunter die Namen — im Elternbeirat ist
   wie in der WhatsApp-Umfrage sichtbar, wer wie gestimmt hat. */
.stand-liste { list-style: none; display: grid; gap: 1rem; }
.stand-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.stand-text { font-weight: 600; }
.stand-text small { display: block; font-weight: 400; font-size: .78rem; }
.stand-zahl { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--blau-tief); }
.stand-balken {
  background: var(--blau-blass); border-radius: 999px;
  height: 10px; overflow: hidden; margin-top: .35rem;
}
.stand-balken span {
  display: block; height: 100%; background: var(--blau); border-radius: 999px;
}
.stand-namen { margin-top: .4rem; font-size: .84rem; color: var(--grau); }

/* --- Umfrage --------------------------------------------------------------
   Aufgebaut wie eine Umfrage in WhatsApp: je Antwort ein Kreis zum Antippen,
   rechts die Zahl der Stimmen, darunter ein Balken mit dem Anteil. Ein Klick
   auf die Zahl klappt die Namen auf. */

.umfrage { display: grid; gap: 1.1rem; margin-bottom: 1.2rem; }

/* Rechts bleibt Platz für die Zahl — sonst läuft langer Text darunter. */
.umfrage-zeile { position: relative; padding-right: 3rem; }

.umfrage-wahl {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .5rem; min-height: 28px;
}
label.umfrage-wahl { cursor: pointer; }

/* Sichtbar ist allein der Kreis; das Feld selbst bleibt bedienbar. */
.umfrage-wahl input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.umfrage-kreis {
  flex: none; position: relative; width: 26px; height: 26px;
  border: 2px solid var(--grau-hell); border-radius: 50%; background: #fff;
  transition: background .15s, border-color .15s;
}
.umfrage-kreis::after {
  content: ''; position: absolute; left: 7px; top: 3px;
  width: 6px; height: 12px; border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg); opacity: 0; transition: opacity .15s;
}
.umfrage-wahl input:checked + .umfrage-kreis,
.ist-gewaehlt > div.umfrage-wahl > .umfrage-kreis {
  background: var(--gruen); border-color: var(--gruen);
}
.umfrage-wahl input:checked + .umfrage-kreis::after,
.ist-gewaehlt > div.umfrage-wahl > .umfrage-kreis::after { opacity: 1; }
.umfrage-wahl input:focus-visible + .umfrage-kreis {
  outline: 2px solid var(--blau-tief); outline-offset: 2px;
}
label.umfrage-wahl:hover .umfrage-kreis { border-color: var(--gruen); }

.umfrage-text { font-weight: 500; }

.umfrage-balken {
  height: 8px; border-radius: 999px; background: var(--linie); overflow: hidden;
}
.umfrage-balken i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--blau); transition: width .3s;
}
.ist-gewaehlt .umfrage-balken i { background: var(--gruen); }

/* Die Zahl steht rechts oben in der Zeile — als <summary>, damit die Namen
   auch ohne JavaScript aufklappen. */
.umfrage-wer { margin: 0; }
.umfrage-wer > summary, div.umfrage-wer { position: absolute; top: 0; right: 0; }
.umfrage-wer > summary, div.umfrage-wer {
  padding: .1rem .4rem; border-radius: 8px;
}
.umfrage-wer > summary { list-style: none; cursor: pointer; }
.umfrage-wer > summary::-webkit-details-marker { display: none; }
.umfrage-wer > summary:hover { background: var(--blau-blass); }
.umfrage-wer[open] > summary { background: var(--blau-blass); }
.umfrage-zahl {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--blau-tief);
}
.ist-gewaehlt .umfrage-zahl { color: var(--gruen); }
.umfrage-namen { margin-top: .5rem; font-size: .86rem; color: var(--grau); }
.umfrage-summe { margin-top: .2rem; }

/* Namensauswahl beim ersten Öffnen des Gruppenlinks. Ein Antippen genügt,
   deshalb ist jede Kachel selbst der Absendeknopf. */
.namens-wahl {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
/* Der Name steht unmittelbar im Knopf, ohne verschachteltes Element.
   Grund: Auf dem iPhone — besonders im Browser innerhalb von WhatsApp —
   behält ein <button> sein natives Aussehen und stellt Block-Elemente in
   seinem Inneren nicht dar. Die Kacheln erschienen dort leer. Deshalb
   `appearance: none`, eigene Flex-Ausrichtung und der Text direkt im Knopf. */
.namens-kachel {
  appearance: none; -webkit-appearance: none;
  display: flex; align-items: center; min-height: 3rem;
  font: inherit; font-weight: 600; font-size: 1rem; color: inherit;
  text-align: left; cursor: pointer;
  background: var(--flaeche); border: 1.5px solid var(--linie);
  border-radius: var(--radius); padding: .9rem 1rem;
}
.namens-kachel:hover { border-color: var(--blau); background: var(--blau-blass); }
.namens-kachel:disabled { cursor: default; opacity: .55; }

/* Stimmberechtigte im Anlege-Formular */
.personen-wahl {
  display: grid; gap: .5rem; margin-bottom: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.person-karte {
  display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  background: var(--flaeche); border: 1.5px solid var(--linie);
  border-radius: 10px; padding: .6rem .75rem;
}
.person-karte:has(input:checked) { border-color: var(--blau); background: var(--blau-blass); }
.person-karte input { accent-color: var(--blau-tief); width: 17px; height: 17px; flex: none;
  margin-top: .15rem; }
.person-karte strong { display: block; font-size: .92rem; font-weight: 600; }
.person-karte small { display: block; color: var(--grau); font-size: .8rem; }

/* Antwortmöglichkeiten: Text und Wertung nebeneinander */
/* Antwortmöglichkeiten anlegen: Das Plus setzt die Aufzählung fort, statt als
   weiterer Knopf im Formular zu stehen. Es ist so hoch wie ein Eingabefeld und
   beginnt an derselben Kante — der Blick bleibt in der Spalte. */
.option-plus {
  display: flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; padding: 0; margin-bottom: 1rem;
  font-size: 1.5rem; line-height: 1; font-weight: 400;
  color: var(--blau-tief); background: var(--flaeche);
  border: 1px dashed var(--linie); border-radius: 10px; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.option-plus:hover { border-color: var(--blau); background: var(--blau-blass); }
.option-plus:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }

.option-liste { display: grid; gap: .5rem; margin-bottom: .6rem; }
.option-zeile { display: flex; gap: .5rem; align-items: center; }
.option-zeile input[type="text"] { flex: 1; min-width: 0; }
.option-zeile select { flex: none; width: 11rem; }
.option-weg {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid var(--linie); background: #fff;
  color: var(--grau-hell); font-size: .9rem; line-height: 1; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.option-weg:hover { color: var(--rot); border-color: #f3c9c6; background: var(--rot-blass); }

.fliesstext { color: var(--grau); }
.rechts-unten { margin-top: 1.6rem; text-align: center; }
.kopier-feld input { flex: 1; min-width: 0; }

/* --- Protokollarchiv ------------------------------------------------------ */

/* Zwei Ebenen zum Aufklappen: aussen das Jahr, darin die einzelne Sitzung.
   Damit die Schachtelung sichtbar bleibt, ruecken die Sitzungen ein und die
   Jahreszeile traegt eine kraeftigere Schrift. */
.jahr-kachel {
  border: 1px solid var(--linie); border-radius: var(--radius);
  margin-bottom: .6rem; overflow: hidden; background: var(--flaeche);
}
.jahr-kachel > .klapp-zeile .klapp-titel { font-size: 1.15rem; letter-spacing: -.01em; }
.jahr-kachel > .klapp-zeile .klapp-kopf { background: #f7fbfe; }
.jahr-kachel > .klapp-zeile .klapp-kopf:hover { background: var(--blau-blass); }
.jahr-inhalt { padding: .5rem .8rem .8rem; }

.protokoll-kachel {
  border: 1px solid var(--linie); border-radius: 10px;
  margin-top: .5rem; background: var(--flaeche);
}
.protokoll-kachel .klapp-kopf { padding: .7rem .9rem; }
.protokoll-kachel .klapp-titel { font-size: .98rem; }
.protokoll-kachel > div[id^="prot-"] { padding: 0 .9rem 1rem; }

.protokoll-inhalt { margin-top: .9rem; }
.protokoll-inhalt h3 {
  font-size: .95rem; margin: 1.1rem 0 .3rem; color: var(--blau-tief);
}
.protokoll-inhalt p { margin-bottom: .6rem; font-size: .93rem; }
.protokoll-inhalt ul { margin: 0 0 .7rem 1.1rem; }
.protokoll-inhalt li { font-size: .93rem; margin-bottom: .25rem; }

/* Die Fundstelle bei einer Suche — der Ausschnitt um den Begriff herum. */
.fundstelle {
  background: var(--gelb-blass); border-left: 3px solid var(--gelb);
  padding: .5rem .7rem; margin: .6rem 0; font-size: .88rem; border-radius: 0 6px 6px 0;
}

.knopf-reihe-eng { gap: .4rem; flex-wrap: wrap; margin-top: 1rem; }
.knopf-reihe-eng .knopf { display: inline-flex; flex-direction: column; align-items: flex-start;
  line-height: 1.25; }
.knopf-reihe-eng .knopf small { font-weight: 400; font-size: .74rem; }

.protokoll-einzeln .protokoll-kachel { border: none; }

/* --- Abschnitte, die nur auf dem Telefon zuklappen ------------------------
   Auf breiten Schirmen soll die Übersicht aussehen wie immer: Überschrift,
   darunter der Inhalt. Auf schmalen ist alles zu, damit zuerst das
   Kachelmenü sichtbar wird.

   Das `hidden`-Attribut steht im Markup und wird hier für breite Schirme
   überstimmt — die Regel ist spezifischer als das `[hidden]` des Browsers.
   So gibt es kein Aufblitzen beim Laden, und die Anzeige hängt nicht an
   JavaScript. */
@media (min-width: 781px) {
  .mobil-kachel-inhalt[hidden] { display: block; }
  /* Abschnitte, deren Überschrift die Seite schon im Titel trägt. */
  .mobil-kachel-still > .klapp-zeile { display: none; }
  /* Der Klappkopf tritt als gewöhnliche Überschrift auf. */
  .mobil-kachel > .klapp-zeile .klapp-kopf {
    padding: 0 0 .5rem; background: none; cursor: default;
  }
  .mobil-kachel > .klapp-zeile .klapp-kopf:hover { background: none; }
  .mobil-kachel > .klapp-zeile .klapp-titel { font-size: 1.15rem; }
  .mobil-kachel > .klapp-zeile .klapp-kurz,
  .mobil-kachel > .klapp-zeile .klapp-pfeil { display: none; }
}
@media (max-width: 780px) {
  /* Ein Abschnitt ohne eigene Kartenoptik bekommt sie hier — damit die
     zugeklappten Bereiche als Kacheln nebeneinanderstehen. */
  .mobil-kachel:not(.karte) {
    background: var(--flaeche); border: 1px solid var(--linie);
    border-radius: var(--radius); margin-bottom: .8rem; overflow: hidden;
  }
  .mobil-kachel.karte { padding: 0; }
  .mobil-kachel > .klapp-zeile .klapp-kopf { padding: .9rem 1.1rem; }
  .mobil-kachel-inhalt { padding: 0 1.1rem 1.1rem; }
  /* Die Zahlenkacheln der Übersicht: zwei nebeneinander reichen. */
  .mobil-kachel-inhalt .zahl-reihe { grid-template-columns: 1fr 1fr; }
}

/* Die Knöpfe, mit denen je Elternbeiratsmitglied ein Chat mit dem persönlichen
   Abstimmungslink geöffnet wird. */
.wa-reihe { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.wa-reihe .knopf { flex: none; }

/* --- Elternbeiratshistorie ---------------------------------------------------- */

/* Drei Kacheln in der zugeklappten Hauptkachel — gleiche Bauart wie die
   Jahreskacheln im Protokollarchiv, damit beide Bereiche sich gleich
   bedienen. Die Polsterung des Klappkopfs ist enger als bei einer vollen
   Kachel, weil hier schon eine Ebene darüber einrückt. */
/* Eine Kachel innerhalb einer aufgeklappten Kachel — für die Elternbeirats-
   historie und die Satzungsfassungen. Enger gepolstert als eine volle Kachel,
   weil eine Ebene darüber bereits einrückt. */
.historie-kachel, .unterkachel {
  border: 1px solid var(--linie); border-radius: 10px;
  margin-top: .6rem; background: var(--flaeche); overflow: hidden;
}
.historie-kachel .klapp-kopf, .unterkachel .klapp-kopf {
  padding: .75rem 1rem; background: #f7fbfe;
}
.historie-kachel .klapp-kopf:hover, .unterkachel .klapp-kopf:hover {
  background: var(--blau-blass);
}
.historie-kachel .klapp-titel, .unterkachel .klapp-titel { font-size: 1rem; }
.historie-inhalt:not([hidden]), .unterkachel-inhalt:not([hidden]) {
  padding: .3rem .9rem .9rem;
}
.historie-inhalt .tabelle-huelle { margin-top: .4rem; }

/* Überschrift und Inhalt der Historie teilen sich denselben linken Rand: die
   Kopfzeile ist ein Knopf mit eigener Polsterung, der Inhalt ein Kasten mit
   einer zweiten — ohne gemeinsamen Wert laufen beide auseinander und die
   Überschrift steht eingerückt über dem Text. */
#vorstand-historie { --historie-rand: 1.7rem; }
#vorstand-historie > .klapp-zeile > .klapp-kopf { padding-left: var(--historie-rand); }
#vorstand-historie > div:not([hidden]):not(.klapp-zeile) {
  padding-left: var(--historie-rand); padding-right: var(--historie-rand);
}
/* Die Fußnote unter den Kacheln hält denselben Abstand zur Kachel wie der
   einleitende Satz darüber — der kommt aus dem margin-top der Kacheln. */
.historie-fussnote { margin-top: .6rem; }
/* Eine einzelne Fassung soll nicht über die ganze Breite laufen. */
.unterkachel-inhalt .satzung-reihe { margin-top: .5rem; }

/* Abschnittsüberschrift zwischen den Vorlagen-Unterkacheln. */
.vorlagen-gruppe {
  margin: 1.6rem 0 .2rem; font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--grau-hell);
}
.vorlagen-gruppe:first-of-type { margin-top: 1rem; }

.personen-historie { list-style: none; display: grid; gap: .8rem; margin-top: .8rem; }
.personen-historie > li {
  border-left: 3px solid var(--linie); padding-left: .8rem;
}
.personen-historie > li:has(.marker-aktiv) { border-left-color: var(--blau); }
.ph-name { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ph-name small { font-size: .8rem; }
.ph-aemter { list-style: none; margin-top: .2rem; }
.ph-aemter li { font-size: .89rem; }
.ph-aemter .gedaempft { margin-left: .4rem; }

/* --- Schmale Bildschirme ------------------------------------------------- */

@media (max-width: 900px) {
  .spalten-haupt { grid-template-columns: 1fr; }
  .seiten-spalte { position: static; }
}

@media (max-width: 780px) {
  .admin-huelle { flex-direction: column; }
  .seitenleiste { width: 100%; height: auto; position: static; border-right: none;
    border-bottom: 1px solid var(--linie); }
  /* Auf dem Telefon steht die Navigation als Kachelfeld — seitwärts scrollen,
     um einen Punkt zu finden, ist auf einem Handy die schlechteste aller
     Bedienungen. */
  .seitenleiste-nav {
    display: grid; gap: .5rem; padding: .8rem;
    grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
    overflow: visible;
  }
  .seitenleiste-nav a {
    flex-direction: column; align-items: center; text-align: center;
    gap: .35rem; padding: .8rem .35rem; white-space: normal;
    border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche);
  }
  .seitenleiste-nav a span { font-size: .8rem; line-height: 1.25; }
  .seitenleiste-nav svg { width: 22px; height: 22px; }
  .seitenleiste-nav a.aktiv { border-color: var(--blau); }
  /* Das Kachelfeld ist auf dem Telefon ein Menue: Es stuende sonst ueber dem
     Inhalt und schoebe ihn aus dem Bild — nach dem Antippen einer Rubrik saehe
     man wieder nur die Kacheln. Geschlossen bleibt oben die Marke stehen; ein
     Tippen darauf holt die Kacheln zurueck. */
  .seitenleiste-nav, .seitenleiste-fuss { display: none; }
  .seitenleiste.menue-offen .seitenleiste-nav { display: grid; }
  .seitenleiste.menue-offen .seitenleiste-fuss { display: flex; }
  /* Filterleiste auf dem Telefon: Suchfeld und Knopf in einer Zeile, alles
     Weitere bleibt draussen. Die Auswahlfelder werden nur verborgen, nicht
     entfernt — so gehen ihre Werte beim Filtern unveraendert mit. */
  /* Ohne eigenen Rahmen: Auf dem Telefon steht nur noch das Suchfeld mit
     seinem Knopf da, und ein Kasten um ein einzelnes Feld ist ein Kasten zu
     viel. Am Schreibtisch, wo die Zeile mehrere Felder fasst, bleibt er. */
  .filterleiste {
    display: flex; gap: .5rem; align-items: center; flex-wrap: nowrap;
    background: none; border: none; border-radius: 0; padding: 0;
  }
  .filterleiste > select,
  .filterleiste > .filter-schalter { display: none; }
  /* Wo die Auswahl selbst filtert (data-sofort), steht sie auch auf dem
     Telefon — sonst bliebe von der Zeile nichts uebrig. */
  .filterleiste[data-sofort] > select { display: block; flex: 1; min-width: 0; }
  .filterleiste > input[type=search],
  .filterleiste > .suchfeld { flex: 1; min-width: 0; }
  .filterleiste > button { flex: none; }
  /* Wo die Liste lang ist, zaehlt auf dem Telefon die Suche. Die Auswahlen
     daneben schrumpfen dort auf „Alle ⌄" zusammen und sagen nicht mehr,
     wonach sie filtern; zurueckgesetzt wird ueber das Kreuz im Feld.
     Gefiltert wird am Schreibtisch, wo die Zeile Platz hat. */
  .filterleiste-nur-suche > select,
  .filterleiste-nur-suche > .filter-schalter,
  .filterleiste[data-sofort].filterleiste-nur-suche > select { display: none; }
  /* Die Trefferzeile mit Beitragsvolumen ist eine Auswertung fuer den
     Schreibtisch; auf dem Telefon zaehlt die Liste selbst. */
  .ergebnis-zeile { display: none; }

  /* Die Regel dazu steht seit dem 2026-08-26 ausserhalb dieser Media-Query:
     Doppelt stand die Kurzfassung auch am Schreibtisch. */

  /* Die Kacheln der Abstimmungsseite tragen kurze Titel — dort bleibt die
     Kopfzeile einzeilig, statt den Zusatz auf eine zweite Zeile zu schieben.
     Nötig ist das Trio, weil die allgemeine Telefon-Regel weiter unten
     umbrechen lässt (flex-wrap) und dem Zusatz `order: 2` gibt. */
  .umfrage-klapp .klapp-kopf { flex-wrap: nowrap; }
  .umfrage-klapp .klapp-titel { flex: none; }
  .umfrage-klapp .klapp-kurz { flex: 0 1 auto; min-width: 0; order: 0; }
  .umfrage-klapp .klapp-pfeil { order: 1; margin-left: auto; }

  .seitenleiste-marke { cursor: pointer; }
  .seitenleiste-marke::after {
    content: ''; width: 9px; height: 9px; margin-left: auto; flex: none;
    border-right: 2px solid var(--grau); border-bottom: 2px solid var(--grau);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s;
  }
  .seitenleiste.menue-offen .seitenleiste-marke::after {
    transform: rotate(225deg) translate(-2px, -2px);
  }
  .seitenleiste-fuss { gap: 1rem; align-items: center; flex-wrap: wrap; }
  .benutzer { margin-bottom: 0; }
  .admin-inhalt { padding: 1.4rem 1.1rem 3rem; }
  .held { padding: 2rem 1.4rem; }
  .held h1 { font-size: 1.8rem; }
  h1 { font-size: 1.55rem; }
  .karte { padding: 1.2rem 1.1rem; }
  .inhalt { padding: 1.8rem 1.1rem 3rem; }

  /* Klappkacheln: Für eine lange Überschrift und die Kurzinfo nebeneinander
     ist hier kein Platz. Die Überschrift darf deshalb umbrechen, die Kurzinfo
     rückt darunter — sonst schiebt eine lange Überschrift den Pfeil aus der
     Kachel hinaus und die Kopfzeile steht verrutscht. */
  .klapp-kopf { flex-wrap: wrap; gap: .15rem .7rem; padding: 1.2rem 1.1rem; }
  /* Grundbreite 0, damit der Titel sich die erste Zeile mit dem Pfeil teilt
     und in sich umbricht, statt ihn vor sich herzuschieben. */
  .klapp-titel { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
  .klapp-pfeil { order: 1; }
  .klapp-kurz {
    flex: 1 0 100%; order: 2; white-space: normal; overflow: visible;
  }
  /* Kopfzeile und Inhalt behalten denselben linken Rand wie die übrigen
     Kacheln. `.karte-klapp` setzt die Polsterung der Karte auf 0 — das muss
     hier wiederholt werden, weil die Regel für `.karte` weiter unten steht. */
  .karte-klapp { padding: 0; }
  .karte-klapp > div:not([hidden]):not(.klapp-zeile) { padding: 1.2rem 1.1rem; }
  .klapp-zeile-plaettchen { padding: 1.2rem 1.1rem; }
  .kachel-kopf-still { flex: 1 1 100%; flex-wrap: wrap; gap: .15rem .7rem; }
  /* Auf dem Telefon steht die Kurzfassung unter der Ueberschrift — nebeneinander
     bliebe fuer den Titel nur eine halbe Zeile. */
  .kachel-kopf-still .klapp-titel { flex: 1 1 100%; font-size: 1.15rem; }
  .kachel-kopf-still .klapp-kurz { flex: 1 1 100%; }
  #vorstand-historie { --historie-rand: 1.1rem; }
  .feld-klein { max-width: none; }
  .daten { grid-template-columns: 1fr; gap: .1rem .8rem; }
  .daten dt { margin-top: .5rem; font-size: .82rem; }

  /* Antwort und Wertung untereinander — nebeneinander wird beides zu schmal. */
  .option-zeile { flex-direction: column; gap: .3rem; }
  .option-zeile select { width: 100%; }
  .namens-wahl { grid-template-columns: 1fr 1fr; }
}

@media print {
  .seitenleiste, .werkzeuge, .kopf, .fuss, .knopf, .verweis-knopf, form { display: none; }
  body { background: #fff; }
  .karte { box-shadow: none; border-color: #ccc; page-break-inside: avoid; }
}

/* --- Satzungsfassungen ---------------------------------------------------- */
.satzung-reihe { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); margin: 1rem 0; }
.satzung-kachel { border-top-color: var(--grau-hell); }
.satzung-kachel-gilt { border-top-color: var(--gruen); background: #fbfefc; }
.satzung-kachel .kachel-kopf { display: flex; align-items: center;
  justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.satzung-kachel .kachel-datum { font-size: .95rem; }
.satzung-aenderung { margin: .5rem 0 .2rem; font-size: .88rem; color: var(--dunkel); }
.satzung-kachel > small { display: block; margin-top: .6rem; font-size: .78rem; }

/* --- Freistellungsbescheide ----------------------------------------------- */
/* Diese Kacheln tragen ihr Bearbeitungsformular in sich und brauchen deshalb
   mehr Breite als die Satzungsfassungen. */
/* `align-items: start` lässt jede Kachel ihre eigene Höhe behalten — sonst
   wächst die Nachbarkachel leer mit, sobald eine ihr Formular aufklappt. */
/* `min(360px, 100%)`: Auf dem Telefon ist weniger Platz als das Mindestmaß —
   ohne das ragte die Kachel über den Rand hinaus. */
.bescheid-formular {
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--linie);
}
.bescheid-formular .formular { margin-bottom: .6rem; }

/* --- Synopse -------------------------------------------------------------- */
.synopse-huelle { margin-top: 1.2rem; }
.synopse { border-collapse: collapse; width: 100%; }
.synopse th, .synopse td {
  border: 1px solid var(--linie); padding: .7rem .8rem; vertical-align: top;
  text-align: left;
}
.synopse thead th {
  background: var(--blau-blass); position: sticky; top: 0; z-index: 1;
  min-width: 15rem;
}
.synopse thead th:first-child { min-width: 5rem; }
.synopse thead th small { display: block; font-weight: 400; font-size: .76rem;
  color: var(--grau); }
.synopse-stand { font-size: .95rem; font-weight: 700; color: var(--blau-tief); }
.synopse tbody th { background: #f7fbfe; white-space: nowrap; font-size: .95rem; }
.synopse td { font-size: .84rem; line-height: 1.45; }
.synopse td p { margin: 0 0 .5rem; }
.synopse td p:last-child { margin-bottom: 0; }
.synopse-titel { display: block; margin-bottom: .45rem; font-size: .88rem; }
.synopse-gleich { background: #fcfdfe; }
.synopse-fehlt { background: #f7f8f9; }
.synopse ins { background: var(--gruen-blass); color: var(--gruen);
  text-decoration: none; padding: 0 .1em; border-radius: 2px; }
.synopse del { background: #fdeeee; color: var(--rot); padding: 0 .1em;
  border-radius: 2px; }
p ins { background: var(--gruen-blass); color: var(--gruen); text-decoration: none;
  padding: 0 .15em; border-radius: 2px; }
p del { background: #fdeeee; color: var(--rot); padding: 0 .15em; border-radius: 2px; }

@media (max-width: 720px) {
  .synopse thead th { min-width: 12rem; position: static; }
  .synopse td { font-size: .8rem; }
}

/* Volle Zeile im Feldgitter für einen Hinweis, der zu den Feldern darüber
   gehört — er soll dicht an ihnen stehen, nicht wie ein eigener Absatz. */
.feld-gitter > .feld-hinweis { margin: -.35rem 0 .2rem; }

/* Aufzählung, deren Ziffern bündig mit dem Fließtext darüber beginnen. */
.liste-buendig { padding-left: 0; margin-left: 0; list-style-position: inside; }
.liste-buendig li { margin-bottom: .35rem; }
.liste-buendig li:last-child { margin-bottom: 0; }

/* `.feld` ist ein Flex-Kasten — ohne diese Regel bliebe ein ausgeblendetes
   Feld sichtbar, weil die Klasse das UA-Verhalten von [hidden] überstimmt. */
.feld[hidden] { display: none; }

/* --- Tabellen auf schmalen Schirmen --------------------------------------
   Nebeneinander ist auf dem Telefon kein Platz: schon drei Spalten quetschen
   den Text in Silben. Jede Spalte wird deshalb zu einer eigenen Zeile, die
   Spaltenüberschrift steht als Beschriftung davor. Woher die Beschriftung
   kommt, steht in public/admin.js — sie wird aus dem Tabellenkopf geholt und
   als data-spalte an die Zelle gehängt, damit das für jede Tabelle gilt.

   Dieser Block steht am Ende der Datei, weil er die älteren Regeln aufhebt,
   die einzelne Spalten auf dem Telefon versteckt haben: gestapelt ist Platz
   für alle Angaben, es muss nichts mehr verborgen werden. */
@media (max-width: 780px) {
  .tabelle-gestapelt,
  .tabelle-gestapelt tbody,
  .tabelle-gestapelt tr,
  .tabelle-gestapelt td { display: block; width: auto; }
  .tabelle-gestapelt thead { display: none; }

  .tabelle-gestapelt tr {
    border: 1px solid var(--linie); border-radius: 10px;
    margin-bottom: .6rem; padding: .3rem 0; background: var(--flaeche);
  }
  .tabelle-gestapelt tr:hover td,
  .tabelle-gestapelt tr.ist-offen td { background: none; }

  /* Die Beschriftung steht über dem Wert, nicht daneben: Eine feste Spalte
     links ließe für den Wert kaum 130 Pixel — eine E-Mail-Adresse bricht
     darin mitten im Wort. So hat jeder Wert die volle Breite. */
  .tabelle-gestapelt td {
    border-bottom: none; padding: .4rem .9rem; display: block;
  }
  .tabelle-gestapelt td[data-spalte]::before {
    content: attr(data-spalte);
    display: block; margin-bottom: .05rem;
    color: var(--grau-hell); font-size: .7rem; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; line-height: 1.5;
  }
  /* Eine feine Linie zwischen den Angaben — sie trennt, ohne zu lärmen. */
  .tabelle-gestapelt tr.ist-offen > td + td:not(:empty) {
    border-top: 1px solid #eef4f8;
  }
  /* Gestapelt steht die Beschriftung über dem Wert, und jede Angabe beginnt
     am linken Rand der Karte. Ein rechtsbündiger Betrag stünde als einziger
     draußen am anderen Ende und sein Titel darüber am linken — die beiden
     gehören aber zusammen. */
  .tabelle-gestapelt td.rechts { text-align: left; }

  /* Knopf- und Aktionsspalten haben keine Überschrift und keine Beschriftung. */
  .tabelle-gestapelt td:not([data-spalte]) { display: block; }
  .tabelle-gestapelt td:empty { display: none; }

  /* Aufgeklappte Formular- und Detailzeilen füllen die Breite wie bisher. */
  .tabelle-gestapelt tr.zeile-voll {
    border: none; border-radius: 0; padding: 0; background: none;
  }
  .tabelle-gestapelt tr.zeile-voll > td { display: block; padding: 0; }

  /* Zugeklappt steht jeder Eintrag in genau einer Zeile: die ersten beiden
     Angaben nebeneinander, ohne Beschriftung. Alles Weitere erscheint erst
     beim Antippen — dann greift das Raster mit Beschriftung von oben. */
  /* Zugeklappt heisst zugeklappt: die Detail- und Formularzeilen tragen
     hidden, und ein display aus einer Klassenregel darf das nicht aushebeln. */
  .tabelle-gestapelt tr[hidden], .tabelle-gestapelt td[hidden] { display: none; }

  .tabelle-gestapelt tr:not(.zeile-voll) { cursor: pointer; }
  .tabelle-gestapelt tr:not(.ist-offen):not(.zeile-voll) {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: .1rem .55rem; padding: .6rem .8rem;
  }
  .tabelle-gestapelt tr:not(.ist-offen):not(.zeile-voll) > td {
    display: none; padding: 0;
  }
  .tabelle-gestapelt tr:not(.ist-offen):not(.zeile-voll) > td:nth-child(1),
  .tabelle-gestapelt tr:not(.ist-offen):not(.zeile-voll) > td:nth-child(2) {
    display: block;
  }
  .tabelle-gestapelt tr:not(.ist-offen):not(.zeile-voll) > td::before { display: none; }
  .tabelle-gestapelt tr:not(.ist-offen):not(.zeile-voll) > td:nth-child(1) {
    color: var(--grau); font-size: .82rem; flex: none;
  }
  /* Die erste Angabe steht allein in der ersten Zeile, die zweite immer
     darunter. Sonst rutscht sie je nach Länge mal daneben und mal darunter —
     die Liste franst dann an jeder zweiten Zeile aus. Betrifft die Nummer der
     Beschlüsse, das Datum der Veranstaltungen und den Namen bei den
     Zugängen; bei den Mitgliedern bleibt die Nummer neben dem Namen, dort
     passt beides nebeneinander. */
  .tabelle-beschluesse tr:not(.ist-offen):not(.zeile-voll) > td:nth-child(1),
  .tabelle-veranstaltungen tr:not(.ist-offen):not(.zeile-voll) > td:nth-child(1),
  .tabelle-zugaenge tr:not(.ist-offen):not(.zeile-voll) > td:nth-child(1) {
    flex: 0 0 100%;
  }

  /* Teilnehmerkreis: Der Stand einer Person ist eine Reihe von sechs Punkten,
     und erst zusammen ergeben sie ein Bild. Zugeklappt zeigte die Zeile nach
     der allgemeinen Regel nur die ersten beiden Zellen — also den Namen und
     einen einzigen Punkt, der aussah, als gaebe es nicht mehr. Jetzt steht
     der Name in der ersten Zeile und die ganze Punktreihe darunter. */
  .tabelle-stand tr:not(.ist-offen):not(.zeile-voll) > td.stand-name {
    flex: 0 0 100%; color: inherit; font-size: inherit;
  }
  .tabelle-stand tr:not(.ist-offen):not(.zeile-voll) > td.stand-zelle {
    display: block; flex: none; width: auto; padding: 0;
  }
  .tabelle-stand tr:not(.ist-offen):not(.zeile-voll) { gap: .35rem .5rem; }

  /* Kontoumsaetze der Kassenpruefung: Zugeklappt zeigte die Zeile nach der
     allgemeinen Regel die ersten beiden Zellen — Tag und Name. Ausgerechnet
     der Betrag, um den es bei einer Pruefung geht, stand nicht dabei.
     Jetzt bilden Tag und Betrag die erste Zeile (links grau das Datum, rechts
     rot oder gruen der Betrag wie am Schreibtisch), der Name steht darunter
     und tritt dabei zurueck: kleiner und in Grau, damit die Zahl fuehrt.
     Der Verwendungszweck bleibt dem aufgeklappten Nachweis vorbehalten. */
  .tabelle-zuwendungen tr:not(.ist-offen):not(.zeile-voll) > td.u-tag { order: 1; }
  .tabelle-zuwendungen tr:not(.ist-offen):not(.zeile-voll) > td.u-betrag {
    display: block; order: 2; flex: none;
    margin-left: auto; text-align: right; font-size: .95rem;
  }
  .tabelle-zuwendungen tr:not(.ist-offen):not(.zeile-voll) > td.u-name {
    display: block; order: 3; flex: 0 0 100%;
    font-size: .86rem; color: var(--grau);
  }
  .tabelle-zuwendungen tr:not(.ist-offen):not(.zeile-voll) > td.u-name strong {
    font-weight: 600; color: var(--grau);
  }

  /* Mitgliedsantraege: Die Zeile fuehrt auf den Antrag (data-verweis), klappt
     also nicht auf — was ihre Aktionsspalte auf dem Telefon unerreichbar
     machte. Stift und Papierkorb ruecken deshalb an den rechten Rand der
     zugeklappten Zeile, der Name nimmt den Platz dazwischen. */
  .tabelle-gestapelt tr.a-zeile:not(.ist-offen):not(.zeile-voll) > td.a-aktionen {
    display: block; flex: none; margin-left: auto; text-align: right;
  }

  /* Beiträge: Zugeklappt zeigte die Zeile nach der allgemeinen Regel nur
     Nummer und Name. Der Betrag, um den es auf dieser Seite geht, steht
     jetzt mit in der Zeile, rechtsbündig am Rand der Karte. Ein langer Name
     bricht in seiner Spalte um, statt Nummer und Betrag auseinanderzuschieben. */
  .tabelle-beitraege tr:not(.ist-offen):not(.zeile-voll) > td:nth-child(2) {
    flex: 1 1 0; min-width: 0;
  }
  .tabelle-beitraege tr:not(.ist-offen):not(.zeile-voll) > td.bt-betrag {
    display: block; flex: none; margin-left: auto;
    text-align: right; white-space: nowrap;
  }

  /* Die Ablage trägt vorn eine Spalte mit dem Ziehgriff. Zugeklappt müssen
     deshalb drei statt zwei Zellen zu sehen sein — sonst zeigt die Zeile nur
     Griff und Datum, und der Titel des Dokuments fehlt. */
  .tabelle-dokumente tr:not(.ist-offen):not(.zeile-voll) > td:nth-child(3) {
    display: block;
  }
  .tabelle-dokumente tr:not(.ist-offen):not(.zeile-voll) > td:nth-child(2) {
    color: var(--grau); font-size: .82rem; flex: none;
  }
  .tabelle-dokumente tr:not(.ist-offen):not(.zeile-voll) > td.dok-griff-zelle {
    flex: none;
  }

  /* 3) Ablaufleiste: nur der Schritt, auf dem die Sitzung gerade steht. */
  .ablauf { overflow-x: visible; padding: .7rem .9rem; }
  .ablauf > li:not(.ablauf-kurz) { display: none; }
  .ablauf .ablauf-kurz { display: flex; }
  .ablauf-kurz::after { display: none; }
  .ablauf-kurz .ablauf-text { line-height: 1.35; }
  .ablauf-kurz .ablauf-text small {
    display: block; font-weight: 400; font-size: .78rem; color: var(--grau);
  }

  /* 8) Der Zusatz in Klammern rutscht als Ganzes in die nächste Zeile,
     statt mitten in der Klammer umzubrechen. */
  h2 > .klein, h2 > .gedaempft { white-space: nowrap; }

  /* Nichts mehr verstecken — alle Angaben stehen jetzt untereinander. */
  .tabelle-vorstand td.v-detail,
  .tabelle-mitglieder td.m-detail { display: block; }
  .tabelle-vorstand .v-vorname { display: inline; }
  .tabelle-vorstand .v-zeile td,
  .tabelle-vorstand tr.offen td.v-aktionen { border-bottom: none; }
  .v-mobilhinweis { display: none; }

  /* Aufgeklappt: Nachname und Vorname stehen als ein Name beieinander, die
     Zusätze („nicht aktiv", „Vereinsmitglied") darunter. */
  .tabelle-vorstand tr.ist-offen .v-name strong { font-size: 1rem; }
  .tabelle-vorstand tr.ist-offen .v-vorname { font-size: 1rem; color: var(--dunkel); }
  .tabelle-vorstand tr.ist-offen .v-name small { display: block; margin-top: .15rem; }
  .tabelle-vorstand tr.ist-offen .v-name .marker { margin-left: .4rem; }

  /* Zugeklappt eine Zeile: „Nachname Vorname · Funktion". Vorname und
     Funktion in derselben Größe, dazwischen ein Mittelpunkt auf x-Höhe.
     Der Nachname trägt die Zeile und bleibt deshalb dunkel. */
  .tabelle-vorstand tr:not(.ist-offen) .v-name strong { color: var(--dunkel); }
  .tabelle-vorstand tr:not(.ist-offen) .v-vorname,
  .tabelle-vorstand tr:not(.ist-offen) .v-funktion {
    font-size: .88rem; font-weight: 400; color: var(--grau);
  }
  .tabelle-vorstand tr:not(.ist-offen):not(.zeile-voll) > td.v-funktion::before {
    content: '·'; display: inline; margin-right: .3rem; color: var(--grau-hell);
  }
}

/* Aktionen einer Veranstaltung im aufgeklappten Bereich — dieselbe Reihe wie
   im bisherigen Anmeldewerkzeug: veröffentlichen, Anmeldungen, bearbeiten,
   Link kopieren, löschen. */
.va-aktionen {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--linie);
}
.va-aktionen form { display: inline-block; margin: 0; }

/* --- Hilfsklassen ---------------------------------------------------------
   Stehen bewusst ganz am Ende: Sie sollen die Regeln davor uebersteuern,
   ohne dass dafuer !important noetig waere. */

/* Was nur am Schreibtisch Sinn ergibt — Importieren, CSV laden. Auf dem
   Telefon bleibt es weg; ueber dieselbe Adresse bleibt es erreichbar. */
@media (max-width: 780px) {
  .nur-breit { display: none; }
}

/* Ein Beispiel im Fliesstext der Bedingungen: abgesetzt, damit es sich vom
   Regelsatz darueber abhebt, ohne wie ein Warnhinweis auszusehen. */
.beispiel {
  background: var(--blau-blass); border-left: 3px solid var(--blau);
  border-radius: 0 8px 8px 0; padding: .7rem .9rem; margin: .2rem 0 .9rem;
}

/* Zwei Zeilen ueber die Lage der Unterlagen, je mit einem Stift am rechten
   Rand: „so viele Auszuege, so viele Buchungen — hier entlang zum Aendern". */
.lage-liste li {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem 0; border-bottom: 1px solid var(--linie);
}
.lage-liste li:last-child { border-bottom: none; }
.lage-liste li > span:first-child { flex: 1; min-width: 0; }

/* Die Terminvorschlaege unter einem Datumsfeld: kleine Verweise, keine
   Knopfreihe — sie sind eine Gedaechtnisstuetze, keine Handlung. */
.termin-vorschlag { display: block; margin-top: .3rem; line-height: 1.7; }
.termin-vorschlag .verweis-knopf { font-size: .78rem; }

/* Die Umsatzsuche steht in zwei Zeilen: oben das Suchfeld ueber die ganze
   Breite, darunter die vier Auswahlfelder. Zwischen ihnen war das Feld vorher
   nicht mehr als Suchfeld zu erkennen. */
.umsatz-leiste { display: grid; gap: .6rem; margin-bottom: .8rem; }
.umsatz-suchzeile { display: flex; gap: .6rem; align-items: center; }
.umsatz-suchzeile .suchfeld { flex: 1; min-width: 0; }
.umsatz-sortzeile {
  display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
}
.umsatz-sortzeile select { flex: 1 1 12rem; min-width: 0; width: auto; }
@media (max-width: 780px) {
  .umsatz-sortzeile select { flex: 1 1 46%; }
}

/* --- Bestand und Bewegung eines Geschaeftsjahres -------------------------- */
/* Die Anordnung ist die Rechnung: Anfangsbestand + Eingaenge - Ausgaben =
   Endbestand. Aussen die beiden Bestaende in voller Hoehe, in der Mitte die
   beiden Bewegungen halb so hoch und darunter, ueber beide Spalten, die
   Veraenderung. */
.bestands-gitter {
  display: grid; gap: 1rem; margin-bottom: 1.5rem;
  grid-template-columns: 1.15fr 1fr 1fr 1.15fr;
  grid-template-rows: 1fr 1fr;
  align-items: stretch;
}
.bestands-gitter > div { min-width: 0; }
.bestands-gitter > div > .zahl-karte { height: 100%; }
.bg-anfang { grid-column: 1; grid-row: 1 / 3; }
.bg-ein { grid-column: 2; grid-row: 1; }
.bg-aus { grid-column: 3; grid-row: 1; }
.bg-saldo { grid-column: 2 / 4; grid-row: 2; }
.bg-ende { grid-column: 4; grid-row: 1 / 3; }
/* Die halbhohen Kacheln tragen weniger Polster — sonst waeren sie nicht halb
   so hoch, sondern genauso hoch wie die aussen. */
.bg-ein > .zahl-karte, .bg-aus > .zahl-karte, .bg-saldo > .zahl-karte {
  padding: .7rem 1.1rem;
}
.bg-ein .zahl, .bg-aus .zahl, .bg-saldo .zahl { font-size: 1.35rem; }
.bg-saldo .zahl-karte { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }

@media (max-width: 900px) {
  /* Zwei Spalten: die Bestaende oben nebeneinander, darunter die Bewegungen. */
  .bestands-gitter {
    grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto;
  }
  .bg-anfang { grid-column: 1; grid-row: 1; }
  .bg-ende { grid-column: 2; grid-row: 1; }
  .bg-ein { grid-column: 1; grid-row: 2; }
  .bg-aus { grid-column: 2; grid-row: 2; }
  .bg-saldo { grid-column: 1 / 3; grid-row: 3; }
}

/* --- Ansicht als andere Rolle -------------------------------------------- */

/* Das Band steht ueber allem, auf jeder Seite: Wer vergisst, dass er sich in
   eine kleinere Rolle gesetzt hat, haelt die fehlenden Rubriken sonst fuer
   einen Fehler. Gelb wie ein Hinweis, nicht rot — es ist nichts kaputt. */
.rollen-band {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--gelb-blass); border: 1px solid var(--gelb);
  border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1.2rem;
  font-size: .88rem; line-height: 1.5;
}
.rollen-band > span { flex: 1 1 20rem; min-width: 0; }
.rollen-band .inline-formular { flex: none; margin: 0; }

/* Je Rolle eine Zeile: links, was sie ist, rechts der Weg hinein. */
.probe-form { border-top: 1px solid var(--linie); margin: 0; }
.probe-form:first-of-type { border-top: none; }
.probe-zeile {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 0;
}
.probe-zeile > div:first-child { flex: 1 1 22rem; min-width: 0; }
.probe-zeile small { display: block; color: var(--grau); font-size: .82rem; }
.probe-zeile .feld { margin: 0; }
@media (max-width: 780px) {
  .probe-zeile { gap: .5rem; }
  .probe-zeile > div:first-child { flex: 1 1 100%; }
}

/* --- Jubilaeen und Dauer der Mitgliedschaft (Uebersicht) ------------------ */

/* Je Anlass eine Gruppe: „25 Jahre dabei" und darunter, wer es betrifft. */
.jubel-gruppe { margin-bottom: 1.1rem; }
.jubel-gruppe:last-child { margin-bottom: 0; }
.jubel-gruppe h3 {
  font-size: .92rem; color: var(--blau-tief); margin: 0 0 .3rem;
  display: flex; align-items: baseline; gap: .5rem;
}
.liste-eng li { margin-bottom: .2rem; }

/* Waagerechte Balken: links die Stufe, rechts die Zahl. Die Spur bleibt
   sichtbar, auch wo der Balken null ist — sonst fehlte die Zeile optisch. */
.dauer-liste { display: grid; gap: .35rem; }
.dauer-zeile {
  display: grid; grid-template-columns: 9.5rem 1fr 2.2rem;
  align-items: center; gap: .6rem;
}
.dauer-titel { font-size: .86rem; color: var(--grau); }
.dauer-spur { background: var(--blau-blass); border-radius: 999px; height: 14px; }
.dauer-balken {
  background: var(--blau); border-radius: 999px; height: 100%; min-width: 2px;
}
.dauer-zahl { font-size: .86rem; font-weight: 700; text-align: right; }
@media (max-width: 780px) {
  .dauer-zeile { grid-template-columns: 7.5rem 1fr 2rem; gap: .4rem; }
  .dauer-titel { font-size: .8rem; }
}

/* Ein Suchfeld mit Kreuz am rechten Rand. Das Kreuz leert das Feld und laesst
   gleich neu suchen (siehe data-suche-leeren in public/admin.js); es steht
   nur da, solange etwas im Feld steht. Das eingebaute Kreuz der Browser
   bleibt weg — zwei Kreuze nebeneinander sind eines zu viel. */
.suchfeld { position: relative; display: flex; flex: 1; min-width: 0; }
.suchfeld > input { width: 100%; min-width: 0; padding-right: 2.1rem; }
.suchfeld > input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.suchfeld-leeren {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; padding: 0;
  background: none; border: none; border-radius: 50%; cursor: pointer;
  color: var(--grau); font-size: 1.05rem; line-height: 1;
}
.suchfeld-leeren:hover { background: var(--blau-blass); color: var(--dunkel); }
.suchfeld-leeren[hidden] { display: none; }

/* Der runde Plus-Knopf oben rechts. Auf dem Telefon vertritt er den
   ausgeschriebenen Knopf daneben („Mitglied anlegen", „Umlaufbeschluss
   starten"), der dort mit den uebrigen Knoepfen die halbe Seite fuellte. */
.werkzeug-plus { display: none; text-decoration: none; }
@media (max-width: 780px) {
  .werkzeug-plus { display: inline-flex; }
}

/* Ablage fuer eine PDF-Datei: ziehen oder auswaehlen. Das Auswahlfeld bleibt
   sichtbar — ohne JavaScript und mit der Tastatur ist es der einzige Weg. */
.datei-ablage-feld {
  display: block; padding: 1rem; border: 2px dashed var(--linie);
  border-radius: 10px; background: #fbfdfe; transition: border-color .15s, background .15s;
}
.datei-ablage-feld .datei-ablage-text {
  display: block; color: var(--grau); font-size: .9rem; margin-bottom: .6rem;
}
.datei-ablage.ist-bereit .datei-ablage-feld {
  border-color: var(--blau); background: var(--blau-blass);
}
.datei-ablage.hat-datei .datei-ablage-text { color: var(--dunkel); font-weight: 600; }
/* Wo das Feld selbst das Ziel ist (Nachweise zu einer Buchung), traegt es die
   Klasse — die Huelle .datei-ablage gibt es dort nicht. */
.datei-ablage-feld.ist-bereit {
  border-color: var(--blau); background: var(--blau-blass);
}
.datei-ablage-feld.hat-datei .datei-ablage-text { color: var(--dunkel); font-weight: 600; }

/* --- Belegablage ---------------------------------------------------------- */
/* Dieselbe Ablage, aber mit zwei Knoepfen darin: fotografieren oder Datei
   waehlen. Der Rahmen ist hier das Ziel zum Hineinziehen, deshalb tragen
   `ist-bereit` und `hat-datei` am Feld selbst. */
.beleg-ablage { text-align: center; padding: 1.4rem 1rem; }
.beleg-ablage.ist-bereit { border-color: var(--blau); background: var(--blau-blass); }
.beleg-ablage.hat-datei .datei-ablage-text { color: var(--dunkel); font-weight: 600; }
.beleg-ablage .beleg-knoepfe { justify-content: center; margin: 0 0 .6rem; }
.beleg-ablage .feld-tipp { display: block; margin-top: .2rem; }

/* Das Dateifeld steckt im Knopf: sichtbar ist der Knopf, bedienbar bleibt
   das Feld — auch mit der Tastatur, deshalb nicht `hidden`. */
.datei-knopf { position: relative; overflow: hidden; cursor: pointer; }
.datei-knopf input[type="file"] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
  cursor: pointer;
}
.datei-knopf:focus-within { outline: 3px solid rgba(83, 195, 255, .45); outline-offset: 2px; }

/* --- Angaben als Zeilenliste (Einstellungen) ------------------------------ */
/* Eine Angabe je Zeile: links Bezeichnung und Wert untereinander, rechts in
   Grau Stift und Papierkorb. Das Formular zum Ändern klappt darunter auf. */
.angaben-liste { list-style: none; display: grid; gap: .4rem; margin: .8rem 0 1.4rem; }
.angaben-liste > li {
  border: 1px solid var(--linie); border-radius: 10px;
  background: var(--flaeche); padding: .55rem .5rem .55rem .9rem;
}
.angabe-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.angabe-text { min-width: 0; display: flex; flex-wrap: wrap; gap: .1rem 1rem; }
.angabe-label { font-size: .84rem; color: var(--grau); flex: 0 0 15rem; }
.angabe-wert { font-size: .95rem; overflow-wrap: anywhere; min-width: 0; }
.angabe-wert.leer { color: var(--grau-hell); font-style: italic; }
.angabe-knoepfe { display: flex; align-items: center; gap: .1rem; flex: none; }
.angabe-knoepfe form { display: flex; margin: 0; }
.angabe-formular {
  margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--linie);
}

@media (max-width: 780px) {
  .angabe-label { flex: 1 1 100%; }
}

/* Ein Beleg je Zeile: links der Name, der die Datei öffnet, rechts die
   beiden Symbole. Eine eigene Liste statt .dokument-liste — deren Regeln
   machen aus jedem Verweis eine eigene Kachel. */
.beleg-liste { list-style: none; display: grid; gap: .5rem; margin: 1rem 0; }
.beleg-liste > li {
  border: 1px solid var(--linie); border-radius: 10px;
  background: var(--flaeche); padding: .55rem .5rem .55rem .9rem;
}
.beleg-liste .dokument-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}
.beleg-liste .dokument-titel { min-width: 0; }
.beleg-liste .dokument-titel a {
  font-weight: 600; text-decoration: none; overflow-wrap: anywhere;
}
.beleg-liste .dokument-titel a:hover { text-decoration: underline; }
.beleg-liste .dokument-knoepfe {
  display: flex; align-items: center; gap: .1rem; flex: none;
}
/* Das Löschen steckt in einem Formular — als Inline-Block säße es sonst auf
   der Schriftlinie und damit einen Punkt tiefer als das Stiftsymbol. */
.beleg-liste .dokument-knoepfe form { display: flex; margin: 0; }
.beleg-formular {
  margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--linie);
}

/* Die aufgenommene Seite vor dem Übernehmen: gross genug, um zu erkennen,
   ob der Zuschnitt sitzt, und klein genug, um daneben noch den Namen zu
   sehen. */
.beleg-vorschau { margin-top: .9rem; }
.beleg-vorschau img {
  display: block; max-width: 100%; max-height: 46vh; margin: 0 auto .6rem;
  border: 1px solid var(--linie); border-radius: 8px; background: #fff;
}
.beleg-vorschau .feld { max-width: 26rem; }

@media (max-width: 780px) {
  .nur-schmal { display: inline; }
}
/* Der zweite Selektor sticht `.knopf-reihe-eng .knopf` aus — sonst bliebe der
   Scan-Knopf auf dem Schreibtisch stehen, wo er ins Leere führt. */
@media (min-width: 781px) {
  .nur-schmal,
  .knopf-reihe .nur-schmal { display: none; }
}

/* --- Organisation --------------------------------------------------------- */
/* Kachelfeld der wiederkehrenden Unternehmungen. */
.org-kacheln {
  display: grid; gap: .8rem; margin-top: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.org-kachel {
  display: block; padding: .9rem 1rem; border: 1px solid var(--linie);
  border-radius: 10px; background: #fff; text-decoration: none; color: var(--dunkel);
}
.org-kachel:hover { border-color: var(--blau); box-shadow: 0 2px 10px rgba(20, 60, 90, .07); }
.org-kachel strong { display: block; margin-bottom: .15rem; }
.org-kachel small { display: block; font-size: .82rem; color: var(--grau); }

/* Ein Durchgang. Der juengste steht offen, die frueheren darunter — die
   Trennlinie haelt sie auseinander, ohne jede Kachel einzurahmen. */
.org-termin { border-top: 1px solid var(--linie); margin-top: .7rem; padding-top: .3rem; }
.org-termin:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.org-zufuegen, .org-termin-fuss { margin-top: .9rem; }

/* Erledigtes bleibt stehen und wird nur leiser: Am Ende soll ablesbar sein,
   was alles dazugehoert hat, nicht nur was noch offen ist. */
.tabelle-posten .org-posten.ist-erledigt td { color: var(--grau-hell); }
.tabelle-posten .org-posten.ist-erledigt strong { text-decoration: line-through; font-weight: 500; }
.org-haken { width: 2.4rem; }
.haken-knopf {
  width: 22px; height: 22px; padding: 0; border: 1px solid var(--linie);
  border-radius: 6px; background: #fff; color: var(--blau-tief);
  font-size: .85rem; line-height: 1; cursor: pointer;
}
.haken-knopf:hover { border-color: var(--blau); }
.haken-knopf[aria-pressed="true"] { background: var(--blau-blass); border-color: var(--blau); }

/* --- Dokumente ------------------------------------------------------------ */
/* Dieselbe gestrichelte Flaeche wie bei den Belegen, nur mittig und mit
   Symbol — hier duerfen mehrere Dateien auf einmal hinein. */
.dokument-ablage .datei-ablage-feld { text-align: center; padding: 1.6rem 1rem; }
.dokument-ablage .ablage-knoepfe { margin: .7rem 0 .6rem; }
.ablage-symbol { display: block; width: 32px; height: 32px; margin: 0 auto .5rem; color: var(--grau-hell); }
.ablage-symbol svg { width: 100%; height: 100%; }
.ablage-knoepfe { justify-content: center; margin: 0 0 .5rem; }

.tabelle-dokumente .dok-name small { display: block; color: var(--grau); font-size: .82rem; }
.tabelle-dokumente .dok-name .dok-notiz { margin-top: .15rem; }
/* Stift und Papierkorb stehen dicht beieinander, das Formular um den
   Papierkorb darf keine eigene Luft mitbringen. */
.dok-aktionen .inline-formular { margin-left: 0; }

/* Die Ablage laesst sich von Hand ordnen. Angefasst wird nur der Griff —
   `touch-action: none` haelt auf dem Tablett das Scrollen davon ab, sobald
   der Finger dort liegt, sonst zoege man die Seite statt der Zeile. */
.dok-griff-zelle { width: 1.9rem; padding-right: 0; }
.dok-griff {
  display: block; width: 1.5rem; color: var(--grau);
  cursor: grab; touch-action: none;
}
.dok-griff:hover { color: var(--dunkel); }
.dok-griff svg { display: block; width: 1.15rem; height: 1.15rem; }
tr.wird-gezogen { background: var(--blau-blass); }
tr.wird-gezogen .dok-griff { cursor: grabbing; color: var(--blau-tief); }
/* Waehrend des Ziehens faengt sonst jede Bewegung an, Text zu markieren. */
tbody.sortiert-gerade { user-select: none; }
.dok-hinweis { margin-top: .6rem; }
.dok-stand { color: var(--gruen); }
.dok-stand.dok-stand-fehler { color: var(--rot); }
.dok-stand:empty { display: none; }

/* Die Art gehoert bei den Unterlagen eines Mitglieds mit in die Ablage: Sie
   gilt fuer alles, was in einem Rutsch hochgeht, und muss deshalb vor der
   Auswahl der Dateien dastehen. */
.ablage-art { max-width: 18rem; margin: 0 auto .2rem; text-align: left; }
.ablage-art .feld { margin: 0; }
/* Die Vorschau steht unter dem Formular der aufgeklappten Zeile. */
.dok-formularzeile .m-dokument-vorschau { margin-top: 1rem; }

/* Rueckmeldung beim Lesen eines Freistellungsbescheids: steht unter der
   Dateiablage und faellt nur so weit auf wie noetig. */
.bescheid-befund { display: block; margin-top: .3rem; color: var(--blau-tief); }

/* Die Herkunft steht direkt hinter dem Wert („Amtsgericht Bayreuth aus
   ‚Rechtliches'") — ohne Abstand kleben beide aneinander. Als Rand und nicht
   als Leerzeichen im Markup: So bleibt der Abstand auch dann erhalten, wenn
   der Wert umbricht. */
.angabe-wert small { margin-left: .4em; }

/* Ein Bescheid je Zeile — Aufbau wie die Angabenliste der Einstellungen:
   links das Datum, dahinter in Grau, worum es geht, rechts die Symbole. */
.bescheid-liste { margin: 1rem 0 1.2rem; }
.bescheid-text { align-items: baseline; gap: .1rem .6rem; }
.bescheid-text small { font-size: .84rem; }
.bescheid-bemerkung { margin: .25rem 0 0; }

/* Die Ablage des Bescheid-Bogens sieht aus wie die der Rubrik Dokumente.
   Abgeschickt wird hier aber erst mit „Speichern" — die Datei gehoert zu
   einem Formular mit weiteren Feldern. */
.bescheid-ablage .datei-ablage-feld { text-align: center; padding: 1.4rem 1rem; }
.bescheid-ablage .ablage-knoepfe { justify-content: center; margin: .6rem 0 .4rem; }
.bescheid-ablage .feld-tipp { display: block; }

/* --- Kontoumsätze, Kontoauszüge, Belege (seit 2026-09-19) ------------------
   Belege und Kontoauszüge haben eigene Rubriken mit einer Kachel je Jahr.
   Aufbau wie beim Förderverein RW, in den Farben und Formen dieser
   Verwaltung. */

.seiten-einleitung { color: var(--grau); margin: -.6rem 0 1.3rem; max-width: 60rem; }

/* Kachelkopf mit Kalenderblatt vor dem Jahr und Marken hinter der Kurzzeile. */
.klapp-symbol { flex: none; width: 20px; height: 20px; color: var(--blau-tief); line-height: 0; }
.klapp-symbol svg { width: 100%; height: 100%; }
.klapp-marken { display: inline-flex; flex-wrap: wrap; gap: .3rem; flex: none; }
.beleg-jahr .klapp-titel, .auszug-jahr .klapp-titel { font-size: 1.15rem; letter-spacing: -.01em; }
.beleg-jahr .klapp-kurz, .auszug-jahr .klapp-kurz { flex: 0 1 auto; }
.beleg-jahr .klapp-pfeil, .auszug-jahr .klapp-pfeil { margin-left: auto; }

/* Kleine Statusmarken: zugeordnet, prüfen, KI liest … */
.status-marke {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-size: .76rem; font-weight: 600; line-height: 1.35;
  border-radius: 999px; padding: .12rem .6rem; border: 1px solid transparent;
}
.status-marke svg { width: 12px; height: 12px; flex: none; }
.status-ok { color: var(--gruen); background: var(--gruen-blass); border-color: #bfe3d2; }
.status-warn { color: var(--gelb); background: var(--gelb-blass); border-color: #f0dcae; }
.status-rot { color: var(--rot); background: var(--rot-blass); border-color: #f3c9c6; }
.status-blau { color: var(--blau-tief); background: var(--blau-blass); border-color: #c5e5f8; }
.status-still { color: var(--grau); background: #eef3f6; }
a .status-marke { text-decoration: none; }

/* Ablagefläche in der Jahreskachel: Wolke, Text, Knopf — mittig. */
.beleg-ablage-form, .auszug-ablage { margin: 0 0 1rem; }
.beleg-ablage-form .datei-ablage-feld, .auszug-ablage .datei-ablage-feld { padding: 1.5rem 1rem 1.2rem; }
.beleg-ablage .datei-ablage-text { margin-bottom: .5rem; }
.ablage-fuss { text-align: center; margin: .45rem 0 0; }

/* --- Belege: eine Zeile je Beleg ------------------------------------------ */
.beleg-reihen { list-style: none; margin: 0; padding: 0; }
.beleg-reihe { border-top: 1px solid var(--linie); }
.beleg-reihe:first-child { border-top: none; }
.beleg-kopf {
  display: grid; grid-template-columns: 2.4rem 6.2rem minmax(0, 1fr) auto 1.4rem;
  align-items: center; gap: .9rem; width: 100%;
  background: none; border: none; padding: .7rem .4rem; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 8px;
}
.beleg-kopf:hover { background: #f7fbfe; }
.beleg-kopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }
.beleg-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 8px;
  background: var(--blau-blass); color: var(--blau-tief);
  font-weight: 700; font-variant-numeric: tabular-nums; font-size: .95rem;
}
.beleg-tag { font-size: .88rem; color: var(--grau); font-variant-numeric: tabular-nums; }
.beleg-titel { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.beleg-marken { display: inline-flex; gap: .3rem; justify-self: end; flex-wrap: wrap; }
.beleg-pfeil { color: var(--grau-hell); line-height: 0; }
.beleg-pfeil svg { width: 18px; height: 18px; transition: transform .18s; }
.beleg-kopf.ist-offen .beleg-pfeil svg { transform: rotate(180deg); }
.beleg-kopf.ist-offen { background: #f7fbfe; }
.beleg-mehr { padding: .4rem .6rem 1.1rem 3.8rem; }
.beleg-einzelheiten .daten { margin-bottom: .8rem; }
.beleg-taten { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .9rem; }
.beleg-taten .inline-formular { margin-left: auto; }
.beleg-block { margin-top: .9rem; }
.beleg-block .nachweis-titel { margin-bottom: .4rem; }

.beleg-suche { margin: 0 0 1rem; max-width: 34rem; }
.beleg-suche input { width: 100%; }
.beleg-suche p { margin: .35rem 0 0; }

/* --- Beleg einreichen ---------------------------------------------------- */
.einreichen-titel { display: none; }
.einreichen-einleitung { color: var(--grau); max-width: 44rem; }
.einreichen-formular { max-width: 44rem; }
.einreichen-ablage { text-align: center; padding: 1.5rem 1rem 1.2rem; margin-bottom: .8rem; }
.einreichen-ablage .feld-tipp { display: block; margin-top: .3rem; }
.einreichen-kamera { display: flex; flex-direction: column; align-items: stretch; gap: .55rem; margin-bottom: .9rem; }
.einreichen-kamera p { margin: 0; text-align: center; }
.einreichen-kamera .plaettchen { justify-content: center; align-self: center; }
.knopf-gross {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  font-size: 1.05rem; padding: .95rem 1.2rem; border-radius: 12px;
}
.knopf-symbol { width: 24px; height: 24px; line-height: 0; }
.knopf-symbol svg { width: 100%; height: 100%; }
.einreichen-dateien { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.einreichen-dateien li {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--linie); border-radius: 9px; background: #fbfdfe;
  padding: .35rem .4rem .35rem .8rem;
}
.einreichen-dateiname { font-weight: 600; min-width: 0; overflow-wrap: anywhere; flex: 1; }
.einreichen-vorschau {
  width: 44px; height: 44px; object-fit: cover; flex: none;
  border-radius: 6px; border: 1px solid var(--linie); background: #fff;
}
.einreichen-dateien .symbol-knopf { font-size: 1.2rem; line-height: 1; padding: .2rem .5rem; }
.einreichen-wahl { border: none; margin: 0 0 .9rem; padding: 0; }
.einreichen-wahl legend { font-weight: 600; font-size: .92rem; margin-bottom: .5rem; }
.einreichen-wahl .wahl {
  display: flex; align-items: flex-start; gap: .65rem; cursor: pointer;
  border: 1px solid var(--linie); border-radius: 10px; padding: .7rem .9rem;
  margin-bottom: .45rem; background: var(--flaeche);
}
.einreichen-wahl .wahl:hover { border-color: var(--blau); }
.einreichen-wahl .wahl:has(input:checked) { border-color: var(--blau-tief); background: var(--blau-blass); }
.einreichen-wahl .wahl input { margin-top: .25rem; flex: none; }
.einreichen-konto { margin-bottom: .4rem; }
.feld-tipp.feld-fehler { color: var(--rot); }
.feld-tipp.feld-gut { color: var(--gruen); }

/* --- Kontoauszüge: eine Zeile je Auszug ---------------------------------- */
.auszug-reihen { list-style: none; margin: 0; padding: 0; }
.auszug-reihe { border-top: 1px solid var(--linie); }
.auszug-reihe:first-child { border-top: none; }
/* Nummer, Zeitraum und Salden links, die Marken rechts. Wird es eng, rücken
   die Marken in eine zweite Zeile, statt die Salden zu zerbrechen. */
.auszug-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem;
  padding: .65rem .4rem;
}
.auszug-nummer { font-weight: 700; text-decoration: none; white-space: nowrap; min-width: 6.5rem; }
.auszug-nummer:hover { text-decoration: underline; }
.auszug-zeitraum { white-space: nowrap; }
.auszug-saldo { font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--grau); white-space: nowrap; }
.auszug-saldo strong { color: var(--dunkel); }
.auszug-marken {
  display: inline-flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end;
  margin-left: auto;
}
.auszug-pfeil { flex: none; }
.auszug-pfeil svg { transition: transform .18s; }
.auszug-pfeil.ist-offen svg { transform: rotate(180deg); }
.auszug-mehr { padding: .2rem .4rem 1.2rem; }
.auszug-probe { font-variant-numeric: tabular-nums; }
.auszug-taten { margin-top: 1rem; align-items: center; }
.auszug-taten .inline-formular { margin: 0; }
.positionen { list-style: none; margin: .4rem 0 0; padding: 0; }
.position {
  display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) auto 8.5rem;
  gap: .3rem .9rem; align-items: baseline;
  padding: .55rem .2rem; border-top: 1px solid var(--linie);
}
.position:first-child { border-top: none; }
.position-tag { font-size: .88rem; color: var(--grau); font-variant-numeric: tabular-nums; }
.position-text { min-width: 0; overflow-wrap: anywhere; }
.position-text small { display: block; font-size: .84rem; color: var(--grau); }
.position-text small.gedaempft { color: var(--grau-hell); }
.position-betrag { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.position-betrag.minus { color: var(--rot); }
.position-betrag.plus { color: var(--gruen); }
.position-stand { justify-self: end; }
/* Der Knopf „Hochladen" steht in einer engen Knopfreihe, deren Regel ein
   display mitbringt — ohne diese Zeile bliebe er sichtbar, obwohl das Skript
   ihn ausblendet (abgeschickt wird dort beim Hineinziehen). */
.auszug-ablage [data-ablage-senden][hidden] { display: none; }

/* Was ein Skript ein- und ausblendet, darf keine eigene Anzeige behalten:
   Die Regel für [hidden] ist nicht spezifischer als eine Klasse. */
.beleg-reihe[hidden], .beleg-jahr[hidden], .beleg-suche[hidden], .beleg-mehr[hidden],
.einreichen-dateien[hidden], .einreichen-konto[hidden], .einreichen-inhalt[hidden],
.auszug-mehr[hidden] { display: none; }

@media (min-width: 781px) {
  .einreichen-kamera.nur-handy { display: none; }
}

@media (max-width: 780px) {
  .seiten-einleitung { margin-top: 0; font-size: .92rem; }
  /* Am Telefon steht das Formular offen oben — ohne Klappkopf, mit eigener
     Überschrift. Die Ablageflächen gibt es dort nicht; hineinziehen lässt
     sich am Telefon nichts. */
  .einreichen-kachel > .klapp-zeile { display: none; }
  #einreichen-inhalt[hidden] { display: block; }
  .einreichen-kachel > .einreichen-inhalt { border-top: none; padding: 1.1rem 1.1rem 1.3rem; }
  .einreichen-titel { display: block; font-size: 1.2rem; margin: 0 0 .4rem; }
  .einreichen-einleitung { font-size: .9rem; }
  .einreichen-ablage.nur-breit, .beleg-ablage-form.nur-breit { display: none; }

  .beleg-kopf {
    grid-template-columns: 2.2rem minmax(0, 1fr) 1.2rem;
    grid-template-areas: "nr titel pfeil" "nr tag pfeil" "nr marken pfeil";
    gap: .15rem .7rem; padding: .65rem .2rem;
  }
  .beleg-nr { grid-area: nr; align-self: start; }
  .beleg-titel { grid-area: titel; }
  .beleg-tag { grid-area: tag; font-size: .8rem; }
  .beleg-marken { grid-area: marken; justify-self: start; margin-top: .15rem; }
  .beleg-pfeil { grid-area: pfeil; }
  .beleg-mehr { padding: .3rem .2rem 1rem; }
  .beleg-taten .inline-formular { margin-left: 0; }

  .auszug-zeile {
    display: grid; grid-template-columns: minmax(0, 1fr) 2rem;
    grid-template-areas: "nummer pfeil" "zeitraum pfeil" "saldo pfeil" "marken pfeil";
    gap: .2rem .6rem;
  }
  .auszug-nummer { grid-area: nummer; }
  .auszug-zeitraum { grid-area: zeitraum; }
  .auszug-saldo { grid-area: saldo; }
  .auszug-marken { grid-area: marken; justify-content: flex-start; margin-left: 0; }
  .auszug-pfeil { grid-area: pfeil; }
  .position {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "tag betrag" "text text" "stand stand";
    gap: .15rem .6rem;
  }
  .position-tag { grid-area: tag; }
  .position-betrag { grid-area: betrag; }
  .position-text { grid-area: text; }
  .position-stand { grid-area: stand; justify-self: start; }
  /* Eine Marke sagt mehr als die Kurzzeile — ist eine da, tritt die zurück. */
  .klapp-kopf:has(.klapp-marken) .klapp-kurz { display: none; }
}

/* --- Zuwendungsbestätigungen: eine Zeile je Bestätigung (seit 2026-09-24) ---
   Gebaut wie die Zeilen der Belege: Nummer, Tag, Name, dahinter Marken,
   Betrag und der Pfeil zum Aufklappen. Der Betrag steht rechtsbündig in
   Ziffern gleicher Breite, damit die Spalte sich lesen lässt wie in der Kasse. */
.zuw-reihen { list-style: none; margin: 0; padding: 0; }
.zuw-reihe { border-top: 1px solid var(--linie); }
.zuw-reihe:first-child { border-top: none; }
.zuw-kopf {
  display: grid; grid-template-columns: auto 6rem minmax(0, 1fr) auto auto 1.4rem;
  align-items: center; gap: .9rem; width: 100%;
  background: none; border: none; padding: .7rem .4rem; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: 8px;
}
.zuw-kopf:hover, .zuw-kopf.ist-offen { background: #f7fbfe; }
.zuw-kopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }
.zuw-nr {
  justify-self: start; padding: .2rem .5rem; border-radius: 8px;
  background: var(--blau-blass); color: var(--blau-tief);
  font-weight: 700; font-variant-numeric: tabular-nums; font-size: .88rem; white-space: nowrap;
}
.zuw-tag { font-size: .88rem; color: var(--grau); font-variant-numeric: tabular-nums; }
.zuw-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.zuw-marken { display: inline-flex; gap: .3rem; justify-self: end; flex-wrap: wrap; }
.zuw-betrag {
  font-weight: 700; text-align: right; white-space: nowrap; min-width: 5.5rem;
  font-variant-numeric: tabular-nums;
}
.zuw-kopf.ist-offen .beleg-pfeil svg { transform: rotate(180deg); }
.zuw-mehr { padding: .4rem .6rem 1.1rem 6.2rem; }
.beleg-taten .knopf svg { width: 15px; height: 15px; vertical-align: -2px; margin-left: .2rem; }
.beleg-block .plaettchen svg { width: 13px; height: 13px; }
/* Der Papierkorb steht rechts (.beleg-taten .inline-formular); der Versand
   gehoert zu den Knoepfen links und darf nicht mitrutschen. */
.beleg-taten .zuw-senden { margin-left: 0; }
.zuw-mehr[hidden], .zuw-reihe[hidden] { display: none; }

/* Neben der Seitenleiste bleibt bis etwa 1024 px zu wenig Breite für sechs
   Spalten — der Name bräche Silbe für Silbe um. Dort gilt schon die
   zweizeilige Form des Telefons: Name und Betrag oben, Nummer und Tag darunter. */
@media (max-width: 1024px) {
  .zuw-kopf {
    grid-template-columns: auto minmax(0, 1fr) auto 1.2rem;
    grid-template-areas: "name name betrag pfeil" "nr tag tag pfeil" "marken marken marken pfeil";
    gap: .2rem .6rem; padding: .65rem .2rem;
  }
  .zuw-name { grid-area: name; }
  .zuw-betrag { grid-area: betrag; min-width: 0; }
  .zuw-nr { grid-area: nr; font-size: .78rem; padding: .05rem .4rem; }
  .zuw-tag { grid-area: tag; font-size: .8rem; }
  .zuw-marken { grid-area: marken; justify-self: start; margin-top: .15rem; }
  .zuw-kopf .beleg-pfeil { grid-area: pfeil; }
  .zuw-marken:empty { display: none; }
  .zuw-mehr { padding: .3rem .2rem 1rem; }
}

/* --- Zuwendungsbestätigung ausstellen (seit 2026-09-24) -------------------
   Das Formular steht in der Rubrik und am Kontoumsatz. Darunter, zugeklappt,
   was in jeder Bestätigung gleich ist; dann der Haken „Angaben geprüft". */
.zuw-formular .feld-gitter { margin-bottom: .6rem; }
.zuw-fest { margin: .2rem 0 .9rem; border: 1px solid var(--linie); border-radius: 10px;
  padding: .55rem .8rem; background: #f7fbfe; }
.zuw-fest summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--blau-tief); }
.zuw-fest .daten { margin: .6rem 0 .2rem; }
.zuw-geprueft { margin: .4rem 0 .8rem; }
.zuw-plan { border: 1px solid var(--linie); border-radius: 10px; padding: .8rem 1rem;
  margin: 0 0 1rem; }
.zuw-plan-neu { border-color: #f0dcae; background: var(--gelb-blass); }
.zuw-plan details { margin-top: .6rem; }
.zuw-plan summary { cursor: pointer; }
.zuw-dateien { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem; margin: 0 0 1.2rem; }
.zuw-datei { border: 1px solid var(--linie); border-radius: 10px; padding: .8rem 1rem; }
.zuw-datei .nachweis-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.zuw-datei .inline-formular { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: .6rem 0 0; }
.zuw-unterschrift { display: block; max-width: 100%; max-height: 70px; margin: .3rem 0 .6rem;
  background: #fff; }

/* --- Elternbeirat (seit 2026-09-28) ---------------------------------------
   Das Zeichen aus dem Logo (die vier Figuren) steht in der Seitenleiste,
   das ganze Logo auf der Anmeldeseite und der Startseite. */
.kopf-logo { width: 34px; height: 34px; flex: none; object-fit: contain; }
.eb-logo { display: block; width: min(300px, 100%); height: auto; margin: 0 0 1.2rem; }
.anmelde-karte .eb-logo { width: min(240px, 100%); margin: 0 auto 1.2rem; }
.eb-start { max-width: 640px; margin: 8vh auto; padding: 0 16px; }
.eb-start .karte { padding: 1.6rem 1.8rem; }
.eb-start h1 { font-size: 1.5rem; margin-bottom: .6rem; }
.eb-start-liste { list-style: none; padding: 0; margin: .4rem 0 0; }
.eb-start-liste li { padding: .55rem 0; border-top: 1px solid var(--linie); }
.eb-start-liste li:first-child { border-top: 0; }
.eb-start-fuss { margin-top: 1.4rem; font-size: .84rem; color: var(--grau); }
.eb-start-fuss a { color: inherit; }
/* Mitgliederliste: gewählt von–bis und die Marke „ausgeschieden". */
.tabelle-ebm td.ebm-zeit { white-space: nowrap; }

/* Nur lesen (Rolle „Mitglied"): Was ändern würde, steht gar nicht erst da.
   Die Route lehnt es ohnehin ab (auth.darf); hier geht es nur darum, keine
   Knöpfe zu zeigen, die bloß eine Absage bringen. Aufklapp-Köpfe
   (.klapp-kopf) bleiben, sie ändern nichts. */
.nur-lesen .admin-inhalt form[method="post"]:not(.bleibt),
.nur-lesen .admin-inhalt .schwebe-plus,
.nur-lesen .admin-inhalt .symbol-knopf,
.nur-lesen .admin-inhalt button[data-aufklappen]:not(.klapp-kopf),
.nur-lesen .admin-inhalt .datei-ablage,
.nur-lesen .admin-inhalt [data-nur-schreibend] { display: none !important; }
.eb-start-karte { text-align: center; max-width: 420px; margin: 0 auto; }
.eb-start-karte .eb-logo { margin: .4rem auto 1.6rem; }
.eb-start-karte .eb-start-fuss { margin-top: 1.2rem; }