/* app/shared/ergebnis-kacheln.css
   Etappe drei · gemeinsamer Baustein fuer Clubs, Leagues und Events.
   Jede Regel traegt beide Selektoren. Variablen tragen Rueckfaelle,
   damit sie in beiden Welten greifen.
   Erzeugt aus results_shared.css und den clubs-0x-Dateien.
*/

.pp-eyebrow, .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 600;
  color: #953B0F;
  margin: 0 0 6px;
  margin-bottom: 12px;
}

.pp-kpi-grid, .kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  padding: 0 var(--pp-sockel-versatz, var(--sockel-versatz)) var(--pp-sockel-versatz, var(--sockel-versatz)) 0;
  margin-top: 12px;
}

.pp-kpi-tile, .kpi-tile {
  position: relative;
  background: var(--pp-white, var(--white));
  border: 1.5px solid var(--pp-line-soft, var(--line-soft));
  border-radius: var(--pp-r-lg, var(--r-lg));
  padding: 24px;
  box-shadow:
  var(--pp-sockel-versatz, var(--sockel-versatz)) var(--pp-sockel-versatz, var(--sockel-versatz)) 0 0 var(--pp-flaeche-sockel, var(--flaeche-sockel)),
  var(--pp-sockel-versatz, var(--sockel-versatz)) var(--pp-sockel-versatz, var(--sockel-versatz)) 0 1px var(--pp-linie-sockel, var(--linie-sockel));
  overflow: visible;
}

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

.pp-kpi-bar-fill, .kpi-bar-fill {
  height: 100%; background: var(--accent, var(--pp-kpi-accent, var(--gold, #EB7033))); transition: width 0.6s ease;
}

.pp-dash-card, .dash-card {
  background: var(--pp-white, var(--white));
  border: 1px solid var(--pp-line-soft, var(--line-soft));
  border-radius: var(--pp-r-lg, var(--r-lg));
  padding: 24px 26px;
}

.pp-dash-score-wrap, .dash-score-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0;
}

.pp-dash-score-100, .dash-score-100 {
  font-family: 'DM Serif Display', Georgia, serif; font-size: 56px; color: #953B0F; line-height: 1;
}

.pp-dash-band-row, .dash-band-row {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--pp-line-soft, var(--line-soft));
  font-size: 13px;
}

.pp-dash-band-row .pp-band-label, .dash-band-row .band-label {
  color: var(--pp-muted, var(--muted));
}

.pp-dash-band-row .pp-band-value, .dash-band-row .band-value {
  color: #953B0F; font-weight: 600;
}

.pp-dash-score-5, .dash-score-5 {
  margin-top: -4px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--pp-muted, var(--muted));
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.pp-dash-scale, .dash-scale {
  width: 100%;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--pp-line-soft, var(--line-soft));
}

.pp-dash-scale-title, .dash-scale-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-muted, var(--muted));
  margin-bottom: 8px;
  text-align: center;
}

.pp-dash-scale-track, .dash-scale-track {
  position: relative;
  height: 14px;
  background: var(--pp-line-soft, var(--line-soft));
  border-radius: 2px;
  overflow: visible;
}

.pp-dash-scale-fill-pot, .dash-scale-fill-pot {
  position: absolute; left: 0; top: 0; height: 100%;
  background: rgba(235, 112, 51, 0.30);
  border-radius: 2px 0 0 7px;
  transition: width 0.4s ease;
}

.pp-dash-scale-fill-ach, .dash-scale-fill-ach {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--pp-gold, var(--gold));
  border-radius: 2px 0 0 7px;
  transition: width 0.4s ease;
}

.pp-dash-scale-marker-ceil, .dash-scale-marker-ceil {
  position: absolute; top: -3px; height: 20px;
  transform: translateX(-50%);
  pointer-events: none;
}

.pp-dash-scale-marker-ceil .pp-dsm-tick, .dash-scale-marker-ceil .dsm-tick {
  display: block;
  width: 2px;
  height: 100%;
  background: var(--pp-ink, var(--ink));
  margin: 0 auto;
}

.pp-dash-scale-labels, .dash-scale-labels {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 10.5px;
}

.pp-dash-scale-labels > span, .dash-scale-labels > span {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 0;
  flex: 1;
}

.pp-dash-scale-labels .pp-dsl-pot, .dash-scale-labels .dsl-pot {
  align-items: center; text-align: center;
}

.pp-dash-scale-labels .pp-dsl-ceil, .dash-scale-labels .dsl-ceil {
  align-items: flex-end; text-align: right;
}

.pp-dsl-sw, .dsl-sw {
  display: inline-block; width: 10px; height: 8px; border-radius: 2px;
  margin-bottom: 2px;
}

.pp-sw-ach, .sw-ach {
  background: var(--pp-gold, var(--gold));
}

.pp-sw-pot, .sw-pot {
  background: rgba(235, 112, 51, 0.30);
}

.pp-sw-ceil, .sw-ceil {
  background: var(--pp-ink, var(--ink)); width: 2px; height: 10px; border-radius: 0;
}

.pp-dsl-k, .dsl-k {
  color: var(--pp-muted, var(--muted));
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pp-dsl-v, .dsl-v {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 14px;
  color: var(--pp-ink, var(--ink));
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pp-dash-kpi-mini, .dash-kpi-mini {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--pp-line-soft, var(--line-soft));
}

.pp-dash-kpi-mini .pp-dkm-cell, .dash-kpi-mini .dkm-cell {
  text-align: center;
  padding: 4px 2px;
}

.pp-dash-kpi-mini .pp-dkm-label, .dash-kpi-mini .dkm-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-muted, var(--muted));
  margin-bottom: 4px;
}

.pp-dash-kpi-mini .pp-dkm-value, .dash-kpi-mini .dkm-value {
  display: block;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  color: var(--pp-ink, var(--ink));
  line-height: 1;
}

.pp-dash-kpi-mini .pp-dkm-of, .dash-kpi-mini .dkm-of {
  font-size: 10px;
  color: var(--pp-muted, var(--muted));
  margin-left: 2px;
  font-family: 'Inter', sans-serif;
}

.pp-dim-grid, .dim-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* p54 · Luft fuer den Sockel */
  /* p54 · rechts und unten Platz, damit der Sockel der Randkacheln
  nicht ueber den Container hinauslaeuft */
  padding: 0 var(--pp-sockel-versatz, var(--sockel-versatz)) var(--pp-sockel-versatz, var(--sockel-versatz)) 0;
  margin: 14px 0 28px;
  grid-template-rows: auto 1fr 1fr;
  align-items: stretch;
}

.pp-dim-col, .dim-col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 20px; /* p54 */
}

.pp-dim-col-head, .dim-col-head {
  border-top: 4px solid var(--pp-kpi-accent, var(--kpi-accent, var(--pp-ink)));
  padding: 10px 2px 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}

.pp-dim-col-name, .dim-col-name {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--pp-kpi-accent, var(--kpi-accent, var(--pp-ink)));
}

.pp-dim-col-score, .dim-col-score {
  font-family: 'DM Serif Display', Georgia, serif; font-size: 22px; line-height: 1;
  color: var(--pp-kpi-accent, var(--kpi-accent, var(--pp-ink)));
}

.pp-dim-col-score .pp-dim-col-of, .dim-col-score .dim-col-of {
  font-family: inherit; font-size: 12px; opacity: 0.7;
}

.pp-dim-col.pp-kpi-attention, .dim-col.kpi-attention {
  --pp-kpi-accent: var(--pp-kpi-attention, var(--kpi-attention));
}

.pp-dim-col.pp-kpi-commercial, .dim-col.kpi-commercial {
  --pp-kpi-accent: var(--pp-kpi-commercial, var(--kpi-commercial));
}

.pp-dim-col.pp-kpi-sports, .dim-col.kpi-sports {
  --pp-kpi-accent: var(--pp-kpi-sport, var(--kpi-sport));
}

.pp-dim-card, .dim-card {
  /* p43 · Spalte, damit die Kachel die Zeilenhoehe fuellt */
  display: flex;
  flex-direction: column;
  background: var(--pp-white, var(--white));
  border: 1px solid var(--pp-line-soft, var(--line-soft));
  border-radius: var(--pp-r-lg, var(--r-lg));
  padding: 18px 18px 16px;
  position: relative;
  overflow: visible;
  /* p54 · Sockel. Streuung null, deshalb optisch eine zweite Flaeche
  und kein Schlagschatten. */
  box-shadow:
  var(--pp-sockel-versatz, var(--sockel-versatz)) var(--pp-sockel-versatz, var(--sockel-versatz)) 0 0 var(--pp-flaeche-sockel, var(--flaeche-sockel)),
  var(--pp-sockel-versatz, var(--sockel-versatz)) var(--pp-sockel-versatz, var(--sockel-versatz)) 0 1px var(--pp-linie-sockel, var(--linie-sockel));
}

.pp-dim-card.pp-kpi-attention, .dim-card.kpi-attention {
  --pp-kpi-accent: var(--pp-kpi-attention, var(--kpi-attention));
}

.pp-dim-card.pp-kpi-commercial, .dim-card.kpi-commercial {
  --pp-kpi-accent: var(--pp-kpi-commercial, var(--kpi-commercial));
}

.pp-dim-card.pp-kpi-sports, .dim-card.kpi-sports {
  --pp-kpi-accent: var(--pp-kpi-sport, var(--kpi-sport));
}

.pp-dim-card .pp-dim-head-fill, .dim-card .dim-head-fill {
  background: var(--pp-dim-flaeche, var(--dim-flaeche, #0D3D2D));
  color: var(--pp-dim-schrift, var(--dim-schrift, #F7F5F0));
  margin: -18px -18px 14px;
  padding: 16px 18px 15px;
}

.pp-dim-card .pp-dim-head-fill .pp-dim-eyebrow, .pp-dim-card .pp-dim-head-fill .pp-dim-name, .pp-dim-card .pp-dim-head-fill .pp-dim-score, .pp-dim-card .pp-dim-head-fill .pp-dim-of, .dim-card .dim-head-fill .dim-eyebrow, .dim-card .dim-head-fill .dim-name, .dim-card .dim-head-fill .dim-score, .dim-card .dim-head-fill .dim-of {
  color: var(--pp-dim-schrift, var(--dim-schrift, #F7F5F0));
}

.pp-dim-card .pp-dim-head-fill .pp-dim-name, .dim-card .dim-head-fill .dim-name {
  font-size: 15px; font-weight: 600;
}

.pp-dim-card .pp-dim-head-fill .pp-dim-score, .dim-card .dim-head-fill .dim-score {
  font-size: 34px;
}

.pp-dim-card .pp-dim-head-fill .pp-dim-bar, .dim-card .dim-head-fill .dim-bar {
  background: rgba(247, 245, 240, 0.28); margin: 10px 0 12px;
}

.pp-dim-card .pp-dim-head-fill .pp-dim-bar-fill, .dim-card .dim-head-fill .dim-bar-fill {
  background: var(--pp-dim-schrift, var(--dim-schrift, #F7F5F0));
}

.pp-dim-card .pp-dim-desc, .dim-card .dim-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--pp-muted, var(--muted));
  margin: 8px 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pp-line-soft, var(--line-soft));
}

.pp-dim-card .pp-dim-eyebrow, .dim-card .dim-eyebrow {
  color: var(--pp-muted, var(--muted));
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 4px;
}

.pp-dim-card .pp-dim-header, .dim-card .dim-header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.pp-dim-card .pp-dim-name, .dim-card .dim-name {
  font-size: 15px; font-weight: 600; color: var(--pp-ink, var(--ink));
}

.pp-dim-card .pp-dim-score, .dim-card .dim-score {
  font-family: 'DM Serif Display', Georgia, serif; font-size: 24px; color: var(--pp-ink, var(--ink)); line-height: 1;
}

.pp-dim-card .pp-dim-of, .dim-card .dim-of {
  font-size: 11px; color: var(--pp-muted, var(--muted));
}

.pp-dim-card .pp-dim-bar, .dim-card .dim-bar {
  height: 4px; background: var(--pp-line-soft, var(--line-soft)); border-radius: 3px; overflow: hidden; margin: 8px 0 14px;
}

.pp-dim-card .pp-dim-bar-fill, .dim-card .dim-bar-fill {
  height: 100%; background: var(--pp-kpi-accent, var(--kpi-accent, var(--pp-gold))); border-radius: 3px;
}

.pp-dim-card .pp-dim-band, .dim-card .dim-band {
  display: inline-block;
  color: var(--pp-abzeichen-text, var(--abzeichen-text));
  border: 1.5px solid var(--pp-abzeichen-umriss, var(--abzeichen-umriss));
  background: var(--pp-abzeichen-flaeche, var(--abzeichen-flaeche));
  border-radius: 2px;
  padding: 2px 9px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}

.pp-dim-band-note, .dim-band-note {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted, #4A4A48);
}

.pp-dim-card .pp-dim-band.pp-band-top, .pp-dim-card .pp-dim-band.pp-band-strong, .pp-dim-card .pp-dim-band.pp-band-developing, .pp-dim-card .pp-dim-band.pp-band-early, .dim-card .dim-band.band-top, .dim-card .dim-band.band-strong, .dim-card .dim-band.band-developing, .dim-card .dim-band.band-early {
  color: var(--pp-abzeichen-text, var(--abzeichen-text)); border-color: var(--pp-abzeichen-umriss, var(--abzeichen-umriss)); background: var(--pp-abzeichen-flaeche, var(--abzeichen-flaeche));
}

/* Prueflauf 2026-08-06 · Eine Dimension ohne gewertete Antwort traegt keine
   Bandstufe. Sie bekommt eine eigene, neutrale Plakette und eine leere
   Balkenschiene statt eines Balkens auf null Prozent. */
.pp-dim-card .pp-dim-band.pp-band-unscored, .dim-card .dim-band.band-unscored {
  color: var(--pp-muted, var(--muted, #4A4A48));
  border-color: var(--pp-line, var(--line, #E1DFDB));
  background: transparent;
}

.pp-dim-card .pp-dim-bar.is-unscored, .dim-card .dim-bar.is-unscored {
  opacity: 0.45;
}

.pp-dim-card .pp-dim-gap, .dim-card .dim-gap {
  font-size: 12px; color: var(--pp-muted, var(--muted)); line-height: 1.45;
}

.pp-dim-gap-tag, .dim-gap-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, 0, 0, 0.05);
  border: 1px solid var(--pp-line, var(--line));
  border-radius: 2px;
  color: var(--pp-ink-soft, var(--ink-soft));
  vertical-align: middle;
}

.pp-cvp-wrap, .cvp-wrap {
  background: var(--pp-white, var(--white));
  border: 1px solid var(--pp-line, var(--line));
  border-radius: 4px;
  padding: 22px 24px;
  margin-top: 18px;
}

.pp-cvp-row, .cvp-row {
  display: grid;
  grid-template-columns: 180px 1fr 110px;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--pp-line-soft, var(--line-soft));
}

.pp-cvp-row:last-child, .cvp-row:last-child {
  border-bottom: none;
}

.pp-cvp-name, .cvp-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pp-ink, var(--ink));
}

.pp-cvp-name .pp-cvp-sub, .cvp-name .cvp-sub {
  display: block;
  font-weight: 400;
  color: var(--pp-muted, var(--muted));
  font-size: 11px;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.pp-cvp-track, .cvp-track {
  position: relative;
  height: 28px;
  background: var(--sunk, #ECE8DF);
  border: none;
  border-radius: 4px;
  overflow: hidden;
}

.pp-cvp-ceiling, .cvp-ceiling {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background:
  repeating-linear-gradient(
  135deg,
  rgba(206, 76, 76, 0.06) 0,
  rgba(206, 76, 76, 0.06) 6px,
  rgba(206, 76, 76, 0.14) 6px,
  rgba(206, 76, 76, 0.14) 12px
  );
  border-right: 2px dashed rgba(206, 76, 76, 0.55);
}

.pp-cvp-potential, .cvp-potential {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: rgba(235, 112, 51, 0.22);
  border-right: 2px dashed var(--pp-gold-soft, var(--gold-soft));
}

.pp-cvp-achieved, .cvp-achieved {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, #006F8A 0%, var(--pp-gold, var(--gold)) 100%);
}

.pp-cvp-numbers, .cvp-numbers {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.pp-cvp-numbers .pp-cvp-percent, .cvp-numbers .cvp-percent {
  display: block;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  color: var(--pp-ink, var(--ink));
  line-height: 1;
}

.pp-cvp-numbers .pp-cvp-conv-label, .cvp-numbers .cvp-conv-label {
  display: block;
  font-size: 10px;
  color: var(--pp-muted, var(--muted));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}

.pp-cvp-numbers .pp-cvp-ach-pot, .cvp-numbers .cvp-ach-pot {
  display: block;
  font-size: 11.5px;
  color: var(--pp-muted, var(--muted));
  margin-top: 6px;
}

.pp-cvp-ceil-tag, .cvp-ceil-tag {
  display: inline-block;
  white-space: nowrap;
  margin-left: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(235, 112, 51, 0.10);
  color: #953B0F;
  padding: 1px 5px;
  border-radius: 2px;
  font-weight: 700;
  vertical-align: 1px;
  cursor: help;
  border-bottom: 1px dotted rgba(235, 112, 51, 0.45);
}

.pp-cvp-ceil-tag.pp-cvp-ceil-adj, .cvp-ceil-tag.cvp-ceil-adj {
  background: rgba(206, 76, 76, 0.10);
  color: var(--pp-coral, var(--coral));
  border-bottom-color: rgba(206, 76, 76, 0.45);
}

.pp-cvp-legend, .cvp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--pp-line-soft, var(--line-soft));
  font-size: 11.5px;
  color: var(--pp-muted, var(--muted));
}

.pp-cvp-legend .pp-cvp-chip, .cvp-legend .cvp-chip {
  display: inline-flex; align-items: center; gap: 6px;
}

.pp-cvp-legend .pp-swatch-ach, .cvp-legend .swatch-ach {
  width: 18px; height: 10px; background: linear-gradient(90deg, #006F8A, var(--pp-gold, var(--gold))); border-radius: 2px;
}

.pp-cvp-legend .pp-swatch-pot, .cvp-legend .swatch-pot {
  width: 18px; height: 10px; background: rgba(235, 112, 51, 0.22); border: 1px dashed var(--pp-gold-soft, var(--gold-soft)); border-radius: 2px;
}

.pp-cvp-legend .pp-swatch-ceil, .cvp-legend .swatch-ceil {
  width: 18px; height: 10px;
  background: repeating-linear-gradient(135deg, rgba(206, 76, 76, 0.08) 0, rgba(206, 76, 76, 0.08) 4px, rgba(206, 76, 76, 0.18) 4px, rgba(206, 76, 76, 0.18) 8px);
  border: 1px dashed rgba(206, 76, 76, 0.55); border-radius: 2px;
}

.pp-cvp-ceil-explain, .cvp-ceil-explain {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(206, 76, 76, 0.25);
  border-left: 3px solid rgba(206, 76, 76, 0.65);
  background: rgba(206, 76, 76, 0.04);
  border-radius: 2px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--pp-ink, var(--ink));
}

.pp-cvp-ceil-explain strong, .cvp-ceil-explain strong {
  color: var(--pp-coral-dark, var(--coral-dark));
}

.pp-cvp-footnote, .cvp-footnote {
  font-size: 11px; color: var(--pp-muted, var(--muted)); margin-top: 12px; line-height: 1.55;
}

.pp-cvp-overall, .cvp-overall {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--pp-gold, var(--gold));
}

.pp-cvp-overall .pp-cvp-headline, .cvp-overall .cvp-headline {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 20px;
  color: var(--pp-ink, var(--ink));
}

.pp-cvp-overall .pp-cvp-headline .pp-cvp-headline-sub, .cvp-overall .cvp-headline .cvp-headline-sub {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--pp-muted, var(--muted));
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.pp-cvp-overall .pp-cvp-stat, .cvp-overall .cvp-stat {
  text-align: center;
}

.pp-cvp-overall .pp-cvp-stat .pp-num, .cvp-overall .cvp-stat .num {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  color: var(--pp-ink, var(--ink));
  line-height: 1;
}

.pp-cvp-overall .pp-cvp-stat .pp-lbl, .cvp-overall .cvp-stat .lbl {
  display: block;
  font-size: 10px;
  color: var(--pp-muted, var(--muted));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}


/* ══════════════════════════════════════════════════════════════════════
   MERKMALSZEILE DER DIMENSIONSKARTEN · 2026-08-04
   Fuenf der sechs Unterdimensionen tragen das Chip "Catchment-sensitive".
   Vorher wurde die Zeile nur dann gerendert — die Karte ohne Chip
   (in Events "Operator Lens", in Clubs die eine nicht marktabhaengige)
   zog Beschreibung, Beobachtungskennzahl, Potenzial und Aufklapper um die
   Chiphoehe nach oben, sodass die Zeilen der Nachbarkarten auseinander
   liefen. Die Zeile wird jetzt immer gerendert; ohne Chip traegt sie einen
   unsichtbaren Zwilling, damit die Hoehe pixelgleich reserviert bleibt.
   ══════════════════════════════════════════════════════════════════════ */
.pp-dim-card .pp-dim-chiprow,
.dim-card .dim-chiprow { margin: 0 0 8px; }
.pp-dim-card .pp-dim-chiprow.is-ghost > *,
.dim-card .dim-chiprow.is-ghost > * { visibility: hidden; }


/* ══════════════════════════════════════════════════════════════════════
   UNBELEGTE KENNZAHL · 2026-08-04 (Welle zwei)
   Eine der drei Kennzahlen kann ohne Wert bleiben, wenn jede Frage beider
   zugehoeriger Unterdimensionen als "not applicable" markiert wurde. Bis zur
   Angleichung des Rechenwerks zaehlte sie als null Punkte mit vollem Gewicht
   und drueckte den Gesamtwert; jetzt faellt sie aus Zaehler und Nenner. In der
   Darstellung stand vorher nur ein Gedankenstrich, was wie ein Fehler aussah.
   Die Kachel bleibt bewusst in der Dreierreihe stehen, damit das Raster nicht
   springt, tritt aber sichtbar zurueck und nennt den Grund.
   Keine Warnfarbe: der Fall ist eine legitime Angabe des Nutzers, kein Mangel.
   ══════════════════════════════════════════════════════════════════════ */
.pp-kpi-tile.pp-kpi-unscored,
.kpi-tile.pp-kpi-unscored {
  background: var(--sand, #EAE8E3);
}
/* Spezifitaet bewusst hoch: .pp-kpi-value und .kpi-value setzen die grosse
   Zahlengroesse. Ohne den Kachelselektor davor bliebe "Not scored" so gross
   wie ein echter Wert und wuerde optisch mit den beiden belegten Kennzahlen
   konkurrieren, obwohl es gar keine Aussage traegt. */
.pp-kpi-tile .pp-kpi-value.pp-kpi-value-unscored,
.kpi-tile .kpi-value.pp-kpi-value-unscored {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--muted, #4A4A48);
  text-transform: none;
}
.pp-kpi-unscored-note {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted, #4A4A48);
}
.pp-dim-col-score-unscored {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted, #4A4A48);
}