/* Angebotsseite = Produktvergleich /angebot/<id>/<slug>/ (worker/offer.js buildOfferPage). Klassen pv-*. v2: nur --ob-*-Tokens (Styleguide v2), dunkel + hell ueber die Tokens.
   Angebotszeile (v2-or), Bestpreis-Badge (v2-bb), Sprach-Kennzeichen (v2-lg), Zeitraum (cp-range-seg), Label/Preis/Richtung (v2-lbl, v2-big, v2-sm, v2-dn, v2-up) kommen aus v2.css.
   Einheitliche Produkt-/Angebotsseite (Inhaber-Ok 28.10.2026). Container: .pv-cols > .pv-side + .pv-main (beide display: contents auf dem Handy, order je Block).
   Handy: Kopf (Herz + Glocke), Chips, Inhalt, Reihe [Bester Preis 1/3 | Spanne 2/3] (Grid 1fr 2fr auf .pv-cols), Liste, Verlauf, Sprachen, Mehr aus dem Set, Aehnliche, Quick Links.
   Desktop ab 900 px: links 340 px fest beim Scrollen (Kopf, Chips, Bester Preis, Spanne, Verlauf, Quick Links), rechts Inhalt, Liste, Sprachen, Mehr aus dem Set, Aehnliche. */

/* ---- Gemeinsam (Layout, ohne Farben) ---- */
.pv { margin: 0 auto; }
.pv-cols { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.pv-side, .pv-main { display: contents; }
/* Handy-Reihenfolge (Zahl = order). Best + Range teilen sich eine Reihe (Grid unten). */
.pv-head { order: 1; }
.pp-chips { order: 2; }
.pp-intro, .pp-contents { order: 3; }
.pv-best, .pv-range { order: 4; }
.pv-chart, .pp-usd { order: 5; } /* Handy: Preisverlauf ueber der Angebotsliste (Inhaber 28.10.2026) */
.pv-list, .pp-offers { order: 6; }
.pv-langs { order: 7; }
.pp-more, .pv-more { order: 8; }
.pv-sim { order: 9; }
.pv-ql { order: 10; }
.pv-alarm { order: 11; }
.pv-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; }
.pv-head:has(> .pv-acts) { grid-template-columns: 64px minmax(0, 1fr) auto; }
.pv-acts { display: flex; gap: 8px; align-self: start; }
.pv-th { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; }
.pv-th img { width: 100%; height: 100%; object-fit: contain; }
.pv-tt { display: grid; gap: 4px; min-width: 0; }
.pv-tt h1 { margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
.pv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pv-best-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px; }
.pv-rbar { position: relative; height: 24px; }
.pv-rtrack { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; }
.pv-rspan { position: absolute; top: 50%; height: 6px; margin-top: -3px; }
.pv-rdot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; padding: 0; border: 0; border-radius: 50%; appearance: none; -webkit-appearance: none; }
.pv-rdot::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.pv-rdot.is-best { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.pv-rmsrp { position: absolute; top: 0; bottom: 0; width: 0; margin-left: -1px; }
.pv-rlbls { position: relative; height: 1.5em; }
.pv-rl { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.pv-rl.l { transform: none; }
.pv-rl.r { transform: translateX(-100%); }
.pv-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pv-cnt { margin-right: auto; }
.pv-rows { display: grid; gap: 8px; }
.pv-rows.hide-out .pv-row.out, .pv-row.pv-h { display: none !important; }
.pv-fpanel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pv-fgrp, .pv-fch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pv-fchips { margin: 0; }
.pv-fbar .v2-quick { flex: 1 1 180px; width: auto; min-width: 0; }
.pv-row { position: relative; }
.pv-row .v2-or-t::after { content: ""; position: absolute; inset: 0; }
.pv-row .v2-or-a { position: relative; z-index: 1; }
.pv-pane[hidden] { display: none; }
.pv-cw { position: relative; height: 120px; }
.pv-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pv-dot { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; }
.pv-tag { position: absolute; z-index: 2; transform: translateX(-50%); white-space: nowrap; }
.pv-tag.is-first { transform: none; }
.pv-tag.is-now { transform: translateX(-100%); }
.pv-leg, .pv-axis, .pv-chg { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pv-axis { justify-content: space-between; }
.pv-leg span::before { content: ""; display: inline-block; width: 22px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px solid currentColor; }
.pv-leg .pv-leg-med::before { border-top-style: dashed; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-swipe { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 4px; }
.pv-swipe::-webkit-scrollbar { display: none; }
.pv-sc { flex: 0 0 132px; scroll-snap-align: start; display: grid; gap: 4px; align-content: start; text-decoration: none; min-width: 0; }
.pv-sc-img { height: 64px; display: grid; place-items: center; overflow: hidden; }
.pv-sc-img img { width: 100%; height: 100%; object-fit: contain; }
.pv-sc-img .pv-sc-ph, html.cp-v2 .pv-sc-img .pv-sc-ph { display: none; }
.pv-sc-img img.is-bad { display: none; }
.pv-sc-img img.is-bad ~ .pv-sc-ph, html.cp-v2 .pv-sc-img img.is-bad ~ .pv-sc-ph { display: block; width: var(--ob-icon, 20px); height: var(--ob-icon, 20px); color: var(--ob-dim, currentColor); }
.pv-sc-n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; overflow-wrap: anywhere; }
.pv-ql a { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-decoration: none; }
.pv-alarm { text-decoration: none; }
.pv-note { margin: 16px 0 0; }

/* ---- v2 ---- */
html.cp-v2 .pv { max-width: var(--ob-page-max); padding: var(--ob-s-2) 0 var(--ob-s-6); }
html.cp-v2 .pv-cols { gap: var(--ob-s-3); margin-top: var(--ob-s-3); }
html.cp-v2 .pv-box { display: grid; gap: var(--ob-s-1); padding: var(--ob-s-4); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); box-shadow: none; }
html.cp-v2 .pv-head { gap: var(--ob-s-3); }
html.cp-v2 .pv-th { width: 64px; height: 64px; border-radius: var(--ob-r-xs); border: 1px solid var(--ob-line); background: var(--ob-hover); }
html.cp-v2 .pv-eb { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 650; letter-spacing: var(--ob-track-caps); text-transform: uppercase; color: var(--ob-mute); }
html.cp-v2 .pv-tt h1 { font-size: var(--ob-fs-lg); font-weight: 800; line-height: var(--ob-lh-tight); letter-spacing: -0.02em; color: var(--ob-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
html.cp-v2 .pv-meta { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .pv-flat { color: var(--ob-mute); }
html.cp-v2 .pv-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--ob-s-2); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 800; line-height: 1; white-space: nowrap; }
html.cp-v2 .pv-badge.g { color: var(--ob-green); border-color: rgb(var(--ob-green-rgb) / 0.4); background: rgb(var(--ob-green-rgb) / 0.12); }
html.cp-v2 .pv-badge.x { color: var(--ob-dim); }
html.cp-v2[data-theme="light"] .pv-badge.g { color: var(--ob-green-ink); }
html.cp-v2 .pv-best .v2-big { font-size: var(--ob-fs-xl); }
html.cp-v2 .pv-best-sub { line-height: var(--ob-lh-body); }
html.cp-v2 .pv-best-sub s { color: var(--ob-dim); }
html.cp-v2 .pv-outbox .v2-sm { line-height: var(--ob-lh-body); }
/* Kopf: zwei runde Symbol-Knoepfe (Herz, Glocke) oben rechts, Markup wie cpOfferGroupActsV2 (.v2-ib v2-wish v2-gw / v2-ib v2-gb) */
html.cp-v2 .pv-acts { gap: var(--ob-s-2); }
html.cp-v2 .pv-acts .v2-ib { border-radius: var(--ob-r-pill); border-color: var(--ob-line-2); }
html.cp-v2 .pv-acts .v2-ib.on { color: var(--ob-coral); border-color: rgb(var(--ob-coral-rgb) / 0.45); }
/* Bester Preis: Preis ist klickbar (springt zur Angebotszeile) */
html.cp-v2 .pv-best-go { display: inline-flex; align-items: baseline; margin: 0; padding: 0; border: 0; background: none; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-align: left; text-decoration: underline dotted var(--ob-line-2); text-underline-offset: var(--ob-s-1); cursor: pointer; }
html.cp-v2 .pv-best-go:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; border-radius: var(--ob-r-xs); }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .pv-best-go:hover { color: var(--ob-violet-text); text-decoration-color: currentColor; } }

/* Preisspanne */
html.cp-v2 .pv-range { gap: var(--ob-s-2); }
html.cp-v2 .pv-rtrack { border-radius: var(--ob-r-pill); background: var(--ob-line-2); }
html.cp-v2 .pv-rspan { border-radius: var(--ob-r-pill); background: rgb(var(--ob-aqua-rgb) / 0.45); }
html.cp-v2 .pv-rdot { background: var(--ob-aqua); box-shadow: 0 0 0 2px var(--ob-surface); }
html.cp-v2 .pv-rdot.is-best { background: var(--ob-green); z-index: 1; }
html.cp-v2 .pv-rdot { cursor: pointer; transition: transform var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .pv-rdot:focus-visible { outline: 2px solid var(--ob-ink); outline-offset: 3px; z-index: 2; }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .pv-rdot:hover { transform: scale(1.35); z-index: 2; } }
html.cp-v2 .pv-rmsrp { border-left: 2px dashed var(--ob-dim); }
html.cp-v2 .pv-rl { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-variant-numeric: tabular-nums; color: var(--ob-mute); }
html.cp-v2 .pv-rl.lo { color: var(--ob-green); font-weight: 700; }
html.cp-v2 .pv-rl.m { color: var(--ob-dim); }
html.cp-v2 .pv-side > .pv-range .pv-rl.m { display: none; } /* schmale Spalte: UVP steht im Preis-Kasten, Beschriftung wuerde sich mit dem Tiefstpreis ueberlappen */
html.cp-v2[data-theme="light"] .pv-rl.lo { color: var(--ob-green-ink); }

/* Filterleiste + Zeilen */
html.cp-v2 .pv-fbar { padding-bottom: var(--ob-s-3); }
html.cp-v2 .pv-cnt { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; color: var(--ob-mute); }
html.cp-v2 .pv-rows { gap: var(--ob-s-2); }
html.cp-v2 .pv-fpanel { padding-bottom: var(--ob-s-3); }
html.cp-v2 .pv-empty { padding: var(--ob-s-4) 0; color: var(--ob-mute); font-size: var(--ob-fs-sm); }
html.cp-v2 .pv-row .v2-or-p small { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-mute); white-space: nowrap; }
html.cp-v2 .pv-row.out .v2-or-p > b { color: var(--ob-dim); }
html.cp-v2 .pv-row .pv-badge { min-height: 20px; }
html.cp-v2 .pv-row:focus-within { border-color: rgb(var(--ob-violet-rgb) / 0.55); }
html.cp-v2 .pv-row:focus { outline: none; }
html.cp-v2 .pv-row:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
/* Hervorhebung nach Klick auf Kugel / Bester Preis (offer-page.js setzt .pv-hl fuer 2 s) */
html.cp-v2 .pv-row { transition: border-color var(--ob-dur-2) var(--ob-ease-out), box-shadow var(--ob-dur-2) var(--ob-ease-out); }
/* Holo-Halo (Inhaber 28.10.2026): bunter Verlaufsrand (::before, Maske = nur der Ring) + weicher Farbschein aussen (mehrfarbiger box-shadow) */
html.cp-v2 .pv-row { position: relative; }
html.cp-v2 .pv-row::before { content: ""; position: absolute; inset: -1px; padding: 2px; border-radius: inherit; background: var(--ob-holo); background-size: 300% 300%; pointer-events: none; opacity: 0; transition: opacity var(--ob-dur-3) var(--ob-ease-out);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
html.cp-v2 .pv-row.pv-hl { border-color: transparent;
  box-shadow: -10px 0 26px -6px rgb(var(--ob-holo-sky-rgb) / 0.55), 10px 0 26px -6px rgb(var(--ob-holo-rose-rgb) / 0.5), 0 -8px 24px -8px rgb(var(--ob-holo-purple-rgb) / 0.55), 0 8px 24px -8px rgb(var(--ob-holo-amber-rgb) / 0.45); }
html.cp-v2 .pv-row.pv-hl::before { opacity: 1; animation: cpHoloFlow 2.4s ease infinite; }
@media (prefers-reduced-motion: reduce) { html.cp-v2 .pv-row, html.cp-v2 .pv-rdot, html.cp-v2 .pv-row::before { transition: none; } html.cp-v2 .pv-row.pv-hl::before { animation: none; } html.cp-v2 .pv-rdot:hover { transform: none; } }

/* Verlauf */
html.cp-v2 .pv-chart { gap: var(--ob-s-2); }
html.cp-v2 :is(.pv-chart, .pp-contents) .cx-chart-head { display: flex; align-items: center; min-height: var(--ob-tap-min); } /* Platz fuer den Ein-/Ausblende-Knopf, auch eingeklappt */
html.cp-v2 .pv-chart .cp-range-seg { justify-self: start; }
html.cp-v2 .pv-chg { min-height: 1.4em; font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; color: var(--ob-mute); }
html.cp-v2 .pv-chg:empty { display: none; }
html.cp-v2 .pv-grid { stroke: var(--ob-line); stroke-width: 1; }
html.cp-v2 .pv-line { stroke: var(--ob-aqua); stroke-width: 2; stroke-linejoin: round; }
html.cp-v2 .pv-med { stroke: var(--ob-violet); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
html.cp-v2 .pv-g0 { stop-color: var(--ob-aqua); stop-opacity: 0.22; }
html.cp-v2 .pv-g1 { stop-color: var(--ob-aqua); stop-opacity: 0; }
html.cp-v2 .pv-dot { width: 8px; height: 8px; background: var(--ob-aqua); box-shadow: 0 0 0 5px rgb(var(--ob-aqua-rgb) / 0.22); }
html.cp-v2 .pv-tag { padding: 0 var(--ob-s-2); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-xs); background: var(--ob-bg); color: var(--ob-mute); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; line-height: 1.5; }
html.cp-v2 .pv-tag.is-now { background: rgb(var(--ob-aqua-rgb) / 0.16); border-color: rgb(var(--ob-aqua-rgb) / 0.5); color: var(--ob-ink); }
html.cp-v2 .pv-leg { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .pv-leg .pv-leg-low::before { border-top-color: var(--ob-aqua); }
html.cp-v2 .pv-leg .pv-leg-med::before { border-top-color: var(--ob-violet); }
html.cp-v2 .pv-axis { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 .pv-hint { color: var(--ob-mute); font-size: var(--ob-fs-sm); }

/* Preisalarm (Haupt-Button) */
html.cp-v2 .pv-alarm { display: flex; align-items: center; justify-content: center; gap: var(--ob-s-2); min-height: var(--ob-tap); padding: 0 var(--ob-s-4); border: 0; border-radius: var(--ob-r-sm); background: var(--ob-accent-btn); color: rgb(var(--ob-white-rgb)); font: inherit; font-size: var(--ob-fs-md); font-weight: 800; cursor: pointer; }
html.cp-v2 .pv-alarm .ob-icon { width: var(--ob-icon-sm); height: var(--ob-icon-sm); }
html.cp-v2 .pv-alarm:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .pv-alarm:hover { filter: brightness(1.1); } }

/* Sprachversionen */
html.cp-v2 .pv-langs { display: grid; gap: var(--ob-s-2); }
html.cp-v2 .pv-chip { display: inline-flex; align-items: center; gap: var(--ob-s-2); min-height: var(--ob-tap-min); padding: 0 var(--ob-s-3); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: var(--ob-field); color: var(--ob-ink); font-size: var(--ob-fs-sm); text-decoration: none; }
html.cp-v2 .pv-chip b { font-family: var(--cp-font-mono); font-weight: 800; }
html.cp-v2 .pv-chip span { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-mute); white-space: nowrap; }
html.cp-v2 .pv-chip:focus-visible, html.cp-v2 .pv-sc:focus-visible, html.cp-v2 .pv-ql a:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }

/* Aehnliche Produkte (wischbare Karten) */
html.cp-v2 .pv-sim { display: grid; gap: var(--ob-s-2); min-width: 0; }
html.cp-v2 .pv-sc { padding: var(--ob-s-2); border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-surface); color: var(--ob-ink); }
html.cp-v2 .pv-sc-img { border-radius: var(--ob-r-xs); background: var(--ob-hover); }
html.cp-v2 .pv-sc-n { font-size: var(--ob-fs-sm); font-weight: 650; line-height: 1.25; }
html.cp-v2 .pv-sc-p { font-family: var(--cp-font-mono); font-size: var(--ob-fs-md); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.cp-v2 .pv-sc-s { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-mute); }

/* Quick Links */
html.cp-v2 .pv-ql { gap: 0; padding: var(--ob-s-3) var(--ob-s-2) var(--ob-s-1); }
html.cp-v2 .pv-ql .v2-lbl { padding: 0 var(--ob-s-2) var(--ob-s-2); }
html.cp-v2 .pv-ql a { min-height: var(--ob-tap); padding: 0 var(--ob-s-2); border-top: 1px solid var(--ob-line); border-radius: var(--ob-r-xs); color: var(--ob-ink); font-size: var(--ob-fs-md); }
html.cp-v2 .pv-ql .v2-lbl + a { border-top: 0; }
html.cp-v2 .pv-ql a .ob-icon { color: var(--ob-dim); }
@media (hover: hover) and (pointer: fine) {
  html.cp-v2 .pv-ql a:hover { background: var(--ob-hover); }
  html.cp-v2 .pv-chip:hover, html.cp-v2 .pv-sc:hover { border-color: rgb(var(--ob-violet-rgb) / 0.55); }
}
html.cp-v2 .pv-note { color: var(--ob-dim); font-size: var(--ob-fs-xs); }
html.cp-v2 .pv-nf { margin-top: var(--ob-s-4); max-width: var(--ob-read-max); }
html.cp-v2 .pv-nf h1 { margin: 0; font-size: var(--ob-fs-lg); color: var(--ob-ink); }
html.cp-v2 .pv-nf p { margin: 0; color: var(--ob-mute); }
html.cp-v2 .pv-nf .pv-alarm { display: inline-flex; width: auto; }

/* Handy: Filterleiste haftet oben, Titel bis 2 Zeilen */
@media (max-width: 899px) {
  /* Reihe Bester Preis (1/3) | Preisspanne (2/3): .pv-cols wird Grid, .pv-side/.pv-main bleiben display: contents, alle Bloecke sind direkte Grid-Items */
  html.cp-v2 .pv-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--ob-s-3); align-items: stretch; }
  html.cp-v2 .pv-cols > .pv-side > *, html.cp-v2 .pv-cols > .pv-main > * { grid-column: 1 / -1; min-width: 0; }
  html.cp-v2 .pv-cols:has(.pv-range) .pv-best { grid-column: 1; }
  html.cp-v2 .pv-cols:has(.pv-best:not(.pv-outbox)) .pv-range { grid-column: 2; }
  html.cp-v2 .pv-best .v2-big { font-size: var(--ob-fs-lg); }
  html.cp-v2 .pv-best-row { flex-direction: column; align-items: flex-start; gap: var(--ob-s-1); }
  html.cp-v2 .pv-best .v2-sm, html.cp-v2 .pv-range .v2-sm { font-size: var(--ob-fs-xs); }
  html.cp-v2 .pv-rl.m { display: none; }
  html.cp-v2 .pv-fbar { position: sticky; top: calc(var(--ob-s-8) + var(--ob-s-2)); z-index: var(--ob-z-sticky); margin: 0; padding: var(--ob-s-2) 0; background: var(--ob-bg); box-shadow: 0 1px 0 var(--ob-line); }
  html.cp-v2 .pv-rows { margin-top: var(--ob-s-2); }
  html.cp-v2 .pv-best { padding: var(--ob-s-3) var(--ob-s-4); }
}
@media (max-width: 600px) {
  html.cp-v2 .pv-row .v2-or-p { min-width: 0; }
  html.cp-v2 .pv-row .v2-or-p small { white-space: normal; overflow-wrap: anywhere; }
  html.cp-v2 .pv-fbar .pv-sort { min-height: var(--ob-tap); }
  html.cp-v2 .pv-row .v2-or-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  html.cp-v2 .pv-chart { padding: var(--ob-s-3) var(--ob-s-4); }
}
@media (max-width: 365px) {
  html.cp-v2 .pv-best .v2-big { font-size: var(--ob-fs-lg); }
  html.cp-v2 .pv-box { padding: var(--ob-s-3); }
}

/* Desktop: zwei Spalten, links fest beim Scrollen */
@media (min-width: 900px) {
  html.cp-v2 .pv-cols { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--ob-s-6); align-items: start; }
  html.cp-v2 .pv-side { display: grid; gap: var(--ob-s-3); min-width: 0; position: sticky; top: calc(var(--ob-s-8) + var(--ob-s-6) + var(--ob-s-3)); max-height: calc(100dvh - var(--ob-s-8) - var(--ob-s-8)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  html.cp-v2 .pv-side::-webkit-scrollbar { display: none; }
  html.cp-v2 .pv-main { display: grid; gap: var(--ob-s-3); min-width: 0; align-content: start; }
  html.cp-v2 .pv-tt h1 { font-size: var(--ob-fs-xl); }
  html.cp-v2 .pv-fbar { padding-bottom: var(--ob-s-3); }
  /* kompakter: Bild 56 px, Boxen s3 */
  html.cp-v2 .pv-head { grid-template-columns: 56px minmax(0, 1fr); gap: var(--ob-s-3); }
  html.cp-v2 .pv-head:has(> .pv-acts) { grid-template-columns: 56px minmax(0, 1fr) auto; }
  html.cp-v2 .pv-th { width: 56px; height: 56px; }
  html.cp-v2 .pv-box { padding: var(--ob-s-3); }
  html.cp-v2 .pv-ql { padding: var(--ob-s-2) var(--ob-s-2) var(--ob-s-1); }
  /* Reihenfolge Desktop: je Spalte eigener Grid-Container, order gilt nur innerhalb */
  .pv-side > .pv-head { order: 1; }
  .pv-side > .pp-chips { order: 2; }
  .pv-side > .pv-best { order: 3; }
  .pv-side > .pv-range { order: 4; }
  .pv-side > .pv-chart { order: 5; }
  .pv-side > .pv-ql { order: 6; }
  .pv-main > .pp-intro { order: 0; }
  .pv-main > .pp-contents { order: 1; }
  .pv-main > .pv-list, .pv-main > .pp-offers { order: 2; }
  .pv-main > .pp-usd { order: 3; }
  .pv-main > .pv-langs { order: 4; }
  .pv-main > .pp-more, .pv-main > .pv-more { order: 5; }
  .pv-main > .pv-sim { order: 6; }
}

/* ---- Umbau Produktseite (Paket P-C, Schalter PV_LAYOUT2 in worker/offer.js): alles unter .pv2 bzw. nur in neuem Markup (.pv-fs-ov, .pv-grp, .pv-grow) ---- */
/* Kopf kompakt: Bild 44 px, Titel --ob-fs-lg (auch Desktop), Herz/Glocke mittig */
html.cp-v2 .pv2 .pv-head { grid-template-columns: 44px minmax(0, 1fr); gap: var(--ob-s-3); align-items: center; }
html.cp-v2 .pv2 .pv-head:has(> .pv-acts) { grid-template-columns: 44px minmax(0, 1fr) auto; }
html.cp-v2 .pv2 .pv-acts { align-self: center; }
html.cp-v2 .pv2 .pv-th { width: 44px; height: 44px; }
html.cp-v2 .pv2 .pv-tt h1 { font-size: var(--ob-fs-lg); line-height: var(--ob-lh-tight); }

/* Zgrupowane-Knopf: Optik wie v2-chip, an = .on / aria-pressed */
html.cp-v2 .pv-grp[aria-pressed="true"] { border-color: rgb(var(--ob-violet-rgb) / 0.55); background: rgb(var(--ob-violet-rgb) / 0.12); color: var(--ob-ink); }
html.cp-v2 .pv-grp:focus-visible, html.cp-v2 .pv2 .pv-filt:focus-visible, html.cp-v2 .pv-fs .v2-chip:focus-visible, html.cp-v2 .pv-grp-back:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }

/* Gruppenzeile: echter Knopf "Einzeln anzeigen" (.pv-grp-back) fuer Tastatur/Screenreader; Klick auf die Zeile (Maus) macht dasselbe per JS */
html.cp-v2 .pv2 .pv-grow { position: relative; cursor: pointer; }
html.cp-v2 .pv2 .pv-grow .pv-grp-back { justify-self: start; align-self: start; margin-top: var(--ob-s-1); }
html.cp-v2 .pv2 .pv-grow:focus-within { border-color: rgb(var(--ob-violet-rgb) / 0.55); }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .pv2 .pv-grow:hover { border-color: rgb(var(--ob-violet-rgb) / 0.55); } }

/* Filter-Fenster (#pvFs): Handy Bottom-Sheet, ab 900 px Popup. Optik wie die Filter-Ebene der Suche (v2.css .cp-sp2-lvl-*) */
body.pv-fs-lock { overflow: hidden; }
.pv-fs-ov { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.pv-fs-ov[hidden] { display: none; }
.pv-fs { width: 100%; display: flex; flex-direction: column; min-height: 0; }
.pv-fs-grab { flex: none; box-sizing: content-box; width: 40px; height: 5px; margin: 0 auto; padding: var(--ob-s-3) 0; touch-action: none; } /* Trefferflaeche 29 px + Kopf-Wisch; Strich nur der Inhalt */
.pv-fs-h { flex: none; display: flex; align-items: center; gap: var(--ob-s-1); }
.pv-fs-h b { flex: 1; min-width: 0; }
.pv-fs-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.pv-fs-g, .pv-fs-c { display: flex; flex-wrap: wrap; }
.pv-fs-g { flex-direction: column; flex-wrap: nowrap; }
.pv-sw { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-3); cursor: pointer; }
.pv-sw .settings-switch { position: relative; display: inline-block; width: 34px; height: 19px; flex: none; }
.pv-sw .settings-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pv-sw .settings-switch-slider { position: absolute; inset: 0; pointer-events: none; }
.pv-sw .settings-switch-slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; }
.pv-sw .settings-switch input:checked + .settings-switch-slider::before { transform: translateX(15px); }
.pv-fs-f { flex: none; }
.pv-fs-go { width: 100%; cursor: pointer; }
html.cp-v2 .pv-fs-ov { z-index: var(--ob-z-sheet); background: var(--ob-backdrop); }
html.cp-v2 .pv-fs { max-height: var(--ob-sheet-max); border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; background: var(--ob-pop); border-top: 1px solid var(--ob-line-2); color: var(--ob-ink); overflow: hidden; }
html.cp-v2 .pv-fs-grab { border-radius: var(--ob-r-pill); background: var(--ob-line-2); background-clip: content-box; } /* nach dem background-Kurzwert, sonst zurueckgesetzt */
html.cp-v2 .pv-fs-h { padding: var(--ob-s-2) var(--ob-s-2) var(--ob-s-2) var(--ob-s-1); border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .pv-fs-h b { font-size: var(--ob-fs-base); font-weight: 800; color: var(--ob-ink); }
html.cp-v2 .pv-fs-h .pv-fs-x { width: var(--ob-tap); height: var(--ob-tap); display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-ink); cursor: pointer; }
html.cp-v2 .pv-fs-reset { min-height: var(--ob-tap); padding: 0 var(--ob-s-3); border: 0; background: none; color: var(--ob-violet-text); font: inherit; font-size: var(--ob-fs-sm); font-weight: 700; cursor: pointer; }
html.cp-v2 .pv-fs-b { gap: var(--ob-s-4); padding: var(--ob-s-3) var(--ob-gutter) var(--ob-s-4); overscroll-behavior: contain; }
html.cp-v2 .pv-fs-g { gap: var(--ob-s-2); }
html.cp-v2 .pv-fs-l { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ob-dim); }
html.cp-v2 .pv-fs-c { gap: var(--ob-s-2); }
html.cp-v2 .pv-fs-c .v2-chip { min-height: var(--ob-tap-min); padding: 0 var(--ob-s-4); background: transparent; color: var(--ob-ink); font-weight: 600; text-decoration: none; }
html.cp-v2 .pv-fs-c .v2-chip:is(.on, [aria-pressed="true"]) { border-color: rgb(var(--ob-violet-rgb) / 0.5); background: rgb(var(--ob-violet-rgb) / 0.14); font-weight: 700; }
html.cp-v2 .pv-sw { min-height: var(--ob-tap); font-size: var(--ob-fs-md); color: var(--ob-ink); }
html.cp-v2 .pv-sw .settings-switch-slider { border-radius: var(--ob-r-pill); background: var(--ob-line-2) !important; transition: background var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .pv-sw .settings-switch-slider::before { background: rgb(var(--ob-white-rgb)) !important; transition: transform var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .pv-sw .settings-switch input:checked + .settings-switch-slider { background: var(--ob-violet) !important; }
html.cp-v2 .pv-sw .settings-switch input:checked + .settings-switch-slider::before { background: rgb(var(--ob-white-rgb)) !important; }
html.cp-v2[data-theme="light"] .pv-sw .settings-switch-slider { background: var(--ob-dim) !important; } /* hell: Aus-Track klar sichtbar; theme-light.css setzt .settings-switch-slider mit !important */
html.cp-v2[data-theme="light"] .pv-sw .settings-switch input:checked + .settings-switch-slider { background: var(--ob-violet) !important; }
html.cp-v2 .pv-sw:has(input:focus-visible) .settings-switch { outline: 2px solid var(--ob-aqua); outline-offset: 2px; border-radius: var(--ob-r-pill); }
html.cp-v2 .pv-fs-f { padding: var(--ob-s-3) var(--ob-gutter) calc(var(--ob-s-3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ob-line); }
html.cp-v2 .pv-fs-go { min-height: var(--ob-tap); padding: 0 var(--ob-s-4); border: 0; border-radius: var(--ob-r-sm); background: var(--ob-accent-btn); color: rgb(var(--ob-white-rgb)); font: inherit; font-size: var(--ob-fs-md); font-weight: 800; }
html.cp-v2 .pv-fs-x:focus-visible, html.cp-v2 .pv-fs-reset:focus-visible, html.cp-v2 .pv-fs-go:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .pv-fs-go:hover { filter: brightness(1.1); } html.cp-v2 .pv-fs-x:hover { background: var(--ob-hover); } }
@media (prefers-reduced-motion: no-preference) {
  html.cp-v2 .pv-fs-ov:not([hidden]) .pv-fs { animation: pvFsUp var(--ob-dur-2) var(--ob-ease-drawer); }
}
@keyframes pvFsUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pvFsIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 365px) {
  html.cp-v2 .pv-fs-b, html.cp-v2 .pv-fs-f { padding-left: var(--ob-gutter-sm); padding-right: var(--ob-gutter-sm); }
}
@media (min-width: 900px) {
  html.cp-v2 .pv-fs-ov { align-items: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  html.cp-v2 .pv-fs { max-width: var(--ob-pop-w-s); max-height: 85dvh; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); box-shadow: var(--ob-shadow-2); }
  html.cp-v2 .pv-fs-grab { display: none; }
  html.cp-v2 .pv-fs-b { padding: var(--ob-s-4) var(--ob-s-5); }
  html.cp-v2 .pv-fs-f { padding: var(--ob-s-3) var(--ob-s-5) var(--ob-s-4); }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.cp-v2 .pv-fs-ov:not([hidden]) .pv-fs { animation: pvFsIn var(--ob-dur-1) var(--ob-ease-out); }
}
@media (max-width: 899px) { .pv-fs-ov { padding: 0; } }

/* Desktop (ab 900 px) im Umbau: linke Spalte nicht mehr haftend (F2), Reihenfolge Kopf, Chips, Best, Range, Chart, Alarm, Zawartosc, Quick Links */
@media (min-width: 900px) {
  html.cp-v2 .pv2.pp .pv-side { position: static; max-height: none; overflow: visible; }
  html.cp-v2 .pv2 .pv-tt h1 { font-size: var(--ob-fs-lg); }
  html.cp-v2 .pv2 .pv-head { grid-template-columns: 44px minmax(0, 1fr); }
  html.cp-v2 .pv2 .pv-head:has(> .pv-acts) { grid-template-columns: 44px minmax(0, 1fr) auto; }
  html.cp-v2 .pv2 .pv-th { width: 44px; height: 44px; }
  html.cp-v2 .pv2 .pv-side > .pv-head { order: 1; }
  html.cp-v2 .pv2 .pv-side > .pp-chips { order: 2; }
  html.cp-v2 .pv2 .pv-side > .pv-best { order: 3; }
  html.cp-v2 .pv2 .pv-side > .pv-range { order: 4; }
  html.cp-v2 .pv2 .pv-side > .pv-chart { order: 5; }
  html.cp-v2 .pv2 .pv-side > .pv-alarm { order: 6; }
  html.cp-v2 .pv2 .pv-side > .pp-contents { order: 7; }
  html.cp-v2 .pv2 .pv-side > .pv-ql { order: 8; }
}

/* ---- v1-Notfall-Rueckfall (schlichte Darstellung, keine v2-Tokens) ---- */
html:not(.cp-v2) .pv { --pv-r: 10px; }
html:not(.cp-v2) .pv-box { padding: 12px; border: 1px solid var(--card-border); border-radius: var(--pv-r); }
html:not(.cp-v2) .pv-cols, html:not(.cp-v2) .pv-side, html:not(.cp-v2) .pv-main { gap: 12px; }
html:not(.cp-v2) .pv-th { width: 64px; height: 64px; }
html:not(.cp-v2) .pv-tt h1 { font-size: 1.25rem; color: var(--text); }
html:not(.cp-v2) .pv-eb, html:not(.cp-v2) .pv-meta, html:not(.cp-v2) .pv-cnt, html:not(.cp-v2) .pv-axis, html:not(.cp-v2) .pv-leg, html:not(.cp-v2) .pv-note, html:not(.cp-v2) .pv-rl { font-size: 0.75rem; color: var(--text-dim); }
html:not(.cp-v2) .v2-lbl { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; }
html:not(.cp-v2) .v2-big { font-size: 1.6rem; font-weight: 800; color: var(--poke-yellow); }
html:not(.cp-v2) .pv-rtrack { background: var(--card-border); }
html:not(.cp-v2) .pv-rspan, html:not(.cp-v2) .pv-rdot { background: var(--poke-cyan); }
html:not(.cp-v2) .pv-rdot.is-best { background: var(--success); }
html:not(.cp-v2) .pv-line { stroke: var(--poke-cyan); stroke-width: 2; }
html:not(.cp-v2) .pv-med { stroke: var(--poke-yellow); stroke-width: 2; stroke-dasharray: 5 4; }
html:not(.cp-v2) .pv-g0 { stop-color: var(--poke-cyan); stop-opacity: 0.3; }
html:not(.cp-v2) .pv-g1 { stop-color: var(--poke-cyan); stop-opacity: 0; }
html:not(.cp-v2) .pv-grid { stroke: var(--card-border); }
html:not(.cp-v2) .pv-dot { width: 8px; height: 8px; background: var(--poke-cyan); }
html:not(.cp-v2) .pv-tag { padding: 0 6px; border: 1px solid var(--card-border); border-radius: var(--pv-r); background: var(--card-bg); color: var(--text); font-size: 0.75rem; }
html:not(.cp-v2) .pv-alarm, html:not(.cp-v2) .pv-chip, html:not(.cp-v2) .pv-sc { padding: 8px 14px; border: 1px solid var(--card-border); border-radius: var(--pv-r); background: none; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
html:not(.cp-v2) .pv-ql a { padding: 10px 0; color: var(--text); border-top: 1px solid var(--card-border); }
html:not(.cp-v2) .v2-or { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--card-border); border-radius: var(--pv-r); }
html:not(.cp-v2) .v2-or-th { width: 56px; height: 56px; flex: none; }
html:not(.cp-v2) .v2-or-th img { width: 100%; height: 100%; object-fit: contain; }
html:not(.cp-v2) .v2-or-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html:not(.cp-v2) .v2-or-t { color: var(--text); font-weight: 700; text-decoration: none; }
html:not(.cp-v2) .v2-or-p b { color: var(--poke-yellow); }
html:not(.cp-v2) .v2-or-a { display: flex; gap: 6px; }
html:not(.cp-v2) .v2-or.out { opacity: 0.6; }
/* v1: Filter-Fenster schlicht sichtbar und bedienbar (nur neues Markup) */
html:not(.cp-v2) .pv-fs-ov { --pv-r: 10px; z-index: 3000; background: rgb(var(--ob-black-rgb, 0 0 0) / 0.55); }
html:not(.cp-v2) .pv-fs { max-width: 480px; max-height: 85vh; background: var(--card-bg); color: var(--text); border: 1px solid var(--card-border); border-radius: var(--pv-r) var(--pv-r) 0 0; overflow: hidden; }
html:not(.cp-v2) .pv-fs-h, html:not(.cp-v2) .pv-fs-b, html:not(.cp-v2) .pv-fs-f { padding: 10px 14px; }
html:not(.cp-v2) .pv-fs-b { gap: 14px; }
html:not(.cp-v2) .pv-fs-c { gap: 8px; }
html:not(.cp-v2) .pv-fs-grab { display: none; }
html:not(.cp-v2) .pv-fs-x, html:not(.cp-v2) .pv-fs-reset, html:not(.cp-v2) .pv-fs-go { padding: 8px 14px; border: 1px solid var(--card-border); border-radius: var(--pv-r); background: none; color: var(--text); font: inherit; font-weight: 700; }
html:not(.cp-v2) .pv-fs-l { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; }
html:not(.cp-v2) .pv-sw .settings-switch-slider { background: var(--card-border); border-radius: var(--pv-r); }
html:not(.cp-v2) .pv-sw .settings-switch-slider::before { background: #fff; }
html:not(.cp-v2) .pv-sw .settings-switch input:checked + .settings-switch-slider { background: var(--poke-cyan); }
@media (min-width: 900px) { html:not(.cp-v2) .pv-fs-ov { align-items: center; } html:not(.cp-v2) .pv-fs { border-radius: var(--pv-r); } }