PageSourceSearch

https://staging-shortcuts.webflow.io/formate

html staging-shortcuts.webflow.io collected 2026-10-03 13:47:47 UTC 64,510 bytes, 1,528 lines download raw bytes

1<!DOCTYPE html><!-- Last Published: Mon Sep 28 2026 09:35:08 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="staging-shortcuts.webflow.io" data-wf-page="69e0b2ad00ea527abfdefafb" data-wf-site="683eadad57b97cce30e149fe" lang="de-DE"><head><meta charset="utf-8"/><link href="https://cdn.prod.website-files.com" rel="preconnect" crossorigin="anonymous"/><title>Ob Aufbruch, Umbruch oder Durchbruch – wir bringen Strategie, Design, Kultur und Technologie wirkungsvoll zusammen.</title><meta content="Wir gestalten Wandel aus vier Perpektiven: Strategie, Design, Kultur und Technologie. Begleitung von der Analyse bis zur kulturellen Verankerung." name="description"/><meta content="Ob Aufbruch, Umbruch oder Durchbruch – wir bringen Strategie, Design, Kultur und Technologie wirkungsvoll zusammen." property="og:title"/><meta content="Wir gestalten Wandel aus vier Perpektiven: Strategie, Design, Kultur und Technologie. Begleitung von der Analyse bis zur kulturellen Verankerung." property="og:description"/><meta content="https://cdn.prod.website-files.com/683eadad57b97cce30e149fe/6a3bc2674b7f802500c7a8c8_SC_OG_Formate.png" property="og:image"/><meta content="Ob Aufbruch, Umbruch oder Durchbruch – wir bringen Strategie, Design, Kultur und Technologie wirkungsvoll zusammen." name="twitter:title"/><meta content="Wir gestalten Wandel aus vier Perpektiven: Strategie, Design, Kultur und Technologie. Begleitung von der Analyse bis zur kulturellen Verankerung." name="twitter:description"/><meta content="https://cdn.prod.website-files.com/683eadad57b97cce30e149fe/6a3bc2674b7f802500c7a8c8_SC_OG_Formate.png" name="twitter:image"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="YwXOUeb7OiBQGrkZEc8jLvQPTLaaHw06Uhzb0dRMMuQ" name="google-site-verification"/><link href="https://cdn.prod.website-files.com/683eadad57b97cce30e149fe/css/staging-shortcuts.webflow.shared.e5f0a4362.min.css" rel="stylesheet" type="text/css" integrity="sha384-5fCkNi0fWAo83oB4OE1B+kn3UoLuHRsuPAJ4JrIcHgX1wt1G6TL407Bdb9mWvrz1" crossorigin="anonymous"/><style>html.w-mod-js:not(.w-mod-ix3) :is([data-wf-target*='["692770a7aa71312cbecfd9fb","517e36bb-7f3d-f1b6-0d10-1e6d8d3b2a7b"]']) {visibility: hidden !important;}</style>
1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
1<link href="https://cdn.prod.website-files.com/683eadad57b97cce30e149fe/690dfb0e392a36d97f2f2ffd_SC--FavIcon.png" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/683eadad57b97cce30e149fe/690df9fcb820e7391e4c750d_SC--Webclip.png" rel="apple-touch-icon"/><link href="https://www.short-cuts.de/formate" rel="canonical"/>
1<script type="text/javascript" charset="UTF-8" src="//cdn.cookie-script.com/s/050ad046a39d7250cf8d231df63edab0.js"></script>
1
2
3<link rel="preconnect" href="https://stream.mux.com" crossorigin>
4<link rel="preconnect" href="https://image.mux.com" crossorigin>
5
6<link
7  rel="preload"
8  as="image"
9  fetchpriority="high"
10  href="https://image.mux.com/GzzMttUFGIae9W3jCX8HVgIs2oFdj9aeSvNd59syTr8/thumbnail.jpg?time=1"
11>
12
13<script type="module" src="https://cdn.jsdelivr.net/npm/@mux/mux-video/+esm"></script>
13
14
15<!-- ========================================= -->
16<!-- CUSTOM CURSOR                             -->
17<!-- ========================================= -->
18<script>
19document.addEventListener('DOMContentLoaded', function () {
20  // Geräte ohne echte Maus ausschließen.
21  // WICHTIG: nicht über ontouchstart/maxTouchPoints erkennen –
22  // Windows-Laptops mit Touchscreen wurden dadurch fälschlich
23  // als Touch-Geräte behandelt. Stattdessen: "Gibt es eine Maus?"
24  const hasFinePointer = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
25
26  if (!hasFinePointer) {
27    document.querySelectorAll('.cursor-circle, .cursor-arrow').forEach(el => el.remove());
28    return;
29  }
30
31  // Aktiviert die cursor:none-Regeln im CSS.
32  // Ohne diese Klasse bleibt der Standard-Cursor überall sichtbar –
33  // es kann also nie ein "unsichtbarer Cursor ohne Ersatz" entstehen.
34  document.documentElement.classList.add('has-custom-cursor');
35
36  // Schon vorhanden? Dann nicht doppelt einfügen.
37  if (document.querySelector('.cursor-circle') || document.querySelector('.cursor-arrow')) return;
38
39  const cursorHTML = `
40    <div class="cursor-circle"></div>
41    <div class="cursor-arrow">
42      <svg class="cursor-arrow_icon" xmlns="http://www.w3.org/2000/svg"
43          viewBox="0 0 36 32" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
44        <path d="M36 15.9038L21.9646 31.8076L17.6354 27.7519L25.6101 18.8202H0V12.9873H25.6101L17.6354 4.05568L21.9646 0L36 15.9038Z"
45          fill="currentColor"/>
46      </svg>
47    </div>
48  `;
49  document.body.insertAdjacentHTML('beforeend', cursorHTML);
50});
51</script>
51
52
53<!-- Flowbase Booster [Custom Slider] -->
54<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/[email protected]/dist/custom-slider.min.js" type="text/javascript"></script>
54<script src="https://cdn.prod.website-files.com/683eadad57b97cce30e149fe%2F66ba5a08efe71070f98dd10a%2F6a858709c1ca9f626f45962c%2Fwg6pmr6-1.1.1.js" type="text/javascript"></script>
54</head><body><div class="page-wrapper"><div class="global-styles w-embed"><style>
55
56
57/* ===================================== */
58/* BASE / TYPOGRAPHY                     */
59/* ===================================== */
60
61/* Text-Rendering */
62body {
63  -webkit-font-smoothing: antialiased;
64  -moz-osx-font-smoothing: grayscale;
65  font-smoothing: antialiased;
66  text-rendering: optimizeLegibility;
67}
68
69/* Focus-Outline für Keyboard-Navigation */
70*[tabindex]:focus-visible,
71input[type="file"]:focus-visible {
72  outline: 0.125rem solid #4d65ff;
73  outline-offset: 0.125rem;
74}
75
76/* Typografie vererben */
77.inherit-color * {
78  color: inherit;
79}
80
81/* Rich Text: Top-/Bottom-Margins bereinigen */
82.w-richtext > :not(div):first-child,
83.w-richtext > div:first-child > :first-child {
84  margin-top: 0 !important;
85}
86
87.w-richtext > :last-child,
88.w-richtext ol li:last-child,
89.w-richtext ul li:last-child {
90  margin-bottom: 0 !important;
91}
92
93/* Container zentriert halten */
94.container-medium,
95.container-small,
96.container-large {
97  margin-right: auto !important;
98  margin-left: auto !important;
99}
100
101/* Utility: Mehrzeiliger Text mit "…" */
102.text-style-3lines {
103  display: -webkit-box;
104  overflow: hidden;
105  -webkit-line-clamp: 3;
106  -webkit-box-orient: vertical;
107}
108
109.text-style-2lines {
110  display: -webkit-box;
111  overflow: hidden;
112  -webkit-line-clamp: 2;
113  -webkit-box-orient: vertical;
114}
115
116/* Utility: Hide */
117.hide {
118  display: none !important;
119}
120
121@media screen and (max-width: 991px) {
122  .hide,
123  .hide-tablet {
124    display: none !important;
125  }
126}
127
128@media screen and (max-width: 767px) {
129  .hide-mobile-landscape {
130    display: none !important;
131  }
132}
133
134@media screen and (max-width: 479px) {
135  .hide-mobile {
136    display: none !important;
137  }
138}
139
140/* Utility: Spacing */
141.margin-0 {
142  margin: 0rem !important;
143}
144
145.padding-0 {
146  padding: 0rem !important;
147}
148
149.spacing-clean {
150  padding: 0rem !important;
151  margin: 0rem !important;
152}
153
154.margin-top {
155  margin-right: 0rem !important;
156  margin-bottom: 0rem !important;
157  margin-left: 0rem !important;
158}
159
160.padding-top {
161  padding-right: 0rem !important;
162  padding-bottom: 0rem !important;
163  padding-left: 0rem !important;
164}
165
166.margin-right {
167  margin-top: 0rem !important;
168  margin-bottom: 0rem !important;
169  margin-left: 0rem !important;
170}
171
172.padding-right {
173  padding-top: 0rem !important;
174  padding-bottom: 0rem !important;
175  padding-left: 0rem !important;
176}
177
178.margin-bottom {
179  margin-top: 0rem !important;
180  margin-right: 0rem !important;
181  margin-left: 0rem !important;
182}
183
184.padding-bottom {
185  padding-top: 0rem !important;
186  padding-right: 0rem !important;
187  padding-left: 0rem !important;
188}
189
190.margin-left {
191  margin-top: 0rem !important;
192  margin-right: 0rem !important;
193  margin-bottom: 0rem !important;
194}
195
196.padding-left {
197  padding-top: 0rem !important;
198  padding-right: 0rem !important;
199  padding-bottom: 0rem !important;
200}
201
202.margin-horizontal {
203  margin-top: 0rem !important;
204  margin-bottom: 0rem !important;
205}
206
207.padding-horizontal {
208  padding-top: 0rem !important;
209  padding-bottom: 0rem !important;
210}
211
212.margin-vertical {
213  margin-right: 0rem !important;
214  margin-left: 0rem !important;
215}
216
217.padding-vertical {
218  padding-right: 0rem !important;
219  padding-left: 0rem !important;
220}
221
222/* ===================================== */
223/* FLUID TYPE SCALE                      */
224/* ===================================== */
225
226  :root {
227    --font-from: 15;
228    --font-to: 15;
229    --vw-from: calc(1920 / 100);
230    --vw-to: calc(2400 / 100);
231    --coefficient: calc((var(--font-to) - var(--font-from)) / (var(--vw-to) - var(--vw-from)));
232    --base: calc((var(--font-from) - var(--vw-from) * var(--coefficient)) / 16);
233  }
234
235  html {
236    font-size: calc(var(--base) * 1rem + var(--coefficient) * 1vw);
237  }
238
239  @media screen and (max-width: 1920px) {
240    :root {
241      --font-from: 15;
242      --font-to: 15;
243      --vw-from: calc(1440 / 100);
244      --vw-to: calc(1920 / 100);
245      }
246  }
247
248  @media screen and (max-width: 1440px) {
249    :root {
250      --font-from: 14;
251      --font-to: 15;
252      --vw-from: calc(991 / 100);
253      --vw-to: calc(1440 / 100);
254      }
255  }
256
257  @media screen and (max-width: 991px) {
258    :root {
259      --font-from: 13;
260      --font-to: 15;
261      --vw-from: calc(767 / 100);
262      --vw-to: calc(991 / 100);
263      }
264  }
265
266  @media screen and (max-width: 767px) {
267    :root {
268      --font-from: 13;
269      --font-to: 14;
270      --vw-from: calc(479 / 100);
271      --vw-to: calc(767 / 100);
272      }
273  }
274
275  @media screen and (max-width: 479px) {
276    :root {
277      --font-from: 12;
278      --font-to: 13;
279      --vw-from: calc(1 / 100);
280      --vw-to: calc(479 / 100);
281      }
282  }
283
284/* ===================================== */
285/* ICON / SVG FIXES                      */
286/* ===================================== */
287
288.icon_arrow-left,
289.icon_arrow-right {
290  width: 2.25rem;
291  height: auto;
292  display: block;
293}
294
295.slider-arrow-left svg,
296.slider-arrow-right svg {
297  color: inherit;
298}
299
300.slider-arrow-left svg path,
301.slider-arrow-right svg path {
302  fill: currentColor !important;
303}
304
305/* ===================================== */
306/* HERO PROJEKTE – COLOR TRANSITIONS     */
307/* ===================================== */
308
309.hero_headline-projekte,
310.hero_subheadline-projekte {
311  transition: color 0.25s ease;
312}
313
314.hero_color-area-projekte {
315  transition: background-color 0.25s ease;
316}
317
318/* ===================================== */
319/* NAV GLOBAL STYLES                     */
320/* ===================================== */
321
322.nav_wrapper {
323  --navcolor-base: #000000;
324  --navcolor: var(--navcolor-base);
325}
326
327.nav_wrapper.is-scrolled {
328  --navcolor: #000000;
329}
330
331.nav_wrapper .nav_brand-link-block,
332.nav_wrapper .nav_brand,
333.nav_wrapper .button.is-pill.is-nav.w-button:not(:hover) {
334  color: var(--navcolor) !important;
335}
336
337.nav_wrapper .button.is-pill.is-nav.w-button:not(:hover) {
338  border-color: var(--navcolor) !important;
339}
340
341.nav_wrapper .nav_burger-bar {
342  background-color: var(--navcolor) !important;
343  transition:
344    transform 0.28s cubic-bezier(.25, .46, .45, .94),
345    opacity 0.2s ease,
346    background-color 0.25s ease;
347  transform-origin: center;
348}
349
350.nav_wrapper .nav_brand svg,
351.nav_wrapper svg.nav_brand {
352  color: inherit;
353  fill: currentColor;
354  display: block;
355  vertical-align: middle;
356  overflow: visible;
357}
358
359.nav_wrapper .nav_brand-link-block {
360  line-height: 0;
361}
362
363.nav_wrapper .nav_brand,
364.nav_wrapper .nav_brand-link-block {
365  overflow: visible;
366}
367
368/* Burger Animation: geschlossen -> X */
369.nav_burger.is-menu-open .nav_burger-bar:nth-child(1),
370.nav_burger.w--open .nav_burger-bar:nth-child(1) {
371  transform: translateY(var(--burger-top-y, 0.4375rem)) rotate(45deg);
372}
373
374.nav_burger.is-menu-open .nav_burger-bar:nth-child(2),
375.nav_burger.w--open .nav_burger-bar:nth-child(2) {
376  opacity: 0;
377}
378
379.nav_burger.is-menu-open .nav_burger-bar:nth-child(3),
380.nav_burger.w--open .nav_burger-bar:nth-child(3) {
381  transform: translateY(var(--burger-bottom-y, -0.4375rem)) rotate(-45deg);
382}
383
384/* ===================================== */
385/* DESKTOP                               */
386/* ===================================== */
387
388@media screen and (min-width: 992px) {
389  .nav_burger.w--open .nav_burger-bar,
390  .nav_burger.is-menu-open .nav_burger-bar,
391  .nav_burger:hover .nav_burger-bar {
392    background-color: #000000 !important;
393  }
394
395  .nav_wrapper.is-open .nav_brand-link-block,
396  .nav_wrapper.is-open .nav_brand {
397    color: var(--navcolor) !important;
398  }
399
400  .nav_wrapper.is-open .button.is-pill.is-nav.w-button:not(:hover) {
401    color: var(--navcolor) !important;
402    border-color: var(--navcolor) !important;
403  }
404}
405
406/* ===================================== */
407/* TABLET & MOBILE                       */
408/* ===================================== */
409
410@media screen and (max-width: 991px) {
411  .nav_wrapper:not(.is-scrolled):not(.is-open) .nav_brand-link-block,
412  .nav_wrapper:not(.is-scrolled):not(.is-open) .nav_brand {
413    color: var(--navcolor) !important;
414  }
415
416  .nav_wrapper:not(.is-scrolled):not(.is-open) .nav_burger-bar {
417    background-color: var(--navcolor) !important;
418  }
419
420  .nav_wrapper.is-scrolled .nav_brand-link-block,
421  .nav_wrapper.is-scrolled .nav_brand,
422  .nav_wrapper.is-open .nav_brand-link-block,
423  .nav_wrapper.is-open .nav_brand {
424    color: #000000 !important;
425  }
426
427  .nav_wrapper.is-scrolled .nav_burger-bar,
428  .nav_wrapper.is-open .nav_burger-bar,
429  .nav_burger.w--open .nav_burger-bar,
430  .nav_burger.is-menu-open .nav_burger-bar,
431  .nav_burger:hover .nav_burger-bar {
432    background-color: #000000 !important;
433  }
434
435  .nav_wrapper.is-open .button.is-pill.is-nav.w-button:not(:hover) {
436    color: #000000 !important;
437    border-color: #000000 !important;
438  }
439}
440
441/* ===================================== */
442/* SCROLL LOCK (für Offcanvas/Overlay)   */
443/* ===================================== */
444
445/* reserviert dauerhaft Platz für die Scrollbar */
446html {
447  scrollbar-gutter: stable;
448}
449
450/* Scroll-Lock */
451html.no-scroll,
452body.no-scroll {
453  overflow: hidden;
454}
455
456/* Safari-Fallback */
457body.no-scroll {
458  position: relative;
459  width: 100%;
460}
461
462/* ===================================== */
463/* CUSTOM CURSOR – CIRCLE & ARROW        */
464/* ===================================== */
465/* cursor:none nur, wenn der Custom Cursor wirklich läuft:
466   echte Maus + Desktop-Breite + JS hat initialisiert (has-custom-cursor).
467   So gibt es auf Touch-Geräten und schmalen Fenstern nie einen
468   unsichtbaren Cursor. */
469@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
470  html.has-custom-cursor body {
471    cursor: none;
472  }
473  html.has-custom-cursor .slider_images,
474  html.has-custom-cursor a,
475  html.has-custom-cursor a.w-inline-block,
476  html.has-custom-cursor .w-button,
477  html.has-custom-cursor .button,
478  html.has-custom-cursor .nav_burger,
479  html.has-custom-cursor .project-teaser_wrapper {
480    cursor: none !important;
481  }
482}
483/* Unterhalb Desktop-Breite: Custom-Cursor-Elemente sicher ausblenden,
484   Standard-Cursor bleibt normal sichtbar */
485@media (max-width: 991px) {
486  .cursor-circle,
487  .cursor-arrow {
488    display: none !important;
489  }
490}
491.cursor-circle {
492  position: fixed;
493  left: 0;
494  top: 0;
495  width: 2.25rem;
496  height: 2.25rem;
497  border-radius: 50%;
498  background-color: #000;
499  opacity: 0;
500  pointer-events: none;
501  z-index: 9999;
502  transform: translate(-50%, -50%);
503  transition:
504    opacity .25s ease,
505    transform .35s cubic-bezier(.25, .46, .45, .94),
506    background-color .3s cubic-bezier(.25, .46, .45, .94),
507    color .3s cubic-bezier(.25, .46, .45, .94),
508    border-color .3s cubic-bezier(.25, .46, .45, .94),
509    padding .35s cubic-bezier(.25, .46, .45, .94),
510    border-radius .35s cubic-bezier(.25, .46, .45, .94),
511    font-size .35s cubic-bezier(.25, .46, .45, .94);
512  will-change: transform, opacity;
513}
514.cursor-circle.is-green {
515  background-color: #f1f52d;
516}
517
518.cursor-circle.is-link {
519  transform: translate(-50%, -50%) scale(0.5);
520}
521.cursor-arrow {
522  position: fixed;
523  left: 0;
524  top: 0;
525  width: 2.25rem;
526  height: auto;
527  opacity: 0;
528  pointer-events: none;
529  z-index: 9999;
530  transform: translate(-50%, -50%) rotate(0deg);
531  transition: opacity 0.15s ease;
532  will-change: transform, opacity;
533}
534.cursor-arrow_icon {
535  display: block;
536  width: 100%;
537  height: auto;
538  color: #000;
539}
540.cursor-circle.is-button {
541  width: auto;
542  height: auto;
543  padding: 0.375rem var(--_short-cuts---1-5);
544  border: 1px solid #000;
545  border-radius: 3rem;
546  background-color: var(--background-color--background-primary);
547  font-family: "Geistmono Wght";
548  font-size: 1.5rem;
549  font-weight: 600;
550  color: #f1f52d;
551  display: flex;
552  align-items: center;
553  justify-content: center;
554  white-space: nowrap;
555  transform: translate(-50%, -50%);
556}
557.cursor-circle.is-button::after {
558  content: attr(data-label);
559}
560
561
562/* ===================================== */
563/* TEXT-SELECTION & CURSOR-SELECTION     */
564/* ===================================== */
565
566::selection {
567  background: #F3F633;
568  color: inherit;
569  text-shadow: none;
570}
571
572::-moz-selection {
573  background: #F3F633;
574  color: inherit;
575  text-shadow: none;
576}
577
578img::selection,
579svg::selection {
580  background: transparent;
581}
582
583.cursor-circle.is-select {
584  width: 2px;
585  border-radius: 999px;
586  padding: 0;
587  border: none;
588  background-color: #000;
589  transform: translate(-50%, -50%);
590  mix-blend-mode: normal;
591}
592
593/* ===================================== */
594/* SECTION BG PER CUSTOM ATTRIBUTE       */
595/* ===================================== */
596
597.is-background-color-change {
598  background-color: #ffffff;
599  transition: background-color 0.7s cubic-bezier(.25, .46, .45, .94);
600}
601
602@media (prefers-reduced-motion: reduce) {
603  .is-background-color-change {
604    transition: none;
605  }
606}
607
608/* ========================================= */
609/* PAGE TRANSITIONS – nur Live, nicht Designer */
610/* ========================================= */
611
612html:not(.wf-design-mode).has-page-transition .page-wrapper {
613  opacity: 0;
614  visibility: hidden;
615  pointer-events: none;
616  transition:
617    opacity 0.3s ease,
618    visibility 0.3s ease;
619}
620
621html:not(.wf-design-mode).has-page-transition .page-wrapper.is-page-entered {
622  opacity: 1;
623  visibility: visible;
624  pointer-events: auto;
625}
626
627html:not(.wf-design-mode).has-page-transition.is-page-exiting .page-wrapper {
628  opacity: 0;
629  visibility: hidden;
630}
631
632/* ========================================================= */
633/* GLOBAL TEXT LINKS – HAIRLINE UNDERLINE (RESPEKTIERT NONE) */
634/* ========================================================= */
635
636.text-style-link,
637.w-richtext a,
638a {
639  text-decoration-thickness: 1px;
640  text-underline-offset: 0.12em;
641}
642
643/* ========================================================= */
644/* QUOTE – CUSTOM UNDERLINE                                  */
645/* ========================================================= */
646
647.quote_big {
648  font-family: "Geist";
649  font-weight: 100;
650  text-decoration-line: underline;
651  text-decoration-thickness: 1px;
652  text-underline-offset: 1rem;
653  text-decoration-skip-ink: none;
654}
655
656.quote_small {
657  font-family: "Geist";
658  font-weight: 200;
659  text-decoration-line: underline;
660  text-decoration-thickness: 1px;
661  text-underline-offset: 0.4rem;
662  text-decoration-skip-ink: none;
663}
664
665/* ========================================================= */
666/* FIGCAPTION                                                */
667/* ========================================================= */
668
669figcaption {
670  text-align: left;
671  margin-top: .75rem;
672}
673
674/* ========================================================= */
675/* VERTICAL ACCORDION                                        */
676/* ========================================================= */
677
678@media only screen and (min-width: 992px) {
679}
680
681.no-click {
682  pointer-events: none;
683}
684
685.can-click {
686  pointer-events: auto;
687}
688
689[class*="spacer"] {
690}
691
692@media screen and (min-width: 768px) {
693  .tabs_heading {
694    writing-mode: vertical-rl;
695    text-orientation: mixed;
696  }
697}
698
699
700/* ===================================== */
701/* GLOBAL MUX VIDEO – COVER FIX          */
702/* ===================================== */
703
704/* Alle Mux-Container */
705[data-mux-url],
706.header-video_mux-embed {
707  position: relative !important;
708  overflow: hidden !important;
709}
710
711/* Hero-Video Startseite */
712.header-video_mux-embed {
713  display: block !important;
714  position: relative !important;
715  width: 100% !important;
716  max-width: none !important;
717  aspect-ratio: 16 / 9 !important;
718  overflow: hidden !important;
719
720  background-image: url("https://image.mux.com/GzzMttUFGIae9W3jCX8HVgIs2oFdj9aeSvNd59syTr8/thumbnail.jpg?time=1");
721  background-size: cover;
722  background-position: center center;
723  background-repeat: no-repeat;
724  background-color: #e9ece9;
725}
726
727/* Hero-Video mobil quadratisch */
728@media screen and (max-width: 767px) {
729  .header-video_mux-embed {
730    aspect-ratio: 1 / 1 !important;
731  }
732}
733
734/* Contact: Webflow image_wapper darf hier KEIN Ratio erzwingen */
735.contact_wrapper [data-mux-url],
736.contact_wrapper .is-contact-video {
737  position: absolute !important;
738  inset: 0 !important;
739  width: 100% !important;
740  height: 100% !important;
741  min-height: 100% !important;
742  padding-top: 0 !important;
743  aspect-ratio: auto !important;
744  z-index: 0;
745}
746
747/* Mux Host */
748[data-mux-url] mux-video,
749.header-video_mux-embed mux-video,
750[data-mux-url] video,
751.header-video_mux-embed video {
752  position: absolute !important;
753  inset: 0 !important;
754  width: 100% !important;
755  height: 100% !important;
756  min-width: 100% !important;
757  min-height: 100% !important;
758  max-width: none !important;
759  max-height: none !important;
760  display: block !important;
761  aspect-ratio: auto !important;
762  object-fit: cover !important;
763  object-position: center center !important;
764
765  --media-object-fit: cover;
766  --media-object-position: center center;
767}
768</style></div><div data-animation="over-right" class="nav_wrapper w-nav" data-navcolor="#000000" data-easing2="ease-out-quad" data-easing="ease-in-quad" data-collapse="all" data-w-id="3a559648-6f6b-ac9c-8f37-b7dbad8cc7f2" role="banner" data-duration="0"><div class="padding-global has-flex-child-grow"><div class="nav_brand-wrapper"><a href="/" class="nav_brand-link-block w-nav-brand"><div class="nav_brand w-embed"><svg
769  class="nav_brand"
770  xmlns="http://www.w3.org/2000/svg"
771  viewBox="0 0 140 13.3"
772  role="img"
773  aria-label="Brand"
774  preserveAspectRatio="xMidYMid meet"
775>
776  <g fill="currentColor">
777    <path d="M8.3 5.1c-3-.3-3.9-.5-3.9-1.1S5.3 2.9 7 2.9c2 0 4 .7 5 1.7l2-2.4C12.7 1 10.1.1 7.2.1 3.4.1.8 1.7.8 4.4.8 7 3.4 7.7 6.3 8c3.2.4 4.2.4 4.2 1.3 0 .7-1.2 1.1-2.9 1.1-1.8 0-4.1-.5-5.6-2L0 11c1.4 1.4 4.7 2.3 7.4 2.3 4 0 6.8-1.4 6.8-4.4 0-2.9-3-3.5-5.9-3.8m18.4 0h-7V.3h-3.5v12.8h3.5v-5h7v5h3.5V.3h-3.5zM39.9 0c-4.5 0-7.7 2.8-7.7 6.6s3.2 6.6 7.7 6.6 7.7-2.8 7.7-6.6S44.3 0 39.9 0m0 10.2c-2.3 0-4.1-1.4-4.1-3.6S37.6 3 39.9 3 44 4.4 44 6.6s-1.8 3.6-4.1 3.6M63 4.5c0-2.7-2-4.3-5.2-4.3h-8.2V13h3.5V8.8h3.5l2.7 4.2h4l-3.1-4.6c1.7-.6 2.8-2 2.8-3.9M57.7 6h-4.6V3.1h4.6c1.2 0 1.9.5 1.9 1.4 0 1-.7 1.5-1.9 1.5m6.8-2.8h5.4V13h3.5V3.2h5.4V.3H64.5zm22.6-.1c2 0 3.3 1.1 3.8 2.6l3.2-1.4c-1-2.6-3.4-4.2-7-4.2-4.4 0-7.6 2.8-7.6 6.6s3.2 6.6 7.6 6.6c3.6 0 6-1.6 7-4.2l-3.2-1.4c-.5 1.5-1.8 2.6-3.8 2.6-2.3 0-4.1-1.4-4.1-3.6s1.8-3.6 4.1-3.6M106 7c0 2-1.1 3.2-3.3 3.2S99.4 9 99.4 7V.3h-3.5v7.1c0 3.7 2.4 5.9 6.8 5.9s6.8-2.2 6.8-5.9V.3H106zm5.2-3.8h5.4V13h3.5V3.2h5.4V.3h-14.3zm23 1.9c-3-.3-3.9-.5-3.9-1.1s.9-1.1 2.6-1.1c2 0 3.9.7 5 1.7l2-2.4C138.6 1 136 .1 133.1.1c-3.8 0-6.4 1.6-6.4 4.3 0 2.6 2.6 3.3 5.4 3.6 3.2.4 4.2.4 4.2 1.3 0 .7-1.2 1.1-2.9 1.1-1.8 0-4.1-.5-5.6-2l-2 2.6c1.4 1.4 4.7 2.3 7.4 2.3 4 0 6.8-1.4 6.8-4.4.1-2.9-2.9-3.5-5.8-3.8"/>
778  </g>
779</svg></div></a><nav role="navigation" class="nav_menu-wrapper-1 w-nav-menu"><div class="nav_menu-wrapper-2"><ul role="list" class="nav_menu-list w-list-unstyled"><li role="listitem" class="nav_list-item"><a href="/formate" aria-current="page" class="nav_link w--current">Formate</a></li><li role="listitem" class="nav_list-item"><a href="/projekte" class="nav_link">Projekte</a></li><li role="listitem" class="nav_list-item"><a href="/leistungen" class="nav_link">Leistungen</a></li><li role="listitem" class="nav_list-item"><a href="/agentur" class="nav_link">Agentur</a></li></ul><div class="nav_menu-contact-wrapper"><a data-cursor="Auf Google Maps anzeigen" href="https://www.google.com/maps/place/SHORT+CUTS+GmbH+design+%2B+kommunikation/@52.4902944,13.3751667,17z/data=!3m2!4b1!5s0x47a850253ec0e899:0x6c8acde0e82d75e7!4m6!3m5!1s0x47a8511192c1d5cb:0xf0c131348862b9c3!8m2!3d52.4902944!4d13.3777416!16s%2Fg%2F1vs1qxf0?entry=ttu&amp;g_ep=EgoyMDI1MTExNy4wIKXMDSoASAFQAw%3D%3D" target="_blank" class="nav_menu-contact-top-wrapper w-inline-block"><div class="heading-style-h5">Kreuzbergstraße 30<br/></div><div class="heading-style-h5">10965 Berlin</div></a><div class="nav_menu-contact-top-wrapper"><a href="tel:030253912-10" class="heading-style-h5">030 253912-10</a><a href="mailto:[email protected]" class="heading-style-h5">[email protected]</a></div></div></div></nav><div class="nav_burger-button-wrapper"><a href="mailto:[email protected]" class="button is-pill is-nav w-button">E-Mail</a><div class="nav_burger w-nav-button"><div class="nav_burger-wrapper"><div class="nav_burger-bar"></div><div class="nav_burger-bar"></div><div class="nav_burger-bar"></div></div></div></div></div></div></div><section class="section_hero-content"><div data-hero-bg-color="#ffffff" class="hero_color-area-content"></div><div class="padding-global padding-section-hero"><div class="container-large"><div class="hero_headline-wrapper"><h1 data-hero-headline-color="#000000" class="hero_headline-content">Momente, in denen wir Sie begleiten.</h1><div class="spacer-medium"></div><h2 data-hero-subheadline-color="#000000" class="hero_subheadline-content">Ob Aufbruch, Umbruch oder Durchbruch – wir bringen Strategie, Design, Kultur und Technologie wirkungsvoll zusammen.</h2></div></div></div></section><main class="main-wrapper"><section id="Projekte" class="section_project-teaser"><div class="padding-global padding-section-small"><div class="container-large"><div class="formate-teaser_collection-list-wrapper w-dyn-list"><div role="list" class="formate-teaser_collection-list w-dyn-items"><div role="listitem" class="formate-teaser_collection-list-item w-dyn-item"><a href="https://www.short-cuts.de/formate/brand-system" class="formate-teaser_link w-inline-block"><div data-cursor="Zum Format" class="formate-teaser_wrapper"><div class="w-layout-grid formate-teaser_grid"><div class="project-teaser_wrapper-top"><div class="formate-teaser_schwerpunkt-wrapper for-launch"><div class="formate-teaser_schwerpunkt for-launch">Brand System</div></div><div class="image_wapper for-launch"><img src="https://cdn.prod.website-files.com/690bb973bc0d45ae80ee5d87/69e2351bda82ec2f26f80ba2_SC_DesignSystem.avif" loading="lazy" alt="" class="image_absolute for-launch"/></div><div data-url="https://www.short-cuts.de/formate/brand-system" class="formate-teaser_link-source"></div></div><div class="formate-teaser_wrapper-bottom"><div class="formate-teaser_text-wrapper"><h3 class="project-teaser_headline">
779Identität und Design, die nach innen wirken und nach außen überzeugen.</h3><div class="text-size-small">Eine Marke zeigt sich nicht nur im Logo und in den Farben, sondern in vielen täglichen Berührungspunkten (Präsentationen, Social Media, Produkt, interne Kommunikation). Deshalb wird gemeinsam mit dem Kunden ein Designsystem entwickelt, das zwei Dinge leistet: es unterstreicht die Unternehmensstrategie, und es befähigt die Teams, die Marke selbständig weiterzutragen.</div></div><div class="formate-teaser_contact-wrapper"><img src="https://cdn.prod.website-files.com/690bb973bc0d45ae80ee5d87/69e22f30a745b332a9c7c3f7_69c244f6c0652dd107d79f75_sc-images-square-felix-schubert.webp" loading="lazy" alt="" class="formate-teaser_contact-image"/><div class="formate-teaser_contact-name">Felix Schubert</div></div></div></div></div></a></div><div role="listitem" class="formate-teaser_collection-list-item w-dyn-item"><a href="https://www.short-cuts.de/formate/culture-of-trust" class="formate-teaser_link w-inline-block"><div data-cursor="Zum Format" class="formate-teaser_wrapper"><div class="w-layout-grid formate-teaser_grid"><div class="project-teaser_wrapper-top"><div class="formate-teaser_schwerpunkt-wrapper for-launch"><div class="formate-teaser_schwerpunkt for-launch">Culture of Trust</div></div><div class="image_wapper for-launch"><img src="https://cdn.prod.website-files.com/690bb973bc0d45ae80ee5d87/69fc4696678316b5a8824ced_SC_EB2026_Format.avif" loading="lazy" alt="" class="image_absolute for-launch"/></div><div data-url="https://www.short-cuts.de/formate/culture-of-trust" class="formate-teaser_link-source"></div></div><div class="formate-teaser_wrapper-bottom"><div class="formate-teaser_text-wrapper"><h3 class="project-teaser_headline">Die Marke, für die man arbeiten will</h3><div class="text-size-small">Aktuell verändert sich erneut, was Mitarbeiter:innen von Arbeitgebern erwarten: Sicherheit, Sinn und eine Führung mit Haltung. Wer das bietet, ist im Vorteil – auch in wirtschaftlich anspruchsvollen Zeiten. Eine starke Arbeitgebermarke entsteht durch die Art, wie geführt, entschieden und kommuniziert wird. Wir machen sichtbar, was ein Unternehmen ausmacht.</div></div><div class="formate-teaser_contact-wrapper"><img src="https://cdn.prod.website-files.com/690bb973bc0d45ae80ee5d87/69e22fe6261d3c998edd0583_69c2454278085dd7f767c65a_sc-images-square-britta-korpas.webp" loading="lazy" alt="" class="formate-teaser_contact-image"/><div class="formate-teaser_contact-name">Britta Korpas</div></div></div></div></div></a></div><div role="listitem" class="formate-teaser_collection-list-item w-dyn-item"><a href="https://www.short-cuts.de/formate/brand-confidence" class="formate-teaser_link w-inline-block"><div data-cursor="Zum Format" class="formate-teaser_wrapper"><div class="w-layout-grid formate-teaser_grid"><div class="project-teaser_wrapper-top"><div class="formate-teaser_schwerpunkt-wrapper for-launch"><div class="formate-teaser_schwerpunkt for-launch">Brand Confidence</div></div><div class="image_wapper for-launch"><img src="https://cdn.prod.website-files.com/690bb973bc0d45ae80ee5d87/69e23571d9e4789cb96519ac_SC_Markenvertrauen.avif" loading="lazy" alt="" class="image_absolute for-launch"/></div><div data-url="https://www.short-cuts.de/formate/brand-confidence" class="formate-teaser_link-source"></div></div><div class="formate-teaser_wrapper-bottom"><div class="formate-teaser_text-wrapper"><h3 class="project-teaser_headline">Selbstbewusste Markenidentität und Steigerung des Markenwerts</h3><div class="text-size-small">Vertrauen entscheidet, ob Kunden bleiben, Fachkräfte kommen und Aufträge vergeben werden. Wir schärfen Positionierung, Botschaften und Auftritt so, dass aus Substanz sichtbare Glaubwürdigkeit wird – strategisch, gestalterisch, kulturell.</div></div><div class="formate-teaser_contact-wrapper"><img src="https://cdn.prod.website-files.com/690bb973bc0d45ae80ee5d87/69e22f711d937c1223ebd9a6_69c244f792c49
7796e622e698fa_sc-images-square-daniel-bischoff.webp" loading="lazy" alt="" class="formate-teaser_contact-image"/><div class="formate-teaser_contact-name">Daniel Bischoff</div></div></div></div></div></a></div><div role="listitem" class="formate-teaser_collection-list-item w-dyn-item"><a href="https://www.short-cuts.de/formate/ki-brand-readiness" class="formate-teaser_link w-inline-block"><div data-cursor="Zum Format" class="formate-teaser_wrapper"><div class="w-layout-grid formate-teaser_grid"><div class="project-teaser_wrapper-top"><div class="formate-teaser_schwerpunkt-wrapper for-launch"><div class="formate-teaser_schwerpunkt for-launch">KI Brand Readiness</div></div><div class="image_wapper for-launch"><img src="https://cdn.prod.website-files.com/690bb973bc0d45ae80ee5d87/69e2352b7e79ae0a45fcd887_SC_KIBrandReadiness.avif" loading="lazy" alt="" class="image_absolute for-launch"/></div><div data-url="https://www.short-cuts.de/formate/ki-brand-readiness" class="formate-teaser_link-source"></div></div><div class="formate-teaser_wrapper-bottom"><div class="formate-teaser_text-wrapper"><h3 class="project-teaser_headline">Sichtbar bleiben, wenn KI mitentscheidet</h3><div class="text-size-small">KI-Systeme entscheiden zunehmend mit, welche Marken sichtbar werden – in Suchen, Empfehlungen, Kaufentscheidungen. Wir machen eure Marke bereit für diese neue Realität: strukturiert, konsistent und erkennbar – für Menschen wie für Maschinen.</div></div><div class="formate-teaser_contact-wrapper"><img src="https://cdn.prod.website-files.com/690bb973bc0d45ae80ee5d87/69e22f929a597fbd5c3764e9_69c244f6f00b210565e66b09_sc-images-square-kai-seliger.webp" loading="lazy" alt="" class="formate-teaser_contact-image"/><div class="formate-teaser_contact-name">Kai Seliger</div></div></div></div></div></a></div><div role="listitem" class="formate-teaser_collection-list-item w-dyn-item">
779<a href="https://www.short-cuts.de/formate/unternehmensnachfolge" class="formate-teaser_link w-inline-block"><div data-cursor="Zum Format" class="formate-teaser_wrapper"><div class="w-layout-grid formate-teaser_grid"><div class="project-teaser_wrapper-top"><div class="formate-teaser_schwerpunkt-wrapper for-launch"><div class="formate-teaser_schwerpunkt for-launch">Legacy by Design</div></div><div class="image_wapper for-launch"><img src="https://cdn.prod.website-files.com/690bb973bc0d45ae80ee5d87/69e2354d5ec31d0bf1b9116e_SC_Unternehmensnachfolge.avif" loading="lazy" alt="" class="image_absolute for-launch"/></div><div data-url="https://www.short-cuts.de/formate/unternehmensnachfolge" class="formate-teaser_link-source"></div></div><div class="formate-teaser_wrapper-bottom"><div class="formate-teaser_text-wrapper"><h3 class="project-teaser_headline">Marken- und Kulturentwicklung vor, während und nach der Unternehmens­nachfolge</h3><div class="text-size-small">Nachfolge ist kein Abschluss, sondern ein Anfang. Damit das, was über Jahre gewachsen ist, auch im Übergang sichtbar bleibt, braucht es mehr als eine saubere Transaktion. Wir begleiten Übergaben kommunikativ und helfen, neue Kapitel erzählbar zu machen – für Mitarbeitende, Kunden und den Markt.</div></div><div class="formate-teaser_contact-wrapper"><img src="https://cdn.prod.website-files.com/690bb973bc0d45ae80ee5d87/69e22f711d937c1223ebd9a6_69c244f792c49
7796e622e698fa_sc-images-square-daniel-bischoff.webp" loading="lazy" alt="" class="formate-teaser_contact-image"/><div class="formate-teaser_contact-name">Daniel Bischoff</div></div></div></div></div></a></div><div role="listitem" class="formate-teaser_collection-list-item w-dyn-item"><a href="https://www.short-cuts.de/formate/beyond-the-deal" class="formate-teaser_link w-inline-block"><div data-cursor="Zum Format" class="formate-teaser_wrapper"><div class="w-layout-grid formate-teaser_grid"><div class="project-teaser_wrapper-top"><div class="formate-teaser_schwerpunkt-wrapper for-launch"><div class="formate-teaser_schwerpunkt for-launch">Beyond the Deal</div></div><div class="image_wapper for-launch"><img src="https://cdn.prod.website-files.com/690bb973bc0d45ae80ee5d87/69e23566b91a00bc9af964dc_SC_PrePostMerger.avif" loading="lazy" alt="" class="image_absolute for-launch"/></div><div data-url="https://www.short-cuts.de/formate/beyond-the-deal" class="formate-teaser_link-source"></div></div><div class="formate-teaser_wrapper-bottom"><div class="formate-teaser_text-wrapper"><h3 class="project-teaser_headline">Übernahmen, Fusionen, Führungswechsel – kommunikativ und kulturell begleitet.</h3><div class="text-size-small">Wenn zwei Marken zusammengehen, treffen auch zwei Kulturen, zwei Sprachen und zwei Vorstellungen davon aufeinander, wie Dinge laufen. Hier entstehen häufig Reibungen. Wir begleiten diesen Moment kommunikativ, kulturell und gestalterisch – damit ein neues, tragfähiges Kapitel aufgeschlagen wird.</div></div><div class="formate-teaser_contact-wrapper"><img src="https://cdn.prod.website-files.com/690bb973bc0d45ae80ee5d87/69e22fb2261d3c998edce47e_69c27dee49004ecc88db317b_sc-images-square-markus-kocherscheidt.webp" loading="lazy" alt="" class="formate-teaser_contact-image"/><div class="formate-teaser_contact-name">Markus Kocherscheidt</div></div></div></div></div></a></div></div></div></div></div></section><section id="Kontakt" class="section_contact"><div class="padding-global padding-section-contact"><div class="container-large is-section-contact"><div data-cursor-green="true" class="contact_wrapper"><img src="https://cdn.prod.website-files.com/683eadad57b97cce30e149fe/6a54b9ab823fd96a6565fd35_DT3A0755.avif" loading="lazy" alt="" sizes="(max-width: 1920px) 100vw, 1920px" srcset="https://cdn.prod.website-files.com/683eadad57b97cce30e149fe/6a54b9ab823fd96a6565fd35_DT3A0755-p-500.avif 500w, https://cdn.prod.website-files.com/683eadad57b97cce30e149fe/6a54b9ab823fd96a6565fd35_DT3A0755-p-800.avif 800w, https://cdn.prod.website-files.com/683eadad57b97cce30e149fe/6a54b9ab823fd96a6565fd35_DT3A0755-p-1080.avif 1080w, https://cdn.prod.website-files.com/683eadad57b97cce30e149fe/6a54b9ab823fd96a6565fd35_DT3A0755-p-1600.avif 1600w, https://cdn.prod.website-files.com/683eadad57b97cce30e149fe/6a54b9ab823fd96a6565fd35_DT3A0755-p-2000.avif 2000w, https://cdn.prod.website-files.com/683eadad57b97cce30e149fe/6a54b9ab823fd96a6565fd35_DT3A0755.avif 2048w" class="image_absolute is-top-0"/><div class="contact_background-gradient"></div><div class="contact_text-wrapper"><div class="contact_top-wrapper"><div class="spacer-small"><h2 class="is-contact-banner">Sprechen Sie mich an.</h2></div><p class="is-contact-text">
779Jedes dieser Formate ist aus einer Vielzahl realer Fragen entstanden. Wenn Sie sich hier wiedererkennen, melden Sie sich gerne. Wenn nicht, auch – dann bauen wir das nächste Format um Sie herum.</p><div class="spacer-large is-flex-horizontal"><a href="mailto:[email protected]" class="button is-green-active w-button">E-Mail</a><a href="https://www.linkedin.com/in/britta-korpas/" target="_blank" class="button is-contact-icon w-inline-block"><div class="contact_icon w-embed"><svg aria-hidden="true" fill='currentColor' viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
780<path d="M3.91797 17.5H0.289063V5.81641H3.91797V17.5ZM2.10156 4.22266C0.941406 4.22266 0 3.26172 0 2.10156C0 1.54297 0.222656 1.01172 0.617188 0.617188C1.01172 0.222656 1.54687 0 2.10156 0C2.65625 0 3.19141 0.222656 3.58594 0.617188C3.98047 1.01172 4.20312 1.54687 4.20312 2.10156C4.20312 3.26172 3.26172 4.22266 2.10156 4.22266ZM17.4961 17.5H13.875V11.8125C13.875 10.457 13.8477 8.71875 11.9883 8.71875C10.1016 8.71875 9.8125 10.1914 9.8125 11.7148V17.5H6.1875V5.81641H9.66797V7.41016H9.71875C10.2031 6.49219 11.3867 5.52344 13.1523 5.52344C16.8242 5.52344 17.5 7.94141 17.5 11.082V17.5H17.4961Z"/>
781</svg></div></a></div></div><div class="contact_bottom-wrapper"><div class="heading-style-h5 is-white">Britta Korpas</div><div class="heading-style-h6-normal is-white">Creative Director × Kultur</div></div></div></div></div></div></section></main><section id="Agentur" class="section_footer"><div class="padding-global padding-section-footer"><div class="container-large"><div class="divider-line"></div><div class="spacer-small"></div><div class="w-layout-grid footer_grid"><a data-cursor="Auf Google Maps anzeigen" id="w-node-e62d3824-a546-6c03-cb84-20bc8a9e62d3-9f2a534b" href="https://www.google.com/maps/place/SHORT+CUTS+GmbH+design+%2B+kommunikation/@52.4902944,13.3751667,17z/data=!3m2!4b1!5s0x47a850253ec0e899:0x6c8acde0e82d75e7!4m6!3m5!1s0x47a8511192c1d5cb:0xf0c131348862b9c3!8m2!3d52.4902944!4d13.3777416!16s%2Fg%2F1vs1qxf0?entry=ttu&amp;g_ep=EgoyMDI1MTExNy4wIKXMDSoASAFQAw%3D%3D" target="_blank" class="footer_text-wrapper w-inline-block"><div class="footer_link-items-big">Kreuzbergstr. 30<br/></div><div class="footer_link-items-big">10965 Berlin</div></a><div id="w-node-_45d10a09-cd84-0e14-f1fb-3a699f2a5356-9f2a534b" class="footer_text-wrapper"><a href="tel:030253912-10" class="footer_link-items-big">030 253912-10</a><a href="mailto:[email protected]" class="footer_link-items-big">[email protected]</a></div><div id="w-node-_45d10a09-cd84-0e14-f1fb-3a699f2a535b-9f2a534b" class="footer_social-media-wrapper"><div class="footer_social-media-divider"><div class="divider-line"></div><div class="spacer-small"></div></div><div class="footer_social-media-buttons"><a href="https://shop.short-cuts.de/" target="_blank" class="button is-small w-button">Shop</a><a href="https://de.linkedin.com/company/shortcutsbln" target="_blank" class="button is-small w-button">LinkedIn</a><a href="https://www.instagram.com/shortcutsbln" target="_blank" class="button is-small w-button">Instagram</a></div></div><div id="w-node-_45d10a09-cd84-0e14-f1fb-3a699f2a5362-9f2a534b" class="footer_legal-wrapper"><div class="footer_legal-links"><div class="footer_legal-links-wrapper"><a href="/impressum" class="footer_link-items-small">Impressum</a><a href="/datenschutzerklarung" class="footer_link-items-small">Datenschutzerklärung</a><a href="/agb" class="footer_link-items-small">AGB</a></div></div></div><div id="w-node-ef1bd575-bc6f-259d-71a8-03a67159d69e-9f2a534b" class="footer_legal-wrapper"><div class="divider-line"></div><div class="spacer-small"></div></div><div id="w-node-_001fe1f2-a515-d5dd-afaf-0e34c9b60755-9f2a534b" class="spacer-xhuge"></div><div id="w-node-_45d10a09-cd84-0e14-f1fb-3a699f2a536f-9f2a534b" class="footer_legal-links-copyright-wrapper"><div class="footer_link-items-small">© SHORT CUTS GmbH</div></div></div></div></div></section></div>
781<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=683eadad57b97cce30e149fe" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
781<script src="https://cdn.prod.website-files.com/683eadad57b97cce30e149fe/js/webflow.schunk.36b8fb49256177c8.js" type="text/javascript" integrity="sha384-4abIlA5/v7XaW1HMXKBgnUuhnjBYJ/Z9C1OSg4OhmVw9O3QeHJ/qJqFBERCDPv7G" crossorigin="anonymous"></script>
781<script src="https://cdn.prod.website-files.com/683eadad57b97cce30e149fe/js/webflow.schunk.5f662f7ede5cbf2a.js" type="text/javascript" integrity="sha384-ClwEbjE78QFN9+G3WJJpBw/sabIgXUeeeT1mRgVA+PeqzAv1otm/npkCNSywoUAK" crossorigin="anonymous"></script>
781<script src="https://cdn.prod.website-files.com/683eadad57b97cce30e149fe/js/webflow.schunk.9aed7baedf9903d7.js" type="text/javascript" integrity="sha384-zeYjPEoicUo5W4zsJXceUy0p6l8YII85EdYISR9b3ycYAhZhMQGxES0Li2IlF0jd" crossorigin="anonymous"></script>
781<script src="https://cdn.prod.website-files.com/683eadad57b97cce30e149fe/js/webflow.88231d4e.2c7ad608a4d21ddf.js" type="text/javascript" integrity="sha384-M0XQbxFOqmgaH7ib1tq/AvLzmTETCxfnueslyqr8n3zVYJp4EqijrtjuWyAtqb2I" crossorigin="anonymous"></script>
781<script src="https://cdn.prod.website-files.com/gsap/3.15.0/gsap.min.js" type="text/javascript"></script>
781<script src="https://cdn.prod.website-files.com/gsap/3.15.0/ScrollTrigger.min.js" type="text/javascript"></script>
781<!-- ========================================= -->
782<!-- HERO: COLOR PER PROPERTY                  -->
783<!-- ========================================= -->
784<script>
785(function () {
786  const HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
787  const clean = s => (s || "").trim();
788  const isHex = s => HEX.test(clean(s));
789
790  function applyHeroProjectColors(root = document) {
791    const sections = root.querySelectorAll(
792      ".section_hero-content, .section_hero-start"
793    );
794
795    sections.forEach(section => {
796      const headline = section.querySelector(
797        ".hero_headline-content, .hero_headline"
798      );
799
800      const sub = section.querySelector(
801        ".hero_subheadline-content, .hero_subheadline"
802      );
803
804      const colorArea = section.querySelector(
805        ".hero_color-area-content"
806      );
807
808      if (!headline && !sub && !colorArea) return;
809
810      // HEADLINE COLOR
811      const headlineCol = clean(
812        (headline && headline.getAttribute("data-hero-headline-color")) ||
813        section.getAttribute("data-hero-headline-color")
814      );
815
816      if (headline && isHex(headlineCol)) {
817        headline.style.color = headlineCol;
818      }
819
820      // SUBHEADLINE COLOR
821      const subCol = clean(
822        (sub && sub.getAttribute("data-hero-subheadline-color")) ||
823        section.getAttribute("data-hero-subheadline-color")
824      );
825
826      if (sub && isHex(subCol)) {
827        sub.style.color = subCol;
828      }
829
830      // BACKGROUND COLOR
831      const bgCol = clean(
832        (colorArea && colorArea.getAttribute("data-hero-bg-color")) ||
833        section.getAttribute("data-hero-bg-color")
834      );
835
836      if (colorArea && isHex(bgCol)) {
837        colorArea.style.backgroundColor = bgCol;
838      }
839    });
840  }
841
842  document.addEventListener("DOMContentLoaded", applyHeroProjectColors);
843  window.addEventListener("load", applyHeroProjectColors);
844  (window.Webflow = window.Webflow || []).push(applyHeroProjectColors);
845
846  new MutationObserver(() => applyHeroProjectColors())
847    .observe(document.documentElement, {
848      childList: true,
849      subtree: true
850    });
851})();
852</script>
852
853
854<!-- ========================================= -->
855<!-- NAV COLOR: data-navcolor + SCROLL STATE   -->
856<!-- ========================================= -->
857<script>
858document.addEventListener("DOMContentLoaded", function () {
859  const nav = document.querySelector(".nav_wrapper");
860  const menu = document.querySelector(".nav_menu-wrapper-1");
861
862  if (!nav) return;
863
864  const HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
865  const clean = s => (s || "").trim();
866
867  function pickNavColor() {
868    const source = document.querySelector('[data-navcolor-source="headline"]');
869
870    if (source) {
871      const c = getComputedStyle(source).color;
872      if (c) return c;
873    }
874
875    const col = clean(nav.getAttribute("data-navcolor"));
876    if (HEX.test(col)) return col;
877
878    return null;
879  }
880
881  function updateScrolledState() {
882    nav.classList.toggle("is-scrolled", window.scrollY > 10);
883  }
884
885  function updateOpenState() {
886    const isOpen = menu && menu.classList.contains("w--open");
887    nav.classList.toggle("is-open", isOpen);
888  }
889
890  const chosen = pickNavColor();
891  if (chosen) {
892    nav.style.setProperty("--navcolor-base", chosen);
893  }
894
895  updateScrolledState();
896  updateOpenState();
897
898  window.addEventListener("scroll", updateScrolledState, { passive: true });
899  window.addEventListener("resize", updateScrolledState);
900
901  if (menu) {
902    new MutationObserver(updateOpenState).observe(menu, {
903      attributes: true,
904      attributeFilter: ["class"]
905    });
906  }
907});
908</script>
908
909
910<!-- ========================================= -->
911<!-- PROJECT TEASER CLICK                      -->
912<!-- ========================================= -->
913<script>
914(function () {
915  function initProjectTeasers(root=document) {
916    root.querySelectorAll('.project-teaser_wrapper').forEach(wrapper => {
917      const src = wrapper.querySelector('.project-teaser_link-source');
918      if (!src) return;
919
920      const url = src.getAttribute('data-url');
921      if (!url) return;
922
923      if (wrapper.dataset.clickBound === '1') return;
924      wrapper.dataset.clickBound = '1';
925
926      wrapper.addEventListener('click', () => {
927        window.location.href = url;
928      });
929    });
930  }
931
932  document.addEventListener('DOMContentLoaded', initProjectTeasers);
933  window.addEventListener('load', initProjectTeasers);
934  (window.Webflow = window.Webflow || []).push(initProjectTeasers);
935
936  new MutationObserver(()=>initProjectTeasers())
937    .observe(document.documentElement, { childList:true, subtree:true });
938})();
939</script>
939
940
941<script>
942document.addEventListener("DOMContentLoaded", function () {
943  // Nur mit echter Maus initialisieren – gleiche Erkennung wie im
944  // Injection-Script. Die Breiten-Begrenzung (< 992px) übernimmt das
945  // CSS per display:none, dadurch funktioniert auch Fenster-Resize.
946  if (!window.matchMedia('(hover: hover) and (pointer: fine)').matches) return;
947  const circle = document.querySelector(".cursor-circle");
948  const arrow = document.querySelector(".cursor-arrow");
949  const slider = document.querySelector(".slider_images");
950  if (!circle || !arrow) return;
951  let moved = false;
952  let inSlider = false;
953  let hideForButton = false;
954  function hide() {
955    circle.style.opacity = 0;
956    arrow.style.opacity = 0;
957  }
958  function show() {
959    if (moved && !inSlider && !hideForButton) {
960      circle.style.opacity = 1;
961      arrow.style.opacity = 0;
962    }
963  }
964  document.addEventListener("mousemove", function (e) {
965    const x = e.clientX;
966    const y = e.clientY;
967    if (x <= 0 || y <= 0 || x >= window.innerWidth || y >= window.innerHeight) {
968      hide();
969      return;
970    }
971    moved = true;
972    circle.style.left = arrow.style.left = x + "px";
973    circle.style.top = arrow.style.top = y + "px";
974    if (inSlider) {
975      circle.style.opacity = 0;
976      arrow.style.opacity = 1;
977      arrow.style.transform =
978        "translate(-50%, -50%) rotate(" + (x < window.innerWidth / 2 ? 180 : 0) + "deg)";
979    } else {
980      arrow.style.opacity = 0;
981      circle.style.opacity = hideForButton ? 0 : 1;
982    }
983  });
984  document.addEventListener("mouseleave", hide);
985  document.addEventListener("mouseout", e => {
986    if (!e.relatedTarget) hide();
987  });
988  document.addEventListener("mouseenter", show);
989  window.addEventListener("blur", hide);
990  document.addEventListener("visibilitychange", () => {
991    if (document.hidden) hide();
992  });
993  if (slider) {
994    slider.addEventListener("mouseenter", () => inSlider = true);
995    slider.addEventListener("mouseleave", () => {
996      inSlider = false;
997      arrow.style.opacity = 0;
998      show();
999    });
1000  }
1001  document.querySelectorAll("[data-cursor]").forEach(el => {
1002    el.addEventListener("mouseenter", () => {
1003      circle.classList.remove("is-link", "is-select");
1004      circle.classList.add("is-button");
1005      circle.setAttribute("data-label", el.getAttribute("data-cursor") || "");
1006      circle.style.opacity = 1;
1007      arrow.style.opacity = 0;
1008      hideForButton = false;
1009    });
1010    el.addEventListener("mouseleave", () => {
1011      circle.classList.remove("is-button");
1012      circle.removeAttribute("data-label");
1013      show();
1014    });
1015  });
1016  document.querySelectorAll("a, .nav_burger, .text-link_wrapper").forEach(el => {
1017    el.addEventListener("mouseenter", () => {
1018      if (!circle.classList.contains("is-button") && !circle.classList.contains("is-select") && !hideForButton) {
1019        circle.classList.add("is-link");
1020      }
1021    });
1022    el.addEventListener("mouseleave", () => {
1023      circle.classList.remove("is-link");
1024    });
1025  });
1026  document.querySelectorAll(".button").forEach(el => {
1027    el.addEventListener("mouseenter", () => {
1028      if (!circle.classList.contains("is-button")) {
1029        hideForButton = true;
1030        circle.style.opacity = 0;
1031      }
1032    });
1033    el.addEventListener("mouseleave", () => {
1034      hideForButton = false;
1035      show();
1036    });
1037  });
1038  document.addEventListener("selectionchange", () => {
1039    const sel = window.getSelection();
1040    const active =
1041      sel &&
1042      sel.rangeCount > 0 &&
1043      !sel.isCollapsed &&
1044      sel.toString().trim().length > 0;
1045    circle.classList.toggle("is-select", active);
1046    if (active) {
1047      circle.classList.remove("is-link", "is-button");
1048      circle.removeAttribute("data-label");
1049    }
1050  });
1051});
1052</script>
1052
1053
1054<!-- ========================================= -->
1055<!-- NAV HOVER / SCROLL LOCK + BURGER ANIMATION -->
1056<!-- ========================================= -->
1057<script>
1058document.addEventListener("DOMContentLoaded", function () {
1059  window.Webflow = window.Webflow || [];
1060
1061  window.Webflow.push(function () {
1062    const burger = document.querySelector(".nav_burger");
1063    const menu   = document.querySelector(".nav_menu-wrapper-1");
1064    const nav    = document.querySelector(".nav_wrapper");
1065    const html   = document.documentElement;
1066    const body   = document.body;
1067    const btn    = document.querySelector(".button.is-pill.is-nav");
1068
1069    if (!burger || !menu || !nav) return;
1070
1071    /* Zentral justieren */
1072    burger.style.setProperty("--burger-top-y", "0.6rem");
1073    burger.style.setProperty("--burger-bottom-y", "-0.6rem");
1074
1075    const isDesktop = () => window.innerWidth >= 992;
1076
1077    let isOpen = menu.classList.contains("w--open") || burger.classList.contains("w--open");
1078    let hoverTimeout = null;
1079    let programmatic = false;
1080
1081    function getScrollbarWidth() {
1082      return window.innerWidth - document.documentElement.clientWidth;
1083    }
1084
1085    function setScrollLock(open) {
1086      const scrollbarWidth = getScrollbarWidth();
1087
1088      if (open) {
1089        html.classList.add("no-scroll");
1090        body.classList.add("no-scroll");
1091
1092        if (scrollbarWidth > 0) {
1093          body.style.paddingRight = scrollbarWidth + "px";
1094          nav.style.paddingRight = scrollbarWidth + "px";
1095        }
1096      } else {
1097        html.classList.remove("no-scroll");
1098        body.classList.remove("no-scroll");
1099
1100        body.style.removeProperty("padding-right");
1101        nav.style.removeProperty("padding-right");
1102      }
1103    }
1104
1105    function setBurgerState(open) {
1106      burger.classList.toggle("is-menu-open", open);
1107    }
1108
1109    function setNavOpenState(open) {
1110      isOpen = open;
1111
1112      nav.classList.toggle("is-open", open);
1113      setBurgerState(open);
1114      setScrollLock(open);
1115
1116      if (btn) {
1117        if (!isDesktop() && open && !btn.matches(":hover")) {
1118          btn.style.setProperty("color", "#000000", "important");
1119          btn.style.setProperty("border-color", "#000000", "important");
1120        } else {
1121          btn.style.removeProperty("color");
1122          btn.style.removeProperty("border-color");
1123        }
1124      }
1125    }
1126
1127    function readOpenStateFromWebflow() {
1128      return (
1129        menu.classList.contains("w--open") ||
1130        burger.classList.contains("w--open")
1131      );
1132    }
1133
1134    function syncStateFromDom() {
1135      setNavOpenState(readOpenStateFromWebflow());
1136    }
1137
1138    function openMenu() {
1139      if (!isDesktop() || isOpen) return;
1140
1141      programmatic = true;
1142      burger.click();
1143
1144      setNavOpenState(true);
1145      setTimeout(syncStateFromDom, 0);
1146    }
1147
1148    function closeMenu() {
1149      if (!isDesktop() || !isOpen) return;
1150
1151      programmatic = true;
1152      burger.click();
1153
1154      setNavOpenState(false);
1155      setTimeout(syncStateFromDom, 0);
1156    }
1157
1158    burger.addEventListener("mouseenter", function () {
1159      if (!isDesktop()) return;
1160
1161      clearTimeout(hoverTimeout);
1162      openMenu();
1163    });
1164
1165    nav.addEventListener("mouseleave", function () {
1166      if (!isDesktop()) return;
1167
1168      clearTimeout(hoverTimeout);
1169      hoverTimeout = setTimeout(closeMenu, 150);
1170    });
1171
1172    burger.addEventListener("click", function () {
1173      if (programmatic) {
1174        programmatic = false;
1175        return;
1176      }
1177
1178      setTimeout(syncStateFromDom, 0);
1179    });
1180
1181    if (btn) {
1182      btn.addEventListener("mouseenter", function () {
1183        btn.style.removeProperty("color");
1184        btn.style.removeProperty("border-color");
1185      });
1186
1187      btn.addEventListener("mouseleave", function () {
1188        if (!isDesktop() && isOpen) {
1189          btn.style.setProperty("color", "#000000", "important");
1190          btn.style.setProperty("border-color", "#000000", "important");
1191        }
1192      });
1193    }
1194
1195    new MutationObserver(syncStateFromDom).observe(menu, {
1196      attributes: true,
1197      attributeFilter: ["class"]
1198    });
1199
1200    new MutationObserver(syncStateFromDom).observe(burger, {
1201      attributes: true,
1202      attributeFilter: ["class"]
1203    });
1204
1205    window.addEventListener("resize", syncStateFromDom);
1206
1207    syncStateFromDom();
1208  });
1209});
1210</script>
1210
1211
1212<!-- ========================================= -->
1213<!-- SECTION BACKGROUND COLOR CHANGE           -->
1214<!-- ========================================= -->
1215<script>
1216document.addEventListener("DOMContentLoaded", function () {
1217  const sections = document.querySelectorAll(".is-background-color-change");
1218  if (!sections.length) return;
1219
1220  const defaultBgMap = new WeakMap();
1221
1222  sections.forEach(function (section) {
1223    const cs = window.getComputedStyle(section);
1224    defaultBgMap.set(section, cs.backgroundColor);
1225  });
1226
1227  const observer = new IntersectionObserver(function (entries) {
1228    entries.forEach(function (entry) {
1229      const el = entry.target;
1230      const color = el.getAttribute("data-bg");
1231
1232      if (!color) return;
1233
1234      const section = el.classList.contains("is-background-color-change")
1235        ? el
1236        : el.closest(".is-background-color-change");
1237
1238      if (!section) return;
1239
1240      if (entry.isIntersecting) {
1241        section.style.backgroundColor = color;
1242      } else {
1243        section.style.backgroundColor = defaultBgMap.get(section) || "";
1244      }
1245    });
1246  }, {
1247    threshold: 0.3
1248  });
1249
1250  sections.forEach(function (section) {
1251    if (section.hasAttribute("data-bg")) {
1252      observer.observe(section);
1253    }
1254
1255    section.querySelectorAll("[data-bg]").forEach(function (el) {
1256      observer.observe(el);
1257    });
1258  });
1259});
1260</script>
1260
1261
1262<!-- ========================================= -->
1263<!-- PAGE TRANSITIONS – weiches Ein-/Ausblenden, nur Live -->
1264<!-- ========================================= -->
1265<script>
1266(function () {
1267  const DURATION = 200;
1268  const html = document.documentElement;
1269
1270  function isEditorLike() {
1271    try {
1272      if (!window.Webflow || !Webflow.env) return false;
1273      return (
1274        Webflow.env("design") ||
1275        Webflow.env("preview") ||
1276        Webflow.env("editor")
1277      );
1278    } catch (e) {
1279      return false;
1280    }
1281  }
1282
1283  function getWrapper() {
1284    return document.querySelector(".page-wrapper");
1285  }
1286
1287  function enterPage() {
1288    const wrapper = getWrapper();
1289    if (!wrapper) return;
1290
1291    html.classList.remove("is-page-exiting");
1292    html.classList.add("has-page-transition");
1293
1294    requestAnimationFrame(function () {
1295      wrapper.classList.add("is-page-entered");
1296    });
1297  }
1298
1299  function resetPageTransition() {
1300    const wrapper = getWrapper();
1301    html.classList.remove("is-page-exiting");
1302    if (wrapper) wrapper.classList.add("is-page-entered");
1303  }
1304
1305  document.addEventListener("DOMContentLoaded", function () {
1306    if (isEditorLike()) return;
1307    enterPage();
1308  });
1309
1310  window.addEventListener("load", function () {
1311    if (isEditorLike()) return;
1312    resetPageTransition();
1313  });
1314
1315  window.addEventListener("pageshow", function () {
1316    if (isEditorLike()) return;
1317    resetPageTransition();
1318  });
1319
1320  document.addEventListener("click", function (e) {
1321    if (isEditorLike()) return;
1322
1323    const link = e.target.closest("a");
1324    if (!link) return;
1325
1326    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
1327
1328    const href = link.getAttribute("href");
1329    if (!href) return;
1330
1331    if (link.target === "_blank") return;
1332    if (href.charAt(0) === "#") return;
1333    if (/^(mailto:|tel:|javascript:)/.test(href)) return;
1334    if (link.hasAttribute("data-no-transition")) return;
1335
1336    const url = new URL(href, window.location.origin);
1337    if (url.origin !== window.location.origin) return;
1338
1339    const wrapper = getWrapper();
1340    if (!wrapper) return;
1341
1342    e.preventDefault();
1343
1344    html.classList.add("has-page-transition", "is-page-exiting");
1345    wrapper.classList.remove("is-page-entered");
1346
1347    setTimeout(function () {
1348      window.location.href = url.href;
1349    }, DURATION);
1350  });
1351})();
1352</script>
1352
1353  
1354  
1355<!-- ========================================= -->
1356<!-- VERTICAL ACCORDION                        -->
1357<!-- ========================================= -->
1358<script>
1359(function () {
1360
1361  function initVerticalAccordion() {
1362
1363    // Mehrfaches Initialisieren verhindern
1364    if (window.__scTabsAccordionBound) return;
1365    window.__scTabsAccordionBound = true;
1366
1367    $(document).on("click", ".tabs_link", function (e) {
1368      e.preventDefault();
1369
1370      const $component = $(this).closest(".tabs");
1371
1372      // Nur innerhalb dieser Tabs-Komponente schließen
1373      $component.find(".tabs_link, .tabs_content").removeClass("active");
1374
1375      // Gewählten Tab öffnen
1376      $(this).addClass("active");
1377      $(this).next(".tabs_content").addClass("active");
1378    });
1379
1380  }
1381
1382  // Initialisierung
1383  $(initVerticalAccordion);
1384
1385  // Webflow-Reinitialisierung
1386  window.Webflow = window.Webflow || [];
1387  window.Webflow.push(initVerticalAccordion);
1388
1389})();
1390</script>
1390
1391
1392<!-- ========================================= -->
1393<!-- MUX BACKGROUND VIDEOS – SAFARI CMS FIX    -->
1394<!-- ========================================= -->
1395
1396<script>
1397document.addEventListener("DOMContentLoaded", function () {
1398
1399  function getPlaybackId(value) {
1400    const raw = (value || "").trim();
1401    if (!raw) return "";
1402
1403    try {
1404      const url = new URL(raw);
1405      if (url.hostname.includes("player.mux.com")) {
1406        return url.pathname.replace("/", "").trim();
1407      }
1408    } catch (e) {}
1409
1410    return raw;
1411  }
1412
1413  function createMuxVideo(el) {
1414    if (el.dataset.muxInitialized === "1") return;
1415
1416    const playbackId = getPlaybackId(el.getAttribute("data-mux-url"));
1417    if (!playbackId) return;
1418
1419    el.dataset.muxInitialized = "1";
1420
1421    el.style.position = "relative";
1422    el.style.overflow = "hidden";
1423    el.style.backgroundImage = `url("https://image.mux.com/${playbackId}/thumbnail.jpg?time=1")`;
1424    el.style.backgroundSize = "cover";
1425    el.style.backgroundPosition = "center center";
1426    el.style.backgroundRepeat = "no-repeat";
1427    el.style.backgroundColor = "#e9ece9";
1428
1429    const mux = document.createElement("mux-video");
1430
1431    mux.setAttribute("playback-id", playbackId);
1432    mux.setAttribute("poster", `https://image.mux.com/${playbackId}/thumbnail.jpg?time=1`);
1433    mux.setAttribute("autoplay", "");
1434    mux.setAttribute("muted", "");
1435    mux.setAttribute("loop", "");
1436    mux.setAttribute("playsinline", "");
1437    mux.setAttribute("webkit-playsinline", "");
1438    mux.setAttribute("preload", "metadata");
1439
1440    mux.muted = true;
1441    mux.defaultMuted = true;
1442    mux.autoplay = true;
1443    mux.loop = true;
1444    mux.playsInline = true;
1445
1446    mux.style.position = "absolute";
1447    mux.style.inset = "0";
1448    mux.style.width = "100%";
1449    mux.style.height = "100%";
1450    mux.style.display = "block";
1451    mux.style.objectFit = "cover";
1452    mux.style.objectPosition = "center center";
1453    mux.style.setProperty("--media-object-fit", "cover");
1454    mux.style.setProperty("--media-object-position", "center center");
1455
1456    el.appendChild(mux);
1457
1458    function tryPlay() {
1459      const playPromise = mux.play && mux.play();
1460      if (playPromise && playPromise.catch) {
1461        playPromise.catch(function () {});
1462      }
1463    }
1464
1465    requestAnimationFrame(tryPlay);
1466    mux.addEventListener("loadedmetadata", tryPlay, { once: true });
1467    mux.addEventListener("canplay", tryPlay, { once: true });
1468  }
1469
1470  function initMuxVideos(root = document) {
1471    const elements = root.querySelectorAll("[data-mux-url]");
1472    elements.forEach(createMuxVideo);
1473  }
1474
1475  const muxReady =
1476    window.customElements && customElements.whenDefined
1477      ? customElements.whenDefined("mux-video").catch(function () {})
1478      : Promise.resolve();
1479
1480  muxReady.then(function () {
1481    initMuxVideos();
1482
1483    window.Webflow = window.Webflow || [];
1484    window.Webflow.push(function () {
1485      initMuxVideos();
1486    });
1487
1488    new MutationObserver(function () {
1489      initMuxVideos();
1490    }).observe(document.documentElement, {
1491      childList: true,
1492      subtree: true
1493    });
1494  });
1495
1496});
1497</script>
1497
1498
1499<!-- ========================================= -->
1500<!-- CUSTOM CURSOR – GREEN STATE               -->
1501<!-- Fügt .is-green hinzu bei data-cursor-green -->
1502<!-- ========================================= -->
1503
1504<script>
1505document.addEventListener("DOMContentLoaded", function () {
1506
1507  const circle = document.querySelector(".cursor-circle");
1508
1509  // Abbrechen, falls Cursor nicht existiert
1510  if (!circle) return;
1511
1512  // Alle Elemente mit data-cursor-green auswählen
1513  document.querySelectorAll("[data-cursor-green]").forEach(function (el) {
1514
1515    // Mouse Enter → grünen Cursor aktivieren
1516    el.addEventListener("mouseenter", function () {
1517      circle.classList.add("is-green");
1518    });
1519
1520    // Mouse Leave → grünen Cursor deaktivieren
1521    el.addEventListener("mouseleave", function () {
1522      circle.classList.remove("is-green");
1523    });
1524
1525  });
1526
1527});
1528</script>
1528</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.