:root{
  --black:#000;
  --red:#e3000f;
  --red-deep:#b5000c;
  --steel:#9b9fa4;
  --asphalt:#24272b;
  --concrete:#eceef0;
  --paper:#fff;
  --ink:#16181a;
  --muted:#565c63;
  --led:#ffb020;
  --ok:#4cdf7a;
  --full:#ff4a4a;
  --display:"Michroma","Eurostile","Bank Gothic",sans-serif;
  --body:"Archivo",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --gutter:16px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.55;font-variation-settings:"wdth" 100}
h1,h2,h3{font-family:var(--body);font-variation-settings:"wdth" 118;font-weight:800;line-height:1.08;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,1.3rem + 1.8vw,2.6rem);font-variation-settings:"wdth" 104}
h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
a{color:inherit;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:760px}
.skip{position:absolute;left:-999px;top:0;background:var(--black);color:#fff;padding:8px 12px;z-index:9}
.skip:focus{left:8px;top:8px}
.kicker{font-weight:700;font-variation-settings:"wdth" 112;color:var(--red-deep);font-size:1rem;margin-bottom:.5em}

.top{border-bottom:3px solid var(--black)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--black)}
.logo img{display:block;width:220px;height:auto}
.logo-sub{font-weight:700;font-variation-settings:"wdth" 112;padding-left:14px;border-left:3px solid var(--red);line-height:1.2}
.nav{display:flex;flex-wrap:wrap;gap:4px 20px;font-weight:600}
.nav a{text-decoration:none;padding:6px 0;border-bottom:3px solid transparent}
.nav a:hover{border-bottom-color:var(--red)}

.hero{position:relative;overflow:hidden;color:#fff;background:#0d0f12;min-height:clamp(560px,80vh,780px);display:grid;align-items:center;padding:72px 0;border-bottom:3px solid var(--black)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.hero-bg .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero-bg .slide.on{opacity:1}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,9,11,.93) 0 34%,rgba(8,9,11,.55) 55%,rgba(8,9,11,.05) 82%)}
.hero-in{position:relative;width:100%}
.hero-copy{max-width:38rem}
.hero .kicker{color:#ff5a5a}
.hero .lead{color:#d3d6da}
.lead{font-size:1.2rem;color:var(--muted);max-width:40rem}
.hero-facts{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.hero-facts li{padding-left:22px;position:relative;font-weight:600}
.hero-facts li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:12px;background:var(--red)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* Slot-Tafel */
.board{background:var(--asphalt);color:#e9ebed;border-radius:6px;padding:22px 22px 16px;box-shadow:inset 0 0 0 3px var(--black),0 18px 0 -10px var(--black)}
.board-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.board-head h2{font-size:1.1rem;margin:0;color:#fff}
.board-head span{color:var(--steel);font-size:.9rem}
.board table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.board th{text-align:left;font-weight:600;color:var(--steel);font-size:.8rem;padding:0 8px 8px 0;border-bottom:1px solid #3a3e44}
.board td{padding:9px 8px 9px 0;border-bottom:1px solid #3a3e44;font-size:.95rem}
.board td.t{font-family:var(--display);font-size:.85rem;color:var(--led);letter-spacing:.04em}
.bar{display:block;height:8px;background:#0a0a0a;border:1px solid #3a3e44;min-width:60px}
.bar i{display:block;height:100%;background:var(--led)}
.st{font-weight:700;font-size:.85rem}
.st.free{color:var(--ok)}
.st.full{color:var(--full)}
.board-note{margin:12px 0 0;color:var(--steel);font-size:.82rem}

.btn{display:inline-block;text-decoration:none;font:inherit;font-weight:700;padding:12px 20px;background:var(--black);color:#fff;border:0;border-radius:3px;cursor:pointer;box-shadow:3px 3px 0 var(--red)}
.btn:hover{background:var(--red-deep)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--red)}
.btn.ghost{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),3px 3px 0 var(--red)}
.btn.ghost:hover{background:var(--concrete)}

.band{background:var(--concrete);padding:64px 0}
.plain{padding:64px 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.flow{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.card{background:var(--paper);border:3px solid var(--black);padding:22px 22px 10px}
.card h3{display:flex;align-items:center;gap:10px}
.dir{font-family:var(--display);font-size:.75rem;font-weight:400;background:var(--black);color:#fff;padding:4px 8px;letter-spacing:.05em}
.list{padding-left:1.2em;margin:0 0 1em}
.list li{margin-bottom:.5em}
.list li::marker{color:var(--red)}
.small{color:var(--muted);font-size:.95rem}

.uses{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:28px 0;border:3px solid var(--black)}
.use{padding:18px;border-right:3px solid var(--black);background:var(--paper)}
.use:last-child{border-right:0}
.use b{display:block;font-variation-settings:"wdth" 118;font-size:1.1rem}
.use span{color:var(--muted);font-size:.92rem}
.fields{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.fields li{border:2px solid var(--ink);padding:4px 10px;font-weight:600;font-size:.92rem;background:var(--paper)}

.codes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;padding:0;margin:20px 0 0}
.codes li{border-left:4px solid var(--red);background:rgba(255,255,255,.08);padding:8px 12px;font-weight:600}
.gate{position:relative;color:#fff;padding:96px 0;background-color:#0d0f12;background-image:linear-gradient(90deg,rgba(8,9,11,.94) 0 45%,rgba(8,9,11,.25) 80%),url("img/terminal-gate-1600.jpg");background-image:linear-gradient(90deg,rgba(8,9,11,.94) 0 45%,rgba(8,9,11,.25) 80%),image-set(url("img/terminal-gate-1600.webp") type("image/webp"),url("img/terminal-gate-1600.jpg") type("image/jpeg"));background-size:cover;background-position:70% 50%;background-repeat:no-repeat}
.gate-copy{max-width:40rem}
.gate .small{color:#c9ccd0}

.auto{border:3px solid var(--black);padding:24px;background:var(--paper)}
.auto p:last-child{margin-bottom:0}

details{border-top:2px solid var(--ink);padding:14px 0}
details:last-of-type{border-bottom:2px solid var(--ink)}
summary{cursor:pointer;font-weight:700;font-size:1.1rem}
details p{margin:10px 0 0;max-width:62ch}
.erp{margin-top:40px;padding:24px;border:3px solid var(--black);background:var(--paper)}
.erp h3{margin-bottom:.4em}

.foot{border-top:3px solid var(--black);padding:28px 0 36px}
.foot-in p{margin:0 0 6px}
.foot-logo{display:inline-block;margin-bottom:14px}
.foot-logo img{display:block;width:180px;height:auto}
.foot-sites{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;margin:18px 0 6px;padding-top:14px;border-top:1px solid var(--concrete)}
.foot-sites h2{flex-basis:100%;font-size:.95rem;margin:0 0 2px;color:var(--muted);font-variation-settings:"wdth" 100;font-weight:700}
.foot-sites a{font-weight:600}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 20px;margin:10px 0 16px;font-weight:600}
.fine{color:var(--muted);font-size:.9rem}

@media (max-width:960px){
  .uses{grid-template-columns:1fr 1fr}
  .use:nth-child(2){border-right:0}
  .use:nth-child(-n+2){border-bottom:3px solid var(--black)}
  .codes{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .logo img{width:170px}
  .hero-in,.two,.flow{grid-template-columns:1fr}
  .hero{min-height:0;padding:250px 0 56px}
  .hero-bg{bottom:auto;height:300px}
  .hero-bg img{object-position:72% 50%}
  .hero-bg::after{background:linear-gradient(rgba(13,15,18,0) 45%,#0d0f12)}
  .gate{padding:64px 0;background-image:linear-gradient(rgba(8,9,11,.85),rgba(8,9,11,.85)),url("img/terminal-gate-960.jpg");background-image:linear-gradient(rgba(8,9,11,.85),rgba(8,9,11,.85)),image-set(url("img/terminal-gate-960.webp") type("image/webp"),url("img/terminal-gate-960.jpg") type("image/jpeg"))}
}
@media (max-width:520px){
  .uses{grid-template-columns:1fr}
  .use{border-right:0;border-bottom:3px solid var(--black)}
  .use:last-child{border-bottom:0}
  .codes{grid-template-columns:1fr}
  .board{padding:16px 14px 12px}
  .board th:nth-child(3),.board td:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
