/* Prootle – Grundgestaltung, angelehnt an die Access-Formulare:
   Beschriftungen blau links, Eingabefelder hellblau rechts, einheitliche Buttons unten. */

:root {
  --blau: #2f6fb3;
  --blau-dunkel: #1f4f86;
  --blau-hell: #eaf2fb;
  --feld: #f3f8fd;
  --rand: #b9cce3;
  --text: #1d2733;
  --text-leise: #5b6b7d;
  --flaeche: #f4f6f9;
  --karte: #ffffff;
  --gruen: #2e8b57;
  --rot: #c0392b;
  --gelb: #d4a017;
  --hilfezeile: 2.25rem;
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--flaeche);
  padding-bottom: var(--hilfezeile);
}
a { color: var(--blau); }

/* Kopf und Menüband */
.kopf { background: var(--karte); border-bottom: 1px solid var(--rand); }
.kopf-oben {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1rem;
}
.marke { font-size: 1.35rem; font-weight: 700; color: var(--blau-dunkel); text-decoration: none; letter-spacing: .02em; }
.verein { font-weight: 600; color: var(--text-leise); }
.benutzer { margin-left: auto; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.benutzer form { margin: 0; }
button.link { background: none; border: 0; padding: 0; color: var(--blau); cursor: pointer; font: inherit; text-decoration: underline; }

.menueband { display: flex; gap: .25rem; padding: 0 1rem; overflow-x: auto; background: var(--blau-hell); border-top: 1px solid var(--rand); }
.menueband a, .menueband span {
  padding: .55rem .9rem; text-decoration: none; color: var(--blau-dunkel); white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.menueband a:hover { background: #dbe8f6; }
.menueband a.aktiv { border-bottom-color: var(--blau); font-weight: 600; }
.menueband .spaeter { color: #9aaabb; cursor: default; }

/* Inhalt */
.inhalt { max-width: 1320px; margin: 0 auto; padding: 1.25rem 1rem; }
.formularkopf { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.formularkopf h1 { font-size: 1.7rem; font-weight: 400; margin: 0; }
.formularkopf .rechts { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 4px; padding: 1.25rem; }
.einleitung { color: var(--text-leise); margin-top: 0; }

/* Gruppenrahmen wie „Diese Sitzung“ / „Nächste Sitzung“ */
fieldset { border: 1px solid var(--rand); border-radius: 4px; margin: 0 0 1rem; padding: .75rem 1rem 1rem; }
legend { color: var(--text-leise); padding: 0 .4rem; }
.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 0 1.25rem; }

/* Formularzeile: Beschriftung links, Feld rechts */
.zeile { display: grid; grid-template-columns: 11rem 1fr; gap: .75rem; align-items: start; margin: .4rem 0; }
.zeile > label { color: var(--blau); padding-top: .35rem; }
.pflicht { color: var(--rot); margin-left: .15rem; }
/* Auswahlpunkte (z. B. Logo-Darstellung): Punkt und Text in einer Zeile */
.eingabe div:has(> div > label > input[type=radio]) { display: grid; gap: .3rem; padding-top: .3rem; }
.eingabe label:has(> input[type=radio]) { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.eingabe input:not([type=checkbox]):not([type=radio]), .eingabe select, .eingabe textarea {
  width: 100%; padding: .35rem .5rem; font: inherit; color: var(--text);
  background: var(--feld); border: 1px solid var(--rand); border-radius: 3px;
}
.eingabe input:focus, .eingabe select:focus, .eingabe textarea:focus {
  outline: 2px solid var(--blau); outline-offset: 0; background: #fff;
}
.zeile-haken .eingabe { padding-top: .4rem; }
.eingabe input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--blau); }
.fehler .eingabe input, .fehler .eingabe select { border-color: var(--rot); }
.fehlertext { color: var(--rot); font-size: .9rem; margin-top: .2rem; }

/* Buttons – einheitlich, wie die Button-Leiste unten in Access */
.knopf {
  display: inline-block; min-width: 8.5rem; padding: .5rem 1rem; text-align: center;
  font: inherit; color: var(--blau-dunkel); text-decoration: none; cursor: pointer;
  background: linear-gradient(#f4f8fd, #d8e6f5); border: 1px solid #9db8d6; border-radius: 4px;
}
.knopf:hover { background: linear-gradient(#fff, #e3eefa); }
.knopf.haupt { color: #fff; background: linear-gradient(#3b7fc4, var(--blau)); border-color: var(--blau-dunkel); }
.knopfleiste { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rand); }
.knopfleiste .rechts { margin-left: auto; display: flex; gap: .75rem; }

/* Listen */
table.liste { width: 100%; border-collapse: collapse; background: var(--karte); }
.liste th { text-align: left; font-weight: 600; color: var(--text-leise); border-bottom: 2px solid var(--rand); padding: .5rem; }
.liste td { border-bottom: 1px solid #e3eaf2; padding: .5rem; }
.liste tr:hover td { background: var(--blau-hell); }
.liste .inaktiv td { color: #98a4b1; }
.suche { display: flex; gap: .5rem; }
.suche input, .suche select { padding: .4rem .5rem; border: 1px solid var(--rand); border-radius: 3px; background: var(--feld); font: inherit; }

.ampel { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: middle; }
.ampel-gruen { background: var(--gruen); }
.ampel-gelb { background: var(--gelb); }
.ampel-rot { background: var(--rot); }
.marke-klein { font-size: .8rem; padding: .1rem .45rem; border-radius: 3px; background: #eef1f4; color: var(--text-leise); }

/* Vereinsauswahl */
.auswahl { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.auswahl button {
  width: 100%; text-align: left; padding: .8rem 1rem; font: inherit; cursor: pointer;
  background: var(--karte); border: 1px solid var(--rand); border-radius: 4px;
}
.auswahl button:hover { border-color: var(--blau); background: var(--blau-hell); }
.auswahl small { color: var(--text-leise); }

/* Meldungen */
.meldung { padding: .6rem 1rem; border-radius: 4px; margin-bottom: 1rem; border: 1px solid; }
.meldung-success { background: #e9f6ee; border-color: #a9d8bb; }
.meldung-error { background: #fbeceb; border-color: #e6b0aa; }

/* Anmeldeseite */
.anmeldung { max-width: 30rem; margin: 3rem auto; }
.anmeldung .zeile { grid-template-columns: 7rem 1fr; }

/* Hilfezeile – wie die Statuszeile in Access */
.hilfezeile {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--hilfezeile);
  display: flex; align-items: center; padding: 0 1rem;
  background: #e9eef4; border-top: 1px solid var(--rand); color: var(--text-leise); font-size: .9rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
#hilfetext { overflow: hidden; text-overflow: ellipsis; }

/* Register (Tabs) wie in den Access-Formularen */
.register { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: -1px; position: relative; }
.register a, .register span {
  padding: .45rem 1rem; text-decoration: none; color: var(--text);
  background: #e7edf4; border: 1px solid var(--rand); border-bottom: 0; border-radius: 4px 4px 0 0;
}
.register a:hover { background: var(--blau-hell); }
.register a.aktiv { background: var(--karte); font-weight: 600; border-bottom: 1px solid var(--karte); }
.register .spaeter { color: #9aaabb; }
.registerkarte { border-top-left-radius: 0; }

/* Bearbeitbare Tabelle (Datenblatt) mit Knopfspalte links */
.raster-bereich { display: flex; gap: .75rem; align-items: flex-start; }
.seitenknoepfe { display: flex; flex-direction: column; gap: .4rem; position: sticky; top: .5rem; }
.symbol {
  width: 2.3rem; height: 2rem; font: inherit; font-weight: 700; color: var(--blau-dunkel); cursor: pointer;
  background: linear-gradient(#f4f8fd, #d8e6f5); border: 1px solid #9db8d6; border-radius: 4px;
}
.symbol:hover { background: linear-gradient(#fff, #e3eefa); }
.symbol:disabled { opacity: .45; cursor: default; }
.raster-rahmen { flex: 1; min-width: 0; overflow-x: auto; border: 1px solid var(--rand); border-radius: 3px; }
table.raster { width: 100%; border-collapse: collapse; }
.raster th {
  color: var(--blau); font-weight: 400; text-align: left; padding: .45rem .5rem;
  background: #f7f9fc; border-bottom: 1px solid var(--rand); white-space: nowrap;
}
.raster td { padding: .2rem .5rem; border-bottom: 1px solid #e3eaf2; }
.raster .nr { width: 3.5rem; text-align: center; color: var(--text-leise); }
.raster .haken { width: 6.5rem; text-align: center; }
.raster input[type=text] { width: 100%; padding: .3rem .4rem; font: inherit; border: 1px solid transparent; background: transparent; border-radius: 3px; }
.raster input[type=text]:focus { border-color: var(--blau); background: #fff; outline: none; }
.raster input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--blau); }
.raster tr.gewaehlt td { background: var(--blau-hell); }
.raster tr.gewaehlt td.nr { box-shadow: inset 3px 0 0 var(--blau); }
.raster tr.geloescht td { background: #fbeceb; }
.raster tr.geloescht input[type=text] { text-decoration: line-through; color: var(--rot); }
.fusszeile { margin-top: 1rem; }
.raster .zahl { width: 6rem; text-align: right; color: var(--text-leise); }
.raster .auswahl-spalte { width: 11.5rem; }
.raster .auswahl-spalte.breit { width: 16rem; }
.raster .text-spalte { min-width: 17rem; }
.raster th.haken { white-space: normal; line-height: 1.2; }
.raster .unsichtbar > * { visibility: hidden; }
.raster select { width: 100%; padding: .25rem .3rem; font: inherit; background: transparent; border: 1px solid transparent; border-radius: 3px; }
.raster select:focus, .raster select:hover { border-color: var(--rand); background: #fff; }

/* Register innerhalb eines Formulars */
.titelname { font-size: 1.2rem; color: var(--text-leise); }
.formularregister { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--rand); margin: 0 0 1rem; }
.formularregister button {
  padding: .4rem .9rem; font: inherit; cursor: pointer; color: var(--text);
  background: #eef2f7; border: 1px solid var(--rand); border-bottom: 0; border-radius: 4px 4px 0 0; margin-bottom: -1px;
}
.formularregister button:hover { background: var(--blau-hell); }
.formularregister button.aktiv { background: var(--karte); font-weight: 600; border-bottom: 1px solid var(--karte); }

/* Zwei Listen mit Pfeilen (verfügbar ⇄ zugeordnet) */
.zwei-listen {
  display: grid; grid-template-columns: minmax(0, 18rem) max-content minmax(0, 18rem);
  justify-content: start; column-gap: 2rem; row-gap: 1rem; align-items: start;
}
.liste-spalte { display: flex; flex-direction: column; gap: .4rem; }
.liste-spalte > label { color: var(--blau); }
.liste-spalte select { width: 100%; height: 14rem; font: inherit; padding: .25rem; border: 1px solid var(--rand); border-radius: 3px; background: #fff; }
.liste-spalte option { padding: .2rem .35rem; }
.liste-spalte .knopf { align-self: flex-start; }
.pfeile { display: flex; flex-direction: column; gap: .6rem; padding-top: 4rem; }
.pfeile .symbol { width: 4rem; }
@media (max-width: 640px) {
  .zwei-listen { grid-template-columns: 1fr; }
  .pfeile { flex-direction: row; padding-top: 0; justify-content: center; }
}
.anzeige { padding-top: .35rem; font-weight: 600; }

/* Einstellungen → Vorlagen: Gliederung und TOPs in einer Liste */
.mit-knopf { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.mit-knopf select, .mit-knopf input { flex: 1 1 0; min-width: 0; width: auto; }
.mit-knopf .knopf { flex: none; }
.mit-knopf .fehlertext { flex-basis: 100%; }
.vorlage-info { margin: 0 0 .75rem; }
table.gliederung tr.zeile-g td { background: var(--blau-hell); }
table.gliederung tr.zeile-g input[name="text"] { font-weight: 600; }
table.gliederung tr.zeile-t td.text-spalte { padding-left: 1.5rem; }
table.gliederung .dauer-spalte { width: 6rem; }
table.gliederung .dauer-spalte input { width: 5rem; }

/* Nummer und verknüpfter Vorgang nebeneinander (Einladung ↔ Protokoll) */
.nummern-paar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.nummer-feld { min-width: 7rem; padding: .3rem .5rem; border: 1px solid var(--rand); border-radius: 3px;
               background: var(--flaeche); font-weight: 600; }
.nummer-feld a { text-decoration: none; }
.nummer-beschriftung { color: var(--blau); margin-left: .4rem; white-space: nowrap; }
.nummer-gegenueber { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; }   /* rutscht bei Platzmangel als Einheit um */

/* Einladung */
.pruefergebnis { border-left: 4px solid var(--gelb); background: #fff8e1; padding: .6rem 1rem; margin-bottom: 1rem; border-radius: 4px; }
.pruefergebnis.ok { border-left-color: var(--gruen); background: #eaf6ef; }
.pruefergebnis ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.pruefergebnis li.fehlt { color: var(--rot); }
/* Protokoll: durchgestrichene TOPs (wiederherstellbar) und Bearbeitungsstand rot/grün */
table.gliederung tr.gestrichen td { opacity: .55; }
table.gliederung tr.gestrichen input[name="text"] { text-decoration: line-through; }
table.gliederung tr.zeile-t.bearbeitet td.nr { box-shadow: inset 4px 0 0 var(--gruen); }
table.gliederung tr.zeile-t.offen td.nr { box-shadow: inset 4px 0 0 var(--rot); }
.uhr-zeit { display: flex; gap: .4rem; align-items: center; }

/* TOP in der Sitzung */
.sitzungs-kopf { flex-wrap: wrap; }
.zeiten { display: flex; gap: .8rem; align-items: center; color: var(--text-leise); }
.zeiten.ueberschritten .benoetigt { color: var(--rot); }
.zeiten.ueberschritten { color: var(--rot); }
.zeiten.angehalten .benoetigt { opacity: .5; }
.bearbeitet-haken, .beschlossen-haken { display: flex; gap: .4rem; align-items: center; cursor: pointer; }
.abstimmung { margin-top: 1rem; }
.stimmen { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-bottom: .75rem; }
.stimmen label { display: grid; gap: .25rem; color: var(--blau); }
.stimmen input { width: 5rem; padding: .35rem .5rem; border: 1px solid var(--rand); border-radius: 3px; background: var(--feld); font: inherit; }
.zaehler { display: flex; gap: .25rem; align-items: center; }

/* TOP-Liste: Kennzeichen und Detail-Knopf */
table.gliederung .details-spalte { width: 1%; white-space: nowrap; text-align: right; }
.kennzeichen { margin-right: .35rem; letter-spacing: .1rem; }
.kennzeichen span { cursor: help; }

/* Seite „Tagesordnungspunkt“ */
.top-kopf { display: flex; align-items: baseline; gap: 1rem; border: 1px solid var(--rand); border-radius: 4px; padding: .6rem .9rem; margin-bottom: 1rem; }
.top-nummer { color: var(--blau); font-weight: 600; white-space: nowrap; }
.top-text { flex: 1; }
.top-nav { display: flex; gap: .3rem; }
.text-mit-bausteinen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem); gap: 1rem; align-items: start; }
.text-mit-bausteinen > textarea { width: 100%; min-height: 18rem; font: inherit; padding: .5rem; border: 1px solid var(--rand); border-radius: 4px; background: var(--feld); }
.text-mit-bausteinen > textarea:only-child { grid-column: 1 / -1; }
.bausteine { border: 1px solid var(--rand); border-radius: 4px; padding: .6rem; background: var(--flaeche); }
.bausteine h3 { margin: 0 0 .5rem; color: var(--blau); font-size: 1rem; }
.bausteine select { width: 100%; margin-bottom: .5rem; }
.baustein-liste { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow: auto; display: grid; gap: .4rem; }
.baustein { display: flex; gap: .5rem; align-items: flex-start; background: var(--karte); border: 1px solid var(--rand); border-radius: 4px; padding: .4rem; font-size: .9rem; }
.termine-tabelle { width: 100%; }
.termine-tabelle select { min-width: 12rem; }
.termine-tabelle tr.neuer-termin td { background: var(--blau-hell); }
@media (max-width: 760px) { .text-mit-bausteinen { grid-template-columns: 1fr; } }

/* Einladung versenden */
.versand-spalten { align-items: start; grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); }
.versand-spalten > fieldset { min-width: 0; }
.versand-spalten .teilnehmer-tabelle td { overflow-wrap: anywhere; }
.versand-spalten .teilnehmer-tabelle select { min-width: 6.5rem; width: auto; }
@media (max-width: 900px) { .versand-spalten { grid-template-columns: 1fr; } }
.optionen { display: grid; gap: .4rem; }
.optionen label { display: flex; gap: .5rem; align-items: center; cursor: pointer; }
.optionen .ausgegraut, label.ausgegraut { color: var(--text-leise); cursor: default; }
.textwahl { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; margin-bottom: .75rem; }
.textwahl label { display: flex; gap: .4rem; align-items: center; cursor: pointer; }
.mail-vorschau .mail-text { white-space: pre-wrap; font: inherit; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 4px; padding: .75rem; max-height: 28rem; overflow: auto; }

/* Beschriftungen */
.beschriftungs-tabelle td { vertical-align: top; }
.beschriftungs-tabelle td.standard { width: 34%; }
.beschriftungs-tabelle input, .beschriftungs-tabelle textarea { width: 100%; padding: .3rem .45rem; border: 1px solid var(--rand); border-radius: 3px; background: var(--feld); font: inherit; color: var(--text); }
.beschriftungs-tabelle tr.geaendert td { background: var(--blau-hell); }
.beschriftungs-tabelle .schluessel { font-size: .75rem; color: var(--text-leise); font-family: monospace; }
.haken-zeile { display: flex !important; align-items: center; gap: .4rem; }

/* Änderungsprotokoll */
.verlauf-filter { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; margin-bottom: 1rem; }
.verlauf-filter label { display: grid; gap: .2rem; color: var(--blau); font-size: .9rem; }
.verlauf-filter input, .verlauf-filter select { padding: .3rem .4rem; border: 1px solid var(--rand); border-radius: 3px; background: var(--feld); font: inherit; color: var(--text); }
.verlauf-tabelle td { vertical-align: top; }
.verlauf-tabelle .zeitpunkt { white-space: nowrap; }
.verlauf-tabelle .einzelheiten { font-size: .88rem; }
.verlauf-tabelle del { color: var(--rot); }
.verlauf-tabelle ins { color: var(--gruen); text-decoration: none; }
.verlauf-tabelle tr.aktion-geloescht td:nth-child(3) { color: var(--rot); }
.verlauf-tabelle tr.aktion-anmeldung_fehlgeschlagen td { background: #fff8e1; }
.seitenwahl { display: flex; gap: .5rem; align-items: center; justify-content: center; margin: 1rem 0; }
.verlauf-frist { margin-top: 1.5rem; }

.standardknopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.knopf.gefahr { color: var(--rot); border-color: var(--rot); }
.datum-zeit { display: grid; grid-template-columns: 1fr 8rem; gap: .5rem; }
.vorlagenwahl { display: grid; gap: .5rem; margin-bottom: 1rem; }
.vorlagenkarte { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem .8rem;
                 border: 1px solid var(--rand); border-radius: 4px; cursor: pointer; }
.vorlagenkarte:has(input:checked) { border-color: var(--blau); background: var(--blau-hell); }
.vorlagenkarte .hinweistext { display: block; }

.angelegt { margin-top: 1rem; }
.teilnehmer-tabelle { width: 100%; margin-bottom: .5rem; }
.teilnehmer-hinzu { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.teilnehmer-hinzu select { width: 100%; margin-bottom: .5rem; }
.teilnehmer-tabelle td.knopf-spalte { width: 1%; white-space: nowrap; text-align: right; }
.knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.schnellerfassung { display: grid; gap: .4rem; margin-bottom: .5rem; }
dialog.erinnerung { border: 1px solid var(--rand); border-top: 4px solid var(--gelb); border-radius: 6px;
                    padding: 1.25rem 1.5rem; max-width: min(36rem, calc(100vw - 2rem)); background: var(--karte); color: var(--text); }
dialog.erinnerung::backdrop { background: rgba(0, 0, 0, .35); }
dialog.erinnerung h2 { margin-top: 0; }
dialog.rueckfrage { min-width: min(26rem, 90vw); }
dialog.rueckfrage h2 { font-size: 1.1rem; font-weight: 600; white-space: pre-line; margin-bottom: 1.2rem; }
.erinnerung-text { background: var(--flaeche); padding: .6rem .8rem; border-radius: 4px; max-height: 40vh; overflow: auto; }
table.liste.klickbar td a { text-decoration: none; }

/* Einstellungen → Allgemein: Hinweiston */
.eingabe.signalton { display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.signalton-datei { display: flex; flex-direction: column; gap: .35rem; min-width: 0; flex: 1; }
.signalton-datei input[type=file] { max-width: 100%; font-size: .85rem; }
.signalton-datei .knopf { align-self: flex-start; }
.ton-entfernen { margin-left: .5rem; color: var(--text); }

/* PDF-Ansicht (Dokumente) */
.pdf-leiste { margin-top: 0; margin-bottom: .75rem; align-items: center; gap: .5rem; }
.pdf-zoom { min-width: 3.5rem; text-align: center; }
.pdf-seitenzahl { color: var(--text-leise); margin-left: .75rem; }
.pdf-seiten { background: var(--flaeche); padding: .75rem; overflow: auto; max-height: calc(100vh - 14rem);
              display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.pdf-seiten canvas { background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); max-width: none; }

/* Einstellungen → Texte */
.zeile > .beschriftung { color: var(--blau); padding-top: .35rem; }
.textauswahl { margin-bottom: 1rem; }
.textauswahl select { max-width: 22rem; }
.anzeige.verwendung { font-weight: normal; }
.hinweistext { margin: 0; color: var(--text-leise); font-size: .9rem; }
.platzhalter { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .2rem; }

/* Kurzer Hinweis am Element (Buttons, Menü, Beschriftungen) */
.hinweis {
  position: absolute; z-index: 100; max-width: 22rem; padding: .4rem .6rem;
  background: #2b3540; color: #fff; font-size: .85rem; line-height: 1.35; border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .12s;
}
.hinweis.sichtbar { opacity: 1; visibility: visible; }
.zugang { font-size: .9rem; color: var(--text-leise); }
.formular-schmal { max-width: 52rem; }
.leiser-link { align-self: center; font-size: .9rem; }
.einladen { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--rand); }
.einladen select { padding: .35rem .5rem; font: inherit; border: 1px solid var(--rand); border-radius: 3px; background: var(--feld); }

/* Einstellungen */
.logo-vorschau { margin: .25rem 0 .75rem 12rem; }
.logo-vorschau img { max-height: 90px; max-width: 260px; border: 1px solid var(--rand); padding: .25rem; background: #fff; }
.laufnummern .kurz input { width: 6.5rem; }
.laufnummern input[type=number] { width: 6.5rem; }
.hochladen { margin-top: 1.25rem; }
.dokument-link { display: block; padding: .8rem 1rem; border: 1px solid var(--rand); border-radius: 4px; text-decoration: none; background: var(--karte); }
.dokument-link:hover { border-color: var(--blau); background: var(--blau-hell); }
.eingabe input[type=color] { width: 4rem; height: 2rem; padding: .1rem; }
@media (max-width: 640px) { .logo-vorschau { margin-left: 0; } }

/* Einzelrechte */
.rechtetabelle .bereichszeile th { background: var(--blau-hell); color: var(--blau-dunkel); font-weight: 600; padding-top: .6rem; }
.rechtetabelle td { padding: .35rem .5rem; }
.rechtetabelle input:disabled { opacity: .55; }

/* Vorlagen-Vereine (nur Betreiber) */
.karte.betreiber { margin-top: 1.25rem; border-style: dashed; border-color: #c9a227; background: #fffdf5; }
.karte.betreiber h2 { margin: 0 0 .25rem; font-size: 1.15rem; font-weight: 600; }
.marke-vorlage { display: inline-block; padding: .05rem .45rem; border-radius: 3px; font-size: .75rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; background: #c9a227; color: #fff; vertical-align: middle; }

/* Teilnehmer-Import */
.importhinweis { color: var(--blau-dunkel); background: var(--blau-hell); border: 1px solid var(--rand); border-radius: 4px; padding: .75rem 1rem; margin-bottom: 1rem; }
.importhinweis p { margin: .3rem 0; }
.importhinweis ul { margin: .3rem 0 .3rem 1.2rem; padding: 0; }
.importsumme { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 0; }
.importsumme span { padding: .25rem .7rem; border-radius: 3px; font-weight: 600; }
.marke-ok { background: #e9f6ee; color: var(--gruen); }
.marke-doppelt { background: #fdf3e1; color: #a15c00; }
.marke-fehler { background: #fbeceb; color: var(--rot); }
.importtabelle td, .importtabelle th { white-space: nowrap; font-size: .92rem; }
.importtabelle .pruefung { white-space: normal; min-width: 14rem; }
.importtabelle tr.import-fehler td { background: #fdf2f1; }
.importtabelle tr.import-doppelt td { background: #fffaf0; }
.ok-text { color: var(--gruen); font-weight: 700; }

.fragenliste { display: grid; gap: .6rem; margin: 1rem 0; }
.fragenliste label { display: flex; gap: .6rem; align-items: center; cursor: pointer; }
.fragenliste input { width: 1.1rem; height: 1.1rem; accent-color: var(--blau); }

/* Vorstandsverwaltung */
.umschalter { display: inline-flex; border: 1px solid var(--rand); border-radius: 4px; overflow: hidden; }
.umschalter a { padding: .35rem .8rem; text-decoration: none; color: var(--blau-dunkel); background: var(--karte); }
.umschalter a + a { border-left: 1px solid var(--rand); }
.umschalter a.aktiv { background: var(--blau); color: #fff; }
.liste.vorstand td { vertical-align: top; }
.liste tr.historie td { color: #98a4b1; background: #fafbfc; }
.liste .aktionen { white-space: nowrap; text-align: right; }
.liste .aktionen > * { margin-left: .35rem; }
.knopf.klein { min-width: 0; padding: .2rem .6rem; font-size: .9rem; }
.mitglied-link { text-decoration: none; margin-left: .25rem; padding: 0 .3rem; border: 1px solid var(--rand); border-radius: 3px; font-size: .8rem; }
.plz-ort { display: grid; grid-template-columns: 7rem 1fr; gap: .5rem; }
.warnung { color: #a15c00; font-size: .9rem; white-space: nowrap; }

@media (max-width: 640px) {
  .zeile, .anmeldung .zeile { grid-template-columns: 1fr; gap: .15rem; }
  .zeile > label { padding-top: 0; }
  .spalten { grid-template-columns: 1fr; }
  .knopf { min-width: 0; flex: 1; }
}

/* Protokoll: Anwesenheit im TOP, Protokollführer-Wechsel */
.anwesenheit-eingabe { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: end; margin-bottom: .75rem; }
.anwesenheit-eingabe label { display: flex; flex-direction: column; gap: .2rem; color: var(--beschriftung, #1f4e8c); }
.anwesenheit-eingabe input[type=text] { min-width: 20rem; }
.anwesenheit-tabelle tr.ist-weg td { color: #888; }
.anwesenheit-tabelle tr.ist-weg td:first-child { text-decoration: line-through; }
.protokollfuehrer-wechsel { margin-top: 1rem; }
.wechsel-liste { margin: .5rem 0 0; padding-left: 1.2rem; }
.wechsel-liste li { margin: .25rem 0; }
td.geht-kommt { white-space: nowrap; font-size: .9em; }
.teilnehmer-tabelle.mit-anwesenheit .text-spalte { min-width: 8rem; }
.teilnehmer-tabelle.mit-anwesenheit select { width: auto; min-width: 8.5rem; }
.protokollfuehrer-wechsel select { width: auto; min-width: 16rem; max-width: 100%; }
.protokollfuehrer-wechsel .mit-knopf select { flex: 0 1 22rem; }
.teilnehmer-tabelle.mit-anwesenheit th { white-space: normal; }
.teilnehmer-tabelle.mit-anwesenheit .text-spalte { min-width: 6rem; }

/* Anhänge im TOP */
.ablagezone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  border: 2px dashed #9bb3d4; border-radius: 6px; padding: 1rem; margin-bottom: .5rem; text-align: center; cursor: pointer; color: #555; }
.ablagezone.aktiv { background: #e8f0fb; border-color: #1f4e8c; }
.ablagezone input[type=file] { max-width: 100%; }
.anhang-tabelle .text-spalte { min-width: 14rem; }
.anhang-link { overflow-wrap: anywhere; }
.speicher { margin: 1rem 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.speicher-balken { display: inline-block; width: 12rem; height: .6rem; background: #e3e8ef; border-radius: 3px; overflow: hidden; }
.speicher-balken span { display: block; height: 100%; background: #1f4e8c; }
.teilnehmer-hinzu input[name=anhang_link], .teilnehmer-hinzu input[name=anhang_link_bezeichnung] { display: block; width: 100%; margin-bottom: .5rem; }

/* Aufgaben */
.aufgaben-tabelle td { vertical-align: top; }
.aufgaben-tabelle .bearbeiter-spalte { white-space: nowrap; }
.aufgaben-tabelle .bearbeiter-spalte .haupt { font-weight: 600; }
.aufgaben-tabelle .datum-spalte { white-space: nowrap; }
.aufgaben-tabelle .prozent-spalte { white-space: nowrap; min-width: 7rem; }
.aufgabe-text { max-width: 34rem; }
.ueberfaellig { background: #e02020; color: #fff; padding: 0 .3rem; border-radius: 3px; display: inline-block; }
.hinweistext.ueberfaellig { color: #fff; }
.prozent-balken { display: inline-block; width: 3.5rem; height: .55rem; background: #e3e8ef; border-radius: 3px; overflow: hidden; vertical-align: middle; padding: 0; }
.prozent-balken span { display: block; height: 100%; background: #2e8b57; }
.prozent-balken.ueberfaellig { background: #f4c7c7; }
.erledigt-knopf { color: #2e8b57; font-weight: 700; }
.marke-erledigt { font-size: .6em; color: #2e8b57; border: 1px solid #2e8b57; border-radius: 3px; padding: 0 .4rem; vertical-align: middle; }
/* Aufgabe: „Weiteren Bearbeiter hinzufügen“ – abgesetzter Bereich mit normalen Formularzeilen */
.bearbeiter-neu { margin-top: 1rem; padding: .75rem 1rem .25rem; max-width: 42rem;
  background: #f6f9fd; border: 1px solid var(--rand); border-radius: 4px; }
.bearbeiter-neu h3 { margin: 0 0 .4rem; color: var(--blau); font-size: 1rem; }
.bearbeiter-tabelle select { width: auto; min-width: 12rem; }
.notiz-eingabe { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.notiz-eingabe input[type=text] { flex: 1 1 20rem; }
.logbuch-tabelle td { vertical-align: top; }

/* Ablage: Scan des Originals */
.scan-hochladen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
.scan-hochladen label { color: var(--beschriftung, #1f4e8c); }
.nicht-umbrechen { white-space: nowrap; }
/* Mehrfachauswahl: ausgewählte Einträge deutlich sichtbar, auch wenn die Liste nicht im Fokus ist */
select[multiple] option:checked { background: linear-gradient(#cfe0f5, #cfe0f5); color: #10345e; font-weight: 600; }

/* --- Whiteboard (Steuerzentrale): Kacheln nebeneinander, Aufgaben über die ganze Breite --- */
.whiteboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: 1rem; align-items: start; }
.wb-kachel { margin: 0; padding: 1rem 1.1rem; }
.wb-breit { grid-column: 1 / -1; }
.wb-kachel h2 { margin: 0 0 .6rem; font-size: 1.1rem; font-weight: 600; color: var(--blau); }
.wb-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.wb-rollbar { max-height: 26rem; overflow: auto; }
.wb-tabelle td { vertical-align: top; }
.whiteboard-start label { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
/* Whiteboard: Ampel als Feld wie in Access, Bezeichnung als Tooltip; überfällige Anzahl in roter Schrift */
.ampel-balken { display: inline-block; width: 2.6rem; height: 1.1rem; border-radius: 2px; vertical-align: middle; }
.ampel-balken.leer { border: 1px dashed var(--rand); }
.ueberfaellig-text { color: var(--rot); font-weight: 600; }
/* Whiteboard: Tabellen bleiben in der Kachel – Spaltenköpfe dürfen umbrechen, Knöpfe nehmen nur ihren Platz */
.wb-kachel { min-width: 0; overflow-x: auto; }
.wb-tabelle th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
.wb-tabelle td.knopf-spalte { width: 1%; white-space: nowrap; text-align: right; }
.wb-tabelle .nr { width: auto; }
/* Whiteboard-Anordnung (Wunsch 20.10.2026): oben Auslastung | Offene Aufgaben, darunter Sitzungen | Termine | Themen.
   Raster mit 6 Spalten: oben 2 + 4, unten je 2. Schmale Bildschirme: alles untereinander. */
@media (min-width: 1100px) {
  .whiteboard { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .whiteboard > .wb-kachel { grid-column: span 2; }
  .whiteboard > #aufgaben { grid-column: span 4; }
  .whiteboard > #auslastung { order: 1; }
  .whiteboard > #aufgaben { order: 2; }
  .whiteboard > #sitzungen { order: 3; }
  .whiteboard > #termine { order: 4; }
  .whiteboard > #themen { order: 5; }
}
@media (max-width: 1099px) { .whiteboard { grid-template-columns: minmax(0, 1fr); } }

/* --- Recherche (wie Access: links Vorgang, Mitte Knöpfe, rechts gefundener Text mit gelber Markierung) --- */
.recherche-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .recherche-kopf { grid-template-columns: minmax(0, 1fr); } }
.recherche-optionen { display: grid; grid-template-columns: repeat(2, auto); gap: .3rem 1.5rem; margin: 0; }
.recherche-optionen label { display: flex; align-items: center; gap: .35rem; cursor: pointer; color: var(--blau); }
.recherche-optionen .anzahl { color: var(--text-leise); }
.recherche-zeitraum { display: flex; align-items: center; gap: .4rem; }
.recherche-zeitraum input { max-width: 11rem; }
.recherche-tabelle td { vertical-align: top; padding-top: .5rem; padding-bottom: .5rem; }
.recherche-vorgang { width: 9rem; white-space: nowrap; }
.recherche-vorgang .art { font-weight: 600; }
.recherche-knoepfe { width: 1%; }
.recherche-knoepfe .knopf { display: block; width: 100%; margin-bottom: .3rem; text-align: center; }
.recherche-titel { font-weight: 600; margin-bottom: .2rem; }
.recherche-text { white-space: pre-wrap; max-height: 9rem; overflow: auto; border: 1px solid var(--rand);
  border-radius: 3px; padding: .35rem .5rem; background: #fff; }
mark { background: #ffef5a; color: inherit; padding: 0 1px; }

/* --- Einstellungen in zwei Ebenen: Bereiche als Register, darunter die Register des Bereichs als Leiste,
       die mit der Karte darunter eine Einheit bildet --- */
.register-unter { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; padding: .55rem 1.25rem .45rem;
  background: var(--karte); border: 1px solid var(--rand); border-bottom: 1px solid #e3eaf2; border-top-right-radius: 4px; }
.register-unter a { color: var(--blau); text-decoration: none; padding: .15rem 0; border-bottom: 2px solid transparent; }
.register-unter a:hover { border-bottom-color: var(--blau-hell); }
.register-unter a.aktiv { font-weight: 600; color: var(--blau-dunkel); border-bottom-color: var(--blau); }
.register-unter + .registerkarte { border-top: 0; border-top-right-radius: 0; }

/* Anmeldeseite: Hinweis „ein Browser = eine Anmeldung“ etwas abgesetzt */
.anmelde-hinweis { margin: 1.1rem 0 0; padding-top: .8rem; border-top: 1px solid #e3eaf2; }