/* Zeiterfassung – Praxisdemo GfK Lüdinghausen
   Visuelle Orientierung an der Praxiswebsite (Bordeaux + Sandgold),
   eigenständiges Produkt, keine Klischees. */

:root {
  --brand: #8A2524;
  --brand-dark: #621A19;
  --brand-soft: #F6EDEC;
  --accent: #CEB383;
  --accent-soft: #F7F1E6;
  --bg: #EBE7E0;
  --card: #ffffff;
  --text: #2A2A2A;
  --mute: #636363;
  --line: #D8D2C8;
  --warn: #BD6200;
  --warn-bg: #FFF4E8;
  --ok: #2F7A45;
  --ok-bg: #EAF5EE;
  --row-present: #F4FAF6;
  --danger: #8A2524;
  --danger-bg: #F6EDEC;
  --info: #5A6B7D;
  --info-bg: #EEF2F5;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(42,42,42,.04), 0 10px 28px rgba(42,42,42,.06);
  --touch: 56px;
  --font: "Helvetica Neue", Helvetica, Calibri, Arial, system-ui, sans-serif;
  --max: 980px;
  --max-wide: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); }
.app { min-height: 100vh; display: flex; flex-direction: column; }
.hidden { display: none !important; }

/* ========== Top bar ========== */
.topbar {
  background: var(--brand);
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 12px rgba(98,26,25,.25);
}
.topbar h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
.topbar-brand {
  min-width: 0;
  flex: 1 1 auto;
  padding-right: 8px;
}
.topbar .sub {
  margin-top: 2px;
  opacity: .88;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(70vw, 420px);
}
.topbar-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: auto;
}
.header-clock {
  display: inline-flex;
  align-items: baseline;
  gap: .65rem;
  text-align: right;
  line-height: 1;
  flex-shrink: 0;
  color: #fff;
  white-space: nowrap;
}
.header-clock-time {
  font-size: 1.45rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.header-clock-date {
  font-size: .96rem;
  font-weight: 600;
  opacity: .9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.header-clock-date-short { display: none; }

@media (max-width: 420px) {
  .header-clock { gap: .4rem; }
  .header-clock-time { font-size: 1.18rem; }
  .header-clock-date { font-size: .82rem; }
  .header-clock-date-full { display: none; }
  .header-clock-date-short { display: inline; }
  .topbar-right { gap: 8px; }
  .topbar { padding: 12px 12px; gap: 8px; }
}

@media (min-width: 768px) {
  .header-clock-time { font-size: 1.55rem; }
  .header-clock-date { font-size: 1rem; }
}

.icon-btn {
  background: rgba(255,255,255,.14);
  border: 0;
  color: #fff;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 11px;
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
}
.icon-btn:hover, .icon-btn:focus-visible { background: rgba(255,255,255,.24); outline: none; }

.wrap {
  width: min(var(--max), 100%);
  margin: 0 auto;
  padding: 20px 16px 28px;
  flex: 1;
}
.wrap-wide { width: min(var(--max-wide), 100%); }
/* Alle Verwaltungsseiten teilen sich exakt dieselbe Contentbreite.
   Vorher war sie seitenweise verschieden (Übersicht und Schichtplan
   1440px, übrige Seiten 1120px). Das Sprungverhalten kam daher, dass die
   Navigation im Inhaltscontainer lag: sie ist jetzt im Header, deshalb
   ist eine einzige gemeinsame Breite ausreichend und der Inhalt
   verrutscht beim Seitenwechsel nicht mehr. 1440px ist der bereits
   vorhandene Wert – es wurde kein neuer erfunden. */
.admin-wrap { --max-wide: 1440px; }

/* ========== Cards / layout ========== */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card + .card { margin-top: 14px; }
.card-title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: .01em;
}
.section-title {
  margin: 0 0 12px;
  font-size: 1.2rem;
  font-weight: 650;
}
.muted { color: var(--mute); font-size: .92rem; }
.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ========== Login ========== */
.login-shell {
  display: block;
  /* padding-top ersetzt den Abstand der entfernten Überschrift
     "Wer bist du?" – es ist kein Ersatztext entstanden. */
  padding: 26px 0 8px;
}
.login-hero {
  text-align: center;
  padding: 6px 4px 4px;
}
.login-hero h2 {
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}
.login-hero .product {
  margin: 4px 0 0;
  color: var(--mute);
  font-size: .95rem;
  font-weight: 600;
}
/* Die Überschrift "Wer bist du?" ist entfernt. Der obere Abstand, den
   ihre Margin gesetzt hat, liegt jetzt auf der Auswahlfläche selbst –
   es ist kein Ersatztext entstanden. */
@media (max-width: 767px) {
  .login-shell {
    padding-top: 20px;
  }
  .login-admin {
    margin-top: 20px;
  }
}


/* Three occupation columns side-by-side from tablet up */
.group-row {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  /* height = content only — no flex stretch */
}
@media (min-width: 768px) {
  .group-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .wrap.login-wrap {
    padding-top: 16px;
    padding-bottom: 16px;
    max-width: min(1100px, 100%);
  }
}
@media (min-width: 1024px) {
  .group-row { gap: 14px; }
}

.group-block {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 10px 8px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.group-head {
  margin: 0 0 8px;
  padding: 0 2px 8px;
  border-bottom: 2px solid var(--accent-soft);
}
.group-head h3 {
  margin: 0;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand);
}
.group-block[data-group="tierarzt"] .group-head { border-bottom-color: #E8D5D4; }
.group-block[data-group="tfa"] .group-head { border-bottom-color: #E8DFC9; }
.group-block[data-group="junior"] .group-head { border-bottom-color: #DDE5EA; }
.group-block[data-group="junior"] .group-head h3 { color: var(--info); }

/* People ALWAYS stacked vertically inside a login column */
.login-shell .person-grid,
.group-block > .person-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.person-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  text-align: left;
  cursor: pointer;
  background: #FFFCFA;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 8px 10px;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.person-card:hover, .person-card:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(138,37,36,.12);
  outline: none;
}
.person-card:active { transform: scale(.99); }
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
  font-weight: 700;
  flex-shrink: 0;
  font-size: .75rem;
}
.group-block[data-group="tfa"] .avatar {
  background: var(--accent-soft);
  color: #8A6A2E;
}
.group-block[data-group="junior"] .avatar {
  background: var(--info-bg);
  color: var(--info);
}
.person-meta { flex: 1; min-width: 0; }
.person-meta strong {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.person-meta .muted {
  display: block;
  font-size: .75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-top: 1px;
}
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #C5C0B8;
  flex-shrink: 0;
}
.status-dot.on { background: var(--ok); }
.status-dot.break { background: var(--warn); }
.status-dot.duty { background: #5A6B7D; }

.login-admin {
  margin-top: 24px;
}
.login-admin .divider {
  margin: 0 0 8px;
}
.admin-card {
  border-style: dashed;
  border-color: #C9C2B8;
  background: #FFFCFA;
  margin-bottom: 0;
  min-height: 48px;
  padding: 8px 10px;
}
.admin-card .avatar {
  background: #EFEAE3;
  color: #5C5348;
  width: 34px;
  height: 34px;
  font-size: .75rem;
}
.login-footer {
  text-align: center;
  padding: 14px 0 0;
}
.login-footer .btn {
  min-height: 40px;
  font-size: .85rem;
  padding: 0 14px;
}

/* PIN nach der Personenauswahl. Dieselbe Kartenfläche, kein zweites Layout. */
.pin-panel {
  width: min(420px, 100%);
  margin: 8px auto 0;
}
.pin-back { margin: 0 0 12px; }
.pin-back .btn { min-height: 40px; }
.pin-card { padding: 16px; }
.pin-person {
  cursor: default;
  margin-bottom: 16px;
}
.pin-person:hover,
.pin-person:focus-visible {
  border-color: var(--line);
  box-shadow: none;
  transform: none;
}
.pin-field { margin: 0 0 12px; }
.pin-entry {
  width: 100%;
  min-height: var(--touch);
  text-align: center;
  font-size: 1.55rem;
  letter-spacing: .55em;
  padding: 10px 14px 10px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #FFFCFA;
  color: var(--text);
}
.pin-entry:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px rgba(138, 37, 36, .12);
}
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.pin-key {
  min-height: var(--touch);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #FFFCFA;
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 650;
  cursor: pointer;
}
.pin-key:hover,
.pin-key:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(138, 37, 36, .12);
  outline: none;
}
.pin-key:active { transform: scale(.98); }
.pin-key-ghost {
  font-size: 1.15rem;
  color: var(--mute);
  font-weight: 600;
}
.pin-key-go {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-size: 1rem;
  letter-spacing: .04em;
}
.pin-key-go:hover,
.pin-key-go:focus-visible {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}
.pin-submit { margin-top: 12px; min-height: var(--touch); }
.pin-hint { margin: 12px 0 0; text-align: center; }

/* ========== Chips ========== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 650;
  background: var(--brand-soft);
  color: var(--brand);
}
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.danger { background: var(--danger-bg); color: var(--danger); }
.chip.mute { background: #EEF0EE; color: var(--mute); }
.chip.blue { background: var(--info-bg); color: var(--info); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--touch);
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 650;
  text-decoration: none;
  color: var(--text);
  background: #EFEAE3;
  transition: background .15s, transform .1s;
}
.btn:focus-visible { outline: 3px solid rgba(138,37,36,.28); outline-offset: 2px; }
.btn:active { transform: scale(.99); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: transparent; border-color: var(--line); }
.btn-warn { background: var(--warn); color: #fff; }
.btn-danger { background: var(--brand-dark); color: #fff; }
.btn-block { width: 100%; }
.btn-row { display: grid; gap: 10px; }
@media (min-width: 520px) {
  .btn-row.cols-2 { grid-template-columns: 1fr 1fr; }
  .btn-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* ========== Status panel ========== */
.status-panel {
  text-align: center;
  padding: 24px 16px 20px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--brand-soft) 0%, #fff 55%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.status-panel .big {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 10px 0 4px;
  letter-spacing: .01em;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}
.stat .label { font-size: .72rem; color: var(--mute); font-weight: 600; letter-spacing: .02em; }
.stat .value { font-weight: 750; font-size: 1.05rem; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ========== Timeline ========== */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.timeline li:last-child { border-bottom: 0; }
.timeline time {
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .92rem;
}

/* ========== Tables ========== */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  min-width: 520px;
}
table.data th, table.data td {
  text-align: left;
  padding: 13px 11px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data th {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mute);
  font-weight: 700;
  background: #F7F4EF;
  position: sticky;
  top: 0;
}
table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover { background: var(--brand-soft); }

/* ========== Bottom nav ========== */
.bottom-nav {
  position: sticky;
  bottom: 0;
  background: rgba(255,252,250,.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px 6px calc(8px + env(safe-area-inset-bottom));
  z-index: 15;
}
.bottom-nav button,
.bottom-nav a {
  border: 0;
  background: transparent;
  min-height: 56px;
  cursor: pointer;
  color: var(--mute);
  font-size: .72rem;
  font-weight: 650;
  display: grid;
  place-items: center;
  gap: 3px;
  border-radius: 12px;
  text-decoration: none;
}
.bottom-nav button.active,
.bottom-nav a.active,
.bottom-nav a.is-active {
  color: var(--brand);
  background: var(--brand-soft);
}
.bottom-nav .ico { font-size: 1.05rem; line-height: 1; }

/* ========== KPI ========== */
.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.kpi .n {
  font-size: 1.55rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.kpi.warn-card {
  border-color: #E8C49A;
  background: var(--warn-bg);
  cursor: pointer;
}
.kpi.warn-card:hover { box-shadow: var(--shadow); }

/* ========== Forms ========== */
label.field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  font-weight: 650;
  font-size: .9rem;
}
label.field input, label.field select, label.field textarea {
  min-height: 50px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 400;
}
label.field textarea { min-height: 100px; resize: vertical; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  background: var(--text);
  color: #fff;
  padding: 13px 18px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 50;
  max-width: min(92vw, 420px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  font-weight: 600;
}
.toast.show { opacity: 1; }

/* Stempelbestätigung nach dem Rückweg zur Auswahl: bewusst nur Information.
   Kein Button, kein Dialog, pointer-events bleibt none – die Mitarbeiterauswahl
   darunter ist sofort weiter bedienbar. */
.toast.toast-stamp {
  bottom: 16px;
  background: var(--ok);
  box-shadow: 0 10px 28px rgba(47, 122, 69, .28);
}

.open-item {
  display: block;
  width: 100%;
  text-align: left;
  background: #FFFCFA;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px;
  cursor: pointer;
  margin-bottom: 10px;
}
.open-item:hover { border-color: var(--warn); background: #fff; }

.profile-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 16px 16px 14px;
}
.profile-card h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; }
.profile-card-meta { margin: 0; font-size: .88rem; }
.profile-list-intro { margin: 0 0 14px; max-width: 40rem; }
.profile-detail-title {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 750;
}
.profile-detail .note { margin: 0 0 18px; }
.profile-section-label {
  margin: 18px 0 6px;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mute);
}
.profile-detail .profile-section-label:first-of-type { margin-top: 4px; }
.profile-list { margin: 0; padding: 0; list-style: none; }
.profile-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: .94rem;
}
.profile-list .profile-row:last-child { border-bottom: 0; }
.profile-row-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.profile-label { font-weight: 650; color: var(--text); }
.profile-note {
  margin-top: 4px;
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.35;
  max-width: 36rem;
}
.profile-list .v {
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  flex-shrink: 0;
}
.profile-list .open-val {
  color: var(--warn);
  font-weight: 600;
}
@media (max-width: 480px) {
  .profile-row-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .profile-list .v { text-align: left; }
}

.note {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 11px 13px;
  border-radius: 0 12px 12px 0;
  font-size: .88rem;
  color: #5C5348;
  line-height: 1.4;
}
.footer-note {
  text-align: center;
  padding: 18px 8px 10px;
  color: var(--mute);
  font-size: .8rem;
}


/* ========== Punch / Heute ========== */
.punch-status {
  text-align: center;
  padding: 22px 16px 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--brand-soft) 0%, #fff 60%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.punch-status.punch-on {
  background: linear-gradient(180deg, var(--ok-bg) 0%, #fff 60%);
  border-color: #C5E0CF;
}
.punch-status.punch-break {
  background: linear-gradient(180deg, var(--warn-bg) 0%, #fff 60%);
  border-color: #E8C49A;
}
.punch-status.punch-duty,
.punch-status.punch-deploy {
  background: linear-gradient(180deg, var(--info-bg) 0%, #fff 60%);
  border-color: #C5CED8;
}
.punch-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
}
.punch-headline {
  margin: 8px 0 6px;
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.15;
}
.punch-since {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--text);
}
.punch-work {
  margin-top: 8px;
  font-size: .95rem;
  color: var(--mute);
}
.punch-work strong { color: var(--text); font-variant-numeric: tabular-nums; }

.punch-actions {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
.btn-punch {
  min-height: 64px;
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: .02em;
  border-radius: 16px;
  width: 100%;
}
.btn-punch-secondary {
  min-height: 52px;
  font-size: 1rem;
  font-weight: 650;
  width: 100%;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
}
.btn-punch-secondary:hover, .btn-punch-secondary:focus-visible {
  border-color: var(--brand);
  outline: none;
}
.punch-hint { margin: 0; text-align: center; }

.punch-card { margin-bottom: 12px; }

/* PIN ändern: eine Spalte, alles bleibt in der Karte. */
.punch-pin .pin-change-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
.punch-pin .pin-change-form .field,
.punch-pin .pin-change-form .field-wide {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
  max-width: 100%;
}
.punch-pin .pin-change-form input,
.punch-pin .pin-change-form .btn {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.punch-pin .pin-change-form input {
  min-height: 40px;
  padding: 8px 12px;
}
.punch-pin .pin-change-form .btn {
  min-height: 40px;
}
.today-blocks {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.today-blocks li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.today-blocks li:last-child { border-bottom: 0; }
.tb-dur { color: var(--mute); font-weight: 650; }
.punch-timeline { margin-top: 4px; }
.punch-timeline li.now { border-bottom: 0; }

.month-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}
.month-strip > div {
  background: #FAF8F5;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 6px;
}
.ms-l {
  display: block;
  font-size: .72rem;
  color: var(--mute);
  font-weight: 650;
  margin-bottom: 4px;
}
.ms-v {
  display: block;
  font-size: 1.05rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.open-hint {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 0 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #E8C49A;
  background: var(--warn-bg);
  color: var(--warn);
  font-weight: 700;
  cursor: pointer;
  font-size: .95rem;
}
.open-hint:hover, .open-hint:focus-visible {
  box-shadow: 0 0 0 3px rgba(189,98,0,.15);
  outline: none;
}

.punch-duty .btn-duty {
  min-height: 48px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #FFFCFA;
  font-weight: 650;
  cursor: pointer;
}
.punch-duty .btn-duty.btn-primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

@media (min-width: 768px) {
  .wrap.emp-wrap {
    max-width: 900px;
  }
  .btn-punch { min-height: 68px; font-size: 1.2rem; }
}

@media (min-width: 1024px) {
  .wrap.emp-wrap {
    max-width: 1180px;
  }
  .punch-desktop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  .punch-main-column,
  .punch-side-column {
    min-width: 0;
  }
}


@media print {
  /* .topbar blendet die Hauptnavigation der Verwaltung mit aus. */
  .topbar, .bottom-nav, .btn, .no-print { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; }
}


/* ========== Admin Lagebild ========== */
.lagebild { margin-bottom: 16px; }
.lage-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .lage-kpis { grid-template-columns: repeat(4, 1fr); }
}
.lage-kpi .n { font-variant-numeric: tabular-nums; }
.kpi.duty-card {
  background: var(--info-bg, #EEF3F8);
  border: 1px solid #C5CED8;
}
.klar-cta {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 0 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid #E8C49A;
  background: var(--warn-bg);
  color: var(--warn);
  font-weight: 750;
  font-size: 1rem;
  cursor: pointer;
}
.klar-cta:hover, .klar-cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(189,98,0,.15);
  outline: none;
}
.lage-calm { margin: 0 0 10px; }
.corr-hint { margin: 0 0 12px; font-size: .9rem; }

.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.admin-staff { min-width: 720px; }
table.admin-staff .col-name { min-width: 140px; }
table.admin-staff .col-status { min-width: 110px; }
table.admin-staff .col-klar { min-width: 90px; text-align: center; }
table.admin-staff .col-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Zahlenspalten rechts ausrichten, damit die Überschriften mit den Werten stehen */
table.admin-staff th.col-num,
table.admin-staff td.col-num { text-align: right; }
/* Anwesende Mitarbeiter dezent hervorheben – keine zusätzliche Markierung */
table.admin-staff tbody tr.is-present { background: var(--row-present); }
table.admin-staff tbody tr.is-present:hover { background: var(--brand-soft); }
/* Desktop: dieselbe Schrift wie die Mitarbeiterliste, aber flache Zeilen,
   damit die ganze Übersicht ohne Umbruch in den Viewport passt. */
@media (min-width: 1200px) {
  .admin-wrap:has(table.admin-staff) {
    --ov-name: clamp(1.02rem, 1.88vh, 1.08rem);
    --ov-text: clamp(0.95rem, 1.75vh, 1rem);
    --ov-th: clamp(0.72rem, 1.35vh, 0.8rem);
  }
  .lagebild { margin-bottom: 8px; }
  .lage-kpis { gap: 8px; margin-bottom: 8px; }
  .kpi.lage-kpi {
    padding: 7px 14px;
    border-radius: 12px;
    box-shadow: none;
    background: #fff;
    border: 1px solid var(--line);
  }
  .kpi.lage-kpi .n { font-size: 1.28rem; margin-top: 0; line-height: 1.15; }
  .kpi.lage-kpi .muted { font-size: .78rem; }
  .kpi.lage-kpi.warn-card {
    border-color: #E8C49A;
    background: var(--warn-bg);
  }
  .admin-table-wrap.card {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: none;
  }
  table.admin-staff {
    min-width: 0;
    table-layout: fixed;
    font-size: var(--ov-text);
  }
  table.admin-staff th,
  table.admin-staff td {
    padding: 3px 12px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    border-bottom-color: var(--line);
  }
  table.admin-staff thead th {
    padding: 6px 12px;
    font-size: var(--ov-th);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mute);
    background: #FCFBF9;
  }
  table.admin-staff tbody tr:last-child td { border-bottom: 0; }
  table.admin-staff .col-name { width: 21%; min-width: 0; }
  table.admin-staff .col-role { width: 11%; min-width: 0; }
  table.admin-staff .col-status { width: 14%; min-width: 0; }
  table.admin-staff .col-num { width: 9%; min-width: 0; }
  table.admin-staff .col-sonder { width: 16%; }
  table.admin-staff .col-klar { width: 11%; min-width: 0; }
  table.admin-staff tbody .col-name { font-size: var(--ov-name); font-weight: 650; }
  table.admin-staff tbody .col-role { font-weight: 500; color: var(--mute); }
  table.admin-staff tbody .col-num { font-weight: 500; }
  table.admin-staff .chip {
    padding: 1px 8px;
    font-size: .78rem;
    line-height: 1.3;
    white-space: nowrap;
    vertical-align: middle;
  }
}

/* ========== Mitarbeiterverwaltung ==========
   Desktop: vier fachliche Gruppen im 2×2-Raster.
   Tierärzte | TFA
   Auszubildende | Praktikanten
   Die Kästen bleiben oben ausgerichtet; unterschiedliche Längen
   erzeugen keine Leerzeilen. */

/* Kopfzeile: Titel links, Anlegen rechts – ohne Erklärtext dazwischen. */
.staff-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.staff-head-row .section-title { margin: 0; }

/* Anlegen bleibt unterhalb der Desktopbreite in einer eigenen Zeile.
   Ab 1200px nur eine flache, rechtsbündige Leiste über dem Raster. */
.staff-create { margin: 0 0 12px; }

/* Schmal: die vier Gruppen untereinander. Ab der Desktopbreite zwei
   gleich breite Spalten, dadurch das 2×2-Raster.

   Die zweite Spalte entsteht erst, wenn für beide wirklich Platz ist.
   repeat(auto-fit, minmax(...)) legt so viele Spalten an, wie
   mindestens 690px hineinpassen; darunter bleibt es bei einer breiten
   Spalte, in der die Tabelle ihre Mindestbreite ungekürzt einhält.
   690px ist der bei 1200px gemessene Bedarf von table.staff-list
   (662px) plus Reserve. Der Bedarf wächst mit der Viewport-Höhe, weil
   die Schriftgrade ab 1200px über clamp() mitwachsen; gemessen wurden
   616px bis 669px, 690px deckt auch den oberen Wert noch ab.

   Vorher stand hier 1fr 1fr. Ab 900px bekam jede Spalte nur die halbe
   Breite, die Tabelle braucht aber mehr als das Doppelte davon – sie
   wurde von .staff-col abgeschnitten und der Link "Bearbeiten" lag
   unerreichbar ausserhalb des Containers. */
.staff-split { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .staff-split {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 690px), 1fr));
    align-items: start;
  }
}
@media (min-width: 1200px) {
  /* Nur die Mitarbeiterliste nutzt mehr Breite. Die übrigen
     Verwaltungsseiten bleiben bei 1440px.
     Schrift, Zeilen und der Abstand der beiden Reihen folgen der
     Viewport-Höhe, jeweils mit Unter- und Obergrenze. */
  .admin-wrap:has(.staff-split) { --max-wide: 1680px; }
  .staff-board {
    /* Schrift bleibt zwischen der kompakten und der vorher zu großen
       Fassung. Das vertikale Padding nutzt zusätzlich Höhe, ohne die
       Bearbeiten-Knöpfe mitwachsen zu lassen. */
    --staff-gap: clamp(12px, 1.7vh, 18px);
    --staff-title: clamp(0.94rem, 1.73vh, 1.02rem);
    --staff-title-pad: clamp(11px, 1.5vh, 15px);
    --staff-name: clamp(1.02rem, 1.88vh, 1.08rem);
    --staff-text: clamp(0.95rem, 1.75vh, 1rem);
    --staff-th: clamp(0.72rem, 1.35vh, 0.8rem);
    --staff-th-pad: clamp(6px, 0.9vh, 10px);
    /* Tabellenzeilen bewusst so kompakt wie in der Übersicht. Die frühere
       viewportabhängige Polsterung machte dieselben Datensätze unnötig hoch. */
    --staff-row-pad: 3px;
    --staff-chip: clamp(0.74rem, 1.37vh, 0.8rem);
  }
  .staff-split { gap: var(--staff-gap); }
  .staff-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 0 4px;
    min-height: 0;
  }
  .staff-toolbar .staff-create { margin: 0; }
}

/* overflow-x: auto statt hidden: der Kopf behält seine runden Ecken
   (overflow-y: hidden), aber die Tabelle wird nie mehr abgeschnitten.
   Reicht der Platz in einer Spalte doch einmal nicht – etwa bei einer
   ungewöhnlich langen Berufsbezeichnung –, scrollt ausschliesslich
   diese Karte waagerecht, nie die Seite. */
.staff-col {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  overflow-y: hidden;
}
@media (max-width: 700px) {
  .staff-col { overflow: hidden; }
  table.staff-list thead { display: none; }
  table.staff-list,
  table.staff-list tbody,
  table.staff-list tr,
  table.staff-list td { display: block; width: auto; }
  table.staff-list tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
  }
  table.staff-list tbody tr:last-child { border-bottom: 0; }
  table.staff-list td { border: 0; padding: 0; }
  table.staff-list .col-staff-name { grid-column: 1; grid-row: 1; white-space: normal; }
  table.staff-list .col-staff-role { grid-column: 1; grid-row: 2; }
  table.staff-list .col-staff-status { grid-column: 1; grid-row: 3; }
  table.staff-list .col-staff-profile { display: none; }
  table.staff-list .col-staff-act { grid-column: 2; grid-row: 1 / span 3; width: auto; text-align: right; }
}
.staff-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: #FAF8F5;
  border-bottom: 1px solid var(--line);
}
.staff-col-head h3 {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mute);
}
.staff-col-count {
  font-size: .72rem;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.staff-empty { margin: 0; padding: 10px; color: var(--mute); font-size: .84rem; }

/* Dichte Tabelle: kleine Schrift, flache Zeilen, ruhige Spalten. */
table.staff-list {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
  table-layout: auto;
}
table.staff-list thead th {
  padding: 4px 10px;
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mute);
  text-align: left;
  background: #FCFBF9;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.staff-list td {
  padding: 4px 10px;
  line-height: 1.3;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
table.staff-list tbody tr:last-child td { border-bottom: 0; }
table.staff-list tbody tr:hover { background: var(--brand-soft); }
table.staff-list tbody tr.is-present { background: var(--row-present); }
table.staff-list tbody tr.is-present:hover { background: var(--brand-soft); }

/* Spalten: Name bekommen Luft, der Rest bleibt schmal. */
table.staff-list .col-staff-name { font-weight: 600; white-space: nowrap; }
table.staff-list .col-staff-role { font-size: .8rem; }
table.staff-list .col-staff-profile { font-size: .8rem; white-space: nowrap; }
table.staff-list .col-staff-status { width: 1%; white-space: nowrap; }
table.staff-list .col-staff-act { width: 1%; text-align: right; white-space: nowrap; }

/* Desktop: Höhe folgt der Viewport-Höhe, waagerechte Maße bleiben. */
@media (min-width: 1200px) {
  .staff-col-head { padding: var(--staff-title-pad) 16px; }
  .staff-col-head h3,
  .staff-col-count { font-size: var(--staff-title); }
  table.staff-list { font-size: var(--staff-text); }
  table.staff-list thead th { padding: var(--staff-th-pad) 14px; font-size: var(--staff-th); }
  table.staff-list td { padding: var(--staff-row-pad) 14px; }
  table.staff-list .col-staff-name { font-size: var(--staff-name); }
  table.staff-list .col-staff-role,
  table.staff-list .col-staff-profile { font-size: var(--staff-text); }
}

/* Status-Chip auf Zeilenhöhe eindampfen. */
table.staff-list .chip { padding: 1px 7px; font-size: .68rem; }

/* Einzige Aktion pro Zeile: hier wird bereits verwaltet. */
.staff-act {
  font-family: inherit;
  cursor: pointer;
  display: inline-block;
  padding: 0 8px;
  min-height: 22px;
  line-height: 22px;
  font-size: .74rem;
  font-weight: 650;
  color: var(--brand);
  text-decoration: none;
  background: var(--brand-soft);
  border: 1px solid transparent;
  border-radius: 6px;
  white-space: nowrap;
}
.staff-act:hover,
.staff-act:focus-visible {
  background: var(--brand);
  color: #fff;
  outline: none;
}
@media (min-width: 1200px) {
  table.staff-list .chip { padding: 2px 9px; font-size: var(--staff-chip); }
  /* Bewusst fest und klein: die Zeilenhöhe kommt vom Text, nicht vom Knopf. */
  table.staff-list .staff-act {
    padding: 0 12px;
    min-height: 24px;
    line-height: 24px;
    font-size: 0.78rem;
  }
}

.chip.info {
  background: #EEF3F8;
  color: #3A5A78;
}
.chip.blue {
  background: #EEF3F8;
  color: #2F4F6F;
}

.block-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.block-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.block-list li:last-child { border-bottom: 0; }
.block-list .tb-range {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.block-list .tb-label { color: var(--mute); font-size: .92rem; }

.emp-admin-head { margin-bottom: 4px; }


/* ========== Klärungsbedarf ========== */
/* Gemeinsamer Verwaltungsstandard: Seitentitel und kurze Erläuterung stehen
   auf Desktop platzsparend in einer Zeile; bei Bedarf darf die Erläuterung umbrechen.
   Klärungsfälle bleiben zusätzlich kompakte Zeilen statt schmaler, hoher Karten. */
.klar-page-head { margin-bottom: 12px; }
.klar-page-head .section-title { margin-bottom: 2px; }
.abschluss-page-head .section-title,
.rules-page-head .section-title,
.inline-page-head .section-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.abschluss-title-note,
.rules-title-note,
.page-title-note {
  color: var(--mute);
  font-size: .78rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
}
.klar-count {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 750;
  color: var(--text);
}
.klar-intro { margin: 0; line-height: 1.4; }
.klar-list {
  display: grid;
  gap: 8px;
  width: 100%;
}
.klar-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: none;
  cursor: pointer;
}
.klar-card-detail { cursor: default; }
.klar-card:hover { border-color: #D4B87A; }
.klar-card-detail:hover { border-color: var(--line); }
.klar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
}
.klar-name { font-size: 1rem; font-weight: 750; }
.klar-role { font-weight: 500; color: var(--mute); font-size: .88rem; }
.klar-when {
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--text);
  font-size: .92rem;
}
.klar-tags { margin: 0; }
.klar-need {
  background: #FBF7F0;
  border-radius: 9px;
  padding: 8px 10px;
  margin: 0;
}
.klar-need-label,
.klar-ask-label {
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 2px;
}
.klar-need-text { font-weight: 650; color: var(--text); line-height: 1.35; }
.klar-ask {
  margin: 0;
  padding: 0;
}
.klar-ask-text {
  margin: 0;
  font-size: .96rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--text);
}
.klar-reason { margin: 0; font-size: .88rem; }
.klar-card > .fineprint { margin: 0; line-height: 1.35; }
.klar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  border: 0;
  padding: 0;
  margin: 0;
}
.klar-actions .btn { min-height: 40px; }
.klar-blocks { margin-top: 8px; }

@media (min-width: 1024px) {
  .klar-card-detail {
    display: grid;
    grid-template-columns: minmax(290px, 1.05fr) minmax(390px, 1.55fr) minmax(260px, 1fr);
    align-items: center;
    gap: 14px;
  }
  .klar-head { flex-wrap: nowrap; }
  .klar-head > div { min-width: 0; }
  .klar-head .chip { flex: 0 0 auto; }
  .klar-card > .fineprint { font-size: .78rem; }
}

@media (max-width: 1023px) {
  .klar-card-detail {
    display: grid;
    gap: 10px;
  }
}

/* ========== Korrekturen ========== */
.corr-section { margin: 0 0 12px; }
.corr-section + .corr-section { margin-top: 14px; }
.corr-section-title {
  margin: 0 0 6px;
  font-size: .98rem;
  font-weight: 750;
  color: var(--text);
}
.corr-empty {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 12px;
  color: var(--mute);
  font-size: .9rem;
}
.corr-open-list { display: grid; gap: 8px; }
.corr-table-wrap {
  margin: 0;
  padding: 0;
  overflow-x: auto;
  border-radius: 12px;
  box-shadow: none;
}
table.corr-decided-table { min-width: 760px; table-layout: fixed; }
table.corr-decided-table .corr-col-day { width: 11%; white-space: nowrap; }
table.corr-decided-table .corr-col-employee { width: 20%; }
table.corr-decided-table .corr-col-reason { width: 31%; }
table.corr-decided-table .corr-col-decision { width: 15%; white-space: nowrap; }
table.corr-decided-table .corr-col-note { width: 23%; }

@media (min-width: 1200px) {
  table.corr-decided-table th,
  table.corr-decided-table td {
    padding-top: 4px;
    padding-bottom: 4px;
    vertical-align: middle;
  }
  table.corr-decided-table .chip {
    padding: 1px 8px;
    font-size: .78rem;
    line-height: 1.3;
  }
  .corr-form { margin-top: 0; align-items: center; }
  .corr-form input[type="text"] { min-height: 38px; }
  .corr-form .btn { min-height: 38px; }
}

/* ========== Brand logo ========== */
.topbar-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.topbar-brand-text {
  min-width: 0;
  flex: 1 1 auto;
}
.brand-logo-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
  padding: 4px 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  line-height: 0;
}
.brand-logo {
  display: block;
}

/* ========== Schichtplan ========== */
/* Desktop: die komplette Kalenderwoche in EINER Reihe, Montag bis Sonntag.

   repeat(7, minmax(0, 1fr)) ist der entscheidende Punkt:
     * jede Tagesspalte bekommt dieselbe Grundbreite,
     * minmax(0, …) verhindert, dass eine Spalte durch ihren Inhalt breiter
       wird als die anderen – die Geometrie hängt damit nicht am Inhalt,
     * ein Tag mit vielen Schichten verbreitert keine andere Spalte.

   Kleinere Displays bleiben responsiv (1 bzw. 2 Spalten); sieben Tage auf
   ein Handy zu quetschen wird bewusst nicht versucht. */
.shift-week {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
}
@media (min-width: 700px) {
  .shift-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .shift-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* Der Inhalt bremst die Spalte nicht aus. */
.shift-day {
  padding: 7px;
  border-radius: var(--radius-sm);
  min-width: 0;
  overflow: hidden;
}
/* `.card + .card` schiebt im Raster jeden Tag ausser dem ersten um 14px
   nach unten. Die Kopfzeilen der sieben Tage muessen auf einer Linie
   bleiben, deshalb wird der Abstand hier neutralisiert. */
.shift-day.card { margin: 0; }
.shift-day-title {
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: .78rem;
  font-weight: 700;
  display: flex;
  gap: 6px;
  align-items: baseline;
  justify-content: space-between;
  white-space: nowrap;
  overflow: hidden;
}
/* Wochenende nur optisch markiert, fachlich gleich behandelt. */
.shift-day.is-weekend { background: #FCFBF9; }

.shift-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shift-empty { margin: 0; padding: 2px 1px; color: var(--mute); font-size: .72rem; }

/* Schicht kompakt: alles bleibt in der Spaltenbreite, lange Texte
   werden gekürzt oder auf wenige Zeilen begrenzt. */
.shift-item {
  display: block;
  text-align: left;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 4px 6px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.shift-item:hover, .shift-item:focus-visible {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(192,157,94,.25);
}
.shift-item.active {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.shift-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  margin-bottom: 1px;
  min-width: 0;
}
.shift-item-top .chip {
  padding: 0 5px;
  font-size: .62rem;
  line-height: 1.5;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shift-time {
  font-variant-numeric: tabular-nums;
  font-size: .66rem;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* Namen und Zusatzinfos bleiben ein- bzw. zweizeilig – sie verlängern
   die Spalte nie. */
.shift-primary {
  font-size: .78rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shift-vertretung {
  font-size: .68rem;
  margin-top: 1px;
  color: var(--brand-dark);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shift-note {
  font-size: .68rem;
  margin-top: 1px;
  color: var(--mute);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shift-edit { margin-bottom: 14px; border-color: var(--accent); }
.shift-form { display: grid; gap: 10px; max-width: 420px; }
.shift-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.emp-shifts-list { margin: 0; padding-left: 1.1rem; }
.emp-shifts-list li { margin: 4px 0; }

/* Mitarbeiteransicht: Praxis links, Uhr mittig, aktive Person rechts. */
.employee-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.employee-topbar .header-clock { text-align: center; }
.employee-topbar-user {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.employee-topbar-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1.25;
}
.employee-topbar-identity strong,
.employee-topbar-identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-topbar-identity span { font-size: .78rem; opacity: .88; }
@media (max-width: 700px) {
  .employee-topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .employee-topbar .topbar-brand { grid-column: 1 / -1; }
  .employee-topbar .header-clock { grid-column: 1; justify-self: center; }
  .employee-topbar-user { grid-column: 2; gap: 8px; }
  .employee-topbar-identity { max-width: 110px; }
}
@media (max-width: 420px) {
  .employee-topbar-identity { max-width: 82px; font-size: .8rem; }
  .employee-topbar-user .icon-btn { padding-inline: 9px; font-size: .78rem; }
}

/* Gleiche mittige Uhr auf Startseite und in Verwaltung. */
.centered-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.centered-topbar .header-clock { text-align: center; }
.centered-topbar .topbar-spacer { min-width: 0; }
.centered-topbar .topbar-actions { justify-content: flex-end; }
@media (max-width: 700px) {
  .centered-topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .centered-topbar .topbar-brand { grid-column: 1 / -1; }
  .centered-topbar .header-clock { grid-column: 1; justify-self: center; }
  .login-topbar .header-clock { grid-column: 1 / -1; }
  .centered-topbar .topbar-spacer { display: none; }
}

/* ========== Admin-Header ========== */
/* Feste Aufteilung des Headers:

     [ Logo ] [ Navigation ] [ Uhr/Datum ] [ Zurück ]

   Alle vier Spalten sind feste, seitengleich grosse Bereiche. Keine
   Spalte hängt an der Breite des Seiteninhalts, deshalb stehen Logo,
   Navigation, Uhr und Datum auf Übersicht, Klärungsbedarf, Korrekturen,
   Mitarbeiter, Schichtplan und Abschluss exakt an derselben Position.
   Vorher lag die Navigation im Inhaltscontainer und sprang deshalb
   zwischen den Seiten um 160px hin und her. */
.admin-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 20px;
}
.admin-topbar .topbar-brand { padding-right: 0; }
.admin-topbar .header-clock { text-align: right; }

/* Kompakte Hauptnavigation: ruhige Textpunkte statt grosser weisser
   Pillen. Der aktive Punkt wird über eine sandgoldene Unterlinie und ein
   leichtes Flächenhighlight erkennbar – beides ohne Wechsel der
   Abmessungen, damit nichts zappelt. */
.admin-nav {
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 2px;
  min-width: 0;
  /* Die Punkte behalten immer ihre natürliche Breite (flex: 0 0 auto).
     Reicht der Platz nicht, scrollt die Leiste horizontal, statt dass
     ein Punkt gestaucht wird und sein Text über den Nachbarn ragt. */
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav-item {
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .84);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
  padding: 11px 14px 10px;
  /* Unterlinie ist immer da, nur beim aktiven Punkt sichtbar gefuellt –
     so aendert die Aktivierung weder Hoehe noch Breite. */
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.admin-nav-item:hover,
.admin-nav-item:focus-visible {
  background: rgba(255, 255, 255, .13);
  color: #fff;
  outline: none;
}
.admin-nav-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.admin-nav-item.is-active {
  color: #fff;
  background: rgba(255, 255, 255, .15);
  border-bottom-color: var(--accent);
}

/* Nur fuer Screenreader sichtbar (Dokumentgliederung), kein Text im Bild. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1180px) {
  /* Ab hier wird linksbündig gescrollt: bei zentriertem Inhalt würde
     sonst der Anfang der Leiste abgeschnitten. */
  .admin-nav { justify-content: flex-start; }
}
@media (max-width: 820px) {
  .admin-topbar { column-gap: 12px; }
  .admin-nav-item { padding: 9px 10px 8px; font-size: .84rem; }
  .admin-topbar .header-clock { gap: .45rem; }
  .admin-topbar .header-clock-date { font-size: .82rem; }
}
@media (max-width: 700px) {
  /* Auf dem schmalen Display bekommt die Navigation eine eigene Zeile,
     sonst bleibt zwischen Logo, Uhr und Zurück nur ein schmaler Streifen. */
  .admin-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "brand clock back"
      "nav nav nav";
    row-gap: 2px;
    padding-bottom: 6px;
  }
  .admin-topbar .topbar-brand { grid-area: brand; }
  .admin-topbar .header-clock { grid-area: clock; justify-self: end; }
  .admin-topbar .topbar-actions { grid-area: back; }
  .admin-topbar .admin-nav { grid-area: nav; justify-content: flex-start; }
}

/* Dezente Markenakzente nach der Praxiswebsite. */
.group-block { border-top: 3px solid var(--accent); }
.group-block[data-group="tierarzt"] { border-top-color: var(--brand); }
.group-block[data-group="junior"] { border-top-color: var(--info); }
.group-block[data-group="tfa"] .group-head { border-bottom-color: var(--accent); }
.shift-day-title { color: var(--brand); }

/* ========== Schichtplan – erweiterter Bereich ========== */

/* Titelzeile mit Wochennavigation */
.shift-plan-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0;
}
.shift-plan-head { margin-bottom: 14px; }

/* Werkzeugzeile ohne Seitenüberschrift: Woche links, Anlegen rechts. */
.shift-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 10px;
}
.shift-toolbar .shift-create { margin-left: auto; }

/* Dienstplan-Matrix nur auf dem Desktop. Darunter bleiben die Tageskarten.
   Gleiche Bildsprache wie die Uebersichtstabelle: weisses Panel, feine
   Linien, Bordeaux nur fuer Gruppen, Dienste als helle Pillen. */
.shift-matrix-wrap { display: none; }
@media (min-width: 1200px) {
  .admin-wrap:has(.shift-matrix) { --max-wide: 100%; }
  .shift-week { display: none; }
  .shift-toolbar { flex-wrap: nowrap; margin-bottom: 10px; }
  .shift-toolbar .btn-sm { min-height: 32px; }
  .shift-matrix-wrap {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
    box-shadow: var(--shadow);
  }
  .shift-matrix {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: var(--card);
    color: var(--text);
  }
  .shift-matrix-name { width: 14rem; }
  .shift-matrix th,
  .shift-matrix td {
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    background: var(--card);
    vertical-align: middle;
    padding: 2px 4px;
  }
  .shift-matrix th:last-child,
  .shift-matrix td:last-child { border-right: 0; }
  .shift-matrix tbody tr:last-child th,
  .shift-matrix tbody tr:last-child td { border-bottom: 0; }
  .shift-matrix thead th {
    background: #FAF8F5;
    color: var(--mute);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    line-height: 1.15;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 9px 8px;
  }
  .shift-matrix-dom {
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text);
    text-transform: none;
  }
  .shift-matrix tbody th[scope="row"] {
    font-size: .95rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
    padding: 6px 10px;
    background: var(--card);
    color: var(--text);
  }
  .shift-matrix-group th {
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    line-height: 1.15;
    padding: 6px 10px;
  }
  .shift-matrix .is-weekend { background: #FBF9F5; }
  .shift-matrix thead th.is-weekend { background: #F3EEE6; }
  .shift-matrix-shift {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    margin: 2px 0;
    padding: 2px 6px;
    border-left: 3px solid var(--info);
    border-radius: 6px;
    background: var(--info-bg);
    color: inherit;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
  }
  .shift-matrix-shift + .shift-matrix-shift { margin-top: 2px; }
  .shift-matrix-shift.kind-info { border-left-color: var(--info); background: var(--info-bg); }
  .shift-matrix-shift.kind-mute { border-left-color: var(--accent); background: var(--accent-soft); }
  .shift-matrix-shift.kind-warn { border-left-color: var(--warn); background: var(--warn-bg); }
  .shift-matrix-shift.is-conflict { box-shadow: inset 0 0 0 1px var(--warn); }
  .shift-matrix-shift.is-active,
  .shift-matrix-shift:hover,
  .shift-matrix-shift:focus-visible {
    box-shadow: 0 0 0 1px var(--brand);
    text-decoration: none;
    outline: none;
  }
  .shift-matrix-time {
    flex: none;
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text);
  }
  .shift-matrix-rest {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78rem;
    font-weight: 500;
    color: var(--mute);
  }
  .shift-matrix-label,
  .shift-matrix-sub { display: inline; }
  .shift-matrix-label { color: var(--mute); }
  .shift-matrix-sub { color: var(--brand-dark); }
}
@media (min-width: 1200px) and (max-width: 1500px) {
  .shift-matrix-time { font-size: .8rem; }
  .shift-matrix-rest { font-size: .72rem; }
}
/* Wochennavigation: der Zeitraum in der Mitte ist ein eigener, gleich
   breiter Bereich. Die beiden Pfeile stehen ueber eine symmetrische
   Rasteraufteilung immer ganz aussen, dadurch wandert die Beschriftung
   nicht, wenn sich die Datumslaenge aendert (z. B. Monatswechsel). */
.shift-week-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 6px;
}
.shift-week-nav > :last-child { justify-self: end; }
.shift-week-label {
  /* Feste Mindestbreite. Die laengste Beschriftung ist
     "28.09.-04.10.2026" (Monatswechsel, 17 Zeichen); 19ch liegt darueber,
     damit die Box bei jedem Monatswechsel exakt gleich breit bleibt und
     die Pfeile nicht verrutschen. */
  min-width: 19ch;
  text-align: center;
  font-size: .88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text);
  padding: 0 4px;
}
.btn-sm {
  min-height: 38px;
  padding: 0 13px;
  font-size: .88rem;
  font-weight: 650;
  border-radius: 10px;
}

/* Tagesbeschriftung Datum */
.shift-day-date {
  font-size: .87rem;
  font-weight: 500;
  color: var(--mute);
}

/* Schicht-Bearbeiten-Kopf */
.shift-edit-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* Datums-/Zeit-Zeile im Formular */
.shift-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px) {
  .shift-form-row { grid-template-columns: 1fr; }
}

/* Schicht-Konflikt-Markierung */
.shift-item.shift-conflict {
  border-color: var(--warn);
  background: var(--warn-bg);
}
.shift-item.shift-conflict:hover,
.shift-item.shift-conflict:focus-visible {
  border-color: var(--warn);
  box-shadow: 0 0 0 2px rgba(189,98,0,.2);
}
.shift-conflict-flag {
  font-size: .78rem;
  font-weight: 700;
  color: var(--warn);
  margin-top: 4px;
}

/* Konfliktzusammenfassung oben */
.shift-conflicts {
  background: var(--warn-bg);
  border: 1px solid #E8C49A;
  border-left: 4px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  margin-bottom: 14px;
  font-size: .92rem;
  color: var(--text);
}
.shift-conflict-list {
  margin: 6px 0 4px 1.1rem;
  padding: 0;
  font-size: .9rem;
}
.shift-conflict-list li { margin: 3px 0; }

/* Mitarbeiteransicht: Schicht-Listenelemente */
.emp-shifts-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.emp-shift-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  font-size: .92rem;
  line-height: 1.3;
}
.emp-shift-item:last-child { border-bottom: 0; }

/* ========== Server-rendered bridge (PHP forms, flash, admin SSR) ========== */
.site-foot {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 18px 16px 28px; color: var(--mute); font-size: .82rem;
}
.foot-sep { opacity: .5; }
.foot-note { font-style: italic; }
.page-subtitle { margin: 0 0 14px; }
.inline-form { display: inline; margin: 0; }
.who { color: #fff; font-size: .88rem; font-weight: 600; opacity: .95; white-space: nowrap; }
.topbar-nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.topbar-link {
  color: #fff; text-decoration: none; padding: 8px 12px; border-radius: 11px;
  font-weight: 600; font-size: .9rem; background: transparent;
}
.topbar-link:hover, .topbar-link.is-active { background: rgba(255,255,255,.18); text-decoration: none; }
.brand-logo-chip { display: inline-flex; align-items: center; background: #fff; border-radius: 11px; padding: 5px 10px; }
.brand-logo { display: block; height: 82px; width: auto; max-width: 315px; object-fit: contain; }
@media (max-width: 900px) {
  .brand-logo { height: 68px; max-width: 260px; }
}
@media (max-width: 420px) {
  .brand-logo { height: 54px; max-width: 195px; }
  .brand-logo-chip { padding: 4px 7px; border-radius: 9px; }
  .topbar-brand-row { gap: 8px; }
}
.topbar-brand-row { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.topbar-brand-text { display: flex; flex-direction: column; min-width: 0; }
.topbar-brand-text strong { font-size: .95rem; }
.flash {
  margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); font-size: .95rem;
}
.flash-success { background: var(--ok-bg); color: var(--ok); border-color: #c5e0cf; }
.flash-error { background: var(--danger-bg); color: var(--danger); border-color: #e5c4c3; }
.flash-info { background: var(--info-bg); color: var(--info); border-color: #c9d4df; }
.flash-warn { background: var(--warn-bg); color: var(--warn); border-color: #efd3b0; }
.form-grid {
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 720px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.field-label { font-size: .82rem; font-weight: 650; color: var(--mute); }
.field input, .field select, .field textarea {
  min-height: 44px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: #fff; color: var(--text);
}
.field textarea { min-height: 96px; resize: vertical; }
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
  margin-bottom: 14px; padding: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.notice {
  margin-top: 14px; padding: 12px 14px; background: var(--accent-soft);
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .9rem;
}
.action-row { display: flex; flex-wrap: wrap; gap: 10px; }
.action-form { margin: 0; }
.btn-lg { min-height: var(--touch); padding: 0 22px; font-size: 1.05rem; }
.btn-sm { min-height: 40px; padding: 0 12px; font-size: .88rem; }
.back-link { display: inline-block; margin-bottom: 10px; font-size: .9rem; font-weight: 600; }
.emp-head { margin-bottom: 12px; }
.emp-head-main { display: flex; align-items: center; gap: 12px; }
.emp-head-main h1 { margin: 0; font-size: 1.35rem; }
.status-card .status-headline { margin: 0 0 6px; font-size: 1.4rem; font-weight: 750; letter-spacing: .04em; }
.status-card.status-on .status-headline, .status-card.status-working .status-headline { color: var(--ok); }
.status-card.status-break .status-headline, .status-card.status-on_break .status-headline { color: var(--warn); }
.stat-row { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0 4px; }
.stat { display: flex; flex-direction: column; }
.stat-value { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .78rem; color: var(--mute); }
.fineprint { margin: 10px 0 0; font-size: .82rem; color: var(--mute); line-height: 1.45; }
.table {
  width: 100%; border-collapse: collapse; font-size: .92rem;
}
.table th, .table td {
  text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.group > .person-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
}
a.person-tile { text-decoration: none; color: inherit; }
.person-tile, button.person-tile, a.person-tile {
  display: flex; flex-direction: column; gap: 8px; padding: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); color: var(--text); text-align: left; font: inherit; width: 100%;
  cursor: pointer;
}
.person-tile:hover { border-color: var(--accent); text-decoration: none; }
.person-tile.is-static { cursor: default; }
.person-tile.is-flagged { border-color: #efd3b0; background: var(--warn-bg); }
.person-tile-top { display: flex; align-items: center; gap: 10px; }
.person-tile-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.person-tile-text strong { font-size: .95rem; }
.person-tile-detail {
  display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .84rem;
  border-top: 1px solid var(--line); padding-top: 8px;
}
.person-tile-go { font-size: .84rem; font-weight: 650; color: var(--brand); text-decoration: none; }
.group { margin-bottom: 18px; }
.group-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mute);
}
.group-count {
  display: inline-block; min-width: 1.6em; padding: 0 .4em; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-size: .78rem;
}
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%; background: var(--brand-soft);
  border: 1px solid var(--line); color: var(--brand); font-size: .82rem; font-weight: 700;
}
.avatar-on, .avatar-working { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.avatar-break, .avatar-on_break { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; }
.avatar-off { background: #fff; color: var(--mute); }
.chip-ok, .chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip-warn, .chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip-mute { background: #fff; color: var(--mute); border: 1px solid var(--line); }

/* Namen in Datentabellen sind Text. Die Zeile oder eine eigene Aktion führt weiter. */
table.data td a:not(.btn):not(.staff-act),
table.admin-staff td a:not(.btn):not(.staff-act),
.table td a:not(.btn):not(.staff-act) {
  color: inherit;
  text-decoration: none;
  font-weight: 650;
}
table.data td a:not(.btn):not(.staff-act):hover,
table.admin-staff td a:not(.btn):not(.staff-act):hover,
.table td a:not(.btn):not(.staff-act):hover {
  text-decoration: underline;
}
.klar-name a { color: inherit; text-decoration: none; font-weight: inherit; }
.klar-name a:hover { text-decoration: underline; }
a.shift-item { color: inherit; text-decoration: none; }
.unknown { color: var(--mute); font-style: italic; }
.tabs, .emp-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px;
}
.tab {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line); background: #fff;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.tab:hover { text-decoration: none; border-color: var(--accent); }
.kpi-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.kpi-value { font-size: 1.6rem; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-label { font-size: .78rem; color: var(--mute); }
a.kpi { text-decoration: none; color: inherit; }
.card-warn { border-color: #efd3b0; background: var(--warn-bg); }
.card-title-sm { margin: 0 0 10px; font-size: 1rem; font-weight: 650; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.rules-form .rule-block { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
/* Unter 720 px ist das Raster einspaltig. min-width: auto am Grid-Item
   hebt die 1fr-Spur auf die min-content-Breite des laengsten Selects
   (Erfassungsart der Pausen) und die Spur steht ueber die Karte hinaus. */
@media (max-width: 719px) {
  .rules-form .form-grid > .field { min-width: 0; }
}
.plain-list { margin: 0; padding-left: 1.1em; }
.plain-list li { margin-bottom: .25em; }
.logout-form { display: contents; }
.wrap.emp-has-nav { padding-bottom: 12px; }
.login-sub {
  margin: 18px 0 8px; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--mute);
}
.bottom-nav-spacer { height: 72px; }
.emp-bottom-nav {
  position: sticky; bottom: 0; z-index: 15;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 8px; background: rgba(247,245,242,.96); border-top: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.emp-bottom-nav a {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  border-radius: 12px; text-decoration: none; color: var(--text); font-weight: 650; font-size: .85rem;
}
.emp-bottom-nav a.is-active { background: var(--brand); color: #fff; }
.corr-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.progress-bar {
  height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 8px 0 14px;
}
.progress-bar > span { display: block; height: 100%; background: var(--brand); }
.is-today { background: var(--row-present); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}



/* ========== Abschluss / Monatsabschluss ========== */
/* Die Abschlussseite nutzt denselben kompakten Verwaltungsrhythmus wie
   Übersicht und Korrekturen. Bedienflächen bleiben groß genug, nur
   verschachtelte Karten und unnötige vertikale Luft werden reduziert. */
.abschluss-controls {
  padding: 12px 14px;
}
.abschluss-filter {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 8px;
}
.abschluss-filter .field {
  gap: 3px;
}
.abschluss-filter .field-label {
  font-size: .74rem;
}
.abschluss-filter .field select {
  min-height: 40px;
  padding: 7px 10px;
}
.abschluss-status {
  margin: 4px 0 6px;
}
.abschluss-controls > .muted {
  margin: 0 0 8px;
}
.abschluss-actions {
  margin-top: 6px;
  align-items: center;
  gap: 8px;
}
.abschluss-actions .btn {
  min-height: 40px;
  border-radius: 10px;
  padding: 0 14px;
}
.abschluss-action-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.abschluss-note {
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.abschluss-notice {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: .82rem;
  line-height: 1.35;
}
.abschluss-preview-card {
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: none;
}
.abschluss-preview-card .card-title-sm {
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: #FCFBF9;
}
.abschluss-preview-table th,
.abschluss-preview-table td {
  padding: 4px 10px;
  vertical-align: middle;
  line-height: 1.25;
}
.abschluss-preview-table th {
  padding-top: 6px;
  padding-bottom: 6px;
  background: #FCFBF9;
}
.abschluss-preview-table tbody tr:last-child td {
  border-bottom: 0;
}
@media (max-width: 700px) {
  .abschluss-controls { padding: 12px; }
  .abschluss-action-form { width: 100%; }
  .abschluss-note { flex: 1 1 180px; min-width: 0; }
}

/* ========== Zeitdaten ========== */
/* Reine Datentabellen: kompakte Zeilen wie in Übersicht und Abschluss.
   Inhalt und Bedienlogik bleiben unverändert. */
.zeitdaten-table th,
.zeitdaten-table td {
  padding: 4px 10px;
  vertical-align: middle;
  line-height: 1.25;
}
.zeitdaten-table th {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* =====================================================================
   POLISH-LAYER (Produktlook). Bewusst ganz am Ende, ueberschreibt nur
   Tokens und Feinheiten. Entfernen: alles ab diesem Kommentar loeschen.
   ===================================================================== */
:root {
  --bg: #E4DED4;
  --line: #D3CBBE;
  --shadow: 0 1px 2px rgba(60,40,30,.06), 0 8px 24px rgba(60,40,30,.10);
  --shadow-lift: 0 2px 4px rgba(60,40,30,.08), 0 14px 34px rgba(60,40,30,.14);
}
body { background: var(--bg); -webkit-font-smoothing: antialiased; }

/* Topbar: Tiefe statt flacher Flaeche, goldene Kante */
.topbar {
  background: linear-gradient(180deg, #96292A 0%, #7A2021 100%);
  border-bottom: 3px solid var(--accent);
  box-shadow: 0 4px 18px rgba(60,20,20,.28);
}
.admin-nav-item { transition: background .15s ease; }
.admin-nav-item:hover { background: rgba(255,255,255,.12); }

/* Karten und Panels: klar vom Grund abgehoben */
.card, .shift-matrix-wrap, .filter-bar {
  border-color: var(--line);
  box-shadow: var(--shadow);
}

/* Tabellen: einheitlicher Kopf, ruhige Zeilen */
table.data thead th, table.staff-list thead th {
  background: #F4EFE8;
  color: var(--mute);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
table.staff-list thead th.col-staff-profile { font-size: .72rem; }
table.data tbody tr:hover { background: var(--brand-soft); }

/* Formulare: gleiche Hoehe fuer Input und Select, sichtbarer Fokus */
.field input, .field select, .field textarea, select, input[type="date"] {
  min-height: 44px;
  border-color: #CFC6B8;
}
.field select { height: 44px; }
.field input:focus, .field select:focus, .field textarea:focus,
select:focus, input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(138,37,36,.16);
}

/* Buttons: Haptik */
.btn { transition: transform .08s ease, box-shadow .15s ease, background .15s ease; }
.btn-primary { box-shadow: 0 2px 6px rgba(98,26,25,.28); }
.btn-primary:hover { box-shadow: 0 4px 12px rgba(98,26,25,.34); }
.btn:active { transform: translateY(1px); }

/* Mitarbeiter-Auswahl und Tabs */
.person-card { box-shadow: 0 1px 2px rgba(60,40,30,.06); transition: box-shadow .15s ease, transform .1s ease; }
.person-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.tab, .emp-tabs .tab { transition: background .15s ease; }

/* Mitarbeiterliste: nie mehr abgeschnittene Aktionsspalte */
.staff-split .card { overflow-x: auto; }
@media (min-width: 1200px) and (max-width: 1700px) {
  table.staff-list td,
  table.staff-list thead th { padding-left: 8px; padding-right: 8px; }
  table.staff-list .col-staff-role,
  table.staff-list .col-staff-profile { font-size: .78rem; }
}

/* Bearbeiten-Formular: Felder strecken sich nicht mehr mit der Zeilenhoehe,
   Hinweise sind normaler Fliesstext, die Karte hat Lesebreite. */
label.field { align-content: start; margin-bottom: 0; }
label.field .fineprint {
  margin: 0;
  font-weight: 400;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--mute);
}
label.field input, label.field select, label.field textarea { min-height: 44px; }
.form-grid { gap: 16px 20px; align-items: start; }
body.admin-employee .admin-wrap > .card { max-width: 920px; padding: 22px 24px; }
body.admin-employee .admin-wrap > .card .card-title { font-size: 1.15rem; margin-bottom: 4px; }
.row-actions { margin: 10px 0 18px; }
.chip.mute { align-self: center; }
body.admin-employee .admin-wrap > .card,
body.admin-employee .admin-wrap > p:has(> .btn) { max-width: 920px; margin-left: auto; margin-right: auto; }
body.admin-employee .admin-wrap > .card form > .btn-primary,
body.admin-employee .admin-wrap > .card .form-grid .btn-primary { min-height: 46px; padding: 0 26px; }

/* Bearbeiten/Anlegen: auf Desktop alles ohne Scrollen sichtbar.
   Drei Spalten, straffe Abstaende. Nur breite und hohe Fenster. */
@media (min-width: 1100px) and (min-height: 720px) {
  body.admin-employee .admin-wrap { padding-top: 22px; padding-bottom: 14px; }
  body.admin-employee .admin-wrap > .card { max-width: 1120px; padding: 20px 26px 16px; margin-top: 0 !important; }
  body.admin-employee .admin-wrap > .card .card-title { font-size: 1.15rem; margin: 0 0 4px; }
  body.admin-employee .admin-wrap > .card > .muted { margin: 0; font-size: .85rem; }
  body.admin-employee .admin-wrap > .card .row-actions { margin: 10px 0 16px; }
  body.admin-employee .admin-wrap > .card .btn-sm { min-height: 34px; }
  body.admin-employee .admin-wrap > .card .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 22px; }
  body.admin-employee .admin-wrap > .card label.field { gap: 4px; }
  body.admin-employee .admin-wrap > .card label.field input,
  body.admin-employee .admin-wrap > .card label.field select { min-height: 42px; height: 42px; padding: 8px 12px; }
  body.admin-employee .admin-wrap > .card label.field .fineprint { font-size: .78rem; line-height: 1.35; }
  body.admin-employee .admin-wrap > .card .field-wide > .field-label { margin: 8px 0 8px; }
  body.admin-employee .admin-wrap > .card .field-wide .form-grid { margin: 0; }
  body.admin-employee .admin-wrap > .card form > .field-wide:last-child { margin-top: 6px; }
  body.admin-employee .admin-wrap > .card form > .btn-primary,
  body.admin-employee .admin-wrap > .card .form-grid .btn-primary { min-height: 40px; }
  body.admin-employee .admin-wrap > .card > .fineprint { margin: 14px 0 0; font-size: .78rem; line-height: 1.4; }
}


/* =====================================================================
   Mitarbeiterkonto / Navigation – 0.2.2
   Desktop: gleiche Logik wie Verwaltung im Kopf.
   Mobil: grosse Bottom-Navigation fuer Daumenbedienung.
   ===================================================================== */
.employee-topbar {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  column-gap: 18px;
}
.employee-topbar .topbar-brand { padding-right: 0; }
.employee-nav {
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.employee-nav::-webkit-scrollbar { display: none; }
.employee-nav-item {
  flex: 0 0 auto;
  color: rgba(255,255,255,.86);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  padding: 11px 14px 10px;
  border-bottom: 3px solid transparent;
  border-radius: 8px 8px 0 0;
  transition: background .15s, color .15s, border-color .15s;
}
.employee-nav-item:hover,
.employee-nav-item:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.13);
  outline: none;
}
.employee-nav-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.employee-nav-item.is-active {
  color: #fff;
  background: rgba(255,255,255,.15);
  border-bottom-color: var(--accent);
}

.bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bottom-nav a { min-height: 64px; }

.account-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.account-grid .card,
.account-grid .punch-card { margin: 0; }
.account-form { margin-top: 14px; }
.account-state { margin: 12px 0 0; }
.account-facts { margin: 0; }
.account-facts > div {
  display: grid;
  grid-template-columns: minmax(8rem, .7fr) 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.account-facts > div:last-child { border-bottom: 0; }
.account-facts dt { color: var(--mute); font-size: .85rem; font-weight: 650; }
.account-facts dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }

@media (min-width: 701px) {
  body.employee .bottom-nav { display: none; }
  .wrap.emp-has-nav { padding-bottom: 28px; }
}
@media (min-width: 820px) {
  .account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-security { grid-column: 1 / -1; }
}
@media (max-width: 1050px) and (min-width: 701px) {
  .employee-nav { justify-content: flex-start; }
  .employee-nav-item { padding-inline: 10px; font-size: .84rem; }
  .employee-topbar { column-gap: 10px; }
  .employee-topbar-identity { max-width: 130px; }
}
@media (max-width: 700px) {
  .employee-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
  }
  .employee-topbar .topbar-brand { grid-column: 1 / -1; }
  .employee-nav { display: none; }
  .employee-topbar .header-clock { grid-column: 1; justify-self: center; }
  .employee-topbar-user { grid-column: 2; gap: 8px; }
  .wrap.emp-has-nav { padding-bottom: 14px; }
  .account-grid .btn,
  .account-grid input { min-height: 54px; }
  .bottom-nav a {
    min-height: 64px;
    padding: 5px 2px;
    font-size: .69rem;
  }
  .bottom-nav .ico { font-size: 1.12rem; }
}
@media (max-width: 380px) {
  .bottom-nav a { font-size: .64rem; }
  .account-facts > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Login: Praxisverwaltung ist ein sekundaerer Zugang im Kopf statt einer
   grossen vierten Auswahlflaeche unter den Mitarbeitenden. */
.login-topbar-actions {
  justify-content: flex-end;
  min-width: 0;
}
.login-admin-form { margin: 0; }
.login-admin-button {
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.login-admin-button:hover,
.login-admin-button:focus-visible {
  background: rgba(255,255,255,.24);
  border-color: rgba(255,255,255,.5);
  outline: none;
}
.login-admin-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(206,179,131,.45);
}
.login-admin-button:active { transform: scale(.99); }

@media (max-width: 700px) {
  .login-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand admin"
      "clock clock";
    row-gap: 8px;
  }
  .login-topbar .topbar-brand {
    grid-area: brand;
    grid-column: auto;
  }
  .login-topbar .header-clock {
    grid-area: clock;
    grid-column: auto;
    justify-self: center;
  }
  .login-topbar-actions {
    grid-area: admin;
    justify-self: end;
  }
  .login-admin-button { min-height: 52px; }
}

@media (max-width: 380px) {
  .login-topbar .brand-logo { height: 46px; max-width: 165px; }
  .login-admin-button {
    min-height: 50px;
    max-width: 118px;
    padding: 0 10px;
    font-size: .78rem;
    line-height: 1.1;
    white-space: normal;
  }
}

/* Admin-Anmeldung und Kontenverwaltung – 0.2.6 */
.login-admin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.admin-login-panel {
  width: min(430px, 100%);
  margin: 34px auto 0;
}
.admin-login-card { padding: 22px; }
.admin-login-card .section-title { margin-bottom: 4px; }
.admin-login-card .muted { margin: 0 0 18px; }
.admin-login-password { margin-bottom: 6px !important; }
.admin-forgot-button {
  width: 100%;
  min-height: 40px;
  margin-top: 0;
  padding: 0 12px;
  border-radius: 10px;
}
.admin-forgot-note { margin: 0 0 14px; }
.admin-login-submit { min-height: 56px; margin-top: 12px; }

.security-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.security-head .section-title { margin-bottom: 1px; }
.security-head .muted { margin: 0; }

/* Praxisverwaltung bewusst kompakt: Zugangsdaten sind eine Nebenfunktion,
   keine halbe Bildschirmseite. Auf breiten Ansichten liegen alle Felder in
   einer Zeile; Touch-Ziele wachsen auf schmalen Geräten wieder an. */
.security-admin-card {
  margin-bottom: 12px;
  padding: 10px 12px;
}
.security-admin-card .card-title { margin: 0 0 2px; }
.security-admin-card > .muted { margin: 0 0 8px; font-size: .8rem; }
.security-admin-form {
  display: grid;
  grid-template-columns: minmax(130px, .75fr) repeat(3, minmax(145px, 1fr)) auto;
  gap: 8px;
  align-items: end;
}
.security-admin-form .field { margin: 0; gap: 3px; }
.security-admin-form .field-label { font-size: .72rem; }
.security-admin-form .field input {
  min-height: 38px;
  padding: 6px 9px;
  font-size: .9rem;
}
.security-admin-form .btn {
  min-height: 38px;
  padding: 0 12px;
  white-space: nowrap;
}

.security-accounts { display: grid; gap: 10px; }
.security-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}
.security-list-head .card-title { margin: 0; }

/* Mitarbeiterkonten folgen derselben fachlichen Gruppierung wie die
   Mitarbeiterverwaltung. Innerhalb jeder Gruppe ist es eine echte Tabelle:
   feste Spalten statt frei nebeneinander laufender Inhalte. */
.security-account-group {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.security-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  background: #FAF8F5;
  border-bottom: 1px solid var(--line);
}
.security-group-head h4 {
  margin: 0;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mute);
}
.security-group-head span { font-size: .74rem; color: var(--mute); }
.security-account-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.security-account-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: .82rem;
}
.security-account-table th,
.security-account-table td {
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.security-account-table th {
  padding: 5px 8px;
  background: #FCFBF9;
  color: var(--mute);
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.security-account-table td { padding: 4px 8px; }
.security-account-table tbody tr:last-child td { border-bottom: 0; }
.security-account-table tbody tr.is-inactive { background: #F7F5F2; }
.security-account-table th:nth-child(1) { width: 18%; }
.security-account-table th:nth-child(2) { width: 28%; }
.security-account-table th:nth-child(3) { width: 14%; }
.security-account-table th:nth-child(4) { width: 16%; }
.security-account-table th:nth-child(5) { width: 24%; }
.security-col-name strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .86rem;
}
.security-col-role,
.security-col-user {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mute);
}
.security-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
}
.security-status.ok { background: var(--ok-bg); color: var(--ok); }
.security-status.warn { background: var(--warn-bg); color: var(--warn); }
.security-status.mute { background: #EEF0EE; color: var(--mute); }
.security-pin-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.security-pin-form label {
  width: 112px;
  flex: 0 0 112px;
}
.security-pin-form input {
  width: 112px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  letter-spacing: .08em;
}
.security-pin-form .btn {
  min-height: 34px;
  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .security-admin-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .security-admin-form .btn { justify-self: start; }
}
@media (max-width: 700px) {
  .admin-login-panel { margin-top: 22px; }
  .security-admin-form { grid-template-columns: 1fr; }
  .security-admin-form .field input,
  .security-admin-form .btn { min-height: 48px; }
  .security-account-table { min-width: 820px; }
  .security-account-table td { padding-top: 6px; padding-bottom: 6px; }
  .security-pin-form input,
  .security-pin-form .btn { min-height: 44px; }
}