/* Falcon Eye – Showreel-Wand: echte Mitschnitte unserer Seiten, alle gleichzeitig. Der Falke setzt sich aus 0 und 1 zusammen,
   wird zur Drohne und startet beim Überfliegen jede Kachel. */
.sr{position:relative;padding:clamp(72px,9vw,140px) 0 clamp(64px,8vw,120px);background:radial-gradient(120% 70% at 50% 0%,rgba(255,208,0,.07),transparent 60%),var(--steel);overflow:hidden}
.sr-head{position:relative;text-align:center;max-width:980px;margin:0 auto}
.sr-stage{position:relative;height:clamp(120px,15vw,190px);margin:0 auto 6px}
.sr-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.sr-head h2{margin:0 0 16px;font:900 clamp(44px,7.4vw,110px)/.88 var(--display);text-transform:uppercase;letter-spacing:-.005em}
.sr-head h2 em{font-style:normal;color:var(--signal);display:block}
.sr-sub{margin:0 auto;max-width:62ch;color:var(--text-2);font-size:clamp(15px,1.3vw,18px);line-height:1.55}
.sr-live{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:7px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font:12px var(--osd);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.sr-live i{width:8px;height:8px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 0 rgba(255,59,48,.6);animation:srRec 1.6s ease-out infinite}
@keyframes srRec{to{box-shadow:0 0 0 10px rgba(255,59,48,0)}}
.sr-live b{color:var(--signal);font-weight:400}

.sr-wall{container-type:inline-size;margin-top:clamp(34px,4vw,56px)}
.sr-grid{--g:clamp(10px,1.2vw,16px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:calc((100cqw - 3 * var(--g)) / 4 / 1.6);grid-auto-flow:dense;gap:var(--g)}
.sr-fly{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:60}
.sr-t{position:relative;display:block;min-height:0;border-radius:18px;overflow:hidden;background:#0d1014;color:var(--wing);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);isolation:isolate;transform:translateY(26px) scale(.97);opacity:0;transition:transform .7s cubic-bezier(.2,1,.3,1),opacity .6s ease,box-shadow .3s}
.sr-t.in{transform:none;opacity:1}
.sr-t.big{grid-column:span 2;grid-row:span 2}
.sr-t.big.r{grid-column:3/span 2}
.sr-t.wide{grid-column:span 2}
.sr-t video,.sr-t img.sr-po{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .6s}
.sr-t video{opacity:0;transition:opacity .5s,transform .8s cubic-bezier(.2,.8,.2,1)}
.sr-t.on video{opacity:1}
.sr-t:not(.on) img.sr-po{filter:saturate(.55) brightness(.6)}
.sr-t::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,12,15,0) 38%,rgba(10,12,15,.55) 62%,rgba(10,12,15,.93) 100%);pointer-events:none}
.sr-t:not(.big) .sr-cap span{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .3s}
@media (hover:hover){.sr-t:not(.big):hover .sr-cap span{max-height:3.2em;opacity:1}}
.sr-t .sr-cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;display:grid;gap:3px}
.sr-t .sr-cap small{font:11px var(--osd);letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.sr-t .sr-cap b{font:900 clamp(20px,2vw,28px)/1 var(--display);text-transform:uppercase}
.sr-t.big .sr-cap b{font-size:clamp(28px,3.4vw,52px)}
.sr-t .sr-cap span{font-size:13px;color:var(--text-2)}
.sr-t .sr-go{position:absolute;right:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:rgba(10,12,15,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font:600 12px var(--body);opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}
.sr-t .sr-rec{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:rgba(10,12,15,.55);font:11px var(--osd);letter-spacing:.08em;color:var(--text-2);opacity:0;transition:opacity .4s}
.sr-t.on .sr-rec{opacity:1}
.sr-t .sr-rec i{width:7px;height:7px;border-radius:50%;background:var(--rec)}
.sr-t.zap{animation:srZap .7s ease}
@keyframes srZap{0%{box-shadow:inset 0 0 0 1px var(--line),0 0 0 0 rgba(255,208,0,.0)}30%{box-shadow:inset 0 0 0 2px var(--signal),0 0 40px 6px rgba(255,208,0,.35)}100%{box-shadow:inset 0 0 0 1px var(--line),0 0 0 0 rgba(255,208,0,0)}}
@media (hover:hover){.sr-t:hover video,.sr-t:hover img.sr-po{transform:scale(1.045)}.sr-t:hover .sr-go{opacity:1;transform:none}.sr-t:hover{box-shadow:inset 0 0 0 1.5px var(--signal)}}
.sr-t:focus-visible{outline:3px solid var(--signal);outline-offset:3px}

/* Riesiger Link auf die Referenzen */
.sr-cta{position:relative;margin-top:clamp(18px,2.4vw,32px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(18px,3vw,48px);min-height:clamp(260px,26vw,380px);padding:clamp(24px,3.4vw,52px);border-radius:24px;overflow:hidden;background:var(--signal);color:var(--signal-ink);text-decoration:none;isolation:isolate;transform:translateY(26px);opacity:0;transition:transform .7s cubic-bezier(.2,1,.3,1),opacity .6s}
.sr-cta.in{transform:none;opacity:1}
.sr-cta small{font:13px var(--osd);letter-spacing:.12em;text-transform:uppercase}
.sr-cta b{display:block;margin:10px 0 14px;font:900 clamp(46px,7.6vw,128px)/.84 var(--display);text-transform:uppercase}
.sr-cta p{margin:0 0 20px;max-width:46ch;font:500 clamp(15px,1.3vw,18px)/1.5 var(--body)}
.sr-cta .sr-arrow{display:inline-flex;align-items:center;gap:12px;padding:16px 24px;border-radius:999px;background:var(--signal-ink);color:var(--signal);font:800 17px var(--body);transition:gap .3s}
.sr-cta:hover .sr-arrow{gap:20px}
.sr-cta .sr-arrow svg{width:22px;height:22px}
.sr-col{position:relative;height:100%;min-height:220px}
.sr-col img{position:absolute;width:62%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:12px;box-shadow:0 24px 50px -18px rgba(0,0,0,.55);border:3px solid var(--signal-ink);transform:translate(var(--x),var(--y)) rotate(var(--r));transition:transform .8s cubic-bezier(.2,1,.3,1)}
.sr-col img:nth-child(1){--x:-4%;--y:6%;--r:-6deg;left:0;top:0}
.sr-col img:nth-child(2){--x:6%;--y:-2%;--r:5deg;right:0;top:12%}
.sr-col img:nth-child(3){--x:-2%;--y:4%;--r:3deg;left:10%;bottom:0}
.sr-col img:nth-child(4){--x:4%;--y:2%;--r:-4deg;right:4%;bottom:6%}
.sr-cta:hover .sr-col img:nth-child(1){--y:0%;--r:-9deg}.sr-cta:hover .sr-col img:nth-child(2){--y:-8%;--r:8deg}.sr-cta:hover .sr-col img:nth-child(3){--y:8%;--r:6deg}.sr-cta:hover .sr-col img:nth-child(4){--y:-4%;--r:-7deg}
.sr-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(115deg,rgba(26,21,0,.06) 0 2px,transparent 2px 18px)}
.sr-cta2{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.sr-cta2 .btn svg{width:20px;height:20px}

@media (max-width:900px){
  .sr-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:calc((100cqw - var(--g)) / 2 / 1.6)}
  .sr-t.big,.sr-t.big.r{grid-column:1/-1;grid-row:span 2}
  .sr-t.wide{grid-column:1/-1}
  .sr-t .sr-cap{left:10px;right:10px;bottom:9px}
  .sr-t .sr-cap b{font-size:17px}.sr-t.big .sr-cap b{font-size:30px}.sr-t .sr-cap small{font-size:9.5px;letter-spacing:.06em}.sr-t .sr-go,.sr-t .sr-rec{display:none}
  .sr-t .sr-cap span{display:none}.sr-t.big .sr-cap span{display:block}
  .sr-t{border-radius:14px}
  .sr-cta{grid-template-columns:1fr;min-height:0}
  .sr-col{min-height:200px;order:-1}
  .sr-cta .sr-arrow{width:100%;justify-content:center}
  .sr-cta2 .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.sr-t,.sr-cta{transform:none;opacity:1;transition:none}.sr-live i{animation:none}.sr-stage{height:0;margin:0}}