@font-face {
    font-family: 'Lady Starlight';
    font-style: normal;
    font-weight: 400;
    src: local('Lady Starlight'), url('fonts/lady_starlight.woff') format('woff');
}

 HTML / Body */
html, body {
    scroll-behavior: auto; /* kein Smooth Scroll */
    scroll-snap-type: y mandatory; /* vertikal, erzwingt Snap */
    overflow-x: hidden; /* horizontale Scrollbar deaktiviert */
    margin: 0;
    padding: 0;
    scrollbar-gutter: stable; /* NEU: Verhindert das Wackeln beim Menü-Öffnen! */
}

@media (max-width: 768px) {
    html, body {
        scroll-snap-type: none !important;
    }
}

iframe {
    max-width: 100%;
}

/* Universal Box-Sizing Fix */
*, *::before, *::after {
    box-sizing: border-box;
}
section {
    scroll-snap-align: start; /* jede Section startet oben */
}


/* Globaler Fix: alle Fullwidth-Elemente */
section, main, footer {
    width: 100%;
    padding-left: 5vw;
    padding-right: 5vw;
    box-sizing: border-box;
}



/* Body Hintergrund */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #ffffff;
    background-color: #181818;
    position: relative;
    min-height: 100vh;
}

/* Transparentes Hintergrundbild */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/bg.jpeg') no-repeat center center;
    background-size: cover;
    opacity: 0.03;
    z-index: -1;
}

/* Header */
/* Header komplett vertikal */
/* Header & Navigation */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    z-index: 1000;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
	transition: background-color 0.3s ease, box-shadow 0.3s ease; /* sanfter Übergang */
}

/* Header nach Scroll */
#main-header.scrolled {
    background-color: rgba(0, 0, 0, 0.8); /* gewünschte Farbe nach Scroll */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Navigation-Links sichtbar auf dunklem Bild */
#main-header a {
    color: #fff;
}

/* Navigation */
#main-header nav {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#main-header nav a:hover {
    color: #830505;
}

/* UL der Links */
#main-header nav ul {
    display: flex;
    gap: 10px;               /* Abstand zwischen Links */
    flex-wrap: wrap;          /* Umbruch auf kleinen Screens */
}

/* Header nach Scroll */
#main-header.scrolled {
    background-color: rgba(0, 0, 0, 0.9);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}



#main-header.scrolled a {
    color: #fff; /* falls nötig anpassen */
}

section:first-of-type {
    padding-top: 80px; /* Höhe der Navigation */
}


/* Navigation zentriert */
nav {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Navigation Links */
.nav.links.active{
	display: flex;
}

.nav-links li a {
    color: #fff;
    text-decoration: none;
    font-family: 'Lady Starlight', sans-serif;
    font-size: 3.8vh;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

.nav-links {
    display: flex;
    gap: 15px;
    list-style: none;
}

.nav-links a:hover {
    color: #830505;               /* dezenter Hover-Effekt */
}

header nav, header nav a {
    font-family: 'Lady Starlight', sans-serif;
}

.logo h1 {
    margin: 10px 0;
    color: #830505;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 15px;
    padding: 0;
    margin: 0 0 10px 0;
}

nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    padding: 10px;
}

nav a:hover {
    color: #830505;
}

/* Hamburger nur auf kleinen Screens */
.hamburger {
    display: none;
    font-size: 2em;
    cursor: pointer;
    color: #fff;
    z-index: 1001;
	/*Neuerung*/
	background: transparent; /* Hintergrund transparent */
    border: none;
    padding: 10px 15px;
}

/* Container für Social-Icons unter Navigation */
.nav-social-links {
    display: flex;
    justify-content: center;  /* zentriert */
    gap: 15px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.nav-social-links img {
    width: 28px;
    height: auto;
	filter: grayscale(100%);  /* Icons grau */
    transition: transform 0.2s ease, filter 0.3s ease;
}

.nav-social-links img:hover {
    transform: scale(1.1);     /* kleiner Hover-Effekt */
	filter: grayscale(0%);
}

/* Responsive: Social Links unter Hamburger-Menü */
@media (max-width: 1079px) {
    .hamburger {
        display: block;
        font-size: 2em;
        cursor: pointer;
        color: #fff;
        z-index: 1001;
        background: transparent; /* Hintergrund transparent */
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: transparent; /* kein Hintergrund */
        box-shadow: none; /* Schatten entfernen, falls vorhanden */
        padding: 10px 0;
        margin: 0;
        list-style: none;
        text-align: center;
    }

        .nav-links a {
            background: transparent; /* auch Links haben keine Farbe */
        }

        .nav-links.show { /* nur wenn das Menü geöffnet wird */
            display: flex;
            background: transparent; /* transparent über Header */
            position: absolute;
            top: 60px; /* Höhe des Headers anpassen */
            left: 0;
            width: 100%;
            z-index: 9999;
        }

            .nav-links.show a {
                background: transparent; /* Links transparent */
            }

        .nav-links li {
            margin: -5px 0; /* Abstand oben/unten zwischen den Links */
        }

    nav ul.nav-links {
        display: none; /* standardmäßig versteckt */
        flex-direction: column;
        width: 50%;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5); /*Hintergrundfarbe beim HamburgerMenu*/
        border-radius: 10px;
        padding: 10px 0;
        margin: 0;
        list-style: none;
    }

        nav ul.nav-links.active {
            display: flex;
        }

    /* Social Links unter dem Menü */
    .nav-social-links {
        margin-top: 10px;
        justify-content: center;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    nav {
        flex-direction: column;
        align-items: center;
    }
}


/*DESC BAND*/
/* Full-Width Bereich */
.band-desc {
    width: 100%;
	/*old width: 100vw; calc(-50vw + 50%);*/
	margin-left: 0;
    overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.desc-container {
    width: 100%;
}

.desc-item {
    position: relative;
    width: 100%;
}

/* Hintergrundbild */
.slide-bg2 {
    width: 100%;
    height: auto;
    display: block;
}

/* Overlay-Logo */
.overlay-img2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}

/* Sichtbar */
.overlay-img2.visible {
    opacity: 1;
}

/* Mobile Anpassung */
@media (max-width: 1079px) {
    .desc-item {
        position: relative;
        width: 100%;
        height: 60vh; /* mindestens 60% der Bildschirmhöhe */
        overflow: hidden;
    }

    .slide-bg2 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw;   /* volle Breite des Viewports */
        height: 100%;   /* Container-Höhe (60vh) */
        object-fit: cover; /* Bild füllt Container, Ränder abgeschnitten */
        transform: translate(-50%, -50%);
        display: block;
    }

    /* NEU: Das Overlay bekommt das identische Grundgerüst */
    .overlay-img2 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw; /* Exakt wie slide-bg2 */
        height: 100%; /* Exakt wie slide-bg2 */
        max-width: none; /* Hebt die alte 90%-Sperre auf */
        transform: translate(-50%, -50%);
        object-fit: contain; /* WICHTIG: contain statt cover, damit nichts abgeschnitten wird */
        display: block;
    }

}

/* Sehr kleine Geräte: Smartphones unter 480px */
@media (max-width: 768px) {
    .desc-item {
        height: 50vh; /* etwas kleiner, Platz für Text/Overlay */
    }

    .slide-bg2 {
        height: 100%; /* passt sich Container-Höhe an */
        width: 100vw; /* bleibt volle Breite */
        object-fit: cover; /* gleichmäßiges Abschneiden */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /* NEU: Das Overlay bekommt das identische Grundgerüst */
    .overlay-img2 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100vw; /* Exakt wie slide-bg2 */
        height: 100%; /* Exakt wie slide-bg2 */
        max-width: none;
        transform: translate(-50%, -50%);
        object-fit: contain;
        display: block;
    }

}


/* Universal Flex-Container Fix */
.event-container, .news-social-wrapper, .band-wrapper, .gallery-albums {
    width: 100%;
    flex-wrap: wrap;
    box-sizing: border-box; /* padding innerhalb der Breite */
    overflow-x: hidden;
}

/* Universal Flex-Container Fix */
.gallery-albums {
	display: flex;
    gap: 20px;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    box-sizing: border-box; /* padding innerhalb der Breite */
    overflow-x: hidden;
}


/* Bandlogo unterhalb der Navigation */

/* Bandlogo / Slideshow */
.slideshow-container, .slide, .action-slideshow-container {
    width: 100%;
    box-sizing: border-box;
}

.band-logo-slideshow{
	margin-top: 10%;
    width: 100%;
    box-sizing: border-box;

}

/* Logo scrollt normal mit */
.band-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
    background-color: rgba(0, 0, 0, 0); /* vollständig transparent */
    border-bottom: 1px solid #830505;
}

.band-logo img {
	max-width: 80%;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.6));
    transition: transform 0.9s ease-in-out;
}

.band-logo-slideshow {
	margin-top: 0vh;
    width: 100%;
    display: flex;
    justify-content: center;
	box-shadow: 0 0 10px rgba(0,0,0.6,0.6);
}

/* Standard Desktop-Ansicht */
.slideshow-container {
    width: 100%;
    max-width: 100%; /* keine Begrenzung mehr */
    position: relative;
    overflow: hidden;
}

.slide {
    position: relative;
    width: 100%;
    height: 100%;		   /* Desktop-Höhe */
    min-height: 400px;     /* verhindert „zusammensacken“ */
    display: none;
}

.slide img:first-child {
    max-height: 80vh;
    width: 100%;
    object-fit: cover;
}
/* Hintergrund-GIF */
.slide-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* GIF wird passend geschnitten / skaliert */
}

/* Overlay-Bild */
.overlay-img {
    position: absolute;
    top: 0%;                /* Abstand von oben */
    left: 50%;
    transform: translateX(-50%);
    width: 50%;             /* Größe anpassen nach Bedarf */
    object-fit: contain;
    pointer-events: none;   /* Klicks nicht blockieren */
	opacity: 0.7;
	height: auto;
}


/* Animation / Fade */
.fade {
    animation: fadeEffect 1.5s ease-in-out;
}

@keyframes fadeEffect {
    from {opacity: .3;}
    to   {opacity: 1;}
}

/* Bilder in der Slideshow
.slideshow-container .slide img {
    width: 100%;
    height: 30vh;
    object-fit: cover;        
    display: block;
}
 */
/*
.slide {
    display: none;
    width: 100%;
    height: 100%;
}
 
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;  
    opacity: 0.7; 
    border-radius: 10px;
}*/

/* Logo als erstes Bild vollständig anzeigen */
.slideshow-container .slide:first-child img {
    object-fit: contain;
    background: transparent;
}

/* weiche Überblendung */
.fade {
    animation-name: fade;
    animation-duration: 4.2s;
}

@keyframes fade {
    from { opacity: 0.3; }
    to   { opacity: 1; }
}

/* --- Responsive Anpassungen --- */

/* Tablets / kleinere Bildschirme */
/* Responsive Anpassungen */
@media (max-width: 1024px) {
    .slideshow-container {
        width: 80%;
        height: 25vh;
    }/*
    .slideshow-container .slide img {
        height: 25vh;
    }*/
	.slideshow-container .slide {
        height: 35vh;
        min-height: 300px;
    }

}

@media (max-width: 768px) {
    .slideshow-container {
        width: 90%;
        height: 22vh;
    }/*
    .slideshow-container .slide img {
        height: 22vh;
    }*/
	.slideshow-container .slide {
        height: 45vh;
        min-height: 280px;
    }
}

@media (max-width: 480px) {
    .slideshow-container {
        width: 95%;
        height: 18vh;
    }/*
    .slideshow-container .slide img {
        height: 18vh;
    }*/

	.slideshow-container .slide {
        height: 50vh;
        min-height: 260px;
    }
}


/* SLIDESHOW FÜR LOGOS UND KOZERTBILDER*/



#action-slideshow {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
	scroll-margin-top: calc(4em + env(safe-area-inset-top));
}

/* Aktion-Track (keine Überschreitung der Breite) */
.action-track {
    display: flex;
    flex-wrap: nowrap;          /* verhindert Zeilenumbrüche */
    gap: 20px;
    animation: scroll-left 25s linear infinite;
}

/* Animation pausieren beim Hover über die Track oder ein Card */
.action-track:hover {
    animation-play-state: paused;
}

/* Optional: nur pausieren beim Hover über die Card */
.action-card:hover {
    cursor: pointer;
}

.action-slideshow-container {
    width: 100%;
    display: flex;
    position: relative;
}

.action-slide {
    min-width: 100%;
    display: flex;
    justify-content: center;
    gap: 2%;
    padding: 20px 0;
}

.action-card {
    flex: 0 0 auto;             /* feste Breite */
    width: 25%;                 /* Breite der Karte */
    padding-top: 18.75vw;        /* Höhe = Breite * 3/4 (4:3) */
    background-size: cover;
    background-position: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    transition: transform 0.3s ease;
}

/*.action-card:hover {
    transform: scale(1.05);
    *animation-play-state: paused;  Stoppt beim Hover* 
}*/

@media (hover: hover) {
    .action-card:hover {
        transform: scale(1.05);
    }
}

.action-card .overlay {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    padding: 6px 12px;
    border: 2px solid #fff;
    border-radius: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    font-family: 'VARUNA', sans-serif;
    font-weight: 500;
    text-align: center;
}

.action-card:hover .overlay {
    opacity: 1;
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Endlos-Scroll */
}

/* Tablets / kleine Laptops */
@media (max-width: 1024px) {
    .action-card {
        width: 33.33%;          /* 3 Karten pro Reihe */
        padding-top: 25%;       /* Höhe = 33.33% * 3/4 ≈ 25% */
    }
    .action-track {
        animation-duration: 15s;
    }
}

/*Smartphones */
@media (max-width: 768px) {
    .action-card {
        width: 50%;             
        padding-top: 37.5%;     
		margin: 0 auto;
    }
    .action-track {
        animation-duration: 12s;
    }
}
/*Kleinste Smartphones */
@media (max-width: 480px) {
    .action-card {
        width: 90%;             
        padding-top: 67.5%;     
        margin: 0 auto;
    }
    .action-track {
        animation-duration: 10s;
    }
}


/* Rest der Seite benutzt Minion Pro */
body, main, section, h1, h3, p, div, span, form, input, textarea, button {
    font-family: 'VARUNA', sans-serif;
	letter-spacing: 0.009em;
	font-size: 1.05em;
	line-height: 1.6;
	text-align: justify;
}

h2{
	font-family: 'VARUNA', sans-serif;
	letter-spacing: 0.09em;
	font-size: 1.55em;
	color: #830505;   /* zentraler Farbakzent Rot */
    text-align: center;
    margin-bottom: 1em;
}

main, section, footer {
    padding-left: 5vw;  /* 5% der Viewport-Breite */
    padding-right: 5vw;
    box-sizing: border-box; /* sorgt dafür, dass Padding nicht die Gesamtbreite verändert */
}

/* Footer-Text zentriert */
footer {
    font-family: 'VARUNA', sans-serif;
	letter-spacing: 0.009em;
	font-size: 1.05em;
	line-height: 1.6;
	text-align: center;
    margin: 20px 0;
}

/* Section Styles */
section {
    padding: 80px 20px 40px 20px;
}


/* News */
#news{
	margin-top: -4vh;
}

/* News-Container hervorheben */
.news-container {
    background-color: #222222; /* dunkler Rotton, leicht transparent */
    padding: 15px 20px;
    border-radius: 10px;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Einzelne News-Items */
.news-item {
    display: flex;
	flex-direction: row; /* Bild links, Text rechts */
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    background-color: rgba(0,0,0,0.3); /* leicht abgesetzter Hintergrund für Items */
    padding: 10px;
    border-radius: 8px;
    transition: transform 0.2s, background-color 0.2s;
}

.news-item:hover {
    transform: scale(1.00);
    background-color: rgba(0,0,0,0.5);
}

/* Linker Teil (Bild) etwas vergrößern */
.news-item img {
    width: 200px; /* vorher z. B. 100px */
    height: auto;
    flex-shrink: 0; /* verhindert, dass das Bild zu stark schrumpft */
    border-radius: 5px;
}

/* Textbereich nimmt den restlichen Platz ein */
.news-item .news-text {
    flex: 1;
    font-size: 1.05em;
    line-height: 1.6;
    text-align: justify;
}

/* Social Links */
.social-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 20px;
}

.social-links img {
    filter: grayscale(100%);
    transition: filter 0.3s;
}

.social-links img:hover {
    filter: none;
}


/* Wrapper für News + Social Links */
.news-social-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: flex-start;
    align-items: flex-start;
}

/* News nimmt 80% */
.news-social-wrapper .news-container {
    flex: 0 0 80%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Social Links nimmt 20% */
.news-social-wrapper .social-links {
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

/* Social-Icons */
.social-links img {
    width: 34px;
    height: auto;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.social-links img:hover {
    filter: none;
}

/* Responsives Verhalten */
@media (max-width: 900px) {
    .news-social-wrapper {
        flex-direction: column;
    }

    .news-social-wrapper .news-container,
    .news-social-wrapper .social-links {
        flex: 1 1 100%;
    }
}

/* Galerie */
.gallery-albums {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* Einzelnes Album */
.album {
    flex: 1 1 300px; /* min 300px, wächst aber flexibel */
    max-width: 400px; /* optional: begrenzt zu breite Alben auf großen Bildschirmen */
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

/* Album-Vorschaubild mit festem 4:3 Verhältnis */
.album-thumb {
    width: 100%;           /* füllt den Container */
    aspect-ratio: 4 / 3;   /* Höhe automatisch passend zur Breite */
    object-fit: cover;     /* schneidet ggf. überstehende Bereiche ab */
    border: 2px solid #ccc;
    transition: transform 0.2s, border-color 0.2s;
}

.album-thumb:hover {
    transform: scale(1.05);
    border-color: #830505;
}

/* Album-Titel */
.album-title {
    margin-top: 5px;
    font-family: 'VARUNA', sans-serif;
    font-size: 1em;
    color: #fff;
    text-align: center;
	line-height: 1.2em; /* engerer Abstand zwischen den Zeilen */
}

.album-title .thx {
    display: block;      /* zwingt den Text auf eine neue Zeile */
    font-size: 0.7em;    /* optional kleinere Schrift */
    line-height: 1.1em;  /* noch engerer Abstand */
    margin-top: 0.2em;   /* kleiner Abstand zur vorherigen Zeile */
}

/* Lightbox (wie vorher) */
#lightbox {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    flex-direction: column;
}

#lightboxImg {
    max-width: 90%;
    max-height: 80%;
    margin-bottom: 15px;
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}

.lightbox-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
}

.lightbox-nav button {
    background: rgba(131,5,5,0.7);
    border: none;
    color: white;
    font-size: 2em;
    cursor: pointer;
    padding: 5px 15px;
    border-radius: 5px;
    transition: 0.3s ease;
}

.lightbox-nav button:hover {
    background: rgba(131,5,5,1);
}


/* Bandinfo-Text hervorheben */
.band-description {
    background-color: #222222; /* dunkler Rotton, leicht transparent */
    padding: 5px 20px;
    border-radius: 10px;
    margin: 0px 0;
    line-height: 1.6;
    text-align: justify;
    font-size: 1.0em;
	height:100%;
}

/* Bandbereich Wrapper */
.band-wrapper {
    display: flex;
    flex-wrap: wrap;            /* Damit Text/Bilder bei kleineren Bildschirmen umbrechen */
    justify-content: center;     /* Zentriert den gesamten Wrapper horizontal */
    gap: 10px;                   /* Abstand zwischen Text und Bildern */
    padding: 0 10px;             /* Puffer links und rechts */
    box-sizing: border-box;
}


/* Textbereich: flexibel, aber nicht größer als vorgesehen */
.band-text {
    flex: 1 1 40%;           /* feste 45% Breite */
    min-width: 300px;        /* Mindestbreite */
	max-width: 600px;
}

/* Bilderbereich: feste Breite, zentriert innerhalb der Spalte */
.band-images {
    flex: 1 1 60%;           /* feste 55% Breite */
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;     /* zentriert die Bildreihen */
	max-width: 600px;            /* Optional: max-Breite */
}

/* Bildreihen: zentriert und fixiertes Verhältnis */
.band-images .image-row {
    display: flex;
    gap: 10px; /* Abstand zwischen den Bildern */
    justify-content: space-between; /* gleichmäßige Verteilung */
}

/* Bilder: skalieren prozentual, immer sichtbar */
.band-images .image-row img {
    width: calc((100% - 20px) / 3); /* 3 Bilder pro Reihe minus Lücken */
    height: auto;
    border-radius: 5px;
}

.band-images img {
    width: 250px;            /* feste Breite für jedes Bild */
    height: auto;            /* Höhe automatisch proportional */
    object-fit: cover;       /* schneidet ggf. überstehende Bereiche ab */
    border-radius: 5px;
}

/*Band PopUp*/
/* Overlay */
#band-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Popup */
.band-popup-content {
    position: relative;
    display: flex;
    gap: 30px;
    background: #111;
    padding: 25px;
    max-width: 900px;
    width: 90%;
    max-height: 85vh;
    border-radius: 8px;
    color: #fff;
    overflow: hidden;
    flex-direction: row; /* Default Desktop */
}

/* Text */
.band-popup-text {
    flex: 1 1 50%;
    overflow-y: auto;
}
.band-popup-text h2 {
    margin-top: 0;
}

/* Bild */
.band-popup-image-wrapper {
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-right: 30px;
}
.band-popup-image-wrapper img {
    max-width: 100%;
    max-height: 45vh;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
}

/* Schließen-X */
.band-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #830505;
    background-color: rgba(0,0,0,0.3);
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    transition: 0.3s ease;
}
.band-popup-close:hover {
    background-color: #830505;
    color: #fff;
}

/* Mobile Layout */
@media (max-width: 768px) {
    .band-popup-content {
        flex-direction: column;
        max-height: 90vh;
    }

    .band-popup-image-wrapper {
        order: -1; /* Bild oben */
        flex: none;
        padding: 0;
        justify-content: center;
    }

    .band-popup-image-wrapper img {
        max-width: 70%;
        max-height: 30vh;
        width: auto;
        height: auto;
    }
}

@media (max-width: 480px) {
    .band-popup-image-wrapper img {
        max-width: 70%;
        max-height: 22vh; /* Bild wird klein */
    }
}


/* Responsives Verhalten */
/* Responsive für kleine Bildschirme */
@media (max-width: 1078px) {
    .band-wrapper {
        flex-direction: column;   /* Text über Bildern */
        align-items: center;
    }

    .band-text, .band-images {
        max-width: 90%;           /* Bilder/Text nicht zu breit auf Handy */
        flex: 1 1 auto;
    }

    .band-images .image-row {
        flex-wrap: wrap;          /* Bilder umbrechen, falls zu viele in einer Reihe */
    }

    .band-images .image-row img {
        max-width: 45%;           /* Zwei Bilder pro Reihe auf kleineren Bildschirmen */
    }
}

/* Band-Container */
.band-container {
    display: flex;
    flex-wrap: wrap;           /* Zeilen umbrechen bei kleinerem Bildschirm */
    justify-content: center;   /* Zentriert die Mitglieder horizontal */
    gap: 20px;                 /* Abstand zwischen den Mitgliedern */
    padding: 0 20px;           /* Abstand links und rechts */
    box-sizing: border-box;
}

/* Band-Mitglied */
.band-member {
    cursor: pointer;
    text-align: center;
    max-width: 200px;          /* Größe der Miniaturbilder */
    flex: 1 1 150px;           /* Flexibel, aber min. Breite 150px */
}

/* Bild 9:16 */
.band-member img {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.2s ease;
}

.band-member img:hover {
    transform: scale(1.05);
}

/* Name unter dem Bild */
.band-member .member-name {
    font-family: 'VARUNA', sans-serif;
	letter-spacing: 0.009em;
	font-size: 1.05em;
	line-height: 1.6;
	text-align: center;
}

/* Responsives Verhalten */
/* Tablet (zwischen 768px und 1080px) */
@media (max-width: 1079px) and (min-width: 768px) {
    .band-container {
        justify-content: center; /* weiterhin zentriert */
    }

    .band-member {
        flex: 1 1 45%; /* zwei Mitglieder pro Reihe */
        max-width: 45%;
    }
}

/* Mobile (unter 768px) */
@media (max-width: 768px) {
    .band-container {
        flex-direction: row;      /* horizontal anordnen */
        flex-wrap: wrap;          /* in zwei Zeilen umbrechen */
        justify-content: center;  /* zentrieren */
        gap: 15px;                /* Abstand zwischen den Mitgliedern */
    }

    .band-member {
        flex: 1 1 45%;           /* etwa 2 pro Reihe */
        max-width: 45%;          /* Breite der Mitglieder */
    }
}

/* Events */
.event-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Event-Box */
.event {
    display: flex;
    background-color: #222222;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: 10px 50px; /* horizontal + vertikal */
    gap: 20px;
    flex-wrap: wrap; /* für mobile Ansicht */
    box-sizing: border-box; /* wichtig für Scrollbar */
}

/* Linke Spalte */
.event-left button {
    align-self: center;        /* Button horizontal zentrieren */
    padding: 5px 10px;         /* kleinere Größe */
    font-size: 0.9em;          /* Schriftgröße anpassen */
    background-color: #830505; /* bestehendes Farbschema */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s ease;
}

.event-left button:hover {
    background-color: #c10505;
}

/* Rechte Spalte */
.event-right {
    flex: 1 1 45%; /* 45% der Breite, Rest durch Gap */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.event-actions {
    display: flex;
    justify-content: space-between; /* verteilt Button und Map gleichmäßig */
    align-items: flex-start; /* vertikal oben ausrichten */
    gap: 20px; /* optional: Abstand zwischen Button und Map */
}
/*
.big_ueber, .big_ueber2 {
    font-size: clamp(1.5em, 8vw, 3em);  Skaliert stufenlos zwischen 2em und 3.5em 
}*/

.big_ueber {
    /*font-size: 3.5em;*/
    text-align: center;
    margin-bottom: -0.5em;
}
.big_ueber_next{
	color: #fff;
}
/*
.big_ueber2 {
    text-align: center;
    margin-bottom: -0.2em;
}

.big_ueber_s {
    font-size: clamp(1.2em, 8vw, 2em);
    text-align: center;
    margin-bottom: -0.5em;
}*/


/* Map */
.map-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.map-credit {
    font-size: 9px;
    line-height: 9px;
    text-align: center;
    margin-top: 2px;
}

/* Responsive Anpassung */
@media (max-width: 768px) {
    .event {
        flex-direction: column;
    }

    .event-left,
    .event-right {
        flex: 1 1 100%;
    }

    .event-right {
        align-items: center;
    }
}

.event-actions button {
    padding: 5px 10px;
    background-color: #830505;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 5px;
}

.event-actions button:hover {
    background-color: #c10505;
}

.event iframe {
    border-radius: 5px;
    max-width: 200px;
    height: 150px;
}

.event-date {
    font-weight: 400;
    font-size: 1.2em;
    color: #830505;
}

.event-title {
    font-size: 1.1em;
    font-weight: normal;
}

.event-location {
	margin-left: 2vw;
    color: #cccccc;
}

.event button {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: #830505;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.event button:hover {
    background-color: #c10505;
}

/* Responsive */
@media (max-width: 500px) {
    .event-container {
        gap: 15px;
    }

    .event {
        padding: 12px 15px;
    }
}

/* EVENT LIVE NEW*/

.live-events {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.live-event {
    width: 100%;
    background-color: #222;
    padding: 20px;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s;
}

.live-event:hover {
    background-color: #333;
}
/* Dreht den Pfeil um 180 Grad nach oben, wenn das Event geöffnet ist */
.live-event.open .event-toggle-btn {
    transform: rotate(180deg);
}

/* --- LAYOUT & DESIGN FÜR AKTUELLE KONZERTE --- */

.live-event-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0;
    cursor: pointer;
    /* Schriftformatierung anpassen, damit sie nicht mehr fett oder abweichend ist */
    font-size: 1.05em; /* Deine Standard-Schriftgröße laut CSS */
    font-weight: normal;
}

    /* Feste Breite für das Datum ganz links */
    .live-event-summary .event-date {
        min-width: 90px;
        font-weight: normal;
    }

    /* Der Ort nimmt den restlichen Platz in der Mitte ein */
    .live-event-summary .event-location {
        flex-grow: 1;
        margin-left: 15px;
        font-weight: normal;
    }

    /* Das Design für den Stadt-Zusatz (z.B. - Wallau) */
    .live-event-summary .event-venue {
        font-weight: normal;
        color: #ccc; /* Macht den Zusatz etwas dezenter, anpassen falls gewünscht */
    }


/* Der neue Aufklapp-Pfeil */
.event-toggle-btn {
    margin-left: auto; /* Schiebt den Pfeil automatisch ganz an den rechten Rand */
    font-size: 1.3em; /* Macht den Pfeil auf Smartphones gut sichtbar */
    transition: transform 0.3s ease; /* Ermöglicht eine flüssige Animation */
}

/* Details standardmäßig versteckt */
.live-event-details {
    display: none;
    margin-top: 15px;
    padding: 15px;
    background-color: #181818;
    border-radius: 8px;
    color: #fff;
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei Spalten */
    grid-template-rows: auto auto;   /* Zwei Reihen mit Höhe abhängig vom Inhalt */
    gap: 15px;
}

.details-item {
    background-color: #222;
    padding: 10px;
    border-radius: 5px;
    font-size:0.9em;
    /* Höhe nicht festlegen – passt sich dem Inhalt an */
}

.details-item h4 {
    margin: 0 0 5px 0;
	font-weight: 400;
	font-size: 1.2em;
}

.details-item p, .details-item button {
    margin: 5px 0;
}

/* Details sichtbar */
.live-event-details.show {
    display: block;
}

/* Button anpassen */
.details-item button {
    padding: 5px 10px;
    background-color: #333;
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
}

.details-item button:hover {
    background-color: #181818;
}

/* Details standardmäßig versteckt */
.live-event-details {
    display: none;
    margin-top: 15px;
    padding: 15px;
    background-color: #333;
    border-radius: 8px;
    color: #fff;
}

.live-event-details p {
    margin: 8px 0;
}

.event-map {
    margin-top: 10px;
}

/* Optional: sanfte Animation */
.live-event-details.show {
    display: block;
}

.button-link {
    display: inline-block;
    padding: 8px 16px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    /*font-weight: bold;*/
    text-align: center;
    transition: background-color 0.3s ease;
}

.button-link:hover {
    background-color: #181818;
}

.live_text {
	text-align:center;
	letter-spacing: 0.05em;
	font-size: 1.55em;
}
.live_month{
	font-size: 1.35em;
	letter-spacing: 0.05em;
	margin-bottom: -1vh;
}

/*Vergangene Events*/

* Hintergrund für die gesamte Vergangenheit-Sektion */
.live-event-past {
    cursor: default;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Abstand zwischen den Events */
    background-color: #7d7d7d; /* mittlerer Grauton */
    padding: 10px;
    border-radius: 6px;
}

/* Einzelne Events */
.live-event-summary2 {
    display: flex;
    justify-content: space-between;
    font-size: 1.2em;
    color: #fff;
    background-color: #222; /* dunkler Grauton */
    padding: 10px 15px;
    border-radius: 6px;
    transition: background-color 0.3s ease; /* sanfter Hover-Übergang */
    margin: 1vh 1vw; /* 1vh oben/unten, 1vw links/rechts */
}

/* Hover-Effekt nur auf einzelnen Events */
.live-event-summary2:hover {
    background-color: #333; /* heller Grauton beim Hover */
    cursor: pointer; /* optional */
}

/* Links in den Event-Summaries */
.event-links {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.event-venue {
    font-size: 0.9em;
    opacity: 0.85;
}


.event-time {
    font-size: 0.85em;
    opacity: 0.8;
}


.button-small {
    padding: 6px 10px;
    font-size: 0.8em;
    border-radius: 4px;
	font-weight: 400; /* leicht dünner */
	 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}


/* Responsive: auf Smartphones untereinander */
@media (max-width: 768px) {
    .details-grid {
        grid-template-columns: 1fr;  /* nur 1 Spalte */
        gap: 10px;
    }

    .details-grid .details-item {
        width: 100%;       /* volle Breite */
    }

    .details-grid iframe {
        width: 100%;       /* Maps iframe anpassen */
        height: auto;      /* Höhe proportional */
    }
}

/* MEDIENBEREICH */
/* Unterüberschrift im Media-Bereich */
.media-subtitle {
    margin: 60px 0 30px;
    text-align: center;
    font-size: 1.4em;
    letter-spacing: 0.15em;
    color: #830505;
}

/* Video Grid */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Einzelnes Video */
.video-item {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 15px;
    border: 1px solid #333;
    border-radius: 6px;
}

/* Responsives Video (16:9) */
.video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Videotitel */
.video-title {
    margin-top: 12px;
    text-align: center;
    font-size: 0.95em;
    letter-spacing: 0.05em;
}

/* Download-Bereich */
#download {
    padding: 60px 5vw 40px 5vw;
    text-align: center;
}

    #download h2 {
        font-family: 'VARUNA', sans-serif;
        letter-spacing: 0.09em;
        font-size: clamp(1.5em, 8vw, 3em); /* Skaliert stufenlos zwischen 2em und 3.5em */
        color: #830505; /* zentraler Farbakzent Rot */
        margin-bottom: -0.2em;
    }

#download .video_text {
    font-family: 'VARUNA', sans-serif;
    font-size: 1.05em;
    line-height: 1.6;
    text-align: center;
 

}

.download-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.download-item {
    background-color: #222;
    border-radius: 10px;
    width: 200px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.download-item:hover {
    transform: scale(1.05);
    background-color: #830505;
}

.download-item img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 10px;
}

.download-item p {
    font-family: 'VARUNA', sans-serif;
	letter-spacing: 0.009em;
	font-size: 1.05em;
	line-height: 1.6;
	text-align: center;
}


/* Kontaktformular */
form {
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

form input, form textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}


/* Kontaktformular Text unterhalb zentriert */
.kontakt_text {
    text-align: center;
    margin-top: 15px;
    font-family: 'VARUNA', sans-serif;
    font-size: 1em;
    line-height: 1.5;
    color: #ffffff;
}

/* Aufklappbares Impressum */
.toggle-container {
    max-width: 800px;
    margin: 20px auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}

.toggle-header {
    background-color: #181818;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
}

.toggle-content {
    background-color: #222222;
    padding: 10px;
}


/* Impressum ausklappbar, standardmäßig versteckt */
#impressum-content {
    display: none;        /* standardmäßig eingeklappt */
    font-size: 0.9em;
    line-height: 1.4;
    text-align: justify;
    margin: 10px 0;
    padding: 10px;
    background-color: #181818; /* optionaler Hintergrund */
    border-radius: 5px;
}

/* Überschrift klickbar */
#impressum-toggle {
    cursor: pointer;
    font-weight: bold;
    color: #830505;
    margin: 20px 0 0 0;
}

/* Button-Header */
#impressum .toggle-header {
    cursor: pointer;
    font-weight: bold;
    color: #830505;
    text-align: center;
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #181818;
    border: 1px solid #830505;
    width: 30vw; /* 30% der Bildschirmbreite */
}

/* Inhalt */
#impressum .toggle-content {
    display: none; /* standardmäßig eingeklappt */
    width: 80vw; /* 80% der Bildschirmbreite */
    margin-top: 10px; /* Abstand zum Button */
    padding: 10px;
    font-size: 0.9em;
    line-height: 1.4;
    text-align: justify;
    background-color: #181818;
    border-radius: 5px;
    border: 1px solid #555;
}

/* Popups */
.customs-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.customs-popup {
    background-color: #181818;
    padding: 20px;
    border-radius: 10px;
    max-width: 90%; /* maximal 90% der Fensterbreite */
    max-height: 90%; /* maximal 90% der Fensterhöhe */
    width: auto;    /* passt sich der Inhaltsbreite an */
    height: auto;   /* passt sich der Inhaltshöhe an */
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: auto; /* Scroll, falls Inhalt zu groß ist */
    box-sizing: border-box;
}

/* Auf großen Bildschirmen: max 70% der Breite */
@media (min-width: 1200px) {
    .customs-popup {
        max-width: 60vw;
    }
}

.customs-popup.horizontal {
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
}

.customs-popup.vertical {
    flex-direction: column;
    gap: 10px;
}

.popup-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Bild im Popup 9:16 */
.customs-popup img {
    max-width: 400px;    /* maximal 400px breit */
    max-height: 70vh;    /* maximal 70% der Höhe des Viewports */
    width: auto;
    height: auto;
    object-fit: contain;  /* sorgt dafür, dass das Bild vollständig sichtbar bleibt */
    margin-top: 15px;
    border-radius: 5px;
}

.customs-popup h1 {
    margin-bottom: 10px;
    font-size: 1.2em;
}

.customs-popup p {
    margin-top: 10px;
    font-size: 1em;
    line-height: 1.4;
}

/* Schließen-Button */
.customs-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #830505;          /* rote Farbe passend zum Farbakzent */
    background-color: rgba(0,0,0,0.3); /* leichter dunkler Hintergrund, transparent */
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    transition: 0.3s ease;
}

.customs-close:hover {
    background-color: #830505; /* beim Hover komplett rot */
    color: #fff;               /* X wird weiß beim Hover */
}

.popup-content {
    display: flex;
    flex-direction: column; /* Standard: Text oben, Bild darunter */
    align-items: center;
    gap: 15px;
}

/* Für horizontale Anordnung bei hochkant-Bildern */
.popup-content.horizontal {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

.popup-text {
    flex: 1;
    text-align: justify;
}

.popup-image img {
    max-width: 400px;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
}

/* --- OPTIMIERUNG FÜR SMARTPHONES (Punkt 4) --- */
@media (max-width: 768px) {
    /* Padding in der Band-Lightbox verkleinern */
    .band-popup-content {
        padding: 15px !important;
        width: 90%; /* Verhindert, dass es am Rand klebt */
    }

    /* Padding in den Custom-Popups (z.B. Impressum/Datenschutz) verkleinern */
    .customs-popup {
        padding: 15px !important;
        width: 90%;
    }

    /* Grundzustand: Menü ist versteckt */
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px; /* Passe das an die tatsächliche Höhe deines Headers an */
        left: 0;
        background-color: #000; /* Hintergrundfarbe des Menüs (anpassen!) */
        text-align: center;
    }

        /* NEU: Diese Klasse wird vom JavaScript hinzugefügt */
        .nav-links.menu-open {
            display: flex !important;
        }

}
/* --- HAMBURGER-MENÜ MIT TRANSPARENTEM HINTERGRUND (ab 1080px abwärts) --- */
@media (max-width: 1079px) {

    #main-header .nav-links {
        display: none !important;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px; /* Hier die genaue Höhe deines Headers eintragen */
        left: 0;
        /* NEU: Schwarz mit Transparenz (0.9 = 90% Deckkraft) */
        background-color: rgba(0, 0, 0, 0.9);
        text-align: center;
        padding: 15px 0;
        margin: 0;
        z-index: 999; /* Liegt über dem restlichen Inhalt */
    }

        /* Öffnet das Menü, wenn die Klasse aktiv ist */
        #main-header .nav-links.menu-open {
            display: flex !important;
        }
}

/* --- EXAKTE ANGLEICHUNG: AKTUELLE AN VERGANGENE KONZERTE --- */

/* 1. Hauptcontainer und Layout-Struktur */
.live-event-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Falls die alten eine Linie haben */
    width: 100% !important;
    cursor: pointer !important;
    /* Hier erzwingen wir die gleichen Schrift-Werte wie bei .live-event-summary2 */
    font-family: 'VARUNA', sans-serif !important;
    font-size: 1.2em !important;
    color: #fff !important;
    font-weight: normal !important;
    letter-spacing: 0.05em;
}

    /* 2. Datum links (exakt wie bei .live-event-summary2) */
    .live-event-summary .event-date {
        flex: 0 px 120px !important; /* Breite anpassen, falls das Datum zu nah am Text klebt */
        font-size: 1.2em !important;
        color: #830505 !important;
        letter-spacing: 0.05em;
    }

    /* 3. Ort in der Mitte */
    .live-event-summary .event-location {
        flex: 1 !important;
        padding-left: 20px !important;
        font-size: 1em !important;
        color: #fff !important;
    }

    /* 4. Der graue Stadt-Zusatz (z.B. - Wallau) */
    .live-event-summary .event-venue {
        color: #ccc !important;
        font-size: 0.9em !important; /* Etwas kleiner für die Eleganz */
        font-weight: normal !important;
    }

    /* 5. Button rechts */
    .live-event-summary .event-links {
        flex: 0 0 auto !important;
        margin-left: 15px !important;
    }

/* --- RESPONSIVE ANPASSUNG DER ACTION-POPUPS (Smartphones) --- */
@media (max-width: 1079px) {
    .customs-popup img {
        max-width: 100% !important; /* Bild skaliert dynamisch mit dem Popup-Container */
        height: auto !important;
    }
}

/* --- LÖSUNG FÜR DAS VIDEO IM HEADER (Smartphones & iPads) --- */

/* Für iPads und kleine Laptops */
@media (max-width: 1024px) {
    .slideshow-container {
        width: 100% !important; /* Nutzt die volle Bildschirmbreite */
        height: auto !important; /* Hebt die starre Höhen-Begrenzung auf */
        aspect-ratio: 16 / 9; /* Hält das Video im typischen 16:9 Breitbild-Format */
    }

        .slideshow-container .slide {
            height: 100% !important;
            min-height: auto !important; /* Löst den Konflikt mit der Container-Höhe */
        }
}

/* Für Smartphones */
@media (max-width: 768px) {
    .slideshow-container {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3; /* 4:3 macht das Video auf dem Handy etwas höher und präsenter */
    }

        .slideshow-container .slide {
            height: 100% !important;
            min-height: auto !important;
        }

    /* Das Band-Logo auf dem Handy perfekt mittig über dem Video zentrieren */
    .overlay-img {
        width: 75% !important; /* Logo etwas präsenter machen */
        top: 50% !important; /* Schiebt es in die vertikale Mitte */
        transform: translate(-50%, -50%) !important; /* Zentriert es exakt auf den Pixel */
    }
}

/* --- ZWEITEILUNG FÜR EVENT-DETAILS (Plakat + Infos) --- */
.details-split {
    display: flex;
    gap: 30px; /* Abstand zwischen Plakat und Infos */
    align-items: flex-start;
    margin-top: 15px;
}

/* Linker Bereich für das Plakat */
.details-poster {
    flex: 0 0 35%; /* Das Plakat nimmt 35% der Breite ein */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Abstand zwischen Plakat und Ticket-Button */
}

    /* Bildformatierung für das Plakat */
    .details-poster img {
        width: 100%;
        height: auto;
        border-radius: 8px; /* Leicht abgerundete Ecken wirken moderner */
        box-shadow: 0 5px 15px rgba(0,0,0,0.5); /* Schöner Schatten für Tiefe */
    }

/* Besonderes Styling für den Ticket-Button unterm Plakat */
.ticket-btn {
    text-align: center;
    background-color: #830505; /* Dein dunkles Rot als Signalfarbe */
    color: #fff;
    padding: 12px;
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
    display: block;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

    .ticket-btn:hover {
        background-color: #a80707; /* Etwas helleres Rot beim Drüberfahren */
    }

/* Der rechte Info-Bereich nimmt den restlichen Platz ein */
.details-split .details-grid {
    flex: 1; /* Füllt die restlichen 65% */
}

/* --- MOBILES LAYOUT (Smartphones & kleine Tablets) --- */
@media (max-width: 1079px) {
    .details-split {
        flex-direction: column; /* Stapelt Plakat und Infos untereinander */
        gap: 20px;
    }

    .details-poster {
        flex: 1 1 100%;
        width: 100%;
        max-width: 350px; /* Verhindert, dass das Plakat auf großen Handys riesig wird */
        margin: 0 auto; /* Zentriert das Plakat in der Mitte */
    }
}

/* --- SANFTER BILDWECHSEL BAND-GALERIE --- */
.band-images img {
    transition: opacity 1s ease-in-out !important;
}

    .band-images img.fade-out {
        opacity: 0 !important;
    }

/* --- FESTES FORMAT FÜR DIE WECHSELNDEN BANDBILDER --- */
.band-images img {
    aspect-ratio: 9 / 16 !important; /* Erzwingt für ALLE Bilder exakt dasselbe Format */
    height: auto !important; /* Die Höhe berechnet sich nun aus der festen aspect-ratio */
    object-fit: cover !important; /* Füllt den Rahmen perfekt, schneidet Überschuss ab */
}

/*Headerbereich Social Links unterscheidung mobile und desktop*/
/* --- SOCIAL LINKS RESPONSIVE SWITCH (KORRIGIERT) --- */

/* Standard (Desktop): Mobile-Icons im Menü komplett verstecken */
.mobile-only {
    display: none !important;
}

/* Mobile Ansicht (Tablets und Smartphones unter 768px) */
@media (max-width: 1079px) {

    /* 1. Zwingt die originalen Icons im Header (außerhalb der Navi) rigoros zum Verschwinden */
    header > .nav-social-links,
    .desktop-only {
        display: none !important;
    }

    /* 2. Zeigt NUR die Icons unten im aufgeklappten Hamburger-Menü an */
    .mobile-only {
        display: flex !important;
        justify-content: center;
        gap: 20px;
        margin-top: 30px;
        padding-bottom: 20px;
    }

    /* 3. Verhindert Listen-Punkte vor den Icons */
    .mobile-social-item {
        list-style: none;
        width: 100%;
        text-align: center;
    }

    /* 4. Sorgt für die perfekte Größe im Menü */
    .mobile-only img {
        width: 35px;
        height: auto;
    }
}

/* --- SCHLANKERER HEADER AUF MOBILGERÄTEN --- */
@media (max-width: 1079px) {
    /* 1. Das Polster oben und unten im schwarzen Balken verkleinern */
    #main-header {
        padding: 5px 0 !important;
    }

    /* 2. Das Hamburger-Icon minimal anpassen, damit es perfekt zentriert bleibt */
    .hamburger {
        font-size: 1.8em !important;
        padding: 2px 15px !important;
    }

    /* 3. Das aufklappende Menü exakt an die neue, schmalere Unterkante andocken */
    #main-header .nav-links,
    .nav-links.show {
        top: 42px !important; /* Zieht das Menü weiter nach oben */
    }
}

/* --- DOWNLOADS: ZWEI NEBENEINANDER AUF SMARTPHONES --- */
@media (max-width: 768px) {
    /* Flex-Container zwingen, den Platz komplett zu nutzen */
    .download-items {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important; /* Verteilt Boxen an die Ränder */
        gap: 10px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* Jede Box exakt auf knapp 50% setzen */
    .download-item {
        flex: 0 0 calc(50% - 5px) !important; /* 50% Breite minus halben Gap */
        width: calc(50% - 5px) !important;
        margin: 0 !important; /* WICHTIG: Margins entfernen, damit die Rechnung aufgeht */
        padding: 10px !important;
        box-sizing: border-box !important;
    }
        /* Bilder in den Boxen klein halten, damit sie nicht überlaufen */
        .download-item img {
            width: 80% !important; /* etwas kleiner, damit der Text nicht gequetscht wird */
            margin-bottom: 5px !important;
        }
        .download-item p {
            font-size: 0.9em !important; /* Schrift minimal anpassen, damit alles gut lesbar bleibt */
            margin-bottom: 5px !important;
        }
}

/* --- MOBILE ANPASSUNGEN: ÜBERSCHRIFT & MENÜ-LINKS --- */

/* 1. Hamburger-Menü Links ab 1080px (Tablet/Mobile) verkleinern */
@media (max-width: 1079px) {
    #main-header .nav-links li a {
        font-size: 22px !important; /* Deutlich kleiner als die vorherigen 3.8vh */
        /* Tipp: Falls es dir auf dem iPad im Hochformat immer noch zu groß ist, 
           tausche die 2.5vh einfach gegen einen festen Wert wie "22px" aus! */
    }
}

/* 2. Überschrift "Vergangene Konzerte" auf Smartphones deutlich kleiner */
@media (max-width: 1079px) {
    .big_ueber_s {
        font-size: 1.6em !important; /* Verkleinert die Schrift von ehemals 2.5em */
        margin-bottom: 10px !important; /* Sorgt für einen sauberen Abstand zu den Boxen */
    }
}
/* --- OPTIMIERUNG DER ÜBERSCHRIFTEN & ABSTÄNDE FÜR SMARTPHONES --- */

@media (max-width: 1079px) {
    /* 2. Untertitel bei der Tour ("Tickets und Infos...") etwas kleiner, für bessere Hierarchie */
    .live_text {
        font-size: 1.1em !important;
    }

    /* 3. Platzverschwendung beheben: Abstand nach oben (80px) auf dem Handy verringern */
    section {
        padding: 50px 15px 30px 15px !important;
    }

    /* 4. Normale h2-Überschriften (wie "Bandmitglieder") minimal anpassen */
    h2 {
        font-size: 1.6em !important;
    }

    #download h2 {
        font-size: 1.6em !important;
    }
}
@media (max-width: 768px) {

    #live {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden; /* Verhindert horizontales Wackeln */
        box-sizing: border-box;
    }
    /* ==========================================
       1. VERGANGENE KONZERTE (.live-event-summary2)
       (Bleibt exakt so, das hat ja bereits perfekt funktioniert!)
       ========================================== */
    .live-event-summary2 {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        align-items: start !important;
        gap: 8px 10px !important;
    }

        .live-event-summary2 .event-date {
            width: auto !important;
            margin: 0 !important;
        }

        .live-event-summary2 .event-location {
            width: auto !important;
            margin: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
        }

        .live-event-summary2 .event-venue {
            display: block !important;
            margin-top: 2px !important;
            font-size: 0.9em !important;
            opacity: 0.8 !important;
        }

        .live-event-summary2 .event-links {
            grid-column: 1 / -1 !important;
            display: flex !important;
            justify-content: flex-end !important;
            margin-top: 5px !important;
        }


    /* ==========================================
       2. KOMMENDE KONZERTE (.live-event-summary)
       (Die Zwangs-Zuweisung der Koordinaten)
       ========================================== */
    .live-event-summary {
        display: grid !important;
        /* Wir erzwingen 2 Spalten: Die 1. passt sich ans Datum an, die 2. nimmt den Rest */
        grid-template-columns: auto 1fr !important;
        align-items: start !important;
        gap: 5px 10px !important; /* Abstand nach unten und rechts */
        margin-bottom: 15px !important;
    }

        /* Wir lösen die Hülle wieder auf */
        .live-event-summary .event-location {
            display: contents !important;
        }

        /* 1. ZWANG: Das Datum MUSS in Zeile 1, Spalte 1 */
        .live-event-summary .event-date {
            grid-row: 1 !important;
            grid-column: 1 !important;
            margin: 0 !important;
        }

        /* Da der Event-Name nur blanker Text ist, rutscht er von ganz allein in Zeile 1, Spalte 2 (neben das Datum) */

        /* 2. ZWANG: Der Ort MUSS in Zeile 2 und darf BEIDE Spalten nutzen (ganz nach links unter das Datum) */
        .live-event-summary .event-venue {
            grid-row: 2 !important;
            grid-column: 1 / -1 !important;
            margin: 0 !important;
            font-size: 0.9em !important;
            opacity: 0.8 !important;
        }

        /* 3. ZWANG: Der Button (falls es ihn gibt) MUSS in Zeile 3 */
        .live-event-summary .event-links {
            grid-row: 3 !important;
            grid-column: 1 / -1 !important;
            margin-top: 5px !important;
        }
}
@media (max-width: 1079px) {
    /* Wir zwingen alle potenziellen JS-Zustände aus dem Raster */
    #main-header .nav-links,
    #main-header .nav-links.active,
    #main-header .nav-links.show,
    #main-header .nav-links.menu-open {
        position: absolute !important;
        top: 60px !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background-color: rgba(0, 0, 0, 0.95) !important;
        box-shadow: 0px 10px 20px rgba(0,0,0,0.5) !important;
    }
}

/* =========================================================================
   ÜBERSCHRIFTEN-KORREKTUR (HARMONISCHE INTEGRATION MIT ENGEN ABSTÄNDEN)
   ========================================================================= */

/* GRUPPE 1: Große Hauptüberschriften (Tour, Media, Band, Download, Kontakt) */
.big_ueber,
.big_ueber2,
#download h2 {
    font-size: clamp(2em, 8vw, 3.5em) !important;
    text-align: center !important;
    margin-bottom: -0.2em !important;
    text-shadow: 2px 4px 15px rgba(0, 0, 0, 0.9) !important;
    letter-spacing: 0.12em !important;
    position: relative !important;
    padding-bottom: 0px !important;
    z-index: 10 !important; /* Zwingt den Text in den Vordergrund */
}

/* GRUPPE 2: Unterüberschriften ("Vergangene Konzerte", "Bandmitglieder") */
.big_ueber_s,
section h2:not(.big_ueber):not(.big_ueber2) {
    font-size: clamp(1.4em, 5vw, 2.2em) !important;
    text-align: center !important;
    margin-bottom: -0.2em !important;
    text-shadow: 2px 4px 15px rgba(0, 0, 0, 0.9) !important;
    letter-spacing: 0.12em !important;
    position: relative !important;
    padding-bottom: 0px !important;
    z-index: 10 !important;
}

    /* --- DER ROTE STRICH FÜR ALLE --- */
    .big_ueber::after,
    .big_ueber2::after,
    #download h2::after,
    .big_ueber_s::after,
    section h2:not(.big_ueber):not(.big_ueber2):after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(131, 5, 5, 0.8), transparent) !important;
        z-index: 11 !important; /* Garantiert, dass die rote Linie ÜBER den nachrückenden Inhalten liegt */
    }

/* 1. HÖHE FÜR DIE GROßEN ÜBERSCHRIFTEN (Noch näher an den Text!) */
.big_ueber::after,
.big_ueber2::after,
#download h2::after {
    bottom: 22px;
}

/* 2. HÖHE FÜR DIE KLEINEREN ÜBERSCHRIFTEN */
.big_ueber_s::after,
section h2:not(.big_ueber):not(.big_ueber2):after {
    bottom: 12px;
}

/* --- SMARTPHONE ANPASSUNGEN --- */
@media (max-width: 768px) {
    .big_ueber,
    .big_ueber2,
    #download h2,
    .big_ueber_s,
    section h2:not(.big_ueber):not(.big_ueber2) {
        margin-bottom: -0.1em !important;
    }

        .big_ueber::after,
        .big_ueber2::after,
        #download h2::after,
        .big_ueber_s::after,
        section h2:not(.big_ueber):not(.big_ueber2)::after {
            width: 80px;
        }

        /* Auf dem Handy zieht sich die Linie bei den großen Schriften auch an die korrekte Position */
        .big_ueber::after,
        .big_ueber2::after,
        #download h2::after {
            bottom: 14px;
        }

        .big_ueber_s::after,
        section h2:not(.big_ueber):not(.big_ueber2)::after {
            bottom: 8px;
        }
}

/* --- INSTAGRAM FEED (Volle Bildschirmbreite) --- */
#instagram-feed {
    width: 100%;
    padding: 60px 0 40px 0 !important; /* 0 an den Seiten = volle Breite! */
    text-align: center;
    overflow: hidden; /* Verhindert horizontales Scrollen */
}

.insta-container {
    width: 100%;
    margin: 20px 0 0 0;
    background-color: #222; /* Dunkelgrauer Balken über die volle Breite */
    padding: 20px 0; /* Abstand oben und unten zum Iframe */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

    .insta-container iframe {
        width: 100% !important;
        border: none !important;
        overflow: hidden !important;
        display: block;
    }

/* Auf Handys den Abstand minimal verkleinern */
@media (max-width: 768px) {
    #instagram-feed {
        padding: 40px 0 20px 0 !important;
    }
}