/* Modul zeit: Stempeluhr, Meine Arbeitszeit, Admin Arbeitszeiten, Startbild. */

/* Stempeluhr in der Kopfzeile */
.stempeluhr {
  display: inline-flex; align-items: center; gap: .5rem; min-height: var(--ziel); padding: 0 .75rem;
  background: var(--hemd); color: var(--tinte); border: 1px solid var(--rand); border-radius: 3px;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.stempeluhr svg { flex: none; }
.stempeluhr-an { border-color: var(--gruen); box-shadow: inset 0 -3px 0 var(--gruen); }
.stempeluhr-zeit { white-space: nowrap; }

/* Kennzahlen */
.zeit-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem 1.25rem; margin: .75rem 0 1rem; }
.zeit-kennzahlen > div { min-width: 0; }
.zeit-kennzahlen dt { font-size: .9375rem; color: var(--leise); }
.zeit-kennzahlen dd { margin: 0; font: 500 1.75rem/1.2 var(--titel); font-variant-numeric: tabular-nums; }
.zeit-kennzahlen small { display: block; }
.zeit-minus { color: #b3261e; }
.zeit-plus { color: var(--gruen); }
.zeit-hinweis { margin-top: .5rem; color: var(--leise); font-size: .9375rem; max-width: 46rem; }

/* Tabellen */
.zeit-rahmen { overflow-x: auto; margin-top: .5rem; }
.zeit-tabelle { width: 100%; min-width: 34rem; border-collapse: collapse; background: var(--hemd); border: 1px solid var(--linie); }
.zeit-tabelle thead th { padding: .375rem .625rem; text-align: left; font-size: .9375rem; font-weight: 600; color: var(--leise); border-bottom: 1px solid var(--linie); }
.zeit-tabelle tbody th { padding: .375rem .625rem; text-align: left; font-weight: 400; line-height: 1.25; white-space: nowrap; }
.zeit-tabelle tbody td { padding: .375rem .625rem; vertical-align: middle; }
.zeit-tabelle tbody tr + tr > * { border-top: 1px solid var(--rose-2); }
.zeit-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeit-heute { background: var(--rose); box-shadow: inset 4px 0 0 var(--bordeaux); }
.zeit-zukunft { color: var(--rand); }

/* Anträge */
.zeit-spalten { display: grid; gap: 0 2.5rem; }
.zeit-spalten > div { min-width: 0; }
.zeit-antraege { display: grid; gap: .75rem; }
.zeit-antraege li { padding: .75rem 1rem; background: var(--hemd); border: 1px solid var(--linie); border-left: 4px solid var(--eiche); display: grid; gap: .25rem; }
.zeit-antraege-breit { max-width: 46rem; }

/* Reiter */
.zeit-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--linie); }
.zeit-tab { min-height: var(--ziel); padding: 0 1rem; background: none; border: 0; border-bottom: 3px solid transparent; font-weight: 600; color: var(--leise); }
.zeit-tab[aria-selected="true"] { color: var(--bordeaux); border-bottom-color: var(--bordeaux); background: var(--rose); }

.zeit-vorzeichen { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; padding: 0; border: 0; }
.zeit-vorzeichen legend { padding: 0; font-weight: 600; }

/* Startbild bei aktiver Zeit-Sperre */
.zeit-gate { display: grid; justify-items: center; gap: 1rem; max-width: 28rem; margin: 2rem auto; padding: 2rem 1.5rem; text-align: center; background: var(--hemd); border: 1px solid var(--linie); border-top: 4px solid var(--bordeaux); }
.zeit-gate h1 { margin: 0; }
.zeit-gate-uhr { font: 500 3rem/1.1 var(--titel); color: var(--bordeaux); font-variant-numeric: tabular-nums; }
.zeit-gate .knopf-breit { margin-top: 0; }

@media (min-width: 62rem) {
  .zeit-spalten { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}