:root{
  --flasche:#0b231a; --flasche2:#06150f; --band:#1b5e3f; --band2:#123f2b; --smaragd:#2ea866; --smaragd-dk:#17703f;
  --messing:#e3b13c; --messing-lt:#ffe08a; --messing-dk:#94681a; --creme:#f4e7c6; --hell:#e8f0ea; --matt:#9db9aa;
}
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;
  font:400 15px/1.5 Barlow,Arial,sans-serif;color:var(--hell);
  background:linear-gradient(160deg,#0f3324,var(--flasche) 45%,var(--flasche2));overflow-x:hidden}
a{color:var(--messing-lt)}
.sl-page{width:100%;max-width:900px}

.sl-key{display:flex;align-items:center}
.sl-bow{flex:0 0 230px;position:relative;z-index:2;margin-right:-30px}
.sl-ring{width:230px;height:230px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(circle,var(--creme) 0 54%,transparent 55%),conic-gradient(from 30deg,var(--messing-lt),var(--messing),var(--messing-dk),var(--messing),var(--messing-lt),var(--messing-dk),var(--messing-lt));
  box-shadow:0 0 0 4px var(--flasche),0 0 0 6px var(--messing-dk),0 18px 36px rgba(0,0,0,.55);color:#3d2808}
.sl-fox{width:44px;margin-bottom:2px}
.sl-pct{font:42px/1 "Archivo Black",sans-serif;background:linear-gradient(180deg,var(--messing-lt),var(--messing) 55%,var(--messing-dk));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px #6a4a0d}
.sl-amt{font:700 15px/1.2 Barlow,sans-serif;color:#4a320c}

.sl-shaft{position:relative;flex:1;padding:22px 30px 34px 56px;border-radius:0 14px 14px 0;
  background:linear-gradient(180deg,var(--band),var(--band2));border:2px solid var(--messing);border-left:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 36px rgba(0,0,0,.45)}
.sl-teeth{position:absolute;right:46px;bottom:-30px;width:110px;height:30px;background:linear-gradient(180deg,var(--messing),var(--messing-dk));
  clip-path:polygon(0 0,100% 0,100% 100%,78% 100%,78% 45%,58% 45%,58% 80%,36% 80%,36% 40%,18% 40%,18% 100%,0 100%)}
.sl-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sl-logo{font:20px/1 "Archivo Black",sans-serif;color:var(--messing-lt);letter-spacing:.04em}
.sl-logo small{font:700 11px/1 Barlow,sans-serif;letter-spacing:.3em;color:var(--matt)}
.sl-login{font-weight:700;font-size:13px;color:var(--hell);text-decoration:none;padding:6px 14px;border:1px solid rgba(227,177,60,.5);border-radius:20px}
.sl-shaft h1{font:22px/1.2 "Archivo Black",sans-serif;color:#fff;margin-bottom:6px}
.sl-meta{font-size:13px;color:var(--messing-lt);margin-bottom:10px}
.sl-txt{font-size:14px;color:var(--matt);margin-bottom:16px}
.sl-txt a{font-weight:700}
.sl-btn{display:inline-block;text-decoration:none;color:#fff;font:700 16px/1 Barlow,sans-serif;text-transform:uppercase;letter-spacing:.05em;
  padding:14px 26px;border-radius:999px;background:linear-gradient(180deg,#5ed493,var(--smaragd) 50%,var(--smaragd-dk));
  border:2px solid var(--messing-lt);box-shadow:0 0 0 3px var(--messing-dk),inset 0 2px 0 rgba(255,255,255,.35),0 8px 16px rgba(0,0,0,.35)}
.sl-btn:hover{filter:brightness(1.08)}

.sl-tipp{margin:46px auto 14px;max-width:640px;text-align:center;font-size:14px;color:var(--hell);padding:9px 14px;border:1px dashed rgba(227,177,60,.45);border-radius:8px;background:rgba(6,21,15,.5)}
.sl-tipp b{color:var(--messing)}
.sl-tipp a{font-weight:700}
.sl-foot{text-align:center;font-size:12px;color:var(--matt)}
.sl-foot p+p{margin-top:2px}
.sl-foot a{color:var(--matt)}

@media (max-width:720px){
  .sl-key{flex-direction:column;align-items:stretch}
  .sl-bow{flex:none;margin:0 auto -34px;width:200px}
  .sl-ring{width:200px;height:200px}
  .sl-pct{font-size:36px}
  .sl-shaft{border-radius:0 0 14px 14px;border:2px solid var(--messing);padding:46px 18px 30px;text-align:center}
  .sl-top{justify-content:space-between}
  .sl-shaft h1{font-size:19px}
  .sl-teeth{right:28px;width:90px}
}