/* Fallstudie Bucher + Suter als eigene Seite (26.10.2026). Eigene Welt, nicht die von Spitch:
   hell wie die Plattform von Bucher + Suter, Navy, Blau und Cyan aus ihrem Styleguide in Figma,
   isometrisch wie ihre Illustrationen. Grundzustand ohne JavaScript oder mit «weniger Bewegung»:
   alles steht ruhig untereinander. Bühne, Wortlicht und Auftritte schaltet bucher-suter-fall.js über .bs-an ein. */

.bs {
  --bs-navy: #000e79;
  --bs-nacht: #000845;
  --bs-blau: #006eff;
  --bs-cyan: #00cdcc;
  --bs-rot: #ff3233;
  --bs-petrol: #005479;
  --bs-grund: #f4f6fd;
  --bs-tinte: #0b1340;
  --bs-text: #3d4466;
  --bs-leise: #5f6688;
  --bs-linie: rgba(0, 14, 121, .12);
  --bs-pad: var(--container-pad, 2.5rem);
  background: #fff;
  color: var(--bs-tinte);
  font-family: var(--font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.bs *, .bs *::before, .bs *::after { box-sizing: border-box; }
.bs ::selection { background: var(--bs-cyan); color: var(--bs-nacht); }
.bs-wrap { max-width: var(--container-max, 84rem); margin: 0 auto; padding: 0 var(--bs-pad); }
.bs a { color: inherit; }
.bs a:focus-visible, .bs button:focus-visible, .bs [tabindex]:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--bs-blau); border-radius: 8px; }
.bs h1, .bs h2, .bs h3 { font-family: var(--font-display); color: var(--bs-tinte); margin: 0; letter-spacing: -.03em; }
.bs h2 { font-size: clamp(2rem, 4.8vw, 4.2rem); line-height: 1.04; font-weight: 700; max-width: 18ch; }
.bs h2 em, .bs h1 em { font-style: normal; color: var(--bs-blau); }
.bs p { margin: 0; }
.bs .dt-ico { display: block; }
.bs .dt-ico svg { display: block; width: 44px; height: 44px; }
.bs-kapitel { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.2rem; font: 600 .78rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--bs-blau); }
.bs-kapitel::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--bs-cyan); }
.bs-text { max-width: 44rem; margin-top: 1.4rem !important; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.6; color: var(--bs-text); text-wrap: pretty; }
.bs-text + .bs-text { margin-top: 1rem !important; }
.bs-quelle { margin-top: 2rem !important; max-width: 62rem; font-size: .82rem; line-height: 1.5; color: var(--bs-leise); }

/* Knöpfe */
.bs-aktionen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.bs-knopf { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .85rem 1.45rem; border-radius: 999px;
  font: 600 1rem/1 var(--font-display); text-decoration: none !important; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.bs-knopf svg { width: 16px; height: 16px; }
.bs-knopf--cyan { background: var(--bs-cyan); color: var(--bs-nacht) !important; }
.bs-knopf--cyan:hover { background: #3fe0df; transform: translateY(-1px); }
.bs-knopf--cyan:focus-visible { box-shadow: inset 0 0 0 2px #fff !important; }
.bs-knopf--rand { color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.bs-knopf--rand:hover { box-shadow: inset 0 0 0 1px #fff; }

/* 1 Hero: eine Navy-Karte wie die Blöcke der Plattform, rechts drei echte Seiten isometrisch */
.bs-held { padding: clamp(.75rem, 1.6vw, 1.25rem) clamp(.75rem, 1.6vw, 1.25rem) 0; }
.bs-held__karte { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center;
  max-width: 96rem; margin: 0 auto; padding: clamp(2.2rem, 5vw, 5rem) clamp(1.4rem, 4.5vw, 5rem) clamp(2rem, 4vw, 3.5rem);
  border-radius: clamp(20px, 2.4vw, 36px); overflow: hidden; isolation: isolate; color: #fff;
  background: radial-gradient(70% 90% at 85% 30%, #0a2bd8 0%, rgba(10, 43, 216, 0) 60%), linear-gradient(160deg, var(--bs-navy) 0%, var(--bs-nacht) 100%); }
/* Das isometrische Raster der Illustrationen von Bucher + Suter, als feine Linien im Grund */
.bs-held__karte::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: repeating-linear-gradient(30deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 46px), repeating-linear-gradient(150deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 46px);
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 75%); mask-image: linear-gradient(90deg, transparent 20%, #000 75%); }
.bs-held__text { min-width: 0; }
.bs-pfad { display: flex; gap: .5rem; font-size: .85rem; color: rgba(255, 255, 255, .7); margin-bottom: 1.6rem; }
.bs-pfad a { text-decoration: none; }
.bs-pfad a:hover { color: #fff; }
.bs-marke { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1.6rem !important; }
.bs-marke img { display: block; height: 30px; width: auto; padding: 6px 10px; border-radius: 8px; background: #fff; box-sizing: content-box; }
.bs-marke span { font: 600 .78rem/1.3 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--bs-cyan); }
.bs .bs-held__titel { color: #fff; font-size: clamp(2.1rem, 4.6vw, 4.4rem); line-height: 1.02; font-weight: 700; letter-spacing: -.04em; max-width: 15ch; }
.bs .bs-held__titel em { display: block; color: var(--bs-cyan); }
.bs-held__lead { max-width: 38rem; margin-top: 1.4rem !important; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; color: rgba(255, 255, 255, .82); text-wrap: pretty; }
.bs-held__iso { min-width: 0; height: 100%; min-height: 26rem; display: grid; place-items: center; perspective: 2200px; }
.bs-iso { position: relative; width: min(100%, 34rem); aspect-ratio: 1 / 1; transform-style: preserve-3d; transform: rotateX(55deg) rotateZ(-40deg); }
.bs-iso__seite { position: absolute; display: block; width: 74%; height: auto; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), -30px 40px 60px -20px rgba(0, 4, 40, .7); }
.bs-iso__seite--1 { left: 0; top: 2%; transform: translateZ(0); }
.bs-iso__seite--2 { left: 16%; top: 40%; transform: translateZ(70px); }
.bs-iso__seite--3 { left: 30%; top: 64%; transform: translateZ(140px); }
.bs-zahlen { grid-column: 1 / -1; list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.bs-zahlen li { min-width: 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.bs-zahlen b { display: block; font: 700 clamp(1.9rem, 3.4vw, 3rem)/1 var(--font-display); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bs-zahlen span { display: block; margin-top: .5rem; font-size: .9rem; line-height: 1.4; color: rgba(255, 255, 255, .72); }

/* 2 Wie es anfing: Wort für Wort */
.bs-anfang { padding: clamp(6rem, 13vw, 11rem) 0 clamp(4rem, 8vw, 7rem); }
.bs-datum { font: 600 .9rem/1 var(--font-display); color: var(--bs-blau); letter-spacing: .06em; margin-bottom: 1.6rem !important; }
.bs-woerter { font: 600 clamp(1.6rem, 3.8vw, 3.4rem)/1.15 var(--font-display); letter-spacing: -.03em; max-width: 26ch; color: var(--bs-tinte); }
.bs-an .bs-woerter .bs-w { color: #c9cde2; transition: color .25s linear; }
.bs-an .bs-woerter .bs-w.is-hell { color: var(--bs-tinte); }
.bs-anfang__fuss { margin-top: 2rem !important; font-size: 1rem; color: var(--bs-leise); }

/* Kapitelleiste */
.bs-leiste { position: fixed; left: 50%; top: calc(var(--nav-h, 74px) + .7rem); z-index: 40; display: flex; gap: .15rem; padding: .3rem; border-radius: 999px;
  max-width: calc(100vw - 1.5rem); overflow-x: auto; scrollbar-width: none; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 0 0 1px var(--bs-linie), 0 12px 30px -16px rgba(0, 14, 121, .35); transform: translate(-50%, -140%); opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.2, .7, .1, 1), opacity .3s ease; }
.bs-leiste::-webkit-scrollbar { display: none; }
.bs-leiste.is-an { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.bs-leiste a { flex: 0 0 auto; padding: .55rem .95rem; border-radius: 999px; font: 600 .86rem/1 var(--font-display); color: var(--bs-leise) !important; text-decoration: none; transition: color .25s ease, background .25s ease; }
.bs-leiste a:hover { color: var(--bs-navy) !important; }
.bs-leiste a.is-hier { background: var(--bs-navy); color: #fff !important; }
@media (max-width: 900px) { .bs-leiste { top: calc(var(--nav-h, 64px) + .5rem); } .bs-leiste a { padding: .5rem .75rem; font-size: .8rem; } }

/* 3 Sechs Aufgaben */
.bs-ueber { padding: 0 0 clamp(5rem, 10vw, 8rem); }
.bs-ueber__liste { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: x; }
.bs-ueber__liste li { min-width: 0; }
.bs-ueber__liste a { position: relative; display: grid; gap: .5rem; height: 100%; padding: 1.5rem; border-radius: 20px; background: var(--bs-grund); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--bs-linie); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.bs-ueber__liste a:hover { transform: translateY(-3px); background: #fff; box-shadow: inset 0 0 0 1px var(--bs-blau), 0 20px 40px -24px rgba(0, 14, 121, .4); }
.bs-ueber__liste .dt-ico { margin-bottom: .4rem; }
.bs-ueber__nr { position: absolute; right: 1.4rem; top: 1.4rem; font: 600 .85rem/1 var(--font-display); color: var(--bs-leise); }
.bs-ueber__liste b { font: 700 1.35rem/1.15 var(--font-display); letter-spacing: -.02em; color: var(--bs-tinte); }
.bs-ueber__liste span:not(.bs-ueber__nr):not(.dt-ico) { font-size: .95rem; line-height: 1.5; color: var(--bs-text); }
.bs-ueber__liste i { font-style: normal; font: 600 .78rem/1 var(--font-display); color: var(--bs-blau); margin-top: .3rem; }

/* 4 Das System: Grundzustand ohne Bewegung, alles sichtbar */
.bs-system { position: relative; background: linear-gradient(180deg, var(--bs-nacht), var(--bs-navy)); color: #fff; padding: clamp(5rem, 10vw, 8rem) 0; scroll-margin-top: var(--nav-h, 74px); }
.bs-system__klebt { max-width: var(--container-max, 84rem); margin: 0 auto; padding: 0 var(--bs-pad); }
.bs-system__text { display: grid; gap: 1.6rem; max-width: 40rem; margin-bottom: 3rem; }
.bs-system__schritt { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; color: rgba(255, 255, 255, .78); }
.bs-system__schritt span { display: block; margin-bottom: .5rem; font: 600 .78rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--bs-cyan); }
.bs-system__schritt b { display: block; font: 700 clamp(1.9rem, 4.2vw, 3.6rem)/1.05 var(--font-display); letter-spacing: -.035em; color: #fff; margin-bottom: .4rem; }
.bs-brett { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; }
.bs-brett__farben { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; }
.bs-brett__farben li { min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; min-height: 6.5rem; padding: .7rem; border-radius: 12px; background: var(--f);
  color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.bs-brett__farben li.is-hell { color: var(--bs-tinte); }
.bs-brett__farben b { font: 700 .95rem/1.2 var(--font-display); }
.bs-brett__farben code { font: 500 .72rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .85; }
.bs-brett__karte, .bs-brett__seite { position: relative; margin: 0; min-width: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.bs-brett__karte img, .bs-brett__seite img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.bs-brett__karte--schrift { grid-column: span 2; aspect-ratio: 4 / 3; }
.bs-brett__karte--bausteine { grid-column: span 4; aspect-ratio: 8 / 3; }
.bs-brett__seite { grid-column: span 2; aspect-ratio: 16 / 10; }
.bs-brett__seite figcaption { position: absolute; left: .6rem; bottom: .6rem; padding: .35rem .6rem; border-radius: 999px; background: var(--bs-navy); color: #fff; font: 600 .78rem/1 var(--font-display); }

/* Mit Bewegung: die Bühne klebt, das Brett kippt in die Isometrie, die Seiten heben ab */
.bs-an .bs-system { height: 420vh; padding: 0; }
.bs-an .bs-system__klebt { position: sticky; top: var(--nav-h, 74px); height: calc(100svh - var(--nav-h, 74px)); max-width: none; display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  align-items: center; gap: 2rem; padding: 0 var(--bs-pad); overflow: hidden; }
.bs-an .bs-system__text { position: relative; display: block; min-height: 16rem; margin: 0; }
.bs-an .bs-system__schritt { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(-50% + (1 - var(--o, 0)) * 1.2rem)); opacity: var(--o, 0); }
.bs-an .bs-system__schritt--1 { --o: var(--t1, 1); }
.bs-an .bs-system__schritt--2 { --o: var(--t2, 0); }
.bs-an .bs-system__schritt--3 { --o: var(--t3, 0); }
.bs-an .bs-system__raum { height: 100%; display: grid; place-items: center; perspective: 2400px; }
.bs-an .bs-brett { position: relative; display: block; width: min(100%, 58rem, calc((100svh - var(--nav-h, 74px)) * 1.25)); aspect-ratio: 16 / 11; transform-style: preserve-3d;
  transform: rotateX(calc(var(--k, 0) * 52deg)) rotateZ(calc(var(--k, 0) * -38deg)) scale(calc(1 - var(--k, 0) * .12)); }
.bs-an .bs-brett::before { content: ""; position: absolute; inset: -3%; border-radius: 24px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); opacity: var(--k, 0); }
.bs-an .bs-brett__farben { position: absolute; left: 0; top: 0; width: 100%; height: 20%; display: grid; gap: 1.2%; }
.bs-an .bs-brett__farben li { --e: clamp(0, calc(var(--fa, 0) * 6 - var(--i) * .9), 1); min-height: 0; opacity: var(--e); transform: translateY(calc((1 - var(--e)) * -2rem)); }
.bs-an .bs-brett__karte, .bs-an .bs-brett__seite { position: absolute; aspect-ratio: auto; }
.bs-an .bs-brett__karte--schrift { left: 0; top: 24%; width: 31%; height: 76%; opacity: var(--sa, 0); transform: translateY(calc((1 - var(--sa, 0)) * 2rem)); }
.bs-an .bs-brett__karte--bausteine { left: 34%; top: 24%; width: 66%; height: 50%; opacity: var(--ba, 0); transform: translateY(calc((1 - var(--ba, 0)) * 2rem)); }
.bs-an .bs-brett__seite { width: 52%; height: auto; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), -40px 50px 70px -30px rgba(0, 4, 40, .85); }
.bs-an .bs-brett__seite img { height: auto; }
.bs-an .bs-brett__seite--1 { left: 4%; top: 4%; opacity: min(1, calc(var(--p1, 0) * 3)); transform: translateZ(calc(var(--p1, 0) * 90px)); }
.bs-an .bs-brett__seite--2 { left: 26%; top: 36%; opacity: min(1, calc(var(--p2, 0) * 3)); transform: translateZ(calc(var(--p2, 0) * 180px)); }
.bs-an .bs-brett__seite--3 { left: 46%; top: 62%; opacity: min(1, calc(var(--p3, 0) * 3)); transform: translateZ(calc(var(--p3, 0) * 270px)); }
@media (max-width: 900px) {
  .bs-an .bs-system { height: 380vh; }
  .bs-an .bs-system__klebt { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: center; gap: 0; padding-top: 1.2rem; }
  .bs-an .bs-system__text { min-height: 10.5rem; }
  .bs-an .bs-system__schritt { top: 0; transform: translateY(calc((1 - var(--o, 0)) * 1rem)); font-size: .98rem; }
  .bs-an .bs-brett { width: min(100%, calc((100svh - var(--nav-h, 64px) - 12rem) * 1.3)); }
  .bs-brett__farben li { min-height: 4.5rem; padding: .45rem; }
  .bs-brett__farben code { display: none; }
}
@media (max-width: 640px) {
  .bs-brett { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-brett__farben { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bs-brett__karte--schrift, .bs-brett__karte--bausteine, .bs-brett__seite { grid-column: 1 / -1; }
  .bs-an .bs-brett__farben { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bs-an .bs-brett__farben b { font-size: .62rem; }
}

/* Titelkarten der Kapitel */
.bs-titel { padding: clamp(6rem, 13vw, 11rem) 0 clamp(1rem, 3vw, 2rem); scroll-margin-top: calc(var(--nav-h, 74px) + 3.5rem); }
.bs-titel__nr { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; margin-bottom: 1.2rem;
  background: var(--bs-navy); color: var(--bs-cyan); font: 700 1rem/1 var(--font-display); }
.bs .bs-titel__wort { font: 800 clamp(2.1rem, 11vw, 10.5rem)/.9 var(--font-display); hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; letter-spacing: -.06em; color: var(--bs-navy);
  padding: .04em .1em .08em; margin: -.04em -.1em -.08em; }
.bs-titel__zeile { margin-top: 1.4rem !important; max-width: 32ch; font: 600 clamp(1.2rem, 2.2vw, 1.8rem)/1.25 var(--font-display); letter-spacing: -.02em; color: var(--bs-leise); }
.bs-titel__link { display: inline-flex; align-items: center; gap: .45rem; margin: 1.6rem 1.6rem 0 0; color: var(--bs-blau) !important; text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(0, 110, 255, .35); padding-bottom: 3px; }
.bs-titel__link svg { width: 15px; height: 15px; }
.bs-titel__link:hover { border-color: var(--bs-blau); }
.bs-titel + section { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* 01 SEO */
.bs-seo { padding-bottom: clamp(3rem, 6vw, 5rem); }
.bs-seo__raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.2rem; margin-top: 3rem; }
.bs-balken { margin: 0; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 24px; background: var(--bs-navy); color: #fff; }
.bs-balken figcaption b { display: block; font: 700 1.25rem/1.2 var(--font-display); }
.bs-balken figcaption span { display: block; margin-top: .3rem; color: rgba(255, 255, 255, .7); font-size: .95rem; }
.bs-balken__reihe { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3rem; align-items: center; gap: 1rem; margin-top: 1.8rem; }
.bs-balken__wann { font-size: .92rem; color: rgba(255, 255, 255, .8); }
.bs-balken__spur { height: 2.4rem; border-radius: 10px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bs-balken__spur i { display: block; height: 100%; width: max(4px, calc(var(--w) * 100%)); border-radius: 10px; background: linear-gradient(90deg, var(--bs-blau), var(--bs-cyan)); transform-origin: left; }
.bs-an .bs-balken__spur i { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.2, .7, .1, 1) .2s; }
.bs-an .bs-balken.is-da .bs-balken__spur i { transform: none; }
.bs-balken__reihe b { font: 700 2rem/1 var(--font-display); text-align: right; }
.bs-balken__bsp { margin-top: 1.8rem !important; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .85); line-height: 1.5; }
.bs-werte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.bs-werte li { min-width: 0; padding: 1.4rem; border-radius: 20px; background: var(--bs-grund); box-shadow: inset 0 0 0 1px var(--bs-linie); }
.bs-werte b { display: block; font: 700 clamp(1.9rem, 3.4vw, 2.8rem)/1 var(--font-display); letter-spacing: -.04em; color: var(--bs-navy); white-space: nowrap; }
.bs-werte span { display: block; margin-top: .6rem; font-size: .92rem; line-height: 1.45; color: var(--bs-text); }
.bs-themen { margin-top: 2.4rem; }
.bs-themen__titel { font: 600 .85rem/1.3 var(--font-display); color: var(--bs-leise); margin-bottom: .9rem !important; }
.bs-themen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.bs-themen li { padding: .5rem .85rem; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--bs-linie); font: 500 .9rem/1.2 var(--font-body); color: var(--bs-tinte); }

/* 02 Plattform, mit Länderwahl wie auf cloud.bucher-suter.com */
.bs-plattform { padding-bottom: clamp(3rem, 6vw, 5rem); }
.bs-wahl { margin-top: 2.8rem; }
.bs-wahl__knoepfe { display: inline-flex; gap: .3rem; padding: .3rem; border-radius: 999px; background: var(--bs-grund); box-shadow: inset 0 0 0 1px var(--bs-linie); margin-bottom: 1.4rem; }
.bs-wahl__knoepfe button { min-height: 44px; padding: .6rem 1.4rem; border: 0; border-radius: 999px; background: transparent; font: 600 1rem/1 var(--font-display); color: var(--bs-leise); cursor: pointer; }
.bs-wahl__knoepfe button[aria-selected="true"] { background: var(--bs-navy); color: #fff; }
.bs-markt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 24px; background: var(--bs-grund); }
.bs-markt + .bs-markt { margin-top: 1.2rem; }
.bs-markt[hidden] { display: none; }
.bs-markt__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-bottom: 1rem !important; }
.bs-markt__kopf b { font: 800 clamp(2.4rem, 5vw, 4rem)/1 var(--font-display); letter-spacing: -.05em; color: var(--bs-navy); }
.bs-markt__kopf span { font: 600 .95rem/1.3 var(--font-display); color: var(--bs-blau); }
.bs-markt__text > p:not(.bs-markt__kopf) { line-height: 1.6; color: var(--bs-text); max-width: 34rem; }
.bs-markt__seiten { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.bs-markt__seiten li { padding: .4rem .75rem; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--bs-linie); font-size: .88rem; color: var(--bs-tinte); }
.bs-markt__bild { position: relative; margin: 0; min-width: 0; }
.bs-markt__bild img, .bs-markt__bild video { display: block; width: 100%; height: auto; border-radius: 16px; }
.bs-markt__bild--film video { background: #fff; aspect-ratio: 16 / 9; box-shadow: 0 0 0 1px var(--bs-linie); }
.bs-markt__bild figcaption, .bs-bild figcaption { margin-top: .7rem; font-size: .85rem; color: var(--bs-leise); }
.bs-film__knopf { position: absolute; right: .8rem; top: .8rem; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0, 14, 121, .78); color: #fff; cursor: pointer; }
.bs-film__knopf::before { content: ""; position: absolute; left: 14px; top: 13px; width: 4px; height: 14px; background: #fff; box-shadow: 8px 0 0 #fff; }
.bs-film__knopf.is-pause::before { left: 16px; top: 12px; width: 0; height: 0; background: none; box-shadow: none; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.bs-ganz { margin: clamp(3rem, 6vw, 5rem) 0 0; }
.bs-ganz img { display: block; width: 100%; height: auto; }
.bs-plattform__zwei { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.2rem; margin-top: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.bs-bild { margin: 0; min-width: 0; }
.bs-bild img { display: block; width: 100%; height: auto; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--bs-linie); }

/* 03 Inhalte */
.bs-inhalte { padding-bottom: clamp(3rem, 6vw, 5rem); }
.bs-inhalte__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.bs-artikel { list-style: none; margin: 0; padding: 0; counter-reset: a; border-radius: 24px; background: var(--bs-grund); box-shadow: inset 0 0 0 1px var(--bs-linie); overflow: hidden; }
.bs-artikel li { counter-increment: a; position: relative; display: grid; gap: .3rem; padding: 1.2rem 1.4rem 1.2rem 4rem; border-top: 1px solid var(--bs-linie); }
.bs-artikel li:first-child { border-top: 0; }
.bs-artikel li::before { content: counter(a); position: absolute; left: 1.3rem; top: 1.2rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--bs-navy); color: var(--bs-cyan); font: 700 .85rem/1 var(--font-display); }
.bs-artikel time { font: 600 .8rem/1 var(--font-display); color: var(--bs-blau); }
.bs-artikel b { font: 600 1.05rem/1.3 var(--font-display); color: var(--bs-tinte); }
.bs-artikel span { font: 500 .82rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--bs-leise); }

/* 04 Pardot: der Weg einer Anfrage als Zeichnung */
.bs-pardot { padding-bottom: clamp(3rem, 6vw, 5rem); }
.bs-fluss { list-style: none; margin: 2.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.bs-fluss li { position: relative; min-width: 0; padding: 1.4rem; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--bs-navy); }
.bs-fluss li:nth-child(2) { background: var(--bs-navy); }
.bs-fluss li:nth-child(2) b, .bs-fluss li:nth-child(2) span { color: #fff; }
.bs-fluss li:not(:last-child)::after { content: ""; position: absolute; right: -1rem; top: 50%; width: 1rem; height: 2px; background: var(--bs-cyan); }
.bs-fluss b { display: block; font: 700 1.2rem/1.2 var(--font-display); color: var(--bs-navy); }
.bs-fluss span { display: block; margin-top: .4rem; font-size: .9rem; line-height: 1.45; color: var(--bs-text); }
.bs-fluss__unter { margin-top: .8rem !important; font-size: .82rem; color: var(--bs-leise); }
.bs-pardot__liste, .bs-log { list-style: none; margin: 2.4rem 0 0; padding: 0; }
.bs-pardot__liste li, .bs-log li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--bs-linie); }
.bs-pardot__liste time, .bs-log time { font: 600 .9rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--bs-blau); }
.bs-pardot__liste span, .bs-log span { line-height: 1.5; color: var(--bs-text); }

/* 05 Landingpages: eine Wand zum seitlichen Blättern (kein Scroll-Kapern) */
.bs-lp { padding-bottom: clamp(3rem, 6vw, 5rem); }
.bs-wand { margin-top: 2.8rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--bs-pad); scrollbar-width: thin; padding-bottom: 1rem; }
.bs-wand ol { list-style: none; margin: 0; padding: 0 var(--bs-pad); display: flex; gap: 1.2rem; width: max-content; align-items: stretch; }
.bs-wand li { scroll-snap-align: start; flex: 0 0 auto; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; }
.bs-wand__bild { width: min(84vw, 40rem); background: var(--bs-grund); box-shadow: inset 0 0 0 1px var(--bs-linie); }
.bs-wand__bild img { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: top; background: #fff; border-bottom: 1px solid var(--bs-linie); }
.bs-wand p { display: grid; gap: .3rem; padding: 1.1rem 1.3rem 1.3rem; }
.bs-wand time { font: 600 .8rem/1 var(--font-display); color: var(--bs-blau); }
.bs-wand b { font: 700 1.1rem/1.25 var(--font-display); color: var(--bs-tinte); }
.bs-wand p span { font-size: .9rem; line-height: 1.45; color: var(--bs-text); }
.bs-wand__ill { width: min(60vw, 20rem); justify-content: center; background: linear-gradient(180deg, #eef2ff, #fff); }
.bs-wand__ill img { display: block; width: 100%; height: auto; }
.bs-wand__text { width: min(84vw, 24rem); justify-content: flex-end; background: var(--bs-navy); }
.bs-wand__text p { padding: 1.8rem; }
.bs-wand__text b { color: #fff; font-size: 1.5rem; }
.bs-wand__text time { color: var(--bs-cyan); }
.bs-wand__text p span { color: rgba(255, 255, 255, .82); font-size: 1rem; }

/* 06 Betrieb */
.bs-betrieb { padding-bottom: clamp(3rem, 6vw, 5rem); }
.bs-betrieb__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.bs-werte--klein { margin-top: 2rem; }
.bs-log { margin-top: 0; padding: .6rem 1.6rem; border-radius: 24px; background: var(--bs-nacht); }
.bs-log li { border-top-color: rgba(255, 255, 255, .1); }
.bs-log li:first-child { border-top: 0; }
.bs-log time { color: var(--bs-cyan); }
.bs-log span { color: rgba(255, 255, 255, .86); }

/* Zeitleiste: Jahre nebeneinander */
.bs-zeit { padding: clamp(5rem, 10vw, 8rem) 0; background: var(--bs-grund); scroll-margin-top: calc(var(--nav-h, 74px) + 3.5rem); }
.bs-jahre { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.bs-jahre li { position: relative; min-width: 0; padding-top: 1.6rem; }
.bs-jahre li::before { content: ""; position: absolute; left: 0; right: -1rem; top: 0; height: 3px; background: var(--bs-linie); }
.bs-jahre li::after { content: ""; position: absolute; left: 0; top: -5px; width: 13px; height: 13px; border-radius: 50%; background: var(--bs-cyan); box-shadow: 0 0 0 3px var(--bs-grund); }
.bs-jahre li:last-child::before { right: 0; }
.bs-jahre b { display: block; font: 800 1.7rem/1 var(--font-display); letter-spacing: -.03em; color: var(--bs-navy); }
.bs-jahre span { display: block; margin-top: .7rem; font-size: .92rem; line-height: 1.5; color: var(--bs-text); }

/* Schluss: an Firmen wie Bucher + Suter */
.bs-schluss { padding: clamp(4rem, 8vw, 6rem) clamp(.75rem, 1.6vw, 1.25rem) clamp(4rem, 8vw, 6rem); }
.bs-schluss__karte { max-width: 96rem; margin: 0 auto; padding: clamp(2.4rem, 6vw, 6rem) clamp(1.4rem, 5vw, 6rem); border-radius: clamp(20px, 2.4vw, 36px); color: #fff;
  background: radial-gradient(60% 80% at 15% 20%, #0a2bd8 0%, rgba(10, 43, 216, 0) 60%), linear-gradient(160deg, var(--bs-navy), var(--bs-nacht)); }
.bs-schluss__karte .bs-kapitel { color: var(--bs-cyan); }
.bs .bs-schluss__karte h2 { color: #fff; max-width: 22ch; }
.bs .bs-schluss__karte h2 em { display: block; color: var(--bs-cyan); }
.bs-schluss__karte > p { max-width: 44rem; margin-top: 1.4rem !important; font-size: 1.1rem; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.bs-schluss__mehr { margin-top: 1.6rem !important; }
.bs-schluss__mehr a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .4); padding-bottom: 2px; }

/* Auftritte beim Hereinscrollen */
.bs-an .bs-auf { opacity: 0; transform: translateY(2rem); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .1, 1); }
.bs-an .bs-auf.is-da { opacity: 1; transform: none; }
.bs-an .bs-iso__seite { animation: bs-schweben 7s ease-in-out infinite; }
.bs-an .bs-iso__seite--2 { animation-delay: -2.3s; }
.bs-an .bs-iso__seite--3 { animation-delay: -4.6s; }
@keyframes bs-schweben { 50% { margin-top: -10px; } }

/* Schmal */
@media (max-width: 1100px) {
  .bs-jahre { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.4rem; }
}
@media (max-width: 900px) {
  .bs-held__karte { grid-template-columns: minmax(0, 1fr); }
  .bs-held__iso { min-height: 0; height: 18rem; order: 2; margin: -1rem 0 -2rem; }
  .bs-iso { width: min(80%, 22rem); }
  .bs-zahlen { order: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-ueber__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-seo__raster, .bs-markt, .bs-plattform__zwei, .bs-inhalte__raster, .bs-betrieb__raster { grid-template-columns: minmax(0, 1fr); }
  .bs-fluss { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-fluss li:nth-child(2)::after { display: none; }
}
@media (max-width: 560px) {
  .bs-ueber__liste, .bs-werte, .bs-fluss, .bs-jahre { grid-template-columns: minmax(0, 1fr); }
  .bs-fluss li::after { display: none; }
  .bs-zahlen { gap: 1rem; }
  .bs-zahlen b { font-size: 1.75rem; }
  .bs-balken__reihe { grid-template-columns: 5.6rem minmax(0, 1fr) 2rem; gap: .6rem; }
  .bs-pardot__liste li, .bs-log li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .bs-log { padding: .4rem 1.1rem; }
  .bs-artikel li { padding-left: 3.4rem; }
  .bs-artikel li::before { left: 1rem; }
  .bs-jahre li::before { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bs *, .bs *::before, .bs *::after { animation: none !important; transition: none !important; }
}

/* Kopfzeile: die weisse Unschärfe-Ebene (Falle 5 im Handbuch) liegt sonst als heller Streifen über der
   Navy-Bühne. Statt ihr eigenes Glas, hell wie die Seite. Nur auf dieser Seite geladen. */
header[data-dartera-header] div[style*="nav-h) + 14px"] { display: none !important; }
header[data-dartera-header] { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 1px 0 rgba(0, 14, 121, .08); }

/* 03 Google Ads: der Aufbau der Kampagnen als Zeichnung */
.bs-ads { padding-bottom: clamp(3rem, 6vw, 5rem); }
.bs-kampagnen { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.bs-kampagnen li { min-width: 0; display: grid; gap: .45rem; align-content: start; padding: 1.5rem; border-radius: 22px; background: var(--bs-grund); box-shadow: inset 0 0 0 1px var(--bs-linie); }
.bs-kampagnen__art { justify-self: start; padding: .3rem .65rem; border-radius: 6px; background: var(--bs-navy); color: #fff; font: 700 .72rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.bs-kampagnen b { font: 700 1.25rem/1.25 var(--font-display); color: var(--bs-tinte); }
.bs-kampagnen li > span:last-child { line-height: 1.5; color: var(--bs-text); }
.bs-kampagnen li:first-child .bs-kampagnen__art { background: var(--bs-blau); }
.bs-kampagnen li:nth-child(2) .bs-kampagnen__art { background: var(--bs-cyan); color: var(--bs-nacht); }
@media (max-width: 900px) { .bs-kampagnen { grid-template-columns: minmax(0, 1fr); } }

/* Hero, zweite Fassung (27.10.2026): der Kanal-Hub aus unserem Entwurf statt des Seitenstapels */
.bs-held__hub { position: relative; margin: 0; min-width: 0; display: grid; place-items: center; isolation: isolate; }
.bs-held__hub img { display: block; width: min(100%, 34rem); height: auto; }
.bs-hub__schein { position: absolute; inset: 8%; z-index: -1; border-radius: 50%; background: conic-gradient(from 0deg, rgba(0, 205, 204, .35), rgba(0, 110, 255, .1), rgba(255, 50, 51, .25), rgba(0, 205, 204, .35)); filter: blur(40px); }
.bs-held__hub figcaption { margin-top: .6rem; font-size: .8rem; color: rgba(255, 255, 255, .6); text-align: center; }
.bs-an .bs-held__hub img { animation: bs-schweben 7s ease-in-out infinite; }
.bs-an .bs-hub__schein { animation: bs-drehen 18s linear infinite; }
@keyframes bs-drehen { to { transform: rotate(1turn); } }
@media (max-width: 900px) { .bs-held__hub { order: 2; } .bs-held__hub img { width: min(80%, 22rem); } }

/* Plattform: Infografiken im Einsatz, Clay-Illustrationen */
.bs-infos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; margin-top: 1.2rem; }
.bs-clay { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.bs-clay li { min-width: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--bs-linie); }
.bs-clay img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .bs-infos { grid-template-columns: minmax(0, 1fr); } .bs-clay { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bs-wand__bild--dunkel { background: #1d2050; }
.bs-wand__bild--dunkel img { background: #1d2050; object-fit: contain; }
.bs-wand__bild--dunkel b { color: #fff; }
.bs-wand__bild--dunkel p span { color: rgba(255, 255, 255, .78); }
.bs-wand__bild--dunkel time { color: var(--bs-cyan); }
.bs-betrieb__teile { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bs-betrieb__teile li { min-width: 0; display: grid; gap: .4rem; padding: 1.4rem; border-radius: 20px; background: var(--bs-nacht); color: #fff; }
.bs-betrieb__teile b { font: 700 1.15rem/1.2 var(--font-display); }
.bs-betrieb__teile span:not(.dt-ico) { line-height: 1.5; color: rgba(255, 255, 255, .78); font-size: .95rem; }
@media (max-width: 560px) { .bs-betrieb__teile { grid-template-columns: minmax(0, 1fr); } }

/* 01 SEO: fünf Schritte statt Zahlen (27.10.2026, keine internen Zahlen) */
.bs-schritte { list-style: none; margin: 2.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; counter-reset: s; }
.bs-schritte li { counter-increment: s; position: relative; min-width: 0; display: grid; gap: .45rem; align-content: start; padding: 3.4rem 1.3rem 1.4rem; border-radius: 20px; background: var(--bs-grund); box-shadow: inset 0 0 0 1px var(--bs-linie); }
.bs-schritte li::before { content: "0" counter(s); position: absolute; left: 1.3rem; top: 1.2rem; font: 700 .9rem/1 var(--font-display); color: var(--bs-cyan); }
.bs-schritte li:not(:last-child)::after { content: ""; position: absolute; right: -1rem; top: 1.65rem; width: 1rem; height: 2px; background: var(--bs-linie); }
.bs-schritte b { font: 700 1.2rem/1.2 var(--font-display); color: var(--bs-navy); }
.bs-schritte span { font-size: .92rem; line-height: 1.5; color: var(--bs-text); }
@media (max-width: 1100px) { .bs-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bs-schritte li::after { display: none; } }
@media (max-width: 560px) { .bs-schritte { grid-template-columns: minmax(0, 1fr); } }

/* Stimmen (freigegeben von Daniel, 27.10.2026) */
.bs-anfang__zitat { margin-top: 2.2rem !important; max-width: 40rem; font: 600 clamp(1.2rem, 2vw, 1.6rem)/1.3 var(--font-display); color: var(--bs-blau); letter-spacing: -.02em; }
.bs-anfang__zitat span { display: block; margin-top: .5rem; font: 500 .9rem/1.4 var(--font-body); color: var(--bs-leise); letter-spacing: 0; }
.bs-stimme { margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: clamp(1.8rem, 4vw, 3rem); border-radius: 28px; color: #fff; max-width: 60rem;
  background: radial-gradient(60% 90% at 90% 10%, rgba(0, 205, 204, .35), transparent 70%), linear-gradient(160deg, var(--bs-navy), var(--bs-nacht)); }
.bs-stimme blockquote { margin: 0; }
.bs-stimme p { font: 700 clamp(1.5rem, 3vw, 2.4rem)/1.2 var(--font-display); letter-spacing: -.03em; }
.bs-stimme figcaption { margin-top: 1.2rem; }
.bs-stimme figcaption b { display: block; font-weight: 700; }
.bs-stimme figcaption span { color: rgba(255, 255, 255, .75); font-size: .95rem; }
/* Kapitelleiste auf dem Telefon: weiche Kanten zeigen, dass sie seitlich weitergeht (27.10.2026) */
@media (max-width: 700px) {
  .bs-leiste { -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.6rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.6rem), transparent); }
}
/* Schriftkarte in der Bühne: ganz zeigen statt beschneiden, sonst endet die zweite Schrift auf «Sourc» (27.10.2026) */
.bs-an .bs-brett__karte--schrift img { object-fit: contain; object-position: top center; }

/* Je Kapitel eine Zeile, was es Firmen wie dieser bringt (28.10.2026, Daniel) */
.bs-titel__nutzen { margin-top: 1.5rem !important; max-width: 42rem; font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.55; color: var(--bs-tinte, #0b1b33); text-wrap: pretty; }
.bs-titel__nutzen b { display: inline-block; margin-right: .65rem; padding: .38rem .62rem .34rem; border-radius: 999px; background: var(--bs-blau); color: #fff; font: 700 .7rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; vertical-align: .18em; }