@font-face{
  font-family:"Archivo";
  src:url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
}
:root{
  --bg:#141416;--ink:#F2F2F3;--muted:#A9A9AE;--line:#2A2A2E;--sig:#FF6A2C;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink)}
body{
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-stretch:100%;line-height:1.5;
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit}
a:focus-visible{outline:2px solid var(--sig);outline-offset:3px;border-radius:2px}

.hero{
  flex:1;width:100%;max-width:1240px;margin:0 auto;
  padding:clamp(40px,8vh,96px) clamp(16px,5vw,64px) 0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  align-items:center;gap:clamp(24px,2.5vw,36px);
}
.logo{display:inline-block;margin-bottom:clamp(20px,3vw,32px)}
.logo img{display:block;height:clamp(30px,3.2vw,42px);width:auto}

h1{
  font-stretch:125%;font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,3vw,44px);line-height:1.04;letter-spacing:.005em;
  text-wrap:balance;
}
.mark{
  white-space:nowrap;
  background:linear-gradient(var(--sig),var(--sig)) no-repeat 0 92% / 100% .085em;
  padding-bottom:.04em;
}
.sub{
  margin-top:clamp(16px,2vw,24px);color:var(--muted);
  font-size:clamp(16px,1.6vw,21px);letter-spacing:.005em;
}
.sub .dash{margin:0 .25em}

.screen{align-self:end;justify-self:end;width:100%;max-width:420px}
@media (min-width:821px){
  .copy{container-type:inline-size}
  h1{font-size:clamp(26px,6cqi,58px)}
  h1 .l{display:block;white-space:nowrap}
}
.screen img{display:block;width:100%;height:auto}

.foot{
  width:100%;max-width:1240px;margin:0 auto;
  padding:20px clamp(16px,5vw,64px) 24px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;
  border-top:1px solid var(--line);font-size:14px;color:var(--muted);
}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;padding-top:40px}
  .screen{justify-self:center;max-width:420px;margin-top:8px}
  h1{font-size:clamp(26px,7.4vw,44px)}
}

/* Unterseiten */
.page{flex:1;width:100%;max-width:720px;margin:0 auto;padding:40px 16px 64px}
.page .logo{margin-bottom:40px}
.page .logo img{height:36px}
.page h1{font-size:clamp(26px,4vw,40px);margin-bottom:24px;max-width:none}
.page h2{font-size:18px;font-weight:700;margin:28px 0 8px}
.page p,.page li{color:#D4D4D8;margin-bottom:10px}
.page ul{padding-left:20px}
.page a{color:var(--ink);text-underline-offset:3px}

/* Layout: Inhalt vertikal mittig, Handy begrenzt (01.10.2026) */
.hero{align-content:center;padding-bottom:clamp(24px,5vh,64px)}
.screen{align-self:center}
.screen img{width:auto;max-width:100%;max-height:min(62vh,441px);margin-left:auto;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}
@media (max-width:820px){.screen img{margin:0 auto}}