/* Community-Voting: Kategorien und Nominierte und der Meldungskasten aller
   voting.msg.*-Zustände (views/voting/message.ts). Die Zustände des
   Countdowns stehen in voting.css. */

/* ── Kategorie ─────────────────────────────────────────────────────────── */

.voting-category { scroll-margin-top: 16px; border-radius: 30px; box-shadow: var(--voting-shadow); }
.voting-category__title {
  margin: 0;
  border-radius: 30px 30px 0 0;
  background: var(--gruen-tief);
  padding: 20px clamp(16px, 4vw, 30px);
  font-size: clamp(18px, 5vw, 24px);
  line-height: 1.3;
  color: var(--weiss);
}
.voting-category__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 0 0 30px 30px;
  background: var(--weiss);
  box-shadow: inset 0 0 0 2px var(--gruen-tief);
  padding: clamp(20px, 5vw, 30px) clamp(14px, 4vw, 24px);
  font-size: 12px;
  line-height: 1.5;
  color: var(--grau-text);
}
.voting-category__body p { margin: 0; }
.voting-category__intro { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.voting-category__number {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gruen-dunkel);
  color: #f6fcf7;
}
.voting-category__prize {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  border-radius: 20px;
  background: var(--voting-pink-surface);
  box-shadow: inset 0 0 0 1.5px var(--pink);
  padding: clamp(14px, 4vw, 18px) clamp(14px, 4vw, 20px);
}
.voting-category__amount { display: flex; flex-direction: column; flex-shrink: 0; gap: 2px; }
.voting-category__prize-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--voting-pink-deep);
}
.voting-category__prize-value {
  font-size: clamp(28px, 8vw, 34px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  color: var(--pink);
}
.voting-category__prize-text { display: flex; flex: 1 1 220px; flex-direction: column; gap: 4px; min-width: 0; }
.voting-category__prize-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--schwarz);
  text-wrap: pretty;
}
.voting-category__prize-body { font-weight: 500; text-wrap: pretty; }
.voting-category__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  align-items: start;
  margin: 0;
  border: 0;
  padding: 0;
  min-width: 0;
}

/* ── Nominierte:r — die ganze Karte wählt (v7 :263): das Label umfasst Radio und Oberkarte, Langtext und Leerfläche wählen über `voting-timer.js` ── */

.voting-nominee {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  border-radius: 16px;
  background: var(--weiss);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.25);
  padding: 10px;
  cursor: pointer;
}
.voting-nominee:has(.voting-nominee__radio:checked) { background: rgba(25, 170, 129, 0.12); box-shadow: inset 0 0 0 2px var(--gruen-akzent); }
/* Der Kreis gehört optisch in die Namenszeile (Entwurf): Kartenpolster 10 +
   Spaltenpolster 2 oben, bündig mit der rechten Spaltenkante. */
.voting-nominee__radio {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1.5px solid var(--gruen-tief);
  border-radius: 50%;
  background: var(--weiss);
  appearance: none;
  cursor: pointer;
}
/* 12-px-Punkt vollflächig (v7 :275): Grün als Fläche, ein weißer Ring von
   4,5 px innen (24 − 2 × 1,5 Rand − 12 = 9) — kein Verlauf mit Übergangszone. */
.voting-nominee__radio:checked { background: var(--gruen-akzent); box-shadow: inset 0 0 0 4.5px var(--weiss); }
.voting-nominee__card {
  display: flex;
  gap: 8px 12px;
  align-items: flex-start;
  cursor: pointer;
}
.voting-nominee__media {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: clamp(76px, 22vw, 96px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: repeating-linear-gradient(135deg, #e0e8e0 0 8px, #f0f4f0 8px 16px);
  color: var(--gruen-tief);
}
.voting-nominee__placeholder { font-size: 10px; font-weight: 500; line-height: 1.2; text-align: center; }
.voting-nominee__image { width: 100%; height: 100%; object-fit: cover; }
.voting-nominee__main {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--grau-text);
}
/* Nur die Namenszeile hält den Platz für den Kreis frei (24 + 10 Abstand);
   der Kurztext darunter nutzt die volle Spaltenbreite. */
.voting-nominee__name {
  min-height: 24px;
  padding-right: 34px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--schwarz);
}
.voting-nominee__text { font-weight: 500; text-wrap: pretty; }
.voting-nominee__focus { font-weight: 700; color: var(--gruen-tief); }
.voting-nominee__selected {
  display: none;
  align-self: flex-start;
  margin-top: 4px;
  border-radius: 100px;
  background: var(--gruen-akzent);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--weiss);
}
.voting-nominee:has(.voting-nominee__radio:checked) .voting-nominee__selected { display: inline-block; }
.voting-nominee__more { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.voting-nominee__long {
  border-top: 1px solid var(--gruen-hell);
  padding: 10px 4px 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--grau-text);
  text-wrap: pretty;
}
.voting-nominee__long p { margin: 0; }
/* Der Entwurf trennt Absätze mit einer Leerzeile: eine Zeilenhöhe. */
.voting-nominee__long p + p { margin-top: 1.55em; }
/* Doppelte Klasse schlägt `button.voting-toggle { padding: 0 }` aus voting.css,
   ohne den geteilten Knopf des Gewinnspiels anzufassen. */
.voting-nominee__toggle.voting-toggle { align-self: flex-start; margin-bottom: -4px; padding: 4px 4px 2px; }
/* #19aa81 auf Weiß hat rund 2,9:1 (Konzept §10 Nr. 22 verlangt 4,5:1), ebenso
   die weiße Schrift der Pille. Die Farbe steht so im Entwurf und bleibt auf
   ausdrückliche Entscheidung des Auftraggebers (16.10.2026, „1:1 wie Entwurf"). */
.voting-nominee__toggle { color: var(--gruen-akzent); }
/* Der Pfeil ist Schmuck: eigenes Element mit aria-hidden statt des geerbten
   Pseudopfeils. sans-serif, weil Poppins „▼" nicht hat und der Entwurf auf
   sans-serif zurückfällt (9,8 px breit); unser Stapel nähme Segoe/system-ui. */
.voting-nominee__toggle.voting-toggle::after { content: none; }
.voting-nominee__chevron::after {
  content: "▼";
  display: inline-block;
  font-family: sans-serif;
  font-size: 10px;
  line-height: 1;
  transition: transform 0.2s;
}
.voting-nominee__toggle[aria-expanded="true"] .voting-nominee__chevron::after { transform: rotate(180deg); }

/* ── Meldungskasten ────────────────────────────────────────────────────── */

.voting-message { max-width: 580px; border-radius: 30px; box-shadow: var(--voting-shadow); }
.voting-message__head {
  margin: 0;
  border-radius: 30px 30px 0 0;
  background: var(--gruen-tief);
  padding: 20px;
  text-align: center;
  font-size: clamp(20px, 6vw, 28px);
  line-height: 1.35;
  color: var(--weiss);
}
.voting-message__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border-radius: 0 0 30px 30px;
  background: var(--weiss);
  box-shadow: inset 0 0 0 2px var(--gruen-tief);
  padding: clamp(24px, 6vw, 40px) clamp(16px, 5vw, 30px);
  text-align: center;
}
.voting-message p { margin: 0; }
.voting-message a:not(.voting-button) { color: var(--gruen-tief); }
.voting-message a:not(.voting-button):hover { color: var(--pink); }

/* Das Symbol ist Gestaltung und kommt deshalb aus dem CSS, nicht aus texts. */
.voting-message__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gruen-tief);
  font-size: 28px;
  font-weight: 700;
  color: var(--weiss);
}
.voting-message__icon::before { content: "!"; }
.voting-message--not_started .voting-message__icon::before { content: "★"; }
.voting-message--submitted .voting-message__icon { background: var(--pink); }
.voting-message--submitted .voting-message__icon::before { content: none; }
.voting-message--thanks .voting-message__icon { background: var(--gruen-akzent); }
.voting-message--thanks .voting-message__icon::before { content: "✓"; }
.voting-message--link_invalid .voting-message__icon,
.voting-message--link_expired .voting-message__icon { background: var(--voting-pink-deep); }
/* „Voting beendet": „!" auf Pink-tief nach dem Entwurf voting-ended.raw.html
   (Entscheidung 16.10.2026); die drei Nebenfassungen zeigen dort noch ★.
   Festgehalten in tests/unit/voting-ended-icon.test.ts. */
.voting-message--ended .voting-message__icon { background: var(--voting-pink-deep); }
.voting-message--ended .voting-message__icon::before { content: "!"; }
.voting-message__title { max-width: 440px; font-size: clamp(18px, 5vw, 22px); font-weight: 700; line-height: 1.35; color: var(--schwarz); text-wrap: pretty; }
.voting-message__text { max-width: 440px; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--grau-text); text-wrap: pretty; }
.voting-message__tip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  border-radius: 20px;
  background: var(--gruen-hell);
  padding: clamp(14px, 4vw, 20px);
  text-align: left;
}
.voting-message__tip-title { font-size: 16px; font-weight: 700; color: var(--schwarz); }
.voting-message__tip-text { font-size: 12px; font-weight: 500; line-height: 1.55; color: var(--grau-text); }
.voting-message__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* 16 px gap + 6 = 22 px vor dem Knopf (voting-ended.raw.html:402). Der
   Selektor muss `.voting-message p { margin: 0 }` schlagen. */
.voting-message__body .voting-message__actions { margin-top: 6px; }
.voting-button {
  border-radius: 100px;
  background: var(--pink);
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--weiss);
}
/* #f100a0 wie in der Vorlage (:372, :407), auch unter weißer Schrift:
   Entscheidung des Auftraggebers 16.10.2026, Restrisiko in tests/CHECKLIST.md. */
.voting-button:hover { background: var(--voting-pink-hover); }

/* Unter Meldungen (ohne Countdown) bleibt der Kasten mittig und schmal. */
.voting-page__content > .voting-message { max-width: 580px; }