/* Eigenstaendige Produkt-Landingpage /spreadfilm. Alle Regeln bleiben unter
   .sf-spreadfilm, damit keine bestehende Route optisch beeinflusst wird. */
.sf-spreadfilm {
  --sf-salmon: #ff8585;
  --sf-blue: #26cef6;
  --sf-yellow: #f6ff7b;
  --sf-ink: #191b1f;
  --sf-panel: #272727;
  overflow: hidden;
}

.sf-spreadfilm-inpage-nav {
  position: fixed;
  z-index: 10020;
  top: 3.05rem;
  right: clamp(1.5rem, 4.4vw, 4.5rem);
  display: flex;
  align-items: center;
  gap: .15rem;
  padding: .45rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: .85rem;
  background: rgba(255,133,133,.96);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.25);
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: right top;
  transition: top .32s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease, transform .36s cubic-bezier(.2,.75,.2,1);
  backdrop-filter: blur(14px);
}

.sf-spreadfilm-nav-links { display: flex; align-items: center; gap: .15rem; }

.sf-spreadfilm-inpage-nav a,
.sf-spreadfilm-inpage-nav .is-cta {
  position: relative;
  padding: .7rem .8rem;
  border-radius: .55rem;
  color: #fff;
  border: 0;
  background: transparent;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.sf-spreadfilm-inpage-nav a::after {
  content: "";
  position: absolute;
  right: .8rem;
  bottom: .42rem;
  left: .8rem;
  height: 1px;
  background: #fff;
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .2s ease, transform .2s ease;
}

.sf-spreadfilm-inpage-nav a:hover,
.sf-spreadfilm-inpage-nav a:focus-visible,
.sf-spreadfilm-inpage-nav a.is-active { background: rgba(255,255,255,.13); }
.sf-spreadfilm-inpage-nav a.is-active::after { opacity: .85; transform: scaleX(1); }
.sf-spreadfilm-inpage-nav .is-cta { background: #1f1f1f !important; color: #fff !important; }
.sf-spreadfilm-inpage-nav .is-cta:hover { background: #303030 !important; }
.sf-nav-short { display: none; }

.sf-spreadfilm-menu-toggle {
  display: grid !important;
  place-items: center;
  flex: 0 0 2.25rem;
  width: 2.25rem !important;
  height: 2.25rem !important;
  margin-left: .15rem;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: .55rem !important;
  background: rgba(31,31,31,.92) !important;
  color: #fff !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  cursor: pointer;
}
.sf-spreadfilm-menu-toggle:hover,
.sf-spreadfilm-menu-toggle:focus-visible { background: #303030 !important; }

body.sf-spreadfilm-page #site-header .main_menu {
  transition: opacity .26s ease, transform .32s cubic-bezier(.2,.75,.2,1);
}

body.sf-spreadfilm-mainnav-visible .sf-spreadfilm-inpage-nav {
  top: 5.6rem;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body.sf-spreadfilm-mainnav-visible .sf-spreadfilm-nav-links { display: none; }
body.sf-spreadfilm-mainnav-visible .sf-spreadfilm-menu-toggle {
  background: var(--sf-salmon, #ff8585) !important;
  color: #191b1f !important;
}

@media (min-width: 481px) {
  .sf-spreadfilm-inpage-nav { padding-right: .8rem; }
}

@media (min-width: 768px) {
  body.sf-spreadfilm-subnav-visible #site-header .main_menu {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateY(-1rem) scale(.97);
  }
  body.sf-spreadfilm-mainnav-visible #site-header .main_menu {
    opacity: 1 !important;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
}

.sf-spreadfilm h2 {
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.sf-spreadfilm h3 { letter-spacing: -.02em; }
.sf-spreadfilm p { text-wrap: pretty; }
.sf-spreadfilm [id] { scroll-margin-top: 7rem; }

.sf-spreadfilm section.sf-spreadfilm-hero {
  position: relative;
  min-height: min(58rem, 92vh);
  padding: 7rem clamp(1.4rem, 6vw, 6rem) clamp(5rem, 9vw, 8rem);
  background:
    radial-gradient(circle at 78% 42%, rgba(38,206,246,.12), transparent 27rem),
    radial-gradient(circle at 64% 72%, rgba(255,133,133,.13), transparent 25rem),
    #1f1f1f;
}

.sf-spreadfilm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .17;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 72%, transparent);
}

.sf-spreadfilm-hero .sfx-lp-inner { position: relative; z-index: 1; max-width: min(78rem, 1140px); }

.sf-spreadfilm-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(25rem, 1.05fr);
  gap: clamp(3rem, 5vw, 5rem);
  align-items: center;
}

.sf-spreadfilm-hero-copy h1 {
  max-width: 11ch;
  margin: 0 0 1.5rem;
  font-size: clamp(3.2rem, 6.6vw, 6rem);
  font-weight: 300;
  line-height: .96;
  letter-spacing: -.055em;
}

.sf-spreadfilm-hero-lead {
  max-width: 41rem;
  margin: 0 0 1rem;
  color: rgba(255,255,255,.9);
  font-size: clamp(1.12rem, 1.7vw, 1.38rem);
  line-height: 1.55;
}

.sf-spreadfilm-hero-note {
  max-width: 39rem;
  margin: 0;
  color: rgba(255,255,255,.62);
  font-size: 1rem;
  line-height: 1.65;
}

.sf-spreadfilm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 1.6rem;
  align-items: center;
  margin-top: 2rem;
}

.sf-spreadfilm-textlink {
  display: inline-flex;
  gap: .7rem;
  align-items: center;
  color: rgba(255,255,255,.84);
  text-decoration: none;
  font-size: .98rem;
  transition: color .2s ease;
}

.sf-spreadfilm-textlink span { color: var(--sf-salmon); transition: color .2s ease, transform .2s ease; }
.sf-spreadfilm .sf-spreadfilm-textlink:hover,
.sf-spreadfilm .sf-spreadfilm-textlink:focus-visible { color: #fff !important; }
.sf-spreadfilm .sf-spreadfilm-textlink:hover span,
.sf-spreadfilm .sf-spreadfilm-textlink:focus-visible span { color: #fff; transform: translateY(.18rem); }
.sf-spreadfilm .sf-spreadfilm-textlink:focus-visible { outline: 2px solid var(--sf-salmon); outline-offset: .35rem; border-radius: .15rem; }

.sf-spreadfilm-hero-showcase {
  min-width: 0;
  overflow: hidden;
  align-self: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 1.35rem;
  background: #111318;
  box-shadow: 0 2rem 6rem rgba(0,0,0,.38);
}

.sf-spreadfilm-hero-reel {
  --sf-reveal-x: 50%;
  --sf-reveal-y: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  min-height: 25rem;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #111318;
  outline: none;
}

.sf-spreadfilm-hero-reel video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) brightness(.68) contrast(1.04);
  transform: scale(1.015);
  transition: filter .5s ease, transform 1.2s cubic-bezier(.2,.75,.2,1);
}

.sf-spreadfilm-hero-reel-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-color: rgba(15,17,22,.76);
  background-image:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 3rem 3rem;
  -webkit-mask-image: radial-gradient(circle 8rem at var(--sf-reveal-x) var(--sf-reveal-y), transparent 0 22%, rgba(0,0,0,.45) 64%, #000 100%);
  mask-image: radial-gradient(circle 8rem at var(--sf-reveal-x) var(--sf-reveal-y), transparent 0 22%, rgba(0,0,0,.45) 64%, #000 100%);
  transition: background-color .4s ease;
}

.sf-spreadfilm-hero-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8,10,13,.48), transparent 24%, transparent 66%, rgba(8,10,13,.58));
}

.sf-spreadfilm-hero-reel-cursor {
  position: absolute;
  left: var(--sf-reveal-x);
  top: var(--sf-reveal-y);
  z-index: 3;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-50%) scale(.72);
  transition: opacity .2s ease, transform .25s ease;
}

.sf-spreadfilm-hero-reel-cursor::before,
.sf-spreadfilm-hero-reel-cursor::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(255,255,255,.8);
  transform: translate(-50%,-50%);
}

.sf-spreadfilm-hero-reel-cursor::before { width: .8rem; height: 1px; }
.sf-spreadfilm-hero-reel-cursor::after { width: 1px; height: .8rem; }

.sf-spreadfilm-hero-reel-meta {
  position: absolute;
  top: 1rem;
  right: 1rem;
  left: 1rem;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.sf-spreadfilm-hero-reel-label {
  display: inline-flex;
  gap: .55rem;
  align-items: center;
  padding: .55rem .75rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(17,19,24,.7);
  color: #fff;
  font-size: .72rem;
  letter-spacing: .04em;
  backdrop-filter: blur(12px);
}

.sf-spreadfilm-hero-reel-label i {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--sf-salmon);
  box-shadow: 0 0 0 .24rem rgba(255,133,133,.14);
}

.sf-spreadfilm-hero-reel-label small { color: rgba(255,255,255,.58); font-size: inherit; }

.sf-spreadfilm .sf-spreadfilm-hero-sound {
  display: inline-flex !important;
  gap: .5rem;
  align-items: center;
  min-height: 2.45rem !important;
  padding: .55rem .8rem !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  background: rgba(17,19,24,.72) !important;
  color: #fff !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.sf-spreadfilm .sf-spreadfilm-hero-sound svg { width: 1rem; height: 1rem; fill: none; stroke: var(--sf-salmon); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sf-spreadfilm .sf-spreadfilm-hero-sound b { font-weight: 500; }
.sf-spreadfilm .sf-spreadfilm-hero-sound:hover,
.sf-spreadfilm .sf-spreadfilm-hero-sound[aria-pressed="true"] { background: var(--sf-salmon) !important; color: var(--sf-ink) !important; }
.sf-spreadfilm .sf-spreadfilm-hero-sound[aria-pressed="true"] svg { stroke: var(--sf-ink); }
.sf-spreadfilm .sf-spreadfilm-hero-sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.sf-spreadfilm-hero-reel-hint {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: .65rem;
  align-items: center;
  margin: 0;
  color: rgba(255,255,255,.8);
  font-size: .75rem;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.sf-spreadfilm-hero-reel-hint span {
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 50%;
}

.sf-spreadfilm-hero-reel-hint b { font-weight: 400; }
.sf-spreadfilm-hero-reel noscript { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; }
.sf-spreadfilm-hero-reel noscript a { color: #fff; }

.sf-spreadfilm-hero-reel.is-engaged video { filter: saturate(1.04) brightness(.94) contrast(1.02); transform: scale(1); }
.sf-spreadfilm-hero-reel.is-engaged .sf-spreadfilm-hero-reel-scrim {
  background-color: rgba(15,17,22,.6);
  -webkit-mask-image: radial-gradient(circle 15rem at var(--sf-reveal-x) var(--sf-reveal-y), transparent 0 34%, rgba(0,0,0,.34) 68%, #000 100%);
  mask-image: radial-gradient(circle 15rem at var(--sf-reveal-x) var(--sf-reveal-y), transparent 0 34%, rgba(0,0,0,.34) 68%, #000 100%);
}
.sf-spreadfilm-hero-reel.is-engaged .sf-spreadfilm-hero-reel-cursor { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.sf-spreadfilm-hero-reel.is-engaged .sf-spreadfilm-hero-reel-hint { opacity: 0; transform: translateY(.5rem); }
.sf-spreadfilm-hero-reel:focus-visible { box-shadow: inset 0 0 0 3px var(--sf-salmon); }

.sf-spreadfilm-product-lockup {
  position: relative;
  z-index: 6;
  padding: 1rem 1.1rem 0;
  border-top: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg,#20232a,#15171c);
  color: #fff;
}

.sf-spreadfilm-product-name {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .8rem;
  align-items: baseline;
}

.sf-spreadfilm-product-name small {
  grid-column: 1 / -1;
  margin-bottom: .15rem;
  color: var(--sf-salmon);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.sf-spreadfilm-product-name strong { font-size: 1.4rem; font-weight: 500; letter-spacing: -.03em; }
.sf-spreadfilm-product-name span { color: rgba(255,255,255,.58); font-size: .72rem; }

.sf-spreadfilm-product-lockup ol {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin: .9rem -1.1rem 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  list-style: none;
}

.sf-spreadfilm-product-lockup li {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 5.9rem;
  padding: .8rem .75rem;
  border-right: 1px solid rgba(255,255,255,.1);
}

.sf-spreadfilm-product-lockup li:last-child { border-right: 0; }
.sf-spreadfilm-product-lockup li > span { margin-bottom: auto; color: var(--sf-salmon); font-size: .58rem; letter-spacing: .08em; }
.sf-spreadfilm-product-lockup li > strong { margin-top: .7rem; font-size: .82rem; font-weight: 500; }
.sf-spreadfilm-product-lockup li > small { margin-top: .2rem; color: rgba(255,255,255,.5); font-size: .62rem; line-height: 1.35; }

.sf-spreadfilm-console-bar b {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .65rem;
  background: var(--sf-salmon);
  color: var(--sf-ink);
  font-size: .82rem;
}

.sf-spreadfilm section.sf-spreadfilm-manifesto,
.sf-spreadfilm section.sf-spreadfilm-process,
.sf-spreadfilm section.sf-spreadfilm-references,
.sf-spreadfilm section.sf-spreadfilm-team,
.sf-spreadfilm section.sf-spreadfilm-faq,
.sf-spreadfilm section.sf-spreadfilm-rollout,
.sf-spreadfilm section.sf-spreadfilm-studio,
.sf-spreadfilm section.sf-spreadfilm-pricing,
.sf-spreadfilm section.sf-spreadfilm-events {
  padding: clamp(4.8rem, 9vw, 8rem) clamp(1.4rem, 6vw, 6rem);
}

.sf-spreadfilm-manifesto { background: #f3f1ed; color: var(--sf-ink); }
.sf-spreadfilm-manifesto .sfx-lp-hero-eyebrow { color: #c9555f; }
.sf-spreadfilm-manifesto .sfx-lp-hero-eyebrow::before { background: #c9555f; }

.sf-spreadfilm-manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .75fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}

.sf-spreadfilm-manifesto-grid p {
  margin: 0 0 1rem;
  color: rgba(25,27,31,.72);
  font-size: 1.06rem;
  line-height: 1.68;
}

.sf-spreadfilm-pillars {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: clamp(3.5rem, 7vw, 6rem) 0 0;
  padding: 0;
  border-top: 1px solid rgba(25,27,31,.16);
}

.sf-spreadfilm-pillars li {
  min-height: 15rem;
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-right: 1px solid rgba(25,27,31,.16);
}

.sf-spreadfilm-pillars li:not(:first-child) { padding-left: 1.5rem; }
.sf-spreadfilm-pillars li:last-child { border-right: 0; }
.sf-spreadfilm-pillars span { color: #c9555f; font-size: .75rem; }
.sf-spreadfilm-pillars h3 { margin: 3rem 0 .7rem; font-size: 1.35rem; font-weight: 500; }
.sf-spreadfilm-pillars p { margin: 0; color: rgba(25,27,31,.66); font-size: .92rem; line-height: 1.55; }

.sf-spreadfilm section.sf-spreadfilm-kit {
  padding: clamp(4.8rem, 9vw, 8rem) clamp(1.4rem, 6vw, 6rem);
  background: var(--sf-salmon);
  color: var(--sf-ink);
}

.sf-spreadfilm-kit .sfx-lp-hero-eyebrow { color: var(--sf-ink); }
.sf-spreadfilm-kit .sfx-lp-hero-eyebrow::before { background: var(--sf-ink); }
.sf-spreadfilm-kit-grid { display: grid; grid-template-columns: minmax(0,.84fr) minmax(24rem,1.16fr); gap: clamp(3rem,7vw,7rem); align-items: center; }
.sf-spreadfilm-kit-copy > p:not(.sfx-lp-hero-eyebrow) { margin: 1.4rem 0 2.2rem; max-width: 38rem; color: rgba(25,27,31,.74); line-height: 1.68; }
.sf-spreadfilm-kit-copy ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(25,27,31,.18); }
.sf-spreadfilm-kit-copy li { display: grid; grid-template-columns: minmax(8rem,.6fr) 1fr; gap: 1.2rem; padding: 1rem 0; border-bottom: 1px solid rgba(25,27,31,.18); }
.sf-spreadfilm-kit-copy li strong { font-size: .92rem; }
.sf-spreadfilm-kit-copy li span { color: rgba(25,27,31,.68); font-size: .88rem; line-height: 1.5; }

.sf-spreadfilm-kit-board {
  padding: clamp(1.5rem,3vw,2.5rem);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 1.2rem;
  background: #202226;
  color: #fff;
  box-shadow: 0 2rem 5rem rgba(101,42,47,.28);
  transform: rotate(1.2deg);
}

.sf-spreadfilm-board-top { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.48); font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; }
.sf-spreadfilm-board-message { padding: 2.2rem 0; }
.sf-spreadfilm-board-message small,
.sf-spreadfilm-board-grid small { display: block; margin-bottom: .55rem; color: var(--sf-salmon); font-size: .67rem; text-transform: uppercase; letter-spacing: .1em; }
.sf-spreadfilm-board-message strong { display: block; max-width: 15ch; font-size: clamp(1.8rem,3.5vw,3rem); font-weight: 400; line-height: 1.06; letter-spacing: -.04em; }
.sf-spreadfilm-board-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: .7rem; background: rgba(255,255,255,.1); }
.sf-spreadfilm-board-grid > div { min-height: 7rem; padding: 1rem; background: #202226; }
.sf-spreadfilm-board-grid b { display: block; font-size: .84rem; font-weight: 450; line-height: 1.45; }
.sf-spreadfilm-board-line { display: flex; gap: .6rem; align-items: center; margin-top: 1.5rem; }
.sf-spreadfilm-board-line span { flex: 1; height: 2px; background: linear-gradient(90deg,var(--sf-salmon),var(--sf-blue)); }
.sf-spreadfilm-board-line i { width: .45rem; height: .45rem; border-radius: 50%; background: rgba(255,255,255,.3); }
.sf-spreadfilm-kit-board > p { margin: .8rem 0 0; color: rgba(255,255,255,.5); font-size: .75rem; }

.sf-spreadfilm-process { background: #1f1f1f; }
.sf-spreadfilm-section-head { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(18rem,.72fr); gap: clamp(2rem,7vw,7rem); align-items: start; }
.sf-spreadfilm-section-head > p { margin: .3rem 0 0; color: rgba(255,255,255,.66); font-size: 1rem; line-height: 1.65; }
.sf-spreadfilm-process .sfx-lp-process-list { max-width: none; margin-top: 4rem; display: grid; grid-template-columns: repeat(2,1fr); column-gap: 3.5rem; }
.sf-spreadfilm-process .sfx-lp-process-step { min-height: 9.5rem; }

.sf-spreadfilm-studio { background: #f3f1ed; color: var(--sf-ink); }
.sf-spreadfilm-studio .sfx-lp-hero-eyebrow { color: #c9555f; }
.sf-spreadfilm-studio .sfx-lp-hero-eyebrow::before { background: #c9555f; }
.sf-spreadfilm-studio .sf-spreadfilm-section-head > p { color: rgba(25,27,31,.66); }
.sf-spreadfilm-studio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
  margin-top: 3.5rem;
}
.sf-spreadfilm-studio-grid figure {
  position: relative;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  border-radius: 1rem;
  background: #181a1f;
}
.sf-spreadfilm-studio-grid figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.78) contrast(1.04);
  transition: transform .65s cubic-bezier(.2,.75,.2,1), filter .4s ease;
}
.sf-spreadfilm-studio-grid figure:hover img { transform: scale(1.025); filter: saturate(1); }
.sf-spreadfilm-studio-grid figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 2.8rem 1rem 1rem;
  background: linear-gradient(transparent, rgba(11,12,15,.9));
  color: #fff;
  font-size: .82rem;
}
.sf-spreadfilm-studio-grid figure { aspect-ratio: 4/3; }

.sf-spreadfilm section.sf-spreadfilm-agent {
  padding: clamp(4.8rem, 9vw, 8rem) clamp(1.4rem, 6vw, 6rem);
  background: #111318;
}

.sf-spreadfilm-agent-grid { display: grid; grid-template-columns: minmax(23rem,1fr) minmax(0,.9fr); gap: clamp(3rem,8vw,8rem); align-items: center; }
.sf-spreadfilm-agent-console { padding: 1.2rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1.15rem; background: linear-gradient(145deg,#252831,#17191f); box-shadow: 0 2rem 6rem rgba(0,0,0,.34); }
.sf-spreadfilm-console-bar { display: grid; grid-template-columns: 2.25rem 1fr auto; gap: .8rem; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.09); }
.sf-spreadfilm-console-bar span { font-size: .9rem; font-weight: 500; }
.sf-spreadfilm-console-bar i { padding: .35rem .55rem; border-radius: 999px; background: rgba(255,133,133,.12); color: var(--sf-salmon); font-size: .68rem; font-style: normal; }
.sf-spreadfilm-agent-brief { padding: clamp(1.6rem,4vw,2.8rem) 0 1.4rem; }
.sf-spreadfilm-agent-brief small { display: block; margin-bottom: .7rem; color: var(--sf-salmon); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; }
.sf-spreadfilm-agent-brief strong { display: block; max-width: 19ch; font-size: clamp(1.6rem,3vw,2.45rem); font-weight: 400; line-height: 1.08; letter-spacing: -.035em; }
.sf-spreadfilm-agent-channels { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; }
.sf-spreadfilm-agent-channels span { padding: .85rem .7rem; border: 1px solid rgba(255,255,255,.1); border-radius: .55rem; background: rgba(255,255,255,.04); color: rgba(255,255,255,.72); font-size: .74rem; text-align: center; }
.sf-spreadfilm-agent-access { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 1rem; padding: 1rem; border-radius: .65rem; background: var(--sf-salmon); color: var(--sf-ink); font-size: .84rem; }
.sf-spreadfilm-agent-access b { font-size: 1.2rem; font-weight: 400; }
.sf-spreadfilm-agent-copy > p:not(.sfx-lp-hero-eyebrow) { margin: 1.4rem 0 0; color: rgba(255,255,255,.7); font-size: 1rem; line-height: 1.68; }
.sf-spreadfilm-agent-uses { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2rem; }
.sf-spreadfilm-agent-uses span { padding: .48rem .75rem; border: 1px solid rgba(38,206,246,.22); border-radius: 999px; background: rgba(38,206,246,.07); color: rgba(255,255,255,.82); font-size: .76rem; }
.sf-spreadfilm-agent-copy .sf-spreadfilm-agent-fine { font-size: .75rem !important; color: rgba(255,255,255,.42) !important; }

.sf-spreadfilm-references { background: #1f1f1f; }
.sf-spreadfilm-reference-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 1.15rem; margin-top: 3.5rem; }
.sf-spreadfilm-reference-grid .sfx-lp-example { grid-column: span 2; aspect-ratio: 4/3; }
.sf-spreadfilm-reference-grid .sfx-lp-example:nth-child(1),
.sf-spreadfilm-reference-grid .sfx-lp-example:nth-child(2) { grid-column: span 3; aspect-ratio: 16/9; }
.sf-spreadfilm-reference-grid .sfx-lp-example-label { display: flex; flex-direction: column; gap: .2rem; padding: 2rem 1rem 1rem; }
.sf-spreadfilm-reference-grid .sfx-lp-example-cat { color: var(--sf-salmon); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; }
.sf-spreadfilm-reference-grid .sfx-lp-example-title { color: #fff; font-size: .96rem; }

.sf-spreadfilm-rollout { background: #f3f1ed; color: var(--sf-ink); }
.sf-spreadfilm-rollout .sfx-lp-hero-eyebrow { color: #c9555f; }
.sf-spreadfilm-rollout .sfx-lp-hero-eyebrow::before { background: #c9555f; }
.sf-spreadfilm-rollout .sf-spreadfilm-section-head > p { color: rgba(25,27,31,.66); }
.sf-spreadfilm-rollout-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 3.5rem; border: 1px solid rgba(25,27,31,.14); background: rgba(25,27,31,.14); }
.sf-spreadfilm-rollout-grid article { min-height: 18rem; padding: 1.5rem; background: #f3f1ed; }
.sf-spreadfilm-rollout-grid span { color: #c9555f; font-size: .72rem; }
.sf-spreadfilm-rollout-grid h3 { margin: 4rem 0 .7rem; font-size: 1.35rem; font-weight: 500; }
.sf-spreadfilm-rollout-grid p { margin: 0; color: rgba(25,27,31,.64); font-size: .9rem; line-height: 1.55; }

.sf-spreadfilm-pricing { background: var(--sf-salmon); color: var(--sf-ink); }
.sf-spreadfilm-pricing .sfx-lp-hero-eyebrow { color: var(--sf-ink); }
.sf-spreadfilm-pricing .sfx-lp-hero-eyebrow::before { background: var(--sf-ink); }
.sf-spreadfilm-pricing .sf-spreadfilm-section-head > p { color: rgba(25,27,31,.72); }
.sf-spreadfilm-price-card {
  display: grid;
  grid-template-columns: minmax(18rem,.72fr) minmax(0,1.28fr);
  margin-top: 3.5rem;
  overflow: hidden;
  border: 1px solid rgba(25,27,31,.25);
  border-radius: 1.15rem;
  background: #202226;
  color: #fff;
  box-shadow: 0 2rem 5rem rgba(91,31,37,.16);
}
.sf-spreadfilm-price-card small,
.sf-spreadfilm-briefing-route small { color: var(--sf-salmon); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.sf-spreadfilm-price-lockup { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(1.8rem,4vw,3.3rem); border-right: 1px solid rgba(255,255,255,.11); background: #181a1f; }
.sf-spreadfilm-price-lockup > strong { display: block; margin: clamp(2.8rem,6vw,5.2rem) 0 .65rem; font-size: clamp(3.4rem,6vw,5.6rem); font-weight: 300; line-height: .9; letter-spacing: -.065em; white-space: nowrap; }
.sf-spreadfilm-price-lockup > span { color: rgba(255,255,255,.5); font-size: .78rem; }
.sf-spreadfilm-price-lockup p { max-width: 27rem; margin: 1.8rem 0 2.4rem; color: rgba(255,255,255,.66); font-size: .92rem; line-height: 1.65; }
.sf-spreadfilm-price-lockup .sfx-lp-cta { margin-top: auto; }
.sf-spreadfilm-price-included { min-width: 0; padding: clamp(1.8rem,4vw,3.3rem); }
.sf-spreadfilm-price-included h3 { max-width: 18ch; margin: .8rem 0 2.5rem; font-size: clamp(1.8rem,3.2vw,2.8rem); font-weight: 400; line-height: 1.08; }
.sf-spreadfilm-price-included ul { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }
.sf-spreadfilm-price-included li { display: grid; grid-template-columns: 1.8rem 1fr; gap: .55rem; min-width: 0; padding: .95rem 0; border-top: 1px solid rgba(255,255,255,.11); }
.sf-spreadfilm-price-included li span { color: var(--sf-salmon); font-size: .65rem; }
.sf-spreadfilm-price-included li b { color: rgba(255,255,255,.82); font-size: .82rem; font-weight: 400; line-height: 1.4; }
.sf-spreadfilm-price-extra { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(15rem,.72fr) minmax(0,1.28fr); gap: 2rem; align-items: start; padding: 1.35rem clamp(1.8rem,4vw,3.3rem); border-top: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.035); }
.sf-spreadfilm-price-extra strong { font-size: .84rem; font-weight: 500; }
.sf-spreadfilm-price-extra span { color: rgba(255,255,255,.52); font-size: .78rem; line-height: 1.55; }

.sf-spreadfilm-briefing-route {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(24rem,1fr) minmax(15rem,.7fr);
  gap: clamp(1.5rem,4vw,4rem);
  align-items: center;
  margin-top: 1.2rem;
  padding: clamp(1.5rem,3vw,2.4rem);
  border: 1px solid rgba(25,27,31,.22);
  border-radius: 1rem;
  background: rgba(255,255,255,.17);
}
.sf-spreadfilm-briefing-route small { color: rgba(25,27,31,.58); }
.sf-spreadfilm-briefing-route h3 { max-width: 24ch; margin: .7rem 0 0; font-size: clamp(1.4rem,2.3vw,2rem); font-weight: 400; line-height: 1.12; }
.sf-spreadfilm-briefing-route ol { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(25,27,31,.22); }
.sf-spreadfilm-briefing-route li { min-width: 0; padding: .9rem .65rem 0; border-left: 1px solid rgba(25,27,31,.18); }
.sf-spreadfilm-briefing-route li:first-child { padding-left: 0; border-left: 0; }
.sf-spreadfilm-briefing-route li span { display: block; margin-bottom: .85rem; color: rgba(25,27,31,.46); font-size: .65rem; }
.sf-spreadfilm-briefing-route li b { font-size: .75rem; font-weight: 500; line-height: 1.35; }
.sf-spreadfilm-briefing-route > p { margin: 0; padding-left: 1.3rem; border-left: 1px solid rgba(25,27,31,.2); color: rgba(25,27,31,.67); font-size: .82rem; line-height: 1.55; }
.sf-spreadfilm-briefing-route > p strong { display: block; margin-bottom: .35rem; color: var(--sf-ink); font-weight: 500; }

/* Eigenes, dreistufiges Spreadfilm-Briefing. Es nutzt weiterhin das zentrale
   Kontakt-API und dessen Tracking, bleibt optisch und funktional aber nur auf
   dieser Produktseite aktiv. */
.sf-spreadfilm-briefing .sf-spreadfilm-briefing-panel {
  width: min(74rem,100%);
  max-height: min(94vh,58rem);
  padding: 0;
  overflow: hidden;
  background: linear-gradient(145deg,#27292f 0%,#17191e 68%);
}
.sf-briefing-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .8rem;
  align-items: center;
  padding: 1.2rem max(4rem,clamp(1.5rem,4vw,3rem)) 0 clamp(1.5rem,4vw,3rem);
  color: rgba(255,255,255,.5);
  font-size: .7rem;
  letter-spacing: .12em;
}
.sf-briefing-progress i { height: 2px; overflow: hidden; background: rgba(255,255,255,.12); }
.sf-briefing-progress b { display: block; width: 33.333%; height: 100%; background: #ff8585; transition: width .3s ease; }
.sf-briefing-form { display: block; }
.sf-briefing-form[hidden] { display: none; }
.sf-briefing-step,
.sf-briefing-success {
  max-height: calc(min(94vh,58rem) - 3rem);
  overflow-y: auto;
  padding: clamp(1.5rem,4vw,3rem);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
.sf-briefing-step[hidden],
.sf-briefing-success[hidden] { display: none; }
.sf-briefing-step h2,
.sf-briefing-success h2 { max-width: 26ch; margin-bottom: .65rem; font-size: clamp(1.8rem,3.2vw,3.05rem); font-weight: 400; line-height: 1.06; letter-spacing: -.035em; }
.sf-briefing-step .sfx-req-lead { max-width: 52rem; }
.sf-briefing-examples { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; margin-top: 1.5rem; }
.sf-briefing-example {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .8rem;
  background: rgba(255,255,255,.035);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.sf-briefing-example:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.25); }
.sf-briefing-example.is-selected { border-color: #ff8585; background: rgba(255,133,133,.09); }
.sf-briefing-example-choice {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  text-align: left;
  white-space: normal !important;
  cursor: pointer;
}
.sf-briefing-example-choice img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: saturate(.82) brightness(.78); }
.sf-briefing-example-copy { display: block; min-height: 5.7rem; padding: .85rem .9rem 2rem; }
.sf-briefing-example-copy small { display: block; margin-bottom: .4rem; color: #ff8585; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.sf-briefing-example-copy strong { display: block; overflow-wrap: anywhere; font-size: .78rem; font-weight: 500; line-height: 1.35; white-space: normal; }
.sf-briefing-example-check {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  background: rgba(20,20,20,.7);
  color: transparent;
  font-size: .75rem;
  backdrop-filter: blur(8px);
}
.sf-briefing-example.is-selected .sf-briefing-example-check { border-color: #ff8585; background: #ff8585; color: #191b1f; }
.sf-briefing-example-play {
  position: absolute !important;
  right: .7rem;
  bottom: .7rem;
  display: inline-flex !important;
  gap: .35rem;
  align-items: center;
  padding: .35rem .5rem !important;
  border: 0 !important;
  border-radius: .35rem !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.68) !important;
  font-size: .62rem !important;
  cursor: pointer;
}
.sf-briefing-example-play:hover { background: rgba(255,255,255,.16) !important; color: #fff !important; }
.sf-briefing-selection-note { margin: .8rem 0 0; color: rgba(255,255,255,.5); font-size: .75rem; }
.sf-briefing-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-top: 1.5rem; }
.sf-briefing-next,
.sf-briefing-done {
  display: inline-flex !important;
  gap: .6rem;
  align-items: center;
  margin-left: auto;
  padding: .9rem 1.35rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ff8585 !important;
  color: #191b1f !important;
  font-size: .9rem !important;
  font-weight: 500;
  cursor: pointer;
}
.sf-briefing-back {
  padding: .8rem .2rem !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.62) !important;
  font-size: .82rem !important;
  cursor: pointer;
}
.sf-briefing-person-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.1rem 1.4rem; }
.sf-briefing-step .sfx-req-field textarea { min-height: 7rem; }
.sf-briefing-summary { margin: 1.35rem 0; padding: 1rem 1.1rem; border: 1px solid rgba(255,255,255,.1); border-radius: .65rem; background: rgba(255,255,255,.035); }
.sf-briefing-summary small { display: block; margin-bottom: .4rem; color: rgba(255,255,255,.42); font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; }
.sf-briefing-summary strong { color: rgba(255,255,255,.8); font-size: .82rem; font-weight: 400; line-height: 1.45; }
.sf-briefing-success { min-height: 30rem; display: flex; flex-direction: column; justify-content: center; }
.sf-briefing-success p { max-width: 41rem; color: rgba(255,255,255,.67); font-size: 1rem; line-height: 1.65; }
.sf-briefing-success > strong { margin-top: .8rem; color: #fff; font-size: 1rem; font-weight: 500; }
.sf-briefing-done { align-self: flex-start; margin: 2rem 0 0; }
.sf-briefing-player { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: clamp(1rem,4vw,3rem); }
.sf-briefing-player[hidden] { display: none; }
.sf-briefing-player-backdrop { position: absolute; inset: 0; background: rgba(8,9,12,.94); }
.sf-briefing-player-frame { position: relative; z-index: 1; width: min(62rem,100%); aspect-ratio: 16/9; }
.sf-briefing-player-frame iframe { width: 100%; height: 100%; border: 0; border-radius: .8rem; background: #000; }
.sf-briefing-player-frame > button {
  position: absolute !important;
  top: -1rem;
  right: -1rem;
  z-index: 2;
  display: grid !important;
  place-items: center;
  width: 2.3rem !important;
  height: 2.3rem !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  border-radius: 50% !important;
  background: #24262b !important;
  color: #fff !important;
  font-size: 1.35rem !important;
  cursor: pointer;
}

.sf-spreadfilm-events { background: #1f1f1f; }
.sf-spreadfilm-events-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem; }
.sf-spreadfilm-events-grid article { min-height: 24rem; display: flex; flex-direction: column; padding: clamp(1.6rem,3.4vw,2.8rem); border: 1px solid rgba(255,255,255,.12); border-radius: 1rem; background: linear-gradient(140deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); }
.sf-spreadfilm-events-grid article:first-child { background: linear-gradient(140deg,rgba(38,206,246,.1),rgba(255,255,255,.015)); }
.sf-spreadfilm-events-grid article:last-child { background: linear-gradient(140deg,rgba(255,133,133,.11),rgba(255,255,255,.015)); }
.sf-spreadfilm-events-grid article > div { display: flex; justify-content: space-between; gap: 1rem; color: rgba(255,255,255,.58); font-size: .78rem; }
.sf-spreadfilm-events-grid small { font-size: inherit; }
.sf-spreadfilm-events-grid article > .sf-spreadfilm-event-logo { display: flex; align-items: center; height: 8rem; margin: 2rem 0 .4rem; }
.sf-spreadfilm-event-logo img { display: block; max-width: min(100%,24rem); max-height: 7rem; width: auto; height: auto; object-fit: contain; object-position: left center; }
.sf-spreadfilm-event-logo.is-dmexco { padding: 1.2rem; border-radius: .8rem; background: rgba(255,255,255,.92); }
.sf-spreadfilm-event-logo.is-dmexco img { width: min(100%,25rem); image-rendering: auto; }
.sf-spreadfilm-event-logo.is-tim img { width: min(100%,16rem); }
.sf-spreadfilm-events-grid h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-spreadfilm-events-grid p { max-width: 30rem; margin: 1rem 0 2rem; color: rgba(255,255,255,.65); line-height: 1.65; }
.sf-spreadfilm-events-grid a { margin-top: auto; color: #fff; text-decoration: none; font-size: .9rem; }
.sf-spreadfilm-events-grid a span { color: var(--sf-salmon); }

.sf-spreadfilm-team { background: #111318; }
.sf-spreadfilm-team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.15rem; margin-top: 3.5rem; }
.sf-spreadfilm-person { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: .9rem; background: rgba(255,255,255,.025); }
.sf-spreadfilm-person img { display: block; width: 100%; aspect-ratio: 1/1.08; object-fit: cover; filter: saturate(.75); }
.sf-spreadfilm-person div { padding: 1rem; }
.sf-spreadfilm-person h3 { margin: 0 0 .3rem; font-size: .98rem; font-weight: 500; }
.sf-spreadfilm-person p { margin: 0; color: rgba(255,255,255,.5); font-size: .76rem; }
.sf-spreadfilm-team-cta { display: flex; flex-wrap: wrap; gap: 1.2rem 1.8rem; align-items: center; margin-top: 2.2rem; }
.sf-spreadfilm-team-cta > a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .88rem; }
.sf-spreadfilm-team-cta > a span { color: var(--sf-salmon); }

.sf-spreadfilm-faq { background: #1f1f1f; }
.sf-spreadfilm-faq h2 { max-width: 18ch; }
.sf-spreadfilm-faq dl { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 3rem; margin: 3rem 0 0; }
.sf-spreadfilm-faq .sfx-faq-item { padding: 1.4rem 0; border-top: 1px solid rgba(255,255,255,.1); }
.sf-spreadfilm-faq dt { margin-bottom: .65rem; color: #fff; font-size: 1rem; font-weight: 500; }
.sf-spreadfilm-faq dd { margin: 0; color: rgba(255,255,255,.64); font-size: .91rem; line-height: 1.6; }

.sf-spreadfilm section.sf-spreadfilm-closing {
  padding: clamp(5rem,10vw,9rem) clamp(1.4rem,6vw,6rem);
  background: var(--sf-salmon);
  color: var(--sf-ink);
}
.sf-spreadfilm-closing .sfx-lp-hero-eyebrow { color: var(--sf-ink); }
.sf-spreadfilm-closing .sfx-lp-hero-eyebrow::before { background: var(--sf-ink); }
.sf-spreadfilm-closing h2 { max-width: 18ch; font-size: clamp(2.6rem,6vw,5.3rem); }
.sf-spreadfilm-closing p { max-width: 42rem; margin: 1.4rem 0 2rem; color: rgba(25,27,31,.72); font-size: 1.05rem; line-height: 1.65; }
.sf-spreadfilm-closing .sfx-lp-cta { background: var(--sf-ink) !important; color: #fff !important; }

@media (max-width: 1024px) {
  .sf-spreadfilm-inpage-nav { top: 5.25rem; right: .8rem; left: .8rem; max-width: calc(100vw - 1.6rem); overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  body.sf-spreadfilm-mainnav-visible .sf-spreadfilm-inpage-nav { top: 5.25rem; left: auto; }
  .sf-spreadfilm-inpage-nav::-webkit-scrollbar { display: none; }
  .sf-spreadfilm section.sf-spreadfilm-hero { min-height: auto; }
  .sf-spreadfilm-hero-grid { grid-template-columns: 1fr; }
  .sf-spreadfilm-hero-copy { max-width: 48rem; }
  .sf-spreadfilm-hero-showcase { width: min(100%,48rem); margin: 0 auto; }
  .sf-spreadfilm-hero-reel { min-height: 0; aspect-ratio: 16/9; }
  .sf-spreadfilm-pillars { grid-template-columns: repeat(2,1fr); }
  .sf-spreadfilm-pillars li:nth-child(2) { border-right: 0; }
  .sf-spreadfilm-pillars li:nth-child(n+3) { border-top: 1px solid rgba(25,27,31,.16); }
  .sf-spreadfilm-kit-grid,
  .sf-spreadfilm-agent-grid { grid-template-columns: 1fr; }
  .sf-spreadfilm-kit-board { width: min(100%,44rem); margin: 0 auto; }
  .sf-spreadfilm-agent-console { width: min(100%,40rem); margin: 0 auto; }
  .sf-spreadfilm-studio-grid { grid-template-columns: repeat(2,1fr); grid-template-rows: auto; }
  .sf-spreadfilm-studio-grid figure:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16/7; }
  .sf-spreadfilm-rollout-grid { grid-template-columns: repeat(2,1fr); }
  .sf-spreadfilm-briefing-route { grid-template-columns: 1fr; align-items: start; }
  .sf-spreadfilm-briefing-route > p { padding: 1rem 0 0; border-top: 1px solid rgba(25,27,31,.2); border-left: 0; }
  .sf-briefing-examples { grid-template-columns: repeat(2,1fr); }
  .sf-spreadfilm-team-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 767px) {
  .sf-spreadfilm section.sf-spreadfilm-hero { padding-top: 11rem; }
  .sf-spreadfilm-hero-copy h1 { font-size: clamp(2.65rem,13vw,4.2rem); }
  .sf-spreadfilm-hero-reel { min-height: 0; aspect-ratio: 16/10; }
  .sf-spreadfilm-hero-reel-cursor { display: none; }
  .sf-spreadfilm-hero-reel.is-touch video { filter: saturate(.94) brightness(.86); transform: none; }
  .sf-spreadfilm-hero-reel.is-touch .sf-spreadfilm-hero-reel-scrim {
    background-color: rgba(15,17,22,.5);
    -webkit-mask-image: radial-gradient(circle 16rem at 50% 48%, transparent 0 34%, rgba(0,0,0,.25) 70%, #000 100%);
    mask-image: radial-gradient(circle 16rem at 50% 48%, transparent 0 34%, rgba(0,0,0,.25) 70%, #000 100%);
  }
  .sf-spreadfilm-manifesto-grid,
  .sf-spreadfilm-section-head { grid-template-columns: 1fr; gap: 1.4rem; }
  .sf-spreadfilm-pillars { grid-template-columns: 1fr; }
  .sf-spreadfilm-pillars li,
  .sf-spreadfilm-pillars li:not(:first-child) { min-height: 11rem; padding: 1.3rem 0; border-right: 0; border-top: 1px solid rgba(25,27,31,.16); }
  .sf-spreadfilm-pillars h3 { margin-top: 1.7rem; }
  .sf-spreadfilm-kit-copy li { grid-template-columns: 1fr; gap: .35rem; }
  .sf-spreadfilm-board-message strong { font-size: 2rem; }
  .sf-spreadfilm-process .sfx-lp-process-list { grid-template-columns: 1fr; margin-top: 2.5rem; }
  .sf-spreadfilm-studio-grid { grid-template-columns: 1fr; }
  .sf-spreadfilm-studio-grid figure,
  .sf-spreadfilm-studio-grid figure:nth-child(3) { grid-column: auto; aspect-ratio: 16/10; }
  .sf-spreadfilm-reference-grid { grid-template-columns: 1fr; }
  .sf-spreadfilm-reference-grid .sfx-lp-example,
  .sf-spreadfilm-reference-grid .sfx-lp-example:nth-child(1),
  .sf-spreadfilm-reference-grid .sfx-lp-example:nth-child(2),
  .sf-spreadfilm-reference-grid .sfx-lp-example:nth-child(6),
  .sf-spreadfilm-reference-grid .sfx-lp-example:nth-child(7) { grid-column: auto; aspect-ratio: 16/10; }
  .sf-spreadfilm-rollout-grid,
  .sf-spreadfilm-events-grid,
  .sf-spreadfilm-faq dl { grid-template-columns: 1fr; }
  .sf-spreadfilm-price-card { grid-template-columns: 1fr; }
  .sf-spreadfilm-price-lockup { min-height: 27rem; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.11); }
  .sf-spreadfilm-price-included ul { grid-template-columns: 1fr; }
  .sf-spreadfilm-price-extra { grid-template-columns: 1fr; gap: .7rem; }
  .sf-spreadfilm-events-grid article { min-height: 20rem; }
  .sf-briefing-person-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .sf-spreadfilm .sfx-lp-inner { padding-right: 2rem; }
  .sf-spreadfilm-inpage-nav { right: .5rem; left: .5rem; max-width: calc(100vw - 1rem); padding: .35rem; }
  .sf-spreadfilm-inpage-nav a:first-child { display: none; }
  .sf-spreadfilm-inpage-nav a,
  .sf-spreadfilm-inpage-nav .is-cta { padding: .62rem .55rem; font-size: .68rem; }
  .sf-spreadfilm-inpage-nav .is-cta { margin-left: auto; }
  .sf-spreadfilm-menu-toggle { flex-basis: 2rem; width: 2rem !important; height: 2rem !important; }
  .sf-nav-long { display: none; }
  .sf-nav-short { display: inline; }
  .sf-spreadfilm-hero-showcase { border-radius: 1rem; }
  .sf-spreadfilm-hero-reel { aspect-ratio: 4/3; }
  .sf-spreadfilm-hero-reel-meta { top: .65rem; right: .65rem; left: .65rem; }
  .sf-spreadfilm-hero-reel-label { padding: .45rem .58rem; font-size: .64rem; }
  .sf-spreadfilm-hero-reel-label small { display: none; }
  .sf-spreadfilm .sf-spreadfilm-hero-sound { min-height: 2.2rem !important; padding: .45rem .65rem !important; font-size: .66rem !important; }
  .sf-spreadfilm-hero-reel-hint { bottom: .7rem; font-size: .67rem; }
  .sf-spreadfilm-product-name { grid-template-columns: 1fr; }
  .sf-spreadfilm-product-name span { margin-top: .1rem; }
  .sf-spreadfilm-product-lockup ol { grid-template-columns: 1fr; }
  .sf-spreadfilm-product-lockup li {
    display: grid;
    grid-template-columns: 3.2rem 5.4rem 1fr;
    align-items: center;
    min-height: 0;
    padding: .75rem;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .sf-spreadfilm-product-lockup li:last-child { border-bottom: 0; }
  .sf-spreadfilm-product-lockup li > span,
  .sf-spreadfilm-product-lockup li > strong,
  .sf-spreadfilm-product-lockup li > small { margin: 0; }
  .sf-spreadfilm-board-grid { grid-template-columns: 1fr; }
  .sf-spreadfilm-board-grid > div { min-height: 5.5rem; }
  .sf-spreadfilm-agent-channels { grid-template-columns: repeat(2,1fr); }
  .sf-spreadfilm-rollout-grid { border: 0; background: transparent; gap: .8rem; }
  .sf-spreadfilm-rollout-grid article { min-height: 13rem; border: 1px solid rgba(25,27,31,.14); }
  .sf-spreadfilm-rollout-grid h3 { margin-top: 2.5rem; }
  .sf-spreadfilm-team-grid { grid-template-columns: 1fr; }
  .sf-spreadfilm-person { display: grid; grid-template-columns: 7.5rem 1fr; }
  .sf-spreadfilm-person img { height: 100%; aspect-ratio: 1; }
  .sf-spreadfilm-person div { align-self: center; }
  .sf-spreadfilm-briefing-route ol { grid-template-columns: 1fr; border-top: 0; }
  .sf-spreadfilm-briefing-route li,
  .sf-spreadfilm-briefing-route li:first-child { display: grid; grid-template-columns: 2rem 1fr; gap: .5rem; padding: .8rem 0; border-top: 1px solid rgba(25,27,31,.2); border-left: 0; }
  .sf-spreadfilm-briefing-route li span { margin: 0; }
  .sf-spreadfilm-briefing { padding: .5rem; }
  .sf-spreadfilm-briefing .sf-spreadfilm-briefing-panel { max-height: calc(100vh - 1rem); border-radius: .9rem; }
  .sf-briefing-progress { padding: 1rem 1.2rem 0; }
  .sf-briefing-step,
  .sf-briefing-success { max-height: calc(100vh - 4rem); padding: 1.2rem; }
  .sf-briefing-step h2,
  .sf-briefing-success h2 { padding-right: 1.6rem; font-size: 1.85rem; }
  .sf-briefing-examples { grid-template-columns: 1fr; }
  .sf-briefing-example { display: grid; grid-template-columns: minmax(0,1fr); }
  .sf-briefing-example-choice { display: grid !important; grid-template-columns: 7rem 1fr; }
  .sf-briefing-example-choice img { height: 100%; aspect-ratio: 1; }
  .sf-briefing-example-copy { min-height: 6.4rem; padding: .8rem 2.2rem .8rem .8rem; }
  .sf-briefing-example-play { right: .45rem; bottom: .45rem; }
  .sf-briefing-actions { align-items: stretch; }
  .sf-briefing-actions .sfx-req-submit { width: 100%; justify-content: center; order: -1; }
  .sf-briefing-next { width: 100%; justify-content: center; }
  .sf-briefing-back { margin: 0 auto; }
  .sf-briefing-player { padding: .5rem; }
  .sf-briefing-player-frame > button { top: .5rem; right: .5rem; }
}

@media (max-width: 340px) {
  .sf-spreadfilm-inpage-nav a[data-sf-section="prozess"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-spreadfilm-inpage-nav,
  body.sf-spreadfilm-page #site-header .main_menu,
  .sf-spreadfilm-studio-grid figure img,
  .sf-spreadfilm-hero-reel video,
  .sf-spreadfilm-hero-reel-cursor,
  .sf-briefing-progress b,
  .sf-briefing-example { transition: none; }
}