/* Kamera-Gimbal: Einzelteile setzen sich im Hero sichtbar zusammen. */
.gimbal-assembly{position:absolute;z-index:1;right:clamp(5%,13vw,18%);top:50%;width:360px;height:430px;transform:translateY(-46%);opacity:.78;filter:drop-shadow(0 0 26px #9d050688)}
.gimbal-piece{position:absolute;display:block;background:linear-gradient(135deg,#fff,#929292);box-shadow:0 0 18px #fff4;animation-duration:11s;animation-timing-function:cubic-bezier(.65,0,.25,1);animation-iteration-count:infinite}
.gimbal-handle{left:148px;top:250px;width:42px;height:160px;border-radius:22px 22px 11px 11px;transform-origin:50% 0;animation-name:gimbal-handle}
.gimbal-spine{left:158px;top:140px;width:22px;height:130px;border-radius:13px;animation-name:gimbal-spine}
.gimbal-arm{left:142px;top:132px;width:132px;height:24px;border-radius:14px;animation-name:gimbal-arm}
.gimbal-yoke{left:253px;top:115px;width:31px;height:87px;border-radius:18px;animation-name:gimbal-yoke}
.gimbal-camera{left:268px;top:104px;width:82px;height:63px;border-radius:8px;animation-name:gimbal-camera}
.gimbal-lens{left:326px;top:116px;width:58px;height:40px;border:7px solid #c8c8c8;border-radius:50%;background:#111;box-shadow:inset 0 0 0 7px #555,0 0 20px #fff5;animation-name:gimbal-lens}
@keyframes gimbal-handle{0%,8%{transform:translate(-135px,195px) rotate(-58deg);opacity:0}25%,74%{transform:translate(0,0) rotate(0);opacity:1}90%,100%{transform:translate(105px,165px) rotate(45deg);opacity:0}}
@keyframes gimbal-spine{0%,12%{transform:translate(35px,-165px) rotate(76deg);opacity:0}28%,70%{transform:translate(0,0) rotate(0);opacity:1}88%,100%{transform:translate(-55px,-148px) rotate(-72deg);opacity:0}}
@keyframes gimbal-arm{0%,16%{transform:translate(-180px,-80px) rotate(-38deg);opacity:0}31%,68%{transform:translate(0,0) rotate(0);opacity:1}86%,100%{transform:translate(175px,-95px) rotate(50deg);opacity:0}}
@keyframes gimbal-yoke{0%,20%{transform:translate(118px,105px) rotate(120deg);opacity:0}34%,66%{transform:translate(0,0) rotate(0);opacity:1}84%,100%{transform:translate(-120px,100px) rotate(-95deg);opacity:0}}
@keyframes gimbal-camera{0%,23%{transform:translate(180px,-115px) scale(.3) rotate(38deg);opacity:0}37%,65%{transform:translate(0,0) scale(1) rotate(0);opacity:1}82%,100%{transform:translate(-185px,-106px) scale(.35) rotate(-32deg);opacity:0}}
@keyframes gimbal-lens{0%,26%{transform:translate(130px,135px) scale(.2);opacity:0}40%,63%{transform:translate(0,0) scale(1);opacity:1}80%,100%{transform:translate(144px,135px) scale(.2);opacity:0}}
/* Bilderkatalog: jedes Bild erscheint gerade von unten, ohne Drehung oder seitliche Fahrt. */
.work-reel{padding:clamp(18px,3vw,34px) var(--gutter)}
.work-track{display:block;width:100%;animation:none}
.work-set{display:grid;width:100%;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1.3vw,18px);padding:0}
.work-set[aria-hidden="true"]{display:none}
.work-set img{width:100%;height:clamp(150px,18vw,300px);min-width:0;animation:gallery-rise 12s cubic-bezier(.22,.61,.36,1) infinite;transform:translateY(46px);transform-origin:center bottom;opacity:0;filter:saturate(.9) contrast(1.05)}
.work-set img:nth-child(1){animation-delay:0s}.work-set img:nth-child(2){animation-delay:1.35s}.work-set img:nth-child(3){animation-delay:2.7s}.work-set img:nth-child(4){animation-delay:4.05s}.work-set img:nth-child(5){animation-delay:5.4s}.work-set img:nth-child(6){animation-delay:6.75s}
@keyframes gallery-rise{0%{opacity:0;transform:translateY(46px);filter:saturate(.68) brightness(.72)}7%,66%{opacity:1;transform:translateY(0);filter:saturate(.98) brightness(1)}77%,100%{opacity:0;transform:translateY(-34px);filter:saturate(.76) brightness(.78)}}
@media(max-width:760px){.gimbal-assembly{right:-102px;top:48%;transform:translateY(-50%) scale(.68);opacity:.55}.work-reel{padding:14px 18px}.work-set{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.work-set img{height:145px;animation-duration:12s}}

/* Die gelieferten Gimbal-Bilder werden als Montage-Sequenz inszeniert. */
.hero-motion>.hero-gimbal-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;opacity:0;filter:contrast(1.12) saturate(.72) brightness(.63);will-change:transform,opacity,clip-path}
.hero-motion>.hero-gimbal-parts{animation:gimbal-parts-scene 18s cubic-bezier(.55,0,.32,1) infinite}
.hero-motion>.hero-gimbal-assembled{animation:gimbal-assembled-scene 18s cubic-bezier(.55,0,.32,1) infinite}
.assembly-scan{position:absolute;z-index:2;left:0;right:0;height:2px;top:17%;opacity:0;background:linear-gradient(90deg,transparent,#9d0506 18%,#fff 50%,#9d0506 82%,transparent);box-shadow:0 0 26px #9d0506,0 0 70px #9d050688;animation:assembly-scan 18s linear infinite}
@keyframes gimbal-parts-scene{0%{opacity:0;transform:scale(1.12) translate3d(-2%,2%,0)}7%,35%{opacity:.72;transform:scale(1.04) translate3d(0,0,0)}45%{opacity:0;transform:scale(1.01) translate3d(1%,-1%,0)}87%{opacity:0;transform:scale(1.08) translate3d(-2%,2%,0)}96%{opacity:.7;transform:scale(1.04) translate3d(0,0,0)}100%{opacity:0;transform:scale(1.01) translate3d(1%,-1%,0)}}
@keyframes gimbal-assembled-scene{0%,34%{opacity:0;clip-path:inset(0 50% 0 50%);transform:scale(1.08) translate3d(2%,1%,0)}43%{opacity:.76;clip-path:inset(0 0 0 0);transform:scale(1.03) translate3d(0,0,0)}80%{opacity:.72;clip-path:inset(0 0 0 0);transform:scale(1.1) translate3d(-1%,-2%,0)}91%,100%{opacity:0;clip-path:inset(0 50% 0 50%);transform:scale(1.12) translate3d(-2%,-2%,0)}}
@keyframes assembly-scan{0%,30%,88%,100%{opacity:0;transform:translateY(0)}35%{opacity:.9;transform:translateY(18vh)}43%{opacity:0;transform:translateY(53vh)}90%{opacity:.8;transform:translateY(13vh)}97%{opacity:0;transform:translateY(51vh)}}
@media(max-width:760px){.hero-motion>.hero-gimbal-bg{object-position:59% center;filter:contrast(1.08) saturate(.65) brightness(.5)}.assembly-scan{top:24%}}

/* Montage: ausgeschnittene Komponenten des Einzelteil-Bildes fliegen in ihre Endposition. */
.hero-motion>.hero-gimbal-parts{z-index:0;animation:gimbal-parts-plate 16s ease-in-out infinite}
.gimbal-build-parts{position:absolute;z-index:2;right:clamp(-95px,1vw,24px);top:50%;width:740px;height:417px;transform:translateY(-43%);filter:drop-shadow(0 0 16px #000);pointer-events:none}
.build-part{position:absolute;display:block;background-image:url('assets/hero-gimbal-parts.png');background-repeat:no-repeat;background-size:740px 417px;box-shadow:0 12px 26px #000b;opacity:0;will-change:transform,opacity;animation:part-lock 16s cubic-bezier(.55,0,.25,1) infinite}
.build-slider{left:25px;top:267px;width:190px;height:56px;background-position:-18px -258px;--assemble-x:218px;--assemble-y:-111px;animation-delay:0s}
.build-camera{left:175px;top:156px;width:132px;height:118px;background-position:-170px -146px;--assemble-x:74px;--assemble-y:-35px;animation-delay:.12s}
.build-body{left:316px;top:172px;width:182px;height:154px;background-position:-310px -165px;--assemble-x:5px;--assemble-y:3px;animation-delay:.24s}
.build-arm{left:466px;top:67px;width:164px;height:164px;background-position:-460px -60px;--assemble-x:-117px;--assemble-y:28px;animation-delay:.36s}
.build-handle{left:568px;top:134px;width:99px;height:194px;background-position:-564px -128px;--assemble-x:-183px;--assemble-y:55px;animation-delay:.48s}
.build-tripod{left:565px;top:275px;width:173px;height:132px;background-position:-560px -270px;--assemble-x:-226px;--assemble-y:-22px;animation-delay:.6s}
.hero-motion>.hero-gimbal-assembled{z-index:3;filter:contrast(1.16) saturate(.82) brightness(.92);animation:gimbal-final-reveal 16s cubic-bezier(.55,0,.32,1) infinite}
.assembly-scan{z-index:4;animation:assembly-scan-build 16s linear infinite}
@keyframes gimbal-parts-plate{0%,9%{opacity:.46;transform:scale(1.06)}38%{opacity:.17;transform:scale(1.03)}47%,100%{opacity:0;transform:scale(1)}}
@keyframes part-lock{0%,7%{opacity:0;transform:translate3d(0,0,0) rotate(0) scale(.98)}12%,28%{opacity:.96;transform:translate3d(0,0,0) rotate(0) scale(1)}43%,48%{opacity:1;transform:translate3d(var(--assemble-x),var(--assemble-y),0) rotate(0) scale(.9)}54%,100%{opacity:0;transform:translate3d(var(--assemble-x),var(--assemble-y),0) rotate(0) scale(.88)}}
@keyframes gimbal-final-reveal{0%,39%{opacity:0;clip-path:inset(47% 47% 47% 47%);transform:scale(1.08)}49%{opacity:.78;clip-path:inset(0 0 0 0);transform:scale(1.035)}82%{opacity:.75;clip-path:inset(0 0 0 0);transform:scale(1.1) translate3d(-1%,-1%,0)}92%,100%{opacity:0;clip-path:inset(47% 47% 47% 47%);transform:scale(1.1)}}
@keyframes assembly-scan-build{0%,29%,88%,100%{opacity:0;transform:translateY(0)}34%{opacity:.9;transform:translateY(12vh)}48%{opacity:0;transform:translateY(55vh)}90%{opacity:.75;transform:translateY(12vh)}98%{opacity:0;transform:translateY(55vh)}}
@media(max-width:760px){.gimbal-build-parts{right:-360px;top:48%;transform:translateY(-45%) scale(.72)}.hero-motion>.hero-gimbal-assembled{object-position:60% center}}

/* Originale Gimbal-Montage als automatisch startendes Hintergrundvideo. */
.hero-motion>.hero-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.73;filter:contrast(1.14) saturate(.78) brightness(.7)}
@media(max-width:760px){.hero-motion>.hero-video{object-position:58% center;opacity:.62;filter:contrast(1.1) saturate(.72) brightness(.58)}}

/* Weicher Übergang vom schwarzen Einstieg in den roten Leistungsbereich. */
.hero{border-bottom:0}
.hero{justify-content:flex-start;padding-top:clamp(46px,7vh,92px)}
.hero::after{content:'';position:absolute;z-index:0;left:0;right:0;bottom:-1px;height:clamp(105px,13vw,205px);pointer-events:none;background:linear-gradient(to bottom,transparent 0%,#9d050633 45%,var(--red) 100%)}
.hero .eyebrow,.hero h1,.hero .handwritten,.hero .button{z-index:1}

/* Zwei Social-Kanäle: absichtlich auch auf kleinen Displays nebeneinander. */
.social-section{background:#000;border-color:var(--line);display:grid;grid-template-columns:minmax(230px,.72fr) minmax(0,1.28fr);gap:clamp(30px,6vw,96px);align-items:end}
.social-heading h2{margin:.3em 0 .36em}.social-heading>p:last-child{max-width:34ch;color:#ffffffc2;line-height:1.6}
.social-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.social-card{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(270px,30vw,475px);padding:clamp(18px,2.2vw,36px);overflow:hidden;border-radius:clamp(16px,1.8vw,30px);color:#fff;text-decoration:none;box-shadow:0 18px 42px #0008;transition:transform .38s cubic-bezier(.22,.61,.36,1),box-shadow .38s ease}
.social-card::before,.social-card::after{content:'';position:absolute;z-index:-1;inset:0;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.social-card::after{opacity:.52;background:linear-gradient(135deg,#0000 35%,#ffffff33 100%)}
.social-card-instagram::before{background:linear-gradient(135deg,#fa5b5d 0%,#df4b7a 38%,#944af5 100%)}
.social-card-tiktok::before{background:radial-gradient(circle at 102% 104%,#777 0%,#323232 38%,#111 74%,#000 100%)}
.social-card-top,.social-card-bottom{position:relative;z-index:1}.social-card-top{display:flex;justify-content:space-between;font-size:clamp(13px,1.1vw,17px);font-weight:700;letter-spacing:.02em;opacity:.9}.social-card-top span{font-size:1.25em}.social-card-bottom{display:flex;align-items:center;gap:.58em;font-size:clamp(15px,1.35vw,22px);font-weight:800;letter-spacing:-.03em}.social-icon{display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:.5em;flex:0 0 auto}.social-icon-instagram{background:radial-gradient(circle at 30% 105%,#fed373 0%,#f15245 27%,#d92e7f 55%,#9b36cb 76%,#515bd4 100%)}.social-icon-instagram::after{content:'';width:.76em;height:.76em;border:2px solid #fff;border-radius:.23em;box-shadow:0 0 0 2px #fff inset}.social-icon-tiktok{border-radius:50%;background:#050505;color:#fff;font-family:Arial,sans-serif;font-size:1.14em;text-shadow:-2px 0 #2cf2ef,2px 1px #f52b5c}.social-card:hover{transform:translateY(-9px);box-shadow:0 30px 55px #000b}.social-card:hover::before{transform:scale(1.08) rotate(-2deg)}.social-card:hover::after{transform:translateX(16%)}.social-card:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:760px){.social-section{display:block;padding:68px 18px 76px}.social-heading>p:last-child{font-size:14px}.social-grid{gap:10px;margin-top:28px}.social-card{min-height:218px;padding:14px;border-radius:18px}.social-card-top{font-size:11px}.social-card-bottom{gap:.38em;font-size:13px}.social-icon{width:1.66em;height:1.66em}.social-icon-instagram::after{width:.66em;height:.66em;border-width:1.5px;box-shadow:0 0 0 1.5px #fff inset}}

/* Engere Abschnitte, sichtbare Social-Vorschauen und ein ruhiges Karussell. */
.section{padding-top:84px;padding-bottom:84px}
.social-section{display:block}
.social-heading{max-width:760px}
.social-heading h2{font-size:clamp(56px,7vw,112px);line-height:.92;margin:0 0 .22em}
.social-heading>p:last-child{font-size:clamp(18px,1.7vw,25px);max-width:42ch}
.social-grid{margin-top:clamp(32px,5vw,76px)}
.social-live-grid{margin-top:clamp(32px,5vw,76px)}
.social-feed-source{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);pointer-events:none;opacity:0}
.social-card.is-loading .social-card-media{opacity:0}
.social-card-media{position:absolute;z-index:-1;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(1.08);transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.social-card::after{z-index:0;opacity:.76;background:linear-gradient(to top,#000e 0%,#0004 48%,#0000 78%)}
.social-card:hover::before{transform:none}.social-card:hover .social-card-media{transform:scale(1.08)}
.work-reel{padding:clamp(22px,3vw,42px) 0;overflow:hidden}
.work-track{display:flex;width:max-content;animation:gallery-carousel 90s linear infinite}
.work-set{display:flex;width:auto;gap:clamp(10px,1.35vw,20px);padding-right:clamp(10px,1.35vw,20px)}
.work-set[aria-hidden="true"]{display:flex}
.work-set img{width:clamp(220px,23vw,400px);height:clamp(165px,17vw,285px);min-width:0;opacity:1;animation:none;transform:translateY(0);transition:transform .48s cubic-bezier(.22,.61,.36,1),filter .48s ease;filter:saturate(.84) brightness(.82)}
.work-set img.is-center{transform:translateY(-20px);filter:saturate(1.05) brightness(1.08)}
@keyframes gallery-carousel{to{transform:translateX(-50%)}}
.service-toggle{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left}.service-toggle b{display:none}
@media(max-width:760px){.section{padding-top:56px;padding-bottom:56px}.social-section{padding:56px 18px 62px}.social-heading h2{font-size:clamp(42px,12vw,60px);line-height:.93}.social-heading>p:last-child{font-size:16px}.social-grid{margin-top:34px}.social-live-grid{margin-top:34px}.work-reel{padding:28px 0 18px}.work-track{animation-duration:72s}.work-set{gap:10px;padding-right:10px}.work-set img{width:190px;height:138px}.work-set img.is-center{transform:translateY(-13px)}.service-list{margin-top:33px}.service-list article{padding:21px 0}.service-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer}.service-toggle h3{font-size:clamp(25px,7.4vw,36px)}.service-toggle b{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border:1px solid #ffffffa1;border-radius:50%;font:300 25px/1 Arial;transition:transform .25s ease}.service-list article p{max-height:0;margin:0;overflow:hidden;opacity:0;transition:max-height .35s ease,margin .35s ease,opacity .28s ease}.service-list article.is-open p{max-height:220px;margin-top:13px;opacity:1}.service-list article.is-open .service-toggle b{transform:rotate(45deg)}}
@media(max-width:760px){.site-header{height:70px}.site-header .wordmark{width:168px;height:44px}.hero{min-height:556px;padding:20px 24px 44px;justify-content:flex-start}.hero h1{margin-top:18px;font-size:clamp(39px,10.5vw,50px)}.handwritten{white-space:nowrap;font-size:clamp(31px,8.4vw,39px);line-height:.9;margin:18px 0 31px;transform:rotate(-2deg)}.section{padding-top:44px;padding-bottom:48px}.services-section{padding-top:40px}.section-heading h2{margin-top:0}.section-heading>p:last-child{margin-top:19px}.social-section{padding:48px 18px 54px}.work-reel{padding:24px 0 16px}.service-list{margin-top:27px}.service-list article{padding:19px 0}.contact-section{padding-top:42px;padding-bottom:46px;gap:25px}.contact-copy h2{margin:0}.contact-form{padding-top:0}.form-intro{margin-bottom:20px}.site-footer>div.footer-meta{align-items:flex-start}.footer-actions{margin-left:auto;justify-content:flex-end}}

/* Projektanfrage: kompakter, abgerundet und am Beginn des roten Übergangs. */
.hero .button-red{
  position:absolute;
  left:var(--gutter);
  bottom:clamp(72px,10vw,150px);
  min-height:48px;
  padding:12px 18px;
  gap:26px;
  border-radius:10px;
  font-size:13px;
}
.hero .button-red span{font-size:21px}
@media(max-width:760px){
  .hero .button-red{bottom:66px;min-height:46px;padding:11px 17px;border-radius:9px;font-size:12px}
}

/* Desktop: der vollständige Slogan erhält mehr Präsenz. */
@media(min-width:761px){
  .hero h1{font-size:clamp(64px,10.5vw,170px)}
  .handwritten{font-size:clamp(78px,7.7vw,124px)}
}

/* Desktop: bewusst groß gesetzter vollständiger Slogan. */
@media(min-width:761px){
  .hero h1{font-size:clamp(86px,11.5vw,180px)}
  .handwritten{font-size:clamp(96px,8.8vw,142px)}
}

.hero-slogan-mobile{display:none}
@media(max-width:760px){
  .hero-slogan-desktop{display:none}
  .hero-slogan-mobile{display:inline}
}
@media(max-width:760px){.hero{min-height:640px}}

/* Projektanfrage folgt dem Slogan mit bewusst kleinem Abstand. */
.hero .handwritten{margin-bottom:28px}
.hero .button-red{position:relative;left:auto;bottom:auto;align-self:flex-start;margin-top:0}
@media(max-width:760px){
  .hero .handwritten{margin-bottom:24px}
  .hero .button-red{position:relative;left:auto;bottom:auto}
}

/* Hero neu ausgerichtet: drei feste Zeilen, breite Desktop-Typografie, CTA im Übergang. */
.hero-slogan-mobile{display:none!important}
.hero-slogan-desktop{display:inline!important}
.hero .button-red{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);margin:0;align-self:auto}
@media(min-width:761px){
  .hero h1{font-size:clamp(72px,9.75vw,146px);letter-spacing:-.08em}
  .hero .handwritten{font-size:clamp(78px,7.4vw,118px);margin-bottom:0}
  .hero .button-red{bottom:50px}
}
@media(max-width:760px){
  .hero{min-height:580px;padding-top:30px}
  .hero h1{font-size:clamp(39px,10.5vw,50px)}
  .hero .handwritten{margin-bottom:0}
  .hero .button-red{left:50%;bottom:46px;transform:translateX(-50%)}
}

/* Mobile bleibt unverändert: die vorhandene Slogan- und Button-Anordnung. */
@media(max-width:760px){
  .hero{min-height:640px;padding:20px 24px 44px}
  .hero-slogan-desktop{display:none!important}
  .hero-slogan-mobile{display:inline!important}
  .hero .handwritten{margin:18px 0 24px}
  .hero .button-red{position:relative;left:auto;bottom:auto;transform:none;margin:0;align-self:flex-start}
}

/* Der rote Übergang beginnt unmittelbar nach der Anfrage – keine leere schwarze Fläche. */
.hero{min-height:0;padding-bottom:30px}
.hero::after{height:120px}
/* Kleiner visueller Abstand nach dem Button vor dem vollständigen Rot. */
.hero{padding-bottom:68px}
.hero{padding-bottom:102px}

/* Desktop: Anfrage am linken Textraster, mit ruhigem Abstand zum roten Übergang. */
@media(min-width:761px){
  .hero .button-red{left:var(--gutter);bottom:clamp(84px,6vw,120px);transform:none}
}

/* Mobile Pfeile als Liniengrafik statt systemabhängigem Emoji. */
.social-icon svg{display:block;width:65%;height:65%;fill:currentColor;color:#fff}
.social-icon-instagram::after{display:none}
.social-icon-tiktok{text-shadow:none;font-size:inherit}
.social-enable{margin-top:18px;border:1px solid #777;border-radius:8px;padding:10px 14px;background:#171717;color:#fff;cursor:pointer}
@media(max-width:760px){
  .button>span[aria-hidden="true"],.social-card-top>span[aria-hidden="true"]{display:inline-block;position:relative;flex:0 0 18px;width:18px;height:18px;font-size:0;line-height:0}
  .button>span[aria-hidden="true"]::before,.social-card-top>span[aria-hidden="true"]::before{content:"";position:absolute;left:2px;top:9px;width:16px;height:2px;background:currentColor;transform:rotate(-45deg)}
  .button>span[aria-hidden="true"]::after,.social-card-top>span[aria-hidden="true"]::after{content:"";position:absolute;right:1px;top:2px;width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor}
}