/* Gemeinsames Design-System fuer die neuen Format- und Service-Landingpages
   (scripts/format-page-build.py, scripts/service-page-build.py). Natives
   HTML/CSS statt Elementor-Markup-Nachbau -- gleiches visuelles Ergebnis,
   gleiche Sektionsreihenfolge wie imagefilm.html (Hero, Intro, Benefits,
   Beispiele, CTA), etabliertes Farbschema (#1F1F1F/#FF8585/Space Grotesk). */
.sfx-lp { background: #1F1F1F; color: #fff; }
.sfx-lp section { padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1.4rem, 6vw, 6rem); }
.sfx-lp-inner { max-width: 68rem; margin: 0 auto; }

section.sfx-lp-hero { padding-top: clamp(7rem, 12vw, 9.5rem); }
.sfx-lp-hero-bgvideo { position: relative; overflow: hidden; padding-bottom: clamp(4rem, 9vw, 7rem) !important; }
/* Der Ausschnitt sitzt bewusst oberhalb der Mitte: der Hero ist deutlich
   breiter als 16:9, mittig beschnitten wurden Koepfe oben abgeschnitten
   (Nutzer-Hinweis zu /ki-film: "der Typ ist abgeschnitten"). In Filmmaterial
   liegt das Gesicht fast immer im oberen Drittel. */
.sfx-lp-hero-bgvideo video.sfx-lp-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%; z-index: 0;
}
.sfx-lp-hero-bgvideo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(31,31,31,.94) 0%, rgba(31,31,31,.72) 42%, rgba(31,31,31,.32) 100%);
}
.sfx-lp-hero-bgvideo .sfx-lp-inner { position: relative; z-index: 2; }
.sfx-lp-hero-bgvideo .sfx-lp-hero-sub { color: rgba(255,255,255,.88); }

.sfx-lp-hero-bgimage { position: relative; overflow: hidden; }
.sfx-lp-hero-bgimage .sfx-lp-hero-bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%; z-index: 0;
}
.sfx-lp-hero-bgimage::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(31,31,31,.95) 0%, rgba(31,31,31,.82) 38%, rgba(31,31,31,.5) 68%, rgba(31,31,31,.62) 100%);
}
.sfx-lp-hero-bgimage .sfx-lp-inner { position: relative; z-index: 2; }
.sfx-lp-hero-bgimage .sfx-lp-hero-sub { color: rgba(255,255,255,.88); }
.sfx-lp-hero-bgimage .sfx-lp-video { box-shadow: 0 2rem 6rem rgba(0,0,0,.55); }
.sfx-lp-hero-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.4rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #FF8585;
}
.sfx-lp-hero-eyebrow::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #FF8585; }
.sfx-lp-hero h1 {
  margin: 0 0 1.4rem; font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 300;
  line-height: 1.05; letter-spacing: -.02em; max-width: 20ch;
}
.sfx-lp-hero-sub { margin: 0 0 2.2rem; max-width: 46rem; font-size: 1.15rem; line-height: 1.68; color: rgba(255,255,255,.8); }
.sfx-lp-hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.sfx-lp-video { position: relative; overflow: hidden; aspect-ratio: 16/9; border-radius: 1.1rem; background: #080808; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 2rem 5rem rgba(0,0,0,.35); }
.sfx-lp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.sfx-lp-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 980px) {
  .sfx-lp-hero-grid { grid-template-columns: 1fr; }
}
/* Auf dem Telefon wird der Hero sonst hoch und schmal: das Hintergrundvideo
   liegt im Kinoformat, `cover` skaliert es dann auf die Hoehe und zeigt nur
   noch einen schmalen Streifen der Bildmitte. Weniger Innenabstand und eine
   etwas kleinere Zeile halten die Flaeche naeher am Bildformat -- man sieht
   mehr vom Bild, und der erste Bildschirm zeigt bereits den Textanschluss. */
@media (max-width: 600px) {
  section.sfx-lp-hero { padding-top: 6.8rem; }
  .sfx-lp-hero-bgvideo, .sfx-lp-hero-bgimage { padding-bottom: 2.8rem !important; }
  .sfx-lp-hero h1 { font-size: clamp(2.05rem, 8.4vw, 2.6rem); margin-bottom: 1.1rem; }
  .sfx-lp-hero-sub { font-size: 1.02rem; line-height: 1.6; margin-bottom: 1.7rem; }
}
/* Der Knopf ist ein <button> (er oeffnet das Anfrage-Overlay, er navigiert
   nicht). Damit greift `.elementor-kit-4 button` -- Element plus Klasse hat die
   hoehere Spezifitaet als eine einzelne Klasse und gewinnt gegen alles hier.
   Gemessen kam an: Hintergrund #424242 statt Salmon, dazu die dunkle Schrift
   von hier -- dunkel auf dunkelgrau, praktisch unlesbar -- ein rosa Rand und
   ein Innenabstand von 37,8px oben gegen 9px unten. Deshalb steht auf jeder
   Eigenschaft, die das Kit ebenfalls setzt, ein !important. */
.sfx-lp-cta {
  display: inline-flex; align-items: center; gap: .6rem;
  background: #FF8585 !important; color: #191b1f !important;
  border: 0 !important; border-radius: .6rem !important;
  padding: 1rem 1.6rem !important;
  font-family: inherit; font-size: 1.02rem !important; font-weight: 500 !important;
  line-height: 1.2 !important; text-decoration: none; cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.sfx-lp-cta:hover { background: #ff9a9a !important; }
.sfx-lp-cta:hover { transform: translateY(-2px); box-shadow: 0 1rem 2rem rgba(255,133,133,.25); }
.sfx-lp-cta span { transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.sfx-lp-cta:hover span { transform: translateX(4px); }
.sfx-lp-hero-watermark {
  display: flex; align-items: center; gap: .6rem; margin: 2.4rem 0 0;
  font-size: 1rem; font-weight: 400; color: rgba(255,255,255,.92);
}
.sfx-lp-hero-watermark svg { flex-shrink: 0; }
.sfx-lp-hero-watermark strong { font-weight: 600; }

.sfx-lp-intro h2, .sfx-lp-benefits h2, .sfx-lp-examples h2, .sfx-lp-faq h2 {
  margin: 0 0 1.2rem; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 500; letter-spacing: -.015em;
}
.sfx-lp-intro p { max-width: 52rem; font-size: 1.06rem; line-height: 1.72; color: rgba(255,255,255,.78); margin: 0 0 1.2rem; }
.sfx-lp-intro p:last-child { margin-bottom: 0; }

.sfx-lp-benefits { background: rgba(255,255,255,.03); }
.sfx-lp-benefits ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 2rem; }
.sfx-lp-benefits li {
  display: flex; gap: .8rem; align-items: flex-start; font-size: 1.02rem; line-height: 1.55; color: rgba(255,255,255,.88);
}
.sfx-lp-benefits li::before { content: ""; flex: 0 0 auto; width: .55rem; height: .55rem; margin-top: .5rem; border-radius: 50%; background: #FF8585; }

.sfx-lp-benefits-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.sfx-lp-benefits-img { border-radius: 1rem; overflow: hidden; aspect-ratio: 4/3; background: #14161c; }
.sfx-lp-benefits-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(88%) brightness(.9); }
@media (max-width: 900px) {
  .sfx-lp-benefits-grid { grid-template-columns: 1fr; }
}

/* Prozess -- kompakte Zeitachse. Vorher sass das Icon mittig in einer
   halbseitigen 4:3-Kachel: eine sehr grosse, fast leere Flaeche fuer eine
   kleine Strichzeichnung (User-Hinweis: "eine riesen Grafik obwohl eigentlich
   das eine kleine Grafik sein sollte"). Jetzt traegt der Text die Sektion. */
.sfx-lp-process-list {
  list-style: none; margin: 2.4rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
  max-width: 52rem;
}
.sfx-lp-process-step {
  display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: 1.4rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,.09);
}
.sfx-lp-process-step:last-child { border-bottom: 1px solid rgba(255,255,255,.09); }
.sfx-lp-process-badge {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(255,133,133,.1); border: 1px solid rgba(255,133,133,.26);
  color: #FF8585; flex: 0 0 auto;
}
.sfx-lp-process-badge svg { width: 1.35rem; height: 1.35rem; }
.sfx-lp-process-text h3 {
  margin: .3rem 0 .5rem; font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: .7rem;
}
.sfx-lp-process-num { color: rgba(255,255,255,.3); font-size: .85rem; font-weight: 500; letter-spacing: .06em; }
.sfx-lp-process-text p { margin: 0; font-size: .98rem; line-height: 1.65; color: rgba(255,255,255,.72); }
@media (max-width: 700px) {
  .sfx-lp-process-step { grid-template-columns: 2.4rem minmax(0,1fr); gap: 1rem; }
  .sfx-lp-process-badge { width: 2.4rem; height: 2.4rem; }
  .sfx-lp-process-badge svg { width: 1.1rem; height: 1.1rem; }
}

.sfx-lp-channels { background: rgba(255,255,255,.03); }
.sfx-lp-channels-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.2rem; }
.sfx-lp-channels-grid .sfx-lp-channel {
  padding: 1.4rem; border: 1px solid rgba(255,255,255,.1); border-radius: .85rem; background: rgba(255,255,255,.02);
}
.sfx-lp-channel h3 { margin: 0 0 .55rem; font-size: 1rem; font-weight: 500; }
.sfx-lp-channel p { margin: 0; font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.72); }
@media (max-width: 980px) {
  .sfx-lp-channels-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sfx-lp-channels-grid { grid-template-columns: 1fr; }
}

/* Beispiele -- horizontales Snap-Carousel statt starrem Grid, wie das
   bereits bewaehrte Works-Carousel der Startseite (home-v3.js::initWorks). */
.sfx-lp-examples-lead { max-width: 52rem; margin: 0; font-size: 1.06rem; line-height: 1.72; color: rgba(255,255,255,.78); }
.sfx-lp-examples-wrap { position: relative; margin-top: 2rem; }
.sfx-lp-examples-carousel {
  display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .25rem .25rem 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sfx-lp-examples-carousel::-webkit-scrollbar { display: none; }
.sfx-lp-examples-carousel .sfx-lp-example { flex: 0 0 min(22rem, 78vw); scroll-snap-align: start; }
.sfx-lp-example { position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 4/3; display: block; background: #14161c; }
.sfx-lp-example img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease, filter 400ms ease; filter: saturate(85%) brightness(.82); }
.sfx-lp-example:hover img { transform: scale(1.04); filter: saturate(100%) brightness(1); }
.sfx-lp-example-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.1rem; z-index: 3;
  background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); font-size: .95rem; font-weight: 500;
}
/* !important noetig: .elementor-kit-4 button ueberschreibt sonst
   Hintergrund/Radius/Padding (hoehere Spezifitaet als eine einzelne Klasse). */
.sfx-lp-examples-arrow {
  position: absolute; top: 40%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50% !important;
  background: rgba(20,22,28,.9) !important; border: 1px solid rgba(255,255,255,.16) !important; color: #fff !important;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 200ms ease, border-color 200ms ease;
  z-index: 2; padding: 0 !important;
}
.sfx-lp-examples-arrow svg { width: 1.2rem; height: 1.2rem; }
.sfx-lp-examples-arrow:hover { background: #FF8585 !important; border-color: #FF8585 !important; color: #191b1f !important; }
.sfx-lp-examples-prev { left: -1.4rem; }
.sfx-lp-examples-next { right: -1.4rem; }
@media (max-width: 900px) {
  .sfx-lp-examples-arrow { display: none; }
}
.sfx-lp-cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2rem; }
.sfx-lp-case { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; }
.sfx-lp-case-img { aspect-ratio: 4/3; overflow: hidden; background: #14161c; }
.sfx-lp-case-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Karte ohne freigegebenes Bildmaterial: typografischer Kopf statt Bildluecke */
.sfx-lp-case.is-textonly .sfx-lp-case-img {
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  background: linear-gradient(140deg, #1b1d24 0%, #14161c 60%, #201a1a 100%);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sfx-lp-case.is-textonly .sfx-lp-case-img span {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 500; letter-spacing: -.02em;
  color: rgba(255,255,255,.9); text-align: center; line-height: 1.15;
}
.sfx-lp-case-cat { margin: 1.1rem 1.2rem 0; font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #FF8585; }
.sfx-lp-case h3 { margin: .5rem 1.2rem 0; font-size: 1.12rem; font-weight: 500; line-height: 1.3; }
.sfx-lp-case-desc { margin: .6rem 1.2rem 0; font-size: .92rem; line-height: 1.6; color: rgba(255,255,255,.72); flex: 1; }
.sfx-lp-case-stats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 1.2rem 1.2rem; }
.sfx-lp-case-stat {
  font-size: .78rem; font-weight: 500; padding: .35rem .7rem; border-radius: 999px;
  background: rgba(255,133,133,.12); border: 1px solid rgba(255,133,133,.25); color: #fff;
}
@media (max-width: 900px) {
  .sfx-lp-cases-grid { grid-template-columns: 1fr; }
}

.sfx-lp-team { background: rgba(255,255,255,.03); }
.sfx-lp-team h2 { margin: 0 0 .8rem; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 500; letter-spacing: -.015em; }
.sfx-lp-team-sub { margin: 0 0 2.2rem; max-width: 42rem; font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,.7); }
.sfx-lp-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.sfx-lp-team-card { text-align: center; }
.sfx-lp-team-card img { width: 100%; aspect-ratio: 1/1.05; object-fit: cover; border-radius: .85rem; display: block; margin: 0 0 .8rem; filter: grayscale(15%); }
.sfx-lp-team-card span { font-size: .95rem; font-weight: 500; color: #fff; }
@media (max-width: 700px) {
  .sfx-lp-team-grid { grid-template-columns: repeat(2, 1fr); }
}

.sfx-lp-faq dl { margin: 2rem 0 0; }
.sfx-lp-faq .sfx-faq-item { border-top: 1px solid rgba(255,255,255,.1); padding: 1.4rem 0; }
.sfx-lp-faq .sfx-faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.sfx-lp-faq dt { font-size: 1.05rem; font-weight: 500; margin: 0 0 .6rem; }
.sfx-lp-faq dd { margin: 0; font-size: .98rem; line-height: 1.6; color: rgba(255,255,255,.72); }

.sfx-lp-closing { background: #FF8585; color: #191b1f; text-align: left; }
.sfx-lp-closing h2 { margin: 0 0 1rem; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 500; letter-spacing: -.015em; max-width: 22ch; }
.sfx-lp-closing p { margin: 0 0 1.8rem; max-width: 40rem; font-size: 1.05rem; line-height: 1.65; color: rgba(25,27,31,.82); }
.sfx-lp-closing .sfx-lp-cta { background: #191b1f !important; color: #fff !important; }
.sfx-lp-closing .sfx-lp-cta:hover { background: #2a2d33 !important; }

.sfx-lp-crosslinks { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.sfx-lp-crosslinks a {
  display: inline-block; padding: .55rem 1.1rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  color: rgba(255,255,255,.85); font-size: .92rem; text-decoration: none;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.sfx-lp-crosslinks a:hover { border-color: #FF8585; background: #FF8585; color: #14161c; }

@media (max-width: 900px) {
  .sfx-lp-benefits ul { grid-template-columns: 1fr; }
}

/* Icon-Benefits ("Warum X ... staerkt") -- kleine Rund-Icons (105px,
   object-fit:cover), wie imagefilm.html (verifiziert per getComputedStyle:
   border-radius:50%, keine grossen Rechteckkarten). */
.sfx-lp-iconben-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; margin-top: 2.2rem; }
.sfx-lp-iconben-card { display: flex; flex-direction: column; align-items: flex-start; }
/* Icon-Badge statt Foto: es gibt kein passendes, freigegebenes Fotomaterial
   fuer 19 Seiten x 4 Karten -- vier immer gleiche Crew-Fotos wirkten als
   Wiederholung und passten inhaltlich meist nicht (User-Hinweis). */
.sfx-lp-iconben-icon {
  display: flex; align-items: center; justify-content: center;
  width: 4.4rem; height: 4.4rem; border-radius: 50%; margin-bottom: 1.2rem; flex: 0 0 auto;
  background: rgba(255,133,133,.1); border: 1px solid rgba(255,133,133,.28); color: #FF8585;
  transition: background 250ms ease, transform 250ms ease;
}
.sfx-lp-iconben-card:hover .sfx-lp-iconben-icon { background: rgba(255,133,133,.18); transform: translateY(-2px); }
.sfx-lp-iconben-icon svg { width: 1.9rem; height: 1.9rem; }
.sfx-lp-iconben-card h3 { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 500; }
.sfx-lp-iconben-card p { margin: 0; font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.72); }
.sfx-lp-iconben-cta { margin-top: 2.6rem; }

/* Tabs-Benefits ("Vorteile auf einen Blick") -- natives Tab-Widget statt Elementor n-tabs */
/* Vorteile auf einen Blick -- vertikale Tab-Liste mit Marken-Blau als
   Aktiv-Farbe, wie imagefilm.html (kein horizontales Pill-Menu). */
.sfx-lp-tabsben { background: rgba(255,255,255,.03); }
.sfx-lp-tabs { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(2rem, 5vw, 4rem); margin-top: 2.4rem; align-items: start; }
.sfx-lp-tabs-nav { display: flex; flex-direction: column; gap: 1.5rem; }
/* !important noetig: .elementor-kit-4 button (Theme-Kit-CSS) hat hoehere
   Spezifitaet (Klasse+Element) als eine einzelne Klasse und ueberschreibt
   sonst Hintergrund/Radius/Padding jedes <button> -- bekanntes Muster,
   siehe auch .sfx-lp-examples-arrow weiter unten. */
.sfx-lp-tab-btn {
  background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important;
  text-align: left; cursor: pointer; font-family: inherit;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 400; letter-spacing: -.01em;
  color: rgba(255,255,255,.45) !important; transition: color 200ms ease;
}
.sfx-lp-tab-btn.is-active { color: #26CEF6 !important; }
.sfx-lp-tab-btn:hover:not(.is-active) { color: rgba(255,255,255,.85) !important; }
.sfx-lp-tab-panel { display: none; }
.sfx-lp-tab-panel.is-active { display: block; }
.sfx-lp-tab-img { border-radius: 1rem; overflow: hidden; aspect-ratio: 4/3; background: #14161c; margin-bottom: 1.4rem; }
.sfx-lp-tab-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(88%) brightness(.9); }
.sfx-lp-tab-panel p { margin: 0; font-size: 1.02rem; line-height: 1.7; color: rgba(255,255,255,.78); }
@media (max-width: 900px) {
  .sfx-lp-tabs { grid-template-columns: 1fr; }
}

/* Auszeichnungen und Meilensteine -- generisch, Firmen- statt Format-Content.
   Die Award-Logos sind bereits farbige Rundmedaillen (verifiziert an den
   Quelldateien) -- KEIN Graustufen-Filter, volle Groesse zeigen. */
.sfx-lp-awards-text { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin: 2rem 0 2.8rem; }
.sfx-lp-awards-text p { margin: 0; font-size: .98rem; line-height: 1.65; color: rgba(255,255,255,.72); }
.sfx-lp-awards-grid { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.4rem, 3vw, 2.4rem); }
.sfx-lp-award {
  flex: 0 0 auto; width: clamp(6.5rem, 9vw, 9rem); height: clamp(6.5rem, 9vw, 9rem);
  border-radius: 50%; overflow: hidden; transition: transform 220ms ease;
}
.sfx-lp-award:hover { transform: translateY(-.3rem); }
.sfx-lp-award img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Idee. Story. Wirkung. -- zwei generische Motion-Videos + Mini-CTA */
.sfx-lp-idea-grid { display: grid; grid-template-columns: repeat(2, 1fr) minmax(18rem, .9fr); gap: 1.4rem; margin-top: 2.2rem; align-items: stretch; }
.sfx-lp-idea-video { position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 3/4; background: #080808; }
.sfx-lp-idea-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sfx-lp-idea-video h3 { position: absolute; left: 1.2rem; bottom: 1.2rem; margin: 0; font-size: 1.15rem; font-weight: 500; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.sfx-lp-idea-cta {
  border-radius: 1rem; background: #14161c; border: 1px solid rgba(255,255,255,.08);
  padding: 1.8rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
.sfx-lp-idea-cta img { width: 3.2rem; height: auto; margin-bottom: 1rem; opacity: .85; }
.sfx-lp-idea-cta h3 { margin: 0 0 .4rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; }
.sfx-lp-idea-cta p { margin: 0 0 1.2rem; font-size: .92rem; color: rgba(255,255,255,.6); }

@media (max-width: 980px) {
  .sfx-lp-iconben-grid { grid-template-columns: repeat(2, 1fr); }
  .sfx-lp-awards-text { grid-template-columns: 1fr; }
  .sfx-lp-idea-grid { grid-template-columns: 1fr; }
  .sfx-lp-idea-video { aspect-ratio: 16/9; }
}

/* "Wir machen deinen X" -- Checklist + Foto-Collage + Bio-CTA direkt nach
   dem Hero, 1:1 wie imagefilm.html's Intro-Sektion. */
.sfx-lp-collage-grid {
  display: grid;
  /* Textspalte deutlich breiter, Bio-Spalte rueckt dafuer nach rechts
     (User-Wunsch: "mach bitte den Text ein bisschen breiter und schieb das
     Bild von Michael Schanz noch ein bisschen nach rechts"). */
  grid-template-columns: minmax(0,1.55fr) auto minmax(0,.62fr) minmax(0,1.05fr);
  gap: clamp(1.6rem, 3vw, 2.8rem);
  align-items: center;
}
.sfx-lp-collage-text h2 {
  margin: 0 0 1.2rem; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 500;
  letter-spacing: -.015em; color: #FF8585;
}
.sfx-lp-collage-text p { max-width: 42rem; font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.78); margin: 0 0 1.1rem; }
.sfx-lp-collage-text p:last-of-type { margin-bottom: 0; }
.sfx-lp-collage-checklist { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.sfx-lp-collage-checklist a {
  display: inline-flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.85);
  text-decoration: none; font-size: .92rem; border: 1px solid rgba(255,255,255,.14); border-radius: .6rem;
  padding: .65rem 1rem; transition: border-color 200ms ease, background 200ms ease;
}
.sfx-lp-collage-checklist a:hover { border-color: #FF8585; background: rgba(255,133,133,.08); }
.sfx-lp-collage-checklist svg { width: .8rem; height: .8rem; flex: 0 0 auto; color: #FF8585; }

.sfx-lp-collage-logo { display: flex; justify-content: center; opacity: .16; }
.sfx-lp-collage-logo img { width: 2.8rem; height: auto; }

.sfx-lp-collage-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.sfx-lp-collage-photos img { width: 100%; border-radius: .8rem; object-fit: cover; display: block; }
.sfx-lp-collage-photos img:nth-child(1) { aspect-ratio: 3/4; }
.sfx-lp-collage-photos img:nth-child(2) { aspect-ratio: 3/4; margin-top: 1.8rem; }
.sfx-lp-collage-photos img:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16/7; }

.sfx-lp-collage-bio { display: flex; flex-direction: column; gap: 1.3rem; }
.sfx-lp-collage-bio img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: .9rem; display: block; filter: grayscale(12%); }
.sfx-lp-collage-bio-text h3 {
  margin: 0 0 .9rem; font-size: clamp(1.2rem, 1.9vw, 1.6rem); font-weight: 400;
  line-height: 1.3; letter-spacing: -.01em;
}
/* Name + Rolle: das Portrait stand vorher komplett ohne Namen da und wirkte
   dadurch wie ein Stockbild (User-Hinweis: "schreib seinen Namen dazu"). */
.sfx-lp-collage-bio-name { margin: 0 0 1.2rem; font-size: .92rem; line-height: 1.45; }
.sfx-lp-collage-bio-name strong { display: block; color: #fff; font-weight: 500; }
.sfx-lp-collage-bio-name span { color: rgba(255,255,255,.55); }

@media (max-width: 1100px) {
  .sfx-lp-collage-grid { grid-template-columns: 1fr 1fr; }
  .sfx-lp-collage-text { grid-column: 1 / -1; }
  .sfx-lp-collage-logo { display: none; }
}
@media (max-width: 700px) {
  .sfx-lp-collage-grid { grid-template-columns: 1fr; }
  .sfx-lp-collage-photos { grid-template-columns: repeat(3, 1fr); }
  .sfx-lp-collage-photos img:nth-child(2) { margin-top: 0; }
  .sfx-lp-collage-photos img:nth-child(3) { grid-column: auto; aspect-ratio: 3/4; }
}

/* Warum Spreadfilms – fuenf Hintergrund-USPs (nur auf den neuen Seiten) */
.sfx-lp-usp { background: rgba(255,255,255,.03); }
.sfx-lp-usp h2 { margin: 0 0 .9rem; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 500; letter-spacing: -.015em; }
.sfx-lp-usp-lead { max-width: 46rem; margin: 0 0 2.4rem; font-size: 1.04rem; line-height: 1.7; color: rgba(255,255,255,.75); }
/* Sechs Spalten, damit die fuenfte Karte keine Luecke hinterlaesst: obere Reihe
   3x2 Spalten, untere Reihe 2x3 Spalten. */
.sfx-lp-usp-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1.4rem; }
.sfx-lp-usp-card {
  grid-column: span 2;
  padding: 1.6rem 1.7rem; border: 1px solid rgba(255,255,255,.1); border-radius: .9rem;
  background: rgba(255,255,255,.02); transition: border-color 260ms ease, background-color 260ms ease;
}
.sfx-lp-usp-card:nth-child(4), .sfx-lp-usp-card:nth-child(5) { grid-column: span 3; }
.sfx-lp-usp-card:hover { border-color: rgba(255,133,133,.35); background: rgba(255,255,255,.04); }
.sfx-lp-usp-head { display: flex; align-items: flex-start; gap: .85rem; margin: 0 0 .8rem; }
.sfx-lp-usp-icon {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid rgba(38,206,246,.32); background: rgba(38,206,246,.09); color: #26CEF6;
  transition: border-color 260ms ease, background-color 260ms ease;
}
.sfx-lp-usp-icon svg { width: 1.3rem; height: 1.3rem; }
.sfx-lp-usp-card:hover .sfx-lp-usp-icon { border-color: rgba(38,206,246,.6); background: rgba(38,206,246,.16); }
.sfx-lp-usp-card h3 { margin: .35rem 0 0; font-size: 1.08rem; font-weight: 500; color: #FF8585; }
/* Kennzahl nur dort, wo sie im Text belegt ist -- zwei Karten tragen bewusst keine. */
.sfx-lp-usp-stat { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .7rem; }
.sfx-lp-usp-stat b {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 400; line-height: 1;
  letter-spacing: -.02em; color: #fff;
}
.sfx-lp-usp-stat span { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.48); }
.sfx-lp-usp-card p { margin: 0; font-size: .94rem; line-height: 1.65; color: rgba(255,255,255,.74); }
@media (max-width: 980px) {
  .sfx-lp-usp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sfx-lp-usp-card, .sfx-lp-usp-card:nth-child(4), .sfx-lp-usp-card:nth-child(5) { grid-column: span 1; }
  .sfx-lp-usp-card:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 640px) {
  .sfx-lp-usp-grid { grid-template-columns: 1fr; }
  .sfx-lp-usp-card, .sfx-lp-usp-card:nth-child(4), .sfx-lp-usp-card:nth-child(5) { grid-column: span 1; }
}

/* Location-Scouting: Recherche-Schnappschuss neben dem fertigen Motiv */
.sfx-lp-scouting { background: rgba(255,255,255,.03); }
.sfx-lp-scouting h2 { margin: 0 0 .9rem; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 500; letter-spacing: -.015em; }
.sfx-lp-scout-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem 1.8rem; }
.sfx-lp-scout-season {
  margin: 0 0 .7rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #FF8585;
}
.sfx-lp-scout-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .7rem; }
.sfx-lp-scout-pair figure { margin: 0; }
.sfx-lp-scout-pair img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  border-radius: .6rem; border: 1px solid rgba(255,255,255,.08);
}
.sfx-lp-scout-pair figcaption {
  margin-top: .5rem; font-size: .8rem; color: rgba(255,255,255,.55);
}
.sfx-lp-scout-pair figure:first-child img { filter: saturate(70%) brightness(.9); }
@media (max-width: 860px) { .sfx-lp-scout-grid { grid-template-columns: 1fr; } }

/* Styleframes und fertige 3D-Arbeiten (scripts/trello-styleframes.py).
   Zweizeiliger horizontaler Streifen -- bei ueber 50 Motiven waere eine
   vertikale Wand mehrere Bildschirmhoehen lang. */
.sfx-lp-frames h2 { margin: 0 0 .9rem; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 500; letter-spacing: -.015em; }
.sfx-lp-frames-wrap { margin-top: 2.2rem; }
.sfx-lp-frame-track {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(2, clamp(8rem, 13vw, 11rem));
  grid-auto-columns: clamp(14rem, 22vw, 19.5rem);
  gap: .9rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none;
  padding-bottom: .3rem;
}
.sfx-lp-frame-track::-webkit-scrollbar { display: none; }
.sfx-lp-frame {
  margin: 0; position: relative; overflow: hidden; scroll-snap-align: start;
  border-radius: .7rem; border: 1px solid rgba(255,255,255,.08); background: #14161c;
}
.sfx-lp-frame.is-wide { grid-column: span 2; }
.sfx-lp-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(88%) brightness(.9); transition: filter 320ms ease, transform 520ms cubic-bezier(.2,.7,.2,1);
}
.sfx-lp-frame:hover img { filter: saturate(100%) brightness(1); transform: scale(1.04); }
.sfx-lp-frame figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .7rem .55rem;
  font-size: .78rem; line-height: 1.3; color: rgba(255,255,255,.9);
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  opacity: 0; transition: opacity 260ms ease;
}
.sfx-lp-frame:hover figcaption { opacity: 1; }
@media (max-width: 700px) {
  .sfx-lp-frame-track { grid-template-rows: repeat(2, 8rem); grid-auto-columns: 13rem; }
}

/* ---------------------------------------------------------------------------
   Beispiele: Karte mit Play + Pfeil, Layout je Anzahl, Lightbox
   Vorbild ist bewusst das Filmarchiv (User: "eigentlich vom Design her genauso
   wie wir es in der Unterseite Filmarchiv haben"): Klick spielt den Film im
   Overlay, der Pfeil fuehrt auf die Projektseite. Bei ein bis drei Beispielen
   waere ein Carousel leer gelaufen -- deshalb je Anzahl ein eigenes Layout.
   --------------------------------------------------------------------------- */
.sfx-lp-examples-set { display: grid; gap: 1.5rem; margin-top: 2rem; }
.sfx-lp-examples-set.is-count-1 { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.sfx-lp-examples-set.is-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sfx-lp-examples-set.is-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sfx-lp-examples-set.is-count-1 .sfx-lp-example { aspect-ratio: 16/9; }
.sfx-lp-examples-set.is-count-2 .sfx-lp-example { aspect-ratio: 16/10; }
/* Grossform: ein Film pro Reihe, volle Breite. Auf Seiten, deren Argument die
   Filme selbst sind, wirkt eine Dreierreihe wie eine Bildergalerie -- hier
   soll jeder Film fuer sich stehen. */
.sfx-lp-examples-set.is-feature { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
.sfx-lp-examples-set.is-feature .sfx-lp-example { aspect-ratio: 16/9; border-radius: 1.25rem; }
.sfx-lp-examples-set.is-feature .sfx-lp-example img { filter: saturate(92%) brightness(.86); }
.sfx-lp-examples-set.is-feature .sfx-lp-example-label {
  padding: 2rem 2.2rem; background: linear-gradient(0deg, rgba(0,0,0,.82) 12%, transparent 82%);
}
.sfx-lp-examples-set.is-feature .sfx-lp-example-title { font-size: clamp(1.25rem, 2.2vw, 1.9rem); }
.sfx-lp-examples-set.is-feature .sfx-lp-example-play { width: 4.6rem; height: 4.6rem; }
@media (max-width: 640px) {
  .sfx-lp-examples-set.is-feature .sfx-lp-example-label { padding: 1.2rem 1.2rem; }
}
.sfx-lp-examples-note {
  margin: 1.6rem 0 0; font-size: .92rem; line-height: 1.6; color: rgba(255,255,255,.55);
}
.sfx-lp-examples-note a { color: #FF8585; }

.sfx-lp-example[role="button"] { cursor: pointer; }
.sfx-lp-example-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; border-radius: 50%; z-index: 3;
  background: rgba(20,22,28,.7); border: 1px solid rgba(255,255,255,.3); color: #fff;
  backdrop-filter: blur(3px);
  transition: background 220ms ease, transform 220ms ease, border-color 220ms ease;
}
.sfx-lp-example-play svg { width: 1.4rem; height: 1.4rem; margin-left: .15rem; }
.sfx-lp-example:hover .sfx-lp-example-play {
  background: #FF8585; border-color: #FF8585; color: #191b1f;
  transform: translate(-50%, -50%) scale(1.06);
}
.sfx-lp-example-label { display: flex; flex-direction: column; gap: .2rem; }
.sfx-lp-example-cat {
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.sfx-lp-example-title { font-size: .98rem; font-weight: 500; line-height: 1.35; }
.sfx-lp-example-more {
  position: absolute; top: .8rem; right: .8rem; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: rgba(20,22,28,.72); border: 1px solid rgba(255,255,255,.22); color: #fff;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.sfx-lp-example-more svg { width: 1rem; height: 1rem; }
.sfx-lp-example-more:hover {
  background: #FF8585; border-color: #FF8585; color: #191b1f; transform: translateY(-2px);
}

body.sfx-lp-lightbox-open { overflow: hidden; }
.sfx-lp-lightbox {
  position: fixed; inset: 0; z-index: 2147483000;
  display: none; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8,9,12,.9);
}
.sfx-lp-lightbox.is-open { display: flex; }
.sfx-lp-lightbox-panel { width: min(70rem, 100%); }
.sfx-lp-lightbox-media {
  position: relative; aspect-ratio: 16/9; border-radius: 1rem; overflow: hidden; background: #000;
}
.sfx-lp-lightbox-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sfx-lp-lightbox-bar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  margin-top: 1.1rem; flex-wrap: wrap;
}
.sfx-lp-lightbox-bar h2 { margin: 0 0 .2rem; font-size: 1.15rem; font-weight: 500; color: #fff; }
.sfx-lp-lightbox-bar p { margin: 0; font-size: .85rem; color: rgba(255,255,255,.55); }
.sfx-lp-lightbox-actions { display: flex; align-items: center; gap: .8rem; }
.sfx-lp-lightbox-link {
  padding: .6rem 1.1rem; border: 1px solid rgba(255,255,255,.24); border-radius: 999px;
  color: #fff !important; font-size: .9rem; text-decoration: none;
  transition: border-color 200ms ease, background 200ms ease;
}
.sfx-lp-lightbox-link:hover { border-color: #FF8585; background: rgba(255,133,133,.12); }
/* !important: .elementor-kit-4 button setzt sitewide Hintergrund, Radius und
   ein grosses asymmetrisches Padding bei gleicher Spezifitaet. */
.sfx-lp-lightbox-close {
  display: flex; align-items: center; justify-content: center;
  width: 2.4rem !important; height: 2.4rem !important; padding: 0 !important;
  border-radius: 50% !important; background: #fff !important; color: #14161c !important;
  border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Case-Strecke: Kundengeschichten mit Umfang der Zusammenarbeit. Ersetzt den
   frueheren zweiten Thumbnail-Block "Verwandte Arbeiten" und unterscheidet
   sich bewusst grafisch davon (Zeilen statt Karten, Bild alternierend).
   --------------------------------------------------------------------------- */
.sfx-lp-caserows { background: rgba(255,255,255,.02); }
.sfx-lp-case-rows { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.4rem); margin-top: 2.4rem; }
.sfx-lp-case-row {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(1.6rem, 4vw, 3rem); align-items: center;
}
.sfx-lp-case-row.is-flipped .sfx-lp-case-row-media { order: 2; }
.sfx-lp-case-row-media { border-radius: 1rem; overflow: hidden; background: #14161c; aspect-ratio: 4/3; }
.sfx-lp-case-row-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(88%) brightness(.9); transition: filter 400ms ease, transform 400ms ease;
}
.sfx-lp-case-row:hover .sfx-lp-case-row-media img { filter: saturate(100%) brightness(1); transform: scale(1.03); }
.sfx-lp-case-row-media.is-textonly {
  display: flex; align-items: center; justify-content: center; padding: 1.4rem;
  background: linear-gradient(140deg, #1b1d24 0%, #14161c 60%, #201a1a 100%);
  border: 1px solid rgba(255,255,255,.07);
}
.sfx-lp-case-row-media.is-textonly span {
  font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 500; letter-spacing: -.02em;
  color: rgba(255,255,255,.9); text-align: center; line-height: 1.15;
}
.sfx-lp-case-row-cat {
  margin: 0 0 .5rem; font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #FF8585;
}
.sfx-lp-case-row-text h3 {
  margin: 0 0 .8rem; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 400;
  letter-spacing: -.015em; line-height: 1.2; color: #fff;
}
.sfx-lp-case-row-text p { margin: 0; font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.75); }
.sfx-lp-case-row-stats {
  list-style: none; margin: 1.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem;
}
.sfx-lp-case-row-stats li {
  padding: .38rem .85rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  color: rgba(255,255,255,.66); font-size: .8rem;
}
@media (max-width: 800px) {
  .sfx-lp-case-row, .sfx-lp-case-row.is-flipped { grid-template-columns: 1fr; }
  .sfx-lp-case-row.is-flipped .sfx-lp-case-row-media { order: initial; }
  .sfx-lp-examples-set.is-count-2, .sfx-lp-examples-set.is-count-3 { grid-template-columns: 1fr; }
}

/* Additiv eingehaengte Bausteine auf den Original-Elementor-Solutions-Seiten
   (scripts/legacy-solutions-inject.py). Dort fehlt der .sfx-lp-Wrapper der
   nativen Seiten, also Farb- und Typo-Kontext hier selbst mitbringen. */
.sfx-lp-legacy { background: #1F1F1F; color: #fff; }
.sfx-lp-legacy-cta { text-align: left; }
.sfx-lp-legacy-cta h2 {
  margin: 0 0 .8rem; font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 400;
  letter-spacing: -.015em; color: #fff;
}
.sfx-lp-legacy-cta p { margin: 0 0 1.8rem; max-width: 44rem; font-size: 1.02rem; line-height: 1.7; color: rgba(255,255,255,.75); }

/* Flexbox-Falle: die additiv eingehaengten Bloecke sitzen auf den
   Elementor-Seiten in einem Flex-Container. Ein Flex-Item hat
   min-width:auto und schrumpft deshalb NICHT unter seine
   min-content-Breite -- die horizontalen Streifen (bis zu 12
   Styleframes bzw. Beispielkarten nebeneinander) haben das Layout
   damit auf 999px aufgeblaeht. Auf einem 390px-Geraet skalierte der
   Browser die ganze Seite herunter (gemessen: layout viewport 1059px
   auf /werbespot). min-width:0 erlaubt das Schrumpfen, das
   overflow-x:auto der Streifen uebernimmt dann wieder das Scrollen. */
.sfx-lp-legacy,
.sfx-blog-related,
.sfx-lp-caserows,
.sfx-lp-examples,
.sfx-lp-legacy > section {
  min-width: 0;
  max-width: 100%;
}
.sfx-lp-examples-carousel,
.sfx-lp-examples-wrap,
.sfx-lp-examples-set,
.sfx-blog-related-track,
.sfx-blog-related-wrap,
.sfx-lp-frames-wrap {
  min-width: 0;
}

/* Kein horizontales Wackeln auf dem Handy.
   Auf den vom Live-Stand uebernommenen Solutions-Seiten stehen mehrere
   Original-Elementor-Elemente unter 767px breiter als das Fenster: der
   Swiper-Wrapper samt naechster Slide, zwei Elementor-Container (54d981b,
   6150b56/df95bd4) und die schwebenden Kontakt-Buttons. Verifiziert, dass das
   NICHT von den neuen Bloecken kommt -- /eventfilm und /tourismusfilm haben
   inhaltlich keine Aenderung bekommen und zeigen es genauso, und alle
   Uebertreter stecken schon im urspruenglichen Markup.
   Statt an diesen Original-Elementen zu drehen (Design der uebernommenen
   Seiten bleibt unangetastet) wird nur der Seiten-Scroll unterbunden.
   overflow-x:clip statt hidden -- hidden auf html/body macht daraus einen
   Scroll-Container und bricht position:sticky. */
@media (max-width: 900px) {
  html { overflow-x: clip; }
  body { overflow-x: clip; max-width: 100%; }
}

/* Abspielbare Case-Zeile: dasselbe Muster wie die Beispielkarten. */
.sfx-lp-case-row-media.is-playable { position: relative; cursor: pointer; }
.sfx-lp-case-row-media.is-playable img { transition: transform 400ms ease, filter 400ms ease; filter: saturate(88%) brightness(.86); }
.sfx-lp-case-row-media.is-playable:hover img { transform: scale(1.02); filter: saturate(100%) brightness(1); }
.sfx-lp-case-row-media.is-playable .sfx-lp-example-play { pointer-events: none; }
@media (hover: none), (pointer: coarse), (max-width: 767px) {
  .sfx-lp-case-row-media.is-playable img { filter: saturate(100%) brightness(1); }
}

/* Motive, bei denen der Beschnitt die Aussage kaputt macht (technische
   Darstellungen), werden vollstaendig gezeigt statt formatfuellend. */
.sfx-lp-case-row-media.is-contain { background: #14161c; display: flex; align-items: center; }
.sfx-lp-case-row-media.is-contain img { object-fit: contain; width: 100%; height: 100%; }

/* One-Stop-Abschnitt: Aussage plus Beleg, ohne weitere Kachelreihe. */
.sfx-lp-onestop { background: rgba(255,255,255,.03); }
.sfx-lp-onestop-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
.sfx-lp-onestop h2 { margin: .4rem 0 1rem; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 500; letter-spacing: -.015em; }
.sfx-lp-onestop-text > p { margin: 0 0 1.8rem; font-size: 1.04rem; line-height: 1.7; color: rgba(255,255,255,.78); }
.sfx-lp-onestop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.sfx-lp-onestop-list li { display: grid; gap: .25rem; padding-left: 1.5rem; position: relative; }
.sfx-lp-onestop-list li::before {
  content: ""; position: absolute; left: 0; top: .55rem;
  width: .5rem; height: .5rem; border-radius: 50%; background: #FF8585;
}
.sfx-lp-onestop-list b { font-weight: 500; color: #fff; }
.sfx-lp-onestop-list span { font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.68); }
.sfx-lp-onestop-media { border-radius: 1.1rem; overflow: hidden; aspect-ratio: 4/3; }
.sfx-lp-onestop-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .sfx-lp-onestop-grid { grid-template-columns: 1fr; }
  .sfx-lp-onestop-media { order: -1; aspect-ratio: 16/9; }
}

/* Fotoalben: die Aufnahme steht gross, der Text sitzt darauf. Auf einer Seite
   ueber Fotoproduktion waere eine Reihe kleiner Thumbnails ein Widerspruch
   zur eigenen Aussage. */
.sfx-lp-album-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.4rem; margin-top: 2.2rem;
}
.sfx-lp-album {
  position: relative; overflow: hidden; border-radius: 1.1rem; cursor: pointer;
  aspect-ratio: 4/5; background: #14161c;
}
.sfx-lp-album:first-child, .sfx-lp-album:nth-child(4) { grid-column: span 2; aspect-ratio: 16/10; }
.sfx-lp-album img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(92%) brightness(.82);
  transition: transform 600ms cubic-bezier(.2,.7,.2,1), filter 400ms ease;
}
.sfx-lp-album:hover img, .sfx-lp-album:focus-visible img { transform: scale(1.04); filter: saturate(100%) brightness(1); }
.sfx-lp-album-info {
  position: absolute; inset: auto 0 0 0; padding: 1.6rem 1.5rem 1.4rem; z-index: 2;
  background: linear-gradient(0deg, rgba(0,0,0,.86) 12%, transparent 92%);
}
.sfx-lp-album-info h3 { margin: 0 0 .3rem; font-size: 1.16rem; font-weight: 500; color: #fff; }
.sfx-lp-album-info p { margin: 0 0 .6rem; font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.72); }
.sfx-lp-album-count {
  display: inline-block; padding: .28rem .7rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.24); font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.82);
}
@media (max-width: 760px) {
  .sfx-lp-album:first-child, .sfx-lp-album:nth-child(4) { grid-column: auto; aspect-ratio: 4/5; }
}

/* Betrachter */
body.sfx-lp-album-open { overflow: hidden; }
.sfx-lp-album-view {
  position: fixed; inset: 0; z-index: 2147483000; display: none;
  align-items: center; justify-content: center; gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem); background: rgba(8,9,12,.95);
}
.sfx-lp-album-view.is-open { display: flex; }
.sfx-lp-album-view figure { margin: 0; max-width: min(72rem, 100%); max-height: 100%; text-align: center; }
.sfx-lp-album-view img {
  max-width: 100%; max-height: calc(100vh - 9rem); border-radius: .7rem;
  object-fit: contain; display: block; margin: 0 auto;
}
.sfx-lp-album-view figcaption {
  display: flex; justify-content: center; gap: 1rem; margin-top: .9rem;
  font-size: .92rem; color: rgba(255,255,255,.7);
}
.sfx-lp-album-view figcaption .z { color: rgba(255,255,255,.45); }
.sfx-lp-album-close, .sfx-lp-album-nav {
  border: 1px solid rgba(255,255,255,.2) !important; background: rgba(255,255,255,.08) !important;
  color: #fff !important; border-radius: 50% !important; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0 !important;
  transition: background 200ms ease;
}
.sfx-lp-album-close:hover, .sfx-lp-album-nav:hover { background: rgba(255,255,255,.18) !important; }
.sfx-lp-album-close { position: absolute; top: 1.2rem; right: 1.2rem; width: 2.6rem; height: 2.6rem; font-size: 1.5rem; line-height: 1; }
.sfx-lp-album-nav { flex: 0 0 auto; width: 3rem; height: 3rem; font-size: 1.9rem; line-height: 1; }
@media (max-width: 700px) {
  .sfx-lp-album-nav { position: absolute; bottom: 1.4rem; }
  .sfx-lp-album-nav.is-prev { left: 1.4rem; }
  .sfx-lp-album-nav.is-next { right: 1.4rem; }
}

/* Zweite Beispielzeile schliesst direkt an die erste an -- sie gehoert zur
   selben Aussage, nur mit anderem Publikum. */
.sfx-lp-examples.is-second { padding-top: 0; }
.sfx-lp-examples.is-second h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }

/* Kennzahlenreihe */
.sfx-lp-stats { padding-top: 0; }
.sfx-lp-stats ul {
  list-style: none; margin: 0; padding: 2rem 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.sfx-lp-stats li { display: grid; gap: .3rem; }
.sfx-lp-stats b {
  font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 400; line-height: 1;
  letter-spacing: -.025em; color: #fff;
  /* Kennzahlen sind manchmal ganze Woerter ("1 Ansprechpartner"). In der
     schmalen Telefonspalte ragte das ueber den Rand hinaus -- Trennung
     erlauben statt die Zahl kleiner zu setzen. */
  overflow-wrap: break-word; hyphens: auto;
}
@media (max-width: 560px) {
  .sfx-lp-stats b { font-size: 1.75rem; line-height: 1.1; }
}
.sfx-lp-stats span { font-size: .86rem; line-height: 1.5; color: rgba(255,255,255,.58); }

/* Leistungsumfang in Spalten */
.sfx-lp-steps h2 { margin: .4rem 0 .9rem; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 500; letter-spacing: -.015em; }
.sfx-lp-step-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem; margin-top: 2.2rem;
}
.sfx-lp-step {
  padding: 1.8rem 1.6rem; border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem; background: rgba(255,255,255,.02);
  transition: border-color 260ms ease, background-color 260ms ease;
}
.sfx-lp-step:hover { border-color: rgba(255,133,133,.35); background: rgba(255,255,255,.04); }
.sfx-lp-step-num {
  display: block; margin-bottom: .8rem; font-size: .8rem; letter-spacing: .14em;
  color: #FF8585;
}
.sfx-lp-step h3 { margin: 0 0 .6rem; font-size: 1.12rem; font-weight: 500; color: #fff; }
.sfx-lp-step p { margin: 0 0 1rem; font-size: .94rem; line-height: 1.62; color: rgba(255,255,255,.72); }
.sfx-lp-step ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.sfx-lp-step li { position: relative; padding-left: 1.1rem; font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.62); }
.sfx-lp-step li::before { content: ""; position: absolute; left: 0; top: .5rem; width: .35rem; height: .35rem; border-radius: 50%; background: rgba(255,133,133,.7); }
.sfx-lp-steps-cta { margin-top: 2.2rem; }
.sfx-lp-onestop-link { margin-top: 1.8rem; }