/* ==================================================
   songlayout.css
   Nur song-spezifische Styles
   Globale Basis kommt aus site.css
================================================== */

/* ==========================================
   Hauptbereich Songseite
========================================== */

.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ==========================================
   Header
========================================== */

.song-header {
    display: flex;
    flex-direction: column;
    gap: 12px;

    padding-bottom: 12px;

    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.song-header h1 {
    margin: 0;

    font-size: 2rem;
    font-weight: 600;

    line-height: 1.08;

    color: #e9e3d8;
}

/* ==========================================
   Breadcrumb
========================================== */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 6px;

    font-size: 0.92rem;

    color: #a9a397;
}

.breadcrumb a {
    color: #a9a397;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb-separator {
    opacity: 0.7;
}

.breadcrumb-current {
    color: #c9c2b6;
}

/* ==========================================
   Navigation oben
========================================== */

.top-nav {
    display: flex;
    flex-wrap: wrap;

    gap: 16px;

    align-items: center;

    font-size: 1rem;
}

.roulette-link {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);

    font-size: 0.95rem;
    letter-spacing: 0.015em;
    color: #e6dfd4;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.12s ease;
}

.roulette-link:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.18);
    text-decoration: none;
}

.roulette-link:active {
    transform: translateY(1px);
}

.contact-link {
    color: #cfc7bb;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.contact-link:hover {
    color: #ebe3d8;
}

/* ==========================================
   Lyrics
========================================== */

.lyrics {
    flex: 1;

    font-size: 1.52rem;

    color: #d8d3ca;
}

.lyrics p {
    margin: 0 0 0.95em 0;

    break-inside: avoid;
    page-break-inside: avoid;
}

.lyrics br {
    line-height: 1.2;
}

/* Desktop: feste zwei Spalten */

@media (min-width: 900px) {

    .lyrics {
        column-count: 2;
        column-gap: 82px;
    }
}

/* ==========================================
   Song-Footer
========================================== */

.song-footer {
    display: grid;
    gap: 12px;
}

/* ==========================================
   Große Monitore
========================================== */

@media (min-width: 1600px) {

    .lyrics {
        font-size: 1.66rem;
        column-gap: 96px;
    }

    .song-header h1 {
        font-size: 2.2rem;
    }
}

/* ==========================================
   Tablet / kleiner Laptop
========================================== */

@media (max-width: 899px) {

    .lyrics {
        column-count: 1;
        font-size: 1.18rem;
    }

    .top-nav {
        gap: 12px;
    }
}

/* ==========================================
   Smartphone
========================================== */

@media (max-width: 700px) {

    .container {
        gap: 16px;
    }

    .song-header h1 {
        font-size: 1.42rem;
    }

    .breadcrumb {
        font-size: 0.84rem;
    }

    .lyrics {
        font-size: 1rem;
        line-height: 1.44;
    }

    .top-nav {
        gap: 10px;
        font-size: 0.95rem;
    }
}

.related-works {

    margin-top: 1rem;
}

.related-works h2 {

    margin-bottom: 1rem;

    font-size: 1.25rem;
}

.tag-links {

    margin-bottom: 1.5rem;

    color: #bdb7ac;

    font-size: .95rem;
}

/* ==========================================
   Groove Gallery
========================================== */

.groove-gallery{
    display:flex;
    gap:24px;
    justify-content:center;
    align-items:stretch;

    margin:42px 0 34px 0;

    flex-wrap:wrap;
}

/* ==========================================
   Groove Card
========================================== */

.groove-item{

    background:#d8d3c8;

    border:1px solid #555;

    border-radius:14px;

    padding:12px;

    width:min(100%, 520px);

    box-sizing:border-box;

    box-shadow:
        0 6px 18px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

/* ==========================================
   SVG
========================================== */

.groove-item img{

    display:block;

    width:100%;
    height:auto;

    object-fit:contain;

    border-radius:6px;
}

/* ==========================================
   Random Hitwiese
========================================== */

.random-hitwiese{

    margin:34px auto 18px auto;

    text-align:center;

    color:#9f988c;

    font-size:0.95rem;

    line-height:1.5;

    letter-spacing:0.01em;

    opacity:0.9;
}