/* =========================================================================
   Timekeeper – Ergaenzungen zum MSI-Design-System.
   Nutzt dieselben Tokens (--msi-*), damit Hell/Dunkel automatisch mitlaufen.
   ========================================================================= */

/* Grundregel: Innenabstaende zaehlen zur Breite. Ohne diesen Reset addiert der
   Browser Padding auf die 100%-Breite – Karteninhalte laufen dann rechts heraus
   und werden abgeschnitten (msi.css setzt das nicht selbst, es erbt den Reset
   sonst von Bootstrap). */
*, *::before, *::after { box-sizing: border-box; }

/* Feldtypen, die das Design-System nicht erfasst (es kennt nur text/date/email/
   number/password). Ohne diese Zeilen bleiben Uhrzeit-, Such- und Dateifelder
   in der Browser-Rohform stehen und sehen fremd aus. */
.msi-scope input[type=time], .msi-scope input[type=search],
.msi-scope input[type=tel], .msi-scope input[type=url],
.msi-scope input[type=month], .msi-scope input[type=week],
.msi-scope input[type=datetime-local], .msi-scope input[type=color] {
  min-height: 46px; font-size: 16px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--msi-line); background: var(--msi-surface); color: var(--msi-ink);
}
.msi-scope input[type=color] { padding: 4px; min-width: 64px; }
.msi-scope input[type=file] { font-size: 14px; color: var(--msi-ink-soft); }
.msi-scope input[type=time]:focus, .msi-scope input[type=search]:focus,
.msi-scope input[type=tel]:focus, .msi-scope input[type=url]:focus,
.msi-scope input[type=datetime-local]:focus {
  outline: none; border-color: var(--msi-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--msi-brand) 18%, transparent);
}

html, body { max-width: 100%; overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }

/* `.msi-table td { color: var(--msi-ink) }` ist spezifischer als eine blosse
   Klasse – deshalb blieben Plus und Minus in Tabellen farblos. Mit der
   Tabellenzelle davor gewinnt die Farbe. Null bleibt bewusst neutral. */
.tk-plus, .msi-table td.tk-plus, .msi-table th.tk-plus {
  color: var(--msi-good); font-weight: 700; }
.tk-minus, .msi-table td.tk-minus, .msi-table th.tk-minus {
  color: var(--msi-bad); font-weight: 700; }
.tk-num { font-variant-numeric: tabular-nums; }

/* Kopfzeile jeder Seite */
.tk-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin:6px 2px 4px; }
.tk-head__sub { color:var(--msi-ink-soft); font-size:13.5px; margin:4px 0 0; }
.tk-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* Stempeluhr */
.tk-clock { background:var(--msi-navy); color:#fff; border-radius:var(--msi-radius-lg);
  padding:22px 20px; box-shadow:var(--msi-shadow); }
.tk-clock__k { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
.tk-clock__time { font-size:46px; font-weight:800; line-height:1; margin:8px 0 4px;
  font-variant-numeric:tabular-nums; }
.tk-clock__meta { font-size:13px; opacity:.85; }
.tk-clock__btns { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.tk-clock__btn { flex:1; min-width:120px; border:0; border-radius:12px; padding:14px 12px;
  font-size:15px; font-weight:700; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; }
.tk-clock__btn:hover { background:rgba(255,255,255,.24); }
.tk-clock__btn--start { background:var(--msi-brand); }
.tk-clock__btn--start:hover { background:var(--msi-brand-deep); }
.tk-clock__btn--stop { background:var(--msi-bad); }
.tk-clock__btn--pause { background:rgba(255,255,255,.2); }
.tk-clock.is-pause .tk-clock__time { opacity:.55; }

/* Kennzahlen-Kacheln */
.tk-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:12px; margin-top:14px; }
.tk-kpi { background:var(--msi-card); border:1px solid var(--msi-line); border-radius:var(--msi-radius);
  padding:14px 16px; box-shadow:var(--msi-shadow); }
.tk-kpi__k { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--msi-ink-faint); }
.tk-kpi__v { font-size:24px; font-weight:800; margin-top:4px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.tk-kpi__s { font-size:12.5px; color:var(--msi-ink-soft); margin-top:2px; }

/* Monatsnavigation */
.tk-monthnav { display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--msi-card); border:1px solid var(--msi-line); border-radius:var(--msi-radius);
  padding:8px 12px; margin:14px 0; }
.tk-monthnav__t { font-weight:750; font-size:16px; }
.tk-monthnav a { text-decoration:none; color:var(--msi-ink-soft); font-weight:700; padding:6px 12px;
  border-radius:9px; }
.tk-monthnav a:hover { background:var(--msi-surface); color:var(--msi-brand-deep); }

/* Tabellen passen sich der Fensterbreite an.
   msi.css setzt fuer `--wide` bewusst `width:max-content` mit `nowrap` – gedacht
   fuer breite Bildschirme. In einem schmalen Fenster fuehrt das dazu, dass man
   waagerecht schieben muss, um die letzten Spalten zu sehen. Hier gilt deshalb:
   umbrechen statt hinausragen. Nur Werte, die nie umbrechen duerfen (Datum,
   Uhrzeit, Zahlen, Knopfreihen), bleiben zusammen. */
.msi-table--wide { width: 100%; min-width: 0; }
.msi-table--wide th, .msi-table--wide td { white-space: normal; }
.msi-table--wide td.tk-num, .msi-table--wide th.tk-num,
.msi-table--wide td[style*="nowrap"] { white-space: nowrap; }

/* Mittlere Breiten (Tablet quer, schmales Fenster): enger setzen, damit alle
   Spalten hineinpassen, statt die Tabelle scrollen zu lassen. */
@media (max-width: 1300px) {
  .msi-table { font-size: 12.5px; }
  .msi-table th, .msi-table td { padding: 7px 8px; }
  .msi-table th { font-size: 10.5px; letter-spacing: .02em; }
  .tk-col-opt { display: none; }
}

/* Tabellenrahmen: waagerecht scrollbar nur noch als allerletzte Reserve */
.tk-tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:var(--msi-card); border:1px solid var(--msi-line); border-radius:var(--msi-radius);
  box-shadow:var(--msi-shadow); }
.tk-tablewrap .msi-table { margin:0; }
.msi-table tr.tk-row-wochenende td { background:color-mix(in srgb, var(--msi-surface) 70%, transparent); }
.msi-table tr.tk-row-feiertag td { background:color-mix(in srgb, var(--msi-teal) 8%, transparent); }
/* Heutiger Tag: zarte Tönung der Zeile, Markierung nur am linken Rand –
   ein Rahmen auf jeder Zelle ergaebe sonst gruene Streifen quer durch die Zeile. */
.msi-table tr.tk-row-heute td { background:color-mix(in srgb, var(--msi-brand) 7%, transparent); }
.msi-table tr.tk-row-heute td:first-child { box-shadow:inset 3px 0 0 var(--msi-brand); }
.msi-table tr.tk-row-fehlt td { background:color-mix(in srgb, var(--msi-warn) 12%, transparent); }
.msi-table td.tk-right, .msi-table th.tk-right { text-align:right; }
.tk-mini { font-size:11.5px; color:var(--msi-ink-faint); }

/* Tages-Aktionsknoepfe in Tabellen */
.tk-iconbtn { border:1px solid var(--msi-line); background:var(--msi-card); color:var(--msi-ink-soft);
  border-radius:9px; padding:5px 9px; font-size:12px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:5px; }
.tk-iconbtn:hover { border-color:var(--msi-brand); color:var(--msi-brand-deep); }
.tk-iconbtn--bad:hover { border-color:var(--msi-bad); color:var(--msi-bad); }

/* +/- Schnellverstellung im Zeitformular */
.tk-step { display:flex; align-items:center; gap:8px; }
/* min-width:0 ist entscheidend: Eingabefelder haben eine intrinsische Mindestbreite,
   sonst laeuft die Zeile ueber und der Plus-Knopf wird abgeschnitten. */
.tk-step input { flex:1 1 0; min-width:0; width:100%; }
.tk-stepbtn { width:44px; height:46px; flex:none; border:1px solid var(--msi-line);
  background:var(--msi-surface); color:var(--msi-ink); border-radius:12px; font-size:19px;
  font-weight:700; cursor:pointer; }
.tk-stepbtn:hover { border-color:var(--msi-brand); color:var(--msi-brand-deep); }

/* Team-Kalender */
.tk-cal { border-collapse:collapse; font-size:11.5px; width:max-content; min-width:100%; }
.tk-cal th, .tk-cal td { border:1px solid var(--msi-line); padding:0; text-align:center; }
.tk-cal th.tk-cal__name, .tk-cal td.tk-cal__name { text-align:left; padding:6px 10px; min-width:170px;
  position:sticky; left:0; background:var(--msi-card); z-index:2; font-weight:650; white-space:nowrap; }
.tk-cal th { padding:5px 0; font-size:10.5px; color:var(--msi-ink-faint); background:var(--msi-surface); }
.tk-cal td { width:26px; height:28px; }
.tk-cal .tk-cal__we { background:var(--msi-surface-2); }
.tk-cal .tk-cal__ft { background:color-mix(in srgb, var(--msi-teal) 16%, transparent); }
.tk-cal__zelle { display:block; width:100%; height:100%; line-height:28px; font-weight:700; font-size:10.5px; }
.tk-cal__zelle--urlaub { background:var(--msi-brand); color:#fff; }
.tk-cal__zelle--sonderurlaub { background:var(--msi-teal); color:#fff; }
.tk-cal__zelle--unbezahlt { background:#8a959b; color:#fff; }
.tk-cal__zelle--elternzeit { background:#7a5af5; color:#fff; }
.tk-cal__zelle--krank { background:var(--msi-bad); color:#fff; }
.tk-cal__zelle--kind_krank { background:#e8697a; color:#fff; }
.tk-cal__zelle--fortbildung { background:var(--msi-warn); color:#fff; }
.tk-cal__zelle--zeitausgleich { background:#4a6572; color:#fff; }
.tk-cal__zelle--offen { opacity:.45; border:1px dashed rgba(0,0,0,.35); }
.tk-legende { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; font-size:12px; color:var(--msi-ink-soft); }
.tk-legende span b { display:inline-block; min-width:22px; text-align:center; border-radius:5px;
  padding:1px 4px; color:#fff; margin-right:4px; font-size:11px; }

/* Formulare */
.tk-formgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.tk-formgrid--tage { grid-template-columns:repeat(auto-fit,minmax(76px,1fr)); }
.tk-field { display:flex; flex-direction:column; gap:5px; }
.tk-field label { font-weight:650; font-size:13px; color:var(--msi-ink-soft); }
.tk-field .helptext { font-size:11.5px; color:var(--msi-ink-faint); }
.tk-field .errorlist { color:var(--msi-bad); font-size:12px; margin:2px 0 0; padding-left:16px; }
.tk-fieldset { border:1px solid var(--msi-line); border-radius:var(--msi-radius); padding:14px 16px;
  margin-top:16px; background:var(--msi-card); }
.tk-fieldset > legend { font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--msi-ink-faint); padding:0 6px; }

/* Meldungen */
.tk-msgs { display:flex; flex-direction:column; gap:8px; margin:12px 0; }

/* Druck: keine Browser-Kopf-/Fusszeile, kein Menue, volle Breite */
.tk-printhead { display:none; }
@media print {
  @page { size:A4; margin:0; }
  body { background:#fff !important; }
  .msi-topbar, .tk-actions, .tk-monthnav a, .msi-tabbar, .tk-noprint, form.tk-noprint,
  .tk-iconbtn, .tk-msgs { display:none !important; }
  .msi-main { padding:0 !important; }
  .msi-shell, .msi-shell--wide { max-width:none !important; padding:12mm 10mm !important; }
  .tk-printhead { display:flex !important; align-items:center; gap:12px; border-bottom:2px solid #16232a;
    padding-bottom:8px; margin-bottom:14px; }
  .tk-printhead__logo { height:34px; }
  .tk-printhead__t { font-weight:800; font-size:17px; }
  .tk-printhead__s { font-size:11.5px; color:#556169; }
  .tk-printhead__r { margin-left:auto; font-size:11px; color:#556169; text-align:right; }
  .tk-tablewrap { overflow:visible !important; border:0 !important; box-shadow:none !important; }
  .msi-table { font-size:10.5px; }
  .msi-table th, .msi-table td { padding:4px 6px; }
  .tk-kpi, .msi-item, .tk-tablewrap { break-inside:avoid; }
  thead { display:table-header-group; }
  tr { break-inside:avoid; }
  .tk-cal td { height:20px; }
  .tk-cal__zelle { line-height:20px; }
}

/* Links in Tabellen sind im MSI-System rot (Loesch-Aktionen). Unsere neutralen
   Aktionsknoepfe sollen davon unberuehrt bleiben. */
.msi-table a.tk-iconbtn { color: var(--msi-ink-soft); font-weight: 600; }
.msi-table a.tk-iconbtn:hover { color: var(--msi-brand-deep); }
.msi-table a.tk-iconbtn--bad:hover { color: var(--msi-bad); }

/* ---- Lesbarkeit langer Tabellen ---------------------------------------- */
/* Kopfzeile bleibt beim Scrollen stehen. */
.tk-sticky thead th { position: sticky; top: 0; z-index: 3; background: var(--msi-surface); }
.msi-topbar + .msi-main .tk-sticky thead th { top: 0; }

/* Wochentrenner und Wochensumme in der Monatstabelle */
.msi-table tr.tk-row-kw td { background: var(--msi-surface-2); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--msi-ink-faint);
  padding-top: 10px; padding-bottom: 6px; border-bottom: 0; }
.msi-table tr.tk-row-kwsumme td { font-weight: 700; color: var(--msi-ink-soft);
  border-top: 1px solid var(--msi-line); border-bottom: 2px solid var(--msi-line);
  background: color-mix(in srgb, var(--msi-surface) 55%, transparent); }
.msi-table tfoot td { font-weight: 800; font-size: 14px; padding-top: 12px; padding-bottom: 12px;
  border-top: 2px solid var(--msi-ink-faint); }

/* Schnellwahl von Zeiträumen und Filterleiste */
.tk-quick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.tk-quick a { text-decoration: none; font-size: 13px; font-weight: 650; padding: 7px 13px;
  border-radius: 99px; border: 1px solid var(--msi-line); color: var(--msi-ink-soft);
  background: var(--msi-card); }
.tk-quick a:hover { border-color: var(--msi-brand); color: var(--msi-brand-deep); }
.tk-quick a.is-active { background: var(--msi-brand); border-color: var(--msi-brand); color: #fff; }

/* Suchfeld über Tabellen */
/* Suchfeld: type="search" wird vom Design-System nicht erfasst, deshalb hier
   vollstaendig ausformuliert – sonst bleibt ein blasses, randloses Kaestchen. */
.tk-suche { position: relative; max-width: 420px; }
.tk-suche i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--msi-ink-faint); pointer-events: none; transition: color .15s; }
.tk-suche input[type="search"],
.tk-suche input {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 46px; font-size: 15px; line-height: 1.4;
  padding: 10px 14px 10px 42px;
  border: 1px solid var(--msi-line); border-radius: 12px;
  background: var(--msi-card); color: var(--msi-ink);
  box-shadow: var(--msi-shadow);
}
.tk-suche input::placeholder { color: var(--msi-ink-faint); opacity: 1; }
.tk-suche input:hover { border-color: var(--msi-ink-faint); }
.tk-suche input:focus {
  outline: none; border-color: var(--msi-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--msi-brand) 18%, transparent);
}
.tk-suche input:focus + i, .tk-suche:focus-within i { color: var(--msi-brand-deep); }
/* Natives Loeschkreuz abschalten, sonst steht es doppelt neben unserem eigenen. */
.tk-suche input::-webkit-search-cancel-button,
.tk-suche input::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* Eigenes Loeschkreuz – erscheint, sobald etwas eingegeben wurde. */
.tk-suche__leeren { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent;
  color: var(--msi-ink-faint); cursor: pointer; display: none; place-items: center; font-size: 13px; }
.tk-suche__leeren:hover { background: var(--msi-surface); color: var(--msi-ink); }
.tk-suche.hat-text .tk-suche__leeren { display: grid; }
.tk-leer { padding: 16px; color: var(--msi-ink-faint); font-size: 13px; }

/* Navigationsgruppe „Auswertungen" */
.tk-nav-gruppe { position: relative; }
.tk-nav-gruppe > summary { list-style: none; cursor: pointer; color: #cdd7db; font-size: 13.5px;
  font-weight: 600; padding: 8px 11px; border-radius: 9px; white-space: nowrap; display: flex;
  align-items: center; gap: 6px; }
.tk-nav-gruppe > summary::-webkit-details-marker { display: none; }
.tk-nav-gruppe > summary:hover { color: #fff; background: rgba(255,255,255,.09); }
.tk-nav-gruppe[open] > summary { color: #fff; background: rgba(255,255,255,.14); }
.tk-nav-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 210px;
  background: var(--msi-card); border: 1px solid var(--msi-line); border-radius: 14px;
  box-shadow: var(--msi-shadow-hover); padding: 6px; display: flex; flex-direction: column; }
.tk-nav-menu a { color: var(--msi-ink) !important; font-size: 14px; padding: 10px 12px;
  border-radius: 9px; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.tk-nav-menu a:hover { background: var(--msi-surface); color: var(--msi-brand-deep) !important; }
.tk-nav-menu i { width: 18px; text-align: center; color: var(--msi-ink-faint); }

/* Jahresübersicht */
.tk-jahr td.tk-jahr__monat { font-weight: 700; }
.tk-jahr tr.tk-jahr__kommend td { opacity: .5; }

/* Auf schmalen Geräten weniger wichtige Spalten ausblenden */
@media (max-width: 700px) {
  .tk-col-opt { display: none !important; }
  .tk-kpis { grid-template-columns: 1fr 1fr; }
  .tk-clock__time { font-size: 38px; }
}

/* ---- Navigation auf Handy und Tablet ------------------------------------
   Das Design-System blendet die Kopfzeilen-Links unter 1200px aus; hier klappt
   stattdessen ein Menue auf. */
.tk-burger { display: none; width: 42px; height: 42px; flex: none; border: 0; border-radius: 11px;
  background: rgba(255,255,255,.09); color: #eaf0f2; cursor: pointer; place-items: center;
  font-size: 17px; position: relative; }
.tk-burger:hover { background: rgba(255,255,255,.18); }
.tk-burger__punkt { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--msi-warn); }

@media (max-width: 1200px) {
  .tk-burger { display: grid; }

  .msi-topbar .msi-topnav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 70;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--msi-navy); padding: 8px;
    border-top: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 14px 28px rgba(0,0,0,.4);
    max-height: calc(100vh - 60px); overflow-y: auto;
  }
  .msi-topbar .msi-topnav.is-offen { display: flex; }
  .msi-topbar .msi-topnav a,
  .msi-topbar .msi-topnav .msi-nav-logout { font-size: 15.5px; padding: 13px 14px; width: 100%; text-align: left; }
  .msi-topbar .msi-topnav form { display: block !important; width: 100%; }

  /* Untermenü „Auswertungen" klappt im Panel nach unten auf statt zu schweben */
  .msi-topbar .tk-nav-gruppe > summary { font-size: 15.5px; padding: 13px 14px; }
  .msi-topbar .tk-nav-menu { position: static; min-width: 0; box-shadow: none;
    background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); margin: 2px 0 6px; }
  .msi-topbar .tk-nav-menu a { color: #dbe4e8 !important; }
  .msi-topbar .tk-nav-menu a:hover { background: rgba(255,255,255,.1); color: #fff !important; }
  .msi-topbar .tk-nav-menu i { color: #93a2a9; }
}

/* ---- Tabellen als Karten auf dem Handy ----------------------------------
   Datensatz-Tabellen (eine Zeile = eine Person, ein Vertrag, ein Antrag) sind
   auf einem Telefon als Tabelle unlesbar: Entweder man scrollt seitlich, oder
   die Spalten werden so schmal, dass Kopfzeilen wie "URLAUB (5-TAGE-BASIS)"
   ueber vier Zeilen brechen. Deshalb wird aus jeder Zeile eine Karte mit
   Beschriftung links und Wert rechts.

   Voraussetzung in der Vorlage: `msi-table--karten` an der Tabelle und
   `data-label="…"` an jeder Zelle. Die erste Zelle bekommt `tk-karte__titel`
   und steht als Ueberschrift ueber der Karte. */
@media (max-width: 860px) {
  .msi-table--karten { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; }
  .msi-table--karten thead { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .msi-table--karten tbody tr { display: block; margin: 0 0 10px; padding: 12px 14px;
    background: var(--msi-card); border: 1px solid var(--msi-line);
    border-radius: var(--msi-radius); }
  .msi-table--karten tbody td { display: flex; align-items: baseline; gap: 14px;
    justify-content: space-between; padding: 5px 0; border: 0;
    text-align: right; font-size: 14px; white-space: normal; }
  .msi-table--karten tbody td::before { content: attr(data-label); flex: 0 1 auto;
    text-align: left; font-size: 12.5px; font-weight: 600; color: var(--msi-ink-faint);
    letter-spacing: .01em; }
  .msi-table--karten tbody td.tk-karte__titel { display: block; text-align: left;
    font-size: 16px; font-weight: 700; padding: 0 0 8px;
    border-bottom: 1px solid var(--msi-line); margin-bottom: 6px; }
  .msi-table--karten tbody td.tk-karte__titel::before { content: none; }
  /* Leere Zellen und reine Aktionsspalten brauchen keine eigene Zeile */
  .msi-table--karten tbody td.tk-karte__weg { display: none; }
  .msi-table--karten tbody td.tk-karte__aktionen { justify-content: flex-start;
    gap: 8px; padding-top: 10px; }
  .msi-table--karten tbody td.tk-karte__aktionen::before { content: none; }
  .msi-table--karten tfoot td { display: flex; justify-content: space-between; }
  .msi-table--karten tfoot td::before { content: attr(data-label); font-weight: 600;
    color: var(--msi-ink-faint); }
  /* Zeilenfarben (heute, Wochenende) wirken auf der ganzen Karte */
  .msi-table--karten tbody tr.tk-row-heute { border-color: var(--msi-brand);
    box-shadow: inset 3px 0 0 var(--msi-brand); }
  .tk-tablewrap:has(.msi-table--karten) { overflow: visible; border: 0;
    background: none; box-shadow: none; }
}

/* ---- Tabellen und Kopfzeilen auf schmalen Geraeten ---------------------- */
@media (max-width: 700px) {
  /* Lieber gut lesbar als vollstaendig: unwichtige Spalten weichen (tk-col-opt) */
  .msi-table { font-size: 13.5px; }
  .msi-table th, .msi-table td { padding: 9px 7px; }
  .msi-table th { font-size: 11px; letter-spacing: .03em; }
  .tk-col-pause { display: none; }

  .tk-iconbtn { padding: 5px 6px; font-size: 12px; }
  /* Aktionsspalte weicht dem Platz: auf dem Handy fuehrt das Datum zur Bearbeitung */
  .tk-col-aktion { display: none; }
  /* Wochentag entfaellt: Wochenenden und Feiertage sind ohnehin farblich abgesetzt */
  .tk-col-tag { display: none; }
  /* Statusmarken kompakter, damit die Spalten der Antragsliste passen */
  .msi-pill, .msi-chip { font-size: 11px; padding: 3px 8px; }

  /* Monatsblaetterung in einer Zeile statt dreizeilig */
  .tk-monthnav { font-size: 13px; padding: 8px 10px; gap: 6px; }
  .tk-monthnav a { white-space: nowrap; }
  .tk-monthnav__t { font-size: 15px; white-space: nowrap; }

  /* Aktionsknoepfe: volle Breite wirkt ruhiger als zerfledderte Reihen */
  .tk-head { gap: 10px; }
  .tk-actions .msi-btn { flex: 1 1 auto; justify-content: center; }
}

/* Datum in der Monatstabelle als Bearbeitungslink.
   Hoehere Spezifitaet noetig: msi.css faerbt Tabellenlinks sonst rot. */
.msi-table a.tk-tag-link { color: var(--msi-ink); font-weight: 600; text-decoration: none;
  border-bottom: 1px dotted var(--msi-ink-faint); }
.msi-table a.tk-tag-link:hover { color: var(--msi-brand-deep); border-bottom-color: var(--msi-brand); }

/* Sehr schmale Geraete: letzte Reserve, damit Ist/Soll/Saldo ohne Wischen sichtbar sind */
@media (max-width: 480px) {
  .tk-stepbtn { width: 40px; }
  .msi-table { font-size: 12.5px; }
  .msi-table th, .msi-table td { padding: 8px 5px; }
  .msi-table th { font-size: 10px; }
  /* Karten bleiben gross und lesbar, auch hier */
  .msi-table--karten { font-size: 14px; }
  .msi-table--karten tbody td { font-size: 14px; }
}

/* Nur auf schmalen Geraeten sichtbar (Ersatz fuer ausgeblendete Spalten) */
.tk-kurz { display: none; }        /* Kurzform der Spaltenkoepfe, nur am Handy */
.tk-lang { display: inline; }
.tk-nur-mobil { display: none; }
@media (max-width: 700px) { .tk-nur-mobil { display: block; } }

/* Text, der nur in der Kartenansicht Sinn ergibt ("Gültig ab 01.01.") – in der
   Tabelle steht er schon in der Spaltenueberschrift und wuerde nur Platz fressen. */
.tk-nur-karte { display: none; }
@media (max-width: 860px) { .tk-nur-karte { display: inline; } }

/* ---- Pausen je Wochentag ------------------------------------------------ */
.tk-pausen__setzen { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.tk-pausen__setzen .tk-field { max-width: 140px; }
.tk-pausen__tage { display: flex; gap: 8px; flex-wrap: wrap; }
.tk-daychip { display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 62px; padding: 9px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--msi-line); background: var(--msi-card); color: var(--msi-ink);
  font-family: inherit; transition: transform .12s, border-color .12s; }
.tk-daychip:hover { border-color: var(--msi-brand); transform: translateY(-1px); }
.tk-daychip__tag { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--msi-ink-soft); }
.tk-daychip__wert { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tk-daychip.ist-frei { opacity: .45; }
.tk-daychip.eben-gesetzt { border-color: var(--msi-brand); background: var(--msi-brand-soft); }
.tk-daychip.eben-gesetzt .tk-daychip__wert { color: var(--msi-brand-deep); }
/* Die echten Eingabefelder bleiben im Formular, sind aber nicht sichtbar. */
.tk-pausen__felder { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

/* Monatstabelle soll ohne seitliches Scrollen lesbar sein: die Zahlenspalten
   bleiben schmal und einzeilig, die Hinweisspalte nimmt den Rest und bricht um. */
.tk-zeiten { width: 100%; min-width: 0; table-layout: auto; }
.tk-zeiten th, .tk-zeiten td { white-space: nowrap; }
.tk-zeiten th.tk-col-opt, .tk-zeiten td.tk-col-opt { white-space: normal; width: 100%; }
.tk-zeiten td.tk-col-opt .tk-mini { white-space: normal; }

/* ---- News: Auswahl, Archiv ---------------------------------------------- */
.tk-newsbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--msi-card); border: 1px solid var(--msi-line); border-radius: var(--msi-radius);
  padding: 10px 14px; margin: 12px 0 4px; }
.tk-newscheck { display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
  font-weight: 600; color: var(--msi-ink-soft); cursor: pointer; margin: 0; }
.tk-newsitem { display: flex; gap: 12px; align-items: flex-start; }
.tk-newsitem__pick { padding-top: 2px; }
.tk-newsitem__body { flex: 1 1 auto; min-width: 0; }
@media (max-width: 700px) {
  .tk-newsbar .msi-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- Symbolknöpfe für Drucken und Speichern ----------------------------- */
.tk-aktion { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--msi-line); border-radius: 12px; background: var(--msi-card);
  color: var(--msi-ink); font-size: 17px; cursor: pointer; text-decoration: none;
  transition: border-color .12s, color .12s, transform .12s; }
.tk-aktion:hover { border-color: var(--msi-brand); color: var(--msi-brand-deep);
  transform: translateY(-1px); }
.tk-aktion:focus-visible { outline: 2px solid var(--msi-brand); outline-offset: 2px; }

/* Speichern mit Auswahl (PDF oder CSV) */
.tk-speichern { position: relative; }
.tk-speichern > summary { list-style: none; }
.tk-speichern > summary::-webkit-details-marker { display: none; }
.tk-speichern[open] > summary { border-color: var(--msi-brand); color: var(--msi-brand-deep); }
.tk-speichern__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 210px; padding: 6px; display: flex; flex-direction: column;
  background: var(--msi-card); border: 1px solid var(--msi-line);
  border-radius: 14px; box-shadow: var(--msi-shadow-hover); }
.tk-speichern__menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--msi-ink);
  text-decoration: none; white-space: nowrap; }
.tk-speichern__menu a:hover { background: var(--msi-surface); color: var(--msi-brand-deep); }
.tk-speichern__menu i { width: 18px; text-align: center; color: var(--msi-ink-faint); }
.tk-speichern__menu a:hover i { color: var(--msi-brand-deep); }

/* ---- Zwei-Faktor-Anmeldung ---------------------------------------------- */
.tk-leiselink { color: var(--msi-muted); text-decoration: none; }
.tk-leiselink:hover { color: var(--msi-text); text-decoration: underline; }
.tk-zfcheck input[type="checkbox"] { accent-color: var(--msi-brand); }
.tk-qr { display: inline-block; padding: 12px; border-radius: 14px; background: #fff;
  border: 1px solid var(--msi-line); }
.tk-qr svg { display: block; width: 200px; max-width: 100%; height: auto; }
.tk-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px;
  letter-spacing: .08em; word-break: break-all; background: var(--msi-surface);
  border: 1px solid var(--msi-line); border-radius: 10px; padding: 10px 12px; margin: 6px 0 0; }
.tk-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
  margin-top: 16px; }
.tk-codes__eintrag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px; font-weight: 700; letter-spacing: .08em; text-align: center;
  padding: 14px 10px; border-radius: 12px; background: var(--msi-card);
  border: 1px solid var(--msi-line); }

/* ---- Rechtevergabe Leitungskonto ---------------------------------------- */
.tk-recht { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px;
  border: 1px solid var(--msi-line); border-radius: 12px; margin-bottom: 8px;
  background: var(--msi-surface); cursor: pointer; }
.tk-recht:hover { border-color: var(--msi-brand); }
.tk-recht input[type="checkbox"] { margin-top: 3px; width: 17px; height: 17px;
  accent-color: var(--msi-brand); flex: none; }
.tk-recht--heikel { border-left: 3px solid var(--msi-warn, #d08700); }
.tk-rollenliste { display: grid; gap: 8px; }

/* ---- Wochensumme im Vertragsformular ------------------------------------ */
.tk-wochensumme { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px; border-radius: 12px;
  background: var(--msi-surface); border: 1px solid var(--msi-line); }
.tk-wochensumme__k { font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--msi-ink-faint); }
.tk-wochensumme__v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tk-wochensumme__s { font-size: 12.5px; color: var(--msi-ink-soft); }
.tk-wochensumme.is-leer { border-color: var(--msi-warn); }
.tk-wochensumme.is-leer .tk-wochensumme__v { color: var(--msi-warn); }

/* Auswahlkaestchen in Kartenlisten: schwebt oben rechts in der Karte */
@media (max-width: 860px) {
  .msi-table--karten tbody tr { position: relative; }
  .msi-table--karten tbody td.tk-karte__haken { position: absolute; top: 10px; right: 12px;
    padding: 0; display: block; }
  .msi-table--karten tbody td.tk-karte__haken::before { content: none; }
  .msi-table--karten tbody td.tk-karte__titel { padding-right: 34px; }
}

/* ---- Monatstabelle auf dem Handy ----------------------------------------
   Karten waeren hier falsch: 31 Tage ergaeben eine endlose Liste. Stattdessen
   bleibt es eine Tabelle, bekommt aber feste Spaltenbreiten (sonst frisst die
   Datumsspalte den Platz und die Zahlen kleben am rechten Rand), eine
   mitlaufende Kopfzeile und deutlichere Trennlinien. */
@media (max-width: 700px) {
  .tk-zeiten { table-layout: fixed; width: 100%; min-width: 0; font-size: 13.5px; }
  .tk-zeiten th, .tk-zeiten td { padding: 9px 4px; }
  .tk-zeiten th:nth-child(1), .tk-zeiten td:nth-child(1) { width: 13%; }     /* Datum  */
  .tk-zeiten th:nth-child(3), .tk-zeiten td:nth-child(3),
  .tk-zeiten th:nth-child(4), .tk-zeiten td:nth-child(4) { width: 12%; }    /* Von/Bis */
  .tk-zeiten th:nth-child(6), .tk-zeiten td:nth-child(6) { width: 12%; }    /* Ist    */
  /* Soll und +/- etwas breiter: In den Summenzeilen stehen dort zweistellige
     Stundenwerte wie „16:00", die sonst an die Nachbarspalte stossen. */
  .tk-zeiten th:nth-child(7), .tk-zeiten td:nth-child(7),
  .tk-zeiten th:nth-child(8), .tk-zeiten td:nth-child(8) { width: 13%; }    /* Soll/+- */
  /* Die Aktionsspalte braucht eine ECHTE Breite: bei table-layout:fixed
     schlaegt `td:nth-child(10)` jede Klassenregel, und mit width:0 wurden
     Stift, Muelleimer und Plus auf null Pixel gequetscht – sie waren da,
     aber unsichtbar. Genau das war hochkant der Fall. */
  .tk-zeiten th:nth-child(10), .tk-zeiten td:nth-child(10) { width: 25%; }  /* Aktionen */
  /* Zusammengeklappte Spalten brauchen die Breite ebenfalls ausdruecklich:
     Bei table-layout:fixed verteilt der Browser Restplatz sonst dorthin. */
  .tk-zeiten th:nth-child(2), .tk-zeiten td:nth-child(2),
  .tk-zeiten th:nth-child(5), .tk-zeiten td:nth-child(5),
  .tk-zeiten th:nth-child(9), .tk-zeiten td:nth-child(9) { width: 0; }
  .tk-zeiten thead th { position: sticky; top: 0; z-index: 3;
    background: var(--msi-surface-2); }
  /* Leere Zellen bekommen einen zarten Strich – sonst weiss man in einer
     leeren Zeile nicht mehr, unter welcher Spalte man ist. */
  .tk-zeiten tbody td:empty::after { content: '·'; color: var(--msi-ink-faint); opacity: .4; }
  .tk-zeiten tbody tr td { border-bottom: 1px solid var(--msi-line); }
  .tk-zeiten tr.tk-row-kw td { font-size: 11.5px; padding: 8px 6px; }
  .tk-zeiten tr.tk-row-kwsumme td { font-size: 13px; }

  /* Ausgeblendete Spalten muessen hier ZUSAMMENKLAPPEN statt zu verschwinden:
     Die Summenzeilen spannen mit colspan ueber fuenf Spalten. Faellt eine davon
     per display:none weg, rutscht der colspan in die Zahlenspalten und quetscht
     Soll und +/- auf einen Pixel. */
  .tk-zeiten .tk-col-tag, .tk-zeiten .tk-col-pause, .tk-zeiten .tk-col-opt {
    display: table-cell !important;
    width: 0; max-width: 0; padding: 0; border-left: 0; border-right: 0;
    font-size: 0; line-height: 0; overflow: hidden; white-space: nowrap;
  }
  .tk-zeiten .tk-col-tag *, .tk-zeiten .tk-col-pause *,
  .tk-zeiten .tk-col-opt * { display: none; }
}

/* ---- Buchhaltung -------------------------------------------------------- */
.tk-monatsleiste { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.tk-monatsknopf { padding: 8px 12px; border-radius: 10px; text-decoration: none;
  background: var(--msi-card); border: 1px solid var(--msi-line);
  color: var(--msi-ink-soft); font-weight: 650; font-size: 13px; }
.tk-monatsknopf:hover { border-color: var(--msi-brand); color: var(--msi-brand-deep); }
.tk-monatsknopf.is-jetzt { border-color: var(--msi-brand); color: var(--msi-brand-deep); }
.msi-table tr.tk-row-gruppe td { background: var(--msi-surface-2); font-weight: 750; }
.msi-table tr.tk-row-ergebnis td { font-size: 15px; }
.tk-buch__posten { padding-left: 22px !important; }
.tk-buch__feld { text-align: right; font-variant-numeric: tabular-nums; }
.tk-buch .tk-num { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .tk-buch__posten { padding-left: 0 !important; } }

/* Die Buchhaltungstabelle hat 14 Spalten – hier zaehlt jeder Pixel. */
.tk-buch { table-layout: fixed; width: 100%; }
.tk-buch th:first-child, .tk-buch td:first-child { width: 17%; }
.tk-buch th:last-child, .tk-buch td:last-child { width: 9%; }
.tk-buch th, .tk-buch td { padding: 6px 6px; font-size: 12.5px; }
/* Feine Trennlinie, damit die Monatsspalten optisch auseinanderfallen */
.tk-buch td + td, .tk-buch th + th { border-left: 1px solid var(--msi-line); }
.tk-buch th { font-size: 10px; }
@media (max-width: 1100px) { .tk-buch th, .tk-buch td { font-size: 11.5px; padding: 6px 3px; } }

/* ---- Pause am Timer und Schnellerfassung -------------------------------- */
.tk-clock__pause { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.tk-clock__pause label { font-size: 13px; opacity: .85; }
.tk-clock__pause input { width: 90px; text-align: center; min-height: 42px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12); color: #fff; font-size: 16px; font-weight: 700; }
.tk-clock__pause span { font-size: 13px; opacity: .75; }
.tk-clock__hint { font-size: 12px; opacity: .7; margin: 6px 0 0; }

.tk-schnell { margin-top: 12px; background: var(--msi-card); border: 1px solid var(--msi-line);
  border-radius: var(--msi-radius); padding: 12px 14px; }
/* Aufklappbar, startet aber offen (`open` in der Vorlage). */
.tk-schnell__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  cursor: pointer; list-style: none; }
.tk-schnell__kopf::-webkit-details-marker { display: none; }
.tk-schnell__pfeil { margin-left: auto; color: var(--msi-ink-faint); font-size: 12px;
  align-self: center; transition: transform .15s; }
.tk-schnell:not([open]) .tk-schnell__pfeil { transform: rotate(180deg); }
.tk-schnell__titel { font-size: 15px; font-weight: 750; color: var(--msi-ink); }
.tk-schnell__titel i { color: var(--msi-brand); margin-right: 7px; }
.tk-schnell__wann { color: var(--msi-ink-soft); font-weight: 600; font-size: 13px; }
.tk-schnell__schon { color: var(--msi-ink-faint); font-size: 12.5px; font-weight: 500; }
.tk-schnell__felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px; margin-top: 12px; }

/* ---- Dienstplan (Wochenraster) ------------------------------------------ */
.tk-tagleiste { display: flex; gap: 6px; flex-wrap: wrap; }
.tk-tagknopf { padding: 9px 16px; border-radius: 10px; text-decoration: none; font-weight: 700;
  background: var(--msi-card); border: 1px solid var(--msi-line); color: var(--msi-ink-soft); }
.tk-tagknopf:hover { border-color: var(--msi-brand); color: var(--msi-brand-deep); }
.tk-tagknopf.is-aktiv { background: var(--msi-brand); border-color: var(--msi-brand); color: #fff; }
.tk-tagknopf.is-heute:not(.is-aktiv) { border-color: var(--msi-brand); }

.tk-plan { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tk-plan th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--msi-ink-faint); padding: 8px 4px; text-align: center;
  border-bottom: 1px solid var(--msi-line); }
.tk-plan th.tk-plan__zeit, .tk-plan td.tk-plan__zeit { width: 52px; text-align: right;
  padding-right: 8px; font-size: 11px; color: var(--msi-ink-faint);
  font-variant-numeric: tabular-nums; }
.tk-plan td { height: 22px; border-top: 1px solid transparent; padding: 0; }
.tk-plan tr.tk-plan__voll td { border-top: 1px solid var(--msi-line); }
.tk-plan__leer { position: relative; }
.tk-plan__plus { position: absolute; inset: 0; display: grid; place-items: center;
  color: transparent; text-decoration: none; font-weight: 700; }
.tk-plan__leer:hover .tk-plan__plus { color: var(--msi-brand); background: var(--msi-surface); }
.tk-plan__block { position: relative; vertical-align: top; border-radius: 8px;
  padding: 5px 8px !important; font-size: 11.5px; line-height: 1.35;
  /* Lange Woerter wie „Trainingsraum" ragten sonst aus dem Block heraus –
     das Raster hat feste Spaltenbreiten, da hilft nur umbrechen lassen. */
  overflow: hidden; }
.tk-plan__block span { display: block; overflow-wrap: anywhere; word-break: break-word;
  hyphens: auto; }
/* Bei vielen Spalten sind die Bloecke schmal: Die Zeitspanne darf am Bindestrich
   umbrechen („08:00–" / „12:00"), sonst wird sie abgeschnitten. */
.tk-plan__zeitspanne { font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: normal; overflow-wrap: anywhere; }
.tk-plan__art { color: var(--msi-ink-soft); }
.tk-plan__bem { color: var(--msi-ink-faint); font-size: 11px; }
/* Jede Art hat ihre eigene Farbe – wer auf den Plan schaut, sieht auf einen
   Blick, wer am Patienten ist und wer im Buero sitzt. Wem die Schicht gehoert,
   steht ohnehin ueber der Spalte (farbiger Strich unter dem Namen). */
.tk-plan__block--arbeit      { --art: #2f9257; --art-bg: #2f925722; }   /* gruen  */
.tk-plan__block--trainingsraum { --art: #cc4f9e; --art-bg: #cc4f9e22; } /* magenta*/
.tk-plan__block--buero       { --art: #3b7dd8; --art-bg: #3b7dd822; }   /* blau   */
.tk-plan__block--hausbesuch  { --art: #8a5cd6; --art-bg: #8a5cd622; }   /* violett*/
.tk-plan__block--home_office { --art: #0f9aa8; --art-bg: #0f9aa822; }   /* tuerkis*/
.tk-plan__block--pause       { --art: #94a3ab; --art-bg: #94a3ab1c; }   /* grau   */
.tk-plan__block { background: var(--art-bg); border-left: 3px solid var(--art); }
.tk-plan__block--pause { border-left-style: dashed; }
.tk-plan__block .tk-plan__art { color: var(--art); font-weight: 600; }

.tk-plan__stift { position: absolute; top: 3px; right: 4px; color: var(--msi-ink-faint);
  opacity: 0; font-size: 11px; }
.tk-plan__block:hover .tk-plan__stift { opacity: 1; }
@media (max-width: 860px) {
  .tk-plan { font-size: 10.5px; }
  .tk-plan th { font-size: 9.5px; }
  .tk-plan__block { font-size: 10px; padding: 4px 5px !important; }
}
.tk-plan__kopf { display: inline-block; padding-bottom: 3px; color: var(--msi-ink); font-size: 12px; }
.tk-plan__schieber { display: flex; gap: 2px; justify-content: center; margin-top: 3px; }
.tk-plan__schieber form { display: inline; }
.tk-plan__schieber button { background: none; border: 0; cursor: pointer; padding: 0 3px;
  color: var(--msi-ink-faint); font-size: 10px; line-height: 1; }
.tk-plan__schieber button:hover:not(:disabled) { color: var(--msi-brand); }
.tk-plan__schieber button:disabled { opacity: .22; cursor: default; }

/* ---- Raumbelegung im Dienstplan ----------------------------------------- */
.tk-plan th.tk-plan__belegung, .tk-plan td.tk-plan__belegung { width: 34px; text-align: center; }
.tk-belegt { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 11px;
  color: var(--msi-ink-faint); }
td.tk-belegt { border-left: 1px solid var(--msi-line); }
.tk-belegt--frei  { color: var(--msi-ink-soft); }
/* Ein Raum noch frei = gruen: es passt noch jemand rein. */
.tk-belegt--knapp { background: #2f925722; color: #216b40; }
.tk-belegt--voll  { background: #ef8a3c28; color: #b35b12; }
.tk-belegt--ueber { background: #e0555528; color: #b32d2d; box-shadow: inset 2px 0 0 #e05555; }
span.tk-belegt { display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 6px; margin: 0 2px 0 8px; }
.tk-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px;
  margin-top: 12px; font-size: 12px; color: var(--msi-ink-faint); }
.tk-legende__spitze { margin-left: auto; color: var(--msi-ink-soft); }
@media (max-width: 860px) { .tk-legende__spitze { margin-left: 0; width: 100%; } }

/* Fuenf Reiter (Admin mit Buchhaltung) muessen auf schmale Handys passen. */
.msi-tabbar .msi-tab { min-width: 0; flex: 1; }
.msi-tabbar .msi-tab span:last-child, .msi-tabbar .msi-tab { overflow: hidden; }
@media (max-width: 400px) { .msi-tab { font-size: 10px; } .msi-tab i { font-size: 17px; } }

/* Zeitfelder zum Durchtippen – gleiche Optik wie die uebrigen Eingaben. */
.tk-zeitfeld { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Im dunklen Modus sind die dunklen Schriftfarben oben nicht lesbar.
   Gleicher Aufbau wie in msi.css: explizite Wahl und Systemvorgabe getrennt. */
:root[data-theme="dark"] .tk-belegt--knapp { background: #2f925733; color: #6ede9c; }
:root[data-theme="dark"] .tk-belegt--voll  { background: #ef8a3c33; color: #ffb377; }
:root[data-theme="dark"] .tk-belegt--ueber { background: #e0555533; color: #ff9b9b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tk-belegt--knapp { background: #2f925733; color: #6ede9c; }
  :root:not([data-theme="light"]) .tk-belegt--voll  { background: #ef8a3c33; color: #ffb377; }
  :root:not([data-theme="light"]) .tk-belegt--ueber { background: #e0555533; color: #ff9b9b; }
}

/* ---- Wochenumschalter A/B ------------------------------------------------ */
.tk-planleiste { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between; }
.tk-wochenwahl { display: flex; gap: 6px; }
.tk-wochenmarke { display: inline-block; margin-left: 10px; font-size: 12px;
  font-weight: 600; color: var(--msi-ink-faint); vertical-align: middle; }
.tk-plan__takt { color: var(--msi-brand-deep); font-size: 10.5px; font-weight: 700; }

/* Artfarben im dunklen Modus aufhellen – sonst verschwinden sie im Hintergrund. */
:root[data-theme="dark"] .tk-plan__block--arbeit      { --art: #6ede9c; --art-bg: #2f925733; }
:root[data-theme="dark"] .tk-plan__block--trainingsraum { --art: #f79ad0; --art-bg: #cc4f9e33; }
:root[data-theme="dark"] .tk-plan__block--buero       { --art: #86b6ff; --art-bg: #3b7dd833; }
:root[data-theme="dark"] .tk-plan__block--hausbesuch  { --art: #c0a2ff; --art-bg: #8a5cd633; }
:root[data-theme="dark"] .tk-plan__block--home_office { --art: #5fd7e2; --art-bg: #0f9aa833; }
:root[data-theme="dark"] .tk-plan__block--pause       { --art: #9fb0b8; --art-bg: #94a3ab24; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tk-plan__block--arbeit      { --art: #6ede9c; --art-bg: #2f925733; }
  :root:not([data-theme="light"]) .tk-plan__block--trainingsraum { --art: #f79ad0; --art-bg: #cc4f9e33; }
  :root:not([data-theme="light"]) .tk-plan__block--buero       { --art: #86b6ff; --art-bg: #3b7dd833; }
  :root:not([data-theme="light"]) .tk-plan__block--hausbesuch  { --art: #c0a2ff; --art-bg: #8a5cd633; }
  :root:not([data-theme="light"]) .tk-plan__block--home_office { --art: #5fd7e2; --art-bg: #0f9aa833; }
  :root:not([data-theme="light"]) .tk-plan__block--pause       { --art: #9fb0b8; --art-bg: #94a3ab24; }
}

/* ---- Mehrfachauswahl der Wochentage ------------------------------------- */
.tk-tagewahl__titel { display: block; font-size: 12.5px; font-weight: 600;
  color: var(--msi-ink-soft); margin-bottom: 6px; }
.tk-tagewahl__reihe { display: flex; flex-wrap: wrap; gap: 7px; }
.tk-tagchip { position: relative; margin: 0; cursor: pointer; }
.tk-tagchip input { position: absolute; opacity: 0; width: 0; height: 0; }
.tk-tagchip span { display: grid; place-items: center; min-width: 48px; padding: 10px 6px;
  border: 1px solid var(--msi-line); border-radius: 10px; background: var(--msi-card);
  font-weight: 700; font-size: 13.5px; color: var(--msi-ink-soft); user-select: none; }
.tk-tagchip:hover span { border-color: var(--msi-brand); color: var(--msi-brand-deep); }
.tk-tagchip input:checked + span { background: var(--msi-brand); border-color: var(--msi-brand);
  color: #fff; }
.tk-tagchip input:focus-visible + span { outline: 3px solid
  color-mix(in srgb, var(--msi-brand) 45%, transparent); outline-offset: 2px; }
.tk-feldfehler { color: var(--msi-bad); font-size: 12.5px; margin: 6px 0 0; }
/* ---- „Wo ist noch Platz?" ------------------------------------------------ */
.tk-fenstersuche { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 16px; padding: 12px 14px; background: var(--msi-card);
  border: 1px solid var(--msi-line); border-radius: var(--msi-radius); font-size: 13.5px; }
.tk-fenstersuche input { width: 70px; text-align: center; min-height: 40px;
  font-weight: 700; font-variant-numeric: tabular-nums; }
.tk-fenster { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.tk-fenster__karte { position: relative; flex: 1 1 200px; padding: 12px 14px;
  border: 1px solid var(--msi-line); border-radius: var(--msi-radius);
  background: var(--msi-card); display: flex; flex-direction: column; gap: 2px; }
.tk-fenster__karte.is-beste { border-color: var(--msi-brand);
  box-shadow: inset 3px 0 0 var(--msi-brand); }
.tk-fenster__karte b { font-size: 15px; }
.tk-fenster__marke { position: absolute; top: 10px; right: 12px; font-size: 10.5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--msi-brand); }

/* ---- Summenzeile unter dem Dienstplan ------------------------------------ */
.tk-plan__fuss td { border-top: 2px solid var(--msi-line); padding: 8px 6px 4px;
  vertical-align: top; height: auto; }
.tk-plan__summe { text-align: center; font-size: 11px; line-height: 1.45; }
.tk-plan__summe b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tk-plan__summe span { display: block; color: var(--msi-ink-faint); }
.tk-plan__fusspause { font-style: italic; }

/* Leere Schlusszeile: beschriftet das Tagesende und haelt Abstand zur Summe. */
.tk-plan__ende td { height: 34px; border-top: 1px solid var(--msi-line); }
.tk-plan__ende .tk-plan__zeit { vertical-align: top; padding-top: 3px; }
.tk-plan__fuss td { padding-top: 12px; }

a.tk-plan__kopf { text-decoration: none; }
a.tk-plan__kopf:hover { color: var(--msi-brand-deep); }

/* ---- Aktionen in der Monats-/Jahrestabelle auch hochkant erreichbar ------ */
@media (max-width: 700px) {
  /* Bearbeiten, Loeschen und Nachtragen sind der Zweck der Tabelle – sie duerfen
     nicht erst beim Drehen des Handys auftauchen. Platz kommt von den ohnehin
     ausgeblendeten Spalten (Tag, Pause, Hinweis). */
  .tk-col-aktion { display: table-cell !important; }
  .tk-zeiten td.tk-col-aktion, .msi-table td.tk-col-aktion {
    padding: 5px 2px !important; white-space: normal !important; text-align: right;
  }
  .tk-col-aktion form { display: inline; }
  /* Alle drei Knoepfe muessen nebeneinander in die Spalte passen, sonst
     brechen sie um und blaehen jede Zeile auf. */
  .tk-col-aktion .tk-iconbtn { display: inline-flex; align-items: center;
    justify-content: center; height: 27px; margin: 0 1px; font-size: 11px;
    border-radius: 7px; }
  /* Nur in der Monatstabelle sind es reine Symbolknoepfe – dort zaehlt jeder
     Pixel. In der Jahrestabelle steht Text im Knopf („Monat"), der nicht
     abgeschnitten werden darf. */
  .tk-zeiten .tk-col-aktion .tk-iconbtn { min-width: 23px; width: 23px;
    padding: 0 !important; }
  .msi-table:not(.tk-zeiten) .tk-col-aktion .tk-iconbtn { padding: 4px 8px; }
  /* Zwischen inline-Elementen steht Leerraum aus dem Quelltext – bei drei
     Knoepfen reichte das, um den letzten in die naechste Zeile zu schieben. */
  .tk-zeiten td.tk-col-aktion { font-size: 0; }

  /* Kurze Spaltenkoepfe: „Beginn"/„Ende" liefen bei 13 % Breite ineinander. */
  .tk-kurz { display: inline; }
  .tk-lang { display: none; }
  .tk-zeiten thead th { font-size: 9.5px; letter-spacing: .02em; }
  .tk-zeiten { font-size: 12px; }
  .tk-zeiten th, .tk-zeiten td { padding: 9px 2px; }
  /* Die Summenzeilen tragen die groessten Zahlen („16:00") – sie brauchen die
     kleinste Schrift, sonst stossen Soll und +/- aneinander. */
  .tk-zeiten tr.tk-row-kwsumme td, .tk-zeiten tfoot td { font-size: 11.5px !important; }
}

.tk-wochenplan { margin-top: 10px; }
.tk-wochenplan tfoot td { font-weight: 750; border-top: 2px solid var(--msi-line); }

/* Zeigt an, in welchem Rahmen die Vorschlaege gesucht werden. */
.tk-suchrahmen { flex-basis: 100%; color: var(--msi-ink-faint); font-size: 12px; }
.tk-suchrahmen a { color: var(--msi-brand-deep); }

/* Personenauswahl: gleiche Kacheln wie bei den Wochentagen, nur breiter. */
.tk-tagchip--breit span { min-width: 0; padding-left: 14px; padding-right: 14px; }


/* ---- Dienstplan am Handy ------------------------------------------------ */
/* Elf Personen passen nicht lesbar in 375 px: Jede Spalte bekam gut 20 px,
   Namen liefen ineinander, Zeiten brachen Zeichen fuer Zeichen um. Deshalb
   bekommt jede Person am Handy eine feste, lesbare Breite, der Plan wird
   seitlich gewischt – Uhrzeit und Raeume bleiben dabei links stehen. */
@media (max-width: 860px) {
  .tk-planwrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--msi-radius); }
  .tk-plan.tk-plan--viele { width: max-content; min-width: 100%; }
  .tk-plan--viele th:not(.tk-plan__zeit):not(.tk-plan__belegung),
  .tk-plan--viele td.tk-plan__block, .tk-plan--viele td.tk-plan__leer,
  .tk-plan--viele td.tk-plan__summe { width: 86px; min-width: 86px; max-width: 86px; }

  /* Uhrzeit und Raeume kleben links, damit man beim Wischen die Zeile behaelt. */
  .tk-plan--viele .tk-plan__zeit { position: sticky; left: 0; z-index: 4;
    width: 44px; min-width: 44px; background: var(--msi-card); }
  .tk-plan--viele .tk-plan__belegung { position: sticky; left: 44px; z-index: 4;
    width: 30px; min-width: 30px; background: var(--msi-card);
    box-shadow: 2px 0 0 var(--msi-line); }
  .tk-plan--viele .tk-plan__belegung.tk-belegt--knapp,
  .tk-plan--viele .tk-plan__belegung.tk-belegt--voll,
  .tk-plan--viele .tk-plan__belegung.tk-belegt--ueber { background-clip: padding-box; }

  /* Namen: eine Zeile, notfalls mit Auslassungspunkten statt ineinander */
  .tk-plan--viele .tk-plan__kopf { display: block; max-width: 78px; margin: 0 auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
  .tk-plan--viele .tk-plan__schieber button { padding: 2px 6px; font-size: 11px; }

  /* Zeiten nicht mehr zeichenweise umbrechen – bei 86 px passt „08:00–12:30". */
  .tk-plan--viele .tk-plan__zeitspanne { white-space: nowrap; overflow-wrap: normal;
    font-size: 11px; }
  .tk-plan--viele .tk-plan__block span { overflow-wrap: normal; word-break: normal; }
  .tk-plan--viele .tk-plan__block { font-size: 10.5px; padding: 4px 6px !important; }

  .tk-plan__wischhinweis { margin: 6px 0 4px; color: var(--msi-ink-faint); }
}

/* ---- AU-Bescheinigung: Ansicht und Ausdruck ----------------------------- */
.tk-aublatt { margin-top: 14px; background: var(--msi-card); border: 1px solid var(--msi-line);
  border-radius: var(--msi-radius); padding: 12px; text-align: center; }
.tk-aublatt img { max-width: 100%; height: auto; border-radius: 8px; }
@media print {
  /* Auf Papier zaehlt nur die Bescheinigung – Rahmen und Schatten weg, und das
     Bild soll eine Seite fuellen, ohne ueber den Rand zu laufen. */
  .tk-aublatt { border: 0; padding: 0; background: none; }
  .tk-aublatt img { max-height: 92vh; object-fit: contain; }
}