/* GENERIERT aus app.quelle.css - Aenderungen dort machen und css_bauen.py laufen lassen. */


:root {
  --ground:      #F2F5F8;
  --surface:     #FFFFFF;
  --surface-2:   #F7F9FB;
  --line:        #DCE3EB;
  --line-soft:   #E9EEF3;
  --ink:         #0F1720;
  --ink-2:       #37455A;
  --muted:       #606E85;
  --accent:      #2A5FD4;
  --accent-soft: #E7EEFC;
  --ok:          #147951;
  --ok-soft:     #E1F3EB;
  --warn:        #995C0C;
  --warn-soft:   #FBEEDC;

  --teil:        #816B10;
  --teil-soft:   #FBF4D2;
  --crit:        #B93E36;
  --crit-soft:   #FAE7E5;
  --idle:        #5E6B7E;
  --idle-soft:   #EBEFF4;
  --done:        #0F7285;
  --done-soft:   #DEF0F4;
  --wait:        #6B4FC4;
  --wait-soft:   #EDE8FA;
  --shadow:      0 1px 2px rgba(15,23,32,.05), 0 8px 24px -12px rgba(15,23,32,.18);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 14px;
  --r-s: 9px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0B111A; --surface:#141D29; --surface-2:#1A2531;
    --line:#26323F; --line-soft:#1F2A36;
    --ink:#E6EDF6; --ink-2:#B6C4D4; --muted:#8393A6;
    --accent:#6098FF; --accent-soft:#17263F;
    --ok:#4FC48D; --ok-soft:#122C22;
    --warn:#E0A455; --warn-soft:#2E2314;
    --teil:#D8C25A; --teil-soft:#2C2A14;
    --crit:#F0776C; --crit-soft:#331C1B;
    --idle:#8B9AAD; --idle-soft:#1D2733;
    --done:#5CC2D4; --done-soft:#0D2A31;
    --wait:#A78BFA; --wait-soft:#241C3A;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground:#0B111A; --surface:#141D29; --surface-2:#1A2531;
  --line:#26323F; --line-soft:#1F2A36;
  --ink:#E6EDF6; --ink-2:#B6C4D4; --muted:#8393A6;
  --accent:#6098FF; --accent-soft:#17263F;
  --ok:#4FC48D; --ok-soft:#122C22;
  --warn:#E0A455; --warn-soft:#2E2314;
  --crit:#F0776C; --crit-soft:#331C1B;
  --idle:#8B9AAD; --idle-soft:#1D2733;
  --done:#5CC2D4; --done-soft:#0D2A31;
    --wait:#A78BFA; --wait-soft:#241C3A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
.num { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: 11.5px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}

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

.app { display: grid; grid-template-columns: 216px 1fr; min-height: 100vh; }

.rail {
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 22px;
  padding: 18px 12px; position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 9px; padding: 2px 8px 0; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px; background: var(--accent);
  display: grid; place-items: center; flex: none;
}
.brand-name { font-weight: 700; letter-spacing: -.01em; font-size: 15px; }
.brand-sub { font-size: 11px; color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-label { padding: 10px 10px 5px; }
.nav-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border-radius: var(--r-s); color: var(--ink-2);
  font-size: 13.5px; font-weight: 500; width: 100%;
  transition: background .12s, color .12s;
}
.nav-item svg { flex: none; opacity: .78; }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.nav-item.is-active svg { opacity: 1; }
.nav-badge {
  margin-left: auto; font-size: 11px; background: var(--crit); color: #fff;
  border-radius: 20px; padding: 1px 6px; font-weight: 650;
}

.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.who { display: flex; align-items: center; gap: 9px; padding: 8px 10px;
       border-radius: var(--r-s); background: var(--surface-2); }
.who-name { font-size: 13px; font-weight: 650; line-height: 1.25; }
.who-role { font-size: 11px; color: var(--muted); }
.avatar {
  width: 27px; height: 27px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 650; flex: none;
}

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 0 26px; height: 58px;
  border-bottom: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; z-index: 5;
}
.topbar h1 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -.015em; }
.topbar-date { font-size: 12.5px; color: var(--muted); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--surface); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--muted); }
.theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-light { display: none; }
  :root:not([data-theme="light"]) .theme-icon-dark { display: block; }
}

.live-dot {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--ok); background: var(--ok-soft);
  border-radius: 20px; padding: 5px 12px 5px 10px; font-weight: 650;
}
.live-dot i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
              display: block; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.screen { padding: 22px 26px 60px; }
.stack { display: flex; flex-direction: column; gap: 22px; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden;
}
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap;
}
.card-head h2 { font-size: 14px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.card-head .spacer { margin-left: auto; }
.empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 13px; }

.link-btn {
  font-size: 12px; color: var(--accent); background: none;
  border: 0; cursor: pointer; padding: 4px 8px; font-weight: 600;
  border-radius: var(--r-s); font-family: inherit;
}
.link-btn:hover { background: var(--accent-soft); }

.btn {
  font-family: inherit; font-size: 13px; font-weight: 600;
  height: 38px; padding: 0 15px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, border-color .15s, color .15s,
              box-shadow .15s, transform .06s;
}
.btn:hover { background: var(--surface-2); border-color: var(--muted); color: var(--ink); }
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 6px 14px -7px color-mix(in srgb, var(--accent) 65%, transparent);
}
.btn-primary:hover { filter: brightness(1.07); background: var(--accent); color: #fff; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px 15px 12px; display: flex; flex-direction: column; gap: 7px;
  box-shadow: var(--shadow);
}
.tile-val { font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 750;
            line-height: 1; letter-spacing: -.02em; }
.tile-row { display: flex; align-items: flex-end; gap: 9px; }
.tile-delta { font-size: 11.5px; padding-bottom: 3px; font-weight: 500; }
.t-ok { color: var(--ok); } .t-warn { color: var(--warn); }
.t-crit { color: var(--crit); } .t-idle { color: var(--idle); }
.meter { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.meter.m-ok > i { background: var(--ok); }
.meter.m-warn > i { background: var(--warn); }
.meter.m-crit > i { background: var(--crit); }

.venue { border-bottom: 1px solid var(--line-soft); }
.venue:last-child { border-bottom: 0; }
.venue-head { display: flex; align-items: center; gap: 9px; padding: 9px 16px;
              background: var(--surface-2); flex-wrap: wrap; }
.venue-name { font-size: 13.5px; font-weight: 700; }
.chip { font-size: 11px; font-weight: 600; padding: 2.5px 9px; border-radius: 12px;
        background: var(--idle-soft); color: var(--idle); }
.chip-dot { display: inline-block; width: 8px; height: 8px; border-radius: 3px;
            margin-right: 6px; vertical-align: -1px; }
.venue-count { margin-left: auto; font-size: 12px; font-weight: 600;
               font-variant-numeric: tabular-nums; color: var(--muted); }

.row {

  display: grid; grid-template-columns: 3px 1fr 100px 136px 192px 34px;
  align-items: center; gap: 12px; padding: 0 16px 0 0;
  min-height: 42px; border-top: 1px solid var(--line-soft);
}

.statuscell { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.ackdot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 750; line-height: 1;
  cursor: help;
}
.ackdot.ok   { background: var(--ok-soft);   color: var(--ok); }
.ackdot.open { background: var(--warn-soft); color: var(--warn); }
.row:first-of-type { border-top: 0; }
.stripe { align-self: stretch; }
.s-ok .stripe { background: var(--ok); }
.s-warn .stripe { background: var(--warn); }
.s-crit .stripe { background: var(--crit); }
.s-idle .stripe { background: var(--line); }

.who-cell { display: flex; align-items: center; gap: 9px; padding-left: 13px; min-width: 0; }
.who-cell .avatar { width: 24px; height: 24px; font-size: 10px;
                    background: var(--idle-soft); color: var(--ink-2); }
.emp-name { font-size: 13.5px; font-weight: 600; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; }
.emp-sub { font-size: 11px; color: var(--muted); }
.time-cell { font-variant-numeric: tabular-nums; font-size: 12.5px;
             color: var(--ink-2); font-weight: 500; }
.checkin-cell { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }

.pill {
  font-size: 11px; font-weight: 650; padding: 3px 10px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 5px; justify-self: end;
  white-space: nowrap;
}
.p-ok { background: var(--ok-soft); color: var(--ok); }
.p-warn { background: var(--warn-soft); color: var(--warn); }
.p-crit { background: var(--crit-soft); color: var(--crit); }
.p-idle { background: var(--idle-soft); color: var(--idle); }
.p-done { background: var(--done-soft); color: var(--done); }
.s-done .stripe { background: var(--accent); }

.week-scroll { overflow-x: auto; }
.week { display: grid; grid-template-columns: repeat(7, minmax(126px, 1fr)); min-width: 880px; }
.day { border-right: 1px solid var(--line-soft); min-height: 168px; }
.day:last-child { border-right: 0; }
.day-head { padding: 8px 10px 7px; border-bottom: 1px solid var(--line-soft);
            display: flex; align-items: baseline; gap: 6px; }
.day-name { font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
            color: var(--muted); font-weight: 650; }
.day-num { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; }
.day-cnt { margin-left: auto; font-size: 11px; color: var(--muted);
           font-weight: 600; font-variant-numeric: tabular-nums; }
.day.today { background: var(--accent-soft); }
.day.today .day-num, .day.today .day-name { color: var(--accent); }
.day.weekend { background: var(--surface-2); }
.day-body { padding: 7px 7px 10px; display: flex; flex-direction: column; gap: 4px; }
.ev { border-left: 3px solid var(--idle); background: var(--surface-2);
      border-radius: 7px; padding: 5px 8px; display: flex; flex-direction: column; gap: 1px; }
.day.today .ev { background: var(--surface); }
.ev-t { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted); font-weight: 500; }
.ev-n { font-size: 12px; font-weight: 600; line-height: 1.25; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 16px;
          border-top: 1px solid var(--line-soft); }
.lg { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
      color: var(--muted); font-weight: 500; }
.lg i { width: 9px; height: 9px; border-radius: 2px; display: block; }

.tbl-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 720px; }
th {
  text-align: left; font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted); font-weight: 650; padding: 9px 16px;
  border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2);
}
td { padding: 9px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.n { font-variant-numeric: tabular-nums; }
.bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden;
       width: 74px; display: inline-block; vertical-align: middle; }
.bar > i { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.bar.mid > i { background: var(--warn); }
.bar.low > i { background: var(--crit); }
tr.clickable { cursor: pointer; }

.gruppe-waehlen { display: inline-flex; align-items: center; gap: 6px;
                  margin-left: 8px; vertical-align: middle; }
.gruppe-waehlen select {
  font-family: var(--sans); font-size: 11.5px; padding: 2px 5px;
  border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-2); max-width: 118px;
}
.gruppe-waehlen select:hover { border-color: var(--accent); color: var(--ink); }
.gruppe-waehlen select:focus { border-color: var(--accent); outline: none;
                               box-shadow: 0 0 0 3px var(--accent-soft); }

.req { display: flex; align-items: center; gap: 13px; padding: 12px 16px;
       border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.req:last-child { border-bottom: 0; }
.req-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.req-title { font-size: 13.5px; font-weight: 650; }
.req-meta { font-size: 12px; color: var(--muted); }
.req-actions { margin-left: auto; display: flex; gap: 7px; flex: none; align-items: center; }

.pf-grid { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; }
.pf-head { display: flex; gap: 13px; align-items: center; padding: 16px; }
.pf-head .avatar { width: 50px; height: 50px; font-size: 17px; }
.pf-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 7px 12px;
      padding: 14px 16px; border-top: 1px solid var(--line-soft); margin: 0; }
.kv dt { font-size: 11px; letter-spacing: .02em; text-transform: uppercase;
         color: var(--muted); font-weight: 650; padding-top: 2px; }
.kv dd { margin: 0; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.kv dd .chip { display: inline-block; margin-bottom: 3px; }

.stack > .banner { position: sticky; top: 10px; z-index: 30;
                   box-shadow: 0 8px 20px -12px rgb(0 0 0 / .35); }
.banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; border-radius: var(--r-s);
  background: var(--warn-soft); color: var(--warn);
  font-size: 12.5px; font-weight: 500; line-height: 1.5;
}
.banner b { font-weight: 700; }

.banner-zu {
  margin: -11px -14px -11px auto; padding: 0 12px;
  min-width: 44px; align-self: stretch;
  border: 0; background: none; color: inherit;
  font-size: 15px; line-height: 1; cursor: pointer;
  opacity: .55; border-radius: var(--r-s);
}
.banner-zu:hover { opacity: 1; background: rgb(0 0 0 / .07); }
.banner-zu:focus-visible { opacity: 1; outline: 2px solid currentColor;
                           outline-offset: -2px; }
.banner.b-ok  { background: var(--ok-soft);   color: var(--ok); }
.banner.b-err { background: var(--crit-soft); color: var(--crit); }

.banner.b-warn { background: var(--warn-soft); color: var(--warn); }

.rmenu { position: relative; justify-self: center; }
.rmenu summary {
  list-style: none; cursor: pointer; width: 26px; height: 26px;
  border-radius: 7px; display: grid; place-items: center;
  color: var(--muted); border: 1px solid transparent;
  font-weight: 700; font-size: 15px; line-height: 1; user-select: none;
}
.rmenu summary::-webkit-details-marker { display: none; }
.rmenu[open] summary, .rmenu summary:hover {
  background: var(--surface-2); border-color: var(--line); color: var(--ink);
}
.rmenu-pop {
  position: absolute; right: 0; top: 30px; z-index: 30;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow);
  padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 250px;
}
.rmenu-pop form { margin: 0; }
.rmenu-btn {
  font-family: inherit; font-size: 12.5px; font-weight: 600; text-align: left;
  background: none; border: 0; border-radius: 7px; padding: 8px 10px;
  cursor: pointer; color: var(--ink-2); width: 100%;
}
.rmenu-btn:hover { background: var(--surface-2); color: var(--ink); }
.rmenu-btn.danger:hover { background: var(--crit-soft); color: var(--crit); }

.btn-klein { padding: 5px 11px; font-size: 12px; }
.msg-grid { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }

.msg-grid.einspaltig { grid-template-columns: 1fr; }
.compose { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.compose .field label:first-child { font-size: 11px; letter-spacing: .02em;
  text-transform: uppercase; color: var(--muted); font-weight: 650; }

.picker { display: flex; flex-wrap: wrap; gap: 6px; }
.picker-scroll { max-height: 172px; overflow-y: auto; padding: 2px; }
.pick {
  position: relative; font-size: 12.5px; font-weight: 550;
  padding: 6px 11px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: background .12s, border-color .12s, color .12s;
}
.pick:hover { background: var(--surface-2); border-color: var(--muted); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:has(input:checked) {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent); font-weight: 650;
}
.pick-n {
  font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 650;
  background: var(--idle-soft); color: var(--idle);
  border-radius: 20px; padding: 1px 7px;
}
.pick:has(input:checked) .pick-n { background: var(--accent); color: #fff; }

.people summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent);
  padding: 3px 0; user-select: none;
}

.klapp-reihe { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: flex-start; }
.klapp-reihe > .field { flex: 0 0 auto; }
.klapp-reihe > .field:has(> details.people[open]) { flex: 1 0 100%; }
.people-filter { width: 100%; margin: 6px 0; }
.people-list {
  max-height: 250px; overflow-y: auto;
  border: 1px solid var(--line-soft); border-radius: var(--r-s);
}
.person {
  display: flex; align-items: center; gap: 9px; padding: 6px 11px;
  font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--line-soft);
}
.person:last-child { border-bottom: 0; }
.person:hover { background: var(--surface-2); }
.person input { accent-color: var(--accent); width: 14px; height: 14px; flex: none; }

.compose textarea {
  font-family: inherit; font-size: 14px; line-height: 1.55;
  padding: 11px 13px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  resize: vertical; width: 100%;
}
.compose textarea:focus { border-color: var(--accent); background: var(--surface);
  outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.hint-line { font-size: 12px; color: var(--muted); }
.compose-foot { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.sent { padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
        display: flex; flex-direction: column; gap: 6px; }
.sent > .acklist { margin: 4px -16px -13px; }
.sent:last-child { border-bottom: 0; }
.sent-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sent-to { font-size: 12.5px; font-weight: 650; }
.sent-when { margin-left: auto; font-size: 11.5px; color: var(--muted);
             font-variant-numeric: tabular-nums; }
.sent-body { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.sent-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.sent-stats .pill { justify-self: start; }

.tg-wrap { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tg-bubble {
  background: var(--accent-soft); border-radius: 14px 14px 14px 4px;
  padding: 11px 13px 10px; display: flex; flex-direction: column; gap: 7px;
}
.tg-from { font-size: 12px; font-weight: 700; color: var(--accent); }
.tg-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink);
           overflow-wrap: anywhere; }
.tg-btns { display: flex; }
.tg-btn {
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 7px 12px; width: 100%; text-align: center;
}
.tg-note { font-size: 11.5px; color: var(--muted); text-align: center; }

.filterbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding: 12px 16px; margin: 0;
}
.fgroup { display: flex; flex-direction: column; gap: 4px; }
.fgroup label {
  font-size: 10.5px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--muted); font-weight: 650;
}
.filterbar select { min-width: 130px; }
.filterbar input { min-width: 120px; }
.filterbar input[type="search"] { min-width: 180px; }
.fquick { display: flex; gap: 6px; flex-wrap: wrap; }

.filterbar select, .filterbar input,
.upload-form select, .upload-form input:not([type="file"]),
.email-form input, .people-filter,
.vgl-form select {
  font-family: var(--sans); font-size: 13.5px;
  height: 38px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.filterbar select:hover, .filterbar input:hover, .vgl-form select:hover,
.upload-form select:hover, .email-form input:hover { border-color: var(--muted); }
.filterbar select:focus, .filterbar input:focus,
.upload-form select:focus, .upload-form input:focus,
.email-form input:focus, .people-filter:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.filterbar select, .upload-form select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.4 6 7.9l3.5-3.5' fill='none' stroke='%23606E85' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
:root[data-theme="dark"] .filterbar select,
:root[data-theme="dark"] .upload-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.4 6 7.9l3.5-3.5' fill='none' stroke='%238393A6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .filterbar select,
  :root:not([data-theme="light"]) .upload-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.4 6 7.9l3.5-3.5' fill='none' stroke='%238393A6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

.searchwrap { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.searchwrap svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.searchwrap input { width: 100%; padding-left: 35px; }

.segmented {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px;
}
.seg-item {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  padding: 7px 14px; border-radius: 9px; text-decoration: none;
  transition: background .15s, color .15s;
}
.seg-item:hover { color: var(--ink); }
.seg-item.is-on {
  background: var(--surface); color: var(--ink); font-weight: 650;
  box-shadow: 0 1px 3px rgba(15, 23, 32, .14);
}

@media (max-width: 760px) {
  .filterbar { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .filterbar .spacer { display: none; }
  .fgroup { min-width: 0; }
  .filterbar select, .filterbar input { width: 100%; min-width: 0; }
  .searchwrap { max-width: none; grid-column: 1 / -1; }
  .segmented { grid-column: 1 / -1; display: flex; }
  .seg-item { flex: 1; text-align: center; }
  .fquick { grid-column: 1 / -1; }
  .fquick .btn { flex: 1; justify-content: center; }
}

.doc {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 2px 12px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--line-soft);
}
.doc:first-of-type { border-top: 0; }
.doc > span:nth-child(2) { min-width: 0; }
.doc-ico { width: 34px; height: 34px; border-radius: 10px;
           background: var(--accent-soft); color: var(--accent);
           display: grid; place-items: center; }
.doc-name { font-size: 13.5px; font-weight: 600; }
.doc-meta { font-size: 11.5px; color: var(--muted);
            display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
@media (max-width: 480px) {
  .doc { grid-template-columns: 34px minmax(0, 1fr); }
  .doc-right { grid-column: 2; justify-self: start; }
}

.doc-file {
  display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap;
  padding: 7px 16px 7px 62px;
  background: var(--surface-2); border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
}
@media (max-width: 480px) { .doc-file { padding-left: 16px; } }
.link-btn.danger { color: var(--crit); }
.link-btn.danger:hover { background: var(--crit-soft); }

.upload-form { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.upload-form .field label {
  font-size: 11px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--muted); font-weight: 650;
}
.upload-form select, .upload-form input { width: 100%; }
.upload-form input[type="file"] {
  font-family: var(--sans); font-size: 13px; padding: 8px;
  border: 1px dashed var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--ink-2); cursor: pointer;
}
.upload-form input[type="file"]:hover { border-color: var(--accent); }

.email-form { display: flex; gap: 7px; align-items: center; margin: 0; }
.email-form input { flex: 1; min-width: 0; height: 34px; }
.email-form .btn { height: 34px; padding: 0 12px; }

.daynav { display: inline-flex; align-items: center; gap: 4px; }
.daynav-btn {
  width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  display: grid; place-items: center;
  transition: background .15s, border-color .15s, color .15s;
}
.daynav-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.daynav-heute {
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  padding: 0 12px; height: 32px; display: inline-flex; align-items: center;
  border-radius: 9px; border: 1px solid var(--accent); background: var(--accent-soft);
}
.daynav-heute:hover { filter: brightness(.97); }

.fsum { display: grid; gap: 12px;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.fsum-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
  padding: 13px 15px 12px; display: flex; flex-direction: column; gap: 5px;
  border-left: 3px solid var(--fc);
  transition: transform .1s, box-shadow .15s, border-color .15s;
}
.fsum-card:hover { transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(15,23,32,.07), 0 12px 28px -14px rgba(15,23,32,.3); }
.fsum-top { display: flex; align-items: center; gap: 7px; }
.fsum-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--fc); flex: none; }
.fsum-name { font-size: 12.5px; font-weight: 650;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsum-n { font-size: 24px; font-weight: 750; line-height: 1; letter-spacing: -.02em; }
.fsum-meta { font-size: 11.5px; color: var(--muted); }
.fsum-bar { height: 4px; border-radius: 2px; background: var(--line);
            overflow: hidden; margin-top: 2px; }
.fsum-bar > i { display: block; height: 100%; border-radius: 2px; background: var(--fc); }

a.day { color: inherit; display: block; transition: background .12s; }
a.day:hover { background: var(--accent-soft); }
a.day .day-head { display: flex; align-items: baseline; gap: 6px; }
a.day .day-body { display: flex; flex-direction: column; gap: 4px; }
a.day .ev { display: flex; flex-direction: column; gap: 1px; }
.day.is-open { box-shadow: inset 0 -3px 0 var(--accent); }
.day.is-open .day-num { color: var(--accent); }

.daypicker { display: flex; flex-direction: column; gap: 6px;
             max-height: 300px; overflow-y: auto; padding: 2px; }
.daygroup { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.daygroup summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; cursor: pointer; user-select: none; border-radius: 10px;
}
.daygroup summary::-webkit-details-marker { display: none; }
.daygroup summary::marker { content: ""; }
.daygroup[open] summary { border-bottom: 1px solid var(--line-soft); border-radius: 10px 10px 0 0; }
.daygroup summary:hover { background: var(--surface-2); }
.dg-label { font-size: 13px; font-weight: 650; }
.dg-label::before { content: "▸ "; color: var(--muted); }
.daygroup[open] .dg-label::before { content: "▾ "; }
.dg-count { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.daygroup .picker { padding: 9px 12px 11px; }

.poll {
  display: flex; flex-direction: column; gap: 8px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft); color: inherit;
  transition: background .12s;
}
.poll:last-child { border-bottom: 0; }
.poll:hover { background: var(--surface-2); }
.poll-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.poll-title { font-size: 13.5px; font-weight: 650; }
.poll-ort { font-weight: 450; color: var(--muted); }
.poll-when { margin-left: auto; font-size: 11.5px; color: var(--muted);
             font-variant-numeric: tabular-nums; }
.poll-stats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.votebar { display: flex; height: 8px; border-radius: 4px;
           overflow: hidden; background: var(--line); }
.votebar.big { height: 12px; border-radius: 6px; }
.votebar > i { display: block; height: 100%; }
.votebar .v-ja { background: var(--ok); }
.votebar .v-nein { background: var(--crit); }
.votebar .v-offen { background: var(--idle-soft); }

.polltext {
  margin: 0; padding: 16px; font-size: 14px; line-height: 1.6;
  white-space: pre-wrap; color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.pollsum { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.drei-spalten { display: grid; grid-template-columns: repeat(3, 1fr);
                gap: 22px; align-items: start; }
@media (max-width: 1100px) { .drei-spalten { grid-template-columns: 1fr; } }
.vgl-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
            padding: 0 16px 14px; }
.vgl-form select { flex: 1 1 320px; min-width: 0; }

.absage-form { display: flex; flex-direction: column; gap: 10px;
               padding: 0 16px 14px; }
.absage-form .btn { align-self: flex-start; }

.klapp-kopf { cursor: pointer; list-style: none; }
.klapp-kopf::-webkit-details-marker { display: none; }
.klapp-kopf::marker { content: ""; }
details[open] > .klapp-kopf .anleg-pfeil { background: var(--accent); color: #fff;
                                           font-size: 0; }
details[open] > .klapp-kopf .anleg-pfeil::before { content: "\2212"; font-size: 14px; }

.poll-zeile { position: relative; }
.poll-zeile .poll { padding-right: 52px; }
.poll-weg { position: absolute; top: 10px; right: 12px; margin: 0; }
.poll-x {
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 17px; line-height: 1;
  display: grid; place-items: center; padding: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.poll-x:hover { background: var(--crit-soft); border-color: var(--crit); color: var(--crit); }

.chip.g-uja { background: var(--ok-soft); color: var(--ok); }
.person.vs.is-nein { opacity: .55; }
.person.vs.is-nein:hover, .person.vs.is-nein:focus-within { opacity: 1; }

.namechips { display: flex; flex-wrap: wrap; gap: 6px; }
.namechips.pad { padding: 14px 16px; }
.namechip {
  font-size: 12.5px; font-weight: 550; line-height: 1.3;
  padding: 5px 11px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  display: inline-flex; align-items: baseline; gap: 6px;
  max-width: 100%; overflow-wrap: anywhere;
  transition: border-color .15s, background .15s, color .15s;
}
.namechip:hover { border-color: var(--muted); color: var(--ink); background: var(--surface); }
.namechip.ok   { background: var(--ok-soft);   border-color: transparent; color: var(--ok); }
.namechip.crit { background: var(--crit-soft); border-color: transparent; color: var(--crit); }
.namechip.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.namechip.ok:hover, .namechip.crit:hover, .namechip.warn:hover { filter: brightness(.96); }
.nc-meta { font-size: 10.5px; opacity: .72; font-weight: 600; }
.nc-title {
  display: block; font-size: 11px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--muted); font-weight: 650; margin: 10px 0 6px;
}
.nc-title:first-child { margin-top: 0; }

.acklist { border-top: 1px solid var(--line-soft); margin-top: 2px; }
.acklist > summary {
  cursor: pointer; user-select: none; padding: 9px 16px;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
}
.acklist > summary::-webkit-details-marker { display: none; }
.acklist > summary::marker { content: ""; }
.acklist > summary::before { content: "▸ "; }
.acklist[open] > summary::before { content: "▾ "; }
.acklist > summary:hover { background: var(--surface-2); }
.acklist .namechips { padding: 0 16px 14px; }
.acklist .nc-title { padding: 0 16px; }

.meterwrap { padding: 0 16px 12px; }

.names-line { padding: 9px 16px 12px; margin: 0; font-size: 12.5px;
              color: var(--ink-2); line-height: 1.7; }

.login-wrap { min-height: 100vh; display: grid; place-items: center;
              padding: 40px 20px; background: var(--ground); }
.login-card {
  width: 100%; max-width: 372px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 17px;
}
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-brand .brand-mark { width: 32px; height: 32px; border-radius: 8px; }
.login-h { font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.login-p { font-size: 13px; color: var(--muted); margin: 0; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 11px; letter-spacing: .02em; text-transform: uppercase;
               color: var(--muted); font-weight: 650; }
.field input {
  font-family: var(--sans); font-size: 14px; padding: 9px 11px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
}
.field input:focus { border-color: var(--accent); background: var(--surface);
                     outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.login-err {
  background: var(--crit-soft); color: var(--crit); border-radius: var(--r-s);
  padding: 9px 12px; font-size: 12.5px; font-weight: 600;
}
.login-note { font-size: 11.5px; color: var(--muted); text-align: center;
              padding-top: 3px; line-height: 1.6; margin: 0; }

.login-shell {
  width: 100%; max-width: 880px; display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(15,23,32,.04), 0 30px 70px -30px rgba(20,45,95,.45);
}
.login-side {
  position: relative; isolation: isolate; padding: 40px 38px;
  display: flex; flex-direction: column; gap: 26px;
  background: linear-gradient(150deg, #2F6BE4 0%, #2450B4 52%, #1B3A86 100%);
  color: #fff;
}

.login-side::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(560px 300px at 88% -8%, rgba(255,255,255,.20), transparent 62%),
    radial-gradient(420px 320px at -12% 108%, rgba(255,255,255,.13), transparent 60%);
}
.login-side .brand-mark {
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  display: grid; place-items: center; flex: none;
}
.ls-marke { display: flex; align-items: center; gap: 12px; }
.ls-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; display: block; }
.ls-sub { font-size: 11.5px; color: rgba(255,255,255,.72); letter-spacing: .04em;
          text-transform: uppercase; font-weight: 600; }
.ls-titel { font-size: 27px; line-height: 1.25; font-weight: 700;
            letter-spacing: -.025em; margin: 0; }
.ls-text { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.82);
           margin: 8px 0 0; max-width: 34ch; }
.ls-punkte { list-style: none; margin: 0; padding: 0;
             display: flex; flex-direction: column; gap: 11px; }
.ls-punkte li { display: flex; align-items: center; gap: 10px;
                font-size: 13px; color: rgba(255,255,255,.9); }
.ls-punkte svg { flex: none; opacity: .85; }
.ls-fuss { margin-top: auto; font-size: 11.5px; color: rgba(255,255,255,.6);
           display: flex; align-items: center; gap: 7px; }
.ls-punkt { width: 6px; height: 6px; border-radius: 50%; background: #6EE7A8;
            box-shadow: 0 0 0 3px rgba(110,231,168,.22); flex: none; }

.login-main { padding: 44px 40px 34px; display: flex; flex-direction: column;
              gap: 17px; justify-content: center; }
.login-main .login-h { font-size: 22px; }
.lm-schritt { font-size: 11px; font-weight: 700; letter-spacing: .08em;
              text-transform: uppercase; color: var(--accent); }
.login-main .btn-primary { padding: 11px; font-size: 14px; border-radius: 10px; }

.code-feld {
  font-size: 25px !important; letter-spacing: .34em; text-align: center;
  font-variant-numeric: tabular-nums; padding: 12px 11px !important;
  font-weight: 600;
}
.code-feld::placeholder { letter-spacing: .34em; opacity: .32; font-weight: 400; }

@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; max-width: 420px; }
  .login-side { padding: 22px 24px; gap: 14px; }
  .login-side .ls-titel, .login-side .ls-text, .login-side .ls-punkte { display: none; }
  .ls-fuss { margin-top: 0; }
  .login-main { padding: 26px 24px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media (max-width: 1080px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .pf-grid { grid-template-columns: 1fr; }
  .msg-grid { grid-template-columns: 1fr; }
}

.nav-knopf { display: none; width: 34px; height: 34px; flex: none;
             border: 1px solid var(--line); border-radius: var(--r-s);
             background: var(--surface); color: var(--ink-2);
             place-items: center; cursor: pointer; }
.nav-knopf:hover { background: var(--surface-2); }
.nav-schatten { display: none; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .nav-knopf { display: grid; }

  .rail {
    position: fixed; top: 0; left: 0; bottom: 0; width: 232px; z-index: 40;
    height: 100vh; overflow-y: auto;
    transform: translateX(-100%); transition: transform .18s ease-out;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  .app.nav-offen .rail { transform: translateX(0);
                         box-shadow: 4px 0 24px rgba(0, 0, 0, .18); }

  .nav-schatten:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 39;
    background: rgba(15, 23, 42, .42);
  }

  .screen { padding: 16px 14px 50px; }
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar h1 { font-size: 17px; }
  .topbar-date { display: none; }
  .row { grid-template-columns: 3px 1fr 110px 34px; }
  .row .checkin-cell, .row .time-cell { display: none; }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .rail { transition: none; }
}

.abwesend { display: flex; flex-direction: column; gap: 4px; margin-top: 7px;
            min-width: 0; }
.abw-item {
  font-size: 12px; color: var(--ink-2); line-height: 1.45;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  min-width: 0; overflow-wrap: anywhere;
}
.abw-art {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  padding: 1.5px 7px; border-radius: 20px; flex: none;
}
.abw-art.urlaub { background: var(--accent-soft); color: var(--accent); }
.abw-art.termin { background: var(--warn-soft);   color: var(--warn); }
.abw-in { font-size: 11px; color: var(--muted); }

.live-dot.beat { animation: beat .9s ease-out; }
@keyframes beat {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
.ausser-sum { color: var(--crit) !important; }

.editbox {
  display: flex; flex-direction: column; gap: 9px;
  padding: 13px 16px; margin: 2px 0 0;
  background: var(--surface-2); border-top: 1px solid var(--line-soft);
}
.editbox textarea, .absage-form textarea {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.55; width: 100%;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  resize: vertical;
}
.editbox textarea:focus, .absage-form textarea:focus {
  border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft);
}
.editbox-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.editbox[hidden] { display: none; }
.sent > .editbox { margin: 4px -16px -13px; }

.btn-danger { border-color: var(--crit); color: var(--crit); }
.btn-danger:hover { background: var(--crit-soft); border-color: var(--crit); color: var(--crit); }

.chip.g-shayan { background: var(--accent-soft); color: var(--accent); }
.chip.g-mind   { background: var(--ok-soft);     color: var(--ok); }

.chip.g-sh { background: var(--accent-soft); color: var(--accent); }
.chip.g-mi { background: var(--ok-soft);     color: var(--ok); }

.chip.g-po,   .chip-select.g-po   { background: var(--accent-soft); color: var(--accent); }
.chip.g-po-s, .chip-select.g-po-s { background: var(--accent);      color: #fff; }
.chip.g-mi,   .chip-select.g-mi   { background: var(--ok-soft);     color: var(--ok); }
.chip.g-mi-s, .chip-select.g-mi-s { background: var(--ok);          color: #fff; }
.chip.g-offen, .chip-select.g-offen { background: var(--crit-soft); color: var(--crit);
                                      font-weight: 700; }

.chip.g-777, .chip-select.g-777 { background: var(--plan-soft); color: var(--plan); }

.mfilter { position: relative; }
.mfilter > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center;
  min-width: 130px; max-width: 210px; height: 38px; padding: 0 34px 0 12px;
  font-family: var(--sans); font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.4 6 7.9l3.5-3.5' fill='none' stroke='%23606E85' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.mfilter > summary::-webkit-details-marker { display: none; }
.mfilter > summary::marker { content: ""; }
.mfilter > summary:hover { border-color: var(--muted); }
.mfilter[open] > summary {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

.mfilter.hat-wahl > summary { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.mf-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mf-panel {
  position: fixed; z-index: 60; top: 0; left: 0;
  min-width: 168px; max-width: 250px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow);
}
.mf-kopf { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; }
.filterbar .mf-kopf .mf-suche {
  min-width: 0; flex: 1; height: 27px; font-size: 12px;
  border-radius: 7px; padding: 0 9px;
}

.mf-liste { max-height: 252px; overflow-y: auto; }
.mf-zeile {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 7px; border-radius: 7px; cursor: pointer;
  font-size: 13px; white-space: nowrap;
}

.filterbar .mf-zeile input[type="checkbox"],
.v26n-zeile input[type="checkbox"],
.people-list input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; min-width: 15px; margin: 0; padding: 0;
  flex: none; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 4px;
  background: var(--surface) no-repeat center;
  transition: border-color .12s, background-color .12s;
}
.filterbar .mf-zeile:hover input[type="checkbox"],
.v26n-zeile:hover input[type="checkbox"],
.people-list label:hover input[type="checkbox"] { border-color: var(--muted); }
.filterbar .mf-zeile input[type="checkbox"]:checked,
.v26n-zeile input[type="checkbox"]:checked,
.people-list input[type="checkbox"]:checked {
  background-color: var(--accent); border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1.4 5.1 3.9 7.6 8.6 2.5' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.filterbar .mf-zeile input[type="checkbox"]:focus-visible,
.v26n-zeile input[type="checkbox"]:focus-visible,
.people-list input[type="checkbox"]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--accent-soft);
}

.mf-zeile:hover { background: var(--surface-2); }

.fgroup .mf-zeile {
  font-size: 13px; text-transform: none; letter-spacing: 0;
  color: var(--ink); font-weight: 450;
}

.mf-schnell {
  display: flex; align-items: center; gap: 6px;
  padding: 1px 7px 5px; margin-bottom: 3px;
  border-bottom: 1px solid var(--line-soft);
}
.fgroup .mf-schnell button {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  text-transform: none; letter-spacing: 0; border-radius: 6px;
}
.fgroup .mf-schnell .mf-alle { color: var(--accent); }
.fgroup .mf-schnell .mf-keine { color: var(--muted); margin-left: auto; }
.fgroup .mf-schnell button:hover { background: var(--surface-2); }
.mf-haken { width: 12px; display: inline-block; text-align: center;
            visibility: hidden; }
.mfilter:not(.hat-wahl) .mf-haken { visibility: visible; }

.mf-zeile[hidden] { display: none; }

.v26-d-wer { margin: 0 0 10px; max-height: 200px; overflow-y: auto; }
.v26-d-wer .pos { padding-top: 3px; padding-bottom: 3px; }
.v26-d-wer .pos-name { font-size: 12px; }

.eh-tabelle { display: block; padding: 0 16px 4px; }
.eh-zeile { display: flex; align-items: center; gap: 12px;
            padding: 5px 0; border-bottom: 1px solid var(--line); }
.eh-zeile:last-child { border-bottom: 0; }
.eh-zeile.ist-offen { background: var(--crit-soft); }
.eh-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
           gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eh-zahl { flex: 0 0 58px; text-align: right; color: var(--muted); font-size: 11.5px; }
.eh-zeile select { flex: 0 0 96px; }
.eh-fuss { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
           padding: 12px 16px 16px; }

.bildzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bildzeile input[type="file"] {
  font-family: var(--sans); font-size: 13px; padding: 8px;
  border: 1px dashed var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--ink-2); cursor: pointer; flex: 1; min-width: 0;
}
.bildzeile input[type="file"]:hover { border-color: var(--accent); }
.hint-line.warnt { color: var(--warn); font-weight: 600; }
.tg-bild {
  width: 100%; border-radius: 10px; display: block;
  max-height: 260px; object-fit: cover;
}

.tab-rahmen { overflow: auto; max-height: calc(100vh - 260px); }
.tab-liste { min-width: 1020px; }
.tab-liste th { position: sticky; top: 0; z-index: 2; }
.tab-liste td { padding: 5px 12px; font-size: 12.5px; }
.tab-liste th { padding: 7px 12px; }
.tab-liste th.sortable a { padding: 7px 12px; }
.tl-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab-liste th.tl-num, .tab-liste th.tl-num a { text-align: right; }
.tl-nr { width: 46px; text-align: right; color: var(--muted);
         font-variant-numeric: tabular-nums; }
.tl-name { font-weight: 600; }
.tl-blass { color: var(--muted); }
.tl-gruppe-sp { white-space: nowrap; }
.tl-pfeil { color: var(--accent); font-size: 9px; vertical-align: 1px; }
.tab-liste th.is-sorted { color: var(--ink); }

tr.tl-gruppe td {
  background: var(--surface-2); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); padding: 7px 12px;
}
tr.tl-gruppe:hover td { background: var(--surface-2); }
.tl-gruppe-name { font-weight: 700; font-size: 12.5px; }
.tl-gruppe-sum { color: var(--muted); font-size: 11.5px; margin-left: 10px; }

tr.tl-leer td { background: var(--warn-soft); }
tr.tl-leer:hover td { background: var(--warn-soft); }
.tl-offen { color: var(--warn); font-weight: 600; }
tr.tl-entwurf .tl-name { font-weight: 600; }
.tl-marke {
  display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  background: var(--accent-soft); color: var(--accent); vertical-align: 1px;
}
.tl-marke-rot { background: var(--crit-soft); color: var(--crit); }
.tl-fuss { padding: 10px 16px 2px; }

.aend-band {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--accent-soft);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.aend-zahl {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
  background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 700;
  display: grid; place-items: center;
}
.aend-text { font-size: 12.5px; color: var(--accent); font-weight: 600; }
.aend-band form { display: inline; }

.aend-band .spacer { flex: 1; min-width: 12px; }
.aend-band .link-btn { white-space: nowrap; }
.aend-tun { display: flex; align-items: center; gap: 8px; flex: none; }

.aend-band-oben { border: 1px solid var(--accent); border-radius: var(--r);
                  margin-bottom: 2px; }

.tl-tun { width: 40px; text-align: center; }
.tl-stift {
  border: 1px solid transparent; background: none; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 3px 5px; border-radius: 6px;
}
.tl-stift:hover { background: var(--surface-2); border-color: var(--line); }
.tl-stift.is-auf { background: var(--accent-soft); border-color: var(--accent); }

tr.tl-vorgemerkt td { background: var(--accent-soft); }
tr.tl-vorgemerkt:hover td { background: var(--accent-soft); }
tr.tl-vormerkzeile td { background: var(--accent-soft); padding-top: 0;
                        border-bottom: 1px solid var(--line); }
tr.tl-vormerkzeile:hover td { background: var(--accent-soft); }
.vm-marke {
  display: inline-block; padding: 0 6px; border-radius: 4px; margin-right: 8px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
}
.vm-satz { font-size: 12px; color: var(--accent); margin-right: 12px; }

tr.tl-formzeile td { background: var(--surface-2); padding: 12px 16px; }
tr.tl-formzeile:hover td { background: var(--surface-2); }
.tl-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.tl-form .field { gap: 4px; }
.tl-form .field.sm input, .tl-form .field.sm select { max-width: 132px; }
.tl-form input, .tl-form select {
  font-family: var(--sans); font-size: 13px; padding: 6px 9px;
  border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}
.tl-form-tun { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tl-absagen { color: var(--crit); }
.tl-absagen:hover { border-color: var(--crit); }

.tl-loesen { color: var(--muted); font-size: 15px; line-height: 1; }
.tl-loesen:hover { color: var(--crit); border-color: var(--crit); }

.tl-neu { margin: 0 16px 12px; }
.tl-neu > summary {
  cursor: pointer; display: inline-block; font-size: 12.5px; font-weight: 600;
  color: var(--ok); padding: 5px 11px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: var(--surface-2);
}
.tl-neu > summary:hover { border-color: var(--ok); background: var(--ok-soft); }
.tl-neu[open] > summary { background: var(--ok-soft); border-color: var(--ok); }
.tl-neu-form {
  margin-top: 10px; padding: 14px 16px; border-radius: var(--r-m);
  border: 1px solid var(--line); background: var(--surface-2);
}
.tl-neu-liste {
  margin: 0 16px 10px; padding: 10px 14px; border-radius: var(--r-m);
  background: var(--ok-soft); border: 1px solid var(--ok);
}
.tl-neu-kopf {
  display: block; font-size: 12px; font-weight: 700; color: var(--ok);
  margin-bottom: 6px;
}

.tl-neu-eintrag {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 2px 10px; padding: 3px 0;
}
.tl-neu-eintrag .vm-satz { color: var(--ok); margin-right: 0; }
@media (max-width: 640px) {
  .tl-neu-eintrag { padding: 8px 0; border-top: 1px solid var(--line); }
  .tl-neu-liste .tl-neu-eintrag:first-of-type { border-top: 0; padding-top: 2px; }
}
.vm-marke.vm-neu { background: var(--ok); }
.tab-suche { display: flex; align-items: center; gap: 6px; }
.tab-suche input {
  font-family: var(--sans); font-size: 12.5px; padding: 6px 10px;
  border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); width: 170px;
}
.tab-suche input:focus { border-color: var(--accent); background: var(--surface);
                         outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

@media (max-width: 760px) {
  .tab-rahmen { max-height: none; }
  .tab-suche input { width: 120px; }
}

th.sortable { padding: 0; }
th.sortable a {
  display: block; padding: 9px 16px; color: inherit;
  text-decoration: none; white-space: nowrap;
}
th.sortable a:hover { color: var(--ink); background: var(--line-soft); }
th .arr { color: var(--accent); font-size: 9px; vertical-align: 1px; }

.monatswahl { align-items: center; }
.monatswahl .eyebrow { margin-right: 2px; }

.stundenliste {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.std-chip {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 12px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 12.5px;
}
.std-name { font-weight: 600; }
.std-wert { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.std-n { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

.dgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px; padding: 14px 16px 16px;
  align-items: start;
}

.dnst {
  border: 1px solid var(--line); border-left: 3px solid var(--fc, var(--idle));
  border-radius: var(--r-s); background: var(--surface); overflow: hidden;
}

.dnst.is-fremd { border-left-style: dashed; }

.dnst-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px 0;
}
.dnst-ort  { font-size: 13.5px; font-weight: 700; }
.dnst-zeit { margin-left: auto; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }

.dnst-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 8px 12px 9px; border-bottom: 1px solid var(--line-soft);
}
.dnst-n   { font-size: 12px; font-weight: 650; color: var(--muted); }
.dnst-std { font-size: 11.5px; color: var(--muted); }
.dnst-std::before { content: "·"; margin-right: 7px; }

.pos {
  display: grid; grid-template-columns: 3px 27px 1fr auto;
  align-items: center; gap: 9px;
  padding: 7px 12px 7px 0; border-top: 1px solid var(--line-soft);
}
.pos:first-of-type { border-top: 0; }
.pos-stripe { align-self: stretch; }
.pos.s-ok   .pos-stripe { background: var(--ok); }
.pos.s-warn .pos-stripe { background: var(--warn); }
.pos.s-crit .pos-stripe { background: var(--crit); }
.pos.s-idle .pos-stripe { background: var(--line); }
.pos.s-done .pos-stripe { background: var(--idle-soft); }
.pos.is-extern .pos-stripe { background: repeating-linear-gradient(
    180deg, var(--warn) 0 3px, transparent 3px 6px); opacity: .55; }

.pos-main { min-width: 0; }
.pos-name {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink);
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.pos-name:hover { color: var(--accent); }
.pos-sub   { font-size: 11px; color: var(--muted); }
.pos-right { display: flex; align-items: center; gap: 6px; }

.chip.g-fremd     { background: var(--warn-soft); color: var(--warn); }
.avatar.av-extern { background: var(--warn); }
.avatar.av-rest   { background: var(--idle-soft); color: var(--muted); }

.wtag { border-bottom: 1px solid var(--line-soft); }
.wtag:last-child { border-bottom: 0; }
.wtag-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 16px; background: var(--surface-2);
}
.wtag.is-heute .wtag-head { background: var(--accent-soft); }
.wtag-name {
  font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.wtag-name:hover { color: var(--accent); }
.wtag-name .num  { font-weight: 600; color: var(--muted); margin-left: 3px; }
.wtag-sum { font-size: 11.5px; font-weight: 600; color: var(--muted); }

.dline {

  display: grid; grid-template-columns: 3px 96px 1fr 112px 132px 26px;
  align-items: center; gap: 11px; padding: 0 16px 0 0; min-height: 40px;
  border-top: 1px solid var(--line-soft);
  text-decoration: none; color: inherit;
}
.dline:hover { background: var(--surface-2); }
.dline-stripe { align-self: stretch; background: var(--fc); }
.dline.is-fremd .dline-stripe { opacity: .4; }
.dline-zeit  { font-size: 12px; font-weight: 650; color: var(--ink-2); }
.dline-ort   { font-size: 13px; font-weight: 600;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dline-firma { font-size: 11.5px; color: var(--muted);
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dline-n     { font-size: 12px; font-weight: 700; color: var(--muted); text-align: right; }

.dline-leute { display: flex; justify-content: flex-end; }
.dline-leute .avatar {
  width: 24px; height: 24px; font-size: 10px;
  margin-left: -6px; border: 2px solid var(--surface);
}
.dline-leute .avatar:first-child { margin-left: 0; }
.dline:hover .dline-leute .avatar { border-color: var(--surface-2); }

@media (max-width: 760px) {
  .dgrid { grid-template-columns: 1fr; padding: 12px; }
  .dline {
    grid-template-columns: 3px 1fr auto; grid-template-areas:
      "s zeit n" "s ort leute" "s firma leute";
    gap: 2px 11px; padding: 8px 12px 8px 0;
  }
  .dline-stripe { grid-area: s; }
  .dline-zeit   { grid-area: zeit; }
  .dline-ort    { grid-area: ort; }
  .dline-firma  { grid-area: firma; }

  .dline-leute  { grid-area: leute; align-self: center; min-width: 78px; }
  .dline-n      { grid-area: n; }
}

:root { --plan: #7A5AF8; --plan-soft: #EDE9FE; }
:root[data-theme="dark"] { --plan: #A78BFA; --plan-soft: #241B3D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --plan: #A78BFA; --plan-soft: #241B3D; }
}

.chip.g-entwurf { background: var(--plan-soft); color: var(--plan); }

.chip.g-auch { background: var(--warn-soft); color: var(--warn);
               font-weight: 600; white-space: nowrap; }

.dg-ort { color: var(--muted); font-weight: 500; }
.pill.p-plan    { background: var(--plan-soft); color: var(--plan); }
.t-plan         { color: var(--plan); }
.meter.m-plan i { background: var(--plan); }

.dnst.is-entwurf { border-left-color: var(--plan); border-left-style: dashed; }
.dnst.is-entwurf .dnst-head { background: var(--plan-soft); }
.dline.is-entwurf .dline-stripe {
  background: repeating-linear-gradient(180deg, var(--plan) 0 4px, transparent 4px 8px);
}
.dline-ort .chip { margin-left: 7px; vertical-align: 1px; }

.avatar.av-frei {
  background: transparent; color: var(--plan);
  border: 1px dashed var(--plan); font-weight: 700;
}
.pos.is-frei .pos-stripe { background: repeating-linear-gradient(
    180deg, var(--plan) 0 3px, transparent 3px 6px); opacity: .5; }
.pos.is-frei .pos-name { color: var(--muted); font-weight: 500; }

.dnst-notiz {
  margin: 0; padding: 9px 12px; font-size: 12px; color: var(--ink-2);
  background: var(--surface-2); border-bottom: 1px solid var(--line-soft);
}

.anleg-kopf { cursor: pointer; list-style: none; }
.anleg-kopf::-webkit-details-marker { display: none; }
.anleg-pfeil {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 17px; font-weight: 600; line-height: 1;
  transition: transform .15s;
}
details[open] > .anleg-kopf .anleg-pfeil { transform: rotate(45deg); }

.planform {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: 4px 16px 16px; margin: 0;
}
.planform .field { flex: 1 1 170px; min-width: 0; }
.planform .field.sm { flex: 0 1 120px; }
.planform .field.breit { flex: 2 1 280px; }
.planform input {
  font-family: var(--sans); font-size: 13.5px; width: 100%;
  height: 38px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.planform input:hover { border-color: var(--muted); }
.planform input:focus {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.planform-foot { display: flex; align-items: flex-end; }

.planform select {
  font-family: var(--sans); font-size: 13.5px; width: 100%;
  height: 38px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.planform select:hover { border-color: var(--muted); }

.planform .zusatz-hinweis { flex: 1 0 100%; margin: 0; }

.dnst-edit { border-top: 1px solid var(--line-soft); }
.dnst-edit > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 8px 12px; font-size: 12px; font-weight: 650; color: var(--accent);
}
.dnst-edit > summary::-webkit-details-marker { display: none; }
.dnst-edit > summary::before { content: "✎ "; }
.dnst-edit > summary:hover { background: var(--surface-2); }
.dnst-edit[open] > summary { border-bottom: 1px solid var(--line-soft); }
.dnst-edit .planform { padding: 12px 12px 10px; gap: 10px; }
.dnst-edit .planform .field { flex: 1 1 130px; }
.dnst-edit .hint-line { padding: 0 12px 11px; }

.dnst-edit-rest {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 0 12px 11px;
}
.dnst-edit-rest form { display: flex; align-items: center; gap: 7px; margin: 0; }
.dnst-edit-rest label { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.dnst-edit-rest input[type="date"] {
  font-family: var(--sans); font-size: 12.5px; height: 32px; padding: 0 9px;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}
.dnst-edit-rest .btn { height: 32px; padding: 0 12px; font-size: 12.5px; }

@media (max-width: 760px) {
  .planform .field, .planform .field.sm, .planform .field.breit { flex: 1 1 100%; }
  .planform-foot .btn { width: 100%; }
}

.avatar.av-frei.num { font-size: 11.5px; }

.dnst-zut { border-top: 1px solid var(--line-soft); background: var(--surface-2); }
.dnst-zut > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 8px 12px; font-size: 12px; font-weight: 650; color: var(--plan);
}
.dnst-zut > summary::-webkit-details-marker { display: none; }
.dnst-zut > summary::before { content: "+ "; }
.dnst-zut > summary:hover { background: var(--plan-soft); }
.dnst-zut[open] > summary { border-bottom: 1px solid var(--line-soft); }

.dnst-zut > summary[hidden],
.dnst-aendern > summary[hidden] { display: none; }
.dnst-zut .people { padding: 9px 12px 0; }
.dnst-zut .people-list { max-height: 210px; background: var(--surface); }
.dnst-zut .daygroup { margin: 6px 0; }

.zut-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 0 11px;
}
.zut-foot .btn { height: 32px; padding: 0 13px; font-size: 12.5px; }

.zut-fremd {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end;
  padding: 10px 12px 12px; margin: 0;
  border-top: 1px solid var(--line-soft);
}
.zut-fremd .field { flex: 1 1 150px; min-width: 0; }
.zut-fremd .field.sm { flex: 0 1 110px; }
.zut-fremd input {
  font-family: var(--sans); font-size: 13px; width: 100%;
  height: 34px; padding: 0 11px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.zut-fremd input:focus {
  border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft);
}
.zut-fremd .btn { height: 34px; padding: 0 13px; font-size: 12.5px; }

.pos-weg { margin: 0; display: flex; }
.pos-weg button {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; background: transparent;
  color: var(--muted); font-size: 15px; line-height: 1;
  display: grid; place-items: center; padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.pos-weg button:hover {
  background: var(--crit-soft); color: var(--crit); border-color: var(--crit-soft);
}

.person .chip { flex: none; }
.person .spacer { flex: 1; }
.person.is-drin { opacity: .55; cursor: default; }

.person.is-gesperrt { cursor: not-allowed; background: var(--crit-soft); }
.person.is-gesperrt .sperr-zeichen { width: 14px; flex: none; font-size: 11px; }
.person.has-warn { background: var(--warn-soft); }

.wtag > summary { list-style: none; cursor: pointer; user-select: none; }
.wtag > summary::-webkit-details-marker { display: none; }
.wtag > summary:hover { background: var(--line-soft); }
.wtag.is-heute > summary:hover { background: var(--accent-soft); }

.wtag-pfeil {
  display: grid; place-items: center; width: 16px; height: 16px; flex: none;
  color: var(--muted); transition: transform .15s;
}
.wtag[open] > summary .wtag-pfeil { transform: rotate(90deg); }

.wtag:not([open]) > summary { opacity: .72; }
.wtag:not([open]) > summary .wtag-name { font-weight: 600; }

.wtag-auf {
  font-size: 11.5px; font-weight: 650; color: var(--accent);
  text-decoration: none; white-space: nowrap; flex: none;
}
.wtag-auf:hover { text-decoration: underline; }

.chip.g-heute { background: var(--accent-soft); color: var(--accent); }

.people-list.vorschlag { max-height: 340px; }

.person.vs {
  align-items: flex-start; gap: 10px; padding: 9px 11px;
}
.vs-punkte {
  flex: none; min-width: 34px; height: 26px; padding: 0 7px;
  border-radius: 8px; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--ok-soft); color: var(--ok);
}
.vs-punkte.warn { background: var(--warn-soft); color: var(--warn); }
.vs-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.vs-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.vs-grund { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.vs-warn {
  font-size: 11.5px; font-weight: 600; color: var(--warn); line-height: 1.45;
}
.vs-warn.w-ruhe, .vs-warn.w-34a { color: var(--crit); }
.person.vs.has-warn { background: var(--surface-2); }

.vs-blockiert { margin: 8px 0 0; }
.vs-blockiert > summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted);
  padding: 5px 0; user-select: none;
}
.vs-blockiert > summary:hover { color: var(--ink-2); }
.vs-blockiert .person { cursor: default; font-size: 12.5px; }
.vs-fuss { padding: 8px 0 2px; }

.vs-hinweis { font-size: 11.5px; color: var(--muted); font-style: italic; }

@supports selector(:has(*)) {
  .dgrid .dnst:has(.dnst-zut[open]) { grid-column: span 2; }
}
@media (max-width: 900px) {
  .dgrid .dnst:has(.dnst-zut[open]) { grid-column: auto; }
}

.field.kasten { flex: 1 1 240px; justify-content: flex-start; }
.planform .field.kasten { flex: 1 1 240px; }

.dnst-edit .planform .field.kasten { flex: 1 1 100%; }
.kasten-label {
  display: flex; align-items: center; gap: 7px; height: 38px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  text-transform: none; letter-spacing: 0; cursor: pointer; white-space: nowrap;
}
.kasten-label input { accent-color: var(--accent); width: 15px; height: 15px; }

:root { --sma: #0E7490; --sma-soft: #E0F2FE; }
:root[data-theme="dark"] { --sma: #67E8F9; --sma-soft: #164E63; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sma: #67E8F9; --sma-soft: #164E63; }
}
.chip.g-sma { background: var(--sma-soft); color: var(--sma); }

.req-form { display: inline; }
.req-actions .btn { height: 30px; padding: 0 10px; font-size: 12px; }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-ok:hover { filter: brightness(1.07); background: var(--ok); color: #fff; }

.rmenu-hinweis { display: block; padding: 9px 12px; font-size: 12px;
                 color: var(--muted); max-width: 230px; line-height: 1.45; }

.karte-inhalt { padding: 14px 16px; display: grid; gap: 12px; }
.sf-titel { font-weight: 600; font-size: 13px; margin: 0; }
.sf-zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sf-zeile input { flex: 1 1 190px; min-width: 0; }
.zwei-spalten { display: grid; gap: 16px;
                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.einricht { display: grid; gap: 18px; align-items: start;
            grid-template-columns: auto minmax(240px, 1fr); }
@media (max-width: 700px) { .einricht { grid-template-columns: 1fr; } }

.qr { background: #fff; padding: 10px; border-radius: 12px;
      border: 1px solid var(--line); line-height: 0; }
.qr svg { width: 190px; height: 190px; display: block; }
.schluessel { font-size: 17px; font-weight: 600; letter-spacing: 1px;
              margin: 0; word-break: break-all; }
.codes { display: flex; flex-wrap: wrap; gap: 8px; }
.code-chip { font-size: 14px; font-weight: 600; letter-spacing: .5px;
             padding: 7px 11px; border-radius: 9px;
             background: var(--surface-2); border: 1px solid var(--line); }

.stamm { display: grid; gap: 10px 12px;
         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stamm-feld { display: grid; gap: 4px; }

.opt { text-transform: none; letter-spacing: 0; font-weight: 500;
       color: var(--muted); opacity: .75; }
.stamm-label { font-size: 11px; letter-spacing: .02em; text-transform: uppercase;
               color: var(--muted); font-weight: 650; }
.stamm-feld input, .stamm-feld select {
  font-family: var(--sans); font-size: 13.5px; height: 38px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); width: 100%;
}
.dnst-liste > summary { padding: 10px 16px; cursor: pointer; font-weight: 600;
                        font-size: 13px; color: var(--accent);
                        border-top: 1px solid var(--line-soft); }
.dnst-liste > summary::-webkit-details-marker { display: none; }

.spalten { display: grid; gap: 9px 12px;
           grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.spalten .stamm-label { text-transform: none; letter-spacing: 0;
                        font-size: 11.5px; }
.sub-liste { border-top: 1px solid var(--line-soft); }
.sub-liste .ma-v-zeile { padding: 9px 16px; }
.anleg > summary { padding: 11px 16px; cursor: pointer; font-weight: 600;
                   font-size: 13px; color: var(--accent);
                   border-top: 1px solid var(--line-soft); }
.anleg > summary::-webkit-details-marker { display: none; }

.sma-mark { display: inline-block; font-size: 9px; font-weight: 700;
            letter-spacing: .4px; line-height: 15px; padding: 0 4px;
            border-radius: 3px; vertical-align: 1.5px;
            background: var(--sma-soft); color: var(--sma); }

.dnst-pub { border-top: 1px solid var(--line-soft); }

.karte-gefahr { border-color: var(--crit); }
.karte-gefahr > .card-head h2 { color: var(--crit); }
.gef-frage {
  margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink);
}
.gef-bleibt li { color: var(--ok); }
.gef-form {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  margin-top: 8px;
}
.gef-form .field { gap: 4px; }
.gef-form input, .gef-form select {
  font-family: var(--sans); font-size: 13px; padding: 6px 9px;
  border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}
.gef-form .field.sm input { max-width: 120px; letter-spacing: 2px; }
.gef-trenn { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.btn-gefahr { background: var(--crit); border-color: var(--crit); color: #fff; }
.btn-gefahr:hover { filter: brightness(0.93); }
.btn-gefahr:disabled { opacity: .6; cursor: default; }

.pub-nachricht {
  white-space: pre-wrap; margin: 6px 0 2px; padding: 9px 11px;
  border-radius: var(--r-m); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink);
  font-size: 13px; line-height: 1.45; max-width: 34em;
}

.pub-box { padding: 11px 12px 13px; }
.pub-was { margin: 0 0 7px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.pub-liste { margin: 0 0 10px; padding-left: 18px; font-size: 12.5px;
             color: var(--ink-2); line-height: 1.65; }
.pub-liste li::marker { color: var(--muted); }
.pub-liste .pub-warn { color: var(--warn); font-weight: 600; }
.pub-namen { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
.pub-knoepfe { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.pub-knoepfe form { margin: 0; }
.pub-knoepfe .btn { height: 34px; padding: 0 14px; font-size: 12.5px; }

.dnst-aendern { border-top: 1px solid var(--line-soft); }
.dnst-aendern > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 8px 12px; font-size: 12px; font-weight: 650; color: var(--warn);
}
.dnst-aendern > summary::-webkit-details-marker { display: none; }
.dnst-aendern > summary::before { content: "⇄ "; }
.dnst-aendern > summary:hover { background: var(--warn-soft); }
.dnst-aendern[open] > summary { border-bottom: 1px solid var(--line-soft); }

.aend-form { padding: 10px 12px 12px; margin: 0; }
.aend-titel { margin: 0 0 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); }

.aend-form .people-list + .aend-titel { margin-top: 12px; }
.aend-sub { font-weight: 500; color: var(--muted); }
.aend-form .people-list.vorschlag { max-height: 320px; }
.aend-form .people-list { max-height: 190px; background: var(--surface); }
.aend-form .people { margin-top: 10px; }
.aend-form .hint-line { padding: 6px 0 0; }
.aend-form .pub-knoepfe { margin-top: 11px; margin-bottom: 0; }

.dnst-klapp > summary { list-style: none; cursor: pointer; user-select: none; }
.dnst-klapp > summary::-webkit-details-marker { display: none; }
.dnst-klapp > summary:hover .dnst-head { background: var(--surface-2); }
.dnst.is-entwurf .dnst-klapp > summary:hover .dnst-head { background: var(--plan-soft); }
.dnst-pfeil {
  display: grid; place-items: center; width: 14px; height: 14px; flex: none;
  color: var(--muted); transition: transform .15s;
}
.dnst-klapp[open] > summary .dnst-pfeil { transform: rotate(90deg); }

.dnst-klapp:not([open]) .dnst-meta { border-bottom: 0; }

.dnst-zut .aend-form { padding: 10px 12px 12px; }
.dnst-zut .aend-form .people-list.vorschlag { max-height: 340px; }

.dnst-bearb-foot { display: flex; gap: 9px; flex-wrap: wrap; }
.dnst-trenner {
  border: 0; border-top: 1px solid var(--line-soft);
  margin: 4px 12px 12px;
}

.ort-fehlt {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0;
}
.ort-neu-chip { cursor: pointer; font-family: inherit; }
.ort-neu-chip .num { color: var(--muted); margin-left: 4px; }

.ort-form { padding-bottom: 4px; }
.ort-form-foot { display: flex; gap: 9px; flex-wrap: wrap; }

.ort-form-foot .btn[hidden] { display: none; }

.ort-form input[readonly] { background: var(--surface-2); color: var(--ink-2); }

.ort-suche-huelle { padding: 0 16px 10px; position: relative; }
.ort-suche { display: flex; gap: 8px; }
.ort-suche input {
  font-family: var(--sans); font-size: 13.5px; flex: 1 1 auto; min-width: 0;
  height: 38px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.ort-suche input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.ort-suche .btn { height: 38px; flex: none; }

.ort-treffer {
  margin-top: 7px; border: 1px solid var(--line-soft); border-radius: var(--r-s);
  background: var(--surface); overflow: hidden; max-height: 260px; overflow-y: auto;
}
.ort-treffer[hidden] { display: none; }
.ort-treffer-zeile {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; font-family: inherit;
  padding: 8px 12px; border-bottom: 1px solid var(--line-soft);
}
.ort-treffer-zeile:last-child { border-bottom: 0; }
.ort-treffer-zeile:hover { background: var(--accent-soft); }
.ort-treffer-name { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.ort-treffer-sub {
  display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ort-treffer-leer { margin: 0; padding: 10px 12px; font-size: 12.5px; color: var(--muted); }

.ort-karte-huelle { padding: 0 16px 14px; }
.ort-karte {
  height: 420px; width: 100%; border-radius: var(--r-m);
  border: 1px solid var(--line); overflow: hidden; z-index: 0;
}
@media (max-width: 760px) { .ort-karte { height: 300px; } }

.karte-fehler {
  margin: 0; padding: 30px 16px; text-align: center;
  color: var(--muted); font-size: 13px;
}

.ort-name { display: block; font-weight: 600; }
.ort-koord { display: block; font-size: 11.5px; color: var(--muted); }
.ort-vorgabe { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.orte-akt { white-space: nowrap; text-align: right; }
.orte-akt form { display: inline; margin: 0; }

.dliste { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }

.ok {
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--surface); overflow: hidden;
}
.ok-kopf {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 13px; background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}
.ok-ort { font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.ok-meta { font-size: 11.5px; color: var(--muted); font-weight: 600; }

.dz { border-bottom: 1px solid var(--line-soft); }
.dz:last-child { border-bottom: 0; }
.dz > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 13px 9px 10px;
  border-left: 3px solid var(--fc);
}
.dz > summary::-webkit-details-marker { display: none; }
.dz > summary:hover { background: var(--surface-2); }
.dz[open] > summary { background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.dz.is-entwurf > summary { border-left-style: dashed; }
.dz.is-entwurf[open] > summary,
.dz.is-entwurf > summary:hover { background: var(--plan-soft); }

.dz-pfeil { display: inline-flex; color: var(--muted); transition: transform .15s; }
.dz[open] > summary .dz-pfeil { transform: rotate(90deg); }
.dz-zeit { font-size: 13px; font-weight: 700; color: var(--ink); min-width: 96px; }
.dz-n { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.dz-n.ist-offen { color: var(--accent); }
.dz-std { font-size: 11.5px; color: var(--muted); }
.dz-leute { display: flex; align-items: center; gap: 3px; }
.dz-leute .avatar { width: 22px; height: 22px; font-size: 9px; }

.dz > *:not(summary) { border-left: 3px solid transparent; }

@media (max-width: 620px) {
  .dliste { padding: 12px; }
  .dz-zeit { min-width: 0; }
  .dz-leute { display: none; }
}

.card:has(.ma-vorschlag) { overflow: visible; }
.ma-vorschlag {

  position: absolute; top: calc(100% + 5px); left: 0; right: auto; z-index: 40;
  min-width: 100%; width: max-content; max-width: min(380px, 92vw);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-s); box-shadow: 0 10px 26px rgb(0 0 0 / .13);
  max-height: 320px; overflow-y: auto;
}
.ma-vorschlag[hidden] { display: none; }

.tab-suche .ma-vorschlag { left: auto; right: 0; }
@media (max-width: 760px) {

  .tab-suche .ma-vorschlag {
    left: 0; right: auto; width: 100%; min-width: 0; max-width: none;
  }
  .tab-suche .ma-v-zeile { flex-wrap: wrap; }
}
.ma-v-zeile {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 11px; text-decoration: none; color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft); font-size: 13px;
  white-space: nowrap;
}
.ma-v-zeile:last-child { border-bottom: 0; }
.ma-v-zeile:hover, .ma-v-zeile.ist-an { background: var(--accent-soft); }
.ma-v-zeile .avatar { width: 24px; height: 24px; font-size: 9.5px; }
.ma-v-name { font-weight: 600; }
.ma-v-sub { font-size: 11.5px; color: var(--muted); }

.chip.g-leer { background: var(--crit-soft); color: var(--crit); font-weight: 700; }
.dz.ist-leer > summary { border-left-color: var(--crit); }
.dz.ist-leer .dz-zeit { color: var(--crit); }

.dnst-weg {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px 0; margin: 0;
}
.dnst-weg .hint-line { padding: 0; }

.row.is-extern { border-left-color: var(--line); }
.row.is-extern .emp-name { color: var(--ink-2); }
tr.is-extern td { color: var(--ink-2); }
tr.is-extern:hover { background: var(--surface-2); }

.pos-fix { display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; font-size:12px; color:var(--ok);
  opacity:.75; cursor:help; }

.mu-liste { display: grid; gap: 10px; padding: 14px 16px 4px; }
.mu { border: 1px solid var(--line); border-radius: var(--r-s);
      padding: 10px 12px; display: grid; gap: 8px; background: var(--surface); }
.mu-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mu-name { font-size: 14px; }
.mu-meta { font-size: 12px; color: var(--muted); }
.mu-kopf .spacer { flex: 1; }
.mu-weg { border: 0; background: none; color: var(--muted); cursor: pointer;
          font-size: 17px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.mu-weg:hover { background: var(--crit-soft); color: var(--crit); }
.mu-serie { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.mu-serie .field.sm { flex: 0 0 150px; }
.mu-serie input[type="date"] { width: 100%; height: 38px; padding: 0 12px;
                               border-radius: 10px; font-size: 13.5px; }
.mu-serie .hint-line { flex-basis: 100%; margin: 0; }

.wt-wahl { display: flex; gap: 4px; }
.wt input { position: absolute; opacity: 0; width: 0; height: 0; }
.wt span { display: grid; place-items: center; width: 30px; height: 30px;
           border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
           font-size: 11.5px; font-weight: 650; color: var(--muted);
           user-select: none; }
.wt input:checked + span { background: var(--accent); border-color: var(--accent);
                           color: #fff; }
.wt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.mu-namen { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.mu-namen.leer { color: var(--muted); font-style: italic; }
.mu-neu { border-top: 1px solid var(--line); }

.wk-kopie { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
            padding: 14px 16px; }
.wk-kopie .hint-line { flex-basis: 100%; margin: 0; }

.mo-gitter { padding: 8px 12px 14px; display: grid; gap: 4px; }
.mo-kopf, .mo-woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mo-kopf span { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
                color: var(--muted); font-weight: 650; padding: 2px 4px; }
.mo-tag { border: 1px solid var(--line); border-radius: var(--r-s);
          background: var(--surface); padding: 4px; min-height: 92px;
          display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mo-tag.ist-we { background: var(--surface-2); }
.mo-tag.ist-fremd { opacity: .45; }
.mo-tag.ist-heute { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mo-num { display: flex; align-items: center; gap: 4px; font-size: 11.5px;
          font-weight: 650; color: var(--ink-2); text-decoration: none;
          padding: 1px 3px; border-radius: 5px; }
.mo-num:hover { background: var(--surface-2); color: var(--ink); }
.mo-zahl { margin-left: auto; font-size: 10px; font-weight: 600;
           color: var(--muted); font-variant-numeric: tabular-nums; }

.mo-d { display: flex; gap: 4px; align-items: baseline; text-decoration: none;
        font-size: 10.5px; line-height: 1.35; padding: 1px 4px; border-radius: 4px;
        background: var(--accent-soft); color: var(--ink-2); min-width: 0; }
.mo-d:hover { background: var(--surface-2); }
.mo-d.is-entwurf { background: var(--plan-soft); }
.mo-d.is-fremd { background: var(--warn-soft); }
.mo-d.ist-leer { background: var(--crit-soft); color: var(--crit); font-weight: 600; }
.mo-zeit { font-variant-numeric: tabular-nums; font-weight: 650; flex: none; }
.mo-ort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mo-mehr { font-size: 10px; color: var(--muted); text-decoration: none;
           padding: 0 4px; }
.mo-mehr:hover { color: var(--accent); text-decoration: underline; }
.mo-warn { color: var(--crit); }
@media (max-width: 900px) {

  .mo-tag { min-height: 62px; }
  .mo-d .mo-ort { display: none; }
}

.mu-pos { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.mu-pos .field.sm { flex: 0 0 120px; }
.mu-pos input { width: 100%; height: 38px; padding: 0 12px; border-radius: 10px;
                font-size: 13.5px; }
.mu-pos .hint-line { flex-basis: 100%; margin: 0; }

.vl-hinweis { padding: 0 16px 12px; margin: 0; max-width: 78ch; }
.vl-zeit { font-variant-numeric: tabular-nums; white-space: nowrap;
           color: var(--muted); font-size: 12.5px; }
.vl-was { display: block; font-weight: 600; }
.vl-pfad { display: block; font-size: 11px; color: var(--muted);
           font-family: ui-monospace, monospace; }
.vl-erg { max-width: 42ch; }
.vl-meldung { display: block; font-size: 12.5px; }

.vl-bot { display: block; font-size: 12px; color: var(--ink-2);
          border-left: 2px solid var(--line); padding-left: 8px; margin-top: 3px; }
.vl-leer { color: var(--muted); }
.vl-fehler td { background: var(--crit-soft); }

.datei-echt { position: absolute; width: 1px; height: 1px; opacity: 0;
              overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.datei-knopf { cursor: pointer; }
.datei-echt:focus-visible + .datei-knopf { outline: 2px solid var(--accent);
                                           outline-offset: 2px; }
.datei-name { font-size: 12.5px; color: var(--muted); min-width: 0;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dichte-eng { display: none; }
:root[data-dichte="eng"] .dichte-weit { display: none; }
:root[data-dichte="eng"] .dichte-eng { display: block; }

:root[data-dichte="eng"] td { padding: 4px 12px; font-size: 12.5px; }
:root[data-dichte="eng"] th { padding-top: 6px; padding-bottom: 6px; }
:root[data-dichte="eng"] .avatar { width: 22px; height: 22px; font-size: 10px; }
:root[data-dichte="eng"] .pill,
:root[data-dichte="eng"] .chip { padding-top: 2px; padding-bottom: 2px; }
:root[data-dichte="eng"] .bar { display: none; }
:root[data-dichte="eng"] .screen { padding-top: 14px; }
:root[data-dichte="eng"] .stack { gap: 14px; }
:root[data-dichte="eng"] .card-head { padding-top: 9px; padding-bottom: 9px; }

.nowrap { white-space: nowrap; }

.op-liste { display: grid; }

.op { display: flex; align-items: center; gap: 14px; padding: 13px 16px;
      border-bottom: 1px solid var(--line-soft); text-decoration: none;
      color: var(--ink); }
.op:last-child { border-bottom: 0; }
.op:hover { background: var(--surface-2); }
.op-zahl { flex: none; min-width: 42px; height: 34px; padding: 0 8px;
           border-radius: 9px; display: grid; place-items: center;
           font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; }
.op-crit .op-zahl { background: var(--crit-soft); color: var(--crit); }
.op-warn .op-zahl { background: var(--warn-soft); color: var(--warn); }
.op-info .op-zahl { background: var(--surface-2); color: var(--muted); }
.op-text { display: grid; gap: 2px; min-width: 0; }
.op-text strong { font-size: 13.5px; font-weight: 650; }
.op-warum { font-size: 12.5px; color: var(--muted); }

.op-namen {
  display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5;
  color: var(--ink-2);
}

.op .spacer { flex: 1; }
.op-tun { flex: none; font-size: 12.5px; font-weight: 600; color: var(--accent);
          white-space: nowrap; }
.op-hinweis { padding: 0 16px 14px; margin: 0; max-width: 82ch; }

.op-leer { padding: 34px 16px 30px; text-align: center; display: grid;
           gap: 6px; justify-items: center; }
.op-leer h2 { margin: 0; }
.op-leer .hint-line { max-width: 56ch; }
.op-haken { width: 46px; height: 46px; border-radius: 50%; display: grid;
            place-items: center; background: var(--ok-soft); color: var(--ok);
            font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.nav-badge.crit { background: var(--crit-soft); color: var(--crit); }

.p-wait { background: var(--wait-soft); color: var(--wait); }
.s-wait .stripe { background: var(--wait); }

.week .ev { border-left-width: 5px; }
.ev.st-ok   { border-left-color: var(--ok);   background: var(--ok-soft); }
.ev.st-done { border-left-color: var(--done); background: var(--done-soft); }
.ev.st-warn { border-left-color: var(--warn); background: var(--warn-soft); }
.ev.st-crit { border-left-color: var(--crit); background: var(--crit-soft); }
.ev.st-wait { border-left-color: var(--wait); background: var(--wait-soft); }
.ev.st-idle { border-left-color: var(--line); background: var(--surface-2); }

.day.today .ev.st-ok   { background: var(--ok-soft); }
.day.today .ev.st-done { background: var(--done-soft); }
.day.today .ev.st-warn { background: var(--warn-soft); }
.day.today .ev.st-crit { background: var(--crit-soft); }
.day.today .ev.st-wait { background: var(--wait-soft); }

.best-tun, .anw-tun { display: inline-flex; gap: 2px; margin-left: 6px;
                      vertical-align: middle; }
.best-tun form, .anw-tun form { display: inline; margin: 0; }
.best-ja, .best-nein, .anw-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1;
  padding: 3px 6px;
}
.best-ja:hover, .anw-btn-ja:hover { border-color: var(--ok); color: var(--ok); }
.best-nein:hover, .anw-btn-nein:hover { border-color: var(--crit); color: var(--crit); }
.anw-btn:hover { border-color: var(--wait); color: var(--wait); }

.tl-anw { white-space: nowrap; }
.anw { font-weight: 700; }
.anw-ja { color: var(--ok); }
.anw-nein { color: var(--crit); }
.anw-offen { color: var(--wait); }
.anw-leer { color: var(--muted); }
.mo-wait { color: var(--wait); }

.statuscell { flex-wrap: wrap; row-gap: 4px; }

.gruppe-waehlen.allein { margin-left: 0; }
.chip-select {
  -webkit-appearance: none; appearance: none;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  line-height: 1.45; padding: 2.5px 22px 2.5px 9px;
  border-radius: 12px; border: 1px solid transparent;
  background-color: var(--idle-soft); color: var(--idle);

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%238A97A8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center;
  cursor: pointer; max-width: 170px; text-overflow: ellipsis;
}
.chip-select:hover { border-color: currentColor; }
.chip-select:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.chip-select.ja        { background-color: var(--ok-soft);     color: var(--ok); }
.chip-select.g-shayan  { background-color: var(--accent-soft); color: var(--accent); }
.chip-select.g-mind    { background-color: var(--ok-soft);     color: var(--ok); }
.chip-select.g-sh      { background-color: var(--accent-soft); color: var(--accent); }
.chip-select.g-m       { background-color: var(--ok-soft);     color: var(--ok); }

.chip-select.abgeleitet {
  background-color: transparent; border-color: var(--line);
  color: var(--ink-2); font-weight: 500;
}

.ack-col { text-align: center; width: 78px; }
.ack-col .ackdot { display: inline-grid; }
.ack-leer { color: var(--muted); cursor: help; }

.statuszelle { white-space: nowrap; }
.statuszelle .best-tun { vertical-align: middle; }

.filterbar input[type="checkbox"] {
  appearance: auto; -webkit-appearance: auto;
  height: 17px; width: 17px; min-width: 0; padding: 0;
  border: 0; background: none; border-radius: 0;
  accent-color: var(--accent); cursor: pointer;
}
.fgroup.fcheck { flex-direction: row; align-items: center; gap: 8px; height: 38px; }
.fgroup.fcheck label {
  text-transform: none; letter-spacing: 0; font-size: 13.5px;
  font-weight: 500; color: var(--ink); cursor: pointer; white-space: nowrap;
}

.filterbar .seg-unten { margin-left: auto; align-self: flex-end; }

.v26 { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 16px;
       align-items: start; }

.v26-rail { position: sticky; top: 12px; display: flex; flex-direction: column;
            gap: 12px; }
.v26-kal, .v26-orte { background: var(--surface); border: 1px solid var(--line);
                      border-radius: var(--r-m); padding: 10px 11px; }
.v26-kal-kopf { display: flex; align-items: center; justify-content: space-between;
                gap: 6px; margin-bottom: 7px; font-size: 13px; }

.v26-kal-gitter { width: 100%; table-layout: fixed; border-collapse: collapse;
                  font-size: 11px;

                  min-width: 0; }
.v26-kal-gitter th { font-weight: 600; color: var(--muted); padding: 2px 0;
                     font-size: 10.5px; text-transform: uppercase; }
.v26-kal-gitter td { padding: 0; text-align: center; }
.v26-kal-gitter tr.ist-woche { background: var(--accent-soft);
                               border-radius: var(--r-s); }
.v26-kw { color: var(--muted); font-size: 10px; }
.v26-kt { display: block; padding: 3px 0; border-radius: 6px; color: var(--ink);
          text-decoration: none; }
.v26-kt:hover { background: var(--surface-2); }
.v26-kt.ist-fremd { color: var(--muted-2, var(--muted)); opacity: .5; }
.v26-kt.ist-drin { font-weight: 700; color: var(--accent); }

.v26-orte { max-height: 46vh; overflow-y: auto; }
.v26-orte-kopf { display: flex; align-items: center; justify-content: space-between;
                 font-size: 11px; text-transform: uppercase; letter-spacing: .02em;
                 color: var(--muted); font-weight: 650; margin-bottom: 6px; }
.v26-fam > summary { cursor: pointer; display: flex; align-items: center; gap: 6px;
                     padding: 4px 0; font-size: 12.5px; font-weight: 650; }
.v26-fam-name { flex: 1; }
.v26-ort { display: flex; align-items: center; gap: 6px; padding: 3px 0 3px 10px;
           font-size: 12px; cursor: pointer; }
.v26-ort span:nth-of-type(1) { flex: 1; }
.v26-ort-n { color: var(--muted); font-size: 10.5px; }
.v26-orte .btn { margin-top: 8px; width: 100%; }

.v26-haupt { background: var(--surface); border: 1px solid var(--line);
             border-radius: var(--r-m); overflow: hidden; }
.v26-kopf { flex-wrap: wrap; gap: 8px; }
.v26-scroll { overflow: auto; max-height: calc(100vh - 210px); }

.v26-gitter { table-layout: fixed; }
.v26-gitter thead th:not(.v26-eck) { width: calc((100% - 96px) / 7); }
.v26-gitter { width: 100%; border-collapse: separate; border-spacing: 0;
              font-size: 12px; }
.v26-gitter thead th { position: sticky; top: 0; z-index: 3;
                       background: var(--surface-2); padding: 7px 8px;
                       border-bottom: 1px solid var(--line);
                       text-align: left; font-weight: 650; }
.v26-eck { position: sticky; left: 0; z-index: 4 !important;
           width: 172px; min-width: 172px; max-width: 172px;
           background: var(--surface-2); }
.v26-tag { display: block; font-size: 12.5px; }
.v26-tagzahl { display: block; font-size: 10.5px; color: var(--muted);
               font-weight: 500; }
.v26-gitter th.ist-we, .v26-gitter td.ist-we { background: var(--surface-2); }
.v26-gitter th.ist-heute, .v26-gitter td.ist-heute {
  background: var(--accent-soft); }
.v26-gitter td { vertical-align: top; padding: 5px; border-bottom: 1px solid
                 var(--line-soft); border-left: 1px solid var(--line-soft);
                 min-width: 132px; }

.v26-abschnitt th { position: sticky; left: 0; background: var(--ink);
                    color: #fff; padding: 6px 10px; text-align: left;
                    font-weight: 650; font-size: 12.5px; }

.v26-ab-inhalt { display: flex; align-items: center; gap: 9px;
                 position: sticky; left: 9px; width: max-content;
                 max-width: 100%; }
.v26-fam-marke { font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
                 background: rgba(255,255,255,.18); padding: 2px 7px;
                 border-radius: 99px; }
.v26-ortname { font-size: 13px; }
.v26-ab-zahlen { font-size: 11px; font-weight: 500; opacity: .82; }

.v26-fenster { position: sticky; left: 0; z-index: 2; background: var(--surface);
               width: 172px; min-width: 172px;
               padding: 6px 8px; text-align: left;
               border-bottom: 1px solid var(--line-soft); }
.v26-pille { display: inline-block; padding: 3px 9px; border-radius: 99px;
             background: var(--accent-soft); color: var(--accent);
             font-weight: 650; font-size: 11.5px; white-space: nowrap; }

.v26-karte { display: block; text-decoration: none; color: var(--ink);
             border-radius: 8px; padding: 5px 7px; margin-bottom: 4px;
             border: 1px solid var(--line); background: var(--surface-2); }
.v26-karte:hover { border-color: var(--accent); }

.v26-karte.ist-luecke { background: var(--warn-soft, #FFF7E6);
                        border-color: #E8C37A; }
.v26-karte.ist-teil { background: var(--teil-soft, #FBF4D2);
                      border-color: #DCC65E; }
.v26-karte.ist-voll { background: var(--ok-soft, #E9F7EF); border-color: #9AD3B0; }

.v26-k-kopf { display: flex; align-items: center; gap: 5px; }
.v26-k-zeit { font-weight: 700; font-size: 11.5px; }
.v26-k-marke { font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em;
               background: rgba(0,0,0,.08); padding: 1px 5px; border-radius: 99px; }
.v26-k-leute { display: block; margin-top: 2px; line-height: 1.35; }
.v26-k-name { display: block; font-size: 11px; }
.v26-k-mehr { font-size: 10.5px; color: var(--muted); }

.v26-rest-blase { position: fixed; z-index: 65; display: block;
                  max-width: 260px; padding: 6px 9px; border-radius: 8px;
                  background: var(--surface); border: 1px solid var(--line);
                  box-shadow: 0 8px 22px rgba(15, 23, 32, .16);
                  font-size: 11px; line-height: 1.45; color: var(--ink);
                  pointer-events: none; }
.v26-rest-blase[hidden] { display: none; }
.v26-k-frei { display: inline-block; margin-top: 3px; font-size: 10px;
              font-weight: 650; color: var(--crit); }

.v26-plus { display: block; text-align: center; text-decoration: none;
            border: 1px dashed var(--line); border-radius: 8px; padding: 2px 0;
            color: var(--muted); font-weight: 700; line-height: 1.4; }
.v26-plus:hover { border-color: var(--ok); color: var(--ok);
                  background: var(--ok-soft, #E9F7EF); }

@media (max-width: 1000px) {
  .v26 { grid-template-columns: 1fr; }
  .v26-rail { position: static; }
  .v26-orte { max-height: none; }
}

.v26-fam > summary { list-style: none; }
.v26-fam-box { display: inline-flex; align-items: center; margin: 0; cursor: pointer; }
.v26-fam-box input { cursor: pointer; }

.v26-neu { position: fixed; z-index: 60; width: 320px;
           max-height: calc(100vh - 16px); overflow-y: auto;
           background: var(--surface); border: 1px solid var(--accent);
           border-radius: var(--r-m); box-shadow: 0 18px 48px rgba(0,0,0,.24);
           padding: 12px; }
.v26-neu[hidden] { display: none; }
button.v26-plus { width: 100%; background: none; cursor: pointer;
                  font-size: 13px; font-family: inherit; }

.og-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
             gap: 6px 14px; padding: 12px 16px 0; }
.og-zeile { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.og-ort { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.og-ort > .og-n { color: var(--muted); font-size: 10.5px; }
.og-feld { width: 140px; padding: 5px 8px; border-radius: var(--r-s);
           border: 1px solid var(--line); background: var(--surface-2);
           font-family: inherit; font-size: 12px; color: var(--ink); }
.og-feld:focus { border-color: var(--accent); outline: none;
                 background: var(--surface); }
.og-feld.ist-eigen { border-color: var(--accent); font-weight: 600; }

.auswahl-reihe { display: flex; flex-wrap: wrap; gap: 4px 22px;
                 align-items: flex-start; }
.auswahl-reihe > details { flex: 0 0 auto; }
.auswahl-reihe > details[open] { flex: 1 0 100%; }

.person-trenner { position: sticky; top: 0; z-index: 1;
                  padding: 6px 8px 4px; margin-top: 4px;
                  font-size: 10.5px; text-transform: uppercase;
                  letter-spacing: .03em; font-weight: 700; color: var(--muted);
                  background: var(--surface-2);
                  border-top: 1px solid var(--line); }

.v26-fam > summary::-webkit-details-marker { display: none; }
.v26-fam > summary::marker { content: ""; }
.v26-fam > summary::before {
  content: "+"; display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex: none; margin-right: 2px;
  border: 1px solid var(--line); border-radius: 4px;
  font-size: 11px; font-weight: 700; line-height: 1; color: var(--muted);
  background: var(--surface-2);
}
.v26-fam[open] > summary::before { content: "\2212"; }
.v26-fam > summary:hover::before { border-color: var(--accent); color: var(--accent); }

.screen-planung { padding: 9px 10px 24px; }
.screen-planung .stack { gap: 9px; }
.screen-planung .card-head { padding: 9px 14px; }
.anleg-kopf { cursor: pointer; }

.anleg-kopf .anleg-pfeil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 14px; font-weight: 700; line-height: 1;
}
.anleg-kopf:hover .anleg-pfeil { background: var(--accent); color: #fff; }
details[open] > .anleg-kopf .anleg-pfeil { background: var(--accent); color: #fff; }

.v26-neu { width: 330px; padding: 10px; gap: 8px; display: flex;
           flex-direction: column; }
.v26-neu .field { gap: 3px; }
.v26-neu .field label,
.v26-neu .field label:first-child {
  font-size: 9.5px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted); font-weight: 650;
}
.v26-neu input[type="text"], .v26-neu input[type="date"],
.v26-neu input[type="number"], .v26-neu input[type="search"],
.v26-neu textarea, .v26-neu select {
  padding: 5px 8px; font-size: 12px; border-radius: 7px;
}
.v26-neu textarea { min-height: 34px; }
.v26-neu .planform-foot { margin-top: 2px; gap: 6px; }
.v26-neu .btn { padding: 6px 12px; font-size: 12.5px; }

.v26-neu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.v26-neu > .field { grid-column: 1 / -1; }
.v26-neu > .field.sm { grid-column: span 1; }
.v26-neu > .planform-foot { grid-column: 1 / -1; display: flex;
                            justify-content: flex-end; }

.v26-dienst .planform { display: grid; grid-template-columns: 1fr 1fr;
                        gap: 8px 10px; margin-top: 6px; }
.v26-dienst .planform > .field { grid-column: 1 / -1; gap: 3px; }
.v26-dienst .planform > .field.sm { grid-column: span 1; }
.v26-dienst .planform > .planform-foot { grid-column: 1 / -1;
                        display: flex; justify-content: flex-end; }
.v26-dienst .planform .field label,
.v26-dienst .planform .field label:first-child {
  font-size: 9.5px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted); font-weight: 650;
}
.v26-dienst .planform input[type="text"],
.v26-dienst .planform input[type="date"],
.v26-dienst .planform input[type="number"] {
  padding: 5px 8px; font-size: 12px; border-radius: 7px;
}
.v26-dienst .planform .btn { padding: 6px 12px; font-size: 12.5px; }

#v26-d-titel { font-size: 12px; }
#v26-dienst .people-list { max-height: 140px; }

#v26-dienst .planform { gap: 5px 8px; margin-top: 4px; }
#v26-dienst .planform .field { gap: 2px; }
#v26-dienst .planform label { font-size: 9px; }
#v26-dienst input, #v26-dienst select, #v26-dienst textarea {
  height: auto; min-height: 0; padding: 3px 8px; font-size: 12px;
  border-radius: 7px;
}
#v26-dienst .planform-foot { margin-top: 2px; }
#v26-dienst .btn { padding: 4px 11px; font-size: 12px; }
#v26-dienst summary { padding: 4px 8px; font-size: 11.5px; }

#v26-dienst .umfr-kopf, #v26-dienst details summary > * { line-height: 1.25; }
#v26-dienst details > summary { min-height: 0; }
#v26-dienst .hint-line { font-size: 10px; margin: 3px 0; }
#v26-dienst .v26-d-inhalt > details { margin: 2px 0; }

#v26-dienst .daygroup > summary { padding: 3px 8px; display: flex;
                                  align-items: baseline; gap: 8px;
                                  flex-wrap: wrap; }
#v26-dienst .dg-label { font-size: 11.5px; }
#v26-dienst .dg-count { font-size: 9.5px; }
#v26-dienst .daygroup { margin: 1px 0; }
#v26-dienst .person, #v26-dienst .person span,
#v26-dienst .person label { font-size: 11px; }
#v26-dienst .people > summary, #v26-dienst summary { font-size: 11.5px; }
#v26-dienst .people-filter { padding: 3px 7px; font-size: 11.5px; margin: 4px 0; }
#v26-dienst .person { padding: 2px 7px; font-size: 11.5px; }
.v26-dienst summary { font-size: 12px; }
.v26-dienst .people > summary { padding: 4px 7px; }
.v26-dienst .people-filter { padding: 4px 7px; font-size: 11.5px; }
.v26-dienst .people-list { max-height: 168px; }
.v26-dienst .person { padding: 2px 7px; font-size: 11.5px; gap: 6px; }
.v26-dienst .person input[type="checkbox"] { width: 13px; height: 13px; }
.v26-dienst .person .gruppe, .v26-dienst .person .chip,
.v26-dienst .person small { font-size: 10px; }
.v26-dienst .person-trenner { font-size: 10px; padding: 3px 7px; }
.v26-dienst .btn { padding: 5px 11px; font-size: 12px; }
.v26-dienst .btn-klein { padding: 4px 9px; font-size: 11.5px; }
.v26-dienst .hint-line { font-size: 10.5px; }
.v26-dienst .namechip { font-size: 11px; padding: 2px 7px; }
.v26-dienst .pub-was, .v26-dienst .pub-liste { font-size: 11px; }
.v26-dienst .link-btn { font-size: 11.5px; }

.v26-karte { cursor: grab; }
.v26-karte.ist-zug { opacity: .45; cursor: grabbing; }
td.v26-ueber { outline: 2px dashed var(--accent); outline-offset: -3px; }
td.v26-ziel { outline: 2px solid var(--accent); outline-offset: -3px; }
.v26-schieben { position: fixed; z-index: 70; width: 270px;
                background: var(--surface); border: 1px solid var(--line);
                border-radius: 11px; padding: 10px 11px;
                box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.v26-schieben[hidden] { display: none; }
.v26-s-titel { margin: 0 0 8px; font-size: 12px; font-weight: 650; }
.v26-s-knoepfe { display: flex; gap: 7px; }
.v26-schieben .hint-line { font-size: 10.5px; margin: 8px 0 4px; }
.v26-schieben .link-btn { font-size: 11.5px; }

.screen-planung .banner.b-ok { display: none; }

.screen-planung .card:has(> .filterbar.nur-reiter) { display: none; }
.topbar-right .segmented { margin-right: 10px; }
.topbar-right .seg-item { padding: 4px 10px; font-size: 12px; }
.topbar-right .seg-unten { box-shadow: none; }

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; height: auto; padding-top: 6px; padding-bottom: 6px; }
  .topbar-right { display: contents; }
  .topbar-right .segmented { display: flex; flex: 1 0 100%; order: 9;
                             margin: 6px 0 0; }
  .topbar-right .seg-item { flex: 1; text-align: center; padding: 7px 4px; }
  .live-dot { margin-left: auto; }
}

.export-klapp { position: relative; }
.export-klapp > summary { list-style: none; cursor: pointer;
                          white-space: nowrap; }
.export-klapp > summary::-webkit-details-marker { display: none; }
.export-form { position: absolute; right: 0; top: 100%; z-index: 40;
               width: 230px; margin-top: 8px; padding: 11px 12px;
               background: var(--surface); border: 1px solid var(--line);
               border-radius: 12px; box-shadow: 0 16px 38px rgba(0,0,0,.20);
               display: flex; flex-direction: column; gap: 8px;
               text-align: left; }
.export-form .field { gap: 2px; margin: 0; }
.export-form label, .export-form .field label:first-child {
  font-size: 9px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); font-weight: 650;
}
.export-form input { width: 100%; height: auto; min-height: 0;
                     padding: 4px 8px; font-size: 12px; border-radius: 7px; }
.export-form .hint-line { font-size: 10px; margin: 0; line-height: 1.35; }
.export-form .planform-foot { display: block; margin: 0; }
.export-form .btn { width: 100%; padding: 5px 10px; font-size: 12.5px; }
.zahl-filter { border: 1px solid transparent; background: none; padding: 1px 6px;
               border-radius: 99px; cursor: pointer; font: inherit;
               font-weight: 700; color: inherit; }
.zahl-filter:hover { border-color: currentColor; }
.zahl-filter.ist-an { background: currentColor; border-color: currentColor; }
.zahl-filter.ist-an::after { content: " \00d7"; }
.zahl-filter.mo-warn.ist-an, .zahl-filter.mo-wait.ist-an { color: #fff; }
.zahl-filter.mo-warn.ist-an { background: var(--warn, #b3261e); }
.zahl-filter.mo-wait.ist-an { background: var(--accent); }
.v26-offen { border: 1px solid var(--line); background: var(--surface);
             color: var(--muted); border-radius: 99px; cursor: pointer;
             font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
             text-transform: uppercase; padding: 3px 10px; margin-left: 10px; }
.v26-offen:hover { border-color: var(--accent); color: var(--accent); }
.v26-offen.ist-an { background: var(--accent); border-color: var(--accent);
                    color: #fff; }
.v26-k-wartet { font-size: 11px; font-weight: 700; color: #9a6a00;
                background: #fff4d6; border-radius: 99px;
                padding: 0 6px; margin-right: 5px; }

.v26n-zut { min-width: 0; }
.v26n-zahl { text-transform: none; letter-spacing: 0; font-weight: 600;
             color: var(--muted); font-size: 10px; }
.v26n-zahl.ist-gesetzt { color: var(--accent); }
.v26n-suche { width: 100%; text-transform: none; letter-spacing: 0;
              color: var(--ink); }
.v26n-liste { max-height: 150px; overflow-y: auto; margin-top: 4px;
              border: 1px solid var(--line); border-radius: 8px;
              background: var(--surface-2); }
.v26n-gruppe { position: sticky; top: 0; z-index: 1;
               padding: 4px 8px; font-size: 9.5px; font-weight: 700;
               text-transform: uppercase; letter-spacing: .03em;
               color: var(--muted); background: var(--surface-2);
               border-bottom: 1px solid var(--line-soft); }

.v26n-zeile { display: flex; align-items: center; gap: 8px;
              padding: 4px 8px; cursor: pointer;
              font-size: 12px; font-weight: 500; text-transform: none;
              letter-spacing: 0; color: var(--ink); }
.v26n-zeile:hover { background: var(--surface); }
.v26n-zeile input[type="checkbox"] {
  flex: none; width: 14px; height: 14px; min-width: 14px; margin: 0;
  padding: 0; border-radius: 4px;
}
.v26n-zeile span { flex: 1; min-width: 0; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap;
                   font-size: 12px; text-transform: none; color: var(--ink);
                   letter-spacing: 0; }
.v26n-zeile:has(input:checked) { background: var(--accent-soft);
                                 font-weight: 600; }

.screen-planung .card-head h2 { font-size: 13px; }
.screen-planung .eyebrow { font-size: 10px; }
.screen-planung .hint-line { font-size: 11px; }
.screen-planung .field label,
.screen-planung .field label:first-child { font-size: 9.5px; }
.screen-planung .empty { padding: 16px; font-size: 12px; }

.mu-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
            gap: 10px; padding: 10px 14px 12px; }
.mu { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-s);
      padding: 9px 11px; background: var(--surface-2); }
.mu-kopf { gap: 6px; font-size: 12.5px; }
.mu-name { font-size: 13px; }
.mu-meta { font-size: 11px; color: var(--muted); }
.mu-pos, .mu-serie { flex-wrap: wrap; gap: 6px; align-items: flex-end;
                     margin-top: 6px; }
.mu-pos .field.sm input, .mu-serie .field.sm input { padding: 4px 7px;
                                                     font-size: 11.5px; }
.mu-pos .field.sm { max-width: 84px; }
.mu-serie .field.sm { max-width: 132px; }
.mu .btn { padding: 4px 10px; font-size: 11.5px; }
.mu .wt { font-size: 10.5px; }
.mu .wt span { padding: 3px 6px; }
.mu-leute > summary { font-size: 11.5px; padding: 4px 0; }

.v26-eck, .v26-fenster { width: 96px; min-width: 96px; max-width: 96px; }
.v26-pille { padding: 2px 7px; font-size: 10.5px; }
.v26-gitter { font-size: 11.5px; }
.v26-gitter thead th { padding: 5px 7px; }
.v26-gitter td { padding: 4px; min-width: 118px; }
.v26-tag { font-size: 11.5px; }
.v26-tagzahl { font-size: 10px; }
.v26-abschnitt th { padding: 4px 9px; font-size: 11.5px; }
.v26-ortname { font-size: 12px; }
.v26-ab-zahlen { font-size: 10px; }
.v26-k-zeit { font-size: 11px; }
.v26-k-name { font-size: 10.5px; }
.v26-karte { padding: 4px 6px; margin-bottom: 3px; }

.v26-ort.ist-leer span { color: var(--muted); }

.v26-neu { grid-template-columns: repeat(4, 1fr); width: 360px; }
.v26-neu > .field { grid-column: span 4; }
.v26-neu > .field.v26n-b2 { grid-column: span 2; }
.v26-neu > .field.v26n-b4 { grid-column: span 1; }
.v26-neu > .v26n-sma { grid-column: span 4; display: flex; align-items: center;
                       gap: 7px; font-size: 11px; color: var(--ink); }
.v26-neu > .v26n-sma input { width: 14px; height: 14px; flex: none; margin: 0; }
.v26-neu > .v26n-zut { grid-column: span 4; }
.v26-neu > .planform-foot { grid-column: span 4; }

.v26-dienst { position: fixed; z-index: 60; width: 330px;
              max-height: calc(100vh - 16px); overflow-y: auto;
              background: var(--surface); border: 1px solid var(--accent);
              border-radius: var(--r-m); box-shadow: 0 18px 48px rgba(0,0,0,.24); }
.v26-dienst[hidden] { display: none; }
.v26-d-kopf { display: flex; align-items: center; gap: 8px;
              padding: 8px 12px; border-bottom: 1px solid var(--line-soft);
              font-size: 12.5px; position: sticky; top: 0;
              background: var(--surface); z-index: 2; }
.v26-d-tun { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
             padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.v26-d-tun:empty { display: none; }

.v26-d-tun .hint-line { flex: 1 0 100%; margin: 0; }
.v26-d-tun form { margin: 0; }
.v26-d-tun form { margin: 0; }
.v26-d-inhalt { padding: 8px 12px 12px; font-size: 12px; }
.v26-d-inhalt .auswahl-reihe { flex-direction: column; gap: 2px; }
.v26-d-inhalt .auswahl-reihe > details { flex: 1 0 100%; }
.v26-d-inhalt .people-list { max-height: 210px; }
button.v26-karte { display: block; width: 100%; text-align: left;
                   font-family: inherit; cursor: pointer; }

.filterbar.nur-reiter { padding: 6px 10px; justify-content: flex-end; }
.filterbar.nur-reiter > * { display: none; }
.filterbar.nur-reiter > .segmented { display: inline-flex; }

.v26-abschnitt.ist-leer th { background: var(--muted); }
.v26-abschnitt.ist-leer .v26-ab-zahlen { opacity: .9; }
.v26-pille.ist-leer { background: var(--surface-2); color: var(--muted);
                      font-weight: 600; }

.screen-nachrichten .card-head h2,
.screen-umfragen .card-head h2 { font-size: 17px; }
.screen-nachrichten .compose .field label:first-child,
.screen-umfragen .compose .field label:first-child { font-size: 13px;
  letter-spacing: .01em; color: var(--ink-2, var(--ink)); font-weight: 700; }
.screen-nachrichten .compose textarea,
.screen-umfragen .compose textarea { font-size: 14px; }
.screen-nachrichten .pick, .screen-umfragen .pick { font-size: 13.5px; }
.screen-nachrichten .people > summary,
.screen-umfragen .people > summary { font-size: 13.5px; }

.og-gitter { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
             gap: 4px 14px; padding: 10px 14px 0; }
.og-zeile { font-size: 12px; gap: 6px; }
.og-feld { width: 120px; padding: 4px 7px; font-size: 11.5px; }
.og-firma { width: 104px; }
.og-ort { font-size: 12px; }

.v26-orte-tun { display: inline-flex; gap: 10px; }

.verlauf-kopf { cursor: pointer; list-style: none; }
.verlauf-kopf::-webkit-details-marker { display: none; }
.verlauf-kopf::marker { content: ""; }
#live-verlauf[open] > .verlauf-kopf .anleg-pfeil { background: var(--accent);
                                                   color: #fff; }
#live-verlauf[open] > .verlauf-kopf .anleg-pfeil::before { content: "\2212"; }
#live-verlauf[open] > .verlauf-kopf .anleg-pfeil { font-size: 0; }
#live-verlauf[open] > .verlauf-kopf .anleg-pfeil::before { font-size: 14px; }

.v26n-zeile[hidden] { display: none; }
.v26n-gruppe[hidden] { display: none; }

.v26-karte { cursor: pointer; }
.v26-k-kopf { display: flex; align-items: center; gap: 4px; }
.v26-k-kopf .spacer { margin-left: auto; }
.v26-k-zeile { display: flex; align-items: center; gap: 3px; }
.v26-k-zeile .v26-k-name { flex: 1; min-width: 0; overflow: hidden;
                           text-overflow: ellipsis; white-space: nowrap; }
.v26-k-tun { margin: 0; display: inline-flex; }
.v26-k-tun button { border: 0; background: none; cursor: pointer;

                    padding: 5px 6px; margin: -5px 0;
                    line-height: 1; color: var(--muted);
                    font-size: 12px; border-radius: 4px; }
.v26-k-tun button:hover { color: var(--crit); background: var(--crit-soft); }
.v26-k-weg { font-size: 11px !important; }
.v26-k-fix { color: var(--ok); font-size: 10px; padding: 0 2px; }

@media (hover: hover) {
  .v26-k-tun { opacity: 0; transition: opacity .12s; }
  .v26-karte:hover .v26-k-tun, .v26-k-tun:focus-within { opacity: 1; }
}

.leer-zahl { display: inline-flex; align-items: center; justify-content: center;
             min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px;
             background: var(--crit-soft); color: var(--crit);
             font-size: 10.5px; font-weight: 700; line-height: 1; }

.ok-offen { color: var(--crit); font-weight: 700; font-size: 13px;
            letter-spacing: -.01em; white-space: nowrap; }
.leer-zahl { display: none; }

.v26-orte-kopf { flex-wrap: wrap; gap: 4px 8px; }
.v26-orte-kopf > span:first-child { flex: none; }
.v26-orte-tun { margin-left: auto; gap: 8px; flex: none; }
.v26-orte-tun .link-btn { font-size: 11px; }

.v26-gitter td .v26-plus {
  border-color: transparent; color: transparent; background: none;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.v26-gitter td:hover .v26-plus,
.v26-gitter td:focus-within .v26-plus {
  border-color: var(--line); color: var(--muted);
}
.v26-gitter td .v26-plus:hover,
.v26-gitter td .v26-plus:focus-visible {
  border-color: var(--ok); color: var(--ok);
  background: var(--ok-soft, #E9F7EF);
}

.v26-abschnitt th {
  background: var(--surface-2); color: var(--ink);
  box-shadow: inset 3px 0 0 var(--accent);
  border-bottom: 1px solid var(--line);
}
.v26-fam-marke { background: rgba(0,0,0,.06); color: var(--muted); }
.v26-ab-zahlen { opacity: 1; color: var(--muted); }

.v26-railtun {
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); border-radius: 8px; cursor: pointer;
  width: 26px; height: 26px; line-height: 1; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 8px; flex: none;
}
.v26-railtun:hover { border-color: var(--accent); color: var(--accent); }
.v26.rail-zu { grid-template-columns: minmax(0, 1fr); gap: 0; }
.v26.rail-zu .v26-rail { display: none; }
@media (max-width: 1000px) { .v26-railtun { display: none; } }

.v26-gitter td.ist-heute {
  border-bottom-color: var(--line);
  border-left-color: var(--line);
  border-bottom-color: color-mix(in srgb, var(--accent) 22%, transparent);
  border-left-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

.v26-abschnitt th {
  background: var(--ground);
  background: color-mix(in srgb, var(--ink) 9%, var(--surface));
  box-shadow: inset 4px 0 0 var(--accent);
}
.v26-ortname { font-weight: 700; }
.v26-fam-marke {
  background: rgba(0,0,0,.08);
  background: color-mix(in srgb, var(--ink) 13%, transparent);
  color: var(--ink-2);
}

.v26-abschnitt.ist-leer th {
  background: var(--surface-2);
  box-shadow: inset 4px 0 0 var(--line);
  color: var(--muted);
}
.v26-abschnitt.ist-leer .v26-ab-zahlen { opacity: 1; color: var(--muted); }
.v26-abschnitt.ist-leer .v26-fam-marke { color: var(--muted); }

.v26-gitter td .v26-plus {
  border-color: transparent;
  background: rgba(128,138,152,.10);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: #C3CBD6;
  color: color-mix(in srgb, var(--muted) 32%, transparent);
}
.v26-gitter td:hover .v26-plus,
.v26-gitter td:focus-within .v26-plus {
  border-color: var(--line);
  background: rgba(128,138,152,.16);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--muted);
}
.v26-gitter td .v26-plus:hover,
.v26-gitter td .v26-plus:focus-visible {
  border-color: var(--ok); color: var(--ok);
  background: var(--ok-soft, #E9F7EF);
}

@media (pointer: coarse) {
  .v26-ort, .mf-zeile, .kasten-label { min-height: 44px; }
  .v26-fam-box, .v26-fam summary { min-height: 44px; }
  .v26-ort-box, .v26-gruppe-box { width: 20px; height: 20px; }
  .filterbar .mf-zeile input[type="checkbox"],
  .mf-zeile input[type="checkbox"], .kasten-label input[type="checkbox"] {
    width: 20px; height: 20px;
  }
  .v26-k-tun button, .pos-weg button, .mu-weg, .anw-btn {
    min-width: 44px; min-height: 44px;
  }
  .v26-plus, .v26-kt { min-height: 44px; }
  .v26-kt { display: flex; align-items: center; }
  .mf-alle, .mf-keine, .link-btn { min-height: 44px; }
  .btn, .seg-item, .daynav-btn, .nav-knopf, .icon-btn, .rmenu summary,
  .rmenu-btn, .mf-keine {
    min-height: 44px; min-width: 44px;
  }

  .card summary, .dz > summary, details.people > summary { min-height: 44px; }
}

@media (max-width: 560px) {
  .searchwrap { min-width: 0; max-width: 100%; }
  .mu, .mu-kopf, .mf-panel, .mf-kopf, .mf-schnell { max-width: 100%; }
  .mu-kopf, .mf-schnell { flex-wrap: wrap; }
  .mf-suche { max-width: 100%; box-sizing: border-box; }

  .stack > *, .card { max-width: 100%; }
}

.einst-gitter { display: grid; gap: 10px;
                grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.einst-kachel { display: flex; gap: 12px; align-items: flex-start;
                padding: 13px 14px; border: 1px solid var(--line);
                border-radius: 12px; text-decoration: none; color: inherit;
                background: var(--surface); }
.einst-kachel:hover { border-color: var(--accent); background: var(--accent-soft); }
.einst-bild { flex: 0 0 auto; color: var(--muted); margin-top: 1px; }
.einst-kachel:hover .einst-bild { color: var(--accent); }
.einst-text { display: flex; flex-direction: column; gap: 3px; }
.einst-text strong { font-size: 14px; }
.einst-sub { font-size: 12px; color: var(--muted); line-height: 1.35; }