/*
Theme Name: EMWE Music
Description: Dunkles, schlichtes Musiker-Theme mit durchgehendem Player, der beim Seitenwechsel weiterspielt.
Version: 0.1.0
Author: EMWE
Requires PHP: 8.0
Text Domain: emwe
Update URI: false
*/
/* „Update URI: false“ = WordPress sucht für dieses Theme nie nach Updates auf wordpress.org.
   So kann ein fremdes Theme mit gleichem Namen dieses eigene Theme nie überschreiben. */

/* ---------------------------------------------------------------
 * Grundwerte
 * ------------------------------------------------------------ */

:root {
    --bg: #0a0a0b;
    --surface: #131315;
    --surface-2: #1c1c1f;
    --line: #26262a;
    --text: #ecebe8;
    --muted: #8d8c92;
    --accent: #ff5a36;
    --on-accent: #0a0a0b;

    --wall: #2a2a2b;
    --site-w: 1200px;

    /* Bereichsfarben – im Customizer unter „Design-Farben“ änderbar */
    --topbar-bg: #0f0f11;
    --nav-bg: #18181b;
    --site-bg: #0a0a0b;
    --footer-bg: #111113;
    --player-bg: #141416;
    --card-bg: #131315;

    --radius: 14px;
    --gutter: 20px; /* Abstand des Inhalts zum Rand – im Customizer unter „Layout“ */
    --gap: 24px;          /* zwischen den Objekten – ebenda */
    --space-top: 20px;    /* Navigation → Inhalt – ebenda */
    --space-bottom: 20px; /* Inhalt → Footer – ebenda */
    --fs-text: 17px; /* Textgröße – im Customizer unter „Schriftgrößen“ */
    --h-scale: 1;    /* Faktor für alle Überschriften – ebenda */
    --fs-nav: 15px;  /* Hauptnavigation – ebenda */
    --fs-footer: 14px; /* Footer – ebenda */
    --btn-radius: 999px; /* Buttons – im Customizer unter „Buttons“ */
    --btn-h: 48px;
    --btn-border: 1px;
    --btn-case: none;
    --btn-spacing: normal;
    --wrap: none;
    --header-h: 72px;
    --player-h: 76px;
    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ease: cubic-bezier(.2, .7, .2, 1);

    color-scheme: dark;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

/* Hintergrund hinter der Seite – Farbe/Bild kommen aus dem Customizer */
body {
    margin: 0;
    background-color: var(--wall);
    color: var(--text);
    font: 400 var(--fs-text)/1.65 var(--font);
    -webkit-font-smoothing: antialiased;
}

/* Die Seite selbst: feste Breite, hebt sich mit Schatten von der Wand ab */
.site {
    width: min(100%, var(--site-w));
    min-height: 100vh;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    background: var(--site-bg);
    color: var(--text);
    /* Stärke und Größe im Customizer einstellbar */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .05),
        0 calc(var(--shadow-blur, 60px) * .4) var(--shadow-blur, 60px) rgba(0, 0, 0, var(--shadow-a, .7)),
        0 0 calc(var(--shadow-blur, 60px) * 2.2) rgba(0, 0, 0, calc(var(--shadow-a, .7) * .8));
}

img, video { max-width: 100%; height: auto; display: block; }

a {
    color: inherit;
    text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
    text-underline-offset: 3px;
    transition: color .2s;
}
a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.02em; }

.wrap { width: calc(100% - 2 * var(--gutter)); max-width: var(--wrap); margin-inline: auto; }

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip {
    position: absolute; left: 16px; top: -100px; z-index: 100;
    padding: 8px 14px; border-radius: 8px;
    background: var(--accent); color: var(--on-accent);
}
.skip:focus { top: 16px; }

.muted, .meta { color: var(--muted); }
.meta { font-size: .88rem; }
.meta a { color: inherit; }

.eyebrow {
    margin: 0 0 16px;
    color: var(--accent);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.eyebrow a { text-decoration: none; }

/* ---------------------------------------------------------------
 * Kopfbereich
 * ------------------------------------------------------------ */

/* Hauptnavigation: eigene Farbe */
.site-header {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--nav-bg) 94%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--text);
    border-bottom: 1px solid var(--line);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* Social-Media-Leiste über der Navigation */
.topbar { background: var(--topbar-bg); color: var(--text); border-bottom: 1px solid var(--line); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }

/* Umschalter Hell/Dunkel oben links */
/* wächst mit der Icongröße aus dem Customizer mit */
.theme-toggle {
    display: inline-flex; align-items: center; gap: calc(var(--social-size, 17px) * .35);
    height: calc(var(--social-size, 17px) + 11px);
    padding: 0 calc(var(--social-size, 17px) * .6) 0 calc(var(--social-size, 17px) * .35);
    border-radius: 999px;
    color: var(--text);
    font-size: calc(var(--social-size, 17px) * .3 + 7px);
    font-weight: 600;
    transition: color .2s, background .2s;
}
.theme-toggle svg { width: var(--social-size, 17px); height: var(--social-size, 17px); fill: currentColor; }
.theme-toggle:hover,
.theme-toggle:focus-visible { color: var(--accent); background: var(--surface-2); }
.theme-toggle .i-moon,
.theme-toggle__to-dark,
html[data-theme="light"] .theme-toggle .i-sun,
html[data-theme="light"] .theme-toggle__to-light { display: none; }
html[data-theme="light"] .theme-toggle .i-moon { display: block; }
html[data-theme="light"] .theme-toggle__to-dark { display: inline; }
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.social a {
    width: calc(var(--social-size, 17px) + 15px);
    height: calc(var(--social-size, 17px) + 15px);
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--text);
    transition: color .2s;
}
.social svg { width: var(--social-size, 17px); height: var(--social-size, 17px); }
.social a:hover,
.social a:focus-visible,
.social a:active { color: var(--accent); }

.site-header__inner {
    height: var(--header-h);
    display: flex; align-items: center; gap: 12px;
}
.site-nav { margin-left: auto; }

/* Login-Symbol rechts im Menü */
.user-link {
    position: relative;
    flex: none;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--muted);
    transition: color .2s, background .2s, border-color .2s;
}
.user-link svg { width: 20px; height: 20px; fill: currentColor; }
.user-link:hover,
.user-link.is-current { color: var(--text); border-color: var(--muted); }
.user-link.is-in { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.user-link.is-in:hover { color: var(--on-accent); filter: brightness(1.1); }
/* Mit Profilbild: Foto im roten Ring */
.user-link.has-photo {
    padding: 2px;
    background: var(--nav-bg);
    border: 2px solid #e3262f;
}
.user-link__photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.user-link.has-photo:hover { filter: none; box-shadow: 0 0 0 3px color-mix(in srgb, #e3262f 35%, transparent); }
/* Sprechblase mit der Zahl ungelesener Nachrichten, oben rechts über dem Profilbild */
.user-link__msg {
    position: absolute; right: -9px; top: -10px; z-index: 1;
    min-width: 20px; height: 20px; padding: 0 5px;
    display: grid; place-items: center;
    border-radius: 10px 10px 10px 3px; /* Spitze unten links zeigt aufs Profilbild */
    background: #e3262f;
    color: #fff;
    font-size: 11px; font-weight: 800; line-height: 1;
    box-shadow: 0 0 0 2px var(--nav-bg);
    cursor: pointer;
    animation: msg-pop .5s var(--ease) both;
}
@keyframes msg-pop { from { transform: scale(0) translateY(6px); } 60% { transform: scale(1.15); } }

.brand {
    display: flex; align-items: center; gap: 12px;
    font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em;
    text-decoration: none;
}
.brand:hover { color: var(--text); }
/* Name und Untertitel rechts neben dem Logo, untereinander */
.brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand__name { white-space: nowrap; }
.brand__initial { color: var(--accent); font-weight: 700; }
.brand__tagline { color: var(--muted); font-size: .78rem; font-weight: 500; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__logo { width: var(--logo-size, 36px); height: var(--logo-size, 36px); object-fit: contain; } /* Größe aus dem Customizer */
/* Dynamisches Logo: zwei Masken übereinander – farbiger Teil in Akzentfarbe, weißer Teil in Schriftfarbe */
.logo-dyn { position: relative; display: inline-block; flex: none; }
.logo-dyn > span {
    position: absolute; inset: 0;
    -webkit-mask: var(--logo-mask) center / contain no-repeat;
    mask: var(--logo-mask) center / contain no-repeat;
    transition: background-color .3s;
}
.logo-dyn__color { background: var(--accent); }
.logo-dyn__mono { background: var(--text); }
/* Passendes Logo zum gewählten Design */
.brand__logo--light,
html[data-theme="light"] .brand__logo--dark { display: none; }
html[data-theme="light"] .brand__logo--light { display: block; }

.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
/* Hauptnavigation: fett, ohne Hintergrund; Hover und aktive Seite in der Akzentfarbe */
.menu a {
    display: block;
    padding: 8px 12px;
    color: var(--text);
    font-size: var(--fs-nav);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap; /* Balken und Text bleiben zusammen */
    transition: color .2s;
}
.menu a:hover,
.menu a:focus-visible,
.menu .current-menu-item > a,
.menu .current_page_item > a,
.menu .current_page_parent > a,
.menu .current-menu-parent > a { color: var(--accent); }
/* Zwei kleine Balken vor jedem Hauptlink (wie ein Equalizer): ruhig in Schriftfarbe,
   bei Hover und auf der aktiven Seite fahren sie in der Themefarbe hoch und tanzen */
.menu a::before {
    content: "";
    display: inline-block;
    width: 8px; height: .75em;
    margin-right: .4em;
    vertical-align: -.02em;
    color: var(--text);
    background:
        linear-gradient(currentColor 0 0) 0 100% / 3px 35% no-repeat,
        linear-gradient(currentColor 0 0) 100% 100% / 3px 35% no-repeat;
    transition: color .2s, background-size .3s var(--ease);
}
.menu a:hover::before,
.menu a:focus-visible::before,
.menu .current-menu-item > a::before,
.menu .current_page_item > a::before,
.menu .current_page_parent > a::before,
.menu .current-menu-parent > a::before {
    color: var(--accent);
    animation: nav-eq 1.32s ease-in-out infinite;
}
.menu a:hover::before { animation-duration: .96s; }
@keyframes nav-eq {
    0%, 100% { background-size: 3px 35%, 3px 90%; }
    25%      { background-size: 3px 100%, 3px 45%; }
    50%      { background-size: 3px 60%, 3px 100%; }
    75%      { background-size: 3px 85%, 3px 55%; }
}
/* Schmalere Bildschirme mit Menüleiste: enger zusammenrücken, damit alles in eine Zeile passt */
@media (min-width: 720px) and (max-width: 1023px) {
    .menu { gap: 0; }
    .menu a { padding-inline: 6px; font-size: calc(var(--fs-nav) * .88); }
    .menu a::before { margin-right: .3em; }
}
@media (min-width: 720px) and (max-width: 899px) {
    .brand__text { display: none; } /* nur das Logo, damit auch „Favoriten“ (angemeldet) noch passt */
}

.nav-toggle { display: none; position: relative; width: 40px; height: 40px; }
.nav-toggle > span:first-child,
.nav-toggle > span:first-child::before,
.nav-toggle > span:first-child::after {
    position: absolute; left: 10px; right: 10px; height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform .25s var(--ease), background .2s;
}
.nav-toggle > span:first-child { top: 19px; }
.nav-toggle > span:first-child::before,
.nav-toggle > span:first-child::after { content: ""; left: 0; right: 0; }
.nav-toggle > span:first-child::before { top: -6px; }
.nav-toggle > span:first-child::after { top: 6px; }
.nav-toggle[aria-expanded="true"] > span:first-child { background: transparent; }
.nav-toggle[aria-expanded="true"] > span:first-child::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] > span:first-child::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 719px) {
    .topbar__inner { padding-block: 4px; }
    .user-link { margin-left: auto; }
    .nav-toggle { display: block; }
    .site-nav {
        display: none;
        position: absolute; left: 0; right: 0; top: var(--header-h);
        padding: 8px var(--gutter) 20px;
        background: var(--nav-bg);
        border-bottom: 1px solid var(--line);
    }
    .site-nav.is-open { display: block; }
    .menu { flex-direction: column; }
    .menu a { padding: 12px 0; font-size: calc(var(--fs-nav) * 1.15); }
}

/* ---------------------------------------------------------------
 * Inhalt / Seitenwechsel
 * ------------------------------------------------------------ */

/* Inhalt füllt kurze Seiten auf, damit der Footer unten steht; bei langen Seiten folgt er mit Randabstand */
/* container-type: Bereiche wie der Musikfilter können so über die volle Seitenbreite gehen (cqw) */
.site-main { flex: 1; outline: none; transition: opacity .25s; container-type: inline-size; }
.is-loading .site-main { opacity: .35; }
.is-loading body { cursor: progress; }
.site-main.is-entering { animation: enter .45s var(--ease); }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }

/* Abstände aus dem Customizer (Layout): Navigation → Inhalt, Inhalt → Footer, zwischen den Objekten */
.section { padding-top: var(--space-top); padding-bottom: var(--space-bottom); }
.section + .section { padding-top: calc(var(--gap) * 2); }

/* Karte „eMWe Netzwerk“ (ganz unten auf der Startseite): Länder dezent, Punkte in der Themefarbe, verbunden durch Fäden */
.fanmap__map {
    position: relative;
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: min(var(--btn-radius), 24px);
    box-shadow: var(--tile-shadow);
}
.fanmap__svg {
    display: block; width: 100%; height: auto;
    aspect-ratio: 2.2 / 1;
    cursor: grab;
    touch-action: none; /* Ziehen verschiebt die Karte */
    user-select: none;
}
.fanmap__svg.is-drag { cursor: grabbing; }
.fanmap__svg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Länder: Füllung und feine Grenzen (die Linienbreite bleibt beim Zoomen gleich) */
.fanmap__land { fill: color-mix(in srgb, var(--text) 12%, transparent); stroke: color-mix(in srgb, var(--text) 26%, transparent); stroke-width: .6px; }
.fanmap__threads path {
    fill: none;
    stroke: var(--accent); stroke-opacity: .55; stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}
.fanmap__dot circle { fill: var(--accent); }
.fanmap__tools {
    position: absolute; right: 12px; top: 12px; z-index: 1;
    display: flex; flex-direction: column; gap: 6px;
}
.fanmap__tools button {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--card-bg) 85%, transparent);
    color: var(--text);
    font-size: 1.1rem; font-weight: 700; line-height: 1;
    transition: color .2s, border-color .2s;
}
.fanmap__tools button:hover { color: var(--accent); border-color: var(--accent); }
.fanmap__dot circle:not(.fanmap__pulse) { filter: drop-shadow(0 0 1.2px var(--accent)); }
.fanmap__pulse {
    transform-box: fill-box; transform-origin: center;
    animation: fanmap-pulse 3s ease-out infinite;
    animation-delay: var(--d, 0s);
}
@keyframes fanmap-pulse { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
.fanmap__count {
    position: absolute; left: clamp(16px, 3vw, 32px); bottom: clamp(12px, 2vw, 24px);
    margin: 0;
    color: var(--muted); font-size: .85rem;
    pointer-events: none; /* Ziehen darüber verschiebt trotzdem die Karte */
}
.fanmap__count strong { color: var(--accent); font-size: 1.15rem; }
.fanmap__note { margin: 14px 0 0; font-size: .85rem; }
.fanmap__credit { display: block; margin-top: 4px; font-size: .75rem; opacity: .75; }
.fanmap__credit a { color: inherit; }
@media (max-width: 719px) {
    .fanmap__count { position: static; padding: 8px 14px 10px; border-top: 1px solid var(--line); }
    .fanmap__tools { right: 8px; top: 8px; gap: 4px; }
    .fanmap__tools button { width: 30px; height: 30px; }
}

/* Release Countdown (Startseite): kommende Songs der nächsten 4 Wochen */
.releases {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--gap);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.release {
    display: flex; align-items: center; gap: 16px;
    padding: 14px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: min(var(--btn-radius), 24px);
    box-shadow: var(--tile-shadow);
    transition: border-color .25s;
}
.release:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.release__cover {
    flex: none;
    width: 96px; height: 96px;
    display: grid; place-items: center; overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--accent) 35%, var(--surface-2)));
    color: var(--text);
}
.release__cover img { width: 100%; height: 100%; object-fit: cover; }
.release__cover svg { width: 28px; height: 28px; fill: currentColor; }
.release__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.release__artist { color: var(--muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.release__title { font-size: calc(1.15rem * var(--h-scale)); font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.release__date { color: var(--muted); font-size: .8rem; }
.release__count {
    margin-top: 6px;
    color: var(--accent);
    font-size: 1.05rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* Zähler auf der Startseite (zwischen „Beiträge / News“ und „eMWe Netzwerk“) */
.counter {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
    padding-top: var(--space-top);
}
.counter + .section { padding-top: calc(var(--gap) * 2); }
.counter__item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 22px 12px 20px;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: min(var(--btn-radius), 24px);
    box-shadow: var(--tile-shadow);
    text-align: center;
    transition: border-color .25s;
}
.counter__item:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.counter__num {
    color: var(--accent);
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); font-weight: 800; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.counter__label { color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 760px) {
    .counter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .counter__item { padding: 16px 8px 14px; }
    .counter__label { font-size: .7rem; letter-spacing: .04em; }
}
.section > :last-child,
.account__box > :last-child,
.form > :last-child { margin-bottom: 0; }

/* Startseite: jeder zweite Bereich bekommt eine durchgehende, hellere Fläche
   (seitlich bis zum Seitenrand, oben/unten 20 px über den Inhalt hinaus) mit Linien in halber Akzentfarbe */
body.home .site-main > .section:nth-child(even of .section) {
    --block-bg: color-mix(in srgb, var(--bg) 90%, #fff);
    position: relative;
    isolation: isolate;
}
html[data-theme="light"] body.home .site-main > .section:nth-child(even of .section) {
    --block-bg: color-mix(in srgb, var(--bg) 95%, #000); /* im hellen Design zwei Stufen dunkler, sonst unsichtbar */
}
body.home .site-main > .section:nth-child(even of .section)::before {
    content: "";
    position: absolute; z-index: -1;
    top: calc(var(--gap) * 2 - 20px);
    bottom: calc(var(--space-bottom) - 20px);
    left: calc(50% - 50cqw); right: calc(50% - 50cqw);
    background: var(--block-bg);
    border-block: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    pointer-events: none;
}

.section__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    margin-bottom: var(--gap);
}
.section__head h2, .section__head .h2-like { margin: 0; font-size: calc(clamp(1.6rem, 3vw, 2.2rem) * var(--h-scale)); }
.section__head a { color: var(--muted); font-size: .95rem; text-decoration: none; white-space: nowrap; }
.section__head a:hover { color: var(--accent); }

.page-head { margin-bottom: var(--gap); }
.page-head--hidden { margin: 0; } /* nur unsichtbare Überschrift: kein Abstand */
.page-title,
.entry__title {
    margin: 0;
    font-size: calc(clamp(2.2rem, 6vw, 4rem) * var(--h-scale));
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.035em;
}

/* Überschriften heben sich ab: unterstrichen, erster Buchstabe in der Akzentfarbe */
.page-title,
.entry__title,
.hero__title,
.section__head h2,
.section__head .h2-like,
.prose h2,
.prose h3 {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: max(2px, .06em);
    text-underline-offset: .16em;
}
.page-title::first-letter,
.entry__title::first-letter,
.hero__title::first-letter,
.section__head h2::first-letter,
.section__head .h2-like::first-letter,
.prose h2::first-letter,
.prose h3::first-letter { color: var(--accent); }

/* ---------------------------------------------------------------
 * Startseite
 * ------------------------------------------------------------ */

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero::before {
    content: "";
    position: absolute; right: -300px; top: -420px;
    width: 900px; height: 900px;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%);
    opacity: .55;
    pointer-events: none;
}
.hero__inner { position: relative; padding: clamp(80px, 14vw, 180px) 0 clamp(64px, 10vw, 120px); }
.hero__title {
    max-width: 12ch;
    margin: 0;
    font-size: calc(clamp(3rem, 11vw, 8.5rem) * var(--h-scale));
    font-weight: 800;
    line-height: .92;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
}
.hero__lead { max-width: 42ch; margin: 24px 0 0; color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.35rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* ---------------------------------------------------------------
 * Slideshow
 * ------------------------------------------------------------ */

.slideshow {
    --slide-time: 6s;
    position: relative;
    height: clamp(340px, 46vw, 560px);
    overflow: hidden;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    touch-action: pan-y;
}

.slide {
    position: absolute; inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.1s var(--ease), visibility 0s 1.1s;
}
.slide.is-active { z-index: 1; opacity: 1; visibility: visible; transition: opacity 1.1s var(--ease); }
/* Schrift passt sich dem Bild an: dunkles Bild → helle Schrift, helles Bild → dunkle Schrift.
   Der Verlauf hinter dem Text hat jeweils die Gegenfarbe der Schrift. */
.slide--dark { --slide-ink: #f4f3f0; --slide-ink-soft: #cfcdc8; --slide-shade: 10, 10, 11; }
.slide--light { --slide-ink: #141416; --slide-ink-soft: #3c3b40; --slide-shade: 251, 250, 248; }
.slide { color: var(--slide-ink); }
.slide::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(to top, rgba(var(--slide-shade), .88) 0%, rgba(var(--slide-shade), .3) 45%, transparent 75%),
        linear-gradient(to right, rgba(var(--slide-shade), .45), transparent 60%);
}

.slide__img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    transition: transform 8s linear;
}
.slide.is-active .slide__img { transform: scale(1); }

.slide__caption {
    position: absolute; left: 0; bottom: 0; z-index: 2;
    max-width: 760px;
    padding: 0 var(--gutter) 56px;
}
.slide__title {
    margin: 0;
    font-size: calc(clamp(2rem, 5vw, 3.6rem) * var(--h-scale));
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
}
.slide__text { max-width: 46ch; margin: 14px 0 0; color: var(--slide-ink-soft); font-size: 1.1rem; }
.slide__caption .btn { margin-top: 24px; }
.slide.is-active .slide__caption > * { animation: rise .9s var(--ease) both; }
.slide.is-active .slide__caption > :nth-child(2) { animation-delay: .12s; }
.slide.is-active .slide__caption > :nth-child(3) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* Automatische Release-Folie: Künstlerbild im Hintergrund, Song-Cover schräg davor */
.slide--release .slide__img--artist { filter: blur(3px) brightness(.55) saturate(1.2); }
.slide__img--empty { display: block; background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--accent) 40%, #000)); }
.slide__cover {
    position: absolute; z-index: 2;
    right: max(var(--gutter), 7%); top: 50%;
    width: clamp(170px, 28vw, 340px); aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
    transform: translateY(-50%) rotate(-4deg);
}
.slide.is-active .slide__cover { animation: cover-in 1s var(--ease) both; }
@keyframes cover-in { from { opacity: 0; transform: translateY(-46%) rotate(2deg) scale(.92); } }
.slide__eyebrow {
    margin: 0 0 10px;
    color: var(--accent);
    font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.slide__caption .btn svg { width: 18px; height: 18px; fill: currentColor; }
.slide--release .slide__caption { max-width: min(760px, 58%); }
@media (max-width: 719px) {
    .slide__cover { top: 24px; right: var(--gutter); width: 130px; transform: rotate(-4deg); }
    @keyframes cover-in { from { opacity: 0; transform: rotate(2deg) scale(.92); } }
    .slide--release .slide__caption { max-width: none; }
}

.slideshow__nav {
    position: absolute; top: 50%; z-index: 3;
    width: 48px; height: 48px; margin-top: -24px;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background: rgba(10, 10, 11, .45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text);
    opacity: 0;
    transition: opacity .25s, background .2s, border-color .2s, color .2s;
}
.slideshow__nav svg { width: 24px; height: 24px; fill: currentColor; }
.slideshow__nav--prev { left: var(--gutter); }
.slideshow__nav--next { right: var(--gutter); }
.slideshow:hover .slideshow__nav,
.slideshow__nav:focus-visible { opacity: 1; }
.slideshow__nav:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.slideshow__dots {
    position: absolute; right: var(--gutter); bottom: 60px; z-index: 3;
    display: flex; gap: 8px;
}
.slideshow__dots button {
    position: relative;
    width: 32px; height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, .25);
}
.slideshow__dots button::before { content: ""; position: absolute; inset: -10px 0; } /* größere Klickfläche */
/* Fortschrittsbalken – sein Ende schaltet zur nächsten Folie */
.slideshow__dots button.is-active::after {
    content: "";
    position: absolute; inset: 0;
    background: var(--accent);
    transform-origin: left;
    animation: slide-progress var(--slide-time) linear forwards;
}
.slideshow:hover .slideshow__dots button.is-active::after,
.slideshow:focus-within .slideshow__dots button.is-active::after { animation-play-state: paused; }
@keyframes slide-progress { from { transform: scaleX(0); } }

.slideshow + .hero .hero__inner { padding-block: clamp(56px, 8vw, 96px); }
.slideshow + .hero .hero__title { font-size: calc(clamp(2.6rem, 8vw, 6rem) * var(--h-scale)); }

@media (max-width: 719px) {
    .slideshow { height: 440px; }
    .slide__caption { padding-bottom: 64px; }
    .slideshow__nav { display: none; }
    .slideshow__dots { left: var(--gutter); right: auto; bottom: 28px; }
}

/* ---------------------------------------------------------------
 * Buttons und Formulare
 * ------------------------------------------------------------ */

/* Form der Buttons – im Customizer unter „Buttons“ einstellbar */
.btn,
input[type="submit"],
.wp-block-search__button {
    display: inline-flex; align-items: center; gap: 10px;
    height: var(--btn-h); padding: 0 22px;
    border: var(--btn-border) solid var(--line);
    border-radius: var(--btn-radius);
    background: transparent;
    color: var(--text);
    font: 600 .95rem var(--font);
    letter-spacing: var(--btn-spacing);
    text-transform: var(--btn-case);
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s var(--ease), background .2s, border-color .2s, color .2s, filter .2s;
}
.btn:hover { border-color: var(--muted); color: var(--text); }
.btn svg { width: 18px; height: 18px; fill: currentColor; }

.btn--primary,
input[type="submit"],
.wp-block-search__button { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover,
input[type="submit"]:hover { color: var(--on-accent); border-color: var(--accent); filter: brightness(1.08); transform: translateY(-1px); }

.btn .i-pause,
.btn.is-playing .i-play { display: none; }
.btn.is-playing .i-pause { display: block; }

input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"], textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    font: inherit;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.btn--block { width: 100%; justify-content: center; }

.notice {
    margin: 0 0 20px;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.notice--error {
    background: color-mix(in srgb, #ff4d4d 12%, var(--surface));
    border-color: color-mix(in srgb, #ff4d4d 55%, var(--line));
}

/* Suche (nicht ".search" – so heißt die Body-Klasse der Ergebnisseite) */
.searchform { position: relative; width: min(100%, 280px); }
/* folgt dem Button-Radius aus dem Customizer */
.searchform input { height: 40px; padding-block: 0; padding-right: 44px; border-radius: var(--btn-radius); font-size: .92rem; }
.searchform button {
    position: absolute; right: 4px; top: 4px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: min(var(--btn-radius), 50%);
    color: var(--muted);
    transition: color .2s, background .2s;
}
.searchform button:hover { background: var(--accent); color: var(--on-accent); }
.searchform svg { width: 18px; height: 18px; fill: currentColor; }

/* Login-Bereich */
.account__box { max-width: 440px; margin-inline: auto; }
.account .page-title { margin-bottom: 28px; font-size: calc(clamp(2rem, 5vw, 3rem) * var(--h-scale)); }
.form p { margin: 0 0 16px; }
.form label { display: block; margin-bottom: 6px; color: var(--muted); font-size: .88rem; }
.form .check { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--text); }
.form__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: .9rem; }
.form__row a { color: var(--muted); }
.account__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.account__links .btn { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------
 * Mein Bereich: Profilseite (Konto, Künstlerprofil, Songs, Zugänge)
 * Folgt den Regeln der ganzen Website: volle Inhaltsbreite, Abstände aus
 * dem Customizer (--gap), Karten/Buttons/Felder wie überall sonst.
 * ------------------------------------------------------------ */
.pf-row__img {
    flex: none;
    width: 52px; height: 52px;
    display: grid; place-items: center; overflow: hidden;
    border-radius: 8px; /* wie die Cover in der Trackliste */
    background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--accent) 35%, var(--surface-2)));
    color: var(--text);
    font-size: .85rem; font-weight: 800;
}
.pf-row__img img { width: 100%; height: 100%; object-fit: cover; }
.pf-row__img svg { width: 20px; height: 20px; fill: currentColor; }

/* „Mein Bereich“ als 2. Zeile der Hauptnavigation: Links in Schriftfarbe (weiß), aktiver Bereich und Hover in Akzentfarbe */
.subnav { border-top: 1px solid var(--line); }
.subnav__inner {
    display: flex; align-items: center; gap: 2px;
    min-height: 42px;
    overflow-x: auto; scrollbar-width: none;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav__end { display: flex; gap: 2px; margin-left: auto; }
.subnav__link {
    flex: none;
    padding: 8px 12px;
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s;
}
.subnav__link:first-child { margin-left: -12px; }
.subnav__link:hover,
.subnav__link:focus-visible,
.subnav__link.is-active { color: var(--accent); }
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 58px); }

.notice--ok { background: color-mix(in srgb, #3ccf6e 12%, var(--surface)); border-color: color-mix(in srgb, #3ccf6e 50%, var(--line)); }

/* Abschnitte wie die übrigen Karten der Website */
.pf-card {
    margin-bottom: var(--gap);
    padding: var(--gap);
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: min(var(--btn-radius), 24px);
}
.pf-card__title { margin: 0 0 var(--gap); font-size: calc(1.25rem * var(--h-scale)); }
.pf-card > :last-child { margin-bottom: 0; }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); }
.pf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-hint { color: var(--muted); font-size: .85rem; }
p.pf-hint { margin: -6px 0 16px; }
.pf-list + p.pf-hint { margin-top: var(--gap); } /* Hinweis unter einer Liste (z. B. Mitglieder) nicht direkt an der Linie */
.pf-check + p.pf-hint { margin-top: 8px; }
.pf-rights { margin: 6px 0 18px; } /* Pflicht-Bestätigung der Rechte im Songformular */ /* Hinweis unter einem einzelnen Haken (z. B. „Release Countdown“) */
.pf-intro { margin: 0 0 var(--gap); color: var(--muted); }
.pf-back { margin: 0 0 var(--gap); }
.pf-back a { color: var(--muted); text-decoration: none; font-weight: 600; }
.pf-back a:hover { color: var(--accent); }
.pf-actions { display: flex; justify-content: flex-end; }
.pf-form + .pf-form { margin-top: calc(var(--gap) * 2); } /* zweites Formular darunter (z. B. Konto → Weltkarte) nicht direkt am Speichern-Button */
.pf-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: .88rem; }
.pf input[readonly] { color: var(--muted); cursor: default; }
.pf input[readonly]:focus { border-color: var(--line); }
.pf-hint a { color: var(--accent); }
/* Registrierung: verstecktes Feld gegen Bots, Wechsel Anmelden/Registrieren */
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Kontaktformular (Seite „Kontakt“) */
.contact { margin-top: calc(var(--gap) * 1.5); padding: var(--gap); background: var(--card-bg); border: 1px solid var(--line); border-top: 1px solid var(--accent); border-radius: min(var(--btn-radius), 24px); }
.contact__title { margin: 0 0 var(--gap); font-size: calc(1.35rem * var(--h-scale)); }
.contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap); }
.contact__form textarea { resize: vertical; }
.contact__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 0; }
.contact__state { font-size: .9rem; }
.contact > .notice:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .contact__grid { grid-template-columns: 1fr; } }
.account__switch { margin-top: 18px; color: var(--muted); text-align: center; }
.account__switch a { color: var(--accent); font-weight: 700; }

/* Mitglieder */
.pf-members .pf-row__actions { align-items: center; }
.pf-inline select { width: auto; min-width: 150px; padding-block: 8px; }
.pf-member.is-blocked .pf-row__main { opacity: .55; }
.pf-badge:not(.is-online) { color: var(--muted); }
.pf-member.is-blocked .pf-badge { color: #ff6b6b; border-color: color-mix(in srgb, #ff6b6b 55%, var(--line)); }
.pf .btn.pf-danger:hover { background: #d33; border-color: #d33; color: #fff; }

/* Bewerbungen „Künstler werden“ */
.pf-applications { border-color: var(--accent); }
.pf-application + .pf-application { margin-top: var(--gap); padding-top: var(--gap); border-top: 1px solid var(--line); }
.pf-application .pf-row { border: 0; padding-top: 0; }
.pf-application__about { margin: 0 0 10px; color: var(--muted); overflow-wrap: anywhere; }
.pf-application a { color: var(--accent); }
.pf-application__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-application__reject { display: flex; gap: 8px; flex: 1; min-width: 240px; }
.pf-application__reject input { flex: 1; min-width: 0; padding-block: 8px; }

/* Nachrichten */
.pf-subtabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--gap); }
.pf-subtab { padding: 8px 14px; color: var(--muted); font-weight: 700; text-decoration: none; border: var(--btn-border) solid transparent; border-radius: var(--btn-radius); }
.pf-subtab:hover { color: var(--text); }
.pf-subtab.is-active { color: var(--text); border-color: var(--line); }
.pf-subtabs__new { margin-left: auto; }
.pf-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: .72rem; }
.pf-mail__link { color: inherit; text-decoration: none; }
.pf-mail__link:hover strong { color: var(--accent); }
.pf-mail:not(.is-unread) .pf-mail__link strong { font-weight: 600; }
.pf-mail.is-unread .pf-mail__link strong { color: var(--text); }
.pf-message__body { margin: 0 0 var(--gap); line-height: 1.65; overflow-wrap: anywhere; }
.pf-message__actions { gap: 8px; }

.pf-copy { display: flex; gap: 8px; }
.pf-copy input { flex: 1; min-width: 0; font-size: .85rem; }
.pf-invite { border-color: var(--accent); }

/* Felder, die die allgemeine Regel nicht abdeckt, im selben Stil wie Textfelder */
.pf input[type="date"], .pf select {
    width: 100%;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    font: inherit;
}
.pf select option { background: var(--card-bg); color: var(--text); }
.pf input[type="date"] { color-scheme: dark; }
html[data-theme="light"] .pf input[type="date"] { color-scheme: light; }
.pf select:focus { outline: none; border-color: var(--accent); }
.pf input[type="file"] { width: 100%; color: var(--muted); font-size: .88rem; }
.pf input[type="file"]::file-selector-button {
    margin-right: 12px; padding: 8px 16px;
    background: transparent; color: var(--text);
    border: var(--btn-border) solid var(--line);
    border-radius: var(--btn-radius);
    font: inherit; font-weight: 600; cursor: pointer;
}
.pf input[type="file"]::file-selector-button:hover { border-color: var(--muted); }

/* Bild mit Vorschau */
.pf-image { display: flex; align-items: center; gap: var(--gap); margin-bottom: var(--gap); }
.pf-image__preview {
    flex: none;
    width: 96px; height: 96px;
    display: grid; place-items: center; overflow: hidden;
    border-radius: min(var(--btn-radius), 24px);
    background: var(--surface-2); color: var(--muted);
    border: 1px solid var(--line);
}
.pf-image--round .pf-image__preview { border-radius: 50%; }
.pf-image__preview img { width: 100%; height: 100%; object-fit: cover; }
.pf-image__preview svg { width: 34px; height: 34px; fill: currentColor; }
.pf-image__controls { display: grid; gap: 8px; min-width: 0; flex: 1; }
.pf-image__controls .pf-label { margin: 0; }

/* Auswahlkästchen als Kacheln, Form wie die Buttons */
.pf-checks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }
.pf-checks legend { padding: 0; }
.pf-check {
    display: inline-flex !important; align-items: center; gap: 8px;
    margin: 0 !important; padding: 8px 14px;
    color: var(--text) !important; font-size: .9rem !important;
    border: var(--btn-border) solid var(--line);
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.pf-check:hover { border-color: var(--muted); }
.pf-check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pf-checks--genres .pf-check { min-width: 150px; }

.pf-current audio { width: 100%; margin-top: 6px; }

/* Listen: Künstler, Songs, Zugänge – wie die Trackliste */
.pf-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); margin-bottom: var(--gap); }
.pf-toolbar .pf-intro { margin: 0; }
.pf-filter select { min-width: 240px; }
.pf-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pf-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pf-row__main { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.pf-row__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-row__meta { color: var(--muted); font-size: .88rem; }
.pf-row__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.pf-row__actions form { margin: 0; }
.pf-badge {
    flex: none;
    padding: 3px 10px;
    font-size: .75rem; font-weight: 700;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: var(--btn-radius);
}
.pf-badge.is-online { color: #3ccf6e; border-color: color-mix(in srgb, #3ccf6e 55%, var(--line)); }
.pf-badge.is-planned { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); } /* geht am Veröffentlichungstag online */

@media (max-width: 719px) {
    .pf-grid, .pf-grid--3 { grid-template-columns: 1fr; }
    .pf-row { flex-wrap: wrap; }
    .pf-row__actions { width: 100%; justify-content: flex-start; }
    .pf-actions .btn { width: 100%; justify-content: center; }
    .pf-filter, .pf-filter select { width: 100%; min-width: 0; }
}

/* ---------------------------------------------------------------
 * Trackliste
 * ------------------------------------------------------------ */

.tracklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tracklist li { position: relative; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); }
/* Hover: eckige Fläche über die ganze Zeile inkl. Buttons, innerhalb der Inhaltsbreite */
/* Hover-Balken als leichte Aufhellung (dunkel) bzw. Abdunklung (hell) – sieht auf jedem Hintergrund gleich aus,
   egal ob Seite, Songs-Seite oder farbig hinterlegter Bereich der Startseite */
:root { --row-hover: rgba(255, 255, 255, .07); }
html[data-theme="light"] { --row-hover: rgba(0, 0, 0, .05); }
.tracklist li::before {
    content: ""; position: absolute; z-index: -1;
    inset: 0;
    background: var(--row-hover);
    /* Enden links und rechts auf 100 px weich in den Hintergrund auslaufen lassen */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 100px, #000 calc(100% - 100px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 100px, #000 calc(100% - 100px), transparent);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.tracklist li:hover::before,
.tracklist li:focus-within::before { opacity: 1; }
.tracklist { isolation: isolate; }

.tracklist li[hidden] { display: none; }

/* Video-Button mit Text neben dem Play-Button; folgt den Button-Einstellungen */
.track__video {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; margin-left: 4px; padding: 0 16px;
    border: var(--btn-border) solid var(--line);
    border-radius: var(--btn-radius);
    color: var(--text);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: var(--btn-spacing);
    text-transform: var(--btn-case);
    transition: color .2s, background .2s, border-color .2s;
}
.track__video:hover,
.track__video:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.track__video--empty { visibility: hidden; }

/* Musikseite: Filter über der Trackliste (Rolle, Genre, Suche, Künstlerleiste) */
/* Hintergrund über die volle Seitenbreite, Inhalt bleibt in der Spalte; eckig */
.musicfilter {
    width: 100cqw;
    margin: 0 0 24px calc(50% - 50cqw);
    padding: 16px calc(50cqw - 50%);
    /* gleiche Farbe wie die Navigation oben */
    background: color-mix(in srgb, var(--nav-bg) 94%, transparent);
    border-block: 1px solid var(--line);
}
/* Alles im Filter eckig */
.musicfilter .musicfilter__segs,
.musicfilter .musicfilter__seg,
.musicfilter .musicfilter__select select,
.musicfilter .musicfilter__search input,
.musicfilter .trackfilter__item,
.musicfilter .trackfilter__avatar,
.musicfilter .trackfilter__count { border-radius: 0; }
.musicfilter__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
/* Rollen als Umschalter */
.musicfilter__segs {
    display: inline-flex; gap: 2px;
    padding: 3px;
    background: var(--surface-2);
    border-radius: 999px;
}
.musicfilter__seg {
    padding: 7px 14px;
    border-radius: 999px;
    color: var(--muted);
    font-size: .86rem; font-weight: 600;
    transition: background .2s, color .2s;
}
.musicfilter__seg:hover { color: var(--text); }
.musicfilter__seg.is-active { background: var(--accent); color: var(--on-accent); }
/* Genre-Auswahl und Suche im selben Stil */
.musicfilter__select select,
.musicfilter__search input {
    height: 38px;
    padding: 0 14px;
    color: var(--text);
    font: inherit; font-size: .88rem;
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: 999px;
    transition: border-color .2s;
}
.musicfilter__select select { padding-right: 34px; appearance: none; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 16px center, right 11px center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}
.musicfilter__select select:focus,
.musicfilter__search input:focus { outline: none; border-color: var(--accent); }
.musicfilter__select option { background: var(--card-bg); color: var(--text); }
.musicfilter__search { position: relative; flex: 1 1 200px; display: flex; margin-left: auto; max-width: 320px; }
.musicfilter__search svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: var(--muted); pointer-events: none; }
.musicfilter__search input { width: 100%; padding-left: 38px; }
/* Künstlerleiste: genau eine Zeile, aufklappbar */
.musicfilter__artists {
    display: flex; flex-wrap: wrap; gap: 8px;
    max-height: var(--row-h, 46px);
    overflow: hidden;
    transition: max-height .4s var(--ease);
}
.musicfilter__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; min-height: 24px; }
.musicfilter__result { color: var(--muted); font-size: .82rem; }
.musicfilter__more { color: var(--accent); font-size: .85rem; font-weight: 700; }
.musicfilter__more:hover { text-decoration: underline; }
/* Dunkles Design: Bedienelemente oben zwei Stufen heller als der Filterhintergrund (= Navigationsfarbe) */
html:not([data-theme="light"]) .musicfilter {
    --filter-btn: color-mix(in srgb, var(--nav-bg) 90%, #fff);
    --filter-text: #ecebe8;
}
/* Schrift passt sich der Feldfarbe an: je heller das Feld, desto dunkler die Schrift */
@supports (color: oklch(from red l c h)) {
    html:not([data-theme="light"]) .musicfilter {
        --filter-text: oklch(from var(--filter-btn) clamp(.16, calc((.64 - l) * 12 + .5), .94) 0 0);
    }
}
html:not([data-theme="light"]) .musicfilter .musicfilter__segs,
html:not([data-theme="light"]) .musicfilter .musicfilter__select select,
html:not([data-theme="light"]) .musicfilter .musicfilter__search input { background-color: var(--filter-btn); color: var(--filter-text); }
html:not([data-theme="light"]) .musicfilter .musicfilter__seg:not(.is-active) { color: color-mix(in srgb, var(--filter-text) 65%, var(--filter-btn)); }
html:not([data-theme="light"]) .musicfilter .musicfilter__seg:not(.is-active):hover { color: var(--filter-text); }
html:not([data-theme="light"]) .musicfilter .musicfilter__search input::placeholder { color: color-mix(in srgb, var(--filter-text) 60%, var(--filter-btn)); }
html:not([data-theme="light"]) .musicfilter .musicfilter__search svg { fill: color-mix(in srgb, var(--filter-text) 65%, var(--filter-btn)); }
html:not([data-theme="light"]) .musicfilter .musicfilter__select option { background: var(--filter-btn); color: var(--filter-text); }
/* Rollen, Genre und Suche: gleich hoch und auf einer Linie */
.musicfilter { --filter-h: 40px; }
.musicfilter .musicfilter__bar { flex-wrap: nowrap; align-items: stretch; }
.musicfilter .musicfilter__segs { box-sizing: border-box; height: var(--filter-h); flex: none; }
.musicfilter .musicfilter__seg { display: flex; align-items: center; padding-block: 0; }
.musicfilter .musicfilter__select { display: flex; flex: none; }
.musicfilter .musicfilter__select select,
.musicfilter .musicfilter__search input { box-sizing: border-box; height: var(--filter-h); margin: 0; }
/* Tablet: Suche bekommt eine eigene Zeile, wenn Rollen, Genre und Sortierung den Platz brauchen */
@media (min-width: 720px) and (max-width: 1023px) {
    .musicfilter .musicfilter__bar { flex-wrap: wrap; }
    .musicfilter .musicfilter__search { flex-basis: 100%; max-width: none; margin-left: 0; }
}
@media (max-width: 719px) {
    /* Handy: jede Zeile volle Breite, damit alles bündig untereinander steht */
    .musicfilter .musicfilter__bar { flex-wrap: wrap; }
    .musicfilter .musicfilter__segs { flex: 1 1 100%; }
    .musicfilter .musicfilter__seg { flex: 1; justify-content: center; }
    .musicfilter .musicfilter__select { flex: 1 1 100%; }
    .musicfilter .musicfilter__select select { width: 100%; }
}
/* Hover im Filter: kantig statt schwebend – Akzentlinie wächst ein, Fläche wird leicht getönt */
.musicfilter .musicfilter__seg {
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 0 2px;
    transition: background-size .25s var(--ease), background-color .2s, color .2s;
}
.musicfilter .musicfilter__seg:hover:not(.is-active) {
    color: var(--text);
    background-color: color-mix(in srgb, var(--accent) 10%, transparent);
    background-size: 100% 2px;
}
.musicfilter .musicfilter__select select:hover,
.musicfilter .musicfilter__search input:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.musicfilter .trackfilter__item { transform: none; }
.musicfilter .trackfilter__item:hover {
    transform: none;
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
    background-color: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
    box-shadow: inset 3px 0 0 var(--accent);
}
.musicfilter .trackfilter__item:hover .trackfilter__count { background: var(--accent); color: var(--on-accent); }
.musicfilter .trackfilter__item.is-active { box-shadow: inset 3px 0 0 var(--accent); }
.musicfilter .trackfilter__item { transition: color .2s, border-color .2s, background-color .2s, box-shadow .2s; }
.musicfilter .musicfilter__more { padding: 2px 0; text-decoration: none;
    background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat;
    transition: background-size .25s var(--ease);
}
.musicfilter .musicfilter__more:hover { text-decoration: none; background-size: 100% 2px; }
.musicfilter__empty { margin-top: 16px; text-align: center; }
.musicfilter [hidden],
.musicfilter__empty[hidden] { display: none !important; }
.link-button { color: var(--accent); font-weight: 700; text-decoration: underline; }
@media (max-width: 719px) {
    .musicfilter__search { max-width: none; margin-left: 0; flex-basis: 100%; }
    /* Handy: eingeklappt eine wischbare Zeile, aufgeklappt alle Künstler untereinander */
    .musicfilter__artists:not(.is-open) {
        flex-wrap: nowrap;
        max-height: none;
        overflow-x: auto;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }
    .musicfilter__artists::-webkit-scrollbar { display: none; }
    .musicfilter__artists .trackfilter__item { flex: none; }
}

/* Künstler-Chips: Bild, voller Name und Song-Anzahl */
.trackfilter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.trackfilter__item {
    max-width: 100%;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 4px 6px 4px 4px;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 600;
    text-align: left;
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: color .2s, border-color .2s, background .2s, transform .2s var(--ease);
}
.trackfilter__avatar {
    flex: none;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-2);
    color: var(--text);
    font-size: .72rem;
    font-weight: 700;
}
.trackfilter__avatar svg { width: 16px; height: 16px; fill: currentColor; }
.trackfilter__name { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.trackfilter__count {
    flex: none;
    min-width: 24px; height: 24px;
    padding: 0 7px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    transition: background .2s, color .2s;
}
.trackfilter__item:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-1px); }
.trackfilter__item.is-active {
    color: var(--text);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--card-bg));
}
.trackfilter__item.is-active .trackfilter__count { background: var(--accent); color: var(--on-accent); }

/* Download-Button: gut sichtbar mit Rahmen, Symbol und Text; folgt den Button-Einstellungen */
.tracklist .track__dl {
    flex: none;
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; margin-left: 4px; padding: 0 16px 0 12px;
    border: var(--btn-border) solid var(--line);
    border-radius: var(--btn-radius);
    color: var(--text);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: var(--btn-spacing);
    text-transform: var(--btn-case);
    text-decoration: none;
    transition: color .2s, background .2s, border-color .2s;
}
.tracklist .track__dl:hover,
.tracklist .track__dl:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.track__dl svg { width: 22px; height: 22px; fill: currentColor; }

/* Favoriten-Herz (nur für Angemeldete): leer = Umriss, gesetzt = gefüllt in Rot */
.fav-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: fill .2s, stroke .2s; }
.fav-btn[aria-pressed="true"] svg { fill: #e3262f; stroke: #e3262f; }
.fav-btn.is-pop svg { animation: fav-pop .35s var(--ease); }
@keyframes fav-pop { 40% { transform: scale(1.35); } }
.track__fav {
    flex: none;
    width: 42px; height: 42px; margin-left: 4px;
    display: inline-grid; place-items: center;
    border: var(--btn-border) solid var(--line);
    border-radius: min(var(--btn-radius), 50%);
    color: var(--text);
    transition: color .2s, background .2s, border-color .2s;
}
.track__fav:hover,
.track__fav:focus-visible { border-color: #e3262f; color: #e3262f; }
.track__fav[aria-pressed="true"] { border-color: color-mix(in srgb, #e3262f 60%, var(--line)); }

/* Teilen-Button: quadratisch mit Symbol, gleiche Höhe wie Video und Download */
.track__share {
    flex: none;
    width: 42px; height: 42px; margin-left: 4px;
    display: inline-grid; place-items: center;
    border: var(--btn-border) solid var(--line);
    border-radius: min(var(--btn-radius), 50%);
    color: var(--text);
    transition: color .2s, background .2s, border-color .2s;
}
.track__share svg { width: 18px; height: 18px; fill: currentColor; }
.track__share:hover,
.track__share:focus-visible,
.track__share[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Teilen-Menü (Desktop) */
.sharemenu {
    position: fixed; z-index: 90;
    min-width: 210px;
    padding: 6px;
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--line);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
    animation: sharemenu-in .15s var(--ease);
}
.sharemenu[hidden] { display: none; }
@keyframes sharemenu-in { from { opacity: 0; transform: translateY(-4px); } }
.sharemenu__head { margin: 4px 10px 6px; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sharemenu__item {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px;
    color: var(--text);
    font: inherit; font-size: .9rem; font-weight: 600;
    text-align: left;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.sharemenu__item svg { flex: none; width: 20px; height: 20px; }
.sharemenu__item:hover,
.sharemenu__item:focus-visible { outline: none; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.sharemenu__item--whatsapp svg { color: #25d366; }
.sharemenu__item--facebook svg { color: #1877f2; }
.sharemenu__item--telegram svg { color: #26a5e4; }
.sharemenu__item--copy { border-top: 1px solid var(--line); margin-top: 4px; }
.sharemenu__item.is-done { color: var(--accent); }

/* Über einen geteilten Link geöffnet: Zeile kurz aufleuchten lassen */
.tracklist li.is-shared::before { background: color-mix(in srgb, var(--accent) 22%, transparent); animation: song-shared 2.4s ease-out; }
@keyframes song-shared { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }

/* Startseite: Songliste mit fester Höhe (8 Songs), der Rest scrollt in der Liste */
.tracklist-scroll { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.tracklist-scroll.is-scrolling { border-bottom: 1px solid var(--line); }
.tracklist-scroll::-webkit-scrollbar { width: 6px; }
.tracklist-scroll::-webkit-scrollbar-thumb { background: var(--line); }

/* Künstler-Seite: A–Z-Leiste und Raster der Künstlerkarten */
.az { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--gap); }
.az__btn {
    min-width: 38px; height: 38px; padding: 0 10px;
    display: inline-grid; place-items: center;
    color: var(--muted); font-weight: 800;
    border: var(--btn-border) solid var(--line);
    border-radius: var(--btn-radius);
    transition: color .2s, border-color .2s, background .2s;
}
.az__btn:hover { color: var(--text); border-color: var(--muted); }
.az__btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.az__count { margin-left: auto; font-size: .88rem; }
.artist-grid { list-style: none; margin: 0; padding: 6px 0 8px; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.artist-grid > [hidden] { display: none; }
@media (max-width: 719px) {
    .artist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .az__count { width: 100%; margin-left: 0; }
}
/* Künstlerkarte: Like (Herz + Zahl) und E-Mail neben dem Play-Button */
.artist-card__actions { display: flex; align-items: center; gap: 4px; flex: none; }
.artist-like,
.artist-mail {
    height: 32px; padding: 0 8px;
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--muted);
    font-size: .8rem; font-weight: 800;
    text-decoration: none;
    border-radius: 16px;
    transition: color .2s, background .2s;
}
.artist-mail { width: 32px; padding: 0; justify-content: center; }
.artist-like svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.artist-mail svg { width: 18px; height: 18px; }
.artist-like:hover:not(:disabled), .artist-mail:hover { color: var(--text); background: var(--surface-2); }
.artist-like:hover:not(:disabled) svg { stroke: #e3262f; }
.artist-like.is-liked { color: var(--text); cursor: default; }
.artist-like.is-liked svg { fill: #e3262f; stroke: #e3262f; }
.artist-like.is-pop svg { animation: fav-pop .35s var(--ease); }
.artist-grid .artist-card__social a { width: 28px; height: 28px; }
/* Künstler-Seite: Play-Button unten rechts an der CD-Hülle, Like neben der Songanzahl,
   Social Media und Nachricht rechts in der Fußzeile */
.artist-card--page { container-type: inline-size; }
.artist-card--page .artist-card__body { padding-bottom: 4px; }
.artist-card__play--corner {
    position: absolute; z-index: 3;
    /* Mitte des Buttons auf der unteren rechten Ecke der Hülle (Kartenrand 18/16 px, Hülle in % der Bühnenbreite = 100cqw) */
    left: calc(16px + 72cqw - 18px);
    top: calc(10px + 72cqw - 30px); /* etwas über der Ecke, damit der Name frei bleibt */
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.artists--cd-up .artist-card__play--corner { left: calc(16px + 88cqw - 18px); top: calc(10px + 100cqw / .98 - 30px); }
.artist-card__meta { display: flex; align-items: center; justify-content: center; gap: 6px; padding-bottom: 8px; }
.artist-card__meta .artist-like { height: 26px; padding: 0 6px; }
/* Nachricht links, Social Media rechts (auch ohne Nachricht-Button rechts) */
.artist-card .artist-card__foot--end { justify-content: space-between; gap: 4px; }
.artist-card .artist-card__foot--end .artist-card__social { justify-content: flex-end; margin-left: auto; }

/* Video-Seite: ausgefilterte Videos ausblenden */
.video-grid > [hidden] { display: none; }

/* Favoriten-Seite */
.fav-empty a { color: var(--accent); }

@media (max-width: 719px) {
    .track__fav { width: 36px; height: 36px; margin-left: 2px; }
    .track__share { width: 36px; height: 36px; margin-left: 2px; }
    .tracklist .track__dl { width: 42px; padding: 0; justify-content: center; border-radius: min(var(--btn-radius), 50%); }
    .tracklist .track__dl span { display: none; }
}

.track {
    flex: 1;
    min-width: 0;
    display: grid; grid-template-columns: 22px 52px minmax(0, 1fr) auto; align-items: center; gap: 16px;
    padding: 12px 8px 12px 0; /* links bündig mit Überschrift und Text */
    text-align: left;
}

.track__num { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; text-align: left; }
.track__cover {
    width: 52px; height: 52px;
    border-radius: 8px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--accent) 35%, var(--surface-2)));
}
.track__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.track__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; }
.track__artist { color: var(--muted); font-size: .88rem; }
.track__info { margin-top: 2px; color: var(--muted); font-size: 10px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.track.is-current .track__title { color: var(--accent); }

.track__state {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: background .2s, border-color .2s, color .2s;
}
.track__state svg { width: 16px; height: 16px; fill: currentColor; }
.track:hover .track__state,
.track.is-current .track__state { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.track__state .i-pause,
.track__state .eq { display: none; }
.track.is-playing .i-play { display: none; }
.track.is-playing .eq { display: flex; }
.track.is-playing:hover .eq { display: none; }
.track.is-playing:hover .i-pause { display: block; }

.eq { align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; height: 100%; background: currentColor; border-radius: 1px; transform-origin: bottom; animation: eq .9s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -.3s; }
.eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* ---------------------------------------------------------------
 * Blog
 * ------------------------------------------------------------ */

/* Kategorie-Leiste mit Suche über dem Blog */
.blogbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
    margin-bottom: var(--gap); padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.blogbar__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.blogbar__cats a {
    padding: 6px 14px;
    border: var(--btn-border) solid var(--line);
    border-radius: var(--btn-radius);
    letter-spacing: var(--btn-spacing);
    text-transform: var(--btn-case);
    color: var(--muted);
    font-size: .88rem;
    text-decoration: none;
    transition: color .2s, border-color .2s, background .2s;
}
.blogbar__cats a:hover { color: var(--text); border-color: var(--muted); }
.blogbar__cats a.is-active { background: var(--text); border-color: var(--text); color: var(--bg); }

.search-group { margin: 0 0 16px; color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.search-tracks { margin-bottom: calc(var(--gap) * 2); }

/* Sitemap */
.sitemap { display: grid; gap: 40px 48px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.prose .sitemap { margin-top: 2em; }
.prose .sitemap h2 { margin: 0 0 12px; font-size: 1.2rem; }
.sitemap ul { list-style: none; margin: 0; padding: 0; }
.sitemap ul ul { padding-left: 18px; }
.sitemap li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.sitemap li li:last-child { border-bottom: 0; }
.prose .sitemap a,
.sitemap button { color: var(--text); text-decoration: none; text-align: left; }
.prose .sitemap a:hover,
.sitemap button:hover,
.sitemap button.is-current { color: var(--accent); }
.sitemap .meta { margin-left: 8px; }

/* Gemeinsamer Schlagschatten aller Kacheln (Künstler, Blog, Videos) */
:root { --tile-shadow: 3px 3px 3px rgba(0, 0, 0, .45); }
html[data-theme="light"] { --tile-shadow: 3px 3px 3px rgba(0, 0, 0, .16); }
.card, .video-card { box-shadow: var(--tile-shadow); }

.post-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.card {
    overflow: hidden;
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--line);
    /* folgt dem Button-Radius; bei Pillenform auf 24 px begrenzt, sonst würde die Karte oval */
    border-radius: min(var(--btn-radius), 24px);
    transition: border-color .25s, transform .25s var(--ease);
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-2px); }
.card { container-type: inline-size; }
.card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.card__link:hover { color: inherit; }
/* Bild 60 px flacher als 16:10, Titel unten auf dem Bild */
.card__media {
    position: relative;
    height: max(120px, calc(62.5cqw - 60px));
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%),
        var(--surface-2);
}
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }
/* Kein Beitragsbild: dunkle Fläche mit leichtem Schimmer in der Akzentfarbe (wie die Kachel) */
.card__media.card__media--empty,
.news-item__media.news-item__media--empty {
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%),
        color-mix(in srgb, var(--surface-2) 95%, #000); /* eine Stufe dunkler als die übrigen Flächen */
}
/* Blogkacheln: Rahmen um die ganze Kachel, beim Überfahren in der Akzentfarbe */
.card { border-width: 2px; }
.card:hover,
.card:focus-within { border-color: var(--accent); }
/* News-Liste: Rahmen um das Beitragsbild (liegt über dem Bild), beim Überfahren in der Akzentfarbe */
.news-item__media::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    border: 1px solid var(--line);
    border-radius: inherit;
    pointer-events: none;
    transition: border-color .25s;
}
.news-item:hover .news-item__media::after,
.news-item__link:focus-visible .news-item__media::after { border-color: color-mix(in srgb, var(--accent) 50%, transparent); } /* Akzentfarbe zu 50 % */
.card__title {
    position: absolute; left: 0; right: 0; bottom: 0;
    margin: 0;
    padding: 40px 20px 14px;
    color: #fff;
    font-size: calc(1.25rem * var(--h-scale));
    line-height: 1.25;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
    background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
}
.card__media--empty .card__title { background: none; color: var(--text); text-shadow: none; }
.card__body { padding: 14px 20px 20px; }
.card__excerpt { margin: 6px 0 0; color: var(--muted); font-size: .95em; }

/* „Neu“-Banner oben rechts (Beiträge der letzten 14 Tage) */
.post-new {
    position: absolute; top: 12px; right: 12px; z-index: 1;
    padding: 4px 10px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    border-radius: min(var(--btn-radius), 6px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* News-Seite: Beiträge als Liste über die volle Breite, Datum links in der Akzentfarbe */
.news-list { border-top: 1px solid var(--line); }
.news-item {
    position: relative;
    display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--gap);
    padding: var(--gap) 0;
    border-bottom: 1px solid var(--line);
    isolation: isolate;
}
.news-item::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--row-hover);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 100px, #000 calc(100% - 100px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 100px, #000 calc(100% - 100px), transparent);
    opacity: 0; transition: opacity .2s;
}
.news-item:hover::before { opacity: 1; }
.news-item__date {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    align-self: start;
    padding: 10px 0;
    color: var(--accent);
    border: 2px solid var(--accent);
    border-radius: min(var(--btn-radius), 12px);
    line-height: 1.05;
    text-transform: uppercase;
}
.news-item__day { font-size: 1.9rem; font-weight: 800; }
.news-item__month { font-size: .8rem; font-weight: 800; letter-spacing: .08em; }
.news-item__year { margin-top: 2px; font-size: .72rem; font-weight: 600; opacity: .8; }
.news-item__link { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) auto; gap: var(--gap); color: inherit; text-decoration: none; }
.news-item__link:hover { color: inherit; }
.news-item__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: min(var(--btn-radius), 12px);
    background: var(--surface-2);
}
.news-item__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.news-item:hover .news-item__media img { transform: scale(1.04); }
/* Text oben: Titel (Anfangsbuchstaben in Akzentfarbe), feine Trennlinie über die halbe Breite, darunter der Auszug */
.news-item__text { display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; min-width: 0; }
.news-item__title { margin: 0; font-size: calc(1.75rem * var(--h-scale)); line-height: 1.15; }
.accent-initial { color: var(--accent); }
.news-item__line { display: block; width: 50%; height: 1px; background: linear-gradient(to right, var(--line), transparent); }
.news-item__excerpt { color: var(--muted); }
/* News-Platzhalter ohne Beitragsbild: großer, umrissener Schriftzug „eMWe“, der in den Hintergrund
   übergeht, darüber „NEWS“ in der Akzentfarbe – passt sich der Bildgröße an (cqw) */
.news-item__media { container-type: inline-size; }
.news-ph { position: absolute; inset: 0; overflow: hidden; }
.news-ph__name {
    position: absolute; left: 6%; bottom: 6%; /* ganzer Schriftzug sichtbar */
    font-size: 29cqw; font-weight: 900; line-height: 1; letter-spacing: -.06em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--text) 22%, transparent);
    background: linear-gradient(115deg, color-mix(in srgb, var(--text) 16%, transparent), transparent 70%);
    -webkit-background-clip: text; background-clip: text;
    transform: rotate(-6deg); transform-origin: left bottom;
    transition: transform .6s var(--ease);
}
.news-ph__news {
    position: absolute; left: 8%; top: 12%;
    color: var(--accent);
    font-size: 9cqw; font-weight: 800; letter-spacing: .45em; text-transform: uppercase;
    text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent);
}
.news-ph__news::before { content: ""; display: inline-block; width: 14cqw; height: 2px; margin-right: 3cqw; vertical-align: middle; background: var(--accent); }
.news-item:hover .news-ph__name { transform: rotate(-6deg) translateX(2%); }

/* Pfeil-Button rechts in der Mitte */
.news-item__arrow {
    align-self: center;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: var(--btn-border) solid var(--line);
    border-radius: min(var(--btn-radius), 50%);
    color: var(--text);
    transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.news-item__arrow svg { width: 22px; height: 22px; fill: currentColor; }
.news-item:hover .news-item__arrow,
.news-item__link:focus-visible .news-item__arrow { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: translateX(3px); }
@media (max-width: 719px) {
    .news-item { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; }
    .news-item__day { font-size: 1.4rem; }
    .news-item__link { grid-template-columns: 1fr; gap: 12px; }
    .news-item__title { font-size: calc(1.35rem * var(--h-scale)); }
    .news-item__arrow { justify-self: end; width: 40px; height: 40px; }
}

.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 48px; }
.pagination .page-numbers {
    min-width: 40px; height: 40px; padding: 0 14px;
    display: inline-grid; place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
}
.pagination .page-numbers:hover { color: var(--text); border-color: var(--muted); }
.pagination .current { background: var(--text); border-color: var(--text); color: var(--bg); }

/* ---------------------------------------------------------------
 * Beiträge und Seiten
 * ------------------------------------------------------------ */

/* Oben im Beitrag: links „Zurück zum Blog“, rechts Brotkrumen */
.entry__bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
    margin-bottom: var(--gap); padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.btn--small { height: calc(var(--btn-h) - 10px); padding: 0 16px 0 10px; gap: 6px; font-size: .88rem; }
.btn--small svg { width: 18px; height: 18px; }
/* Löschen-Knöpfe: unauffällig, beim Überfahren rot */
.btn--danger { color: var(--muted); }
.btn--danger:hover { color: #fff; background: #d92b2b; border-color: #d92b2b; }

.breadcrumbs { min-width: 0; color: var(--muted); font-size: .85rem; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.breadcrumbs li { display: flex; align-items: center; min-width: 0; }
.breadcrumbs li + li::before { content: "›"; margin: 0 8px; opacity: .6; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs [aria-current] { max-width: 32ch; overflow: hidden; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }

.entry__head { margin-bottom: var(--gap); }
.entry__head .meta { margin: 16px 0 0; }
.entry__media { margin: 0 0 40px; border-radius: var(--radius); overflow: hidden; }

.prose { --prose-scale: 1.06; font-size: calc(var(--prose-scale) * 1em); }
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h1 { font-size: calc(2.2rem * var(--h-scale)); }
.prose h2 { margin-top: 2em; font-size: calc(1.7rem * var(--h-scale)); }
.prose h3 { margin-top: 1.6em; font-size: calc(1.3rem * var(--h-scale)); }
.prose h4 { font-size: calc(1.1rem * var(--h-scale)); }
.prose a { color: var(--accent); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose .tracklist { padding-left: 0; } /* Trackliste nicht wie eine Textliste einrücken */
/* Trackliste und Filter in Seiten (z. B. Songs) exakt wie auf der Startseite: ohne die größere Fließtext-Schrift und Bild-Rundung */
.prose .tracklist, .prose .musicfilter, .prose .musicfilter__empty { font-size: calc(1em / var(--prose-scale)); }
.prose .tracklist .track__cover { border-radius: 8px; }
.prose .musicfilter + .tracklist { margin-top: 0; }
.prose blockquote { margin-inline: 0; padding-left: 20px; border-left: 2px solid var(--accent); color: var(--muted); font-style: italic; }
.prose img { border-radius: 10px; }
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: 8px; color: var(--muted); font-size: .85rem; text-align: center; }
.prose pre { padding: 16px; overflow: auto; background: var(--surface); border-radius: 10px; }
.prose code { padding: 2px 6px; background: var(--surface-2); border-radius: 6px; font-size: .9em; }
.prose pre code { padding: 0; background: none; }
.prose hr { margin-block: 2.5em; border: 0; border-top: 1px solid var(--line); }
.prose iframe { width: 100%; border: 0; border-radius: 10px; }
.prose .wp-block-button__link { background: var(--accent); color: var(--on-accent); border-radius: var(--btn-radius); text-transform: var(--btn-case); letter-spacing: var(--btn-spacing); text-decoration: none; }
.prose .tracklist { margin-top: 1.6em; } /* nur nach Fließtext; direkt nach dem Filter 0 (siehe oben) */
.alignleft { float: left; margin: .3em 1.5em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.5em; }
.aligncenter { margin-inline: auto; }

.post-nav {
    display: flex; justify-content: space-between; gap: 16px;
    margin-top: 64px; padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: .95rem;
}
.post-nav a { color: var(--muted); text-decoration: none; }
.post-nav a:hover { color: var(--accent); }
.post-nav span:last-child { text-align: right; }

/* ---------------------------------------------------------------
 * Fußbereich
 * ------------------------------------------------------------ */

.site-footer { background: var(--footer-bg); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-footer); }
/* Footer: links ©, Mitte Social-Icons, rechts Links */
.site-footer__inner {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
    padding-block: 28px;
}
.site-footer .social { justify-content: center; grid-column: 2; }
.site-footer .social a { color: inherit; } /* gleiche Grundfarbe wie die Footer-Schrift */
.site-footer .social a:hover,
.site-footer .social a:focus-visible,
.site-footer .social a:active { color: var(--accent); }
.footer-menu { grid-column: 3; justify-self: end; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }
@media (max-width: 719px) {
    .site-footer__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .site-footer .social, .footer-menu { grid-column: 1; justify-self: center; }
    .site-footer .social { order: -1; }
}
.footer-menu a { text-decoration: none; }

/* ---------------------------------------------------------------
 * Player
 * ------------------------------------------------------------ */

/* Zwischen Inhalt und Footer: klebt beim Scrollen unten am Bildschirm,
   am Seitenende bleibt er über dem Footer stehen (der Footer ist das Letzte). */
.player {
    position: sticky; bottom: 0; z-index: 50;
    height: var(--player-h);
    background: color-mix(in srgb, var(--player-bg) 94%, transparent);
    color: var(--text);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid var(--line);
}
.player.is-empty .player__controls,
.player.is-empty .player__extra,
.player.is-empty .player__bar { visibility: hidden; }

/* Fortschrittsbalken an der Oberkante des Players */
.player__bar {
    position: absolute; left: 0; right: 0; top: -6px;
    height: 14px;
    cursor: pointer;
    touch-action: none;
}
.player__bar::before,
.player__fill {
    position: absolute; left: 0; top: 6px;
    height: 2px;
    transition: top .15s, height .15s;
}
.player__bar::before { content: ""; right: 0; background: var(--line); }
.player__fill { width: 0; background: var(--accent); pointer-events: none; }
/* Griff am Ende des Balkens: Violinschlüssel in Akzentfarbe (SVG als Maske) */
.player__fill::after {
    --clef: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48'%3E%3Cpath d='M9 43C9 46 13 46 13.5 43L11 5C11 1 17 1 16.5 6C16 11 5 16 5 24C5 32 19 33 19 25.5C19 19.5 10.5 19 10 24.5C9.8 27 12 28.5 13.5 27.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9.6' cy='43.2' r='2.6'/%3E%3C/svg%3E");
    content: "";
    position: absolute; right: -7px; top: 50%;
    width: 14px; height: 28px;
    margin-top: -14px;
    background: var(--accent);
    -webkit-mask: var(--clef) center / contain no-repeat;
    mask: var(--clef) center / contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5));
    transform: scale(.85);
    transition: transform .15s;
}
.player__bar:hover::before, .player__bar:hover .player__fill,
.player__bar.is-drag::before, .player__bar.is-drag .player__fill,
.player__bar:focus-visible::before, .player__bar:focus-visible .player__fill { top: 5px; height: 4px; }
.player__bar:hover .player__fill::after,
.player__bar.is-drag .player__fill::after,
.player__bar:focus-visible .player__fill::after { transform: scale(1); }
.player__bar:focus-visible { outline: none; }

.player__inner {
    height: 100%;
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
}

.player__meta { display: flex; align-items: center; gap: 12px; min-width: 0; }
.player__cover {
    flex: none;
    width: 48px; height: 48px;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--accent) 35%, var(--surface-2)));
}
.player__cover img { width: 100%; height: 100%; object-fit: cover; }
/* Kurzes Aufleuchten, wenn eine CD aus dem Künstler-Karussell im Player landet */
.player.is-receiving .player__cover { animation: player-receive .7s var(--ease); }
@keyframes player-receive {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 80%, transparent); transform: scale(1.12); }
    100% { box-shadow: 0 0 0 14px transparent; transform: scale(1); }
}
.player__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.player__title,
.player__artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__title { font-size: .95rem; font-weight: 600; }
.player__artist { color: var(--muted); font-size: .82rem; }

.player__controls { display: flex; align-items: center; gap: 8px; }

.pbtn {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--muted);
    transition: color .2s, background .2s, transform .15s;
}
.pbtn:hover { color: var(--text); background: var(--surface-2); }
.pbtn svg { width: 20px; height: 20px; fill: currentColor; }

.pbtn--play { width: 48px; height: 48px; background: var(--text); color: var(--bg); }
.pbtn--play:hover { background: var(--accent); color: var(--on-accent); transform: scale(1.05); }
.pbtn--play svg { width: 22px; height: 22px; }

.pbtn .i-pause, .pbtn .i-muted,
.player.is-playing .pbtn--play .i-play,
.player.is-muted .pbtn--mute .i-vol { display: none; }
.player.is-playing .pbtn--play .i-pause,
.player.is-muted .pbtn--mute .i-muted { display: block; }

.player__extra {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    color: var(--muted);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}
.player__time { margin-right: 6px; }

/* Download: kleiner runder Knopf nur mit Symbol (Text bleibt für Screenreader) */
.pbtn--dl { border: 1px solid var(--line); text-decoration: none; }
.pbtn--dl svg { width: 18px; height: 18px; }
.pbtn--dl:hover { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

/* Schalter „Nur Favoriten“: Umriss = aus, rot gefüllt mit Ring = an */
.pbtn--favmode svg { width: 22px; height: 22px; fill: currentColor; }
/* Umschalter Song ↔ Video im Player: zeigt, wohin man wechselt („Video“ bzw. zurück zum „Song“) */
.pbtn--vswitch {
    flex: none;
    width: auto; height: 32px;
    display: inline-flex; align-items: center;
    padding: 0 12px 0 9px;
    border: 1px solid var(--line);
    border-radius: var(--btn-radius);
    font-size: .78rem; font-weight: 700;
    letter-spacing: var(--btn-spacing); text-transform: var(--btn-case);
}
.pbtn--vswitch span { display: inline-flex; align-items: center; gap: 6px; }
.pbtn--vswitch svg { width: 17px; height: 17px; }
.pbtn--vswitch__song,
.pbtn--vswitch[aria-pressed="true"] .pbtn--vswitch__video { display: none !important; }
.pbtn--vswitch[aria-pressed="true"] .pbtn--vswitch__song { display: inline-flex !important; }
.pbtn--vswitch:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.pbtn--vswitch[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.pbtn--vswitch[aria-pressed="true"]:hover { color: var(--on-accent); }
/* Zufallsmix: wie „Nur Favoriten“ – eingeschaltet in der Akzentfarbe mit Ring */
.pbtn--shuffle svg { width: 21px; height: 21px; fill: currentColor; }
.pbtn--shuffle:hover { color: var(--accent); }
.pbtn--shuffle[aria-pressed="true"] { color: var(--accent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.pbtn--favmode:hover { color: #e3262f; }
.pbtn--favmode[aria-pressed="true"] { color: #e3262f; box-shadow: inset 0 0 0 2px color-mix(in srgb, #e3262f 55%, transparent); }

.pbtn--favmode.is-denied { animation: favmode-no .4s; }
@keyframes favmode-no { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }

.player__vol {
    -webkit-appearance: none;
    appearance: none;
    width: 96px; height: 4px;
    border-radius: 4px;
    background: linear-gradient(var(--text), var(--text)) 0 / var(--v, 100%) 100% no-repeat, var(--line);
    cursor: pointer;
}
.player__vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--text); }
.player__vol::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--text); }
.player.is-muted .player__vol { opacity: .4; }

@media (max-width: 719px) {
    .player__inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
    .player__time, .pbtn--mute, .player__vol, .pbtn--prev { display: none; }
    /* Handy: kompaktere Trackzeile, damit der Titel Platz behält */
    .track { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding-right: 4px; }
    .track__num { display: none; }
    .track__cover { width: 44px; height: 44px; }
    .track__state { width: 34px; height: 34px; }
    .track__info { white-space: nowrap; }
    .tracklist li { gap: 2px; }
    .track__video { height: 36px; margin-left: 2px; padding: 0 10px; font-size: .8rem; }
    .tracklist .track__dl { width: 36px; height: 36px; margin-left: 2px; }
    .track__dl svg { width: 20px; height: 20px; }
}

/* ---------------------------------------------------------------
 * Künstler-Karussell (Startseite)
 * ------------------------------------------------------------ */

.carousel__nav { display: flex; gap: 8px; }
.carousel__btn {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--text);
    transition: background .2s, border-color .2s, color .2s, opacity .2s;
}
.carousel__btn svg { width: 22px; height: 22px; fill: currentColor; }
.carousel__btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.carousel__btn:disabled { opacity: .3; cursor: default; }

.carousel { overflow: hidden; }
.carousel__track {
    list-style: none; margin: 0; padding: 6px 0 8px; /* Platz für den Hover-Hub und den Schatten der Karten */
    margin-inline-end: -8px; padding-inline-end: 8px; /* Schatten der rechten Karte nicht abschneiden, Spaltenbreite bleibt gleich */
    display: grid; grid-auto-flow: column; gap: var(--gap);
    grid-auto-columns: max(180px, calc((100% - 3 * var(--gap)) / 4));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track.is-scrubbing { scroll-snap-type: none; scroll-behavior: auto; }

/* Schieberegler unter den Kacheln: Leiste mit Griff in Akzentfarbe */
.carousel__scrub {
    position: relative;
    height: 22px; margin-top: 10px;
    cursor: pointer;
    touch-action: none;
    user-select: none;
}
.carousel__scrub[hidden] { display: none; }
.carousel__scrub::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 50%;
    height: 4px; margin-top: -2px;
    background: var(--line);
}
.carousel__thumb {
    position: absolute; top: 50%; left: 0;
    height: 10px; margin-top: -5px;
    background: var(--accent);
    cursor: grab;
    transition: height .15s, margin-top .15s, box-shadow .15s;
}
.carousel__scrub:hover .carousel__thumb,
.carousel__thumb:focus-visible { height: 14px; margin-top: -7px; outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.carousel__scrub:active .carousel__thumb { cursor: grabbing; }

/* CD-Kachel: Jewel-Case mit Cover, beim Überfahren fährt die CD rechts heraus und dreht sich */
/* Karte: Hülle, Beschriftung und Social-Icons gehören zusammen */
.artist-card {
    position: relative;
    scroll-snap-align: start;
    display: flex; flex-direction: column;
    padding: 18px 16px 10px;
    color: var(--text);
    background:
        radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
        var(--card-bg);
    border: 1px solid var(--line);
    border-radius: min(var(--btn-radius), 18px);
    box-shadow: var(--tile-shadow); /* kleiner Schlagschatten, wie bei Blog- und Videokacheln */
    transition: border-color .3s, transform .3s var(--ease);
}

.artist-card:hover,
.artist-card:focus-within {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    transform: translateY(-3px);
}
.artist-card__link { display: flex; flex-direction: column; gap: 14px; color: inherit; text-decoration: none; }
.artist-card__link:hover { color: inherit; }

/* Bühne: Hülle links, rechts Platz für die herausfahrende CD */
.artist-card__stage { position: relative; display: block; width: 100%; aspect-ratio: 1 / .72; perspective: 900px; }

.artist-card__case {
    position: absolute; top: 0; left: 0; z-index: 2;
    width: 72%; aspect-ratio: 1;
    overflow: hidden;
    border-radius: 3px;
    background: var(--surface-2);
    /* Kante der Hülle (Dicke nach rechts unten) und Schlagschatten */
    --case-edge: color-mix(in srgb, var(--surface-2) 82%, #fff 18%);
    box-shadow:
        1px 1px 0 var(--case-edge),
        2px 2px 0 color-mix(in srgb, var(--case-edge) 75%, #000),
        3px 3px 0 color-mix(in srgb, var(--case-edge) 50%, #000),
        12px 18px 26px -8px rgba(0, 0, 0, .75);
    transform-origin: left center;
    transform: rotateY(-5deg) rotateX(2deg);
    transition: transform .6s var(--ease), box-shadow .4s;
}
/* Scharnierleiste links mit Rillen */
.artist-card__case::before {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 2;
    width: 9%;
    background:
        repeating-linear-gradient(to bottom, rgba(255, 255, 255, .12) 0 1px, transparent 1px 4px),
        linear-gradient(to right, rgba(0, 0, 0, .65), rgba(0, 0, 0, .25) 70%, rgba(255, 255, 255, .25));
    box-shadow: 1px 0 0 rgba(255, 255, 255, .3);
}
/* Rahmen und Spiegelung auf dem Plastik: helle Außenkante, dunkle Nut, heller Innenrand */
.artist-card__case::after {
    content: "";
    position: absolute; inset: 0; z-index: 3;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .07) 28%, transparent 42%, transparent 72%, rgba(255, 255, 255, .1) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .3),
        inset 0 0 0 4px rgba(255, 255, 255, .1),
        inset 0 0 0 5px rgba(0, 0, 0, .55),
        inset 0 0 0 6px rgba(255, 255, 255, .12),
        inset 0 10px 18px -12px rgba(255, 255, 255, .45),
        inset 0 -14px 20px -14px rgba(0, 0, 0, .7);
    pointer-events: none;
    transition: box-shadow .4s;
}
.artist-card__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(.85);
    transition: filter .5s;
}
.artist-card__img--initials {
    display: grid; place-items: center;
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 900;
    background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 85%, #fff), color-mix(in srgb, var(--accent) 35%, #000));
}

/* Die CD: Silber mit Regenbogen-Schimmer, Rillen, Cover als Aufdruck, Loch in der Mitte */
.artist-card__disc {
    position: absolute; top: 3%; left: 3%; z-index: 1;
    width: 66%; aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .8);
    transition: transform .7s var(--ease);
}
.artist-card__vinyl {
    position: absolute; inset: 0;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, rgba(255, 255, 255, 0) 0 2px, rgba(0, 0, 0, .06) 2px 3px),
        conic-gradient(from 20deg, #cfd3d8, #f7f7f7, #a9b0b8, #e9f3ff, #ffd9f2, #fff6d1, #c7ccd2, #f2f2f2, #aab1b9, #dff7ef, #cfd3d8);
}
/* Aufdruck mit Künstlerbild */
.artist-card__vinyl::before {
    content: "";
    position: absolute; inset: 22%;
    border-radius: 50%;
    background: var(--disc-img, none) center / cover, color-mix(in srgb, var(--accent) 70%, #000);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
}
/* Mittelloch mit transparentem Ring */
.artist-card__vinyl::after {
    content: "";
    position: absolute; inset: 42%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--card-bg) 0 45%, rgba(255, 255, 255, .55) 46% 60%, rgba(200, 200, 200, .35) 61%);
}

.artist-card:hover .artist-card__disc,
.artist-card:focus-within .artist-card__disc { transform: translateX(46%); }
.artist-card:hover .artist-card__vinyl,
.artist-card:focus-within .artist-card__vinyl { animation: artist-spin 3.2s linear infinite; }
@keyframes artist-spin { to { transform: rotate(360deg); } }
/* Hülle klappt leicht auf */
.artist-card:hover .artist-card__case,
.artist-card:focus-within .artist-card__case {
    transform: rotateY(-16deg) rotateX(2deg);
    box-shadow:
        1px 1px 0 var(--case-edge),
        2px 2px 0 color-mix(in srgb, var(--case-edge) 75%, #000),
        3px 3px 0 color-mix(in srgb, var(--case-edge) 50%, #000),
        16px 22px 30px -8px rgba(0, 0, 0, .85);
}
.artist-card:hover .artist-card__case::after,
.artist-card:focus-within .artist-card__case::after {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 80%, #fff),
        inset 0 0 0 4px rgba(255, 255, 255, .1),
        inset 0 0 0 5px rgba(0, 0, 0, .55),
        inset 0 0 0 6px rgba(255, 255, 255, .12),
        inset 0 10px 18px -12px rgba(255, 255, 255, .45),
        inset 0 -14px 20px -14px rgba(0, 0, 0, .7);
}
.artist-card:hover .artist-card__img,
.artist-card:focus-within .artist-card__img { filter: none; }

/* Beschriftung unter der Hülle */
.artist-card__body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 8px; text-align: center; } /* Name und Song-Anzahl mittig */
.artist-card__name {
    max-width: 100%;
    overflow: hidden;
    font-size: calc(1.4rem * var(--h-scale));
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color .2s;
}
.artist-card__name::first-letter { color: var(--accent); }
.artist-card:hover .artist-card__name { color: var(--accent); }
.artist-card__count { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .8rem; font-weight: 600; }
/* Kleiner Equalizer, der beim Überfahren tanzt */
.artist-card__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.artist-card__eq i { width: 3px; height: 40%; border-radius: 1px; background: var(--accent); }
.artist-card__eq i:nth-child(2) { height: 100%; }
.artist-card__eq i:nth-child(3) { height: 65%; }
.artist-card:hover .artist-card__eq i,
.artist-card:focus-within .artist-card__eq i { animation: artist-eq .9s ease-in-out infinite alternate; }
.artist-card:hover .artist-card__eq i:nth-child(2),
.artist-card:focus-within .artist-card__eq i:nth-child(2) { animation-delay: -.45s; }
.artist-card:hover .artist-card__eq i:nth-child(3),
.artist-card:focus-within .artist-card__eq i:nth-child(3) { animation-delay: -.2s; }
@keyframes artist-eq { 0% { height: 20%; } 100% { height: 100%; } }

/* Fuß der Karte, durch eine Linie abgetrennt: Social-Icons links, Play-Button rechts */
.artist-card__foot {
    margin: auto -16px 0; padding: 8px 10px 0 8px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    border-top: 1px solid var(--line);
}
.artist-card__social {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 0;
}
.artist-card__social a {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--muted);
    transition: color .2s, background .2s;
}
.artist-card__social svg { width: 16px; height: 16px; }
.artist-card__social a:hover,
.artist-card__social a:focus-visible { color: var(--on-accent); background: var(--accent); }
.artist-card__play {
    flex: none;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    transition: transform .2s var(--ease), filter .2s;
}
.artist-card__play svg { width: 18px; height: 18px; fill: currentColor; }
.artist-card__play svg + svg,
.artist-card__play.is-playing svg:first-child { display: none; }
.artist-card__play.is-playing svg + svg { display: block; }
.artist-card__play:hover,
.artist-card__play:focus-visible { transform: scale(1.08); filter: brightness(1.08); }

/* Variante: CD fährt nach oben aus der Hülle (Customizer → Layout) */
.artists--cd-up .artist-card__stage { aspect-ratio: 1 / .98; }
.artists--cd-up .artist-card__case { top: auto; bottom: 0; left: 12%; width: 76%; transform-origin: center bottom; transform: rotateX(4deg); }
.artists--cd-up .artist-card__disc { top: auto; bottom: 2%; left: 15%; width: 70%; }
.artists--cd-up .artist-card:hover .artist-card__disc,
.artists--cd-up .artist-card:focus-within .artist-card__disc { transform: translateY(-34%); }
.artists--cd-up .artist-card:hover .artist-card__case,
.artists--cd-up .artist-card:focus-within .artist-card__case { transform: rotateX(12deg); }

@media (prefers-reduced-motion: reduce) {
    .artist-card__case, .artist-card__disc { transition: none; }
    .artist-card__vinyl, .artist-card__eq i { animation: none !important; }
}

@media (max-width: 719px) {
    .carousel__track { grid-auto-columns: 58%; }
}

/* ---------------------------------------------------------------
 * Videoseite: Portfolio-Raster
 * ------------------------------------------------------------ */

.entry__content + .video-grid { margin-top: 36px; }
.video-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.video-card {
    position: relative;
    display: flex; flex-direction: column;
    overflow: hidden;
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: min(var(--btn-radius), 24px);
    text-align: left;
    transition: border-color .25s, transform .25s var(--ease);
}
.video-card[hidden] { display: none; }
.video-card:hover,
.video-card:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); transform: translateY(-2px); }
.video-card__open {
    flex: 1;
    display: flex; flex-direction: column;
    width: 100%; padding: 0; border: 0;
    background: none; color: inherit; font: inherit; text-align: inherit;
    cursor: pointer;
}
.video-card__open:focus-visible { outline: none; }
/* Herz unten rechts im Textbereich */
.video-card__fav {
    position: absolute; right: 12px; bottom: 14px;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--muted);
    transition: color .2s, background .2s;
}
.video-card__fav:hover { color: #e3262f; background: var(--surface-2); }
.video-card__fav svg { width: 20px; height: 20px; }
.video-card:has(.video-card__fav) .video-card__body { padding-right: 60px; }

.video-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%),
        var(--surface-2);
}
.video-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.video-card:hover .video-card__img { transform: scale(1.04); }

.video-card__play {
    position: absolute; left: 50%; top: 50%;
    width: 64px; height: 64px; margin: -32px 0 0 -32px;
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(10, 10, 11, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.video-card__play svg { width: 28px; height: 28px; margin-left: 3px; fill: currentColor; }
.video-card:hover .video-card__play { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: scale(1.08); }

.video-card__body { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 16px 20px 20px; }
.video-card__title { font-size: calc(1.15rem * var(--h-scale)); font-weight: 700; line-height: 1.25; transition: color .2s; }
.video-card:hover .video-card__title { color: var(--accent); }
.video-card__artist { color: var(--muted); font-size: .9em; }

/* ---------------------------------------------------------------
 * Wartungsseite
 * ------------------------------------------------------------ */

body.maintenance { padding-bottom: 0; }
.maint { min-height: 100vh; display: grid; place-items: center; padding: var(--gutter); }
.maint__box {
    width: min(100%, 860px);
    min-height: 0;
    align-items: center;
    gap: 20px;
    padding: clamp(32px, 6vw, 64px) clamp(20px, 5vw, 56px);
    border-radius: min(var(--btn-radius), 24px);
    text-align: center;
}
.maint__brand { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; font-weight: 700; }
.maint__logo { width: 48px; height: 48px; object-fit: contain; }
.maint__title { margin: 8px 0 0; }
.maint__text { max-width: 52ch; margin: 0; color: var(--muted); font-size: 1.1em; }
.maint__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: min(var(--btn-radius), 16px);
    background: #000;
}
.maint__video iframe,
.maint__video video,
.maint__thumb { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.maint__video--click { cursor: pointer; }
.maint__video--click:hover .video-card__play { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: scale(1.08); }
.maint__note { margin: -8px 0 0; color: var(--muted); font-size: .8rem; }
/* Kopfzeile: Logo links, Social-Icons rechts auf gleicher Höhe */
.maint__top { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.maint__top .social { justify-content: flex-end; }
.maint__legal .footer-menu { justify-content: center; justify-self: center; font-size: var(--fs-footer); }

/* Vollbild: Fläche füllt den ganzen Bildschirm, Inhalt bleibt mittig und lesbar */
.maint--full { padding: 0; place-items: stretch; }
.maint--full .maint__box {
    width: 100%;
    min-height: 100vh;
    justify-content: center;
    border-radius: 0;
    box-shadow: none;
}
.maint--full .maint__box {
    position: relative;
    /* Platz für die Kopfzeile oben und die Links unten */
    padding: calc(var(--gutter) + 72px) var(--gutter) calc(var(--gutter) + 48px);
}
.maint--full .maint__box > :not(dialog) { width: 100%; max-width: 960px; }
.maint--full .maint__text { max-width: 60ch; }
/* Kopfzeile oben: Logo links, Icons rechts – zusammen höchstens 1200 px breit, mittig */
.maint--full .maint__box > .maint__top {
    position: absolute; top: var(--gutter); left: 50%;
    width: min(1200px, 100% - 2 * var(--gutter)); max-width: none;
    transform: translateX(-50%);
}
/* Links zentriert am unteren Bildschirmrand */
.maint--full .maint__box > .maint__legal { position: absolute; bottom: var(--gutter); left: 0; right: 0; max-width: none; }
/* Impressum im Wartungsbereich: Text oben beginnend, Links am Ende (bei kurzem Text am Bildschirmrand) */
.maint--page .maint__box { justify-content: flex-start; }
.maint--full.maint--page .maint__box { padding-bottom: var(--gutter); }
.maint--page .maint__box > .maint__legal { position: static; margin-top: auto; padding-top: var(--gap); }
.maint__page,
.maint--full .maint__box > .maint__page { width: 100%; max-width: 760px; text-align: left; }
/* Video so groß, dass alles auf einen Bildschirm passt (mind. 320 px breit) */
.maint--full .maint__box > .maint__video { max-width: max(320px, min(960px, calc((100vh - 420px) * 16 / 9))); }

@media (max-width: 719px) {
    /* Handy: Icons unter das Logo, damit nichts übereinanderliegt */
    .maint__top { flex-direction: column; gap: 8px; }
    .maint__top .social { justify-content: center; }
    .maint--full .maint__box { padding-top: calc(var(--gutter) + 110px); }
}
.maint__legal a { color: var(--muted); }
.maint__legal a:hover { color: var(--accent); }

/* Login-Popup auf der Wartungsseite */
.login-popup {
    width: min(100% - 2 * var(--gutter), 400px);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: min(var(--btn-radius), 16px);
    background: var(--site-bg);
    color: var(--text);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.login-popup::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(4px); }
.login-popup__form { padding: 12px 24px 24px; text-align: left; }
.login-popup__head { display: flex; align-items: center; justify-content: space-between; margin: 0 -12px 12px 0; }
.login-popup__head h2 { margin: 0; font-size: calc(1.4rem * var(--h-scale)); }
.login-popup .notice { font-size: .9rem; }

/* ---------------------------------------------------------------
 * Video im Player – fährt über der Playerleiste nach oben aus
 * ------------------------------------------------------------ */

.player__video {
    position: absolute; left: 0; right: 0; bottom: 100%; z-index: 1;
    background: var(--player-bg);
    border-top: 1px solid var(--line);
    box-shadow: 0 -18px 40px rgba(0, 0, 0, .35);
    visibility: hidden;
    clip-path: inset(100% 0 0 0);
    transition: clip-path .45s var(--ease), visibility 0s linear .45s;
}
.player.has-video .player__video {
    border-top-color: var(--accent); /* Linie oben in Themefarbe, nur solange das Video offen ist */
    visibility: visible;
    clip-path: inset(-60px 0 0 0);
    transition: clip-path .45s var(--ease), visibility 0s;
}
.player.has-video .player__bar { z-index: 2; }

/* Seite hinter dem Video abdunkeln (bleibt bedienbar) – Player liegt darüber */
body::after {
    content: "";
    position: fixed; inset: 0; z-index: 45;
    background: rgba(0, 0, 0, .7);
    opacity: 0; visibility: hidden;
    pointer-events: none;
    transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
html.is-video body::after { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }

/* Herz im Player für den laufenden Song bzw. das laufende Video */
.pbtn--fav { flex: none; color: var(--muted); }
.pbtn--fav:hover { color: #e3262f; }
.pbtn[hidden] { display: none; }

/* Laufendes Video in der Videoübersicht markieren */
.video-card.is-current .video-card__media { outline: 2px solid var(--accent); outline-offset: -2px; }
.player__video-inner {
    width: min(100% - 2 * var(--gutter), calc(56vh * 16 / 9));
    margin-inline: auto;
    padding: 6px 0 10px;
}
.player__video-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 6px 4px; }
.player__video-title { min-width: 0; overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.player__video-close,
.videobox__close {
    flex: none;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: var(--muted);
    transition: color .2s, background .2s;
}
.player__video-close svg, .videobox__close svg { width: 22px; height: 22px; fill: currentColor; }
.player__video-close:hover, .videobox__close:hover { color: var(--text); background: var(--surface-2); }
.player__video-frame { aspect-ratio: 16 / 9; background: #000; }
.player__video-frame iframe,
.player__video-frame video { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 760px) {
    .player__video-inner { padding: 4px 0 0; }
    .player__video-head { padding: 0 4px 4px 12px; }
}

/* ---------------------------------------------------------------
 * Handy: kein Player unten – stattdessen ein runder Player-Knopf oben in der Navigation.
 * Sein Ring ist die Zeitleiste. Tippen öffnet den Player im Vollbild; zugeklappt läuft die Musik weiter.
 * ------------------------------------------------------------ */

.player-mini,
.player__close { display: none; }

@media (max-width: 719px) {
    .player-mini {
        --p: 0;
        position: relative;
        flex: none;
        width: 40px; height: 40px;
        display: grid; place-items: center;
        border-radius: 50%;
        color: var(--text);
        /* Ring = Fortschritt des Songs, im Uhrzeigersinn von oben */
        background: conic-gradient(var(--accent) calc(var(--p) * 1turn), var(--line) 0);
        transition: transform .15s;
    }
    .player-mini::before {
        content: "";
        position: absolute; inset: 3px;
        border-radius: 50%;
        background: var(--nav-bg);
    }
    .player-mini svg { position: relative; width: 18px; height: 18px; fill: currentColor; }
    .player-mini .i-play { margin-left: 2px; } /* optisch mittig */
    .player-mini .i-pause,
    .player-mini.is-playing .i-play { display: none; }
    .player-mini.is-playing .i-pause { display: block; }
    .player-mini.is-playing { color: var(--accent); }
    .player-mini:active { transform: scale(.94); }
    .site-header__inner > .player-mini { margin-left: auto; }
    .site-header__inner > .player-mini + .user-link { margin-left: 0; }

    /* Der Player selbst: zugeklappt unsichtbar (spielt im Hintergrund weiter), aufgeklappt Vollbild */
    .player {
        position: fixed; inset: 0; z-index: 60;
        height: 100vh; height: 100dvh;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
        padding: calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
        overflow-y: auto;
        background: var(--player-bg);
        border-top: 0;
        backdrop-filter: none; -webkit-backdrop-filter: none;
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .4s var(--ease), visibility 0s linear .4s;
    }
    html.is-player-open .player { transform: none; visibility: visible; transition: transform .4s var(--ease), visibility 0s; }
    html.is-player-open { overflow: hidden; }

    .player__close {
        /* Mittig, 30 px über dem Cover (bzw. dem Video): 20 px Abstand der Spalte + 10 px */
        order: -1; flex: none;
        margin-bottom: 10px;
        width: 44px; height: 44px;
        display: grid; place-items: center;
        border-radius: 50%;
        color: var(--text);
    }
    .player__close svg { width: 26px; height: 26px; fill: currentColor; }
    .player__close:active { background: var(--surface-2); }

    /* Reihenfolge im Vollbild: Video, Cover mit Titel, Zeitleiste, Steuerung, Extras */
    .player__inner { display: contents; }
    .player__video { order: 0; }
    .player__meta { order: 1; flex-direction: column; text-align: center; gap: 14px; width: 100%; }
    .player__bar { order: 2; }
    .player__controls { order: 3; gap: 26px; }
    .player__extra { order: 4; justify-content: center; flex-wrap: wrap; gap: 12px; }

    .player__cover { width: min(76vw, 40vh); height: min(76vw, 40vh); border-radius: 14px; box-shadow: 0 18px 48px rgba(0, 0, 0, .45); }
    .player__text { align-items: center; max-width: 100%; }
    .player__title { font-size: 1.3rem; white-space: normal; }
    .player__artist { font-size: .95rem; }

    .player__bar { position: relative; top: auto; left: auto; right: auto; width: 100%; height: 24px; }
    .player__bar::before, .player__fill { top: 10px; height: 4px; border-radius: 2px; }
    .player__fill::after { transform: scale(1); }

    .pbtn { width: 46px; height: 46px; }
    .pbtn svg { width: 24px; height: 24px; }
    .pbtn--vswitch { width: auto; height: 38px; padding: 0 16px 0 12px; font-size: .85rem; }
    .pbtn--vswitch svg { width: 19px; height: 19px; }
    .pbtn--play { width: 72px; height: 72px; }
    .pbtn--play svg { width: 30px; height: 30px; }
    .pbtn--prev { display: grid; }
    .player__time { display: block; width: 100%; margin: 0; text-align: center; order: -1; }
    .pbtn--mute, .player__vol { display: none; }

    /* Video läuft oben im Vollbild-Player statt darüber */
    .player__video { position: static; width: 100%; box-shadow: none; border: 0; visibility: hidden; display: none; clip-path: none; }
    .player.has-video .player__video { display: block; visibility: visible; clip-path: none; }
    .player.has-video .player__cover { display: none; }
    .player__video-inner { width: 100%; padding: 0; }
    html.is-video body::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}