/* Zusatz-CSS – nur auf dieser Seite einbinden: Strategie */
.st-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#071426,#102746 60%,#0a1a30);color:#fff;padding:74px 0 64px;text-align:center}
.st-candles{position:absolute;inset:0;width:100%;height:100%;opacity:.4;z-index:0}
.st-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0,transparent 40%,rgba(12,20,40,.55));z-index:0}
.st-hero .wrap{position:relative;z-index:1}
.st-hero .eb{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#b98fd6}
.st-hero h1{font-size:47px;font-weight:800;letter-spacing:-.02em;line-height:1.07;margin:14px 0 14px}
.st-hero .lead{color:#c7d0e4;font-size:17px;max-width:54ch;margin:0 auto 24px}
.st-hchips{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;color:#e4e9f4;font-weight:600;font-size:14.5px}
.st-hchips span{display:inline-flex;align-items:center;gap:9px}
.st-hchips .tk{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(112,48,160,.18);color:#b98fd6}
.st-sec{padding:92px 0}
.st-sec.alt{background:var(--alt)}
.st-head{text-align:center;max-width:660px;margin:0 auto 36px}
.st-head .eb{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--berry)}
.st-head h2{font-size:33px;font-weight:800;letter-spacing:-.02em;margin:8px 0 10px;text-wrap:balance}
.st-head p{color:var(--muted);font-size:15.5px}
.st-grid5{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* 6 Strategie-Karten: Name · Payoff-Grafik · aufklappbare Erklärung */
.strat6{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.s6card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 24px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .16s,box-shadow .2s}
.s6card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.s6card h3{font-size:19px;font-weight:800;text-align:center;margin-bottom:14px}
.s6graph{height:132px;border:1px solid rgba(255,255,255,.08);border-radius:11px;overflow:hidden;background:linear-gradient(180deg,#0e1d38,#0a1428);margin-bottom:14px}
.s6graph .pf{width:100%;height:100%;display:block}
.s6det{border-top:1px solid var(--line);padding-top:13px;margin-top:auto}
.s6det summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--berry);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.s6det summary::-webkit-details-marker{display:none}
.s6det summary .s6ic{display:inline-flex;transition:transform .2s}
.s6det[open] summary .s6ic{transform:rotate(180deg)}
.s6det p{color:var(--muted);font-size:14px;line-height:1.6;margin-top:12px;text-align:left}
@media(max-width:900px){.strat6{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.strat6{grid-template-columns:1fr}}
.st-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;text-align:center;transition:transform .16s,box-shadow .2s}
.st-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.st-cbg{position:relative;height:108px;background:linear-gradient(180deg,#0e1d38,#0a1730);border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden}
.st-cbg .st-cfield{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.st-cicon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:18px;background:rgba(255,255,255,.10);box-shadow:0 8px 22px rgba(0,0,0,.35);display:grid;place-items:center;color:#eaf0fb;border:1px solid rgba(255,255,255,.22)}
.st-cicon svg{width:34px;height:34px;stroke-width:1.7}
.st-cbody{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.st-card h3{font-size:19px;font-weight:800;margin-bottom:8px}
.st-card p{color:var(--muted);font-size:14.5px;line-height:1.5;margin-bottom:16px}
.st-card .lnk{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--berry);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;border-top:1px solid var(--line);padding-top:14px;margin-top:auto}
.st-banner{background:linear-gradient(120deg,#101d3a,#1c2c54);color:#fff}
.st-banner .wrap{display:flex;align-items:center;gap:20px;padding:30px 24px;justify-content:center;text-align:center}
.st-banner .sic{flex:0 0 auto;color:#b98fd6}
.st-banner b{font-size:22px;font-weight:800;display:block}
.st-banner p{color:#c7d0e4;font-size:15px;margin-top:4px}
.st-grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.st-p{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.st-p .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--navy);color:#fff;flex:0 0 auto}
.st-p h3{font-size:19px;font-weight:800;margin-bottom:8px;line-height:1.15}
.st-p p{color:var(--muted);font-size:14.5px;margin-bottom:14px;line-height:1.55}
.st-pchart-wrap{height:152px;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;margin-bottom:18px;
  background:linear-gradient(180deg,#0e1d38,#0a1730)}
.st-pchart-wrap .pchart{width:100%;height:100%;display:block}
/* Bild-Grafik (Asset) statt Chart: volle Höhe, kein fixer Rahmen/Ausschnitt */
.st-pchart-wrap:has(.st-pchart-img){height:auto;background:none;border:0;overflow:visible}
/* Neutrale SVG-Schaubilder */
/* Rueckfall fuer Browser ohne :has() – die Klasse steht im HTML,
   damit das Diagramm dort nicht auf 152px abgeschnitten wird. */
.st-pchart-wrap.has-gfx,.st-pchart-wrap.has-img{height:auto;background:none;border:0;overflow:visible}
.st-pchart-wrap:has(.st-gfx){height:auto;background:none;border:0;overflow:visible}
.st-gfx{width:100%;height:auto;display:block;border-radius:12px;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}
.st-pchart-img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}
.st-phead{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.st-phead h3{margin-bottom:0}
:root[data-theme="dark"] .st-pchart-wrap{background:linear-gradient(180deg,#0e1d38,#0a1730)}
@media (prefers-color-scheme:dark){.st-pchart-wrap{background:linear-gradient(180deg,#0e1d38,#0a1730)}}
.st-ul{list-style:none;display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--line);padding-top:15px}
.st-ul li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px}
.st-ul li svg{color:var(--berry);flex:0 0 auto}
.st-broker{background:linear-gradient(180deg,#f4f5f9,#eceef5);border:1px solid var(--line);border-radius:20px;padding:30px;
  display:grid;grid-template-columns:1.05fr 1fr .95fr;gap:30px;align-items:center;box-shadow:var(--shadow)}
.st-monitor{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 34px rgba(11,20,38,.22))}
.st-monitor-img{width:100%;height:auto;display:block;border-radius:12px;mix-blend-mode:multiply}
.ot-banner-link{display:block}
.ot-banner{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);transition:box-shadow .2s}
.ot-banner-link:hover .ot-banner{box-shadow:var(--shadow-lg)}
.ot-showcase{display:flex;flex-direction:column;gap:24px;max-width:960px;margin:0 auto}
.ot-shot-img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow)}
.st-broker h3{font-size:22px;font-weight:800;line-height:1.2;margin-bottom:14px}
.st-broker .bul{list-style:none;display:flex;flex-direction:column;gap:11px}
.st-broker .bul li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600}
.st-broker .bul li svg{color:var(--berry);flex:0 0 auto}
.st-bpart{text-align:center}
.st-oplogo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:2px}
.st-logo{font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--navy)}
.st-logo b{color:var(--berry)}
.st-bpart .by{font-size:12px;color:var(--muted);margin-bottom:16px}
.st-bpart .by b{color:var(--ink);font-weight:800}
.st-bpart .btn{width:100%;justify-content:center}
.st-bnote{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.4}
.st-bnote b{color:var(--ink)}
.st-prices{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:760px;margin:0 auto}
.st-price{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 26px;box-shadow:var(--shadow);position:relative;text-align:center;display:flex;flex-direction:column}
.st-price.feat{border:2px solid var(--berry);box-shadow:var(--shadow-lg)}
.st-price .pb{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--berry);color:#fff;font-size:11px;font-weight:800;letter-spacing:.07em;padding:5px 13px;border-radius:999px}
.st-price h3{font-size:19px;font-weight:800}
.st-price .term{color:var(--berry);font-weight:700;font-size:13.5px;margin-bottom:10px}
.st-price .amt{font-size:40px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.st-price .amt .old{font-size:18px;color:var(--muted);text-decoration:line-through;font-weight:600;margin-left:8px}
.st-price ul{list-style:none;text-align:left;margin:18px 0 22px;display:flex;flex-direction:column;gap:10px}
.st-price li{display:flex;gap:9px;font-size:14px;align-items:flex-start}
.st-price li svg{color:var(--berry);flex:0 0 auto;margin-top:2px}
.st-price .btn{margin-top:auto;width:100%;justify-content:center}
.st-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:860px;margin:38px auto 0}
.st-trust .ti{display:flex;align-items:center;gap:12px;justify-content:center}
.st-trust .ti svg{color:var(--berry);flex:0 0 auto}
.st-trust .ti b{display:block;font-size:14px;color:var(--ink);line-height:1.2}
.st-trust .ti span{font-size:12.5px;color:var(--muted)}
@media(max-width:900px){.st-grid5{grid-template-columns:1fr 1fr}.st-broker{grid-template-columns:1fr;text-align:center}
  .st-broker .bul{align-items:center}.st-trust{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:620px){.st-hero h1{font-size:34px}.st-grid5,.st-grid2,.st-prices{grid-template-columns:1fr}
  .st-head h2{font-size:26px}.st-hchips{gap:14px;flex-direction:column;align-items:center}}
@media (prefers-color-scheme:dark){
  .st-sec.alt{background:var(--alt)}
  .st-broker{background:linear-gradient(180deg,#ffffff,#eef2f8)}
  .st-logo{color:var(--navy)}
}
:root[data-theme="dark"] .st-sec.alt{background:var(--alt)}
:root[data-theme="dark"] .st-broker{background:linear-gradient(180deg,#ffffff,#eef2f8)}
:root[data-theme="dark"] .st-logo{color:var(--navy)}
/* OptimTrader-Hero: zweispaltig mit Laptop-/Phone-Grafik (nach Vorlage) */
.ot-hero{padding:52px 0 50px;text-align:left}
.ot-herogrid{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;position:relative;z-index:1}
.ot-hero h1{font-size:38px;line-height:1.12;margin:12px 0 12px}
.ot-hero .lead{margin:0 0 24px;max-width:44ch}
.ot-feats{display:flex;flex-wrap:wrap;gap:18px}
.ot-fi{display:flex;flex-direction:column;align-items:center;gap:9px;width:92px;text-align:center}
.ot-fi .ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:var(--gold-soft)}
.ot-fi b{font-size:12px;font-weight:700;color:#e4e9f4;line-height:1.3}
/* Phone-Grafik nahtlos in den Hero eingebettet: kein sichtbarer Hintergrund-Kasten,
   sondern an allen Kanten weich ausgeblendet (Masken laufen achsenweise: Y aussen, X innen) */
.ot-heroR{position:relative;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 86%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 86%,transparent 100%)}
.ot-laptop{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 42px rgba(0,0,0,.5))}
.ot-phone{width:116%;max-width:none;margin:0 -8%;height:auto;display:block;border-radius:0;filter:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%)}
/* vier Trust-Punkte auf EINER Höhe (eine Reihe) auf dem Desktop */
.ot-hero .st-hchips{justify-content:flex-start;gap:13px;font-size:12.5px}
.ot-hero .st-hchips .tk{width:19px;height:19px}
@media(min-width:1024px){.ot-hero .st-hchips{flex-wrap:nowrap}.ot-hero .st-hchips span{white-space:nowrap}}
@media(max-width:900px){.ot-hero .st-hchips{justify-content:center}}
@media(max-width:900px){.ot-herogrid{grid-template-columns:1fr;gap:26px}.ot-heroR{order:-1}.ot-hero{text-align:center}.ot-hero .lead{margin-left:auto;margin-right:auto}.ot-feats{justify-content:center}}
/* OptimTrader: Plattform-Überblick, Schritte, FAQ-Features */
.ot-plat-head h2{font-size:27px;font-weight:800;letter-spacing:-.01em;margin-bottom:22px}
.ot-plat{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
.ot-shots{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.ot-shot-card{text-align:center}
.ot-shot{width:100%;height:auto;display:block;border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--line)}
.ot-shot-card b{display:block;margin-top:10px;font-size:13.5px;font-weight:700}
.ot-side{display:flex;flex-direction:column;gap:18px}
.ot-role{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.ot-role .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:rgba(112,48,160,0.090);background:color-mix(in srgb,var(--berry) 9%,transparent);color:var(--berry);margin-bottom:12px}
.ot-role h4{font-size:16px;font-weight:800;margin-bottom:6px}
.ot-role p{color:var(--muted);font-size:13.5px;line-height:1.55}
.ot-start{background:linear-gradient(135deg,var(--berry-dark),var(--berry));color:#fff;border-radius:16px;padding:22px;box-shadow:var(--shadow-lg)}
.ot-start h4{font-size:16px;font-weight:800;margin-bottom:6px;color:#fff}
.ot-start p{color:#f2d9e6;font-size:13.5px;margin-bottom:14px}
.ot-start .btn{width:100%;justify-content:center}
.ot-start .ot-note{display:block;text-align:center;margin-top:10px;font-size:12px;color:#f0cfe0}
.ot-steps{display:flex;flex-wrap:wrap;gap:8px}
.ot-step{flex:1;min-width:150px;text-align:center;padding:0 8px;position:relative}
.ot-step .sc{width:58px;height:58px;border-radius:50%;background:rgba(112,48,160,0.100);background:color-mix(in srgb,var(--berry) 10%,transparent);color:var(--berry);display:grid;place-items:center;margin:0 auto 12px;position:relative}
.ot-step .sn{position:absolute;top:-3px;right:-3px;width:22px;height:22px;border-radius:50%;background:var(--berry);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.ot-step h4{font-size:15.5px;font-weight:800;margin-bottom:5px}
.ot-step p{color:var(--muted);font-size:13px;line-height:1.45}
.ot-step:not(:last-child)::after{content:"\2192";position:absolute;top:16px;right:-6px;color:var(--berry);opacity:.45;font-size:22px;font-weight:700}
.ot-faqgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:34px;align-items:start}
.ot-feats-col{display:flex;flex-direction:column;gap:16px}
.ot-feat{display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.ot-feat .ic{flex:0 0 46px;height:46px;border-radius:11px;display:grid;place-items:center;background:rgba(112,48,160,0.090);background:color-mix(in srgb,var(--berry) 9%,transparent);color:var(--berry)}
.ot-feat b{display:block;font-size:15px;font-weight:800}
.ot-feat span{color:var(--muted);font-size:13px}
@media(max-width:900px){.ot-plat{grid-template-columns:1fr}.ot-faqgrid{grid-template-columns:1fr;gap:22px}.ot-steps .ot-step:not(:last-child)::after{display:none}}
@media(max-width:560px){.ot-shots{grid-template-columns:1fr}.ot-step{min-width:130px}}