/* Teileseite — Regal-Ansicht (Entwurf 3a, live seit 2026-09-09), dazu am
   Dateiende Runde 6 (Artboard 6a, live seit 2026-09-11) und 6b auf dem
   Telefon (live seit 2026-09-13). Geladen nur von part_detail.html.
   Bericht + Plan: docs/vergleichsseite-redesign-plan.md

   Eigene Datei mit Absicht: die Regeln der Teileseite stehen nicht in
   style.css. Alle Farben/Maße kommen aus den Design-Tokens
   (static/design/*.css) — dieselben, die auch die Entwürfe benutzen. */

/* --- `hidden` durchsetzen ------------------------------------------------
   Das HTML-Attribut `hidden` wirkt nur über die UA-Regel `[hidden]{display:none}`,
   und die hat die niedrigste Spezifität, die es gibt. Jede eigene Regel, die
   `display` setzt, schlägt sie — die Karte blieb also sichtbar, obwohl das
   Skript `el.hidden = true` gesetzt hatte.

   Genau diese Falle steht in `style.css` schon zweimal angeschrieben
   (`.nach-oben`, `.kb-gruppe`, `.entry-grid`). Hier betraf sie DREI Stellen:
     * `.rk`              (display:flex)        -> Zustandsfilter blendete nichts aus
     * `.rk-best-marke`   (display:inline-flex) -> JEDE Karte trug „Bester Endpreis"
     * `.direktvergleich` (display:flex)        -> leerer Vergleichskasten stand da

   Bewusst eng aufgezählt statt `[hidden]{display:none!important}` global: auf
   dieser Seite hängen auch Kopfzeile, Fahrzeugleiste und Einkaufszettel mit
   drin, und deren `hidden`-Umgang gehört nicht dem Entwurf. */
.rk[hidden],
.rk-marke[hidden],
.rk-zustand[hidden],
.rk-aufschluss[hidden],
.direktvergleich[hidden] { display: none !important; }

/* --- Prototyp-Fahne ----------------------------------------------------- */
.entwurf-fahne {
  margin: 12px 0 16px;
  padding: 10px 14px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--paper-sunken);
  font-size: var(--text-xs);
  color: var(--ink-2);
}
.entwurf-fahne a { color: var(--fusion-deep); }

/* --- Steuerleiste ------------------------------------------------------- */
/* Zwei getrennte Gruppen statt drei gleichrangiger Knöpfe (Bericht R1):
   links wird SORTIERT, rechts wird GEFILTERT. Der Entwurf mischte beides. */
.regal-steuer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 14px 16px; margin-bottom: 18px;
  background: var(--paper-bright);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
/* Sortierung, Zustand und Versand sind jetzt dasselbe Bauteil (Walter,
   2026-09-07): `.ctrl-group` / `.ctrl-label` / `.seg-toggle` / `.switch` kommen
   unverändert aus style.css — hier steht bewusst NICHTS dazu, damit der Entwurf
   optisch nicht von der Trefferliste abdriftet. Die früheren `.rs-btn`-Pillen
   sind ersatzlos raus. */
.rs-note {
  margin-left: auto; font-size: var(--text-xs); color: var(--ink-3);
}

/* --- Das Regal ---------------------------------------------------------- */
.regal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  /* Alle Karten gleich hoch — auch über Zeilen hinweg (Walter, 2026-09-07).
     Ohne das sizt jede Grid-Zeile ihre eigene Höhe: eine Karte mit Rabattcode,
     Staffelpreis oder Grundpreis machte ihre GANZE Zeile höher, die Zeile
     darunter blieb flach. `1fr` auf den impliziten Zeilen zwingt alle auf
     dasselbe Maß — das der inhaltsreichsten Karte.
     Der Preis dafür: eine einzige Karte mit vielen Zusatzangaben hebt das
     ganze Regal an. Bei 38 Angeboten sind das rund 40 px für alle. */
  grid-auto-rows: 1fr;
  gap: 20px;
}
/* R4 — ein einziges Angebot ist kein Regal. Dann eine breite Karte statt einer
   einsamen 272-px-Säule links im Nichts.
   `min(520px, 100%)` und NICHT `minmax(0, 520px)`: ein fester Maximalwert bleibt
   auch dann 520 px, wenn der Behälter schmaler ist — auf dem Telefon lief die
   Karte damit seitlich aus dem Bild. */
.regal-einzeln { grid-template-columns: min(520px, 100%); }

.rk {
  display: flex; flex-direction: column;
  background: var(--paper-bright);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.rk-best { border-color: var(--success); }
/* A1 — Nebentreffer sind optisch zurückgenommen: ihr Preis gehört zu einem
   anderen Teil und darf nicht mit den echten Angeboten konkurrieren. */
.rk-neben { opacity: .72; border-style: dashed; }

/* --- Bildfläche --------------------------------------------------------- */
.rk-bild {
  position: relative; height: 188px; background: var(--paper-sunken);
}
/* R2 entschieden (Walter, 2026-09-07, am Bildschirm verglichen): `contain`.
   Der Entwurf sagt `cover`, aber die Produktfotos haben kein einheitliches
   Seitenverhältnis — bei Langteilen (Schaltstange, Zierleiste) schnitt `cover`
   die halbe Länge ab. Das Teil vollständig zu zeigen wiegt schwerer als eine
   satt gefüllte Fläche. */
.rk-bild img {
  width: 100%; height: 100%; display: block;
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
  background: var(--paper-bright);
}
.rk-kein-foto {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--ink-mute);
  font-size: var(--text-xs); font-weight: 600;
}

.rk-marke, .rk-zustand {
  position: absolute; display: inline-flex; align-items: center;
  font-family: var(--font-sans); box-shadow: var(--shadow-xs);
}
.rk-best-marke {
  top: 10px; left: 10px; height: 26px; padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--success); color: var(--ink-invert);
  font-size: var(--text-2xs); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.rk-zustand {
  top: 10px; right: 10px; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--paper-bright); color: var(--ink);
  font-size: var(--text-xs); font-weight: 700;
  border: 1.5px solid var(--line-strong);
}
.rk-zustand svg { flex: none; }
.z-neu       { border-color: var(--success); }
.z-neu svg   { stroke: var(--success); }
.z-gebraucht { border-color: var(--warning); }
.z-gebraucht svg { stroke: var(--warning); }
/* P12 — NOS ist der dritte Zustand, den der Entwurf nicht kennt. Gold, weil es
   weder "neu" (grün) noch "gebraucht" (gelb) ist, sondern etwas Eigenes. */
.z-nos       { border-color: var(--gold, var(--warning)); }
.z-nos svg   { stroke: var(--gold, var(--warning)); }

/* --- Korpus ------------------------------------------------------------- */
.rk-korpus {
  padding: 16px 18px 18px; flex: 1;
  display: flex; flex-direction: column; gap: 14px;
}
.rk-kopf { display: flex; flex-direction: column; gap: 8px; }
.rk-marke-name {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600;
  letter-spacing: .01em; line-height: 1.1; color: var(--ink);
}
/* Ersatztext ("Hersteller k. A.") grau: die Karte soll nicht so aussehen, als
   hätte sie eine Angabe, die sie nicht hat. */
.rk-marke-name.leer { color: var(--ink-3); }

.rk-signal { display: flex; align-items: center; gap: 8px; cursor: help; }
.rk-balken { display: flex; gap: 3px; }
.rk-balken .seg {
  width: 26px; height: 5px; border-radius: 3px; background: var(--line);
}
.rk-balken .seg.an { background: var(--ink-2); }
.rk-signal-txt { font-size: var(--text-xs); color: var(--ink-2); }

.rk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rk-chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: 600;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--paper);
}
.rk-norm { cursor: help; }
/* Der Maß-Chip trägt oft die EINZIGE Angabe, die zwei sonst gleiche Karten
   unterscheidet (Walter, 2026-09-08) — deshalb Monoschrift und kräftiger als die
   übrigen Chips. Ziffern in Mono, damit 0,25 und 0,50 auf einen Blick
   auseinandergehen. */
/* Blau (Walter, 2026-09-08) — einheitlich, auch bei Abweichung. Eine eigene
   Warnfarbe am Chip wäre die vierte Anzeige derselben Sache: die abweichende
   Karte trägt schon das Etikett „Nr. passt – anderes Maß", einen gestrichelten
   Rahmen und weniger Deckkraft. Der Chip sagt nur, WELCHES Maß. */
.rk-mass {
  cursor: help; font-weight: 700;
  font-family: var(--font-mono);
  color: var(--ink);
  background: var(--fusion-soft);
  border-color: var(--fusion-deep);
}

/* --- Preisblock --------------------------------------------------------- */
/* Abschlusszeile: Preis links, Knöpfe rechts — eine Ebene (Walter, 2026-09-09).
   Der Shopname sitzt jetzt oben, dadurch wird hier Platz frei.
   Trennlinie und Innenabstand liegen am Wrapper, damit die Linie über beide
   Hälften durchläuft.
   Der freie Platz der Karte sammelt sich mit `margin-top: auto` HIER, damit
   Preis und Knöpfe über alle Karten auf einer Linie liegen — sonst verteilte
   jede Karte den Rest anders. */
.rk-abschluss {
  margin-top: auto;
  padding-top: 12px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
}
.rk-preis {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.rk-summe {
  font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1;
}
.rk-summe.klein { font-size: var(--text-md); color: var(--ink-2); }
.rk-anfrage, .rk-tot {
  font-size: var(--text-md); font-weight: 600; color: var(--ink-3);
}
.rk-aufschluss {
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.rk-aufschluss s { opacity: .7; margin-right: 4px; }
.rk-rabatt, .rk-grundpreis, .rk-staffel, .rk-hinweis {
  font-size: var(--text-2xs); color: var(--ink-2);
}
.rk-rabatt.eingepreist { color: var(--fusion-deep); font-weight: 600; }
.rk-grundpreis, .rk-staffel { cursor: help; }
/* Der Staffelpreis wird hervorgehoben, sobald er der Grund für die Platzierung
   der Karte ist (Walter, 2026-09-07: „Staffelpreis vorziehen"). Sonst bliebe
   unerklärt, warum ein Angebot mit sichtbar höherem Stückpreis vorne steht. */
.rk-staffel.greift {
  align-self: flex-start;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--fusion-soft); border: 1px solid var(--fusion-deep);
  color: var(--ink); font-weight: 600;
}
.rk-hinweis {
  display: inline-flex; align-self: flex-start; align-items: center;
  height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
  background: var(--paper-sunken); border: 1px solid var(--line);
  font-weight: 600; cursor: help; margin-bottom: 4px;
}
/* Der Gutschein-Chip kommt aus _gutschein_chip.html und bringt seine Optik aus
   style.css mit — hier nur der Abstand, damit er in der Karte nicht klebt. */
.rk-preis .gutschein-chip { align-self: flex-start; margin-top: 6px; }

/* --- Fuß ---------------------------------------------------------------- */
/* Shopname oben statt in der Fußzeile, als eigene Zeile UNTER den Chips
   (Walter, 2026-09-09). Neben dem Herstellernamen nahm er diesem die Breite weg:
   „Aircooledshop Classic Parts" brach auf drei Zeilen um. Linksbündig wie der
   Herstellername darüber. */
.rk-shop {
  align-self: flex-start; max-width: 100%;
  font-size: var(--text-xs); font-weight: 600; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-tun { display: flex; align-items: center; gap: 8px; flex: none; }
.rk-shopbtn {
  height: 36px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* R3 — die zweite Merk-Geste bekommt eine ANDERE Form als der Zettel-Knopf:
   breit und gestrichelt statt rundes Symbol. Zwei Bedeutungen, zwei Gestalten. */
.rk-legen {
  height: 34px; width: 100%;
  border-radius: var(--radius-pill);
  border: 1.5px dashed var(--line-strong); background: transparent;
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700;
  color: var(--ink-2); cursor: pointer;
}
.rk-legen:hover { background: var(--paper-sunken); }
.rk-legen .txt-an { display: none; }
.rk-legen[aria-pressed="true"] {
  border-style: solid; border-color: var(--ink);
  background: var(--ink); color: var(--ink-invert);
}
.rk-legen[aria-pressed="true"] .txt-an  { display: inline; }
.rk-legen[aria-pressed="true"] .txt-aus { display: none; }

/* --- Direkter Vergleich ------------------------------------------------- */
.direktvergleich {
  margin-top: 22px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--paper-bright);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.dv-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dv-titel {
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 600;
  text-transform: uppercase; letter-spacing: .02em; color: var(--ink);
}
.dv-leeren {
  height: 32px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: transparent;
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600;
  color: var(--ink-2); cursor: pointer;
}
.dv-spalten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;
}
.dv-karte {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
}
.dv-bild {
  height: 108px; border-radius: var(--radius-md); background: var(--paper-sunken);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-size: var(--text-2xs); color: var(--ink-mute);
}
.dv-bild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dv-name {
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 600;
  color: var(--ink);
}
.dv-meta { font-size: var(--text-xs); color: var(--ink-2); }
.dv-shop { font-size: var(--text-xs); color: var(--ink-3); }
.dv-preis {
  font-family: var(--font-mono); font-size: var(--text-md); font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* --- Schmal ------------------------------------------------------------- */
/* Etappe 4 klärt das Mobil-Verhalten am Gerät; das hier ist nur die Notdecke,
   damit der Prototyp auf dem Telefon überhaupt beurteilbar ist. */
/* Breakpoints wie im Bestand (style.css: 600 / 380), damit der Entwurf an
   denselben Stellen umbricht wie der Rest der Seite.
   `grid-auto-rows: 1fr` bleibt hier bewusst stehen: gleiche Kartenhöhen gelten
   auch einspaltig (Walter, 2026-09-07). */
@media (max-width: 600px) {
  /* Die vier Gruppen der Steuerleiste dürfen nicht ineinander umbrechen —
     untereinander bleibt lesbar, was nebeneinander zu Stückwerk würde. */
  .regal-steuer {
    flex-direction: column; align-items: stretch;
    gap: 12px; padding: 12px 14px;
  }
  /* Die Segment-Schalter tragen lange Beschriftungen („Günstigster Endpreis"),
     die nebeneinander breiter sind als ein Telefon. Untereinander mit dem
     Etikett darüber statt daneben. */
  .regal-steuer .cg-seg { flex-direction: column; align-items: flex-start; gap: 6px; }
  .regal-steuer .seg-toggle { max-width: 100%; }
  .regal-steuer .seg-opt { padding: 5px 10px; font-size: var(--text-2xs); }
  .rs-note { margin-left: 0; }

  /* --- Karte quer: Foto links, Text rechts (Walter, 2026-09-09) -----------
     Der Mobil-Entwurf 5a legt das Foto als flachen Streifen über die volle
     Breite (360 × 148 = 2,43 : 1). Gemessen an 400 Produktfotos ist das der
     Fehler: alle liegen zwischen 1,33 und 1,51 (Querformat, kein Hochformat,
     kein Quadrat), und in einer 2,43 : 1 breiten Fläche füllt so ein Foto bei
     `object-fit: contain` nur 55 % der Breite — es steht als Streifen mit je
     22 % Weißraum daneben.

     Die Fläche bekommt deshalb DAS VERHÄLTNIS DER FOTOS: 150 × 113 ist 1,33 : 1.
     Damit füllt jedes Foto die volle Breite, und alle wirken gleich groß.

     Umgesetzt als Grid über die Karte. `.rk-korpus` wird zu `display: contents`,
     damit Kopf, Preis, Fuß und Knopf direkte Grid-Kinder werden — sonst ließe
     sich nur der ganze Korpus neben das Foto legen, und darunter klaffte Leerraum
     in Höhe des Textes. Kopf neben das Foto, alles Weitere über die volle Breite. */
  .rk {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-content: start;
    gap: 0 14px;
    padding: 14px;
  }
  .rk-korpus { display: contents; }
  .rk-bild {
    grid-column: 1; grid-row: 1;
    height: 113px;
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  /* Kein Innenabstand mehr: die Fläche hat jetzt das Format der Fotos, jeder
     zusätzliche Rand würde sie wieder verkleinern. */
  .rk-bild img { padding: 0; }
  .rk-kopf   { grid-column: 2; grid-row: 1; min-width: 0; }
  /* `margin-top: auto` schiebt im Grid nichts mehr an den Kartenboden — die
     Abstände stehen hier fest. */
  .rk-abschluss { grid-column: 1 / -1; margin-top: 14px; }

  /* „nebeneinander legen" fällt mobil weg (Walter, 2026-09-09) — drei Karten
     nebeneinander sind auf 390 px nicht lesbar, die Geste läuft ins Leere. Der
     Mobil-Entwurf 5a kommt unabhängig zum selben Schluss und setzt dort den
     Einkaufszettel hin; der steht bei uns ohnehin schon in der Fußzeile.
     Der Vergleichskasten muss mit weg: wer am Desktop etwas ausgewählt hat und
     dann das Fenster schmal zieht, hätte sonst einen Kasten ohne Bedienung
     davor. Die Auswahl bleibt im Skript erhalten und ist beim Zurückdrehen
     wieder da. */
  .rk-legen, .direktvergleich { display: none; }

  /* Auf 150 px Breite passen die beiden Marken nicht mehr nebeneinander in die
     obere Zeile: Bestpreis oben, Zustand unten. */
  .rk-best-marke { top: 6px; left: 6px; height: 22px; padding: 0 8px; }
  .rk-zustand {
    top: auto; bottom: 6px; right: 6px;
    height: 24px; padding: 0 8px; gap: 4px;
    font-size: var(--text-2xs);
  }
  .rk-kein-foto svg { width: 22px; height: 22px; }
  .rk-kein-foto span { font-size: var(--text-2xs); text-align: center; }

  /* Die Textspalte ist nur noch ~190 px breit. Der Balken (3 × 26 px + Lücken
     = 84 px) und „keine Herstellerangabe" daneben brauchen mehr — also
     schmalere Segmente, und im Zweifel bricht die Beschriftung um. */
  .rk-signal { flex-wrap: wrap; gap: 4px 8px; }
  .rk-balken .seg { width: 18px; }
  .rk-signal-txt { font-size: var(--text-2xs); }
  .rk-marke-name { font-size: var(--text-md); }
  /* Lange Herstellernamen („Mahle Indústria e Comércio Ltda.") dürfen die Karte
     nicht seitlich aufreißen. */
  .rk-kopf { overflow-wrap: anywhere; }
}

@media (max-width: 380px) {
  /* Preis und die beiden Knöpfe passen nicht mehr in eine Zeile. */
  .rk-abschluss { flex-wrap: wrap; }
  .rk-tun { margin-left: auto; }

}

/* === Runde 6 — Kopf entlasten, Seitenende, Karten-Feinschliff ==============
   Umgeschaltet 2026-09-11 aus dem Prototyp static/entwurf-r6.css (c1f5e48).
   Alles hängt an .r6 (Klasse am .detail der Teileseite) bzw. an r6-Klassen und
   wirkt deshalb nicht im Seitenfenster. Steht bewusst AM ENDE: die Regeln
   überschreiben Bestandsregeln weiter oben (z. B. .rk-shop align-self).
   Bericht: docs/vergleichsseite-redesign-plan.md, Abschnitt 11. */

/* --- Kopf ------------------------------------------------------------------
   Links Titel + Kennzahlen-Zeile, rechts Passungs-Chip + Teilen, unten bündig
   (Entwurf: align-items flex-end, gap 24px). */
.r6 .r6-kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px 24px; flex-wrap: wrap; margin: 6px 0 14px;
}
.r6 .r6-titel { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 420px; }
/* Abweichung: Entwurf text-3xl, hier text-2xl wie heute. Der Entwurf rechnet
   mit „Spurstange vorn"; echte Namen wie „Hauptlagersatz, Std./Std./Std., für
   Typ 1-Motoren ab 30 PS" brachen in 3xl dreizeilig um (151 px) und schoben
   die Karten wieder unter die Kante (gemessen 2026-09-11, 1180 px). */
.r6 .r6-titel h1 {
  margin: 0; font-size: var(--text-2xl); line-height: 1.1;
  color: var(--fusion-deep); overflow-wrap: break-word;
}
/* Eine Schrift, eine Größe (Walter, 2026-09-11). Vorher VW-Nr. in Mono, Preis
   in Mono text-md, Rest Sans text-sm — drei Schriftbilder in einer Zeile.
   Jetzt alles Sans in der Größe der VW-Nr.; hervorgehoben nur übers Gewicht. */
.r6 .r6-zahlen {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin: 0; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-2);
}
.r6 .r6-zahlen .pn,
.r6 .r6-zahlen strong,
.r6 .r6-zahlen .best-code-hint { font-family: inherit; font-size: inherit; }
.r6 .r6-zahlen .pn { font-weight: 600; color: var(--ink); }
.r6 .r6-zahlen strong { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.r6 .r6-sep { color: var(--line-strong); }
.r6 .r6-aktionen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.r6-pass {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px;
  border-radius: var(--radius-pill); background: var(--success-soft);
  border: 1px solid var(--success); color: var(--ink);
  font-size: var(--text-xs); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.r6-pass svg { flex: none; color: var(--success); }
.r6-pass:hover { color: var(--ink); border-color: var(--ink); }
.r6-pass:focus-visible { outline: 2px solid var(--success); outline-offset: 3px; }

/* --- Unter den Karten --------------------------------------------------------
   Entwurf: grid 1.15fr / 1fr, gap 28px, margin-top 14px, padding-top 26px,
   Trennlinie oben. Überschriften Display-Schrift, Versalien, fusion-deep. */
.r6 .r6-unten {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px; margin-top: 22px; padding-top: 26px; border-top: 1px solid var(--line);
}
.r6 .r6-spalte { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.r6 .r6-spalte:only-child { grid-column: 1 / -1; }
.r6 .r6-unten h2.section {
  margin: 0; font-size: var(--text-lg); text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--fusion-deep);
}
.r6 .r6-unten .part-desc { margin: 0; max-width: none; }
.r6 .r6-unten .fitfacts { margin: 0; scroll-margin-top: 16px; }
.r6 .r6-unten .faq { margin: 0; }
.r6 .r6-unten .faq h2.section { margin-bottom: 12px; }
.r6 .r6-unten .faq-item { max-width: none; margin: 0 0 12px; }
.r6 .r6-unten .faq-item h3 {
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700; color: var(--ink);
}
.r6 .r6-unten .faq-item p { font-size: var(--text-sm); }
.r6 .r6-hinweise { padding-top: 10px; border-top: 1px solid var(--line-soft); }
.r6 .r6-hinweise p { margin: 4px 0 0; }

/* --- Karte: Shopname unter dem Preis (Walter, 2026-09-11) ------------------
   Entwurf 6a: unter der Trennlinie der Preis, darunter der Shop (text-sm, 600,
   ink-2, Auslassung). Bestand hatte ihn oben unter den Chips (2026-09-09, damit
   er dem Herstellernamen nicht die Breite nimmt) — hier unten steht er nur
   neben den Knöpfen. Farbe, Gewicht und Auslassung bringt .rk-shop mit. */
.r6 .rk-preis > .rk-shop { font-size: var(--text-sm); margin-top: 2px; }

/* Marke „Bester Endpreis" aus, Desktop und mobil (Walter, 2026-09-11). Per CSS
   statt aus dem Markup: teilekarten.js schaltet sie beim Umsortieren über
   `hidden` um und erwartet das Element. Der grüne Kartenrand (.rk-best) bleibt. */
.r6 .rk-best-marke { display: none; }

/* Nebentreffer-Etikett im Kartenkopf statt im Preisblock (Walter, 2026-09-11).
   Optik aus teilekarten.css (.rk-hinweis); dort trägt es margin-bottom für den
   Abstand zum Preis — im Kopf regelt das der gap. */
.r6 .rk-hinweis-kopf { margin-bottom: 0; }

@media (max-width: 800px) {
  .r6 .r6-unten { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 600px) {
  .r6 .r6-titel h1 { font-size: var(--text-2xl); }
  .r6 .r6-kopf { align-items: stretch; }
  /* Entwurf 6b: Preis links, Shop rechts in EINER Zeile unter der Trennlinie,
     die Knöpfe darunter. Der Preisblock wird dafür ein Grid: Preis und Shop
     fest in Zeile 1, alles andere (Versand-Aufschlüsselung, Rabatt, Staffel,
     Rabattcode-Chip, Nebentreffer-Etikett) über die volle Breite darunter. */
  .r6 .rk-abschluss { flex-wrap: wrap; row-gap: 12px; }
  .r6 .rk-preis {
    flex: 1 1 100%;
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px; row-gap: 4px; align-items: end;
  }
  .r6 .rk-preis > * { grid-column: 1 / -1; justify-self: start; }
  /* Preis und Shop auf DIESELBE Schriftlinie. `.rk-shop` bringt aus
     teilekarten.css `align-self: flex-start` mit — ohne Überschreiben klebte der
     Shop oben an der 28 px hohen Preiszeile (gemessen 7 px zu hoch). */
  .r6 .rk-preis > .rk-summe { grid-column: 1; grid-row: 1; align-self: baseline; }
  .r6 .rk-preis > .rk-shop {
    grid-column: 2; grid-row: 1; justify-self: end; align-self: baseline;
    margin: 0; text-align: right;
  }
  .r6 .rk-tun { margin-left: auto; }
}


/* === 6b — Teileseite auf dem Telefon ==========================================
   Umgeschaltet 2026-09-13 aus dem Prototyp static/entwurf-6b.css (Commit
   „Teileseite 6b als Prototyp"). Alles hängt an .b6 (Klasse am .detail der
   Teileseite); am Desktop greifen nur die Regeln, die Zeilenköpfe ausblenden,
   damit die Seite dort aussieht wie 6a. Das Zuklappen macht
   static/teileseite-zeilen.js. Bericht: docs/vergleichsseite-redesign-plan.md,
   Abschnitt 12. */

/* Zeilen-Köpfe (<summary>): nie das Standard-Dreieck. */
.b6 .b6-summary { list-style: none; }
.b6 .b6-summary::-webkit-details-marker { display: none; }
.b6 .b6-pfeil { display: inline-flex; flex: none; color: var(--ink-3); transition: transform var(--dur-fast); }
.b6 details[open] > .b6-summary .b6-pfeil { transform: rotate(180deg); }

/* --- Desktop: aussehen wie 6a --------------------------------------------- */
@media (min-width: 601px) {
  /* „Beschreibung" und „Datenstand & Bildnachweis" gibt es als Zeilenkopf nur
     mobil; am Desktop steht der Inhalt offen da wie live. */
  .b6 .b6-beschreibung > .b6-summary,
  .b6 .b6-datenstand > .b6-summary { display: none; }
  /* „Häufige Fragen" bleibt am Desktop eine feste Überschrift, kein Schalter. */
  .b6 .b6-faq > .b6-summary { pointer-events: none; }
  .b6 .b6-faq > .b6-summary .b6-pfeil { display: none; }
}

/* --- Mobil: Artboard 6b ---------------------------------------------------- */
@media (max-width: 600px) {
  /* Kopf: Titel links, „Teilen" als runder Symbol-Knopf daneben (im Artboard
     rechts in der Titelleiste), der grüne Passungs-Knopf als eigene volle Zeile
     darunter. Spart die Zeile, in der Chip und Teilen-Knopf nebeneinander
     umbrachen (gemessen 92 px). */
  .b6 .r6-kopf {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px; align-items: start;
  }
  .b6 .r6-titel { grid-column: 1; grid-row: 1; }
  .b6 .r6-aktionen { display: contents; }
  .b6 .r6-kopf .share-btn {
    grid-column: 2; grid-row: 1;
    width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center;
  }
  /* Beschriftung nur für Screenreader — der Knopf trägt ohnehin aria-label. */
  .b6 .r6-kopf .share-txt {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .b6 .r6-pass {
    grid-column: 1 / -1; grid-row: 2;
    height: 34px; padding: 0 11px; font-size: var(--text-2xs); white-space: normal;
  }
  .b6 .r6-pass-txt { flex: 1; min-width: 0; }

  /* Unter den Karten: Überschrift, dann Zeilen im Kasten-Stil. */
  .b6 .r6-unten { gap: 10px; margin-top: 10px; padding-top: 18px; }
  .b6 .r6-spalte { gap: 10px; }
  .b6 .r6-unten h2.section { font-size: var(--text-md); }

  .b6 .b6-zeile,
  .b6 .r6-unten details.fitfacts {
    margin: 0; padding: 0;
    background: var(--paper-bright); border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
  }
  .b6 .b6-summary,
  .b6 .r6-unten details.fitfacts > .ff-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 52px; padding: 0 14px; cursor: pointer;
    font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700; color: var(--ink);
  }
  .b6 .b6-faq > .b6-summary h2.section {
    margin: 0; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700;
    text-transform: none; letter-spacing: 0; color: var(--ink);
  }
  .b6 .b6-zeile[open] > :not(summary) { padding: 0 14px 14px; }
  .b6 .r6-unten details.fitfacts > .ff-body { margin: 0; padding: 0 14px 14px; }

  /* Beschreibung: Kasten mit Kopfzeile, Text kleiner (Artboard: text-xs). */
  .b6 .b6-beschreibung > .b6-summary { min-height: 0; padding: 14px 14px 10px; }
  .b6 .b6-beschreibung .part-desc { font-size: var(--text-xs); line-height: var(--lh-relaxed); }

  /* Häufige Fragen im Kasten: Abstände der Einträge enger. */
  .b6 .b6-faq .faq-item { margin: 0 0 10px; }

  /* Hinweise: die Zeile „Datenstand & Bildnachweis" zuerst, darunter sichtbar
     Preisstand und Provisionshinweis (§ 5a Abs. 4 UWG — nie eingeklappt). */
  .b6 .r6-hinweise { display: flex; flex-direction: column; padding-top: 0; border-top: 0; }
  .b6 .b6-datenstand { order: -1; margin-bottom: 6px; }
  .b6 .b6-datenstand .bildnachweis-hint { margin: 0; }
}