@font-face {
    font-family: "Gobold_Bold";
    src: url('fonts/Gobold_Bold/font.woff') format('woff'), url('fonts/Gobold_Bold/font.woff2') format('woff2');
}

@font-face {
    font-family: "Good_Headline_Pro";
    src: url('fonts/Good_Headline_Pro/font.woff') format('woff'), url('fonts/Good_Headline_Pro/font.woff2') format('woff2');
}

@font-face {
    font-family: "Loerrach_Heavy";
    src: url('fonts/Loerrach_Heavy/font.woff') format('woff'), url('fonts/Loerrach_Heavy/font.woff2') format('woff2');
}

:root {
    --nav-height: 80px;
    --footer-height: 740px;
    --clr-primary: #532b84;
    --clr-secondary: #7d69af;
    --clr-third: #e6007e;
    --clr-fourth: #ffd73a;
}

html {
    height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    padding-top: var(--nav-height);
    padding-bottom: var(--footer-height);
    min-height: 100%;
    font-family: Good_Headline_Pro, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.2rem;
    position: relative;
    background-image: url(img/elemente/background.jpg);
    color: var(--clr-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: Good_Headline_Pro, sans-serif;
    text-transform: uppercase;
    font-weight: 900;
}

h1 {
    font-size: 3.5rem;
}

/* +--- Länderflaggen ---+ */
#navbarDropdownMobile {
    width: fit-content;
    margin-inline: auto;
}

.selected-flag {
    height: 2rem;
    border-radius: 100%;
}

#mobile-nav-content > * .dropdown-menu {
    width: min-content !important;
}

.dropdown-menu {
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (max-width: 992px) {
    .dropdown-menu {
        transform: translateX(-75%);
    }
}

.dropdown-toggle::after {
    display: none !important;
}

.dropdown-item {
    display: inline-flex;
    align-items: center;
}

.dropdown-item > img {
    width: 30px;
    margin-right: 10px;
}
#land-modal > * a {
    color: white !important;
    text-decoration: none !important;
}

#land-modal > * .modal-content {
    color: white;
    background-color: var(--clr-primary);
    border: 3px solid var(--clr-secondary);
    border-radius: 20px;
}
/* +--- Länderflaggen ---+ */

#anrede label:hover {
    cursor: pointer;
}

.radio-style {
    margin-left: 8px;
}

.radiomark {
    width: 20px;
    border-radius: 100%;
    height: 20px;
    display: block;
    border: 4px solid transparent;
    outline: 2px solid var(--clr-primary);
    background-color: white;
    aspect-ratio: 1/1 !important;
    transition: all .3s ease-in-out;
}

.radio-style:checked ~ .radiomark {
    background-color: var(--clr-third) !important;
    width: 20px;
    height: 20px;
    display: block;
    border: 4px solid white;
    outline: 2px solid var(--clr-third);
    background-color: green;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 5px;
}

.special-text {
    font-size: 1.4rem;
    text-transform: uppercase;
}

.gobold-bold {
    font-family: Good_Headline_Pro, sans-serif !important;
}

table {
    background-color: white !important;
}

thead {
    background-color: var(--clr-secondary);
    color: white;
}

tbody {
    color: var(--clr-primary);
}

header {
    position: relative;
}

.scroll-element {
    scroll-margin-top: calc(var(--nav-height) + 60px)
}

#validierung {
    scroll-margin-top: calc(var(--nav-height) + 120px)
}

.field-validation-error, .validation-summary-errors {
    color: var(--clr-fourth);
}

.field-validation-error {
    margin-left: 13px;
    display: inline-flex;
}

.field-validation-error:before {
    content: url('img/elemente/error-arrow.svg');
    height: 17px;
    aspect-ratio: 1/1;
    padding-right: 5px;
}

.validation-summary-errors:before {
    content: "Folgende Fehler sind aufgetreten:";
}

.validation-summary-errors > ul {
    padding-left: 1rem;
}

#gewinnUebersicht {
    color: white;
}

#gewinne .untergewinn-img {
    width: 75%;
}

.untergewinn-img > .eventim {
    width: 90%;
}

.start-hauptgewinn > * .anzahl {
    z-index: 2;
    left: 22%;
    top: 32px;
}

.start-hauptgewinn-img {
    animation: glow-violett 10s ease-in-out infinite;
}

@keyframes glow-violett {
    0% {
        filter: drop-shadow(0px 0px 0px var(--clr-third));
    }

    25% {
        filter: drop-shadow(0px 0px 15px var(--clr-third));
    }

    50% {
        filter: drop-shadow(0px 0px 0px var(--clr-third));
    }

    75% {
        filter: drop-shadow(0px 0px 15px var(--clr-third));
    }

    100% {
        filter: drop-shadow(0px 0px 0px var(--clr-third));
    }
}

#gewinne > * .untergewinn-img > .anzahl {
    padding-inline: 1rem;
    font-size: 150%;
}

.hauptgewinn {
    background-color: var(--clr-primary);
    border: 4px solid var(--clr-fourth);
    color: white;
    border-radius: 220px;
    padding-inline: 6vw;
    padding-top: 3rem;
    padding-bottom: 3rem;
    height: 300px;
}

.hauptgewinn-img-desktop {
    width: 80%;
    margin-top: -3rem;
}

.untergewinn-img {
    position: relative;
    background-color: var(--clr-primary);
    border: 4px solid var(--clr-fourth);
    border-radius: 100%;
    width: 80%;
    aspect-ratio: 1/1;
    display: inline-block;
    text-align: center;
    align-content: center;
}


.hauptgewinn > .anzahl {
    position: absolute;
    width: fit-content;
    padding-inline: 2rem;
    font-size: 300%;
    background-color: var(--clr-third);
    transform: rotate(-15deg);
    left: 2%;
    top: -10px;
}

.anzahl {
    position: absolute;
    color: white;
    width: fit-content;
    padding-inline: 1.5rem;
    font-size: 200%;
    background-color: var(--clr-third);
    transform: rotate(-15deg);
    left: 7%;
    top: -10px;
}

.anzahlhauptgewinn {
    position: absolute;
    color: white;
    width: fit-content;
    padding-inline: 1.5rem;
    font-size: 200%;
    background-color: var(--clr-third);
    transform: rotate(-15deg);
    left: 10%;
    top: -10px;
}

@media screen and (max-width: 1199px) {
    .hauptgewinn .anzahl {
        font-size: 250%;
    }
    .anzahl {
        font-size: 150%;
    }
}

@media screen and (max-width: 991px) {
    .hauptgewinn > .anzahl {
        font-size: 200%;
        left: 2%;
        top: -18px;
    }
    .start-hauptgewinn > * .anzahl {
        z-index: 2;
        left: 22%;
        top: -9px;
    }
    .untergewinn-img {
        width: 80%;
    }
    .hauptgewinn-img-desktop {
        height: 100%;
        margin-top: 0;
    }
}

@media screen and (max-width: 767px) {
    .hauptgewinn {
        border-radius: 140px;
        padding-top: 5rem;
        height: 580px;
    }
    .hauptgewinn > .anzahl {
        top: -5px;
    }
    .untergewinn-img {
        width: 80%;
    }
    .anzahl {
        font-size: 200%;
        left: 10%;
        top: 0px;
    }
    .start-hauptgewinn > * .anzahl {
        font-size: 150%;
        left: 18%;
        top: -20px;
    }
}

@media screen and (max-width: 575px) {
    .untergewinn-img {
        width: 75%;
    }
    .start-hauptgewinn > * .anzahl {
        left: 13%;
        top: -10px;
    }
}

@media screen and (max-width: 470px) {
    .anzahl {
        font-size: 150%;
        top: -15px;
    }
    .start-hauptgewinn > * .anzahl {
        top: -23px;
    }
}

#leinwand {
    background-image: url('img/elemente/leinwand.png');
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-size: contain;
    height: 440px;
}

#leinwand-video {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

#video {
    width: 47%;
    aspect-ratio: 16/9;
}

@media screen and (max-width: 1199px) {
    #video {
        width: 55%;
    }
}

@media screen and (max-width: 991px) {
    #leinwand {
        background-size: 95%;
        height: 385px;
    }
    #video {
        width: 90%;
    }
}

@media screen and (max-width: 767px) {
    #leinwand {
        height: 290px;
    }
    #leinwand-video {
        top: 11.5%;
    }
}

@media screen and (max-width: 575px) {
    #leinwand {
        height: 53vw;
    }
    #leinwand-video {
        top: 6.3vw;
    }
    #video {
        width: 95%;
    }
}

hr {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(125, 104, 171), rgba(0, 0, 0, 0));
    height: 2px;
    border: 0;
}

.disabled {
    pointer-events: none;
    background-color: #e8e8e8 !important;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

/* --- Navbar --- */
.logo > img {
    height: 50px;
    transition: all .3s ease-in-out;
}

.logo:focus-visible {
    outline: none;
}

/*#logo-mobile {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 15px;
}*/

.logo:hover > img, .logo:focus-visible > img {
    filter: drop-shadow(0px 0px 6px var(--clr-fourth));
}

.navbar {
    background-color: var(--clr-primary);
    width: 100%;
    height: var(--nav-height);
    padding-top: 10px;
    padding-bottom: 10px;
}

.nav-link {
    text-decoration: none;
    font-weight: bold;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
    transition: all .3s ease-in-out;
    font-size: 120%;
    color: white;
}

.nav-link:hover {
    color: var(--clr-third);
}

.nav-link:focus-visible {
    outline: 2px solid var(--clr-third);
}

#navbar-toggler {
    width: 4rem;
    height: 4rem;
    border: none;
    position: relative;
}

#mobile-nav-content {
    top: -100%;
    z-index: 2;
    background-color: var(--clr-secondary);
    height: auto;
    position: fixed;
    padding-top: 5.5rem;
    position: fixed;
    transition: ease-in-out 0.3s;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding-bottom: 2%;
    border-bottom: 2px solid white;
    color: white !important;
}

#mobile-nav-content .nav-link {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    font-size: 120%;
    width: fit-content;
    margin-inline: auto;
}

.nav-toggler-line {
    position: absolute;
    width: 50%;
    height: 4px;
    background-color: white;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    transition: all 0.4s;
}

#navTogglerLine1 {
    top: 30%;
}

#navTogglerLine1.selected {
    top: 24%;
    transform: rotate(-45deg) translateX(-70%);
    height: 4px;
}

#navTogglerLine2 {
    top: 50%;
}

#navTogglerLine2.selected {
    opacity: 0;
}

#navTogglerLine3 {
    top: 70%;
}

#navTogglerLine3.selected {
    top: 74%;
    transform: rotate(45deg) translateX(-70%);
    height: 4px;
}

.openNav {
    top: 0% !important;
}

/* --- Verlinkungen --- */
.link-style {
    text-decoration: underline;
    color: var(--clr-primary);
    box-shadow: inset 0 0 0 0 var(--clr-secondary);
    padding: 0 .25rem;
    margin: 0 -.25rem;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}

.link-style:hover, .link-style:focus, .link-style:active {
    box-shadow: inset 600px 0 0 0 var(--clr-secondary);
    cursor: pointer;
    color: white;
}

.link-style:focus {
    outline: 2px solid var(--clr-primary);
}

/* --- Button --- */
.btn-primary, .btn-secondary {
    background-color: var(--clr-third);
    border-radius: 22px;
    transition: all .3s ease-in-out;
    font-weight: bold;
    min-width: 15rem;
    padding-inline: 40px;
    font-family: Good_Headline_Pro, sans-serif;
    color: white;
    box-shadow: 0 0 #3b2774;
    border: 2px solid var(--clr-third);
}

.btn-primary:hover {
    background-color: var(--clr-primary);
    color: white;
    border: 2px solid var(--clr-third);
}

.btn.btn-primary:focus-visible {
    outline: 3px solid var(--clr-secondary) !important;
    background-color: var(--clr-primary);
    color: white;
    border: 2px solid var(--clr-third);
}

/* --- So Geht Es --- */
.lila-container {
    background-color: rgba(125, 105, 175, 0.75);
    border-radius: 20px;
    border: 3px solid var(--clr-secondary);
    color: white;
    font-family: Good_Headline_Pro, sans-serif;
    font-weight: lighter;
    width: 100%;
    margin-inline: auto;
    margin-top: 10rem;
    margin-bottom: 8rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

#so-geht-es > * .zahl {
    background-color: white;
    width: 45px;
    aspect-ratio: 1/1;
    border-radius: 100%;
    color: var(--clr-primary);
    align-content: center;
    text-align: center;
    margin-inline: auto;
    font-family: Good_Headline_Pro, sans-serif;
    font-size: 120%;
}

#so-geht-es > * img {
    width: 150px;
}

.lila-container > * .link-style {
    color: white;
}

.lila-container > .link-style {
    box-shadow: inset 0 0 0 0 var(--clr-fourth);
}

.lila-container .link-style:hover, .link-style:focus, .link-style:active {
    box-shadow: inset 600px 0 0 0 var(--clr-fourth) !important;
    color: var(--clr-primary) !important;
}

.lila-container .link-style:focus {
    outline: 2px solid var(--clr-fourth);
}

.lila-container > * .btn-primary:focus {
    outline: 3px solid var(--clr-fourth) !important;
}

/* --- Checkbox --- */
.control-checkbox {
    width: 1.3em;
    height: 1.3em;
    min-width: 1.3em;
    min-height: 1.3em;
    margin-right: 10px;
    background-color: white;
    border: 2px solid var(--clr-third);
    border-radius: 7px !important;
    vertical-align: middle;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position-y: 60%;
    background-position-x: 45%;
    transform: scale(1.2);
}

.control-checkbox:checked {
    transition: 300ms ease all;
    background-image: url(/Content/img/elemente/check.svg);
    background-size: 70%;
    border: 2px solid var(--clr-third);
    background-repeat: no-repeat;
    background-position-y: 55%;
    background-position-x: 50%;
    background-color: var(--clr-third);
}

.control-checkbox:focus-visible {
    outline: 3px solid var(--clr-fourth);
}

.control-checkbox:empty {
    transition: all .4s ease-in-out;
}

.checkBoxLabel {
    display: flex;
    line-height: 1.7;
}

.checkBoxLabel:hover {
    cursor: pointer;
}

/* --- Form Control --- */
.form-control {
    font-family: Good_Headline_Pro, sans-serif !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.form-control:not(.k-input-inner) {
    background-color: white;
    border-radius: 20px;
    border: 2px solid var(--clr-primary) !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus, .k-picker-solid:focus, .k-input-solid:focus-within {
    border-color: var(--clr-third) !important;
    outline: 0;
    box-shadow: 0 0.5rem 1rem rgba(230, 0, 126, 0.15) !important;
    background-color: white!important;
}

.form-control.k-input-inner:focus {
    box-shadow: none !important;
}

.k-input-button {
    background-color: var(--clr-third) !important;
    color: white !important;
    transition: all .4s ease-in-out;
    width: 40px !important;
}

.k-input-button:hover {
    background-color: var(--clr-fourth) !important;
}

.k-input-button:hover *> svg {
    color: var(--clr-primary);
}

.k-button-icon {
    transform: translateX(-15%) !important;
    color: var(--clr-primary);
}

.control-label {
    margin-bottom: 0;
    margin-left: 12px;
}

/* --- Select --- */
select option {
    font-family: sans-serif !important;
}

.select-style {
    background: url("img/elemente/selection-pfeil.svg") no-repeat right 1rem center/15px 10px;
    background-size: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

/* --- Selection Item --- */
.selection-item {
    border-radius: 5px !important;
    background-color: white;
    color: var(--clr-primary);
    transition: all .3s ease-in-out;
    max-width: 269px;
}

.selection-item:hover, .selection-item:focus {
    background-color: var(--clr-secondary);
    cursor: pointer;
    color: white;
    outline: none;
}

.selection-item.item-selected {
    background-color: var(--clr-primary);
    color: white;
    box-shadow: 0 0 5px 0.2rem rgb(254, 202, 69) !important;
}

.selection-item.item-selected > img {
    filter: drop-shadow(0px 0px 5px var(--clr-third));
}

/* --- Upload --- */
.k-upload.k-upload-async, .k-dropzone.k-upload-dropzone {
    border: none;
}

.k-upload .k-dropzone, .k-upload .k-upload-dropzone {
    flex-direction: column;
    padding: 0 !important;
}

.k-upload-button-wrap, .k-upload .k-upload-button {
    width: 100% !important;
    border-radius: 0;
    height: 200px;
}

.k-upload .k-upload-button {
    background-color: var(--clr-third) !important;
}

.k-dropzone.k-upload-dropzone, .k-upload-button-wrap {
    border-radius: 20px !important;
}

.k-dropzone > .k-upload-button-wrap > .k-button {
    border-radius: 20px;
    border: 3px solid var(--clr-third);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.k-upload.k-upload-async {
    border-radius: 20px !important;
}

.k-upload-button-wrap {
    background-color: #f0ebe8 !important;
}

.k-dropzone > .k-upload-button-wrap > .k-button:hover, .k-dropzone > .k-upload-button-wrap > .k-button:focus {
    background-color: var(--clr-primary) !important;
    border: 3px solid var(--clr-third);
}

.upload_text {
    color: white;
    font-size: 120%;
}

.k-calendar .k-calendar-th {
    color: white !important;
}

.k-calendar-footer > .k-button-flat-primary {
    color: var(--clr-primary) !important;
    font-weight: bold !important;
}

.k-calendar .k-calendar-td.k-selected .k-link {
    background-color: var(--clr-secondary) !important;
    border-color: var(--clr-secondary) !important;
    box-shadow: none !important;
}

/* +--- Gewinn Seite ---+ */
#gewinn-container {
    position: relative;
    height: 90vh;
    background-image: url(img/elemente/stage-zoomed-in-desktop.jpg);
    background-size: cover;
    background-position-x: center;
    background-position-y: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 3rem;
    padding-bottom: 3vh;
}

#gewinn-container >* h2 {
    font-size: 3rem;
}

#gewinn-anzeige {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 10%;
    color: var(--clr-primary);
    filter: drop-shadow(0px 0px 4px white);
}

#gewinn-img {
    top: 13%;
    opacity: 0;
    width: 15%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    animation: levitate-glow 4s ease-in-out infinite, zoom 3s ease-in-out;
    animation-delay: 2s;
}

#gewinn-img > img {
    margin-inline: auto;
}

@keyframes zoom {
    0% {
        transform: translateX(-50%) scale(0.5);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}

@keyframes levitate-glow {
    0% {
        opacity: 1;
        filter: drop-shadow(0px 0px 0px var(--clr-fourth));
        top: 13%;
    }

    25% {
        opacity: 1;
        filter: drop-shadow(0px 0px 6px var(--clr-fourth));
    }

    50% {
        opacity: 1;
        filter: drop-shadow(0px 0px 0px var(--clr-fourth));
        top: 15%;
    }

    75% {
        opacity: 1;
        filter: drop-shadow(0px 0px 6px var(--clr-fourth));
    }

    100% {
        opacity: 1;
        filter: drop-shadow(0px 0px 0px var(--clr-fourth));
        top: 13%;
    }
}

#gewinntext {
    opacity: 0;
    animation-name: opacity;
    animation-duration: 2s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
}

@keyframes opacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* +--- Kaufbeleg Modal ---+ */
#kaufbelegModal span, #kaufbelegModal p {
    color: black;
}

#kaufbelegModal h2 {
    color: var(--clr-primary);
}

#kaufbeleg_tipps img {
    max-height: 380px;
}

.kaufbeleg-bubble {
    min-width: 45px;
    max-width: 45px;
    position: relative;
    height: fit-content;
}

.kaufbeleg-bubbleZahl {
    position: absolute;
    top: 5%;
    right: 50%;
    transform: translate(50%);
    color: white;
}

.kaufbeleg-bubble + span {
    margin-left: 7px;
    margin-top: 2px;
}

@media screen and (max-width: 1199px) {
    #kaufbeleg_tipps img {
        max-height: 240px;
    }
}

@media screen and (max-width: 991px) {
    #kaufbeleg_tipps img {
        max-height: 280px;
    }
}

/* Hilfe */

.faqPanel {
    background-color: white;
    border-radius: 20px;
}

.faq-panel-clickable {
    background-color: var(--clr-primary);
    padding-inline: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 15px;
}

.faq-panel-clickable:focus {
    outline: 3px solid var(--clr-third);
}

.faq-panel-clickable:hover {
    cursor: pointer;
}

.faq-panel-heading {
    width: 90%;
    color: white;
    padding-right: 10px;
}

.faq-panel-icon {
    width: 40px;
    height: 40px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 0px;
    margin-left: auto;
    background-image: url("../Content/img/elemente/expandButtonBg.svg");
}

.panelIconLine {
    width: 70%;
    height: 4px;
    display: block;
    background-image: url("../Content/img/elemente/expandButtonLine.svg");
    background-size: cover;
    top: 44%;
    left: 14%;
    transition: 300ms ease-in-out;
}

.rotated {
    transform: rotate(-90deg);
    transition: 300ms ease-in-out;
}

.faq-panel-clickable {
    align-items: center;
}

.faq-panel-body {
    padding-inline: 1rem;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}

@media screen and (max-width: 991px) {
    .faq-panel-icon {
        width: 30px;
        height: 30px;
    }
}

/* --- Footer --- */
footer {
    position: absolute;
    bottom: 0;
    background-color: var(--clr-primary);
    color: white !important;
    border-top: 2px solid var(--clr-third);
    height: var(--footer-height);
}

.footer-header .title-top {
    font-size: 50px;
}

.footer-header .title-bottom {
    font-size: 35px;
}

.footer-header .title-bottom > * img {
    height: 50px !important;
}

footer > * .social {
    text-align: center;
    text-transform: uppercase;
}

footer > * .social > a {
    color: white;
}

footer > * .social > a:hover {
    text-decoration: none;
}

footer > * .social > * svg {
    fill: white;
    width: 40px;
    aspect-ratio: 1/1;
}

footer > * .social > * .gobold-bold {
    font-weight: lighter;
}

.footer-link a {
    margin-inline: 1rem;
    text-transform: uppercase;
    color: white;
    transition: all .3s ease-in-out;
}

.footer-link a:hover, .footer-link a:focus {
    color: var(--clr-fourth);
    text-decoration: none;
    outline: none;
}

footer > * .milka-logo {
    height: 60px;
}

.social-logo:hover > svg, .social-logo:focus > svg {
    fill: var(--clr-fourth);
}

.social-logo:hover, .social-logo:focus {
    color: var(--clr-fourth);
    outline: none;
}

@media screen and (max-width: 1199px) {
    #gewinn-img {
        width: 40%;
    }
}

@media screen and (max-width: 1179px) {
    #gewinn-container {
        padding-top: 1.5rem;
    }
}

@media screen and (max-width: 991px) {
    :root {
        --nav-height: 80px;
    }

    body {
        background-position: bottom;
    }

    .footer-header .title-top {
        font-size: 40px;
    }

    h1 {
        font-size: 3rem;
    }
    .hauptgewinn {
        height: 350px;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --footer-height: 840px;
    }
    .pfeil-btn {
        width: 60px;
        height: 60px;
    }
    #gewinn-container > * h2 {
        font-size: 2.3rem;
    }
    #gewinn-container > * h3 {
        font-size: 1.3rem;
    }
    #gewinn-img {
        width: 50%;
    }
    .hauptgewinn {
        height: 650px;
    }
}

@media screen and (max-width: 575px) {
    :root {
        --footer-height: 946px;
    }

    .footer-link {
        margin-inline: auto;
    }

    .lila-container {
        border-width: 3px;
    }
    .footer-header .title-top, .footer-header .title-bottom {
        font-size: 30px;
    }
    #gewinn-container {
        height: 90vh;
        background-image: url(img/elemente/stage-zoomed-in-mobile.jpg);
    }
    #gewinn-img {
        width: 60%;
    }
    .special-text {
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 550px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 527px) {
    :root {
        --footer-height: 1042px;
    }
    .hauptgewinn {
        height: 650px;
    }
}

@media screen and (max-width: 465px) {
    :root {
        --footer-height: 1100px;
    }
}

@media screen and (max-width: 400px) {
    :root {
        --footer-height: 1074px;
    }
    .footer-header .title-bottom > * img {
        height: 40px !important;
    }

    .footer-header .title-top, .footer-header .title-bottom {
        font-size: 20px;
    }

    #gewinn-img {
        width: 70%;
    }
}