:root {
    --color-scheme: dark;
    --primary-color: #21252b;
    --qprimary-color: #111111;
    --gprimary-color: #222222;
    --secondary-color: #282c34;
    --accent-color: #7f8c8d;
    --headline-color: #555566;
    --text-color: #99b2b8;
    --link-color: #888899;
    --link-hover-color: #2980b9;
}

/* Grund-Setup */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'Rubik';
    src: url('Rubik-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jetbrains';
    src: url('Rubik-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Linux Biolinum O';
    src: url('LinBiolinumO.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Linux Biolinum OB';
    src: url('LinBiolinumOB.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Amarante';
    src: url('Amarante-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Linux Biolinum O', Georgia, serif;
/*
    font-family: 'Rubik', Georgia, serif;
*/
/*
    font-size: 20px;
*/
    font-size: 1.3rem;
    line-height: 1.4;
    display: flex;
    min-height: 100vh;
    flex-direction: row; /* Desktop: Nebeneinander */
    color: var(--text-color);
    background-color: var(--secondary-color);
}

aside {
    width: clamp(250px, 20vw, 21vw);
    background-color: var(--primary-color);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky; /* Neue Regel */
    top: 0; /* Neue Regel */
    height: 100vh; /* Neue Regel */
    overflow-y: auto; /* auto Scrollbalken visible um Scrollbalken zu vermeiden */
    
}

.artwork {
    display: block; 
    width: 100%;
    border-radius: 3px;
    /* Alle Abstände auf 0 setzen, damit NUR der gap der section steuert */
    margin: 0 auto; 
    padding: 0;
}

.poem {
    font-size: 1.3rem;
    line-height: 1.1;
    margin-left: 1rem;
/*
    margin: -3.5rem auto;
*/
    max-width: fit-content; /* Zentriert das Gedicht als Block, aber hält Text linksbündig */
    font-style: italic;
    white-space: pre-wrap; /* Behält deine Zeilenumbrüche aus der Datei bei */
}

.logo {
    height: 110px;
    margin-top: 8vh;
    margin-bottom: 6vh
}

.logo a {
    text-decoration: none; /* Entfernt Unterstreichung */
    color: inherit; /* Erbt die Textfarbe des Eltern-Elements */
    display: flex; /* Erhält die Flexbox-Eigenschaften des .logo-Containers */
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    width: 100%; /* Volle Breite des .logo-Containers */
    height: 100%; /* Volle Höhe des .logo-Containers */
}

.logo .avatar {
    height: 100%;
    width: auto;
}

/* Banner-Container (für Desktop) */
.banner-container {
/*
    background-color: var(--gprimary-color);
*/
    margin-top: auto; /* Schiebt das Banner nach unten */
    padding: 12px 7px; /* Abstand zum Rand */
    width: 100%;
    display: flex;
    justify-content: center; /* Zentriert das Banner horizontal */
}

/* Banner-Bild */
.banner-img {
    max-width: 95%; /* Skaliert das Bild auf die Container-Breite */
    height: auto; /* Behält das Seitenverhältnis bei */
    display: block; /* Entfernt ggf. Leerraum unter dem Bild */
}

nav ul {
    list-style: none;
}

nav li {
    margin-bottom: 10px;
}

nav a {
/*
    font-family: 'Rubik', Georgia, serif;
*/
    color: var(--link-color);
    text-decoration: none;
    display: block;
    padding: 10px;
    font-size: 1.5rem;
    text-align: center; /* Text zentrieren */
}

nav a:hover {
    color: var(--link-hover-color);
}

/*
main {
    flex-grow: 1;
    padding-bottom: 1vh;
    padding-top: 10vh;
    padding-left: 14vw;
    padding-right: 14vw;
}
*/

main {
    flex-grow: 1;
    padding-top: 10vh;
    padding-bottom: 2vh;
    
    /* Syntax: clamp(Minimum, Flexibler Wert, Maximum) */
    /* Hier: Mindestens 20px, idealerweise 5vw, maximal 14vw */
    padding-left: clamp(20px, 6vw, 14vw);
    padding-right: clamp(20px, 6vw, 14vw);
    
    /* Optional: Damit der Text auf riesigen Monitoren nicht unendlich breit wird */
    max-width: 1200px; 
}

.media-link-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Der Button-Style */
.media-button {
    display: inline-flex;
    align-items: center;
    background-color: var(--primary-color);
    color: var(--text-color) !important; /* !important falls globale A-Tags stören */
    padding: 2px 15px;
    border-radius: 3px;
    border: 1px solid var(--headline-color);
    font-family: 'Rubik', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none !important;
}

.media-button:hover {
    background-color: var(--gprimary-color);
    border-color: var(--link-hover-color);
    color: var(--link-hover-color) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Icons via Pseudo-Elemente (Play-Symbol) */
.media-button::before {
    content: '▶'; /* Einfaches Unicode-Play */
    margin-right: 10px;
    margin-bottom: 5px;
    font-size: 1.3rem;
    color: var(--link-hover-color);
}

/* Spezifische Farben für Video vs Audio (Optional) */
.media-button[data-media-type="video"]::after {
    content: '🎥 VIDEO';
    font-size: 0.7rem;
    opacity: 0.6;
    margin-left: 8px;
}

.media-button[data-media-type="audio"]::after {
    content: '🎶 AUDIO';
    font-size: 0.7rem;
    opacity: 0.6;
    margin-left: 8px;
}

.media-button[data-media-type="link"]::after {
    content: '🔗 LINK';
    font-size: 0.7rem;
    opacity: 0.6;
    margin-left: 8px;
}

.media-button[data-media-type="playlist"]::after {
    content: '🎶 PLAYLIST';
    font-size: 0.7rem;
    opacity: 0.6;
    margin-left: 8px;
}

/* Den Container für die Abstände verantwortlich machen */
section {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Einheitlicher Abstand ZWISCHEN allen Elementen */
}

/* Gemeinsame Eigenschaften */
section h1, 
section h2, 
section h3 {
    margin-top: 0;
    font-family: 'Amarante', Georgia, serif;
    color: var(--headline-color);
}

/* Individuelle Eigenschaften */
section h1 { font-size: 1.9rem; margin-bottom: 20px;}
section h2 { font-size: 1.5rem; margin-top: 1.8rem;}
section h3 { font-size: 1.3rem; margin-top: 0.0rem;}

section ul {
    list-style-position: inside; /* Punkte innerhalb des Inhalts */
}

section a {
    font-family: 'Rubik', sans-serif;
    color: var(--link-color);
    text-decoration: none;
    display: block;
}

section a:hover {
    color: var(--link-hover-color);
}



/* Media Player Styles */
#media-player-container {
    position: fixed;
    bottom: 20px;
    
    /* 1. Startpunkt: Breite des Aside (clamp(250px, 20vw, 21vw)) + das linke Padding des Contents */
    left: calc(clamp(250px, 20vw, 21vw) + clamp(20px, 6vw, 14vw));
    
    /* 2. Maximale Breite: Die gleiche wie dein Main-Content */
    max-width: calc(1200px - (2 * clamp(20px, 6vw, 14vw)));
    
    /* 3. Rechter Abstand: Das rechte Padding des Contents */
    right: clamp(20px, 6vw, 14vw);

    /* Rest bleibt gleich */
    background-color: var(--primary-color);
    border: 1px solid var(--headline-color);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

#media-player-container.hidden {
    /* Instead of display: none, we use opacity and visibility */
    display: block; /* Ensure it stays in the DOM flow for the transition */
    opacity: 0;
    transform: translateY(30px); /* Slides down slightly while fading */
    visibility: hidden; /* Prevents clicking on the invisible player */
}

.player-controls {
    display: flex;
    justify-content: space-between; /* Verteilt Titel links, Button rechts */
    align-items: center;            /* Zentriert beide vertikal */
    margin-bottom: 10px;            /* Ein kleiner fixer Abstand zum Video/Audio */
}

#player-title {
    font-family: 'Rubik', sans-serif;
    font-size: 1.0rem;              /* Etwas dezenter */
    color: var(--link-color);
    text-transform: uppercase;
    margin-top: 0;                  /* WICHTIG: Den alten Margin entfernen */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;        /* Falls der Dateiname zu lang ist */
    padding-right: 10px;
}

#close-player {
    /* Bleibt wie es ist, wird aber durch Flexbox automatisch rechts platziert */
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}

#media-element-wrapper video,
#media-element-wrapper audio {
    width: 100%;
    outline: none;
}


/* Responsive adjustment for Mobile */
@media (max-width: 768px) {
    #media-player-container {
        left: 3vw;
        right: 3vw;
        bottom: 10px;
    }
}

/* Playlistskrempempel */
.player-tracklist {
    list-style: none;
    margin-top: 15px;
    max-height: 200px; /* Falls die Playlist mal sehr lang wird */
    overflow-y: auto;
    border-top: 1px solid var(--headline-color);
    padding-top: 10px;
}

.player-tracklist li {
    font-family: 'Rubik', sans-serif;
    font-size: 0.9rem;
    padding: 8px 10px;
    cursor: pointer;
    color: var(--text-color);
    border-radius: 4px;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
}

.player-tracklist li:hover {
    background-color: var(--gprimary-color);
    color: var(--link-hover-color);
}

.player-tracklist li.is-active {
    background-color: var(--secondary-color);
    color: var(--link-hover-color);
    font-weight: bold;
}

.track-number {
    opacity: 0.5;
    margin-right: 12px;
    font-size: 0.75rem;
    width: 15px;
}












/* Blog  Cards*/
/* 1. Grid-Layout für die Karten-Anordnung */
.blog-card-grid {
display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 40px; /* Mehr Platz für den Zoom-Effekt */
}

.blog-section {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text-color);
}

/* Der Wrapper kontrolliert die Vergrößerung des Umrisses */
.blog-card-wrapper {
    transition: transform 0.3s ease-out;
    z-index: 1;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Hover-Effekt: Der gesamte Umriss wird größer */
.blog-section:hover .blog-card-wrapper {
    transform: scale(1.03); /* Vergrößert das Bild inkl. Badges */
    z-index: 10; /* Verhindert das Überlagern durch andere Karten */
}

.blog-card-image {
    position: relative;
    width: 100%;
    /* Erzwingt 16:9 ohne Cropping, solange das Quellbild 16:9 ist */
    aspect-ratio: 16 / 9; 
    border-radius: 6px;
    overflow: hidden; /* Damit die Ecken des Bildes abgerundet bleiben */
    background-color: var(--primary-color);
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain; /* Zeigt das ganze Bild; 'cover' füllt die Box */
}

/* Der neue Container für die untere linke Ecke */
.badge-container-bottom {
    position: absolute;
    bottom: 6px;
    left: 6px;
    display: flex;
    gap: 6px; /* Abstand zwischen den einzelnen Badges */
    flex-wrap: wrap; /* Falls es mal zu viele für eine Zeile werden */
}

/* Allgemeine Badge-Styling (bleibt fast gleich) */
.badge {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-family: 'Rubik', sans-serif;
    white-space: nowrap; /* Verhindert Zeilenumbruch im Badge selbst */
}

/* Datum bleibt separat oben rechts */
.badge-date {
    position: absolute;
    top: 6px;
    right: 6px;
}

/* badge-media braucht jetzt kein 'position: absolute' mehr, 
   da es im Flex-Container liegt */
.badge-media {
    position: relative; 
}

/* Text unter dem Bild */
.blog-card-content {
    padding: 5px 0;
}

.blog-card-content h3 {
    font-family: 'Linux Biolinum O', Georgia, serif;
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    color: var(--headline-color);
}

.blog-card-content p {
    font-size: 0.95rem;
    mask-image: none; /* Fade-out entfernen für klaren Look */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Max 2 Zeilen Text */
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-color); /* Nutzt deine definierte Textfarbe */
}

/* Verhindert explizit, dass der Text die Link-Farbe beim Hovern annimmt */
.blog-section:hover .blog-card-content p {
    color: var(--text-color) !important; 
}

/* Album Card Basis (als Link-Container) */
.album-card {
    text-decoration: none !important;
    color: inherit !important;
    display: flex;
    flex-direction: column;
    /* max-width: 300px;  <- Optional, falls du sie kleiner als Blogposts willst */
    cursor: pointer;
}

/* Der Zoom-Wrapper (analog zu .blog-card-wrapper) */
.album-card-wrapper {
    transition: transform 0.3s ease-out;
    z-index: 1;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Hover-Effekt: Nur das Bild/Wrapper vergrößern */
.album-card:hover .album-card-wrapper {
    transform: scale(1.03);
    z-index: 10;
}

/* Thumbnail-Handling */
.album-thumbnail-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.album-thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Titel-Styling (Exakt wie bei den Blog-Cards) */
.album-card-content {
    padding: 10px 0;
}

.album-card-content h3 {
    font-family: 'Linux Biolinum O', Georgia, serif; 
    margin: 0;
    font-size: 1.2rem;
    color: var(--headline-color);
}

/* Overlays auf dem Bild */
.album-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 8px;
/*
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
*/
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.album-stat-badge {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-family: 'Rubik', sans-serif;
}



/* Spezifisches Seitenverhältnis für Notenblätter (A4-ish) */
.sheet-card .album-thumbnail-wrapper {
    aspect-ratio: 1 / 1.414; /* Klassisches DIN-Format */
}

/* Falls die Thumbnails nicht exakt geschnitten sind, sorgt 'contain' 
   dafür, dass nichts abgeschnitten wird, 'cover' füllt den Rahmen */
.sheet-card .album-thumbnail-wrapper img {
    object-fit: cover;
    /* Hilft manchen Browsern, Kanten sauberer zu glätten */
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: high-quality;
}

/* Anpassung der Badge-Position für das Hochformat */
.sheet-card .badge-date {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
}



.icon-container {
    display: flex;
    gap: 10px;
}

.svg-transition-container {
 position: relative;
 display: inline-block;
 width: 100px; /* An deine SVG-Größe anpassen */
 height: 100px; /* An deine SVG-Größe anpassen */
 margin: 0px auto;
 cursor: pointer;
}

.svg-image {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 transition: opacity 0.8s ease-in-out;
}

.svg-b {
 opacity: 0;
}

.svg-transition-container:hover .svg-a {
 opacity: 0;
}

.svg-transition-container:hover .svg-b {
 opacity: 1;
}



@media (max-width: 768px) {
    body {
        flex-direction: column; /* Alles untereinander */
        font-size: 1.2rem;
        line-height: 1.35;
    }

    /* Individuelle Eigenschaften */
    section h1 { font-size: 1.6rem}
    section h2 { font-size: 1.3rem}
    section h3 { font-size: 1.2rem}

    aside {
        width: 100%;
        padding: 10px;
        position: static;
        height: auto;
        padding: 0;
        padding-top: 10px;
    }

    .logo {
        height: 75px;
        margin: 0;
        margin-bottom: 0.3rem;
    }

    .banner-container {
        display: none;
    }

    .artwork {
        width: 100%;
    }

    .poem {
        font-size: 1.2rem;
    }
    
    nav ul {
        display: flex; /* Menüpunkte horizontal */
        gap: 10px;
    }

    nav li {
        flex: 1;
        margin-bottom: 0;
    }

    nav a {
        font-size: 1.4rem;
        text-align: center;
        padding: 5px;
    }
    
    main {
        padding-top: 1vh;
        padding-top: 2vh;
        padding-left: 3vw;
        padding-right: 3vw;
    }

    section {
        gap: 15px; /* Etwas kompakter für kleine Bildschirme */
    }
    
    /* Die Buttons in den Containern können mobil breiter sein */
    .media-button {
        width: 100%; 
        justify-content: center;
    }

    section p {
        text-align: justify; /* Blocksatz */
    }
}