:root {
    --thirtydays-2025-yellow: #00eab9;
    --thirtydays-2025-grey: #494738;
    --thirtydays-2025-grey--darker: #3e3c30;
}

.netzpolitik-cta:has(.campaign-component--thirtydays2025-banner-stoerer){
    margin-bottom:2rem;
}

.campaign-component--thirtydays2025 {


    /* Spacing */
    --thirtydays-2025-space-none: 0px;
    --thirtydays-2025-space-3xs: 2px;
    --thirtydays-2025-space-2xs: 4px;
    --thirtydays-2025-space-xs: 8px;
    --thirtydays-2025-space-sm: 12px;
    --thirtydays-2025-space-md: 16px;
    --thirtydays-2025-space-lg: 20px;
    --thirtydays-2025-space-xl: 24px;
    --thirtydays-2025-space-2xl: 32px;
    --thirtydays-2025-space-3xl: 48px;
    --thirtydays-2025-space-4xl: 64px;
    --thirtydays-2025-space-5xl: 80px;
    --thirtydays-2025-space-6xl: 96px;

    /* Font size */
    --thirtydays-2025-font-size-ratio: 1.1;

    --thirtydays-2025-font-size-7xl: calc(
        var(--thirtydays-2025-font-size-6xl) * var(--thirtydays-2025-font-size-ratio)
    );
    --thirtydays-2025-font-size-6xl: calc(
        var(--thirtydays-2025-font-size-5xl) * var(--thirtydays-2025-font-size-ratio)
    );
    --thirtydays-2025-font-size-5xl: calc(
        var(--thirtydays-2025-font-size-4xl) * var(--thirtydays-2025-font-size-ratio)
    );
    --thirtydays-2025-font-size-4xl: calc(
        var(--thirtydays-2025-font-size-3xl) * var(--thirtydays-2025-font-size-ratio)
    );
    --thirtydays-2025-font-size-3xl: calc(
        var(--thirtydays-2025-font-size-2xl) * var(--thirtydays-2025-font-size-ratio)
    );
    --thirtydays-2025-font-size-2xl: calc(var(--thirtydays-2025-font-size-xl) * var(--thirtydays-2025-font-size-ratio));
    --thirtydays-2025-font-size-xl: calc(var(--thirtydays-2025-font-size-lg) * var(--thirtydays-2025-font-size-ratio));
    --thirtydays-2025-font-size-lg: calc(var(--thirtydays-2025-font-size-md) * var(--thirtydays-2025-font-size-ratio));
    --thirtydays-2025-font-size-md: calc(var(--thirtydays-2025-font-size-sm) * var(--thirtydays-2025-font-size-ratio));
    --thirtydays-2025-font-size-sm: calc(var(--thirtydays-2025-font-size-base) * var(--thirtydays-2025-font-size-ratio));
    --thirtydays-2025-font-size-base: 17px;
    --thirtydays-2025-font-size-xs: calc(var(--thirtydays-2025-font-size-base) / var(--thirtydays-2025-font-size-ratio));

    @media (min-width: 600px) {
        --thirtydays-2025-font-size-ratio: 1.13;
    }

    @media (min-width: 1200px) {
        --thirtydays-2025-font-size-ratio: 1.2;
    }
}

/* util */
.campaign-component--thirtydays2025__text--reverse {
    background-color: var(--thirtydays-2025-grey);
    color: var(--thirtydays-2025-yellow);
    display: inline-block;
    padding-inline: 10px;
}

/* General styles for all (banner-top, stoerer-article & stoerer-footer */
.campaign-component--thirtydays2025 {
    background-color: var(--thirtydays-2025-yellow);
    color: var(--thirtydays-2025-grey);
    padding: var(--thirtydays-2025-space-xl);
    font-weight: bold;
}

.campaign-component--thirtydays2025-section-header {
    font-size: var(--thirtydays-2025-font-size-xs);
    @media (min-width: 600px) {
        font-size: var(--thirtydays-2025-font-size-base);
    }
}

.campaign-component--thirtydays2025-section-text {
    line-height: 100%;
    font-weight: 500;
    font-size: var(--thirtydays-2025-font-size-sm);

    @media (min-width: 600px) {
        font-size: var(--thirtydays-2025-font-size-lg);
    }
}

.campaign-component--thirtydays2025-section-cta,
.campaign-component--thirtydays2025-section-title {
    font-size: var(--thirtydays-2025-font-size-md);
    @media(min-width: 451px) {
        font-size: var(--thirtydays-2025-font-size-xl);
    }
}

.campaign-component--thirtydays2025-banner-top__flex-wrapper-outer {
    max-width:1160px;
    margin:auto;
}

/* specific styles banner-top */
.campaign-component--thirtydays2025-banner-top__flex-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--thirtydays-2025-space-xs);

    @media (min-width: 650px) {
        gap: var(--thirtydays-2025-space-md);
    }

    .number-container {
        margin-inline: 4px;
    }

    @media (min-width: 960px) {
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
    }
}

.campaign-component--thirtydays2025-banner-top__section,
.campaign-component--thirtydays2025 .campaign-component--thirtydays2025-banner-top__section .number {
    font-size: var(--thirtydays-2025-font-size-sm);
    @media (min-width: 767px) {
        font-size: var(--thirtydays-2025-font-size-lg);
    }
    @media (min-width: 960px) {
        font-size: var(--thirtydays-2025-font-size-xl);
    }
}

.campaign-component--thirtydays2025 .campaign-component--thirtydays2025-banner-top__section .number {
    width: var(--thirtydays-2025-space-md);
    @media (min-width: 767px) {
        width: var(--thirtydays-2025-space-lg);
    }
    @media (min-width: 960px) {
        width: var(--thirtydays-2025-space-xl);
    }
}

.campaign-component--thirtydays2025 .campaign-component--thirtydays2025-banner-top__section .number-container {
    gap: var(--thirtydays-2025-space-3xs);
    margin-inline: var(--thirtydays-2025-space-3xs);

    @media (min-width: 960px) {
        gap: var(--thirtydays-2025-space-2xs);
        margin-inline: var(--thirtydays-2025-space-2xs);
    }
}

.campaign-component--thirtydays2025-banner-top__flex-left {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--thirtydays-2025-space-xs);

    @media (min-width: 650px) {
        gap: 0;
        flex-direction: row;
    }
}

.campaign-component--thirtydays2025-banner-top__flex-left-inner {
    display: flex;
    align-items: center;
}

.campaign-component--thirtydays2025-banner-top__section__title--mobile {
    @media (min-width: 650px) {
        display: none;
    }
}

.campaign-component--thirtydays2025-banner-top__section__title--desktop {
    display: none;
    @media (min-width: 650px) {
        display: block;
    }
}

.campaign-component--thirtydays2025-banner-top__section__cta {
    font-size: var(--thirtydays-2025-font-size-base);
    @media (min-width: 767px) {
        font-size: var(--thirtydays-2025-font-size-md);
    }
    @media (min-width: 960px) {
        font-size: var(--thirtydays-2025-font-size-lg);
    }
    a {
        display: inline-block;
    }
}

/* specific styles banner-stoerer */
.campaign-component--thirtydays2025-banner-stoerer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--thirtydays-2025-space-xs);

    @media (min-width: 650px) {
        gap: var(--thirtydays-2025-space-md);
    }

    .number-container {
        margin-inline: 4px;
    }

    @media (min-width: 960px) {
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
    }
}

.campaign-component--thirtydays2025-banner-stoerer__section,
.campaign-component--thirtydays2025 .campaign-component--thirtydays2025-banner-stoerer__section .number {
    font-size: var(--thirtydays-2025-font-size-sm);
}

.campaign-component--thirtydays2025 .campaign-component--thirtydays2025-banner-stoerer__section .number {
    width: var(--thirtydays-2025-space-md);
}

.campaign-component--thirtydays2025 .campaign-component--thirtydays2025-banner-stoerer__section .number-container {
    gap: var(--thirtydays-2025-space-3xs);
    margin-inline: var(--thirtydays-2025-space-3xs);

    @media (min-width: 960px) {
        gap: var(--thirtydays-2025-space-2xs);
        margin-inline: var(--thirtydays-2025-space-2xs);
    }
}

.campaign-component--thirtydays2025-banner-stoerer__flex-left {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--thirtydays-2025-space-xs);

    @media (min-width: 650px) {
        gap: 0;
        flex-direction: row;
    }
}

.campaign-component--thirtydays2025-banner-stoerer__flex-left-inner {
    display: flex;
    align-items: center;
}

.campaign-component--thirtydays2025-banner-stoerer__section__title--mobile {
    @media (min-width: 650px) {
        display: none;
    }
}

.campaign-component--thirtydays2025-banner-stoerer__section__title--desktop {
    display: none;
    @media (min-width: 650px) {
        display: block;
    }
}

.campaign-component--thirtydays2025-banner-stoerer__section__cta {
    font-size: var(--thirtydays-2025-font-size-base);
    a {
        display: inline-block;
    }
}



/* specific styles for stoerer-article & stoerer-footer */
.campaign-component--thirtydays2025-stoerer-article,
.campaign-component--thirtydays2025-stoerer-footer {
    .campagin-component--thirtydays2025-section-counter-money .number,
    .campagin-component--thirtydays2025-section-counter-people .number,
    .campagin-component--thirtydays2025-section-counter-days .number {
        font-size: var(--thirtydays-2025-font-size-5xl);
        width: var(--thirtydays-2025-space-xl);

        @media (min-width: 451px) {
            width: 28px;
        }

        @media (min-width: 1200px) {
            width: 44px;
        }
    }
}

.campaign-component--thirtydays2025-stoerer-article,
.campaign-component--thirtydays2025-stoerer-footer {
    .campagin-component--thirtydays2025-section-counter-money .number,
    .campagin-component--thirtydays2025-section-counter-people .number,
    .campagin-component--thirtydays2025-section-counter-days .number,
    .campagin-component--thirtydays2025-section-counter-money,
    .campagin-component--thirtydays2025-section-counter-people,
    .campagin-component--thirtydays2025-section-counter-days {
        @media(max-width: 450px) {
            font-size: var(--thirtydays-2025-font-size-3xl);
        }
    }
}

.campagin-component--thirtydays2025-section-counter {
    display: flex;
    flex-direction: column;
    gap: var(--thirtydays-2025-space-xs);
    font-size: var(--thirtydays-2025-font-size-5xl);
}

.campaign-component--thirtydays2025-stoerer-article__section,
.campaign-component--thirtydays2025-stoerer-footer__section {
    margin-block: var(--thirtydays-2025-space-md);

    @media (min-width: 1200px) {
        margin-block: var(--thirtydays-2025-space-2xl);
    }
}

/* specific styles for stoerer-article */
.campaign-component--thirtydays2025-stoerer-article {
    padding: var(--thirtydays-2025-space-xl);
    @media (min-width: 600px) {
        padding: var(--thirtydays-2025-space-xl);
    }
}


/* specific styles for stoerer-f4 */

.campaign-component--thirtydays2025-stoerer-f4__section {
    margin-bottom:0.5rem;
}

.campaign-component--thirtydays2025-stoerer-f4 .campaign-component--thirtydays2025-section-text {
    line-height: 120%;
    font-weight: 500;
    font-size: var(--thirtydays-2025-font-size-sm);
    padding-bottom:0.5rem;

    @media (min-width: 600px) {
        font-size: var(--thirtydays-2025-font-size-sm);
    }
}

.campaign-component--thirtydays2025-stoerer-f4 {
    padding: var(--thirtydays-2025-space-2xl);
    @media (min-width: 600px) {
        padding: var(--thirtydays-2025-space-2xl);
    }
}

.campaign-component--thirtydays2025-stoerer-f4 {
    .campagin-component--thirtydays2025-section-counter-money .number,
    .campagin-component--thirtydays2025-section-counter-people .number,
    .campagin-component--thirtydays2025-section-counter-days .number {
        font-size: var(--thirtydays-2025-font-size-2xl);
        width: var(--thirtydays-2025-space-xl);

        @media (min-width: 451px) {
            width: 28px;
        }

        @media (min-width: 1200px) {
            width: 29px;
        }
    }
}

.campaign-component--thirtydays2025-stoerer-f4 {
    .campagin-component--thirtydays2025-section-counter-money .number,
    .campagin-component--thirtydays2025-section-counter-people .number,
    .campagin-component--thirtydays2025-section-counter-days .number,
    .campagin-component--thirtydays2025-section-counter-money,
    .campagin-component--thirtydays2025-section-counter-people,
    .campagin-component--thirtydays2025-section-counter-days {
        @media(max-width: 450px) {
            font-size: var(--thirtydays-2025-font-size-2xl);
        }
    }
}

.campaign-component--thirtydays2025-stoerer-f4 .campagin-component--thirtydays2025-section-counter {
    display: flex;
    flex-direction: column;
    gap: var(--thirtydays-2025-space-xs);
    font-size: var(--thirtydays-2025-font-size-2xl);
}

.campaign-component--thirtydays2025-stoerer-f4__section {
    margin-bottom:2rem;
}

.campaign-component--thirtydays2025-stoerer-f4 .campaign-component--thirtydays2025-section-title {
    font-size: var(--thirtydays-2025-font-size-sm);
}

.campaign-component--thirtydays2025-stoerer-f4 .campaign-component--thirtydays2025-section-text {
    font-size: var(--thirtydays-2025-font-size-base);
}

.campaign-component--thirtydays2025-stoerer-f4 .campaign-component--thirtydays2025-section-cta {
    font-size: var(--thirtydays-2025-font-size-sm);
}


/* specifig styles for stoerer-footer */
.campaign-component--thirtydays2025-stoerer-footer {
    padding-inline: var(--thirtydays-2025-space-2xl);
    padding-block: var(--thirtydays-2025-space-sm);
    @media(min-width: 600px) {
        padding-inline: var(--thirtydays-2025-space-5xl);
        padding-block: var(--thirtydays-2025-space-md);
    }
}

/* Number & Flaps styles */
.campaign-component--thirtydays2025 {
    --flip-duration: 0.6s;
}

.campaign-component--thirtydays2025 .number-container {
    display: flex;
    gap: var(--thirtydays-2025-space-2xs);
}

.campaign-component--thirtydays2025 .number {
    position: relative;
    display: grid;
    width: 18px;
    background: linear-gradient(var(--thirtydays-2025-grey--darker) 50%, var(--thirtydays-2025-grey) 50%);
    font-size: var(--thirtydays-2025-font-size-xl);
    font-weight: bold;
    text-align: center;
    color: var(--thirtydays-2025-yellow);
    overflow:hidden;
}

.campaign-component--thirtydays2025 .number .base,
.campaign-component--thirtydays2025 .number .flap {
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

.campaign-component--thirtydays2025 .base {
    display: grid;
}

.campaign-component--thirtydays2025 .base .top,
.campaign-component--thirtydays2025 .base .bottom {
    position: relative;
    grid-row: 1 / 1;
    grid-column: 1 / 1;
}

.campaign-component--thirtydays2025 .base .top::after,
.campaign-component--thirtydays2025 .base .bottom::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
}

.campaign-component--thirtydays2025 .base .top {
    clip-path: inset(0 0 50% 0);
}

.campaign-component--thirtydays2025 .base .top::after {
    top: calc(50% - 1px);
    background-color: var(--thirtydays-2025-grey--darker);
}

.campaign-component--thirtydays2025 .base .bottom {
    clip-path: inset(50% 0 0 0);
}

.campaign-component--thirtydays2025 .base .bottom::after {
    bottom: calc(50% - 1px);
    background-color: var(--thirtydays-2025-grey);
}

.campaign-component--thirtydays2025 .flap {
    display: none;
    backface-visibility: hidden;
}

.campaign-component--thirtydays2025-banner-top .flap {
    left:3px;
    position: relative;
}

.campaign-component--thirtydays2025 .flap.show {
    display: block;
    animation: flip var(--flip-duration) ease-in-out 0s 1 normal forwards;
}

.campaign-component--thirtydays2025 .flap.front::before,
.campaign-component--thirtydays2025 .flap.back::before {
    content: attr(data-content);
}

.campaign-component--thirtydays2025 .flap.front::after,
.campaign-component--thirtydays2025 .flap.back::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
}

.campaign-component--thirtydays2025 .front {
    clip-path: inset(0 0 50% 0);
    transform: rotateX(0deg);
    background-color: var(--thirtydays-2025-grey--darker);
    /* border-radius: 1vw 1vw 0 0; */
}

.campaign-component--thirtydays2025 .front::after {
    top: calc(50% - 1px);
    background-color: var(--thirtydays-2025-grey--darker);
}

.campaign-component--thirtydays2025 .front.show {
    animation-name: flip-top;
}

.campaign-component--thirtydays2025 .back {
    clip-path: inset(50% 0 0 0);
    transform: rotateX(-180deg);
    background-color: var(--thirtydays-2025-grey);
    /* border-radius: 0 0 1vw 1vw; */
}

.campaign-component--thirtydays2025 .back::after {
    bottom: calc(50% - 1px);
    background-color: var(--thirtydays-2025-grey);
}

.campaign-component--thirtydays2025 .back.show {
    animation-name: flip-bottom;
}

@keyframes flip-top {
    from {
        transform: rotateX(0deg);
    }

    to {
        transform: rotateX(180deg);
    }
}

@keyframes flip-bottom {
    from {
        transform: rotateX(-180deg);
    }

    to {
        transform: rotateX(0deg);
    }
}

.campaign-component--thirtydays2025 p {
    margin:0;
}

#vorschaltbanner #spenden-twingle-banner {
    background: var(--thirtydays-2025-yellow);
    display:none;
}

#banner_weg {
    font-size: 3rem;
}