/* p57 · GEMEINSAMER BAUSTEIN · Das Antwortprofil (Ueberblick ueber alle Antworten).
   Bis p57 stand dieser Block zweimal: unter den Clubs-Namen in
   clubs-06-landing-und-spaet.css und unter den pp-Namen in results_shared.css.
   Massgeblich war die pp-Fassung. Zwei Korrekturen sind eingeflossen:
   die Radien von acht auf drei Pixel (Formensprache) und white-space: nowrap
   auf der Antwortspalte (kam aus der Clubs-Fassung).
   Variablen tragen einen Rueckfall, damit der Baustein in beiden Welten traegt.
   AENDERUNGEN HIER WIRKEN IN ALLEN DREI EDITIONEN. */

.pp-qa-wrap, .qa-overview-wrap {
  margin: 32px 0 24px; border: 1px solid var(--pp-line, var(--line));
  border-radius: 12px; background: var(--pp-paper, var(--paper)); overflow: hidden;
}
.pp-qa-summary, .qa-overview-summary {
  list-style: none; cursor: pointer; padding: 22px 26px;
  display: flex; align-items: center; gap: 16px;
  background: rgba(0, 111, 138, 0.04);
  border-bottom: 1px solid transparent;
}
.pp-qa-summary::-webkit-details-marker, .qa-overview-summary::-webkit-details-marker { display: none; }
.pp-qa-wrap[open] .pp-qa-summary, details[open] .qa-overview-summary { border-bottom-color: var(--pp-line, var(--line)); }
.pp-qa-icon, .qa-overview-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0, 111, 138, 0.10); color: #006F8A;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.pp-qa-head, .qa-overview-head { flex: 1; min-width: 0; }
.pp-qa-h, .qa-overview-h {
  font-family: 'DM Serif Display', Georgia, serif; font-size: 22px;
  color: var(--pp-ink, var(--ink)); line-height: 1.25; margin-bottom: 4px;
}
.pp-qa-sub, .qa-overview-sub { font-size: 13px; color: var(--pp-ink-soft, var(--ink-soft)); line-height: 1.5; }
.pp-qa-stats, .qa-overview-stats {
  flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #006F8A; background: rgba(0, 111, 138, 0.08);
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(0, 111, 138, 0.25);
  white-space: nowrap;
}
.pp-qa-toggle, .qa-overview-toggle { font-size: 12px; color: var(--pp-ink-soft, var(--ink-soft)); margin-left: 4px; white-space: nowrap; }
.pp-qa-wrap[open] > summary > .pp-qa-toggle::before, details[open].qa-overview-wrap > summary > .qa-overview-toggle::before { content: 'Collapse \2191'; }
.pp-qa-wrap:not([open]) > summary > .pp-qa-toggle::before, .qa-overview-wrap:not([open]) > summary > .qa-overview-toggle::before { content: 'Expand \2193'; }
.pp-qa-body, .qa-overview-body { padding: 18px 22px 24px; }
.pp-qa-kpi-group, .qa-kpi-group { margin-top: 18px; }
.pp-qa-kpi-group:first-child, .qa-kpi-group:first-child { margin-top: 0; }
.pp-qa-kpi-h, .qa-kpi-h {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--pp-ink, var(--ink)); color: var(--pp-cream, var(--cream)); border-radius: var(--pp-r-lg, var(--r-lg, 3px)); margin-bottom: 10px;
}
.pp-qa-kpi-h .pp-qa-kpi-label, .qa-kpi-h .qa-kpi-label {
  font-family: 'DM Serif Display', Georgia, serif; font-size: 17px; color: #F7F5F0; flex: 1;
}
.pp-qa-kpi-h .pp-qa-kpi-score, .qa-kpi-h .qa-kpi-score {
  font-size: 12px; font-weight: 600; color: var(--pp-cream, var(--cream));
  background: rgba(247, 245, 240, 0.12); padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.pp-qa-kpi-h .pp-qa-kpi-dot, .qa-kpi-h .qa-kpi-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pp-gold, var(--gold)); flex-shrink: 0; }
.pp-qa-kpi-h.pp-kpi-attention .pp-qa-kpi-dot, .qa-kpi-h.kpi-attention .qa-kpi-dot { background: var(--pp-kpi-attention, var(--kpi-attention)); }
.pp-qa-kpi-h.pp-kpi-commercial .pp-qa-kpi-dot, .qa-kpi-h.kpi-commercial .qa-kpi-dot { background: var(--pp-kpi-commercial, var(--kpi-commercial)); }
.pp-qa-kpi-h.pp-kpi-sports .pp-qa-kpi-dot, .qa-kpi-h.kpi-sport .qa-kpi-dot { background: var(--pp-kpi-sport, var(--kpi-sport)); }
.pp-qa-subdim, .qa-subdim {
  background: #F7F5F0; border: 1px solid var(--pp-line, var(--line)); border-radius: var(--pp-r-lg, var(--r-lg, 3px));
  margin-bottom: 8px; overflow: hidden;
}
.pp-qa-subdim-summary, .qa-subdim-summary {
  list-style: none; cursor: pointer; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px; background: rgba(247, 245, 240, 0.5);
}
.pp-qa-subdim-summary::-webkit-details-marker, .qa-subdim-summary::-webkit-details-marker { display: none; }
.pp-qa-subdim[open] > summary, .qa-subdim[open] > summary { border-bottom: 1px solid var(--pp-line, var(--line)); }
.pp-qa-subdim-name, .qa-subdim-name { font-weight: 600; font-size: 14px; color: var(--pp-ink, var(--ink)); flex: 1; }
.pp-qa-subdim-meta, .qa-subdim-meta { font-size: 12px; color: var(--pp-ink-soft, var(--ink-soft)); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.pp-qa-subdim-score, .qa-subdim-score {
  font-size: 12px; font-weight: 700; color: var(--pp-ink, var(--ink));
  background: rgba(235, 112, 51, 0.12); padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(235, 112, 51, 0.30);
}
.pp-qa-subdim-toggle, .qa-subdim-toggle { font-size: 12px; color: var(--pp-muted, var(--muted)); }
.pp-qa-subdim[open] > summary > .pp-qa-subdim-toggle::before, details.qa-subdim[open] > summary > .qa-subdim-toggle::before { content: '\2212'; }
.pp-qa-subdim:not([open]) > summary > .pp-qa-subdim-toggle::before, details.qa-subdim:not([open]) > summary > .qa-subdim-toggle::before { content: '+'; }
.pp-qa-q-list, .qa-q-list { padding: 6px 0; }
.pp-qa-q-row, .qa-q-row {
  display: grid; grid-template-columns: 1fr auto; gap: 14px;
  align-items: flex-start; padding: 12px 18px; border-bottom: 1px solid var(--pp-line-soft, var(--line-soft));
}
.pp-qa-q-row:last-child, .qa-q-row:last-child { border-bottom: none; }
.pp-qa-q-text, .qa-q-text { font-size: 13px; color: var(--pp-ink, var(--ink)); line-height: 1.5; margin-bottom: 4px; font-weight: 500; }
.pp-qa-q-answer, .qa-q-answer { font-size: 13px; color: var(--pp-ink-soft, var(--ink-soft)); line-height: 1.45; }
.pp-qa-q-answer-empty, .qa-q-answer-empty { color: var(--pp-muted, var(--muted)); font-style: italic; }
.pp-qa-q-answer .pp-qa-arrow, .qa-q-answer .qa-arrow { color: var(--pp-gold, var(--gold)); margin-right: 6px; font-weight: 600; }
.pp-qa-q-notsure, .qa-q-notsure {
  display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #690808;
  background: rgba(105, 8, 8, 0.08); padding: 2px 7px; border-radius: 999px;
  border: 1px solid rgba(105, 8, 8, 0.25);
}
.pp-qa-q-score, .qa-q-score {
  flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--pp-ink, var(--ink));
  background: #F7F5F0; padding: 4px 10px; border-radius: 2px;
  border: 1px solid var(--pp-line, var(--line)); white-space: nowrap; align-self: center;
  font-variant-numeric: tabular-nums;
}
.pp-qa-q-score.pp-score-high, .qa-q-score.score-high { color: #006F8A; border-color: rgba(0, 111, 138, 0.40); background: rgba(0, 111, 138, 0.06); }
.pp-qa-q-score.pp-score-mid, .qa-q-score.score-mid { color: #953B0F; border-color: rgba(235, 112, 51, 0.40); background: rgba(235, 112, 51, 0.06); }
.pp-qa-q-score.pp-score-low, .qa-q-score.score-low { color: #690808; border-color: rgba(105, 8, 8, 0.40); background: rgba(105, 8, 8, 0.06); }
.pp-qa-q-score.pp-score-na, .qa-q-score.score-na { color: var(--pp-muted, var(--muted)); }
.pp-qa-profile-group, .qa-profile-group {
  margin-top: 18px; padding: 14px 16px;
  background: rgba(140, 135, 121, 0.06); border: 1px dashed rgba(140, 135, 121, 0.40); border-radius: 3px;
}
.pp-qa-profile-h, .qa-profile-h {
  font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #6A5F5A; margin-bottom: 4px;
}
.pp-qa-profile-desc, .qa-profile-desc { font-size: 12px; color: var(--pp-ink-soft, var(--ink-soft)); line-height: 1.5; margin-bottom: 10px; }
.pp-qa-profile-row, .qa-profile-row {
  display: grid; grid-template-columns: 1fr auto; gap: 14px;
  padding: 8px 0; border-bottom: 1px dashed rgba(140, 135, 121, 0.30);
}
.pp-qa-profile-row:last-child, .qa-profile-row:last-child { border-bottom: none; }
.pp-qa-profile-q, .qa-profile-q { font-size: 13px; color: var(--pp-ink, var(--ink)); line-height: 1.4; }
.pp-qa-profile-a, .qa-profile-a { font-size: 13px; font-weight: 600; color: var(--pp-ink, var(--ink)); text-align: right; white-space: nowrap;
}
.pp-qa-profile-a-empty, .qa-profile-a-empty { color: var(--pp-muted, var(--muted)); font-weight: 400; font-style: italic; }