/* Fondsvergleich v2 (inc/fund-overview-v2.php). Gleiche Tokens wie die uebrigen v2-Seiten, alles unter .fv
   gekapselt. Die Fonds-Tabelle selbst behaelt ihre eigenen Styles (funds-display.php). Ueberschriften mit
   !important, weil das Elementor-Kit h1-h3 global setzt. */
.fv{
  --fv-bg:#00070C; --fv-bg2:#04131D; --fv-bg3:#0A1F2C;
  --fv-fg:#F2F7FA; --fv-muted:#8FA6B4; --fv-muted2:#6E8798;
  --fv-line:rgba(255,255,255,.09); --fv-line2:rgba(255,255,255,.16);
  --fv-cta:#D63A44; --fv-cta-h:#C2303A; /* Knopfflaechen: Kontrast >= 4,5:1 */
  --fv-green:#02D095; --fv-amber:#FFC43D;
  --fv-font:"Inter","Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  background:var(--fv-bg); color:var(--fv-fg); font-family:var(--fv-font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.fv *,.fv *::before,.fv *::after{box-sizing:border-box}
body .fv :is(:is(h1,:where([data-ff-hd="1"])),:is(h2,:where([data-ff-hd="2"])),:is(h3,:where([data-ff-hd="3"])),p,li,a,span,b,small,summary,details,div){font-family:var(--fv-font)!important}
.fv :is(:is(h1,:where([data-ff-hd="1"])),:is(h2,:where([data-ff-hd="2"])),:is(h3,:where([data-ff-hd="3"]))){color:var(--fv-fg);margin:0;padding:0;text-wrap:balance;letter-spacing:-.02em!important}
.fv p{margin:0}
.fv ul{margin:0;padding:0;list-style:none}
.fv a{color:inherit;text-decoration:none}
.fv b{color:var(--fv-fg);font-weight:650}
.fv-wrap{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.fv-sec{padding-block:clamp(44px,6vw,80px)}
.fv-tight{padding-top:0}
.fv-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fv-green)}
.fv-lede{color:var(--fv-muted);font-size:clamp(1rem,1.3vw,1.13rem);max-width:64ch}
.fv-head{display:grid;gap:12px;margin-bottom:clamp(22px,3vw,34px);max-width:780px}
.fv .fv-head :is(h2,:where([data-ff-hd="2"])){font-size:clamp(1.7rem,3.4vw,2.5rem)!important;font-weight:800!important;line-height:1.1!important}

.fv .fv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 1rem/1.15 var(--fv-font);padding:14px 20px;border-radius:14px;border:1px solid transparent;transition:background .2s,transform .2s;text-align:center}
.fv a.fv-btn-primary{background:var(--fv-cta);color:#fff;box-shadow:0 10px 30px -10px rgba(254,79,89,.7)}
.fv a.fv-btn-primary:hover{background:var(--fv-cta-h);color:#fff;transform:translateY(-2px)}
.fv a.fv-btn-ghost{background:rgba(255,255,255,.04);border-color:var(--fv-line2);color:var(--fv-fg)}
.fv a.fv-btn-ghost:hover{border-color:rgba(255,255,255,.35);color:var(--fv-fg)}
.fv a:focus-visible,.fv summary:focus-visible{outline:3px solid var(--fv-amber)!important;outline-offset:3px}
.fv-ctas{display:flex;flex-wrap:wrap;gap:12px}

/* Kopf */
.fv-hero{background:radial-gradient(900px 420px at 85% -20%,rgba(2,208,149,.13),transparent 60%),radial-gradient(600px 360px at -10% 120%,rgba(254,79,89,.09),transparent 60%);padding-block:clamp(32px,4.5vw,56px) clamp(18px,2.5vw,26px)}
.fv-crumb{font-size:13px;color:var(--fv-muted2);margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap}
.fv-crumb a:hover{color:var(--fv-green)}
.fv-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:end}
@media (max-width:900px){.fv-hero-grid{grid-template-columns:minmax(0,1fr);gap:20px}}
.fv .fv-hero :is(h1,:where([data-ff-hd="1"])){font-size:clamp(1.9rem,4vw,3.1rem)!important;font-weight:800!important;line-height:1.06!important;margin:12px 0 14px!important;max-width:22ch}
.fv-hero :is(h1,:where([data-ff-hd="1"])) em{font-style:normal;color:var(--fv-green)}
.fv-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fv-stat{background:var(--fv-bg2);border:1px solid var(--fv-line);border-radius:14px;padding:14px}
.fv-stat b{display:block;font-size:1.6rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.fv-stat span{font-size:12.5px;color:var(--fv-muted)}
.fv-unlock{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;padding:16px 20px;margin-bottom:14px;border:1px solid rgba(254,79,89,.35);border-radius:18px;background:linear-gradient(135deg,rgba(254,79,89,.13),var(--fv-bg2) 65%)}
.fv-unlock b{display:block}
.fv-unlock p{font-size:14px;color:var(--fv-muted)}

/* Lesehilfe, Methode, Pakete, Wege, Fragen */
.fv-read{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.fv-read{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.fv-read{grid-template-columns:minmax(0,1fr)}}
.fv-ri{background:var(--fv-bg2);border:1px solid var(--fv-line);border-radius:16px;padding:16px;display:grid;gap:6px}
.fv-ri b{font-size:14.5px}
.fv-ri p{font-size:13.5px;color:var(--fv-muted)}
.fv-method{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.fv-method{grid-template-columns:minmax(0,1fr)}}
.fv-card{background:var(--fv-bg2);border:1px solid var(--fv-line);border-radius:18px;padding:22px;display:grid;gap:10px;align-content:start}
.fv .fv-card :is(h3,:where([data-ff-hd="3"])),.fv .fv-plan :is(h3,:where([data-ff-hd="3"])),.fv .fv-tile :is(h3,:where([data-ff-hd="3"])){font-size:1.15rem!important;font-weight:700!important;line-height:1.3!important}
.fv-card p{color:var(--fv-muted);font-size:15px}
.fv-big{font-size:2rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fv-bar{display:flex;height:14px;border-radius:7px;overflow:hidden}
.fv-bar i{display:block;height:100%}
.fv-b1{width:72%;background:var(--fv-green)}.fv-b2{width:28%;background:var(--fv-amber)}
.fv-bar-l{display:flex;justify-content:space-between;font-size:12.5px;color:var(--fv-muted)}
.fv-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:860px){.fv-plans{grid-template-columns:minmax(0,1fr)}}
.fv-plan{background:var(--fv-bg2);border:1px solid var(--fv-line);border-radius:18px;padding:22px;display:grid;gap:10px;align-content:start}
.fv-hl{border-color:rgba(254,79,89,.45);background:linear-gradient(160deg,rgba(254,79,89,.08),var(--fv-bg2) 55%)}
.fv .fv-plan .fv-sub{margin-top:8px!important}
.fv-plan ul{display:grid;gap:6px;font-size:14.5px;color:var(--fv-muted)}
.fv-plan li{padding-left:22px;position:relative}
.fv-plan li::before{content:"✓";position:absolute;left:0;color:var(--fv-green);font-weight:700}
.fv-plan li.fv-no::before{content:"–";color:var(--fv-muted2)}
.fv-price{font-size:1.5rem;font-weight:800}
.fv-plan .fv-btn{width:fit-content}
.fv-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.fv a.fv-tile{display:grid;gap:8px;background:var(--fv-bg2);border:1px solid var(--fv-line);border-radius:18px;padding:20px}
.fv a.fv-tile:hover{border-color:var(--fv-line2);background:var(--fv-bg3)}
.fv-tile p{color:var(--fv-muted);font-size:14.5px}
.fv-tile span{color:var(--fv-green);font-weight:700;font-size:14.5px}
.fv-faq{display:grid;gap:10px;max-width:860px}
.fv-faq details{background:var(--fv-bg2);border:1px solid var(--fv-line);border-radius:14px;padding:4px 18px}
.fv-faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;color:var(--fv-fg)}
.fv-faq summary::-webkit-details-marker{display:none}
.fv-faq summary::after{content:"+";float:right;color:var(--fv-muted)}
.fv-faq details[open] summary::after{content:"–"}
.fv-faq p{color:var(--fv-muted);padding:0 0 16px}
.fv-disc{font-size:12.5px;color:var(--fv-muted2);max-width:90ch;margin-top:16px!important}
/* Kopfzeile liegt auf dieser Seite durchsichtig ueber dem Inhalt (she-header-transparent);
   frueher gab der ausgeblendete Bild-Kopf den Abstand, jetzt der neue Kopf selbst */
body.ff-fv2 .fv-hero{padding-top:130px}
@media (max-width:1024px){body.ff-fv2 .fv-hero{padding-top:100px}}

/* Bestehender Tabellen-Kasten (Elementor 15c5712 in Container 16b8b92, Seite 297): war mit
   -20 % (Handy -28 %) nach oben ueber das alte Kopfbild gezogen und halb durchsichtig.
   Ohne das Kopfbild rutschte er in den neuen Kopf. Abstand null, Flaeche deckend. */
body.ff-fv2 .elementor-element.elementor-element-15c5712{margin-top:0!important;background-color:#04131D!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:22px!important;padding:clamp(12px,1.6vw,22px)!important}
body.ff-fv2 .elementor-element.elementor-element-16b8b92{--padding-top:0px!important;padding-top:0!important}

@media (prefers-reduced-motion:reduce){.fv *{transition:none!important}}

/* ============ Ampel wie im Cockpit „Meine Suche“ (Variante C, 2026-11-04, Eike) ============
   Gleiche Darstellung wie cockpit.css Teil 7 und 8: 5 Stufen, 3 Farben. Die ganze Jahreszelle traegt die
   Ampelfarbe, die Zahl bleibt hell, die Stufe steht als kleiner farbiger Text darunter. Nur Top 10 % und
   4. Viertel haben einen feinen Rand. Score und Legende als getoente Pillen. Inline-Farben der alten Ampel
   (funds-display.php) werden mit !important ueberschrieben. Gilt nur auf dem Fondsvergleich (body.ff-fv2). */
body.ff-fv2{
  --q-t10-bg:rgba(2,208,149,.24);--q-t10-fg:#5FF0C2;--q-t10-bd:rgba(2,208,149,.5);
  --q-q1-bg:rgba(2,208,149,.12);--q-q1-fg:#02D095;--q-q1-bd:transparent;
  --q-q2-bg:rgba(255,196,61,.14);--q-q2-fg:#FFC43D;--q-q2-bd:transparent;
  --q-q3-bg:rgba(254,79,89,.14);--q-q3-fg:#FE7C84;--q-q3-bd:transparent;
  --q-q4-bg:rgba(254,79,89,.24);--q-q4-fg:#FF9AA0;--q-q4-bd:rgba(254,79,89,.5);
  --fvq-fg:#F2F7FA;--fvq-muted:#8FA6B4;
}
/* Jahreszellen */
body.ff-fv2 .funds-container .year-cell[data-q="t10"]{--yb:var(--q-t10-bg);--yf:var(--q-t10-fg);--yd:var(--q-t10-bd)}
body.ff-fv2 .funds-container .year-cell[data-q="q1"]{--yb:var(--q-q1-bg);--yf:var(--q-q1-fg);--yd:transparent}
body.ff-fv2 .funds-container .year-cell[data-q="q2"]{--yb:var(--q-q2-bg);--yf:var(--q-q2-fg);--yd:transparent}
body.ff-fv2 .funds-container .year-cell[data-q="q3"]{--yb:var(--q-q3-bg);--yf:var(--q-q3-fg);--yd:transparent}
body.ff-fv2 .funds-container .year-cell[data-q="q4"]{--yb:var(--q-q4-bg);--yf:var(--q-q4-fg);--yd:var(--q-q4-bd)}
body.ff-fv2 .funds-container .year-cell:is([data-q="t10"],[data-q="q1"],[data-q="q2"],[data-q="q3"],[data-q="q4"]){
  background:var(--yb)!important;border:1px solid var(--yd)!important;border-radius:8px!important;padding:7px 10px!important;
  gap:1px!important;box-sizing:border-box;color:var(--fvq-fg)!important;align-items:flex-start!important;min-width:84px
}
body.ff-fv2 .funds-container .year-cell[data-q] .year-percent{color:var(--fvq-fg)!important;font-weight:600!important;font-size:14px}
body.ff-fv2 .funds-container .year-cell[data-q] .quartile-box{
  background:none!important;border:0!important;padding:0!important;margin:0!important;width:auto!important;border-radius:0!important;
  line-height:1.35!important;color:var(--yf,var(--fvq-muted))!important;font-size:11px!important;font-weight:600!important;box-shadow:none!important
}
body.ff-fv2 .funds-container .year-cell[data-q] .quartile-box::before{display:none!important}
body.ff-fv2 .funds-container .year-cell[data-q] .quartile-box .quartile-label{color:inherit!important;font-size:inherit!important;font-weight:inherit!important;letter-spacing:0!important}
/* Score: ganze Pille in der Ampelfarbe */
body.ff-fv2 .funds-container .total-score-box{
  border:1px solid transparent!important;border-radius:8px!important;padding:4px 10px!important;min-width:46px!important;justify-content:center;
  font-size:14px!important;font-weight:700!important;font-variant-numeric:tabular-nums;box-shadow:none!important
}
body.ff-fv2 .funds-container .total-score-box::before{display:none!important}
body.ff-fv2 .funds-container .total-score-box[data-total-quartile="Top 10 %"]{background:var(--q-t10-bg)!important;color:var(--q-t10-fg)!important;border-color:var(--q-t10-bd)!important}
body.ff-fv2 .funds-container .total-score-box[data-total-quartile="1. Viertel"]{background:var(--q-q1-bg)!important;color:var(--q-q1-fg)!important}
body.ff-fv2 .funds-container .total-score-box[data-total-quartile="2. Viertel"]{background:var(--q-q2-bg)!important;color:var(--q-q2-fg)!important}
body.ff-fv2 .funds-container .total-score-box[data-total-quartile="3. Viertel"]{background:var(--q-q3-bg)!important;color:var(--q-q3-fg)!important}
body.ff-fv2 .funds-container .total-score-box[data-total-quartile="4. Viertel"]{background:var(--q-q4-bg)!important;color:var(--q-q4-fg)!important;border-color:var(--q-q4-bd)!important}
/* Legende: dieselben Pillen, ohne Punkt */
body.ff-fv2 .fond-facts-top-dashboard-sec .legend{gap:6px 8px!important}
body.ff-fv2 .fond-facts-top-dashboard-sec .legend-dot{display:none!important}
body.ff-fv2 .fond-facts-top-dashboard-sec .legend-item{
  display:inline-flex!important;align-items:center;padding:2px 8px!important;border-radius:999px!important;margin:0!important;
  font-size:11.5px!important;font-weight:600!important;line-height:1.5!important;white-space:nowrap;
  border:1px solid var(--bd,transparent)!important;background:var(--bg,rgba(255,255,255,.06))!important;color:var(--fg,var(--fvq-muted))!important
}
body.ff-fv2 .fond-facts-top-dashboard-sec .legend-item:nth-child(1){--bg:var(--q-t10-bg);--fg:var(--q-t10-fg);--bd:var(--q-t10-bd)}
body.ff-fv2 .fond-facts-top-dashboard-sec .legend-item:nth-child(2){--bg:var(--q-q1-bg);--fg:var(--q-q1-fg);--bd:var(--q-q1-bd)}
body.ff-fv2 .fond-facts-top-dashboard-sec .legend-item:nth-child(3){--bg:var(--q-q2-bg);--fg:var(--q-q2-fg);--bd:var(--q-q2-bd)}
body.ff-fv2 .fond-facts-top-dashboard-sec .legend-item:nth-child(4){--bg:var(--q-q3-bg);--fg:var(--q-q3-fg);--bd:var(--q-q3-bd)}
body.ff-fv2 .fond-facts-top-dashboard-sec .legend-item:nth-child(5){--bg:var(--q-q4-bg);--fg:var(--q-q4-fg);--bd:var(--q-q4-bd)}
/* Kennzahlen: alte Gruen/Rot-Toene auf die v2-Toene */
body.ff-fv2 .funds-container td span[style*="66bb6a"]{color:#02D095!important}
body.ff-fv2 .funds-container td span[style*="f44336"]{color:#FE4F59!important}