.a4p-countdown,
.a4p-countdown * {
    box-sizing: border-box;
}

.a4p-countdown {
    --a4p-gap: clamp(10px, 2vw, 20px);
    width: 100%;
    font-family: inherit;
}

.a4p-countdown[hidden],
.a4p-countdown [hidden] {
    display: none !important;
}

.a4p-countdown--align-left { text-align: left; }
.a4p-countdown--align-center { text-align: center; }
.a4p-countdown--align-right { text-align: right; }

.a4p-countdown__title {
    margin-bottom: 6px;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-weight: 700;
    line-height: 1.3;
}

.a4p-countdown__subtitle {
    margin-bottom: 20px;
    font-size: .9rem;
    line-height: 1.5;
    opacity: .72;
}

.a4p-countdown__timer {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: var(--a4p-gap);
    max-width: 100%;
}

.a4p-countdown--align-left .a4p-countdown__timer { justify-content: flex-start; }
.a4p-countdown--align-right .a4p-countdown__timer { justify-content: flex-end; }

.a4p-countdown__unit {
    min-width: 78px;
}

.a4p-countdown__value,
.a4p-countdown__label {
    display: block;
}

.a4p-countdown__value {
    font-variant-numeric: tabular-nums;
}

.a4p-countdown__label {
    text-transform: uppercase;
}

.a4p-countdown__expired {
    line-height: 1.5;
    white-space: pre-line;
}

.a4p-countdown--hide-days .a4p-countdown__unit--days,
.a4p-countdown--hide-days .a4p-countdown__unit--days + .a4p-countdown__divider {
    display: none;
}

/* Template 1: Cards */
.a4p-countdown--template-1 .a4p-countdown__timer {
    gap: 18px;
}

.a4p-countdown--template-1 .a4p-countdown__unit {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 84px;
    border: 1px solid rgba(25, 35, 55, .08);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(25, 35, 55, .10);
}

.a4p-countdown--template-1 .a4p-countdown__value {
    padding: 14px 10px 5px;
    color: #6366e8;
    font-size: clamp(1.55rem, 4vw, 2rem);
    font-weight: 700;
}

.a4p-countdown--template-1 .a4p-countdown__label {
    order: -1;
    padding: 8px 8px 6px;
    border-bottom: 1px solid rgba(25, 35, 55, .08);
    color: #7a8393;
    font-size: .68rem;
    font-weight: 500;
}

.a4p-countdown--template-1 .a4p-countdown__divider {
    display: none;
}

/* Template 2: Minimal */
.a4p-countdown--template-2 .a4p-countdown__timer {
    align-items: center;
    gap: clamp(8px, 2.5vw, 28px);
}

.a4p-countdown--template-2 .a4p-countdown__unit {
    min-width: 72px;
}

.a4p-countdown--template-2 .a4p-countdown__value {
    color: #2473e8;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1;
}

.a4p-countdown--template-2 .a4p-countdown__label {
    margin-top: 10px;
    color: #748091;
    font-size: .72rem;
    font-weight: 500;
}

.a4p-countdown--template-2 .a4p-countdown__divider {
    color: #a6b7c9;
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
    transform: translateY(-9px);
}

/* Template 3: Soft cards */
.a4p-countdown--template-3 .a4p-countdown__timer {
    gap: 18px;
}

.a4p-countdown--template-3 .a4p-countdown__unit {
    min-width: 84px;
    padding: 15px 10px 12px;
    border: 1px solid rgba(16, 138, 145, .16);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(226, 248, 248, .95), rgba(243, 250, 250, .95));
    box-shadow: 0 7px 18px rgba(20, 80, 85, .07);
}

.a4p-countdown--template-3 .a4p-countdown__value {
    color: #10969c;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    line-height: 1.05;
}

.a4p-countdown--template-3 .a4p-countdown__label {
    margin-top: 6px;
    color: #648187;
    font-size: .58rem;
    letter-spacing: .03em;
}

.a4p-countdown--template-3 .a4p-countdown__divider {
    display: none;
}

/* Template 4: Neon */
.a4p-countdown--template-4 {
    padding: clamp(25px, 5vw, 50px) clamp(16px, 4vw, 40px);
    border-radius: 18px;
    background: linear-gradient(135deg, #e9e9ff 0%, #f7e3fa 52%, #ffe5ef 100%);
}

.a4p-countdown--template-4 .a4p-countdown__title {
    color: #ce2877;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    font-weight: 800;
}

.a4p-countdown--template-4 .a4p-countdown__subtitle {
    color: #7a5172;
}

.a4p-countdown--template-4 .a4p-countdown__timer {
    gap: clamp(12px, 3vw, 32px);
}

.a4p-countdown--template-4 .a4p-countdown__unit {
    min-width: clamp(82px, 15vw, 120px);
    padding: 22px 12px 18px;
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 18px;
    background: linear-gradient(180deg, #ff77b7 0%, #f72d8a 72%, #c634dc 100%);
    box-shadow: 0 0 0 3px rgba(255, 117, 191, .25), 0 16px 24px rgba(232, 44, 148, .20), 0 4px 16px rgba(161, 63, 239, .35);
}

.a4p-countdown--template-4 .a4p-countdown__value {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(117, 18, 83, .20);
}

.a4p-countdown--template-4 .a4p-countdown__label {
    margin-top: 10px;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.a4p-countdown--template-4 .a4p-countdown__divider {
    display: none;
}


/* Template 5: Bayern / Fanclub */
.a4p-countdown--template-5 {
    padding: clamp(18px, 4vw, 30px);
    border: 2px solid #b5121b;
    border-radius: 16px;
    background:
        radial-gradient(circle at top right, rgba(217, 25, 43, .10), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
    box-shadow: 0 14px 32px rgba(92, 10, 18, .10);
}

.a4p-countdown--template-5 .a4p-countdown__title {
    color: #a30f18;
    font-size: clamp(1.2rem, 2.6vw, 1.7rem);
    font-weight: 800;
    letter-spacing: .01em;
}

.a4p-countdown--template-5 .a4p-countdown__subtitle {
    color: #6b1f25;
    opacity: .9;
}

.a4p-countdown--template-5 .a4p-countdown__timer {
    gap: clamp(10px, 2vw, 18px);
    flex-wrap: wrap;
}

.a4p-countdown--template-5 .a4p-countdown__unit {
    min-width: clamp(82px, 12vw, 108px);
    padding: 14px 12px 12px;
    border: 1px solid rgba(181, 18, 27, .16);
    border-radius: 14px;
    background: linear-gradient(180deg, #d9192b 0%, #b5121b 100%);
    box-shadow: 0 12px 22px rgba(131, 14, 23, .18);
    position: relative;
    overflow: hidden;
}

.a4p-countdown--template-5 .a4p-countdown__unit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.08) 34%, rgba(255,255,255,0) 35%);
    pointer-events: none;
}

.a4p-countdown--template-5 .a4p-countdown__value {
    position: relative;
    color: #ffffff;
    font-size: clamp(1.8rem, 4.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(73, 7, 14, .25);
}

.a4p-countdown--template-5 .a4p-countdown__label {
    position: relative;
    margin-top: 8px;
    color: rgba(255,255,255,.96);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.a4p-countdown--template-5 .a4p-countdown__divider {
    display: none;
}


/* Template 6: Hirschberg */
.a4p-countdown--template-6 {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.a4p-countdown--template-6 .a4p-countdown__title {
    color: #A00022;
    font-size: clamp(1.2rem, 2.6vw, 1.7rem);
    font-weight: 800;
}

.a4p-countdown--template-6 .a4p-countdown__subtitle {
    color: #4f4f4f;
    opacity: 1;
}

.a4p-countdown--template-6 .a4p-countdown__timer {
    gap: clamp(8px, 1.6vw, 14px);
    flex-wrap: wrap;
}

.a4p-countdown--template-6 .a4p-countdown__unit {
    min-width: clamp(82px, 12vw, 108px);
    padding: 14px 12px 12px;
    border: 0;
    border-radius: 0;
    background: #A00022;
    box-shadow: none;
}

.a4p-countdown--template-6 .a4p-countdown__value {
    color: #ffffff;
    font-size: clamp(1.8rem, 4.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    text-shadow: none;
}

.a4p-countdown--template-6 .a4p-countdown__label {
    margin-top: 8px;
    color: #ffffff;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.a4p-countdown--template-6 .a4p-countdown__divider {
    display: none;
}

.a4p-countdown-error {
    display: inline-block;
    padding: .55em .75em;
    border: 1px solid rgba(190, 30, 45, .25);
    border-radius: 5px;
    background: rgba(190, 30, 45, .06);
    color: #9b1c2c;
    font-size: .875rem;
}

@media (max-width: 640px) {
    .a4p-countdown__timer {
        gap: 8px;
    }

    .a4p-countdown__unit,
    .a4p-countdown--template-1 .a4p-countdown__unit,
    .a4p-countdown--template-3 .a4p-countdown__unit {
        min-width: 0;
        flex: 1 1 0;
    }

    .a4p-countdown--template-1 .a4p-countdown__label,
    .a4p-countdown--template-3 .a4p-countdown__label,
    .a4p-countdown--template-4 .a4p-countdown__label,
    .a4p-countdown--template-5 .a4p-countdown__label,
    .a4p-countdown--template-6 .a4p-countdown__label {
        font-size: clamp(.48rem, 2.4vw, .64rem);
    }

    .a4p-countdown--template-2 .a4p-countdown__unit {
        min-width: 0;
    }

    .a4p-countdown--template-2 .a4p-countdown__divider {
        font-size: 1.25rem;
    }

    .a4p-countdown--template-4 .a4p-countdown__unit,
    .a4p-countdown--template-5 .a4p-countdown__unit,
    .a4p-countdown--template-6 .a4p-countdown__unit {
        min-width: 0;
        padding: 18px 6px 14px;
        border-radius: 13px;
    }
}

@media (max-width: 430px) {
    .a4p-countdown--template-4 {
        padding-inline: 10px;
    }

    .a4p-countdown--template-1 .a4p-countdown__timer,
    .a4p-countdown--template-3 .a4p-countdown__timer,
    .a4p-countdown--template-4 .a4p-countdown__timer,
    .a4p-countdown--template-6 .a4p-countdown__timer {
        gap: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .a4p-countdown * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}