:root {
  --bg: #0b0b0d;
  --bg-elevated: #16161a;
  --bg-hover: #202024;
  --border: #26262b;
  --text: #ececee;
  --text-dim: #8a8a92;
  --accent: #6e5bff;
  --accent-hover: #8375ff;
  --danger: #ff5f5f;
  --radius: 10px;
}

* { box-sizing: border-box; }
/* overflow-x: clip statt hidden -- hidden macht body/html zu einem eigenen
   Scroll-Container (jede Vorfahren-Overflow-Angabe != visible tut das), und
   genau dieser Container wird dann faelschlich als Bezugsrahmen fuer
   position: sticky in .filters genommen statt des echten Viewports -- daher
   blieb die Sidebar nicht ueber die volle Seitenlaenge sticky. clip erzeugt
   keinen Scroll-Container und verhindert horizontalen Overflow trotzdem. */
html, body { overflow-x: clip; max-width: 100vw; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding-bottom: 90px; /* Platz fuer Player-Leiste */
}

a { color: inherit; }
.dim { color: var(--text-dim); font-size: 13px; }
.hidden { display: none !important; }

/* --- Topbar --- */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(11,11,13,0.9);
  backdrop-filter: blur(8px);
  z-index: 50;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 36px; width: auto; display: block; }

.searchwrap { flex: 1; max-width: 640px; }
#search {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 14px;
}
#search:focus { outline: 1px solid var(--accent); }

.topright { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.account-menu-wrap { position: relative; }
.account-menu {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 220px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  z-index: 200;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.account-menu button, .account-menu a {
  background: none; border: none; color: var(--text);
  text-align: left; padding: 8px 10px; border-radius: 6px;
  font-size: 13px; cursor: pointer; text-decoration: none;
}
.account-menu button:hover, .account-menu a:hover { background: var(--bg-hover); }
#menu-logout { color: #f87171; }
.account-menu-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; font-size: 13px; cursor: pointer; white-space: nowrap;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin: 4px 0;
}
.switch { position: relative; display: inline-block; width: 34px; height: 20px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch-slider {
  position: absolute; inset: 0; background: var(--bg-hover);
  border: 1px solid var(--border); border-radius: 999px; transition: background .15s;
}
.switch-slider::before {
  content: ""; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px;
  background: #fff; border-radius: 50%; transition: transform .15s;
}
.switch input:checked + .switch-slider { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch-slider::before { transform: translateX(14px); }
.switch input:focus-visible + .switch-slider { outline: 1px solid var(--accent); outline-offset: 2px; }
.icon-link {
  text-decoration: none;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-elevated);
  font-size: 13px;
}
.icon-link:hover { background: var(--bg-hover); }
button.icon-link { border: none; color: var(--text); cursor: pointer; font: inherit; }
button.icon-link:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

.telegram-btn {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}
.telegram-btn:hover { border-color: #29a9eb; }
.telegram-icon {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--text);
}

.btn-ghost {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
}
.btn-ghost:hover { background: var(--bg-hover); }
.btn-ghost.full { width: 100%; margin-top: 12px; }

.btn-primary {
  background: var(--accent);
  border: none;
  color: white;
  padding: 10px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-hover); }

/* --- Producer-Groesse Toggle (Alle/Solo/Duo/3+) --- */
.producerBarWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.producerBarWrap .searchwrap { flex: 1 1 320px; max-width: 480px; }
.starters-btn {
  background: var(--bg-elevated);
  border: 1px solid rgba(217,119,6,0.35);
  color: #c98a4b;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}
.starters-btn:hover { border-color: #d97706; color: #e0a05a; }
.starters-btn.active { background: rgba(217,119,6,0.22); border-color: #d97706; color: #f0b06a; }
/* Erklaerung zu "Starters", nur wenn der Filter an ist (24.09.2026) */
.starters-hinweis {
  margin: 0;
  padding: 8px 24px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
.random-btn {
  background: linear-gradient(135deg, rgba(110,91,255,0.22), rgba(236,72,153,0.22));
  border: 1px solid rgba(236,72,153,0.4);
  color: #e879f9;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
}
.random-btn:hover { border-color: #ec4899; color: #f472b6; }
.producer-toggle { display: flex; gap: 6px; background: var(--bg-elevated); padding: 4px; border-radius: 999px; border: 1px solid var(--border); }
.ptbtn {
  background: none; border: none; color: var(--text-dim);
  padding: 6px 14px; border-radius: 999px; font-size: 13px; cursor: pointer;
}
.ptbtn:hover { color: var(--text); }
.ptbtn.active { background: var(--accent); color: white; }

/* --- Layout --- */
.layout { display: flex; gap: 24px; padding: 24px; align-items: flex-start; }

.filters {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.filters h3 { margin-top: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }
.filter-block { margin-bottom: 20px; }
.filter-block h4 { font-size: 12px; color: var(--text-dim); margin: 0 0 8px; font-weight: 500; }

.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.chip:hover { background: var(--bg-hover); }
.chip.active { background: var(--accent); border-color: var(--accent); color: white; }
.chip.exclude-active { background: var(--danger); border-color: var(--danger); color: white; }

.range-row { display: flex; align-items: center; gap: 6px; }
.range-row input {
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 13px;
}

#key-select, #producer-input {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 13px;
}

main { flex: 1; min-width: 0; }

/* --- Home rows --- */
.row { margin-bottom: 32px; }
.row h2 { font-size: 16px; margin: 0 0 12px; }
.row-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  min-height: 200px; /* Platz reserviert bevor die Karten async nachladen, sonst CLS-Sprung */
}
.row-scroll::-webkit-scrollbar { height: 6px; }
.row-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.card {
  flex: 0 0 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
}
.card:hover { background: var(--bg-hover); border-color: var(--accent); }
.thumb-producer {
  position: absolute;
  bottom: 6px; left: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 10px;
  font-weight: 500;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.title-line { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; min-width: 0; }
.title-line .title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-line .meta-inline { font-size: 11px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
.card .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.card .tag { font-size: 10px; padding: 2px 6px; border-radius: 999px; background: var(--bg); color: var(--text-dim); }

/* --- List (search results) --- */
.list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 13px; color: var(--text-dim); }
#sort-select { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); }

.sample-list { display: flex; flex-direction: column; gap: 4px; }
.sample-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.sample-row:hover { background: var(--bg-elevated); }
.sample-row {
  position: relative;
  padding: 8px 14px;
}
.sample-row.selected, .sample-row.playing { background: var(--bg-elevated); }

.thumb {
  width: 44px; height: 44px;
  border-radius: 8px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.thumb .play-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-size: 12px;
  opacity: 0;
  transition: opacity .15s;
}
.sample-row:hover .thumb .play-btn { opacity: 1; }
.sample-row.playing .thumb .play-btn {
  opacity: 1;
  background: rgba(0,0,0,0.45);
  box-shadow: 0 0 0 2px #fff, 0 0 16px rgba(255,255,255,0.4);
}

.sample-row .title { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sample-row .producer { font-size: 12px; color: var(--accent); width: 110px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sample-row .meta { font-size: 12px; color: var(--text-dim); width: 140px; flex-shrink: 0; }
/* Downloadzahl je Loop (Sozialbeweis, 24.09.2026): eigene, schmale Spalte
   rechts neben BPM/Tonart. Leer, wenn es noch keine Downloads gibt. */
.sample-row .dl-zahl { font-size: 12px; color: var(--text-dim); width: 54px; flex-shrink: 0; text-align: right; }
.title-line .dl-zahl { color: var(--text-dim); }
/* Leere Favoriten-/Historie-/Download-Liste: der Konto-Hinweis (app.js
   haengeListenHinweis). Dezent, in der Liste, kein Kasten. */
.listen-hinweis { color: var(--text-dim); font-size: 13px; line-height: 1.6; margin: 14px 2px; max-width: 520px; }
.sample-row .tags { display: none; gap: 4px; width: 220px; flex-shrink: 0; }
@media (min-width: 900px) { .sample-row .tags { display: flex; flex-wrap: wrap; } }
.sample-row .tag { font-size: 10px; padding: 2px 6px; border-radius: 999px; background: var(--bg-elevated); color: var(--text-dim); }

.row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* "⋯"-Menue der Listenzeile: am Desktop aufgeloest, die Knoepfe stehen normal in der Reihe */
.row-mehr-wrap, .row-mehr { display: contents; }
.btn-mehr { display: none; }
.btn-similar {
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}
.btn-similar:hover { border-color: var(--accent); color: var(--text); }
.may-fit-heading { margin: 16px 0 8px; }
.may-fit-heading h2 { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.icon-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  font-size: 13px;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); }
.icon-btn.active { color: var(--accent); border-color: var(--accent); }

.card .card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; }
.card .btn-similar { font-size: 10px; padding: 3px 9px; }
.card-bottom-icons { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.card .icon-btn { width: 26px; height: 26px; font-size: 11px; }
.card .thumb { width: 100%; height: 90px; border-radius: 8px; margin-bottom: 10px; }
.card .thumb .play-btn { width: 38px; height: 38px; }
.card:hover .thumb .play-btn { opacity: 1; }
.card.playing .thumb .play-btn {
  opacity: 1;
  background: rgba(0,0,0,0.45);
  box-shadow: 0 0 0 2px #fff, 0 0 16px rgba(255,255,255,0.4);
}
.card .producer-name { color: var(--accent); }

.mehr-karte {
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border-style: dashed;
}
.mehr-karte:hover { background: var(--bg-elevated); border-color: var(--accent); }
.mehr-karte-inner { color: var(--text-dim); font-size: 14px; font-weight: 600; }
.mehr-karte:hover .mehr-karte-inner { color: var(--accent); }

/* --- Footer --- */
.site-footer {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  padding: 24px 0 90px;  /* unten Platz fuer die fixe Player-Leiste */
}
.site-footer a { color: var(--text-dim); }
.site-footer a:hover { color: var(--text); }

/* --- Player (groesser) --- */
.player-bar {
  position: fixed;
  bottom: 0; left: 268px; right: 24px;
  margin: 0 auto;
  max-width: 920px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: rgba(22,22,26,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-bottom: none;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 100;
  min-height: 36px;
}
.player-info { width: 240px; flex-shrink: 0; }
#player-title { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#player-sub { font-size: 13px; margin-top: 2px; }
.sampled-warnung {
  font-size: 11px; color: #ef4444; margin-top: 3px;
  border: 1px solid rgba(239,68,68,0.5); border-radius: 6px;
  padding: 2px 8px; display: inline-block;
}
#audio-el { flex: 1; height: 44px; color-scheme: dark; border-radius: 8px; }
.player-actions { display: flex; gap: 10px; flex-shrink: 0; align-items: center; }
.player-actions .btn-ghost { padding: 10px 18px; font-size: 14px; }
/* Restlicher Tagesstand neben dem mp3-Knopf: dezent, kein Alarm (24.09.2026) */
.download-rest { font-size: 11px; color: var(--text-dim); white-space: nowrap; }

/* --- Artist-Suche Banner --- */
.artist-banner {
  display: flex; gap: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
}
.artist-banner img, .artist-banner-noimg {
  width: 72px; height: 72px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.artist-banner-noimg {
  background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.artist-banner-info { flex: 1; min-width: 0; }
.artist-banner-name { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.artist-banner-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; }
.artist-banner-row .chip { font-size: 12px; padding: 3px 10px; cursor: default; }
.artist-banner-row .chip.meintest-du { cursor: pointer; }
.artist-banner-row .chip.meintest-du:hover { background: var(--accent); color: white; }
.artist-banner-row .chip.similar-artist:hover { background: var(--accent); color: white; }

/* --- Sanfter WAV-Hinweis nach dem dritten Download (24.09.2026) -----------
   Kein Vollbild und kein Fehlerrot: schmales Band unten, wegklickbar. Das
   Tageslimit selbst oeffnet stattdessen das Konto-Modal (zeigeLimitModal). */
.wav-hinweis {
  position: fixed;
  bottom: 110px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 8px 8px 16px;
  font-size: 13px;
  z-index: 300;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.wav-hinweis .btn-primary { padding: 7px 14px; font-size: 13px; white-space: nowrap; }
.wav-hinweis-zu {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 4px 6px;
}
.wav-hinweis-zu:hover { color: var(--text); }

/* --- Passende Loops nach dem Download (24.09.2026) ------------------------
   Haengt absolut UEBER der Player-Leiste, damit deren Flex-Reihe unberuehrt
   bleibt (die schrumpft sonst auf dem Handy). */
.nach-download {
  position: absolute;
  bottom: 100%; left: 0; right: 0;
  background: rgba(22,22,26,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 8px 18px 10px;
}
.nach-download-kopf {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim);
}
.nach-download-alle {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
}
.nach-download-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.nach-download-eintrag {
  display: flex; align-items: center; gap: 4px; max-width: 100%;
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 4px 3px 12px;
}
.nach-download-name {
  font-size: 13px; max-width: 150px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nach-download-eintrag button {
  background: none; border: none; cursor: pointer; color: var(--text-dim);
  font-size: 12px; padding: 4px 8px; border-radius: 999px;
}
.nach-download-eintrag button:hover { color: var(--text); background: var(--bg); }

/* --- Sampled-Warnung beim Download (nicht nur im Player) --- */
.sampled-toast {
  position: fixed;
  bottom: 110px; left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  font-size: 13px;
  padding: 10px 16px;
  max-width: 380px;
  text-align: center;
  z-index: 300;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

/* --- Modal --- */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
.modal-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  width: 340px;
  position: relative;
}
.modal-box h3 { margin-top: 0; }
.modal-box form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.modal-box input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
.modal-actions { display: flex; gap: 8px; }

/* Drei Wertzeilen im Anmelde-Fenster (24.09.2026) */
.modal-vorteile { list-style: none; margin: 12px 0 0; padding: 0; font-size: 13px; }
.modal-vorteile li { position: relative; padding-left: 18px; margin-bottom: 5px; color: var(--text); }
.modal-vorteile li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); }

/* Konto-Fenster 27.09.2026: der E-Mail-Weg liegt hinter einem kleinen, lila
   unterstrichenen Textlink (kein Knopf-Look, damit er nicht mit dem
   Google-Knopf konkurriert). Darunter noch unauffaelliger der Login-Umschalter. */
.mail-weg-link {
  display: block; width: 100%;
  background: none; border: none; padding: 0;
  margin-top: 14px;
  font-size: 13px; font-family: inherit; text-align: center;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}
.mail-weg-link:hover { color: var(--accent-hover); }
.mail-weg-link:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.modal-switch-link {
  display: block; width: 100%;
  background: none; border: none; padding: 0;
  margin-top: 10px;
  font-size: 12px; font-family: inherit; text-align: center;
  color: var(--text-dim); cursor: pointer;
}
.modal-switch-link:hover { color: var(--text); }

/* Passwort-Login: nur noch als kleiner Ausklapper, nicht mehr beworben */
.passwort-login { margin-top: 14px; font-size: 13px; }
.passwort-login > summary { cursor: pointer; color: var(--text-dim); list-style: none; }
.passwort-login > summary::-webkit-details-marker { display: none; }
.passwort-login > summary:hover { color: var(--text); }
.passwort-login form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 16px; }
.error { color: var(--danger); font-size: 13px; }

.btn-google {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: white; color: #1f1f1f;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  margin-top: 14px;
}
.btn-google:hover { background: #f2f2f2; }

.consent-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; color: var(--text-dim);
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-top: 14px;
}
.consent-row input {
  margin-top: 1px; accent-color: var(--accent); flex-shrink: 0;
  width: 17px; height: 17px;
}
.consent-row a { color: var(--accent); }
.consent-row.fehlt {
  border-color: #ff5b5b;
  background: rgba(255, 91, 91, 0.08);
  color: #ff8a8a;
  animation: consent-wackeln 0.45s ease;
}
.consent-row.fehlt input { outline: 2px solid #ff5b5b; outline-offset: 2px; }
.consent-row.fehlt a { color: #ff8a8a; }

@keyframes consent-wackeln {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .consent-row.fehlt { animation: none; }
}

.filters-toggle { display: none; }
/* Desktop: Wrapper "verschwinden" (display:contents), damit #player-fav per
   CSS order() vor den mp3-Button rutschen kann, obwohl er im HTML tiefer
   verschachtelt ist (fuer den mobilen Dropdown noetig). */
.player-overflow-wrap { display: contents; }
.player-overflow { display: contents; }
#player-fav { order: -1; }
.player-more-btn { display: none; }

@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; padding: 10px 12px; row-gap: 8px; }
  .telegram-btn span:not(.telegram-icon) { display: none; }
  .telegram-btn { padding: 8px; }
  #btn-login, #btn-signup { padding: 7px 10px; font-size: 12px; }
  /* Mobil weicht nur das Instagram-Icon (a.icon-link). Der Favoriten-Stern
     bleibt: er ist der einzige Weg, die gemerkte Liste zu OEFFNEN, merken
     geht auch ueber die Zeile (Orlando 24.09.2026). */
  .topright a.icon-link { display: none; }
  .topright { gap: 6px; flex: 1 0 100%; margin-left: 0; justify-content: flex-end; }
  .topbar { padding-left: 10px; padding-right: 10px; gap: 8px; }
  .logo img { height: 28px; }
  .producerBarWrap { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .searchwrap { width: 100%; }

  .layout { flex-direction: column; padding: 12px; gap: 12px; }
  /* Samples zuerst, Filter danach (Reihenfolge visuell per order, DOM bleibt gleich) */
  main { order: 3; width: 100%; min-width: 0; }
  .filters {
    order: 2;
    width: 100%;
    position: static;
    max-height: none;
    padding-right: 0;
    display: none;
  }
  .filters.offen { display: block; }
  .filters-toggle {
    display: block;
    order: 1;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
  }
  /* Orlando 24.09.2026: Der Filter-Knopf stand unter der ganzen Liste, bei
     3513 Loops ist Eingrenzen mobil aber der erste Schritt. Jetzt steht der
     zugeklappte Knopf (39 px) ueber der Liste, die Filter klappen darunter
     auf. Mehr Platz kostet das nicht, die Liste beginnt nur 39 px tiefer. */
  .filters-toggle { order: 1; }
  .filters { order: 2; }
  main { order: 3; }

  .card { flex: 0 0 150px; }

  /* Listenzeilen (Orlando 24.09.2026): BPM und Tonart waren mobil komplett
     ausgeblendet, also genau die zwei Zahlen, nach denen ein Producer aussucht.
     Statt sie in dieselbe Reihe zu quetschen: zwei Zeilen als Raster, Titel
     oben, BPM/Tonart plus Downloadzahl darunter. Thumb links und die Knoepfe
     rechts stehen ueber beide Zeilen. Kostet keine Breite. Der Producer bleibt
     weg, der steht schon im Titel-Umfeld und ist hier immer @ndacompany. */
  .sample-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 1px;
    padding: 8px 10px;
  }
  .sample-row .thumb { grid-area: 1 / 1 / 3 / 2; }
  .sample-row .title { grid-area: 1 / 2 / 2 / 4; font-size: 13px; }
  .sample-row .meta {
    grid-area: 2 / 2 / 3 / 3;
    display: block; width: auto; font-size: 11px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .sample-row .dl-zahl { grid-area: 2 / 3 / 3 / 4; width: auto; text-align: left; font-size: 11px; }
  .sample-row .row-actions { grid-area: 1 / 4 / 3 / 5; }
  .sample-row .producer { display: none; }
  .row-actions { gap: 6px; }
  .row-actions .btn-similar { padding: 4px 8px; font-size: 10px; }
  .row-actions .icon-btn { width: 28px; height: 28px; }
  /* Teilen/Merken hinter "⋯", ganz rechts; Find Similar und Download bleiben sichtbar */
  .row-mehr-wrap { display: block; position: relative; order: 2; }
  .btn-mehr { display: flex; }
  .row-mehr {
    display: none;
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
    gap: 6px; padding: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  }
  .row-mehr.offen { display: flex; }

  /* Player-Leiste (Orlando 24.09.2026): "WAV ↓" ist der wichtigste
     Konto-Anlass der ganzen Seite und steckte mobil hinter "⋯", also zwei
     Tipser tief und unbeschriftet. Jetzt zwei Zeilen: oben Titel und die
     Knoepfe (mp3, Stern, WAV), unten die Abspielleiste ueber die volle
     Breite. Damit braucht es das "⋯"-Menue hier nicht mehr, und alle drei
     Knoepfe sind mit einem Tipser erreichbar. */
  /* Randlos, buendig wie eine Tab-Leiste statt floatende Karte */
  .player-bar {
    left: 0; right: 0; max-width: none; margin: 0;
    border-radius: 0; border-left: none; border-right: none;
    padding: 8px 12px; gap: 8px 10px;
    flex-wrap: wrap;
  }
  .player-info { max-width: none; flex: 1 1 0; min-width: 0; order: 1; }
  #player-title { font-size: 14px; }
  #player-sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .player-actions { order: 2; flex: 0 0 auto; gap: 6px; }
  .player-actions .btn-ghost { padding: 7px 10px; font-size: 12px; }
  #audio-el { order: 3; flex: 1 0 100%; width: 100%; height: 36px; }
  /* Kein Dropdown mehr: die Wrapper loesen sich auf wie am Desktop. */
  .player-more-btn { display: none; }
  .player-overflow-wrap { display: contents; }
  .player-overflow { display: contents; }

  /* Login/Signup-Modal responsive */
  .modal-box { width: calc(100vw - 32px); max-width: 340px; padding: 20px; }
}

@media (max-width: 420px) {
  /* Wirklich 130 px: ohne min-width:0 drueckt die Knopfreihe die Karte auf ~214 px */
  .card { flex: 0 0 130px; min-width: 0; padding: 12px; }
  .title-line { flex-wrap: wrap; row-gap: 0; }
  .card .card-bottom { flex-wrap: wrap; row-gap: 6px; }
  .card-bottom-icons { width: 100%; justify-content: space-between; }
  /* Seit dem zweizeiligen Player (24.09.2026) teilen sich Titel und Knoepfe
     die erste Reihe allein, die Abspielleiste hat die zweite. Der Reststand
     passt damit auch auf 390 px und bleibt sichtbar. */
  .player-actions .btn-ghost { padding: 7px 9px; font-size: 11px; }
}

/* Serverseitiger Block auf der Startseite (SEO, 19.09.2026): Einleitung und
   Links auf Artist-, Genre- und Loop-Kit-Seiten, damit Google sie findet. */
.seo-block { max-width: 1100px; margin: 40px auto 0; padding: 24px 20px 8px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 13px; }
.seo-block h2 { font-size: 15px; color: var(--text); margin: 0 0 8px; }
.seo-block h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 8px; color: var(--text-dim); }
.seo-block p { margin: 0 0 6px; max-width: 760px; line-height: 1.6; }
.seo-block .seo-links { display: flex; flex-wrap: wrap; gap: 6px; }
.seo-block .seo-links a { border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; color: var(--text-dim); text-decoration: none; font-size: 12px; }
.seo-block .seo-links a:hover { color: var(--text); border-color: var(--accent); }
/* Die drei Anleitungen im SEO-Block (24.09.2026): Titel als Link, dahinter
   Tempo und Instrumente aus den Eckdaten. Unauffaellig, aber echte Links. */
.seo-block .seo-guides { list-style: none; margin: 0 0 10px; padding: 0; }
.seo-block .seo-guides li { margin: 0 0 4px; line-height: 1.5; }
.seo-block .seo-guides a { color: var(--text); text-decoration: none; }
.seo-block .seo-guides a:hover { color: var(--accent); }
.seo-block .seo-guides span { color: var(--text-dim); font-size: 12px; margin-left: 6px; }

/* Zoomen ist seit 19.09.2026 erlaubt (Barrierefreiheit). Damit iOS beim
   Antippen eines Eingabefelds nicht von selbst hineinzoomt, brauchen Felder
   mobil mindestens 16px Schrift. */
@media (max-width: 760px) {
  input[type="text"], input[type="search"], input[type="email"], input[type="password"], input:not([type]), select, textarea { font-size: 16px; }
  #search { font-size: 16px; }   /* #search hat eine eigene, spezifischere Regel */
}

/* Hinweis statt Fehler im Anmelde-Fenster (Double-Opt-in, 23.09.2026) */
#auth-error.hinweis { color: var(--text); }

/* Sichtbare Einordnung ueber der Suche (Audit 25.09.2026): vorher war die
   einzige H1 auf sr-only geschaltet, Besucher sahen in den ersten Sekunden
   nur Suchfeld und Reihen. */
.claim { margin: 16px 0 0; padding: 0 24px; }
.claim h1 { font-size: 19px; font-weight: 500; line-height: 1.3; margin: 0; letter-spacing: 0; color: var(--text-dim); }
@media (max-width: 760px) {
  .claim { margin-top: 10px; padding: 0 12px; }
  .claim h1 { font-size: 15px; }
}

/* Barrierefreiheit (PageSpeed 25.09.2026): Links im SEO-Block waren nur ueber
   die Farbe erkennbar und lagen unter dem Kontrastwert. */
.seo-block a, .seo-guides a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.seo-block a:hover, .seo-guides a:hover { color: var(--accent); }