/* Chef: Ergebnis vor Belegen, Einstellungen und optionalen Werkzeugen. */
.chefseite .chef-klar-seitenkopf { margin-bottom: 16px; }
.chef-klar-seitenkopf h1 { margin-bottom: 4px; }
.chef-klar-seitenkopf p { margin: 0; color: #64748b; font-size: 14px; }
.chef-klar-haupt, .chef-klar-zukunft, .chef-klar-verlauf { padding: 20px; }
.chef-klar-kopf { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.chef-klar-kopf h2, .chef-klar-zukunft h2, .chef-klar-verlauf h2 { margin: 0 0 5px; font-size: 18px; color: #17243b; }
.chef-klar-kopf p, .chef-klar-zukunft p { margin: 0; color: #64748b; font-size: 13px; line-height: 1.5; }
.chef-klar-status { flex: 0 0 auto; padding: 5px 9px; border-radius: 20px; background: #f1f5f9; color: #475569; font-size: 12px; }
.chef-klar-zahlen { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 12px; margin: 18px 0; }
.chef-klar-zahlen .ue2-kachel { padding: 18px; }
.chef-klar-zahlen strong { font-size: clamp(23px, 2.2vw, 32px); }
.chef-klar-zahlen .ue2-k-titel { font-size: 13px; }
.chef-klar-zahlen small { line-height: 1.5; }
.chef-klar-rechnung { display: grid; gap: 0; max-width: 800px; }
.chef-klar-zeile { display: flex; gap: 24px; justify-content: space-between; padding: 7px 0; font-size: 13px; color: #475569; }
.chef-klar-zeile b { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: #1e293b; }
.chef-klar-zeile.ergebnis { border-top: 1px solid #cbd5e1; margin-top: 4px; padding-top: 11px; font-size: 15px; color: #1e293b; font-weight: 650; }
.chef-klar-zeile b.chef-minus { color: #b91c1c; }
.chef-klar-zeile b.chef-plus { color: #15803d; }
.chef-klar-hilfe { color: #64748b; font-size: 12px; line-height: 1.6; margin: 14px 0 0; max-width: 1000px; }
.chef-klar-zukunft { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #f8fafc; }
.chef-klar-zukunft > div:last-child { text-align: right; }
.chef-klar-zukunft strong { display: block; font-size: 24px; color: #334155; font-variant-numeric: tabular-nums; }
.chef-klar-zukunft small { display: block; margin-top: 4px; color: #64748b; font-size: 12px; }
.chef-klar-verlauf .ue2-matrix-box { margin-top: 12px; }
.chef-klar-monate { min-width: 620px; }
.chef-klar-monate th, .chef-klar-monate td { padding: 11px 12px; }
.chef-klar-monate th { white-space: normal; }
.chef-klar-monate td { font-variant-numeric: tabular-nums; }
.chef-klar-warnung { display: grid; gap: 5px; margin: 0 0 14px; padding: 14px 16px; background: #fff9e9; border: 1px solid #e9cd84; border-radius: 10px; color: #854d0e; font-size: 13px; }
.chef-klar-warnung small { line-height: 1.5; }
.chefseite > .chef-klapp { margin: 14px 0; }
.chefseite > .chef-klapp > summary { padding: 16px 20px; }
.chef-klar-inhalt:empty { display: none; }
.chef-klar-inhalt > .ue2-karte { margin: 0; border: 0; box-shadow: none; }
.chef-klar-inhalt > div > .chef-klapp { margin: 0 12px 10px; border-color: #edf0f4; }
.chef-klar-inhalt > div > .chef-klapp > summary b { font-size: 14px; }
@media (max-width: 760px) {
  .chef-klar-haupt, .chef-klar-zukunft, .chef-klar-verlauf { padding: 16px; }
  .chef-klar-zahlen { grid-template-columns: 1fr 1fr; }
  .chef-klar-zahlen .chef-klar-ergebnis { grid-column: 1 / -1; }
  .chef-klar-kopf { flex-direction: column; gap: 8px; }
  .chef-klar-zukunft { align-items: flex-start; flex-direction: column; gap: 12px; }
  .chef-klar-zukunft > div:last-child { text-align: left; }
  .chef-klar-zeile { gap: 14px; }
}
@media (max-width: 420px) { .chef-klar-zahlen { grid-template-columns: 1fr; } }

/* Chef einfach (Thomas 24.10.2026): Einnahmen/Kosten mit Erklärung, Kennzahlen „Lohnt es sich?“ */
.chef-klar-gruppe { margin: 12px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #64748b; }
.chef-klar-gruppe:first-child { margin-top: 4px; }
.chef-klar-zeile span small { display: block; font-size: 11.5px; color: #94a3b8; margin-top: 1px; }
.chef-klar-zeile.summe { border-top: 1px dashed #e2e8f0; font-weight: 600; color: #1e293b; }
.chef-klar-zeile.ergebnis { font-size: 18px; }
.chef-klar-zeile.ergebnis b { font-size: 20px; }
.chef-kennzahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
.chef-kennzahl { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.chef-kennzahl span { font-size: 11.5px; font-weight: 600; color: #64748b; }
.chef-kennzahl strong { font-size: 20px; color: #0f172a; font-variant-numeric: tabular-nums; }
.chef-kennzahl small { font-size: 11.5px; color: #94a3b8; line-height: 1.35; }
/* Monat für Monat: Jahresreiter; Monatsabrechnung: bearbeitbare Beträge (Thomas 24.10.2026) */
.chef-verlauf-kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.chef-jahre { display: inline-flex; gap: 4px; padding: 3px; border-radius: 9px; background: #f1f5f9; }
.chef-jahre button { border: 0; background: transparent; padding: 4px 12px; border-radius: 7px; font: inherit; font-weight: 600; color: #475569; cursor: pointer; }
.chef-jahre button.an { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.chef-bilanz td .chef-betrag { width: 92px; text-align: right; }
.chef-betrag.chef-geaendert { background: #fff7ed; border-color: #f59e0b; font-weight: 600; }
/* Monatsabrechnung: Mitarbeiter hinzufügen (24.10.2026) */
.chef-neu-ma { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; padding: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.chef-neu-ma .chef-eingabe { width: auto; min-width: 120px; }
.chef-neu-ma .chef-eingabe.mail { min-width: 220px; }
.chef-klar-hilfe.chef-oben { margin: 0 0 8px; }
/* Monatsabrechnung: schmalere Betragsfelder, damit „Entfernen“ sichtbar bleibt; Feste Gehälter breitere Namen (24.10.2026) */
.chef-sektion table.chef-bilanz .chef-betrag { width: 84px; }
.chef-sektion table.chef-bilanz td, .chef-sektion table.chef-bilanz th { padding-left: 5px; padding-right: 5px; }
table.chef-personal .chef-eingabe { width: 100%; min-width: 0; }
table.chef-personal td:first-child { min-width: 170px; }
table.chef-personal td:nth-child(2) { min-width: 120px; }
table.chef-personal td:nth-child(3), table.chef-personal td:nth-child(4), table.chef-personal td:nth-child(5) { width: 105px; }
table.chef-personal td:nth-child(6) { width: 70px; }
table.chef-personal td:nth-child(7) { min-width: 190px; }
table.chef-personal td:nth-child(8), table.chef-personal td:nth-child(9) { width: 150px; }
.chef-sektion table.chef-bilanz .chef-rolle { width: 130px; font: inherit; padding: 4px 6px; border: 1px solid #d5dce6; border-radius: 6px; }
/* Abrechnung Mladen (24.10.2026): zwei Monate nebeneinander */
.chef-ml-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 1000px) { .chef-ml-zwei { grid-template-columns: 1fr; } }
.chef-ml-spalte h4 { margin: 14px 0 6px; font-size: 13px; color: #475569; font-weight: 600; }
.chef-posten { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.chef-posten-zeile { display: flex; gap: 6px; align-items: center; }
.chef-posten-zeile .chef-eingabe { width: 240px; font: inherit; padding: 4px 6px; border: 1px solid #d5dce6; border-radius: 6px; }
.chef-abr-kopf { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 4px 0 14px; }
.chef-abr-kopf .chef-eingabe, .chef-sektion .ue2-aktionen select.chef-eingabe { font: inherit; padding: 4px 6px; border: 1px solid #d5dce6; border-radius: 6px; }
.chef-posten-anteil { min-width: 110px; font-size: 12px; }
/* 0263: Anteil Mladen je Rest-Posten */
.chef-posten-zeile .chef-eingabe.chef-prozent { width: 58px; text-align: right; padding: 3px 4px; }
.chef-posten-anteil { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; min-width: 190px; }
/* 0264: monatliche Posten */
.chef-posten-monatlich { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
/* Monat wählen links von „Dieser Monat“ (Thomas 24.10.2026) */
.chef-zeitraum-monat { border: 0; background: transparent; padding: 4px 8px; border-radius: 7px; font: inherit; font-weight: 600; color: #475569; cursor: pointer; }
.chef-zeitraum-monat.an { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.chef-klar-zeile.ergebnis.zwischen { border-top: 1px dashed #d5dce6; padding-top: 6px; }
.chef-klar-zeile.ergebnis.zwischen b { font-size: 1.05em; }
/* Thomas 24.10.2026: „wieso hast du das soweit auseinander gerissen oben?“ – Überblick kompakt: Zeitraum unter der Überschrift, Zahlen nah am Text */
.chef-klar-haupt .chef-klar-kopf { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.chef-klar-haupt .chef-klar-rechnung { max-width: 640px; }
/* Kennzahlen rechts neben dem Überblick */
.chef-klar-haupt.chef-oben-zwei { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 32px; align-items: start; }
.chef-oben-rechts { border-left: 1px solid #e2e8f0; padding-left: 28px; }
.chef-oben-rechts h2 { margin: 0 0 5px; font-size: 18px; color: #17243b; }
.chef-oben-rechts .chef-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .chef-klar-haupt.chef-oben-zwei { grid-template-columns: 1fr; }
  .chef-oben-rechts { border-left: 0; padding-left: 0; border-top: 1px solid #e2e8f0; padding-top: 16px; }
}
.chef-verlauf-kampagnen { margin-top: 22px; }
/* Abrechnung Mladen: links alle Zahlen untereinander, rechts die Einstellungen (Thomas 24.10.2026) */
.chef-abr-zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.chef-abr-zahlen .chef-klar-zeile small { max-width: 420px; }
.chef-abr-einst { border-left: 1px solid #e2e8f0; padding-left: 24px; }
.chef-abr-einst h4 { margin: 14px 0 6px; }
.chef-abr-einst h4:first-child { margin-top: 0; }
.chef-abr-einst .chef-abr-kopf { flex-wrap: wrap; }
.chef-abr-einst .chef-posten-zeile .chef-eingabe:not(.chef-prozent) { width: 150px; }
.chef-abr-loeschen { margin-top: 16px; }
@media (max-width: 1100px) { .chef-abr-zwei { grid-template-columns: 1fr; } .chef-abr-einst { border-left: 0; padding-left: 0; } }
.chef-bilanz tr.chef-heute td { background: #f8fafc; }
/* Durchspielen: Eure Zahlen, Telefon, Team-Bonus nebeneinander, darunter Rechnung und Tabellen (Thomas 24.10.2026) */
.chef-rechner-reihe { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; align-items: start; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #e2e8f0; }
.chef-rechner-block .chef-rechner-felder { grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-bottom: 0; }
.chef-rechner-block .chef-h3:first-child { margin-top: 0; }
.chef-rechner-block .chef-feld small { line-height: 1.25; }
.chef-rechner-ergebnis .ue2-matrix-box { overflow-x: auto; }
@media (max-width: 1100px) { .chef-rechner-reihe { grid-template-columns: 1fr; } }
/* Durchspielen: Empfehlung oben, Rechnung schmal (Thomas 24.10.2026: „das mit ergebnis ist mir zu weit auseinander“) */
.chef-empfehlung { grid-template-columns: minmax(260px, 1.3fr) repeat(2, minmax(200px, 1fr)); margin-bottom: 16px; }
.chef-rechner-ergebnis > .chef-klar-rechnung { max-width: 560px; }
/* Durchspielen: Rechnung links, Quote-Tabelle rechts daneben (Thomas 24.10.2026: „leeren platz nutzen“) */
.chef-rechner-mitte { display: grid; grid-template-columns: minmax(360px, 560px) minmax(0, 1fr); gap: 32px; align-items: start; margin-bottom: 6px; }
.chef-rechner-quote .chef-h3 { margin-top: 0; }
.chef-rechner-quote .chef-bilanz th:nth-child(5), .chef-rechner-quote .chef-bilanz td:nth-child(5) { display: none; } /* „Personal in % der Provision“ – rechts kein Platz */
@media (max-width: 1100px) { .chef-rechner-mitte { grid-template-columns: 1fr; } }
.chef-topf { margin-top: 22px; padding-top: 14px; border-top: 1px solid #e2e8f0; }
.chef-topf .chef-klar-rechnung { max-width: 520px; }
.chef-topf .chef-klar-zeile.ergebnis .chef-prozent { width: 56px; margin: 0 4px; }
.chef-topf-wer { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 10px 0 6px; }
.chef-topf-wer .ue2-kachel strong { font-size: 18px; }
.chef-eingabe.chef-stufen { width: 220px; font-variant-numeric: tabular-nums; }
.chef-topf td small.leise { display: block; font-size: 11px; }
/* 0268 Meine Prämie (Statistik-Reiter, nur eigene Zahl) */
.meine-praemie { margin: 16px auto 0; max-width: 1200px; }
.meine-praemie-kacheln { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.chef-praemie-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.chef-praemie-kopf h3 { margin: 0; }
/* 0270 Lead-Verteilung */
.chef-verteilung-karte .ue2-matrix-kopf { align-items: flex-start; }
.chef-tage { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chef-tag-wahl { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; white-space: nowrap; }
.chef-verteilung td small { display: block; }
.chef-abwesend-neu { flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.chef-abwesend-neu input[type=date] { width: 140px; }
.chef-verteilung-plan th.heute { color: var(--blau, #1f3b63); }
.chef-verteilung-plan td.chef-plan-da { color: #15803d; font-weight: 600; }
.chef-verteilung-plan td.chef-plan-weg { color: #b91c1c; font-size: 12px; }
.akte-zuweisung { display: flex; align-items: center; gap: 6px; white-space: normal; }
.akte-zuweisung-wahl { font-size: 12px; padding: 1px 4px; border: 1px solid var(--rand, #e2e8f0); border-radius: 6px; background: transparent; color: inherit; }
/* Prämie ab Januar – durchspielen */
.chef-pm-regeln { margin: 6px 0 0; padding-left: 20px; font-size: 14px; color: var(--text-leise, #64748b); }
.chef-pm-regeln li { margin: 2px 0; }
.chef-pm-vorgaben { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 10px 0 14px; }
.chef-pm-feld { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-leise, #64748b); }
.chef-pm-feld input { width: 110px; }
.chef-pm td input.chef-eingabe { width: 100px; text-align: right; }
.chef-pm-rechnung { max-width: 720px; margin-top: 14px; }
.chef-pm-januar { margin: 18px 0 8px; }
.chef-pm-januar .chef-pm-vorgaben { align-items: flex-end; }
.chef-pm-januar .chef-pm-feld input { width: 70px; }
.chef-pm-tab td small { margin-left: 2px; }
.chef-pm-tab tr.chef-pm-bekommt td { border-top: none; }

/* „Muss ich was tun?“ oben im Chef-Reiter – nur Thomas (31.10.2026) */
.was-tun { margin: 10px 18px 0; padding: 16px 20px; background: var(--karte, #fff); border: 1px solid #e3e8ef; border-radius: 12px; box-shadow: var(--schatten); display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.45; }
.was-tun h3 { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: #0f172a; }
.wt-antwort { border-radius: 10px; padding: 14px 18px; }
.wt-antwort h2 { margin: 0 0 2px; font-size: 22px; font-weight: 700; line-height: 1.2; }
.wt-antwort p { margin: 0; color: #1e293b; }
.wt-antwort.ok { background: #e6f4ec; } .wt-antwort.ok h2 { color: #1f7a4d; }
.wt-antwort.tun { background: #fdf1df; } .wt-antwort.tun h2 { color: #a35a00; }
.wt-antwort.warte { background: #f1f4f8; } .wt-antwort.warte h2 { color: #64748b; }
.wt-hinweis { margin: -4px 0 0; color: var(--text-leise, #64748b); font-size: 13px; }
.wt-punkt { border: 1px solid #e3e8ef; border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; background: #fff; }
.wt-punkt.still { background: #f8fafc; }
.wt-titel { font-weight: 600; overflow-wrap: anywhere; }
.wt-meta { font-size: 12.5px; color: var(--text-leise, #64748b); }
.wt-det { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.wt-regel { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 13px; background: #f8fafc; border-radius: 8px; padding: 10px 12px; max-height: 320px; overflow: auto; }
.wt-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.wt-knoepfe button { height: 30px; padding: 0 14px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; font-weight: 600; cursor: pointer; }
.wt-knoepfe .wt-ja { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.wt-knoepfe .wt-nein { color: #b42318; }
.wt-knoepfe button:disabled { opacity: .5; cursor: default; }
.wt-link { align-self: flex-start; border: 0; background: none; padding: 0; color: #2f5d8a; font-weight: 600; cursor: pointer; }
.wt-fehler { margin: 0; color: #b42318; }
.wt-fuss { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-leise, #64748b); border-top: 1px solid #e3e8ef; padding-top: 10px; }
.wt-fuss .wt-link { margin-left: auto; }
.wt-ampel { width: 9px; height: 9px; border-radius: 50%; flex: none; } .wt-ampel.gruen { background: #1f7a4d; } .wt-ampel.rot { background: #b42318; }
.wt-knoepfe .wt-oeffnen { border-color: #2f5d8a; color: #2f5d8a; }
.wt-knoepfe:empty { display: none; }