/* Urlaubsantrag – Fenster über der Seite, gemeinsam für alle Seiten.
   Hier ist ein Popup richtig und kein aufklappbarer Bereich: man markiert
   einen Zeitraum, füllt zwei Felder und ist fertig. Das soll den Blick nicht
   teilen, und danach ist der Vorgang zu Ende. */

.ub-hinter {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 0, 0, 0.42);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow-y: auto;
}
.ub-fenster {
  background: var(--surface-1, #fff); color: var(--ink, #000);
  border: 1px solid var(--ring, rgba(0,0,0,.1)); border-radius: 14px;
  width: min(720px, 100%); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.ub-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--ring, rgba(0,0,0,.1));
  background: var(--plane, #f6f6f4);
}
.ub-kopf h2 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.ub-koerper { padding: 16px; }

/* Konto */
.ub-konto { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ub-kachel {
  flex: 1 1 120px; border: 1px solid var(--ring, rgba(0,0,0,.1));
  border-radius: 10px; padding: 9px 12px; background: var(--plane, #f6f6f4);
}
.ub-kachel .l { font-size: 10.5px; text-transform: uppercase;
                letter-spacing: .05em; color: var(--muted, #888); }
.ub-kachel .w { font-size: 20px; font-weight: 650; margin-top: 2px;
                font-variant-numeric: tabular-nums; }
.ub-kachel.hervor { border-color: var(--akzent, #2a78d6); }

/* Kalender */
.ub-monatskopf { display: flex; align-items: center; justify-content: space-between;
                 gap: 10px; margin: 4px 0 8px; }
.ub-monatsname { font-weight: 650; font-size: 14.5px; }
.ub-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ub-wochentag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
                color: var(--muted, #888); text-align: center; padding: 2px 0 4px; }
.ub-tag {
  aspect-ratio: 1 / 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  border: 1px solid transparent; border-radius: 8px;
  font-size: 13px; font-variant-numeric: tabular-nums;
  background: var(--plane, #f6f6f4); cursor: pointer;
}
.ub-tag:hover:not(.ub-frei):not(.ub-leer) { border-color: var(--akzent, #2a78d6); }
.ub-tag.ub-leer { background: transparent; cursor: default; }
/* Wochenenden und Feiertage kosten nichts – ausgegraut und nicht wählbar als
   Rand des Zeitraums, mitten im Bereich aber unschädlich. */
.ub-tag.ub-frei { color: var(--muted, #888); background: transparent; cursor: not-allowed; }
.ub-tag.ub-feiertag { background: color-mix(in srgb, var(--warn, #fab219) 16%, transparent); }
.ub-tag.ub-halb { text-decoration: line-through; }
.ub-tag.ub-imbereich { background: color-mix(in srgb, var(--akzent, #2a78d6) 20%, transparent); }
.ub-tag.ub-rand { background: var(--akzent, #2a78d6); color: #fff; font-weight: 650; }
.ub-tag.ub-belegt { outline: 2px dashed var(--ok, #1baf7a); outline-offset: -2px; }
.ub-tag .ub-mini { font-size: 8.5px; line-height: 1; opacity: .8; }

/* Formularteil */
.ub-felder { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.ub-feld { flex: 1 1 220px; }
.ub-feld label { display: block; font-size: 11px; text-transform: uppercase;
                 letter-spacing: .04em; color: var(--muted, #888); margin-bottom: 3px; }
.ub-feld select, .ub-feld input, .ub-feld textarea {
  width: 100%; font: inherit; font-size: 13px; padding: 7px 9px;
  border-radius: 8px; border: 1px solid var(--ring, rgba(0,0,0,.1));
  background: var(--surface-1, #fff); color: var(--ink, #000);
}
.ub-haken { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px;
            font-size: 13.5px; }
.ub-haken input { margin-top: 3px; }
.ub-fuss { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
           padding: 14px 16px; border-top: 1px solid var(--ring, rgba(0,0,0,.1));
           background: var(--plane, #f6f6f4); }
.ub-fuss .ub-rechts { margin-left: auto; display: flex; gap: 8px; }
.ub-meldung { font-size: 13px; }
.ub-meldung.krit { color: var(--crit, #d03b3b); }
.ub-meldung.ok { color: var(--good-text, #067306); }
.ub-liste { margin-top: 6px; font-size: 13px; }
.ub-liste .ub-eintrag { display: flex; gap: 10px; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid var(--grid, #e3e3dd); flex-wrap: wrap; }
.ub-marke { font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
            border: 1px solid var(--ring, rgba(0,0,0,.1)); color: var(--ink-2, #555); }
.ub-legende { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px;
              color: var(--muted, #888); margin-top: 8px; }