/*fonts*/
@font-face {
    font-display: swap;
    font-family: 'Caveat Brush';
    font-style: normal;
    font-weight: 400;
    src: local('Caveat Brush'),
    url('/assets/fonts/caveat-brush/caveat-brush-v11-latin-regular.woff2') format('woff2'),
    url('/assets/fonts/caveat-brush/caveat-brush-v11-latin-regular.eot'),
    url('/assets/fonts/caveat-brush/caveat-brush-v11-latin-regular.woff') format('woff'),
    url('/assets/fonts/caveat-brush/caveat-brush-v11-latin-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Bariol';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Bariol Regular'),
    url('/assets/fonts/bariol-regular/bariol_serif_regular-webfont.woff2') format('woff2'),
    url('/assets/fonts/bariol-regular/bariol_serif_regular-webfont.woff') format('woff'),
    url('/assets/fonts/bariol-regular/bariol_serif_regular-webfont.ttf') format('truetype'),
    url('/assets/fonts/bariol-regular/bariol_serif_regular-webfont.eot') format('embedded-opentype'),
    url('/assets/fonts/bariol-regular/bariol_serif_regular-webfont.svg#bariol_serif_regular') format('svg');
}
@font-face {
    font-family: 'Bariol';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Bariol Bold'),
    url('/assets/fonts/bariol-bold/bariol_serif_bold-webfont.woff2') format('woff2'),
    url('/assets/fonts/bariol-bold/bariol_serif_bold-webfont.woff') format('woff'),
    url('/assets/fonts/bariol-bold/bariol_serif_bold-webfont.ttf') format('truetype'),
    url('/assets/fonts/bariol-bold/bariol_serif_bold-webfont.eot') format('embedded-opentype'),
    url('/assets/fonts/bariol-bold/bariol_serif_bold-webfont.svg#bariol_serif_bold') format('svg');
}

html {
    scroll-behavior: smooth;
}
body {
    background-color: var(--color-beige);
    margin: 0;
    padding: 0;
    font-family: var(--font-base);
    font-weight: 400;
    line-height: 1.5;
    overflow-x: clip;
    max-width: 100%;
}

/*variablen*/
:root {
    --color-green:        #557528;
    --color-green-dark:   #455611;
    --color-green-light:  #7AB335;
    --color-lime:         #CBD514;
    --color-lime-light:   #C9DA57;
    --color-beige:        #EDE8D0;
    --color-white:        #ffffff;
    --color-error:        #D9534F;
    --color-border:       #707070;
    --font-base: Bariol, sans-serif;
    --font-brush: "Caveat Brush", sans-serif;
}

::selection {
    color: var(--color-green);
    background-color: var(--color-lime);
}

.bariol-serif-regular {
    font-family: var(--font-base);
    font-weight: 400;
}
.bariol-serif-bold {
    font-family: var(--font-base);
    font-weight: 700;
}
.caveat-brush-regular {
    font-family: var(--font-brush);
    font-weight: 400;
}

.lime-color {
    color: var(--color-lime-light);
}
.green-color {
    color: var(--color-green);
}
.dark-green-color {
    color: var(--color-green-dark);
}
.white-color {
    color: var(--color-white);
    font-weight: 400;
}

.green-background {
    background-color: var(--color-green);
}

.uppercase-headline {
    text-transform: uppercase;
}
.relative {
    position: relative;
}
.no-break {
    display: inline-block;
}

.margin-top-100 {
    margin-top: 35px;
}
.margin-top-50 {
    margin-top: 25px;
}

.boxed {
    max-width: 1640px;
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3, p, li, span, img, a {
    color: var(--color-green);
    text-decoration: none;
    transition: all .5s ease-in-out;
}

a:hover {
    color: var(--color-lime);
}

h1 {
    display: block;
    margin: 50px 0 0 0;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.26;
    color: var(--color-green);
    text-transform: uppercase;
    max-width: 70%;
}
h1 span {
    display: inline-block;
}

h2 {
    font-size: 20px;
    padding: 0;
    margin: 0 0 15px;
    line-height: 1.3;
    max-width: 1180px;
}

h3 {
    font-size: 20px;
    margin: 0 0 10px;
    font-weight: 400;
}

p {
    font-size: 20px;
    margin: 0;
    font-family: var(--font-base);
    font-weight: 400;
}

li {
    list-style: none;
    font-family: var(--font-base);
    font-weight: 400;
    margin: 0;
    padding: 15px 0 0;
    border-bottom: 2px solid var(--color-lime);
    max-width: 1345px;
}

.li-width {
    max-width: 1345px;
}

.button {
    padding: 5px 15px 6px;
    min-width: fit-content;
    line-height: 1;
    text-align: center;
}

.background-beige {
    background-color: var(--color-beige);
    border: 2px solid var(--color-green-dark);
}
.background-beige:hover {
    color: var(--color-green-dark);
    background: var(--color-lime);
    border: 2px solid var(--color-lime-light);
}

.background-lime {
    background-color: var(--color-lime-light);
    border: 2px solid var(--color-lime-light);
}
.background-lime:hover {
    background-color: var(--color-beige);
    border: 2px solid var(--color-green-dark);
    color: var(--color-green-dark);
}

.color-theme {
    padding: 5px 30px;
    color: var(--color-beige);
    background: linear-gradient(to right, var(--color-green), var(--color-lime));
    font-weight: 700;
    text-transform: uppercase;
    font-size: 20px;
    width: fit-content;
    margin: 0 0 50px;
}

.gradient-light-to-dark {
    padding: 0 20px 0 10px;
    background: linear-gradient(270deg, rgb(86 117 40) 0%, rgb(114 140 73) 68%, rgb(146 167 112 / .8) 95%, rgb(163 181 134 / .89) 100%);
    min-width: max-content;
}
.gradient-dark-to-light {
    padding: 0 60px 0 10px;
    background: linear-gradient(90deg, rgb(86 117 40) 0%, rgb(114 140 73) 50%, rgb(146 167 112 / .9) 70%, rgb(181 195 157 / .5) 85%, rgb(237 232 208 / .8) 95%, #fff0 100%);
    min-width: max-content;
}
.gradient-lime {
    padding: 0 60px 0 10px;
    background: linear-gradient(260deg, rgb(201 218 87) 0%, rgb(206 220 108) 68%, rgb(206 220 108) 80%, rgb(229 228 192 / .92) 100%);
    min-width: max-content;
}

/*header*/
header.home {
    margin: 0 0 100px;
}
nav {
    margin-top: 25px;
}
.nav-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 25px;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.big-img {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 25px;
    justify-content: end;
    max-width: 140px;
    height: auto;
    position: absolute;
    top: -155px;
    right: 0;
}
.img-width {
    max-width: 100%;
    position: relative;
}
.circle {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 70px;
    bottom: -80px;
}
.circle-text {
    font-size: 25px;
    text-align: center;
    line-height: 1;
}

/*main content*/
.info-text {
    max-width: 1325px;
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 40px;
}

.boxed .margin-top-50 ul,
.boxed .margin-top-100 ul {
    margin: 0;
    padding: 0;
}

.verkaufsstellen ul {
    padding-inline-start: 0;
}

/*shop*/
.shop {
    margin: 50px 0 135px 0;
    position: relative;
    overflow-x: clip;
    @media screen and (min-width: 1260px) {
        margin: 135px 0;
    }
}

.shop .shop-topline {
    background: var(--color-lime);
    padding: 10px 0;
    @media screen and (min-width: 1260px) {
        padding: 20px 0;
    }
}
.shop .shop-topline .boxed {
    overflow: visible;
}
.shop .shop-topline .boxed .ticker-clip {
    overflow: hidden;
}
.shop .shop-topline .boxed .ticker-clip span {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    display: inline-block;
    color: var(--color-white);
    animation: ticker 60s linear infinite;
    @media screen and (min-width: 1260px) {
        font-size: 42px;
    }
}
@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.shop .shop-content {
    background: var(--color-green);
    padding: 50px 0;
    @media screen and (min-width: 1260px) {
        padding: 100px 0;
    }
}
.shop .shop-content h2 {
    margin: 0 0 35px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--color-white);
}
.shop .shop-content p {
    color: var(--color-white);
    margin: 0 0 65px;
    @media screen and (min-width: 768px) {
        max-width: 400px;
    }
    @media screen and (min-width: 1024px) {
        max-width: 650px;
    }
    @media screen and (min-width: 1600px) {
        max-width: 1110px;
    }
}
.shop .shop-content a {
    color: var(--color-green);
    font-size: 24px;
    padding: 5px 35px;
    background: var(--color-white);
}
.shop .shop-content a:hover {
    color: var(--color-white);
    background: var(--color-lime);
}

.shop .shop-image-container {
    position: absolute;
    right: -10px;
    bottom: -125px;
    @media screen and (min-width: 768px) {
        right: -50px;
        top: 200px;
    }
    @media screen and (min-width: 1024px) {
        right: -100px;
    }
    @media screen and (min-width: 1360px) {
        right: -150px;
        top: -75px;
        bottom: unset;
    }
    @media screen and (min-width: 1700px) {
        right: -100px;
        top: -125px;
        bottom: unset;
    }
}
.shop .shop-image-container img {
    width: auto;
    height: 250px;
    @media screen and (min-width: 768px) {
        height: 500px;
    }
    @media screen and (min-width: 1024px) {
        height: 600px;
    }
    @media screen and (min-width: 1360px) {
        height: unset;
    }
}

.verkauf-brauereien-festwirte {
    display: flex;
    flex-direction: column;
}
.verkauf-brauereien-festwirte .verkauf-festwirte,
.verkauf-brauereien-festwirte .verkauf-brauereien {
    font-size: 16px;
    line-height: 1.2;
    @media screen and (min-width: 1260px) {
        font-size: 24px;
    }
}

/*footer*/
footer {
    margin: 50px 0 40px 0;
}
p.festival-hosts {
    max-width: 945px;
    font-size: 16px;
    margin: 0 0 25px;
    line-height: 1.2;
}

/*festwirte*/
.festival-block {
    margin-top: 150px;
}
.festival-block h2 {
    font-size: 20px;
    font-weight: 400;
    margin: 0;
}
.festival-block h1 {
    font-size: 20px;
    margin: 0 0 45px 0;
    max-width: 870px;
}
.festival-block .button {
    max-width: min-content;
    line-height: 1;
}
.festival-block .background-beige:hover {
    background-color: var(--color-lime-light);
    border: 2px solid var(--color-lime-light);
}
.festival-block .info-text {
    margin-bottom: 60px;
}

.img-with-text-block {
    margin-top: 25px;
    padding-bottom: 25px;
    border-bottom: 2px solid var(--color-lime-light);
}
.img-with-text-block:last-child {
    border-bottom: none;
}
.img-with-text-block .img-container img:hover {
    transform: scale(1.1);
}

.img-container {
    aspect-ratio: 1.59;
    min-width: 100%;
    overflow: hidden;
}
.festival-hosts-img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.festival-text {
    max-width: 985px;
    font-size: 16px;
    line-height: 1.3;
    margin: 0 0 15px;
}

.flex {
    display: flex;
    flex-direction: column;
    gap: 25px;
    min-width: 100%;
}
.flex70 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
.flex30 {
    max-width: 100%;
}

/*rechtliches*/
header.legal,
header.abstimmung {
    margin: 0 0 250px;
}

.legal-sites .boxed p,
.abstimmung-sites .boxed p {
    max-width: 1345px;
    text-align: left;
}
.legal-sites h2,
.abstimmung-sites h2 {
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 1345px;
}
.legal-sites p,
.legal-sites a,
.abstimmung-sites p,
.abstimmung-sites a {
    font-size: 18px;
}
.legal-sites p.bariol-serif-bold,
.legal-sites a.bariol-serif-bold,
.abstimmung-sites p.bariol-serif-bold,
.abstimmung-sites a.bariol-serif-bold {
    margin-bottom: -7px;
}

.legal .background-beige:hover,
.legal-sites .background-beige:hover,
.abstimmung .background-beige:hover,
.abstimmung-sites .background-beige:hover {
    background-color: var(--color-lime-light);
    border: 2px solid var(--color-lime-light);
}

.legal-sites li,
.abstimmung-sites li {
    padding: 15px 0 0;
    border-bottom: none;
    display: flex;
}
.legal-sites li:before,
.abstimmung-sites li:before {
    content: "·";
    color: var(--color-green-dark);
    margin-right: 10px;
}
.legal-sites ul,
.abstimmung-sites ul {
    padding: 0;
}

/*accordion*/
.accordion {
    margin-top: 100px;
}
.accordion-container {
    overflow: hidden;
    transition: height 0.5s ease;
    border-bottom: 2px solid var(--color-lime);
}
.accordion-container summary {
    cursor: pointer;
    padding: 20px 0;
    background: var(--color-beige);
    list-style: none;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-green);
    line-height: 1.1;
}
.accordion-container summary::-webkit-details-marker {
    display: none;
}
.accordion-container p {
    font-size: 16px;
    line-height: 1.3;
}
.accordion-container div {
    padding: 0 0 20px;
    margin-top: -15px;
    display: none;
}

/*formular*/
.formular {
    margin-top: 80px;
    font-family: var(--font-base);
}

label {
    display: none;
}
input[type="radio"] {
    display: none;
}

input[type="radio"] + a + label {
    display: inline-block;
    position: relative;
    width: fit-content;
}
input[type="radio"].error + a {
    border: 2px solid var(--color-error);
}
input[type="radio"] + a {
    margin: 0;
    padding: 2px;
    border: 2px solid transparent;
    transition: filter 0.3s ease, border 0.2s ease-in-out;
    cursor: pointer;
    max-width: 100%;
    position: relative;
    line-height: 0;
}
input[type="radio"] + a > img {
    max-width: 100%;
}

input[type="radio"]:checked + a {
    border: 2px solid var(--color-green);
}
input[type="radio"]:checked + a + label {
    background-color: var(--color-green);
    color: var(--color-lime-light);
}
input[type="radio"]:checked + a::after,
.sl-image:has(img.selected)::after {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    width: 50px;
    height: 50px;
    background-image: url('data:image/svg+xml; charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23557528" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/><path fill="%23ffffff" d="M369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>');
    background-size: cover;
    z-index: 10;
    filter: drop-shadow(0 0 2px var(--color-green));
}

.sl-image img.selected + .sl-additional-html a.button {
    background-color: var(--color-green);
    color: var(--color-lime-light);
}
.sl-additional-html a.button {
    z-index: 1;
    position: absolute;
    top: 100%;
    width: fit-content;
    right: 0;
    transform: translate(15%, -50%);
}

.formular.flex {
    row-gap: 30px;
    user-select: none;
    flex-direction: row;
    flex-wrap: wrap;
}

.formular input,
.formular textarea,
.formular button,
.formular .button,
.simple-lightbox button.select-radio,
.simple-lightbox .button.select-radio {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 0;
    border-top: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    border-bottom: 3px solid var(--color-lime);
    font-size: 18px;
    max-width: 647px;
    font-family: var(--font-base);
}
.formular input,
.formular textarea {
    background: transparent;
}

input#datenschutz {
    width: 20px;
    height: 20px;
}

::placeholder {
    font-size: 18px;
    color: var(--color-green);
    font-family: var(--font-base);
}

.formular .flex100 {
    display: flex;
    flex-wrap: nowrap;
    margin: 10px 0 30px;
}

.formular p,
.formular a {
    font-size: 18px;
    font-family: var(--font-base);
    display: inline-block;
    line-height: 1.4;
    margin: 0;
}

.formular button,
.formular .button,
.simple-lightbox button.select-radio,
.simple-lightbox .button.select-radio {
    background-color: var(--color-lime);
    color: var(--color-green);
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    padding: 10px !important;
    max-width: 153px;
    border: none;
    font-family: var(--font-base);
    transition: all .2s ease-in-out;
}
.formular button:hover,
.formular .button:hover,
.simple-lightbox button.select-radio:hover,
.simple-lightbox .button.select-radio:hover {
    background-color: var(--color-green);
    color: var(--color-lime);
}

.formular h3 {
    display: inline-block;
    padding: 5px 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-green);
    background-color: var(--color-lime);
    margin-top: 50px;
}

.formular .flex {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}
.formular .flex50 {
    width: 100%;
    flex: 0 1 100%;
    display: flex;
}
.formular .flex-image {
    width: 100%;
    flex: 0 1 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    row-gap: 20px;
}
.formular .flex100 {
    width: 100%;
    flex: 0 1 100%;
}

.formular .flex100.error-message {
    margin-bottom: 25px;
    font-size: 25px;
    font-family: var(--font-base);
}

.error {
    color: var(--color-error);
}
.formular input.error {
    border-color: var(--color-error);
}
.formular input.error::placeholder {
    color: var(--color-error);
}

.success-message {
    background-color: var(--color-lime);
    padding: 20px;
    color: var(--color-green);
    font-size: 18px !important;
}

/* Share Icons */
li.share-icons {
    list-style: none;
}
li.share-icons:before {
    content: none;
}
.share-icons a svg {
    height: 18px;
    width: auto;
    padding: 9px;
}
.share-icons a path {
    fill: var(--color-green-dark);
    transition: all .5s ease-in-out;
}
.share-icons a:hover,
.share-icons a:hover path {
    fill: var(--color-lime);
}


/*responsive — 520px*/
@media screen and (min-width: 520px) {
    .nav-flex {
        justify-content: end;
    }
    .margin-top-100 {
        margin-top: 45px;
    }
    .margin-top-50 {
        margin-top: 35px;
    }

    .gradient-dark-to-light {
        padding: 0 200px 0 10px;
    }

    h1 {
        font-size: 50px;
    }
    h2 {
        font-size: 30px;
    }
    h3 {
        font-size: 25px;
    }
    p {
        font-size: 30px;
    }

    .festival-block h1,
    .festival-block h2 {
        font-size: 30px;
    }

    .info-text {
        font-size: 26px;
    }
    li {
        font-size: 20px;
    }

    .big-img {
        max-width: 280px;
        top: -300px;
    }
    .circle {
        height: 100px;
        width: 100px;
        top: -25px;
        right: 100px;
    }

    footer {
        font-size: 24px;
    }
    p.festival-hosts {
        font-size: 24px;
        margin: 0 0 50px;
    }

    .legal-sites p,
    .legal-sites a,
    .legal-sites li,
    .abstimmung-sites p,
    .abstimmung-sites a {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .legal-sites li {
        margin: 0;
    }

    .formular .flex50 {
        width: 48%;
        flex: 0 1 48%;
    }
    .formular .flex-image {
        width: 31%;
        flex: 0 1 31%;
    }
    .formular .flex100 {
        margin: 10px 0;
    }
    .success-message {
        font-size: 25px !important;
    }
}


/*responsive — 600px*/
@media screen and (min-width: 600px) {
    .formular .flex-image {
        width: 48%;
        flex: 0 1 48%;
    }
}

/*responsive — 768px*/
@media screen and (min-width: 768px) {
    .margin-top-100 {
        margin-top: 55px;
    }
    .margin-top-50 {
        margin-top: 45px;
    }

    header.home {
        margin: 0 0 150px;
    }
    nav {
        margin-top: 45px;
    }
    .nav-flex {
        column-gap: 25px;
    }
    .button {
        font-size: 20px;
    }

    h1 {
        font-size: 90px;
        margin: 100px 0 0;
    }
    h3 {
        font-size: 35px;
    }
    p {
        font-size: 35px;
    }
    li {
        font-size: 25px;
    }

    .festival-block h2 {
        font-size: 35px;
        margin: 0;
    }

    .festival-text {
        font-size: 24px;
    }

    .gradient-dark-to-light {
        padding: 0 250px 0 10px;
    }
    .big-img {
        max-width: 350px;
        top: -400px;
    }

    .share-icons a svg {
        height: 20px;
        padding: 10px;
    }

    .formular .flex-image {
        width: 31%;
        flex: 0 1 31%;
    }
    .success-message {
        font-size: 25px !important;
    }
}

/*responsive — 1024px*/
@media screen and (min-width: 1024px) {
    .margin-top-100 {
        margin-top: 70px;
    }
    .margin-top-50 {
        margin-top: 50px;
    }

    h1 {
        font-size: 110px;
        margin: 125px 0 0;
    }
    h2 {
        font-size: 40px;
    }
    h3 {
        font-size: 42px;
    }
    p {
        font-size: 45px;
    }
    li {
        font-size: 34px;
        padding: 20px 0 0;
    }

    .festival-block {
        margin-top: 350px;
    }
    .festival-block h1,
    .festival-block h2 {
        font-size: 40px;
    }
    .festival-block .info-text {
        margin-bottom: 115px;
    }

    .color-theme {
        font-size: 48px;
        margin: 0 0 100px;
    }

    .gradient-light-to-dark {
        padding: 0 70px 0 50px;
    }
    .gradient-dark-to-light {
        padding: 0 250px 0 50px;
    }
    .gradient-lime {
        padding: 0 60px 0 50px;
    }

    .big-img {
        max-width: 450px;
        top: -500px;
    }
    .circle {
        right: 200px;
        top: -50px;
    }

    .info-text {
        font-size: 34px;
        margin: 0 0 90px;
    }

    .verkaufsstellen ul {
        margin-top: 80px;
    }
    .verkaufsstellen:first-of-type ul {
        margin-top: 0;
    }

    .verkaufsstellen p {
        font-size: 48px;
        max-width: 1130px;
        margin-bottom: 50px;
    }

    .img-with-text-block {
        margin-top: 50px;
        padding-bottom: 50px;
    }
    .img-container {
        min-width: 570px;
    }
    .flex {
        flex-direction: row;
        gap: 50px;
        align-items: center;
    }
    .flex70 {
        width: 70%;
    }
    .flex30 {
        max-width: 570px;
    }

    .accordion-container summary {
        font-size: 34px;
    }
    .accordion-container p {
        font-size: 24px !important;
    }

    .legal-sites p,
    .legal-sites a,
    .legal-sites li,
    .abstimmung-sites p,
    .abstimmung-sites a {
        font-size: 25px;
    }
    .legal-sites h2 {
        font-size: 40px;
    }

    .share-icons a svg {
        height: 25px;
        padding: 12.5px;
    }

    .formular {
        margin-top: 100px;
    }
    .formular .flex-image {
        width: 23%;
        flex: 0 1 23%;
    }
    .formular input,
    .formular textarea,
    .formular button,
    .formular .button,
    .simple-lightbox button.select-radio,
    .simple-lightbox .button.select-radio {
        margin-bottom: 25px;
        font-size: 20px;
    }
    ::placeholder {
        font-size: 20px;
    }
    .formular button,
    .formular .button,
    .simple-lightbox button.select-radio,
    .simple-lightbox .button.select-radio {
        padding: 10px 20px;
        max-width: 183px;
    }
    .success-message {
        font-size: 32px !important;
    }
}

/*responsive — 1260px*/
@media screen and (min-width: 1260px) {
    header.legal,
    header.abstimmung {
        margin: 0 0 350px;
    }

    .legal-sites p,
    .legal-sites a,
    .legal-sites li,
    .abstimmung-sites p,
    .abstimmung-sites a {
        font-size: 25px;
    }

    .share-icons a svg {
        height: 30px;
        padding: 15px;
    }

    .formular {
        margin-top: 140px;
    }
    .formular input,
    .formular textarea,
    .formular button,
    .formular .button,
    .simple-lightbox button.select-radio,
    .simple-lightbox .button.select-radio {
        padding: 21px 40px;
        margin-bottom: 25px;
        font-size: 25px;
    }
    .formular .flex-image {
        width: 18%;
        flex: 0 1 18%;
    }
    ::placeholder {
        font-size: 22px;
    }
    .formular button,
    .formular .button,
    .simple-lightbox button.select-radio,
    .simple-lightbox .button.select-radio {
        font-size: 22px;
        max-width: 253px;
    }
}

/*responsive — 1400px*/
@media screen and (min-width: 1400px) {
    ::placeholder {
        font-size: 25px;
    }
}

/*responsive — 1500px*/
@media screen and (min-width: 1500px) {
    header.home {
        margin: 0 0 360px 0;
    }

    .button {
        font-size: 30px;
        padding: 4px 25px 6px;
    }

    h1 {
        font-size: 150px;
        margin: 175px 0 0;
    }
    h2 {
        font-size: 48px;
    }
    h3 {
        font-size: 42px;
    }
    p {
        font-size: 70px;
    }

    .festival-block h1,
    .festival-block h2 {
        font-size: 48px;
    }
    .info-text {
        font-size: 42px;
    }

    .big-img {
        max-width: 940px;
        top: -770px;
        right: -70px;
    }
    .circle {
        height: 316px;
        width: 316px;
        top: 170px;
        right: 0;
    }
    .circle-text {
        font-size: 75px;
    }
}

/*responsive — 1800px*/
@media screen and (min-width: 1800px) {
    .share-icons a svg {
        height: 42px;
        padding: 21px;
    }

    .formular button,
    .formular .button,
    .simple-lightbox button.select-radio,
    .simple-lightbox .button.select-radio {
        font-size: 32px;
        max-width: 253px;
    }
}