/* Leinegrafik · Kategorieseite Bandenspots · v3
   Texte sind Webflow-Elemente (Klassen kat- und bs-). Halle, Umschalter und Videos baut bandenspots-v1.js in die Platzhalter. */
.kat{--bs-bg:#fffef8;--bs-fg:#353535;--koralle:#EA4524;--bs-linie:rgba(53,53,53,.78);--bs-fein:rgba(53,53,53,.36);--bs-hauch:rgba(53,53,53,.14);
  --bs-glas:rgba(255,254,248,.35);--bs-leer:#ecebe4;--bs-schatten:rgba(53,53,53,.22);--bs-raus:cubic-bezier(.16,1,.3,1)}
.bs-hero{--bs-bg:#262524;--bs-fg:#fffef8;--bs-linie:rgba(255,254,248,.78);--bs-fein:rgba(255,254,248,.34);--bs-hauch:rgba(255,254,248,.16);
  --bs-glas:rgba(38,37,36,.35);--bs-leer:#353331;--bs-schatten:rgba(0,0,0,.5);
  background-color:var(--bs-bg);color:var(--bs-fg);
  background-image:radial-gradient(rgba(255,254,248,.07) 1px,transparent 1.2px);background-size:22px 22px;
  padding-top:clamp(96px,9vw,132px);padding-bottom:clamp(56px,7vw,96px)}
.bs-hero .kat-h1{color:var(--bs-fg);font-size:clamp(46px,6.4vw,84px);line-height:1.02;max-width:14ch;margin-top:18px}
.bs-hero .kat-vorspann{color:var(--bs-fg);margin-top:22px}
.bs-hero .kat-vorspann a,.bs-link{color:inherit;text-decoration:underline;text-decoration-color:var(--koralle);text-decoration-thickness:1.5px;text-underline-offset:4px}
.bs-hero .kat-vorspann a:hover,.bs-link:hover{color:var(--koralle)}
.bs-hero .kat-crumb{color:rgba(255,254,248,.62)}
.bs-hero .kat-crumb-link{border-bottom-color:rgba(255,254,248,.3)}
.bs-app{display:grid;gap:clamp(24px,3.4vw,40px);margin-top:clamp(32px,4.4vw,52px)}
.bs-kopf{display:grid;margin-bottom:clamp(28px,3.6vw,44px)}
.bs-kopf .kat-vorspann{margin-top:20px}
.bs-kopf .kat-h2{max-width:18ch}
.bs-sektion{border-top:1px solid var(--bs-hauch)}
.bs-zeile{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;font-variant-numeric:tabular-nums;margin-top:12px}
.bs-video{position:relative;width:100%;background:var(--bs-leer)}
.bs-video video{display:block;width:100%;height:100%;object-fit:cover}

/* Halle */
.bs-halle{position:relative;width:100%;aspect-ratio:1200/430;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bs-halle svg,.bs-halle canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bs-halle .l{fill:none;stroke:var(--bs-linie);stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.bs-halle .f{fill:none;stroke:var(--bs-fein);stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-linecap:round}
.bs-halle .k{fill:none;stroke:var(--koralle);stroke-width:2.2;vector-effect:non-scaling-stroke}
.bs-halle .brett{fill:var(--bs-glas);stroke:var(--bs-linie);stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.bs-halle .schatten{fill:var(--bs-schatten)}
.bs-halle .arm-a{fill:none;stroke:var(--bs-fg);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.bs-halle .arm-i{fill:none;stroke:var(--bs-bg);stroke-width:6.6;stroke-linecap:round;stroke-linejoin:round}
.bs-halle .leute{fill:var(--bs-bg);stroke:var(--bs-fg);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.bs-quelle{position:absolute;left:0;top:0;width:64px;height:auto;opacity:.01;pointer-events:none;z-index:-1}

/* Umschalter */
.bs-steuer{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.bs-spots{display:flex;flex-wrap:wrap;gap:10px}
.bs-spot{position:relative;overflow:hidden;isolation:isolate;display:grid;gap:2px;text-align:left;cursor:pointer;font-family:"Exo 2",sans-serif;font-weight:300;
  color:var(--bs-fg);background:transparent;border:2px solid var(--koralle);border-radius:9px;padding:9px 18px 10px;
  transition:color .5s var(--bs-raus),border-radius .5s var(--bs-raus)}
.bs-spot strong{font-weight:500;font-size:16px;line-height:1.3}
.bs-spot small{font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.bs-spot::before{content:"";position:absolute;inset:0;background:var(--koralle);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--bs-raus)}
.bs-spot[aria-pressed="true"]{color:#fffef8;border-radius:999px}
.bs-spot[aria-pressed="true"]::before{transform:scaleX(1)}
.bs-spot:focus-visible,.bs-play:focus-visible,.bs-feld:focus-visible,.bs-ton:focus-visible{outline:2px solid var(--bs-fg);outline-offset:3px}
.bs-play{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--bs-linie);background:transparent;color:var(--bs-fg);cursor:pointer;display:grid;place-items:center;padding:0}
.bs-play svg{width:16px;height:16px;fill:currentColor}
.bs-daten{margin-left:auto;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;font-variant-numeric:tabular-nums}

/* Bande aufgeklappt / Lupe */
.bs-flach{display:grid;gap:10px}
.bs-flach-kopf{display:flex;justify-content:space-between;gap:16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.bs-streifen{position:relative;width:100%;aspect-ratio:2400/90;background:var(--bs-leer)}
.bs-streifen canvas,.bs-lupe-bild canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bs-marken{display:grid;grid-template-columns:repeat(5,1fr);border-left:1px solid var(--bs-linie)}
.bs-marken span{border-right:1px solid var(--bs-linie);padding:8px 0 0 10px;display:flex;align-items:baseline;gap:10px;font-size:13px}
.bs-marken em{font-style:normal;font-weight:200;font-size:clamp(26px,3vw,40px);line-height:1;font-variant-numeric:tabular-nums}
.bs-lupe{display:none;gap:12px}
.bs-felder{display:flex;gap:8px}
.bs-feld{flex:1;min-width:0;font-family:"Exo 2",sans-serif;font-weight:200;font-size:26px;line-height:1;color:var(--bs-fg);background:none;border:0;border-top:1.5px solid var(--bs-fein);padding:10px 0 4px;cursor:pointer;text-align:left}
.bs-feld[aria-pressed="true"]{border-top:2px solid var(--koralle);color:var(--koralle)}
.bs-lupe-bild{position:relative;width:100%;aspect-ratio:480/90;background:var(--bs-leer)}
.bs-lupe p{margin:0;font-size:13px;opacity:.75}

/* Videowand */
.bs-wand{position:relative;padding-top:clamp(44px,6vw,70px)}
.bs-wand::before,.bs-wand::after{content:"";position:absolute;top:0;height:clamp(44px,6vw,70px);width:1.5px;background:var(--bs-linie)}
.bs-wand::before{left:22%}.bs-wand::after{right:22%}
.bs-wand-rahmen{border:2px solid var(--bs-linie);padding:clamp(6px,.8vw,10px);border-radius:4px;box-shadow:0 18px 28px -18px var(--bs-schatten)}
.bs-wand-rahmen video{display:block;width:100%;aspect-ratio:4800/900;background:var(--bs-leer)}

/* Videos mit festem Format */
.bs-r-16-9{aspect-ratio:16/9}.bs-r-7040{aspect-ratio:7040/160}.bs-r-2400{aspect-ratio:2400/90}.bs-r-9-16{aspect-ratio:9/16}.bs-r-li{aspect-ratio:2000/2200}
.bs-film{box-shadow:0 22px 34px -22px var(--bs-schatten)}
.bs-ton{position:absolute;right:max(12px,1.2vw);bottom:max(12px,1.2vw);font-family:"Exo 2",sans-serif;font-size:13px;font-weight:500;color:#fffef8;background:rgba(38,37,36,.62);border:1.5px solid rgba(255,254,248,.55);border-radius:999px;padding:7px 14px;cursor:pointer}
.bs-abstand{margin-top:clamp(18px,2.4vw,28px)}

/* Formate */
.bs-orte{margin:0 0 clamp(24px,3vw,36px);font-family:"EB Garamond",Georgia,serif;font-size:clamp(20px,1.9vw,25px);line-height:1.35;max-width:52ch}
.bs-format{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.6fr);gap:12px 28px;align-items:center;padding:22px 0;border-top:1px solid var(--bs-hauch)}
.bs-format:last-child{border-bottom:1px solid var(--bs-hauch)}
.bs-zahl{font-weight:200;font-size:clamp(34px,4.4vw,56px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.bs-x{color:var(--koralle)}
.bs-was{display:grid;gap:4px}
.bs-was-titel{font-weight:500;font-size:16px}
.bs-was-text{font-size:14px;opacity:.75}
.bs-form{display:block;border:1.5px solid var(--bs-linie);width:100%}
.bs-form-2400{aspect-ratio:2400/90}.bs-form-4800{aspect-ratio:4800/900}.bs-form-7040{aspect-ratio:7040/160}

/* Social */
.bs-social{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:end}
.bs-rechts{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:end}
.bs-clip{display:grid;gap:10px;min-width:0;margin:0}
.bs-clip .bs-video{box-shadow:0 18px 30px -20px var(--bs-schatten)}
.bs-clip-name{font-weight:500;font-size:15px}
.bs-clip-unter{display:grid;gap:2px}
.bs-clip-handy .bs-clip-unter{justify-items:center;text-align:center}
.bs-handy{justify-self:center;width:min(100%,300px);border:2px solid var(--bs-fg);border-radius:38px;padding:11px;position:relative;box-shadow:0 26px 40px -26px var(--bs-schatten)}
.bs-handy::before{content:"";position:absolute;top:19px;left:50%;width:62px;height:16px;margin-left:-31px;border-radius:999px;background:var(--bs-fg);z-index:1}
.bs-handy .bs-video{border-radius:28px;overflow:hidden;box-shadow:none}
.bs-verweis{display:inline-block;margin-top:clamp(20px,2.6vw,32px);font-size:15px}

/* Abschluss */
.bs-abschluss .kat-btnreihe{margin-top:30px}

@media screen and (max-width:991px){
  .bs-format{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bs-form{grid-column:1/-1}
  .bs-social{grid-template-columns:1fr}
}
@media screen and (max-width:767px){
  .bs-flach{display:none}.bs-lupe{display:grid}
  .bs-daten{margin-left:0;width:100%}
  .bs-spot{padding:8px 14px 9px}
  .bs-rechts{grid-template-columns:1fr}
  .bs-handy{width:min(78%,280px)}
  .bs-wand::before{left:12%}.bs-wand::after{right:12%}
}
@media (prefers-reduced-motion:reduce){.bs-spot,.bs-spot::before{transition:none}}
/* v3: Abstand zwischen Videowand und Umschalter */
.bs-wandbox .bs-steuer{margin-top:clamp(22px,2.8vw,34px)}