/* VEYDRIS · Öffentliches Heldenprofil v2 (2026-10-18)
   Eigene Kaskaden-Ebene: wichtige Deklarationen in einer Ebene schlagen alle ungeschichteten
   !important-Regeln der älteren Stylesheets. Dadurch gilt hier nur noch dieses Layout. */
@layer vp2 {
  /* ---------- Reset nur für die neuen Profilteile ---------- */
  .vp2 :where(.vp-head, .vp-sheet, .vp-card), .vp2 :where(.vp-head, .vp-sheet, .vp-card) *,
  .vp2 :where(.vp-head, .vp-sheet, .vp-card)::before, .vp2 :where(.vp-head, .vp-sheet, .vp-card)::after,
  .vp2 :where(.vp-head, .vp-sheet, .vp-card) *::before, .vp2 :where(.vp-head, .vp-sheet, .vp-card) *::after {
    all: unset !important; box-sizing: border-box !important;
  }
  .vp2 :where(.vp-head, .vp-sheet, .vp-card) :where(div, section, header, aside, article, p, h1, h2, h3, ol, ul, li) { display: block !important; }
  .vp2 :where(.vp-head, .vp-sheet, .vp-card) :where(button, [data-game-tooltip]) { cursor: pointer !important; }
  .vp2 :where(.vp-head, .vp-sheet, .vp-card) button:focus-visible { outline: 2px solid var(--vm-gold-hi, #f3d58e) !important; outline-offset: 2px !important; }

  .vp2 {
    --vp-gold: var(--vm-gold-hi, #f3d58e); --vp-gold-dim: rgba(232, 196, 128, .55); --vp-line: rgba(232, 196, 128, .16);
    --vp-text: var(--vm-text, #efe7d6); --vp-muted: var(--vm-muted, #a59c8b);
    --vp-panel: linear-gradient(180deg, rgba(28, 26, 38, .92), rgba(14, 13, 20, .96));
    --vp-tile: clamp(58px, 7.4vh, 84px);
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; grid-auto-rows: max-content !important; height: auto !important; min-height: 0 !important; overflow: visible !important; gap: 14px !important; max-width: var(--pv-max, 1320px) !important; margin: 0 auto !important; padding: 0 !important;
    background: none !important; border: 0 !important; box-shadow: none !important; font-family: var(--vm-font, Manrope, system-ui, sans-serif) !important; color: var(--vp-text) !important;
  }
  .vp2::before, .vp2::after { display: none !important; content: none !important; }

  /* ---------- Kopf ---------- */
  .vp2 .vp-head {
    position: relative !important; height: auto !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto !important; align-items: center !important; gap: 16px !important;
    padding: 12px 16px !important; border-radius: 18px !important; background: var(--vp-panel) !important; border: 1px solid var(--vp-line) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 40px -26px #000 !important;
  }
  .vp2 .vp-back, .vp2 .vp-edit {
    display: inline-flex !important; align-items: center !important; height: 40px !important; padding: 0 18px !important; border-radius: 12px !important;
    font: 700 12px/1 var(--vm-font, Manrope, sans-serif) !important; letter-spacing: .08em !important; text-transform: uppercase !important; white-space: nowrap !important;
    color: var(--vp-text) !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--vp-line) !important; transition: border-color .15s, background .15s !important;
  }
  .vp2 .vp-back:hover, .vp2 .vp-edit:hover { border-color: var(--vp-gold-dim) !important; background: rgba(232, 196, 128, .08) !important; }
  .vp2 .vp-edit { color: #1a1408 !important; background: linear-gradient(180deg, #f6dd9c, #c99a4a) !important; border-color: #f6dd9c !important; }
  .vp2 .vp-id { display: flex !important; align-items: center !important; gap: 14px !important; min-width: 0 !important; }
  .vp2 .vp-crest { flex: 0 0 auto !important; width: 56px !important; height: 56px !important; border-radius: 14px !important; border: 1px solid var(--vp-gold-dim) !important; background: var(--vp-art) center 18% / cover no-repeat, #15131c !important; display: block !important; }
  .vp2 .vp-id > div { min-width: 0 !important; }
  .vp2 .vp-id small { display: block !important; font: 700 10.5px/1.2 var(--vm-font, sans-serif) !important; letter-spacing: .16em !important; color: var(--vp-gold) !important; }
  .vp2 .vp-id h1 { font: 600 30px/1.1 var(--vm-display, Cinzel, serif) !important; color: var(--vp-gold) !important; letter-spacing: .02em !important; margin: 2px 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .vp2 .vp-id p { font: 600 12.5px/1.3 var(--vm-font, sans-serif) !important; letter-spacing: .08em !important; color: var(--vp-muted) !important; }
  .vp2 .vp-facts { display: flex !important; gap: 8px !important; }
  .vp2 .vp-facts span { display: grid !important; gap: 3px !important; min-width: 92px !important; padding: 8px 12px !important; border-radius: 12px !important; background: rgba(255, 255, 255, .035) !important; border: 1px solid var(--vp-line) !important; }
  .vp2 .vp-facts small { font: 700 10px/1 var(--vm-font, sans-serif) !important; letter-spacing: .14em !important; color: var(--vp-muted) !important; }
  .vp2 .vp-facts b { font: 800 15px/1.1 var(--vm-font, sans-serif) !important; color: var(--vp-text) !important; white-space: nowrap !important; }

  /* ---------- Raster ---------- */
  .vp2 .vp-layout { position: relative !important; height: auto !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 360px !important; gap: 14px !important; align-items: start !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
  .vp2 .vp-side { display: grid !important; gap: 14px !important; align-content: start !important; grid-template-rows: none !important; grid-auto-rows: max-content !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; height: auto !important; }

  /* ---------- Charakterbogen ---------- */
  .vp2 .vp-sheet { display: grid !important; gap: 12px !important; padding: 14px 16px 16px !important; border-radius: 20px !important; background: var(--vp-panel) !important; border: 1px solid var(--vp-line) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 60px -34px #000 !important; }
  .vp2 .vp-sheet-head { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 12px !important; padding: 0 4px !important; }
  .vp2 .vp-sheet-head h2 { font: 600 20px/1.2 var(--vm-display, Cinzel, serif) !important; color: var(--vp-gold) !important; letter-spacing: .04em !important; }
  .vp2 .vp-sheet-head small { font: 500 12px/1.3 var(--vm-font, sans-serif) !important; color: var(--vp-muted) !important; }
  .vp2 .vp-doll { display: grid !important; grid-template-columns: calc(var(--vp-tile) + 28px) minmax(0, 1fr) calc(var(--vp-tile) + 28px) !important; gap: 14px !important; align-items: center !important; }
  .vp2 .vp-col { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; }

  /* Slot: eine Kachel, Item mittig, Rang in der Ecke, Name darunter */
  .vp2 .vp-slot { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; width: 100% !important; }
  .vp2 .vp-slot > .item-slot {
    --vp-r: rgba(255, 255, 255, .22);
    position: relative !important; display: grid !important; place-items: center !important; width: var(--vp-tile) !important; height: var(--vp-tile) !important; border-radius: 14px !important;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--vp-r) 26%, transparent), transparent 70%), linear-gradient(180deg, #1d1b26, #111018) !important;
    border: 1.5px solid var(--vp-r) !important; box-shadow: inset 0 0 18px -6px var(--vp-r), 0 8px 18px -12px #000 !important; transition: transform .15s, box-shadow .15s !important;
  }
  .vp2 .vp-slot > .item-slot:hover { filter: brightness(1.12) !important; box-shadow: inset 0 0 22px -4px var(--vp-r), 0 0 0 1px var(--vp-r), 0 12px 24px -12px #000 !important; }
  .vp2 .vp-slot > .item-slot > :not(img) { display: none !important; }
  .vp2 .vp-slot > .item-slot > img { display: block !important; width: 82% !important; height: 82% !important; object-fit: contain !important; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)) !important; }
  .vp2 .vp-slot.is-empty > .item-slot { border-style: dashed !important; --vp-r: rgba(255, 255, 255, .14); }
  .vp2 .vp-slot.is-empty > .item-slot > img { width: 46% !important; height: 46% !important; opacity: .28 !important; filter: grayscale(1) !important; }
  .vp2 .vp-slot.rarity-ungewöhnlich > .item-slot { --vp-r: #5fc46a; }
  .vp2 .vp-slot.rarity-magisch > .item-slot { --vp-r: #4f8dff; }
  .vp2 .vp-slot.rarity-selten > .item-slot { --vp-r: #f2d24b; }
  .vp2 .vp-slot.rarity-episch > .item-slot { --vp-r: #b062ff; }
  .vp2 .vp-slot.rarity-legendär > .item-slot { --vp-r: #ff9a3c; }
  .vp2 .vp-slot.rarity-mythisch > .item-slot { --vp-r: #ff4f6a; }
  .vp2 .vp-slot.rarity-ewig > .item-slot { --vp-r: #5ff0e6; }
  .vp2 .vp-rank { position: absolute !important; top: calc(var(--vp-tile) - 20px) !important; right: calc(50% - var(--vp-tile) / 2 + 4px) !important; padding: 2px 6px !important; border-radius: 7px !important; background: rgba(8, 8, 12, .85) !important; border: 1px solid var(--vp-line) !important; font: 800 10.5px/1.2 var(--vm-font, sans-serif) !important; color: var(--vp-gold) !important; pointer-events: none !important; }
  .vp2 .vp-slot > small { display: block !important; max-width: 100% !important; font: 600 11px/1.2 var(--vm-font, sans-serif) !important; color: var(--vp-muted) !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

  /* Held in der Mitte */
  .vp2 .vp-hero { position: relative !important; display: block !important; align-self: stretch !important; height: auto !important; min-height: 420px !important; border-radius: 18px !important; overflow: hidden !important;
    background: radial-gradient(ellipse 55% 45% at 50% 42%, rgba(232, 196, 128, .14), transparent 70%), radial-gradient(ellipse 70% 30% at 50% 100%, rgba(0, 0, 0, .7), transparent 70%), linear-gradient(180deg, #17151f, #0d0c12) !important; border: 1px solid var(--vp-line) !important; }
  .vp2 .vp-portrait { position: absolute !important; inset: 4% 4% 13% !important; display: block !important; background: var(--profile-art, var(--vp-art)) center bottom / contain no-repeat !important; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .7)) !important; }
  .vp2 .vp-plate { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; padding: 26px 12px 14px !important; text-align: center !important; background: linear-gradient(180deg, transparent, rgba(8, 8, 12, .92) 45%) !important; }
  .vp2 .vp-plate span { display: block !important; font: 700 11px/1.2 var(--vm-font, sans-serif) !important; letter-spacing: .2em !important; color: var(--vp-gold) !important; }
  .vp2 .vp-plate h2 { font: 600 26px/1.15 var(--vm-display, Cinzel, serif) !important; color: var(--vp-gold) !important; letter-spacing: .05em !important; text-transform: uppercase !important; margin: 2px 0 !important; }
  .vp2 .vp-plate p { font: 500 12px/1.3 var(--vm-font, sans-serif) !important; letter-spacing: .1em !important; color: var(--vp-muted) !important; }

  /* Werte-Leiste */
  .vp2 .vp-stats { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 8px !important; }
  .vp2 .vp-stats span { display: grid !important; gap: 4px !important; align-content: center !important; padding: 9px 10px !important; border-radius: 12px !important; background: rgba(255, 255, 255, .035) !important; border: 1px solid var(--vp-line) !important; min-width: 0 !important; }
  .vp2 .vp-stats small { font: 700 9.5px/1.2 var(--vm-font, sans-serif) !important; letter-spacing: .1em !important; color: var(--vp-muted) !important; }
  .vp2 .vp-stats b { font: 800 15px/1.1 var(--vm-font, sans-serif) !important; color: var(--vp-text) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .vp2 .vp-stats .mastery-summary b { font-size: 13px !important; white-space: normal !important; overflow: visible !important; }

  /* ---------- Seitenkarten ---------- */
  .vp2 .vp-card { display: grid !important; gap: 10px !important; padding: 14px 16px !important; border-radius: 18px !important; background: var(--vp-panel) !important; border: 1px solid var(--vp-line) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important; }
  .vp2 .vp-card > header small { display: block !important; font: 700 10px/1.2 var(--vm-font, sans-serif) !important; letter-spacing: .18em !important; color: var(--vp-gold) !important; }
  .vp2 .vp-card > header h2 { font: 600 20px/1.2 var(--vm-display, Cinzel, serif) !important; color: var(--vp-gold) !important; margin-top: 2px !important; }
  .vp2 .vp-card > header p { font: 600 11.5px/1.3 var(--vm-font, sans-serif) !important; color: var(--vp-muted) !important; letter-spacing: .08em !important; text-transform: uppercase !important; margin-top: 2px !important; }
  .vp2 .vp-card h3 { font: 700 11px/1.2 var(--vm-font, sans-serif) !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--vp-muted) !important; margin-top: 4px !important; }
  .vp2 .vp-skills { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  .vp2 .vp-skills .profile-skill { display: flex !important; align-items: center !important; gap: 8px !important; padding: 5px 12px 5px 5px !important; border-radius: 12px !important; background: rgba(255, 255, 255, .04) !important; border: 1px solid var(--vp-line) !important; max-width: 100% !important; }
  .vp2 .vp-skills .profile-skill:hover { border-color: var(--vp-gold-dim) !important; }
  .vp2 .vp-skills .profile-skill img { display: block !important; width: 34px !important; height: 34px !important; border-radius: 9px !important; flex: 0 0 auto !important; }
  .vp2 .vp-skills .profile-skill span { font: 700 12.5px/1.2 var(--vm-font, sans-serif) !important; color: var(--vp-text) !important; }
  .vp2 .vp-skills .profile-hidden { font: 500 12.5px/1.3 var(--vm-font, sans-serif) !important; color: var(--vp-muted) !important; }
  .vp2 .vp-bonds { display: grid !important; gap: 8px !important; }
  .vp2 .vp-bonds article { display: flex !important; align-items: center !important; gap: 12px !important; padding: 8px 12px 8px 8px !important; border-radius: 14px !important; background: rgba(255, 255, 255, .035) !important; border: 1px solid var(--vp-line) !important; }
  .vp2 .vp-bonds article img { display: block !important; width: 58px !important; height: 58px !important; object-fit: contain !important; flex: 0 0 auto !important; border-radius: 12px !important; background: radial-gradient(circle at 50% 60%, rgba(232, 196, 128, .14), transparent 70%) !important; }
  .vp2 .vp-bonds article > i { display: grid !important; place-items: center !important; width: 58px !important; height: 58px !important; flex: 0 0 auto !important; border-radius: 12px !important; border: 1px dashed var(--vp-line) !important; color: var(--vp-muted) !important; font-size: 22px !important; }
  .vp2 .vp-bonds article span { display: grid !important; gap: 2px !important; min-width: 0 !important; }
  .vp2 .vp-bonds small { font: 700 10px/1.2 var(--vm-font, sans-serif) !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--vp-muted) !important; }
  .vp2 .vp-bonds b { font: 700 14px/1.2 var(--vm-font, sans-serif) !important; color: var(--vp-text) !important; }
  .vp2 .vp-bonds em { font: 500 12px/1.3 var(--vm-font, sans-serif) !important; color: #8fe0b0 !important; }
  .vp2 .vp-bonds .is-empty b { color: var(--vp-muted) !important; font-weight: 600 !important; }
  .vp2 .vp-marks { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .vp2 .vp-marks span { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 8px 12px !important; border-radius: 11px !important; background: rgba(255, 255, 255, .035) !important; border: 1px solid var(--vp-line) !important; }
  .vp2 .vp-marks span:last-child { grid-column: 1 / -1 !important; }
  .vp2 .vp-marks small { font: 600 12px/1.2 var(--vm-font, sans-serif) !important; color: var(--vp-muted) !important; }
  .vp2 .vp-marks b { font: 800 14px/1.1 var(--vm-font, sans-serif) !important; color: var(--vp-text) !important; }
  .vp2 .vp-raids { display: grid !important; gap: 6px !important; }
  .vp2 .vp-raids span { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 7px 12px !important; border-radius: 10px !important; background: rgba(154, 134, 255, .06) !important; border: 1px solid rgba(154, 134, 255, .18) !important; }
  .vp2 .vp-raids small { font: 600 12.5px/1.2 var(--vm-font, sans-serif) !important; color: var(--vp-text) !important; }
  .vp2 .vp-raids b { font: 700 12px/1.2 var(--vm-font, sans-serif) !important; color: var(--vp-muted) !important; }
  .vp2 .vp-record { font: 600 12px/1.4 var(--vm-font, sans-serif) !important; color: var(--vp-gold) !important; }

  /* ---------- Mittlere Breiten ---------- */
  @media (max-width: 1180px) {
    .vp2 .vp-layout { grid-template-columns: minmax(0, 1fr) !important; }
    .vp2 .vp-side { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; }
    .vp2 .vp-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  }

  /* ---------- Handy ---------- */
  @media (max-width: 760px) {
    .vp2 { --vp-tile: 58px; gap: 10px !important; }
    .vp2 .vp-head { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; padding: 12px !important; }
    .vp2 .vp-back, .vp2 .vp-edit { justify-content: center !important; width: 100% !important; }
    .vp2 .vp-back { order: -1 !important; }
    .vp2 .vp-id h1 { font-size: 24px !important; }
    .vp2 .vp-facts span { min-width: 0 !important; flex: 1 1 0 !important; }
    .vp2 .vp-sheet { padding: 10px !important; }
    .vp2 .vp-sheet-head small { display: none !important; }
    .vp2 .vp-doll { gap: 6px !important; }
    .vp2 .vp-col { gap: 6px !important; }
    .vp2 .vp-slot > small { font-size: 9.5px !important; }
    .vp2 .vp-rank { font-size: 9px !important; padding: 1px 4px !important; }
    .vp2 .vp-doll { grid-template-columns: minmax(0, 1fr) !important; }
    .vp2 .vp-hero { order: -1 !important; min-height: 380px !important; }
    .vp2 .vp-col { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 4px !important; --vp-tile: min(48px, calc((100vw - 92px) / 6)); }
    .vp2 .vp-slot { width: 100% !important; min-width: 0 !important; }
    .vp2 .vp-slot > small { font-size: 8.5px !important; }
    .vp2 .vp-rank { font-size: 8px !important; padding: 0 3px !important; top: calc(var(--vp-tile) - 15px) !important; }
    .vp2 .vp-plate h2 { font-size: 20px !important; }
    .vp2 .vp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .vp2 .vp-stats .mastery-summary { grid-column: 1 / -1 !important; }
    .vp2 .vp-side { grid-template-columns: minmax(0, 1fr) !important; }
  }

  /* ---------- Item-Tooltip: Evolutionsstufen nicht abschneiden (gilt überall) ---------- */
  .item-mastery-rail > span small { font-size: 9px !important; letter-spacing: 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.15 !important; word-break: break-word !important; max-width: 100% !important; }
  .item-mastery-rail > span b { font-size: 10px !important; }
  /* Leerer Ziel-Chip im Header */
  .topbar #currentObjective:empty { display: none !important; }

  /* =================== Gemeinsame Bausteine (vx) für neu gebaute Seiten =================== */
  .vp2 .vp-sr { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
  .vp2 .vx-hidden { display: none !important; }
  .vp2 .vx-note { display: block !important; font: 500 12px/1.45 var(--vm-font, sans-serif) !important; color: var(--vp-muted) !important; }
  .vp2 .vx-btn, .vp2 .vx-actions .vx-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; padding: 0 16px !important; border-radius: 11px !important;
    font: 700 12px/1 var(--vm-font, sans-serif) !important; letter-spacing: .06em !important; text-transform: uppercase !important; white-space: nowrap !important; cursor: pointer !important;
    color: var(--vp-text) !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid var(--vp-line) !important; transition: border-color .15s, background .15s, transform .15s !important;
  }
  .vp2 .vx-btn:hover { border-color: var(--vp-gold-dim) !important; background: rgba(232, 196, 128, .08) !important; }
  .vp2 .vx-btn.gold { color: #1a1408 !important; background: linear-gradient(180deg, #f6dd9c, #c99a4a) !important; border-color: #f6dd9c !important; }
  .vp2 .vx-btn.gold:hover { transform: translateY(-1px) !important; filter: brightness(1.06) !important; }
  .vp2 .vx-btn.wide { width: 100% !important; }
  .vp2 .vx-btn:disabled { opacity: .45 !important; cursor: not-allowed !important; }
  .vp2 .vx-actions { display: flex !important; gap: 8px !important; }
  .vp2 .vx-xp { position: relative !important; display: block !important; height: 16px !important; margin-top: 7px !important; max-width: 420px !important; border-radius: 99px !important; background: rgba(255, 255, 255, .06) !important; border: 1px solid var(--vp-line) !important; overflow: hidden !important; }
  .vp2 .vx-xp > span { position: absolute !important; inset: 0 auto 0 0 !important; display: block !important; width: var(--xp, 0%) !important; background: linear-gradient(90deg, #8a6a2c, #f3d58e) !important; }
  .vp2 .vx-xp > b { position: relative !important; display: block !important; font: 700 10px/14px var(--vm-font, sans-serif) !important; letter-spacing: .06em !important; color: #fff !important; text-align: center !important; text-shadow: 0 1px 2px #000 !important; }

  /* Heldenseite */
  .vp2 .vx-power-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 8px !important; }
  .vp2 .vx-power-grid span, .vp2 .vx-pair span { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; padding: 8px 12px !important; border-radius: 11px !important; background: rgba(255, 255, 255, .035) !important; border: 1px solid var(--vp-line) !important; }
  .vp2 :is(.vx-power-grid, .vx-pair) small { font: 600 12px/1.2 var(--vm-font, sans-serif) !important; color: var(--vp-muted) !important; }
  .vp2 :is(.vx-power-grid, .vx-pair) b { font: 800 14px/1.1 var(--vm-font, sans-serif) !important; color: var(--vp-text) !important; }
  .vp2 .vx-pair { display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; }
  .vp2 .vx-attrs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  .vp2 .vx-attrs .hero-attribute { display: grid !important; justify-items: center !important; gap: 2px !important; padding: 9px 4px !important; border-radius: 12px !important; background: rgba(255, 255, 255, .035) !important; border: 1px solid var(--vp-line) !important; text-align: center !important; }
  .vp2 .vx-attrs .hero-attribute:hover { border-color: var(--vp-gold-dim) !important; }
  .vp2 .vx-attrs .hero-attribute > span { font-size: 15px !important; line-height: 1 !important; color: var(--vp-gold) !important; }
  .vp2 .vx-attrs .hero-attribute > small { font: 700 9.5px/1.2 var(--vm-font, sans-serif) !important; letter-spacing: .08em !important; color: var(--vp-muted) !important; white-space: nowrap !important; }
  .vp2 .vx-attrs .hero-attribute > b { font: 800 14px/1.1 var(--vm-font, sans-serif) !important; color: var(--vp-text) !important; white-space: nowrap !important; }
  .vp2 .vx-core { display: grid !important; gap: 6px !important; }
  .vp2 .vx-core > header { display: flex !important; justify-content: space-between !important; align-items: center !important; }
  .vp2 .vx-core > header small { font: 700 10px/1.2 var(--vm-font, sans-serif) !important; letter-spacing: .14em !important; color: var(--vp-muted) !important; }
  .vp2 .vx-core > header b { font: 700 10px/1.2 var(--vm-font, sans-serif) !important; letter-spacing: .1em !important; color: var(--vp-gold) !important; }
  .vp2 .vx-core > div { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important; grid-auto-flow: column !important; gap: 6px !important; }
  .vp2 .vx-core > div span { display: flex !important; justify-content: space-between !important; padding: 6px 10px !important; border-radius: 10px !important; background: rgba(255, 255, 255, .035) !important; border: 1px solid var(--vp-line) !important; }
  .vp2 .vx-core > div span.primary { border-color: var(--vp-gold-dim) !important; background: rgba(232, 196, 128, .08) !important; }
  .vp2 .vx-core > div small { font: 700 11px/1.2 var(--vm-font, sans-serif) !important; color: var(--vp-muted) !important; }
  .vp2 .vx-core > div b { font: 800 12.5px/1.2 var(--vm-font, sans-serif) !important; color: var(--vp-text) !important; }
  .vp2 .vx-core > p { font: 500 11.5px/1.4 var(--vm-font, sans-serif) !important; color: #8fe0b0 !important; }
  .vp2 .vx-tags { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; }
  .vp2 .vx-tags small { font: 700 10px/1.2 var(--vm-font, sans-serif) !important; letter-spacing: .14em !important; color: var(--vp-muted) !important; margin-right: 4px !important; }
  .vp2 .vx-tags b { padding: 3px 9px !important; border-radius: 99px !important; font: 700 11px/1.3 var(--vm-font, sans-serif) !important; color: var(--vp-gold) !important; background: rgba(232, 196, 128, .08) !important; border: 1px solid var(--vp-line) !important; }
  .vp2 .vx-adv { display: grid !important; gap: 10px !important; }
  .vp2 .vx-adv .advanced-stat-group { display: grid !important; gap: 6px !important; }
  .vp2 .vx-adv h3 { margin: 0 !important; }
  .vp2 .vx-adv .advanced-stat-group > div { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 5px !important; }
  .vp2 .vx-adv button { display: flex !important; justify-content: space-between !important; gap: 6px !important; padding: 6px 9px !important; border-radius: 9px !important; background: rgba(255, 255, 255, .03) !important; border: 1px solid var(--vp-line) !important; }
  .vp2 .vx-adv button.build-relevant { border-color: var(--vp-gold-dim) !important; }
  .vp2 .vx-adv button small { font: 600 11px/1.25 var(--vm-font, sans-serif) !important; color: var(--vp-muted) !important; }
  .vp2 .vx-adv button b { font: 800 11.5px/1.25 var(--vm-font, sans-serif) !important; color: var(--vp-text) !important; white-space: nowrap !important; }
  .vp2 .vx-goals, .vp2 .vx-sets, .vp2 .vx-uniques { display: grid !important; gap: 6px !important; }
  .vp2 :is(.vx-goals, .vx-uniques) > span, .vp2 .vx-sets .character-set { display: grid !important; gap: 2px !important; padding: 8px 12px !important; border-radius: 11px !important; background: rgba(255, 255, 255, .035) !important; border: 1px solid var(--vp-line) !important; }
  .vp2 :is(.vx-goals, .vx-uniques, .vx-sets) b { font: 700 12.5px/1.3 var(--vm-font, sans-serif) !important; color: var(--vp-text) !important; }
  .vp2 :is(.vx-goals, .vx-uniques, .vx-sets) :is(small, span) { font: 500 11.5px/1.35 var(--vm-font, sans-serif) !important; color: var(--vp-muted) !important; }
  .vp2 .vx-sets small.active { color: #8fe0b0 !important; }
  .vp2 .vx-objective { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; border-color: rgba(232, 196, 128, .4) !important; background: linear-gradient(90deg, rgba(232, 196, 128, .12), rgba(28, 26, 38, .92)) !important; }
  .vp2 .vx-objective small { font: 700 10px/1.2 var(--vm-font, sans-serif) !important; letter-spacing: .16em !important; color: var(--vp-gold) !important; }
  .vp2 .vx-objective h2 { font: 600 18px/1.25 var(--vm-display, Cinzel, serif) !important; color: var(--vp-text) !important; }
  .vp2 .vx-objective p { font: 500 12.5px/1.4 var(--vm-font, sans-serif) !important; color: var(--vp-muted) !important; }

  /* Inventar-Raster mit Item-Kacheln */
  .vp2 .vx-inv-head { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; }
  .vp2 .vx-inv-head small { display: block !important; font: 700 10px/1.2 var(--vm-font, sans-serif) !important; letter-spacing: .16em !important; color: var(--vp-gold) !important; }
  .vp2 .vx-inv-head h2 { font: 600 20px/1.2 var(--vm-display, Cinzel, serif) !important; color: var(--vp-text) !important; }
  .vp2 .vx-inv-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)) !important; gap: 8px !important; }
  .vp2 .vx-inv-grid > .item-slot, .vp2 .vx-tiles > .item-slot {
    --vp-r: rgba(255, 255, 255, .22); position: relative !important; display: grid !important; place-items: center !important; aspect-ratio: 1 !important; width: 100% !important; border-radius: 13px !important; cursor: pointer !important;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--vp-r) 26%, transparent), transparent 70%), linear-gradient(180deg, #1d1b26, #111018) !important; border: 1.5px solid var(--vp-r) !important; box-shadow: inset 0 0 16px -6px var(--vp-r) !important; transition: transform .15s !important;
  }
  .vp2 :is(.vx-inv-grid, .vx-tiles) > .item-slot:hover { filter: brightness(1.12) !important; }
  .vp2 :is(.vx-inv-grid, .vx-tiles) > .item-slot > img { display: block !important; width: 80% !important; height: 80% !important; object-fit: contain !important; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)) !important; }
  .vp2 :is(.vx-inv-grid, .vx-tiles) > .item-slot > span { position: absolute !important; display: block !important; padding: 1px 5px !important; border-radius: 6px !important; font: 800 9.5px/1.3 var(--vm-font, sans-serif) !important; background: rgba(8, 8, 12, .85) !important; border: 1px solid var(--vp-line) !important; color: var(--vp-gold) !important; }
  .vp2 :is(.vx-inv-grid, .vx-tiles) > .item-slot > .item-slot-rank { right: 4px !important; bottom: 4px !important; }
  .vp2 :is(.vx-inv-grid, .vx-tiles) > .item-slot > .item-slot-equipped { display: none !important; }
  .vp2 :is(.vx-inv-grid, .vx-tiles) > .item-slot > .item-slot-marker { left: 4px !important; top: 4px !important; }
  .vp2 :is(.vx-inv-grid, .vx-tiles) > .item-slot > .item-slot-marker ~ .item-slot-marker { display: none !important; }
  .vp2 :is(.vx-inv-grid, .vx-tiles) > .item-slot > .item-slot-marker.better { color: #6cf0a9 !important; border-color: rgba(108, 240, 169, .5) !important; }
  .vp2 :is(.vx-inv-grid, .vx-tiles) > .item-slot > .item-slot-marker.new { color: #fff !important; background: #b0453a !important; }
  .vp2 :is(.vx-inv-grid, .vx-tiles) > .item-slot.rarity-ungewöhnlich { --vp-r: #5fc46a; }
  .vp2 :is(.vx-inv-grid, .vx-tiles) > .item-slot.rarity-magisch { --vp-r: #4f8dff; }
  .vp2 :is(.vx-inv-grid, .vx-tiles) > .item-slot.rarity-selten { --vp-r: #f2d24b; }
  .vp2 :is(.vx-inv-grid, .vx-tiles) > .item-slot.rarity-episch { --vp-r: #b062ff; }
  .vp2 :is(.vx-inv-grid, .vx-tiles) > .item-slot.rarity-legendär { --vp-r: #ff9a3c; }
  .vp2 :is(.vx-inv-grid, .vx-tiles) > .item-slot.rarity-mythisch { --vp-r: #ff4f6a; }
  .vp2 :is(.vx-inv-grid, .vx-tiles) > .item-slot.rarity-ewig { --vp-r: #5ff0e6; }
  .vp2.vx-char .vp-head { grid-template-columns: auto minmax(0, 1fr) auto auto !important; }
  @media (max-width: 760px) {
    .vp2.vx-char .vp-head { grid-template-columns: auto minmax(0, 1fr) !important; }
    .vp2.vx-char .vp-head .vp-facts, .vp2.vx-char .vp-head .vx-actions { grid-column: 1 / -1 !important; }
    .vp2 .vx-actions .vx-btn { flex: 1 1 0 !important; }
    .vp2 .vx-inv-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 6px !important; }
    .vp2 .vx-objective { flex-direction: column !important; align-items: stretch !important; }
  }

  .vp2 > * { order: 0 !important; }

  .vp2 .vp-slot.drop-ready > .item-slot { border-color: var(--vp-gold) !important; box-shadow: 0 0 0 2px rgba(243, 213, 142, .35), inset 0 0 22px -4px var(--vp-gold) !important; }

  /* ===== Fundglück-Karte (in der Heldenseite rechts) ===== */
  .vp2 .loot-dossier, .vp2 .loot-dossier * { all: unset !important; box-sizing: border-box !important; }
  .vp2 .loot-dossier { display: grid !important; gap: 8px !important; padding: 14px 16px !important; border-radius: 18px !important; background: var(--vp-panel) !important; border: 1px solid var(--vp-line) !important; }
  .vp2 .loot-dossier header { display: grid !important; }
  .vp2 .loot-dossier .eyebrow { font: 700 10px/1.2 var(--vm-font, sans-serif) !important; letter-spacing: .18em !important; color: var(--vp-gold) !important; }
  .vp2 .loot-dossier h2 { font: 600 18px/1.2 var(--vm-display, Cinzel, serif) !important; color: var(--vp-gold) !important; }
  .vp2 .loot-dossier-values { display: grid !important; gap: 5px !important; }
  .vp2 .loot-dossier-values article { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; padding: 7px 11px !important; border-radius: 10px !important; background: rgba(255, 255, 255, .035) !important; border: 1px solid var(--vp-line) !important; }
  .vp2 .loot-dossier-values small { font: 600 11.5px/1.3 var(--vm-font, sans-serif) !important; color: var(--vp-muted) !important; }
  .vp2 .loot-dossier-values b { font: 800 13px/1.2 var(--vm-font, sans-serif) !important; color: #8fe0b0 !important; white-space: nowrap !important; }
  .vp2 .loot-dossier-notes summary { display: block !important; cursor: pointer !important; font: 600 11.5px/1.4 var(--vm-font, sans-serif) !important; color: var(--vp-muted) !important; }
  .vp2 .loot-dossier-notes[open] p { display: block !important; margin-top: 6px !important; font: 500 11.5px/1.45 var(--vm-font, sans-serif) !important; color: var(--vp-muted) !important; }
  .vp2 .loot-dossier-notes b { font-weight: 700 !important; color: var(--vp-text) !important; }
  .vp2.vx-char .vx-inv-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)) !important; gap: 6px !important; }
  .vp2.vx-char .vx-inv-head h2 { font-size: 17px !important; }

  /* ===== Desktop: Seite passt in den Bildschirm (Höhe aus layout-fit.js) ===== */
  @media (min-width: 1025px) and (min-height: 600px) {
    .vp2.vx-char, .vp2.public-profile { --vp-h: calc(var(--pv-avail, 760px) - var(--pv-banner, 0px)); height: var(--vp-h) !important; display: flex !important; flex-direction: column !important; gap: 12px !important; overflow: hidden !important; }
    .vp2:is(.vx-char, .public-profile) > * { flex: 0 0 auto !important; }
    .vp2:is(.vx-char, .public-profile) > .vp-layout { flex: 1 1 auto !important; min-height: 0 !important; grid-template-rows: minmax(0, 1fr) !important; align-items: stretch !important; }
    .vp2:is(.vx-char, .public-profile) .vp-head { padding: 8px 14px !important; }
    .vp2:is(.vx-char, .public-profile) .vp-crest { width: 46px !important; height: 46px !important; }
    .vp2:is(.vx-char, .public-profile) .vp-id h1 { font-size: 26px !important; }
    .vp2:is(.vx-char, .public-profile) .vp-sheet { min-height: 0 !important; grid-template-rows: auto minmax(0, 1fr) auto !important; padding: 12px 14px !important; gap: 10px !important; }
    .vp2:is(.vx-char, .public-profile) .vp-doll { min-height: 0 !important; height: 100% !important; container-type: size !important; --vp-tile: clamp(40px, calc((100cqh - 150px) / 6), 86px); }
    .vp2:is(.vx-char, .public-profile) .vp-col { gap: 6px !important; justify-content: center !important; }
    .vp2:is(.vx-char, .public-profile) .vp-hero { min-height: 0 !important; height: 100% !important; }
    .vp2:is(.vx-char, .public-profile) .vp-side { min-height: 0 !important; height: 100% !important; overflow-y: auto !important; scrollbar-width: thin !important; scrollbar-color: rgba(232, 196, 128, .3) transparent !important; padding-right: 2px !important; gap: 10px !important; }
    .vp2:is(.vx-char, .public-profile) .vp-stats span { padding: 6px 9px !important; }
    .vp2:is(.vx-char, .public-profile) .vp-stats b { font-size: 13.5px !important; }
  }
  @media (min-width: 1025px) and (min-height: 600px) and (max-height: 820px) {
    .vp2:is(.vx-char, .public-profile) .vp-stats { display: none !important; }
    .vp2:is(.vx-char, .public-profile) .vp-sheet-head small { display: none !important; }
    .vp2:is(.vx-char, .public-profile) .vp-plate h2 { font-size: 21px !important; }
  }
  /* neuer Held: erst Startwaffe wählen, dann Heldenseite */
  body.vey-renewal #view:has(> .starter-forge) > .vp2 { display: none !important; }
}