/*
 * Visueller Uhrzeit-Waehler (E-201): ein Zifferblatt zum Anklicken/Ziehen fuer
 * jedes `<input type="time">`. Direktes Tippen im Feld selbst bleibt immer
 * moeglich und ungestoert - diese Datei ergaenzt nur eine sichtbare Uhr
 * daneben, sie ersetzt das Feld nicht.
 *
 * Farben, Rundung und Schatten kommen bewusst aus den Tokens in `stil.css`
 * (`--petrol`, `--sonne`, `--rundung`, `--schatten`, ...) statt aus eigenen
 * Werten - eine zweite Palette waere ein zweiter Ort, an dem die Anmutung
 * gepflegt werden muesste.
 *
 * `uhrzeit-waehler.js` haengt sich generisch an jedes `input[type="time"]`,
 * auch an kuenftige, hier nie gesehene Felder - diese Datei kennt deshalb
 * keine einzelne Feld-Id.
 */

.uhr-feld {
  position: relative;
  display: block;
}

/* Platz fuer den kleinen Uhr-Knopf rechts im Feld, ohne dessen Breite zu aendern. */
input.uhr-eingabe {
  width: 100%;
  padding-right: 2.5rem;
}

.uhr-knopf {
  position: absolute;
  top: 50%;
  right: 0.3rem;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 2.1rem;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid transparent;
  background: none;
  color: var(--schrift-leise);
  cursor: pointer;
}
.uhr-knopf:hover { background: var(--petrol-hell); color: var(--petrol-dunkel); }
.uhr-knopf-symbol { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/*
 * Das Zifferblatt haengt an `position: fixed` (in Bildschirmkoordinaten, per
 * `uhrzeit-waehler.js` berechnet) statt an `position: absolute` - so bleibt
 * es auch dann korrekt platziert und uebereinandergelegt sichtbar, wenn das
 * Feld in einem offenen `<dialog>` steht (etwa `#nd-zeit` im
 * Schuelerdialog): Ein per `showModal()` geoeffneter Dialog rendert im
 * Top-Layer des Browsers, in dem gewoehnliche `z-index`-Werte auf
 * Seitenebene wirkungslos waeren. Als Kind des Feld-Wrappers - selbst wenn
 * dieser Wrapper innerhalb des Dialogs liegt - wird das Zifferblatt Teil
 * desselben Top-Layer-Teilbaums und liegt dadurch zuverlaessig obenauf.
 */
.uhr-popover {
  position: fixed;
  z-index: 500;
  width: 17rem;
  max-width: calc(100vw - 1.5rem);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
  padding: 0.9rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.uhr-kopf {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.15rem;
}
.uhr-teil {
  min-width: 0;
  min-height: 0;
  padding: 0.1rem 0.3rem;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: var(--schrift-anzeige);
  font-size: 2rem;
  font-weight: 600;
  color: var(--schrift-leise);
  cursor: pointer;
}
.uhr-teil[aria-pressed="true"] { color: var(--petrol); }
.uhr-teil:hover { background: var(--petrol-hell); }
.uhr-doppelpunkt {
  font-family: var(--schrift-anzeige);
  font-size: 2rem;
  font-weight: 600;
  color: var(--schrift-leise);
}
.uhr-schliessen {
  align-self: flex-start;
  margin-left: auto;
  min-width: 0;
  min-height: 0;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: none;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--schrift-leise);
  cursor: pointer;
}
.uhr-schliessen:hover { background: var(--flaeche-leise); color: var(--schrift); }

.uhr-anleitung {
  margin: 0;
  text-align: center;
  font-weight: 600;
}

.uhr-flaeche {
  position: relative;
  width: 14rem;
  height: 14rem;
  margin: 0.1rem auto 0.2rem;
}
@media (max-width: 420px) {
  .uhr-flaeche { width: 12rem; height: 12rem; }
  .uhr-popover { width: 15rem; }
}

.uhr-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.uhr-kreis { fill: var(--flaeche-leise); stroke: var(--rand); stroke-width: 1; }
.uhr-strich { stroke: var(--rand-stark); stroke-width: 1; }
.uhr-zeiger { stroke: var(--petrol); stroke-width: 2; stroke-linecap: round; }
.uhr-mitte { fill: var(--petrol); }

.uhr-zahlen { position: absolute; inset: 0; }

.uhr-zahl {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 2.35rem;
  height: 2.35rem;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid transparent;
  background: none;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--schrift);
  cursor: pointer;
}
.uhr-zahl--innen { width: 1.9rem; height: 1.9rem; font-size: 0.82em; color: var(--schrift-leise); }
.uhr-zahl:hover { background: var(--petrol-hell); }
.uhr-zahl.ist-ausgewaehlt {
  background: var(--petrol);
  border-color: var(--petrol-dunkel);
  color: #fff;
  font-weight: 700;
}
.uhr-zahl.ist-ausgewaehlt:hover { background: var(--petrol-dunkel); }

.uhr-fuss {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 0.2rem;
}
.uhr-hinweis { margin: 0; text-align: center; font-size: 0.78rem; }
.uhr-fertig { align-self: center; }

/*
 * Bewegung nur, wo `prefers-reduced-motion` sie erlaubt. Ausgewaehlte Zahl
 * und Zeiger springen bei reduzierter Bewegung direkt an ihren Platz statt
 * sich sichtbar zu veraendern - hier betrifft das nur die Hover-Uebergaenge,
 * denn Auswahl und Zeigerstellung selbst werden ohnehin ohne Animation
 * (direkt per Attribut) gesetzt.
 */
@media (prefers-reduced-motion: no-preference) {
  .uhr-zahl, .uhr-knopf, .uhr-teil, .uhr-schliessen {
    transition: background-color 120ms ease, color 120ms ease;
  }
}