/* Branchen-Landingpages nutzen bewusst das Raster von /spreadfilm.
   Die Datei ergänzt nur die branchenspezifischen Inhalte; Header, Navigation
   und Footer bleiben vollständig im gemeinsamen Website-System. */
.sfx-industry { --industry-ink:#1f1f1f; --industry-salmon:#ff8585; overflow:clip; }
.sfx-industry *, .sfx-industry *::before, .sfx-industry *::after { box-sizing:border-box; }
.sfx-industry .sfx-lp-hero-eyebrow { color:var(--industry-salmon); }
.sfx-industry .sfx-lp-hero-eyebrow::before { background:currentColor; }

/* Hero: exakt dieselbe linke Textachse und Dichte wie /spreadfilm. */
.sfx-industry .sf-spreadfilm-hero-copy h1 { max-width:13.2ch; font-size:clamp(2.8rem,5vw,84px); }
.sfx-industry-claim { max-width:38rem; margin:0 0 1rem; color:var(--industry-salmon); font-size:clamp(1.1rem,1.85vw,1.5rem); line-height:1.35; }
.sfx-industry .sf-spreadfilm-hero-lead { max-width:52rem; }
.sfx-industry-hero-reel video { object-position:50% center; }
.sfx-industry .sf-spreadfilm-hero-benefits { width:min(100%,48rem); }

/* Heller Einstieg und vier Themen folgen dem /spreadfilm-Modulprinzip. */
.sfx-industry .sf-spreadfilm-manifesto .sfx-lp-hero-eyebrow,
.sfx-industry .sf-spreadfilm-rollout .sfx-lp-hero-eyebrow,
.sfx-industry .sf-spreadfilm-studio .sfx-lp-hero-eyebrow { color:#a53d48; }
.sfx-industry .sf-spreadfilm-manifesto-grid h2 { max-width:16ch; }
.sfx-industry .sf-spreadfilm-manifesto-grid p { max-width:42rem; }
.sfx-industry .sf-spreadfilm-rollout-grid { margin-top:3.5rem; }
/* Die fortlaufenden Nummern liegen auf hellem Papier: der dunklere Markenrotton
   wahrt die gestalterische Hierarchie und erfüllt den AA-Kontrast auch mobil. */
.sfx-industry .sf-spreadfilm-rollout-grid > article > span { color:#a53d48; }

/* Referenzen: das kompakte, gestaffelte Raster der Spreadfilm-Seite statt
   übergroßer Vollbreiten-Videos. */
.sfx-industry .sf-spreadfilm-reference-grid { margin-top:3.5rem; }
.sfx-industry .sf-spreadfilm-reference-grid .sfx-lp-example { border:1px solid rgba(255,255,255,.12); }

/* Sechs Kapitel des bestehenden Branchenreels: nur Vorschaubilder laden;
   der Vimeo-Player entsteht erst nach einer bewussten Auswahl. */
.sfx-industry-branch-reel { padding:clamp(4.8rem,9vw,8rem) clamp(1.4rem,6vw,6rem); background:#17181c; color:#fff; }
.sfx-industry-branch-reel .sf-spreadfilm-section-head { align-items:end; }
.sfx-industry-branch-reel .sfx-lp-hero-eyebrow { color:var(--industry-salmon); }
.sfx-industry-branch-reel .sf-spreadfilm-section-head h2 { max-width:16ch; }
.sfx-industry-branch-reel .sf-spreadfilm-section-head > p { max-width:40rem; margin:0; color:rgba(255,255,255,.68); font-size:1rem; line-height:1.65; }
.sfx-industry-reel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.7rem,1.2vw,1.15rem); margin-top:clamp(2.5rem,5vw,4rem); }
.sfx-industry-reel-card { position:relative; isolation:isolate; display:block; min-width:0; aspect-ratio:16 / 10; overflow:hidden; padding:0; border:1px solid rgba(255,255,255,.16); border-radius:1rem; background:#111216; color:#fff; font:inherit; text-align:left; cursor:pointer; box-shadow:0 1.5rem 3rem rgba(0,0,0,.16); transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .22s ease,box-shadow .3s ease; }
.sfx-industry-reel-card > img { position:absolute; z-index:-3; inset:0; display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.93) brightness(.82); transform:scale(1.01); transition:transform .8s cubic-bezier(.22,1,.36,1),filter .4s ease; }
.sfx-industry-reel-shade { position:absolute; z-index:-2; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(7,8,10,.04) 18%,rgba(7,8,10,.15) 44%,rgba(7,8,10,.94) 100%); }
.sfx-industry-reel-card > strong { position:absolute; right:4.6rem; bottom:clamp(1rem,2vw,1.45rem); left:clamp(1rem,2vw,1.55rem); color:#fff; font-size:clamp(1.2rem,1.8vw,1.75rem); font-weight:500; line-height:1.08; letter-spacing:-.015em; }
.sfx-industry-reel-play { position:absolute; right:clamp(.9rem,1.8vw,1.35rem); bottom:clamp(.9rem,1.8vw,1.25rem); display:grid; width:clamp(2.8rem,3.6vw,3.5rem); height:clamp(2.8rem,3.6vw,3.5rem); place-items:center; border:1px solid rgba(255,255,255,.44); border-radius:50%; background:rgba(17,18,22,.44); color:#fff; backdrop-filter:blur(8px); transition:background .22s ease,color .22s ease,border-color .22s ease,transform .3s cubic-bezier(.34,1.56,.64,1); }
.sfx-industry-reel-play svg { width:1.35rem; height:1.35rem; margin-left:.12rem; }
.sfx-industry-reel-card:hover,.sfx-industry-reel-card:focus-visible { border-color:rgba(255,255,255,.42); box-shadow:0 2rem 4rem rgba(0,0,0,.3); transform:translateY(-5px); }
.sfx-industry-reel-card:hover > img,.sfx-industry-reel-card:focus-visible > img { filter:saturate(1.04) brightness(.94); transform:scale(1.045); }
.sfx-industry-reel-card:hover .sfx-industry-reel-play,.sfx-industry-reel-card:focus-visible .sfx-industry-reel-play { border-color:var(--industry-salmon); background:var(--industry-salmon); color:var(--industry-ink); transform:scale(1.07); }
.sfx-industry-reel-card:focus-visible { outline:3px solid var(--industry-salmon); outline-offset:3px; }
.sfx-industry-reel-stage { position:relative; overflow:hidden; margin-top:2.5rem; border:1px solid rgba(255,255,255,.14); border-radius:1rem; background:#050607; aspect-ratio:16 / 9; box-shadow:0 1.5rem 3rem rgba(0,0,0,.24); }
.sfx-industry-reel-stage[hidden] { display:none; }
.sfx-industry-reel-player,.sfx-industry-reel-player iframe { display:block; width:100%; height:100%; border:0; }
.sfx-industry-reel-close { position:absolute; z-index:2; top:.8rem; right:.8rem; display:grid; width:2.6rem; height:2.6rem; padding:0; border:1px solid rgba(255,255,255,.25); border-radius:50%; place-items:center; background:rgba(20,21,24,.78); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; }
.sfx-industry-reel-close:hover,.sfx-industry-reel-close:focus-visible { border-color:var(--industry-salmon); background:var(--industry-salmon); color:var(--industry-ink); }
.sfx-industry-reel-close:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.sfx-industry-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Die branchenspezifischen Formatlinks bleiben lesbar, sitzen aber im
   gleichen zweispaltigen Abschnitts-Raster wie auf /spreadfilm. */
.sfx-industry-services .sfx-lp-hero-eyebrow { color:var(--industry-salmon); }
.sfx-industry-service-list { display:grid; margin-top:-.45rem; }
.sfx-industry-service { display:grid; grid-template-columns:2.35rem minmax(0,1fr) auto; gap:.7rem; align-items:center; min-height:5.45rem; padding:1rem 0; border-top:1px solid rgba(255,255,255,.18); color:#fff!important; text-decoration:none; }
.sfx-industry-service:last-child { border-bottom:1px solid rgba(255,255,255,.18); }
.sfx-industry-service > span { color:var(--industry-salmon); font-size:.7rem; letter-spacing:.1em; }
.sfx-industry-service strong,.sfx-industry-service small { display:block; }
.sfx-industry-service strong { font-size:1.1rem; font-weight:500; line-height:1.2; }
.sfx-industry-service small { margin-top:.25rem; color:rgba(255,255,255,.62); font-size:.82rem; line-height:1.4; }
.sfx-industry-service i { color:var(--industry-salmon); font-size:1.18rem; font-style:normal; transition:transform .18s ease; }
.sfx-industry-service:hover i,.sfx-industry-service:focus-visible i { transform:translate(3px,-3px); }

/* Prozess und Kontakt halten dieselbe visuelle Hierarchie wie die Vorlage. */
.sfx-industry-production .sf-spreadfilm-section-head h2 { max-width:20ch; }
.sfx-industry-production .sf-spreadfilm-rollout-grid { margin-top:3.5rem; }
.sfx-industry-contact-grid { display:grid; grid-template-columns:minmax(0,1.03fr) minmax(20rem,.82fr); gap:clamp(2rem,7vw,6rem); align-items:stretch; padding:clamp(1.5rem,4vw,3rem); border:1px solid rgba(31,31,31,.22); border-radius:1.1rem; background:rgba(255,255,255,.12); }
.sfx-industry-contact-copy { align-self:center; }
.sfx-industry-contact-copy .sfx-lp-hero-eyebrow { color:var(--industry-ink); }
.sfx-industry-contact-copy h2 { max-width:17ch; color:var(--industry-ink); }
.sfx-industry-contact-copy > p:not(.sfx-lp-hero-eyebrow) { max-width:42rem; margin:1.3rem 0 1.7rem; color:#44353a; font-size:1rem; line-height:1.68; }
.sfx-industry-contact-copy > small { display:block; margin-top:.9rem; color:#44353a; font-size:.82rem; }
.sfx-industry-contact .sfx-lp-cta { background:#1f1f1f!important; color:#fff!important; }
.sfx-industry-contact .sfx-lp-cta:hover { background:#303030!important; }
.sfx-industry-consultant { position:relative; min-height:29rem; overflow:hidden; border-radius:.9rem; background:#14161c; color:#fff; }
.sfx-industry-consultant::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,transparent 48%,rgba(8,10,14,.94) 100%); pointer-events:none; }
.sfx-industry-consultant-media,.sfx-industry-consultant-media img,.sfx-industry-consultant-media video { position:absolute; inset:0; width:100%; height:100%; }
.sfx-industry-consultant-media { overflow:hidden; }
.sfx-industry-consultant-media img,.sfx-industry-consultant-media video { display:block; object-fit:cover; object-position:50% 50%; filter:saturate(.92) contrast(1.03); }
.sfx-industry-consultant-media video { opacity:0; transform:scale(1.02); transition:opacity .3s ease,transform .8s cubic-bezier(.22,1,.36,1); }
.sfx-industry-consultant.is-video-ready .sfx-industry-consultant-media video { opacity:1; }
.sfx-industry-consultant.is-video-ready .sfx-industry-consultant-media img { opacity:0; }
.sfx-industry-consultant-label { position:absolute; z-index:2; right:1.4rem; bottom:1.35rem; left:1.4rem; display:flex; flex-direction:column; }
.sfx-industry-consultant-label small { margin-bottom:.38rem; color:var(--industry-salmon); font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.sfx-industry-consultant-label strong { font-size:1.45rem; font-weight:500; line-height:1.12; }
.sfx-industry-consultant-label span { margin-top:.28rem; color:rgba(255,255,255,.68); font-size:.86rem; }
.sfx-industry-faq { background:#1f1f1f; }

@media (max-width:900px) {
  .sfx-industry .sf-spreadfilm-rollout-grid { grid-template-columns:1fr; }
  .sfx-industry .sf-spreadfilm-rollout-grid article { min-height:0; padding:1.35rem 0; border-right:0; border-top:1px solid rgba(25,27,31,.16); }
  .sfx-industry .sf-spreadfilm-rollout-grid article:first-child { border-top:0; }
  .sfx-industry .sf-spreadfilm-rollout-grid h3 { margin-top:1.7rem; }
  .sfx-industry-contact-grid { grid-template-columns:1fr; }
  .sfx-industry-consultant { min-height:27rem; }
  .sfx-industry-reel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:768px) {
  /* Bei langen Branchen-Titeln kann die sonst zentrierte Hero-Kopie in die
     wachsende Logo-Fläche geraten. Sie startet deshalb mit einer kleinen,
     festen Sicherheitszone unterhalb der Markenfläche. */
  .sfx-industry .sf-spreadfilm-hero-copy { align-self:start; margin-top:clamp(2.5rem,3vw,3rem); }
}
@media (max-width:767px) {
  .sfx-industry .sf-spreadfilm-hero-copy h1 { max-width:none; font-size:clamp(2.4rem,10vw,3.2rem); overflow-wrap:normal; word-break:normal; hyphens:auto; }
  .sfx-industry-claim { margin-bottom:.8rem; }
}
@media (max-width:640px) {
  .sfx-industry-contact-grid { padding:1.15rem; border-radius:.8rem; }
  .sfx-industry-contact-copy h2 { max-width:18ch; }
  .sfx-industry-consultant { min-height:24rem; }
  .sfx-industry-service { grid-template-columns:2rem minmax(0,1fr) auto; }
  .sfx-industry-branch-reel { padding-top:4.5rem; padding-bottom:4.5rem; }
  .sfx-industry-reel-grid { grid-template-columns:1fr; }
  .sfx-industry-reel-card { border-radius:.8rem; }
  .sfx-industry-reel-stage { border-radius:.8rem; }
}