/* Personalplan — Farben wie Logistik Chat (mc.css), hell/dunkel ueber data-theme bzw. System */
:root {
  --g: #eef1f6; --f: #ffffff; --f2: #f5f7fa; --l: #e1e5ec; --l2: #eef1f4;
  --t: #1f2329; --t2: #5b6472; --t3: #8a93a1;
  --blau: #1a73e8; --blau-hell: #e8f0fe; --rot: #d93025; --rot-hell: #fce8e6; --gruen: #137333; --gruen-hell: #e6f4ea;
  --gelb: #9a6700; --gelb-hell: #fef7e0;
  --z-F: #eceff1; --z-Ft: #5f6368; --z-U: #d2e3fc; --z-Ut: #174ea6; --z-K: #fce8e6; --z-Kt: #c5221f; --z-A: #fef7e0; --z-At: #9a6700;
  --fei: #fff4e5; --fei-t: #b06000;
  --schatten: 0 1px 2px rgba(16, 24, 40, .08), 0 4px 16px rgba(16, 24, 40, .08);
  --schrift: 'Google Sans', Roboto, 'Segoe UI', Arial, sans-serif;
  --lauf: Roboto, 'Segoe UI', Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --g: #0e1116; --f: #161a21; --f2: #1c212a; --l: #2a303b; --l2: #232934; --t: #e7eaf0; --t2: #a4adbb; --t3: #78818f;
    --blau: #8ab4f8; --blau-hell: #1d2b44; --rot: #f28b82; --rot-hell: #3b2220; --gruen: #81c995; --gruen-hell: #17301f; --gelb: #fdd663; --gelb-hell: #3a3218;
    --z-F: #262c37; --z-Ft: #a4adbb; --z-U: #1d2b44; --z-Ut: #8ab4f8; --z-K: #3b2220; --z-Kt: #f28b82; --z-A: #3a3218; --z-At: #fdd663;
    --fei: #33281a; --fei-t: #fdd663; --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --g: #0e1116; --f: #161a21; --f2: #1c212a; --l: #2a303b; --l2: #232934; --t: #e7eaf0; --t2: #a4adbb; --t3: #78818f;
  --blau: #8ab4f8; --blau-hell: #1d2b44; --rot: #f28b82; --rot-hell: #3b2220; --gruen: #81c995; --gruen-hell: #17301f; --gelb: #fdd663; --gelb-hell: #3a3218;
  --z-F: #262c37; --z-Ft: #a4adbb; --z-U: #1d2b44; --z-Ut: #8ab4f8; --z-K: #3b2220; --z-Kt: #f28b82; --z-A: #3a3218; --z-At: #fdd663;
  --fei: #33281a; --fei-t: #fdd663; --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .45);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--g); color: var(--t); font: 14px/1.45 var(--lauf); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
button, select, input { font: inherit; color: inherit; }

.pp-sperre { position: fixed; inset: 0; display: grid; place-items: center; background: var(--g); padding: 16px; }
.pp-sperre-karte { background: var(--f); border-radius: 20px; padding: 32px 36px; text-align: center; box-shadow: var(--schatten); max-width: 420px; }
.pp-sperre-karte h1 { font: 500 24px var(--schrift); margin: 14px 0 6px; }
.pp-sperre-karte p { color: var(--t2); margin: 0 0 18px; }
.pp-logo { width: 36px; height: 36px; border-radius: 10px; background: var(--blau); color: #fff; display: inline-grid; place-items: center; }
.pp-logo.gross { width: 56px; height: 56px; border-radius: 16px; } .pp-logo.gross svg { width: 30px; height: 30px; }

.pp-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 20px; background: var(--f); border-bottom: 1px solid var(--l); }
.pp-top-marke { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; margin-right: 8px; }
.pp-top-titel { display: flex; flex-direction: column; font: 500 18px/1.15 var(--schrift); }
.pp-top-titel small { font: 12px var(--lauf); color: var(--t2); }
.pp-woche { display: flex; align-items: center; gap: 4px; }
.pp-woche select { height: 38px; border: 1px solid var(--l); border-radius: 19px; padding: 0 14px; background: var(--f); font-weight: 500; min-width: 320px; cursor: pointer; }
.pp-speicher { font-size: 13px; color: var(--t2); min-width: 120px; }
.pp-speicher.ok { color: var(--gruen); } .pp-speicher.fehler { color: var(--rot); font-weight: 500; }
.pp-top-aktionen { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pp-b { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 19px; border: 1px solid var(--l); background: var(--f); cursor: pointer; font-weight: 500; white-space: nowrap; text-decoration: none; color: var(--t); }
.pp-b:hover { background: var(--f2); }
.pp-b.pp-primaer { background: var(--blau); border-color: var(--blau); color: #fff; } .pp-b.pp-primaer:hover { filter: brightness(1.06); }
.pp-b.pp-gefahr { color: var(--rot); } .pp-b.pp-gefahr.scharf { background: var(--rot); border-color: var(--rot); color: #fff; }
.pp-b:disabled { opacity: .5; cursor: default; }
.pp-rund { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; display: inline-grid; place-items: center; cursor: pointer; color: var(--t2); }
.pp-rund:hover { background: var(--f2); color: var(--t); } .pp-rund:disabled { opacity: .35; cursor: default; }

.pp-haupt { padding: 16px 20px 40px; max-width: 1500px; margin: 0 auto; }
.pp-hinweise { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pp-hinweis { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: var(--gelb-hell); color: var(--gelb); font-size: 13px; font-weight: 500; }
.pp-hinweis.rot { background: var(--rot-hell); color: var(--rot); }
.pp-leer { background: var(--f); border-radius: 18px; padding: 40px; text-align: center; color: var(--t2); box-shadow: var(--schatten); }
.pp-karte { background: var(--f); border-radius: 18px; box-shadow: var(--schatten); overflow: hidden; }
.pp-tabelle-rahmen { overflow: auto; max-height: calc(100vh - 230px); }
.pp-tabelle { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1100px; font-size: 13.5px; }
.pp-tabelle th, .pp-tabelle td { border-bottom: 1px solid var(--l2); padding: 0; text-align: center; }
.pp-tabelle thead th { position: sticky; top: 0; z-index: 3; background: var(--f2); color: var(--t2); font-weight: 500; font-size: 12.5px; padding: 8px 6px; border-bottom: 1px solid var(--l); }
.pp-tabelle thead th b { display: block; color: var(--t); font-size: 13.5px; }
.pp-tabelle thead th.feiertag { background: var(--fei); }
.pp-tabelle thead th .fei { display: block; color: var(--fei-t); font-size: 11px; font-weight: 500; }
.pp-tabelle thead th.heute b { color: var(--blau); }
.pp-tabelle .c-name { text-align: left; position: sticky; left: 0; z-index: 2; background: var(--f); min-width: 210px; padding: 0 10px 0 6px; }
.pp-tabelle thead .c-name { z-index: 4; background: var(--f2); padding-left: 16px; }
.pp-name { display: flex; align-items: center; gap: 6px; min-height: 40px; }
.pp-name span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pp-name em { font-style: normal; font-size: 11px; color: var(--gelb); background: var(--gelb-hell); border-radius: 999px; padding: 0 6px; }
.pp-griff { width: 22px; height: 28px; border: 0; background: none; color: var(--t3); cursor: pointer; border-radius: 6px; display: grid; place-items: center; opacity: 0; }
tr:hover .pp-griff, .pp-griff:focus-visible { opacity: 1; } .pp-griff:hover { background: var(--f2); color: var(--t); }
.pp-tabelle .c-auf { width: 66px; }
.pp-chip { border: 1px solid var(--l); background: var(--f); color: var(--t3); border-radius: 999px; font-size: 12px; font-weight: 500; padding: 3px 9px; cursor: pointer; }
.pp-chip.an { background: var(--blau-hell); border-color: transparent; color: var(--blau); }
.pp-tabelle .c-tag { width: 92px; }
.pp-zelle { display: block; width: 100%; height: 40px; border: 0; background: transparent; cursor: pointer; font-weight: 500; font-variant-numeric: tabular-nums; outline: none; position: relative; }
.pp-zelle:hover { background: var(--f2); }
.pp-zelle.z-F { background: var(--z-F); color: var(--z-Ft); } .pp-zelle.z-U { background: var(--z-U); color: var(--z-Ut); }
.pp-zelle.z-K { background: var(--z-K); color: var(--z-Kt); } .pp-zelle.z-A { background: var(--z-A); color: var(--z-At); }
td.feiertag .pp-zelle:not(.z-F):not(.z-U):not(.z-K):not(.z-A) { background: var(--fei); }
.pp-zelle.gewaehlt { box-shadow: inset 0 0 0 2px var(--blau); z-index: 1; }
.pp-zelle.markiert { box-shadow: inset 0 0 0 2px var(--blau); background-image: linear-gradient(rgba(26, 115, 232, .10), rgba(26, 115, 232, .10)); }
.pp-tabelle .c-summe { width: 52px; color: var(--t2); font-variant-numeric: tabular-nums; }
.pp-tabelle .c-summe.voll { color: var(--rot); font-weight: 700; }
.pp-tabelle tbody tr:hover td { background-color: var(--f2); } .pp-tabelle tbody tr:hover .c-name { background: var(--f2); }
/* Tagesuebersicht (Fusszeile): deutlich von den Personenzeilen abgesetzt */
.pp-tabelle tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--blau-hell); font-size: 12px; color: var(--t2); padding: 8px 4px; vertical-align: top; border-bottom: 0; border-top: 2px solid var(--blau); }
.pp-tabelle tfoot .c-name { z-index: 3; background: var(--blau-hell); padding: 8px 10px 8px 16px; color: var(--t); }
.pp-tabelle tfoot .c-name b { display: block; font: 500 14px var(--schrift); color: var(--t); }
.pp-tabelle tfoot .c-name small { display: block; color: var(--t2); font-size: 11.5px; line-height: 1.35; margin-top: 2px; }
.pp-tabelle tfoot .zahl { display: block; font: 700 18px var(--schrift); color: var(--blau); }
.pp-tabelle tfoot .zahl small { font: 400 11px var(--lauf); color: var(--t2); }
.pp-tabelle tfoot .s { display: block; white-space: nowrap; cursor: help; }
.pp-tabelle tfoot .s.ab { color: var(--t3); margin-top: 2px; }
/* Verlauf-Knopf + Seitenleiste */
.pp-zahl { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--blau); color: #fff; font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; }
.pp-b.an { background: var(--blau-hell); border-color: var(--blau); color: var(--blau); }
.pp-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(400px, 100vw); background: var(--f); border-left: 1px solid var(--l); box-shadow: -8px 0 30px rgba(16, 24, 40, .14); display: flex; flex-direction: column; animation: ppRein .18s ease; }
@keyframes ppRein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.pp-panel-kopf { display: flex; align-items: center; gap: 8px; padding: 14px 10px 10px 18px; border-bottom: 1px solid var(--l); }
.pp-panel-kopf > div { flex: 1; min-width: 0; } .pp-panel-kopf b { display: block; font: 500 17px var(--schrift); } .pp-panel-kopf small { color: var(--t2); font-size: 12.5px; }
.pp-panel-hinweis { padding: 8px 18px; font-size: 12px; color: var(--t3); border-bottom: 1px solid var(--l2); }
.pp-panel-liste { flex: 1; overflow-y: auto; padding: 6px 10px 20px; }
.pp-panel-tag { position: sticky; top: 0; background: var(--f); padding: 10px 8px 4px; font-size: 12px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .5px; }
.pp-eintrag { display: flex; gap: 10px; padding: 8px; border-radius: 12px; }
.pp-eintrag:hover { background: var(--f2); }
.pp-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font: 500 12.5px var(--lauf); background: var(--blau); }
.pp-av.sys { background: var(--t3); }
.pp-eintrag-text { flex: 1; min-width: 0; }
.pp-eintrag-kopf { display: flex; gap: 6px; align-items: baseline; } .pp-eintrag-kopf b { font-weight: 500; } .pp-eintrag-kopf span { color: var(--t3); font-size: 12px; }
.pp-eintrag-satz { color: var(--t2); font-size: 13px; margin-top: 2px; }
.pp-aend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; padding: 3px 6px; margin: 2px -6px 0; border-radius: 7px; cursor: pointer; color: var(--t2); }
.pp-aend:hover { background: var(--blau-hell); color: var(--t); }
.pp-aend .wer { color: var(--t); font-weight: 500; }
.pp-mini { display: inline-grid; place-items: center; min-width: 34px; height: 19px; padding: 0 5px; border-radius: 5px; background: var(--f2); color: var(--t); font-weight: 500; font-size: 11.5px; }
.pp-mini.z-F { background: var(--z-F); color: var(--z-Ft); } .pp-mini.z-U { background: var(--z-U); color: var(--z-Ut); }
.pp-mini.z-K { background: var(--z-K); color: var(--z-Kt); } .pp-mini.z-A { background: var(--z-A); color: var(--z-At); }
.pp-mini.leer { background: transparent; border: 1px dashed var(--l); color: var(--t3); }
.pp-mehr-zeilen { font-size: 12px; color: var(--blau); border: 0; background: none; cursor: pointer; padding: 2px 0; }
.pp-panel-leer { padding: 30px 12px; text-align: center; color: var(--t3); }
@keyframes ppBlink { 0%, 100% { box-shadow: inset 0 0 0 2px transparent; } 25%, 75% { box-shadow: inset 0 0 0 3px #f9ab00; } }
.pp-zelle.blink, .pp-name.blink { animation: ppBlink 1.1s ease 2; }
@media (min-width: 1300px) { body.pp-mit-panel .pp-haupt { margin-right: 400px; } }
.pp-unten { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--l); }
.pp-legende { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--t2); font-size: 12.5px; }
.pp-zelle-muster { display: inline-grid; place-items: center; min-width: 40px; height: 22px; border-radius: 6px; font-weight: 500; font-size: 12px; margin-left: 8px; }
.pp-zelle-muster.z-zeit { background: var(--f2); color: var(--t); } .pp-zelle-muster.z-F { background: var(--z-F); color: var(--z-Ft); }
.pp-zelle-muster.z-U { background: var(--z-U); color: var(--z-Ut); } .pp-zelle-muster.z-K { background: var(--z-K); color: var(--z-Kt); }
.pp-zelle-muster.z-A { background: var(--z-A); color: var(--z-At); }
.pp-tipp { flex-basis: 100%; color: var(--t3); font-size: 12px; margin-top: 2px; }
.pp-verlauf { margin-top: 14px; background: var(--f); border-radius: 14px; padding: 10px 16px; box-shadow: var(--schatten); }
.pp-verlauf summary { cursor: pointer; font-weight: 500; color: var(--t2); }
.pp-verlauf ul { margin: 8px 0 0; padding-left: 18px; color: var(--t2); font-size: 13px; max-height: 260px; overflow: auto; }
.pp-verlauf li b { color: var(--t); font-weight: 500; }

/* Auswahl-Fenster an der Zelle */
.pp-wahl { position: fixed; z-index: 60; background: var(--f); border: 1px solid var(--l); border-radius: 14px; box-shadow: 0 12px 36px rgba(16, 24, 40, .22); padding: 10px; width: 268px; }
.pp-wahl-titel { font-size: 12px; color: var(--t2); margin: 0 2px 8px; }
.pp-wahl-gitter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pp-wahl-gitter button { height: 34px; border-radius: 9px; border: 1px solid var(--l); background: var(--f); cursor: pointer; font-weight: 500; }
.pp-wahl-gitter button:hover { border-color: var(--blau); color: var(--blau); }
.pp-wahl-gitter button.z-F { background: var(--z-F); color: var(--z-Ft); border-color: transparent; } .pp-wahl-gitter button.z-U { background: var(--z-U); color: var(--z-Ut); border-color: transparent; }
.pp-wahl-gitter button.z-K { background: var(--z-K); color: var(--z-Kt); border-color: transparent; } .pp-wahl-gitter button.z-A { background: var(--z-A); color: var(--z-At); border-color: transparent; }
.pp-wahl-zeile { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.pp-wahl-zeile input { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--l); border-radius: 9px; padding: 0 10px; background: var(--f2); }
.pp-wahl-zeile button { height: 34px; border-radius: 9px; border: 1px solid var(--l); background: var(--f); cursor: pointer; padding: 0 10px; font-weight: 500; white-space: nowrap; }
.pp-wahl-zeile button:hover { background: var(--f2); }
.pp-wahl label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--t2); margin-top: 8px; cursor: pointer; }

/* Menues + Dialoge */
.pp-menue { position: fixed; z-index: 60; background: var(--f); border: 1px solid var(--l); border-radius: 12px; box-shadow: 0 12px 36px rgba(16, 24, 40, .22); padding: 6px; min-width: 220px; }
.pp-menue button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; }
.pp-menue button:hover { background: var(--f2); } .pp-menue button.rot { color: var(--rot); } .pp-menue button:disabled { opacity: .4; cursor: default; }
.pp-menue hr { border: 0; border-top: 1px solid var(--l); margin: 4px 0; }
.pp-dialog { border: 0; border-radius: 18px; padding: 0; width: min(480px, 94vw); background: var(--f); color: var(--t); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
.pp-dialog::backdrop { background: rgba(10, 14, 20, .5); }
.pp-dialog h3 { margin: 0; padding: 18px 22px 6px; font: 500 18px var(--schrift); }
.pp-dialog .koerper { padding: 6px 22px 6px; color: var(--t2); }
.pp-dialog .koerper p { margin: 6px 0; }
.pp-dialog .fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 18px; }
.pp-feld { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; color: var(--t2); font-size: 13px; }
.pp-feld input, .pp-feld select { height: 38px; border: 1px solid var(--l); border-radius: 10px; padding: 0 12px; background: var(--f2); color: var(--t); }
.pp-feldreihe { display: flex; gap: 10px; } .pp-feldreihe .pp-feld { flex: 1; }
.pp-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--l); border-radius: 12px; margin: 8px 0; cursor: pointer; color: var(--t); }
.pp-option input { margin-top: 3px; } .pp-option small { display: block; color: var(--t2); }
.pp-option:has(input:checked) { border-color: var(--blau); background: var(--blau-hell); }
.pp-suche { width: 100%; height: 38px; border: 1px solid var(--l); border-radius: 10px; padding: 0 12px; background: var(--f2); margin: 8px 0; }
.pp-personen { max-height: 300px; overflow: auto; margin: 0 -6px; }
.pp-personen button { display: flex; justify-content: space-between; width: 100%; padding: 9px 12px; border: 0; background: none; border-radius: 9px; cursor: pointer; text-align: left; color: var(--t); }
.pp-personen button:hover { background: var(--f2); } .pp-personen small { color: var(--t3); }
.pp-fehlertext { color: var(--rot); font-size: 13px; min-height: 18px; }

/* Drucken: A4 quer, nur die Tabelle */
.pp-druckkopf { display: none; }
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  body { background: #fff; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pp-top, .pp-unten .pp-b, .pp-tipp, .pp-hinweise, .pp-panel, .pp-griff { display: none !important; }
  body.pp-mit-panel .pp-haupt { margin-right: 0; }
  .pp-tabelle tfoot td { position: static; background: #eef3fd; border-top: 2px solid #1a73e8; }
  .pp-haupt { padding: 0; max-width: none; }
  .pp-druckkopf { display: block; font: 500 15px Roboto, Arial, sans-serif; margin-bottom: 6px; }
  .pp-karte { box-shadow: none; border-radius: 0; }
  .pp-tabelle-rahmen { overflow: visible; max-height: none; }
  .pp-tabelle { min-width: 0; font-size: 10.5px; }
  .pp-tabelle th, .pp-tabelle td { border: 1px solid #bbb; }
  .pp-tabelle thead th { position: static; }
  .pp-tabelle .c-name { position: static; min-width: 0; }
  .pp-zelle { height: 22px; }
  .pp-name { min-height: 22px; }
  .pp-unten { border: 0; padding: 6px 0; }
}

/* Kompakte Zeilen: 24+ Personen passen ohne Scrollen auf einen 1080p-Bildschirm */
.pp-haupt { padding-top: 12px; padding-bottom: 12px; }
.pp-tabelle-rahmen { max-height: calc(100vh - 150px); }
.pp-tabelle { font-size: 13px; }
.pp-tabelle thead th { padding: 5px 6px; }
.pp-tabelle thead th b { font-size: 13px; }
.pp-name { min-height: 30px; }
.pp-griff { height: 24px; }
.pp-zelle { height: 30px; }
.pp-chip { padding: 1px 8px; font-size: 11.5px; }
.pp-tabelle tfoot td { padding: 5px 4px; font-size: 11.5px; line-height: 1.3; }
.pp-tabelle tfoot .c-name { padding: 5px 10px 5px 16px; }
.pp-tabelle tfoot .zahl { font-size: 16px; line-height: 1.2; }
.pp-unten { padding: 8px 16px; gap: 12px; flex-wrap: nowrap; }
.pp-unten .pp-b { height: 34px; flex: none; }
.pp-legende { flex-wrap: wrap; row-gap: 2px; font-size: 12px; }
.pp-zelle-muster { height: 20px; min-width: 34px; margin-left: 6px; }
.pp-tipp { flex-basis: auto; margin: 0 0 0 auto; padding-left: 12px; font-size: 11.5px; }
@media (max-width: 1100px) { .pp-unten { flex-wrap: wrap; } .pp-tipp { flex-basis: 100%; margin: 2px 0 0; padding-left: 0; } }

/* Tagesuebersicht einklappbar: zu = nur "13 im Dienst" */
.pp-tabelle tfoot.zu .s { display: none; }
.pp-tabelle tfoot.zu td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
.pp-fuss-auf { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 8px 2px 2px; margin-left: -4px; border-radius: 8px; cursor: pointer; color: var(--t); }
.pp-fuss-auf:hover { background: rgba(26, 115, 232, .10); }
.pp-fuss-auf svg { width: 20px; height: 20px; color: var(--blau); transition: transform .15s; }
.pp-tabelle tfoot.zu .pp-fuss-auf svg { transform: rotate(-90deg); }
.pp-fuss-auf b { font: 500 14px var(--schrift); }
.pp-fuss-auf span { font-size: 12px; color: var(--blau); }
@media print { .pp-tabelle tfoot.zu .s { display: block; } .pp-fuss-auf svg, .pp-fuss-auf span { display: none; } }

/* Personenprofil (Info-Ansicht) */
.pp-name span.klickbar { cursor: pointer; }
.pp-name span.klickbar:hover { color: var(--blau); text-decoration: underline; text-underline-offset: 3px; }
tr.pp-aktiv-person td, tr.pp-aktiv-person .c-name { background: var(--blau-hell) !important; }
.pp-prof-kopf { display: flex; gap: 12px; align-items: center; padding: 14px 8px 10px; }
.pp-prof-kopf .pp-av { width: 48px; height: 48px; font-size: 17px; }
.pp-prof-kopf b { display: block; font: 500 18px var(--schrift); }
.pp-prof-kopf small { color: var(--t2); font-size: 12.5px; }
.pp-prof-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 8px 10px; }
.pp-prof-chip { font-size: 11.5px; font-weight: 500; border-radius: 999px; padding: 2px 9px; background: var(--f2); color: var(--t2); }
.pp-prof-chip.blau { background: var(--blau-hell); color: var(--blau); } .pp-prof-chip.gelb { background: var(--gelb-hell); color: var(--gelb); }
.pp-prof-chat { margin: 0 8px 6px; width: calc(100% - 16px); justify-content: center; }
.pp-prof-abschnitt { margin: 10px 4px 0; padding: 12px; border: 1px solid var(--l2); border-radius: 14px; }
.pp-prof-abschnitt h4 { margin: 0 0 8px; font: 500 13px var(--schrift); color: var(--t2); text-transform: uppercase; letter-spacing: .4px; }
.pp-prof-gross { font: 500 16px var(--schrift); color: var(--t); }
.pp-prof-gross.rot { color: var(--rot); } .pp-prof-gross.blau { color: var(--blau); }
.pp-prof-klein { color: var(--t2); font-size: 12.5px; margin-top: 2px; }
.pp-woche7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pp-woche7 div { text-align: center; }
.pp-woche7 small { display: block; font-size: 10.5px; color: var(--t3); margin-bottom: 2px; }
.pp-woche7 .pp-mini { width: 100%; height: 24px; font-size: 11.5px; cursor: default; }
.pp-woche7 .heute small { color: var(--blau); font-weight: 700; }
.pp-woche7 .feiertag .pp-mini.leer { background: var(--fei); }
.pp-kw-zeile { display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: center; margin-top: 6px; }
.pp-kw-zeile > span { font-size: 12px; color: var(--t2); font-weight: 500; }
.pp-kw-zeile .pp-woche7 small { display: none; }
.pp-zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pp-zahlen div { background: var(--f2); border-radius: 10px; padding: 8px 4px; text-align: center; }
.pp-zahlen b { display: block; font: 700 18px var(--schrift); }
.pp-zahlen small { font-size: 11px; color: var(--t2); }
.pp-zahlen .z-U b { color: var(--z-Ut); } .pp-zahlen .z-K b { color: var(--z-Kt); } .pp-zahlen .z-A b { color: var(--z-At); }
.pp-prof-liste { margin: 8px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--t2); }
.pp-prof-liste li { padding: 3px 0; }
.pp-prof-warn { display: flex; gap: 6px; align-items: flex-start; color: var(--rot); font-size: 12.5px; font-weight: 500; padding: 3px 0; }
.pp-prof-warn svg { width: 16px; height: 16px; margin-top: 1px; }

/* Analyse: breite Seitenleiste (ca. 60 %), legt sich ueber die Tabelle */
.pp-panel.pp-analyse { width: min(1180px, max(760px, 62vw), 100vw); }
.pp-an-leiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--l); }
.pp-an-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.pp-an-tabs button { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; font-weight: 500; color: var(--t2); cursor: pointer; }
.pp-an-tabs button:hover { background: var(--f2); }
.pp-an-tabs button.an { background: var(--blau-hell); color: var(--blau); }
.pp-an-zeit { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-an-zeit .seg { display: inline-flex; border: 1px solid var(--l); border-radius: 999px; overflow: hidden; }
.pp-an-zeit .seg button { border: 0; background: var(--f); padding: 6px 12px; font-size: 13px; cursor: pointer; color: var(--t2); }
.pp-an-zeit .seg button + button { border-left: 1px solid var(--l); }
.pp-an-zeit .seg button.an { background: var(--blau); color: #fff; }
.pp-an-zeit input[type=date] { height: 32px; border: 1px solid var(--l); border-radius: 8px; padding: 0 8px; background: var(--f2); color: var(--t); }
.pp-an-zeit .bereich { font-size: 12.5px; color: var(--t2); }
.pp-an-inhalt { padding: 14px 18px 30px; }
.pp-an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pp-an-kpi { background: var(--f2); border-radius: 14px; padding: 12px 14px; }
.pp-an-kpi small { display: block; color: var(--t2); font-size: 12px; }
.pp-an-kpi b { display: block; font: 700 22px var(--schrift); margin-top: 2px; }
.pp-an-kpi span { font-size: 12px; color: var(--t3); }
.pp-an-kpi.rot b { color: var(--rot); } .pp-an-kpi.blau b { color: var(--blau); }
.pp-an-karte { border: 1px solid var(--l2); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.pp-an-karte h4 { margin: 0 0 10px; font: 500 14px var(--schrift); display: flex; align-items: baseline; gap: 8px; }
.pp-an-karte h4 small { font: 400 12px var(--lauf); color: var(--t3); }
.pp-an-chart { width: 100%; height: auto; display: block; overflow: visible; }
.pp-an-chart text { font: 11px var(--lauf); fill: var(--t2); }
.pp-an-chart .wert { fill: var(--t); font-weight: 700; }
.pp-an-chart .gitter { stroke: var(--l2); }
.pp-an-chart .heute { fill: var(--blau); font-weight: 700; }
.pp-an-legende { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--t2); margin-top: 6px; }
.pp-an-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.pp-an-warn { display: flex; gap: 8px; align-items: center; padding: 7px 12px; border-radius: 10px; background: var(--rot-hell); color: var(--rot); font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.pp-an-ok { display: flex; gap: 8px; align-items: center; padding: 7px 12px; border-radius: 10px; background: var(--gruen-hell); color: var(--gruen); font-size: 13px; font-weight: 500; }
.pp-an-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-an-tab th { text-align: right; font-weight: 500; color: var(--t2); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--l); cursor: pointer; white-space: nowrap; user-select: none; position: sticky; top: 0; background: var(--f); }
.pp-an-tab th:first-child, .pp-an-tab td:first-child { text-align: left; }
.pp-an-tab th:hover { color: var(--t); } .pp-an-tab th.sort { color: var(--blau); }
.pp-an-tab td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--l2); font-variant-numeric: tabular-nums; }
.pp-an-tab td:first-child span { cursor: pointer; font-weight: 500; } .pp-an-tab td:first-child span:hover { color: var(--blau); text-decoration: underline; }
.pp-an-tab td.null { color: var(--t3); }
.pp-an-tab .balken { display: inline-block; height: 6px; border-radius: 3px; background: var(--blau); vertical-align: middle; margin-right: 6px; opacity: .7; }
.pp-an-kal { overflow-x: auto; }
.pp-an-kal table { border-collapse: separate; border-spacing: 2px; font-size: 11.5px; }
.pp-an-kal th { font-weight: 500; color: var(--t3); padding: 2px; min-width: 24px; text-align: center; }
.pp-an-kal th.we { color: var(--t2); } .pp-an-kal th.heute { color: var(--blau); }
.pp-an-kal td.n { text-align: left; padding-right: 8px; white-space: nowrap; font-weight: 500; color: var(--t); }
.pp-an-kal td.z { width: 24px; height: 22px; border-radius: 5px; text-align: center; font-weight: 500; background: var(--f2); color: var(--t3); }
.pp-an-kal td.z-U { background: var(--z-U); color: var(--z-Ut); } .pp-an-kal td.z-K { background: var(--z-K); color: var(--z-Kt); } .pp-an-kal td.z-A { background: var(--z-A); color: var(--z-At); }
.pp-an-kal tr.summe td.z { background: transparent; color: var(--t2); font-weight: 700; } .pp-an-kal tr.summe td.z.viel { color: var(--rot); }
.pp-an-hinweis { font-size: 12px; color: var(--t3); margin-top: 6px; }
.pp-an-leer { padding: 40px 10px; text-align: center; color: var(--t3); }
@media print { .pp-panel.pp-analyse { display: none !important; } }

/* Analyse: Diagramme 1:1 (nicht skaliert), Vorschau-Kalender schmaler, damit 6 Wochen ohne Querscrollen passen */
.pp-an-chart { width: auto; max-width: 100%; }
.pp-an-kal table { border-spacing: 1px; font-size: 10.5px; }
.pp-an-kal th { min-width: 20px; padding: 1px; font-size: 10px; }
.pp-an-kal td.z { width: 20px; height: 20px; border-radius: 4px; font-size: 10.5px; }
.pp-an-kal td.n { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.pp-an-hinter { position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 39; background: rgba(16, 24, 40, .32); cursor: pointer; animation: ppHinter .15s ease; }
@keyframes ppHinter { from { opacity: 0; } to { opacity: 1; } }
.pp-an-tab td.null { color: var(--l); }
@media print { .pp-an-hinter { display: none !important; } }

/* Analyse als Vollbild-Ebene unter der Kopfzeile; Inhalt mittig, max. 1400 px breit */
.pp-panel.pp-analyse { left: 0; right: 0; width: auto; border-left: 0; box-shadow: none; background: var(--g); animation: ppVoll .15s ease; }
@keyframes ppVoll { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pp-analyse .pp-panel-kopf, .pp-analyse .pp-an-leiste { background: var(--f); }
.pp-analyse .pp-panel-kopf, .pp-analyse .pp-an-leiste, .pp-analyse .pp-an-inhalt { padding-left: max(20px, calc((100% - 1400px) / 2)); padding-right: max(20px, calc((100% - 1400px) / 2)); }
.pp-analyse .pp-an-karte, .pp-analyse .pp-an-kpi { background: var(--f); }
.pp-analyse .pp-an-kpi { border: 1px solid var(--l2); }
.pp-an-zeit .pp-b { height: 32px; padding: 0 12px; font-size: 13px; }
.pp-an-hinter { display: none !important; }

/* Analyse Stufe 2 */
.pp-an-heat { border-collapse: separate; border-spacing: 3px; font-size: 13px; }
.pp-an-heat th { font-weight: 500; color: var(--t2); padding: 4px 8px; font-size: 12px; }
.pp-an-heat th.zeit { text-align: right; color: var(--t); }
.pp-an-heat td { width: 64px; height: 34px; text-align: center; border-radius: 8px; font-weight: 700; color: var(--t); font-variant-numeric: tabular-nums; }
.pp-an-heat td.leer { background: var(--f2); }
.pp-an-heat td.summe { background: transparent; color: var(--t2); font-weight: 500; }
.pp-an-vorlauf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.pp-an-vorlauf .kw { border-radius: 10px; padding: 8px 6px; text-align: center; border: 1px solid transparent; }
.pp-an-vorlauf .kw b { display: block; font-size: 13px; } .pp-an-vorlauf .kw small { font-size: 11px; color: var(--t2); }
.pp-an-vorlauf .gut { background: var(--gruen-hell); } .pp-an-vorlauf .gut b { color: var(--gruen); }
.pp-an-vorlauf .teil { background: var(--gelb-hell); } .pp-an-vorlauf .teil b { color: var(--gelb); }
.pp-an-vorlauf .leer { background: var(--f2); }
.pp-an-vorlauf .fehlt { background: var(--f); border: 1px dashed var(--rot); } .pp-an-vorlauf .fehlt b { color: var(--rot); }
.pp-an-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pp-an-zwei .pp-an-karte { margin-bottom: 14px; }
.pp-an-zeile { display: grid; grid-template-columns: 170px 1fr 40px; gap: 10px; align-items: center; font-size: 13px; padding: 3px 0; }
.pp-an-zeile span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-an-zeile i { display: block; height: 8px; border-radius: 4px; background: var(--blau); opacity: .75; min-width: 2px; }
.pp-an-zeile b { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .pp-an-zwei { grid-template-columns: 1fr; } .pp-an-vorlauf { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Jahresplan: Vollbild wie Analyse, aber ganze Breite; Namen + Summen links und Kopf oben bleiben stehen */
:root { --ferien: #a8dab5; --rel: #d7aefb; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ferien: #2f6b42; --rel: #6e4b91; } }
:root[data-theme="dark"] { --ferien: #2f6b42; --rel: #6e4b91; }
.pp-jahr .pp-panel-kopf, .pp-jahr .pp-an-leiste { padding-left: 20px; padding-right: 20px; }
.pj-leiste { gap: 10px; }
.pj-jahrwahl { display: flex; align-items: center; gap: 2px; }
.pj-jahrwahl b { font: 500 18px var(--schrift); min-width: 52px; text-align: center; }
.pj-monate { display: inline-flex; border: 1px solid var(--l); border-radius: 999px; overflow: hidden; }
.pj-monate button { border: 0; background: var(--f); padding: 6px 10px; font-size: 13px; cursor: pointer; color: var(--t2); }
.pj-monate button + button { border-left: 1px solid var(--l); }
.pj-monate button:hover { background: var(--blau-hell); color: var(--blau); }
.pj-aktionen { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pj-aktionen .pp-b { height: 32px; padding: 0 12px; font-size: 13px; }
.pj-rahmen { flex: 1; min-height: 0; overflow: auto; background: var(--f); border-top: 1px solid var(--l); }
.pj-tab { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12px; user-select: none; }
.pj-tab th, .pj-tab td { padding: 0; border-right: 1px solid var(--l2); border-bottom: 1px solid var(--l2); text-align: center; vertical-align: middle; white-space: nowrap; overflow: hidden; }
.pj-tab thead th { position: sticky; z-index: 3; background: var(--f); font-weight: 500; color: var(--t2); }
.pj-tab thead tr.pj-r1 th { top: 0; height: 26px; } .pj-tab thead tr.pj-r2 th { top: 26px; height: 22px; } .pj-tab thead tr.pj-r3 th { top: 48px; height: 36px; }
.pj-tab thead th.pj-fix { top: 0; z-index: 5; font-size: 12px; color: var(--t2); vertical-align: bottom; padding-bottom: 8px; }
.pj-tab thead th.pj-k-name { text-align: left; padding-left: 12px; }
.pj-tab .pj-fix { position: sticky; z-index: 2; background: var(--f); }
.pj-tab .pj-kante { border-right: 2px solid var(--l); }
.pj-monat { text-align: left !important; padding-left: 8px !important; font: 500 13px var(--schrift); color: var(--t) !important; border-left: 2px solid var(--l); }
.pj-kw { font-size: 11px; color: var(--t3) !important; font-weight: 400 !important; border-left: 1px solid var(--l); }
.pj-kw.geplant { color: var(--blau) !important; font-weight: 500 !important; }
.pj-tag { font-size: 12px; line-height: 1.1; color: var(--t) !important; }
.pj-tag small { display: block; font-size: 9.5px; color: var(--t3); }
.pj-tag.we { background: var(--f2) !important; } .pj-tag.fei { background: var(--fei) !important; color: var(--fei-t) !important; }
.pj-tag.ferien { box-shadow: inset 0 -4px 0 var(--ferien); } .pj-tag.rel { box-shadow: inset 0 4px 0 var(--rel); }
.pj-tag.ferien.rel { box-shadow: inset 0 -4px 0 var(--ferien), inset 0 4px 0 var(--rel); }
.pj-tag.heute { background: var(--blau) !important; color: #fff !important; } .pj-tag.heute small { color: #fff; }
.pj-tab .m1 { border-left: 2px solid var(--l); }
.pj-tab tbody td { height: 30px; }
.pj-tab tbody tr:hover td.pj-fix { background: var(--f2); }
.pj-z { cursor: cell; font-weight: 700; font-size: 12px; }
.pj-z.we { background-color: var(--f2); } .pj-z.fei { background-color: var(--fei); }
.pj-z.heute { box-shadow: inset 2px 0 0 var(--blau), inset -2px 0 0 var(--blau); }
.pj-z.dienst { background-image: radial-gradient(circle, var(--t3) 2.2px, transparent 2.8px); }
.pj-z.z-U { background-color: var(--z-U); color: var(--z-Ut); } .pj-z.z-K { background-color: var(--z-K); color: var(--z-Kt); } .pj-z.z-A { background-color: var(--z-A); color: var(--z-At); }
.pj-z.gew { box-shadow: inset 0 0 0 2px var(--blau); } .pj-z.gew:not(.z-U):not(.z-K):not(.z-A) { background-color: var(--blau-hell); }
.pj-name { display: block; width: 100%; border: 0; background: none; text-align: left; padding: 0 8px 0 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; color: var(--t); }
.pj-name:hover { color: var(--blau); } .pj-name.ohne { font-style: italic; color: var(--t2); cursor: default; } .pj-name.ohne:hover { color: var(--t2); }
.pj-zahl { width: calc(100% - 8px); height: 24px; border: 1px solid transparent; border-radius: 6px; background: transparent; text-align: center; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pj-zahl:hover { border-color: var(--l); } .pj-zahl:focus { outline: 0; border-color: var(--blau); background: var(--f); }
.pj-zahl::placeholder { color: var(--t3); } .pj-zahl.fehler { border-color: var(--rot); background: var(--rot-hell); }
.pj-k-urlaub, .pj-k-rest, .pj-k-krank { font-variant-numeric: tabular-nums; font-size: 12.5px; }
td.pj-k-urlaub { color: var(--z-Ut); font-weight: 700; } td.pj-k-krank { color: var(--z-Kt); font-weight: 700; } td.pj-k-rest { font-weight: 500; }
td.pj-k-rest.minus { color: var(--rot); font-weight: 700; }
.pj-leer { padding: 30px 16px !important; text-align: left !important; color: var(--t3); }
.pj-fuss { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 8px 20px; background: var(--f); border-top: 1px solid var(--l); font-size: 12.5px; color: var(--t2); }
.pj-fuss .pp-tipp { margin-left: auto; }
.pj-muster { display: inline-block; width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--l); margin-left: 8px; vertical-align: middle; background: var(--f); }
.pj-muster.dienst { background-image: radial-gradient(circle, var(--t3) 2.2px, transparent 2.8px); }
.pj-muster.we { background: var(--f2); } .pj-muster.fei { background: var(--fei); }
.pj-muster.ferien { box-shadow: inset 0 -4px 0 var(--ferien); } .pj-muster.rel { box-shadow: inset 0 4px 0 var(--rel); }
.pj-wahl { width: 312px; }
.pj-wahl-hinweis { font-size: 11.5px; color: var(--t3); margin: 8px 2px 0; line-height: 1.35; }
.pj-liste { margin: 8px 0 0; padding-left: 18px; max-height: 240px; overflow: auto; font-size: 13px; color: var(--t2); }
.pj-tab th.pj-monat { overflow: visible; } /* sonst wird die Zelle selbst zum Scrollbehaelter und sticky greift nicht */
.pj-monat span { position: sticky; display: inline-block; }
.pj-monate button.an { background: var(--blau); color: #fff; }
.pj-monate button.an:hover { background: var(--blau); color: #fff; filter: brightness(1.06); }
.pj-tab thead th.pj-fix small { display: block; font-size: 10.5px; font-weight: 400; color: var(--t3); }