/* ═══════════════════════════════════════════ SHARED — colognebeats.com */

:root {
  --black:  #07060a;
  --dark:   #0f0d13;
  --card:   #161320;
  --dim:    #2a2633;
  --purp:   #393B53;
  --white:  #F2EDE6;
  --muted:  #a09ab0;
  --border: rgba(255,255,255,0.13);

  /* Markenakzent. Amber loeste im Juli 2026 das Burgundy #983C43 ab —
     Kontrast auf dem Seitenhintergrund steigt von 2,95:1 auf 6,09:1.
     WICHTIG: Text auf Amber-Flaechen muss dunkel sein (var(--black), 6,09:1).
     Weiss ergaebe nur 3,32:1 und faellt fuer normalen Text durch. */
  --amber:   #F25C24;
  --amber-l: #FF7A45;   /* Hover + Akzenttext auf dunkel — 7,81:1 */
  --amber-g: rgba(242,92,36,0.1);

  /* Alte Namen aus der Burgundy-Zeit. Nicht umbenannt, weil sie an rund
     180 Stellen in 13 HTML- und 6 JS-Dateien stehen. */
  --burg:   var(--amber);
  --burg-l: var(--amber-l);
  --burg-g: var(--amber-g);
  --f: 'Rubik', 'Rubik Fallback', sans-serif;
  /* Wortmarke — Overpass ist die freie Interstate-Alternative (Google Fonts).
     Bewusst nicht Geist wie im Brandbook: Interstate-Anmutung, kein Default-Look. */
  --f-logo: 'Overpass', 'Overpass Fallback', sans-serif;
  --f-head: 'Syne', 'Syne Fallback', sans-serif; /* Ueberschriften: eine Stelle statt Einzelangaben je Seite */
}

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

html { scroll-behavior:smooth; }

body {
  background:var(--black); color:var(--white);
  font-family:var(--f); -webkit-font-smoothing:antialiased;
  /* Fuss immer unten, auf allen Seiten gleich (body wird beim weichen Seitenwechsel nicht getauscht) */
  min-height:100vh; display:flex; flex-direction:column;
}
body > * { flex-shrink:0; }
#swup { flex:1 0 auto; width:100%; }
/* Häufige Fragen (aufklappbar, <details>): Pool und Startseite */
.cb-faq { display:flex; flex-direction:column; gap:12px; }
.cb-faq details { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:0 22px; }
.cb-faq summary {
  list-style:none; cursor:pointer; padding:20px 0;
  font-weight:600; font-size:16px; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.cb-faq summary::-webkit-details-marker { display:none; }
.cb-faq summary::after { content:'+'; color:var(--burg-l); font-size:22px; font-weight:400; transition:transform .2s; }
.cb-faq details[open] summary::after { transform:rotate(45deg); }
.cb-faq p { color:var(--muted); font-size:15px; line-height:1.6; padding:0 0 20px; }
.cb-faq a { color:var(--white); }
/* Einleitungssatz ueber den Fragen (Startseite): Beschreibung + Links fuer Google, bewusst nicht im Kopfbereich (Daniel 04.10.) */
.cb-faq-intro { color:var(--muted); font-size:15px; line-height:1.6; margin:-8px 0 20px; max-width:720px; }
.cb-faq-intro a { color:var(--white); }
/* Nummerierte Schritte (<ol class="cb-steps">): Anleitungen auf Landingpages */
.cb-steps { list-style:none; counter-reset:cb-step; display:flex; flex-direction:column; gap:12px; max-width:760px; }
.cb-steps li {
  counter-increment:cb-step; position:relative; padding:18px 20px 18px 64px;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  color:var(--muted); font-size:15px; line-height:1.6;
}
.cb-steps li::before {
  content:counter(cb-step, decimal-leading-zero); position:absolute; left:20px; top:18px;
  font-family:var(--f-head); font-weight:800; font-size:14px; letter-spacing:.08em; color:var(--burg-l);
}
.cb-steps strong { color:var(--white); }
/* Vergleichstabellen: Rahmen scrollt bei Bedarf waagerecht, nie die Seite */
.cb-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:14px; }
.cb-table { width:100%; min-width:720px; border-collapse:collapse; font-size:14px; line-height:1.5; }
.cb-table th, .cb-table td { padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--border); }
.cb-table thead th { background:var(--card); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.cb-table tbody tr:last-child td, .cb-table tbody tr:last-child th { border-bottom:none; }
.cb-table tbody th { font-weight:600; color:var(--white); }
.cb-table td { color:var(--muted); }
.cb-table a { color:var(--white); text-underline-offset:3px; }
.cb-table-note { margin-top:12px; color:var(--muted); font-size:13px; line-height:1.6; max-width:76ch; }
/* Lange Adressen (z. B. Stream-URL in radio.html) umbrechen statt die Seite mobil zu verbreitern */
.cb-faq p { overflow-wrap:anywhere; }
/* Cookie-Banner (js/cb-utils.js, CB_EINWILLIGUNG): beide Knöpfe gleich gewichtet; über dem Player unten (--player-h) */
.cb-banner {
  position:fixed; z-index:1000; left:16px; right:16px; bottom:calc(var(--player-h, 0px) + 16px);
  max-width:560px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; box-shadow:0 12px 40px rgba(0,0,0,.5); color:var(--white);
}
.cb-banner[hidden] { display:none; }
.cb-banner-titel { font-weight:700; font-size:16px; margin-bottom:6px; }
.cb-banner-text { color:var(--muted); font-size:14px; line-height:1.55; }
.cb-banner-text a { color:var(--white); }
.cb-banner-knoepfe { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.cb-banner-knopf {
  background:transparent; color:var(--white); border:1px solid var(--white); border-radius:999px;
  padding:11px 16px; font:600 14px var(--f); cursor:pointer;
}
.cb-banner-knopf:hover, .cb-banner-knopf:focus-visible { background:var(--white); color:var(--black); }
.cb-banner-knoepfe-eins { grid-template-columns:1fr; }
.cb-banner-text + .cb-banner-text { margin-top:8px; }
/* Nur für Screenreader und Suchmaschinen sichtbar (z. B. Überschrift über eingebetteten Tools) */
.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; }

/* ─── NAV ────────────────────────────────────────────────────────── */

.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:60px; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(7,6,10,0.9); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:background .3s;
}
/* Lockup-Proportionen aus assets/logo/svg/lockup-horizontal-primary.svg:
   Marke 80x40 Einheiten, Text 34, Abstand 24 -> Text = .85x, Abstand = .6x Markenhoehe. */
.nav-logo {
  text-decoration:none; color:var(--white);
  display:flex; flex-direction:row; align-items:center; gap:14px; line-height:1;
}
.nav-logo-mark { display:block; width:48px; height:24px; flex-shrink:0; } /* 24px = Brandbook-Minimum Web */
/* Die zwei letzten Balken sind der Peak — ohne sie liest sich die Marke als
   Strichmuster statt als Aussteuerungs-Pegel. Variante "Invers · auf Ink". */
.nav-logo-mark .peak, .f-logo-mark .peak { fill:var(--amber); }
.nav-logo-text { font-family:var(--f-logo); font-weight:700; font-size:20px; letter-spacing:-.0265em; }
/* Mono-Variante: ein Ton. Punkt erbt die Textfarbe.
   Fuer die Amber-Variante spaeter hier und in .nav-logo-mark auf var(--amber). */
.nav-logo-text span { color:inherit; }

.nav-links { display:flex; align-items:center; gap:0; list-style:none; }
.nav-links a {
  padding:8px 14px; font-family:var(--f); font-size:13px; font-weight:500;
  color:var(--muted); text-decoration:none; transition:color .15s; letter-spacing:.01em; white-space:nowrap;
}
.nav-links a:hover, .nav-links a.on { color:var(--white); }
.nav-links a.on { position:relative; }
.nav-links a.on::after {
  content:''; position:absolute; bottom:2px; left:14px; right:14px;
  height:1px; background:var(--burg);
}

/* „Weitere Produkte“: Dropdown in der Leiste, öffnet bei Hover und Fokus */
.nav-more { position:relative; }
.nav-more-btn {
  padding:8px 14px; background:none; border:none; cursor:pointer;
  font-family:var(--f); font-size:13px; font-weight:500; letter-spacing:.01em;
  color:var(--muted); transition:color .15s; white-space:nowrap;
}
.nav-more-btn::after { content:''; display:inline-block; margin-left:6px; vertical-align:2px;
  border:4px solid transparent; border-top-color:currentColor; border-bottom:0; }
.nav-more:hover .nav-more-btn, .nav-more:focus-within .nav-more-btn { color:var(--white); }
.nav-more-list {
  display:none; position:absolute; top:100%; left:0; min-width:190px; z-index:210;
  list-style:none; margin:0; padding:6px; margin-top:6px;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
}
.nav-more-list::before { content:''; position:absolute; left:0; right:0; top:-8px; height:8px; } /* Hover-Brücke */
.nav-more:hover .nav-more-list, .nav-more:focus-within .nav-more-list { display:block; }
.nav-more-list a, .nav-soon { display:block; padding:9px 12px; border-radius:6px; white-space:nowrap; }
.nav-more-list a:hover { background:rgba(255,255,255,.05); }
.nav-soon { font-family:var(--f); font-size:13px; font-weight:500; color:var(--muted); opacity:.6; cursor:default; }
.nav-soon em, .mobile-menu-soon em, .nav-tag { font-style:normal; font-size:11px; margin-left:6px; color:var(--burg-l); }

.nav-burger { display:none; background:none; border:none; cursor:pointer; color:var(--white); }

/* ─── NAV CTA „Community beitreten“ ───────────────────────────────── */
/* 01.10.: Die Leiste bleibt beim weichen Seitenwechsel stehen, die Seiten-CSS wechselt.
   Stand die Glitch-CSS nur in index.html, lagen nach Home → DJs die drei Textebenen
   nebeneinander. Darum hier für alle Seiten. */
.nav > .btn-pri-wrap { position:relative; display:inline-block; flex-shrink:0; }
.nav .btn-pri {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:8px 16px; background:var(--burg); color:var(--black); border:none; border-radius:6px;
  font-family:var(--f); font-size:13px; font-weight:700; cursor:pointer;
  text-decoration:none; white-space:nowrap; overflow:hidden;
  transition:transform .15s ease-out; z-index:1;
}
.nav .btn-pri:hover { background:var(--burg-l); }
.nav .btn-pri .sv-layer {
  position:absolute; inset:0; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; font-weight:700; font-size:13px;
  font-family:var(--f); white-space:nowrap;
}
.nav .btn-pri .sv-layer-1 { background:var(--burg); color:cyan; }
.nav .btn-pri .sv-layer-2 { background:var(--burg); color:#e040fb; }
.nav .btn-pri .sv-noise {
  position:absolute; inset:-50%; width:200%; height:200%; pointer-events:none; opacity:0;
  background:repeating-radial-gradient(circle at 50% 50%, transparent 0, rgba(0,0,0,.15) 1px, transparent 2px);
  transition:opacity .3s;
}
.nav .btn-pri .sv-slice {
  position:absolute; left:-10%; width:120%; height:2px;
  background:rgba(255,255,255,.7); opacity:0; pointer-events:none;
  animation:svSlice 3s linear infinite;
}
.nav > .btn-pri-wrap:hover .btn-pri {
  animation:svBtnGlitch .3s steps(2) infinite;
  box-shadow:0 0 16px rgba(255,255,255,.3), 0 0 24px rgba(0,255,255,.4), 0 0 32px rgba(224,64,251,.4);
}
.nav > .btn-pri-wrap:hover .sv-layer-1 { opacity:1; animation:svLayer1 .4s steps(2) infinite; }
.nav > .btn-pri-wrap:hover .sv-layer-2 { opacity:1; animation:svLayer2 .4s steps(2) infinite; }
.nav > .btn-pri-wrap:hover .sv-noise   { opacity:1; animation:svNoise .2s steps(2) infinite; }
@media(max-width:800px) { .nav > .btn-pri-wrap { display:none; } }

/* ─── NAV PLAYER ─────────────────────────────────────────────────── */

/* 01.10.: Nur der Player gibt bei Platzmangel nach (Titel wird gekürzt); Links, CTA und
   „Anmelden“ behalten ihre Breite. Vorher schob ein langer Titel „Anmelden“ bei 1280px aus der Leiste. */
.nav > * { flex-shrink:0; }
.nav-player {
  display:flex; align-items:center; gap:10px; margin-left:auto; margin-right:16px;
  flex-shrink:1; min-width:0;
}
.nav-play-btn {
  width:44px; height:44px; border-radius:50%; background:var(--burg); border:none;
  color:var(--black); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s; flex-shrink:0;
}
.nav-play-btn:hover { background:var(--burg-l); }
.nav-play-btn svg { width:16px; height:16px; }
.nav-player-info { display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; }
/* Zwischen 1080 und 1439px reicht der Platz neben Links, CTA und „Anmelden“ nicht für den Titel –
   statt eines abgeschnittenen Buchstabens nur der Play-Knopf (01.10.) */
@media(min-width:1080px) and (max-width:1439px) { .nav-player-info { display:none; } }
/* 07.10.: Mit „Kollektive“ ein Menuepunkt mehr. Gemessen (index.html): „Anmelden“ ragte bei 1080px 76px,
   bei 1280px 51px ueber den Rand. Bis 1599px daher engere Abstaende zwischen den Links (14 -> 8px).
   08.10.: Erst bis 1439px, dann blieb bei 1440px nur ein 9px-Rest vom Titel. Ab 1440px jetzt gut 120px Titel. */
@media(min-width:1080px) and (max-width:1599px) { .nav-links a, .nav-more-btn { padding-left:8px; padding-right:8px; } }
/* 19.10.: Mit „Sets“ noch ein Menuepunkt. CI (navigation-swup): „Anmelden“ ragte bei 1080px 24px ueber den Rand.
   Bis 1439px daher noch etwas enger (8 -> 5px), ab 1440px bleibt 8px. */
@media(min-width:1080px) and (max-width:1439px) { .nav-links a, .nav-more-btn { padding-left:5px; padding-right:5px; } }
.nav-live-dot {
  width:8px; height:8px; border-radius:50%; background:#e53e3e; flex-shrink:0;
  opacity:0; transition:opacity .3s;
}
.nav-live-dot.active { opacity:1; animation:pulse-dot 1.5s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:.4; } }
.nav-track {
  font-size:13px; color:var(--muted); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:180px;
}

/* ─── MOBILE MENU ────────────────────────────────────────────────── */

.mobile-menu {
  display:none; position:fixed; top:60px; left:0; right:0; z-index:190;
  background:rgba(7,6,10,0.98); border-bottom:1px solid var(--border);
  padding:16px 28px; flex-direction:column; gap:4px;
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  display:block; padding:14px 0; border-bottom:1px solid var(--border);
  font-family:var(--f); font-size:17px; font-weight:600; color:var(--white);
  text-decoration:none; transition:color .15s;
}
.mobile-menu a:hover { color:var(--burg-l); }
.mobile-menu a.on { color:var(--burg-l); } /* aktive Seite (03.10., vorher Inline-Style je Seite) */
.mobile-menu a:last-child { border-bottom:none; }
.mobile-menu-label {
  padding:18px 0 4px; font-family:var(--f); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--burg-l);
}
.mobile-menu-soon { display:block; padding:14px 0; font-family:var(--f); font-size:17px; font-weight:600; color:var(--muted); opacity:.6; }

/* ─── DJ-FILTER (Startseite + Verzeichnis, gebaut von js/dj-optionen.js) ─── */
.dj-filter { display:flex; flex-direction:column; gap:10px; min-width:0; max-width:100%; }
.dj-filter-gruppe {
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px;
}
.dj-filter-gruppe::-webkit-scrollbar { display:none; }
.dj-filter-titel {
  flex-shrink:0; min-width:52px; font-family:var(--f); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.f-btn {
  padding:10px 18px; border:1px solid var(--border); background:none;
  color:var(--muted); font-family:var(--f); font-size:12px; font-weight:600;
  letter-spacing:.06em; border-radius:20px; cursor:pointer; transition:all .15s;
  white-space:nowrap; flex-shrink:0; min-height:44px; display:inline-flex; align-items:center;
}
.f-btn:hover { border-color:rgba(255,255,255,.2); color:var(--white); }
.f-btn.on { background:var(--burg); border-color:var(--burg); color:var(--black); }

/* ─── FOOTER ─────────────────────────────────────────────────────── */

.footer {
  border-top:1px solid var(--border); padding:22px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.f-logo { display:flex; flex-direction:row; align-items:center; gap:12px; }
.f-logo-mark { display:block; width:40px; height:20px; flex-shrink:0; color:var(--white); }
.f-logo-text { font-family:var(--f-logo); font-weight:700; font-size:17px; letter-spacing:-.0265em; }
.f-logo-text span { color:inherit; }
.f-copy { font-size:12px; color:var(--muted); }
.f-legal { display:flex; flex-wrap:wrap; gap:8px 16px; } /* bricht mobil um: „Wie finanziert sich Colognebeats?“ (cb-utils.js) ist lang */
.f-legal a { font-size:12px; color:var(--muted); text-decoration:none; transition:color .15s; }
.f-legal a:hover { color:var(--white); }

/* ─── SWUP TRANSITIONS ───────────────────────────────────────────── */

.transition-fade { opacity:1; transition:opacity .2s ease; }
html.is-changing .transition-fade { opacity:0; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────── */

@media(max-width:1079px) {
  .nav-links { display:none; }
  .nav-burger { display:flex; }
}
/* 30.09.: Mit „Weitere Produkte“ neu gemessen (index.html, CTA geladen):
   Bedarf mit Wortmarke ~1221px, nur Bildmarke ~1071px. Daher Burger bis
   1079px, Bildmarke allein von 1080 bis 1229px.
   Frühere Messung: */
/* Engpass gemessen an index.html mit geladenem CTA:
   Logo 223 + Links 471 + Player 136 + "Community beitreten" 206 + Padding 56
   = 1092px. Zwischen 801 und 1149px sind die Links noch sichtbar, der Platz
   reicht aber nicht — dort nur die Bildmarke. Ab 800px abwaerts uebernimmt
   der Burger, dann ist wieder Platz fuer die Wortmarke.
   Der CTA wird per JS nachgeladen und fehlt in einer Messung direkt nach
   dem Parsen — deshalb hier grosszuegig gerechnet. */
@media(min-width:1080px) and (max-width:1229px) {
  .nav-logo-text { display:none; }
}
@media(max-width:640px) {
  .nav-player-info { display:none; }
  .nav-player { margin-right:8px; }
  .footer { flex-direction:column; gap:12px; align-items:flex-start; }
}
/* Unter 375px wird es auch mit Burger zu eng (Bedarf ~355px). */
@media(max-width:374px) {
  .nav-logo-text { display:none; }
}

/* ── Textseiten (Über, Impressum, Datenschutz, 404) ──────────────────────────
   Vorher je Seite kopiert. Die Überschrift darf auf schmalen Handys nicht über den Rand
   ragen: „Colognebeats“ in Syne 800 ist bei 32px ~338px breit, Platz sind bei 375px
   Bildschirm mit fester Scrollleiste (Chrome unter Linux/Windows) nur 328px. */
.content { max-width:700px; margin:0 auto; padding:120px 28px 80px; }
.content h1 { font-family:var(--f-head); font-size:clamp(28px,6vw,48px); font-weight:800; margin-bottom:32px; letter-spacing:-.02em; overflow-wrap:break-word; hyphens:auto; }
.content h2 { font-size:20px; font-weight:700; margin-top:32px; margin-bottom:12px; }
.content h3 { font-size:16px; font-weight:600; margin-top:20px; margin-bottom:8px; }
.content p, .content li { font-size:15px; line-height:1.7; color:rgba(242,237,230,.85); margin-bottom:12px; }
.content ul { padding-left:20px; }
.content a { color:var(--burg-l); text-decoration:underline; }
@media(max-width:640px) { .content { padding:100px 16px 60px; } }

/* ── Community-Regeln (community.html, intro.html; Wortlaut wie in Bettermode) ── */
.cb-regeln { list-style:none; counter-reset:regel; margin-top:28px; padding:0; display:grid; gap:12px; max-width:720px; }
.cb-regeln li { counter-increment:regel; display:grid; grid-template-columns:36px 1fr; column-gap:14px;
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px 20px;
  color:var(--muted); font-size:15px; line-height:1.6; }
.cb-regeln li::before { content:counter(regel); grid-row:span 2; font-family:var(--f-head); font-weight:800; font-size:22px; color:var(--burg-l); line-height:1.2; }
.cb-regeln li strong { display:block; color:var(--white); font-size:17px; font-weight:700; margin-bottom:2px; }
.cb-regeln-karten { margin-top:18px; font-size:15px; color:var(--white); font-weight:600; }

/* ── Formulare & Konto (gemeinsam für Konto, Pool, Verzeichnis) ───────────── */
:root {
  --ok:     #5fd39a;
  --fehler: #ef6b6b;
}
.cb-btn, .cb-btn-sec {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:999px;
  font-family:var(--f); font-size:15px; font-weight:600; cursor:pointer;
  text-decoration:none; transition:transform .15s, background .15s, border-color .15s;
}
.cb-btn { background:var(--burg); color:var(--black); border:1px solid var(--burg); }
.cb-btn:hover { background:var(--burg-l); border-color:var(--burg-l); transform:translateY(-2px); }
.cb-btn:disabled { opacity:.6; cursor:wait; transform:none; }
.cb-btn-sec { background:transparent; color:var(--white); border:1px solid var(--border); }
.cb-btn-sec:hover { border-color:var(--white); transform:translateY(-2px); }
.cb-btn-sec:disabled { opacity:.45; cursor:not-allowed; transform:none; border-color:var(--border); }
.cb-link { background:none; border:none; padding:0; color:var(--burg-l); font:inherit; font-size:14px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.cb-link:disabled { color:var(--muted); cursor:default; text-decoration:none; }

.auth-box { max-width:440px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:32px; text-align:left; }
.auth-tabs { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:24px; background:var(--dark); border-radius:10px; padding:4px; } /* wrap: viele Reiter (z. B. Radio-Status) bleiben auf dem Handy erreichbar */
.auth-tab { flex:1; padding:10px 8px; border:none; border-radius:7px; background:transparent; color:var(--muted); font-family:var(--f); font-size:14px; font-weight:600; cursor:pointer; transition:all .15s; }
.auth-tab.active { background:var(--burg); color:var(--black); }
.auth-form { display:flex; flex-direction:column; gap:16px; }
/* hidden-Attribut gilt immer, auch wenn eine Klasse display setzt */
[hidden] { display:none !important; }
.auth-field { display:flex; flex-direction:column; gap:6px; }
.auth-field label { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.auth-field .hilfe { font-size:13px; color:var(--muted); }
.cb-input {
  width:100%; padding:15px 18px; border-radius:12px;
  background:var(--dark); border:1px solid var(--border); color:var(--white);
  font-family:var(--f); font-size:16px;
}
.cb-input:focus { outline:none; border-color:var(--burg-l); }
.cb-input[aria-invalid="true"] { border-color:var(--fehler); }
.pw-wrap { position:relative; }
.pw-wrap .cb-input { padding-right:92px; }
.pw-zeigen { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--muted); font-family:var(--f); font-size:13px; font-weight:600; cursor:pointer; padding:8px; }
/* Anmeldung mit Google — Knopf nach Googles Vorgaben (weiss, G-Logo, dunkle Schrift) */
.auth-google { margin-bottom:20px; }
.cb-btn-google {
  display:flex; align-items:center; justify-content:center; gap:12px; width:100%;
  padding:13px 18px; border-radius:999px; background:#fff; color:#1f1f1f; border:1px solid #dadce0;
  font-family:var(--f); font-size:15px; font-weight:600; text-decoration:none; transition:transform .15s, box-shadow .15s;
}
.cb-btn-google:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.35); }
.cb-btn-google svg { width:20px; height:20px; flex:none; }
.auth-oder { display:flex; align-items:center; gap:12px; margin-top:20px; color:var(--muted); font-size:13px; }
.auth-oder::before, .auth-oder::after { content:''; flex:1; height:1px; background:var(--border); }
.meldung { border-left:4px solid var(--border); background:var(--dark); border-radius:8px; padding:12px 14px; font-size:14px; line-height:1.5; color:var(--white); }
.meldung:empty { display:none; }
.meldung.fehler { border-left-color:var(--fehler); }
.meldung.ok { border-left-color:var(--ok); }
@media(max-width:480px) {
  .auth-box { padding:24px 18px; border-radius:14px; }
}

/* Auswahl-Chips (Genres, Urteile) — DJ-Profil und Promo Pool */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { padding:8px 14px; border-radius:999px; border:1px solid var(--border); background:var(--dark); color:var(--muted); font-family:var(--f); font-size:14px; cursor:pointer; }
.chip[aria-pressed="true"] { background:var(--burg); border-color:var(--burg); color:var(--black); font-weight:600; }

/* FLINTA* und queer: freiwillige Selbstangabe im DJ-Profil, auf Karten (.dj-tag) und im Profilkopf (.prof-tag) */
.dj-tag.dj-tag-merkmal, .prof-tag.merkmal { background:rgba(190,150,255,.22); border-color:rgba(190,150,255,.5); color:#e2d4ff; }

/* Konto-Knopf in der Navigation: „Anmelden“ bzw. Künstlername (setzt cb-utils.js) */
.nav-konto { display:inline-flex; align-items:center; gap:8px; margin-left:12px; padding:8px 16px; border:1px solid var(--border); border-radius:999px;
  color:var(--white); font:600 14px var(--f); text-decoration:none; white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.nav-konto:hover { border-color:var(--burg); color:var(--burg-l); }
.nav-konto.angemeldet::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--ok); flex-shrink:0; }
.mobile-konto { font-weight:700; color:var(--burg-l) !important; }
@media (max-width:1079px) { .nav-konto { display:none; } }

/* Original-Plattform-Icons (img/icons, Simple Icons CC0) — eine Quelle für alle Seiten */
.cb-icon { display:inline-block; width:1.25em; height:1.25em; flex-shrink:0; background:currentColor;
  -webkit-mask:var(--icon) center / contain no-repeat; mask:var(--icon) center / contain no-repeat; }
.cb-icon-instagram { --icon:url(/img/icons/instagram.svg); }
.cb-icon-soundcloud { --icon:url(/img/icons/soundcloud.svg); }
.cb-icon-spotify { --icon:url(/img/icons/spotify.svg); }
.cb-icon-mixcloud { --icon:url(/img/icons/mixcloud.svg); }
.cb-icon-youtube { --icon:url(/img/icons/youtube.svg); }
.cb-icon-beatport { --icon:url(/img/icons/beatport.svg); }
.cb-icon-bandcamp { --icon:url(/img/icons/bandcamp.svg); }
.cb-icon-applemusic { --icon:url(/img/icons/applemusic.svg); }
.cb-icon-tiktok { --icon:url(/img/icons/tiktok.svg); }
.cb-icon-x { --icon:url(/img/icons/x.svg); }
.cb-icon-facebook { --icon:url(/img/icons/facebook.svg); }

/* ── Teilen-Menü (CB.teilen): WhatsApp, SMS, Instagram, Link ─────── */
.cb-icon-whatsapp { --icon:url(/img/icons/whatsapp.svg); }
.cb-icon-sms { --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.cb-icon-link { --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M10 14a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 10a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E"); }
.cb-icon-oeffnen { --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-9 9'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); }
.cb-icon-kopieren { --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a1 1 0 0 1 1-1h10'/%3E%3C/svg%3E"); }
.cb-icon-haken { --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.cb-teilen { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.35); }
.cb-teilen-box { position:fixed; width:280px; background:var(--card); border:1px solid var(--border); border-radius:18px;
  padding:10px; box-shadow:0 18px 50px rgba(0,0,0,.55); color:var(--white); font-family:var(--f); }
.cb-teilen-kopf { display:flex; align-items:center; justify-content:space-between; padding:6px 8px 10px; font-size:15px; }
.cb-teilen-zu { background:none; border:0; color:var(--muted); font-size:24px; line-height:1; cursor:pointer; padding:0 4px; }
.cb-teilen-ziel { display:flex; align-items:center; gap:14px; width:100%; padding:12px 10px; border:0; border-radius:12px;
  background:none; color:inherit; font:600 15px var(--f); text-align:left; cursor:pointer; }
.cb-teilen-ziel:hover, .cb-teilen-ziel:focus-visible { background:var(--dim); outline:none; }
.cb-teilen-ziel .cb-icon { width:22px; height:22px; }
.cb-teilen-ziel[data-ziel=whatsapp] .cb-icon { color:#25D366; }
.cb-teilen-ziel[data-ziel=instagram] .cb-icon { color:#FF0069; }
.cb-teilen-ziel[data-ziel=sms] .cb-icon { color:var(--ok); }
.cb-teilen-ziel small { display:block; font-weight:400; font-size:12px; color:var(--muted); }
.cb-teilen-status { min-height:1.2em; padding:4px 10px 2px; font-size:13px; color:var(--ok); overflow-wrap:anywhere; }
@media (max-width:600px) {
  .cb-teilen-box { left:0; right:0; bottom:0; width:auto; border-radius:20px 20px 0 0; padding:12px 14px calc(14px + env(safe-area-inset-bottom)); }
  .cb-teilen-ziel { padding:15px 10px; font-size:16px; }
}

/* Glitch-Keyframes für den Leisten-Knopf und den Hero-Play-Knopf (index.html) */
@keyframes svLayer1 {
  0%   { transform:translate(-12px,-6px) scale(1.1)  skew(-8deg); clip-path:polygon(0 20%,100% 20%,100% 55%,0 55%); }
  25%  { transform:translate(12px, 6px)  scale(1.2)  skew(8deg);  clip-path:polygon(0 30%,100% 30%,100% 65%,0 65%); }
  50%  { transform:translate(-9px, 3px)  scale(.9)   skew(-4deg); clip-path:polygon(0 10%,100% 10%,100% 45%,0 45%); }
  75%  { transform:translate(9px, -3px)  scale(1.25) skew(4deg);  clip-path:polygon(0 40%,100% 40%,100% 75%,0 75%); }
  100% { transform:translate(-12px,-6px) scale(1.1)  skew(-8deg); clip-path:polygon(0 20%,100% 20%,100% 55%,0 55%); }
}
@keyframes svLayer2 {
  0%   { transform:translate(12px, 6px)  scale(1.1)  skew(8deg);  clip-path:polygon(0 50%,100% 50%,100% 85%,0 85%); }
  25%  { transform:translate(-12px,-6px) scale(1.2)  skew(-8deg); clip-path:polygon(0 60%,100% 60%,100% 90%,0 90%); }
  50%  { transform:translate(9px, -3px)  scale(.9)   skew(4deg);  clip-path:polygon(0 40%,100% 40%,100% 70%,0 70%); }
  75%  { transform:translate(-9px, 3px)  scale(1.25) skew(-4deg); clip-path:polygon(0 70%,100% 70%,100% 100%,0 100%); }
  100% { transform:translate(12px, 6px)  scale(1.1)  skew(8deg);  clip-path:polygon(0 50%,100% 50%,100% 85%,0 85%); }
}
@keyframes svNoise {
  0%   { transform:translate(0,0); }
  20%  { transform:translate(-4%,-4%); }
  40%  { transform:translate(8%,4%); }
  60%  { transform:translate(-4%,8%); }
  80%  { transform:translate(8%,-4%); }
  100% { transform:translate(0,0); }
}
@keyframes svSlice {
  0%   { top:-10%; opacity:0; }
  1%   { opacity:.6; }
  3%   { opacity:0; }
  50%  { top:110%; }
  100% { top:110%; }
}
@keyframes svBtnGlitch {
  0%   { transform:translate(0)         scale(1.04); }
  25%  { transform:translate(-5px,2px)  scale(1.06) skew(-3deg); }
  50%  { transform:translate(5px,-2px)  scale(1.04) skew(3deg); }
  75%  { transform:translate(-6px,-2px) scale(1.02) skew(-2deg); }
  100% { transform:translate(0)         scale(1.04); }
}