/*
Theme Name: Florian Sczesny
Theme URI: https://kommunikationundverwaltung.de
Author: Florian Sczesny
Description: Helles Artist-Theme mit Rem-Blick-Typografie, Vollbild-Hero mit „Aktuell"-Kästchen, Overlay-Navigation (mit eigenen URLs je Rubrik) und erweiterbaren Inhaltstypen (Songs, Termine, Releases).
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: florian-sczesny
*/

/* ---------- Font ---------- */
@font-face {
	font-family: 'RemBlick';
	src: url('fonts/Rem-Blick.woff') format('woff'),
	     url('fonts/Rem-Blick.ttf') format('truetype');
	font-weight: normal; font-style: normal; font-display: swap;
}

/* ---------- Variablen (HELL) ---------- */
:root {
	--bg: #ffffff;
	--panel: #ffffff;
	--fg: #000000;
	--fg-mid: rgba(0,0,0,0.62);
	--fg-dim: rgba(0,0,0,0.42);
	--fg-faint: rgba(0,0,0,0.28);
	--line: rgba(0,0,0,0.12);
	--line-strong: rgba(0,0,0,0.28);
	--pad: 1.25rem;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
html:has(body.has-bg:not(.is-front)) { background: #20242a; }
body {
	margin: 0; padding: 0;
	background: var(--bg); color: var(--fg);
	font-family: 'RemBlick', 'Helvetica Neue', Arial, sans-serif;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Kopfnavigation (fix) ---------- */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	display: flex; align-items: flex-start; gap: 2.25rem;
	padding: 1.6rem var(--pad);
	font-size: 17px; color: var(--fg-mid);
	background: var(--bg);
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
.site-brand { color: #000; font-size: 20px; letter-spacing: -0.01em; flex-shrink: 0; }
.site-brand:hover { color: #000; }
/* Sobald ein Hintergrundbild da ist (alle Seiten): Balken transparent + Text weiß */
body.has-bg .site-header { background: transparent; border-bottom: none; }
body.has-bg .site-brand { color: #000; }
body.has-bg .site-nav a { color: rgba(0,0,0,0.62); }
body.has-bg .site-nav a:hover, body.has-bg .site-nav a.current { color:#000; border-bottom:1px solid #000; }
.site-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: baseline; }
.site-nav a:hover, .site-nav a.current { color: #000; border-bottom: 1px solid #000; }

/* ---------- Seiten-Container ---------- */
.page-wrap {
	padding: calc(1.6rem + 20px + 1.6rem + 1rem) var(--pad) 4rem;
	max-width: 1100px; margin: 0 auto;
}

/* ---------- Startseite (Vollbild-Hero) ---------- */
.hero {
	position: relative; min-height: 100vh; width: 100%;
	background-color: #eceae4; background-size: cover; background-position: center;
	overflow: hidden; display: flex; flex-direction: column;
}
.hero.has-image::before {
	content: ""; position: absolute; inset: 0;
	background: transparent;
	pointer-events: none;
}
.hero-grid {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 1.5rem;
	padding: 1.6rem var(--pad) 2rem;
	color: var(--fg);
	align-items: start;
}
/* Alle drei Hero-Spalten starten mit identischer erster Zeile → exakt gleiche Oberkante */
.hero-col, .hero-desc { line-height: 1.4; }
.hero-col > :first-child, .hero-desc > :first-child { margin-top: 0; line-height: 1.4; }
.hero-desc p { margin: 0; line-height: 1.4; }
.hero-desc p + p { margin-top: 0.8em; }
.site-brand, .site-nav a { line-height: 1.4; }
.hero-grid > * { margin-top: 0; padding-top: 0; }
.hero.has-image .hero-grid { color: var(--fg); }
.hero-col { font-size: 19px; line-height: 1.4; }
.hero-col .muted { color: var(--fg-mid); }
.hero.has-image .hero-col .muted { color: var(--fg-mid); }
.hero-col .work-title { font-style: italic; }
.hero-desc { font-size: 18px; line-height: 1.4; }
.hero.has-image .hero-desc { color: var(--fg); }
.hero-desc .read-more { display: inline-block; margin-top: 1.25rem; border-bottom: 1px solid var(--line-strong); cursor: pointer; }
.hero.has-image .hero-desc .read-more { border-color: var(--line-strong); }
.hero-desc .read-more:hover { border-color: currentColor; }

.hero-spacer { flex: 1; }

/* Großer Name (falls kein Werktitel) */
.hero-name {
	position: relative; z-index: 2; text-align: center; padding: 2rem 1rem;
	font-size: clamp(40px, 8vw, 88px); line-height: 0.95; letter-spacing: -0.01em;
}

/* ---------- AKTUELL-Kästchen (Startseite unten) ---------- */
.now-strip { position: relative; z-index: 2; padding: 0 var(--pad) 2rem; }
.now-label { font-size: 10px; letter-spacing: 0.18em; margin-bottom: 8px; text-transform: uppercase; color: var(--fg-dim); }
.hero.has-image .now-label { color: var(--fg-dim); }
.now-cards { display: flex; gap: 10px; }
.now-card {
	flex: 1; display: flex; align-items: center; gap: 10px;
	background: rgba(255,255,255,0.72);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	border: 1px solid var(--line); padding: 10px 12px;
	border-radius: 3px; cursor: pointer; transition: border-color 0.15s;
}
.now-card:hover { border-color: var(--line-strong); }
.hero.has-image .now-card { background: rgba(255,255,255,0.72); }
.now-card .now-thumb { width: 44px; height: 44px; border-radius: 2px; flex-shrink: 0; background-size: cover; background-position: center; background-color: #ddd; }
.now-card .now-kicker { color: var(--fg-dim); font-size: 10px; letter-spacing: 0.1em; }
.now-card .now-title { color: var(--fg); font-size: 15px; line-height: 1.05; }
.now-card .now-arrow { color: var(--fg-mid); font-size: 16px; }

/* ---------- Controls ---------- */
.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; }
.controls .search {
	flex: 1; min-width: 200px; background: transparent;
	border: 1px solid var(--line-strong); color: var(--fg);
	font-family: inherit; font-size: 15px; padding: 8px 12px; border-radius: 2px; outline: none;
}
.controls .search::placeholder { color: var(--fg-faint); }
.seg { display: flex; gap: 6px; }
.ctrl {
	background: transparent; border: 1px solid var(--line-strong); color: var(--fg);
	font-family: inherit; font-size: 14px; padding: 7px 12px; border-radius: 2px; cursor: pointer;
}
.ctrl.on { background: #000; color: #fff; border-color: #000; }
.section-label { font-size: 13px; color: var(--fg-dim); letter-spacing: 0.1em; margin-bottom: 1rem; text-transform: uppercase; }

/* ---------- Listenzeilen (Lyrics / Live) ---------- */
.row {
	cursor: pointer; padding: 12px 2px; border-bottom: 1px solid var(--line);
	color: var(--fg-mid); display: flex; gap: 1rem; align-items: baseline;
	justify-content: space-between; transition: color 0.15s, padding-left 0.15s;
}
.row:hover { color: #000; padding-left: 8px; }
.row.past { color: var(--fg-faint); }
.row.past:hover { color: var(--fg-mid); }
.row .meta { font-size: 13px; color: var(--fg-faint); }
.row .date { width: 130px; flex-shrink: 0; }
.row .venue { color: var(--fg-dim); font-size: 14px; text-align: right; }
.empty { color: var(--fg-faint); padding: 1rem 0; }

/* ---------- Work-Raster ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.card { cursor: pointer; }
.cover {
	width: 100%; aspect-ratio: 1; border: 1px solid var(--line);
	background-size: cover; background-position: center; background-color: #eee;
	display: flex; align-items: center; justify-content: center; transition: opacity 0.15s;
}
.card:hover .cover { opacity: 0.85; }
.cover .cover-tag { color: var(--fg-dim); font-size: 12px; letter-spacing: 0.1em; }
.card .card-title { color: #000; font-size: 16px; margin-top: 8px; line-height: 1.1; }
.card .card-year { color: var(--fg-dim); font-size: 13px; }

/* ---------- Overlay (Detail: Song/Termin/Release) ---------- */
.overlay {
	position: fixed; top: 0; right: 0; bottom: 0; width: 50%; max-width: 640px;
	background: var(--panel); box-shadow: -1px 0 5rem rgba(0,0,0,0.15);
	border-left: 1px solid var(--line);
	transform: translateX(105%); transition: transform 0.45s cubic-bezier(0.4,0,0.1,1);
	overflow-y: auto; padding: 1.5rem 1.75rem; z-index: 200;
}
.overlay.open { transform: translateX(0); }
.overlay-close { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; }
.overlay-close a { cursor: pointer; color: var(--fg-mid); font-size: 15px; }
.overlay-title { font-size: 40px; color: #000; line-height: 1; margin-bottom: 0.3rem; }
.overlay-meta { font-size: 13px; color: var(--fg-dim); letter-spacing: 0.06em; margin-bottom: 1.25rem; }
.overlay-body { font-size: 17px; line-height: 1.7; color: var(--fg); }
.overlay-body p { margin: 0 0 1em; }
.streams { margin-top: 1.75rem; }
.streams .streams-label { font-size: 12px; color: var(--fg-faint); letter-spacing: 0.1em; margin-bottom: 6px; }
.stream-link {
	display: inline-block; border: 1px solid var(--line-strong); color: var(--fg);
	font-size: 13px; padding: 5px 12px; border-radius: 2px; margin: 6px 6px 0 0;
}
.stream-link:hover { border-color: #000; color: #000; }
.btn-primary {
	display: inline-block; background: #000; color: #fff;
	font-size: 14px; padding: 8px 18px; border-radius: 2px; margin-top: 12px;
}
.btn-primary:hover { background: #333; }

/* ---------- Nav-Overlay (große Rubrik-Modals) ---------- */

/* ---------- About / Prosa ---------- */
.prose { max-width: 720px; font-size: 18px; line-height: 1.7; color: var(--fg); }
.prose h1, .prose h2 { color: #000; font-weight: normal; }
.prose h1 { font-size: clamp(36px, 6vw, 56px); line-height: 1; margin: 0 0 1.5rem; }
.prose a { color: #000; border-bottom: 1px solid var(--line-strong); }

/* ---------- Shop ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.shop-item .shop-price { color: var(--fg); font-size: 15px; margin-top: 8px; }
.shop-item .card-title { margin-top: 8px; color:#000; font-size:16px; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
	.site-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 1.25rem var(--pad); }
	.page-wrap { padding-top: 8rem; }
	.grid, .shop-grid { grid-template-columns: repeat(2, 1fr); }
	.overlay { width: 100%; max-width: 100%; }
	.row .venue { display: none; }
	.hero-grid { grid-template-columns: 1fr; gap: 0.75rem; padding: 7rem var(--pad) 2rem; }
	.hero-name { font-size: clamp(36px, 12vw, 60px); }
	.now-cards { flex-direction: column; }
}

/* ============================================================
 * v3 — Song-Archiv, Audio-Player, Gating, Animationen
 * ============================================================ */

/* ---- Sanfte Seiten-Animation ---- */
@keyframes fsRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fs-fade { animation: fsRise 0.5s cubic-bezier(0.22,1,0.36,1) both; }
.hero-grid { animation: fsRise 0.7s cubic-bezier(0.22,1,0.36,1) both; }

/* ---- AKTUELL-Kästchen: Animation, ohne Label ---- */
.now-label { display: none; }
.now-card { opacity: 0; transform: translateY(14px); animation: fsRise 0.7s cubic-bezier(0.22,1,0.36,1) forwards; transition: border-color 0.2s, transform 0.2s; }
.now-card:nth-child(1) { animation-delay: 0.10s; }
.now-card:nth-child(2) { animation-delay: 0.22s; }
.now-card:nth-child(3) { animation-delay: 0.34s; }
.now-card:hover { transform: translateY(-2px); }

/* ---- Modals 5% kleiner (Hintergrund bleibt sichtbar) ---- */
.overlay { top: 2.5vh; bottom: 2.5vh; height: 95vh; }

/* ---- Album-Gruppen ---- */
.album-group { margin-bottom: 2.75rem; }
.album-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); }
.album-cover { width: 64px; height: 64px; flex-shrink: 0; background-size: cover; background-position: center; border: 1px solid var(--line); }
.album-title { font-size: 28px; font-weight: normal; color: #000; margin: 0; line-height: 1; }
.album-year { color: var(--fg-dim); font-size: 20px; }
.album-type { font-size: 11px; letter-spacing: 0.1em; color: var(--fg-dim); margin-top: 4px; }

/* ---- Song-Zeilen ---- */
.song-list { display: flex; flex-direction: column; }
.song-row { display: flex; align-items: baseline; gap: 1rem; padding: 11px 2px; border-bottom: 1px solid var(--line); color: var(--fg-mid); transition: color 0.15s, padding-left 0.15s; }
.song-row:hover { color: #000; padding-left: 8px; }
.song-track { width: 32px; flex-shrink: 0; color: var(--fg-faint); font-size: 14px; }
.song-name { flex: 1; }
.song-arrow { color: var(--fg-faint); }
.song-back { display: inline-block; margin-bottom: 1.5rem; color: var(--fg-mid); font-size: 15px; }
.song-back:hover { color: #000; }

/* ---- Song-Einzelseite ---- */
.song-header { margin-bottom: 1.5rem; }
.song-title { font-size: clamp(36px, 6vw, 56px); font-weight: normal; color: #000; line-height: 1; margin: 0 0 0.5rem; }
.song-sub { color: var(--fg-mid); font-size: 16px; }
.song-sub a { color: var(--fg-mid); border-bottom: 1px solid var(--line); }
.song-sub a:hover { color: #000; }
.song-lyrics { margin: 2rem 0; }

/* ---- Audio-Player ---- */
.player { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 12px 14px; margin: 1.5rem 0; max-width: 520px; }
.player-play { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; font-size: 14px; color: #000; display: flex; align-items: center; justify-content: center; }
.player-play:hover { background: #000; color: #fff; }
.player-body { flex: 1; }
.player-bar { height: 4px; background: var(--line); border-radius: 2px; cursor: pointer; position: relative; }
.player-progress { height: 100%; width: 0%; background: #000; border-radius: 2px; }
.player-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; color: var(--fg-dim); }
.player-quality .q-switch { background: transparent; border: 1px solid var(--line-strong); color: var(--fg); font-family: inherit; font-size: 12px; padding: 3px 10px; border-radius: 2px; cursor: pointer; }
.player-quality .q-switch:hover { border-color: #000; color: #000; }
.player-quality .q-locked { color: var(--fg-dim); }

/* ---- Gating-Hinweis ---- */
.locked-note { border: 1px dashed var(--line-strong); border-radius: 4px; padding: 1.5rem; text-align: center; }
.locked-title { color: var(--fg); font-size: 17px; margin-bottom: 1rem; }

/* ---- Album-Einzelseite ---- */
.album-single-head { display: flex; gap: 1.5rem; align-items: flex-end; margin-bottom: 1.5rem; }
.album-single-cover { width: 180px; height: 180px; flex-shrink: 0; background-size: cover; background-position: center; border: 1px solid var(--line); }

@media (max-width: 720px) {
	.overlay { top: 0; bottom: 0; height: 100vh; }
	.album-single-head { flex-direction: column; align-items: flex-start; }
	.album-single-cover { width: 140px; height: 140px; }
}

/* ============================================================
 * v4 — Globaler Player, klickbare Alben, Nav-Overlay-Fix
 * ============================================================ */

/* ---- Nav-Overlay: KEIN Springen ----
   Der eingefügte .page-wrap behält sein eigenes Layout (max-width, Padding).
   Der Overlay-Container liefert nur den Rahmen + die feste Titelleiste. */
/* eingefügter Seiteninhalt: gleiches Layout wie normale Seite, nur ohne den fixen-Header-Offset */

/* ---- Klickbare Album-Köpfe ---- */
.album-head-link { text-decoration: none; }
.album-head-link:hover .album-title { text-decoration: underline; }
.album-more { font-size: 12px; color: var(--fg-dim); margin-top: 4px; }
.album-head-link:hover .album-more { color: #000; }

/* ---- Play-Buttons in Song-Zeilen ---- */
.song-row { align-items: center; }
.song-play {
	width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
	border: 1px solid var(--line-strong); background: #fff; color: #000;
	font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.song-play:hover { background: #000; color: #fff; }
.song-play-empty { border: none; background: transparent; color: var(--fg-faint); cursor: default; }
.song-name { flex: 1; }

/* ---- Großer Play-Button (Song-Seite) ---- */
.song-bigplay {
	display: inline-flex; align-items: center; gap: 10px;
	background: #000; color: #fff; border: none; cursor: pointer;
	font-family: inherit; font-size: 16px; padding: 12px 22px; border-radius: 3px; margin: 1.5rem 0;
}
.song-bigplay:hover { background: #222; }
.bigplay-icon { font-size: 12px; }

/* ---- GLOBALER PLAYER (feste Leiste unten) ---- */
.gplayer {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
	display: none; align-items: center; gap: 14px;
	background: rgba(255,255,255,0.72);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	border-top: 1px solid var(--line);
	padding: 10px 16px; box-shadow: 0 -2px 30px rgba(0,0,0,0.06);
}
.gplayer.active { display: flex; }
body.has-player { padding-bottom: 76px; }
.gplayer-cover { width: 48px; height: 48px; flex-shrink: 0; border-radius: 2px; background-size: cover; background-position: center; background-color: #eee; }
.gplayer-info { min-width: 130px; max-width: 200px; }
.gplayer-title { color: #000; font-size: 15px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gplayer-sub { color: var(--fg-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gplayer-play {
	width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
	border: 1px solid var(--line-strong); background: #000; color: #fff;
	font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.gplayer-play:hover { background: #222; }
.gplayer-progress-wrap { flex: 1; display: flex; align-items: center; gap: 10px; }
.gplayer-time { font-size: 11px; color: var(--fg-dim); flex-shrink: 0; }
.gplayer-bar { flex: 1; height: 4px; background: var(--line); border-radius: 2px; cursor: pointer; position: relative; }
.gplayer-progress { height: 100%; width: 0%; background: #000; border-radius: 2px; }
.gplayer-quality { flex-shrink: 0; font-size: 12px; }
.gplayer-quality .gq-switch { background: transparent; border: 1px solid var(--line-strong); color: var(--fg); font-family: inherit; font-size: 12px; padding: 4px 10px; border-radius: 2px; cursor: pointer; }
.gplayer-quality .gq-switch:hover { border-color: #000; color: #000; }
.gplayer-quality .gq-locked, .gplayer-quality .gq-prev { color: var(--fg-dim); }
.gplayer-quality .gq-on { color: #000; }
.gplayer-close { cursor: pointer; color: var(--fg-dim); font-size: 15px; flex-shrink: 0; padding: 0 4px; }
.gplayer-close:hover { color: #000; }

@media (max-width: 720px) {
	.gplayer { flex-wrap: wrap; gap: 10px; }
	.gplayer-progress-wrap { order: 5; width: 100%; flex-basis: 100%; }
	.gplayer-info { min-width: 0; flex: 1; }
	body.has-player { padding-bottom: 120px; }
}

/* ============================================================
 * v6.1 — Fester Bild-Hintergrund + weiße Inhaltskarte (Weg A), fix
 * ============================================================ */

/* Fester Vollbild-Hintergrund. Eigene Ebene, damit er zuverlässig durchgreift. */
body.has-bg::before {
	content: "";
	position: fixed; inset: 0; z-index: 0;
	background-size: cover; background-position: center; background-attachment: fixed;
	background-color: #20242a;
	pointer-events: none;
}
/* Auf Unterseiten mit Bild: Body selbst NICHT weiß, sonst verdeckt er das Bild. */
body.has-bg:not(.is-front) { background: transparent; }
/* Header + Inhalt liegen über dem Hintergrund. */
body.has-bg .site-header { z-index: 100; }
body.has-bg main, body.has-bg .page-wrap { position: relative; z-index: 1; }

/* Transluzente Lese-„Fenster"-Karte: Bild scheint durch, größer, scrollbar. */
body.has-bg:not(.is-front) .page-wrap {
	position: relative;
	background: rgba(255,255,255,0.72);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	max-width: 960px;
	margin: 0 auto;
	margin-top: calc(1.6rem + 20px + 1.6rem + 3rem);
	padding: 3.5rem 3.5rem 4rem;
	border-radius: 5px;
	box-shadow: 0 0 90px rgba(0,0,0,0.30);
	max-height: calc(100vh - (1.6rem + 20px + 1.6rem + 3rem) - 4rem);
	overflow-y: auto;
}
/* Wenn der globale Player aktiv ist, Fenster etwas kürzer, damit es nicht dahinter verschwindet */
body.has-player.has-bg:not(.is-front) .page-wrap { max-height: calc(100vh - (1.6rem + 20px + 1.6rem + 3rem) - 4rem - 76px); }

/* Auf Unterseiten mit Bild scrollt nur die Karte, das Bild bleibt fix. */
body.has-bg:not(.is-front) { overflow: hidden; }

/* Close-Button (zurück zur Startseite) oben rechts im Fenster */
.card-close {
	position: absolute; top: 1.1rem; right: 1.25rem; z-index: 5;
	width: 32px; height: 32px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: var(--fg-mid); font-size: 15px; cursor: pointer;
	border: 1px solid transparent;
}
.card-close:hover { color: #000; border-color: var(--line); }

/* Ohne Bild: alles bleibt schlicht weiß (kein ::before, keine Karte). */
body:not(.has-bg) .card-close { display: none; }

/* Großer Name im Body entfällt (steht im Header). */
.hero-name { display: none; }

@media (max-width: 720px) {
	body.has-bg:not(.is-front) .page-wrap {
		margin-top: 6.5rem; padding: 3rem 1.25rem 3rem; max-width: 100%; border-radius: 0;
		max-height: none; overflow-y: visible;
	}
	body.has-player.has-bg:not(.is-front) .page-wrap { max-height: none; }
	body.has-bg:not(.is-front) { overflow: visible; }
	body.has-bg::before { background-attachment: scroll; }
}

/* ============================================================
 * v7 — Gating-Anzeige im Archiv, Details-Label, Video/Download
 * ============================================================ */

/* Song-Zeile: Details-Label rechts + Members-Schloss */
.song-go { color: var(--fg-dim); font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.song-row:hover .song-go { color: #000; }
.song-lock { font-size: 11px; letter-spacing: 0.06em; color: var(--fg-dim); white-space: nowrap; flex-shrink: 0; margin-left: 4px; }
.song-row.is-gated .song-name { color: var(--fg-mid); }
.song-row.is-gated:hover .song-name { color: #000; }
/* der alte reine Pfeil entfällt zugunsten von .song-go */

/* Video-Embed */
.song-video { margin: 2rem 0; }
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 4px; }
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Download */
.song-download { margin: 1.5rem 0; }

/* Album-Seite: Members-Hinweis */
.album-gate { display: inline-block; font-size: 12px; letter-spacing: 0.06em; color: var(--fg-dim); border: 1px solid var(--line); border-radius: 2px; padding: 3px 10px; margin-top: 8px; }

/* ============================================================
 * v8 — Ausklappbare Alben, einheitliche Größen, Details rechts
 * ============================================================ */

/* Song-Zeilen: alles auf eine größere, einheitliche Leseebene (nahe Songtitel) */
.song-row { font-size: 20px; }
.song-track { font-size: 18px; width: 40px; }
.song-name { font-size: 20px; }
.song-go { font-size: 18px; color: var(--fg-dim); white-space: nowrap; flex-shrink: 0; }
.song-row:hover .song-go { color: #000; }
.song-lock { font-size: 16px; letter-spacing: 0.02em; color: var(--fg-dim); white-space: nowrap; flex-shrink: 0; margin-left: 4px; }

/* Album-Kopf: klickbar zum Ein-/Ausklappen, Details rechts */
.album-head { cursor: pointer; user-select: none; }
.album-head { align-items: center; }
.album-meta { flex: 1; }               /* schiebt Toggle + Details nach rechts */
.album-toggle { font-size: 18px; color: var(--fg-dim); transition: transform 0.2s; flex-shrink: 0; margin-right: 0.5rem; }
.album-group.is-open .album-toggle { transform: rotate(180deg); }
.album-details { font-size: 18px; }    /* gleiche Größe wie song-go */
.album-head:hover .album-title { text-decoration: underline; }

/* Album-Titel etwas größer, klar als Überschrift */
.album-title { font-size: 30px; }
.album-year { font-size: 22px; }

/* Song-Liste eingeklappt = versteckt (hidden greift nativ, hier nur Abstand) */
.album-group .song-list[hidden] { display: none; }
.album-group.is-open .song-list { margin-top: 0.25rem; }

/* ============================================================
 * v9 — WooCommerce Grundintegration (Basis; Feinschliff nach Screenshots)
 * ============================================================ */

/* Grundtypo in allen Woo-Bereichen an das Theme angleichen */
.woocommerce, .woocommerce-page, .woo-wrap {
	font-family: 'RemBlick', 'Helvetica Neue', Arial, sans-serif;
	color: var(--fg);
}

/* Buttons im Theme-Stil (schwarz, weiße Schrift) */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button.alt {
	background: #000; color: #fff; border-radius: 2px;
	font-family: inherit; font-size: 16px; letter-spacing: 0.02em;
	padding: 0.7em 1.4em; border: none; text-transform: none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce .button.alt:hover {
	background: #222; color: #fff;
}

/* Preise */
.woocommerce .price, .woocommerce span.price { color: #000; font-size: 18px; }
.woocommerce ul.products li.product .price { color: var(--fg-mid); }

/* Produktraster: ruhiger, klarer */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 18px; font-weight: normal; color: #000;
}
.woocommerce ul.products li.product a img { border-radius: 3px; }

/* Formularfelder */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container--default .select2-selection--single {
	font-family: inherit; font-size: 15px; border: 1px solid var(--line-strong); border-radius: 2px;
}

/* Nachrichten (Warenkorb-Hinweise etc.) dezent */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top-color: #000; font-family: inherit;
}
.woocommerce-message::before, .woocommerce-info::before { color: #000; }

/* Überschriften in Woo an Theme-Titel angleichen */
.woo-wrap h1, .woo-wrap .product_title {
	font-size: clamp(30px, 5vw, 44px); font-weight: normal; color: #000; line-height: 1.05;
}

/* ============================================================
 * v10 — Blog / Journal (öffentlich + Club-only, wie Songs)
 * ============================================================ */

.blog-head { margin-bottom: 2rem; }
.blog-title { font-size: clamp(30px, 5vw, 44px); font-weight: normal; color: #000; margin: 0; }

/* Beitragsliste */
.post-list { display: flex; flex-direction: column; }
.post-row-link {
	display: flex; align-items: center; gap: 1rem;
	padding: 1.1rem 2px; border-bottom: 1px solid var(--line);
	color: var(--fg-mid); transition: color 0.15s, padding-left 0.15s;
}
.post-row-link:hover { color: #000; padding-left: 6px; }
.post-row-main { flex: 1; }
.post-row-title { font-size: 22px; font-weight: normal; color: #000; margin: 0 0 2px; line-height: 1.15; }
.post-row-date { font-size: 15px; color: var(--fg-dim); }
.post-row.is-gated .post-row-title { color: var(--fg-mid); }
.post-row.is-gated:hover .post-row-title { color: #000; }

/* Einzelbeitrag */
.single-post-head { margin-bottom: 1.5rem; }
.post-title { font-size: clamp(30px, 5vw, 48px); font-weight: normal; color: #000; line-height: 1.05; margin: 0 0 0.5rem; }
.post-date { font-size: 15px; color: var(--fg-dim); }
.post-gate { color: var(--fg-dim); }
.post-featured { margin: 1.5rem 0; }
.post-featured img { border-radius: 4px; }
.post-content { margin-top: 1.5rem; }

.single-post-nav {
	display: flex; justify-content: space-between; gap: 1rem;
	margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
	font-size: 16px; color: var(--fg-dim);
}
.single-post-nav a:hover { color: #000; }

/* Pagination */
.blog-pagination { margin-top: 2rem; }
.blog-pagination .page-numbers { display: inline-block; padding: 6px 12px; color: var(--fg-mid); }
.blog-pagination .page-numbers.current { color: #000; border-bottom: 1px solid #000; }
.blog-pagination .page-numbers:hover { color: #000; }