/* Plus Jakarta Sans — lokal eingebunden (SIL OFL, siehe fonts/OFL.txt), keine Verbindung zu Google */
@font-face{
  font-family:"Plus Jakarta Sans";
  src:url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
}
/* Farbpaletten. Standard ist „Teal“ (:root); <html data-palette="platin"> schaltet um.
   Die *-rgb-Werte sind dieselben Farben als Kanäle für halbtransparente Töne:
   immer rgba(var(--x-rgb),a) verwenden, keine festen Farbwerte im restlichen CSS. */
:root{
  --bg:#080F0E; --bg-alt:#0C1716; --panel:#111F1D; --panel-2:#162926;
  --line:#1E3330; --line-2:#2A4541;
  --text:#E6EBEA; --text-2:#9FB2AE; --text-3:#6B817D;
  --silver:#D8DEE4; --blue:#3B8BD4; --teal:#2E9E7A; --amber:#C9A227;
  --mint:#3EE0B0; --mint-d:#1BB89A; --cyan:#19B8D2;
  --danger:#D9534F;
  --bg-rgb:8,15,14; --bg-alt-rgb:12,23,22; --panel-rgb:17,31,29; --panel-2-rgb:22,41,38;
  --line-rgb:30,51,48; --text-rgb:230,235,234; --silver-rgb:216,222,228;
  --mint-rgb:62,224,176; --cyan-rgb:25,184,210; --amber-rgb:201,162,39;
  --btn-1:var(--mint); --btn-2:var(--mint-d); --btn-rgb:62,224,176; --on-accent:#04221B;
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.2l2.1 2.1 4.3-4.6' fill='none' stroke='%233EE0B0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --grad:linear-gradient(90deg,var(--mint),var(--cyan));
  --wrap:1180px; --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* Palette „Platin“, an das Logo angelehnt: fast Schwarz mit Blaustich, Globusblau, Platin */
:root[data-palette="platin"]{
  --bg:#05080D; --bg-alt:#090E16; --panel:#0E1520; --panel-2:#141E2D;
  --line:#1A2535; --line-2:#28374C;
  --text:#E8ECF1; --text-2:#A3AEBD; --text-3:#6C788A;
  --silver:#E2E7ED; --blue:#5B9BEA; --teal:#3A78C9; --amber:#C9A227;
  --mint:#6DB3FF; --mint-d:#2F6BD8; --cyan:#3E78F2;
  --bg-rgb:5,8,13; --bg-alt-rgb:9,14,22; --panel-rgb:14,21,32; --panel-2-rgb:20,30,45;
  --line-rgb:26,37,53; --text-rgb:232,236,241; --silver-rgb:226,231,237;
  --mint-rgb:109,179,255; --cyan-rgb:62,120,242; --amber-rgb:201,162,39;
  --btn-1:#F4F6F9; --btn-2:#B9C3CF; --btn-rgb:185,195,207; --on-accent:#0A1322;
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.2l2.1 2.1 4.3-4.6' fill='none' stroke='%236DB3FF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:102px}
body{
  background:var(--bg); color:var(--text);
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sec{padding:110px 0;position:relative}
.sec--alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);font-weight:600;margin-bottom:22px;
}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--mint);opacity:.6;margin-right:9px}

h1,h2,h3,h4{font-weight:600;letter-spacing:-.022em;line-height:1.14;color:var(--silver)}
h1,h2{font-weight:700}
h1{font-size:clamp(2.6rem,4.9vw,4.2rem);line-height:1.06;letter-spacing:-.028em}
h2{font-size:clamp(1.9rem,3.4vw,2.85rem);margin-bottom:20px;letter-spacing:-.03em}
h3{font-size:1.2rem;letter-spacing:-.012em}
.lead{font-size:1.1rem;color:var(--text-2);max-width:62ch}

/* Verlaufstext — ohne background-clip-Unterstützung bleibt er einfarbig mint */
.grad{color:var(--mint)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}

/* ---------- Kopfzeile ---------- */
.top{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(var(--bg-rgb),.72);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.top.scrolled{border-bottom-color:var(--line);background:rgba(var(--bg-rgb),.93)}
.top__in{display:flex;align-items:center;height:88px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:58px;width:auto}
.nav{display:flex;align-items:center;margin-left:auto}
.nav>*+*{margin-left:4px}
.nav a{
  padding:9px 14px;font-size:15px;font-weight:500;color:var(--text-2);border-radius:8px;
  transition:color .2s,background .2s;
}
.nav a:hover{color:var(--text);background:var(--panel)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 26px;border-radius:10px;font-size:15px;font-weight:600;
  border:1px solid transparent;cursor:pointer;transition:all .22s var(--ease);
  font-family:inherit;
}
.btn svg{width:16px;height:16px;margin-left:9px;flex-shrink:0}
.btn--p{
  background:linear-gradient(180deg,var(--btn-1),var(--btn-2));color:var(--on-accent);
  border-color:rgba(var(--btn-rgb),.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 28px -12px rgba(var(--btn-rgb),.6);
}
.nav a.btn--p{color:var(--on-accent)}
.btn--p:hover,.nav a.btn--p:hover{filter:brightness(1.08);transform:translateY(-1px);background:linear-gradient(180deg,var(--btn-1),var(--btn-2))}
.btn--g{border-color:var(--line-2);color:var(--text);background:rgba(var(--panel-rgb),.6)}
.btn--g:hover{border-color:var(--text-3);background:var(--panel)}
.btn--sm{padding:9px 18px;font-size:14px}
.burger{display:none;background:none;border:0;color:var(--text);padding:8px;cursor:pointer}
.burger svg{width:24px;height:24px}

/* ---------- Hero ---------- */
.hero{position:relative;padding:170px 0 110px;overflow:hidden}
.hero__glow{
  position:absolute;top:-320px;right:-260px;width:1000px;height:1000px;
  background:radial-gradient(circle,rgba(var(--mint-rgb),.12),rgba(var(--cyan-rgb),.06) 42%,transparent 68%);
  pointer-events:none;
}
.hero__grid{
  position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;
  background-image:radial-gradient(rgba(var(--text-rgb),.1) 1px,transparent 1.5px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 85% 70% at 50% 35%,#000 25%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 35%,#000 25%,transparent 75%);
}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-gap:60px;gap:60px;align-items:center}
.hero h1{margin-bottom:24px;font-size:clamp(2.3rem,3.9vw,3.4rem);line-height:1.08}
.hero .lead{font-size:1.15rem;margin-bottom:36px;max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;margin-bottom:26px}
.hero__cta>*{margin:0 12px 12px 0}
.hero__checks{list-style:none;display:flex;flex-wrap:wrap;font-size:14.5px;color:var(--text-2)}
.hero__checks li{display:flex;align-items:center;margin:0 22px 10px 0}
.hero__checks li::before{
  content:"";width:18px;height:18px;margin-right:9px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(var(--mint-rgb),.28);
  background:rgba(var(--mint-rgb),.1) var(--check) center/11px no-repeat;
}

/* ---------- Softwareansicht (Hero) ---------- */
/* Nachbau eines Quantower-Screenshots, Werte unverändert. Flächen und Statusfarben auf Wunsch
   an die Seitenpalette angepasst: Kartenblau wie .gcard, aktiv/positiv = Akzentblau,
   inaktiv/Verluste = Platinweiß. Flächen opak, weil das VIP-Panel überlappt. */
.shot{position:relative;padding-left:20px}
.qt{
  --qt-bg:var(--panel); --qt-head:var(--panel-2); --qt-line:var(--line-2);
  --qt-text:#EDEDED; --qt-label:#CACACA; --qt-green:var(--mint); --qt-red:var(--silver); --qt-dot-red:var(--silver); --qt-yellow:#DCC02E;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-gap:14px;gap:14px;align-items:start;
  font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:13px;line-height:1.35;color:var(--qt-text);
}
.qt__panel{background:var(--qt-bg);border:1px solid var(--qt-line);box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.qt__brand{display:flex;justify-content:center;padding:14px 0 10px}
.qt__brand img{height:62px;width:auto}
.qt__title{padding:8px 14px 7px;background:var(--qt-head)}
.qt__title b{display:block;font-size:15.5px;font-weight:700;letter-spacing:.01em}
.qt__title span{display:flex;justify-content:space-between;margin-top:2px;font-size:10px;font-weight:700;color:var(--qt-label)}
.qt__title em{font-style:normal}
.qt__sys{padding:12px 14px 6px;font-size:12.5px;font-weight:700}
.qt__sys p{display:flex;align-items:baseline;margin-bottom:5px}
.qt__sys span{width:88px}
.qt__sys small{margin-left:auto;font-size:12.5px;font-weight:400}
.qt__list{list-style:none;padding:4px 14px 12px}
.qt__list li{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,1fr);align-items:center;height:20px;font-size:12.5px}
.qt__list i{width:8px;height:8px;border-radius:50%}
.qt__list em{font-style:normal;font-weight:700}
.qt__head{padding:10px 14px;background:var(--qt-head);font-size:15.5px;font-weight:700}
.qt__stats{padding:14px 14px 6px}
.qt__stats div{display:flex;align-items:center;height:24px;font-size:12.5px}
.qt__stats dt{width:118px;color:var(--qt-label)}
.qt__stats dd{font-weight:700}
.qt__status{padding:10px 14px 18px;font-size:12.5px;color:var(--qt-label)}
.qt__status b{display:block;font-weight:700}
.qt .g{color:var(--qt-green)} .qt .r{color:var(--qt-red)} .qt .y{color:var(--qt-yellow)}
.qt i.g{background:var(--qt-green)} .qt i.r{background:var(--qt-dot-red)}
/* VIP-Performance: auf breiten Bildschirmen unter „Daily Stats“, leicht über dem OT-Block */
.qt > .qt__panel:first-child{grid-row:1 / span 2}
/* Breite folgt dem Bildschirm (max. 450 px), damit das Panel nie über den Seitenrand ragt */
.qt__perf{position:relative;z-index:1;grid-column:2;grid-row:2;width:min(450px,calc(50vw - 275px));transform:translateX(-92px);font-size:11px;box-shadow:0 30px 80px -20px rgba(0,0,0,.95)}
.qt__perf .qt__head{padding:9px 14px;font-size:14px}
.qt__month{display:flex;align-items:center;justify-content:center;padding-top:10px;font-size:10px;font-weight:700}
.qt__nav{display:inline-flex;align-items:center;justify-content:center;width:26px;height:18px;margin:0 22px;font-size:13px;line-height:1;border:1px solid var(--qt-line);background:var(--qt-head)}
.qt__range{margin-top:5px;text-align:center;font-size:9.5px;color:var(--qt-label)}
.qt__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:10px 10px 0}
.qt__col{padding:0 10px 10px}
.qt__col+.qt__col{border-left:1px solid var(--qt-line)}
.qt__ct{min-height:44px;text-align:center;font-size:9.5px;color:var(--qt-label)}
.qt__ct b{display:block;font-size:11.5px;color:var(--qt-text)}
.qt__ct small{display:block;font-size:9px;font-weight:700}
.qt__col dl div{display:flex;align-items:center;justify-content:space-between;height:19px;font-size:10px}
.qt__col dt{color:var(--qt-label)}
.qt__col dd{font-weight:700}
.qt__est{margin-top:8px;padding-top:8px;border-top:1px solid var(--qt-line);text-align:center;font-size:9px;font-weight:700;color:var(--qt-label)}
.qt__est span{display:block;margin-top:5px;font-size:9.5px;color:var(--qt-text)}
.qt__est b{display:block;margin-top:5px;font-size:13px}
.qt__foot{margin:0 10px;padding:8px 0 10px;border-top:1px solid var(--qt-line);text-align:center;font-size:8.5px;line-height:1.6;color:var(--qt-label)}
.qt__foot p:first-child{font-weight:700;color:var(--qt-text)}
/* Schmale Variante des schwebenden Panels: engere Spalten */
@media(min-width:1340px) and (max-width:1499px){
  .qt__col{padding:0 6px 10px}
  .qt__col dl div{font-size:9.5px}
  .qt__est{font-size:8.5px}
}
/* Unter 1340 px ist rechts kein Platz mehr: volle Breite unter den beiden Panels */
@media(max-width:1339px){
  .qt > .qt__panel:first-child{grid-row:auto}
  .qt__perf{grid-column:1 / -1;grid-row:auto;width:auto;transform:none}
}
@media(max-width:560px){
  .qt__cols{margin:10px 4px 0}
  .qt__col{padding:0 6px 8px}
  .qt__col dl div{flex-wrap:wrap;height:auto;min-height:19px}
}

/* Gemeinsame Bausteine (Dashboard) */
.shot__logo{width:14px;height:14px;border-radius:4px;background:var(--grad)}
.shot__ver{color:var(--text-3)}
.pulse{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--mint);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--mint-rgb),.5)}70%,100%{box-shadow:0 0 0 6px rgba(var(--mint-rgb),0)}}
.chip{
  display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;white-space:nowrap;
  font-size:10.5px;font-weight:600;color:var(--mint);
  border:1px solid rgba(var(--mint-rgb),.3);background:rgba(var(--mint-rgb),.1);
}
.meter{height:5px;margin-top:10px;border-radius:3px;background:var(--line);overflow:hidden}
.meter i{display:block;width:64%;height:100%;border-radius:3px;background:var(--grad)}
.float{
  position:absolute;background:rgba(var(--panel-rgb),.9);backdrop-filter:blur(12px);
  border:1px solid var(--line-2);border-radius:14px;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.9);
  animation:drift 8s var(--ease) infinite alternate;
}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.float__t{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mint)}

/* ---------- Datenfluss / Globus ---------- */
.globe{position:relative;overflow:hidden;padding:40px 0 100px}
.globe__cv{
  position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent);
}
/* Ersatz ohne JavaScript: statischer Kugelrand */
.globe__dome{
  position:absolute;left:50%;top:251px;width:1440px;height:1440px;margin-left:-720px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(var(--mint-rgb),.45);box-shadow:0 0 60px rgba(var(--mint-rgb),.16),inset 0 0 90px rgba(var(--mint-rgb),.06);
}
.js .globe__dome{display:none}
.globe__stage{position:relative;height:340px}
.gcard{
  position:absolute;transform:translateX(-50%);display:flex;align-items:center;white-space:nowrap;
  padding:10px 16px 10px 10px;border-radius:14px;
  background:rgba(var(--panel-rgb),.88);backdrop-filter:blur(10px);border:1px solid var(--line-2);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
}
.gcard__ic{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:34px;margin-right:11px;border-radius:50%;
  border:1px solid rgba(var(--mint-rgb),.3);background:rgba(var(--mint-rgb),.08);color:var(--mint);
  font-size:11px;font-weight:700;letter-spacing:.02em;
}
.gcard__ic svg{width:17px;height:17px}
/* Marken in den Datenfluss-Kärtchen: Oneness, Quantower, dxFeed */
.gcard__ic--logo{border:0;border-radius:0;background:none}
.gcard__ic--logo img{width:auto;height:34px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.gcard__ic--qt{border:0;background:none;color:var(--silver)}
.gcard__ic--qt svg{width:30px;height:30px}
.gcard__t{display:flex;align-items:center;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);line-height:1.3}
.gcard__v{display:flex;align-items:center;margin-top:2px;font-size:13px;font-weight:600;color:var(--mint);line-height:1.4}
.gcard .chip{margin-right:8px;padding:1px 7px;font-size:9px;letter-spacing:.08em}
.spark{display:block;width:38px;height:14px;margin-left:9px;overflow:hidden}
.spark svg{display:block;width:76px;height:14px;animation:spark 3s linear infinite}
@keyframes spark{to{transform:translateX(-38px)}}
.gcard--es{left:14%;top:44%}
.gcard--dx{left:31%;top:14%}
.gcard--ot{left:56%;top:22%}
.gcard--pc{left:83%;top:38%}
.globe__text{position:relative;text-align:center;padding-top:70px}
.globe__text h2{max-width:1040px;margin:0 auto 22px}
.globe__text .lead{margin:0 auto}

/* ---------- Software-Ansicht (Dashboard, Illustration) ---------- */
.dash{position:relative;padding:0 0 120px}
.dash__tags{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;margin:0 auto 110px;font-size:13.5px;color:var(--text-2)}
.dash__tags li{display:flex;align-items:center;margin:5px 11px}
.dash__tags li::before{content:"";width:5px;height:5px;margin-right:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px rgba(var(--mint-rgb),.6)}
.dash__stage{position:relative;max-width:1320px;margin:0 auto;padding:0 24px}
.app{
  position:relative;max-width:1040px;margin:0 auto;font-size:12px;line-height:1.45;color:var(--text-2);
  background:linear-gradient(180deg,rgba(var(--panel-rgb),.97),rgba(var(--bg-alt-rgb),.97));
  border:1px solid var(--line-2);border-radius:20px;overflow:hidden;
  box-shadow:0 0 0 7px rgba(var(--panel-2-rgb),.4),0 60px 120px -40px rgba(0,0,0,.95);
}
.app__bar{display:flex;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
.app__bar>*+*{margin-left:9px}
.app__bar b{font-weight:600;color:var(--silver)}
.app__body{display:grid;grid-template-columns:128px minmax(0,1fr)}
.app__side{padding:14px 10px;border-right:1px solid var(--line)}
.app__side span{display:flex;align-items:center;margin-bottom:2px;padding:8px 10px;border-radius:8px;font-size:11.5px;color:var(--text-3)}
.app__side i{flex-shrink:0;width:13px;height:13px;margin-right:9px;border-radius:4px;border:1.5px solid currentColor;opacity:.75}
.app__side .on{color:var(--mint);background:rgba(var(--mint-rgb),.08)}
/* Chartfläche: Hintergrund = Quantower-Charthintergrund, damit keine Kante sichtbar ist */
.app__main{background:#131E28}
.app__chart{display:block;width:100%;height:auto}
.dash__label{max-width:1040px;margin:14px auto 0;font-size:11px;color:var(--text-3)}
.dfl{width:270px;padding:16px 18px}
.dfl .float__t{margin-bottom:9px}
.dfl p:not(.float__t){font-size:12.5px;line-height:1.55;color:var(--text-2)}
.dfl ul{list-style:none;margin-bottom:10px}
.dfl li{display:flex;align-items:center;padding:3px 0;font-size:12.5px;color:var(--text)}
.dfl li::before{content:"";flex-shrink:0;width:6px;height:6px;margin-right:10px;border-radius:50%;background:var(--mint)}
.dfl strong{display:block;padding-top:10px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--silver)}
/* Links liegen die Karten über der Seitenleiste, rechts über dem Rand ober- und unterhalb des Fensters */
.dfl--data{top:70px;left:0}
.dfl--emo{top:380px;left:0;animation-delay:-2s}
.dfl--log{top:-80px;right:0;animation-delay:-4s}
.dfl--ctl{bottom:-90px;right:0;width:300px;animation-delay:-6s}
/* Handelsmodi: rechts mittig, über dem leeren unteren Chartbereich */
.dfl--mode{top:250px;right:0;width:260px;animation-delay:-3s}
.dfl__modes{margin-bottom:10px}
.dfl__modes div{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.dfl__modes div:first-child{border-top:0}
.dfl__modes b{font-weight:600;color:var(--silver)}
.dfl__modes span{font-weight:600;color:var(--mint);white-space:nowrap}
.dash__note{max-width:780px;margin:130px auto 0;text-align:center;font-size:13px;line-height:1.65;color:var(--text-3)}
.dash__note strong{font-weight:600;color:var(--text-2)}

/* ---------- So arbeitet das System (6 Felder) ---------- */
.feat{overflow:hidden}
.feat::before{
  content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;
  background-image:radial-gradient(rgba(var(--text-rgb),.08) 1px,transparent 1.5px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 20%,transparent 80%);mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 20%,transparent 80%);
}
.feat .wrap{position:relative}
.feat__head{text-align:center}
.pill{
  display:inline-flex;align-items:center;margin-bottom:26px;padding:7px 18px;border-radius:30px;
  border:1px solid rgba(var(--mint-rgb),.35);background:rgba(var(--mint-rgb),.07);
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);
}
.pill::before{content:"";width:6px;height:6px;margin-right:10px;border-radius:50%;border:1.5px solid var(--mint)}
.feat__head h2{max-width:900px;margin:0 auto 24px;font-size:clamp(2rem,3.6vw,3.1rem)}
.feat__head .lead{margin:0 auto 12px;max-width:66ch;font-size:1.05rem}
.feat__claim{margin:22px 0 64px;font-size:14px;font-weight:600;color:var(--silver)}
.feat__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
/* Spalten-Flex: die Etikettzeile sitzt unten, damit sie in jeder Reihe auf einer Linie liegt */
.feat__cell{position:relative;display:flex;flex-direction:column;padding:40px 34px 46px}
.feat__cell:not(:nth-child(3n)){border-right:1px solid var(--line)}
.feat__cell:nth-child(-n+3){border-bottom:1px solid var(--line)}
/* Zeigerschimmer: ein weiches Licht folgt der Maus im Feld, js/main.js setzt --mx und --my */
.feat__cell::before{
  content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle 300px at var(--mx,50%) var(--my,50%),rgba(var(--mint-rgb),.15),rgba(var(--mint-rgb),.05) 45%,rgba(var(--mint-rgb),0) 72%);
  transition:opacity .28s ease;
}
.feat__cell.is-glow::before{opacity:1}
.feat__cell > *{position:relative;z-index:1}
@media(hover:none){.feat__cell::before{display:none}}
@media(prefers-reduced-motion:reduce){.feat__cell::before{display:none}}
/* kleine Kreuze an den inneren Schnittpunkten */
.feat__cell:nth-child(1)::after,.feat__cell:nth-child(2)::after{
  content:"+";position:absolute;right:-5px;bottom:-11px;font-size:15px;line-height:1;color:var(--text-3);
}
.feat__top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:26px}
.feat__ic{width:24px;height:24px;color:var(--silver);opacity:.85}
.feat__no{font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--text-3)}
.feat__cell h3{margin-bottom:14px;font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.feat__cell p{margin-bottom:0;font-size:15px;line-height:1.62;color:var(--text-2)}
.feat__cell .feat__meta{
  display:flex;align-items:center;margin:auto 0 0;padding-top:20px;
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--mint);
}
.feat__meta::before{content:"";flex-shrink:0;width:6px;height:6px;margin-right:10px;border:1.5px solid var(--mint);transform:rotate(45deg)}
@media(max-width:980px){
  .feat__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat__cell,.feat__cell:not(:nth-child(3n)),.feat__cell:nth-child(-n+3){border-right:0;border-bottom:1px solid var(--line)}
  .feat__cell:nth-child(odd){border-right:1px solid var(--line)}
  .feat__cell:nth-last-child(-n+2){border-bottom:0}
  .feat__cell::after{display:none}
  .feat__cell{padding:34px 26px 38px}
}
@media(max-width:760px){
  .feat__grid{grid-template-columns:minmax(0,1fr)}
  .feat__cell:nth-child(odd){border-right:0}
  .feat__cell:nth-last-child(2){border-bottom:1px solid var(--line)}
  .feat__cell{padding:30px 4px 34px}
}

.feat__more{display:flex;justify-content:center;margin-top:56px}

/* ---------- Ablauf-Seite (ablauf.html) ---------- */
.doc{position:relative;overflow:hidden;padding:160px 0 100px}
/* overflow:hidden würde das mitlaufende Inhaltsverzeichnis (sticky) abschalten – clip schneidet nur ab */
@supports (overflow:clip){.doc{overflow:visible;overflow-x:clip}}
.doc__head{position:relative;max-width:900px;margin:0 auto 72px;text-align:center}
.doc__head h1{margin-bottom:18px;font-size:clamp(2.2rem,4.2vw,3.3rem)}
.doc__head .lead{margin:0 auto}
.doc__body{position:relative;display:grid;grid-template-columns:230px minmax(0,1fr);grid-gap:64px;gap:64px;align-items:start}
.doc__toc{position:sticky;top:120px;padding:20px 16px;border:1px solid var(--line);border-radius:var(--r);background:rgba(var(--panel-rgb),.6)}
.doc__toc p{margin:0 0 10px 10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.doc__toc ol{list-style:none}
.doc__toc a{display:flex;align-items:baseline;padding:7px 10px;border-radius:8px;font-size:14px;color:var(--text-2);transition:color .2s,background .2s}
.doc__toc a span{flex-shrink:0;width:28px;font-size:11px;font-weight:600;color:var(--text-3)}
.doc__toc a:hover{color:var(--text)}
.doc__toc a.on{color:var(--mint);background:rgba(var(--mint-rgb),.08)}
.doc__toc a.on span{color:var(--mint)}
.doc__step{padding-bottom:56px;margin-bottom:56px;border-bottom:1px solid var(--line);scroll-margin-top:110px}
.doc__no{display:block;margin-bottom:12px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.doc__step h2{margin-bottom:18px;font-size:clamp(1.6rem,2.6vw,2.2rem)}
.doc__step p{max-width:70ch;margin-bottom:14px;color:var(--text-2)}
.doc__list{list-style:none;margin:6px 0 16px}
.doc__list li{position:relative;padding:9px 0 9px 26px;color:var(--text-2);border-bottom:1px solid rgba(var(--line-rgb),.6)}
.doc__list li:last-child{border-bottom:0}
.doc__list li::before{content:"";position:absolute;left:2px;top:18px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--mint)}
.doc__list b,.doc__steps b{font-weight:600;color:var(--silver)}
.doc__steps{list-style:none;counter-reset:step;margin:6px 0 18px}
.doc__steps li{position:relative;padding:14px 0 14px 54px;color:var(--text-2);counter-increment:step}
.doc__steps b{display:block;margin-bottom:2px}
.doc__steps li::before{
  content:counter(step);position:absolute;z-index:1;left:0;top:14px;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(var(--mint-rgb),.35);background:var(--bg);font-size:13px;font-weight:600;color:var(--mint);
}
/* Verbindungslinie zwischen den Schritten */
.doc__steps li::after{content:"";position:absolute;left:17px;top:48px;bottom:-14px;width:1px;background:var(--line-2)}
.doc__steps li:last-child::after{display:none}
.doc__step .doc__note{margin-top:12px;padding:16px 20px;border-left:2px solid var(--mint);border-radius:0 10px 10px 0;background:rgba(var(--mint-rgb),.05);font-size:15px}
.doc__modes{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;gap:14px;margin:6px 0 22px}
.doc__mode{padding:20px 22px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel)}
.doc__mode b{display:block;margin-bottom:4px;font-size:1.05rem;font-weight:600;color:var(--silver)}
.doc__mode span{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--mint)}
.doc__step .doc__risk{margin-top:12px;padding:18px 22px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);font-size:14.5px}
.doc__risk strong{font-weight:600;color:var(--silver)}
.doc__note a,.doc__step > p a{color:var(--mint);text-decoration:underline}
.doc__note b{font-weight:600;color:var(--silver)}
.doc__step h3{margin:38px 0 12px;font-size:1.3rem;font-weight:700}
.doc__step .doc__mode p{margin:6px 0 0;font-size:14.5px;line-height:1.55}
.doc__cta{padding:44px 40px;text-align:center;border:1px solid var(--line-2);border-radius:20px;background:linear-gradient(180deg,rgba(var(--panel-rgb),.9),rgba(var(--bg-alt-rgb),.9))}
.doc__cta h3{margin-bottom:10px;font-size:1.6rem;font-weight:700}
.doc__cta p{max-width:52ch;margin:0 auto 24px;color:var(--text-2)}
.doc__btns{display:flex;flex-wrap:wrap;justify-content:center}
.doc__btns>*{margin:6px}
@media(max-width:980px){
  .doc__body{grid-template-columns:minmax(0,1fr);grid-gap:36px;gap:36px}
  .doc__toc{position:static}
}
@media(max-width:760px){
  .doc{padding:120px 0 70px}
  .doc__head{margin-bottom:44px}
  .doc__toc ol{display:grid;grid-template-columns:1fr 1fr}
  .doc__modes{grid-template-columns:1fr}
  .doc__step{padding-bottom:40px;margin-bottom:40px}
  .doc__cta{padding:30px 20px}
}

/* ---------- Zigarre (privater Zugang in der Fußzeile) ---------- */
.foot__socials{display:flex;margin-top:20px}
.foot__socials .foot__social{margin-top:0}
.foot__socials>*+*{margin-left:10px}
.foot__cigar{position:relative;background:none;cursor:pointer;font:inherit;opacity:.6;transition:opacity .2s,color .2s,border-color .2s}
.foot__cigar:hover,.foot__cigar:focus-visible{opacity:1;color:var(--silver);border-color:var(--text-3)}
/* Dreifach-Klick: kein Doppeltipp-Zoom auf dem Handy, jeder Klick gibt einen Rauchstoß */
.foot__cigar{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.foot__cigar.is-puff .cigar__smoke i{animation:smoke 1.2s ease-out 1}
.foot__cigar.is-puff .cigar__smoke i:nth-child(2){animation-delay:.15s}
.foot__cigar.is-puff .cigar__smoke i:nth-child(3){animation-delay:.3s}
.foot__cigar .ember,.pin__icon .ember,.sunum__cigar .ember{transition:stroke .3s}
.foot__cigar:hover .ember,.foot__cigar:focus-visible .ember,.pin__icon .ember,.sunum__cigar .ember{stroke:var(--amber)}
/* Rauch: steigt aus der Glut auf */
.cigar__smoke{position:absolute;left:26px;top:18px;width:0;height:0;pointer-events:none}
.cigar__smoke i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:rgba(var(--text-rgb),.55);filter:blur(2px);opacity:0}
.foot__cigar:hover .cigar__smoke i,.foot__cigar:focus-visible .cigar__smoke i,.pin__icon .cigar__smoke i{animation:smoke 1.8s ease-out infinite}
.cigar__smoke i:nth-child(2){animation-delay:.6s}
.cigar__smoke i:nth-child(3){animation-delay:1.2s}
@keyframes smoke{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.85}100%{opacity:0;transform:translate(7px,-28px) scale(2.4)}}
@keyframes smokeBig{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.7}100%{opacity:0;transform:translate(16px,-90px) scale(3.2)}}

/* Code-Fenster */
.pin{position:fixed;top:0;left:0;right:0;bottom:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(var(--bg-rgb),.82);backdrop-filter:blur(10px);animation:pinIn .35s var(--ease)}
.pin__box{
  position:relative;width:100%;max-width:420px;padding:44px 32px 30px;text-align:center;
  border:1px solid var(--line-2);border-radius:22px;
  background:linear-gradient(180deg,rgba(var(--panel-rgb),.97),rgba(var(--bg-alt-rgb),.97));
  box-shadow:0 40px 100px -30px rgba(0,0,0,.95);
}
.pin__x{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;border-radius:8px;background:none;color:var(--text-3);font-size:26px;line-height:1;cursor:pointer}
.pin__x:hover{color:var(--silver)}
.pin__icon{position:relative;width:56px;height:56px;margin:0 auto 18px;color:var(--silver)}
.pin__icon svg{width:56px;height:56px}
.pin__icon .cigar__smoke{left:48px;top:26px}
.pin__icon .cigar__smoke i{width:9px;height:9px;left:-4px;top:-4px;filter:blur(3px)}
.pin__t{margin-bottom:6px;font-size:1.3rem;font-weight:700;letter-spacing:-.01em;color:var(--silver)}
.pin__s{margin-bottom:24px;font-size:14px;color:var(--text-3)}
.pin__fields{display:flex;justify-content:center}
.pin__fields input{
  width:48px;height:62px;margin:0 4px;text-align:center;font-family:inherit;font-size:26px;font-weight:700;text-transform:uppercase;
  color:var(--silver);background:var(--bg);border:1px solid var(--line-2);border-radius:12px;caret-color:var(--mint);
  transition:border-color .2s,box-shadow .2s,color .2s;
}
.pin__fields input:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(var(--mint-rgb),.15)}
.pin__box.is-wrong .pin__fields{animation:shake .4s}
.pin__box.is-ok .pin__fields input{border-color:var(--mint);color:var(--mint)}
.pin__msg{min-height:22px;margin-top:16px;font-size:14px;color:var(--text-2)}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes pinIn{from{opacity:0}to{opacity:1}}
/* hidden muss display:flex schlagen, sonst lässt sich das Fenster nicht schließen */
.pin[hidden]{display:none}
@media(max-width:440px){.pin__box{padding:40px 18px 26px}.pin__fields input{width:40px;height:54px;margin:0 3px;font-size:22px}}

/* ---------- Private Präsentation (sunum.html) ---------- */
/* Kein fester Seitenkopf in der Präsentation: Folien exakt am oberen Rand ausrichten */
html:has(.sunum){scroll-snap-type:y mandatory;scroll-padding-top:0}
.sunum__slide{
  position:relative;overflow:hidden;min-height:100vh;min-height:100svh;padding:80px 24px;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.sunum__slide+.sunum__slide{border-top:1px solid var(--line)}
/* .s-mind__breath und .s-curve sind Dekoration und müssen absolut bleiben,
   sonst strecken sie die Folie in die Höhe */
.sunum__slide>*:not(.hero__grid):not(.hero__glow):not(.s-mind__breath):not(.s-curve){position:relative}
.sunum h1{max-width:16ch;margin:0 auto 20px}
.sunum h2{max-width:22ch}
.sunum .lead{margin:0 auto 30px}
.sunum__cigar{position:relative;width:96px;height:96px;margin-bottom:26px;color:var(--silver)}
.sunum__cigar svg{width:96px;height:96px}
.sunum__cigar .cigar__smoke{left:82px;top:44px}
.sunum__cigar .cigar__smoke i{width:14px;height:14px;left:-7px;top:-7px;filter:blur(5px);animation:smokeBig 3s ease-out infinite}
.sunum__cigar .cigar__smoke i:nth-child(2){animation-delay:1s}
.sunum__cigar .cigar__smoke i:nth-child(3){animation-delay:2s}
.sunum__hint{position:absolute !important;bottom:32px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}

/* Folien: Inhalte erscheinen, sobald eine Folie in die Bildmitte kommt (Klasse .is-in) */
.js .sunum__slide [data-anim]{opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0) * 120ms)}
.js .sunum__slide [data-anim="up"]{transform:translateY(40px)}
.js .sunum__slide [data-anim="left"]{transform:translateX(-90px)}
.js .sunum__slide [data-anim="right"]{transform:translateX(90px)}
.js .sunum__slide [data-anim="zoom"]{transform:scale(.85)}
.js .sunum__slide.is-in [data-anim]{opacity:1;transform:none}
.sunum__bar{position:fixed;top:0;left:0;right:0;z-index:50;height:3px;background:rgba(var(--line-rgb),.7)}
.sunum__bar i{display:block;width:0;height:100%;background:var(--grad);transition:width .5s var(--ease)}
.sunum__count{position:fixed;right:28px;bottom:22px;z-index:50;font-size:13px;letter-spacing:.08em;color:var(--text-3)}
.sunum__count b{font-weight:600;color:var(--silver)}
.sunum__dots{position:fixed;right:22px;top:50%;z-index:50;display:flex;flex-direction:column;transform:translateY(-50%)}
.sunum__dots button{width:10px;height:10px;margin:6px 0;padding:0;border-radius:50%;border:1px solid var(--line-2);background:transparent;cursor:pointer;transition:background .3s,border-color .3s}
.sunum__dots button.on{background:var(--mint);border-color:var(--mint)}
.s-no{margin-bottom:16px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.s-time{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:16px;gap:16px;width:100%;max-width:1040px;margin-top:40px;list-style:none;text-align:left}
.s-time--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px}
.s-time li{padding:22px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.s-time li>b{display:block;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--mint)}
.s-time li>span{display:block;margin:6px 0 4px;font-weight:600;color:var(--silver)}
.s-time small{display:block;font-size:14px;line-height:1.5;color:var(--text-2)}
.s-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:16px;gap:16px;width:100%;max-width:1040px;margin-top:40px;text-align:left}
.s-flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:30px}
.s-flow span{margin:6px 0;padding:14px 22px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel);font-weight:600;color:var(--silver)}
.s-flow i{margin:0 14px;font-style:normal;font-size:1.4rem;color:var(--mint)}
.s-shot{width:100%;max-width:900px;margin-top:34px;overflow:hidden;border:1px solid var(--line-2);border-radius:18px;background:#131E28;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.s-shot img{width:100%;height:auto}
.s-note{margin-top:18px;font-size:14px;color:var(--text-3)}
@media(max-width:980px){
  .s-time,.s-time--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-cards{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  html:has(.sunum){scroll-snap-type:y proximity}
  .sunum__dots{display:none}
  .s-time,.s-time--3{grid-template-columns:minmax(0,1fr)}
  .s-flow i{transform:rotate(90deg);flex-basis:100%;margin:2px 0}
}

/* Sunum: Folie mit Globus und Kod-Architektur */
.sunum__slide--globe{justify-content:flex-start;padding-top:70px}
/* Auf hohen Fenstern mittig: der Inhalt ist rund 620px hoch, oben blieben sonst nur 71px,
   unten bis zu 553px Luft. Auf niedrigen Fenstern bleibt es oben, sonst rutscht der Titel
   aus dem Bild, weil die Folie nicht scrollt. */
@media(min-height:830px){.sunum__slide--globe{justify-content:center;padding-top:80px}}
.globe--slide{width:100%;max-width:1180px;padding:0 0 150px;margin-bottom:-120px}
.globe--slide .globe__stage{height:300px}
/* In der Sunum-Folie sitzen die Kärtchen größer, also auch die Marken */
.globe--slide .gcard__ic--logo{width:40px;height:40px}
.globe--slide .gcard__ic--logo img{height:40px}
.globe--slide .gcard__ic--qt svg{width:34px;height:34px}
.s-arch{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:14px;gap:14px;width:100%;max-width:1100px;list-style:none;text-align:left}
.s-arch li{padding:18px;border:1px solid var(--line-2);border-radius:var(--r);background:rgba(var(--panel-rgb),.92);backdrop-filter:blur(8px)}
.s-arch b{display:block;margin-bottom:6px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.s-arch span{display:block;margin-bottom:6px;font-weight:600;color:var(--silver)}
.s-arch small{display:block;font-size:13.5px;line-height:1.55;color:var(--text-2)}
@media(max-width:980px){.s-arch{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.s-arch{grid-template-columns:minmax(0,1fr)}.globe--slide{margin-bottom:-60px}}

/* Sunum: Folien zur Entscheidungsmechanik (15 Regelwerke) */
/* Elf Balken für die Entscheidungsregelwerke, vier ruhigere für Tagesverwaltung und Risiko */
.s-rules{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;grid-gap:10px;gap:10px;margin:6px 0 20px}
.s-rules i{width:26px;height:36px;border-radius:7px;background:linear-gradient(180deg,rgba(var(--mint-rgb),.9),rgba(var(--mint-rgb),.22));box-shadow:0 10px 24px -12px rgba(var(--mint-rgb),.9)}
.s-rules i:nth-child(n+12){height:28px;background:var(--panel-2);border:1px solid var(--line-2);box-shadow:none}
.js .sunum__slide .s-rules i{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--n,0) * 70ms + 450ms)}
.js .sunum__slide.is-in .s-rules i{opacity:1;transform:none}
.s-rules__note{font-size:14px;color:var(--text-3)}
/* Etwas breitere Überschrift, damit „tek bir işlem kararı“ nicht mit einem Wort umbricht */
.sunum h2.s-h-wide{max-width:30ch}

.s-checks{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:10px;gap:10px;width:100%;max-width:1150px;margin-top:20px;list-style:none;text-align:left}
.s-checks li{position:relative;padding:14px 30px 14px 16px;border:1px solid var(--line-2);border-radius:var(--r);background:rgba(var(--panel-rgb),.92)}
.s-checks b{display:block;margin-bottom:7px;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--mint)}
.s-checks h3{margin-bottom:5px;font-size:.98rem;font-weight:600;letter-spacing:-.01em;color:var(--silver)}
.s-checks p{margin:0;font-size:12.5px;line-height:1.45;color:var(--text-2)}
/* Die letzten zwei Regeln stehen außen: eine links, eine rechts, Mitte bleibt frei */
.s-checks li:nth-child(10){grid-column:1}
.s-checks li:nth-child(11){grid-column:3}

/* Sunum 04: ein Lichtstreifen wandert über die Karten, Reihe für Reihe leuchten sie auf,
   am Ende glühen alle gemeinsam. Takt: 8 Sekunden, eine Reihe alle 0,9 Sekunden. */
.s-checks::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--mint-rgb),0),rgba(var(--mint-rgb),.7),rgba(var(--mint-rgb),0));
  box-shadow:0 0 18px rgba(var(--mint-rgb),.55);
}
.s-checks li::after{content:"";position:absolute;right:13px;top:16px;width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.is-in .s-checks::before{animation:scanBeam 8s linear infinite}
.is-in .s-checks li{animation:cardHit 8s linear infinite,cardAll 8s linear infinite;animation-delay:calc(var(--r,0) * .9s),0s}
.is-in .s-checks li::after{animation:dotHit 8s linear infinite;animation-delay:calc(var(--r,0) * .9s)}
@keyframes scanBeam{
  0%{top:0;opacity:0}
  3%{opacity:.9}
  40%{opacity:.9}
  45%{top:100%;opacity:0}
  100%{top:100%;opacity:0}
}
@keyframes cardHit{
  0%,1%{border-color:var(--line-2);background:rgba(var(--panel-rgb),.92)}
  4%{border-color:rgba(var(--mint-rgb),.55);background:rgba(var(--mint-rgb),.07)}
  12%{border-color:rgba(var(--mint-rgb),.4);background:rgba(var(--mint-rgb),.04)}
  18%,100%{border-color:var(--line-2);background:rgba(var(--panel-rgb),.92)}
}
@keyframes cardAll{
  0%,44%{box-shadow:none}
  48%,58%{box-shadow:0 0 0 1px rgba(var(--mint-rgb),.35),0 20px 44px -24px rgba(var(--mint-rgb),.85)}
  66%,100%{box-shadow:none}
}
@keyframes dotHit{
  0%,2%{background:var(--line-2);box-shadow:none}
  5%,14%{background:var(--mint);box-shadow:0 0 10px rgba(var(--mint-rgb),.9)}
  16%,66%{background:var(--mint);box-shadow:0 0 6px rgba(var(--mint-rgb),.55)}
  72%,100%{background:var(--line-2);box-shadow:none}
}
/* Zähler unter dem Raster: 03, 06, 09, 11 von 11, dann die Schlusszeile */
.s-scan__count{position:relative;width:100%;height:18px;margin-top:16px}
.s-scan__count i,.s-scan__count b{
  position:absolute;left:50%;top:0;transform:translateX(-50%);opacity:0;white-space:nowrap;
  font-size:11px;font-style:normal;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
}
.s-scan__count b{color:var(--mint)}
.is-in .s-scan__count i{animation:countStep 8s linear infinite;animation-delay:calc(var(--s,0) * .9s + .8s)}
.is-in .s-scan__count b{animation:countAll 8s linear infinite}
@keyframes countStep{0%{opacity:0}2%{opacity:1}11%{opacity:1}13%{opacity:0}100%{opacity:0}}
@keyframes countAll{0%,57%{opacity:0}59%{opacity:1}72%{opacity:1}75%{opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .is-in .s-checks::before,.is-in .s-checks li,.is-in .s-checks li::after,
  .is-in .s-scan__count i,.is-in .s-scan__count b{animation:none}
  .s-scan__count{display:none}
}

.s-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:18px;gap:18px;width:100%;max-width:1000px;margin-top:22px;text-align:left}
.s-two > div{padding:24px;border:1px solid var(--line-2);border-radius:var(--r);background:rgba(var(--panel-rgb),.92)}
.s-two h3{margin-bottom:16px;font-size:1.05rem;font-weight:600;color:var(--silver)}
.s-two ul{list-style:none}
.s-two li{position:relative;margin-bottom:11px;padding-left:26px;font-size:14px;line-height:1.5;color:var(--text-2)}
.s-two li:last-child{margin-bottom:0}
.s-two li::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:2px;transform:rotate(45deg)}
.s-two--stop li::before{border:1.5px solid var(--silver)}
.s-two--go li::before{border:1.5px solid var(--mint)}

/* Sunum 05: Oneness Server als Knoten, von dem Befehle nach links und rechts fließen.
   Die Leitungen sind 760px breit gezeichnet, darum wandern die Etiketten um feste 320px;
   unter 980px werden Leitungen und Etiketten ausgeblendet, dort stehen die Spalten ohnehin untereinander. */
.s-hub{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:24px}
.s-hub__node{display:inline-flex;align-items:center;padding:9px 16px 9px 10px;border:1px solid var(--line-2);border-radius:14px;background:rgba(var(--panel-rgb),.94);box-shadow:0 18px 40px -18px rgba(0,0,0,.9)}
.s-hub__node img{width:auto;height:30px;margin-right:10px}
.s-hub__node b{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}
.s-hub__node i{width:7px;height:7px;margin-left:12px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px rgba(var(--mint-rgb),.9)}
.s-hub__wires{position:relative;width:760px;max-width:100%;height:86px}
.s-hub__wires svg{display:block;width:100%;height:100%}
.s-hub__wires path{fill:none;stroke:rgba(var(--mint-rgb),.4);stroke-width:1.4;stroke-dasharray:4 7}
.s-hub__pkt{
  position:absolute;left:50%;top:2px;padding:5px 10px;border:1px solid var(--line-2);border-radius:8px;
  background:rgba(var(--panel-rgb),.96);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2);white-space:nowrap;opacity:0;transform:translate(-50%,0);
}
.s-hub__pkt--go{border-color:rgba(var(--mint-rgb),.45);color:var(--mint)}
.s-hub__pkt--stop{color:var(--silver)}
.is-in .s-hub__wires path{animation:hubFlow 1.6s linear infinite}
.is-in .s-hub__pkt--stop{animation:hubLinks 8.4s linear infinite;animation-delay:calc(var(--i,0) * 1.4s + .5s)}
.is-in .s-hub__pkt--go{animation:hubRechts 8.4s linear infinite;animation-delay:calc(var(--i,0) * 1.4s + .5s)}
@keyframes hubFlow{to{stroke-dashoffset:-44}}
@keyframes hubLinks{
  0%{opacity:0;transform:translate(-50%,0)}
  4%{opacity:1}
  26%{opacity:1}
  33%{opacity:0;transform:translate(calc(-50% - 320px),78px)}
  100%{opacity:0;transform:translate(calc(-50% - 320px),78px)}
}
@keyframes hubRechts{
  0%{opacity:0;transform:translate(-50%,0)}
  4%{opacity:1}
  26%{opacity:1}
  33%{opacity:0;transform:translate(calc(-50% + 320px),78px)}
  100%{opacity:0;transform:translate(calc(-50% + 320px),78px)}
}
@media(prefers-reduced-motion:reduce){
  .is-in .s-hub__wires path,.is-in .s-hub__pkt--stop,.is-in .s-hub__pkt--go{animation:none}
  .s-hub__pkt{display:none}
}
@media(max-width:980px){.s-hub__wires{display:none}}
@media(max-height:760px){.s-hub{display:none}}

.s-claim{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;grid-gap:12px;gap:12px;margin-top:30px}
.s-claim span{padding:16px 26px;border:1px solid var(--line-2);border-radius:14px;background:var(--panel);font-size:1.05rem;font-weight:600;color:var(--silver)}
.s-claim span:nth-child(2){border-color:rgba(var(--mint-rgb),.45);color:var(--mint)}
@media(max-width:980px){
  .s-checks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-checks li:nth-child(10),.s-checks li:nth-child(11){grid-column:auto}
  .s-two{grid-template-columns:minmax(0,1fr)}
}
/* Vier Reihen brauchen mehr Platz als drei, darum weniger Luft oben und unten */
.sunum__slide--dense{padding-top:48px;padding-bottom:48px}

/* Sunum: Hintergrund der Ergebnis-Einstiegsfolie. Die zwei Kurven sind die echten
   aufsummierten R-Werte aus den Tabellen, kein geschmücktes Bild. Sie zeichnen sich
   selbst, sobald die Folie in der Bildmitte steht, und starten bei jeder Rückkehr neu. */
.s-curve{position:absolute;left:0;right:0;bottom:6%;height:48%;pointer-events:none;opacity:0}
.s-curve svg{display:block;width:100%;height:100%}
.s-curve path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.s-curve .cv-flaeche{stroke:none;fill:url(#cvGrad);opacity:0}
.s-curve .cv-sabah{stroke:rgba(var(--line-rgb),1);stroke-dasharray:1;stroke-dashoffset:1}
.s-curve .cv-gece{stroke:rgba(var(--mint-rgb),.5);stroke-dasharray:1;stroke-dashoffset:1}
.is-in .s-curve{animation:curveGanz 1.4s var(--ease) .3s forwards}
.is-in .s-curve .cv-sabah{animation:curveZeichnen 7s var(--ease) .6s forwards}
.is-in .s-curve .cv-gece{animation:curveZeichnen 7s var(--ease) 1.2s forwards}
.is-in .s-curve .cv-flaeche{animation:curveFlaeche 3s var(--ease) 4.5s forwards}
@keyframes curveGanz{to{opacity:1}}
@keyframes curveZeichnen{to{stroke-dashoffset:0}}
@keyframes curveFlaeche{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .s-curve{opacity:1}
  .s-curve .cv-sabah,.s-curve .cv-gece{stroke-dashoffset:0}
  .s-curve .cv-flaeche{opacity:1}
  .is-in .s-curve,.is-in .s-curve path{animation:none}
}

/* Sunum: Handelstagebuch. Gewinn grün, Verlust rot (ausdrücklicher Wunsch des Nutzers;
   diese beiden Farben gelten nur in dieser Tabelle, die Website bleibt bei der Palette). */
.s-log__box{
  --win:#3FBF87;--loss:#E0574F;
  width:100%;max-width:1120px;margin-top:12px;padding:8px 14px 10px;
  border:1px solid var(--line-2);border-radius:16px;background:rgba(var(--panel-rgb),.92);
}
/* Eng gesetzt, damit auch der längste Monat (Temmuz, 23 Zeilen) auf einen 900px hohen
   Bildschirm passt. Die Folie scrollt nicht, alles muss also in eine Bildhöhe. */
.s-log{width:100%;border-collapse:collapse;font-size:12px;text-align:left}
.s-log th,.s-log td{padding:2px 9px;white-space:nowrap}
.s-log thead th{
  padding-bottom:7px;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);border-bottom:1px solid var(--line-2);
}
.s-log thead tr:first-child th{font-size:10px;color:var(--mint);text-align:center;border-bottom:0;padding-bottom:3px}
.s-log tbody td{border-bottom:1px solid rgba(var(--line-rgb),.55);color:var(--text-2)}
.s-log tbody tr:last-child td{border-bottom:0}
.s-log .tag{color:var(--silver);font-weight:600}
.s-log .mod{border-left:1px solid var(--line-2)}
.s-log .num{text-align:right;font-variant-numeric:tabular-nums}
.s-log .win{color:var(--win);font-weight:600}
.s-log .loss{color:var(--loss);font-weight:600}
.s-log .flat{color:var(--text-3)}
.s-log .bal{color:var(--silver)}
.s-log__note{margin-top:12px;font-size:12px;line-height:1.5;color:var(--text-3)}
/* Zweite Lesart: was wäre es, wenn jeder Monat wieder bei 500.000 $ beginnen würde.
   Steht bewusst getrennt, damit die beiden Prozentzahlen nicht verwechselt werden. */
.s-log__fix{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;grid-gap:10px;gap:10px;
  margin-top:7px;padding:5px 14px;border:1px solid rgba(var(--mint-rgb),.3);border-radius:11px;
  background:rgba(var(--mint-rgb),.06);font-size:11.5px;color:var(--text-2);
}
.s-log__fix b{font-weight:700;color:var(--silver)}
.s-log__fix .plus b{color:var(--win,#3FBF87)}
.s-log__fix .minus b{color:var(--loss,#E0574F)}
/* Monatsstreifen unter der Tabelle: die Kennzahlen dieses Monats und rechts daneben
   seine eigene kleine Kurve (aufsummierte R-Werte nur aus diesem Monat). */
.s-log__sum{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;grid-gap:8px;gap:8px;margin-top:10px;
}
.s-log__sum span{
  padding:6px 13px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel);
  font-size:11.5px;font-weight:600;color:var(--text-2);white-space:nowrap;
}
.s-log__sum b{color:var(--silver)}
.s-log__sum .plus b{color:var(--win,#3FBF87)}
.s-log__sum .minus b{color:var(--loss,#E0574F)}
.s-spark2{
  width:172px;height:34px;padding:5px 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel);
}
/* Die dunkle Linienfarbe war im Kästchen praktisch unsichtbar, darum heller und dicker */
.s-spark2 path{fill:none;stroke-width:1.7;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.s-spark2 .sp-sabah{stroke:var(--text-3)}
.s-spark2 .sp-gece{stroke:rgba(var(--mint-rgb),.9)}
/* Die Monatskurve zeichnet sich in gut zwei Sekunden, bleibt rund drei Sekunden stehen
   und beginnt dann von vorne (Wunsch des Nutzers: sie soll immer wieder zurückspulen). */
.is-in .s-spark2 path{stroke-dasharray:1;stroke-dashoffset:1;animation:sparkLoop 6s var(--ease) .9s infinite}
@keyframes sparkLoop{
  0%{stroke-dashoffset:1}
  45%,92%{stroke-dashoffset:0}
  93%,100%{stroke-dashoffset:1}
}
@media(prefers-reduced-motion:reduce){.is-in .s-spark2 path{animation:none;stroke-dashoffset:0}}
.sunum__slide--log h2{font-size:clamp(1.3rem,2vw,1.7rem);max-width:30ch;margin-bottom:0}
.sunum__slide--log{padding-top:22px;padding-bottom:22px}
.sunum__slide--log .s-no{margin-bottom:10px}
.sunum__slide--log .s-log__note{margin-top:8px}
@media(max-width:980px){.s-log{font-size:11px}.s-log th,.s-log td{padding:3px 6px}}
/* Große Bildschirme: alles eine Stufe größer, damit die Tabelle im Vortrag von weitem
   lesbar ist. Auf 900px hohen Fenstern bleibt es eng gesetzt, dort passt Temmuz sonst nicht. */
@media(min-height:1000px){
  .s-log{font-size:13.5px}
  /* Zeilenhöhe bewusst knapp: Temmuz hat 23 Zeilen und lief hier sonst bis 27px an den Rand */
  .s-log th,.s-log td{padding:2px 11px}
  .s-log thead th{font-size:10.5px}
  .s-log thead tr:first-child th{font-size:11px}
  .s-log__box{max-width:1240px;padding:10px 18px 12px}
  .s-log__sum span{font-size:12.5px;padding:7px 15px}
  .s-log__fix{font-size:12.5px;padding:7px 16px}
  .s-log__note{font-size:13px}
  .s-spark2{width:190px;height:38px}
  .sunum__slide--log h2{font-size:clamp(1.6rem,2.3vw,2rem)}
  .sunum__slide--log{padding-top:34px;padding-bottom:34px}
}
@media(min-height:1200px){
  .s-log{font-size:15px}
  .s-log th,.s-log td{padding:3px 13px}
  .s-log thead th{font-size:11.5px}
  .s-log thead tr:first-child th{font-size:12px}
  .s-log__box{max-width:1300px}
  .s-log__sum span{font-size:13.5px;padding:8px 17px}
  .s-log__fix{font-size:13.5px;padding:8px 18px}
  .s-log__note{font-size:14px}
  .s-spark2{width:210px;height:42px}
  .sunum__slide--log h2{font-size:clamp(1.8rem,2.6vw,2.3rem)}
}

/* Sunum: Van Gogh Folie. Das Bild ist gemeinfrei (Vincent van Gogh, Selbstbildnis 1889),
   geladen von Wikimedia Commons. Es blendet langsam auf, darüber liegt ein Farbschleier
   in unserer Palette, damit es nicht aus der Folie fällt. */
.s-art{
  position:relative;flex-shrink:0;width:clamp(210px,24vh,330px);aspect-ratio:1280 / 1618;
  overflow:hidden;border:1px solid var(--line-2);border-radius:18px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95);opacity:0;
}
.s-art img{display:block;width:100%;height:100%;object-fit:cover}
.s-art::after{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background:linear-gradient(180deg,rgba(var(--bg-rgb),.15),rgba(var(--bg-rgb),.55));
  mix-blend-mode:multiply;
}
.is-in .s-art{animation:artAuf 3.4s var(--ease) .3s forwards}
@keyframes artAuf{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.s-vg{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;grid-gap:clamp(24px,4vw,56px);gap:clamp(24px,4vw,56px);width:100%;max-width:1060px}
.s-vg__text{flex:1 1 420px;max-width:620px;text-align:left}
.s-quote{
  margin:0 0 18px;font-size:clamp(1.5rem,3vw,2.5rem);font-weight:700;line-height:1.25;
  letter-spacing:-.02em;color:var(--silver);
}
.s-quote span{display:block;color:var(--mint)}
.s-quote__wer{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}

/* Sunum: Schirmfolie. Der Schirm und die drei Figuren sind gezeichnet, der Regen fällt
   in einer Schleife. Alles absolut gesetzt, damit die Folie nicht wächst. */
.s-umb{width:clamp(280px,38vh,460px);margin:6px auto 0}
.s-umb svg{display:block;width:100%;height:auto;overflow:visible}
.s-umb .dach{fill:rgba(var(--mint-rgb),.16);stroke:var(--mint);stroke-width:2}
.s-umb .stiel{stroke:var(--silver);stroke-width:2.4;fill:none;stroke-linecap:round}
.s-umb .kopf{fill:var(--silver)}
.s-umb .koerper{fill:none;stroke:var(--silver);stroke-width:2.6;stroke-linecap:round}
.s-umb .mitte .kopf{fill:var(--mint)}
.s-umb .mitte .koerper{stroke:var(--mint)}
.s-umb .name{font-size:11px;font-weight:600;letter-spacing:.06em;fill:var(--text-3)}
.s-umb .mitte .name{fill:var(--mint)}
.s-umb .regen line{stroke:rgba(var(--mint-rgb),.5);stroke-width:1.6;stroke-linecap:round}
.is-in .s-umb .regen line{animation:regenFall 1.6s linear infinite}
@keyframes regenFall{
  0%{transform:translateY(-18px);opacity:0}
  15%,70%{opacity:1}
  100%{transform:translateY(26px);opacity:0}
}
.s-ask{max-width:760px;margin:0 auto;font-size:clamp(.98rem,1.5vw,1.12rem);line-height:1.65;color:var(--text-2)}
.s-ask b{color:var(--silver)}
@media(prefers-reduced-motion:reduce){
  .is-in .s-art{animation:none;opacity:1}
  .is-in .s-umb .regen line{animation:none}
}

/* Sunum: Folien mit echter Bildschirmaufnahme. Das Video lädt erst, wenn die Folie
   erreicht wird (preload="none"), läuft stumm in der Schleife und hält beim Verlassen an. */
.s-video{
  width:100%;max-width:980px;margin-top:20px;overflow:hidden;
  border:1px solid var(--line-2);border-radius:18px;background:#080D13;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
}
.s-video video{display:block;width:100%;height:auto;max-height:54vh;object-fit:contain;background:#000}
.s-video__note{margin-top:14px;font-size:13px;color:var(--text-3)}

/* Sunum 06: die Gefühlsfolie. Links die Last, die abgegeben wird, rechts die Ruhe,
   die bleibt. Der Ablauf läuft einmal durch, sobald die Folie in der Mitte steht. */
.s-mind__breath{
  position:absolute;left:50%;top:50%;width:860px;height:860px;pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;
  background:radial-gradient(circle,rgba(var(--mint-rgb),.12),rgba(var(--mint-rgb),0) 62%);
}
.is-in .s-mind__breath{animation:mindBreath 9s ease-in-out infinite}
@keyframes mindBreath{
  0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(.9)}
  50%{opacity:.7;transform:translate(-50%,-50%) scale(1.06)}
}
.s-mind{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);align-items:center;width:100%;max-width:1010px;margin-top:22px;text-align:left}
.s-mind ul{list-style:none}
.s-mind li{margin-bottom:8px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(var(--panel-rgb),.6);font-size:13.5px;line-height:1.45;color:var(--text-2)}
.s-mind li:last-child{margin-bottom:0}
.s-mind__arrow{font-size:1.5rem;font-style:normal;color:var(--mint);text-align:center;opacity:0}
.s-mind__old li{opacity:0;transform:translateY(10px)}
.s-mind__new li{opacity:0;transform:translateY(12px);border-color:rgba(var(--mint-rgb),.32);color:var(--text)}
/* Ein Durchlauf dauert 14 Sekunden und wiederholt sich: die Last steht erst rund fünf
   Sekunden da (Wunsch des Nutzers, vorher verschwand sie zu schnell), löst sich dann auf,
   rechts kommt die Ruhe, zum Schluss das Zitat, danach setzt die Folie zurück. */
.is-in .s-mind__old li{animation:mindLeft 20s var(--ease) infinite;animation-delay:calc(var(--i) * .25s)}
.is-in .s-mind__new li{animation:mindRight 20s var(--ease) infinite;animation-delay:calc(var(--i) * .3s)}
.is-in .s-mind__arrow{animation:mindArrow 20s var(--ease) infinite}
/* Takt 20 Sekunden, beide Seiten stehen gleich lang (Wunsch des Nutzers: je sieben Sekunden).
   Links: 7% = 1,4 s steht, 42% = 8,4 s Ende der sieben Sekunden, 49% = 9,8 s aufgelöst.
   Rechts: 56% = 11,2 s steht, 91% = 18,2 s Ende der sieben Sekunden.
   Zitat 66% = 13,2 s, ab 96% = 19,2 s ist alles weg und der Durchlauf beginnt neu. */
@keyframes mindLeft{
  0%{opacity:0;transform:translateY(10px);filter:none}
  7%,42%{opacity:1;transform:none;filter:none}
  49%,91%{opacity:.2;transform:translateY(-8px);filter:blur(1.2px)}
  96%,100%{opacity:0;transform:translateY(-8px);filter:blur(1.2px)}
}
@keyframes mindRight{
  0%,49%{opacity:0;transform:translateY(12px);box-shadow:none}
  56%,91%{opacity:1;transform:none;box-shadow:0 18px 44px -26px rgba(var(--mint-rgb),.85)}
  96%,100%{opacity:0;transform:none;box-shadow:none}
}
@keyframes mindArrow{
  0%,40%{opacity:0}
  46%,91%{opacity:1}
  96%,100%{opacity:0}
}
.s-mind__quote{max-width:46ch;margin-top:24px;font-size:1.12rem;font-weight:600;line-height:1.5;color:var(--text-2);opacity:0}
.s-mind__quote b{font-weight:700;color:var(--silver)}
.is-in .s-mind__quote{animation:mindQuote 20s var(--ease) infinite}
@keyframes mindQuote{
  0%,60%{opacity:0;transform:translateY(14px)}
  66%,91%{opacity:1;transform:none}
  96%,100%{opacity:0;transform:none}
}
@media(max-width:980px){
  .s-mind{grid-template-columns:minmax(0,1fr);max-width:520px}
  .s-mind__arrow{margin:10px 0;transform:rotate(90deg)}
}
@media(prefers-reduced-motion:reduce){
  .is-in .s-mind__breath,.is-in .s-mind__old li,.is-in .s-mind__new li,
  .is-in .s-mind__arrow,.is-in .s-mind__quote{animation:none}
  .s-mind__new li,.s-mind__arrow,.s-mind__quote{opacity:1;transform:none}
  .s-mind__old li{opacity:.45;transform:none}
}
@media(max-width:760px){.s-checks{grid-template-columns:minmax(0,1fr)}}

/* ---------- Unterstützte Prop Firmen (prop-firmen.html) ---------- */
.props__intro{max-width:760px;margin:0 auto 44px;text-align:center}
.props__intro p{margin-bottom:12px;color:var(--text-2)}
.props{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:18px;gap:18px;max-width:1100px;margin:0 auto;list-style:none}
.props__card{
  display:flex;flex-direction:column;align-items:center;padding:30px 22px 24px;text-align:center;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  transition:border-color .25s,background .25s;
}
.props__card:hover{border-color:var(--line-2);background:var(--panel-2)}
.props__logo{display:flex;align-items:center;justify-content:center;width:76px;height:76px;margin-bottom:18px;border:1px solid var(--line-2);border-radius:18px;background:var(--bg)}
.props__logo img{width:auto;height:auto;max-width:64px;max-height:52px;object-fit:contain}
.props__card h2{margin-bottom:4px;font-size:1.15rem;letter-spacing:-.01em}
.props__url{margin-bottom:14px;font-size:13px;color:var(--text-3)}
.props__ok{display:inline-flex;align-items:center;margin-bottom:20px;font-size:13px;font-weight:500;color:var(--mint)}
.props__ok::before{
  content:"";flex-shrink:0;width:18px;height:18px;margin-right:8px;border-radius:50%;
  border:1px solid rgba(var(--mint-rgb),.28);background:rgba(var(--mint-rgb),.1) var(--check) center/11px no-repeat;
}
.props__card .btn{width:100%;margin-top:auto}
.props__note{max-width:760px;margin:40px auto 0;text-align:center;font-size:14px;color:var(--text-3)}
@media(max-width:980px){.props{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.props{grid-template-columns:minmax(0,1fr)}}

/* ---------- Sprachwahl DE · EN · TR (von js/lang.js in die Navigation gesetzt) ---------- */
.lang{display:inline-flex;align-items:center;padding:3px;border:1px solid var(--line-2);border-radius:9px}
.nav>.lang{margin-right:4px}
.lang button{padding:6px 8px;border:0;border-radius:6px;background:none;color:var(--text-3);font-family:inherit;font-size:12px;font-weight:600;line-height:1;letter-spacing:.06em;cursor:pointer;transition:color .2s,background .2s}
.lang button:hover{color:var(--text)}
.lang button[aria-pressed="true"]{background:var(--panel-2);color:var(--silver)}
/* Kein Aufblitzen der deutschen Texte, wenn in dieser Sitzung eine andere Sprache gewählt ist */
html.i18n-pending body{visibility:hidden}
@media(max-width:760px){.nav>.lang{align-self:flex-start;margin:8px 0 0}}

/* ---------- Karten ---------- */
.grid{display:grid;grid-gap:18px;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:30px;transition:border-color .25s,background .25s;
}
.card:hover{border-color:var(--line-2);background:var(--panel-2)}
.card h3{margin-bottom:11px}
.card p{color:var(--text-2);font-size:15.5px}
.card__meta{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);
}

/* ---------- Ablauf ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:52px}
.flow__step{position:relative;padding:28px 26px;border:1px solid var(--line);border-right:0;background:var(--panel)}
.flow__step:last-child{border-right:1px solid var(--line);border-radius:0 var(--r) var(--r) 0}
.flow__step:first-child{border-radius:var(--r) 0 0 var(--r)}
.flow__step--key{background:var(--panel-2);border-color:var(--line-2)}
.flow__tag{font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--mint);margin-bottom:14px}
.flow__step--key .flow__tag{color:var(--amber)}
.flow__step h3{font-size:1.06rem;margin-bottom:9px}
.flow__step p{font-size:14px;color:var(--text-2);line-height:1.55}
.flow__note{
  margin-top:20px;padding:18px 24px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--bg-alt);font-size:14.5px;color:var(--text-2);
}

/* ---------- Regelwerke ---------- */
.rules{display:grid;grid-template-columns:repeat(5,1fr);grid-gap:11px;gap:11px;margin-top:44px}
.rule{
  display:flex;align-items:center;padding:15px 17px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  font-size:14.5px;font-weight:500;color:var(--text);letter-spacing:.01em;
  transition:border-color .2s,transform .2s var(--ease);
}
.rule:hover{border-color:var(--line-2);transform:translateY(-2px)}
.rule .dot{margin-right:11px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--blue);flex-shrink:0}
.dot--a{background:var(--amber)}
.legend{display:flex;flex-wrap:wrap;margin-top:22px;font-size:13.5px;color:var(--text-3)}
.legend>span{display:flex;align-items:center;margin:0 30px 8px 0}
.legend i{margin-right:9px}

/* ---------- Handelsfenster ---------- */
.session{margin-top:48px;padding:40px 34px 30px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.track{position:relative;height:4px;background:var(--line);border-radius:2px;margin:52px 0 0}
.track__on{position:absolute;top:0;bottom:0;left:0;right:44%;background:var(--grad);border-radius:2px}
.track__off{position:absolute;top:0;bottom:0;left:72%;right:0;background:var(--danger);border-radius:2px;opacity:.75}
.mark{position:absolute;top:50%;transform:translate(-50%,-50%)}
.mark i{display:block;width:13px;height:13px;border-radius:50%;background:var(--mint);border:3px solid var(--bg)}
.mark--gold i{background:var(--amber)}
.mark--off i{background:var(--danger)}
.mark b{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-size:1.05rem;font-weight:600;color:var(--silver);white-space:nowrap;letter-spacing:-.01em;
}
.mark small{
  position:absolute;top:26px;left:50%;transform:translateX(-50%);
  font-size:12.5px;color:var(--text-2);white-space:nowrap;
}
.session__foot{display:flex;justify-content:space-between;margin-top:78px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.on{color:var(--mint)} .off{color:var(--danger)}

/* ---------- Lizenz ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:18px;gap:18px;margin-top:50px;align-items:start}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:32px}
.plan--key{border-color:var(--amber);background:var(--panel-2);position:relative}
.plan__badge{
  position:absolute;top:-11px;left:32px;padding:3px 12px;border-radius:20px;
  background:var(--amber);color:#1A1405;font-size:11.5px;font-weight:600;letter-spacing:.05em;
}
.plan h3{margin-bottom:6px}
.plan__sub{font-size:14px;color:var(--text-3);margin-bottom:24px}
.price{font-size:2.5rem;font-weight:700;color:var(--silver);letter-spacing:-.03em;line-height:1}
.price span{font-size:.95rem;color:var(--text-3);font-weight:400;letter-spacing:0}
.plan ul{list-style:none;margin:26px 0 30px}
.plan li{position:relative;padding:9px 0 9px 26px;font-size:15px;color:var(--text-2);border-bottom:1px solid var(--line)}
.plan li:last-child{border-bottom:0}
.plan li::before{content:"";position:absolute;left:2px;top:17px;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--mint)}
.plan .btn{width:100%}

/* ---------- FAQ ---------- */
.faq{margin-top:44px;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-size:1.07rem;color:var(--silver);font-weight:600;letter-spacing:-.01em;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";position:absolute;right:8px;top:33px;width:9px;height:9px;
  border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.qa[open] summary::after{transform:rotate(-135deg)}
.qa p{padding:0 60px 26px 0;color:var(--text-2);font-size:15.5px;max-width:78ch}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;grid-gap:56px;gap:56px;align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-size:13.5px;font-weight:500;color:var(--text-2);margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;background:var(--bg);color:var(--text);
  border:1px solid var(--line-2);border-radius:10px;font-family:inherit;font-size:15px;
  transition:border-color .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--mint)}
.field textarea{resize:vertical;min-height:130px}
.consent{display:flex;align-items:flex-start;font-size:13.5px;color:var(--text-3);margin:6px 0 22px}
.consent input{width:16px;height:16px;margin:3px 11px 0 0;flex-shrink:0;accent-color:var(--mint)}
.consent a{color:var(--text-2);text-decoration:underline}
.formnote{margin-top:16px;font-size:14px;color:var(--mint);display:none}

/* ---------- Abschluss-CTA ---------- */
.final{position:relative;text-align:center;padding:120px 0;overflow:hidden}
.final__glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:900px;height:620px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(var(--mint-rgb),.13),rgba(var(--cyan-rgb),.06) 45%,transparent 70%);
}
.final .wrap{position:relative}
/* Abschluss im Stil einer Einstiegskarte: ein Button, darunter drei Häkchen */
.cta-card{
  max-width:740px;margin:0 auto;padding:32px;border:1px solid var(--line-2);border-radius:22px;
  background:linear-gradient(180deg,rgba(var(--panel-rgb),.9),rgba(var(--bg-alt-rgb),.9));
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
}
.cta-card__btn{width:100%}
.cta-card__checks{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;margin-top:18px;font-size:14px;color:var(--text-2)}
.cta-card__checks li{display:flex;align-items:center;margin:5px 12px}
.cta-card__checks li::before{
  content:"";width:18px;height:18px;margin-right:9px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(var(--mint-rgb),.28);background:rgba(var(--mint-rgb),.1) var(--check) center/11px no-repeat;
}
.final__alt{margin-top:24px;font-size:14px;color:var(--text-2)}
.final__alt a{color:var(--mint)}
/* Fußzeile: Risikohinweis links unten, Copyright rechts */
.foot__social{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-top:20px;border:1px solid var(--line-2);border-radius:10px;color:var(--text-2);transition:color .2s,border-color .2s}
.foot__social:hover{color:var(--silver);border-color:var(--text-3)}
.foot__social svg{width:18px;height:18px}
.foot .foot__bar--risk{flex-direction:column;align-items:stretch;gap:14px}
.foot__risk{max-width:none;font-size:12.5px;line-height:1.7;color:var(--text-3)}
.foot__risk strong{font-weight:600;color:var(--text-2)}
.foot__copy{align-self:flex-end;text-align:right;font-size:13.5px;line-height:1.7;color:var(--text-2);white-space:nowrap}
/* FAQ-Seite */
.doc__faq{max-width:900px}
.doc__faq .faq{margin-top:0}
.doc__faq .doc__cta{margin-top:64px}
@media(max-width:760px){
  .cta-card{padding:22px}
  .foot__copy{align-self:flex-start;text-align:left;white-space:normal}
}
.final img{width:86px;margin:0 auto 32px;opacity:.9}
.final h2{max-width:20ch;margin:0 auto 20px}
.final .lead{margin:0 auto 34px}
.final__cta{display:flex;justify-content:center;flex-wrap:wrap}
.final__cta>*{margin:0 7px 12px}

/* ---------- Fußzeile ---------- */
.foot{background:var(--bg-alt);border-top:1px solid var(--line);padding:70px 0 40px}
.foot__top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;grid-gap:44px;gap:44px;padding-bottom:44px;border-bottom:1px solid var(--line)}
.foot img{height:66px;margin-bottom:20px}
.foot__about{font-size:15px;line-height:1.65;color:var(--text-2);max-width:36ch}
.foot h4{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:14px 0 20px}
.foot ul{list-style:none}
.foot li{margin-bottom:14px}
.foot li a{font-size:15px;color:var(--text);transition:color .2s}
.foot li a:hover{color:var(--silver)}
.disclaimer{
  margin-top:34px;padding:22px 26px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);font-size:13px;color:var(--text-3);line-height:1.7;
}
.foot__bar{display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:28px;font-size:13.5px;color:var(--text-3)}
.foot__bar>*{margin:4px 0}

/* ---------- Rechtstexte ---------- */
.legal{padding:150px 0 100px;max-width:840px}
.legal h1{font-size:2.5rem;margin-bottom:12px}
.legal h2{font-size:1.4rem;margin:44px 0 14px}
.legal h3{font-size:1.1rem;margin:26px 0 9px}
.legal p,.legal li{color:var(--text-2);font-size:16px;margin-bottom:13px}
.legal ul{margin:0 0 16px 22px}
.legal .back{display:inline-block;margin-bottom:34px;font-size:14.5px;color:var(--text-2)}
.legal .back:hover{color:var(--silver)}
.ph{color:var(--amber);background:rgba(var(--amber-rgb),.11);padding:1px 7px;border-radius:5px;font-size:.93em}

/* ---------- Bewegung ---------- */
/* Scroll-Übergänge setzen opacity und translate inline, siehe js/main.js */

/* ---------- Responsiv ---------- */
/* Dashboard: unter 1180 px liegen die Infokarten als Raster unter dem Fenster */
@media(max-width:1180px){
  .dash__stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px;gap:12px;align-items:start;max-width:1088px}
  .app,.dash__label{grid-column:1/-1}
  .app{width:100%;max-width:none}
  .dash__label{margin:2px 0 8px}
  .dash .float{position:static;width:auto;animation:none}
  .dash__tags{margin-bottom:44px}
}
@media(max-width:980px){
  .app__body{grid-template-columns:minmax(0,1fr)}
  .app__side{display:none}
}
@media(max-width:760px){
  .dash__stage{grid-template-columns:minmax(0,1fr)}
  .dash__note{margin-top:48px}
}
@media(max-width:980px){
  .hero{padding:150px 0 90px}
  .hero__in{grid-template-columns:minmax(0,1fr);grid-gap:48px;gap:48px}
  .shot{max-width:640px}
  .g3,.plans,.flow{grid-template-columns:1fr}
  .flow__step{border-right:1px solid var(--line);border-radius:0}
  .flow__step:first-child{border-radius:var(--r) var(--r) 0 0}
  .flow__step:last-child{border-radius:0 0 var(--r) var(--r)}
  .flow__step+.flow__step{border-top:0}
  .rules{grid-template-columns:repeat(3,1fr)}
  .contact,.foot__top{grid-template-columns:1fr;grid-gap:34px;gap:34px}
}
@media(max-width:760px){
  body{font-size:16px}
  .sec{padding:76px 0}
  .hero{padding:130px 0 70px}
  .brand img{height:46px}
  .nav{
    display:none;position:absolute;top:88px;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:4px;padding:16px 24px 24px;background:var(--bg);
    border-bottom:1px solid var(--line);
  }
  .nav.open{display:flex}
  .nav .btn{margin-top:8px}
  .burger{display:block;margin-left:auto}
  .g2,.rules{grid-template-columns:1fr 1fr}
  .session{padding:34px 20px 24px}
  .mark b{font-size:.9rem} .mark small{display:none}
  .foot__bar{flex-direction:column;gap:8px}
  /* Globus: drei Karten statt vier, kompakter */
  .globe{padding:24px 0 80px}
  .globe__stage{height:300px}
  .globe__dome{top:210px;width:760px;height:760px;margin-left:-380px}
  .gcard{padding:8px 12px 8px 8px;border-radius:12px}
  .gcard__ic{width:28px;height:28px;margin-right:9px;font-size:10px}
  .gcard__ic svg{width:15px;height:15px}
  .gcard__t{font-size:9.5px}
  .gcard__v{font-size:12px}
  .spark,.gcard--dx{display:none}
  .gcard--es{left:24%;top:36%}
  .gcard--ot{left:50%;top:4%}
  .gcard--pc{left:74%;top:36%}
  .globe__text{padding-top:40px}
}
@media(max-width:560px){
  .shot{padding:0}
  .qt{grid-template-columns:minmax(0,1fr)}
  .float{position:static;width:auto;margin-top:10px;animation:none}
}
/* Fußzeile: Linkspalten auf Tablet/Handy nebeneinander unter dem Logo */
@media(max-width:980px){
  .foot__top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__top>:first-child{grid-column:1/-1}
}
@media(max-width:560px){
  .foot__top{grid-template-columns:1fr 1fr}
  .foot img{height:56px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}