/* ==========================================================================
   CARDPULSE TCG - UI v2 (Basis-Komponenten; Design-Schicht "Obsidian Spatial" unten) (nur Beta/Admin, nur wenn Footer-Schalter an)
   Alles unter html.cp-v2. Schriften: Plus Jakarta Sans (style.css) und JetBrains Mono (unten) sind selbst gehostet - keine Google-Fonts (CSP/DSGVO).
   ========================================================================== */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   DESIGN-TOKENS v2 (eine Quelle fuer dunkel + hell). Neue Regeln nutzen nur diese Namen.
   Transparenzen: rgb(var(--ob-violet-rgb) / 0.18) statt rgba-Kopien. Alte Namen (--cp-*, --card-bg, --poke-*) bleiben als Verweis.
   Ausnahme Handy: --ob-r / --ob-r-lg werden unten im Abschnitt "Responsiv & Bewegung" verkleinert.
   ========================================================================== */
html.cp-v2 {
  /* Flaechen, Schrift, Linien (dunkel; hell weiter unten) */
  --ob-bg: #06070d; --ob-surface: #0e1020; --ob-pop: #0d0f1f; --ob-glass: rgba(12, 14, 26, 0.82);
  --ob-field: rgba(255, 255, 255, 0.05); --ob-hover: rgba(255, 255, 255, 0.09);
  --ob-ink: #f5f6fb; --ob-mute: #a0a6c0; --ob-dim: #7a81a0;
  --ob-line: rgba(255, 255, 255, 0.09); --ob-line-2: rgba(255, 255, 255, 0.16);
  --ob-card: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));

  /* Akzente: ein Akzent je Widget. Violett = Marke, Aqua = Info/Zahlen, Koralle = Hot/Alarm, Gruen = Preis faellt, Bernstein = Hinweis/PreOrder */
  --ob-violet: #7c5cff; --ob-indigo: #4f46e5; --ob-aqua: #22d3ee; --ob-coral: #ff5c8a; --ob-amber: #ffc857; --ob-green: #34d399;
  /* Akzent-Textfarben fuer helles Theme (lesbar auf Porzellan) */
  --ob-violet-ink: #5b3fe0; --ob-aqua-ink: #0e7490; --ob-coral-ink: #c81e6a; --ob-green-ink: #047857; --ob-amber-ink: #b45309;
  /* Holo-Familie: nur Herzlinie, Logo, Holo-Raender */
  --ob-holo-sky: #38bdf8; --ob-holo-purple: #a855f7; --ob-holo-rose: #f43f5e; --ob-holo-emerald: #10b981; --ob-holo-amber: #fbbf24;
  --ob-holo: linear-gradient(125deg, #38bdf8 0%, #a855f7 30%, #f43f5e 60%, #fbbf24 85%, #10b981 100%);

  /* RGB-Kanaele fuer Transparenzen (in beiden Themes gleich) */
  --ob-white-rgb: 255 255 255; --ob-black-rgb: 0 0 0; --ob-tint-rgb: 70 60 140;
  --ob-violet-rgb: 124 92 255; --ob-aqua-rgb: 34 211 238; --ob-coral-rgb: 255 92 138; --ob-green-rgb: 52 211 153; --ob-amber-rgb: 255 200 87;
  --ob-holo-sky-rgb: 56 189 248; --ob-holo-purple-rgb: 168 85 247; --ob-holo-rose-rgb: 244 63 94; --ob-holo-emerald-rgb: 16 185 129; --ob-holo-amber-rgb: 251 191 36;

  /* Verlaeufe */
  --ob-accent: linear-gradient(120deg, #7c5cff 0%, #4f8cff 48%, #22d3ee 100%);
  /* Flaechen mit weisser Schrift (Buttons, aktive Chips, Badges): Kontrast >= 4,5 : 1 auf dem ganzen Verlauf */
  --ob-accent-btn: linear-gradient(120deg, #6a4cf0 0%, #3b6fe0 55%, #0e7490 100%);
  /* Violett als Schrift: dunkel #8f74ff (5,5 : 1), hell = --ob-violet-ink */
  --ob-violet-text: #8f74ff;
  --ob-warm: linear-gradient(120deg, #6a4ee0 0%, #8b4fe0 52%, #b440bd 100%);
  --ob-title: linear-gradient(115deg, #ffffff 0%, #d9ddff 38%, #8fb4ff 68%, #5eead4 100%);
  --ob-glow: rgba(124, 92, 255, 0.55);

  /* Form: Radien, Schrift, Abstaende, Bewegung */
  /* --ob-r und --ob-r-lg schrumpfen auf dem Handy (Karten/Panels); --ob-r-tile bleibt immer 22px */
  --ob-r-xs: 8px; --ob-r-sm: 12px; --ob-r-md: 16px; --ob-r-tile: 22px; --ob-r: 22px; --ob-r-lg: 30px; --ob-r-pill: 999px;
  --ob-fs-2xs: 0.75rem; --ob-fs-xs: 0.75rem; --ob-fs-sm: 0.8rem; --ob-fs-md: 0.88rem; --ob-fs-base: 1rem; --ob-fs-lg: 1.3rem; --ob-fs-xl: 1.7rem; --ob-fs-display: 2.3rem;
  --ob-s-1: 4px; --ob-s-2: 8px; --ob-s-3: 12px; --ob-s-4: 16px; --ob-s-5: 20px; --ob-s-6: 24px; --ob-s-7: 32px; --ob-s-8: 48px;
  --ob-shadow-1: 0 18px 40px -26px rgba(0, 0, 0, 0.7); --ob-shadow-2: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
  --cp-ease: cubic-bezier(0.22, 0.9, 0.24, 1); --ob-dur-1: 150ms; --ob-dur-2: 250ms; --ob-dur-3: 400ms;
  --ob-dur-4: 800ms; /* nur Spiel-Effekte (Battle of Cards: Verbrennen), dunkel + hell gleich */
  --ob-loop-sip: 3.6s; --ob-loop-steam: 2.4s; /* nur Spenden-Dialog: Tasse trinkt (Schluck-Takt), Dampf (Inhaber 26.10.2026) */
  /* Banner-Kachel (Spiele-Uebersicht): immer dunkel, in beiden Themes gleich (Styleguide Battle of Cards > Banner-Kachel) */
  --ob-banner-bg: #06070d; --ob-banner-ink: #f5f6fb; --ob-banner-mute: #a0a6c0; --ob-banner-line: rgba(255, 255, 255, 0.16); --ob-banner-field: rgba(255, 255, 255, 0.05);
  /* Handy/Touch (Breakpoints fest: max 365 / max 600 / max 899 / min 900 px - siehe Styleguide) */
  /* Seitenbreite: Raster/Listen breit, Lesetext schmal */
  --ob-page-max: 1320px; --ob-read-max: 840px;
  /* Popup (Desktop ab 900 px) / Bottom-Sheet darunter - siehe Styleguide */
  --ob-pop-w-s: 480px; --ob-pop-w-m: 640px; --ob-pop-w-l: 880px; --ob-backdrop: rgba(4, 5, 12, 0.55);
  /* Icons: Lucide-Sprite /assets/icons/sprite.svg, einfarbig ueber currentColor */
  --ob-icon-sm: 16px; --ob-icon: 20px; --ob-icon-stroke: 1.75;
  /* Bewegung (zusaetzlich zu --cp-ease / --ob-dur-1..3) */
  --ob-ease-in: cubic-bezier(0.4, 0, 1, 1); /* nur Ausblenden */
  --ob-ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* Erscheinen, Hover, Druecken */ --ob-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* Sheets, Menue */ --ob-ease-io: cubic-bezier(0.77, 0, 0.175, 1); /* starkes Ein-Aus (Battle of Cards: Kampf, Umdrehen) */
  --ob-lh-tight: 1.15; --ob-lh-body: 1.5; --ob-track-caps: 0.1em;
  /* Bilder: Formate und Vorschaugroessen */
  --ob-ratio-card: 63 / 88; --ob-ratio-product: 1 / 1; --ob-ratio-banner: 16 / 9; --ob-ratio-og: 1200 / 630;
  --ob-thumb-s: 48px; --ob-thumb-m: 72px; --ob-thumb-l: 120px; --ob-grid-min: 160px;
  /* Ebenen (von unten nach oben) */
  --ob-z-raised: 10; --ob-z-sticky: 100; --ob-z-header: 2500; --ob-z-dropdown: 2700; --ob-z-sheet: 3000; --ob-z-toast: 6000; --ob-z-cookie: 9000; --ob-z-top: 10000;
  --ob-tap: 44px; --ob-tap-min: 36px; --ob-gutter: 16px; --ob-gutter-sm: 12px; --ob-fs-input: 16px; --ob-sheet-r: 22px; --ob-sheet-max: 92dvh;
  --cp-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cp-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Alte Namen (Basis-Schicht und v1-Bruecke) - nur noch Verweise */
  --cp-bg-deep: #060911; --cp-bg-main: #0a0f1d; --cp-bg-glass: rgba(17, 25, 45, 0.65); --cp-bg-elevated: rgba(14, 16, 28, 0.62);
  --cp-text-main: var(--ob-ink); --cp-text-muted: var(--ob-mute); --cp-text-dim: #64748b; --cp-border: var(--ob-line);
  --cp-cyan: var(--ob-aqua); --cp-rose: var(--ob-coral); --cp-purple: var(--ob-holo-purple); --cp-emerald: var(--ob-holo-emerald); --cp-amber: var(--ob-holo-amber);
  --cp-holo-grad: var(--ob-accent);
  --cp-banner-bg: linear-gradient(135deg, #14122e, #0b0d1c); --cp-banner-edge: var(--ob-line-2);
  --cp-gloss-lens: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent);
  --card-bg: var(--ob-surface); --card-border: var(--ob-line); --text: var(--ob-ink); --text-dim: var(--ob-mute); --poke-cyan: var(--ob-aqua);
  --poke-yellow: #a78bfa; --poke-gold: #8b5cf6; --poke-blue: #6d5cff;
}
html.cp-v2[data-theme="light"] {
  --ob-bg: #f5f4fb; --ob-surface: #ffffff; --ob-pop: #ffffff; --ob-glass: rgba(255, 255, 255, 0.9);
  --ob-field: rgba(70, 60, 140, 0.06); --ob-hover: rgba(70, 60, 140, 0.1);
  --ob-ink: #12142b; --ob-mute: #55597a; --ob-dim: #676b8a;
  --ob-line: rgba(70, 60, 140, 0.13); --ob-line-2: rgba(70, 60, 140, 0.22);
  --ob-card: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7));
  --ob-title: linear-gradient(115deg, #12142b 0%, #3b2fb5 45%, #0e8fb0 100%);
  --ob-glow: rgba(99, 80, 230, 0.35);
  --ob-violet-text: var(--ob-violet-ink);
  --cp-text-main: #12142b; --cp-text-muted: #55597a; --cp-bg-elevated: rgba(255, 255, 255, 0.72);
  --poke-yellow: #6a4cf0; --poke-gold: var(--ob-violet-ink); --poke-cyan: #0e8fb0; --poke-blue: var(--ob-violet-ink);
  --ob-shadow-1: 0 1px 2px rgba(18, 20, 43, 0.06), 0 10px 28px -14px rgba(18, 20, 43, 0.22); --ob-shadow-2: 0 2px 6px rgba(18, 20, 43, 0.06), 0 24px 48px -20px rgba(18, 20, 43, 0.28);
}

/* ---- Hintergrund: Space-Obsidian + Tech-Grid + Glows ---- */
html.cp-v2 body {
  background-color: var(--cp-bg-deep);
  background-image:
    radial-gradient(circle at 12% 15%, rgb(var(--ob-holo-sky-rgb) / 0.12) 0%, transparent 40%),
    radial-gradient(circle at 88% 20%, rgb(var(--ob-holo-purple-rgb) / 0.12) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, rgb(var(--ob-holo-rose-rgb) / 0.07) 0%, transparent 50%),
    radial-gradient(circle at 20% 95%, rgb(var(--ob-holo-emerald-rgb) / 0.06) 0%, transparent 40%),
    linear-gradient(to right, rgb(var(--ob-white-rgb) / 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--ob-white-rgb) / 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 36px 36px, 36px 36px;
  background-attachment: fixed;
  color: var(--cp-text-main);
  font-family: var(--cp-font-sans);
}

/* ---- 1. Sticky Glass Header ---- */
html.cp-v2 .sticky-top-section {
  background: rgba(6, 9, 17, 0.82);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--cp-border);
  box-shadow: 0 8px 30px -12px rgb(var(--ob-black-rgb) / 0.7);
}
html.cp-v2 .header-logo-text {
  font-weight: 800; letter-spacing: -0.03em;
  background: var(--cp-holo-grad); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: cpHoloFlow 6s ease infinite;
}
html.cp-v2 .header-logo-icon { filter: drop-shadow(0 0 10px rgb(var(--ob-holo-sky-rgb) / 0.45)); animation: cpBeat 1.6s ease-in-out infinite; }
@keyframes cpBeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.12); } 24% { transform: scale(1); } 36% { transform: scale(1.07); } 48% { transform: scale(1); } }
html.cp-v2 .header-country-switch-compact {
  background: rgb(var(--ob-white-rgb) / 0.04); border: 1px solid var(--cp-border); padding: 3px; border-radius: var(--ob-r-sm);
}
html.cp-v2 .country-flag-btn.active { box-shadow: 0 0 0 2px #7c3aed, 0 2px 10px rgba(124, 58, 237, 0.45); }
html.cp-v2 .site-menu-btn { background: rgb(var(--ob-white-rgb) / 0.05); border: 1px solid var(--cp-border); border-radius: var(--ob-r-sm); }

/* ---- 2. Hero (Pulse) ---- */
html.cp-v2 .home-hero {
  position: relative; overflow: hidden; border: 1px solid var(--cp-border); border-radius: var(--ob-r-tile);
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.72), rgba(6, 9, 17, 0.6));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
html.cp-v2 .home-hero::before, html.cp-v2 .home-hero::after { opacity: 0.35; }
html.cp-v2 .home-hero-inner {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2rem; align-items: center; text-align: left;
}
html.cp-v2 .home-hero-inner > * { grid-column: 1; }
html.cp-v2 .home-hero-inner > .cp-3d-stage { grid-column: 2; grid-row: 1 / span 8; }
html.cp-v2 .home-hero-badge { display: none; }
html.cp-v2 .home-hero-eyebrow { font-family: var(--cp-font-mono); color: var(--cp-cyan); letter-spacing: 0.08em; }
html.cp-v2 .home-hero-title {
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.08;
  background: var(--cp-holo-grad); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: cpHoloFlow 5s ease infinite;
}
html.cp-v2 .home-hero-sub { color: var(--cp-text-muted); line-height: 1.6; }
@keyframes cpHoloFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

html.cp-v2 .cp-ecg-bg { position: absolute; inset: 0; pointer-events: none; display: flex; align-items: center; opacity: 0.75; z-index: 1; overflow: hidden; }
html.cp-v2 .cp-ecg-svg { width: 100%; height: 240px; }
html.cp-v2 .cp-ecg-path { stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: cpEcgPulse 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite; filter: drop-shadow(0 0 12px rgb(var(--ob-holo-rose-rgb) / 0.85)) drop-shadow(0 0 24px rgb(var(--ob-holo-sky-rgb) / 0.6)); }
@keyframes cpEcgPulse { 0% { stroke-dashoffset: 1600; opacity: 0.2; } 40% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0.15; } }

html.cp-v2 .cp-live-pill {
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.38rem 0.85rem; border-radius: var(--ob-r-pill);
  background: rgb(var(--ob-green-rgb) / 0.1); border: 1px solid rgb(var(--ob-green-rgb) / 0.35);
  font-family: var(--cp-font-mono); font-size: 0.74rem; color: #a7f3d0; margin-bottom: 1rem; justify-self: start;
}
html.cp-v2 .cp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ob-green); animation: cpDotPulse 1.8s infinite; flex: none; }
@keyframes cpDotPulse { 0% { box-shadow: 0 0 0 0 rgb(var(--ob-green-rgb) / 0.8); } 70% { box-shadow: 0 0 0 9px rgb(var(--ob-green-rgb) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--ob-green-rgb) / 0); } }

/* Command-Suche, Chips, Stats im Hero */
html.cp-v2 .cp-cmd-search {
  display: flex; align-items: center; gap: 0.4rem; background: rgba(11, 17, 32, 0.92); border: 1.5px solid rgb(var(--ob-aqua-rgb) / 0.4); border-radius: var(--ob-r-md);
  padding: 0.4rem 0.4rem 0.4rem 1rem; max-width: 630px; margin: 1.2rem 0 1rem; transition: border-color var(--ob-dur-1) var(--ob-ease-out), box-shadow var(--ob-dur-1) var(--ob-ease-out);
  box-shadow: 0 18px 40px -12px rgb(var(--ob-black-rgb) / 0.75), 0 0 30px -6px rgb(var(--ob-aqua-rgb) / 0.25);
}
html.cp-v2 .cp-cmd-search:focus-within { border-color: var(--cp-rose); box-shadow: 0 18px 45px -10px rgb(var(--ob-black-rgb) / 0.85), 0 0 35px -4px rgb(var(--ob-coral-rgb) / 0.4); }
html.cp-v2 .cp-cmd-search input { flex: 1; min-width: 0; background: transparent; border: none; color: #fff; font-size: 0.95rem; font-family: var(--cp-font-sans); padding: 0.5rem 0.4rem; outline: none; }
html.cp-v2 .cp-kbd { font-family: var(--cp-font-mono); font-size: 0.7rem; color: var(--cp-text-muted); background: rgb(var(--ob-white-rgb) / 0.06); border: 1px solid var(--cp-border); padding: 0.2rem 0.45rem; border-radius: var(--ob-r-xs); }
html.cp-v2 .cp-cmd-search button { background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 55%, #ec4899 100%); color: #fff; border: none; padding: 0.75rem 1.2rem; border-radius: var(--ob-r-sm); font-weight: 800; font-size: var(--ob-fs-md); cursor: pointer; white-space: nowrap; box-shadow: 0 8px 20px -6px rgba(236, 72, 153, 0.6); transition: transform var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .cp-cmd-search button:hover { transform: translateY(-2px); }
html.cp-v2 .cp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1.4rem; }
html.cp-v2 .cp-chips-lbl { font-size: var(--ob-fs-xs); color: var(--cp-text-muted); font-family: var(--cp-font-mono); }
html.cp-v2 .cp-chip { display: inline-block; background: rgb(var(--ob-white-rgb) / 0.045); border: 1px solid rgb(var(--ob-white-rgb) / 0.1); color: #e2e8f0; font-size: 0.78rem; font-weight: 600; font-family: inherit; padding: 0.34rem 0.8rem; border-radius: var(--ob-r-pill); cursor: pointer; text-decoration: none; transition: border-color var(--ob-dur-1) var(--ob-ease-out), background var(--ob-dur-1) var(--ob-ease-out), color var(--ob-dur-1) var(--ob-ease-out), transform var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .cp-chip:hover, html.cp-v2 .cp-chip.active { border-color: var(--cp-cyan); background: rgb(var(--ob-aqua-rgb) / 0.16); color: #fff; transform: translateY(-1px); }
html.cp-v2 .cp-radar-circle { position: absolute; right: 10%; top: 50%; width: 520px; height: 520px; border-radius: 50%; border: 1px dashed rgb(var(--ob-holo-sky-rgb) / 0.18); animation: cpSpin 38s linear infinite; }
html.cp-v2 .cp-radar-circle::before { content: ""; position: absolute; inset: 62px; border-radius: 50%; border: 1px solid rgb(var(--ob-holo-rose-rgb) / 0.15); }
@keyframes cpSpin { from { transform: translateY(-50%) rotate(0); } to { transform: translateY(-50%) rotate(360deg); } }

/* 3D Holo Card Stack */
html.cp-v2 .cp-3d-stage { perspective: 1200px; display: flex; justify-content: center; align-items: center; position: relative; min-height: 430px; }
html.cp-v2 .cp-back-card { position: absolute; width: 290px; min-height: 360px; border-radius: var(--ob-r-tile); background: linear-gradient(145deg, rgba(30, 41, 59, 0.65), rgba(15, 23, 42, 0.8)); border: 1px solid rgb(var(--ob-white-rgb) / 0.12); padding: 1.1rem; pointer-events: none; overflow: hidden; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html.cp-v2 .cp-back-card--left { transform: translateX(-70px) translateY(18px) rotate(-8deg) scale(0.9); border-color: rgb(var(--ob-holo-purple-rgb) / 0.4); box-shadow: -15px 20px 40px rgb(var(--ob-black-rgb) / 0.6); }
html.cp-v2 .cp-back-card--right { transform: translateX(70px) translateY(-16px) rotate(8deg) scale(0.9); border-color: rgb(var(--ob-holo-sky-rgb) / 0.4); box-shadow: 15px 20px 40px rgb(var(--ob-black-rgb) / 0.6); }
html.cp-v2 .cp-bc-lbl { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: #e9d5ff; }
html.cp-v2 .cp-bc-name { font-weight: 800; margin: 0.3rem 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.cp-v2 .cp-bc-img { display: block; width: 100%; height: 150px; object-fit: contain; margin: 0.6rem 0; }
html.cp-v2 .cp-bc-drop { font-family: var(--cp-font-mono); color: var(--ob-green); font-weight: 800; font-size: var(--ob-fs-sm); }
html.cp-v2 .cp-foil-card {
  position: relative; display: block; width: 100%; max-width: 380px; border-radius: var(--ob-r-tile); padding: 3px; color: inherit; text-decoration: none; z-index: 3; --mx: 50%; --my: 50%;
  background: linear-gradient(135deg, var(--ob-holo-sky), var(--ob-holo-purple), var(--ob-holo-rose), var(--ob-holo-amber), var(--ob-holo-emerald)); background-size: 300% 300%; animation: cpHoloFlow 6s ease infinite;
  box-shadow: 0 30px 60px -15px rgb(var(--ob-black-rgb) / 0.85), 0 0 45px -5px rgb(var(--ob-holo-purple-rgb) / 0.45); transform-style: preserve-3d; transition: transform var(--ob-dur-1) var(--ob-ease-out);
}
html.cp-v2 .cp-foil-inner { position: relative; overflow: hidden; background: linear-gradient(165deg, #131c31 0%, #080d1a 100%); border-radius: calc(var(--ob-r-tile) - 3px); padding: 1.3rem; }
html.cp-v2 .cp-glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle at var(--mx) var(--my), rgb(var(--ob-white-rgb) / 0.22), rgb(var(--ob-holo-sky-rgb) / 0.12) 30%, rgb(var(--ob-holo-rose-rgb) / 0.1) 55%, transparent 75%); }
html.cp-v2 .cp-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 0.8rem; }
html.cp-v2 .cp-card-rarity { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 800; color: var(--cp-amber); background: rgb(var(--ob-holo-amber-rgb) / 0.12); border: 1px solid rgb(var(--ob-holo-amber-rgb) / 0.4); padding: 0.2rem 0.55rem; border-radius: var(--ob-r-xs); }
html.cp-v2 .cp-art-window { position: relative; height: 170px; border-radius: var(--ob-r-md); overflow: hidden; margin-bottom: 0.9rem; border: 1px solid rgb(var(--ob-white-rgb) / 0.16); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, rgb(var(--ob-holo-rose-rgb) / 0.3), rgb(var(--ob-holo-sky-rgb) / 0.16) 55%, rgba(10, 15, 29, 0.95) 100%); }
html.cp-v2 .cp-art-sm { height: 140px; background: radial-gradient(circle, rgb(var(--ob-holo-sky-rgb) / 0.16) 0%, rgba(15, 23, 42, 0.5) 75%); }
html.cp-v2 .cp-art-img { position: relative; max-height: 88%; max-width: 70%; object-fit: contain; filter: drop-shadow(0 10px 20px rgb(var(--ob-black-rgb) / 0.6)); animation: cpFloat 3.2s ease-in-out infinite; transition: transform var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .cp-art-sm .cp-art-img { animation: none; max-width: 85%; }
html.cp-v2 .cp-deal-card:hover .cp-art-img { transform: scale(1.07); }
@keyframes cpFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
html.cp-v2 .cp-art-spark { position: absolute; bottom: 0; left: 0; width: 100%; height: 62px; }
html.cp-v2 .cp-hc-name { font-size: 1.1rem; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.cp-v2 .cp-hc-shop { font-size: var(--ob-fs-sm); color: var(--cp-text-muted); margin: 3px 0 0.9rem; }
html.cp-v2 .cp-hc-lbl { font-size: var(--ob-fs-2xs); color: var(--cp-text-muted); letter-spacing: 0.05em; }
html.cp-v2 .cp-hc-was { text-align: right; }
html.cp-v2 .cp-price-box { display: flex; justify-content: space-between; align-items: flex-end; background: rgba(5, 8, 17, 0.65); border: 1px solid var(--cp-border); padding: 0.8rem 1rem; border-radius: var(--ob-r-md); font-family: var(--cp-font-mono); }
html.cp-v2 .cp-price-now { font-size: 1.55rem; font-weight: 800; color: #fff; line-height: 1.1; }
html.cp-v2 .cp-price-now.cp-sm { font-size: var(--ob-fs-lg); }
html.cp-v2 .cp-price-msrp { font-size: 0.78rem; color: var(--cp-text-dim); text-decoration: line-through; }
html.cp-v2 .cp-badge-set, html.cp-v2 .cp-set-lbl { font-family: var(--cp-font-mono); font-size: 0.7rem; font-weight: 700; color: var(--cp-cyan); }
html.cp-v2 .cp-badge-drop { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 800; color: var(--ob-green); background: rgb(var(--ob-green-rgb) / 0.16); border: 1px solid rgb(var(--ob-green-rgb) / 0.35); padding: 0.2rem 0.55rem; border-radius: var(--ob-r-pill); white-space: nowrap; }
html.cp-v2 .cp-pack-calc { font-family: var(--cp-font-mono); font-size: 0.75rem; font-weight: 700; color: var(--cp-cyan); background: rgb(var(--ob-aqua-rgb) / 0.14); border: 1px solid rgb(var(--ob-aqua-rgb) / 0.35); padding: 0.28rem 0.6rem; border-radius: var(--ob-r-xs); white-space: nowrap; }

/* Deal-Grid */
html.cp-v2 .cp-deals { margin: 1.5rem 0 2rem; }
html.cp-v2 .cp-section-hdr { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.3rem; }
html.cp-v2 .cp-eyebrow { font-family: var(--cp-font-mono); font-size: 0.74rem; color: var(--cp-cyan); margin-bottom: 0.3rem; }
html.cp-v2 .cp-eyebrow.cp-rose { color: var(--cp-rose); }
html.cp-v2 .cp-section-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
html.cp-v2 .cp-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
html.cp-v2 .cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
html.cp-v2 .cp-deal-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 0.9rem; color: inherit; text-decoration: none; overflow: hidden;
  background: var(--cp-bg-elevated); border: 1px solid var(--cp-border); border-radius: var(--ob-r-tile); padding: 1.15rem; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: transform var(--ob-dur-2) var(--ob-ease-out), border-color var(--ob-dur-2) var(--ob-ease-out), box-shadow var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .cp-deal-card:hover { transform: translateY(-2px); border-color: var(--cp-cyan); box-shadow: 0 22px 45px -15px rgb(var(--ob-black-rgb) / 0.8), 0 0 30px -8px rgb(var(--ob-aqua-rgb) / 0.3); }
html.cp-v2 .cp-deal-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--ob-dur-2) var(--ob-ease-out); background: linear-gradient(125deg, transparent 25%, rgb(var(--ob-aqua-rgb) / 0.10) 42%, rgb(var(--ob-violet-rgb) / 0.10) 54%, rgb(var(--ob-coral-rgb) / 0.10) 66%, transparent 80%); }
html.cp-v2 .cp-deal-card:hover::after { opacity: 1; }
html.cp-v2 .cp-deal-title { font-size: var(--ob-fs-base); font-weight: 800; margin: 0 0 0.2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.cp-v2 .cp-deal-shop { font-size: var(--ob-fs-sm); color: var(--cp-text-muted); margin: 0; }
html.cp-v2 .cp-empty { color: var(--cp-text-muted); padding: 1rem 0; }
html.cp-v2 .cp-more { display: inline-block; margin-top: 1rem; font-weight: 700; font-size: 0.86rem; color: var(--cp-cyan); text-decoration: none; }
html.cp-v2 .cp-more:hover { color: #fff; }

/* Bento: Binder + Pack-Simulator (Demo-Vorschau) */
html.cp-v2 .cp-bento { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.3rem; margin: 0 0 2rem; }
html.cp-v2 .cp-bento-box { background: var(--cp-bg-elevated); border: 1px solid var(--cp-border); border-radius: var(--ob-r-tile); padding: 1.4rem; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html.cp-v2 .cp-bento-box h3 { font-size: 1.2rem; font-weight: 800; margin: 0.2rem 0 0; }
html.cp-v2 .cp-bento-box p { font-size: 0.85rem; color: var(--cp-text-muted); margin: 0.4rem 0 0; }
html.cp-v2 .cp-bento-hd { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
html.cp-v2 .cp-bento-ft { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
html.cp-v2 .cp-demo { font-family: var(--cp-font-mono); font-size: 0.7rem; color: var(--cp-text-dim); margin-top: 1rem; }
html.cp-v2 .cp-bar { height: 6px; border-radius: 3px; background: rgb(var(--ob-white-rgb) / 0.08); margin: 0.9rem 0 0; overflow: hidden; }
html.cp-v2 .cp-bar i { display: block; height: 100%; background: var(--cp-holo-grad); transition: width var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .cp-binder-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1rem; max-width: 380px; }
html.cp-v2 .cp-binder-slot { aspect-ratio: 2.5 / 3.5; border-radius: var(--ob-r-sm); background: rgb(var(--ob-white-rgb) / 0.04); border: 1px dashed rgb(var(--ob-white-rgb) / 0.15); color: #e2e8f0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; transition: transform var(--ob-dur-1) var(--ob-ease-out), border-color var(--ob-dur-1) var(--ob-ease-out); font-family: inherit; }
html.cp-v2 .cp-binder-slot span { font-family: var(--cp-font-mono); font-size: 0.62rem; margin-top: 4px; }
html.cp-v2 .cp-binder-slot.owned { background: linear-gradient(135deg, rgb(var(--ob-aqua-rgb) / 0.18), rgb(var(--ob-violet-rgb) / 0.18)); border: 1px solid rgb(var(--ob-aqua-rgb) / 0.5); box-shadow: 0 0 18px rgb(var(--ob-aqua-rgb) / 0.15); }
html.cp-v2 .cp-binder-slot:hover { transform: scale(1.04); border-color: var(--cp-rose); }
html.cp-v2 .cp-bento-sim { display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; }
html.cp-v2 .cp-pack { font-size: 5rem; line-height: 1; background: none; border: none; cursor: pointer; margin: 1rem 0; transition: transform var(--ob-dur-2) var(--ob-ease-out); filter: drop-shadow(0 12px 20px rgb(var(--ob-black-rgb) / 0.5)); }
html.cp-v2 .cp-pack:hover { transform: scale(1.08) rotate(-3deg); }
html.cp-v2 .cp-pack.rip { transform: scale(1.28) rotate(12deg); }
html.cp-v2 .cp-sim-res { font-family: var(--cp-font-mono); font-size: 0.85rem; font-weight: 700; color: var(--ob-amber); }

/* ---- 3. Ticker ---- */
html.cp-v2 .cp-ticker {
  display: flex; align-items: center; gap: 0.75rem; margin: 14px 0; padding: 0.5rem 0.9rem; overflow: hidden;
  background: var(--cp-bg-elevated); border: 1px solid var(--cp-border); border-radius: var(--ob-r-sm);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html.cp-v2 .cp-tick-lbl { flex: none; font-family: var(--cp-font-mono); font-size: 0.7rem; font-weight: 800; color: var(--ob-green); letter-spacing: 0.06em; }
html.cp-v2 .cp-tick-wrap { overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
html.cp-v2 .cp-tick-track { display: inline-flex; gap: 2rem; white-space: nowrap; animation: cpTicker 60s linear infinite; padding-right: 2rem; }
html.cp-v2 .cp-ticker:hover .cp-tick-track { animation-play-state: paused; }
html.cp-v2 .cp-tick { font-size: var(--ob-fs-sm); color: #cbd5e1; }
html.cp-v2 .cp-tick b { font-weight: 700; color: #fff; }
html.cp-v2 .cp-tick-p { font-family: var(--cp-font-mono); font-style: normal; color: #fff; }
html.cp-v2 .cp-tick-d { font-family: var(--cp-font-mono); font-style: normal; color: var(--ob-green); font-weight: 800; }
@keyframes cpTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- 4. Filter & Command Bar ---- */
html.cp-v2 .results-filter-bar-container {
  background: var(--cp-bg-elevated); border: 1px solid var(--cp-border); border-radius: var(--ob-r-md); padding: 0.7rem 0.9rem;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html.cp-v2 .filter-btn, html.cp-v2 .color-btn {
  background: rgb(var(--ob-white-rgb) / 0.05); border-color: var(--cp-border); color: #cbd5e1; border-radius: var(--ob-r-pill);
}
html.cp-v2 .filter-btn:hover { border-color: var(--cp-cyan); background: rgb(var(--ob-aqua-rgb) / 0.15); color: #fff; }
html.cp-v2 .filter-btn.active, html.cp-v2 .color-btn.all.active {
  background: linear-gradient(135deg, #0284c7, #7c3aed); color: #fff; border-color: transparent; box-shadow: 0 2px 12px rgba(124, 58, 237, 0.45);
}
html.cp-v2 .color-btn.green { font-family: var(--cp-font-mono); }
html.cp-v2 .color-btn.green.active { background: rgb(var(--ob-green-rgb) / 0.25); border-color: var(--ob-green); color: #a7f3d0; }

/* ---- 5. Holo-Glass Produkt-/Angebotskarten ---- */
html.cp-v2 .offer-row, html.cp-v2 .dr-card {
  position: relative; background: var(--cp-bg-elevated); border: 1px solid var(--cp-border); border-radius: var(--ob-r-md); overflow: hidden;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: transform var(--ob-dur-1) var(--ob-ease-out), border-color var(--ob-dur-1) var(--ob-ease-out), box-shadow var(--ob-dur-1) var(--ob-ease-out);
}
html.cp-v2 .offer-row:hover, html.cp-v2 .dr-card:hover {
  transform: translateY(-2px); border-color: rgb(var(--ob-aqua-rgb) / 0.45);
  box-shadow: 0 18px 38px -12px rgb(var(--ob-black-rgb) / 0.7), 0 0 25px -8px rgb(var(--ob-aqua-rgb) / 0.25);
}
html.cp-v2 .offer-row::after, html.cp-v2 .dr-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--ob-dur-2) var(--ob-ease-out);
  background: linear-gradient(125deg, transparent 25%, rgb(var(--ob-holo-sky-rgb) / 0.10) 42%, rgb(var(--ob-holo-purple-rgb) / 0.10) 54%, rgb(var(--ob-holo-rose-rgb) / 0.10) 66%, transparent 80%);
}
html.cp-v2 .offer-row:hover::after, html.cp-v2 .dr-card:hover::after { opacity: 1; }
html.cp-v2 .offer-row.best-deal { border-color: rgb(var(--ob-green-rgb) / 0.5); box-shadow: 0 0 24px -8px rgb(var(--ob-green-rgb) / 0.45); }
html.cp-v2 .offer-thumb-container { background: radial-gradient(circle, rgb(var(--ob-aqua-rgb) / 0.16) 0%, rgba(15, 23, 42, 0.5) 75%); border-radius: var(--ob-r-sm); }
html.cp-v2 .offer-thumb { transition: transform var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .offer-row:hover .offer-thumb, html.cp-v2 .dr-card:hover .offer-thumb { transform: scale(1.06); }
html.cp-v2 .offer-price-val, html.cp-v2 .offer-uvp-val, html.cp-v2 .dr-prices, html.cp-v2 .dr-pct, html.cp-v2 .diff-pill { font-family: var(--cp-font-mono); }
html.cp-v2 .offer-price-val { font-weight: 800; }
html.cp-v2 .diff-pill.pill-green, html.cp-v2 .dr-pct { color: var(--ob-green); background: rgb(var(--ob-green-rgb) / 0.16); border: 1px solid rgb(var(--ob-green-rgb) / 0.35); border-radius: var(--ob-r-pill); }
html.cp-v2 .best-deal-badge { background: linear-gradient(135deg, var(--ob-green), #0ea5e9); color: #04121a; }

/* ---- Suche ---- */
html.cp-v2 #collapsibleSearchWrapper input[type="search"],
html.cp-v2 #searchInput {
  background: rgba(15, 23, 42, 0.9); border: 1px solid rgb(var(--ob-aqua-rgb) / 0.35); border-radius: var(--ob-r-md);
  box-shadow: 0 12px 32px -10px rgb(var(--ob-black-rgb) / 0.6), 0 0 25px -8px rgb(var(--ob-aqua-rgb) / 0.25); color: #fff;
}
html.cp-v2 #searchBtn { background: linear-gradient(135deg, #0284c7, #7c3aed); color: #fff; border: none; border-radius: var(--ob-r-sm); font-weight: 700; }

/* ---- Footer ---- */
html.cp-v2 footer { background: rgba(6, 9, 17, 0.7); border-top: 1px solid var(--cp-border); }

@media (max-width: 920px) {
  html.cp-v2 .cp-bento { grid-template-columns: 1fr; }
  html.cp-v2 .cp-back-card, html.cp-v2 .cp-radar-circle, html.cp-v2 .cp-kbd { display: none; }
  html.cp-v2 .home-hero-inner { grid-template-columns: 1fr; text-align: center; }
  html.cp-v2 .cp-cmd-search { margin-left: auto; margin-right: auto; }
  html.cp-v2 .cp-chips { justify-content: center; }
  html.cp-v2 .home-hero-inner > .cp-3d-stage { grid-column: 1; grid-row: auto; }
  html.cp-v2 .cp-live-pill { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  html.cp-v2 .cp-ecg-path, html.cp-v2 .cp-live-dot, html.cp-v2 .home-hero-title, html.cp-v2 .header-logo-text, html.cp-v2 .header-logo-icon, html.cp-v2 .cp-tick-track { animation: none; }
  html.cp-v2 .cp-ecg-path { stroke-dashoffset: 0; }
}

/* ==========================================================================
   v2.3 "OBSIDIAN SPATIAL" - komplett neues Design (ersetzt Aurora Gloss + Candy Pop).
   Tiefes Obsidian, Aurora-Mesh, Punktraster, Filmkorn, Maus-Spotlight, Glas mit leuchtendem Rand.
   Rein Optik; alles unter html.cp-v2, Hell-Variante unter [data-theme="light"].
   ========================================================================== */

/* ---- Hintergrund: Obsidian + Aurora-Mesh + Punktraster + Korn + Maus-Spotlight ---- */
html.cp-v2 body { background: var(--ob-bg); color: var(--ob-ink); font-family: var(--cp-font-sans); background-attachment: scroll; }
html.cp-v2 body::before {                             /* Aurora: 3 driftende Farbwolken */
  content: ""; position: fixed; inset: -25vmax; z-index: -3; pointer-events: none; opacity: 1;
  background:
    radial-gradient(34vmax 28vmax at 16% 18%, rgb(var(--ob-violet-rgb) / 0.5), transparent 70%),
    radial-gradient(30vmax 26vmax at 84% 14%, rgb(var(--ob-aqua-rgb) / 0.3), transparent 70%),
    radial-gradient(36vmax 30vmax at 72% 88%, rgb(var(--ob-coral-rgb) / 0.24), transparent 70%),
    radial-gradient(28vmax 24vmax at 8% 86%, rgba(79, 70, 229, 0.34), transparent 70%);
  transform: translate3d(-3%, -2%, 0); /* statisch (Leistung): die Endlos-Drift hielt die riesige Ebene dauerhaft im Neuzeichnen */
}
@keyframes obDrift { 0% { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(2%, 3%, 0) rotate(5deg) scale(1.07); } 100% { transform: translate3d(4%, -2%, 0) rotate(-4deg) scale(1.03); } }
html.cp-v2 body::after {                              /* Punktraster (zum Rand ausgeblendet) + Filmkorn */
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>") 0 0 / 160px 160px,
    radial-gradient(rgb(var(--ob-white-rgb) / 0.16) 1px, transparent 1.4px) 0 0 / 30px 30px;
  opacity: 0.075;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, rgb(var(--ob-black-rgb) / 0.45) 70%, rgb(var(--ob-black-rgb) / 0.25) 100%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, rgb(var(--ob-black-rgb) / 0.45) 70%, rgb(var(--ob-black-rgb) / 0.25) 100%);
}
html.cp-v2 #cpV2Spot {                                /* Maus-Spotlight: eigenes Element, Position per transform aus v2.js */
  position: fixed; left: 0; top: 0; width: 1040px; height: 1040px; z-index: -1; pointer-events: none; will-change: transform;
  transform: translate3d(calc(50vw - 520px), calc(18vh - 520px), 0);
  background: radial-gradient(520px circle at 50% 50%, rgb(var(--ob-violet-rgb) / 0.13), rgb(var(--ob-aqua-rgb) / 0.05) 45%, transparent 70%);
}

/* ---- Header: schwebendes Glas mit Haarlinie ---- */
html.cp-v2 .sticky-top-section {
  background: rgba(7, 8, 15, 0.66); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid var(--ob-line); border-radius: 0; box-shadow: 0 1px 0 rgb(var(--ob-white-rgb) / 0.03), 0 18px 40px -24px rgb(var(--ob-black-rgb) / 0.9);
}
html.cp-v2 .sticky-top-section::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgb(var(--ob-violet-rgb) / 0.7), rgb(var(--ob-aqua-rgb) / 0.7), transparent); opacity: 0.7; }
html.cp-v2 .header-logo-text { background: var(--ob-accent); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.04em; animation: obFlow 9s ease infinite; }
html.cp-v2 .header-logo-icon { filter: drop-shadow(0 0 12px rgb(var(--ob-violet-rgb) / 0.6)); }
html.cp-v2 .country-flag-btn.active { box-shadow: 0 0 0 2px var(--ob-violet), 0 2px 14px rgb(var(--ob-violet-rgb) / 0.5); }
html.cp-v2 .site-menu-btn { background: rgb(var(--ob-white-rgb) / 0.05); border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); transition: background var(--ob-dur-1) var(--ob-ease-out), border-color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .site-menu-btn:hover { background: rgb(var(--ob-white-rgb) / 0.1); border-color: var(--ob-line-2); }
@keyframes obFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes obRise { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }

/* ---- Startseiten-Hero ---- */
html.cp-v2 .home-hero {
  position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg);
  background:
    radial-gradient(70% 90% at 12% 0%, rgb(var(--ob-violet-rgb) / 0.22), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgb(var(--ob-aqua-rgb) / 0.14), transparent 60%),
    linear-gradient(180deg, rgba(17, 19, 36, 0.78), rgba(8, 9, 18, 0.7));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.12), 0 40px 80px -40px rgb(var(--ob-black-rgb) / 0.95), 0 0 90px -40px var(--ob-glow);
  animation: obRise var(--ob-dur-3) var(--cp-ease) both;
}
html.cp-v2 .home-hero.cp-risen { animation: none; } /* einmal eingeblendet (v2.js): beim Verschieben durch das Layout-Skript nicht erneut einblenden (Flackern) */
html.cp-v2 .home-hero::before {                       /* animierter Verlaufs-Rand */
  content: ""; position: absolute; inset: 0; z-index: 0; height: auto; pointer-events: none; opacity: 1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--obAng, 0deg), transparent 0deg, rgb(var(--ob-violet-rgb) / 0.9) 70deg, rgb(var(--ob-aqua-rgb) / 0.9) 130deg, transparent 200deg, transparent 360deg);
  -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);
  mask-composite: exclude; animation: obSpin 9s linear infinite;
}
html.cp-v2 .home-hero::after { content: ""; position: absolute; left: 10%; right: 10%; top: 0; width: auto; height: 1px; z-index: 1; opacity: 1; pointer-events: none; transform: none; animation: none; background: linear-gradient(90deg, transparent, rgb(var(--ob-white-rgb) / 0.7), transparent); }
@property --obAng { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes obSpin { to { --obAng: 360deg; } }
html.cp-v2 .home-hero-eyebrow { display: inline-block; justify-self: start; width: fit-content; padding: 6px 14px; border-radius: var(--ob-r-pill); background: rgb(var(--ob-violet-rgb) / 0.14); border: 1px solid rgb(var(--ob-violet-rgb) / 0.4); color: #cfc6ff; font-family: var(--cp-font-mono); font-size: 0.74rem; letter-spacing: 0.1em; }
html.cp-v2 .home-hero-title {
  font-size: clamp(2.4rem, 6.2vw, 4.4rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02;
  background: var(--ob-title); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: obFlow 10s ease infinite;
}
html.cp-v2 .home-hero-sub { color: var(--ob-mute); font-size: 1.04rem; line-height: 1.65; max-width: 52ch; }
html.cp-v2 .cp-ecg-bg { opacity: 0.45; }
html.cp-v2 .cp-ecg-path { filter: drop-shadow(0 0 10px rgb(var(--ob-violet-rgb) / 0.8)); }
html.cp-v2 .cp-radar-circle { border-color: rgb(var(--ob-violet-rgb) / 0.22); }
html.cp-v2 .cp-radar-circle::before { border-color: rgb(var(--ob-aqua-rgb) / 0.16); }
html.cp-v2 .cp-live-pill { background: rgb(var(--ob-green-rgb) / 0.09); border-color: rgb(var(--ob-green-rgb) / 0.32); color: #a7f3d0; letter-spacing: 0.04em; }

/* Command-Suche */
html.cp-v2 .cp-cmd-search { background: rgba(10, 11, 22, 0.78); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.07), 0 24px 50px -20px rgb(var(--ob-black-rgb) / 0.9); transition: border-color var(--ob-dur-2) var(--ob-ease-out), box-shadow var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .cp-cmd-search:focus-within { border-color: rgb(var(--ob-violet-rgb) / 0.85); box-shadow: 0 0 0 4px rgb(var(--ob-violet-rgb) / 0.18), 0 24px 50px -20px rgb(var(--ob-black-rgb) / 0.9), 0 0 50px -10px rgb(var(--ob-violet-rgb) / 0.55); }
html.cp-v2 .cp-kbd { background: rgb(var(--ob-white-rgb) / 0.05); }

/* Foil-Karte im Hero */
html.cp-v2 .cp-foil-card { background: conic-gradient(from var(--obAng, 0deg), var(--ob-violet), var(--ob-aqua), var(--ob-coral), var(--ob-amber), var(--ob-violet)); animation: obSpin 8s linear infinite; box-shadow: 0 40px 80px -24px rgb(var(--ob-black-rgb) / 0.95), 0 0 70px -12px rgb(var(--ob-violet-rgb) / 0.55); }
html.cp-v2 .cp-foil-inner { background: linear-gradient(165deg, #12142a 0%, #07080f 100%); }
html.cp-v2 .cp-back-card { background: linear-gradient(145deg, rgba(28, 30, 54, 0.7), rgba(10, 11, 22, 0.85)); }
html.cp-v2 .cp-back-card--left { border-color: rgb(var(--ob-violet-rgb) / 0.45); }
html.cp-v2 .cp-back-card--right { border-color: rgb(var(--ob-aqua-rgb) / 0.4); }
html.cp-v2 .cp-art-window { background: radial-gradient(circle at 50% 40%, rgb(var(--ob-violet-rgb) / 0.34), rgb(var(--ob-aqua-rgb) / 0.12) 55%, rgba(8, 9, 18, 0.95) 100%); }
html.cp-v2 .cp-art-sm { background: radial-gradient(circle, rgb(var(--ob-violet-rgb) / 0.2) 0%, rgba(10, 11, 22, 0.5) 75%); }
html.cp-v2 .cp-card-rarity { color: var(--ob-amber); }
html.cp-v2 .cp-price-box { background: rgba(4, 5, 12, 0.7); border-color: var(--ob-line); }
html.cp-v2 :is(.cp-price-now, .offer-price-val, .dr-prices) { font-variant-numeric: tabular-nums; }

/* ---- Karten: Glas, Haarlinie, leuchtender Rand folgt der Maus ---- */
html.cp-v2 :is(.cp-deal-card, .offer-row, .dr-card, .cx-set-tile, .cx-card, .cx-stat, .hw-row, .cp-bento-box, .top-guide-card, .popular-set-tile-card, .results-filter-bar-container) {
  background: var(--ob-card), rgba(12, 14, 26, 0.58); border: 1px solid var(--ob-line); border-radius: var(--ob-r);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.07), 0 18px 36px -24px rgb(var(--ob-black-rgb) / 0.9);
  transition: transform var(--ob-dur-3) var(--cp-ease), border-color var(--ob-dur-2) var(--ob-ease-out), box-shadow var(--ob-dur-3) var(--ob-ease-out);
}
html.cp-v2 :is(.cp-deal-card, .offer-row, .dr-card, .cp-bento-box)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 1; transition: none;
  background: radial-gradient(240px circle at var(--mx, -400px) var(--my, -400px), rgba(167, 139, 250, 0.95), rgb(var(--ob-aqua-rgb) / 0.55) 45%, transparent 70%);
  -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); mask-composite: exclude;
}
html.cp-v2 :is(.cp-deal-card, .offer-row, .dr-card, .cx-set-tile, .cx-card, .top-guide-card, .popular-set-tile-card):hover {
  transform: translateY(-2px); border-color: var(--ob-line-2);
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--ob-violet-rgb) / 0.16), transparent 62%), var(--ob-card), rgba(14, 16, 30, 0.7);
  box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.12), 0 30px 50px -26px rgb(var(--ob-black-rgb) / 0.95), 0 0 50px -22px var(--ob-glow);
}
html.cp-v2 .offer-row.best-deal { border-color: rgb(var(--ob-green-rgb) / 0.5); box-shadow: 0 0 34px -12px rgb(var(--ob-green-rgb) / 0.55); }
html.cp-v2 .cx-set-tile.complete, html.cp-v2 .cx-card.owned { border-color: rgb(var(--ob-amber-rgb) / 0.65); box-shadow: 0 0 34px -10px rgb(var(--ob-amber-rgb) / 0.5); }
html.cp-v2 .cx-set-art, html.cp-v2 .offer-thumb-container { background: radial-gradient(ellipse at center, rgb(var(--ob-violet-rgb) / 0.22), transparent 70%); }
html.cp-v2 .cp-bento-box { border-radius: var(--ob-r-lg); }
html.cp-v2 .cp-binder-slot.owned { background: linear-gradient(135deg, rgb(var(--ob-violet-rgb) / 0.28), rgb(var(--ob-aqua-rgb) / 0.18)); border-color: rgb(var(--ob-violet-rgb) / 0.6); box-shadow: 0 0 20px rgb(var(--ob-violet-rgb) / 0.25); }
html.cp-v2 .cp-binder-slot:hover { border-color: var(--ob-aqua); }
html.cp-v2 .cp-bar i { background: var(--ob-accent); }
html.cp-v2 .cp-pack { animation: obBob 4s ease-in-out infinite; }
@keyframes obBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
html.cp-v2 :is(.cp-badge-drop, .diff-pill.pill-green, .dr-pct) { color: #6ee7b7; background: rgb(var(--ob-green-rgb) / 0.12); border: 1px solid rgb(var(--ob-green-rgb) / 0.35); border-radius: var(--ob-r-pill); }
html.cp-v2 .cp-pack-calc { color: #a5f3fc; background: rgb(var(--ob-aqua-rgb) / 0.1); border-color: rgb(var(--ob-aqua-rgb) / 0.35); }

/* ---- Ticker ---- */
html.cp-v2 .cp-ticker { background: rgb(var(--ob-white-rgb) / 0.03); border: 1px solid var(--ob-line); border-radius: var(--ob-r-pill); padding: 0.6rem 1.2rem; }
html.cp-v2 .cp-tick-lbl { color: var(--ob-green); }

/* ---- Abschnitts-Titel ---- */
html.cp-v2 .cp-eyebrow { color: var(--ob-aqua); letter-spacing: 0.12em; }
html.cp-v2 .cp-eyebrow.cp-rose { color: var(--ob-coral); }
html.cp-v2 .cp-section-title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.035em; }
html.cp-v2 .cx-section-title { background: var(--ob-title); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.03em; animation: none; }
html.cp-v2 :is(h3[data-i18n="top_guides_title"], h3[data-i18n="popular_sets_title"], .home-radar-title) {
  display: inline-block; color: var(--ob-ink) !important; font-weight: 800 !important; letter-spacing: -0.02em; text-transform: none !important; font-size: var(--ob-fs-lg) !important; padding-bottom: 10px;
  background: var(--ob-accent) left bottom / 44px 3px no-repeat; border: 0; border-radius: 0;
}
html.cp-v2 #homeRadar {
  background: radial-gradient(80% 100% at 0% 0%, rgb(var(--ob-violet-rgb) / 0.14), transparent 60%), var(--ob-card), rgba(10, 12, 24, 0.55) !important; border: 1px solid var(--ob-line) !important; border-radius: var(--ob-r-lg) !important;
  box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.08), 0 30px 60px -36px rgb(var(--ob-black-rgb) / 0.95);
}

/* ---- Grafik-Banner (.hb-*): dunkle Verlaeufe mit Farbleuchten ---- */
html.cp-v2 .hb {
  position: relative; isolation: isolate; border-radius: var(--ob-r-lg); min-height: 200px; padding: 28px 30px; margin-bottom: 22px; border: 1px solid var(--ob-line-2);
  box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.16), 0 30px 60px -34px rgb(var(--ob-black-rgb) / 0.95), 0 0 70px -34px var(--hb-glow, rgb(var(--ob-violet-rgb) / 0.6));
  transition: transform var(--ob-dur-3) var(--cp-ease), box-shadow var(--ob-dur-3) var(--ob-ease-out); animation: obRise var(--ob-dur-3) var(--cp-ease) both;
}
html.cp-v2 .hb:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.2), 0 40px 70px -34px rgb(var(--ob-black-rgb) / 0.95), 0 0 90px -28px var(--hb-glow, rgb(var(--ob-violet-rgb) / 0.75)); }
html.cp-v2 .hb::after {
  animation: none; background:
    linear-gradient(105deg, transparent 38%, rgb(var(--ob-white-rgb) / 0.14) 50%, transparent 62%) 160% 0 / 55% 100% no-repeat,
    linear-gradient(180deg, rgb(var(--ob-white-rgb) / 0.1), transparent 40%),
    radial-gradient(circle at 88% 12%, rgb(var(--ob-white-rgb) / 0.12), transparent 50%);
  transition: background-position var(--ob-dur-3) var(--cp-ease);
}
html.cp-v2 .hb:hover::after { background-position: -60% 0, 0 0, 0 0; }
html.cp-v2 .hb-title { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; text-shadow: 0 6px 30px rgb(var(--ob-black-rgb) / 0.4); }
html.cp-v2 .hb-count { font-size: clamp(1.5rem, 3.4vw, 2.2rem); color: #fff; }
html.cp-v2 .hb-sub { color: rgb(var(--ob-white-rgb) / 0.82); }
html.cp-v2 .hb-eyebrow { display: inline-block; padding: 5px 12px; border-radius: var(--ob-r-pill); background: rgb(var(--ob-white-rgb) / 0.1); border: 1px solid rgb(var(--ob-white-rgb) / 0.28); color: #fff; letter-spacing: 0.1em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html.cp-v2 .hb-art { transition: transform var(--ob-dur-3) var(--cp-ease); }
html.cp-v2 .hb:hover .hb-art { transform: scale(1.05) rotate(-1.5deg); }
html.cp-v2 .hb-art :is(img, .hb-pack, .hb-prod, .hb-logo) { filter: drop-shadow(0 20px 28px rgb(var(--ob-black-rgb) / 0.55)); }
html.cp-v2 .hb-next { --hb-bg: radial-gradient(90% 120% at 100% 0%, rgb(var(--ob-coral-rgb) / 0.5), transparent 60%), linear-gradient(135deg, #1c1049 0%, #3a1670 60%, #5b1f7a 100%); --hb-glow: rgba(190, 60, 160, 0.6); }
html.cp-v2 .hb-find { --hb-bg: radial-gradient(90% 120% at 100% 0%, rgb(var(--ob-aqua-rgb) / 0.4), transparent 60%), linear-gradient(135deg, #062a2a 0%, #0b4a4a 60%, #0a3b5c 100%); --hb-glow: rgba(34, 211, 160, 0.5); }
html.cp-v2 .hb-sim { --hb-bg: radial-gradient(90% 120% at 100% 0%, rgb(var(--ob-amber-rgb) / 0.42), transparent 60%), linear-gradient(135deg, #3a1406 0%, #6a2410 60%, #5a1840 100%); --hb-glow: rgba(255, 140, 60, 0.55); }
html.cp-v2 .hb-coll { --hb-bg: radial-gradient(90% 120% at 100% 0%, rgb(var(--ob-aqua-rgb) / 0.4), transparent 60%), linear-gradient(135deg, #0b1b4d 0%, #1e2a8a 60%, #4a1d8f 100%); --hb-glow: rgba(70, 120, 255, 0.6); }
html.cp-v2 .hb-binder { --hb-bg: radial-gradient(90% 120% at 100% 0%, rgb(var(--ob-green-rgb) / 0.35), transparent 60%), linear-gradient(135deg, #14134a 0%, #1f2f7a 60%, #0f5a62 100%); --hb-glow: rgba(80, 100, 255, 0.55); }
html.cp-v2 .hb-blog { --hb-bg: radial-gradient(90% 120% at 100% 0%, rgb(var(--ob-amber-rgb) / 0.38), transparent 60%), linear-gradient(135deg, #4a0f26 0%, #7a1d34 60%, #7a3a12 100%); --hb-glow: rgba(255, 92, 110, 0.55); }
html.cp-v2 .hb-rift { --hb-bg: radial-gradient(90% 120% at 100% 0%, rgb(var(--ob-coral-rgb) / 0.4), transparent 60%), linear-gradient(135deg, #0f1c5c 0%, #3a1f98 60%, #6a1f78 100%); --hb-glow: rgb(var(--ob-violet-rgb) / 0.65); }
html.cp-v2 .hb-relcal { --hb-bg: radial-gradient(90% 120% at 100% 0%, rgba(217, 70, 239, 0.4), transparent 60%), linear-gradient(135deg, #082c5e 0%, #2a3fa8 60%, #5a2a9a 100%); --hb-glow: rgba(70, 150, 255, 0.55); }

/* ---- Set-/Produkt-/Guide-Banner ---- */
html.cp-v2 :is(.cx-hero, .cx-detail-hero, .setguide-hero, .rb-hero, .pp-hero), html.cp-v2 :is(.cx-hero, .cx-detail-hero, .setguide-hero, .op-hero, .pp-hero) {
  position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-lg);
  background: radial-gradient(70% 100% at 0% 0%, rgb(var(--ob-violet-rgb) / 0.26), transparent 60%), radial-gradient(60% 90% at 100% 100%, rgb(var(--ob-aqua-rgb) / 0.16), transparent 60%), linear-gradient(160deg, #12142c, #090a14);
  box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.14), 0 36px 70px -36px rgb(var(--ob-black-rgb) / 0.95), 0 0 80px -40px var(--ob-glow);
  animation: obRise var(--ob-dur-3) var(--cp-ease) both;
}
html.cp-v2 :is(.cx-hero, .cx-detail-hero, .setguide-hero, .rb-hero, .pp-hero)::before, html.cp-v2 :is(.cx-hero, .cx-detail-hero, .setguide-hero, .op-hero, .pp-hero)::before { content: ""; position: absolute; z-index: 0; left: 10%; right: 10%; top: 0; height: 1px; border-radius: 0; background: linear-gradient(90deg, transparent, rgb(var(--ob-white-rgb) / 0.65), transparent); }
html.cp-v2 :is(.cx-hero, .cx-detail-hero, .setguide-hero, .rb-hero, .pp-hero)::after, html.cp-v2 :is(.cx-hero, .cx-detail-hero, .setguide-hero, .op-hero, .pp-hero)::after { content: ""; position: absolute; z-index: 0; inset: 0; width: auto; transform: none; animation: none; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 0%), rgb(var(--ob-white-rgb) / 0.06), transparent 60%); }
html.cp-v2 :is(.cx-hero, .setguide-hero-banner-text) :is(h1, .h1-alt) { background: var(--ob-title); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: none; letter-spacing: -0.035em; }
html.cp-v2 .setguide-hero-banner-img img { animation: obBob 6s ease-in-out infinite; filter: drop-shadow(0 20px 30px rgb(var(--ob-black-rgb) / 0.6)) drop-shadow(0 0 30px rgb(var(--ob-violet-rgb) / 0.4)); }

/* ---- Buttons ---- */
html.cp-v2 :is(#searchBtn, .cp-cmd-search button, .cx-link-btn:not(.cx2 *), .cx-scan-btn, .btn-toggle-search, .setguide-scroll-btn:not(.gd2 *, .bl2 *)) {
  position: relative; overflow: hidden; border: 1px solid rgb(var(--ob-white-rgb) / 0.22); border-radius: var(--ob-r-md); font-weight: 700; letter-spacing: 0.005em; color: #fff !important; text-shadow: none;
  background: linear-gradient(180deg, rgb(var(--ob-white-rgb) / 0.22), rgb(var(--ob-white-rgb) / 0) 55%), var(--ob-accent);
  box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.45), 0 12px 30px -10px rgb(var(--ob-violet-rgb) / 0.75);
  transition: transform var(--ob-dur-2) var(--cp-ease), box-shadow var(--ob-dur-2) var(--ob-ease-out), filter var(--ob-dur-2) var(--ob-ease-out);
}
html.cp-v2 :is(#searchBtn, .cp-cmd-search button, .cx-link-btn:not(.cx2 *), .cx-scan-btn, .setguide-scroll-btn:not(.gd2 *, .bl2 *))::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none; background: linear-gradient(105deg, transparent, rgb(var(--ob-white-rgb) / 0.45), transparent); transform: translateX(-140%) skewX(-18deg); }
html.cp-v2 :is(#searchBtn, .cp-cmd-search button, .cx-link-btn:not(.cx2 *), .cx-scan-btn, .setguide-scroll-btn:not(.gd2 *, .bl2 *)):hover::after { transform: translateX(320%) skewX(-18deg); transition: transform var(--ob-dur-3) var(--cp-ease); }
html.cp-v2 :is(#searchBtn, .cp-cmd-search button, .cx-link-btn:not(.cx2 *), .cx-scan-btn, .btn-toggle-search, .setguide-scroll-btn:not(.gd2 *, .bl2 *)):hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.55), 0 18px 36px -10px rgb(var(--ob-aqua-rgb) / 0.6); }
html.cp-v2 :is(#searchBtn, .cp-cmd-search button, .cx-link-btn:not(.cx2 *), .cx-scan-btn, .setguide-scroll-btn:not(.gd2 *, .bl2 *)):active { transform: translateY(0) scale(0.97); }
html.cp-v2 .hb-cta { background: #fff; color: #0b0d1c !important; border: 0; border-radius: var(--ob-r-md); font-weight: 800; box-shadow: 0 14px 30px -10px rgb(var(--ob-black-rgb) / 0.6); transition: transform var(--ob-dur-2) var(--cp-ease), box-shadow var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .hb-cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 18px 36px -10px rgb(var(--ob-black-rgb) / 0.7), 0 0 30px rgb(var(--ob-white-rgb) / 0.35); }
html.cp-v2 .hb-cta.hb-cta-ghost { background: rgb(var(--ob-white-rgb) / 0.1); color: #fff !important; border: 1px solid rgb(var(--ob-white-rgb) / 0.4); box-shadow: none; }

/* ---- Chips, Filter, Eingaben ---- */
html.cp-v2 :is(.cp-chip, .cx-chip, .filter-btn, .color-btn) { background: rgb(var(--ob-white-rgb) / 0.045); border: 1px solid var(--ob-line-2); color: #d9dcee; border-radius: var(--ob-r-pill); font-weight: 600; transition: transform var(--ob-dur-1) var(--cp-ease), border-color var(--ob-dur-1) var(--ob-ease-out), background var(--ob-dur-1) var(--ob-ease-out), color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 :is(.cp-chip, .cx-chip, .filter-btn):hover { border-color: rgb(var(--ob-violet-rgb) / 0.8); background: rgb(var(--ob-violet-rgb) / 0.16); color: #fff; transform: translateY(-2px); }
html.cp-v2 :is(.filter-btn.active, .cp-chip.active, .color-btn.all.active) { background: var(--ob-accent-btn); border-color: transparent; color: #fff; box-shadow: 0 6px 20px -6px rgb(var(--ob-violet-rgb) / 0.8); }
html.cp-v2 #collapsibleSearchWrapper input[type="search"], html.cp-v2 #searchInput { background: rgba(10, 11, 22, 0.8); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); color: #fff; box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.06), 0 18px 40px -20px rgb(var(--ob-black-rgb) / 0.9); transition: border-color var(--ob-dur-2) var(--ob-ease-out), box-shadow var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 #collapsibleSearchWrapper input[type="search"]:focus, html.cp-v2 #searchInput:focus { border-color: rgb(var(--ob-violet-rgb) / 0.85); box-shadow: 0 0 0 4px rgb(var(--ob-violet-rgb) / 0.18), 0 18px 40px -20px rgb(var(--ob-black-rgb) / 0.9); outline: none; }
html.cp-v2 footer { background: rgba(5, 6, 12, 0.7); border-top: 1px solid var(--ob-line); }
html.cp-v2 ::selection { background: rgb(var(--ob-violet-rgb) / 0.5); color: #fff; }

/* ---- Scroll-getriebenes Einblenden (nur mit view()-Timeline) ---- */
@supports (animation-timeline: view()) {
  html.cp-v2 :is(.cp-deals, .cp-bento, .cx-chart-head, .cx-series, .cx-links-section, #homeRadar, .hc-frame) { animation: obRise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
}
@media (prefers-reduced-motion: reduce) { html.cp-v2 :is(.cp-deals, .cp-bento, .cx-chart-head, .cx-series, .cx-links-section, #homeRadar, .hc-frame, .cx-set-grid > *, .cx-card-grid > *) { animation: none; } } /* WP-F1: Endzustand ohne Bewegung */
html.cp-v2 :is(.cx-set-grid, .cx-card-grid) > * { animation: obRise var(--ob-dur-3) var(--cp-ease) both; }
html.cp-v2 :is(.cx-set-grid, .cx-card-grid) > *:nth-child(2) { animation-delay: 0.04s; }
html.cp-v2 :is(.cx-set-grid, .cx-card-grid) > *:nth-child(3) { animation-delay: 0.08s; }
html.cp-v2 :is(.cx-set-grid, .cx-card-grid) > *:nth-child(4) { animation-delay: 0.12s; }
html.cp-v2 :is(.cx-set-grid, .cx-card-grid) > *:nth-child(n+5) { animation-delay: 0.16s; }

/* ==========================================================================
   Hell: Porzellan + Pastell-Aurora, Tintenschrift, weisse Glas-Karten
   ========================================================================== */
html.cp-v2[data-theme="light"] body { background: var(--ob-bg); color: var(--ob-ink); }
html.cp-v2[data-theme="light"] body::before {
  background:
    radial-gradient(34vmax 28vmax at 16% 18%, rgb(var(--ob-violet-rgb) / 0.24), transparent 70%),
    radial-gradient(30vmax 26vmax at 84% 14%, rgb(var(--ob-aqua-rgb) / 0.24), transparent 70%),
    radial-gradient(36vmax 30vmax at 72% 88%, rgb(var(--ob-coral-rgb) / 0.16), transparent 70%),
    radial-gradient(28vmax 24vmax at 8% 86%, rgb(var(--ob-amber-rgb) / 0.2), transparent 70%);
}
html.cp-v2[data-theme="light"] body::after { opacity: 0.1; filter: invert(1); }
html.cp-v2[data-theme="light"] #cpV2Spot { background: radial-gradient(520px circle at 50% 50%, rgb(var(--ob-violet-rgb) / 0.12), rgb(var(--ob-aqua-rgb) / 0.06) 45%, transparent 70%); }
html.cp-v2[data-theme="light"] .sticky-top-section { background: rgb(var(--ob-white-rgb) / 0.72); box-shadow: 0 18px 40px -26px rgb(var(--ob-tint-rgb) / 0.5); }
html.cp-v2[data-theme="light"] .site-menu-btn { background: rgb(var(--ob-white-rgb) / 0.8); }
html.cp-v2[data-theme="light"] .home-hero { background: radial-gradient(70% 90% at 12% 0%, rgb(var(--ob-violet-rgb) / 0.2), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgb(var(--ob-aqua-rgb) / 0.2), transparent 60%), linear-gradient(180deg, rgb(var(--ob-white-rgb) / 0.92), rgba(247, 246, 255, 0.82)); box-shadow: inset 0 1px 0 #fff, 0 40px 80px -44px rgb(var(--ob-tint-rgb) / 0.55); }
html.cp-v2[data-theme="light"] .home-hero-eyebrow { color: #4c34c9; background: rgb(var(--ob-violet-rgb) / 0.1); border-color: rgb(var(--ob-violet-rgb) / 0.3); }
html.cp-v2[data-theme="light"] .home-hero-sub, html.cp-v2[data-theme="light"] .cp-chips-lbl { color: var(--ob-mute); }
html.cp-v2[data-theme="light"] :is(.cp-section-title, .cp-deal-title, .cp-price-now) { color: var(--ob-ink); }
html.cp-v2[data-theme="light"] .cp-live-pill { color: var(--ob-green-ink); background: rgb(var(--ob-green-rgb) / 0.12); }
html.cp-v2[data-theme="light"] .cp-cmd-search { background: rgb(var(--ob-white-rgb) / 0.92); }
html.cp-v2[data-theme="light"] .cp-cmd-search input { color: var(--ob-ink); }
html.cp-v2[data-theme="light"] .cp-kbd { color: var(--ob-mute); background: rgb(var(--ob-tint-rgb) / 0.07); }
html.cp-v2[data-theme="light"] .cp-foil-inner { background: linear-gradient(165deg, #ffffff 0%, #eeeafd 100%); color: var(--ob-ink); }
html.cp-v2[data-theme="light"] .cp-back-card { background: linear-gradient(145deg, #fff, #efeaff); color: var(--ob-ink); }
html.cp-v2[data-theme="light"] .cp-price-box { background: rgb(var(--ob-tint-rgb) / 0.06); }
html.cp-v2[data-theme="light"] .cp-art-window { background: radial-gradient(circle at 50% 40%, rgb(var(--ob-violet-rgb) / 0.22), rgb(var(--ob-aqua-rgb) / 0.12) 55%, rgb(var(--ob-white-rgb) / 0.9) 100%); }
html.cp-v2[data-theme="light"] .cp-tick { color: var(--ob-mute); }
html.cp-v2[data-theme="light"] :is(.cp-tick b, .cp-tick-p) { color: var(--ob-ink); }
html.cp-v2[data-theme="light"] .cp-tick-d, html.cp-v2[data-theme="light"] :is(.cp-badge-drop, .diff-pill.pill-green, .dr-pct) { color: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] .cp-ticker { background: rgb(var(--ob-white-rgb) / 0.7); }
html.cp-v2[data-theme="light"] :is(.cp-deal-card, .offer-row, .dr-card, .cx-set-tile, .cx-card, .cx-stat, .hw-row, .cp-bento-box, .top-guide-card, .popular-set-tile-card, .results-filter-bar-container) { background: var(--ob-card); box-shadow: inset 0 1px 0 #fff, 0 16px 32px -22px rgb(var(--ob-tint-rgb) / 0.5); }
html.cp-v2[data-theme="light"] :is(.cp-deal-card, .offer-row, .dr-card, .cx-set-tile, .cx-card, .top-guide-card, .popular-set-tile-card):hover { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--ob-violet-rgb) / 0.12), transparent 62%), #fff; box-shadow: inset 0 1px 0 #fff, 0 28px 46px -26px rgb(var(--ob-tint-rgb) / 0.6), 0 0 44px -22px var(--ob-glow); }
html.cp-v2[data-theme="light"] #homeRadar { background: radial-gradient(80% 100% at 0% 0%, rgb(var(--ob-violet-rgb) / 0.1), transparent 60%), rgb(var(--ob-white-rgb) / 0.82) !important; border-color: var(--ob-line) !important; box-shadow: inset 0 1px 0 #fff, 0 30px 60px -40px rgb(var(--ob-tint-rgb) / 0.5); }
html.cp-v2[data-theme="light"] :is(h3[data-i18n="top_guides_title"], h3[data-i18n="popular_sets_title"], .home-radar-title) { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] :is(.cx-hero, .cx-detail-hero, .setguide-hero, .rb-hero, .pp-hero), html.cp-v2[data-theme="light"] :is(.cx-hero, .cx-detail-hero, .setguide-hero, .op-hero, .pp-hero) { background: radial-gradient(70% 100% at 0% 0%, rgb(var(--ob-violet-rgb) / 0.2), transparent 60%), radial-gradient(60% 90% at 100% 100%, rgb(var(--ob-aqua-rgb) / 0.2), transparent 60%), linear-gradient(160deg, #ffffff, #efeafd); box-shadow: inset 0 1px 0 #fff, 0 36px 70px -40px rgb(var(--ob-tint-rgb) / 0.55); }
html.cp-v2[data-theme="light"] :is(.cp-chip, .cx-chip, .filter-btn, .color-btn) { background: rgb(var(--ob-white-rgb) / 0.85); color: var(--ob-ink); border-color: var(--ob-line-2); }
html.cp-v2[data-theme="light"] :is(.filter-btn.active, .cp-chip.active, .color-btn.all.active) { background: var(--ob-accent-btn); color: #fff; border-color: transparent; }
html.cp-v2[data-theme="light"] :is(#collapsibleSearchWrapper input[type="search"], #searchInput) { background: rgb(var(--ob-white-rgb) / 0.95); color: var(--ob-ink); }
html.cp-v2[data-theme="light"] footer { background: rgb(var(--ob-white-rgb) / 0.7); }
/* theme-light.css setzt --hb-bg mit !important -> Banner-Farben hier erneut durchsetzen (Hell behaelt dunkle Banner: weisse Schrift) */
html.cp-v2[data-theme="light"] .hb.hb-next { --hb-bg: radial-gradient(90% 120% at 100% 0%, rgb(var(--ob-coral-rgb) / 0.5), transparent 60%), linear-gradient(135deg, #2a1470 0%, #5a22a8 60%, #8a2a9a 100%) !important; }
html.cp-v2[data-theme="light"] .hb.hb-find { --hb-bg: radial-gradient(90% 120% at 100% 0%, rgb(var(--ob-aqua-rgb) / 0.4), transparent 60%), linear-gradient(135deg, #0a4a4a 0%, #0f7a78 60%, #0f5f8a 100%) !important; }
html.cp-v2[data-theme="light"] .hb.hb-sim { --hb-bg: radial-gradient(90% 120% at 100% 0%, rgb(var(--ob-amber-rgb) / 0.45), transparent 60%), linear-gradient(135deg, #7a2a0c 0%, #b8421a 60%, #9a2a6a 100%) !important; }
html.cp-v2[data-theme="light"] .hb.hb-coll { --hb-bg: radial-gradient(90% 120% at 100% 0%, rgb(var(--ob-aqua-rgb) / 0.4), transparent 60%), linear-gradient(135deg, #12308a 0%, #2f44c8 60%, #6a2ac0 100%) !important; }
html.cp-v2[data-theme="light"] .hb.hb-binder { --hb-bg: radial-gradient(90% 120% at 100% 0%, rgb(var(--ob-green-rgb) / 0.35), transparent 60%), linear-gradient(135deg, #1f1d7a 0%, #2f48b0 60%, #157a82 100%) !important; }
html.cp-v2[data-theme="light"] .hb.hb-blog { --hb-bg: radial-gradient(90% 120% at 100% 0%, rgb(var(--ob-amber-rgb) / 0.4), transparent 60%), linear-gradient(135deg, #8a1a3a 0%, #c02a4a 60%, #c0602a 100%) !important; }
html.cp-v2[data-theme="light"] .hb.hb-rift { --hb-bg: radial-gradient(90% 120% at 100% 0%, rgb(var(--ob-coral-rgb) / 0.4), transparent 60%), linear-gradient(135deg, #1a2c8a 0%, #5a34c8 60%, #9a2a9a 100%) !important; }
html.cp-v2[data-theme="light"] .hb.hb-relcal { --hb-bg: radial-gradient(90% 120% at 100% 0%, rgba(217, 70, 239, 0.4), transparent 60%), linear-gradient(135deg, #0f4a9a 0%, #3a58d0 60%, #7a3ac0 100%) !important; }
html.cp-v2[data-theme="light"] .hb { border-color: rgb(var(--ob-white-rgb) / 0.5) !important; }
html.cp-v2[data-theme="light"] .hb :is(.hb-cta, a.hb-cta) { background: #fff !important; color: #0b0d1c !important; border: 0 !important; box-shadow: 0 14px 30px -10px rgb(var(--ob-black-rgb) / 0.45) !important; }
html.cp-v2[data-theme="light"] .hb a.hb-cta.hb-cta-ghost { background: rgb(var(--ob-white-rgb) / 0.16) !important; color: #fff !important; border: 1px solid rgb(var(--ob-white-rgb) / 0.6) !important; box-shadow: none !important; }
html.cp-v2[data-theme="light"] :is(#searchBtn, .cp-cmd-search button, .cx-scan-btn, .cx-link-btn:not(.cx2 *), .setguide-scroll-btn:not(.gd2 *, .bl2 *)) { background: linear-gradient(180deg, rgb(var(--ob-white-rgb) / 0.22), rgb(var(--ob-white-rgb) / 0) 55%), var(--ob-accent) !important; color: #fff !important; border: 1px solid rgb(var(--ob-white-rgb) / 0.4) !important; box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.45), 0 12px 28px -10px rgba(99, 80, 230, 0.6) !important; }


/* ==========================================================================
   v2.4 Holo-Pulse Hero (Optik aus dem Upload "holo-pulse-upgrade") auf Obsidian Spatial.
   ========================================================================== */
html.cp-v2 .home-hero {
  border: 1.5px solid rgb(var(--ob-holo-sky-rgb) / 0.22);
  background: radial-gradient(circle at 18% 20%, rgb(var(--ob-holo-sky-rgb) / 0.16), transparent 45%), radial-gradient(circle at 82% 50%, rgb(var(--ob-holo-purple-rgb) / 0.18), transparent 50%), linear-gradient(145deg, rgba(7, 11, 22, 0.8) 0%, rgba(14, 23, 42, 0.76) 55%, rgba(19, 13, 38, 0.8) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 25px 60px -15px rgb(var(--ob-black-rgb) / 0.75), 0 0 40px -12px rgb(var(--ob-holo-sky-rgb) / 0.2);
}
html.cp-v2 .home-hero-title { font-size: clamp(2.1rem, 4.4vw, 3.5rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.06; background: linear-gradient(125deg, #ffffff 0%, var(--ob-holo-sky) 25%, var(--ob-holo-purple) 50%, var(--ob-holo-rose) 75%, #facc15 100%); background-size: 240% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: cpHoloFlow 6s ease infinite; }
html.cp-v2 .cp-live-pill { gap: 8px; padding: 6px 14px; background: rgb(var(--ob-green-rgb) / 0.12); border: 1px solid rgb(var(--ob-green-rgb) / 0.4); box-shadow: 0 0 20px rgb(var(--ob-green-rgb) / 0.15); margin-bottom: 0; }
html.cp-v2 #welcomeState .home-hero-eyebrow { display: none; }
html.cp-v2 .cp-live-pill .home-hero-eyebrow { display: inline; padding: 0; background: none; border: 0; color: #cbd5e1; font-family: var(--cp-font-sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; }
html.cp-v2 .cp-live-sep { color: rgb(var(--ob-white-rgb) / 0.3); }
html.cp-v2 .cp-live-txt { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 800; color: #6ee7b7; letter-spacing: 0.03em; }
html.cp-v2 .cp-cmd-search { background: rgba(9, 13, 24, 0.92); border: 1.5px solid rgb(var(--ob-aqua-rgb) / 0.4); border-radius: var(--ob-r-md); box-shadow: 0 14px 34px -10px rgb(var(--ob-black-rgb) / 0.7), 0 0 25px -8px rgb(var(--ob-aqua-rgb) / 0.25); }
html.cp-v2 .cp-cmd-search:focus-within { border-color: var(--ob-coral); box-shadow: 0 16px 38px -10px rgb(var(--ob-black-rgb) / 0.8), 0 0 30px -6px rgb(var(--ob-coral-rgb) / 0.35); }
html.cp-v2 .cp-cmd-search button { background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 55%, #ec4899 100%); border: 0; border-radius: var(--ob-r-sm); font-weight: 800; box-shadow: 0 6px 18px -4px rgba(236, 72, 153, 0.55); }
html.cp-v2 .cp-kbd { cursor: pointer; margin-right: 6px; }
html.cp-v2 .cp-kbd:hover { color: #fff; border-color: var(--cp-cyan); }
html.cp-v2 .cp-chips { gap: 7px; }
html.cp-v2 .cp-chip { font-size: 0.76rem; font-weight: 700; padding: 5px 12px; }
html.cp-v2 .cp-chip--msrp { border-color: rgb(var(--ob-green-rgb) / 0.45); background: rgb(var(--ob-green-rgb) / 0.12); color: #6ee7b7; }
html.cp-v2 .cp-chip--msrp:hover { background: rgb(var(--ob-green-rgb) / 0.24); border-color: var(--ob-green); color: #fff; }
html.cp-v2 .cp-foil-card { background: linear-gradient(135deg, var(--ob-holo-sky), var(--ob-holo-purple), var(--ob-holo-rose), #facc15, var(--ob-holo-emerald)); background-size: 300% 300%; animation: cpHoloFlow 6s ease infinite; box-shadow: 0 25px 50px -12px rgb(var(--ob-black-rgb) / 0.85), 0 0 35px -8px rgb(var(--ob-holo-purple-rgb) / 0.45); }
html.cp-v2 .cp-foil-inner { background: linear-gradient(165deg, #131c31 0%, #080d1a 100%); }
html.cp-v2 .cp-back-card { display: flex; flex-direction: column; justify-content: space-between; }
html.cp-v2 .cp-bc-art { font-size: var(--ob-fs-display); text-align: center; }
html.cp-v2 .cp-fc-ico { position: relative; font-size: 3rem; filter: drop-shadow(0 8px 16px rgb(var(--ob-black-rgb) / 0.6)); animation: obBob 4s ease-in-out infinite; }
html.cp-v2 :is(.offer-price-val, .dr-prices b, .dr-pct, .diff-pill, .uvp-value, .cx-stat-value, .dr-kpi b, .cx-card-price) { font-family: var(--cp-font-mono); letter-spacing: -0.02em; }
html.cp-v2[data-theme="light"] .home-hero { border-color: rgba(99, 102, 241, 0.25); background: radial-gradient(circle at 18% 20%, rgb(var(--ob-holo-sky-rgb) / 0.2), transparent 45%), radial-gradient(circle at 82% 50%, rgb(var(--ob-holo-purple-rgb) / 0.16), transparent 50%), linear-gradient(145deg, rgb(var(--ob-white-rgb) / 0.84), rgba(238, 240, 255, 0.8) 60%, rgba(247, 236, 255, 0.84)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 25px 60px -30px rgb(var(--ob-tint-rgb) / 0.5); }
html.cp-v2[data-theme="light"] .home-hero-title { background-image: linear-gradient(125deg, #12142b 0%, #0284c7 28%, #7c3aed 55%, var(--ob-coral-ink) 80%, #d97706 100%); }
html.cp-v2[data-theme="light"] .cp-live-pill .home-hero-eyebrow { color: #3b3f66; background: none; border: 0; }
html.cp-v2[data-theme="light"] .cp-live-txt { color: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] .cp-chip--msrp { color: var(--ob-green-ink); background: rgb(var(--ob-green-rgb) / 0.14); border-color: rgb(var(--ob-green-rgb) / 0.45); }
html.cp-v2[data-theme="light"] .cp-cmd-search button { background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 55%, #ec4899 100%) !important; border: 0 !important; }
html.cp-v2[data-theme="light"] .cp-foil-inner, html.cp-v2[data-theme="light"] .cp-back-card { color: var(--ob-ink); }

/* ==========================================================================
   v2.5 Migration: ALLE Startseiten-Elemente im neuen UI (Header, Menue, Widgets, Footer, Modals, Suche, Glocke, Cookie).
   v1-Variablen werden fuer v2 umgebogen, dann folgen gezielte Komponenten-Regeln (ein Satz fuer dunkel + hell ueber Variablen).
   ========================================================================== */

/* ---- Header-Steuerung ---- */
html.cp-v2 .cp-game-switch { background: var(--ob-field); border-color: var(--ob-line-2); }
html.cp-v2 .cp-game-switch button.active { background: var(--ob-accent-btn); color: #fff; box-shadow: 0 6px 18px -6px rgb(var(--ob-violet-rgb) / 0.7); }
html.cp-v2 .cp-game-switch button[data-cp-game="riftbound"].active { background: linear-gradient(135deg, var(--ob-aqua), #6366f1); }
html.cp-v2 .cp-game-switch button[data-cp-game="onepiece"].active { background: linear-gradient(135deg, var(--ob-amber), var(--ob-coral)); }
html.cp-v2 .header-country-switch-compact { background: var(--ob-field); border: 1px solid var(--ob-line); }
html.cp-v2 .hdr-search input { background: var(--ob-field); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); color: var(--ob-ink); transition: border-color var(--ob-dur-1) var(--ob-ease-out), box-shadow var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .hdr-search input:focus { border-color: rgb(var(--ob-violet-rgb) / 0.85); box-shadow: 0 0 0 3px rgb(var(--ob-violet-rgb) / 0.18); outline: none; }
html.cp-v2 :is(.hdr-search-go, .hdr-search-adv) { background: var(--ob-field); border: 1px solid var(--ob-line-2); color: var(--ob-ink); border-radius: var(--ob-r-sm); transition: background var(--ob-dur-1) var(--ob-ease-out), border-color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 :is(.hdr-search-go, .hdr-search-adv):hover { background: var(--ob-hover); border-color: rgb(var(--ob-violet-rgb) / 0.7); }
html.cp-v2 .news-bell-btn { color: var(--ob-mute); border-radius: var(--ob-r-sm); }
html.cp-v2 .news-bell-btn:hover, html.cp-v2 .news-bell-btn[aria-expanded="true"] { color: var(--ob-ink); background: var(--ob-hover); }
html.cp-v2 .news-bell-btn.has-unread { color: #c4b5fd; }
html.cp-v2[data-theme="light"] .news-bell-btn.has-unread { color: var(--ob-violet-ink); }
html.cp-v2 .news-bell-badge { background: linear-gradient(135deg, var(--ob-coral), #ff8a5c); color: #fff; box-shadow: 0 0 0 2px var(--ob-bg); }

/* ---- Glocke ---- */
html.cp-v2 .news-panel { background: var(--ob-pop); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); box-shadow: 0 30px 60px -20px rgb(var(--ob-black-rgb) / 0.8), 0 0 50px -24px var(--ob-glow); }
html.cp-v2[data-theme="light"] .news-panel { box-shadow: 0 30px 60px -24px rgb(var(--ob-tint-rgb) / 0.45); }
html.cp-v2 .news-panel-head { color: var(--ob-mute); letter-spacing: 0.12em; border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .news-item { border-bottom-color: var(--ob-line); transition: background var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .news-item:hover { background: var(--ob-field); }
html.cp-v2 .news-item.is-new { background: rgb(var(--ob-violet-rgb) / 0.08); box-shadow: inset 2px 0 0 var(--ob-violet); }
html.cp-v2 .news-item-main b { color: var(--ob-ink); }
html.cp-v2 .news-item-main p { color: var(--ob-mute); }
html.cp-v2 .news-chip { background: var(--ob-field); border-color: var(--ob-line-2); color: var(--ob-aqua); }
html.cp-v2[data-theme="light"] .news-chip { color: var(--ob-aqua-ink); }
html.cp-v2 .news-chip:hover { border-color: var(--ob-violet); background: rgb(var(--ob-violet-rgb) / 0.14); }
html.cp-v2 .news-chip-go { background: var(--ob-accent-btn) !important; color: #fff !important; box-shadow: 0 6px 16px -6px rgb(var(--ob-violet-rgb) / 0.7); }

/* ---- Glocke v2: Mitteilungen (Tabs, Zeilen wie im Deal-Radar, Fussleiste zu den Alarmen) ---- */
html.cp-v2 .news-panel.nv { width: min(400px, calc(100vw - 16px)); max-height: min(78vh, 640px); padding: 0; z-index: var(--ob-z-dropdown); }
html.cp-v2 .nv-head { display: flex; align-items: center; gap: 2px; padding: 8px 6px 6px var(--ob-s-5); flex: none; }
html.cp-v2 .nv-h { flex: 1; margin: 0; font-size: var(--ob-fs-base); font-weight: 700; letter-spacing: -0.01em; color: var(--ob-ink); }
html.cp-v2 .nv-ib, html.cp-v2 .nv .news-panel-close { width: var(--ob-tap); height: var(--ob-tap); flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-mute); cursor: pointer; font-size: inherit; }
html.cp-v2 .nv-ib:hover, html.cp-v2 .nv .news-panel-close:hover { background: var(--ob-hover); color: var(--ob-ink); border-color: transparent; }
html.cp-v2 .nv-ib .ob-icon, html.cp-v2 .nv .news-panel-close .ob-icon { width: var(--ob-icon); height: var(--ob-icon); }
html.cp-v2 .nv-seg { display: flex; gap: 2px; padding: 2px; margin: 0 var(--ob-s-5) var(--ob-s-3); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); flex: none; }
html.cp-v2 .nv-seg button { flex: 1; min-height: var(--ob-tap-min); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; border: 0; border-radius: var(--ob-r-xs); background: transparent; color: var(--ob-mute); font: inherit; font-size: var(--ob-fs-xs); font-weight: 650; cursor: pointer; white-space: nowrap; }
html.cp-v2 .nv-seg button.on { background: rgb(var(--ob-violet-rgb) / 0.16); color: var(--ob-ink); }
html.cp-v2 .nv-seg em { font-style: normal; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-dim); }
html.cp-v2 .nv-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; border-top: 1px solid var(--ob-line); }
html.cp-v2 .nv-row { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--ob-s-3); padding: 14px 48px 14px var(--ob-s-5); border-bottom: 1px solid var(--ob-line); transition: background var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .nv-row:hover { background: var(--ob-field); }
html.cp-v2 .nv-row.is-new, html.cp-v2 .nv-fresh.is-new { background: rgb(var(--ob-violet-rgb) / 0.1); }
html.cp-v2 .nv-row.is-new::before { content: ""; position: absolute; left: 7px; top: 22px; width: 6px; height: 6px; border-radius: var(--ob-r-pill); background: var(--ob-violet); }
html.cp-v2 .nv-tile { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--ob-r-xs); border: 1px solid var(--ob-line); background: var(--ob-field); color: var(--ob-mute); }
html.cp-v2 .nv-tile .ob-icon { width: var(--ob-icon); height: var(--ob-icon); }
html.cp-v2 .nv-tile.al { color: var(--ob-coral); }
html.cp-v2 .nv-tile.dn, html.cp-v2 .nv-tile.ok { color: var(--ob-green); }
html.cp-v2 .nv-tile.rs { color: var(--ob-aqua); }
html.cp-v2 .nv-tile.nw { color: var(--ob-violet-text); }
html.cp-v2 .nv-b { display: grid; gap: 3px; min-width: 0; }
html.cp-v2 .nv-e { display: flex; gap: var(--ob-s-2); align-items: baseline; overflow: hidden; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ob-dim); }
html.cp-v2 .nv-e span { white-space: nowrap; flex: none; }
html.cp-v2 .nv-e span:not(.nv-k):not(.nv-w) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.cp-v2 .nv-k { color: var(--ob-violet-text); }
html.cp-v2 .nv-w { margin-left: auto; letter-spacing: 0; text-transform: none; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-dim); white-space: nowrap; }
html.cp-v2 .nv-t { font-size: var(--ob-fs-md); font-weight: 650; line-height: 1.35; color: var(--ob-ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
html.cp-v2 a.nv-go::after { content: ""; position: absolute; inset: 0; }
html.cp-v2 a.nv-go:focus-visible { outline: none; }
html.cp-v2 a.nv-go:focus-visible::after { outline: 2px solid var(--ob-aqua); outline-offset: -2px; }
html.cp-v2 .nv-p { display: flex; flex-wrap: wrap; gap: 4px var(--ob-s-2); align-items: baseline; font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .nv-p b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-md); font-weight: 700; color: var(--ob-ink); }
html.cp-v2 .nv-p s { font-family: var(--cp-font-mono); color: var(--ob-dim); }
html.cp-v2 .nv-pc { font-family: var(--cp-font-mono); font-weight: 700; color: var(--ob-green); }
html.cp-v2 .nv-tx { margin: 0; font-size: var(--ob-fs-xs); line-height: 1.45; color: var(--ob-mute); overflow-wrap: anywhere; }
html.cp-v2 .nv-l { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px var(--ob-s-4); margin-top: 4px; }
html.cp-v2 .nv-l a, html.cp-v2 .nv-fresh a { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; color: var(--ob-aqua); font-size: var(--ob-fs-xs); font-weight: 650; text-decoration: none; }
html.cp-v2 .nv-l a:hover, html.cp-v2 .nv-fresh a:hover { text-decoration: underline; }
html.cp-v2 .nv .nv-x { position: absolute; z-index: 1; top: 6px; right: 4px; 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-dim); cursor: pointer; opacity: 1; }
html.cp-v2 .nv .nv-x:hover { background: var(--ob-hover); color: var(--ob-ink); }
html.cp-v2 .nv-fresh { position: relative; display: flex; align-items: center; gap: var(--ob-s-3); padding: 10px 48px 10px var(--ob-s-5); border-bottom: 1px solid var(--ob-line); font-size: var(--ob-fs-xs); }
html.cp-v2 .nv-fresh .nv-tile { width: 28px; height: 28px; }
html.cp-v2 .nv-fresh .nv-tile .ob-icon { width: var(--ob-icon-sm); height: var(--ob-icon-sm); }
html.cp-v2 .nv-fresh b { flex: 1; min-width: 0; color: var(--ob-ink); font-weight: 650; }
html.cp-v2 .nv-fresh a { white-space: nowrap; }
html.cp-v2 .nv-fresh .nv-x { top: 50%; transform: translateY(-50%); }
html.cp-v2 .nv-empty { display: grid; justify-items: center; gap: var(--ob-s-2); padding: var(--ob-s-7) var(--ob-s-6); text-align: center; }
html.cp-v2 .nv-empty .nv-tile { width: 48px; height: 48px; border-radius: var(--ob-r-sm); }
html.cp-v2 .nv-empty b { font-size: var(--ob-fs-md); color: var(--ob-ink); }
html.cp-v2 .nv-empty p { margin: 0; max-width: 30ch; font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .nv-promo { display: grid; gap: var(--ob-s-2); margin: 0 var(--ob-s-5) var(--ob-s-3); padding: 14px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); background: var(--ob-card); flex: none; }
html.cp-v2 .nv-promo b { font-size: var(--ob-fs-md); color: var(--ob-ink); }
html.cp-v2 .nv-promo p { margin: 0; font-size: var(--ob-fs-sm); line-height: 1.45; color: var(--ob-mute); }
html.cp-v2 .nv-foot { display: flex; gap: var(--ob-s-2); padding: var(--ob-s-3) var(--ob-s-5) 14px; border-top: 1px solid var(--ob-line); background: var(--ob-pop); flex: none; }
html.cp-v2 .nv-btn { flex: 1; min-height: var(--ob-tap); display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--ob-s-3); border-radius: var(--ob-r-sm); font: inherit; font-size: var(--ob-fs-sm); font-weight: 700; cursor: pointer; }
html.cp-v2 .nv-btn.p { border: 0; background: var(--ob-accent-btn); color: rgb(var(--ob-white-rgb)); }
html.cp-v2 .nv-btn.q { border: 1px solid var(--ob-line-2); background: transparent; color: var(--ob-ink); }
html.cp-v2 .nv-btn.q:hover { background: var(--ob-hover); }
html.cp-v2 .nv button:focus-visible, html.cp-v2 .nv-l a:focus-visible, html.cp-v2 .nv-fresh a:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2[data-theme="light"] .nv-t { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .nv .news-panel-close { background: transparent !important; border: 0 !important; color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .nv .news-panel-close:hover { background: var(--ob-hover) !important; color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .nv-tile.al { color: var(--ob-coral-ink) !important; }
html.cp-v2[data-theme="light"] .nv-tile.dn, html.cp-v2[data-theme="light"] .nv-tile.ok, html.cp-v2[data-theme="light"] .nv-pc { color: var(--ob-green-ink) !important; }
html.cp-v2[data-theme="light"] .nv-tile.rs, html.cp-v2[data-theme="light"] .nv-l a, html.cp-v2[data-theme="light"] .nv-fresh a { color: var(--ob-aqua-ink) !important; }
/* ---- Alarm-Verwaltung v2 (Konto-Modal + Riftbound-Alarmfenster) ---- */
html.cp-v2 .al2-list { gap: var(--ob-s-2) !important; }
html.cp-v2 .al2-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: var(--ob-s-1) var(--ob-s-3); padding: 10px 6px 10px var(--ob-s-3); border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); }
html.cp-v2 .al2-b { display: grid; gap: 2px; min-width: 0; }
html.cp-v2 .al2-b b { font-size: var(--ob-fs-sm); font-weight: 650; color: var(--ob-ink); overflow-wrap: anywhere; }
html.cp-v2 .al2-b small { font-size: var(--ob-fs-xs); color: var(--ob-mute); line-height: 1.4; overflow-wrap: anywhere; }
html.cp-v2 .al2-ib { border-color: transparent; }
html.cp-v2 .al2-ib .ob-icon { width: var(--ob-icon-sm); height: var(--ob-icon-sm); }
html.cp-v2 .al2-ib.al2-del:hover { color: var(--ob-coral); border-color: rgb(var(--ob-coral-rgb) / 0.5); }
html.cp-v2[data-theme="light"] .al2-ib.al2-del:hover { color: var(--ob-coral-ink) !important; }
/* Formular: Ausloeser/Sprache als Chips in einer Zeile, ohne Emojis (Flaggen bleiben) */
html.cp-v2 :is(#newAlertForm, #rbAlertForm, #alertsCountryTabs) .trigger-type-icon:not(:has(.table-flag-icon)), html.cp-v2 :is(#newAlertForm, #opAlertForm, #alertsCountryTabs) .trigger-type-icon:not(:has(.table-flag-icon)) { display: none; }
html.cp-v2 :is(#newAlertForm, #rbAlertForm, .account-alerts-section) .trigger-type-tabs, html.cp-v2 :is(#newAlertForm, #opAlertForm, .account-alerts-section) .trigger-type-tabs { flex-wrap: wrap; gap: 6px; }
html.cp-v2 :is(#newAlertForm, #rbAlertForm, .account-alerts-section) .trigger-type-btn, html.cp-v2 :is(#newAlertForm, #opAlertForm, .account-alerts-section) .trigger-type-btn { flex: 0 1 auto; flex-direction: row; gap: 6px; min-height: var(--ob-tap-min); padding: 6px 12px; font-size: var(--ob-fs-xs); font-weight: 650; box-shadow: none; }
html.cp-v2 :is(#newAlertForm, #rbAlertForm, .account-alerts-section) .trigger-type-btn .trigger-type-icon, html.cp-v2 :is(#newAlertForm, #opAlertForm, .account-alerts-section) .trigger-type-btn .trigger-type-icon { font-size: inherit; }
html.cp-v2[data-theme="light"] :is(#newAlertForm, #rbAlertForm, .account-alerts-section) .trigger-type-btn, html.cp-v2[data-theme="light"] :is(#newAlertForm, #opAlertForm, .account-alerts-section) .trigger-type-btn { background: var(--ob-surface) !important; border-color: var(--ob-line-2) !important; color: var(--ob-mute) !important; box-shadow: none !important; }
html.cp-v2[data-theme="light"] :is(#newAlertForm, #rbAlertForm, .account-alerts-section) .trigger-type-btn.active, html.cp-v2[data-theme="light"] :is(#newAlertForm, #opAlertForm, .account-alerts-section) .trigger-type-btn.active { background: rgb(var(--ob-violet-rgb) / 0.12) !important; border-color: var(--ob-violet-ink) !important; color: var(--ob-ink) !important; }
html.cp-v2 #alertFormModeLabel { color: var(--ob-violet-text) !important; }
/* Riftbound-Alarmfenster */
html.cp-v2 #rbAlertModal, html.cp-v2 #opAlertModal { background: var(--ob-backdrop); z-index: var(--ob-z-sheet); }
html.cp-v2 #rbAlertModal .cx-share-dialog, html.cp-v2 #opAlertModal .cx-share-dialog { max-width: var(--ob-pop-w-s); padding: var(--ob-s-5); background: var(--ob-pop); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); box-shadow: var(--ob-shadow-2); }
html.cp-v2 #rbAlertModal .cx-share-panel, html.cp-v2 #opAlertModal .cx-share-panel { margin: 0; padding: 0; max-width: none; background: transparent; border: 0; }
html.cp-v2 #rbAlertModal .cx-share-panel > b, html.cp-v2 #opAlertModal .cx-share-panel > b { display: block; padding-right: 48px; font-size: var(--ob-fs-base); font-weight: 700; color: var(--ob-ink); }
html.cp-v2 #rbAlertModal .cx-share-panel > p, html.cp-v2 #opAlertModal .cx-share-panel > p { margin: 4px 0 var(--ob-s-4); font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 #rbAlertModal .cx-share-x-btn, html.cp-v2 #opAlertModal .cx-share-x-btn { top: 10px; right: 10px; width: var(--ob-tap); height: var(--ob-tap); display: grid; place-items: center; border: 0; border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-mute); }
html.cp-v2 #rbAlertModal .cx-share-x-btn:hover, html.cp-v2 #opAlertModal .cx-share-x-btn:hover { background: var(--ob-hover); color: var(--ob-ink); }
html.cp-v2 #rbAlertModal .cx-link-btn, html.cp-v2 #opAlertModal .cx-link-btn { min-height: var(--ob-tap); padding: 0 var(--ob-s-4); border-radius: var(--ob-r-sm); font-size: var(--ob-fs-sm); font-weight: 700; border: 1px solid var(--ob-line-2); background: transparent; color: var(--ob-ink); box-shadow: none; }
html.cp-v2 #rbAlertModal .cx-link-btn.accent, html.cp-v2 #opAlertModal .cx-link-btn.accent { border-color: transparent; background: var(--ob-accent-btn); color: rgb(var(--ob-white-rgb)); }
html.cp-v2 #rbAlertModal .cx-share-row, html.cp-v2 #opAlertModal .cx-share-row { display: flex; gap: var(--ob-s-2); }
html.cp-v2 #rbAlertModal .cx-share-row .cx-link-btn, html.cp-v2 #opAlertModal .cx-share-row .cx-link-btn { flex: 1; justify-content: center; }
html.cp-v2[data-theme="light"] #rbAlertModal .cx-share-panel, html.cp-v2[data-theme="light"] #opAlertModal .cx-share-panel { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html.cp-v2[data-theme="light"] #rbAlertModal .cx-share-dialog, html.cp-v2[data-theme="light"] #opAlertModal .cx-share-dialog { background: var(--ob-pop) !important; }
html.cp-v2[data-theme="light"] #rbAlertModal .cx-share-x-btn, html.cp-v2[data-theme="light"] #opAlertModal .cx-share-x-btn { background: transparent !important; border: 0 !important; color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] #rbAlertModal .cx-link-btn:not(.accent), html.cp-v2[data-theme="light"] #opAlertModal .cx-link-btn:not(.accent) { background: transparent !important; color: var(--ob-ink) !important; border-color: var(--ob-line-2) !important; }
html.cp-v2[data-theme="light"] #rbAlertModal .cx-link-btn.accent, html.cp-v2[data-theme="light"] #opAlertModal .cx-link-btn.accent { background: var(--ob-accent-btn) !important; color: rgb(var(--ob-white-rgb)) !important; }
@media (max-width: 600px) {
  html.cp-v2 .news-panel.nv { width: auto; max-height: var(--ob-sheet-max); border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; padding-top: 10px; z-index: calc(var(--ob-z-sheet) + 100); display: flex; overflow: hidden; }
  html.cp-v2 .news-panel.nv[hidden] { display: none; } /* sonst gewinnt display:flex von oben und das geschlossene Panel bleibt sichtbar */
  html.cp-v2 .news-panel.nv::before { width: 40px; height: 5px; margin: 0 auto 2px; background: var(--ob-line-2); }
  html.cp-v2 .nv-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  html.cp-v2 .nv-list:last-child { padding-bottom: env(safe-area-inset-bottom, 0px); }
  html.cp-v2 #rbAlertModal, html.cp-v2 #opAlertModal { align-items: flex-end; padding: 0; }
  html.cp-v2 #rbAlertModal .cx-share-dialog, html.cp-v2 #opAlertModal .cx-share-dialog { max-width: none; max-height: var(--ob-sheet-max); border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; border-bottom: 0; padding-bottom: calc(var(--ob-s-5) + env(safe-area-inset-bottom, 0px)); }
  html.cp-v2 #rbAlertModal .cx-share-dialog::before, html.cp-v2 #opAlertModal .cx-share-dialog::before { content: ""; display: block; width: 40px; height: 5px; margin: -8px auto var(--ob-s-3); border-radius: var(--ob-r-pill); background: var(--ob-line-2); }
}

/* ---- Seiten-Menue ---- */
html.cp-v2 .site-menu-backdrop { background: rgba(3, 4, 10, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.cp-v2 .site-menu-panel {
  background: radial-gradient(80% 30% at 100% 0%, rgb(var(--ob-violet-rgb) / 0.18), transparent 70%), var(--ob-pop); border-left: 1px solid var(--ob-line-2);
  box-shadow: -30px 0 80px -30px rgb(var(--ob-black-rgb) / 0.9), -1px 0 0 rgb(var(--ob-violet-rgb) / 0.25);
}
html.cp-v2[data-theme="light"] .site-menu-panel { background: radial-gradient(80% 30% at 100% 0%, rgb(var(--ob-violet-rgb) / 0.12), transparent 70%), #fff; box-shadow: -30px 0 80px -36px rgb(var(--ob-tint-rgb) / 0.5); }
html.cp-v2 .site-menu-divider { border-top-color: var(--ob-line); }
html.cp-v2 .site-menu-account-btn { background: var(--ob-field); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); color: var(--ob-ink); transition: background var(--ob-dur-1) var(--ob-ease-out), border-color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .site-menu-account-btn:hover { background: var(--ob-hover); border-color: rgb(var(--ob-violet-rgb) / 0.7); }
html.cp-v2 .site-menu-account-icon { background: var(--ob-accent-btn); color: #fff; }
html.cp-v2 .site-menu-close-btn { color: var(--ob-mute); }
html.cp-v2 .site-menu-close-btn:hover { color: var(--ob-ink); }
html.cp-v2 .site-menu-vline { background: var(--ob-line-2); }
html.cp-v2 .site-menu-section-label, html.cp-v2 .theme-switch-label { color: var(--ob-mute); letter-spacing: 0.12em; }
html.cp-v2 .site-menu-guides-label { color: var(--ob-aqua); }
html.cp-v2[data-theme="light"] .site-menu-guides-label { color: var(--ob-aqua-ink); }
html.cp-v2 .theme-switch-opts { background: var(--ob-field); border-color: var(--ob-line-2); border-radius: var(--ob-r-pill); }
html.cp-v2 .theme-switch-opts button { border-radius: var(--ob-r-pill); color: var(--ob-mute); }
html.cp-v2 .theme-switch-opts button.active { background: var(--ob-accent-btn); color: #fff; box-shadow: 0 6px 16px -6px rgb(var(--ob-violet-rgb) / 0.75); }
html.cp-v2 .site-menu-feature-link { background: var(--ob-card), var(--ob-field); background: var(--ob-field); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); color: var(--ob-ink); transition: transform var(--ob-dur-2) var(--cp-ease), border-color var(--ob-dur-2) var(--ob-ease-out), background var(--ob-dur-2) var(--ob-ease-out), box-shadow var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .site-menu-feature-link:hover { transform: translateX(-3px); background: rgb(var(--ob-violet-rgb) / 0.12); border-color: rgb(var(--ob-violet-rgb) / 0.55); box-shadow: 0 14px 30px -18px var(--ob-glow); }
html.cp-v2 .site-menu-feature-link small { color: var(--ob-mute); }
html.cp-v2 .site-menu-feature-prices { background: linear-gradient(135deg, rgb(var(--ob-violet-rgb) / 0.2), rgb(var(--ob-aqua-rgb) / 0.12)); border-color: rgb(var(--ob-violet-rgb) / 0.4); }
html.cp-v2 .site-menu-all-link { color: var(--ob-aqua); }
html.cp-v2[data-theme="light"] .site-menu-all-link { color: var(--ob-aqua-ink); }
html.cp-v2 .site-menu-foot { background: var(--ob-pop); border-top: 1px solid var(--ob-line); }
html.cp-v2 .site-menu-foot-btn { color: var(--ob-mute); border-radius: var(--ob-r-sm); transition: color var(--ob-dur-1) var(--ob-ease-out), background var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .site-menu-foot-btn:hover { color: var(--ob-ink); background: var(--ob-hover); }

/* ---- Startseiten-Widgets: Deal Radar, Guides, Beliebte Sets, Schnellzugriff, Suche, Sammlung, Wunschliste ---- */
html.cp-v2 .hc-hl { color: transparent; background: var(--ob-accent); -webkit-background-clip: text; background-clip: text; }
html.cp-v2 .hc-title, html.cp-v2 .home-radar-title { color: var(--ob-ink); letter-spacing: -0.03em; }
html.cp-v2 .setguide-eyebrow, html.cp-v2 .hc-simtag { font-family: var(--cp-font-mono); color: var(--ob-aqua); letter-spacing: 0.12em; }
html.cp-v2[data-theme="light"] :is(.setguide-eyebrow, .hc-simtag) { color: var(--ob-aqua-ink); }
html.cp-v2 :is(.hb-sub, .setguide-hero-sub, .hc-simsub) { color: var(--ob-mute); }
html.cp-v2 :is(.dr-kpi, .cx-stat, .hs-b-search, .hs-b-sets, .hs-b-trends, .home-quick-tile, .home-highlight-card, .hw-row, .hs-set, .hs-chip, .hbl-card, .hb-cal-row, .hb-card) { border-color: var(--ob-line); }
html.cp-v2 .dr-kpi { background: var(--ob-card), var(--ob-field); background: var(--ob-field); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); }
html.cp-v2 .dr-kpi b { font-family: var(--cp-font-mono); }
html.cp-v2 .dr-trend { color: var(--ob-mute); }
html.cp-v2 .dr-card { gap: 12px; }
html.cp-v2 .dr-title { color: var(--ob-ink); font-weight: 700; }
html.cp-v2 .dr-meta { color: var(--ob-mute); }
html.cp-v2 .type-badge { background: var(--ob-field); border: 1px solid var(--ob-line); color: var(--ob-mute); border-radius: var(--ob-r-xs); }
html.cp-v2 .history-btn { background: rgb(var(--ob-aqua-rgb) / 0.1); border: 1px solid rgb(var(--ob-aqua-rgb) / 0.35); color: var(--ob-aqua); border-radius: var(--ob-r-sm); font-weight: 800; transition: background var(--ob-dur-1) var(--ob-ease-out), border-color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2[data-theme="light"] .history-btn { color: var(--ob-aqua-ink); }
html.cp-v2 .history-btn:hover { background: rgb(var(--ob-aqua-rgb) / 0.2); border-color: var(--ob-aqua); }
html.cp-v2 .dr-prices s, html.cp-v2 .dr-prices del { color: var(--ob-dim); }
html.cp-v2 .popular-set-tile-card, html.cp-v2 .flip-card-front { background: var(--ob-card), var(--ob-glass); }
html.cp-v2 .popular-set-tile-divider { border-color: var(--ob-line); background: var(--ob-line); }
html.cp-v2 :is(.popular-set-tile-instock, .popular-set-tile-footer) { color: var(--ob-mute); }
html.cp-v2 :is(.top-guide-card-name, .popular-set-tile-fallback-name) { color: var(--ob-ink); letter-spacing: -0.02em; }
html.cp-v2 .top-guide-card-guide-label { color: var(--ob-aqua); font-family: var(--cp-font-mono); }
html.cp-v2 :is(.guide-link-new-badge, .top-guide-card-badge, .home-new-badge) { background: var(--ob-accent-btn); color: #fff; border: 0; border-radius: var(--ob-r-pill); }
html.cp-v2 :is(.hs-input, .hs-btn) { border-radius: var(--ob-r-md); }
html.cp-v2 .hs-input { background: var(--ob-field); border: 1px solid var(--ob-line-2); color: var(--ob-ink); }
html.cp-v2 .hs-input:focus { border-color: rgb(var(--ob-violet-rgb) / 0.85); box-shadow: 0 0 0 3px rgb(var(--ob-violet-rgb) / 0.18); outline: none; }
html.cp-v2 .hs-btn { background: var(--ob-accent-btn); color: #fff; border: 0; font-weight: 800; box-shadow: 0 10px 24px -10px rgb(var(--ob-violet-rgb) / 0.75); }
html.cp-v2 :is(.hs-chip, .hs-set, .home-quick-tile, .home-highlight-card) { background: var(--ob-card), var(--ob-field); background: var(--ob-field); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); color: var(--ob-ink); transition: transform var(--ob-dur-2) var(--cp-ease), border-color var(--ob-dur-2) var(--ob-ease-out), background var(--ob-dur-2) var(--ob-ease-out), box-shadow var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 :is(.hs-chip, .hs-set, .home-quick-tile, .home-highlight-card):hover { transform: translateY(-2px); background: rgb(var(--ob-violet-rgb) / 0.1); border-color: rgb(var(--ob-violet-rgb) / 0.5); box-shadow: 0 20px 36px -24px var(--ob-glow); }
html.cp-v2 .home-highlight-card.free { border-color: rgb(var(--ob-green-rgb) / 0.45); }
html.cp-v2 :is(.home-highlight-card b, .home-seo-content h2) { color: var(--ob-ink); }
html.cp-v2 :is(.home-seo-content p, .home-highlight-card div) { color: var(--ob-mute); }
html.cp-v2 .hw-title { color: var(--ob-ink); }
html.cp-v2 .hw-badge { background: var(--ob-accent-btn); color: #fff; border: 0; }
html.cp-v2 .cx-stat-icon { filter: drop-shadow(0 4px 10px rgb(var(--ob-violet-rgb) / 0.5)); }
html.cp-v2 .cx-stat-label { color: var(--ob-mute); }
html.cp-v2 .cx-stat-value { color: var(--ob-ink); }
html.cp-v2 :is(.setguide-scroll-btn, .home-load-more-btn, .cp-hl-btn, .cp-hl-open) { border-radius: var(--ob-r-md); }
html.cp-v2 .cp-hl-open, html.cp-v2 .cp-hl-btn { background: var(--ob-field); border: 1px solid var(--ob-line-2); color: var(--ob-ink); }
html.cp-v2 .cp-hl-open:hover, html.cp-v2 .cp-hl-btn:hover { background: var(--ob-hover); border-color: rgb(var(--ob-violet-rgb) / 0.7); }

html.cp-v2[data-theme="light"] .btn-search:not(:disabled) { background: linear-gradient(180deg, rgb(var(--ob-white-rgb) / 0.22), rgb(var(--ob-white-rgb) / 0) 55%), var(--ob-accent) !important; color: #fff !important; border: 1px solid rgb(var(--ob-white-rgb) / 0.4) !important; box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.45), 0 12px 28px -10px rgba(99, 80, 230, 0.6) !important; }
html.cp-v2[data-theme="light"] :is(.site-menu-account-btn, .site-menu-feature-link, .modal-close-btn, .footer-icon-btn, .multiselect-btn, .hs-input) { background: var(--ob-field) !important; color: var(--ob-ink) !important; border-color: var(--ob-line-2) !important; }
html.cp-v2[data-theme="light"] .theme-switch-opts button.active, html.cp-v2[data-theme="light"] .curr-btn.active { background: var(--ob-accent-btn) !important; color: #fff !important; }
html.cp-v2[data-theme="light"] .news-chip-go { background: var(--ob-accent-btn) !important; color: #fff !important; border-color: transparent !important; }

/* ---- Footer + Einstellungen ---- */
html.cp-v2 footer { color: var(--ob-mute); }
html.cp-v2 .footer-brand { color: var(--ob-mute); }
html.cp-v2 .footer-icon-btn { background: var(--ob-field); border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); color: var(--ob-ink); transition: background var(--ob-dur-1) var(--ob-ease-out), border-color var(--ob-dur-1) var(--ob-ease-out), transform var(--ob-dur-2) var(--cp-ease); }
html.cp-v2 .footer-icon-btn:hover { background: var(--ob-hover); border-color: rgb(var(--ob-violet-rgb) / 0.6); transform: translateY(-2px); }
html.cp-v2 .settings-menu { background: var(--ob-pop); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); box-shadow: 0 30px 60px -20px rgb(var(--ob-black-rgb) / 0.8); }
html.cp-v2[data-theme="light"] .settings-menu { box-shadow: 0 30px 60px -24px rgb(var(--ob-tint-rgb) / 0.45); }
html.cp-v2 .settings-label { color: var(--ob-mute); letter-spacing: 0.1em; }
html.cp-v2 .currency-switch { background: var(--ob-field); border: 1px solid var(--ob-line); border-radius: var(--ob-r-pill); }
html.cp-v2 .curr-btn { border-radius: var(--ob-r-pill); color: var(--ob-mute); }
html.cp-v2 .curr-btn.active { background: var(--ob-accent-btn); color: #fff; border-color: transparent; }
html.cp-v2 .lang-option { border-radius: var(--ob-r-sm); color: var(--ob-ink); }
html.cp-v2 .lang-option:hover { background: var(--ob-hover); }
html.cp-v2 .lang-option.active { background: rgb(var(--ob-violet-rgb) / 0.16); border-color: rgb(var(--ob-violet-rgb) / 0.5); }
html.cp-v2 .settings-switch-slider { background: var(--ob-hover); }
html.cp-v2 input:checked + .settings-switch-slider { background: var(--ob-violet); }

/* ---- Modals (Konto, Kontakt, Info, Recht, Verlauf) ---- */
html.cp-v2 .modal-backdrop { background: rgba(3, 4, 10, 0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html.cp-v2 .modal-content { background: radial-gradient(80% 25% at 100% 0%, rgb(var(--ob-violet-rgb) / 0.16), transparent 70%), var(--ob-pop); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-tile); box-shadow: 0 40px 90px -30px rgb(var(--ob-black-rgb) / 0.9), 0 0 70px -34px var(--ob-glow); color: var(--ob-ink); }
html.cp-v2[data-theme="light"] .modal-content { background: radial-gradient(80% 25% at 100% 0%, rgb(var(--ob-violet-rgb) / 0.1), transparent 70%), #fff; box-shadow: 0 40px 90px -36px rgb(var(--ob-tint-rgb) / 0.55); }
html.cp-v2 .modal-header { border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .modal-title { color: var(--ob-ink); letter-spacing: -0.02em; }
html.cp-v2 .modal-close-btn { background: var(--ob-field); border: 1px solid var(--ob-line); color: var(--ob-mute); border-radius: var(--ob-r-sm); transition: background var(--ob-dur-1) var(--ob-ease-out), color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .modal-close-btn:hover { background: var(--ob-hover); color: var(--ob-ink); }
html.cp-v2 .modal-body { color: var(--ob-mute); }
html.cp-v2 .info-tabs { border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .info-tab-btn { color: var(--ob-mute); transition: color var(--ob-dur-1) var(--ob-ease-out), background var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .info-tab-btn.active { color: var(--ob-ink); box-shadow: inset 0 -2px 0 var(--ob-violet); background: rgb(var(--ob-violet-rgb) / 0.08); }
html.cp-v2 :is(.contact-form input, .contact-form textarea, .contact-form select, .modal-content input[type="text"], .modal-content input[type="email"], .modal-content input[type="number"]) { background: var(--ob-field); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); color: var(--ob-ink); transition: border-color var(--ob-dur-1) var(--ob-ease-out), box-shadow var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 :is(.contact-form input, .contact-form textarea):focus { border-color: rgb(var(--ob-violet-rgb) / 0.85); box-shadow: 0 0 0 3px rgb(var(--ob-violet-rgb) / 0.18); outline: none; }
html.cp-v2 .contact-label { color: var(--ob-mute); }
html.cp-v2 .btn-search { background: linear-gradient(180deg, rgb(var(--ob-white-rgb) / 0.22), rgb(var(--ob-white-rgb) / 0) 55%), var(--ob-accent); color: #fff; border: 1px solid rgb(var(--ob-white-rgb) / 0.25); border-radius: var(--ob-r-md); font-weight: 800; box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.4), 0 12px 28px -10px rgb(var(--ob-violet-rgb) / 0.7); transition: transform var(--ob-dur-2) var(--cp-ease), filter var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .btn-search:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); }
html.cp-v2 .btn-search:disabled { opacity: 0.5; box-shadow: none; }
html.cp-v2 .btn-google, html.cp-v2 .filter-btn { border-radius: var(--ob-r-md); }
html.cp-v2 .trigger-type-btn { background: var(--ob-field); border: 1px solid var(--ob-line-2); color: var(--ob-mute); border-radius: var(--ob-r-sm); transition: border-color var(--ob-dur-1) var(--ob-ease-out), background var(--ob-dur-1) var(--ob-ease-out), color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .trigger-type-btn.active { background: rgb(var(--ob-violet-rgb) / 0.18); border-color: var(--ob-violet); color: var(--ob-ink); }
html.cp-v2 .account-avatar { background: var(--ob-accent-btn); color: #fff; }
html.cp-v2 .account-stat { background: var(--ob-field); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); }
html.cp-v2 :is(.account-admin-badge, .account-beta-badge) { background: var(--ob-accent-btn); color: #fff; border: 0; }
html.cp-v2 .or-divider span { color: var(--ob-dim); }

/* ---- Such-Panel, Dropdowns, Autocomplete, FAB ---- */
html.cp-v2 .collapsible-search-wrapper { background: var(--ob-pop); border: 1px solid var(--ob-line-2); box-shadow: 0 40px 90px -30px rgb(var(--ob-black-rgb) / 0.9), 0 0 60px -34px var(--ob-glow); }
html.cp-v2 .search-inputs-container { background: transparent; }
html.cp-v2 :is(.cp-sp-title, .cp-sp-h-t) { color: var(--ob-ink); letter-spacing: -0.02em; }
html.cp-v2 :is(.cp-sp-game, .cp-sp-note, .cp-sp-fcount, .cp-sp-fl) { color: var(--ob-mute); }
html.cp-v2 .cp-sp-kbd { font-family: var(--cp-font-mono); background: var(--ob-field); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-xs); color: var(--ob-mute); }
html.cp-v2 .cp-sp-x { background: var(--ob-field); border: 1px solid var(--ob-line); color: var(--ob-mute); border-radius: var(--ob-r-sm); }
html.cp-v2 .cp-sp-x:hover { background: var(--ob-hover); color: var(--ob-ink); }
html.cp-v2 :is(.cp-sp-chips > *, .cp-sp-fchip, .cp-sp-ftoggle, .cp-sp-link-btn, .bc-scan-btn) { border-color: var(--ob-line-2); border-radius: var(--ob-r-pill); }
html.cp-v2 .cp-sp-sec, html.cp-v2 .cp-sp-filters { border-color: var(--ob-line); }
html.cp-v2 :is(.multiselect-btn, .search-input-wrapper input, #setFilterInput, #shopFilterInput) { background: var(--ob-field); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); color: var(--ob-ink); transition: border-color var(--ob-dur-1) var(--ob-ease-out), box-shadow var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .multiselect-btn:hover, html.cp-v2 .multiselect-box.open .multiselect-btn { border-color: rgb(var(--ob-violet-rgb) / 0.7); }
html.cp-v2 .multiselect-menu { background: var(--ob-pop); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); box-shadow: 0 30px 60px -20px rgb(var(--ob-black-rgb) / 0.8); }
html.cp-v2[data-theme="light"] .multiselect-menu { box-shadow: 0 30px 60px -24px rgb(var(--ob-tint-rgb) / 0.45); }
html.cp-v2 .multiselect-header { border-bottom-color: var(--ob-line); }
html.cp-v2 .multiselect-clear-btn { background: var(--ob-field); border: 1px solid var(--ob-line-2); color: var(--ob-ink); border-radius: var(--ob-r-sm); }
html.cp-v2 .multiselect-item:hover { background: rgb(var(--ob-violet-rgb) / 0.12); }
html.cp-v2 .multiselect-badge { background: var(--ob-accent-btn); color: #fff; }
html.cp-v2 #autocomplete-dropdown { background: var(--ob-pop); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); box-shadow: 0 30px 60px -20px rgb(var(--ob-black-rgb) / 0.8); }
html.cp-v2 .btn-toggle-search { border-radius: var(--ob-r-md); box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.45), 0 18px 40px -12px rgb(var(--ob-violet-rgb) / 0.8); }

/* ---- Cookie, PWA, Weiterleitung ---- */
html.cp-v2 .cookie-consent-banner { background: var(--ob-glass); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); border-top: 1px solid var(--ob-line-2); box-shadow: 0 -20px 50px -24px rgb(var(--ob-black-rgb) / 0.8); color: var(--ob-ink); }
html.cp-v2 .cookie-consent-text { color: var(--ob-mute); }
/* Kleinste Schrift 12 px (S13): feste Werte aus style.css unter v2 auf --ob-fs-xs */
html.cp-v2 :is(.rb-dim-inline, .setguide-eyebrow, .cx-gate-badge, .cx-gate-hint, .rb-lang, .hc-change), html.cp-v2 :is(.op-dim-inline, .setguide-eyebrow, .cx-gate-badge, .cx-gate-hint, .op-lang, .hc-change) { font-size: var(--ob-fs-xs); }
html.cp-v2 .cookie-consent-text { font-size: var(--ob-fs-sm); } /* = 12,8 px, wie Desktop; v1-Handy-Regel (0,74rem) hob es nicht an */
html.cp-v2 .cookie-consent-link { color: var(--ob-aqua); }
html.cp-v2 .cookie-consent-btn { border-radius: var(--ob-r-sm); font-weight: 800; }
html.cp-v2 .cookie-consent-btn-reject { background: var(--ob-field); border: 1px solid var(--ob-line-2); color: var(--ob-ink); }
html.cp-v2 .cookie-consent-btn-accept { background: var(--ob-accent-btn); color: #fff; border: 0; box-shadow: 0 10px 24px -10px rgb(var(--ob-violet-rgb) / 0.75); }
html.cp-v2 .pwa-banner { background: var(--ob-glass); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
html.cp-v2 .redirect-overlay { background: rgba(3, 4, 10, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.cp-v2 .redirect-spinner { border-color: var(--ob-line-2); border-top-color: var(--ob-violet); }

/* ---- Verlauf-Popup + Ergebnis-Elemente ---- */
html.cp-v2 .pp-quick, html.cp-v2 .rs-quick, html.cp-v2 .pp-quick-wrap { border-color: var(--ob-line); }
html.cp-v2 #historyProductName { color: var(--ob-ink) !important; }
html.cp-v2 #historyStoreName { color: var(--ob-aqua) !important; }

/* ---- Handy: Hero darf nicht ueberlaufen, kompaktere Abstaende ---- */
@media (max-width: 920px) {
  html.cp-v2 .home-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; justify-items: center; }
  html.cp-v2 .home-hero-inner > * { min-width: 0; max-width: 100%; }
  html.cp-v2 .home-hero-eyebrow { justify-self: center; white-space: normal; text-align: center; font-size: var(--ob-fs-2xs); letter-spacing: 0.06em; padding: 5px 12px; }
  html.cp-v2 .cp-live-pill { max-width: 100%; flex-wrap: wrap; justify-content: center; text-align: center; row-gap: 2px; }
  html.cp-v2 .cp-live-sep { display: none; }
  html.cp-v2 .cp-live-pill .home-hero-eyebrow { font-size: var(--ob-fs-2xs); }
  html.cp-v2 .cp-live-dot { flex: none; width: 8px; height: 8px; }
  html.cp-v2 .home-hero-title { font-size: clamp(2rem, 9.5vw, 2.7rem); }
  html.cp-v2 .home-hero-sub { font-size: 0.95rem; max-width: 100%; }
  html.cp-v2 .cp-cmd-search { width: 100%; max-width: 100%; flex-wrap: wrap; padding: 0.35rem; margin: 0.6rem 0 0.4rem; }
  html.cp-v2 .cp-cmd-search input { flex: 1 1 100%; width: 100%; padding: 0.7rem 0.6rem; }
  html.cp-v2 .cp-cmd-search button { flex: 1 1 100%; width: 100%; padding: 0.85rem 1rem; }
  html.cp-v2 .cp-cmd-search > span { display: none; }
  html.cp-v2 .cp-chips { justify-content: center; margin-bottom: 0.4rem; }
  html.cp-v2 .cp-3d-stage { min-height: 0; width: 100%; }
  html.cp-v2 .cp-foil-card { max-width: 340px; transform: none !important; }
  html.cp-v2 .home-hero { padding-bottom: 1.2rem; }
  html.cp-v2 .cp-deals { margin: 1rem 0 1.4rem; }
  html.cp-v2 .cp-grid { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  html.cp-v2 .cp-section-hdr { gap: 0.7rem; }
  html.cp-v2 .cp-pills { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; scrollbar-width: none; }
  html.cp-v2 .cp-pills::-webkit-scrollbar { display: none; }
  html.cp-v2 .cp-pills .cp-chip { flex: none; }
}
/* ---- Responsiv & Bewegung ---- */
@media (max-width: 600px) {
  html.cp-v2 { --ob-r: 18px; --ob-r-lg: 22px; }
  html.cp-v2 .hb { min-height: 170px; padding: 22px 18px; }
  html.cp-v2 body::before { animation: none; }
  html.cp-v2 :is(.cp-deal-card, .offer-row, .dr-card, .cx-set-tile, .cx-card, .cp-bento-box, .results-filter-bar-container) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (hover: none) { html.cp-v2 #cpV2Spot { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html.cp-v2 *, html.cp-v2 *::before, html.cp-v2 *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   v2.6 Header (Logo-Kachel mit animierter Herzlinie, Card|Pulse|TCG, Untertitel) + Herzlinie im Hero-Titel
   ========================================================================== */
html.cp-v2 .header-logo-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; }
html.cp-v2 .header-logo-row .header-logo-icon { grid-row: 1 / span 2; width: 46px; height: 46px; border-radius: var(--ob-r-md); background: linear-gradient(135deg, rgb(var(--ob-holo-rose-rgb) / 0.30) 0%, rgba(12, 18, 32, 0.92) 55%, rgb(var(--ob-aqua-rgb) / 0.26) 100%); border: 1px solid rgb(var(--ob-holo-sky-rgb) / 0.32); box-shadow: 0 0 18px rgb(var(--ob-aqua-rgb) / 0.22), inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.08); filter: none; animation: none; display: flex; align-items: center; justify-content: center; padding: 6px; box-sizing: border-box; }
html.cp-v2 .header-logo-icon svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 5px rgb(var(--ob-aqua-rgb) / 0.7)); }
html.cp-v2 .cp-ico-ecg { stroke-dasharray: 100; stroke-dashoffset: 100; animation: cpIcoEcg 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes cpIcoEcg { 0% { stroke-dashoffset: 100; opacity: 0.25; } 55% { stroke-dashoffset: 0; opacity: 1; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0.15; } }
html.cp-v2 .header-logo-row .header-logo-text { display: flex; align-items: center; gap: 0; background: none; -webkit-text-fill-color: currentColor; color: #fff; animation: none; font-size: var(--ob-fs-xl); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; white-space: nowrap; }
html.cp-v2 .cp-hl-card { color: #fff; }
html.cp-v2 .cp-hl-pulse { background: linear-gradient(90deg, var(--ob-aqua) 0%, #a78bfa 55%, #ec4899 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
html.cp-v2 .cp-hl-tcg { margin-left: 12px; padding: 3px 9px; border-radius: var(--ob-r-xs); border: 1px solid rgb(var(--ob-holo-sky-rgb) / 0.38); background: rgb(var(--ob-holo-sky-rgb) / 0.10); color: var(--ob-holo-sky); -webkit-text-fill-color: var(--ob-holo-sky); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--ob-fs-xs); font-weight: 800; letter-spacing: 0.06em; }
html.cp-v2 .cp-hl-sub { grid-column: 2; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--ob-fs-xs); font-weight: 500; letter-spacing: 0.2em; color: #8b93a8; text-transform: uppercase; white-space: nowrap; }
/* SEO-H1 bleibt im DOM, wird unter v2 nur visuell ausgeblendet */
html.cp-v2 header .seo-h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

html.cp-v2[data-theme="light"] .header-logo-row .header-logo-icon { background: linear-gradient(135deg, rgb(var(--ob-holo-rose-rgb) / 0.16) 0%, rgb(var(--ob-white-rgb) / 0.95) 55%, rgba(14, 165, 233, 0.18) 100%) !important; border-color: rgba(2, 132, 199, 0.35) !important; box-shadow: 0 4px 14px rgba(2, 132, 199, 0.18) !important; }
html.cp-v2[data-theme="light"] .header-logo-row .header-logo-text, html.cp-v2[data-theme="light"] .cp-hl-card { color: #12142b !important; -webkit-text-fill-color: #12142b !important; }
html.cp-v2[data-theme="light"] .cp-hl-pulse { -webkit-text-fill-color: transparent !important; background: linear-gradient(90deg, #0284c7 0%, #7c3aed 55%, var(--ob-coral-ink) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
html.cp-v2[data-theme="light"] .cp-hl-tcg { color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; background: rgba(2, 132, 199, 0.10) !important; border-color: rgba(2, 132, 199, 0.35) !important; }
html.cp-v2[data-theme="light"] .cp-hl-sub { color: #5b6480 !important; }

/* Hero-Puls (Banner-Linie) laeuft hinter dem Titel */
html.cp-v2 .home-hero-title { display: block; }
html.cp-v2 .cp-ecg-bg { align-items: flex-start; }
html.cp-v2 .cp-ecg-svg { margin-top: 30px; }

@media (max-width: 580px) {
  html.cp-v2 .header-logo-row { column-gap: 10px; }
  html.cp-v2 .header-logo-row .header-logo-icon { width: 38px; height: 38px; border-radius: var(--ob-r-sm); padding: 5px; }
  html.cp-v2 .header-logo-row .header-logo-text { font-size: var(--ob-fs-lg); }
  html.cp-v2 .cp-hl-tcg { margin-left: 8px; padding: 2px 7px; font-size: var(--ob-fs-2xs); }
  html.cp-v2 .cp-hl-sub { font-size: 0.56rem; letter-spacing: 0.14em; }
  html.cp-v2 .cp-ecg-svg { margin-top: 18px; }
}
@media (max-width: 365px) { html.cp-v2 .header-logo-row .header-logo-text { display: flex; } html.cp-v2 .cp-hl-tcg, html.cp-v2 .cp-hl-sub { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html.cp-v2 .cp-ico-ecg { animation: none; stroke-dashoffset: 0; }
}

/* Hintergrund auf <html> verlegt, damit Aurora + Bubbles (negativer z-index) sichtbar hinter dem Inhalt liegen */
html.cp-v2 { background: var(--ob-bg) !important; }
html.cp-v2 body, html.cp-v2[data-theme="light"] body { background: transparent !important; }

/* v2: Startseiten-Bereiche entfernt (Radar okazji, Top poradniki, Popularne serie) */
/* Deal-Radar: in v2 Widget mit Tabs (radar.js mountHomeV2); Inline-Rahmen der Sektion entfaellt, auf Such-/Ergebnisseiten ausgeblendet */
html.cp-v2:not(.hm2-home) #homeRadar { display: none !important; }
html.cp-v2 #homeRadar { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
html.cp-v2 .hc-rd2 .hc-rd2-cnt { margin: 12px 0 8px; }
html.cp-v2 .hc-rd2 .hc-setw-foot { margin-top: 14px; }
@media (max-width: 600px) { html.cp-v2 .hc-rd2 .dr2-sv { display: none; } } /* schmale Zeile: Ersparnis in € entfällt, Rabatt und Preise bleiben */
html.cp-v2 .hc-rd2 .hc-rd2-cnt:empty, html.cp-v2 .hc-rd2 .v2-cnt:empty { display: none; }
/* Top Guides: in v2 nur als waehlbares Startseiten-Widget (Set-Kacheln in .hc-tg2); alter Inhalt und Inline-Rahmen entfallen */
html.cp-v2:not(.hm2-home) #topGuidesSection { display: none !important; }
html.cp-v2 #topGuidesSection { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
html.cp-v2 #topGuidesSection > :not(.hc-tg2) { display: none !important; }
/* Beliebte Serien: in v2 nur der neue Baustein "Beliebte Sets" (.hm2-slot), und nur auf der Startseite (nicht bei Suche/Filter) */
html.cp-v2:not(.hm2-home) #popularSetsSection { display: none !important; }

/* ==========================================================================
   v2.7 Widget-Banner (.hb-*) vereinheitlicht: ein gemeinsames dunkles Glas wie der Hero,
   je Banner nur EIN Akzent (Cyan / Violett / Pink), Mono-Eyebrow, Akzent-Button statt weissem Button.
   ========================================================================== */
html.cp-v2 .hb { --hb-a: 124, 92, 255; --hb-b: 34, 211, 238; }
html.cp-v2 .hb:is(.hb-find, .hb-relcal, .hb-binder) { --hb-a: 34, 211, 238; --hb-b: 124, 92, 255; }
html.cp-v2 .hb:is(.hb-next, .hb-coll, .hb-rift) { --hb-a: 124, 92, 255; --hb-b: 34, 211, 238; }
html.cp-v2 .hb:is(.hb-blog, .hb-sim) { --hb-a: 236, 72, 153; --hb-b: 124, 92, 255; }
html.cp-v2 .hb, html.cp-v2[data-theme="light"] .hb, html.cp-v2[data-theme="light"] .hb:is(.hb-next, .hb-find, .hb-sim, .hb-coll, .hb-binder, .hb-blog, .hb-rift, .hb-relcal) {
  --hb-bg: radial-gradient(80% 120% at 100% 0%, rgba(var(--hb-a), 0.30), transparent 62%), radial-gradient(70% 100% at 0% 100%, rgba(var(--hb-b), 0.12), transparent 62%), linear-gradient(160deg, rgba(17, 19, 40, 0.92), rgba(8, 9, 20, 0.94)) !important;
  --hb-glow: rgba(var(--hb-a), 0.35) !important;
  border: 1px solid rgb(var(--ob-white-rgb) / 0.09) !important;
  box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.10), inset 0 0 0 1px rgba(var(--hb-a), 0.06), 0 28px 56px -34px rgb(var(--ob-black-rgb) / 0.9), 0 0 60px -38px rgba(var(--hb-a), 0.55) !important;
}
html.cp-v2 .hb:hover, html.cp-v2[data-theme="light"] .hb:hover { border-color: rgba(var(--hb-a), 0.38) !important; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.14), 0 34px 64px -34px rgb(var(--ob-black-rgb) / 0.9), 0 0 70px -30px rgba(var(--hb-a), 0.7) !important; }
html.cp-v2 .hb-title, html.cp-v2[data-theme="light"] .hb-title { color: #fff !important; text-shadow: none; letter-spacing: -0.035em; }
html.cp-v2 .hb-sub, html.cp-v2[data-theme="light"] .hb-sub, html.cp-v2[data-theme="light"] .hb .hb-sub { color: rgba(226, 230, 248, 0.78) !important; }
html.cp-v2 .hb-eyebrow, html.cp-v2[data-theme="light"] .hb-eyebrow {
  background: rgba(var(--hb-a), 0.12) !important; border: 1px solid rgba(var(--hb-a), 0.36) !important; color: rgb(var(--hb-b)) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--ob-r-pill);
}
html.cp-v2 .hb-cta, html.cp-v2[data-theme="light"] .hb :is(.hb-cta, a.hb-cta) {
  background: linear-gradient(180deg, rgb(var(--ob-white-rgb) / 0.22), rgb(var(--ob-white-rgb) / 0) 55%), var(--ob-accent) !important; color: #fff !important; border: 1px solid rgb(var(--ob-white-rgb) / 0.22) !important;
  box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.4), 0 12px 28px -10px rgba(var(--hb-a), 0.75) !important; border-radius: var(--ob-r-md); font-weight: 700;
}
html.cp-v2 .hb-cta:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.5), 0 16px 34px -10px rgba(var(--hb-b), 0.7) !important; }
html.cp-v2 .hb-cta.hb-cta-ghost, html.cp-v2[data-theme="light"] .hb a.hb-cta.hb-cta-ghost { background: rgb(var(--ob-white-rgb) / 0.06) !important; border: 1px solid rgb(var(--ob-white-rgb) / 0.22) !important; box-shadow: none !important; }
html.cp-v2 .hb-art :is(img, .hb-pack, .hb-prod, .hb-logo) { filter: drop-shadow(0 18px 26px rgb(var(--ob-black-rgb) / 0.55)) drop-shadow(0 0 26px rgba(var(--hb-a), 0.28)); }
html.cp-v2 .hb::after { background: linear-gradient(105deg, transparent 38%, rgb(var(--ob-white-rgb) / 0.07) 50%, transparent 62%) 160% 0 / 55% 100% no-repeat, radial-gradient(420px circle at var(--mx, 85%) var(--my, 0%), rgb(var(--ob-white-rgb) / 0.05), transparent 60%); }
html.cp-v2 .hb:hover::after { background-position: -60% 0, 0 0; }
html.cp-v2[data-theme="light"] .hb .hb-cal-row, html.cp-v2[data-theme="light"] .hb .hb-cal-row * { color: #fff !important; }
html.cp-v2[data-theme="light"] .hb .hb-cal-row { background: rgb(var(--ob-white-rgb) / 0.07) !important; border-color: rgb(var(--ob-white-rgb) / 0.14) !important; }

/* v2.8-Block (Rahmen der persoenlichen Widgets) ersetzt durch "Startseite v2" am Ende der Datei */

/* v2: Banner "Szukaj produktu / Find a product" entfernt */
html.cp-v2 #homeFind { display: none !important; }

/* v2: kleine Kapsel-Labels in den Widgets entfernen (Eyebrow-Pillen der Banner, SIMULATION-Tag); der grosse Titel bleibt */
html.cp-v2 .cp-hl-sec :is(.hb-eyebrow, .hc-simtag) { display: none !important; }

/* v2: "Alle Artikel" steht unter den Blog-Karten, als Akzent-Button wie die anderen Widget-Buttons */
html.cp-v2 .hbl-foot { margin-top: 16px; display: flex; justify-content: flex-start; position: relative; z-index: 3; }

/* v2: Such-Button unten rechts bleibt fixiert (der Sammelselektor der Buttons setzt sonst position: relative) */
html.cp-v2 .btn-toggle-search { display: none !important; }

/* ==========================================================================
   v2 Such-Panel: Desktop = Popup mittig im Bildschirm, Hintergrund leicht ausgegraut, Seite dahinter nicht scrollbar.
   Handy = Bottom-Sheet wie bisher. Breite kommt aus v2.js (--cp-pop-w).
   ========================================================================== */
@media (min-width: 900px) {
  html.cp-v2 body .collapsible-search-wrapper.cp-sp {
    left: 50%; top: 50%; right: auto; bottom: auto;
    width: var(--cp-pop-w, 560px); max-width: calc(100vw - 32px); max-height: min(680px, 84vh);
    border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-tile); padding-bottom: 0;
    box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.10), 0 40px 90px -24px rgb(var(--ob-black-rgb) / 0.85), 0 0 80px -36px rgb(var(--ob-violet-rgb) / 0.7);
    transform-origin: center center; transform: translate(-50%, -50%) scale(1);
    -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  }
  html.cp-v2:not([data-theme="light"]) body .collapsible-search-wrapper.cp-sp { --cp-sp-bg: rgba(13, 15, 32, 0.97); }
  html.cp-v2 body .collapsible-search-wrapper.cp-sp.collapsed { transform: translate(-50%, -48%) scale(0.97); opacity: 0; pointer-events: none; }
  html.cp-v2 .cp-sp-backdrop { background: rgba(40, 44, 60, 0.5); }
  html.cp-v2[data-theme="light"] .cp-sp-backdrop { background: rgba(90, 96, 115, 0.3); }
  html.cp-v2:has(body.cp-sp-open), html.cp-v2 body.cp-sp-open { overflow: hidden; }
  html.cp-v2 .cp-sp-head { padding-top: 14px; }
}

/* v2: Such-Button im Titel-Banner ausgeblendet; Suche läuft über das Feld (Enter) */
html.cp-v2 #cpV2Go { display: none !important; }
html.cp-v2 .cp-cmd-search { padding-right: 14px; }

/* Widget-Buttons: dezentes Koralle-Orange statt Blau-Violett */
html.cp-v2 .hb-cta, html.cp-v2[data-theme="light"] .hb :is(.hb-cta, a.hb-cta) {
  background: linear-gradient(180deg, rgb(var(--ob-white-rgb) / 0.18), rgb(var(--ob-white-rgb) / 0) 55%), var(--ob-warm) !important;
  box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.35), 0 12px 28px -12px rgba(124, 77, 224, 0.6) !important;
}
html.cp-v2 .hb-cta:hover { box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.45), 0 16px 34px -12px rgba(139, 79, 224, 0.65) !important; }

/* Widget-Buttons: Glas-Look (halbtransparent, Blur, feine Lichtkante) */
html.cp-v2 .hb-cta, html.cp-v2[data-theme="light"] .hb :is(.hb-cta, a.hb-cta) {
  background: linear-gradient(180deg, rgb(var(--ob-white-rgb) / 0.16), rgb(var(--ob-white-rgb) / 0.02) 60%), linear-gradient(120deg, rgba(106, 78, 224, 0.55), rgba(139, 79, 224, 0.5) 52%, rgba(180, 64, 189, 0.5)) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(190, 160, 255, 0.4) !important;
  box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.3), 0 10px 26px -14px rgba(124, 77, 224, 0.6) !important;
}
html.cp-v2 .hb-cta:hover { border-color: rgba(210, 185, 255, 0.6) !important; box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.4), 0 14px 32px -12px rgba(139, 79, 224, 0.7) !important; }

/* Kartenstapel (bis zu 10 Deals): oberste Karte fliegt weg (Auto oder Wischen), naechste liegt frei */
html.cp-v2 .cp-foil-card { transition: transform var(--ob-dur-1) var(--ob-ease-out), translate var(--ob-dur-3) var(--ob-ease-out), rotate var(--ob-dur-3) var(--ob-ease-out), opacity var(--ob-dur-3) var(--ob-ease-out); touch-action: pan-y; will-change: translate, rotate, opacity; -webkit-user-select: none; user-select: none; }
html.cp-v2 .cp-foil-card .cp-art-img { -webkit-user-drag: none; pointer-events: none; }
html.cp-v2 .cp-hc-name { min-height: 2.5em; }
html.cp-v2 .cp-deck-dots { position: absolute; left: 0; right: 0; bottom: -4px; display: flex; justify-content: center; gap: 6px; z-index: 4; pointer-events: none; }
html.cp-v2 .cp-deck-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--ob-white-rgb) / 0.28); transition: background var(--ob-dur-2) var(--ob-ease-out), transform var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .cp-deck-dots i.on { background: var(--ob-aqua); transform: scale(1.35); }
html.cp-v2[data-theme="light"] .cp-deck-dots i { background: rgba(15, 23, 42, 0.25); }
html.cp-v2[data-theme="light"] .cp-deck-dots i.on { background: var(--ob-violet); }
/* Handy: Rueckkarten sind reine Stapel-Silhouetten (kein Inhalt), liegen hinter der Karte und ragen nur etwas heraus */
@media (max-width: 920px) {
  html.cp-v2 .cp-3d-stage { padding-bottom: 22px; }
  html.cp-v2 .cp-back-card { display: block !important; inset: 14px 0 22px; margin: 0 auto; width: min(300px, 86%); min-height: 0; z-index: 1; pointer-events: none; }
  html.cp-v2 .cp-back-card > * { visibility: hidden; }
  html.cp-v2 .cp-back-card--left { transform: translateY(10px) rotate(-3deg) scale(0.96); }
  html.cp-v2 .cp-back-card--right { transform: translateY(18px) rotate(3deg) scale(0.92); }
  html.cp-v2 .cp-foil-card { z-index: 3; }
  html.cp-v2 .cp-deck-dots { bottom: 0; }
}

/* ==========================================================================
   Guides v2 (Pokémon /pokemon/<slug>/ und Riftbound /riftbound/guides/<slug>/ – gleiche setguide-*-Klassen)
   Glas-Sektionen, Karten-Kacheln mit Holo-Rand je Seltenheit, ruhigere Typografie, Tabellen, FAQ.
   ========================================================================== */
html.cp-v2 .setguide-box {
  position: relative; padding: 24px 24px 16px; border-radius: var(--ob-r); border: 1px solid var(--ob-line);
  background: linear-gradient(180deg, rgb(var(--ob-white-rgb) / 0.05), rgb(var(--ob-white-rgb) / 0.015) 40%), rgba(12, 14, 26, 0.58);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.07), 0 30px 60px -40px rgb(var(--ob-black-rgb) / 0.8);
}
html.cp-v2 .setguide-box::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--ob-violet-rgb) / 0.7), rgb(var(--ob-aqua-rgb) / 0.6), transparent); pointer-events: none; }
html.cp-v2 .setguide-section { margin-bottom: 26px; }
html.cp-v2 .setguide-box h2 { font-size: 1.22rem; font-weight: 800; letter-spacing: -0.025em; color: var(--ob-ink); margin-bottom: 10px; line-height: 1.3; }
html.cp-v2 .setguide-box h3, html.cp-v2 .setguide-category-block h3 { font-size: var(--ob-fs-base); font-weight: 800; letter-spacing: -0.015em; color: var(--ob-ink); }
html.cp-v2 .setguide-box > p, html.cp-v2 .setguide-category-block p { color: var(--ob-mute); font-size: 0.92rem; line-height: 1.72; max-width: 78ch; }
html.cp-v2 .setguide-box > p strong { color: var(--ob-ink); }
html.cp-v2 .setguide-box > p + p { margin-top: 10px; }
html.cp-v2 .setguide-card-disclaimer { color: var(--ob-dim); opacity: 1; font-size: var(--ob-fs-xs); line-height: 1.55; }

/* Tabellen */
html.cp-v2 .setguide-table-wrapper { border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: rgb(var(--ob-white-rgb) / 0.02); margin: 14px 0 8px; }
html.cp-v2 .setguide-table { font-size: 0.86rem; }
html.cp-v2 .setguide-table th { background: rgb(var(--ob-violet-rgb) / 0.08); color: var(--ob-aqua); font-family: var(--cp-font-mono); font-weight: 700; letter-spacing: 0.1em; font-size: 0.64rem; padding: 11px 14px; }
html.cp-v2 .setguide-table td { border-top: 1px solid var(--ob-line); color: var(--ob-ink); padding: 12px 14px; }
html.cp-v2 .setguide-table tbody tr { transition: background var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .setguide-table tbody tr:hover { background: rgb(var(--ob-white-rgb) / 0.03); }
html.cp-v2 .setguide-table .hl { color: transparent; background: var(--ob-accent); -webkit-background-clip: text; background-clip: text; }

/* Karten-Kacheln */
html.cp-v2 .setguide-card-grid { gap: 14px; padding: 6px 4px 12px; scroll-snap-type: x proximity; }
html.cp-v2 .setguide-card-tile {
  flex: 0 0 172px; width: 172px; padding: 10px 10px 12px; gap: 5px; border-radius: var(--ob-r-md); scroll-snap-align: start;
  border: 1px solid var(--ob-line); background: linear-gradient(180deg, rgb(var(--ob-white-rgb) / 0.06), rgb(var(--ob-white-rgb) / 0.015));
  box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.06);
  transition: transform var(--ob-dur-3) var(--cp-ease), box-shadow var(--ob-dur-3) var(--cp-ease), border-color var(--ob-dur-3) var(--ob-ease-out);
}
html.cp-v2 .setguide-card-gridwall .setguide-card-tile { flex: none; width: auto; }
html.cp-v2 .setguide-card-tile:hover { transform: translateY(-2px); border-color: var(--ob-line-2); box-shadow: inset 0 1px 0 rgb(var(--ob-white-rgb) / 0.1), 0 22px 40px -22px rgb(var(--ob-violet-rgb) / 0.55); }
html.cp-v2 .setguide-card-art { border-radius: var(--ob-r-sm); margin-bottom: 4px; background: rgb(var(--ob-white-rgb) / 0.04); box-shadow: 0 10px 24px -12px rgb(var(--ob-black-rgb) / 0.8); }
html.cp-v2 .setguide-card-art img { transition: transform var(--ob-dur-3) var(--cp-ease); }
html.cp-v2 .setguide-card-tile--zoomable:hover .setguide-card-art img { transform: scale(1.04); }
html.cp-v2 .setguide-card-art.placeholder { border: 1px dashed var(--ob-line-2); background: linear-gradient(135deg, rgb(var(--ob-violet-rgb) / 0.16), rgb(var(--ob-aqua-rgb) / 0.08)); }
html.cp-v2 .setguide-card-art .setguide-card-noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: var(--ob-s-3); text-align: center; font-size: var(--ob-fs-sm); font-weight: 600; line-height: 1.35; color: var(--ob-mute); opacity: 1; }
html.cp-v2 .setguide-card-name { font-size: 0.86rem; color: var(--ob-ink); letter-spacing: -0.01em; line-height: 1.3; }
html.cp-v2 .setguide-card-rarity { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 700; letter-spacing: 0.06em; color: var(--ob-aqua); line-height: 1.45; }
html.cp-v2 .setguide-card-blurb { color: var(--ob-mute); font-size: 0.76rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
html.cp-v2 .setguide-card-preview-badge { top: 8px; left: 8px; background: rgba(8, 10, 20, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-color: rgb(var(--ob-amber-rgb) / 0.55); color: var(--ob-amber); font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.06em; }
html.cp-v2 .setguide-card-preview-badge.is-jp { border-color: rgb(var(--ob-aqua-rgb) / 0.55); color: var(--ob-aqua); }
/* Holo-Rand fuer die Top-Seltenheiten (SIR/SAR, Gold) */
html.cp-v2 :is(.setguide-card-tile--r-sar, .setguide-card-tile--r-mur) { border-color: transparent; background: linear-gradient(180deg, rgba(20, 18, 40, 0.92), rgba(10, 12, 24, 0.92)) padding-box, var(--ob-accent) border-box; }
html.cp-v2 .setguide-card-tile--r-mur { background: linear-gradient(180deg, rgba(36, 28, 10, 0.92), rgba(14, 12, 6, 0.92)) padding-box, linear-gradient(120deg, #fde68a, #f59e0b 45%, #fff7d6 60%, #d97706) border-box; }
html.cp-v2 .setguide-card-tile--r-mur .setguide-card-rarity { color: var(--ob-amber); }
html.cp-v2 .setguide-card-scroll-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(10, 12, 24, 0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--ob-line-2); color: var(--ob-ink); box-shadow: 0 10px 24px -10px rgb(var(--ob-black-rgb) / 0.7); }
html.cp-v2 .setguide-card-scroll-btn:hover { border-color: rgb(var(--ob-aqua-rgb) / 0.6); }

/* Produkt-Kategorien + Angebots-Kacheln */
html.cp-v2 .setguide-category-block { border-top: 0; position: relative; padding-top: 18px; margin-top: 18px; }
html.cp-v2 .setguide-category-block::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--ob-line-2), transparent 80%); }
html.cp-v2 .setguide-category-block:first-of-type::before { display: none; }
html.cp-v2 .setguide-preview-row { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
html.cp-v2 .setguide-preview-tile { border-radius: var(--ob-r-md); border: 1px solid var(--ob-line); background: linear-gradient(180deg, rgb(var(--ob-white-rgb) / 0.05), rgb(var(--ob-white-rgb) / 0.01)); transition: transform var(--ob-dur-2) var(--cp-ease), border-color var(--ob-dur-2) var(--ob-ease-out), box-shadow var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .setguide-preview-tile:hover { transform: translateY(-2px); border-color: rgb(var(--ob-aqua-rgb) / 0.45); box-shadow: 0 18px 34px -20px rgb(var(--ob-aqua-rgb) / 0.5); }
html.cp-v2 .setguide-preview-price { font-family: var(--cp-font-mono); color: var(--ob-green); }
html.cp-v2 .setguide-preview-more { color: var(--ob-aqua); font-weight: 700; }

/* Kauftipps, FAQ, Link-Listen */
html.cp-v2 .setguide-tips li { border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: rgb(var(--ob-white-rgb) / 0.025); color: var(--ob-mute); font-size: var(--ob-fs-md); }
html.cp-v2 .setguide-tips li strong { color: var(--ob-ink); }
html.cp-v2 .setguide-tips li::before { content: ""; left: 13px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--ob-accent); box-shadow: 0 0 12px var(--ob-glow); }
html.cp-v2 .seo-faq details { border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: linear-gradient(180deg, rgb(var(--ob-white-rgb) / 0.04), rgb(var(--ob-white-rgb) / 0.01)); transition: border-color var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .seo-faq details[open] { border-color: rgb(var(--ob-violet-rgb) / 0.45); }
html.cp-v2 .seo-faq summary { color: var(--ob-ink); }
html.cp-v2 .seo-faq details p { color: var(--ob-mute); }
html.cp-v2 :is(.seo-faq, .seo-links) h2 { color: var(--ob-ink); letter-spacing: -0.02em; }
html.cp-v2 .seo-links { border-top-color: var(--ob-line); }
html.cp-v2 .seo-links a:hover { color: var(--ob-aqua); }
html.cp-v2 .setguide-cards-link-btn { border-radius: var(--ob-r-md); border-color: var(--ob-line-2); background: rgb(var(--ob-white-rgb) / 0.04); color: var(--ob-ink) !important; }
html.cp-v2 .setguide-cards-link-btn.setguide-cards-view-all-btn { background: linear-gradient(180deg, rgb(var(--ob-white-rgb) / 0.22), rgb(var(--ob-white-rgb) / 0) 55%), var(--ob-accent); border: 1px solid rgb(var(--ob-white-rgb) / 0.25); color: #fff !important; }
html.cp-v2 .setguide-lightbox { background: rgba(4, 5, 12, 0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.cp-v2 .setguide-lightbox-img { border-radius: var(--ob-r-md); box-shadow: 0 30px 80px -20px rgb(var(--ob-violet-rgb) / 0.55), 0 0 0 1px var(--ob-line-2); }

@media (max-width: 560px) {
  html.cp-v2 .setguide-box { padding: 18px 14px 12px; border-radius: var(--ob-r-tile); }
  html.cp-v2 .setguide-box::before { left: 14px; right: 14px; }
  html.cp-v2 .setguide-box h2 { font-size: 1.08rem; }
  html.cp-v2 .setguide-card-tile { flex: 0 0 146px; width: 146px; }
  html.cp-v2 .setguide-preview-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.cp-v2 .setguide-card-scroll-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.cp-v2 :is(.setguide-card-tile, .setguide-card-art img, .setguide-preview-tile) { transition: none; }
}

/* Guides v2 – helles Theme */
html.cp-v2[data-theme="light"] .setguide-box { background: linear-gradient(180deg, #ffffff, rgb(var(--ob-white-rgb) / 0.86)); border-color: var(--ob-line); box-shadow: inset 0 1px 0 #fff, 0 26px 50px -36px rgb(var(--ob-tint-rgb) / 0.45); }
html.cp-v2[data-theme="light"] .setguide-table-wrapper { background: #fff; }
html.cp-v2[data-theme="light"] .setguide-table th { background: rgb(var(--ob-violet-rgb) / 0.07); color: var(--ob-aqua-ink); }
html.cp-v2[data-theme="light"] .setguide-table tbody tr:hover { background: rgb(var(--ob-violet-rgb) / 0.04); }
html.cp-v2[data-theme="light"] .setguide-card-tile { background: linear-gradient(180deg, #ffffff, #f6f4fd); border-color: var(--ob-line); box-shadow: 0 10px 24px -18px rgb(var(--ob-tint-rgb) / 0.45); }
html.cp-v2[data-theme="light"] .setguide-card-tile:hover { box-shadow: 0 22px 40px -22px rgba(99, 80, 230, 0.45); }
html.cp-v2[data-theme="light"] :is(.setguide-card-tile--r-sar) { background: linear-gradient(180deg, #ffffff, #f6f4fd) padding-box, var(--ob-accent) border-box; }
html.cp-v2[data-theme="light"] .setguide-card-tile--r-mur { background: linear-gradient(180deg, #fffdf5, #fff7e0) padding-box, linear-gradient(120deg, #fcd34d, #d97706 45%, #fde68a 60%, var(--ob-amber-ink)) border-box; }
html.cp-v2[data-theme="light"] .setguide-card-tile--r-mur .setguide-card-rarity { color: var(--ob-amber-ink); }
html.cp-v2[data-theme="light"] .setguide-card-rarity { color: var(--ob-aqua-ink); }
html.cp-v2[data-theme="light"] .setguide-card-preview-badge { background: rgb(var(--ob-white-rgb) / 0.88); color: var(--ob-amber-ink); border-color: rgba(180, 83, 9, 0.4); }
html.cp-v2[data-theme="light"] .setguide-card-preview-badge.is-jp { color: var(--ob-aqua-ink); border-color: rgba(14, 116, 144, 0.4); }
html.cp-v2[data-theme="light"] .setguide-card-scroll-btn { background: rgb(var(--ob-white-rgb) / 0.92); color: var(--ob-ink); }
html.cp-v2[data-theme="light"] :is(.setguide-preview-tile, .setguide-tips li, .seo-faq details) { background: #fff; border-color: var(--ob-line); }
html.cp-v2[data-theme="light"] .setguide-preview-price { color: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] .setguide-preview-more { color: var(--ob-aqua-ink); }
html.cp-v2[data-theme="light"] .setguide-cards-link-btn:not(.setguide-cards-view-all-btn) { background: #fff; }
html.cp-v2[data-theme="light"] .setguide-lightbox { background: rgba(240, 238, 250, 0.82); }

/* ==========================================================================
   Performance: Blur nur noch auf Overlays (Header, Popups, Menue, Dialoge) und dort schwaecher.
   Karten, Kacheln, Buttons und Leisten ohne backdrop-filter (wie bisher schon auf dem Handy) - der Blur hinter
   vielen Elementen wurde bei jedem Bild der animierten Hintergrund-Ebene neu berechnet.
   Endlos-Animationen ausserhalb des sichtbaren Bereichs pausieren (v2.js setzt .cp-paused).
   ========================================================================== */
html.cp-v2 :is(.cp-deal-card, .offer-row, .dr-card, .cx-set-tile, .cx-card, .cx-stat, .hw-row, .cp-bento-box, .top-guide-card, .popular-set-tile-card,
  .results-filter-bar-container, .home-hero, .cp-back-card, .cp-ticker, .cp-cmd-search, .hb-eyebrow, .hb-cta, .setguide-box,
  .setguide-card-preview-badge, .setguide-card-scroll-btn, .hb-cal-row) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.cp-v2 .sticky-top-section { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.cp-v2:not([data-theme="light"]) .sticky-top-section { background: rgba(7, 8, 15, 0.86); }
html.cp-v2 :is(.cookie-consent-banner, .pwa-banner) { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.cp-v2 :is(.site-menu-backdrop, .modal-backdrop, .redirect-overlay, .setguide-lightbox) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (min-width: 900px) {
  html.cp-v2 body .collapsible-search-wrapper.cp-sp { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
html.cp-v2 .cp-paused, html.cp-v2 .cp-paused::before, html.cp-v2 .cp-paused::after,
html.cp-v2 .cp-paused *, html.cp-v2 .cp-paused *::before, html.cp-v2 .cp-paused *::after { animation-play-state: paused !important; }

/* ==========================================================================
   Seitenbreite v2: Hauptspalte 1320 px statt 1200 px (Raster, Listen, Produktseiten).
   Lesetext (Guide-/SEO-Absaetze) bleibt hoechstens --ob-read-max breit.
   ========================================================================== */
html.cp-v2 #pageShell { max-width: var(--ob-page-max); }
html.cp-v2 .sticky-top-section { padding-left: max(14px, calc((100vw - var(--ob-page-max)) / 2 + 14px)); padding-right: max(14px, calc((100vw - var(--ob-page-max)) / 2 + 14px)); }
html.cp-v2 .cookie-consent-inner { max-width: var(--ob-page-max); }
/* Riftbound-Startseite war 1100 px und linksbuendig - jetzt so breit wie Pokemon */
html.cp-v2 #rbApp, html.cp-v2 #opApp { max-width: none; }
/* Riftbound-Startseite (SSR-Hero im HTML): solange rb.js nur den statischen Hero hat, die Seitenhoehe reservieren wie style.css fuer die leere #rbApp (kein Springen von SEO-Text/Fusszeile) */
html.cp-v2 #rbApp:has(> #rbHero > .rb-home-hero[data-rb-v2]):not(:has(> :not(h1, noscript, #rbHero))), html.cp-v2 #opApp:has(> #opHero > .op-home-hero[data-op-v2]):not(:has(> :not(h1, noscript, #opHero))) { min-height: 100vh; align-content: start; }
html.cp-v2 :is(.seo-intro, .seo-faq, .seo-tool-text) :is(p, li) { max-width: var(--ob-read-max); }
html.cp-v2 #pageShell > :is(.seo-intro, .seo-faq, .seo-tool-text) { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } /* WP-F1: Worker-SEO-Texte bündig mit dem Seiteninhalt (statt 1100-px-Mitte, versetzt zu .home-seo-content) */
html.cp-v2 #pageShell > :is(.seo-factsheet, .seo-prodinfo, .seo-relblog, .seo-reltable) { margin-left: 0; margin-right: auto; } /* WP-F1: Info-Kästen links bündig statt mittig */
@media (max-width: 600px) { html.cp-v2 .seo-reltable table { display: block; overflow-x: auto; } } /* WP-F1: Premieren-Tabelle (DE) sprengte 390 px */

/* ==========================================================================
   Icons (Lucide, selbst gehostet): <svg class="ob-icon" aria-hidden="true"><use href="/assets/icons/sprite.svg?v=9#i-search"/></svg>
   16 px in Text/Chips, .ob-icon--btn 20 px in Icon-Buttons (Tippflaeche bleibt --ob-tap). Farbe = Textfarbe des Elternelements.
   ========================================================================== */
html.cp-v2 .ob-icon { width: var(--ob-icon-sm); height: var(--ob-icon-sm); flex: none; display: inline-block; vertical-align: -0.15em;
  fill: none; stroke: currentColor; stroke-width: var(--ob-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
html.cp-v2 .ob-icon--btn { width: var(--ob-icon); height: var(--ob-icon); }


/* Seitenmenue-Icons (Lucide) im v2-Design */
html.cp-v2 .site-menu-feature-icon { color: var(--ob-mute); }
html.cp-v2 .site-menu-feature-link:hover .site-menu-feature-icon, html.cp-v2 .site-menu-feature-link:focus-visible .site-menu-feature-icon { color: var(--ob-ink); }
/* Kontrast: Aqua-Schrift im hellen Theme (z. B. "Radar oeffnen" im Hero) war fast unsichtbar */
html.cp-v2[data-theme="light"] .cp-pack-calc { color: var(--ob-aqua-ink); background: rgb(var(--ob-aqua-rgb) / 0.12); border-color: rgb(var(--ob-aqua-rgb) / 0.45); }

/* Performance (CLS): der SEO-Text der Startseite steht beim ersten Bild direkt unter dem Kopf und wird dann von Hero und Bloecken nach unten geschoben.
   Bis v2.js die Startseite aufgebaut hat (Klasse cp-home-ready), bleibt er unsichtbar; Rueckfall nach 4 s, falls v2.js nicht laedt. */
html.cp-v2:not(.cp-home-ready) .home-seo-content,
html.cp-v2:not(.cp-home-ready) body:has(#welcomeState) .seo-links,
html.cp-v2:not(.cp-home-ready) #welcomeState > .home-hero-inner { visibility: hidden; animation: cpSeoReveal 0s 4s forwards; } /* auch den alten Hero-Inhalt, der sonst mittig steht und beim Umbau nach oben springt */
@keyframes cpSeoReveal { to { visibility: visible; } }
/* Hero: Endhoehe vorab reservieren (gemessen 19.10.2026: ab 900 px ca. 600-620, 601-899 px ca. 760, bis 600 px ca. 800-845), sonst schiebt der spaet
   aufgebaute v2-Hero alle Bloecke darunter nach unten. Bei Aenderungen am Hero die Werte mit tools/perf_check.js neu messen. */
html.cp-v2 #welcomeState { min-height: 560px; box-sizing: border-box; } /* Puls-Hero clean (23.10.2026): Hoehe wie unten im Block "Startseiten-Hero Puls" */
@media (max-width: 899px) { html.cp-v2 #welcomeState { min-height: 500px; } }
@media (max-width: 600px) { html.cp-v2 #welcomeState { min-height: 480px; } }
/* Riftbound-Hero ebenso (23.10.2026, vorher CLS 0,3 beim Aufbau): Werte = kleinste gemessene Endhoehe ueber PL/DE/EN (ab 900 px 673-700, 768 px 545-615, 390 px 682-763), damit nach dem Aufbau kein Leerraum bleibt; seit zwei Haelften (23.10.2026) gleiche Hoehen wie #welcomeState */
html.cp-v2 .rb-home-hero, html.cp-v2 .op-home-hero { min-height: 560px; box-sizing: border-box; }
@media (max-width: 899px) { html.cp-v2 .rb-home-hero, html.cp-v2 .op-home-hero { min-height: 500px; } }
@media (max-width: 600px) { html.cp-v2 .rb-home-hero, html.cp-v2 .op-home-hero { min-height: 480px; } }
/* Laufband (#cpV2Ticker) setzt v2.js direkt vor den Hero: bis dahin dessen Platz (Hoehe + Abstaende, gemessen 64 px) als Abstand ueber dem Hero halten */
html.cp-v2 .cp-ticker { min-height: 42px; }
html.cp-v2 #welcomeState:not(#cpV2Ticker + #welcomeState) { margin-top: calc(6px + 64px); }
html.cp-v2 .rb-home-hero:not(#cpV2Ticker + .rb-home-hero), html.cp-v2 .op-home-hero:not(#cpV2Ticker + .op-home-hero) { margin-top: calc(6px + 64px); }
/* Release-Widget und Blog (Startseite): Platz reservieren, bevor Termine (/release-products) bzw. Artikel (/blog/recent.json) nachladen (WP-D, v2.js mountet seit WP-B schon bei DOMContentLoaded).
   Werte = kleinste gemessene Endhoehe ueber PL/DE/EN: Release ab 900 px 288, 601-899 px 496, bis 600 px 557 (vorher 355 -> 569 beim Nachladen); Blog 344 / 296 / 288. */
html.cp-v2.hm2-home :is(#homeNext, #homeRelCal) { min-height: 288px; box-sizing: border-box; }
html.cp-v2.hm2-home #homeBlog { min-height: 344px; box-sizing: border-box; }
@media (max-width: 899px) { html.cp-v2.hm2-home :is(#homeNext, #homeRelCal) { min-height: 496px; } html.cp-v2.hm2-home #homeBlog { min-height: 296px; } }
@media (max-width: 600px) { html.cp-v2.hm2-home :is(#homeNext, #homeRelCal) { min-height: 557px; } html.cp-v2.hm2-home #homeBlog { min-height: 288px; } }
/* Riftbound-Spiegel (Pokémon = Riftbound): dieselben Mindesthöhen für Release-Widget und Blog, damit das Nachladen nichts verschiebt */
/* Riftbound-Release ist kuerzer als Pokémon (zwei statt drei Folgetermine, Logo neben dem Titel; neu gemessen 23.10.2026 PL/DE/EN: ab 900 px 222-255, 601-899 px 438, bis 600 px 391-470) */
html.cp-v2 #rbApp > :is(#rbNext, #rbCal), html.cp-v2 #opApp > :is(#opNext, #opCal) { min-height: 222px; box-sizing: border-box; }
html.cp-v2 #rbApp > #rbBlog, html.cp-v2 #opApp > #opBlog { min-height: 344px; box-sizing: border-box; }
@media (max-width: 899px) { html.cp-v2 #rbApp > :is(#rbNext, #rbCal), html.cp-v2 #opApp > :is(#opNext, #opCal) { min-height: 430px; } html.cp-v2 #rbApp > #rbBlog, html.cp-v2 #opApp > #opBlog { min-height: 296px; } }
@media (max-width: 600px) { html.cp-v2 #rbApp > :is(#rbNext, #rbCal), html.cp-v2 #opApp > :is(#opNext, #opCal) { min-height: 420px; } html.cp-v2 #rbApp > #rbBlog, html.cp-v2 #opApp > #opBlog { min-height: 288px; } }

/* Performance-Budget (Inhaber 19.10.2026): hoechstens 3 Dauer-Animationen gleichzeitig - Laufband und Hero-Puls (Canvas in hero-pulse.js: Herzlinie + Mosaik, seit 22.10.2026; frueher .cp-ecg-path + .cp-foil-card).
   Alles andere laeuft beim Laden kurz und bleibt dann stehen; ausserhalb des Bildschirms pausiert v2.js zusaetzlich (cp-paused). */
html.cp-v2 .header-logo-text, html.cp-v2 .home-hero-title, html.cp-v2 .cp-art-img, html.cp-v2 .home-hero::before, html.cp-v2 .cp-radar-circle { animation-iteration-count: 1; }
@media (prefers-reduced-motion: no-preference) { html.cp-v2 .cp-ico-ecg { animation: cpIcoEcgOnce 1.4s cubic-bezier(0.4, 0, 0.2, 1) 1 both; } }
@keyframes cpIcoEcgOnce { from { stroke-dashoffset: 100; opacity: 0.25; } to { stroke-dashoffset: 0; opacity: 1; } }
html.cp-v2 .news-bell-btn.has-unread, html.cp-v2 .news-bell-btn.has-unread svg, html.cp-v2 .guide-link-new-badge::after,
html.cp-v2 .cx-link-tile.sealed, html.cp-v2 .home-load-more-btn { animation-iteration-count: 3; }

/* ====== Kopfzeile, Menue, Fusszeile (Styleguide: freigegeben 19.10.2026) ====== */
/* Kopfzeile: drei Zonen, alle Bedienelemente 44 px, Handy 56 px hoch, Desktop 64 px */
html.cp-v2 .sticky-top-section { padding-top: 6px; padding-bottom: 6px; }
html.cp-v2 .header-bar-compact { min-height: 44px; }
html.cp-v2 .header-menu-controls { gap: 2px; min-width: 0; }
html.cp-v2 .header-menu-controls > .cp-game-switch { order: 0; }
html.cp-v2 .header-menu-controls > .hdr-search { order: 1; }
html.cp-v2 .header-menu-controls > #cpV2AdminBtn { order: 0; text-decoration: none; }
html.cp-v2 #cpV2AdminBtn[hidden] { display: none; }
html.cp-v2 .header-menu-controls > #cpV2SearchBtn { order: 2; }
html.cp-v2 .header-menu-controls > #newsBellBtn { order: 3; }
html.cp-v2 .header-menu-controls > #siteMenuBtn { order: 4; }
html.cp-v2 :is(#siteMenuBtn, #newsBellBtn, #cpV2SearchBtn, #cpV2AdminBtn) {
  width: var(--ob-tap); height: var(--ob-tap); padding: 0; flex: none; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--ob-r-sm); color: var(--ob-mute); cursor: pointer;
  transition: background var(--ob-dur-1) var(--ob-ease-out), color var(--ob-dur-1) var(--ob-ease-out);
}
html.cp-v2 :is(#siteMenuBtn, #newsBellBtn, #cpV2SearchBtn, #cpV2AdminBtn):hover, html.cp-v2 #newsBellBtn[aria-expanded="true"] { background: var(--ob-hover); color: var(--ob-ink); }
html.cp-v2 :is(#siteMenuBtn, #newsBellBtn, #cpV2SearchBtn, #cpV2AdminBtn):focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2 :is(#siteMenuBtn, #cpV2SearchBtn, #cpV2AdminBtn) .ob-icon, html.cp-v2 #newsBellBtn svg { width: var(--ob-icon); height: var(--ob-icon); }
html.cp-v2[data-theme="light"] .site-menu-btn { background: transparent; }
html.cp-v2 #newsBellBtn.has-unread { color: var(--ob-mute); background: transparent; }
html.cp-v2 .news-bell-badge { top: 7px; right: 6px; background: var(--ob-coral-ink); color: #fff; border: 2px solid var(--ob-bg); min-width: 18px; height: 18px; font-size: var(--ob-fs-2xs); }
@media (min-width: 900px) {
  html.cp-v2 .sticky-top-section { padding-top: 10px; padding-bottom: 10px; }
  html.cp-v2 .header-menu-controls { gap: 6px; }
  html.cp-v2 .hdr-search { display: none; }
}
/* Spiel-Umschalter: Segmente >= 38 x 40, Desktop mit Namen, Handy nur Logo; Riftbound aktiv Koralle -> Violett */
html.cp-v2 .cp-game-switch { padding: 2px; gap: 2px; margin-right: 2px; border-radius: var(--ob-r-pill); }
html.cp-v2 .cp-game-switch button { min-width: 40px; min-height: 38px; justify-content: center; padding: 0 9px; border-radius: var(--ob-r-pill); }
html.cp-v2 .cp-game-switch button.active { padding: 0 9px; }
html.cp-v2 .cp-game-switch button[data-cp-game="riftbound"].active { background: linear-gradient(120deg, var(--ob-coral-ink), #8b4fe0); }
html.cp-v2 .cp-game-switch button[data-cp-game="onepiece"].active { background: linear-gradient(120deg, var(--ob-amber-ink), var(--ob-coral-ink)); }
@media (max-width: 899px) {
  html.cp-v2 .cp-game-switch button .cp-gs-label { display: none; }
  html.cp-v2 .cp-game-switch button.active { gap: 0; }
  html.cp-v2 .cp-hl-sub { display: none; }
  html.cp-v2 .header-logo-row .header-logo-icon { grid-row: 1; }
}
@media (min-width: 900px) {
  html.cp-v2 .cp-game-switch button { gap: 7px; padding: 0 14px 0 9px; }
  html.cp-v2 .cp-game-switch button .cp-gs-label { max-width: 110px; opacity: 1; }
  html.cp-v2 .cp-game-switch button .cp-gs-icon { opacity: 1; }
}

/* Menue: Gruppen Preise / Sammlung / Lesen, kompakte Zeilen 52 px, Einstellungen unten */
html.cp-v2 .site-menu-panel { width: min(420px, 100vw); padding: var(--ob-s-3) var(--ob-s-3) 0; }
html.cp-v2 .site-menu-panel > .site-menu-divider, html.cp-v2 .site-menu-vline { display: none; }
html.cp-v2 .site-menu-header { padding-bottom: var(--ob-s-3); margin-bottom: var(--ob-s-2); border-bottom: 1px solid var(--ob-line); }
/* Kopf mit Konto + Schliessen bleibt beim Scrollen im Menue stehen (Inhaber 23.10.2026): klebt oben, deckt das Panel-Padding ab, Fläche wie das Panel */
html.cp-v2 .site-menu-header { position: sticky; top: calc(-1 * var(--ob-s-3)); z-index: 3; flex-shrink: 0; margin: calc(-1 * var(--ob-s-3)) calc(-1 * var(--ob-s-3)) var(--ob-s-2); padding: var(--ob-s-3); background: var(--ob-pop); }
html.cp-v2[data-theme="light"] .site-menu-header { background: #e3ecfd; }
html.cp-v2 .site-menu-close-btn { width: var(--ob-tap); height: var(--ob-tap); display: grid; place-items: center; border-radius: var(--ob-r-sm); }
html.cp-v2 .site-menu-close-btn:hover { background: var(--ob-hover); }
html.cp-v2 .site-menu-main { display: flex; flex-direction: column; gap: 2px; }
html.cp-v2 .site-menu-panel .cp-mg-l { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ob-dim); padding: var(--ob-s-4) var(--ob-s-2) var(--ob-s-1); }
html.cp-v2 .site-menu-main > .cp-mg-l[data-g="1"] { padding-top: var(--ob-s-1); }
html.cp-v2 .site-menu-feature-link, html.cp-v2 .site-menu-feature-prices, html.cp-v2[data-theme="light"] .site-menu-feature-link {
  min-height: 52px; margin: 0; padding: 6px var(--ob-s-2); gap: var(--ob-s-3); background: transparent; border: 0; border-radius: var(--ob-r-sm); box-shadow: none; transform: none;
}
html.cp-v2 .site-menu-feature-link + .site-menu-feature-link { margin-top: 0; }
html.cp-v2 .site-menu-feature-link:hover, html.cp-v2 .site-menu-feature-link:focus-visible { transform: none; background: var(--ob-hover); border: 0; box-shadow: none; }
html.cp-v2 .site-menu-feature-link[aria-current="page"] { background: var(--ob-hover); }
html.cp-v2 .site-menu-feature-link[aria-current="page"] .site-menu-feature-icon { color: var(--ob-violet-text); }
html.cp-v2 .site-menu-feature-link b { font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-ink); }
html.cp-v2 .site-menu-feature-link small { font-size: var(--ob-fs-xs); color: var(--ob-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
html.cp-v2 .site-menu-feature-text { min-width: 0; flex: 1; }
html.cp-v2 .site-menu-feature-link::after { content: ""; width: 7px; height: 7px; flex: none; border-right: 1.75px solid var(--ob-dim); border-top: 1.75px solid var(--ob-dim); transform: rotate(45deg); margin-right: 6px; }
html.cp-v2 .cp-menu-set { display: grid; gap: 2px; padding-bottom: var(--ob-s-3); }
html.cp-v2 .cp-set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-3); min-height: 48px; padding: 0 var(--ob-s-2); font-size: var(--ob-fs-sm); color: var(--ob-ink); }
html.cp-v2 .cp-set-lbl { color: var(--ob-ink); }
html.cp-v2 #cpSetTheme .theme-switch { flex: 1; padding: 0; justify-content: space-between; }
html.cp-v2 #cpSetTheme .theme-switch-label { font-family: inherit; font-size: var(--ob-fs-sm); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ob-ink); }
html.cp-v2 #cpSetTheme .theme-switch-opts { flex: 0 1 auto; }
html.cp-v2 #cpSetTheme .theme-switch-opts button { min-height: 36px; padding: 0 10px; }
html.cp-v2 .cp-seg, html.cp-v2 #cpSetShops .site-menu-country-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--ob-r-sm); border: 1px solid var(--ob-line-2); background: var(--ob-field); }
html.cp-v2 .cp-seg button { min-width: 40px; min-height: 36px; padding: 0 8px; border: 0; border-radius: var(--ob-r-xs); background: transparent; color: var(--ob-mute); font: inherit; font-size: var(--ob-fs-xs); font-weight: 700; cursor: pointer; }
html.cp-v2 .cp-seg button.on { background: var(--ob-hover); color: var(--ob-ink); box-shadow: inset 0 0 0 1px var(--ob-line-2); }
html.cp-v2 .cp-seg button:focus-visible, html.cp-v2 #cpSetShops .country-flag-btn:focus-visible, html.cp-v2 .cp-set-toggle:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2 #cpSetShops .country-flag-btn { width: auto; min-width: 56px; height: 36px; padding: 0 8px 0 30px; border: 0; border-radius: var(--ob-r-xs); background-size: 16px 11px; background-position: 8px center; filter: none; transform: none; box-shadow: none; opacity: 0.75; color: var(--ob-mute); font: inherit; font-size: var(--ob-fs-xs); font-weight: 700; }
html.cp-v2 #cpSetShops .country-flag-btn::after { content: attr(data-country); }
html.cp-v2 #cpSetShops .country-flag-btn.active { opacity: 1; transform: none; background-color: var(--ob-hover); color: var(--ob-ink); box-shadow: inset 0 0 0 1px var(--ob-line-2); }
html.cp-v2 .cp-set-toggle { width: 100%; background: transparent; border: 0; border-radius: var(--ob-r-sm); font: inherit; font-size: var(--ob-fs-sm); text-align: left; cursor: pointer; }
html.cp-v2 .cp-set-toggle:hover { background: var(--ob-hover); }
html.cp-v2 .cp-set-toggle[hidden] { display: none; }
html.cp-v2 .cp-set-langs { flex-wrap: wrap; padding-block: var(--ob-s-2); }
html.cp-v2 .cp-lchips { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); }
html.cp-v2 .cp-lchip { min-height: var(--ob-tap-min); padding: 0 14px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: var(--ob-field); color: var(--ob-mute); font: inherit; font-size: var(--ob-fs-sm); font-weight: 600; cursor: pointer; }
html.cp-v2 .cp-lchip.on { border-color: rgb(var(--ob-violet-rgb) / 0.5); background: rgb(var(--ob-violet-rgb) / 0.14); color: var(--ob-ink); font-weight: 700; }
html.cp-v2 .cp-lchip:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2 .cp-tg { flex: none; width: 34px; height: 20px; border-radius: var(--ob-r-pill); background: var(--ob-line-2); position: relative; transition: background var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .cp-tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .cp-set-toggle[aria-checked="true"] .cp-tg { background: var(--ob-accent-btn); }
html.cp-v2 .cp-set-toggle[aria-checked="true"] .cp-tg::after { transform: translateX(14px); }
html.cp-v2 .site-menu-foot { margin: 0 calc(-1 * var(--ob-s-3)); padding: 4px var(--ob-s-3) max(6px, env(safe-area-inset-bottom)); }
html.cp-v2 .site-menu-foot-btn { min-height: 52px; }

/* Fusszeile: normale Fusszeile am Seitenende statt fester Leiste */
html.cp-v2 #pageShell { padding-bottom: var(--ob-s-5); }
html.cp-v2 footer, html.cp-v2[data-theme="light"] footer {
  position: static; display: grid; gap: var(--ob-s-6); margin-top: var(--ob-s-8); padding: var(--ob-s-7) 0 var(--ob-s-4);
  background: transparent; border-top: 1px solid var(--ob-line); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; z-index: auto;
}
html.cp-v2 footer .settings-dropdown, html.cp-v2 footer .footer-right { display: none; }
html.cp-v2 .cp-ft-top { display: grid; gap: var(--ob-s-6); }
html.cp-v2 .cp-ft-brand { display: grid; gap: var(--ob-s-2); max-width: 380px; }
html.cp-v2 .cp-ft-brand p { font-size: var(--ob-fs-sm); color: var(--ob-mute); margin: 0; }
html.cp-v2 .cp-ft-logo { display: inline-flex; align-items: center; gap: var(--ob-s-2); font-weight: 800; font-size: var(--ob-fs-base); letter-spacing: -0.03em; text-decoration: none; color: var(--ob-ink); min-height: var(--ob-tap); }
html.cp-v2 .cp-ft-ico { width: 28px; height: 28px; background: url("/favicon.svg") center / contain no-repeat; margin-right: 2px; }
html.cp-v2 .cp-ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ob-s-5); }
html.cp-v2 .cp-ft-col { display: grid; align-content: start; gap: 0; min-width: 0; }
html.cp-v2 .cp-ft-col b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ob-dim); font-weight: 600; margin-bottom: var(--ob-s-1); }
html.cp-v2 .cp-ft-col :is(a, button) { min-height: 36px; display: flex; align-items: center; padding: 0; background: none; border: 0; font: inherit; font-size: var(--ob-fs-sm); color: var(--ob-mute); text-decoration: none; text-align: left; cursor: pointer; }
html.cp-v2 .cp-ft-col :is(a, button):hover { color: var(--ob-ink); text-decoration: underline; text-underline-offset: 3px; }
html.cp-v2 .cp-ft-seo { border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); }
html.cp-v2 .cp-ft-seo summary { list-style: none; min-height: var(--ob-tap); padding: 0 var(--ob-s-4); display: flex; align-items: center; justify-content: space-between; font-size: var(--ob-fs-sm); font-weight: 650; color: var(--ob-mute); cursor: pointer; }
html.cp-v2 .cp-ft-seo summary::-webkit-details-marker { display: none; }
html.cp-v2 .cp-ft-seo summary .ob-icon { transition: transform var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .cp-ft-seo[open] summary .ob-icon { transform: rotate(180deg); }
html.cp-v2 .cp-ft-seo .seo-links { margin: 0; padding: 0 var(--ob-s-4) var(--ob-s-3); border: 0; max-width: none; }
html.cp-v2 .cp-ft-seo .seo-links h2 { display: none; }
html.cp-v2 .cp-ft-seo .seo-links a { font-size: var(--ob-fs-xs); }
html.cp-v2 footer .footer-left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-s-3) var(--ob-s-5); padding-top: var(--ob-s-4); border-top: 1px solid var(--ob-line); }
html.cp-v2 footer .footer-brand { font-size: var(--ob-fs-xs); font-weight: 500; }
html.cp-v2 #cpV2FootLang .cp-seg { background: transparent; border-color: var(--ob-line); }
@media (max-width: 600px) {
  html.cp-v2 .cp-ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Korrekturen nach Sichtpruefung: v1-/Hell-Regeln mit !important (style.css, theme-light.css) muessen hier ueberstimmt werden */
html.cp-v2 #newsBellBtn.has-unread, html.cp-v2 #newsBellBtn.has-unread svg { animation: none; } /* Zaehler reicht als Signal; das Pulsieren faerbte die Flaeche */
html.cp-v2[data-theme="light"] :is(#siteMenuBtn, #newsBellBtn, #cpV2SearchBtn) { background: transparent !important; border: 0 !important; color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] :is(#siteMenuBtn, #newsBellBtn, #cpV2SearchBtn):hover { background: var(--ob-hover) !important; color: var(--ob-ink) !important; }
html.cp-v2 .cp-game-switch button:not(.active) { color: var(--ob-mute); }
html.cp-v2 .cp-game-switch button[data-cp-game="riftbound"][aria-pressed="true"] { background: linear-gradient(120deg, var(--ob-coral-ink), #8b4fe0) !important; } /* theme-light.css setzt Petrol */
html.cp-v2 .cp-game-switch button[data-cp-game="onepiece"][aria-pressed="true"] { background: linear-gradient(120deg, var(--ob-amber-ink), var(--ob-coral-ink)) !important; }
@media (max-width: 899px) { html.cp-v2 .cp-hl-tcg { display: none; } html.cp-v2 .header-bar-compact > header { min-width: 0; flex: 1 1 auto; } }
html.cp-v2 .cp-set-lbl { font-family: var(--cp-font-sans); font-weight: 400; font-size: var(--ob-fs-sm); letter-spacing: 0; text-transform: none; }
html.cp-v2[data-theme="light"] .site-menu-feature-link { background: transparent !important; color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .site-menu-feature-link:hover, html.cp-v2[data-theme="light"] .site-menu-feature-link[aria-current="page"] { background: var(--ob-hover) !important; }
html.cp-v2 footer { width: 100%; box-sizing: border-box; }
html.cp-v2[data-theme="light"] footer { background: transparent !important; }
html.cp-v2 .cp-ft-col :is(a, button) { color: var(--ob-mute) !important; }
html.cp-v2 .cp-ft-col :is(a, button):hover { color: var(--ob-ink) !important; }
html.cp-v2 .cp-ft-seo .seo-langs { padding: 0 var(--ob-s-4) var(--ob-s-4); font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 footer { justify-content: stretch; align-items: stretch; } /* style.css: Flex-Werte der alten Leiste wuerden die Grid-Spalten zusammenschieben */
html.cp-v2 .cp-game-switch button:not(.active) .cp-gs-label { color: inherit !important; -webkit-text-fill-color: currentColor !important; } /* theme-light.css faerbt das Label weiss */
@media (max-width: 600px) {
  html.cp-v2 .header-logo-row { column-gap: 8px; }
  html.cp-v2 .header-logo-row .header-logo-icon { width: 34px; height: 34px; padding: 4px; }
  html.cp-v2 .header-logo-row .header-logo-text { font-size: var(--ob-fs-base); }
}

/* ==========================================================================
   v2 Suche (freigegeben 19.10.2026, Pokémon + Riftbound gleich; Code: search-panel.js, Teil "v2")
   Handy: hohes Sheet (Feld + Abbrechen, Filter-Chips, Inhalt scrollt, "Suchen" fest unten), Filter als zweite Ebene.
   Desktop: Kopf = Lupe-Button (#cpV2SearchBtn), Suche als Fenster mittig mit Feld oben und abgedunkeltem Hintergrund (Strg+K, "/");
   nur das Hero-Feld bleibt Eingabefeld mit Dropdown darunter (.cp-sp-ext). (geaendert 22.10.2026)
   ========================================================================== */
html.cp-v2 body .collapsible-search-wrapper.cp-sp.cp-sp2 {
  top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-width: none; height: var(--ob-sheet-max); max-height: var(--ob-sheet-max);
  display: flex; flex-direction: column; overflow: hidden; padding: 0; z-index: var(--ob-z-sheet) !important;
  background: var(--ob-pop) !important; color: var(--ob-ink); border: 1px solid var(--ob-line-2); border-bottom: 0;
  border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; box-shadow: var(--ob-shadow-2);
  transition: transform var(--ob-dur-2) var(--cp-ease), opacity var(--ob-dur-2) var(--cp-ease);
}
html.cp-v2 .cp-sp-backdrop { z-index: calc(var(--ob-z-sheet) - 1); background: var(--ob-backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html.cp-v2 .cp-sp-backdrop.ext { opacity: 0 !important; pointer-events: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 899px) { html.cp-v2 .cp-sp-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; } } /* Handy: nur abdunkeln, ohne Blur – das Zeichnen des Blurs machte das Oeffnen der Suche träge (INP 280–500 ms, Inhaber 27.10.2026) */
html.cp-v2 .cp-sp2 .cp-sp-head { padding: 0; }
html.cp-v2 .cp-sp2 .cp-sp-grab { width: 40px; height: 5px; margin: 8px auto 4px; background: var(--ob-line-2); border-radius: 3px; }
html.cp-v2 .cp-sp2 .cp-sp-title-row { display: none; }
html.cp-v2 .cp-sp2 .cp-sp2-top { display: flex; align-items: center; gap: 8px; padding: 6px var(--ob-gutter) 10px; }
html.cp-v2 .cp-sp2 .cp-sp2-top .search-row { flex: 1; min-width: 0; margin: 0 !important; }
html.cp-v2 .cp-sp2 .search-input-wrapper { position: relative; }
html.cp-v2 .cp-sp2 .cp-sp2-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ob-dim); display: grid; pointer-events: none; }
html.cp-v2 body .cp-sp2 .search-row input[type="text"] {
  height: var(--ob-tap); padding: 0 40px 0 38px; font-size: var(--ob-fs-input); color: var(--ob-ink);
  background: var(--ob-field) !important; border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-sm); box-shadow: none;
}
html.cp-v2 body .cp-sp2 .search-row input[type="text"]:focus { border-color: rgb(var(--ob-violet-rgb) / 0.85) !important; box-shadow: 0 0 0 3px rgb(var(--ob-violet-rgb) / 0.18); outline: none; }
html.cp-v2 body .cp-sp2 .input-clear-icon { right: 4px !important; width: var(--ob-tap-min); height: var(--ob-tap-min); color: var(--ob-mute) !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html.cp-v2 .cp-sp2 input:placeholder-shown ~ .input-clear-icon { display: none !important; }
html.cp-v2 .cp-sp2 .cp-sp2-cancel { flex: none; min-height: var(--ob-tap); padding: 0 4px; background: none; border: 0; color: var(--ob-violet-text); font-size: var(--ob-fs-md); font-weight: 650; cursor: pointer; }
html.cp-v2 .cp-sp2 .cp-sp2-chips { display: flex; gap: 8px; padding: 0 var(--ob-gutter) 10px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .cp-sp2 .cp-sp2-chips::-webkit-scrollbar { display: none; }
html.cp-v2 .cp-sp2 .cp-sp2-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--ob-tap-min); padding: 0 12px; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: transparent; color: var(--ob-mute); font-size: var(--ob-fs-sm); font-weight: 650;
}
html.cp-v2 .cp-sp2 .cp-sp2-chip.on { border-color: rgb(var(--ob-violet-rgb) / 0.5); background: rgb(var(--ob-violet-rgb) / 0.14); color: var(--ob-ink); }
html.cp-v2 body .cp-sp2 .search-inputs-container {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--ob-gutter) 16px; max-height: none;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
html.cp-v2 .cp-sp2 :is(#closeSearchBubbleBtn, #rbSearchClose, .or-divider, .bc-scan-pair, .cp-sp-filters, #autocomplete-dropdown, #rbAutocomplete), html.cp-v2 .cp-sp2 :is(#closeSearchBubbleBtn, #opSearchClose, .or-divider, .bc-scan-pair, .cp-sp-filters, #autocomplete-dropdown, #opAutocomplete) { display: none !important; }
html.cp-v2 .cp-sp2 [hidden] { display: none !important; }
html.cp-v2 .cp-sp2 :is(button, [role="button"]):focus-visible { outline: 2px solid rgb(var(--ob-violet-rgb) / 0.7); outline-offset: 1px; }
html.cp-v2 .cp-sp2 .cp-sp-extra { gap: 4px; margin: 0; }
html.cp-v2 .cp-sp2 .cp-sp-h { margin: 0; padding: 12px 4px 6px; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.14em; color: var(--ob-dim); }
html.cp-v2 .cp-sp2 .cp-sp-h .cp-sp-h-t { color: var(--ob-dim); letter-spacing: 0.14em; }
html.cp-v2 .cp-sp2 .cp-sp-h .cp-sp-link-btn { border: 0; font-family: var(--cp-font-sans); font-size: var(--ob-fs-xs); letter-spacing: 0; color: var(--ob-mute); min-height: var(--ob-tap-min); }
html.cp-v2 .cp-sp2 .cp-sp-chips.cp-sp2-recent { display: grid; gap: 2px; }
html.cp-v2 .cp-sp2 .cp-sp2-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--ob-tap); padding: 6px 8px; margin: 0; cursor: pointer;
  border: 0; border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-ink); font: inherit; text-align: left;
  transition: background var(--ob-dur-1) var(--ob-ease-out);
}
html.cp-v2 .cp-sp2 .cp-sp2-row.act { background: rgb(var(--ob-violet-rgb) / 0.14); box-shadow: inset 0 0 0 1px rgb(var(--ob-violet-rgb) / 0.35); }
html.cp-v2 .cp-sp2 .cp-sp2-row:active { background: var(--ob-hover); }
html.cp-v2 .cp-sp2 .cp-sp2-rec > .ob-icon { color: var(--ob-dim); flex: none; }
html.cp-v2 .cp-sp2 .cp-sp2-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ob-fs-md); }
html.cp-v2 .cp-sp2 .cp-sp2-x { flex: none; width: var(--ob-tap-min); height: var(--ob-tap-min); display: grid; place-items: center; border: 0; border-radius: var(--ob-r-xs); background: transparent; color: var(--ob-dim); cursor: pointer; }
html.cp-v2 .cp-sp2 .cp-sp2-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
html.cp-v2 .cp-sp2 .cp-sp2-tile {
  display: grid; gap: 6px; justify-items: center; align-content: start; min-width: 0; padding: 10px 6px; cursor: pointer;
  border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-ink); font: inherit; text-align: center;
}
html.cp-v2 .cp-sp2 .cp-sp2-tile b { font-size: var(--ob-fs-xs); font-weight: 650; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.cp-v2 .cp-sp2 .cp-sp2-tile.act { border-color: rgb(var(--ob-violet-rgb) / 0.6); background: rgb(var(--ob-violet-rgb) / 0.14); }
html.cp-v2 .cp-sp2 .cp-sp2-logo { width: 100%; max-width: 120px; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; }
html.cp-v2 .cp-sp2 .cp-sp2-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
html.cp-v2 .cp-sp2 .cp-sp2-logo i { font-style: normal; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-dim); text-align: center; line-height: 1.2; overflow: hidden; }
html.cp-v2 .cp-sp2 .cp-sp2-set .cp-sp2-logo { width: 72px; flex: none; }
html.cp-v2 .cp-sp2 .cp-sp2-tx { display: grid; flex: 1; min-width: 0; gap: 2px; }
html.cp-v2 .cp-sp2 .cp-sp2-tx b { font-size: var(--ob-fs-md); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.cp-v2 .cp-sp2 .cp-sp2-tx small { font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 .cp-sp2 .cp-sp2-go { flex: none; font-size: var(--ob-fs-xs); font-weight: 650; color: var(--ob-violet-text); white-space: nowrap; }
html.cp-v2 .cp-sp2 .cp-sp2-th { width: var(--ob-thumb-s); height: var(--ob-thumb-s); flex: none; display: grid; place-items: center; overflow: hidden; border-radius: var(--ob-r-xs); background: var(--ob-hover); }
html.cp-v2 .cp-sp2 .cp-sp2-th img { width: 100%; height: 100%; object-fit: contain; }
html.cp-v2 .cp-sp2 .cp-sp2-pr { flex: none; display: grid; text-align: right; font-family: var(--cp-font-mono); }
html.cp-v2 .cp-sp2 .cp-sp2-pr small { font-size: var(--ob-fs-2xs); color: var(--ob-dim); }
html.cp-v2 .cp-sp2 .cp-sp2-pr b { font-size: var(--ob-fs-md); font-weight: 700; color: var(--ob-ink); }
html.cp-v2 .cp-sp2 .cp-sp-list { gap: 2px; }
html.cp-v2 .cp-sp2 .cp-sp-note { font-size: var(--ob-fs-sm); color: var(--ob-dim); padding: 8px; }
html.cp-v2 .cp-sp2 .cp-sp2-all { margin-top: 6px; border: 1px dashed var(--ob-line-2); font-weight: 650; }
html.cp-v2 .cp-sp2 .cp-sp2-all > .ob-icon { color: var(--ob-mute); flex: none; }
html.cp-v2 .cp-sp2 kbd { margin-left: auto; padding: 2px 6px; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-dim); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-xs); background: transparent; }
html.cp-v2 .cp-sp2 .cp-sp2-keys kbd { margin-left: 0; }
html.cp-v2 .cp-sp2 .cp-sp2-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 14px; }
html.cp-v2 .cp-sp2 .cp-sp2-tool {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ob-tap); padding: 0 10px; cursor: pointer;
  border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-ink); font-size: var(--ob-fs-sm); font-weight: 650;
}
html.cp-v2 .cp-sp2 .cp-sp2-tool .ob-icon { color: var(--ob-mute); flex: none; }
html.cp-v2 .cp-sp2 .cp-sp2-tool span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* fester Fuß: Handy "Suchen" (nur mit Eingabe), Desktop Tastatur-Hinweise */
html.cp-v2 .cp-sp2 .cp-sp2-foot { flex: none; display: none; padding: 10px var(--ob-gutter) calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ob-line); background: var(--ob-pop); }
html.cp-v2 .cp-sp2.cp-sp2-has .cp-sp2-foot { display: block; }
html.cp-v2 body .cp-sp2 .cp-sp2-foot :is(#searchBtn, #rbSearchBtn), html.cp-v2 body .cp-sp2 .cp-sp2-foot :is(#searchBtn, #opSearchBtn) { position: relative; width: 100%; min-height: 48px; margin: 0 !important; border-radius: var(--ob-r-sm); font-size: var(--ob-fs-md); box-shadow: none; }
html.cp-v2 .cp-sp2 .cp-sp2-keys { display: none; gap: 16px; font-size: var(--ob-fs-2xs); color: var(--ob-dim); }
html.cp-v2 .cp-sp2 .cp-sp2-keys span { display: inline-flex; align-items: center; gap: 4px; }
/* zweite Ebene: Filter (Set, Shops, Produktart, Preis, Schalter) */
html.cp-v2 .cp-sp2 .cp-sp2-lvl { position: absolute; inset: 0; z-index: var(--ob-z-raised); display: none; flex-direction: column; background: var(--ob-pop); }
html.cp-v2 .cp-sp2 .cp-sp2-lvl.on { display: flex; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-h { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 4px; border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-h b { flex: 1; font-size: var(--ob-fs-base); font-weight: 800; }
html.cp-v2 .cp-sp2 .cp-sp2-back { width: var(--ob-tap); height: var(--ob-tap); display: grid; place-items: center; border: 0; border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-ink); cursor: pointer; }
html.cp-v2 .cp-sp2 .cp-sp2-reset { min-height: var(--ob-tap); padding: 0 10px; border: 0; background: none; color: var(--ob-violet-text); font-size: var(--ob-fs-sm); font-weight: 650; cursor: pointer; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 16px; padding: 14px var(--ob-gutter) 16px; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-header input { font-size: var(--ob-fs-input); }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .cp-sp-fbody { display: flex !important; padding: 0; gap: 16px; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .cp-sp-fbody > .cp-sp-link-btn { display: none !important; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .cp-sp-fl { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.14em; color: var(--ob-dim); }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .cp-sp-chips { gap: 8px; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .cp-sp-fchip { min-height: var(--ob-tap-min); padding: 0 14px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: transparent; color: var(--ob-ink); font-size: var(--ob-fs-sm); font-weight: 600; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .cp-sp-fchip.on { border-color: rgb(var(--ob-violet-rgb) / 0.5); background: rgb(var(--ob-violet-rgb) / 0.14); color: var(--ob-ink); font-weight: 700; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .cp-sp-sw { min-height: var(--ob-tap); font-size: var(--ob-fs-md); color: var(--ob-ink); }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-f { flex: none; padding: 10px var(--ob-gutter) calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ob-line); }
html.cp-v2 .cp-sp2 .cp-sp2-cta { width: 100%; min-height: 48px; border: 0; border-radius: var(--ob-r-sm); background: var(--ob-accent-btn); color: #fff; font-size: var(--ob-fs-md); font-weight: 700; cursor: pointer; }
html.cp-v2 .cp-sp2 .cp-sp2-cta:disabled { opacity: 0.45; cursor: not-allowed; }
@media (hover: hover) {
  html.cp-v2 .cp-sp2 :is(.cp-sp2-row, .cp-sp2-x, .cp-sp2-back):hover { background: var(--ob-hover); }
  html.cp-v2 .cp-sp2 :is(.cp-sp2-chip, .cp-sp2-tile, .cp-sp2-tool):hover { border-color: rgb(var(--ob-violet-rgb) / 0.55); color: var(--ob-ink); }
  html.cp-v2 .cp-sp2 .cp-sp2-x:hover { color: var(--ob-ink); }
}
@media (max-width: 365px) {
  html.cp-v2 .cp-sp2 .cp-sp2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.cp-v2 .cp-sp2 :is(.cp-sp2-top, .cp-sp2-chips, .search-inputs-container, .cp-sp2-foot, .cp-sp2-lvl-b, .cp-sp2-lvl-f) { padding-left: var(--ob-gutter-sm); padding-right: var(--ob-gutter-sm); }
}
@media (min-width: 900px) {
  html.cp-v2 body .collapsible-search-wrapper.cp-sp.cp-sp2 {
    left: 50%; top: 90px; right: auto; bottom: auto; width: var(--ob-pop-w-m); max-width: calc(100vw - 32px);
    height: auto; max-height: min(760px, calc(100dvh - 120px)); border-bottom: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md);
    transform: translateX(-50%); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html.cp-v2 body .collapsible-search-wrapper.cp-sp.cp-sp2:not(.cp-sp-ext) { transition: opacity var(--ob-dur-1) var(--ob-ease-out); }
  html.cp-v2 body .collapsible-search-wrapper.cp-sp.cp-sp2.collapsed { transform: translateX(-50%); }
  html.cp-v2 body .collapsible-search-wrapper.cp-sp.cp-sp2.cp-sp-ext {
    left: var(--cp-sp2-x); top: var(--cp-sp2-y); width: var(--cp-sp2-w); max-width: none; max-height: min(600px, var(--cp-sp2-mh));
    transform: none; transform-origin: top center; z-index: var(--ob-z-dropdown) !important;
  }
  html.cp-v2 body .collapsible-search-wrapper.cp-sp.cp-sp2.cp-sp-ext.collapsed { transform: translateY(-6px); }
  html.cp-v2 .cp-sp2 :is(.cp-sp-grab, .cp-sp2-cancel) { display: none; }
  html.cp-v2 .cp-sp2 .cp-sp2-top { padding-top: 14px; }
  html.cp-v2 .cp-sp2.cp-sp-ext .cp-sp2-top { display: none; }
  html.cp-v2 .cp-sp2 .cp-sp2-chips { padding: 10px 14px; }
  html.cp-v2 body .cp-sp2 .search-inputs-container { padding: 2px 10px 12px; }
  html.cp-v2 .cp-sp2 .cp-sp2-foot, html.cp-v2 .cp-sp2.cp-sp2-has .cp-sp2-foot { display: flex; padding: 8px 16px 10px; }
  html.cp-v2 .cp-sp2 .cp-sp2-foot :is(#searchBtn, #rbSearchBtn), html.cp-v2 .cp-sp2 .cp-sp2-foot :is(#searchBtn, #opSearchBtn) { display: none; }
  html.cp-v2 .cp-sp2 .cp-sp2-keys { display: flex; }
  html.cp-v2 .cp-sp2.cp-sp2-lvl-on { min-height: min(520px, var(--cp-sp2-mh, 84vh)); }
  html.cp-v2 .cp-sp2 .cp-sp2-lvl-f { padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html.cp-v2 body .collapsible-search-wrapper.cp-sp.cp-sp2 { transition: none; }
}

/* ==========================================================================
   v2 Produktseite + Angebotszeile + Angebots-Sheet (freigegeben 19.10.2026, Pokémon + Riftbound gleich)
   Code: preise/product.js productV2, riftbound/rb.js productV2, data.js cpOfferRowV2/cpMoney, script.js openOfferSheet/cpRangeHtml
   ========================================================================== */
html.cp-v2 :is(#productApp, #rbApp) .v2-crumb, html.cp-v2 :is(#productApp, #opApp) .v2-crumb { margin: 4px 0 10px; }
html.cp-v2 .v2-back { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ob-tap-min); color: var(--ob-mute); font-size: var(--ob-fs-sm); font-weight: 650; text-decoration: none; }
html.cp-v2 .v2-ph { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
html.cp-v2 .v2-ph > div { min-width: 0; }
html.cp-v2 .v2-ph-logo { width: 112px; height: auto; aspect-ratio: 16 / 9; object-fit: contain; flex: none; filter: none; box-shadow: none; animation: none; }
html.cp-v2 .v2-eb { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ob-mute); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
html.cp-v2 .v2-ph h1 { margin: 4px 0; font-size: var(--ob-fs-xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--ob-ink); text-wrap: balance; }
html.cp-v2 .v2-ph p { margin: 0; color: var(--ob-mute); font-size: var(--ob-fs-md); }
html.cp-v2 .v2-tabs { display: flex; gap: 22px; margin-bottom: 20px; border-bottom: 1px solid var(--ob-line); overflow-x: auto; scrollbar-width: none; }
html.cp-v2 .v2-tabs::-webkit-scrollbar { display: none; }
html.cp-v2 .v2-tab { flex: none; display: inline-flex; align-items: center; min-height: var(--ob-tap); margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ob-mute); font-size: var(--ob-fs-md); font-weight: 650; text-decoration: none; white-space: nowrap; }
html.cp-v2 .v2-tab.on { color: var(--ob-ink); border-bottom-color: var(--ob-violet); }
html.cp-v2 .v2-pp-cols { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
html.cp-v2 .v2-pp-side { position: sticky; top: 84px; display: grid; gap: 12px; }
html.cp-v2 :is(.v2-pp-best, .v2-pp-chart) { border: 1px solid var(--ob-line) !important; border-radius: var(--ob-r-md); background: var(--ob-surface) !important; padding: 16px; } /* !important: theme-light.css färbt .cx-value-chart */
html.cp-v2 .v2-pp-best { display: grid; gap: 4px; }
html.cp-v2 .v2-lbl { 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 .v2-big { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xl); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ob-ink); }
html.cp-v2 .v2-sm { font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 :is(.v2-sm, .v2-or-p) s { color: var(--ob-dim); }
html.cp-v2 .v2-dn { color: var(--ob-green); }
html.cp-v2 .v2-up { color: var(--ob-coral); }
html.cp-v2[data-theme="light"] .v2-dn { color: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] .v2-up { color: var(--ob-coral-ink); }
/* Diagramm im Seitenkasten: Linie Aqua, Punkte ruhig, Zeitraum als Segmente */
html.cp-v2 .v2-pp-chart { margin: 0; box-shadow: none; }
html.cp-v2 .v2-pp-chart .cx-chart-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
html.cp-v2 .v2-pp-chart .cx-chart-head b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ob-dim); font-weight: 700; }
html.cp-v2 .v2-pp-chart .cp-head-r { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
html.cp-v2 .cx2-cols .v2-pp-chart .cp-head-r { flex-direction: row; align-items: center; justify-content: flex-start; margin-left: 0; } /* style.css setzt Spalte + rechts; im Set-Detail Zeitraum links unter der Änderung */
html.cp-v2 .cx-chart-head { position: relative; }
html.cp-v2 .cx-chart-head:has(> .cp-chart-tg) { padding-right: calc(var(--ob-tap-min) + var(--ob-s-2)); }
html.cp-v2 .cx-chart-head > .cp-chart-tg { position: absolute; top: 0; right: 0; }
html.cp-v2 .cp-chart-tg { display: inline-grid; place-items: center; flex: none; width: var(--ob-tap-min); height: var(--ob-tap-min); padding: 0; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-violet); cursor: pointer; box-shadow: none; }
html.cp-v2 .cp-chart-tg svg { width: 18px; height: 18px; }
html.cp-v2 .cp-chart-tg.off { color: var(--ob-mute); }
html.cp-v2 .cp-chart-tg:focus-visible { outline: 2px solid var(--ob-violet); outline-offset: 2px; }
html.cp-v2 .cp-chart-off > :not(.cx-chart-head) { display: none !important; }
html.cp-v2 .cp-chart-off .cp-range { display: none; }
html.cp-v2 .v2-pp-chart .cx-chart-change { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 700; padding: 2px 8px; border-radius: var(--ob-r-pill); background: rgb(var(--ob-green-rgb) / 0.14); color: var(--ob-green); }
html.cp-v2 .v2-pp-chart .cx-chart-change.down { background: rgb(var(--ob-coral-rgb) / 0.14); color: var(--ob-coral); }
html.cp-v2 .v2-pp-chart svg path[stroke] { stroke: var(--ob-aqua); }
html.cp-v2 .v2-pp-chart svg circle[stroke] { fill: var(--ob-pop); stroke: var(--ob-aqua); }
html.cp-v2 .v2-pp-chart svg circle[fill="#facc15"] { fill: var(--ob-aqua); stroke: var(--ob-aqua); }
html.cp-v2 .v2-pp-chart .pp-lbl rect { fill: var(--ob-bg); stroke: var(--ob-line-2); }
html.cp-v2 .v2-pp-chart .pp-lbl text { fill: var(--ob-mute); font-family: var(--cp-font-mono); }
html.cp-v2 .v2-pp-chart .pp-lbl.is-now rect { fill: rgb(var(--ob-aqua-rgb) / 0.16); stroke: rgb(var(--ob-aqua-rgb) / 0.5); }
html.cp-v2 .v2-pp-chart .pp-lbl.is-now text { fill: var(--ob-ink); }
html.cp-v2 .v2-pp-chart .cx-chart-axis { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-dim); }
html.cp-v2 :is(.pp-stat, .cp-range-seg) { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: transparent; }
html.cp-v2 :is(.pp-stat, .cp-range-seg) button { min-height: 28px; padding: 0 10px; border: 0; border-radius: var(--ob-r-xs); background: transparent; color: var(--ob-mute); font-size: var(--ob-fs-xs); font-weight: 650; cursor: pointer; box-shadow: none; }
html.cp-v2 :is(.pp-stat, .cp-range-seg) button.on { background: rgb(var(--ob-violet-rgb) / 0.16); color: var(--ob-ink); }
html.cp-v2 .v2-links { display: grid; gap: 8px; }
html.cp-v2 .v2-link { display: flex; align-items: center; gap: 12px; min-height: var(--ob-tap); padding: 10px 14px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); color: var(--ob-ink); text-decoration: none; font-size: var(--ob-fs-md); }
html.cp-v2 .v2-link > span { display: grid; flex: 1; min-width: 0; }
html.cp-v2 .v2-link small { font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 .v2-link > .ob-icon:first-child { color: var(--ob-violet-text); }
html.cp-v2 .v2-link > .ob-icon:last-child { color: var(--ob-dim); }
/* Filterleiste + Liste */
html.cp-v2 .v2-fbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; }
html.cp-v2 .v2-cnt { margin-right: auto; font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; color: var(--ob-mute); }
html.cp-v2 .v2-quick { display: flex; align-items: center; gap: 8px; width: 260px; max-width: 100%; height: var(--ob-tap-min); padding: 0 12px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-dim); }
html.cp-v2 .v2-quick input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; padding: 0; color: var(--ob-ink); font-size: var(--ob-fs-sm); }
html.cp-v2 .v2-quick:focus-within { border-color: rgb(var(--ob-violet-rgb) / 0.85); box-shadow: 0 0 0 3px rgb(var(--ob-violet-rgb) / 0.18); }
html.cp-v2 .v2-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ob-tap-min); padding: 0 14px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: transparent; color: var(--ob-mute); font-size: var(--ob-fs-sm); font-weight: 650; cursor: pointer; }
html.cp-v2 .v2-offers { display: grid; gap: 8px; }
html.cp-v2 .v2-or {
  display: grid; grid-template-columns: var(--ob-thumb-m) minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); transition: border-color var(--ob-dur-1) var(--ob-ease-out), background var(--ob-dur-1) var(--ob-ease-out);
}
html.cp-v2 .v2-or[hidden] { display: none; }
html.cp-v2 .v2-or.best { border-color: rgb(var(--ob-green-rgb) / 0.45); }
html.cp-v2 .v2-or.out { opacity: 0.6; }
html.cp-v2 .v2-or-th { width: var(--ob-thumb-m); height: var(--ob-thumb-m); display: grid; place-items: center; overflow: hidden; border-radius: var(--ob-r-xs); background: var(--ob-hover); }
html.cp-v2 .v2-or-th img { width: 100%; height: 100%; object-fit: contain; }
html.cp-v2 .v2-or-m { display: grid; gap: 4px; min-width: 0; justify-items: start; }
html.cp-v2 .v2-bb { font-size: var(--ob-fs-2xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ob-green); background: rgb(var(--ob-green-rgb) / 0.14); padding: 2px 8px; border-radius: var(--ob-r-pill); }
html.cp-v2[data-theme="light"] .v2-bb { color: var(--ob-green-ink); }
html.cp-v2 .v2-or-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ob-ink); font-size: var(--ob-fs-md); font-weight: 650; text-decoration: none; }
html.cp-v2 .v2-or-s { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .v2-or-shop { color: var(--ob-ink); font-weight: 600; }
html.cp-v2 .v2-lg { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 700; padding: 1px 6px; border-radius: var(--ob-r-xs); border: 1px solid var(--ob-line-2); color: var(--ob-ink); }
html.cp-v2 .v2-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ob-dim); display: inline-block; }
html.cp-v2 .v2-dot.ok { background: var(--ob-green); }
/* Versand-Kennzeichen in der Shop-Zeile (Styleguide "Versandkosten", 28.10.2026) */
html.cp-v2 .v2-ship { display: inline-flex; align-items: center; gap: var(--ob-s-1); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-mute); white-space: nowrap; }
html.cp-v2 .v2-ship .ob-icon { width: 14px; height: 14px; }
html.cp-v2 .v2-ship.free { color: var(--ob-green); }
html.cp-v2 :is(.v2-ship.unk, .v2-ship.mp) { color: var(--ob-dim); }
html.cp-v2[data-theme="light"] .v2-ship.free, html.cp-v2[data-theme="light"] .os-ship .free { color: var(--ob-green-ink); }
/* Sheet: Block "Versand" (Schluessel/Wert, Quelle + Stand) */
html.cp-v2 .os-ship { grid-area: ship; display: grid; gap: var(--ob-s-1); margin-top: var(--ob-s-2); }
html.cp-v2 .os-ship-l { margin: 0; display: grid; gap: var(--ob-s-1); }
html.cp-v2 .os-ship-l > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ob-s-3); font-size: var(--ob-fs-sm); }
html.cp-v2 .os-ship-l dt { color: var(--ob-mute); margin: 0; }
html.cp-v2 .os-ship-l dd { margin: 0; text-align: right; font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; color: var(--ob-ink); }
html.cp-v2 .os-ship-l b { font-weight: 700; }
html.cp-v2 .os-ship-l b.free { color: var(--ob-green); }
html.cp-v2 .os-ship small { font-size: var(--ob-fs-2xs); color: var(--ob-dim); font-weight: 400; }
html.cp-v2 .os-ship-n { margin: 0; font-size: var(--ob-fs-sm); color: var(--ob-dim); }
html.cp-v2 .v2-or-p { display: grid; justify-items: end; gap: 2px; font-family: var(--cp-font-mono); text-align: right; }
html.cp-v2 .v2-or-p > b { font-size: var(--ob-fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ob-ink); white-space: nowrap; }
html.cp-v2 .v2-or-p small { font-size: var(--ob-fs-2xs); color: var(--ob-dim); white-space: nowrap; }
html.cp-v2 .v2-or-p small.v2-tt { font-size: var(--ob-fs-xs); color: var(--ob-mute); } /* Zeile "gesamt X" (Sortierung Gesamtpreis) ersetzt die UVP-Zeile */
/* Phase 3 Versand: Chip "Gratisversand" (Handy: Kurztext), Gratis-Filter blendet Zeilen aus, Gesamtpreis-Modus ohne "Bester Preis" */
html.cp-v2 .v2-shipfree .v2-sf-s { display: none; }
@media (max-width: 899px) { html.cp-v2 .v2-shipfree .v2-sf-l { display: none; } html.cp-v2 .v2-shipfree .v2-sf-s { display: inline; } }
html.cp-v2 .v2-or[data-fhide] { display: none; }
html.cp-v2 .v2-tot .v2-bb { display: none; }
html.cp-v2 .v2-tot .v2-or.best { border-color: var(--ob-line); }
html.cp-v2 .v2-or-a { display: flex; gap: 4px; }
html.cp-v2 .v2-ib { width: var(--ob-tap); height: var(--ob-tap); display: grid; place-items: center; padding: 0; border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-mute); cursor: pointer; text-decoration: none; }
html.cp-v2 .v2-ib.v2-ex { border-color: transparent; color: var(--ob-violet-text); }
html.cp-v2 .v2-wish.on { color: var(--ob-coral); border-color: rgb(var(--ob-coral-rgb) / 0.45); }
html.cp-v2 .v2-wish.on svg { fill: currentColor; }
html.cp-v2 :is(.v2-empty, .v2-credit) { padding: 16px 4px; color: var(--ob-mute); font-size: var(--ob-fs-sm); }
html.cp-v2 .v2-credit { color: var(--ob-dim); font-size: var(--ob-fs-xs); }
html.cp-v2 .v2-regions { display: grid; gap: 10px; margin-top: 24px; }
html.cp-v2 .v2-regions .cx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
html.cp-v2 .v2-regions .cx-chip { text-decoration: none; } /* WP-F2: Links als Chips ohne Unterstreichung (wie Tabs) */
@media (hover: hover) {
  html.cp-v2 .v2-or:hover { border-color: rgb(var(--ob-violet-rgb) / 0.45); background: var(--ob-hover); }
  html.cp-v2 :is(.v2-ib, .v2-chip, .v2-link):hover { border-color: rgb(var(--ob-violet-rgb) / 0.55); color: var(--ob-ink); }
  html.cp-v2 .v2-back:hover { color: var(--ob-ink); }
}
html.cp-v2 .v2-or:active { background: var(--ob-hover); }
@media (max-width: 899px) {
  html.cp-v2 .v2-pp-cols { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  html.cp-v2 .v2-pp-side { display: contents; }
  html.cp-v2 .v2-pp-best { order: 1; grid-template-columns: auto 1fr; align-items: end; gap: 2px 12px; padding: 12px 14px; }
  html.cp-v2 .v2-pp-best .v2-lbl { grid-column: 1 / -1; }
  html.cp-v2 .v2-pp-best .v2-big { font-size: var(--ob-fs-lg); grid-row: 2 / span 2; }
  html.cp-v2 .v2-pp-best .v2-sm { justify-self: end; }
  html.cp-v2 .v2-pp-chart { order: 2; padding: 12px 14px; }
  html.cp-v2 .v2-pp-main { order: 3; }
  html.cp-v2 .v2-links { order: 4; }
  html.cp-v2 .v2-ph { gap: 12px; margin-bottom: 10px; }
  html.cp-v2 .v2-ph-logo { width: 72px; }
  html.cp-v2 .cx2-lg { width: 72px; }
  html.cp-v2 .v2-ph h1 { font-size: var(--ob-fs-lg); }
  html.cp-v2 .v2-ph p { display: none; }
  html.cp-v2 .v2-tabs { margin-bottom: 0; gap: 18px; }
  html.cp-v2 .v2-fbar { position: sticky; top: 56px; z-index: var(--ob-z-sticky); margin: 0; padding: 10px 0; background: var(--ob-bg); box-shadow: 0 1px 0 var(--ob-line); }
  html.cp-v2 .v2-quick { order: 5; width: 100%; height: var(--ob-tap); }
  html.cp-v2 .v2-quick input { font-size: var(--ob-fs-input); }
  html.cp-v2 .v2-offers { margin-top: 10px; }
  html.cp-v2 .v2-or { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "t m m" "t p a"; gap: 4px 10px; padding: 10px; }
  html.cp-v2 .v2-or-th { grid-area: t; width: 56px; height: 56px; align-self: start; }
  html.cp-v2 .v2-or-m { grid-area: m; }
  html.cp-v2 .v2-or-p { grid-area: p; justify-items: start; text-align: left; align-self: center; }
  html.cp-v2 .v2-or-a { grid-area: a; }
}
/* Angebots-Sheet (beide Spiele): Bild links neben Titel, Preis links in Mono, Aktion "Im Shop öffnen" (Haupt-Button) */
html.cp-v2 .os-ov { z-index: var(--ob-z-sheet); background: var(--ob-backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html.cp-v2 .os-sheet {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "grab grab" "img title" "img badges" "img store" "price price" "meta meta" "ship ship" "chart chart" "open open";
  column-gap: 14px; row-gap: 6px; align-items: start; text-align: left; max-height: var(--ob-sheet-max);
  padding: 10px var(--ob-gutter) calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--ob-pop); color: var(--ob-ink);
  border: 1px solid var(--ob-line-2); border-bottom: 0; border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; box-shadow: var(--ob-shadow-2);
}
html.cp-v2 .os-grab { grid-area: grab; width: 40px; height: 5px; background: var(--ob-line-2); margin: 0 auto 8px; }
html.cp-v2 .os-close { top: 10px; right: 10px; width: var(--ob-tap); height: var(--ob-tap); border-radius: var(--ob-r-sm); border: 0; background: transparent; color: var(--ob-mute); }
html.cp-v2 .os-img { grid-area: img; margin: 0; }
html.cp-v2 .os-img img { width: 96px; height: 96px; max-width: none; max-height: none; padding: 6px; object-fit: contain; border-radius: var(--ob-r-sm); background: var(--ob-field); border: 1px solid var(--ob-line); }
html.cp-v2 .os-title { grid-area: title; margin: 0; padding-right: 40px; font-size: var(--ob-fs-base); font-weight: 750; line-height: 1.3; color: var(--ob-ink); }
html.cp-v2 .os-badges { grid-area: badges; justify-content: flex-start; margin: 0; }
html.cp-v2 .os-badges :is(.lang-badge, .type-badge) { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 700; padding: 1px 6px; border-radius: var(--ob-r-xs); border: 1px solid var(--ob-line-2); background: transparent; color: var(--ob-mute); }
html.cp-v2 .os-store { grid-area: store; margin: 0; font-size: var(--ob-fs-sm); font-weight: 650; color: var(--ob-ink); }
html.cp-v2 .os-price { grid-area: price; margin-top: 10px; font-family: var(--cp-font-mono); font-size: var(--ob-fs-xl); font-weight: 800; color: var(--ob-ink); font-variant-numeric: tabular-nums; }
html.cp-v2 .os-meta { grid-area: meta; justify-content: flex-start; margin: 0; font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .os-meta .offer-uvp-val s { color: var(--ob-dim); }
html.cp-v2 .os-chart { grid-area: chart; margin: 10px 0 12px; padding: 12px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-field); }
html.cp-v2 .os-chart :is(path[stroke], polyline) { stroke: var(--ob-aqua); }
html.cp-v2 .os-open { grid-area: open; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border-radius: var(--ob-r-sm); background: var(--ob-accent-btn); color: #fff; font-size: var(--ob-fs-md); font-weight: 700; text-align: center; }
@media (min-width: 900px) {
  html.cp-v2 .os-sheet { max-width: var(--ob-pop-w-s); border-bottom: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); padding: 20px; max-height: 85dvh; }
}
/* Helles Theme: theme-light.css färbt alle Links mit !important blau – v2-Produktseite nutzt eigene Farben */
html.cp-v2[data-theme="light"] :is(.v2-or-t, .v2-tab.on, .v2-link) { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] :is(.v2-tab, .v2-back, .v2-ib) { color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .v2-ib.v2-ex { color: var(--ob-violet-text) !important; }
html.cp-v2[data-theme="light"] .v2-wish.on { color: var(--ob-coral-ink) !important; }

/* ==========================================================================
   v2 Suchergebnisse = Aufbau der Produktseite (freigegeben 19.10.2026, Pokémon + Riftbound gleich)
   Tab „Alle" + Verlaufsliste je Produktart (Fall A), eine Produktart = Produktseite (Fall B), ohne Set: je Set (Fall C)
   Code: data.js cpRsV2/cpRsListV2/cpRsFillSparks/cpRsChart, script.js renderResultsV2, riftbound/rb.js rsV2
   ========================================================================== */
html.cp-v2 :is(#resultsSection, #resultsHeroArea) { display: none !important; }
html.cp-v2 #resultsContainer .v2-crumb { margin: 4px 0 10px; }
html.cp-v2 .v2-rs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
html.cp-v2 .v2-rs-head > div:first-child { min-width: 0; }
html.cp-v2 .v2-rs-head h1 { margin: 4px 0; font-size: var(--ob-fs-xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--ob-ink); text-wrap: balance; overflow-wrap: anywhere; }
html.cp-v2 .v2-rs-head p { margin: 0; color: var(--ob-mute); font-size: var(--ob-fs-md); }
html.cp-v2 .v2-rs-head p b { color: var(--ob-ink); }
html.cp-v2 .v2-rs-acts { display: flex; gap: 8px; flex: none; }
html.cp-v2 .v2-rs-acts .v2-chip { text-decoration: none; }
html.cp-v2 .v2-rs button.v2-tab { padding: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; border-radius: 0; cursor: pointer; gap: 4px; box-shadow: none; }
html.cp-v2 .v2-rs button.v2-tab.on { border-bottom-color: var(--ob-violet); }
html.cp-v2 .v2-tab small { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-dim); font-weight: 600; }
html.cp-v2 .v2-rs .v2-pp-side { max-height: calc(100dvh - 100px); overflow-y: auto; scrollbar-width: none; }
html.cp-v2 .v2-rs .v2-pp-side::-webkit-scrollbar { display: none; }
/* Verlaufsliste: je Zeile Name, Mini-Linie, „ab"-Preis + Änderung im Zeitraum */
html.cp-v2 .v2-tl { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .v2-tl-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
html.cp-v2 .v2-tl-list { display: grid; }
html.cp-v2 .v2-tl-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px auto 16px; align-items: center; gap: 10px; width: 100%; min-height: var(--ob-tap); padding: 8px 0; border: 0; border-top: 1px solid var(--ob-line); border-radius: 0; background: transparent; color: var(--ob-dim); text-align: left; text-decoration: none; font: inherit; cursor: pointer; box-shadow: none; }
html.cp-v2 .v2-tl-row:first-child { border-top: 0; }
html.cp-v2 .v2-tl-n { display: grid; min-width: 0; }
html.cp-v2 .v2-tl-n b { font-size: var(--ob-fs-sm); font-weight: 650; color: var(--ob-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .v2-tl-n small { font-size: var(--ob-fs-2xs); color: var(--ob-dim); }
html.cp-v2 .v2-spark { display: block; width: 84px; height: 26px; }
html.cp-v2 .v2-spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
html.cp-v2 .v2-spark path { fill: none; stroke: var(--ob-aqua); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
html.cp-v2 .v2-spark-few { display: grid; place-items: center; height: 100%; font-size: var(--ob-fs-2xs); color: var(--ob-dim); text-align: center; line-height: 1.1; }
html.cp-v2 .v2-tl-p { display: grid; justify-items: end; font-family: var(--cp-font-mono); }
html.cp-v2 .v2-tl-p b { font-size: var(--ob-fs-sm); color: var(--ob-ink); white-space: nowrap; }
html.cp-v2 .v2-tl-p small { font-size: var(--ob-fs-2xs); min-height: 1em; }
html.cp-v2 .v2-tl-hint { font-size: var(--ob-fs-xs); color: var(--ob-dim); }
/* Gruppen rechts */
html.cp-v2 .v2-grp { display: grid; gap: 8px; margin-bottom: 18px; }
html.cp-v2 .v2-grp-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: var(--ob-fs-md); color: var(--ob-ink); }
html.cp-v2 .v2-grp-h > span { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 .v2-grp-more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-height: var(--ob-tap-min); padding: 0 4px; border: 0; background: transparent; color: var(--ob-violet-text); font: inherit; font-size: var(--ob-fs-sm); font-weight: 650; cursor: pointer; box-shadow: none; }
html.cp-v2 .v2-grp-more .ob-icon { width: 16px; height: 16px; }
html.cp-v2 .v2-more { justify-self: center; margin-top: 4px; }
html.cp-v2 .v2-fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 12px; }
html.cp-v2 .v2-chip.on { border-color: rgb(var(--ob-violet-rgb) / 0.55); background: rgb(var(--ob-violet-rgb) / 0.12); color: var(--ob-ink); }
html.cp-v2 .v2-chip .ob-icon { width: 16px; height: 16px; }
html.cp-v2 .v2-clear { min-height: var(--ob-tap-min); padding: 0 6px; border: 0; background: transparent; color: var(--ob-violet-text); font: inherit; font-size: var(--ob-fs-sm); font-weight: 650; cursor: pointer; box-shadow: none; }
html.cp-v2 .v2-kindnote a.v2-clear { display: inline-flex; align-items: center; min-height: var(--ob-tap-min); }
@media (hover: hover) {
  html.cp-v2 .v2-tl-row:hover b { color: var(--ob-violet-text); }
  html.cp-v2 .v2-rs button.v2-tab:hover { color: var(--ob-ink); }
}
@media (max-width: 899px) {
  html.cp-v2 .v2-rs .v2-pp-side { max-height: none; overflow: visible; }
  html.cp-v2 .v2-rs-head { flex-wrap: nowrap; margin-bottom: 10px; }
  html.cp-v2 .v2-rs-head h1 { font-size: var(--ob-fs-lg); }
  html.cp-v2 .v2-rs-head p { font-size: var(--ob-fs-sm); }
  html.cp-v2 .v2-rs-acts .v2-chip { width: var(--ob-tap); padding: 0; justify-content: center; }
  html.cp-v2 .v2-rs-acts .v2-chip span { display: none; }
  html.cp-v2 .v2-rs-all .v2-pp-best { display: none; }
  html.cp-v2 .v2-rs .v2-what { display: none; }
  /* Verlaufsliste am Handy: waagerecht wischbare Karten */
  html.cp-v2 .v2-tl { order: 2; padding: 0; border: 0; background: transparent; }
  html.cp-v2 .v2-tl :is(.v2-tl-h, .v2-tl-hint) { display: none; }
  html.cp-v2 .v2-tl-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--ob-gutter-sm)); padding: 2px var(--ob-gutter-sm); }
  html.cp-v2 .v2-tl-list::-webkit-scrollbar { display: none; }
  html.cp-v2 .v2-tl-row { flex: none; width: 132px; grid-template-columns: 1fr; gap: 2px; padding: 10px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
  html.cp-v2 .v2-tl-row:first-child { border-top: 1px solid var(--ob-line); }
  html.cp-v2 .v2-tl-n small, html.cp-v2 .v2-tl-row > .ob-icon { display: none; }
  html.cp-v2 .v2-tl-n b { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
  html.cp-v2 .v2-tl-p { order: 2; justify-items: start; }
  html.cp-v2 .v2-tl-p b { font-size: var(--ob-fs-md); }
  html.cp-v2 .v2-tl-row .v2-spark { order: 3; width: 100%; height: 22px; }
  html.cp-v2 .v2-tl-row .v2-spark:empty { display: none; }
}
html.cp-v2[data-theme="light"] :is(.v2-tl-row, .v2-rs-acts .v2-chip) { color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .v2-tl-row .v2-tl-n b { color: var(--ob-ink) !important; }

/* ==========================================================================
   v2 Sammlung (freigegeben 19.10.2026, Pokémon + Riftbound gleich): Übersicht + Set-Seite im Aufbau der Produktseite,
   kompakte Kartenkachel, Karten-Sheet. Code: sets/sets.js (renderOverviewV2/renderDetailV2/cardTileV2/renderCardSheet),
   riftbound/rb.js (renderSetsOverview/renderSetDetail v2), gemeinsame Klassen .cx2-*
   ========================================================================== */
html.cp-v2 .cx2 .v2-crumb { margin: 4px 0 10px; }
html.cp-v2 .cx2 button.v2-back { padding: 0; border: 0; background: transparent; box-shadow: none; font: inherit; font-size: var(--ob-fs-sm); font-weight: 650; cursor: pointer; }
html.cp-v2 .cx2 .cx-var-hint { display: none !important; }
html.cp-v2 .cx2-head { align-items: center; }
html.cp-v2 .cx2-head .v2-ph { margin: 0; min-width: 0; }
html.cp-v2 .cx2-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none; }
html.cp-v2 .cx2-acts .v2-ib, html.cp-v2 .cx2-acts .v2-chip { text-decoration: none; }
html.cp-v2 .cx2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ob-tap); padding: 0 18px; border: 0; border-radius: var(--ob-r-sm); background: var(--ob-accent-btn); color: #fff; font: inherit; font-size: var(--ob-fs-md); font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: none; }
html.cp-v2 .cx2-btn .ob-icon { width: 18px; height: 18px; }
html.cp-v2 .cx2-btn.alt { background: transparent; border: 1px solid var(--ob-line-2); color: var(--ob-ink); }
html.cp-v2 .cx2-acts[hidden] { display: none !important; }
/* Tab Sealed im Set: Verlauf, Kennzahlen und Preisquelle stehen im Sealed-Block; Karten-Kopfbereich der Seitenleiste entfaellt */
html.cp-v2 .cx2[data-cxview="sealed"] :is(#cxDetailSummary, #cxSetValueChart, #rbSummary, #rbSetValueChart, #opSummary, #opSetValueChart, .v2-pp-side > .cx2-set) { display: none !important; }
html.cp-v2 .cx2 .cx-sealed-wrap .sd-card { display: grid; gap: var(--ob-s-3); }
html.cp-v2 .cx2 .cx-sealed-wrap .sd-card > .sd-head-pg { display: none !important; } /* nur Traeger der versteckten Aktions-Knoepfe */
html.cp-v2 .cx2 .cx-sealed-wrap .sd-card > :is(.sv-prog, .sv-pgchart, .sv-src) { order: 0; }
html.cp-v2 .cx2 .cx-sealed-wrap .sv-toolbar .cx-tabs { order: 1; }
html.cp-v2 .cx2 .cx-sealed-wrap .sv-toolbar .cx-select { order: 2; }
html.cp-v2 .cx2 .cx-sealed-wrap .sv-toolbar .cx-search { order: 3; }
html.cp-v2 .cx2 .sv-gv { display: inline-flex; flex-direction: column; align-items: flex-end; }
html.cp-v2 .cx2 .sv-gv .sd-stat-note { display: block; font-size: var(--ob-fs-2xs); font-weight: 500; color: var(--ob-mute); white-space: normal; text-align: right; }
html.cp-v2 .cx2 .sv-prog .is-up { color: var(--ob-green); }
html.cp-v2 .cx2 .sv-prog .is-down { color: var(--ob-coral); }
html.cp-v2 .cx2-tab small { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-dim); margin-left: 4px; }
html.cp-v2 .cx2 button.v2-tab { padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; cursor: pointer; box-shadow: none; font: inherit; font-size: var(--ob-fs-md); font-weight: 650; }
html.cp-v2 .cx2 button.v2-tab.on { color: var(--ob-ink); border-bottom-color: var(--ob-violet); }
/* Fortschritt + Werte */
html.cp-v2 .cx2-prow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
html.cp-v2 .cx2-bar { display: block; height: 6px; border-radius: 3px; background: var(--ob-line); overflow: hidden; margin: 2px 0 4px; }
html.cp-v2 .cx2-bar i { display: block; height: 100%; min-width: 2px; border-radius: 3px; background: var(--ob-violet); }
html.cp-v2 .cx2-sum .v2-sm b { font-family: var(--cp-font-mono); color: var(--ob-ink); }
html.cp-v2 .cx2-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--ob-line); font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .cx2-kv b { font-family: var(--cp-font-mono); color: var(--ob-ink); text-align: right; white-space: nowrap; }
/* Umschalter (Kartensprache, Preisquelle, Echt/Simulation, Sealed-Quelle) als Segmente */
html.cp-v2 :is(.cx2, .ps-topbar) .cx-source { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 0; background: transparent; border: 0; }
html.cp-v2 :is(.cx2, .ps-topbar) .cx-source-label { font-size: var(--ob-fs-sm); font-weight: 600; color: var(--ob-mute); text-transform: none; letter-spacing: 0; font-family: inherit; }
html.cp-v2 :is(.cx2, .ps-topbar) .cx-source-switch { display: inline-flex; gap: 2px; padding: 2px; width: auto; min-width: 0; border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-sm); background: transparent !important; box-shadow: none; }
html.cp-v2 :is(.cx2, .ps-topbar) .cx-source-thumb { display: none !important; }
html.cp-v2 :is(.cx2, .ps-topbar) .cx-source-opt { position: static; min-height: 30px; padding: 0 10px; border: 0 !important; border-radius: var(--ob-r-xs); background: transparent !important; color: var(--ob-mute) !important; font-size: var(--ob-fs-xs); font-weight: 650; box-shadow: none !important; flex: none; width: auto; }
html.cp-v2 :is(.cx2, .ps-topbar) .cx-source-opt.active { background: rgb(var(--ob-violet-rgb) / 0.16) !important; color: var(--ob-ink) !important; }
html.cp-v2 .ps-topbar { display: flex; justify-content: flex-start; margin-bottom: 8px; }
html.cp-v2 .ps-topbar .cx-source { justify-content: flex-start; }
html.cp-v2 .cx2-set { gap: 10px; }
/* Kartensprache: sechs Flaggen-Tasten (Tippfläche mindestens --ob-tap-min), aktiv wie Sprachchips (Violett 14 %, Rand Violett 50 %) */
html.cp-v2 :is(.cx2, .ps-topbar) .cx-clang { flex-wrap: wrap; }
html.cp-v2 :is(.cx2, .ps-topbar) .cx-clang .cx-source-switch { max-width: 100%; }
html.cp-v2 :is(.cx2, .ps-topbar) .cx-clang .cx-source-opt { display: inline-flex; align-items: center; justify-content: center; min-width: var(--ob-tap-min); min-height: var(--ob-tap-min); padding: 0 var(--ob-s-1); border: 1px solid transparent !important; }
html.cp-v2 :is(.cx2, .ps-topbar) .cx-clang .cx-source-opt.active { background: rgb(var(--ob-violet-rgb) / 0.14) !important; border-color: rgb(var(--ob-violet-rgb) / 0.5) !important; }
/* Sets ohne Logo (Asien): Set-Code als Platzhalter, Fläche --ob-field, Code in Mono */
html.cp-v2 .cx-set-art.ph, html.cp-v2[data-theme="light"] .cx2 .cx-set-art.ph { background: var(--ob-field) !important; }
html.cp-v2 .cx2-ph-code { display: grid; place-items: center; background: var(--ob-field); border: 1px solid var(--ob-line); border-radius: var(--ob-r-xs); color: var(--ob-ink); font-family: var(--cp-font-mono); font-size: var(--ob-fs-md); font-weight: 800; text-align: center; overflow-wrap: anywhere; padding: var(--ob-s-1); }
/* Karten ohne Bild: Platzhalter 63:88, Nummer in Mono, Name klein darunter */
html.cp-v2 .cx2 .cx2-card .cx-card-img.noimg { background: var(--ob-field); border: 1px solid var(--ob-line); border-radius: var(--ob-r-xs); }
html.cp-v2 .cx2 .cx2-card .cx-card-img .cx-card-noimg { inset: 0; border-radius: var(--ob-r-xs); background: none; flex-direction: column; gap: var(--ob-s-1); padding: var(--ob-s-1); color: var(--ob-mute); }
html.cp-v2 .cx2 .cx2-card .cx-card-noimg b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-ink); }
html.cp-v2 .cx2 .cx2-card .cx-card-noimg small { font-size: var(--ob-fs-xs); font-weight: 500; color: var(--ob-mute); line-height: var(--ob-lh-tight); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%; }
html.cp-v2 .cx2 .cx2-card.missing .cx-card-img.noimg .cx-card-noimg { opacity: 0.6; }
html.cp-v2 .cx2-sh .cx2-sh-noimg { width: 110px; aspect-ratio: var(--ob-ratio-card); flex: none; display: grid; place-items: center; background: var(--ob-field); border: 1px solid var(--ob-line); border-radius: var(--ob-r-xs); }
html.cp-v2 .cx2-sh .cx2-sh-noimg b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-ink); }
/* Ersatzbild mit Flagge (Asien): englisches Bild/Logo, Flagge der Kartensprache oben rechts, 20x14, dünner Rand, keine Mausereignisse (Styleguide „Sammlung“) */
html.cp-v2 .cx2 .cx-set-art, html.cp-v2 .cx2-lg, html.cp-v2 .cx2-sh .cx2-sh-im { position: relative; }
html.cp-v2 .cx2-lg { display: block; width: 112px; aspect-ratio: 16 / 9; flex: none; }
html.cp-v2 .cx2-lg .v2-ph-logo { width: 100%; display: block; }
html.cp-v2 .cx2-sh .cx2-sh-im { display: block; width: 110px; flex: none; }
html.cp-v2 .cx2-sh .cx2-sh-im img { width: 100%; height: auto; display: block; }
html.cp-v2 .cx2-flag { position: absolute; top: var(--ob-s-1); right: var(--ob-s-1); z-index: 1; width: 20px; height: 14px; border-radius: calc(var(--ob-r-xs) / 4); background: var(--ob-field) center / cover no-repeat; box-shadow: 0 0 0 1px rgb(var(--ob-black-rgb) / 0.35), 0 1px 3px rgb(var(--ob-black-rgb) / 0.4); pointer-events: none; }
html.cp-v2 .cx2-set-row { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 4px 0 18px; }
/* Filterleiste */
html.cp-v2 .cx2-fbar { gap: 8px; }
html.cp-v2 .cx2-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: transparent; }
html.cp-v2 .cx2-seg .cx-tab { min-height: 32px; padding: 0 10px; border-radius: var(--ob-r-xs); background: transparent; color: var(--ob-mute); font-size: var(--ob-fs-xs); font-weight: 650; }
html.cp-v2 .cx2-seg .cx-tab.active { background: rgb(var(--ob-violet-rgb) / 0.16); color: var(--ob-ink); }
html.cp-v2 .cx2-seg .cx-tab-count { font-family: var(--cp-font-mono); color: var(--ob-dim); opacity: 1; }
html.cp-v2 .cx2 .cx2-fbar .v2-quick { flex: 1; width: auto; min-width: 180px; }
html.cp-v2 .cx2 .cx2-sel { min-height: var(--ob-tap-min); padding: 0 30px 0 12px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background-color: transparent; color: var(--ob-mute); font-size: var(--ob-fs-sm); font-weight: 650; }
html.cp-v2 .cx2 .cx-toggle { color: var(--ob-mute); font-size: var(--ob-fs-sm); font-weight: 650; }
html.cp-v2 .cx2 .cx-toggle input:checked + .cx-toggle-track { background: var(--ob-violet); }
html.cp-v2 .cx2 .cx-var-hint { margin: 0 0 10px; font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 .cx2 .cx-bulk { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
/* Kartenkachel */
html.cp-v2 .cx2-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; margin-top: 0; }
html.cp-v2 .cx2 .cx2-card { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); box-shadow: none; transform: none; }
html.cp-v2 .cx2 .cx2-card.owned { border-color: rgb(var(--ob-green-rgb) / 0.45); box-shadow: none; }
html.cp-v2 .cx2 .cx2-card .cx-card-img { padding: 0; aspect-ratio: 63 / 88; cursor: pointer; background: none; }
html.cp-v2 .cx2 .cx2-card .cx-card-img img { border-radius: var(--ob-r-xs); object-fit: cover; }
html.cp-v2 .cx2 .cx2-card.missing .cx-card-img img { filter: grayscale(1); opacity: 0.45; }
html.cp-v2 .cx2 .cx2-card .cx-owned-badge { top: 6px; left: 6px; right: auto; display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px; background: var(--ob-green); color: #04130d; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); box-shadow: none; }
html.cp-v2 .cx2 .cx2-card .cx-owned-badge .ob-icon { width: 12px; height: 12px; }
html.cp-v2 .cx2 .cx2-card .cx-card-body { display: grid; gap: 4px; padding: 0; }
html.cp-v2 .cx2-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ob-fs-sm); font-weight: 650; color: var(--ob-ink); }
html.cp-v2 .cx2-t small { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 500; color: var(--ob-dim); }
html.cp-v2 .cx2-p { display: flex; align-items: center; gap: 4px; min-width: 0; }
html.cp-v2 .cx2-p > b { margin-right: auto; font-family: var(--cp-font-mono); font-size: var(--ob-fs-sm); color: var(--ob-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.cp-v2 .cx2-vc { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 700; padding: 1px 4px; border-radius: var(--ob-r-xs); border: 1px solid var(--ob-line-2); color: var(--ob-dim); }
html.cp-v2 .cx2-vc.on { border-color: rgb(var(--ob-green-rgb) / 0.7); color: var(--ob-green); }
html.cp-v2 .cx2-add { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-xs); background: transparent; color: var(--ob-violet-text); cursor: pointer; box-shadow: none; }
html.cp-v2 .cx2-add .ob-icon { width: 16px; height: 16px; }
/* Set-Kacheln */
html.cp-v2 .cx2 .cx-set-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
html.cp-v2 .cx2 .cx-set-tile { border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); box-shadow: none; }
html.cp-v2 .cx2 .cx-set-tile.has { border-color: rgb(var(--ob-violet-rgb) / 0.55); }
html.cp-v2 .cx2 .cx-set-tile.complete { border-color: rgb(var(--ob-green-rgb) / 0.6); box-shadow: none; }
html.cp-v2 .cx2 .cx-progress { height: 6px; border-radius: 3px; background: var(--ob-line); }
html.cp-v2 .cx2 .cx-progress-bar { background: var(--ob-violet); border-radius: 3px; min-width: 2px; }
html.cp-v2 .cx2 .cx-set-progress-meta { font-family: var(--cp-font-mono); }
html.cp-v2 .cx2 .cx-series-head h2 { font-size: var(--ob-fs-base); color: var(--ob-ink); background: none; -webkit-text-fill-color: currentColor; }
/* Übersicht: Zahlen + Wertverlauf */
html.cp-v2 .cx2-ovsum { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; align-items: start; margin-bottom: 14px; }
html.cp-v2 .cx2-ovsum > * { min-width: 0; }
html.cp-v2 .cx2-ovsum .cx-stats { margin: 0; grid-template-columns: minmax(0, 1fr); gap: 8px; }
html.cp-v2 .cx2-ovsum .cx-stat > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; min-width: 0; }
html.cp-v2 .cx2-ovsum .cx-stat-value { margin: 0; overflow-wrap: anywhere; }
html.cp-v2 .cx2-ovsum .v2-pp-chart { margin: 0; }
html.cp-v2 .cx2-ovsum.cx2-nochart { grid-template-columns: 1fr; } /* WP-F2: Gast ohne Wertverlauf */
html.cp-v2 .cx2-ovsum.cx2-nochart .cx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.cp-v2 .cx2-ovsum.cx2-nochart .cx-stat > div { display: block; }
html.cp-v2 .cx2 .cx-stat { display: block; padding: 14px 16px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .cx2 .cx-stat-label { 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 .cx2 .cx-stat-value { font-family: var(--cp-font-mono); font-size: var(--ob-fs-lg); font-weight: 800; color: var(--ob-ink); margin-top: 4px; }
html.cp-v2 .cx2 :is(.cx-set-grid, .cx-card-grid) > * { animation: none; }
/* Karten-Sheet */
html.cp-v2 .cx2-ov { position: fixed; inset: 0; z-index: var(--ob-z-sheet); display: flex; align-items: flex-end; justify-content: center; background: var(--ob-backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html.cp-v2 .cx2-sheet { position: relative; display: grid; gap: 12px; width: 100%; max-height: var(--ob-sheet-max); overflow-y: auto; padding: 10px var(--ob-gutter) calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--ob-pop); color: var(--ob-ink); border: 1px solid var(--ob-line-2); border-bottom: 0; border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; box-shadow: var(--ob-shadow-2); }
html.cp-v2 .cx2-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--ob-line-2); margin: 0 auto; }
html.cp-v2 .cx2-x { position: absolute; top: 10px; right: 10px; border-color: transparent; }
html.cp-v2 .cx2-sh { display: flex; gap: 14px; align-items: center; padding-right: 44px; }
html.cp-v2 .cx2-sh img { width: 110px; height: auto; flex: none; border-radius: var(--ob-r-xs); }
html.cp-v2 .cx2-sh > div { display: grid; gap: 4px; min-width: 0; }
html.cp-v2 .cx2-sh b { font-size: var(--ob-fs-lg); }
html.cp-v2 .cx2-vrs { display: grid; gap: 8px; }
html.cp-v2 .cx2-vr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); }
html.cp-v2 .cx2-vr.on { border-color: rgb(var(--ob-green-rgb) / 0.45); }
html.cp-v2 .cx2-vr > span:first-child { display: grid; min-width: 0; }
html.cp-v2 .cx2-vr small { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 .cx2-vr .cx-qty { display: flex; align-items: center; gap: 8px; }
html.cp-v2 .cx2-vr .cx-qty-btn { width: var(--ob-tap-min); height: var(--ob-tap-min); display: grid; place-items: center; padding: 0; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-ink); font-size: var(--ob-fs-lg); box-shadow: none; }
html.cp-v2 .cx2-vr .cx-qty-num { min-width: 16px; text-align: center; font-family: var(--cp-font-mono); font-weight: 700; }
html.cp-v2 .cx2-sa { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
html.cp-v2 .cx2-sa .cx2-btn { width: 100%; }
@media (min-width: 900px) {
  html.cp-v2 .cx2-ov { align-items: center; }
  html.cp-v2 .cx2-sheet { max-width: var(--ob-pop-w-s); border-bottom: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); padding: 20px; max-height: 85dvh; }
  html.cp-v2 .cx2-grab { display: none; }
}
@media (hover: hover) {
  html.cp-v2 .cx2 .cx2-card:hover { border-color: rgb(var(--ob-violet-rgb) / 0.45); transform: none; }
  html.cp-v2 .cx2 .cx2-card.missing:hover .cx-card-img img { filter: grayscale(0.3); opacity: 0.85; }
  html.cp-v2 :is(.cx2-add, .cx2-vr .cx-qty-btn):hover { border-color: rgb(var(--ob-violet-rgb) / 0.55); }
}
@media (max-width: 899px) {
  html.cp-v2 .cx2-head { flex-wrap: wrap; }
  html.cp-v2 .cx2-acts { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; }
  html.cp-v2 .cx2-acts .v2-chip { width: var(--ob-tap); padding: 0; justify-content: center; }
  html.cp-v2 .cx2-acts .v2-chip span { display: none; }
  html.cp-v2 .cx2-acts-sealed { grid-template-columns: minmax(0, 1fr) repeat(4, var(--ob-tap)); }
  html.cp-v2 .cx2-acts-sealed .cx2-btn { padding: 0 var(--ob-s-3); min-width: 0; }
  html.cp-v2 .cx2-acts-sealed .cx2-btn.alt { padding: 0; }
  html.cp-v2 .cx2-acts-sealed .cx2-btn.alt .cx2-bt { display: none; }
  html.cp-v2 .cx2-acts-sealed2 { grid-template-columns: minmax(0, 1fr) repeat(3, var(--ob-tap)); }
  html.cp-v2 .cx2-cols .cx2-sum { order: 1; display: grid; grid-template-columns: 1fr; padding: 12px 14px; }
  html.cp-v2 .cx2-cols .cx2-sum .v2-big { font-size: var(--ob-fs-lg); grid-row: auto; }
  html.cp-v2 .cx2-cols .v2-pp-chart { order: 2; }
  html.cp-v2 .cx2-cols .cx2-set { order: 3; }
  html.cp-v2 .cx2-cols .v2-pp-main { order: 4; }
  html.cp-v2 .cx2-cols .v2-links { order: 5; }
  html.cp-v2 .cx2-cols .cx2-set { grid-template-columns: minmax(0, 1fr); align-items: stretch; } /* sechs Flaggen + Preisquelle untereinander statt nebeneinander */
  html.cp-v2 .cx2-cols .cx2-set .v2-sm, html.cp-v2 .cx2-cols .cx2-set .v2-big { justify-self: stretch; }
  html.cp-v2 .cx2-fbar .cx2-seg { flex: 1; }
  html.cp-v2 .cx2-fbar .cx2-seg .cx-tab { flex: 1; }
  html.cp-v2 .cx2 .cx2-fbar .v2-quick { order: 5; width: 100%; flex: auto; }
  html.cp-v2 .cx2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html.cp-v2 .cx2 .cx2-card { padding: 6px; gap: 3px; }
  html.cp-v2 .cx2-t { font-size: var(--ob-fs-xs); }
  html.cp-v2 .cx2-p > b { font-size: var(--ob-fs-xs); }
  html.cp-v2 .cx2-p .cx2-vc { display: none; }
  html.cp-v2 .cx2-add { width: 28px; height: 28px; }
  html.cp-v2 .cx2-ovsum { grid-template-columns: 1fr; }
  html.cp-v2 .cx2 .v2-tabs { margin-bottom: var(--ob-s-3); }
  html.cp-v2 .cx2 .cx-set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.cp-v2 .cx2 .cx-stat { padding: 10px 12px; }
  html.cp-v2 .cx2-ovsum .cx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.cp-v2 .cx2-ovsum .cx-stat > div { display: block; }
  html.cp-v2 .cx2 .cx-stat-value { font-size: var(--ob-fs-md); }
}
html.cp-v2[data-theme="light"] .cx2 :is(.v2-link, button.v2-tab.on) { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .cx2 :is(.v2-back, button.v2-tab, .v2-ib, .v2-chip) { color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .cx2-btn { color: #fff !important; }
html.cp-v2[data-theme="light"] .cx2 .cx2-card .cx-owned-badge { color: #fff; background: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] .cx2-vc.on { color: var(--ob-green-ink); }
/* Sealed in der Sammlung (sets/sealed.js, riftbound/rb-sealed.js) */
html.cp-v2 .cx2 .sd-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sd-head h2 { margin: 0 0 2px; font-size: var(--ob-fs-base); color: var(--ob-ink); background: none; -webkit-text-fill-color: currentColor; }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sd-head p { margin: 0; font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sd-head-btns { display: flex; gap: 8px; flex-wrap: wrap; }
html.cp-v2 :is(.cx2, .cp-hl-sec) :is(.sd-head-btns, .sd-empty-card) .cx-link-btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ob-tap-min); padding: 0 14px; border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-pill); background: transparent !important; color: var(--ob-mute) !important; font-size: var(--ob-fs-sm); font-weight: 650; box-shadow: none !important; transform: none; filter: none; }
html.cp-v2 :is(.cx2, .cp-hl-sec) :is(.sd-head-btns, .sd-empty-card) .cx-link-btn::after { display: none; }
html.cp-v2 :is(.cx2, .cp-hl-sec) :is(.sd-head-btns, .sd-empty-card) .cx-link-btn.accent { border-color: transparent !important; background: var(--ob-accent-btn) !important; color: #fff !important; }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-toolbar .cx-search { display: flex; align-items: center; padding: 0 12px; }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-toolbar .cx-search > span:first-child { display: none; }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sd-head-btns .ob-icon { width: 16px; height: 16px; }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sd-stat { display: flex; flex-direction: column-reverse; gap: 4px; padding: 12px 14px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sd-stat span { 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 :is(.cx2, .cp-hl-sec) .sd-stat b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-md); color: var(--ob-ink); }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 0; background: transparent; border: 0; }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-toolbar .cx-tabs { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: transparent; }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-toolbar .cx-tab { min-height: 32px; padding: 0 10px; border-radius: var(--ob-r-xs); background: transparent; color: var(--ob-mute); font-size: var(--ob-fs-xs); font-weight: 650; }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-toolbar .cx-tab.active { background: rgb(var(--ob-violet-rgb) / 0.16); color: var(--ob-ink); }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-toolbar .cx-search { flex: 1; min-width: 180px; height: var(--ob-tap-min); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: var(--ob-field); }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-toolbar .cx-select { min-height: var(--ob-tap-min); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background-color: transparent; color: var(--ob-mute); font-size: var(--ob-fs-sm); }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-tile { display: grid; gap: 4px; align-content: start; padding: 8px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); color: var(--ob-ink); text-align: left; box-shadow: none; transform: none; }
/* Link "Produktseite" im Sealed-Dialog/-Formular (Textlink wie .rl2-tl) */
html.cp-v2 .sv-prodlink { display: inline-flex; align-items: center; gap: 4px; min-height: var(--ob-tap); padding: 0 6px 0 0; color: var(--ob-violet-text); font: inherit; font-size: var(--ob-fs-md); font-weight: 700; text-decoration: none; }
html.cp-v2 .sv-prodlink:hover { color: var(--ob-ink); }
html.cp-v2 .sv-prodlink:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2 :is([data-sv-plink], [data-rbsd-plink], [data-opsd-plink]):empty { display: none; }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-tile.owned { border-color: rgb(var(--ob-green-rgb) / 0.45); }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-tile .sv-img { border-radius: var(--ob-r-xs); background: var(--ob-hover); }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-tile.missing .sv-img img { filter: grayscale(1); opacity: 0.45; }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-tile .sv-qty { background: var(--ob-green); color: #04130d; font-family: var(--cp-font-mono); border-radius: var(--ob-r-pill); }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-tile .sv-name { font-size: var(--ob-fs-sm); font-weight: 650; }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-tile small { font-size: var(--ob-fs-2xs); color: var(--ob-dim); }
html.cp-v2 :is(.cx2, .cp-hl-sec) .sd-note { font-size: var(--ob-fs-xs); color: var(--ob-dim); }
@media (max-width: 899px) {
  html.cp-v2 :is(.cx2, .cp-hl-sec) .sd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-tile { padding: 6px; }
  html.cp-v2 :is(.cx2, .cp-hl-sec) .sv-tile .sv-name { font-size: var(--ob-fs-xs); }
}
html.cp-v2[data-theme="light"] :is(.cx2, .cp-hl-sec) :is(.sd-head-btns, .sd-empty-card) .cx-link-btn:not(.accent) { color: var(--ob-mute) !important; background: transparent !important; }
html.cp-v2[data-theme="light"] :is(.cx2, .cp-hl-sec) :is(.sd-head-btns, .sd-empty-card) .cx-link-btn.accent { color: #fff !important; }
html.cp-v2[data-theme="light"] .cx2 :is(.cx2-seg, .sv-toolbar .cx-tabs) .cx-tab { background: transparent !important; color: var(--ob-mute) !important; border: 0 !important; box-shadow: none !important; }
html.cp-v2[data-theme="light"] .cx2 :is(.cx2-seg, .sv-toolbar .cx-tabs) .cx-tab.active { background: rgb(var(--ob-violet-rgb) / 0.12) !important; color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .cx2 .cx-set-tile { background: var(--ob-surface) !important; border-color: var(--ob-line) !important; }
html.cp-v2[data-theme="light"] .cx2 .cx-set-tile.has { border-color: rgb(var(--ob-violet-rgb) / 0.55) !important; }
html.cp-v2[data-theme="light"] .cx2 .cx-set-tile.complete { border-color: rgb(var(--ob-green-rgb) / 0.6) !important; }

/* ==========================================================================
   v2 Binder (freigegeben 19.10.2026, Pokémon + Riftbound gleich): Liste als Zeilen, Binder-Seite mit Teilen als Haupt-Button,
   Umbenennen/Löschen als Icons, Pfeil-Icons zum Blättern. Code: binder/binder.js, riftbound/binder/rb-binder.js (renderList/renderBinder v2)
   ========================================================================== */
html.cp-v2 .bd2 { display: grid; gap: 14px; }
html.cp-v2 .bd2 .v2-crumb { margin: 4px 0 -4px; }
html.cp-v2 .bd2 button.v2-back { padding: 0; border: 0; background: transparent; box-shadow: none; font: inherit; font-size: var(--ob-fs-sm); font-weight: 650; cursor: pointer; }
html.cp-v2 .bd2-head { justify-content: space-between; flex-wrap: wrap; margin: 0; }
html.cp-v2 .bd2-hm { display: flex; align-items: center; gap: 16px; min-width: 0; }
html.cp-v2 .bd2-hm h1 { overflow-wrap: anywhere; }
html.cp-v2 .bd2-head p b { font-family: var(--cp-font-mono); color: var(--ob-ink); }
html.cp-v2 .bd2-used { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .bd2 .cx2-btn[disabled] { opacity: 0.45; cursor: default; }
html.cp-v2 .bd2 .bd-cover { width: 44px; height: 56px; padding-left: 14px; gap: 6px; background: var(--c); box-shadow: inset 6px 0 0 rgb(var(--ob-black-rgb) / 0.25); }
html.cp-v2 .bd2 .bd-cover i { height: 2px; }
html.cp-v2 .bd2 .bd-cover.big { width: 64px; height: 82px; padding-left: 18px; gap: 8px; }
html.cp-v2 .bd2-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
html.cp-v2 .bd2-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); color: var(--ob-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: none; }
html.cp-v2 .bd2-row > .ob-icon { color: var(--ob-dim); }
html.cp-v2 .bd2-m { display: grid; gap: 2px; flex: 1; min-width: 0; }
html.cp-v2 .bd2-m b { font-size: var(--ob-fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .bd2-m small { font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 .bd2-empty { display: grid; justify-items: center; gap: 8px; padding: 36px 16px; text-align: center; border: 1px dashed var(--ob-line-2); border-radius: var(--ob-r-md); }
html.cp-v2 .bd2-empty b { font-size: var(--ob-fs-base); }
html.cp-v2 .bd2-empty p { margin: 0 0 6px; max-width: 46ch; font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .bd2-empty h1.bd2-eh { margin: 0 0 6px; max-width: 46ch; font-size: var(--ob-fs-sm); font-weight: 400; line-height: inherit; color: var(--ob-mute); } /* WP-F1: Fehler-/Leerzustand behält genau eine h1 (Text wie p) */
html.cp-v2 .bd2-eic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgb(var(--ob-violet-rgb) / 0.14); color: var(--ob-violet-text); }
html.cp-v2 .bd2-eic .ob-icon { width: 28px; height: 28px; }
html.cp-v2 .bd2-del { color: var(--ob-coral); }
html.cp-v2 .bd2 .v2-ib[disabled] { opacity: 0.35; cursor: default; }
html.cp-v2 .bd2-nav { justify-content: flex-start; gap: 10px; margin: 0; }
html.cp-v2 .bd2-nav .bd-pageno { min-width: 0; font-family: var(--cp-font-mono); font-size: var(--ob-fs-sm); font-weight: 650; color: var(--ob-mute); }
html.cp-v2 .bd2 .bd-page { max-width: min(100%, calc(var(--cols) * 150px)); margin: 0; padding: 14px; gap: 10px; border-radius: var(--ob-r-md); background: color-mix(in srgb, var(--c) 22%, var(--ob-surface)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: none; }
html.cp-v2 .bd2 .bd-slot { border-radius: var(--ob-r-xs); }
html.cp-v2 .bd2 .bd-slot.empty { background: var(--ob-field); box-shadow: none; border: 1px dashed var(--ob-line-2); color: var(--ob-dim); }
html.cp-v2 .bd2 .bd-movebar { margin: 0; max-width: none; justify-content: flex-start; border-radius: var(--ob-r-sm); background: rgb(var(--ob-amber-rgb) / 0.12); border: 1px solid rgb(var(--ob-amber-rgb) / 0.4); color: var(--ob-ink); font-size: var(--ob-fs-sm); }
html.cp-v2 .bd2 .bd-var { font-family: var(--cp-font-mono); color: var(--ob-amber); }
/* Dialoge (Neuer Binder, Umbenennen, Karte wählen, Karten-Menü) */
html.cp-v2 .bd-ov { z-index: var(--ob-z-sheet); }
html.cp-v2 .bd-ov-bg { background: var(--ob-backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html.cp-v2 .bd-sheet { background: var(--ob-pop); color: var(--ob-ink); border: 1px solid var(--ob-line-2); border-bottom: 0; border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; }
html.cp-v2 .bd-sheet h2 { font-size: var(--ob-fs-lg); font-weight: 800; color: var(--ob-ink); }
html.cp-v2 .bd-lbl { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.14em; color: var(--ob-dim); font-weight: 700; }
html.cp-v2 .bd-input { background: var(--ob-field); color: var(--ob-ink); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); font-size: var(--ob-fs-input); }
html.cp-v2 .bd-input:focus { border-color: var(--ob-violet); }
html.cp-v2 .bd-color.on { border-color: var(--ob-ink); box-shadow: 0 0 0 2px rgb(var(--ob-violet-rgb) / 0.4); }
html.cp-v2 :is(.bd-layout, .bd-setrow, .bd-lang, .bd-pickcard) { background: var(--ob-surface); border: 1px solid var(--ob-line); color: var(--ob-mute); border-radius: var(--ob-r-sm); }
html.cp-v2 .bd-setrow { color: var(--ob-ink); }
html.cp-v2 .bd-setrow small { color: var(--ob-dim); font-family: var(--cp-font-mono); }
html.cp-v2 .bd-pickcard { border-radius: var(--ob-r-xs); }
html.cp-v2 :is(.bd-layout, .bd-lang).on { border-color: var(--ob-violet); background: rgb(var(--ob-violet-rgb) / 0.14); color: var(--ob-ink); }
html.cp-v2 .bd-inb { background: var(--ob-green); color: #04130d; font-family: var(--cp-font-mono); }
html.cp-v2 .bd-x { border: 1px solid var(--ob-line-2); color: var(--ob-mute); border-radius: var(--ob-r-sm); }
html.cp-v2 .bd-btn { min-height: var(--ob-tap); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-ink); font-weight: 650; box-shadow: none; }
html.cp-v2 .bd-btn:hover { border-color: rgb(var(--ob-violet-rgb) / 0.55); background: transparent; transform: none; }
html.cp-v2 .bd-btn-primary, html.cp-v2 .bd-btn-primary:hover { background: var(--ob-accent-btn); border-color: transparent; color: #fff; box-shadow: none; filter: none; }
html.cp-v2 .bd-btn-danger { color: var(--ob-coral); border-color: rgb(var(--ob-coral-rgb) / 0.45); background: transparent; }
html.cp-v2 .bd-grab { background: var(--ob-line-2); }
@media (hover: hover) {
  html.cp-v2 .bd2-row:hover { border-color: rgb(var(--ob-violet-rgb) / 0.45); }
  html.cp-v2 .bd2 .bd-slot.empty:hover { border-color: rgb(var(--ob-violet-rgb) / 0.55); color: var(--ob-violet-text); }
}
@media (min-width: 900px) { html.cp-v2 .bd-sheet { border-bottom: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); } }
@media (max-width: 899px) {
  html.cp-v2 .bd2-list { grid-template-columns: 1fr; }
  html.cp-v2 .bd2-head .cx2-acts { grid-template-columns: minmax(0, 1fr) auto auto; }
  html.cp-v2 .bd2-head .cx2-acts .bd2-used { grid-column: 1 / -1; }
  html.cp-v2 .bd2 .bd-page { padding: 8px; gap: 6px; }
}
html.cp-v2[data-theme="light"] .bd2-row, html.cp-v2[data-theme="light"] .bd-sheet { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .bd-btn:not(.bd-btn-primary):not(.bd-btn-danger) { color: var(--ob-ink) !important; background: transparent !important; }
html.cp-v2[data-theme="light"] .bd-btn-primary { color: #fff !important; background: var(--ob-accent-btn) !important; }
html.cp-v2[data-theme="light"] .bd-btn-danger { color: var(--ob-coral-ink) !important; background: transparent !important; }
html.cp-v2[data-theme="light"] .bd2-del { color: var(--ob-coral-ink); }
html.cp-v2[data-theme="light"] .bd2 .bd-var { color: var(--ob-amber-ink); background: var(--ob-pop); }
html.cp-v2[data-theme="light"] .bd2 .bd-cover { background: var(--c) !important; box-shadow: inset 6px 0 0 rgb(var(--ob-black-rgb) / 0.2) !important; }
html.cp-v2[data-theme="light"] .bd2 .bd-cover i { background: rgb(var(--ob-white-rgb) / 0.55) !important; }
html.cp-v2[data-theme="light"] .bd2 .bd-page { background: color-mix(in srgb, var(--c) 16%, var(--ob-surface)) !important; box-shadow: none !important; }
html.cp-v2[data-theme="light"] .bd2 .bd-slot { background: var(--ob-field) !important; color: var(--ob-dim) !important; }
html.cp-v2[data-theme="light"] .bd2 :is(.bd-pageno, .bd-movebar) { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .bd2 .bd-movebar { background: rgb(var(--ob-amber-rgb) / 0.14) !important; border: 1px solid rgb(var(--ob-amber-rgb) / 0.5) !important; }
html.cp-v2[data-theme="light"] .bd-sheet { background: var(--ob-pop) !important; }
html.cp-v2[data-theme="light"] .bd-input { background: var(--ob-field) !important; color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] :is(.bd-layout, .bd-lang, .bd-setrow, .bd-pickcard) { background: var(--ob-surface) !important; color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] :is(.bd-layout, .bd-lang).on { background: rgb(var(--ob-violet-rgb) / 0.12) !important; color: var(--ob-violet-ink) !important; }
html.cp-v2[data-theme="light"] .bd-color.on { border-color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .bd-inb { color: #fff !important; background: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] .bd-x { color: var(--ob-mute) !important; }

/* ==========================================================================
   v2 Deal-Radar (freigegeben 19.10.2026, überarbeitet 20.10.2026, Pokémon + Riftbound gleich): Kopf mit Glocke, Puls-Kasten (größter Sturz,
   Zahlen, Balken „Stürze pro Tag“ – nur Pokémon), Tabs Preisstürze / Unter UVP / Nach Set, Filterleiste mit einem Filter-Knopf (Desktop Popover,
   Handy Bottom-Sheet), aktive Filter als Chips. Code: data.js cpRadarHubV2/cpRadarCtlV2/cpRadarRowV2, radar.js cardV2,
   preise/product.js renderHubV2, riftbound/rb.js renderPreiseV2/dropRowV2, script.js renderBestDealRowV2
   ========================================================================== */
html.cp-v2 .dr2 { display: grid; gap: 14px; }
html.cp-v2 .dr2 > * { min-width: 0; }
html.cp-v2 .dr2-head { justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; margin: 0; }
html.cp-v2 .dr2 .alert-bell-btn { font-size: inherit; }
/* Puls-Kasten */
html.cp-v2 .dr2-pulse { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.2fr); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); overflow: hidden; }
html.cp-v2 .dr2-pulse.nt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
html.cp-v2 .dr2-pulse > * { padding: 14px 16px; min-width: 0; }
html.cp-v2 .dr2-pulse > * + * { border-left: 1px solid var(--ob-line); }
html.cp-v2 .dr2-top { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
html.cp-v2 .dr2-top[aria-disabled="true"] { pointer-events: none; }
html.cp-v2 .dr2-top-th { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--ob-r-xs); background: var(--ob-field); overflow: hidden; }
html.cp-v2 .dr2-top-th img { width: 100%; height: 100%; object-fit: contain; }
html.cp-v2 .dr2-top-m { display: grid; gap: 4px; min-width: 0; }
html.cp-v2 .dr2-top-t { font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .dr2-top-p { font-size: var(--ob-fs-sm); padding: 5px 10px; }
html.cp-v2 .dr2-ks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 12px; }
html.cp-v2 .dr2-k { display: grid; gap: 4px; min-width: 0; }
html.cp-v2 .dr2-k b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ob-ink); }
html.cp-v2 .dr2-k b.v2-dn { color: var(--ob-green); }
html.cp-v2 .dr2-trbtn { display: none; }
html.cp-v2 .dr2-tr { display: grid; gap: 6px; align-content: center; }
html.cp-v2 .dr2-tr .v2-sm { font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 .dr2-bars { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
html.cp-v2 .dr2-bars i { flex: 1; min-width: 3px; border-radius: 3px 3px 1px 1px; background: rgb(var(--ob-green-rgb) / 0.35); }
html.cp-v2 .dr2-bars i.on { background: var(--ob-green); }
/* Tabs */
html.cp-v2 .dr2-tabs { margin-bottom: 0; }
html.cp-v2 .dr2 button.v2-tab { padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; cursor: pointer; box-shadow: none; font: inherit; font-size: var(--ob-fs-md); font-weight: 650; }
html.cp-v2 .dr2 button.v2-tab.on { color: var(--ob-ink); border-bottom-color: var(--ob-violet); }
html.cp-v2 .dr2-tn { margin-left: 4px; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-dim); }
/* Filterleiste */
html.cp-v2 .dr2-fb { position: sticky; top: 66px; z-index: var(--ob-z-sticky); display: flex; align-items: center; gap: 10px; padding: 8px 0; background: transparent; box-shadow: 0 1px 0 var(--ob-line); }
/* erst wenn die Leiste oben haftet: Glas wie die Kopfzeile, damit die Liste darunter nicht durchscheint */
html.cp-v2 .dr2-fb.stuck { background: var(--ob-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
html.cp-v2 .dr2-fb .v2-cnt { margin-right: 0; }
html.cp-v2 .dr2-upd { margin-right: auto; font-size: var(--ob-fs-xs); color: var(--ob-dim); white-space: nowrap; }
html.cp-v2 .dr2-fbtn { color: var(--ob-ink); background: var(--ob-field); }
html.cp-v2 .dr2-fbtn.on { border-color: var(--ob-violet); }
html.cp-v2 .dr2-bdg { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--ob-r-pill); background: var(--ob-violet); color: #fff; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-style: normal; font-weight: 700; }
html.cp-v2 .dr2-bdg[hidden] { display: none; }
html.cp-v2 .dr2[data-tab="best"] :is(.dr2-days, .dr2-upd) { display: none; }
html.cp-v2 .dr2[data-tab="best"] #drPulse { display: none; } /* Puls-Kasten zeigt Preissturz-Zahlen: im Tab „Unter UVP“ ersetzt ihn #drPulseB */
html.cp-v2 .dr2:not([data-tab="best"]) #drPulseB { display: none; }
html.cp-v2 .dr2[data-tab="best"] .dr2-pg[data-only="drops"] { display: none; }
html.cp-v2 .dr2[data-tab="sets"] :is(.dr2-fb, .dr2-act) { display: none; }
/* Tab „Preisanstiege“: eigener Puls-Kasten (#drPulseR, Zahlen und Mini-Linie in Koralle), Tage-Segment 7/30 statt 24 h/7 Tage */
html.cp-v2 .dr2:not([data-tab="rises"]) :is(.dr2-rdays, #drPulseR) { display: none; }
html.cp-v2 .dr2[data-tab="rises"] :is(.dr2-days, .dr2-upd, #drPulse, #drPulseB) { display: none; }
html.cp-v2 .dr2[data-tab="rises"] .dr2-pg:is([data-only="drops"], [data-nr]) { display: none; }
html.cp-v2 .dr2-seg { display: inline-flex; align-items: center; gap: var(--ob-s-2); }
html.cp-v2 .dr2-ks.dr2-ks2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.cp-v2 .dr2-spk { display: grid; gap: var(--ob-s-2); align-content: center; }
html.cp-v2 .dr2-spk[hidden] { display: none; }
html.cp-v2 .dr2-spk .v2-spark { width: 100%; height: var(--ob-tap-min); }
html.cp-v2 .v2-spark.coral path:not(.a) { stroke: var(--ob-coral); }
html.cp-v2[data-theme="light"] .v2-spark.coral path:not(.a) { stroke: var(--ob-coral-ink); }
html.cp-v2 .dr2-act { padding-bottom: 0; }
html.cp-v2 .dr2-act[hidden] { display: none; }
/* Filterfenster: Desktop Popover am Knopf, Handy Bottom-Sheet */
html.cp-v2 .dr2-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--ob-z-dropdown); width: min(400px, 100%); display: grid; gap: 14px; padding: 16px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); background: var(--ob-pop); color: var(--ob-ink); box-shadow: var(--ob-shadow-2); max-height: calc(100dvh - 160px); overflow-y: auto; }
html.cp-v2 .dr2-pop[hidden] { display: none; }
html.cp-v2 .dr2-grip { display: none; }
html.cp-v2 .dr2-ph { display: flex; align-items: center; gap: 8px; }
html.cp-v2 .dr2-ph b { margin-right: auto; font-size: var(--ob-fs-md); }
html.cp-v2 .dr2-pb { display: grid; gap: 14px; }
html.cp-v2 .dr2-pg { display: grid; gap: 8px; }
html.cp-v2 .dr2-pc { display: flex; flex-wrap: wrap; gap: 8px; }
html.cp-v2 .dr2-pf .dr2-apply { width: 100%; justify-content: center; }
html.cp-v2 .dr2-px { width: var(--ob-tap-min); height: var(--ob-tap-min); }
/* Hinweis bei wenigen Treffern */
html.cp-v2 .dr2-hint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px dashed var(--ob-line-2); border-radius: var(--ob-r-md); font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .dr2-hint[hidden] { display: none; }
html.cp-v2 .dr2-hint > .ob-icon { width: 18px; height: 18px; color: var(--ob-violet-text); flex: none; }
html.cp-v2 .dr2-hint > span { flex: 1; min-width: 180px; }
/* Listen und Zeilen */
html.cp-v2 .dr2-pane { display: grid; gap: 12px; }
html.cp-v2 .dr2-pane[hidden] { display: none; }
html.cp-v2 .dr2-pane > .v2-sm { margin: 0; }
html.cp-v2 .dr2-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html.cp-v2 .dr2-list > :is(.dr-empty, .dr-skeleton, .bd2-empty) { grid-column: 1 / -1; }
html.cp-v2 .dr2-or { grid-template-columns: 56px minmax(0, 1fr) auto auto auto; gap: 12px; padding: 8px 12px; color: inherit; text-decoration: none; }
html.cp-v2 .dr2-or .v2-or-th { width: 56px; height: 56px; }
html.cp-v2 .dr2-or .v2-or-p > b { font-size: var(--ob-fs-base); }
html.cp-v2 .dr2-or .v2-or-shop { color: var(--ob-ink); font-weight: 650; }
html.cp-v2 .dr2-dp { display: grid; justify-items: end; gap: 4px; }
html.cp-v2 .dr2-pct { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; white-space: nowrap; padding: 3px 8px; border-radius: var(--ob-r-pill); color: var(--ob-green); background: rgb(var(--ob-green-rgb) / 0.14); }
html.cp-v2 .dr2-pct.up { color: var(--ob-coral); background: rgb(var(--ob-coral-rgb) / 0.14); }
html.cp-v2 .dr2-sv.up { color: var(--ob-coral); }
html.cp-v2 .dr2-sv { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-green); white-space: nowrap; }
html.cp-v2 .dr2-hist { border-color: transparent; background: transparent; color: var(--ob-mute); }
html.cp-v2 .dr2-more { justify-self: center; width: max-content; }
/* Nach Set: Kopf mit Logo, Name, Pfeil; Produktarten als Textliste in zwei Spalten */
html.cp-v2 .dr2 .pp-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0; }
html.cp-v2 .dr2 .pp-hub-card { display: grid; gap: 0; padding: 0; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); box-shadow: none; overflow: hidden; }
html.cp-v2 .dr2 .pp-hub-head { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: var(--ob-tap); padding: 10px 14px; border-bottom: 1px solid var(--ob-line); color: var(--ob-ink); text-decoration: none; font-size: var(--ob-fs-md); }
html.cp-v2 .dr2 .pp-hub-head img { width: 80px; height: 45px; object-fit: contain; }
html.cp-v2 .dr2 .pp-hub-head img.is-hidden { visibility: hidden; }
html.cp-v2 .dr2 .pp-hub-head .ob-icon { width: 18px; height: 18px; color: var(--ob-dim); }
html.cp-v2 .dr2 .pp-hub-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
html.cp-v2 .dr2 .pp-type-link { display: flex; align-items: center; min-height: var(--ob-tap-min); padding: 6px 14px; border: 0; border-top: 1px solid var(--ob-line); border-radius: 0; background: transparent; color: var(--ob-mute); font-size: var(--ob-fs-sm); font-weight: 600; text-decoration: none; }
html.cp-v2 .dr2 .pp-type-link:nth-child(-n+2) { border-top: 0; }
html.cp-v2 .dr2 .pp-type-link:nth-child(odd) { border-right: 1px solid var(--ob-line); }
@media (hover: hover) {
  html.cp-v2 .dr2 .pp-hub-card:hover, html.cp-v2 .dr2-top:hover { border-color: rgb(var(--ob-violet-rgb) / 0.45); }
  html.cp-v2 .dr2 .pp-type-link:hover, html.cp-v2 .dr2 .pp-hub-head:hover b, html.cp-v2 .dr2-top:hover .dr2-top-t { color: var(--ob-violet-text); }
  html.cp-v2 .dr2-hist:hover { color: var(--ob-ink); }
}
@media (max-width: 899px) {
  html.cp-v2 .dr2-pulse, html.cp-v2 .dr2-pulse.nt { grid-template-columns: 1fr; }
  html.cp-v2 .dr2-pulse > * { padding: 12px 14px; }
  html.cp-v2 .dr2-pulse > * + * { border-left: 0; border-top: 1px solid var(--ob-line); }
  html.cp-v2 .dr2-top { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; }
  html.cp-v2 .dr2-top-th { width: 48px; height: 48px; }
  html.cp-v2 .dr2-ks { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; }
  html.cp-v2 .dr2-k b { font-size: var(--ob-fs-base); }
  html.cp-v2 .dr2-k .v2-lbl { font-size: var(--ob-fs-2xs); }
  html.cp-v2 .dr2-trbtn { display: grid; }
  html.cp-v2 .dr2-trbtn .ob-icon { transition: transform var(--ob-dur-1) var(--ob-ease-out); }
  html.cp-v2 .dr2-pulse.open .dr2-trbtn .ob-icon { transform: rotate(180deg); }
  html.cp-v2 .dr2-pulse:not(.open) .dr2-tr { display: none; }
  html.cp-v2 .dr2-bars { height: 38px; }
  html.cp-v2 .dr2-fb { top: 56px; gap: 8px; }
  html.cp-v2 .dr2-upd { display: none; }
  html.cp-v2 .dr2-fb .v2-cnt { margin-right: auto; }
  html.cp-v2 .dr2-days .cx-tab { padding: 0 8px; }
  html.cp-v2 :is(.dr2-list, .dr2-best) { grid-template-columns: 1fr; }
  html.cp-v2 .dr2-or { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "t m m" "t p b"; gap: 2px 10px; padding: 10px; }
  html.cp-v2 .dr2-or .dr2-dp { grid-area: b; justify-self: end; align-self: center; grid-auto-flow: column; align-items: center; gap: 8px; }
  html.cp-v2 .dr2-or .v2-or-p { display: flex; align-items: baseline; gap: 8px; }
  html.cp-v2 .dr2-or .v2-or-a { display: none; }
  html.cp-v2 .dr2 .pp-hub-grid { grid-template-columns: 1fr; }
  html.cp-v2 .dr2-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: var(--ob-sheet-max); overflow-y: auto; z-index: var(--ob-z-sheet); gap: 16px; padding: 8px var(--ob-gutter) 0; border-bottom: 0; border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; box-shadow: 0 0 0 100vmax var(--ob-backdrop), var(--ob-shadow-2); }
  html.cp-v2 .dr2-grip { display: block; justify-self: center; width: 40px; height: 4px; border-radius: var(--ob-r-pill); background: var(--ob-line-2); }
  html.cp-v2 .dr2-pf { position: sticky; bottom: 0; padding: 12px 0 calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--ob-pop); }
  html.cp-v2 .dr2-pf .dr2-apply { min-height: var(--ob-tap); }
  html.cp-v2 .dr2-pc .v2-chip { min-height: var(--ob-tap-min); }
  html.dr2-lock, html.dr2-lock body { overflow: hidden; }
}
@media (max-width: 365px) {
  html.cp-v2 .dr2-days .cx-tab { padding: 0 6px; }
  html.cp-v2 .dr2-fbtn > span { display: none; }
}
html.cp-v2[data-theme="light"] .dr2 :is(.dr2-days .cx-tab) { background: transparent !important; color: var(--ob-mute) !important; border: 0 !important; box-shadow: none !important; }
html.cp-v2[data-theme="light"] .dr2 .dr2-days .cx-tab.active { background: rgb(var(--ob-violet-rgb) / 0.12) !important; color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .dr2 :is(.v2-or-t, button.v2-tab.on, .pp-hub-head, .dr2-top-t, .v2-or-shop) { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .dr2 :is(button.v2-tab, .pp-type-link, .v2-chip) { color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .dr2 :is(.v2-chip.on, .dr2-fbtn) { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .dr2 .v2-chip.on { background: rgb(var(--ob-violet-rgb) / 0.12) !important; }
html.cp-v2[data-theme="light"] .dr2 :is(.pp-hub-card, .dr2-pulse) { background: var(--ob-surface) !important; border-color: var(--ob-line) !important; }
html.cp-v2[data-theme="light"] .dr2 :is(.dr2-pct, .dr2-sv, .dr2-k b.v2-dn) { color: var(--ob-green-ink) !important; }
html.cp-v2[data-theme="light"] .dr2 :is(.dr2-pct.up, .dr2-sv.up) { color: var(--ob-coral-ink) !important; }
html.cp-v2[data-theme="light"] .dr2 :is(.dr2-dp, .dr2-top) :is(.dr2-pct.up, .dr2-sv.up), html.cp-v2[data-theme="light"] .dr2 .dr2-ks b.v2-up { color: var(--ob-coral-ink) !important; } /* stärker als die Grün-Regel darüber (:is() zählt die höchste Spezifität) */
html.cp-v2[data-theme="light"] .dr2 .dr2-bars i { background: rgb(var(--ob-green-rgb) / 0.4); }
html.cp-v2[data-theme="light"] .dr2 .dr2-bars i.on { background: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] .dr2 .dr2-pop { background: var(--ob-pop) !important; color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] :is(.bd2, .dr2) h1 { color: var(--ob-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }

/* ==========================================================================
   v2 Set-Guide (freigegeben 19.10.2026, Pokémon + Riftbound gleich): kompakter Kopf (Logo neben Titel), Inhalt links,
   Seitenleiste rechts (Sammlung, Links, Inhaltsverzeichnis). Code: data.js cpGuideV2 (baut vorhandenes DOM um), pokemon/guide.js, riftbound/rb.js renderGuide
   ========================================================================== */
/* Vor dem Umbau durch cpGuideV2 (.gd2 kommt erst per JS) denselben kompakten Kopf zeigen, sonst blitzt das große Banner-Logo kurz auf */
html.cp-v2 .setguide-hero.setguide-hero-banner:not(.blog-hero-banner) { display: flex; flex-wrap: nowrap; align-items: center; gap: 20px; min-height: 0; margin: 18px 0 18px; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none; overflow: visible; }
html.cp-v2 .setguide-hero.setguide-hero-banner:not(.blog-hero-banner) .setguide-hero-banner-img { position: static; flex: none; width: 160px; height: auto; aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 0; background: none; inset: auto; }
html.cp-v2 .setguide-hero.setguide-hero-banner:not(.blog-hero-banner) .setguide-hero-banner-img img { position: static; width: 100%; height: 100%; max-height: none; object-fit: contain; animation: none; filter: none; transform: none; }
html.cp-v2 .setguide-hero.setguide-hero-banner:not(.blog-hero-banner) .setguide-hero-banner-overlay { display: none; }
@media (max-width: 899px) {
  html.cp-v2 .setguide-hero.setguide-hero-banner:not(.blog-hero-banner) { flex-direction: row; align-items: flex-start; gap: 12px; margin: 12px 0; text-align: left; }
  html.cp-v2 .setguide-hero.setguide-hero-banner:not(.blog-hero-banner) .setguide-hero-banner-img { width: 72px; margin-top: 4px; }
}
html.cp-v2 .gd2 .setguide-hero.setguide-hero-banner { display: flex; flex-wrap: nowrap; align-items: center; gap: 20px; min-height: 0; margin: 18px 0 18px; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none; overflow: visible; }
html.cp-v2 .gd2 .setguide-hero::before, html.cp-v2 .gd2 .setguide-hero::after { display: none; }
html.cp-v2 .gd2 .setguide-hero-banner-img { position: static; flex: none; width: 160px; height: auto; aspect-ratio: 16 / 9; display: grid; place-items: center; padding: 0; background: none; inset: auto; }
html.cp-v2 .gd2 .setguide-hero-banner-img img { position: static; width: 100%; height: 100%; max-height: none; object-fit: contain; animation: none; filter: none; transform: none; }
html.cp-v2 .gd2 .setguide-hero-banner-overlay { display: none; }
html.cp-v2 .gd2 .setguide-hero-banner-text { position: static; flex: 1; width: auto; padding: 0; background: none; min-width: 0; max-width: 72ch; text-align: left; }
html.cp-v2 .gd2 .setguide-hero .setguide-eyebrow { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); letter-spacing: 0.14em; color: var(--ob-mute); margin: 0; }
html.cp-v2 .gd2 .setguide-hero :is(h1, .h1-alt) { margin: 4px 0; font-size: var(--ob-fs-xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; background: none; -webkit-text-fill-color: currentColor; color: var(--ob-ink); text-wrap: balance; }
html.cp-v2 .gd2 .setguide-hero .setguide-hero-sub { margin: 0; font-size: var(--ob-fs-md); font-weight: 400; color: var(--ob-mute); max-width: 72ch; text-align: left; }
html.cp-v2 .gd2 .setguide-hero-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; justify-content: flex-start; }
html.cp-v2 .gd2 .setguide-hero-meta > span:empty { display: none; }
html.cp-v2 .gd2 .setguide-pill { display: inline-flex; align-items: center; min-height: 0; padding: 3px 9px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: transparent; color: var(--ob-mute); font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 600; box-shadow: none; }
/* Spalten */
html.cp-v2 .gd2-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
html.cp-v2 .gd2-main { display: grid; gap: 22px; min-width: 0; }
html.cp-v2 .gd2-main > * { min-width: 0; margin: 0; }
html.cp-v2 .gd2-main > [data-guide-lang] { display: grid; gap: 22px; }
html.cp-v2 .gd2-main > [data-guide-lang][hidden], html.cp-v2 .gd2-main > [data-guide-lang]:not(.active)[style*="none"] { display: none; }
html.cp-v2 .gd2-side { position: sticky; top: 84px; display: grid; gap: 12px; min-width: 0; }
html.cp-v2 [data-gd2-hidden] { display: none !important; }
/* Seitenleiste: Sammlung + Links */
html.cp-v2 .gd2 .gd-coll-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; }
html.cp-v2 .gd2 .gd-coll-box { margin: 0; }
html.cp-v2 .gd2 .rs-coll-box { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); box-shadow: none; }
html.cp-v2 .gd2 .rs-coll-label { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ob-dim); font-weight: 700; }
html.cp-v2 .gd2 .rs-coll-box p { margin: 0; font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .gd2 .rs-coll-count { font-family: var(--cp-font-mono); font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .gd2 .rs-coll-count b { font-size: var(--ob-fs-lg); color: var(--ob-ink); }
html.cp-v2 .gd2 .rs-coll-bar { height: 6px; border-radius: 3px; background: var(--ob-line); overflow: hidden; }
html.cp-v2 .gd2 .rs-coll-bar span { display: block; height: 100%; min-width: 2px; border-radius: 3px; background: var(--ob-violet); }
html.cp-v2 .gd2 .rs-coll-pct { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-dim); }
html.cp-v2 .gd2 .rs-coll-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ob-tap-min); padding: 0 14px; margin-top: 4px; border: 0; border-radius: var(--ob-r-sm); background: var(--ob-accent-btn); color: #fff; font-size: var(--ob-fs-sm); font-weight: 700; text-decoration: none; box-shadow: none; }
html.cp-v2 .gd2 .gd-coll-tiles { display: grid; grid-template-columns: 1fr; gap: 8px; }
html.cp-v2 .gd2 .gd-coll-tiles .cx-link-tile { display: flex; align-items: center; gap: 10px; min-height: 0; padding: 12px 14px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); color: var(--ob-ink); text-decoration: none; box-shadow: none; transform: none; }
html.cp-v2 .gd2 .cx-link-tile-icon { width: auto; height: auto; flex: none; display: grid; place-items: center; background: none; border: 0; color: var(--ob-violet-text); font-size: inherit; }
html.cp-v2 .gd2 .cx-link-tile-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
html.cp-v2 .gd2 .cx-link-tile-text b { font-size: var(--ob-fs-sm); }
html.cp-v2 .gd2 .cx-link-tile-text small { font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 .gd2 .cx-link-tile-arrow { color: var(--ob-dim); display: grid; }
/* Inhaltsverzeichnis */
html.cp-v2 .gd2-toc { border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .gd2-toc summary { display: flex; align-items: center; gap: 8px; min-height: var(--ob-tap); padding: 0 14px; cursor: pointer; list-style: none; }
html.cp-v2 .gd2-toc summary::-webkit-details-marker { display: none; }
html.cp-v2 .gd2-toc summary small { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-dim); margin-right: auto; }
html.cp-v2 .gd2-toc summary .ob-icon { width: 16px; height: 16px; color: var(--ob-dim); transition: transform var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .gd2-toc[open] summary .ob-icon { transform: rotate(180deg); }
html.cp-v2 .gd2-toc nav { display: grid; gap: 2px; padding: 0 14px 12px; }
html.cp-v2 .gd2-toc a { display: block; padding: 5px 10px; border-left: 2px solid var(--ob-line); color: var(--ob-mute); font-size: var(--ob-fs-sm); text-decoration: none; line-height: 1.35; }
html.cp-v2 .gd2-toc a.on { color: var(--ob-ink); border-left-color: var(--ob-violet); }
html.cp-v2 .gd2-toc a.sub { padding-left: var(--ob-s-5); font-size: var(--ob-fs-xs); } /* Untereintrag: h3 der Produktart-Abschnitte (section.gb-k), eingerueckt */
html.cp-v2 .gd2-main h2[id] { scroll-margin-top: 90px; }
/* Hauptspalte: Abschnitte ohne Kasten, ein Faktenblatt */
html.cp-v2 .gd2 .gd2-main .setguide-section.setguide-box { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; display: grid; gap: 10px; }
html.cp-v2 .gd2 .gd2-main .setguide-section::before, html.cp-v2 .gd2 .gd2-main .setguide-section::after { display: none; }
html.cp-v2 .gd2 .gd2-main :is(.setguide-section, .seo-factsheet, .seo-faq, .seo-links) h2 { margin: 0; font-size: var(--ob-fs-lg); font-weight: 800; letter-spacing: -0.01em; color: var(--ob-ink); background: none; -webkit-text-fill-color: currentColor; }
html.cp-v2 .gd2 .gd2-main .setguide-section h3 { margin: 6px 0 0; font-size: var(--ob-fs-md); font-weight: 700; color: var(--ob-ink); }
html.cp-v2 .gd2 .gd2-main .setguide-section p { margin: 0; color: var(--ob-mute); font-size: var(--ob-fs-md); line-height: 1.6; max-width: 72ch; }
html.cp-v2 .gd2 .gd2-main .setguide-table-wrapper { display: none; }
html.cp-v2 .gd2 .gd2-fs { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; max-width: none; }
html.cp-v2 .gd2 .gd2-fs dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; margin: 0; padding: 14px 16px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); font-size: var(--ob-fs-sm); }
html.cp-v2 .gd2 .gd2-fs dt { color: var(--ob-mute); font-weight: 500; }
html.cp-v2 .gd2 .gd2-fs dd { margin: 0; color: var(--ob-ink); font-weight: 600; }
/* Top-Karten als Kartenkacheln */
html.cp-v2 .gd2 .setguide-card-scroll-wrap { overflow: visible; margin: 0; padding: 0; }
html.cp-v2 .gd2 .setguide-card-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; overflow: visible; padding: 0; margin: 0; }
html.cp-v2 .gd2 .setguide-card-tile { display: grid; gap: 4px; width: auto; min-width: 0; padding: 8px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); box-shadow: none; transform: none; text-align: left; }
html.cp-v2 .gd2 .setguide-card-art { width: 100%; aspect-ratio: 63 / 88; height: auto; border-radius: var(--ob-r-xs); overflow: hidden; background: var(--ob-hover); box-shadow: none; }
html.cp-v2 .gd2 .setguide-card-art img { width: 100%; height: 100%; object-fit: cover; }
html.cp-v2 .gd2 .setguide-card-name { font-size: var(--ob-fs-sm); font-weight: 650; color: var(--ob-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
html.cp-v2 .gd2 .setguide-card-rarity { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ob-dim); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.cp-v2 .gd2 .setguide-card-blurb { display: none; }
html.cp-v2 .gd2 .setguide-card-price { font-family: var(--cp-font-mono); font-size: var(--ob-fs-sm); font-weight: 700; color: var(--ob-ink); }
html.cp-v2 .gd2 .setguide-card-disclaimer { font-size: var(--ob-fs-xs); color: var(--ob-dim); font-style: normal; }
html.cp-v2 .gd2 :is(.setguide-cards-link-btn, .setguide-scroll-btn) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: var(--ob-tap); padding: 0 16px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-ink); font-size: var(--ob-fs-sm); font-weight: 650; text-decoration: none; box-shadow: none; animation: none; }
html.cp-v2 .gd2 :is(.setguide-cards-link-btn, .setguide-scroll-btn)::before, html.cp-v2 .gd2 :is(.setguide-cards-link-btn, .setguide-scroll-btn)::after { display: none; }
/* Produkte: günstigste lieferbare je Kategorie als Angebotszeilen (max. 3) */
html.cp-v2 .gd2 .setguide-category-block { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; background: none; }
html.cp-v2 .gd2 .setguide-category-block[hidden] { display: none; }
html.cp-v2 .gd2 .setguide-preview-row { display: grid; grid-template-columns: 1fr; gap: 8px; overflow: visible; padding: 0; margin: 0; }
html.cp-v2 .gd2 .setguide-preview-tile:nth-child(n+4) { display: none; }
html.cp-v2 .gd2 .setguide-preview-tile { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "t n p" "t s p"; align-items: center; gap: 2px 12px; width: auto; min-width: 0; padding: 8px 12px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); color: var(--ob-ink); text-decoration: none; box-shadow: none; transform: none; }
html.cp-v2 .gd2 .setguide-preview-thumb-wrap { grid-area: t; position: relative; width: 48px; height: 48px; padding: 0; border-radius: var(--ob-r-xs); overflow: hidden; background: var(--ob-hover); display: grid; place-items: center; }
html.cp-v2 .gd2 .setguide-preview-thumb-wrap img { width: 100%; height: 100%; object-fit: contain; }
html.cp-v2 .gd2 .setguide-preview-thumb-wrap > :not(img) { display: none; }
html.cp-v2 .gd2 .setguide-preview-title { grid-area: n; padding: 0; font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; display: block; min-height: 0; margin: 0; }
html.cp-v2 .gd2 .setguide-preview-meta { display: contents; }
html.cp-v2 .gd2 .setguide-preview-price { grid-area: p; font-family: var(--cp-font-mono); font-size: var(--ob-fs-base); font-weight: 800; color: var(--ob-ink); white-space: nowrap; }
html.cp-v2 .gd2 .setguide-preview-store { grid-area: s; font-size: var(--ob-fs-xs); color: var(--ob-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.cp-v2 .gd2 .setguide-preview-more { justify-self: start; font-size: var(--ob-fs-sm); font-weight: 650; color: var(--ob-violet-text); text-decoration: none; }
html.cp-v2 .gd2 :is(.setguide-preview-loading, .setguide-preview-empty) { font-size: var(--ob-fs-sm); color: var(--ob-dim); padding: 4px 0; }
@media (hover: hover) {
  html.cp-v2 .gd2 :is(.cx-link-tile, .setguide-preview-tile, .setguide-card-tile--zoomable):hover { border-color: rgb(var(--ob-violet-rgb) / 0.45); }
  html.cp-v2 .gd2-toc a:hover { color: var(--ob-ink); }
}
@media (max-width: 899px) {
  html.cp-v2 .gd2 .setguide-hero.setguide-hero-banner { flex-direction: row; align-items: flex-start; gap: 12px; margin: 12px 0; text-align: left; }
  html.cp-v2 .gd2-side { order: -1; }
  html.cp-v2 .gd2 .setguide-hero-banner-img { width: 72px; margin-top: 4px; }
  html.cp-v2 .gd2 .setguide-hero :is(h1, .h1-alt) { font-size: var(--ob-fs-lg); }
  html.cp-v2 .gd2 .setguide-hero .setguide-hero-sub { font-size: var(--ob-fs-sm); }
  html.cp-v2 .gd2-cols { grid-template-columns: 1fr; gap: 16px; }
  html.cp-v2 .gd2-side { position: static; }
  html.cp-v2 .gd2 .setguide-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html.cp-v2 .gd2 .setguide-card-tile { padding: 6px; }
  html.cp-v2 .gd2 .setguide-card-name { font-size: var(--ob-fs-xs); }
}
html.cp-v2[data-theme="light"] .gd2 .setguide-hero :is(h1, .h1-alt), html.cp-v2[data-theme="light"] .gd2 .gd2-main h2 { color: var(--ob-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
html.cp-v2[data-theme="light"] .gd2 :is(.setguide-card-tile, .setguide-preview-tile, .cx-link-tile, .rs-coll-box, .gd2-toc, .gd2-fs dl) { background: var(--ob-surface) !important; border-color: var(--ob-line) !important; color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .gd2 .gd2-main .setguide-section.setguide-box { background: none !important; border: 0 !important; box-shadow: none !important; }
html.cp-v2[data-theme="light"] .gd2 :is(.setguide-cards-link-btn, .setguide-scroll-btn) { background: transparent !important; color: var(--ob-ink) !important; border-color: var(--ob-line-2) !important; }
html.cp-v2[data-theme="light"] .gd2 .setguide-pill { background: transparent !important; color: var(--ob-mute) !important; border-color: var(--ob-line-2) !important; }
html.cp-v2[data-theme="light"] .gd2 .rs-coll-btn { color: #fff !important; }
html.cp-v2[data-theme="light"] .gd2 :is(.setguide-preview-more, .cx-link-tile-icon) { color: var(--ob-violet-ink) !important; }
html.cp-v2[data-theme="light"] .gd2 .setguide-hero.setguide-hero-banner { background: none !important; border: 0 !important; box-shadow: none !important; }
html.cp-v2[data-theme="light"] .gd2 .setguide-hero .setguide-eyebrow { background: none !important; border: 0 !important; padding: 0 !important; color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .gd2 .setguide-card-rarity { color: var(--ob-dim) !important; }

/* ==========================================================================
   v2 Guide-Übersicht (freigegeben 19.10.2026, Pokémon + Riftbound gleich): Zahlen in einem Satz, Suche + Serien-Chips in einer Leiste,
   Kacheln wie die Set-Kacheln der Sammlung, Badges Neu (violett) / Bald (aqua), drei Textlinks. Code: data.js cpGuideTileV2, pokemon/guides-landing.js, riftbound/rb.js renderGuides
   ========================================================================== */
html.cp-v2 .gl2 { display: grid; gap: 14px; }
html.cp-v2 .gl2-head { margin: 0; }
html.cp-v2 .gl2-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.cp-v2 .gl2-fbar .cx-search { display: flex; align-items: center; gap: 8px; flex: 0 1 280px; min-width: 200px; height: var(--ob-tap-min); margin: 0; padding: 0 12px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-dim); box-shadow: none; }
html.cp-v2 .gl2-fbar .cx-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--ob-ink); font: inherit; font-size: var(--ob-fs-input); outline: none; box-shadow: none; }
html.cp-v2 .gl2 .v2-chip.active { background: rgb(var(--ob-violet-rgb) / 0.16); border-color: transparent; color: var(--ob-ink); }
html.cp-v2 .gl2 .cx-series { margin: 6px 0 0; }
html.cp-v2 .gl2 .cx-series-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
html.cp-v2 .gl2 .cx-series-head h2 { margin: 0; font-size: var(--ob-fs-base); color: var(--ob-ink); background: none; -webkit-text-fill-color: currentColor; }
html.cp-v2 .gl2 .cx-series-head span { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-dim); }
html.cp-v2 .gl2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - 24px) / 3)), 1fr)); gap: 12px; } /* hoechstens 3 Guides nebeneinander (Inhaber 23.10.2026) */
html.cp-v2 .gl2-tile { position: relative; display: grid; align-content: start; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); min-width: 0; }
html.cp-v2 .gl2-main { display: grid; gap: 3px; padding: 12px 12px 8px; color: var(--ob-ink); text-decoration: none; min-width: 0; }
html.cp-v2 .gl2-art { position: relative; display: block; aspect-ratio: 16 / 9; margin-bottom: 6px; border-radius: var(--ob-r-xs); overflow: hidden; }
html.cp-v2 .gl2-art .gl-logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
html.cp-v2 .gl2-art .gl-logo.is-hidden, html.cp-v2 .gl2-art .gl-logo[hidden] { display: none; }
html.cp-v2 .gl2-art .gl-logo-fallback { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; border: 1px dashed var(--ob-line-2); border-radius: var(--ob-r-xs); background: var(--ob-field); font-family: var(--cp-font-mono); font-size: var(--ob-fs-md); color: var(--ob-dim); }
html.cp-v2 .gl2-art .gl-logo:not(.is-hidden):not([hidden]) + .gl-logo-fallback { display: none; }
html.cp-v2 .gl2-nbs { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; z-index: 1; }
html.cp-v2 .gl2-nb { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 700; padding: 2px 7px; border-radius: var(--ob-r-pill); background: rgb(var(--ob-violet-rgb) / 0.16); color: var(--ob-violet-text); }
html.cp-v2 .gl2-nb.soon { background: rgb(var(--ob-aqua-rgb) / 0.14); color: var(--ob-aqua); }
html.cp-v2 .gl2-era { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ob-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.cp-v2 .gl2-name { margin: 0; font-size: var(--ob-fs-md); font-weight: 700; line-height: var(--ob-lh-tight); letter-spacing: normal; color: var(--ob-ink); background: none; -webkit-text-fill-color: currentColor; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.cp-v2 .gl2-teaser { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: var(--ob-s-1); font-size: var(--ob-fs-sm); line-height: var(--ob-lh-body); color: var(--ob-mute); }
html.cp-v2 .gl2-meta { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-dim); }
html.cp-v2 .gl2-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 12px; padding: 8px 0 10px; border-top: 1px solid var(--ob-line); }
html.cp-v2 .gl2-links a { font-size: var(--ob-fs-xs); font-weight: 650; color: var(--ob-violet-text); text-decoration: none; }
@media (hover: hover) {
  html.cp-v2 .gl2-tile:hover { border-color: rgb(var(--ob-violet-rgb) / 0.45); }
  html.cp-v2 .gl2-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 899px) {
  html.cp-v2 .gl2-fbar .cx-search { flex: 1 1 100%; order: 5; }
  html.cp-v2 .gl2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.cp-v2 .gl2-main { padding: 10px 10px 6px; }
  html.cp-v2 .gl2-links { margin: 0 10px; gap: 4px 10px; }
}
html.cp-v2 .gl2 h1, html.cp-v2[data-theme="light"] .gl2 h1 { color: var(--ob-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
html.cp-v2[data-theme="light"] .gl2-tile { background: var(--ob-surface) !important; border-color: var(--ob-line) !important; }
html.cp-v2[data-theme="light"] .gl2-main { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] :is(.gl2-links a, .gl2-nb) { color: var(--ob-violet-ink) !important; }
html.cp-v2[data-theme="light"] .gl2-nb.soon { color: var(--ob-aqua-ink) !important; }
html.cp-v2[data-theme="light"] .gl2 .v2-chip { color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .gl2 .v2-chip.active { color: var(--ob-ink) !important; background: rgb(var(--ob-violet-rgb) / 0.12) !important; }
html.cp-v2[data-theme="light"] .gl2-fbar .cx-search { background: var(--ob-field) !important; border-color: var(--ob-line-2) !important; }

/* ==========================================================================
   v2 Blog (freigegeben 19.10.2026): ruhiger Kopf ohne Farbfläche, neuester Artikel groß, Raster; Artikel mit Text 68 Zeichen,
   Inhaltsverzeichnis rechts mitlaufend (Handy aufklappbar), "Kurz gesagt"-Kasten (violetter Rand), Tabellen mit Mono-Zahlen rechtsbündig.
   HTML vom Worker (worker/blog.js) bleibt gleich; Umbau im Browser: data.js cpBlogV2
   ========================================================================== */
html.cp-v2 .bl2 { display: grid; gap: 14px; }
html.cp-v2 .bl2 .blog-crumbs { margin: 4px 0 0; font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 .bl2 .blog-crumbs a { color: var(--ob-mute); }
html.cp-v2 .bl2 .setguide-eyebrow { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); letter-spacing: 0.14em; color: var(--ob-mute); background: none; border: 0; padding: 0; }
html.cp-v2 .bl2 :is(h1, h2) { background: none; -webkit-text-fill-color: currentColor; color: var(--ob-ink); }
html.cp-v2 .bl2 .blog-langs { display: inline-flex; gap: 2px; padding: 2px; margin: 0; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: transparent; font-size: 0; width: max-content; }
html.cp-v2 .bl2 .blog-langs :is(a, span) { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 0; border-radius: var(--ob-r-xs); background: transparent; color: var(--ob-mute); font-size: var(--ob-fs-xs); font-weight: 650; text-decoration: none; box-shadow: none; }
html.cp-v2 .bl2 .blog-langs .on { background: rgb(var(--ob-violet-rgb) / 0.16); color: var(--ob-ink); }
/* Liste */
html.cp-v2 .bl2 .blog-hero-list, html.cp-v2 .bl2 .blog-hero-main { margin: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none; overflow: visible; }
html.cp-v2 .bl2 .blog-hero-main::before, html.cp-v2 .bl2 .blog-hero-main::after { display: none; }
html.cp-v2 .bl2 .blog-hero-art, html.cp-v2 .bl2 .blog-hero-cta { display: none; }
html.cp-v2 .bl2 .blog-hero-text { display: grid; gap: 6px; max-width: none; padding: 0; position: static; }
html.cp-v2 .bl2 .blog-hero-text h1 { margin: 0; font-size: var(--ob-fs-xl); font-weight: 800; letter-spacing: -0.02em; }
html.cp-v2 .bl2 .blog-hero-sub { margin: 0; font-size: var(--ob-fs-md); color: var(--ob-mute); }
html.cp-v2 .bl2 .blog-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); position: relative; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); overflow: hidden; color: var(--ob-ink); text-decoration: none; box-shadow: none; transform: none; min-height: 0; }
html.cp-v2 .bl2 .blog-feature-img { position: relative; aspect-ratio: 1200 / 630; height: auto; }
html.cp-v2 .bl2 .blog-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.cp-v2 .bl2 .blog-feature-body { display: grid; gap: 8px; align-content: center; padding: 20px; }
html.cp-v2 .bl2 .blog-feature-label { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ob-dim); background: none; padding: 0; }
html.cp-v2 .bl2 .blog-feature-body h2 { margin: 0; font-size: var(--ob-fs-lg); line-height: 1.25; letter-spacing: -0.01em; }
html.cp-v2 .bl2 .blog-feature-body p { margin: 0; font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .bl2 .blog-feature-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
html.cp-v2 .bl2 .blog-feature-btn { display: inline-flex; align-items: center; min-height: var(--ob-tap-min); padding: 0 14px; border-radius: var(--ob-r-sm); background: var(--ob-accent-btn); color: #fff; font-size: var(--ob-fs-sm); font-weight: 700; }
html.cp-v2 .bl2 .blog-date { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-dim); }
html.cp-v2 .bl2 .guide-link-new-badge { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 700; padding: 2px 7px; border-radius: var(--ob-r-pill); background: rgb(var(--ob-violet-rgb) / 0.16); color: var(--ob-violet-text); box-shadow: none; border: 0; animation: none; }
html.cp-v2 .bl2 :is(.blog-feature, .blog-card) > .guide-link-new-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--ob-pop); }
html.cp-v2 .bl2 > .setguide-section.setguide-box, html.cp-v2 .bl2 .blog-related { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
html.cp-v2 .bl2 .blog-more-title, html.cp-v2 .bl2 .blog-related h2 { margin: 6px 0 12px; font-size: var(--ob-fs-base); }
html.cp-v2 .bl2 .blog-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 0; }
html.cp-v2 .bl2 .blog-card { position: relative; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); box-shadow: none; transform: none; }
html.cp-v2 .bl2 .blog-card-body { display: grid; gap: 4px; padding: 12px; }
html.cp-v2 .bl2 .blog-card-body h3 { margin: 0; font-size: var(--ob-fs-md); font-weight: 700; line-height: 1.3; color: var(--ob-ink); }
html.cp-v2 .bl2 .blog-card-body p { margin: 0; font-size: var(--ob-fs-xs); color: var(--ob-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Artikel: Kopf (Text, dann Bild) */
html.cp-v2 .bl2 .blog-hero-banner { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none; overflow: visible; }
html.cp-v2 .bl2 .blog-hero-banner::before, html.cp-v2 .bl2 .blog-hero-banner::after { display: none; }
html.cp-v2 .bl2 .blog-hero-banner .setguide-hero-banner-text { order: 1; position: static; display: grid; gap: 6px; max-width: 840px; margin: 0; padding: 0; background: none; text-align: left; }
html.cp-v2 .bl2 .blog-hero-banner .blog-langs { order: 2; align-self: flex-start; margin: 0; }
html.cp-v2 .bl2 .blog-hero-banner .setguide-hero-banner-img { order: 3; position: relative; inset: auto; width: 100%; max-width: 840px; height: auto; aspect-ratio: 1200 / 630; padding: 0; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); overflow: hidden; background: var(--ob-surface); }
html.cp-v2 .bl2 .blog-hero-banner .setguide-hero-banner-img img { animation: none; filter: none; transform: none; }
html.cp-v2 .bl2 .blog-hero-banner h1 { margin: 0; font-size: var(--ob-fs-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
html.cp-v2 .bl2 .blog-hero-banner .setguide-hero-sub { margin: 0; font-size: var(--ob-fs-base); color: var(--ob-mute); line-height: 1.55; max-width: 68ch; }
html.cp-v2 .bl2 .blog-hero-banner .setguide-hero-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; justify-content: flex-start; }
html.cp-v2 .bl2 .blog-hero-banner .setguide-pill { padding: 0; border: 0; background: none; box-shadow: none; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 500; color: var(--ob-dim); }
/* Artikel: Spalten */
html.cp-v2 .bl2-cols { display: grid; grid-template-columns: minmax(0, 840px) 280px; justify-content: space-between; gap: 32px; align-items: start; }
html.cp-v2 .bl2-main { display: grid; gap: 18px; min-width: 0; }
html.cp-v2 .bl2-main > * { min-width: 0; margin: 0; }
html.cp-v2 .bl2-side { position: sticky; top: 84px; display: grid; gap: 12px; min-width: 0; }
html.cp-v2 .bl2 .bl2-main .setguide-section.setguide-box { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
html.cp-v2 .bl2 .bl2-main .setguide-section::before, html.cp-v2 .bl2 .bl2-main .setguide-section::after { display: none; }
html.cp-v2 .bl2 .blog-section { max-width: 68ch; }
html.cp-v2 .bl2 .blog-section h2 { border: 0; padding: 0; margin: 6px 0 10px; font-size: var(--ob-fs-lg); font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
html.cp-v2 .bl2 .blog-section h3 { color: var(--ob-ink); font-size: var(--ob-fs-base); }
html.cp-v2 .bl2 .blog-section :is(p, li) { color: var(--ob-mute); font-size: var(--ob-fs-base); line-height: 1.7; }
html.cp-v2 .bl2 .blog-section strong { color: var(--ob-ink); }
html.cp-v2 .bl2 :is(.blog-section, .blog-back) a { color: var(--ob-violet-text); text-decoration: underline; text-decoration-color: rgb(var(--ob-violet-rgb) / 0.45); text-underline-offset: 3px; font-weight: 600; }
html.cp-v2 .bl2 .blog-callout { padding: 10px 14px; border: 1px solid rgb(var(--ob-amber-rgb) / 0.4); border-radius: var(--ob-r-sm); background: rgb(var(--ob-amber-rgb) / 0.08); }
html.cp-v2 .bl2 .blog-data { font-size: var(--ob-fs-sm) !important; color: var(--ob-dim) !important; }
html.cp-v2 .bl2 .blog-summary { padding: 14px 16px !important; border: 1px solid rgb(var(--ob-violet-rgb) / 0.35) !important; border-radius: var(--ob-r-md) !important; background: var(--ob-surface) !important; max-width: 68ch; }
html.cp-v2 .bl2 .blog-summary h2 { margin: 0 0 8px; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ob-dim); font-weight: 700; }
html.cp-v2 .bl2 .blog-summary li { color: var(--ob-mute); font-size: var(--ob-fs-sm); }
html.cp-v2 .bl2 .blog-summary li::before { content: ''; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ob-violet); }
/* Tabellen */
html.cp-v2 .bl2 .setguide-table-wrapper { overflow-x: auto; border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: transparent; box-shadow: none; }
html.cp-v2 .bl2 .setguide-table { width: 100%; border-collapse: collapse; font-size: var(--ob-fs-sm); background: transparent; }
html.cp-v2 .bl2 .setguide-table th { padding: 8px 12px; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ob-dim); font-weight: 600; background: transparent; border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .bl2 .setguide-table td { padding: 8px 12px; color: var(--ob-ink); border-bottom: 1px solid var(--ob-line); background: transparent; }
html.cp-v2 .bl2 .blog-section .setguide-table :is(td, th) + :is(td, th) { text-align: right; font-family: var(--cp-font-mono); }
html.cp-v2 .bl2 .setguide-table tr:last-child td { border-bottom: 0; }
/* Hinweis-, FAQ-, Kernseiten-Blöcke */
html.cp-v2 .bl2 .blog-cta { padding: 16px !important; border: 1px solid var(--ob-line) !important; border-radius: var(--ob-r-md) !important; background: var(--ob-surface) !important; max-width: 68ch; display: grid; gap: 8px; }
html.cp-v2 .bl2 .blog-cta h2 { margin: 0; font-size: var(--ob-fs-base); }
html.cp-v2 .bl2 .blog-cta p { margin: 0; color: var(--ob-mute); font-size: var(--ob-fs-sm); }
html.cp-v2 .bl2 .blog-cta .setguide-scroll-btn { justify-self: start; display: inline-flex; align-items: center; width: auto; min-height: var(--ob-tap-min); padding: 0 16px; border: 0; border-radius: var(--ob-r-sm); background: var(--ob-accent-btn); color: #fff; font-size: var(--ob-fs-sm); font-weight: 700; box-shadow: none; animation: none; }
html.cp-v2 .bl2 .blog-cta .setguide-scroll-btn::before, html.cp-v2 .bl2 .blog-cta .setguide-scroll-btn::after { display: none; }
html.cp-v2 .bl2 .blog-faq summary { color: var(--ob-ink); font-weight: 700; }
html.cp-v2 .bl2 .blog-faq details { border-top-color: var(--ob-line); }
html.cp-v2 .bl2 :is(.blog-faq, .blog-core) h2 { font-size: var(--ob-fs-lg); margin: 0 0 10px; }
html.cp-v2 .bl2 .blog-core-ico { display: none; }
html.cp-v2 .bl2 .blog-core-grid a { border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); box-shadow: none; transform: none; }
html.cp-v2 .bl2 .blog-core-grid b { color: var(--ob-ink); font-size: var(--ob-fs-sm); }
html.cp-v2 .bl2 .blog-core-grid small { color: var(--ob-dim); font-size: var(--ob-fs-xs); }
html.cp-v2 .bl2 .blog-infographic img { border-radius: var(--ob-r-md); }
@media (hover: hover) {
  html.cp-v2 .bl2 :is(.blog-card, .blog-feature, .blog-core-grid a):hover { border-color: rgb(var(--ob-violet-rgb) / 0.45); transform: none; }
}
@media (max-width: 899px) {
  html.cp-v2 .bl2 .blog-feature { grid-template-columns: 1fr; }
  html.cp-v2 .bl2 .blog-feature-body { padding: 14px; }
  html.cp-v2 .bl2 .blog-grid { grid-template-columns: 1fr; }
  html.cp-v2 .bl2 .blog-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  html.cp-v2 .bl2 .blog-card > img, html.cp-v2 .bl2 .blog-card > .blog-art-banner { height: 100%; aspect-ratio: auto; }
  html.cp-v2 .bl2 .blog-card-body p { display: none; }
  html.cp-v2 .bl2 .blog-hero-banner h1 { font-size: var(--ob-fs-lg); }
  html.cp-v2 .bl2 .blog-hero-banner .setguide-hero-sub { font-size: var(--ob-fs-sm); }
  html.cp-v2 .bl2-cols { grid-template-columns: 1fr; gap: 14px; }
  html.cp-v2 .bl2-side { position: static; order: -1; }
  html.cp-v2 .bl2 .blog-section :is(p, li) { font-size: var(--ob-fs-md); }
}
html.cp-v2[data-theme="light"] .bl2 :is(h1, h2, h3, .blog-card-body h3, .blog-faq summary, .blog-core-grid b) { color: var(--ob-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
html.cp-v2[data-theme="light"] .bl2 :is(.blog-hero-main, .blog-hero-banner, .blog-hero-list, .bl2-main .setguide-section.blog-section, .bl2-main .blog-faq, .bl2-main .blog-core, .blog-related) { background: none !important; border: 0 !important; box-shadow: none !important; }
html.cp-v2[data-theme="light"] .bl2 :is(.blog-card, .blog-feature, .blog-core-grid a, .blog-summary, .blog-cta, .setguide-hero-banner-img) { background: var(--ob-surface) !important; border-color: var(--ob-line) !important; }
html.cp-v2[data-theme="light"] .bl2 .setguide-eyebrow { background: none !important; border: 0 !important; color: var(--ob-mute) !important; padding: 0 !important; }
html.cp-v2[data-theme="light"] .bl2 .setguide-pill { background: none !important; border: 0 !important; color: var(--ob-dim) !important; }
html.cp-v2[data-theme="light"] .bl2 .blog-langs :is(a, span) { background: transparent !important; color: var(--ob-mute) !important; border: 0 !important; }
html.cp-v2[data-theme="light"] .bl2 .blog-langs .on { background: rgb(var(--ob-violet-rgb) / 0.12) !important; color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .bl2 :is(.blog-feature-btn, .blog-cta .setguide-scroll-btn) { color: #fff !important; background: var(--ob-accent-btn) !important; }
html.cp-v2[data-theme="light"] .bl2 :is(.blog-section, .blog-back) a { color: var(--ob-violet-ink) !important; }
html.cp-v2[data-theme="light"] .bl2 .setguide-table :is(th, td) { background: transparent !important; }
html.cp-v2[data-theme="light"] .bl2 .setguide-table td { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .bl2 > .setguide-section { background: none !important; border: 0 !important; box-shadow: none !important; }
html.cp-v2 .bl2 :is(h1, h2) * { color: inherit !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
html.cp-v2 .bl2 :is(.blog-hero-banner .setguide-hero-sub, .blog-hero-sub) { color: var(--ob-mute) !important; font-weight: 400 !important; -webkit-text-fill-color: currentColor !important; }
html.cp-v2[data-theme="light"] .bl2 .guide-link-new-badge { color: var(--ob-violet-ink) !important; background: var(--ob-pop) !important; -webkit-text-fill-color: currentColor !important; }
html.cp-v2 .gd2 .setguide-hero .setguide-hero-sub { color: var(--ob-mute) !important; font-weight: 400 !important; -webkit-text-fill-color: currentColor !important; }

/* ==========================================================================
   Release-Kalender v2 (/releases/ + /riftbound/releases/; Code: data.js cpRl2*, releases/releases.js renderV2, riftbound/rb.js renderReleasesV2)
   Countdown-Karte · Termin-Liste (Desktop rechts haftend, Handy gekuerzt) · Set-Karten · Zuletzt erschienen · Sheet Termin/Produkt
   ========================================================================== */
html.cp-v2 .rl2 { display: grid; gap: var(--ob-s-6); min-width: 0; }
html.cp-v2 .rl2 .v2-ph { margin: 0; }
html.cp-v2 .rl2-lay { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "a ag" "b ag"; gap: var(--ob-s-7) var(--ob-s-6); align-items: start; }
html.cp-v2 .rl2-a { grid-area: a; display: grid; gap: var(--ob-s-3); min-width: 0; }
html.cp-v2 .rl2-b { grid-area: b; display: grid; gap: var(--ob-s-7); min-width: 0; }
html.cp-v2 .rl2-s { display: grid; gap: var(--ob-s-3); min-width: 0; }
html.cp-v2 .rl2-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
html.cp-v2 .rl2 h2, html.cp-v2 .rl2 h3 { margin: 0; color: var(--ob-ink); background: none; -webkit-text-fill-color: currentColor; letter-spacing: -0.01em; }
html.cp-v2 .rl2-sh h2 { font-size: var(--ob-fs-base); font-weight: 800; }
html.cp-v2 .rl2-sh span { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-mute); }
/* Countdown-Karte + Set-Karte */
html.cp-v2 :is(.rl2-nx, .rl2-sc) { display: grid; gap: var(--ob-s-4); padding: var(--ob-s-5); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-tile); background: var(--ob-surface); min-width: 0; }
html.cp-v2 .rl2-sc { border-color: var(--ob-line); padding: var(--ob-s-4); gap: var(--ob-s-3); }
html.cp-v2 .rl2-top { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: var(--ob-s-5); align-items: center; }
html.cp-v2 .rl2-sc .rl2-top { grid-template-columns: 120px minmax(0, 1fr) auto; gap: var(--ob-s-4); }
html.cp-v2 .rl2-i { min-width: 0; display: grid; gap: 2px; }
html.cp-v2 .rl2-n { font-size: var(--ob-fs-lg); font-weight: 800; line-height: 1.2; }
html.cp-v2 .rl2-sc .rl2-n { font-size: var(--ob-fs-base); }
html.cp-v2 .rl2-d { font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .rl2-logo { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: var(--ob-ratio-banner); border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); overflow: hidden; text-decoration: none; }
html.cp-v2 .rl2-logo img { width: 88%; height: 88%; object-fit: contain; grid-area: 1 / 1; }
html.cp-v2 .rl2-logo img[hidden] { display: none; }
html.cp-v2 .rl2-ph { grid-area: 1 / 1; padding: 0 6px; font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); letter-spacing: 0.08em; color: var(--ob-mute); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
html.cp-v2 .rl2-logo:has(img:not([hidden])) .rl2-ph { display: none; }
html.cp-v2 .rl2-logo:not(:has(img:not([hidden]))) { border-style: dashed; }
html.cp-v2 .rl2-cd { display: grid; justify-items: end; gap: 4px; text-align: right; }
html.cp-v2 .rl2-cd b { font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ob-fs-display); line-height: 1; letter-spacing: -0.03em; color: var(--ob-ink); }
html.cp-v2 .rl2-cd span { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ob-mute); }
html.cp-v2 .rl2-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.cp-v2 .rl2-btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ob-tap); padding: 0 16px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-ink); font: inherit; font-size: var(--ob-fs-md); font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: none; white-space: nowrap; }
html.cp-v2 :is(.rl2-rem.on) { background: transparent; border: 1px solid rgb(var(--ob-green-rgb) / 0.45); color: var(--ob-green); }
html.cp-v2 .rl2-tl { display: inline-flex; align-items: center; gap: 4px; min-height: var(--ob-tap); padding: 0 6px; border: 0; background: none; color: var(--ob-mute); font: inherit; font-size: var(--ob-fs-md); font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: none; }
html.cp-v2 .rl2-hint { margin: -6px 0 0; font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 .rl2-bdg { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid; border-radius: var(--ob-r-pill); font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 700; white-space: nowrap; }
html.cp-v2 .rl2-bdg.v { color: var(--ob-violet-text); border-color: rgb(var(--ob-violet-rgb) / 0.4); background: rgb(var(--ob-violet-rgb) / 0.12); }
html.cp-v2 .rl2-bdg.aq { color: var(--ob-aqua); border-color: rgb(var(--ob-aqua-rgb) / 0.4); background: rgb(var(--ob-aqua-rgb) / 0.12); }
html.cp-v2 .rl2-bdg.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 .rl2-bdg.am { color: var(--ob-amber); border-color: rgb(var(--ob-amber-rgb) / 0.4); background: rgb(var(--ob-amber-rgb) / 0.12); }
/* Vorbestellungen */
html.cp-v2 .rl2-ofh { display: grid; gap: var(--ob-s-3); padding-top: var(--ob-s-4); border-top: 1px solid var(--ob-line); min-width: 0; }
html.cp-v2 .rl2-ofh-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
html.cp-v2 .rl2-ofh-h b { font-size: var(--ob-fs-md); color: var(--ob-ink); }
html.cp-v2 .rl2-ofh-h span { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .rl2-ofs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html.cp-v2 .rl2-sc .rl2-ofs { grid-template-columns: 1fr; }
html.cp-v2 .rl2-of { display: grid; grid-template-columns: var(--ob-thumb-s) minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 64px; padding: 8px 12px 8px 8px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); color: var(--ob-ink); text-decoration: none; }
html.cp-v2 .rl2-th { width: var(--ob-thumb-s); height: var(--ob-thumb-s); display: grid; place-items: center; border: 1px solid var(--ob-line); border-radius: var(--ob-r-xs); background: var(--ob-field); overflow: hidden; color: var(--ob-dim); }
html.cp-v2 .rl2-th img { width: 100%; height: 100%; object-fit: contain; }
html.cp-v2 .rl2-of-m { display: grid; gap: 2px; min-width: 0; }
html.cp-v2 .rl2-of-m b { font-size: var(--ob-fs-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .rl2-of-m small { font-size: var(--ob-fs-xs); color: var(--ob-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .rl2-of-p { display: grid; justify-items: end; gap: 4px; }
html.cp-v2 .rl2-of-p b { font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ob-fs-md); color: var(--ob-ink); white-space: nowrap; }
html.cp-v2 .rl2-more { display: inline-flex; align-items: center; gap: 4px; min-height: var(--ob-tap); justify-self: start; color: var(--ob-violet-text); font-size: var(--ob-fs-md); font-weight: 700; text-decoration: none; }
html.cp-v2 .rl2-empty { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px dashed var(--ob-line-2); border-radius: var(--ob-r-sm); color: var(--ob-mute); font-size: var(--ob-fs-sm); }
html.cp-v2 .rl2-empty .ob-icon { width: 20px; height: 20px; flex: none; }
html.cp-v2 .rl2-sk { display: block; min-height: 64px; border-radius: var(--ob-r-sm); background: linear-gradient(90deg, var(--ob-field) 25%, var(--ob-hover) 50%, var(--ob-field) 75%); background-size: 200% 100%; animation: rl2Sk 1.4s linear infinite; }
@keyframes rl2Sk { to { background-position: -200% 0; } }
html.cp-v2 .rl2-scs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--ob-s-4); }
/* Zuletzt erschienen */
html.cp-v2 .rl2-rows { display: grid; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); overflow: hidden; }
html.cp-v2 .rl2-rw { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 56px; padding: 8px 12px; color: var(--ob-ink); text-decoration: none; }
html.cp-v2 .rl2-rw + .rl2-rw { border-top: 1px solid var(--ob-line); }
html.cp-v2 .rl2-rw .rl2-logo { border-radius: var(--ob-r-xs); }
html.cp-v2 .rl2-rw-m { display: grid; min-width: 0; }
html.cp-v2 .rl2-rw-m b { font-size: var(--ob-fs-md); }
html.cp-v2 .rl2-rw-m small { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .rl2-rw > .ob-icon { color: var(--ob-mute); width: 20px; height: 20px; }
/* Produkte und Inhalte (SEO-Text bleibt, Optik wie Aufklappen) */
html.cp-v2 .rl2-seo:empty { display: none; }
html.cp-v2 .rl2-seo .cx-series-head { margin: 0; padding: 0; border: 0; }
html.cp-v2 .rl2-seo .cx-series-head h2 { font-size: var(--ob-fs-base); font-weight: 800; }
html.cp-v2 .rl2-seo .rl-sd-sub { margin: -4px 0 0; font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .rl2-seo .rl-sd { margin: 0; border: 1px solid var(--ob-line); border-radius: 0; background: var(--ob-surface); }
html.cp-v2 .rl2-seo .rl-sd + .rl-sd { border-top: 0; }
html.cp-v2 .rl2-seo .rl-sd:first-of-type { border-radius: var(--ob-r-md) var(--ob-r-md) 0 0; }
html.cp-v2 .rl2-seo .rl-sd:last-of-type { border-radius: 0 0 var(--ob-r-md) var(--ob-r-md); }
html.cp-v2 .rl2-seo .rl-sd:only-of-type { border-radius: var(--ob-r-md); }
html.cp-v2 .rl2-seo .rl-sd summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 14px; cursor: pointer; list-style: none; color: var(--ob-ink); font-size: var(--ob-fs-md); }
html.cp-v2 .rl2-seo .rl-sd summary::-webkit-details-marker { display: none; }
html.cp-v2 .rl2-seo .rl-sd summary span { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .rl2-seo .rl-sd summary span::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--ob-dur-2) var(--cp-ease); }
html.cp-v2 .rl2-seo .rl-sd[open] summary span::after { transform: translateY(1px) rotate(225deg); }
html.cp-v2 .rl2-seo .rl-sd ul { margin: 0; padding: 4px 14px 14px 30px; display: grid; gap: 6px; font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .rl2-seo .rl-sd-b { padding: 0; border: 0; background: none; color: var(--ob-ink); font: inherit; cursor: pointer; text-align: left; box-shadow: none; }
/* Termin-Liste */
html.cp-v2 .rl2-ag { grid-area: ag; position: sticky; top: calc(var(--cp-hdr-h, 64px) + 16px); display: grid; gap: var(--ob-s-3); padding: var(--ob-s-4); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-tile); background: var(--ob-surface); min-width: 0; max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; }
html.cp-v2 .rl2-ag-h h2 { font-size: var(--ob-fs-base); font-weight: 800; }
html.cp-v2 .rl2-seg { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); }
html.cp-v2 .rl2-seg button { flex: 1; min-height: var(--ob-tap-min); padding: 0 8px; border: 0; border-radius: var(--ob-r-xs); background: transparent; color: var(--ob-mute); font: inherit; font-size: var(--ob-fs-xs); font-weight: 650; cursor: pointer; box-shadow: none; }
html.cp-v2 .rl2-seg button.on { background: rgb(var(--ob-violet-rgb) / 0.16); color: var(--ob-ink); }
html.cp-v2 .rl2-pastb { justify-self: start; min-height: var(--ob-tap-min); padding: 0; font-size: var(--ob-fs-sm); }
html.cp-v2 .rl2-evs { display: grid; gap: 2px; }
html.cp-v2 .rl2-mo { padding: 10px 2px 4px; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ob-mute); }
html.cp-v2 .rl2-today { display: flex; align-items: center; gap: 8px; padding: 8px 2px 0; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ob-aqua); }
html.cp-v2 .rl2-today::after { content: ""; flex: 1; height: 1px; background: rgb(var(--ob-aqua-rgb) / 0.55); }
html.cp-v2 .rl2-ev { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 60px; padding: 8px; border: 0; border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: none; }
html.cp-v2 .rl2-ev.past { opacity: 0.6; }
html.cp-v2 .rl2-dt { display: grid; place-content: center; gap: 1px; width: 48px; height: 52px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); text-align: center; }
html.cp-v2 .rl2-dt b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-lg); line-height: 1; color: var(--ob-ink); }
html.cp-v2 .rl2-dt i { font-style: normal; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ob-mute); }
html.cp-v2 .rl2-dt.set { border-color: rgb(var(--ob-violet-rgb) / 0.55); background: rgb(var(--ob-violet-rgb) / 0.1); }
html.cp-v2 .rl2-dt.set b { color: var(--ob-violet-text); }
html.cp-v2 .rl2-ev-m { display: grid; gap: 2px; min-width: 0; }
html.cp-v2 .rl2-ev-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--ob-fs-sm); }
html.cp-v2 .rl2-ev-m small { font-size: var(--ob-fs-xs); color: var(--ob-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .rl2-mini { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
html.cp-v2 .rl2-mini img { width: 28px; height: 28px; object-fit: contain; border: 1px solid var(--ob-line); border-radius: var(--ob-r-xs); background: var(--ob-field); }
html.cp-v2 .rl2-mini em { font-style: normal; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-mute); padding-left: 2px; }
html.cp-v2 .rl2-ev-r { display: flex; align-items: center; gap: 2px; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-mute); white-space: nowrap; }
html.cp-v2 .rl2-allb { display: none; width: 100%; }
html.cp-v2 .rl2-note { margin: 0; font-size: var(--ob-fs-xs); color: var(--ob-dim); }
/* Sheet Termin/Produkt (Handy von unten, Desktop Popup 640 px) */
html.cp-v2 .rl2-ov[hidden] { display: none; }
html.cp-v2 .rl2-sheet { display: flex; flex-direction: column; width: 100%; max-height: var(--ob-sheet-max); background: var(--ob-pop); color: var(--ob-ink); border: 1px solid var(--ob-line-2); border-bottom: 0; border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; box-shadow: var(--ob-shadow-2); overflow: hidden; animation: rl2Up var(--ob-dur-2) var(--cp-ease); }
@keyframes rl2Up { from { transform: translateY(24px); opacity: 0; } }
html.cp-v2 .rl2-sheet .cx2-grab { flex: none; margin: 10px auto 2px; }
html.cp-v2 .rl2-shh { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 10px 10px 20px; border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .rl2-shh > div { flex: 1; display: grid; min-width: 0; }
html.cp-v2 .rl2-shh b { font-size: var(--ob-fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .rl2-shh small { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .rl2-shh .v2-ib { border-color: transparent; flex: none; }
html.cp-v2 .rl2-shh .v2-ib:first-child { margin-left: -10px; }
html.cp-v2 .rl2-shb { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: var(--ob-s-3); align-content: start; padding: var(--ob-s-4) 20px; }
html.cp-v2 .rl2-shf { flex: none; display: flex; gap: 8px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ob-line); }
html.cp-v2 .rl2-shf > * { flex: 1; }
html.cp-v2 .rl2-shg { display: flex; align-items: center; gap: 8px; padding-top: 4px; font-size: var(--ob-fs-md); }
html.cp-v2 .rl2-pl { display: grid; }
html.cp-v2 .rl2-pr { display: grid; grid-template-columns: var(--ob-thumb-s) minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 60px; padding: 6px 0; border: 0; border-radius: 0; background: none; color: var(--ob-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: none; }
html.cp-v2 .rl2-pr + .rl2-pr { border-top: 1px solid var(--ob-line); }
html.cp-v2 .rl2-pr > .ob-icon { color: var(--ob-mute); width: 20px; height: 20px; }
html.cp-v2 .rl2-pr-m { display: grid; min-width: 0; }
html.cp-v2 .rl2-pr-m b { font-size: var(--ob-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .rl2-pr-m small { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ob-mute); }
html.cp-v2 .rl2-pimg { display: grid; place-items: center; height: 220px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-field); overflow: hidden; }
html.cp-v2 .rl2-pimg img { max-width: 92%; max-height: 200px; object-fit: contain; }
html.cp-v2 .rl2-pn { font-size: var(--ob-fs-md); font-weight: 700; line-height: 1.35; }
html.cp-v2 .rl2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html.cp-v2 .rl2-chips span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-mute); }
html.cp-v2 .rl2-stats { display: flex; flex-wrap: wrap; gap: 8px; }
html.cp-v2 .rl2-stats div { display: grid; padding: 10px 14px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); }
html.cp-v2 .rl2-stats b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-lg); color: var(--ob-ink); }
html.cp-v2 .rl2-stats small { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .rl2-ptx { margin: 0; font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .rl2-lbl { 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 .rl2-ct { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .rl2-none { margin: 0; font-size: var(--ob-fs-sm); color: var(--ob-dim); }
html.cp-v2 .rl2 :is(.rl2-btn2, .rl2-tl, .rl2-ev, .rl2-seg button, .rl2-of, .rl2-rw, .rl2-more):focus-visible, html.cp-v2 .rl2-sheet :is(button, a):focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
@media (min-width: 900px) {
  html.cp-v2 .rl2-ov { align-items: center; }
  html.cp-v2 .rl2-sheet { max-width: var(--ob-pop-w-m); max-height: 85dvh; border-bottom: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); }
  html.cp-v2 .rl2-sheet .cx2-grab { display: none; }
  html.cp-v2 .rl2-shh { padding-top: 12px; }
}
@media (hover: hover) {
  html.cp-v2 :is(.rl2-ev, .rl2-pr):hover { background: var(--ob-hover); }
  html.cp-v2 :is(.rl2-of, .rl2-rw):hover { border-color: rgb(var(--ob-violet-rgb) / 0.45); background: var(--ob-hover); }
  html.cp-v2 :is(.rl2-btn2, .rl2-ib):hover { border-color: rgb(var(--ob-violet-rgb) / 0.55); }
  html.cp-v2 :is(.rl2-tl, .rl2-more):hover { color: var(--ob-ink); }
}
@media (max-width: 899px) {
  html.cp-v2 .rl2-lay { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "ag" "b"; }
  html.cp-v2 .rl2-ag { position: static; max-height: none; overflow: visible; }
  html.cp-v2 .rl2-ag:not(.all) .rl2-xm { display: none; }
  html.cp-v2 .rl2-ag:not(.all) .rl2-allb { display: inline-flex; }
}
@media (max-width: 600px) {
  html.cp-v2 .rl2-lay { gap: var(--ob-s-7); }
  html.cp-v2 :is(.rl2-nx, .rl2-sc) { padding: var(--ob-s-4); }
  html.cp-v2 .rl2-top, html.cp-v2 .rl2-sc .rl2-top { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  html.cp-v2 .rl2-cd { grid-column: 1 / -1; grid-template-columns: auto 1fr; justify-items: start; align-items: baseline; gap: 10px; padding: 12px 14px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); text-align: left; }
  html.cp-v2 .rl2-cd b { font-size: var(--ob-fs-xl); }
  html.cp-v2 .rl2-sc .rl2-top > .rl2-bdg { grid-column: 2; justify-self: start; }
  html.cp-v2 .rl2-nx .rl2-acts .cx2-btn { flex: 1; }
  html.cp-v2 .rl2-sc .rl2-acts .rl2-btn2 { flex: 1; }
  html.cp-v2 .rl2-ofs { grid-template-columns: 1fr; }
  html.cp-v2 .rl2-of { grid-template-columns: var(--ob-thumb-s) minmax(0, 1fr); row-gap: 2px; }
  html.cp-v2 .rl2-of .rl2-th { grid-row: 1 / 3; }
  html.cp-v2 .rl2-of-p { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; justify-content: start; gap: 8px; }
  html.cp-v2 .rl2-scs { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html.cp-v2 .rl2-sk, html.cp-v2 .rl2-sheet { animation: none; }
  html.cp-v2 .rl2-seo .rl-sd summary span::after { transition: none; }
}
/* Hell: Akzent-Text in -ink, gegen theme-light.css (Buttons/Links/Flaechen) */
html.cp-v2[data-theme="light"] .rl2-bdg.aq, html.cp-v2[data-theme="light"] .rl2-today { color: var(--ob-aqua-ink); }
html.cp-v2[data-theme="light"] .rl2-bdg.g, html.cp-v2[data-theme="light"] .rl2-rem.on { color: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] .rl2-bdg.am { color: var(--ob-amber-ink); }
html.cp-v2 .rl2-scs { align-items: start; }
html.cp-v2 .rl2-seo { gap: 0; }
html.cp-v2 .rl2-seo .rl-sd-sub { margin: 4px 0 12px; }
html.cp-v2 .rl2 .v2-ph h1 { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--ob-ink) !important; } /* v1-Verlauf auf .collection-page h1 */
html.cp-v2 .rl2 .v2-ph h1 * { background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit !important; }
/* Hell: theme-light.css faerbt Links/Ueberschriften/Aufklapper ein – hier zurueck auf Tokens */
html.cp-v2[data-theme="light"] .rl2 :is(.rl2-of, .rl2-rw, .rl2-of-m b, .rl2-rw-m b, .rl2-seo .rl-sd summary, .rl2-seo .rl-sd-b) { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] :is(.rl2, .rl2-sheet) .rl2-tl { color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .rl2 .rl2-more { color: var(--ob-violet-ink) !important; }
html.cp-v2[data-theme="light"] .rl2-seo .rl-sd { background: var(--ob-surface) !important; box-shadow: none !important; }
html.cp-v2[data-theme="light"] .rl2-seo .rl-sd summary span { color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .rl2-seo .cx-series-head h2 { border: 0 !important; padding: 0 !important; color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .rl2-seo .cx-series-head h2::before { display: none !important; }

/* ==========================================================================
   Startseite v2 (freigegeben 20.10.2026, Pokémon und Riftbound gleich): Raster + Widget-Bausteine .hm2 (data.js cpHm2*),
   Code: home-layout.js drawBannersV2, riftbound/rb.js relV2/setsV2/heroV2, riftbound/rb-layout.js drawExtras (v2-Zweige)
   ========================================================================== */
/* Raster ab Desktop: Werkzeug-Kacheln (.hm2-third) zu dritt nebeneinander, alles andere volle Breite */
@media (min-width: 900px) {
  html.cp-v2.hm2-home #pageShell, html.cp-v2 #rbApp:has(> [data-rb-blk="rbHero"]), html.cp-v2 #opApp:has(> [data-op-blk="opHero"]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--ob-s-5); align-items: stretch; }
  html.cp-v2.hm2-home #pageShell > *, html.cp-v2 #rbApp:has(> [data-rb-blk="rbHero"]) > *, html.cp-v2 #opApp:has(> [data-op-blk="opHero"]) > * { grid-column: 1 / -1; min-width: 0; }
  html.cp-v2.hm2-home #pageShell > .hm2-third, html.cp-v2 #rbApp > .hm2-third, html.cp-v2 #opApp > .hm2-third { grid-column: auto; }
}
/* Abstaende der Startseiten-Bloecke */
html.cp-v2 :is(.hm2-host, .rb-blk), html.cp-v2 :is(.hm2-host, .op-blk) { margin: 0 0 var(--ob-s-5); }
html.cp-v2.hm2-home #popularSetsSection { margin: 0 0 var(--ob-s-5) !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; } /* Inline-Stile im HTML */
html.cp-v2 #popularSetsSection > :not(.hm2-slot):not(.cp-hl-bar) { display: none !important; }
html.cp-v2 .rb-home-section.hm2-sec, html.cp-v2 .op-home-section.hm2-sec { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
/* Release-Widget ersetzt "Naechster Release" und "Release-Kalender": sind beide eingeblendet, nur eines zeigen */
html.cp-v2 #pageShell:has(> #homeNext:not(.cp-hl-hidden)) > #homeRelCal, html.cp-v2 #rbApp:has(> #rbNext:not(.cp-hl-hidden)) > #rbCal, html.cp-v2 #opApp:has(> #opNext:not(.cp-hl-hidden)) > #opCal { display: none !important; }
html.cp-v2 #rbFind, html.cp-v2 #opFind { display: none !important; } /* wie #homeFind: Suche sitzt im Hero */

/* ---- Widget-Rahmen ---- */
html.cp-v2 .hm2 {
  --hm2-a: var(--ob-violet-rgb); --hm2-ink: var(--ob-violet-text);
  position: relative; isolation: isolate; display: grid; gap: var(--ob-s-4); align-content: start; min-width: 0; height: 100%; overflow: hidden;
  padding: var(--ob-s-6); border-radius: var(--ob-r-lg); border: 1px solid var(--ob-line-2); color: var(--ob-ink); text-decoration: none;
  background: radial-gradient(70% 90% at 100% 0%, rgb(var(--hm2-a) / 0.1), transparent 65%), var(--ob-surface);
  box-shadow: var(--ob-shadow-1);
}
html.cp-v2 .hm2.co { --hm2-a: var(--ob-coral-rgb); --hm2-ink: var(--ob-coral); }
html.cp-v2 .hm2.am { --hm2-a: var(--ob-amber-rgb); --hm2-ink: var(--ob-amber); } /* One Piece: Widget-Akzent Amber (Styleguide 24.10.2026) */
/* Teilen-Knopf oben rechts auf jedem Widget (Inhaber 23.10.2026): schlicht wie die Hero-Icons – ohne Kreis, Icon 20 px, Tippflaeche 44 px, --ob-mute.
   Bei Werkzeug-Kacheln (ganze Kachel = Link) sitzt der Knopf als Geschwister im Rahmen (.hm2-shost), nicht im Link. */
html.cp-v2 .hm2-shost, html.cp-v2 .hc-has-sh { position: relative; }
html.cp-v2 .hc-has-sh > .hc-whead { padding-right: calc(var(--ob-tap) - var(--ob-s-2)); }   /* persoenliche Widgets: Titel laeuft nicht unter den Knopf */
html.cp-v2 .hm2-share {
  position: absolute; top: var(--ob-s-2); right: var(--ob-s-2); z-index: 2; display: grid; place-items: center; width: var(--ob-tap); height: var(--ob-tap); padding: 0;
  border: 0; border-radius: var(--ob-r-sm); background: none; color: var(--ob-mute); cursor: pointer; transition: color var(--ob-dur-1) var(--ob-ease-out);
}
html.cp-v2 .hm2-share .ob-icon { width: var(--ob-icon); height: var(--ob-icon); }
html.cp-v2 .hm2-share:focus-visible { outline: 2px solid var(--ob-violet); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .hm2-share:hover { color: var(--ob-ink); } }
html.cp-v2 .hm2-share-msg { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: var(--ob-s-1); white-space: nowrap; font-size: var(--ob-fs-xs); color: var(--ob-mute); opacity: 0; pointer-events: none; transition: opacity var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .hm2-share-msg.on { opacity: 1; }
html.cp-v2 .hm2.hm2-has-sh > .hm2-row, html.cp-v2 .hm2.hm2-rel.hm2-has-sh > .hm2-hd { padding-right: calc(var(--ob-tap) - var(--ob-s-2)); }   /* Platz fuer den Knopf neben Pfeilen / „Alle …“ */
html.cp-v2 .hm2-tool.hm2-has-sh > .hm2-hd { padding-right: calc(var(--ob-tap) - var(--ob-s-2)); }
@media (min-width: 601px) and (max-width: 899px) { html.cp-v2 .hm2-rel.hm2-has-sh > .hm2-rel-lg { margin-top: var(--ob-s-7); } }
@media (min-width: 900px) { html.cp-v2 .hm2-rel.hm2-has-sh > .hm2-nx { margin-top: var(--ob-s-6); } }
@media (max-width: 899px) {
  html.cp-v2 .hm2-tool.hm2-has-sh { padding-right: calc(var(--ob-s-4) + var(--ob-tap)); }
  html.cp-v2 .hm2-tool.hm2-has-sh > .hm2-hd { padding-right: 0; }
  html.cp-v2 .hm2-tool.hm2-has-sh + .hm2-share { top: 50%; right: var(--ob-s-1); transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) { html.cp-v2 .hm2-share, html.cp-v2 .hm2-share-msg { transition: none; } }
html.cp-v2 .hm2-hd { display: grid; gap: var(--ob-s-1); min-width: 0; }
html.cp-v2 .hm2-eb { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm2-ink); }
html.cp-v2 .hm2-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: var(--ob-fs-xl); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; color: var(--ob-ink); text-wrap: balance; }
html.cp-v2 .hm2-t a { color: inherit; text-decoration: none; }
html.cp-v2 .hm2-s { margin: 0; max-width: 52ch; color: var(--ob-mute); font-size: var(--ob-fs-md); line-height: 1.5; }
html.cp-v2 .hm2-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ob-s-4); flex-wrap: wrap; }
html.cp-v2 .hm2-ft { display: flex; align-items: center; gap: var(--ob-s-4); flex-wrap: wrap; }
html.cp-v2 .hm2-tl { display: inline-flex; align-items: center; min-height: var(--ob-tap); color: var(--ob-mute); font-size: var(--ob-fs-md); font-weight: 600; text-decoration: none; }
html.cp-v2 .hm2-chip { padding: 2px 8px; border-radius: var(--ob-r-pill); border: 1px solid rgb(var(--hm2-a) / 0.45); color: var(--hm2-ink); font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
html.cp-v2 .hm2-bdg { padding: 2px 10px; border-radius: var(--ob-r-pill); background: rgb(var(--ob-green-rgb) / 0.14); color: var(--ob-green); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; }
/* Logo 16:9 mit Platzhalter (Set-Code), solange kein Bild geladen ist */
html.cp-v2 :is(.hm2-rel-lg, .hm2-sc-lg) { position: relative; display: grid; place-items: center; aspect-ratio: var(--ob-ratio-banner); max-width: 100%; }
html.cp-v2 :is(.hm2-rel-lg, .hm2-sc-lg) img { width: 100%; height: 100%; object-fit: contain; }
html.cp-v2 .hm2-ph { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--ob-s-2); color: var(--ob-dim); font-family: var(--cp-font-mono); font-size: var(--ob-fs-lg); font-weight: 700; letter-spacing: 0.08em; text-align: center; }
html.cp-v2 .hm2 img:not([hidden]) + .hm2-ph { display: none; }

/* ---- Release-Widget ---- */
html.cp-v2 .hm2-rel { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); grid-template-areas: "hd lg" "nx nx" "ft ft"; align-items: center; }   /* Logo neben Titel + Countdown (Inhaber 23.10.2026) */
html.cp-v2 .hm2-rel > .hm2-hd { grid-area: hd; }
html.cp-v2 .hm2-rel > .hm2-rel-lg { grid-area: lg; width: 100%; }
html.cp-v2 .hm2-rel > .hm2-nx { grid-area: nx; }
html.cp-v2 .hm2-rel > .hm2-ft { grid-area: ft; }
html.cp-v2 .hm2-rel-lg img { filter: drop-shadow(0 10px 18px rgb(var(--ob-black-rgb) / 0.35)); }
@media (min-width: 601px) and (max-width: 899px) {
  html.cp-v2 .hm2-rel { grid-template-columns: minmax(0, 1fr) 220px; grid-template-areas: "hd lg" "nx nx" "ft ft"; align-items: center; }
  html.cp-v2 .hm2-rel > .hm2-rel-lg { width: 100%; }
}
@media (min-width: 900px) {
  html.cp-v2 .hm2-rel { grid-template-columns: auto minmax(0, 0.9fr) minmax(0, 1.2fr); grid-template-areas: "hd lg nx" "ft lg nx"; align-items: center; column-gap: var(--ob-s-7); }
  html.cp-v2 .hm2-rel > .hm2-rel-lg { width: 100%; }
}
html.cp-v2 .hm2-cd { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ob-s-2); margin-top: var(--ob-s-1); color: var(--ob-mute); font-size: var(--ob-fs-md); }
html.cp-v2 .hm2-cd b { color: var(--ob-ink); font-family: var(--cp-font-mono); font-size: var(--ob-fs-display); font-weight: 700; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
html.cp-v2 .hm2-nx { display: grid; gap: var(--ob-s-2); min-width: 0; }
html.cp-v2 .hm2-nx-h { color: var(--ob-dim); font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; }
html.cp-v2 .hm2-nx-r { display: grid; grid-template-columns: 48px 40px minmax(0, 1fr) auto; gap: var(--ob-s-3); align-items: center; min-height: var(--ob-tap); padding: 6px 12px 6px 6px; border-radius: var(--ob-r-md); border: 1px solid var(--ob-line); background: var(--ob-field); color: var(--ob-ink); text-decoration: none; transition: border-color var(--ob-dur-1) var(--cp-ease); }
html.cp-v2 .hm2-dt { display: grid; place-content: center; width: 48px; height: 44px; border-radius: var(--ob-r-sm); border: 1px solid var(--ob-line); background: var(--ob-field); font-family: var(--cp-font-mono); line-height: 1.05; text-align: center; }
html.cp-v2 .hm2-dt b { font-size: var(--ob-fs-base); }
html.cp-v2 .hm2-dt i { color: var(--ob-mute); font-size: var(--ob-fs-2xs); font-style: normal; text-transform: uppercase; }
html.cp-v2 .hm2-th { position: relative; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: var(--ob-r-xs); border: 1px solid var(--ob-line); background: var(--ob-field); color: var(--ob-dim); }
html.cp-v2 .hm2-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
html.cp-v2 .hm2-th img ~ .ob-icon { display: none; }
html.cp-v2 .hm2-nx-n { display: grid; min-width: 0; }
html.cp-v2 .hm2-nx-n b { overflow: hidden; font-size: var(--ob-fs-md); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
html.cp-v2 .hm2-nx-n small { color: var(--ob-mute); font-size: var(--ob-fs-xs); }
html.cp-v2 .hm2-in { color: var(--ob-mute); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); white-space: nowrap; }
html.cp-v2 .hm2-rem.on { background: transparent; border: 1px solid rgb(var(--ob-green-rgb) / 0.45); color: var(--ob-green); }

/* ---- Beliebte Sets (Wisch-Leiste) ---- */
html.cp-v2 .hm2-arrs { display: flex; gap: var(--ob-s-2); }
html.cp-v2 .hm2-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, calc((100% - 4 * var(--ob-s-3)) / 5)); gap: var(--ob-s-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: var(--ob-s-1); overscroll-behavior-x: contain; }
html.cp-v2 .hm2-sc { position: relative; display: grid; gap: var(--ob-s-2); align-content: start; padding: var(--ob-s-3); border-radius: var(--ob-r-tile); border: 1px solid var(--ob-line); background: var(--ob-field); scroll-snap-align: start; transition: border-color var(--ob-dur-1) var(--cp-ease); }
html.cp-v2 .hm2-sc-a { display: grid; gap: var(--ob-s-2); color: var(--ob-ink); text-decoration: none; }
html.cp-v2 .hm2-sc-lg { border-radius: var(--ob-r-sm); background: var(--ob-field); overflow: hidden; }
html.cp-v2 .hm2-sc-lg img { width: 86%; height: 86%; }
html.cp-v2 .hm2-sc-n { overflow: hidden; font-size: var(--ob-fs-base); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
html.cp-v2 .hm2-sc-m { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-2); min-height: 22px; color: var(--ob-mute); font-size: var(--ob-fs-xs); }
html.cp-v2 .hm2-sc-g { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--ob-tap-min); border-radius: var(--ob-r-sm); border: 1px solid var(--ob-line-2); background: var(--ob-field); color: var(--ob-ink); font-size: var(--ob-fs-sm); font-weight: 600; text-decoration: none; }
html.cp-v2 .hm2-sc-g .ob-icon { width: var(--ob-icon-sm); height: var(--ob-icon-sm); }
@media (max-width: 899px) { html.cp-v2 .hm2-rail { grid-auto-columns: minmax(180px, 42%); } }
@media (max-width: 600px) { html.cp-v2 .hm2-rail { grid-auto-columns: 72%; } html.cp-v2 .hm2-arrs { display: none; } }

/* ---- Blog ---- */
html.cp-v2 .hm2-bl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ob-s-4); }
html.cp-v2 .hm2-bc { display: grid; gap: var(--ob-s-3); align-content: start; color: var(--ob-ink); text-decoration: none; }
html.cp-v2 .hm2-bc-i { display: grid; place-items: center; aspect-ratio: var(--ob-ratio-og); overflow: hidden; border-radius: var(--ob-r-md); border: 1px solid var(--ob-line); background: var(--ob-field); }
html.cp-v2 .hm2-bc-i > img { width: 100%; height: 100%; object-fit: cover; }
html.cp-v2 .hm2-bc-i .hbl-logos { display: flex; gap: var(--ob-s-2); padding: var(--ob-s-3); }
html.cp-v2 .hm2-bc-i .hbl-logos img { max-height: 56px; max-width: 45%; object-fit: contain; }
html.cp-v2 .hm2-bc-t { display: grid; gap: var(--ob-s-1); }
html.cp-v2 .hm2-bc-t b { font-size: var(--ob-fs-base); line-height: 1.3; }
html.cp-v2 .hm2-bc-t small { color: var(--ob-dim); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); }
@media (max-width: 899px) {
  html.cp-v2 .hm2-bl { grid-template-columns: minmax(0, 1fr); gap: var(--ob-s-3); }
  html.cp-v2 .hm2-bc { grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
  html.cp-v2 .hm2-bc-i { aspect-ratio: 4 / 3; border-radius: var(--ob-r-sm); }
  html.cp-v2 .hm2-bc:nth-child(n+3) { display: none; }
}

/* ---- Werkzeug-Kacheln (ganze Kachel ist der Link); Handy/Tablet: kompakte Zeile ---- */
html.cp-v2 .hm2-tool { grid-template-columns: minmax(0, 1fr) 38%; grid-template-rows: auto 1fr auto; column-gap: var(--ob-s-3); min-height: 200px; }
html.cp-v2 .hm2-tool > .hm2-hd, html.cp-v2 .hm2-tool > .hm2-go { grid-column: 1; }
html.cp-v2 .hm2-tool .hm2-t { font-size: var(--ob-fs-lg); }
html.cp-v2 .hm2-art { grid-column: 2; grid-row: 1 / 4; align-self: center; display: flex; align-items: center; justify-content: center; height: 150px; pointer-events: none; }
html.cp-v2 .hm2-art img { height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 10px 18px rgb(var(--ob-black-rgb) / 0.4)); }
html.cp-v2 .hm2-art img + img { margin-left: -45%; transform: translateY(10px); }
/* One Piece: Set-Code-Platzhalter in Werkzeug-Kacheln, wenn kein Produktfoto ladbar ist (Styleguide „Sets ohne Logo-Datei“) */
html.cp-v2 .hm2-art .op-art-code { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; height: 56px; padding: 0 var(--ob-s-3); border-radius: var(--ob-r-md); border: 1px dashed var(--ob-line); background: var(--ob-field); color: var(--ob-mute); font-family: var(--cp-font-mono); font-size: var(--ob-fs-sm); letter-spacing: 0.06em; }
html.cp-v2 .hm2-art img[data-op-art] { border-radius: var(--ob-r-md); }
html.cp-v2 .hm2-go { display: inline-flex; align-items: center; gap: var(--ob-s-2); justify-self: start; align-self: end; min-height: var(--ob-tap); padding: 0 var(--ob-s-4); border-radius: var(--ob-r-sm); border: 1px solid var(--ob-line-2); background: var(--ob-field); font-size: var(--ob-fs-md); font-weight: 600; }
html.cp-v2 .hm2-go .ob-icon { width: var(--ob-icon-sm); height: var(--ob-icon-sm); }
html.cp-v2 .hm2-chev { display: none; }
@media (max-width: 899px) {
  html.cp-v2 .hm2-tool { grid-template-columns: 72px minmax(0, 1fr) 20px; grid-template-rows: auto; align-items: center; column-gap: var(--ob-s-4); min-height: 0; padding: var(--ob-s-3) var(--ob-s-4) var(--ob-s-3) var(--ob-s-3); border-radius: var(--ob-r-tile); }
  html.cp-v2 .hm2-tool > .hm2-hd { grid-column: 2; gap: 2px; }
  html.cp-v2 .hm2-tool .hm2-eb, html.cp-v2 .hm2-tool .hm2-go { display: none; }
  html.cp-v2 .hm2-tool .hm2-t { font-size: var(--ob-fs-base); -webkit-line-clamp: 1; }
  html.cp-v2 .hm2-tool .hm2-s { font-size: var(--ob-fs-sm); }
  html.cp-v2 .hm2-art { grid-column: 1; grid-row: 1; width: 72px; height: 72px; overflow: hidden; border-radius: var(--ob-r-md); border: 1px solid var(--ob-line); background: var(--ob-field); }
  html.cp-v2 .hm2-art img { height: 84%; }
  html.cp-v2 .hm2-art img + img { display: none; }
  html.cp-v2 .hm2-chev { display: block; grid-column: 3; color: var(--ob-dim); }
  html.cp-v2 :is(.hm2-host, .rb-blk).hm2-third, html.cp-v2 :is(.hm2-host, .op-blk).hm2-third { margin-bottom: var(--ob-s-3); }
}
@media (max-width: 600px) { html.cp-v2 .hm2 { padding: var(--ob-s-5); } html.cp-v2 .hm2-tool { padding: var(--ob-s-3) var(--ob-s-4) var(--ob-s-3) var(--ob-s-3); } }

/* ---- Hover/Fokus ---- */
@media (hover: hover) {
  html.cp-v2 :is(.hm2-nx-r, .hm2-sc):hover, html.cp-v2 a.hm2-tool:hover { border-color: rgb(var(--hm2-a) / 0.45); }
  html.cp-v2 :is(.hm2-tl, .hm2-sc-g):hover, html.cp-v2 .hm2-bc:hover b { color: var(--ob-ink); text-decoration: underline; text-underline-offset: 3px; }
}
html.cp-v2 :is(.hm2-nx-r, .hm2-sc-a, .hm2-sc-g, .hm2-tl, .hm2-bc, a.hm2-tool):focus-visible { outline: 2px solid var(--ob-violet); outline-offset: 2px; }
html.cp-v2 :is(.hm2-nx-r, .hm2-sc, a.hm2-tool):active { border-color: rgb(var(--hm2-a) / 0.6); }

/* ---- Persoenliche Widgets (eingeloggt): gleicher Rahmen wie .hm2 ---- */
html.cp-v2 :is(.cp-hl-sec.hs, .cp-hl-sec.home-quick, .cp-hl-sec .hc-frame, .cp-hl-sec.hc .cx-hero, .cp-hl-sec.hp .cx-hero) {
  position: relative; isolation: isolate; padding: var(--ob-s-6); border-radius: var(--ob-r-lg); border: 1px solid var(--ob-line-2);
  background: radial-gradient(70% 90% at 100% 0%, rgb(var(--ob-violet-rgb) / 0.1), transparent 65%), var(--ob-surface); box-shadow: var(--ob-shadow-1); animation: none;
}
html.cp-v2 :is(.cp-hl-sec.hs, .cp-hl-sec.home-quick, .cp-hl-sec.hc, .cp-hl-sec.hp, .rb-blk) :is(.hc-title, .hs-title), html.cp-v2 :is(.cp-hl-sec.hs, .cp-hl-sec.home-quick, .cp-hl-sec.hc, .cp-hl-sec.hp, .op-blk) :is(.hc-title, .hs-title) { color: var(--ob-ink); font-size: var(--ob-fs-xl); letter-spacing: -0.03em; }
html.cp-v2 .cp-hl-sec .hc-hl { background: none; color: var(--ob-violet-text); -webkit-text-fill-color: currentColor; }
html.cp-v2 .cp-hl-sec :is(.hc-simsub, .hb-sub) { color: var(--ob-mute); }
html.cp-v2 .cp-hl-sec :is(.cx-link-btn, .cx-scan-btn, .hs-btn, .hb-cta, .hc-cta) { min-height: var(--ob-tap); }
@media (max-width: 600px) { html.cp-v2 :is(.cp-hl-sec.hs, .cp-hl-sec.home-quick, .cp-hl-sec .hc-frame, .cp-hl-sec.hc .cx-hero, .cp-hl-sec.hp .cx-hero) { padding: var(--ob-s-5); } }

/* ---- Startseite anpassen (Leiste je Widget, Panel/Bottom-Sheet) ---- */
html.cp-v2.cp-hl-edit .cp-hl-sec { outline: 2px dashed rgb(var(--ob-violet-rgb) / 0.55); outline-offset: 4px; border-radius: var(--ob-r-lg); }
html.cp-v2 .cp-hl-bar { gap: var(--ob-s-2); padding: var(--ob-s-1) var(--ob-s-1) var(--ob-s-1) var(--ob-s-2); margin: 0 0 var(--ob-s-3); border-radius: var(--ob-r-md); border: 1px solid var(--ob-line-2); background: var(--ob-pop); box-shadow: var(--ob-shadow-1); }
html.cp-v2 .cp-hl-grip { display: grid; place-items: center; width: var(--ob-tap); height: var(--ob-tap); padding: 0; color: var(--ob-violet-text); }
html.cp-v2 .cp-hl-name { color: var(--ob-ink); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; letter-spacing: 0.1em; }
html.cp-v2 .cp-hl-btn { display: grid; place-items: center; width: var(--ob-tap); height: var(--ob-tap); border-radius: var(--ob-r-sm); color: var(--ob-mute); }
html.cp-v2 :is(.cp-hl-btn, .cp-hl-grip, .cp-hl-chip-ic, .cp-hl-chip-plus, .cp-hl-pic, .cp-hl-oi, .cp-hl-plus, .cp-hl-pop-item) .ob-icon { width: 18px; height: 18px; }
html.cp-v2 .cp-hl-panel { border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); background: var(--ob-pop); color: var(--ob-ink); box-shadow: var(--ob-shadow-2); }
@media (max-width: 899px) { html.cp-v2 .cp-hl-panel { border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; } }
html.cp-v2 .cp-hl-pic { display: inline-grid; place-items: center; color: var(--ob-violet-text); }
html.cp-v2 .cp-hl-chip-ic { color: var(--ob-violet-text); }
html.cp-v2 .cp-hl-oi { display: inline-flex; vertical-align: -3px; font-style: normal; }
html.cp-v2 .cp-hl-open { display: inline-flex; align-items: center; gap: var(--ob-s-2); min-height: var(--ob-tap); padding: 0 var(--ob-s-4); font-size: var(--ob-fs-md); font-weight: 600; }
html.cp-v2 .cp-hl-done { min-height: var(--ob-tap); background: var(--ob-accent-btn); color: #fff; border: 0; }
html.cp-v2 .cp-hl-reset { min-height: var(--ob-tap); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ---- Hell: Porzellan-Flaechen, weiche Schatten, Akzent-Schrift als -ink (!important nur gegen theme-light.css) ---- */
html.cp-v2[data-theme="light"] .hm2 { --hm2-ink: var(--ob-violet-ink); background: radial-gradient(70% 90% at 100% 0%, rgb(var(--hm2-a) / 0.07), transparent 65%), var(--ob-surface); }
html.cp-v2[data-theme="light"] .hm2.co { --hm2-ink: var(--ob-coral-ink); }
html.cp-v2[data-theme="light"] .hm2.am { --hm2-ink: var(--ob-amber-ink); }
html.cp-v2[data-theme="light"] .hm2 :is(a, .hm2-t, .hm2-sc-a, .hm2-nx-r, .hm2-bc) { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .hm2 :is(.hm2-tl, .hm2-s, .hm2-in) { color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .hm2 .cx2-btn { color: #fff !important; }
html.cp-v2[data-theme="light"] :is(.hm2-bdg, .hm2-rem.on) { color: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] .hm2-rel-lg img, html.cp-v2[data-theme="light"] .hm2-art img { filter: drop-shadow(0 8px 14px rgb(var(--ob-tint-rgb) / 0.25)); }
html.cp-v2[data-theme="light"] :is(.cp-hl-sec.hs, .cp-hl-sec.home-quick, .cp-hl-sec .hc-frame, .cp-hl-sec.hc .cx-hero, .cp-hl-sec.hp .cx-hero) {
  background: radial-gradient(70% 90% at 100% 0%, rgb(var(--ob-violet-rgb) / 0.07), transparent 65%), var(--ob-surface) !important;
}
html.cp-v2[data-theme="light"] .cp-hl-sec :is(.hc-title, .hs-title) { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .cp-hl-sec :is(.hc-simsub, .hb-sub) { color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .cp-hl-sec .hc-hl { color: var(--ob-violet-ink) !important; }
@media (prefers-reduced-motion: reduce) { html.cp-v2 :is(.hm2-nx-r, .hm2-sc) { transition: none; } html.cp-v2 .hm2-rail { scroll-behavior: auto; } }

/* ==========================================================================
   v2 Pack-Simulator (freigegeben 20.10.2026, Pokémon + Riftbound gleich): Kopf wie Sammlung, „Weiter öffnen“, Bilanz, Öffnen-Panel links,
   Bühne immer dunkel mit Fortschritts-Segmenten und Treffer-Rand, Ergebnis als Popup/Bottom-Sheet, Regal.
   Code: pack-simulator/simcoll.js (viewSetsV2/viewDetailV2/tileV2/renderSheet), pack-simulator/packsim.js (stageV2/resultV2/shelfV2), simswitch.js
   ========================================================================== */
html.cp-v2 :is(.ps2, .ps2-ov) { --ps-a: var(--ob-violet); --ps-a-rgb: var(--ob-violet-rgb); --ps-at: var(--ob-violet-text); }
html.cp-v2 :is(.ps2-rb, .ps2-ov.ps-game-riftbound) { --ps-a: var(--ob-coral); --ps-a-rgb: var(--ob-coral-rgb); --ps-at: var(--ob-coral); }
html.cp-v2[data-theme="light"] .ps2-rb { --ps-at: var(--ob-coral-ink); }
/* One Piece: Akzent Amber (Styleguide 24.10.2026), wie Riftbound Koralle; hell Text als -ink */
html.cp-v2 :is(.ps2-opg, .ps2-ov.ps-game-onepiece) { --ps-a: var(--ob-amber); --ps-a-rgb: var(--ob-amber-rgb); --ps-at: var(--ob-amber); }
html.cp-v2[data-theme="light"] .ps2-opg { --ps-at: var(--ob-amber-ink); }
html.cp-v2 .ps-topbar.ps-sim { display: none; } /* Simulationsmodus: Umschalter sitzt im Kopf */
html.cp-v2 .ps2-head h1 { margin: 4px 0; font-size: var(--ob-fs-xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--ob-ink); }
html.cp-v2 .ps2-head > div > p { margin: 0; color: var(--ob-mute); font-size: var(--ob-fs-md); max-width: 60ch; }
html.cp-v2 .ps2-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 8px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: transparent; color: var(--ob-ink); font: inherit; font-size: var(--ob-fs-2xs); letter-spacing: 0.12em; cursor: pointer; }
html.cp-v2 .ps2-tag .ob-icon { width: 12px; height: 12px; }
html.cp-v2 .ps2-eb { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ps-at); }
html.cp-v2 .ps2-lbl { 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 .ps2-pos { color: var(--ob-green); }
html.cp-v2 .ps2-neg { color: var(--ob-coral); }
html.cp-v2[data-theme="light"] .ps2 .ps2-pos { color: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] .ps2 .ps2-neg { color: var(--ob-coral-ink); }
html.cp-v2 .ps2-dash { color: var(--ob-dim); }
html.cp-v2 .ps2-k b.ps2-pos { color: var(--ob-green); }
html.cp-v2 .ps2-k b.ps2-neg { color: var(--ob-coral); }
html.cp-v2 .ps2-src .cx-source-switch { min-width: 0; }
/* Übersicht: „Weiter öffnen“ + Kennzahlen */
html.cp-v2 .ps2-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; margin-bottom: 16px; }
html.cp-v2 .ps2-go { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 20px; padding: 24px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-lg); background: var(--ob-card); box-shadow: var(--ob-shadow-1); }
html.cp-v2 .ps2-go::before, html.cp-v2 .ps2-op::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 100% 0%, rgb(var(--ps-a-rgb) / 0.1), transparent 65%); pointer-events: none; }
html.cp-v2[data-theme="light"] :is(.ps2-go, .ps2-op)::before { background: radial-gradient(70% 90% at 100% 0%, rgb(var(--ps-a-rgb) / 0.07), transparent 65%); }
html.cp-v2 .ps2-go > * { position: relative; min-width: 0; }
html.cp-v2 .ps2-go-t { display: grid; gap: 12px; align-content: start; }
html.cp-v2 .ps2-go h2 { margin: 0; font-size: var(--ob-fs-lg); font-weight: 800; letter-spacing: -0.02em; color: var(--ob-ink); }
html.cp-v2 .ps2-go-pk { align-self: center; justify-self: center; width: 118px; height: auto; transform: rotate(6deg); filter: drop-shadow(0 16px 22px rgb(var(--ob-black-rgb) / 0.45)); }
html.cp-v2 .ps2-lim { display: grid; gap: 6px; }
html.cp-v2 .ps2-dots { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
html.cp-v2 .ps2-dots i { height: 6px; border-radius: 3px; background: var(--ob-line); }
html.cp-v2 .ps2-dots i.on { background: var(--ps-a); }
html.cp-v2 .ps2-lim-t { display: flex; justify-content: space-between; gap: 8px; font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .ps2-kpi { display: grid; gap: 10px; align-content: start; padding: 16px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .ps2-kg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html.cp-v2 .ps2-k { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); min-width: 0; }
html.cp-v2 .ps2-k b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-lg); font-weight: 800; letter-spacing: -0.02em; color: var(--ob-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.cp-v2 .ps2-k small { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .ps2 .cx2-fbar { margin-top: 4px; }
/* Set-Kachel mit Pack */
html.cp-v2 .ps2-st .cx-set-art { position: relative; overflow: hidden; justify-content: flex-start; }
html.cp-v2 .ps2-st .cx-set-logo { max-width: 64%; }
html.cp-v2 .ps2-st-pk { position: absolute; right: 8px; bottom: -14px; height: 82%; width: auto; transform: rotate(8deg); filter: drop-shadow(0 8px 12px rgb(var(--ob-black-rgb) / 0.4)); pointer-events: none; }
/* Set-Seite: Öffnen-Panel */
html.cp-v2 .ps2-open .ps-stage { display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
html.cp-v2 .ps2-op { position: relative; overflow: hidden; display: grid; gap: 14px; padding: 20px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r); background: var(--ob-card); box-shadow: var(--ob-shadow-1); }
html.cp-v2 .ps2-op > * { position: relative; min-width: 0; }
html.cp-v2 .ps2-kinds { display: flex; flex-wrap: wrap; }
html.cp-v2 .ps2-kinds .cx-tab { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
html.cp-v2 .ps2-kinds small { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-dim); }
html.cp-v2 .ps2-stg { position: relative; display: grid; place-items: center; gap: 8px; min-height: 260px; padding: 12px 0 28px; border-radius: var(--ob-r-md); background: radial-gradient(60% 60% at 50% 50%, rgb(var(--ps-a-rgb) / 0.2), transparent 70%); }
html.cp-v2 .ps2-stg .ps-pack-photo { height: 230px; max-width: 100%; }
html.cp-v2 .ps2-stg .ps-box-photo { height: 190px; }
html.cp-v2 .ps2-stg .ps-box-meta { color: var(--ob-mute); font-size: var(--ob-fs-xs); }
html.cp-v2 .ps2-stg .ps-box-meta b { color: var(--ob-ink); font-size: var(--ob-fs-sm); }
html.cp-v2 .ps2-stg .ps-box3d { padding: 12px 20px 22px; }
html.cp-v2 .ps2-op .ps-pack-img::after { animation: none; opacity: 0; } /* Styleguide Animationen: kein Endlos-Glanz */
html.cp-v2 .ps2-op .ps-b3.idle .ps-b3-rot { animation: none; }
html.cp-v2 .ps2-pp { position: absolute; left: 10px; bottom: 8px; padding: 3px 9px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-pill); background: var(--ob-pop); font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-mute); }
html.cp-v2 .ps2-btn { width: 100%; }
html.cp-v2 .ps2-btn[disabled] { opacity: 0.45; cursor: default; }
html.cp-v2 .ps2-st { display: grid; gap: 10px; }
html.cp-v2 .ps2-st h3 { margin: 0; font-size: var(--ob-fs-base); color: var(--ob-ink); }
html.cp-v2 .ps2-st p { margin: 0; font-size: var(--ob-fs-sm); color: var(--ob-mute); line-height: 1.5; }
html.cp-v2 .ps2-cd { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xl); font-weight: 800; letter-spacing: -0.02em; color: var(--ob-ink); font-variant-numeric: tabular-nums; }
/* Bühne (immer dunkel, auch im hellen Theme -- wie eine Vollbild-Ansicht) */
html.cp-v2[data-theme="light"] .ps2-ov {
  --ob-bg: #06070d; --ob-surface: #0e1020; --ob-pop: #0d0f1f; --ob-field: rgb(var(--ob-white-rgb) / 0.05); --ob-hover: rgb(var(--ob-white-rgb) / 0.09);
  --ob-ink: #f5f6fb; --ob-mute: #a0a6c0; --ob-dim: #7a81a0; --ob-line: rgb(var(--ob-white-rgb) / 0.09); --ob-line-2: rgb(var(--ob-white-rgb) / 0.16);
  --ob-violet-text: #8f74ff; --ps-at: var(--ps-a); color-scheme: dark;
}
html.cp-v2[data-theme="light"] .ps2-ov :is(.v2-chip, .v2-ib) { color: var(--ob-ink) !important; } /* !important: helles Theme färbt Chips grau */
html.cp-v2 .ps2-ov .ps-ov-close { width: var(--ob-tap); height: var(--ob-tap); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: rgb(var(--ob-white-rgb) / 0.06); color: var(--ob-ink); }
html.cp-v2 .ps2-ov .ps-ov-close .ob-icon { width: var(--ob-icon); height: var(--ob-icon); }
html.cp-v2 .ps2-ov[data-phase="done"] .ps-ov-close { display: none; }
html.cp-v2 .ps2-ov .v2-chip { color: var(--ob-ink); }
html.cp-v2 .ps2-rv-top { display: grid; gap: 6px; width: 100%; }
html.cp-v2 .ps2-segs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
html.cp-v2 .ps2-segs i { height: 4px; border-radius: 3px; background: rgb(var(--ob-white-rgb) / 0.16); }
html.cp-v2 .ps2-segs i.on { background: var(--ob-ink); }
html.cp-v2 .ps2-cnt { display: flex; justify-content: space-between; gap: 8px; font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .ps2-meta { gap: 4px; color: var(--ob-mute); font-size: var(--ob-fs-sm); }
html.cp-v2 .ps2-meta b { color: var(--ob-ink); font-size: var(--ob-fs-base); }
html.cp-v2 .ps2-hit { padding: 3px 10px; border-radius: var(--ob-r-pill); background: var(--ob-holo); color: #fff; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
html.cp-v2 .ps2-pr { font-family: var(--cp-font-mono); font-weight: 700; color: var(--ob-ink); font-variant-numeric: tabular-nums; }
html.cp-v2 .ps2-hitc .ps-face, html.cp-v2 .ps2-rc.hit .ps-face { box-shadow: 0 0 0 3px var(--ob-holo-purple), 0 0 0 6px rgb(var(--ob-holo-sky-rgb) / 0.45); }
/* Ergebnis: Popup ab 900 px, darunter Bottom-Sheet */
html.cp-v2 .ps2-ov .ps-ov-stage:has(.ps2-res) { max-width: var(--ob-pop-w-l); }
html.cp-v2 .ps2-ov .ps-ov-stage:has(.ps2-box) { max-width: var(--ob-pop-w-m); }
html.cp-v2 .ps2-res { display: flex; flex-direction: column; width: 100%; max-height: calc(100dvh - 48px); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); background: var(--ob-pop); box-shadow: var(--ob-shadow-2); color: var(--ob-ink); overflow: hidden; touch-action: auto; }
html.cp-v2 .ps2-res-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .ps2-res-h h2 { margin: 2px 0 0; font-size: var(--ob-fs-lg); font-weight: 800; color: var(--ob-ink); }
html.cp-v2 .ps2-res-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: 16px; align-content: start; padding: 20px; }
html.cp-v2 .ps2-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html.cp-v2 .ps2-best { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-field); }
html.cp-v2 .ps2-best img { width: 56px; aspect-ratio: var(--ob-ratio-card); object-fit: cover; border-radius: var(--ob-r-xs); }
html.cp-v2 .ps2-best > div { display: grid; gap: 2px; min-width: 0; }
html.cp-v2 .ps2-best small { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .ps2-best .ps2-pr { font-size: var(--ob-fs-base); }
html.cp-v2 .ps2-rg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
html.cp-v2 .ps2-rc { display: grid; gap: 3px; align-content: start; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: zoom-in; box-shadow: none; }
html.cp-v2 .ps2-rc-im { position: relative; display: block; margin-bottom: 4px; }
html.cp-v2 .ps2-rc .ps-face { border-radius: var(--ob-r-xs); }
html.cp-v2 .ps2-rc b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ob-fs-sm); color: var(--ob-ink); }
html.cp-v2 .ps2-rc small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ob-fs-2xs); color: var(--ob-mute); }
html.cp-v2 .ps2-rc .ps2-pr { font-size: var(--ob-fs-sm); }
html.cp-v2 .ps2-tg { position: absolute; left: 6px; top: 6px; z-index: 2; padding: 2px 7px; border-radius: var(--ob-r-pill); font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
html.cp-v2 .ps2-tg.h { background: var(--ob-holo); color: #fff; }
html.cp-v2 .ps2-tg.n { background: var(--ob-pop); color: var(--ob-green); border: 1px solid rgb(var(--ob-green-rgb) / 0.45); }
html.cp-v2 .ps2-none { margin: 0; color: var(--ob-mute); font-size: var(--ob-fs-sm); }
html.cp-v2 .ps2-all summary { cursor: pointer; min-height: var(--ob-tap-min); display: flex; align-items: center; color: var(--ob-mute); font-size: var(--ob-fs-sm); font-weight: 650; }
html.cp-v2 .ps2-all .ps2-rg { margin-top: 10px; }
html.cp-v2 .ps2-res-f { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--ob-line); }
html.cp-v2 .ps2-ok { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--ob-green); font-size: var(--ob-fs-sm); font-weight: 600; }
/* Regal (Bundle, ETB, Display) */
html.cp-v2 .ps2-box { display: grid; gap: 14px; width: 100%; max-height: calc(100dvh - 90px); overflow-y: auto; padding: 20px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); background: var(--ob-pop); box-shadow: var(--ob-shadow-2); color: var(--ob-ink); text-align: left; }
html.cp-v2 .ps2-box-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
html.cp-v2 .ps2-box-h h2 { margin: 2px 0 0; font-size: var(--ob-fs-lg); font-weight: 800; color: var(--ob-ink); }
html.cp-v2 .ps2-chip { padding: 3px 8px; border: 1px solid rgb(var(--ps-a-rgb) / 0.45); border-radius: var(--ob-r-pill); color: var(--ps-at); font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
html.cp-v2 .ps2-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
html.cp-v2 .ps2-shelf.many { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
html.cp-v2 .ps2-sp { position: relative; width: auto; display: grid; place-items: center; padding: 8px 4px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); }
html.cp-v2 .ps2-sp img { width: 100%; max-width: 64px; }
html.cp-v2 .ps2-sp.nx { border-color: rgb(var(--ps-a-rgb) / 0.6); box-shadow: 0 0 0 3px rgb(var(--ps-a-rgb) / 0.18); }
html.cp-v2 .ps2-sp-ok { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--ob-green); color: #04130d; }
html.cp-v2 .ps2-sp-ok .ob-icon { width: 14px; height: 14px; }
html.cp-v2 .ps2-box-a { display: flex; flex-wrap: wrap; gap: 10px; }
html.cp-v2 .ps2-inc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; margin: 0; padding-left: 18px; color: var(--ob-mute); font-size: var(--ob-fs-sm); }
html.cp-v2 .ps2-note { margin: 0; color: var(--ob-dim); font-size: var(--ob-fs-xs); }
@media (hover: hover) {
  html.cp-v2 .ps2-rc:hover .ps-face { transform: translateY(-2px); }
  html.cp-v2 .ps2-tag:hover { border-color: rgb(var(--ob-violet-rgb) / 0.55); }
}
@media (max-width: 899px) {
  html.cp-v2 .ps2-top { grid-template-columns: 1fr; }
  html.cp-v2 .ps2-go { grid-template-columns: minmax(0, 1fr) 84px; padding: 20px; border-radius: var(--ob-r); }
  html.cp-v2 .ps2-go-pk { width: 80px; }
  html.cp-v2 .ps2-kpi { padding: 12px; }
  html.cp-v2 .ps2-k { padding: 10px 12px; }
  html.cp-v2 .ps2-k b { font-size: var(--ob-fs-base); }
  html.cp-v2 .ps2-cols .ps2-open { order: 0; }
  html.cp-v2 .ps2-op { grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; gap: 12px; }
  html.cp-v2 .ps2-op > :is(.ps2-kinds, .ps2-st) { grid-column: 1 / -1; }
  html.cp-v2 .ps2-op > .ps2-stg { grid-row: span 2; min-height: 0; padding: 0; background: none; align-self: start; }
  html.cp-v2 .ps2-stg .ps-pack-photo { height: 140px; }
  html.cp-v2 .ps2-stg .ps-box-photo { height: 110px; }
  html.cp-v2 .ps2-stg :is(.ps-box-meta, .ps2-pp) { display: none; }
  html.cp-v2 .ps2-op > .ps2-stg { overflow: hidden; max-height: 150px; }
  html.cp-v2 .ps2-stg .ps-box3d { padding: 0; transform: scale(0.42); transform-origin: 0 0; }
  html.cp-v2 .ps2-op > .ps2-btn { align-self: end; }
  html.cp-v2 .ps2-rv-top { padding-right: 52px; }
  html.cp-v2 .ps2-ov:has(.ps2-res) { align-items: flex-end; padding: 0; }
  html.cp-v2 .ps2-res { max-height: var(--ob-sheet-max); border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; border-bottom: 0; }
  html.cp-v2 .ps2-res-b { padding: 16px; gap: 14px; }
  html.cp-v2 .ps2-kpis { gap: 6px; }
  html.cp-v2 .ps2-kpis .ps2-k { padding: 10px; }
  html.cp-v2 .ps2-kpis .ps2-k b { font-size: var(--ob-fs-md); }
  html.cp-v2 .ps2-best { grid-template-columns: 48px minmax(0, 1fr); }
  html.cp-v2 .ps2-best img { width: 48px; }
  html.cp-v2 .ps2-best > .ps2-pr { grid-column: 2; }
  html.cp-v2 .ps2-rg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  html.cp-v2 .ps2-res-f { flex-direction: column; align-items: stretch; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  html.cp-v2 .ps2-res-f .ps2-ok { margin: 0 auto 2px; }
  html.cp-v2 .ps2-res-f .v2-chip { justify-content: center; }
  html.cp-v2 .ps2-inc { grid-template-columns: 1fr; }
  html.cp-v2 .ps2-box { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { html.cp-v2 .ps2-rc:hover .ps-face { transform: none; } }

/* ===== v2 Grundregeln Bedienung (Audit 21.10.2026) ===== */
/* Fokus: ein Ring für alles Bedienbare; hell mit --ob-aqua-ink (Aqua hat auf Porzellan nur 1,65:1) */
html.cp-v2 :where(a, button, summary, [role="button"], [role="tab"], [role="radio"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2[data-theme="light"] :focus-visible, html.cp-v2[data-theme="light"] :focus-visible::after { outline-color: var(--ob-aqua-ink) !important; }
html.cp-v2 .cx-search:focus-within { border-color: var(--ob-aqua) !important; }
html.cp-v2[data-theme="light"] .cx-search:focus-within { border-color: var(--ob-aqua-ink) !important; }
/* Akzent als Schrift im hellen Theme immer -ink */
html.cp-v2[data-theme="light"] :is(.cp-bc-drop, .ps2-ok) { color: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] :is(.cp-sim-res, .cp-card-rarity) { color: var(--ob-amber-ink); }
html.cp-v2[data-theme="light"] .cp-eyebrow { color: var(--ob-aqua-ink); }
html.cp-v2[data-theme="light"] .cp-eyebrow.cp-rose { color: var(--ob-coral-ink); }
/* Touch: kein Doppeltipp-Zoom-Warten, kein Markieren beim langen Drücken */
html.cp-v2 :where(a, button, summary, label, [role="button"], [role="tab"], input, select) { touch-action: manipulation; }
html.cp-v2 :where(button, [role="button"], [role="tab"], .cx-tab, .cx-source-opt, .v2-chip, .cp-chip) { -webkit-user-select: none; user-select: none; }
/* Sheets und Popups: Scrollen nicht an die Seite weitergeben */
html.cp-v2 :is(.nv-list, .cx2-sheet, .dr2-pop, .ps2-res-b, .ps2-box, .v2-pp-side) { overscroll-behavior: contain; }
/* Tippflächen: Fläche unsichtbar vergrößern, Optik bleibt */
html.cp-v2 .cx2-add { position: relative; }
html.cp-v2 .cx2-add::after { content: ""; position: absolute; inset: -6px; }
@media (pointer: coarse) {
  html.cp-v2 .cx2-add::after { inset: -8px; }
  html.cp-v2 .cx2-vr .cx-qty-btn { width: var(--ob-tap); height: var(--ob-tap); }
  html.cp-v2 :is(.cx2-seg .cx-tab, .cx2 .sv-toolbar .cx-tab, :is(.cx2, .ps-topbar) .cx-source-opt) { min-height: var(--ob-tap-min); }
  /* Eingabefelder 16 px, sonst zoomt das iPhone */
  html.cp-v2 :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: var(--ob-fs-input); }
}
/* Preise nie kürzen; notfalls weicht das Versions-Kürzel */
html.cp-v2 .cx2-p > b { flex-shrink: 0; overflow: visible; text-overflow: clip; }
html.cp-v2 .cx2-p .cx2-vc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Lange Wörter in Überschriften umbrechen */
html.cp-v2 :is(.v2-ph h1, .ps2-head h1) { overflow-wrap: anywhere; text-wrap: balance; }
/* Wischleiste rastet ein */
@media (max-width: 899px) {
  html.cp-v2 .v2-tl-list { scroll-snap-type: x mandatory; scroll-padding-inline: var(--ob-gutter-sm); }
  html.cp-v2 .v2-tl-list > * { scroll-snap-align: start; }
}

/* Touch: kein „klebendes“ Anheben/Vergrößern nach dem Antippen (Hover-Bewegung nur mit Maus) */
@media (hover: none) {
  html.cp-v2 .cp-cmd-search button:hover { transform: none; }
  html.cp-v2 .cp-deal-card:hover .cp-art-img { transform: none; }
  html.cp-v2 .cp-deal-card:hover { transform: none; }
  html.cp-v2 .cp-binder-slot:hover { transform: none; }
  html.cp-v2 .offer-row:hover { transform: none; }
  html.cp-v2 .dr-card:hover { transform: none; }
  html.cp-v2 .offer-row:hover .offer-thumb { transform: none; }
  html.cp-v2 .dr-card:hover .offer-thumb { transform: none; }
  html.cp-v2 :is(.cp-deal-card, .offer-row, .dr-card, .cx-set-tile, .cx-card, .top-guide-card, .popular-set-tile-card):hover { transform: none; }
  html.cp-v2 .hb:hover { transform: none; }
  html.cp-v2 .hb:hover .hb-art { transform: none; }
  html.cp-v2 :is(#searchBtn, .cp-cmd-search button, .cx-link-btn, .cx-scan-btn, .btn-toggle-search, .setguide-scroll-btn):hover { transform: none; }
  html.cp-v2 .hb-cta:hover { transform: none; }
  html.cp-v2 :is(.cp-chip, .cx-chip, .filter-btn):hover { transform: none; }
  html.cp-v2 .site-menu-feature-link:hover { transform: none; }
  html.cp-v2 :is(.hs-chip, .hs-set, .home-quick-tile, .home-highlight-card):hover { transform: none; }
  html.cp-v2 .footer-icon-btn:hover { transform: none; }
  html.cp-v2 .btn-search:hover:not(:disabled) { transform: none; }
  html.cp-v2[data-theme="light"] .hb:hover { transform: none; }
  html.cp-v2 .setguide-card-tile:hover { transform: none; }
  html.cp-v2 .setguide-card-tile--zoomable:hover .setguide-card-art img { transform: none; }
  html.cp-v2 .setguide-preview-tile:hover { transform: none; }
  html.cp-v2 .bd-btn:hover { transform: none; }
}

/* ===== Notch-Rand (viewport-fit=cover, 21.10.2026) ===== */
html.cp-v2 :is(.cx2-ov, .ps2-ov) { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
@media (max-width: 899px) {
  html.cp-v2 .dr2-pop { padding-left: max(var(--ob-gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--ob-gutter), env(safe-area-inset-right, 0px)); }
}

/* ===== Gedrückt-Zustand (freigegeben 21.10.2026): Buttons scale(0.97), eigene `scale`-Eigenschaft, damit vorhandene transform-Werte bleiben ===== */
html.cp-v2 :where(button, [role="button"], a.cx2-btn, a.bd-btn, a.v2-chip, .cx-tab, .cx-source-opt):not(:disabled) { transition-property: scale; transition-duration: var(--ob-dur-1); transition-timing-function: var(--ob-ease-out); }
html.cp-v2 :where(button, [role="button"], a.cx2-btn, a.bd-btn, a.v2-chip, .cx-tab, .cx-source-opt):not(:disabled):active { scale: 0.97; }
html.cp-v2 :is(#searchBtn, .cp-cmd-search button, .cx-link-btn, .cx-scan-btn, .setguide-scroll-btn):active { transform: translateY(0); scale: 0.97; }
/* Touch: graues Tipp-Aufblitzen aus, das Drücken zeigt der Button selbst */
html.cp-v2 { -webkit-tap-highlight-color: transparent; }
/* Haupt-Buttons: Hover hellt auf (nur Maus), Fokus über Grundregel */
html.cp-v2 .cx2-btn { transition: filter var(--ob-dur-1) var(--ob-ease-out), scale var(--ob-dur-1) var(--ob-ease-out); }
@media (hover: hover) { html.cp-v2 .cx2-btn:not(:disabled):hover { filter: brightness(1.08); } }
html.cp-v2 .cx2-btn:disabled { opacity: 0.45; cursor: default; }

/* Live-Punkt: Ring über transform/opacity statt endlos animiertem box-shadow */
html.cp-v2 .cp-live-dot { position: relative; animation: none; }
html.cp-v2 .cp-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ob-green); opacity: 0; animation: cpDotRing 1.8s var(--ob-ease-out) infinite; }
@keyframes cpDotRing { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(3.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.cp-v2 .cp-live-dot::after { animation: none; } }

/* ===== Spiel-Wahl an der Marke (freigegeben 21.10.2026): „CardPulse / Pokémon ▾“, Liste als Dropdown bzw. Bottom-Sheet ===== */
.cp-gp { display: none; }
html.cp-v2 .cp-game-switch { display: none !important; }
html.cp-v2 .header-bar-compact > header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 4px; min-width: 0; }
html.cp-v2 .cp-gp { position: relative; display: flex; align-items: center; gap: 4px; flex: none; }
html.cp-v2 .cp-gp-sl { width: 1px; height: 24px; margin: 0 8px; background: var(--ob-line-2); transform: rotate(18deg); }
html.cp-v2 .cp-gp-btn { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ob-tap); padding: 0 8px 0 6px; border: 0; border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-ink); font: inherit; font-size: var(--ob-fs-base); font-weight: 700; white-space: nowrap; cursor: pointer; transition: background var(--ob-dur-1) var(--ob-ease-out), scale var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .cp-gp-btn .cp-gs-icon { width: 24px; height: 24px; opacity: 1; transform: none; filter: none; }
html.cp-v2 .cp-gp-chev { width: 16px; height: 16px; color: var(--ob-mute); transition: rotate var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .cp-gp-btn[aria-expanded="true"] { background: var(--ob-field); }
html.cp-v2 .cp-gp-btn[aria-expanded="true"] .cp-gp-chev { rotate: 180deg; }
@media (hover: hover) { html.cp-v2 .cp-gp-btn:hover { background: var(--ob-hover); } }
html.cp-v2 .cp-gp-bd { display: none; }
html.cp-v2 .cp-gp-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--ob-z-dropdown); width: 320px; display: grid; gap: 2px; padding: 6px; background: var(--ob-pop); color: var(--ob-ink); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); box-shadow: var(--ob-shadow-2); transform-origin: top left; animation: cpGpIn var(--ob-dur-2) var(--ob-ease-out); overscroll-behavior: contain; }
html.cp-v2 .cp-gp-pop[hidden] { display: none; }
@keyframes cpGpIn { from { opacity: 0; scale: 0.97; } to { opacity: 1; scale: 1; } }
html.cp-v2 .cp-gp-hd { display: none; align-items: center; justify-content: space-between; padding: 0 4px 4px; }
html.cp-v2 .cp-gp-hd span { font-size: var(--ob-fs-lg); font-weight: 800; }
html.cp-v2 .cp-gp-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-mute); cursor: pointer; }
html.cp-v2 .cp-gp-x svg { width: 20px; height: 20px; }
html.cp-v2 .cp-gp-list { display: grid; gap: 2px; }
html.cp-v2 .cp-gp-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; gap: 12px; align-items: center; width: 100%; min-height: 56px; padding: 8px; border: 0; border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-ink); font: inherit; text-align: left; cursor: pointer; transition: background var(--ob-dur-1) var(--ob-ease-out), scale var(--ob-dur-1) var(--ob-ease-out); }
@media (hover: hover) { html.cp-v2 .cp-gp-row[data-cp-pick]:hover { background: var(--ob-hover); } }
html.cp-v2 .cp-gp-row[aria-selected="true"] { background: var(--ob-field); }
html.cp-v2 .cp-gp-tile { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-mute); font-weight: 800; }
html.cp-v2 .cp-gp-tile .cp-gs-icon { width: 26px; height: 26px; opacity: 1; transform: none; filter: none; }
html.cp-v2 .cp-gs-icon--op { color: var(--ob-amber); } /* One Piece: Linien-Symbol (Kompass) in currentColor, Akzent Amber (E5) */
html.cp-v2[data-theme="light"] .cp-gs-icon--op { color: var(--ob-amber-ink); }
html.cp-v2 .cp-gp-tx { min-width: 0; }
html.cp-v2 .cp-gp-tx b { display: block; font-size: var(--ob-fs-base); font-weight: 700; }
html.cp-v2 .cp-gp-tx small { display: block; overflow: hidden; color: var(--ob-mute); font-size: var(--ob-fs-sm); white-space: nowrap; text-overflow: ellipsis; }
html.cp-v2 .cp-gp-ck { width: 18px; height: 18px; color: var(--ob-violet-text); opacity: 0; }
html.cp-v2 .cp-gp-row[aria-selected="true"] .cp-gp-ck { opacity: 1; }
html.cp-v2 .cp-gp-soon { cursor: default; opacity: 0.55; grid-template-columns: 36px minmax(0, 1fr); }
html.cp-v2 .cp-gp-sep { height: 1px; margin: 4px 8px; background: var(--ob-line); }
@media (max-width: 600px) {
  html.cp-v2 .cp-gp-sl { margin: 0 4px; }
  html.cp-v2 .cp-gp-nm { display: none; }
  html.cp-v2 .cp-gp-btn { gap: 4px; padding: 0 4px; }
  html.cp-v2 .cp-gp-bd:not([hidden]) { display: block; position: fixed; inset: 0; z-index: var(--ob-z-sheet); background: var(--ob-backdrop); }
  html.cp-v2 .cp-gp-pop { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: calc(var(--ob-z-sheet) + 1); width: 100%; max-height: var(--ob-sheet-max); overflow-y: auto; padding: 8px max(var(--ob-gutter), env(safe-area-inset-left, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(var(--ob-gutter), env(safe-area-inset-right, 0px)); border-bottom: 0; border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; animation: cpGpUp var(--ob-dur-2) var(--ob-ease-drawer); }
  html.cp-v2 .cp-gp-pop::before { content: ""; display: block; width: 36px; height: 4px; margin: 2px auto 6px; border-radius: var(--ob-r-pill); background: var(--ob-line-2); }
  html.cp-v2 .cp-gp-hd { display: flex; }
}
@keyframes cpGpUp { from { translate: 0 100%; } to { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { html.cp-v2 .cp-gp-pop { animation: none; } }

/* ===== Seiten-Audit 2 (21.10.2026): Korrekturen nach Styleguide ===== */
/* Deal-Radar Kopf am Handy: Aktionen (Glocke) nicht auf volle Breite, sonst bleibt fuer Titel 0 px */
@media (max-width: 899px) {
  html.cp-v2 .dr2-head .cx2-acts { width: auto; display: flex; }
  html.cp-v2 .dr2-k .v2-lbl { overflow-wrap: anywhere; letter-spacing: 0.04em; }
}
html.cp-v2 .cp-fc-ico .ob-icon { width: 56px; height: 56px; color: var(--ob-mute); }
html.cp-v2 .cp-bc-art .ob-icon { width: 40px; height: 40px; color: var(--ob-mute); }
/* Laufband-Label */
html.cp-v2 .cp-tick-lbl { font-size: var(--ob-fs-2xs); }
html.cp-v2[data-theme="light"] .cp-tick-lbl { color: var(--ob-green-ink); }
/* Beliebte Sets (hell): alter Startseiten-Rahmen aus theme-light.css (2 IDs + !important) */
html.cp-v2.hm2-home #pageShell #popularSetsSection { padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
/* Angebots-Sheet (hell): theme-light.css faerbt Links und .os-price mit !important */
html.cp-v2[data-theme="light"] .os-open { color: #fff !important; }
html.cp-v2[data-theme="light"] .os-price { color: var(--ob-ink) !important; }
/* Diagramm-Achse und Aenderung: nicht kleiner als --ob-fs-2xs */
html.cp-v2 .pp-mini-axis { font-size: var(--ob-fs-2xs); }
html.cp-v2 .pp-mini-change { font-size: var(--ob-fs-2xs); }
/* Tippflaechen Handy */
@media (pointer: coarse) {
  html.cp-v2 :is(.pp-stat, .cp-range-seg) button { min-height: var(--ob-tap-min); }
  html.cp-v2 .cx-chips a { min-height: var(--ob-tap-min); display: inline-flex; align-items: center; }
  html.cp-v2 .v2-rs-acts .v2-chip { min-height: var(--ob-tap); }
  html.cp-v2 .v2-back { min-height: var(--ob-tap); }
  html.cp-v2 #drMoreBtn { min-height: var(--ob-tap); }
}
/* Set-Guide: nur die aktive Sprache zeigen (.gd2-main haengt die Bloecke aus .guide-page-content um) */
html.cp-v2:not([lang="de"]):not([lang="en"]) .gd2-main > [data-guide-lang]:not([data-guide-lang="pl"]),
html.cp-v2[lang="de"] .gd2-main > [data-guide-lang]:not([data-guide-lang="de"]),
html.cp-v2[lang="en"] .gd2-main > [data-guide-lang]:not([data-guide-lang="en"]) { display: none; }
/* Helles Theme: alte --dl-*/Blau-Regeln aus theme-light.css (mit !important) auf v2-Tokens zurueckholen */
html.cp-v2[data-theme="light"] .cx2 .cx-stat { background: var(--ob-surface) !important; border-color: var(--ob-line) !important; box-shadow: none !important; border-radius: var(--ob-r-md) !important; }
html.cp-v2[data-theme="light"] .cx2 .cx-stat-value { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .cx2 .cx-stat-label { color: var(--ob-dim) !important; }
html.cp-v2[data-theme="light"] .cx2 .cx-series-head h2 { padding-left: 0; color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .cx2 .cx-series-head h2::before { content: none; }
html.cp-v2[data-theme="light"] .cx2 .cx-series-head span { background: none; border: 0; padding: 0; color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .cx2 .cx-set-tile { box-shadow: none !important; border-radius: var(--ob-r-md) !important; }
html.cp-v2[data-theme="light"] .cx2 .cx-set-tile:hover { border-color: rgb(var(--ob-violet-rgb) / 0.45) !important; box-shadow: none !important; }
html.cp-v2[data-theme="light"] .cx2 .cx-set-art { background: none !important; }
html.cp-v2[data-theme="light"] .cx2 :is(.cx-set-name, .cx-set-logo-fallback) { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .cx2 .cx-set-meta { color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .cx2 .cx-set-info { border-top-color: var(--ob-line) !important; }
html.cp-v2[data-theme="light"] .cx2 .cx-progress { background: var(--ob-line) !important; }
html.cp-v2[data-theme="light"] .cx2 .cx-progress-bar { background: var(--ob-violet-ink) !important; }
html.cp-v2 .cx2 .cx-set-progress-meta b { color: var(--ob-violet-text); }
html.cp-v2[data-theme="light"] .cx2 .cx-set-progress-meta b { color: var(--ob-violet-ink) !important; }
html.cp-v2[data-theme="light"] .cx2 .sv-img { background: var(--ob-hover) !important; }
html.cp-v2[data-theme="light"] .cx2 .cx-qty-btn.plus { background: var(--ob-field) !important; color: var(--ob-ink) !important; border-color: var(--ob-line-2) !important; }
html.cp-v2 .cx2 .cx-set-tile:hover { transform: none; }
html.cp-v2 .cx-set-logo-fallback { font-family: var(--cp-font-mono); font-weight: 800; font-size: var(--ob-fs-sm); }
/* Set-Guide / Blog hell */
html.cp-v2[data-theme="light"] .setguide-preview-price { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .bl2 .blog-summary { border-color: rgb(var(--ob-violet-rgb) / 0.35) !important; }
html.cp-v2[data-theme="light"] .bl2 .blog-callout { background: rgb(var(--ob-amber-rgb) / 0.1) !important; border-color: rgb(var(--ob-amber-rgb) / 0.5) !important; color: var(--ob-ink) !important; }
/* Cookie-Banner: Ebene, Tippflaechen, Schrift; hell auf Tokens */
html.cp-v2 .cookie-consent-banner { z-index: var(--ob-z-cookie); }
html.cp-v2 .cookie-consent-btn { min-height: var(--ob-tap); }
html.cp-v2 .cookie-consent-link { font-size: var(--ob-fs-xs); }
html.cp-v2[data-theme="light"] .cookie-consent-banner { background: var(--ob-glass) !important; border-top: 1px solid var(--ob-line-2) !important; border-bottom: 0 !important; box-shadow: var(--ob-shadow-2) !important; }
html.cp-v2[data-theme="light"] .cookie-consent-text { color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .cookie-consent-link { color: var(--ob-aqua-ink) !important; }
html.cp-v2[data-theme="light"] .cookie-consent-btn-accept { background: var(--ob-accent-btn) !important; color: #fff !important; border: 0 !important; }
html.cp-v2[data-theme="light"] .cookie-consent-btn-reject, html.cp-v2[data-theme="light"] .cookie-consent-btn-reject:hover { background: var(--ob-field) !important; color: var(--ob-ink) !important; border: 1px solid var(--ob-line-2) !important; }
/* Menue-Fussleiste und Tippflaechen Guides/Blog/Glocke */
html.cp-v2 .site-menu-foot-label { font-size: var(--ob-fs-2xs); }
@media (pointer: coarse) {
  html.cp-v2 .gl2-links a { position: relative; }
  html.cp-v2 .gl2-links a::after { content: ""; position: absolute; inset: -12px -6px; }
  html.cp-v2 :is(.cx-toggle, .cx2-acts .v2-chip, .cx-bulk .v2-chip) { min-height: var(--ob-tap); }
}
/* Schriftstaerken nur 500/650/800 */
html.cp-v2 .cx2 .cx-series-head h2 { font-weight: 800; }
/* Diagramme v2: Akzent Aqua statt altem Gelb (Farben stehen als SVG-Attribute im JS, CSS hat Vorrang) */
html.cp-v2 :is(.cx-chart-svg, .pp-mini-svg, .pp-chart-svg) circle[fill="#facc15"] { fill: var(--ob-aqua); stroke: var(--ob-aqua); }
html.cp-v2 .cx-chart-svg path[stroke="#facc15"] { stroke: var(--ob-aqua); }
html.cp-v2 .cx-chart-svg stop[stop-color="#facc15"] { stop-color: var(--ob-aqua); }
html.cp-v2 .cx-chart-svg stop[stop-color="#facc15"][stop-opacity="0.35"] { stop-opacity: 0.22; }
html.cp-v2 :is(.cx-chart-change, .pp-mini-change).flat { color: var(--ob-mute) !important; }
html.cp-v2 .cx-chart-change { display: inline-flex; }
html.cp-v2 .v2-pp-chart .cx-chart-change.flat { background: var(--ob-field); }
html.cp-v2 .v2-pp-chart svg stop { stop-color: var(--ob-aqua); } /* Verlaufsfläche folgt der Linie (Token statt Hex im JS-/Worker-SVG; PK, RB, OP gleich) */
/* Hero-Suchfeld hell: kein Feld im Feld (theme-light.css rahmt alle Suchfelder) */
html.cp-v2[data-theme="light"] .cp-cmd-search input { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* ==========================================================================
   v2 Konto-Seite (21.10.2026, Pokémon + Riftbound gleich; Code: konto/konto.js, Seiten /konto/ + /riftbound/konto/).
   Profilkopf, Bereichs-Leiste (Desktop fest, Handy Tab-Reihe), Kennzahlen mit Zusatz, Spiel-Karten, Schnellzugriff,
   Einstellungs-Gruppen. Login, Alarme, Wunschliste und Einstellungen kommen aus dem Konto-Fenster (umgehaengt).
   ========================================================================== */
html.cp-konto #accountModalBackdrop { display: none !important; }
html.cp-v2 .ko2-page { max-width: var(--ob-page-max); }
html.cp-v2 .ko2-page > h1 { display: none; }
html.cp-v2 .ko2 { display: grid; gap: var(--ob-s-6); padding-block: var(--ob-s-5) var(--ob-s-8); }
html.cp-v2 .ko2-mono { font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; }
/* Profilkopf */
html.cp-v2 .ko2-head { display: flex; align-items: center; gap: var(--ob-s-4); min-width: 0; }
html.cp-v2 .ko2-av { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--ob-r-pill); background: var(--ob-accent-btn); color: #fff; font-size: var(--ob-fs-lg); font-weight: 800; }
html.cp-v2 .ko2-hm { flex: 1; min-width: 0; display: grid; gap: 2px; }
html.cp-v2 .ko2-hm h1 { margin: 0; font-size: var(--ob-fs-xl); font-weight: 800; line-height: var(--ob-lh-tight); color: var(--ob-ink); overflow-wrap: anywhere; }
html.cp-v2 .ko2-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-s-2); font-size: var(--ob-fs-sm); color: var(--ob-mute); min-width: 0; }
html.cp-v2 .ko2-meta > span:first-child { overflow-wrap: anywhere; }
html.cp-v2 .ko2-tag { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: var(--ob-track-caps); text-transform: uppercase; padding: 1px 8px; border-radius: var(--ob-r-xs); border: 1px solid var(--ob-line-2); color: var(--ob-aqua); }
html.cp-v2 .ko2-tag.v { color: var(--ob-violet-text); }
/* Zweit-Button (Rand, Feld) */
html.cp-v2 .ko2-btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ob-tap-min); padding: 0 14px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-ink); font: inherit; font-size: var(--ob-fs-sm); font-weight: 650; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--ob-dur-1) var(--ob-ease-out), border-color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .ko2-btn2:hover { background: var(--ob-hover); border-color: rgb(var(--ob-violet-rgb) / 0.45); }
html.cp-v2 .ko2-out { min-height: var(--ob-tap); flex: none; }
/* Spalten: Leiste + Inhalt */
html.cp-v2 .ko2-cols { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--ob-s-6); align-items: start; }
html.cp-v2 .ko2-side { position: sticky; top: 84px; display: grid; gap: var(--ob-s-3); min-width: 0; } /* linke Leiste: Navigation + Quick-Links (Desktop) */
html.cp-v2 .ko2-nav { display: grid; gap: 2px; padding: var(--ob-s-2); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .ko2-ql { display: grid; gap: 2px; padding: var(--ob-s-2); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .ko2-ql-h { padding: var(--ob-s-2) 12px var(--ob-s-1); }
@media (max-height: 819px) { html.cp-v2 .ko2-side { position: static; } } /* niedrige Bildschirme: Leiste nicht kleben lassen, sonst sind die Quick-Links unten abgeschnitten */
html.cp-v2 button.ko2-nl { width: 100%; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
html.cp-v2 .ko2-nl:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: -2px; }
html.cp-v2 .ko2-nl { display: flex; align-items: center; gap: 10px; min-height: var(--ob-tap); padding: 0 12px; border-radius: var(--ob-r-sm); color: var(--ob-mute); font-size: var(--ob-fs-md); font-weight: 650; text-decoration: none; transition: background var(--ob-dur-1) var(--ob-ease-out), color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .ko2-nl span { flex: 1; min-width: 0; }
html.cp-v2 .ko2-nl i { font-style: normal; font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 .ko2-nl:hover { background: var(--ob-hover); color: var(--ob-ink); }
html.cp-v2 .ko2-nl[aria-current] { background: var(--ob-field); color: var(--ob-ink); box-shadow: inset 3px 0 0 var(--ob-violet); }
html.cp-v2 .ko2-nl[aria-current] .ob-icon { color: var(--ob-violet-text); }
html.cp-v2 .ko2-main { min-width: 0; }
html.cp-v2 #accountLoggedInView.ko2-view { display: block !important; min-width: 0; }
html.cp-v2 .ko2-view > .account-col { display: none; }
html.cp-v2 .ko2-panel { display: grid; gap: var(--ob-s-4); min-width: 0; animation: obRise var(--ob-dur-3) var(--ob-ease-out) both; }
html.cp-v2 .ko2-panel[hidden] { display: none; }
html.cp-v2 .ko2-ph h2 { margin: 0; font-size: var(--ob-fs-xl); font-weight: 800; line-height: var(--ob-lh-tight); color: var(--ob-ink); }
html.cp-v2 .ko2-pb { display: grid; gap: var(--ob-s-4); min-width: 0; }
html.cp-v2 .ko2-sub { margin-top: var(--ob-s-2); }
html.cp-v2 .ko2-empty { margin: 0; color: var(--ob-mute); font-size: var(--ob-fs-sm); }
/* Kennzahlen mit Zusatz */
html.cp-v2 .ko2-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ob-s-3); }
html.cp-v2 .ko2-pubp:not(:empty) { margin-top: var(--ob-s-4); max-width: var(--ob-pop-w-s); } /* Übersicht: Schalter „Öffentliches Profil“ unter dem Profil-Formular */
html.cp-v2 .ko2-kpis.ko2-kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Sammlungen: Wert + Karten (Inhaber 26.10.2026) */
html.cp-v2 .ko2-kp { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); min-width: 0; }
html.cp-v2 .ko2-kp b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ob-ink); overflow-wrap: anywhere; }
html.cp-v2 .ko2-kp b.ko2-acc { color: var(--ob-violet-text); }
html.cp-v2 .ko2-kp small { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .ko2-up { color: var(--ob-green); }
html.cp-v2 .ko2-dn { color: var(--ob-coral); }
html.cp-v2[data-theme="light"] .ko2-up { color: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] .ko2-dn { color: var(--ob-coral-ink); }
/* Spiel-Karten */
html.cp-v2 .ko2-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ob-s-3); }
html.cp-v2 .ko2-game { display: grid; gap: 10px; align-content: start; padding: 14px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); min-width: 0; }
html.cp-v2 .ko2-game-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
html.cp-v2 .ko2-game-a { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); }
html.cp-v2 .ko2-game-a > * { flex: 1 1 auto; }
html.cp-v2 .ko2-gempty { display: grid; justify-items: center; gap: 6px; padding: 12px; text-align: center; border: 1px dashed var(--ob-line-2); border-radius: var(--ob-r-sm); color: var(--ob-dim); }
html.cp-v2 .ko2-gempty p { margin: 0; font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .ko2-gi { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--ob-r-sm); background: rgb(var(--ob-violet-rgb) / 0.14); color: var(--ob-violet-text); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 800; }
html.cp-v2 .ko2-gi.rb { background: rgb(var(--ob-aqua-rgb) / 0.14); color: var(--ob-aqua); }
html.cp-v2[data-theme="light"] .ko2-gi.rb { color: var(--ob-aqua-ink); }
html.cp-v2 .ko2-gi.op { background: rgb(var(--ob-amber-rgb) / 0.14); color: var(--ob-amber); }
html.cp-v2[data-theme="light"] .ko2-gi.op { color: var(--ob-amber-ink); }
html.cp-v2 .ko2-cover { flex: none; width: 28px; height: 36px; border-radius: var(--ob-r-xs); background: var(--c); box-shadow: inset 5px 0 0 rgb(var(--ob-black-rgb) / 0.2); }
/* Zeilen, Fortschritt */
html.cp-v2 .ko2-list { display: grid; gap: var(--ob-s-2); }
html.cp-v2 .ko2-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); color: var(--ob-ink); text-decoration: none; min-width: 0; }
html.cp-v2 a.ko2-row:hover { border-color: rgb(var(--ob-violet-rgb) / 0.45); }
html.cp-v2 .ko2-row > .ob-icon { flex: none; color: var(--ob-dim); width: var(--ob-icon-sm); height: var(--ob-icon-sm); }
html.cp-v2 .ko2-row-m { flex: 1; min-width: 0; display: grid; gap: 2px; }
html.cp-v2 .ko2-row-m b { font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .ko2-row-m small { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .ko2-row-v { flex: none; font-size: var(--ob-fs-md); font-weight: 800; color: var(--ob-ink); white-space: nowrap; }
html.cp-v2 .ko2-prog { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); color: var(--ob-ink); text-decoration: none; font-size: var(--ob-fs-sm); }
html.cp-v2 a.ko2-prog:hover { border-color: rgb(var(--ob-violet-rgb) / 0.45); }
html.cp-v2 .ko2-prog-h { display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
html.cp-v2 .ko2-prog-h > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .ko2-prog-h i { font-style: normal; color: var(--ob-dim); }
html.cp-v2 .ko2-bar { height: 6px; border-radius: var(--ob-r-pill); background: var(--ob-line); overflow: hidden; }
html.cp-v2 .ko2-bar i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--ob-violet); }
html.cp-v2[data-theme="light"] .ko2-bar i { background: var(--ob-violet-ink); }
html.cp-v2 .ko2-group { display: grid; gap: var(--ob-s-3); }
html.cp-v2 .ko2-group + .ko2-group { padding-top: var(--ob-s-4); border-top: 1px solid var(--ob-line); }
html.cp-v2 .ko2-group-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
html.cp-v2 .ko2-group-h b { font-size: var(--ob-fs-base); font-weight: 800; color: var(--ob-ink); }
html.cp-v2 .ko2-group-h .ko2-mono { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
/* Schnellzugriff */
html.cp-v2 .ko2-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ob-s-3); }
html.cp-v2 .ko2-qa { display: grid; gap: 4px; align-content: start; justify-items: start; min-height: var(--ob-tap); padding: 14px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-field); color: var(--ob-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color var(--ob-dur-1) var(--ob-ease-out), background var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .ko2-qa:hover { border-color: rgb(var(--ob-violet-rgb) / 0.45); background: var(--ob-hover); }
html.cp-v2 .ko2-qa .ob-icon { width: var(--ob-icon); height: var(--ob-icon); color: var(--ob-violet-text); margin-bottom: 4px; }
html.cp-v2 .ko2-qa b { font-size: var(--ob-fs-md); font-weight: 650; }
html.cp-v2 .ko2-qa small { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
/* Einstellungs-Gruppen (eigene Zeilen + umgehaengte .account-pref aus dem Konto-Fenster) */
html.cp-v2 .ko2-sgroup { border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); overflow: hidden; }
html.cp-v2 .ko2-sgroup[hidden], html.cp-v2 .ko2-sub[hidden] { display: none; }
html.cp-v2 :is(.ko2-srow, .ko2-sgroup .account-pref) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 56px; margin: 0; padding: 8px 14px; color: var(--ob-ink); font-size: var(--ob-fs-md); text-decoration: none; }
html.cp-v2 .ko2-sgroup :is(.ko2-srow, .account-pref) + :is(.ko2-srow, .account-pref), html.cp-v2 .ko2-sgroup .account-prefs + .ko2-srow { border-top: 1px solid var(--ob-line); }
html.cp-v2 .ko2-sgroup .account-prefs { display: block; margin: 0; padding: 0; border: 0; background: none; }
html.cp-v2 .ko2-sgroup .account-pref-label { margin: 0; font-family: inherit; font-size: var(--ob-fs-md); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ob-ink); }
html.cp-v2 .ko2-sgroup .account-pref-hint { flex-basis: 100%; margin: 0; font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .ko2-sv { min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ob-mute); font-size: var(--ob-fs-sm); }
html.cp-v2 a.ko2-srow:hover { background: var(--ob-hover); }
html.cp-v2 a.ko2-srow > .ob-icon { color: var(--ob-dim); }
/* Segmente (eigene + Region/Waehrung/Sprache-Tabs aus dem Konto-Fenster) */
html.cp-v2 :is(.ko2-seg, .ko2-sgroup .account-pref-tabs) { display: inline-flex; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 3px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: var(--ob-field); }
html.cp-v2 :is(.ko2-seg button, .ko2-sgroup .account-pref-tabs .trigger-type-btn) { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ob-tap-min); padding: 0 12px; border: 0 !important; border-radius: var(--ob-r-pill); background: transparent !important; box-shadow: none !important; color: var(--ob-mute) !important; font: inherit; font-size: var(--ob-fs-sm); font-weight: 650; cursor: pointer; white-space: nowrap; }
html.cp-v2 :is(.ko2-seg button[aria-pressed="true"], .ko2-sgroup .account-pref-tabs .trigger-type-btn.active) { background: var(--ob-accent-btn) !important; color: #fff !important; }
/* Wochen-Mail, Passkeys */
html.cp-v2 .ko2-sgroup .account-digest-opt { display: flex; align-items: flex-start; gap: 10px; flex-basis: 100%; font-size: var(--ob-fs-sm); color: var(--ob-ink); cursor: pointer; }
html.cp-v2 .ko2-sgroup .account-digest-opt input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ob-violet); }
html.cp-v2 .ko2-sgroup .pk-card { display: grid; gap: 10px; justify-content: stretch; }
html.cp-v2 .ko2-sgroup .pk-badge { display: none; }
html.cp-v2 .ko2-sgroup :is(.pk-title) { font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-ink); }
html.cp-v2 .ko2-sgroup :is(.pk-hint) { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
/* Gefahrenzone */
html.cp-v2 .ko2-danger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid rgb(var(--ob-coral-rgb) / 0.35); border-radius: var(--ob-r-md); }
html.cp-v2 .ko2-danger b { display: block; font-size: var(--ob-fs-md); color: var(--ob-ink); }
html.cp-v2 .ko2-danger small { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .ko2-danger .account-delete-block { margin: 0; padding: 0; border: 0; text-align: right; }
html.cp-v2 .ko2-danger #deleteAccountBtn, html.cp-v2 .ko2-danger #deleteAccountConfirmBtn { display: inline-flex; align-items: center; min-height: var(--ob-tap-min); padding: 0 14px; border: 1px solid rgb(var(--ob-coral-rgb) / 0.45) !important; border-radius: var(--ob-r-sm); background: transparent !important; color: var(--ob-coral) !important; font: inherit; font-size: var(--ob-fs-sm); font-weight: 650; text-decoration: none; cursor: pointer; }
html.cp-v2[data-theme="light"] .ko2-danger :is(#deleteAccountBtn, #deleteAccountConfirmBtn) { color: var(--ob-coral-ink) !important; }
html.cp-v2 .ko2-danger #deleteAccountConfirm p { font-size: var(--ob-fs-xs) !important; color: var(--ob-mute) !important; }
/* Alarme + Wunschliste: eigene Ueberschrift der Fenster-Spalte entfaellt, Zeilen sind schon v2 */
html.cp-v2 .ko2-pb > .account-col { display: grid; gap: var(--ob-s-3); margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
html.cp-v2 .ko2-pb > .account-col > .site-menu-section-label { display: none; }
html.cp-v2 .ko2-pb #alertsEmptyMsg, html.cp-v2 .ko2-pb #wishlistEmptyMsg { font-size: var(--ob-fs-sm) !important; color: var(--ob-mute) !important; margin: 0 !important; }
html.cp-v2 .ko2-pb #showAlertFormBtn { justify-self: start; display: inline-flex; align-items: center; min-height: var(--ob-tap); padding: 0 18px; border: 0; border-radius: var(--ob-r-sm); background: var(--ob-accent-btn); color: #fff; font: inherit; font-size: var(--ob-fs-md); font-weight: 800; cursor: pointer; }
html.cp-v2 .wl2-row .al2-b { color: inherit; text-decoration: none; }
html.cp-v2 .wl2-row .wl2-p { font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; color: var(--ob-ink); }
html.cp-v2 .account-wishlist-section #wishlistCountryTabs .trigger-type-icon:not(:has(.table-flag-icon)) { display: none; }
/* Handy */
@media (max-width: 899px) {
  html.cp-v2 .ko2 { gap: var(--ob-s-4); padding-block: var(--ob-s-3) var(--ob-s-7); }
  html.cp-v2 .ko2-av { width: 48px; height: 48px; font-size: var(--ob-fs-base); }
  html.cp-v2 .ko2-hm h1 { font-size: var(--ob-fs-lg); }
  html.cp-v2 .ko2-out { width: var(--ob-tap); padding: 0; }
  html.cp-v2 .ko2-out span { display: none; }
  html.cp-v2 .ko2-cols { grid-template-columns: minmax(0, 1fr); gap: var(--ob-s-4); }
  html.cp-v2 .ko2-side { position: static; display: block; }
  html.cp-v2 .ko2-ql { display: none; }
  html.cp-v2 .ko2-nav { position: static; display: flex; gap: 4px; padding: 0; overflow-x: auto; border: 0; border-bottom: 1px solid var(--ob-line); border-radius: 0; background: none; scrollbar-width: none; overscroll-behavior-x: contain; }
  html.cp-v2 .ko2-nav::-webkit-scrollbar { display: none; }
  html.cp-v2 .ko2-nl { flex: none; gap: 6px; min-height: var(--ob-tap); padding: 0 10px; border-radius: 0; font-size: var(--ob-fs-sm); }
  html.cp-v2 .ko2-nl .ob-icon { display: none; }
  html.cp-v2 .ko2-nl[aria-current] { background: none; box-shadow: inset 0 -2px 0 var(--ob-violet); }
  html.cp-v2 .ko2-ph h2 { font-size: var(--ob-fs-lg); }
  html.cp-v2 .ko2-kpis, html.cp-v2 .ko2-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ob-s-2); }
  html.cp-v2 .ko2-kp { padding: 10px 12px; }
  html.cp-v2 .ko2-games { grid-template-columns: minmax(0, 1fr); }
  html.cp-v2 .ko2-sgroup .account-pref-tabs { max-width: 100%; overflow-x: auto; }
}
/* Konto hell: theme-light.css faerbt alle Links blau und gibt dem Passkey-Kasten eine eigene Flaeche */
html.cp-v2[data-theme="light"] .ko2 :is(.ko2-row, .ko2-prog, .ko2-qa, .ko2-btn2, .ko2-srow) { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .ko2 .ko2-nl { color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .ko2 .ko2-nl[aria-current], html.cp-v2[data-theme="light"] .ko2 .ko2-nl:hover { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .ko2 a.cx2-btn { color: #fff !important; }
html.cp-v2 .ko2-sgroup .pk-card { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html.cp-v2 .ko2-sgroup .pk-card + .account-pref, html.cp-v2 .ko2-sgroup .account-pref + .pk-card { border-top: 1px solid var(--ob-line) !important; }
html.cp-v2 .ko2-sgroup .pk-title { font-family: inherit !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ob-ink) !important; }
html.cp-v2 .ko2-sgroup .pk-hint, html.cp-v2 .ko2-sgroup .pk-list { color: var(--ob-mute) !important; font-size: var(--ob-fs-xs) !important; }
html.cp-v2 .ko2-sgroup #passkeyAddBtn { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: var(--ob-tap-min); padding: 0 14px; border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-sm) !important; background: var(--ob-field) !important; color: var(--ob-ink) !important; font: inherit; font-size: var(--ob-fs-sm); font-weight: 650; width: auto !important; }
html.cp-v2 .ko2-sgroup .account-digest-opt span { font-weight: 400; }
/* Alarm-Formular in der Konto-Seite: Abschnitte als Karte, Labels wie Eyebrows, Speichern als Haupt-Button */
html.cp-v2 .ko2-pb #newAlertForm { gap: var(--ob-s-3); margin: 0 !important; padding: var(--ob-s-4); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .ko2-pb #newAlertForm .contact-group { display: grid; gap: 6px; margin: 0; }
html.cp-v2 .ko2-pb #newAlertForm .contact-label { margin: 0; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: var(--ob-track-caps); text-transform: uppercase; color: var(--ob-dim); font-weight: 650; }
html.cp-v2 .ko2-pb #createAlertBtn { min-height: var(--ob-tap); border: 0 !important; border-radius: var(--ob-r-sm) !important; background: var(--ob-accent-btn) !important; box-shadow: none !important; color: #fff !important; font-size: var(--ob-fs-md); font-weight: 800; }
html.cp-v2 .ko2-pb #createAlertBtn::after { content: none; }
html.cp-v2 .ko2-pb #cancelAlertEditBtn { min-height: var(--ob-tap-min); color: var(--ob-mute) !important; }
html.cp-v2 .ko2-pb #newAlertForm:not([style*="none"]) { display: grid !important; }

/* ==========================================================================
   v2 Binder 2 (21.10.2026, Pokémon + Riftbound gleich; Markup: data.js cpBd2*): Regal mit Vorschau-Kacheln,
   Seitenleiste mit Kennzahlen + Seiten-Miniaturen, aufgeschlagene Doppelseite ab 1100 px, Karten-Sheet.
   ========================================================================== */
html.cp-v2 .bd2-mono { font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; }
html.cp-v2 .bd2-acc { color: var(--ob-violet-text); }
html.cp-v2 .bd2-bar { display: block; height: 6px; border-radius: var(--ob-r-pill); background: var(--ob-line); overflow: hidden; }
html.cp-v2 .bd2-bar i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--ob-violet); }
html.cp-v2[data-theme="light"] .bd2-bar i { background: var(--ob-violet-ink); }
/* Regal */
html.cp-v2 .bd2-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--ob-s-4); }
html.cp-v2 .bd2-tile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; padding: 14px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); color: var(--ob-ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; transition: border-color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .bd2-tile:hover { border-color: rgb(var(--ob-violet-rgb) / 0.45); }
html.cp-v2 .bd2-prev { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px; padding: 10px 10px 10px 22px; border-radius: var(--ob-r-sm); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); overflow: hidden; }
html.cp-v2 .bd2-prev::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 12px; background: var(--c); }
html.cp-v2 .bd2-prev i { display: block; aspect-ratio: var(--ob-ratio-card); border-radius: var(--ob-r-xs); overflow: hidden; background: var(--ob-field); }
html.cp-v2 .bd2-prev i.e { border: 1px dashed var(--ob-line-2); background: transparent; }
html.cp-v2 .bd2-prev i.l { animation: cpBd2Pulse 1.2s ease-in-out infinite alternate; }
@keyframes cpBd2Pulse { from { opacity: 0.4; } to { opacity: 0.8; } }
html.cp-v2 .bd2-prev img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.cp-v2 .bd2-tm { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
html.cp-v2 .bd2-tm b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ob-fs-base); font-weight: 800; }
html.cp-v2 .bd2-tm .bd2-mono { flex: none; font-size: var(--ob-fs-md); font-weight: 800; }
html.cp-v2 .bd2-ts { display: flex; justify-content: space-between; gap: 8px; font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .bd2-ts > span { white-space: nowrap; }
html.cp-v2 .bd2-newtile { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 220px; padding: 14px; border: 1.5px dashed var(--ob-line-2); border-radius: var(--ob-r-md); background: none; color: var(--ob-mute); font: inherit; cursor: pointer; transition: border-color var(--ob-dur-1) var(--ob-ease-out), color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .bd2-newtile:hover { border-color: rgb(var(--ob-violet-rgb) / 0.55); color: var(--ob-ink); }
html.cp-v2 .bd2-newtile b { font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-ink); }
html.cp-v2 .bd2-newtile small { font-size: var(--ob-fs-xs); }
html.cp-v2 .bd2-nic { display: grid; place-items: center; width: var(--ob-tap); height: var(--ob-tap); border-radius: var(--ob-r-sm); border: 1px dashed var(--ob-line-2); color: var(--ob-violet-text); }
/* Binder-Seite */
html.cp-v2 .bd2-cols { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--ob-s-6); align-items: start; }
html.cp-v2 .bd2-side { position: sticky; top: 84px; display: grid; gap: var(--ob-s-4); padding: var(--ob-s-4); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); min-width: 0; }
html.cp-v2 .bd2-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
html.cp-v2 .bd2-id h1 { margin: 2px 0 0; font-size: var(--ob-fs-lg); font-weight: 800; line-height: var(--ob-lh-tight); overflow-wrap: anywhere; }
html.cp-v2 .bd2-cv { flex: none; width: 44px; height: 56px; border-radius: var(--ob-r-xs); background: var(--c); box-shadow: inset 6px 0 0 rgb(var(--ob-black-rgb) / 0.22); }
html.cp-v2 .bd2-cv.big { width: 52px; height: 66px; }
html.cp-v2 .bd2-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ob-s-2); }
html.cp-v2 .bd2-st { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); min-width: 0; }
html.cp-v2 .bd2-st small { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: var(--ob-track-caps); text-transform: uppercase; color: var(--ob-dim); }
html.cp-v2 .bd2-st > b { font-size: var(--ob-fs-base); font-weight: 800; color: var(--ob-ink); }
html.cp-v2 .bd2-st-w { grid-column: 1 / -1; }
html.cp-v2 .bd2-fill { display: flex; align-items: center; gap: 10px; }
html.cp-v2 .bd2-fill .bd2-bar { flex: 1; }
html.cp-v2 .bd2-fill b { font-size: var(--ob-fs-sm); font-weight: 800; }
html.cp-v2 .bd2-top { display: flex; align-items: center; gap: 10px; }
html.cp-v2 .bd2-top img { flex: none; width: 30px; aspect-ratio: var(--ob-ratio-card); border-radius: 3px; object-fit: cover; }
html.cp-v2 .bd2-top > span { display: grid; gap: 2px; min-width: 0; }
html.cp-v2 .bd2-tn { font-size: var(--ob-fs-sm); color: var(--ob-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .bd2-acts { display: flex; gap: var(--ob-s-2); }
html.cp-v2 .bd2-acts .cx2-btn { flex: 1; }
html.cp-v2 .bd2-pgs { display: grid; gap: var(--ob-s-2); }
html.cp-v2 .bd2-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
html.cp-v2 .bd2-mini { display: grid; gap: 3px; justify-items: center; padding: 0; border: 0; background: none; color: var(--ob-dim); font: inherit; cursor: pointer; min-height: var(--ob-tap-min); }
html.cp-v2 .bd2-mini > span { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 2px; width: 100%; padding: 4px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-xs); background: var(--ob-field); transition: border-color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .bd2-mini i { aspect-ratio: var(--ob-ratio-card); border-radius: 0; background: var(--ob-line); }
html.cp-v2 .bd2-mini i.f { background: var(--c); opacity: 0.85; }
html.cp-v2 .bd2-mini small { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); }
html.cp-v2 .bd2-mini.on > span { border-color: var(--ob-violet); box-shadow: 0 0 0 2px rgb(var(--ob-violet-rgb) / 0.25); }
html.cp-v2 .bd2-mini.on small { color: var(--ob-ink); }
html.cp-v2 .bd2-mini:hover > span { border-color: rgb(var(--ob-violet-rgb) / 0.55); }
html.cp-v2 .bd2-mini.add > span { display: grid; place-items: center; aspect-ratio: var(--ob-ratio-card); border-style: dashed; color: var(--ob-violet-text); }
html.cp-v2 .bd2-stage { display: grid; gap: var(--ob-s-3); min-width: 0; }
/* aufgeschlagenes Buch */
html.cp-v2 .bd2-book { display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); padding: 14px; border-radius: var(--ob-r-tile); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 16%, var(--ob-surface)); box-shadow: var(--ob-shadow-1); }
html.cp-v2 .bd2-book.one { grid-template-columns: minmax(0, 1fr); max-width: min(100%, calc(var(--cols, 3) * 170px + 60px)); }
html.cp-v2 .bd2 .bd2-book .bd2-pg { max-width: none; width: 100%; margin: 0; padding: 6px; gap: 8px; border: 0; border-radius: var(--ob-r-sm); background: transparent; box-shadow: none; }
html.cp-v2 .bd2-pg-end { opacity: 0.35; }
html.cp-v2 .bd2-rings { display: grid; align-content: space-evenly; justify-items: center; }
html.cp-v2 .bd2-rings i { width: 8px; height: 22px; border-radius: var(--ob-r-pill); border: 2px solid var(--ob-line-2); background: var(--ob-bg); }
html.cp-v2 .bd2-pnav { display: flex; align-items: center; justify-content: center; gap: var(--ob-s-3); }
html.cp-v2 .bd2-pl { display: grid; justify-items: center; gap: 6px; min-width: 120px; }
html.cp-v2 .bd2-pl .bd2-mono { font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .bd2-dots { display: flex; gap: 6px; }
html.cp-v2 .bd2-dots i { width: 6px; height: 6px; border-radius: var(--ob-r-pill); background: var(--ob-line-2); transition: width var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .bd2-dots i.on { width: 18px; background: var(--ob-violet); }
/* Karten-Sheet */
html.cp-v2 .bd2-ssheet .bd2-ss { display: grid; gap: var(--ob-s-3); }
html.cp-v2 .bd2-ss-h h2 { margin: 2px 0 0; font-size: var(--ob-fs-lg); font-weight: 800; color: var(--ob-ink); }
html.cp-v2 .bd2-ss-img { display: block; width: min(60%, 220px); margin: 0 auto; aspect-ratio: var(--ob-ratio-card); object-fit: contain; border-radius: var(--ob-r-sm); box-shadow: var(--ob-shadow-2); }
html.cp-v2 .bd2-ss-m { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .bd2-ss-m b { flex: none; font-size: var(--ob-fs-lg); font-weight: 800; color: var(--ob-ink); }
html.cp-v2 .bd2-chip { display: inline-block; padding: 1px 8px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-amber); }
html.cp-v2[data-theme="light"] .bd2-chip { color: var(--ob-amber-ink); }
html.cp-v2 .bd2-ss-a { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ob-s-2); }
html.cp-v2 .bd2-ss .ko2-btn2 { min-height: var(--ob-tap); }
html.cp-v2 .bd2-ss .bd2-rm { color: var(--ob-coral); border-color: rgb(var(--ob-coral-rgb) / 0.4); }
html.cp-v2[data-theme="light"] .bd2-ss .bd2-rm { color: var(--ob-coral-ink) !important; }
html.cp-v2[data-theme="light"] :is(.bd2-tile, .bd2-newtile, .bd2-mini) { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .bd2-ss .ko2-btn2 { color: var(--ob-ink); }
/* Handy / schmal */
@media (max-width: 899px) {
  html.cp-v2 .bd2-cols { grid-template-columns: minmax(0, 1fr); gap: var(--ob-s-4); }
  html.cp-v2 .bd2-side { position: static; padding: 0; border: 0; background: none; }
  html.cp-v2 .bd2-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.cp-v2 .bd2-stats .bd2-st-w { grid-column: auto; }
  html.cp-v2 .bd2-stats .bd2-fill .bd2-bar { display: none; }
  html.cp-v2 .bd2-stats .bd2-top { display: none; }
  html.cp-v2 .bd2-pgs { order: 9; }
  html.cp-v2 .bd2-minis { grid-template-columns: repeat(auto-fill, 52px); }
  html.cp-v2 .bd2-book { padding: 8px; }
  html.cp-v2 .bd2-book.one { max-width: none; }
  html.cp-v2 .bd2-pnav { justify-content: space-between; }
  html.cp-v2 .bd2-newtile { min-height: 120px; }
}
html.cp-v2 .bd2-book:not(.one) { max-width: min(100%, calc(var(--cols, 3) * 2 * 112px + 90px)); }
html.cp-v2 .bd2-book.one { max-width: min(100%, calc(var(--cols, 3) * 150px + 40px)); }
html.cp-v2 .bd2-stage { justify-items: center; }
html.cp-v2 .bd2-stage > * { width: 100%; }
html.cp-v2 .bd2-stage > .bd2-book, html.cp-v2 .bd2-stage > #bdPageHost { justify-self: center; }
html.cp-v2 #bdPageHost { display: grid; justify-items: center; }
@media (max-width: 899px) { html.cp-v2 .bd2-book.one { max-width: none; } }
/* Alarm-Formular: altes „▼“ der Auswahlknoepfe als Lucide-Chevron (Maske, Farbe ueber Token) */
html.cp-v2 :is(.alert-select-box, #rbAlertForm) .multiselect-btn > span:last-child > span:last-child, html.cp-v2 :is(.alert-select-box, #opAlertForm) .multiselect-btn > span:last-child > span:last-child { font-size: 0 !important; width: var(--ob-icon-sm); height: var(--ob-icon-sm); margin-left: 6px !important; background: var(--ob-mute); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Set-Guide (Pokémon): alter v1-Block „Najlepsze Okazje“ entfällt in v2 – die Seitenleiste verlinkt die Preisvergleiche (Riftbound hat ihn nicht) */
html.cp-v2 body:has(.gd2-main) section:has(> #best-deals-grid) { display: none !important; }
html.cp-v2 .ps2-zero { color: var(--ob-mute); }
/* Abgleich-Hinweis der virtuellen Sammlung zeigt nur noch den Fehler (simcoll.js drawNote) -> Fehlerfarbe statt Gruen (Styleguide: Fehler = Koralle) */
html.cp-v2 .ps-sync { color: var(--ob-coral); font-weight: 650; white-space: normal; }
html.cp-v2[data-theme="light"] .ps-sync { color: var(--ob-coral-ink); }

/* ===== Teilen-Dialog v2 (Pokémon + Riftbound gleich; Markup data.js cpShareV2): Popup ab 900 px, darunter Bottom-Sheet ===== */
html.cp-v2 #cxShareModal { position: fixed; inset: 0; z-index: var(--ob-z-sheet); display: grid; place-items: center; padding: var(--ob-s-4); background: var(--ob-backdrop); }
html.cp-v2 #cxShareModal .cx-share-dialog { position: relative; width: min(100%, var(--ob-pop-w-s)); max-height: 85dvh; overflow: auto; overscroll-behavior: contain; padding: var(--ob-s-5); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); background: var(--ob-pop); box-shadow: var(--ob-shadow-2); color: var(--ob-ink); animation: obRise var(--ob-dur-2) var(--ob-ease-out) both; }
html.cp-v2 #cxShareModal .cx-share-panel { margin: 0; padding: 0; max-width: none; border: 0; background: transparent; box-shadow: none; }
html.cp-v2 #cxShareModal .cx-share-x-btn { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: var(--ob-tap); height: var(--ob-tap); padding: 0; border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-mute); font-size: 0; cursor: pointer; }
html.cp-v2 #cxShareModal .cx-share-x-btn .ob-icon { width: var(--ob-icon); height: var(--ob-icon); }
html.cp-v2 #cxShareModal .cx-share-x-btn:hover { background: var(--ob-hover); color: var(--ob-ink); }
html.cp-v2 .sh2 { display: grid; gap: var(--ob-s-4); }
html.cp-v2 .sh2-head { display: flex; gap: 12px; align-items: flex-start; padding-right: 52px; }
html.cp-v2 .sh2-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--ob-r-sm); background: rgb(var(--ob-violet-rgb) / 0.14); color: var(--ob-violet-text); }
html.cp-v2 .sh2-head b { display: block; font-size: var(--ob-fs-base); font-weight: 800; color: var(--ob-ink); }
html.cp-v2 .sh2-head p { margin: 4px 0 0; font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .sh2-link { display: flex; gap: var(--ob-s-2); }
html.cp-v2 .sh2-link input { flex: 1; min-width: 0; min-height: var(--ob-tap); padding: 0 12px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-ink); font-family: var(--cp-font-mono); font-size: var(--ob-fs-sm); }
html.cp-v2 .sh2-main { width: 100%; }
html.cp-v2 .sh2 .cx-share-via { display: grid; gap: var(--ob-s-2); margin: 0; }
html.cp-v2 .sh2-chips { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); }
html.cp-v2 .sh2-chip { display: inline-flex; align-items: center; min-height: var(--ob-tap-min); padding: 0 14px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: var(--ob-field); color: var(--ob-ink); font: inherit; font-size: var(--ob-fs-sm); font-weight: 650; text-decoration: none; cursor: pointer; }
html.cp-v2 .sh2-chip:hover { border-color: rgb(var(--ob-violet-rgb) / 0.55); background: var(--ob-hover); }
html.cp-v2 .sh2-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--ob-s-2); padding-top: var(--ob-s-3); border-top: 1px solid var(--ob-line); }
html.cp-v2 .sh2-off { min-height: var(--ob-tap-min); padding: 0 6px; border: 0; background: none; color: var(--ob-coral); font: inherit; font-size: var(--ob-fs-sm); font-weight: 650; cursor: pointer; }
html.cp-v2[data-theme="light"] .sh2-off { color: var(--ob-coral-ink) !important; }
html.cp-v2[data-theme="light"] #cxShareModal :is(.sh2-chip, .ko2-btn2) { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] #cxShareModal .cx-share-dialog { background: var(--ob-pop) !important; }
html.cp-v2 #cxShareModal .cx-share-scope { margin: 0; }
@media (max-width: 899px) {
  html.cp-v2 #cxShareModal { place-items: end stretch; padding: 0; }
  html.cp-v2 #cxShareModal .cx-share-dialog { width: 100%; max-height: var(--ob-sheet-max); border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; border-bottom: 0; padding-bottom: calc(var(--ob-s-5) + env(safe-area-inset-bottom, 0px)); animation-name: cpSheetUp; animation-timing-function: var(--ob-ease-drawer); }
}
@keyframes cpSheetUp { from { transform: translateY(100%); } to { transform: none; } }
html.cp-v2[data-theme="light"] #cxShareModal .cx-share-panel { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* ===== Login (Konto-Fenster abgemeldet) + Hinweis-/Bestätigungsfenster in v2 (21.10.2026) ===== */
html.cp-v2 #accountModalBackdrop .modal-title > span:first-child:not([data-i18n]),
html.cp-v2 #customConfirmBackdrop .modal-title > span:first-child:not([data-i18n]),
html.cp-v2 #customAlertIcon { display: none; }
html.cp-v2 :is(#accountModalBackdrop, #customAlertBackdrop, #customConfirmBackdrop) .modal-close-btn { display: grid; place-items: center; width: var(--ob-tap); height: var(--ob-tap); padding: 0; font-size: var(--ob-fs-base); }
html.cp-v2 :is(#customAlertBackdrop, #customConfirmBackdrop) .modal-content { text-align: left !important; }
html.cp-v2 :is(#customAlertText, #customConfirmText) { color: var(--ob-ink) !important; font-size: var(--ob-fs-md) !important; }
html.cp-v2 :is(#customAlertOkBtn, #customConfirmOkBtn) { min-height: var(--ob-tap); padding: 0 18px !important; border: 0 !important; border-radius: var(--ob-r-sm) !important; background: var(--ob-accent-btn) !important; box-shadow: none !important; color: #fff !important; font-size: var(--ob-fs-md) !important; font-weight: 800; }
html.cp-v2 #customConfirmCancelBtn { min-height: var(--ob-tap); border-radius: var(--ob-r-sm) !important; background: var(--ob-field) !important; border: 1px solid var(--ob-line-2) !important; color: var(--ob-ink) !important; font-size: var(--ob-fs-md) !important; font-weight: 650; }
html.cp-v2 :is(#customAlertOkBtn, #customConfirmOkBtn)::after { content: none; }
html.cp-v2 #accountLoggedOutView { display: grid; gap: var(--ob-s-3); }
html.cp-v2 #accountLoggedOutView > p { margin: 0 !important; font-size: var(--ob-fs-sm) !important; color: var(--ob-mute) !important; }
html.cp-v2 #accountLoggedOutView .contact-label { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: var(--ob-track-caps); text-transform: uppercase; color: var(--ob-dim); font-weight: 650; }
html.cp-v2 #magicLinkEmail { min-height: var(--ob-tap); border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-sm) !important; background: var(--ob-field) !important; color: var(--ob-ink) !important; font-size: var(--ob-fs-input); }
html.cp-v2 #magicLinkSendBtn { width: 100%; min-height: var(--ob-tap); border: 0 !important; border-radius: var(--ob-r-sm) !important; background: var(--ob-accent-btn) !important; box-shadow: none !important; color: #fff !important; font-size: var(--ob-fs-md); font-weight: 800; }
html.cp-v2 #magicLinkSendBtn::after { content: none; }
html.cp-v2 #accountLoggedOutView .or-divider { display: flex; align-items: center; gap: 10px; margin: var(--ob-s-1) 0 !important; border: 0; color: var(--ob-dim); font-size: var(--ob-fs-xs); text-transform: none; letter-spacing: 0; }
html.cp-v2 #accountLoggedOutView .or-divider::before, html.cp-v2 #accountLoggedOutView .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--ob-line); border: 0; }
html.cp-v2 #accountLoggedOutView .or-divider span { padding: 0; background: none !important; border: 0 !important; color: var(--ob-dim); }
html.cp-v2 #accountLoggedOutView .btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: var(--ob-tap); border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-sm) !important; background: var(--ob-field) !important; box-shadow: none !important; color: var(--ob-ink) !important; font-size: var(--ob-fs-md); font-weight: 650; }
html.cp-v2 #accountLoggedOutView .btn-google:hover { background: var(--ob-hover) !important; }
html.cp-v2 #passkeyLoginBtn > span[aria-hidden] { display: none; }
html.cp-v2[data-theme="light"] :is(#accountModalBackdrop, #customAlertBackdrop, #customConfirmBackdrop) .modal-header { background: transparent !important; border-color: var(--ob-line) !important; }
html.cp-v2[data-theme="light"] #accountLoggedOutView .or-divider span { color: var(--ob-dim) !important; background: none !important; }
html.cp-v2[data-theme="light"] #accountLoggedOutView .or-divider::before, html.cp-v2[data-theme="light"] #accountLoggedOutView .or-divider::after { border: 0 !important; background: var(--ob-line) !important; height: 1px !important; }
html.cp-v2[data-theme="light"] #accountLoggedOutView .btn-google { color: var(--ob-ink) !important; }
/* Menü: Design-Umschalter wie Sprache/Währung (.cp-seg), auch im hellen Theme */
html.cp-v2 #cpSetTheme .theme-switch-opts { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-sm) !important; background: var(--ob-field) !important; }
html.cp-v2 #cpSetTheme .theme-switch-opts button { min-height: 36px; padding: 0 10px; border: 0 !important; border-radius: var(--ob-r-xs) !important; background: transparent !important; box-shadow: none !important; color: var(--ob-mute) !important; font-size: var(--ob-fs-xs); font-weight: 650; }
html.cp-v2 #cpSetTheme .theme-switch-opts button.active { background: var(--ob-hover) !important; color: var(--ob-ink) !important; box-shadow: inset 0 0 0 1px var(--ob-line-2) !important; }
/* Auswahlfelder (cp-select.js) in v2: Pille wie .cx2-sel, Pfeil in --ob-mute */
html.cp-v2 .cp-sel-btn { min-height: var(--ob-tap-min); padding: 0 12px; border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-pill) !important; background: var(--ob-field) !important; color: var(--ob-ink) !important; font-size: var(--ob-fs-sm); }
html.cp-v2 .cp-sel-btn::after { border-color: var(--ob-mute) !important; }
html.cp-v2 .cp-sel-btn:hover, html.cp-v2 .cp-sel.open .cp-sel-btn { border-color: rgb(var(--ob-violet-rgb) / 0.55) !important; }
html.cp-v2 .cp-sel-btn.is-placeholder { color: var(--ob-mute) !important; }
/* Zähler im aktiven Segment: Kontrast */
html.cp-v2 .cx2-seg .cx-tab.active .cx-tab-count { color: var(--ob-mute); }
html.cp-v2 .cp-sel-opt { border-radius: var(--ob-r-xs) !important; color: var(--ob-ink) !important; font-size: var(--ob-fs-sm); }
html.cp-v2 .cp-sel-opt:hover, html.cp-v2 .cp-sel-opt:focus-visible { background: var(--ob-hover) !important; }
html.cp-v2 .cp-sel-opt.active { background: rgb(var(--ob-violet-rgb) / 0.14) !important; color: var(--ob-violet-text) !important; }
html.cp-v2 .cp-sel-list { background: var(--ob-pop) !important; border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-md) !important; box-shadow: var(--ob-shadow-2) !important; z-index: var(--ob-z-dropdown); }
/* Deal-Radar: ohne größten Sturz (0 Treffer / lädt) keine leere Bild-Kachel und kein leeres Badge */
html.cp-v2 .dr2-top[aria-disabled="true"] { grid-template-columns: minmax(0, 1fr); }
html.cp-v2 .dr2-top[aria-disabled="true"] :is(.dr2-top-th, .dr2-top-p) { display: none; }
/* Alle Fenster (Konto, Kontakt, Region, Info, Verlauf, Hinweis, Bestätigen) in v2: ab 900 px Popup, darunter Bottom-Sheet; Schließen 44 px */
html.cp-v2 .modal-content { border-radius: var(--ob-r-md); }
html.cp-v2 .modal-close-btn { display: grid; place-items: center; width: var(--ob-tap); height: var(--ob-tap); padding: 0; border-radius: var(--ob-r-sm); font-size: var(--ob-fs-base); }
html.cp-v2 .modal-title { font-size: var(--ob-fs-lg); font-weight: 800; }
html.cp-v2 #regionModalBackdrop .modal-title > span:first-child { display: none; }
@media (max-width: 899px) {
  html.cp-v2 .modal-backdrop { align-items: flex-end !important; justify-content: stretch; padding: 0 !important; }
  html.cp-v2 .modal-backdrop .modal-content { width: 100%; max-width: none !important; max-height: var(--ob-sheet-max); border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0 !important; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: cpSheetUp var(--ob-dur-2) var(--ob-ease-drawer) both; }
  html.cp-v2 .modal-backdrop .modal-content::before { content: ''; flex: 0 0 auto; display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: var(--ob-r-pill); background: var(--ob-line-2); }
}
/* Konto: Wochen-Mail als Umschalter (Ein/Aus), Passkey-Hinweis normal, „Neuer Alarm“ auch hell als Haupt-Button, Leerzustände als Kasten */
html.cp-v2 .ko2-sgroup .account-digest-opt input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 44px; height: 26px; margin: 0; border-radius: var(--ob-r-pill); background: var(--ob-line-2); cursor: pointer; transition: background var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .ko2-sgroup .account-digest-opt input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--ob-r-pill); background: #fff; box-shadow: var(--ob-shadow-1); transition: transform var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .ko2-sgroup .account-digest-opt input:checked { background: var(--ob-accent-btn); }
html.cp-v2 .ko2-sgroup .account-digest-opt input:checked::before { transform: translateX(18px); }
html.cp-v2 .ko2-sgroup .account-digest-opt { align-items: center; }
html.cp-v2 .ko2-sgroup .pk-hint { font-weight: 500 !important; }
html.cp-v2 .ko2-pb #showAlertFormBtn { background: var(--ob-accent-btn) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; }
html.cp-v2 .ko2-pb :is(#alertsEmptyMsg, #wishlistEmptyMsg):not([style*="none"]) { padding: var(--ob-s-6) var(--ob-s-4); border: 1px dashed var(--ob-line-2); border-radius: var(--ob-r-md); text-align: center; }
/* PWA-Banner in v2: Karte auf --ob-pop, ohne Emoji, Installieren als Haupt-Button, Schließen 44 px */
html.cp-v2 #pwa-install-banner { background: var(--ob-pop) !important; border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-md) !important; box-shadow: var(--ob-shadow-2) !important; color: var(--ob-ink); }
html.cp-v2 #pwa-install-banner .pwa-content { gap: var(--ob-s-3); }
html.cp-v2 #pwa-install-banner .pwa-content > span:first-child { display: none; }
html.cp-v2 #pwa-title { color: var(--ob-ink) !important; font-size: var(--ob-fs-md) !important; font-weight: 800; }
html.cp-v2 #pwa-desc { color: var(--ob-mute) !important; font-size: var(--ob-fs-xs) !important; }
html.cp-v2 #pwa-install-btn { min-height: var(--ob-tap); padding: 0 16px !important; border: 0 !important; border-radius: var(--ob-r-sm) !important; background: var(--ob-accent-btn) !important; box-shadow: none !important; color: #fff !important; font-size: var(--ob-fs-sm) !important; font-weight: 800; }
html.cp-v2 #pwa-install-btn::after { content: none; }
html.cp-v2 #pwa-close-btn { display: grid; place-items: center; width: var(--ob-tap); height: var(--ob-tap); margin: 0 !important; border-radius: var(--ob-r-sm); color: var(--ob-mute) !important; font-size: var(--ob-fs-base) !important; }

/* ===== Audit 3 (21.10.2026): Startseite, Widgets, Glocke ===== */
/* Startseite: v1-„margin: 0 auto“ der Widgets nicht im v2-Raster (sonst seitlicher Scroll und schmale, zentrierte Kästen) */
html.cp-v2.hm2-home #pageShell > :is(.home-quick, .hs, .hc, .hp, .hp-wish) { margin-inline: 0; width: auto; max-width: none; }
/* Anpassen-Modus (Desktop): Platz für das Panel rechts nur im Inhalt, nicht in der fixierten Kopfzeile */
@media (min-width: 900px) {
  html.cp-v2.cp-hl-edit body { padding-right: 0 !important; }
  html.cp-v2.cp-hl-edit #pageShell { margin-right: 344px; }
}
/* Widget-Haupt-Buttons: deckende Fläche mit ausreichendem Kontrast (auch Riftbound hell) */
html.cp-v2 .hb-cta, html.cp-v2[data-theme="light"] .hb :is(.hb-cta, a.hb-cta) { background: var(--ob-accent-btn) !important; border: 0 !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 10px 26px -14px rgb(var(--ob-violet-rgb) / 0.6) !important; color: #fff !important; font-weight: 800; }
html.cp-v2 .hb-cta:hover { border-color: transparent !important; box-shadow: 0 14px 32px -12px rgb(var(--ob-violet-rgb) / 0.7) !important; }
/* Wunschliste-Widget: Zähler als kleine Pille */
html.cp-v2 .hp-wish .hw-count { display: inline-grid; width: auto; }
/* Schriftstärken nur 500/650/800 */
html.cp-v2 :is(.hm2-eb, .hm2-chip, .hm2-sc-n, .cx2-btn) { font-weight: 800; }
html.cp-v2 :is(.hm2-tl, .hm2-sc-g) { font-weight: 650; }
/* Glocke hell: Zähler und Zeit mit genug Kontrast */
html.cp-v2[data-theme="light"] :is(.nv-seg em, .nv-w) { color: var(--ob-mute); }
/* Tippflächen Handy */
@media (pointer: coarse) {
  html.cp-v2 :is(.hm2-sc-g, .nv-seg button) { min-height: var(--ob-tap); }
  html.cp-v2 :is(.ps2-reveal-all, .ps2-share, [data-ps-revealall]) { min-height: var(--ob-tap); }
}
html.cp-v2 .cs-ov { z-index: var(--ob-z-sheet); }

/* ===== Info & Shops, Rechtliches, Kontakt in v2 (22.10.2026) ===== */
html.cp-v2 :is(#infoModalBackdrop, #disclaimerModalBackdrop, #contactModalBackdrop) .modal-title > span:first-child { display: none; }
html.cp-v2 :is(#infoModalBackdrop, #disclaimerModalBackdrop, #contactModalBackdrop) .modal-header { background: transparent !important; border-color: var(--ob-line) !important; }
/* Tabs wie .v2-tab: Unterstrich, ohne Fläche, auf dem Handy waagerecht scrollbar */
html.cp-v2 :is(#infoModalBackdrop, #disclaimerModalBackdrop) .info-tabs { display: flex; gap: var(--ob-s-5); padding: 0 var(--ob-gutter); overflow-x: auto; scrollbar-width: none; background: transparent !important; border-bottom: 1px solid var(--ob-line); }
html.cp-v2 :is(#infoModalBackdrop, #disclaimerModalBackdrop) .info-tabs::-webkit-scrollbar { display: none; }
html.cp-v2 :is(#infoModalBackdrop, #disclaimerModalBackdrop) .info-tab-btn { flex: none; min-height: var(--ob-tap); margin-bottom: -1px; padding: 0 !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--ob-mute) !important; font-size: var(--ob-fs-md); font-weight: 650; white-space: nowrap; }
html.cp-v2 :is(#infoModalBackdrop, #disclaimerModalBackdrop) .info-tab-btn.active { color: var(--ob-ink) !important; border-bottom-color: var(--ob-violet) !important; }
@media (hover: hover) { html.cp-v2 :is(#infoModalBackdrop, #disclaimerModalBackdrop) .info-tab-btn:hover:not(.active) { color: var(--ob-ink) !important; } }
/* UVP-Karten */
html.cp-v2 #infoModalBackdrop .info-uvp-head, html.cp-v2 #contactModalBackdrop .contact-label { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: var(--ob-track-caps); text-transform: uppercase; color: var(--ob-dim) !important; font-weight: 650; }
html.cp-v2 #infoModalBackdrop :is(.info-uvp-card, .shop-card) { background: var(--ob-field) !important; border: 1px solid var(--ob-line) !important; border-radius: var(--ob-r-md); box-shadow: none !important; }
html.cp-v2 #infoModalBackdrop .info-uvp-top b { color: var(--ob-ink); }
html.cp-v2 #infoModalBackdrop .info-uvp-line span { color: var(--ob-mute); font-weight: 600; }
html.cp-v2 #infoModalBackdrop .info-uvp-line em { color: var(--ob-ink); font-weight: 600; }
html.cp-v2 #infoModalBackdrop .badge-price { padding: 2px 8px; border-radius: var(--ob-r-xs); background: rgb(var(--ob-violet-rgb) / 0.14) !important; color: var(--ob-violet-text) !important; font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }
/* Shops: Länder-Gruppen, Karten, Status als Tag */
html.cp-v2 #infoModalBackdrop .shop-grp { background: transparent !important; border: 1px solid var(--ob-line) !important; border-radius: var(--ob-r-md); }
html.cp-v2 #infoModalBackdrop .shop-grp summary { min-height: var(--ob-tap); color: var(--ob-ink) !important; font-weight: 800; }
html.cp-v2 #infoModalBackdrop .shop-grp summary::after { color: var(--ob-mute) !important; }
html.cp-v2 #infoModalBackdrop .shop-cnt { padding: 2px 8px; border-radius: var(--ob-r-pill); background: var(--ob-field) !important; border: 1px solid var(--ob-line); color: var(--ob-mute) !important; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 650; }
html.cp-v2 #infoModalBackdrop .shop-name { color: var(--ob-ink) !important; font-weight: 700; text-decoration: none; }
html.cp-v2 #infoModalBackdrop .shop-name span { color: var(--ob-mute) !important; }
@media (hover: hover) { html.cp-v2 #infoModalBackdrop a.shop-name:hover { color: var(--ob-violet-text) !important; } }
html.cp-v2 #infoModalBackdrop .shop-st { padding: 2px 8px; border: 0 !important; border-radius: var(--ob-r-xs); font-size: var(--ob-fs-xs); font-weight: 650; }
html.cp-v2 #infoModalBackdrop .shop-st.ok { background: rgb(var(--ob-green-rgb) / 0.14) !important; color: var(--ob-green) !important; }
html.cp-v2 #infoModalBackdrop .shop-st.empty { background: rgb(var(--ob-coral-rgb) / 0.12) !important; color: var(--ob-coral) !important; }
html.cp-v2 #infoModalBackdrop .shop-st.blocked { background: rgb(var(--ob-amber-rgb) / 0.14) !important; color: var(--ob-amber) !important; }
html.cp-v2 #infoModalBackdrop .shop-st.load { background: var(--ob-field) !important; color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] #infoModalBackdrop .shop-st.ok { color: var(--ob-green-ink) !important; }
html.cp-v2[data-theme="light"] #infoModalBackdrop .shop-st.empty { color: var(--ob-coral-ink) !important; }
html.cp-v2[data-theme="light"] #infoModalBackdrop .shop-st.blocked { color: var(--ob-amber-ink) !important; }
/* Suchfelder */
html.cp-v2 :is(#infoModalBackdrop .shop-search, #disclaimerModalBackdrop .legal-search) { min-height: var(--ob-tap); border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-sm) !important; background: var(--ob-field) !important; color: var(--ob-ink) !important; font-size: var(--ob-fs-input); }
/* Rechtliches: Abschnitte als Akkordeon-Zeilen, Nummer als Mono-Tag in Violett */
html.cp-v2 #disclaimerModalBackdrop .info-tab-content { color: var(--ob-mute) !important; }
html.cp-v2 #disclaimerModalBackdrop .legal-title { color: var(--ob-ink) !important; font-size: var(--ob-fs-base); font-weight: 800; }
html.cp-v2 #disclaimerModalBackdrop :is(.legal-note, .legal-plain) { background: transparent !important; color: var(--ob-mute) !important; font-size: var(--ob-fs-xs); }
html.cp-v2 #disclaimerModalBackdrop .legal-tool { min-height: var(--ob-tap-min); border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-sm) !important; background: var(--ob-field) !important; color: var(--ob-ink) !important; font-size: var(--ob-fs-sm); font-weight: 650; }
html.cp-v2 #disclaimerModalBackdrop .legal-sec { background: var(--ob-field) !important; border: 1px solid var(--ob-line) !important; border-radius: var(--ob-r-md); }
html.cp-v2 #disclaimerModalBackdrop .legal-sec[open] { border-color: rgb(var(--ob-violet-rgb) / 0.45) !important; background: rgb(var(--ob-violet-rgb) / 0.05) !important; }
html.cp-v2 #disclaimerModalBackdrop .legal-sec summary { min-height: var(--ob-tap); color: var(--ob-ink) !important; }
html.cp-v2 #disclaimerModalBackdrop .legal-sec summary::after { color: var(--ob-mute) !important; }
html.cp-v2 #disclaimerModalBackdrop .legal-sec[open] summary::after { color: var(--ob-violet-text) !important; }
html.cp-v2 #disclaimerModalBackdrop .legal-num { border-radius: var(--ob-r-xs); background: rgb(var(--ob-violet-rgb) / 0.14) !important; color: var(--ob-violet-text) !important; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); }
html.cp-v2 #disclaimerModalBackdrop .legal-body { color: var(--ob-mute) !important; font-size: var(--ob-fs-sm); }
html.cp-v2 #disclaimerModalBackdrop .legal-body a { color: var(--ob-violet-text) !important; }
/* Kontakt: Kategorien als Text-Chips (ohne Emoji), Hinweis, Rechenfrage, Senden = Haupt-Button */
html.cp-v2 #contactCats .cc-row { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); }
html.cp-v2 #contactCats .cc-ic { display: none; }
html.cp-v2 #contactCats button.cc-chip { flex: none; min-height: var(--ob-tap-min); padding: 0 14px; border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-pill) !important; background: var(--ob-field) !important; box-shadow: none !important; color: var(--ob-mute) !important; font-size: var(--ob-fs-sm); font-weight: 650; }
html.cp-v2 #contactCats button.cc-chip span, html.cp-v2[data-theme] #contactCats button.cc-chip.on span { color: inherit !important; }
html.cp-v2 #contactCats button.cc-chip.on, html.cp-v2 #contactCats button.cc-chip.on:hover { background: rgb(var(--ob-violet-rgb) / 0.14) !important; border-color: var(--ob-violet) !important; color: var(--ob-ink) !important; }
@media (hover: hover) { html.cp-v2 #contactCats button.cc-chip:hover:not(.on) { border-color: rgb(var(--ob-violet-rgb) / 0.55) !important; color: var(--ob-ink) !important; } }
html.cp-v2 #contactCats .cc-hint { color: var(--ob-dim) !important; font-size: var(--ob-fs-xs); }
html.cp-v2 #contactModalBackdrop :is(#contactSubject, #contactContent, #contactEmail, #captchaAnswer) { min-height: var(--ob-tap); border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-sm) !important; background: var(--ob-field) !important; color: var(--ob-ink) !important; font-size: var(--ob-fs-input); }
html.cp-v2 #captchaQuestion { color: var(--ob-ink) !important; font-family: var(--cp-font-mono); font-size: var(--ob-fs-md) !important; font-weight: 650 !important; }
html.cp-v2 #contactSendBtn { width: 100%; min-height: var(--ob-tap); border: 0 !important; border-radius: var(--ob-r-sm) !important; background: var(--ob-accent-btn) !important; box-shadow: none !important; color: #fff !important; font-size: var(--ob-fs-md); font-weight: 800; transform: none !important; }
html.cp-v2 #contactSendBtn::after { content: none; }

/* ===== Schrift nie unter 12 px auf allen v2-Seiten (22.10.2026, nach Slop-Check): Tokens --ob-fs-2xs/xs = 0,75 rem; hier feste Größen, die keine Tokens nutzen ===== */
html.cp-v2 :is(.cp-kbd, .home-new-badge, .home-hero-eyebrow, .cp-live-pill .home-hero-eyebrow, .seo-h1) { font-size: var(--ob-fs-xs); }
html.cp-v2 .home-seo-content { font-size: 0.8125rem; }
html.cp-v2 .home-seo-content :is(p, summary, b, div, a) { font-size: 0.8125rem; }
html.cp-v2 .home-seo-content .home-highlight-card :is(b, div, span:not(.home-new-badge)) { font-size: 0.8125rem; }
html.cp-v2 :is(.cookie-chip, .cx-chip, .cx-series-head span, .cx-set-meta, .cx-source-opt small, .cx-mini-toggles .cx-source-opt small, .cx-chart-hint) { font-size: var(--ob-fs-xs); }

/* ===== Persönliche Startseiten-Widgets im Widget-Standard (22.10.2026): kein Glow, Eyebrow Mono ohne Icon, flache Buttons, Kennzahlen ohne Emoji-Icon, Diagramm auf Feld ===== */
html.cp-v2 .cp-hl-sec :is(.cx-hero-glow, .cx-stat-icon) { display: none; }
html.cp-v2 .cp-hl-sec .setguide-eyebrow { margin: 0 0 var(--ob-s-1); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ob-violet-text); text-shadow: none; }
html.cp-v2 .cp-hl-sec .hc-simtag { color: var(--ob-mute); }
html.cp-v2 .cp-hl-sec .hc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--ob-s-3); margin: var(--ob-s-4) 0; }
html.cp-v2 .cp-hl-sec .hc-stats .cx-stat { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding: var(--ob-s-3) 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 .cp-hl-sec .hc-stats .cx-stat > div { display: flex; flex-direction: column; gap: 2px; }
html.cp-v2 .cp-hl-sec .hc-stats .cx-stat-value { font-size: var(--ob-fs-lg); font-weight: 700; color: var(--ob-ink); }
html.cp-v2 .cp-hl-sec .hc-stats .cx-stat-label { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ob-mute); }
html.cp-v2 .cp-hl-sec .hc-chart { margin: 0 0 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 .cp-hl-sec .hc-top-btns { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); margin: var(--ob-s-4) 0 0; }
html.cp-v2 #pageShell .cp-hl-sec :is(a.cx-scan-btn, a.cx-share-big) { display: inline-flex; align-items: center; gap: var(--ob-s-2); padding: 0 var(--ob-s-4); border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-sm); background: var(--ob-field) !important; color: var(--ob-ink) !important; font-size: var(--ob-fs-md); font-weight: 600; box-shadow: none !important; overflow: visible; }
html.cp-v2 #pageShell .cp-hl-sec :is(a.cx-scan-btn, a.cx-share-big)::after { display: none; }
html.cp-v2 #pageShell .cp-hl-sec :is(a.cx-scan-btn, a.cx-share-big):hover { transform: none; filter: none; background: var(--ob-hover) !important; box-shadow: none; }
html.cp-v2 #pageShell .cp-hl-sec :is(a.hc-cta, a.hb-cta.hc-cta) { display: inline-flex; align-items: center; gap: var(--ob-s-2); margin-top: var(--ob-s-2); min-height: var(--ob-tap); padding: 0 var(--ob-s-4); border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-sm); background: var(--ob-field) !important; color: var(--ob-ink) !important; font-size: var(--ob-fs-md); font-weight: 600; box-shadow: none !important; }
html.cp-v2 #pageShell .cp-hl-sec a.hc-cta:hover { transform: none; filter: none; background: var(--ob-hover) !important; }
html.cp-v2 .cp-hl-sec a.hc-cta .ob-icon { width: var(--ob-icon-sm); height: var(--ob-icon-sm); }
html.cp-v2[data-theme="light"] .cp-hl-sec .setguide-eyebrow { color: var(--ob-violet-ink); }
html.cp-v2[data-theme="light"] #pageShell .cp-hl-sec :is(a.cx-scan-btn, a.cx-share-big) { background: var(--ob-field) !important; color: var(--ob-ink) !important; border: 1px solid var(--ob-line-2) !important; box-shadow: none !important; }
html.cp-v2[data-theme="light"] .cp-hl-sec :is(.hc-stats .cx-stat, .hc-chart) { background: var(--ob-surface); }
html.cp-v2 .cp-hl-sec :is(.sd-empty-copy, .hc-empty, .sd-empty) { max-width: none; text-align: left; }
html.cp-v2 .cp-hl-sec .sd-empty-card { display: block; margin-top: var(--ob-s-3); padding: var(--ob-s-4); border: 1px dashed var(--ob-line-2); border-radius: var(--ob-r-md); background: var(--ob-field); }
html.cp-v2 .cp-hl-sec :is(.sd-empty-art, .sd-empty-feats li > span) { display: none; }
html.cp-v2 .cp-hl-sec .sd-empty-feats li { padding: 4px 10px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-pill); background: transparent; color: var(--ob-mute); font-size: var(--ob-fs-xs); }
html.cp-v2 .cp-hl-sec .sd-empty-copy h3 { color: var(--ob-ink); font-size: var(--ob-fs-base); }
html.cp-v2 .cp-hl-sec .hc-pick-grid > .hc-empty { grid-column: 1 / -1; margin: 0; }
html.cp-v2 .cp-hl-sec .hs-btn { box-shadow: none; }
html.cp-v2 .cp-hl-sec .home-quick-tile > span { display: inline-grid; place-items: center; color: var(--ob-violet-text); }
html.cp-v2 .cp-hl-sec .home-quick-tile > span .ob-icon { width: 20px; height: 20px; }
html.cp-v2[data-theme="light"] .cp-hl-sec .home-quick-tile > span { color: var(--ob-violet-ink); }
html.cp-v2[data-theme="light"] .cp-hl-sec .setguide-eyebrow { display: block; padding: 0; background: none; border-radius: 0; color: var(--ob-violet-ink) !important; letter-spacing: 0.14em; }
html.cp-v2[data-theme="light"] #pageShell .cp-hl-sec .hs-btn { background: var(--ob-accent-btn) !important; color: #fff !important; }
html.cp-v2 .cp-hl-sec .hs-set > span { font-size: var(--ob-fs-xs); }
html.cp-v2 .cp-hl-sec .hc-whead .hc-simsub { font-size: var(--ob-fs-sm); }
html.cp-v2 .cp-hl-sec :is(.cp-head-l b, .cx-chart-change, .cx-chart-axis span, .hc-pick small, .hc-simsub, .hb-sub, .hs-chip, .hs-set > span) { font-size: var(--ob-fs-xs); }

/* Sammlungs-Widget Startseite = Aufbau der Sammlungs-Übersicht: Kennzahlen links, Diagramm rechts (Handy untereinander) */
html.cp-v2 .cp-hl-sec .hc-ovsum { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: var(--ob-s-3); align-items: start; margin: var(--ob-s-4) 0; }
html.cp-v2 .cp-hl-sec .hc-ovsum > * { min-width: 0; }
html.cp-v2 .cp-hl-sec .hc-ovsum .hc-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ob-s-2); margin: 0; }
html.cp-v2 .cp-hl-sec .hc-ovsum .hc-stats .cx-stat > div { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px var(--ob-s-3); }
html.cp-v2 .cp-hl-sec .hc-ovsum .hc-stats .cx-stat { flex-direction: row; }
html.cp-v2 .cp-hl-sec .hc-ovsum .hc-stats .cx-stat > div { width: 100%; }
html.cp-v2 .cp-hl-sec .hc-ovsum .hc-chart { margin: 0; }
@media (max-width: 899px) { html.cp-v2 .cp-hl-sec .hc-ovsum { grid-template-columns: minmax(0, 1fr); } }
/* Handy: Kennzahlen im Sealed- und Karten-Rahmen nebeneinander (3 Spalten); Sealed: Produkte, Investiert, Wert, darunter Gewinn/Verlust über die volle Breite; Sealed-Produkte 2 pro Reihe; Karten: 3 Kacheln in einer Reihe */
@media (max-width: 899px) {
  html.cp-v2 .cp-hl-sec :is(.hc-sealw, .hc-cardsw) .hc-ovsum .hc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.cp-v2 .cp-hl-sec :is(.hc-sealw, .hc-cardsw) .hc-ovsum .hc-stats .cx-stat { padding: var(--ob-s-2); min-width: 0; }
  html.cp-v2 .cp-hl-sec :is(.hc-sealw, .hc-cardsw) .hc-ovsum .hc-stats .cx-stat > div { display: block; }
  html.cp-v2 .cp-hl-sec :is(.hc-sealw, .hc-cardsw) .hc-ovsum .hc-stats .cx-stat-value { margin: 0; white-space: normal; overflow-wrap: anywhere; font-size: var(--ob-fs-sm); }
  html.cp-v2 .cp-hl-sec :is(.hc-sealw, .hc-cardsw) .hc-ovsum .hc-stats .cx-stat-label { letter-spacing: 0.04em; overflow-wrap: anywhere; hyphens: auto; }
  html.cp-v2 .cp-hl-sec .hc-sealw .hc-ovsum .hc-stats .hc-st-items { order: 1; }
  html.cp-v2 .cp-hl-sec .hc-sealw .hc-ovsum .hc-stats .hc-st-invested { order: 2; }
  html.cp-v2 .cp-hl-sec .hc-sealw .hc-ovsum .hc-stats .hc-st-value { order: 3; }
  html.cp-v2 .cp-hl-sec .hc-sealw .hc-ovsum .hc-stats .hc-st-gain { order: 4; grid-column: 1 / -1; }
  html.cp-v2 .cp-hl-sec.hc-pg .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ob-s-3); }
}

/* Verlauf neben den 3 Kennzahlen (Sammlungs-Übersicht + Startseiten-Widget): nie höher als die Kennzahl-Spalte, Zeitraum-Schalter oben rechts im Kopf */
html.cp-v2 :is(.cx2-ovsum .v2-pp-chart, .hc-ovsum .hc-chart) .cx-chart-head { flex-wrap: nowrap; align-items: flex-start; margin-bottom: 0; }
html.cp-v2 :is(.cx2-ovsum .v2-pp-chart, .hc-ovsum .hc-chart) .cp-head-l { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
html.cp-v2 :is(.cx2-ovsum .v2-pp-chart, .hc-ovsum .hc-chart) .cp-head-r { width: auto; flex: none; margin-left: auto; justify-content: flex-end; }
@media (min-width: 900px) {
  html.cp-v2 .cx2-ovsum, html.cp-v2 .cp-hl-sec .hc-ovsum { align-items: stretch; }
  html.cp-v2 :is(.cx2-ovsum .v2-pp-chart, .hc-ovsum .hc-chart) { contain: size; display: flex; flex-direction: column; overflow: hidden; padding: var(--ob-s-3) var(--ob-s-4); }
  html.cp-v2 :is(.cx2-ovsum .v2-pp-chart, .hc-ovsum .hc-chart) .cx-chart-svg { flex: 1 1 0; min-height: 40px; height: auto; margin-top: var(--ob-s-1); }
  html.cp-v2 :is(.cx2-ovsum .v2-pp-chart, .hc-ovsum .hc-chart) .cx-chart-hint { flex: 1; }
}
@media (max-width: 899px) { html.cp-v2 :is(.cx2-ovsum .v2-pp-chart, .hc-ovsum .hc-chart) .cx-chart-head { flex-wrap: wrap; } html.cp-v2 :is(.cx2-ovsum .v2-pp-chart, .hc-ovsum .hc-chart) .cp-head-r { margin-left: 0; } }

/* ===== Set-im-Detail-Widget (22.10.2026): Titel "Sets + Setname", Logo rechts, Kennzahlen links, Verlauf rechts – wie Sammlungs-Widget ===== */
html.cp-v2 .cp-hl-sec .hc-setw-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ob-s-4); }
html.cp-v2 .cp-hl-sec .hc-setw-head { min-width: 0; }
html.cp-v2 .cp-hl-sec .hc-setw-logo { flex: none; width: clamp(88px, 14vw, 132px); display: flex; justify-content: flex-end; }
html.cp-v2 .cp-hl-sec .hc-setw-logo img { display: block; width: 100%; height: auto; max-height: 72px; object-fit: contain; }
html.cp-v2 .cp-hl-sec .hc-prog .cx-stat-value { font-family: var(--cp-font-mono); }
html.cp-v2 .cp-hl-sec .hc-prog .cx2-bar { flex: 0 0 100%; width: 100%; margin: var(--ob-s-1) 0 0; }
html.cp-v2 .cp-hl-sec .hc-setw-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-s-3); }
html.cp-v2 .cp-hl-sec .hc-setw-foot .hc-change { border: 0; background: none; padding: var(--ob-s-2) var(--ob-s-1); color: var(--ob-mute); font: inherit; font-size: var(--ob-fs-sm); font-weight: 600; cursor: pointer; }
html.cp-v2 .cp-hl-sec .hc-setw-foot .hc-change:hover { color: var(--ob-ink); }
html.cp-v2 .cp-hl-sec .hc-setw .hc-sealed:empty { display: none; }
html.cp-v2[data-theme="light"] .cp-hl-sec .hc-setw-foot .hc-change { color: var(--ob-mute) !important; background: none !important; }
html.cp-v2[data-theme="light"] .cp-hl-sec .hc-setw-foot .hc-change:hover { color: var(--ob-ink) !important; }
html.cp-v2 .cp-hl-sec .hc-change.hc-change-ico { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 28px; height: 28px; padding: 0; margin-left: var(--ob-s-1); border: 0 !important; border-radius: var(--ob-r-sm); background: none !important; color: var(--ob-mute) !important; cursor: pointer; }
html.cp-v2 .cp-hl-sec .hc-change.hc-change-ico:hover { color: var(--ob-ink) !important; background: var(--ob-hover) !important; }
html.cp-v2 .cp-hl-sec .hc-change.hc-change-ico .ob-icon { width: 16px; height: 16px; }
html.cp-v2 .cp-hl-sec .hc-change.hc-change-ico { position: relative; }
html.cp-v2 .cp-hl-sec .hc-change.hc-change-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
/* Lade-Anzeige im Widget: dezentes Icon statt „…“ */
html.cp-v2 .cp-hl-sec .hc-ld { display: inline-flex; align-items: center; color: var(--ob-dim); }
html.cp-v2 .cp-hl-sec .hc-ld .ob-icon { width: 16px; height: 16px; animation: hcSpin 0.9s linear infinite; }
@keyframes hcSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html.cp-v2 .cp-hl-sec .hc-ld .ob-icon { animation: none; } }

/* ===== Verlaufsdiagramm (22.10.2026): keine Dauer-Punkte, Endpunkt + Hover-Punkt, Tooltip als Pop-up-Karte, Hilfslinie nur vom Punkt nach unten ===== */
html.cp-v2 .cx-chart-dots { display: none; }
html.cp-v2 .cx-cross { stroke: var(--ob-line-2) !important; stroke-width: 1; stroke-dasharray: 3 4; }
html.cp-v2 .cx-cross-dot { display: none !important; }
html.cp-v2 .cx-endpt, html.cp-v2 .cx-hovpt { position: absolute; z-index: 4; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: var(--ob-aqua); transform: translate(-50%, -50%); box-shadow: 0 0 0 5px rgb(var(--ob-aqua-rgb) / 0.22); pointer-events: none; }
html.cp-v2 .cx-hovpt { width: 9px; height: 9px; box-shadow: 0 0 0 6px rgb(var(--ob-aqua-rgb) / 0.26); }
html.cp-v2 .cx-tip { padding: var(--ob-s-2) var(--ob-s-3) !important; border-radius: var(--ob-r-sm) !important; background: var(--ob-pop) !important; border: 1px solid var(--ob-line-2) !important; box-shadow: var(--ob-shadow-2) !important; gap: 0 !important; }
html.cp-v2 .cx-tip span { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 600; color: var(--ob-mute) !important; }
html.cp-v2 .cx-tip b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-md) !important; font-weight: 800; color: var(--ob-ink) !important; }

/* Verlaufsdiagramm, Fortsetzung: Produktseite (Preisverlauf) und Sealed (Wert/Investiert) im selben Stil */
html.cp-v2 .pp-chart-svg .pp-end { fill: var(--ob-aqua); }
html.cp-v2 .pp-chart-svg .pp-end-ring { fill: rgb(var(--ob-aqua-rgb) / 0.22); }
html.cp-v2 .pp-cross { stroke: var(--ob-line-2) !important; stroke-dasharray: 3 4; }
html.cp-v2 .pp-cross-dot { fill: var(--ob-aqua) !important; stroke: rgb(var(--ob-aqua-rgb) / 0.26) !important; stroke-width: 6; paint-order: stroke; }
html.cp-v2 .pp-tip, html.cp-v2 .sv-chart-tip { padding: var(--ob-s-2) var(--ob-s-3) !important; border-radius: var(--ob-r-sm) !important; background: var(--ob-pop) !important; border: 1px solid var(--ob-line-2) !important; box-shadow: var(--ob-shadow-2) !important; color: var(--ob-mute) !important; font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs) !important; z-index: 5; }
html.cp-v2 .pp-tip b, html.cp-v2 .sv-chart-tip .val { font-family: var(--cp-font-mono); font-size: var(--ob-fs-md); font-weight: 800; color: var(--ob-ink) !important; }
html.cp-v2 .sv-chart-tip .inv { color: var(--ob-mute) !important; font-weight: 700; }
html.cp-v2 .sv-chart-tip .val::before, html.cp-v2 .sv-chart-tip .inv::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--ob-aqua); }
html.cp-v2 .sv-chart-tip .inv::before { background: var(--ob-dim); }
html.cp-v2 .sv-chart-tip { gap: var(--ob-s-3) !important; }
html.cp-v2 .sv-chart-legend { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); }
html.cp-v2 .sv-chart-legend .inv { color: var(--ob-mute); }
html.cp-v2 .sv-chart-legend .val { color: var(--ob-aqua); }
html.cp-v2[data-theme="light"] .sv-chart-legend .val { color: var(--ob-aqua-ink); }
html.cp-v2 .sv-chart-svg .sv-l-val { stroke: var(--ob-aqua); }
html.cp-v2 .sv-chart-svg .sv-l-inv { stroke: var(--ob-dim); }
html.cp-v2 .sv-chart-svg .sv-cross { stroke: var(--ob-line-2) !important; stroke-dasharray: 3 4; }
html.cp-v2 .sv-chart-svg :is(.sv-end, .sv-hov).val { fill: var(--ob-aqua); stroke: rgb(var(--ob-aqua-rgb) / 0.26); stroke-width: 6; paint-order: stroke; }
html.cp-v2 .sv-chart-svg :is(.sv-end, .sv-hov).inv { fill: var(--ob-dim); stroke: var(--ob-line-2); stroke-width: 4; paint-order: stroke; }
html.cp-v2 .sv-chart-svg .sv-tag rect { fill: var(--ob-bg); stroke: var(--ob-line-2); }
html.cp-v2 .sv-chart-svg .sv-tag.val rect { fill: rgb(var(--ob-aqua-rgb) / 0.16); stroke: rgb(var(--ob-aqua-rgb) / 0.5); }
html.cp-v2 .sv-chart-svg .sv-tag text { fill: var(--ob-mute); font-family: var(--cp-font-mono); font-size: 12px; font-weight: 700; }
html.cp-v2 .sv-chart-svg .sv-tag.val text { fill: var(--ob-ink); }

/* Sealed-Überblick im Startseiten-Widget: Aufbau wie Set-Widget (Kennzahlen links, Verlauf rechts) */
html.cp-v2 .cp-hl-sec .hc-sealw .hc-chart .sv-chart-body { display: contents; }
html.cp-v2 .cp-hl-sec .hc-sealw .sv-chart-wrap { flex: 1 1 auto; min-height: 0; margin-top: var(--ob-s-1); }
html.cp-v2 .cp-hl-sec .hc-sealw .sv-chart-svg { height: auto; }
html.cp-v2 .cp-hl-sec .hc-sealw .sv-chart-legend { margin: var(--ob-s-1) 0 0; }
html.cp-v2 .cp-hl-sec .hc-sealw .cx-stat-value .sd-stat-note { display: block; font-family: inherit; font-size: var(--ob-fs-xs); font-weight: 500; color: var(--ob-mute); }
html.cp-v2 .cp-hl-sec .hc-sealw .cx-stat-value .is-up { color: var(--ob-green); }
html.cp-v2 .cp-hl-sec .hc-sealw .cx-stat-value .is-down { color: var(--ob-coral); }
html.cp-v2[data-theme="light"] .cp-hl-sec .hc-sealw .cx-stat-value .is-up { color: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] .cp-hl-sec .hc-sealw .cx-stat-value .is-down { color: var(--ob-coral-ink); }
@media (max-width: 899px) { html.cp-v2 .cp-hl-sec .hc-sealw .hc-chart .sv-chart-body { display: block; } }
html.cp-v2 .v2-pp-chart .sv-chart-svg path.sv-l-inv { stroke: var(--ob-dim); }
html.cp-v2 .v2-pp-chart .sv-chart-svg circle.sv-end.inv, html.cp-v2 .v2-pp-chart .sv-chart-svg circle.sv-hov.inv { fill: var(--ob-dim); stroke: var(--ob-line-2); }
html.cp-v2 .v2-pp-chart .sv-chart-svg circle.sv-end.val, html.cp-v2 .v2-pp-chart .sv-chart-svg circle.sv-hov.val { fill: var(--ob-aqua); stroke: rgb(var(--ob-aqua-rgb) / 0.26); }

/* Sealed-Verlauf: „Investiert“ in Violett (statt Grau), Etiketten getönt */
html.cp-v2 .v2-pp-chart .sv-chart-svg path.sv-l-inv { stroke: var(--ob-violet); }
html.cp-v2 .v2-pp-chart .sv-chart-svg circle.sv-end.inv, html.cp-v2 .v2-pp-chart .sv-chart-svg circle.sv-hov.inv { fill: var(--ob-violet); stroke: rgb(var(--ob-violet-rgb) / 0.26); }
html.cp-v2 .sv-chart-svg .sv-tag.inv rect { fill: rgb(var(--ob-violet-rgb) / 0.16); stroke: rgb(var(--ob-violet-rgb) / 0.5); }
html.cp-v2 .sv-chart-svg .sv-tag.inv text { fill: var(--ob-ink); }
html.cp-v2 .sv-chart-legend .inv { color: var(--ob-violet-text); }
html.cp-v2 .sv-chart-tip .inv::before { background: var(--ob-violet); }
html.cp-v2 .sv-chart-tip .inv { color: var(--ob-violet-text) !important; }

/* Sealed im Set (Widget): rechts die eigenen Produkte statt Verlauf (es gibt keinen Verlauf je Set) */
html.cp-v2 .cp-hl-sec .hc-sealw .hc-sealprods { padding: var(--ob-s-3); overflow: auto; max-height: 420px; }
html.cp-v2 .cp-hl-sec .hc-sealw .hc-sealprods .sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--ob-s-3); }
html.cp-v2 .cp-hl-sec .hc-sealw .hc-sealprods .sd-empty { padding: var(--ob-s-5); color: var(--ob-mute); }
@media (min-width: 900px) { html.cp-v2 .cp-hl-sec .hc-ovsum:has(.hc-sealprods) .hc-chart { contain: none; display: block; } }

/* Moje sety (Startseite): Kacheln wie auf der Sammlungs-Seite (.cx2 .cx-set-tile) */
html.cp-v2 .cp-hl-sec .hc-mysets { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; margin-top: var(--ob-s-3); }
html.cp-v2 .cp-hl-sec .hc-mysets > * { animation: none; }
html.cp-v2 .cp-hl-sec .hc-mysets .cx-set-tile { border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); box-shadow: none; }
html.cp-v2 .cp-hl-sec .hc-mysets .cx-set-tile:hover { transform: none; border-color: rgb(var(--ob-violet-rgb) / 0.45); box-shadow: none; }
html.cp-v2 .cp-hl-sec .hc-mysets .cx-set-tile.complete { border-color: rgb(var(--ob-green-rgb) / 0.6); box-shadow: none; }
html.cp-v2 .cp-hl-sec .hc-mysets .cx-set-logo-fallback.on { display: block; }
html.cp-v2 .cp-hl-sec .hc-mysets .cx-progress { height: 6px; border-radius: 3px; background: var(--ob-line); }
html.cp-v2 .cp-hl-sec .hc-mysets .cx-progress-bar { background: var(--ob-violet); border-radius: 3px; min-width: 2px; }
html.cp-v2 .cp-hl-sec .hc-mysets .cx-set-progress-meta { font-family: var(--cp-font-mono); }
html.cp-v2[data-theme="light"] .cp-hl-sec .hc-mysets .cx-set-tile { background: var(--ob-surface) !important; border-color: var(--ob-line) !important; box-shadow: none !important; border-radius: var(--ob-r-md) !important; }
html.cp-v2[data-theme="light"] .cp-hl-sec .hc-mysets .cx-set-tile.complete { border-color: rgb(var(--ob-green-rgb) / 0.6) !important; }
html.cp-v2[data-theme="light"] .cp-hl-sec .hc-mysets .cx-set-art { background: none !important; }
html.cp-v2[data-theme="light"] .cp-hl-sec .hc-mysets :is(.cx-set-name, .cx-set-logo-fallback) { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .cp-hl-sec .hc-mysets .cx-set-meta { color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .cp-hl-sec .hc-mysets .cx-set-info { border-top-color: var(--ob-line) !important; }
@media (max-width: 600px) { html.cp-v2 .cp-hl-sec .hc-mysets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* Produkte wybranego setu (Startseite): Tabs und Angebotszeilen wie auf der Suche/Produktseite */
html.cp-v2 .hc-prodw .hp-tabs { margin: var(--ob-s-3) 0 var(--ob-s-3); }
html.cp-v2 .hc-prodw button.v2-tab { padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; cursor: pointer; box-shadow: none; font: inherit; font-size: var(--ob-fs-md); font-weight: 650; }
html.cp-v2 .hc-prodw button.v2-tab.on { color: var(--ob-ink); border-bottom-color: var(--ob-violet); }
html.cp-v2 .hc-prodw button.v2-tab:hover { color: var(--ob-ink); }
html.cp-v2 .hc-prodw .hp-rows { display: grid; gap: var(--ob-s-2); }
html.cp-v2 .hc-prodw .hp-foot { margin-top: var(--ob-s-4); }
html.cp-v2[data-theme="light"] .hc-prodw :is(.v2-or-t, button.v2-tab.on, .v2-or-shop) { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .hc-prodw button.v2-tab { color: var(--ob-mute) !important; }

/* ==========================================================================
   v2 Suche: Auswahlseiten (Set, Shops) und Scrollbar (22.10.2026, Inhaber)
   Jeder Chip (Set, Shops, Filter) oeffnet eine eigene Seite im Suchfenster; die Listen sind Zeilen mit Logo und Haken.
   ========================================================================== */
html.cp-v2 .cp-sp2 .cp-sp2-lvl[data-k="set"] :is(.cp-sp2-box-shop, .cp-sp-fbody) { display: none !important; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl[data-k="shop"] .cp-sp2-box-set { display: none !important; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl[data-k="shop"] .cp-sp-fbody > :not(.cp-sp2-box-shop) { display: none !important; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl[data-k="filter"] :is(.cp-sp2-box-set, .cp-sp2-box-shop) { display: none !important; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl:is([data-k="set"], [data-k="shop"]) .cp-sp2-lvl-b { overflow: hidden; padding-bottom: 0; gap: 0; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl[data-k="shop"] .cp-sp-fbody { flex: 1; min-height: 0; flex-direction: column; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-box { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 !important; position: relative; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-btn { display: none !important; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-menu { display: flex !important; flex-direction: column; flex: 1; min-height: 0; position: static !important; width: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent !important; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-header { display: flex; align-items: center; gap: 8px; padding: 0 0 10px; border: 0; background: transparent; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-header input { flex: 1; min-width: 0; height: var(--ob-tap); padding: 0 12px; font-size: var(--ob-fs-input); background: var(--ob-field) !important; border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-sm); color: var(--ob-ink); }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-header input:focus { border-color: rgb(var(--ob-violet-rgb) / 0.85) !important; box-shadow: 0 0 0 3px rgb(var(--ob-violet-rgb) / 0.18); outline: none; }
html.cp-v2 .cp-sp2 .cp-sp2-box-set .multiselect-clear-btn { display: none; }
html.cp-v2 .cp-sp2 .cp-sp2-box-shop .multiselect-clear-btn { flex: none; min-height: var(--ob-tap); padding: 0 6px; border: 0; background: none; color: var(--ob-violet-text); font-size: var(--ob-fs-sm); font-weight: 650; white-space: nowrap; cursor: pointer; }
html.cp-v2 .cp-sp2 .cp-sp2-sel { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; }
html.cp-v2 .cp-sp2 .cp-sp2-sel .cp-sp2-chip { padding-right: 8px; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 2px; align-content: start; padding: 0 0 20px; border: 0; max-height: none; background: transparent !important; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent); }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-item { display: flex; align-items: center !important; gap: 12px; min-height: var(--ob-tap); padding: 6px 8px; border: 0; border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-ink); cursor: pointer; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-item:has(input:checked) { background: rgb(var(--ob-violet-rgb) / 0.14); box-shadow: inset 0 0 0 1px rgb(var(--ob-violet-rgb) / 0.35); }
html.cp-v2 .cp-sp2 .cp-sp2-box-shop .multiselect-item:has(input:checked) { background: transparent; box-shadow: none; }
html.cp-v2 .cp-sp2 .cp-sp2-box-shop .multiselect-menu > div:last-child:not(.multiselect-list) { flex: none; padding: 8px 0 0 !important; border: 0 !important; }
html.cp-v2 .cp-sp2 .cp-sp2-box-shop .shop-missing-btn { min-height: var(--ob-tap); border-radius: var(--ob-r-sm) !important; background: var(--ob-field) !important; color: var(--ob-violet-text) !important; font-size: var(--ob-fs-sm); font-weight: 650; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-item .cp-sp2-logo:empty { display: none; }
html.cp-v2[data-theme="light"] .cp-sp2 .cp-sp2-lvl-b .multiselect-item { border: 0 !important; }
html.cp-v2[data-theme="light"] .cp-sp2 .cp-sp2-box-shop .multiselect-clear-btn { background: none !important; border: 0 !important; color: var(--ob-violet-text) !important; }
html.cp-v2[data-theme="light"] .cp-sp2 .cp-sp2-lvl-b .multiselect-item:hover { background: var(--ob-hover) !important; }
html.cp-v2[data-theme="light"] .cp-sp2 .cp-sp2-lvl-b .multiselect-item:has(input:checked):hover { background: rgb(var(--ob-violet-rgb) / 0.2) !important; }
html.cp-v2[data-theme="light"] .cp-sp2 .cp-sp2-box-shop .multiselect-item:has(input:checked):hover { background: var(--ob-hover) !important; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-item .cp-sp2-logo { order: 1; flex: none; width: 64px; max-width: 64px; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-item > div { order: 2; flex: 1; min-width: 0; margin-left: 0 !important; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-item > span:not(.cp-sp2-logo) { order: 2; flex: 1; min-width: 0; font-size: var(--ob-fs-base) !important; font-weight: 650 !important; color: var(--ob-ink) !important; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-item > div > span:first-child { font-size: var(--ob-fs-base) !important; font-weight: 650 !important; color: var(--ob-ink) !important; line-height: 1.25 !important; overflow-wrap: anywhere; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-item > div > span:last-child { font-size: var(--ob-fs-xs) !important; font-weight: 500 !important; color: var(--ob-mute) !important; letter-spacing: 0 !important; margin-top: 2px !important; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-item input[type="checkbox"] { -webkit-appearance: none; appearance: none; order: 3; flex: none; width: 22px; height: 22px; margin: 0 !important; border-radius: 50%; border: 1.5px solid var(--ob-line-2); background: transparent; cursor: pointer; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-item input[type="checkbox"]:checked { border-color: var(--ob-violet); background: var(--ob-violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-item input[type="checkbox"]:focus-visible { outline: 2px solid rgb(var(--ob-violet-rgb) / 0.7); outline-offset: 2px; }
@media (hover: hover) { html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-item:hover { background: var(--ob-hover); } html.cp-v2 .cp-sp2 .cp-sp2-lvl-b .multiselect-item:has(input:checked):hover { background: rgb(var(--ob-violet-rgb) / 0.2); } }

/* Scrollbar (global, nur v2): neutral nach Token, schmal, rund, ohne Pfeile */
html.cp-v2 { scrollbar-width: auto; scrollbar-color: auto; }
html.cp-v2 ::-webkit-scrollbar { width: 10px; height: 10px; }
html.cp-v2 ::-webkit-scrollbar-track, html.cp-v2[data-theme="light"] ::-webkit-scrollbar-track { background: transparent; }
html.cp-v2 ::-webkit-scrollbar-thumb { background: var(--ob-line-2); border: 2px solid transparent; background-clip: padding-box; border-radius: var(--ob-r-pill); }
html.cp-v2 ::-webkit-scrollbar-thumb:hover { background: var(--ob-dim); border: 2px solid transparent; background-clip: padding-box; }
html.cp-v2 ::-webkit-scrollbar-button { display: none; }
html.cp-v2 ::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { html.cp-v2 * { scrollbar-width: thin; scrollbar-color: var(--ob-line-2) transparent; } }
html.cp-v2 :is(.cx-chips, .cp-hl-tray) { scrollbar-color: var(--ob-line-2) transparent; }

/* ==========================================================================
   v2 Widget "Popularne serie" (je Serie): Set-Kachel wie "Beliebte Sets", Kachel und Button starten die Suche zum Set (22.10.2026)
   ========================================================================== */
html.cp-v2 .cp-hl-sec .hc-popgrid { --hm2-a: var(--ob-violet-rgb); --hm2-ink: var(--ob-violet-text); display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--ob-s-3); }
html.cp-v2[data-theme="light"] .cp-hl-sec .hc-popgrid { --hm2-ink: var(--ob-violet-ink); }
html.cp-v2 .cp-hl-sec .hc-popgrid .hm2-sc-n { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
html.cp-v2 .cp-hl-sec .hc-popgrid .hm2-sc-st { color: var(--ob-mute); font-size: var(--ob-fs-xs); }
html.cp-v2 .cp-hl-sec .hc-popgrid .hm2-sc-st b { color: var(--ob-ink); font-family: var(--cp-font-mono); font-weight: 700; }
html.cp-v2 .cp-hl-sec .hc-popgrid .hm2-sc { display: flex; flex-direction: column; }
html.cp-v2 .cp-hl-sec .hc-popgrid .hm2-sc-a { flex: 1; align-content: start; }
html.cp-v2 .cp-hl-sec .hc-popgrid + .hp-foot { margin-top: var(--ob-s-4); }
@media (max-width: 600px) { html.cp-v2 .cp-hl-sec .hc-popgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ob-s-2); } }
html.cp-v2 .cp-hl-sec .hc-popgrid img:not([hidden]) + .hm2-ph { display: none; }
html.cp-v2[data-theme="light"] .cp-hl-sec .hc-popgrid :is(a, .hm2-sc-a, .hm2-sc-g) { color: var(--ob-ink) !important; }

/* ===== Scanner in v2 (22.10.2026): Karte, Binder-Seite, Produktfoto, Barcode – ein Fenster (.cs-ov), Popup/Bottom-Sheet nach Styleguide ===== */
html.cp-v2 .cs-ov { background: var(--ob-backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html.cp-v2 .cs-box { background: var(--ob-pop); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); box-shadow: var(--ob-shadow-2); max-width: var(--ob-pop-w-s); }
@media (min-width: 601px) { html.cp-v2 .cs-box { height: min(calc(100% - 40px), 820px); } }
html.cp-v2 .cs-top { padding: var(--ob-s-2) var(--ob-s-3) var(--ob-s-2) var(--ob-s-4); border-bottom: 1px solid var(--ob-line); gap: var(--ob-s-2); padding-top: max(var(--ob-s-2), env(safe-area-inset-top)); }
html.cp-v2 .cs-ttl { font-size: var(--ob-fs-lg); font-weight: 700; color: var(--ob-ink); }
html.cp-v2 :is(.cs-back, .cs-x) { width: var(--ob-tap); height: var(--ob-tap); margin: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-ink); font-size: 0; transition: background var(--ob-dur-1) var(--ob-ease-out); }
@media (hover: hover) and (pointer: fine) { html.cp-v2 :is(.cs-back, .cs-x):hover { background: var(--ob-hover); } }
html.cp-v2 :is(.cs-back, .cs-x) .ob-icon { width: var(--ob-icon); height: var(--ob-icon); }
html.cp-v2 .cs-cam { background: rgb(var(--ob-black-rgb)); }
html.cp-v2 .cs-frame { border-radius: var(--ob-r-sm); box-shadow: 0 0 0 9999px rgb(var(--ob-black-rgb) / 0.5); }
html.cp-v2 .cs-frame span { border-color: var(--ob-aqua); border-width: 3px; width: 28px; height: 28px; }
html.cp-v2 .cs-status { background: var(--ob-pop); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); color: var(--ob-ink); font-size: var(--ob-fs-sm); }
html.cp-v2 .cs-status.is-err { color: var(--ob-coral); border-color: rgb(var(--ob-coral-rgb) / 0.5); }
html.cp-v2 .cs-load small { color: var(--ob-mute); font-size: var(--ob-fs-sm); }
html.cp-v2 .cs-bar { background: var(--ob-field); }
html.cp-v2 .cs-bar i { background: var(--ob-accent-btn); }
html.cp-v2 .cs-panel { padding: var(--ob-s-3) var(--ob-s-4); padding-bottom: max(var(--ob-s-4), env(safe-area-inset-bottom)); }
html.cp-v2 .cs-hint { color: var(--ob-mute); font-size: var(--ob-fs-sm); }
html.cp-v2 .cs-sub { color: var(--ob-mute); font-size: var(--ob-fs-sm); }
html.cp-v2 .cs-actions { gap: var(--ob-s-2); }
html.cp-v2 .cs-tile { background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); padding: var(--ob-s-2); transition: border-color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .cs-tile:focus-visible { border-color: var(--ob-line-2); background: var(--ob-hover); }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .cs-tile:hover { border-color: var(--ob-line-2); background: var(--ob-hover); } }
html.cp-v2 .cs-tile img { border-radius: var(--ob-r-xs); background: var(--ob-field); }
html.cp-v2 .cs-tile b { color: var(--ob-ink); font-size: var(--ob-fs-sm); }
html.cp-v2 .cs-tile small { color: var(--ob-mute); font-size: var(--ob-fs-2xs); }
html.cp-v2 .cs-tile .cs-num { color: var(--ob-aqua-ink); font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; }
html.cp-v2 .cs-search-row { background: var(--ob-pop); }
html.cp-v2 .cs-search-row input { height: var(--ob-tap); background: var(--ob-field); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); color: var(--ob-ink); font-size: var(--ob-fs-input); padding: 0 var(--ob-s-3); }
html.cp-v2 .cs-search-row input:focus { border-color: rgb(var(--ob-violet-rgb) / 0.85); box-shadow: 0 0 0 3px rgb(var(--ob-violet-rgb) / 0.18); }
html.cp-v2 .cs-link { color: var(--ob-aqua-ink); font-size: var(--ob-fs-md); font-weight: 650; }
html.cp-v2 .cs-sheet h3, html.cp-v2 .cs-one-info h3 { color: var(--ob-ink); }
html.cp-v2 .cs-tilt-in { border-radius: var(--ob-r-md); box-shadow: var(--ob-shadow-2); }
html.cp-v2 .cs-tilt-in .cs-one-img { border-radius: var(--ob-r-md); }
html.cp-v2 .cs-vrow { background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); }
html.cp-v2 .cs-vrow.owned { background: rgb(var(--ob-violet-rgb) / 0.1); border-color: rgb(var(--ob-violet-rgb) / 0.4); }
html.cp-v2 .cs-vrow.active { border-color: rgb(var(--ob-violet-rgb) / 0.85); }
html.cp-v2 .cs-vname { color: var(--ob-ink); font-size: var(--ob-fs-md); }
html.cp-v2 .cs-vprice { color: var(--ob-ink); font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; }
html.cp-v2 .cs-vnum, html.cp-v2 .cs-stepper output { color: var(--ob-ink); font-family: var(--cp-font-mono); }
html.cp-v2 .cs-vqty .cx-qty-btn { width: var(--ob-tap-min); height: var(--ob-tap-min); border-radius: var(--ob-r-xs); border: 1px solid var(--ob-line-2); background: var(--ob-field); color: var(--ob-ink); }
html.cp-v2 .cs-vqty .cx-qty-btn.plus { border-color: rgb(var(--ob-violet-rgb) / 0.55); background: rgb(var(--ob-violet-rgb) / 0.18); }
html.cp-v2 .cs-one-bar { background: var(--ob-pop); border-top: 1px solid var(--ob-line); box-shadow: none; }
html.cp-v2 .cs-one-bar .cs-actions .cs-next-btn { min-height: var(--ob-tap); height: var(--ob-tap); font-size: var(--ob-fs-md); font-weight: 650; border-radius: var(--ob-r-sm); }
html.cp-v2 .cs-owned { color: var(--ob-green); }
html.cp-v2 .cs-price b { color: var(--ob-ink); font-family: var(--cp-font-mono); }
html.cp-v2 .cs-grab { background: var(--ob-line-2); width: 40px; }
@media (max-width: 600px) {
  html.cp-v2 .cs-ov { align-items: flex-end; }
  html.cp-v2 .cs-box { width: 100%; max-width: none; height: var(--ob-sheet-max); max-height: none; border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; border-bottom: 0; }
  html.cp-v2 .cs-ov:not([data-view="camera"]) .cs-box { height: auto; max-height: var(--ob-sheet-max); }
  html.cp-v2 .cs-grab { display: block; }
}
html.cp-v2 .pg-badge { background: rgb(var(--ob-amber-rgb) / 0.2); color: var(--ob-amber); border: 1px solid rgb(var(--ob-amber-rgb) / 0.5); font-size: var(--ob-fs-2xs); font-family: var(--cp-font-mono); }
html.cp-v2 .pg-badge.ok { background: rgb(var(--ob-green-rgb) / 0.18); color: var(--ob-green); border-color: rgb(var(--ob-green-rgb) / 0.5); }
html.cp-v2 .pg-badge.off { background: var(--ob-field); color: var(--ob-mute); border-color: var(--ob-line-2); }

html.cp-v2 .cs-ov :is(.cs-actions, .cs-load) .cx-link-btn:not(.accent) { min-height: var(--ob-tap); padding: 0 var(--ob-s-4); border: 1px solid var(--ob-line-2) !important; border-radius: var(--ob-r-sm); background: var(--ob-field) !important; color: var(--ob-ink) !important; font-size: var(--ob-fs-md); font-weight: 650; box-shadow: none !important; overflow: visible; display: inline-flex; align-items: center; justify-content: center; gap: var(--ob-s-2); }
html.cp-v2 .cs-ov :is(.cs-actions, .cs-load) .cx-link-btn:not(.accent)::after { display: none; }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .cs-ov :is(.cs-actions, .cs-load) .cx-link-btn:not(.accent):hover { transform: none; filter: none; background: var(--ob-hover) !important; } }
html.cp-v2 .cs-ov .cs-actions .cx-link-btn.accent { min-height: var(--ob-tap); border-radius: var(--ob-r-sm); font-size: var(--ob-fs-md); font-weight: 650; display: inline-flex; align-items: center; justify-content: center; gap: var(--ob-s-2); }
html.cp-v2[data-theme="light"] .cs-ov :is(.cs-actions, .cs-load) .cx-link-btn:not(.accent):not(#cs-id) { background: var(--ob-field) !important; color: var(--ob-ink) !important; border: 1px solid var(--ob-line-2) !important; box-shadow: none !important; }
html.cp-v2 .cs-ov .cs-search-row { position: static; padding: 0; }
html.cp-v2 .cs-ov .cs-load b { color: var(--ob-ink); }
html.cp-v2 .cs-top small.cs-scope { color: var(--ob-aqua-ink); font-size: var(--ob-fs-2xs); }

html.cp-v2 .pg-switch { max-width: 280px; padding: var(--ob-s-1); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: var(--ob-field); }
html.cp-v2 .pg-switch::before { top: var(--ob-s-1); bottom: var(--ob-s-1); left: var(--ob-s-1); width: calc(50% - var(--ob-s-1)); border-radius: var(--ob-r-xs); background: rgb(var(--ob-violet-rgb) / 0.18); border: 1px solid rgb(var(--ob-violet-rgb) / 0.55); transition-duration: var(--ob-dur-2); }
html.cp-v2 .pg-switch button { min-height: var(--ob-tap-min); font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-mute); }
html.cp-v2 .pg-switch button.on { color: var(--ob-ink); }
html.cp-v2 .cs-ov .cs-search-row:has(.cs-code-lbl) { flex-wrap: wrap; }
html.cp-v2 .cs-code-lbl { flex: 0 0 100%; color: var(--ob-mute); font-size: var(--ob-fs-sm); font-weight: 650; }
html.cp-v2 .cs-ov .cs-search-row .cx-link-btn.accent { min-height: var(--ob-tap); border-radius: var(--ob-r-sm); font-size: var(--ob-fs-md); font-weight: 650; padding: 0 var(--ob-s-4); }
@media (pointer: coarse) {
  html.cp-v2 .cs-vqty .cx-qty-btn, html.cp-v2 .pg-step .cx-qty-btn { width: var(--ob-tap); height: var(--ob-tap); }
  html.cp-v2 .pg-switch button { min-height: var(--ob-tap); }
}
html.cp-v2 .cs-box:focus { outline: none; }
html.cp-v2 .cs-top { color: var(--ob-ink); }
html.cp-v2 .cs-top > div { flex: 1 1 auto; min-width: 0; }
html.cp-v2 .cs-top b { font-size: var(--ob-fs-lg); font-weight: 700; color: var(--ob-ink); }

/* ===== SEO-Text am Ende der Startseite (22.10.2026): leise, bündig mit den Widgets, ohne Kästen/Emojis (Pokémon + Riftbound) ===== */
html.cp-v2 .home-seo-content { margin: var(--ob-s-8) auto 0 !important; padding: var(--ob-s-6) 0 var(--ob-s-6) !important; border-top: 1px solid var(--ob-line) !important; opacity: 1 !important; }
html.cp-v2 .home-seo-content [data-guide-lang] > h2 { margin: 0 0 var(--ob-s-2); font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-ink); }
html.cp-v2 .home-seo-content [data-guide-lang] > p { margin: 0 0 var(--ob-s-3); max-width: 62ch; line-height: 1.6; }
html.cp-v2:not([lang="de"]):not([lang="en"]) .home-seo-content [data-guide-lang="pl"]:has(> p:nth-of-type(2)),
html.cp-v2[lang="de"] .home-seo-content [data-guide-lang="de"]:has(> p:nth-of-type(2)),
html.cp-v2[lang="en"] .home-seo-content [data-guide-lang="en"]:has(> p:nth-of-type(2)) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--ob-s-8); align-items: start; }
html.cp-v2 .home-seo-content [data-guide-lang] > h2 { grid-column: 1; grid-row: 1; }
html.cp-v2 .home-seo-content [data-guide-lang] > p:nth-of-type(1) { grid-column: 1; grid-row: 2; margin: 0; }
html.cp-v2 .home-seo-content [data-guide-lang] > p:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
html.cp-v2 .home-seo-content [data-guide-lang] > .home-seo-more { grid-column: 1 / -1; grid-row: 3; margin: var(--ob-s-2) 0 0; }
html.cp-v2 .home-seo-content p a { color: var(--ob-aqua); text-decoration: underline; text-decoration-color: rgb(var(--ob-aqua-rgb) / 0.45); text-underline-offset: 3px; }
html.cp-v2[data-theme="light"] .home-seo-content p a { color: var(--ob-aqua-ink); }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .home-seo-content p a:hover { text-decoration-color: currentColor; } }
html.cp-v2 .home-seo-content .home-seo-more > summary { display: inline-flex; align-items: center; gap: var(--ob-s-1); padding: var(--ob-s-1) 0; border: 0 !important; border-radius: 0; background: none !important; font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-mute); }
html.cp-v2 .home-seo-content .home-seo-more > summary::before { content: none; }
html.cp-v2 .home-seo-content .home-seo-more > summary::after { content: "›"; font-size: var(--ob-fs-base); transition: rotate var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .home-seo-content .home-seo-more[open] > summary::after { rotate: 90deg; }
@media (pointer: coarse) { html.cp-v2 .home-seo-content .home-seo-more > summary { min-height: var(--ob-tap); } }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .home-seo-content .home-seo-more > summary:hover { color: var(--ob-ink) !important; } }
html.cp-v2 .home-seo-content .home-highlights-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ob-s-4) var(--ob-s-6); margin: var(--ob-s-3) 0 0; }
html.cp-v2 .home-seo-content .home-highlight-card { display: block; padding: 0; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none; transform: none !important; }
html.cp-v2 .home-seo-content .home-highlight-icon { display: none; }
html.cp-v2 .home-seo-content .home-highlight-card b { margin-bottom: var(--ob-s-1); font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-ink); }
html.cp-v2 .home-seo-content .home-highlight-card.free b { color: var(--ob-green); }
html.cp-v2[data-theme="light"] .home-seo-content .home-highlight-card.free b { color: var(--ob-green-ink); }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .home-seo-content a.home-highlight-card:hover b { color: var(--ob-aqua); } html.cp-v2[data-theme="light"] .home-seo-content a.home-highlight-card:hover b { color: var(--ob-aqua-ink); } }
@media (max-width: 899px) {
  html.cp-v2:not([lang="de"]):not([lang="en"]) .home-seo-content [data-guide-lang="pl"]:has(> p:nth-of-type(2)),
html.cp-v2[lang="de"] .home-seo-content [data-guide-lang="de"]:has(> p:nth-of-type(2)),
html.cp-v2[lang="en"] .home-seo-content [data-guide-lang="en"]:has(> p:nth-of-type(2)) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  html.cp-v2 .home-seo-content [data-guide-lang] > p:nth-of-type(1) { margin: 0 0 var(--ob-s-3); }
  html.cp-v2 .home-seo-content [data-guide-lang] > p:nth-of-type(2) { grid-column: 1; grid-row: 3; }
  html.cp-v2 .home-seo-content [data-guide-lang] > .home-seo-more { grid-row: 4; }
  html.cp-v2 .home-seo-content .home-highlights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { html.cp-v2 .home-seo-content .home-highlights-grid { grid-template-columns: minmax(0, 1fr); } }
html.cp-v2[data-theme="light"] .home-seo-content .home-highlight-card b { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .home-seo-content .home-highlight-card.free b { color: var(--ob-green-ink) !important; }

/* ==========================================================================
   Startseiten-Hero "Puls" (hero-pulse.js, Inhaber 22.10.2026, Pokémon + Riftbound):
   Booster wird aufgerissen, Karten bilden das Mosaik CardPulse, darunter laeuft die Herzlinie wie ein Monitor.
   Canvas liegt hinter dem Inhalt; oben bleibt Platz fuer das Mosaik (padding-top), darunter Titel, Text, drei Einstiege.
   Suche, ECG-Hintergrund und Karten-Stapel entfallen im Hero (Suche bleibt in der Kopfzeile).
   ========================================================================== */
html.cp-v2 .home-hero.cp-hp {
  --hp-a: var(--ob-holo-sky); --hp-b: var(--ob-holo-rose); --hp-c: var(--ob-holo-purple); --hp-d: var(--ob-holo-emerald);
  --hp-glow: 1; --hp-shadow: rgb(var(--ob-black-rgb) / 0.6); --hp-card: var(--ob-surface); --hp-card-line: var(--ob-line-2);
}
html.cp-v2[data-theme="light"] .home-hero.cp-hp {
  --hp-a: var(--ob-aqua-ink); --hp-b: var(--ob-coral-ink); --hp-c: var(--ob-violet-ink); --hp-d: var(--ob-green-ink);
  --hp-glow: 0; --hp-shadow: rgb(var(--ob-tint-rgb) / 0.3);
}
html.cp-v2 .home-hero.cp-hp :is(.cp-ecg-bg, .cp-cmd-search, .cp-3d-stage, .cp-chips, .cp-live-pill, .home-hero-eyebrow) { display: none; }
html.cp-v2 .cp-hp-cv { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
html.cp-v2 .cp-hp-line { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } /* Herzlinie ueber den ganzen Hero, hinter Text und Mosaik (23.10.2026) */
html.cp-v2 .home-hero.cp-hp .home-hero-inner {
  grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: var(--ob-s-3); text-align: center; padding-top: 340px;
}
html.cp-v2 .home-hero.cp-hp .home-hero-inner > * { grid-column: 1; }
html.cp-v2 .home-hero.cp-hp .home-hero-sub { margin-inline: auto; }
html.cp-v2 .cp-hp-fx { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
html.cp-v2 .cp-hp-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 60% 45% at var(--fx, 50%) var(--fy, 40%), rgb(var(--ob-white-rgb) / 1), rgb(var(--ob-white-rgb) / 0.5) 30%, transparent 70%); }
html.cp-v2 .cp-hp-wave { position: absolute; left: 0; top: 0; border-radius: 50%; border: 4px solid var(--hp-a); opacity: 0; }
html.cp-v2 .cp-hp-wave2 { border-color: var(--hp-c); border-width: 3px; }
/* Knopf unten rechts (seit 23.10.2026, vorher oben rechts): Intro erneut abspielen (Inhaber 23.10.2026); schlicht wie die Icon-Reihe: ohne Kreis, Icon 20 px, Tippflaeche 44 px */
html.cp-v2 .cp-hp-again {
  position: absolute; bottom: var(--ob-s-3); right: var(--ob-s-3); z-index: 4; display: grid; place-items: center; width: var(--ob-tap); height: var(--ob-tap); padding: 0;
  border: 0; border-radius: var(--ob-r-sm); background: none; color: var(--ob-mute); cursor: pointer;
  transition: color var(--ob-dur-1) var(--ob-ease-out);
}
html.cp-v2 .cp-hp-again .ob-icon { width: var(--ob-icon); height: var(--ob-icon); }
html.cp-v2 .cp-hp-again:focus-visible { outline: 2px solid var(--ob-violet); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .cp-hp-again:hover { color: var(--ob-ink); } }
html.cp-v2 .cp-hp-again:active { transform: scale(0.94); }
@media (prefers-reduced-motion: reduce) { html.cp-v2 .cp-hp-again { transition: none; } html.cp-v2 .cp-hp-again { display: none; } }
/* Clean (Inhaber 23.10.2026): Logo-Mosaik gross und mittig als Titel, darunter die Herzlinie ueber die ganze Breite, darunter der Untertitel
   (.home-hero-title). Keine Einstiege, kein Erklaerungstext (.home-hero-sub). Buehne #cpV2HpStage ueber die ganze Breite.
   Hoehe: Desktop 560 px, Tablet 500 px, Handy 480 px (zwei Icon-Reihen) - laesst auf 1366x768 den Anfang der Werkzeug-Kacheln sichtbar. */
html.cp-v2 .home-hero.cp-hp { min-height: 560px; box-sizing: border-box; }
html.cp-v2 .cp-hp-stage { position: absolute; z-index: 1; top: var(--ob-s-5); bottom: 0; left: var(--ob-s-5); right: var(--ob-s-5); }
/* Karten wegstossen (23.10.2026): Buehne nimmt Zeiger an (der Textblock darueber laesst sie durch); waagerechtes Wischen gehoert dem Mosaik, senkrechtes scrollt die Seite */
html.cp-v2 .cp-hp-stage { touch-action: pan-y; }
html.cp-v2 .home-hero.cp-hp .home-hero-inner { pointer-events: none; }
html.cp-v2 .home-hero.cp-hp .home-hero-inner > * { pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .cp-hp-stage { cursor: pointer; } }
html.cp-v2 .home-hero.cp-hp .home-hero-sub { display: none; }
html.cp-v2 .home-hero.cp-hp .home-hero-inner { box-sizing: border-box; width: 100%; flex: 1 0 auto; padding: 0 var(--ob-s-6) var(--ob-s-6); align-content: end; justify-items: center; text-align: center; }
html.cp-v2 .home-hero.cp-hp .home-hero-title { font-size: clamp(1.4rem, 2.4vw, 2rem); text-wrap: balance; margin: 0; }
@media (max-width: 899px) { html.cp-v2 .home-hero.cp-hp { min-height: 500px; } }
@media (max-width: 600px) { html.cp-v2 .home-hero.cp-hp { min-height: 480px; } html.cp-v2 .home-hero.cp-hp .home-hero-inner { padding: 0 0 var(--ob-s-5); } }
/* Waehrend des Intros (erster Besuch je Sitzung oder Wiederholen) sind Untertitel und Icon-Reihe ausgeblendet, danach blenden sie ein (Inhaber 23.10.2026) */
html.cp-v2 .home-hero.cp-hp :is(.home-hero-title, .cp-hp-nav) { transition: opacity var(--ob-dur-3) var(--ob-ease-out), visibility 0s; }
html.cp-v2 .home-hero.cp-hp.cp-hp-intro :is(.home-hero-title, .cp-hp-nav) { opacity: 0; visibility: hidden; transition: none; }
/* Erstbesuch je Sitzung: Der Titel steht im HTML (SSR, SEO), bleibt aber bis zum Mount des Heros verdeckt, damit er nicht kurz aufblitzt und dann fuer das Intro verschwindet (Inline-Skript im <head> der Startseiten setzt cp-hp-pre; v2.js nimmt es weg, Sicherung nach 4 s) */
html.cp-v2.cp-hp-pre :is(#welcomeState, .rb-home-hero) .home-hero-title, html.cp-v2.cp-hp-pre :is(#welcomeState, .op-home-hero) .home-hero-title { opacity: 0; visibility: hidden; transition: none; }
/* Icon-Reihe unter dem Untertitel (Inhaber 23.10.2026): nur Icons (20 px, Tippflaeche 44 px), --ob-mute, feine senkrechte Trennlinie --ob-line-2 */
html.cp-v2 .cp-hp-nav { display: flex; align-items: center; justify-content: center; margin-top: var(--ob-s-2); }
html.cp-v2 .cp-hp-nl { position: relative; display: grid; place-items: center; width: var(--ob-tap); height: var(--ob-tap); padding: 0; border: 0; background: none; color: var(--ob-mute); cursor: pointer; text-decoration: none; transition: color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .cp-hp-nl .ob-icon { width: var(--ob-icon); height: var(--ob-icon); }
html.cp-v2 .cp-hp-nl + .cp-hp-nl::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: var(--ob-s-4); transform: translateY(-50%); background: var(--ob-line-2); }
html.cp-v2 .cp-hp-nl:focus-visible { outline: 2px solid var(--ob-violet); outline-offset: -2px; border-radius: var(--ob-r-sm); }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .cp-hp-nl:hover { color: var(--ob-ink); } }
@media (prefers-reduced-motion: reduce) { html.cp-v2 .cp-hp-nl { transition: none; } }
/* Instagram, Unterstuetzen, Teilen: zweite Reihe unter der Icon-Reihe, schlicht wie diese (ohne Kreis, Icon 20 px, Tippflaeche 44 px, feine senkrechte Trennlinie) */
html.cp-v2 .cp-hp-soc { position: relative; display: flex; align-items: center; justify-content: center; margin-top: calc(-1 * var(--ob-s-2)); }   /* zweite Reihe unter der Icon-Reihe (23.10.2026), Tippflaechen 44 px ohne Ueberlappung */
html.cp-v2 .cp-hp-sb {
  position: relative; display: grid; place-items: center; width: var(--ob-tap); height: var(--ob-tap); padding: 0; border: 0; border-radius: var(--ob-r-sm);
  background: none; color: var(--ob-mute); cursor: pointer; text-decoration: none;
  transition: color var(--ob-dur-1) var(--ob-ease-out);
}
html.cp-v2 .cp-hp-sb + .cp-hp-sb::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: var(--ob-s-4); transform: translateY(-50%); background: var(--ob-line-2); }
html.cp-v2 .cp-hp-sb .ob-icon { width: var(--ob-icon); height: var(--ob-icon); }
html.cp-v2 .cp-hp-sb:focus-visible { outline: 2px solid var(--ob-violet); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .cp-hp-sb:hover { color: var(--ob-ink); } }
/* Teilen oben links im Hero (23.10.2026), Meldung „Link kopiert“ rechts daneben */
html.cp-v2 .cp-hp-shw { position: absolute; top: var(--ob-s-3); left: var(--ob-s-3); z-index: 4; display: flex; align-items: center; }
html.cp-v2 .cp-hp-msg { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); white-space: nowrap; margin-left: var(--ob-s-2); font-size: var(--ob-fs-xs); color: var(--ob-mute); opacity: 0; transition: opacity var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .cp-hp-msg.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.cp-v2 .cp-hp-sb, html.cp-v2 .cp-hp-msg { transition: none; } }
/* Deal-Radar: zwei Spalten wie die Suchergebnisse – links Spitzenwert-Kasten und Produktarten, rechts Leiste mit Suche und Sortierung, Liste */
html.cp-v2 .dr2-cols { margin-top: 2px; }
html.cp-v2 .dr2-side { max-height: calc(100dvh - 100px); overflow-y: auto; scrollbar-width: none; }
html.cp-v2 .dr2-side::-webkit-scrollbar { display: none; }
html.cp-v2 .dr2-side .dr2-pulse, html.cp-v2 .dr2-side .dr2-pulse.nt { grid-template-columns: 1fr; }
html.cp-v2 .dr2-side .dr2-pulse > * + * { border-left: 0; border-top: 1px solid var(--ob-line); }
html.cp-v2 .dr2-side .dr2-k b { font-size: var(--ob-fs-md); }
html.cp-v2 .dr2-cats[hidden] { display: none; }
html.cp-v2 .dr2-cats .v2-tl-row { grid-template-columns: minmax(0, 1fr) auto 16px; }
html.cp-v2 .dr2-cats.has-spark .v2-tl-row { grid-template-columns: minmax(0, 1fr) 84px auto 16px; }
html.cp-v2 .dr2-pulse #drTrB { display: grid; padding: 14px 16px; }
html.cp-v2 .dr2-pulse #drTrB[hidden] { display: none; }
html.cp-v2 .dr2-cats .v2-tl-row.on .v2-tl-n b { color: var(--ob-violet-text); }
html.cp-v2 .dr2-main { min-width: 0; display: grid; gap: 12px; align-content: start; }
html.cp-v2 .dr2-main .dr2-list { grid-template-columns: minmax(0, 1fr); }
html.cp-v2 .dr2-quick { flex: 0 1 260px; width: auto; min-width: 140px; margin-left: auto; }
html.cp-v2 .dr2[data-tab="sets"] .dr2-side { display: none; }
html.cp-v2 .dr2[data-tab="sets"] .dr2-cols { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 899px) {
  html.cp-v2 .dr2-side { max-height: none; overflow: visible; }
  html.cp-v2 .dr2-side .dr2-pulse { order: 1; }
  html.cp-v2 .dr2-fb { position: static; flex-wrap: wrap; box-shadow: none; }
  html.cp-v2 .dr2-fb .v2-quick { order: -1; flex: 1 1 100%; width: 100%; max-width: none; }
  html.cp-v2 .dr2-cats .v2-tl-row, html.cp-v2 .dr2-cats.has-spark .v2-tl-row { grid-template-columns: 1fr; }
  html.cp-v2 .dr2-cats .v2-tl-row.on { border-color: var(--ob-violet); }
}
html.cp-v2[data-theme="light"] .dr2-cats .v2-tl-row.on .v2-tl-n b { color: var(--ob-violet-text) !important; }

/* ---- WP-F1 Unterseiten-Audit ---- */
html.cp-v2 #historyModalBackdrop .modal-title > span:first-child:not([data-i18n]) { display: none; } /* Emoji vor dem Titel (Styleguide: keine Emojis) */

/* ---- Angebotsseite /angebot/<id>/… (worker/offer.js): Aufbau wie die Produktseite (Inhaber 23.10.2026) ----
   Links Bild + Bestpreis + Verlauf (Desktop fest), rechts Angebotszeilen (v2-or); ohne Emojis, Verlauf in Aqua mit Endpunkt. Nur Tokens. */
html.cp-v2 .op2 { max-width: var(--ob-page-max); padding-top: var(--ob-s-2); }
html.cp-v2 .op2-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ob-s-4); align-items: start; margin-top: var(--ob-s-3); }
html.cp-v2 .op2-left, html.cp-v2 .op2-right { min-width: 0; display: grid; gap: var(--ob-s-4); }
@media (min-width: 900px) {
  html.cp-v2 .op2-cols { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--ob-s-6); }
  html.cp-v2 .op2-left { position: sticky; top: calc(var(--ob-s-8) + var(--ob-s-4)); }
}
html.cp-v2 .op2-hero { display: grid; gap: var(--ob-s-4); padding: var(--ob-s-5); margin: 0; }
html.cp-v2 .op2-top { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--ob-s-4); align-items: center; }
html.cp-v2 .op2-hero .op-img { width: 112px; height: 112px; flex: none; border-radius: var(--ob-r-md); border: 1px solid var(--ob-line); background: #fff; }
html.cp-v2 .op2-tt { display: grid; gap: var(--ob-s-1); min-width: 0; }
html.cp-v2 .op2 .op2-hero .setguide-eyebrow { margin: 0; color: var(--ob-violet-text) !important; font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: none !important; -webkit-text-fill-color: currentColor !important; }
html.cp-v2 .op2 .op2-hero h1 { margin: 0; font-size: var(--ob-fs-xl); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--ob-ink) !important; background: none !important; -webkit-text-fill-color: currentColor !important; text-wrap: balance; overflow-wrap: anywhere; }
html.cp-v2 .op2-price { display: grid; gap: var(--ob-s-1); }
html.cp-v2 .op2-pl { color: var(--ob-mute); font-size: var(--ob-fs-md); }
html.cp-v2 .op2-pv { font-family: var(--cp-font-mono); font-size: var(--ob-fs-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ob-ink); }
html.cp-v2 .op2-ps { color: var(--ob-mute); font-size: var(--ob-fs-md); }
html.cp-v2 .op2-hero .op-out { display: grid; gap: var(--ob-s-1); }
html.cp-v2 .op2-hero .op-out .op-price-lbl { color: var(--ob-amber); font-size: var(--ob-fs-lg); font-weight: 700; }
html.cp-v2 .op2-hero .op-out .op-price-sub { color: var(--ob-mute); font-size: var(--ob-fs-md); }
html.cp-v2 .op2-act { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); }
html.cp-v2 .op2-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ob-s-2); min-height: var(--ob-tap); padding: 0 var(--ob-s-4); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-ink); font: inherit; font-size: var(--ob-fs-md); font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color var(--ob-dur-1) var(--ob-ease-out), background var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .op2-btn .ob-icon { width: var(--ob-icon-sm); height: var(--ob-icon-sm); }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .op2-btn:hover { border-color: rgb(var(--ob-violet-rgb) / 0.55); background: var(--ob-hover); } }
html.cp-v2 .op2-btn:focus-visible { outline: 2px solid var(--ob-violet); outline-offset: 2px; }
html.cp-v2 .op-search-btn { margin: var(--ob-s-5) 0 var(--ob-s-4); }
html.cp-v2 .op-search-btn .op2-btn { display: flex; width: 100%; }
html.cp-v2 .op2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ob-s-2); margin: 0; }
html.cp-v2 .op2-stats .cx-stat { display: grid; padding: var(--ob-s-3); border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); box-shadow: none; }
html.cp-v2 .op2-stats .cx-stat-value { font-family: var(--cp-font-mono); font-size: var(--ob-fs-base); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ob-ink); overflow-wrap: anywhere; }
html.cp-v2 .op2-stats .cx-stat-label { font-family: inherit; font-size: var(--ob-fs-xs); letter-spacing: 0; text-transform: none; color: var(--ob-mute); }
html.cp-v2 .op2-hero .cx-value-chart { padding: 0; border: 0; background: none; box-shadow: none; }
html.cp-v2 .op2-hero .cx-chart-head b { font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-mute); }
/* Verlauf: Aqua-Linie, Basislinie violett gestrichelt, nur Anfang/Ende beschriftet, nur Endpunkt */
html.cp-v2 .op2-hero .op-chart .op-line { stroke: var(--ob-aqua); stroke-width: 2.4; }
html.cp-v2 .op2-hero .op-chart stop { stop-color: var(--ob-aqua); }
html.cp-v2 .op2-hero .op-chart .op-base { stroke: var(--ob-violet); }
html.cp-v2 .op2-hero .op-legend span::before { border-top-color: var(--ob-aqua); }
html.cp-v2 .op2-hero .op-legend .op-leg-base::before { border-top-color: var(--ob-violet); }
html.cp-v2 .op2-hero .op-legend { color: var(--ob-mute); font-size: var(--ob-fs-xs); }
html.cp-v2 .op2-hero .op-tag { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); background: var(--ob-field); border: 1px solid var(--ob-line-2); color: var(--ob-ink); }
html.cp-v2 .op2-hero .op-tag.is-now { background: rgb(var(--ob-aqua-rgb) / 0.16); color: var(--ob-aqua); border-color: rgb(var(--ob-aqua-rgb) / 0.4); }
html.cp-v2[data-theme="light"] .op2-hero .op-tag.is-now { color: var(--ob-aqua-ink); }
html.cp-v2 .op2-hero .op-tag.opt, html.cp-v2 .op2-hero .op-dot:not(.is-now) { display: none; }
html.cp-v2 .op2-hero .op-dot { background: var(--ob-aqua); border-color: var(--ob-aqua); }
html.cp-v2 .op2-hero .cx-chart-axis { color: var(--ob-dim); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); }
/* Angebotsboxen rechts: Kasten wie Widgets, Zeilen = v2-or (ganze Zeile ueber den Titel-Link klickbar) */
html.cp-v2 .op2-right .setguide-section { margin: 0; padding: var(--ob-s-4); border: 1px solid var(--ob-line); border-radius: var(--ob-r-lg); background: var(--ob-surface); box-shadow: none; }
html.cp-v2 .op2-right .setguide-section h2 { margin: 0 0 var(--ob-s-3); font-size: var(--ob-fs-lg); font-weight: 800; color: var(--ob-ink); }
html.cp-v2 .op2-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ob-s-2); }
html.cp-v2 .op2-row { position: relative; }
html.cp-v2 .op2-row .v2-or-t::after { content: ""; position: absolute; inset: 0; }
html.cp-v2 .op2-row .v2-or-a { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .op2-row:hover { border-color: rgb(var(--ob-violet-rgb) / 0.45); } }
html.cp-v2 .op2-row:focus-within { border-color: rgb(var(--ob-violet-rgb) / 0.55); }
html.cp-v2 .op2 .op-note { color: var(--ob-dim); font-size: var(--ob-fs-xs); }
html.cp-v2 .op2 .cx-link-tile-icon .ob-icon { width: var(--ob-icon); height: var(--ob-icon); }
@media (max-width: 600px) {
  html.cp-v2 .op2-hero { padding: var(--ob-s-4); }
  html.cp-v2 .op2-top { grid-template-columns: 88px minmax(0, 1fr); gap: var(--ob-s-3); }
  html.cp-v2 .op2-hero .op-img { width: 88px; height: 88px; }
  html.cp-v2 .op2-row .v2-or-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
html.cp-v2[data-theme="light"] .op2-hero .cx-value-chart { border: 0 !important; background: none !important; box-shadow: none !important; }
/* ---- Performance CLS (23.10.2026): Platz reservieren, bevor Skripte Inhalt einsetzen (Messung Playwright, Handy 390 px / Desktop 1366 px) ---- */
/* Deal-Radar: Kopf-Kasten waechst beim Laden (Bild 56/48 px, Rabatt-Balken) und schiebt die Liste (.dr2-main) um ca. 190-220 px nach unten; Produktart-Liste kommt spaeter dazu (Handy: Spalten gestapelt). */
html.cp-v2 .dr2-top { min-height: 84px; } /* Bild 56 + Innenabstand 2 x 14 */
@media (max-width: 899px) {
  html.cp-v2 .dr2-top { min-height: 72px; } /* Bild 48 + Innenabstand 2 x 12 */
  html.cp-v2 .dr2 #drPulseB { min-height: 247px; align-content: start; } /* Endhoehe gemessen 520-899 px: 247, bis ca. 500 px: 263 (PL/DE/EN gleich) */
  html.cp-v2 .dr2:not([data-tab="sets"]) .dr2-cols:has(.dr2-cats[hidden]) .dr2-main { margin-top: calc(85px + var(--ob-s-3)); } /* Platz der noch versteckten Produktart-Liste (Pokemon 85, Riftbound 61; style.css blendet [hidden] mit !important aus) */
  html.cp-v2.game-rb .dr2:not([data-tab="sets"]) .dr2-cols:has(.dr2-cats[hidden]) .dr2-main, html.cp-v2.game-op .dr2:not([data-tab="sets"]) .dr2-cols:has(.dr2-cats[hidden]) .dr2-main { margin-top: calc(61px + var(--ob-s-3)); }
}
@media (max-width: 600px) { html.cp-v2 .dr2 #drPulseB { min-height: 263px; } }
/* Produktseite: Angebotsliste (ca. 2000 px) und Diagramm kommen nach dem Geruest. SEO-Texte bleiben bis dahin unsichtbar (Rueckfall nach 4 s wie auf der Startseite), Diagramm und Bestpreis-Kasten behalten ihre Endhoehe. */
html.cp-v2 body:has(:is(#productApp, #rbApp) .v2-pp-main > .v2-empty:not(#ppNoMatch)) :is(.home-seo-content, .seo-intro, .seo-prodinfo), html.cp-v2 body:has(:is(#productApp, #opApp) .v2-pp-main > .v2-empty:not(#ppNoMatch)) :is(.home-seo-content, .seo-intro, .seo-prodinfo) { visibility: hidden; animation: cpSeoReveal 0s 4s forwards; }
/* Deal-Radar: dasselbe, solange die Liste im sichtbaren Reiter noch leer ist bzw. nur Platzhalter zeigt (Liste ca. 600-960 px hoch, SEO-Text steht darunter) */
html.cp-v2 body:has(.dr2-pane:not([hidden]) :is(#best-deals-grid, #rbBest):empty, .dr2-pane:not([hidden]) #drList > .dr-skeleton) :is(.home-seo-content, .seo-tool-text, .seo-intro), html.cp-v2 body:has(.dr2-pane:not([hidden]) :is(#best-deals-grid, #opBest):empty, .dr2-pane:not([hidden]) #drList > .dr-skeleton) :is(.home-seo-content, .seo-tool-text, .seo-intro) { visibility: hidden; animation: cpSeoReveal 0s 4s forwards; }
html.cp-v2 #ppChart.v2-pp-chart { min-height: 348px; }
html.cp-v2 .v2-pp-side:has(> #ppChart) > .v2-pp-best { min-height: 78px; }
@media (min-width: 900px) {
  html.cp-v2 #ppChart.v2-pp-chart { min-height: 356px; }
  html.cp-v2 .v2-pp-side:has(> #ppChart) > .v2-pp-best { min-height: 130px; }
}
/* Riftbound-Set-Guide: Chase-Karten (12 Kacheln) und Textkasten werden erst nach dem Laden der Kartendaten gefuellt */
html.cp-v2 .gd2 #rbGAbout, html.cp-v2 .gd2 #opGAbout { min-height: 105px; }
@media (max-width: 600px) { html.cp-v2 .gd2 #rbGAbout, html.cp-v2 .gd2 #opGAbout { min-height: 127px; } }
@media (min-width: 900px) { html.cp-v2 .gd2 #rbGChase .rb-card-grid:empty, html.cp-v2 .gd2 #opGChase .op-card-grid:empty { min-height: 513px; } } /* 12 Kacheln: gemessen ab 1366 px 513, darunter 796-1260 (Spaltenzahl wechselt) = nie zu hoch */
/* Schriftwechsel: Preis in den vom Worker gelieferten Angebotszeilen (.offer-row) nutzt zuerst die Ersatzschrift (Zeile 21 px), nach dem Laden von JetBrains Mono 25 px = Zeilen werden ca. 4 px hoeher. Feste Zeilenhoehe = Normalhoehe von JetBrains Mono (1,32). */
html.cp-v2 .offer-row .offer-price-val { line-height: 1.32; }

/* Deal-Radar: "Nach Set" bleibt unter dem aktiven Tab sichtbar (SEO S7). Im Tab selbst entfaellt die Ueberschrift; Aufbau wie .rl2-sh h2. */
html.cp-v2 .collection-page .dr2-pane[data-dr2-pane="sets"][hidden] { display: grid !important; } /* überstimmt style.css ".collection-page [hidden]" */
html.cp-v2 .collection-page .dr2-pane[data-dr2-pane="sets"]:empty { display: none !important; }
html.cp-v2 .dr2-sh { margin: var(--ob-s-5) 0 0; font-size: var(--ob-fs-base); font-weight: 800; color: var(--ob-ink); }
html.cp-v2 .dr2-sh:has(+ .dr2-pane[data-dr2-pane="sets"]:not([hidden])), html.cp-v2 .dr2-sh:has(+ .dr2-pane[data-dr2-pane="sets"]:empty) { display: none; }
/* Solange die aktive Liste laedt, reserviert sie die Hoehe des Fensters: "Nach Set" darunter liegt dann unter der Falte und springt beim Fuellen nicht (CLS). */
html.cp-v2 .collection-page .dr2-pane:not([data-dr2-pane="sets"]):not([hidden]):has(:is(#best-deals-grid, #rbBest, #drList):empty, #drList > .dr-skeleton), html.cp-v2 .collection-page .dr2-pane:not([data-dr2-pane="sets"]):not([hidden]):has(:is(#best-deals-grid, #opBest, #drList):empty, #drList > .dr-skeleton) { min-height: var(--dr2-reserve, 100svh); align-content: start; } /* --dr2-reserve: rb.js/op.js aus der Zeilenzahl des SSR-Blocks deals (CLS) */

/* ---- Performance CLS Runde 3 (23.10.2026) ---- */
/* Pack-Simulator (?sim=1): sets.js setzt cp-sim-boot, bis die Simulation steht; der SEO-Text springt sonst beim Tausch der echten Sammlung gegen die Simulation (CLS 0,14). Rueckfall nach 5 s. */
html.cp-v2.cp-sim-boot:not(:has(#psSimHost .cx2)) :is(.home-seo-content, .seo-tool-text) { visibility: hidden; animation: cpSeoReveal 0s 5s forwards; }
/* Pack-Simulator: das Packbild (.ps2-go-pk) kommt nach dem Geruest und liess die Karte "Weiter oeffnen" um ca. 80 px wachsen (schob Filterleiste und Serienliste). Seitenverhaeltnis fest (30th: 278 x 560), Bild bleibt ganz sichtbar. */
html.cp-v2 .ps2-go-pk { aspect-ratio: 278 / 560; object-fit: contain; }
/* Release-Kalender (Pokemon + Riftbound): die Vorbestellungen je Set (4 Zeilen) kommen nach dem Geruest und wuchsen aus dem 2-Balken-Platzhalter (64/136 px) auf 140-312 px; der Termin-Block darunter rutschte aus dem Bild (CLS 0,03-0,08). Platzhalter behaelt die Endhoehe (4 Angebote; gemessen 390/768/1366 px). */
html.cp-v2 .rl2-nx .rl2-ofs:has(> .rl2-sk) { min-height: 140px; align-content: start; }
html.cp-v2 .rl2-sc .rl2-ofs:has(> .rl2-sk) { min-height: 288px; align-content: start; }
@media (max-width: 600px) { html.cp-v2 :is(.rl2-nx, .rl2-sc) .rl2-ofs:has(> .rl2-sk) { min-height: 312px; } }
/* Riftbound-Kartenliste (/riftbound/guides/<set>/cards/): die Karten-Pillen (#rbCPills) kommen nach dem Laden der Kartendaten und brechen am Handy in eine zweite Zeile um (Kopf +33 px, CLS 0,06). Platz fuer zwei Zeilen bis 600 px (PL/DE/EN gemessen: ab 520 px eine Zeile, dazwischen ca. 30 px Leerraum). */
@media (max-width: 600px) { html.cp-v2 .setguide-hero-meta:has(#rbCPills), html.cp-v2 .setguide-hero-meta:has(#opCPills) { min-height: 55px; align-content: start; } }
/* Riftbound-Kartenliste am Handy: das Inhaltsverzeichnis (.gd2-toc, eingeklappt 44 px + Rand) entsteht erst, wenn die Kartengruppen gezeichnet sind, und schob die Liste um 46 px nach unten. */
@media (max-width: 899px) { html.cp-v2 .gd2:has(#rbCardsBody) .gd2-side:not(:has(.gd2-toc)), html.cp-v2 .gd2:has(#opCardsBody) .gd2-side:not(:has(.gd2-toc)) { min-height: calc(var(--ob-tap) + 2px); } }
/* Riftbound-Produktseite/Set-Angebote: das Set-Logo (rb.js fillSetImages) wird erst nach dem Laden eingeblendet; der Titel wurde dadurch schmaler und brach um (Kopf +46 px, CLS 0,08-0,17). Platz bleibt ab dem ersten Bild reserviert (Pokemon: Logo steht mit src im HTML). */
html.cp-v2 .collection-page .v2-ph-logo.v2-ph-rsv.is-hidden[hidden] { display: block !important; visibility: hidden; } /* überstimmt style.css ".collection-page [hidden]" */
html.cp-v2 .op2-chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-3); flex-wrap: wrap; }
html.cp-v2 .op2-chart-head > b { font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-mute); }
html.cp-v2 .op2-pane[hidden] { display: none; }
html.cp-v2 .op2-pane .cx-chart-head:empty { display: none; }
html.cp-v2 .op2-pane .cx-chart-head { margin-top: var(--ob-s-2); }
/* === BATTLE: KONTO === (Konto-Seite, Einstellungen > Battle of Cards; Code: konto/konto.js btDraw) */
html.cp-v2 .ko2-bt { display: grid; gap: var(--ob-s-3); }
/* Konto-Bereich Battle of Cards: Spiel-Auswahl + Links, Hinweis ohne Spitzname, Tabelle "Nach Modus", letzte Laeufe */
html.cp-v2 .ko2-bt-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ob-s-3); }
html.cp-v2 .ko2-bt-go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-s-2); }
html.cp-v2 .ko2-bt-need { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ob-s-3); padding: var(--ob-s-3) var(--ob-s-4); border: 1px solid rgb(var(--ob-amber-rgb) / 0.4); border-radius: var(--ob-r-md); background: rgb(var(--ob-amber-rgb) / 0.1); font-size: var(--ob-fs-sm); color: var(--ob-ink); }
html.cp-v2 .ko2-tw { overflow-x: auto; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .ko2-tw:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2 .ko2-tbl { width: 100%; min-width: 460px; border-collapse: collapse; font-family: var(--cp-font-mono); font-size: var(--ob-fs-sm); font-variant-numeric: tabular-nums; }
html.cp-v2 .ko2-tbl thead th { padding: var(--ob-s-2) var(--ob-s-3); font-size: var(--ob-fs-2xs); font-weight: 650; letter-spacing: var(--ob-track-caps); text-transform: uppercase; color: var(--ob-dim); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .ko2-tbl tbody th { font-weight: 650; text-align: left; color: var(--ob-ink); white-space: nowrap; }
html.cp-v2 .ko2-tbl thead th:first-child { text-align: left; }
html.cp-v2 .ko2-tbl td, html.cp-v2 .ko2-tbl tbody th { height: var(--ob-tap); padding: 0 var(--ob-s-3); color: var(--ob-ink); }
html.cp-v2 .ko2-tbl td { text-align: right; }
html.cp-v2 .ko2-tbl tbody tr + tr > * { border-top: 1px solid var(--ob-line); }
html.cp-v2 .ko2-runs { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); overflow: hidden; }
html.cp-v2 .ko2-run { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-3); min-height: var(--ob-tap); padding: var(--ob-s-2) var(--ob-s-4); font-size: var(--ob-fs-sm); color: var(--ob-ink); }
html.cp-v2 .ko2-run + .ko2-run { border-top: 1px solid var(--ob-line); }
html.cp-v2 .ko2-run-s { display: grid; justify-items: end; gap: 2px; }
html.cp-v2 .ko2-run-s b { font-family: var(--cp-font-mono); font-weight: 800; font-variant-numeric: tabular-nums; }
html.cp-v2 .ko2-run-s small { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .ko2-bt-form { display: grid; gap: var(--ob-s-4); padding: var(--ob-s-4); max-width: var(--ob-pop-w-s); }
html.cp-v2 .ko2-bt-f { display: grid; gap: 6px; min-width: 0; }
html.cp-v2 .ko2-bt-f > label { font-size: var(--ob-fs-sm); font-weight: 650; color: var(--ob-ink); }
html.cp-v2 .ko2-bt-f > small, html.cp-v2 .ko2-bt-swt small { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .ko2-bt-in { box-sizing: border-box; width: 100%; min-width: 0; height: var(--ob-tap); padding: 0 var(--ob-s-3); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-ink); font: inherit; font-size: var(--ob-fs-input); }
html.cp-v2 .ko2-bt-in:focus-visible, html.cp-v2 .ko2-bt-sw:focus-within .settings-switch { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2 .ko2-bt-in[aria-invalid="true"] { border-color: var(--ob-coral); }
html.cp-v2 .ko2-bt-err { margin: 0; min-height: 0; font-size: var(--ob-fs-sm); color: var(--ob-coral); }
html.cp-v2 .ko2-bt-err:empty { display: none; }
html.cp-v2[data-theme="light"] .ko2-bt-err, html.cp-v2[data-theme="light"] .ko2-bt-st.bad { color: var(--ob-coral-ink); }
html.cp-v2 .ko2-bt-cc { display: flex; align-items: center; gap: var(--ob-s-2); }
html.cp-v2 .ko2-bt-flag { flex: none; width: 22px; height: 15px; object-fit: cover; border: 1px solid var(--ob-line-2); border-radius: 3px; }
html.cp-v2 .ko2-bt-flag[hidden] { display: none; }
html.cp-v2 .ko2-bt-sw { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-3); min-height: var(--ob-tap); cursor: pointer; }
html.cp-v2 .ko2-bt-swt { display: grid; gap: 2px; min-width: 0; }
html.cp-v2 .ko2-bt-swt b { font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-ink); }
html.cp-v2 .ko2-bt-a { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-s-3); }
html.cp-v2 .ko2-bt-a .cx2-btn[disabled] { opacity: 0.45; cursor: default; }
html.cp-v2 .ko2-bt-st { font-size: var(--ob-fs-sm); color: var(--ob-green); }
html.cp-v2[data-theme="light"] .ko2-bt-st { color: var(--ob-green-ink); }
html.cp-v2 .ko2-bt-st.bad { color: var(--ob-coral); }
html.cp-v2 .ko2-bt-st:empty { display: none; }
html.cp-v2 .ko2-bt-spin { animation: ko2-bt-spin 0.9s linear infinite; }
@keyframes ko2-bt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html.cp-v2 .ko2-bt-spin { animation: none; } }

/* === GAMES LANDING === */
/* Spiele-Uebersicht /games/ und /riftbound/games/ (Entwurf freigegeben 23.10.2026; Seiten: tools/make_games_pages.js) + Startseiten-Widget „Spiele“ (data.js cpHm2Games).
   Aufbau: Brotkrumen, Kopf (Eyebrow, h1, Einleitung, Chips), zwei Banner-Kacheln (immer dunkel, Inhaber 23.10.2026), „So spielst du“ (zwei Widgets), „Warum hier“, FAQ (natives details, Styleguide „Battle of Cards“), Links. Nur Tokens. */
html.cp-v2 .gm2 { --gm2-a: var(--ob-violet-rgb); --gm2-ink: var(--ob-violet-text); --gm2-eb: var(--ob-aqua); display: grid; gap: var(--ob-s-8); width: 100%; min-width: 0; padding: var(--ob-s-4) 0 var(--ob-s-8); color: var(--ob-ink); }
html.cp-v2 .gm2.gm2-rb { --gm2-a: var(--ob-coral-rgb); --gm2-ink: var(--ob-coral); --gm2-eb: var(--ob-coral); }
html.cp-v2 .gm2.gm2-op { --gm2-a: var(--ob-amber-rgb); --gm2-ink: var(--ob-amber); --gm2-eb: var(--ob-amber); }
html.cp-v2[data-theme="light"] .gm2 { --gm2-eb: var(--ob-aqua-ink); }
html.cp-v2[data-theme="light"] .gm2.gm2-rb { --gm2-ink: var(--ob-coral-ink); --gm2-eb: var(--ob-coral-ink); }
html.cp-v2[data-theme="light"] .gm2.gm2-op { --gm2-ink: var(--ob-amber-ink); --gm2-eb: var(--ob-amber-ink); }
html.cp-v2 .gm2 :is(h1, h2, h3, p, ul, ol) { margin: 0; }
html.cp-v2 .gm2 :is(ul, ol) { padding: 0; list-style: none; }
html.cp-v2 .gm2-bc ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-s-2); font-size: var(--ob-fs-sm); font-weight: 500; color: var(--ob-mute); }
html.cp-v2 .gm2-bc li + li::before { content: "›"; margin-right: var(--ob-s-2); color: var(--ob-dim); }
html.cp-v2 .gm2-bc a { display: inline-flex; align-items: center; min-height: var(--ob-tap-min); color: var(--ob-mute); text-decoration: none; }
html.cp-v2 .gm2-bc [aria-current] { color: var(--ob-ink); }
html.cp-v2 .gm2-hd { display: grid; gap: var(--ob-s-3); max-width: 760px; }
html.cp-v2 .gm2-eb { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; letter-spacing: var(--ob-track-caps); line-height: 1; text-transform: uppercase; color: var(--gm2-eb); }
html.cp-v2 .gm2-hd h1 { font-size: var(--ob-fs-display); font-weight: 800; line-height: var(--ob-lh-tight); letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: anywhere; background: var(--ob-title); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
html.cp-v2 .gm2-lead { color: var(--ob-mute); font-size: var(--ob-fs-base); line-height: var(--ob-lh-body); }
html.cp-v2 .gm2-chips { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); }
html.cp-v2 .gm2-chip { padding: 6px var(--ob-s-3); border-radius: var(--ob-r-pill); border: 1px solid var(--ob-line-2); background: var(--ob-field); color: var(--ob-mute); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; line-height: 1; white-space: nowrap; }
/* Spiel-Widgets */
html.cp-v2 .gm2-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ob-s-5); align-items: stretch; }
html.cp-v2 .gm2-wg { position: relative; isolation: isolate; display: grid; gap: var(--ob-s-4); align-content: start; min-width: 0; overflow: hidden; padding: var(--ob-s-6); border-radius: var(--ob-r-lg); border: 1px solid var(--ob-line-2);
  background: radial-gradient(70% 90% at 100% 0%, rgb(var(--gm2-a) / 0.1), transparent 65%), var(--ob-surface); box-shadow: var(--ob-shadow-1); }
html.cp-v2[data-theme="light"] .gm2-wg { background: radial-gradient(70% 90% at 100% 0%, rgb(var(--gm2-a) / 0.07), transparent 65%), var(--ob-surface); }
html.cp-v2 .gm2-wg .gm2-eb { color: var(--gm2-ink); }
html.cp-v2 .gm2-wt { font-size: var(--ob-fs-lg); font-weight: 800; line-height: var(--ob-lh-tight); letter-spacing: -0.02em; color: var(--ob-ink); text-wrap: balance; }
html.cp-v2 .gm2-tx { color: var(--ob-mute); font-size: var(--ob-fs-md); line-height: var(--ob-lh-body); }
html.cp-v2 .gm2-lim { color: var(--ob-dim); font-size: var(--ob-fs-sm); line-height: var(--ob-lh-body); }
html.cp-v2 .gm2-steps { display: grid; gap: var(--ob-s-2); counter-reset: gm2st; }
html.cp-v2 .gm2-steps li { counter-increment: gm2st; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--ob-s-3); align-items: start; font-size: var(--ob-fs-md); line-height: var(--ob-lh-body); }
html.cp-v2 .gm2-steps li::before { content: counter(gm2st); display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--ob-r-pill); border: 1px solid var(--ob-line-2); background: var(--ob-field); color: var(--gm2-ink); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 800; }
html.cp-v2 .gm2-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-s-4); }
html.cp-v2 .gm2-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ob-tap); padding: 0 var(--ob-s-5); border-radius: var(--ob-r-sm); background: var(--ob-accent-btn); color: rgb(var(--ob-white-rgb)); font-size: var(--ob-fs-md); font-weight: 800; text-decoration: none; box-shadow: 0 6px 20px -8px rgb(var(--ob-violet-rgb) / 0.8); }
html.cp-v2 .gm2-tl { display: inline-flex; align-items: center; gap: var(--ob-s-1); min-height: var(--ob-tap); color: var(--ob-mute); font-size: var(--ob-fs-md); font-weight: 650; text-decoration: none; }
html.cp-v2 .gm2-tl::after { content: "›"; }
html.cp-v2 :is(.gm2-btn, .gm2-tl, .gm2-bc a, .gm2-langs a):focus-visible, html.cp-v2 .gm2-more a:focus-visible, html.cp-v2 .gm2-faq summary:focus-visible { outline: 2px solid var(--ob-violet); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  html.cp-v2 :is(.gm2-tl, .gm2-bc a, .gm2-langs a):hover { color: var(--ob-ink); }
  html.cp-v2 .gm2-btn:hover { filter: brightness(1.08); }
}
/* Banner-Kacheln (Simulator, Battle of Cards): immer dunkel in beiden Themes, Akzent Aqua (Riftbound Koralle); Entwurf 11 freigegeben 23.10.2026 */
html.cp-v2 .gm2-banners { display: grid; gap: var(--ob-s-5); }
html.cp-v2 .gm2-bn { --bn-acc: var(--ob-aqua); --bn-acc-rgb: var(--ob-aqua-rgb); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--ob-s-4);
  min-width: 0; min-height: 340px; padding: var(--ob-s-7); border-radius: var(--ob-r-lg); border: 1px solid var(--ob-banner-line); color: var(--ob-banner-ink); box-shadow: var(--ob-shadow-1);
  background: radial-gradient(520px 340px at 10% 0%, rgb(var(--bn-acc-rgb) / 0.2), transparent 62%), radial-gradient(560px 380px at 95% 100%, rgb(var(--ob-violet-rgb) / 0.22), transparent 62%), var(--ob-banner-bg); }
html.cp-v2 .gm2-rb .gm2-bn { --bn-acc: var(--ob-coral); --bn-acc-rgb: var(--ob-coral-rgb); }
html.cp-v2 .gm2-bn-tx { position: relative; z-index: 2; display: grid; gap: var(--ob-s-3); align-content: center; min-width: 0; }
html.cp-v2 .gm2-bn-eb { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; letter-spacing: var(--ob-track-caps); line-height: 1; text-transform: uppercase; color: var(--bn-acc); }
html.cp-v2 .gm2-bn-t { font-size: var(--ob-fs-display); font-weight: 800; line-height: var(--ob-lh-tight); letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; color: var(--ob-banner-ink); }
html.cp-v2 .gm2-bn-p { max-width: 46ch; color: var(--ob-banner-mute); font-size: var(--ob-fs-base); line-height: var(--ob-lh-body); }
html.cp-v2 .gm2-bn-ch { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); }
html.cp-v2 .gm2-bn-ch li { padding: var(--ob-s-2) var(--ob-s-3); border-radius: var(--ob-r-pill); border: 1px solid var(--ob-banner-line); background: var(--ob-banner-field); color: var(--ob-banner-mute); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; line-height: 1; white-space: nowrap; }
html.cp-v2 .gm2-bn-ac { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-s-4); margin-top: var(--ob-s-1); }
html.cp-v2 .gm2-bn .gm2-tl { color: var(--ob-banner-mute); }
html.cp-v2 .gm2-bn-art { position: relative; z-index: 1; min-width: 0; min-height: 260px; }
html.cp-v2 .gm2-bn-art img { position: absolute; display: block; max-width: none; filter: drop-shadow(0 18px 26px rgb(var(--ob-black-rgb) / 0.6)); }
html.cp-v2 .gm2-bn-pk { top: 6%; height: 86%; max-height: 250px; width: auto; }
html.cp-v2 .gm2-bn-pk.a { left: 18%; transform: rotate(-8deg); }
html.cp-v2 .gm2-bn-pk.b { left: 42%; transform: rotate(8deg); }
html.cp-v2 .gm2-bn-c { width: 40%; max-width: 170px; height: auto; aspect-ratio: var(--ob-ratio-card); object-fit: cover; border-radius: var(--ob-r-xs); }
html.cp-v2 .gm2-bn-c.a { left: 12%; top: 6%; transform: rotate(-6deg); box-shadow: 0 0 0 3px var(--ob-amber), 0 0 34px rgb(var(--ob-amber-rgb) / 0.6); }
html.cp-v2 .gm2-bn-c.b { right: 8%; top: 22%; transform: rotate(6deg); }
html.cp-v2 .gm2-bn-vs { position: absolute; z-index: 3; left: 50%; top: 45%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--ob-r-pill); border: 2px solid var(--ob-banner-line); background: var(--ob-banner-bg); color: var(--ob-banner-ink); font-family: var(--cp-font-mono); font-size: var(--ob-fs-sm); font-weight: 800; }
html.cp-v2 .gm2-bn-pulse { position: absolute; z-index: 0; right: var(--ob-s-6); bottom: var(--ob-s-5); width: 200px; height: 30px; color: var(--bn-acc); opacity: 0.7; pointer-events: none; }
/* Warum hier */
html.cp-v2 .gm2-sec > h2 { margin-bottom: var(--ob-s-3); font-size: var(--ob-fs-lg); font-weight: 800; line-height: var(--ob-lh-tight); color: var(--ob-ink); }
html.cp-v2 .gm2-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ob-s-3); }
html.cp-v2 .gm2-why li { padding: var(--ob-s-3) var(--ob-s-4); border-radius: var(--ob-r-md); border: 1px solid var(--ob-line); background: var(--ob-surface); color: var(--ob-mute); font-size: var(--ob-fs-md); line-height: var(--ob-lh-body); }
html.cp-v2 .gm2-why b { display: block; margin-bottom: 2px; color: var(--ob-ink); font-weight: 700; }
/* FAQ-Aufklappfeld (Styleguide „Battle of Cards“: gilt seitenweit) */
html.cp-v2 .gm2-faq { display: grid; gap: var(--ob-s-2); max-width: var(--ob-read-max); }
html.cp-v2 .gm2-faq details { padding: 0 var(--ob-s-4); border-radius: var(--ob-r-md); border: 1px solid var(--ob-line); background: var(--ob-surface); }
html.cp-v2 .gm2-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-3); min-height: 48px; padding: var(--ob-s-2) 0; cursor: pointer; list-style: none; font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-ink); }
html.cp-v2 .gm2-faq summary::-webkit-details-marker { display: none; }
html.cp-v2 .gm2-faq summary::after { content: "+"; flex: none; color: var(--ob-mute); font-family: var(--cp-font-mono); font-size: var(--ob-fs-base); font-weight: 800; }
html.cp-v2 .gm2-faq details[open] > summary::after { content: "−"; }
html.cp-v2 .gm2-faq p { padding-bottom: var(--ob-s-4); color: var(--ob-mute); font-size: var(--ob-fs-md); line-height: var(--ob-lh-body); }
/* Weitere Links, Sprachwahl */
html.cp-v2 .gm2-more { max-width: var(--ob-read-max); color: var(--ob-mute); font-size: var(--ob-fs-md); line-height: var(--ob-lh-body); }
html.cp-v2 .gm2-more a { color: var(--ob-aqua); text-decoration: underline; text-decoration-color: var(--ob-line-2); text-underline-offset: 3px; }
html.cp-v2[data-theme="light"] .gm2-more a { color: var(--ob-aqua-ink); }
html.cp-v2 .gm2-langs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-s-2); color: var(--ob-dim); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); }
html.cp-v2 .gm2-langs a { display: inline-flex; align-items: center; min-height: var(--ob-tap-min); color: var(--ob-mute); text-decoration: none; }
html.cp-v2 .gm2-langs [aria-current] { color: var(--ob-ink); font-weight: 700; }
@media (max-width: 899px) {
  html.cp-v2 .gm2-bn { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: var(--ob-s-5); }
  html.cp-v2 .gm2-bn-art { order: -1; min-height: 210px; width: 100%; max-width: 420px; justify-self: center; }
  html.cp-v2 .gm2-bn-t { font-size: var(--ob-fs-xl); }
  html.cp-v2 .gm2-bn-pulse { display: none; }
}
@media (max-width: 365px) {
  html.cp-v2 .gm2-bn { padding: var(--ob-s-4); }
  html.cp-v2 .gm2-bn-t { font-size: var(--ob-fs-lg); }
}
@media (max-width: 899px) {
  html.cp-v2 .gm2-games { grid-template-columns: minmax(0, 1fr); }
  html.cp-v2 .gm2-why { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  html.cp-v2 .gm2 { gap: var(--ob-s-7); }
  html.cp-v2 .gm2-hd h1 { font-size: var(--ob-fs-xl); }
  html.cp-v2 .gm2-wg { padding: var(--ob-s-5); }
}
/* Startseiten-Widget „Spiele“ (data.js cpHm2Games): Blog-Widget-Aufbau mit zwei Kacheln */
html.cp-v2 .hm2-bl.hm2-gl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.cp-v2 .hm2-gl .hm2-bc-t small { font-family: var(--cp-font-sans); font-size: var(--ob-fs-sm); line-height: var(--ob-lh-body); }
@media (max-width: 899px) {
  html.cp-v2 .hm2-bl.hm2-gl { grid-template-columns: minmax(0, 1fr); }
  html.cp-v2 .hm2-gl .hm2-bc:nth-child(n+3) { display: grid; }
}
/* Endhoehe des Widgets reservieren (kleinste gemessene Hoehe ueber PL/DE/EN, kein Layout-Sprung beim Zeichnen) */
html.cp-v2 :is(#homeGames, #rbApp > #rbGames), html.cp-v2 :is(#homeGames, #opApp > #opGames) { min-height: 430px; box-sizing: border-box; }
@media (max-width: 899px) { html.cp-v2 :is(#homeGames, #rbApp > #rbGames), html.cp-v2 :is(#homeGames, #opApp > #opGames) { min-height: 550px; } }
@media (max-width: 600px) { html.cp-v2 :is(#homeGames, #rbApp > #rbGames), html.cp-v2 :is(#homeGames, #opApp > #opGames) { min-height: 419px; } }
@media (prefers-reduced-motion: reduce) { html.cp-v2 .gm2-btn { transition: none; } }
/* === /GAMES LANDING === */

/* === BATTLE OF CARDS (Styleguide "Battle of Cards"; Code games/battle-of-cards/*, Seiten /games/battle-of-cards/{pl,de,en}/ und /riftbound/games/…; nur v2) === */
html.cp-v2 .bt2 { --bt-pw: 84px; --bt-gap: var(--ob-s-4); display: grid; gap: var(--ob-s-6); width: 100%; max-width: var(--ob-read-max); margin: 0 auto; padding: var(--ob-s-5) 0 var(--ob-s-8); color: var(--ob-ink); }
html.cp-v2 .bt2 :is(h1, h2, p, ol, ul) { margin: 0; }
/* Pfad */
html.cp-v2 .bt2-bc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-s-2); font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .bt2-bc a { color: var(--ob-mute); text-decoration: none; }
html.cp-v2 .bt2-bc [aria-current] { color: var(--ob-ink); }
html.cp-v2 .bt2-sep { color: var(--ob-dim); }
/* Start-Bildschirm (Widget-Rahmen: --ob-surface, Rand --ob-line-2, Radius --ob-r-lg) */
html.cp-v2 .bt2-start { display: grid; gap: var(--ob-s-4); padding: var(--ob-s-6); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-lg); background: var(--ob-surface); }
html.cp-v2 .bt2-start[hidden], html.cp-v2 .bt2-stage[hidden] { display: none; }
html.cp-v2 .bt2-eyebrow { 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 .bt2 h1 { font-size: var(--ob-fs-xl); font-weight: 800; line-height: var(--ob-lh-tight); color: var(--ob-ink); text-wrap: balance; }
html.cp-v2 .bt2-lead { color: var(--ob-mute); font-size: var(--ob-fs-md); line-height: var(--ob-lh-body); }
html.cp-v2 .bt2-h2 { font-size: var(--ob-fs-lg); font-weight: 800; line-height: var(--ob-lh-tight); color: var(--ob-ink); }
html.cp-v2 .bt2-steps { display: grid; gap: var(--ob-s-3); padding: 0; list-style: none; counter-reset: bt; }
html.cp-v2 .bt2-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--ob-s-3); align-items: start; color: var(--ob-ink); font-size: var(--ob-fs-md); line-height: var(--ob-lh-body); counter-increment: bt; }
html.cp-v2 .bt2-steps li::before { content: counter(bt); display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: var(--ob-field); color: var(--ob-aqua); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 800; }
html.cp-v2 .bt2-act { display: flex; flex-wrap: wrap; gap: var(--ob-s-3); align-items: center; }
html.cp-v2 .bt2-act .cx2-btn { min-width: 160px; }
html.cp-v2 .bt2 .v2-chip { min-height: var(--ob-tap); text-decoration: none; color: var(--ob-ink); background: var(--ob-field); }
html.cp-v2 .bt2-note { color: var(--ob-dim); font-size: var(--ob-fs-sm); line-height: var(--ob-lh-body); }
html.cp-v2 .bt2-note:empty, html.cp-v2 .bt2-note[hidden] { display: none; }
html.cp-v2 .bt2-note-err { color: var(--ob-coral); }
html.cp-v2 .bt2-stage { scroll-margin-top: 72px; }

/* Spielfeld */
html.cp-v2 .bt2-play { position: relative; display: grid; gap: var(--ob-s-3); width: 100%; max-width: 560px; margin: 0 auto; padding: var(--ob-s-4); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-lg); background: var(--ob-bg); overflow: hidden; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
html.cp-v2 .bt2-top-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-2); }
html.cp-v2 .bt2-eb, html.cp-v2 .bt2-eb2 { 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-aqua); }
html.cp-v2 .bt2-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid rgb(var(--ob-violet-rgb) / 0.4); border-radius: var(--ob-r-pill); background: rgb(var(--ob-violet-rgb) / 0.12); color: var(--ob-violet-text); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; white-space: nowrap; }
html.cp-v2 .bt2-sc { display: flex; align-items: baseline; gap: var(--ob-s-2); }
html.cp-v2 .bt2-sc-l { 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 .bt2-sc b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-lg); font-weight: 800; color: var(--ob-ink); font-variant-numeric: tabular-nums; }
html.cp-v2 .bt2-tmw { display: grid; gap: 6px; }
html.cp-v2 .bt2-tm { height: 6px; border-radius: var(--ob-r-pill); background: var(--ob-field); overflow: hidden; }
html.cp-v2 .bt2-tm i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--ob-aqua); transform-origin: left center; }
html.cp-v2 .bt2-tm.warn i { background: var(--ob-coral); }
html.cp-v2 .bt2-tml { display: flex; justify-content: space-between; gap: var(--ob-s-2); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .bt2-num { font-variant-numeric: tabular-nums; }
html.cp-v2 .bt2-q { font-size: var(--ob-fs-base); font-weight: 800; line-height: var(--ob-lh-tight); color: var(--ob-ink); }
html.cp-v2 .bt2-field { position: relative; display: grid; gap: var(--ob-s-3); }
html.cp-v2 .bt2-field.is-wait { visibility: hidden; }
html.cp-v2 .bt2-field.is-wait .bt2-cd { visibility: visible; }
html.cp-v2 .bt2-duo, html.cp-v2 .bt2-decks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--bt-gap); }
html.cp-v2 .bt2-slot { position: relative; z-index: 2; will-change: transform; }
html.cp-v2 .bt2-card { position: relative; display: grid; gap: var(--ob-s-2); width: 100%; min-height: var(--ob-tap); padding: var(--ob-s-2); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); color: var(--ob-ink); font: inherit; text-align: left; cursor: pointer; align-content: start; }
html.cp-v2 .bt2-fc { position: relative; display: block; aspect-ratio: var(--ob-ratio-card); perspective: 900px; border-radius: var(--ob-r-xs); }
html.cp-v2 .bt2-fi { position: absolute; inset: 0; display: block; transform-style: preserve-3d; will-change: transform; }
html.cp-v2 .bt2-face { position: absolute; inset: 0; display: block; border-radius: var(--ob-r-xs); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
html.cp-v2 .bt2-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.cp-v2 .bt2-face.bt2-bk { transform: rotateY(180deg); background: var(--ob-field); }
html.cp-v2 .bt2-fr { background: var(--ob-field); }
html.cp-v2 .bt2-slot.nf .bt2-fr img { visibility: hidden; }
html.cp-v2 .bt2-slot.nf .bt2-fr::after { content: attr(data-name); position: absolute; inset: 0; display: grid; place-items: center; padding: var(--ob-s-2); color: var(--ob-mute); font-size: var(--ob-fs-sm); font-weight: 650; text-align: center; }
html.cp-v2 .bt2-lbl { display: grid; gap: 2px; min-height: 96px; align-content: start; min-width: 0; padding: 0 2px 2px; }
html.cp-v2 .bt2-hitc { justify-self: start; padding: 3px 10px; border-radius: var(--ob-r-pill); background: var(--ob-holo); color: #fff; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
html.cp-v2 .bt2-hitc[hidden] { display: none; }
html.cp-v2 .bt2-name { font-size: var(--ob-fs-md); font-weight: 650; line-height: 1.2; color: var(--ob-ink); overflow-wrap: anywhere; }
html.cp-v2 .bt2-ser { font-size: var(--ob-fs-xs); line-height: 1.3; color: var(--ob-mute); overflow-wrap: anywhere; }
html.cp-v2 .bt2-rar { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 650; line-height: 1.3; color: var(--ob-dim); }
html.cp-v2 .bt2-pr { margin-top: 2px; font-family: var(--cp-font-mono); font-size: var(--ob-fs-base); font-weight: 800; line-height: 1.1; color: var(--ob-ink); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; opacity: 0; }
html.cp-v2 .bt2-pr.win { color: var(--ob-green); }
html.cp-v2 .bt2-slot.win .bt2-card { border-color: var(--ob-green); box-shadow: 0 0 0 1px var(--ob-green) inset; }
html.cp-v2 .bt2-plus { position: absolute; top: -6px; right: -4px; z-index: 4; padding: 4px 8px; border: 1px solid rgb(var(--ob-green-rgb) / 0.5); border-radius: var(--ob-r-pill); background: var(--ob-surface); color: var(--ob-green); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; }
html.cp-v2 .bt2-burn { position: absolute; z-index: 3; pointer-events: none; }
/* Seltenheits-Effekt wie Pack-Simulator (PACKSIM_HITS 1-5), einmal beim Aufdecken; danach bleibt nur der Rand */
html.cp-v2 .bt2-shine { position: absolute; inset: -10% -60%; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 38%, rgb(var(--ob-white-rgb) / 0.55) 48%, rgb(var(--ob-holo-sky-rgb) / 0.35) 53%, transparent 62%); mix-blend-mode: screen; }
html.cp-v2 .bt2-holo { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: var(--ob-holo); mix-blend-mode: overlay; }
html.cp-v2 .bt2-fc.fx-5 .bt2-holo { opacity: 0.28; }
html.cp-v2 .bt2-fc.fx-2 { box-shadow: 0 0 0 2px var(--ob-holo-sky), 0 0 22px rgb(var(--ob-holo-sky-rgb) / 0.55); }
html.cp-v2 .bt2-fc.fx-3 { box-shadow: 0 0 0 2px var(--ob-holo-purple), 0 0 28px rgb(var(--ob-holo-purple-rgb) / 0.7); }
html.cp-v2 .bt2-fc.fx-4 { box-shadow: 0 0 0 3px var(--ob-holo-amber), 0 0 34px rgb(var(--ob-holo-amber-rgb) / 0.8); }
html.cp-v2 .bt2-fc.fx-5 { box-shadow: 0 0 0 3px var(--ob-holo-amber), 0 0 40px rgb(var(--ob-holo-amber-rgb) / 0.9), 0 0 80px rgb(var(--ob-holo-rose-rgb) / 0.45); }
html.cp-v2 .bt2-glit { position: absolute; inset: -12px; z-index: 4; pointer-events: none; }
html.cp-v2 .bt2-glit i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--ob-holo-amber); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: 0; }
/* Booster unter jeder Karte: Bild, Promo-Umschlag oder Ersatz-Booster mit Setname */
html.cp-v2 .bt2-decks { position: relative; z-index: 1; pointer-events: none; }
html.cp-v2 .bt2-deck { position: relative; display: grid; justify-items: center; gap: 6px; width: 100%; min-width: 0; }
html.cp-v2 .bt2-pk { position: relative; display: block; width: var(--bt-pw); aspect-ratio: 306 / 560; filter: drop-shadow(0 12px 18px rgb(var(--ob-black-rgb) / 0.45)); }
html.cp-v2 .bt2-base { position: absolute; inset: 0; clip-path: inset(13% 0 0 0); }
html.cp-v2 .bt2-top { position: absolute; left: 0; right: 0; top: 0; height: 13%; overflow: hidden; }
html.cp-v2 .bt2-top > * { position: absolute; top: 0; left: 0; width: var(--bt-pw); height: calc(var(--bt-pw) * 560 / 306); }
html.cp-v2 .bt2-base > * { width: 100%; height: 100%; }
html.cp-v2 .bt2-pkimg { display: block; object-fit: cover; }
html.cp-v2 .bt2-cut { position: absolute; left: -6%; right: -6%; top: 13%; height: 2px; margin-top: -1px; background: rgb(var(--ob-white-rgb)); box-shadow: 0 0 10px rgb(var(--ob-white-rgb)), 0 0 18px var(--ob-holo-amber); transform: scaleX(0); opacity: 0; }
html.cp-v2 .bt2-dnm { max-width: 100%; overflow-wrap: anywhere; font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); line-height: 1.2; color: var(--ob-mute); text-align: center; }
html.cp-v2 .bt2-pkx { position: absolute; top: 0; left: 0; display: grid; align-content: center; justify-items: center; gap: 6px; box-sizing: border-box; padding: 18% 6px; border-radius: 3px; text-align: center; overflow: hidden; }
html.cp-v2 .bt2-pkx-k { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 800; letter-spacing: var(--ob-track-caps); text-transform: uppercase; }
html.cp-v2 .bt2-pkx-n { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; max-width: 100%; font-size: var(--ob-fs-xs); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
/* Ersatz-Booster "Folie": Verlauf je Spiel (--bt-fb1..3), Glanzband, abgedunkelte Seitenkanten, Zickzack-Naht oben/unten, Set-Logo oder Set-Kuerzel in der Mitte */
html.cp-v2 .bt2-pkx-fb { --bt-fb1: var(--ob-holo-amber); --bt-fb2: var(--ob-coral); --bt-fb3: var(--ob-violet); color: rgb(var(--ob-white-rgb));
  background: linear-gradient(112deg, transparent 26%, rgb(var(--ob-white-rgb) / 0.38) 40%, rgb(var(--ob-white-rgb) / 0.08) 48%, transparent 58%),
    linear-gradient(90deg, rgb(var(--ob-black-rgb) / 0.34), transparent 15%, transparent 85%, rgb(var(--ob-black-rgb) / 0.34)),
    linear-gradient(160deg, var(--bt-fb1) 0%, var(--bt-fb2) 45%, var(--bt-fb3) 100%); }
html.cp-v2 .bt2-rb .bt2-pkx-fb { --bt-fb1: var(--ob-aqua); --bt-fb2: var(--ob-holo-sky); --bt-fb3: var(--ob-indigo); }
html.cp-v2 .bt2-op .bt2-pkx-fb { --bt-fb1: var(--ob-amber); --bt-fb2: var(--ob-holo-amber); --bt-fb3: var(--ob-amber-ink); text-shadow: 0 1px 2px rgb(var(--ob-black-rgb) / 0.5); }
html.cp-v2 .bt2-pkx-fb::before, html.cp-v2 .bt2-pkx-fb::after { content: ""; position: absolute; left: 0; right: 0; height: 7%;
  background: linear-gradient(135deg, rgb(var(--ob-white-rgb) / 0.55) 25%, transparent 25%) 0 0 / 8px 100%, linear-gradient(225deg, rgb(var(--ob-white-rgb) / 0.55) 25%, transparent 25%) 0 0 / 8px 100%, rgb(var(--ob-black-rgb) / 0.28); }
html.cp-v2 .bt2-pkx-fb::before { top: 0; }
html.cp-v2 .bt2-pkx-fb::after { bottom: 0; transform: scaleY(-1); }
html.cp-v2 .bt2-pkx-fb .bt2-pkx-n { text-shadow: 0 1px 6px rgb(var(--ob-black-rgb) / 0.5); }
html.cp-v2 .bt2-pkx-m { position: relative; display: grid; place-items: center; width: 100%; min-height: 2.2em; }
html.cp-v2 .bt2-pkx-m::before { content: ""; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, rgb(var(--ob-white-rgb) / 0.22) 0 1px, transparent 1px 9px); mask: radial-gradient(circle, #000 20%, transparent 62%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 62%); }
html.cp-v2 .bt2-pkx-l { position: relative; width: 92%; height: auto; max-height: 4.5em; object-fit: contain; filter: drop-shadow(0 1px 3px rgb(var(--ob-black-rgb) / 0.55)); }
html.cp-v2 .bt2-pkx-c { position: relative; font-family: var(--cp-font-mono); font-size: var(--ob-fs-base); font-weight: 800; line-height: 1; letter-spacing: 0.04em; text-shadow: 0 2px 6px rgb(var(--ob-black-rgb) / 0.5); }
/* Promo-Umschlag: schlicht, helles Papier mit Klappe, Aufschrift "Promo" + Setname, keine fremden Logos */
html.cp-v2 .bt2-pkx-promo { color: var(--ob-violet-ink); border: 1px solid rgb(var(--ob-tint-rgb) / 0.35);
  background: linear-gradient(to bottom right, transparent 49.5%, rgb(var(--ob-tint-rgb) / 0.35) 50%, transparent 51.5%) top left / 50% 38% no-repeat,
    linear-gradient(to bottom left, transparent 49.5%, rgb(var(--ob-tint-rgb) / 0.35) 50%, transparent 51.5%) top right / 50% 38% no-repeat,
    linear-gradient(180deg, rgb(var(--ob-white-rgb) / 0.96), rgb(var(--ob-white-rgb) / 0.86)); }
html.cp-v2 .bt2-pkx-promo .bt2-pkx-k { padding: 2px 8px; border: 1px solid currentColor; border-radius: var(--ob-r-pill); }
html.cp-v2 .bt2-flash { position: absolute; left: 50%; top: 34%; z-index: 5; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgb(var(--ob-white-rgb) / 0.95) 0%, rgb(var(--ob-violet-rgb) / 0.55) 35%, transparent 70%); }
html.cp-v2 .bt2-res { min-height: 1.3em; font-family: var(--cp-font-mono); font-size: var(--ob-fs-sm); font-weight: 650; text-align: center; color: var(--ob-mute); }
html.cp-v2 .bt2-res.ok { color: var(--ob-green); }
html.cp-v2 .bt2-res.bad { color: var(--ob-coral); }
html.cp-v2 .bt2-hint { min-height: 1.3em; font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); text-align: center; color: var(--ob-dim); }
html.cp-v2 .bt2-err { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ob-s-3); padding: var(--ob-s-3); border: 1px solid rgb(var(--ob-coral-rgb) / 0.4); border-radius: var(--ob-r-md); background: rgb(var(--ob-coral-rgb) / 0.1); color: var(--ob-coral); font-size: var(--ob-fs-sm); text-align: center; }
html.cp-v2 .bt2-err[hidden] { display: none; }

/* Ergebnis: Popup 640 px ab 900 px, darunter Bottom-Sheet */
html.bt2-lock { overflow: hidden; }
html.cp-v2 .bt2-ov { position: fixed; inset: 0; z-index: var(--ob-z-sheet); display: flex; align-items: center; justify-content: center; padding: var(--ob-s-6); background: var(--ob-backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html.cp-v2 .bt2-res-box { display: flex; flex-direction: column; width: 100%; max-width: var(--ob-pop-w-m); max-height: 85dvh; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); background: var(--ob-pop); box-shadow: var(--ob-shadow-2); color: var(--ob-ink); overflow: hidden; }
html.cp-v2 .bt2-grip { display: none; }
html.cp-v2 .bt2-res-h { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-3); padding: var(--ob-s-3) var(--ob-s-3) var(--ob-s-3) var(--ob-s-5); border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .bt2-res-h h2 { margin: 2px 0 0; font-size: var(--ob-fs-lg); font-weight: 800; color: var(--ob-ink); }
html.cp-v2 .bt2-res-b { display: grid; flex: 1 1 auto; min-height: 0; gap: var(--ob-s-4); align-content: start; padding: var(--ob-s-5); overflow-y: auto; overscroll-behavior: contain; }
html.cp-v2 .bt2-big { display: grid; justify-items: center; gap: 2px; }
html.cp-v2 .bt2-big small, html.cp-v2 .bt2-k small, html.cp-v2 .bt2-lbl2 { 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 .bt2-big b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-display); font-weight: 800; line-height: 1.1; color: var(--ob-ink); font-variant-numeric: tabular-nums; }
html.cp-v2 .bt2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
html.cp-v2 .bt2-k { display: grid; gap: 4px; align-content: start; padding: 12px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .bt2-k b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-lg); font-weight: 800; color: var(--ob-ink); font-variant-numeric: tabular-nums; }
html.cp-v2 .bt2-k span { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .bt2-best { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 10px 14px 10px 10px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .bt2-best img { grid-row: span 2; width: 56px; aspect-ratio: var(--ob-ratio-card); object-fit: cover; border-radius: var(--ob-r-xs); background: var(--ob-field); }
html.cp-v2 .bt2-best > div { display: grid; gap: 2px; min-width: 0; }
html.cp-v2 .bt2-best > div b { font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-ink); overflow-wrap: anywhere; }
html.cp-v2 .bt2-best small { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .bt2-pr2 { font-family: var(--cp-font-mono); font-size: var(--ob-fs-base); font-weight: 800; color: var(--ob-ink); white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
html.cp-v2 .bt2-offers { grid-column: 2 / -1; justify-self: end; display: inline-flex; align-items: center; min-height: var(--ob-tap); padding: 0 var(--ob-s-2); color: var(--ob-violet-text); font-size: var(--ob-fs-md); font-weight: 650; text-decoration: none; }
html.cp-v2 .bt2-hintbox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ob-s-3); padding: var(--ob-s-3) var(--ob-s-4); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); background: var(--ob-field); color: var(--ob-mute); font-size: var(--ob-fs-md); line-height: var(--ob-lh-body); }
html.cp-v2 .bt2-sim { justify-self: start; display: inline-flex; align-items: center; min-height: var(--ob-tap); color: var(--ob-mute); font-size: var(--ob-fs-md); font-weight: 650; text-decoration: none; }
html.cp-v2 .bt2-res-f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: var(--ob-s-3) var(--ob-s-5); border-top: 1px solid var(--ob-line); }
html.cp-v2 .bt2-ok { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--ob-green); font-size: var(--ob-fs-sm); font-weight: 600; }
html.cp-v2 .bt2-res-f .v2-chip { justify-content: center; }

/* Text unter dem Spiel (SEO), FAQ als Aufklappfeld nach Styleguide */
html.cp-v2 .bt2-seo { display: grid; gap: var(--ob-s-3); max-width: var(--ob-read-max); }
html.cp-v2 .bt2-seo > .bt2-h2 { margin-top: var(--ob-s-5); }
html.cp-v2 .bt2-seo p { color: var(--ob-mute); font-size: var(--ob-fs-base); line-height: var(--ob-lh-body); }
html.cp-v2 .bt2-tbl { width: 100%; max-width: 420px; border-collapse: collapse; font-family: var(--cp-font-mono); font-size: var(--ob-fs-md); }
html.cp-v2 .bt2-tbl th { padding: 8px 0; border-bottom: 1px solid var(--ob-line-2); color: var(--ob-mute); font-size: var(--ob-fs-xs); font-weight: 650; letter-spacing: var(--ob-track-caps); text-align: left; text-transform: uppercase; }
html.cp-v2 .bt2-tbl td { padding: 8px 0; border-bottom: 1px solid var(--ob-line); color: var(--ob-ink); }
html.cp-v2 :is(.bt2-faq, .bt2-acc) { display: grid; gap: var(--ob-s-2); }
html.cp-v2 :is(.bt2-faq, .bt2-acc) details { padding: 0 var(--ob-s-4); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 :is(.bt2-faq, .bt2-acc) summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-3); min-height: 48px; color: var(--ob-ink); font-size: var(--ob-fs-md); font-weight: 650; cursor: pointer; list-style: none; }
html.cp-v2 :is(.bt2-faq, .bt2-acc) summary::-webkit-details-marker { display: none; }
html.cp-v2 :is(.bt2-faq, .bt2-acc) summary::after { content: "+"; flex-shrink: 0; color: var(--ob-mute); font-family: var(--cp-font-mono); font-size: var(--ob-fs-base); font-weight: 800; }
html.cp-v2 :is(.bt2-faq, .bt2-acc) details[open] summary::after { content: "−"; }
html.cp-v2 :is(.bt2-faq, .bt2-acc) details p { margin: 0 0 var(--ob-s-4); font-size: var(--ob-fs-md); }
/* Battle: Aufklapper fuer Anleitung/Regeln, Ranking-Vorschau, "Dein Stand" (Inhaber-Ok 24.10.2026) */
html.cp-v2 .bt2-acc summary h2 { margin: 0; font: inherit; color: inherit; }
html.cp-v2 .bt2-acc details > :is(ol, table, .bt2-gain) { margin: 0 0 var(--ob-s-4); }
html.cp-v2 .bt2-rank { display: grid; gap: var(--ob-s-3); max-width: var(--ob-read-max); }
html.cp-v2 .bt2-bgap { margin: 0; color: var(--ob-dim); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); letter-spacing: var(--ob-track-caps); line-height: var(--ob-lh-tight); text-align: center; }
html.cp-v2 .bt2-more { display: flex; flex-wrap: wrap; gap: var(--ob-s-2) var(--ob-s-5); }
html.cp-v2 .bt2-more a { display: inline-flex; align-items: center; min-height: var(--ob-tap); color: var(--ob-violet-text); font-size: var(--ob-fs-md); font-weight: 650; text-decoration: none; }

@media (hover: hover) {
  html.cp-v2 .bt2-card:hover { border-color: var(--ob-line-2); }
  html.cp-v2 .bt2-bc a:hover, html.cp-v2 .bt2-sim:hover { color: var(--ob-ink); }
}
@media (max-width: 899px) {
  html.cp-v2 .bt2-ov { align-items: flex-end; padding: 0; }
  html.cp-v2 .bt2-res-box { max-width: none; max-height: var(--ob-sheet-max); border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; border-bottom: 0; touch-action: pan-y; }
  html.cp-v2 .bt2-grip { display: block; width: 40px; height: 5px; margin: var(--ob-s-2) auto 0; border-radius: var(--ob-r-pill); background: var(--ob-line-2); flex-shrink: 0; }
  html.cp-v2 .bt2-res-h { padding-left: var(--ob-s-4); }
  html.cp-v2 .bt2-res-b { padding: var(--ob-s-4); gap: var(--ob-s-3); }
  html.cp-v2 .bt2-res-f { flex-direction: column; align-items: stretch; padding: var(--ob-s-3) var(--ob-s-4) calc(var(--ob-s-3) + env(safe-area-inset-bottom, 0px)); }
  html.cp-v2 .bt2-res-f .bt2-ok { margin: 0 auto 2px; }
  html.cp-v2 .bt2-res-f .cx2-btn { width: 100%; }
}
@media (max-width: 600px) {
  html.cp-v2 .bt2 { --bt-pw: 64px; --bt-gap: var(--ob-s-3); padding-top: var(--ob-s-4); gap: var(--ob-s-5); }
  html.cp-v2 .bt2-start { padding: var(--ob-s-5); border-radius: var(--ob-r-lg); }
  html.cp-v2 .bt2-act .cx2-btn { flex: 1 1 100%; }
  html.cp-v2 .bt2-act .v2-chip { flex: 1 1 100%; justify-content: center; }
  html.cp-v2 .bt2-play { padding: var(--ob-s-3); }
  html.cp-v2 .bt2-best { grid-template-columns: 48px minmax(0, 1fr); }
  html.cp-v2 .bt2-best img { width: 48px; }
  html.cp-v2 .bt2-pr2 { grid-column: 2; }
  html.cp-v2 .bt2-offers { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-end; }
  html.cp-v2 .bt2-kpis { grid-template-columns: 1fr 1fr; gap: 6px; }
  html.cp-v2 .bt2-k { padding: 10px; }
  html.cp-v2 .bt2-k b { font-size: var(--ob-fs-md); }
}
@media (max-width: 365px) {
  html.cp-v2 .bt2-play { padding: var(--ob-s-2); }
  html.cp-v2 .bt2-card { padding: 6px; }
  html.cp-v2 .bt2-name { font-size: var(--ob-fs-sm); }
}
/* Helles Theme: Akzent als Schrift mit -ink, keine Leucht-Schatten (Ringe bleiben) */
html.cp-v2[data-theme="light"] :is(.bt2-eb, .bt2-eb2) { color: var(--ob-aqua-ink); }
html.cp-v2[data-theme="light"] :is(.bt2-steps li::before) { color: var(--ob-aqua-ink); }
html.cp-v2[data-theme="light"] :is(.bt2-pr.win, .bt2-res.ok, .bt2-plus, .bt2-ok) { color: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] :is(.bt2-res.bad, .bt2-err, .bt2-note-err) { color: var(--ob-coral-ink); }
html.cp-v2[data-theme="light"] .bt2-pk { filter: drop-shadow(0 8px 12px rgb(var(--ob-tint-rgb) / 0.3)); }
html.cp-v2[data-theme="light"] .bt2-fc.fx-2 { box-shadow: 0 0 0 2px var(--ob-holo-sky); }
html.cp-v2[data-theme="light"] .bt2-fc.fx-3 { box-shadow: 0 0 0 2px var(--ob-holo-purple); }
html.cp-v2[data-theme="light"] .bt2-fc.fx-4 { box-shadow: 0 0 0 3px var(--ob-holo-amber); }
html.cp-v2[data-theme="light"] .bt2-fc.fx-5 { box-shadow: 0 0 0 3px var(--ob-holo-amber), 0 0 0 6px rgb(var(--ob-holo-rose-rgb) / 0.35); }
html.cp-v2[data-theme="light"] .bt2-tm i { background: var(--ob-aqua-ink); }
html.cp-v2[data-theme="light"] .bt2-tm.warn i { background: var(--ob-coral-ink); }
/* Riftbound: Koralle als Akzent (ein Akzent je Widget) */
html.cp-v2 .bt2-rb .bt2-eb, html.cp-v2 .bt2-rb .bt2-eb2 { color: var(--ob-coral); }
html.cp-v2[data-theme="light"] .bt2-rb :is(.bt2-eb, .bt2-eb2) { color: var(--ob-coral-ink); }
html.cp-v2 .bt2-rb .bt2-tm i { background: var(--ob-coral); }
html.cp-v2 .bt2-rb .bt2-steps li::before { color: var(--ob-coral); }
html.cp-v2[data-theme="light"] .bt2-rb .bt2-steps li::before { color: var(--ob-coral-ink); }
html.cp-v2[data-theme="light"] .bt2-rb .bt2-tm i { background: var(--ob-coral-ink); }
@media (prefers-reduced-motion: reduce) {
  html.cp-v2 .bt2 *, html.cp-v2 .bt2-ov, html.cp-v2 .bt2-ov * { animation: none !important; transition: none !important; }
}
/* === /BATTLE OF CARDS === */

/* === BATTLE BOARD === (Bestenliste in #ranking der Spielseite; Styleguide "Battle of Cards" > Bestenliste-Zeile; Code games/battle-of-cards/battle-board.js) */
html.cp-v2 .bt2-bsel { min-height: var(--ob-tap-min); max-width: 100%; padding: 0 var(--ob-s-3); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-mute); font: inherit; font-size: var(--ob-fs-sm); font-weight: 650; }
html.cp-v2 .bt2-blist { display: grid; gap: var(--ob-s-2); margin: 0; padding: 0; list-style: none; }
html.cp-v2 .bt2-brow { display: grid; grid-template-columns: 40px 22px minmax(0, 1fr) auto; align-items: center; gap: var(--ob-s-3); min-height: var(--ob-tap); padding: 0 var(--ob-s-4); border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-surface); }
html.cp-v2 .bt2-brk { font-family: var(--cp-font-mono); font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .bt2-bflag { display: block; width: 22px; height: 15px; border: 1px solid var(--ob-line-2); border-radius: 3px; object-fit: cover; background: var(--ob-field); }
html.cp-v2 .bt2-bflag-none { border-style: dashed; }
html.cp-v2 .bt2-bnick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ob-ink); font-size: var(--ob-fs-md); font-weight: 650; }
html.cp-v2 .bt2-bsc { display: grid; justify-items: end; white-space: nowrap; }
html.cp-v2 .bt2-bsc b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-md); font-weight: 800; color: var(--ob-ink); }
html.cp-v2 .bt2-bsc small { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 .bt2-brow.is-me { border-color: rgb(var(--ob-violet-rgb) / 0.5); background: rgb(var(--ob-violet-rgb) / 0.1); }
html.cp-v2 .bt2-bme { margin-top: var(--ob-s-1); }
html.cp-v2 .bt2-bsk :is(.bt2-brk, .bt2-bnick, .bt2-bsc) { display: block; height: 12px; border-radius: 3px; background: var(--ob-field); }
html.cp-v2 .bt2-bsk .bt2-brk { width: 24px; }
html.cp-v2 .bt2-bsk .bt2-bnick { width: 55%; }
html.cp-v2 .bt2-bsk .bt2-bsc { width: 48px; }
html.cp-v2 .bt2-bstate { color: var(--ob-mute); font-size: var(--ob-fs-md); line-height: var(--ob-lh-body); }
html.cp-v2 .bt2-seo .bt2-bstate { color: var(--ob-mute); }
html.cp-v2 .bt2-bstate-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ob-s-3); padding: var(--ob-s-4); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); background: var(--ob-field); }
html.cp-v2 .bt2-bsk ~ .bt2-bstate, html.cp-v2 .bt2-blist[aria-busy] + .bt2-bstate { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 600px) {
  html.cp-v2 .bt2-brow { grid-template-columns: 32px 22px minmax(0, 1fr) auto; gap: var(--ob-s-2); padding: 0 var(--ob-s-3); }
  html.cp-v2 .bt2-bsel { width: 100%; min-height: var(--ob-tap); font-size: var(--ob-fs-input); }
}
html.cp-v2[data-theme="light"] .bt2-bseg { background: transparent !important; box-shadow: none !important; }
html.cp-v2[data-theme="light"] .bt2-bseg .cx-tab { background: transparent !important; color: var(--ob-mute) !important; border: 0 !important; box-shadow: none !important; }
html.cp-v2[data-theme="light"] .bt2-bseg .cx-tab.active { background: rgb(var(--ob-violet-rgb) / 0.12) !important; color: var(--ob-ink) !important; }
/* === /BATTLE BOARD === */

/* === BATTLE PHASE 2 === (Modi, Joker, Lernmodus, Tagesraster, Herausforderung, Statistik, Abzeichen; Styleguide "Battle of Cards"; Code games/battle-of-cards/battle.js, battle-stats.js, battle-board.js) */
/* Modus-Auswahl (Styleguide "Battle of Cards" > Modus-Auswahl, Auswahl-Kachel): ein Panel, eine Radio-Gruppe */
html.cp-v2 .bt2-start { gap: var(--ob-s-4); padding: 0; border: 0; border-radius: 0; background: none; }
html.cp-v2 .bt2-intro { display: grid; gap: var(--ob-s-2); }
html.cp-v2 #btChal[hidden], html.cp-v2 .bt2-stats[hidden] { display: none; }
html.cp-v2 .bt2-mlbl { 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 .bt2-st { max-width: 100%; margin-top: var(--ob-s-1); padding: 3px 6px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: var(--ob-field); color: var(--ob-mute); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; }
html.cp-v2 .bt2-st[data-bt-cd] { white-space: nowrap; }
html.cp-v2 .bt2-st.is-ok { border-color: rgb(var(--ob-green-rgb) / 0.4); background: rgb(var(--ob-green-rgb) / 0.12); color: var(--ob-green); }
html.cp-v2 .bt2-tlink { display: inline-flex; align-items: center; min-height: var(--ob-tap); color: var(--ob-mute); font-size: var(--ob-fs-md); font-weight: 650; text-decoration: none; }
html.cp-v2 .bt2-vib { display: flex; align-items: center; gap: var(--ob-s-3); min-height: var(--ob-tap); color: var(--ob-mute); font-size: var(--ob-fs-sm); cursor: pointer; }
html.cp-v2 .bt2-vib:focus-within .settings-switch { outline: 2px solid var(--ob-aqua); outline-offset: 2px; border-radius: var(--ob-r-pill); }
html.cp-v2 .bt2-seo > .bt2-h2:first-child { margin-top: 0; }
/* Pille (Abzeichen, "Heute gespielt"): Styleguide "Badges" */
html.cp-v2 .bt2-pill, html.cp-v2 .bt2-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid rgb(var(--ob-aqua-rgb) / 0.4); border-radius: var(--ob-r-pill); background: rgb(var(--ob-aqua-rgb) / 0.12); color: var(--ob-aqua); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 800; white-space: nowrap; }
html.cp-v2 .bt2-pill.is-ok { border-color: rgb(var(--ob-green-rgb) / 0.4); background: rgb(var(--ob-green-rgb) / 0.12); color: var(--ob-green); }
html.cp-v2 .bt2-badge.is-new { border-color: rgb(var(--ob-violet-rgb) / 0.4); background: rgb(var(--ob-violet-rgb) / 0.12); color: var(--ob-violet-text); }
html.cp-v2 .bt2-badge i { margin-right: 6px; padding-right: 6px; border-right: 1px solid currentColor; font-style: normal; text-transform: uppercase; }
html.cp-v2 .bt2-badges { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); margin: 0; padding: 0; list-style: none; }
html.cp-v2 .bt2-newb { display: grid; gap: var(--ob-s-2); }
/* Spielfeld: Joker, Lauf beenden, Lernmodus */
html.cp-v2 .bt2-tools { display: flex; align-items: center; justify-content: flex-end; gap: var(--ob-s-2); }
html.cp-v2 .bt2-tools[hidden], html.cp-v2 .bt2-joker[hidden], html.cp-v2 .bt2-endrun[hidden] { display: none; }
html.cp-v2 .bt2-joker .ob-icon { width: 16px; height: 16px; }
html.cp-v2 .bt2-joker span { font-family: var(--cp-font-mono); font-weight: 800; }
html.cp-v2 .bt2-tools .v2-chip:disabled { opacity: 0.45; cursor: default; }
html.cp-v2 .bt2-play[data-mode="learn"] :is(.bt2-tmw, .bt2-sc, .bt2-chip) { display: none; }
html.cp-v2 .bt2-tr { display: grid; gap: 2px; margin-top: var(--ob-s-1); }
html.cp-v2 .bt2-tr:empty { display: none; }
html.cp-v2 .bt2-trl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ob-s-2); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); line-height: 1.3; color: var(--ob-mute); font-variant-numeric: tabular-nums; }
html.cp-v2 .bt2-trn { font-weight: 650; color: var(--ob-ink); white-space: nowrap; }
html.cp-v2 .bt2-trl i { font-style: normal; font-weight: 650; white-space: nowrap; }
html.cp-v2 .bt2-trl i.dn { color: var(--ob-green); }
html.cp-v2 .bt2-trl i.up { color: var(--ob-coral); }
html.cp-v2 .bt2-trl i.eq { color: var(--ob-mute); }
/* Ergebnis: Tagesraster, Herausforderung */
html.cp-v2 .bt2-gridw { display: grid; gap: var(--ob-s-2); }
html.cp-v2 .bt2-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; max-width: calc(10 * 36px + 9 * 6px); }
html.cp-v2 .bt2-grid i { min-width: 0; aspect-ratio: 1; border-radius: var(--ob-r-xs); }
html.cp-v2 .bt2-grid i.ok { background: var(--ob-green); }
html.cp-v2 .bt2-grid i.bad { background: var(--ob-coral); }
html.cp-v2 .bt2-chal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-s-3); }
html.cp-v2 .bt2-chal-s { color: var(--ob-mute); font-size: var(--ob-fs-sm); line-height: var(--ob-lh-body); }
html.cp-v2 .bt2-chal-b b { color: var(--ob-ink); font-weight: 650; }
html.cp-v2 .bt2-vs { display: grid; gap: var(--ob-s-2); }
html.cp-v2 .bt2-vs:empty { display: none; }
html.cp-v2 .bt2-vsr { font-family: var(--cp-font-mono); font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-mute); }
html.cp-v2 .bt2-vsr.ok { color: var(--ob-green); }
html.cp-v2 .bt2-vsr.bad { color: var(--ob-coral); }
html.cp-v2 .bt2-crow { grid-template-columns: 40px minmax(0, 1fr) auto; }
/* Statistik */
@media (hover: hover) {
  html.cp-v2 .bt2-tlink:hover { color: var(--ob-ink); }
}
@media (max-width: 600px) {
  html.cp-v2 .bt2-crow { grid-template-columns: 32px minmax(0, 1fr) auto; }
  html.cp-v2 .bt2-chal .v2-chip { flex: 1 1 100%; justify-content: center; }
  html.cp-v2 .bt2-tools { justify-content: space-between; }
}
html.cp-v2[data-theme="light"] :is(.bt2-pill, .bt2-badge) { color: var(--ob-aqua-ink); }
html.cp-v2[data-theme="light"] :is(.bt2-pill.is-ok, .bt2-st.is-ok) { color: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] .bt2-badge.is-new { color: var(--ob-violet-ink); }
html.cp-v2[data-theme="light"] .bt2-trl i.dn, html.cp-v2[data-theme="light"] .bt2-vsr.ok { color: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] .bt2-trl i.up, html.cp-v2[data-theme="light"] .bt2-vsr.bad { color: var(--ob-coral-ink); }
/* Riftbound: Pille und Kachel-Eyebrow Koralle statt Aqua (ein Akzent je Widget) */
html.cp-v2 .bt2-rb .bt2-badge:not(.is-new) { border-color: rgb(var(--ob-coral-rgb) / 0.4); background: rgb(var(--ob-coral-rgb) / 0.12); color: var(--ob-coral); }
html.cp-v2[data-theme="light"] .bt2-rb .bt2-badge:not(.is-new) { color: var(--ob-coral-ink); }
@media (prefers-reduced-motion: reduce) {
  html.cp-v2 .bt2-tools * { transition: none !important; animation: none !important; }
}
@media (max-width: 365px) {
  html.cp-v2 .bt2-start { gap: var(--ob-s-3); }
  html.cp-v2 .bt2-start h1 { font-size: var(--ob-fs-lg); }
}
/* === /BATTLE PHASE 2 === */

/* === Sealed: Sprache (JP/KR/CN) === */
html.cp-v2 .sv-sheet-img { position: relative; }
html.cp-v2 :is(.sv-img, .sv-sheet-img) .lang-flag-overlay { top: var(--ob-s-1); left: var(--ob-s-1); right: auto; }
html.cp-v2 :is(.sv-img, .sv-sheet-img, .sd-thumb) .lang-flag-overlay img { width: var(--ob-s-4); height: auto; aspect-ratio: 4 / 3; }
html.cp-v2 .sd-asia-set { display: block; color: var(--ob-mute); font-size: var(--ob-fs-xs); }
/* === /Sealed: Sprache (JP/KR/CN) === */

/* === HOME BOARD === (Startseiten-Widget "Bestenliste" / "Ranking" / "Leaderboard", Pokémon + Riftbound; Styleguide "Startseite" + "Battle of Cards" > Bestenliste-Zeile; Code data.js cpHm2Board, home-layout.js homeBoard, riftbound/rb-layout.js rbBoard) */
html.cp-v2 .hm2-board { --hbd-list-h: calc(var(--ob-tap) * 5 + var(--ob-s-2)); }   /* Podest + 2 Zeilen; Karte "Miejsce n jest wolne" ist etwa gleich hoch (keine Luecke vor dem Footer) */
html.cp-v2 .hbd-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ob-s-3); }
html.cp-v2 .hbd-seg .cx-tab { display: inline-flex; align-items: center; gap: var(--ob-s-2); min-height: var(--ob-tap-min); cursor: pointer; }
html.cp-v2 .hbd-seg .cx-tab[aria-disabled="true"] { opacity: 0.5; cursor: default; }
html.cp-v2 .hm2-board { background-image: radial-gradient(120% 120px at 50% 0, rgb(var(--ob-violet-rgb) / 0.18), transparent); background-repeat: no-repeat; }   /* sanfter Schein oben, nur Zierde */
/* Modus-Chips + Pause */
html.cp-v2 .hbd-modes { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-3); }
html.cp-v2 .hbd-modes .v2-tabs { flex: 1; min-width: 0; margin-bottom: 0; }
html.cp-v2 .hbd-tabs button.v2-tab { position: relative; }
html.cp-v2 .hbd-tabs button.v2-tab.on { border-bottom-color: transparent; }   /* die Linie ist die Fortschrittsanzeige */
html.cp-v2 .hbd-pi { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--ob-violet); transform-origin: left; animation: hbdProg 5s linear forwards; }
html.cp-v2 .hm2-board:not(.is-auto) .hbd-pi { animation: none; }   /* Automatik aus: Linie voll als aktiver Zustand */
html.cp-v2 .hm2-board.is-hold .hbd-pi { animation-play-state: paused; }
html.cp-v2 .hm2-board:has(:focus-visible) .hbd-pi { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .hm2-board:hover .hbd-pi { animation-play-state: paused; } }
@keyframes hbdProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html.cp-v2 .hbd-pp { flex: none; color: var(--ob-mute); font-size: var(--ob-fs-sm); }
/* Karussell: zwei Slides, gleiche Hoehe (Flex streckt auf die hoehere) */
html.cp-v2 .hbd-view { min-width: 0; min-height: var(--hbd-list-h); margin: -2px; overflow: hidden; touch-action: pan-y; }   /* Rand -2 px + Slide-Innenabstand 2 px: Fokusrahmen nicht abgeschnitten, der Nachbar-Slide blitzt nicht am Rand durch */
html.cp-v2 .hbd-view:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 0; border-radius: var(--ob-r-sm); }
html.cp-v2 .hbd-track { display: flex; transition: transform var(--ob-dur-3) var(--ob-ease-out); }
html.cp-v2 .hbd-slide { flex: 0 0 100%; min-width: 0; padding: 2px; display: flex; flex-direction: column; gap: var(--ob-s-2); }
html.cp-v2 .hbd-slide > .bt2-blist { flex: none; align-content: start; }
html.cp-v2 .hbd-slide .bt2-bsc { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--ob-s-2); }
html.cp-v2 .hbd-slide .bt2-bsc small { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .bt2-pod.is-free { border-style: dashed; background: transparent; }
html.cp-v2 .bt2-pod.is-free :is(.bt2-bnick, b) { color: var(--ob-dim); }
html.cp-v2 .hbd-free { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-3); padding: var(--ob-s-3); border: 1px solid rgb(var(--ob-violet-rgb) / 0.4); border-radius: var(--ob-r-md); background: rgb(var(--ob-violet-rgb) / 0.1); }
html.cp-v2 .hbd-free > div { display: grid; gap: 2px; min-width: 0; }
html.cp-v2 .hbd-free strong { font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-ink); }
html.cp-v2 .hbd-free small { font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .hbd-free .cx2-btn { flex: none; }
/* Spielseite: freie Plaetze wie im Widget; die Karte traegt dann "Zagraj", der Haupt-Button darunter entfaellt (Schnellstart bleibt) */
html.cp-v2 .bt2:has(.bt2-free) #btPlay { display: none; }
@media (max-width: 600px) { html.cp-v2 .hbd-free { flex-direction: column; align-items: stretch; } }
@media (prefers-reduced-motion: reduce) { html.cp-v2 .hbd-track { transition: none; } html.cp-v2 .hbd-pi { animation: none; } }
html.cp-v2 .hbd-state { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--ob-s-3); padding: var(--ob-s-4); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .hbd-state p { margin: 0; color: var(--ob-mute); font-size: var(--ob-fs-md); line-height: var(--ob-lh-body); }
html.cp-v2 .hbd-state .v2-chip { min-height: var(--ob-tap); }
@media (max-width: 600px) {
  html.cp-v2 .hbd-bar { flex-direction: column; align-items: stretch; }
  html.cp-v2 .hbd-seg { width: 100%; }
  html.cp-v2 .hbd-seg .cx-tab { flex: 1; justify-content: center; min-height: var(--ob-tap); }
}
html.cp-v2[data-theme="light"] .hbd-seg { background: transparent !important; box-shadow: none !important; }
html.cp-v2[data-theme="light"] .hbd-seg .cx-tab { background: transparent !important; color: var(--ob-mute) !important; border: 0 !important; box-shadow: none !important; }
html.cp-v2[data-theme="light"] .hbd-seg .cx-tab.active { background: rgb(var(--ob-violet-rgb) / 0.12) !important; color: var(--ob-ink) !important; }
/* === /HOME BOARD === */

/* === BATTLE OF CARDS: ONE PIECE === (Spielseite /one-piece/games/battle-of-cards/, Hub /one-piece/games/; Akzent Bernstein wie Hub und Konto, Styleguide "Battle of Cards"; Gegenstueck zu den .bt2-rb-Regeln, Code games/battle-of-cards/battle.js GAME 'op') */
html.cp-v2 .bt2-op .bt2-eb, html.cp-v2 .bt2-op .bt2-eb2 { color: var(--ob-amber); }
html.cp-v2[data-theme="light"] .bt2-op :is(.bt2-eb, .bt2-eb2) { color: var(--ob-amber-ink); }
html.cp-v2 .bt2-op .bt2-tm i { background: var(--ob-amber); }
html.cp-v2[data-theme="light"] .bt2-op .bt2-tm i { background: var(--ob-amber-ink); }
html.cp-v2 .bt2-op .bt2-tm.warn i { background: var(--ob-coral); }
html.cp-v2[data-theme="light"] .bt2-op .bt2-tm.warn i { background: var(--ob-coral-ink); }
html.cp-v2 .bt2-op .bt2-steps li::before { color: var(--ob-amber); }
html.cp-v2[data-theme="light"] .bt2-op .bt2-steps li::before { color: var(--ob-amber-ink); }
html.cp-v2 .bt2-op .bt2-badge:not(.is-new) { border-color: rgb(var(--ob-amber-rgb) / 0.4); background: rgb(var(--ob-amber-rgb) / 0.12); color: var(--ob-amber); }
html.cp-v2[data-theme="light"] .bt2-op .bt2-badge:not(.is-new) { color: var(--ob-amber-ink); }
/* === BT2 REDESIGN: BOARD START === */
/* Ranking (Paket U2): #btRank in <section class="bt2-rank">; Segment Globalny | Moj wynik, Modus-Chips, Filterzeile, Podest, Kennzahl-Kacheln, Mini-Balken, Bottom-Sheet "Kraj".
   Styleguide: Battle of Cards (Bestenliste-Zeile, Kennzahl-Kachel), Handy, Formulare, Bottom-Sheet. Die Zeilen-Klassen .bt2-brow/.bt2-blist/.bt2-bflag/.bt2-bnick stehen weiter oben und gehoeren auch dem Startseiten-Widget. */
html.cp-v2 .bt2-rank { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--ob-s-3); }
html.cp-v2 .bt2-rank > .bt2-h2 { grid-column: 1; grid-row: 1; }
html.cp-v2 #btRank { display: contents; }
html.cp-v2 #btRank > [data-bd] { grid-column: 1 / -1; min-width: 0; }
html.cp-v2 #btRank > [data-bd="link"] { grid-column: 2; grid-row: 1; justify-self: end; }
html.cp-v2 #btRank > [data-bd]:empty, html.cp-v2 #btRank > [data-bd][hidden] { display: none; }
html.cp-v2 #btRank > [data-bd="body"] { display: grid; gap: var(--ob-s-2); align-content: start; }
html.cp-v2 .bt2-rlink { display: inline-flex; align-items: center; min-height: var(--ob-tap); padding: 0; border: 0; background: none; color: var(--ob-violet-text); font: inherit; font-size: var(--ob-fs-md); font-weight: 650; text-decoration: none; white-space: nowrap; cursor: pointer; }
html.cp-v2 .bt2-rlink:active { color: var(--ob-ink); }
html.cp-v2 .bt2-rank :is(button, a, input):focus-visible, html.cp-v2 .bt2-cs :is(button, input):focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
/* Segmente: Ansicht (gross, volle Breite) und Zeitraum (klein) */
html.cp-v2 .bt2-rank .bt2-bseg .cx-tab { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ob-tap-min); cursor: pointer; white-space: nowrap; }
html.cp-v2 .bt2-bseg-lg { display: flex; width: 100%; }
html.cp-v2 .bt2-bseg-lg .cx-tab { flex: 1; min-height: var(--ob-tap); font-size: var(--ob-fs-md); }
/* Modus-Chips: waagerecht scrollbar */
html.cp-v2 .bt2-mcs { display: flex; gap: var(--ob-s-2); padding: 2px; margin: -2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
html.cp-v2 .bt2-mcs::-webkit-scrollbar { display: none; }
html.cp-v2 .bt2-mc { flex: 0 0 auto; display: inline-flex; align-items: center; 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-mute); font: inherit; font-size: var(--ob-fs-sm); font-weight: 650; white-space: nowrap; cursor: pointer; }
html.cp-v2 .bt2-mc.is-on { border-color: rgb(var(--ob-violet-rgb) / 0.5); background: rgb(var(--ob-violet-rgb) / 0.14); color: var(--ob-ink); }
html.cp-v2 .bt2-mc:active { background: var(--ob-hover); }
/* Filterzeile (Globalny): Umfang-Chip + Zeitraum */
html.cp-v2 .bt2-flt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ob-s-2); }
html.cp-v2 .bt2-scope { display: inline-flex; align-items: center; gap: var(--ob-s-2); min-height: var(--ob-tap-min); max-width: 100%; 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: inherit; font-size: var(--ob-fs-sm); font-weight: 650; cursor: pointer; }
html.cp-v2 .bt2-scope > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .bt2-scope::after { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin: 0 2px 3px 2px; border-right: 1.5px solid var(--ob-mute); border-bottom: 1.5px solid var(--ob-mute); transform: rotate(45deg); }
html.cp-v2 .bt2-scope:active { background: var(--ob-hover); }
html.cp-v2 .bt2-scope .ob-icon { flex-shrink: 0; color: var(--ob-mute); }
/* Podest Top 3: Mitte hoeher (Reihenfolge im DOM = Rang, Platz per Grid) */
html.cp-v2 .bt2-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: var(--ob-s-2); align-items: end; margin: 0; padding: 0; list-style: none; }
html.cp-v2 .bt2-pod { display: grid; justify-items: center; align-content: start; gap: var(--ob-s-1); min-width: 0; padding: var(--ob-s-3) var(--ob-s-2); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); text-align: center; }
html.cp-v2 .bt2-pod:nth-child(1) { grid-column: 2; grid-row: 1; padding-block: var(--ob-s-4); border-color: rgb(var(--ob-violet-rgb) / 0.4); }
html.cp-v2 .bt2-pod:nth-child(2) { grid-column: 1; grid-row: 1; }
html.cp-v2 .bt2-pod:nth-child(3) { grid-column: 3; grid-row: 1; }
html.cp-v2 .bt2-pod .bt2-bnick { max-width: 100%; font-size: var(--ob-fs-sm); white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }   /* lange Namen umbrechen, max. 2 Zeilen */
html.cp-v2 .bt2-pod b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-md); font-weight: 800; color: var(--ob-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.cp-v2 .bt2-pod:nth-child(1) b { font-size: var(--ob-fs-lg); }
html.cp-v2 .bt2-pod.is-me { border-color: rgb(var(--ob-violet-rgb) / 0.5); background: rgb(var(--ob-violet-rgb) / 0.1); }
html.cp-v2 .bt2-pod.bt2-bsk b { display: block; width: 32px; height: 12px; border-radius: 3px; background: var(--ob-field); }
html.cp-v2 .bt2-pod.bt2-bsk .bt2-bnick { width: 70%; }
/* Zeilen im Ranking: Punkte und "n poj." in einer Zeile */
html.cp-v2 .bt2-rank .bt2-bsc { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--ob-s-2); }
/* Moj wynik: 4 Kennzahl-Kacheln + Mini-Balken */
html.cp-v2 .bt2-kts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ob-s-2); margin: 0; padding: 0; list-style: none; }
html.cp-v2 .bt2-kt { display: grid; align-content: start; gap: var(--ob-s-1); min-width: 0; padding: var(--ob-s-3); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .bt2-kl { 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); overflow-wrap: anywhere; }
html.cp-v2 .bt2-kt b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-lg); font-weight: 800; line-height: var(--ob-lh-tight); color: var(--ob-ink); font-variant-numeric: tabular-nums; }
html.cp-v2 .bt2-ks { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .bt2-kt.is-load b { color: var(--ob-dim); }
html.cp-v2 .bt2-rbox { display: grid; gap: var(--ob-s-2); margin-top: var(--ob-s-2); }
html.cp-v2 .bt2-rlbl { margin: 0; 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 .bt2-runs { display: flex; align-items: flex-end; gap: var(--ob-s-1); height: calc(var(--ob-s-6) * 2); margin: 0; padding: 0; list-style: none; }
html.cp-v2 .bt2-rbar { position: relative; flex: 1; display: flex; align-items: flex-end; height: 100%; min-width: 0; }
html.cp-v2 .bt2-rbar i { display: block; width: 100%; border-radius: var(--ob-r-xs) var(--ob-r-xs) 0 0; background: rgb(var(--ob-violet-rgb) / 0.35); }
html.cp-v2 .bt2-rbar.is-best i { background: var(--ob-aqua); }
html.cp-v2 .bt2-rbar.bt2-bsk i { background: var(--ob-field); }
html.cp-v2 .bt2-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Bottom-Sheet "Kraj" (Styleguide Bottom-Sheet; ab 900 px Popup) */
html.cp-v2 .bt2-csw { position: fixed; inset: 0; z-index: var(--ob-z-sheet); display: flex; align-items: flex-end; justify-content: center; }
html.cp-v2 .bt2-cs-bg { position: absolute; inset: 0; background: var(--ob-backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html.cp-v2 .bt2-cs { position: relative; display: flex; flex-direction: column; width: 100%; height: var(--ob-sheet-max); border: 1px solid var(--ob-line-2); border-bottom: 0; border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; background: var(--ob-pop); box-shadow: var(--ob-shadow-2); color: var(--ob-ink); padding-bottom: env(safe-area-inset-bottom, 0px); outline: none; animation: bt2-cs-in var(--ob-dur-2) var(--ob-ease-drawer) both; }
html.cp-v2 .bt2-cs-top { flex-shrink: 0; touch-action: none; }
html.cp-v2 .bt2-cs-grip { width: 40px; height: 5px; margin: var(--ob-s-2) auto 0; border-radius: var(--ob-r-pill); background: var(--ob-line-2); }
html.cp-v2 .bt2-cs-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-3); min-height: var(--ob-tap); padding: 0 var(--ob-s-2) 0 var(--ob-s-4); border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .bt2-cs-head h3 { margin: 0; font-size: var(--ob-fs-lg); font-weight: 800; line-height: var(--ob-lh-tight); color: var(--ob-ink); }
html.cp-v2 .bt2-cs-x { display: grid; place-items: center; flex-shrink: 0; width: var(--ob-tap); height: var(--ob-tap); padding: 0; border: 0; border-radius: var(--ob-r-sm); background: none; color: var(--ob-mute); cursor: pointer; }
html.cp-v2 .bt2-cs-x:active { background: var(--ob-hover); color: var(--ob-ink); }
html.cp-v2 .bt2-cs-find { flex-shrink: 0; padding: var(--ob-s-3) var(--ob-s-4); }
html.cp-v2 .bt2-cs-in { width: 100%; min-height: var(--ob-tap); padding: 0 var(--ob-s-3); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-ink); font: inherit; font-size: var(--ob-fs-input); }
html.cp-v2 .bt2-cs-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--ob-s-2) var(--ob-s-3); }
html.cp-v2 .bt2-cs-row { display: flex; align-items: center; gap: var(--ob-s-3); width: 100%; min-height: var(--ob-tap); padding: 0 var(--ob-s-3); border: 0; border-radius: var(--ob-r-sm); background: none; color: var(--ob-ink); font: inherit; font-size: var(--ob-fs-md); text-align: left; cursor: pointer; }
html.cp-v2 .bt2-cs-row[hidden] { display: none; }
html.cp-v2 .bt2-cs-row.is-on { background: rgb(var(--ob-violet-rgb) / 0.1); font-weight: 650; }
html.cp-v2 .bt2-cs-row:active { background: var(--ob-hover); }
html.cp-v2 .bt2-cs-row > .ob-icon:first-child { flex-shrink: 0; width: 22px; color: var(--ob-mute); }
html.cp-v2 .bt2-cs-row > .ob-icon:last-child:not(:first-child) { margin-left: auto; flex-shrink: 0; color: var(--ob-violet-text); }
html.cp-v2 .bt2-cs-n { flex: 1; min-width: 0; }
html.cp-v2 .bt2-cs-n small { display: block; font-size: var(--ob-fs-xs); font-weight: 500; color: var(--ob-mute); }
html.cp-v2 .bt2-cs-no { padding: var(--ob-s-3) var(--ob-s-4); }
html.cp-v2 .bt2-cs-no[hidden] { display: none; }
@keyframes bt2-cs-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (hover: hover) {
  html.cp-v2 .bt2-rlink:hover { color: var(--ob-ink); }
  html.cp-v2 .bt2-mc:not(.is-on):hover, html.cp-v2 .bt2-scope:hover { border-color: rgb(var(--ob-violet-rgb) / 0.55); color: var(--ob-ink); }
  html.cp-v2 .bt2-cs-row:hover, html.cp-v2 .bt2-cs-x:hover { background: var(--ob-hover); }
  html.cp-v2 .bt2-cs-x:hover { color: var(--ob-ink); }
}
@media (max-width: 365px) {
  html.cp-v2 .bt2-kts { gap: var(--ob-s-1); }
  html.cp-v2 .bt2-kt { padding: var(--ob-s-2); }
}
@media (min-width: 900px) {
  html.cp-v2 .bt2-csw { align-items: center; padding: var(--ob-s-6); }
  html.cp-v2 .bt2-cs { max-width: var(--ob-pop-w-s); height: min(85dvh, 560px); border-bottom: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); }
  html.cp-v2 .bt2-cs-grip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.cp-v2 .bt2-cs { animation: none; }
  html.cp-v2 .bt2-mc, html.cp-v2 .bt2-scope, html.cp-v2 .bt2-cs-row { transition: none; }
}
/* Spielstand im Duell (.bt2-sc): Optik wie vor dem Umbau (die alten Dein-Stand-Regeln wirkten bisher auch hier; gezielt erhalten) */
html.cp-v2 .bt2-sc { display: grid; align-content: start; gap: var(--ob-s-1); min-width: 0; padding: var(--ob-s-3); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .bt2-sc b { color: var(--ob-ink); font-family: var(--cp-font-mono); font-size: var(--ob-fs-lg); font-weight: 800; line-height: var(--ob-lh-tight); }
html.cp-v2 .bt2-sc span { color: var(--ob-mute); font-size: var(--ob-fs-xs); line-height: var(--ob-lh-body); overflow-wrap: anywhere; }
html.cp-v2 .bt2-rtabs { margin-bottom: var(--ob-s-1); }
html.cp-v2 .bt2-rtabs button.v2-tab { padding: 0; border-width: 0 0 2px; border-style: solid; background: none; font-family: inherit; cursor: pointer; }
/* === BT2 REDESIGN: BOARD END === */
/* === BT2 REDESIGN: SHEET START === */
/* "Zagraj" + Bottom-Sheet (Styleguide "Bottom-Sheet", "Battle of Cards" > Zagraj-Ablauf; Code games/battle-of-cards/battle.js) */
html.cp-v2 .bt2-launch { display: grid; gap: var(--ob-s-1); justify-items: stretch; }
html.cp-v2 .bt2-launch[hidden] { display: none; }
html.cp-v2 .bt2-launch .cx2-btn { width: 100%; }
html.cp-v2 .bt2-quick { justify-self: center; display: inline-flex; align-items: center; justify-content: center; min-height: var(--ob-tap); padding: 0 var(--ob-s-2); border: 0; background: none; color: var(--ob-mute); font: inherit; font-size: var(--ob-fs-md); font-weight: 650; text-align: center; cursor: pointer; }
html.cp-v2 .bt2-quick[hidden] { display: none; }
html.cp-v2 .bt2-quick:disabled { opacity: 0.45; cursor: default; }
html.cp-v2 .bt2-launch .bt2-note-err { text-align: center; }
html.cp-v2 .bt2-wz { position: fixed; inset: 0; z-index: calc(var(--ob-z-cookie) + 1); display: flex; align-items: flex-end; justify-content: center; background: var(--ob-backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--ob-dur-2) var(--ob-ease-in), visibility 0s linear var(--ob-dur-2); }
html.cp-v2 .bt2-wz[data-open="1"] { opacity: 1; visibility: visible; transition: opacity var(--ob-dur-2) var(--ob-ease-out), visibility 0s; }
html.cp-v2 .bt2-wz-box { display: flex; flex-direction: column; width: 100%; height: var(--ob-sheet-max); border: 1px solid var(--ob-line-2); border-bottom: 0; border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; background: var(--ob-pop); box-shadow: var(--ob-shadow-2); color: var(--ob-ink); overflow: hidden; touch-action: pan-y; transform: translateY(100%); transition: transform var(--ob-dur-2) var(--ob-ease-drawer); }
html.cp-v2 .bt2-wz[data-open="1"] .bt2-wz-box { transform: none; }
html.cp-v2 .bt2-wz-grip { display: block; width: 40px; height: 5px; margin: var(--ob-s-2) auto 0; border-radius: var(--ob-r-pill); background: var(--ob-line-2); flex-shrink: 0; }
html.cp-v2 .bt2-wz-h { display: flex; align-items: center; gap: var(--ob-s-3); flex: 0 0 auto; padding: 0 var(--ob-s-2) 0 var(--ob-s-4); border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .bt2-wz-h h2 { flex: 1; min-width: 0; margin: 0; padding: var(--ob-s-3) 0; font-size: var(--ob-fs-base); font-weight: 800; line-height: var(--ob-lh-tight); color: var(--ob-ink); outline: none; }
html.cp-v2 .bt2-wz-h .v2-ib { flex-shrink: 0; border-color: transparent; }
html.cp-v2 .bt2-wz-dots { display: flex; gap: var(--ob-s-1); flex-shrink: 0; }
html.cp-v2 .bt2-wz-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--ob-line-2); }
html.cp-v2 .bt2-wz-dots i.on { background: var(--ob-violet); }
html.cp-v2 .bt2-wz-view { flex: 1 1 auto; min-height: 0; overflow: hidden; overflow: clip; } /* clip: Fokus (z. B. Turnstile) darf die Schritt-Leiste nicht seitlich verschieben */
html.cp-v2 .bt2-wz-track { display: flex; width: 600%; height: 100%; transition: transform var(--ob-dur-3) var(--ob-ease-out); }
html.cp-v2 .bt2-wz-track.no-anim { transition: none; }
html.cp-v2 .bt2-wz-pane { flex: 0 0 calc(100% / 6); display: flex; flex-direction: column; align-content: flex-start; gap: var(--ob-s-2); min-width: 0; padding: var(--ob-s-3) var(--ob-s-4) var(--ob-s-4); overflow-y: auto; overscroll-behavior: contain; }
html.cp-v2 .bt2-wz-pane[inert] { visibility: hidden; transition: visibility 0s linear var(--ob-dur-3); }
html.cp-v2 .bt2-wz-act { display: flex; gap: var(--ob-s-2); flex: 0 0 auto; padding: var(--ob-s-3) var(--ob-s-4) calc(var(--ob-s-3) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ob-line); }
html.cp-v2 .bt2-wz-act .cx2-btn { flex: 1 1 0; }
html.cp-v2 .bt2-wz-act .cx2-btn.alt { flex: 0 0 34%; background: var(--ob-field); }
html.cp-v2 .bt2-wz-act [hidden] { display: none; }
html.cp-v2 .bt2-wlist { display: grid; gap: var(--ob-s-2); }
html.cp-v2 .bt2-wgap { margin-top: var(--ob-s-2); }
html.cp-v2 .bt2-wrow { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-3); width: 100%; min-height: var(--ob-tap); padding: var(--ob-s-2) var(--ob-s-3); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); color: var(--ob-ink); font: inherit; font-size: var(--ob-fs-md); font-weight: 650; text-align: left; cursor: pointer; }
html.cp-v2 .bt2-wrow.is-on { border-color: rgb(var(--ob-violet-rgb) / 0.55); background: rgb(var(--ob-violet-rgb) / 0.1); }
html.cp-v2 .bt2-wrow:disabled { opacity: 0.45; cursor: not-allowed; }
html.cp-v2 .bt2-wt { display: inline-flex; align-items: center; gap: var(--ob-s-2); min-width: 0; overflow-wrap: anywhere; }
html.cp-v2 .bt2-wt .ob-icon { flex-shrink: 0; }
html.cp-v2 .bt2-wt small { font-weight: 500; }
html.cp-v2 .bt2-ws { display: inline-flex; align-items: center; gap: var(--ob-s-3); flex-shrink: 0; }
html.cp-v2 .bt2-ws .bt2-st { margin-top: 0; }
html.cp-v2 .bt2-wm { font-family: var(--cp-font-mono); font-size: var(--ob-fs-sm); font-weight: 500; color: var(--ob-aqua); font-variant-numeric: tabular-nums; }
html.cp-v2 .bt2-wt .bt2-wm { font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 .bt2-wdot { display: block; width: 18px; height: 18px; border: 2px solid var(--ob-line-2); border-radius: 50%; flex-shrink: 0; }
html.cp-v2 .bt2-wrow.is-on .bt2-wdot { border-color: var(--ob-violet); background: radial-gradient(circle, var(--ob-violet) 0 40%, transparent 45%); }
html.cp-v2 .bt2-wnote { margin: 0; color: var(--ob-mute); font-size: var(--ob-fs-sm); line-height: var(--ob-lh-body); }
html.cp-v2 .bt2-wpool { margin: var(--ob-s-1) 0 0; font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-mute); font-variant-numeric: tabular-nums; }
html.cp-v2 .bt2-wpool.is-low { color: var(--ob-coral); }
html.cp-v2 .bt2-wz .bt2-mlbl { margin-top: var(--ob-s-2); }
html.cp-v2 .bt2-wchips { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); }
html.cp-v2 .bt2-wchips.is-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
html.cp-v2 .bt2-wchips.is-scroll::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .bt2-wchips.is-scroll { flex-wrap: wrap; overflow-x: visible; } } /* Maus: Serien umbrechen statt waagerecht scrollen */
html.cp-v2 .bt2-wchip { flex: 0 0 auto; 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-mute); font: inherit; font-size: var(--ob-fs-sm); font-weight: 650; cursor: pointer; }
html.cp-v2 .bt2-wchip.is-on { border-color: rgb(var(--ob-violet-rgb) / 0.5); background: rgb(var(--ob-violet-rgb) / 0.14); color: var(--ob-ink); }
html.cp-v2 .bt2-wchip:disabled { opacity: 0.45; cursor: not-allowed; }
html.cp-v2 .bt2-wlink { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-3); width: 100%; min-height: var(--ob-tap); padding: 0 var(--ob-s-3); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); color: var(--ob-ink); font: inherit; font-size: var(--ob-fs-md); font-weight: 650; text-align: left; cursor: pointer; }
html.cp-v2 .bt2-wlink .bt2-wm { color: var(--ob-mute); font-family: inherit; font-size: var(--ob-fs-sm); }
html.cp-v2 .bt2-wsearch { width: 100%; min-height: var(--ob-tap); padding: 0 var(--ob-s-3); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-ink); font: inherit; font-size: var(--ob-fs-input); }
html.cp-v2 .bt2-wck { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--ob-line-2); border-radius: var(--ob-r-xs); flex-shrink: 0; color: transparent; }
html.cp-v2 .bt2-wck .ob-icon { width: 14px; height: 14px; }
html.cp-v2 .bt2-wset.is-on .bt2-wck { border-color: var(--ob-violet); background: var(--ob-violet); color: rgb(var(--ob-white-rgb)); }
html.cp-v2 .bt2-wsum { display: grid; margin: 0; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .bt2-wsum > div { display: flex; justify-content: space-between; gap: var(--ob-s-3); padding: var(--ob-s-3); border-bottom: 1px solid var(--ob-line); font-size: var(--ob-fs-md); }
html.cp-v2 .bt2-wsum > div:last-child { border-bottom: 0; }
html.cp-v2 .bt2-wsum dt { flex-shrink: 0; color: var(--ob-mute); }
html.cp-v2 .bt2-wsum dd { margin: 0; font-family: var(--cp-font-mono); font-size: var(--ob-fs-sm); text-align: right; color: var(--ob-ink); overflow-wrap: anywhere; }
html.cp-v2 .bt2-wz #btNote:empty { display: none; }
@media (hover: hover) {
  html.cp-v2 .bt2-wrow:not(:disabled):hover, html.cp-v2 .bt2-wlink:hover, html.cp-v2 .bt2-wchip:not(:disabled):hover { border-color: var(--ob-line-2); }
  html.cp-v2 .bt2-wrow.is-on:not(:disabled):hover, html.cp-v2 .bt2-wchip.is-on:hover { border-color: rgb(var(--ob-violet-rgb) / 0.7); }
  html.cp-v2 .bt2-quick:not(:disabled):hover { color: var(--ob-ink); }
}
html.cp-v2 .bt2-wrow:active:not(:disabled), html.cp-v2 .bt2-wchip:active:not(:disabled), html.cp-v2 .bt2-wlink:active { background: rgb(var(--ob-violet-rgb) / 0.14); }
html.cp-v2 .bt2-wz :is(button, input):focus-visible, html.cp-v2 .bt2-quick:focus-visible, html.cp-v2 .bt2-wz-h h2:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
@media (min-width: 900px) {
  html.cp-v2 .bt2-wz { align-items: center; padding: var(--ob-s-6); }
  html.cp-v2 .bt2-wz-box { max-width: var(--ob-pop-w-s); height: min(85dvh, 640px); border-bottom: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); transform: translateY(var(--ob-s-4)); opacity: 0; transition: transform var(--ob-dur-2) var(--ob-ease-out), opacity var(--ob-dur-2) var(--ob-ease-out); }
  html.cp-v2 .bt2-wz[data-open="1"] .bt2-wz-box { opacity: 1; }
  html.cp-v2 .bt2-wz-grip { display: none; }
  html.cp-v2 .bt2-wz-h { padding-left: var(--ob-s-5); }
  html.cp-v2 .bt2-wz-pane { padding: var(--ob-s-4) var(--ob-s-5) var(--ob-s-5); }
  html.cp-v2 .bt2-wz-act { padding: var(--ob-s-3) var(--ob-s-5); }
}
@media (max-width: 365px) {
  html.cp-v2 .bt2-wz-pane { padding-inline: var(--ob-gutter-sm); }
  html.cp-v2 .bt2-wz-act { padding-inline: var(--ob-gutter-sm); }
  html.cp-v2 .bt2-wz-act .cx2-btn.alt { flex-basis: 38%; }
}
@media (prefers-reduced-motion: reduce) {
  html.cp-v2 .bt2-wz, html.cp-v2 .bt2-wz-box, html.cp-v2 .bt2-wz-track, html.cp-v2 .bt2-wz-pane { transition: none !important; }
}
html.cp-v2[data-theme="light"] .bt2-wz-act .cx2-btn.alt { color: var(--ob-ink) !important; }  /* globale Regel macht .cx2-btn im hellen Theme weiss */
html.cp-v2[data-theme="light"] .bt2-wm { color: var(--ob-aqua-ink); }
html.cp-v2[data-theme="light"] .bt2-wt .bt2-wm { color: var(--ob-dim); }
html.cp-v2[data-theme="light"] .bt2-wlink .bt2-wm { color: var(--ob-mute); }
html.cp-v2[data-theme="light"] .bt2-wpool.is-low { color: var(--ob-coral-ink); }
html.cp-v2[data-theme="light"] .bt2-wset.is-on .bt2-wck { border-color: var(--ob-violet-ink); background: var(--ob-violet-ink); }
html.cp-v2[data-theme="light"] .bt2-wrow.is-on .bt2-wdot { border-color: var(--ob-violet-ink); background: radial-gradient(circle, var(--ob-violet-ink) 0 40%, transparent 45%); }
/* === BT2 REDESIGN: SHEET END === */
/* === BT2 REDESIGN: PAGE START === */
/* Querverweise „Więcej“ unter dem Spiel (Listenzeilen: Fläche, Rand, Radius, Tippfläche wie die Zeilen der Sammlung) und Regelseite */
/* "Więcej" dezent (Inhaber 25.10.2026): Ueberschrift als Eyebrow, Zeilen ohne Kasten, nur Trennlinien, kleine gedaempfte Schrift */
html.cp-v2 .bt2-seo > .bt2-h2:has(+ .bt2-lk) { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ob-dim); }
html.cp-v2 .bt2-seo:has(> .bt2-lk) { gap: var(--ob-s-1); }
html.cp-v2 .bt2-lk { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; max-width: var(--ob-read-max); border-top: 1px solid var(--ob-line); }
html.cp-v2 .bt2-lk > li { border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .bt2-lk a { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-3); min-height: var(--ob-tap-min); padding: 0 var(--ob-s-1); color: var(--ob-mute); font-size: var(--ob-fs-sm); font-weight: 500; text-decoration: none; }
html.cp-v2 .bt2-lk-ar { color: var(--ob-dim); font-family: var(--cp-font-mono); }
@media (hover: hover) { html.cp-v2 .bt2-lk a:hover { color: var(--ob-ink); } }
html.cp-v2 .bt2-seo strong { color: var(--ob-ink); }
html.cp-v2 .bt2-more { align-items: center; }
html.cp-v2 .bt2-intro .bt2-tlink { justify-self: start; }
/* === BT2 REDESIGN: PAGE END === */
/* === BT2 REDESIGN: FOCUS START === */
/* Laufendes Spiel: Overlay ueber der Seite (Seite dahinter abgedunkelt, Handy unten verankert wie das Zagraj-Sheet, Desktop mittig). Kopf in drei Zeilen, Booster nur als Zieh-Animation hinter den Karten */
html.cp-v2 .bt2-stage:not([hidden]) { position: fixed; inset: 0; z-index: calc(var(--ob-z-cookie) + 1); display: flex; align-items: flex-end; justify-content: center; background: var(--ob-backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: bt2Fade var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .bt2-stage:not([hidden]) .bt2-play { max-height: calc(100dvh - var(--ob-s-6)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border-bottom: 0; border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; padding-bottom: calc(var(--ob-s-3) + env(safe-area-inset-bottom, 0px)); outline: none; animation: bt2Up var(--ob-dur-2) var(--ob-ease-out); }
@keyframes bt2Fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bt2Up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) {
  html.cp-v2 .bt2-stage:not([hidden]) { align-items: center; padding: var(--ob-s-6); }
  html.cp-v2 .bt2-stage:not([hidden]) .bt2-play { border-bottom: 1px solid var(--ob-line-2); border-radius: var(--ob-r-lg); padding-bottom: var(--ob-s-4); }
}
html.cp-v2 .bt2-top-r { display: inline-flex; align-items: center; gap: var(--ob-s-2); }
html.cp-v2 .bt2-xg { width: var(--ob-tap-min); height: var(--ob-tap-min); border-color: transparent; flex: none; }
html.cp-v2 .bt2-cd { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; color: var(--ob-ink); font-family: var(--cp-font-mono); font-size: calc(var(--ob-fs-display) * 2); font-weight: 800; line-height: 1; text-shadow: 0 2px 18px rgb(var(--ob-black-rgb) / 0.65); }
html.cp-v2 .bt2-cd[hidden] { display: none; }
html.cp-v2 .bt2-play { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ob-s-2) var(--ob-s-3); }
html.cp-v2 .bt2-play > * { grid-column: 1 / -1; }
html.cp-v2 .bt2-play .bt2-sc { grid-column: 1; grid-row: 2; display: flex; align-items: baseline; gap: var(--ob-s-2); padding: 0; border: 0; border-radius: 0; background: none; }
html.cp-v2 .bt2-play .bt2-tmw { display: contents; }
html.cp-v2 .bt2-play .bt2-tml { grid-column: 2; grid-row: 2; justify-self: end; color: var(--ob-ink); font-size: var(--ob-fs-md); font-weight: 700; }
html.cp-v2 .bt2-play .bt2-tml > span:first-child { display: none; }
html.cp-v2 .bt2-play .bt2-tm { grid-column: 1 / -1; grid-row: 3; }
html.cp-v2 .bt2-play .bt2-q { grid-column: 1; grid-row: 4; font-size: var(--ob-fs-md); }
html.cp-v2 .bt2-play .bt2-tools { grid-column: 2; grid-row: 4; }
html.cp-v2 .bt2-play[data-mode="learn"] .bt2-q { grid-column: 1; grid-row: 2; }
html.cp-v2 .bt2-play[data-mode="learn"] .bt2-tools { grid-column: 2; grid-row: 2; }
html.cp-v2 .bt2-decks { position: absolute; inset: 0; align-items: center; z-index: 1; }
html.cp-v2 .bt2-dnm { display: none; }
html.cp-v2 .bt2-lbl { min-height: 0; }
html.cp-v2 .bt2-res, html.cp-v2 .bt2-hint { min-height: 0; }
html.cp-v2 .bt2-res:empty, html.cp-v2 .bt2-hint:empty { display: none; }
/* Ergebnis und Schliessen-Warnung liegen ueber dem Spiel-Overlay */
html.cp-v2 .bt2-ov { z-index: calc(var(--ob-z-cookie) + 2); }
html.cp-v2 .bt2-cfp { margin: 0; color: var(--ob-mute); font-size: var(--ob-fs-md); line-height: var(--ob-lh-body); }
html.cp-v2 .bt2-cfend { color: var(--ob-coral); border-color: rgb(var(--ob-coral-rgb) / 0.5); }
html.cp-v2[data-theme="light"] .bt2-cfend { color: var(--ob-coral-ink); }
@media (max-width: 899px) {
  html.cp-v2 .bt2-cf { align-items: center; padding: var(--ob-s-4); }
  html.cp-v2 .bt2-cf .bt2-res-box { max-width: var(--ob-pop-w-m); border-radius: var(--ob-r-md); border-bottom: 1px solid var(--ob-line-2); }
}
@media (prefers-reduced-motion: reduce) {
  html.cp-v2 .bt2-stage:not([hidden]), html.cp-v2 .bt2-stage:not([hidden]) .bt2-play { animation: none; }
}
/* === BT2 REDESIGN: FOCUS END === */

/* Ersatz-Booster One Piece (keine Booster-Bilder): Verlauf aus Bernstein-Tokens mit Foliennaht; Rueckseite der Karte im selben Verlauf (kein Kartenrueckseiten-Bild vorhanden) */
html.cp-v2 .bt2-op .bt2-face.bt2-bk { background: linear-gradient(160deg, var(--ob-amber-ink) 0%, var(--ob-amber) 55%, var(--ob-holo-amber) 100%); box-shadow: inset 0 0 0 4px rgb(var(--ob-white-rgb) / 0.28); }
/* Spiele-Hub One Piece: Akzent Bernstein im Banner, Platzhalter-Kunst (Booster/Karten) bis es Bilder gibt */
html.cp-v2 .gm2-op .gm2-bn { --bn-acc: var(--ob-amber); --bn-acc-rgb: var(--ob-amber-rgb); }
html.cp-v2 .gm2-bn-ph { position: absolute; display: block; border-radius: var(--ob-r-xs); background: linear-gradient(160deg, var(--ob-amber) 0%, var(--ob-holo-amber) 35%, var(--ob-amber-ink) 100%); box-shadow: inset 0 0 0 3px rgb(var(--ob-white-rgb) / 0.3), 0 18px 26px -8px rgb(var(--ob-black-rgb) / 0.6); }
html.cp-v2 .gm2-bn-pk.gm2-bn-ph { aspect-ratio: 306 / 560; }
/* === /BATTLE OF CARDS: ONE PIECE === */

/* Suchergebnisse (One Piece / Riftbound): SEO-Textblock der Seite nicht unter den Treffern zeigen */
html.cp-v2.cp-rs-res .home-seo-content { display: none !important; }

/* Rote Set-Logos (OP-17, OP-18) auf dunklem Grund: heller Schein fuer Kontrast */
html.cp-v2:not([data-theme="light"]) img[src*="/op-set-logos/op17"], html.cp-v2:not([data-theme="light"]) img[src*="/op-set-logos/op18"] { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ob-ink) 45%, transparent)); }
/* Ergebnisseite „Alle“ (Set erkannt): links Produktarten zum Wählen (Verlauf darunter, rechts Sprung zur Gruppe), Quick Links in einem Block */
html.cp-v2 .v2-spark path.a { fill: none; stroke: none; }
html.cp-v2 .v2-tl-pick .v2-tl-row { grid-template-columns: minmax(0, 1fr) 72px auto; padding: 8px 10px; border-radius: var(--ob-r-xs); }
html.cp-v2 .v2-tl-pick .v2-tl-row.on { background: var(--ob-field); box-shadow: inset 2px 0 0 var(--ob-violet); }
html.cp-v2 .v2-tl-pick .v2-tl-row.on .v2-tl-n b { color: var(--ob-violet-text); }
html.cp-v2 .v2-tl-pick .v2-tl-row:focus-visible { outline: 2px solid var(--ob-violet); outline-offset: -2px; }
html.cp-v2 .v2-tl-pick .v2-spark { width: 72px; }
html.cp-v2 .v2-rs [data-v2rs-g] { scroll-margin-top: 96px; }
html.cp-v2 .v2-pp-chg .v2-big.v2-dn { color: var(--ob-green); }
html.cp-v2 .v2-pp-chg .v2-big.v2-up { color: var(--ob-coral); }
html.cp-v2[data-theme="light"] .v2-pp-chg .v2-big.v2-dn { color: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] .v2-pp-chg .v2-big.v2-up { color: var(--ob-coral-ink); }
html.cp-v2 .v2-rs .v2-links { gap: 0; padding: 12px 8px 6px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .v2-rs .v2-links > .v2-lbl { padding: 0 8px 6px; }
html.cp-v2 .v2-rs .v2-links > .v2-lbl + .v2-link { border-top: 0; }
html.cp-v2 .v2-rs .v2-link { padding: 10px 8px; border: 0; border-top: 1px solid var(--ob-line); border-radius: var(--ob-r-xs); background: transparent; }
@media (hover: hover) and (pointer: fine) { html.cp-v2 .v2-tl-pick .v2-tl-row:hover, html.cp-v2 .v2-rs .v2-link:hover { background: var(--ob-hover); } }
html.cp-v2[data-theme="light"] .v2-tl-pick .v2-tl-row.on .v2-tl-n b { color: var(--ob-violet-text) !important; }
@media (max-width: 899px) {
  html.cp-v2 .v2-tl-pick .v2-tl-row { grid-template-columns: 1fr; padding: 10px; border-radius: var(--ob-r-md); }
  html.cp-v2 .v2-tl-pick .v2-tl-row.on { border-color: var(--ob-violet); box-shadow: none; }
  html.cp-v2 .v2-tl-pick .v2-spark { width: 100%; }
  html.cp-v2 .v2-rs [data-v2rs-g] { scroll-margin-top: 140px; }
  html.cp-v2 .v2-rs-all .v2-pp-best.v2-pp-chg { display: grid; }
  html.cp-v2 .v2-pp-chg .v2-chg-s { grid-column: 1 / -1; justify-self: start; }
}

/* Sealed-Übersicht auf /sets/ (Tab Sealed): Aufbau wie das Startseiten-Widget, Kennzahlen 1/3, Verlauf 2/3; Suche + Produktkacheln darunter */
html.cp-v2 .cp-hl-sec.hc-pg { margin-bottom: var(--ob-s-4); }
/* Kennzahlen/Verlauf wie im Hauptverlauf der Sammlung (260-320 px + Rest), kein 1/3-2/3 mehr */
html.cp-v2 .cp-hl-sec.hc-pg > .sv-toolbar { margin-top: var(--ob-s-4); }
@media (max-width: 899px) { html.cp-v2 .cp-hl-sec.hc-pg .hc-ovsum { grid-template-columns: minmax(0, 1fr); } }

/* Sealed-Tab (Sammlung): Produkte nach Serie gruppiert, Serien-Kopf wie in der Set-Liste */
html.cp-v2 .cp-hl-sec.hc-pg .sv-ser { margin-top: var(--ob-s-5); }
html.cp-v2 .cp-hl-sec.hc-pg .sv-ser .cx-series-head { display: flex; align-items: baseline; gap: var(--ob-s-3); margin: 0 0 var(--ob-s-3); }
html.cp-v2 .cp-hl-sec.hc-pg .sv-ser .cx-series-head h2 { margin: 0; font-size: var(--ob-fs-base); color: var(--ob-ink); background: none; -webkit-text-fill-color: currentColor; }
html.cp-v2 .cp-hl-sec.hc-pg .sv-ser .cx-series-head span { font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); color: var(--ob-dim); }

/* Sealed-Tab Riftbound / One Piece: Produkte nach Set gruppiert (Kopf: Logo, Name, Kürzel · Stückzahl), darunter die Kacheln */
html.cp-v2 .cx2 .hc-sealset { margin: var(--ob-s-4) 0 0; }
html.cp-v2 .cx2 .hc-sealset .cx-series-head { display: flex; justify-content: flex-start; align-items: center; gap: var(--ob-s-3); margin: 0 0 var(--ob-s-3); }
html.cp-v2 .cx2 .hc-sealset .cx-series-head h2 { margin: 0; }
html.cp-v2 .cx2 .hc-sealset .cx-series-head span { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 .cx2 .hc-sealset-logo { height: var(--ob-s-7); width: auto; max-width: 96px; object-fit: contain; }
html.cp-v2 .cx2 .hc-sealset-logo.is-hidden, html.cp-v2 .cx2 .hc-sealset-logo[hidden] { display: none; }
html.cp-v2 .cx2 .hc-sealset[hidden] { display: none; }
/* Sealed-Tab ohne Produkte: Aufforderung rechts neben den leeren Kennzahlen (Schrittliste, Mono-Ziffern) */
html.cp-v2 .cp-hl-sec .sd-empty-v2 { display: grid; gap: var(--ob-s-3); align-content: start; margin-top: 0; }
html.cp-v2 .cp-hl-sec .sd-empty-v2 h3 { margin: 0; font-size: var(--ob-fs-base); color: var(--ob-ink); }
html.cp-v2 .cp-hl-sec .sd-empty-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ob-s-2); counter-reset: sdstep; font-size: var(--ob-fs-md); color: var(--ob-mute); }
html.cp-v2 .cp-hl-sec .sd-empty-steps li { display: flex; gap: var(--ob-s-3); align-items: baseline; counter-increment: sdstep; }
html.cp-v2 .cp-hl-sec .sd-empty-steps li::before { content: counter(sdstep); font-family: var(--cp-font-mono); font-size: var(--ob-fs-sm); font-weight: 600; color: var(--ob-violet-text); }
html.cp-v2 .cp-hl-sec .sd-empty-v2 .cx-link-btn { justify-self: start; }
html.cp-v2 .cp-hl-sec .hc-stats .hc-st-invested .cx-stat-value:not(:has(*)), html.cp-v2 .cp-hl-sec .hc-stats .cx-stat-value:not(:has(*)) { color: var(--ob-mute); }

/* === BATTLE VERSUS === (Styleguide "Battle of Cards" > Regel "Versus (25.10.2026, Inhaber)"; Code games/battle-of-cards/battle.js, battle-board.js; Violett = Auswahl/Einladung in allen Spielen) */
/* "Moje pojedynki": erste Zeile unter "Więcej" (Zeile wie .bt2-lk a, aber Button) mit Zaehler-Chip */
html.cp-v2 .bt2-lk-b { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-3); width: 100%; min-height: var(--ob-tap-min); padding: 0 var(--ob-s-1); border: 0; background: transparent; color: var(--ob-mute); font: inherit; font-size: var(--ob-fs-sm); font-weight: 500; text-align: left; cursor: pointer; }
html.cp-v2 .bt2-lk-r { display: inline-flex; align-items: center; gap: var(--ob-s-3); }
html.cp-v2 .bt2-lk-c { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 var(--ob-s-2); border: 1px solid rgb(var(--ob-violet-rgb) / 0.4); border-radius: var(--ob-r-pill); background: rgb(var(--ob-violet-rgb) / 0.12); color: var(--ob-violet-text); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 800; font-variant-numeric: tabular-nums; }
html.cp-v2 .bt2-lk-c[hidden] { display: none; }
@media (hover: hover) { html.cp-v2 .bt2-lk-b:hover { color: var(--ob-ink); } }
/* Modus-Zeile Versus: Zustands-Chip violett */
html.cp-v2 .bt2-st.is-v { border-color: rgb(var(--ob-violet-rgb) / 0.4); background: rgb(var(--ob-violet-rgb) / 0.12); color: var(--ob-violet-text); }
/* Schritt "Przeciwnik": Auswahlpunkt-Zeilen mit Flagge, Spitzname, rechts Bilanz/Level; nicht waehlbar = 55 % */
html.cp-v2 .bt2-opp-list { display: grid; gap: var(--ob-s-2); }
html.cp-v2 .bt2-ot { gap: var(--ob-s-3); flex: 1 1 auto; }
html.cp-v2 .bt2-onk { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .bt2-orow:disabled, html.cp-v2 .bt2-orow.is-blocked { opacity: 0.55; }
html.cp-v2 .bt2-orow .bt2-wm { color: var(--ob-mute); }
html.cp-v2 .bt2-orow .bt2-bflag { flex-shrink: 0; }
/* Einladungs-Karte ueber "Zagraj": Violett 10 % auf --ob-surface, Rand Violett 55 % */
html.cp-v2 .bt2-inv { display: grid; gap: var(--ob-s-2); padding: var(--ob-s-4); border: 1px solid rgb(var(--ob-violet-rgb) / 0.55); border-radius: var(--ob-r-md); background: linear-gradient(rgb(var(--ob-violet-rgb) / 0.1), rgb(var(--ob-violet-rgb) / 0.1)), var(--ob-surface); }
html.cp-v2 .bt2-inv-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-violet-text); }
html.cp-v2 .bt2-inv-t { margin: 0; color: var(--ob-ink); font-size: var(--ob-fs-md); font-weight: 650; line-height: var(--ob-lh-tight); overflow-wrap: anywhere; }
html.cp-v2 .bt2-inv-l { margin: 0; color: var(--ob-mute); font-size: var(--ob-fs-md); line-height: var(--ob-lh-body); }
html.cp-v2 .bt2-inv-err[hidden] { display: none; }
html.cp-v2 .bt2-inv-a { display: grid; grid-template-columns: 1fr 1.8fr; gap: var(--ob-s-2); margin-top: var(--ob-s-1); }
html.cp-v2 .bt2-inv-a.is-one { grid-template-columns: 1fr; }
html.cp-v2 .bt2-inv-a .cx2-btn { width: 100%; }
/* Duell-Zeile (Bottom-Sheet "Moje pojedynki") = Bestenliste-Zeile mit Status-Chip rechts */
html.cp-v2 .bt2-my-pane { display: grid; align-content: start; gap: var(--ob-s-2); height: 100%; }
html.cp-v2 .bt2-my-pane .bt2-mlbl { margin-top: var(--ob-s-2); }
html.cp-v2 .bt2-drow { grid-template-columns: 22px minmax(0, 1fr) auto; }
html.cp-v2 button.bt2-drow { width: 100%; color: var(--ob-ink); font: inherit; text-align: left; cursor: pointer; }
html.cp-v2 .bt2-vst { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: var(--ob-field); color: var(--ob-mute); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.cp-v2 .bt2-vst.is-turn { border-color: rgb(var(--ob-violet-rgb) / 0.4); background: rgb(var(--ob-violet-rgb) / 0.12); color: var(--ob-violet-text); }
html.cp-v2 .bt2-vst.is-w { border-color: rgb(var(--ob-green-rgb) / 0.4); background: rgb(var(--ob-green-rgb) / 0.12); color: var(--ob-green); }
html.cp-v2 .bt2-vst.is-l { border-color: rgb(var(--ob-coral-rgb) / 0.4); background: rgb(var(--ob-coral-rgb) / 0.12); color: var(--ob-coral); }
html.cp-v2 .bt2-vsum { display: grid; gap: var(--ob-s-1); margin-top: var(--ob-s-2); padding: var(--ob-s-3) var(--ob-s-4); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); color: var(--ob-mute); font-size: var(--ob-fs-md); }
html.cp-v2 .bt2-vsum b, html.cp-v2 .bt2-vsum-p { margin-left: var(--ob-s-2); color: var(--ob-ink); font-family: var(--cp-font-mono); font-size: var(--ob-fs-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
html.cp-v2 .bt2-vsum-p { margin-left: 0; }
/* Ziel-Chip im Overlay: Koralle fuer B (Cel), grau fuer A (vs Name) */
html.cp-v2 .bt2-sc .bt2-vschip { margin-left: var(--ob-s-2); align-self: center; min-width: 0; max-width: 62%; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: var(--ob-field); color: var(--ob-mute); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 800; white-space: nowrap; }
html.cp-v2 .bt2-sc .bt2-vschip[hidden] { display: none; }
html.cp-v2 .bt2-sc .bt2-vschip.is-b { border-color: rgb(var(--ob-coral-rgb) / 0.4); background: rgb(var(--ob-coral-rgb) / 0.12); color: var(--ob-coral); }
/* Ergebnis: zwei Levels gross (Mono), Sieger gruen, dazwischen VS; darunter Zeilenliste mit Bonus-Zeilen */
html.cp-v2 .bt2-vsbig { display: grid; justify-items: center; gap: var(--ob-s-2); }
html.cp-v2 .bt2-vseb { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 800; letter-spacing: var(--ob-track-caps); text-transform: uppercase; color: var(--ob-mute); text-align: center; overflow-wrap: anywhere; }
html.cp-v2 .bt2-vseb.ok { color: var(--ob-green); }
html.cp-v2 .bt2-vseb.bad { color: var(--ob-coral); }
html.cp-v2 .bt2-vsrow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--ob-s-3); width: 100%; }
html.cp-v2 .bt2-vsd { display: grid; justify-items: center; gap: 2px; min-width: 0; }
html.cp-v2 .bt2-vsd small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ob-mute); font-size: var(--ob-fs-sm); font-weight: 650; }
html.cp-v2 .bt2-vsd b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-display); font-weight: 800; line-height: 1.1; color: var(--ob-ink); font-variant-numeric: tabular-nums; }
html.cp-v2 .bt2-vsd.is-win b { color: var(--ob-green); }
html.cp-v2 .bt2-vsx { padding-bottom: var(--ob-s-2); color: var(--ob-dim); font-family: var(--cp-font-mono); font-size: var(--ob-fs-md); font-weight: 700; }
html.cp-v2 .bt2-vsl dd.ok { color: var(--ob-green); }
html.cp-v2 .bt2-vsl dd.tot { color: var(--ob-ink); font-weight: 800; }
html.cp-v2[data-theme="light"] .bt2-vseb.ok, html.cp-v2[data-theme="light"] .bt2-vsd.is-win b, html.cp-v2[data-theme="light"] .bt2-vsl dd.ok, html.cp-v2[data-theme="light"] .bt2-vst.is-w { color: var(--ob-green-ink); }
html.cp-v2[data-theme="light"] .bt2-vseb.bad, html.cp-v2[data-theme="light"] .bt2-vst.is-l, html.cp-v2[data-theme="light"] .bt2-sc .bt2-vschip.is-b { color: var(--ob-coral-ink); }
html.cp-v2[data-theme="light"] .bt2-inv .cx2-btn.alt { color: var(--ob-ink) !important; }
@media (max-width: 600px) {
  html.cp-v2 .bt2-sc .bt2-vschip { max-width: 56%; }
  html.cp-v2 .bt2-vsd b { font-size: var(--ob-fs-xl); }
}
/* === /BATTLE VERSUS === */
/* Versus: Glocken-Text-Icon „VS“ und Versus-Kennzahlen im Konto (25.10.2026) */
html.cp-v2 .nv-tile.vs { color: var(--ob-violet-text); background: color-mix(in srgb, var(--ob-violet) 10%, var(--ob-field)); }
html.cp-v2 .nv-tile.vs.ok { color: var(--ob-green); background: color-mix(in srgb, var(--ob-green) 14%, var(--ob-field)); }
html.cp-v2 .nv-vs { font-family: var(--cp-font-mono); font-weight: 700; font-size: var(--ob-fs-xs); letter-spacing: 0; line-height: 1; }
html.cp-v2[data-theme="light"] .nv-tile.vs.ok { color: var(--ob-green-ink); }
html.cp-v2 .ko2-bt .ko2-kpis:last-child { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* === BATTLE: HERO === (Kampf-Banner oben auf der Spielseite; Styleguide "Battle of Cards" > Battle-Hero; Markup tools/make_battle_pages.js, Code games/battle-of-cards/battle-hero.js)
   Immer dunkel wie die Banner-Kachel (.gm2-bn). Ohne JS bzw. bei reduzierter Bewegung gilt die Endstellung (CSS-Standard). */
html.cp-v2 .bt2 { --bh-a: var(--ob-aqua); --bh-a-rgb: var(--ob-aqua-rgb); --bh-b: var(--ob-coral); --bh-b-rgb: var(--ob-coral-rgb); }
html.cp-v2 .bt2[data-game="rb"] { --bh-a: var(--ob-coral); --bh-a-rgb: var(--ob-coral-rgb); --bh-b: var(--ob-violet); --bh-b-rgb: var(--ob-violet-rgb); }
html.cp-v2 .bt2[data-game="op"] { --bh-a: var(--ob-amber); --bh-a-rgb: var(--ob-amber-rgb); --bh-b: var(--ob-coral); --bh-b-rgb: var(--ob-coral-rgb); }
html.cp-v2 .bt2-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 340px; min-width: 0;
  border-radius: var(--ob-r-lg); border: 1px solid var(--ob-banner-line); color: var(--ob-banner-ink); box-shadow: var(--ob-shadow-1); cursor: pointer;
  background: radial-gradient(420px 300px at 75% 40%, rgb(var(--bh-a-rgb) / 0.16), transparent 70%), radial-gradient(520px 340px at 10% 100%, rgb(var(--ob-violet-rgb) / 0.22), transparent 65%), var(--ob-banner-bg); }
html.cp-v2 .bt2-hero-fx { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
html.cp-v2 .bt2-hero-flash { position: absolute; inset: 0; z-index: 4; background: rgb(var(--ob-white-rgb)); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
html.cp-v2 .bt2-hero-txt { position: relative; z-index: 3; display: grid; align-content: center; gap: var(--ob-s-3); min-width: 0; padding: var(--ob-s-7); }
html.cp-v2 .bt2-hero-eb { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; letter-spacing: var(--ob-track-caps); line-height: 1; text-transform: uppercase; color: var(--bh-a); }
html.cp-v2 .bt2 .bt2-hero-t { display: grid; gap: 6px; font-size: var(--ob-fs-base); font-weight: 650; line-height: var(--ob-lh-tight); color: var(--ob-banner-mute); text-wrap: balance; }
html.cp-v2 .bt2 .bt2-hero-t, html.cp-v2[data-theme="light"] .bt2 .bt2-hero-t { background: none !important; -webkit-text-fill-color: currentColor !important; } /* v1-/Hell-Verlauf auf h1 abschalten: Banner bleibt in beiden Themes gleich */
html.cp-v2 .bt2-hero-t1 { font-size: var(--ob-fs-display); font-weight: 800; line-height: var(--ob-lh-tight); letter-spacing: -0.02em; color: var(--ob-banner-ink); overflow-wrap: anywhere; }
html.cp-v2 .bt2-hero-t2 { font-size: var(--ob-fs-base); font-weight: 650; color: var(--ob-banner-mute); }
html.cp-v2 .bt2-hero-p { max-width: 34ch; color: var(--ob-banner-mute); font-size: var(--ob-fs-base); line-height: var(--ob-lh-body); }
html.cp-v2 .bt2-hero-ch { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); margin: 0; padding: 0; list-style: none; }
html.cp-v2 .bt2-hero-ch li { padding: var(--ob-s-2) var(--ob-s-3); border-radius: var(--ob-r-pill); border: 1px solid var(--ob-banner-line); background: var(--ob-banner-field); color: var(--ob-banner-mute); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; line-height: 1; white-space: nowrap; }
html.cp-v2 .bt2-hero-art { position: relative; z-index: 3; min-width: 0; min-height: 300px; }
html.cp-v2 .bt2-hero-shake { position: absolute; inset: 0; }
html.cp-v2 .bt2-hero-c { position: absolute; top: 50%; left: 50%; width: 128px; aspect-ratio: var(--ob-ratio-card); border-radius: var(--ob-r-xs); overflow: hidden; will-change: transform, opacity; }
html.cp-v2 .bt2-hero-c img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
html.cp-v2 .bt2-hero-c::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--bh-g); box-shadow: inset 0 0 18px rgb(var(--bh-g-rgb) / 0.45); }
html.cp-v2 .bt2-hero-c.a { --bh-g: var(--bh-a); --bh-g-rgb: var(--bh-a-rgb); box-shadow: 0 0 34px rgb(var(--bh-a-rgb) / 0.55), 0 16px 40px rgb(var(--ob-black-rgb) / 0.6); transform: translate(-128%, -50%) rotate(-9deg); }
html.cp-v2 .bt2-hero-c.b { --bh-g: var(--bh-b); --bh-g-rgb: var(--bh-b-rgb); box-shadow: 0 0 34px rgb(var(--bh-b-rgb) / 0.55), 0 16px 40px rgb(var(--ob-black-rgb) / 0.6); transform: translate(28%, -50%) rotate(9deg); }
html.cp-v2 .bt2-hero-vs { position: absolute; z-index: 5; left: 50%; top: 50%; display: grid; place-items: center; width: 58px; height: 58px; border-radius: var(--ob-r-pill); border: 2px solid var(--ob-amber); background: var(--ob-banner-bg); color: var(--ob-banner-ink);
  font-family: var(--cp-font-mono); font-size: var(--ob-fs-base); font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 0 26px rgb(var(--ob-amber-rgb) / 0.55); transform: translate(-50%, -50%); will-change: transform, opacity; }
@media (max-width: 899px) {
  html.cp-v2 .bt2-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  html.cp-v2 .bt2-hero-art { order: -1; min-height: 210px; }
  html.cp-v2 .bt2-hero-c { width: 96px; }
  html.cp-v2 .bt2-hero-txt { gap: var(--ob-s-3); padding: var(--ob-s-1) var(--ob-s-5) var(--ob-s-5); }
  html.cp-v2 .bt2-hero-t1 { font-size: var(--ob-fs-xl); }
  html.cp-v2 .bt2-hero-vs { width: 46px; height: 46px; font-size: var(--ob-fs-sm); }
}
@media (max-width: 365px) {
  html.cp-v2 .bt2-hero-t1 { font-size: var(--ob-fs-lg); }
  html.cp-v2 .bt2-hero-txt { padding-inline: var(--ob-s-4); }
}
@media (prefers-reduced-motion: reduce) {
  html.cp-v2 .bt2-hero-fx, html.cp-v2 .bt2-hero-flash { display: none; }
}
/* === /BATTLE: HERO === */

/* === PACK: HERO === (Booster-Banner oben auf der Pack-Simulator-Uebersicht; Styleguide "Pack-Simulator" > Pack-Hero; Markup pack-simulator/simcoll.js heroV2(), Code pack-simulator/packsim-hero.js)
   Immer dunkel wie die Banner-Kachel (.gm2-bn, .bt2-hero). Ohne JS bzw. bei reduzierter Bewegung gilt das Endbild (CSS-Standard): Booster offen, drei Karten gefaechert, Mitte = Treffer. */
html.cp-v2 .ps2-hhead { display: grid; gap: var(--ob-s-3); margin-bottom: var(--ob-s-4); min-width: 0; }
html.cp-v2 .ps2-hhead .ps2-tag, html.cp-v2 .ps2-hhead .ps2-src { justify-self: start; }
html.cp-v2 .ps2-hero { --u: 104px; --ph-a: var(--ob-aqua); --ph-a-rgb: var(--ob-aqua-rgb); --ph-b: var(--ob-violet); --ph-b-rgb: var(--ob-violet-rgb);
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 340px; min-width: 0;
  border-radius: var(--ob-r-lg); border: 1px solid var(--ob-banner-line); color: var(--ob-banner-ink); box-shadow: var(--ob-shadow-1); cursor: pointer;
  background: radial-gradient(380px 300px at 72% 45%, rgb(var(--ph-a-rgb) / 0.18), transparent 70%), radial-gradient(520px 340px at 8% 100%, rgb(var(--ph-b-rgb) / 0.22), transparent 65%), var(--ob-banner-bg); }
html.cp-v2 .ps2-hero[data-game="rb"] { --ph-a: var(--ob-coral); --ph-a-rgb: var(--ob-coral-rgb); --ph-b: var(--ob-violet); --ph-b-rgb: var(--ob-violet-rgb); }
html.cp-v2 .ps2-hero[data-game="op"] { --ph-a: var(--ob-amber); --ph-a-rgb: var(--ob-amber-rgb); --ph-b: var(--ob-coral); --ph-b-rgb: var(--ob-coral-rgb); }
html.cp-v2 .ps2-hero-fx { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
html.cp-v2 .ps2-hero-flash { position: absolute; inset: 0; z-index: 6; background: rgb(var(--ob-white-rgb)); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
html.cp-v2 .ps2-hero-txt { position: relative; z-index: 3; display: grid; align-content: center; gap: var(--ob-s-3); min-width: 0; padding: var(--ob-s-7); }
html.cp-v2 .ps2-hero-eb { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; letter-spacing: var(--ob-track-caps); line-height: 1; text-transform: uppercase; color: var(--ph-a); }
html.cp-v2 .ps2 .ps2-hero-t { display: grid; gap: 6px; margin: 0; font-size: var(--ob-fs-base); font-weight: 650; line-height: var(--ob-lh-tight); color: var(--ob-banner-mute); text-wrap: balance; }
html.cp-v2 .ps2 .ps2-hero-t, html.cp-v2[data-theme="light"] .ps2 .ps2-hero-t { background: none !important; -webkit-text-fill-color: currentColor !important; } /* v1-/Hell-Verlauf auf h1 abschalten: Banner bleibt in beiden Themes gleich */
html.cp-v2 .ps2-hero-t1 { font-size: var(--ob-fs-display); font-weight: 800; line-height: var(--ob-lh-tight); letter-spacing: -0.02em; color: var(--ob-banner-ink); overflow-wrap: anywhere; }
html.cp-v2 .ps2-hero-t2 { font-size: var(--ob-fs-base); font-weight: 650; color: var(--ob-banner-mute); }
html.cp-v2 .ps2-hero-p { margin: 0; max-width: 36ch; color: var(--ob-banner-mute); font-size: var(--ob-fs-base); line-height: var(--ob-lh-body); }
html.cp-v2 .ps2-hero-ch { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); margin: 0; padding: 0; list-style: none; }
html.cp-v2 .ps2-hero-ch li { padding: var(--ob-s-2) var(--ob-s-3); border-radius: var(--ob-r-pill); border: 1px solid var(--ob-banner-line); background: var(--ob-banner-field); color: var(--ob-banner-mute); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; line-height: 1; white-space: nowrap; }
html.cp-v2 .ps2-hero-art { position: relative; z-index: 3; min-width: 0; min-height: 320px; }
html.cp-v2 .ps2-hero-shake { position: absolute; inset: 0; }
html.cp-v2 .ps2-hero-el { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; }
html.cp-v2 .ps2-hero-pk { height: calc(var(--u) * 1.83); }
html.cp-v2 .ps2-hero-pk img { display: block; height: 100%; width: auto; max-width: none; filter: drop-shadow(0 14px 28px rgb(var(--ob-black-rgb) / 0.6)); }
html.cp-v2 .ps2-hero-pk.bot { z-index: 1; clip-path: inset(18% 0 0 0); transform: translate(-50%, calc(-50% + var(--u) * 0.45)); }
html.cp-v2 .ps2-hero-pk.top { z-index: 2; clip-path: inset(0 0 82% 0); opacity: 0; transform: translate(-50%, calc(-50% - var(--u) * 2)); }
html.cp-v2 .ps2-hero-c { width: var(--u); aspect-ratio: var(--ob-ratio-card); perspective: 700px; z-index: 3; }
html.cp-v2 .ps2-hero-c.l { transform: translate(calc(-50% - var(--u) * 0.82), calc(-50% - var(--u) * 0.5)) rotate(-13deg); }
html.cp-v2 .ps2-hero-c.r { transform: translate(calc(-50% + var(--u) * 0.82), calc(-50% - var(--u) * 0.5)) rotate(13deg); }
html.cp-v2 .ps2-hero-c.hit { z-index: 4; transform: translate(-50%, calc(-50% - var(--u) * 0.62)) scale(1.1); }
html.cp-v2 .ps2-hero-ci { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
html.cp-v2 .ps2-hero-c.r .ps2-hero-ci, html.cp-v2 .ps2-hero-c.hit .ps2-hero-ci { transform: rotateY(180deg); }
html.cp-v2 .ps2-hero-f { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--ob-r-xs); overflow: hidden; box-shadow: 0 12px 30px rgb(var(--ob-black-rgb) / 0.6); }
html.cp-v2 .ps2-hero-f img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
html.cp-v2 .ps2-hero-f.front { transform: rotateY(180deg); }
html.cp-v2 .ps2-hero-f.back.op { background: linear-gradient(135deg, var(--ob-amber), var(--ob-holo-amber) 55%, var(--ob-amber-ink)); box-shadow: inset 0 0 0 4px rgb(var(--ob-white-rgb) / 0.35), 0 12px 30px rgb(var(--ob-black-rgb) / 0.6); }
html.cp-v2 .ps2-hero-c.hit .ps2-hero-f.front { box-shadow: 0 0 0 2px var(--ob-amber), 0 0 34px rgb(var(--ob-amber-rgb) / 0.6), 0 12px 30px rgb(var(--ob-black-rgb) / 0.6); }
html.cp-v2 .ps2-hero-holo { position: absolute; inset: 0; mix-blend-mode: screen; transform: translateX(-120%); pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgb(var(--ob-white-rgb) / 0.55) 45%, rgb(var(--ob-violet-rgb) / 0.35) 52%, rgb(var(--ob-aqua-rgb) / 0.35) 58%, transparent 70%); }
html.cp-v2 .ps2-hero-chip { position: absolute; left: 50%; bottom: -14px; z-index: 5; transform: translateX(-50%); padding: var(--ob-s-1) var(--ob-s-2); border-radius: var(--ob-r-pill); background: var(--ob-amber); color: var(--ob-banner-bg);
  font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 800; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 18px rgb(var(--ob-amber-rgb) / 0.6); }
@media (max-width: 899px) {
  html.cp-v2 .ps2-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; --u: 80px; }
  html.cp-v2 .ps2-hero-art { order: -1; min-height: 250px; }
  html.cp-v2 .ps2-hero-txt { gap: var(--ob-s-3); padding: var(--ob-s-1) var(--ob-s-5) var(--ob-s-5); }
  html.cp-v2 .ps2-hero-t1 { font-size: var(--ob-fs-xl); }
}
@media (max-width: 365px) {
  html.cp-v2 .ps2-hero-t1 { font-size: var(--ob-fs-lg); }
  html.cp-v2 .ps2-hero-txt { padding-inline: var(--ob-s-4); }
}
@media (prefers-reduced-motion: reduce) {
  html.cp-v2 .ps2-hero-fx, html.cp-v2 .ps2-hero-flash { display: none; }
}
/* === /PACK: HERO === */

/* === HOME GAMES: MINI === (Mini-Buehnen im Startseiten-Widget "Spiele"; Styleguide "Startseite" > Spiele-Widget Mini-Buehnen; Markup data.js cpHm2Mini/cpHm2Games, Code games/games-mini.js)
   Bildflaeche immer dunkel (--ob-banner-*, beide Themes). Dieser Block ist zugleich das Endbild: ohne JS bzw. bei reduzierter Bewegung steht es so da. Alle Masse haengen an --u (Container-Breite x --k). */
html.cp-v2 .hm2-games { --gmn-a: var(--ob-aqua); --gmn-a-rgb: var(--ob-aqua-rgb); --gmn-b: var(--ob-coral); --gmn-b-rgb: var(--ob-coral-rgb); }
html.cp-v2 .hm2-games[data-game="rb"] { --gmn-a: var(--ob-coral); --gmn-a-rgb: var(--ob-coral-rgb); --gmn-b: var(--ob-violet); --gmn-b-rgb: var(--ob-violet-rgb); }
html.cp-v2 .hm2-games[data-game="op"] { --gmn-a: var(--ob-amber); --gmn-a-rgb: var(--ob-amber-rgb); --gmn-b: var(--ob-coral); --gmn-b-rgb: var(--ob-coral-rgb); }
html.cp-v2 .hm2-gl .hm2-bc-i.gmn { position: relative; display: block; overflow: hidden; isolation: isolate; container-type: inline-size; aspect-ratio: 4 / 3; border-radius: var(--ob-r-md); border: 1px solid var(--ob-banner-line); background: var(--ob-banner-bg); }
html.cp-v2 .hm2-gl .hm2-bc-i.gmn.b { --k: 0.286; background: radial-gradient(70% 80% at 50% 50%, rgb(var(--gmn-a-rgb) / 0.16), transparent 70%), var(--ob-banner-bg); }
html.cp-v2 .hm2-gl .hm2-bc-i.gmn.p { --k: 0.212; background: radial-gradient(70% 80% at 50% 45%, rgb(var(--gmn-a-rgb) / 0.18), transparent 70%), var(--ob-banner-bg); }
html.cp-v2 .gmn-sh { position: absolute; inset: 0; z-index: 3; --u: calc(var(--k) * 100cqw); }
html.cp-v2 .gmn-fx { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
html.cp-v2 .gmn-fl { position: absolute; inset: 0; z-index: 6; background: rgb(var(--ob-white-rgb)); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
html.cp-v2 .gmn-el { position: absolute; left: 50%; top: 50%; }
html.cp-v2 .gmn.run .gmn-el, html.cp-v2 .gmn.run .gmn-ci { will-change: transform, opacity; }
/* Battle */
html.cp-v2 .gmn-bc { width: var(--u); aspect-ratio: var(--ob-ratio-card); border-radius: calc(var(--ob-r-xs) / 2); overflow: hidden; }
html.cp-v2 .gmn-bc img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.cp-v2 .gmn-bc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid var(--g); }
html.cp-v2 .gmn-bc.a { --g: var(--gmn-a); box-shadow: 0 0 16px rgb(var(--gmn-a-rgb) / 0.55); transform: translate(-128%, -50%) rotate(-9deg); }
html.cp-v2 .gmn-bc.z { --g: var(--gmn-b); box-shadow: 0 0 16px rgb(var(--gmn-b-rgb) / 0.55); transform: translate(28%, -50%) rotate(9deg); }
html.cp-v2 .gmn-vs { z-index: 5; display: grid; place-items: center; width: calc(var(--u) * 0.62); aspect-ratio: 1; border-radius: var(--ob-r-pill); background: var(--ob-banner-bg); border: 1.5px solid var(--ob-amber); color: var(--ob-banner-ink); font-family: var(--cp-font-mono); font-size: max(var(--ob-fs-2xs), calc(var(--u) * 0.22)); font-weight: 800; line-height: 1; box-shadow: 0 0 14px rgb(var(--ob-amber-rgb) / 0.55); transform: translate(-50%, -50%); }
/* Booster: Endbild = Booster offen, drei Karten gefaechert, Mitte = Treffer */
html.cp-v2 .gmn-pk { height: calc(var(--u) * 1.83); }
html.cp-v2 .gmn-pk img { display: block; height: 100%; width: auto; max-width: none; }
html.cp-v2 .gmn-pk.bot { z-index: 1; clip-path: inset(18% 0 0 0); transform: translate(-50%, calc(-50% + var(--u) * 0.5)); }
html.cp-v2 .gmn-pk.top { z-index: 2; clip-path: inset(0 0 82% 0); opacity: 0; transform: translate(-50%, calc(-50% - var(--u) * 2)); }
html.cp-v2 .gmn-pc { width: calc(var(--u) * 0.95); aspect-ratio: var(--ob-ratio-card); perspective: 400px; z-index: 3; }
html.cp-v2 .gmn-pc.l { transform: translate(calc(-50% - var(--u) * 0.82), calc(-50% - var(--u) * 0.42)) rotate(-13deg); }
html.cp-v2 .gmn-pc.r { transform: translate(calc(-50% + var(--u) * 0.82), calc(-50% - var(--u) * 0.42)) rotate(13deg); }
html.cp-v2 .gmn-pc.hit { z-index: 4; transform: translate(-50%, calc(-50% - var(--u) * 0.52)) scale(1.08); }
html.cp-v2 .gmn-ci { position: absolute; inset: 0; transform-style: preserve-3d; }
html.cp-v2 .gmn-pc:is(.r, .hit) .gmn-ci { transform: rotateY(180deg); }
html.cp-v2 .gmn-f { position: absolute; inset: 0; backface-visibility: hidden; border-radius: calc(var(--ob-r-xs) / 2); overflow: hidden; box-shadow: 0 6px 14px rgb(var(--ob-black-rgb) / 0.6); }
html.cp-v2 .gmn-f img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.cp-v2 .gmn-f.front { transform: rotateY(180deg); }
html.cp-v2 .gmn-f.op { background: linear-gradient(135deg, var(--ob-amber), var(--ob-holo-amber) 55%, var(--ob-amber-ink)); box-shadow: inset 0 0 0 2px rgb(var(--ob-white-rgb) / 0.35); } /* One Piece: keine offizielle Rueckseite */
html.cp-v2 .gmn-pc.hit .gmn-f.front { box-shadow: 0 0 0 1.5px var(--ob-amber), 0 0 16px rgb(var(--ob-amber-rgb) / 0.6); }
/* Handy/Tablet (bis 899 px): Bild links (46 %, hoechstens 280 px), Text rechts; Desktop: zwei Kacheln, Bild oben */
@media (max-width: 899px) {
  html.cp-v2 .hm2-games .hm2-bc { grid-template-columns: minmax(0, min(46%, 280px)) minmax(0, 1fr); }
  html.cp-v2 .hm2-gl .hm2-bc-i.gmn { border-radius: var(--ob-r-sm); }
}
/* Desktop (ab 900 px): flache Buehne (feste Hoehe), damit das Widget kaum hoeher wird; --u folgt der kleineren von Breite und Hoehe (JS liest --k und --kh) */
@media (min-width: 900px) {
  html.cp-v2 .hm2-gl .hm2-bc-i.gmn { aspect-ratio: auto; height: 190px; }
  html.cp-v2 .hm2-gl .hm2-bc-i.gmn.b { --kh: 0.42; }
  html.cp-v2 .hm2-gl .hm2-bc-i.gmn.p { --kh: 0.33; }
  html.cp-v2 .gmn-sh { --u: min(calc(var(--k) * 100cqw), calc(var(--kh) * 190px)); }
}
/* === /HOME GAMES: MINI === */

/* === XP: FORTSCHRITT (.xp2*) ===
   Styleguide „Fortschritt: XP, Level, Ränge“: Ring + Level-Pille, XP-Meldung, Level-up-Karte, Profilseite (/profil/, /riftbound/profil/, /one-piece/profil/).
   Code: xp.js (Kopfzeile, Meldung, Karte), profil/profil.js (Seite). Nur Tokens; nur für Beta-Konten sichtbar. */
/* Ring um das Profilbild: Füllung = Fortschritt zum nächsten Level (--xp2-p in %), ab Prestige Holo-Rahmen */
html.cp-v2 .xp2-ring { --xp2-w: 3px; position: relative; display: grid; place-items: center; flex: none; box-sizing: border-box; width: 42px; height: 42px; padding: var(--xp2-w); border-radius: var(--ob-r-pill); background: conic-gradient(var(--ob-violet) calc(var(--xp2-p, 0) * 1%), var(--ob-line-2) 0); }
html.cp-v2 .xp2-ring--pr { background: var(--ob-holo); }
html.cp-v2 .xp2-in { display: grid; place-items: center; box-sizing: border-box; width: 100%; height: 100%; border: 2px solid var(--ob-surface); border-radius: var(--ob-r-pill); background: var(--ob-accent-btn); color: #fff; font-size: var(--ob-fs-md); font-weight: 800; line-height: 1; }
html.cp-v2 .xp2-lv { position: absolute; right: -6px; bottom: -5px; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid var(--ob-surface); border-radius: var(--ob-r-pill); background: var(--ob-violet); color: #fff; font: 800 var(--ob-fs-2xs) / 14px var(--cp-font-mono); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
html.cp-v2 .xp2-ring--lg { --xp2-w: 5px; width: 76px; height: 76px; }
html.cp-v2 .xp2-ring--lg .xp2-in { font-size: var(--ob-fs-lg); }
html.cp-v2 .xp2-ring--lg .xp2-lv { right: -4px; bottom: -4px; min-width: 30px; height: 22px; line-height: 18px; padding: 0 var(--ob-s-2); }
/* Kopfzeile: neuer Knopf (Beta) ganz rechts, rechts vom Menü, Tippfläche 44 px */
html.cp-v2 .header-menu-controls > #cpXpHdr { order: 5; } /* ganz rechts, rechts vom Menü (Inhaber 26.10.2026) */
html.cp-v2 .xp2-hdr { display: grid; place-items: center; flex: none; width: var(--ob-tap); height: var(--ob-tap); border-radius: var(--ob-r-sm); text-decoration: none; transition: background var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .xp2-hdr:hover { background: var(--ob-hover); }
html.cp-v2 .xp2-hdr:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
/* XP-Meldung (wie der Toast der Seite: Fläche --ob-pop, Rand --ob-line-2, --ob-z-toast) */
html.cp-v2 .xp2-toast { position: fixed; left: 50%; bottom: calc(var(--ob-s-5) + env(safe-area-inset-bottom)); z-index: var(--ob-z-toast); display: flex; align-items: center; gap: var(--ob-s-3); max-width: calc(100vw - 2 * var(--ob-gutter)); padding: var(--ob-s-3) var(--ob-s-4); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); background: var(--ob-pop); box-shadow: var(--ob-shadow-2); color: var(--ob-ink); font-size: var(--ob-fs-md); opacity: 0; transform: translate(-50%, var(--ob-s-3)); pointer-events: none; transition: opacity var(--ob-dur-2) var(--ob-ease-out), transform var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .xp2-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
html.cp-v2 .xp2-toast b { font: 800 var(--ob-fs-md) / 1 var(--cp-font-mono); font-variant-numeric: tabular-nums; color: var(--ob-violet-text); }
html.cp-v2 .xp2-end { display: block; height: 1px; }
/* Level-up-Karte: Bottom-Sheet, ab 900 px Popup */
html.cp-v2 .xp2-dlg-bd { position: fixed; inset: 0; z-index: var(--ob-z-sheet); display: grid; align-items: end; background: var(--ob-backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: xp2Fade var(--ob-dur-2) var(--ob-ease-out) both; }
html.cp-v2 .xp2-dlg-bd.is-out { opacity: 0; transition: opacity var(--ob-dur-1) var(--ob-ease-in); }
html.cp-v2 .xp2-dlg { display: grid; justify-items: center; gap: var(--ob-s-2); box-sizing: border-box; width: 100%; max-height: var(--ob-sheet-max); padding: var(--ob-s-6) var(--ob-s-5) calc(var(--ob-s-6) + env(safe-area-inset-bottom)); border: 1px solid rgb(var(--ob-violet-rgb) / 0.4); border-bottom: 0; border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; background: radial-gradient(120% 90% at 50% 0%, rgb(var(--ob-violet-rgb) / 0.28), transparent 60%), var(--ob-pop); text-align: center; animation: xp2Rise var(--ob-dur-3) var(--ob-ease-out) both; }
html.cp-v2 .xp2-big { font: 800 calc(var(--ob-fs-display) * 1.3) / 1 var(--cp-font-mono); background: var(--ob-accent); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-block: var(--ob-s-2); }
html.cp-v2 .xp2-lu-t { font-size: var(--ob-fs-lg); font-weight: 800; line-height: var(--ob-lh-tight); color: var(--ob-ink); }
html.cp-v2 .xp2-lu-s { font-size: var(--ob-fs-md); color: var(--ob-mute); }
html.cp-v2 .xp2-lu-a { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ob-s-2); margin-top: var(--ob-s-3); }
html.cp-v2 .xp2-lu-a .ko2-btn2 { min-height: var(--ob-tap); }
@keyframes xp2Fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes xp2Rise { from { opacity: 0; transform: translateY(var(--ob-s-5)); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  html.cp-v2 .xp2-dlg-bd { align-items: center; justify-items: center; }
  html.cp-v2 .xp2-dlg { width: var(--ob-pop-w-s); max-width: calc(100vw - 2 * var(--ob-gutter)); border-bottom: 1px solid rgb(var(--ob-violet-rgb) / 0.4); border-radius: var(--ob-r-md); padding-bottom: var(--ob-s-6); box-shadow: var(--ob-shadow-2); }
}
/* Marken/Tags (Badge-Pille 24 px) */
html.cp-v2 .xp2-tag { display: inline-flex; align-items: center; box-sizing: border-box; height: 24px; padding: 0 var(--ob-s-3); border: 1px solid rgb(var(--ob-violet-rgb) / 0.4); border-radius: var(--ob-r-pill); background: rgb(var(--ob-violet-rgb) / 0.12); color: var(--ob-violet-text); font: 800 var(--ob-fs-xs) / 1 var(--cp-font-mono); white-space: nowrap; }
html.cp-v2 .xp2-tag--coral { border-color: rgb(var(--ob-coral-rgb) / 0.4); background: rgb(var(--ob-coral-rgb) / 0.12); color: var(--ob-coral); }
html.cp-v2 .xp2-tag--dim { border-color: var(--ob-line-2); background: var(--ob-field); color: var(--ob-mute); }
html.cp-v2[data-theme="light"] .xp2-tag--coral { color: var(--ob-coral-ink); }
/* Seite */
html.cp-v2 .xp2-pagewrap { max-width: var(--ob-page-max); }
html.cp-v2 .xp2-pagewrap > h1 { display: none; }
html.cp-v2 .bd2.xp2-page { gap: var(--ob-s-5); padding-block: var(--ob-s-5) var(--ob-s-8); }
html.cp-v2 .xp2-head { display: flex; align-items: center; gap: var(--ob-s-5); min-width: 0; }
html.cp-v2 .xp2-av { flex: none; padding: 0 var(--ob-s-2) var(--ob-s-2) 0; }
html.cp-v2 .xp2-hm { display: grid; gap: var(--ob-s-2); flex: 1; min-width: 0; }
html.cp-v2 .xp2-hm h1 { margin: 0; background: none; -webkit-text-fill-color: currentColor; color: var(--ob-ink); font-size: var(--ob-fs-xl); font-weight: 800; line-height: var(--ob-lh-tight); letter-spacing: 0; overflow-wrap: anywhere; }
html.cp-v2 .xp2-hm h1:empty { display: none; }
html.cp-v2 .xp2-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-s-2); min-width: 0; font-size: var(--ob-fs-sm); }
html.cp-v2 .xp2-xpl { display: grid; gap: 6px; max-width: 420px; }
html.cp-v2 .xp2-xpl-t { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--ob-s-1) var(--ob-s-3); font-size: var(--ob-fs-sm); }
html.cp-v2 .xp2-num { font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; color: var(--ob-ink); }
html.cp-v2 .xp2-dim { color: var(--ob-dim); font-size: var(--ob-fs-sm); }
html.cp-v2 .xp2-num.xp2-dim { color: var(--ob-dim); font-size: var(--ob-fs-xs); }
html.cp-v2 .xp2-bar { box-sizing: border-box; height: 8px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-pill); background: var(--ob-field); overflow: hidden; }
html.cp-v2 .xp2-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ob-accent); transition: width var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .xp2-bar.is-full i { background: var(--ob-green); }
html.cp-v2 .xp2-card { display: grid; gap: var(--ob-s-4); min-width: 0; padding: var(--ob-s-4); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .xp2-pub { gap: var(--ob-s-2); }
html.cp-v2 .xp2-hint { margin: 0; color: var(--ob-mute); font-size: var(--ob-fs-sm); line-height: var(--ob-lh-body); overflow-wrap: anywhere; }
html.cp-v2 .xp2-hint a { color: var(--ob-violet-text); }
html.cp-v2 .xp2-hint--bad { color: var(--ob-coral); }
html.cp-v2[data-theme="light"] .xp2-hint--bad { color: var(--ob-coral-ink); }
html.cp-v2 .xp2-retry { display: flex; justify-content: center; }
/* Reiter: Reihe ohne Umbruch, wischbar, aktiv unterstrichen (wie die Bereichsleiste im Konto auf dem Handy) */
html.cp-v2 .xp2-tabs { display: flex; gap: var(--ob-s-1); overflow-x: auto; border-bottom: 1px solid var(--ob-line); scrollbar-width: none; }
html.cp-v2 .xp2-tabs::-webkit-scrollbar { display: none; }
html.cp-v2 .xp2-tab { flex: none; min-height: var(--ob-tap); padding: 0 var(--ob-s-4); border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ob-mute); font: inherit; font-size: var(--ob-fs-md); font-weight: 650; white-space: nowrap; cursor: pointer; transition: color var(--ob-dur-1) var(--ob-ease-out), border-color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .xp2-tab:hover { color: var(--ob-ink); }
html.cp-v2 .xp2-tab[aria-selected="true"] { color: var(--ob-ink); border-bottom-color: var(--ob-violet); }
html.cp-v2 .xp2-tab:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: -2px; }
html.cp-v2 .xp2-panel { display: grid; gap: var(--ob-s-4); min-width: 0; }
/* Level-Pfad: Linie mit Punkten (Rang-Level groß, Profilbild-Level klein), Balken, Detail-Karte */
html.cp-v2 .xp2-lp { gap: var(--ob-s-5); }
html.cp-v2 .xp2-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--ob-s-4); }
html.cp-v2 .xp2-b { display: grid; gap: 6px; min-width: 0; }
html.cp-v2 .xp2-b-h { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--ob-s-1) var(--ob-s-3); font-size: var(--ob-fs-sm); font-weight: 650; color: var(--ob-ink); }
html.cp-v2 .xp2-scroll { overflow-x: auto; padding: var(--ob-s-4) 2px var(--ob-s-2); }
html.cp-v2 .xp2-track { position: relative; min-width: 820px; height: 112px; margin: 0 90px 0 26px; }
html.cp-v2 .xp2-base, html.cp-v2 .xp2-fill { position: absolute; left: 0; top: 30px; height: 4px; border-radius: var(--ob-r-pill); }
html.cp-v2 .xp2-base { right: -64px; background: var(--ob-line-2); }
html.cp-v2 .xp2-fill { width: 0; background: var(--ob-accent); transition: width var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .xp2-n { position: absolute; top: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ob-dim); font: inherit; cursor: pointer; transform: translateX(-50%); }
html.cp-v2 .xp2-n .d { display: grid; place-items: center; box-sizing: border-box; width: 44px; height: 44px; border: 2px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: var(--ob-surface); color: var(--ob-dim); font: 800 var(--ob-fs-xs) / 1 var(--cp-font-mono); transition: transform var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .xp2-n .nm { font-size: var(--ob-fs-xs); white-space: nowrap; }
html.cp-v2 .xp2-n.alt .nm { margin-top: var(--ob-s-4); }
html.cp-v2 .xp2-n:hover .d { transform: scale(1.06); }
html.cp-v2 .xp2-n:active .d { transform: scale(0.96); }
html.cp-v2 .xp2-n:focus-visible .d, html.cp-v2 .xp2-t:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 3px; }
html.cp-v2 .xp2-n.done .d { border-color: var(--ob-violet); background: var(--ob-violet); color: #fff; }
html.cp-v2 .xp2-n.done .nm { color: var(--ob-ink); }
html.cp-v2 .xp2-n.next .d { border-color: var(--ob-violet); color: var(--ob-violet-text); box-shadow: 0 0 0 5px rgb(var(--ob-violet-rgb) / 0.12); }
html.cp-v2 .xp2-n.sel .d { outline: 2px solid var(--ob-violet); outline-offset: 3px; }
html.cp-v2 .xp2-n.pr .d { border-color: transparent; background: linear-gradient(var(--ob-surface), var(--ob-surface)) padding-box, var(--ob-holo) border-box; color: var(--ob-ink); }
html.cp-v2 .xp2-n.pr.done .d { background: var(--ob-holo); color: #fff; }
html.cp-v2 .xp2-t { position: absolute; top: 25px; box-sizing: border-box; width: 14px; height: 14px; padding: 0; border: 2px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: var(--ob-surface); cursor: pointer; transform: translateX(-50%); }
html.cp-v2 .xp2-t::after { content: ''; position: absolute; inset: -15px; } /* Tippfläche 44 px */
html.cp-v2 .xp2-t.done { border-color: var(--ob-violet); background: var(--ob-violet); }
html.cp-v2 .xp2-t.sel { outline: 2px solid var(--ob-violet); outline-offset: 2px; }
html.cp-v2 .xp2-me { position: absolute; top: -8px; z-index: 2; padding: 3px 7px; border-radius: var(--ob-r-pill); background: var(--ob-violet); color: #fff; font: 800 var(--ob-fs-2xs) / 1 var(--cp-font-mono); white-space: nowrap; pointer-events: none; transform: translateX(-50%); }
html.cp-v2 .xp2-detail { display: grid; gap: var(--ob-s-3); padding: var(--ob-s-4); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-field); }
html.cp-v2 .xp2-dh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--ob-s-2); }
html.cp-v2 .xp2-dh b { font-size: var(--ob-fs-base); font-weight: 800; color: var(--ob-ink); }
html.cp-v2 .xp2-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--ob-s-2); }
html.cp-v2 .xp2-it { display: flex; align-items: center; gap: var(--ob-s-3); min-width: 0; padding: var(--ob-s-3); border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-surface); font-size: var(--ob-fs-md); color: var(--ob-ink); }
html.cp-v2 .xp2-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--ob-r-pill); background: rgb(var(--ob-violet-rgb) / 0.12); color: var(--ob-violet-text); }
html.cp-v2 .xp2-it > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
html.cp-v2 .xp2-soon { flex: none; margin-left: auto; padding: 2px var(--ob-s-2); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); color: var(--ob-mute); font: 650 var(--ob-fs-2xs) / 1.2 var(--cp-font-mono); font-style: normal; white-space: nowrap; }
html.cp-v2 .xp2-nav { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); }
html.cp-v2 .xp2-nav .ko2-btn2 { min-height: var(--ob-tap); }
html.cp-v2 .xp2-nav .ko2-btn2[aria-disabled="true"] { opacity: 0.4; cursor: default; }
/* XP sammeln */
html.cp-v2 .xp2-earn { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--ob-s-4); align-items: start; }
html.cp-v2 .xp2-g { overflow: hidden; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .xp2-gh { margin: 0; padding: var(--ob-s-3) var(--ob-s-4); border-bottom: 1px solid var(--ob-line); background: var(--ob-field); color: var(--ob-mute); font: 650 var(--ob-fs-xs) / 1.2 var(--cp-font-mono); letter-spacing: var(--ob-track-caps); text-transform: uppercase; }
html.cp-v2 .xp2-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ob-s-1) var(--ob-s-3); padding: var(--ob-s-3) var(--ob-s-4); border-bottom: 1px solid var(--ob-line); font-size: var(--ob-fs-md); color: var(--ob-ink); }
html.cp-v2 .xp2-r:last-child { border-bottom: 0; }
html.cp-v2 .xp2-r > span:first-child { overflow-wrap: anywhere; }
html.cp-v2 .xp2-v { font: 800 var(--ob-fs-md) / 1 var(--cp-font-mono); font-variant-numeric: tabular-nums; color: var(--ob-violet-text); white-space: nowrap; }
html.cp-v2 .xp2-rs { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--ob-s-3); }
html.cp-v2 .xp2-rs .xp2-bar { flex: 1; height: 6px; }
html.cp-v2 .xp2-rs .xp2-num { white-space: nowrap; }
/* Letzte XP */
html.cp-v2 .xp2-recent { display: grid; margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .xp2-recent li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--ob-s-3); min-height: var(--ob-tap); padding: var(--ob-s-2) var(--ob-s-4); border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .xp2-recent li:last-child { border-bottom: 0; }
html.cp-v2 .xp2-rn { display: grid; gap: 2px; min-width: 0; }
html.cp-v2 .xp2-rn b { font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-ink); overflow-wrap: anywhere; }
html.cp-v2 .xp2-rn small { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .xp2-recent time { min-width: 7ch; text-align: right; white-space: nowrap; }
html.cp-v2 .xp2-empty { margin: 0; padding: var(--ob-s-6) var(--ob-s-4); border: 1px dashed var(--ob-line-2); border-radius: var(--ob-r-md); color: var(--ob-mute); font-size: var(--ob-fs-sm); text-align: center; }
@media (max-width: 600px) {
  html.cp-v2 .bd2.xp2-page { gap: var(--ob-s-4); padding-block: var(--ob-s-3) var(--ob-s-7); }
  html.cp-v2 .xp2-head { gap: var(--ob-s-4); }
  html.cp-v2 .xp2-hm h1 { font-size: var(--ob-fs-lg); }
  html.cp-v2 .xp2-earn { grid-template-columns: minmax(0, 1fr); }
  html.cp-v2 .xp2-items { grid-template-columns: minmax(0, 1fr); }
  html.cp-v2 .xp2-recent li { grid-template-columns: minmax(0, 1fr) auto; }
  html.cp-v2 .xp2-recent time { grid-column: 1 / -1; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html.cp-v2 :is(.xp2-toast, .xp2-dlg-bd, .xp2-dlg, .xp2-bar i, .xp2-fill, .xp2-n .d, .xp2-tab) { animation: none; transition: none; }
  html.cp-v2 .xp2-toast { transform: translate(-50%, 0); }
}
/* Konto: Bereich „Fortschritt“ (Reiter aus profil.js) und Profilkopf für Beta-Konten */
html.cp-v2 .xp2-emb { display: grid; gap: var(--ob-s-5); min-width: 0; }
html.cp-v2 .ko2-head--xp > .xp2-head { flex: 1; }
html.cp-v2 .xp2-head > .ko2-out { align-self: flex-start; }
@media (max-width: 600px) {
  html.cp-v2 .xp2-emb { gap: var(--ob-s-4); }
}
/* Profilbilder, Rahmen, Banner (xp-avatars.js, profil/looks.js; Styleguide „Fortschritt“). Bild = Linien-Emblem auf Fläche in einem Akzent, Rahmen nur --ob-violet / --ob-line-2 (Legende: Violett→Aqua, Prestige: --ob-holo) */
html.cp-v2 .xp2-avs { display: block; overflow: visible; }
html.cp-v2 .xp2-a-violet { --xp2-ac: var(--ob-violet); }
html.cp-v2 .xp2-a-aqua { --xp2-ac: var(--ob-aqua); }
html.cp-v2 .xp2-a-coral { --xp2-ac: var(--ob-coral); }
html.cp-v2 .xp2-a-amber { --xp2-ac: var(--ob-amber); }
html.cp-v2 .xp2-a-green { --xp2-ac: var(--ob-green); }
html.cp-v2[data-theme="light"] .xp2-a-violet { --xp2-ac: var(--ob-violet-ink); }
html.cp-v2[data-theme="light"] .xp2-a-aqua { --xp2-ac: var(--ob-aqua-ink); }
html.cp-v2[data-theme="light"] .xp2-a-coral { --xp2-ac: var(--ob-coral-ink); }
html.cp-v2[data-theme="light"] .xp2-a-amber { --xp2-ac: var(--ob-amber-ink); }
html.cp-v2[data-theme="light"] .xp2-a-green { --xp2-ac: var(--ob-green-ink); }
html.cp-v2 .xp2-a-base { fill: var(--ob-surface); }
html.cp-v2 .xp2-a-em { fill: none; stroke: var(--xp2-ac, var(--ob-ink)); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
html.cp-v2 .xp2-a-em--holo { stroke: var(--ob-ink); }
html.cp-v2 .xp2-a-edge { fill: none; stroke: var(--ob-line-2); stroke-width: 1; }
html.cp-v2 .xp2-f-l { fill: none; stroke: var(--ob-line-2); }
html.cp-v2 .xp2-f-v { fill: none; stroke: var(--ob-violet); }
html.cp-v2 .xp2-f-vf { fill: var(--ob-violet); }
html.cp-v2 .xp2-f-sf { fill: var(--ob-surface); }
html.cp-v2 .xp2-f-rv { fill: var(--ob-surface); stroke: var(--ob-violet); }
html.cp-v2 .xp2-f-aq { fill: var(--ob-aqua); stroke: var(--ob-surface); stroke-width: 1.5; }
html.cp-v2 .xp2-r-bg { fill: none; stroke: var(--ob-line-2); }
html.cp-v2 .xp2-r-fg { fill: none; stroke: var(--ob-violet); }
html.cp-v2 .xp2-lock { width: 16px; height: 16px; flex: none; }
/* Bild im Ring: Kopfzeile nur Bild; Konto-Kopf Bild + Rahmen; öffentliche Ansicht ohne Fortschritts-Ring (--bare) */
html.cp-v2 .xp2-in--img { border: 0; background: var(--ob-surface); overflow: visible; }
html.cp-v2 .xp2-in > .xp2-avs { width: 100%; height: 100%; }
html.cp-v2 .xp2-ring--bare { padding: 0; background: none; }
html.cp-v2 .xp2-ring--bare .xp2-in:not(.xp2-in--img) { border: 0; }
/* Kopfzeile mit Profilbild: Bild + Rahmen + schmaler Fortschritts-Ring als ein SVG (44 px, Tippfläche), Level-Pille bleibt */
html.cp-v2 .xp2-ring--hdr { width: var(--ob-tap); height: var(--ob-tap); padding: 0; background: none; }
html.cp-v2 .xp2-ring--hdr > .xp2-avs { display: block; width: 100%; height: 100%; }
html.cp-v2 .xp2-ring--hdr .xp2-lv { right: -4px; bottom: -3px; }
/* Profilkopf (Konto): Knöpfe „Öffentliches Profil“ und „Teilen“ unter Rang und Serie */
html.cp-v2 .xp2-pubbtn { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); }
/* Banner: dezente Fläche hinter dem Profilkopf (--xp2-bn kommt aus cpAvatar.banner) */
html.cp-v2 .xp2-head--bn { padding: var(--ob-s-4); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--xp2-bn), var(--ob-surface); }
/* Holo-Name (Prestige): Textverlauf */
html.cp-v2 .xp2-holo-name, html.cp-v2 .xp2-hm h1.xp2-holo-name { background: var(--ob-holo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* Level-Pfad: Belohnung führt zu „Profilbilder“ */
html.cp-v2 .xp2-it--go { text-decoration: none; cursor: pointer; transition: background var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .xp2-it--go:hover { background: var(--ob-hover); }
html.cp-v2 .xp2-it--go:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2 .xp2-go { flex: none; margin-left: auto; width: 16px; height: 16px; color: var(--ob-mute); }
/* Onboarding im Fortschritt */
html.cp-v2 .xp2-onb { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ob-s-3); padding: var(--ob-s-3) var(--ob-s-4); }
html.cp-v2 .xp2-onb-t { min-width: 0; font-size: var(--ob-fs-md); color: var(--ob-ink); }
/* Konto: Bereich „Profilbilder“ (#looks) */
html.cp-v2 .xp2-lk { display: grid; gap: var(--ob-s-5); min-width: 0; }
html.cp-v2 .xp2-lk-prev { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ob-s-5); }
html.cp-v2 .xp2-lk-prev.xp2-head--bn { padding: var(--ob-s-4); }
html.cp-v2 .xp2-lk-pv { width: 104px; height: 104px; }
html.cp-v2 .xp2-lk-pv > .xp2-avs { width: 100%; height: 100%; }
html.cp-v2 .xp2-lk-init { display: grid; place-items: center; width: 100%; height: 100%; border-radius: var(--ob-r-pill); background: var(--ob-accent-btn); color: #fff; font-size: var(--ob-fs-xl); font-weight: 800; }
html.cp-v2 .xp2-lk-pm { display: grid; gap: var(--ob-s-1); min-width: 0; }
html.cp-v2 .xp2-lk-pm b { font-size: var(--ob-fs-lg); font-weight: 800; color: var(--ob-ink); overflow-wrap: anywhere; }
html.cp-v2 .xp2-lk-g { display: grid; gap: var(--ob-s-3); min-width: 0; }
html.cp-v2 .xp2-lk-g > .v2-lbl { margin: 0; }
html.cp-v2 .xp2-lk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--ob-s-3); }
html.cp-v2 .xp2-lk-grid--bn { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
html.cp-v2 .xp2-lk-it { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--ob-s-1); min-width: 0; padding: var(--ob-s-3) var(--ob-s-2); border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-ink); font: inherit; cursor: pointer; transition: background var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .xp2-lk-it:hover { background: var(--ob-hover); }
html.cp-v2 .xp2-lk-it.is-on, html.cp-v2 .xp2-lk-card.is-on, html.cp-v2 .xp2-lk-chip.is-on { outline: 2px solid var(--ob-violet); outline-offset: 2px; }
html.cp-v2 .xp2-lk-it.is-lock { opacity: 0.4; cursor: default; }
html.cp-v2 .xp2-lk-it:focus-visible, html.cp-v2 .xp2-lk-card:focus-visible, html.cp-v2 .xp2-lk-chip:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2 .xp2-lk-img { position: relative; display: grid; place-items: center; width: 56px; height: 56px; }
html.cp-v2 .xp2-lk-img > .xp2-avs { width: 100%; height: 100%; }
html.cp-v2 .xp2-lk-it--banner .xp2-lk-img { width: 100%; height: 44px; }
html.cp-v2 .xp2-lk-bn { display: block; width: 100%; height: 100%; border: 1px solid var(--ob-line); border-radius: var(--ob-r-xs); background: var(--xp2-bn), var(--ob-surface); }
html.cp-v2 .xp2-lk-lock { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: var(--ob-surface); color: var(--ob-ink); }
html.cp-v2 .xp2-lk-lock .xp2-lock { width: 12px; height: 12px; }
html.cp-v2 .xp2-lk-nm { max-width: 100%; font-size: var(--ob-fs-xs); text-align: center; overflow-wrap: anywhere; }
html.cp-v2 .xp2-lk-tag { font: 650 var(--ob-fs-2xs) / 1.2 var(--cp-font-mono); color: var(--ob-mute); }
html.cp-v2 .xp2-lk-chips { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); }
html.cp-v2 .xp2-lk-chip { 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: inherit; font-size: var(--ob-fs-md); cursor: pointer; }
html.cp-v2 .xp2-lk-chip:hover { background: var(--ob-hover); }
html.cp-v2 .xp2-lk-cardbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ob-s-3); }
html.cp-v2 .xp2-lk-cardlock { display: flex; align-items: center; gap: var(--ob-s-2); padding: var(--ob-s-3) var(--ob-s-4); border: 1px dashed var(--ob-line-2); border-radius: var(--ob-r-sm); color: var(--ob-mute); font-size: var(--ob-fs-sm); }
html.cp-v2 .xp2-lk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--ob-s-2); }
html.cp-v2 .xp2-lk-card { box-sizing: border-box; aspect-ratio: 5 / 7; padding: 0; overflow: hidden; border: 1px solid var(--ob-line); border-radius: var(--ob-r-xs); background: var(--ob-field); cursor: pointer; }
html.cp-v2 .xp2-lk-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Battle of Cards: Bestenliste (nur Beta-Betrachter) – kleines Bild + Rahmen, „Lv N“-Tag, Holo-Name */
html.cp-v2 .xp2-bav { display: inline-grid; place-items: center; flex: none; width: var(--xp2-bs, 28px); height: var(--xp2-bs, 28px); }
html.cp-v2 .xp2-bav > .xp2-avs { width: 100%; height: 100%; }
html.cp-v2 .xp2-bav > i { display: grid; place-items: center; width: 84%; height: 84%; border-radius: var(--ob-r-pill); background: var(--ob-field); color: var(--ob-mute); font: 800 var(--ob-fs-xs) / 1 var(--cp-font-mono); font-style: normal; }
html.cp-v2 .xp2-bav-lv { flex: none; padding: 2px var(--ob-s-2); border: 1px solid rgb(var(--ob-violet-rgb) / 0.4); border-radius: var(--ob-r-pill); color: var(--ob-violet-text); font: 800 var(--ob-fs-2xs) / 1.2 var(--cp-font-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
html.cp-v2 .bt2-bnick--xp { display: flex; align-items: center; gap: var(--ob-s-2); }
/* Versus: Gegner mit Bild + Rahmen (Gegnerwahl, Duell-Zeile, Zusammenfassung, Einladung) */
html.cp-v2 .xp2-nk { display: inline-flex; align-items: center; gap: var(--ob-s-2); min-width: 0; max-width: 100%; }
html.cp-v2 .xp2-nkn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .bt2-inv-h { display: flex; align-items: center; gap: var(--ob-s-3); min-width: 0; }
/* Geteilte Sammlung: Besitzer-Zeile über den Karten (Pokémon, Riftbound, One Piece) */
html.cp-v2 .xp2-owner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ob-s-2); margin: 0 0 var(--ob-s-4); color: var(--ob-mute); font-size: var(--ob-fs-md); line-height: var(--ob-lh-body); }
html.cp-v2 .xp2-owner-n { color: var(--ob-ink); font-weight: 650; overflow-wrap: anywhere; text-decoration: none; }
html.cp-v2 .xp2-owner-n:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; border-radius: var(--ob-r-xs); }
@media (hover: hover) { html.cp-v2 .xp2-owner-n:hover { text-decoration: underline; } }
html.cp-v2 .bt2-bnn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  html.cp-v2 .xp2-lk-prev { gap: var(--ob-s-4); }
  html.cp-v2 .xp2-lk-pv { width: 84px; height: 84px; }
  html.cp-v2 .xp2-lk-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  html.cp-v2 .xp2-lk-grid--bn { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  html.cp-v2 .xp2-onb { grid-template-columns: auto minmax(0, 1fr); }
  html.cp-v2 .xp2-onb .ko2-btn2 { grid-column: 1 / -1; justify-self: start; }
}
/* --- Fortschritt, Ausbau (Beta): Meldung mit Serien-Schutz, Wochenaufgaben, Belohnungen, Prestige-Karte, Bestenliste, Extras --- */
html.cp-v2 .xp2-toast.has-s { flex-wrap: wrap; }
html.cp-v2 .xp2-toast-s { flex-basis: 100%; color: var(--ob-mute); font-size: var(--ob-fs-sm); font-weight: 650; }
html.cp-v2 .xp2-tag--green { border-color: rgb(var(--ob-green-rgb) / 0.4); background: rgb(var(--ob-green-rgb) / 0.12); color: var(--ob-green); }
html.cp-v2[data-theme="light"] .xp2-tag--green { color: var(--ob-green-ink); }
html.cp-v2 .xp2-it-s { display: block; margin-top: var(--ob-s-1); color: var(--ob-mute); font-size: var(--ob-fs-sm); line-height: var(--ob-lh-body); }
html.cp-v2 .xp2-ct { margin: 0; color: var(--ob-ink); font-size: var(--ob-fs-base); font-weight: 800; line-height: var(--ob-lh-tight); }
/* Wochenaufgaben */
html.cp-v2 .xp2-qs { gap: var(--ob-s-3); }
html.cp-v2 .xp2-qh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ob-s-1) var(--ob-s-3); }
html.cp-v2 .xp2-ql { display: grid; gap: var(--ob-s-4); margin: 0; padding: 0; list-style: none; }
html.cp-v2 .xp2-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--ob-s-2) var(--ob-s-3); font-size: var(--ob-fs-md); color: var(--ob-ink); }
html.cp-v2 .xp2-q .xp2-bar { grid-column: 1 / -1; height: 6px; }
html.cp-v2 .xp2-q-t { min-width: 0; overflow-wrap: anywhere; }
html.cp-v2 .xp2-q-v { color: var(--ob-mute); font-size: var(--ob-fs-xs); white-space: nowrap; }
html.cp-v2 .xp2-q-ok { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: var(--ob-s-2); vertical-align: -2px; color: var(--ob-green); }
html.cp-v2 .xp2-q-ok .ob-icon { width: 16px; height: 16px; }
html.cp-v2 .xp2-q.is-done .xp2-q-v { color: var(--ob-green); }
html.cp-v2[data-theme="light"] :is(.xp2-q-ok, .xp2-q.is-done .xp2-q-v) { color: var(--ob-green-ink); }
/* Aktive Belohnungen */
html.cp-v2 .xp2-rw { gap: var(--ob-s-3); }
/* Prestige-Karte (Holo-Rand, Ausnahme für Prestige) */
html.cp-v2 .xp2-prc { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ob-s-5); border: 2px solid transparent; background: linear-gradient(var(--ob-surface), var(--ob-surface)) padding-box, var(--ob-holo) border-box; }
html.cp-v2 .xp2-prc-m { display: grid; gap: var(--ob-s-2); min-width: 0; }
html.cp-v2 .xp2-prc-t { margin: 0; color: var(--ob-ink); font-size: var(--ob-fs-lg); font-weight: 800; line-height: var(--ob-lh-tight); }
/* Bestenliste */
html.cp-v2 .xp2-bd { display: grid; gap: var(--ob-s-4); min-width: 0; }
html.cp-v2 .xp2-bd-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ob-s-2) var(--ob-s-4); }
html.cp-v2 .xp2-bl { display: grid; margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .xp2-bl-r { display: grid; grid-template-columns: 32px 36px minmax(0, 1fr) auto auto; align-items: center; gap: var(--ob-s-3); min-height: var(--ob-tap); padding: var(--ob-s-2) var(--ob-s-4); border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .xp2-bl-r:last-child { border-bottom: 0; }
html.cp-v2 .xp2-bl-r.is-me { background: rgb(var(--ob-violet-rgb) / 0.12); box-shadow: inset 3px 0 0 var(--ob-violet); }
html.cp-v2 .xp2-bl-n { color: var(--ob-mute); font-size: var(--ob-fs-sm); text-align: center; }
html.cp-v2 .xp2-bl-nick { min-width: 0; overflow: hidden; color: var(--ob-ink); font-weight: 650; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .xp2-bl-nick:hover { text-decoration: underline; }
html.cp-v2 .xp2-bl-nick:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; border-radius: var(--ob-r-xs); }
@media (max-width: 600px) {
  html.cp-v2 .xp2-prc { grid-template-columns: minmax(0, 1fr); }
  html.cp-v2 .xp2-prc .cx2-btn { justify-self: start; }
  html.cp-v2 .xp2-bl-r { grid-template-columns: 28px 36px minmax(0, 1fr) auto; column-gap: var(--ob-s-2); padding-inline: var(--ob-s-3); }
  html.cp-v2 .xp2-bl-r > .xp2-bl-n { grid-row: 1 / span 2; }
  html.cp-v2 .xp2-bl-r > .xp2-bav { grid-row: 1 / span 2; }
  html.cp-v2 .xp2-bl-r > .xp2-bl-nick { grid-column: 3; grid-row: 1; }
  html.cp-v2 .xp2-bl-r > .xp2-bav-lv { grid-column: 3; grid-row: 2; justify-self: start; }
  html.cp-v2 .xp2-bl-r > .xp2-v { grid-column: 4; grid-row: 1 / span 2; }
}
/* Konto „Profilbilder“: Extras, Banner „Ohne“ */
html.cp-v2 .xp2-lk-ex { display: grid; gap: var(--ob-s-2); }
html.cp-v2 .xp2-lk-exl { color: var(--ob-mute); font: 650 var(--ob-fs-xs) / 1.2 var(--cp-font-mono); letter-spacing: var(--ob-track-caps); text-transform: uppercase; }
html.cp-v2 .xp2-lk-chip { display: inline-flex; align-items: center; gap: var(--ob-s-2); }
html.cp-v2 .xp2-lk-chip.is-lock { opacity: 0.4; cursor: default; }
html.cp-v2 .xp2-lk-chip.is-lock:hover { background: var(--ob-field); }
html.cp-v2 .xp2-lk-bn--none { background-image: none; border-style: dashed; }
/* Extras (nur Beta, Klasse an <html> kommt aus xp.js): reine Token-Varianten */
@keyframes xp2Pulse {
  0%, 100% { filter: drop-shadow(0 0 var(--ob-s-3) rgb(var(--ob-violet-rgb) / 0.35)) drop-shadow(0 14px 22px rgb(var(--ob-black-rgb) / 0.5)); }
  50% { filter: drop-shadow(0 0 var(--ob-s-6) rgb(var(--ob-coral-rgb) / 0.6)) drop-shadow(0 14px 22px rgb(var(--ob-black-rgb) / 0.5)); }
}
html.cp-v2.xp2-bst-1 .ps2-stg .ps-pack-photo:not(.ps-box-photo) { filter: drop-shadow(0 0 var(--ob-s-5) rgb(var(--ob-aqua-rgb) / 0.6)) drop-shadow(0 14px 22px rgb(var(--ob-black-rgb) / 0.5)); }
html.cp-v2.xp2-bst-2 .ps2-stg .ps-pack-photo:not(.ps-box-photo) { animation: xp2Pulse 2.4s ease-in-out infinite; }
html.cp-v2.xp2-bfx-1 .ps-tear:not(.jackpot) .ps-tear-glow { background: radial-gradient(ellipse at 50% 55%, rgb(var(--ob-white-rgb) / 0.95) 0%, rgb(var(--ob-violet-rgb) / 0.55) 30%, rgb(var(--ob-violet-rgb) / 0) 68%); }
html.cp-v2.xp2-bfx-1 .ps-tear-flash { background: radial-gradient(circle, rgb(var(--ob-white-rgb) / 0.8) 0%, rgb(var(--ob-violet-rgb) / 0.3) 30%, rgb(var(--ob-violet-rgb) / 0) 62%); }
html.cp-v2.xp2-cb-1 .bt2-face.bt2-bk::after, html.cp-v2.xp2-cb-2 .bt2-face.bt2-bk::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
html.cp-v2.xp2-cb-1 .bt2-face.bt2-bk::after { background: repeating-linear-gradient(45deg, rgb(var(--ob-white-rgb) / 0.16) 0 2px, transparent 2px 12px), repeating-linear-gradient(-45deg, rgb(var(--ob-white-rgb) / 0.16) 0 2px, transparent 2px 12px); }
html.cp-v2.xp2-cb-2 .bt2-face.bt2-bk::after { background: linear-gradient(160deg, rgb(var(--ob-violet-rgb) / 0.4), rgb(var(--ob-aqua-rgb) / 0.2)); box-shadow: inset 0 0 0 4px rgb(var(--ob-violet-rgb) / 0.9), inset 0 0 0 6px rgb(var(--ob-white-rgb) / 0.35); }
html.cp-v2.xp2-bc-1 :is(.bd2-prev, .bd2-book) { background-image: radial-gradient(color-mix(in srgb, var(--c) 40%, transparent) 1.5px, transparent 1.5px); background-size: 14px 14px; }
html.cp-v2.xp2-bc-2 :is(.bd2-prev, .bd2-book) { background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 26%, transparent) 0 2px, transparent 2px 14px); }
@media (prefers-reduced-motion: reduce) {
  html.cp-v2.xp2-bst-2 .ps2-stg .ps-pack-photo:not(.ps-box-photo) { animation: none; filter: drop-shadow(0 0 var(--ob-s-5) rgb(var(--ob-violet-rgb) / 0.5)) drop-shadow(0 14px 22px rgb(var(--ob-black-rgb) / 0.5)); }
}
/* === /XP: FORTSCHRITT === */
/* === XP: VITRINE + ABZEICHEN ===
   Styleguide „Fortschritt“: Vitrine (öffentliches Profil + Editor in #looks) und Saison-Abzeichen (Sechseck, Bronze Koralle, Silber Aqua, Gold Amber). Nur Tokens. */
html.cp-v2 .xp2-vit-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ob-s-3); max-width: calc(var(--ob-read-max) / 2); }
html.cp-v2 .xp2-vc { display: grid; align-content: start; gap: var(--ob-s-1); min-width: 0; }
html.cp-v2 .xp2-vc-i { display: block; aspect-ratio: 63 / 88; overflow: hidden; border-radius: var(--ob-r-xs); background: var(--ob-field); box-shadow: var(--ob-shadow-1); }
html.cp-v2 .xp2-vc-i img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.cp-v2 .xp2-vc b { overflow: hidden; color: var(--ob-ink); font-size: var(--ob-fs-xs); text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .xp2-vc-s { overflow: hidden; color: var(--ob-mute); font: 600 var(--ob-fs-2xs) / 1.3 var(--cp-font-mono); text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .xp2-vcw { position: relative; min-width: 0; }
html.cp-v2 .xp2-vx { position: absolute; top: var(--ob-s-1); right: var(--ob-s-1); display: grid; place-items: center; box-sizing: border-box; width: var(--ob-tap-min); height: var(--ob-tap-min); padding: 0; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-pill); background: var(--ob-pop); color: var(--ob-ink); cursor: pointer; }
html.cp-v2 .xp2-vx .ob-icon { width: var(--ob-icon); height: var(--ob-icon); }
html.cp-v2 .xp2-vx:hover { background: var(--ob-hover); }
html.cp-v2 .xp2-vx:focus-visible, html.cp-v2 .xp2-vadd:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2 .xp2-vadd { display: grid; place-items: center; box-sizing: border-box; aspect-ratio: 63 / 88; padding: 0; border: 1.5px dashed var(--ob-line-2); border-radius: var(--ob-r-xs); background: transparent; color: var(--ob-mute); font: inherit; font-size: var(--ob-fs-xs); cursor: pointer; }
html.cp-v2 .xp2-vadd:hover { background: var(--ob-hover); color: var(--ob-ink); }
@media (min-width: 900px) { html.cp-v2 .xp2-vit-g--ed { grid-template-columns: repeat(6, minmax(0, 1fr)); } html.cp-v2 .xp2-vit-g--ed .xp2-vc b { font-size: var(--ob-fs-2xs); } }
/* Auswahl-Fenster: Hülle des Level-up-Fensters, links ausgerichtet, Liste scrollt */
html.cp-v2 .xp2-dlg--pk { display: flex; flex-direction: column; align-items: stretch; height: var(--ob-sheet-max); padding-top: var(--ob-s-5); text-align: left; background: var(--ob-pop); gap: var(--ob-s-3); }
html.cp-v2 .xp2-vp-h { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-3); color: var(--ob-ink); font-size: var(--ob-fs-lg); }
html.cp-v2 .xp2-vp-h .ko2-btn2 { width: var(--ob-tap); padding: 0; }
html.cp-v2 .xp2-vp-h .ob-icon { width: var(--ob-icon); height: var(--ob-icon); }
html.cp-v2 .xp2-vp-q { box-sizing: border-box; width: 100%; min-height: var(--ob-tap); padding: 0 var(--ob-s-3); border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-ink); font: inherit; font-size: var(--ob-fs-base); }
html.cp-v2 .xp2-vp-q:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2 .xp2-vp-l { display: grid; flex: 1 1 auto; align-content: start; gap: var(--ob-s-3); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
html.cp-v2 .xp2-vp-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ob-s-2); padding: var(--ob-s-1); }
html.cp-v2 .xp2-vp-c { aspect-ratio: 63 / 88; }
html.cp-v2 .xp2-vp-c:disabled { opacity: 0.4; cursor: not-allowed; }
html.cp-v2 .xp2-vp-f { display: flex; flex: none; justify-content: flex-end; }
html.cp-v2 .xp2-vp-h, html.cp-v2 .xp2-vp-q, html.cp-v2 .xp2-dlg--pk .xp2-lk-chips { flex: none; }
@media (min-width: 900px) { html.cp-v2 .xp2-dlg--pk { width: min(640px, calc(100vw - 2 * var(--ob-gutter))); height: min(80vh, 720px); } html.cp-v2 .xp2-vp-g { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Saison-Abzeichen: Sechseck (Linie + 18 % Fläche + Monatszahl), Bronze Koralle, Silber Aqua, Gold Amber; Ziel/noch nicht erreicht 40 % */
html.cp-v2 .xp2-bdgs { display: flex; flex-wrap: wrap; gap: var(--ob-s-3); margin: 0; padding: 0; list-style: none; }
html.cp-v2 .xp2-bdg { display: grid; justify-items: center; align-content: start; gap: var(--ob-s-1); width: 72px; }
html.cp-v2 .xp2-bdg span { color: var(--ob-mute); font: 650 var(--ob-fs-2xs) / 1.25 var(--cp-font-mono); text-align: center; overflow-wrap: anywhere; }
html.cp-v2 .xp2-bdg.is-dim { opacity: 0.4; }
html.cp-v2 .xp2-hex { display: block; font-family: var(--cp-font-mono); }
html.cp-v2 .xp2-hex--t1 { color: var(--ob-coral); }
html.cp-v2 .xp2-hex--t2 { color: var(--ob-aqua); }
html.cp-v2 .xp2-hex--t3 { color: var(--ob-amber); }
html[data-theme="light"].cp-v2 .xp2-hex--t2 { color: var(--ob-aqua-ink); }
html[data-theme="light"].cp-v2 .xp2-hex--t3 { color: var(--ob-amber-ink); }
/* === /XP: VITRINE + ABZEICHEN === */

/* === COLL: HERO === (Binder-Banner oben auf der Sammlungs-Uebersicht, nur Gaeste; Styleguide "Sammlung" > Sammlung-Hero; Markup + Code sets/coll-hero.js)
   Immer dunkel wie Battle-/Pack-Hero (--ob-banner-*). Dieser Block ist das Endbild (9/9, Treffer): ohne JS bzw. bei reduzierter Bewegung steht es so da. */
html.cp-v2 .cxh-wrap { display: grid; gap: var(--ob-s-3); margin-bottom: var(--ob-s-5); min-width: 0; }
html.cp-v2 .cx2-hero { --cxh-a: var(--ob-aqua); --cxh-a-rgb: var(--ob-aqua-rgb); --cxh-b-rgb: var(--ob-violet-rgb);
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 340px; min-width: 0;
  border-radius: var(--ob-r-lg); border: 1px solid var(--ob-banner-line); color: var(--ob-banner-ink); box-shadow: var(--ob-shadow-1); cursor: pointer;
  background: radial-gradient(420px 320px at 74% 48%, rgb(var(--cxh-a-rgb) / 0.16), transparent 70%), radial-gradient(520px 340px at 6% 100%, rgb(var(--cxh-b-rgb) / 0.22), transparent 65%), var(--ob-banner-bg); }
html.cp-v2 .cx2-hero[data-game="rb"] { --cxh-a: var(--ob-coral); --cxh-a-rgb: var(--ob-coral-rgb); --cxh-b-rgb: var(--ob-violet-rgb); }
html.cp-v2 .cx2-hero[data-game="op"] { --cxh-a: var(--ob-amber); --cxh-a-rgb: var(--ob-amber-rgb); --cxh-b-rgb: var(--ob-coral-rgb); }
html.cp-v2 .cx2-hero:focus-visible { outline: 2px solid var(--ob-violet); outline-offset: 2px; }
html.cp-v2 .cxh-fx { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
html.cp-v2 .cxh-txt { position: relative; z-index: 3; display: grid; align-content: center; gap: var(--ob-s-3); min-width: 0; padding: var(--ob-s-7); cursor: auto; }
html.cp-v2 .cxh-eb { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; letter-spacing: var(--ob-track-caps); line-height: 1; text-transform: uppercase; color: var(--cxh-a); }
html.cp-v2 .cx2-hero .cxh-t { display: grid; gap: 6px; margin: 0; font-size: var(--ob-fs-base); line-height: var(--ob-lh-tight); background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--ob-banner-mute); text-wrap: balance; }
html.cp-v2 .cxh-t1 { font-size: var(--ob-fs-display); font-weight: 800; letter-spacing: -0.02em; color: var(--ob-banner-ink); overflow-wrap: anywhere; }
html.cp-v2 .cxh-t2 { font-size: var(--ob-fs-base); font-weight: 650; color: var(--ob-banner-mute); }
html.cp-v2 .cxh-p { margin: 0; max-width: 38ch; color: var(--ob-banner-mute); font-size: var(--ob-fs-base); line-height: var(--ob-lh-body); }
html.cp-v2 .cxh-ch { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); margin: 0; padding: 0; list-style: none; }
html.cp-v2 .cxh-ch li { padding: var(--ob-s-2) var(--ob-s-3); border-radius: var(--ob-r-pill); border: 1px solid var(--ob-banner-line); background: var(--ob-banner-field); color: var(--ob-banner-mute); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); line-height: 1.2; }
html.cp-v2 .cxh-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-s-2) var(--ob-s-4); margin-top: var(--ob-s-1); }
html.cp-v2 .cxh-hint { font-size: var(--ob-fs-xs); color: var(--ob-banner-mute); }
html.cp-v2 .cxh-art { position: relative; z-index: 3; min-width: 0; min-height: 320px; padding: var(--ob-s-6) var(--ob-s-4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ob-s-4); container-type: inline-size; perspective: 1400px; }
html.cp-v2 .cxh-bd { --pw: clamp(30px, calc((100cqw - 150px) / 6.4), 60px); position: relative; display: grid; grid-template-columns: auto auto auto; transform: rotateX(10deg) rotateZ(-2deg); transform-style: preserve-3d; }
html.cp-v2 .cxh-pg { position: relative; display: grid; grid-template-columns: repeat(3, var(--pw)); gap: calc(var(--pw) * 0.12); padding: calc(var(--pw) * 0.22); border: 1px solid var(--ob-banner-line);
  background: linear-gradient(180deg, rgb(var(--cxh-b-rgb) / 0.16), rgb(var(--cxh-b-rgb) / 0.06)), var(--ob-banner-bg); box-shadow: 0 30px 60px -30px rgb(var(--ob-black-rgb) / 0.9); }
html.cp-v2 .cxh-pg.l { border-radius: var(--ob-r-sm) var(--ob-r-xs) var(--ob-r-xs) var(--ob-r-sm); }
html.cp-v2 .cxh-pg.r { border-radius: var(--ob-r-xs) var(--ob-r-sm) var(--ob-r-sm) var(--ob-r-xs); transform-origin: left center; backface-visibility: hidden; }
html.cp-v2 .cxh-rings { width: calc(var(--pw) * 0.42); display: grid; align-content: space-evenly; justify-items: center; background: linear-gradient(90deg, rgb(var(--ob-black-rgb) / 0.6), rgb(var(--ob-white-rgb) / 0.06), rgb(var(--ob-black-rgb) / 0.6)); }
html.cp-v2 .cxh-rings i { width: calc(var(--pw) * 0.42); height: calc(var(--pw) * 0.14); border-radius: var(--ob-r-pill); background: linear-gradient(180deg, rgb(var(--ob-white-rgb) / 0.92), rgb(var(--ob-white-rgb) / 0.5)); box-shadow: 0 1px 2px rgb(var(--ob-black-rgb) / 0.6); }
html.cp-v2 .cxh-slot { position: relative; display: block; aspect-ratio: var(--ob-ratio-card); border-radius: calc(var(--ob-r-xs) / 2); border: 1px solid var(--ob-banner-line); background: var(--ob-banner-field); overflow: hidden; }
html.cp-v2 .cxh-slot img, html.cp-v2 .cxh-fly img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
html.cp-v2 .cxh-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--ob-amber), var(--ob-holo-amber) 55%, var(--ob-amber-ink)); box-shadow: inset 0 0 0 2px rgb(var(--ob-white-rgb) / 0.35); }
html.cp-v2 .cxh-slot.e { border-style: dashed; }
html.cp-v2 .cxh-slot.e > * { opacity: 0; }
/* Huelle: Glanzstreifen beim Einsetzen */
html.cp-v2 .cxh-slot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgb(var(--ob-white-rgb) / 0.28) 46%, transparent 60%); transform: translateX(-120%); pointer-events: none; }
html.cp-v2 .cxh-slot.seat::after { animation: cxhGloss var(--ob-dur-3) var(--ob-ease-out) both; }
@keyframes cxhGloss { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
html.cp-v2 .cxh-slot.hit:not(.e) { border-color: var(--ob-amber); }
html.cp-v2 .cxh-slot.hit.on { box-shadow: 0 0 0 2px var(--ob-amber), 0 0 18px 2px rgb(var(--ob-amber-rgb) / 0.7); }
html.cp-v2 .cxh-chip { position: absolute; z-index: 5; right: calc(var(--pw) * 0.72); bottom: calc(var(--pw) * 1.6); transform: translateX(50%); padding: var(--ob-s-1) var(--ob-s-2); border-radius: var(--ob-r-pill); background: var(--ob-amber); color: var(--ob-banner-bg);
  font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 800; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 18px rgb(var(--ob-amber-rgb) / 0.6); transition: opacity var(--ob-dur-2) var(--ob-ease-out), transform var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .cxh-chip.off { opacity: 0; transform: translateX(50%) scale(0.8); transition: none; }
html.cp-v2 .cxh-fly { position: absolute; z-index: 5; display: block; border-radius: calc(var(--ob-r-xs) / 2); overflow: hidden; box-shadow: 0 18px 30px -12px rgb(var(--ob-black-rgb) / 0.8); will-change: transform, opacity; pointer-events: none; }
html.cp-v2 .cxh-prog { position: relative; z-index: 4; display: grid; grid-template-columns: auto auto; gap: 6px var(--ob-s-4); align-items: center; min-width: 210px; padding: var(--ob-s-2) var(--ob-s-4);
  border-radius: var(--ob-r-sm); border: 1px solid var(--ob-banner-line); background: var(--ob-banner-field); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-banner-mute); white-space: nowrap; }
html.cp-v2 .cxh-prog b { justify-self: end; color: var(--ob-banner-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
html.cp-v2 .cxh-bar { grid-column: 1 / -1; height: 4px; border-radius: var(--ob-r-pill); background: var(--ob-banner-field); overflow: hidden; }
html.cp-v2 .cxh-bar i { display: block; height: 100%; background: var(--cxh-a); transform-origin: left; transition: transform var(--ob-dur-3) var(--ob-ease-out); }
/* Vorteile unter dem Banner (folgen dem Theme) */
html.cp-v2 .cxh-feat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ob-s-3); }
html.cp-v2 .cxh-fi { display: grid; gap: var(--ob-s-1); align-content: start; min-width: 0; padding: var(--ob-s-4); border-radius: var(--ob-r-md); border: 1px solid var(--ob-line); background: var(--ob-surface); }
html.cp-v2 .cxh-fi svg { width: var(--ob-icon); height: var(--ob-icon); margin-bottom: var(--ob-s-1); fill: none; stroke: var(--ob-violet-text); stroke-width: var(--ob-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
html.cp-v2 .cxh-fi b { font-size: var(--ob-fs-md); font-weight: 700; color: var(--ob-ink); }
html.cp-v2 .cxh-fi span { font-size: var(--ob-fs-sm); color: var(--ob-mute); }
@media (max-width: 899px) {
  html.cp-v2 .cx2-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  html.cp-v2 .cxh-art { order: -1; min-height: 250px; padding: var(--ob-s-5) var(--ob-s-3) var(--ob-s-2); gap: var(--ob-s-3); }
  html.cp-v2 .cxh-txt { padding: var(--ob-s-1) var(--ob-s-5) var(--ob-s-5); }
  html.cp-v2 .cxh-t1 { font-size: var(--ob-fs-xl); }
  html.cp-v2 .cxh-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 365px) {
  html.cp-v2 .cxh-t1 { font-size: var(--ob-fs-lg); }
  html.cp-v2 .cxh-txt { padding-inline: var(--ob-s-4); }
}
@media (prefers-reduced-motion: reduce) {
  html.cp-v2 .cxh-fx { display: none; }
  html.cp-v2 .cxh-slot.seat::after { animation: none; }
  html.cp-v2 :is(.cxh-bar i, .cxh-chip) { transition: none; }
}
/* === /COLL: HERO === */

/* === XP: STATISTIK + DEAL-ALARM === */
/* Konto: Bereich „Statistik“ (#stats, ab Level 20) und Deal-Alarm-Gruppe in den Einstellungen (ab Level 30). Code: konto/konto.js (Sammler-Statistik, Deal-Alarm). */
html.cp-v2 .ko2-st-top { display: flex; flex-wrap: wrap; gap: var(--ob-s-3); align-items: center; justify-content: space-between; }
html.cp-v2 .ko2-st-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ob-s-3); }
html.cp-v2 .ko2-st-lock { display: flex; align-items: center; gap: var(--ob-s-3); min-height: 56px; padding: 8px 14px; border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); color: var(--ob-mute); font-size: var(--ob-fs-md); }
html.cp-v2 .ko2-st-lock .xp2-lock { flex: none; width: var(--ob-icon-sm); height: var(--ob-icon-sm); color: var(--ob-dim); }
html.cp-v2 .ko2-sgroup .ko2-st-lock { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; }
html.cp-v2 .ko2-st-th { flex: none; width: 36px; height: 50px; border-radius: var(--ob-r-xs); background: var(--ob-field); object-fit: cover; display: block; }
html.cp-v2 .ko2-row-m b i { font-style: normal; font-weight: 400; color: var(--ob-mute); }
html.cp-v2 .ko2-st-bars { display: grid; gap: var(--ob-s-2); padding: var(--ob-s-3) var(--ob-s-4); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); }
html.cp-v2 .ko2-st-bar { display: grid; grid-template-columns: minmax(64px, 140px) minmax(0, 1fr) auto; align-items: center; gap: var(--ob-s-3); min-height: var(--ob-tap-min); color: var(--ob-ink); font-size: var(--ob-fs-sm); text-decoration: none; }
html.cp-v2 a.ko2-st-bar:hover .ko2-st-bn { color: var(--ob-violet-text); }
html.cp-v2 .ko2-st-bn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .ko2-st-bar .ko2-bar { height: 8px; }
html.cp-v2 .ko2-st-bar .ko2-mono { font-size: var(--ob-fs-sm); text-align: right; white-space: nowrap; }
html.cp-v2 .ko2-da-sw { cursor: pointer; }
html.cp-v2 .ko2-da-sw:focus-within .settings-switch { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2 .ko2-sgroup .ko2-da-blk { display: grid; justify-content: stretch; gap: var(--ob-s-2); }
html.cp-v2 .ko2-da-desc { margin: 0; color: var(--ob-mute); font-size: var(--ob-fs-sm); line-height: var(--ob-lh-body); }
html.cp-v2 .ko2-da-desc b { color: var(--ob-ink); font-family: var(--cp-font-mono); }
html.cp-v2 .ko2-da-chips { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); }
html.cp-v2 .ko2-da-h { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 .ko2-da-chips .v2-chip small { font-size: var(--ob-fs-xs); color: var(--ob-dim); }
html.cp-v2 .ko2-da-chips .v2-chip:disabled { opacity: 0.55; cursor: not-allowed; }
html.cp-v2 .ko2-da-chips .v2-chip.on { color: var(--ob-ink); }
html.cp-v2[data-theme="light"] .ko2-da-chips .v2-chip { color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] .ko2-da-chips .v2-chip.on { color: var(--ob-ink) !important; }
@media (max-width: 899px) {
  html.cp-v2 .ko2-st-bar { grid-template-columns: minmax(56px, 96px) minmax(0, 1fr) auto; gap: var(--ob-s-2); }
  html.cp-v2 .ko2-da-chips .v2-chip { min-height: var(--ob-tap); }
}
/* === /XP: STATISTIK + DEAL-ALARM === */
/* === XP: PROFILKARTE IM MENÜ === */
/* Profilkarte oben in der Navigation, alle Breiten (ganze Karte = Link ins Profil). Bis 600 px zusätzlich kein Profilbild im Header, ☰ bleibt (Inhaber 26.10.2026) */
@media (max-width: 600px) { html.cp-v2 .header-menu-controls > #cpXpHdr { display: none; } }
html.cp-v2 .site-menu-header:has(> .xp2-mcard) { align-items: flex-start; gap: var(--ob-s-2); }
html.cp-v2 .site-menu-header:has(> .xp2-mcard) > .site-menu-account-btn { display: none; }
html.cp-v2 .xp2-mcard { display: flex; flex-direction: column; gap: var(--ob-s-2); flex: 1; min-width: 0; padding: var(--ob-s-3); background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); color: var(--ob-ink); text-decoration: none; transition: background var(--ob-dur-1) var(--ob-ease-out), border-color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .xp2-mcard:hover { background: var(--ob-hover); border-color: var(--ob-line-2); }
html.cp-v2 .xp2-mcard:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2 .xp2-mcard-top { display: flex; align-items: center; gap: var(--ob-s-3); min-width: 0; }
html.cp-v2 .xp2-mcard-top > .xp2-ring { flex: none; }
html.cp-v2 .xp2-mcard-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
html.cp-v2 .xp2-mcard-txt > b { font-size: var(--ob-fs-md); font-weight: 800; color: var(--ob-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .xp2-mcard-txt > span { font-size: var(--ob-fs-sm); color: var(--ob-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .xp2-mcard-chev { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ob-dim); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.cp-v2 .xp2-mcard-bar { display: block; height: 6px; border-radius: var(--ob-r-pill); background: var(--ob-field); overflow: hidden; }
html.cp-v2 .xp2-mcard-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--ob-violet); }
html.cp-v2 .xp2-mcard-meta { display: flex; justify-content: space-between; gap: var(--ob-s-2); font-size: var(--ob-fs-xs); color: var(--ob-dim); font-variant-numeric: tabular-nums; }
/* === /XP: PROFILKARTE IM MENÜ === */

/* ===== UNTERSTUETZEN-DIALOG (Buy Me a Coffee, .bmc2-*; Code script.js footerCoffee; Inhaber 26.10.2026) =====
   Kopf mit Icon-Kachel (trinkende Tasse), Text, 3 Kennzahlen, Haupt-Button, Fusszeile. Handy: Bottom-Sheet (allg. .modal-backdrop-Regel). */
html.cp-v2 .modal-content.bmc2 { position: relative; max-width: var(--ob-pop-w-s) !important; padding: var(--ob-s-5); display: grid; gap: var(--ob-s-4); overflow-y: auto; }
html.cp-v2 .bmc2-x { position: absolute; top: var(--ob-s-3); right: var(--ob-s-3); }
html.cp-v2 .bmc2-hd { display: flex; gap: var(--ob-s-3); align-items: center; padding-right: 52px; }
html.cp-v2 .bmc2-ic { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--ob-r-md); background: rgb(var(--ob-violet-rgb) / 0.14); color: var(--ob-violet-text); overflow: hidden; }
html.cp-v2 .bmc2-hd b { display: block; font-size: var(--ob-fs-lg); font-weight: 800; line-height: var(--ob-lh-tight); letter-spacing: -0.02em; color: var(--ob-ink); }
html.cp-v2 .bmc2-hd div span { display: block; margin-top: var(--ob-s-1); font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .bmc2-txt { margin: 0; font-size: var(--ob-fs-md); line-height: var(--ob-lh-body); color: var(--ob-mute); }
html.cp-v2 .bmc2-kz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ob-s-2); }
html.cp-v2 .bmc2-kz div { display: grid; gap: 2px; min-width: 0; padding: 10px var(--ob-s-3); background: var(--ob-surface); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); }
html.cp-v2 .bmc2-kz small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ob-mute); }
html.cp-v2 .bmc2-kz strong { font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ob-fs-lg); font-weight: 800; color: var(--ob-ink); }
html.cp-v2 .bmc-body a.bmc2-go, html.cp-v2 a.bmc2-go { width: 100%; color: #fff; }
html.cp-v2 .bmc2-ft { display: grid; gap: 2px; text-align: center; }
html.cp-v2 .bmc2-ft b { font-size: var(--ob-fs-sm); font-weight: 650; color: var(--ob-ink); }
html.cp-v2 .bmc2-ft span { font-size: var(--ob-fs-xs); color: var(--ob-dim); }
/* Tasse: nur transform/opacity; 3 Schlucke, Fuellstand sinkt, dann nachgefuellt; Dampf dauerhaft. Ruhig bei reduzierter Bewegung. */
html.cp-v2 .bmc2-cup { width: 52px; height: 52px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html.cp-v2 .bmc2-body { transform-box: view-box; transform-origin: 46px 50px; animation: cpBmcSip var(--ob-loop-sip) var(--ob-ease-out) infinite; }
html.cp-v2 .bmc2-fill { fill: currentColor; stroke: none; opacity: 0.35; transform-box: fill-box; transform-origin: 50% 100%; animation: cpBmcLevel calc(var(--ob-loop-sip) * 3) linear infinite; }
html.cp-v2 .bmc2-st { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: cpBmcSteam var(--ob-loop-steam) var(--ob-ease-out) infinite; }
html.cp-v2 .bmc2-st:nth-of-type(2) { animation-delay: calc(var(--ob-loop-steam) / 3); }
html.cp-v2 .bmc2-st:nth-of-type(3) { animation-delay: calc(var(--ob-loop-steam) * 2 / 3); }
html.cp-v2 .bmc2-plate { opacity: 0.55; }
@keyframes cpBmcSip { 0%, 20% { transform: none; } 32%, 46% { transform: translate(-3px, -7px) rotate(-24deg); } 58%, 100% { transform: none; } }
@keyframes cpBmcLevel { 0%, 9% { transform: scaleY(1); } 14%, 42% { transform: scaleY(0.68); } 47%, 75% { transform: scaleY(0.4); } 80%, 90% { transform: scaleY(0.12); } 96%, 100% { transform: scaleY(1); } }
@keyframes cpBmcSteam { 0% { opacity: 0; transform: translateY(4px) scaleY(0.6); } 35% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-8px) scaleY(1.1); } }
@media (prefers-reduced-motion: reduce) { html.cp-v2 .bmc2-cup * { animation: none !important; } html.cp-v2 .bmc2-st { opacity: 0.6; } }
@media (max-width: 899px) { html.cp-v2 .modal-content.bmc2 { max-width: none !important; padding-top: var(--ob-s-3); } html.cp-v2 .bmc2-x { top: var(--ob-s-5); } }
/* === XP: ÖFFENTLICHES PROFIL + HINTERGRÜNDE === */
/* Hintergrund hinter der ganzen Seite (#xp2PageBg öffentliches Profil, #cpSiteBg Prestige „ganze Website“): Flächen nur aus Farb-Tokens, läuft nach unten aus */
html.cp-v2 .xp2-pbg { position: absolute; top: 0; left: 0; right: 0; height: 1100px; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
html.cp-v2 .xp2-pbg--site { position: fixed; height: 100vh; opacity: 0.5; }
html.cp-v2[data-theme="light"] .xp2-pbg { opacity: 0.55; }
html.cp-v2[data-theme="light"] .xp2-pbg--site { opacity: 0.3; }
html.cp-v2 body:has(#xp2PageBg) #cpSiteBg { display: none; }
html.cp-v2 .xp2-bg--nebel { background: radial-gradient(60% 50% at 18% 10%, rgb(var(--ob-violet-rgb) / 0.38), transparent 70%), radial-gradient(45% 40% at 85% 25%, rgb(var(--ob-aqua-rgb) / 0.26), transparent 70%), radial-gradient(40% 35% at 55% 60%, rgb(var(--ob-coral-rgb) / 0.16), transparent 70%); }
html.cp-v2 .xp2-bg--sterne { background: radial-gradient(1.5px 1.5px at 20px 30px, rgb(var(--ob-tint-rgb) / 0.7), transparent 60%) 0 0 / 170px 130px, radial-gradient(1px 1px at 80px 90px, rgb(var(--ob-tint-rgb) / 0.5), transparent 60%) 0 0 / 170px 130px, radial-gradient(1.2px 1.2px at 140px 50px, rgb(var(--ob-aqua-rgb) / 0.8), transparent 60%) 0 0 / 170px 130px, radial-gradient(60% 50% at 50% 0%, rgb(var(--ob-violet-rgb) / 0.3), transparent 70%); }
html.cp-v2 .xp2-bg--raster { background: linear-gradient(rgb(var(--ob-aqua-rgb) / 0.14) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgb(var(--ob-aqua-rgb) / 0.14) 1px, transparent 1px) 0 0 / 44px 44px, radial-gradient(70% 60% at 50% 0%, rgb(var(--ob-aqua-rgb) / 0.24), transparent 70%); }
html.cp-v2 .xp2-bg--glut { background: radial-gradient(2px 2px at 30px 40px, rgb(var(--ob-amber-rgb) / 0.8), transparent 60%) 0 0 / 150px 160px, radial-gradient(1.5px 1.5px at 110px 120px, rgb(var(--ob-coral-rgb) / 0.8), transparent 60%) 0 0 / 150px 160px, linear-gradient(200deg, rgb(var(--ob-coral-rgb) / 0.34), rgb(var(--ob-amber-rgb) / 0.18) 45%, transparent 80%); }
html.cp-v2 .xp2-bg--aurora { background: linear-gradient(165deg, transparent 10%, rgb(var(--ob-green-rgb) / 0.3) 25%, transparent 40%), linear-gradient(175deg, transparent 22%, rgb(var(--ob-aqua-rgb) / 0.28) 38%, transparent 52%), linear-gradient(160deg, transparent 35%, rgb(var(--ob-violet-rgb) / 0.3) 50%, transparent 66%); }
html.cp-v2 .xp2-bg--legende { background: repeating-conic-gradient(from 0deg at 50% -10%, rgb(var(--ob-amber-rgb) / 0.16) 0 4deg, transparent 4deg 12deg), radial-gradient(60% 50% at 50% 0%, rgb(var(--ob-amber-rgb) / 0.3), transparent 70%); }
html.cp-v2 .xp2-bg--holo { background: linear-gradient(125deg, rgb(var(--ob-holo-sky-rgb) / 0.28), rgb(var(--ob-holo-purple-rgb) / 0.28) 30%, rgb(var(--ob-holo-rose-rgb) / 0.22) 60%, rgb(var(--ob-holo-amber-rgb) / 0.24) 85%, rgb(var(--ob-holo-emerald-rgb) / 0.22)) 0 0 / 200% 200%; }
html.cp-v2 #xp2PageBg.xp2-bg--holo { animation: xp2Holo 18s var(--ob-ease-io) infinite alternate; }
@keyframes xp2Holo { to { background-position: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { html.cp-v2 #xp2PageBg.xp2-bg--holo { animation: none; } }
/* Profil-Hero (öffentliches Profil): Banner oben, großes Bild ragt hinein, Name groß, 4 Kennzahlen */
html.cp-v2 .xp2-hero { position: relative; overflow: hidden; border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-tile); background: var(--ob-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--ob-shadow-2); }
html.cp-v2 .xp2-hero-bn { position: relative; height: 190px; background: var(--xp2-bn, linear-gradient(120deg, rgb(var(--ob-violet-rgb) / 0.3), rgb(var(--ob-aqua-rgb) / 0.16))), var(--ob-surface); }
html.cp-v2 .xp2-hero-bn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, var(--ob-surface)); opacity: 0.7; }
html.cp-v2 .xp2-hero-b { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--ob-s-2) var(--ob-s-5); margin-top: -62px; padding: 0 var(--ob-s-6) var(--ob-s-5); }
html.cp-v2 .xp2-hero-av { width: 132px; height: 132px; border-radius: 50%; box-shadow: 0 0 0 6px var(--ob-surface), 0 0 40px rgb(var(--ob-violet-rgb) / 0.45); background: var(--ob-surface); }
html.cp-v2 .xp2-hero-av > * { width: 100%; height: 100%; }
html.cp-v2 .xp2-hero-m { display: grid; gap: var(--ob-s-2); min-width: 0; }
html.cp-v2 .xp2-hero-m h1 { margin: 0; overflow-wrap: anywhere; font-size: var(--ob-fs-display); font-weight: 800; letter-spacing: -0.03em; line-height: var(--ob-lh-tight); }
html.cp-v2 .xp2-hero-m h1:not(.xp2-holo-name) { background: var(--ob-title); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.cp-v2 .xp2-hero-k { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ob-s-3); margin-top: var(--ob-s-4); }
html.cp-v2 .xp2-hk { display: grid; align-content: start; gap: var(--ob-s-1); min-width: 0; padding: var(--ob-s-3) var(--ob-s-4); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-field); }
html.cp-v2 .xp2-hk span { color: var(--ob-mute); font-size: var(--ob-fs-xs); }
html.cp-v2 .xp2-hk b { overflow: hidden; color: var(--ob-ink); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xl); font-weight: 800; line-height: var(--ob-lh-tight); text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .xp2-hk .xp2-bar { height: 6px; margin-top: var(--ob-s-1); }
/* Vitrine im öffentlichen Profil: größer, aufgefächert, Mitte hervorgehoben */
html.cp-v2 .xp2-page .xp2-vit-g { max-width: none; grid-template-columns: repeat(auto-fit, minmax(0, 170px)); justify-content: center; gap: var(--ob-s-5); padding: var(--ob-s-2) 0 var(--ob-s-1); }
html.cp-v2 .xp2-page .xp2-vc { text-align: center; }
html.cp-v2 .xp2-page .xp2-vc-i { margin-bottom: var(--ob-s-3); box-shadow: var(--ob-shadow-2), 0 0 30px rgb(var(--ob-violet-rgb) / 0.3); transition: transform var(--ob-dur-2) var(--ob-ease-out); }
html.cp-v2 .xp2-page .xp2-vc:nth-child(3n+1) .xp2-vc-i { transform: rotate(-5deg) translateY(8px); }
html.cp-v2 .xp2-page .xp2-vc:nth-child(3n) .xp2-vc-i { transform: rotate(5deg) translateY(8px); }
html.cp-v2 .xp2-page .xp2-vc:nth-child(3n+2) .xp2-vc-i { transform: scale(1.05); box-shadow: var(--ob-shadow-2), 0 0 44px rgb(var(--ob-amber-rgb) / 0.4); }
@media (hover: hover) { html.cp-v2 .xp2-page .xp2-vc:hover .xp2-vc-i { transform: translateY(-4px) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { html.cp-v2 .xp2-page .xp2-vc-i { transition: none; } }
/* Vereinfachter Level-Pfad (öffentliches Profil) */
html.cp-v2 .xp2-lpl-t { position: relative; height: 72px; margin: var(--ob-s-5) var(--ob-s-7) var(--ob-s-2); }
html.cp-v2 .xp2-lpl-l { position: absolute; left: 0; right: 0; top: 14px; height: 6px; border-radius: var(--ob-r-pill); background: var(--ob-line-2); overflow: hidden; }
html.cp-v2 .xp2-lpl-l i { display: block; height: 100%; border-radius: inherit; background: var(--ob-accent); }
html.cp-v2 .xp2-lpl-s { position: absolute; top: 6px; display: flex; flex-direction: column; align-items: center; gap: var(--ob-s-2); transform: translateX(-50%); }
html.cp-v2 .xp2-lpl-s b { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--ob-line-2); border-radius: 50%; background: var(--ob-surface); color: var(--ob-dim); font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 800; }
html.cp-v2 .xp2-lpl-s.on b { border-color: var(--ob-violet); background: var(--ob-violet); color: rgb(var(--ob-white-rgb)); }
html.cp-v2 .xp2-lpl-s.nx b { border-color: var(--ob-aqua); color: var(--ob-ink); box-shadow: 0 0 0 4px rgb(var(--ob-aqua-rgb) / 0.18); }
html.cp-v2 .xp2-lpl-s em { color: var(--ob-mute); font-size: var(--ob-fs-2xs); font-style: normal; white-space: nowrap; }
html.cp-v2 .xp2-lpl-s:not(.on):not(.nx) em { color: var(--ob-dim); }
html.cp-v2 .xp2-lpl-me { position: absolute; top: -18px; padding: 3px 7px; border-radius: var(--ob-r-pill); background: var(--ob-violet); color: rgb(var(--ob-white-rgb)); font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 800; transform: translateX(-50%); white-space: nowrap; }
html.cp-v2 .xp2-lpl-f { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ob-s-2); color: var(--ob-mute); font-size: var(--ob-fs-sm); }
/* Auswahl im Konto (#looks): Hintergrund-Kachel + Schalter „ganze Website“ */
html.cp-v2 .xp2-lk-bgt { display: block; width: 100%; height: 100%; border: 1px solid var(--ob-line); border-radius: var(--ob-r-xs); background-color: var(--ob-bg); }
html.cp-v2 .xp2-lk-bgt.xp2-bg--sterne, html.cp-v2 .xp2-lk-bgt.xp2-bg--raster, html.cp-v2 .xp2-lk-bgt.xp2-bg--glut { background-size: 60px 50px, 60px 50px, 60px 50px, 100% 100%; }
html.cp-v2 .xp2-lk-site { display: flex; align-items: center; justify-content: space-between; gap: var(--ob-s-4); margin-top: var(--ob-s-3); }
html.cp-v2 .xp2-lk-site > span:first-child { display: grid; gap: var(--ob-s-1); min-width: 0; }
html.cp-v2 .xp2-lk-site.is-lock { opacity: 0.6; }
@media (max-width: 600px) {
  html.cp-v2 .xp2-hero-bn { height: 120px; }
  html.cp-v2 .xp2-hero-b { grid-template-columns: minmax(0, 1fr); justify-items: center; margin-top: -58px; padding: 0 var(--ob-s-4) var(--ob-s-4); text-align: center; }
  html.cp-v2 .xp2-hero-av { width: 108px; height: 108px; }
  html.cp-v2 .xp2-hero-m .xp2-tags { justify-content: center; }
  html.cp-v2 .xp2-hero-k { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  html.cp-v2 .xp2-page .xp2-vit-g { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ob-s-3); }
  html.cp-v2 .xp2-lpl-s:not(.lb) em { display: none; }
  html.cp-v2 .xp2-lpl-t { margin-left: var(--ob-s-5); margin-right: var(--ob-s-5); }
}
/* === /XP: ÖFFENTLICHES PROFIL + HINTERGRÜNDE === */
/* === XP: ERFOLGE === */
html.cp-v2 .xp2-ach-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--ob-s-3); margin: var(--ob-s-3) 0 0; padding: 0; list-style: none; }
html.cp-v2 .xp2-ach { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--ob-s-3); padding: var(--ob-s-3); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-field); }
html.cp-v2 .xp2-ach.is-lock { opacity: 0.6; }
html.cp-v2 .xp2-ach-m { display: grid; gap: var(--ob-s-1); min-width: 0; }
html.cp-v2 .xp2-ach-m b { color: var(--ob-ink); font-size: var(--ob-fs-sm); }
html.cp-v2 .xp2-ach-s { color: var(--ob-mute); font: 650 var(--ob-fs-2xs) / 1.3 var(--cp-font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
html.cp-v2 .xp2-ach-m .xp2-bar { height: 6px; }
html.cp-v2 .xp2-ach-m .xp2-dim { font-size: var(--ob-fs-2xs); }
html.cp-v2 .xp2-hex--t0 { color: var(--ob-dim); }
/* === /XP: ERFOLGE === */
/* === XP: DOPPEL-XP-EVENT === */
html.cp-v2 .xp2-ev { display: flex; align-items: center; gap: var(--ob-s-4); padding: var(--ob-s-3) var(--ob-s-4); border: 1px solid rgb(var(--ob-amber-rgb) / 0.45); border-radius: var(--ob-r-md); background: linear-gradient(110deg, rgb(var(--ob-amber-rgb) / 0.16), rgb(var(--ob-violet-rgb) / 0.12)); }
html.cp-v2 .xp2-ev-x { color: var(--ob-amber); font: 800 var(--ob-fs-xl) / 1 var(--cp-font-mono); }
html.cp-v2 .xp2-ev-m { display: grid; gap: 2px; min-width: 0; }
html.cp-v2 .xp2-ev-m b { color: var(--ob-ink); }
html.cp-v2 .xp2-ev-m span { color: var(--ob-mute); font-size: var(--ob-fs-xs); }
html.cp-v2 .xp2-ev-l { margin-left: auto; color: var(--ob-amber); font: 800 var(--ob-fs-xs) / 1.2 var(--cp-font-mono); white-space: nowrap; }
html.cp-v2 .xp2-mult { display: inline-flex; align-items: center; height: 20px; margin-left: var(--ob-s-2); padding: 0 7px; border: 1px solid rgb(var(--ob-amber-rgb) / 0.5); border-radius: var(--ob-r-pill); background: rgb(var(--ob-amber-rgb) / 0.18); color: var(--ob-amber); font: 800 var(--ob-fs-2xs) / 1 var(--cp-font-mono); font-style: normal; vertical-align: middle; }
html.cp-v2[data-theme="light"] :is(.xp2-ev-x, .xp2-ev-l, .xp2-mult) { color: var(--ob-amber-ink); }
@media (max-width: 600px) { html.cp-v2 .xp2-ev { flex-wrap: wrap; } html.cp-v2 .xp2-ev-l { margin-left: 0; width: 100%; } }
/* === /XP: DOPPEL-XP-EVENT === */
/* === XP: TEILEN === */
html.cp-v2 .xp2-sh-img { display: block; width: 100%; height: auto; margin: var(--ob-s-3) 0 var(--ob-s-1); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); }
html.cp-v2 .xp2-dlg:has(.xp2-sh-img) { width: min(var(--ob-pop-w-m), 100%); max-width: calc(100vw - 2 * var(--ob-gutter)); }
html.cp-v2 .xp2-hero-sh { position: absolute; top: var(--ob-s-4); right: var(--ob-s-4); z-index: 1; }
/* === /XP: TEILEN === */
/* === XP: ERSTE SCHRITTE === (Checkliste im Bereich Fortschritt; Zeile = Feld-Fläche wie Eingaben, erledigt = grüner Haken, offen = Link zur Stelle) */
html.cp-v2 .xp2-sts { display: grid; gap: var(--ob-s-2); margin: 0; padding: 0; list-style: none; }
html.cp-v2 .xp2-st-a { display: flex; align-items: center; gap: var(--ob-s-3); box-sizing: border-box; width: 100%; min-height: var(--ob-tap); padding: var(--ob-s-2) var(--ob-s-3); border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-ink); font: inherit; font-size: var(--ob-fs-md); text-align: left; text-decoration: none; cursor: pointer; }
html.cp-v2 a.xp2-st-a:hover, html.cp-v2 button.xp2-st-a:hover { border-color: var(--ob-line-2); background: var(--ob-hover); }
html.cp-v2 .xp2-st-ck { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--ob-line-2); border-radius: var(--ob-r-pill); color: rgb(var(--ob-white-rgb)); }
html.cp-v2 .xp2-st-ck .ob-icon { width: 14px; height: 14px; }
html.cp-v2 .xp2-st.is-done .xp2-st-a { cursor: default; }
html.cp-v2 .xp2-st.is-done .xp2-st-ck { border-color: var(--ob-green); background: var(--ob-green); }
html.cp-v2 .xp2-st.is-done .xp2-st-l { color: var(--ob-mute); text-decoration: line-through; }
html.cp-v2 .xp2-st-l { flex: 1; min-width: 0; }
html.cp-v2 .xp2-st-go { display: flex; color: var(--ob-mute); }
html.cp-v2 .xp2-st-go .ob-icon { width: 16px; height: 16px; }
html.cp-v2 .xp2-st-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ob-s-2) var(--ob-s-3); }
html.cp-v2 .xp2-st-f .xp2-hint { flex: 1 1 220px; margin: 0; }
/* === /XP: ERSTE SCHRITTE === */
/* === XP: HALL OF FAME === (unter der Bestenliste; Treppchen 2-1-3, Platz 1 höher mit Amber-Rand; Pillen Gold Amber, Silber Aqua, Bronze Koralle wie die Abzeichen-Stufen) */
html.cp-v2 .xp2-hof { margin-top: var(--ob-s-4); }
html.cp-v2 .xp2-pod { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: var(--ob-s-2); margin: 0; padding: 0; list-style: none; }
html.cp-v2 .xp2-pod-i { display: grid; justify-items: center; gap: var(--ob-s-1); min-width: 0; padding: var(--ob-s-3) var(--ob-s-2); border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); text-align: center; }
html.cp-v2 .xp2-pod-i--1 { padding-top: var(--ob-s-5); border-color: rgb(var(--ob-amber-rgb) / 0.5); background: rgb(var(--ob-amber-rgb) / 0.08); }
html.cp-v2 .xp2-pod-n { max-width: 100%; overflow: hidden; color: var(--ob-ink); font-weight: 750; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
html.cp-v2 .xp2-pod-x { display: grid; place-items: center; min-width: 24px; height: 24px; box-sizing: border-box; padding: 0 var(--ob-s-2); border-radius: var(--ob-r-pill); font: 800 var(--ob-fs-2xs) var(--cp-font-mono); }
html.cp-v2 .xp2-pod-v { color: var(--ob-mute); font-size: var(--ob-fs-xs); white-space: nowrap; }
html.cp-v2 .xp2-pod-x--1 { background: rgb(var(--ob-amber-rgb) / 0.18); color: var(--ob-amber); }
html.cp-v2 .xp2-pod-x--2 { background: rgb(var(--ob-aqua-rgb) / 0.16); color: var(--ob-aqua); }
html.cp-v2 .xp2-pod-x--3 { background: rgb(var(--ob-coral-rgb) / 0.16); color: var(--ob-coral); }
html[data-theme="light"].cp-v2 .xp2-pod-x--1 { color: var(--ob-amber-ink); }
html[data-theme="light"].cp-v2 .xp2-pod-x--2 { color: var(--ob-aqua-ink); }
html[data-theme="light"].cp-v2 .xp2-pod-x--3 { color: var(--ob-coral-ink); }
html.cp-v2 .xp2-hof-h { margin: var(--ob-s-2) 0 0; color: var(--ob-mute); font-size: var(--ob-fs-sm); font-weight: 700; }
html.cp-v2 .xp2-hof-r { display: grid; grid-template-columns: 72px repeat(3, minmax(0, 1fr)); gap: var(--ob-s-2); padding: var(--ob-s-2) 0; border-bottom: 1px solid var(--ob-line); font-size: var(--ob-fs-sm); }
html.cp-v2 .xp2-hof-r > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* === /XP: HALL OF FAME === */
/* === XP: FOLGEN === (Knopf „Folgen“/„Folge ich“ neben „Teilen“ im Profil-Hero; an = Violett-Umschaltzustand wie aktive Segmente) */
html.cp-v2 .xp2-hero-acts { position: absolute; top: var(--ob-s-4); right: var(--ob-s-4); z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ob-s-2); max-width: calc(100% - 2 * var(--ob-s-4)); }
html.cp-v2 .xp2-hero-acts .xp2-hero-sh { position: static; }
html.cp-v2 .xp2-fo.is-on { border-color: rgb(var(--ob-violet-rgb) / 0.6); background: rgb(var(--ob-violet-rgb) / 0.14); color: var(--ob-violet-text); }
html.cp-v2 .xp2-fo-err { flex-basis: 100%; margin: 0; text-align: right; }
/* === /XP: FOLGEN === */
/* === XP: FREUNDE EINLADEN === (Link-Feld wie Eingaben: --ob-field, Mono, nur lesen; daneben Haupt-Button Kopieren + Teilen; Liste mit Tag-Pillen) */
html.cp-v2 .xp2-inv { display: flex; flex-wrap: wrap; gap: var(--ob-s-2); }
html.cp-v2 .xp2-inv-f { flex: 1 1 200px; min-width: 0; box-sizing: border-box; height: var(--ob-tap); padding: 0 var(--ob-s-3); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-ink); font: 600 var(--ob-fs-input) var(--cp-font-mono); text-overflow: ellipsis; }
html.cp-v2 .xp2-inv-l { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
html.cp-v2 .xp2-inv-l > li { display: flex; align-items: center; gap: var(--ob-s-3); min-height: var(--ob-tap); border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .xp2-inv-l > li:last-child { border-bottom: 0; }
html.cp-v2 .xp2-inv-n { flex: 1; min-width: 0; overflow: hidden; color: var(--ob-ink); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
/* === /XP: FREUNDE EINLADEN === */
/* === XP: FREUNDE FINDEN === (Inhaber 27.10.2026. Symbol-Folgen-Knopf in Listenzeilen = .v2-ib 44 px, an = Violett-Fläche wie .xp2-fo.is-on; Nick-Suche = Eingabe --ob-field; Personenliste wie Einladungsliste; Grund-Etikett = .xp2-tag--dim) */
html.cp-v2 .xp2-bl-r.xp2-bl-r--fo { grid-template-columns: 32px 36px minmax(0, 1fr) auto auto var(--ob-tap); }
html.cp-v2 .xp2-qf { color: var(--ob-violet-text); }
html.cp-v2 .xp2-qf.is-on { border-color: rgb(var(--ob-violet-rgb) / 0.6); background: rgb(var(--ob-violet-rgb) / 0.14); }
html.cp-v2 .xp2-qf[aria-busy="true"], html.cp-v2 .xp2-fo[aria-busy="true"] { opacity: 0.6; cursor: progress; }
html.cp-v2 .xp2-qf-x { width: var(--ob-tap); }
html.cp-v2 .xp2-fs { display: grid; gap: var(--ob-s-2); min-width: 0; }
html.cp-v2 .xp2-fs-in { box-sizing: border-box; width: 100%; height: var(--ob-tap); padding: 0 var(--ob-s-3); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-ink); font: inherit; font-size: var(--ob-fs-input); }
html.cp-v2 .xp2-fs-in::placeholder { color: var(--ob-mute); }
html.cp-v2 .xp2-fs-in:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 1px; }
html.cp-v2 .xp2-fs [data-xp2-fres]:empty, html.cp-v2 .xp2-fs [data-xp2-qferr][hidden] { display: none; }
html.cp-v2 .xp2-pl { display: grid; margin: 0; padding: 0; list-style: none; }
html.cp-v2 .xp2-pl > li { display: flex; align-items: center; gap: var(--ob-s-3); min-height: var(--ob-tap); padding: var(--ob-s-2) 0; border-bottom: 1px solid var(--ob-line); }
html.cp-v2 .xp2-pl > li:last-child { border-bottom: 0; }
html.cp-v2 .xp2-pl-t { display: grid; flex: 1; min-width: 0; gap: 2px; }
html.cp-v2 .xp2-pl-t small { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ob-s-1) var(--ob-s-2); color: var(--ob-mute); font-size: var(--ob-fs-xs); }
html.cp-v2 .xp2-pl .xp2-fo { flex: none; }
html.cp-v2 .xp2-pl-t .xp2-bl-nick { color: var(--ob-ink); }
html.cp-v2 .xp2-sug { display: grid; gap: var(--ob-s-2); }
html.cp-v2 .xp2-inv-fo { margin-top: var(--ob-s-2); padding-top: var(--ob-s-3); border-top: 1px solid var(--ob-line); }
@media (max-width: 600px) {
  html.cp-v2 .xp2-bl-r.xp2-bl-r--fo { grid-template-columns: 28px 36px minmax(0, 1fr) auto var(--ob-tap); }
  html.cp-v2 .xp2-bl-r--fo > .xp2-qf, html.cp-v2 .xp2-bl-r--fo > .xp2-qf-x { grid-column: 5; grid-row: 1 / span 2; }
}
/* Battle of Cards: Gegner folgen (Versus-Ergebnis unter dem Gegner, „Meine Duelle“ Symbol-Knopf am Zeilenende) */
html.cp-v2 .bt2-drow.bt2-drow--fo { grid-template-columns: 22px minmax(0, 1fr) auto var(--ob-tap); }
html.cp-v2 .bt2-vsd .bt2-fo { margin-top: var(--ob-s-2); }
html.cp-v2 .bt2-fo[hidden] { display: none; }
html.cp-v2 .bt2-drow.bt2-drow--fo:has(> .bt2-fo[hidden]) { grid-template-columns: 22px minmax(0, 1fr) auto; }
/* === /XP: FREUNDE FINDEN === */

/* === KARTENLISTEN: PREIS JE KARTE + TOP 10 (freigegeben 27.10.2026; Markup: data.js cpCardTopV2/cpCardPriceHtml, Worker worker/ssr-cards.js; Styleguide "Kartenlisten") === */
/* Preiszeile: feste Hoehe auch bei "–" (kein Layoutsprung, wenn der Preis nachgeladen wird) */
html.cp-v2 .setguide-card-tile .cl2-price { display: block; min-height: calc(var(--ob-fs-sm) * 1.5); font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ob-fs-sm); font-weight: 650; line-height: 1.5; color: var(--ob-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.cp-v2 .setguide-card-tile .cl2-price.cl2-none, html.cp-v2 .cl2-price.cl2-none { color: var(--ob-dim); font-weight: 500; }
html.cp-v2 li > .cl2-price { display: block; font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ob-fs-sm); font-weight: 650; color: var(--ob-ink); }
/* Top 10 */
html.cp-v2 .cl2-top { margin: 0 0 var(--ob-s-4); padding: var(--ob-s-4); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); box-shadow: var(--ob-shadow-1); }
html.cp-v2 .cl2-top-h { margin: 0 0 var(--ob-s-3); font-size: var(--ob-fs-lg); font-weight: 800; letter-spacing: -0.02em; line-height: var(--ob-lh-tight); color: var(--ob-ink); }
html.cp-v2 .cl2-top-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
html.cp-v2 .cl2-top-t { width: 100%; border-collapse: collapse; font-size: var(--ob-fs-md); color: var(--ob-ink); }
html.cp-v2 .cl2-top-t th { padding: 0 var(--ob-s-2) var(--ob-s-1) 0; border-bottom: 1px solid var(--ob-line-2); font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); font-weight: 700; letter-spacing: var(--ob-track-caps); text-transform: uppercase; text-align: left; color: var(--ob-dim); white-space: nowrap; }
html.cp-v2 .cl2-top-t td { padding: var(--ob-s-1) var(--ob-s-2) var(--ob-s-1) 0; border-top: 1px solid var(--ob-line); vertical-align: baseline; }
html.cp-v2 .cl2-top-t tbody tr:first-child td { border-top: 0; }
html.cp-v2 .cl2-top-t :is(th, td):last-child { padding-right: 0; }
html.cp-v2 .cl2-top-t .cl2-r, html.cp-v2 .cl2-top-t .cl2-p { text-align: right; }
html.cp-v2 .cl2-rank, html.cp-v2 .cl2-num { font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ob-fs-sm); color: var(--ob-dim); white-space: nowrap; }
html.cp-v2 .cl2-rank { width: 2.5ch; }
html.cp-v2 .cl2-p { font-family: var(--cp-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ob-fs-md); font-weight: 650; color: var(--ob-ink); white-space: nowrap; }
html.cp-v2 .cl2-top-t a { color: var(--ob-ink); font-weight: 650; text-decoration: none; }
html.cp-v2 .cl2-top-t a:hover { color: var(--ob-aqua); text-decoration: underline; }
html.cp-v2[data-theme="light"] .cl2-top-t a:hover { color: var(--ob-aqua-ink); }
html.cp-v2 .cl2-foil { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; margin-left: var(--ob-s-1); border: 1px solid rgb(var(--ob-aqua-rgb) / 0.4); border-radius: var(--ob-r-pill); background: rgb(var(--ob-aqua-rgb) / 0.12); color: var(--ob-aqua); font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; white-space: nowrap; vertical-align: middle; }
html.cp-v2[data-theme="light"] .cl2-foil { color: var(--ob-aqua-ink); }
html.cp-v2 .cl2-top .cl2-stamp { margin: var(--ob-s-3) 0 0; }
html.cp-v2 .cl2-pending { margin: 0 0 var(--ob-s-4); padding: var(--ob-s-3) var(--ob-s-4); border: 1px dashed var(--ob-line-2); border-radius: var(--ob-r-md); background: var(--ob-field); color: var(--ob-mute); font-size: var(--ob-fs-sm); line-height: var(--ob-lh-body); }
@media (max-width: 600px) {
  html.cp-v2 .cl2-top { padding: var(--ob-s-3); }
  html.cp-v2 .cl2-top-h { font-size: var(--ob-fs-base); }
  html.cp-v2 .cl2-top-t :is(th, td):nth-child(3) { display: none; } /* Nummer: steht an der Kachel */
}
/* === /KARTENLISTEN === */

/* ---- Performance CLS Runde 4 (27.10.2026, Cloudflare-RUM: Fusszeile, Konto, Sammlung) ---- */
/* Konto: die Seite entsteht erst per JS; bis dahin stand die Fusszeile im Bild und wurde beim Aufbau weggeschoben -> Seite mindestens bildschirmhoch */
html.cp-v2 #kontoApp { min-height: 100vh; }
/* Konto: der XP-Profilkopf (profil.js/xp.js) ersetzt den einfachen Kopf erst nach dem Laden (Handy 48 -> ca. 327 px, Desktop 64 -> ca. 198 px);
   konto.js setzt .ko2-head--wait, solange er erwartet wird. Rueckfall nach 5 s, falls xp.js nicht laedt. */
html.cp-v2 .ko2-head--wait { min-height: 190px; align-items: flex-start; animation: cpKoHeadFree 0s 5s forwards; }
@media (max-width: 899px) { html.cp-v2 .ko2-head--wait { min-height: 320px; } }
@keyframes cpKoHeadFree { to { min-height: 0; } }
/* Sammlung (Handy): Wertverlauf wird nach /collection/value-history gezeichnet (leer 26 px -> 249 px); Desktop richtet sich nach der Kennzahl-Spalte */
@media (max-width: 899px) { html.cp-v2 .cx2-ovsum .v2-pp-chart:empty { min-height: 240px; box-sizing: border-box; } }
/* Sammlung: Umschalter Echt | Simulation (#psTopSwitch, simswitch.js) kommt nach dem Laden ueber die Seite -> Platz vorher halten: 14 px Abstand der Kopfleiste
   + 36 px Umschalter + 8 px = 58 px (der Abstand fällt mit dem margin-bottom der Kopfleiste zusammen). script.js setzt cp-nosimsw, wenn kein Umschalter kommt (geteilte Ansicht).
   Dazu mindestens bildschirmhoch: angemeldet waechst die Sammlung erst nach /collection, bis dahin stand der SEO-Text im Bild und wurde weggeschoben. */
html.cp-v2:not(.cp-nosimsw) :is(#collectionApp[data-cx-page="sets"], #rbApp[data-rb-page="sets"], #opApp[data-op-page="sets"]):not(#psTopSwitch + *) { margin-top: 58px; }
html.cp-v2 :is(#collectionApp[data-cx-page="sets"], #rbApp[data-rb-page="sets"], #opApp[data-op-page="sets"]) { min-height: 100vh; }

/* === OFFER COMPARE === (Produktvergleich, Inhaber 27.10.2026. In Such- und Produktlisten ersetzt bei Gruppen mit >= 2 Shops ein Vergleichs-Icon (.v2-cmp, Icon-Button 44 px wie .v2-ib, Akzent Violett) den Verlauf-Button; unter der Shop-Zeile steht der Hinweis "in N Shops ab X · Vergleichen ›" (.v2-or-cmp, Mono xs --ob-mute, Aktion --ob-violet-text). Link, kein Sheet-Klick.) */
html.cp-v2 .v2-ib.v2-cmp { border-color: rgb(var(--ob-violet-rgb) / 0.45); background: rgb(var(--ob-violet-rgb) / 0.12); color: var(--ob-violet-text); }
html.cp-v2[data-theme="light"] .v2-ib.v2-cmp { color: var(--ob-violet-text) !important; } /* !important: helles Theme färbt .v2-ib grau */
html.cp-v2 .v2-or-cmp { display: inline-block; max-width: 100%; font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-variant-numeric: tabular-nums; line-height: var(--ob-lh-body); color: var(--ob-mute); text-decoration: none; overflow-wrap: anywhere; }
html.cp-v2 .v2-or-cmp b { color: var(--ob-violet-text); font-weight: 650; white-space: nowrap; }
html.cp-v2[data-theme="light"] .v2-or-cmp b { color: var(--ob-violet-text) !important; }
@media (hover: hover) {
  html.cp-v2 .v2-ib.v2-cmp:hover { background: rgb(var(--ob-violet-rgb) / 0.2); color: var(--ob-ink); }
  html.cp-v2 .v2-or-cmp:hover b { text-decoration: underline; }
}
html.cp-v2 .v2-or-cmp:focus-visible, html.cp-v2 .v2-ib.v2-cmp:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }

/* === GRUPPEN-HERZ / -ALARM / -WUNSCHLISTE === (Inhaber 27.10.2026, Entwurf "Gruppen-Herz und Gruppen-Alarm". Gruppenzeile: Herz .v2-gw = .v2-wish, Glocke .v2-gb = .v2-ib; Alarm-Dialog #cpGrpAlertModal wie #rbAlertModal (Pop-Fläche, Sheet am Handy), Felder --ob-field; Wunschliste: aufklappbarer Eintrag .wl2-g in der Optik der Alarm-Zeile .al2-row.) */
html.cp-v2 .v2-ib.v2-gb:focus-visible, html.cp-v2 .v2-ib.v2-gw:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2 #cpGrpAlertModal { background: var(--ob-backdrop); z-index: calc(var(--ob-z-sheet) + 200); }
html.cp-v2 #cpGrpAlertModal .gal-dlg { position: relative; width: min(100%, var(--ob-pop-w-s)); max-height: var(--ob-sheet-max); overflow: auto; overscroll-behavior: contain; padding: var(--ob-s-5); background: var(--ob-pop); color: var(--ob-ink); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); box-shadow: var(--ob-shadow-2); }
html.cp-v2 #cpGrpAlertModal .gal-x { position: absolute; top: 10px; right: 10px; 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-mute); cursor: pointer; }
html.cp-v2 #cpGrpAlertModal .gal-x:hover { background: var(--ob-hover); color: var(--ob-ink); }
html.cp-v2 #cpGrpAlertModal .gal-h { display: block; padding-right: 48px; font-size: var(--ob-fs-base); font-weight: 700; color: var(--ob-ink); }
html.cp-v2 #cpGrpAlertModal .gal-sub { margin: 4px 0 var(--ob-s-4); font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 #cpGrpAlertModal .gal-load { font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 #cpGrpAlertModal .gal-form { display: grid; gap: var(--ob-s-4); }
html.cp-v2 #cpGrpAlertModal .gal-f { display: grid; gap: 6px; min-width: 0; }
html.cp-v2 #cpGrpAlertModal .gal-f[hidden], html.cp-v2 #cpGrpAlertModal .gal-shops[hidden] { display: none; }
html.cp-v2 #cpGrpAlertModal .gal-l { margin: 0; font-family: var(--cp-font-mono); font-size: var(--ob-fs-2xs); letter-spacing: var(--ob-track-caps); text-transform: uppercase; color: var(--ob-dim); font-weight: 650; }
html.cp-v2 #cpGrpAlertModal .gal-prod { display: grid; gap: 2px; padding: var(--ob-s-3); border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); }
html.cp-v2 #cpGrpAlertModal .gal-prod b { font-size: var(--ob-fs-sm); font-weight: 650; color: var(--ob-ink); overflow-wrap: anywhere; }
html.cp-v2 #cpGrpAlertModal .gal-prod small { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 #cpGrpAlertModal .gal-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
html.cp-v2 #cpGrpAlertModal .gal-shops { display: grid; gap: 4px; max-height: 220px; overflow: auto; padding: var(--ob-s-2); border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); }
html.cp-v2 #cpGrpAlertModal .gal-s { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ob-s-2); min-height: var(--ob-tap-min); padding: 0 var(--ob-s-2); border-radius: var(--ob-r-xs); font-size: var(--ob-fs-sm); color: var(--ob-ink); cursor: pointer; }
html.cp-v2 #cpGrpAlertModal .gal-s:hover { background: var(--ob-hover); }
html.cp-v2 #cpGrpAlertModal .gal-s span { overflow-wrap: anywhere; }
html.cp-v2 #cpGrpAlertModal .gal-s small { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); color: var(--ob-mute); white-space: nowrap; }
html.cp-v2 #cpGrpAlertModal .gal-s input, html.cp-v2 #cpGrpAlertModal .gal-sw input { accent-color: var(--ob-violet-text); width: 18px; height: 18px; margin: 0; }
html.cp-v2 #cpGrpAlertModal .gal-in { width: 100%; min-height: var(--ob-tap); padding: 0 var(--ob-s-3); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: var(--ob-field); color: var(--ob-ink); font-family: var(--cp-font-mono); font-size: var(--ob-fs-input); box-sizing: border-box; }
html.cp-v2 #cpGrpAlertModal .gal-in:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 1px; }
html.cp-v2 #cpGrpAlertModal .gal-sw { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--ob-s-3); align-items: start; padding: var(--ob-s-3); border: 1px solid var(--ob-line); border-radius: var(--ob-r-sm); background: var(--ob-field); cursor: pointer; }
html.cp-v2 #cpGrpAlertModal .gal-sw span { display: grid; gap: 2px; }
html.cp-v2 #cpGrpAlertModal .gal-sw b { font-size: var(--ob-fs-sm); font-weight: 650; color: var(--ob-ink); }
html.cp-v2 #cpGrpAlertModal .gal-sw small { font-size: var(--ob-fs-xs); color: var(--ob-mute); }
html.cp-v2 #cpGrpAlertModal .gal-err { font-size: var(--ob-fs-sm); color: var(--ob-coral); }
html.cp-v2 #cpGrpAlertModal .gal-err[hidden] { display: none; }
html.cp-v2 #cpGrpAlertModal .gal-done { margin: 0 0 var(--ob-s-4); font-size: var(--ob-fs-sm); color: var(--ob-green); }
html.cp-v2 #cpGrpAlertModal .gal-row { display: flex; gap: var(--ob-s-2); }
html.cp-v2 #cpGrpAlertModal .gal-btn { flex: 1; min-height: var(--ob-tap); padding: 0 var(--ob-s-4); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-sm); background: transparent; color: var(--ob-ink); font-size: var(--ob-fs-sm); font-weight: 700; cursor: pointer; }
html.cp-v2 #cpGrpAlertModal .gal-btn.accent { border-color: transparent; background: var(--ob-accent-btn); color: rgb(var(--ob-white-rgb)); }
html.cp-v2 #cpGrpAlertModal .gal-btn:disabled { opacity: 0.5; cursor: default; }
html.cp-v2 #cpGrpAlertModal :is(.gal-btn, .gal-x, .gal-s, .gal-sw):focus-visible, html.cp-v2 #cpGrpAlertModal .gal-s:has(input:focus-visible), html.cp-v2 #cpGrpAlertModal .gal-sw:has(input:focus-visible) { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2[data-theme="light"] #cpGrpAlertModal .gal-dlg { background: var(--ob-pop) !important; }
html.cp-v2[data-theme="light"] #cpGrpAlertModal .gal-x { background: transparent !important; color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] #cpGrpAlertModal .gal-btn:not(.accent) { background: transparent !important; color: var(--ob-ink) !important; border-color: var(--ob-line-2) !important; }
html.cp-v2[data-theme="light"] #cpGrpAlertModal .gal-btn.accent { background: var(--ob-accent-btn) !important; color: rgb(var(--ob-white-rgb)) !important; }
html.cp-v2[data-theme="light"] #cpGrpAlertModal .v2-chip { background: var(--ob-surface) !important; border-color: var(--ob-line-2) !important; color: var(--ob-mute) !important; }
html.cp-v2[data-theme="light"] #cpGrpAlertModal .v2-chip.on { background: rgb(var(--ob-violet-rgb) / 0.12) !important; border-color: var(--ob-violet-ink) !important; color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] #cpGrpAlertModal .gal-err { color: var(--ob-coral-ink) !important; }
html.cp-v2[data-theme="light"] #cpGrpAlertModal .gal-done { color: var(--ob-green-ink) !important; }
@media (max-width: 600px) {
  html.cp-v2 #cpGrpAlertModal { align-items: flex-end; padding: 0; }
  html.cp-v2 #cpGrpAlertModal .gal-dlg { width: 100%; max-width: none; border-radius: var(--ob-sheet-r) var(--ob-sheet-r) 0 0; border-bottom: 0; padding-bottom: calc(var(--ob-s-5) + env(safe-area-inset-bottom, 0px)); }
  html.cp-v2 #cpGrpAlertModal .gal-dlg::before { content: ""; display: block; width: 40px; height: 5px; margin: -8px auto var(--ob-s-3); border-radius: var(--ob-r-pill); background: var(--ob-line-2); }
}
/* Wunschliste: Gruppen-Eintrag (Kopf = .al2-row mit Titel-Knopf, Chevron, Entfernen; darunter die Shops) */
html.cp-v2 .wl2-g { display: grid; gap: 0; min-width: 0; }
html.cp-v2 .wl2-gt { padding: 0; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
html.cp-v2 .wl2-gt:focus-visible, html.cp-v2 .wl2-m:focus-visible, html.cp-v2 .wl2-cmp:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2 .wl2-new { color: var(--ob-green); font-weight: 700; }
html.cp-v2[data-theme="light"] .wl2-new { color: var(--ob-green-ink) !important; }
html.cp-v2 .wl2-g.open > .wl2-row { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
html.cp-v2 .wl2-sub { display: grid; gap: 2px; padding: var(--ob-s-2) var(--ob-s-3) var(--ob-s-3); border: 1px solid var(--ob-line); border-top: 0; border-radius: 0 0 var(--ob-r-sm) var(--ob-r-sm); background: var(--ob-surface); }
html.cp-v2 .wl2-sub[hidden] { display: none; }
html.cp-v2 .wl2-m { display: flex; justify-content: space-between; gap: var(--ob-s-3); align-items: center; min-height: var(--ob-tap-min); padding: 0 var(--ob-s-2); border-radius: var(--ob-r-xs); font-size: var(--ob-fs-sm); color: var(--ob-ink); text-decoration: none; }
html.cp-v2 .wl2-m:hover { background: var(--ob-hover); }
html.cp-v2 .wl2-m.out { color: var(--ob-mute); }
html.cp-v2 .wl2-m b { font-family: var(--cp-font-mono); font-size: var(--ob-fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.cp-v2 .wl2-nt { margin-left: 6px; padding: 0 6px; border: 1px solid var(--ob-green); border-radius: var(--ob-r-pill); font-style: normal; font-size: var(--ob-fs-2xs); color: var(--ob-green); }
html.cp-v2[data-theme="light"] .wl2-nt { color: var(--ob-green-ink) !important; border-color: var(--ob-green-ink) !important; }
html.cp-v2 .wl2-cmp { justify-self: start; display: inline-flex; align-items: center; min-height: var(--ob-tap-min); padding: 0 var(--ob-s-2); font-size: var(--ob-fs-sm); font-weight: 650; color: var(--ob-violet-text); text-decoration: none; }
html.cp-v2 .gal-toast { position: fixed; left: 50%; bottom: calc(var(--ob-s-5) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: var(--ob-z-toast); max-width: calc(100vw - 2 * var(--ob-gutter)); padding: var(--ob-s-3) var(--ob-s-4); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); background: var(--ob-pop); color: var(--ob-ink); font-size: var(--ob-fs-sm); font-weight: 650; box-shadow: var(--ob-shadow-2); }
/* ---- Shop-Wartefenster (5 s, Spendenlink; Code: script.js cpShopWait, Overlay #redirect-overlay) ---- */
html.cp-v2 .redirect-content { background: var(--ob-pop); border: 1px solid var(--ob-line-2); border-radius: var(--ob-r-md); box-shadow: var(--ob-shadow-2); }
html.cp-v2[data-theme="light"] .redirect-content { background: var(--ob-pop) !important; border-color: var(--ob-line-2) !important; box-shadow: var(--ob-shadow-2) !important; }
html.cp-v2[data-theme="light"] .redirect-content h3 { color: var(--ob-ink) !important; }
html.cp-v2[data-theme="light"] .redirect-content p { color: var(--ob-mute) !important; }
html.cp-v2 .redirect-overlay.is-waiting .redirect-spinner { display: none; }
html.cp-v2 .redirect-wait { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
html.cp-v2 .redirect-bar { height: 6px; border-radius: var(--ob-r-pill); background: var(--ob-field); overflow: hidden; }
html.cp-v2 .redirect-bar i { display: block; height: 100%; width: 0; background: var(--ob-accent); }
html.cp-v2 .redirect-content .redirect-count { margin: 0; min-height: 1.4em; font-size: var(--ob-fs-md); color: var(--ob-ink); font-variant-numeric: tabular-nums; }
html.cp-v2 .redirect-content .redirect-note { margin: 0; font-size: var(--ob-fs-sm); color: var(--ob-mute); }
html.cp-v2 .redirect-coffee { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ob-tap); color: var(--ob-mute); font-size: var(--ob-fs-md); font-weight: 650; text-decoration: none; }
html.cp-v2 .redirect-coffee .ob-icon { width: 18px; height: 18px; }
html.cp-v2 .redirect-actions { display: flex; gap: 8px; }
html.cp-v2 .redirect-actions button { flex: 1; min-height: var(--ob-tap); border-radius: var(--ob-r-sm); font-size: var(--ob-fs-md); font-weight: 800; cursor: pointer; touch-action: manipulation; }
html.cp-v2 .redirect-cancel { background: var(--ob-field); border: 1px solid var(--ob-line-2); color: var(--ob-ink); }
html.cp-v2 .redirect-go { background: var(--ob-accent-btn); border: 0; color: #fff; }
html.cp-v2 .redirect-go:disabled { opacity: 0.45; cursor: not-allowed; }
html.cp-v2 .redirect-actions button:focus-visible, html.cp-v2 .redirect-coffee:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
@media (hover: hover) {
  html.cp-v2 .redirect-coffee:hover { color: var(--ob-ink); }
  html.cp-v2 .redirect-cancel:hover { background: var(--ob-hover); }
}
@media (prefers-reduced-motion: reduce) { html.cp-v2 .redirect-bar i { transition: none !important; width: 100% !important; opacity: 0.4; } }

/* ---- Werbung: gekennzeichnete Anzeige (Code: ads.js; Plaetze A = Ergebnisliste, B = Produktseite) ---- */
html.cp-v2 .cp-ad { display: flex; flex-direction: column; gap: 6px; min-height: 100px; padding: 10px; background: rgb(var(--ob-violet-rgb) / 0.08); border: 1px dashed rgb(var(--ob-violet-rgb) / 0.55); border-radius: var(--ob-r-md); overflow: hidden; }
html.cp-v2 .cp-ad-lbl { font-size: var(--ob-fs-2xs); font-weight: 800; letter-spacing: var(--ob-track-caps); text-transform: uppercase; color: var(--ob-mute); }
html.cp-v2 .cp-ad[data-k="product"] { margin-top: 12px; }
html.cp-v2 .cp-ad:has(ins[data-ad-status="unfilled"]) { display: none; }
html.cp-v2 .seo-links.seo-sealed h3 { color: var(--ob-ink); }

/* ---- Set-Guide: Produktart-Abschnitte mit Kachelraster (Worker: worker/ssr-guide.js bannerHtml, Schalter GUIDE_BANNERS; Plan guide-banner-plan.md) ----
   Je Produktart ein Abschnitt (h3, Anker #sealed-<art>) mit Kacheln aller Produkte: Bild oben, Name im Link, Zahlen ausserhalb des Links, ganze Kachel klickbar (a::after).
   Handy 2 Spalten, ab 601 px auto-fill (min 180 px). Kein Aufklappen: alle Produkte immer sichtbar.
   :is(.gb, .gd2 .gd2-main .gb) hebt die Spezifitaet ueber ".gd2 .gd2-main .setguide-section h3/p" (greifen erst nach dem Umbau durch cpGuideV2). */
html.cp-v2 .gb h2[id], html.cp-v2 .gb .gb-k[id] { scroll-margin-top: 90px; }
html.cp-v2 :is(.gb, .gd2 .gd2-main .gb) .gb-lead { margin: 0; max-width: 72ch; color: var(--ob-mute); font-size: var(--ob-fs-md); line-height: var(--ob-lh-body); }
html.cp-v2 .gb-groups { display: grid; gap: var(--ob-s-7); margin-top: var(--ob-s-2); }
html.cp-v2 .gb-k { display: grid; gap: var(--ob-s-2); min-width: 0; }
html.cp-v2 :is(.gb, .gd2 .gd2-main .gb) .gb-h { margin: 0; padding-bottom: var(--ob-s-1); border-bottom: 1px solid var(--ob-line); font-size: var(--ob-fs-base); font-weight: 800; line-height: var(--ob-lh-tight); color: var(--ob-ink); }
html.cp-v2 :is(.gb, .gd2 .gd2-main .gb) .gb-s { margin: 0; max-width: none; font-size: var(--ob-fs-sm); line-height: var(--ob-lh-body); color: var(--ob-dim); }
html.cp-v2 .gb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--ob-s-3); align-items: stretch; }
@media (max-width: 600px) {
  html.cp-v2 .gb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ob-s-2); }
}
html.cp-v2 .gb-t { position: relative; display: flex; flex-direction: column; gap: var(--ob-s-1); min-width: 0; padding: var(--ob-s-2); border: 1px solid var(--ob-line); border-radius: var(--ob-r-md); background: var(--ob-surface); color: var(--ob-ink); transition: background var(--ob-dur-1) var(--ob-ease-out), border-color var(--ob-dur-1) var(--ob-ease-out); }
html.cp-v2 .gb-a { display: flex; flex-direction: column; gap: var(--ob-s-2); min-width: 0; color: inherit; text-decoration: none; }
html.cp-v2 :is(.gb, .gd2 .gd2-main .gb) .gb-n { margin: 0; padding: 0 var(--ob-s-1); font-size: var(--ob-fs-md); font-weight: 800; line-height: var(--ob-lh-tight); color: var(--ob-ink); overflow-wrap: anywhere; }
html.cp-v2 :is(.gb, .gd2 .gd2-main .gb) .gb-m { margin: 0; max-width: none; padding: 0 var(--ob-s-1); font-size: var(--ob-fs-sm); line-height: var(--ob-lh-body); color: var(--ob-mute); }
html.cp-v2 .gb-m b { font-family: var(--cp-font-mono); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ob-ink); }
html.cp-v2 .gb-t > a.gb-a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
html.cp-v2 .gb-t > a.gb-a:focus-visible { outline: none; }
html.cp-v2 .gb-t > a.gb-a:focus-visible::after { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
html.cp-v2 .gb-a img { display: block; width: 100%; height: auto; aspect-ratio: var(--ob-ratio-product); box-sizing: border-box; object-fit: contain; border: 1px solid var(--ob-line); border-radius: var(--ob-r-xs); background: var(--ob-field); }
html.cp-v2 .gb-ph { display: grid; place-items: center; width: 100%; aspect-ratio: var(--ob-ratio-product); box-sizing: border-box; border-radius: var(--ob-r-xs); background: var(--ob-field); color: var(--ob-dim); }
html.cp-v2 .gb-ph .ob-icon { width: var(--ob-icon); height: var(--ob-icon); }
html.cp-v2 .gb-a img + .gb-ph { display: none; } /* Bild geladen: Platzhalter verborgen; Ladefehler (onerror setzt .is-bad, z. B. TCGplayer 403 vor Release) tauscht beide */
html.cp-v2 .gb-a img.is-bad { display: none; }
html.cp-v2 .gb-a img.is-bad + .gb-ph { display: grid; }
html.cp-v2 .gb-t.is-off { background: transparent; border-style: dashed; }
html.cp-v2 .gb-t.is-off .gb-n { color: var(--ob-dim); }
html.cp-v2 .gb-t.is-off .gb-ph { background: transparent; border: 1px dashed var(--ob-line); }
/* Textlink "Alle Angebote vergleichen" (Optik wie .rl2-tl / .sv-prodlink) */
html.cp-v2 .gb-tl { justify-self: start; display: inline-flex; align-items: center; min-height: var(--ob-tap); color: var(--ob-violet-text); font-size: var(--ob-fs-md); font-weight: 700; text-decoration: none; }
html.cp-v2 .gb-tl:hover { color: var(--ob-ink); }
html.cp-v2 .gb-tl:focus-visible { outline: 2px solid var(--ob-aqua); outline-offset: 2px; }
@media (hover: hover) {
  html.cp-v2 .gb-t:not(.is-off):hover { background: var(--ob-hover); border-color: var(--ob-line-2); }
}
@media (prefers-reduced-motion: reduce) {
  html.cp-v2 .gb-t { transition: none; }
}