/* =====================================================================
 BsMind (Warenwirtschaft mit Lagerverwaltung), Seiten-Komponenten, namespaced .bs-*
 Neuaufbau 2026-10-04, gekürzt + Motion 2026-10-04 (8 Sektionen). Nur in der Demo Belegtes. JS: js/bsmind-page.js
 Flächen nur Navy + Weiß. Text-Blau #0066cc, Produkt-Blau #1f6feb nur Grafik. Klick-Demo: css/bs-demo.css (.bsd).
 ===================================================================== */
:root {
  --bs-navy:#0b1c3d; --bs-deep:#14315f; --bs-blue:#1f6feb; --bs-accent:#0066cc; --bs-light:#9fd3ff;
  --bs-ok:#16a34a; --bs-ink:#0f1b2d; --bs-body:#4a5768; --bs-line:#e3e9f2; --bs-soft:#f5f8fc;
}
.bs-wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
.bs-sec { padding:96px 0; }
.bs-sec:not(.bs-sec--navy) + .bs-sec:not(.bs-sec--navy) { padding-top:24px; }
.bs-sec--navy { background:linear-gradient(160deg,#0b1c3d 0%,#14315f 100%); color:#fff; --m-dot:#fff; }
.bs-eyebrow { font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bs-accent); margin:0 0 14px; }
.bs-h2 { font-size:clamp(26px,3.2vw,40px); line-height:1.12; letter-spacing:-.02em; color:var(--bs-ink); margin:0; max-width:22ch; }
.bs-lead { font-size:17px; line-height:1.62; color:var(--bs-body); margin:16px 0 0; max-width:62ch; }
.bs-note { font-size:13px; color:#5f6b7d; margin:22px 0 0; line-height:1.5; max-width:70ch; }
.bs-sec--navy .bs-eyebrow { color:var(--bs-light); }
.bs-sec--navy .bs-h2 { color:#fff; }
.bs-sec--navy .bs-lead { color:#c3d3e9; }
.bs-sec--navy .bs-note { color:#a9bcd8; }

.bs-btn { display:inline-flex; align-items:center; gap:9px; padding:14px 24px; border-radius:12px; font-weight:650; font-size:15px;
  text-decoration:none; white-space:nowrap; transition:transform .18s cubic-bezier(.16,1,.3,1), background-color .18s, border-color .18s; }
.bs-btn:active { transform:translateY(1px); }
.bs-btn--primary { background:var(--bs-accent); color:#fff; }
.bs-btn--quiet { color:#fff; border:1px solid rgba(255,255,255,.34); }
@media (hover:hover) {
  .bs-btn--primary:hover { background:#0a6fd6; color:#fff; }
  .bs-btn--quiet:hover { border-color:rgba(255,255,255,.7); color:#fff; }
}
.bs-ic { width:24px; height:24px; display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ============ 1 · HERO ============ */
.bs-hero { background:linear-gradient(160deg,#0b1c3d 0%,#14315f 62%,#0e2547 100%); color:#fff; padding:76px 0 84px; overflow:hidden; }
.bs-hero-grid { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:48px; align-items:center; }
.bs-hero h1 { font-size:clamp(32px,3.9vw,50px); line-height:1.08; letter-spacing:-.03em; color:#fff; margin:0; max-width:18ch; }
.bs-hero p { font-size:18px; line-height:1.6; color:#c3d3e9; margin:20px 0 0; max-width:50ch; }
.bs-hero-btns { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.bs-illu { width:100%; max-width:580px; justify-self:end; }
.bs-hero .bs-logo { margin-bottom:30px; }
.bs-logo { display:inline-flex; align-items:center; gap:14px; }
.bs-logo-mark { flex:none; display:block; filter:drop-shadow(0 8px 20px rgba(47,125,225,.35)); }
.bs-logo-txt { display:flex; flex-direction:column; line-height:1.05; }
.bs-logo-txt b { font-size:26px; font-weight:800; letter-spacing:-.03em; color:#fff; }
.bs-logo-txt b i { font-style:normal; font-weight:500; color:#9fd3ff; }
.bs-logo-txt span { font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(232,234,238,.72); margin-top:6px; }
.bsi { width:100%; height:auto; display:block; overflow:visible; font-family:inherit; }
.bsi-lbl { font-size:7.4px; font-weight:600; fill:rgba(232,234,238,.82); letter-spacing:.02em; }
.bsi-name { font-size:8px; font-weight:800; fill:#fff; letter-spacing:.08em; }
.bsi-synctxt { font-size:8px; font-weight:700; fill:#fff; }
.bsi-flow path { stroke-dasharray:2 10; opacity:0; }
.bsi-flow2 { stroke-dasharray:4 4; }
.bsi-pulse { opacity:0; transform-box:fill-box; transform-origin:center; }
.bsi-orbit { transform-origin:118px 96px; }
.bsi-box, .bsi-sync, .bsi-truck { transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion:no-preference) {
  .bsi-flow path { opacity:.95; animation:bsiFlow 1.6s linear infinite; }
  .bsi-flow path:nth-child(2) { animation-delay:-.5s; } .bsi-flow path:nth-child(3) { animation-delay:-1s; }
  .bsi-flow2 { animation:bsiFlow2 1.2s linear infinite; }
  .bsi-orbit { animation:bsiSpin 14s linear infinite; }
  .bsi-pulse { animation:bsiPulse 3.2s ease-out infinite; }
  .bsi-box--new { animation:bsiPop 3.2s cubic-bezier(.16,1,.3,1) infinite; }
  .bsi-sync { animation:bsiSync 3.2s ease-in-out infinite; }
  .bsi-truck { animation:bsiDrive 3.2s cubic-bezier(.6,0,.4,1) infinite; }
}
@keyframes bsiFlow { to { stroke-dashoffset:-24; } }
@keyframes bsiFlow2 { to { stroke-dashoffset:-16; } }
@keyframes bsiSpin { to { transform:rotate(360deg); } }
@keyframes bsiPulse { 0% { opacity:.8; transform:scale(1); } 60%,100% { opacity:0; transform:scale(1.75); } }
@keyframes bsiPop { 0%,18% { opacity:0; transform:translateY(-8px); } 32%,100% { opacity:1; transform:none; } }
@keyframes bsiSync { 0%,34% { opacity:.55; } 44%,100% { opacity:1; } }
@keyframes bsiDrive { 0%,48% { transform:none; opacity:1; } 80% { transform:translateX(34px); opacity:0; } 81% { transform:translateX(-18px); opacity:0; } 100% { transform:none; opacity:1; } }

/* ============ 2 · KLICK-DEMO: Rahmen kommt aus css/bs-demo.css ============ */
#oberflaeche { scroll-margin-top:72px; }

/* ============ 3 · PROBLEM ============ */
.bs-pain { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:48px; }
.bs-pain-card { background:#fff; border:1px solid var(--bs-line); border-radius:18px; padding:26px 24px 24px; }
.bs-pain-card .bs-ic { width:30px; height:30px; color:var(--bs-accent); margin-bottom:18px; }
.bs-pain-card h3 { font-size:17px; color:var(--bs-ink); margin:0 0 8px; letter-spacing:-.01em; }
.bs-pain-card p { font-size:14.5px; line-height:1.55; color:var(--bs-body); margin:0; }

/* ============ FÜR WEN ============ */
.bs-who { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:48px; }
.bs-who-card { border-top:3px solid var(--bs-blue); padding:24px 4px 0; }
.bs-who-card h3 { font-size:18px; color:var(--bs-ink); margin:0 0 8px; letter-spacing:-.01em; }
.bs-who-card p { font-size:14.5px; line-height:1.6; color:var(--bs-body); margin:0; }

/* ============ FAQ ============ */
.bs-faq { margin-top:44px; max-width:840px; }
.bs-faq details { border-top:1px solid var(--bs-line); }
.bs-faq details:last-of-type { border-bottom:1px solid var(--bs-line); }
.bs-faq summary { list-style:none; cursor:pointer; padding:22px 40px 22px 0; min-height:44px; position:relative; font-size:17px; font-weight:600; color:var(--bs-ink); letter-spacing:-.01em; }
.bs-faq summary::-webkit-details-marker { display:none; }
.bs-faq summary::after { content:"+"; position:absolute; right:6px; top:19px; font-size:22px; font-weight:400; color:var(--bs-accent); line-height:1; }
.bs-faq details[open] summary::after { content:"\2212"; }
.bs-faq p { margin:0 0 24px; font-size:15px; line-height:1.65; color:var(--bs-body); max-width:66ch; }

/* ============ ABSCHLUSS ============ */
.bs-final { background:linear-gradient(160deg,#0b1c3d,#14315f); color:#fff; padding:92px 0; }
.bs-final h2 { font-size:clamp(26px,3.4vw,42px); line-height:1.12; letter-spacing:-.02em; margin:0; max-width:18ch; color:#fff; }
.bs-final p { color:#c3d3e9; font-size:16.5px; line-height:1.6; margin:18px 0 0; max-width:54ch; }
.bs-final-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:48px; align-items:end; }

@media (prefers-reduced-motion:no-preference) {
  [data-mx-reveal] { opacity:0; transform:translateY(18px); }
  [data-mx-reveal].is-in { opacity:1; transform:none; transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
}
/* ============ 4 · ABLAUF als Animation (.bs-proc, js/bsmind-page.js) ============
   Ohne JS / bei reduzierter Bewegung: Endzustand. JS setzt .is-armed (Startzustand) und .is-run (einmalig im Bild). */
.bs-proc { margin-top:56px; }
.bs-proc-main { position:relative; }
.bs-proc-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); position:relative; }
.bs-proc-line { position:absolute; top:13px; left:calc(100% / 12); right:calc(100% / 12); height:2px; background:var(--bs-line); }
.bs-proc-fill { position:absolute; inset:0; background:var(--bs-blue); transform-origin:left center; }
.bs-proc-step { text-align:center; padding:0 8px; position:relative; }
.bs-proc-dot { display:block; position:relative; width:28px; height:28px; margin:0 auto 16px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px var(--bs-line) inset; }
.bs-proc-dot::before { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 2px var(--bs-blue) inset; }
.bs-proc-dot::after { content:""; position:absolute; inset:8px; border-radius:50%; background:var(--bs-blue); }
.bs-proc-step:last-child .bs-proc-dot::before { box-shadow:0 0 0 2px var(--bs-ok) inset; }
.bs-proc-step:last-child .bs-proc-dot::after { background:var(--bs-ok); }
.bs-proc-step b, .bs-proc-ret b { display:block; font-size:16px; font-weight:650; color:var(--bs-ink); letter-spacing:-.01em; }
.bs-proc-txt > span { display:block; font-size:13.5px; line-height:1.45; color:var(--bs-body); margin-top:4px; }
.bs-proc-txt { display:block; }

.bs-proc-ret { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); align-items:center; margin-top:14px; }
.bs-proc-stub { grid-column:4; grid-row:1; justify-self:center; width:0; height:30px; border-left:2px dashed #b4c2d6; }
.bs-proc-ret ol { grid-column:4 / 7; grid-row:2; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); position:relative; }
.bs-proc-ret ol::before { content:""; position:absolute; top:10px; left:calc(100% / 6); right:calc(100% / 6); border-top:2px dashed #b4c2d6; }
.bs-proc-ret li { text-align:center; position:relative; }
.bs-proc-ret b { font-size:14.5px; font-weight:600; color:var(--bs-deep); }
.bs-proc-mini { display:block; width:20px; height:20px; margin:0 auto 10px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px #7f97b8 inset; position:relative; }
.bs-proc-mini::after { content:""; position:absolute; inset:6px; border-radius:50%; background:#7f97b8; }
.bs-proc-ret li.is-q .bs-proc-mini { box-shadow:0 0 0 2px #c98a12 inset; }
.bs-proc-ret li.is-q .bs-proc-mini::after { background:#e0a83a; }
.bs-proc-ret-note { grid-column:1 / 4; grid-row:2; margin:0; padding-right:28px; text-align:right; font-size:14px; line-height:1.5; color:var(--bs-body); }
.bs-proc-ret-note strong { color:var(--bs-ink); font-weight:650; }

@media (prefers-reduced-motion:no-preference) {
  .bs-proc.is-armed .bs-proc-fill { transform:scaleX(0); }
  .bs-proc.is-armed .bs-proc-dot::before, .bs-proc.is-armed .bs-proc-stub,
  .bs-proc.is-armed .bs-proc-ret ol::before, .bs-proc.is-armed .bs-proc-ret-note { opacity:0; }
  .bs-proc.is-armed :is(.bs-proc-dot, .bs-proc-mini)::after { transform:scale(0); }
  .bs-proc.is-armed .bs-proc-txt, .bs-proc.is-armed .bs-proc-ret li b { opacity:.3; }
  .bs-proc.is-armed .bs-proc-mini { transform:scale(.6); opacity:0; }
  .bs-proc.is-run .bs-proc-fill { transform:none; transition:transform 2.1s linear .1s; }
  .bs-proc.is-run .bs-proc-dot::before { opacity:1; transition:opacity .3s ease calc(.1s + var(--i) * .42s); }
  .bs-proc.is-run .bs-proc-dot::after { transform:none; transition:transform .45s cubic-bezier(.34,1.56,.64,1) calc(.1s + var(--i) * .42s); }
  .bs-proc.is-run .bs-proc-txt { opacity:1; transition:opacity .45s ease calc(.1s + var(--i) * .42s); }
  .bs-proc.is-run .bs-proc-stub, .bs-proc.is-run .bs-proc-ret ol::before { opacity:1; transition:opacity .5s ease 2.35s; }
  .bs-proc.is-run .bs-proc-mini { transform:none; opacity:1; transition:transform .45s cubic-bezier(.34,1.56,.64,1) calc(2.5s + var(--j) * .3s), opacity .3s ease calc(2.5s + var(--j) * .3s); }
  .bs-proc.is-run .bs-proc-mini::after { transform:none; transition:transform .4s cubic-bezier(.34,1.56,.64,1) calc(2.65s + var(--j) * .3s); }
  .bs-proc.is-run .bs-proc-ret li b { opacity:1; transition:opacity .4s ease calc(2.5s + var(--j) * .3s); }
  .bs-proc.is-run .bs-proc-ret-note { opacity:1; transition:opacity .6s ease 3.4s; }
}

/* ============ 5 · MODULE als Reiter (.bs-mod, Navy) ============ */
.bs-mod { margin-top:44px; }
.bs-mod-tabs { display:none; }
.bs-mod.is-js .bs-mod-tabs { display:inline-flex; gap:4px; padding:5px; max-width:100%; position:relative;
  border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(255,255,255,.04); }
.bs-mod-tab { position:relative; min-height:44px; padding:0 22px; border:0; border-radius:999px; background:transparent; color:#c3d3e9;
  font:inherit; font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap; overflow:hidden; -webkit-tap-highlight-color:transparent; }
.bs-mod-tab[aria-selected="true"] { background:#fff; color:var(--bs-navy); }
.bs-mod-tab:focus-visible { outline:2px solid #9fd3ff; outline-offset:2px; }
@media (hover:hover) { .bs-mod-tab[aria-selected="false"]:hover { color:#fff; background:rgba(255,255,255,.08); } }
.bs-mod-bar { position:absolute; left:18px; right:18px; bottom:7px; height:2px; border-radius:2px; background:var(--bs-blue); transform:scaleX(0); transform-origin:left center; opacity:0; }
.bs-mod.is-auto .bs-mod-tab[aria-selected="true"] .bs-mod-bar { opacity:1; animation:bsModBar 6s linear forwards; }
.bs-mod.is-auto.is-paused .bs-mod-tab[aria-selected="true"] .bs-mod-bar { animation-play-state:paused; }
@keyframes bsModBar { to { transform:none; } }

.bs-mod-panel { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(32px,5vw,64px); align-items:center; margin-top:34px; }
.bs-mod-panel + .bs-mod-panel { margin-top:56px; }
.bs-mod.is-js .bs-mod-panel + .bs-mod-panel { margin-top:34px; }
.bs-mod-panel[hidden] { display:none; }
.bs-mod-art { aspect-ratio:3 / 2; padding:clamp(10px,2vw,22px); border:1px solid rgba(255,255,255,.14); border-radius:22px;
  background:radial-gradient(120% 90% at 30% 20%,rgba(47,125,225,.16),rgba(255,255,255,.03) 70%); }
.bs-mod-art svg { display:block; width:100%; height:100%; overflow:visible; font-family:inherit; }
.bs-mod-copy h3 { font-size:clamp(22px,2.4vw,30px); line-height:1.15; letter-spacing:-.02em; color:#fff; margin:0 0 22px; }
.bs-mod-copy ul { list-style:none; margin:0; padding:0; }
.bs-mod-copy li { position:relative; padding:15px 0 15px 32px; border-top:1px solid rgba(255,255,255,.14); font-size:16px; line-height:1.5; color:#dbe6f5; }
.bs-mod-copy li:last-child { border-bottom:1px solid rgba(255,255,255,.14); }
.bs-mod-copy li::before { content:""; position:absolute; left:3px; top:22px; width:12px; height:6px; border-left:2px solid #9fd3ff; border-bottom:2px solid #9fd3ff; transform:rotate(-45deg); }
@media (prefers-reduced-motion:no-preference) {
  .bs-mod.is-js .bs-mod-panel:not([hidden]) { animation:bsModIn .55s cubic-bezier(.16,1,.3,1); }
}
@keyframes bsModIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* SVG-Grafiken der Module: Grundzustand = sinnvolles Standbild (reduced motion), Bewegung nur bei no-preference */
.bm-lbl { font-size:10.5px; font-weight:600; fill:rgba(232,234,238,.78); letter-spacing:.02em; }
.bm-lbl--b { fill:#fff; font-weight:700; }
.bm-line { stroke:rgba(255,255,255,.26); stroke-width:1.4; fill:none; }
.bm-dash { stroke:rgba(159,211,255,.55); stroke-width:1.4; stroke-dasharray:3 5; fill:none; }
.bm-node { fill:#0e2547; stroke:rgba(255,255,255,.4); stroke-width:1.4; }
.bm-on { fill:var(--bs-blue); }
.bm-mv, .bm-on, .bm-pop, .bm-var { transform-box:fill-box; transform-origin:center; }
/* Verkauf: Beleg wandert durch die Stationen */
.bm-sale-doc { transform:translateX(150px); }
.bm-sale-on4 { opacity:0; }
/* Lager: Kisten unterwegs zwischen zwei Lagern */
.bm-move:nth-of-type(1) { transform:translateX(14px); } .bm-move:nth-of-type(2) { transform:translateX(44px); } .bm-move:nth-of-type(3) { transform:translateX(74px); }
/* Einkauf: Lieferung, Prüfung, Bestand */
.bm-buy-box { transform:translateX(178px); }
/* Produkte: Varianten gefächert (Endzustand) */
/* Finanzen: Stempel bezahlt sichtbar */
@media (prefers-reduced-motion:no-preference) {
  .bm-dash { animation:bmDash 1.4s linear infinite; }
  .bm-sale-doc { animation:bmSale 8s cubic-bezier(.65,0,.35,1) infinite; }
  .bm-sale-on1 { animation:bmOn1 8s linear infinite; } .bm-sale-on2 { animation:bmOn2 8s linear infinite; }
  .bm-sale-on3 { animation:bmOn3 8s linear infinite; } .bm-sale-on4 { animation:bmOn4 8s linear infinite; }
  .bm-move { animation:bmMove 4.5s linear infinite; }
  .bm-move:nth-of-type(2) { animation-delay:-1.5s; } .bm-move:nth-of-type(3) { animation-delay:-3s; }
  .bm-buy-box { animation:bmBuy 7s cubic-bezier(.65,0,.35,1) infinite; }
  .bm-buy-ok { animation:bmBuyOk 7s ease infinite; }
  .bm-var { animation:bmFan 7s cubic-bezier(.16,1,.3,1) infinite; }
  .bm-var-link { animation:bmLink 7s ease infinite; }
  .bm-fin-row:nth-of-type(1) { animation:bmRow1 7.5s ease infinite; } .bm-fin-row:nth-of-type(2) { animation:bmRow2 7.5s ease infinite; } .bm-fin-row:nth-of-type(3) { animation:bmRow3 7.5s ease infinite; }
  .bm-fin-stamp { animation:bmStamp 7.5s cubic-bezier(.34,1.56,.64,1) infinite; }
}
@keyframes bmDash { to { stroke-dashoffset:-16; } }
@keyframes bmSale { 0% { transform:none; opacity:0; } 6%,18% { transform:none; opacity:1; } 28%,40% { transform:translateX(75px); } 50%,62% { transform:translateX(150px); } 72%,90% { transform:translateX(225px); opacity:1; } 97%,100% { transform:translateX(225px); opacity:0; } }
@keyframes bmOn1 { 0%,4% { opacity:0; } 8%,92% { opacity:1; } 98%,100% { opacity:0; } }
@keyframes bmOn2 { 0%,26% { opacity:0; } 30%,92% { opacity:1; } 98%,100% { opacity:0; } }
@keyframes bmOn3 { 0%,48% { opacity:0; } 52%,92% { opacity:1; } 98%,100% { opacity:0; } }
@keyframes bmOn4 { 0%,70% { opacity:0; } 74%,92% { opacity:1; } 98%,100% { opacity:0; } }
@keyframes bmMove { 0% { transform:none; opacity:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { transform:translateX(88px); opacity:0; } }
@keyframes bmBuy { 0% { transform:none; opacity:0; } 6%,10% { transform:none; opacity:1; } 30%,52% { transform:translateX(90px); } 74%,88% { transform:translateX(178px); opacity:1; } 96%,100% { transform:translateX(178px); opacity:0; } }
@keyframes bmBuyOk { 0%,34% { opacity:0; transform:scale(.4); } 40%,92% { opacity:1; transform:none; } 98%,100% { opacity:0; } }
@keyframes bmFan { 0%,8% { opacity:0; transform:translate(var(--fx),-96px) scale(.4); } 32%,84% { opacity:1; transform:none; } 96%,100% { opacity:0; transform:translate(var(--fx),-96px) scale(.4); } }
@keyframes bmLink { 0%,18% { opacity:0; } 34%,82% { opacity:1; } 94%,100% { opacity:0; } }
@keyframes bmRow1 { 0%,4% { opacity:.28; } 9%,94% { opacity:1; } 100% { opacity:.28; } }
@keyframes bmRow2 { 0%,24% { opacity:.28; } 29%,94% { opacity:1; } 100% { opacity:.28; } }
@keyframes bmRow3 { 0%,44% { opacity:.28; } 49%,94% { opacity:1; } 100% { opacity:.28; } }
@keyframes bmStamp { 0%,58% { opacity:0; transform:scale(1.6) rotate(-14deg); } 66%,94% { opacity:1; transform:rotate(-8deg); } 100% { opacity:0; transform:rotate(-8deg); } }
.bm-fin-stamp { transform:rotate(-8deg); }

/* ============ 6 · VORHER / NACHHER als Umschalter (.bs-cmp) ============ */
.bs-cmp { margin-top:40px; max-width:900px; }
.bs-cmp-switch { display:none; }
.bs-cmp.is-js .bs-cmp-switch { display:inline-grid; grid-template-columns:repeat(2,minmax(0,1fr)); position:relative; padding:4px; border-radius:999px; background:#eef3f9; border:1px solid var(--bs-line); }
.bs-cmp-switch button { position:relative; z-index:1; min-height:44px; padding:0 22px; border:0; border-radius:999px; background:none; font:inherit; font-size:15px; font-weight:650; color:#4a5768; cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.bs-cmp-switch button[aria-pressed="true"] { color:#fff; }
.bs-cmp-switch button:focus-visible { outline:2px solid var(--bs-accent); outline-offset:2px; }
.bs-cmp-knob { position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:999px; background:#5f6b7d; }
.bs-cmp-knob::after { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--bs-navy); opacity:0; }
.bs-cmp[data-state="in"] .bs-cmp-knob { transform:translateX(100%); }
.bs-cmp[data-state="in"] .bs-cmp-knob::after { opacity:1; }
.bs-cmp-list { position:relative; overflow:hidden; margin:24px 0 0; padding:6px 32px; border:1px solid var(--bs-line); border-radius:20px; background:#fff; }
.bs-cmp-list::before { content:""; position:absolute; inset:0; background:linear-gradient(160deg,#0b1c3d,#14315f); opacity:0; }
.bs-cmp[data-state="in"] .bs-cmp-list::before { opacity:1; }
.bs-cmp-head, .bs-cmp-row { position:relative; display:grid; grid-template-columns:190px minmax(0,1fr) minmax(0,1fr); gap:8px 24px; padding:18px 0; margin:0; border-top:1px solid rgba(127,145,170,.26); }
.bs-cmp-head { border-top:0; font-size:13px; font-weight:700; color:var(--bs-ink); }
.bs-cmp-head span:first-child { grid-column:2; }
.bs-cmp-row dt { font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#5b6679; align-self:center; }
.bs-cmp-row dd { margin:0; font-size:15.5px; line-height:1.5; color:var(--bs-body); }
.bs-cmp-row dd.is-in { color:var(--bs-ink); font-weight:600; }
.bs-cmp.is-js .bs-cmp-head { display:none; }
.bs-cmp-list dl { margin:0; }
.bs-cmp.is-js .bs-cmp-row:first-child { border-top:0; }
.bs-cmp.is-js .bs-cmp-row { grid-template-columns:190px minmax(0,1fr); }
.bs-cmp.is-js .bs-cmp-row dd { grid-column:2; grid-row:1; }
.bs-cmp.is-js[data-state="out"] .bs-cmp-row dd.is-in, .bs-cmp.is-js[data-state="in"] .bs-cmp-row dd.is-out { opacity:0; }
.bs-cmp.is-js[data-state="in"] .bs-cmp-row dt { color:#8fb0dc; }
.bs-cmp.is-js[data-state="in"] .bs-cmp-row dd.is-in { color:#fff; }
.bs-cmp.is-js[data-state="in"] .bs-cmp-row { border-color:rgba(255,255,255,.14); }
.bs-cmp.is-js[data-state="in"] .bs-cmp-list { border-color:#0b1c3d; }
.bs-cmp-row dd::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; margin:0 10px 2px 0; background:#b4c2d6; }
.bs-cmp-row dd.is-in::before { background:var(--bs-ok); }
@media (prefers-reduced-motion:no-preference) {
  .bs-cmp-knob { transition:transform .45s cubic-bezier(.16,1,.3,1); }
  .bs-cmp-knob::after, .bs-cmp-list::before { transition:opacity .45s ease; }
  .bs-cmp-row dd { transition:opacity .4s ease; }
}

@media (prefers-reduced-motion:no-preference) {
  [data-mx-reveal] { opacity:0; transform:translateY(18px); }
  [data-mx-reveal].is-in { opacity:1; transform:none; transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
}

@media (max-width:1024px) {
  .bs-pain { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bs-proc-step b { font-size:15px; }
  .bs-proc-txt > span { font-size:13px; }
}
@media (max-width:760px) {
  .bs-sec { padding:60px 0; }
  .bs-sec:not(.bs-sec--navy) + .bs-sec:not(.bs-sec--navy) { padding-top:12px; }
  .bs-wrap { padding:0 20px; }
  .bs-hero { padding:46px 0 44px; }
  .bs-hero-grid { grid-template-columns:1fr; gap:26px; }
  .bs-hero .bs-logo { margin-bottom:22px; }
  .bs-hero h1, .bs-hero p { max-width:none; }
  .bs-hero-btns .bs-btn { flex:1 1 100%; justify-content:center; }
  .bs-illu { max-width:460px; margin:0 auto; }
  .bs-pain { grid-template-columns:1fr; margin-top:32px; }
  .bs-pain.m-swipe { --m-card:78%; }

  /* Ablauf vertikal */
  .bs-proc { margin-top:36px; }
  .bs-proc-steps { grid-template-columns:1fr; }
  .bs-proc-line { top:14px; bottom:14px; left:13px; right:auto; width:2px; height:auto; }
  .bs-proc-fill { transform-origin:center top; }
  .bs-proc-step { display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:18px; text-align:left; padding:0 0 22px; }
  .bs-proc-step:last-child { padding-bottom:0; }
  .bs-proc-dot { grid-row:1 / span 2; margin:0; }
  .bs-proc-step b { font-size:16px; padding-top:3px; }
  .bs-proc-ret { grid-template-columns:1fr; margin-top:26px; padding:18px 16px 16px; border:1px dashed #b4c2d6; border-radius:16px; }
  .bs-proc-stub { display:none; }
  .bs-proc-ret ol { grid-column:1; grid-row:2; }
  .bs-proc-ret-note { grid-column:1; grid-row:1; text-align:left; padding:0 0 16px; }
  .bs-proc-ret b { font-size:13.5px; }

  /* Module: Reiter als wischbare Pillen */
  .bs-mod { margin-top:28px; }
  .bs-mod.is-js .bs-mod-tabs { display:flex; gap:8px; padding:2px 20px; margin:0 -20px; border:0; border-radius:0; background:none; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; max-width:none; }
  .bs-mod-tabs::-webkit-scrollbar { display:none; }
  .bs-mod-tab { flex:none; padding:0 18px; box-shadow:0 0 0 1px rgba(255,255,255,.2) inset; }
  .bs-mod-tab[aria-selected="true"] { box-shadow:none; }
  .bs-mod-panel { grid-template-columns:1fr; gap:22px; margin-top:22px; }
  .bs-mod-copy h3 { margin-bottom:14px; }
  .bs-mod-copy li { font-size:15px; padding:13px 0 13px 30px; }
  .bs-mod-copy li::before { top:20px; }

  /* Vergleich */
  .bs-cmp.is-js .bs-cmp-switch { display:grid; width:100%; }
  .bs-cmp-switch button { padding:4px 8px; font-size:14px; line-height:1.2; white-space:normal; }
  .bm-lbl { font-size:12.5px; }
  /* Grafik randlos über die volle Breite: Maßstab ca. 1,26, Beschriftung damit ab 360 px Breite ≥ 14 px */
  .bs-mod-art { margin:0 -20px; padding:6px; aspect-ratio:auto; border-radius:0; border-left:0; border-right:0; }
  .bs-mod-art svg { height:auto; }
  .bs-cmp-list { padding:4px 20px; }
  .bs-cmp-head { display:none; }
  .bs-cmp-row, .bs-cmp.is-js .bs-cmp-row { grid-template-columns:1fr; gap:6px; padding:16px 0; }
  .bs-cmp-row dd.is-in { grid-row:auto; }
  .bs-cmp.is-js .bs-cmp-row dd { grid-column:1; grid-row:2; }

  .bs-who { grid-template-columns:1fr; }
  .bs-final { padding:60px 0; }
  .bs-final-grid { grid-template-columns:1fr; gap:28px; align-items:start; }
  .bs-final .bs-btn { flex:1 1 100%; justify-content:center; }
}