/* Report excerpts: the existing report frame and typography, with one stable
   reading surface. Only the selected content changes; rules never animate. */
.page-content--diagnostic-report {
  --rp-inset: clamp(1.25rem, 2vw, 2.25rem);
}
.rp--sample {
  --rp-sample-ink: #ededed;
  --rp-sample-muted: rgba(237, 237, 237, .76);
  --rp-sample-rule: #ffffff; /* HVR-20260914-31 */
  color: var(--rp-sample-ink);
}
.rp--sample .rp__band { padding-top: 8vh; }
.rp-sample-head { padding: 0 var(--rp-inset) 6vh; }
.rp--sample .rp-sub { color: var(--rp-sample-muted); }
.rp-explorer { border-top: 1px solid var(--rp-sample-rule); } /* AD-Checkpoint 2 (D4, AP-203): untere Kante gehoert dem Signal-Rot-Rahmen */
.rp-explorer__tabs { display: none; }
.rp-explorer.is-ready .rp-explorer__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* HVR-20260912-27 (Rene): die drei Auszuege sind CTAs — Titel in der
   Term-Statement-Rolle, Ziffer als Eyebrow, Zoom (scale 1.02, 06: subtiler
   Scale) und Hand-Cursor auf Hover/Fokus, aktiver Tab mit Signal-Rot-Kante. */
.rp-explorer__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6em;
  min-width: 0;
  margin: 0;
  padding: 1.6em var(--rp-inset);
  border: 0;
  border-right: 1px solid var(--rp-sample-rule);
  border-radius: 0; /* keine border-bottom: die Tab-Unterkante ist die Oberkante des Rahmens (AD-Checkpoint 2, D4) */
  background: transparent;
  color: var(--rp-sample-muted);
  text-align: left;
  font: 700 clamp(1.3rem, 2vw, 2.3rem)/1.1 "HK Grotesk Wide", var(--font-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  cursor: var(--cursor-hand);
  transform-origin: center;
  transition: background .25s, color .25s, transform .25s cubic-bezier(.65, 0, .35, 1);
}
.rp-explorer__tab:last-child { border-right: 0; }
.rp-explorer__tab > span:first-child { font-size: clamp(.8rem, .95vw, 1.1rem); font-weight: 700; letter-spacing: .14em; }
.rp-explorer__tab[aria-selected="true"] {
  color: var(--rp-sample-ink);
  background: rgba(237, 237, 237, .07);
  box-shadow: inset 0 -3px var(--signal-red);
}
.rp-explorer__tab[aria-selected="true"] > span:first-child { color: var(--signal-red); }
.rp-explorer__tab:hover, .rp-explorer__tab:focus-visible { background: rgba(237, 237, 237, .07); color: var(--rp-sample-ink); transform: scale(1.02); z-index: 1; }
/* HVR-20260912-28 (Rene): Signal-Rot-Rahmen um den wechselnden Bereich; beim
   Wechsel zeichnet er sich von links neu (0.4 s), die Zellen des neuen Panels
   blenden versetzt ein. reduced-motion: kein Lauf. */
.rp-explorer__panels { position: relative; }
.rp-explorer__panels::after { content: ""; position: absolute; inset: 0 -0.5px; border: 1px solid var(--signal-red); pointer-events: none; z-index: 2; } /* -0.5px: Rahmenkanten exakt auf den Pixeln der v2/v3-Rails, die section-chrome im Rahmenband ausblendet */
.rp-explorer__panels.is-switching::after { animation: rp-frame-redraw .4s cubic-bezier(.65, 0, .35, 1); }
@keyframes rp-frame-redraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.rp-example.is-entering .rp-example__head, .rp-example.is-entering .rp-example__cell, .rp-example.is-entering .rp-example__result { animation: rp-cell-in .35s cubic-bezier(.65, 0, .35, 1) both; }
.rp-example.is-entering .rp-example__cell:nth-child(2) { animation-delay: .05s; }
.rp-example.is-entering .rp-example__cell:nth-child(3) { animation-delay: .1s; }
.rp-example.is-entering .rp-example__result { animation-delay: .15s; }
@keyframes rp-cell-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rp-explorer__tab:focus-visible, .rp-example:focus-visible, .rp-sample-link:focus-visible { outline: 2px solid var(--rp-sample-ink); outline-offset: -5px; }
.rp-example { min-width: 0; }
.rp-example + .rp-example { border-top: 1px solid var(--rp-sample-rule); }
/* All three panels contribute to the same tracks, including when inactive.
   No fixed height, hidden overflow, pinning or measurements on tab changes. */
.rp-explorer.is-ready .rp-explorer__panels { display: grid; grid-template-rows: auto auto auto; grid-template-columns: minmax(0, 1fr); } /* HVR-20260911-05: Spalte auf die Panelbreite begrenzen — ohne Angabe misst die auto-Spalte max-content der Beispiele (348 px in 281 px bei 390, Ueberlauf 14 bis 27 px) */
.rp-explorer.is-ready .rp-example {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr); /* HVR-20260911-05: ohne Angabe misst die implizite auto-Spalte max-content von Kopf, Zellen und Ergebnis (348 px in 281 px bei 390) */
  grid-area: 1 / 1 / 4 / 2;
  border-top: 0;
}
.rp-explorer.is-ready .rp-example[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
.rp-example__head { padding: 4vh var(--rp-inset); }
.rp-example__label {
  margin: 0 0 1.4em;
  color: var(--rp-sample-muted);
  font: 700 .875rem/1.5 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rp-example__head h4 {
  margin: 0;
  max-width: 24em;
  color: var(--rp-sample-ink);
  text-align: left;
  font: 700 clamp(1.7rem, 2.6vw, 3rem)/1.16 var(--font-body);
  text-transform: uppercase;
  letter-spacing: .01em;
}
.rp-example__body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--rp-sample-rule);
}
.rp-example__cell { min-width: 0; padding: 1.6em var(--rp-inset); }
.rp-example__cell + .rp-example__cell { border-left: 1px solid var(--rp-sample-rule); }
.rp-example__cell dt, .rp-example__cell h5 {
  margin: 0 0 1.1em;
  color: var(--rp-sample-ink);
  font: 700 clamp(.875rem, 1.05vw, 1.2rem)/1.4 var(--font-body);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.rp-example__cell dd, .rp-example__cell p, .rp-example__result p, .rp-sample-foot p {
  margin: 0;
  color: var(--rp-sample-muted);
  font: 400 clamp(1rem, 1.05vw, 1.2rem)/1.6 var(--font-body);
}
.rp-example__cell h5 { margin-top: .55em; }
.rp-example__cell .rp-example__rank {
  display: block;
  color: var(--rp-sample-muted);
  font: 700 clamp(2rem, 3.2vw, 4rem)/1 var(--font-display);
}
.rp-example__cell:first-child .rp-example__rank { color: var(--signal-red); }
.rp-example__level { display: block; margin-bottom: .7em; color: var(--rp-sample-ink); font-weight: 700; }
.rp-example__result { padding: 1.6em var(--rp-inset); }
.rp-example__result .rp-example__label { margin-bottom: .65em; color: var(--rp-sample-ink); }
.rp-example__result p:last-child { max-width: 55em; }
.rp-sample-foot { padding: 3.2vh var(--rp-inset) 6vh; }
.rp-sample-foot p { max-width: 52em; font-size: .875rem; }
.rp-sample-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2em;
  max-width: 100%;
  margin-top: 1.6em;
  padding: 1.1em 1.4em;
  border: 1px solid var(--rp-sample-rule);
  color: var(--rp-sample-ink);
  font: 700 1rem/1.4 var(--font-body);
  text-decoration: none;
  transition: color .25s, background .25s;
}
.rp-sample-link > span:last-child { color: var(--signal-red); font-size: 1.5em; }
.rp-sample-link:hover { background: var(--rp-sample-ink); color: #201e1e; }
@media (max-width: 900px) {
  /* HVR-20260918-M9 (Rene: "bei Inside The Report Details koennen ebenfalls
     2 Kacheln nebeneinander, anstatt alle untereinander") - von 1 auf 2
     Spalten (3 Zellen -> 2+1 statt 1+1+1), das minmax(0,1fr) aus
     HVR-20260911-05 bleibt zwingend erhalten (reines 1fr liess die Spur
     am Zellen-Min-Content wachsen und ueberlief das Panel). border-top
     greift jetzt nur noch fuer die 3. Zelle (nth-child(3)) - Zelle 2 hat
     stattdessen wieder den linken Rahmen wie im 2-Spalten-Desktop-Fall. */
  .rp-example__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-example__cell:nth-child(3) { border-left: 0; border-top: 1px solid var(--rp-sample-rule); grid-column: 1 / -1; }
  .rp-example__head h4 br { display: none; }
}
@media (max-width: 640px) {
  .rp-explorer.is-ready .rp-explorer__tabs { grid-template-columns: 1fr; }
  .rp-explorer__tab { flex-direction: row; align-items: baseline; gap: 1.2em; padding-block: 1em; border-right: 0; font-size: clamp(1.15rem, 4.2vw, 1.5rem); }
  .rp-explorer__tab[aria-selected="true"] { box-shadow: inset 3px 0 var(--signal-red); }
}
@media (prefers-reduced-motion: reduce) {
  .rp-explorer__tab, .rp-sample-link { transition: none; }
  .rp-explorer__tab:hover, .rp-explorer__tab:focus-visible { transform: none; }
  .rp-explorer__panels.is-switching::after, .rp-example.is-entering * { animation: none; }
}
/* HVR-20260918-lines-mobile (Rene: alle horizontalen Linien mobil entfernen).
   .rp-explorer__panels::after ist ein Vollrahmen (border:1px auf allen 4
   Seiten) - nur oben/unten auf 0, die roten Seitenrails bleiben stehen. */
@media (max-width: 900px) {
  .rp-explorer { border-top: 0 !important; }
  .rp-explorer__panels::after { border-top: 0 !important; border-bottom: 0 !important; }
  .rp-example + .rp-example,
  .rp-example__body,
  .rp-example__cell:nth-child(3)
  { border-top: 0 !important; border-bottom: 0 !important; }
}