/* XID Landingpage – Design „Signature Black“ (Tokens aus dem Prototyp, app.css).
   Ruhe vor Effekt: Farbe (Hologramm-Folie) nur dort, wo etwas verifiziert ist. */

@font-face{
  font-family:"Conthrax";
  src:url("../fonts/conthrax-sb.ttf") format("truetype");
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  --c-bg:#000000;
  --c-surface:#141517;
  --c-surface-2:#1E2023;
  --c-line:rgba(255,255,255,.12);
  --c-text:#FFFFFF;
  --c-text-2:#B3B6BC;
  --c-on-light:#000000;
  --foil:linear-gradient(115deg,#7DF9E1 0%,#8B7BFF 35%,#FF8AD4 68%,#FFD98A 100%);

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-brand:"Conthrax","Eurostile","Arial Black",sans-serif;
  --fs-small:15px;
  --fs-body:17px;
  --fs-title:24px;
  --fs-hero:clamp(32px,6vw,56px);
  --fw-strong:600;
  --lh:1.4;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px;
  --gutter:24px;
  --r:24px;
  --r-pill:999px;
  --touch:56px;
  --wrap:1120px;
}

*{box-sizing:border-box;margin:0}
html{background:var(--c-bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  min-height:100dvh;background:var(--c-bg);color:var(--c-text);
  font:400 var(--fs-body)/var(--lh) var(--font);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:12px}
.muted{color:var(--c-text-2)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopfzeile */
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:80px}
.wordmark{font-family:var(--font-brand);font-weight:600;font-size:28px;letter-spacing:.02em;line-height:1}
.logo{display:block;line-height:0}
.logo img{display:block;height:28px;width:auto}
.top nav{display:flex;gap:var(--s-6);font-size:var(--fs-small);color:var(--c-text-2)}
.top nav a:hover{color:var(--c-text)}
@media (max-width:640px){.top nav{display:none}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);min-height:64px;padding:0 var(--s-8);
  border-radius:var(--r-pill);background:var(--c-text);color:var(--c-on-light);font-weight:var(--fw-strong);font-size:var(--fs-body)}
.btn:active{transform:scale(.98)}
.btn.secondary{background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-line)}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-12);align-items:center;padding-block:var(--s-16) var(--s-24)}
.hero h1{font-size:var(--fs-hero);font-weight:var(--fw-strong);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.hero .lead{margin-top:var(--s-6);font-size:20px;color:var(--c-text-2);max-width:34ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-8)}
@media (max-width:860px){.hero{grid-template-columns:1fr;padding-block:var(--s-8) var(--s-16);gap:var(--s-12)}}

/* Handy-Rahmen für den eingebetteten Prototyp */
.phone{justify-self:center;width:100%;max-width:340px;aspect-ratio:9/19;border-radius:48px;background:var(--c-bg);
  box-shadow:0 0 0 10px #151515,0 0 0 11px var(--c-line);overflow:hidden;position:relative}
.phone iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.phone-placeholder{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:var(--s-4);padding:var(--s-8);text-align:center;color:var(--c-text-2);font-size:var(--fs-small)}
.phone-placeholder .wordmark{color:var(--c-text);font-size:40px}
.phone-placeholder .ring{width:88px;height:88px;border-radius:50%;border:2px dashed var(--c-line)}

/* Abschnitte */
section{padding-block:var(--s-16)}
.eyebrow{font-size:var(--fs-small);color:var(--c-text-2);margin-bottom:var(--s-3)}
h2{font-size:clamp(26px,4vw,40px);font-weight:var(--fw-strong);line-height:1.15;max-width:22ch;text-wrap:balance}
.section-lead{margin-top:var(--s-4);color:var(--c-text-2);max-width:52ch}

.steps{list-style:none;padding:0;margin-top:var(--s-12);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);counter-reset:step}
.step{padding:var(--s-8) var(--s-6);border-radius:var(--r);background:var(--c-surface);border:1px solid var(--c-line);display:grid;gap:var(--s-3);align-content:start}
.step::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--c-text);color:var(--c-on-light);font-weight:700;margin-bottom:var(--s-3)}
.step h3{font-size:var(--fs-title);font-weight:var(--fw-strong);line-height:1.2}
.step p{color:var(--c-text-2);font-size:var(--fs-small)}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

/* Verifiziert = einzige Stelle mit Folie */
.verified{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-12);align-items:center}
.badge{display:inline-flex;align-items:center;gap:var(--s-2);padding:6px var(--s-4) 6px var(--s-2);border-radius:var(--r-pill);background:var(--foil);color:#000;font-weight:var(--fw-strong);font-size:var(--fs-small);margin-bottom:var(--s-5)}
.badge i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#000;color:#fff;font-style:normal;font-size:12px}
.points{list-style:none;padding:0 var(--s-6);border-radius:var(--r);background:var(--c-surface);border:1px solid var(--c-line)}
.points li{display:flex;align-items:center;gap:var(--s-4);min-height:68px;border-bottom:1px solid var(--c-line)}
.points li:last-child{border:0}
.points li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--c-text)}
@media (max-width:860px){.verified{grid-template-columns:1fr}}

/* Abschluss + Fuß */
.closing{text-align:center;display:grid;justify-items:center;gap:var(--s-6)}
.closing h2{max-width:20ch}
footer{border-top:1px solid var(--c-line);padding-block:var(--s-12) var(--s-8);color:var(--c-text-2);font-size:var(--fs-small)}
footer .wrap{display:grid;grid-template-columns:1fr auto;gap:var(--s-8) var(--s-12);align-items:start}
.foot-brands{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap}
.foot-brands .logo img{height:32px}
.foot-sep{width:1px;height:48px;background:var(--c-line)}
.logo-unival{display:block;height:40px;width:auto}
.foot-address{font-style:normal;display:grid;gap:2px;justify-items:start}
.foot-address strong{color:var(--c-text)}
.foot-note{grid-column:1 / -1;padding-top:var(--s-6);border-top:1px solid var(--c-line);font-size:13px}
@media (max-width:640px){footer .wrap{grid-template-columns:1fr}.foot-brands{flex-direction:column;align-items:flex-start}.foot-sep{display:none}.foot-brands .logo img{height:30px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}