/* Gemeinsame Basis-Styles für index.html (Mitarbeiter-Portal) UND admin.html (Verwaltung) —
2026-10-22, Rückmeldung {{INHABERIN}}: beide Seiten sollen wie EINE Anwendung wirken, nicht wie
zwei getrennte. Farb-Tokens 1:1 aus Denises Design-Konzept (Docs/Design-Konzept-
Mitarbeiterfrontend.md, Abschnitt 2) — 5-stufige Warm-Grey-Skala, KEIN Grün/Mint/Coral,
keine Farbverläufe. */
:root {
/* Designsystem SalonJourney (Design A): Weinrot trägt, Orange ist der einzige Funke. */
--weinrot: #720026;
--weinrot-tief: #4F000B;
--orange: #FF7F51;
--creme: #FFF8EF;
--blau-hauch: #E6EDF7;
--linie: #E4D2BF;
--basis-2: #F7E9DC;
--fokus-ring: #AAC3E7;
--color-warm-grey-2: #FFF8EF;
--color-warm-grey-4: #E4D2BF;
--color-warm-grey-6: #D9C3B0;
--color-warm-grey-8: #7A3A44;
--color-warm-grey-10: #4F000B;
--creme-dunkler: var(--linie);
--weiss: #FFFFFF;
--gruen: var(--weinrot);
--gruen-hell: var(--orange);
--text: var(--weinrot-tief);
--text-hell: #7A3A44;
--text-gedaempft: #7A3A44;
--grau-balken: var(--linie);
}
* { box-sizing: border-box; }
body { font-family: 'Inter', system-ui, sans-serif; margin: 0; color: var(--text); background: var(--creme); }
a { color: var(--gruen); }
.msg { margin-top:10px; font-size:14px; white-space:pre-wrap; }
.msg.error { color:#B3261E; }
.msg.ok { color:#0a6b0a; }
/* Login-Card — identisch auf beiden Seiten */
#login-screen { display:flex; justify-content:center; align-items:center; min-height: 80vh; }
#login-box { background:var(--weiss); padding:30px; border-radius:8px; width: 100%; max-width: 360px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); margin: 40px auto; }
#login-box label { display:block; margin: 10px 0 4px; font-size: 14px; }
#login-box input { width:100%; padding:8px; box-sizing:border-box; border:1px solid var(--creme-dunkler); border-radius:4px; font-family:inherit; }
#login-box button { margin-top:16px; width:100%; padding:10px; cursor:pointer; background:var(--gruen); color:white; border:none; border-radius:4px; font-family:inherit; font-weight:600; }
/* Kopfzeile — identisch auf beiden Seiten */
#top-bar { display:flex; justify-content:space-between; align-items:center; padding: 14px 24px; background:var(--weiss); border-bottom:1px solid var(--creme-dunkler); }
#top-bar strong { color: var(--gruen); }
/* Glocke und Abmelden (und der Link-Knopf im Admin) sind ein Paar: gleiche Hoehe (40px), Innenabstand, Schrift, Rahmen, Rundung, mittig ausgerichtet. */
#top-bar button, #top-bar a.button { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; height:40px; min-width:40px; background:none; border:1px solid var(--creme-dunkler); border-radius:4px; padding:0 14px; cursor:pointer; font-family:inherit; font-size:14px; font-weight:400; line-height:1; color:var(--text); text-decoration:none; vertical-align:middle; }
#top-bar button svg { display:block; flex-shrink:0; }
/* Generische Buttons/Inputs außerhalb der Login-Card (z.B. Verwaltungs-Formulare in admin.html) */
button { font-family: inherit; }
input, select { font-family: inherit; }
/* Buddy-Widget (2026-10-22, Rückmeldung {{INHABERIN}}: wirkte zu klein/unauffällig) — größer,
eckige Form (abgerundete Ecken wie die übrigen Buttons der Seite, z.B. "Vorheriges/Nächstes
Modul") statt der bisherigen Pillenform. position:fixed + hoher z-index, damit der Button
beim Scrollen zuverlässig an derselben Bildschirmposition sichtbar bleibt (verifiziert: der
Button liegt im Markup als direktes Geschwisterelement von #app/body, kein Vorfahre mit
transform/overflow, der fixed-Positionierung bricht). */
#buddy-toggle { position:fixed; z-index:500; bottom:24px; right:24px; padding:16px 26px; border-radius:8px; background:var(--gruen); color:white; border:none; font-size:16px; font-weight:600; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,0.25); font-family:inherit; }
#buddy-fenster { display:none; position:fixed; z-index:500; bottom:78px; right:24px; width:320px; max-height:450px; background:var(--weiss); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.18); flex-direction:column; overflow:hidden; }
#buddy-fenster.offen { display:flex; }
#buddy-header { background:var(--gruen); color:white; padding:10px; font-size:14px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
/* "Neuer Chat"-Button (2026-10-22, Rückmeldung {{INHABERIN}}: Verlauf bleibt jetzt tagesübergreifend
erhalten — manueller Reset auch innerhalb desselben Tages soll trotzdem möglich sein). */
#buddy-neuer-chat { background:none; border:1px solid rgba(255,255,255,0.6); color:white; font-size:11px; padding:4px 8px; border-radius:4px; cursor:pointer; font-family:inherit; flex-shrink:0; }
#buddy-neuer-chat:hover { background:rgba(255,255,255,0.15); }
#buddy-header-knoepfe { display:flex; align-items:center; gap:6px; flex-shrink:0; }
#buddy-schliessen { background:none; border:1px solid rgba(255,255,255,0.6); color:white; font-size:11px; padding:4px 8px; border-radius:4px; cursor:pointer; font-family:inherit; flex-shrink:0; }
#buddy-schliessen:hover { background:rgba(255,255,255,0.15); }
#buddy-verlauf { flex:1; overflow-y:auto; padding:10px; font-size:13px; max-height:300px; }
#buddy-verlauf .frage { font-weight:600; margin-top:10px; }
/* Markdown-Rendering (2026-10-22, Rückmeldung {{INHABERIN}}: Fett/Listen in Buddys Antworten
erschienen vorher als Rohtext mit sichtbaren "**"/"1."-Zeichen) — Antwort wird jetzt per
einfachesMarkdownRendern() als echtes HTML eingefügt (siehe app.js/admin.js), daher hier
passende Absatz-/Listen-Abstände statt der vorherigen reinen Text-Darstellung. */
#buddy-verlauf .antwort { margin: 4px 0 10px; }
#buddy-verlauf .antwort p { margin: 0 0 8px; }
#buddy-verlauf .antwort ul, #buddy-verlauf .antwort ol { margin: 4px 0 8px; padding-left: 20px; }
#buddy-verlauf .antwort li { margin-bottom: 4px; }
#buddy-verlauf .antwort blockquote { margin: 4px 0 8px; padding: 6px 10px; background: var(--creme); border-left: 3px solid var(--gruen); font-style: italic; }
#buddy-verlauf .antwort blockquote p { margin: 0; }
#buddy-verlauf .antwort hr { border:none; border-top:1px solid var(--creme-dunkler); margin: 10px 0; }
/* Beispielfrage-Chips in der Begrüßung (2026-10-22, Rückmeldung {{INHABERIN}}) — anklickbar,
füllen die Frage nicht nur ein, sondern senden sie direkt (siehe app.js/admin.js). */
.buddy-beispielfragen { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.buddy-beispiel-chip {
text-align:left; background:var(--creme); border:1px solid var(--creme-dunkler); color:var(--text);
border-radius:14px; padding:7px 12px; font-size:12px; font-family:inherit; cursor:pointer;
}
.buddy-beispiel-chip:hover { background:var(--creme-dunkler); }
/* Eingabefeld vergrößert (2026-10-22, Rückmeldung {{INHABERIN}}: wirkte neben dem jetzt größeren
Chat-Fenster zu klein/schmal) — mehr Höhe/Padding, größere Schrift. */
#buddy-eingabe { display:flex; border-top:1px solid var(--creme-dunkler); }
#buddy-input { flex:1; border:none; padding:14px; font-size:14px; font-family:inherit; }
#buddy-senden { border:none; background:var(--gruen); color:white; padding:0 18px; cursor:pointer; font-family:inherit; font-size:14px; font-weight:600; }
/* Haekchen/Status-Kreis — auf beiden Seiten gebraucht (Lektionsliste, Admin-Roster) */
.haekchen { width:16px; height:16px; border-radius:50%; border:2px solid var(--grau-balken); flex-shrink:0; display:inline-block; }
.haekchen.erledigt { background:var(--gruen); border-color:var(--gruen); }
/* Links in Lektionstext und Buddy-Chat: dezent unterstrichen, gleiche Farbe wie der Text */
#lektion-inhalt a, #buddy-verlauf .antwort a { color: #4F000B; font-family: 'Inter', sans-serif; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; cursor: pointer; }
#lektion-inhalt a:hover, #buddy-verlauf .antwort a:hover { text-decoration-thickness: 2px; }
/* Urlaubsantrag: Auswahl zwischen "Online ausfüllen" und "Dokument hochladen" als zwei gleich große Karten */
.urlaub-wahl { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0 16px; max-width:560px; }
/* Aktive Karte: dunkel gefüllt, weiße Schrift, Häkchen. Inaktive Karte: hell, nur Rand, gedämpfte Schrift, leerer Kreis. */
.urlaub-wahl .wahl-karte { display:block; position:relative; text-align:left; padding:8px 12px 8px 36px; background:var(--weiss); color:var(--text-hell); border:2px solid var(--creme-dunkler); border-radius:8px; cursor:pointer; line-height:1.35; }
.urlaub-wahl .wahl-karte::before { content:''; position:absolute; left:11px; top:10px; width:16px; height:16px; box-sizing:border-box; border:2px solid var(--text-hell); border-radius:50%; background:transparent; }
.urlaub-wahl .wahl-karte:hover { border-color:var(--gruen-hell); }
.urlaub-wahl .wahl-karte.aktiv { background:var(--gruen); color:#fff; border-color:var(--gruen); }
.urlaub-wahl .wahl-karte.aktiv::before { content:'\2713'; border-color:#fff; background:#fff; color:var(--gruen); font-size:11px; font-weight:700; line-height:12px; text-align:center; }
.urlaub-wahl .wahl-titel { display:block; font-weight:600; font-size:14px; }
.urlaub-wahl .wahl-text { display:block; font-size:12px; margin-top:2px; opacity:.85; }
@media (max-width:560px) { .urlaub-wahl { grid-template-columns:1fr; } }
/* Lektion Urlaubsantrag: Urlaubskonto als drei Zahlen, Antrag als ruhige Karte, Erklärung darunter */
.urlaub-konto { margin:0 0 20px; }
.urlaub-konto h3 { margin:0 0 10px; }
.urlaub-zahlen { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; max-width:560px; }
.urlaub-zahlen > div { background:var(--weiss); border:1px solid var(--creme-dunkler); border-radius:8px; padding:10px 12px; text-align:center; }
.urlaub-zahlen .rest { background:var(--gruen); border-color:var(--gruen); color:#fff; }
.urlaub-zahlen .zahl { display:block; font-size:26px; font-weight:600; line-height:1.1; }
.urlaub-zahlen .label { display:block; font-size:12px; margin-top:2px; opacity:.8; }
.urlaub-antrag { margin-top:0; }
.urlaub-summe { background:var(--creme-dunkler); border-radius:8px; padding:10px 12px; font-size:14px; line-height:1.5; }
.urlaub-erklaerung-titel { margin:32px 0 8px; font-size:18px; }
/* Urlaubsantrag: Liste der eigenen Anträge, Mittelweg: Karte mit Rand und Streifen, ohne Schatten */
.urlaub-zeile { background:var(--weiss); border:1px solid var(--creme-dunkler); border-left:5px solid var(--gruen-hell); border-radius:8px; padding:12px 14px; margin:10px 0; }
.urlaub-zeile-genehmigt { border-left-color:#2e7d32; }
.urlaub-zeile-offen { border-left-color:#c58b2b; }
.urlaub-zeile-abgelehnt { border-left-color:#B3261E; }
.urlaub-zeile-kopf { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:space-between; }
.urlaub-zeile-kopf strong { font-size:16px; font-weight:600; }
.urlaub-zeile .status-wort { font-size:12px; font-weight:600; padding:2px 10px; border-radius:999px; border:1px solid currentColor; background:transparent; }
.urlaub-zeile-genehmigt .status-wort { color:#2e7d32; background:#eef6ee; }
.urlaub-zeile-offen .status-wort { color:#8a5a00; background:#fbf4e4; }
.urlaub-zeile-abgelehnt .status-wort { color:#B3261E; background:#fbeeee; }
.urlaub-zeile-meta { font-size:13px; color:var(--text-hell); margin-top:4px; }
.urlaub-zeile-hinweis { font-size:13px; margin-top:4px; }
.urlaub-aendern { margin-top:10px; padding-top:0; border-top:none; }
.urlaub-aendern .urlaub-aktion { background:var(--weiss); color:var(--text); border:1px solid var(--gruen-hell); border-radius:6px; padding:4px 12px; margin-right:8px; font-size:13px; font-weight:500; cursor:pointer; }
.urlaub-aendern .urlaub-aktion:hover { background:var(--gruen); color:#fff; border-color:var(--gruen); }
.urlaub-aendern .urlaub-form { margin-top:8px; font-size:13px; }
.urlaub-aendern .urlaub-form input[type=date] { margin:0 8px 0 4px; }
.link-btn { background:none; border:none; padding:0; color:var(--text); text-decoration:underline; text-underline-offset:2px; cursor:pointer; font-size:13px; }
.link-btn:hover { text-decoration-thickness:2px; }
/* Admin: Eingereichte Dokumente als aufklappbare Info-Karten */
.antrag-info { background:var(--weiss); border:1px solid var(--creme-dunkler); border-radius:8px; margin:8px 0; }
.antrag-info > summary { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; list-style:none; }
.antrag-info > summary::-webkit-details-marker { display:none; }
.antrag-info > summary::after { content:'+'; font-size:18px; margin-left:8px; color:var(--text-hell); }
.antrag-info[open] > summary::after { content:'\2212'; }
.antrag-info .antrag-info-titel { min-width:0; overflow-wrap:anywhere; flex:1; }
.antrag-info .status-wort { flex-shrink:0; }
.antrag-info-inhalt { padding:0 14px 12px; border-top:1px solid var(--creme-dunkler); padding-top:10px; }
/* Admin: Ordner pro Mitarbeiterin (enthält ihre Info-Karten) */
.ma-ordner { background:var(--creme); border:1px solid var(--creme-dunkler); border-radius:8px; margin:8px 0; }
.ma-ordner > summary { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; list-style:none; }
.ma-ordner > summary::-webkit-details-marker { display:none; }
.ma-ordner > summary::after { content:'+'; font-size:18px; margin-left:8px; color:var(--text-hell); }
.ma-ordner[open] > summary::after { content:'\2212'; }
.ma-ordner .ma-ordner-titel { min-width:0; overflow-wrap:anywhere; flex:1; }
.ma-ordner .ma-ordner-zahl { flex-shrink:0; text-align:right; }
.ma-ordner-inhalt { padding:0 10px 8px; }
/* Admin: Rückmeldungen zu Kapiteln */
.fb-tabelle { width:100%; border-collapse:collapse; font-size:14px; }
.fb-tabelle th { text-align:left; font-size:12px; font-weight:600; color:var(--text-hell); padding:4px 8px; border-bottom:1px solid var(--creme-dunkler); }
.fb-tabelle th:nth-child(n+2), .fb-tabelle td:nth-child(n+2) { text-align:center; width:90px; }
.fb-tabelle td { padding:6px 8px; border-bottom:1px solid var(--creme-dunkler); overflow-wrap:anywhere; }
.fb-tabelle tr:last-child td { border-bottom:0; }
.fb-tabelle .fb-warn { font-weight:700; }
/* Antrags-Tabelle pro Mitarbeiterin: Zeile anklicken = Details */
.fb-antraege th:nth-child(2), .fb-antraege td:nth-child(2) { width:110px; }
.fb-antraege th:nth-child(3), .fb-antraege td:nth-child(3) { width:110px; }
.fb-antraege tr.fb-zeile { cursor:pointer; }
.fb-antraege tr.fb-zeile:hover td { background:rgba(0,0,0,.03); }
.fb-antraege tr.fb-zeile td:first-child::before { content:'+'; display:inline-block; width:16px; color:var(--text-hell); }
.fb-antraege tr.fb-zeile[aria-expanded="true"] td:first-child::before { content:'\2212'; }
.fb-antraege tr.fb-detail td { background:var(--weiss); padding:10px 12px; }
.fb-antraege tr.fb-detail[hidden] { display:none; }
.fb-karte { background:var(--weiss); border:1px solid var(--creme-dunkler); border-radius:8px; padding:10px 12px; margin:8px 0; overflow-wrap:anywhere; }
.fb-karte .fb-text { margin-bottom:4px; }
.fb-karte .fb-knoepfe { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.urlaub-aendern-text { font-size:13px; color:var(--text-hell); margin-right:6px; }
/* Admin Info-Karte: Beschriftung links, Wert rechts */
.info-raster { display:grid; grid-template-columns:150px 1fr; gap:6px 14px; margin:0; font-size:14px; }
.info-raster dt { color:var(--text-hell); font-size:13px; }
.info-raster dd { margin:0; overflow-wrap:anywhere; }
.antrag-info .info-urlaub-aendern { margin-top:12px; padding-top:10px; border-top:1px solid var(--creme-dunkler); }
@media (max-width:560px) { .info-raster { grid-template-columns:1fr; gap:0; } .info-raster dt { margin-top:8px; } }
/* Admin: Mitarbeiter-Übersicht, aufgeräumt (Stand, Datumsfelder in einem Raster, Aktionen unten) */
.ma-karte { padding:6px 0 14px; display:flex; flex-direction:column; gap:12px; }
.ma-stand { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--text-hell); }
.ma-daten { display:grid; grid-template-columns:130px 170px auto; gap:8px 12px; align-items:center; max-width:520px; }
.ma-daten label { margin:0; font-size:13px; color:var(--text); }
.ma-daten input[type=date] { width:100%; box-sizing:border-box; padding:4px 8px; margin:0; }
.ma-daten button { padding:4px 14px; font-size:13px; justify-self:start; }
.ma-hinweis { margin:0; font-size:12px; line-height:1.5; color:var(--text-hell); max-width:520px; }
.ma-aktionen { display:flex; flex-wrap:wrap; gap:8px; padding-top:10px; border-top:1px solid var(--creme-dunkler); }
.ma-aktionen button { padding:6px 14px; font-size:13px; }
@media (max-width:560px) { .ma-daten { grid-template-columns:1fr; } .ma-daten button { margin-bottom:6px; } }
/* Admin: Urlaubskarte pro Mitarbeiterin, aufgeräumt */
.urlaub-ma > .uk { display:flex; flex-direction:column; gap:12px; padding:10px 0 4px; }
.uk-austritt { background:var(--creme-dunkler); border-left:4px solid var(--gruen); border-radius:6px; padding:8px 12px; font-size:14px; line-height:1.5; }
.uk-zahlen { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; max-width:420px; }
.uk-zahlen > div { background:var(--weiss); border:1px solid var(--creme-dunkler); border-radius:8px; padding:8px 10px; text-align:center; }
.uk-zahlen .rest { background:var(--gruen); border-color:var(--gruen); color:#fff; }
.uk-zahlen .zahl { display:block; font-size:22px; font-weight:600; line-height:1.1; }
.uk-zahlen .label { display:block; font-size:11px; margin-top:2px; opacity:.8; }
.uk-notiz { margin:0; font-size:12px; line-height:1.5; color:var(--text-hell); }
.uk-titel { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-hell); margin-bottom:4px; }
.uk-liste { display:flex; flex-direction:column; }
.uk-zeile { display:grid; grid-template-columns:200px 1fr auto; gap:10px; align-items:center; padding:5px 0; border-bottom:1px solid var(--creme-dunkler); font-size:13px; }
.uk-zeile .uk-tage { color:var(--text-hell); }
.uk-zeile button { padding:2px 10px; font-size:12px; }
.uk-leer { font-size:13px; color:var(--text-hell); }
.uk-teil { border:1px solid var(--creme-dunkler); border-radius:8px; background:var(--weiss); }
.uk-teil > summary { cursor:pointer; padding:8px 12px; font-size:13px; font-weight:600; }
.uk-teil > .uk-form, .uk-teil > .uk-notiz { margin:0 12px 12px; }
.uk-form { display:flex; flex-direction:column; gap:10px; }
.uk-reihe { display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.uk-reihe label, .uk-form > label { margin:0; font-size:13px; }
@media (max-width:560px) { .uk-zeile { grid-template-columns:1fr; gap:2px; } }
/* Mitarbeiterakte: Kacheln */
.akte-raster { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; margin-top:12px; }
button.akte-kachel { display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; text-align:left; background:#fff; color:#4F000B; border:1px solid var(--creme-dunkler); border-radius:12px; font-family:inherit; font-size:14px; cursor:pointer; box-shadow:none; transition:border-color .15s, background .15s; }
button.akte-kachel:hover, button.akte-kachel:focus-visible { border-color:#4F000B; background:#faf8f5; }
.akte-kachel-bild { flex:0 0 46px; width:46px; height:46px; border-radius:50%; background:#FFF8EF; color:#4F000B; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; letter-spacing:.5px; }
.akte-kachel-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.akte-kachel-text strong { font-weight:600; font-size:15px; }
.akte-kachel-info { font-size:12px; color:#A8737C; }
.akte-kachel-pfeil { font-size:18px; color:#A8737C; transition:transform .15s, color .15s; }
button.akte-kachel:hover .akte-kachel-pfeil { transform:translateX(3px); color:#4F000B; }
.uk-eintrag { border-bottom:1px solid var(--creme-dunkler); padding-bottom:6px; }
.uk-eintrag .uk-zeile { border-bottom:none; padding-bottom:2px; }
.uk-aendern { margin:0 0 2px; font-size:12px; }
.uk-aendern button { padding:2px 10px; font-size:12px; margin-right:4px; }
/* Urlaubsliste in der Urlaubskarte: eine Zeile pro Urlaub, "Ändern" klappt Verschieben/Zurückziehen auf */
details.uk-eintrag { border-bottom:1px solid var(--creme-dunkler); padding:0; }
details.uk-eintrag > summary.uk-zeile { grid-template-columns:200px 1fr auto; cursor:pointer; list-style:none; border-bottom:none; padding:7px 0; }
details.uk-eintrag > summary.uk-zeile::-webkit-details-marker { display:none; }
.uk-aendern-btn { font-size:12px; color:var(--text); border:1px solid var(--gruen-hell); border-radius:6px; padding:2px 10px; }
.uk-aendern-btn::after { content:' \25BE'; }
details.uk-eintrag[open] .uk-aendern-btn { background:var(--gruen); color:#fff; border-color:var(--gruen); }
details.uk-eintrag[open] .uk-aendern-btn::after { content:' \25B4'; }
.uk-panel { padding:2px 0 10px 0; }
.uk-panel .uk-aendern button { padding:3px 11px; font-size:12px; margin-right:6px; }
@media (max-width:560px) { details.uk-eintrag > summary.uk-zeile { grid-template-columns:1fr auto; } details.uk-eintrag > summary.uk-zeile .uk-tage { grid-column:1 / 2; } }
/* Kopfzeile: Chat und Nachrichten mit Beschriftung (04.11.2026): beides soll auffallen */
#top-bar #chat-btn { gap:8px; padding:0 16px 0 14px; background:#4F000B; border-color:#4F000B; color:#fff; font-weight:600; }
#top-bar #chat-btn:hover { background:#6a5f55; border-color:#6a5f55; }
#top-bar #glocke, #top-bar #admin-glocke { gap:8px; padding:0 14px; }
.top-knopf-text { font-size:14px; }
@media (max-width: 700px) { #top-bar #glocke .top-knopf-text, #top-bar #admin-glocke .top-knopf-text { display:none; } #top-bar #glocke, #top-bar #admin-glocke { padding:0; } }
/* Tageszahlen im Dashboard (04.11.2026): wie die Karte im Adminbereich */
.tz-gruppe { margin: 0 0 14px; padding: 12px 14px 2px; background: #FFFBF6; border: 1px solid #FFF8EF; border-radius: 10px; }
.tz-gruppe-titel { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7A3A44; }
.tz-bal { margin: 0 0 12px; }
.tz-bal-kopf { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #4F000B; }
.tz-bal-kopf strong { font-weight: 700; }
.tz-von { font-weight: 400; color: #7A3A44; }
.tz-bal-spur { height: 8px; background: #FFF8EF; border-radius: 4px; margin-top: 5px; overflow: hidden; }
.tz-bal-spur > div { height: 100%; background: #4F000B; border-radius: 4px; }
.tz-bal-info { margin-top: 3px; font-size: 11.5px; color: #7A3A44; }
/* Gespräch im Detail (Mitarbeiterin): ruhige Protokollansicht */
.gd-kopf { background: #FFF8EF; border-radius: 12px; padding: 16px 18px 12px; margin: 14px 0 14px; }
.gd-kopf-titel { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gd-kopf h2 { margin: 0; font-size: 21px; line-height: 1.25; color: #4F000B; }
.gd-meta { margin: 6px 0 0; font-size: 13px; color: #7A3A44; }
.gd-wer { margin: 4px 0 0; font-size: 12.5px; color: #7A3A44; }
.gd-wartet { margin: 10px 0 0; padding: 8px 10px; background: #fff; border-left: 3px solid #4F000B; border-radius: 4px; font-size: 13.5px; color: #4F000B; }
.gd-karte { background: #fff; border: 1px solid #E4D2BF; border-radius: 12px; padding: 16px 18px; margin: 0 0 14px; box-shadow: 0 2px 10px rgba(79,0,11,0.05); overflow-wrap: anywhere; }
.gd-ueber { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7A3A44; }
.gd-abschnitt { padding: 10px 0; border-top: 1px solid #FFF8EF; }
.gd-abschnitt:first-of-type { border-top: 0; padding-top: 0; }
.gd-abschnitt h4 { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7A3A44; }
.gd-text p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.6; color: #4F000B; }
.gd-text ul { margin: 2px 0 6px; padding-left: 20px; }
.gd-text li { margin: 0 0 4px; font-size: 14.5px; line-height: 1.55; color: #4F000B; }
.gd-wichtig { background: #FFFBF6; border-left: 3px solid #4F000B; border-radius: 6px; padding: 10px 12px; margin: 6px 0; border-top: 0; }
.gd-komp { display: grid; gap: 0; }
.gd-komp-zeile { display: grid; grid-template-columns: 1fr auto 74px; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #FFF8EF; font-size: 14px; color: #4F000B; }
.gd-komp-zeile:last-child { border-bottom: 0; }
.gd-komp-wort { color: #7A3A44; font-size: 13px; text-align: right; }
.gd-pkte { display: inline-flex; gap: 4px; white-space: nowrap; }
.gd-pkt { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #A8737C; background: #fff; box-sizing: border-box; }
.gd-pkt.voll { background: #4F000B; border-color: #4F000B; }
.gd-legende { margin: 8px 0 0; font-size: 11.5px; color: #7A3A44; }
.gd-pers-kopf, .gd-pers-zeile { display: grid; grid-template-columns: 1fr 150px 150px; gap: 12px; align-items: center; }
.gd-pers-kopf { padding: 0 0 6px; border-bottom: 1px solid #E4D2BF; font-size: 11px; font-weight: 600; color: #7A3A44; }
.gd-pers-zeile { padding: 9px 0; border-bottom: 1px solid #FFF8EF; font-size: 14px; color: #4F000B; }
.gd-pers-zeile:last-child { border-bottom: 0; }
.gd-pers-komm { margin-top: 2px; font-size: 12px; color: #7A3A44; }
.gd-pers-etikett { display: none; margin-right: 8px; font-size: 11px; color: #7A3A44; min-width: 64px; }
.gd-leer { color: #A8737C; }
.gd-ziel { border: 1px solid #FFF8EF; background: #FFFBF6; border-radius: 10px; padding: 10px 12px; margin: 0 0 8px; }
.gd-ziel-kopf { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; font-size: 14px; color: #4F000B; }
.gd-ziel-kopf span { font-size: 12px; color: #7A3A44; }
.gd-klein { margin: 4px 0 0; font-size: 12px; color: #7A3A44; }
.gd-balken { height: 7px; background: #FFF8EF; border-radius: 4px; margin: 8px 0 2px; overflow: hidden; }
.gd-balken span { display: block; height: 100%; background: #4F000B; border-radius: 4px; }
.gd-aktion { border-color: #4F000B; }
.gd-aktion p { font-size: 14.5px; line-height: 1.6; }
@media (max-width: 600px) {
.gd-kopf { padding: 14px 14px 10px; }
.gd-kopf h2 { font-size: 19px; }
.gd-karte { padding: 14px 14px; }
.gd-komp-zeile { grid-template-columns: 1fr auto; row-gap: 2px; }
.gd-komp-zeile .gd-komp-name { grid-column: 1; }
.gd-komp-zeile .gd-pkte { grid-column: 2; }
.gd-komp-zeile .gd-komp-wort { grid-column: 1 / -1; text-align: left; font-size: 12px; margin-top: -4px; }
.gd-pers-kopf { display: none; }
.gd-pers-zeile { grid-template-columns: 1fr; gap: 4px; }
.gd-pers-wert { display: flex; align-items: center; }
.gd-pers-etikett { display: inline-block; }
}
/* Vorbereitung auf das Mitarbeitergespräch (04.11.2026) */
.vb-karte .vb-termin { margin: 0; font-size: 14px; color: #4F000B; }
.vb-einleitung { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: #4F000B; }
.vb-status { margin: 0 0 14px; padding: 8px 12px; border-radius: 8px; background: #FFFBF6; border: 1px solid #E4D2BF; font-size: 13px; color: #4F000B; }
.vb-status.ok { background: #FFF8EF; border-color: #A8737C; }
.vb-kopf { margin: 18px 0 4px; font-size: 14px; font-weight: 700; color: #4F000B; padding-top: 12px; border-top: 1px solid #FFF8EF; }
.vb-hilfe { margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: #7A3A44; }
.vb-liste { display: flex; flex-direction: column; gap: 2px; }
.vb-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #FBEFE3; margin: 0; }
.vb-name { font-size: 13.5px; color: #4F000B; flex: 1 1 auto; min-width: 0; }
.vb-zahlen { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.vb-zahl { width: 38px; height: 38px; min-width: 38px; padding: 0; border-radius: 50%; border: 1.5px solid #A8737C; background: #fff; color: #4F000B; font: 600 14px Inter, Arial, sans-serif; cursor: pointer; }
.vb-zahl.aktiv { background: #4F000B; border-color: #4F000B; color: #fff; }
.vb-stufe { width: 140px; flex: 0 0 auto; padding: 8px 10px; font: 13.5px Inter, Arial, sans-serif; border: 1px solid #E4D2BF; border-radius: 8px; background: #fff; color: #4F000B; min-height: 40px; }
.vb-feld { margin: 12px 0 0; }
.vb-label { display: block; margin: 0 0 2px; font-size: 13.5px; font-weight: 700; color: #4F000B; }
.vb-text { width: 100%; box-sizing: border-box; min-height: 76px; padding: 10px 12px; font: 14px/1.5 Inter, Arial, sans-serif; border: 1px solid #E4D2BF; border-radius: 8px; background: #fff; color: #4F000B; resize: vertical; }
@media (max-width: 520px) {
.vb-zeile:not(.vb-fach) { flex-direction: column; align-items: flex-start; gap: 6px; }
.vb-zahlen { width: 100%; justify-content: space-between; }
.vb-zahl { width: 46px; height: 46px; min-width: 46px; }
.vb-fach { flex-direction: column; align-items: flex-start; gap: 6px; }
.vb-stufe { width: 100%; min-height: 46px; }
}
/* Vorbereitung: Frist, Knöpfe und Link im Kalender (05.11.2026) */
.vb-frist { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #4F000B; }
.vb-frist.spaet { color: #B3261E; }
.vb-aktionen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.vb-aktionen button { min-height: 44px; }
.kal-vorb-btn { display: block; width: 100%; max-width: 360px; min-height: 46px; padding: 11px 16px; font-family: inherit; font-size: 15px; font-weight: 700; color: #fff; background: #4F000B; border: 0; border-radius: 8px; cursor: pointer; }
.aufgabe-vorb { margin-left: 8px; }
@media (max-width: 600px) { .vb-aktionen button { flex: 1 1 100%; } .aufgabe-reihe { flex-wrap: wrap; } }
/* Protokoll für die Mitarbeiterin in Themenblöcken (04.11.2026) */
.gd-sprung { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 2px 8px; margin: 0 0 12px; scrollbar-width: thin; }
.gd-chip { flex: 0 0 auto; white-space: nowrap; background: #fff; border: 1px solid #E4D2BF; border-radius: 999px; color: #4F000B; font-family: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; min-height: 38px; cursor: pointer; }
.gd-chip:hover { background: #FFF8EF; }
.gd-karte[id^="gd-sek-"] { scroll-margin-top: 14px; }
.gd-vereinbart { background: #FFFBF6; border-left: 4px solid #4F000B; }
.gd-vereinbart .gd-ueber { color: #4F000B; }
.gd-block-kopf { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 0 0 8px; border-bottom: 2px solid #FFF8EF; }
.gd-block-kopf h3 { margin: 0; font-size: 15px; font-weight: 700; color: #4F000B; font-family: inherit; }
.gd-block-nr { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #4F000B; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.gd-block .gd-abschnitt h4 { font-size: 11px; color: #7A3A44; }
.gd-block-abschluss { background: #FFFBF6; border-left: 4px solid #4F000B; }
.gd-block-abschluss .gd-wichtig { background: transparent; border-left: 0; padding: 10px 0; }
@media (max-width: 600px) {
.gd-chip { font-size: 13px; padding: 8px 12px; }
.gd-block-kopf h3 { font-size: 15px; }
}
/* Protokollansicht: einklappbare Abschnitte (05.11.2026) */
.gd-klapp > summary { list-style: none; cursor: pointer; }
.gd-klapp > summary::-webkit-details-marker { display: none; }
.gd-klapp-kopf { display: flex; align-items: center; gap: 10px; }
.gd-klapp-kopf h3, .gd-klapp-kopf .gd-ueber { margin: 0; }
.gd-klapp:not(.gd-block) > .gd-klapp-kopf .gd-ueber { flex: 1 1 auto; }
.gd-block > .gd-block-kopf h3 { flex: 1 1 auto; }
.gd-zaehler { flex: 0 0 auto; margin-left: auto; font-size: 12px; color: #7A3A44; font-weight: 600; }
.gd-pfeil { flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid #7A3A44; border-bottom: 2px solid #7A3A44; transform: rotate(45deg); margin: 0 4px 3px 4px; transition: transform .15s; }
.gd-klapp[open] > summary .gd-pfeil { transform: rotate(-135deg); margin-bottom: -3px; }
.gd-klapp[open] > summary.gd-klapp-kopf { margin-bottom: 10px; }
.gd-klapp > summary:focus-visible { outline: 2px solid #4F000B; outline-offset: 3px; border-radius: 6px; }
.gd-werkzeuge { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.gd-werkzeuge button { padding: 7px 14px; font-size: 13px; }
.weitere-reihe { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #FFF8EF; flex-wrap: wrap; }
.weitere-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.weitere-text strong { font-size: 14px; color: #4F000B; }
.weitere-meta { font-size: 12px; color: #7A3A44; }
@media (max-width: 600px) { .weitere-reihe .aufgabe-ansehen { width: 100%; min-height: 44px; } .gd-werkzeuge button { width: 100%; min-height: 44px; } }
/* Gesprächsliste in der Verwaltung: Datum links, Titel mit Status in der Mitte, Knopf rechts */
.ges-zeile { display:grid; grid-template-columns:100px 150px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--creme-dunkler); }
.ges-zeile .ges-z-status { font-size:13px; }
.ges-zeile .ges-z-datum { font-weight:600; font-size:14px; color:var(--text); line-height:1.3; }
.ges-zeile .ges-z-datum small { display:block; font-weight:400; font-size:12px; color:var(--text-hell); }
.ges-zeile .ges-z-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.ges-zeile .ges-z-info strong { font-size:14px; font-weight:600; line-height:1.3; }
.ges-zeile .ges-z-meta { font-size:12px; color:var(--text-hell); }
.ges-zeile button { padding:6px 14px; font-size:13px; white-space:nowrap; }
@media (max-width:560px) { .ges-zeile { grid-template-columns:auto 1fr auto; gap:4px 10px; } .ges-zeile .ges-z-info { grid-column:1 / 3; grid-row:2; } .ges-zeile button { grid-column:3; grid-row:1 / 3; } }
/* Fortschritt: To-dos und Lektionen (Dashboard) */
.fort-kopf { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; margin:4px 0 12px; }
.fort-kachel { background:#FFFBF6; border:1px solid var(--creme-dunkler, #EBDCCB); border-radius:10px; padding:10px 12px; }
.fort-k-titel { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-hell, #7A3A44); }
.fort-k-zahl { font-size:26px; font-weight:700; line-height:1.2; }
.fort-k-zahl span { font-size:14px; font-weight:400; color:var(--text-hell, #7A3A44); }
.fort-k-unter { font-size:12px; color:var(--text-hell, #7A3A44); margin-top:4px; }
.fort-spur { position:relative; height:8px; background:#e9e5de; border-radius:4px; overflow:hidden; margin:6px 0; }
.fort-spur > div { position:absolute; top:0; bottom:0; left:0; }
.fort-gold { background:#FF7F51; }
.fort-gruen { background:#1E6B4D; }
.fort-abschnitt { font-weight:700; margin:14px 0 6px; font-size:14px; }
.fort-liste { border:1px solid var(--creme-dunkler, #EBDCCB); border-radius:10px; overflow:hidden; background:#fff; }
.fort-zeile { border-bottom:1px solid var(--creme-dunkler, #EBDCCB); }
.fort-zeile:last-child { border-bottom:none; }
.fort-zeile > summary { display:grid; grid-template-columns:minmax(120px, 1.2fr) minmax(80px, 1fr) 44px 74px; gap:10px; align-items:center; padding:8px 12px; cursor:pointer; list-style:none; font-size:13px; }
.fort-zeile > summary::-webkit-details-marker { display:none; }
.fort-zeile > summary .fort-spur { margin:0; }
.fort-name { font-weight:600; }
.fort-stand { text-align:right; font-variant-numeric:tabular-nums; color:var(--text-hell, #7A3A44); }
.fort-chip { font-size:11px; text-align:center; padding:2px 6px; border-radius:10px; }
.fort-chip.fertig { background:#E1F1EA; color:#1E6B4D; }
.fort-chip.laeuft { background:#f6ecd5; color:#7A3A00; }
.fort-chip.offen { background:#FFF8EF; color:#7A3A44; }
.fort-items { list-style:none; margin:0; padding:2px 12px 10px 24px; font-size:13px; }
.fort-items li { display:flex; gap:8px; padding:2px 0; align-items:baseline; }
.fort-items li.offen { color:#7A3A44; }
.fort-items .fort-ico { width:14px; flex:0 0 14px; }
.fort-items li.ok .fort-ico { color:#1E6B4D; }
.fort-items li.gesehen .fort-ico { color:#FF7F51; }
.fort-items .fort-text { flex:1; }
.fort-items .fort-datum { font-size:12px; color:var(--text-hell, #7A3A44); white-space:nowrap; }
.fort-legende { font-size:12px; color:var(--text-hell, #7A3A44); margin:8px 0 0; }
.fort-legende .ok { color:#1E6B4D; } .fort-legende .gesehen { color:#FF7F51; }
@media (max-width:560px) { .fort-zeile > summary { grid-template-columns:1fr auto auto; } .fort-zeile > summary .fort-spur { grid-column:1 / 4; grid-row:2; } }
/* Tageszahlen eintragen */
.tz-intro { font-size:13px; margin:0 0 12px; }
.tz-tagleiste { display:flex; gap:12px; flex-wrap:wrap; align-items:center; background:#FFFBF6; border:1px solid var(--creme-dunkler, #EBDCCB); border-radius:10px; padding:10px 14px; }
.tz-tagleiste label { margin:0; font-weight:600; }
.tz-tagleiste input[type=date] { width:170px; }
.tz-wochentag { font-size:15px; font-weight:600; color:#4F000B; }
.tz-liste { display:grid; gap:10px; margin-top:12px; }
.tz-ma { background:#fff; border:1px solid var(--creme-dunkler, #EBDCCB); border-radius:12px; padding:12px 14px; }
.tz-ma-kopf { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:15px; }
.tz-chip { font-size:11px; padding:2px 8px; border-radius:10px; background:#FFF8EF; color:#7A3A44; }
.tz-felder { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; }
.tz-feld { display:flex; flex-direction:column; gap:4px; margin:0; font-weight:400; }
.tz-lab { font-size:12px; font-weight:600; color:#4F000B; }
.tz-eingabe { display:flex; align-items:center; border:1px solid #E4D2BF; border-radius:8px; background:#fff; overflow:hidden; }
.tz-eingabe:focus-within { border-color:#4F000B; box-shadow:0 0 0 2px rgba(79,0,11,.12); }
.tz-eingabe input { flex:1; min-width:0; width:100%; border:0; outline:0; padding:9px 10px; font-size:16px; background:transparent; text-align:right; }
.tz-eingabe i { font-style:normal; padding:0 10px; color:#7A3A44; font-size:13px; background:#FFFBF6; align-self:stretch; display:flex; align-items:center; border-left:1px solid #FFF8EF; }
.tz-feld.aus { opacity:.55; }
.tz-ziel { font-size:11.5px; color:#7A3A44; }
.tz-speichern { margin-top:14px; padding:11px 28px; font-size:15px; }
/* Formular "Termin eintragen" (Popup und Karte) */
#kal-admin-inhalt label { display:block; margin:14px 0 4px; font-size:13px; font-weight:600; color:#4F000B; }
#kal-admin-inhalt input[type=text], #kal-admin-inhalt input[type=date], #kal-admin-inhalt input[type=time], #kal-admin-inhalt select, #kal-admin-inhalt textarea {
width:100%; max-width:100%; box-sizing:border-box; padding:10px 12px; font-size:16px; border:1px solid #E4D2BF; border-radius:8px; background:#fff; font-family:inherit; }
#kal-admin-inhalt input:focus, #kal-admin-inhalt select:focus, #kal-admin-inhalt textarea:focus { outline:0; border-color:#4F000B; box-shadow:0 0 0 2px rgba(79,0,11,.12); }
#kal-admin-inhalt input[type=text] + input[type=text] { margin-top:8px; }
#kal-admin-inhalt h4 { font-size:18px; margin:4px 0 2px; }
#kal-admin-inhalt .kf-zeile { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:0 14px; }
#kal-admin-inhalt .kf-zeile > div > label { margin-top:14px; }
#kal-admin-inhalt label.kf-check { display:flex; align-items:center; gap:10px; font-weight:400; margin:10px 0; cursor:pointer; }
#kal-admin-inhalt label.kf-check input { width:18px; height:18px; flex:none; margin:0; }
#kal-admin-inhalt .kf-plz { display:grid; grid-template-columns:110px 1fr; gap:8px; margin-top:8px; }
#kal-admin-inhalt .kf-knoepfe { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
#kal-admin-inhalt .kf-knoepfe button { padding:11px 26px; font-size:15px; }
#kal-admin-inhalt #btn-kal-termine { width:auto; }
#kal-f-personen { margin:6px 0 10px 4px !important; padding:10px 12px; background:#FFFBF6; border-radius:8px; }
/* Einträge nach Jahren */
details.jahr-grp { margin:4px 0 8px; border:1px solid var(--creme-dunkler, #EBDCCB); border-radius:8px; background:#fff; }
details.jahr-grp > summary { cursor:pointer; padding:8px 12px; font-size:14px; list-style:none; }
details.jahr-grp > summary::-webkit-details-marker { display:none; }
details.jahr-grp > summary::before { content:"▸"; display:inline-block; width:16px; color:#7A3A44; }
details.jahr-grp[open] > summary::before { content:"▾"; }
details.jahr-grp > table, details.jahr-grp > .fb-tabelle { margin:0 0 8px; }
/* Verwaltung: Deine Einschätzung im Stil der Selbsteinschätzung */
.ges-vb-bew { flex-direction:column; align-items:stretch; gap:6px; }
.ges-vb-kopf { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ges-vb-bew .gb-kommentar { width:100%; box-sizing:border-box; }
.vb-zahl.selbst { box-shadow:0 0 0 2px #fff, 0 0 0 4px #FF7F51; }
.ges-selbst-hinweis { display:block; font-size:11px; color:#7A3A44; }
.ges-leit-gegen { border:1px solid #FF7F51; background:#FFF8EF; border-radius:10px; padding:10px 14px; margin:0 0 12px; }
.ges-leit-gegen-kopf { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
/* Gesundheitsprämie */
.pm-kopf { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; background:#4F000B; color:#fff; border-radius:12px; padding:14px 18px; margin:0 0 12px; }
.pm-kopf-titel { font-size:17px; font-weight:700; }
.pm-kopf-unter { font-size:12.5px; opacity:.85; margin-top:2px; }
.pm-summe { text-align:right; font-size:24px; font-weight:700; line-height:1.1; }
.pm-summe span, .pm-betrag span { display:block; font-size:11px; font-weight:400; opacity:.8; text-transform:uppercase; letter-spacing:.05em; }
.pm-liste { display:grid; gap:10px; }
.pm-ma { background:#fff; border:1px solid var(--creme-dunkler, #EBDCCB); border-radius:12px; padding:12px 16px; }
.pm-ma.pm-kein { background:#FFFBF6; }
.pm-ma-kopf { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.pm-name { font-size:16px; font-weight:700; }
.pm-pnr { font-size:12px; color:#7A3A44; margin-top:1px; }
.pm-betrag { text-align:right; font-size:21px; font-weight:700; color:#1E6B4D; line-height:1.1; }
.pm-kein .pm-betrag { color:#7A3A44; }
.pm-betrag span { color:#7A3A44; opacity:1; }
.pm-fakten { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px; margin:12px 0 8px; padding:10px 0; border-top:1px solid #FFF8EF; border-bottom:1px solid #FFF8EF; }
.pm-fakten > div { display:flex; flex-direction:column; gap:2px; }
.pm-fakten span { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#7A3A44; }
.pm-fakten strong { font-size:15px; }
.pm-spur { display:block; height:6px; background:#FFF8EF; border-radius:3px; overflow:hidden; margin-top:3px; }
.pm-spur b { display:block; height:100%; background:#FF7F51; }
.pm-chip { display:inline-block; align-self:flex-start; padding:1px 10px; border-radius:10px; font-size:12px !important; }
.pm-chip.ja { background:#E1F1EA; color:#1E6B4D; }
.pm-chip.nein { background:#f1e3e3; color:#B3261E; }
.pm-hinweis { list-style:none; margin:0; padding:0; font-size:12.5px; color:#7A3A44; display:grid; gap:3px; }
.pm-h-titel { font-weight:600; color:#4F000B; }
.pm-krank { margin:2px 0 0 14px; padding:0; list-style:disc; }
/* Deine Nachrichten (Mitarbeiter-App): nach Tagen gruppiert, Karten mit Art und Uhrzeit */
.hin-tag { margin:16px 0 6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#7A3A44; }
.hin-tag:first-child { margin-top:4px; }
.hin-karte { background:#fff; border:1px solid var(--creme-dunkler, #EBDCCB); border-left:4px solid #c9c2b6; border-radius:10px; padding:10px 14px; margin:0 0 8px; }
.hin-karte.hin-neu { background:#fbf8f2; box-shadow:0 1px 4px rgba(79,0,11,.12); }
.hin-gespraech { border-left-color:#4F000B; } .hin-urlaub { border-left-color:#1E6B4D; } .hin-krank { border-left-color:#B3261E; }
.hin-antrag { border-left-color:#7A3A00; } .hin-erinnerung { border-left-color:#FF7F51; } .hin-kalender { border-left-color:#4a6fa5; }
.hin-buddy { border-left-color:#8a5aa5; } .hin-todo { border-left-color:#2f8f8f; } .hin-verwaltung { border-left-color:#4F000B; }
.hin-kopf { display:flex; align-items:center; gap:8px; margin-bottom:4px; font-size:12px; }
.hin-art { font-weight:700; color:#4F000B; text-transform:uppercase; letter-spacing:.04em; }
.hin-punkt { width:8px; height:8px; border-radius:50%; background:#B3261E; display:inline-block; }
.hin-neu-text { color:#B3261E; font-weight:600; }
.hin-anz { background:#FFF8EF; color:#7A3A44; border-radius:10px; padding:0 7px; }
.hin-zeit { margin-left:auto; color:#7A3A44; }
.hin-text { font-size:14.5px; line-height:1.5; color:#3D0A14; overflow-wrap:anywhere; }
.ges-ein-fertig { margin-top:14px; padding:10px 14px; border:1px solid #FF7F51; background:#FFF8EF; border-radius:10px; font-size:13.5px; }
.ges-ein-fertig.ok { border-color:#1E6B4D; background:#eef6f0; }
/* Gesundheitsprämie: schlichter und kompakter */
.pm-kopf { background:#F7E9DC; color:#4F000B; padding:10px 14px; border-radius:10px; margin-bottom:8px; }
.pm-kopf-titel { font-size:15px; }
.pm-kopf-unter { font-size:12px; opacity:1; color:#7A3A44; }
.pm-summe { font-size:18px; }
.pm-summe span { opacity:1; color:#7A3A44; }
.pm-liste { gap:6px; }
.pm-ma { padding:8px 12px; border-radius:10px; }
.pm-name { font-size:14px; }
.pm-pnr { display:inline; margin-left:6px; }
.pm-name + .pm-pnr { display:block; margin-left:0; }
.pm-betrag { font-size:16px; }
.pm-fakten { margin:8px 0 6px; padding:6px 0; gap:6px; }
.pm-fakten strong { font-size:13.5px; }
.pm-fakten span { font-size:10.5px; }
.pm-spur { display:none; }
.pm-hinweis { font-size:12px; }
details.hin-aelter { margin-top:16px; }
details.hin-aelter > summary { cursor:pointer; list-style:none; margin:0 0 8px; }
details.hin-aelter > summary::-webkit-details-marker { display:none; }
details.hin-aelter > summary::before { content:"▸"; display:inline-block; width:16px; }
details.hin-aelter[open] > summary::before { content:"▾"; }
/* Gesundheitsprämie: einheitlich, schlicht, gut lesbar */
.pm-kopf { background:transparent; border:0; border-bottom:2px solid #4F000B; border-radius:0; padding:6px 2px 8px; margin-bottom:10px; }
.pm-kopf-titel { font-size:17px; }
.pm-kopf-unter { font-size:13px; }
.pm-summe { font-size:22px; }
.pm-summe span { font-size:11px; }
.pm-liste { gap:0; }
.pm-ma, .pm-ma.pm-kein { background:transparent; border:0; border-bottom:1px solid #EBDCCB; border-radius:0; padding:12px 2px; }
.pm-name { font-size:16px; }
.pm-pnr { font-size:12.5px; }
.pm-betrag, .pm-kein .pm-betrag { font-size:20px; color:#4F000B; }
.pm-betrag span { font-size:11px; }
.pm-fakten { border:0; padding:4px 0; margin:8px 0 6px; }
.pm-fakten span { font-size:11.5px; }
.pm-fakten strong { font-size:16px; }
.pm-hinweis { font-size:13px; }
/* Gesundheitsprämie als saubere Tabelle */
.pm-unter { margin:0 0 8px; font-size:13px; color:#7A3A44; }
table.pm-tab { width:100%; border-collapse:collapse; font-size:14px; }
table.pm-tab th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#7A3A44; padding:8px 10px; border-bottom:2px solid #4F000B; vertical-align:bottom; }
table.pm-tab td { padding:10px; border-bottom:1px solid #EBDCCB; vertical-align:top; }
table.pm-tab th.zahl, table.pm-tab td.zahl { text-align:right; white-space:nowrap; }
table.pm-tab tbody tr:nth-child(even):not(.summe) { background:#FFFBF6; }
table.pm-tab td.pm-betrag-zelle { font-weight:700; font-size:15px; }
table.pm-tab tr.summe td { border-top:2px solid #4F000B; border-bottom:0; background:transparent; padding-top:12px; }
table.pm-tab td.pm-hinweis-zelle { font-size:12.5px; color:#4F000B; line-height:1.5; min-width:220px; }
table.pm-tab .pm-chip { font-size:12px; }
.pm-person { display:flex; align-items:center; gap:10px; }
/* Deine Einschätzung (Verwaltung): saubere Zeilen, runde Zahlen, Stufen als Pillen */
.card .ges-vb-bew { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:12px 0; border-bottom:1px solid #FBEFE3; margin:0; }
.card .ges-vb-kopf { display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; }
.card .ges-vb-kopf .vb-name { flex:1 1 170px; font-size:14.5px; font-weight:600; }
.card .ges-vb-bew .gb-kommentar { width:100%; max-width:none; margin:0; padding:9px 12px; font-size:14px; border:1px solid #e0dbd2; border-radius:8px; box-sizing:border-box; background:#FFFBF6; }
.card .ges-vb-bew .vb-zahl { margin:0; padding:0; width:40px; height:40px; min-width:40px; border-radius:50%; border:1.5px solid #A8737C; background:#fff; color:#4F000B; font:600 14px Inter, Arial, sans-serif; }
.card .ges-vb-bew .vb-zahl.aktiv { background:#4F000B; border-color:#4F000B; color:#fff; }
.card .ges-vb-bew .vb-zahl.selbst { box-shadow:0 0 0 2px #fff, 0 0 0 4px #FF7F51; }
.card .ges-vb-fach { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:12px 0; border-bottom:1px solid #FBEFE3; }
.ges-stufen { display:flex; gap:6px; flex-wrap:wrap; }
.card .ges-stufe-pille { margin:0; padding:7px 14px; border-radius:18px; border:1.5px solid #A8737C; background:#fff; color:#4F000B; font:600 13px Inter, Arial, sans-serif; cursor:pointer; }
.card .ges-stufe-pille.aktiv { background:#4F000B; border-color:#4F000B; color:#fff; }
.card .ges-stufe-pille.selbst { box-shadow:0 0 0 2px #fff, 0 0 0 4px #FF7F51; }
.ges-zeile { grid-template-columns:100px 150px 1fr auto; }
.ges-z-knoepfe { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.ges-z-knoepfe button { margin:0; }
.ges-verschieben-form { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; background:#FFFBF6; border:1px solid #EBDCCB; border-radius:10px; padding:10px 14px; margin:4px 0 8px; }
.ges-verschieben-form label { display:flex; flex-direction:column; gap:3px; font-size:12.5px; font-weight:600; margin:0; }
.ges-verschieben-form input { padding:8px 10px; font-size:15px; }
.gv-knoepfe { display:flex; gap:8px; }
@media (max-width:560px) { .ges-zeile { grid-template-columns:auto 1fr; } .ges-z-knoepfe { grid-column:1 / 3; grid-row:3; justify-content:flex-start; } .ges-zeile button { grid-column:auto; grid-row:auto; } }
/* Deine Einschätzung am Computer: Name, Zahlen und Kommentar in einer Zeile (Kommentar nach den Zahlen) */
@media (min-width: 701px) {
.card .ges-vb-bew { display:grid; grid-template-columns:minmax(150px, 210px) auto 1fr; align-items:center; column-gap:16px; row-gap:0; }
.card .ges-vb-bew .ges-vb-kopf { display:contents; }
.card .ges-vb-bew .ges-vb-kopf .vb-name { flex:none; }
.card .ges-vb-bew .gb-kommentar { width:100%; }
}
.vb-weiterbildung { background:#FFFBF6; border:1px solid #EBDCCB; border-left:4px solid #FF7F51; border-radius:8px; padding:10px 14px; margin:0 0 10px; font-size:13.5px; display:grid; gap:3px; }
.vb-weiterbildung .vb-hilfe { margin:4px 0 0; }
.ges-chip { display:inline-block; padding:2px 10px; border-radius:12px; font-size:12px; font-weight:600; border:1px solid #c9c2b6; background:#fff; color:#4F000B; }
.ges-chip-du { background:#FFE8DD; border-color:#FF7F51; color:#7A3A00; }
.ges-chip-ma { background:#e9eef6; border-color:#a9b9d3; color:#3b5a8a; }
.ges-chip-ok { background:#E1F1EA; border-color:#a9cfb2; color:#1E6B4D; }
.ges-z-schritt { font-size:12.5px; line-height:1.4; color:#7A3A44; margin-top:2px; }
.ges-z-schritt-du { color:#7A3A00; font-weight:600; }
/* Selbsteinschätzung der Mitarbeiterin (Ansicht in der Verwaltung) */
.ges-sz-liste { display:grid; grid-template-columns:1fr; gap:0 28px; margin:0 0 6px; }
@media (min-width: 900px) { .ges-sz-liste { grid-template-columns:1fr 1fr; } }
.ges-sz-zeile { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid #FBEFE3; }
.ges-sz-name { font-size:14px; color:#3D0A14; flex:1 1 auto; min-width:0; }
.ges-sz-zahlen { display:inline-flex; gap:5px; flex:0 0 auto; }
.ges-sz-punkt { width:26px; height:26px; border-radius:50%; border:1.5px solid #E4D2BF; color:#b5ada2; font-size:12px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
.ges-sz-punkt.aktiv { background:#4F000B; border-color:#4F000B; color:#fff; }
.ges-sz-pille { flex:0 0 auto; padding:3px 12px; border-radius:14px; font-size:12.5px; font-weight:600; background:#F7E9DC; color:#4F000B; border:1px solid #e0dbd2; }
.ges-sz-stufe-1 { background:#f6e8e8; border-color:#e6c9c9; color:#8a3a3a; } .ges-sz-stufe-2 { background:#f8efd9; border-color:#e8d5a8; color:#7A3A00; }
.ges-sz-stufe-3 { background:#f1eedb; border-color:#dcd8b0; color:#666020; } .ges-sz-stufe-4 { background:#E1F1EA; border-color:#a9cfb2; color:#1E6B4D; }
.ges-sz-stufe-5 { background:#d6ebdc; border-color:#8fc29d; color:#1f5a2e; }
.ges-sz-text { background:#FFFBF6; border:1px solid #EBDCCB; border-left:4px solid #FF7F51; border-radius:8px; padding:10px 14px; margin:8px 0; font-size:14.5px; line-height:1.5; }
.ges-sz-text-titel { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:#7A3A44; margin-bottom:3px; font-weight:700; }
/* Knöpfe in den Gesprächen der Mitarbeiter-App: Hauptknopf dunkel, zweiter Knopf mit Rand */
.gesp-aktionen button, .vb-aktionen button { padding:12px 24px; border-radius:8px; border:1.5px solid #4F000B; background:#4F000B; color:#fff; font:600 15px Inter, Arial, sans-serif; cursor:pointer; letter-spacing:.01em; transition:background .15s, color .15s; }
.gesp-aktionen button:hover, .vb-aktionen button:hover { background:#3D0A14; border-color:#3D0A14; }
.gesp-aktionen button.zweit, .vb-aktionen button.zweit { background:#fff; color:#4F000B; }
.gesp-aktionen button.zweit:hover, .vb-aktionen button.zweit:hover { background:#F7E9DC; }
.gesp-aktionen button:disabled, .vb-aktionen button:disabled { opacity:.55; cursor:default; }
.gesp-aktionen button:focus-visible, .vb-aktionen button:focus-visible { outline:3px solid rgba(201,169,110,.55); outline-offset:2px; }
.gesp-status.gesp-kurz-du { background:#FFE8DD; color:#7A3A00; border:1px solid #FF7F51; }
.gesp-status.gesp-kurz-warten { background:#e9eef6; color:#3b5a8a; border:1px solid #a9b9d3; }
.gesp-status.gesp-kurz-ok { background:#E1F1EA; color:#1E6B4D; border:1px solid #a9cfb2; }
.gesp-status.gesp-kurz-neutral { background:#F7E9DC; color:#4F000B; border:1px solid #E4D2BF; }
/* Deine Einschätzung: kompakt wie die Ansicht der Selbsteinschätzung (Name, runde Zahlen, Kommentar auf Wunsch) */
.card .ges-vb-bew { display:block; padding:6px 0; border-bottom:1px solid #FBEFE3; }
.card .ges-vb-kopf { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; justify-content:flex-start; }
.card .ges-vb-kopf .vb-name { flex:1 1 auto; min-width:0; font-size:14px; font-weight:400; color:#3D0A14; }
.card .ges-vb-bew .vb-zahl { width:30px; height:30px; min-width:30px; font-size:12.5px; }
.card .ges-vb-bew .vb-zahlen { gap:5px; }
.card .ges-komm-btn { margin:0; padding:3px 10px; font:600 11.5px Inter, Arial, sans-serif; border-radius:12px; border:1px solid #E4D2BF; background:#fff; color:#7A3A44; cursor:pointer; flex:0 0 auto; }
.card .ges-komm-btn.hat { background:#FFE8DD; border-color:#FF7F51; color:#7A3A00; }
.card .ges-vb-bew .gb-kommentar { display:none; margin-top:6px; }
.card .ges-vb-bew.ges-komm-offen .gb-kommentar { display:block; }
@media (min-width: 900px) { .ges-vb-liste { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; } }
@media (max-width: 560px) { .card .ges-vb-kopf { flex-wrap:wrap; } .card .ges-vb-kopf .vb-name { flex:1 1 100%; } }
.card .ges-vb-fach { flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; padding:7px 0; }
.card .ges-vb-fach .vb-name { flex:1 1 200px; font-size:14px; font-weight:400; }
.card .ges-vb-fach .ges-stufen { justify-content:flex-end; }
.card .ges-stufe-pille { padding:4px 11px; font-size:12px; }
@media (min-width: 701px) {
.card .ges-vb-bew { display:block; }
.card .ges-vb-bew .ges-vb-kopf { display:flex; }
.card .ges-vb-bew .ges-vb-kopf .vb-name { flex:1 1 auto; }
}
/* Eine Spalte, damit nichts über den Rand läuft */
.ges-vb-liste { display:block !important; }
/* Leitfaden für das Mitarbeitergespräch */
.lf-kopf { margin:0 0 10px; font-size:13.5px; color:#4F000B; }
details.lf-kap { border:1px solid #EBDCCB; border-radius:10px; background:#fff; margin:0 0 8px; }
details.lf-kap > summary { cursor:pointer; list-style:none; padding:11px 14px; font-weight:700; font-size:15px; display:flex; align-items:center; gap:10px; }
details.lf-kap > summary::-webkit-details-marker { display:none; }
details.lf-kap > summary::after { content:"+"; margin-left:auto; color:#7A3A44; font-weight:400; }
details.lf-kap[open] > summary::after { content:"–"; }
.lf-nr { width:26px; height:26px; border-radius:50%; background:#4F000B; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; flex:0 0 auto; }
.lf-kap-inhalt { padding:2px 16px 14px; line-height:1.5; font-size:14px; }
.lf-unter { margin:16px 0 4px; font-size:14px; color:#4F000B; border-bottom:1px solid #FFF8EF; padding-bottom:3px; }
.lf-fragen { margin:4px 0 8px 18px; padding:0; }
.lf-fragen li { margin:2px 0; }
.lf-tipp { margin:6px 0; font-size:13px; color:#7A3A44; }
.lf-zitat { margin:8px 0; padding:8px 12px; border-left:3px solid #FF7F51; background:#FFFBF6; font-style:italic; font-size:13.5px; }
.lf-info { background:#FFF8EF; border:1px solid #e8dcc4; border-left:4px solid #FF7F51; border-radius:8px; padding:10px 14px; margin:8px 0 10px; font-size:13.5px; }
.lf-info-titel { font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:#8a6d34; font-weight:700; margin-bottom:5px; }
.lf-info .ges-sz-text { background:#fff; margin:6px 0; }
.lf-zahl { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; padding:2px 0; }
.lf-check { display:grid; gap:4px; margin:6px 0 10px; }
.lf-check label { display:flex; align-items:center; gap:8px; font-weight:400; cursor:pointer; }
.lf-check input { width:18px; height:18px; margin:0; }
.lf-info .ges-sz-text-titel { display:none; }
/* Deine Einschätzung: genau wie die Ansicht der Selbsteinschätzung, nur zum Anklicken */
.ges-sz-block { border-bottom:1px solid #FBEFE3; }
.ges-sz-block .ges-sz-zeile { border-bottom:0; }
.card .ges-sz-punkt { margin:0; padding:0; background:#fff; cursor:pointer; font-family:Inter, Arial, sans-serif; }
.card .ges-sz-punkt:hover { border-color:#4F000B; color:#4F000B; }
.card .ges-sz-punkt.aktiv { background:#4F000B; border-color:#4F000B; color:#fff; }
.card .ges-sz-punkt.selbst { box-shadow:0 0 0 2px #fff, 0 0 0 4px #FF7F51; }
.ges-sz-block .gb-kommentar { display:none; margin:0 0 8px; width:100%; box-sizing:border-box; padding:9px 12px; font-size:14px; border:1px solid #e0dbd2; border-radius:8px; background:#FFFBF6; }
.ges-sz-block.ges-komm-offen .gb-kommentar { display:block; }
.ges-sz-block .ges-sz-zeile { gap:10px; }
.ges-sz-block .ges-komm-btn { order:3; }
.ges-sz-liste-eins { grid-template-columns:1fr !important; }
.card .ges-sz-fach { flex-wrap:wrap; }
.card .ges-sz-fach .ges-sz-name { flex:1 1 220px; }
.card .ges-sz-fach .ges-stufen { justify-content:flex-end; }
@media (max-width: 560px) { .ges-sz-block .ges-sz-zeile { flex-wrap:wrap; } .ges-sz-block .ges-sz-name { flex:1 1 100%; } }
/* Zahlen-Knöpfe in "Deine Einschätzung" eindeutig gestalten (der allgemeine Knopf-Stil der Karten überschreibt sonst Rand und Farbe) */
.card .ges-sz-punkt { width:28px; height:28px; min-width:28px; border:1.5px solid #cfc8bc; border-radius:50%; background:#fff; color:#7A3A44; font:600 12.5px Inter, Arial, sans-serif; display:inline-flex; align-items:center; justify-content:center; }
.card .ges-sz-punkt.aktiv { background:#4F000B; border-color:#4F000B; color:#fff; }
.card .ges-sz-block .ges-sz-name { flex:1 1 180px; min-width:120px; overflow:visible; white-space:normal; }
.card .ges-sz-block .ges-sz-zeile { flex-wrap:wrap; }
/* Der alte eingebettete Stil .ges-bew (Raster) darf die neue Zeile nicht mehr beeinflussen */
.card .ges-bew.ges-sz-block { display:block; margin:0; font-size:inherit; }
.card .ges-bew.ges-sz-block .ges-sz-zeile { width:100%; }
.card .ges-bew.ges-sz-block input.gb-kommentar { width:100%; padding:9px 12px; font-size:14px; }
.ges-ziel-knoepfe { display:flex; gap:8px; flex-wrap:wrap; }
/* Deine Einschätzung: zwei Spalten, farbige Stufen und runde Kommentar-Knöpfe wie in der Selbsteinschätzung */
.card .ges-sz-block .ges-komm-btn { width:26px; height:26px; min-width:26px; padding:0; border-radius:50%; font-size:14px; line-height:1; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.card .ges-sz-block .ges-sz-zeile { flex-wrap:nowrap; }
.card .ges-sz-block .ges-sz-name { flex:1 1 auto; min-width:0; }
.card select.ges-sz-select { margin:0; width:auto; min-width:170px; max-width:100%; flex:0 0 auto; padding:3px 26px 3px 12px; border-radius:14px; font:600 12.5px Inter, Arial, sans-serif; border:1px solid #e0dbd2; background-color:#F7E9DC; color:#4F000B; cursor:pointer; }
.card select.ges-sz-stufe-0 { color:#7A3A44; font-weight:400; background-color:#fff; border-style:dashed; }
.card select.ges-sz-stufe-1 { background-color:#f6e8e8; border-color:#e6c9c9; color:#8a3a3a; }
.card select.ges-sz-stufe-2 { background-color:#f8efd9; border-color:#e8d5a8; color:#7A3A00; }
.card select.ges-sz-stufe-3 { background-color:#f1eedb; border-color:#dcd8b0; color:#666020; }
.card select.ges-sz-stufe-4 { background-color:#E1F1EA; border-color:#a9cfb2; color:#1E6B4D; }
.card select.ges-sz-stufe-5 { background-color:#d6ebdc; border-color:#8fc29d; color:#1f5a2e; }
.card .ges-sz-fach .ges-sz-name small { display:block; font-size:11px; color:#7A3A44; }
@media (max-width: 560px) { .card .ges-sz-block .ges-sz-zeile { flex-wrap:wrap; } .card select.ges-sz-select { min-width:150px; } }
/* In "Deine Einschätzung" zwei Spalten erst bei breitem Fenster, sonst eine Spalte (nichts läuft über den Rand) */
.ges-sz-liste.ges-sz-liste-ein { grid-template-columns:1fr !important; }
@media (min-width: 1280px) { .ges-sz-liste.ges-sz-liste-ein { grid-template-columns:1fr 1fr !important; } }
/* Meine Gespräche und Ziele (Mitarbeiter-App): freundlicher und übersichtlicher */
#gespraeche-tabs .gesp-tab { padding:10px 20px; border-radius:22px; font-weight:600; }
.gesp-hinweis { background:#FFFBF6; border:1px solid #FFF8EF; border-radius:10px; padding:10px 14px; }
.gesp-ziele-karte { background:#fff; border:1px solid var(--creme-dunkler, #EBDCCB); border-left:4px solid #FF7F51; border-radius:12px; padding:14px 16px; margin:0 0 14px; box-shadow:0 2px 10px rgba(79,0,11,.05); }
.gesp-ziele-titel { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.gesp-ziele-titel h3 { margin:0; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#7A3A44; }
.gesp-ziele-titel span { font-size:12.5px; color:#7A3A44; }
.gesp-ziel-zeile { padding:9px 0; border-bottom:1px solid #FBEFE3; }
.gesp-ziel-zeile:last-of-type { border-bottom:0; }
.gesp-ziel-kopf { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; font-size:14.5px; }
.gesp-ziel-meta { font-size:12.5px; color:#7A3A44; margin:2px 0 6px; }
.gesp-ziel-pille { flex:none; font-size:11.5px; font-weight:700; padding:2px 10px; border-radius:12px; background:#F7E9DC; color:#4F000B; }
.gesp-ziel-in_arbeit { background:#f8efd9; color:#7A3A00; } .gesp-ziel-teilweise { background:#e9eef6; color:#3b5a8a; }
.gesp-ziele-alle { margin-top:10px; width:100%; padding:11px; border-radius:8px; border:1.5px solid #4F000B; background:#fff; color:#4F000B; font:600 14px Inter, Arial, sans-serif; cursor:pointer; }
.gesp-ziele-alle:hover { background:#F7E9DC; }
.gesp-zeile { border-radius:12px; padding:14px 16px; box-shadow:0 1px 4px rgba(79,0,11,.06); margin-bottom:8px; }
.gesp-zeile:hover { box-shadow:0 2px 8px rgba(79,0,11,.12); }
details.gesp-jahr > summary { font-size:15px; padding:6px 0; }
/* Gegenüberstellung: einzeln auf- und zuklappbar, farbige Unterschiede */
details.gg-block { border:1px solid #EBDCCB; border-radius:10px; background:#fff; margin:0 0 10px; }
details.gg-block > summary { cursor:pointer; list-style:none; padding:10px 14px; display:flex; justify-content:space-between; align-items:center; gap:12px; font-weight:700; font-size:14px; }
details.gg-block > summary::-webkit-details-marker { display:none; }
details.gg-block > summary::before { content:"▸"; margin-right:8px; color:#7A3A44; font-weight:400; }
details.gg-block[open] > summary::before { content:"▾"; }
details.gg-block > summary .gg-titel { flex:1 1 auto; }
.gg-anz { font-weight:400; font-size:12px; color:#7A3A44; }
.gg-inhalt { padding:0 14px 12px; }
table.gg-tab { width:100%; border-collapse:collapse; font-size:14px; }
table.gg-tab th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:#7A3A44; padding:6px 8px; border-bottom:2px solid #4F000B; background:#FFFBF6; }
table.gg-tab td { padding:7px 8px; border-bottom:1px solid #FBEFE3; vertical-align:middle; }
table.gg-tab tbody tr:nth-child(even) { background:#fcfbf8; }
table.gg-tab td.gg-name { font-weight:600; color:#3D0A14; }
table.gg-tab td.gg-diff, table.gg-tab th:last-child { text-align:center; }
.gg-zahl { display:inline-flex; width:24px; height:24px; border-radius:50%; background:#4F000B; color:#fff; font-size:12px; font-weight:700; align-items:center; justify-content:center; }
.gg-chip { display:inline-block; padding:2px 11px; border-radius:12px; font-size:12px; font-weight:700; }
.gg-gleich { background:#E1F1EA; color:#1E6B4D; } .gg-klein { background:#FFE8DD; color:#7A3A00; } .gg-gross { background:#f6dcdc; color:#B3261E; }
@media (max-width: 560px) { table.gg-tab { font-size:13px; } table.gg-tab td, table.gg-tab th { padding:6px 4px; } .gg-zahl { width:20px; height:20px; font-size:11px; } }
.lf-stop { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#4F000B; color:#fff; border-radius:10px; padding:10px 14px; margin:6px 0 10px; }
.lf-stop-text { font-weight:600; flex:1 1 auto; }
.lf-stop button { margin:0; padding:9px 16px; border-radius:8px; border:1.5px solid #fff; background:#fff; color:#4F000B; font:600 13.5px Inter, Arial, sans-serif; cursor:pointer; }
.lf-stop button.zweit { background:transparent; color:#fff; }
/* Rückblick auf das letzte Gespräch: blau, damit er sich von den goldenen Angaben der Vorbereitung unterscheidet */
.lf-info.lf-rueck { background:#eef3fa; border-color:#c3d1e6; border-left-color:#4a6fa5; }
.lf-info.lf-rueck .lf-info-titel { color:#3b5a8a; }
.lf-info.lf-rueck .antrag-meta { color:#5b7aa6; }
/* Eigene Anliegen der Verwaltung */
.ges-v-label { display:block; font-size:13px; font-weight:600; color:#7A3A44; margin:10px 0 0; }
.ges-v-label textarea { display:block; width:100%; margin-top:4px; font-weight:400; }
.lf-info.lf-eigen { background:#f1f6ef; border-color:#c5d8bf; border-left-color:#1E6B4D; }
/* Leitfaden auf zweitem Gerät */
.lf-teilen { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; }
.lf-teilen .antrag-meta { flex:1 1 100%; }
.lf-vollbild { position:fixed; inset:0; z-index:9999; background:#fff; display:flex; flex-direction:column; }
.lf-vb-kopf { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid #EBDCCB; background:#FFFBF6; }
.lf-vb-inhalt { flex:1; overflow:auto; padding:12px 16px 40px; -webkit-overflow-scrolling:touch; }
/* Meine Anliegen: Felder wie die übrigen Eingabefelder */
.card .ges-v-label { margin:14px 0 0; font-size:13px; font-weight:600; color:#4F000B; }
.card .ges-v-label textarea.ges-v-text { width:100%; max-width:100%; box-sizing:border-box; margin-top:5px; padding:10px 12px; min-height:84px; resize:vertical; font:400 15px/1.5 Inter, Arial, sans-serif; color:#3D0A14; border:1px solid #E4D2BF; border-radius:8px; background:#fff; }
.card .ges-v-label textarea.ges-v-text:focus { outline:0; border-color:#4F000B; box-shadow:0 0 0 2px rgba(79,0,11,.12); }
/* Gegenüberstellung am Handy: je Eigenschaft eine kleine Karte (Name oben, darunter drei Werte nebeneinander) */
@media (max-width: 560px) {
table.gg-tab, table.gg-tab tbody { display:block; width:100%; }
table.gg-tab thead { display:none; }
table.gg-tab tbody tr { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px 8px; padding:9px 4px; border-bottom:1px solid #FFF8EF; background:transparent !important; }
table.gg-tab td { display:block; padding:0; border:0; white-space:normal; text-align:left; }
table.gg-tab td.gg-name { grid-column:1 / -1; font-size:14px; padding-bottom:4px; }
table.gg-tab td[data-l]::before { content:attr(data-l); display:block; font-size:10px; color:#7A3A44; margin-bottom:3px; }
table.gg-tab td.gg-diff { text-align:left; }
.gg-von { display:none; }
table.gg-tab .ges-sz-pille { display:inline-block; font-size:11.5px; line-height:1.3; white-space:normal; }
details.gg-block > summary { flex-wrap:wrap; }
details.gg-block > summary .gg-anz { flex:1 1 100%; padding-left:20px; }
}
/* Meine Gespräche und Ziele: klare Reihenfolge */
.gesp-jetzt { border-radius:14px; padding:18px 20px; margin:0 0 20px; background:#fff; border:1px solid #EBDCCB; border-left:6px solid #FF7F51; box-shadow:0 2px 12px rgba(79,0,11,.08); }
.gesp-jetzt-ok { border-left-color:#1E6B4D; } .gesp-jetzt-neutral { border-left-color:#b9b2a7; }
.gesp-jetzt-kopf { font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#7A3A44; }
.gesp-jetzt h3 { margin:4px 0 6px; font-size:19px; color:#3D0A14; }
.gesp-jetzt p { margin:0 0 12px; color:#7A3A44; font-size:14.5px; line-height:1.5; }
.gesp-jetzt .gesp-zeile-los { background:#4F000B; color:#fff; border:0; border-radius:8px; padding:12px 20px; font:600 15px Inter, Arial, sans-serif; cursor:pointer; }
.gesp-jetzt .gesp-zeile-los:hover { background:#3D0A14; }
h3.gesp-abschnitt { margin:22px 0 8px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#7A3A44; }
/* Leitfaden: Umsatzverlauf (Dienstleistung und Verkauf) */
.lf-verlauf { background:#FFFBF6; border:1px solid #EBDCCB; border-radius:10px; padding:12px 14px; margin:10px 0; }
.lf-verlauf-titel { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#7A3A44; margin-bottom:8px; }
.lf-saeulen { display:flex; align-items:flex-end; gap:4px; height:150px; }
.lf-saeule { flex:1 1 0; min-width:0; display:flex; flex-direction:column; height:100%; text-align:center; }
.lf-saeule-wert { height:16px; font-size:9.5px; color:#7A3A44; line-height:16px; white-space:nowrap; overflow:hidden; }
.lf-saeule-spur { position:relative; flex:1; display:flex; align-items:flex-end; }
.lf-saeule-balken { width:100%; border-radius:4px 4px 0 0; }
.lf-saeule.laufend .lf-saeule-balken { opacity:.55; }
.lf-saeule-ziel { position:absolute; left:-2px; right:-2px; border-top:2px dashed #4F000B; opacity:.7; }
.lf-saeule-monat { height:16px; font-size:10px; color:#7A3A44; line-height:16px; }
.lf-sb-ok { background:#1E6B4D; } .lf-sb-mitte { background:#FF7F51; } .lf-sb-tief { background:#c06a5f; } .lf-sb-neutral { background:#A8737C; }
.lf-legende { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px; font-size:11px; color:#7A3A44; }
.lf-legende i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.lf-legende i.lf-ziel-strich { height:0; border-top:2px dashed #4F000B; border-radius:0; width:14px; vertical-align:3px; }
.lf-auswertung { background:#f1f6ef; border-color:#c5d8bf; border-left-color:#1E6B4D; }
@media (max-width: 560px) { .lf-saeulen { gap:2px; } .lf-saeule-wert { font-size:8px; } }
/* Gespräch anfragen: Knopf ganz oben, klappt das Formular darunter auf */
details.gesp-wunsch { padding:0 !important; border:0 !important; background:transparent !important; margin:0 0 16px !important; }
details.gesp-wunsch > summary { list-style:none; cursor:pointer; display:block; text-align:center; background:#4F000B; color:#fff; border-radius:10px; padding:14px 18px; font:600 15px Inter, Arial, sans-serif; }
details.gesp-wunsch > summary::-webkit-details-marker { display:none; }
details.gesp-wunsch > summary:hover { background:#3D0A14; }
details.gesp-wunsch[open] > summary { border-radius:10px 10px 0 0; }
details.gesp-wunsch > div, details.gesp-wunsch > .gesp-wunsch-alt { background:#fff; border:1px solid #ddd6cc; border-top:0; padding:14px; }
details.gesp-wunsch > div:last-child { border-radius:0 0 10px 10px; }
/* Gespräch anfragen: Formular */
.gw-form { display:flex; flex-direction:column; gap:16px; }
.gw-einleitung { margin:0; color:#7A3A44; font-size:14px; line-height:1.5; }
.gw-feld > label { display:block; margin:0 0 6px; font-size:13px; font-weight:700; color:#4F000B; }
.gw-hinweis { font-weight:400; color:#7A3A44; font-size:12px; margin-left:6px; }
.gw-feld textarea, .gw-feld select, .gw-feld input[type=datetime-local] { width:100%; max-width:100%; box-sizing:border-box; padding:11px 13px; font:400 15px Inter, Arial, sans-serif; color:#3D0A14; border:1px solid #E4D2BF; border-radius:8px; background:#fff; }
.gw-feld textarea { min-height:90px; resize:vertical; line-height:1.5; }
.gw-feld textarea:focus, .gw-feld select:focus, .gw-feld input:focus { outline:0; border-color:#4F000B; box-shadow:0 0 0 2px rgba(79,0,11,.12); }
.gw-termine { display:flex; flex-direction:column; gap:8px; }
.gw-termin { display:flex; align-items:center; gap:10px; }
.gw-termin > span { flex:none; width:26px; height:26px; border-radius:50%; background:#F7E9DC; color:#4F000B; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.gw-termin input { flex:1; min-width:0; }
.gw-senden { align-self:flex-start; background:#4F000B; color:#fff; border:0; border-radius:8px; padding:12px 24px; font:600 15px Inter, Arial, sans-serif; cursor:pointer; }
.gw-senden:hover { background:#3D0A14; } .gw-senden:disabled { opacity:.5; cursor:default; }
@media (max-width: 560px) { .gw-senden { align-self:stretch; } }
/* Ziele: einzeln aufklappbar */
details.gesp-ziel-auf { padding:0 !important; }
details.gesp-ziel-auf > summary { list-style:none; cursor:pointer; padding:14px 16px; display:flex; align-items:center; gap:12px; }
details.gesp-ziel-auf > summary::-webkit-details-marker { display:none; }
details.gesp-ziel-auf > summary::after { content:"+"; flex:none; font-size:22px; line-height:1; color:#7A3A44; }
details.gesp-ziel-auf[open] > summary::after { content:"–"; }
.gesp-ziel-sum { flex:1; min-width:0; display:block; }
.gesp-ziel-sum-kopf { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; font-size:15px; }
.gesp-ziel-sum .gesp-ziel-meta { display:block; font-size:12.5px; color:#7A3A44; margin:3px 0 7px; }
.gesp-ziel-sum .gesp-balken { display:block; height:6px; }
.gesp-ziel-inhalt { padding:0 16px 16px; border-top:1px solid #FBEFE3; }
.gesp-ziel-inhalt > .gesp-meta { margin:12px 0 8px; }
.gesp-ziel-sum .gesp-balken { margin-top:0; background:#FFF8EF; border-radius:3px; overflow:hidden; }
.gesp-ziel-sum .gesp-balken > span { background:#4F000B; border-radius:3px; }
/* Tagesabschluss-Upload */
.tz-abschluss { background:#FFFBF6; border:1px solid #EBDCCB; border-radius:10px; padding:14px 16px; margin:0 0 18px; }
.tz-abschluss h4 { margin:0 0 4px; }
.tz-abschluss input[type=file] { width:100%; max-width:100%; box-sizing:border-box; margin-top:6px; }
table.tz-ab-tab { width:100%; border-collapse:collapse; font-size:14px; margin:8px 0; }
table.tz-ab-tab th { text-align:left; font-size:11.5px; color:#7A3A44; padding:6px 8px; border-bottom:2px solid #4F000B; }
table.tz-ab-tab td { padding:8px; border-bottom:1px solid #FFF8EF; vertical-align:top; }
table.tz-ab-tab tr.tz-ab-aus td { color:#A8737C; }
.tz-ab-knoepfe { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
@media (max-width: 560px) { table.tz-ab-tab th:nth-child(4), table.tz-ab-tab td:nth-child(4) { display:none; } }
/* Tageszahlen: Pfeile für einen Tag zurück und vor */
.tz-tagleiste { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tz-tagleiste .tz-pfeil { width:42px; height:42px; padding:0; border-radius:50%; font-size:26px; line-height:1; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:#4F000B; border:1px solid #E4D2BF; cursor:pointer; }
.tz-tagleiste .tz-pfeil:hover { background:#F7E9DC; }
.tz-tagleiste .tz-wochentag { flex:1 1 100%; }
@media (min-width: 700px) { .tz-tagleiste .tz-wochentag { flex:0 1 auto; margin-left:6px; } }
/* Mein Dashboard: Monate ansehen */
details.dash-verlauf { margin-top:14px; border-top:1px solid #FFF8EF; padding-top:10px; }
details.dash-verlauf > summary { cursor:pointer; list-style:none; font-size:13px; font-weight:700; color:#4F000B; display:flex; justify-content:space-between; align-items:center; }
details.dash-verlauf > summary::-webkit-details-marker { display:none; }
details.dash-verlauf > summary::after { content:"+"; font-size:20px; color:#7A3A44; }
details.dash-verlauf[open] > summary::after { content:"–"; }
details.dash-verlauf .lf-verlauf { margin:12px 0 6px; }
table.dash-monate { width:100%; border-collapse:collapse; font-size:13px; margin-top:12px; }
table.dash-monate th { text-align:left; font-size:11px; color:#7A3A44; padding:5px 6px; border-bottom:2px solid #4F000B; }
table.dash-monate td { padding:7px 6px; border-bottom:1px solid #FFF8EF; }
table.dash-monate tr.laufend td { color:#7A3A44; }
/* Auswertung der Umsätze (Verwaltung) */
.td-ausw { background:#fff; border:1px solid #EBDCCB; border-radius:12px; padding:16px; margin:0 0 18px; }
.td-ausw-kpi { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin:0 0 10px; }
.td-ausw-kpi > div { background:#FFFBF6; border:1px solid #EBDCCB; border-radius:10px; padding:12px 14px; }
.td-ausw-kpi span { display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#7A3A44; }
.td-ausw-kpi strong { font-size:24px; color:#4F000B; }
.td-ausw-scroll { overflow-x:auto; }
table.td-ausw-tab td, table.td-ausw-tab th { white-space:nowrap; text-align:right; }
table.td-ausw-tab td:first-child, table.td-ausw-tab th:first-child { text-align:left; position:sticky; left:0; background:#fff; }
table.td-ausw-tab tr.td-ausw-team td { background:#FFFBF6; border-top:2px solid #4F000B; }
/* Tageszahlen: Tag-Leiste mittig, Pfeile auf Höhe des Datumsfelds */
.tz-tagleiste { justify-content:flex-start; align-items:center; }
.tz-tagleiste > * { margin-top:0 !important; margin-bottom:0 !important; align-self:center; }
.tz-tagleiste .tz-pfeil { margin:0 !important; }
/* Säulendiagramme: schmale Säulen, links beginnend, niedriger im Dashboard */
.lf-saeulen { justify-content:flex-start; }
.lf-saeule { max-width:70px; }
details.dash-verlauf .lf-saeule { max-width:36px; }
details.dash-verlauf .lf-saeulen { height:96px; }
details.dash-verlauf .lf-verlauf { padding:10px 12px; }
.dash-auswertung { background:#f1f6ef; border:1px solid #c5d8bf; border-left:4px solid #1E6B4D; border-radius:8px; padding:8px 12px; margin:8px 0; font-size:13px; color:#4F000B; }
.dash-auswertung ul { margin:4px 0 0; padding-left:18px; line-height:1.5; }
/* Knopf Auswertung: gleicher Stil wie die Reiter Überblick und Eintragen */
#td-auswertung-btn { width:auto; padding:9px 18px; cursor:pointer; background:#fff; color:#4F000B; border:1px solid #E4D2BF; border-radius:8px; font:inherit; font-weight:600; }
#td-auswertung-btn[aria-pressed="true"] { background:#4F000B; color:#fff; border-color:#4F000B; }
/* Umsätze auswerten: Bereiche zum Ein- und Ausklappen */
details.td-ausw-sek { border:1px solid #EBDCCB; border-radius:10px; margin:0 0 10px; background:#fff; }
details.td-ausw-sek > summary { cursor:pointer; list-style:none; padding:11px 14px; font-weight:700; font-size:14px; display:flex; justify-content:space-between; align-items:center; }
details.td-ausw-sek > summary::-webkit-details-marker { display:none; }
details.td-ausw-sek > summary::after { content:"+"; font-size:20px; color:#7A3A44; }
details.td-ausw-sek[open] > summary::after { content:"–"; }
details.td-ausw-sek > :not(summary) { margin-left:14px; margin-right:14px; }
details.td-ausw-sek > :last-child { margin-bottom:14px; }
/* Auswertungstexte zum Ein- und Ausklappen */
details.td-ausw-text > summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; margin:0; }
details.td-ausw-text > summary::-webkit-details-marker { display:none; }
details.td-ausw-text > summary::after { content:"+"; font-size:18px; line-height:1; color:#1E6B4D; }
details.td-ausw-text[open] > summary::after { content:"–"; }
details.td-ausw-text > ul { margin-top:8px; }
.td-ausw-h { margin:16px 0 6px; font-size:13px; font-weight:700; color:#4F000B; }
.td-ausw-pdfzeile { margin-top:14px; }
/* Auswertungstexte: unauffällig (grau, ohne Farbfläche) */
details.td-ausw-text.lf-auswertung { background:transparent; border:0; border-top:1px solid #EBDCCB; border-left:0; border-radius:0; padding:8px 2px; margin:6px 0 14px; }
details.td-ausw-text > summary.lf-info-titel { font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:#7A3A44; }
details.td-ausw-text > summary::after { color:#A8737C; }
details.td-ausw-text > ul { font-size:13px; color:#7A3A44; }
/* Gespräche: Karte "Jetzt dran / Als Nächstes" und Anfrage-Knopf etwas kleiner */
.gesp-jetzt { padding:12px 16px; margin:0 0 14px; border-left-width:5px; border-radius:12px; }
.gesp-jetzt-kopf { font-size:10.5px; }
.gesp-jetzt h3 { margin:2px 0 4px; font-size:16px; }
.gesp-jetzt p { margin:0 0 9px; font-size:13px; line-height:1.45; }
.gesp-jetzt .gesp-zeile-los { padding:8px 16px; font-size:13.5px; border-radius:7px; }
details.gesp-wunsch { margin:0 0 12px !important; }
details.gesp-wunsch > summary { padding:10px 16px; font-size:14px; border-radius:9px; }
/* Mitarbeiterakte: Protokoll kompakt und übersichtlich */
.akte-text { font-size:13px; line-height:1.5; color:#4F000B; }
.akte-text .kopf { background:#FFFBF6; border:1px solid #FFF8EF; border-radius:8px; padding:8px 12px; margin:0 0 10px; }
.akte-text .marke { display:none; }
.akte-text h1 { font-size:16px; margin:0 0 4px; font-weight:700; }
.akte-text table.fakten { width:auto; border-collapse:collapse; font-size:12.5px; }
.akte-text table.fakten td { padding:1px 14px 1px 0; border:0; }
.akte-text table.fakten td.l { color:#7A3A44; font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.akte-text .abschnitt { margin:0; }
details.akte-abschnitt { border-top:1px solid #FFF8EF; padding:0; }
details.akte-abschnitt > summary { cursor:pointer; list-style:none; padding:8px 2px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#7A3A44; display:flex; justify-content:space-between; align-items:center; }
details.akte-abschnitt > summary::-webkit-details-marker { display:none; }
details.akte-abschnitt > summary::after { content:"+"; font-size:17px; color:#A8737C; }
details.akte-abschnitt[open] > summary::after { content:"–"; }
details.akte-abschnitt > :not(summary) { margin:0 2px 10px; }
.akte-text .text p { margin:0 0 4px; } .akte-text .text ul { margin:2px 0 4px; padding-left:18px; }
.akte-text .klein { font-size:11.5px; color:#7A3A44; }
.akte-text table.raster { width:100%; border-collapse:collapse; font-size:12.5px; }
.akte-text table.raster th { text-align:left; font-size:11px; color:#7A3A44; padding:3px 6px; border-bottom:1px solid #E4D2BF; }
.akte-text table.raster td { padding:4px 6px; border-bottom:1px solid #FFF8EF; }
.akte-text .ziel { border:1px solid #EBDCCB; border-radius:6px; padding:6px 10px; margin:0 0 6px; }
.akte-text .zk { display:flex; justify-content:space-between; gap:10px; }
.akte-text .balken { height:5px; background:#FFF8EF; border-radius:3px; margin:4px 0 2px; overflow:hidden; } .akte-text .balken span { display:block; height:100%; background:#4F000B; }
.akte-text .unterschrift { display:flex; gap:24px; margin-top:12px; font-size:12px; } .akte-text .unterschrift > div { flex:1; } .akte-text .linie { display:block; border-top:1px solid #4F000B; margin-bottom:3px; }
/* Mitarbeiterakte: Jahr wählen */
.akte-jahrzeile { display:flex; align-items:center; gap:10px; margin:10px 0 4px; padding:10px 12px; background:#FFFBF6; border:1px solid #FFF8EF; border-radius:10px; }
.akte-jahrzeile label { margin:0; font-weight:700; font-size:13px; }
.akte-jahrzeile select { width:auto; min-width:110px; padding:7px 12px; font-size:15px; border:1px solid #E4D2BF; border-radius:8px; background:#fff; }
/* Mitarbeiterakte: Themenblöcke im Protokoll */
details.akte-block { border:1px solid #EBDCCB; border-radius:10px; margin:0 0 8px; background:#fff; }
details.akte-block > summary { cursor:pointer; list-style:none; padding:11px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:14px; font-weight:700; color:#3D0A14; }
details.akte-block > summary::-webkit-details-marker { display:none; }
details.akte-block > summary::before { content:"▸"; margin-right:8px; color:#7A3A44; font-weight:400; }
details.akte-block[open] > summary::before { content:"▾"; }
details.akte-block > summary > span:first-child { flex:1; }
.akte-block-anz { font-weight:400; font-size:12px; color:#7A3A44; }
.akte-block-inhalt { padding:0 16px 12px 16px; border-top:1px solid #FBEFE3; }
h5.akte-kap { margin:12px 0 3px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#7A3A44; }
.akte-block-inhalt .text { font-size:13.5px; line-height:1.55; }
/* Lektionen den Rollen zuordnen */
.lr-kopf, .lr-zeile, details.lr-tb > summary { display:grid; grid-template-columns:minmax(0,1fr) repeat(4, 74px); gap:4px; align-items:center; }
.lr-kopf { font-size:11px; font-weight:700; color:#7A3A44; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; text-align:center; }
.lr-kopf span:first-child { text-align:left; }
details.lr-tb { border:1px solid #EBDCCB; border-radius:10px; margin:6px 0; background:#fff; }
details.lr-tb > summary { cursor:pointer; list-style:none; padding:10px; font-weight:700; font-size:14px; }
details.lr-tb > summary::-webkit-details-marker { display:none; }
.lr-zeile { padding:7px 10px; border-top:1px solid #FBEFE3; font-size:13px; }
.lr-zeile.lr-platz { color:#A8737C; }
.lr-box { display:flex; justify-content:center; align-items:center; margin:0; }
.lr-box input { width:20px; height:20px; margin:0; accent-color:#4F000B; cursor:pointer; }
.lr-mini { display:none; }
@media (max-width: 640px) {
.lr-kopf { display:none; }
.lr-zeile { grid-template-columns:repeat(4, 1fr); }
.lr-zeile .lr-name { grid-column:1 / -1; }
details.lr-tb > summary { grid-template-columns:repeat(4, 1fr); }
details.lr-tb > summary .lr-name { grid-column:1 / -1; }
.lr-box { flex-direction:column; gap:2px; }
.lr-mini { display:block; font-size:10px; color:#7A3A44; }
}
/* Lektionen, die für die eigene Rolle nicht freigegeben sind: grau, nicht anklickbar */
.lektion-item.gesperrt { opacity:.55; background:#ece8e1 !important; cursor:not-allowed !important; filter:grayscale(1); }
.lektion-item.gesperrt .haekchen { visibility:hidden; }
/* Themenbereiche ohne Inhalte: ganz grau, nicht anklickbar */
.themen-karte.leer { opacity:.5; filter:grayscale(1); background:#ece8e1 !important; box-shadow:none !important; cursor:default !important; pointer-events:none; }
.themen-karte.leer .themen-banner { opacity:.8; }
/* Aufgabenplan in der Verwaltung: Bereiche zum Ein- und Ausklappen */
details.ta-bereich { border:1px solid #EBDCCB; border-radius:10px; margin:10px 0; background:#fff; }
details.ta-bereich > summary { cursor:pointer; list-style:none; padding:11px 14px; font-weight:700; font-size:14px; display:flex; justify-content:space-between; align-items:center; }
details.ta-bereich > summary::-webkit-details-marker { display:none; }
details.ta-bereich > summary::after { content:"+"; font-size:20px; color:#7A3A44; }
details.ta-bereich[open] > summary::after { content:"–"; }
details.ta-bereich > .ta-zeile { margin:0 14px; }
details.ta-bereich > .ta-zeile:last-child { margin-bottom:12px; }
/* Aufgaben im Salon: Bereiche zum Ein- und Ausklappen, kompakte Zeilen */
details.tm-bereich { border:1px solid #EBDCCB; border-radius:12px; background:#fff; margin:0 0 10px; padding:0 14px 6px; }
details.tm-bereich > summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 0; }
details.tm-bereich > summary::-webkit-details-marker { display:none; }
details.tm-bereich > summary::after { content:"+"; font-size:22px; line-height:1; color:#7A3A44; margin-left:4px; }
details.tm-bereich[open] > summary::after { content:"–"; }
details.tm-bereich .tm-s-titel { flex:1; font-size:16px; font-weight:700; color:#4F000B; }
details.tm-bereich .tm-s-stand { font-size:13px; color:#7A3A44; white-space:nowrap; }
details.tm-bereich .tm-s-stand.ok { color:#1E6B4D; font-weight:700; }
.tm-aufgabe.tm-kompakt { padding:8px 10px; margin:0 0 6px; border-radius:10px; align-items:flex-start; }
.tm-aufgabe.tm-kompakt .tm-haken { width:30px; height:30px; margin-top:1px; }
.tm-aufgabe.tm-kompakt .titel { font-size:14px; }
.tm-wer-zeile { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:3px; font-size:12px; color:#7A3A44; }
.tm-wer-zeile .avatar { flex:0 0 auto; }
.tm-aufgabe.tm-kompakt { flex-wrap:nowrap !important; align-items:flex-start; }
.tm-aufgabe.tm-kompakt .titel { flex:1 1 0; min-width:0; }
.tm-aufgabe.tm-kompakt .tm-haken { width:28px !important; min-width:28px; height:28px !important; min-height:28px; box-sizing:border-box; align-self:flex-start; padding:0 !important; font-size:16px; }
/* Verwaltung Team (Umfragen, Aufgabenplan, Lob): saubere Formulare */
.akkordeon-inhalt textarea { font-family:Inter, Arial, sans-serif; font-size:14px; line-height:1.5; }
.akkordeon-inhalt .at-optionen { margin:12px 0 4px; padding:10px 12px; background:#FFFBF6; border:1px solid #FFF8EF; border-radius:10px; display:flex; flex-direction:column; gap:2px; }
.akkordeon-inhalt label.at-check { display:flex !important; align-items:center; gap:10px; margin:5px 0 !important; font-weight:400; font-size:14px; color:#4F000B; width:auto; cursor:pointer; }
.akkordeon-inhalt label.at-check input[type=checkbox] { width:18px; height:18px; min-width:18px; margin:0; padding:0; flex:0 0 auto; accent-color:#4F000B; }
.akkordeon-inhalt #tu-frage, .akkordeon-inhalt #tu-beschr, .akkordeon-inhalt #tu-opt, .akkordeon-inhalt #tu-ende { width:100%; max-width:560px; box-sizing:border-box; padding:10px 12px; border:1px solid #E4D2BF; border-radius:8px; background:#fff; font-size:14px; }
.akkordeon-inhalt #tu-opt { min-height:110px; }
.lf-team-zeile { margin:6px 0; font-size:14px; line-height:1.5; }
/* Nachrichten mit Link */
.hin-karte.hin-link { cursor:pointer; }
.hin-karte.hin-link:hover { box-shadow:0 2px 10px rgba(79,0,11,.14); }
.hin-karte.hin-link .hin-text::after { content:" \2192"; color:#7A3A44; font-weight:600; }
/* Umfragen einklappbar */
details.tm-umfrage > summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:16px; font-weight:700; color:#4F000B; }
details.tm-umfrage > summary::-webkit-details-marker { display:none; }
details.tm-umfrage > summary::after { content:"+"; font-size:22px; color:#7A3A44; margin-left:4px; }
details.tm-umfrage[open] > summary::after { content:"–"; }
details.tm-umfrage[open] > summary { margin-bottom:10px; }
.tm-u-frage { flex:1; } .tm-u-stand { font-size:11.5px; font-weight:700; padding:2px 10px; border-radius:12px; background:#F7E9DC; color:#7A3A44; white-space:nowrap; }
.tm-u-stand.offen { background:#f8efd9; color:#7A3A00; } .tm-u-stand.abgestimmt { background:#E1F1EA; color:#1E6B4D; }
.tm-komm { margin-top:14px; border-top:1px solid #FFF8EF; padding-top:4px; }
/* Verwaltung: Kommentare zu Umfragen */
details.at-komm > summary { cursor:pointer; font-size:13px; font-weight:700; color:#4F000B; }
.at-komm-zeile { font-size:13px; padding:5px 0; border-bottom:1px solid #FBEFE3; }
/* Lob: Formulierungshilfe */
.tm-helfer { margin:14px 0 4px; padding:12px 14px; background:#FFFBF6; border:1px solid #FFF8EF; border-radius:10px; }
.tm-helfer .tm-label { margin-top:0; }
/* Zeugnis: Formulierungshilfe je Feld */
details.zg-help { margin:4px 0 6px; }
details.zg-help > summary { cursor:pointer; font-size:12.5px; font-weight:600; color:#7A3A44; }
.zg-help-inhalt { margin-top:6px; padding:10px 12px; background:#FFFBF6; border:1px solid #FFF8EF; border-radius:8px; }
.zg-help-inhalt label { font-size:12.5px; font-weight:600; color:#4F000B; margin:0 0 4px; display:block; }
.zg-help-inhalt .zg-stich { width:100%; max-width:560px; box-sizing:border-box; padding:9px 11px; border:1px solid #E4D2BF; border-radius:8px; font-size:14px; }
.zg-help-zeile { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px; }
/* Zeugnisse in der Mitarbeiterakte */
pre.akte-zeugnis-text { white-space:pre-wrap; font-family:Georgia, "Times New Roman", serif; font-size:14px; line-height:1.6; background:#FFFBF6; border:1px solid #FFF8EF; border-radius:8px; padding:14px 16px; margin:0 0 10px; }
.akte-zeugnis-knoepfe { display:flex; gap:8px; flex-wrap:wrap; }
/* Aufgaben im Salon: Teamschnitt als Strich in der Säule */
.lf-saeule-spur { position:relative; }
.lf-saeule-team { position:absolute; left:-2px; right:-2px; height:0; border-top:2px solid #b0893c; pointer-events:none; }
/* Fenster "Termine eintragen": die Knöpfe stehen außerhalb der Karte und brauchen einen eigenen Stil (08.11.2026) */
#termin-popup-inhalt button { padding:11px 22px; border-radius:8px; border:1.5px solid #4F000B; background:#4F000B; color:#fff; font:600 15px Inter, Arial, sans-serif; cursor:pointer; }
#termin-popup-inhalt button:hover { background:#3D0A14; border-color:#3D0A14; }
#termin-popup-inhalt button.zweit, #termin-popup-inhalt #btn-kal-termine { background:#fff; color:#4F000B; }
#termin-popup-inhalt button.zweit:hover, #termin-popup-inhalt #btn-kal-termine:hover { background:#F7E9DC; }
#termin-popup-inhalt button:focus-visible { outline:3px solid rgba(201,169,110,.55); outline-offset:2px; }
#termin-popup-inhalt button:disabled { opacity:.55; cursor:default; }
/* Aufgaben im Schmalformat (08.11.2026): Bild, Name und Uhrzeit stehen rechts in der ersten Zeile, die Zeile wird niedriger */
.tm-aufgabe.tm-kompakt { align-items:center !important; padding:6px 10px; margin:0 0 5px; }
.tm-aufgabe.tm-kompakt .tm-wer-zeile { flex:0 0 auto; margin:0 0 0 auto; justify-content:flex-end; flex-wrap:nowrap; white-space:nowrap; gap:6px; }
.tm-aufgabe.tm-kompakt .tm-wer-zeile .tm-zurueck { margin-left:4px; }
@media (max-width:560px) {
.tm-aufgabe.tm-kompakt { flex-wrap:wrap !important; }
.tm-aufgabe.tm-kompakt .titel { flex:1 1 calc(100% - 44px); }
.tm-aufgabe.tm-kompakt .tm-wer-zeile { flex:1 1 100%; margin:0; justify-content:flex-end; font-size:11.5px; }
}
/* Aufgaben im Salon: Sterne und Teamstand nebeneinander und kleiner (08.11.2026) */
.tm-aufg-kopf { display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; margin:0 0 12px; }
.tm-aufg-kopf .tm-kachel { flex:0 0 auto; min-width:150px; padding:9px 14px; border-radius:10px; }
.tm-aufg-kopf .tm-kachel .zahl { font-size:20px; }
.tm-aufg-kopf .tm-kachel .text { font-size:12px; }
.tm-aufg-kopf .tm-karte { flex:1 1 260px; margin:0; padding:9px 14px; border-radius:10px; }
.tm-aufg-kopf .tm-karte strong { font-size:14px; }
.tm-aufg-kopf .tm-karte .tm-klein { font-size:12px; margin-top:2px !important; }
/* Fenster "Termine eintragen": Schließen-Knopf */
#termin-popup-zu { padding:8px 16px; border-radius:8px; border:1.5px solid #4F000B; background:#fff; color:#4F000B; font:600 14px Inter, Arial, sans-serif; cursor:pointer; }
#termin-popup-zu:hover { background:#F7E9DC; }
#termin-popup-zu:focus-visible { outline:3px solid rgba(201,169,110,.55); outline-offset:2px; }
/* Fenster beim Austritt */
#austritt-popup button { padding:10px 20px; border-radius:8px; border:1.5px solid #4F000B; background:#4F000B; color:#fff; font:600 14px Inter, Arial, sans-serif; cursor:pointer; }
#austritt-popup button:hover { background:#3D0A14; }
#austritt-popup button.zweit { background:#fff; color:#4F000B; }
#austritt-popup button.zweit:hover { background:#F7E9DC; }
#austritt-popup button:disabled { opacity:.55; cursor:default; }
#austritt-popup label { font-weight:600; font-size:13px; color:#4F000B; }
/* Zeugnis: fachliche Tätigkeiten zum Ankreuzen */
.zg-taetigkeiten { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:4px 14px; margin:0 0 10px; padding:10px 12px; background:#FFFBF6; border:1px solid #FFF8EF; border-radius:8px; }
.zg-tat { display:flex; align-items:center; gap:8px; font-weight:400; margin:2px 0; cursor:pointer; font-size:14px; }
.zg-tat input { width:18px; height:18px; flex:none; margin:0; }