/* =============================================================================
   NEONNACHT — Produktabstimmung
   =============================================================================
   Gilt fuer abstimmung.html. Alles entsteht im Inline-Script (renderPoll,
   renderResults, showNoPollMessage, showErrorMessage, openLightbox). Vertrag:

       #poll-content
         .poll-header > .t-label, .poll-title, .poll-description,
                        .poll-info > .poll-info-item > .poll-info-label, .poll-info-value
                        (.poll-ended-message.is-im-kopf)
         .voting-instructions(.is-danke) > h3, p, .info-hint
         .votes-remaining-zeile > .votes-remaining > #votes-remaining-text
         .endergebnis-titel
         .options-grid > .option-card(.selected, .is-sieger)
             > .vote-badge(.is-sieger), button.option-bild > img.option-image, .option-lupe
             > .option-content > .option-name, .results-bar > .results-bar-fill (width inline),
                                 .results-percentage, button.vote-button(.vote-for|.vote-remove)
         .submit-zeile > button#submit-btn.submit-vote-btn[disabled]
         .poll-ended-message(.is-leer|.is-fehler) > .leer-marke, .t-label, h2, p
       body > aside#bild-panel.a-panel.a-panel--lg > .bild-panel__body > img.bild-panel__bild

   #poll-content wird bei jedem Firestore-Snapshot komplett neu geschrieben —
   Zustaende deshalb nur ueber Klassen, keine Animationen, die bei jedem
   Neuzeichnen neu starten und flackern wuerden (Ausnahme: der erste Auftritt
   des Leerzustands, der nicht neu gezeichnet wird).

   -----------------------------------------------------------------------------
   Die Idee: ein Stoffmusterbuch. Jede Option ist eine grosse Musterkarte, das
   Bild ist die Hauptsache und laesst sich vergroessern. Wer eine Stimme gibt,
   markiert die Karte wie mit einem Neon-Klebepunkt. Der Abstimmen-Knopf klebt
   auf dem Telefon unten am Rand, damit er nach dem Wischen durch die Karten
   nicht erst gesucht werden muss.
   ============================================================================= */

.atelier .sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.voting-container { max-inline-size: 72rem; margin-inline: auto; }

/* -- Kopf -------------------------------------------------------------------------- */

.poll-header {
  display: grid; justify-items: center; gap: var(--s-3);
  margin-block-end: var(--s-6);
  text-align: center;
}
/* .atelier davor: `.atelier h1/p { margin: 0 }` hat (0,1,1). */
.atelier .poll-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-3xl); line-height: var(--lh-display); letter-spacing: var(--track-display);
  text-transform: uppercase; text-wrap: balance;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.atelier .poll-description {
  max-inline-size: 56ch;
  font-size: var(--t-md); line-height: var(--lh-body); color: var(--c-text-body);
  overflow-wrap: anywhere;
}
/* Wie bei den anderen zentrierten Eyebrows: Verlauf breiter ziehen, damit die
   Wortmitte nicht im Violett unter 4,5:1 faellt. 60rem statt 30rem: unter dem
   festen Farbschein von .atelier::before reichte 30rem nicht (gemessen 4,2:1). */
.poll-header > .t-label--neon { background-size: max(100%, 60rem) 100%; }

.poll-info {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2);
  margin-block-start: var(--s-2);
}
.poll-info-item {
  display: grid; gap: 2px; justify-items: center;
  min-inline-size: 9rem; padding: var(--s-3) var(--s-4);
  background: var(--c-surface); border: var(--line); border-radius: var(--r-lg);
}
.poll-info-label {
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--c-text-body);
}
.poll-info-value {
  font-family: var(--font-display); font-size: var(--t-lg); line-height: 1.05;
  color: var(--c-text); font-variant-numeric: tabular-nums;
}

/* -- Anleitung und Zaehler ------------------------------------------------------------ */

.voting-instructions {
  --ton: var(--c-accent-2);
  display: grid; gap: var(--s-2);
  max-inline-size: 44rem; margin: 0 auto var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: color-mix(in srgb, var(--ton) 6%, var(--c-surface));
  border: var(--line); border-inline-start: 2px solid var(--ton);
  border-radius: var(--r-md);
}
.voting-instructions.is-danke { --ton: var(--c-good); }
.atelier .voting-instructions h3 {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-md); font-weight: 700; color: var(--c-text);
}
.atelier .voting-instructions h3 .icon { color: var(--ton); }
.atelier .voting-instructions p { font-size: var(--t-sm); line-height: var(--lh-body); color: var(--c-text-body); }
.info-hint {
  display: inline-flex; align-items: center; gap: var(--s-2);
  inline-size: fit-content;
  font-size: var(--t-xs); color: var(--c-text-body);
}
.atelier .info-hint .icon { inline-size: 15px; block-size: 15px; color: var(--c-info); }

.votes-remaining-zeile { display: flex; justify-content: center; margin-block-end: var(--s-5); }
.votes-remaining {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  font-size: var(--t-sm); font-weight: 700; color: var(--c-text);
  border: 1px solid rgb(139 92 246 / .5); border-radius: var(--r-full);
  font-variant-numeric: tabular-nums;
}
.atelier .votes-remaining .icon { inline-size: 18px; block-size: 18px; color: var(--c-accent-2); }

/* -- Musterkarten ----------------------------------------------------------------------- */

.options-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  margin-block-end: var(--s-6);
}

.option-card {
  position: relative;
  display: grid; grid-template-rows: auto 1fr;
  background: var(--c-surface);
  border: var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-inout), box-shadow var(--dur-3) var(--ease-paper);
}
/* Gewaehlt: Neonrahmen und Schein. (0,2,0), damit nichts Allgemeines gewinnt. */
.options-grid .option-card.selected {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--c-accent), 0 0 32px -10px rgb(255 0 255 / .6);
}
.options-grid .option-card.is-sieger {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--c-accent-2), 0 0 32px -10px rgb(139 92 246 / .6);
}

.vote-badge {
  position: absolute; z-index: 2; inset-block-start: var(--s-3); inset-inline-start: var(--s-3);
  display: grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem;
  color: var(--c-text-on-accent);
  background: var(--c-verlauf);
  border-radius: var(--r-full);
  box-shadow: var(--d-2);
}
.atelier .vote-badge .icon { inline-size: 20px; block-size: 20px; stroke-width: 2.5; }

/* Das Bild ist ein Knopf: per Tastatur erreichbar, oeffnet die Bildansicht. */
.atelier button.option-bild {
  position: relative; display: block;
  inline-size: 100%; aspect-ratio: 1 / 1;
  padding: 0; margin: 0;
  background: var(--c-surface-sunk); border: 0; border-radius: 0;
  cursor: zoom-in; overflow: hidden;
}
.option-image {
  display: block; inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease-paper);
}
.option-lupe {
  position: absolute; inset-block-end: var(--s-3); inset-inline-end: var(--s-3);
  display: grid; place-items: center;
  inline-size: 2.25rem; block-size: 2.25rem;
  color: var(--c-text);
  background: rgb(8 7 10 / .7); border: 1px solid var(--c-line-strong); border-radius: var(--r-full);
  opacity: 0; transition: opacity var(--dur-2) var(--ease-inout);
}
.atelier .option-lupe .icon { inline-size: 18px; block-size: 18px; }
@media (hover: hover) {
  .atelier button.option-bild:hover .option-image { transform: scale(1.04); }
  .atelier button.option-bild:hover .option-lupe { opacity: 1; }
}
.atelier button.option-bild:focus-visible { outline: 2px solid var(--c-accent-3); outline-offset: -4px; }
.atelier button.option-bild:focus-visible .option-lupe { opacity: 1; }
/* Auf Touch-Geraeten gibt es kein Hover — die Lupe zeigt dort dauerhaft,
   dass das Bild antippbar ist. */
@media (hover: none) { .option-lupe { opacity: 1; } }

.option-content { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-4); }
.option-name {
  font-size: var(--t-md); font-weight: 700; line-height: var(--lh-snug); color: var(--c-text);
  overflow-wrap: anywhere;
}

.results-bar {
  block-size: 8px; overflow: hidden;
  background: var(--c-surface-sunk); border-radius: var(--r-full);
}
.results-bar-fill {
  block-size: 100%; max-inline-size: 100%;
  background: var(--c-verlauf); border-radius: inherit;
  transition: width var(--dur-5) var(--ease-paper);
}
.results-percentage { font-size: var(--t-sm); color: var(--c-text-body); font-variant-numeric: tabular-nums; }

/* .atelier davor: der Reset `:where(.atelier) button` ist schwach, aber
   gegen spaetere Knopfregeln sicher stehen. */
.atelier .vote-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  inline-size: 100%; min-block-size: 2.75rem; padding-inline: var(--s-4);
  font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--r-full); cursor: pointer;
  transition: background var(--dur-2) var(--ease-inout), border-color var(--dur-2) var(--ease-inout), color var(--dur-2) var(--ease-inout);
}
.atelier .vote-button .icon { inline-size: 18px; block-size: 18px; }
.atelier .vote-button.vote-for {
  color: var(--c-text); background: transparent;
  border: 1px solid rgb(255 0 255 / .55);
}
@media (hover: hover) { .atelier .vote-button.vote-for:hover { background: rgb(255 0 255 / .1); border-color: var(--c-accent); } }
.atelier .vote-button.vote-remove {
  color: var(--c-text-body); background: var(--c-surface-sunk);
  border: 1px solid var(--c-line-strong);
}
@media (hover: hover) { .atelier .vote-button.vote-remove:hover { color: var(--c-text); border-color: var(--c-text-body); } }

/* -- Abschicken ------------------------------------------------------------------------------ */

.submit-zeile {
  position: sticky; inset-block-end: var(--s-4); z-index: 5;
  display: flex; justify-content: center;
  pointer-events: none;   /* nur der Knopf selbst nimmt Klicks an */
}
.atelier .submit-vote-btn {
  pointer-events: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-block-size: 3.5rem; padding-inline: var(--s-7);
  font-family: var(--font-ui); font-size: var(--t-base); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-text-on-accent); background: var(--c-verlauf);
  border: 0; border-radius: var(--r-full);
  box-shadow: var(--d-3), var(--glow-accent);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-paper), box-shadow var(--dur-3) var(--ease-paper), opacity var(--dur-2) var(--ease-inout);
}
.atelier .submit-vote-btn .icon { inline-size: 22px; block-size: 22px; }
@media (hover: hover) { .atelier .submit-vote-btn:not(:disabled):hover { transform: translateY(-2px); } }
.atelier .submit-vote-btn:disabled {
  opacity: 1; cursor: not-allowed;
  color: var(--c-text-body); background: var(--c-surface-up);
  box-shadow: var(--d-3); border: 1px solid var(--c-line-strong);
}
@media (max-width: 40rem) {
  .atelier .submit-vote-btn { inline-size: 100%; padding-inline: var(--s-5); }
}

/* -- Ergebnisse, Leer- und Fehlerzustand -------------------------------------------------------- */

.atelier .endergebnis-titel {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  margin-block-end: var(--s-4);
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-xl); text-transform: uppercase; color: var(--c-text);
}
.atelier .endergebnis-titel .icon { color: var(--c-accent-2); }

.poll-ended-message {
  display: grid; justify-items: center; gap: var(--s-3);
  text-align: center;
}
.atelier .poll-ended-message h2 {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--t-2xl); line-height: .95; text-transform: uppercase; color: var(--c-text);
}
.atelier .poll-ended-message p { max-inline-size: 44ch; font-size: var(--t-md); line-height: var(--lh-body); color: var(--c-text-body); }

.poll-ended-message.is-im-kopf {
  margin-block: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-lg);
}
.atelier .poll-ended-message.is-im-kopf h2 { font-size: var(--t-lg); }
.atelier .poll-ended-message.is-im-kopf h2 .icon { color: var(--c-accent-2); }
.atelier .poll-ended-message.is-im-kopf p { font-size: var(--t-sm); }

.poll-ended-message.is-leer,
.poll-ended-message.is-fehler {
  padding: var(--s-9) var(--s-5);
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-lg);
}
.poll-ended-message.is-leer > .t-label--neon { background-size: max(100%, 60rem) 100%; }

/* Marke mit langsam kreisendem Neonbogen — der Leerzustand ist heute der
   einzige Zustand, den Kundinnen sehen (keine laufende Umfrage). */
.leer-marke {
  position: relative;
  display: grid; place-items: center;
  inline-size: 5rem; block-size: 5rem; margin-block-end: var(--s-2);
  color: var(--c-text);
}
.atelier .leer-marke .icon { inline-size: 2rem; block-size: 2rem; }
.leer-marke::before {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--r-full);
  background: conic-gradient(from 0deg, transparent 0 55%, var(--c-accent) 80%, var(--c-accent-3));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
}
.poll-ended-message.is-fehler .leer-marke { color: var(--c-bad); }
.poll-ended-message.is-fehler .leer-marke::before { background: var(--c-bad); opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .poll-ended-message.is-leer .leer-marke::before { animation: leer-kreis 6s linear infinite; }
  .poll-ended-message.is-leer, .poll-ended-message.is-fehler { animation: abstimmung-rein var(--dur-4) var(--ease-paper) backwards; }
  @keyframes leer-kreis { to { transform: rotate(360deg); } }
  @keyframes abstimmung-rein { from { opacity: 0; transform: translateY(10px); } }
}

/* -- Bildansicht (Slide-in-Panel) ------------------------------------------------------------------ */

.bild-panel__body {
  display: grid; place-items: center;
  background: var(--c-bg-tief);
}
.bild-panel__bild {
  display: block; max-inline-size: 100%; max-block-size: calc(100dvh - 9rem);
  object-fit: contain; border-radius: var(--r-md);
}

/* -- Telefon ----------------------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .poll-info-item { min-inline-size: 0; flex: 1 1 8rem; padding: var(--s-2) var(--s-3); }
  .voting-instructions { padding: var(--s-4); }
  .poll-ended-message.is-leer, .poll-ended-message.is-fehler { padding: var(--s-7) var(--s-4); }
}

/* -- Druck ---------------------------------------------------------------------------------------------- */

@media print {
  .atelier { background: #fff !important; color: #000 !important; }
  .atelier::before, .atelier::after { display: none !important; }
  .hn-nav, #toast-container { display: none !important; }
  .atelier .page-content { padding: 0 !important; }
  .submit-zeile, .vote-button, .option-lupe, .leer-marke { display: none !important; }
  .atelier #poll-content * { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  .option-card, .poll-info-item, .voting-instructions { background: none !important; box-shadow: none !important; border-color: #999 !important; break-inside: avoid; }
  .results-bar-fill { background: #555 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}