/* timING – Karton, Tinte, Stempelfarben */
:root {
  --karton: #E7EBE7;
  --papier: #F6F7F4;
  --tinte: #1D2B3A;
  --grau: #56625D;
  --linie: #C3CAC5;
  --plus: #17684F;
  --minus: #B3261E;
  --vorschau: #1F5FAD; /* gewählt, noch nicht eingetragen */
  --vertretung: #9A5B00; /* Tage, an denen man jemanden vertritt */
  --violett: #6B3FA0; /* Hinweis Feiertage */
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --karton: #11171C;
    --papier: #1A2229;
    --tinte: #E1E7E3;
    --grau: #9AA6A0;
    --linie: #2E3941;
    --plus: #6CCB9E;
    --minus: #F2847B;
    --vorschau: #7FB3F2;
    --vertretung: #F0B35A;
    --violett: #C4A5F5;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--karton);
  color: var(--tinte);
  font: 400 1rem/1.45 var(--schrift);
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}

#kopf, main {
  max-width: 32rem;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
#kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-top: calc(env(safe-area-inset-top) + 14px);
}
#datum { font-weight: 650; }
#konto { color: var(--grau); text-decoration: none; padding: 8px 0 8px 12px; }
main { padding-top: 4px; padding-bottom: 32px; }
body.mit-tabs main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

h1 { font-size: 1.75rem; line-height: 1.15; font-weight: 750; letter-spacing: -0.015em; margin: 16px 0 12px; }
h2 { font-size: 1.125rem; line-height: 1.3; font-weight: 700; margin: 0 0 12px; }
h3 { font-size: 1rem; font-weight: 650; margin: 0; }
p { margin: 0 0 12px; }
.leise { color: var(--grau); font-size: .9375rem; }
:focus-visible { outline: 3px solid var(--plus); outline-offset: 2px; }

/* Stempel-Knopf mit Strichkranz: 48 Striche à 10 min Soll */
.uhr { display: grid; justify-items: center; padding: 40px 0 4px; }
.ring {
  --p: 0;
  position: relative;
  width: min(62vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 4px solid var(--tinte);
  background: transparent;
  color: var(--tinte);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .18s, color .18s, transform .08s;
}
.ring::before {
  content: "";
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(var(--tinte) calc(var(--p) * 1turn), var(--linie) 0);
  -webkit-mask:
    repeating-conic-gradient(#000 0 1.6deg, transparent 1.6deg 7.5deg),
    radial-gradient(closest-side, transparent calc(100% - 11px), #000 calc(100% - 11px) 100%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    repeating-conic-gradient(#000 0 1.6deg, transparent 1.6deg 7.5deg),
    radial-gradient(closest-side, transparent calc(100% - 11px), #000 calc(100% - 11px) 100%, transparent 100%);
  mask-composite: intersect;
}
.ring:active { transform: scale(.97); }
.ring.an { background: var(--tinte); color: var(--karton); }
.ring:disabled { cursor: progress; }
.ring:focus-visible { outline-offset: 32px; }
.ring-aktion { font-size: 2.5rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; }
.ring-zeit { font-size: 1.25rem; font-weight: 500; opacity: .75; }
.unter-ring { margin: 40px 0 0; text-align: center; color: var(--grau); }

/* Ergebnis als Stempelabdruck */
.ergebnis { margin-top: 40px; }
.abdruck {
  --dreh: -2.5deg;
  display: inline-grid;
  padding: 8px 18px 12px;
  border: 3px solid currentColor;
  border-radius: 10px;
  transform: rotate(var(--dreh));
  transform-origin: left center;
}
.dreh-2 { --dreh: 1.8deg; }
.dreh-3 { --dreh: -1.2deg; }
.abdruck.klein { padding: 4px 10px 6px; border-width: 2px; border-radius: 8px; }
.abdruck.klein .saldo { font-size: 1.375rem; letter-spacing: -0.02em; }
.abdruck.klein .saldo-text { font-size: .6875rem; margin-top: 2px; }
.plus { color: var(--plus); }
.minus { color: var(--minus); }
.saldo { font-size: 3.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.saldo-text { font-size: .875rem; font-weight: 600; margin-top: 6px; }
.frisch { animation: stempeln .32s cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes stempeln {
  from { opacity: 0; transform: rotate(calc(var(--dreh) - 6.5deg)) scale(1.4); }
  to { opacity: 1; transform: rotate(var(--dreh)) scale(1); }
}
/* clip: der vergrößerte Stempel beim Einblenden macht die Seite sonst breiter (mobil);
   rechts 16px in den Rand von main hinein, damit gedrehte Ecken sichtbar bleiben */
.abdrucke { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin: 8px -16px 24px 0; padding: 0 16px 0 4px; overflow-x: clip; }
.abdrucke-klein { display: flex; flex-wrap: wrap; gap: 14px 18px; }
.abdrucke .klein:nth-child(2) { animation-delay: .08s; }
.werte { margin: 28px 0 0; }
.werte div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.werte dt { color: var(--grau); }
.werte dd { margin: 0; font-weight: 650; }
.warnung { color: var(--minus); font-weight: 600; margin-top: 12px; }

/* Formulare */
.karte { background: var(--papier); border-radius: 14px; padding: 18px; margin: 16px 0 28px; }
label { display: grid; gap: 6px; font-weight: 600; font-size: .9375rem; margin-bottom: 14px; }
input {
  font: inherit;
  font-weight: 400;
  color: var(--tinte);
  background: var(--karton);
  border: 2px solid var(--linie);
  border-radius: 8px;
  min-height: 48px;
  padding: 0 12px;
  width: 100%;
  min-width: 0;
}
select {
  font: inherit;
  font-weight: 400;
  color: var(--tinte);
  background: var(--karton);
  border: 2px solid var(--linie);
  border-radius: 8px;
  min-height: 48px;
  padding: 0 12px;
  width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--tinte); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: .9375rem; }

/* Auswahl als Chips */
.wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.wahl legend { width: 100%; }
.wahl label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin: 0;
  padding: 0 14px;
  border: 2px solid var(--linie);
  border-radius: 999px;
  cursor: pointer;
}
.wahl input { position: absolute; inset: 0; width: 100%; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.wahl label:has(input:checked) { background: var(--tinte); border-color: var(--tinte); color: var(--karton); }
.wahl label:has(input:focus-visible) { outline: 3px solid var(--plus); outline-offset: 2px; }
.fuer { margin-bottom: 8px; }

/* Felder mit − und + (Uhrzeit, Dauer, Datum) */
.feld { margin-bottom: 14px; min-width: 0; }
.feld > label { display: block; margin-bottom: 6px; }
.feld > label .leise { font-weight: 400; margin-left: 4px; }
.stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; }
.stepper input { text-align: center; font-size: 1.125rem; font-weight: 600; padding: 0 4px; }
.stepper input[type="date"] { font-size: 1rem; font-weight: 400; }
.stepper input[readonly] { background: var(--papier); }
.schritt {
  min-height: 48px;
  border: 2px solid var(--linie);
  border-radius: 8px;
  background: transparent;
  color: var(--tinte);
  font: inherit;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.schritt:active { background: var(--linie); }
input[aria-invalid="true"] { border-color: var(--minus); }
.paar { display: grid; column-gap: 12px; }
@media (min-width: 30rem) { .paar { grid-template-columns: 1fr 1fr; } }
fieldset[data-arbeitsart] { margin-top: 4px; }
.ab-eigen { margin-top: 12px; display: grid; gap: 10px; }
.ab-eigen .feld { margin-bottom: 0; }

/* Team */
.team { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.person-karte {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--papier);
  color: var(--tinte);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.person-karte.inaktiv { opacity: .6; }
.person-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.person-kopf .abdruck { transform-origin: center; }
.zahlen { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .875rem; }
.zahlen b { font-weight: 750; }

/* Benutzerverwaltung */
.personen details { width: 100%; }
.personen summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
}
.personen summary::-webkit-details-marker { display: none; }
.personen summary::after { content: "›"; color: var(--grau); font-size: 1.25rem; transition: transform .15s; }
.personen details[open] summary::after { transform: rotate(90deg); }
.personen summary .werte-klein { margin-left: auto; display: grid; justify-items: end; font-size: .875rem; }
.verwalten { display: grid; gap: 8px; padding: 10px 0 6px; }
.gefahr { display: grid; gap: 4px; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--linie); }
.gefahr .leise { margin: 0 0 8px; font-size: .8125rem; }
.knopf.gefahr { background: transparent; border-color: var(--minus); color: var(--minus); }

/* Nullen */
.nullen h3 { margin: 20px 0 6px; }
.nullungen { list-style: none; margin: 0; padding: 0; }
.nullungen li { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--linie); }
input::-webkit-date-and-time-value { text-align: left; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.knoepfe { display: grid; gap: 10px; }
.knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  width: 100%;
  padding: 0 18px;
  border: 2px solid var(--tinte);
  border-radius: 10px;
  background: var(--tinte);
  color: var(--karton);
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}
.knopf.zweit { background: transparent; color: var(--tinte); }
.knopf small { font-size: .8125rem; font-weight: 500; opacity: .7; margin-left: 6px; }
.knopf.doppelt { flex-direction: column; min-height: 58px; line-height: 1.25; white-space: nowrap; }
.knopf.doppelt small { margin-left: 0; }
.knopf:disabled { opacity: .55; cursor: progress; }
#abmelden { margin-top: 8px; }
.link {
  font: inherit;
  font-size: .9375rem;
  color: var(--tinte);
  background: none;
  border: 0;
  padding: 10px 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Verlauf */
.verlauf-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tag { padding: 14px 0 4px; border-top: 1px solid var(--linie); }
.tag header { display: flex; align-items: baseline; gap: 14px; }
.tag header h3 { flex: 1; }
.saldo-klein { font-weight: 700; }
.tag header .saldo-klein { min-width: 3.6em; text-align: right; }
.tag header .zuschlag { font-size: .75rem; font-weight: 600; color: var(--grau); white-space: nowrap; }
.tag ul, .personen { list-style: none; margin: 2px 0 4px; padding: 0; }
.tag li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.tag li.aktiv .spanne { background: var(--papier); box-shadow: 0 0 0 4px var(--papier); border-radius: 2px; }
.spanne { font-weight: 500; }
.aktionen { margin-left: auto; display: flex; }
.marke { font-size: .75rem; color: var(--grau); border: 1px solid var(--linie); border-radius: 4px; padding: 1px 6px; }
.personen li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 12px;
  padding: 10px 0;
  border-top: 1px solid var(--linie);
}
.person { display: grid; }
.monat-nav { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.monat-nav h2 { flex: 1; margin: 0; text-align: center; }
.monat-nav .link { font-size: 1.5rem; line-height: 1; text-decoration: none; padding: 6px 14px; }
.monat-nav .aus { visibility: hidden; }
.monat-summe { display: flex; justify-content: space-between; color: var(--grau); }

/* Überstundenkonto auf der Startseite */
.konto { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--linie); }
.konto-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.konto-kopf h2 { margin-bottom: 6px; }
.abgefeiert { font-weight: 600; }

/* Übersicht */
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 16px; }
.kachel { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--papier); }
.kachel span { font-size: .8125rem; font-weight: 600; color: var(--grau); }
.kachel strong { font-size: 1.25rem; font-weight: 750; letter-spacing: -0.02em; }
.matrix { display: grid; gap: 3px; margin-top: 8px; }
.matrix .zeile { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 3px; }
.matrix .kopf span { padding: 2px 0; text-align: center; font-size: .75rem; font-weight: 650; color: var(--grau); }
.zelle {
  display: grid;
  align-content: space-between;
  min-height: 50px;
  padding: 4px 3px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--papier);
  color: var(--tinte);
  text-decoration: none;
  font-size: .6875rem;
  line-height: 1.2;
  overflow: hidden;
}
.zelle.plus { color: var(--plus); }
.zelle.minus { color: var(--minus); }
.zelle .nr { display: flex; justify-content: space-between; font-weight: 600; color: var(--grau); }
.zelle .nr b { color: var(--tinte); }
.zelle .wert { font-weight: 700; text-align: right; white-space: nowrap; letter-spacing: -0.03em; }
.zelle.frei { background: transparent; border-color: var(--linie); }
.zelle.fremd { opacity: .45; }
.zelle.heute { border: 2px solid var(--tinte); }
.zelle.genullt .wert { text-decoration: line-through; opacity: .6; }
.tag.genullt header .saldo-klein { text-decoration: line-through; opacity: .6; }
.zelle.summe { align-content: end; background: transparent; text-align: right; font-weight: 750; white-space: nowrap; letter-spacing: -0.03em; }
.legende { margin-top: 12px; font-size: .8125rem; }

/* Navigation */
#tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  background: var(--karton);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
#tabs a {
  position: relative;
  flex: 1;
  max-width: 11rem;
  text-align: center;
  padding: 16px 2px 18px;
  font-size: .875rem;
  color: var(--grau);
  text-decoration: none;
  font-weight: 600;
}
#tabs a[aria-current] { color: var(--tinte); }
#tabs a[aria-current]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 28%;
  right: 28%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--tinte);
}

/* Meldung */
#meldung {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  width: max-content;
  max-width: min(28rem, calc(100% - 32px));
  transform: translate(-50%, 12px);
  background: var(--tinte);
  color: var(--karton);
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
#meldung.sichtbar { opacity: 1; transform: translate(-50%, 0); }

/* Anmeldung & Hinweis */
.anmeldung { padding-top: calc(env(safe-area-inset-top) + 10vh); }
.titel { font-size: 3rem; font-weight: 800; letter-spacing: -0.035em; margin-bottom: 20px; }
.hinweis {
  margin-top: 24px;
  padding: 4px 18px 18px;
  border-left: 4px solid var(--minus);
  background: var(--papier);
  border-radius: 0 14px 14px 0;
}

@media (prefers-reduced-motion: reduce) {
  .frisch { animation: none; }
  .ring, #meldung { transition: none; }
}

/* Urlaubskalender: ziehen oder antippen */
.ukal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-top: 8px; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ukal.ziehen { outline: 2px solid var(--vorschau); outline-offset: 3px; border-radius: 6px; }
.ukopf { padding: 2px 0; text-align: center; font-size: .75rem; font-weight: 650; color: var(--grau); }
.utag {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 52px;
  padding: 4px 4px 3px;
  border: 0;
  border-radius: 7px;
  background: var(--papier);
  color: var(--tinte);
  font: inherit;
  font-size: .8125rem;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.utag .nr { font-weight: 650; }
.utag .ft { font-size: .5625rem; line-height: 1.15; color: var(--grau); overflow: hidden; overflow-wrap: anywhere; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.utag .andere {
  position: absolute; right: 3px; bottom: 3px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--grau); color: var(--karton); font-size: .625rem; font-weight: 700; line-height: 16px; text-align: center;
}
.utag.frei { background: transparent; color: var(--grau); box-shadow: inset 0 0 0 1px var(--linie); }
.utag.fremd { opacity: .45; }
.utag.eigen.ut { background: var(--plus); color: var(--karton); }
.utag.eigen.ut .ft, .utag.eigen.ut .nr { color: var(--karton); }
.utag.eigen.ue { background: var(--papier); box-shadow: inset 0 0 0 3px var(--plus); }
.utag.imblock { background: var(--linie); }
/* Blau = gewählt, noch nicht eingetragen; gewählter eigener Urlaub dunkel umrandet */
.utag.gewaehlt { box-shadow: inset 0 0 0 3px var(--vorschau); }
.utag.markiert, .utag.eigen.markiert { box-shadow: inset 0 0 0 3px var(--tinte), inset 0 0 0 5px var(--papier); }
.utag.gewaehlt:not(.frei) { background: var(--vorschau); color: var(--karton); }
.utag.gewaehlt:not(.frei) .ft { color: var(--karton); }
.utag.ziel { outline: 3px dashed var(--vorschau); outline-offset: -3px; }
.utag.anker { box-shadow: inset 0 0 0 3px var(--vorschau); }
.utag:disabled { opacity: .3; cursor: default; }
.vorschau h2 { margin-bottom: 6px; }
.vorschau p { margin-bottom: 8px; }
.warnung-weich { padding: 8px 12px; border-left: 4px solid var(--tinte); background: var(--karton); border-radius: 0 8px 8px 0; font-weight: 500; }
.urlaube, .urlaub-liste, .mails { list-style: none; margin: 0; padding: 0; }
.urlaube li, .mails li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie); }
.urlaub-liste { display: grid; gap: 4px; margin-top: 10px; font-size: .9375rem; }
.mails .marke.ok { color: var(--plus); border-color: var(--plus); }
.mails .marke.fehler { color: var(--minus); border-color: var(--minus); }

/* Team-Zeitleiste: Personen × Tage, innerhalb scrollbar */
.zeitleiste { --tage: 30; display: block; max-width: 100%; overflow-x: auto; padding-bottom: 6px; }
.zeitleiste .zl-zeile + .zl-zeile { margin-top: 3px; }
.zl-zeile { display: grid; grid-template-columns: 6.5rem repeat(var(--tage), minmax(14px, 1fr)); align-items: center; gap: 2px; min-width: calc(6.5rem + var(--tage) * 16px); }
.zl-name { position: sticky; left: 0; z-index: 1; padding-right: 6px; background: var(--karton); font-size: .8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zl-zeile.ich .zl-name { color: var(--plus); }
.zl-tag { height: 18px; border-radius: 3px; background: var(--papier); }
.zl-tag.frei { background: transparent; }
.zl-tag.an { background: var(--plus); }
.zl-tag.kopf { height: auto; background: none; box-shadow: none; font-size: .625rem; text-align: center; color: var(--grau); }
.zl-tag.kopf.heute { color: var(--plus); font-weight: 700; }

/* Admin: Einladungslink, kleine Formulare */
.link-kopie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 8px; }
.link-kopie input { font-size: .8125rem; }
.link-kopie .knopf { width: auto; }
.inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.inline-form label { margin-bottom: 0; }
.inline-form .knopf { width: auto; min-height: 48px; }

/* Vertretung: Periodenwahl, einzelne Tage, Markierungen im Kalender */
.vertretung { margin: 12px 0; padding-top: 12px; border-top: 1px solid var(--linie); }
.vertretung .feld { margin-bottom: 8px; }
.vtage { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.vtage li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 8px; }
.vtage li.belegt .vtag, .vtage li.offen .vtag { color: var(--minus); font-weight: 650; }
.vtage li.niemand .vtag { font-weight: 650; }
.vtage select { min-height: 44px; }
.utag.vkonflikt { outline: 3px solid var(--minus); outline-offset: -3px; }
.utag.vniemand { outline: 3px dotted var(--minus); outline-offset: -3px; }
.utag .vt {
  position: absolute; left: 3px; bottom: 3px;
  width: 16px; height: 16px; border-radius: 8px;
  background: var(--vertretung); color: var(--karton); font-size: .5625rem; font-weight: 800; line-height: 16px; text-align: center;
}
.utag.regelfrei .nr { text-decoration: underline dashed; text-underline-offset: 3px; }
/* Beantragt: schraffiert, ohne Rahmen – Auswahl und Markierungen bleiben sichtbar */
.utag.eigen.beantragt { background: repeating-linear-gradient(135deg, var(--papier) 0 5px, var(--linie) 5px 8px); color: var(--tinte); }
.utag.eigen.beantragt .nr, .utag.eigen.beantragt .ft { color: var(--tinte); }
.utag.eigen.beantragt.markiert { box-shadow: inset 0 0 0 3px var(--tinte); }
.zl-tag.an.beantragt { background: repeating-linear-gradient(135deg, var(--plus) 0 3px, transparent 3px 6px); }
.urlaube .person .warnung { margin-top: 2px; font-size: .9375rem; }
.knoepfe-klein { display: grid; justify-items: end; gap: 4px; }
.inline-form.drei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }

/* Urlaub: Stand und blaue Vorschau daneben */
.ustand { align-items: flex-start; }
.stand-paar { display: inline-flex; align-items: center; gap: 6px; }
.stand-paar .pfeil { color: var(--vorschau); font-weight: 700; }
.ustand .abdruck:not(.klein) .saldo { font-size: 2.75rem; }
.abdruck.vorschau { color: var(--vorschau); border-style: dashed; }
.vorschau-hinweis { flex-basis: 100%; color: var(--vorschau); font-size: .8125rem; font-weight: 600; }
.regel { margin: 10px 0; padding-top: 10px; border-top: 1px solid var(--linie); }
.check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; font-weight: 500; }
.check input { width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; flex: none; accent-color: var(--vorschau); }
.knoepfe-klein.links { justify-items: start; }
.gruppen { list-style: none; margin: 0 0 12px; padding: 0; }
.gruppen li { padding: 10px 0; border-top: 1px solid var(--linie); }
.gruppen-form { margin: 10px 0; }

/* Feiertage (gesetzlich im Bundesland oder eingetragen) rot wie im Kalender üblich */
.utag.feiertag .nr, .utag.feiertag .ft { color: var(--minus); }
.utag.feiertag { box-shadow: inset 0 0 0 1px var(--minus); }
.utag.feiertag.gewaehlt, .utag.feiertag.anker { box-shadow: inset 0 0 0 3px var(--vorschau); }
.utag.feiertag.markiert { box-shadow: inset 0 0 0 3px var(--tinte), inset 0 0 0 5px var(--papier); }
.zelle.feiertag .nr, .zelle.feiertag .nr b { color: var(--minus); }
.zl-tag.kopf.feiertag { color: var(--minus); font-weight: 700; }

/* Urlaub: Feiertage des Bundeslands, Legende mit Beispielen, Reiter, Abstände */
.land { display: inline-block; margin: 0 0 14px; padding: 3px 12px; border: 1.5px solid var(--violett); border-radius: 999px; color: var(--violett); font-size: .8125rem; font-weight: 650; }
.kal-hilfe { margin: 12px 0 4px; }
.kal-hilfe > p { margin: 0 0 6px; font-size: .875rem; }
.farben summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; font-size: .875rem; font-weight: 650; list-style: none; }
.farben summary::-webkit-details-marker { display: none; }
.farben .info { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid currentColor; border-radius: 50%; font-size: .75rem; font-weight: 800; font-style: italic; }
.farben[open] .info { background: var(--tinte); color: var(--karton); border-color: var(--tinte); }
.farben ul { list-style: none; margin: 6px 0 0; padding: 12px; display: grid; gap: 8px; border-radius: 12px; background: var(--papier); }
.farben li { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; font-size: .875rem; }
.farben .utag { min-height: 40px; width: 44px; cursor: default; }
.utag.frei .vt, .utag.eigen .vt { box-shadow: 0 0 0 1.5px var(--papier); }
.vinfo { margin: 8px 0 12px; }
.vinfo p { margin: 0 0 8px; }
.warnung.oben { margin: 4px 0 12px; }
.reiter { display: flex; gap: 4px; margin: 32px 0 0; border-bottom: 1px solid var(--linie); }
.reiter button {
  flex: 1 1 0; min-height: 46px; padding: 8px 6px; margin-bottom: -1px;
  border: 0; border-bottom: 3px solid transparent; background: none;
  color: var(--grau); font: inherit; font-size: .9375rem; font-weight: 650; cursor: pointer;
}
.reiter button[aria-selected=true] { color: var(--tinte); border-bottom-color: var(--tinte); }
.reiter button:focus-visible { outline: 3px solid var(--plus); outline-offset: -3px; }
.reiter .zahl { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: 10px; background: var(--minus); color: var(--karton); font-size: .75rem; line-height: 20px; }
[role=tabpanel] { padding-top: 8px; }
[role=tabpanel] section + section, [role=tabpanel] section + p { margin-top: 32px; }
[role=tabpanel] h2 { margin: 16px 0 4px; }
[role=tabpanel] .urlaube li { padding: 14px 0; }
[role=tabpanel] .urlaube .person { gap: 3px; }
.info-absatz { margin-top: 20px; }
.team-abschnitt { margin-top: 40px; }

/* Benutzer: Mitglieder einer Gruppe */
.mitglieder { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mitglieder li { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 12px; border: 1.5px solid var(--linie); border-radius: 999px; font-size: .875rem; }
.mitglieder li.leer { padding: 4px 12px; color: var(--grau); border-style: dashed; }
.mitglieder .entfernen { min-width: 32px; min-height: 32px; border: 0; border-radius: 50%; background: none; color: var(--grau); font: inherit; font-size: 1.125rem; line-height: 1; cursor: pointer; }
.mitglieder .entfernen:hover, .mitglieder .entfernen:focus-visible { color: var(--minus); background: var(--karton); }
.gruppen li[data-gruppe] > .inline-form + .inline-form { margin-top: 8px; }

/* Kopf: Gruppen neben dem Namen; Team-Monate; halber Tag */
#konto { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.kopf-gruppen { font-size: .75rem; color: var(--grau); }
.team-nav h2 { font-size: 1.0625rem; margin: 0; }
.zl-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: .8125rem; }
.zl-legende .zl-tag { display: inline-block; width: 16px; height: 14px; }
.utag .halb { position: absolute; right: 3px; top: 3px; font-size: .625rem; font-weight: 800; color: var(--grau); }
.utag.eigen.ut .halb { color: var(--karton); }

/* Nachtragen: Abstand zwischen Datum und „Mit Uhrzeit / Nur Dauer“ */
#nf > .feld { margin-bottom: 24px; }
/* Stunden: Filter */
.filter-ergebnis { margin: 0 0 12px; font-weight: 600; }
.treffer { display: block; margin: 6px 0 2px; font-size: .9375rem; }
.treffer b { font-size: 1.25rem; font-weight: 800; color: var(--minus); }
/* Suche, Gruppen aufklappbar */
.suche { display: block; margin: 12px 0; }
.gruppen-liste { margin-top: 14px; border-top: 1px solid var(--linie); }
.gruppe { border-bottom: 1px solid var(--linie); }
.gruppe summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 0; cursor: pointer; list-style: none; }
.gruppe summary::-webkit-details-marker { display: none; }
.gruppe summary::after { content: "›"; color: var(--grau); font-size: 1.25rem; transition: transform .15s; }
.gruppe summary .leise { margin-left: auto; }
.gruppe[open] summary::after { transform: rotate(90deg); }
.gruppe-inhalt { display: grid; gap: 12px; padding: 4px 0 16px; }
.mitglieder-liste { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; border: 1px solid var(--linie); border-radius: 10px; }
.mitglieder-liste li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 4px 12px; }
.mitglieder-liste li + li { border-top: 1px solid var(--linie); }
.mitglieder-liste li.treffer { background: var(--karton); font-weight: 650; }

/* Hinweis „Als App installieren“ (über den Reitern) */
.installieren {
  position: fixed; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 30;
  max-width: 32rem; margin: 0 auto; padding: 14px 16px;
  background: var(--papier); color: var(--tinte); border: 1.5px solid var(--linie); border-radius: 14px;
  box-shadow: 0 8px 28px rgb(0 0 0 / .28);
}
.installieren p { margin: 0 0 10px; font-size: .9375rem; }
.installieren > .knopf { width: 100%; }

/* Installationshinweis: Meldungen liegen darüber, der Inhalt endet nicht darunter */
#meldung { z-index: 40; }
body.mit-hinweis main { padding-bottom: calc(96px + var(--hinweis, 170px) + env(safe-area-inset-bottom)); }

/* Fester Wert statt Eingabe (Kommen einer alten offenen Buchung) */
.feld-fest { margin: 0 0 14px; }
.nacht-hinweis { color: var(--vorschau); margin: 6px 0 0; }
/* Lange Namen/Adressen brechen um (Seite nie breiter als der Bildschirm) */
.person-kopf .person { min-width: 0; }
.person-kopf .person strong { overflow-wrap: anywhere; }
@media (min-width: 30rem) { .feld-fest { margin: 0; padding-top: 22px; } }