.schachtimer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 0, 0, .12);
    border-left: 6px solid var(--schachtimer-farbe, #2f6fb0);
    border-radius: .5rem;
    background: #fff;
    --schachtimer-farbe: #2f6fb0;
}

.schachtimer__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.schachtimer__uhr {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
}

.schachtimer__ziffernblatt { fill: #fff; stroke: var(--schachtimer-farbe); stroke-width: 2.5; }
.schachtimer__striche line { stroke: #555; stroke-width: 1.4; stroke-linecap: round; }
.schachtimer__stunde { stroke: #222; stroke-width: 3; stroke-linecap: round; }
.schachtimer__minute { stroke: #222; stroke-width: 2; stroke-linecap: round; }
.schachtimer__mitte  { fill: var(--schachtimer-farbe); }

.schachtimer__zeit {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.schachtimer__countdown {
    margin-top: .25rem;
    font-size: 1.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    color: var(--schachtimer-farbe);
}

.schachtimer__countdown small {
    font-size: .95rem;
    font-weight: 500;
    color: #666;
    margin-right: .35rem;
}

/* letzte Minuten vor Beginn */
.schachtimer.is-bald { --schachtimer-farbe: #d97706; }
.schachtimer.is-bald .schachtimer__countdown { animation: schachtimer-puls 1s ease-in-out infinite alternate; }

/* Runde läuft */
.schachtimer.is-laeuft { --schachtimer-farbe: #15803d; }

/* keine Zeit gesetzt */
.schachtimer.is-leer { --schachtimer-farbe: #9ca3af; }
.schachtimer.is-leer .schachtimer__countdown { font-size: 1.05rem; font-weight: 500; color: #666; }

.schachtimer__push { white-space: nowrap; }
.schachtimer__push.is-aktiv { background: var(--schachtimer-farbe); border-color: var(--schachtimer-farbe); color: #fff; }

.schachtimer__hinweis {
    flex-basis: 100%;
    font-size: .875rem;
    color: #666;
}

@keyframes schachtimer-puls {
    from { opacity: 1; }
    to   { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .schachtimer.is-bald .schachtimer__countdown { animation: none; }
}