:root {
    --jek2023-color-weiss: #ffffff;
    --jek2023-color-blue: #483aaa;
    --jek2023-color-violett: #867ade;
    --jek2023-color-lila: #ae51b6;
    --jek2023-color-gruen: #72b14b;
    --jek2023-color-braun: #934a40;
    --jek2023-color-tuerkis: #84c5cc;
    --jek2023-color-gelb: #d5df7c;
    --jek2023-color-hellbraun: #99692d;
    --jek2023-color-dunkelbraun: #675200;
    --jek2023-color-rosa: #c18178;
    --jek2023-color-dunkelgrau: #606060;
    --jek2023-color-mittelgrau: #8a8a8a;
    --jek2023-color-hellgrau: #b3b3b3;
    --jek2023-breakpoint-s: 480px;
    --jek2023-breakpoint-m: 767px;
    --jek2023-breakpoint-l: 960px;
    --jek2023-breakpoint-xl: 1200px;
    --jek2023-button-font-size:24px;
}

/*Important: We need absolute Paths for the Fonts */

@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "PixelGamerRegular";
    font-weight: 400;
    src: local("PixelGamer"), local("PixelGamer"),url("https://netzpolitik.org/wp-content/themes/liebefeld/campaigns/jek2023/fonts/pixelgamer/web-tt/pixelgamer-regular.ttf") format("ttf"), url("https://netzpolitik.org/wp-content/themes/liebefeld/campaigns/jek2023/fonts/pixelgamer/web-tt/pixelgamer-regular.woff") format("woff"), url("https://netzpolitik.org/wp-content/themes/liebefeld/campaigns/jek2023/fonts/pixelgamer/web-tt/pixelgamer-regular.woff2") format("woff2");

}

@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "PixelGamerHalf";
    font-weight: 400;
    src: local("PixelGamerHalf"), local("PixelGamerHalf"), url("https://netzpolitik.org/wp-content/themes/liebefeld/campaigns/jek2023/fonts/pixelgamer/web-tt/pixelgamer-half.ttf") format("ttf"), url("https://netzpolitik.org/wp-content/themes/liebefeld/campaigns/jek2023/fonts/pixelgamer/web-tt/pixelgamer-half.woff") format("woff"), url("https://netzpolitik.org/wp-content/themes/liebefeld/campaigns/jek2023/fonts/pixelgamer/web-tt/pixelgamer-half.woff2") format("woff2");
}

@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "PixelGamerExtrude";
    font-weight: 400;
    src: local("PixelGamerExtrude"), local("PixelGamerExtrude"), url("https://netzpolitik.org/wp-content/themes/liebefeld/campaigns/jek2023/fonts/pixelgamer/web-tt/pixelgamer-extrude.ttf") format("ttf"), url("https://netzpolitik.org/wp-content/themes/liebefeld/campaigns/jek2023/fonts/pixelgamer/web-tt/pixelgamer-extrude.woff") format("woff"), url("https://netzpolitik.org/wp-content/themes/liebefeld/campaigns/jek2023/fonts/pixelgamer/web-tt/pixelgamer-extrude.woff2") format("woff2");
}

@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "C64 Pro Regular";
    font-weight: 400;
    src: local("C64 Pro Regular"), local("C64 Pro Regular"), url("https://netzpolitik.org/wp-content/themes/liebefeld/campaigns/jek2023/fonts/c64/fonts/c64-pro-style.ttf") format("ttf"), url("https://netzpolitik.org/wp-content/themes/liebefeld/campaigns/jek2023/fonts/c64/fonts/c64-pro-style.woff") format("woff"), url("https://netzpolitik.org/wp-content/themes/liebefeld/campaigns/jek2023/fonts/c64/fonts/c64-pro-style.woff2") format("woff2");
}

@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "C64 Pro Mono";
    font-weight: 400;
    src: local("C64 Pro Mono"), local("C64 Pro Mono"), url("https://netzpolitik.org/wp-content/themes/liebefeld/campaigns/jek2023/fonts/c64/fonts/c64-pro-mono-style.ttf") format("ttf"), url("https://netzpolitik.org/wp-content/themes/liebefeld/campaigns/jek2023/fonts/c64/fonts/c64-pro-mono-style.woff") format("woff"), url("https://netzpolitik.org/wp-content/themes/liebefeld/campaigns/jek2023/fonts/c64/fonts/c64-pro-mono-style.woff2") format("woff2");
}

.campaign-component--jek2023 {
    background-color: var(--jek2023-color-blue);
    color:var(--jek2023-color-weiss);
    font-family: "C64 Pro Regular";
    margin: 16px auto;
    padding: 1.5em 2em;
    font-size:12px;
}

.campaign-component--jek2023 h2,
.campaign-component--jek2023 h3,
.campaign-component--jek2023 h4,
.campaign-component--jek2023 h5,
.campaign-component--jek2023 h6 {
    color:var(--jek2023-color-weiss);
    font-family: "C64 Pro Regular";
    font-weight: normal;
}

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

.campaign-component--jek2023 .campaign-component--jek2023-noscript a {
    text-decoration: none;
    color:var(--jek2023-color-weiss);
}

.campaign-component--jek2023-heading-color {
    display: inline-block;
    z-index:2;
    position:relative;
    font-size:29px;
    background: linear-gradient(180deg, var(--jek2023-color-blue) 0%, var(--jek2023-color-blue) 45%, var(--jek2023-color-lila) 46%, var(--jek2023-color-lila) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(-1.5px 0px var(--jek2023-color-weiss)) drop-shadow(0px -1.5px var(--jek2023-color-weiss)) drop-shadow(1px 0 var(--jek2023-color-weiss)) drop-shadow(0 1px var(--jek2023-color-weiss)) drop-shadow(1px 1px var(--jek2023-color-weiss)) drop-shadow(2px 2px var(--jek2023-color-weiss));
}

.campaign-component--jek2023-heading-layer::before {
    font-family: "PixelGamerRegular";
    color: var(--jek2023-color-blue);
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
    font-size:28px;
}

.campaign-component--jek2023-heading-layer {
    font-family: "PixelGamerExtrude";
    color: var(--jek2023-color-weiss);
    z-index:2;
    position:relative;
    display: inline-block;
    font-size:28px;
}

.campaign-component--jek2023-heading-layer::after {
    font-family: "PixelGamerHalf";
    color: var(--jek2023-color-lila);
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
    font-size:28px;
}

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

.campaign-component--jek2023 hr {
    height: 0px;
    width: 100%;
    margin: 0px auto;
    margin-bottom:25px;
    background-color: transparent;
    box-sizing: content-box;
    border: 1px dashed var(--jek2023-color-weiss);
}

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

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

.campaign-component--jek2023-button:hover,
.campaign-component--jek2023-button:active {
    cursor: pointer;
    background-color: var(--jek2023-color-violett);

}

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

.campaign-component--jek2023-button-text-layer::before {
    font-family: "PixelGamerRegular";
    color: var(--jek2023-color-blue);
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
    font-size:var(--jek2023-button-font-size);
}

.campaign-component--jek2023-button-text-layer {
    font-family: "PixelGamerExtrude";
    color: var(--jek2023-color-weiss);
    z-index:2;
    position:relative;
    display: inline-block;
    font-size:var(--jek2023-button-font-size);
}

.campaign-component--jek2023-button-text-layer::after {
    font-family: "PixelGamerHalf";
    color: var(--jek2023-color-violett);
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
    font-size:var(--jek2023-button-font-size);
}

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

/* Stoerer Footer  */

.campaign-component--jek2023-stoerer-footer-content .campaign-component--jek2023-heading-layer::before{
    font-size:40px;
}
.campaign-component--jek2023-stoerer-footer-content .campaign-component--jek2023-heading-layer{
    font-size:40px;
}
.campaign-component--jek2023-stoerer-footer-content .campaign-component--jek2023-heading-layer::after{
    font-size:40px;
}

/* Banner Top with Progress Bar  */

.campaign-component--jek2023-banner-top {
    width: 100%;
    height: auto;
    position: relative;
    cursor: default;
    z-index: 300;
    font-size: 20px;
    font-weight: bold;
    margin:0px;
    padding-bottom:1em;
    animation: leiste-kampagne 1s 1 cubic-bezier(0.17, 0.67, 0.83, 0.67);
    z-index: 300;
    box-shadow: #000 0px 2px 5px;

}

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

.campaign-component--jek2023 #banner_weg a {
    text-decoration: none;
    color: var(--jek2023-color-weiss);
    float: right;
    font-size: 0.7em;
    font-weight: 500;
    padding: 1.5vh 1.5vh 0 0;
}

.campaign-component--jek2023 #banner_weg a:hover {
    font-weight: 700;
    text-shadow: var(--jek2023-color-violett) 1px 1px 10px;
}


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

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

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

.banner-jek2023__progress-wrapper {
    margin-bottom:1em;
}

@media only screen and (min-width: 960px) {
    .campaign-component--jek2023-banner-top-content {
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        align-items:flex-end;
        max-width: 840px;
        margin:auto;
    }

    .campaign-component--jek2023-banner-top-content > * {
        margin-bottom:0em;
    }
}

.banner-jek2023__progress-bar-wrapper {
    height: 60px;
    border: 2px var(--jek2023-color-weiss) solid;
    padding: 0;
    margin-top:3px;
}

.banner-jek2023__progress-bar {
    width: 5%;
    background: var(--jek2023-color-lila);
    height: 100%;
    padding: 0 10px;
    overflow: hidden;
    animation: show-progress 0.8s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

@keyframes show-progress {
    from {
        width: 5%;
    }
    to {
        width: calc(100% - (100% - var(--progress-value-left) / 442000 * 100%));
    }
}

.banner-jek2023__progress-bar-text {
    line-break: anywhere;
    width: auto;
    opacity: 1;
    padding-top:5px;
    font-size:8px;
    position:relative;
    top: -40px;
    padding-left: 10px;
}

@media only screen and (min-width: 400px) {
    .banner-jek2023__progress-bar-text {
        font-size:12px;
    }
}

/* Stoerer Article */

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

.campaign-component--jek2023-stoerer-article .campaign-component--jek2023-button-text-color {
    font-family: "PixelGamerRegular";
    display: inline-block;
    z-index:2;
    position:relative;
    font-size:var(--jek2023-button-font-size);
    color: transparent;
    background: linear-gradient(180deg, var(--jek2023-color-blue) 0%,var(--jek2023-color-blue) 45%, var(--jek2023-color-violett) 46%, var(--jek2023-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--jek2023-stoerer-article .campaign-component--jek2023-button-text-layer::before {
    font-family: "PixelGamerRegular";
    color: var(--jek2023-color-blue);
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
    font-size:var(--jek2023-button-font-size);
}

.campaign-component--jek2023-stoerer-article .campaign-component--jek2023-button-text-layer {
    font-family: "PixelGamerExtrude";
    color: white;
    z-index:2;
    position:relative;
    display: inline-block;
    font-size:var(--jek2023-button-font-size);
}

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

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

    .campaign-component--jek2023-stoerer-article-content {
        display:flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items:flex-end;
        gap:10px 30px;
    }

    .campaign-component--jek2023-stoerer-article-section {
        flex-grow: 1;
        width: 33%;
    }

    .campaign-component--jek2023-stoerer-article-section-text {

    }

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

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


/* Stoerer Start */

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

    .campaign-component--jek2023-stoerer-start-content {
        display:flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: flex-end;
        gap:10px 30px;
    }

    .campaign-component--jek2023-stoerer-start-section {
        flex-grow: 1;
    }

    .campaign-component--jek2023-stoerer-start-section-text {
        width:55%;
    }

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

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

/* Variants */

.campaign-component--jek2023-variant .campaign-component--jek2023-heading-layer {
    color: #000;
    font-size: 45px;
    margin-bottom: 5px;
}

.campaign-component--jek2023-variant .campaign-component--jek2023-heading-layer::after {
    color: white;
    font-size: 45px;
}

.campaign-component--jek2023-variant .campaign-component--jek2023-heading-layer::before {
    color: var(--jek2023-color-lila);
    font-size: 45px;
}

@media only screen and (min-width: 400px) {
    .campaign-component--jek2023-variant .campaign-component--jek2023-heading-layer {
        font-size: 50px;
    }

    .campaign-component--jek2023-variant .campaign-component--jek2023-heading-layer::after {
        font-size: 50px;
    }

    .campaign-component--jek2023-variant .campaign-component--jek2023-heading-layer::before {
        font-size: 50px;
    }
}

@media only screen and (min-width: 500px) {
    .campaign-component--jek2023-variant .campaign-component--jek2023-heading-layer {
        font-size: 58px;
    }

    .campaign-component--jek2023-variant .campaign-component--jek2023-heading-layer::after {
        font-size: 58px;
    }

    .campaign-component--jek2023-variant .campaign-component--jek2023-heading-layer::before {
        font-size: 58px;
    }
}


.campaign-component--jek2023-variant.campaign-component--jek2023-banner-top .campaign-component--jek2023-heading-layer {
    color: #000;
    font-size: 28px;
    margin-bottom: 5px;
}

.campaign-component--jek2023-variant.campaign-component--jek2023-banner-top .campaign-component--jek2023-heading-layer::after {
    color: white;
    font-size: 28px;
}

.campaign-component--jek2023-variant.campaign-component--jek2023-banner-top .campaign-component--jek2023-heading-layer::before {
    color: var(--jek2023-color-lila);
    font-size: 28px;
}
.campaign-component--jek2023-variant {
    /* background-color: var(--jek2023-color-blue); */
    /* border-style: outset; */
    background-color: var(--jek2023-color-tuerkis);
}

.campaign-component--jek2023-variant h2,
.campaign-component--jek2023-variant h3,
.campaign-component--jek2023-variant h4,
.campaign-component--jek2023-variant h5,
.campaign-component--jek2023-variant h6,
.campaign-component--jek2023-variant p {
    /* color: var(--jek2023-color-weiss); */
    color: #000;
}

.campaign-component--jek2023-variant.campaign-component--jek2023-stoerer-footer p {
    font-size:12px;
}

@media only screen and (min-width: 960px) {
    .campaign-component--jek2023-variant .campaign-component--jek2023-stoerer-start-section-button {
        padding-bottom: 20px;
    }

    .campaign-component--jek2023-variant .campaign-component--jek2023-stoerer-article-section-text {
        width: 55%;
        margin-right: 50px;
    }

    .campaign-component--jek2023-variant .campaign-component--jek2023-stoerer-article-section-button {
        width: auto;
    }
}