/* ---------- Hero-Hintergrund: Max & Ali als verlaufende Wasserfarben-Silhouetten ---------- */
.hero { position:relative; isolation:isolate; padding-bottom:56px; }
.hero > :not(canvas):not(.veil):not(.names) { position:relative; z-index:2; }
.hero canvas#glass { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; margin:0; cursor:default; touch-action:auto; display:block; z-index:0; }
.hero .veil { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.4) 0,transparent 18%,transparent 80%,#000 100%); }
.hero .names { display:none; position:absolute; z-index:2; transform:translateX(-50%); font-size:13px; color:#fff; letter-spacing:.02em; padding:.4em .9em; border-radius:99px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }

.hero .sub { color:rgba(255,255,255,.85) !important; } .hero .sub b { color:#fff !important; }
/* Hero füllt die Fensterhöhe (auch bei WQHD/4K), Inhalt zentriert und skaliert mit */
.hero { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:84px; padding-bottom:40px; }
.hero .reel { height:clamp(300px, 44vh, 720px); }
.hero h1 { font-size:clamp(2.4rem, min(5vw, 7.5vh), 6rem); }
.hero .sub { font-size:clamp(1.15rem, min(1.7vw, 2.6vh), 1.9rem); }