/* ==========================================================================
   Hero „Projekte + Farbexplosion“ (01.10.2026, Adrian: „mit Abstand der stärkste Hero“)
   Echte Kundenseiten schweben als Browserfenster im 3D-Raum, dahinter fließende
   CI-Farbwolken (Canvas, folgt der Maus). Handy/reduzierte Bewegung: Farbwolken als
   CSS-Standbild, zwei Fenster über dem Text. Register: hero-bauen/references/hero-register.md
   ========================================================================== */

.fx-canvas{position:absolute;inset:-8%;width:116%;height:116%;z-index:0;filter:blur(46px) saturate(1.25)}
.fx-poster{position:absolute;inset:0;z-index:0;display:none;background:
 radial-gradient(60% 55% at 78% 30%,#3DE029 0%,rgba(61,224,41,0) 60%),
 radial-gradient(50% 50% at 62% 78%,#00FF00 0%,rgba(0,255,0,0) 55%),
 radial-gradient(45% 45% at 92% 70%,#90EE90 0%,rgba(144,238,144,0) 60%),
 radial-gradient(70% 70% at 40% 20%,#1B7A4A 0%,rgba(27,122,74,0) 70%),#04140b}
.fx-grain{position:absolute;inset:0;z-index:1;opacity:.18;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fx-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(4,20,11,.92) 0%,rgba(4,20,11,.78) 34%,rgba(4,20,11,.25) 62%,rgba(4,20,11,0) 80%),linear-gradient(0deg,rgba(4,20,11,.7) 0%,rgba(4,20,11,0) 40%)}
.wd-hero.fx{background:#04140b}
@media (max-width:767px),(prefers-reduced-motion:reduce){.fx-canvas{display:none}.fx-poster{display:block}.fx-scrim{background:linear-gradient(0deg,rgba(4,20,11,.95) 0%,rgba(4,20,11,.82) 55%,rgba(4,20,11,.35) 100%)}}

.wd-hero.p3{background:#04140b;align-items:center}
.p3-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(50% 60% at 75% 45%,rgba(61,224,41,.35) 0%,rgba(27,122,74,.25) 35%,rgba(4,20,11,0) 70%),radial-gradient(40% 40% at 20% 90%,rgba(34,176,75,.25),rgba(4,20,11,0) 70%),linear-gradient(180deg,#06190e,#04140b)}
.p3 .container{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media (min-width:1000px){.p3 .container{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}.p3 .wd-col-text{max-width:600px}.p3 .wd-hook{font-size:clamp(2.6rem,4.4vw,4.2rem)}}
.p3-stage{position:relative;height:520px;perspective:1400px}
.p3-szene{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,-18deg));transition:transform .2s ease-out}
.p3-win{position:absolute;margin:0;width:62%;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(184,245,176,.25);transform-style:preserve-3d}
.p3-win img{display:block;width:100%;height:auto}
.p3-bar{display:flex;gap:5px;padding:7px 9px;background:#0D2B1A}.p3-bar i{width:8px;height:8px;border-radius:50%;background:#3DE029}.p3-bar i+i{background:#90EE90}.p3-bar i+i+i{background:#B8F5B0}
.p3-w1{left:20%;top:22%;transform:translateZ(120px);z-index:5}
.p3-w2{left:-2%;top:2%;transform:translateZ(-60px) rotateZ(-3deg)}
.p3-w3{left:40%;top:0%;transform:translateZ(-140px)}
.p3-w4{left:44%;top:52%;transform:translateZ(20px) rotateZ(2deg)}
.p3-w5{left:2%;top:56%;transform:translateZ(-100px)}
.p3-glow{position:absolute;left:30%;top:30%;width:50%;height:50%;border-radius:50%;background:radial-gradient(circle,rgba(61,224,41,.55),rgba(61,224,41,0) 70%);transform:translateZ(-220px);filter:blur(20px)}
@media (prefers-reduced-motion:no-preference){.p3-win{animation:p3-schweb 7s ease-in-out infinite}.p3-w2{animation-delay:-1.5s}.p3-w3{animation-delay:-3s}.p3-w4{animation-delay:-4.5s}.p3-w5{animation-delay:-2.2s}}
@keyframes p3-schweb{50%{margin-top:-14px}}
@media (max-width:999px){.p3-stage{height:300px;margin-top:-.5rem}.p3-w3,.p3-w5{display:none}.p3-win{width:70%}.p3-w1{left:22%;top:20%}.p3-w2{left:0;top:0}.p3-w4{left:30%;top:48%}}
.p3 .wd-hero-scrim,.p3 .wd-hero-vignette{display:none}

@media (max-width:999px){.p3 .container{gap:.5rem}.p3-stage{order:-1;height:250px;margin:0 -8px .6rem}.p3-win{width:56%}.p3-w1{left:24%;top:12%}.p3-w2{left:0;top:0}.p3-w4{left:42%;top:30%}}
.wd-hero.p3.fx{background:#04140b}
.v1-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(4,20,11,.9) 0%,rgba(4,20,11,.7) 38%,rgba(4,20,11,.1) 62%,rgba(4,20,11,0) 100%)}
.p3-glow{display:none}
.p3-win{box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(184,245,176,.35),0 0 40px rgba(61,224,41,.25)}
@media (max-width:999px){.v1-scrim{background:linear-gradient(0deg,rgba(4,20,11,.92) 0%,rgba(4,20,11,.75) 55%,rgba(4,20,11,.15) 100%)}}


.wd-hero.p3 .container{width:100%}
.p3 .wd-col-text{position:relative;z-index:3}
.p3-stage{z-index:2}

/* Handy (Adrian 01.10.2026): Headline → Knopf → Google-Bewertung → Hinweis-Kästchen → Beschreibung — erst Headline, dann Handlung.
   Reihenfolge im HTML bleibt (Google/KI lesen unverändert), nur die Anzeige ändert sich. */
@media (max-width:767px){
 .p3 .wd-col-text > *{order:6}
 .p3 .wd-col-text > .wd-eyebrow{order:1}
 .p3 .wd-col-text > .wd-hook{order:2}
 .p3 .wd-col-text > .wd-cta-row{order:3}
 .p3 .wd-col-text > .hero-google,.p3 .wd-col-text > .wd-fuss{order:4}
 .p3 .wd-col-text > .wd-metarow{order:5}
 .p3 .wd-col-text > .wd-sub{order:6}
 .p3 .wd-col-text > *:not(.wd-eyebrow):not(.wd-hook):not(.wd-metarow):not(.wd-cta-row):not(.wd-sub):not(.hero-google):not(.wd-fuss){order:7}
}

/* Handy (Adrian 01.10.2026: „Bewegung mobil etwas doller“): ohne Maus schwenkt die Szene
   von selbst, die Fenster schweben stärker und versetzt. Individuelle Transform-Eigenschaften
   (rotate/translate) addieren sich zum Scroll-Effekt aus dem Skript, statt ihn zu überschreiben. */
@media (max-width:999px) and (prefers-reduced-motion:no-preference){
 .p3-szene{animation:p3-schwenk 7s ease-in-out infinite}
 .p3-win{animation:p3-schweb-m 4.6s ease-in-out infinite}
 .p3-w2{animation-delay:-1.2s}.p3-w4{animation-delay:-2.4s}
}
@keyframes p3-schwenk{0%,100%{rotate:y -9deg;translate:-6px 0}50%{rotate:y 11deg;translate:6px -4px}}
@keyframes p3-schweb-m{0%,100%{margin-top:0}50%{margin-top:-24px}}