/* Bildschirme: drei Schritte, echte Folien im Raster */
.bs-schritte{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bs-schritte li{background:#1E1E1E;border-radius:8px;padding:26px}
.bs-schritte .n{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.bs-schritte h3{font-size:20px;color:#fff;margin:10px 0 8px}
.bs-schritte p{font-size:15px;color:#A3A3A3;margin:0}
.bs-folien{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px}
.bs-folien figure{margin:0;display:flex;flex-direction:column;gap:12px}
.bs-folien img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block;box-shadow:0 0 0 1px #2A2A2A,0 30px 60px -30px rgba(0,0,0,.9)}
.bs-folien figcaption{font-size:15px;color:#A3A3A3}
.bs-folien figcaption b{color:#fff}
html.ani .bs-folien figure{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
html.ani .da .bs-folien figure{opacity:1;transform:none}
html.ani .da .bs-folien figure:nth-child(2){transition-delay:.1s}
html.ani .da .bs-folien figure:nth-child(3){transition-delay:.2s}
html.ani .da .bs-folien figure:nth-child(4){transition-delay:.3s}
#extras{padding-top:24px!important}
@media (max-width:760px){.bs-schritte,.bs-folien{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html.ani .bs-folien figure{opacity:1;transform:none}}
/* Hero-Test: schwarze Buehne mit Fernseher-Mockup statt Foto; die vier echten Folien wechseln alle 4 s */
/* Hero ohne Foto: Text mittig oben, darunter gross der Fernseher mit den echten Folien */
.sc-gbuehne.bs-schwarz{background:#000;height:auto;padding:clamp(40px,4.5vw,64px) clamp(20px,5vw,72px) clamp(40px,5vw,64px);display:flex;flex-direction:column;align-items:center}
.sc-gbuehne.bs-schwarz::after{display:none}
.bs-schwarz::before{content:"";position:absolute;left:50%;bottom:-25%;width:110%;aspect-ratio:2/1;translate:-50% 0;background:radial-gradient(closest-side,rgba(224,36,107,.32),rgba(224,36,107,0));pointer-events:none}
.bs-schwarz .sc-gtext{position:relative;left:auto;right:auto;top:auto;transform:none;max-width:1000px;text-align:center}
.bs-schwarz .sc-gtext *{text-align:center}
.bs-schwarz .sc-gtext h1{font-size:clamp(36px,4.6vw,64px)!important}
.bs-schwarz .sc-gtext .sc-sub{max-width:36em;margin-inline:auto}
.bs-schwarz .sc-akt{justify-content:center}
.bs-tv{order:2;position:relative;width:min(100%,1080px);margin-top:clamp(36px,4.5vw,60px);perspective:1800px;opacity:0;animation:bs-tv-rein 1.1s .4s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes bs-tv-rein{from{opacity:0;transform:translateY(48px) scale(.95)}to{opacity:1;transform:none}}
/* Ambilight: dieselben Folien unscharf hinter dem Geraet, die Farbe faerbt die Buehne mit */
.bs-ambi{position:absolute;left:4%;right:4%;top:2%;height:80%;filter:blur(70px) saturate(1.5);opacity:.6;pointer-events:none}
.bs-ambi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:bs-folie 16s infinite}
.bs-geraet{position:relative;transform:rotateX(5deg);transform-origin:50% 100%}
/* schmaler Rahmen mit Metallkante, wie ein aktueller Flachbildschirm */
.bs-rahmen{position:relative;padding:clamp(5px,.55vw,8px);border-radius:clamp(8px,.9vw,12px);background:linear-gradient(180deg,#3A3A3A 0%,#141414 6%,#0B0B0B 94%,#262626 100%);box-shadow:0 0 0 1px #4A4A4A,inset 0 1px 0 rgba(255,255,255,.18),0 2px 0 #050505,0 70px 140px -50px rgba(0,0,0,.95),0 40px 80px -40px rgba(224,36,107,.35)}
.bs-screen{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:#000;box-shadow:inset 0 0 0 1px rgba(0,0,0,.8)}
.bs-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:bs-folie 16s infinite}
.bs-screen img:nth-child(1),.bs-ambi img:nth-child(1){animation-delay:0s}
.bs-screen img:nth-child(2),.bs-ambi img:nth-child(2){animation-delay:4s}
.bs-screen img:nth-child(3),.bs-ambi img:nth-child(3){animation-delay:8s}
.bs-screen img:nth-child(4),.bs-ambi img:nth-child(4){animation-delay:12s}
@keyframes bs-folie{0%{opacity:0;transform:scale(1.04)}4%,25%{opacity:1;transform:scale(1)}29%,100%{opacity:0}}
/* Taktleiste: zeigt, dass die Folien von selbst weiterlaufen */
.bs-takt{position:absolute;left:3%;right:3%;bottom:3.5%;display:flex;gap:6px;z-index:1}
.bs-takt i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden;position:relative}
.bs-takt i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0);animation:bs-takt 16s linear infinite}
.bs-takt i:nth-child(2)::after{animation-delay:4s}.bs-takt i:nth-child(3)::after{animation-delay:8s}.bs-takt i:nth-child(4)::after{animation-delay:12s}
@keyframes bs-takt{0%{transform:scaleX(0)}25%{transform:scaleX(1)}25.01%,100%{transform:scaleX(0)}}
.bs-glanz{position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 30%,rgba(255,255,255,0) 42%);pointer-events:none;z-index:2}
/* Standfuss: Hals und flache Platte mit Schatten */
.bs-fuss{position:relative;display:flex;flex-direction:column;align-items:center}
.bs-hals{width:7%;height:clamp(18px,2.6vw,38px);background:linear-gradient(90deg,#141414,#2E2E2E 45%,#141414)}
.bs-platte{width:34%;height:clamp(6px,.8vw,11px);border-radius:3px 3px 10px 10px;background:linear-gradient(180deg,#3A3A3A,#121212);box-shadow:0 1px 0 rgba(255,255,255,.12) inset}
.bs-fuss::after{content:"";position:absolute;bottom:-14px;width:52%;height:24px;background:radial-gradient(closest-side,rgba(0,0,0,.9),rgba(0,0,0,0));z-index:-1}
@media (max-width:860px){
  .sc-gbuehne.bs-schwarz{padding:40px 18px 36px}
  .bs-schwarz .sc-gtext{left:auto;right:auto;bottom:auto}
}
@media (prefers-reduced-motion:reduce){.bs-tv{opacity:1;animation:none}.bs-screen img,.bs-ambi img,.bs-takt i::after{animation:none}.bs-screen img:first-child,.bs-ambi img:first-child{opacity:1}}

/* Lange Woerter in der Hero-Ueberschrift (Bewertungsmanagement, Empfehlungsprogramm) am Handy trennen */
@media (max-width:600px){
  .bs-schwarz .sc-gtext{width:100%;min-width:0}
  .bs-schwarz .sc-titel{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
  .bs-schwarz .crumbs{white-space:normal}
}