/* music.angela-mahr.de — Nachtblau & Gold */

:root {
    --navy:       #16193c;
    --navy-deep:  #0f1330;
    --navy-card:  #1a1e48;
    --line:       #2a2e5c;
    --gold:       #d4ae4c;
    --gold-light: #e8c975;
    --gold-dark:  #b8932f;
    --cream:      #f1e8d6;
    --muted:      #b4b6d6;
    --dim:        #8d90b8;

    --f-display: 'Playfair Display', Georgia, serif;
    --f-caps:    'Oswald', 'Arial Narrow', sans-serif;
    --f-body:    'Montserrat', system-ui, sans-serif;

    --wrap: 1120px;
    --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
    margin: 0;
    background: var(--navy);
    color: var(--cream);
    font: 400 17px/1.7 var(--f-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap-narrow { --wrap: 860px; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 14px 30px;
    font: 500 17px/1.1 var(--f-caps);
    letter-spacing: .06em; text-transform: uppercase;
    border: 2px solid transparent; border-radius: 3px;
    cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn small {
    font: 600 10px/1.3 var(--f-body);
    letter-spacing: .02em; text-transform: none; margin-top: 3px;
}
.btn-gold {
    background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
    color: #1b1a2e;
    box-shadow: 0 6px 22px rgba(212, 174, 76, .25);
}
.btn-gold:hover { color: #1b1a2e; transform: translateY(-1px); filter: brightness(1.06); }
.btn-outline { border-color: rgba(241, 232, 214, .7); color: var(--cream); background: rgba(15, 19, 48, .25); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-small { padding: 8px 16px; font: 600 11px/1.2 var(--f-body); letter-spacing: .14em; border-width: 1px; }
.btn-block { width: 100%; }

/* ── Header ──────────────────────────────────────────────────────────── */

.site-header {
    position: fixed; inset: 0 0 auto; z-index: 20;
    padding: 18px 0 0;
    transition: padding .3s, background-color .3s, box-shadow .3s;
}
/* Beim Scrollen: schmale Leiste, halbtransparent und verschwommen über dem Inhalt */
.site-header.is-scrolled {
    padding: 8px 0;
    background: rgba(15, 19, 48, .55);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 1px 0 rgba(212, 174, 76, .18), 0 10px 30px rgba(6, 8, 26, .35);
}
.site-header.is-scrolled .header-inner { align-items: center; }
.site-header.is-scrolled .main-nav { padding-top: 0; }
.site-header.is-scrolled .logo { flex-direction: row; gap: 10px; }
.site-header.is-scrolled .logo img { width: 40px; }
.site-header.is-scrolled .logo span { font-size: 18px; }
.header-inner {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 28px;
}
.main-nav { display: flex; gap: 0; align-items: center; padding-top: 22px; }
.main-nav--left { justify-content: flex-end; }
.main-nav a {
    font: 600 18px/1 var(--f-caps); letter-spacing: .05em; text-transform: uppercase;
    color: var(--gold-light); padding: 4px 0;
    text-shadow: 0 1px 8px rgba(6, 8, 26, .6);
}
.main-nav a:hover { color: #fff; }
.main-nav a + a::before {
    content: "•"; color: var(--gold); margin: 0 14px; display: inline-block;
}
/* Menüpunkt „Shop“ (href /#shop) als kleiner Rahmen-Button am rechten Ende */
.main-nav a[href="/#shop"] {
    margin-left: 18px; padding: 5px 12px; border: 1px solid var(--gold);
    font-size: 14px; letter-spacing: .1em; text-shadow: none; transition: background-color .2s, color .2s;
}
.main-nav a[href="/#shop"]::before { display: none; }
.main-nav a[href="/#shop"]:hover { background: var(--gold); color: #1b1a2e; }
.logo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.logo img { width: 84px; height: auto; filter: drop-shadow(0 0 10px rgba(212, 174, 76, .35)); transition: width .3s; }
.logo span {
    font: 600 21px/1 var(--f-caps); letter-spacing: .05em; text-transform: uppercase;
    color: var(--gold-light);
}

.nav-toggle, .nav-burger { display: none; }

/* Sprachwahl: zwei kleine Flaggen rechts oben, außerhalb des Rasters */
.header-inner { position: relative; }
.lang-switch {
    position: absolute; top: 0; right: 0;
    display: flex; gap: 8px; margin: 0;
}
.lang-switch button {
    display: block; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0;
    opacity: .5; transition: opacity .2s, box-shadow .2s;
}
.lang-switch button:hover, .lang-switch button:focus-visible { opacity: 1; }
.lang-switch button[aria-current] { opacity: 1; box-shadow: 0 0 0 1px var(--gold-light); }
.lang-switch img { width: 24px; height: 16px; object-fit: cover; }
.site-header.is-scrolled .lang-switch { top: 50%; transform: translateY(-50%); }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
    position: relative; overflow: hidden;
    min-height: 860px;
    padding: 190px 0 56px;
    display: flex; flex-direction: column; justify-content: space-between;
    background:
        radial-gradient(ellipse 60% 45% at 85% 88%, rgba(240, 160, 110, .55), transparent 70%),
        radial-gradient(ellipse 55% 50% at 70% 100%, rgba(210, 120, 140, .45), transparent 70%),
        linear-gradient(180deg, #1c1f55 0%, #2a2c6e 45%, #5b4a86 75%, #8e6a8e 100%);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-photo {
    position: absolute; left: 0; top: 0; height: 100%; width: 58%;
    object-fit: cover; object-position: 35% 30%;
    -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%), linear-gradient(180deg, #000 60%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, #000 55%, transparent 100%), linear-gradient(180deg, #000 60%, transparent 100%);
            mask-composite: intersect;
    opacity: .95;
}
.hero::after { /* sanfte Abdunklung für Lesbarkeit unten */
    content: ""; position: absolute; inset: auto 0 0; height: 45%; z-index: 0;
    background: linear-gradient(180deg, transparent, rgba(22, 25, 60, .75));
}

/* Tapete (nur breite Bildschirme, s. unten) */
.wall { display: none; }
.page { position: relative; }

.hero-inner { position: relative; z-index: 2; display: flex; justify-content: flex-end; }
.hero-copy { width: min(560px, 100%); text-align: center; }
.hero-claim {
    margin: 0 0 6px;
    font: 500 clamp(18px, 2.2vw, 26px)/1.2 var(--f-caps); letter-spacing: .02em; text-transform: uppercase;
    color: var(--gold-light);
}
/* TEST: Rage Italic (Monotype, lizenzpflichtig) — nur aus der lokalen Installation des
   Besuchers (z. B. MS Office), sonst Playfair Display. Zurück: .hero h1 wieder auf
   font: 700 … var(--f-display) setzen und die @font-face-Regel entfernen. */
@font-face {
    font-family: 'Rage Local';
    src: local('Rage Italic'), local('RageItalic'), local('Rage');
    size-adjust: 120%; /* Rage läuft kleiner als Playfair */
}
.hero h1 {
    margin: 0;
    font: 700 clamp(52px, 7.4vw, 92px)/1.02 'Rage Local', var(--f-display);
    font-synthesis: none; /* Rage nicht künstlich fetten, Playfair-Ersatz bleibt 700 */
    color: #fbf3e2;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .35);
}
.hero-sub {
    margin: 12px 0 28px;
    font: 400 clamp(16px, 1.8vw, 21px)/1.3 var(--f-body); letter-spacing: .04em; text-transform: uppercase;
    color: var(--cream);
}
.hero-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.hero-peace {
    position: absolute; left: 50%; bottom: -84px; transform: translateX(-50%);
    width: 54px; opacity: .9;
}

.hero-cards {
    position: relative; z-index: 2; margin-top: 120px;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
}
.hero-card h2 {
    margin: 0 0 12px;
    font: 500 26px/1 var(--f-caps); letter-spacing: .01em; text-transform: uppercase;
    color: var(--gold-light);
}
.hero-card p { margin: 0 0 16px; font-size: 16px; line-height: 1.55; font-weight: 400; }
.release { display: flex; gap: 16px; margin-bottom: 16px; }
.release img {
    width: 100px; height: 100px; object-fit: cover; flex: none;
    box-shadow: 0 0 0 1px rgba(212, 174, 76, .5), 0 8px 24px rgba(0, 0, 0, .4);
}
.release-tracks, .mini-dates { list-style: none; margin: 0 0 16px; padding: 0; flex: 1; min-width: 0; font-size: 15px; font-weight: 400; }
.release-tracks { counter-reset: t; margin: 0; }
.release-tracks li, .mini-dates li {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid rgba(241, 232, 214, .14);
}
.release-tracks li { counter-increment: t; }
.release-tracks li span:first-child::before { content: counter(t) ". "; }
.release-tracks li span:last-child, .mini-dates li span:first-child { color: var(--muted); }
.mini-dates li { justify-content: flex-start; }
.mini-dates li span:first-child { width: 58px; flex: none; }
/* Lange Songtitel und Konzertnamen enden mit „…“ statt in die Nachbarkarte zu laufen. */
.release-tracks li span:first-child, .mini-dates li span:last-child {
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Goldene Ornamente */
.orn { position: absolute; z-index: 1; pointer-events: none; opacity: .9; }
.orn-dove { filter: drop-shadow(0 0 6px rgba(212, 174, 76, .4)); }
.orn-dove--a { width: 150px; right: 3%; top: 470px; transform: scaleX(-1) rotate(-8deg); }
.orn-dove--b { width: 70px; right: 22%; top: 520px; transform: scaleX(-1); opacity: .75; }
.orn-dove--c { width: 64px; left: 44%; top: 210px; opacity: .6; }
.orn-branch--a { width: 60px; left: 3%; top: 240px; transform: rotate(-35deg); opacity: .7; }
.orn-branch--b { display: none; }
.orn-leaf { width: 46px; left: 2%; top: 70px; opacity: .15; }
.orn-dove--booking { width: 80px; right: 6%; top: 90px; opacity: .15; }

/* ── Sektionen ───────────────────────────────────────────────────────── */

.section { position: relative; padding: 110px 0; }
.section-alt { background: var(--navy-deep); }
.section-follow { padding-top: 0; } /* direkt anschließende Sektion gleicher Farbe (Angela solo) */
.section-head { margin-bottom: 56px; max-width: 640px; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font: 600 11px/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase;
    color: var(--gold);
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--gold); }
.section-head h2 {
    margin: 18px 0 0;
    font: 700 clamp(36px, 4.6vw, 54px)/1.1 var(--f-display);
    color: var(--cream);
}
.section-head h2 em, .accent { font-style: italic; color: var(--gold); }
.lede { margin: 22px 0 0; color: var(--muted); font-size: 18px; }

/* Goldene Eck-Winkel wie in der Vorlage */
.corner-tl, .corner-tr, .corner-frame { position: relative; }
.corner-tl::before, .corner-tr::before, .corner-frame::before, .corner-frame::after {
    content: ""; position: absolute; width: 32px; height: 32px; z-index: 2; pointer-events: none;
}
.corner-tl::before { left: 0; top: 0; border-left: 2px solid var(--gold); border-top: 2px solid var(--gold); }
.corner-tr::before { right: 0; top: 0; border-right: 2px solid var(--gold); border-top: 2px solid var(--gold); }
.corner-frame::before { left: -8px; top: -8px; border-left: 2px solid var(--gold); border-top: 2px solid var(--gold); }
.corner-frame::after { right: -8px; bottom: -8px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }

/* ── Videos ──────────────────────────────────────────────────────────── */

.video-grid { display: grid; gap: 16px; }
.video-grid--2 { grid-template-columns: repeat(2, 1fr); }
.video-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }

.video-card {
    display: block; aspect-ratio: 16 / 9; overflow: hidden; color: var(--cream);
    background: var(--navy-deep);
}
.video-card img {
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(.85) brightness(.7); transition: transform .5s, filter .3s;
}
.video-card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(22, 25, 60, .15) 30%, rgba(22, 25, 60, .9));
}
.video-card:hover img { transform: scale(1.04); filter: saturate(1) brightness(.85); }
.video-caption { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; }
.video-caption strong { display: block; font-weight: 600; font-size: 18px; color: #fff; }
.video-caption small { display: block; margin-top: 2px; color: rgba(241, 232, 214, .85); font-weight: 500; font-size: 14px; letter-spacing: .03em; }

.play {
    position: absolute; left: 50%; top: 50%; z-index: 2;
    width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
    border: 2px solid var(--gold); background: rgba(15, 19, 48, .35);
    transition: transform .2s, background .2s;
}
.play::after {
    content: ""; position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -5px;
    border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--gold);
}
a:hover .play { transform: scale(1.08); background: rgba(212, 174, 76, .2); }
.play--small { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.play--small::after { border-width: 7px 0 7px 12px; margin: -7px 0 0 -4px; }

.mv-card { display: block; background: var(--navy-card); color: var(--cream); }
.mv-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.mv-thumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); transition: transform .5s; }
.mv-card:hover .mv-thumb img { transform: scale(1.04); }
.mv-meta { display: block; padding: 18px 20px 22px; }
.mv-meta small { display: block; font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mv-meta strong { display: block; margin-top: 6px; font-weight: 600; font-size: 19px; line-height: 1.35; color: #fff; }
.mv-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
.mv-grid .mv-meta strong { font-size: 21px; }
.mv-grid.is-collapsed > .mv-card:nth-child(n+7) { display: none; }
.mv-more { margin-top: 40px; text-align: center; }
.mv-more .btn[hidden] { display: none; }

.video-modal {
    position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
    background: rgba(8, 10, 28, .88); padding: var(--gutter);
}
.video-modal[hidden] { display: none; }
.video-modal-inner { position: relative; width: min(1000px, 100%); aspect-ratio: 16 / 9; }
.video-frame, .video-frame iframe { width: 100%; height: 100%; border: 0; }
.video-modal-close {
    position: absolute; right: 0; top: -46px;
    background: none; border: 0; color: var(--cream); font-size: 36px; line-height: 1; cursor: pointer;
}

/* ── Songtexte ───────────────────────────────────────────────────────── */

.lyrics { display: grid; gap: 6px; }
.lyric { border: 1px solid var(--line); background: var(--navy-deep); }
.lyric summary {
    display: flex; align-items: center; gap: 24px;
    padding: 22px 24px; cursor: pointer; list-style: none;
}
.lyric summary::-webkit-details-marker { display: none; }
.lyric-no { font: 400 13px/1 ui-monospace, monospace; color: var(--dim); }
.lyric-title { flex: 1; }
.lyric-title strong { display: block; font-weight: 600; font-size: 18px; color: #fff; }
.lyric-title small { color: var(--dim); font-size: 11px; letter-spacing: .08em; }
.lyric-icon::before { content: "+"; color: var(--gold); font-size: 18px; }
.lyric[open] .lyric-icon::before { content: "×"; }
.lyric[open] summary { border-bottom: 1px solid var(--line); }
.lyric-body { padding: 24px 28px 30px; color: var(--muted); font-size: 17px; line-height: 1.85; }
.lyric-body p { margin: 0 0 20px; }
.lyric-body p:last-child { margin: 0; }

/* ── Tour ────────────────────────────────────────────────────────────── */

.tour-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tour-row {
    display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 16px;
    padding: 22px 0; border-bottom: 1px solid var(--line);
}
.tour-date strong { display: block; color: var(--gold); font-weight: 600; font-size: 15px; }
.tour-date small, .tour-place small { display: block; color: var(--muted); font-size: 14px; }
.tour-place strong { display: block; font-weight: 500; font-size: 16px; color: #fff; }
.btn-ticket {
    padding: 8px 20px; border: 1px solid rgba(241, 232, 214, .45); border-radius: 0;
    font: 500 10px/1.2 var(--f-body); letter-spacing: .22em; color: var(--muted);
}
.btn-ticket:hover { border-color: var(--gold); color: var(--gold); }
.btn-ticket.is-soldout { opacity: .4; cursor: default; }
.tour-place small + small { margin-top: 2px; }
.tour-row.is-past .tour-date strong { color: var(--muted); }
.tour-flyer {
    display: flex; align-items: center; gap: 14px;
    font: 500 10px/1.2 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.tour-flyer img {
    width: 160px; aspect-ratio: 16 / 9; object-fit: cover; display: block;
    border: 1px solid var(--line); transition: border-color .2s, transform .2s;
}
.tour-flyer:hover { color: var(--gold); }
.tour-flyer:hover img { border-color: var(--gold); transform: scale(1.03); }

/* Flyer-Vollbild (nutzt das Overlay der Videos) */
.image-modal-inner { position: relative; margin: 0; width: min(1200px, 100%); }
.image-modal-inner img { display: block; width: 100%; height: auto; max-height: calc(100vh - 120px); object-fit: contain; }

/* ── Alben ───────────────────────────────────────────────────────────── */

.album-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 56px; }
.album-tab {
    padding: 12px 24px; border: 0; cursor: pointer;
    background: var(--navy-card); color: var(--dim);
    font: 600 11px/1.2 var(--f-body); letter-spacing: .2em; text-transform: uppercase;
}
.album-tab span { opacity: .7; }
.album-tab.is-active { background: var(--gold); color: #1b1a2e; }
.album-tab:not(.is-active):hover { color: var(--cream); }

.album-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: start; }
.album-panel[hidden] { display: none; }
.album-cover { max-width: 460px; }
.album-cover img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.album-meta { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.album-info h3 { margin: 8px 0 16px; font: 700 34px/1.1 var(--f-display); color: var(--cream); }
.album-info > p { color: var(--muted); margin: 0 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.tracklist { list-style: none; counter-reset: tr; margin: 0 0 28px; padding: 0; }
.tracklist li {
    counter-increment: tr; display: flex; align-items: center; gap: 22px;
    padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 400; font-size: 16px;
}
.tracklist li::before { content: counter(tr); color: var(--dim); font-size: 11px; width: 10px; }
.tracklist li span { flex: 1; }
.tracklist li.tracklist-head {
    counter-increment: none; padding: 22px 0 8px;
    font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.tracklist li.tracklist-head::before { display: none; }
/* Titel mit Musikvideo: Link öffnet das Video-Overlay (data-youtube) */
.track-link { color: inherit; text-decoration: none; transition: color .2s; }
.track-link:hover, .track-link:focus-visible { color: var(--gold-light); }
.tracklist .track-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tracklist .track-link::after {
    content: ""; flex: none; border-style: solid; border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--gold); opacity: .8; transition: opacity .2s;
}
.tracklist .track-link:hover::after, .tracklist .track-link:focus-visible::after { opacity: 1; }
/* Titel mit MP3 (data-audio): spielt im Hintergrund, beim Abspielen Pause-Zeichen */
.track-link.is-playing { color: var(--gold-light); }
.tracklist .track-link.is-playing::after {
    width: 10px; height: 12px; border-width: 0 3px; border-color: var(--gold); opacity: 1;
}
.album-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Shop-Sektion der Startseite (CD + Download) ──────────────────────── */

.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
.shop-card { display: flex; flex-direction: column; background: var(--navy-card); border: 1px solid var(--line); }
.shop-visual {
    position: relative; display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 3; padding: 28px; overflow: hidden;
    background: radial-gradient(circle at 50% 60%, rgba(212, 174, 76, .14), transparent 70%), var(--navy-deep);
}
/* CD: aufgeklappte Hülle (Klick = groß im Overlay, Titelliste lesbar), Scheibe liegt rechts unten darüber */
.shop-sleeve { position: relative; display: block; width: 94%; margin-bottom: 8%; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.shop-sleeve img { display: block; width: 100%; height: auto; }
.shop-sleeve span {
    position: absolute; left: 0; bottom: 0; padding: 6px 10px; background: rgba(15, 19, 48, .8);
    color: var(--cream); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    opacity: 0; transition: opacity .2s;
}
.shop-sleeve:hover span, .shop-sleeve:focus-visible span { opacity: 1; }
.shop-disc {
    position: absolute; z-index: 2; width: 34%; height: auto; right: 4%; bottom: 3%; pointer-events: none;
    transform: rotate(-12deg); filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55));
    transition: transform .6s ease;
}
.shop-card:hover .shop-disc { transform: translateX(-6%) rotate(20deg); }
/* Download: Cover mit MP3-Schild */
.shop-cover { display: block; height: 80%; width: auto; aspect-ratio: 1; object-fit: cover; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.shop-badge {
    position: absolute; right: 18%; bottom: 13%; padding: 8px 14px;
    background: var(--gold); color: #1b1a2e; font: 600 13px/1 var(--f-caps); letter-spacing: .2em;
}
.shop-body { display: flex; flex-direction: column; flex: 1; padding: 28px 32px 32px; }
.shop-body h3 { margin: 8px 0 12px; font: 700 28px/1.1 var(--f-display); color: var(--cream); }
.shop-body > p { color: var(--muted); margin: 0 0 20px; }
.shop-buy {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line);
}
.shop-price { margin: 0; font: 700 30px/1 var(--f-display); color: var(--gold); }
.shop-price small { display: block; margin-top: 6px; font: 400 12px/1.2 var(--f-body); color: var(--dim); }
.shop-note { margin: 28px 0 0; font-size: 14px; color: var(--dim); }
.shop-note a { color: var(--muted); }
.shop-note a:hover { color: var(--gold-light); }

/* ── Booking ─────────────────────────────────────────────────────────── */

.booking-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 56px; align-items: start; }
.booking-form { display: grid; gap: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.field input, .field textarea {
    width: 100%; padding: 15px 16px;
    background: var(--navy); color: var(--cream);
    border: 1px solid var(--line); border-radius: 0;
    font: 400 16px/1.4 var(--f-body);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.booking-form .btn { margin-top: 4px; font: 600 12px/1 var(--f-body); letter-spacing: .3em; padding: 18px; border-radius: 0; }
.form-note { margin: 12px 0 0; font-size: 16px; color: var(--gold-light); }
.form-note--error { color: #f0a0a0; }

.booking-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
.booking-contact li { border-left: 1px solid var(--line); padding-left: 20px; font-size: 16px; }
.booking-contact small {
    display: block; margin: 6px 0 2px;
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
}
.bc-icon { color: var(--gold); font-size: 16px; }
.booking-contact a, .booking-contact span:last-child { color: var(--cream); }

/* ── Textseiten (Impressum, Datenschutz) ─────────────────────────────── */

.prose { max-width: 780px; padding-top: 170px; }
.prose h2 { font: 700 42px/1.15 var(--f-display); margin: 0 0 28px; }
.prose h3 { font: 600 20px/1.3 var(--f-body); color: var(--gold); margin: 36px 0 10px; }
.prose p, .prose li { color: #cfc8ba; font-weight: 400; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* ── Konzerte (ForgeCMS-Modul Events) ────────────────────────────────
   Das Modul liefert Bootstrap-Markup (card, row, col, btn-…); hier auf
   Nachtblau/Gold umgesetzt. Liste: #tour der Startseite und /termine,
   Einzelseite: .event-detail unter /termine/<id>. */

.events h2 {
    margin: 0 0 18px;
    font: 600 11px/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase;
    color: var(--gold);
}
.events-past:not(:first-child) { margin-top: 64px; }
.events-empty { margin: 0 0 48px; color: var(--muted); font-size: 18px; }
.event-card { border-bottom: 1px solid var(--line); }
.event-card:first-of-type { border-top: 1px solid var(--line); }
.event-card > .row {
    display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 28px;
    padding: 22px 0;
}
.event-card > .row > .col:only-child { grid-column: 1 / -1; }
.event-thumb {
    display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--navy-deep);
    border: 1px solid var(--line); transition: border-color .2s, transform .2s;
}
.event-card a:hover .event-thumb { border-color: var(--gold); transform: scale(1.03); }
.event-card .card-body { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: center; }
.event-card .card-body > * { grid-column: 1; margin: 0; }
.event-card .card-body > .btn { grid-column: 2; grid-row: 1 / span 4; }
.event-date { color: var(--gold); font-weight: 600; font-size: 15px; }
.event-card h3 { margin: 4px 0 2px; font: 700 24px/1.25 var(--f-display); }
.event-card h3 a { color: var(--cream); }
.event-card h3 a:hover { color: var(--gold); }
.event-place { color: var(--muted); font-size: 15px; }
.event-card .card-text { color: var(--muted); font-size: 15px; }
.event-past .event-date { color: var(--muted); }
.event-past .event-thumb { filter: saturate(.7) brightness(.85); }
.events-past > p:last-child { margin: 28px 0 0; }
.events-all { margin-top: 40px; }
.events-page { padding-top: 170px; }

.btn-sm { padding: 8px 16px; font: 600 11px/1.2 var(--f-body); letter-spacing: .14em; border-width: 1px; }
.btn-outline-primary, .btn-outline-secondary { border-color: rgba(241, 232, 214, .45); color: var(--cream); }
.btn-outline-primary:hover, .btn-outline-secondary:hover { border-color: var(--gold); color: var(--gold); }
.btn-primary {
    background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
    color: #1b1a2e;
}
.btn-primary:hover { color: #1b1a2e; filter: brightness(1.06); }

.event-detail {
    width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto;
    padding: 170px 0 110px;
}
.event-detail > p.small a {
    font: 600 11px/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase;
}
.event-detail h1 {
    margin: 22px 0 14px;
    font: 700 clamp(36px, 4.6vw, 54px)/1.1 var(--f-display); color: var(--cream);
}
.event-detail .event-date { margin: 0; font-size: 18px; }
.event-detail .event-place { margin: 4px 0 0; font-size: 17px; }
.event-detail .alert {
    margin: 24px 0 0; padding: 12px 18px;
    border-left: 2px solid var(--gold); background: var(--navy-card); color: var(--muted);
}
.event-detail > .row {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 48px;
    margin-top: 44px;
}
.event-detail > .row > .col:only-child { grid-column: 1 / -1; }
.event-image { display: block; width: 100%; height: auto; border: 1px solid var(--line); cursor: zoom-in; }
.event-detail [itemprop="description"] { color: #cfc8ba; font-size: 17px; line-height: 1.8; }
.event-detail [itemprop="description"] > :first-child { margin-top: 0; }
.event-detail .d-flex { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ── Shop-Seiten (ForgeCMS-Shop-Modul: /shop/order, /shop/pay, /shop/confirm) ── */
/* Das Modul liefert Bootstrap-Klassen; hier nur das Nötige in Nachtblau/Gold. */

.shop-order, .shop-pay, .shop-confirm {
    width: min(860px, 100% - 2 * var(--gutter)); margin-inline: auto;
    padding: 170px 0 110px;
}
.shop-order h1, .shop-pay h1, .shop-confirm h1 {
    margin: 0 0 16px; font: 700 clamp(28px, 3.6vw, 40px)/1.15 var(--f-display); color: var(--cream);
}
.shop-order > .row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: center; margin-bottom: 44px; }
.shop-product-image { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.shop-order .lead { color: var(--muted); margin: 0 0 14px; }
.shop-order .fs-4.fw-bold { margin: 0; font: 700 26px/1 var(--f-display); color: var(--gold); }
.shop-order form .mb-3 { margin-bottom: 18px; }
.shop-order .form-label {
    display: block; margin-bottom: 6px; color: var(--muted);
    font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.shop-order .form-control {
    width: 100%; padding: 14px 16px;
    background: var(--navy-deep); color: var(--cream);
    border: 1px solid var(--line); border-radius: 0;
    font: 400 16px/1.4 var(--f-body);
}
.shop-order textarea.form-control { resize: vertical; min-height: 110px; }
.shop-order input[type="number"].form-control { width: 110px; }
.shop-order .form-control:focus { outline: none; border-color: var(--gold); }
.shop-order .form-check { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; color: var(--muted); }
.form-check-input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--gold); }
.shop-order .small, .shop-pay .small, .shop-confirm .small { font-size: 14px; }
.text-body-secondary { color: var(--dim); }
.shop-legal { color: var(--muted); }
.shop-legal a, .shop-pay a:not(.btn) { color: var(--gold-light); }
.btn-lg { padding: 18px 32px; font: 600 12px/1 var(--f-body); letter-spacing: .3em; }
.shop-pay .alert, .shop-confirm .alert {
    margin: 20px 0; padding: 14px 18px;
    border-left: 2px solid var(--gold); background: var(--navy-card); color: var(--cream);
}
.shop-pay .alert-success, .shop-confirm .alert-success { border-left-color: #7fc28a; }
.shop-pay .alert-danger, .shop-confirm .alert-danger { border-left-color: #e07a7a; }
.shop-pay .fs-5 { font-size: 19px; }
.shop-pay dl.row, .shop-confirm dl.row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px 20px; }
.shop-pay dd, .shop-confirm dd { margin: 0; }
.user-select-all { user-select: all; }
.text-break { overflow-wrap: anywhere; }

/* ── Footer ──────────────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--line); padding: 40px 0; background: var(--navy); }
.footer-inner { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; }
.footer-logo { display: flex; align-items: center; gap: 12px; }
.footer-logo img { width: 34px; opacity: .8; }
.footer-logo strong { font: 700 17px/1 var(--f-display); color: var(--gold); }
.footer-social, .footer-links { display: flex; flex-wrap: wrap; gap: 26px; }
.footer-social a, .footer-links a {
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
.footer-social a:hover, .footer-links a:hover { color: var(--gold); }
.footer-meta { text-align: right; }
.footer-meta p { margin: 0; font: 400 11px/1.8 ui-monospace, monospace; color: var(--dim); }
.footer-links { justify-content: flex-end; gap: 16px; }

/* ── Responsive ──────────────────────────────────────────────────────── */

/* Ab 1280 px: Seitenpanels der Startseiten-Vorlage (design/Startseite-Design-music.png)
   stehen als feste Tapete links und rechts, der Seiteninhalt läuft als Spalte davor.
   Die Spalte hat die Breite des Mittelteils der Vorlage (984 von 1378 px). Der Hero ist
   genau dieses Mittelteil, unverzerrt; die echten Texte liegen an denselben Stellen wie
   in der Vorlage und skalieren mit (1cqw = 9.84 px Vorlage). */
@media (min-width: 1280px) {
    :root { --col: 71.4vw; --side: calc((100vw - var(--col)) / 2); }

    .wall {
        display: block; position: fixed; top: 0; bottom: 0; width: calc(var(--side) + 40px); z-index: 0;
        background: #2b2a5a center / cover no-repeat;
    }
    .wall--left { left: 0; background-image: url(/static/img/wall-left.jpg); background-position: right center; }
    .wall--right { right: 0; background-image: url(/static/img/wall-right.jpg); background-position: left center; }
    .site-header { left: var(--side); right: var(--side); }
    .wall-social {
        position: absolute; left: 40px; right: 0; bottom: 36px;
        display: flex; justify-content: center; gap: 18px;
    }
    .wall-social a { color: #7a5a1c; display: block; width: 28px; height: 28px; }
    .wall-social a:hover { color: var(--navy); }
    .wall-social svg { width: 100%; height: 100%; }

    .page {
        z-index: 1; width: var(--col); margin-inline: auto; background: var(--navy);
        box-shadow: 0 0 36px 6px rgba(6, 8, 26, .6);
    }
    .page .wrap:not(.hero-inner):not(.hero-cards) { width: min(var(--wrap), 100% - 2 * 56px); }
    .page .event-detail { width: min(var(--wrap), 100% - 2 * 56px); }
    .page .shop-order, .page .shop-pay, .page .shop-confirm { width: min(860px, 100% - 2 * 56px); }

    .hero {
        container-type: inline-size;
        min-height: 0; padding: 0;
        aspect-ratio: 984 / 760;
        background: #16193c url(/static/img/hero-center.jpg) center / 100% 100% no-repeat;
    }
    .hero::after, .hero-bg, .hero .orn, .hero-peace { display: none; }

    .hero-inner {
        position: absolute; left: 53cqw; top: 19.4cqw; width: 46.7cqw; margin: 0;
        display: block;
    }
    .hero-copy { width: 100%; }
    .hero-claim { font-size: 2.72cqw; margin-bottom: .7cqw; }
    .hero h1 { font-size: 7.4cqw; }
    .hero-sub { font-size: 2.1cqw; margin: 1.1cqw 0 3.1cqw; }
    .hero-actions { gap: 2.2cqw; }
    .hero-actions .btn { font-size: 1.9cqw; padding: 1.25cqw 2.8cqw; min-width: 14.5cqw; min-height: 5.2cqw; }
    .hero-actions .btn small { font-size: .98cqw; }

    .hero-cards {
        position: absolute; left: 7.3cqw; top: 58.1cqw; width: 86cqw; margin: 0;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3.35cqw;
    }
    .hero-card h2 { font-size: 2.72cqw; margin-bottom: 1.26cqw; }
    .hero-card p {
        font-size: 1.29cqw; line-height: 1.5; margin-bottom: 1.4cqw;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
    }
    .release { gap: 1.54cqw; margin-bottom: 1.54cqw; }
    .release img { width: 10cqw; height: 10cqw; }
    .release-tracks, .mini-dates { font-size: 1.23cqw; margin-bottom: 1.54cqw; }
    .release-tracks { margin: 0; }
    .release-tracks li, .mini-dates li { padding: .49cqw 0; }
    .mini-dates li span:first-child { width: 6.15cqw; }
    .hero-card .btn-small { font-size: 1.05cqw; padding: .77cqw 1.54cqw; }
}

@media (max-width: 960px) {
    .event-detail > .row { grid-template-columns: 1fr; gap: 32px; }
    .header-inner { grid-template-columns: 1fr auto; }
    .logo { flex-direction: row; gap: 12px; grid-column: 1; grid-row: 1; justify-self: start; }
    .logo img { width: 54px; }
    .nav-burger {
        display: flex; flex-direction: column; gap: 6px; justify-content: center;
        grid-column: 2; grid-row: 1; width: 44px; height: 44px; cursor: pointer; z-index: 30;
    }
    .lang-switch, .site-header.is-scrolled .lang-switch { top: 14px; right: 58px; transform: none; }
    .nav-burger span { display: block; height: 2px; background: var(--gold-light); transition: transform .2s, opacity .2s; }
    .main-nav { display: none; }
    .nav-toggle:checked ~ .main-nav {
        display: flex; flex-direction: column; align-items: center; gap: 10px;
        grid-column: 1 / -1; padding-top: 0;
    }
    .nav-toggle:checked ~ .main-nav--left { padding-top: 16px; }
    .main-nav a + a::before { display: none; }
    .main-nav a { font-size: 22px; padding: 6px 0; }
    .main-nav a[href="/#shop"] { margin: 10px 0 0; padding: 8px 18px; font-size: 18px; }
    .site-header:has(.nav-toggle:checked) { background: rgba(15, 19, 48, .96); padding-bottom: 24px; }
    .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .hero { padding-top: 130px; min-height: 0; }
    .hero-photo { width: 100%; opacity: .55; object-position: 45% 0; }
    .orn-branch { display: none; }
    .hero-inner { justify-content: center; }
    .hero-cards { grid-template-columns: minmax(0, 1fr); margin-top: 110px; gap: 40px; max-width: 520px; }
    .orn-dove--a { width: 100px; top: 360px; }
    .orn-dove--b, .orn-dove--c { display: none; }

    .video-grid--3 { grid-template-columns: 1fr 1fr; }
    .album-panel, .booking-grid, .shop-grid { grid-template-columns: 1fr; }
    .shop-grid { max-width: 560px; }
    .album-cover { margin: 8px; }
    .footer-inner { flex-direction: column; text-align: center; }
    .footer-meta { text-align: center; }
    .footer-links { justify-content: center; }
}

@media (max-width: 640px) {
    :root { --gutter: 16px; }
    .section { padding: 80px 0; }
    .section-head { margin-bottom: 40px; }
    .video-grid--2, .video-grid--3, .mv-grid, .form-row { grid-template-columns: 1fr; }
    .tour-row { grid-template-columns: 76px 1fr; }
    .tour-row .btn-ticket { grid-column: 2; justify-self: start; }
    .tour-row .tour-flyer { grid-column: 2; justify-self: start; }
    .tour-flyer img { width: 200px; }
    .lyric summary { gap: 14px; padding: 18px 16px; }
    .lyric-body { padding: 18px 16px 22px; }
    .album-tab { flex: 1 1 100%; text-align: left; }
    .prose { padding-top: 130px; }
    .events-page, .event-detail { padding-top: 130px; }
    .shop-order, .shop-pay, .shop-confirm { padding-top: 130px; }
    .shop-order > .row { grid-template-columns: 1fr; gap: 20px; }
    .shop-product-image { max-width: 220px; }
    .shop-pay dl.row, .shop-confirm dl.row { grid-template-columns: 1fr; gap: 2px; }
    .shop-pay dd, .shop-confirm dd { margin-bottom: 10px; }
    .event-card > .row { grid-template-columns: 1fr; gap: 16px; }
    .event-thumb { max-width: 320px; }
    .event-card .card-body { grid-template-columns: 1fr; }
    .event-card .card-body > .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 14px; }
    .prose h2 { font-size: 32px; }
    .shop-visual, .shop-body { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}