/* Community-Voting: Seite /voting — Header-Grafik, Countdown, Einführung,
   Aufklappen und Gewinnspiel (Entwurf
   docs/plans/2026-10-15-voting-sources/voting.raw.html). Kategorien,
   Nominierte, Zustände und Meldungskästen stehen in voting-states.css —
   geteilt nur wegen der 300-Zeilen-Grenze, Reihenfolge egal. */

.voting-page {
  /* Farben des Entwurfs, die es in styles.css nicht gibt. */
  --voting-pink-surface: #fdebf6;
  --voting-pink-deep: #b40078;
  --voting-shadow: 0 0 8px rgb(0 0 0 / 25%);
  /* Hover der pinken Knöpfe (v7 :372, style-hover). */
  --voting-pink-hover: #d6008e;
  /* Fehlerzustände des Formulars (Entwurf „Fehlermeldungen", 20.10.2026):
     eigenes Rot statt Pink, damit sie sich vom Rest der Seite abheben. */
  --voting-error: rgb(196 30 45);
  --voting-error-surface: rgb(253 236 237);
  display: flex;
  flex-direction: column;
  background: var(--papier);
}
.voting-hero__image { display: block; width: 100%; height: auto; }
.voting-page__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 4vw, 30px);
  padding: clamp(20px, 6vw, 60px) 10px 40px;
}
/* Steht nur eine Meldung da, gilt der Meldungsrahmen des Entwurfs
   (voting-ended.raw.html:380); „startet bald" hat den Countdown daneben. */
.voting-page__content:has(> .voting-message:only-child) { padding: clamp(24px, 6vw, 60px) 10px 60px; }
.voting-page__content > * { width: 100%; max-width: 960px; }

/* ── Countdown ─────────────────────────────────────────────────────────── */

.voting-timer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  border-radius: 20px;
  background: var(--gruen-tief);
  padding: clamp(16px, 4vw, 22px) clamp(16px, 4vw, 26px);
  color: var(--weiss);
}
.voting-timer__text {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.voting-timer__text p { margin: 0; }
.voting-timer__headline {
  font-size: clamp(16px, 4.4vw, 20px);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}
.voting-timer__moment { font-size: 12px; font-weight: 500; color: rgb(255 255 255 / 85%); }
.voting-timer__units {
  display: grid;
  flex: 1 1 260px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 340px;
}
.voting-timer__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-radius: 12px;
  background: var(--weiss);
  padding: 10px 4px 8px;
}
.voting-timer__number {
  font-size: clamp(22px, 6.5vw, 30px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--gruen-dunkel);
}
.voting-timer__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--grau-text);
}

/* Dringend (< 3 Tage, URGENT_THRESHOLD_MS): Kopf in Pink wie im Entwurf. */
.voting-timer--urgent { background: var(--voting-pink-deep); }
.voting-timer--urgent .voting-timer__number { color: var(--voting-pink-deep); }

/* ── Einführung ────────────────────────────────────────────────────────── */

.voting-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  text-align: center;
}
.voting-intro__title {
  margin: 0;
  font-size: clamp(20px, 6vw, 32px);
  line-height: 1.2;
  text-wrap: balance;
  color: var(--schwarz);
}
.voting-intro__body {
  max-width: 620px;
  margin: 0;
  font-size: clamp(13px, 3.6vw, 15px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--grau-text);
  text-wrap: pretty;
}

/* ── Aufklappen (Langtext): <button aria-expanded> ─────────────────────── */

.voting-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.voting-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}
.voting-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
button.voting-toggle {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
}

/* ── Gewinnspiel ───────────────────────────────────────────────────────── */

.voting-prize {
  overflow: hidden;
  border-radius: 20px;
  background: var(--voting-pink-surface);
  box-shadow: inset 0 0 0 2px var(--pink);
}
.voting-prize a { color: var(--gruen-tief); }
.voting-prize a:hover { color: var(--pink); }
/* Der ganze Kopf ist der Knopf (v7 :196). */
.voting-prize__summary {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: clamp(14px, 4vw, 20px);
  font-family: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.voting-prize__badge {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 14vw, 64px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pink);
  color: var(--weiss);
  transform: rotate(-8deg);
}
.voting-prize__badge-count { font-size: clamp(18px, 5vw, 22px); font-weight: 900; line-height: 1; }
.voting-prize__badge-label { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; }
.voting-prize__heading {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 3px;
  min-width: 0;
}
.voting-prize__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--voting-pink-deep);
}
.voting-prize__title {
  margin: 0;
  font-size: clamp(15px, 4.2vw, 18px);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
  color: var(--schwarz);
}
.voting-prize__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--voting-pink-deep);
}
/* sans-serif wie beim Pfeil der Nominiertenkarte: Poppins hat kein „▼". */
.voting-prize__chevron {
  display: inline-block;
  font-family: sans-serif;
  font-size: 9px;
  transition: transform 0.2s;
}
.voting-prize__chevron::after { content: "▼"; }
.voting-prize__summary[aria-expanded="true"] .voting-prize__chevron { transform: rotate(180deg); }
.voting-prize__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 clamp(14px, 4vw, 20px) clamp(14px, 4vw, 20px);
  font-size: 13px;
  font-weight: 500;
  color: var(--grau-text);
}
.voting-prize__content p { margin: 0; }
.voting-prize__body { line-height: 1.6; text-wrap: pretty; }
.voting-prize__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.voting-prize__fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 12px;
  background: var(--weiss);
  padding: 12px 14px;
  font-size: 12px;
}
.voting-prize__fact-main { font-size: 15px; font-weight: 700; color: var(--schwarz); }
.voting-prize__note { font-size: 12px; line-height: 1.5; }