/* --- GRUNDEINSTELLUNGEN & VARIABLEN --- */
:root {
    --bg-color: #272525; --surface-color: #414040; --primary-color: #b322fc;
    --text-color: #e0e0e0; --text-color-muted: #a0a0a0; --border-color: #333;
    --glow-color: rgba(230, 0, 126, 0.15); --font-body: 'Inter', sans-serif; --font-heading: 'Poppins', sans-serif;
}
/* --- ALLGEMEINE STYLES --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background-color: var(--bg-color); color: var(--text-color); font-family: var(--font-body); line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; }
main { flex-grow: 1; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; color: #fff; margin-bottom: 1rem; }
h1 { font-size: 2.8rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; }
p { margin-bottom: 1rem; }
a { color: var(--primary-color); text-decoration: none; transition: all 0.3s ease; }
a:hover { color: #fff; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.content-wrapper { padding: 4rem 0; }
.button { display: inline-block; background-color: var(--primary-color); color: #fff; padding: 0.75rem 1.5rem; border-radius: 50px; font-weight: bold; text-align: center; transition: all 0.3s ease; border: 2px solid var(--primary-color); }
.button:hover { background-color: transparent; color: var(--primary-color); }

/* --- HEADER & NAVIGATION --- */
header { 
    background-color: rgba(26, 26, 26, 0.8); 
    height: 70px;
    display: flex;
    align-items: center;
    position: sticky; 
    top: 0; 
    z-index: 100; 
    backdrop-filter: blur(10px); 
    border-bottom: 1px solid var(--border-color); 
}
header .container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    width: 100%;
}
.logo img {
    height: 45px; /* Passen Sie diese Höhe nach Belieben an */
    width: auto; /* Breite passt sich automatisch an */
}
ul.main-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.main-nav a { color: var(--text-color); font-weight: 500; padding: 0.5rem 0; position: relative; display: block; }
.main-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: width 0.3s ease; }
.main-nav a:hover::after, .main-nav li.active a::after { width: 100%; }
.main-nav li.active a { color: var(--primary-color); }

/* --- PAGE HERO & HOMEPAGE HERO (V3 - FINAL) --- */

.page-header-banner, .hero {
    position: relative;
    width: 100%;
    background-color: #000;
    color: #fff;
    text-align: center; /* Text-Backup-Zentrierung */
    overflow: hidden;
    
    /* --- HIER IST DIE NEUE ZENTRIERUNGS-MAGIE --- */
    display: grid;
    place-items: center;
}

.page-header-banner {
    height: 350px;
}

.hero {
    height: calc(100vh - 70px); /* Bildschirmhöhe minus Höhe des Headers */
    /* Die Hintergrundgrafik wird jetzt hier definiert, falls das img-Tag fehlt */
    background-image: url('../images/ambient_music_animation.svg');
    background-size: cover;
    background-position: center;
}

.page-header-banner .banner-image, 
.hero .banner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1; /* Bild liegt im Hintergrund */
    opacity: 0.5;
}

.page-header-banner .banner-content, 
.hero .banner-content {
    position: relative;
    z-index: 2; /* Inhalt liegt im Vordergrund */
    max-width: 800px;
    width: 100%;
    padding: 0 1.5rem;
}

.page-header-banner h1, .hero h1 { 
    font-size: 3.5rem;
    margin: 0;
    color: #FFFFFF;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8); 
}

.page-header-banner p, .hero p { 
    font-size: 1.2rem;
    max-width: 600px;
    margin: 1rem auto 0;
    color: #FFFFFF;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); 
}

/* --- Styling für den Inhalt im Hero-Bereich (V2) --- */

/* Wir zentrieren den p-Tag, der das Logo enthält */
.hero .banner-content > p:first-child {
    text-align: center;
}

/* Das Logo selbst */
.hero .banner-content > p > img {
    display: inline-block; /* Besser als block für Zentrierung im p-Tag */
    max-width: 400px;
    width: 100%;
    height: auto;
    margin: -10vh auto 6rem auto; /* Oben negativ, zentriert, unten Abstand */
}

/* Die Überschrift (###), die nach dem Logo kommt */
.hero .banner-content h3 {
    font-size: 2.5rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
    margin-top: 5rem; /* Entfernt den Standard-Abstand oben */
}

/* Der normale Absatztext (p), der NICHT das Logo enthält */
.hero .banner-content p:not(:first-child) {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 1rem auto 0;
    color: var(--text-color);
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* --- KARTEN-DESIGN --- */
.blog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 1.5rem; }
.blog-item-card { background-color: var(--surface-color); padding: 0; margin-bottom: 0; border: 1px solid var(--border-color); border-radius: 12px; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.2); display: flex; flex-direction: column; }
.blog-item-card:hover { transform: translateY(-5px); border-color: var(--primary-color); box-shadow: 0 10px 20px rgba(0,0,0,0.3), 0 0 25px var(--glow-color); }
.blog-item-card .card-content { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.blog-item-card .date { color: var(--text-color-muted); font-size: 0.9rem; margin-bottom: 1rem; }
.blog-item-card p { color: var(--text-color); }
.blog-item-card .button { margin-top: auto; }
.blog-item-card .card-image { width: 100%; height: 200px; object-fit: cover; border-radius: 12px 12px 0 0; }
.blog-post .date { color: var(--text-color); }
.sample-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }

/* --- DROPDOWN-MENÜ --- */
.main-nav li.has-dropdown { position: relative; }
.main-nav .arrow { display: inline-block; width: 0; height: 0; margin-left: 0.5em; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; transition: transform 0.3s ease; }
.main-nav li.has-dropdown:hover .arrow { transform: rotate(180deg); }
.main-nav .dropdown { list-style: none; position: absolute; top: 100%; left: 0; background-color: var(--surface-color); padding: 0.5rem 0; margin-top: 10px; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 10px 20px rgba(0,0,0,0.3); min-width: 200px; z-index: 101; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; }
.main-nav li.has-dropdown:hover > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .dropdown a { padding: 0.75rem 1.5rem; width: 100%; }
.main-nav .dropdown a:hover { background-color: var(--primary-color); color: #fff !important; }
.main-nav .dropdown a::after { display: none; }

/* --- RESPONSIVE & HAMBURGER-MENÜ --- */
.hamburger-button { display: none; background: transparent; border: none; cursor: pointer; padding: 10px; z-index: 1001; position: relative; }
.hamburger-button .line { display: block; width: 25px; height: 3px; background-color: var(--text-color); margin: 5px 0; transition: all 0.3s ease-in-out; }
.hamburger-button.is-active .line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger-button.is-active .line:nth-child(2) { opacity: 0; }
.hamburger-button.is-active .line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.mobile-nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(20, 20, 20, 0.98); backdrop-filter: blur(10px); z-index: 999; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.mobile-nav-overlay.is-active { opacity: 1; visibility: visible; }
.mobile-nav ul { list-style: none; padding: 0; margin: 0; text-align: center; }
.mobile-nav ul li { margin: 2rem 0; }
.mobile-nav ul a { font-family: var(--font-heading); font-size: 1.8rem; color: var(--text-color); }
.mobile-nav li.active a, .mobile-nav ul a:hover { color: var(--primary-color); }
.mobile-nav .dropdown { display: none; }
body.no-scroll { overflow: hidden; }
@media (max-width: 768px) { .desktop-nav { display: none; } .hamburger-button { display: block; } }

/* --- MEDIA SEITE STYLES --- */
.page-introduction {
    margin-bottom: 3rem;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Kachel-Layout für die Übersicht */
.media-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}
a.media-item-card-link {
    text-decoration: none;
    color: var(--text-color);
}
.media-item-card {
    background-color: var(--surface-color);
    padding: 2rem;
    border-radius: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}
.media-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.media-item-card h3 {
    color: var(--primary-color);
}
.media-item-card p {
    color: var(--text-color-muted);
    flex-grow: 1;
}
.button-imitation {
    display: inline-block;
    margin-top: auto;
    font-weight: bold;
}

/* Detailansicht für einen einzelnen Track/Video */
.media-detail-view {
    max-width: 900px;
    margin: 0 auto;
}

.media-description {
    margin-bottom: 2rem; /* Fügt einen sauberen Abstand zum Player darunter hinzu */
    text-align: center;
}
.media-description img { /* Stil für das Coverbild */
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: inline-block;
}

.audio-player-wrapper {
    background-color: var(--surface-color);
    padding: 2rem;
    border-radius: 12px;
}
/* --- ENDE DER ANPASSUNGEN --- */

.audio-player-wrapper h2 { margin-top: 0; }
.audio-player-wrapper audio { width: 100%; margin: 1rem 0; }
.video-wrapper-detail h2 { margin-bottom: 1rem; }
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.video-container iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 8px;
}

//* --- FOOTER --- */
footer {
    background-color: #111;
    padding: 0.2rem 0; /* Einmaliger Innenabstand für den gesamten Footer */
    margin-top: auto;
    border-top: 1px solid var(--border-color);
}

/* Obere Zeile mit Menü und Icons */
.footer-top {
    display: flex;
    align-items: center; /* Hält alles auf einer vertikalen Linie */
    flex-wrap: wrap;
    gap: 2rem; /* Abstand für den Umbruch-Fall */
    margin-bottom: 0.2rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--border-color);
}

.footer-left {
    /* Braucht keine speziellen Regeln */
}

.footer-right {
    margin-left: auto; /* Schiebt diesen Container an das rechte Ende */
}

.footer-nav ul {
    list-style: none; padding: 0; margin: 0;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.footer-nav a {
    color: var(--text-color-muted);
}
.footer-nav a:hover {
    color: var(--primary-color);
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.social-icons a {
    color: var(--text-color); 
    font-size: 1.5rem;
}
.social-icons a:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* Untere Zeile mit Copyright (zentriert) */
.footer-bottom {
    text-align: center;
}
.copyright {
    font-size: 0.9rem;
    color: var(--text-color-muted);
    margin: 0;
}

/* Media Query für Handys */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        justify-content: center;
    }
    .footer-right {
        margin-left: 0; /* Im mobilen Layout den auto-margin aufheben */
    }
    .social-icons {
        margin-top: 1rem;
    }
}
/* --- PAGINIERUNG & MEDIA SEITE --- */
.pagination-wrapper { margin-top: 3rem; text-align: center; }
ul.pagination { display: inline-flex; list-style: none; padding: 0; margin: 0; border: 1px solid var(--border-color); border-radius: 50px; overflow: hidden; background-color: var(--surface-color); }
.pagination-wrapper li { margin: 0; }
.pagination-wrapper li a, .pagination-wrapper li span { display: block; padding: 0.75rem 1.25rem; color: var(--text-color); text-decoration: none; border-left: 1px solid var(--border-color); transition: all 0.3s ease; }
.pagination-wrapper li:first-child a { border-left: none; }
.pagination-wrapper li a:hover { background-color: var(--primary-color); color: #fff; }
.pagination-wrapper li.active span { background-color: var(--primary-color); color: #fff; cursor: default; }
.pagination-wrapper li.disabled span { color: var(--text-color-muted); pointer-events: none; }
.media-section-title { margin-top: 3rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--primary-color); padding-bottom: 0.5rem; }
.audio-list { display: grid; gap: 1.5rem; }
.audio-item-card { background-color: var(--surface-color); padding: 1.5rem; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.audio-item-card h3 { margin: 0; flex-grow: 1; }
.audio-item-card audio { min-width: 250px; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 1.5rem; }
.video-item-card h3 { margin-bottom: 1rem; }
.video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* --- LOGIN-SEITE ANPASSUNGEN (BASIEREND AUF QUELLTEXT) --- */

/* Wir zielen auf die ID des Formulars, um es zu zentrieren und zu gestalten */
#login-form {
    max-width: 450px;       /* Maximale Breite der Login-Box */
    margin: 4rem auto;      /* Zentriert die Box horizontal und gibt Abstand */
    padding: 2.5rem;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Die Eingabefelder innerhalb des Formulars stylen */
#login-form .form-field {
    margin-bottom: 1.5rem;
}

#login-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

#login-form input[type="text"],
#login-form input[type="password"] {
    width: 100%;
    padding: 0.8rem 1rem;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 1rem;
    transition: all 0.3s ease;
}

/* Hover/Fokus-Effekt für die Felder */
#login-form input[type="text"]:focus,
#login-form input[type="password"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 15px var(--glow-color);
}

/* Den Button-Container zentrieren */
#login-form .form-actions {
    margin-top: 2rem;
    text-align: center;
}

/* Den Button selbst stylen, da er bereits unsere .button Klasse hat */
#login-form .form-actions .button {
    /* Die meisten Stile kommen von der globalen .button-Klasse,
       wir können hier bei Bedarf Anpassungen vornehmen. */
}