/* ============================================================================
 * results_shared.css — styles for window.PPResults (Leagues + Events editions)
 *
 * Every rule is copied from the Clubs edition (app/index.html) and re-prefixed
 * with `pp-` so it can never collide with the host page. All colour values are
 * taken verbatim from the Clubs original; no new colours were invented.
 *
 * The design tokens are re-declared as `--pp-*` custom properties on `.pp-mod`
 * (the class the module adds to every mount element), so the module renders
 * identically even on a host page that does not define the Clubs `:root`
 * variables.
 * ========================================================================== */

.pp-mod {
  /* ---- Rollenbasierte Variablen (verbindlich aus final.html, gespiegelt aus app/index.html) ---- */
  --pp-flaeche-grund:      #F2EFE8;
  --pp-markenfarbe:        #0D3D2D;
  --pp-markenfarbe-soft:   #1E4C39;
  --pp-aktionsakzent:      #EB7033;
  --pp-aktionsakzent-soft: #F0925E;
  --pp-text-auf-hell:      #0D3D2D;
  --pp-text-auf-dunkel:    #F7F5F0;
  --pp-linie:              #E1DFDB;
  --pp-linie-soft:         #EAE8E3;
  --pp-text-gedaempft:     #4A4A48;
  --pp-flaeche-papier:     #F7F5F0;
  --pp-flaeche-weiss:      #FFFDF9;
  --pp-flaeche-ein:        #ECE8DF;
  /* p54 · Sockel unter den Ergebniskacheln, gleicher neutraler Grauton
     wie in der Clubs Edition. Zwei flache Ebenen, harte Kanten, kein
     Verlauf und kein weicher Schatten. */
  --pp-flaeche-sockel:     #E0DCD1;
  --pp-linie-sockel:       #D3CEC2;
  --pp-sockel-versatz:     8px;

  /* ---- Dimensionsfarben (sechs Sub-Dimensionen) ---- */
  /* p40 · nach KPI-Familie geordnet, siehe index.html */
  --pp-kpi-attention:   #006F8A;
  --pp-kpi-commercial:  #B4551D;
  --pp-kpi-sport:       #15661D;
  --pp-dim-fan:         #0094B8;
  --pp-dim-cultural:    #00505F;
  --pp-dim-commercial:  #EB7033;
  --pp-dim-media:       #953B0F;
  --pp-dim-talent:      #1F992B;
  --pp-dim-competitive: #0D3D14;
  --pp-dim-attention:   var(--pp-dim-cultural);
  --pp-dim-sport:       var(--pp-dim-competitive);

  /* ---- Abzeichen fuer Bewertungsstufen (Umriss + Beschriftung, KEINE eigene Farbe) ---- */
  --pp-abzeichen-umriss:  #0D3D2D;
  --pp-abzeichen-text:    #0D3D2D;
  --pp-abzeichen-flaeche: #F7F5F0;

  /* ---- Alte Variablennamen bleiben als Verweise erhalten, damit nichts bricht ---- */
  --pp-ink:        var(--pp-markenfarbe);
  --pp-ink-soft:   var(--pp-markenfarbe-soft);
  --pp-gold:       var(--pp-aktionsakzent);
  --pp-gold-soft:  var(--pp-aktionsakzent-soft);
  --pp-coral:      #006F8A;
  --pp-coral-dark: #690808;
  --pp-cream:      var(--pp-flaeche-grund);
  --pp-sand:       #EAE8E3;
  --pp-line:       var(--pp-linie);
  --pp-line-soft:  var(--pp-linie-soft);
  --pp-muted:      var(--pp-text-gedaempft);
  --pp-paper:      var(--pp-flaeche-papier);
  --pp-white:      var(--pp-flaeche-weiss);
  /* p40 · Leittoene stehen weiter oben */
  /* --pp-shadow-* und --pp-r-* werden zentral von app/shared/form-tokens.css geerbt (Regel Sechs). */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--pp-ink);
  line-height: 1.55;
}
.pp-mod *, .pp-mod *::before, .pp-mod *::after { box-sizing: border-box; }

.pp-empty {
  font-size: 12.5px;
  color: var(--pp-muted);
  padding: 14px 16px;
  background: var(--pp-cream);
  border: 1px dashed var(--pp-line);
  border-radius: var(--pp-r-md);
}


/* ─────────── HERO RING (from .results-hero / .score-* / .hero-ring-*) ─────────── */
.pp-hero-ring {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr;
  gap: 32px;
  background: var(--pp-ink);
  color: var(--pp-cream);
  border-radius: var(--pp-r-xl);
  padding: 40px;
  margin-bottom: 32px;
  box-shadow: var(--pp-shadow-lg);
}


/* Hero text column (verdict-first layout) */
.pp-hero-text .pp-eyebrow { color: var(--pp-gold); }
/* p82 Block D (2026-08-04): the eyebrow is set in capitals, which turned the brand name into
   POWERSCOAR. The brand keeps its own casing here, as it does everywhere else. */
.pp-eyebrow .pp-brandcase { text-transform: none; }
.pp-hero-frame-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.pp-tier-pill {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pp-ink);
  background: var(--pp-gold);
  padding: 4px 12px;
  border-radius: 2px;
}
.pp-hero-verdict {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  color: var(--pp-white);
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 12px;
}
.pp-hero-lead {
  color: var(--pp-cream);
  opacity: 0.85;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 18px;
}
/* p33 Block C · Haarlinien-Kennzahlen, gleich wie in der Clubs Edition.
   Die drei Kennzahlen sitzen in einem Rahmen aus feinen Linien: oben, unten
   und senkrecht zwischen den Zellen. Kein Kasten, keine Fuellung. */
.pp-hero-meta {
  display: grid;
  /* p85: die vierte Zelle (Confidence band) kommt hinzu, sobald ein Bandwert
     vorliegt. auto-fit haelt drei und vier Zellen ohne Sonderfall aus. */
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 0;
  margin-top: 4px;
  border-top: 1px solid rgba(247, 245, 240, 0.20);
  border-bottom: 1px solid rgba(247, 245, 240, 0.20);
}
.pp-hero-meta-cell {
  padding: 18px 18px;
  border-right: 1px solid rgba(247, 245, 240, 0.20);
}
.pp-hero-meta-cell:first-child { padding-left: 0; }
.pp-hero-meta-cell:last-child { border-right: none; padding-right: 0; }
.pp-hero-meta-k {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(245, 241, 230, 0.62);
  margin-bottom: 6px;
  font-weight: 600;
  /* p85: vier Zellen bedeuten schmalere Spalten, in denen laengere Etiketten
     zweizeilig brechen. Zwei Zeilen Mindesthoehe halten alle Kennzahlen auf
     derselben Grundlinie. */
  min-height: 2.6em;
  display: flex;
  align-items: flex-end;
}
.pp-hero-meta-v {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 26px; line-height: 1.1; color: var(--pp-white);
  font-variant-numeric: tabular-nums;
}
/* p86 Welle zwei, Punkt drei (2026-08-04) · Konfidenzstufe farblich abgehoben.
   Dieselben vier Farben wie in Clubs (clubs-03-results.css:181-184), damit die
   Stufe in allen drei Editionen gleich aussieht und nicht als blosser Text
   neben drei anderen Kennzahlen verschwindet. */
/* p86 Welle zwei, Nachtrag (2026-08-04) · Konfidenzleiter, monoton absteigend.
   Vorher war die Reihe nicht monoton: high gruen (S 26%), medium orange (S 61%),
   low ein helleres Orange (S 48%) und directional hellblau (S 28%). Die schwaechste
   Stufe wirkte damit ruhiger und sauberer als die zweitschwaechste, und das Hellblau
   las sich wie eine eigene Aussage statt wie das Ende einer Skala.
   Neu faellt die Saettigung ueber alle vier Stufen: 53% - 48% - 43% - 23%, und mit ihr der
   Kontrast zum Grund: 5,97 - 5,53 - 4,82 - 4,57. Gruen
   markiert weiter die eine Stufe, bei der die Zahl belastbar ist; ab da verblasst
   die warme Reihe bis fast ins Neutrale. Alle vier Farbwinkel liegen in der
   Toleranz der eisernen Regel (Gruen an #15661D, die drei warmen an #EB7033) und
   alle vier erreichen auf --ink #0D3D2D mindestens 4,5:1. Das Stufenwort steht
   ohnehin im Klartext daneben, die Farbe traegt die Aussage also nicht allein. */
.pp-hero-meta-cell.pp-conf-high .pp-hero-meta-v        { color: #5FCB74; }
.pp-hero-meta-cell.pp-conf-medium .pp-hero-meta-v      { color: #E89D78; }
.pp-hero-meta-cell.pp-conf-low .pp-hero-meta-v         { color: #D49478; }
.pp-hero-meta-cell.pp-conf-directional .pp-hero-meta-v { color: #B4998A; }

.pp-hero-meta-sub {
  font-size: 11px; color: rgba(245, 241, 230, 0.62); margin-top: 6px;
  line-height: 1.3;
}
@media (max-width: 720px) {
  .pp-hero-meta { grid-template-columns: 1fr; }
  /* Untereinander gibt es keine Grundlinie mehr auszurichten. */
  .pp-hero-meta-k { min-height: 0; display: block; }
  .pp-hero-meta-cell {
    padding: 14px 0;
    border-right: none;
    border-bottom: 1px solid rgba(247, 245, 240, 0.20);
  }
  .pp-hero-meta-cell:last-child { border-bottom: none; }
  .pp-hero-meta-v { font-size: 24px; }
}


/* The panel is designed for the dark hero block; when mounted standalone the
   module supplies the same ink background so contrast is preserved. */
.pp-why-mount {
  background: var(--pp-ink);
  border-radius: var(--pp-r-xl);
  padding: 24px 28px 28px;
  margin-bottom: 32px;
  box-shadow: var(--pp-shadow-lg);
}


.pp-dash-h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  margin: 0 0 18px;
  color: var(--pp-ink);
  font-weight: 400;
}


.pp-dash-score-100 .pp-dash-of { color: var(--pp-muted); font-size: 14px; letter-spacing: 0.06em; font-family: 'Inter', sans-serif; }


/* p43 · eine Spalte je KPI, die beiden Unterdimensionen darunter.
   Alle drei Spalten teilen dasselbe Zeilenraster, damit die Kacheln
   gleich gross sind und die Zeilen auf einer Linie stehen. */
.pp-dim-grid.pp-dim-grid-cols {
  grid-template-rows: auto 1fr 1fr;
  align-items: stretch;
}


/* p43 · die Spaltenkopfkante traegt die Farbe, die Kachel braucht sie nicht doppelt */
.pp-dim-grid-cols .pp-dim-card::before { display: none; }

.pp-dim-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--pp-kpi-accent, var(--pp-gold));
  border-top-left-radius: var(--pp-r-lg);
  border-top-right-radius: var(--pp-r-lg);
}


/* p44 · Flaechenfarbe des Kopfes: erste Unterdimension einer Familie
   hell mit dunkler Schrift, zweite dunkel mit cremeweisser Schrift.
   Kontrast gegen die Schriftfarbe geprueft: 4,91 · 8,33 · 5,72 · 6,62
   · 4,68 · 11,37 — alle ueber der Schwelle von 4,5. */
.pp-dim-card.pp-kpi-attention.pp-ton-hell    { --pp-dim-flaeche: var(--pp-dim-fan);         --pp-dim-schrift: #1A1A1A; }
.pp-dim-card.pp-kpi-attention.pp-ton-dunkel  { --pp-dim-flaeche: var(--pp-dim-cultural);    --pp-dim-schrift: var(--pp-cream, #F7F5F0); }
.pp-dim-card.pp-kpi-commercial.pp-ton-hell   { --pp-dim-flaeche: var(--pp-dim-commercial);  --pp-dim-schrift: #1A1A1A; }
.pp-dim-card.pp-kpi-commercial.pp-ton-dunkel { --pp-dim-flaeche: var(--pp-dim-media);       --pp-dim-schrift: var(--pp-cream, #F7F5F0); }
.pp-dim-card.pp-kpi-sports.pp-ton-hell       { --pp-dim-flaeche: var(--pp-dim-talent);      --pp-dim-schrift: #1A1A1A; }
.pp-dim-card.pp-kpi-sports.pp-ton-dunkel     { --pp-dim-flaeche: var(--pp-dim-competitive); --pp-dim-schrift: var(--pp-cream, #F7F5F0); }


.pp-dim-card.pp-ton-hell .pp-dim-head-fill .pp-dim-bar { background: rgba(26, 26, 26, 0.22); }

.pp-dim-card .pp-dim-head-fill .pp-dim-band,
.pp-dim-card .pp-dim-head-fill .pp-dim-band.pp-band-top,
.pp-dim-card .pp-dim-head-fill .pp-dim-band.pp-band-strong,
.pp-dim-card .pp-dim-head-fill .pp-dim-band.pp-band-developing,
.pp-dim-card .pp-dim-head-fill .pp-dim-band.pp-band-early {
  color: var(--pp-dim-schrift, #F7F5F0);
  border-color: var(--pp-dim-schrift, #F7F5F0);
  background: transparent;
  margin-bottom: 0;
}
/* p44 · der gefuellte Kopf traegt die Farbe, die Kante daueber entfaellt */
.pp-dim-card::before { display: none; }


/* p43b · eigene Zeile fuer den Marktfaktor-Hinweis */
.pp-dim-card .pp-dim-chiprow { margin: 0 0 8px; }


.pp-dim-card .pp-dim-conv,
.pp-dim-card .pp-dim-conf {
  font-size: 11.5px;
  color: var(--pp-muted);
  line-height: 1.45;
  margin-top: 4px;
}
.pp-dim-catchment-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 2px;
  background: rgba(235, 112, 51, 0.16);
  color: #953B0F;
  border: 1px solid rgba(235, 112, 51, 0.45);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: help;
}

/* ─────────── RESPONSIVE (mirrors the Clubs breakpoints) ─────────── */
@media (max-width: 900px) {
  
  
  
  .pp-hero-ring { grid-template-columns: 1fr; }
  .pp-dim-grid { grid-template-columns: 1fr; }
  /* p43 · auf schmalen Schirmen stapelt alles, ein gemeinsames
     Zeilenraster ergaebe dort keinen Sinn */
  .pp-dim-grid.pp-dim-grid-cols { grid-template-rows: none; }
  .pp-dim-col { display: flex; flex-direction: column; grid-row: auto; }
  .pp-score-circle { width: 180px; height: 180px; }
  .pp-score-pct { font-size: 44px; }
  .pp-hero-ring-legend { max-width: 280px; }
  .pp-hero-meta { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pp-score-circle { width: 160px; height: 160px; }
  .pp-score-pct { font-size: 38px; }
  .pp-hero-ring-legend .pp-hrl-item { font-size: 10.5px; }
  .pp-hero-ring { padding: 24px; }
}

/* ==========================================================================
 * BLOCK G2 (2026-07-31) — Opportunity Quadrant · Capability-Repository teaser ·
 * Action-Plan toolbar · Initiative Library · Q&A Overview.
 *
 * Every colour, radius and type size below is taken verbatim from the Clubs
 * edition (app/index.html) and only re-prefixed with `pp-`. Where Clubs relies
 * on its `:root` variables, the matching `--pp-*` token is used instead so the
 * blocks render identically on the Leagues and Events pages.
 * ======================================================================== */

/* Shared section header for the new blocks (from .invsec-title) */
.pp-sec-title { margin: 36px 0 4px; }
.pp-sec-title .pp-step {
  color: var(--pp-muted); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600;
}
.pp-sec-title h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 28px; font-weight: 400; margin: 4px 0 6px; color: var(--pp-ink);
}
.pp-sec-title .pp-desc { color: var(--pp-muted); font-size: 14px; margin: 0 0 8px; max-width: 720px; line-height: 1.6; }
@media (max-width: 720px) {
  .pp-sec-title h2 { font-size: 23px; }
}

/* ─────────── DIE DREI KPI-KACHELN (p55) ───────────
   Bis p55 gab es diesen Block nur in der Clubs Edition, obwohl alle drei
   Packs dieselben Felder tragen. Er lebt jetzt im geteilten Stylesheet,
   damit Clubs, Leagues und Events denselben Aufbau zeigen.
   Der Sockel folgt der Regel aus p54: nur Ergebnisflaechen bekommen ihn. */
.pp-kpi-block { margin-bottom: 26px; }


.pp-kpi-tile.pp-kpi-attention  { --pp-kpi-accent: var(--pp-kpi-attention); }
.pp-kpi-tile.pp-kpi-commercial { --pp-kpi-accent: var(--pp-kpi-commercial); }
.pp-kpi-tile.pp-kpi-sports     { --pp-kpi-accent: var(--pp-kpi-sport); }
.pp-kpi-name {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; color: var(--pp-ink);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--pp-kpi-accent, var(--pp-line-soft));
  margin-bottom: 10px;
}
.pp-kpi-value {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 46px; line-height: 1; color: var(--pp-ink); margin-bottom: 14px;
}
.pp-kpi-bar {
  height: 6px; background: var(--pp-flaeche-ein);
  border-radius: 0; overflow: hidden; margin-bottom: 14px;
}

.pp-kpi-desc { font-size: 14px; line-height: 1.6; color: var(--pp-ink-soft, var(--pp-ink)); }
@media (max-width: 720px) {
  .pp-kpi-value { font-size: 38px; }
  .pp-kpi-grid { gap: 18px; }
}

/* ─────────── OPPORTUNITY QUADRANT (from .quadrant-*) ─────────── */
.pp-quad-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  margin-top: 18px;
}
.pp-quad-card {
  background: var(--pp-white);
  border: 1px solid var(--pp-line);
  border-radius: 4px;
  padding: 18px 18px 12px;
  min-width: 0;
}
.pp-quad-card svg { width: 100%; height: auto; display: block; }
.pp-quad-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--pp-line-soft);
  font-size: 11px; color: var(--pp-muted); letter-spacing: 0.04em;
}
.pp-quad-legend .pp-ql-item { display: inline-flex; align-items: center; gap: 6px; }
.pp-quad-legend .pp-ql-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pp-quad-legend .pp-ql-size { margin-left: auto; font-style: italic; }
.pp-quad-side {
  background: var(--pp-cream);
  border: 1px solid var(--pp-line);
  border-radius: 4px;
  padding: 18px;
  min-width: 0;
}
.pp-quad-side h3 {
  font-family: 'Inter', sans-serif;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--pp-muted); margin: 0 0 12px; font-weight: 600;
}
.pp-quad-side .pp-qs-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--pp-line-soft); font-size: 13px;
}
.pp-quad-side .pp-qs-row:last-child { border-bottom: none; }
.pp-quad-side .pp-qs-label { color: var(--pp-ink); font-weight: 500; }
.pp-quad-side .pp-qs-num { color: var(--pp-ink); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.pp-quad-side .pp-qs-num-sub { font-weight: 400; font-size: 11px; color: var(--pp-muted); letter-spacing: 0; display: block; }
.pp-quad-side .pp-qs-foot {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--pp-line-soft);
  font-size: 11px; color: var(--pp-muted); line-height: 1.55;
}
.pp-quad-side .pp-qs-empty { font-size: 12px; color: var(--pp-muted); line-height: 1.55; margin: 8px 0 6px; }
.pp-quad-side .pp-qs-init-card {
  background: var(--pp-white);
  border: 1px solid var(--pp-line);
  border-left: 4px solid var(--pp-gold);
  border-radius: 3px;
  padding: 12px 14px;
  margin-top: 6px;
}
.pp-quad-side .pp-qs-name { font-size: 14px; font-weight: 600; color: var(--pp-ink); line-height: 1.3; }
.pp-quad-side .pp-qs-meta {
  margin: 6px 0 8px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--pp-muted);
}
.pp-quad-side .pp-qs-desc { font-size: 12px; color: var(--pp-ink-soft); line-height: 1.5; margin-bottom: 10px; }
.pp-quad-side .pp-qs-kv {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 11.5px;
}
.pp-quad-side .pp-qs-kv .pp-k { color: var(--pp-muted); }
.pp-quad-side .pp-qs-kv .pp-v {
  color: var(--pp-ink); font-weight: 600; text-align: right;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.pp-quad-side .pp-qs-kpi-block {
  margin: 12px 0 10px; padding: 10px 12px;
  background: #FAF7F1; border: 1px solid var(--pp-line-soft); border-radius: 8px;
}
.pp-quad-side .pp-qs-kpi-title {
  font-size: 11px; color: var(--pp-muted); letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 8px; line-height: 1.45;
}
.pp-quad-side .pp-qs-kpi-row {
  display: grid; grid-template-columns: 78px 1fr auto;
  align-items: center; gap: 8px; margin: 4px 0; font-size: 12px;
}
.pp-quad-side .pp-qs-kpi-label { color: var(--pp-ink); font-weight: 500; }
.pp-quad-side .pp-qs-kpi-bar-wrap { height: 8px; background: rgba(0, 0, 0, 0.06); border-radius: 2px; overflow: hidden; }
.pp-quad-side .pp-qs-kpi-bar { height: 100%; border-radius: 2px; }
.pp-quad-side .pp-qs-kpi-val { font-variant-numeric: tabular-nums; color: var(--pp-ink); font-weight: 600; font-size: 11px; }
.pp-quad-side .pp-qs-pill {
  display: inline-block; padding: 2px 8px; border-radius: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; margin-right: 6px;
}
.pp-quad-side .pp-qs-pill.pp-b-GO { background: #006F8A; color: #F7F5F0; }
.pp-quad-side .pp-qs-pill.pp-b-FASTTRACK { background: #EB7033; color: #1A1A1A; }
.pp-quad-side .pp-qs-pill.pp-b-CONSIDER { background: #690808; color: #F7F5F0; }
.pp-quad-side .pp-qs-pill.pp-b-PARK { background: #848888; color: #1A1A1A; }
.pp-quad-side .pp-qs-quad-counts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px;
}
.pp-quad-side .pp-qcc {
  background: var(--pp-white); border: 1px solid var(--pp-line-soft);
  border-radius: 2px; padding: 8px 10px; font-size: 11px; text-align: center;
}
.pp-quad-side .pp-qcc .pp-num {
  display: block; font-family: 'DM Serif Display', Georgia, serif;
  font-size: 18px; color: var(--pp-ink);
}
.pp-quad-side .pp-qcc .pp-lbl { color: var(--pp-muted); font-size: 10px; letter-spacing: 0.04em; line-height: 1.35; display: block; }
.pp-quad-bubble { cursor: pointer; transition: fill-opacity 0.15s ease; }
.pp-quad-bubble.pp-is-active { fill-opacity: 0.9; stroke-width: 2.5; }
@media (max-width: 900px) {
  .pp-quad-wrap { grid-template-columns: 1fr; }
}

/* ─────────── CAPABILITY REPOSITORY TEASER (from .cap-repo-* / .cap-card-*) ─────────── */
.pp-caprepo-wrap {
  margin: 32px 0;
  border: 1px solid var(--pp-line);
  border-radius: 4px;
  background: var(--pp-paper);
  overflow: hidden;
}
.pp-caprepo-summary {
  list-style: none; cursor: pointer; padding: 22px 26px;
  display: flex; align-items: center; gap: 16px;
  background: rgba(235, 112, 51, 0.04);
  border-bottom: 1px solid transparent;
}
.pp-caprepo-summary::-webkit-details-marker { display: none; }
.pp-caprepo-wrap[open] .pp-caprepo-summary { border-bottom-color: var(--pp-line); }
.pp-caprepo-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(235, 112, 51, 0.12); color: var(--pp-gold);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.pp-caprepo-head { flex: 1; min-width: 0; }
.pp-caprepo-h {
  font-family: 'DM Serif Display', Georgia, serif; font-size: 22px;
  color: var(--pp-ink); line-height: 1.25; margin-bottom: 4px;
}
.pp-caprepo-sub { font-size: 13px; color: var(--pp-ink-soft); line-height: 1.5; }
.pp-caprepo-lock {
  flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--pp-gold);
  background: rgba(235, 112, 51, 0.10); padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(235, 112, 51, 0.30);
}
.pp-caprepo-toggle { font-size: 12px; color: var(--pp-ink-soft); margin-left: 4px; white-space: nowrap; }
.pp-caprepo-wrap[open] > summary > .pp-caprepo-toggle::before { content: 'Collapse \2191'; }
.pp-caprepo-wrap:not([open]) > summary > .pp-caprepo-toggle::before { content: 'Expand \2193'; }
.pp-caprepo-body { padding: 24px 26px 26px; }
.pp-caprepo-intro { font-size: 14px; color: var(--pp-ink-soft); line-height: 1.6; margin: 0 0 20px; }
.pp-caprepo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 760px) { .pp-caprepo-grid { grid-template-columns: 1fr; } }


.pp-caprepo-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 20px; background: var(--pp-ink); color: var(--pp-cream); border-radius: 10px;
}
.pp-caprepo-cta-text { flex: 1; min-width: 0; }
.pp-caprepo-cta-h { font-family: 'DM Serif Display', Georgia, serif; font-size: 18px; color: #F7F5F0; margin-bottom: 4px; }
.pp-caprepo-cta-b { font-size: 13px; color: rgba(247, 245, 240, 0.85); line-height: 1.5; }
@media (max-width: 720px) {
  /* flex-wrap alone is not enough: the head has flex:1 and min-width:0, so it
     collapses to a few characters per line instead of wrapping. Stack instead. */
  .pp-caprepo-summary { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; }
  .pp-caprepo-head { width: 100%; }
  .pp-caprepo-cta { flex-direction: column; align-items: flex-start; }
}

/* ─────────── ACTION-PLAN TOOLBAR (from .action-plan-toolbar) ─────────── */
.pp-apt {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px 20px; margin: 10px 0 12px;
  background: rgba(235, 112, 51, 0.08);
  border: 1px solid rgba(235, 112, 51, 0.35);
  border-left: 4px solid var(--pp-gold);
  border-radius: var(--pp-r-md);
}
.pp-apt .pp-apt-left { display: flex; align-items: center; gap: 12px; color: var(--pp-ink); font-size: 14px; }
.pp-apt .pp-apt-icon {
  font-size: 20px; color: var(--pp-gold); font-weight: 700; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--pp-white); border: 1px solid rgba(235, 112, 51, 0.4); border-radius: 50%;
}
.pp-apt .pp-apt-text { max-width: 540px; line-height: 1.45; }
.pp-apt .pp-apt-btn {
  white-space: nowrap; cursor: pointer;
  background: var(--pp-gold); color: var(--pp-ink);
  border: 1px solid var(--pp-gold); border-radius: 6px;
  padding: 11px 20px; font-size: 13px; font-weight: 600; font-family: inherit;
  letter-spacing: 0.02em;
}
.pp-apt .pp-apt-btn:hover { background: var(--pp-gold-soft); }
@media (max-width: 720px) {
  .pp-apt { flex-direction: column; align-items: stretch; gap: 12px; }
  .pp-apt .pp-apt-btn { width: 100%; }
}
@media print { .pp-apt { display: none !important; } }

/* ─────────── INITIATIVE LIBRARY (from .idb-*) ─────────── */
.pp-lib-wrap {
  background: var(--pp-white); border: 1px solid var(--pp-line);
  border-radius: 4px; padding: 20px 22px; margin-top: 18px;
}
.pp-lib-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px; margin-bottom: 16px;
  background: #FFF6E0;
  border: 1px solid #F0925E; border-left: 4px solid #EB7033;
  border-radius: 3px; font-size: 13px; line-height: 1.5; color: #953B0F;
}
.pp-lib-banner .pp-lib-banner-icon { color: #953B0F; font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.pp-lib-banner strong { color: #1F2A26; font-weight: 600; }
.pp-lib-controls {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr) auto;
  gap: 10px; margin-bottom: 14px; align-items: end;
}
.pp-lib-controls label {
  display: block; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--pp-muted); margin-bottom: 4px;
}
.pp-lib-controls input, .pp-lib-controls select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--pp-line);
  border-radius: 6px; background: var(--pp-paper); font-size: 13px;
  color: var(--pp-ink); font-family: inherit;
}
.pp-lib-controls input:focus, .pp-lib-controls select:focus {
  outline: none; border-color: var(--pp-gold); box-shadow: 0 0 0 3px rgba(235, 112, 51, 0.12);
}
.pp-lib-reset {
  padding: 8px 14px; border: 1px solid var(--pp-line); background: var(--pp-cream);
  border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--pp-ink); font-family: inherit;
}
.pp-lib-reset:hover { background: var(--pp-sand); }
.pp-lib-meta { font-size: 11.5px; color: var(--pp-muted); margin-bottom: 10px; letter-spacing: 0.04em; }
.pp-lib-scroll {
  max-height: 520px; overflow-y: auto;
  border: 1px solid var(--pp-line-soft); border-radius: 8px;
}
.pp-lib-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pp-lib-table thead th {
  position: sticky; top: 0; background: var(--pp-cream); z-index: 2;
  padding: 10px 12px; text-align: left; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--pp-muted);
  border-bottom: 1px solid var(--pp-line); cursor: pointer; user-select: none;
}
.pp-lib-table thead th .pp-lib-arrow { color: var(--pp-gold); margin-left: 4px; font-size: 10px; }
.pp-lib-table td { padding: 10px 12px; border-bottom: 1px solid var(--pp-line-soft); vertical-align: top; }
.pp-lib-table tr:hover td { background: var(--pp-cream); }
.pp-lib-table .pp-lib-name { font-weight: 600; color: var(--pp-ink); }
.pp-lib-table .pp-lib-desc { color: var(--pp-muted); font-size: 11.5px; line-height: 1.45; margin-top: 4px; }
.pp-lib-table .pp-lib-cat { color: var(--pp-muted); font-size: 11px; letter-spacing: 0.04em; }
.pp-lib-table .pp-num-cell { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-lib-mobmeta { display: none; margin-top: 6px; font-size: 11px; color: var(--pp-muted); letter-spacing: 0.03em; }
.pp-lib-empty { padding: 30px; text-align: center; color: var(--pp-muted); font-size: 13px; }
@media (max-width: 900px) {
  .pp-lib-wrap { padding: 16px 14px; }
  .pp-lib-controls { grid-template-columns: 1fr 1fr; }
  .pp-lib-scroll { overflow-x: hidden; }
  .pp-lib-table { min-width: 0; font-size: 12px; }
  /* Keep the initiative and the uplift figure; everything else moves into
     .pp-lib-mobmeta so there is no sideways scroll. */
  .pp-lib-table thead th:nth-child(2),
  .pp-lib-table thead th:nth-child(3),
  .pp-lib-table thead th:nth-child(4),
  .pp-lib-table thead th:nth-child(6),
  .pp-lib-table thead th:nth-child(7),
  .pp-lib-table td:nth-child(2),
  .pp-lib-table td:nth-child(3),
  .pp-lib-table td:nth-child(4),
  .pp-lib-table td:nth-child(6),
  .pp-lib-table td:nth-child(7) { display: none; }
  .pp-lib-table { table-layout: fixed; }
  .pp-lib-table thead th, .pp-lib-table td { padding: 9px 8px; white-space: normal; word-break: normal; }
  .pp-lib-table thead th:nth-child(5), .pp-lib-table td:nth-child(5) { width: 74px; }
  .pp-lib-table thead th:nth-child(1) { width: auto; }
  .pp-lib-mobmeta { display: block; }
}

@media (max-width: 720px) {
  .pp-qa-summary { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; }
  .pp-qa-head { width: 100%; }
  .pp-qa-h { font-size: 19px; }
  .pp-qa-body { padding: 14px 12px 18px; }
  
  
  .pp-qa-subdim-summary { flex-wrap: wrap; gap: 6px; }
}

/* ────────────────────────────────────────────────────────────────────────────
 * NACHBESSERUNG 2026-07-31 · tier-fit words, table legend, narrow-screen key
 * ──────────────────────────────────────────────────────────────────────────── */
.pp-mod .pp-lib-table td.pp-lib-fit { font-size: 12px; letter-spacing: 0.02em; }
.pp-mod .pp-lib-fit .pp-fit-strong   { color: var(--pp-kpi-attention); font-weight: 600; }
.pp-mod .pp-lib-fit .pp-fit-moderate { color: var(--pp-ink-soft); }
.pp-mod .pp-lib-fit .pp-fit-limited  { color: var(--pp-muted); }
.pp-mod .pp-lib-legendline {
  margin-top: 12px; font-size: 12px; line-height: 1.55; color: var(--pp-ink-soft);
  border-top: 1px dashed var(--pp-line); padding-top: 10px;
}
.pp-mod .pp-lib-legendline strong { color: var(--pp-ink); }
.pp-mod .pp-ql-key {
  display: block; width: 100%; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--pp-line);
  font-size: 12px; line-height: 1.5; color: var(--pp-ink-soft); letter-spacing: 0.01em;
}
.pp-mod .pp-ql-key strong { color: var(--pp-ink); font-weight: 600; }

/* DD-1 Fix A/11 (2026-07-31): shared safeguard for a bottom-fixed notice (cookie strip).
   Whenever a page sets body.ck-visible, the question block reserves the measured notice
   height so the lowest answer options stay reachable at 390 px. */
body.ck-visible #screen-quest,
body.ck-visible #stage-questions { padding-bottom: calc(var(--ck-h, 92px) + 24px); }

/* DD-1 Fix B/A (2026-08-01) — one-line explainer under every rating band.
   States that the band compares inside the own tier group, not across tiers. */
.pp-band-tier-note,
.pp-dim-band-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--muted, #4A4A48);
}


/* ====================================================================== */
/* p45 · Beobachtungskennzahl und Aufklapper "Why this score?"             */
/* Farben strikt aus der Palette: Orange-Familie fuer nach unten,          */
/* Gruen-Familie fuer nach oben, Petrolblau fuer neutrale Hinweise.        */
/* ====================================================================== */
.pp-dim-watch {
  font-size: 12px;
  color: var(--pp-muted, #5C5A55);
  line-height: 1.45;
  margin: 10px 0 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}
.pp-dim-watch strong { color: #1A1A1A; font-weight: 600; }
.pp-dim-watch-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  margin-left: 6px;
  background: rgba(0, 111, 138, 0.08);
  border: 1px solid rgba(0, 111, 138, 0.28);
  border-radius: 2px;
  color: #006F8A;
  vertical-align: middle;
  cursor: help;
}


/* ==========================================================================
   C7 (2026-08-18) · Confidence & Open Questions section.
   Sits at the very end of the report; transparent read on where the signal
   is strong, where it is thin, and which questions were left open.
   ========================================================================== */
.c7-section {
  margin-top: 40px;
  padding: 28px;
  border-radius: 12px;
  background: rgba(20, 77, 61, 0.04);
  border: 1px solid rgba(20, 77, 61, 0.12);
}
.c7-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #4A4A48);
  margin-bottom: 6px;
}
.c7-title {
  font-size: 22px;
  color: var(--ink, #0D3D2D);
  margin: 0 0 10px 0;
}
.c7-lead {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink, #0D3D2D);
  opacity: 0.85;
  margin: 0 0 20px 0;
  max-width: 780px;
}
.c7-conf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.c7-conf-card {
  background: #fff;
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.c7-conf-kpi {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted, #4A4A48);
}
.c7-conf-level {
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0 6px 0;
}
.c7-conf-blurb {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink, #0D3D2D);
  opacity: 0.85;
}
.c7-block {
  margin-top: 18px;
  padding: 16px 18px;
  background: #fff;
  border-radius: 8px;
  border-left: 3px solid rgba(20, 77, 61, 0.35);
}
.c7-block-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #0D3D2D);
  margin: 0 0 8px 0;
}
.c7-block-lead {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink, #0D3D2D);
  opacity: 0.85;
  margin: 0 0 10px 0;
  max-width: 780px;
}
.c7-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.c7-list li {
  padding: 6px 0;
  border-top: 1px solid rgba(20, 77, 61, 0.08);
  font-size: 13px;
  line-height: 1.45;
}
.c7-list li:first-child { border-top: none; }
.c7-qid {
  display: inline-block;
  min-width: 60px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--muted, #4A4A48);
  padding: 2px 6px;
  background: rgba(20, 77, 61, 0.06);
  border-radius: 3px;
  margin-right: 8px;
}
.c7-qtext {
  color: var(--ink, #0D3D2D);
}
.c7-note {
  margin-top: 18px;
  padding: 16px 18px;
  background: rgba(185, 138, 58, 0.08);
  border-left: 3px solid #b98a3a;
  border-radius: 8px;
}