/* kcNck-Designsystem (Website/styleguide/kcNck-design-system.html): Tokens, Schriften und Grundklassen */
@font-face{font-family:"Chakra Petch";src:url("fonts/chakra-petch-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("fonts/chakra-petch-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
:root{
  --carbon:#08080a; --text:#f3f3f4; --muted:#9b9da4; --faint:#5d5f66;
  --red:#d7192a; --red-hi:#ff2b3d; --red-deep:#5a0810;
  --line:rgba(255,255,255,.08); --line-hi:rgba(255,255,255,.16);
  --glass:rgba(14,14,17,.55);
  --f-head:"Chakra Petch",sans-serif; --f-mono:"JetBrains Mono",monospace; --f-body:"Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --hatch:repeating-linear-gradient(-60deg,transparent 0 9px,rgba(255,255,255,.05) 9px 10px);
  --hatch2:repeating-linear-gradient(60deg,transparent 0 9px,rgba(255,255,255,.045) 9px 10px);
  --redfade:linear-gradient(110deg,rgba(215,25,42,0) 0%,rgba(215,25,42,.15) 30%,rgba(215,25,42,.55) 75%,rgba(215,25,42,.85));
  --redpress:linear-gradient(110deg,rgba(215,25,42,.2) 0%,rgba(215,25,42,.6) 40%,#ff2b3d);
  --s2:8px; --s3:12px; --s4:16px; --s6:24px;
  color-scheme:dark;
}
.cut7{clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px))}
.cut10{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}

.input{width:100%;box-sizing:border-box;font:15px/1.3 var(--f-body);color:var(--text);background:var(--glass);border:0;box-shadow:inset 0 0 0 1px var(--line-hi);padding:8px 12px;border-radius:0;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));transition:box-shadow .3s var(--ease)}
.input:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.input:focus{outline:0;box-shadow:inset 0 0 0 1px var(--red-hi)}
.input::placeholder{color:var(--faint)}
select.input{appearance:none;padding-right:32px;background:linear-gradient(45deg,transparent 50%,var(--muted) 50%) right 16px top 50%/5px 5px no-repeat,linear-gradient(-45deg,transparent 50%,var(--muted) 50%) right 11px top 50%/5px 5px no-repeat,var(--glass)}
select.input option{background:#0e0e11;color:var(--text)}

.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 20px;border:0;border-radius:0;font:500 15px/1.2 var(--f-head);letter-spacing:.06em;color:#fff;cursor:pointer;background:var(--glass);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));transition:box-shadow .4s var(--ease),background .4s var(--ease),transform .15s var(--ease)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:0;box-shadow:inset 0 0 0 1px #fff}
.btn-primary{background:var(--hatch),var(--redfade),var(--glass);box-shadow:inset 0 0 0 1px rgba(255,43,61,.35)}
.btn-primary:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 10px 40px rgba(215,25,42,.45)}
.btn-primary:active{background:var(--hatch),var(--redpress),var(--glass)}
.btn-secondary{box-shadow:inset 0 0 0 1px var(--line-hi),inset 0 0 0 4px transparent,inset 0 0 0 5px var(--line)}
.btn-secondary:hover{background:var(--hatch2),var(--redfade),var(--glass);box-shadow:inset 0 0 0 1px var(--red-hi)}
.btn-secondary:active{background:var(--hatch2),var(--redpress),var(--glass)}
.btn[disabled]{opacity:.45;pointer-events:none}

.chip{border:0;font:500 14px/1 var(--f-head);letter-spacing:.05em;color:var(--muted);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);padding:8px 14px;cursor:pointer;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));transition:color .3s var(--ease),box-shadow .3s var(--ease)}
.chip:hover{color:var(--text);box-shadow:inset 0 0 0 1px var(--line-hi)}
.chip[aria-pressed="true"],.chip:active{color:#fff;background:var(--hatch),var(--redfade),var(--glass);box-shadow:inset 0 0 0 1px rgba(255,43,61,.5)}
.chip:focus-visible{outline:0;box-shadow:inset 0 0 0 1px #fff}