/* ---------- Fonts ---------- */
@font-face {
    font-family: 'Radlush';
    src: url('../Fonts/Radlush-ExtraBold.ttf') format('truetype');
    font-weight: 800;
}
@font-face {
    font-family: 'Radlush';
    src: url('../Fonts/Radlush-SemiBold.ttf') format('truetype');
    font-weight: 600;
}
@font-face {
    font-family: 'InstrumentSerifItalic';
    src: url('../Fonts/InstrumentSerif-Italic.ttf') format('truetype');
}
@font-face {
    font-family: 'ZT Nature';
    src: url('../Fonts/ZTNature-ExtraBold.woff2') format('woff2'),
         url('../Fonts/ZTNature-ExtraBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
}


/* ---------- Grundfarben ---------- */
body {
    margin: 0;
    padding: 0;
    background-color: #202826;
    font-family: Arial, sans-serif;
    color: black;
}


/* ---------- Container ---------- */
.dve-container {
    display: flex;
    flex-direction: row;
    height: 100vh;        /* volle Viewport-Höhe */
    margin: 0;
    padding: 0;
}

/* ---------- Linke Spalte ---------- */
.dve-left {
    width: 35%;
    flex: 0 0 35%;
    max-width: 35%;
    background-color: #cfd3d1;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-right: 2px solid black;
    color: black;
    overflow-y: auto;

    padding-bottom: 60px; /* Platz für fixierten Footer */
    position: relative;    /* für Footer absolut */
    height: 100%; 
}


/* Scrollbar */
.dve-left::-webkit-scrollbar {
    width: 4px;
}
.dve-left::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.3);
    border-radius: 2px;
}
.dve-left::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- Rechte Spalte ---------- */
.dve-right {
    flex: 1;
    background-color: #cfd3d1;
    color: black;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

/* ---------- Titel/Subline ---------- */
.dve-title {
    font-family: 'Radlush', sans-serif;
    font-size: 5.6em;
    font-weight: 800;
    margin: 0 0 20px 0;
    line-height: 0.8;
    text-transform: uppercase;
    cursor: pointer;
    color: black;
    transition: color 0.3s ease, transform 0.2s ease;
}
.dve-title:hover {
    color: #444;
    transform: translateX(3px);
}

.dve-subline {
    font-family: 'InstrumentSerifItalic', serif;
    font-size: 1.5em;
    margin: 0;
    line-height: 1.4;
}

/* More Text */
.dve-more-wrapper {
    margin-top: 0;
}
.dve-more-link {
    font-family: 'InstrumentSerifItalic', serif;
    font-size: 1em;
    line-height: 1.4;
    cursor: pointer;
    color: black;
    display: inline-block;
}
#more-text {
    display: none;
    margin-top: 15px;
    font-family: Arial, sans-serif;
    font-size: 1em;
    line-height: 1.4;
}
#more-text.show {
    display: block;
}

/* ---------- Konzerttermine ---------- */
.year-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.year-label {
    display: grid;
    grid-template-columns: 190px 1fr;
    align-items: baseline;
    cursor: pointer;
    width: 100%;
    border-bottom: 2px solid black;
    position: relative;
    transition: transform 0.2s ease, color 0.2s ease;
    gap: 10px;
}
.year-date {
    font-family: 'ZT Nature', sans-serif;
    font-weight: 900;
    font-size: 1.8em;
    letter-spacing: 2px;

    /* Hollow Text für WebKit-Browser */
    color: transparent;
    -webkit-text-stroke: 1.5px black;

    /* Fallback für Firefox & andere Browser */
    text-stroke: 1.5px black; /* experimentell, ggf. ignoriert */
    -moz-text-fill-color: black; /* Firefox-Fallback */
    color: black; /* generelle Fallback-Farbe */
}

.year-artist {
    font-family: 'ZT Nature', sans-serif;
    font-weight: 900;
    font-size: 1.8em;
    color: black;
}
.year-label::after {
    content: "▼";
    font-size: 1.2em;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.year-label:hover {
    transform: translateX(3px);
}
.year-label:hover .year-date {
    color: black;
    -webkit-text-stroke: 0;
}
.year-label:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(3px);
}
.year-list li.active .year-date {
    color: black;
    -webkit-text-stroke: 0;
}
.year-list li.active .year-label::after {
    content: "▲";
    opacity: 1;
}
.year-description {
    display: none;
    font-family: Arial, sans-serif;
    font-size: 1em;
    line-height: 1.4;
    margin-top: 0.3em;
}
.year-description.show {
    display: block;
}

/* ---------- Default image ---------- */
.default-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}
.default-image img {
    max-width: 90%;
    max-height: 75vh;
    object-fit: contain;
}

/* ---------- Footer links fixiert ---------- */
.dve-footer {
    position: fixed; /* fixiert auf der gesamten Seite */
    bottom: 0;       /* ganz unten */
    left: 0;         /* links am Bildschirm */
    width: calc(35% - 2px); /* gleiche Breite wie linke Spalte minus Trennlinie */
    padding: 10px 20px 10px 20px;
    background-color: #cfd3d1;
    font-family: Arial, sans-serif;
    font-size: 0.9em;
    color: black;
    border-top: none; 
    box-sizing: border-box;
    z-index: 100;    /* über Scroll-Inhalt, unter Top-Nav */
}

.dve-footer a {
    font-weight: normal!important; 
    color: black;
    text-decoration: none !important; 
    transition: color 0.3s ease;
  }
  
  .dve-footer a:hover {
    color: #444;
    text-decoration: none;
  }


/* ---------- Top Navigation ---------- */
.top-nav {
    position: fixed;
    top: 20px;
    right: 35px;
    display: flex;
    gap: 15px;
    font-family: 'Radlush', sans-serif;
    font-weight: 400;
    font-size: 1em;
    z-index: 1000;
}
.top-nav-btn {
    cursor: pointer;
    color: black;
}
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 120%;
    background-color: #cfd3d1;
    min-width: 150px;
    border: 1px solid black;
    z-index: 1000;
}
.dropdown-content a {
    display: block;
    padding: 5px 10px;
    color: black;
    text-decoration: none !important;
    transition: color 0.3s ease, transform 0.2s ease;
}
.dropdown-content a:hover {
    color: #444;
    transform: translateX(3px);
    background-color: transparent;
}


/* ---------------- GALLERY ---------------- */
/* Wrapper für Bild + Pfeile */
.gallery-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Bild */
/* Flex Galerie-Wrapper */
.gallery-wrapper-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Abstand Pfeile ↔ Bild */
}

/* Pfeile hollow */
.gallery-prev,
.gallery-next {
    font-family: 'ZT Nature', sans-serif;
    font-weight: 900;
    font-size: 1.2em;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px black; /* hollow */
    transition: color 0.2s ease, -webkit-text-stroke-color 0.2s ease;
}

/* Hover: grau */
.gallery-prev:hover,
.gallery-next:hover {
    color: gray;
    -webkit-text-stroke-color: gray;
}

/* Klick / Tastatur: schwarz kurzzeitig */
.gallery-prev.clicked,
.gallery-next.clicked {
    color: black;
    -webkit-text-stroke-color: black;
}


/* ---------- Globale Links (links, rechts, Dropdown) ---------- */
.dve-left a,
.dve-right a,
.dropdown-content a {
    color: black;
    font-weight: bold;
    text-decoration: underline;
    transition: color 0.3s ease, transform 0.2s ease;
}

.dve-left a:hover,
.dve-right a:hover,
.dropdown-content a:hover {
    color: #444;
    transform: translateX(3px);
}

/* Galerie Wrapper */
.gallery-image-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;  /* Bild horizontal zentriert */
    justify-content: flex-start;
    width: 100%;
    max-width: 90%;
    box-sizing: border-box;
}

.gallery-image-wrapper img.gallery-image {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    display: block;
}

.gallery-caption {
    font-family: Arial, sans-serif;
    font-size: 0.9em;
    color: black;
    text-align: left;
    margin-top: 5px;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
}

.year-description.show::after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 2px solid black;
    margin-top: 10px; /* Abstand nach Text */
}