/* ---------- 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');
}

/* ---------- ZT Nature Fonts ---------- */

/* ZT Nature Bold */
@font-face {
    font-family: 'ZT Nature';
    src: url('../Fonts/ZTNature-Bold.woff2') format('woff2'),
         url('../Fonts/ZTNature-Bold.otf') format('opentype');
    font-weight: 700;  /* Bold */
    font-style: normal;
}

/* ZT Nature Bold Italic */
@font-face {
    font-family: 'ZT Nature';
    src: url('../Fonts/ZTNature-BoldItalic.woff2') format('woff2'),
         url('../Fonts/ZTNature-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}

/* ZT Nature ExtraBold */
@font-face {
    font-family: 'ZT Nature';
    src: url('../Fonts/ZTNature-ExtraBold.woff2') format('woff2'),
         url('../Fonts/ZTNature-ExtraBold.otf') format('opentype');
    font-weight: 800;  /* ExtraBold */
    font-style: normal;
}

/* ZT Nature ExtraBold Italic */
@font-face {
    font-family: 'ZT Nature';
    src: url('../Fonts/ZTNature-ExtraBoldItalic.woff2') format('woff2'),
         url('../Fonts/ZTNature-ExtraBoldItalic.otf') format('opentype');
    font-weight: 800;
    font-style: italic;
}



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

/* ---------- Container ---------- */
.sc-container {
    display: flex;
    height: 100vh;
}

/* ---------- Linke Spalte ---------- */
.sc-left {
    flex: 0 0 35%;
    max-width: 35%;
    background-color: #cfd3d1;
    padding: 20px;
    padding-bottom: 60px; /* extra Platz für Footer */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-right: 2px solid black;
    color: black;
    overflow-y: auto;
}

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

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

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

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

/* ---------- More Text ---------- */
.sc-more-wrapper {
    margin-top: 0;
}
.sc-more-link {
    font-family: 'InstrumentSerifItalic', serif;
    font-size: 1em;
    line-height: 1.4;
    cursor: pointer;
    color: black;
    transition: color 0.3s ease, transform 0.2s ease;
    display: inline-block;
}
.sc-more-link:hover {
    color: #444;
    transform: translateX(3px);
}

#more-text {
    display: none;
    margin-top: 15px;
    font-family: Arial, sans-serif;
    font-size: 1em;
    line-height: 1.4;
    color: black;
}
#more-text.show {
    display: block;
}

/* ---------- Jahreszahlen ---------- */
.year-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------- Jahreszahlen mit ZT Nature ---------- */
.year-label {
    font-family: 'ZT Nature', sans-serif;
    font-weight: 900;
    font-size: 2.5em;
    cursor: pointer;
    display: inline-block;
    width: 100%;
    border-bottom: 2px solid black;
    transition: color 0.3s ease, transform 0.2s ease;

    /* --- Hollow Effekt nur in WebKit Browsern --- */
    color: transparent;
    -webkit-text-stroke: 2px black;

    /* Fallback für Firefox: normal schwarz */
    @supports not (-webkit-text-stroke: 2px black) {
        color: black;
        -webkit-text-stroke: 0;
    }

    position: relative;
}

.year-label::after {
    content: "▼";               /* Pfeil nach unten */
    font-size: 0.5em;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.year-label:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(3px);
}

.year-label:hover {
    color: #444;
    transform: translateX(3px);
}

/* Aktive Jahreszahl */
.year-list li.active .year-label {
    color: black;
}

/* Pfeil nach oben für aktive Jahreszahl */
.year-list li.active .year-label::after {
    content: "▲";  /* Pfeil nach oben */
    opacity: 1;
}

.year-list li.active .year-label:hover {
    color: #444;
    transform: translateX(3px);
}

.year-description {
    display: none;
    font-family: Arial, sans-serif;
    font-size: 1em;
    line-height: 1.4;
    margin-top: 0.3em;
    color: black;
}
.year-description.show {
    display: block;
}

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

.sc-external-link {
    color: black;
    font-weight: bold;
    text-decoration: underline;
    transition: color 0.3s ease, transform 0.2s ease;
}

.sc-external-link:hover {
    color: #444;
    transform: translateX(3px);
}

.sc-footer {
    position: fixed;          
    bottom: 0;                
    left: 0;                  
    width: calc(35% - 2px);   /* exakt wie linke Spalte minus Trennlinie */
    background-color: #cfd3d1;
    padding: 10px 20px 10px 20px;       /* wie Dive */
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 0.9em;
    color: black;
    z-index: 100;             /* über Content, unter Top-Nav */
}

.sc-footer a {
    color: black;
    text-decoration: none;
    font-weight: normal;
}

.sc-footer a:hover {
    color: #444;              /* wie Dive */
}

/* ---------- Top Navigation rechts oben ---------- */
.top-nav {
    position: fixed;
    top: 20px;             /* Abstand vom oberen Rand */
    right: 35px;           /* Abstand rechts analog links zum Titel */
    display: flex;
    gap: 15px;
    font-family: 'ZT Nature', sans-serif;   
    font-weight: 400;       /* normal, nicht bold */
    font-size: 1em;         /* kleinere, einheitliche Schrift */
    z-index: 1000;
}

.top-nav-btn {
    cursor: pointer;
    position: relative;
    color: black;
    transition: color 0.3s ease, transform 0.2s ease;
    font-weight: 400;       /* sicherstellen, dass normal */
}

.top-nav-btn:hover {
    color: #444;
    transform: translateY(-1px);
}

/* Dropdown */
.dropdown-btn {
    user-select: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 120%;
    background-color: #cfd3d1;
    min-width: 150px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    border: 1px solid black;
    z-index: 1000;
}

.dropdown-content a {
    display: block;
    padding: 5px 10px;
    color: black;
    text-decoration: none;
    font-weight: 400;       /* ebenfalls normal */
    transition: background 0.2s ease;
}

.dropdown-content a:hover {
    background-color: #e0e0e0;
}