/* ---------------- BASIS ---------------- */
body {
    margin: 0;
    font-family: 'Cabin', sans-serif;
    background: #fff;
    color: #3B3B3B;
}


/* ---------------- CONTAINER ---------------- */
.container {
    width: 100%;
    padding: 0 3rem;
    /* horizontale Ränder */
    margin: 0 auto;
    box-sizing: border-box;
}

/* ---------------- HEADER ---------------- */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.0rem 0;
    /* oben/unten Padding, horizontal übernimmt container */
    color: #3B3B3B;
    gap: 1.5rem;
}

.site-header .logo {
    font-family: 'Cabin', sans-serif;
    font-weight: 6 00;
    font-size: clamp(2.5rem, 4.0vw, 4.5rem);
    line-height: 1.1;
    flex: 1 1 auto;
}

.main-nav {
    display: flex;
    gap: clamp(1rem, 5vw, 40rem);
    /* min 1rem, ideal 2% der Viewport-Breite, max 3rem */
}

.main-nav a {
    font-family: 'Cabin', sans-serif;
    font-weight: 550;
    font-size: clamp(1.4rem, 2.0vw, 3.0rem);
    text-decoration: none;
    color: #3B3B3B;
    white-space: nowrap;
    padding: 0.1em 0.4em;
    /* Abstand um die Schrift */
    border-radius: 0;
    /* eckige Kanten */
    background: transparent;
    transition: color 0.2s ease, background 0.2s ease;
    /* nur Farben animieren */
}

.main-nav a:hover {
    color: #fff;
    background: #3B3B3B;
    /* Kein Zoom, kein Padding-Wechsel, nur Farbe ändert sich */
}





/* ---------------- SECTION ÜBERSCHRIFTEN ---------------- */
h2 {
    font-family: 'Cabin', sans-serif;
    font-weight: 600;
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    /* kleiner */
    color: #3B3B3B;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

h2 span {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    /* kleiner als LIVE */
    font-weight: 600;
    display: block;
    margin-top: 0.2rem;
}



/* ---------------- SECTION ÜBERSCHRIFTEN ---------------- */
h2 {
    font-family: 'Cabin', sans-serif;
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #3B3B3B;
    margin-bottom: 2rem;
    /* aktuell: 2rem, wir reduzieren für Covers auf 2/3 */
    line-height: 1.2;
}

/* Span innerhalb H2 (z.B. Jahr) */
h2 span {
    font-size: clamp(1.2rem, 3vw, 2rem);
    /* kleiner als LIVE, responsive */
    font-weight: 600;
    display: block;
    /* Zeilenumbruch unter LIVE */
    margin-top: 0.2rem;
}

/* ---------------- COVERS ---------------- */


.cover-controls {
    pointer-events: auto;   /* Buttons dürfen klicken */
}

.covers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 1rem 0;
    /* statt 3rem oben/unten */
}

.cover {
    position: relative;
    display: block;
    overflow: hidden;
}

.cover img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

.cover .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%;
    /* bleibt proportional zur Cover-Höhe */
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    padding-left: 5%;
    /* proportional zum Bild */
    padding-right: 3%;
}

.cover:hover .overlay {
    opacity: 1;
}

.overlay-text {
    font-family: 'Cabin', sans-serif;
    text-transform: none;
    /* normale Groß-/Kleinschreibung */
    color: white;
    font-size: clamp(0.7rem, 1vw, 1rem);
    /* leicht größer als vorher */
    line-height: 1.5;
    text-decoration: none;
    text-align: left;
    padding-top: 8%;
    /* Abstand von oben im Overlay */
}

.overlay-text span {
    font-size: clamp(0.6rem, 1vw, 0.95rem);
    font-style: italic;
    display: block;
    line-height: 1.4;
    margin-top: 5%;
    ;
    /* kleiner Abstand zur Zeile darüber */
    color: white;
}


.covers {
    position: relative;
}

.covers::after {
    content: "*on some of the tracks";
    position: absolute;
    right: 0;
    bottom: -1.4rem;
    /* Abstand unter den Covers */
    font-family: 'Cabin', sans-serif;
    font-size: 1rem;
    color: #3B3B3B;
    white-space: nowrap;
}


/* ---------------- NEU BUTTON ---------------- */



.cover {
    position: relative;
}

/* Controls Container */
.cover-controls {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    right: 0.6rem;
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 3;
}

.cover:hover .cover-controls {
    opacity: 1;
}

/* Play / Pause Button */
.play-btn {
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.7);
    border: none;
    cursor: pointer;
    position: relative;
}

/* Play Icon */
.play-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 10px solid white;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* Pause State */
.play-btn.is-playing::before {
    content: '';
    width: 10px;
    height: 14px;
    border: none;
    background: linear-gradient(
        to right,
        white 0 40%,
        transparent 40% 60%,
        white 60% 100%
    );
    left: 50%;
}

/* More Button */
.more-btn {
    background: rgba(0,0,0,0.7);
    color: white;
    font-family: 'Cabin', sans-serif;
    font-size: 0.9rem;
    padding: 0.4rem 0.7rem;
    text-decoration: none;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* ---------------- SECTION ---------------- */
section {
    text-align: center;
}

.covers {
    margin-bottom: 6rem;
    /* mehr Abstand NACH der Note */
}

#live,
#video,
#bio {
    padding-bottom: 4rem;
    scroll-margin-top: 2rem;
}


#live h2 {
    margin-bottom: 5rem;
    /* Mehr Abstand unter Live/2025 vor den Terminen */
}

/* ---------------- TERMIN-DATEN ---------------- */
.dates {
    display: grid;
    row-gap: 1em;
}

.event {
    display: block;
}

.event-link {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    color: #3B3B3B;
    text-decoration: none;
    transition: transform 0.18s ease;
    transform-origin: center;
}

.event-link:not(.is-disabled):hover {
    transform: scale(1.025);
}

.event-link.is-disabled {
    pointer-events: none;
    opacity: 1;
}

.title {
    font-family: 'EB Garamond', serif;
    font-weight: 300;
    text-align: right;
    padding-right: 3rem;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    white-space: nowrap;
    color: #3B3B3B;
}

.date {
    font-family: 'Cabin', sans-serif;
    font-weight: 700;
    text-align: center;
    min-width: 9ch;
    font-size: clamp(0.8rem, 1.5vw, 1.0rem);
    white-space: nowrap;
    color: #3B3B3B;
}

.place {
    font-family: 'EB Garamond', serif;
    font-weight: 300;
    text-align: left;
    padding-left: 3rem;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    white-space: nowrap;
    color: #3B3B3B;
}



/* Sprachumschalter */
.lang-switcher {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    /* Buttons mittig */
    gap: 0.5rem;
}

.lang-switcher button {
    background: none;
    border: none;
    color: #3B3B3B;
    font-family: 'Cabin', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.4rem 1rem;
    cursor: pointer;
    border-radius: 0;
    /* keine Rundung im Normalzustand */
    transition: all 0.2s ease;
    appearance: none;
}

.lang-switcher button:hover {
    background: #3B3B3B;
    color: #fff;
    border-radius: 0px;
    /* eckige Kanten beim Hover */
}




.bio-text {
    font-family: 'EB Garamond', serif;
    /* klassische Serifenschrift */
    font-size: clamp(1.1rem, 1.2vw, 1.2rem);
    line-height: 1.8;
    /* großzügiger Zeilenabstand */
    text-align: justify;
    /* Blocksatz */
    margin: 0 auto;
    max-width: 1000px;
    /* schmalere Ränder bei breiten Bildschirmen */
}

.bio-text p {
    margin-bottom: 0rem;
}

.bio-text strong {
    font-weight: 700;
    /* fett */
}

.bio-text.active {
    display: block;
}


html {
    scroll-behavior: smooth;
}



.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 2rem 0;
}

.youtube-wrapper {
    position: relative;
    cursor: pointer;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 Verhältnis */
    overflow: hidden;
}

.youtube-wrapper img.youtube-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.youtube-wrapper .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.8);
    clip-path: polygon(20% 15%, 20% 85%, 80% 50%);
}


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



.footer-image-container {
    width: 80%;
    max-width: 400px;   /* optional: begrenzt auf Desktop */
    margin: 0 auto;       /* zentriert */
    padding: 0rem 0rem;   /* optional: Abstand */
    margin-bottom: 3rem;
}

.footer-image-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;    /* Bild füllt Container, verzerrt aber nicht */
    border-radius: 0;     /* falls du keine Rundungen willst */
}

/* Footer Social Icons */
.footer-social {
    text-align: center; /* mittig */
    margin: 3rem 0;   /* Abstand über und unter dem Icon */
}

.footer-social a img {
    width: 40px;        /* Icon-Größe */
    height: 40px;
    transition: transform 0.2s ease;
}

.footer-social a:hover img {
    transform: scale(1.1); /* kleiner Zoom-Effekt beim Hover */
}


.site-footer {
    padding: 1rem 0;
    text-align: center;
    font-family: 'Cabin', sans-serif;
    font-size: 0.9rem;
    color: #3B3B3B;
}

/* Allgemeine Footer-Links (Impressum etc.) */
.site-footer a {
    color: #3B3B3B;
    text-decoration: none;
    font-weight: 550; /* normal, nicht fett */
    transition: color 0.2s ease, background 0.2s ease;
    padding: 0.2em 0.4em; /* optional für Hover-Padding */
    border-radius: 0;
}

/* Hover-Effekt wie bei der Navigation */
.site-footer a:hover {
    color: #fff;
    background: #3B3B3B;
}

/* Mailadresse im Footer größer und mit Abstand nach unten */
.site-footer p.mail {
    font-size: 1.2rem;   /* größer als Impressum-Zeile */
    margin-bottom: 3rem; /* mehr Abstand nach unten */
}




/* ---------------- MOBILE ---------------- */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        /* oder 0 für komplett ohne Rand */
        padding-right: 1rem;
    }

    .site-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 0;
    }

    .site-header .logo {
        font-size: clamp(2.5rem, 8vw, 6.5rem);
        line-height: 1.1;
        text-align: center;
        max-width: 1200px;
        /* gleiche Breite wie .covers */
        width: 100%;
        margin: 0 auto;
        letter-spacing: 0.05em;
        /* etwas Platz zwischen Buchstaben */
    }

    .main-nav {
        flex-direction: row;
        justify-content: center;
        gap: 1.5rem;
        width: 100%;
    }

    /* Covers untereinander */
    .covers {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .cover {
        width: 100%;
    }

    .overlay-text {
        font-size: clamp(1rem, 2.5vw, 1.2rem);
        line-height: 1.6;
        /* etwas mehr Zeilenhöhe für bessere Lesbarkeit */
        padding-top: 8%;
        /* optional: mehr Abstand von oben */
    }

    .overlay-text span {
        font-size: clamp(0.9rem, 2vw, 1.1rem);
        line-height: 1.5;
        margin-top: 1rem;
        /* Abstand zur darüberliegenden Zeile */
    }

    .event-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 0.3em;
        margin-bottom: 1em;
    }

    .date {
        order: 1;
    }

    .title {
        order: 2;
    }

    .place {
        order: 3;
    }

    .title,
    .date,
    .place {
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: auto !important;
    }

    .date {
        font-size: 1.3rem;
    }

    .title {
        font-size: 1.5rem;
    }

    .place {
        font-size: 1.5rem;
    }



    /* Live Termine untereinander */
    .dates {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* zentriert die Links */
        row-gap: 1rem;
        padding: 0;
    }

    .event-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Text in der Mitte */
        row-gap: 0.5em;
        margin-bottom: 1rem;

        width: 100%;
        /* volle Breite des Containers */
        max-width: 100%;
        /* kein Limit */
        text-align: center;
        /* Text zentrieren */
        padding-left: 0.5rem;
        /* optional kleine Innenränder */
        padding-right: 0.5rem;
        box-sizing: border-box;
        /* Innenränder zählen zur Breite */
    }

    .title,
    .date,
    .place {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: auto !important;
    }

    /* Schriftgrößen mobil */
    .date {
        font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    }

    .title {
        font-size: clamp(1.15rem, 3vw, 1.35rem);
    }

    .place {
        font-size: clamp(1.15rem, 3vw, 1.35rem);
    }

    .bio-text {
        max-width: none;
        width: 100%;
        text-align: left;
        /* Blocksatz wirkt mobil oft zu eng */
        text-align: justify;
        /* Blocksatz behalten */
    }

    #video {
        padding-left: 0.2rem;
        padding-right: 0.2em;
    }

    .video-grid {
        padding-left: 0;
        padding-right: 0;
    }

    .bio-text {
        font-size: clamp(1.1rem, 3vw, 1.3rem);
    }

    /* Abstand unter Überschrift kleiner */
    #live h2,
    #video h2,
    #bio h2 {
        margin-bottom: 2rem;
    }
    .video-grid {
        grid-template-columns: 1fr;
    }
}