/*
 * music2-canonical-card.css — Zusatz-CSS der zentralen Musikkarten-Komponente.
 * Die eigentliche Karussell-/Card-Optik kommt aus den globalen music-card-redesign-*.css
 * (read-only geladen). Hier NUR modul-spezifische Ergänzungen:
 *   - filterbewusstes Verstecken der Detailkarte (muss die CSS-only :checked-Reveal schlagen)
 *   - Empty-State
 * KEIN :root, KEIN Override von .scl-music-card* (Regressionsschutz für /musik/).
 *
 * ULTRACODE_XHI_MUSIK2_CANONICAL_MUSICCARD_MODULE_CAROUSEL_PORTAL_LOCAL_001
 */

/* Gefilterte Detailkarte hart ausblenden — schlägt die positionsbasierte
 * `.scl-mc-carousel__input:nth-of-type(N):checked ~ ... __detail:nth-of-type(N){display:block}`
 * Reveal-Regel (höhere Spezifität nötig → !important). JS hält die aktive Auswahl
 * ohnehin auf einer sichtbaren Karte; dies ist der defensive Sofort-Hide. */
.scl-mc-carousel__detail.is-m2mc-filtered { display: none !important; }

/* Gefilterte Mini-Kachel hart ausblenden. Das [hidden]-Attribut allein genügt NICHT:
 * `.scl-mc-carousel__mini{display:flex}` hat gleiche Spezifität wie das UA-`[hidden]{display:none}`
 * und gewinnt per Quellreihenfolge. Daher expliziter Override mit !important. */
.scl-mc-carousel__mini[hidden] { display: none !important; }

/* SEARCH_RESULT_PLACEMENT_V2 (DEFECT 4): Gleiches Spezifitäts-Problem für die statische Karussell-Basis.
 * `hideStatic()` (music2-canonical-card.js) setzt bar.hidden/stackEl.hidden beim Eintritt in die
 * Feed-/Suchansicht. Aber `.scl-mc-carousel__bar{display:flex}` und `.scl-mc-carousel__stack{display:block}`
 * (music-card-redesign-renderer.css) sind Author-Regeln und schlagen das UA-`[hidden]{display:none}`
 * (Origin-Verlust, unabhängig von Spezifität). Folge: die bereits aktive Detailkarte blieb sichtbar und
 * der angehängte Feed-Ergebnisblock erschien DARUNTER (zweites Karussell). Harter Override → hideStatic()
 * greift, der Feed-Block ERSETZT die kanonische Karussell-Position (Ergebnis-Strip oben, Top-Treffer als
 * aktive Karte darunter), nichts steht mehr unter der alten Detailkarte. */
.scl-mc-carousel__bar[hidden] { display: none !important; }
.scl-mc-carousel__stack[hidden] { display: none !important; }

/* Modul-Wrapper: zentriert wie /musik/, etwas Luft nach unten. */
.scl-music-card-redesign-public--m2mc { width: 100%; }
.scl-music-card-redesign-public--m2mc .scl-mc-carousel { margin: 0 auto; }

/* ── Host-Chrome (kontextfähig) ──────────────────────────────────────────────
 * .scl-m2mc-host--musik2     = Dashboard-Fläche (/musik-2/)
 * .scl-m2mc-host--portal     = Portal-Einbettung
 * .scl-m2mc-host--transparent = KEIN eigener Vollflächen-Hintergrund (Portal-Grafik bleibt sichtbar)
 * Es wird NIE ein harter eigener Hintergrund gesetzt → kein lila Overlay. */
.scl-m2mc { width: 100%; }
.scl-m2mc-host--transparent { background: transparent !important; box-shadow: none; }

/* Portal-Section-Wrapper (ersetzt die alte .scl-sp-music-Gradient-Fläche). Nur Abstand. */
.scl-sp-music2 { padding: 24px 0; background: transparent; }

/* Kopfzeile: Titel links, Filter rechts. */
.scl-m2mc-head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 12px 16px; flex-wrap: wrap; margin: 0 auto 12px; max-width: 760px;
}
.scl-m2mc-head__titles { min-width: 0; }
.scl-m2mc-head__title { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.2; color: #fff; }
.scl-m2mc-head__subtitle { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.4; color: rgba(255,255,255,0.62); }

/* Filterleiste (Singles/Alben + DE/EN + Archiv + Suche) — wiederverwendbar in beiden Kontexten.
   FILTER_UNIFIED_SEARCH_V2 (DEFECT 1): EINE einzige nowrap-Zeile mit ALLEN Steuerungen. Der Container
   stapelt nur die (im Suchmodus mit Eingabe sichtbare) Archiv-Brücke unter die Zeile. Die Toolbar-Zeile
   selbst verkleinert sich responsiv (clamp) statt umzubrechen → nie zweizeilig, kein internes Umbrechen,
   kein horizontaler Overflow, kein Clipping. Grössen bewusst kompakt, damit alle 7 Controls bei 320px passen. */
.scl-m2mc-filters {
	display: flex; flex-direction: column; flex-wrap: nowrap;
	gap: clamp(4px, 1.4vw, 8px); min-width: 0; max-width: 100%;
}
.scl-m2mc-filters__row {
	display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start;
	gap: clamp(3px, 1.3vw, 7px); min-width: 0; max-width: 100%;
}
.scl-m2mc-toggle {
	display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px;
	background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
	flex: 0 1 auto; min-width: 0;
}
.scl-m2mc-pill {
	border: 0; background: transparent; color: rgba(255,255,255,0.82);
	font-weight: 700; font-size: clamp(0.66rem, 2.2vw, 0.8rem); line-height: 1;
	padding: 6px clamp(7px, 2.3vw, 13px); white-space: nowrap;
	border-radius: 999px; cursor: pointer; transition: background 160ms ease, color 160ms ease;
}
.scl-m2mc-pill:hover:not(.is-disabled) { color: #fff; }
.scl-m2mc-pill.is-active { background: linear-gradient(135deg, #ff7eb3, #8c5cff); color: #fff; }
.scl-m2mc-pill.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* SCL_PORTAL_NAV_..._V1 §11: Sprach-Filter = drei kleine RUNDE Buttons (DE · All · EN), Default „All".
   Kein Segmented-Pill-Bar-Hintergrund; freistehende runde Buttons gleicher Grösse, Touch-Target >=44px,
   Aktiv-State nicht nur farblich (Rand + Ring zusätzlich zur Füllung). Nur die Sprach-Gruppe betroffen —
   die Typ-Gruppe (Singles/Alben) behält ihr bestehendes Pill-Bar-Aussehen. */
.scl-m2mc-toggle--lang { background: transparent; border: 0; padding: 0; gap: clamp(2px, 1vw, 5px); flex: 0 1 auto; min-width: 0; }
.scl-m2mc-toggle--lang .scl-m2mc-pill {
	/* DEFECT 1: kompakte runde Sprach-Buttons, damit die EINE Zeile bis 320px passt (statt 40–44px). */
	width: clamp(30px, 8.6vw, 38px); height: clamp(30px, 8.6vw, 38px);
	min-width: 30px; min-height: 30px; padding: 0; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.05);
	font-size: clamp(0.64rem, 2.3vw, 0.76rem);
}
.scl-m2mc-toggle--lang .scl-m2mc-pill:hover:not(.is-disabled) { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); }
.scl-m2mc-toggle--lang .scl-m2mc-pill.is-active {
	background: linear-gradient(135deg, #ff7eb3, #8c5cff); color: #fff;
	border-color: #fff; box-shadow: 0 0 0 2px rgba(140,92,255,0.55);
}
.scl-m2mc-toggle--lang .scl-m2mc-pill:focus-visible { outline: 3px solid #8c5cff; outline-offset: 2px; }

@media (max-width: 560px) {
	.scl-m2mc-head { justify-content: center; text-align: center; }
	.scl-m2mc-head__titles { width: 100%; }
}

/* Empty-State (0 Karten / Portal ohne Artist-ID). Modul-scoped, dezent. */
.scl-m2mc-empty {
	max-width: 520px;
	margin: 1.5rem auto;
	padding: 1.4rem 1.2rem;
	text-align: center;
	border: 1px dashed rgba(255, 255, 255, 0.16);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.03);
}
.scl-m2mc-empty__title { margin: 0 0 0.35rem; font-weight: 700; font-size: 1.02rem; color: rgba(255, 255, 255, 0.92); }
.scl-m2mc-empty__text { margin: 0; font-size: 0.88rem; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }

/* Genau eine sichtbare Karte → Detail-Cardnav-Pfeile ausblenden (kein Selbst-Zyklus). */
.scl-mc-carousel.is-m2mc-single .scl-mc-carousel__cardnav { display: none; }

/* Album → Song-Navigation: vertikale linke Back-Rail (kein horizontaler Zeilen-Versatz —
 * die Detailkarte bleibt an Position, die Rail liegt absolut links daneben). */
.scl-mc-carousel__detail.is-m2mc-song-detail { position: relative; padding-left: 56px; }
.scl-m2mc-backrail {
	position: absolute; left: 8px; top: 8px; bottom: 8px; width: 40px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px;
	cursor: pointer; padding: 10px 0; z-index: 3;
	transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.scl-m2mc-backrail__arrow { font-size: 1.6rem; line-height: 1; font-weight: 700; }
.scl-m2mc-backrail__label {
	writing-mode: vertical-rl; transform: rotate(180deg);
	font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.scl-m2mc-backrail:hover { background: linear-gradient(180deg, rgba(255, 126, 179, 0.28), rgba(140, 92, 255, 0.28)); color: #fff; transform: translateX(-2px); }
.scl-m2mc-backrail:focus-visible { outline: 2px solid #ff7eb3; outline-offset: 2px; color: #fff; }
@media (prefers-reduced-motion: reduce) {
	.scl-m2mc-backrail { transition: none; }
	.scl-m2mc-backrail:hover { transform: none; }
}
@media (max-width: 560px) {
	/* Mobile: schmalere Rail, weniger Innenabstand der Karte. */
	.scl-mc-carousel__detail.is-m2mc-song-detail { padding-left: 44px; }
	.scl-m2mc-backrail { width: 32px; left: 6px; }
	.scl-m2mc-backrail__arrow { font-size: 1.3rem; }
	.scl-m2mc-backrail__label { font-size: 0.62rem; }
}
/* Klickbare Song-Zeile (öffnet die Song-Detailkarte in-page). */
.scl-music-card__song-item.scl-m2mc-song--nav { cursor: pointer; }
.scl-music-card__song-item.scl-m2mc-song--nav:hover { background: rgba(255, 255, 255, 0.05); border-radius: 8px; }

/* Gefilterte Leerauswahl (Filter ohne Treffer). */
.scl-mc-carousel__noresults {
	margin: 1rem auto 0;
	text-align: center;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.62);
}
.scl-mc-carousel__noresults[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
 * BUILD_MUSIK_PORTAL_DOWNLOAD_PREVIEW_LAYOUT_PARITY_001
 * Kanonische Download-/Preview-Karten-Styles — EINZIGE Quelle für ALLE Flächen
 * (/musik/, /musik-2/, Portal/Startseite). Vorher lagen diese Regeln nur in der
 * /musik-2/-PAGE-CSS (music2.css), die das Portal NICHT lädt → dort erschien der
 * Download-Button als bloßer Textlink + die typabhängige Kartenoptik fehlte.
 * Diese Datei (music2-canonical-card.css) wird vom Canonical-Card-Modul auf jeder
 * Fläche eingebunden (head_links) → identische Darstellung.
 *
 * Selbst-tragender Variablen-Kontext: die --m2-*-Tokens (sonst nur unter .scl-m2)
 * werden hier direkt am Download-Block definiert, damit die Karte unabhängig vom
 * Seiten-Ancestor (Portal hat kein .scl-m2) korrekt rendert. Gleiche Fallback-Kette
 * wie .scl-m2 → keine /musik/-Regression. KEIN :root, KEIN Override von .scl-music-card*.
 * ════════════════════════════════════════════════════════════════════════════ */
.scl-m2-downloads {
	--m2-accent: var(--accent, #a78bfa);
	--m2-accent-2: var(--accent-hover, #c4b5fd);
	--m2-text: var(--text, #e8e8ec);
	--m2-muted: var(--muted, rgba(255,255,255,0.6));
	--m2-card-bg: var(--card-bg, rgba(255,255,255,0.04));
	--m2-card-border: var(--card-border, rgba(255,255,255,0.10));
	display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.scl-m2-download { text-decoration: none; font-size: .8rem; font-weight: 600; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--m2-card-border); color: var(--m2-text); border-left: 3px solid var(--m2-accent); }

/* ── Preview-vor-Download (mp3/wav/ringtone/video): nativer Player zuerst, getrennter Download-Button ── */
.scl-m2-downloads--preview { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 12px; margin-top: 10px; }
.scl-m2-dl { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--m2-card-border); border-left: 4px solid var(--m2-dl-a, var(--m2-accent)); border-radius: 12px; background: var(--m2-card-bg); }
/* Kategorie-Akzente: jede zeitbasierte Download-/Preview-Kategorie eine eigene Farbe. */
.scl-m2-dl--mp3      { --m2-dl-a: var(--mc-color-accent-primary, #ff7eb3);   --m2-dl-b: var(--accent, #ff4fd8); }            /* Hörprobe: Pink → Magenta */
.scl-m2-dl--ringtone { --m2-dl-a: #ffb347;                                   --m2-dl-b: var(--mc-color-accent-primary, #ff7eb3); } /* Klingelton: Gold → Pink */
.scl-m2-dl--wav      { --m2-dl-a: var(--accent-hover, #34d6e6);              --m2-dl-b: #3b82f6; }                            /* WAV: Türkis → Blau */
.scl-m2-dl--video    { --m2-dl-a: var(--mc-color-accent-secondary, #8c5cff); --m2-dl-b: var(--accent-hover, #6ea8ff); }      /* Video: Violett → Cyan */
.scl-m2-dl--file     { --m2-dl-a: #57f287;                                   --m2-dl-b: var(--accent-hover, #22d3c5); }      /* Sonstige: Grün → Türkis */
.scl-m2-dl__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.scl-m2-dl__title { font-size: .9rem; font-weight: 600; color: var(--m2-text); }
.scl-m2-dl__cue { font-size: .75rem; color: var(--m2-muted); }
.scl-m2-dl__player { display: block; }
.scl-m2-dl__player--audio { width: 100%; max-width: 460px; height: 40px; }
.scl-m2-dl__player--video { width: 100%; max-width: 100%; max-height: 300px; height: auto; border-radius: 10px; background: #000; }
/* Regenbogen-/Preset-Download-Button: lebendiger Gradient aus den Kategorie-/Preset-Akzenten, dunkler Text für Kontrast. */
.scl-m2-dl__btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: .8rem; font-weight: 700; padding: 8px 16px; border-radius: 999px; border: 0;
	color: #0b0b12;
	background-image: linear-gradient(0deg, rgba(255,255,255,0.12), rgba(255,255,255,0.12)), linear-gradient(95deg, var(--m2-dl-a, var(--m2-accent)) 0%, var(--m2-dl-b, var(--m2-accent-2, var(--accent-hover, #7cf7ff))) 100%);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--m2-dl-a, var(--m2-accent)) 32%, transparent);
	transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.scl-m2-dl__btn:hover { transform: translateY(-1px); filter: brightness(1.06) saturate(1.05); box-shadow: 0 4px 16px color-mix(in srgb, var(--m2-dl-a, var(--m2-accent)) 45%, transparent); }
.scl-m2-dl__btn:focus-visible { outline: 2px solid var(--m2-text); outline-offset: 2px; }
.scl-m2-dl__btn-label { text-shadow: 0 1px 0 rgba(255,255,255,0.28); }
.scl-m2-dl__btn-icon { font-size: 1rem; line-height: 1; }
@media (max-width: 560px) {
	.scl-m2-dl__player--audio { max-width: 100%; }
	.scl-m2-dl__player--video { max-height: 70vh; }
	.scl-m2-dl__btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.scl-m2-dl__btn { transition: none; }
	.scl-m2-dl__btn:hover { transform: none; filter: none; }
}

/* ── FIX_MUSIK_CANONICAL_FUTURE_RELEASE_STATUS: Upcoming-Release-State ──────────
   Eigener State, UNABHÄNGIG vom CSS-only Auswahl-State (rosa Rahmen). Doppelte
   feine Kontur (Outline außen + Inset-Shadow innen) + weicher Glow + Glaseffekt.
   Keine Animation. Nur kanonische Musikseite (Modul rendert die Klasse nur dort). */
.scl-mc-carousel__mini--upcoming {
	position: relative;
	background: rgba(150,110,255,0.10);
	border-radius: 12px;
	outline: 1px solid rgba(170,120,255,0.45);
	outline-offset: 2px;
	box-shadow: 0 0 0 1px rgba(110,230,220,0.30) inset, 0 0 14px rgba(150,90,230,0.30);
}
.scl-mc-carousel__mini-date--upcoming {
	color: #d9c2ff;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.scl-mc-carousel__detail--upcoming {
	outline: 1px solid rgba(170,120,255,0.35);
	outline-offset: 3px;
	box-shadow: 0 0 0 1px rgba(110,230,220,0.22) inset, 0 0 22px rgba(150,90,230,0.18);
	border-radius: 16px;
	background: rgba(150,110,255,0.05);
}
/* Auswahl-State + Upcoming koexistieren: Auswahlrahmen bleibt, Upcoming-Glow zusätzlich. Kein doppelter
   unlesbarer Rahmen — Auswahl nutzt border/background, Upcoming nutzt outline + box-shadow. */
@media (prefers-reduced-motion: reduce) {
	.scl-mc-carousel__mini--upcoming, .scl-mc-carousel__detail--upcoming { transition: none; }
}

/* FIX_094O_RESTORE_CLASSIC: gleichwertiger fünfter Filterbutton „Musikarchiv" (sichtbarer Link
   → /musik/?view=archive). Steht direkt in .scl-m2mc-filters neben den Toggle-Gruppen, daher
   eigene Pill-Chrome (die Toggle-Gruppe trägt ihren Gruppen-Hintergrund selbst). */
.scl-m2mc-pill--archive {
	display: inline-flex; align-items: center; text-decoration: none;
	border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06);
}
.scl-m2mc-pill--archive:hover { color: #fff; border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.10); }
/* Schmaler Icon-only Button (Archiv + Such-Umschalter): quadratisch, in der Filterzeile ausgerichtet, mobil
   stabil. DEFECT 1: responsiv verkleinernd (30–34px) für den One-Row-Fit bei 320px. */
.scl-m2mc-pill--icon {
	flex: 0 0 auto; box-sizing: border-box;
	width: clamp(30px, 8.6vw, 34px); height: clamp(30px, 8.6vw, 34px); min-width: 30px;
	padding: 0; align-items: center; justify-content: center; color: rgba(255,255,255,0.82);
}
.scl-m2mc-pill--icon .scl-m2mc-pill__ico { display: block; width: 18px; height: 18px; }
.scl-m2mc-pill--icon:hover { color: #fff; }
.scl-m2mc-pill--archive:focus-visible { outline: 2px solid #8c5cff; outline-offset: 2px; }
/* Suchmodus als einzeilige Morph-Leiste: „?"/Lupe ↔ „✕" links, dahinter ein Inline-Suchfeld
   mit Pfeil-Submit. Gleiche Höhe (34px) wie die Filterzeile → KEIN Layoutsprung, keine 2. Zeile. */
.scl-m2mc-filters__groups { display: contents; }
.scl-m2mc-filters__groups[hidden] { display: none; }
.scl-m2mc-pill--icon .scl-m2mc-ico--x { display: none; }
.is-m2mc-searching .scl-m2mc-pill--icon .scl-m2mc-ico--search { display: none; }
.is-m2mc-searching .scl-m2mc-pill--icon .scl-m2mc-ico--x { display: block; }
/* FILTER_SEARCH_UX_V1 (DEFECT 2): Der aktive Suchmodus muss deutlich als AKTIVES Suchfeld lesbar sein
   — nicht wie ein weiterer passiver Toggle-Container. Prominenz über die zentralen Akzent-Tokens
   (#8c5cff / #ff7eb3, wie is-active-Pills): kräftiger Akzent-Rand, dezenter Verlaufs-BG, Fokus-Glow,
   Inline-Lupe, höheres Feld. Kein neues Farbsystem, keine Hardcodes ausserhalb der bestehenden Palette. */
.scl-m2mc-search {
	display: inline-flex; align-items: center; gap: 7px; flex: 1 1 auto; min-width: 0;
	height: 40px; box-sizing: border-box; padding: 0 6px 0 14px; border-radius: 999px;
	border: 1.5px solid rgba(140,92,255,0.65);
	background: linear-gradient(180deg, rgba(140,92,255,0.16), rgba(140,92,255,0.06));
	box-shadow: 0 0 0 3px rgba(140,92,255,0.14);
	transition: border-color 140ms ease, box-shadow 140ms ease;
}
.scl-m2mc-search[hidden] { display: none; }
.scl-m2mc-search:focus-within { border-color: #a98bff; box-shadow: 0 0 0 3px rgba(140,92,255,0.32); }
.scl-m2mc-search__ico { flex: 0 0 auto; width: 18px; height: 18px; color: #cbb8ff; }
.scl-m2mc-search__input {
	flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 0;
	color: #fff; font-size: 0.9rem; line-height: 1.2; font-family: inherit;
	-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
/* CARD_POLISH_IOS_V1: iOS Safari zoomt beim Fokus auf Inputs mit font-size < 16px. Auf Touch-Geräten
   (alle iPhones/iPads) das Suchfeld auf 16px heben → KEIN Autozoom, KEINE Karten-/Cover-Skalierung.
   Kein Viewport-Meta-Eingriff, Browser-Zoom bleibt erlaubt. Desktop (Maus) bleibt kompakt bei 0.82rem. */
@media (pointer: coarse) {
	.scl-m2mc-search__input { font-size: 16px; line-height: 1.2; }
}
.scl-m2mc-search__input:focus { outline: none; }
.scl-m2mc-search__input::placeholder { color: rgba(233,224,255,0.72); }
.scl-m2mc-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.scl-m2mc-search__submit {
	flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #ff7eb3, #8c5cff); color: #fff;
}
.scl-m2mc-search__submit:hover { opacity: 0.9; }
.scl-m2mc-search__submit:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
/* FULL_CATALOG_SEARCH_V1: Brücke zur vollständigen Archiv-Suche (gesamte lokale Bibliothek). Direkter
   Spaltenkind von .scl-m2mc-filters (flex-direction:column) → sitzt unter der EINEN Toolbar-Zeile, nur im
   Suchmodus mit Eingabe sichtbar (kein Filter-Control, daher zählt sie nicht als zweite Filterzeile). */
.scl-m2mc-searchall {
	align-self: flex-start; max-width: 100%; margin: 2px 2px 0; padding: 0; font-size: 0.78rem; line-height: 1.3;
	color: #cbb8ff; text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.scl-m2mc-searchall[hidden] { display: none; }
.scl-m2mc-searchall:hover { color: #fff; text-decoration: underline; }
.scl-m2mc-searchall:focus-visible { outline: 2px solid #8c5cff; outline-offset: 2px; border-radius: 4px; }

/* UNIFICATION_T1: EIN Spotify-Player in der großen Detailkarte (Click-to-Load, kein Iframe pro Mini).
   Nur die aktive Karte kann geladen sein (JS-Lifecycle: reset + media-pause beim Kartenwechsel). */
/* CONSENT_PLACEMENT_V1: EIN kanonischer Spotify-Player INNERHALB der Detailkarte, direkt unter
   Titel/Artist/Meta und ÜBER den Reitern. Externe-Medien-Consent-Fläche (Ja/Nein + „merken" + Widerruf).
   Volle Detailkarten-Breite, responsiv, reduced-motion-freundlich. */
/* CARD_POLISH_GAP_V1: leerer public-content-Div (nur release_date-Meta → 0 Inhalt) darf keinen
   vertikalen Leerraum erzeugen. Whitespace-frei emittiert → :empty greift. Nicht-leere Inhalte unberührt.
   Höhere Spezifität als die Redesign-Basisregel (.scl-music-card.scl-music-card--redesign …) via 4 Klassen. */
.scl-music-card__public-content:empty { display: none; margin: 0; padding: 0; min-height: 0; }
.scl-music-card.scl-music-card--redesign .scl-music-card__public-content:empty { display: none; margin: 0; padding: 0; min-height: 0; }
/* CARD_POLISH_GAP_V1 + SPACING_V1: Player kompakt oben (Titel→Player) UND unten (Player→Reiter). Root-Cause
   belegt (gemessen: .scl-music-card__content Flex-Gap 16.8px; Player→Tabs war 38px = mb16 + gap16.8 + tabs-mt5.6).
   Symmetrisch -5px oben/unten → Titel→Player ~12px und Player→Reiter ~12px (mit tabsystem-mt=0, s. u.). Gilt
   für Consent-Fläche UND geladenes Iframe gleich (Player-Block-Margin, unabhängig vom Innenzustand). */
.scl-m2mc-player { width: 100%; margin: -5px 0 -5px; box-sizing: border-box; }
@media (max-width: 767px) { .scl-m2mc-player { margin: -6px 0 -6px; } }
/* SPACING_V1: den 0.35rem-Margin-Top der Reiter (music-card-redesign-renderer.css:1248) NUR im kanonischen
   m2mc-Host neutralisieren, damit Player→Reiter denselben kompakten Abstand wie Titel→Player hat. */
.scl-m2mc .scl-music-card-detail-tabsystem { margin-top: 0; }

/* SPACING_AND_MINIMAL_SHARE_ICON_V1: minimalistisches Icon-only Share/Copy-Utility OBEN LINKS im Badge-/
   Meta-Bereich (erstes Kind von .scl-music-card__badges → links vom Datum-Badge). Klein, unaufdringlich,
   kein Text, kein Menü. Feedback „Link kopiert" als kurzer Tooltip (::after) + SR-only aria-live. */
.scl-m2mc-shareico {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; padding: 0; flex: 0 0 auto; cursor: pointer;
	border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06);
	color: rgba(255,255,255,0.78); -webkit-appearance: none; appearance: none;
}
.scl-m2mc-shareico:hover { background: rgba(255,255,255,0.13); color: #fff; border-color: rgba(255,255,255,0.32); }
.scl-m2mc-shareico:focus-visible { outline: 2px solid #8c5cff; outline-offset: 2px; }
.scl-m2mc-shareico__svg { display: block; }
/* SR-only Live-Feedback (Screenreader) */
.scl-m2mc-shareico__sr {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/* Visuelles Tooltip-Feedback „Link kopiert" (nur transient via .is-copied) */
.scl-m2mc-shareico::after {
	content: attr(data-m2mc-shareico-tip); position: absolute; left: 50%; bottom: calc(100% + 6px);
	transform: translateX(-50%); white-space: nowrap; padding: 4px 9px; border-radius: 8px;
	background: #1c1626; border: 1px solid rgba(255,255,255,0.16); color: #fff; font-size: 0.72rem;
	line-height: 1; opacity: 0; pointer-events: none; transition: opacity 120ms ease; z-index: 30;
}
.scl-m2mc-shareico.is-copied::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .scl-m2mc-shareico::after { transition: none; } }
/* Fallback-Zeile, falls keine Badges gerendert wurden (Icon steht dann allein oben links). */
.scl-music-card__badges.scl-m2mc-shareico-solo { display: flex; }
/* MEMBER_LYRICS §3: Lyrics-Gate-Mount ersetzt das Default-Empty-State im Lyrics-Panel (member-gated). */
.scl-m2mc-lyrics-gate ~ .scl-music-card__empty-state--lyrics { display: none; }
.scl-m2mc-lyrics-gate { font-size: 0.92rem; line-height: 1.6; color: rgba(255,255,255,0.86); }
.scl-m2mc-lyrics-gate__msg { margin: 0 0 10px; color: rgba(255,255,255,0.68); }
.scl-m2mc-lyrics-gate__actions { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.scl-m2mc-lyrics-gate__login, .scl-m2mc-lyrics-gate__register {
	display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; text-decoration: none;
	font-size: 0.85rem; font-weight: 600; border: 1px solid rgba(255,255,255,0.2); color: #fff;
}
.scl-m2mc-lyrics-gate__login { background: linear-gradient(135deg,#ff7eb3,#8c5cff); border-color: transparent; }
.scl-m2mc-lyrics-gate__register { background: rgba(255,255,255,0.06); }
.scl-m2mc-lyrics-gate__login:hover { opacity: 0.92; }
.scl-m2mc-lyrics-gate__register:hover { background: rgba(255,255,255,0.12); }
/* Nachgeladener Member-Text: Zeilenumbrüche erhalten (Klartext, esc_html im JS via textContent). */
.scl-m2mc-lyrics-gate__text { white-space: pre-wrap; word-break: break-word; margin: 0; }
.scl-m2mc-lyrics-gate.is-m2mc-loading { opacity: 0.6; }
/* MEMBER_LYRICS §15: Off-Page-Host — nachgeladene Detailkarte (Deeplink außerhalb der initialen Slots). */
.scl-m2mc-offpage[hidden] { display: none; }
.scl-m2mc-offpage .scl-m2rt-detail { display: block; }
.scl-m2mc-offpage__status { text-align: center; padding: 24px 0; color: rgba(255,255,255,0.6); }
/* FINAL_UI §20: sichtbares Sprach-Badge in der Badge-/Meta-Zeile (nicht über dem Titel). Dezenter Chip. */
.scl-m2mc-lang-badge {
	display: inline-flex; align-items: center; flex: 0 0 auto; gap: 4px;
	padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; line-height: 1;
	letter-spacing: 0.01em; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.07);
	color: rgba(255,255,255,0.82); white-space: nowrap;
}
.scl-m2mc-lang-badge__label { display: block; }
.scl-music-card__badges.scl-m2mc-lang-badge-solo { display: flex; }
/* Deeplink-Zielkarte (über op=detail geladen). Review-Fix: die op=detail-Karte trägt
   .scl-m2rt-detail.scl-mc-carousel__detail und würde sonst von der globalen Regel
   .scl-mc-carousel__detail{display:none} (Karussell-Radio-Reveal) versteckt — hier sichtbar schalten
   (Spezifität 0,2,0 schlägt 0,1,0), analog zum Archiv-Detail-Host. */
.scl-m2mc-deeplink { margin: 0 0 14px; }
.scl-m2mc-deeplink[hidden] { display: none; }
.scl-m2mc-deeplink .scl-mc-carousel__detail,
.scl-m2mc-deeplink .scl-m2rt-detail { display: block; }
.scl-m2mc-player__consent {
	width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05);
}
.scl-m2mc-player__consent[hidden] { display: none; }
.scl-m2mc-player__provider { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.scl-m2mc-player__provider-dot { width: 10px; height: 10px; border-radius: 50%; background: #1db954; display: inline-block; }
.scl-m2mc-player__provider-name { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em; color: rgba(255,255,255,0.82); }
.scl-m2mc-player__hint {
	margin: 4px 0 10px; font-size: 0.76rem; line-height: 1.45; color: rgba(255,255,255,0.62); max-width: 62ch;
}
.scl-m2mc-player__hint[hidden] { display: none; }
.scl-m2mc-player__remember {
	display: flex; align-items: flex-start; gap: 9px; margin: 0 0 12px;
	font-size: 0.78rem; line-height: 1.35; color: rgba(255,255,255,0.78); cursor: pointer;
}
.scl-m2mc-player__remember input { width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 auto; cursor: pointer; accent-color: #1db954; }
.scl-m2mc-player__remember input:focus-visible { outline: 2px solid #8c5cff; outline-offset: 2px; }
.scl-m2mc-player__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.scl-m2mc-player__btn {
	display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
	padding: 10px 18px 10px 15px; border-radius: 999px; border: 1px solid transparent;
	font-family: inherit; font-size: 0.86rem; font-weight: 600; line-height: 1;
}
.scl-m2mc-player__btn[hidden] { display: none; }
.scl-m2mc-player__btn--primary { background: linear-gradient(135deg, #1db954, #159c46); color: #fff; }
.scl-m2mc-player__btn--primary:hover { opacity: 0.92; }
.scl-m2mc-player__btn--decline {
	background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.22);
	padding: 10px 18px;
}
.scl-m2mc-player__btn--decline:hover { background: rgba(255,255,255,0.14); }
.scl-m2mc-player__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.scl-m2mc-player__icon { font-size: 0.8em; line-height: 1; }
.scl-m2mc-player__legal { margin: 11px 0 0; font-size: 0.74rem; }
.scl-m2mc-player__legal-link { color: rgba(255,255,255,0.7); text-decoration: underline; }
.scl-m2mc-player__legal-link:hover { color: #fff; }
.scl-m2mc-player__legal-link:focus-visible { outline: 2px solid #8c5cff; outline-offset: 2px; }
.scl-m2mc-player__declined {
	width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 12px;
	border: 1px dashed rgba(255,255,255,0.2); background: rgba(255,255,255,0.03);
	font-size: 0.8rem; color: rgba(255,255,255,0.72);
}
.scl-m2mc-player__declined[hidden] { display: none; }
.scl-m2mc-player__reopen {
	margin-left: 6px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
	border: 1px solid rgba(255,255,255,0.28); background: transparent; color: inherit; font: inherit; font-size: 0.78rem;
}
.scl-m2mc-player__reopen:hover { background: rgba(255,255,255,0.08); }
.scl-m2mc-player__reopen:focus-visible { outline: 2px solid #8c5cff; outline-offset: 2px; }
.scl-m2mc-player__frame { width: 100%; border: 0; border-radius: 12px; display: block; margin-top: 4px; }
/* Live-Region visuell verborgen, für Screenreader lesbar (Lade-/Fehlerstatus). */
.scl-m2mc-player__status {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.scl-m2mc-player__revoke { margin-top: 8px; }
.scl-m2mc-player__revoke-btn {
	padding: 5px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.74rem;
	border: 1px solid rgba(255,255,255,0.22); background: transparent; color: rgba(255,255,255,0.65);
}
.scl-m2mc-player__revoke-btn:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.scl-m2mc-player__revoke-btn:focus-visible { outline: 2px solid #8c5cff; outline-offset: 2px; }
@media (max-width: 480px) {
	.scl-m2mc-player__actions { flex-direction: column; align-items: stretch; }
	.scl-m2mc-player__btn { justify-content: center; }
}

/* T2: Feed-Suchergebnisse (serverseitige Full-Catalog-Suche). Ersetzt das Karussell im Suchmodus. */
.scl-m2mc-feed { margin-top: 4px; }
.scl-m2mc-feed[hidden] { display: none; }
.scl-m2mc-feed__status { margin: 0 0 10px; font-size: 0.82rem; color: rgba(255,255,255,0.7); }
.scl-m2mc-feed__status[hidden] { display: none; }
.scl-m2mc-feed__strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.scl-m2mc-feed__mini { flex: 0 0 120px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); color: inherit; cursor: pointer; text-align: left; font: inherit; min-width: 0; }
.scl-m2mc-feed__mini:hover { border-color: rgba(255,255,255,0.28); }
.scl-m2mc-feed__mini.is-active { border-color: #8c5cff; box-shadow: inset 0 0 0 1px #8c5cff; }
.scl-m2mc-feed__mini:focus-visible { outline: 2px solid #8c5cff; outline-offset: 2px; }
.scl-m2mc-feed__cover { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; display: block; }
.scl-m2mc-feed__mini-title { font-size: 0.8rem; font-weight: 600; line-height: 1.2; word-break: break-word; }
.scl-m2mc-feed__mini-date { font-size: 0.7rem; color: rgba(255,255,255,0.5); }
.scl-m2mc-feed__more { display: inline-flex; align-items: center; justify-content: center; margin: 4px auto 12px; padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: inherit; font: inherit; font-size: 0.82rem; cursor: pointer; }
.scl-m2mc-feed__more[hidden] { display: none; }
.scl-m2mc-feed__more:hover { border-color: rgba(255,255,255,0.35); }
.scl-m2mc-feed__more:focus-visible { outline: 2px solid #8c5cff; outline-offset: 2px; }
.scl-m2mc-feed__detail { margin-top: 6px; }
@media (max-width: 767px) { .scl-m2mc-feed__mini { flex-basis: 104px; } }
@media (prefers-reduced-motion: reduce) { .scl-m2mc-feed__strip { scroll-behavior: auto; } }