/* ============================================================
   KONTO v3 — klasser: kn
   ============================================================ */
.kn{background:var(--papir)}
.kn__in{max-width:1240px;margin:0 auto;padding:0 clamp(16px,3.2vw,48px)}
.kn__eb{margin:0 0 14px;font-size:13px;font-weight:500;color:var(--text-3)}
.kn__h{margin:0;font-size:clamp(38px,5vw,72px);line-height:1;letter-spacing:-.045em;font-weight:700}
.kn__h span{display:block;color:var(--text-3)}
.kn__lede{margin:20px 0 0;max-width:520px;font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--text-2)}
@keyframes knOp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- logget ud ---------- */
.kn__ud{padding:clamp(48px,calc(9 * var(--vh,1vh)),110px) 0 clamp(72px,calc(11 * var(--vh,1vh)),130px);background:linear-gradient(180deg,var(--hvid) 0%,var(--papir) 60%)}
.kn__udG{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(32px,6vw,96px);align-items:center}
.kn__udG>div:first-child{animation:knOp .9s var(--ease-out) both}
.kn__fordel{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:18px}
.kn__fordel li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.kn__fordel i{width:40px;height:40px;border-radius:12px;background:#fff;display:grid;place-items:center;font-style:normal;font-size:17px;box-shadow:0 1px 0 rgba(21,23,22,.04)}
.kn__fordel b{display:block;font-size:16px}
.kn__fordel span{font-size:14.5px;line-height:1.5;color:var(--text-2)}
.kn__kort{background:#fff;border-radius:28px;padding:clamp(24px,3vw,36px);box-shadow:0 1px 0 rgba(21,23,22,.04),0 30px 60px -40px rgba(21,23,22,.45);animation:knOp .9s .2s var(--ease-out) both}
.kn__kort h2{margin:0 0 6px;font-size:24px;letter-spacing:-.03em}
.kn__kort>p{margin:0 0 20px;font-size:15px;line-height:1.55;color:var(--text-2)}
.kn__seg{display:flex;background:var(--flade);border-radius:999px;padding:4px;margin:0 0 22px}
.kn__seg button{all:unset;background:transparent;flex:1;text-align:center;cursor:pointer;font-size:14.5px;font-weight:600;color:var(--text-2);padding:10px 14px;border-radius:999px;transition:background .25s,color .25s,box-shadow .25s}
.kn__seg button[aria-selected="true"]{background:#fff;color:var(--text-1);box-shadow:0 1px 2px rgba(21,23,22,.12),0 3px 10px -6px rgba(21,23,22,.3)}
.kn__seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kn__felt{margin:0 0 14px}
.kn__felt label{display:block;margin:0 0 7px;font-size:13.5px;font-weight:600;color:var(--text-2)}
.kn__inp{position:relative}
.kn__inp input{width:100%;box-sizing:border-box;border:0;background:var(--papir);border-radius:14px;padding:14px 16px;font:inherit;font-size:16px}
.kn__inp input:focus{outline:2px solid var(--accent)}
.kn__vis{all:unset;cursor:pointer;position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:600;color:var(--text-3);padding:6px 8px;border-radius:8px}
.kn__vis:hover{color:var(--text-1)}
.kn__vis:focus-visible{outline:2px solid var(--accent)}
.kn__styrke{display:flex;gap:4px;margin:8px 0 0}
.kn__styrke i{flex:1;height:4px;border-radius:999px;background:var(--flade-2);transition:background .3s}
.kn__styrke[data-s="1"] i:nth-child(-n+1){background:var(--neg)}
.kn__styrke[data-s="2"] i:nth-child(-n+2){background:var(--warn)}
.kn__styrke[data-s="3"] i:nth-child(-n+3){background:var(--accent)}
.kn__styrke[data-s="4"] i{background:var(--accent)}
.kn__hint{margin:6px 0 0;font-size:12.5px;color:var(--text-3)}
.kn__fejl{margin:0 0 14px;padding:11px 14px;border-radius:12px;background:var(--neg-flad);color:var(--neg-ink);font-size:14px;line-height:1.45}
.kn__knap{width:100%;justify-content:center;border-radius:999px;padding:14px 22px;font-size:16px}
.kn__lnkR{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.kn__lnk{all:unset;cursor:pointer;font-size:14px;font-weight:600;color:var(--accent-ink)}
.kn__lnk:hover{text-decoration:underline}
.kn__lnk[hidden]{display:none}
.kn__lnk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kn__note{margin:20px 0 0;font-size:12.5px;line-height:1.55;color:var(--text-3)}
.kn__note a{color:var(--accent-ink);font-weight:600}
.kn__ok{text-align:center}
.kn__ring{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--accent-flad);color:var(--accent-ink);display:grid;place-items:center;font-size:28px;font-weight:700;animation:knPop .6s var(--ease-spring) both}
@keyframes knPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* ---------- logget ind ---------- */
.kn__ind{padding:clamp(40px,calc(7 * var(--vh,1vh)),88px) 0 clamp(72px,calc(11 * var(--vh,1vh)),130px);background:linear-gradient(180deg,var(--hvid) 0%,var(--papir) 320px)}
.kn__top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center;animation:knOp .8s var(--ease-out) both}
.kn__av{width:clamp(72px,8vw,104px);height:clamp(72px,8vw,104px);border-radius:50%;background:var(--text-1);color:#fff;display:grid;place-items:center;font-size:clamp(30px,3.4vw,44px);font-weight:700;letter-spacing:-.04em}
.kn__navn{margin:0;font-size:clamp(30px,4vw,52px);line-height:1.02;letter-spacing:-.045em;overflow-wrap:anywhere}
.kn__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:10px 0 0;font-size:14px;color:var(--text-3)}
.kn__rang{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--flade);color:var(--text-2)}
.kn__rang[data-t="3"],.kn__rang[data-t="4"]{background:var(--accent-flad);color:var(--accent-ink)}
.kn__ud2{border-radius:999px}
.kn__niv{margin:28px 0 0;background:#fff;border-radius:22px;padding:18px 22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 20px;align-items:center}
.kn__niv p{margin:0;font-size:14.5px;color:var(--text-2)}
.kn__niv p b{color:var(--text-1)}
.kn__nivB{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.kn__nivB i{height:8px;border-radius:999px;background:var(--flade);overflow:hidden}
.kn__nivB em{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width 1s var(--ease-out)}
.kn__nivA{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;font-size:11.5px;color:var(--text-3)}
.kn__nivA span{text-align:right}
.kn__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-top:12px}
.kn__b{grid-column:span 6;background:#fff;border-radius:26px;padding:clamp(20px,2.4vw,30px);min-width:0}
.kn__b--3{grid-column:span 4}.kn__b--8{grid-column:span 8}.kn__b--12{grid-column:1/-1}
.kn__b h2{margin:0 0 4px;font-size:19px;letter-spacing:-.02em}
.kn__b>p{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--text-3)}
.kn__navnR{display:flex;gap:8px}
.kn__navnR input{flex:1;min-width:0;border:0;background:var(--papir);border-radius:14px;padding:12px 14px;font:inherit;font-size:16px}
.kn__navnR input:focus{outline:2px solid var(--accent)}
.kn__navnR .btn{border-radius:999px}
.kn__kvit{margin:8px 0 0;font-size:13px;min-height:18px}
.kn__sw{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line-soft);cursor:pointer;font-size:15px}
.kn__sw:first-of-type{border-top:0;padding-top:0}
.kn__sw input{position:absolute;opacity:0;pointer-events:none}
.kn__sw i{flex:none;width:40px;height:24px;border-radius:999px;background:var(--flade-2);position:relative;transition:background .25s}
.kn__sw i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .3s var(--ease-spring)}
.kn__sw input:checked+i{background:var(--accent)}
.kn__sw input:checked+i::after{transform:translateX(16px)}
.kn__sw input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.kn__sw span b{display:block;font-weight:600}
.kn__sw span small{display:block;font-size:13px;color:var(--text-3);line-height:1.45;margin-top:2px}
.kn__prof{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.kn__pf{all:unset;cursor:pointer;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:16px;background:var(--papir);transition:background .2s}
.kn__pf:hover{background:var(--flade)}
.kn__pf:focus-visible{outline:2px solid var(--accent)}
.kn__pf span{font-size:12.5px;color:var(--text-3)}
.kn__pf b{font-size:16px;letter-spacing:-.01em}
.kn__pf.std b{color:var(--text-3);font-weight:500}
.kn__pf.std b::after{content:" · standard";font-size:12px}
.kn__ringS{display:flex;align-items:center;gap:18px}
.kn__ringS svg{width:84px;height:84px;flex:none;transform:rotate(-90deg)}
.kn__ringS circle{fill:none;stroke-width:9}
.kn__ringS .rb{stroke:var(--flade)}
.kn__ringS .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease-out)}
.kn__ringS b{display:block;font-size:30px;letter-spacing:-.04em;line-height:1}
.kn__ringS span{font-size:14px;color:var(--text-2)}
.kn__b .btn{border-radius:999px;margin-top:16px}
.kn__gv{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.kn__g{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border-radius:16px;background:var(--papir);color:inherit;text-decoration:none;transition:background .2s}
.kn__g:hover{background:var(--flade)}
.kn__g b{display:block;font-size:15px}
.kn__g small{display:block;font-size:13px;color:var(--text-3);margin-top:2px}
.kn__g em{font-style:normal;color:var(--text-3)}
.kn__g[hidden]{display:none}
.kn__hand{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.kn__hand .btn{border-radius:999px}
.kn__slet{color:var(--neg-ink)!important;border-color:var(--neg-flad)!important}
.kn__slet:hover{background:var(--neg-flad)!important}

/* ark */
.kn__ark{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(21,23,22,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.kn__ark[hidden]{display:none}
.kn__arkB{width:min(460px,100%);background:#fff;border-radius:28px;padding:30px;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);animation:knOp .35s var(--ease-out)}
.kn__arkB h2{margin:0 0 8px;font-size:24px;letter-spacing:-.03em}
.kn__arkB p{margin:0 0 20px;font-size:15px;line-height:1.55;color:var(--text-2)}
.kn__arkB div{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.kn__arkB .btn{border-radius:999px}
.kn__rod{background:var(--neg);border-color:var(--neg);color:#fff}
.kn__rod:hover{background:var(--neg-ink);border-color:var(--neg-ink)}

@media (max-width:980px){
  .kn__udG{grid-template-columns:1fr}
  .kn__b,.kn__b--3,.kn__b--8{grid-column:1/-1}
}
@media (max-width:640px){
  .kn__top{grid-template-columns:auto minmax(0,1fr)}
  .kn__ud2{grid-column:1/-1;justify-self:start}
  .kn__prof{grid-template-columns:1fr 1fr}
  .kn__pf{padding:12px}
  .kn__pf b{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  .kn__udG>div:first-child,.kn__kort,.kn__top,.kn__ring{animation:none}
}