/* ============================================================
   VARIANT C — RACE PROGRAMME / EDITORIAL HYBRID
   Dark hero → bone paper data. Magazine spread.
   ============================================================ */
.pc {
  --pc-dark: #111110;
  --pc-dark-2: #1a1a18;
  --pc-bone: #efeae0;
  --pc-bone-2: #e6e0d2;
  --pc-card: #ffffff;
  --pc-line-dark: rgba(255,255,255,.13);
  --pc-line: #cdc3ad;
  --pc-line-soft: #ddd3bb;
  --pc-ink: #161614;
  --pc-dim: #4a4538;
  --pc-mute: #847a64;
  --pc-red: #B7382A;
  --pc-red-deep: #7a1d12;
  --pc-good: #4f6c3e;
  --pc-mid:  #b06825;
  --pc-weak: #b7382a;
  /* Tire-kind accent palette */
  --pc-kind-semislick: #B7382A;
  --pc-kind-sport:     #1f4e79;
  --pc-kind-slick:     #2a2a2a;
  --pc-kind-rain:      #1f7a79;
  position: relative;
  background: var(--pc-bone);
  color: var(--pc-ink);
  font-family: "Barlow", system-ui, sans-serif;
  min-height: 100vh;
  overflow: hidden;
}

/* ---- HERO (dark) ---- */
.pc-hero {
  position: relative;
  background: var(--pc-dark);
  color: #fff;
  padding: 64px 0 96px;
  overflow: hidden;
}
.pc-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(900px 600px at 10% 10%, rgba(183,56,42,.15), transparent 55%),
    radial-gradient(800px 500px at 95% 90%, rgba(255,255,255,.04), transparent 60%);
  pointer-events: none;
}

/* Rotating tire silhouette (ported from Variant A) */
.pc-bg-tire {
  position: absolute;
  right: -240px; top: -60px;
  width: 820px; height: 820px;
  opacity: .055;
  z-index: 0;
  pointer-events: none;
  animation: pcSpin 110s linear infinite;
}
@keyframes pcSpin { to { transform: rotate(360deg); } }

/* Curved racing line sweep */
.pc-bg-line {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none; z-index: 0; opacity: .9;
}
.pc-bg-line svg { width: 100%; height: 100%; }
.pc-bg-line .dash { stroke-dasharray: 12 18; animation: pcLineDash 16s linear infinite; }
@keyframes pcLineDash { to { stroke-dashoffset: -300; } }

/* Highlighted "Semislicks" in the H1 */
.pc-hero h1 .red {
  color: var(--pc-red);
}
.pc-hero-line {
  position: absolute; left: 0; right: 0; top: 14px;
  height: 22px;
  pointer-events: none; opacity: .9;
}
.pc-hero-line svg { width: 100%; height: 100%; display: block; }
.pc-hero-line .dash { stroke-dasharray: 14 22; animation: pcDash 18s linear infinite; }
@keyframes pcDash { to { stroke-dashoffset: -360; } }

.pc-hero-bottom-line {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 28px;
  pointer-events: none; opacity: .85;
}
.pc-hero-bottom-line svg { width: 100%; height: 100%; }

/* Boundary strip between hero and body — same tick scale, dark on bone. */
.pc-mid-strip {
  position: relative;
  height: 32px;
  background: var(--pc-bone);
  border-bottom: 1px solid rgba(183,56,42,.25);
}
.pc-mid-strip .pc-hero-bottom-line {
  top: 0; bottom: 0; opacity: 1;
}

.pc-wrap {
  position: relative; z-index: 2;
  max-width: 1480px; margin: 0 auto;
  padding: 0 32px;
}
.pc-hero-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 8px 28px;   /* zu wenig Platz → Edizione/Foglio rutscht sauber unter den Breadcrumb */
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 36px;
}
.pc-hero-meta .ed b { color: #fff; font-weight: 600; }
.pc-hero-meta .crumb a { color: var(--pc-red); border-bottom: 1px solid rgba(183,56,42,.5); padding-bottom: 1px; }

.pc-hero-grid {
  display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 56px;
  align-items: end;
}
.pc-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--pc-red);
  font-weight: 700;
  margin-bottom: 18px;
}
.pc-hero h1 {
  font-family: "Barlow Condensed", "Oswald", sans-serif;
  font-weight: 900;
  font-size: clamp(64px, 10vw, 160px);
  line-height: .82;
  letter-spacing: -.012em;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
}
.pc-hero h1 em {
  font-style: italic;
  font-weight: 600;
  color: var(--pc-red);
  display: block;
}
.pc-hero .deck {
  margin: 28px 0 0;
  max-width: 56ch;
  font-family: "Barlow", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
}
.pc-hero .deck b { color: #fff; }

.pc-hero-stats {
  display: flex; flex-direction: column; gap: 14px;
  border-left: 1px solid var(--pc-line-dark);
  padding-left: 22px;
}
.pc-hero-stats .row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  padding-bottom: 12px; border-bottom: 1px dashed var(--pc-line-dark);
  gap: 10px;
}
.pc-hero-stats .row:last-child { border-bottom: 0; }
.pc-hero-stats .l {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.pc-hero-stats .v {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700; font-size: 24px; color: #fff; line-height: 1;
  letter-spacing: -.005em; text-align: right;
}
.pc-hero-stats .v.red { color: var(--pc-red); }
.pc-hero-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 4px; padding: 11px 14px;
  border: 1px solid var(--pc-line-dark);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: rgba(255,255,255,.72);
  transition: color .18s, border-color .18s, background .18s;
  animation: ctaPulse 4s ease-out infinite;
}
/* Roter Pulsring — langsam, weitläufig, weiche (unscharfe) Kanten via Blur-Radius. */
@keyframes ctaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(183,56,42,.5); }
  70%  { box-shadow: 0 0 18px 22px rgba(183,56,42,0); }
  100% { box-shadow: 0 0 0 0 rgba(183,56,42,0); }
}
.pc-hero-cta:hover {
  color: #fff; border-color: rgba(183,56,42,.6);
  background: rgba(183,56,42,.10);
}
.pc-hero-cta .cta-arrow {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800; font-size: 16px; line-height: 1;
  color: var(--pc-red);
}

/* ---- SECTION DIVIDER (between hero and body) ---- */
.pc-divider {
  position: relative;
  background: var(--pc-bone);
  padding-top: 0;
  margin-top: -40px;
}
.pc-divider::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 40px;
  background: linear-gradient(180deg, var(--pc-bone) 0%, var(--pc-bone) 100%);
  clip-path: polygon(0 100%, 100% 0%, 100% 100%, 0 100%);
}

/* ---- BODY ---- */
.pc-body {
  background: var(--pc-bone);
  position: relative;
  padding: 60px 0 90px;
}
.pc-body::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; opacity: .6; z-index: 0;
  background-image: radial-gradient(rgba(74,69,56,.06) 1px, transparent 1px);
  background-size: 16px 16px;
}

.pc-sec {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 22px; align-items: end;
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 2px solid var(--pc-ink);
}
.pc-sec .big {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900;
  font-size: 96px;
  line-height: .85;
  color: var(--pc-red);
  letter-spacing: -.02em;
}
.pc-sec .right {
  text-align: right;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--pc-mute);
}
.pc-sec .label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--pc-red); font-weight: 700;
}
.pc-sec h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: .95;
  margin: 6px 0 0;
  letter-spacing: -.005em;
  color: var(--pc-ink);
}
.pc-sec-hint {
  margin: -10px 0 26px;
  font-size: 15px; color: var(--pc-dim); max-width: 78ch; line-height: 1.55;
}

/* ---- WINNER SPREADS ---- */
.pc-spreads { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pc-spread {
  position: relative;
  background: var(--pc-card);
  border: 1px solid var(--pc-line);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  overflow: hidden;
}
.pc-spread:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,0,0,.08); border-color: #b29055; }
.pc-spread .stripe {
  position: absolute; top: 0; bottom: 0; left: 0; width: 5px;
  background: var(--pc-red);
  transition: width .25s;
}
.pc-spread:hover .stripe { width: 7px; }
.pc-spread.winner-1 .stripe { animation: pcStripe 2.6s ease-in-out infinite; }
@keyframes pcStripe {
  0%, 100% { opacity: 1 }
  50% { opacity: .45 }
}

.pc-spread .summary {
  display: grid;
  grid-template-columns: 260px minmax(0,1fr) 180px;
  gap: 36px;
  padding: 22px 26px 18px 30px;
  align-items: stretch;
  cursor: pointer;
  transition: background .2s;
}
.pc-spread .summary:hover { background: rgba(28,22,18,.025); }
.pc-spread .summary:focus-visible { outline: 2px solid var(--pc-red); outline-offset: -2px; }
.pc-spread .cat-col {
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px dashed var(--pc-line);
  padding-right: 24px;
}
.pc-spread .cat-word {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 900;
  line-height: .92;
  text-transform: uppercase;
  color: var(--pc-red);
  letter-spacing: -.01em;
  white-space: pre-line;
  /* Uniform size for ALL six categories — picked to fit the longest single-word "Konstantester". */
  font-size: 30px;
}
.pc-spread .cat-lab {
  margin-top: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--pc-mute);
  font-weight: 600;
}

/* Tire-kind chip (semislick vs sport) */
.pc-spread .kind {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700;
}
.pc-spread .kind-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.pc-spread.kind-semislick .kind { color: var(--pc-red); }
.pc-spread.kind-semislick .kind-dot { background: var(--pc-red); }
.pc-spread.kind-sport .kind { color: var(--pc-kind-sport); }
.pc-spread.kind-sport .kind-dot { background: var(--pc-kind-sport); }
.pc-spread.kind-slick .kind { color: var(--pc-kind-slick); }
.pc-spread.kind-slick .kind-dot { background: var(--pc-kind-slick); }
.pc-spread.kind-rain .kind { color: var(--pc-kind-rain); }
.pc-spread.kind-rain .kind-dot { background: var(--pc-kind-rain); }
/* Cat-word colour follows kind, so non-semislick cards read in their own color end-to-end. */
.pc-spread.kind-sport .cat-word { color: var(--pc-kind-sport); }
.pc-spread.kind-slick .cat-word { color: var(--pc-kind-slick); }
.pc-spread.kind-rain  .cat-word { color: var(--pc-kind-rain); }
/* Stripe colour mirrors kind */
.pc-spread.kind-sport .stripe { background: var(--pc-kind-sport); }
.pc-spread.kind-slick .stripe { background: var(--pc-kind-slick); }
.pc-spread.kind-rain  .stripe { background: var(--pc-kind-rain); }
.pc-spread.kind-sport.winner-1 .stripe,
.pc-spread.kind-slick.winner-1 .stripe,
.pc-spread.kind-rain.winner-1  .stripe { animation: none; }
.pc-spread .cat-lab .op {
  display: block;
  margin-top: 6px;
  font-family: "Barlow", sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--pc-dim);
  line-height: 1.4;
}
.pc-spread .body { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.pc-spread .name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800; font-size: 30px;
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: -.005em;
  margin: 0 0 10px;
  color: var(--pc-ink);
}
.pc-spread .fazit-closed {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--pc-dim);
  max-width: 70ch;
}
/* Begründungs-Prosa: eigene Mini-Klappung in schmalerer Ansicht (<=1100px),
   wo der lange Text die Karten-Boxen sonst zu lang zieht.
   Karte + "Volle Analyse"-Aufklapp bleiben davon unberührt. */
.pc-spread .fazit-more {
  display: none;
  align-self: flex-start;        /* immer linksbündig zum Text */
  margin: 8px 0 0; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  text-align: left;
  color: var(--pc-red); font-weight: 700;
}
.pc-spread .fazit-more:hover { color: var(--pc-red-deep); }
.pc-spread.kind-sport .fazit-more { color: var(--pc-kind-sport); }
.pc-spread.kind-slick .fazit-more { color: var(--pc-kind-slick); }
.pc-spread.kind-rain  .fazit-more { color: var(--pc-kind-rain); }
.pc-spread .fazit-more .fazit-arrow { display: inline-block; margin-left: 6px; transition: transform .2s; }
.pc-spread[data-fazit="open"] .fazit-more .fazit-arrow { transform: rotate(180deg); }
@media (max-width: 1100px) {
  /* ~3 Zeilen sichtbar, unterer Rand weich ausgefadet (zeigt: Text geht weiter) */
  .pc-spread .fazit-closed {
    max-height: calc(1.55em * 3);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent);
            mask-image: linear-gradient(to bottom, #000 68%, transparent);
  }
  .pc-spread[data-fazit="open"] .fazit-closed {
    max-height: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .pc-spread .fazit-more { display: inline-block; }
}
.pc-spread .meta-col {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end;
  gap: 12px;
  border-left: 1px dashed var(--pc-line);
  padding-left: 22px;
}
.pc-spread .price { line-height: 1; }
.pc-spread .price .amount {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 30px;             /* Stückpreis (Satzpreis steht im Aufklappbereich) */
  color: var(--pc-ink);
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;         /* "€196 / Stück" bricht nicht um */
}
/* kleine Mono-Einheit "/ Stück" hinter dem Preis */
.pc-spread .price .per {
  margin-left: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--pc-mute);
}
.pc-spread .legal {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 8px;
}
.pc-spread .legal.street { background: rgba(79,108,62,.13); color: var(--pc-good); border: 1px solid rgba(79,108,62,.4); }
.pc-spread .legal.race-only { background: rgba(183,56,42,.13); color: var(--pc-red); border: 1px solid rgba(183,56,42,.4); }
.pc-spread .more {
  display: flex; align-items: center; justify-content: center;
  /* breit: füllt die Preisspalte; gestapelt: kompakt rechts in der Preiszeile */
  margin: 0; padding: 10px 16px;
  background: transparent;
  border: 1px solid var(--pc-line);            /* Rand = dezente Linienfarbe */
  cursor: pointer;
  font-family: "Barlow Condensed", sans-serif; /* Substantiv, fett, einzeilig */
  font-weight: 800; font-size: 15px; line-height: 1;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: var(--pc-mute);                       /* Schrift = Satz/Stück-Farbe */
  transition: border-color .18s, background .18s, color .18s;
  --more-pulse: rgba(183,56,42,.72);           /* Pulsring (Default: Semislick rot) */
  --more-pulse-0: rgba(183,56,42,0);
  animation: morePulse 4s ease-out infinite;
}
/* weicher, blur-dominanter Halo in Sortenfarbe (minimales Clipping an der Kartenkante) */
@keyframes morePulse {
  0%   { box-shadow: 0 0 0 0 var(--more-pulse); }
  70%  { box-shadow: 0 0 18px 5px var(--more-pulse-0); }
  100% { box-shadow: 0 0 0 0 var(--more-pulse-0); }
}
.pc-spread .more:hover { color: var(--pc-ink); border-color: var(--pc-mute); background: rgba(28,22,18,.025); }
/* Sortenfarbe steuert den Pulsring; Schrift bleibt gedämpft */
.pc-spread.kind-sport .more { --more-pulse: rgba(31,78,121,.72); --more-pulse-0: rgba(31,78,121,0); }
.pc-spread.kind-slick .more { --more-pulse: rgba(42,42,42,.72); --more-pulse-0: rgba(42,42,42,0); }
.pc-spread.kind-rain  .more { --more-pulse: rgba(31,122,121,.72); --more-pulse-0: rgba(31,122,121,0); }
.pc-spread .open-body {
  padding: 18px 26px 26px 30px;
  background: linear-gradient(180deg, rgba(238,229,210,.55), rgba(220,209,184,.55));
  border-top: 1px solid var(--pc-line);
  font-size: 14px;
}
.pc-spread .crit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  background: transparent;
  border: 0;
  margin-bottom: 22px;
}
.pc-spread .crit-cell {
  position: relative;
  padding: 18px 18px 20px;
  border: 1px solid var(--pc-line-soft);
  background: rgba(255,255,255,.7);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--pc-line-soft);
}
.pc-spread .crit-cell::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 5px;
  background: #b29055;
}
.pc-spread.kind-sport .crit-cell::before { background: var(--pc-kind-sport); }
.pc-spread.kind-slick .crit-cell::before { background: var(--pc-kind-slick); }
.pc-spread.kind-rain  .crit-cell::before { background: var(--pc-kind-rain); }

.pc-spread .crit-cell .l {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--pc-ink);
  font-weight: 800;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(183,56,42,.18);
  border-bottom: 0;
  line-height: 1;
}
/* Box-Überschriften IMMER schwarz (Operator): Sorten-Farbe nur über Top-Rand/Punkt/Label/cat-word, nicht im Box-Header. */

.pc-spread .crit-cell .vv {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--pc-ink);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Temperatur-Heatmap (im Aufwärmen/Temperaturfenster-Kasten): Thermo-Skala 40–120 °C + Fenster-Band. */
.pc-spread .heatbar { margin-top: 14px; }
.pc-spread .heatbar-bar { position: relative; }
.pc-spread .heatbar-track {
  height: 8px; border-radius: 4px;
  background: rgba(122,112,100,.20);
}
.pc-spread .heatbar-band {
  position: absolute; top: 0; height: 8px; border-radius: 4px;
  background: #a4c878;
}
.pc-spread .heatbar-band-lo,
.pc-spread .heatbar-band-hi {
  position: absolute; bottom: 14px; white-space: nowrap;
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--pc-ink);
}
.pc-spread .heatbar-band-lo { left: 0; transform: translateX(-50%); }
.pc-spread .heatbar-band-hi { right: 0; transform: translateX(50%); }
.pc-spread .heatbar-scale {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--pc-mute);
}

/* Split-Boxen (Aufwärmen/Temperaturfenster + Druck kalt/heiß) — zwei Stat-Spalten;
   bei der Temp-Box zusätzlich die Heatmap fix unten. Hintergrund UNVERÄNDERT. */
.pc-spread .crit-cell--temp .tf-stats,
.pc-spread .crit-cell--press .tf-stats,
.pc-spread .crit-cell--halt .tf-stats {
  display: grid; grid-template-columns: 1fr 1fr; flex: 1; margin-bottom: 0;
}
.pc-spread .crit-cell--temp .tf-col + .tf-col,
.pc-spread .crit-cell--press .tf-col + .tf-col,
.pc-spread .crit-cell--halt .tf-col + .tf-col {
  padding-left: 16px; position: relative;
}
/* Senkrechte Trennlinie erst unter der Überschrift beginnen (Höhe der Überschrift = 17px Text + 10+12 Abstand = 39px). */
.pc-spread .crit-cell--temp .tf-col + .tf-col::before,
.pc-spread .crit-cell--press .tf-col + .tf-col::before,
.pc-spread .crit-cell--halt .tf-col + .tf-col::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--pc-line-soft);
}
/* Druck/Temp/Standzeit: Überschriften in eigener Kopfzeile, darunter eine gleich hohe Metasatz-Zone,
   damit der Inhalt in allen drei Boxen auf gleicher Höhe startet (Balken bleiben bodenbündig). */
.pc-spread .crit-cell--temp .tf-heads,
.pc-spread .crit-cell--press .tf-heads,
.pc-spread .crit-cell--halt .tf-heads {
  display: grid; grid-template-columns: 1fr 1fr;
}
.pc-spread .crit-cell--temp .tf-heads > :first-child,
.pc-spread .crit-cell--press .tf-heads > :first-child,
.pc-spread .crit-cell--halt .tf-heads > :first-child { padding-right: 16px; }
.pc-spread .crit-cell--temp .tf-heads > * + *,
.pc-spread .crit-cell--press .tf-heads > * + *,
.pc-spread .crit-cell--halt .tf-heads > * + * { padding-left: 16px; }
.pc-spread .crit-cell--temp .tf-meta,
.pc-spread .crit-cell--press .tf-meta,
.pc-spread .crit-cell--halt .tf-meta {
  min-height: 5.6em;            /* ≈ 4 Zeilen — reserviert die Metasatz-Zone einheitlich, Inhalt startet auf gleicher Höhe */
  margin-bottom: 16px;
  font-family: "Barlow Condensed", sans-serif; font-size: 11.5px; line-height: 1.4;
  color: var(--pc-mute);
}
.pc-spread .crit-cell--temp .tf-k,
.pc-spread .crit-cell--press .tf-k,
.pc-spread .crit-cell--halt .tf-k {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800; font-size: 17px; letter-spacing: .02em; text-transform: uppercase;
  color: var(--pc-ink); line-height: 1; padding-bottom: 10px; margin-bottom: 12px;
}
/* Haltbarkeit-Box: je Spalte Hersteller- vs. Erfahrungs-Wert mit Klartext-Label. */
.pc-spread .crit-cell--halt .tf-col { display: flex; flex-direction: column; }
.pc-spread .crit-cell--halt .tf-col:first-child { padding-right: 16px; }
.pc-spread .crit-cell--halt .halt-line {
  font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-size: 13px;
  line-height: 1.45; color: var(--pc-ink); text-wrap: pretty;
}
/* Herstellerangabe in der Spalte: leicht gefärbter Hintergrund; Legende dazu im Erklärungssatz. */
.pc-spread .crit-cell--halt .halt-hersteller {
  margin-top: 0; padding: 5px 8px; border-radius: 3px;
  background: rgba(178,144,85,.14);
  font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-size: 13px;
  line-height: 1.4; color: var(--pc-ink); text-wrap: pretty;
}
.pc-spread .halt-mark {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  background: rgba(178,144,85,.45); vertical-align: middle; margin: 0 3px 2px 2px;
}
.pc-spread .crit-cell--temp .tf-v,
.pc-spread .crit-cell--press .tf-v {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500; font-size: 13px; line-height: 1.3; color: var(--pc-ink);
}
.pc-spread .crit-cell--temp .tf-col { display: flex; flex-direction: column; }
.pc-spread .crit-cell--temp .tf-col:first-child { padding-right: 16px; }
.pc-spread .crit-cell--temp .tf-prosa {
  font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-size: 13px;
  line-height: 1.45; color: var(--pc-ink); text-wrap: pretty; margin-top: 6px;
}
/* EINE Stelle für den Abstand Text → Trennlinie über ALLEN Balken-Boxen (Grip/Konstanz/Temp/Druck/Haltbarkeit)
   — letztes Textelement vor dem Balken. Hier zentral ändern = überall einheitlich. */
.pc-spread .crit-cell--grip .grip-prosa,
.pc-spread .crit-cell--mischung .grip-prosa,
.pc-spread .crit-cell--temp .tf-col:first-child .tf-v,
.pc-spread .crit-cell--temp .tf-prosa,
.pc-spread .crit-cell--press .tf-v,
.pc-spread .crit-cell--halt .halt-line,
.pc-spread .crit-cell--halt .halt-hersteller {
  margin-bottom: 20px;
}
.pc-spread .crit-cell--temp .heatbar {
  margin-top: auto; padding-top: 24px; border-top: 1px solid var(--pc-line-soft);
}

/* Druck-Box: zwei Mini-Heatmaps (kalt/heiß) im Temp-Stil, je bodenbündig unter ihrer Spalte. */
.pc-spread .crit-cell--press .tf-col { display: flex; flex-direction: column; }
.pc-spread .crit-cell--press .tf-col:first-child { padding-right: 16px; }
.pc-spread .crit-cell--press .pressbar {
  margin-top: auto; padding-top: 24px; border-top: 1px solid var(--pc-line-soft);
}
.pc-spread .pressbar-val {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--pc-ink);
}
.pc-spread .pressbar--kalt .heatbar-band { background: #6f97c7; }
.pc-spread .pressbar--heiss .heatbar-band { background: #c96a5d; }
/* Kein Wert → leerer (gedimmter) Track + "n/a"-Marker, analog gripbar--na. */
.pc-spread .heatbar--na .heatbar-track { background: rgba(122,112,100,.10); }
.pc-spread .heatbar-na {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace; font-size: 9.5px;
  color: var(--pc-mute); opacity: .85;
}

/* Grip-Box: Prosa oben, Stärke-Balken (schwach … Referenz) unten — Optik wie die Temp-Heatmap. */
.pc-spread .crit-cell--grip .grip-prosa,
.pc-spread .crit-cell--mischung .grip-prosa {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500; font-size: 13px; line-height: 1.55; color: var(--pc-ink);
  text-wrap: pretty;
}
.pc-spread .gripbar {
  margin-top: auto; padding-top: 24px; border-top: 1px solid var(--pc-line-soft);
}
.pc-spread .gripbar-bar { position: relative; }
.pc-spread .gripbar-track {
  height: 8px; border-radius: 4px; background: rgba(122,112,100,.20);
}
.pc-spread .gripbar-seg {
  position: absolute; top: 0; height: 8px; border-radius: 4px;
}
/* Stärke-Skala (Grip + Konstanz), 5 Stufen — dieselben Töne wie die Mischung, aber UMGEKEHRT:
   schwach = Anthrazit … Referenz = Violett (schwach=dunkel/wenig, Referenz=Spitze). */
.pc-spread .gripbar--schwach   .gripbar-seg { background: #383e42; }
/* Weiß braucht Kontrast → dünne Haarlinie, ABER nur die Stärke-Skala-"mittel" (echtes Weiß).
   :not(...) verhindert, dass Aufwärmen/Standzeit/Mischung (gelb/gold "mittel") den Rand erben. */
.pc-spread .gripbar--mittel:not(.gripbar--warm):not(.gripbar--dur):not(.gripbar--hard) .gripbar-seg { background: #ffffff; box-shadow: inset 0 0 0 0.5px rgba(122,112,100,.55); }
.pc-spread .gripbar--hoch      .gripbar-seg { background: #f2c94c; }
.pc-spread .gripbar--sehr_hoch .gripbar-seg { background: #d8312a; }
.pc-spread .gripbar--referenz  .gripbar-seg { background: #a82e8f; }
/* Aufwärmen-Skala: Ampel-Logik (kurz = gut/grün … lang = langsam/rot); überschreibt nur den --warm-Balken. */
.pc-spread .gripbar--warm.gripbar--kurz   .gripbar-seg { background: #8fbf6a; }
.pc-spread .gripbar--warm.gripbar--mittel .gripbar-seg { background: #e0bf5e; }
.pc-spread .gripbar--warm.gripbar--lang   .gripbar-seg { background: #c96a5d; }
/* Standzeit-Skala: lang = lange haltbar/gut (grün) … kurz = kurzlebig (rot). */
.pc-spread .gripbar--dur.gripbar--kurz   .gripbar-seg { background: #c96a5d; }
.pc-spread .gripbar--dur.gripbar--mittel .gripbar-seg { background: #e0bf5e; }
.pc-spread .gripbar--dur.gripbar--lang   .gripbar-seg { background: #8fbf6a; }
/* Mischungs-Skala (Härte), F1-/Pirelli-Konvention: weich = Rot · mittel = Gelb · hart = Weiß (Original);
   für die 5 Stufen ergänzt: sehr weich = Violett (F1-Soft-Familie) · sehr hart = Anthrazit. */
.pc-spread .gripbar--hard.gripbar--sehr_weich .gripbar-seg { background: #a82e8f; }
.pc-spread .gripbar--hard.gripbar--weich      .gripbar-seg { background: #d8312a; }
.pc-spread .gripbar--hard.gripbar--mittel     .gripbar-seg { background: #f2c94c; }
.pc-spread .gripbar--hard.gripbar--hart       .gripbar-seg { background: #ffffff; box-shadow: inset 0 0 0 0.5px rgba(122,112,100,.55); }
.pc-spread .gripbar--hard.gripbar--sehr_hart  .gripbar-seg { background: #383e42; }
.pc-spread .gripbar-mark-l {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--pc-ink);
}
.pc-spread .gripbar-scale {
  display: flex; justify-content: space-between; margin-top: 10px;
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--pc-mute);
}

/* Mischungs-Box: Hersteller/Erfahrung als kleinere Unterüberschrift; kein Strich über dem Balken
   (die Unterüberschrift trennt schon); Bezeichnung + n/a als Mini-Text ohne Hintergrund;
   Hersteller ohne Stufe = gedimmter Balken mit "n/a" statt Marker. */
.pc-spread .crit-cell--mischung .tf-k {
  font-size: 13px; font-weight: 700; padding-bottom: 6px; margin-bottom: 10px;
}
.pc-spread .crit-cell--mischung .gripbar { border-top: none; padding-top: 8px; }
.pc-spread .misch-bez {
  font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-size: 12px;
  line-height: 1.4; color: var(--pc-mute); text-wrap: pretty; margin-bottom: 14px;
}
.pc-spread .gripbar--na .gripbar-track { background: rgba(122,112,100,.10); }
.pc-spread .gripbar--na .gripbar-mark-l { color: var(--pc-mute); opacity: .85; }

/* Box-Raster: 3 Spalten breit → 2 ab 1300px → 1 ab 820px (saubere Leiter). */
@media (max-width: 1400px) {
  .pc-spread .crit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 1000px = gemeinsamer Single-Column-/Mobile-Breakpoint (auch Burger-Nav in chrome.css)
   — bei Änderung BEIDE Stellen anpassen. */
@media (max-width: 1000px) {
  .pc-spread .crit-grid { grid-template-columns: 1fr; }
  .pc-spread .crit-cell { border-right: 0; }
}

/* Fahrgefühl/Grenzbereich: eine Box wie oben, aber über die volle Breite. */
.pc-spread .feel-box {
  position: relative;
  margin-bottom: 22px;
  padding: 18px 18px 20px;
  border: 1px solid var(--pc-line-soft);
  background: rgba(255,255,255,.7);
}
.pc-spread .feel-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 5px;
  background: #b29055;
}
.pc-spread.kind-sport .feel-box::before { background: var(--pc-kind-sport); }
.pc-spread.kind-slick .feel-box::before { background: var(--pc-kind-slick); }
.pc-spread.kind-rain  .feel-box::before { background: var(--pc-kind-rain); }
.pc-spread .feel-box .feel-label {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 17px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--pc-ink);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 12px;
}
/* Fahrgefühl-Überschrift IMMER schwarz (Operator): Sorten-Farbe nur über den Top-Rand der Box. */
.pc-spread .feel-box .feel-text {
  margin: 0;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--pc-ink);
  line-height: 1.55;
  text-wrap: pretty;
}
.pc-spread .feel-box .feel-warn {
  margin: 14px 0 0; padding-left: 14px; border-left: 3px solid #b7382a;
  font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-size: 13px;
  line-height: 1.55; color: var(--pc-ink); text-wrap: pretty;
}

.pc-spread .facts {
  display: grid; grid-template-columns: 180px 1fr;
  gap: 0;
  border-top: 1px solid var(--pc-line-soft);
  font-size: 13px;
  margin-top: 6px;
}
.pc-spread .facts dt {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pc-ink);
  padding: 11px 36px 11px 0;
  border-bottom: 1px solid var(--pc-line-soft);
  line-height: 1.25;
}
/* Listen-Labels (Größe/Profiltiefe/…) IMMER schwarz (Operator: „Listen-Überschriften schwarz") — Sorten-Farbe nur über Akzente (Rand/Punkt/Label). */
.pc-spread .facts dd {
  margin: 0; color: var(--pc-ink);
  padding: 11px 0;
  border-bottom: 1px solid var(--pc-line-soft);
  line-height: 1.45;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  font-size: 13px;
}
/* Kernwert fett + vorne, Notiz/Erläuterung dahinter dezent. */
.pc-spread .facts dd strong { font-weight: 700; }
.pc-spread .facts .fact-note { font-weight: 400; color: var(--pc-mute); }

/* Inline link inside facts dl (Hersteller / Anbieter / Tests rows) */
.pc-spread .flink {
  display: inline-block;
  margin-left: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--pc-red);
  border-bottom: 1px solid rgba(183,56,42,.35);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.pc-spread .flink:hover {
  color: var(--pc-red-deep);
  border-bottom-color: var(--pc-red-deep);
}
.pc-spread.kind-sport .flink {
  color: var(--pc-kind-sport);
  border-bottom-color: rgba(31,78,121,.35);
}
.pc-spread.kind-sport .flink:hover {
  color: #112c4a;
  border-bottom-color: #112c4a;
}
.pc-spread.kind-slick .flink {
  color: var(--pc-kind-slick);
  border-bottom-color: rgba(42,42,42,.35);
}
.pc-spread.kind-slick .flink:hover {
  color: #000;
  border-bottom-color: #000;
}
.pc-spread.kind-rain .flink {
  color: var(--pc-kind-rain);
  border-bottom-color: rgba(31,122,121,.35);
}
.pc-spread.kind-rain .flink:hover {
  color: #0f4a4a;
  border-bottom-color: #0f4a4a;
}
.pc-spread .flink-block {
  display: block;
  margin: 4px 0 0;
  word-break: break-word;
  line-height: 1.5;
}
/* Führender Link (Anbieter) ohne Einzug → bündig mit den Belege-Links. */
.pc-spread .flink-lead { margin-left: 0; }

@media (max-width: 700px) {
  .pc-spread .facts { grid-template-columns: 1fr; }
  .pc-spread .facts dt { padding: 11px 0 4px; border-bottom: 0; }
  .pc-spread .facts dd { padding: 0 0 11px; }
}
.pc-spread .quote {
  margin-top: 16px;
  padding: 14px 18px 14px 18px;
  background: transparent;
  border: 0;
  border-left: 2px solid var(--pc-red);
  font-size: 15px;
  line-height: 1.55;
  color: var(--pc-ink);
  display: grid;
  gap: 8px;
}
.pc-spread .quote .qtype {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pc-mute);
  font-weight: 700;
  justify-self: start;
}
.pc-spread .quote .qtext {
  display: block;
  font-style: italic;
  color: var(--pc-ink);
  text-wrap: pretty;
}
.pc-spread .quote .qsrc {
  display: block;
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--pc-mute);
  font-style: normal;
}
.pc-spread .quote .qsrc::before { content: "— "; }
.pc-spread ul.sources {
  margin: 12px 0 0; padding: 0; list-style: none;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  line-height: 1.7; color: var(--pc-mute);
}
.pc-spread ul.sources a { color: var(--pc-red); }
.pc-spread ul.sources a:hover { color: var(--pc-red-deep); text-decoration: underline; }

/* ======== TIRE OVERVIEW GRID (replaces the table) ======== */
.pc-grid-wrap { position: relative; z-index: 1; }
.pc-grid-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--pc-line);
  margin-bottom: 18px;
}
.pc-grid-toolbar .t-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pc-mute);
  font-weight: 600;
}
.pc-grid-toolbar .t-sort {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.pc-grid-toolbar .t-sort-l {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pc-mute);
  margin-right: 8px;
}
.pc-grid-toolbar .t-sort button {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600;
  color: var(--pc-dim);
  background: transparent;
  border: 1px solid var(--pc-line);
  padding: 6px 11px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.pc-grid-toolbar .t-sort button:hover { color: var(--pc-ink); border-color: var(--pc-ink); }
.pc-grid-toolbar .t-sort button.active {
  color: #fff;
  background: var(--pc-ink);
  border-color: var(--pc-ink);
}

.pc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 14px;
}

.pc-gcard {
  position: relative;
  background: var(--pc-card);
  border: 1px solid var(--pc-line);
  display: flex; flex-direction: column;
  transition: box-shadow .25s, border-color .25s, transform .25s;
}
.pc-gcard:hover {
  border-color: #b29055;
  box-shadow: 0 16px 28px rgba(0,0,0,.07);
  transform: translateY(-1px);
}
.pc-gcard::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--pc-red);
}
.pc-gcard.kind-sport::before { background: var(--pc-kind-sport); }
.pc-gcard.kind-slick::before { background: var(--pc-kind-slick); }
.pc-gcard.kind-rain::before  { background: var(--pc-kind-rain); }

.pc-gcard .g-head {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--pc-line-soft);
}
.pc-gcard .g-idx {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 44px;
  line-height: .9;
  color: var(--pc-mute);
  letter-spacing: -.02em;
  align-self: start;
}
.pc-gcard .g-titlebox { min-width: 0; }
.pc-gcard .g-meta {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.pc-gcard .kind-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700;
}
.pc-gcard .kind-chip .kind-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.pc-gcard.kind-semislick .kind-chip { color: var(--pc-red); }
.pc-gcard.kind-semislick .kind-chip .kind-dot { background: var(--pc-red); }
.pc-gcard.kind-sport .kind-chip { color: var(--pc-kind-sport); }
.pc-gcard.kind-sport .kind-chip .kind-dot { background: var(--pc-kind-sport); }
.pc-gcard.kind-slick .kind-chip { color: var(--pc-kind-slick); }
.pc-gcard.kind-slick .kind-chip .kind-dot { background: var(--pc-kind-slick); }
.pc-gcard.kind-rain .kind-chip  { color: var(--pc-kind-rain); }
.pc-gcard.kind-rain .kind-chip .kind-dot  { background: var(--pc-kind-rain); }

.pc-gcard .g-track {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700;
  color: var(--pc-red);
  padding: 3px 7px;
  border: 1px solid rgba(183,56,42,.45);
  background: rgba(183,56,42,.06);
}

.pc-gcard .g-name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: -.005em;
  margin: 0 0 4px;
  color: var(--pc-ink);
}
.pc-gcard .g-maker {
  font-family: "Barlow", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--pc-mute);
  margin-bottom: 8px;
}
.pc-gcard .g-hard {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--pc-mute);
  line-height: 1.5;
  letter-spacing: .02em;
}

.pc-gcard .g-rows {
  margin: 0;
  padding: 4px 24px 6px;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0;
  flex: 1;
}
.pc-gcard .g-rows .g-sec {
  grid-column: 1 / -1;
  margin: 18px 0 0;
  padding: 10px 0 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pc-mute);
  font-weight: 700;
  border-bottom: 1px solid var(--pc-line);
  border-top: 0;
  text-align: left;
}
.pc-gcard .g-rows .g-sec:first-child { margin-top: 8px; }
.pc-gcard .g-rows .g-sec-spacer { display: none; }
.pc-gcard .g-rows dt {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--pc-red);
  padding: 9px 14px 9px 0;
  border-bottom: 1px solid var(--pc-line-soft);
  line-height: 1.3;
}
/* Übersichtskarten-Listen-Labels ebenfalls IMMER schwarz (gleiche Regel). */
.pc-gcard .g-rows dt.g-sec { color: var(--pc-mute); border-bottom: 1px solid var(--pc-line); }
.pc-gcard .g-rows dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--pc-ink);
  padding: 9px 0;
  border-bottom: 1px solid var(--pc-line-soft);
  line-height: 1.5;
  text-wrap: pretty;
}
.pc-gcard .flink {
  display: inline-block;
  margin-left: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--pc-red);
  border-bottom: 1px solid rgba(183,56,42,.35);
  padding-bottom: 1px;
}
.pc-gcard .flink:hover { color: var(--pc-red-deep); }
.pc-gcard.kind-sport .flink { color: var(--pc-kind-sport); border-bottom-color: rgba(31,78,121,.35); }
.pc-gcard.kind-slick .flink { color: var(--pc-kind-slick); border-bottom-color: rgba(42,42,42,.35); }
.pc-gcard.kind-rain  .flink { color: var(--pc-kind-rain);  border-bottom-color: rgba(31,122,121,.35); }

.pc-gcard .g-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 18px 24px 20px;
  border-top: 1px solid var(--pc-line);
  background: rgba(238,229,210,.55);
  gap: 0;
}
.pc-gcard .g-price-cell {
  display: flex; flex-direction: column;
  min-width: 0;
}
.pc-gcard .g-price-cell:first-child { padding-right: 22px; }
.pc-gcard .g-price-cell + .g-price-cell {
  padding-left: 22px;
  border-left: 1px solid var(--pc-line-soft);
}
.pc-gcard .g-price-l {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pc-mute);
  font-weight: 700;
  margin-bottom: 8px;
}
.pc-gcard .g-price-v {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: var(--pc-ink);
  letter-spacing: -.01em;
}

@media (max-width: 700px) {
  .pc-gcard .g-foot { grid-template-columns: 1fr; padding: 16px 20px 18px; }
  .pc-gcard .g-price-cell:first-child { padding-right: 0; }
  .pc-gcard .g-price-cell + .g-price-cell {
    padding-left: 0; border-left: 0;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--pc-line-soft);
  }
}

@media (max-width: 700px) {
  .pc-grid { grid-template-columns: 1fr; }
  .pc-gcard .g-head { grid-template-columns: 1fr; gap: 6px; padding: 18px 20px 14px; }
  .pc-gcard .g-idx { font-size: 30px; }
  .pc-gcard .g-rows { padding: 14px 20px 4px; grid-template-columns: 1fr; }
  .pc-gcard .g-rows dt { padding: 12px 0 4px; border-bottom: 0; }
  .pc-gcard .g-rows dd { padding: 0 0 12px; border-bottom: 1px solid var(--pc-line-soft); }
  .pc-gcard .g-rows dt:last-of-type { padding-top: 12px; }
  .pc-gcard .g-rows dd:last-of-type { border-bottom: 0; }
  .pc-gcard .g-foot { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 20px 18px; }
}

.pc-foot {
  margin-top: 50px;
  padding-top: 24px;
  border-top: 1px solid var(--pc-line);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; color: var(--pc-mute); line-height: 1.7;
}
.pc-foot .pc-foot-row {
  display: flex; flex-wrap: wrap; gap: 24px 32px;
  letter-spacing: .04em;
}
.pc-foot .pc-foot-row b { color: var(--pc-ink); font-weight: 600; }
.pc-foot .pc-foot-note {
  margin: 14px 0 0;
  max-width: 80ch;
  font-family: "Barlow", sans-serif;
  font-size: 12.5px;
  letter-spacing: .01em;
  line-height: 1.6;
  color: var(--pc-dim);
}
.pc-foot .pc-foot-legal {
  margin: 0 0 18px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pc-mute);
}
.pc-foot .pc-foot-legal a { color: var(--pc-mute); text-decoration: none; }
.pc-foot .pc-foot-legal a:hover { color: var(--pc-red); }
.pc-foot .pc-foot-legal a[aria-current="page"] { color: var(--pc-red); }

@media (max-width: 900px) {
  .pc-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .pc-hero-stats { border-left: 0; padding-left: 0; border-top: 1px solid var(--pc-line-dark); padding-top: 18px; }
  /* Breadcrumb + Edizione zuverlässig untereinander (flex-wrap greift bei Textblöcken nicht sicher,
     darum hier harter Umbruch — funktioniert auch auf echten Mobilgeräten) */
  .pc-hero-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pc-sec { grid-template-columns: 1fr; }
  .pc-sec .right { text-align: left; }
  .pc-spread .summary { grid-template-columns: 1fr; gap: 14px; padding: 18px 20px 14px 24px; }
  .pc-spread .cat-col { border-right: 0; border-bottom: 1px dashed var(--pc-line); padding-right: 0; padding-bottom: 12px; }
  .pc-spread .meta-col { border-left: 0; border-top: 1px dashed var(--pc-line); padding-left: 0; padding-top: 12px; flex-direction: row; justify-content: space-between; align-items: center; }
  .pc-spread .open-body { padding: 16px 20px 22px 24px; }
  .pc-spread .crit-cell:nth-child(2n) { border-right: 0; }
}

/* =====================================================================
   Aus den Inline-<style>-Blöcken der V2.1-Seiten ausgelagert (Index-Karten,
   Hub-Picker, WIP-Shells), damit der Generator die Seiten ohne Inline-CSS
   erzeugen kann. Variablen --pc-* werden von .pc geerbt (Karten liegen in .pc).
   ===================================================================== */

/* --- Index-Karten (.veh-*) --- */
.veh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
@media (max-width: 900px) { .veh-grid { grid-template-columns: 1fr; } }
.veh-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--pc-card); border: 1px solid var(--pc-line);
  padding: 32px 28px 26px; text-decoration: none; color: inherit;
  transition: transform .22s, box-shadow .22s, border-color .22s; min-height: 220px;
}
.veh-card:hover { transform: translateY(-2px); box-shadow: 0 18px 32px rgba(0,0,0,.10); border-color: #b29055; }
.veh-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--pc-red); }
.veh-card.soon { opacity: .65; cursor: not-allowed; }
.veh-card.soon::before { background: var(--pc-mute); }
.veh-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--pc-red); font-weight: 700; margin-bottom: 14px;
}
.veh-eyebrow::before {
  content: ""; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--pc-red); margin-right: 9px;
  vertical-align: middle; box-shadow: 0 0 0 0 rgba(183,56,42,.55);
  animation: navDot 2.4s ease-out infinite;
}
.veh-card.soon .veh-eyebrow { color: var(--pc-mute); }
.veh-card h3 {
  font-family: "Barlow Condensed", sans-serif; font-weight: 800;
  font-size: 36px; line-height: 1; text-transform: uppercase;
  letter-spacing: -.01em; margin: 0 0 8px; color: var(--pc-ink);
}
.veh-spec { font-family: "Barlow", sans-serif; font-size: 14.5px; color: var(--pc-dim); margin-bottom: 20px; }
.veh-facts {
  display: grid; grid-template-columns: 108px 1fr; gap: 7px 14px;
  margin: 0; padding: 15px 0; align-items: baseline;
  border-top: 1px dashed var(--pc-line-soft); border-bottom: 1px dashed var(--pc-line-soft);
}
.veh-facts dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pc-mute); line-height: 1.45;
}
.veh-facts dd { margin: 0; font-family: "Barlow", sans-serif; font-size: 14px; color: var(--pc-dim); line-height: 1.5; }
.veh-facts dd b { color: var(--pc-ink); font-weight: 600; }
.veh-size { display: grid; grid-template-columns: 108px 1fr; column-gap: 14px; align-items: baseline; margin: 14px 0 16px; }
.veh-size .vs-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pc-mute);
}
.veh-size b { font-family: "JetBrains Mono", monospace; font-size: 15px; font-weight: 700; color: var(--pc-ink); letter-spacing: .01em; }
.veh-action {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--pc-line-soft);
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pc-mute);
}
.veh-card .arrow { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 22px; color: var(--pc-red); line-height: 1; }
.veh-card.soon .arrow { color: var(--pc-mute); }
.veh-tag {
  display: inline-block; font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 8px; background: rgba(132,122,100,.12); color: var(--pc-mute);
  border: 1px solid var(--pc-line); font-weight: 600;
}

/* --- Hub-Picker (.picker-*) --- */
.picker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-top: 8px; }
.picker-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--pc-card); border: 1px solid var(--pc-line);
  padding: 32px 28px 26px; text-decoration: none; color: inherit;
  transition: transform .22s, box-shadow .22s, border-color .22s; height: 100%;
}
.picker-card:hover { transform: translateY(-2px); box-shadow: 0 18px 32px rgba(0,0,0,.10); border-color: #b29055; }
.picker-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--pc-red); }
.picker-card.k-slick::before { background: var(--pc-kind-slick); }
.picker-card.k-rain::before  { background: var(--pc-kind-rain); }
.picker-card.k-semislick::before { background: linear-gradient(to right, var(--pc-red) 0 50%, var(--pc-kind-sport) 50% 100%); }
.picker-card .p-kind {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 700; color: var(--pc-red); margin-bottom: 12px;
}
.picker-card.k-slick .p-kind { color: var(--pc-kind-slick); }
.picker-card.k-rain  .p-kind { color: var(--pc-kind-rain); }
.picker-card .p-kind .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.picker-card .p-kind .dot-sport { background: var(--pc-kind-sport); }
.picker-card .p-kind .kw-sport { color: var(--pc-kind-sport); }
.picker-card h3 {
  font-family: "Barlow Condensed", sans-serif; font-weight: 800;
  font-size: 38px; line-height: 1; min-height: 76px; text-transform: uppercase;
  letter-spacing: -.01em; margin: 0 0 14px; color: var(--pc-ink);
}
.picker-card p { margin: 0 0 22px; font-size: 15px; line-height: 1.55; color: var(--pc-dim); flex: 1; }
.picker-card .p-count {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; margin-top: auto; border-top: 1px solid var(--pc-line-soft);
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pc-mute);
}
.picker-card .p-arrow { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 22px; color: var(--pc-red); line-height: 1; }
.picker-card.k-slick .p-arrow { color: var(--pc-kind-slick); }
.picker-card.k-rain  .p-arrow { color: var(--pc-kind-rain); }
.picker-card--wip { pointer-events: none; }
.picker-card--wip h3, .picker-card--wip p { opacity: .45; }

/* --- WIP-Shells (.wip-*) — Kind-Farbe via Modifier .k-slick/.k-rain --- */
.wip-wrap { max-width: 720px; margin: 0 auto; padding: 140px 24px; text-align: center; }
.wip-kind {
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--pc-mute); margin-bottom: 20px;
}
.wip-kind.k-slick { color: var(--pc-kind-slick); }
.wip-kind.k-rain  { color: var(--pc-kind-rain); }
.wip-wrap h1 { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 48px; text-transform: uppercase; line-height: 1; margin: 0 0 18px; color: var(--pc-ink); }
.wip-wrap p { font-family: "Barlow", sans-serif; font-size: 16px; line-height: 1.6; color: var(--pc-dim); margin: 0 auto 30px; max-width: 52ch; }
.wip-back { font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--pc-red); border-bottom: 1px solid currentColor; padding-bottom: 2px; }