/* VI-GSS – Erscheinungsbild der Unternehmensgruppe: Helvetica, Hausfarben je Gesellschaft. */
:root{
  --dunkel:#141c24; --text:#111827; --grau:#667085; --linie:#e9ecf0; --feld:#f7f8fa;
  --rand:#eef0f3; --schatten:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.03);
  --schatten-hoch:0 8px 24px rgba(16,24,40,.08);
  --gruen:#80ba27; --blau:#1d71b8; --gelb:#f9b333; --rot:#ba3418; --weiss:#fff;
  --BI:#80ba27; --UN:#f9b333; --DU:#1d71b8; --HE:#ba3418; --BB:#6b7280; --VI:#1b252e;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.6 Helvetica,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:#f5f6f8;
  padding-top:env(safe-area-inset-top,0);padding-bottom:env(safe-area-inset-bottom,0)}
.laedt{padding:60px 16px;text-align:center;color:var(--grau)}
.kopf{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:var(--dunkel);color:#fff;
  padding:12px 20px;position:sticky;top:env(safe-area-inset-top,0);z-index:20;
  box-shadow:0 1px 0 rgba(255,255,255,.06)}
.marke b{font-size:17px;letter-spacing:-.2px;display:block}
.marke span{display:block;font-size:11.5px;color:#8b97a4;letter-spacing:.2px;margin-top:1px}
.kopf nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.kopf nav a{color:#c3ccd6;text-decoration:none;padding:8px 13px;border-radius:8px;font-size:14px;
  transition:background .15s,color .15s}
.kopf nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.kopf nav a[aria-current=page]{background:var(--gruen);color:#14341f;font-weight:600}
.wer{display:flex;gap:8px;align-items:center;font-size:13px;color:#cbd5e1}
main{width:100%;max-width:1180px;margin-left:auto;margin-right:auto;padding:22px 20px 48px}
.fuss{width:100%;max-width:1180px;margin-left:auto;margin-right:auto;padding:4px 20px 32px;
  color:#98a2b3;font-size:12px}
h1{font-size:26px;margin:0 0 6px;letter-spacing:-.5px;line-height:1.25}
h2{font-size:17px;margin:0 0 12px;letter-spacing:-.1px}
h3{font-size:14px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px;color:var(--grau)}
.karte{background:#fff;border:1px solid var(--rand);border-radius:16px;padding:22px 24px;
  margin-bottom:18px;box-shadow:var(--schatten)}
.karte > h2:first-child{margin-bottom:16px}
a.karte{transition:box-shadow .15s,transform .15s}
a.karte:hover{box-shadow:var(--schatten-hoch);transform:translateY(-2px);border-color:#dfe4ea}
.karte.schmal{padding:12px 14px}
.klein{font-size:13px;color:var(--grau)}
.reihe{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.luecke{flex:1}
.knopf{font:inherit;font-size:14px;padding:9px 16px;border-radius:9px;border:1px solid var(--linie);
  background:#fff;color:var(--text);cursor:pointer;text-decoration:none;display:inline-block;
  line-height:1.3;transition:background .15s,border-color .15s,box-shadow .15s}
a.knopf{text-decoration:none}
.knopf:hover{background:var(--feld);border-color:#d4d9df}
.knopf.haupt{background:var(--gruen);border-color:var(--gruen);color:#14341f;font-weight:600;
  box-shadow:0 1px 2px rgba(96,150,24,.3)}
.knopf.haupt:hover{background:#74ab21;border-color:#74ab21}
.knopf.warn{background:var(--rot);border-color:var(--rot);color:#fff}
.knopf.schlicht{background:transparent;border-color:#3d4a57;color:#cbd5e1}
.knopf.klein{padding:5px 10px;font-size:13px}
.knopf:disabled{opacity:.5;cursor:default}
label{display:block;font-size:12.5px;color:var(--grau);margin-bottom:14px;line-height:1.5}
label b{display:block;color:var(--text);font-weight:600;margin-bottom:5px;font-size:13.5px}
input,select,textarea{font:inherit;width:100%;padding:9px 12px;border:1px solid #dfe3e8;
  border-radius:9px;background:#fff;color:var(--text);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gruen);
  box-shadow:0 0 0 3px rgba(128,186,39,.15)}
textarea{min-height:90px;resize:vertical}
.gitter{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:14px 12px;border-bottom:1px solid #f2f4f7;vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s}
tbody tr:hover{background:#fafbfc}
th{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:#98a2b3;font-weight:600;
  padding-top:0;padding-bottom:10px;border-bottom:1px solid var(--rand)}
td.zahl,th.zahl{text-align:right;font-variant-numeric:tabular-nums}
.huelle{overflow-x:auto}
.pille{display:inline-block;font-size:12px;padding:3px 10px;border-radius:999px;background:var(--feld);
  border:1px solid #e8ebee;color:var(--grau);white-space:nowrap;font-weight:500}
.pille.ok{background:#edf8e6;border-color:#cde9b4;color:#45670f}
.pille.warn{background:#fff6e5;border-color:#f7dfa8;color:#8a6209}
.pille.crit{background:#fdeeeb;border-color:#f4c7bd;color:#93260f}
.punkt{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;
  vertical-align:baseline}
.hinweis{background:#f4f8fd;border:1px solid #dde9f6;border-radius:10px;padding:12px 14px;
  font-size:13.5px;margin:12px 0;line-height:1.55}
.hinweis.warn{background:#fef6e7;border-color:#f6ddab}
.hinweis.crit{background:#fbeae7;border-color:#f0c2b9}
.leer{color:var(--grau);padding:14px 2px}
/* Ablage: Hineinziehen ist Pflicht, nicht Zugabe */
.ablegen{border:2px dashed #d3d9e0;border-radius:14px;padding:30px 20px;text-align:center;
  color:var(--grau);background:#fcfcfd;cursor:pointer;transition:background .15s,border-color .15s}
.ablegen:hover{border-color:var(--gruen)}
.ablegen.drueber{border-color:var(--gruen);background:#eef7e4;color:#4e7016}
.ablegen b{display:block;color:var(--text);font-size:15.5px;margin-bottom:5px}
progress.fortschritt{display:block;width:100%;height:6px;margin-top:10px;border:0;border-radius:3px;
  overflow:hidden;background:var(--linie);appearance:none;-webkit-appearance:none}
progress.fortschritt::-webkit-progress-bar{background:var(--linie)}
progress.fortschritt::-webkit-progress-value{background:var(--gruen)}
progress.fortschritt::-moz-progress-bar{background:var(--gruen)}
.zeile{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #f2f4f7}
.zeile:last-child{border-bottom:0}
.zeile .haupt{flex:1;min-width:0}
.zeile b{display:block;overflow:hidden;text-overflow:ellipsis}
.unterschrift{border:1px solid var(--linie);border-radius:9px;background:#fff;touch-action:none;width:100%;height:150px}
.meldung{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;background:var(--dunkel);
  color:#fff;padding:13px 22px;border-radius:11px;font-size:14px;z-index:60;max-width:92vw;
  box-shadow:0 10px 30px rgba(16,24,40,.25)}
.meldung.schlecht{background:var(--rot)}
@media (max-width:700px){.kopf{gap:8px}.wer{width:100%;justify-content:flex-end}main{padding:14px 16px 32px}}

/* Statt style="..." im Skript: Die Sicherheitsrichtlinie (style-src 'self') lässt keine
   Inline-Formate zu, und das soll sie auch nicht. Diese Klassen ersetzen sie eins zu eins. */
.abstand-oben{margin-top:10px}
.abstand-oben-weit{margin-top:18px}
.abstand-unten{margin-bottom:12px}
.abstand-unten-eng{margin-bottom:6px}
.ohne-abstand{margin:0}
.dehnt{flex:1}
.umbruch{white-space:pre-wrap}
.grosse-zahl{font-size:36px;font-weight:600;letter-spacing:-1.4px;line-height:1.05;margin-top:6px;
  color:var(--dunkel)}
.warnfarbe{color:var(--rot)}
.kachel-link{text-decoration:none;color:inherit;display:block}
.jahre{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:0 0 16px}
.jahr-kachel{background:#fff;border:1px solid var(--rand);border-radius:16px;padding:14px 16px;text-align:left;
  cursor:pointer;display:flex;flex-direction:column;gap:3px;font:inherit;color:inherit;box-shadow:var(--schatten);
  transition:box-shadow .15s,transform .15s}
.jahr-kachel:hover{box-shadow:var(--schatten-hoch);transform:translateY(-1px)}
.jahr-kachel.aktiv{border-color:var(--gruen);box-shadow:inset 0 0 0 2px var(--gruen)}
.jahr-kachel .jahr-zahl{font-size:1.6rem;font-weight:700;line-height:1.1}
.jahr-kachel .pille{align-self:flex-start;margin-top:4px}
.punkt.st-BI{background:var(--BI)}
.punkt.st-UN{background:var(--UN)}
.punkt.st-DU{background:var(--DU)}
.punkt.st-HE{background:var(--HE)}
.punkt.st-BB{background:var(--BB)}
.punkt.st-VI{background:var(--VI)}

/* Warteschlange: Name links, Einordnung rechts. Vorher nahmen die Auswahlfelder die volle
   Breite (input,select{width:100%}) und quetschten Name und Knopf auf null. */
.ws-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 14px;align-items:start;
  padding:12px 0;border-bottom:1px solid var(--linie)}
.ws-zeile:last-child{border-bottom:0}
.ws-zeile .ws-name{min-width:0}
.ws-zeile .ws-name b{display:block;word-break:break-word}
.ws-zeile .ws-wahl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ws-zeile .ws-wahl select{width:auto;min-width:150px}
.ws-zeile .ws-wahl .knopf{white-space:nowrap}
/* Die Vorschau laeuft ueber beide Spalten: Sie gehoert zur Zeile, nicht in eine davon. */
.ws-zeile .ws-blick{grid-column:1/-1}
.u-blick{padding:0 0 14px}
.ws-rahmen{width:100%;height:70vh;min-height:360px;border:1px solid var(--rand);
  border-radius:8px;background:#fff}
.ws-ki-text{margin-top:6px;color:var(--gedaempft,#667085);line-height:1.45}

/* Wartegrafik – dieselbe wie in der Personalakte: fünf Ziegel, die gemauert werden.
   Sie erscheint überall, wo das Programm arbeitet und man warten muss. Ist im
   Marketing-Bereich ein Bild freigegeben, tritt es an die Stelle der Ziegel. */
.warte{display:flex;justify-content:center;align-items:flex-end;gap:7px;min-height:52px}
.warte img{max-height:110px;max-width:100%;object-fit:contain}
.warte .ziegel{width:15px;border-radius:4px;background:#80ba27;opacity:.25;
  animation:bauen 1.5s ease-in-out infinite}
.warte .z1{height:18px;animation-delay:0s}.warte .z2{height:30px;animation-delay:.12s}
.warte .z3{height:44px;animation-delay:.24s}.warte .z4{height:30px;animation-delay:.36s}
.warte .z5{height:18px;animation-delay:.48s}
@keyframes bauen{0%,100%{opacity:.22;transform:translateY(3px)}45%{opacity:1;transform:translateY(-3px)}}
/* Klein, wenn sie in einer Zeile neben Text steht statt mitten auf der Seite. */
.warte.klein-grafik{min-height:0;gap:4px;display:inline-flex;vertical-align:middle;margin-right:8px}
.warte.klein-grafik .ziegel{width:7px}
.warte.klein-grafik .z1,.warte.klein-grafik .z5{height:9px}
.warte.klein-grafik .z2,.warte.klein-grafik .z4{height:15px}
.warte.klein-grafik .z3{height:22px}
.warte-text{text-align:center;color:var(--gedaempft,#667085);font-size:14px;margin-top:12px}
@media (prefers-reduced-motion:reduce){.warte .ziegel{animation:none;opacity:.8}}

/* KI-Einsatz: die Sperren als Kette, damit man sieht, woran es gerade liegt. */
.ki-kette{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.ki-stufe{flex:1;min-width:220px;border:1px solid var(--rand);border-radius:8px;padding:10px 12px}
.ki-stufe.an{border-color:#80ba27;background:#f6fbef}
.ki-stufe.aus{background:#fafafa}
.ki-stand{font-size:12.5px;padding:3px 10px;border-radius:999px;background:#f0f1f3;color:#5b6572;
  white-space:nowrap}
.ki-stand.an{background:#edf7e0;color:#4a7415}
.ki-liste{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:10px 0 0}
.ki-liste dt{font-weight:600;white-space:nowrap}
.ki-liste dd{margin:0}
@media (max-width:640px){.ki-liste{grid-template-columns:1fr}.ki-liste dd{margin-bottom:6px}}
@media (max-width:760px){
  .ws-zeile{grid-template-columns:1fr}
  .ws-zeile .ws-wahl{justify-content:flex-start}
  .ws-zeile .ws-wahl select{flex:1;min-width:130px}
}
/* Die Trenntabelle braucht schmale Zahlenfelder, sonst sprengt sie die Breite */
.teiltab input[type=number]{width:70px}
.teiltab input[type=text]{min-width:160px}
.teiltab select{width:auto;min-width:130px}

/* Satzung und Registerdaten: ruhige Blöcke statt einer langen Liste */
.sgruppe{margin:22px 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--grau);font-weight:600}
.sgruppe:first-child{margin-top:4px}
.sregel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:start;
  padding:12px 0;border-bottom:1px solid var(--linie)}
.sregel:last-child{border-bottom:0}
.sregel b{font-size:15px}
.sregel .stext{grid-column:1;color:var(--text);font-size:14px}
.sregel .pille{grid-row:1;grid-column:2;font-variant-numeric:tabular-nums}
.sregel.stufe-einfach{border-left:3px solid var(--gruen);padding-left:12px}
.sregel.stufe-zweidrittel{border-left:3px solid var(--gelb);padding-left:12px}
.sregel.stufe-einstimmig{border-left:3px solid var(--rot);padding-left:12px}
.sregel.achtung{background:#fef6e7;border-radius:8px;padding:12px;border-bottom:0;margin:6px 0}
.sliste{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sliste span{background:var(--feld);border:1px solid var(--linie);border-radius:6px;
  padding:3px 8px;font-size:13px}
.stamm{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.stamm .feldwert{background:var(--feld);border:1px solid var(--linie);border-radius:9px;padding:10px 12px}
.stamm .feldwert .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--grau)}
.stamm .feldwert .wert{font-size:15px;font-weight:600;margin-top:2px;word-break:break-word}
.person{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--linie)}
.person:last-child{border-bottom:0}
.person b{min-width:180px}

/* Versammlungen als Zeitstrahl (wie ein Lebenslauf) */
.verlauf{display:flex;flex-direction:column}
.vl-jahr,.vl-eintrag{display:grid;grid-template-columns:96px 32px 1fr;column-gap:12px}
.vl-wann{text-align:right;padding-top:14px;font-weight:600;color:var(--text);display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.vl-jahr .vl-wann{font-size:1.5rem;font-weight:700;padding-top:22px}
.vl-jahr .vl-was{padding-top:30px}
.vl-linie{position:relative}
.vl-linie::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:2px;background:var(--linie)}
.vl-eintrag .vl-linie::after{content:"";position:absolute;left:8px;top:16px;width:12px;height:12px;border-radius:50%;
  background:var(--gruen);border:2px solid #fff;box-shadow:0 0 0 2px var(--gruen)}
.vl-eintrag.geplant .vl-linie::after{background:#fff;box-shadow:0 0 0 2px var(--grau)}
.vl-eintrag.abgesagt .vl-linie::after{background:#fff;box-shadow:0 0 0 2px var(--rot)}
.vl-jahr .vl-linie::after{content:"";position:absolute;left:5px;top:26px;width:22px;height:22px;border-radius:50%;
  background:var(--dunkel)}
.vl-was{padding:10px 0 18px;border-bottom:1px solid #f2f4f7;min-width:0}
.vl-titel{font-weight:700;font-size:1.05rem;color:var(--text);text-decoration:none}
.vl-titel:hover{text-decoration:underline}
.vl-themen{margin:8px 0 6px;padding-left:20px;color:var(--text)}
.vl-themen li{margin:2px 0}
.vl-fuss{margin-top:4px}
.vl-eintrag.abgesagt .vl-titel{text-decoration:line-through;color:var(--grau)}
@media (max-width:640px){
  .vl-jahr,.vl-eintrag{grid-template-columns:52px 24px 1fr;column-gap:8px}
  .vl-linie::before{left:11px}
  .vl-eintrag .vl-linie::after{left:4px}
  .vl-jahr .vl-linie::after{left:2px;width:20px;height:20px}
  .vl-jahr .vl-wann{font-size:1.1rem}
}

/* Beschlüsse im Zeitstrahl */
.vl-eintrag.aussen .vl-linie::after{background:var(--blau);box-shadow:0 0 0 2px var(--blau)}
.vl-beschluesse{list-style:none;margin:8px 0 2px;padding:0}
.vl-beschluesse li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:5px 0;
  border-top:1px dashed #eef0f3}
.vl-beschluesse li:first-child{border-top:0}
.vl-legende{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--gruen);vertical-align:middle}
.vl-legende.aussen{background:var(--blau)}

/* Berechtigungen */
table.rm{width:100%;border-collapse:collapse}
table.rm th,table.rm td{padding:7px 10px;border-bottom:1px solid #f2f4f7;text-align:left;vertical-align:middle}
table.rm th.rm-rolle{text-align:center;font-size:.8rem;white-space:normal;min-width:84px}
table.rm td.rm-zelle{text-align:center}
table.rm tr.rm-gruppe td{background:var(--feld);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--grau)}
table.rm td.geaendert,table.rm tr.geaendert td{background:#fff8e6}
.rm-marke{display:inline-block;width:14px;height:10px;border-radius:3px;background:#fff8e6;border:1px solid #f9b333;vertical-align:middle}
.z-karte select{width:100%}

/* Suche */
.suche-kopf{margin:0}
.suche-kopf input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:10px;
  padding:7px 12px;width:230px;font:inherit;font-size:13px}
.suche-kopf input::placeholder{color:#cbd5e1}
.suche-kopf input:focus{outline:2px solid var(--gruen);background:rgba(255,255,255,.16)}
.such-stelle{margin-top:4px;color:var(--text)}
mark{background:#fff3c4;color:inherit;border-radius:3px;padding:0 1px}
@media (max-width:700px){.suche-kopf{width:100%}.suche-kopf input{width:100%}}

/* Übersicht (0.16.0): Kopf mit Bild wie im Portal, Kalenderblatt, Zahlen-Kacheln auf einer Höhe */
.gss-held{position:relative;overflow:hidden;border-radius:20px;padding:28px 32px;margin-bottom:18px;color:#fff;
  background:url("/held.svg") right center/auto 100% no-repeat,linear-gradient(120deg,#1B252E 0%,#2c3a46 55%,#3d4f5d 100%);
  box-shadow:0 10px 30px rgba(27,37,46,.22)}
.gss-held h1{margin:0;font-size:28px;letter-spacing:-.4px;color:#fff}
.gss-held .datum{opacity:.75;font-size:13.5px;margin-top:4px}
.gss-held .chips-held{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.gss-held .chips-held span{font-size:12.5px;font-weight:700;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 13px}
.naechste{display:grid;grid-template-columns:76px 1fr auto;gap:18px;align-items:start;padding:14px 0;border-top:1px solid #f2f4f7}
.naechste:first-of-type{border-top:0}
.kalenderblatt{display:flex;flex-direction:column;align-items:center;border-radius:14px;overflow:hidden;text-decoration:none;
  border:1px solid var(--rand);box-shadow:var(--schatten);background:#fff;color:var(--text)}
.kalenderblatt .monat{width:100%;text-align:center;background:var(--gruen);color:#fff;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:3px 0}
.kalenderblatt .tag{font-size:30px;font-weight:700;line-height:1.1;padding-top:4px}
.kalenderblatt .wtag{font-size:12px;color:var(--grau);padding-bottom:6px}
.klein-naechste .kalenderblatt .tag{font-size:22px}
.naechste-was{min-width:0}
.naechste-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.countdown{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:6px 10px;border-radius:12px;
  background:var(--feld);color:var(--text)}
.countdown b{font-size:22px;line-height:1.1}
.countdown span{font-size:11px;color:var(--grau)}
.countdown.bald{background:#fff4dc;color:#8a5a00}
.countdown.bald span{color:#8a5a00}
.kacheln-zahl .kachel-zahl{display:flex;flex-direction:column;gap:6px;transition:box-shadow .15s,transform .15s}
.kacheln-zahl .kachel-zahl:hover{box-shadow:var(--schatten-hoch);transform:translateY(-1px)}
.kachel-kopf{display:flex;align-items:center;gap:10px;min-height:28px}
.kachel-symbol{display:inline-flex;width:28px;height:28px;border-radius:8px;align-items:center;justify-content:center;
  background:#eef6e2;color:#5d8f17;flex:none}
.kachel-symbol svg{width:16px;height:16px}
.kachel-titel{font-size:13.5px;color:var(--grau);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kachel-zahl .grosse-zahl{margin-top:2px}
.kachel-zusatz{min-height:1.3em}
@media (max-width:640px){
  .gss-held{padding:22px 20px;background:linear-gradient(rgba(27,37,46,.55),rgba(27,37,46,.55)),url("/held.svg") right center/auto 100% no-repeat,linear-gradient(120deg,#1B252E 0%,#2c3a46 55%,#3d4f5d 100%)}
  .naechste{grid-template-columns:58px 1fr;gap:12px}
  .naechste-rechts{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
}
.kacheln-zahl{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.vl-themen li.klein{list-style:none;margin-left:-20px}

/* Protokoll unterschreiben */
.us-kopf h1{margin:4px 0 2px}
.schritte{display:flex;gap:8px;list-style:none;padding:0;margin:16px 0 0;flex-wrap:wrap}
.schritte li{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--feld);
  color:var(--grau);font-weight:600;font-size:13px}
.schritte li span{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--rand);font-size:12px}
.schritte li.jetzt{background:#eef6e2;color:#3f6b0d}
.schritte li.jetzt span{background:var(--gruen);border-color:var(--gruen);color:#fff}
.schritte li.fertig span{background:#3f6b0d;border-color:#3f6b0d;color:#fff}
.us-erklaerung{font-size:15px;line-height:1.5;background:var(--feld);border-radius:12px;padding:12px 14px}
.us-feld{position:relative;border:2px dashed var(--rand);border-radius:14px;background:#fff;margin:12px 0 8px;height:200px}
.us-feld canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.us-linie{position:absolute;left:24px;right:24px;bottom:46px;border-bottom:1px solid #cbd5e1;pointer-events:none}
.us-hinweis{position:absolute;left:24px;bottom:18px;pointer-events:none}
.us-fertig{text-align:center;padding:40px 24px}
textarea#us-text{width:100%}

/* Menü links (0.18.0) */
.rahmen{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.leiste{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--dunkel);color:#e5e7eb;
  padding:18px 14px;box-sizing:border-box;overflow-y:auto}
.leiste .marke{display:flex;align-items:center;gap:10px;padding:4px 6px 16px}
.leiste .marke .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#80ba27,#5d8f17);
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:13px;flex:none}
.leiste .marke b{display:block;color:#fff;font-size:16px}
.leiste .marke span{font-size:11.5px;color:#9aa4ae}
.leiste .suche{margin:0 0 6px}
.leiste .suche input{width:100%;box-sizing:border-box;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:#fff;border-radius:10px;padding:9px 12px;font:inherit;font-size:13px}
.leiste .suche input::placeholder{color:#9aa4ae}
.leiste .suche input:focus{outline:2px solid var(--gruen);background:rgba(255,255,255,.12)}
.menue-gruppe{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#6b7785;margin:16px 10px 6px}
#nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;color:#cbd5e1;text-decoration:none;
  font-size:14px;font-weight:500}
#nav a svg{width:18px;height:18px;flex:none;opacity:.85}
#nav a:hover{background:rgba(255,255,255,.06);color:#fff}
#nav a[aria-current=page]{background:var(--gruen);color:#0f1a05;font-weight:700}
#nav a[aria-current=page] svg{opacity:1}
#nav a .zahl{margin-left:auto;font-size:11.5px;font-weight:700;background:rgba(255,255,255,.1);border-radius:999px;padding:1px 8px}
#nav a .zahl.rot{background:var(--rot);color:#fff}
#nav a[aria-current=page] .zahl{background:rgba(0,0,0,.15)}
.leiste-fuss{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:12px}
.leiste .ich{display:flex;align-items:center;gap:10px;padding:6px}
.leiste .ich .kreis{width:34px;height:34px;border-radius:50%;background:#2c3a46;display:flex;align-items:center;
  justify-content:center;font-weight:700;color:#fff;font-size:13px;flex:none}
.leiste .ich b{display:block;color:#fff;font-size:13.5px}
.leiste .ich span{font-size:11.5px;color:#9aa4ae}
.leiste .knoepfe{display:flex;gap:6px;margin-top:8px}
.leiste .knoepfe a,.leiste .knoepfe button{flex:1;text-align:center;font:inherit;font-size:12.5px;color:#cbd5e1;
  text-decoration:none;background:none;border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:7px 6px;cursor:pointer}
.leiste .knoepfe a:hover,.leiste .knoepfe button:hover{background:rgba(255,255,255,.06);color:#fff}
.leiste .version{font-size:11px;color:#6b7785;margin:10px 6px 0}
.flaeche{min-width:0}
.flaeche main{padding:24px 32px 48px}
.mobil-kopf,.abdunkler{display:none}
@media (max-width:900px){
  .rahmen{grid-template-columns:minmax(0,1fr)}
  .leiste{position:fixed;left:0;top:0;bottom:0;width:280px;z-index:30;transform:translateX(-100%);transition:transform .2s}
  .rahmen.offen .leiste{transform:none}
  .rahmen.offen .abdunkler{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:25}
  .mobil-kopf{display:flex;align-items:center;gap:12px;background:var(--dunkel);color:#fff;padding:10px 16px;
    position:sticky;top:0;z-index:20}
  .menue-knopf{background:none;border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:9px;padding:5px 11px;font-size:17px;cursor:pointer}
  .flaeche main{padding:16px 16px 40px}
}

/* Unterlagenzeile (0.19.0): Titel voll lesbar, ein Knopf, Rest im „⋯“-Menü */
.u-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:start}
.u-zeile .u-form{grid-column:1/-1}
.u-name{font-size:15.5px;font-weight:650;line-height:1.35;color:var(--text);word-break:normal;overflow-wrap:anywhere}
.u-angaben{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px;font-size:13px;color:var(--grau)}
.u-notiz{margin-top:6px;font-size:13px;color:var(--grau);line-height:1.45}
.u-knoepfe{display:flex;gap:8px;align-items:center;padding-top:2px}
details.mehr{position:relative}
details.mehr summary{list-style:none;cursor:pointer;min-width:38px;text-align:center;font-weight:700;letter-spacing:.08em}
details.mehr summary::-webkit-details-marker{display:none}
.mehr-liste{position:absolute;right:0;top:calc(100% + 6px);z-index:15;min-width:240px;background:#fff;border:1px solid var(--rand);
  border-radius:12px;box-shadow:var(--schatten-hoch);padding:6px;display:flex;flex-direction:column}
.mehr-punkt{display:block;text-align:left;background:none;border:0;border-radius:8px;padding:9px 12px;font:inherit;font-size:14px;
  color:var(--text);text-decoration:none;cursor:pointer}
.mehr-punkt:hover{background:var(--feld)}
.mehr-punkt.gefahr{color:var(--rot);border-top:1px solid #f2f4f7;border-radius:0 0 8px 8px;margin-top:4px}
@media (max-width:640px){.u-zeile{grid-template-columns:1fr}.u-knoepfe{justify-content:flex-start}.mehr-liste{left:0;right:auto}}

.willkommen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:10px;border-top:1px solid #f2f4f7}
.willkommen .klein{flex:1;min-width:220px}

/* Unterlagen: Filterleiste und zugeklappte Kategorien (0.21.0) */
.filterleiste{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:12px;align-items:center}
.filterleiste input,.filterleiste select{height:50px;font-size:15.5px;padding:0 16px;border-radius:12px;box-sizing:border-box}
.filterleiste select{cursor:pointer}
details.kat-abschnitt{padding:0}
details.kat-abschnitt>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:20px 24px}
details.kat-abschnitt>summary::-webkit-details-marker{display:none}
details.kat-abschnitt>summary:hover{background:var(--feld);border-radius:16px}
.kat-titel{font-size:18px;font-weight:700}
.kat-zahl{font-size:12.5px;font-weight:700;background:var(--feld);border:1px solid var(--rand);border-radius:999px;padding:2px 10px}
.kat-juengst{margin-left:auto}
.kat-pfeil{width:10px;height:10px;border-right:2px solid var(--grau);border-bottom:2px solid var(--grau);transform:rotate(-45deg);
  transition:transform .15s;margin-left:8px;flex:none}
details.kat-abschnitt[open] .kat-pfeil{transform:rotate(45deg)}
details.kat-abschnitt:not([open]) .kat-juengst+.kat-pfeil{margin-left:8px}
.kat-inhalt{padding:0 24px 12px}
@media (max-width:640px){.filterleiste{grid-template-columns:1fr}.kat-juengst{display:none}.kat-pfeil{margin-left:auto}}

/* Rundschreiben: Dokument beilegen (0.22.0) */
.r-anlagen{margin:14px 0}
.r-anlagen .ablegen{margin-top:8px}
.r-anlage{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #f2f4f7}
.r-anlage-name{flex:1;min-width:0;overflow-wrap:anywhere}
.r-anlagen-anzeige{margin-top:12px;padding-top:8px;border-top:1px solid #f2f4f7}

/* Beschluss aus Stichpunkten (G3, 0.23.0) */
.b-stich{background:var(--feld);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.b-stich .reihe{margin-top:8px}
.b-stich .hinweis ul{margin:6px 0 0;padding-left:18px}

/* Nutzungsvereinbarung (0.24.0) */
.nv h2{font-size:16px;margin:18px 0 4px}
.nv-text{line-height:1.6;margin:0}
.nv-annahme{margin-top:22px;padding-top:16px;border-top:1px solid #f2f4f7}

/* Beschlüsse als Karten (0.25.0) */
.bs-karte{border:1px solid var(--rand);border-left:4px solid var(--gelb);border-radius:14px;padding:18px 20px;margin:14px 0;background:#fff}
.bs-karte.ok{border-left-color:var(--gruen)}
.bs-karte.abgelehnt{border-left-color:var(--rot)}
.bs-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.bs-titel{min-width:0;flex:1}
.bs-titel h3{margin:4px 0 0;font-size:17px;line-height:1.35}
.bs-top{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grau)}
.bs-pillen{display:flex;gap:6px;flex-wrap:wrap}
.bs-wortlaut{margin-top:12px;font-size:15px;line-height:1.65;color:var(--text);max-width:78ch}
.bs-einleitung{margin:0 0 8px;font-weight:600}
.bs-ziffern{margin:0;padding-left:24px}
.bs-ziffern li{margin:0 0 10px;padding-left:4px}
.bs-ziffern li::marker{font-weight:700;color:var(--grau)}
.bs-fuss{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid #f2f4f7}
.knopf.schlicht-rot{color:var(--rot)}
.bs-knoepfe{display:flex;gap:6px;flex:none}

/* Beschlusskarte (0.25.1): Blocksatz, Überschrift normal, nichts mehr abgeschnitten */
.bs-karte{box-sizing:border-box;max-width:100%;overflow-wrap:anywhere}
.bs-titel h3{text-transform:none;letter-spacing:normal;color:var(--text);font-size:17px;font-weight:700}
.bs-wortlaut p,.bs-wortlaut li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.bs-wortlaut{max-width:none}
.bs-fuss .klein{flex:1;min-width:0}
.bs-kopf .bs-pillen{flex:none}
.bs-knoepfe .knopf{white-space:nowrap}