/* THE SOMNIA PROJECT — style.css (Design-Variablen in :root anpassen, Dunkelmodus automatisch via prefers-color-scheme) */


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

    /* Hintergründe */
    --color-page-bg: #f5f0e8; /* Seite / Hero */
    --color-section-bg: #ede9e3; /* Hauptbereich */
    --color-songs-bg: #1e1c1a; /* Tracklist-Box */
    --color-modal-bg: #1c1917; /* Modal */
    --color-footer-bg: #1e1c1a; /* Footer */

    /* Textfarben */
    --color-title-plain: #1a1816; /* THE / PROJECT im Hero */
    --color-text-dark: #3a3735; /* Fließtext auf hellem Grund */
    --color-text-muted: #6e6966; /* Labels, Metadaten */
    --color-text-light: #f0ece6; /* Text auf dunklem Grund */

    /* Pastell-Palette */
    --color-green: #58b840;
    --color-rose: #c04560;
    --color-lilac: #8f4fc0;
    --color-green-light: #aadc9e; /* Deko-Kreise */
    --color-rose-light: #cc6e80;
    --color-lilac-light: #a870d8;

    /* Orb-Deckkraft */
    --orb-opacity: 0.32;

    /* SOMNIA-Ombré (Richtung: 90deg = links → rechts) */
    --gradient-somnia: linear-gradient(90deg, #58b840 0%, #c04560 50%, #8f4fc0 100%);
    --gradient-accent: linear-gradient(135deg, #58b840, #c04560, #8f4fc0);

    /* Schriften (Wechsel auch in der Google-Fonts-URL in index.php) */
    --font-display: 'Nunito', sans-serif;
    --font-body: 'Jost', sans-serif;

    /* Formen & Übergänge */
    --radius: 16px;
    --radius-pill: 50px;
    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* Hero-Titelgröße (fluid) */
    --size-hero-title: clamp(3rem, 12vw, 10.5rem);
}


/* ===== 2. DESIGN-VARIABLEN — DUNKELMODUS (überschreibt nur Abweichungen) ===== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-page-bg: #000000;
        --color-section-bg: #0a0a0a;
        --color-songs-bg: #111111;
        --color-modal-bg: #0f0f0f;
        --color-footer-bg: #000000;

        --color-title-plain: #f0ece6;
        --color-text-dark: #d8d0c8;
        --color-text-muted: #5e5956;
        --color-text-light: #f0ece6;

        --color-green: #7ed46a;
        --color-rose: #e0607a;
        --color-lilac: #b87ae0;
        --color-green-light: #a8e09a;
        --color-rose-light: #ec8fa0;
        --color-lilac-light: #cc9eee;

        --orb-opacity: 0.22;

        --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 (dvh zieht mobile Browser-UI ab, vh als Fallback) */
.hero {
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 600px;
    overflow: hidden;
    background: var(--color-page-bg);
    transition: background-color 0.4s ease;
}

/* Noise-Textur (Intensität über opacity) */
.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;
}

/* Farbkugeln (Orbs) */
.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, Scroll-Hint unten */
.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);
    padding-bottom: clamp(1.5rem, 4vh, 3rem);
}

/* Titelbereich (oben) */
.hero-top {
    opacity: 0;
    animation: fadeUp 1s 0.3s forwards;
}

/* Logobereich (Mitte, füllt den Restplatz) */
.hero-logo-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 2vh, 2rem) 0;
    opacity: 0;
    animation: fadeUp 1s 0.8s forwards;
}

/* Logo (Breite hier begrenzen) */
.hero-logo {
    max-height: 100%;
    max-width: clamp(200px, 60vw, 600px);
    width: auto;
    height: auto;
    object-fit: contain;
}

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

/* Haupttitel (Größe: --size-hero-title) */
.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 */
.word-the,
.word-project {
    display: block;
    color: var(--color-title-plain);
}

/* SOMNIA: statischer Ombré */
.word-somnia {
    display: block;
    background: var(--gradient-somnia);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Scroll-Hinweis (display: none blendet ihn aus) */
.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) ===== */

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

/* Panel-Label ("About", "Tracklist") */
.panel-label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-text-dark);
    margin-bottom: 26px;
}

/* Beschreibungs-Panel (Padding rechts = Abstand zur Tracklist) */
.description-panel {
    position: relative;
    padding: 60px 50px 60px 0;
}

/* Überschrift (<em> bekommt den Ombré-Verlauf) */
.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 */
.description-text {
    max-width: 620px;
}

.description-text p {
    font-size: 1rem;
    line-height: 1.88;
    color: var(--color-text-dark);
    margin-bottom: 22px;
}

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

/* Dekorative Kreise (opacity: 0 oder display: none zum Ausblenden) */
.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 (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);
}

.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 | 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 ===== */

/* Overlay (Blur-Stärke: backdrop-filter) */
.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 (Breite wächst mit dem Viewport, siehe Abschnitt 11) */
.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: 480px;
    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);
}

/* 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;
}

/* 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-Werknummer (display: none, wenn nicht benötigt) */
.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);
    font-weight: 400;
}

/* Responsiver 16:9-Videocontainer (ersetzt feste iframe-Maße) */
.modal-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1rem 0;
    border-radius: 12px;
    overflow: hidden;
}

.modal-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Download- und Spenden-Button (gleiche Basis) */
.modal-download-btn,
.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;
    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-donation-btn {
    padding: 12px 28px;
}

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

/* Button-Gruppe (YouTube + Spenden nebeneinander) */
.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
}

/* YouTube-Button (öffnet per target="_blank" in neuem Tab) */
.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;
}

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

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


/* ===== 8. AUDIO-PLAYER ===== */

.somnia-player {
    --sp-bg: #fff;
    --sp-fg: #1a1a1a;
    --sp-muted: #8a8a8a;
    --sp-border: #d8d8d8;
    --sp-accent: #1a1a1a;

    width: 100%;
    max-width: 420px;
    padding: 14px 16px;
    background: var(--sp-bg);
    color: var(--sp-fg);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    font: 14px/1.4 system-ui, sans-serif;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
    position: relative;

}

@media (prefers-color-scheme: dark) {
    .somnia-player {
        --sp-bg: #141414;
        --sp-fg: #eee;
        --sp-muted: #777;
        --sp-border: #2c2c2c;
        --sp-accent: #eee;
    }
}

.player-wrap {
    display: flex;
    justify-content: center;
    margin: 2.25rem 0;
}

.sp-title {
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.sp-info {
    font-weight: 300;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.sp-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-btn {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;
    display: grid;
    place-items: center;
    border: 1px solid var(--sp-border);
    border-radius: 50%;
    background: transparent;
    color: var(--sp-fg);
    cursor: pointer;
    transition: border-color 0.15s;
}

.sp-btn svg {
    pointer-events: none;                /* Tap trifft immer den Button, nicht das SVG */
}

.sp-btn:hover {
    border-color: var(--sp-accent);
}

.sp-icon {
    fill: currentColor;
}

.sp-seek {
    --progress: 0%;
    flex: 1;
    height: 4px;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 2px;
    cursor: pointer;
    touch-action: manipulation;
    background: none;
}

.sp-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sp-accent);
    border: 0;
    margin-top: -4px;
}

.sp-seek::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--sp-accent) var(--progress), var(--sp-border) var(--progress));
}

.sp-seek::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sp-accent);
    border: 0;
}

.sp-time {
    flex: none;
    min-width: 3.2em;
    text-align: right;
    color: var(--sp-muted);
    font-variant-numeric: tabular-nums;
}

.sp-error {
    margin-top: 10px;
    color: #c0392b;
    font-size: 12px;
}


/* ===== 9. FOOTER ===== */

.site-footer {
    background: var(--color-footer-bg);
    color: var(--color-text-light);
    text-align: center;
    padding: 40px 20px;
    font-size: 0.84rem;
    letter-spacing: 0.03em;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    transition: background-color 0.4s ease;
}

.site-footer p + p {
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: 0.76rem;
}


/* ===== 10. 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;
    }
}


/* ===== 11. 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;
    }
}

@media (min-width: 768px) {
    .modal-box {
        max-width: 640px;
    }
}

@media (min-width: 1200px) {
    .modal-box {
        max-width: 800px;
    }
}


/* ===== 12. IMPRESSUM / DATENSCHUTZ (ehem. impressum.css) ===== */

.legal-page {
    background: var(--color-section-bg);
}

/* Banner (ruhiger Ersatz für den Hero) */
.legal-banner {
    position: relative;
    overflow: hidden;
    background: var(--color-page-bg);
    padding: 72px 20px 56px;
    text-align: center;
    border-bottom: 1px solid rgba(120, 110, 100, 0.12);
}

.legal-banner-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.18;
    pointer-events: none;
}

.legal-banner .orb-a {
    width: 260px;
    height: 260px;
    background: var(--color-lilac);
    top: -80px;
    left: -60px;
}

.legal-banner .orb-b {
    width: 220px;
    height: 220px;
    background: var(--color-green);
    bottom: -90px;
    right: -50px;
}

.legal-title {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.9rem, 4vw, 3rem);
    color: var(--color-title-plain);
    margin: 6px 0 22px;
    line-height: 1.15;
}

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

.legal-amp {
    color: var(--color-text-muted);
    font-weight: 200;
}

.legal-back {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}

.legal-back:hover {
    color: var(--color-rose);
    border-color: var(--color-rose);
}

/* Hauptinhalt */
.legal-main {
    padding: 64px 0 100px;
    color: var(--color-text-dark);
}

.legal-main p,
.legal-main li {
    font-size: 0.94rem;
    line-height: 1.85;
}

.legal-main a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(120, 110, 100, 0.4);
    text-underline-offset: 2px;
}

.legal-main a:hover {
    text-decoration-color: currentColor;
}

/* Sprach-Umschalter */
.legal-lang-switch .nav-link {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid rgba(120, 110, 100, 0.25);
    border-radius: var(--radius-pill);
    padding: 8px 22px;
    margin: 0 4px;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.legal-lang-switch .nav-link.active {
    color: #fff;
    background: var(--gradient-accent);
    border-color: transparent;
}

/* Eyebrow-Zeilen (z. B. "Angaben gemäß § 5 DDG") */
.legal-eyebrow {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.legal-list {
    padding-left: 1.2rem;
    margin-bottom: 1rem;
}

.legal-list li {
    margin-bottom: 4px;
    line-height: 1.7;
}

/* Artikel (Fließtext ohne Farbakzente) */
.legal-article {
    color: var(--color-text-dark);
}

.legal-article h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--color-title-plain);
    margin-top: 56px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(120, 110, 100, 0.18);
}

.legal-article h2:first-child {
    margin-top: 0;
}

.legal-article h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--color-title-plain);
    margin-top: 30px;
    margin-bottom: 10px;
}

@media (max-width: 575.98px) {
    .legal-banner {
        padding: 56px 16px 40px;
    }

    .legal-main {
        padding: 44px 0 70px;
    }

    .legal-article h2 {
        font-size: 1.3rem;
        margin-top: 42px;
    }

    .legal-article h3 {
        font-size: 0.98rem;
    }
}