/* ============================================================
   INHALTSVERZEICHNIS
   0. Farb-Variablen (:root)
   1. Fonts & Grundreset
   2. Typografie (Überschriften, Text, Links, Listen, Bilder)
   3. Layout / Container-Grundgerüst
   4. Header & Navigation (inkl. mobiles Burger-Menü)
   5. Footer
   6. Startseite: Fee-Cards (Musik-Profil / Blog / mein Leben)
   7. Startseite: Profil-Box (Prins-Fee-Vorstellung)
   8. "mein Leben": Profil-Karte
   9. Musik-Profil: Plattform-Buttons & Steckbrief-Box
   10. Diskografie (Tab-System)
   11. Infobox (wiederverwendbar: Webprojekte, EP-Infos, etc.)
   12. Webprojekte: Spalten-Layout
   13. Musikempfehlungen: Liste mit Emoji-Markern
   14. Blogbeitrag "meine Lieblingssmartphones": Akkordeon
   15. Blogbeiträge "il Faro" / "musikalische Weltreise": Track-Tabs
   ============================================================ */


/* ============================================================
   0. FARB-VARIABLEN (:root)
   Hier alle Farben zentral ändern.
   ============================================================ */
:root {
    /* Akzentfarben */
    --accent: #fc65d0;              /* Pink: Überschriften, Links, aktive Elemente, Buttons */
    --accent-soft: #f78da7;         /* Rosé: h3, Footer-Texte, Profil-Karte */
    --accent-warm: #f0768b;         /* Free-Palestine-Zeile im Footer */
    --accent-dark: #e055bd;         /* Hover der Infobox-Buttons */
    --accent-hover: #d99164;        /* Hover "Musik-Profil"-Button (Orange) */
    --accent-hover-text: #8c499e;   /* Textfarbe auf --accent-hover (Violett) */
    --accent-glow: rgba(252, 101, 208, 0.5);   /* Leuchten der h1 */

    /* Textfarben */
    --text: #e0e0e0;                /* normaler Fließtext */
    --text-bright: #ffffff;         /* Menü, Logo, aktive Buttons */
    --text-dim: #aaaaaa;            /* Untertitel, Footer-Links, Hinweise */
    --text-muted: #cccccc;          /* Beschreibungen im Smartphone-Akkordeon */
    --text-on-light: #333333;       /* Text auf hellen Flächen (Plattform-Buttons) */
    --text-on-light-soft: #555555;  /* Steckbrief-Text */
    --text-on-accent: #111111;      /* Text auf pinken Buttons */

    /* Hintergründe & Flächen */
    --bg-start: rgb(20, 20, 30);    /* Seitenverlauf Anfang */
    --bg-end: rgb(35, 35, 50);      /* Seitenverlauf Ende */
    --surface: rgba(255, 255, 255, 0.05);          /* Boxen, Panels */
    --surface-strong: rgba(255, 255, 255, 0.08);   /* Buttons, Trennlinien */
    --border: rgba(255, 255, 255, 0.15);           /* Button-Rahmen */
    --cream: #fff9f3;               /* Footer, Plattform-Buttons, Steckbrief */
    --black: #000000;               /* Profil-Karte "mein Leben", TikTok-Icon */
    --overlay: rgba(0, 0, 0, 0.55); /* Beschriftung auf den Fee-Cards */
    --pride-bg: rgba(252, 164, 185, 0.2);  /* Pride-Box im Footer */

    /* Marken-Farben (Social-Icons) */
    --brand-mastodon: #3288d4;
    --brand-discord: #5865f2;

    /*Hintergrund infobox*/
    --bg-steckbox: #0B1038;
}


/* ============================================================
   1. FONTS & GRUNDRESET
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

button, input, textarea, select {
    font-family: inherit;
}

body {
    font-family: 'Bellota', sans-serif;
    background: linear-gradient(110deg, var(--bg-start) 0%, var(--bg-end) 100%);
    background-attachment: fixed;
    margin: 0;
    line-height: 1.6;
}


/* ============================================================
   2. TYPOGRAFIE
   ============================================================ */
h1 {
    font-size: 2.2rem;
    color: var(--accent);
    text-shadow: 0 0 12px var(--accent-glow);
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
}

h2 {
    font-size: 1.6rem;
    color: var(--accent);
    margin: 2rem 0 1rem 0;
    line-height: 1.3;
}

h3 {
    font-size: 1.15rem;
    color: var(--accent-soft);
    margin: 1.5rem 0 0.8rem 0;
}

p {
    margin: 0 0 1.2rem 0;
    color: var(--text);
}

ul, ol {
    margin: 0 0 1.2rem 0;
    padding-left: 1.4rem;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--accent);
}

a:hover {
    color: var(--text-bright);
}


/* ============================================================
   3. LAYOUT / CONTAINER-GRUNDGERÜST
   ============================================================ */
.header,
.content__entry,
.footer-columns {
    max-width: 1150px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.content__entry {
    padding-top: 2rem;
    padding-bottom: 3rem;
}


/* ============================================================
   4. HEADER & NAVIGATION
   ============================================================ */
header.header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    padding-top: 2rem;
}

/* -- Logo -- */
.logo {
    color: var(--text-bright);
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.logo::after {
    content: "Musik ist mein Leben";
    color: var(--text-dim);
    font-size: 0.9rem;
    font-weight: normal;
    margin-top: 3px;
}

/* -- Menü -- */
.navbar {
    margin-left: 0;
    flex: 1;
}
.navbar__menu {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}
.navbar__menu li a {
    color: var(--text-bright);
    border-radius: 4px;
    padding: 0.2rem 0.6rem;
    line-height: 1.2;
    text-decoration: none;
}
.navbar__menu li.active a {
    color: var(--text-bright);
    background-color: var(--accent);
}
.navbar__menu li a:hover {
    color: var(--text-bright);
    background-color: var(--accent);
}
.navbar__menu li:last-child {
    margin-left: auto;
}
.navbar__menu li:last-child a {
    background-color: var(--accent);
    color: var(--text-bright);
    border-radius: 6px;
    padding: 0.2rem 0.6rem;
}
.navbar__menu li:last-child a:hover {
    background-color: var(--accent-hover);
    color: var(--accent-hover-text);
}

/* -- Icons in der Navigation -- */
.nav-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.4rem;
}

/* -- Suche -- */
.search__btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--text-bright);
}
.search__btn:hover {
    color: var(--accent);
}

/* -- Mobile Navigation (Burger-Menü) -- */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    color: var(--text-bright);
}
.nav-toggle-close {
    display: none;
}
.nav-toggle.open .nav-toggle-open {
    display: none;
}
.nav-toggle.open .nav-toggle-close {
    display: block;
}

@media (max-width: 780px) {
    .header {
        flex-wrap: wrap;
        row-gap: 0;
    }
    .header-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .nav-toggle {
        display: flex;
        align-items: center;
    }
    .navbar {
        flex-basis: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .navbar.open {
        max-height: 400px;
    }
    .navbar__menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        padding: 1rem 0;
        width: 100%;
    }
    .navbar__menu li {
        width: 100%;
    }
    .navbar__menu li a {
        display: block;
        width: 100%;
    }
    .navbar__menu li:last-child {
        margin-left: 0;
    }
}


/* ============================================================
   5. FOOTER
   ============================================================ */
/* -- eigener Footer -- */
.site-footer {
    background: var(--cream);
    padding: 2rem;
    margin-top: 2rem;
}

.footer-columns {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer-col {
    flex: 1;
    min-width: 250px;
}

.footer-col-center {
    text-align: center;
}

/* Spalte 1: Statement + Otter */
.footer-statement {
    color: var(--accent-soft);
    font-family: 'Bellota', sans-serif;
}

.footer-palestine {
    color: var(--accent-warm);
    font-family: 'Bellota', sans-serif;
    margin-top: 2rem;
}

.footer-palestine img {
    width: 30px;
    height: auto;
    display: inline;
    vertical-align: middle;
    margin-left: 0.3rem;
}

.footer-otter-img {
    max-width: 100%;
    border-radius: 10px;
    margin-top: 1rem;
}

.footer-otter-caption {
    color: var(--accent-soft);
    font-family: 'Bellota', sans-serif;
    margin-top: 0.5rem;
    
}

.footer-otter-link,
.footer-otter-link:hover {
    text-decoration: none;
}

.footer-otter-link:hover .footer-otter-caption {
    color: var(--text-on-light);
    text-decoration: underline;
}

/* Spalte 2: Pride-Box + Credit + Social-Icons */
.pride-box {
    background: var(--pride-bg);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.pride-emoji {
    font-size: 2rem;
    margin: 0;
}

.pride-label {
    color: var(--accent-soft);
    font-family: 'Bellota', sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
}

.footer-credit {
    color: var(--text-dim);
    font-family: 'Bellota', sans-serif;
}

.social-icons-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.social-icon {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icon--mastodon { background: var(--brand-mastodon); }
.social-icon--tiktok    { background: var(--black); }
.social-icon--discord   { background: var(--brand-discord); }
.social-icon--mail      { background: var(--text-dim); }

/* Spalte 3: Musikplayer + Footer-Links */
/* -- Spalte 3: "Jetzt anhören"-Kachel -- */
.listen-box {
    background: var(--pride-bg);
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
}

.listen-cover {
    display: block;
    width: 100%;
    max-width: 220px;
    margin: 0 auto 1rem auto;
    border-radius: 12px;
}

.listen-title {
    color: var(--accent-soft);
    font-size: 1.5rem;
    margin: 0 0 0.3rem 0;
}

.listen-text {
    color: var(--text-dim);
    margin: 0 0 1rem 0;
}

.listen-links {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
}

.listen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--text-bright);
    border-radius: 50%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.listen-btn img {
    width: 24px;
    height: 24px;
}

.listen-btn:hover {
    transform: scale(1.12);
}

/* -- Tooltip an den Hör-Buttons -- */
.listen-btn {
    position: relative;
}

.listen-btn::after,
.listen-btn::before {
    position: absolute;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.listen-btn::after {
    content: attr(data-tooltip);
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--text-on-accent);
    font-size: 0.8rem;
    font-weight: bold;
    white-space: nowrap;
    padding: 0.25rem 0.7rem;
    border-radius: 6px;
    z-index: 10;
}

.listen-btn::before {
    content: "";
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--accent);
    border-bottom-width: 0;
    z-index: 10;
}

.listen-btn:hover::after,
.listen-btn:hover::before,
.listen-btn:focus-visible::after,
.listen-btn:focus-visible::before {
    opacity: 1;
}
.footer-links {
    margin-top: 1rem;
}

.footer-links a {
    color: var(--text-dim);
    font-family: 'Bellota', sans-serif;
    display: block;
    margin-bottom: 0.5rem;
}

.footer-links a:hover {
    color: var(--text-on-light);
}

.footer-links a:last-child {
    margin-bottom: 0;
}

.footer-links-ewa:hover {
    color: var(--text-on-light);
}


/* ============================================================
   6. STARTSEITE: FEE-CARDS (Musik-Profil / Blog / mein Leben)
   ============================================================ */
.fee-cards-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.fee-card {
    flex: 1;
    min-width: 200px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    transition: box-shadow 0.3s ease;
}

.fee-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.fee-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--overlay);
    padding: 0.75rem;
    text-align: center;
}

.fee-card-overlay span {
    color: var(--text-bright);
    font-family: 'Bellota', sans-serif;
    font-size: 1rem;
    font-weight: bold;
}

@keyframes borderGlow {
    0% { box-shadow: 0 0 0 3px var(--accent), 0 0 10px var(--accent); }
    50% { box-shadow: 0 0 0 3px var(--accent), 0 0 25px var(--accent), 0 0 40px var(--accent); }
    100% { box-shadow: 0 0 0 3px var(--accent), 0 0 10px var(--accent); }
}

.fee-card:hover {
    animation: borderGlow 1.5s ease-in-out infinite;
}


/* ============================================================
   7. STARTSEITE: PROFIL-BOX (Prins-Fee-Vorstellung)
   ============================================================ */
.profile-box {
    background: var(--surface);
    border-radius: 16px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.profile-box img {
    width: 400px;
    height: 400px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 50%;
}

.profile-box h2 {
    color: var(--accent);
    margin: 0 0 0.5rem 0;
}

.profile-box p {
    color: var(--text);
    margin: 0;
}

@media (max-width: 600px) {
    .profile-box {
        flex-direction: column;
        text-align: center;
    }
    .profile-box img {
        width: 100%;
        max-width: 280px;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}


/* ============================================================
   8. "MEIN LEBEN": PROFIL-KARTE
   ============================================================ */
.life-profile-card {
    background: var(--black);
    border-radius: 50px;
    padding: 2rem;
    max-width: 478px;
    margin: 0 auto;
    text-align: center;
}

.life-profile-card img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 50%;
    border: 6px solid var(--accent-soft);
    margin-bottom: 1rem;
}

.life-profile-card h2 {
    color: var(--accent);
    font-family: 'Bellota', sans-serif;
    margin: 0.5rem 0;
}

.life-profile-card p {
    color: var(--accent);
    font-family: 'Bellota', sans-serif;
    margin: 0;
}


/* ============================================================
   9. MUSIK-PROFIL: PLATTFORM-BUTTONS & STECKBRIEF-BOX
   ============================================================ */
.platform-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}
.platform-btn {
    flex: 1;
    min-width: 150px;
    background: var(--cream);
    border-radius: 16px;
    padding: 2rem 1rem;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}
.platform-icon { font-size: 2.5rem; }
.platform-icon-text { font-size: 2.5rem; font-weight: bold; color: var(--text-on-light); }
.platform-label { color: var(--text-on-light); font-size: 1.2rem; font-weight: bold; }

.steckbrief-box {
    background: var(--bg-steckbox);
    border-radius: 16px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.steckbrief-box img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 50%;
}
.steckbrief-text { 
    color: var(--text); 
    font-size: 0.95rem; 
    line-height: 1.8;
    padding-top: 1rem;
}
.disko-intro-text { margin-bottom: 1.25rem; }
.disko-external-link { color: var(--accent);}

@media (max-width: 600px) {
    .steckbrief-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}


/* ============================================================
   10. DISKOGRAFIE (Tab-System)
   ============================================================ */
.disko-content {
    display: none;
}
.disko-content.active {
    display: block;
}
.disko-tracklist {
    display: none;
    list-style: none;
    padding: 0;
    color: var(--cream);
}
.disko-tracklist.open {
    display: block;
}
.disko-tracklist li {
    display: flex;
    justify-content: flex-start;
    gap: 0.3em;
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--surface);
}

.disko-duration {
    margin-left: auto;
}
.disko-btn {
    background: var(--surface-strong);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 0.4rem 1.1rem;
    font-family: 'Bellota', sans-serif;
    font-size: 0.95rem;
    cursor: pointer;
}
.disko-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-bright);
}
.disko-years {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.disko-album-title {
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 0.3rem;
}
.disko-album-content {
    color: var(--text-dim);
}
.disko-album-type {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
}
.disko-total {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin-top: 0.8rem;
    font-style: italic;
}
.disko-album {
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--surface-strong);
    padding-bottom: 1.5rem;
}


/* ============================================================
   11. INFOBOX (wiederverwendbar: Webprojekte, EP-Infos, etc.)
   ============================================================ */
.infobox {
    background: var(--surface);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.infobox h2 {
    color: var(--accent);
    margin: 0 0 0.5rem 0;
}

.infobox p {
    color: var(--text);
    margin: 0 0 0.8rem 0;
}

.infobox-btn {
    display: inline-block;
    background: var(--accent);
    color: var(--text-on-accent);
    border-radius: 6px;
    padding: 0.5rem 1.2rem;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.infobox-btn:hover {
    background: var(--accent-dark);
    color: var(--text-on-accent);
}


/* ============================================================
   12. WEBPROJEKTE: SPALTEN-LAYOUT
   ============================================================ */
.webprojekte-columns {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 2rem 0;
}

.webprojekte-col {
    flex: 1;
    min-width: 250px;
}


/* ============================================================
   13. MUSIKEMPFEHLUNGEN: LISTE MIT EMOJI-MARKERN
   ============================================================ */
.rec-list {
    list-style-type: none;
    padding-left: 0;
    color: var(--cream)
}

.rec-list li {
    margin-left: 1.5em;
    position: relative;
}

.rec-list .rec-icon {
    position: absolute;
    left: -1.5em;
}

.rec-legend li {
    margin-bottom: 0.4rem;
}


/* ============================================================
   14. BLOGBEITRAG "meine Lieblingssmartphones": AKKORDEON
   ============================================================ */
.phone-accordion {
    margin: 1.5rem 0;
}

.phone-item {
    border-bottom: 1px solid var(--surface-strong);
}

.phone-toggle {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--accent);
    font-family: 'Bellota', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    padding: 0.9rem 0;
    cursor: pointer;
}

.phone-toggle:hover {
    color: var(--text-bright);
}

.phone-panel {
    display: none;
    padding-bottom: 1.2rem;
}

.phone-panel.open {
    display: block;
}

.phone-panel h3 {
    color: var(--text);
    margin: 0 0 0.5rem 0;
    font-size: 1.05rem;
}

.phone-panel p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
}


/* ============================================================
   15. BLOGBEITRÄGE "il Faro" / "musikalische Weltreise": TRACK-TABS
   ============================================================ */
.track-tab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.track-btn {
    background: var(--surface-strong);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 0.4rem 1.1rem;
    font-family: 'Bellota', sans-serif;
    font-size: 0.95rem;
    cursor: pointer;
}

.track-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-bright);
}

.track-panel {
    display: none;
    background: var(--surface);
    border-radius: 16px;
    padding: 1.5rem;
    gap: 1.5rem;
    align-items: flex-start;
}

.track-panel.active {
    display: flex;
}

.track-panel img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 11px;
    flex-shrink: 0;
}

.track-panel h3 {
    color: var(--accent-soft);
    margin: 0 0 0.5rem 0;
}

.track-panel p {
    color: var(--text);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
}

@media (max-width: 600px) {
    .track-panel {
        flex-direction: column;
        text-align: center;
    }
    .track-panel img {
        width: 100%;
        max-width: 220px;
        margin: 0 auto;
    }
}

/* ============================================================
   16. BLOG-ÜBERSICHT: KARTEN-RASTER
   ============================================================ */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 2px var(--accent);
}

.blog-card-img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

.blog-card-img--placeholder {
    object-fit: contain;
    background: var(--cream);
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.2rem;
}

.blog-card-title {
    color: var(--accent);
    font-size: 1.25rem;
    margin: 0 0 0.3rem 0;
}

.blog-card-date {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin: 0 0 0.6rem 0;
}

.blog-card-excerpt {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 1rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-more {
    color: var(--accent);
    font-weight: bold;
    margin-top: auto;
}

.blog-header-image {
    max-width: 400px;
    margin: 0 auto 1.5rem auto;
}

.blog-header-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

/* ============================================================
   MUSIKEMPFEHLUNGEN: KACHELN (ersetzt den alten Block "BUCHSTABEN-GRUPPEN")
   ============================================================ */
.rec-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.5rem 0;
}

.rec-letters a {
    display: inline-block;
    min-width: 2rem;
    padding: 0.2rem 0.5rem;
    text-align: center;
    text-decoration: none;
    background: var(--surface-strong);
    color: var(--text);
    border-radius: 6px;
}

.rec-letters a:hover {
    background: var(--accent);
    color: var(--text-on-accent);
}

.rec-section {
    margin-bottom: 1.5rem;
    scroll-margin-top: 1rem;
}

.rec-section-title {
    margin: 1.5rem 0 0.8rem 0;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--surface-strong);
    color: var(--accent);
    font-size: 1.6rem;
}

.rec-cards {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    align-items: start;
}

.rec-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
}

.rec-card-name {
    margin: 0 0 0.4rem 0;
    color: var(--text-bright);
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.rec-songs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rec-song {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding: 0.35rem 0;
    border-top: 1px solid var(--surface-strong);
}

.rec-song:first-child {
    border-top: 0;
}

.rec-song-icon {
    flex-shrink: 0;
}

.rec-song-main {
    flex: 1;
    min-width: 0;
}

.rec-song-title {
    color: var(--text);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

a.rec-song-title {
    color: var(--accent);
    text-decoration: none;
}

a.rec-song-title:hover {
    color: var(--text-bright);
    text-decoration: underline;
}

.rec-song-note {
    margin-top: 2px;
    color: var(--text-dim);
    font-size: 0.8rem;
}

.rec-song-lang {
    margin-top: 2px;
    color: var(--text-dim);
    font-size: 0.8rem;
}
/* ============================================================
   SCHNEE (nur 1. Oktober bis 31. März)
   ============================================================ */
.snow-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.snow-toggle {
    display: none;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    color: var(--text-bright);
}

.snow-season .snow-toggle {
    display: flex;
}

.snow-toggle:hover {
    color: var(--accent);
}

html[data-snow="off"] .snow-toggle {
    opacity: 0.45;
}