/* ==========================================================================
   BLM Startseite
   Helles Design, die Bilder tragen die Seite. Türkis aus dem Logo ist die
   einzige Akzentfarbe: als Fläche mit dunkler Schrift, auf Fotos als Schrift.
   Für Text auf Weiß das dunklere Petrol, damit der Kontrast die WCAG-Grenze hält.
   ========================================================================== */

.blm-start {
  --ink: #15181a;
  --text: #2a2f32;
  --mute: #5b6266;
  --line: #e2e6e8;
  --grey: #f3f5f6;
  --prim: #52bfd3;
  --prim-dd: #1b6e80;
  --nacht: 8, 10, 12;
  --wrap: 1296px;
  --gutter: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.22, .9, .3, 1);
}

/* Astra-Rahmen für diese Seite aufheben */
.blm-start #content > .ast-container,
.blm-start .site-content > .ast-container { max-width: none; padding: 0; display: block; }
.blm-start .site-content { padding: 0 !important; }
.blm-start #primary { margin: 0; padding: 0; }

/* Mit Elementor gebaut: Container und Widgets ohne eigene Abstände, das Aussehen kommt von hier */
.elementor .e-con.bs { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; --margin-top: 0px; --margin-bottom: 0px; --content-width: 100%; --width: 100%; max-width: none; padding: 0; display: block; }
.elementor .bs .elementor-widget { margin: 0; --kit-widget-spacing: 0px; width: 100%; }
.blm-start .entry-header, .blm-start .ast-single-post-order { display: none; }

.bs { color: var(--text); font-family: Karla, "Segoe UI", Arial, sans-serif; font-size: 17px; line-height: 1.62; }
.bs *, .bs *::before, .bs *::after { box-sizing: border-box; }
.bs img { max-width: 100%; height: auto; display: block; }
.bs h1, .bs h2, .bs h3 { font-family: Rubik, "Segoe UI", Arial, sans-serif; font-weight: 700; color: var(--ink); margin: 0; }
.bs h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1; text-transform: uppercase; letter-spacing: -.035em; text-wrap: balance; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.bs h3 { font-size: 1.15rem; line-height: 1.25; letter-spacing: -.01em; }
.bs p { margin: 0 0 1em; max-width: 62ch; }
.bs a { color: var(--prim-dd); }
.bs a:hover { color: var(--ink); }
.bs :focus-visible { outline: 3px solid var(--prim); outline-offset: 3px; }
.bs svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bs-unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bs-wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.bs section { padding: clamp(80px, 11vw, 160px) 0; }

.bs-kopf { margin-bottom: clamp(32px, 4.5vw, 64px); }
.bs-kopf-knoepfe { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.bs-marke {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px !important;
  font: 500 .8rem/1 Karla, Arial, sans-serif; text-transform: uppercase; letter-spacing: .22em; color: var(--prim-dd);
}
.bs-marke::before { content: ""; width: 34px; height: 2px; background: var(--prim); }

/* ---------- Knöpfe ---------- */
.bs-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--prim); color: #fff !important; text-decoration: none;
  padding: 18px 28px; min-height: 58px; border: 0; border-radius: 2px; cursor: pointer;
  font: 500 13.5px/1 Karla, Arial, sans-serif; text-transform: uppercase; letter-spacing: .15em;
  transition: background .25s var(--ease), color .25s var(--ease), gap .25s var(--ease);
}
.bs-btn svg { width: 15px; height: 15px; flex: 0 0 15px; transition: transform .3s var(--ease); }
.bs-btn:hover, .bs-btn:focus-visible { background: #fff; color: var(--ink) !important; gap: 16px; }
.bs-btn:hover svg { transform: translate(2px, -2px); }
.bs .bs-btn-hell { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); color: #fff !important; }
.bs .bs-btn-hell:hover, .bs .bs-btn-hell:focus-visible { background: #fff; box-shadow: none; color: var(--ink) !important; }
.bs .bs-btn-linie { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink) !important; letter-spacing: .06em; }
.bs-btn-linie:hover, .bs-btn-linie:focus-visible { background: var(--ink); color: #fff !important; }

/* ==========================================================================
   BÜHNE: Vollbild mit Überblendung
   ========================================================================== */
.bs-hero {
  position: relative; overflow: hidden; color: #fff; background: rgb(var(--nacht));
  height: calc(100svh - var(--kopf, 120px)); min-height: 600px; max-height: 1080px;
  padding: 0 !important; display: flex; flex-direction: column; justify-content: flex-end;
}
.bs-hero-bilder { position: absolute; inset: 0; }
.bs-dia { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s ease; }
.bs-dia.ist-aktiv { opacity: 1; }
.bs-hero-bild {
  width: 100%; height: 100% !important; object-fit: cover;
  scale: 1.08; transition: scale 9s cubic-bezier(.2, .6, .3, 1);
}
.bs-dia.ist-aktiv .bs-hero-bild { scale: 1; }
.bs-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(var(--nacht), .86) 0%, rgba(var(--nacht), .4) 38%, rgba(var(--nacht), 0) 62%),
    linear-gradient(90deg, rgba(var(--nacht), .5) 0%, rgba(var(--nacht), 0) 58%);
}

.bs-hero-inhalt { position: relative; z-index: 2; padding-bottom: clamp(28px, 4vw, 48px); }
.bs-h1 { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 24px); color: #fff !important; }
.bs-h1-klein {
  display: flex; align-items: center; gap: 14px;
  font: 500 clamp(.8rem, 1vw, .92rem)/1.2 Karla, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .22em; color: rgba(255,255,255,.86);
}
.bs-h1-klein::before { content: ""; width: 34px; height: 2px; background: var(--prim); }
.bs-h1-gross {
  display: block;
  font-size: clamp(2rem, 8.2vw, 8.4rem); line-height: .96;
  text-transform: uppercase; letter-spacing: -.045em;
}
/* "special moments" bleibt eine Zeile; die Schriftgröße ist so bemessen, dass sie bis 360 px passt. */
.bs-h1-gross em { display: block; white-space: nowrap; font-style: normal; color: var(--prim); }

.bs-hero-fuss { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-top: clamp(22px, 3vw, 40px); }
.bs-lead { margin: 0 !important; max-width: 44ch; font-size: clamp(1rem, 1.25vw, 1.15rem); color: rgba(255,255,255,.88); }
.bs-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }

.bs-hero-leiste { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.16); }
.bs-hero-leiste-innen { display: flex; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 18px; }
.bs-takte { flex: 1; display: grid; grid-template-columns: repeat(var(--anzahl, 4), minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.bs-takt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bs-takt button { all: unset; cursor: pointer; display: block; height: 14px; position: relative; }
.bs-takt button::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: rgba(255,255,255,.25); }
.bs-takt button span { position: absolute; left: 0; top: 6px; height: 2px; width: 0; background: var(--prim); }
.bs-takt.ist-aktiv button span { animation: bs-takt var(--dauer, 6.5s) linear forwards; }
.bs-takt.ist-gesehen button span { width: 100%; background: rgba(255,255,255,.55); }
.bs-hero.ist-angehalten .bs-takt.ist-aktiv button span { animation-play-state: paused; }
.bs-takt button:focus-visible { outline-offset: 4px; }
@keyframes bs-takt { to { width: 100%; } }
.bs-takt a, .bs-takt-name {
  color: rgba(255,255,255,.6) !important; text-decoration: none; font-size: .86rem; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s;
}
.bs-takt a small { display: block; font-size: .78rem; color: rgba(255,255,255,.45); overflow: hidden; text-overflow: ellipsis; }
.bs-takt.ist-aktiv a, .bs-takt a:hover { color: #fff !important; }
/* Astra gibt jedem button Innenabstand und Mindestbreite, daher hier ausdrücklich null */
.bs .bs-pause, .bs .bs-rund { padding: 0; min-width: 0; min-height: 0; line-height: 1; box-sizing: border-box; }
.bs-pause {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.5); background: transparent; color: #fff;
  display: grid; place-items: center; transition: background .2s, color .2s;
}
.bs-pause:hover, .bs-pause:focus-visible { background: #fff; color: var(--ink); }
.bs-pause svg { width: 18px; height: 18px; }
.bs-spiel-zeichen { display: none; }
.bs-hero.ist-angehalten .bs-pause-zeichen { display: none; }
.bs-hero.ist-angehalten .bs-spiel-zeichen { display: block; fill: currentColor; }

/* ==========================================================================
   LOGOS
   ========================================================================== */
.bs-logos { padding: clamp(28px, 3.5vw, 44px) 0 !important; background: #fff; border-bottom: 1px solid var(--line); }
.bs-logos-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: center; }
.bs-logos-titel { margin: 0 !important; font-size: .8rem; text-transform: uppercase; letter-spacing: .18em; color: var(--mute); white-space: nowrap; }
.bs-logos-band { overflow: hidden; min-width: 0; display: flex; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.bs-logos-liste { display: flex; align-items: center; gap: clamp(40px, 5vw, 80px); margin: 0; padding: 0 clamp(40px, 5vw, 80px) 0 0; list-style: none; flex: 0 0 auto; animation: bs-lauf 50s linear infinite; }
.bs-logos-band:hover .bs-logos-liste { animation-play-state: paused; }
.bs .bs-logo { height: 42px; width: auto; max-width: 150px; object-fit: contain; filter: brightness(0); opacity: .4; transition: opacity .3s; }
.bs .bs-logo:hover { opacity: .8; }
@keyframes bs-lauf { to { transform: translateX(-100%); } }

/* ==========================================================================
   VERLEIH: randloses Bildraster
   ========================================================================== */
.bs-verleih { background: #fff; padding-bottom: clamp(64px, 8vw, 110px) !important; }
.bs-raster {
  list-style: none; margin: 0; padding: 0 8px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(230px, 23vw, 420px); gap: 8px;
}
.bs-platz-a { grid-column: 1 / 8;  grid-row: 1 / 3; }
.bs-platz-b { grid-column: 8 / 13; grid-row: 1; }
.bs-platz-c { grid-column: 8 / 13; grid-row: 2; }
.bs-platz-d { grid-column: 1 / 6;  grid-row: 3; }
.bs-platz-e { grid-column: 6 / 10; grid-row: 3; }
.bs-platz-f { grid-column: 10 / 13; grid-row: 3; }

.bs-kachel { position: relative; overflow: hidden; background: var(--ink); }
.bs-kachel a { position: absolute; inset: 0; display: flex; align-items: flex-end; color: #fff; text-decoration: none; }
.bs-kachel-bild { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; transition: transform 1.2s var(--ease); }
.bs-kachel a::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(var(--nacht), .78) 0%, rgba(var(--nacht), .2) 42%, rgba(var(--nacht), 0) 64%);
}
.bs-kachel:hover .bs-kachel-bild { transform: scale(1.05); }
.bs-kachel-text { position: relative; z-index: 2; padding: clamp(20px, 2.4vw, 36px); display: flex; flex-direction: column; gap: 8px; }
.bs .bs-kachel-titel { hyphens: auto; hyphenate-limit-chars: 10 4 4; color: #fff; font-size: clamp(1.7rem, 3.1vw, 3.3rem); line-height: .98; text-transform: uppercase; letter-spacing: -.035em; }
.bs-platz-a .bs-kachel-titel { font-size: clamp(2.2rem, 5vw, 5.4rem); }
.bs-kachel-kurz { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .98rem; color: rgba(255,255,255,.86); }
.bs-kachel-fakt { background: var(--prim); color: var(--ink); font-size: .82rem; font-weight: 500; padding: 4px 10px; border-radius: 2px; }
.bs-kachel-pfeil {
  position: absolute; z-index: 2; top: clamp(16px, 2vw, 28px); right: clamp(16px, 2vw, 28px);
  width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.6);
  display: grid; place-items: center; transition: background .3s, color .3s, transform .4s var(--ease);
}
.bs-kachel-pfeil svg { width: 20px; height: 20px; }
.bs-kachel:hover .bs-kachel-pfeil { background: var(--prim); border-color: var(--prim); color: var(--ink); transform: rotate(45deg); }

.bs-kachel-farbe { background: var(--prim); }
.bs-kachel-farbe a { color: var(--ink); }
.bs-kachel-farbe a::before { display: none; }
.bs .bs-kachel-farbe .bs-kachel-titel { color: var(--ink); }
.bs-kachel-farbe .bs-kachel-kurz { color: var(--ink); }
.bs-kachel-farbe .bs-kachel-pfeil { border-color: var(--ink); }
.bs-kachel-farbe:hover { background: #6fcadb; }
.bs-kachel-farbe:hover .bs-kachel-pfeil { background: var(--ink); color: #fff; }

.bs-weitere { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px; margin-top: clamp(28px, 3vw, 40px); }
.bs-weitere > span { font-size: .8rem; text-transform: uppercase; letter-spacing: .18em; color: var(--mute); }
.bs-weitere ul { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0; list-style: none; }
.bs-weitere a { color: var(--ink); text-decoration: none; font-size: 1.05rem; border-bottom: 1.5px solid var(--line); padding-bottom: 2px; transition: border-color .2s, color .2s; }
.bs-weitere a:hover { border-color: var(--prim); color: var(--prim-dd); }
.bs-weitere-alle { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.bs-weitere-alle svg { width: 14px; height: 14px; }

/* ==========================================================================
   CREW: Vollbild mit Aussage, darunter die Eckdaten
   ========================================================================== */
.bs-crew { padding: 0 !important; display: grid; background: #fff; }
.bs-crew-bild, .bs-crew-inhalt { grid-area: 1 / 1; }
.bs-crew-bild { position: relative; overflow: hidden; height: clamp(540px, 86vh, 940px); background: rgb(var(--nacht)); }
.bs-crew-bild img { position: absolute; left: 0; top: -8%; width: 100%; height: 116% !important; object-fit: cover; object-position: 50% 60%; }
.bs-crew-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--nacht), .78) 0%, rgba(var(--nacht), .35) 45%, rgba(var(--nacht), 0) 75%); }
.bs-crew-inhalt { position: relative; z-index: 2; align-self: center; color: #fff; }
.bs .bs-crew-inhalt h2 { color: #fff; font-size: clamp(2.6rem, 6.4vw, 6.4rem); line-height: .96; margin-bottom: 24px; }
.bs-crew-inhalt p { color: rgba(255,255,255,.86); font-size: clamp(1rem, 1.3vw, 1.18rem); max-width: 40ch; margin-bottom: 30px; }

.bs-fakten { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: clamp(36px, 4vw, 56px) 0; border-bottom: 1px solid var(--line); }
.bs-fakten > div { padding: 0 clamp(16px, 2vw, 32px); border-left: 1px solid var(--line); }
.bs-fakten > div:first-child { padding-left: 0; border-left: 0; }
.bs-fakten dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; color: var(--mute); margin-bottom: 8px; }
.bs-fakten dd { margin: 0; font: 700 clamp(1.3rem, 2.4vw, 2.2rem)/1.08 Rubik, Arial, sans-serif; color: var(--ink); letter-spacing: -.02em; }

/* ==========================================================================
   REFERENZEN: große Bilder seitlich
   ========================================================================== */
.bs-refs { background: #fff; }
.bs-schieber { display: flex; gap: 10px; flex: 0 0 auto; }
.bs-rund { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; }
.bs-rund svg { width: 20px; height: 20px; }
.bs-rund:hover, .bs-rund:focus-visible { background: var(--ink); color: #fff; }
.bs-rund:disabled { opacity: .25; cursor: default; background: #fff; color: var(--ink); }

.bs-refs-spur {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(300px, 62vw, 980px); gap: clamp(12px, 1.4vw, 20px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  padding: 4px max(var(--gutter), calc((100% - var(--wrap)) / 2)) 24px;
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  scrollbar-width: none;
}
.bs-refs-spur::-webkit-scrollbar { display: none; }
.bs-ref { scroll-snap-align: start; margin: 0; }
.bs-ref a { display: block; color: inherit; text-decoration: none; }
.bs-ref-bild { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--grey); }
.bs-ref-bild img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 1.2s var(--ease); }
.bs-ref a:hover .bs-ref-bild img { transform: scale(1.04); }
.bs-ref-text { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 20px; padding-top: 18px; }
.bs-ref h3 { font-size: clamp(1.2rem, 1.8vw, 1.6rem); text-transform: uppercase; letter-spacing: -.02em; }
.bs-ref-meta { grid-column: 1; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: var(--prim-dd); }
.bs-ref-mehr { grid-column: 2; grid-row: 1 / 3; align-self: center; display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink); }
.bs-ref-mehr svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.bs-ref a:hover .bs-ref-mehr svg { transform: translate(3px, -3px); }
.bs-ref-alle {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; scroll-snap-align: start;
  aspect-ratio: 16 / 10; width: clamp(240px, 26vw, 380px); padding: clamp(24px, 3vw, 40px);
  background: var(--prim); color: var(--ink) !important; text-decoration: none;
  font: 700 clamp(1.6rem, 2.6vw, 2.4rem)/1 Rubik, Arial, sans-serif; text-transform: uppercase; letter-spacing: -.03em;
  transition: background .25s;
}
.bs-ref-alle svg { width: 36px; height: 36px; }
.bs-ref-alle:hover { background: #6fcadb; color: var(--ink) !important; }
.bs-refs-fuss { margin-top: 16px; }
/* Auf dem Desktop: Abschnitt bleibt stehen, die Spur fährt beim Runterscrollen seitlich durch.
   Das Skript setzt .ist-gepinnt und die Höhe; ohne Skript bleibt die Spur wischbar. */
.bs-refs.ist-gepinnt { padding: 0 !important; }
.ist-gepinnt .bs-refs-buehne {
  position: sticky; top: var(--kopf-fest, 95px); height: calc(100vh - var(--kopf-fest, 95px)); overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.ist-gepinnt .bs-kopf { margin-bottom: clamp(20px, 3vh, 40px); }
.ist-gepinnt .bs-refs-spur {
  overflow: visible; width: max-content; scroll-snap-type: none; will-change: transform;
  grid-auto-columns: min(62vw, calc((100vh - 430px) * 1.6));
}
.ist-gepinnt .bs-ref-alle { width: min(26vw, calc((100vh - 430px) * .9)); }
.ist-gepinnt .bs-ref-bild img { animation: none; }

.bs-refs-fuss a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: .82rem; text-transform: uppercase; letter-spacing: .16em; border-bottom: 1.5px solid var(--prim); padding-bottom: 4px; }
.bs-refs-fuss svg { width: 14px; height: 14px; }

/* ==========================================================================
   ANLÄSSE
   ========================================================================== */
.bs-anlaesse { background: var(--grey); }
.bs-anl-raster { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: stretch; }
.bs-anl-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid #d3d9dc; }
.bs-anl-liste a {
  display: grid; grid-template-columns: 44px 1fr 24px; align-items: center; gap: 12px;
  padding: clamp(16px, 1.7vw, 22px) 0; border-bottom: 1px solid #d3d9dc;
  text-decoration: none; color: var(--ink); transition: opacity .35s var(--ease), color .25s;
}
.bs-anl-nr { font-size: .78rem; letter-spacing: .14em; color: var(--mute); font-variant-numeric: tabular-nums; }
.bs-anl-name { font: 700 clamp(1.3rem, 2.3vw, 2rem)/1.12 Rubik, Arial, sans-serif; letter-spacing: -.025em; }
.bs-anl-pfeil { display: grid; place-items: center; color: var(--prim-dd); transition: transform .35s var(--ease); }
.bs-anl-pfeil svg { width: 22px; height: 22px; }
/* Spot auf einen Eintrag: die anderen treten zurück */
.bs-anl-liste:hover a:not(:hover), .bs-anl-liste:focus-within a:not(:focus-visible):not(:hover) { opacity: .32; }
.bs-anl-liste a:hover .bs-anl-pfeil, .bs-anl-liste a:focus-visible .bs-anl-pfeil { transform: translate(4px, -4px); }
.bs-anl-liste a:hover .bs-anl-nr, .bs-anl-liste a:focus-visible .bs-anl-nr { color: var(--prim-dd); }

.bs-anl-rahmen { position: relative; min-height: 480px; overflow: hidden; background: var(--ink); }
.bs-anl-bild { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); }
.bs-anl-bild.ist-aktiv { opacity: 1; }
.bs-anl-bild img { width: 100%; height: 100% !important; object-fit: cover; }
.bs-anl-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--nacht), .55) 0%, rgba(var(--nacht), 0) 30%); pointer-events: none; }
.bs-anl-bildtext { position: absolute; z-index: 1; left: 24px; bottom: 20px; right: 24px; color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; }
.bs-anl-ohne { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 40px; text-align: center; background: var(--prim); color: var(--ink); font: 700 clamp(1.8rem, 3.4vw, 3rem)/1 Rubik, Arial, sans-serif; text-transform: uppercase; letter-spacing: -.03em; }

/* ==========================================================================
   REGION
   ========================================================================== */
.bs-region { background: #fff; }
.bs-reg-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 72px); }
.bs-reg-kopf > p { margin: 0 !important; color: var(--mute); font-size: 1.06rem; }
.bs-orte { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px clamp(18px, 2.4vw, 40px); border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 40px); }
.bs-orte li { display: inline-flex; align-items: flex-start; gap: 6px; }
.bs-ort { font: 700 clamp(1.6rem, 3.5vw, 3.4rem)/1.06 Rubik, Arial, sans-serif; text-transform: uppercase; letter-spacing: -.035em; color: var(--ink); }
.bs-ort-km { font-size: clamp(.72rem, .9vw, .85rem); letter-spacing: .08em; text-transform: uppercase; color: var(--prim-dd); padding-top: .5em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bs-orte .ist-sitz .bs-ort { color: var(--prim); }
.bs-klein { font-size: .85rem; color: var(--mute); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.bs-faq { background: var(--grey); }
.bs-faq-raster { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.bs-faq-raster > div:first-child { position: sticky; top: 120px; }
.bs-faq-raster > div:first-child p:not(.bs-marke) { color: var(--mute); margin: 18px 0 24px; }
.bs-fragen details { border-bottom: 1px solid #d3d9dc; }
.bs-fragen details:first-child { border-top: 1px solid #d3d9dc; }
.bs-fragen summary {
  list-style: none; cursor: pointer; position: relative; padding: 22px 52px 22px 0;
  font: 700 clamp(1.05rem, 1.5vw, 1.22rem)/1.35 Rubik, Arial, sans-serif; color: var(--ink); letter-spacing: -.01em;
}
.bs-fragen summary::-webkit-details-marker { display: none; }
.bs-chev { position: absolute; right: 4px; top: 24px; width: 22px !important; height: 22px !important; color: var(--prim-dd); transition: transform .3s var(--ease); }
.bs-fragen details[open] .bs-chev { transform: rotate(180deg); }
.bs-fragen summary:hover { color: var(--prim-dd); }
.bs-antwort { padding: 0 52px 24px 0; color: var(--text); }
.bs-antwort p { margin: 0; }

/* ==========================================================================
   KONTAKT: Bild links, Formular rechts
   ========================================================================== */
.bs-kontakt { padding: 0 !important; display: grid; grid-template-columns: 1fr 1.15fr; background: var(--grey); }
.bs-kon-bild { position: relative; overflow: hidden; min-height: 640px; background: rgb(var(--nacht)); color: #fff; display: flex; align-items: flex-end; }
.bs-kon-bild img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.bs-kon-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--nacht), .88) 0%, rgba(var(--nacht), .45) 50%, rgba(var(--nacht), .15) 100%); }
.bs-kon-bild-text { position: relative; z-index: 2; padding: clamp(32px, 5vw, 72px); width: 100%; }
.bs .bs-kon-bild-text h2 { color: #fff; font-size: clamp(2.2rem, 4.2vw, 4rem); margin-bottom: clamp(24px, 3vw, 40px); }
.bs-kon-daten { margin: 0; }
.bs-kon-daten > div { padding: 14px 0; border-top: 1px solid rgba(255,255,255,.2); }
.bs-kon-daten dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.65); margin-bottom: 4px; }
.bs-kon-daten dd { margin: 0; font-size: 1.1rem; color: #fff; }
.bs-kon-daten a { color: #fff !important; text-decoration: none; }
.bs-kon-daten a:hover { color: var(--prim) !important; }

.bs-formular { padding: clamp(36px, 5.5vw, 88px) clamp(24px, 5.5vw, 88px); max-width: 860px; }
.bs-anlass-wahl { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.bs-anlass-wahl legend { font: 700 clamp(1.3rem, 2vw, 1.7rem)/1.1 Rubik, Arial, sans-serif; color: var(--ink); text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 18px; padding: 0; }
.bs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-chip { position: relative; cursor: pointer; }
.bs-chip input { position: absolute; opacity: 0; pointer-events: none; }
.bs-chip span {
  display: inline-block; padding: 11px 17px; border-radius: 999px;
  background: #fff; border: 1.5px solid #d6dcdf; color: var(--text); font-size: .95rem; line-height: 1.3;
  transition: background .2s, border-color .2s, color .2s;
}
.bs-chip:hover span { border-color: var(--ink); }
.bs-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.bs-chip input:focus-visible + span { outline: 3px solid var(--prim-dd); outline-offset: 2px; }

.bs-feldreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bs-feld { margin-bottom: 18px; }
.bs-feld label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--mute); margin-bottom: 8px; }
.bs .bs-feld input, .bs .bs-feld select, .bs .bs-feld textarea {
  width: 100%; padding: 15px 16px; min-height: 52px; border: 1.5px solid #d6dcdf !important; /* Customizer der Live-Seite setzt border:0 !important */ border-radius: 2px;
  background: #fff; color: var(--ink); font: 400 16px/1.4 Karla, Arial, sans-serif;
  transition: border-color .2s;
}
.bs .bs-feld input:hover, .bs .bs-feld select:hover, .bs .bs-feld textarea:hover { border-color: #aab4b8 !important; }
.bs .bs-feld input:focus-visible, .bs .bs-feld select:focus-visible, .bs .bs-feld textarea:focus-visible { outline: 2px solid var(--prim-dd); outline-offset: 0; border-color: var(--prim-dd) !important; }
.bs .bs-feld input:user-invalid { border-color: #c4483e !important; }
.bs-honig { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.bs-zustimmung { display: flex; gap: 14px; align-items: flex-start; margin: 6px 0 26px; font-size: .92rem; color: var(--mute); }
.bs-zustimmung input { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; accent-color: var(--ink); }
.bs-formular .bs-btn:hover, .bs-formular .bs-btn:focus-visible { background: var(--ink); color: #fff !important; }
.bs-meldung { padding: 14px 16px; background: #fbe9e7; color: #8a2a20; margin-bottom: 22px !important; }
.bs-meldung.ist-ok { background: #e3f4f7; color: var(--prim-dd); }

/* ==========================================================================
   BEWEGUNG BEIM SCROLLEN
   Reines CSS über Scroll-Timelines, ohne Skript. Browser ohne Unterstützung
   zeigen die Bilder einfach fertig an.
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bs-enthuellen { animation: bs-vorhang linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .bs-enthuellen .bs-kachel-bild { animation: bs-naeher linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .bs-ref-bild img { animation: bs-naeher linear both; animation-timeline: view(inline); animation-range: entry 0% cover 50%; }
    .bs-crew-bild img { animation: bs-schweben linear both; animation-timeline: view(); }
    .bs-kon-bild img { animation: bs-naeher linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  }
}
@keyframes bs-vorhang { from { clip-path: inset(12% 0 0 0); } to { clip-path: inset(0); } }
@keyframes bs-naeher  { from { scale: 1.16; } to { scale: 1; } }
@keyframes bs-schweben { from { translate: 0 -6%; } to { translate: 0 6%; } }

/* ==========================================================================
   ANPASSUNG
   ========================================================================== */
@media (max-width: 1100px) {
  .bs-anl-raster, .bs-reg-kopf, .bs-faq-raster { grid-template-columns: 1fr; }
  .bs-anl-rahmen { display: none; }
  .bs-faq-raster > div:first-child { position: static; }
  .bs-kontakt { grid-template-columns: 1fr; }
  .bs-kon-bild { min-height: 520px; }
  .bs-formular { max-width: none; }
}
@media (max-width: 900px) {
  .bs-hero { height: calc(100svh - var(--kopf, 80px)); min-height: 560px; }
  .bs-hero-fuss { grid-template-columns: 1fr; gap: 22px; }
  .bs-takte { gap: 8px; }
  .bs-takt a, .bs-takt-name { display: none; }
  .bs-takt.ist-aktiv a, .bs-takt.ist-aktiv .bs-takt-name { display: block; position: absolute; left: var(--gutter); right: 80px; bottom: 44px; }
  .bs-hero-leiste-innen { position: relative; padding-top: 52px; }
  .bs-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 48vw; padding: 0 6px; gap: 6px; }
  .bs-platz-a { grid-column: 1 / 3; grid-row: span 2; }
  .bs-platz-b { grid-column: 1 / 3; grid-row: auto; }
  .bs-platz-c, .bs-platz-e { grid-column: 1 / 2; grid-row: auto; }
  .bs-platz-d, .bs-platz-f { grid-column: 2 / 3; grid-row: auto; }
  .bs-kachel-pfeil { width: 40px; height: 40px; }
  .bs-kachel-kurz { font-size: .88rem; }
  .bs-platz-c .bs-kachel-titel, .bs-platz-d .bs-kachel-titel, .bs-platz-e .bs-kachel-titel, .bs-platz-f .bs-kachel-titel { font-size: clamp(1.15rem, 5vw, 1.6rem); }
  .bs-fakten { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .bs-fakten > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .bs-crew-bild::after { background: linear-gradient(0deg, rgba(var(--nacht), .85) 0%, rgba(var(--nacht), .3) 60%, rgba(var(--nacht), .1) 100%); }
  .bs-crew-inhalt { align-self: end; padding-bottom: 40px; }
  .bs-kopf-knoepfe .bs-schieber { display: none; }
  .bs-refs-spur { grid-auto-columns: 84vw; }
  .bs-ref-alle { width: 60vw; }
  .bs-ref-text { grid-template-columns: 1fr; }
  .bs-ref-mehr { grid-column: 1; grid-row: auto; margin-top: 10px; }
}
@media (max-width: 760px) {
  .bs-h1-gross { font-size: calc((100vw - 2 * var(--gutter)) / 9.6); }
  .bs-h1-klein, .bs-marke { letter-spacing: .14em; gap: 12px; }
  .bs-h1-klein::before, .bs-marke::before { width: 24px; flex: 0 0 24px; }
  .bs-logos-inner { grid-template-columns: 1fr; gap: 16px; }
  .bs-feldreihe { grid-template-columns: 1fr; gap: 0; }
  .bs-knoepfe .bs-btn { flex: 1 1 auto; justify-content: center; }
  /* Einsatzgebiet: zwei gleichmäßige Spalten, Entfernung unter dem Ort */
  .bs-orte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .bs-orte li { flex-direction: column; gap: 2px; }
  .bs-ort { font-size: clamp(1.05rem, 5vw, 1.4rem); }
  .bs-ort-km { padding-top: 0; }
  .bs-kachel:not(.bs-kachel-farbe) .bs-kachel-pfeil { background: rgba(var(--nacht), .32); }
}
/* Handy: Verleih-Kacheln untereinander, sonst trennt die Silbentrennung „Spezialeffekte“ */
@media (max-width: 600px) {
  .bs-raster { grid-template-columns: 1fr; grid-auto-rows: 64vw; }
  .bs-raster > [class*="bs-platz-"] { grid-column: 1; grid-row: auto; }
  .bs .bs-kachel-titel { hyphens: manual; }
  .bs-platz-c .bs-kachel-titel, .bs-platz-d .bs-kachel-titel, .bs-platz-e .bs-kachel-titel, .bs-platz-f .bs-kachel-titel { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .bs-platz-a .bs-kachel-titel { font-size: clamp(2rem, 10vw, 2.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .bs *, .bs *::before, .bs *::after { transition: none !important; animation: none !important; }
  .bs-hero-bild, .bs-dia.ist-aktiv .bs-hero-bild { scale: 1; }
  .bs-takt.ist-aktiv button span { width: 100%; }
  .bs-logos-liste[aria-hidden="true"] { display: none; }
  .bs-logos-band { flex-wrap: wrap; mask-image: none; }
  .bs-logos-liste { flex-wrap: wrap; row-gap: 24px; }
}

/* Elementors Kit rundet jedes button-Element mit 10px ab; die Startseite behält ihre eigenen Formen */
.bs button.bs-btn { border-radius: 2px; }
.bs button.bs-rund, .bs button.bs-pause { border-radius: 50%; }
.bs .bs-takt button { border-radius: 0; }

/* Barrierefreiheit: Fokusrahmen in Petrol auf Hellem (Türkis hätte nur 2,2 : 1), Weiß auf Fotos */
.bs :focus-visible { outline-color: var(--prim-dd); }
:is(.bs-hero, .bs-kachel, .bs-crew, .bs-kon-bild) :focus-visible { outline-color: #fff; }
.bs .bs-feld input[type="date"]:focus-within { outline: 2px solid var(--prim-dd); outline-offset: 0; border-color: var(--prim-dd) !important; }
.bs-orte .ist-sitz .bs-ort { color: var(--prim-dd); }