/* music-db.de — Werte aus Projekte/Website/DESIGN.md (mk13-Netzwerk).
   Übernimmt Farben/Typografie/Footer 1:1, dazu speziell für music-db.de:
   Glasoptik-Karten (.mko-card), 1400px-Container, highlight-bright + alert. */

:root {
  --bg-base: #0B1524;
  --bg-band: #0E1F33;
  --card-bg: #122234;
  --teal: #14B8A6;
  --emerald: #10B981;
  --teal-light: #2DD4BF;
  --emerald-light: #34D399;
  --highlight-bright: #4AFFD5;
  --alert: #FF8559;
  --alert-badge-bg: rgba(255, 133, 89, 0.1);
  --alert-badge-border: rgba(255, 133, 89, 0.35);
  --text-primary: #FFFFFF;
  --text-secondary: #9FB4BD;
  --text-muted: #7C919B;
  --border-soft: #1F3040;
  --border-strong: #2A4650;
  --field-bg: #1E3444;
  --field-border: #33505D;
  --contact-form-bg: #152738;
  --accent-text: var(--emerald-light);
  --btn-text-on-grad: #06231C;
  --glass-bg: rgba(18, 34, 52, 0.55);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-highlight: rgba(255, 255, 255, 0.07);
  --glass-shadow: rgba(0, 0, 0, 0.28);
  --max-width: 1400px;
  --max-width-text: 1100px;
  --note-c1: #8B2E2E; --note-c2: #D2541F; --note-c3: #E8973B; --note-c4: #3F6B33;
  --note-c5: #1D9E75; --note-c6: #34D399; --note-c7: #A855F7; --note-c8: #E20074;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-base: #F4F7F6; --bg-band: #EAF0EE; --card-bg: #FFFFFF;
    --teal-light: #0F8F82; --emerald-light: #0E7B5E;
    --highlight-bright: #059669; --alert: #D2481F;
    --alert-badge-bg: rgba(210, 72, 31, 0.08); --alert-badge-border: rgba(210, 72, 31, 0.3);
    --text-primary: #0B2340; --text-secondary: #5A6C67; --text-muted: #8A9A95;
    --border-soft: #DDE5E3; --border-strong: #C7D3D0;
    --field-bg: #EEF3F2; --field-border: #CDDAD6; --contact-form-bg: #FFFFFF;
    --glass-bg: rgba(255, 255, 255, 0.6); --glass-border: rgba(11, 35, 64, 0.1);
    --glass-highlight: rgba(255, 255, 255, 0.85); --glass-shadow: rgba(11, 35, 64, 0.1);
    --note-c1: #8B2E2E; --note-c2: #D2541F; --note-c3: #E8973B; --note-c4: #3F6B33;
    --note-c5: #1D9E75; --note-c6: #34D399; --note-c7: #A855F7; --note-c8: #E20074;
  }
}

:root[data-theme="dark"] {
  --bg-base: #0B1524; --bg-band: #0E1F33; --card-bg: #122234;
  --teal-light: #2DD4BF; --emerald-light: #34D399;
  --highlight-bright: #4AFFD5; --alert: #FF8559;
  --alert-badge-bg: rgba(255, 133, 89, 0.1); --alert-badge-border: rgba(255, 133, 89, 0.35);
  --text-primary: #FFFFFF; --text-secondary: #9FB4BD; --text-muted: #7C919B;
  --border-soft: #1F3040; --border-strong: #2A4650;
  --field-bg: #1E3444; --field-border: #33505D; --contact-form-bg: #152738;
  --glass-bg: rgba(18, 34, 52, 0.55); --glass-border: rgba(255, 255, 255, 0.09);
  --glass-highlight: rgba(255, 255, 255, 0.07); --glass-shadow: rgba(0, 0, 0, 0.28);
  --note-c1: #8B2E2E; --note-c2: #D2541F; --note-c3: #E8973B; --note-c4: #3F6B33;
  --note-c5: #1D9E75; --note-c6: #34D399; --note-c7: #A855F7; --note-c8: #E20074;
}

:root[data-theme="light"] {
  --bg-base: #F4F7F6; --bg-band: #EAF0EE; --card-bg: #FFFFFF;
  --teal-light: #0F8F82; --emerald-light: #0E7B5E;
  --highlight-bright: #059669; --alert: #D2481F;
  --alert-badge-bg: rgba(210, 72, 31, 0.08); --alert-badge-border: rgba(210, 72, 31, 0.3);
  --text-primary: #0B2340; --text-secondary: #5A6C67; --text-muted: #8A9A95;
  --border-soft: #DDE5E3; --border-strong: #C7D3D0;
  --field-bg: #EEF3F2; --field-border: #CDDAD6; --contact-form-bg: #FFFFFF;
  --glass-bg: rgba(255, 255, 255, 0.6); --glass-border: rgba(11, 35, 64, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.85); --glass-shadow: rgba(11, 35, 64, 0.1);
  --note-c1: #8B2E2E; --note-c2: #D2541F; --note-c3: #E8973B; --note-c4: #3F6B33;
  --note-c5: #1D9E75; --note-c6: #34D399; --note-c7: #A855F7; --note-c8: #E20074;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { transition: background-color .2s ease, color .2s ease; }
body {
  margin: 0;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
}
h1, h2, h3, .serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; }
a { color: inherit; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 32px; }
.wrap-text { max-width: var(--max-width-text); margin: 0 auto; padding: 0 32px; }

/* Hero-Band: blasses, gekacheltes Logo-Muster als Hintergrund-Textur —
   Depth + Visual Rhyming (Kreis-Formmotiv taucht im Hintergrund wieder auf),
   bewusst sehr blass, damit es nie mit dem Logo im Vordergrund konkurriert. */
.hero-band { position: relative; overflow: hidden; }
.hero-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: url(/assets/img/mk-logo-dunkelblau-kreis-1000.png);
  background-repeat: repeat; background-size: 34px 34px;
  opacity: .035; pointer-events: none; z-index: 0;
}
:root[data-theme="light"] .hero-band::before { opacity: .05; }
.hero-band > * { position: relative; z-index: 1; }

/* Hero: Logo rechts neben dem Intro-Text — Höhe folgt exakt der Textblock-
   Höhe (Oberkante H1 bis Unterkante letzter Absatz), Breite ergibt sich aus
   dem quadratischen Seitenverhältnis des Logos.
   Flexbox-Stretch scheitert hier (Prozent-Höhe löst sich gegen die
   höhenlose Zeile als "auto" auf; height:auto+aspect-ratio verzerrt zur
   Ellipse, weil Chromium die Breite nicht synchron nachzieht). Robuster
   Weg: Logo aus dem Textfluss nehmen (position:absolute), dann bestimmt
   ausschließlich der Textblock die Höhe von .hero-grid — height:100% löst
   sich jetzt gegen eine echte, definierte Höhe auf, Breite folgt danach
   zuverlässig aus aspect-ratio. */
.hero-grid { position: relative; }
.hero-text-block { max-width: 640px; }
.hero-logo {
  position: absolute; top: 0; right: 0; height: 100%; width: auto; aspect-ratio: 1 / 1;
  border-radius: 50%; display: block;
}
@media (max-width: 640px) {
  .hero-grid { display: flex; flex-direction: column-reverse; gap: 1.5rem; }
  .hero-text-block { max-width: none; }
  .hero-logo { position: static; height: 64px; width: 64px; }
}

.gradient-text {
  background: linear-gradient(135deg, var(--teal-light), var(--emerald-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic;
}

/* Header */
header.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg-base); border-bottom: 1px solid var(--border-soft);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 32px; gap: 1rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .625rem; font-weight: 500; text-decoration: none; }
.brand-logo { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: block; }
.theme-switch { background: none; border: none; padding: 0; cursor: pointer; flex-shrink: 0; }
.theme-switch-track {
  width: 52px; height: 28px; border-radius: 999px; background: var(--card-bg);
  border: 1px solid var(--border-strong); position: relative; display: block;
}
.theme-switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--emerald));
  display: flex; align-items: center; justify-content: center;
  color: var(--btn-text-on-grad); font-size: 12px;
  transition: transform .25s ease;
}
:root[data-theme="light"] .theme-switch-thumb { transform: translateX(24px); }
.theme-switch-thumb .ti-moon { display: flex; }
.theme-switch-thumb .ti-sun { display: none; }
:root[data-theme="light"] .theme-switch-thumb .ti-sun { display: flex; }
:root[data-theme="light"] .theme-switch-thumb .ti-moon { display: none; }

/* Sections */
section { padding: 3.5rem 0; }
.band { background: var(--bg-band); }
.section-kicker { font-size: .6875rem; font-weight: 500; color: var(--accent-text); letter-spacing: 1px; text-transform: uppercase; margin-bottom: .5rem; }
.section-title { font-size: 1.875rem; margin: 0 0 .5rem; }
.section-note { font-size: .8125rem; color: var(--text-muted); max-width: 640px; margin: 0 0 1.75rem; }

/* Badges */
.badge-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25);
  padding: .375rem .875rem; border-radius: 20px; font-size: .75rem;
  color: var(--emerald-light);
}
.badge-alert {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--alert-badge-bg); border: 1px solid var(--alert-badge-border);
  padding: .375rem .875rem; border-radius: 20px; font-size: .75rem; color: var(--alert);
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }

/* Karten: Standard (flach, Gradient-Rand) */
.mk-card {
  border: 1px solid transparent; border-radius: 12px; padding: 1.375rem;
  background:
    linear-gradient(150deg, rgba(20,184,166,.09), rgba(20,184,166,0) 55%) padding-box,
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    linear-gradient(135deg, rgba(45,212,191,.55), rgba(16,185,129,.14) 55%, var(--border-soft)) border-box;
}
.mk-card h3 { font-size: 1rem; font-weight: 500; font-family: "Geist", sans-serif; margin: 0 0 .5rem; }
.mk-card p { font-size: .8125rem; color: var(--text-secondary); margin: 0; }
.mk-card .stat { font-size: 2rem; font-family: "Instrument Serif", Georgia, serif; margin: 0 0 .25rem; }

/* Karten: Glasoptik (music-db.de-Grids, wie mk-13.de-Blogkarten) */
.mko-card {
  position: relative; background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border); border-radius: 10px; padding: 1.25rem;
  box-shadow: 0 8px 32px var(--glass-shadow), inset 0 1px 0 var(--glass-highlight);
  transition: transform .2s, border-color .2s;
}
.mko-card:hover { transform: translateY(-2px); border-color: rgba(20,184,166,.35); }

.card-link { text-decoration: none; color: inherit; display: block; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-link:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.28); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.125rem; margin-bottom: 2.25rem; }

/* Album/Interpret des Monats: Cover bzw. Foto rechts in der Karte */
.month-card { display: flex; align-items: center; justify-content: space-between; gap: 1.125rem; }
.month-card-text { min-width: 0; }
.month-card-cover { width: 76px; height: 76px; border-radius: 10px; overflow: hidden; flex-shrink: 0; box-shadow: 0 8px 22px -10px rgba(0,0,0,.5); }
.month-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.month-card-cover--round { border-radius: 50%; }
.month-card-cover--empty {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #16283C, #0E1F33); color: var(--text-muted); font-size: 1.5rem;
}
@media (max-width: 480px) { .month-card { flex-direction: column-reverse; align-items: flex-start; } }

/* Sammlung: Cover oben in der Karte, wie disco-grid */
.collection-card-cover { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; margin-bottom: .625rem; box-shadow: 0 8px 22px -10px rgba(0,0,0,.5); }
.collection-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Kritiken: kleines Cover rechts vom Titel, Fließtext bleibt volle Breite */
.review-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.review-card-cover { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; flex-shrink: 0; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.review-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-card-cover .disco-cover--empty { font-size: 1.25rem; }

/* Statistik-Zeile: 4 große Kennzahlen, symmetrisch (4 → 2×2 → 2×2). */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.125rem; margin-top: 2.75rem; }
@media (max-width: 640px) { .stat-row { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.125rem; } }
.stat-item {
  display: flex; flex-direction: column; gap: .25rem;
  padding-left: 1.125rem; border-left: 2px solid var(--border-strong);
}
.stat-number {
  font-family: "Instrument Serif", Georgia, serif; font-size: 2.75rem; line-height: 1;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.stat-label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

/* Symmetrisches Raster: 4 Spalten am Desktop (12 Items = 3 volle Zeilen),
   2 am Tablet, 1 am Handy — jede Stufe geht ohne halbleere Zeile auf. */
.album-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.125rem; }
@media (max-width: 900px) { .album-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .album-grid { grid-template-columns: 1fr; } }

/* Footer — identisch zu marc-koschel.de / mk-13.de / mkophoto.de */
footer.site-footer { border-top: 1px solid var(--border-soft); padding: 2.5rem 0 2rem; }
.footer-by { font-size: 1.0625rem; margin: 0 0 1.25rem; }
.footer-by a { color: var(--accent-text); }
.footer-sites { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 700px) { .footer-sites { grid-template-columns: 1fr; } }
.footer-site-badge {
  display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center;
  border-radius: 10px; padding: .875rem 1.125rem; border: 1px solid transparent;
  background:
    linear-gradient(150deg, rgba(20,184,166,.09), rgba(20,184,166,0) 55%) padding-box,
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    linear-gradient(135deg, rgba(45,212,191,.55), rgba(16,185,129,.14) 55%, var(--border-soft)) border-box;
}
.footer-site-badge i { font-size: 1.5rem; color: var(--accent-text); }
.footer-site-name { font-weight: 500; font-size: .9375rem; display: block; }
.footer-site-desc { color: var(--text-muted); font-size: .8125rem; }
.footer-divider { border: none; border-top: 1px solid var(--border-soft); margin: 1.5rem 0 1.25rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--text-muted); font-size: .8125rem; }
.footer-bottom a { color: var(--accent-text); }

/* ==========================================================================
   Album-Seite
   ========================================================================== */
.album-hero { padding: 3rem 0 2.5rem; }
.album-hero-grid { display: grid; grid-template-columns: 280px 1fr; gap: 2.25rem; align-items: start; }
@media (max-width: 720px) { .album-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.album-cover-wrap { position: sticky; top: 92px; }
@media (max-width: 720px) { .album-cover-wrap { position: static; max-width: 280px; } }
.album-cover {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.45); display: block;
}
.album-cover--empty {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--placeholder-1, #16283C), var(--placeholder-2, #0E1F33));
  color: var(--text-muted); font-size: 3rem;
}

.album-title { font-size: 2.5rem; line-height: 1.15; margin: .25rem 0 .5rem; }
.album-artist { font-size: 1.125rem; color: var(--text-secondary); margin: 0 0 1.25rem; }
.album-feat { color: var(--text-muted); font-size: .9375rem; }
.artist-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.artist-link:hover { border-bottom-color: var(--accent-text); }

.album-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; color: var(--text-muted); font-size: .8125rem; margin-bottom: 1.125rem; }
.album-meta i { color: var(--accent-text); margin-right: .25rem; }

.album-genres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.genre-pill {
  font-size: .75rem; color: var(--teal-light); background: rgba(20,184,166,.1);
  border: 1px solid rgba(20,184,166,.22); padding: .3125rem .75rem; border-radius: 20px;
  text-decoration: none; transition: background .15s;
}
.genre-pill:hover { background: rgba(20,184,166,.2); }

.collection-badge {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--accent-text);
  background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25);
  padding: .5rem .875rem; border-radius: 8px;
}
.collection-formats { display: inline-flex; gap: .375rem; margin-left: .25rem; }
.format-chip { font-size: .6875rem; letter-spacing: .5px; color: var(--text-secondary); border: 1px solid var(--border-strong); border-radius: 4px; padding: .0625rem .375rem; }

/* Bewertungsblöcke */
.rating-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; }
@media (max-width: 640px) { .rating-grid { grid-template-columns: 1fr; } }
.rating-grid + .editable { margin-top: 1.75rem; }
.rating-card {
  border: 1px solid transparent; border-radius: 12px; padding: 1.375rem;
  background:
    linear-gradient(150deg, rgba(20,184,166,.09), rgba(20,184,166,0) 55%) padding-box,
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    linear-gradient(135deg, rgba(45,212,191,.55), rgba(16,185,129,.14) 55%, var(--border-soft)) border-box;
}
.rating-lead { display: flex; align-items: center; gap: 1rem; margin: .75rem 0 1rem; }
.rating-note {
  font-family: "Instrument Serif", Georgia, serif; font-size: 3.5rem; line-height: 1;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.rating-note-max { font-size: 1.25rem; color: var(--text-muted); }
.rating-lead-text { display: flex; flex-direction: column; gap: .1875rem; }
.rating-label {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 1.5rem;
  background: linear-gradient(135deg, var(--grad-text-1, var(--teal-light)), var(--grad-text-2, var(--emerald-light)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rating-sub { font-size: .75rem; color: var(--text-muted); }

.note-bar { display: flex; gap: 4px; margin-bottom: .5rem; }
.note-bar .seg { flex: 1; height: 6px; border-radius: 3px; background: var(--border-soft); }
.note-bar .seg.on { background: var(--nc, linear-gradient(135deg, var(--teal), var(--emerald))); }

.rating-note-explainer { font-size: .75rem; color: var(--text-muted); margin: .25rem 0 0; }
.rating-empty { font-size: .8125rem; color: var(--text-muted); margin: 1rem 0 .5rem; }

.album-note {
  margin: 0; padding: 1.125rem 1.375rem; border-left: 2px solid var(--accent-text);
  background: var(--bg-base); border-radius: 0 8px 8px 0; color: var(--text-secondary);
  font-size: .9375rem; line-height: 1.65;
}

.reviews-details { margin-top: 1.75rem; }
.reviews-details summary {
  cursor: pointer; font-size: .8125rem; color: var(--accent-text); padding: .5rem 0;
  list-style: none; display: inline-flex; align-items: center; gap: .375rem;
}
.reviews-details summary::-webkit-details-marker { display: none; }
.reviews-details summary::before { content: "\ea5f"; font-family: "tabler-icons"; }
.reviews-details[open] summary::before { content: "\ea5b"; }
.reviews-list { list-style: none; margin: .75rem 0 0; padding: 0; }
.review-row { display: flex; align-items: center; gap: 1rem; padding: .625rem 0; border-bottom: 1px solid var(--border-soft); font-size: .8125rem; }
.review-row:last-child { border-bottom: none; }
.review-source { flex: 1; color: var(--text-secondary); }
.review-percent { color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: 500; }
.review-link { color: var(--accent-text); text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.review-link:hover { text-decoration: underline; }

/* Reviews manuell eingeben (Phase 13f-Nachtrag). */
.reviews-manual-entry.reviews-details { margin-top: 1rem; }
.reviews-manual-form { margin-top: .75rem; display: flex; flex-direction: column; gap: .625rem; }
.reviews-manual-row { display: grid; grid-template-columns: 11rem 1fr 9rem 4rem; gap: .625rem; align-items: center; font-size: .8125rem; }
@media (max-width: 640px) { .reviews-manual-row { grid-template-columns: 1fr; gap: .375rem; padding-bottom: .625rem; border-bottom: 1px solid var(--border-soft); } }
.reviews-manual-source { color: var(--text-secondary); }
.reviews-manual-url, .reviews-manual-rating { background: var(--card-bg); border: 1px solid var(--field-border); border-radius: 7px;
  padding: .4375rem .625rem; color: var(--text-primary); font: inherit; font-size: .8125rem; }
.reviews-manual-url:focus, .reviews-manual-rating:focus { outline: none; border-color: var(--teal); }
.reviews-manual-preview { font-variant-numeric: tabular-nums; color: var(--text-muted); text-align: right; }
.reviews-manual-preview.is-valid { color: var(--accent-text); font-weight: 500; }
.reviews-manual-preview.is-invalid { color: var(--alert); }
.reviews-manual-actions { display: flex; align-items: center; gap: .75rem; margin-top: .375rem; }
.reviews-manual-save { border: none; border-radius: 7px; padding: .4375rem .9rem; cursor: pointer; font: inherit; font-weight: 500;
  color: var(--btn-text-on-grad); background: linear-gradient(135deg, var(--teal), var(--emerald)); }
.reviews-manual-save:disabled { opacity: .6; cursor: default; }
.reviews-manual-msg { font-size: .8125rem; color: var(--text-secondary); }
.reviews-manual-msg.is-error { color: var(--alert); }

/* Tracklist */
.tracklist { list-style: none; counter-reset: none; margin: 0; padding: 0; max-width: 720px; }
.track-disc { font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-text); margin: 1.25rem 0 .5rem; }
.track-row { display: flex; align-items: baseline; gap: 1rem; padding: .5625rem 0; border-bottom: 1px solid var(--border-soft); }
.track-row:last-child { border-bottom: none; }
.track-pos { width: 1.75rem; text-align: right; color: var(--text-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.track-title { flex: 1; font-size: .9375rem; }
.track-dur { color: var(--text-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Artist-Seite
   ========================================================================== */
.artist-hero { padding: 3rem 0 2.5rem; }
.artist-hero-grid { display: grid; grid-template-columns: 200px 1fr; gap: 2.25rem; align-items: center; }
@media (max-width: 640px) { .artist-hero-grid { grid-template-columns: 1fr; justify-items: start; gap: 1.5rem; } }

/* Kreis-Portrait mit Türkis→Smaragd-Ring (Design-System-Kreismotiv) */
.artist-portrait {
  position: relative;
  width: 200px; height: 200px; border-radius: 50%; padding: 4px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal), var(--emerald));
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.45);
}
.artist-portrait img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  border: 3px solid var(--bg-base);
}
.artist-portrait-initial {
  width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--bg-base);
  display: flex; align-items: center; justify-content: center;
  background: var(--card-bg); color: var(--text-primary);
  font-family: "Instrument Serif", Georgia, serif; font-size: 4rem;
}

.artist-name { font-size: 2.75rem; line-height: 1.1; margin: .25rem 0 1rem; }

.artist-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-size: .875rem; color: var(--text-secondary); margin-bottom: 1.125rem; }
.artist-summary-count { color: var(--text-primary); font-weight: 500; }
.artist-summary-sep { color: var(--text-muted); }
.artist-summary-note {
  font-weight: 500;
  background: linear-gradient(135deg, var(--teal-light), var(--emerald-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.artist-summary-label { font-style: italic; color: var(--text-secondary); }

.artist-members { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; }
.artist-members-label { color: var(--text-muted); margin-right: .125rem; }
.member-chip {
  text-decoration: none; color: var(--teal-light); background: rgba(20,184,166,.1);
  border: 1px solid rgba(20,184,166,.22); padding: .25rem .625rem; border-radius: 20px;
}
.member-chip:hover { border-color: rgba(20,184,166,.5); }

.artist-bio { font-size: .9375rem; line-height: 1.7; color: var(--text-secondary); max-width: 720px; }
.artist-bio-source { font-size: .75rem; color: var(--text-muted); margin: 1rem 0 0; }
.artist-bio-source a { color: var(--accent-text); }

/* Diskografie-Grid mit Cover-Karten */
.disco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 1.125rem; }
.disco-card { display: block; }
.disco-cover { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; margin-bottom: .625rem; box-shadow: 0 8px 22px -10px rgba(0,0,0,.5); }
.disco-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.disco-cover--empty {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #16283C, #0E1F33); color: var(--text-muted); font-size: 2rem;
}
.disco-note {
  position: absolute; top: .5rem; right: .5rem; height: 26px; padding: 0 .5rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--btn-text-on-grad); background: var(--nc, linear-gradient(135deg, var(--teal), var(--emerald)));
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.disco-note.note-badge-light-text, .chart-note.note-badge-light-text { color: #fff; }
.disco-title { font-size: .875rem; font-weight: 500; line-height: 1.3; }
.disco-year { font-size: .75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---- Listen (Übersicht + Einzelliste, Phase 7) ---- */

/* Header-Navigation */
.site-nav { margin-left: auto; margin-right: 1.5rem; display: flex; align-items: center; gap: 1.25rem; }
.site-nav a {
  text-decoration: none; color: var(--text-secondary); font-size: .9375rem;
  transition: color .2s, background .2s, border-color .2s;
  box-sizing: border-box; padding: .375rem .875rem; margin: -.375rem -.875rem;
  border-radius: 20px; border: 1px solid transparent;
}
.site-nav a:hover { color: var(--accent-text); }
.site-nav a.nav-active {
  color: var(--accent-text); background: rgba(16,185,129,.1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: rgba(16,185,129,.28);
}

/* Übersicht: Bestenlisten-Karten */
.list-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.125rem; margin-top: 1.75rem; }
.list-index-card { display: flex; flex-direction: column; gap: .5rem; }
.list-index-name { font-size: 1.0625rem; font-weight: 500; line-height: 1.35; margin: 0; }
.list-index-meta { font-size: .8125rem; color: var(--text-secondary); display: flex; gap: .375rem; flex-wrap: wrap; }
.list-index-count { margin-top: auto; font-size: .8125rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: .375rem; font-variant-numeric: tabular-nums; }

/* Übersicht: Archiv-Karten */
.list-archive-card { display: flex; flex-direction: column; gap: .25rem; }
.list-archive-count { font-size: 2.5rem; line-height: 1; margin: .25rem 0 0; }
.list-archive-range { font-size: .8125rem; color: var(--text-muted); margin: 0; }

/* Einzelliste: Kopf */
.list-hero { padding-bottom: 1.5rem; }
.list-title { font-size: 2.25rem; margin: .25rem 0 .75rem; }
.list-desc { color: var(--text-secondary); max-width: 640px; margin: 1rem 0 0; }

/* Einzelliste: gerankte Reihen */
.chart-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; }
.chart-row { display: flex; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--border-soft); }
.chart-rank { flex-shrink: 0; width: 2.5rem; text-align: right; font-size: 1.75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.chart-thumb { flex-shrink: 0; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; display: block; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.chart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chart-info { flex: 1; min-width: 0; }
.chart-title { display: block; font-weight: 500; text-decoration: none; color: inherit; }
.chart-title:hover { color: var(--accent-text); }
.chart-sub { font-size: .8125rem; color: var(--text-secondary); }
.chart-sub a { color: inherit; text-decoration: none; }
.chart-sub a:hover { color: var(--accent-text); }
.chart-note { flex-shrink: 0; height: 30px; padding: 0 .625rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--btn-text-on-grad); background: var(--nc, linear-gradient(135deg, var(--teal), var(--emerald))); }

/* Einzelliste: Archiv nach Jahr */
.archive-year { font-size: 1.5rem; color: var(--text-muted); margin: 2rem 0 1rem; border-bottom: 1px solid var(--border-soft); padding-bottom: .375rem; }
.archive-year:first-child { margin-top: .5rem; }
/* Symmetrisches Raster: 6 Spalten am Desktop, gemeinsam für Album- und
   Künstler-Archiv (Marcs Wunsch: gleiche Spaltenzahl auf beiden Seiten statt
   der zufällig unterschiedlichen auto-fill-Ergebnisse 7/5). */
.list-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.125rem; }
@media (max-width: 1100px) { .list-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .list-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .list-grid { grid-template-columns: 1fr; } }
.list-card { display: block; }
.list-card-cover { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; margin-bottom: .5rem; box-shadow: 0 8px 22px -10px rgba(0,0,0,.5); }
.list-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.list-card-cover--round { border-radius: 50%; }
.list-card-cover--empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: var(--text-muted); background: var(--card-bg); }
.list-card-context { position: absolute; bottom: .5rem; left: .5rem; padding: .1875rem .5rem; border-radius: 6px; font-size: .6875rem; font-weight: 500;
  background: rgba(0,0,0,.6); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.list-card-title { font-size: .875rem; font-weight: 500; line-height: 1.3; }
.list-card-sub { font-size: .75rem; color: var(--text-muted); }
/* Künstler-Karten (rundes Foto): Monats-Label als Kicker statt Overlay --
   ein Overlay-Badge würde am Kreisrand abgeschnitten. */
.list-card-kicker { font-size: .6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: .1875rem; text-align: center; }
.list-card-cover--round + .list-card-kicker, .list-card-kicker + .list-card-title { text-align: center; }

/* ---- A–Z-Verzeichnis (Künstler/Alben) + Zurück-Button (Phase 7.4) ---- */

/* Zurück-Button oben auf Detailseiten */
.back-bar { padding-top: 1.75rem; padding-bottom: .25rem; }
.back-link { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; color: var(--text-secondary); text-decoration: none; }
.back-link:hover { color: var(--accent-text); }

/* Buchstabenleiste */
.az-bar { display: flex; flex-wrap: wrap; gap: .25rem; margin: 1.5rem 0 1.25rem; }
.az-letter { display: inline-flex; align-items: center; justify-content: center; min-width: 2.125rem; height: 2.125rem;
  padding: 0 .375rem; border-radius: 8px; font-size: .9375rem; text-decoration: none; color: var(--text-secondary);
  border: 1px solid var(--border-soft); transition: background .15s, color .15s, border-color .15s; }
.az-letter:hover { color: var(--accent-text); border-color: rgba(20,184,166,.35); }
.az-letter.is-active { color: var(--btn-text-on-grad); background: linear-gradient(135deg, var(--teal), var(--emerald)); border-color: transparent; }
.az-letter.is-empty { color: var(--text-muted); opacity: .35; border-color: transparent; pointer-events: none; }

/* Schlichte Textliste */
.browse-count { font-size: .8125rem; color: var(--text-muted); margin: 0 0 1rem; }
.browse-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.5rem; }
.browse-row { break-inside: avoid; padding: .4375rem 0; border-bottom: 1px solid var(--border-soft); display: flex; align-items: baseline; gap: .625rem; justify-content: space-between; }
.browse-name { text-decoration: none; color: var(--text-primary); font-weight: 500; }
.browse-name:hover { color: var(--accent-text); }
.browse-meta { font-size: .8125rem; color: var(--text-muted); text-align: right; flex-shrink: 0; }
.browse-empty { color: var(--text-muted); }
.admin-checked-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #e0435c; margin-right: .375rem; vertical-align: middle; }
.admin-similar-hint { color: #e8973b; font-size: .8125rem; margin-left: .375rem; cursor: help; }
.admin-inline-skip { flex-shrink: 0; }
/* Kleine Legende für Symbole in den Pflege-Listen (Marcs Wunsch: man
   vergisst sonst schnell, was das Dreieck/der Punkt bedeutet). */
.admin-legend { font-size: .75rem; color: var(--text-muted); margin: .375rem 0 .75rem; }
.admin-legend .admin-similar-hint, .admin-legend .admin-checked-dot { margin-left: 0; }

@media (max-width: 720px) { .browse-list { columns: 1; } }

/* ---- Login / Auth (Phase 8a) ---- */

/* An-/Abmelde- und Admin-Icon rechts vom Theme-Switch im Header (Phase 13,
   ersetzt den früheren Text-Button + Footer-"BE"-Link). */
.header-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.icon-btn-form { margin: 0; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border-radius: 50%; border: 1px solid var(--border-strong); background: none; color: var(--text-secondary);
  cursor: pointer; font-size: 1.0625rem; text-decoration: none; transition: color .15s, border-color .15s, background .15s; }
.icon-btn:hover { color: var(--accent-text); border-color: var(--teal); }
.icon-btn.is-active { color: var(--emerald); border-color: var(--emerald); }

.auth-section { display: flex; justify-content: center; padding: 4.5rem 32px; }
.auth-card { width: 100%; max-width: 400px; background: var(--contact-form-bg); border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 2rem; box-shadow: 0 20px 60px -25px rgba(0,0,0,.5); }
.auth-title { font-size: 2rem; margin: .25rem 0 .375rem; }
.auth-lead { font-size: .8125rem; color: var(--text-muted); margin: 0 0 1.5rem; }
.auth-form { display: flex; flex-direction: column; }
.auth-label { font-size: .8125rem; color: var(--text-secondary); margin-bottom: .375rem; }
.auth-input { background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 8px;
  padding: .625rem .75rem; color: var(--text-primary); font: inherit; margin-bottom: 1.125rem; transition: border-color .15s; }
.auth-input:focus { outline: none; border-color: var(--teal); }
.auth-submit { margin-top: .375rem; padding: .6875rem 1rem; border: none; border-radius: 8px; cursor: pointer;
  font: inherit; font-weight: 500; color: var(--btn-text-on-grad); background: linear-gradient(135deg, var(--teal), var(--emerald)); transition: opacity .15s; }
.auth-submit:hover { opacity: .92; }
.auth-error { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--alert);
  background: var(--alert-badge-bg); border: 1px solid var(--alert-badge-border); border-radius: 8px; padding: .625rem .75rem; margin: 0 0 1.25rem; }

/* ---- Inline-Editing (Phase 8b) ---- */
.editable { position: relative; }
.editable-empty { color: var(--text-muted); font-style: italic; }

/* Kopfzeile: Überschrift + Bearbeiten-Stift direkt daneben, statt am
   Textende — bei langen Biografien sonst zu viel Scrollen bis zum Button. */
.editable-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .625rem; }
.editable-head .section-kicker { margin-bottom: 0; }

.editable-edit { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 1.875rem; height: 1.875rem; background: none; border: 1px solid var(--border-strong);
  color: var(--text-secondary); border-radius: 7px; cursor: pointer; font-size: .9375rem;
  transition: color .15s, border-color .15s, background .15s; }

/* Name/Titel als h1: Stift inline daneben statt einer eigenen Kopfzeile. */
.editable-title { display: flex; align-items: baseline; gap: .625rem; }
.editable-title .editable-value { margin: 0; }
.editable-title.is-editing .editable-editor { flex-basis: 100%; }
.editable-edit:hover { color: var(--accent-text); border-color: var(--teal); background: rgba(20,184,166,.06); }
.editable.is-editing .editable-value,
.editable.is-editing .editable-edit { display: none; }

/* Bild-Upload (Etappe 3): Kamera-Icon als Overlay auf Portrait/Cover. */
.image-upload {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
  background: var(--card-bg); border: 1px solid var(--border-strong); border-radius: 50%;
  color: var(--text-secondary); cursor: pointer; font-size: 1rem;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.4);
  transition: color .15s, border-color .15s, background .15s;
}
.image-upload:hover { color: var(--accent-text); border-color: var(--teal); background: rgba(20,184,166,.06); }
.image-upload.is-uploading { opacity: .6; pointer-events: none; }
.image-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.editable-editor { margin-top: .25rem; }
.editable-textarea { width: 100%; max-width: 720px; display: block; background: var(--field-bg);
  border: 1px solid var(--field-border); border-radius: 8px; padding: .75rem; color: var(--text-primary);
  font: inherit; line-height: 1.6; resize: vertical; }
.editable-textarea:focus { outline: none; border-color: var(--teal); }
.editable-number { width: 8rem; }

/* Feldgruppe (mehrere kurze Felder auf einmal, Etappe 2) */
.editable-group { position: relative; }
.editable-group.is-editing .editable-group-display { display: none; }
.editable-group-editor { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start;
  background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 10px; padding: 1rem 1.125rem; margin-top: .5rem; }
.editable-group-row { display: flex; flex-direction: column; gap: .3125rem; font-size: .8125rem; width: 100%; max-width: 260px; }
.editable-group-label { color: var(--text-secondary); }

.editable-number, .editable-select, .editable-text-input {
  background: var(--card-bg); border: 1px solid var(--field-border); border-radius: 7px;
  padding: .4375rem .625rem; color: var(--text-primary); font: inherit;
}
.editable-number:focus, .editable-select:focus, .editable-text-input:focus { outline: none; border-color: var(--teal); }
.editable-actions { display: flex; align-items: center; gap: .625rem; margin-top: .625rem; }
.editable-save { border: none; border-radius: 7px; padding: .4375rem .9rem; cursor: pointer; font: inherit; font-weight: 500;
  color: var(--btn-text-on-grad); background: linear-gradient(135deg, var(--teal), var(--emerald)); }
.editable-save:disabled { opacity: .6; cursor: default; }
.editable-cancel { border: 1px solid var(--border-strong); background: none; color: var(--text-secondary);
  border-radius: 7px; padding: .4375rem .9rem; cursor: pointer; font: inherit; }
.editable-cancel:hover { color: var(--text-primary); }
.editable-msg { font-size: .8125rem; color: var(--alert); }

/* Manueller MusicBrainz-Nachlade-Trigger (Phase 13c/13d) -- nur sichtbar,
   wenn Jahr/Label/Cover noch lückenhaft sind. */
.enrich-trigger { display: inline-flex; align-items: center; gap: .375rem; margin-top: .875rem;
  border: 1px solid var(--border-strong); background: none; color: var(--text-secondary);
  border-radius: 7px; padding: .4375rem .875rem; cursor: pointer; font: inherit; font-size: .8125rem; }
.enrich-trigger:hover { color: var(--accent-text); border-color: var(--teal); background: rgba(20,184,166,.06); }
.enrich-trigger:disabled { opacity: .6; cursor: default; }

/* Kompakter Icon-only-Variante für Pro-Zeile-Buttons in Admin-Lückenlisten
   (Phase 13d-Rest) -- gleicher Klick-Handler wie .enrich-trigger, nur klein. */
.enrich-trigger-mini { margin: 0; flex-shrink: 0; width: 1.625rem; height: 1.625rem; padding: 0;
  border-radius: 50%; justify-content: center; font-size: .8125rem; }
.enrich-trigger-mini span { display: none; }

/* Duplikat-Alben-Vorschläge (Phase 13g). */
.admin-duplicate-teaser { margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: .375rem; }
.admin-duplicate-teaser p { margin: 0; font-size: .875rem; display: flex; align-items: center; gap: .5rem; }
.admin-duplicate-teaser a { color: var(--accent-text); text-decoration: none; }
.admin-duplicate-teaser a:hover { text-decoration: underline; }
.dup-list { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; }
.dup-pair { background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: 12px; padding: 1.25rem 1.375rem; }
.dup-badge { display: inline-block; font-size: .75rem; font-weight: 500; color: var(--accent-text);
  background: rgba(20,184,166,.1); border-radius: 999px; padding: .1875rem .625rem; margin-bottom: 1rem; }
.dup-albums { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 640px) { .dup-albums { grid-template-columns: 1fr; } }
.dup-album { display: flex; flex-direction: column; gap: .375rem; }
.dup-cover { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.dup-cover--empty { display: flex; align-items: center; justify-content: center; background: var(--field-bg);
  color: var(--text-muted); font-size: 2rem; }
.dup-title { font-weight: 500; color: var(--text-primary); text-decoration: none; }
.dup-title:hover { color: var(--accent-text); }
.dup-artist { font-size: .8125rem; color: var(--text-secondary); }
.dup-meta { font-size: .75rem; color: var(--text-muted); }
.dup-keep-btn { margin-top: .5rem; display: inline-flex; align-items: center; gap: .375rem;
  border: 1px solid var(--border-strong); background: none; color: var(--text-secondary);
  border-radius: 7px; padding: .4375rem .75rem; cursor: pointer; font: inherit; font-size: .8125rem; }
.dup-keep-btn:hover { color: var(--accent-text); border-color: var(--teal); background: rgba(20,184,166,.06); }
.dup-skip-form { margin-top: 1.125rem; padding-top: 1rem; border-top: 1px solid var(--border-soft); }
.dup-skip-btn { display: inline-flex; align-items: center; gap: .375rem; border: 1px solid var(--border-strong);
  background: none; color: var(--text-muted); border-radius: 7px; padding: .4375rem .75rem; cursor: pointer;
  font: inherit; font-size: .8125rem; }
.dup-skip-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* "Interpret/Album des Monats"-Auswahl (2026-07-21). */
.monatswahl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem; margin-top: 1rem; }
@media (max-width: 900px) { .monatswahl-grid { grid-template-columns: 1fr; } }
.monatswahl-category { display: flex; flex-direction: column; gap: .625rem; }
.monatswahl-confirmed { margin: 0; font-size: .875rem; color: var(--text-secondary); }
.monatswahl-confirmed .ti { color: var(--teal); }
.monatswahl-form { display: flex; flex-direction: column; gap: .5rem; }
.monatswahl-option { display: flex; align-items: baseline; gap: .5rem; font-size: .875rem; cursor: pointer; }
.monatswahl-plays { color: var(--text-muted); font-size: .75rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.monatswahl-artist { color: var(--text-secondary); font-size: .8125rem; }
.monatswahl-search-form { position: relative; margin-top: .375rem; padding-top: .625rem; border-top: 1px solid var(--border-soft); }
.monatswahl-search-input { width: 100%; background: var(--card-bg); border: 1px solid var(--field-border);
  border-radius: 7px; padding: .4375rem .625rem; font: inherit; font-size: .8125rem; color: var(--text-primary); }
.monatswahl-search-input:focus { outline: none; border-color: var(--teal); }
.monatswahl-search-results { position: absolute; left: 0; right: 0; z-index: 5; background: var(--card-bg);
  border: 1px solid var(--border-soft); border-radius: 7px; margin-top: .25rem; overflow: hidden; }
.monatswahl-search-result { display: block; width: 100%; text-align: left; background: none; border: none;
  padding: .5rem .625rem; font: inherit; font-size: .8125rem; color: var(--text-primary); cursor: pointer; }
.monatswahl-search-result:hover { background: rgba(20,184,166,.08); }

/* Kritiken-Suche vormerken (Phase 13f) -- Statusnotiz statt Button, sobald
   ein Album schon in der Warteschlange für den nächsten Task-Lauf steht. */
.review-request-note { display: inline-flex; align-items: center; gap: .375rem; margin-top: .875rem;
  font-size: .8125rem; color: var(--text-secondary); }

/* Plattform-Link-Icons (Spotify/Apple Music/MusicBrainz/song.link), Phase 13. */
.album-platform-links { display: flex; gap: .5rem; margin-top: .875rem; }
.album-platform-links a { display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--border-strong);
  color: var(--text-secondary); text-decoration: none; font-size: 1.0625rem;
  transition: color .15s, border-color .15s; }
.album-platform-links a:hover { color: var(--accent-text); border-color: var(--teal); }

/* ---- FAQ-Seite ---- */
.faq-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .625rem; margin: 1rem 0 2.25rem; }
.faq-legend-item { display: flex; align-items: center; gap: .625rem; background: var(--card-bg); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: .5rem .75rem; font-size: .8125rem; color: var(--text-secondary); }
.faq-legend-dot { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--nc, var(--accent-text)); }

.faq-list { display: flex; flex-direction: column; gap: .25rem; }
.faq-item { border-bottom: 1px solid var(--border-soft); padding: .25rem 0; }
.faq-item summary {
  cursor: pointer; font-size: .9375rem; font-weight: 500; color: var(--text-primary); padding: .75rem 0;
  list-style: none; display: flex; align-items: center; gap: .5rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "\ea5f"; font-family: "tabler-icons"; color: var(--accent-text); flex-shrink: 0; }
.faq-item[open] summary::before { content: "\ea5b"; }
.faq-item p { color: var(--text-secondary); font-size: .875rem; line-height: 1.65; margin: 0 0 1rem; padding-left: 1.375rem; }

/* ---- Admin-Übersicht (Phase 8c) ---- */
/* Last.fm-Pflege: die beiden Listen (Artist-Backfill, Album-Vorschläge)
   nebeneinander, je eigene Spalte mit eigenem Titel. */
.admin-lastfm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.25rem; margin-top: 1.5rem; align-items: start; }
@media (max-width: 900px) { .admin-lastfm-grid { grid-template-columns: 1fr; } }
.admin-lastfm-title { font-size: 1.0625rem; font-weight: 500; font-family: "Geist", sans-serif; margin: 0 0 .5rem; }

.admin-gap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.admin-gap { background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: 12px; padding: 1.25rem 1.375rem; }
.admin-gap-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  font-size: .9375rem; font-weight: 600; color: var(--text-primary); margin: 0 0 .875rem; }
.admin-gap-count { flex-shrink: 0; min-width: 1.75rem; text-align: center; padding: .125rem .5rem;
  background: var(--field-bg); border-radius: 999px; font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
/* Batch-Nachlade-Button oberhalb einer Lückenliste (Phase 13d-Rest). */
.admin-gap-batch { margin: 0 0 1.125rem; }
.admin-gap-batch .enrich-trigger { margin-top: 0; }
.admin-gap-batch-result { margin: .625rem 0 0; font-size: .8125rem; color: var(--text-secondary); }
.admin-gap .browse-list { columns: 1; }
/* Album-Lücken (ohne Cover/Bewertung) zeigen den Interpret als Unterzeile. */
.admin-gap .browse-row { align-items: flex-start; padding: .5rem 0; }
.admin-gap .browse-name { display: flex; flex-direction: column; gap: .125rem; }
.browse-sub { font-size: .75rem; font-weight: 400; color: var(--text-muted); }
.admin-gap-more { margin: .5rem 0 0; font-size: .8125rem; color: var(--text-secondary); }
.admin-gap-empty { margin: 0; font-size: .875rem; color: var(--text-secondary); }
.admin-gap-empty .ti { color: var(--teal); }

.admin-progress { max-width: 520px; height: 8px; border-radius: 999px; background: var(--field-bg); overflow: hidden; margin-top: .75rem; }
.admin-progress-bar { height: 100%; background: linear-gradient(90deg, var(--teal), var(--emerald)); border-radius: 999px; transition: width .3s; }
.admin-progress-label { margin: .375rem 0 0; font-size: .75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.admin-candidate-list { display: flex; flex-direction: column; gap: .625rem; margin-top: 1.5rem; max-width: 720px; }
.admin-candidate { display: flex; align-items: center; gap: 1rem; background: var(--card-bg); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: .75rem 1rem; }
.admin-candidate-cover { flex-shrink: 0; width: 44px; height: 44px; border-radius: 6px; object-fit: cover; background: var(--field-bg); }
.admin-candidate-cover-placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.125rem; color: var(--text-muted); }
.admin-candidate-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.admin-candidate-album { font-size: .9375rem; font-weight: 500; color: var(--text-primary); }
.admin-candidate-artist { font-size: .8125rem; color: var(--text-secondary); }
.admin-candidate-plays { flex-shrink: 0; font-size: .75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; line-height: 1.5; }
.admin-candidate-period { font-size: .6875rem; color: var(--text-muted); opacity: .75; }
.admin-candidate-actions { flex-shrink: 0; display: flex; align-items: center; gap: .5rem; }
.admin-candidate-approve { display: inline-flex; align-items: center; gap: .375rem; padding: .4375rem .875rem;
  background: none; border: 1px solid var(--teal); color: var(--accent-text); border-radius: 7px; cursor: pointer;
  font-size: .8125rem; font-weight: 500; transition: background .15s; }
.admin-candidate-approve:hover { background: rgba(20,184,166,.08); }
.admin-candidate-skip { display: inline-flex; align-items: center; gap: .375rem; padding: .4375rem .875rem;
  background: none; border: 1px solid var(--border-strong); color: var(--text-secondary); border-radius: 7px; cursor: pointer;
  font-size: .8125rem; font-weight: 500; transition: background .15s, border-color .15s; }
.admin-candidate-skip:hover { background: rgba(124,145,155,.08); border-color: var(--text-muted); }

/* ---- Genres & Styles (Phase 12) ---- */
.genre-card-count { flex-shrink: 0; min-width: 1.75rem; text-align: center; padding: .125rem .5rem;
  background: var(--field-bg); border-radius: 999px; font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.genre-card-empty { margin: 0; font-size: .8125rem; color: var(--text-muted); }

.genre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; margin-top: 1.5rem; }
.genre-card-btn { display: flex; align-items: center; justify-content: space-between; gap: .625rem;
  background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); border-radius: 10px;
  padding: .75rem 1rem; font: inherit; font-size: .9375rem; font-weight: 600; color: var(--text-primary);
  cursor: pointer; text-align: left; transition: background .15s, border-color .15s; }
.genre-card-btn:hover { background: rgba(16,185,129,.16); }
.genre-card-btn.is-active { background: linear-gradient(135deg, var(--teal), var(--emerald)); border-color: transparent; color: var(--btn-text-on-grad); }
.genre-card-btn.is-active .genre-card-count { background: rgba(255,255,255,.28); color: inherit; }

.subgenre-panel { margin-top: 1.5rem; padding: 1.5rem; background: var(--bg-band); border-radius: 14px; }
.subgenre-panel[hidden] { display: none; }
.subgenre-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; align-items: start; }
.subgenre-card { background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: 10px; }
.subgenre-card summary { display: flex; align-items: center; justify-content: space-between; gap: .625rem;
  padding: .875rem 1.125rem; cursor: pointer; font-size: .875rem; font-weight: 600; list-style: none; }
.subgenre-card summary::-webkit-details-marker { display: none; }
.subgenre-card summary::before { content: "\ea5f"; font-family: "tabler-icons"; color: var(--text-muted); margin-right: .625rem; flex-shrink: 0; }
.subgenre-card[open] summary::before { content: "\ea5b"; }
.style-list { list-style: none; margin: 0; padding: 0 1.125rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.style-list a { display: flex; align-items: baseline; justify-content: space-between; gap: .625rem;
  color: var(--text-secondary); text-decoration: none; font-size: .8125rem; padding: .25rem 0; }
.style-list a:hover { color: var(--accent-text); }
.style-count { flex-shrink: 0; font-size: .75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Subgenre selbst als erste Zeile der aufgeklappten Liste (statt eigenem Link
   im Summary -- Klick auf die Karte soll nur auf-/zuklappen, siehe Marcs Feedback). */
.style-list-self { margin: 0 0 .375rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border-soft); }
.style-list-self a { font-weight: 600; color: var(--text-primary); }
.style-list-self a:hover { color: var(--accent-text); }
.style-list-self .style-count { color: var(--accent-text); font-weight: 600; }