/* Specular Button (Port von React Bits SpecularButton, WebGL2 ohne Lib) */
  .sb{--sb-radius:999px;position:relative;justify-self:center;display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-top:clamp(26px,3vw,44px);
    padding:16px 30px;border-radius:var(--sb-radius);border:1px solid rgba(20,20,28,.14);background:rgba(255,255,255,.55);backdrop-filter:blur(6px);
    color:var(--ink);text-decoration:none;font-size:.95rem;font-weight:400;letter-spacing:-.01em;cursor:pointer;
    opacity:0;animation:in 1.4s cubic-bezier(.2,.7,.2,1) .9s forwards;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.sb:hover{transform:translateY(-2px)}
.sb .fx{position:absolute;inset:-20px;pointer-events:none;border-radius:0}
.sb .fx canvas{display:block;width:100%;height:100%}
.sb .lbl{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px}
.hero footer{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--stone)}
nav{display:flex;flex-wrap:wrap;gap:8px clamp(14px,2vw,28px)}
nav a,.contact a{color:var(--ink);text-decoration:none;font-weight:300;position:relative}
nav a::after,.contact a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:currentColor;transition:right .35s}
nav a:hover::after,.contact a:hover::after{right:0}
.down{position:absolute;left:50%;transform:translateX(-50%);animation:bob 2.4s ease-in-out infinite;color:var(--ink)}
@keyframes bob{50%{transform:translate(-50%,6px)}}
/* ---------- Kontakt ---------- */
  .contact{position:relative;z-index:1;background:#fff;border-top:1px solid var(--line);
    padding:clamp(64px,9vw,140px) clamp(18px,4vw,56px) clamp(32px,4vw,56px);
    display:grid;grid-template-rows:auto auto;}
.contact .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.contact h2{font-weight:300;letter-spacing:-.035em;line-height:.98;font-size:clamp(2.6rem,7vw,7.5rem)}
.contact h2 em{font-family:var(--serif);font-style:normal;font-weight:400}
.contact .intro{margin-top:clamp(18px,2vw,28px);max-width:44ch;font-size:clamp(.95rem,1.2vw,1.15rem);line-height:1.55;color:var(--grey)}
.mail{display:inline-block;margin-top:clamp(28px,4vw,56px);font-size:clamp(1.3rem,3vw,2.8rem);letter-spacing:-.025em;color:var(--ink);text-decoration:none;
    background:linear-gradient(90deg,#F400D8,#FF2D6A,#FF6A00,#2B6BFF);background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
    transition:background-size .5s cubic-bezier(.2,.7,.2,1);padding-bottom:6px}
.mail:hover{background-size:100% 2px}
dl{display:grid;grid-template-columns:auto 1fr;gap:14px clamp(20px,3vw,40px);font-size:.95rem;line-height:1.5;padding-top:.6em}
dt{color:var(--stone);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;padding-top:.35em}
dd a{color:var(--ink);text-decoration:none}
dd a:hover{color:#FF2D6A}
dd + dt{border-top:1px solid var(--line);padding-top:14px}
dd + dt + dd{border-top:1px solid var(--line);padding-top:14px}
form{margin-top:clamp(28px,3vw,48px);display:grid;gap:0}
form input,form textarea{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;font:inherit;font-size:1rem;color:var(--ink);padding:16px 0;outline:none;resize:none;transition:border-color .3s;border-radius:0}
form input:focus,form textarea:focus{border-color:var(--ink)}
form input::placeholder,form textarea::placeholder{color:var(--stone)}
form button{margin-top:28px;justify-self:start;font:inherit;font-size:.9rem;font-weight:400;color:#fff;background:var(--ink);border:0;border-radius:999px;padding:14px 26px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:transform .3s,background .3s}
form button:hover{transform:translateY(-2px);background:#FF2D6A}
.contact footer{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--stone);padding-top:clamp(64px,8vw,120px)}
@media (max-width:820px){
    .contact .grid{grid-template-columns:1fr}
    h1{white-space:normal}
  }
@media (max-width:640px){
    #glow{filter:blur(34px) saturate(1.4)}
    .hero footer,.contact footer{flex-direction:column;gap:10px;align-items:flex-start}
    .down{display:none}
  }
@media (prefers-reduced-motion:reduce){h1,.lead{animation-duration:.01s}.down{animation:none}}
/* Header bleibt beim Scrollen oben, alles laeuft darunter durch (2026-09-14) */
  .hero{grid-template-rows:1fr auto;padding-top:72px}
.hero>header{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px clamp(18px,4vw,56px);transition:background .3s,box-shadow .3s}
html.scrolled .hero>header{background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 var(--line)}