main#app{padding-block:26px;min-height:60vh}
.kopf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.kopf h1{margin:0;font-size:1.5rem;font-weight:600}
.kopf .rechts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px;border-bottom:1px solid var(--silber)}
.tabs button{background:none;border:0;padding:10px 14px;font-family:var(--stack);font-size:.95em;cursor:pointer;color:#555;border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs button.aktiv{color:var(--blau);border-bottom-color:var(--blau);font-weight:500}
.login{max-width:420px;margin:30px auto;background:#fff;border:1px solid var(--silber);border-radius:var(--radius);padding:26px}
.login h2{margin:0 0 6px}
label{display:block;font-size:.9em;color:#444;margin:12px 0 4px}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--silber);border-radius:8px;font-family:var(--stack);font-size:1em;background:#fff}
textarea{min-height:90px}
.zeile{display:flex;gap:10px;flex-wrap:wrap}
.zeile>*{flex:1 1 180px}
.status{display:inline-block;font-size:.8em;padding:2px 9px;border-radius:999px;font-weight:500}
.woche{display:grid;grid-template-columns:70px repeat(7,1fr);gap:4px;font-size:.85em}
.woche .h{font-weight:500;text-align:center;padding:6px 2px;color:#444}
.woche .h small{display:block;color:#777;font-weight:400}
.woche .std{color:#777;text-align:right;padding-right:6px;line-height:34px}
.slot{height:34px;border-radius:6px;background:#fff;border:1px solid #e3e3e3;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.8em}
.slot:hover{border-color:var(--blau)}
.slot.frei{background:var(--gruen-hell);border-color:var(--gruen);color:var(--gruen)}
.slot.gebucht{background:var(--blau-hell);border-color:var(--blau);color:var(--blau);cursor:default}
.slot.vergangen{background:#f1f1f1;cursor:not-allowed;color:#bbb}
.legende{display:flex;gap:16px;font-size:.85em;color:#555;margin:10px 0 0;flex-wrap:wrap}
.legende span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px;border:1px solid #ccc}
.legende .l-frei::before{background:var(--gruen-hell);border-color:var(--gruen)}
.legende .l-gebucht::before{background:var(--blau-hell);border-color:var(--blau)}
.legende .l-nicht::before{background:#fff}
.partnerkarte{display:flex;gap:16px;align-items:flex-start}
.avatar{width:64px;height:64px;border-radius:50%;background:var(--blau-hell);color:var(--blau);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.3em;flex:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.chip{font-size:.8em;background:#f0f0f0;border-radius:999px;padding:2px 9px}
.slots{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.slots button{background:#fff;border:1px solid var(--blau);color:var(--blau);border-radius:8px;padding:6px 10px;font-family:var(--stack);cursor:pointer;font-size:.9em}
.slots button:hover{background:var(--blau-hell)}
.kpi{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:18px}
.kpi .karte{text-align:center}
.kpi .zahl{font-size:2rem;font-weight:600;color:var(--blau)}
.balken{height:10px;background:#eee;border-radius:999px;overflow:hidden;margin-top:6px}
.balken i{display:block;height:100%;background:var(--gruen)}
.balken.warn i{background:#c9a227}
.balken.alarm i{background:var(--rot)}
.meldung{background:var(--gruen-hell);border-left:4px solid var(--gruen);padding:12px 16px;border-radius:8px;margin:12px 0}
.meldung.fehler{background:var(--rot-hell);border-color:var(--rot)}
.klein{font-size:.85em;color:#666}
.check{display:flex;flex-wrap:wrap;gap:8px 16px}
.check label{display:flex;align-items:center;gap:6px;margin:0;font-size:.95em}
.check input{width:auto}
.aktionen{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.bestaetigung{background:#fff;border:2px solid var(--gruen);border-radius:var(--radius);padding:22px;max-width:560px}
.bestaetigung h2{color:var(--gruen);margin:0 0 8px}
.vorgang{font-family:ui-monospace,Menlo,monospace;font-size:1.3em;letter-spacing:.06em;background:var(--offwhite);padding:6px 12px;border-radius:8px;display:inline-block}
dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:12px 0}
dt{color:#666}
dd{margin:0}


/* Iteration 2 (29.09.2026) */
.status.c-gruen{background:var(--gruen-hell);color:var(--gruen)}
.status.c-blau{background:var(--blau-hell);color:var(--blau)}
.status.c-gelb{background:var(--gelb-hell);color:#7a5c00}
.status.c-grau{background:#e8e8e8;color:#333}
.status.c-rot{background:var(--rot-hell);color:var(--rot)}
.knopf.rot-rahmen{background:#fff;color:var(--rot);border:2px solid var(--rot)}
.knopf.rot-rahmen:hover{background:var(--rot-hell)}
.knopf.rot:hover{background:#7d2323}
.zaehler{display:inline-block;min-width:1.5em;padding:0 .45em;border-radius:999px;background:var(--rot);color:#fff;font-size:.75em;font-weight:600;text-align:center;line-height:1.5em;margin-left:4px;vertical-align:1px}
.zaehler.grau{background:#777}
.zaehler[hidden]{display:none}
header.top nav a.nebenbei{color:#666}
details.neu{background:#fff;border:1px solid var(--silber);border-radius:var(--radius);margin-top:18px;padding:0 18px}
details.neu summary{cursor:pointer;padding:12px 0;font-weight:500;color:var(--blau)}
.neu-inhalt{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));padding-bottom:12px;font-size:.92em}
.neu-inhalt h3{margin:4px 0 6px;font-size:1rem}
.neu-inhalt ul{margin:0;padding-left:18px}
.neu-inhalt li{margin:4px 0}
.schmal{max-width:640px}
.eng{padding:14px 18px;margin-bottom:10px}
.mono{font-family:ui-monospace,Menlo,monospace;letter-spacing:.05em}
.trenner{border:0;border-top:1px solid var(--silber);margin:18px 0}
.hinweis.rot{background:var(--rot-hell);border-color:var(--rot)}
.hinweis-klein{background:var(--gelb-hell);padding:8px 12px;border-radius:8px}
.erklaerung{max-width:760px}
.erklaerung h2{margin-top:0}
.erklaerung .quelle{border-top:1px dashed var(--silber);padding-top:8px;margin-top:16px}
.schritte{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 18px;flex-wrap:wrap;counter-reset:s}
.schritte li{counter-increment:s;font-size:.85em;padding:6px 12px 6px 8px;border-radius:999px;background:#fff;border:1px solid var(--silber);color:#777}
.schritte li::before{content:counter(s);display:inline-block;width:1.6em;height:1.6em;line-height:1.6em;text-align:center;border-radius:50%;background:#eee;margin-right:6px;font-weight:600}
.schritte li.aktiv{border-color:var(--blau);color:var(--blau);font-weight:500}
.schritte li.aktiv::before{background:var(--blau);color:#fff}
.schritte li.fertig{color:var(--gruen)}
.schritte li.fertig::before{content:"✓";background:var(--gruen-hell);color:var(--gruen)}
.kopf2{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.kalender{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:560px;margin:10px 0 16px}
.kalender .kh{text-align:center;font-size:.8em;color:#666;font-weight:500}
.kalender .tag{min-height:58px;border-radius:8px;border:1px solid #e3e3e3;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px;font-family:var(--stack);font-size:.9em;color:#aaa;position:relative}
.kalender .tag i{position:absolute;top:2px;left:4px;font-style:normal;font-size:.62em;color:#888}
.kalender .tag small{font-size:.66em;line-height:1.1}
.kalender .tag.aus{background:transparent;border-color:transparent;color:#ccc}
.kalender button.tag{cursor:default}
.kalender button.tag.hat{border-color:var(--gruen);background:var(--gruen-hell);color:var(--gruen);cursor:pointer}
.kalender button.tag.hat:hover{border-color:var(--blau)}
.kalender button.tag.gewaehlt{background:var(--blau);border-color:var(--blau);color:#fff}
.kalender button.tag.gewaehlt i{color:#dde}
.pruefen h2{font-size:1.25rem;margin-top:0}
.bestaetigung.rot{border-color:var(--rot)}
.bestaetigung.rot h2{color:var(--rot)}
.woche-scroll{overflow-x:auto;margin-top:12px}
.woche{min-width:560px}
button.slot{font-family:var(--stack);width:100%}
.slot.frist{background:#ececec;color:#888;border-style:dashed;cursor:not-allowed;font-size:.72em}
.slot.aus{background:#f6f6f6;cursor:not-allowed}
.legende .l-frist::before{background:#ececec;border-style:dashed}
label.check{display:flex;align-items:center;gap:8px;margin:0}
label.check input{width:auto}
label.inline{display:inline-block;margin:0 4px 0 0}
.filterleiste{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.filterleiste input,.filterleiste select{width:auto;min-width:160px}
.filterleiste .knopf{margin-left:auto}
input.kuerzel{width:5.5em;text-transform:uppercase;text-align:center;font-weight:600}
.stunden{font-weight:600;padding:2px 8px;border-radius:6px}
.stunden.gelb{background:var(--gelb-hell);color:#7a5c00}
.stunden.rot{background:var(--rot-hell);color:var(--rot)}
td.knoepfe{white-space:nowrap}
td.knoepfe .knopf{margin:2px 4px 2px 0}
tr.gesehen td{color:#999}
.formular{margin-bottom:18px;border-color:var(--blau)}
.formular h3{margin-top:0}
.leistung{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:6px 0}
.leistung input{flex:1 1 140px;width:auto}
.raster.zwei{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.tabelle.scroll{max-height:320px;overflow-y:auto;margin-top:10px}
details summary{cursor:pointer}
.karte details{margin:8px 0}
table.innen{margin-top:6px;font-size:.9em;border:0}
table.innen td{padding:5px 8px}
.unten{margin-top:14px;align-items:end;border-top:1px solid #eee;padding-top:10px}
.mail .mail-kopf{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between}
.mail h3{margin:6px 0}
.mail-text{white-space:pre-wrap;margin:0 0 10px}
.mail{margin-bottom:12px}
.modal{position:fixed;inset:0;background:rgba(27,31,35,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.modal[hidden]{display:none}
.modal-box{background:#fff;border-radius:var(--radius);padding:22px;max-width:520px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.modal-box h2{margin:0 0 10px;font-size:1.2rem}
#druck{display:none}
.beleg{font-family:var(--stack);color:#000;max-width:720px;margin:0 auto;font-size:11pt}
.beleg-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:2px solid var(--blau);padding-bottom:10px;margin-bottom:30px}
.beleg-kopf img{height:46px}
.beleg-an{margin:0 0 30px;line-height:1.4}
.beleg h1{font-size:18pt;margin:0 0 10px}
.beleg table{border:1px solid #999;margin:14px 0}
.beleg th{background:#eee;color:#000}
@media print{
  body>*:not(#druck){display:none!important}
  #druck{display:block}
  body{background:#fff}
}
@media (max-width:760px){
  .slot{font-size:.7em}
  .kalender .tag{min-height:48px}
  .filterleiste .knopf{margin-left:0}
  td.knoepfe{white-space:normal}
}
/* .klein (kleiner Text) darf die Schriftfarbe kleiner Knöpfe nicht überschreiben */
.knopf.klein{color:#fff;font-size:.9em}
.knopf.klein.zweit{color:var(--blau)}
.knopf.klein.rot-rahmen{color:var(--rot)}
@media (max-width:640px){ header.top{position:static} }

/* Iteration 3 (07.10.2026) */
.status.c-leer{background:transparent;color:#444;border:1px solid var(--silber)}
tr.z-gruen td{background:var(--gruen-hell)}
tr.z-rot td{background:var(--rot-hell)}
tr.z-grau td{color:#999}
.zaehlerzeile{margin:6px 0 10px}
.zahl-gruen{color:var(--gruen);font-weight:500}
.zahl-rot{color:var(--rot);font-weight:500}
.zahl-grau{color:#888}
.status-erklaerung p{margin:4px 0}
.status-erklaerung p:last-child{margin-top:10px;color:#555;font-size:.92em}
.kontingent{margin-bottom:18px}
.kontingent.alt{opacity:.75}
.karte.alt{background:#fafafa}
.monat{margin:0 0 22px}
.monat h3{margin:0 0 6px;font-size:1.05rem;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;border-bottom:2px solid var(--blau);padding-bottom:4px;max-width:560px}
.monat h3 .klein{font-weight:400}
.zeiten{max-width:560px;margin:10px 0 0;padding:14px 18px;border-color:var(--blau)}
.zeiten h3{margin:0 0 6px;font-size:1rem}
.slot.gesperrt{background:var(--rot-hell);color:var(--rot);border-style:dashed;cursor:not-allowed;font-size:.72em}
.legende .l-gesperrt::before{background:var(--rot-hell);border-color:var(--rot);border-style:dashed}
.lgruppen{display:flex;flex-direction:column;gap:4px;margin:6px 0}
.lgruppe{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.lgruppe .lart{font-size:.78em;color:#666;min-width:5.5em;font-weight:500}
.lgruppe .chips{margin:0}
td .lgruppen{gap:2px}
.adresse{margin-top:14px;border-top:1px dashed var(--silber);padding-top:8px}
.kuerzel-chip{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:.75em;background:var(--blau-hell);color:var(--blau);border-radius:6px;padding:1px 7px;vertical-align:middle;letter-spacing:.05em}
.rot-text{color:var(--rot)}
.knopf.rueck{border-color:#999;color:#555}
.knopf.rueck:hover{background:#f0f0f0}
tr.treffer td{background:var(--gelb-hell)}
.gruende{margin:8px 0 4px}
.gruende label{display:flex;align-items:center;gap:6px}
.gruende input{width:auto}
.modal-box select{margin-top:4px}
.c-wahl{width:auto}
.kontingent-details .aktionen{margin:10px 0 6px}
@media (max-width:640px){
  .monat h3{font-size:.95rem}
  .lgruppe .lart{min-width:0}
}

/* Iteration 4 (09.10.2026) */
.status-erklaerung{margin-bottom:28px} /* v3-10: freier Raum zwischen Erklärtext und Kontingenten */
.raster.kontingente{margin-top:6px}
dd.mails-hr{gap:4px 18px}
dd.mails-hr label{margin:0;font-size:.95em;display:flex;align-items:center;gap:6px}
dd.mails-hr input{width:auto}
.mail.vermerk{background:#fafafa;border-style:dashed}
.mail.vermerk h3{font-weight:500;font-size:1rem}
details.nur-prototyp{margin-top:8px;font-size:.9em}
details.nur-prototyp summary{color:#888}
details.nur-prototyp .mail-text{background:#fff;border:1px dashed var(--silber);padding:8px 10px;border-radius:6px}
.modal-box .zeile>*{flex:1 1 120px}

/* Iteration 5: Textkatalog und Löschlauf */
table.texte td.textzelle{white-space:pre-wrap;font-size:.86em;max-width:520px}
table.texte td{vertical-align:top}
.textkatalog-warnung{margin-top:12px}
tr.anonym td{color:#777}

/* Iteration 6 (v5-5): Cashflow im Dashboard, (v5-1) Spalte rezuki.de */
.cashflow{margin-bottom:14px}
.cashflow h4{margin:0 0 8px}
.cashflow table.innen{width:100%}
.cashflow table.innen td{padding:5px 6px;border-bottom:1px solid #eee}
.cashflow tr.summe td{border-top:2px solid #ccc;border-bottom:none;padding-top:8px}
.cashflow tr.offen td{border-bottom:none;color:#555}
.karte.saldo{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:18px;border-left:5px solid var(--gruen,#2e8b57)}
.karte.saldo.rot{border-left-color:#c0392b}
.karte.saldo strong{font-size:1.5rem}
td.webseite label{white-space:nowrap}
.cashflow table.innen td:last-child{white-space:nowrap}

/* Iteration 7 (07.11.2026): Steckbrief, Fotos, Schwerpunkte */
.steckbrief .gruppe{margin:14px 0 4px;font-weight:500}
.steckbrief .check label{min-width:220px}
.steckbrief .check label.gesperrt{color:#aaa}
.foto-vorschau{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:6px 0}
.foto-vorschau img,.avatar.foto img{width:96px;height:96px;object-fit:cover;border-radius:50%;border:1px solid var(--silber);background:#fff}
.avatar.foto{padding:0;overflow:hidden;background:none}
.avatar.foto img{width:64px;height:64px}
.datei-zeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.datei-zeile input[type=file]{width:auto;flex:1 1 220px}
.zaehler-text{font-size:.8em;color:#777;text-align:right}
.zaehler-text.rot{color:var(--rot)}
.sb-raster{display:grid;gap:18px;grid-template-columns:minmax(260px,1fr) minmax(300px,1.4fr);align-items:start}
.sb-vorschlag{background:var(--gelb-hell);border:1px solid #e6d9a6;border-radius:var(--radius);padding:16px 18px;font-size:.93em}
.sb-vorschlag h3{margin:0 0 6px}
.sb-vorschlag dl{grid-template-columns:120px 1fr;gap:4px 10px;margin:8px 0}
.sb-vorschlag dd{white-space:pre-wrap}
.sb-vorschlag .aktionen{margin-top:14px}
.sb-grund{margin-top:8px}
.warten{max-width:640px;margin:30px auto}
@media (max-width:760px){ .sb-raster{grid-template-columns:1fr} }