/* ============================================================
   Abwesenheiten (source/templates/vacations.html)
   Tokens identisch zu 01-tokens.css. Alles hier ist unter
   .vacations-page verschachtelt, damit nichts auf andere Seiten
   ausstrahlt (z. B. .btn wuerde sonst auch den Login-Button treffen,
   der schon .btn/.btn-primary/.btn-block nutzt).

   .block/.block-head/.block-note-inline heissen bewusst nicht
   .panel*: [class*="panel"] in 03-layout-und-komponenten.css erzwingt
   sonst weiss/Rahmen/radius:0 per !important, und die echte .panel-
   Klasse dort erzwingt zusaetzlich padding:clamp(22px,3vw,34px) und
   overflow-x:auto - beides muesste man sonst wieder aufwendig
   zurueckdrehen. Umbenennen umgeht beide Regeln auf einmal.

   .btn:hover ist in 03-layout mit !important auf allen drei
   Eigenschaften belegt (background/border-color/color) - das schlaegt
   jede Spezifitaet. .btn-ghost:hover bleibt deshalb bewusst beim
   globalen Verhalten (taupe Flaeche/weisse Schrift statt weiss mit
   taupe Rand), siehe Projektnotiz vom 2026-07-31.
   ============================================================ */

:root {
  --a-vacation: #867c72;
  --a-sick: #9a4f45;
  --a-special: #7d6a3a;
  --a-training: #4f6b52;
}

.vacations-page {
  --touch: 44px;
}
/* .trow{display:grid} hat dieselbe Spezifitaet wie die native
   [hidden]-Regel der UA-Stylesheet und wuerde sie sonst je nach
   Ladereihenfolge aushebeln -- die Client-Filterung setzt hidden auf
   .trow, das muss unbedingt greifen. */
.vacations-page [hidden] {
  display: none !important;
}

.vacations-page .page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  margin-bottom: var(--s5);
  flex-wrap: wrap;
}
.vacations-page .page-head p {
  margin: 6px 0 0;
  font-size: 0.95rem;
}
.vacations-page .head-right {
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.vacations-page .year-nav {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
}
.vacations-page .yn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 42px;
  border: 0;
  background: #fff;
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--muted);
  line-height: 1;
  text-decoration: none;
}
.vacations-page .yn-arrow:hover {
  background: var(--taupe-wash);
  color: var(--taupe-dark);
}
.vacations-page .yn-label {
  font-family: var(--f-ui);
  font-weight: normal;
  min-width: 58px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Buttons (nur innerhalb dieser Seite) ---------- */
.vacations-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-ui);
  font-size: 0.94rem;
  line-height: 1;
  padding: 11px 18px;
  min-height: var(--touch);
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* .btn-ghost/.icon-btn/.ch sind <span role="button">, kein <button> (siehe
   Kommentar bei .blk) - der native Fokusring greift dort nicht, deshalb
   hier nachgebaut wie beim globalen button:focus-visible in 01-tokens.css. */
.vacations-page .btn:focus-visible,
.vacations-page .icon-btn:focus-visible,
.vacations-page .ch:focus-visible {
  outline: 2px solid var(--taupe);
  outline-offset: 2px;
}
.vacations-page .btn-primary {
  background: var(--taupe-dark);
  color: #fff;
}
.vacations-page .btn-primary:hover {
  background: var(--taupe-hover);
}
.vacations-page .btn-ghost {
  background: #fff;
  color: var(--text);
  border-color: var(--border-strong);
}
.vacations-page .btn-ghost:hover {
  border-color: var(--taupe);
  color: var(--taupe-dark);
}
.vacations-page .btn-sm {
  padding: 7px 13px;
  min-height: 36px;
  font-size: 0.88rem;
}
.vacations-page .icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  user-select: none;
}
.vacations-page .icon-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

/* ============ Freigaben ============
   Sitzt vor allem anderen und traegt als einziges Element auf der
   Seite eine kraeftige Umrandung. Ist die Liste leer, verschwindet
   der Block ganz, statt eine leere Flaeche zu hinterlassen. */
.vacations-page .approve {
  border: 2px solid var(--text);
  margin-bottom: var(--s5);
}
.vacations-page .approve-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--border);
}
.vacations-page .count {
  font-family: var(--f-bold);
  font-size: 0.8rem;
  background: var(--text);
  color: #fff;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.vacations-page .ap {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(200px, 1.4fr) 70px 1fr auto;
  gap: var(--s4);
  align-items: center;
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--border);
}
.vacations-page .ap:last-child {
  border-bottom: 0;
}
.vacations-page .ap-name {
  font-family: var(--f-ui);
}
.vacations-page .ap-art {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
}
.vacations-page .ap-zeit {
  font-variant-numeric: tabular-nums;
}
.vacations-page .ap-tage {
  text-align: right;
  font-family: var(--f-bold);
  font-variant-numeric: tabular-nums;
}
.vacations-page .ap-notiz {
  font-size: 0.88rem;
  color: var(--muted);
}
.vacations-page .ap-rest {
  font-size: 0.82rem;
  color: var(--muted);
  display: block;
}
.vacations-page .ap-rest strong {
  font-family: var(--f-ui);
  font-weight: normal;
  color: var(--text);
}
.vacations-page .ap-akt {
  display: flex;
  gap: var(--s2);
}

/* ============ Block-Container (Urlaubskonto, Jahresband, Eintraege) === */
.vacations-page .block {
  border: 1px solid var(--border);
  margin-bottom: var(--s5);
  background: #fff;
}
.vacations-page .block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.vacations-page .block-note-inline {
  font-size: 0.84rem;
  color: var(--muted);
}

/* ---------- Urlaubskonto: eigene Sicht ---------- */
.vacations-page .konto-self {
  display: flex;
  align-items: center;
  gap: var(--s7);
  padding: var(--s5);
  flex-wrap: wrap;
}
.vacations-page .ks-main {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}
.vacations-page .ks-num {
  font-family: var(--f-head);
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.vacations-page .ks-num.is-low {
  color: var(--neg);
}
.vacations-page .ks-unit {
  font-size: 1rem;
  color: var(--muted);
}
.vacations-page .ks-rest {
  font-family: var(--f-ui);
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}
.vacations-page .ks-side {
  flex: 1;
  min-width: 260px;
}
.vacations-page .ks-bar {
  height: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  display: flex;
  overflow: hidden;
}
.vacations-page .ks-bar i {
  display: block;
  height: 100%;
}
.vacations-page .ks-used {
  background: var(--taupe);
}
.vacations-page .ks-req {
  background: repeating-linear-gradient(45deg, var(--taupe-light), var(--taupe-light) 3px, #fff 3px, #fff 6px);
}
.vacations-page .ks-legend {
  display: flex;
  gap: var(--s5);
  margin-top: 10px;
  font-size: 0.84rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.vacations-page .ks-legend b {
  font-family: var(--f-ui);
  font-weight: normal;
  color: var(--text);
}

/* ---------- Urlaubskonto: Leitungssicht ---------- */
.vacations-page .konto-all {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.vacations-page .ka {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.vacations-page .ka-name {
  flex: 1;
  min-width: 0;
  font-size: 0.93rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vacations-page .ka-bar {
  flex: 0 0 92px;
  height: 7px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  display: flex;
  overflow: hidden;
}
.vacations-page .ka-bar i {
  display: block;
  height: 100%;
}
.vacations-page .ka-num {
  flex: 0 0 62px;
  text-align: right;
  font-family: var(--f-bold);
  font-variant-numeric: tabular-nums;
}
.vacations-page .ka-num em {
  font-family: var(--f-body);
  font-style: normal;
  font-size: 0.78rem;
  color: var(--muted);
  margin-left: 3px;
}
.vacations-page .ka.is-low .ka-num {
  color: var(--neg);
}

/* ============ Jahresband ============ */
.vacations-page .legend {
  display: flex;
  gap: var(--s4);
  font-size: 0.82rem;
  color: var(--muted);
  flex-wrap: wrap;
}
.vacations-page .legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.vacations-page .legend span:hover {
  color: var(--text);
}
.vacations-page .legend span:focus-visible {
  outline: 2px solid var(--taupe);
  outline-offset: 2px;
}
.vacations-page .legend span.is-active {
  color: var(--text);
  font-weight: 800;
}
.vacations-page .sw {
  width: 12px;
  height: 12px;
  display: inline-block;
}
.vacations-page .sw-vacation {
  background: var(--a-vacation);
}
.vacations-page .sw-sick {
  background: var(--a-sick);
}
.vacations-page .sw-special {
  background: var(--a-special);
}
.vacations-page .sw-training {
  background: var(--a-training);
}
.vacations-page .sw-pending {
  background: repeating-linear-gradient(45deg, var(--taupe-light), var(--taupe-light) 3px, #fff 3px, #fff 6px);
  border: 1px solid var(--border-strong);
}

.vacations-page .band-wrap {
  overflow-x: auto;
  /* overflow-y muss explizit hidden sein, nicht nur weglassen: nach der
     CSS-Overflow-Spezifikation wird ein "visible" auf einer Achse zu
     "auto", sobald die andere Achse etwas anderes als "visible" ist -
     ohne dieses hidden waere hier immer ein (meist unnoetiger) vertikaler
     Scrollbalken moeglich. */
  overflow-y: hidden;
}
.vacations-page .band-months {
  display: grid;
  grid-template-columns: 170px repeat(12, 1fr);
  min-width: 820px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}
.vacations-page .band-months span {
  padding: 8px 0;
  text-align: center;
  font-family: var(--f-ui);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border-left: 1px solid var(--border);
}
.vacations-page .band-months span:first-child {
  border-left: 0;
}
.vacations-page .band-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  min-width: 820px;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.vacations-page .band-row:last-child {
  border-bottom: 0;
}
.vacations-page .band-row:hover {
  background: var(--taupe-wash);
}
.vacations-page .band-name {
  padding: 9px var(--s4);
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vacations-page .band-track {
  position: relative;
  height: 34px;
  border-left: 1px solid var(--border);
}
.vacations-page .band-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  pointer-events: none;
}
.vacations-page .band-grid i {
  border-right: 1px solid var(--border);
}
.vacations-page .band-grid i:last-child {
  border-right: 0;
}
/* Bewusst <span tabindex="0" role="img"> im Template, kein <button>:
   03-layout-und-komponenten.css setzt fuer das blosse Element "button"
   global min-height:44px sowie background/border/color mit !important.
   Das hat hier zweimal zugeschlagen - die Balken wurden alle taupe-dark
   statt in ihrer Abwesenheitsfarbe angezeigt, und min-height:44px hat sie
   über die 34px hohe Zeile hinausgeschoben (siehe .band-track). Keine
   Spezifitaet und kein eigenes !important haette das behoben, weil
   background/border dort mit !important stehen - nur ein anderes Element
   umgeht die Regel sauber. */
.vacations-page .blk {
  position: absolute;
  top: 9px;
  height: 16px;
  min-width: 3px;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.vacations-page .blk:focus-visible {
  outline: 2px solid var(--taupe);
  outline-offset: 2px;
}
.vacations-page .blk.is-pending {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65) 3px, transparent 3px, transparent 6px);
  outline: 1px solid var(--border-strong);
  outline-offset: -1px;
}
.vacations-page .blk.is-filtered-out {
  display: none;
}
.vacations-page .band-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--today);
  pointer-events: none;
  z-index: 2;
}

/* ============ Filter ============ */
.vacations-page .filters {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
}
.vacations-page .fl {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vacations-page .fl-lab {
  font-family: var(--f-ui);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.vacations-page .fl select {
  font-family: var(--f-body);
  font-size: 0.9rem;
  padding: 8px 30px 8px 10px;
  border: 1px solid var(--border-strong);
  background: #fff;
  border-radius: 0;
  color: var(--text);
  min-height: 38px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.vacations-page .fl select:focus {
  outline: none;
  border-color: var(--taupe);
  box-shadow: 0 0 0 3px rgba(134, 124, 114, 0.16);
}

/* ============ Tabelle ============ */
.vacations-page .tbl {
  --cols: minmax(150px, 1fr) minmax(190px, 1.2fr) 78px 130px minmax(160px, 1.4fr) 190px;
}
.vacations-page .tbl.is-self {
  --cols: minmax(190px, 1.2fr) 78px 130px minmax(160px, 1.4fr) 190px;
}
.vacations-page .trow {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.vacations-page .trow:last-child {
  border-bottom: 0;
}
.vacations-page .thead {
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border-strong);
}
.vacations-page .thead .tc {
  font-family: var(--f-ui);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px var(--s3);
}
.vacations-page .tbody:hover {
  background: var(--taupe-wash);
}
.vacations-page .tc {
  padding: 11px var(--s3);
  font-size: 0.93rem;
  min-width: 0;
}
.vacations-page .tc-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--f-bold);
}
.vacations-page .tc-notiz {
  color: var(--muted);
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vacations-page .tc-akt {
  display: flex;
  gap: var(--s2);
  justify-content: flex-end;
}
.vacations-page .tc-akt-note {
  align-self: center;
  font-size: 0.82rem;
  color: var(--muted);
}
.vacations-page .art {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.vacations-page .art i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}
.vacations-page .st {
  display: inline-block;
  padding: 2px 9px;
  font-family: var(--f-ui);
  font-size: 0.78rem;
  border: 1px solid;
}
.vacations-page .st-active {
  color: var(--pos);
  border-color: var(--pos);
  background: var(--pos-wash);
}
.vacations-page .st-pending {
  color: var(--taupe-dark);
  border-color: var(--taupe-light);
  background: var(--taupe-wash);
}
.vacations-page .st-rejected {
  color: var(--neg);
  border-color: var(--neg);
  background: var(--neg-wash);
}
.vacations-page .st-cancelled {
  color: var(--muted);
  border-color: var(--border-strong);
  background: var(--surface-soft);
}
.vacations-page .trow.is-off .tc:not(.tc-akt) {
  opacity: 0.62;
}
.vacations-page .tbl-foot {
  margin: 0;
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
  font-size: 0.85rem;
  color: var(--muted);
}
.vacations-page .empty {
  padding: var(--s7) var(--s5);
  text-align: center;
}
.vacations-page .empty p {
  margin: 0 0 5px;
}
.vacations-page .empty .e1 {
  font-family: var(--f-ui);
}
.vacations-page .empty .e2 {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ============ Eintragsformular ============
   .sheet-back/.sheet/.vac-toast tragen die Klasse vacations-page direkt
   auf sich selbst (kein umschliessendes Wrapper-Element, da sie ausserhalb
   von .container per position:fixed liegen). ".vacations-page .sheet"
   wuerde deshalb nie treffen - der Nachfahren-Kombinator verlangt ein
   ANDERES Element als Vorfahren, nicht dieselbe Klasse auf sich selbst.
   Diese drei Selektoren bleiben deshalb unscoped; die Namen sind
   projektweit sonst nicht vergeben (siehe Grep oben). */
.sheet-back {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.34);
  z-index: 60;
}
.sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: #fff;
  border-left: 1px solid var(--border-strong);
  z-index: 61;
  display: flex;
  flex-direction: column;
  box-shadow: -14px 0 40px rgba(26, 26, 26, 0.12);
}
/* .sheet setzt display:flex bedingungslos - ohne diese Regel wuerde das
   Formular auch bei gesetztem hidden-Attribut sichtbar bleiben, weil ein
   Autor-Stylesheet die UA-Regel [hidden]{display:none} aussticht. Gleiches
   Muster wie .modal-overlay[hidden] in 06-seitenrahmen.css. */
.sheet[hidden] {
  display: none;
}
.vacations-page .sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--border);
}
.vacations-page .sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s5);
}
.vacations-page .sheet-foot {
  display: flex;
  gap: var(--s3);
  justify-content: flex-end;
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}
.vacations-page .fld {
  margin-bottom: var(--s4);
}
.vacations-page .fld-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
.vacations-page .fld-lab {
  display: block;
  font-family: var(--f-ui);
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.sheet .in {
  width: 100%;
  font-family: var(--f-body);
  font-size: 16px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  background: #fff;
  border-radius: 0;
  color: var(--text);
  min-height: 44px;
}
.sheet select.in {
  padding-right: 30px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.sheet .in:focus {
  outline: none;
  border-color: var(--taupe);
  box-shadow: 0 0 0 3px rgba(134, 124, 114, 0.16);
}
.vacations-page .choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
}
.vacations-page .ch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  min-height: var(--touch);
  border: 1px solid var(--border-strong);
  background: #fff;
  cursor: pointer;
  user-select: none;
  font-size: 0.9rem;
  text-align: left;
}
.vacations-page .ch i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}
.vacations-page .ch.is-on {
  border-color: var(--taupe-dark);
  background: var(--taupe-wash);
  font-family: var(--f-ui);
}
.vacations-page .ch-wide {
  grid-column: 1 / -1;
}
.vacations-page .in-std {
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.vacations-page .in-std input {
  flex: 0 0 110px;
}
.vacations-page .in-std span {
  font-size: 0.85rem;
  color: var(--muted);
}
.vacations-page .preview {
  border: 1px solid var(--border);
  background: var(--surface-soft);
  padding: var(--s4);
}
.vacations-page .pv-line {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  font-size: 0.9rem;
  padding: 3px 0;
}
.vacations-page .pv-line strong {
  font-family: var(--f-bold);
  font-weight: normal;
  font-variant-numeric: tabular-nums;
}
.vacations-page .pv-warn {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
  color: var(--neg);
}
.vacations-page .pv-ok {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
  color: var(--muted);
}

/* ============ Toast ============
   Gleicher Grund wie bei .sheet oben: .vac-toast traegt vacations-page
   direkt auf sich selbst, deshalb unscoped (Name ist sonst frei). */
.vac-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 14px);
  background: var(--text);
  color: #fff;
  padding: 11px 18px;
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 90vw;
}
.vac-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.vac-toast button {
  background: none;
  border: 0;
  color: #fff;
  font-family: var(--f-ui);
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding: 0;
  white-space: nowrap;
}

/* ============================================================
   MOBIL (Breakpoint identisch zu den uebrigen Seiten, siehe
   @media (max-width: 760px) in 01-tokens.css/03-layout)
   ============================================================ */
@media (max-width: 760px) {
  .vacations-page .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s3);
  }
  .vacations-page .page-head p {
    display: none;
  }
  .vacations-page .head-right {
    justify-content: space-between;
  }
  .vacations-page .btn {
    flex: 1;
  }
  .vacations-page .block-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
  }
  .vacations-page .filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .vacations-page .fl-person {
    grid-column: 1 / -1;
  }
  .vacations-page .fl select {
    font-size: 16px;
    min-height: var(--touch);
  }

  .vacations-page .ap {
    display: block;
    padding: var(--s4);
  }
  .vacations-page .ap > * {
    margin-bottom: var(--s2);
  }
  .vacations-page .ap-tage {
    text-align: left;
  }
  .vacations-page .ap-akt {
    margin-bottom: 0;
  }
  .vacations-page .ap-akt .btn {
    flex: 1;
  }

  .vacations-page .konto-self {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s4);
    padding: var(--s4);
  }
  .vacations-page .ks-side {
    min-width: 0;
  }
  .vacations-page .konto-all {
    grid-template-columns: 1fr;
  }
  .vacations-page .ka {
    border-right: 0;
    padding: var(--s3) var(--s4);
  }

  .vacations-page .band-months,
  .vacations-page .band-row {
    grid-template-columns: 118px 1fr;
    min-width: 700px;
  }
  .vacations-page .band-months {
    grid-template-columns: 118px repeat(12, 1fr);
  }

  /* .trow.thead statt .thead: gleiche Spezifitaet wie ".trow" weiter unten,
     stand aber vor dessen "display:block" im Quelltext und wurde von ihm
     ausgestochen. Das zusaetzliche .trow hebt die Spezifitaet an, damit
     die Reihenfolge keine Rolle mehr spielt (gleiches Muster wie beim
     .login-panel/[class*="panel"]-Fund in 02-login.css). */
  .vacations-page .trow.thead {
    display: none;
  }
  .vacations-page .trow {
    display: block;
    border: 1px solid var(--border);
    margin: var(--s3) var(--s4) 0;
    padding: var(--s3);
  }
  .vacations-page .tc {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    padding: 5px 0;
    text-align: right;
    border-bottom: 1px solid var(--border);
  }
  .vacations-page .tc:last-child {
    border-bottom: 0;
  }
  .vacations-page .tc::before {
    content: attr(data-label);
    font-family: var(--f-ui);
    font-size: 0.78rem;
    color: var(--muted);
    text-align: left;
    flex: 0 0 auto;
  }
  .vacations-page .tc-akt {
    justify-content: flex-end;
  }
  .vacations-page .tc-akt::before {
    content: none;
  }
  .vacations-page .tc-art {
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: var(--s2);
  }

  .sheet {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 92dvh;
    border-left: 0;
    border-top: 1px solid var(--border-strong);
  }
  .vacations-page .sheet-foot {
    padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom));
  }
}

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