:root {
    --birthday2024-color-white:#ffffff;
    --birthday2024-color-black:#000000;
    --birthday2024-color-blue:#0a9eff ;
    --birthday2024-breakpoint-s: 480px;
    --birthday2024-breakpoint-m: 767px;
    --birthday2024-breakpoint-l: 960px;
    --birthday2024-breakpoint-xl: 1200px;
    --birthday2024-button-font-size:20px;
}

/* Global Styles */

.campaign-component--birthday2024 {
    margin: 16px auto;
    padding: 1.5em 2em;
    font-size:12px;
    background-color: var(--birthday2024-color-white);
    z-index: 0;
    position: relative;
    text-align: center;
}

.campaign-component--birthday2024 h2,
.campaign-component--birthday2024 h3,
.campaign-component--birthday2024 h4,
.campaign-component--birthday2024 h5,
.campaign-component--birthday2024 h6 {
    font-weight: normal;
}

.campaign-component--birthday2024 p {
    font-size:12px;
}

.campaign-component--birthday2024 .campaign-component--birthday2024-noscript a {
    text-decoration: none;
}

.campaign-component--birthday2024 h2,
.campaign-component--birthday2024 h3,
.campaign-component--birthday2024 h4,
.campaign-component--birthday2024 h5,
.campaign-component--birthday2024 h6 {
    font-size:12px;
}

.campaign-component--birthday2024-button {
    border:2px solid var(--birthday2024-color-white);
    background-color: var(--birthday2024-color-blue);
    padding:10px;
    width:100%;
    text-align: center;
}

.campaign-component--birthday2024-button-text-layer {
    font-weight: 700;
    font-size:var(--birthday2024-button-font-size);
}

@media only screen and (min-width: 960px) {
    .campaign-component--birthday2024-button {
        width:fit-content;
    }
}

.campaign-component--birthday2024-button:hover,
.campaign-component--birthday2024-button:active {
    cursor: pointer;
    background: linear-gradient(to bottom, #a2acbd 5%, #3e4756 300%);
    color:var(--birthday2024-color-white);
}


.campaign-component--birthday2024 .twingle-widget {
    width: 100%;
    margin-top:1em;
}

.campaign-component--birthday2024-why {
    font-weight: bold;
}

/* Header on the Homepage */

.site-header-outer .confetti-wrapper {
   display:none;
}

.home .site-header-outer {
    position: relative;
}

.home .site-header-outer .confetti-wrapper {
    display:block;
}

/* Banner Top without Progress Bar  */

.campaign-component--birthday2024-banner-top {
    width: 100%;
    height: auto;
    position: relative;
    cursor: default;
    z-index: 300;
    font-size: 20px;
    font-weight: bold;
    margin:0px;
    padding:1px;
    z-index: 300;
    box-shadow: #000 0px 2px 5px;
}

.campaign-component--birthday2024 #banner_weg {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 30px;
}

.campaign-component--birthday2024 #banner_weg a {
    text-decoration: none;
    float: right;
    font-size: 0.7em;
    font-weight: 500;
    padding: 1.5vh 1.5vh 0 0;
}

.campaign-component--birthday2024 #banner_weg a:hover {
    font-weight: 700;
   
}

.campaign-component--birthday2024 #netzpolitik-pw:target {
    animation: pwout 1s 1 ease-in;
    animation-fill-mode: forwards;
}

@keyframes pwout {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-2000px);
    }
}


.campaign-component--birthday2024-banner-top-content {
    margin:auto;
    padding: 1px 20px 0px 20px;
}

.campaign-component--birthday2024-banner-top-content > * {
    margin-bottom:0em;
    text-align: center;
}

@media only screen and (min-width: 960px) {
    .campaign-component--birthday2024-banner-top-content {
        max-width: 840px;
        margin:auto;
    }
}

.campaign-component--birthday2024-banner-top .banner-birthday2024__button-wrapper {
    text-align: center;
}

.banner-birthday2024__button {
    text-align: center;
    margin: auto;
    display: inline-block;
    color:var(--birthday2024-color-white);
}

.campaign-component--birthday2024-heading-layer {
    font-size:3rem;
    margin-bottom:1rem;
    color:var(--birthday2024-color-black);
}

@media only screen and (min-width: 400px) {
    .campaign-component--birthday2024-heading-layer {
        font-size:4rem;
    }
}

@media only screen and (min-width: 590px) {
    .campaign-component--birthday2024-heading-layer {
        font-size:6rem;
    }
}




/* Stoerer Article */

.campaign-component--birthday2024-stoerer-article {
    position: relative;
}

.campaign-component--birthday2024-stoerer-article-section-image {
    max-width:100%;
}

.campaign-component--birthday2024-stoerer-article .campaign-component--birthday2024-button-text-color {
    display: inline-block;
    z-index:2;
    position:relative;
    color: transparent;
    background: linear-gradient(180deg, var(--birthday2024-color-blue) 0%,var(--birthday2024-color-blue) 45%, var(--birthday2024-color-violett) 46%, var(--birthday2024-color-violett) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(-1.5px 0px black) drop-shadow(0px -1.5px black) drop-shadow(1px 0 black) drop-shadow(0 1px black) drop-shadow(1px 1px black) drop-shadow(2px 2px black);
}

.campaign-component--birthday2024-stoerer-article .campaign-component--birthday2024-button-text-layer::before {
    color: var(--birthday2024-color-blue);
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
}

.campaign-component--birthday2024-stoerer-article .campaign-component--birthday2024-button-text-layer {
    color: white;
    z-index:2;
    position:relative;
    display: inline-block;
}

.campaign-component--birthday2024-stoerer-article .campaign-component--birthday2024-button-text-layer::after {
    color: var(--birthday2024-color-violett);
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
}

@media only screen and (min-width: 960px) {

    .campaign-component--birthday2024-stoerer-article-section-text > * {
        margin-bottom:10px;
    }

    .campaign-component--birthday2024-stoerer-article-section-button {
        margin-bottom:1em;
    }
    .campaign-component--birthday2024-stoerer-article .campaign-component--birthday2024-button{
        margin:auto;
        margin-bottom:10px;
    }
}


/* Stoerer Start */

@media only screen and (min-width: 880px) {
    .campaign-component--birthday2024-stoerer-start .campaign-component--birthday2024-heading-layer {
        font-size:8rem;
    }
}

@media only screen and (min-width: 960px) {

    .campaign-component--birthday2024-stoerer-start-section-text {
        margin-right:50px;
    }

    .campaign-component--birthday2024-stoerer-start-section-button {
        margin-bottom:1em;
    }
}