/* Aufgabenliste – Stil nach MMCI und dem Mockup „OPL & KW-Poster“ */

@font-face { font-family: 'Barlow'; font-weight: 300; font-display: swap; src: url('../fonts/Barlow-Light.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('../fonts/Barlow-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('../fonts/Barlow-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('../fonts/Poppins-Bold.woff2') format('woff2'); }

:root {
    --gruen: #2F9250;
    --gruen-dunkel: #1B5E33;
    --gruen-hell: #EAF5EE;
    /* Statusfarben (Ampel „optimal“, Erfolg) – bleiben grün, auch wenn eine Kundenmarke --gruen umfärbt */
    --ok: #2F9250;
    --ok-dunkel: #1B5E33;
    --ok-hell: #EAF5EE;
    --text: #1E2329;
    --text-2: #3A424C;
    --leise: #5B6470;
    --rand: #DDE1E6;
    --rand-2: #C9CED4;
    --flaeche: #F7F8F9;
    --flaeche-2: #EEF0F2;
    --weiss: #fff;
    --rot: #B42318;
    --rot-hell: #FDE8E7;
    --gelb: #E0A800;
    --gelb-hell: #FFF1C2;
    --gelb-text: #6E4B00;
    --blau: #2B6CB0;
    --radius: 14px;
    --schatten: 0 1px 2px rgba(30, 35, 41, .06);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: 'Barlow', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    color: var(--text);
    background: var(--flaeche);
}
h1, h2, h3 { font-family: 'Poppins', 'Barlow', sans-serif; font-weight: 700; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 30px; }
h2 { font-size: 20px; }
p { margin: 0 0 1em; }
a { color: var(--gruen-dunkel); }
a:hover { color: var(--gruen); }
small { color: var(--leise); font-size: 14px; }
code { font-family: ui-monospace, Menlo, monospace; font-size: 15px; }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }

.unsichtbar { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprungmarke { position: absolute; left: -999px; top: 8px; background: var(--weiss); padding: 8px 12px; z-index: 10; }
.sprungmarke:focus { left: 8px; }

.oberzeile { margin: 0 0 4px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gruen-dunkel); }
.oberzeile a { text-decoration: none; }
.einleitung { color: var(--text-2); max-width: 68ch; }
.hinweis { color: var(--leise); font-size: 15px; margin: 0 0 12px; }
.optional { font-weight: 400; color: var(--leise); }

/* ---- Einfache Seiten (Login, Registrierung, Assistent) ------------------- */

.einfach { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 48px 16px 24px; }
.einfach__karte {
    width: 100%; max-width: 480px;
    background: var(--weiss); border: 1px solid var(--rand); border-radius: 18px;
    padding: 32px; box-shadow: var(--schatten);
}
.einfach--breit .einfach__karte { max-width: 760px; }
.einfach__fuss { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--leise); font-size: 14px; text-align: center; }
.einfach__fuss img { width: 200px; height: auto; }
.links { margin: 20px 0 0; font-size: 15px; color: var(--leise); }

/* ---- App-Rahmen ---------------------------------------------------------- */

.app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.seitenleiste {
    min-width: 0;
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; gap: 16px;
    background: var(--weiss); border-right: 1px solid var(--rand); padding: 20px 14px;
}
.marke { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--rand); border-radius: 16px; background: var(--flaeche); }
.marke__design { margin: 0 0 0 auto; flex: none; }
.marke__kuerzel {
    flex: none; width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--gruen); color: var(--weiss);
    font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px;
}
.marke__text { display: flex; flex-direction: column; min-width: 0; }
.marke__text strong { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.marke__text span { font-size: 14px; color: var(--leise); }

.navigation { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; padding: 4px; margin: -4px; }
.navigation__trenner { margin: 18px 12px 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--leise); }
.navigation__trenner:first-child { margin-top: 4px; }
.navpunkt {
    display: flex; align-items: center; gap: 12px;
    min-height: 42px; padding: 0 12px; border-radius: 10px;
    color: var(--text-2); text-decoration: none; font-size: 16px;
}
.navpunkt .icon { flex: none; opacity: .75; }
.navpunkt--aktiv .icon { opacity: 1; }
.navpunkt__text { flex: 1; min-width: 0; }
a.navpunkt:hover { background: var(--flaeche-2); color: var(--text); }
.navpunkt--aktiv { background: var(--gruen-hell); color: var(--gruen-dunkel); font-weight: 600; outline: 1px solid #A9D6B8; outline-offset: 2px; }

.ich { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--rand); padding: 14px 2px 0 6px; }
.ich__text { display: flex; flex-direction: column; min-width: 0; }
.ich__text strong { font-size: 15px; overflow-wrap: anywhere; }
.ich__text span { font-size: 13px; color: var(--leise); }
.ich form { margin: 0; }

/* Runder Symbol-Knopf (Design umschalten, Abmelden) */
.symbolknopf {
    width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--rand); border-radius: 50%; background: var(--weiss); color: var(--text-2); cursor: pointer;
}
.symbolknopf:hover { background: var(--flaeche-2); color: var(--text); }
.symbolknopf .icon { width: 20px; height: 20px; }

.avatar {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--flaeche-2); color: var(--text-2); font-weight: 600;
}

.inhalt { padding: 32px 40px 24px; min-width: 0; max-width: 1200px; width: 100%; }
.seitenkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.fuss { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--rand); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--leise); font-size: 14px; }
.fuss img { width: 140px; height: auto; }

.karte { background: var(--weiss); border: 1px solid var(--rand); border-radius: 16px; padding: 24px; margin-bottom: 20px; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.kachel { display: block; background: var(--weiss); border: 1px solid var(--rand); border-radius: 16px; padding: 22px; color: inherit; text-decoration: none; }
.kachel p { color: var(--text-2); font-size: 16px; }
.kachel--link:hover { border-color: var(--gruen); color: inherit; }

.kasten { border: 1px solid var(--rand); border-radius: var(--radius); padding: 20px; margin: 20px 0; }
.kasten--hinweis { background: var(--gelb-hell); border-color: #F0D58A; }
.kasten--hinweis h2 { color: var(--gelb-text); }
.kasten ul { margin: 0; padding-left: 20px; }

/* ---- Meldungen ----------------------------------------------------------- */

.meldung { border-radius: 12px; padding: 14px 16px; margin-bottom: 20px; border: 1px solid; }
.meldung ul { margin: 0; padding-left: 20px; }
.meldung--ok { background: var(--ok-hell); border-color: #BFE0CB; color: var(--ok-dunkel); }
.meldung--fehler { background: var(--rot-hell); border-color: #F5C2BE; color: var(--rot); }
.meldung--pin { background: var(--gelb-hell); border-color: #F0D58A; color: var(--gelb-text); font-weight: 600; font-size: 18px; }
.ansicht-hinweis { position: sticky; top: 8px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-bottom: 20px; padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--gelb-hell); border: 1px solid #F0D58A; color: var(--gelb-text); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
@media print { .ansicht-hinweis { display: none; } }

/* ---- Formulare ----------------------------------------------------------- */

.formular { display: flex; flex-direction: column; gap: 16px; }
.formular--raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.formular__ganz { grid-column: 1 / -1; }
.formular--leise { margin-top: 12px; }
.formular__aktionen { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; }
.formular__aktionen--trenner { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rand); justify-content: space-between; }

fieldset { border: 0; padding: 0; margin: 0 0 8px; }
legend { font-weight: 600; font-size: 17px; margin-bottom: 6px; padding: 0; }

.feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feld label { font-weight: 600; font-size: 15px; }
.feldreihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.feldreihe--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feldreihe--breit-schmal { grid-template-columns: minmax(0, 1fr) 120px; }

input, select, textarea {
    font: inherit; color: var(--text);
    min-height: 48px; padding: 10px 12px;
    border: 1px solid var(--rand-2); border-radius: 10px; background: var(--weiss);
    width: 100%;
}
input:disabled, input[readonly] { background: var(--flaeche); color: var(--text-2); }
input:focus, select:focus, textarea:focus { border-color: var(--gruen); outline: 2px solid var(--gruen-hell); }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; min-height: 0; padding: 0; accent-color: var(--gruen); flex: none; margin: 1px 0 0; }
.pin { font-size: 26px; letter-spacing: .4em; text-align: center; font-family: ui-monospace, Menlo, monospace; }

.auswahl { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 6px 0; }
.auswahl span { font-size: 16px; }

.bereichsliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }

.kopierfeld { display: flex; gap: 8px; }
.kopierfeld input { font-family: ui-monospace, Menlo, monospace; font-size: 15px; }

.ampel { display: flex; border-radius: 999px; overflow: hidden; font-size: 13px; font-weight: 600; margin: 8px 0 0; }
.ampel__teil { flex: 1; text-align: center; padding: 4px 0; }
.ampel__teil--luft { background: #DCEBFA; color: #1A4E85; }
.ampel__teil--optimal { background: var(--ok-hell); color: var(--ok-dunkel); }
.ampel__teil--grenz { background: var(--gelb-hell); color: var(--gelb-text); }
.ampel__teil--ueber { background: var(--rot-hell); color: var(--rot); }

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

.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 20px; border-radius: 10px;
    border: 1px solid var(--gruen); background: var(--gruen); color: var(--weiss);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.knopf:hover { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); color: var(--weiss); }
.knopf--leise { background: var(--weiss); color: var(--text-2); border-color: var(--rand-2); }
.knopf--leise:hover { background: var(--flaeche-2); color: var(--text); border-color: var(--rand-2); }
.knopf--klein { min-height: 40px; padding: 0 12px; font-size: 15px; }
.knopf--voll { width: 100%; }

/* ---- Einrichtungs-Schritte ----------------------------------------------- */

.schritte { list-style: none; display: flex; gap: 6px; padding: 0; margin: 8px 0 28px; flex-wrap: wrap; }
.schritte__punkt { display: flex; align-items: center; font-size: 15px; color: var(--leise); }
.schritte__punkt a, .schritte__punkt > span:first-child { display: inline-flex; }
.schritte__punkt a { color: inherit; text-decoration: none; align-items: center; gap: 6px; }
.schritte__punkt span { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--flaeche-2); font-weight: 600; margin-right: 6px; font-size: 14px; }
.schritte__punkt + .schritte__punkt::before { content: ''; width: 18px; height: 2px; background: var(--rand); margin-right: 6px; }
.schritte__punkt--jetzt { color: var(--text); font-weight: 600; }
.schritte__punkt--jetzt span { background: var(--gruen); color: var(--weiss); }
.schritte__punkt--erledigt span { background: var(--gruen-hell); color: var(--gruen-dunkel); }

/* ---- Listen & Tabellen --------------------------------------------------- */

.liste { list-style: none; margin: 0 0 24px; padding: 0; border: 1px solid var(--rand); border-radius: var(--radius); }
.liste__eintrag { display: flex; gap: 12px; align-items: center; padding: 12px 16px; }
.liste__eintrag + .liste__eintrag { border-top: 1px solid var(--rand); }
.liste__text { display: flex; flex-direction: column; min-width: 0; }

.personenwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.person { position: relative; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 12px; cursor: pointer; min-height: 60px; }
.person input { position: absolute; opacity: 0; }
.person:has(input:checked) { border-color: var(--gruen); background: var(--gruen-hell); }
.person:has(input:focus-visible) { outline: 3px solid var(--blau); outline-offset: 2px; }
.person__text { display: flex; flex-direction: column; min-width: 0; }

/* relative: sonst bezieht sich das absolut positionierte .unsichtbar im Tabellenkopf auf die Seite und verbreitert sie */
.tabelle-rahmen { overflow-x: auto; position: relative; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabelle th { text-align: left; font-size: 14px; color: var(--leise); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--rand); white-space: nowrap; }
.tabelle td { padding: 12px; border-bottom: 1px solid var(--flaeche-2); vertical-align: top; }
.tabelle__inaktiv td { color: var(--leise); }
/* Zelle bleibt Tabellenzelle (sonst verrutschen die Zeilenlinien), die Knöpfe darin stehen nebeneinander */
.tabelle__aktionen { text-align: right; }
.tabelle__aktionen > * { display: inline-flex; margin: 2px 0 2px 4px; vertical-align: middle; }

.marke-klein { display: inline-block; font-size: 13px; padding: 1px 10px; border-radius: 999px; background: var(--flaeche-2); color: var(--leise); }

.filterleiste { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filter { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--rand); background: var(--weiss); color: var(--text-2); text-decoration: none; font-size: 15px; }
.filter--aktiv { background: var(--gruen); border-color: var(--gruen); color: var(--weiss); }
.filter--aktiv:hover { color: var(--weiss); }

.status { display: inline-block; font-size: 14px; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.status--aktiv { background: var(--ok-hell); color: var(--ok-dunkel); }
.status--wartet { background: var(--gelb-hell); color: var(--gelb-text); }
.status--gesperrt { background: var(--rot-hell); color: var(--rot); }
.status--unbestaetigt { background: var(--flaeche-2); color: var(--leise); }

/* ---- Phase 2: Kern ------------------------------------------------------ */

.leise { color: var(--leise); }
.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.seitenkopf__aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.karte__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.karte__kopf h2 { margin: 0; }
.karte--gefahr { border-color: #F5C2BE; }
.karte--schmal { max-width: 520px; }
.leer { text-align: center; padding: 40px 24px; }
.meldung--warnung { background: var(--gelb-hell); border-color: #F0D58A; color: var(--gelb-text); }
.meldung--warnung ul { margin: 6px 0 0; }
.knopf--gefahr { background: var(--rot); border-color: var(--rot); }
.knopf--gefahr:hover { background: #8F1C13; border-color: #8F1C13; }
.zaehler { min-width: 24px; padding: 0 7px; border-radius: 999px; background: var(--gruen); color: var(--weiss); font-size: 13px; font-weight: 600; text-align: center; line-height: 22px; }

.kachel__zahl { font-family: 'Poppins', sans-serif; font-size: 22px; color: var(--gruen-dunkel); }
.kachel__weiter { color: var(--gruen-dunkel); font-weight: 600; font-size: 15px; }
.kacheln + .karte { margin-top: 20px; }

.steckbrief__liste { margin: 0; display: grid; gap: 0; }
.steckbrief__liste > div { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--flaeche-2); }
.steckbrief__liste dt { font-weight: 600; color: var(--text-2); }
.steckbrief__liste dd { margin: 0; }
.steckbrief__liste ul { margin: 0; padding-left: 18px; }
textarea { min-height: 0; resize: vertical; line-height: 1.4; }

.kwnav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kwnav__text { display: flex; flex-direction: column; align-items: center; min-width: 150px; line-height: 1.2; }
.kwnav__text span { font-size: 14px; color: var(--leise); }

/* Prioritäten, Herkunft, Ampel */
.prio { display: inline-block; font-size: 13px; font-weight: 600; padding: 1px 9px; border-radius: 999px; }
.prio--hoch { background: var(--rot-hell); color: var(--rot); }
.prio--normal { background: var(--flaeche-2); color: var(--text-2); }
.prio--niedrig { background: #E8F0FA; color: #1A4E85; }
.herkunft { display: inline-block; font-size: 12px; padding: 0 8px; border-radius: 999px; background: var(--flaeche-2); color: var(--leise); margin-top: 4px; }
.herkunft--opl { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.herkunft--uebertrag { background: var(--gelb-hell); color: var(--gelb-text); }
.zone { display: inline-block; font-size: 14px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.zone--luft { background: #DCEBFA; color: #1A4E85; }
.zone--optimal { background: var(--ok-hell); color: var(--ok-dunkel); }
.zone--grenz { background: var(--gelb-hell); color: var(--gelb-text); }
.zone--ueber { background: var(--rot-hell); color: var(--rot); }
.punkt { font-size: 13px; font-weight: 600; padding: 0 7px; border-radius: 999px; }
.punkt--luft { background: #DCEBFA; color: #1A4E85; }
.punkt--optimal { background: var(--ok-hell); color: var(--ok-dunkel); }
.punkt--grenz { background: var(--gelb-hell); color: var(--gelb-text); }
.punkt--ueber { background: var(--rot-hell); color: var(--rot); }

/* Kennzahlen */
.kennzahlen { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
.kennzahl { background: var(--weiss); border: 1px solid var(--rand); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.kennzahl__wert { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kennzahl__name { font-size: 14px; color: var(--leise); }
.kennzahl--gross .kennzahl__wert { font-size: 34px; }
.kennzahl--luft { border-color: #A9CBEF; }
.kennzahl--optimal { border-color: #BFE0CB; }
.kennzahl--grenz { border-color: #F0D58A; }
.kennzahl--ueber { border-color: #F5C2BE; }
.karte .kennzahl { border: 0; padding: 0; margin-bottom: 12px; }
.kennzahl--warn .kennzahl__wert { color: var(--rot); }
.werte { margin: 0; display: grid; gap: 6px; }
.werte > div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--flaeche-2); padding-top: 6px; }
.werte dt { color: var(--leise); }
.werte dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.werte--raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; align-content: center; }
.werte--klein { font-size: 15px; }

/* Personenleiste im Poster */
.personenleiste { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; }
.personenleiste__eintrag { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; min-height: 44px; border: 1px solid var(--rand); border-radius: 999px; background: var(--weiss); color: var(--text-2); text-decoration: none; }
.personenleiste__eintrag--aktiv { border-color: var(--gruen); background: var(--gruen-hell); color: var(--gruen-dunkel); font-weight: 600; }
.avatar--klein { width: 30px; height: 30px; font-size: 14px; }

.abwesenheit { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.abwesenheit__formular { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.abwesenheit__formular .feld { min-width: 150px; }
.abwesenheit .hinweis { margin: 0; }

/* Poster-Tabelle */
.tabelle--poster td { vertical-align: middle; padding: 8px 4px; }
.knopf--symbol { min-width: 40px; padding: 0 10px; font-size: 20px; line-height: 1; }
.tabelle--poster input, .tabelle--poster select { min-height: 40px; padding: 6px 8px; font-size: 15px; }
.tabelle--poster select { width: auto; min-width: 96px; padding-right: 26px; }
.tabelle--poster .aufgabe__titel { min-width: 220px; }
.tabelle--poster .aufgabe__titel input + input { margin-top: 4px; }
.tabelle--poster input.klein { min-height: 34px; font-size: 14px; color: var(--text-2); }
.tabelle--poster input[type=date] { width: 140px; }
.zahlfeld { width: 76px; text-align: right; }
.aufgabe--erledigt td { background: #F4FAF6; }
.aufgabe--uebertragen td { color: var(--leise); }
.ueberfaellig { color: var(--rot); border-color: var(--rot) !important; font-weight: 600; }
.spalte-meeting { box-shadow: inset 0 -3px 0 #A9CBEF; }
.spalte-ma { box-shadow: inset 0 -3px 0 #BFE0CB; }
.legende { padding: 0 8px; border-radius: 6px; }
.legende--meeting { background: #DCEBFA; }
.legende--ma { background: var(--gruen-hell); }
.aufgabe__aktionen { white-space: nowrap; }
.kommentar { display: inline-block; vertical-align: middle; margin-right: 6px; }
.kommentar summary { cursor: pointer; font-size: 14px; color: var(--gruen-dunkel); min-height: 40px; display: inline-flex; align-items: center; }
.kommentar textarea { width: 260px; margin-top: 6px; font-size: 15px; }
.status-text { font-size: 15px; color: var(--leise); }
.speicherleiste { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--weiss); border: 1px solid var(--rand); border-radius: 14px; padding: 12px 16px; margin-bottom: 20px; box-shadow: 0 -4px 16px rgba(30, 35, 41, .06); }
.speicherleiste .hinweis { margin: 0; }

.spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.opl-auswahl { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; }
.auswahl--karte { border: 1px solid var(--rand); border-radius: 12px; padding: 10px 12px; }
.auswahl--karte:has(input:checked) { border-color: var(--gruen); background: var(--gruen-hell); }
.liste__eintrag--zwischen { justify-content: space-between; }
.aufklapper { padding: 0; }
.aufklapper > *:not(summary) { margin: 0 24px 24px; }
.aufklapper__kopf { cursor: pointer; padding: 18px 24px; font-weight: 600; color: var(--gruen-dunkel); list-style: none; }
.aufklapper__kopf::-webkit-details-marker { display: none; }

/* OPL */
.filter-formular { display: grid; grid-template-columns: 2fr repeat(3, 1fr) auto; gap: 12px; align-items: end; padding: 16px 20px; }
.filter-formular__knoepfe { display: flex; gap: 8px; }
.tabelle th a { color: inherit; text-decoration: none; }
.tabelle th a:hover { color: var(--gruen-dunkel); }
.tabelle--opl td:first-child { color: var(--leise); }
.vorschau { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--flaeche); font-weight: 600; }
.vorschau--ueber { background: var(--rot-hell); color: var(--rot); }

/* Meine Woche */
.raster-woche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.countdown { display: flex; gap: 12px; margin: 8px 0 12px; }
.countdown span { flex: 1; text-align: center; background: var(--flaeche); border-radius: 12px; padding: 10px 4px; color: var(--leise); font-size: 14px; }
.countdown strong { display: block; font-family: 'Poppins', sans-serif; font-size: 28px; color: var(--text); }
.frist__abgelaufen { font-weight: 600; color: var(--rot); font-size: 20px; }
.zeiten { display: grid; gap: 12px; }
.zeit { border: 1px solid var(--rand); border-radius: 12px; padding: 12px 14px; margin: 0; }
/* float holt die Legende in den Kasten statt auf den Rahmen */
.zeit legend { float: left; width: 100%; display: flex; flex-direction: column; padding: 0; margin-bottom: 4px; font-weight: 400; }
.zeit legend + * { clear: both; }
.zeit--erledigt { background: #F4FAF6; }
.zeit__felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }

/* Cockpit */
.team-kopf { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: center; }
.team-kopf__tacho { text-align: center; }
.team-kopf__wert { font-family: 'Poppins', sans-serif; font-size: 30px; margin: -6px 0 4px; }
.team-kopf__wert small { font-family: 'Barlow', sans-serif; font-size: 15px; color: var(--leise); }
.tacho { width: 100%; max-width: 240px; }
.tacho__bogen { fill: none; stroke-width: 18; }
.tacho__bogen--luft { stroke: #7FAEE0; }
.tacho__bogen--optimal { stroke: var(--ok); }
.tacho__bogen--grenz { stroke: var(--gelb); }
.tacho__bogen--ueber { stroke: #D9534A; }
.tacho__nadel { stroke: var(--text); stroke-width: 4; stroke-linecap: round; }
.tacho__mitte { fill: var(--text); }

.cockpit { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.cockpit__opl { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.opl-stapel { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.opl-karte { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 12px; background: var(--weiss); cursor: grab; }
.opl-karte .knopf { justify-self: start; }
.opl-karte--zieht { opacity: .5; }
.sortierleiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sortierleiste select { width: auto; }
.personenkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.personenkarte { background: var(--weiss); border: 1px solid var(--rand); border-top: 5px solid var(--rand); border-radius: 14px; padding: 16px; display: grid; gap: 8px; align-content: start; }
.personenkarte--luft { border-top-color: #7FAEE0; }
.personenkarte--optimal { border-top-color: var(--ok); }
.personenkarte--grenz { border-top-color: var(--gelb); }
.personenkarte--ueber { border-top-color: #D9534A; }
.personenkarte--ziel { outline: 3px dashed var(--gruen); outline-offset: 2px; background: var(--gruen-hell); }
.personenkarte__kopf { display: flex; align-items: center; gap: 10px; }
.personenkarte__name { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.personenkarte__name a { color: var(--text); text-decoration: none; }
.personenkarte__name a:hover { color: var(--gruen-dunkel); text-decoration: underline; }
.personenkarte__wert { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 22px; }
.personenkarte__aktuell { margin: 0; font-size: 15px; }
.personenkarte__abwesend { margin: 0; font-size: 14px; color: var(--gelb-text); }
.balken { height: 8px; border-radius: 999px; background: var(--flaeche-2); overflow: hidden; }
.balken__fuellung { display: block; height: 100%; border-radius: 999px; }
.balken__fuellung--luft { background: #7FAEE0; }
.balken__fuellung--optimal { background: var(--ok); }
.balken__fuellung--grenz { background: var(--gelb); }
.balken__fuellung--ueber { background: #D9534A; }
.balken--0 { width: 0%; }
.balken--5 { width: 5%; }
.balken--10 { width: 10%; }
.balken--15 { width: 15%; }
.balken--20 { width: 20%; }
.balken--25 { width: 25%; }
.balken--30 { width: 30%; }
.balken--35 { width: 35%; }
.balken--40 { width: 40%; }
.balken--45 { width: 45%; }
.balken--50 { width: 50%; }
.balken--55 { width: 55%; }
.balken--60 { width: 60%; }
.balken--65 { width: 65%; }
.balken--70 { width: 70%; }
.balken--75 { width: 75%; }
.balken--80 { width: 80%; }
.balken--85 { width: 85%; }
.balken--90 { width: 90%; }
.balken--95 { width: 95%; }
.balken--100 { width: 100%; }


/* ---- Design „Dunkelgrün“ (MMCI-Primärgrün #006B32, umschaltbar je Gerät) ----
   Hintergrund und Seitenleiste dunkelgrün, Schrift darauf weiß; Karten, Tabellen und Formulare bleiben hell. */

.design-gruen {
    --mm-dunkel: #006B32;
    --mm-tief: #004A22;
    --mm-akzent: #53AD4D;
    --auf-gruen: #fff;
    --auf-gruen-leise: rgba(255, 255, 255, .74);
    --auf-gruen-linie: rgba(255, 255, 255, .16);
    background-color: var(--mm-tief);
    background-image:
        radial-gradient(1100px 520px at 85% -8%, rgba(83, 173, 77, .28), transparent 62%),
        linear-gradient(180deg, var(--mm-dunkel) 0%, var(--mm-tief) 100%);
    background-attachment: fixed;
}

/* Seitenleiste */
.design-gruen .seitenleiste { background: rgba(0, 30, 14, .28); border-right-color: var(--auf-gruen-linie); color: var(--auf-gruen); }
.design-gruen .marke { background: rgba(255, 255, 255, .08); border-color: var(--auf-gruen-linie); }
.design-gruen .marke__kuerzel { background: var(--auf-gruen); color: var(--mm-dunkel); }
.design-gruen .marke__text span,
.design-gruen .navigation__trenner,
.design-gruen .ich__text span { color: var(--auf-gruen-leise); }
.design-gruen .navpunkt { color: rgba(255, 255, 255, .88); }
.design-gruen a.navpunkt:hover { background: rgba(255, 255, 255, .1); color: var(--auf-gruen); }
.design-gruen .navpunkt--aktiv { background: var(--auf-gruen); color: var(--mm-dunkel); outline-color: rgba(255, 255, 255, .5); }
.design-gruen .navpunkt .zaehler { background: var(--mm-akzent); color: #0B2A14; }
.design-gruen .navpunkt--aktiv .zaehler { background: var(--mm-dunkel); color: var(--auf-gruen); }
.design-gruen .ich { border-top-color: var(--auf-gruen-linie); }
.design-gruen .ich .avatar { background: rgba(255, 255, 255, .16); color: var(--auf-gruen); }

/* Alles, was direkt auf dem Hintergrund steht */
.design-gruen .seitenkopf h1,
.design-gruen .einfach > h1 { color: var(--auf-gruen); }
.design-gruen .seitenkopf .oberzeile { color: #B7E2AE; }
.design-gruen .seitenkopf .einleitung { color: var(--auf-gruen-leise); }
.design-gruen .seitenkopf .einleitung a { color: var(--auf-gruen); }
.design-gruen .inhalt > .hinweis,
.design-gruen .inhalt > .leise { color: var(--auf-gruen-leise); }
.design-gruen .kwnav__text { color: var(--auf-gruen); }
.design-gruen .kwnav__text span { color: var(--auf-gruen-leise); }
.design-gruen .sortierleiste,
.design-gruen .sortierleiste label { color: var(--auf-gruen); }
.design-gruen .fuss,
.design-gruen .einfach__fuss { border-top-color: var(--auf-gruen-linie); color: var(--auf-gruen-leise); }
.design-gruen .seitenleiste :focus-visible,
.design-gruen .seitenkopf :focus-visible,
.design-gruen .sortierleiste :focus-visible { outline-color: var(--auf-gruen); }

/* Karten heben sich mit etwas mehr Tiefe vom Grün ab */
.design-gruen .karte,
.design-gruen .kachel,
.design-gruen .kennzahlen > .kennzahl,
.design-gruen .einfach__karte { border-color: transparent; box-shadow: 0 8px 24px rgba(0, 25, 10, .22); }
.design-gruen .personenkarte { box-shadow: 0 8px 24px rgba(0, 25, 10, .22); }

/* Symbol-Knöpfe auf Grün */
.design-gruen .symbolknopf { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: var(--auf-gruen); }
.design-gruen .symbolknopf:hover { background: rgba(255, 255, 255, .2); color: var(--auf-gruen); }

/* ---- Wochenabschluss --------------------------------------------------- */

.abschluss__person { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 20px 0 8px; }
.tabelle--abschluss { table-layout: fixed; min-width: 680px; }
.tabelle--abschluss td { overflow-wrap: anywhere; }
.tabelle--abschluss th:nth-child(1) { width: 44px; }
.tabelle--abschluss th:nth-child(3), .tabelle--abschluss th:nth-child(4) { width: 90px; }
.tabelle--abschluss th:nth-child(5) { width: 110px; }
.tabelle--abschluss th:nth-child(6) { width: 130px; }
.tabelle--abschluss input[type="checkbox"] { width: 22px; height: 22px; }
.vorschlag { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.vorschlag__punkt { padding: 10px 14px; border-radius: 10px; border-left: 4px solid var(--rand-2); background: var(--flaeche); }
.vorschlag__punkt--rot { border-color: #D9534A; background: var(--rot-hell); }
.vorschlag__punkt--gelb { border-color: var(--gelb); background: var(--gelb-hell); }
.vorschlag__punkt--blau { border-color: #7FAEE0; background: #EAF2FB; }
.vorschlag__punkt--gruen { border-color: var(--ok); background: var(--ok-hell); }
.kopierfeld--text { align-items: flex-start; }
.kopierfeld textarea { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--rand-2); border-radius: 10px; resize: vertical; }

/* ---- Verlauf ------------------------------------------------------------ */

.diagramm { display: block; width: 100%; height: auto; }
.diagramm__band { opacity: .6; }
.diagramm__band--luft { fill: #DCEBFA; }
.diagramm__band--optimal { fill: var(--ok-hell); }
.diagramm__band--grenz { fill: var(--gelb-hell); }
.diagramm__band--ueber { fill: var(--rot-hell); }
.diagramm__gitter { stroke: var(--rand); stroke-width: 1; }
.diagramm__gitter--stark { stroke: var(--rand-2); stroke-dasharray: 4 4; }
.diagramm__achse { fill: var(--leise); font-size: 17px; }
.diagramm__wert { fill: var(--text); font-size: 17px; font-weight: 600; }
.diagramm__linie { fill: none; stroke: var(--text-2); stroke-width: 2.5; stroke-linejoin: round; }
.diagramm__punkt { stroke: var(--weiss); stroke-width: 2; }
.diagramm__punkt--luft { fill: #7FAEE0; }
.diagramm__punkt--optimal { fill: var(--ok); }
.diagramm__punkt--grenz { fill: var(--gelb); }
.diagramm__punkt--ueber { fill: #D9534A; }
.diagramm__balken { fill: var(--gelb); }
.legende-zonen { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; font-size: 14px; color: var(--leise); }
.legende-zonen__farbe { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.legende-zonen__farbe--luft { background: #7FAEE0; }
.legende-zonen__farbe--optimal { background: var(--ok); }
.legende-zonen__farbe--grenz { background: var(--gelb); }
.legende-zonen__farbe--ueber { background: #D9534A; }
.zeile--aktuell td { background: var(--gruen-hell); }

/* ---- Mitteilungen ------------------------------------------------------ */

ul.opl-auswahl { list-style: none; margin: 0; padding: 0; }
.auswahl--karte { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.auswahl--aktiv { border-color: var(--gruen); background: var(--gruen-hell); }
.gefahr .liste__text span { color: var(--text-2); }
.mitteilungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mitteilung { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--rand); border-left: 4px solid var(--rand-2); border-radius: 10px; }
.mitteilung__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mitteilung--gefahr { border-left-color: #D9534A; }
.mitteilung--erinnerung { border-left-color: var(--gruen); }
.mitteilung--frist { border-left-color: var(--gelb); }
.mitteilung--neu { background: var(--gruen-hell); }
.push { margin-bottom: 16px; }
.push__status { font-weight: 600; }
.personenkarte__gefahr { display: flex; flex-direction: column; align-items: flex-start; margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--rot-hell); color: var(--rot); font-size: 14px; }
.personenkarte__gefahr a { margin-top: 6px; }

/* ---- Einstiegsseite (Splash im MMCI-Look, nach der MD-Maker-App) ----------- */

.splash {
    --signal: #2F9250;
    --tiefgruen: #144E2B;
    --gelbgruen: #74B84D;
    --tinte: #231F20;
    min-height: 100vh; margin: 0; color: #fff;
    background-color: var(--tiefgruen);
    background-image:
        radial-gradient(rgba(255, 255, 255, .08) 1.1px, transparent 1.5px),
        radial-gradient(900px 620px at 92% -12%, rgba(255, 255, 255, .17), transparent 62%),
        radial-gradient(1000px 720px at 4% 110%, rgba(116, 184, 77, .55), transparent 62%),
        linear-gradient(135deg, var(--signal) 0%, var(--signal) 38%, var(--tiefgruen) 100%);
    background-size: 26px 26px, auto, auto, auto;
    background-attachment: fixed;
}
.splash__buehne {
    min-height: 100vh; max-width: 1280px; margin: 0 auto; padding: 40px 48px;
    display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: center;
}
.splash__held { position: relative; min-height: 560px; display: flex; flex-direction: column; gap: 28px; }
.splash__logo { width: 240px; height: auto; }
.splash__text { margin-top: auto; position: relative; z-index: 1; max-width: 470px; }
.splash__balken { display: block; width: 99px; height: 11px; background: #fff; margin-bottom: 18px; }
.splash__titel { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(44px, 6vw, 72px); line-height: 1.02; letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 14px; color: #fff; }
.splash__unterzeile { font-weight: 300; font-size: 21px; line-height: 1.45; margin: 0 0 24px; opacity: .95; }
.splash__punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 17px; }
.splash__punkte li { display: flex; align-items: center; gap: 12px; }
.splash__punkte .icon { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.splash__fuss { margin: auto 0 0; font-size: 15px; font-weight: 600; opacity: .8; }
.splash__fuss a { color: inherit; }

/* Kundenlogo (Whitelabel): weiße Kachel, damit jedes Logo auf jedem Grund lesbar ist */
.logo-kachel { display: inline-flex; align-items: center; background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.logo-kachel img { display: block; width: auto; height: auto; max-height: 48px; max-width: 220px; }
.splash .logo-kachel { align-self: flex-start; padding: 14px 18px; border-radius: 16px; animation: splash-ein .6s cubic-bezier(.2, .8, .2, 1) both; }
.splash .logo-kachel img { max-height: 64px; max-width: 260px; }
.fuss .logo-kachel img { max-height: 32px; max-width: 160px; }

.splash__karte {
    position: relative; z-index: 2;
    background: #fff; color: var(--text); border-radius: 22px; padding: 36px 34px 30px;
    box-shadow: 0 28px 70px rgba(0, 30, 12, .38), 0 0 0 1px rgba(255, 255, 255, .25);
}
.splash__kartentitel { font-size: 26px; margin-bottom: 6px; }
.splash__karte .einleitung { font-size: 16px; }
.splash__neu { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rand); display: grid; gap: 10px; font-size: 15px; color: var(--leise); }

/* Blätterstapel: das KW-Poster als Bild */
/* Die Blätter liegen halb unter der Anmeldekarte. */
.splash__kunst { position: absolute; right: -135px; top: 140px; width: 300px; height: 300px; }
.blatt {
    position: absolute; left: 50px; top: 20px; width: 200px; height: 250px; border-radius: 14px; padding: 22px;
    display: flex; flex-direction: column; gap: 11px;
}
.blatt--hinten, .blatt--mitte { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.blatt--hinten span, .blatt--mitte span { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .35); width: 80%; }
.blatt--hinten span:nth-child(2n), .blatt--mitte span:nth-child(3n) { width: 58%; }
.blatt--hinten { transform: translate(-46px, 14px) rotate(-11deg); opacity: .55; }
.blatt--mitte { transform: translate(22px, -6px) rotate(5deg); opacity: .8; }
.blatt--vorn { background: #fff; color: var(--tinte); transform: translateY(18px) rotate(-2deg); box-shadow: 0 18px 36px rgba(0, 0, 0, .25); gap: 12px; }
.blatt__kopf { display: flex; align-items: center; justify-content: space-between; }
.blatt__kopf strong { font-family: 'Poppins', sans-serif; font-size: 20px; }
.blatt__bogen { fill: none; stroke-width: 6; }
.blatt__bogen--luft { stroke: #7FAEE0; }
.blatt__bogen--optimal { stroke: var(--ok); }
.blatt__bogen--grenz { stroke: #E0A800; }
.blatt__bogen--ueber { stroke: #D9534A; }
.blatt__nadel { stroke: var(--tinte); stroke-width: 2.5; stroke-linecap: round; }
.blatt__zeile { display: flex; align-items: center; gap: 10px; }
.blatt__text { flex: none; width: 110px; height: 7px; border-radius: 4px; background: #D9DED9; }
.blatt__text--lang { width: 124px; }
.blatt__text--kurz { width: 82px; }
.blatt__punkt { margin-left: auto; width: 22px; height: 10px; border-radius: 5px; background: #E3E7E3; }
.blatt__punkt--gruen { background: var(--ok); }
.blatt__punkt--gelb { background: #E0A800; }
.blatt__marke { margin-top: auto; align-self: flex-end; display: flex; gap: 4px; }
.blatt__marke span { width: 14px; height: 14px; background: var(--tinte); }
.blatt__marke span:nth-child(2) { width: 7px; background: var(--gelbgruen); }
.blatt__marke span:nth-child(3) { background: var(--signal); }

/* Gestaffeltes Einblenden (wie der Splash der MD-Maker-App) */
@keyframes splash-ein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes blatt-hinten { from { opacity: 0; transform: translate(40px, 30px) rotate(-4deg); } }
@keyframes blatt-mitte { from { opacity: 0; transform: translate(80px, 20px) rotate(12deg); } }
@keyframes blatt-vorn { from { opacity: 0; transform: translate(60px, 40px) rotate(6deg); } }
.splash__logo, .splash__balken, .splash__titel, .splash__unterzeile, .splash__punkte, .splash__fuss, .splash__karte { animation: splash-ein .6s cubic-bezier(.2, .8, .2, 1) both; }
.splash__balken { animation-delay: .08s; }
.splash__titel { animation-delay: .14s; }
.splash__unterzeile { animation-delay: .22s; }
.splash__punkte { animation-delay: .3s; }
.splash__karte { animation-delay: .2s; }
.splash__fuss { animation-delay: .34s; }
.blatt--hinten { animation: blatt-hinten .9s cubic-bezier(.2, .8, .2, 1) .12s both; }
.blatt--mitte { animation: blatt-mitte .9s cubic-bezier(.2, .8, .2, 1) .18s both; }
.blatt--vorn { animation: blatt-vorn .9s cubic-bezier(.2, .8, .2, 1) .24s both; }
@media (prefers-reduced-motion: reduce) {
    .splash *, .splash *::before { animation: none !important; }
}

@media (max-width: 1100px) {
    .splash__buehne { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; padding: 32px; }
    .splash__kunst { display: none; }
}
@media (max-width: 820px) {
    .splash__buehne { grid-template-columns: minmax(0, 1fr); padding: 24px 16px 32px; gap: 24px; align-items: start; }
    .splash__held { min-height: 0; gap: 22px; }
    .splash__logo { width: 190px; }
    .splash__text { margin-top: 8px; }
    .splash__titel { font-size: 44px; }
    .splash__unterzeile { font-size: 18px; margin-bottom: 18px; }
    /* Am Handy steht das Anmeldeformular im ersten Bildschirm. */
    .splash__punkte, .splash__fuss { display: none; }
    .splash__karte { padding: 26px 20px 22px; border-radius: 18px; }
}

/* ---- Installer ----------------------------------------------------------- */

.pruefungen { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 4px; }
.pruefung { padding: 6px 10px; border-radius: 8px; font-size: 15px; }
.pruefung--ok { background: var(--ok-hell); color: var(--ok-dunkel); }
.pruefung--warnung { background: var(--gelb-hell); color: var(--gelb-text); }
.pruefung--fehlt { background: var(--rot-hell); color: var(--rot); font-weight: 600; }

/* ---- Druck-Poster (A3 quer) ---------------------------------------------- */

.druck { background: var(--flaeche); margin: 0; padding: 24px; }
.druck__leiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.druckseite { background: var(--weiss); border: 1px solid var(--rand); border-radius: 12px; padding: 28px; margin-bottom: 24px; }
.druckseite__kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; border-bottom: 4px solid var(--gruen); padding-bottom: 10px; }
.druckseite__kopf h1 { margin: 0; }
.druckseite__kopf h1 small { font-family: 'Barlow', Arial, sans-serif; font-weight: 500; font-size: 18px; color: var(--leise); }
.druckseite__kopf .oberzeile { margin: 0; }
.druckseite__woche { margin: 0; font-size: 18px; text-align: right; }
.druckseite__woche strong { font-family: 'Poppins', Arial, sans-serif; font-size: 26px; color: var(--gruen-dunkel); }
.druckseite__werte { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 14px 0 6px; }
.druckseite__werte div { border: 1px solid var(--rand); border-radius: 8px; padding: 6px 10px; }
.druckseite__werte dt { font-size: 12px; color: var(--leise); }
.druckseite__werte dd { margin: 0; font-weight: 700; font-size: 18px; }
.druckseite__werte dd small { font-weight: 500; font-size: 12px; color: var(--leise); }
.druckseite h2 { font-size: 16px; margin: 14px 0 4px; }
.drucktabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.drucktabelle th, .drucktabelle td { border: 1px solid var(--rand-2); padding: 5px 7px; text-align: left; vertical-align: top; }
.drucktabelle th { background: var(--flaeche-2); font-size: 12px; }
.drucktabelle td.zahl { text-align: right; white-space: nowrap; }
.drucktabelle th:first-child { width: 30%; }
.drucktabelle th:last-child { width: 20%; }
.drucktabelle__leer td { height: 30px; }
.drucktabelle .aufgabe--erledigt td { color: var(--leise); }
.drucktabelle .aufgabe--uebertragen td { color: var(--leise); text-decoration: line-through; }
.druckseite__fuss { margin-top: 10px; font-size: 11px; color: var(--leise); }

@page { size: A3 landscape; margin: 12mm; }

@media print {
    .druck { background: none; padding: 0; }
    .druck__leiste { display: none; }
    .druckseite { border: 0; border-radius: 0; padding: 0; margin: 0; break-after: page; }
    .druckseite:last-child { break-after: auto; }
    .drucktabelle tr { break-inside: avoid; }
    .druckseite__kopf h1 { font-size: 28px; }
    .druckseite__werte { margin: 10px 0 4px; }
    .druckseite__werte dd { font-size: 16px; }
    .druckseite h2 { margin: 10px 0 4px; }
    .drucktabelle { font-size: 15px; }
    .drucktabelle th, .drucktabelle td { padding: 4px 6px; }
    .drucktabelle__leer td { height: 28px; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* nur Bildschirm: beim Drucken zählt sonst die Fensterbreite und die Kennzahlen brechen um */
@media screen and (max-width: 900px) {
    .druckseite__werte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .druck .druckseite { overflow-x: auto; }
}

/* ---- Handy & Tablet ------------------------------------------------------ */

@media (max-width: 900px) {
    /* minmax(0, 1fr): sonst wächst die Spalte auf die Breite der einzeiligen Navigation */
    .app { grid-template-columns: minmax(0, 1fr); }
    .seitenleiste { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--rand); gap: 8px; }
    .marke { flex: 1; padding: 8px; }
    .navigation { order: 3; flex: 1 0 100%; min-width: 0; flex-direction: row; overflow-x: auto; gap: 4px; }
    .navigation__trenner { display: none; }
    .navpunkt { flex: none; min-height: 44px; }
    .navigation { overflow-y: hidden; }
    .navpunkt .icon { display: none; }
    .ich { border-top: 0; padding: 0; display: flex; }
    .ich .avatar, .ich__text { display: none; }
    .inhalt { padding: 20px 16px; }
    .kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cockpit, .team-kopf { grid-template-columns: minmax(0, 1fr); }
    .cockpit__opl { position: static; max-height: none; }
    .filter-formular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-formular .feld:first-child, .filter-formular__knoepfe { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
    h1 { font-size: 26px; }
    .einfach { padding: 16px 16px 24px; }
    .einfach__karte { padding: 22px 18px; border-radius: 14px; }
    .formular--raster, .feldreihe, .feldreihe--drei { grid-template-columns: minmax(0, 1fr); }
    .feldreihe--breit-schmal { grid-template-columns: minmax(0, 1fr) 96px; }
    .karte { padding: 18px; }
    .formular__aktionen--trenner { flex-direction: column; align-items: stretch; }
    .tabelle__aktionen { text-align: left; }
    .raster-woche, .spalten { grid-template-columns: minmax(0, 1fr); }
    .kopierfeld--text { flex-direction: column; align-items: stretch; }
    .steckbrief__liste > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .knopf--voll-mobil { width: 100%; }
    .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kennzahlen .kennzahl--gross { grid-column: 1 / -1; }
    .werte--raster { grid-template-columns: minmax(0, 1fr); }
}