/* Kopfzeile, Navigation, Seitenraster, Media Queries */

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;background:var(--header-bg);
  backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.hrow{display:flex;align-items:center;gap:26px;padding:15px 28px;max-width:1600px;margin:0 auto;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:11px;font-weight:300;
  font-size:17px;letter-spacing:.24em;white-space:nowrap;color:var(--txt);text-transform:uppercase}
.ball{width:9px;height:9px;border-radius:50%;flex:none;background:var(--accent2)}
.ball::after{display:none}
nav{display:flex;gap:0}
nav button{background:none;border:0;padding:10px 16px;color:var(--muted);font-weight:400;font-size:12.5px;
  letter-spacing:.1em;position:relative;transition:color .45s var(--ease);text-transform:uppercase}
nav button::after{content:"";position:absolute;left:16px;right:16px;bottom:3px;height:1px;
  background:var(--txt);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease)}
nav button:hover{color:var(--txt2)}
nav button.on{color:var(--txt)}
nav button.on::after{transform:scaleX(1)}
nav button .badge{border-radius:999px;padding:1px 7px;margin-left:7px;font-size:10px;
  background:var(--bg4);color:var(--muted);font-variant-numeric:tabular-nums}
nav button.on .badge{background:var(--txt);color:var(--bg)}
.spacer{flex:1}
.ghost{background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;font-size:11.5px;color:var(--muted);font-weight:400;letter-spacing:.09em;
  transition:border-color .45s var(--ease),color .45s var(--ease);text-transform:uppercase}
.ghost:hover{border-color:var(--line2);color:var(--txt)}
select.ghost{appearance:none;padding-right:26px;text-transform:none;letter-spacing:.03em;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 51%, calc(100% - 10px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select.ghost option{background:var(--bg2);color:var(--txt)}

/* ---------- Layout ---------- */
main{max-width:1600px;margin:0 auto;padding:40px 28px 120px}
.view{display:none}
.view.on{display:block;animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
h2{margin:0 0 10px}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 34px;line-height:1.7;max-width:64ch;font-weight:300}


@media(max-width:1180px){
  .homegrid{grid-template-columns:repeat(2,1fr)}
  .homegrid .span2,.homegrid .span3{grid-column:span 2}
  .hero-bg{opacity:.22}
}
@media(max-width:1000px){
  .hero-in{padding:34px 30px}
  .hero h1{font-size:38px}
  .hero{min-height:auto}
  .homegrid{grid-template-columns:1fr}
  .homegrid .span2,.homegrid .span3{grid-column:span 1}
  .deckwrap{grid-template-columns:1fr}
  .side{position:static}
  .mbody{grid-template-columns:1fr}
  .mbody .big{max-width:260px;margin:0 auto}
}
@media(max-width:620px){
  .hero-bg{display:none}
  .hero h1{font-size:31px}
  .hero-in{padding:26px 20px}
  .hrow{padding:10px 14px;gap:10px}
  main{padding:16px 14px 60px}
  #q{min-width:100%}
  .field input,.field select{min-width:130px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px}
  nav button{padding:7px 11px;font-size:13px}
}