.hkb-vip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:var(--hk-space-8);align-items:start}
.hkb-vip__text{display:flex;flex-direction:column;gap:var(--hk-space-3);min-width:0}
.hkb-vip__text>p{color:rgba(255,255,255,.84)}
.hkb-vip__regeln{display:flex;flex-direction:column;gap:var(--hk-space-1);margin:0;padding:0;list-style:none;font-size:14px;color:rgba(255,255,255,.84)}
.hkb-vip__regeln li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--hk-space-1)}
.hkb-vip__regeln li::before{content:"";width:8px;height:8px;margin-top:var(--hk-space-1);background:#F5707A}
.hkb-rechner{background:#181818;border:1px solid #2A2A2A;padding:var(--hk-space-4);display:flex;flex-direction:column;gap:var(--hk-space-3);min-width:0;color:#fff}
.hkb-rechner__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--hk-space-1);align-items:baseline}
.hkb-rechner__kopf b{font-size:13px;color:#BDBDBD}
.hkb-rechner__kopf span{font-size:12px;color:#8F8F8F}
.hkb-rechner__stufen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--hk-space-1)}
.hkb-rechner__stufe{display:flex;flex-direction:column;align-items:center;gap:var(--hk-space-1);text-align:center;min-width:0}
.hkb-rechner__stufe b{font-size:11.5px;letter-spacing:.04em;white-space:nowrap}
.hkb-rechner__stufe small{font-size:11.5px;color:#8F8F8F;line-height:1.35}
.hkb-rechner__stufe.is-erreicht small{color:#BDBDBD}
.hkb-rechner .hk-medaille{transition:transform .4s cubic-bezier(.2,.8,.2,1.4),filter .4s}
.hkb-rechner__stufe:not(.is-erreicht) .hk-medaille{filter:grayscale(1) brightness(.45);transform:scale(.88)}
.hkb-rechner__stufe.is-neu .hk-medaille{animation:hkb-plopp .7s cubic-bezier(.2,.8,.2,1.4)}
@keyframes hkb-plopp{0%{transform:scale(.8)}55%{transform:scale(1.22)}100%{transform:scale(1)}}
.hkb-rechner__leiste{position:relative;height:10px;background:#2A2A2A}
.hkb-rechner__fuell{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#a85c2a,#f2a900 45%,#8a2bff 75%,#5cd6f5);transition:width .5s cubic-bezier(.2,.8,.2,1);overflow:hidden}
.hkb-rechner__fuell::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:hkb-glanz 2.2s linear infinite}
@keyframes hkb-glanz{from{background-position:-40% 0}to{background-position:140% 0}}
.hkb-rechner__marke{position:absolute;top:-4px;width:2px;height:18px;background:#555;transform:translateX(-1px)}
.hkb-rechner__regler{display:flex;flex-direction:column;gap:var(--hk-space-1)}
.hkb-rechner__regler label{font-size:13px;color:#BDBDBD;display:flex;justify-content:space-between;gap:var(--hk-space-1);margin:0}
.hkb-rechner__regler output{font-weight:700;color:#fff;font-size:15px}
.hkb-rechner__regler input{width:100%;accent-color:#BE1522;height:28px;margin:0}
.hkb-rechner__ergebnis{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--hk-space-2);align-items:center;padding-top:var(--hk-space-2);border-top:1px solid #2A2A2A}
.hkb-rechner__zeichen{display:inline-flex}
.hkb-rechner__zeichen [hidden]{display:none}
.hkb-rechner__text{display:flex;flex-direction:column;gap:var(--hk-space-05);min-width:0}
.hkb-rechner__text b{font-size:18px}
.hkb-rechner__text span{font-size:13.5px;color:#BDBDBD}
.hkb-rechner__text .hkb-rechner__vorteil{color:#4BE39C;font-weight:600}
.hkb-rechner__hinweis{font-size:12px;color:#8F8F8F;margin:0}
@media (max-width:980px){.hkb-vip{grid-template-columns:minmax(0,1fr);gap:var(--hk-space-4)}}
@media (max-width:620px){
  .hkb-rechner{padding:var(--hk-space-2)}
  .hkb-rechner__stufen{gap:var(--hk-space-05)}
  .hkb-rechner__stufe b{font-size:8.5px;letter-spacing:0}
  .hkb-rechner__stufe small{font-size:10px}
  .hkb-rechner .hk-medaille{width:44px!important;height:44px!important}
}
@media (prefers-reduced-motion:reduce){.hkb-vip *,.hkb-vip *::before,.hkb-vip *::after{animation:none!important;transition:none!important}}