/* ===================== SPF — Onboarding =====================
   Eigene Seite, nutzt die Tokens aus styles.css. Aufbau nach der
   Vorlage, nur dunkel und in Lime statt hell und grün-auf-weiss. */

.ob-body{background:var(--bg);min-height:100vh}

.ob-bar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 26px;background:rgba(0,0,0,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.ob-back{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px 10px 14px;border-radius:12px;
  border:1px solid var(--line);color:var(--txt-2);font-size:15.5px;
  transition:.3s var(--ease);
}
.ob-back:hover{border-color:rgba(196,243,43,.4);color:#fff}
.ob-back svg{width:18px;height:18px}
.ob-brand{display:flex;align-items:center;gap:11px}
.ob-brand .brand-mark{width:38px;height:auto}
.ob-brand .brand-text{font-size:21px;font-weight:800;letter-spacing:.02em;color:#fff}
.ob-lang{display:flex;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.ob-lang button{
  padding:9px 15px;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--txt-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;transition:.3s var(--ease);
}
.ob-lang button.on{background:rgba(196,243,43,.14);color:var(--lime)}

.ob-prog{height:3px;background:#14160f;position:sticky;top:73px;z-index:19}
.ob-prog i{
  display:block;height:100%;width:25%;
  background:linear-gradient(90deg,#8fbf14,var(--lime));
  box-shadow:0 0 14px rgba(196,243,43,.5);
  transition:width .55s var(--ease);
}

.ob{width:100%;max-width:820px;margin:0 auto;padding:54px 24px 110px}

/* ---- Schrittanzeige ---- */
.ob-dots{display:flex;align-items:center;gap:8px;margin:0 0 40px;flex-wrap:wrap}
.ob-dots li{display:flex;align-items:center;gap:8px}
.ob-dots li:not(:last-child)::after{content:"";width:22px;height:1px;background:rgba(255,255,255,.12)}
.ob-dots button{
  display:flex;align-items:center;gap:10px;
  padding:7px 14px 7px 8px;border-radius:999px;
  border:1px solid transparent;transition:.3s var(--ease);
}
.ob-dots i{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-style:normal;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  border:1px solid var(--line);color:var(--txt-3);transition:.3s var(--ease);
}
.ob-dots span{font-size:14px;color:var(--txt-3);transition:.3s var(--ease)}
.ob-dots .done button{cursor:pointer}
.ob-dots .done button:hover{border-color:rgba(196,243,43,.35)}
.ob-dots .done i{border-color:rgba(196,243,43,.45);color:var(--lime)}
.ob-dots .done span{color:var(--txt-2)}
.ob-dots .now button{background:rgba(196,243,43,.1);border-color:rgba(196,243,43,.4)}
.ob-dots .now i{background:var(--lime);border-color:var(--lime);color:#0b0f05;font-weight:700}
.ob-dots .now span{color:#fff;font-weight:600}
.ob-dots .todo button{cursor:default}

.ob-resume{margin:22px 0 0;font-size:15px;color:var(--txt-3);font-weight:300}
.ob-jump{color:var(--lime);font-size:15px;text-decoration:underline;text-underline-offset:3px}

/* ---- Schritte ---- */
.ob-step{display:none}
.ob-step.on{display:block;animation:obIn .5s var(--ease) both}
@keyframes obIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ob-k{
  margin:0 0 14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;letter-spacing:.2em;color:var(--lime);
}
.ob-step h1{margin:0 0 16px;font-size:clamp(32px,4.6vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:#fff}
.ob-lead{margin:0 0 30px;font-size:17.5px;line-height:1.6;color:var(--txt-2);font-weight:300}
.ob-mail{margin:0 0 14px;font-size:16px;color:var(--txt-2);font-weight:300}
.ob-mail b{color:#fff;font-weight:600}

/* ---- Formulare ---- */
.ob-form{display:grid;gap:20px;max-width:520px}
.ob-field{display:grid;gap:9px}
.ob-field > span{font-size:14.5px;color:var(--txt-2)}
.ob-field input{
  width:100%;padding:16px 18px;border-radius:13px;
  border:1px solid var(--line);background:#0a0b07;color:#fff;
  font-family:inherit;font-size:16.5px;font-weight:300;
  transition:.3s var(--ease);
}
.ob-field input::placeholder{color:#4c4f47}
.ob-field input:focus{outline:0;border-color:rgba(196,243,43,.55);box-shadow:0 0 0 4px rgba(196,243,43,.1)}
.ob-field input.bad{border-color:rgba(242,116,143,.7)}
.ob-err{display:block;font-style:normal;font-size:13.5px;color:#f2748f;min-height:1px}
.ob-consent{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--txt-2);font-weight:300;cursor:pointer}
.ob-consent input{
  flex:0 0 auto;width:20px;height:20px;margin-top:1px;accent-color:var(--lime);cursor:pointer;
}
.ob-btn{
  justify-self:start;display:inline-flex;align-items:center;gap:12px;
  padding:17px 30px;border-radius:13px;
  background:linear-gradient(100deg,#a5d41c,var(--lime));color:#0b0f05;
  font-size:17px;font-weight:600;
  box-shadow:0 12px 34px rgba(196,243,43,.24);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.ob-btn:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(196,243,43,.4)}
.ob-btn svg{width:19px;height:19px}

/* ---- Partnerkarten ---- */
.ob-legal{display:flex;gap:18px;margin:2px 0 14px;font-size:13.5px}
.ob-legal a{color:inherit;opacity:.6;text-decoration:underline;text-underline-offset:3px}
.ob-legal a:hover{opacity:1}
.ob-partner .pt-open.off{opacity:.4;pointer-events:none}
.ob-field[hidden]{display:none}
.ob-partners{display:grid;gap:15px}
.ob-partner{
  border:1px solid var(--line-soft);border-radius:18px;background:#0a0b07;
  padding:24px 26px;transition:.35s var(--ease);
}
.ob-partner:hover{border-color:rgba(255,255,255,.14)}
.ob-partner.picked{border-color:rgba(196,243,43,.5);background:linear-gradient(150deg,#101309,#0a0b07 65%)}
.pt-head{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}
/* die Logos kommen von den Brokern und sind weiss auf transparent —
   Höhe vereinheitlicht, Breite läuft mit dem jeweiligen Seitenverhältnis */
/* pro Marke eigene Höhe: die drei Wortmarken sitzen unterschiedlich
   hoch in ihrer Zeichenfläche, gleiche Pixelhöhe sähe ungleich aus */
.pt-logo{width:auto;max-width:200px;object-fit:contain}
.ob-partner[data-key="bitunix"] .pt-logo{height:23px}
.pt-head b{font-size:21px;font-weight:700;color:#fff;letter-spacing:-.01em}
.pt-tag{
  padding:5px 11px;border-radius:999px;border:1px solid rgba(196,243,43,.3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.14em;color:var(--lime);
}
.pt-bonus{margin:0 0 6px;font-size:16.5px;font-weight:600;color:#e9ecdf}
.pt-desc{margin:0 0 20px;font-size:15.5px;color:var(--txt-2);font-weight:300}
.pt-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pt-open{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:12px;border:1px solid var(--line);
  font-size:15.5px;font-weight:500;color:#fff;transition:.3s var(--ease);
}
.pt-open:hover{border-color:rgba(196,243,43,.45);color:var(--lime)}
.pt-open svg{width:17px;height:17px}
.pt-pick{
  padding:13px 22px;border-radius:12px;
  background:rgba(196,243,43,.14);border:1px solid rgba(196,243,43,.4);
  color:var(--lime);font-size:15.5px;font-weight:600;transition:.3s var(--ease);
}
.pt-pick:hover{background:rgba(196,243,43,.24)}
.ob-partner.picked .pt-pick{background:var(--lime);border-color:var(--lime);color:#0b0f05}

.ob-picked{margin:0 0 4px;font-size:15.5px;color:var(--txt-2);font-weight:300}
.ob-picked b{color:#fff;font-weight:600}
.ob-change{color:var(--lime);font-size:15px;text-decoration:underline;text-underline-offset:3px}

/* ---- Hinweis mit Schloss ---- */
.ob-lock{
  display:flex;align-items:flex-start;gap:12px;margin:4px 0 0;
  font-size:14.5px;line-height:1.55;color:var(--txt-3);font-weight:300;
}
.ob-lock svg{flex:0 0 auto;width:19px;height:19px;margin-top:1px;color:var(--txt-2)}

/* ---- Zusammenfassung ---- */
.ob-summary{
  display:grid;gap:1px;margin:0 0 32px;max-width:520px;
  border:1px solid var(--line-soft);border-radius:16px;background:var(--line-soft);overflow:hidden;
}
.ob-summary > div{display:flex;justify-content:space-between;gap:18px;padding:16px 20px;background:#0a0b07}
.ob-summary dt{font-size:15px;color:var(--txt-2);font-weight:300}
.ob-summary dd{margin:0;font-size:15.5px;color:#fff;font-weight:600;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-align:right;word-break:break-all}
.ob-summary dd.pend{color:#e8c95a}
.ob-summary dd.okay{color:var(--lime,#b6f24a)}

/* ---- Ausklapper „Der Ablauf" ---- */
.ob-details{
  margin-top:56px;border:1px solid var(--line-soft);border-radius:24px;
  background:linear-gradient(165deg,#0b0d07,#080906 70%);overflow:hidden;
}
.ob-details > summary{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:22px 24px;cursor:pointer;list-style:none;
  font-size:16px;color:var(--txt-2);font-weight:300;
}
.ob-details > summary::-webkit-details-marker{display:none}
.ob-details > summary svg{width:20px;height:20px;transition:transform .35s var(--ease)}
.ob-details[open] > summary svg{transform:rotate(180deg)}
.ob-flow{padding:6px 34px 38px;border-top:1px solid var(--line-soft)}
.ob-badge{
  display:inline-flex;align-items:center;gap:11px;margin:30px 0 22px;
  padding:9px 16px 9px 12px;border-radius:10px;
  background:rgba(196,243,43,.13);border:1px solid rgba(196,243,43,.26);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;letter-spacing:.16em;color:var(--lime);
}
.ob-badge svg{width:19px;height:19px}
.ob-flow h2{margin:0 0 30px;font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-.025em;color:#fff}
.ob-flow h2 span{font-style:italic;font-weight:400;color:var(--lime);
  border-bottom:2px solid rgba(196,243,43,.45);padding-bottom:2px}

.ob-steps2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:26px}
.ob-steps2 article{border-radius:14px;overflow:hidden;background:#0d0f09}
/* die eingekerbte Lasche der Vorlage */
.ob-steps2 .tab{
  margin:0;display:inline-block;padding:11px 26px 11px 20px;
  background:#c4f32b;color:#0b0f05;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;letter-spacing:.16em;font-weight:700;
}
.ob-steps2 .bd{padding:22px 24px 26px;border-top:2px solid var(--lime)}
.ob-steps2 h3{margin:0 0 9px;font-size:18.5px;font-weight:600;color:#fff;letter-spacing:-.01em}
.ob-steps2 .bd p{margin:0;font-size:15.5px;line-height:1.55;color:var(--txt-2);font-weight:300}

.ob-flow hr{border:0;border-top:1px solid var(--line-soft);margin:30px 0}
.ob-flow h4{margin:0 0 20px;font-size:19px;font-weight:600;color:#fff}
.ob-perks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 34px}
.ob-perks li{
  display:flex;align-items:flex-start;gap:13px;
  font-size:15.5px;line-height:1.55;color:var(--txt-2);font-weight:300;
}
.ob-perks i{
  flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:50%;
  border:1px solid rgba(94,211,178,.45);
  background:
    linear-gradient(45deg,transparent 45%,#5ed3b2 45%,#5ed3b2 55%,transparent 55%) no-repeat 5px 9px/8px 2px,
    linear-gradient(-45deg,transparent 45%,#5ed3b2 45%,#5ed3b2 55%,transparent 55%) no-repeat 8px 6px/9px 2px;
}
.ob-help{margin:30px 0 0;text-align:center;font-size:15px;color:var(--txt-3);font-weight:300}

@media (max-width:700px){
  /* auf dem Handy nur die Ziffern, die Beschriftung passt nicht daneben */
  .ob-dots{gap:6px;margin-bottom:28px}
  .ob-dots span{display:none}
  .ob-dots button{padding:6px}
  .ob-dots li:not(:last-child)::after{width:14px}
  .ob-bar{padding:12px 16px;gap:10px}
  .ob-back{padding:9px 13px}
  .ob-back span{display:none}
  .ob-prog{top:65px}
  .ob{padding:36px 18px 80px}
  .ob-partner{padding:18px 18px}
  .pt-act{gap:10px}
  .pt-open,.pt-pick{flex:1;justify-content:center;text-align:center}
  .ob-btn{width:100%;justify-content:center}
  .ob-details{margin-top:38px;border-radius:18px}
  .ob-flow{padding:4px 18px 28px}
  .ob-steps2{grid-template-columns:1fr;gap:14px}
  .ob-perks{grid-template-columns:1fr;gap:15px}
  .ob-summary > div{flex-direction:column;gap:4px}
  .ob-summary dd{text-align:left}
}