/* Schriften, selbst gehostet */
@font-face{font-family:'Archivo Black';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/archivo-black-400.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/archivo-400.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/archivo-600.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/archivo-700.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/plex-mono-600.woff2) format('woff2')}
:root{
    --steel:#D2D5D9;
    --steel-dk:#A7ACB2;
    --ink:#0E0F11;
    --paper:#FAFAF7;
    --red:#FF2E12;
    --red-dk:#D91B00;
    --pad: clamp(18px, 4vw, 56px);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--steel); color:var(--ink);
    font-family:'Archivo',system-ui,sans-serif; font-size:17px; line-height:1.5;
    background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, rgba(0,0,0,0) 1px 6px);
  }
  h1,h2,h3{font-family:'Archivo Black',Impact,sans-serif; text-transform:uppercase; margin:0; line-height:.92; letter-spacing:-.02em}
  .mono{font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.12em; font-size:12px}
  a{color:inherit}
  .wrap{max-width:1180px; margin:0 auto; padding:0 var(--pad)}

  /* ---- top bar ---- */
  .bar{position:sticky; top:0; z-index:30; background:var(--paper); background-image:none; border-bottom:2px solid var(--ink)}
  .bar .wrap{display:flex; align-items:center; gap:16px; height:60px; justify-content:space-between; background:var(--paper)}
  .logo{font-family:'Archivo Black',sans-serif; font-size:22px; letter-spacing:-.02em; color:var(--ink)}
  .logo b{color:var(--red)}
  .bar .mid{display:none; color:#22252a; font-size:12.5px}
  .btn{display:inline-block; background:var(--red-dk); color:var(--paper); border:2px solid var(--ink);
       font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.08em; font-size:12.5px; font-weight:600;
       padding:10px 15px; text-decoration:none; box-shadow:4px 4px 0 var(--ink); transition:transform .12s, box-shadow .12s}
  .btn:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}
  .btn:focus-visible{outline:3px solid var(--ink); outline-offset:3px}

  /* ---- hero ---- */
  .hero{padding:clamp(36px,7vw,84px) 0 0}
  .hero-grid{display:grid; grid-template-columns:1fr; gap:28px; align-items:end}
  h1{font-size:clamp(44px,11.5vw,120px)}
  h1 .red{color:var(--red)}
  .kicker{display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:20px; color:var(--ink); font-size:12.5px; letter-spacing:.09em}
  .lede{max-width:46ch; margin:22px 0 0; font-size:clamp(17px,2.1vw,20px)}
  .plate{border:2px solid var(--ink); background:var(--paper); padding:10px; box-shadow:10px 10px 0 var(--red); max-width:360px}
  .plate img{display:block; width:100%; height:auto; filter:saturate(1.05)}
  .plate figcaption{padding-top:8px; display:flex; justify-content:space-between; gap:10px}

  /* ---- ticker ---- */
  .ticker{margin-top:clamp(36px,6vw,72px); background:var(--ink); color:var(--paper); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); overflow:hidden; padding:12px 0}
  .track{display:flex; gap:40px; width:max-content; animation:slide 34s linear infinite}
  .track span{white-space:nowrap}
  .track em{color:var(--red); font-style:normal}
  @keyframes slide{to{transform:translateX(-50%)}}

  /* ---- sections ---- */
  section{padding:clamp(48px,8vw,104px) 0}
  .eyebrow{display:flex; align-items:center; gap:12px; margin-bottom:18px}
  .eyebrow::after{content:""; flex:1; height:2px; background:var(--ink)}
  h2{font-size:clamp(30px,5.4vw,58px); margin-bottom:26px}

  .stats{display:grid; grid-template-columns:repeat(2,1fr); gap:0; border:2px solid var(--ink); background:var(--paper)}
  .stat{padding:22px 18px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-last-child(-n+2){border-bottom:0}
  .stat b{display:block; font-family:'Archivo Black',sans-serif; font-size:clamp(30px,6vw,46px); line-height:1}
  .stat span{display:block; margin-top:6px; color:#2b2e33}

  /* ---- menu ---- */
  .menu{background:var(--paper); border:2px solid var(--ink); padding:clamp(20px,4vw,44px); box-shadow:12px 12px 0 var(--ink)}
  .menu-head{display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid var(--ink); padding-bottom:14px; margin-bottom:6px; flex-wrap:wrap; gap:8px}
  .item{padding:20px 0; border-bottom:1px dashed #b6b6b0}
  .item:last-child{border-bottom:0}
  .item .row{display:flex; align-items:baseline; gap:8px}
  .item h3{font-size:clamp(19px,3vw,25px)}
  .leader{flex:1; border-bottom:2px dotted #b0b0aa; transform:translateY(-4px)}
  .price{font-family:'IBM Plex Mono',monospace; font-weight:600; white-space:nowrap}
  .item p{margin:8px 0 0; max-width:62ch; color:#2b2e33; font-size:15.5px}
  .item ul{margin:10px 0 0; padding-left:20px; max-width:62ch; color:#2b2e33; font-size:15.5px}
  .item li{margin:3px 0}
  .item li::marker{color:var(--red)}
  .item ul + p{margin-top:12px}
  .item.special{background:#FFF3F1; margin:0 calc(-1 * clamp(20px,4vw,44px)); padding-left:clamp(20px,4vw,44px); padding-right:clamp(20px,4vw,44px); border-top:2px solid var(--red); border-bottom:2px solid var(--red)}

  /* ---- cases ---- */
  .case{border:2px solid var(--ink); background:var(--paper); margin-bottom:26px}
  .case-head{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:18px; border-bottom:2px solid var(--ink)}
  .case-head h3{font-size:clamp(22px,4vw,32px)}
  .tiles{display:grid; grid-template-columns:repeat(3,1fr)}
  .tiles img{display:block; width:100%; height:100%; object-fit:cover; border-right:2px solid var(--ink)}
  .tiles img:last-child{border-right:0}
  .case-foot{display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--ink)}
  .case-foot div{padding:14px 12px; border-right:2px solid var(--ink)}
  .case-foot div:last-child{border-right:0}
  .case-foot b{display:block; font-family:'Archivo Black',sans-serif; font-size:22px}

  /* ---- ablauf ---- */
  .steps{display:grid; grid-template-columns:1fr; gap:2px; background:var(--ink); border:2px solid var(--ink)}
  .step{background:var(--steel); padding:22px 18px}
  .step h3{font-size:20px; margin-bottom:8px}
  .step p{margin:0; color:#23262b; font-size:15.5px}

  /* ---- cta ---- */
  .cta{background:var(--ink); color:var(--paper); border:2px solid var(--ink); padding:clamp(26px,5vw,60px); text-align:center}
  .cta h2{color:var(--paper)}
  .cta p{max-width:48ch; margin:0 auto 26px; color:#c8ccd2}
  .cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
  footer{border-top:2px solid var(--ink); padding:22px 0 40px}
  footer .wrap{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}

  @media (min-width:820px){
    .bar .mid{display:block}
    .hero-grid{grid-template-columns:1.35fr .65fr; gap:48px}
    .stats{grid-template-columns:repeat(4,1fr)}
    .stat{border-bottom:0}
    .stat:nth-child(2n){border-right:2px solid var(--ink)}
    .stat:last-child{border-right:0}
    .steps{grid-template-columns:repeat(3,1fr)}
  }
  @media (prefers-reduced-motion:reduce){ .track{animation:none} * {transition:none !important} }

/* ---- Rechtsseiten ---- */
.legal main{padding:clamp(34px,6vw,70px) 0 clamp(50px,7vw,90px)}
.legal .wrap{max-width:820px}
.legal h1{font-size:clamp(34px,7vw,62px)}
.legal h2{font-size:clamp(19px,2.6vw,24px); margin:0 0 8px}
.legal .card{background:var(--paper); background-image:none; border:2px solid var(--ink); box-shadow:12px 12px 0 var(--ink);
             padding:clamp(20px,4vw,40px); margin-top:clamp(26px,4vw,44px)}
.legal .block{padding:20px 0; border-bottom:1px dashed #b6b6b0}
.legal .block:last-child{border-bottom:0}
.legal .block p{margin:0 0 10px; max-width:66ch}
.legal .block p:last-child{margin-bottom:0}
.legal .block ul{margin:8px 0 0; padding-left:20px; max-width:66ch}
.legal .block li{margin:4px 0}
.legal .block a{text-decoration:none; border-bottom:2px solid var(--red)}
.legal .stand{margin-top:18px; color:#4a4e54}
.bar .logo{text-decoration:none}
footer a{text-decoration:none}
.skip{position:absolute; left:-999px; top:8px; background:var(--paper); border:2px solid var(--ink); padding:8px 12px; z-index:100}
.skip:focus{left:8px}