/* CSS ONLY CLOCK STYLES (Moved from index.php) */
.css-clock-wrapper {
    position: absolute; 
    left: 998px; 
    top: 135px; 
    width: 195px; 
    height: 30px;
    overflow: hidden; 
    text-align: center; 
    color: #fff; /* Zahlenfarbe Weiß */
    font-family: 'Segoe UI', 'Courier New', monospace; 
    font-size: 16px; 
    font-weight: bold; 
    text-shadow: 1px 1px 2px #000; /* Schatten für Lesbarkeit */
    z-index: 50; 
    display: flex; 
    justify-content: center; 
    align-items: center; /* Vertikale Zentrierung */
    
    background: transparent; /* Hintergrund komplett transparent */
    border-radius: 4px; 
    pointer-events: none;
}

.clock-col { 
    width: 22px; 
    height: 30px; 
    overflow: hidden; 
    position: relative; 
}

.clock-strip { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    text-align: center; 
    animation-timing-function: steps(var(--steps), end); 
    animation-iteration-count: infinite; 
}

.c-sep { 
    width: 10px; 
    line-height: 28px; 
} 

/* Animationsdefinitionen */
@keyframes tick-v { from { transform: translateY(0); } to { transform: translateY(-100%); } }

/* Strip für Stunden (00-23) -> 24 * 30px = 720px */
.strip-h { height: 720px; animation-name: tick-v; animation-duration: 86400s; --steps: 24; } 
/* Strip für Minuten (00-59) -> 60 * 30px = 1800px */
.strip-m { height: 1800px; animation-name: tick-v; animation-duration: 3600s; --steps: 60; }
/* Strip für Sekunden (00-59) -> 60 * 30px = 1800px */
.strip-s { height: 1800px; animation-name: tick-v; animation-duration: 60s; --steps: 60; }

.clock-num { 
    height: 30px; 
    line-height: 30px; /* Zwingt die Zahl exakt in die vertikale Mitte */
    display: block; 
    width: 100%; 
}