/* ============================================================
   FOTOBOX-DIGITAL / DJ Dirk – Moods
   12 Farbwelten, umschaltbar über  <html data-mood="…">
   Tokens:
     --bg          Seitenhintergrund
     --surface     Karte / Panel
     --surface-2   abgesetzte Fläche (Chips, Inputs)
     --border      Linien und Rahmen
     --text        Fließtext / Überschriften
     --muted       Nebentext
     --accent      Aktionsfarbe (Buttons, Aktivzustand)
     --accent-soft helle Variante des Akzents
     --on-accent   Textfarbe auf --accent
     --font        Schriftfamilie (Standard: Systemschrift)
   ============================================================ */

:root {
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .18), 0 4px 16px rgb(0 0 0 / .12);
  --shadow-2: 0 8px 40px rgb(0 0 0 / .28);

  --ok:    #4caf7d;
  --warn:  #d8a13a;
  --error: #d05a4e;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Standard-Mood: DJ Dirk dunkel (greift, solange kein data-mood gesetzt ist) */
  color-scheme: dark;
  --bg:#2e2e2c; --surface:#454543; --surface-2:#52514d; --border:#6e655b;
  --text:#f2efeb; --muted:#bab2a8; --accent:#c0997f; --accent-soft:#c2ad9a; --on-accent:#2e2e2c;
}

/* ---------- 1 · Gold auf Schwarz ---------- */
[data-mood="gold-nacht"] {
  color-scheme: dark;
  --bg:#0e0e0e; --surface:#191a19; --surface-2:#232421; --border:#34352f;
  --text:#f5e9db; --muted:#a2988a; --accent:#c9a063; --accent-soft:#f2dcb2; --on-accent:#161612;
}

/* ---------- 2 · Tiefschwarz ---------- */
[data-mood="nacht-tief"] {
  color-scheme: dark;
  --bg:#000000; --surface:#0e0e0e; --surface-2:#181817; --border:#2a2a28;
  --text:#f6f2ee; --muted:#8e877e; --accent:#f2dcb2; --accent-soft:#fff3dc; --on-accent:#111110;
}

/* ---------- 3 · Anthrazit & Gold ---------- */
[data-mood="anthrazit-gold"] {
  color-scheme: dark;
  --bg:#1e1f1e; --surface:#272826; --surface-2:#31322f; --border:#43443f;
  --text:#f5e9db; --muted:#ada396; --accent:#c9a063; --accent-soft:#eac88e; --on-accent:#1a1a17;
}

/* ---------- 4 · Creme & Gold ---------- */
[data-mood="creme-hell"] {
  color-scheme: light;
  --bg:#f7ede0; --surface:#efe1ce; --surface-2:#e4d2b9; --border:#be9c6e;
  --text:#241f18; --muted:#574b3b; --accent:#8a5f28; --accent-soft:#c9a063; --on-accent:#fff8ee;
}

/* ---------- 5 · Champagner ---------- */
[data-mood="champagner"] {
  color-scheme: light;
  --bg:#e5d4c1; --surface:#f1e5d6; --surface-2:#d6c0a6; --border:#ac8a63;
  --text:#2a2318; --muted:#544737; --accent:#7c5420; --accent-soft:#b98a4a; --on-accent:#fff6ea;
}

/* ---------- 6 · Weiß pur ---------- */
[data-mood="weiss-pur"] {
  color-scheme: light;
  --bg:#ede9e3; --surface:#f9f7f4; --surface-2:#e1dbd2; --border:#afa599;
  --text:#1b1917; --muted:#514a43; --accent:#6e5836; --accent-soft:#a98c5c; --on-accent:#ffffff;
}

/* ---------- 7 · DJ Dirk hell ---------- */
[data-mood="djdirk-hell"] {
  color-scheme: light;
  --bg:#f2efeb; --surface:#faf8f5; --surface-2:#e6e0d8; --border:#b2a99d;
  --text:#3a3a38; --muted:#5a5248; --accent:#8e5e52; --accent-soft:#c0997f; --on-accent:#feefe1;
}

/* ---------- 8 · Schiefer & Gold hell ---------- */
[data-mood="schiefer-hell"] {
  color-scheme: light;
  --bg:#edf1f4; --surface:#f8fafc; --surface-2:#dde5eb; --border:#a3b1bc;
  --text:#2a3138; --muted:#54616b; --accent:#8a6636; --accent-soft:#c4a173; --on-accent:#ffffff;
}

/* ---------- 9 · Schiefer & Gold dunkel ---------- */
[data-mood="schiefer-dunkel"] {
  color-scheme: dark;
  --bg:#2b3239; --surface:#38414a; --surface-2:#454f59; --border:#5c6875;
  --text:#e8eef2; --muted:#a7b3bd; --accent:#c4a173; --accent-soft:#dcc095; --on-accent:#23292f;
}

/* ---------- 10 · DJ Dirk dunkel  (Standard) ---------- */
[data-mood="djdirk-dunkel"] {
  color-scheme: dark;
  --bg:#2e2e2c; --surface:#454543; --surface-2:#52514d; --border:#6e655b;
  --text:#f2efeb; --muted:#bab2a8; --accent:#c0997f; --accent-soft:#c2ad9a; --on-accent:#2e2e2c;
}

/* ---------- 11 · Neon Night  (Violett → Pink, Club-Look) ----------
   Fast schwarzer Raum, aus dem violett-pinkes Bühnenlicht leuchtet.
   Akzent nur sparsam: Buttons, Logo, Zähler, Glow im Hintergrund.
   Schrift Montserrat – lokal aus assets/fonts, kein Google-Abruf.     */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("fonts/montserrat-latin-900-normal.woff2") format("woff2"); }

[data-mood="neon-night"] {
  color-scheme: dark;
  --bg:#0b0c0f; --surface:#14161a; --surface-2:#1c1e25; --border:#2a2c34;
  --text:#ffffff; --muted:#8c93a4; --accent:#8b5cf6; --accent-soft:#c4b5fd; --on-accent:#ffffff;

  --pink:#ec4899;
  --grad-brand: linear-gradient(135deg, #8b5cf6, #ec4899);
  --grad-text:  linear-gradient(90deg, #a78bfa, #f472b6);
  --glow: 0 8px 24px rgb(139 92 246 / .35);
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-sm: 12px;
  --radius:    16px;
  --radius-lg: 24px;
}

/* Überschriften: fett und eng gesetzt */
[data-mood="neon-night"] :is(h1, h2) { font-weight: 900; letter-spacing: -.025em; }

/* Haupt-Buttons mit Verlauf und violettem Glow; ghost/soft/danger bleiben ruhig */
[data-mood="neon-night"] .btn { --btn-bg: var(--grad-brand); box-shadow: var(--glow); }
[data-mood="neon-night"] .btn:is(.ghost, .soft, .danger) { box-shadow: none; }
[data-mood="neon-night"] .btn:focus-visible { box-shadow: var(--ring); }

/* Karten als dunkle Glas-Kacheln */
[data-mood="neon-night"] :is(.card, .results, .basket, .sheet) {
  background:
    linear-gradient(135deg, rgb(255 255 255 / .05), rgb(255 255 255 / .015)),
    var(--surface);
  border-color: rgb(255 255 255 / .10);
}

/* Logo im Markenverlauf statt einfarbig */
[data-mood="neon-night"] .logo { background: var(--grad-text); }

/* Akzent-Badges als violette Pills */
[data-mood="neon-night"] .badge.accent {
  background: linear-gradient(135deg, rgb(139 92 246 / .14), rgb(236 72 153 / .14));
  border-color: rgb(139 92 246 / .35);
  color: #c4b5fd;
}

/* ---- Gastansicht (Stand Moodboard „Neon Night“, 12.10.2026) ---- */

/* Violett-pinker Nebel hinter der Bühne */
[data-mood="neon-night"] body.kiosk {
  background:
    radial-gradient(1000px 600px at 85% -10%, rgb(139 92 246 / .26), transparent 62%),
    radial-gradient(820px 560px at -8% 110%, rgb(236 72 153 / .18), transparent 60%),
    linear-gradient(180deg, #08080d, #10101c 55%, #08080d);
}

/* Glas-Kacheln: Weiß 2–7 % Verlauf, 1 px Rahmen Weiß 10 %, Radius 16/24 px */
[data-mood="neon-night"] .wish-card {
  background:
    linear-gradient(135deg, rgb(255 255 255 / .067), rgb(255 255 255 / .024)),
    rgb(20 22 26 / .95);
  border-color: rgb(255 255 255 / .10);
  border-radius: var(--radius-lg);
}
[data-mood="neon-night"] .reg-panel > .wish-card:first-child { border-top-left-radius: var(--radius); }

/* Eventname: Black 900, eng, im Text-Verlauf */
[data-mood="neon-night"] .hero-event {
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.02;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 4px 18px rgb(139 92 246 / .35));
}
[data-mood="neon-night"] .hero-logo { filter: drop-shadow(0 4px 22px rgb(236 72 153 / .35)); }

/* Icon-Kacheln: Violett/Pink-Tönung 20 %, aktiv im vollen Verlauf */
[data-mood="neon-night"] .icon-tile {
  background: linear-gradient(135deg, rgb(139 92 246 / .2), rgb(236 72 153 / .2));
  color: #c4b5fd;
  border-radius: 12px;
  box-shadow: none;
}
[data-mood="neon-night"] .reg-tab.is-active .icon-tile,
[data-mood="neon-night"] .icon-tile.heart { background: var(--grad-brand); color: #fff; }
[data-mood="neon-night"] .reg-tab:not(.is-active) .icon-tile { background: linear-gradient(135deg, rgb(139 92 246 / .14), rgb(236 72 153 / .14)); color: var(--muted); filter: none; }

/* Register: aktives Register als Glas, mit Verlaufs-Kante oben */
[data-mood="neon-night"] .reg-tab { border-color: rgb(255 255 255 / .06); }
[data-mood="neon-night"] .reg-tab:not(.is-active) { background: #0c0d11; color: #737b8c; }
[data-mood="neon-night"] .reg-tab.is-active {
  background: linear-gradient(135deg, rgb(255 255 255 / .067), rgb(255 255 255 / .03)), rgb(20 22 26 / .95);
  border-color: rgb(255 255 255 / .10);
  box-shadow: 0 -10px 30px rgb(139 92 246 / .22);
}
[data-mood="neon-night"] .reg-tab.is-active::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--grad-brand);
}
[data-mood="neon-night"] .reg-tab.is-active::after { background: rgb(24 26 31); }

/* Zähler und Badges: Lavendel-Pill */
[data-mood="neon-night"] .reg-tab .n {
  background: rgb(139 92 246 / .16);
  border: 1px solid rgb(139 92 246 / .35);
  color: #c4b5fd;
}

/* Songliste wie im Mockup: Glas-Zeilen, Herzen in Pink */
[data-mood="neon-night"] .vote-list { gap: .45rem; }
[data-mood="neon-night"] .vote-item {
  background: linear-gradient(135deg, rgb(255 255 255 / .05), rgb(255 255 255 / .015));
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: var(--radius);
}
[data-mood="neon-night"] .vote-item.mine { background: linear-gradient(135deg, rgb(139 92 246 / .14), rgb(236 72 153 / .10)); }
[data-mood="neon-night"] .vote-item:nth-child(-n+3) .pos {
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-mood="neon-night"] .vote-btn { border-color: rgb(236 72 153 / .45); }
[data-mood="neon-night"] .vote-btn .vh { color: var(--pink); }
[data-mood="neon-night"] .vote-btn.on { background: var(--grad-brand); border-color: transparent; color: #fff; box-shadow: var(--glow); }
[data-mood="neon-night"] .vote-btn.on .vh { color: #fff; }

/* Abspielknopf: läuft = Verlauf mit Glow */
[data-mood="neon-night"] .play.is-sound,
[data-mood="neon-night"] .play.is-playing { background: var(--grad-brand); border-color: transparent; color: #fff; box-shadow: var(--glow); }
[data-mood="neon-night"] .play.is-sound::before {
  background: conic-gradient(#f472b6 calc(var(--p, 0) * 1turn), rgb(139 92 246 / .25) 0);
}

/* Suche: gewählter Treffer im Verlauf */
[data-mood="neon-night"] .hit .add { background: var(--grad-brand); border-color: transparent; color: #fff; }
[data-mood="neon-night"] .hit[data-picked="1"] .add { background: var(--ok); }

/* Herzen und DANKE in Pink/Violett statt Rot */
[data-mood="neon-night"] :is(.boom-heart, .thanks-burst .heart) { color: var(--pink); filter: drop-shadow(0 0 10px rgb(236 72 153 / .5)); }
[data-mood="neon-night"] .boom-logo { color: #c4b5fd; }
[data-mood="neon-night"] .thanks-word {
  text-shadow: 0 0 18px rgb(236 72 153 / .9), 0 0 48px rgb(139 92 246 / .8), 0 6px 0 #5b21b6;
}

/* Admin: Kopfleiste fast schwarz, aktiver Menüpunkt im Verlauf */
[data-mood="neon-night"] .topbar { background: rgb(11 12 15 / .85); }
[data-mood="neon-night"] .mainnav a.is-active { background: var(--grad-brand); color: #fff; }

/* ---------- 12 · Konzert-Orange  (Anthrazit + Bühnen-Orange) ----------
   Konzerthalle bei gedimmtem Licht: neutrales Anthrazit, Orange als
   einziges Signal, dünne Schrift, flache Flächen. Der Sunset-Verlauf
   (Orange → Lila) kommt genau einmal vor: als Lichtkante am Kopf.
   Schriften Open Sans + Roboto – lokal aus assets/fonts.              */

@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("fonts/open-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/open-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100; font-display: swap;
  src: url("fonts/roboto-latin-100-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/roboto-latin-700-normal.woff2") format("woff2"); }

[data-mood="konzert-orange"] {
  color-scheme: dark;
  --bg:#222222; --surface:#2a2a2a; --surface-2:#1a1a1a; --border:#444444;
  --text:#dbdbdb; --muted:#999999; --accent:#ed682f; --accent-soft:#f39a6e; --on-accent:#ffffff;

  --purple:#bb71f7;
  --grad-sunset: linear-gradient(90deg, #ed682f, #bb71f7);
  --font: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hero: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 8px;
  --shadow-1: none;
  --shadow-2: 0 2px 10px rgb(0 0 0 / .25);
}

/* Leichte, luftige Schrift; fett nur für Namen, Zahlen und Knöpfe */
[data-mood="konzert-orange"] body { font-weight: 300; }
[data-mood="konzert-orange"] :is(h1, h2, h3) {
  font-weight: 300; text-transform: uppercase; letter-spacing: .06em; color: #cccccc;
}
[data-mood="konzert-orange"] .btn { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; box-shadow: none; }
[data-mood="konzert-orange"] .badge.accent { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- Gastansicht ---- */
[data-mood="konzert-orange"] body.kiosk { background: var(--bg); }
[data-mood="konzert-orange"] .wish-card {
  background: var(--surface);
  border-color: rgb(255 255 255 / .06);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Kopf: einzige Stelle mit dem Sunset-Verlauf – als Bühnenlicht-Kante oben */
[data-mood="konzert-orange"] .head-row.wish-card {
  background: var(--surface-2);
  position: relative; overflow: hidden;
}
[data-mood="konzert-orange"] .head-row.wish-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--grad-sunset);
}
[data-mood="konzert-orange"] .hero-logo { color: var(--accent); filter: none; }
[data-mood="konzert-orange"] .hero-event {
  font-family: var(--font-hero); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #ffffff; text-shadow: none;
}
[data-mood="konzert-orange"] .wish-lead { font-weight: 300; }

/* Register: flach, Versalien, aktives Register mit orangem Unterstrich */
[data-mood="konzert-orange"] .reg-tab {
  font-weight: 400; letter-spacing: .08em; border-radius: 4px 4px 0 0;
  background: #1a1a1a; border-color: rgb(255 255 255 / .05);
}
[data-mood="konzert-orange"] .reg-tab.is-active {
  background: var(--surface); box-shadow: none; color: #ffffff; border-color: rgb(255 255 255 / .08);
}
[data-mood="konzert-orange"] .reg-tab.is-active::after { background: var(--surface); }
[data-mood="konzert-orange"] .reg-tab .icon-tile { border-radius: 4px; }
[data-mood="konzert-orange"] .reg-panel > .wish-card:first-child { border-top-left-radius: 0; }

/* Eingabefelder und Knöpfe eckiger, Orange als einzige Aktionsfarbe */
[data-mood="konzert-orange"] :is(.song-input, .input-icon input, .song-field) { border-radius: 6px; }
[data-mood="konzert-orange"] .song-combo.open .song-input { border-radius: 6px 6px 0 0; }
[data-mood="konzert-orange"] .song-dropdown { border-radius: 0 0 6px 6px; }
[data-mood="konzert-orange"] .kiosk .btn.big { border-radius: 4px; }
[data-mood="konzert-orange"] .icon-tile { border-radius: 6px; box-shadow: none; }
[data-mood="konzert-orange"] .icon-tile.heart { background: var(--accent); color: #fff; }
[data-mood="konzert-orange"] .vote-join .btn { border-radius: 4px; }
[data-mood="konzert-orange"] .vote-join .input-icon input { border-radius: 6px; }

/* Voting: orange statt rot – das Orange bleibt das einzige Signal */
[data-mood="konzert-orange"] .vote-btn .vh { color: var(--accent); }
[data-mood="konzert-orange"] .vote-btn { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
[data-mood="konzert-orange"] .vote-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-mood="konzert-orange"] .vote-btn.on .vh { color: #fff; }
[data-mood="konzert-orange"] .boom-heart { color: var(--accent); filter: none; }

/* ---- Admin: dunkle Leisten, aktiver Menüpunkt mit orangem Strich ---- */
[data-mood="konzert-orange"] :is(.topbar, .sidebar) { background: #1a1a1a; }
[data-mood="konzert-orange"] :is(.mainnav, .sidenav) a.is-active {
  background: #2a2a2a; color: #ffffff; box-shadow: inset 3px 0 0 var(--accent);
}