/* ── Alle Werte über CSS Custom Properties konfigurierbar ── */
.cdt-countdown {
    --cdt-box-bg: var(--white);
    --cdt-box-radius: 0;
    --cdt-box-padding: var(--space-s);
    --cdt-box-min-width: 90px;
    --cdt-box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    --cdt-number-size: var(--h2);
    --cdt-number-weight: 700;
    --cdt-number-color: var(--text-dark);
    --cdt-label-size: .75em;
    --cdt-label-color: var(--text-dark);
    --cdt-label-weight: 500;
    --cdt-label-transform: uppercase;
    --cdt-label-spacing: 0.1em;
    --cdt-sep-color: var(--white);
    --cdt-sep-size: 2rem;
    --cdt-gap: calc(var(--grid-gap) / 2);
    --cdt-message-size: var(--text-m);
    --cdt-message-color: var(--white);
    --cdt-title-color: var(--white);
    --cdt-title-prefix-color: var(--white);
}

/* Layout */
.cdt-countdown {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--content-gap);
}

.cdt-boxes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cdt-gap);
    flex-wrap: wrap;
}

/* Box */
.cdt-box {
    background: var(--cdt-box-bg);
    border-radius: var(--cdt-box-radius);
    padding: var(--cdt-box-padding);
    min-width: var(--cdt-box-min-width);
    box-shadow: var(--cdt-box-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cdt-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--cdt-box-shadow), 0 6px 24px rgba(0,0,0,0.1);
}

/* Zahlen */
.cdt-number {
    font-size: var(--cdt-number-size);
    font-weight: var(--cdt-number-weight);
    color: var(--cdt-number-color);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    min-width: 2ch;
    display: inline-block;
    text-align: center;
}

/* Labels */
.cdt-label {
    font-size: var(--cdt-label-size);
    color: var(--cdt-label-color);
    font-weight: var(--cdt-label-weight);
    text-transform: var(--cdt-label-transform);
    letter-spacing: var(--cdt-label-spacing);
}

/* Separator */
.cdt-separator {
    font-size: var(--cdt-sep-size);
    color: var(--cdt-sep-color);
    font-weight: 700;
    line-height: 1;
    padding-bottom: 18px;
    user-select: none;
}

/* Titel (h3) */
h3.cdt-title {
    color: var(--cdt-title-color);
    font-size: var(--h2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin: 0;
}

.cdt-title-prefix {
    color: var(--cdt-title-prefix-color);
    font-weight: 400;
}

.cdt-title-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

.cdt-title-link:hover {
    border-bottom-color: currentColor;
    opacity: 0.85;
}

/* Nachricht */
.cdt-message {
    font-size: var(--cdt-message-size);
    color: var(--cdt-message-color);
    font-weight: 500;
    padding: var(--space-s) var(--space-m);
}

/* Sanfte Zahl-Animation */
@keyframes cdt-tick {
    0%   { opacity: 0.4; transform: translateY(-4px); }
    100% { opacity: 1;   transform: translateY(0); }
}
.cdt-number.cdt-tick {
    animation: cdt-tick 0.3s ease-out;
}

/* Responsive */
@media (max-width: 480px) {
    .cdt-countdown {
        --cdt-number-size: 2rem;
        --cdt-box-min-width: 68px;
        --cdt-box-padding: 14px 10px;
        --cdt-sep-size: 1.4rem;
        --cdt-gap: 8px;
    }
}
@media (prefers-reduced-motion: reduce) { .cdt-box, .cdt-number { animation: none !important; transition: none; } .cdt-box:hover { transform: none; } }