:root{
  --bg:#0b110e; --shell:#0e1512; --card:#151e19; --card2:#1a2620; --line:#243429;
  --ink:#e9f2ec; --muted:#8ea79a; --faint:#5f7469;
  --acc:#3bd47f; --accdeep:#0e7a3e; --accink:#06130b;
  --warn:#f0b35c; --gold:#ffd36b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Public Sans",system-ui,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 22px}
h1,h2,h3{font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; letter-spacing:.015em; line-height:1.05; margin:0}
a{color:var(--acc)}
em{font-style:normal; color:var(--ink)}

/* topbar */
.topbar{position:sticky; top:0; z-index:50; background:#0e1512ee; backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; gap:14px; padding:12px 22px}
.wordmark{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:25px; text-transform:uppercase; color:var(--ink); text-decoration:none; white-space:nowrap}
.wordmark b{color:var(--acc)}
.pill{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--warn); border:1px solid #4d3c1f; background:#241a0c; padding:4px 10px; border-radius:999px; white-space:nowrap}
.nav{display:flex; gap:20px; margin-left:20px}
.nav a{color:var(--muted); text-decoration:none; font-size:14px; font-weight:600}
.nav a:hover,.nav a.on{color:var(--ink)}
.spacer{margin-left:auto}
.cta{background:var(--acc); color:var(--accink); text-decoration:none; font-weight:700; font-size:14.5px; padding:10px 20px; border-radius:11px; white-space:nowrap; transition:transform .1s; display:inline-block}
.cta:active{transform:scale(.97)}
.cta.ghost{background:var(--card); color:var(--ink); border:1px solid var(--line)}
.cta.big{font-size:16px; padding:14px 30px}
.topbar .cta{margin-left:auto}
.topbar .nav + .spacer + .cta,.topbar .spacer + .cta{margin-left:0}

/* hero */
.hero{padding:64px 0 30px; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center}
.hero.solo{grid-template-columns:1fr; max-width:760px}
.hero h1{font-size:clamp(38px,6vw,60px); font-weight:700}
.hero h1 .g{color:var(--acc)}
.hero .lead{font-size:18px; color:var(--muted); max-width:54ch; margin:18px 0 26px}
.hero .lead b{color:var(--ink)}
.heroctas{display:flex; gap:12px; flex-wrap:wrap}
.trust{display:flex; gap:10px 22px; flex-wrap:wrap; margin-top:30px; font-size:13px; color:var(--muted)}
.trust span::before{content:"✓ "; color:var(--acc); font-weight:700}

/* sport chips */
.sports{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 4px}
.sports span{font-size:13px; font-weight:600; color:var(--ink); background:var(--card); border:1px solid var(--line); padding:6px 12px; border-radius:999px}
.sports span.locked{color:var(--muted)}
.sports span b{color:var(--acc); font-weight:700}

/* phone mock */
.phone{width:290px; margin:0 auto; background:#0e1512; border:1px solid #2a3b31; border-radius:34px; padding:14px 12px 18px; box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 6px #10181466}
.phone .ph-head{display:flex; align-items:center; gap:8px; padding:2px 6px 10px}
.phone .ph-logo{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:16px; text-transform:uppercase}
.phone .ph-logo b{color:var(--acc)}
.ph-card{background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,.5)}
.ph-photo{position:relative; height:190px}
.ph-photo svg{width:100%; height:100%; display:block}
.ph-badge{position:absolute; top:10px; left:10px; font-size:10px; font-weight:700; background:var(--acc); color:var(--accink); border-radius:999px; padding:3px 8px}
.ph-lbl{position:absolute; top:12px; right:10px; font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:15px; text-transform:uppercase; background:var(--acc); color:var(--accink); padding:2px 10px; border-radius:8px; transform:rotate(6deg); box-shadow:0 6px 16px rgba(0,0,0,.4)}
.ph-body{padding:11px 13px 13px}
.ph-name{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:19px; text-transform:uppercase}
.ph-name small{font-family:"Public Sans"; font-size:10.5px; color:var(--muted); text-transform:none; font-weight:600}
.ph-club{font-size:11px; color:var(--muted); margin-top:1px}
.ph-tags{display:flex; gap:5px; margin-top:8px; flex-wrap:wrap}
.ph-tags span{font-size:10px; font-weight:700; color:var(--acc); background:#12271b; border:1px solid #1e4a30; padding:2px 8px; border-radius:999px}
.ph-hint{display:flex; justify-content:center; gap:14px; font-size:10px; color:var(--faint); padding-top:12px}

/* sections */
section{padding:56px 0 10px}
.eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); margin-bottom:8px}
h2{font-size:clamp(28px,4vw,38px)}
.sub{color:var(--muted); max-width:66ch; margin:12px 0 30px}

/* card grids */
.cards3{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:16px}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 22px 18px}
.card .ico{font-size:26px; margin-bottom:10px}
.card h3{font-size:21px; margin-bottom:8px}
.card p{margin:0; font-size:14px; color:var(--muted)}
.card ul{margin:10px 0 0; padding-left:18px; font-size:13.5px; color:var(--muted)}
.card li{margin:5px 0}
.card li::marker{color:var(--acc)}

/* feature grid (icon left) */
.feat{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:14px}
.feat .card{display:flex; gap:14px; align-items:flex-start; padding:18px}
.feat .ico{font-size:24px; margin:0; flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--card2); border:1px solid var(--line); border-radius:12px}
.feat h3{font-size:18px; margin-bottom:3px}
.feat.two{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}

/* pipeline / numbered steps */
.pipe{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:12px; counter-reset:step}
.step{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; counter-increment:step; position:relative}
.step::before{content:"0" counter(step); font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:15px; color:var(--acc); letter-spacing:.08em; display:block; margin-bottom:6px}
.step b{display:block; font-size:15px; margin-bottom:4px}
.step p{margin:0; font-size:13px; color:var(--muted)}
.step.hl{border-color:var(--accdeep); background:#10201780}

/* big workflow steps (scout page) */
.flow{display:grid; gap:14px; counter-reset:fl}
.flow .fl{display:grid; grid-template-columns:56px 1fr; gap:18px; align-items:start; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 22px; counter-increment:fl}
.flow .fl::before{content:counter(fl); font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:26px; color:var(--accink); background:var(--acc); width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center}
.flow .fl h3{font-size:20px; margin-bottom:5px}
.flow .fl p{margin:0; color:var(--muted); font-size:14.5px}
.flow .fl .q{display:inline-flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.flow .fl .q b{font-size:12px; font-weight:600; color:var(--acc); background:#12271b; border:1px solid #1e4a30; padding:3px 9px; border-radius:999px}

/* comparison table */
.cmp{width:100%; border-collapse:collapse; margin-top:10px; font-size:14.5px; overflow:hidden; border-radius:14px; border:1px solid var(--line)}
.cmp th,.cmp td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line)}
.cmp thead th{background:var(--shell); font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; font-size:15px; letter-spacing:.03em}
.cmp thead th.us{color:var(--acc)}
.cmp td:first-child{color:var(--muted)}
.cmp td.us{color:var(--ink); font-weight:600}
.cmp td.us::before{content:"✓ "; color:var(--acc); font-weight:700}
.cmp td.no::before{content:"— "; color:var(--faint)}
.cmp tr:last-child td{border-bottom:none}
.cmp-scroll{overflow-x:auto}

/* pricing */
.prices{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:16px}
.price{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px}
.price.hl{border-color:var(--accdeep); background:#10201766}
.price .tier{font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; font-size:20px}
.price .amount{font-family:"Barlow Condensed",sans-serif; font-size:38px; font-weight:700; margin:6px 0 2px}
.price .amount small{font-size:14px; color:var(--muted); font-weight:600}
.price .note{font-size:12.5px; color:var(--faint); margin-bottom:12px}
.price ul{margin:0; padding-left:18px; font-size:13.5px; color:var(--muted)}
.price li{margin:6px 0}
.price li::marker{color:var(--acc)}
.price .tag{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accink); background:var(--acc); padding:3px 9px; border-radius:999px; margin-bottom:10px}

/* Funktion -> Nutzen (sachliche Tabelle) */
.nutzen{width:100%; border-collapse:collapse; margin-top:10px; font-size:14.5px; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.nutzen th,.nutzen td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top}
.nutzen thead th{background:var(--shell); font-family:"Barlow Condensed",sans-serif; text-transform:uppercase; font-size:15px; letter-spacing:.03em}
.nutzen td.fn{color:var(--ink); font-weight:600; width:38%}
.nutzen td.use{color:var(--muted)}
.nutzen tr:last-child td{border-bottom:none}

/* Highlight-Block (z. B. Verschlüsselung) */
.highlight{display:grid; grid-template-columns:64px 1fr; gap:22px; align-items:start; background:linear-gradient(120deg,#10271a,#0d1a12); border:1px solid var(--accdeep); border-radius:20px; padding:28px 30px; margin:24px 0}
.highlight .hi-ico{width:56px; height:56px; border-radius:14px; background:#12271b; border:1px solid #1e4a30; display:flex; align-items:center; justify-content:center; font-size:28px}
.highlight h3{font-size:24px; margin-bottom:8px}
.highlight p{margin:0 0 12px; color:var(--muted); font-size:15px; max-width:70ch}
.highlight p b{color:var(--ink)}
.highlight .facts{display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:6px}
.highlight .facts span{font-size:12.5px; font-weight:600; color:var(--acc); background:#12271b; border:1px solid #1e4a30; padding:5px 11px; border-radius:999px}

/* quote / callout */
.quote{background:linear-gradient(120deg,#10271a,#0d1a12); border:1px solid var(--accdeep); border-radius:20px; padding:28px 30px; margin:24px 0}
.quote p{margin:0; font-size:18px; color:var(--ink); line-height:1.5}
.quote cite{display:block; margin-top:10px; font-style:normal; font-size:13px; color:var(--muted)}

/* banner */
.banner{margin:60px 0; background:linear-gradient(120deg,#10271a,#0d1a12); border:1px solid var(--accdeep); border-radius:22px; padding:44px 30px; text-align:center}
.banner h2{font-size:clamp(26px,4vw,36px)}
.banner p{color:var(--muted); max-width:58ch; margin:12px auto 24px}
.banner .row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* footer */
footer{border-top:1px solid var(--line); margin-top:30px; padding:26px 0 34px; font-size:12.5px; color:var(--faint)}
footer .wrap{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center}
footer a{color:var(--muted)}

@media (max-width:840px){
  .hero{grid-template-columns:1fr; padding-top:40px}
  .phone{margin-top:10px}
  .nav{display:none}
  .flow .fl{grid-template-columns:44px 1fr; gap:14px; padding:18px}
  .highlight{grid-template-columns:1fr; gap:14px; padding:22px}
}