html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:#0c0a0a;color:#efe4df;font-family:Jost,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#e2b2a6;text-decoration:none}
a:hover{color:#f6d6cc}
details summary::-webkit-details-marker{display:none}
input,textarea{font:inherit}
input:focus-visible,textarea:focus-visible{border-bottom-color:#f2cfc4 !important}
.kopf{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:18px clamp(20px,5vw,64px);background:rgba(12,10,10,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(226,178,166,.14)}
.kopf-nav{display:flex;gap:28px;flex-wrap:wrap;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.knopf{border-radius:999px;background:linear-gradient(120deg,#f2cfc4,#c98b7e);color:#1a1212;font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;box-shadow:0 10px 40px rgba(201,139,126,.3)}
.knopf:hover{color:#1a1212}
.bluete{position:relative;width:clamp(280px,30vw,380px);aspect-ratio:1;margin:0 auto 40px;pointer-events:none}
.bluete img,.bluete canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.bluete-perle{clip-path:circle(5.5%)}
.bluete canvas{display:none}
.fliesst .bluete canvas{display:block}
.fliesst .bluete img{opacity:0}
.bluete-glut{position:absolute;left:50%;top:50%;width:10%;height:10%;transform:translate(-50%,-50%);border-radius:50%;background:#b8786c;box-shadow:0 0 40px 14px rgba(217,164,151,.35)}
@media (max-width:640px){
  html{scroll-padding-top:104px}
  .kopf{gap:8px;padding:12px 20px}
  .kopf-nav{width:100%;gap:0;justify-content:space-between;font-size:11px;letter-spacing:.08em}
}