/* Gemeinsam verwendete Typografie/Skala in Live-Umfrage und Backend-Vorschau.
   Beide Ansichten benutzen exakt dieselben Fonts, Laufweiten und Skalierungsregeln. */
.positioning-visual {
  width:100%; min-width:0; container-type:inline-size;
  --position-font:var(--font-headline, "Inter", Arial, sans-serif);
  --position-tracking-head:var(--tracking-headline, -.07em);
  --position-tracking-pole:var(--tracking-pole, -.045em);
  --position-title-size:var(--question-title-size, 36);
  --position-pole-size:var(--pole-size, 28);
}
.positioning-visual .positioning-title {
  font-family:var(--position-font); font-size:clamp(22px, calc(var(--position-title-size) * 1px), 52px);
  font-weight:750; line-height:1.15; letter-spacing:var(--position-tracking-head);
  color:#252b69; text-align:center; max-width:100%;
}
.positioning-visual .positioning-scale {
  width:100%; min-width:0; display:grid; align-items:center;
  grid-template-columns:minmax(0,1.7fr) repeat(6,minmax(0,1fr)) minmax(0,1.7fr);
  gap:clamp(6px,.85cqw,16px);
}
.positioning-visual .positioning-pole {
  display:block; min-width:0; max-width:100%;
  font-family:var(--position-font);font-weight:700;
  font-size:clamp(16px, calc(var(--position-pole-size) * 1px), 38px);line-height:1.12;
  letter-spacing:var(--position-tracking-pole);
  white-space:normal; overflow-wrap:anywhere; hyphens:auto;
  color:var(--blue,#303bff);
}
.positioning-visual .positioning-pole:first-child{text-align:left}
.positioning-visual .positioning-pole:last-child{text-align:right}
.positioning-visual .positioning-cell {
  display:block; min-width:0; width:100%; aspect-ratio:1.68;
  min-height:48px; height:auto; border:3px solid var(--blue,#303bff);
  border-radius:clamp(10px,1.15cqw,21px);
  background:#b6c8ff;
}
.positioning-visual .positioning-cell[aria-pressed="true"],
.positioning-visual .positioning-cell.selected { background:var(--accent,#ff5266) }
/* Kartenbreite statt Browserbreite bestimmt, wann die Beschriftung über die Felder wandert. */
@container (max-width:800px) {
  .positioning-visual .positioning-scale{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:clamp(5px,1.2cqw,12px);row-gap:11px}
  .positioning-visual .positioning-pole{grid-row:1;font-size:clamp(18px, calc(var(--position-pole-size) * .86px), 29px)}
  .positioning-visual .positioning-pole:first-child{grid-column:1/4}
  .positioning-visual .positioning-pole:last-child{grid-column:4/7}
  .positioning-visual .positioning-cell{grid-row:2;min-height:56px}
}
@container (max-width:430px) {
  .positioning-visual .positioning-title{font-size:clamp(24px, calc(var(--position-title-size) * .8px), 34px)}
  .positioning-visual .positioning-scale{row-gap:12px}
  .positioning-visual .positioning-pole{font-size:clamp(18px, calc(var(--position-pole-size) * .82px), 27px)}
  .positioning-visual .positioning-cell{min-height:53px;aspect-ratio:.8;border-width:2px;border-radius:10px}
}