.time-tracking-page{display:grid;gap:14px;padding-bottom:32px}.time-command-card{position:sticky;top:0;z-index:18;display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:10px 18px;padding:14px 16px;border:1px solid #c9d9ea;border-radius:14px;background:rgba(247,251,255,.97);box-shadow:0 8px 24px rgba(24,56,91,.08);backdrop-filter:blur(12px)}.time-title{display:flex;align-items:center;gap:11px;min-width:0}.time-title h2{margin:0;color:#17314d;font-size:20px}.time-title p{margin:2px 0 0;color:#60738a;font-size:12px}.time-title-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#e2f3fb;color:#087da9;font-size:23px;font-weight:800}.time-tabs{grid-column:1/-1;display:flex;gap:6px;overflow:auto;padding:2px 0;scrollbar-width:thin}.time-tab{min-height:34px;padding:7px 13px;border:1px solid #c7d6e7;border-radius:9px;background:#fff;color:#27445f;font:700 12px/1.2 inherit;white-space:nowrap;cursor:pointer}.time-tab:hover{border-color:#70a8cb;background:#f0f9fd}.time-tab.active{border-color:#087da9;background:#087da9;color:#fff;box-shadow:0 3px 8px rgba(8,125,169,.2)}.time-filters{grid-column:1/-1;display:flex;align-items:end;gap:10px;flex-wrap:wrap}.time-filter{display:grid;gap:3px;min-width:170px}.time-filter span{color:#51677d;font-size:10px;font-weight:800;text-transform:uppercase}.time-filter input,.time-filter select{min-height:36px;border:1px solid #bfd0e2;border-radius:8px;background:#fff;padding:6px 10px}.time-current-person{align-self:center;color:#1b3f67}.time-metrics{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:10px}.time-metrics article{display:grid;gap:2px;padding:13px 15px;border:1px solid #cfdeeb;border-left:4px solid #1784af;border-radius:11px;background:#fff}.time-metrics span{color:#63778d;font-size:11px;font-weight:700}.time-metrics strong{color:#17314d;font-size:23px}.time-metrics small{color:#6c7e91}.time-metrics .positive{border-left-color:#168a62}.time-metrics .negative,.time-metrics .warning{border-left-color:#d5525f}.time-metrics .ok{border-left-color:#168a62}.time-presence-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px}.time-presence-card{display:grid;gap:12px;padding:14px;border:1px solid #c9d9e7;border-top:4px solid #93a8ba;border-radius:13px;background:#fff;box-shadow:0 5px 14px rgba(35,65,95,.06)}.time-presence-card.working{border-top-color:#168a62}.time-presence-card.break{border-top-color:#d89b20}.time-presence-card header{display:flex;align-items:center;gap:10px}.time-presence-card header div{display:grid;flex:1}.time-presence-card header strong{color:#163b66}.time-presence-card header small{color:#60758b}.time-presence-card header i{width:10px;height:10px;border-radius:50%;background:#93a8ba;box-shadow:0 0 0 4px #edf2f6}.time-presence-card.working header i{background:#168a62;box-shadow:0 0 0 4px #dff3eb}.time-presence-card.break header i{background:#d89b20;box-shadow:0 0 0 4px #fff0ce}.time-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#e7f2fb;color:#145c89;font-weight:800}.time-presence-values{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.time-presence-values span{display:flex;justify-content:space-between;gap:8px;padding:7px 8px;border-radius:7px;background:#f2f6fa;color:#60758b;font-size:11px}.time-presence-values b{color:#17314d}.time-book-actions{display:flex;gap:7px;flex-wrap:wrap}.time-inline-issues{margin:0;padding:8px 8px 8px 26px;border-radius:8px;background:#fff0f1;color:#a92d3b;font-size:11px}.time-journal-card{overflow:hidden}.time-table-wrap{max-width:100%;overflow:auto}.time-table{min-width:980px}.time-table td small,.time-device-layout td small,.time-device-layout td strong{display:block}.time-row-warning{background:#fff9f1}.time-issues summary{cursor:pointer;color:#a92d3b;font-weight:700}.time-issues ul{min-width:220px;margin:6px 0;padding-left:18px}.time-table .positive,.time-device-layout .positive{color:#137655}.time-table .negative,.time-device-layout .negative{color:#bd3344}.time-device-layout,.time-audit-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(290px,.8fr);gap:12px}.time-device-layout>.card{min-width:0}.time-checklist{display:grid;gap:8px;margin:0;padding:0;list-style:none}.time-checklist li{display:grid;grid-template-columns:18px minmax(160px,.55fr) 1fr;gap:8px;align-items:start;padding:9px 10px;border:1px solid #d3e0eb;border-radius:9px;background:#fbfdff}.time-checklist li::before{content:'✓';display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#dff3eb;color:#147b58;font-size:11px;font-weight:900}.time-checklist li.warning::before{content:'!';background:#fff0ce;color:#9a6908}.time-checklist span{color:#60758b}.legal-note{display:grid;gap:4px;margin-top:14px;padding:11px;border-left:4px solid #d69b21;border-radius:7px;background:#fff8e8}.time-void-option{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid #e7bdc2;border-radius:8px;background:#fff5f6}.time-token-dialog{display:grid;gap:12px}.time-token-dialog code{display:block;padding:13px;border-radius:8px;background:#16283a;color:#e6f7ff;overflow-wrap:anywhere;user-select:all}.button.compact{min-height:30px;padding:5px 9px;font-size:11px}@media(max-width:1050px){.time-metrics{grid-template-columns:repeat(2,1fr)}.time-device-layout,.time-audit-layout{grid-template-columns:1fr}.time-command-card{position:static}}@media(max-width:650px){.time-command-card{grid-template-columns:1fr}.time-title p{display:none}.time-metrics{grid-template-columns:1fr 1fr}.time-presence-grid{grid-template-columns:1fr}.time-checklist li{grid-template-columns:18px 1fr}.time-checklist li span{grid-column:2}.time-filters>*{flex:1 1 100%}}@media print{.app-header,.main-nav,.time-command-card .time-tabs,.time-command-card .time-filters,.time-table td:last-child,.time-table th:last-child,.time-book-actions{display:none!important}.time-command-card{position:static;box-shadow:none}.time-tracking-page{padding:0}.time-table-wrap{overflow:visible}.time-table{min-width:0;font-size:9px}}

/* Card containment and responsive wrapping. Tables keep their own scroll area. */
.time-tracking-page,
.time-command-card,
.time-command-card > *,
.time-title > *,
.time-metrics > *,
.time-presence-grid > *,
.time-presence-card,
.time-presence-card header > *,
.time-device-layout > *,
.time-audit-layout > *,
.time-checklist li > * { min-width: 0; max-width: 100%; }
.time-tracking-page { width: 100%; max-width: 100%; padding: 8px 16px 32px; overflow: clip; box-sizing: border-box; container: time-page / inline-size; }
.time-tracking-page :is(h2, h3, h4, p, span, strong, small, label, code) { overflow-wrap: anywhere; }
.time-tabs { flex-wrap: wrap; overflow: visible; }
.time-metrics { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.time-presence-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); }
.time-presence-card header { flex-wrap: wrap; }
.time-presence-values { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.time-presence-values span { min-width: 0; flex-wrap: wrap; }
.time-filter { min-width: min(170px, 100%); }
.time-filter input,
.time-filter select { min-width: 0; max-width: 100%; }
.time-checklist li { grid-template-columns: 18px minmax(120px, .55fr) minmax(0, 1fr); }
.time-inline-issues,
.legal-note { overflow-wrap: anywhere; }
@media(max-width:760px){.time-command-card{grid-template-columns:1fr}.time-title{align-items:flex-start}.time-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.time-tab{white-space:normal}.time-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.time-checklist li{grid-template-columns:18px minmax(0,1fr)}.time-checklist li span{grid-column:2}}
@media(max-width:430px){.time-command-card{padding:11px}.time-title-icon{width:34px;height:34px}.time-title h2{font-size:17px}.time-tabs,.time-metrics,.time-presence-values{grid-template-columns:1fr}.time-book-actions>.button{width:100%}}

/* Clear navigation and a single settings hub. */
.time-command-card {
  top: 8px;
  gap: 12px;
  padding: 15px;
  border-radius: 18px;
  background: rgba(250, 252, 255, .97);
}
.time-title { align-items: flex-start; }
.time-title h2 { font-size: 22px; letter-spacing: -.02em; }
.time-title p { max-width: 720px; line-height: 1.45; }
.time-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(105px, 1fr));
  gap: 7px;
  padding: 5px;
  border: 1px solid #d6e2ed;
  border-radius: 13px;
  background: #edf3f8;
}
.time-tab {
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  white-space: normal;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  color: #3a536c;
  font-size: 11px;
}
.time-tab:hover { border-color: #b9cfdf; background: #fff; }
.time-tab.active {
  border-color: #126e9a;
  background: #126e9a;
  color: #fff;
  box-shadow: 0 5px 14px rgba(18, 110, 154, .2);
}
.time-filters {
  padding-top: 2px;
  align-items: center;
}
.time-context-switch {
  width: max-content;
  max-width: 100%;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  gap: 4px;
  border: 1px solid #cfdee9;
  border-radius: 12px;
  background: #edf4f8;
}
.time-context-switch :is(button,a) {
  min-height: 36px;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #466078;
  font-weight: 800;
  cursor: pointer;
}
.time-context-switch :is(button,a).active {
  background: #fff;
  color: #126e9a;
  box-shadow: 0 2px 8px rgba(38, 74, 104, .12);
}
.time-journal-view-switch { grid-template-columns: repeat(2, minmax(82px, 1fr)); }
.time-header-actions .time-journal-view-switch { flex: 0 1 auto; }
.time-settings-hub { display: grid; gap: 12px; min-width: 0; }
.time-settings-heading {
  padding: 17px 19px;
  border: 1px solid #c9dbe8;
  border-radius: 16px;
  background: linear-gradient(135deg, #fafdff, #edf7fb);
}
.time-settings-heading h2 { margin: 3px 0 4px; color: #173d5d; font-size: 21px; }
.time-settings-heading p { margin: 0; color: #5f7588; font-size: 12px; }
.time-settings-kicker { color: #087ca8; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.time-settings-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

/* Beschäftigungs- und Sollzeitverlauf: wiederverwendbare Modelle bleiben vom
   datierten Mitarbeitervertrag getrennt, werden aber in einem Ablauf gepflegt. */
.time-employment-layout { min-width: 0; display: grid; grid-template-columns: minmax(290px, .78fr) minmax(0, 1.42fr); gap: 12px; align-items: start; }
.time-employment-layout > * { min-width: 0; overflow: hidden; }
.time-employment-person { grid-column: 1; }
.time-employment-editor { grid-column: 2; grid-row: 1 / span 2; }
.time-employment-history { grid-column: 1; }
.time-employment-bulk { grid-column: 1 / -1; }
.time-employment-switch { padding: 0 13px 11px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 7px; align-items: end; }
.time-employment-switch .button { width: 40px; height: 38px; padding: 0; }
.time-employment-switch label { min-width: 0; display: grid; gap: 3px; }
.time-employment-switch label span { color: #65798a; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.time-employment-switch select { min-width: 0; width: 100%; height: 38px; padding: 6px 9px; border: 1px solid #bfd1df; border-radius: 8px; background: #fff; color: #183f5c; font-weight: 800; }
.time-selected-personnel-category { margin: -2px 13px 10px 60px; display: flex; align-items: center; gap: 6px; color: #527084; font-size: 9px; font-weight: 850; }
.time-selected-personnel-category i { width: 8px; height: 8px; border-radius: 50%; background: var(--personnel-color, #78849a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--personnel-color, #78849a) 16%, white); }
.time-employment-summary { padding: 0 13px 11px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.time-employment-summary article { min-width: 0; padding: 8px 9px; display: grid; gap: 2px; border: 1px solid #d5e1e9; border-radius: 8px; background: #f7fafc; }
.time-employment-summary span { color: #6b7f90; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.time-employment-summary strong { overflow: hidden; color: #183f5c; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.time-employment-warnings,
.time-employment-complete { margin: 0 13px 13px; padding: 8px 9px; display: flex; gap: 5px; flex-wrap: wrap; border-radius: 8px; font-size: 9px; font-weight: 800; }
.time-employment-warnings { border: 1px solid #edc06d; background: #fff5de; color: #7a5200; }
.time-employment-warnings span { padding-right: 6px; border-right: 1px solid #e2c989; }
.time-employment-complete { border: 1px solid #8bcdb0; background: #e8f7ef; color: #126341; }
.time-employment-form { min-width: 0; padding: 0 13px 13px; display: grid; gap: 10px; }
.time-employment-form fieldset { min-width: 0; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; border: 1px solid #cfdee8; border-radius: 10px; background: #f8fbfd; }
.time-employment-form fieldset:nth-of-type(2) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.time-employment-form legend { padding: 0 6px; color: #20506e; font-size: 10px; font-weight: 900; }
.time-employment-form .full { grid-column: 1 / -1; }
.time-employment-preview { min-width: 0; padding: 10px; display: grid; gap: 8px; border: 1px solid #bcd7e7; border-radius: 10px; background: #edf8fc; }
.time-employment-preview > div:first-child { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: #1d506e; font-size: 10px; }
.time-employment-week { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 5px; }
.time-employment-week > span { min-width: 0; padding: 6px 7px; display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; border: 1px solid #c5dce8; border-radius: 7px; background: #fff; color: #2e5269; font-size: 9px; }
.time-employment-week b { color: #0879a4; }
.time-employment-week small { grid-column: 1 / -1; color: #738696; font-size: 7px; }
.time-employment-save { min-width: 0; padding-top: 9px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid #d9e4eb; }
.time-employment-save p { max-width: 610px; margin: 0; color: #607789; font-size: 9px; line-height: 1.4; }
.time-employment-save .button { flex: 0 0 auto; }
.time-employment-timeline { padding: 0 13px 13px; display: grid; gap: 6px; }
.time-employment-timeline-item { min-width: 0; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 7px; }
.time-employment-timeline-item > i { position: relative; width: 8px; height: 8px; margin-top: 11px; border-radius: 50%; background: #8799a6; }
.time-employment-timeline-item > i::after { content: ""; position: absolute; top: 9px; left: 3px; width: 2px; height: calc(100% + 59px); background: #d6e1e8; }
.time-employment-timeline-item:last-child > i::after { display: none; }
.time-employment-timeline-item.current > i { background: #16865e; box-shadow: 0 0 0 3px #d8f0e6; }
.time-employment-timeline-item.future > i { background: #c17c00; box-shadow: 0 0 0 3px #ffefc9; }
.time-employment-timeline-item > div { min-width: 0; padding: 8px 9px; border: 1px solid #d5e0e8; border-radius: 8px; background: #fff; }
.time-employment-timeline-item header { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.time-employment-timeline-item strong { min-width: 0; color: #1e4662; font-size: 10px; overflow-wrap: anywhere; }
.time-employment-timeline-item p { margin: 3px 0 1px; color: #496579; font-size: 8px; line-height: 1.35; }
.time-employment-timeline-item small { color: #7b8b98; font-size: 7px; overflow-wrap: anywhere; }
.time-employment-bulk details > summary { padding: 12px 14px; cursor: pointer; }
.time-employment-bulk details > summary span { display: inline-grid; gap: 2px; }
.time-employment-bulk details > summary strong { color: #204965; font-size: 12px; }
.time-employment-bulk details > summary small { color: #6c8090; font-size: 9px; }
.time-employment-bulk .time-assignment-form { padding: 0 13px 13px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.time-employment-bulk .full { grid-column: 1 / -1; }
.time-traffic-not-employed { --traffic-color: #7a8790; --traffic-bg: #edf0f2; --traffic-border: #bbc4ca; }

/* Eine zentrale Mitarbeiterstruktur in allen Zeiterfassungsansichten. */
.time-personnel-overview,
.time-personnel-groups,
.time-badge-category-members { min-width: 0; display: grid; gap: 9px; }
.time-personnel-section,
.time-personnel-group { min-width: 0; overflow: hidden; border: 1px solid #c8d8e5; border-left: 5px solid var(--personnel-color, #78849a); border-radius: 10px; background: #fff; }
.time-personnel-section > summary,
.time-personnel-group > summary { min-width: 0; min-height: 42px; padding: 7px 10px; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 24px; align-items: center; gap: 8px; list-style: none; background: color-mix(in srgb, var(--personnel-color, #78849a) 8%, white); color: #183f5d; cursor: pointer; }
.time-personnel-section > summary::-webkit-details-marker,
.time-personnel-group > summary::-webkit-details-marker { display: none; }
.time-personnel-section > summary > span,
.time-personnel-group > summary > span { width: 8px; height: 8px; border-radius: 50%; background: var(--personnel-color, #78849a); }
.time-personnel-section > summary strong,
.time-personnel-group > summary strong { min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.time-personnel-section > summary small,
.time-personnel-group > summary small { color: #657b8d; font-size: 9px; white-space: nowrap; }
.time-personnel-section > summary b,
.time-personnel-group > summary b { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #bdd0de; border-radius: 7px; background: #fff; color: #315a75; transition: transform .16s ease; }
.time-personnel-section[open] > summary b,
.time-personnel-group[open] > summary b { transform: rotate(180deg); }
.time-personnel-section > .time-presence-grid { padding: 10px; border-top: 1px solid #d9e4eb; }
.time-personnel-members { min-width: 0; padding: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-top: 1px solid #d9e4eb; background: #fbfdfe; }
.time-personnel-members label { min-width: 0; padding: 7px 8px; display: flex; align-items: center; gap: 7px; border: 1px solid #d5e1e9; border-radius: 7px; background: #fff; }
.time-personnel-members input { flex: 0 0 auto; }
.time-personnel-members label span { min-width: 0; overflow: hidden; color: #29485f; font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.time-badge-category-members { padding: 9px; border-top: 1px solid #d9e4eb; background: #f8fbfd; }
.time-employee-picker > .time-personnel-groups { grid-column: 1 / -1; width: 100%; }

@media (max-width: 1120px) {
  .time-settings-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-employment-layout { grid-template-columns: 1fr; }
  .time-employment-person,
  .time-employment-editor,
  .time-employment-history,
  .time-employment-bulk { grid-column: 1; grid-row: auto; }
}
@media (max-width: 760px) {
  .time-employment-form fieldset,
  .time-employment-form fieldset:nth-of-type(2),
  .time-employment-bulk .time-assignment-form { grid-template-columns: 1fr; }
  .time-employment-form .full,
  .time-employment-bulk .full { grid-column: 1; }
  .time-employment-save { align-items: stretch; flex-direction: column; }
  .time-employment-save .button { width: 100%; }
  .time-personnel-members { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 430px) {
  .time-employment-summary { grid-template-columns: 1fr; }
  .time-selected-personnel-category { margin-left: 13px; }
  .time-personnel-section > summary,
  .time-personnel-group > summary { grid-template-columns: 8px minmax(0, 1fr) 24px; }
  .time-personnel-section > summary small,
  .time-personnel-group > summary small { display: none; }
  .time-personnel-members { grid-template-columns: 1fr; }
}
.time-settings-nav-item {
  min-width: 0;
  min-height: 72px;
  padding: 12px 14px;
  display: grid;
  align-content: center;
  gap: 3px;
  text-align: left;
  border: 1px solid #ccdae6;
  border-radius: 13px;
  background: #fff;
  color: #31506a;
  cursor: pointer;
}
.time-settings-nav-item strong { font-size: 13px; }
.time-settings-nav-item small { color: #687d8f; font-size: 10px; line-height: 1.35; }
.time-settings-nav-item:hover { border-color: #6ca7c4; background: #f5fbfd; }
.time-settings-nav-item.active {
  border-color: #0e789f;
  background: #e9f6fa;
  color: #0e5f80;
  box-shadow: inset 4px 0 #0e789f;
}
.time-settings-content,
.time-settings-content > * { min-width: 0; }
.time-settings-content { container: time-settings / inline-size; }
.time-settings-content .data-table { min-width: 720px; }
.time-settings-content .data-table td,
.time-settings-content .data-table th { vertical-align: middle; }
.time-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  border-top: 1px solid #e0e8ef;
  scrollbar-gutter: stable;
}
.time-corrections-table { min-width: 720px; }
.time-tracking-page .card-header,
.time-header-actions { flex-wrap: wrap; gap: 9px; }

/* Monatsjournal: anklickbare Tageskarten statt einer schwer lesbaren Breit-Tabelle. */
.time-month-calendar-wrap { min-width: 0; padding: 12px; background: #f5f8fb; }
.time-month-weekdays,
.time-month-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.time-month-weekdays { margin-bottom: 6px; }
.time-month-weekdays span { padding: 5px 7px; color: #60758a; font-size: 9px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.time-month-day {
  position: relative;
  min-width: 0;
  min-height: 128px;
  padding: 8px;
  display: grid;
  align-content: start;
  gap: 5px;
  overflow: hidden;
  border: 1px solid #cddae6;
  border-radius: 10px;
  background: #fff;
  color: #213c55;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(27, 59, 88, .04);
}
.time-month-day:hover,
.time-month-day:focus-visible { z-index: 1; border-color: #0d7da6; outline: 3px solid rgba(13, 125, 166, .14); outline-offset: 1px; transform: translateY(-1px); }
.time-month-day.empty { min-height: 0; border-style: dashed; background: #eef3f7; box-shadow: none; cursor: default; }
.time-month-day.weekend:not(.has-absence) { background: #f8fafc; }
.time-month-day.today { border-color: #176ea1; box-shadow: inset 0 0 0 2px #176ea1; }
.time-month-day.has-issues { border-bottom: 4px solid #d34a59; }
.time-month-day.has-absence::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--absence-color, #7460aa); }
.time-month-date { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding-left: 2px; }
.time-month-date strong { color: #173b59; font-size: 17px; line-height: 1; }
.time-month-date small { color: #738598; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.time-month-holiday { overflow: hidden; color: #a34724; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.time-month-absence { width: fit-content; max-width: 100%; padding: 3px 6px; overflow: hidden; border-radius: 999px; color: var(--absence-text, #fff); background: var(--absence-color, #7460aa); font-size: 8px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.time-month-times { display: flex; align-items: center; gap: 4px; min-width: 0; color: #244861; font-size: 10px; }
.time-month-times i { color: #8090a0; font-size: 8px; font-style: normal; }
.time-month-values { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 6px; color: #687b8d; font-size: 8px; }
.time-month-values span { min-width: 0; display: flex; justify-content: space-between; gap: 3px; }
.time-month-values b { color: #28445d; }
.time-month-values .positive b { color: #147653; }
.time-month-values .negative b { color: #b43143; }
.time-month-issue,
.time-month-ok { align-self: end; width: fit-content; padding: 2px 5px; border-radius: 999px; font-size: 8px; font-weight: 850; }
.time-month-issue { color: #a92d3b; background: #fff0f1; }
.time-month-ok { color: #177353; background: #e6f5ee; }

/* Tageseditor und Schnellstatus verwenden denselben zentralen Urlaubs-/Abwesenheitsdatensatz. */
.modal:has(> .time-day-editor) { width: min(980px, calc(100vw - 24px)); min-width: min(560px, calc(100vw - 24px)); height: min(820px, calc(100dvh - 28px)); max-height: calc(100dvh - 16px); padding: 0; display: flex; overflow: hidden; }
.time-day-editor { width: 100%; max-width: 100%; min-height: 0; flex: 1; display: flex; flex-direction: column; }
.time-day-scroll { min-height: 0; min-width: 0; flex: 1; padding: 18px; overflow: auto; scrollbar-gutter: stable; display: grid; grid-auto-rows: max-content; align-content: start; gap: 12px; }
.time-day-scroll > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 11px; border-bottom: 1px solid #d7e2eb; }
.time-day-editor .time-day-footer { flex: none; margin: 0; padding: 12px 18px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; border-top: 1px solid #cbdce8; background: #fff; }
.time-day-footer .button { min-height: 44px; font-size: 14px; }
.time-day-footer .modal-assistant-button { margin-right: auto; }
.time-day-note-action { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.time-day-note-action .button { min-height: 42px; font-size: 14px; }
.time-day-note-action [data-time-note-preview] { min-width: 0; max-width: 100%; flex: 1 1 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #526a7f; font-size: 13px; }
.time-day-note-dialog { width: min(540px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 20px; overflow: auto; border: 1px solid #bfd0e2; border-radius: 14px; color: #173b59; background: #fff; box-shadow: 0 18px 60px #173b5940; }
.time-day-note-dialog::backdrop { background: #17314d66; }
.time-day-note-dialog > * + * { margin-top: 12px; }
.time-day-note-dialog .form-field { display: grid; gap: 6px; font-size: 14px; }
.time-day-note-dialog textarea { width: 100%; min-height: 140px; box-sizing: border-box; padding: 10px; resize: vertical; border: 1px solid #bfd0e2; border-radius: 8px; color: #173b59; background: #fff; font: inherit; }
.time-day-note-dialog .time-day-note-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.time-day-note-buttons .button { min-height: 42px; font-size: 14px; }
.time-day-editor h2,
.time-day-editor h3,
.time-day-editor p { margin: 0; }
.time-day-editor h2 { color: #173b59; font-size: 22px; }
.time-day-editor h3 { color: #21445f; font-size: 13px; }
.time-day-editor p { color: #657a8d; font-size: 10px; line-height: 1.45; }
.time-day-editor .time-day-note-dialog > p { margin-top: 12px; font-size: 13px; }
.time-day-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.time-day-summary article { min-width: 0; padding: 9px 10px; display: grid; gap: 2px; border: 1px solid #d3e0e9; border-radius: 9px; background: #f8fbfd; }
.time-day-summary span { color: #6a7d8e; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.time-day-summary strong { color: #173b59; font-size: 16px; }
.time-day-status-form,
.time-day-event-form { min-width: 0; padding: 11px; display: grid; grid-template-columns: minmax(170px, 1fr) minmax(155px, .75fr) minmax(180px, 1fr) auto; gap: 9px; align-items: end; border: 1px solid #cbdce8; border-radius: 11px; background: #f7fbfd; }
.time-day-status-form > div,
.time-day-event-form > div { grid-column: 1 / -1; }
.time-day-status-form .form-field,
.time-day-event-form .form-field { min-width: 0; }
.time-choice-fieldset { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.time-choice-fieldset legend { margin-bottom: 7px; padding: 0; color: #526a7f; font-size: 9px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.time-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 7px; min-width: 0; }
.time-choice-button { position: relative; min-width: 0; cursor: pointer; }
.time-choice-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.time-choice-button span { min-width: 0; min-height: 50px; padding: 9px 10px; display: flex; align-items: center; gap: 8px; border: 1px solid #cbd9e5; border-left: 5px solid var(--time-choice-color, #6f8294); border-radius: 9px; background: #fff; color: #2b4961; font-size: 14px; line-height: 1.25; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.time-choice-button i { flex: 0 0 auto; width: 11px; height: 11px; border: 2px solid var(--time-choice-color, #6f8294); border-radius: 50%; background: #fff; }
.time-choice-button strong { min-width: 0; overflow-wrap: anywhere; }
.time-choice-button:hover span { border-color: var(--time-choice-color, #6f8294); background: #f8fbfd; }
.time-choice-button input:focus-visible + span { outline: 3px solid rgba(13, 125, 166, .18); outline-offset: 2px; }
.time-choice-button input:checked + span { border-color: var(--time-choice-color, #6f8294); background: #f3f8fb; box-shadow: inset 0 0 0 2px var(--time-choice-color, #6f8294); }
.time-choice-button input:checked + span i { background: var(--time-choice-color, #6f8294); box-shadow: inset 0 0 0 2px #fff; }
.time-choice-button input:disabled + span { cursor: default; opacity: .62; background: #f1f4f6; }
.time-status-choice-grid { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.time-event-choice-grid { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
.time-event-choice-grid .time-choice-button span { min-height: 64px; font-size: 18px; }
.time-event-choice-grid .time-choice-button strong { font-weight: 800; }
.time-day-events,
.time-day-issues { overflow: hidden; border: 1px solid #d3e0e9; border-radius: 11px; background: #fff; }
.time-day-events > div { padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #dce6ed; background: #f2f7fa; }
.time-day-events > div span { color: #63798a; font-size: 9px; }
.time-day-events ul,
.time-day-issues ul { margin: 0; padding: 0; list-style: none; }
.time-day-events li { min-width: 0; padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #edf1f4; }
.time-day-events li:first-child { border-top: 0; }
.time-day-events li > span { min-width: 0; display: grid; gap: 2px; }
.time-day-events li strong { color: #24455e; font-size: 11px; }
.time-day-events li small { color: #738598; font-size: 9px; }
.time-day-events li.empty { color: #6f8191; font-size: 10px; }
.time-event-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }
.time-day-events li:has(.time-event-actions) { flex-wrap: wrap; }
.time-booking-delete-dialog { width: min(500px, calc(100vw - 24px)); max-height: calc(100dvh - 28px); overflow: auto; padding: 20px; border: 1px solid #efc8cd; border-radius: 14px; background: #fff; color: #24455e; box-shadow: 0 16px 60px #17314d33; }
.time-booking-delete-dialog::backdrop { background: #17314d66; }
.time-booking-delete-dialog form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.time-booking-delete-dialog h2, .time-booking-delete-dialog p { margin: 0; }
.time-booking-delete-dialog p { line-height: 1.5; }
.time-booking-delete-dialog textarea { width: 100%; resize: vertical; min-width: 0; }
.time-delete-context { display: grid; gap: 3px; padding: 12px; background: #f2f7fa; border-radius: 9px; overflow-wrap: anywhere; }
.time-delete-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.time-delete-error { color: #b6223b; }
.time-day-issues { padding: 10px 12px; border-color: #efc8cd; background: #fff7f8; }
.time-day-issues li { margin: 4px 0 0 18px; color: #a12e3d; font-size: 10px; list-style: disc; }
.time-day-quick { width: min(620px, calc(100vw - 34px)); max-width: 100%; }
.time-day-quick h2 { margin: 3px 0; color: #173b59; }
.time-day-quick > p { margin: 0 0 12px; color: #657a8d; font-size: 11px; }
.time-day-quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 7px; }
.time-day-quick-actions button { min-width: 0; min-height: 54px; padding: 8px; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: center; border: 1px solid #cedbe5; border-left: 5px solid var(--quick-color, #6c7b8c); border-radius: 9px; background: #fff; color: #2b4961; text-align: left; cursor: pointer; }
.time-day-quick-actions button:hover,
.time-day-quick-actions button:focus-visible { border-color: var(--quick-color, #0d7da6); outline: 3px solid rgba(13, 125, 166, .13); }
.time-day-quick-actions button b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #fff; background: var(--quick-color, #6c7b8c); font-size: 10px; }
.time-day-quick-actions button span { min-width: 0; font-size: 10px; font-weight: 800; overflow-wrap: anywhere; }
.time-day-quick-actions button.clear { --quick-color: #8a98a5; }


/* Every time-tracking card owns a real content gutter. Headers, forms, lists and
   tables can therefore never sit against or underneath a clipped card edge. */
.time-tracking-page .card-header > *,
.time-tracking-page .form-field,
.time-tracking-page .form-field > *,
.time-tracking-page .time-person-cell,
.time-tracking-page .time-header-actions { min-width: 0; max-width: 100%; }
.time-tracking-page .form-field :is(input, select, textarea),
.time-tracking-page .form-grid :is(input, select, textarea) { width: 100%; max-width: 100%; box-sizing: border-box; }
.time-tracking-page .card-header :is(h2, h3, p),
.time-tracking-page .form-field > span,
.time-tracking-page .time-person-cell :is(strong, small) { overflow-wrap: anywhere; }
.time-person-cell strong,
.time-person-cell small { display: block; }
.time-checklist { padding: 13px; }
.time-audit-layout > .form-card { align-content: start; }

@container time-page (max-width: 980px) {
  .time-device-layout,
  .time-audit-layout { grid-template-columns: 1fr; }
  .time-command-card { position: static; }
}

@media (max-width: 1180px) {
  .time-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .time-command-card { top: 4px; }
  .time-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-settings-nav { grid-template-columns: 1fr; }
  .time-settings-nav-item { min-height: 58px; }
  .time-context-switch { width: 100%; }
  .time-month-weekdays { display: none; }
  .time-month-calendar { grid-template-columns: 1fr; }
  .time-month-day.empty { display: none; }
  .time-month-day { min-height: 0; grid-template-columns: 70px minmax(100px, .8fr) minmax(0, 1.2fr) auto; align-items: center; }
  .time-month-date { justify-content: flex-start; gap: 8px; }
  .time-month-holiday,
  .time-month-absence { grid-column: 2; }
  .time-month-times { grid-column: 3; grid-row: 1 / span 2; }
  .time-month-values { grid-column: 4; grid-row: 1 / span 2; min-width: 126px; }
  .time-month-issue,
  .time-month-ok { grid-column: 4; }
  .time-day-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-day-status-form,
  .time-day-event-form { grid-template-columns: 1fr; }
  .time-day-status-form > *,
  .time-day-event-form > * { grid-column: 1; }
  .time-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .time-tracking-page { padding-inline: 10px; }
  .time-tabs { grid-template-columns: 1fr 1fr; }
  .time-tab { min-height: 44px; padding-inline: 6px; }
  .time-settings-heading { padding: 14px; }
  .time-context-switch :is(button,a) { padding-inline: 7px; }
  .time-month-calendar-wrap { padding: 8px; }
  .time-month-day { grid-template-columns: 54px minmax(0, 1fr); gap: 4px 8px; }
  .time-month-holiday,
  .time-month-absence,
  .time-month-times,
  .time-month-values,
  .time-month-issue,
  .time-month-ok { grid-column: 2; grid-row: auto; }
  .time-month-values { min-width: 0; }
  .time-day-scroll { padding: 12px; }
  .time-day-scroll > header { flex-direction: column; }
  .time-day-editor .time-day-footer { padding: 10px 12px; }
  .time-day-footer .button { padding-inline: 10px; }
  .time-day-summary { grid-template-columns: 1fr 1fr; }
  .time-choice-grid { grid-template-columns: 1fr; }
}

@container (max-width: 680px) {
  .time-day-status-form, .time-day-event-form { grid-template-columns: minmax(0, 1fr); }
  .time-day-status-form > *, .time-day-event-form > * { grid-column: 1; }
  .time-event-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.time-device-guide { display: grid; gap: 12px; }
.time-terminal-stage-showcase { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.time-stage-preview { min-width: 0; padding: 9px; display: grid; gap: 6px; border: 1px solid #cedce7; border-radius: 10px; background: #fff; color: #244861; text-decoration: none; }
.stage-browser { display: flex; gap: 3px; }
.stage-browser i { width: 5px; height: 5px; border-radius: 50%; background: #8aa1b3; }
.stage-screen { min-height: 76px; padding: 8px; display: grid; align-content: center; justify-items: center; gap: 2px; border-radius: 7px; background: #eef5f8; text-align: center; }
.stage-screen b { color: #0c769f; }.stage-screen strong { font-size: 10px; }.stage-screen small { color: #6b8192; font-size: 8px; }
.stage-screen.employee img { width: 70px; height: 28px; object-fit: contain; }
.time-device-guide-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.time-meetone-readiness { min-width: 0; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #9fcbdc; border-left: 5px solid #0b7da6; border-radius: 11px; background: #edf8fb; }
.time-meetone-readiness > div { min-width: 0; display: grid; gap: 2px; }
.time-meetone-readiness span { color: #0a7098; font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.time-meetone-readiness strong { color: #173b59; overflow-wrap: anywhere; }
.time-meetone-readiness small { color: #60798b; }
@media (max-width: 760px) { .time-terminal-stage-showcase { grid-template-columns: 1fr 1fr; }.time-meetone-readiness { align-items: stretch; flex-direction: column; }.time-meetone-readiness .button { width: 100%; }.time-device-guide-actions > * { flex: 1 1 180px; } }

/* Zeiterfassung UI 8: eindeutiger Personenwechsel, echtes Tages-Jahresjournal,
   Mehrfach-PDF-Export und eine gemeinsame Kartenzuordnung. */
.time-employee-switcher {
  min-width: min(100%, 390px);
  display: grid;
  grid-template-columns: 38px minmax(210px, 1fr) 38px auto;
  gap: 6px;
  align-items: end;
}
.time-employee-switcher .time-filter { min-width: 0; }
.time-employee-switcher select { width: 100%; }
.time-person-arrow {
  width: 38px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #b8ccdd;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff, #eef5fa);
  color: #174d74;
  font: 900 18px/1 inherit;
  cursor: pointer;
}
.time-person-arrow:hover,
.time-person-arrow:focus-visible { border-color: #087da9; outline: 3px solid rgba(8, 125, 169, .14); }
.time-person-arrow:disabled { opacity: .45; cursor: default; }
.time-person-position { align-self: center; color: #6b7f91; font-size: 9px; font-weight: 850; white-space: nowrap; }

.time-year-journal { overflow: hidden; }
.time-year-grid { padding: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.time-year-month { min-width: 0; overflow: hidden; border: 1px solid #cbd9e5; border-radius: 11px; background: #fff; box-shadow: 0 3px 9px rgba(34, 65, 91, .05); }
.time-year-month > header { min-width: 0; padding: 9px 10px; display: flex; align-items: start; justify-content: space-between; gap: 9px; border-bottom: 1px solid #d9e4ec; background: #f3f8fb; }
.time-year-month h3 { margin: 0; color: #193f5e; font-size: 14px; text-transform: capitalize; }
.time-year-month header div { min-width: 0; }
.time-year-month header span { display: block; margin-top: 2px; overflow-wrap: anywhere; color: #657b8d; font-size: 8px; }
.time-year-month header > strong { flex: 0 0 auto; display: grid; gap: 1px; color: #154f73; font-size: 12px; text-align: right; }
.time-year-month header > strong small { color: #657b8d; font-size: 8px; font-weight: 700; }
.time-year-weekdays,
.time-year-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.time-year-weekdays { padding: 5px 6px 3px; gap: 3px; background: #f8fbfd; }
.time-year-weekdays span { color: #708394; font-size: 7px; font-weight: 900; text-align: center; text-transform: uppercase; }
.time-year-days { padding: 3px 6px 8px; gap: 3px; }
.time-year-day {
  position: relative;
  min-width: 0;
  min-height: 50px;
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 1px 3px;
  overflow: hidden;
  border: 1px solid #d6e0e8;
  border-radius: 6px;
  background: #fff;
  color: #29465d;
  text-align: left;
  cursor: pointer;
}
.time-year-day:hover,
.time-year-day:focus-visible { z-index: 1; border-color: #087da9; outline: 2px solid rgba(8, 125, 169, .18); }
.time-year-day.empty { min-height: 0; visibility: hidden; }
.time-year-day.weekend { background: #f6f8fa; }
.time-year-day.absence { border-left: 4px solid var(--absence-color, #7763a8); background: color-mix(in srgb, var(--absence-color, #7763a8) 9%, white); }
.time-year-day.holiday { background: #fff7e6; }
.time-year-day.issue { border-bottom: 3px solid #ce4051; }
.time-year-day > span { display: flex; align-items: baseline; gap: 2px; }
.time-year-day > span b { font-size: 10px; }
.time-year-day > span small { color: #80909d; font-size: 6px; font-weight: 800; text-transform: uppercase; }
.time-year-day > strong { grid-column: 1 / -1; align-self: end; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.time-year-day > em { overflow: hidden; font-size: 7px; font-style: normal; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.time-year-day > i { align-self: end; min-width: 15px; padding: 1px 2px; border-radius: 4px; background: #e7f1f7; color: #3f6177; font-size: 6px; font-style: normal; font-weight: 900; text-align: center; }
.time-year-day .positive { color: #157554; }
.time-year-day .negative { color: #b53042; }

.time-audit-layout { grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); align-items: start; }
.time-export-card { overflow: hidden; }
.time-export-form { min-width: 0; padding: 12px; display: grid; gap: 12px; }
.time-export-employees { min-width: 0; margin: 0; padding: 10px; border: 1px solid #cedde8; border-radius: 10px; }
.time-export-employees legend { padding: 0 6px; color: #284c65; font-size: 11px; font-weight: 900; }
.time-export-select-actions { margin-bottom: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.time-export-select-actions span { margin-left: auto; color: #5d7487; font-size: 9px; font-weight: 800; }
.time-export-employee-grid { max-height: 260px; padding: 3px; display: block; overflow: auto; }
.time-export-employee-grid label { min-width: 0; padding: 7px 8px; display: flex; align-items: center; gap: 7px; border: 1px solid #dae4eb; border-radius: 7px; background: #f9fbfc; }
.time-export-employee-grid input { flex: 0 0 auto; }
.time-export-employee-grid span { min-width: 0; overflow: hidden; color: #29485f; font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.time-export-periods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.time-export-periods article { min-width: 0; padding: 10px; display: grid; gap: 8px; border: 1px solid #cddce7; border-radius: 10px; background: #f5f9fc; }
.time-export-periods .button { width: 100%; white-space: normal; }
.time-export-secondary { padding-top: 9px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; border-top: 1px solid #d9e4eb; }
.time-export-secondary span { color: #687d8f; font-size: 9px; }

.time-badge-management { grid-column: 1 / -1; overflow: hidden; }
.time-badge-security-note { margin: 0 12px 10px; padding: 8px 10px; border-left: 4px solid #1480a8; border-radius: 7px; background: #eef8fc; color: #49697f; font-size: 9px; }
.time-badge-employee-list { padding: 0 12px 12px; display: grid; gap: 8px; }
.time-badge-employee { min-width: 0; display: grid; grid-template-columns: minmax(180px, .34fr) minmax(0, 1fr); border: 1px solid #cddce7; border-radius: 10px; background: #fff; overflow: hidden; }
.time-badge-employee > header { min-width: 0; padding: 10px; display: flex; align-items: flex-start; align-content: start; gap: 9px; background: #f2f7fa; border-right: 1px solid #d9e4eb; }
.time-badge-employee > header div { min-width: 0; }
.time-badge-employee h3 { margin: 0; overflow-wrap: anywhere; color: #1c4563; font-size: 12px; }
.time-badge-employee header span:not(.time-avatar) { display: block; margin-top: 2px; color: #6b7f90; font-size: 8px; }
.time-badge-rows { min-width: 0; padding: 7px; display: grid; gap: 6px; }
.time-badge-row-form { min-width: 0; display: grid; grid-template-columns: minmax(100px, .9fr) minmax(120px, 1.2fr) minmax(110px, 1fr) minmax(110px, .9fr) minmax(110px, .9fr) auto; gap: 7px; align-items: end; }
.time-badge-row-form.existing { padding-bottom: 6px; border-bottom: 1px solid #e1e8ed; }
.time-badge-row-form label { min-width: 0; display: grid; gap: 2px; }
.time-badge-row-form label > span { color: #60788a; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.time-badge-row-form input, .time-badge-row-form select { min-width: 0; width: 100%; height: 32px; box-sizing: border-box; padding: 5px 7px; border: 1px solid #c7d6e1; border-radius: 7px; }
.time-badge-employee > header { flex-wrap: wrap; }
.time-badge-employee > header [data-time-enroll-card] { max-width: 100%; white-space: normal; }
.time-enrollment-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; margin-bottom: 12px; }
.time-enrollment-fields label { min-width: 0; display: grid; gap: 5px; }
.time-enrollment-fields input, .time-enrollment-fields select { width: 100%; min-width: 0; box-sizing: border-box; }
[data-time-enrollment-status] { padding: 12px; border: 1px solid #c7d6e1; border-radius: 7px; overflow-wrap: anywhere; }
.time-badge-status { min-width: 0; height: 32px; display: flex; align-items: center; gap: 6px; }
.time-badge-status strong { overflow: hidden; color: #254961; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.time-badge-row-form .time-badge-active { height: 32px; padding: 0 7px; display: flex; flex-direction: row; align-items: center; gap: 5px; border: 1px solid #c7d6e1; border-radius: 7px; background: #f8fbfd; }
.time-badge-row-form .time-badge-active input { width: auto; height: auto; }
.time-badge-add summary { width: fit-content; padding: 5px 7px; border-radius: 6px; color: #146b91; font-size: 9px; font-weight: 850; cursor: pointer; }
.time-badge-add[open] summary { margin-bottom: 6px; background: #eef8fc; }

@media (max-width: 1320px) {
  .time-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-badge-employee { grid-template-columns: 1fr; }
  .time-badge-employee > header { border-right: 0; border-bottom: 1px solid #d9e4eb; }
  .time-badge-row-form { grid-template-columns: minmax(120px, .8fr) repeat(2, minmax(130px, 1fr)) repeat(2, minmax(105px, .7fr)); }
  .time-badge-row-form > :nth-last-child(-n+2) { justify-self: start; }
}
@media (max-width: 900px) {
  .time-year-grid { grid-template-columns: 1fr; }
  .time-audit-layout { grid-template-columns: 1fr; }
  .time-badge-row-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-badge-status { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
  .time-employee-switcher { width: 100%; min-width: 0; grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .time-person-position { grid-column: 1 / -1; justify-self: center; }
  .time-export-employee-grid,
  .time-export-periods { grid-template-columns: 1fr; }
  .time-year-grid { padding: 8px; }
  .time-year-days { gap: 2px; padding-inline: 4px; }
  .time-year-day { min-height: 46px; padding: 3px; }
  .time-badge-row-form { grid-template-columns: 1fr; }
  .time-badge-status { grid-column: 1; }
}

/* Zeiterfassung UI 9: einheitliches, barrierearmes Tages-Ampelsystem. */
.time-traffic-missing { --traffic-color: #a91530; --traffic-bg: #ffe2e7; --traffic-border: #df8190; }
.time-traffic-too-little { --traffic-color: #aa4208; --traffic-bg: #ffe6cf; --traffic-border: #e99c5a; }
.time-traffic-under { --traffic-color: #785400; --traffic-bg: #fff0b8; --traffic-border: #d4b13b; }
.time-traffic-ok { --traffic-color: #076b42; --traffic-bg: #dff5e9; --traffic-border: #70bd99; }
.time-traffic-over { --traffic-color: #0d568f; --traffic-bg: #dfefff; --traffic-border: #75add7; }
.time-traffic-absence { --traffic-color: #5d3e8d; --traffic-bg: #eee4fa; --traffic-border: #aa91cf; }
.time-traffic-holiday { --traffic-color: #8c4715; --traffic-bg: #ffe9c5; --traffic-border: #daa35b; }
.time-traffic-today { --traffic-color: #806000; --traffic-bg: #fff0ae; --traffic-border: #d1ad32; }
.time-traffic-planned { --traffic-color: #315f79; --traffic-bg: #deedf5; --traffic-border: #82adbf; }
.time-traffic-free { --traffic-color: #4c606d; --traffic-bg: #e7edf0; --traffic-border: #9eafb8; }

.time-traffic-legend {
  min-width: 0;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  border: 1px solid #d2dfe8;
  border-radius: 10px;
  background: #fff;
}
.time-traffic-badge {
  width: fit-content;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--traffic-border, #c3cdd3);
  border-radius: 999px;
  background: var(--traffic-bg, #f1f4f6);
  color: var(--traffic-color, #596c79);
  font-size: 8px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}
.time-traffic-badge > i {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--traffic-color, #596c79);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--traffic-color, #596c79) 18%, white);
}
.time-month-day[class*="time-traffic-"] {
  border-color: var(--traffic-border);
  border-left: 6px solid var(--traffic-color);
  background: var(--traffic-bg);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--traffic-color) 12%, transparent);
}
.time-month-day[class*="time-traffic-"] .time-month-date strong { color: var(--traffic-color); }
.time-month-day.time-traffic-planned { background: repeating-linear-gradient(135deg, #deedf5 0 12px, #eaf4f8 12px 24px); }
.time-month-day.time-traffic-free { background: repeating-linear-gradient(135deg, #e7edf0 0 12px, #f0f3f5 12px 24px); }
.time-month-day[class*="time-traffic-"]:hover,
.time-month-day[class*="time-traffic-"]:focus-visible { border-color: var(--traffic-color); box-shadow: 0 5px 14px color-mix(in srgb, var(--traffic-color) 22%, transparent); }
.time-month-day.has-absence::before { display: none; }
.time-month-day .time-traffic-badge { align-self: end; }
.time-month-day .time-month-issue { margin-left: 2px; }
.time-traffic-row > td:first-child { box-shadow: inset 5px 0 0 var(--traffic-color); }
.time-traffic-row > td { background: color-mix(in srgb, var(--traffic-bg) 48%, white); }
.time-traffic-row:hover > td { background: var(--traffic-bg); }
.time-traffic-row .time-issues { margin-top: 5px; }
.time-year-day[class*="time-traffic-"] {
  border-left: 4px solid var(--traffic-color);
  background: var(--traffic-bg);
}
.time-year-day[class*="time-traffic-"] > i {
  background: var(--traffic-color);
  color: #fff;
}
.time-year-day.time-traffic-under > i,
.time-year-day.time-traffic-holiday > i { color: #172531; }
.time-day-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .time-traffic-legend { gap: 5px; }
  .time-month-day .time-traffic-badge,
  .time-month-day .time-month-issue { grid-column: 4; }
}
@media (max-width: 430px) {
  .time-traffic-legend { padding: 7px; }
  .time-traffic-badge { white-space: normal; }
  .time-month-day .time-traffic-badge,
  .time-month-day .time-month-issue { grid-column: 2; }
}
@media (forced-colors: active) {
  .time-traffic-badge,
  .time-month-day[class*="time-traffic-"],
  .time-year-day[class*="time-traffic-"] { border-color: CanvasText; }
  .time-traffic-badge > i { forced-color-adjust: none; }
}

.time-modal-person-context {
  margin: 0 0 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #c9dbe7;
  border-left: 4px solid #087da9;
  border-radius: 9px;
  background: #f2f9fc;
}
.time-modal-person-context strong { color: #173b59; }
.time-modal-person-context span { color: #63788b; font-size: 10px; font-weight: 700; }

/* Zeiterfassung UI 10: Verwaltungsübersicht statt einzelner Stempeluhraktion. */
.time-today-control {
  min-width: 0;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px 18px;
  align-items: end;
  overflow: hidden;
}
.time-today-control > div { min-width: 0; }
.time-today-control h2 { margin: 2px 0 3px; color: #173b59; font-size: 18px; }
.time-today-control p { max-width: 760px; margin: 0; color: #63788b; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.time-today-control nav { min-width: 0; display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.time-today-toolbar { min-width: 0; display: grid; justify-items: end; gap: 7px; }
.time-today-view-switch { min-width: 0; padding: 3px; display: inline-flex; gap: 3px; border: 1px solid #c6d7e4; border-radius: 10px; background: #edf3f7; }
.time-today-view-button { min-height: 31px; padding: 5px 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 7px; background: transparent; color: #36566d; font: 800 10px/1.2 inherit; cursor: pointer; }
.time-today-view-button span { font-size: 14px; line-height: 1; }
.time-today-view-button:hover,
.time-today-view-button:focus-visible { outline: 2px solid rgba(8, 125, 169, .18); }
.time-today-view-button.active { background: #fff; color: #076b92; box-shadow: 0 1px 4px rgba(31, 69, 96, .16); }
.time-today-filter {
  min-height: 36px;
  padding: 6px 8px 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #bfd0df;
  border-radius: 9px;
  background: #fff;
  color: #315069;
  font: 800 10px/1.2 inherit;
  cursor: pointer;
}
.time-today-filter strong { min-width: 23px; padding: 3px 6px; border-radius: 999px; background: #e9f1f6; color: #1b5579; text-align: center; }
.time-today-filter:hover,
.time-today-filter:focus-visible { border-color: #087da9; outline: 3px solid rgba(8, 125, 169, .13); }
.time-today-filter.active { border-color: #087da9; background: #087da9; color: #fff; box-shadow: 0 3px 8px rgba(8, 125, 169, .18); }
.time-today-filter.active strong { background: #fff; color: #075f83; }
.time-presence-card[class*="time-traffic-"] { border-left: 5px solid var(--traffic-color); }
.time-presence-card header { align-items: center; }
.time-presence-card header > .time-traffic-badge { flex: 0 0 auto; }
.time-presence-card header div small { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.time-live-state { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; }
.time-live-state > i { width: 7px !important; height: 7px !important; box-shadow: none !important; }
.time-live-state.working > i { background: #168a62 !important; }
.time-live-state.break > i { background: #d08700 !important; }
.time-live-state.off > i { background: #8c9aa6 !important; }
.time-presence-values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.time-presence-values .negative { color: #b4233a; }
.time-presence-values .positive { color: #087447; }
.time-presence-absence { padding: 7px 9px; border-radius: 8px; background: var(--traffic-bg, #f2edfa); color: var(--traffic-color, #654a91); font-size: 9px; font-weight: 850; overflow-wrap: anywhere; }
.time-presence-card footer { margin-top: auto; padding-top: 9px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; border-top: 1px solid #dce6ed; }
.time-presence-card footer .button { min-height: 34px; }
.time-overview-list-wrap { min-width: 0; overflow: auto; }
.time-overview-list { min-width: 940px; }
.time-overview-list th,
.time-overview-list td { white-space: nowrap; }
.time-overview-list tbody tr { border-left: 5px solid var(--traffic-color, #8796a3); }
.time-list-person { min-width: 190px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; }
.time-list-person > span:last-child { min-width: 0; display: grid; gap: 3px; }
.time-list-person strong { overflow: hidden; text-overflow: ellipsis; }
.time-list-person small { color: #667d8e; font-size: 9px; }
.time-list-actions { display: flex; gap: 5px; }
.time-status-board { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 10px; align-items: start; }
.time-status-lane { min-width: 0; padding: 0; overflow: hidden; }
.time-status-lane > header { min-height: 42px; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #d9e4eb; background: #f3f7fa; color: #244860; }
.time-status-lane > header span { min-width: 25px; padding: 3px 7px; border-radius: 999px; background: #fff; text-align: center; }
.time-status-lane-present > header { border-top: 4px solid #168a62; }
.time-status-lane-break > header { border-top: 4px solid #d08700; }
.time-status-lane-action > header { border-top: 4px solid #c9364c; }
.time-status-lane-off > header { border-top: 4px solid #8c9aa6; }
.time-status-lane > div { min-width: 0; padding: 7px; display: grid; gap: 6px; }
.time-status-lane article { min-width: 0; padding: 7px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 7px; border: 1px solid #d9e4eb; border-radius: 8px; background: #fff; }
.time-status-lane article > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.time-status-lane article strong { min-width: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.time-status-lane article small { min-width: 0; overflow: hidden; color: #6b7e8d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.time-status-lane article .button { min-height: 29px; padding: 4px 7px; }
.time-status-empty { margin: 4px; padding: 12px; color: #748695; font-size: 9px; text-align: center; }
.time-pdf-preview-dialog { width: min(1180px, calc(100vw - 34px)); min-width: 0; height: min(88vh, 900px); display: grid; grid-template-rows: auto minmax(320px, 1fr) auto; gap: 10px; }
.time-pdf-preview-heading { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.time-pdf-preview-heading h2 { margin: 0; }
.time-pdf-preview-heading p { margin: 3px 0 0; color: #63788b; font-size: 10px; }
.time-pdf-preview-canvas { width: 100%; height: 100%; min-height: 320px; overflow: hidden; border: 1px solid #c8d7e2; border-radius: 9px; background: #eef2f5; padding: 6px; }

@media (max-width: 1050px) {
  .time-today-control { grid-template-columns: 1fr; }
  .time-today-toolbar { justify-items: start; }
  .time-today-control nav { justify-content: flex-start; }
  .time-status-board { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 650px) {
  .time-today-control { padding: 12px; }
  .time-today-control nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-today-view-switch { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .time-today-view-button { min-width: 0; }
  .time-status-board { grid-template-columns: 1fr; }
  .time-today-filter { justify-content: space-between; }
  .time-presence-card header > .time-traffic-badge { flex-basis: 100%; }
  .time-presence-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-presence-card footer .button { flex: 1 1 130px; }
}
@media (max-width: 390px) {
  .time-today-control nav { grid-template-columns: 1fr; }
  .time-today-view-button { padding-inline: 5px; font-size: 9px; }
  .time-presence-values { grid-template-columns: 1fr; }
}

/* Shared card editor: full identifiers, compact rows and one save action. */
.time-badge-management[data-badge-editor] { overflow: visible; }
[data-badge-editor] .time-badge-row-form { grid-template-columns: minmax(100px, .9fr) minmax(120px, 1.2fr) minmax(110px, 1fr) minmax(110px, .9fr) minmax(110px, .9fr) auto auto; }
[data-badge-editor] .time-badge-employee { grid-template-columns: minmax(215px, .3fr) minmax(0, 1fr); }
[data-badge-editor] .time-badge-employee > header { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 5px 8px; padding: 9px; }
[data-badge-editor] .time-avatar { width: 28px; height: 28px; font-size: 10px; }
[data-badge-editor] .time-badge-person { min-width: 0; }
[data-badge-editor] .time-badge-employee h3 { font-size: 13px; line-height: 1.3; }
[data-badge-editor] .time-badge-employee header .time-badge-number { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; font-weight: 700; color: #174966; overflow-wrap: anywhere; white-space: normal; text-overflow: clip; }
[data-badge-editor] .time-badge-number small { font-size: 10px; color: #936000; font-weight: 500; }
[data-badge-editor] .time-badge-employee header .time-badge-none { font-size: 11px; }
[data-badge-editor] [data-time-enroll-card] { grid-column: 2; justify-self: start; min-height: 26px; padding: 3px 8px; font-size: 10px; }
[data-badge-editor] .time-badge-rows { align-content: start; padding: 9px; gap: 4px; }
[data-badge-editor] .time-badge-row-form label > span { font-size: 9px; line-height: 1.3; text-transform: none; }
[data-badge-editor] .time-badge-row-form input, [data-badge-editor] .time-badge-row-form select { font-size: 12px; height: 34px; }
[data-badge-editor] .time-badge-row-form input[type="checkbox"] { height: 16px; width: 16px; }
[data-badge-editor] .time-badge-row-form .time-badge-active { height: 34px; }
[data-badge-editor] .time-badge-delete { min-height: 34px; align-self: end; white-space: nowrap; }
[data-badge-editor] .time-badge-add summary { padding: 3px 5px; font-size: 10px; }
[data-badge-editor] .time-badge-add[open] summary { margin-bottom: 5px; }
[data-badge-editor] .time-badge-row-form[data-dirty="true"] { box-shadow: inset 3px 0 #d6a11a; padding-left: 7px; }
.time-badge-save-bar { position: sticky; bottom: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid #c7d6e1; border-radius: 0 0 12px 12px; background: #fff; box-shadow: 0 -3px 12px #173b5910; }
.time-badge-save-bar > div { min-width: 0; }
.time-badge-save-bar [data-badges-dirty-count] { font-size: 12px; font-weight: 700; color: #315069; }
.time-badge-save-bar [data-badges-save-error] { margin: 3px 0 0; color: #9d263c; font-size: 12px; overflow-wrap: anywhere; }
.time-badge-save-bar [data-badges-save-error]:empty { display: none; }
[data-badge-editor][data-dirty="false"] [data-badges-save-error] { color: #147548; }
.time-badge-save-actions { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 1350px) {
  [data-badge-editor] .time-badge-employee { grid-template-columns: minmax(190px, .32fr) minmax(0, 1fr); }
  [data-badge-editor] .time-badge-row-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  [data-badge-editor] .time-badge-employee { grid-template-columns: minmax(0, 1fr); }
  [data-badge-editor] .time-badge-employee > header { border-right: 0; border-bottom: 1px solid #d9e4eb; }
  [data-badge-editor] .time-badge-row-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-badge-save-bar { flex-wrap: wrap; padding: 10px; }
  .time-badge-save-actions { width: 100%; justify-content: flex-end; }
}
@media (max-width: 420px) {
  [data-badge-editor] .time-badge-employee-list { padding: 0 6px 8px; }
  [data-badge-editor] .time-badge-category-members { padding: 5px; }
  [data-badge-editor] .time-badge-row-form { grid-template-columns: minmax(0, 1fr); }
}
.time-traffic-before-recording { --time-traffic-color: #64748b; --time-traffic-bg: #f0f4f8; }
.time-recording-history { padding: 12px; border: 1px solid #ccd9e7; border-radius: 10px; background: #f4f8fc; color: #36526b; margin: 12px 0; }

/* Shared day drafts and the running time account. */
.time-day-booking-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; grid-column:1/-1; }
.time-day-booking-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:end; }
.time-day-event-form .time-day-draft-status { grid-column:1/-1; margin:0; color:#315474; font-weight:600; }
.time-day-events li[data-time-draft-row] { border:1px dashed #247a55; background:#f1fbf5; }
.time-day-events li.time-event-replaced > span { opacity:.6; text-decoration:line-through; }
.time-month-account { display:flex; justify-content:space-between; gap:4px; font-size:11px; border-top:1px solid #dce5ed; padding-top:4px; }
.time-day-summary { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
@media(max-width:420px){.time-day-booking-grid{grid-template-columns:1fr;}}

/* Native tab links keep the existing control layout. */
a.time-tab,.time-context-switch a,a.time-settings-nav-item,a.time-today-view-button{text-decoration:none;font-family:inherit}
a.time-tab,.time-context-switch a{text-align:center}