/* Elektrobüro – Kalender / Plantafel */
:root {
  --kl-c0: #dbe7fb; --kl-c0-ink: #173a73;
  --kl-c1: #dcf3e4; --kl-c1-ink: #135232;
  --kl-c2: #fde9d2; --kl-c2-ink: #7a3f05;
  --kl-c3: #eadffb; --kl-c3-ink: #4a2486;
  --kl-c4: #d6f1f3; --kl-c4-ink: #0f5157;
  --kl-c5: #fbdde6; --kl-c5-ink: #7d1838;
  --kl-urlaub: #c9e6d3; --kl-krank: #f7cfcb; --kl-sonst: #e4e7ee; --kl-fei: #f4efe3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --kl-c0: #1f3358; --kl-c0-ink: #c7dafc;
    --kl-c1: #1c3b2a; --kl-c1-ink: #bfe9cf;
    --kl-c2: #46301a; --kl-c2-ink: #f7d5ae;
    --kl-c3: #33264f; --kl-c3-ink: #dccbfa;
    --kl-c4: #173d41; --kl-c4-ink: #b9e8ec;
    --kl-c5: #4a2030; --kl-c5-ink: #f7c6d5;
    --kl-urlaub: #1f4630; --kl-krank: #55241f; --kl-sonst: #2c3446; --kl-fei: #2a2618;
  }
}

.kl-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.kl-bar .row { flex-wrap: wrap; }
.kl-titel { font-size: 15px; margin: 0 4px; }
.kl-springe { width: auto; padding: 5px 8px; font-size: 13px; }

.kl-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.kl-board { display: grid; grid-template-columns: 170px repeat(var(--n), minmax(104px, 1fr)); min-width: min-content; }
.kl-board.w4 { grid-template-columns: 150px repeat(var(--n), minmax(70px, 1fr)); }
.kl-board > div { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kl-head { position: sticky; top: 0; z-index: 3; background: var(--surface-2); padding: 6px 6px 5px; font-size: 12.5px; display: flex; flex-direction: column; gap: 1px; min-height: 40px; }
.kl-head.we { color: var(--muted); }
.kl-head.fei { background: var(--kl-fei); }
.kl-head.fei .tiny { color: var(--warn); line-height: 1.15; }
.kl-head.heute b { color: var(--accent); }
.kl-label { position: sticky; left: 0; z-index: 2; background: var(--surface); padding: 6px 8px; display: flex; align-items: center; gap: 7px; font-size: 13.5px; min-height: 44px; }
.kl-label > span { display: flex; flex-direction: column; min-width: 0; }
.kl-label b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-head.kl-label { z-index: 4; background: var(--surface-2); }
.kl-sec { grid-column: 1 / -1; background: var(--surface-2); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 5px 8px; position: sticky; left: 0; }
.kl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; margin-right: 6px; vertical-align: -1px; }
.kl-label .kl-dot { margin-right: 0; }

.kl-cell { padding: 3px; display: flex; flex-direction: column; gap: 3px; min-height: 44px; cursor: copy; min-width: 0; }
.kl-cell.we { background: var(--surface-2); }
.kl-cell.fei { background: var(--kl-fei); }
.kl-cell.heute { box-shadow: inset 2px 0 0 var(--accent); }
.kl-cell.over { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -3px; }
.kl-cell:hover { background-color: color-mix(in srgb, var(--accent-soft) 45%, transparent); }

.kl-chip { border-radius: 6px; padding: 3px 6px; font-size: 12px; line-height: 1.25; cursor: grab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
.kl-chip:active { cursor: grabbing; }
.kl-chip b { font-weight: 650; }
.kl-chip .z { font-variant-numeric: tabular-nums; opacity: .8; margin-right: 4px; }
.kl-chip .k { opacity: .75; }
.kl-chip.weiter { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -4px; padding-left: 9px; }
.kl-chip.mehr { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -4px; }
.c0 { background: var(--kl-c0); color: var(--kl-c0-ink); } .c1 { background: var(--kl-c1); color: var(--kl-c1-ink); }
.c2 { background: var(--kl-c2); color: var(--kl-c2-ink); } .c3 { background: var(--kl-c3); color: var(--kl-c3-ink); }
.c4 { background: var(--kl-c4); color: var(--kl-c4-ink); } .c5 { background: var(--kl-c5); color: var(--kl-c5-ink); }

.kl-abw { border-radius: 6px; padding: 2px 6px; font-size: 11.5px; font-weight: 600; background: var(--kl-sonst); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-abw.urlaub, .kl-abw.frei, .kl-abw.sonderurlaub { background: var(--kl-urlaub); }
.kl-abw.krank, .kl-abw.kind_krank { background: var(--kl-krank); }
.kl-abw.offen { background: transparent; border: 1.5px dashed var(--line-strong); color: var(--muted); }
.kl-abw.urlaub.offen { border-color: var(--ok); }

.kl-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.kl-legende span { display: inline-flex; align-items: center; gap: 5px; }
.kl-legende i.kl-abw { display: inline-block; width: 18px; height: 11px; padding: 0; }
.kl-legende i.kl-fei { display: inline-block; width: 18px; height: 11px; border-radius: 3px; background: var(--kl-fei); border: 1px solid var(--line); }

.kl-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.kl-wahl .chip.kl-weg:not(.active) { opacity: .65; text-decoration: line-through; text-decoration-thickness: 1px; }
.kl-wahl .chip.kl-weg.active { box-shadow: 0 0 0 2px var(--warn); }
.kl-uhr { display: flex; gap: 6px; align-items: center; }
.kl-uhr input { flex: 1 1 0; min-width: 0; width: auto; }
.kl-wahl .chip.active .muted { color: inherit; opacity: .8; }
.kl-filter select { width: auto; }
.kl-liste { margin: 6px 0 0 18px; padding: 0; }
.kl-antrag { align-items: flex-start; flex-wrap: wrap; }
.kl-antrag input.sm { max-width: 340px; padding: 6px 8px; font-size: 13.5px; }

.kl-tag { align-items: flex-start; gap: 12px; }
.kl-tag.heute { background: var(--accent-soft); }
.kl-tagname { width: 86px; flex: none; display: flex; flex-direction: column; font-size: 13.5px; }
.kl-einsatz { border-radius: 8px; padding: 8px 10px; }
.kl-einsatz a { color: inherit; }
.kl-konto { display: flex; gap: 18px; align-items: center; }
.kl-konto > div:first-child { display: flex; flex-direction: column; align-items: center; min-width: 90px; }
.kl-konto .v { font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--accent); }
.toast.warn { background: #8a5a00; }

@media (max-width: 700px) {
  .kl-board { grid-template-columns: 118px repeat(var(--n), minmax(84px, 1fr)); }
  .kl-board.w4 { grid-template-columns: 110px repeat(var(--n), minmax(64px, 1fr)); }
  .kl-label { font-size: 12.5px; padding: 5px 6px; }
  .kl-tagname { width: 70px; }
}