/* DLTLLY Crowd Voting — gemeinsame Tokens + Bausteine.
   Quelle: dltlly-voting-mockups.html (verbindliche Referenz).
   Signature: Kontrahent A = Orange, Kontrahent B = Tuerkis. */

:root {
  --bg: #0a0a0a;
  --surface: #161616;
  --surface2: #1e1e1e;
  --line: #2a2a2a;
  --orange: #ea5a1e;
  --orange-dim: #5c2a12;
  --teal: #35bec9;
  --teal-dim: #123d41;
  --white: #fafafa;
  --mut: #8a8a8a;
  --mut2: #555;

  /* Spacing-Skala (Operator-Kartenlayout u.a.) */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.anton { font-family: 'Anton', sans-serif; font-weight: 400; letter-spacing: .01em; }
.up { text-transform: uppercase; }
.slant { display: inline-block; transform: skew(-8deg); }

/* Sichtbarer Tastatur-Fokus, markenfarben */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

button {
  font-family: 'Oswald', sans-serif;
  color: var(--white);
  background: none;
  border: none;
  cursor: pointer;
}

[hidden] { display: none !important; }

/* Markenkopf: DLTLLY-Logo + Produktname CROWNED nebeneinander.
   "NE" in CROWNED ist orange, die weiss bleibenden Buchstaben ergeben "CROWD". */
.brandmark { display: flex; align-items: center; gap: 10px; }
.brandimg { height: 22px; width: auto; display: block; }
.pbrand { font-family: 'Anton', sans-serif; transform: skew(-8deg); display: inline-block; }
.pbrand em { color: var(--orange); font-style: normal; }

.live {
  font-size: 10px; letter-spacing: .18em; color: var(--teal);
  font-weight: 600; display: flex; align-items: center; gap: 5px;
  text-transform: uppercase;
}
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }

/* Tag-Chip (Prompt) */
.tag {
  align-self: flex-start; background: var(--orange); color: #0a0a0a;
  font-weight: 600; font-size: 11px; letter-spacing: .12em;
  padding: 5px 12px; transform: skew(-10deg); text-transform: uppercase;
}
.tag.tl { background: var(--teal); }
.tag span { display: inline-block; transform: skew(10deg); }

/* Balken (Basis; Groessen setzen die Seiten selbst) */
.track { background: var(--surface); overflow: hidden; }
.fill { height: 100%; width: 0; }
.fill.a { background: var(--orange); }
.fill.b { background: var(--teal); }
.fill.a-dim { background: var(--orange-dim); }
.fill.b-dim { background: var(--teal-dim); }