/* ============================================
   Datumsauswahl – gemeinsame Datei für Verwaltung und Website

   Wird von datepicker.js erzeugt (siehe dort). Nutzt dieselben
   Gestaltungsvariablen wie style.css und panel.css, deshalb passt sich
   die Auswahl automatisch an, egal wo sie eingebunden ist.
   ============================================ */

/* --------------------------------------------
   Datumsauswahl
   Das eingebaute Feld verlangt, das Jahr Ziffer für Ziffer zu tippen.
   Hier stehen Monat und Jahr als Listen im Kopf des Kalenders.
   -------------------------------------------- */
.datepick {
  position: relative;
  display: block;
}

.datepick-feld {
  width: 100%;
  padding: 12px 42px 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--ink);
  background-color: var(--white);
  transition: border-color 0.16s, box-shadow 0.16s;
}

.datepick-feld:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(15, 33, 56, 0.08);
}

.datepick-feld.invalid {
  border-color: var(--signal);
}

.datepick-feld::placeholder {
  color: #9AA6B6;
  letter-spacing: normal;
}

.datepick-knopf {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}

.datepick-knopf:hover {
  background: var(--mist);
  color: var(--ink);
}

.datepick-knopf:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.datepick.is-offen .datepick-knopf {
  background: var(--signal);
  color: #fff;
}

/* Wochentag unter dem Feld – bei Prüfungsterminen hilfreich */
.datepick-tag {
  display: block;
  margin-top: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--slate);
  min-height: 1em;
}

/* --------------------------------------------
   Kalenderblatt
   -------------------------------------------- */
.datepick-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  width: 290px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 12px 34px rgba(15, 33, 56, 0.16);
}

.datepick.nach-oben .datepick-pop {
  top: auto;
  bottom: calc(100% + 6px);
}

.datepick-pop[hidden] {
  display: none;   /* schlägt die Anzeigeart der Klasse */
}

.datepick-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.datepick-wahl {
  display: flex;
  flex: 1;
  gap: 6px;
  min-width: 0;
}

.datepick-wahl select {
  flex: 1;
  min-width: 0;
  padding: 7px 24px 7px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  appearance: none;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}

.datepick-wahl select:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.datepick-pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s;
}

.datepick-pfeil:hover {
  background: var(--mist);
  border-color: #C9D3E0;
}

.datepick-wochentage,
.datepick-gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.datepick-wochentage span {
  padding: 4px 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--slate);
}

.datepick-tagfeld {
  aspect-ratio: 1 / 1;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.datepick-tagfeld:hover:not(:disabled) {
  background: var(--mist);
}

.datepick-tagfeld.is-fremd {
  color: #B4BECC;
  font-weight: 500;
}

.datepick-tagfeld.is-wochenende:not(.is-gewaehlt) {
  color: var(--signal);
}

.datepick-tagfeld.is-fremd.is-wochenende:not(.is-gewaehlt) {
  color: #E3A9AE;
}

/* Heute nur umrandet – die Füllung bleibt der Auswahl vorbehalten */
.datepick-tagfeld.is-heute:not(.is-gewaehlt) {
  box-shadow: inset 0 0 0 1px var(--slate);
}

.datepick-tagfeld.is-gewaehlt {
  background: var(--signal);
  color: #fff;
  font-weight: 800;
}

.datepick-tagfeld:disabled {
  color: #D3DAE3;
  cursor: not-allowed;
}

.datepick-tagfeld:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.datepick-fuss {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.datepick-text {
  padding: 5px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}

.datepick-text:hover {
  background: var(--mist);
  color: var(--signal);
}

.datepick-text:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* Auf dem Telefon größere Tippflächen und volle Feldbreite */
@media (max-width: 560px) {
  .datepick-pop {
    width: min(320px, calc(100vw - 32px));
    padding: 14px;
  }

  .datepick-tagfeld {
    min-height: 40px;
    font-size: 0.9rem;
  }

  .datepick-feld {
    font-size: 16px;   /* verhindert das Hineinzoomen unter iOS */
  }
}

@media (prefers-reduced-motion: reduce) {
  .datepick-feld,
  .datepick-knopf,
  .datepick-pfeil,
  .datepick-tagfeld {
    transition: none;
  }
}