/* Damit man leichter nachträglich die Farben ändern kann */
:root {
    --dark-blue: #06231D;
    --creme-beige: #f1f0e6;
    --light-blue: goldenrod;
    --background-blend-blue: #7d809c;
}

@font-face {
    font-family: "Alegreya";
    src: url("../fonts/Alegreya.ttf");
}

@font-face {
    font-family: "EnchantedTales";
    src: url("../fonts/enchanted_tales.otf");
}

a {
    color: var(--light-blue);
}

body {
    background-color: var(--dark-blue);
    color: var(--creme-beige);
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
        "Lucida Sans",
        Arial,
        sans-serif;
    /* font-family: "Alegreya", serif; */
    /* font-size: 1.15rem; */
    padding: 0;
    margin: 0;
    max-width: 100vw;
}

nav {
    background-color: var(--creme-beige);
}

nav>a {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem;
    text-decoration: none;
    display: flex;
    /* justify-content: center; */
    gap: 2rem;
    align-items: center;
}

.logo {
    height: 150px;
    width: 150px;
}

#ticket-button {
    background-color: var(--light-blue);
    color: var(--dark-blue) !important;
    padding: 0.75rem 1.5rem;
    border: 2px dashed var(--dark-blue);
    font-size: 1.25rem;
    cursor: pointer;
    margin-bottom: 1rem;
}


/* General Elements */
/* Credits */
.credits {
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 0.9rem;
    margin: 0.5rem;
}

.credits::before {
    content: "© ";
}

*:has(> .credits) {
    position: relative;
}

/* Credits */
/* General Elements */

/* Header Styling */
header {
    background-color: var(--creme-beige);
    color: var(--dark-blue);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-container {
    max-width: fit-content;
    margin: 0 2.5rem;
}

h2,
h3,
h1 {
    font-family: "EnchantedTales", cursive;
    color: goldenrod;
}

.title-container h1 {
    font-size: 2.25rem;
    text-align: center;
}

.subtitles {
    display: flex;
    text-align: center;
    align-items: center;
    gap: 2rem;
    justify-content: space-between;
    font-weight: 700;
}

/* Header Styling */

/* Main Styling */
main {
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    max-width: 1000px;
    margin: 5rem auto;
    padding: 0 1.5rem;
}

/* Main Styling */

/* Bildabschnitt Styling */
.bild-container {
    margin-bottom: 5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-content: center;
    gap: 2rem;
    max-width: 1330px;
}

.bild-container>div {
    height: 100%;
    width: 100%;
}

.zitat {
    font-size: 1.65rem;
    background-image: url(../img/hintergruende-web/hintergrund-zitat.webp);
    background-color: var(--background-blend-blue);
    background-blend-mode: luminosity;
    background-size: cover;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    text-align: justify;
}

.zitat>p {
    padding: 0 4rem;
}

.quickmenu {
    background-color: var(--background-blend-blue);
    background-image: url(../img/hintergruende-web/hintergrund-quickmenu.webp);
    background-blend-mode: luminosity;
    background-size: cover;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    /* Only needed for odd numbers of links */
    /* grid-template-areas:
    ". ."
    ". ."
    "bottom-long bottom-long"; */
    padding: 6rem;
}

.quickmenu>a {
    background: var(--creme-beige);
    color: var(--dark-blue);
    text-decoration: none;
    padding: 1rem;
    font-size: 1.35rem;
    text-align: center;
    border: var(--dark-blue) 3px solid;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Only needed for odd number of links */
/* .quickmenu > a:last-child {
  grid-area: bottom-long;
} */
/* Bildabschnitt Styling */

/* Hardfacts Styling */
#hardfacts {
    margin-bottom: 3.5rem;
}

#hardfacts>h2 {
    font-size: 1.75rem;
}

#hardfacts>span {
    font-weight: 700;
}

#hardfacts>p>a {
    color: var(--light-blue);
}

.karte {
    /* max-width: 50vw; */
    /* max-width: 92vw; */
    width: 700px;
    height: auto;
    aspect-ratio: 16/9;
    margin: auto;
    margin-top: 1rem;
    max-width: calc(100vw - 1rem - 3rem);
    /* border: ridge 0.5rem var(--creme-beige); */
}

/* Hardfacts Styling */

/* Dresscode Styling */
#dresscode {
    margin-bottom: 3.5rem;
}

#dresscode>h2 {
    font-size: 1.75rem;
}

#dresscode>span {
    font-weight: 700;
}

.allowed-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2rem;
    justify-content: space-between;
    gap: 1rem;
}

.allowed-grid>div {
    position: relative;
}

.allowed-grid>div>p {
    font-weight: 700;
    position: absolute;
    top: 51px;
    padding: 1.5rem;
    margin: 0;
    font-size: 1.25rem;
    color: var(--dark-blue);
    /* text-shadow: 1.5px 1.5px var(--dark-blue); */
}

.allowed-grid>*>img {
    width: 45vw;
    max-width: 500px;
    display: flex;
    margin-bottom: 0.5rem;
    /* border: ridge 0.75rem var(--creme-beige); */
}

/* Dresscode Styling */

/* Tickets Styling */
/* #tickets { */
/*     margin-bottom: 3.5rem; */
/*     display: flex; */
/*     gap: 6rem; */
/*     align-items: center; */
/* } */

#tickets>.tickets-icon {
    height: 100%;
}

#tickets>.tickets-icon>img {
    width: auto;
    /* height: auto; */
    object-fit: contain;
}

/* #tickets > div {
  max-width: 60%;
} */

#tickets>div>h2 {
    font-size: 1.75rem;
}

#tickets>div>span {
    font-weight: 700;
}

#tickets>div>a {
    color: var(--light-blue);
    font-size: 120%;
}

#tickets>div>span.supscript {
    font-style: italic;
    font-weight: normal;
    font-size: 0.85rem;
}

#tickets>div>.preis-table {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: fit-content;
    gap: 0.5rem 5rem;
    margin-bottom: 1.5rem;
}

#tickets>div>.preis-table>p {
    margin: 0;
}

/* Um die erste Row fett zu machen */
.preis-table p:nth-child(-n + 2) {
    font-weight: 700;
    font-size: 1.15rem;
}

/* Tickets Styling */

/* Gala-Menü Styling */
/* #gala-menu>div>a { */
/*     color: var(--light-blue); */
/* } */
/**/
/* #gala-menu>div>img { */
/*     max-width: 45vw; */
/*     max-height: 400px; */
/*     border: ridge 0.5rem var(--creme-beige); */
/* } */
/**/
/* #gala-menu { */
/*     margin-bottom: 3.5rem; */
/*     display: flex; */
/*     align-items: center; */
/*     gap: 2rem; */
/* } */

.gala-menu-wrapper {
    background: var(--creme-beige);
    /* width: 100vw; */
}

#gala-menu {
    max-width: 1000px;
    margin: 3rem auto;
    padding: 3rem 1.5rem;
    color: var(--dark-blue);
}

/* Gala-Menü Styling */

/* Aktivitäten Styling */
.aktiviteaten-wrapper {
    background: var(--creme-beige);
    color: var(--dark-blue);
    padding: 1rem 2rem;
    position: relative;
    outline: 0.5rem solid var(--dark-blue);
    border-radius: 0 35px;
    margin: 20px;
}

.aktiviteaten-wrapper a {
    color: var(--dark-blue);
    font-weight: 700;
}

#ballprogramm {
    background: var(--light-blue);
    width: fit-content;
    padding: 1rem;
    margin: 0;
    border: 2px dashed var(--dark-blue);
    font-size: 1.15rem;
}

#ballprogramm>h3 {
    margin: 0;
}

.tombola li {
    font-weight: 700;
}

.tombola span {
    text-decoration: underline;
}

.aktiviteaten-wrapper::before {
    content: "";
    width: 200px;
    height: 100px;
    background: var(--light-blue);
    position: absolute;
    top: -1rem;
    left: -1rem;
    z-index: -1;
}

.aktiviteaten-wrapper::after {
    content: "";
    width: 200px;
    height: 100px;
    background: var(--background-blend-blue);
    position: absolute;
    bottom: -1rem;
    right: -1rem;
    z-index: -1;
}

/* Aktivitäten Styling */

/* Kontakt Styling */
#kontakt {
    margin-top: 3.5rem;
}

#kontakt>p>a {
    color: var(--light-blue);
}

/* Kontakt Styling */

/* Call-to-Action Styling */
.call-to-action {
    margin-top: 2.5rem;
    text-align: center;
}

/* Call-to-Action Styling */

/* Sponsoren Styling  */
.sponsoren {
    background-color: var(--creme-beige);
    color: var(--dark-blue);
    padding: 3rem 0 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sponsoren>h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2rem;
    padding: 0 2rem;
}

.sponsoren-grid {
    display: grid;
    grid-column-gap: 0.5rem;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 0.5rem;
    max-width: 1100px;
    align-items: center;
    margin: 0 1rem;
}

.sponsoren-grid>a>img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* make swith-you kleiner, da es eine komische aspect-ratio hat */
#switch-you {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#switch-you>img {
    height: 75%;
}

/* Sponsoren Styling  */

/* Footer Styling */
footer {
    margin: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

footer>a {
    color: var(--light-blue);
    text-decoration: none;
    font-size: 1.25rem;
}

footer>a>img {
    width: 3rem;
}

/* Footer Styling */

@media screen and (max-width: 1024px) and (min-width: 720px) {
    .sponsoren-grid {
        display: grid;
        grid-column-gap: 0.5rem;
        grid-template-columns: repeat(3, 1fr);
        padding: 2rem;
    }

    .second-logo {
        display: none;
    }

    .title-container>h1 {
        text-align: left;
        margin-bottom: 0.5rem;
    }

    header>img {
        width: 170px;
        height: auto;
    }

    main {
        margin-bottom: 3rem;
    }

    .zitat {
        font-size: 1.25rem;
    }

    .zitat>p {
        padding: 0 1.5rem;
    }

    .quickmenu {
        gap: 1rem;
        padding: 2rem;
    }

    .quickmenu>a {
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 720px) {
    .bild-container {
        grid-template-columns: 1fr;
        margin-bottom: 1.5rem;
        max-width: 95vw;
        gap: 1.5rem;
    }

    .bild-container div:first-child {
        order: 2;
    }

    .zitat {
        font-size: 1.25rem;
    }

    .zitat>p {
        padding: 2rem;
    }

    .quickmenu {
        gap: 0.75rem;
        padding: 1rem;
        padding-bottom: 2rem;
    }

    .quickmenu>a {
        font-size: 1.25rem;
    }

    .sponsoren-grid {
        display: grid;
        grid-column-gap: 0.5rem;
        grid-template-columns: repeat(2, 1fr);
    }

    nav>a {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    nav h1 {
        font-size: 1.5rem;

    }

    nav h2 {
        font-size: 1rem;
    }

    header>img {
        width: 100px;
        height: auto;
    }

    .second-logo {
        display: none;
    }

    main {
        /* padding: 0.5rem; */
        margin: 2rem 0;
        /* margin-top: 2rem; */
    }

    footer {
        flex-direction: column;
        gap: 1rem;
    }

    footer>a {
        font-size: 1rem;
    }

    #dresscode>.allowed-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    #dresscode>.allowed-grid>*>img {
        width: calc(100vw - 1rem - 3rem);
        /* border: ridge 0.5rem var(--creme-beige); */
    }

    /* .aktiviteaten-wrapper {
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    outline: 4px dashed var(--light-blue);
  } */

    .aktiviteaten-wrapper {
        padding: 0.25rem 1rem;
        border-radius: 0 20px;
        outline: 0.4rem solid var(--dark-blue);
        margin: 0.8rem;
    }

    .aktiviteaten-wrapper::before {
        width: 150px;
        height: 75px;
        left: -0.8rem;
        top: -0.8rem;
    }

    .aktiviteaten-wrapper::after {
        width: 150px;
        height: 75px;
        right: -0.8rem;
        bottom: -0.8rem;
    }

    /* #tickets { */
    /*     position: relative; */
    /*     display: flex; */
    /*     flex-direction: column; */
    /*     gap: 2rem; */
    /* } */

    #tickets>.tickets-icon {
        width: 25%;
        aspect-ratio: 1;
        /* height: 100%; */
        height: auto;
        position: absolute;
        right: 0;
        padding: 0 1rem;
        top: -20px;
        /* margin-top: 2rem; */
    }

    #tickets>.tickets-icon>.credits {
        right: 0;
        bottom: 0;
        text-align: right;
        margin: 0 1rem;
        /* margin: 1rem; */
        font-size: 0.8rem;
        display: none;
    }

    #tickets>.tickets-icon>img {
        width: 100%;
        object-fit: contain;
        transform: rotate(-25deg);
    }

    #tickets>.tickets-icon>img {
        display: none;
    }

    #tickets>div>h2 {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    /* #tickets>div>h2::before { */
    /*     display: inline-block; */
    /*     content: ""; */
    /*     background-image: url(../img/extra/ticket.svg); */
    /*     filter: invert(100%) sepia(56%) saturate(148%) hue-rotate(334deg) brightness(97%) contrast(94%); */
    /*     width: 3rem; */
    /*     height: 3rem; */
    /*     background-repeat: no-repeat; */
    /*     background-size: contain; */
    /*     background-position: center; */
    /* } */

    /* #gala-menu { */
    /*     position: relative; */
    /*     display: block; */
    /*     margin-bottom: 5rem; */
    /* } */

    #gala-menu>div>img {
        max-width: 90vw;
    }
}