:root {
    --clock-scale: 1.0; /* Uhrgröße skalieren klein: 0.6 - größer: 1.5 */
}

body {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background: #1e1e2f;
    font-family: Arial, sans-serif;
}

h3 {
    margin-top: 10px;
    font-weight: 200;
    color: #eee;
    letter-spacing: 3px;
}

.suninfo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; 
    margin-top: 10px;
    font-family: inherit;
    font-weight: 200;
    text-align: center;
    color: #FFFFFF;
    letter-spacing: 3px;
}

.dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.35rem;
  flex: 0 0 auto;
}

/* SR: #3CB371 (SeaGreen) */
.dot.sr { background-color: #3CB371; }

/* SS: #FF4500 (OrangeRed) */
.dot.ss { background-color: #FF4500; }

/* Uhr skalierbar */
svg {
    width: calc(380px * var(--clock-scale));
    height: calc(380px * var(--clock-scale));
}

/* Skala */
.tick {
    stroke: #aaa;
    stroke-width: 1.2;
}

.tick.hour {
    stroke: #fff;
    stroke-width: 2;
}

/* Zeiger */
.hand {
    stroke-linecap: round;
}

/* Digitalanzeige */
#digital {
    font-size: calc(2rem * var(--clock-scale));
    color: #eee;
    text-align: center;
}

#digital .time {
    letter-spacing: 4px;
}

#digital small {
    display: block;
    font-size: 0.45em;
    color: #aaa;
    line-height: 1.1;
    margin-top: 2px;
    letter-spacing: normal;
}

#today {
    font-size: calc(1.4rem * var(--clock-scale));
    color: #eee;
    letter-spacing: 4px;
}