/* ================================================================
   THE SOMNIA PROJECT — style.css
   ================================================================
   SCHNELL-REFERENZ: Alle wichtigen Design-Variablen sind in :root
   gesammelt. Optische Änderungen bitte NUR dort vornehmen.

   HELL-/DUNKEL-MODUS:
     Der Standard ist Hell (eierfarben-weiß).
     Der Dunkelmodus greift automatisch über das Betriebssystem /
     den Browser via @media (prefers-color-scheme: dark).
     Dunkle Variablen sind im dark-Block weiter unten gepflegt.

   ABSCHNITTE:
     1. Design-Variablen – Hellmodus (:root)
     2. Design-Variablen – Dunkelmodus (@media prefers-color-scheme)
     3. Basis / Reset
     4. Hero-Sektion
     5. Hauptbereich (Beschreibung + Tracklist)
     6. Song-Liste
     7. Download-Modal
     8. Footer
     9. Animationen
    10. Responsive (Bootstrap-Ergänzungen)
   ================================================================ */


/* ================================================================
   1. DESIGN-VARIABLEN — HELLMODUS (Standard)
   ================================================================ */
:root {

    /* ── Hintergrundfarben (Hell) ───────────────────────────────
       --color-page-bg      → Hintergrund der gesamten Seite / Hero
       --color-section-bg   → Hintergrund des Hauptbereichs
       --color-songs-bg     → Hintergrund der Tracklist-Box
       --color-modal-bg     → Hintergrund des Modals
       --color-footer-bg    → Hintergrund des Footers
    ────────────────────────────────────────────────────────────── */
    --color-page-bg:     #f5f0e8;
    --color-section-bg:  #ede9e3;
    --color-songs-bg:    #1e1c1a;
    --color-modal-bg:    #1c1917;
    --color-footer-bg:   #1e1c1a;

    /* ── Textfarben (Hell) ──────────────────────────────────────
       --color-title-plain  → THE und PROJECT im Hero
       --color-text-dark    → Fließtext im hellen Bereich
       --color-text-muted   → gedämpfte Texte, Labels, Metadaten
       --color-text-light   → Text auf dunklem Hintergrund
    ────────────────────────────────────────────────────────────── */
    --color-title-plain: #1a1816;
    --color-text-dark:   #3a3735;
    --color-text-muted:  #6e6966;
    --color-text-light:  #f0ece6;

    /* ── Pastel-Farbpalette (Hell) ──────────────────────────────
       Im Dunkelmodus (Abschnitt 2) werden diese etwas kräftiger.
    ────────────────────────────────────────────────────────────── */
    --color-green:        #58b840;   /* Grün  – kräftiger, noch entspannt */
    --color-rose:         #c04560;   /* Rosa  – wärmer, mehr Präsenz      */
    --color-lilac:        #8f4fc0;   /* Lila  – tiefer, lebendiger        */
    --color-green-light:  #aadc9e;   /* Helles Grün (Deko-Kreise)         */
    --color-rose-light:   #cc6e80;   /* Helles Rosa (Deko-Kreise)         */
    --color-lilac-light:  #a870d8;   /* Helles Lila (Deko-Kreise)         */

    /* ── Orb-Deckkraft ──────────────────────────────────────────
       Im Dunkelmodus (Abschnitt 2) etwas reduziert.
    ────────────────────────────────────────────────────────────── */
    --orb-opacity: 0.32;   /* Hellmodus: deutlicher sichtbar, noch dezent */

    /* ── SOMNIA-Ombré ───────────────────────────────────────────
       Statischer Farbverlauf von links nach rechts.
       Richtung ändern: 90deg → z.B. 135deg für diagonal.
    ────────────────────────────────────────────────────────────── */
    --gradient-somnia: linear-gradient(
        90deg,
        #58b840  0%,
        #c04560  50%,
        #8f4fc0  100%
    );
    --gradient-accent: linear-gradient(135deg, #58b840, #c04560, #8f4fc0);

    /* ── Schriften ──────────────────────────────────────────────
       Schrift wechseln: Wert hier + Google-Fonts-URL in index.php.
       Gute Display-Alternativen: Poppins, Outfit, Quicksand
    ────────────────────────────────────────────────────────────── */
    --font-display: 'Nunito', sans-serif;
    --font-body:    'Jost', sans-serif;

    /* ── Abstände & Formen ──────────────────────────────────────
       --radius       → Standard-Abrundung von Boxen
       --radius-pill  → Pillen-Form (Buttons, Badges)
       --transition   → Standard-Übergangszeit und Easing
    ────────────────────────────────────────────────────────────── */
    --radius:       16px;
    --radius-pill:  50px;
    --transition:   0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Titelgröße Hero ────────────────────────────────────────
       clamp(MIN, FLUID, MAX): passt sich der Viewport-Breite an.
    ────────────────────────────────────────────────────────────── */
    --size-hero-title: clamp(3rem, 12vw, 10.5rem);
}


/* ================================================================
   2. DESIGN-VARIABLEN — DUNKELMODUS
   ================================================================
   Greift automatisch wenn Betriebssystem / Browser auf Dunkel.
   Nur geänderte Variablen werden überschrieben.
   ──────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {

        /* ── Hintergrundfarben (Dunkel) ─────────────────────────
           OLED-freundliches Schwarz (#000000) für AMOLED-Displays.
        ──────────────────────────────────────────────────────── */
        --color-page-bg:     #000000;
        --color-section-bg:  #0a0a0a;
        --color-songs-bg:    #111111;
        --color-modal-bg:    #0f0f0f;
        --color-footer-bg:   #000000;

        /* ── Textfarben (Dunkel) ────────────────────────────────*/
        --color-title-plain: #f0ece6;
        --color-text-dark:   #d8d0c8;
        --color-text-muted:  #5e5956;
        --color-text-light:  #f0ece6;

        /* ── Pastel-Farbpalette (Dunkel) ────────────────────────
           Etwas kräftiger / leuchtender gegen den schwarzen HG.
        ──────────────────────────────────────────────────────── */
        --color-green:        #7ed46a;   /* Grün  – leuchtender auf Schwarz  */
        --color-rose:         #e0607a;   /* Rosa  – wärmer, klarer           */
        --color-lilac:        #b87ae0;   /* Lila  – tiefer, leuchtender      */
        --color-green-light:  #a8e09a;   /* Helles Grün (Deko-Kreise)        */
        --color-rose-light:   #ec8fa0;   /* Helles Rosa (Deko-Kreise)        */
        --color-lilac-light:  #cc9eee;   /* Helles Lila (Deko-Kreise)        */

        /* ── Orb-Deckkraft (Dunkel) ─────────────────────────────
           Etwas stärker als zuvor, bleibt dezent auf OLED-Schwarz.
        ──────────────────────────────────────────────────────── */
        --orb-opacity: 0.22;

        /* ── SOMNIA-Ombré (Dunkel) ──────────────────────────────*/
        --gradient-somnia: linear-gradient(
            90deg,
            #7ed46a  0%,
            #e0607a  50%,
            #b87ae0  100%
        );
        --gradient-accent: linear-gradient(135deg, #7ed46a, #e0607a, #b87ae0);
    }
}


/* ================================================================
   3. BASIS / RESET
   ================================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 300;
    background-color: var(--color-page-bg);
    color: var(--color-text-light);
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}


/* ================================================================
   4. HERO-SEKTION
   ================================================================ */

/* ── Container ──────────────────────────────────────────────────
   100dvh = dynamic viewport height — zieht Browser-UI (Adress-
   leiste auf Mobil) korrekt ab. 100vh als Fallback für ältere
   Browser bleibt erhalten.
────────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    height: 100vh;
    height: 100dvh;            /* Bevorzugt: echte sichtbare Höhe   */
    min-height: 600px;
    overflow: hidden;
    background: var(--color-page-bg);
    transition: background-color 0.4s ease;
}

/* ── Noise-Textur-Overlay ───────────────────────────────────────
   Subtile Körnung. Intensität: opacity. 0 = aus.
────────────────────────────────────────────────────────────────── */
.hero-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.45;
    pointer-events: none;
}

/* ── Ambiente Farbkugeln (Orbs) ─────────────────────────────────
   Deckkraft: --orb-opacity (hell/dunkel per Variable gesteuert).
   Größe, Position, Unschärfe hier direkt anpassen.
────────────────────────────────────────────────────────────────── */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: var(--orb-opacity);
    pointer-events: none;
    animation: drift 16s ease-in-out infinite alternate;
}

.orb-1 {
    width: 520px; height: 520px;
    background: var(--color-green);
    top: -120px; left: -160px;
    animation-duration: 14s;
}

.orb-2 {
    width: 420px; height: 420px;
    background: var(--color-rose);
    bottom: -90px; right: -110px;
    animation-duration: 18s;
    animation-direction: alternate-reverse;
}

.orb-3 {
    width: 320px; height: 320px;
    background: var(--color-lilac);
    top: 38%; left: 54%;
    animation-duration: 11s;
}

/* ── Innerer Container: Titel oben — Logo Mitte — Hint unten ────
   flex-direction: column + justify-content: space-between
   verteilt die drei Bereiche gleichmäßig über die volle Höhe.
   padding-top/bottom: Luft zum oberen und unteren Rand.
────────────────────────────────────────────────────────────────── */
.hero-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: clamp(2rem, 5vh, 4rem);      /* ← oberer Innenabstand  */
    padding-bottom: clamp(1.5rem, 4vh, 3rem); /* ← unterer Innenabstand */
}

/* ── Titel-Bereich (oben) ───────────────────────────────────────
   Tagline + h1 gruppiert, faded beim Laden ein.
────────────────────────────────────────────────────────────────── */
.hero-top {
    opacity: 0;
    animation: fadeUp 1s 0.3s forwards;
}

/* ── Logo-Bereich (Mitte) ───────────────────────────────────────
   flex: 1        → füllt den gesamten Restplatz zwischen
                    Titel und Scroll-Hint.
   min-height: 0  → nötig damit flex das Element schrumpfen lässt.
────────────────────────────────────────────────────────────────── */
.hero-logo-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 2vh, 2rem) 0; /* ← Luft über/unter dem Logo */
    opacity: 0;
    animation: fadeUp 1s 0.8s forwards;
}

/* ── Logo ───────────────────────────────────────────────────────
   max-height: 100%  → passt sich dem flex-Container an.
   max-width: clamp  → nicht breiter als 60% des Viewports.
   Beide Werte nach Bedarf anpassen.
────────────────────────────────────────────────────────────────── */
.hero-logo {
    max-height: 100%;
    max-width: clamp(200px, 60vw, 600px); /* ← Logo-Breite begrenzen */
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ── Tagline ────────────────────────────────────────────────────
   Kleiner Text über dem Titel.
────────────────────────────────────────────────────────────────── */
.hero-tagline {
    font-family: var(--font-body);
    font-weight: 200;
    font-size: 1.5rem;
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0;
}

/* ── Haupttitel ─────────────────────────────────────────────────
   Schriftgröße: --size-hero-title (in :root anpassen).
   Animation läuft über den Eltern-Container .hero-top.
────────────────────────────────────────────────────────────────── */
.hero-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--size-hero-title);
    line-height: 0.95;
    letter-spacing: 0.02em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.06em;
    margin: 0.3em 0 0;
}

/* ── THE & PROJECT: einfarbig ───────────────────────────────────
   Farbe: --color-title-plain
   Hell: dunkel (#1a1816), Dunkel: hell (#f0ece6) — automatisch.
────────────────────────────────────────────────────────────────── */
.word-the,
.word-project {
    display: block;
    color: var(--color-title-plain);
}

/* ── SOMNIA: statischer Ombré ───────────────────────────────────
   Verlauf: --gradient-somnia (in :root / dark-Block definiert).
   Kein shimmer / keine Animation – rein statisch.
────────────────────────────────────────────────────────────────── */
.word-somnia {
    display: block;
    background: var(--gradient-somnia);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Scroll-Hinweis ─────────────────────────────────────────────
   Pulsierender Strich + "Scroll"-Label. display:none = ausblenden.
────────────────────────────────────────────────────────────────── */
.scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    opacity: 0;
    animation: fadeUp 1s 1.4s forwards;
    user-select: none;
}

.scroll-hint span {
    font-size: 0.62rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.scroll-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, var(--color-text-muted), transparent);
    transform-origin: top;
    animation: lineGrow 2.2s 1.5s ease-in-out infinite;
}


/* ================================================================
   5. HAUPTBEREICH — Beschreibung + Tracklist
   ================================================================ */

/* ── Section-Wrapper ────────────────────────────────────────────
   Hintergrundfarbe: --color-section-bg
────────────────────────────────────────────────────────────────── */
.main-section {
    background: var(--color-section-bg);
    color: var(--color-text-dark);
    padding: 100px 0 120px;
    transition: background-color 0.4s ease;
}

/* ── Panel-Label ────────────────────────────────────────────────
   Kleine Beschriftung über jedem Panel ("About", "Tracklist").
────────────────────────────────────────────────────────────────── */
.panel-label {
    font-family: var(--font-body);
    font-weight: 400;              /* ← von 200 auf 400: deutlich lesbarer */
    font-size: 1rem;
    letter-spacing: 0.3em;        /* ← etwas enger: besser lesbar          */
    text-transform: uppercase;
    color: var(--color-text-dark); /* ← von muted auf dark: mehr Kontrast  */
    margin-bottom: 26px;
}

/* ── Beschreibungs-Panel ────────────────────────────────────────
   Innenabstand rechts schafft Abstand zur Tracklist.
────────────────────────────────────────────────────────────────── */
.description-panel {
    position: relative;
    padding: 60px 50px 60px 0;
}

/* ── Abschnitts-Überschrift ─────────────────────────────────────
   <em> im HTML erhält den Ombré-Verlauf (statisch).
────────────────────────────────────────────────────────────────── */
.section-heading {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2rem, 3.5vw, 3.4rem);
    line-height: 1.18;
    color: var(--color-text-dark);
    margin-bottom: 44px;
}

.section-heading em {
    font-style: italic;
    background: var(--gradient-somnia);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Fließtext ──────────────────────────────────────────────────
   Schriftgröße, Zeilenabstand und Absatz-Abstand.
────────────────────────────────────────────────────────────────── */
.description-text p {
    font-size: 1rem;
    line-height: 1.88;
    color: var(--color-text-dark);
    margin-bottom: 22px;
    max-width: 620px;
}

.description-text p:last-child { margin-bottom: 0; }

/* ── Dekorative Kreise ──────────────────────────────────────────
   opacity: 0 → ausblenden; display: none → entfernen.
────────────────────────────────────────────────────────────────── */
.description-deco {
    position: absolute;
    right: -20px;
    bottom: 50px;
    pointer-events: none;
}

.deco-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.32;
}

.c1 { width: 190px; height: 190px; background: var(--color-lilac-light); top: 0;    right: 0;   }
.c2 { width: 115px; height: 115px; background: var(--color-rose-light);  top: 65px; right: 85px; }
.c3 { width:  72px; height:  72px; background: var(--color-green-light); top: 145px; right: 22px; }


/* ================================================================
   6. SONG-LISTE (Tracklist-Panel)
   ================================================================ */

/* ── Panel-Box ──────────────────────────────────────────────────
   Hintergrundfarbe: --color-songs-bg
   position: sticky → bleibt beim Scrollen sichtbar.
────────────────────────────────────────────────────────────────── */
.songs-panel {
    position: sticky;
    top: 36px;
    background: var(--color-songs-bg);
    border-radius: var(--radius);
    padding: 36px 30px;
    color: var(--color-text-light);
    transition: background-color 0.4s ease;
}

.songs-panel .panel-label {
    color: var(--color-text-light); /* ← auf dunklem HG: hell statt dark */
}

.songs-subtitle {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    margin-bottom: 24px;
    letter-spacing: 0.04em;
}

/* ── Song-Einträge ──────────────────────────────────────────────
   Grid: [Nummer | Titel | Dauer | Pfeil-Icon]
────────────────────────────────────────────────────────────────── */
.song-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.song-item {
    display: grid;
    grid-template-columns: 26px 1fr auto 18px;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background var(--transition), transform var(--transition);
}

.song-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(168, 208, 158, 0.10),
        rgba(200, 168, 222, 0.10)
    );
    opacity: 0;
    transition: opacity var(--transition);
    border-radius: 8px;
}

.song-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(4px);
}

.song-item:hover::before { opacity: 1; }
.song-item:hover .song-icon { opacity: 1; transform: translateY(0); }

.song-item:focus-visible {
    outline: 2px solid var(--color-rose);
    outline-offset: 2px;
}

.song-number {
    font-size: 0.62rem;
    font-weight: 200;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.song-title-text {
    font-size: 0.86rem;
    font-weight: 300;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-duration {
    font-size: 0.70rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.song-icon {
    font-size: 0.82rem;
    color: var(--color-rose);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--transition), transform var(--transition);
}


/* ================================================================
   7. DOWNLOAD-MODAL
   ================================================================ */

/* ── Hintergrund-Overlay ────────────────────────────────────────
   Blur-Stärke: backdrop-filter: blur(Xpx)
────────────────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* ── Modal-Box ──────────────────────────────────────────────────
   Hintergrund: --color-modal-bg
────────────────────────────────────────────────────────────────── */
.modal-box {
    background: var(--color-modal-bg);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 22px;
    padding: 50px 46px 42px;
    width: 90%;
    max-width: 430px;
    text-align: center;
    position: relative;
    transform: translateY(28px) scale(0.97);
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.4s ease;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.65);
}

.modal-overlay.active .modal-box {
    transform: translateY(0) scale(1);
}

/* ── Schließen-Button ───────────────────────────────────────────*/
.modal-close {
    position: absolute;
    top: 16px; right: 20px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color var(--transition);
}

.modal-close:hover { color: var(--color-text-light); }

/* ── Modal-Badge ────────────────────────────────────────────────*/
.modal-tag {
    display: inline-block;
    font-size: 0.63rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--color-green);
    border: 1px solid rgba(168, 197, 160, 0.3);
    padding: 5px 15px;
    border-radius: var(--radius-pill);
    margin-bottom: 22px;
}

/* ── Modal-Songtitel ────────────────────────────────────────────*/
.modal-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 2rem;
    color: var(--color-text-light);
    margin-bottom: 6px;
    line-height: 1.2;
}

/* ── Dauer ──────────────────────────────────────────────────────*/
.modal-duration {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    margin-bottom: 16px;
    letter-spacing: 0.12em;
}

/* ── GEMA-Nummer ────────────────────────────────────────────────
   Anzeige der GEMA-Werknummer unterhalb der Dauer.
   display: none → komplett ausblenden wenn kein GEMA-Feld gesetzt.
────────────────────────────────────────────────────────────────── */
.modal-gema {
    font-size: 0.70rem;
    color: var(--color-text-muted);
    margin-bottom: 30px;
    letter-spacing: 0.06em;
}

.modal-gema span {
    color: var(--color-lilac);      /* ← Farbe der Nummer selbst */
    font-weight: 400;
}

/* ── Download-Button ────────────────────────────────────────────*/
.modal-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: whitesmoke;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.84rem;
    letter-spacing: 0.07em;
    padding: 14px 34px;
    border: 1px solid whitesmoke;
    border-radius: var(--radius-pill);
    transition: color var(--transition), background var(--transition),
                transform var(--transition), filter var(--transition);
}

.modal-download-btn:hover {
    transform: translateY(-1px);
    color: #0f0f0f;
    background: whitesmoke;
    filter: brightness(1.05);
}

/* ── Button-Gruppe (YouTube + Donate nebeneinander) ─────────────
   Unterhalb der modal-note, zentriert, mit Zeilenumbruch auf
   kleinen Bildschirmen.
────────────────────────────────────────────────────────────────── */
.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
}

/* ── YouTube-Button ─────────────────────────────────────────────
   Gleiche Basis wie Download- und Donate-Button.
   Farbe: Rot-Ton passend zu YouTube, aber gedämpft zum Stil.
   Öffnet in neuem Tab (target="_blank" im HTML).
────────────────────────────────────────────────────────────────── */
.modal-youtube-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: whitesmoke;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 200;
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    border: 1px solid rgba(168, 197, 160, 0.3);
    border-radius: var(--radius-pill);
    padding: 12px 28px;
    transition: color var(--transition), background var(--transition),
                transform var(--transition);
}

.modal-youtube-btn:hover {
    transform: translateY(-1px);
    color: #0f0f0f;
    background: whitesmoke;
}

/* ── Spenden-Button ─────────────────────────────────────────────*/
.modal-donation-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: whitesmoke;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.84rem;
    letter-spacing: 0.07em;
    border: 1px solid whitesmoke;
    border-radius: var(--radius-pill);
    padding: 12px 28px;
    transition: color var(--transition), background var(--transition),
                transform var(--transition), filter var(--transition);
}

.modal-donation-btn:hover {
    transform: translateY(-1px);
    color: #0f0f0f;
    background: whitesmoke;
    filter: brightness(1.05);
}

.btn-icon { font-size: 1.1rem; font-weight: 600; }

/* ── Modal-Fußnote ──────────────────────────────────────────────*/
.modal-note {
    margin-top: 18px;
    font-size: 0.9rem;
    color: var(--color-text-light);
    letter-spacing: 0.04em;
}


/* ================================================================
   8. FOOTER
   ================================================================ */
.site-footer {
    background: var(--color-footer-bg);
    color: var(--color-text-light);  /* ← von muted auf light: besser lesbar */
    text-align: center;
    padding: 40px 20px;              /* ← etwas mehr Luft                    */
    font-size: 0.84rem;              /* ← von 0.76 auf 0.84: größer          */
    letter-spacing: 0.03em;          /* ← weniger Sperrung: flüssiger lesbar  */
    border-top: 1px solid rgba(255, 255, 255, 0.10); /* ← sichtbarere Trennlinie */
    transition: background-color 0.4s ease;
}

.site-footer p + p {
    margin-top: 6px;                 /* ← Abstand zwischen den zwei Zeilen   */
    color: var(--color-text-muted);  /* ← zweite Zeile (Credits) etwas leiser */
    font-size: 0.76rem;
}


/* ================================================================
   9. ANIMATIONEN
   ================================================================ */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(38px, 28px) scale(1.07); }
}

@keyframes lineGrow {
    0%, 100% { transform: scaleY(0); opacity: 0; }
    50%       { transform: scaleY(1); opacity: 1; }
}


/* ================================================================
   10. RESPONSIVE — Bootstrap-Ergänzungen
   ================================================================ */

@media (max-width: 991.98px) {
    .songs-panel        { position: static; }
    .description-panel  { padding: 40px 16px 40px 0; }
    .description-deco   { display: none; }
}

@media (max-width: 575.98px) {
    .main-section  { padding: 60px 0 80px; }
    .modal-box     { padding: 38px 26px 34px; }
    .modal-title   { font-size: 1.6rem; }
}