:root{
  --ink:#14161B;
  --ink-2:#1D2027;
  --paper:#F5F4F0;
  --white:#FFFFFF;
  --orange:#FF5A1F;
  --orange-d:#E64A10;
  --yellow:#FFC400;
  --steel:#6A7280;
  --line:#E4E2DB;
  --line-dark:#2A2E37;
  --radius:14px;
  --disp:'Barlow Condensed',sans-serif;
  --body:'Barlow',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--disp);line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
h2{font-size:clamp(34px,4.6vw,56px);font-weight:800}
h3{font-size:clamp(20px,2.4vw,26px);font-weight:700}
.mono{font-family:var(--mono)}
.accent{color:var(--orange)}

/* Hazard stripe divider */
.hazard{height:8px;background:repeating-linear-gradient(-45deg,var(--orange) 0 14px,var(--ink) 14px 28px)}

/* Eyebrow / section label styled like shipping label */
.tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--white);border:1.5px solid var(--ink);padding:7px 14px;border-radius:4px;margin-bottom:22px}
.tag::before{content:"";width:9px;height:9px;background:var(--orange);border-radius:2px}
.dark .tag{background:transparent;color:var(--paper);border-color:var(--line-dark)}
.dark .tag::before{background:var(--yellow)}

/* ═══ Topbar ═══ */
.topbar{background:var(--ink);color:#B9BEC8;font-size:13px;padding:8px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar a{color:var(--paper);font-weight:600}
.topbar a:hover{color:var(--orange)}
.topbar .links{display:flex;gap:18px}

/* ═══ Nav ═══ */
header.nav{position:sticky;top:0;z-index:60;background:rgba(245,244,240,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:inline-flex;align-items:center;gap:13px}
.logo .lmark{flex-shrink:0;border-radius:11px;box-shadow:0 4px 12px rgba(20,22,27,.18)}
.ltext{display:flex;flex-direction:column;line-height:1}
.l1{font-family:var(--disp);font-weight:800;font-size:22.5px;text-transform:uppercase;letter-spacing:.045em;color:var(--ink);white-space:nowrap}
.l1 em{font-style:normal;color:var(--orange)}
.l2{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--steel);margin-top:5px}
nav.menu{display:flex;gap:28px;font-weight:600;font-size:15px}
nav.menu a{color:#3A3F4A;padding:6px 0;border-bottom:2px solid transparent}
nav.menu a:hover{color:var(--ink);border-color:var(--orange)}
.nav-cta{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:700;font-size:15px;padding:13px 24px;border-radius:8px;border:2px solid var(--ink);cursor:pointer;transition:.18s;white-space:nowrap}
.btn-primary{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-d);border-color:var(--orange-d);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.dark .btn-ghost{color:var(--paper);border-color:var(--paper)}
.dark .btn-ghost:hover{background:var(--paper);color:var(--ink)}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.burger span{display:block;width:26px;height:3px;background:var(--ink);margin:5px 0;border-radius:2px}

/* ═══ Hero ═══ */
.hero{background:var(--ink);color:var(--paper);padding:78px 0 0;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(transparent 96%,rgba(255,255,255,.045) 96%),
  linear-gradient(90deg,transparent 96%,rgba(255,255,255,.045) 96%);
  background-size:56px 56px;pointer-events:none}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start;padding-bottom:56px}
.hero .kicker{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:22px;display:flex;align-items:center;gap:10px}
.hero .kicker::before{content:"⚡"}
.hero h1{font-size:clamp(42px,5.6vw,72px);font-weight:800;margin-bottom:30px}
.hero h1 .u{color:var(--orange)}
.hero-points{display:grid;gap:18px;margin-bottom:36px;max-width:620px}
.hero-points li{padding-left:34px;position:relative}
.hero-points li::before{content:"▸";position:absolute;left:0;top:-2px;color:var(--orange);font-size:22px;font-weight:800}
.hero-points b{display:block;font-size:17.5px;color:#fff}
.hero-points span{font-size:15px;color:#AEB4BF}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}

/* Tracking card (signature element) */
.track-card{background:var(--white);color:var(--ink);border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.track-head{background:var(--orange);color:#fff;padding:16px 22px;display:flex;justify-content:space-between;align-items:center}
.track-head b{font-family:var(--disp);font-size:19px;text-transform:uppercase;letter-spacing:.03em}
.track-head .live{font-family:var(--mono);font-size:11px;display:flex;align-items:center;gap:7px}
.track-head .live i{width:8px;height:8px;background:#fff;border-radius:50%;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.track-body{padding:24px 22px 10px}
.tstep{display:grid;grid-template-columns:26px 1fr auto;gap:14px;padding-bottom:24px;position:relative}
.tstep:not(:last-child)::before{content:"";position:absolute;left:12px;top:28px;bottom:2px;width:2px;background:repeating-linear-gradient(var(--line) 0 6px,transparent 6px 11px)}
.tstep .dot{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--ink);display:grid;place-items:center;font-size:13px;background:var(--white);z-index:1}
.tstep.done .dot{background:var(--ink);color:var(--yellow)}
.tstep b{font-size:15.5px;display:block}
.tstep span{font-size:13px;color:var(--steel)}
.tstep .time{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--orange);white-space:nowrap;padding-top:2px}
.track-foot{border-top:2px dashed var(--line);padding:16px 22px;background:#FBFAF7;display:flex;justify-content:space-between;align-items:center;gap:12px}
.track-foot b{font-size:14.5px}
.barcode{height:30px;flex:0 0 92px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 14px)}

/* Stats strip */
.stats{background:var(--ink-2);border-top:1px solid var(--line-dark);color:var(--paper);position:relative;z-index:2}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.stats .cell{padding:16px 12px 13px;border-left:1px solid var(--line-dark)}
.stats .cell:first-child{border-left:none}
.stats .num{font-family:var(--disp);font-size:44px;font-weight:800;color:var(--yellow);line-height:1}
.stats .lbl{font-size:13.5px;color:#9AA1AD;margin-top:4px;line-height:1.35}

/* ═══ Sections general ═══ */
section{padding:64px 0}
.sec-head{max-width:780px;margin-bottom:38px}
.sec-head p.lead{font-size:18px;color:var(--steel);margin-top:14px}
.dark{background:var(--ink);color:var(--paper)}
.dark .sec-head p.lead{color:#A6ACB8}

/* Not/sondern band */
.notband{background:var(--white);border-block:1px solid var(--line);padding:40px 0}
.notband .wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center}
.notband h3{margin-bottom:14px}
.chip{display:inline-block;font-size:14px;font-weight:600;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:7px 13px;margin:0 6px 8px 0;color:var(--steel);text-decoration:line-through}
.notband .vs{font-family:var(--disp);font-size:30px;font-weight:800;color:var(--orange)}
.yesbox{background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:26px 28px}
.yesbox b{font-family:var(--disp);font-size:24px;text-transform:uppercase;display:block;color:var(--yellow)}
.yesbox span{font-size:14.5px;color:#B9BEC8}

/* ═══ Positions grid ═══ */
.pos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pos-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.pos-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(20,22,27,.12)}
.pos-card .ph{height:130px;position:relative;overflow:hidden}
.pos-card .ph img{width:100%;height:100%;object-fit:cover}
.pos-card .ph .cnt{position:absolute;right:10px;bottom:10px;background:var(--ink);color:var(--yellow);font-family:var(--mono);font-size:11px;font-weight:600;padding:4px 9px;border-radius:4px}
.pos-card .bd{padding:18px 18px 20px;flex:1}
.pos-card h3{font-size:19px;margin-bottom:12px}
.pos-card li{font-size:13.8px;padding:5px 0 5px 20px;position:relative;border-top:1px dashed var(--line)}
.pos-card li:first-child{border-top:none}
.pos-card li::before{content:"›";position:absolute;left:4px;color:var(--orange);font-weight:800}
.pos-note{margin-top:26px;background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:24px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.pos-note b{color:var(--yellow)}

/* ═══ Problems ═══ */
.alertline{display:flex;align-items:center;gap:14px;background:#2A1510;border:1px solid #57291B;color:#FFB49A;border-radius:10px;padding:14px 20px;font-family:var(--mono);font-size:13px;margin-bottom:30px;flex-wrap:wrap}
.alertline .badge{background:var(--orange);color:#fff;font-weight:600;padding:3px 10px;border-radius:4px;font-size:11px;letter-spacing:.1em}
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prob{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--radius);padding:26px}
.prob .no{font-family:var(--mono);font-size:12px;color:var(--yellow);letter-spacing:.15em;margin-bottom:12px}
.prob h3{font-size:20px;text-transform:none;letter-spacing:0;font-family:var(--body);font-weight:700;margin-bottom:10px;color:#fff}
.prob p{font-size:14.5px;color:#A6ACB8;margin-bottom:18px}
.prob .meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;color:#8A919E;border-top:1px solid var(--line-dark);padding-top:13px}
.prob .meta b{color:var(--orange)}
.costbox{margin-top:32px;border:2px solid var(--orange);border-radius:var(--radius);padding:34px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;background:linear-gradient(120deg,rgba(255,90,31,.08),transparent 60%)}
.costbox .k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--orange);margin-bottom:10px}
.costbox h3{font-size:clamp(22px,2.6vw,30px);color:#fff}
.costbox p{color:#A6ACB8;font-size:15px;margin-top:8px}
.costbox .big{text-align:center}
.costbox .big .num{font-family:var(--disp);font-size:52px;font-weight:800;color:var(--yellow);line-height:1}
.costbox .big .lbl{font-family:var(--mono);font-size:12px;color:#9AA1AD}

/* ═══ Methode ═══ */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:44px}
.lane{border-radius:var(--radius);padding:28px;border:1px solid var(--line)}
.lane.them{background:var(--white)}
.lane.us{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lane .lh{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:8px}
.lane .lh b{font-family:var(--disp);font-size:21px;text-transform:uppercase}
.lane.us .lh b{color:var(--yellow)}
.lane .lh span{font-family:var(--mono);font-size:11px;color:var(--steel);letter-spacing:.08em}
.lstep{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px dashed var(--line);font-size:14.5px}
.lane.us .lstep{border-color:var(--line-dark)}
.lstep .t{font-family:var(--mono);font-size:12px;color:var(--steel);white-space:nowrap}
.lane.us .lstep .t{color:var(--orange)}
.lane .sum{margin-top:20px;padding:15px 18px;border-radius:9px;font-weight:700;font-size:14.5px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.lane.them .sum{background:#F1EFEA;color:var(--steel)}
.lane.us .sum{background:var(--orange);color:#fff}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step4{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;position:relative}
.step4 .n{font-family:var(--disp);font-size:46px;font-weight:800;color:transparent;-webkit-text-stroke:1.6px var(--orange);line-height:1;margin-bottom:14px}
.step4 h3{font-size:19px;margin-bottom:10px}
.step4 p{font-size:14px;color:var(--steel);margin-bottom:16px}
.step4 .m{font-family:var(--mono);font-size:11.5px;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:6px 10px;border-radius:5px;display:inline-block}

/* ═══ Speed section ═══ */
.speed{background:var(--white);border-block:1px solid var(--line)}
.speedgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px}
.kpi{border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;background:var(--paper);text-align:center}
.kpi .num{font-family:var(--disp);font-size:42px;font-weight:800;color:var(--orange);line-height:1}
.kpi b{display:block;margin-top:8px;font-size:15px}
.kpi span{font-size:13px;color:var(--steel)}

/* ═══ Race timeline (6h-Vergleich) ═══ */
.race{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;margin-bottom:20px;overflow-x:auto}
.race .axis{display:grid;grid-template-columns:repeat(6,1fr);font-family:var(--mono);font-size:11.5px;color:var(--steel);letter-spacing:.06em;margin-bottom:18px;min-width:560px}
.race .axis span{border-left:1px dashed var(--line);padding-left:10px}
.race .axis span:first-child{border-left:none;padding-left:0}
.rlane{min-width:560px;margin-bottom:22px}
.rlane:last-child{margin-bottom:0}
.rlane .rl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.rlane .rl b{font-family:var(--disp);font-size:18px;text-transform:uppercase;letter-spacing:.03em}
.rlane .rl span{font-family:var(--mono);font-size:12px;font-weight:600}
.rlane.us .rl b{color:var(--ink)}
.rlane.us .rl span{color:var(--orange)}
.rlane.them .rl b,.rlane.them .rl span{color:var(--steel)}
.rtrack{display:grid;grid-template-columns:repeat(6,1fr);position:relative}
.rtrack::before{content:"";position:absolute;left:0;right:0;top:50%;height:10px;transform:translateY(-50%);border-radius:5px;background:var(--line)}
.rlane.us .rtrack::before{right:33.4%;background:linear-gradient(90deg,var(--orange),var(--yellow))}
.rlane.them .rtrack::before{background:repeating-linear-gradient(90deg,#D8D5CC 0 10px,transparent 10px 16px)}
.rnode{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:6px 8px 6px 0}
.rnode i{width:22px;height:22px;border-radius:50%;background:var(--white);border:2.5px solid var(--steel);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800}
.rlane.us .rnode i{border-color:var(--orange);color:var(--orange)}
.rlane.us .rnode.win i{background:var(--ink);border-color:var(--ink);color:var(--yellow)}
.rnode small{font-size:12px;font-weight:600;line-height:1.25;color:var(--ink)}
.rlane.them .rnode small{color:var(--steel)}
.race .note{min-width:560px;margin-top:6px;border-top:1px dashed var(--line);padding-top:16px;font-size:15px}

/* ═══ Pricing compare ═══ */
.price3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;display:flex;flex-direction:column}
.pcard.reco{background:var(--ink);color:var(--paper);border:2px solid var(--orange);position:relative}
.pcard .pk{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-bottom:8px}
.pcard.reco .pk{color:var(--yellow)}
.pcard h3{margin-bottom:4px}
.pcard .sub{font-size:13.5px;color:var(--steel);margin-bottom:18px}
.pcard.reco .sub{color:#A6ACB8}
.pcard .price{font-family:var(--disp);font-size:40px;font-weight:800;line-height:1}
.pcard.reco .price{color:var(--yellow)}
.pcard .per{font-size:13px;color:var(--steel);margin-bottom:20px}
.pcard li{font-size:14.3px;padding:8px 0 8px 26px;position:relative;border-top:1px dashed var(--line)}
.pcard.reco li{border-color:var(--line-dark)}
.pcard li::before{position:absolute;left:2px;font-weight:800}
.pcard li.x::before{content:"✕";color:#C0453A}
.pcard li.c::before{content:"✓";color:var(--orange)}
.pcard .ex{margin-top:auto;padding-top:20px;font-size:13.5px;color:var(--steel)}
.pcard .ex b{display:block;font-family:var(--disp);font-size:26px;color:var(--ink);margin-top:4px}
.pcard.reco .ex b{color:#fff}
.ribbon{position:absolute;top:-15px;left:26px;background:var(--orange);color:#fff;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;padding:6px 13px;border-radius:5px}
.calc{margin-top:32px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:34px}
.calc .k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--orange);margin-bottom:16px}
.crow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:13px 0;border-top:1px dashed var(--line);font-size:15px}
.crow .bar{height:14px;border-radius:7px;background:var(--line)}
.crow .bar i{display:block;height:100%;border-radius:7px;background:var(--steel)}
.crow.win .bar i{background:var(--orange)}
.crow .val{font-family:var(--disp);font-size:24px;font-weight:800;text-align:right}
.crow.win .val{color:var(--orange)}

/* ═══ Garantie ═══ */
.gar-hero{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center;background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--radius);padding:36px;margin-bottom:20px}
.seal{width:190px;height:190px;border-radius:50%;border:3px solid var(--yellow);display:grid;place-items:center;text-align:center;position:relative;flex-shrink:0}
.seal::before{content:"";position:absolute;inset:10px;border:1.5px dashed var(--line-dark);border-radius:50%}
.seal .n{font-family:var(--disp);font-size:64px;font-weight:800;color:var(--yellow);line-height:.9}
.seal .t{font-family:var(--mono);font-size:13px;letter-spacing:.3em;color:var(--paper)}
.gar-hero h3{font-size:clamp(22px,2.6vw,30px);color:#fff;margin-bottom:14px}
.gar-hero p{color:#A6ACB8;font-size:15.5px;margin-bottom:18px}
.gar-hero .sig{font-family:var(--mono);font-size:12px;color:#8A919E;border-top:1px solid var(--line-dark);padding-top:14px}
.gar3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gar{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--radius);padding:26px}
.gar .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--yellow);margin-bottom:12px;text-transform:uppercase}
.gar h3{font-size:19px;color:#fff;margin-bottom:10px;text-transform:none;letter-spacing:0;font-family:var(--body);font-weight:700}
.gar p{font-size:14.3px;color:#A6ACB8}
.gar p b{color:#fff}

/* ═══ FAQ ═══ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.faq details{margin-bottom:0}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq summary{cursor:pointer;padding:20px 24px;font-weight:700;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--disp);font-size:26px;color:var(--orange);transition:.2s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 24px 22px;color:#4A505C;font-size:15px}

/* ═══ Team ═══ */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tm{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tm .ph{aspect-ratio:1/1;overflow:hidden;position:relative;background:#1D2027}
.tm .ph img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.tm .role{position:absolute;top:12px;left:12px;background:var(--ink);color:var(--yellow);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;padding:5px 10px;border-radius:4px}
.tm .bd{padding:18px}
.tm h3{font-size:19px}
.tm .fn{font-size:13px;color:var(--orange);font-weight:700;margin:2px 0 10px}
.tm p{font-size:13.6px;color:var(--steel)}

/* ═══ Kontakt ═══ */
.contact{background:var(--ink);color:var(--paper)}
.scarce{display:inline-flex;align-items:center;gap:10px;background:rgba(255,196,0,.12);border:1px solid rgba(255,196,0,.4);color:var(--yellow);font-family:var(--mono);font-size:12.5px;padding:9px 16px;border-radius:6px;margin-bottom:26px}
.contact .wrap.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.contact h2 .accent{color:var(--yellow)}
.contact ul.checks{margin-top:26px;display:grid;gap:13px}
.contact ul.checks li{padding-left:30px;position:relative;font-size:15.5px;color:#C6CBD4}
.contact ul.checks li::before{content:"✓";position:absolute;left:0;color:var(--orange);font-weight:800}
.cbox{background:var(--white);color:var(--ink);border-radius:var(--radius);padding:34px;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.cbox h3{font-size:24px;margin-bottom:4px}
.cbox .sub{font-family:var(--mono);font-size:12px;color:var(--steel);margin-bottom:24px}
.cline{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:1px dashed var(--line);font-weight:600;font-size:15.5px}
.cline .ic{width:36px;height:36px;border-radius:8px;background:var(--paper);border:1px solid var(--line);display:grid;place-items:center;font-size:16px}
.cbox .btn{width:100%;margin-top:22px}

/* ═══ Footer ═══ */
footer{background:#0E1014;color:#8A919E;padding:52px 0 30px;font-size:14px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:32px;margin-bottom:36px}
footer h4{font-family:var(--disp);font-size:16px;text-transform:uppercase;letter-spacing:.06em;color:var(--paper);margin-bottom:14px}
footer li{margin-bottom:9px}
footer a:hover{color:var(--orange)}
.fbottom{border-top:1px solid #1E222A;padding-top:24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px}
.fbottom a{margin-left:18px}

/* ═══ Animationen ═══ */
/* Hero-Ladesequenz */
.hero .kicker,.hero h1,.hero-points li,.hero-btns{opacity:0;animation:heroIn .7s cubic-bezier(.2,.7,.2,1) forwards}
.hero .kicker{animation-delay:.05s}
.hero h1{animation-delay:.15s}
.hero-points li:nth-child(1){animation-delay:.3s}
.hero-points li:nth-child(2){animation-delay:.42s}
.hero-points li:nth-child(3){animation-delay:.54s}
.hero-btns{animation-delay:.7s}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.track-card{opacity:0;animation:cardIn .8s cubic-bezier(.2,.7,.2,1) .35s forwards}
@keyframes cardIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}

/* Tracking-Karte: Schritte laufen sequentiell durch (Sendungsverfolgung) */
.tstep .dot{transition:box-shadow .3s,transform .3s}
.tstep.ping .dot{box-shadow:0 0 0 6px rgba(255,90,31,.22);transform:scale(1.12)}

/* Förderband: Hazard-Streifen laufen */
.hazard{background-size:40px 8px;animation:belt 1.4s linear infinite}
@keyframes belt{from{background-position:0 0}to{background-position:40px 0}}

/* Garantie-Siegel: gestrichelter Ring rotiert */
.seal::before{animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Garantie-Ticker */
.ticker{overflow:hidden;border-block:1.5px solid var(--line-dark);margin-bottom:32px;padding:12px 0;position:relative}
.ticker .inner{display:flex;gap:0;width:max-content;animation:ticker 26s linear infinite}
.ticker span{font-family:var(--mono);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow);white-space:nowrap;padding-right:16px}
.ticker span i{font-style:normal;color:#4A505C;padding-left:16px}
@keyframes ticker{to{transform:translateX(-50%)}}

/* Race-Balken wächst beim Scrollen ins Bild */
.rlane .rtrack::before{transform:translateY(-50%) scaleX(0);transform-origin:left center;transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .2s}
.race.in .rlane .rtrack::before{transform:translateY(-50%) scaleX(1)}
.race.in .rlane.them .rtrack::before{transition-delay:.55s;transition-duration:2.2s}
.rnode i,.rnode small{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.race.in .rnode i,.race.in .rnode small{opacity:1;transform:none}
.race.in .rlane.us .rnode:nth-child(1) i,.race.in .rlane.us .rnode:nth-child(1) small{transition-delay:.25s}
.race.in .rlane.us .rnode:nth-child(2) i,.race.in .rlane.us .rnode:nth-child(2) small{transition-delay:.5s}
.race.in .rlane.us .rnode:nth-child(3) i,.race.in .rlane.us .rnode:nth-child(3) small{transition-delay:.75s}
.race.in .rlane.us .rnode:nth-child(4) i,.race.in .rlane.us .rnode:nth-child(4) small{transition-delay:1s}
.race.in .rlane.them .rnode i,.race.in .rlane.them .rnode small{transition-delay:1.2s}

/* Hover-Mikrointeraktionen */
.kpi,.prob,.step4,.gar,.tm,.pcard{transition:transform .22s ease,box-shadow .22s ease}
.kpi:hover,.step4:hover,.tm:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(20,22,27,.12)}
.prob:hover,.gar:hover{transform:translateY(-4px);border-color:#3A3F4A}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(20,22,27,.14)}
.btn{transition:transform .18s,background .18s,color .18s,box-shadow .18s}
.btn-primary:hover{box-shadow:0 10px 26px rgba(255,90,31,.38)}
.logo .lmark path{transition:transform .25s}
.logo:hover .lmark path{transform:translateX(2.5px)}
.logo:hover .lmark path:last-child{transition-delay:.06s}

@media (prefers-reduced-motion:reduce){
  .hero .kicker,.hero h1,.hero-points li,.hero-btns,.track-card{animation:none;opacity:1}
  .hazard,.seal::before,.ticker .inner{animation:none}
  .rlane .rtrack::before{transform:translateY(-50%) scaleX(1);transition:none}
  .rnode i,.rnode small{opacity:1;transform:none;transition:none}
  .kpi:hover,.prob:hover,.step4:hover,.gar:hover,.tm:hover,.pcard:hover{transform:none}
}

/* Reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease var(--d,0s),transform .6s ease var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .track-head .live i{animation:none}
}

/* ═══ Responsive ═══ */
@media(max-width:1020px){
  .pos-grid{grid-template-columns:repeat(2,1fr)}
  .team{grid-template-columns:repeat(2,1fr)}
  .prob-grid{grid-template-columns:repeat(2,1fr)}
  .steps4{grid-template-columns:repeat(2,1fr)}
  .speedgrid{grid-template-columns:repeat(2,1fr)}
  .hero .wrap{grid-template-columns:1fr;gap:44px}
  .notband .wrap{grid-template-columns:1fr;text-align:left}
  .notband .vs{display:none}
  .price3{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .contact .wrap.grid{grid-template-columns:1fr;gap:40px}
  .fgrid{grid-template-columns:1fr 1fr}
  .gar-hero{grid-template-columns:1fr;text-align:center}
  .seal{margin:0 auto}
}
@media(max-width:720px){
  nav.menu,.nav-cta .btn-ghost{display:none}
  .burger{display:block}
  nav.menu.open{display:flex;position:absolute;top:64px;left:0;right:0;background:var(--paper);flex-direction:column;gap:0;padding:10px 20px 18px;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(20,22,27,.12)}
  nav.menu.open a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav .wrap{height:64px}
  html{scroll-padding-top:76px}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .stats .cell{border-left:none;border-top:1px solid var(--line-dark);padding:14px 10px 11px}
  .stats .num{font-size:34px}
  .pos-grid,.prob-grid,.steps4,.speedgrid,.compare,.faq{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  section{padding:48px 0}
  .costbox{grid-template-columns:1fr;padding:26px 22px}
  .fgrid{grid-template-columns:1fr}
  .topbar .tb-addr,.topbar .tb-mail{display:none}
  .topbar .links{width:100%;justify-content:space-between}
  .hero{padding-top:44px}
  .hero .wrap{padding-bottom:44px}
  .lane{padding:22px 18px}
  .calc{padding:24px 20px}
  .crow{grid-template-columns:1fr auto;gap:12px}
  .crow .bar{display:none}
  .gar-hero{padding:26px 20px;gap:24px}
  .seal{width:150px;height:150px}
  .seal .n{font-size:50px}
  .cbox{padding:26px 20px}
  .pos-note{flex-direction:column;align-items:stretch;text-align:left;padding:20px}
  .pos-note .btn{width:100%}
  .track-foot{flex-wrap:wrap}
  .faq summary{padding:16px 18px;font-size:15.5px}
  .faq .ans{padding:0 18px 18px;font-size:14.5px}
  .fbottom{flex-direction:column;gap:8px}
  .fbottom a{margin-left:0;margin-right:16px}
}
@media(max-width:480px){
  .wrap{padding:0 18px}
  .hero h1{font-size:clamp(31px,9.4vw,38px)}
  h2{font-size:clamp(27px,7.6vw,34px)}
  .hero-btns{flex-direction:column}
  .hero-btns .btn{width:100%}
  .btn{padding:12px 18px;font-size:14.5px}
  .nav-cta .btn-primary{padding:10px 13px;font-size:13.5px}
  .logo{gap:10px}
  .logo .lmark{width:34px;height:34px}
  .l1{font-size:18px}
  .l2{font-size:8px;letter-spacing:.26em;margin-top:4px}
  .tag{font-size:10.5px;padding:6px 11px}
  .track-body{padding:20px 16px 8px}
  .track-head,.track-foot{padding-inline:16px}
  .tstep{gap:11px}
  .step4 .n{font-size:38px}
  .kpi .num{font-size:34px}
  .costbox .big .num{font-size:40px}
  .pcard{padding:24px 20px}
  .pcard .price{font-size:34px}
  .ticker span{font-size:11px}
  .notband h3{font-size:19px}
  .alertline{font-size:12px;padding:12px 14px}
  .prob{padding:20px 18px}
  .contact .scarce{font-size:11px;padding:8px 12px}
  .cline{font-size:14.5px}
  footer{font-size:13.5px}
}

/* ═══ Unterseiten (Positions-Landingpages) ═══ */
.crumbs{background:var(--white);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;padding:10px 0;color:var(--steel)}
.crumbs a{color:var(--ink)}
.crumbs a:hover{color:var(--orange)}
.crumbs i{font-style:normal;padding:0 8px;color:var(--line)}
.sub-hero{background:var(--ink);color:var(--paper);padding:64px 0;position:relative;overflow:hidden}
.sub-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 96%,rgba(255,255,255,.045) 96%),linear-gradient(90deg,transparent 96%,rgba(255,255,255,.045) 96%);background-size:56px 56px;pointer-events:none}
.sub-hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:center}
.sub-hero h1{font-size:clamp(34px,4.6vw,56px);font-weight:800;margin-bottom:20px}
.sub-hero h1 .u{color:var(--orange)}
.sub-hero p.lead{font-size:17px;color:#AEB4BF;max-width:600px;margin-bottom:28px}
.checkcard{background:var(--white);color:var(--ink);border-radius:var(--radius);overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.4)}
.checkcard .ch{background:var(--orange);color:#fff;padding:14px 20px;font-family:var(--disp);font-size:17px;text-transform:uppercase;letter-spacing:.03em}
.checkcard ul{padding:14px 20px 20px}
.checkcard li{padding:11px 0 11px 30px;position:relative;font-size:15px;border-top:1px dashed var(--line)}
.checkcard li:first-child{border-top:none}
.checkcard li::before{content:"✓";position:absolute;left:2px;color:var(--orange);font-weight:800;font-size:16px}
.checkcard .cf{border-top:2px dashed var(--line);background:#FBFAF7;padding:13px 20px;font-family:var(--mono);font-size:11.5px;color:var(--steel)}
.seotext{max-width:840px}
.seotext p{margin-bottom:16px;font-size:16px;color:#3A3F4A}
.seotext p b{color:var(--ink)}
.related{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.related a{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1.5px solid var(--ink);border-radius:8px;padding:11px 18px;font-weight:700;font-size:14.5px;transition:.18s}
.related a:hover{background:var(--ink);color:var(--paper)}
.related a::after{content:"→";color:var(--orange)}
.gar-mini{background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:30px 34px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.gar-mini .n{font-family:var(--disp);font-size:58px;font-weight:800;color:var(--yellow);line-height:.9;flex-shrink:0}
.gar-mini .n small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--paper)}
.gar-mini b{color:#fff}
.gar-mini p{color:#A6ACB8;font-size:15px;flex:1;min-width:260px}
@media(max-width:1020px){.sub-hero .wrap{grid-template-columns:1fr}}
@media(max-width:720px){.sub-hero{padding:44px 0}.gar-mini{padding:24px 20px}}

/* ═══ Mobil-Fixes Header & Unterseiten ═══ */
.cta-short{display:none}
.nav .wrap{gap:10px}
.logo{min-width:0}
.ltext{min-width:0}
.l1{overflow:hidden;text-overflow:ellipsis}
@media(max-width:720px){
  .crumbs{font-size:11px;padding:8px 0}
  .sub-hero .wrap{gap:30px}
  .sub-hero p.lead{font-size:15.5px}
  .checkcard .ch{font-size:15px;padding:12px 16px}
  .checkcard ul{padding:12px 16px 16px}
  .checkcard li{font-size:14px}
  .gar-mini{flex-direction:column;align-items:flex-start;text-align:left}
  .gar-mini .btn{width:100%}
  .seotext p{font-size:15px}
}
@media(max-width:560px){
  .cta-full{display:none}
  .cta-short{display:inline}
  .nav-cta .btn-primary{padding:10px 12px;font-size:13.5px}
}
@media(max-width:480px){
  .sub-hero h1{font-size:clamp(27px,8.4vw,34px)}
  .sub-hero{padding:36px 0}
  .related a{width:100%;justify-content:space-between}
}
@media(max-width:400px){
  .l2{display:none}
  .l1{font-size:16.5px}
  .logo .lmark{width:30px;height:30px}
  .nav-cta .btn-primary{padding:9px 10px;font-size:12.5px}
}
