/* ============ Der Team-Kalender (js/41-teamkalender.js) ============
   Er nimmt Monatsblatt und Tagblatt des Terminkalenders (.cal-blatt, .cal-tag,
   .tagblatt) mit und fügt nur hinzu: den Knopf zum Wechseln, die Marken für
   Urlaub und Abwesenheit und die Zeilen im Tagblatt. Farben nur über var(--…). */

/* Der Knopf oben: eine schmale Zeile über dem Blatt, in beide Richtungen derselbe. */
.kal-wechsel{
  display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin:0 0 10px;padding:0 14px;
  border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:inherit;font-size:13.5px;font-weight:600;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform .06s var(--ease);
}
.kal-wechsel:active{transform:scale(.985);}
.kal-wechsel .kw-z{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:10px;
  background:var(--accent-soft);color:var(--accent-deep);}
.kal-wechsel .kw-z svg{width:18px;height:18px;}
.kal-wechsel .kw-w{flex:1;min-width:0;overflow-wrap:anywhere;}
.kal-wechsel .kw-pfeil{display:flex;flex:none;color:var(--ink-soft);}
.kal-wechsel .kw-pfeil svg{width:16px;height:16px;}
@media (hover:hover) and (pointer:fine){
  .kal-wechsel:hover{border-color:var(--accent);}
}

/* Wo man ist: ein leises Wort über dem Monat. */
.tk-art{display:inline-flex;align-items:center;gap:5px;margin-bottom:2px;
  font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--accent-deep);}
.tk-art svg{width:13px;height:13px;flex:none;}

/* Urlaub und Abwesenheit: durchgezogene Streifen über den Tagen statt Zeichen in
   jedem Feld. Sie liegen in derselben Zeile des Rasters wie die Tage, unten im
   Feld (jede Bahn eine Stufe höher), und lassen Tipps durch. Die Felder halten
   unten Platz für drei Bahnen frei. */
.tk-blatt .cal-tag, .tk-blatt .cal-tag.pad{min-height:46px;padding-bottom:17px;}
.tk-balken{align-self:end;height:4px;margin-bottom:calc(4px + var(--bahn, 0) * 6px);z-index:2;pointer-events:none;
  background:var(--ok);}
.tk-balken.a{background:var(--wait);}
.tk-balken.start{margin-left:6px;border-top-left-radius:4px;border-bottom-left-radius:4px;}
.tk-balken.ende{margin-right:6px;border-top-right-radius:4px;border-bottom-right-radius:4px;}
.cal-legende .lg-balken{display:block;width:16px;height:4px;border-radius:4px;background:var(--ok);}
.cal-legende .lg-balken.a{background:var(--wait);}
@media (max-width:400px){
  .tk-blatt .cal-tag, .tk-blatt .cal-tag.pad{min-height:44px;padding-bottom:16px;}
  .tk-balken.start{margin-left:4px;}
  .tk-balken.ende{margin-right:4px;}
}

/* Das Tagblatt: Zeilen wie die Geburtstage im Terminkalender. */
.tk-tasten{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;}
.tk-teil .tb-label{display:flex;align-items:center;gap:6px;}
.tk-lz{display:flex;flex:none;color:var(--accent-deep);}
.tk-lz svg{width:14px;height:14px;}
.tk-liste{display:grid;gap:7px;}
.tk-liste .gb-kachel{margin:0;}
.tk-zeile{display:flex;align-items:center;gap:11px;min-height:52px;padding:8px 10px 8px 12px;
  border-radius:14px;background:var(--surface);border:1px solid var(--line);}
.tk-z{display:grid;place-items:center;flex:none;width:32px;height:32px;color:var(--accent-deep);}
.tk-z svg{width:20px;height:20px;}
.tk-t{flex:1;min-width:0;display:grid;gap:1px;}
.tk-t b{font-size:14px;font-weight:600;color:var(--ink);overflow-wrap:anywhere;}
.tk-t span{font-size:12.5px;line-height:1.35;color:var(--ink-soft);overflow-wrap:anywhere;}
.tk-zeile .weg-kreuz{flex:none;}

/* Der Bogen zum Eintragen. [hidden] muss gegen display:flex/grid der Chips und Karten gewinnen. */
.tk-dialog [hidden]{display:none !important;}
.tk-dialog .sg-chips{margin-bottom:0;}