/* ----------------------------------
   Positionierbarer, responsiver Container
---------------------------------- */

#bahnhofsuhr-container {
  width: 30vw;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  position: relative;
  align-self: flex-start; /* ❗ Flexbox-Höhenstreckung ignorieren */
}

/* ----------------------------------
   Uhr (füllt den Container)
---------------------------------- */

.bahnhofsuhr {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ----------------------------------
   Zifferblatt
---------------------------------- */

.bahnhofsuhr .dial {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* ----------------------------------
   Blende (mittelpunkts-Abdeckung)
   → RELATIVE Größe (% vom Container)
---------------------------------- */

.bahnhofsuhr .blende {
  position: absolute;
  width: 8%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  pointer-events: none;
}

/* ----------------------------------
   Zeiger: Standardlayout
---------------------------------- */

.bahnhofsuhr .hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  /*Pivot: unten;*/
  transform: translateX(-50%) rotate(0deg);
  pointer-events: none;
}


/* ----------------------------------
   Zeigergrößen RESPONSIV prozentual
   → beziehen sich auf Containerhöhe
---------------------------------- */

.hour-hand {
  height: 27%;
}

.minute-hand {
  height: 45%;
}

.second-hand {
  height: 47%;
  transition: transform 0.05s linear;
}