* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
   padding: 0;
    background: #000;
}

@font-face {
  font-family: hanson;
  src: url(hanson.ttf);
}

@font-face {
  font-family: inter;
  src: url(inter.ttf);
}

.gjs-heading {
    margin: 0;
    color: rgba(29, 40, 55, 1);
}

.gjs-grid-column {
    flex: 1 1 0%;
    padding: 5px 0;
}

.gjs-grid-row {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: row;
    min-height: auto;
    padding: 10px 0;
}

.gjs-link {
    vertical-align: top;
    max-width: 100%;
    display: inline-block;
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease 0s;
}

#main-body {
    background-image: linear-gradient(rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 1) 100%);
    background-position: 0px 0px;
    background-size: 100% 100%;
    background-repeat: repeat;
    background-attachment: scroll;
    background-origin: padding-box;
    color: #000000;
    font-weight: 400;
    max-width: 100%;
    overflow-x: hidden;
    font-family: inter;
    src: url(inter.ttf);
}

#social-links-container {
    position: absolute;
    z-index: 1;
    display: flex;
    width: 100%;
    /* Angepasst, damit Social Links unten auf dem Hero-Bild sind */
    bottom: 0px;
}

#social-links {
    flex: 1 1 0%;
    display: flex;
    margin-left: 20px;
    margin-right: 20px;
    justify-content: space-between;
    flex-direction: row;
    align-self: auto;
    align-content: stretch;
    gap: 0px;
}

#social-link-instagram {
    color: #ff0088;
    padding: 10px;
    position: static;
    z-index: 4;
    font-weight: 600;
    font-size: 1vmax ;
    text-align: left;
    flex: 0 1 15%;
    font-family: hanson;
}
#social-link-youtube {
    color: #ff0088;
    padding: 10px;
    position: static;
    z-index: 4;
    font-weight: 600;
    font-size: 1vmax ;
    text-align: center;
    flex: 0 1 15%;
    font-family: hanson;
}
#social-link-soundcloud {
    color: #ff0088;
    padding: 10px;
    position: static;
    z-index: 4;
    font-weight: 600;
    font-size: 1vmax ;
    text-align: right;
    flex: 0 1 15%;
    font-family: hanson;
}
#social-link-instagram:hover {
    color: rgba(255, 255, 255, 1);
}
#social-link-youtube:hover {
    color: rgba(255, 255, 255, 1);
}
#social-link-soundcloud:hover {
    color: rgba(255, 255, 255, 1);
}

.desktop-long { display: inline; }
.mobile-short { display: none; }

#hero-section, #hero-content {
    width: 100vw;
    height: 100vh;
    min-height: 400px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0;
    
}

#band-name-title {
    position: absolute;
    z-index: 2;
    color: #ff0088;
    font-weight: 600;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 5vh;
    pointer-events: none;
    font-family: hanson;
}

#hero-image-desktop,
#hero-image-mobile {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    margin: 0;
    padding: 0;
}

#hero-image-desktop:hover {
    filter: unset;
}
#hero-image-mobile:hover {
    filter: unset;
}

/* Standardmäßig Desktop-Bild anzeigen, Mobile-Bild ausblenden */
#hero-image-desktop {
    display: block;
}
#hero-image-mobile {
    display: none;
}

#main-nav-container{
    position: absolute;
    z-index: 1;
    display: flex;
    width: 100%;
    /* Angepasst, damit Navigationslinks oben auf dem Hero-Bild sind */
    top: 0px;
    justify-content: flex-start;
}
#main-nav-links {
    flex: 1 1 0%;
    display: flex;
    margin-left: 20px;
    margin-right: 20px;
    justify-content: space-between;
    flex-direction: row;
    align-self: auto;
    align-content: stretch;
    gap: 0px;
    align-items: flex-start;
    border-top-color: #ff0088;
    border-right-color: #ff0088;
    border-bottom-color: #ff0088;
    border-left-color: #ff0088;
    padding-bottom: 0px;
}
#nav-link-live {
    color: #ff0088;
    padding: 10px;
    position: static;
    z-index: 4;
    text-align: left;
    flex: 0 0 15%;
    align-self: auto;
    transition: color 0.3s ease 0s;
    font-family: hanson;
    font-size: 1vmax ;
}
#nav-link-media {
    color: #ff0088;
    padding: 10px;
    position: static;
    z-index: 4;
    text-align: center;
    flex: 0 0 15%;
    align-self: auto;
    transition: color 0.3s ease 0s;
    font-family: hanson;
    font-size: 1vmax ;
}
#nav-link-contact {
    color: #ff0088;
    padding: 10px;
    position: static;
    z-index: 4;
    text-align: right;
    flex: 0 0 15%;
    align-self: auto;
    font-family: hanson;
    font-size: 1vmax ;
}
#nav-link-live:hover {
    color: rgba(255, 255, 255, 1);
}
#nav-link-media:hover {
    color: rgba(255, 255, 255, 1);
}
#nav-link-contact:hover {
    color: rgba(255, 255, 255, 1);
}

#about-section {
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    flex-wrap: nowrap;
}
#about-content {
    max-width: 1023px;
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: auto;
    flex: 1 1 0%;
}
#about-heading {
    font-size: 2rem;
    font-family: hanson;
    text-align: left;
    color: #ff0088;
    flex: 0 0 auto;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
#about-text-row {
    align-items: stretch;
    flex: 0 0 auto;
}
#about-text-column {
    flex: 1 1 0%;
}
#about-text {
    color: rgba(255, 255, 255, 1);
    flex: 1 1 0%;
    font-size: 1rem;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
#soundcloud-embed-container {
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
}
#soundcloud-player {
    background-color: black;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

#live {
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}
#live-shows-container {
    max-width: 1023px;
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: auto;
    flex: 1 1 0%;
}
#divider-live-shows-top {
    background-color: #ff0088;
    height: 2px;
    width: 100%;
    margin-left: 10px;
    margin-right: -18px;
    display: none;
}
#live-shows-heading {
    font-size: 2rem;
    font-family: hanson;
    text-align: left;
    color: #ff0088;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

/* Live Shows: Desktop-Ansicht */
#live-shows-list {
    display: flex;
    flex-direction: column; /* Standardmäßig untereinander für bessere Kontrolle */
    gap: 10px; /* Abstand zwischen den Konzertzeilen */
    padding: 0 10px; /* Etwas Padding für den gesamten Listen-Container */
}

.live-show-row {
    display: flex; /* Flexbox für nebeneinanderliegende Elemente */
    justify-content: space-between; /* Verteilt die Elemente gleichmäßig */
    align-items: center; /* Vertikal zentriert */
    border-bottom: 1px solid #ff0088; /* Trennlinie */
    padding: 8px 0; /* Vertikaler Abstand innerhalb der Zeile */
}

.live-show-date,
.live-show-location,
.live-show-link {
    flex: 1; /* Nimmt gleichen Platz ein */
    font-size: 1rem;
    color: #fff;
    padding: 0 5px; /* Kleiner horizontaler Abstand */
    text-align: left; /* Text linksbündig */
}

.live-show-link {
    text-align: right; /* Link rechtsbündig für Desktop */
}

.live-show-link a {
    color: #ffffff;
    text-decoration: underline;
}

#previous-shows {
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}
#previous-shows-content-container {
    max-width: 1023px;
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: auto;
    flex: 1 1 0%;
}
#media-gallery-container {
    max-width: 1023px;
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: auto;
    flex: 1 1 0%;
}
#previous-shows-main-heading {
    font-size: 2rem;
    font-family: hanson;
    text-align: left;
    color: #ff0088;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
#previous-shows-list-text {
    margin-bottom: 0px;
    text-align: left;
    color: rgba(255, 255, 255, 1);
    flex: 1 1 0%;
    font-size: 1rem;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

#media {
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}
#media-content-container {
    max-width: 1023px;
    align-items: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: auto;
    flex: 1 1 0%;
    width: 100%; 
    min-width: 0;
}
#divider-media-top {
    background-color: #ff0088;
    height: 2px;
    width: 100%;
    margin-left: 10px;
    margin-right: -18px;
    display: none;
}
#media-heading {
    font-size: 2rem;
    font-family: hanson;
    text-align: left;
    color: #ff0088;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    white-space: normal; /* Erlaubt Zeilenumbrüche */
    overflow-wrap: break-word; /* Bricht lange Wörter um */
    min-width: 0;
}
#media-video-row {
    align-items: stretch;
    flex: 0 0 auto;
    display: none; /* Auf Desktop immer noch standardmäßig ausgeblendet, nur für Media Query relevant */
}
#media-video-column {
    padding-top: 0px;
}
#media-video-player {
    height: 60vh;
    width: 100%;
    margin: 0;
    display: block;
}
#media-gallery-container {
    display: flex;
    backface-visibility: visible;
    justify-content: flex-start;
    flex: 0 0 auto;
    align-content: flex-start;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
#image-gallery {
    padding: 1rem;
    grid-template-rows: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    overflow-x: scroll; /* Nur horizontal scrollbar machen */
    overflow-y: hidden; /* Vertikales Scrollen verhindern */
    height: auto; /* Höhe wird durch Bilder bestimmt, nicht fest */
    scroll-snap-type: x mandatory; /* Horizontal schnappen */
    scroll-padding: 1rem;
    padding-top: 0rem;
    padding-right: 0rem;
    padding-bottom: 0rem;
    padding-left: 0rem;
    position: relative;
    backface-visibility: visible;
    display: flex;
    flex: 0 1 auto;
    justify-content: flex-start;
    flex-direction: row;
    transform-style: flat;
    padding-bottom: 1rem;
    align-items: center; /* Vertikal zentriert in der Galerie */
}

#gallery-image-1, #gallery-image-2, #gallery-image-3, #gallery-image-4, #gallery-image-5, #gallery-image-6, #gallery-image-7, #gallery-image-8, #gallery-image-9 {
    color: black;
    flex: 0 0 auto; /* Verhindert, dass Bilder schrumpfen */
    align-self: center; /* Stellt sicher, dass sie vertikal zentriert sind */
    scroll-snap-align: center;
    display: inline-block;
    height: 70vh; /* Feste Höhe für alle Galeriebilder auf Desktop */
    width: auto; /* Breite automatisch anpassen, um Seitenverhältnis zu erhalten */
    object-fit: cover; /* Füllt den Bereich aus, schneidet ggf. Ränder ab */
    margin-right: 20px; /* Abstand zwischen den Bildern */
    max-width: none; /* Entfernt die max-width-Beschränkung, falls sie stört */
}

#contact {
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}
#contact-content-container {
    max-width: 1023px;
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: auto;
    flex: 1 1 0%;
}
#divider-contact-top {
    background-color: #ff0088;
    height: 2px;
    width: 100%;
    margin-left: 10px;
    margin-right: -18px;
}
#contact-heading {
    font-size: 2rem;
    font-family: hanson;
    text-align: left;
    color: #ff0088;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
#contact-details-row {
    align-items: stretch;
    flex: 0 0 auto;
}
#contact-info-column {
    /* keine speziellen Styles */
}
#contact-info-text {
    margin-bottom: 0px;
    text-align: left;
    color: rgba(255, 255, 255, 1);
    flex: 1 1 0%;
    font-size: 1rem;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
#mail-label {
    /* keine speziellen Styles */
}
#mail-value {
    /* keine speziellen Styles */
}
#mail-link {
    color: rgba(255, 255, 255, 1);
    text-decoration-line: underline;
}
#phone-link {
    color: rgba(255, 255, 255, 1);
}

#footer-section {
    justify-content: center;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}
#footer-content {
    max-width: 1023px;
    display: flex;
    flex-direction: column;
}
#footer-links-row {
    flex-direction: column;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
#footer-links-column {
    display: flex;
    gap: 30px;
    flex: 0 1 auto;
    justify-content: center;
}
#footer-datenschutz-link {
    display: block;
    color: rgba(255, 255, 255, 0.38);
}
#footer-impressum-link {
    display: block;
    color: rgba(255, 255, 255, 0.38);
}
#copyright-text {
    padding: 10px;
    text-align: center;
    font-size: 0.8rem;
    opacity: 75%;
    color: #ff0088;
}

/* Utility und Media Queries */
.text-main-content {
    line-height: 30px;
    font-size: 1rem;
}
.text-main-content a {
  color: #fff !important;
  text-decoration: underline;
}
.gallery {
    position: relative;
}
.gallery div {
    padding: 2px;
    width: 120px;
}
.gallery div img:nth-child(1) {
    width: 100px;
}
.gallery div img:nth-child(2) {
    position: absolute;
    top: 10px;
    left: 120px;
    z-index: 10;
    visibility: hidden;
}
.gallery div:hover img:nth-child(2) {
    visibility: visible;
}
.gjs-custom-code {
    padding: 5px;
}
.gjs-text-blue {
    color: rgb(36, 99, 235);
}
.gjs-link:hover {
    color: rgb(36, 99, 235);
    text-decoration: underline;
}
.gjs-grid-column.feature-item {
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 30%;
}
.gjs-grid-column.testimonial-item {
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 45%;
    background-color: rgba(247, 247, 247, 0.23);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    align-items: flex-start;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: rgba(0, 0, 0, 0.06);
    border-right-color: rgba(0, 0, 0, 0.06);
    border-bottom-color: rgba(0, 0, 0, 0.06);
    border-left-color: rgba(0, 0, 0, 0.06);
}

.previous-show-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 0;
}
.previous-show-date {
  min-width: 110px;
  color: #fff;
  font-size: 1rem;
  font-family: inter;
  padding: 0 5px;
}
.previous-show-location {
  flex: 1;
  color: #fff;
  font-size: 1rem;
  font-family: inter;
  padding: 0 5px;
  text-align: left;
}

/* --- Responsive Design für Mobilgeräte (unter 1048px Breite) --- */

@media (max-width: 1048px) {
    /* Hero Section */
    #hero-image-desktop {
        display: none; /* Desktop-Bild auf Mobil ausblenden */
    }
    #hero-image-mobile {
        display: block; /* Mobiles Bild auf Mobil anzeigen */
    }
    #band-name-title {
        font-size: 5vh;
    }

    /* Navigation und Social Links */
    #social-link-instagram, #social-link-youtube, #social-link-soundcloud,
    #nav-link-live, #nav-link-media, #nav-link-contact {
        font-size: 2vh;
        padding: 6px;
    }

    /* Footer */
    #footer-datenschutz-link, #footer-impressum-link, #copyright-text {
        font-size: 1.4vh;
    }

    /* Media Section */
    #media-video-player {
        width: 90%;
        height: 200px;
        margin: 0 auto;
    }
    #image-gallery {
        height: 48vh; /* Galeriehöhe auf Mobil anpassen */
    }
    /*#image-gallery img {
        max-width: 90vw; 
        height: auto; 
        object-fit: contain; 
        margin-right: 10px;
        scroll-snap-align: start;
    }
	*/


    /* Textgrößen für Hauptinhalte */
    #about-text, #live-date-1, #live-date-2, #live-date-3, #live-link-1, #live-link-2, #live-link-3,
    #previous-shows-list-text, #contact-info-text, .text-main-content {
        font-size: 2vh;
        line-height: 1.5;
        padding: 5px 10px;
    }
    .live-show-date, .live-show-location, .live-show-link,
    .previous-show-date, .previous-show-location {
        font-size: 2vh;
    }

    /* Überschriften */
    #about-heading, #live-shows-heading, #media-heading, #contact-heading, #previous-shows-main-heading {
        font-size: 2vh;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    

    /* Allgemeine Abstände und Padding für Hauptcontainer auf Mobil */
    #about-section, #live, #previous-shows, #media, #contact, #footer-section {
        padding-left: 10px;
        padding-right: 10px;
    }
    .gjs-grid-column {
        padding: 5px;
    }

    /* Live Shows Spaltenlayout für Mobil */
    .live-show-row {
        flex-direction: column; /* Auf Mobil untereinander */
        gap: 0.2rem; /* Kleinerer Abstand */
        align-items: flex-start; /* Links ausgerichtet */
        padding: 5px 0; /* Angepasstes Padding */
    }
    .live-show-date,
    .live-show-location,
    .live-show-link {
        width: 100%; /* Volle Breite */
        font-size: 2vh; /* Kleinere Schriftgröße */
        text-align: left; /* Alle Texte linksbündig auf Mobil */
        padding: 0 5px; /* Angleichen an Live Show Location Padding */
    }
    .previous-show-row {
      flex-direction: column;
      align-items: flex-start;
      padding: 5px 0;
    }
    .previous-show-date {
      width: 100%;
      font-size: 2vh;
      text-align: left;
      padding: 0 5px; /* Hier angepasst, um Einrückung zu erhalten */
      min-width: unset;
    }
    .previous-show-location {
      width: 100%;
      font-size: 2vh;
      text-align: left;
      padding: 0 5px; /* Hier angepasst, um Einrückung zu erhalten */
    }
  
    .desktop-long {
        display: none !important;
    }

    .mobile-short {
        display: inline;
    }

    #soundcloud-player {
        height: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: block;
        margin: 0 auto;
    }

}