/*
Theme Name:     HelloConcerts
Theme URI:      https://www.scinet.eu
Author:         Denise Jung
Version:        1.0
*/

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('assets/images/background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }
}


/* ========== Header-Grundlayout ========== */

.site-header {
    color: #fff;
}

/* Zentriertes Container-Layout */
.site-header .container {
    max-width: 1320px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

/* Desktop: Logo + Menü nebeneinander */
@media (min-width: 992px) {
    .site-header .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: 2rem;
        padding-right: 2rem;
        height: 250px;
    }
}

/* Logo */
.site-header .logo img {
    max-height: 100px;
    display: block;
}

/* ========== Navigation ========== */

.site-header nav a {
    color: #fff;
    text-decoration: none;
    display: inline-block;
}

.site-header nav a:hover {
    color: #ccc;
}

.site-header nav .current-menu-item > a,
.site-header nav .current_page_item > a {
    color: #F4550F;
}

.site-header nav .current-menu-item > a:hover,
.site-header nav .current_page_item > a:hover {
    color: #F4550F;
}

/* UL-Grundlayout */
.site-header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
}

/* Trenner nur auf Desktop */
@media (min-width: 992px) {
    .navbar-nav li:not(:last-child)::after {
        content: "||";
        color: #7a7a7a;
        margin-left: 1rem;
    }
}

/* Kein Trenner auf Mobil */
@media (max-width: 991.98px) {
    .navbar-nav li::after {
        content: none;
    }
}


.square-box,
.band-content-box{
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: rgba(240, 240, 240, 0.5);
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.bg-image {
    background-size: cover;
    background-position: center;
}

.page-content {
    background-color: rgba(240, 240, 240, 0.5);
}

main .page,
.mainPage {
    background-color: #fff;
    padding:0px;
}

main .main {
    padding: 25px;
}

@media (min-width: 1320px) {
    .site-header .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (max-width: 390px) {
    .band-content-box {
        background-color: #fff;
        padding: 2rem;
    }

    .spaceerMobile {
        height: 100px;
    }
    body {
        background-size: 100% 100%;
    }
}