/* Community-Voting: das Abgabeformular „STIMME ABGEBEN" im Abschlussband.
   Maße und Farben nach Vorlage v7 (Spec 2026-10-16; Zeilen in
   sources/voting-v7.template.html); die Farben kommen aus den Tokens in
   styles.css und voting.css. Checkbox, Captcha und Fehlerkästen stehen in
   voting-form-states.css. */

/* ── Abschlussband (:302) ──────────────────────────────────────────────
   Seitenbreit: 20 px breiter als der Inhalt und je 10 px hinaus, damit es
   das Seitenpolster von .voting-page__content überdeckt; unten −40 px gegen
   dessen Polster, so schließt es bündig an die Fußzeile an. */

.voting-form-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 4vw, 24px);
  width: calc(100% + 20px);
  margin: clamp(6px, 2vw, 20px) -10px -40px;
  border-top: 4px solid var(--pink);
  background: var(--gruen-hell);
  padding: clamp(28px, 7vw, 56px) 10px clamp(40px, 8vw, 70px);
}
.voting-page__content > .voting-form-band { max-width: none; }
/* Abstände kommen nur aus `gap`, nie aus Browser-Absatzrändern (Inventar V27). */
.voting-form-band p { margin: 0; }

.voting-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 4vw, 24px);
  width: 100%;
  max-width: 580px;
  scroll-margin-top: 16px;
}
.voting-form a { color: var(--gruen-tief); }
.voting-form a:hover { color: var(--pink); }

.voting-form__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  text-align: center;
}
/* Eine Textzeile, keine Pille (Entwurf 20.10.2026, Seite Z. 305). */
.voting-form__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--voting-pink-deep);
}
.voting-form__title {
  max-width: 440px;
  font-size: clamp(15px, 4vw, 17px);
  font-weight: 700;
  line-height: 1.4;
  text-wrap: balance;
  color: var(--schwarz);
}

.voting-form__card {
  width: 100%;
  border-radius: var(--radius-karte);
  box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
}
.voting-form__heading {
  margin: 0;
  border-radius: var(--radius-karte) var(--radius-karte) 0 0;
  background: var(--pink);
  padding: 20px;
  font-size: clamp(20px, 6vw, 28px);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--weiss);
}
.voting-form__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 0 0 var(--radius-karte) var(--radius-karte);
  background: var(--weiss);
  box-shadow: inset 0 0 0 2px var(--pink);
  padding: clamp(20px, 5vw, 30px) clamp(14px, 4vw, 20px) 24px;
}

/* ── Zusammenfassung „Deine Auswahl" (:312–319) ────────────────────────── */

.voting-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: var(--radius-block);
  background: var(--gruen-hell);
  padding: clamp(14px, 4vw, 20px);
  scroll-margin-top: 16px;
}
.voting-summary__title { font-size: 16px; font-weight: 700; color: var(--schwarz); }
.voting-summary__list { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.voting-summary__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.voting-summary__category { min-width: 0; font-size: 13px; font-weight: 500; color: var(--grau-text); }
.voting-summary__pick {
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
  color: var(--gruen-dunkel);
}

/* ── Felder (:322–330) ─────────────────────────────────────────────────── */

.voting-form__field { display: flex; flex-direction: column; gap: 4px; scroll-margin-top: 16px; }
.voting-form__label { font-size: 11px; font-weight: 500; color: var(--grau-text); }
.voting-form__input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--gruen-akzent);
  border-radius: var(--radius-feld);
  background: var(--weiss);
  padding: 13px 15px;
  font: inherit;
  /* 16 px: darunter zoomt iOS Safari beim Antippen in das Feld. */
  font-size: 16px;
  /* Die Vorlage erbt keine Zeilenhöhe ins Feld; geerbte 1.5 machten es höher. */
  line-height: normal;
  color: var(--schwarz);
}
.voting-form__field--invalid .voting-form__input { border-color: var(--voting-error); }
.voting-form__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--voting-error);
}
.voting-form__hint { font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--grau-text); }
.voting-form__hint--strong { font-weight: 700; }

/* Der ganze Kasten ist das Label der Checkbox (:333). */
.voting-form__newsletter {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: var(--radius-block);
  background: var(--gruen-hell);
  padding: clamp(14px, 4vw, 20px);
  cursor: pointer;
}
.voting-form__newsletter-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.voting-form__newsletter-title { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--schwarz); }
.voting-form__newsletter .voting-form__hint { line-height: 1.55; }

/* ── Knopf und Hinweise darunter (:372–376) ────────────────────────────── */

/* Beschreibt das Formular, nicht ein Feld — deshalb in keinem aria-describedby (Entwurf 20.10.2026, Seite Z. 378). */
.voting-form__required { font-size: 12px; font-weight: 500; color: var(--grau-text); }
.voting-form__submit {
  margin-top: 4px;
  border: none;
  padding: 17px 24px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}
.voting-form__terms,
.voting-form__confirm-note {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--grau-text);
}
/* Muss `.voting-form-band p { margin: 0 }` schlagen. */
.voting-form__body .voting-form__terms { margin-top: -6px; }
.voting-form__confirm { display: flex; justify-content: center; }
.voting-form__confirm-note { max-width: 420px; font-weight: 700; }

/* ── Honeypot (Ticket 04) ──────────────────────────────────────────────── */

/* Aus dem Bild geschoben statt `display: none`: manche Bots lassen
   unsichtbar geschaltete Felder aus und füllen nur, was gerendert wird. */
.voting-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}