/* Online Badplaner: Seite im Shop (StrongTheme / BaedermaxxThemeNeu). Wird nur auf dieser Seite geladen. */

/* Volle Breite: Die Kategorie-Seitenleiste ist auf dieser Seite ausgeblendet. Ohne Seitenleiste greift die Theme-Regel
   ".sidebar-left + .content--wrapper" nicht, und .content--wrapper behielte links den Platz der Leiste. */
.is--ctl-bmaxxbadplaner .content-main--inner > .content--wrapper,
.is--ctl-bmaxxbadplaner .content--wrapper {
    margin-left: 0;
    width: auto;
}

.bmaxx-badplaner-shop {
    width: 100%;
    margin: 0 0 16px;
    padding: 0;
}

/* Die Höhe setzt embed.js passend zum Fenster (Planungsleiste mit Preis und Anfrage bleibt sichtbar);
   der calc()-Wert gilt, solange das Skript noch nicht gelaufen ist. */
.bmaxx-badplaner-frame {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 140px);
    min-height: 680px;
    border: 1px solid #e0e3e8;
    border-radius: 8px;
    background: #fff;
}

/* 0.1.15: Vollfenster-Ersatz für den Planer (iPhone-Safari und alle Browser ohne Vollbild-Funktion im Rahmen). embed.js setzt die Klassen.
   Das echte Vollbild braucht diese Regeln nicht: Dort füllt der Browser den Rahmen selbst. */
/* Echtes Vollbild: Der Browser macht den Rahmen bildschirmgroß, lässt aber Rand und runde Ecken stehen (schwarze Ecken). Beides entfällt. */
.bmaxx-badplaner-frame:fullscreen { border: 0; border-radius: 0; }
.bmaxx-badplaner-frame:-webkit-full-screen { border: 0; border-radius: 0; }
html.bmb-fs-on, html.bmb-fs-on body { overflow: hidden !important; overscroll-behavior: none; }
html.bmb-fs-on .bmaxx-badplaner-frame { position: fixed !important; inset: 0 !important; z-index: 2147483000 !important; width: 100% !important; height: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
html.bmb-fs-on .bmb-fs-off { visibility: hidden !important; }
html.bmb-fs-on .bmb-fs-anc { transform: none !important; filter: none !important; perspective: none !important; backdrop-filter: none !important; contain: none !important; will-change: auto !important; }


/* ---------- 0.1.13: Seitentext rund um den Planer, größer und großzügiger. Hell und ruhig: Kopfband, sechs Abschnitte, ein Aufruf. ----------
   0.1.28: Farben wie BmaxxOrderOverview – neutrale Flächen (Grau statt Hellblau), Werte und Überschriften in Navy, Blau nur dosiert
   für Knöpfe, Verweise, Symbole und kleine Hinweise („neu“). Kataloge mit Titelbild-Fächer, Marken mit Herstellerlogo. */
.is--ctl-bmaxxbadplaner { scroll-behavior: smooth; }
.bmb-seo, .is--ctl-bmaxxbadplaner .bmb-seo-hero {
    --bmb-teal: #0099cc; --bmb-deep: #0b6f96; --bmb-btn: #0a79a8; --bmb-navy: #1d2733; --bmb-ink: #2b3640; --bmb-mute: #56626d;
    --bmb-tint: #f5f6f8; --bmb-tint2: #eef1f4; --bmb-line: #e5e9ee; --bmb-line2: #d5dce3; --bmb-ok: #1b9e5f;
}

/* Kopfband: heller Verlauf mit feinem Kachelraster, Grafik rechts. Größer als bisher, aber mit Maß: Der Planer darunter soll auf einem Full-HD-Bildschirm weiter fast ganz zu sehen sein. */
.is--ctl-bmaxxbadplaner .bmb-seo-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 0 0 16px; padding: 22px 52px 22px 48px; overflow: hidden; border: 1px solid #e3e8ed; border-radius: 22px; color: var(--bmb-navy);
    background-color: #f5f7f9;
    background-image: radial-gradient(circle at 87% 50%, rgba(255,255,255,.95) 0, rgba(255,255,255,0) 36%), linear-gradient(rgba(42,52,65,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(42,52,65,.045) 1px, transparent 1px), linear-gradient(115deg, #eef1f4 0%, #f7f9fa 62%, #fff 100%);
    background-size: auto, 36px 36px, 36px 36px, auto; }
.is--ctl-bmaxxbadplaner .bmb-seo-hero .bmb-hero-txt { flex: 1 1 auto; min-width: 0; max-width: 880px; }
.is--ctl-bmaxxbadplaner .bmb-seo-hero h1 { margin: 0 0 10px; font-size: clamp(26px, 2.2vw + 14px, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -.4px; color: var(--bmb-navy); text-transform: none; text-wrap: balance; }
.is--ctl-bmaxxbadplaner .bmb-seo-hero h1 .bmb-hl { color: var(--bmb-deep); }
.is--ctl-bmaxxbadplaner .bmb-seo-hero .bmb-hero-lead { max-width: 820px; margin: 0 0 18px; font-size: 19px; line-height: 1.5; color: #3b4852; text-wrap: balance; }
.is--ctl-bmaxxbadplaner .bmb-seo-hero .bmb-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.is--ctl-bmaxxbadplaner .bmb-seo-hero .bmb-hero-chips li { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 18px 6px 7px; border: 1px solid #e3e8ed; border-radius: 99px; background: #fff; color: var(--bmb-navy); font-size: 16px; font-weight: 700; line-height: 1.3; }
.is--ctl-bmaxxbadplaner .bmb-seo-hero .bmb-hero-chips li::before { content: none; }
.is--ctl-bmaxxbadplaner .bmb-seo-hero .bmb-ico { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--bmb-teal); fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
.is--ctl-bmaxxbadplaner .bmb-seo-hero .bmb-hero-img { flex: none; display: block; width: auto; height: 214px; max-width: 42%; margin: -2px 0; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(30,40,52,.16)); }

/* Grundgerüst der Abschnitte */
.bmb-seo { width: 100%; margin: 26px 0 8px; color: var(--bmb-ink); font-size: 17px; line-height: 1.7; }
.bmb-seo *, .bmb-seo *::before, .bmb-seo *::after { box-sizing: border-box; }
:where(.bmb-seo) ul, :where(.bmb-seo) ol { list-style: none; margin: 0; padding: 0; }
:where(.bmb-seo) li { margin: 0; padding: 0; }
.bmb-seo li::before, .bmb-seo li::marker { content: none; }
.bmb-seo dl, .bmb-seo dt, .bmb-seo dd { margin: 0; padding: 0; }
.bmb-seo h2 { margin: 0 0 16px; font-size: 36px; line-height: 1.18; font-weight: 800; letter-spacing: -.3px; color: var(--bmb-navy); text-transform: none; text-wrap: balance; }
.bmb-seo h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.3; font-weight: 700; color: var(--bmb-navy); text-transform: none; }
.bmb-seo p { margin: 0 0 12px; }
.bmb-seo a { text-decoration: none; }
.bmb-seo .bmb-ico { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bmb-seo .bmb-fi { width: 64px; height: 64px; fill: currentColor; stroke: none; }
.bmb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bmb-inner { max-width: 1280px; margin: 0 auto; }
.bmb-inner--narrow { max-width: 980px; }
.bmb-seo .bmb-lead { max-width: 860px; margin: 0 0 36px; color: var(--bmb-mute); font-size: 19px; }

.bmb-band { margin: 0 0 24px; padding: 72px 56px; border: 1px solid var(--bmb-line); border-radius: 26px; background: #fff; }
.bmb-band--tint { border-color: var(--bmb-line); background-color: var(--bmb-tint);
    background-image: linear-gradient(rgba(42,52,65,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(42,52,65,.035) 1px, transparent 1px); background-size: 44px 44px; }

/* 1. Schritte */
.bmb-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px; margin-top: 44px; }
.bmb-step { position: relative; }
.bmb-step:not(:last-child)::after { content: ""; position: absolute; top: 60px; left: 152px; right: -34px; border-top: 2px dashed var(--bmb-line2); }
.bmb-step-ico { position: relative; display: inline-flex; width: 120px; height: 120px; margin-bottom: 28px; align-items: center; justify-content: center; border-radius: 34px; background: var(--bmb-tint2); color: var(--bmb-btn); transition: background .25s ease, color .25s ease, transform .25s ease; }
.bmb-step:hover .bmb-step-ico { background: var(--bmb-btn); color: #fff; transform: translateY(-4px); }
.bmb-step .bmb-fi { width: 76px; height: 76px; }
.bmb-step-num { position: absolute; top: -12px; right: -12px; width: 40px; height: 40px; border: 4px solid #fff; border-radius: 50%; background: var(--bmb-navy); color: #fff; font-size: 18px; font-weight: 800; line-height: 32px; text-align: center; }
.bmb-step h3 { margin: 0 0 10px; font-size: 23px; }
.bmb-step p { margin: 0; color: var(--bmb-mute); font-size: 17px; }

/* 2. Raumgrößen-Finder */
.bmb-room-tool { display: grid; grid-template-columns: 270px 300px minmax(0, 1fr); gap: 36px; align-items: center; margin: 0 0 28px; padding: 34px 40px; border: 1px solid var(--bmb-line); border-radius: 22px; background: #fff; box-shadow: 0 2px 4px rgba(20, 30, 45, .04), 0 10px 26px rgba(20, 30, 45, .06); }
.bmb-room-tool[hidden] { display: none; }
.bmb-room-form { display: grid; gap: 18px; }
.bmb-room-form label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; }
.bmb-room-form span { grid-column: 1 / -1; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--bmb-mute); }
.bmb-room-form input { width: 100%; height: 58px; padding: 0 14px; border: 2px solid var(--bmb-line2); border-radius: 14px; background: #fff; color: var(--bmb-navy); font: inherit; font-size: 24px; font-weight: 700; }
.bmb-room-form input:focus { outline: none; border-color: var(--bmb-btn); box-shadow: 0 0 0 4px rgba(10, 121, 168, .14); }
.bmb-room-form i { font-style: normal; font-size: 18px; font-weight: 700; color: var(--bmb-mute); }
.bmb-room-sketch { display: flex; align-items: center; justify-content: center; height: 210px; }
.bmb-room-box { display: flex; align-items: center; justify-content: center; width: 200px; height: 136px; border: 4px solid #3a4754; border-radius: 6px; background-color: var(--bmb-tint); background-image: linear-gradient(rgba(42,52,65,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(42,52,65,.06) 1px, transparent 1px); background-size: 14px 14px; transition: width .3s ease, height .3s ease; }
.bmb-room-a { font-size: 22px; font-weight: 800; color: var(--bmb-navy); }
.bmb-room-out h3 { margin: 0 0 10px; font-size: 24px; }
.bmb-room-out ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin: 0 0 12px; }
.bmb-room-out li { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.bmb-room-out li .bmb-ico { width: 24px; height: 24px; stroke-width: 2.6; }
.bmb-room-out li.is-yes .bmb-ico { color: var(--bmb-ok); }
.bmb-room-out li.is-no { color: #7b8791; }
.bmb-room-out p { margin: 0; font-size: 15.5px; color: var(--bmb-mute); }
.bmb-room-out a { color: var(--bmb-deep); font-weight: 700; text-decoration: underline; }
.bmb-bands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.bmb-bands li { position: relative; display: flex; flex-direction: column; padding: 26px 24px 20px; border: 1px solid var(--bmb-line); border-radius: 20px; background: #fff; }
.bmb-band-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0 0 12px; }
.bmb-bands b { display: inline-block; padding: 3px 14px; border-radius: 99px; background: var(--bmb-tint2); color: var(--bmb-navy); font-size: 15px; }
.bmb-band-ex { color: var(--bmb-mute); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bmb-bands h3 { font-size: 20px; }
.bmb-bands p { margin: 0; color: var(--bmb-mute); font-size: 16px; }

/* 0.1.29: Raumkarten mit 3D-Bild auf einer warmen Bühne. Beim Einblenden „landet“ der Raum, mit Maus neigt er sich zum Zeiger
   (--bmb-rx/--bmb-ry aus seo.js) und ein Licht folgt dahinter (--bmb-mx/--bmb-my). Die Karte zur Fläche im Finder leuchtet auf. */
.bmb-bands li.has-img { padding: 10px 10px 18px; box-shadow: 0 1px 2px rgba(20, 30, 45, .04), 0 8px 22px rgba(20, 30, 45, .05); }
.bmb-bands li.has-img > .bmb-band-top, .bmb-bands li.has-img > h3, .bmb-bands li.has-img > p, .bmb-bands li.has-img > .bmb-band-try { margin-left: 14px; margin-right: 14px; }
.bmb-band-img { position: relative; z-index: 0; display: block; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 0 16px; padding: 6% 5% 6%; overflow: hidden; border-radius: 14px; isolation: isolate;
    background: radial-gradient(90% 70% at 50% 58%, #fffdfa 0, #f6f1ea 58%, #ece4d9 100%); }
.bmb-band-img::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(circle at var(--bmb-mx, 50%) var(--bmb-my, 40%), rgba(255, 255, 255, .95) 0, rgba(255, 249, 238, .5) 28%, rgba(255, 255, 255, 0) 55%); }
.bmb-band-img img { position: relative; display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain;
    transform: perspective(900px) translateY(var(--bmb-ty, 0px)) rotateX(var(--bmb-rx, 0deg)) rotateY(var(--bmb-ry, 0deg)) scale(var(--bmb-z, 1));
    filter: drop-shadow(0 14px 14px rgba(55, 42, 28, .16)); transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .6s ease, opacity .6s ease; }
.bmb-js .bmb-bands li.has-img:not(.is-in) .bmb-band-img img { --bmb-ty: -28px; --bmb-z: .94; opacity: 0; }
.bmb-bands li.has-img:hover, .bmb-bands li.has-img.is-match { --bmb-ty: -8px; --bmb-z: 1.035; }
.bmb-bands li.has-img:hover .bmb-band-img img, .bmb-bands li.has-img.is-match .bmb-band-img img { filter: drop-shadow(0 26px 22px rgba(55, 42, 28, .22)); }
.bmb-bands li.is-tilt .bmb-band-img img { transition-duration: .18s, .6s, .6s; }
.bmb-bands li.is-tilt .bmb-band-img::before { opacity: 1; }

/* Ganze Karte klickbar: Knopf mit Fläche über der Karte; übernimmt die Beispielmaße in den Finder */
.bmb-bands li.is-try { cursor: pointer; transition: opacity .5s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.bmb-bands li.is-try:hover { border-color: var(--bmb-line2); transform: translateY(-4px); box-shadow: 0 2px 4px rgba(20, 30, 45, .05), 0 20px 40px rgba(20, 30, 45, .11); }
.bmb-band-try { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; margin-top: auto; padding: 14px 0 0; border: 0; background: none; color: var(--bmb-deep); font: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; cursor: pointer; }
.bmb-band-try::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 20px; }
.bmb-band-try:focus { outline: none; }
.bmb-band-try:focus-visible::after { outline: 3px solid #ffbf47; outline-offset: 3px; }
.bmb-seo .bmb-band-try .bmb-ico { width: 18px; height: 18px; stroke-width: 2.2; transition: transform .2s ease; }
.bmb-bands li.is-try:hover .bmb-band-try .bmb-ico { transform: translateX(4px); }
.bmb-bands li.is-match { border-color: var(--bmb-btn); box-shadow: 0 0 0 3px rgba(10, 121, 168, .14), 0 20px 42px rgba(20, 30, 45, .12); }
.bmb-match { position: absolute; top: 20px; left: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 10px; border-radius: 99px; background: var(--bmb-btn); color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.2; box-shadow: 0 6px 16px rgba(10, 121, 168, .3); pointer-events: none; animation: bmb-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
.bmb-match::before { content: ""; width: 5px; height: 10px; margin: -3px 2px 0 3px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.bmb-match[hidden] { display: none; }
@keyframes bmb-pop { from { opacity: 0; transform: translateY(6px) scale(.7); } to { opacity: 1; transform: none; } }

/* Flächen-Skala über den Karten: Die Marke gleitet zur Fläche aus dem Finder (nur in der Viererreihe) */
.bmb-scale { position: relative; height: 64px; margin: 0 0 14px; }
.bmb-scale-track { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.bmb-scale-seg { display: block; height: 6px; border-radius: 99px; background: var(--bmb-line2); transition: background .4s ease; }
.bmb-scale-seg.is-past { background: #a9c9d8; }
.bmb-scale-seg.is-on { background: var(--bmb-btn); }
.bmb-scale-pin { position: absolute; bottom: 20px; left: 0; display: flex; flex-direction: column; align-items: center; padding: 5px 14px 6px; border-radius: 12px; background: var(--bmb-navy); color: #fff; line-height: 1.15; white-space: nowrap; box-shadow: 0 8px 18px rgba(20, 30, 45, .22); opacity: 0; transform: translateX(-50%); transition: left .65s cubic-bezier(.34, 1.4, .64, 1), opacity .3s ease; }
.bmb-scale.is-on .bmb-scale-pin { opacity: 1; }
.bmb-scale-pin small { font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; opacity: .75; }
.bmb-scale-pin b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bmb-scale-pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 0 0 3px 0; background: var(--bmb-navy); transform: rotate(45deg); }
.bmb-scale-pin::before { content: ""; position: absolute; left: 50%; bottom: -24px; width: 14px; height: 14px; margin-left: -7px; border: 3px solid var(--bmb-btn); border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(10, 121, 168, .35); }
.bmb-room-tool.is-flash { animation: bmb-flash 1.1s ease-out; }
@keyframes bmb-flash { from { box-shadow: 0 0 0 0 rgba(10, 121, 168, .4), 0 10px 26px rgba(20, 30, 45, .06); } to { box-shadow: 0 0 0 22px rgba(10, 121, 168, 0), 0 10px 26px rgba(20, 30, 45, .06); } }

/* 3. Richtwerte und Tipps */
.bmb-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0 0 48px; }
.bmb-guide-col { padding: 28px 32px 14px; border: 1px solid var(--bmb-line); border-radius: 20px; background: #fff; }
.bmb-guide-col h3 { margin: 0 0 8px; font-size: 14.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .9px; color: var(--bmb-mute); }
.bmb-guide-col dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 15px 0; border-top: 1px solid #edf0f3; }
.bmb-guide-col dl > div:first-child { border-top: 0; }
.bmb-guide-col dt { font-size: 17px; line-height: 1.4; color: var(--bmb-ink); }
.bmb-guide-col dd { flex: none; max-width: 46%; text-align: right; }
.bmb-guide-col dd b { display: block; font-size: 20px; line-height: 1.25; color: var(--bmb-navy); white-space: nowrap; }
.bmb-guide-col dd small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.35; color: var(--bmb-mute); }
.bmb-seo .bmb-tips-h { margin: 0 0 22px; font-size: 26px; }
.bmb-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 48px; margin: 0 0 32px; }
.bmb-tips li { padding: 2px 0 2px 22px; border-left: 3px solid var(--bmb-line2); }
.bmb-tips strong { display: block; font-size: 19px; color: var(--bmb-navy); }
.bmb-tips span { display: block; color: var(--bmb-mute); font-size: 17px; }
.bmb-seo .bmb-seo-note { margin: 0; padding: 18px 24px; border-left: 4px solid var(--bmb-line2); border-radius: 4px 14px 14px 4px; background: var(--bmb-tint); color: var(--bmb-mute); font-size: 16px; }

/* 4. Produkte und Kataloge */
.bmb-insp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.bmb-seo h2 + .bmb-insp, .bmb-seo h2 + .bmb-seo-faq { margin-top: 36px; }
.bmb-insp-card { position: relative; display: flex; align-items: flex-start; gap: 28px; padding: 32px; overflow: hidden; border: 1px solid var(--bmb-line); border-radius: 24px; background: #fff; color: var(--bmb-ink); box-shadow: 0 2px 4px rgba(20, 30, 45, .04), 0 8px 22px rgba(20, 30, 45, .06); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.bmb-insp-card:only-child { grid-column: 1 / -1; }
.bmb-insp-card:hover, .bmb-insp-card:focus { border-color: var(--bmb-line2); box-shadow: 0 2px 4px rgba(20, 30, 45, .05), 0 14px 30px rgba(20, 30, 45, .11); transform: translateY(-3px); color: var(--bmb-ink); }
.bmb-card-ico { flex: none; display: inline-flex; width: 100px; height: 100px; align-items: center; justify-content: center; border-radius: 28px; background: var(--bmb-tint2); color: var(--bmb-btn); transition: background .25s ease, color .25s ease; }
.bmb-insp-card:hover .bmb-card-ico { background: #e6eaef; }
/* Kataloge: Text links, Titelbilder als Fächer rechts (wie die Kachel in BmaxxOrderOverview) */
.bmb-insp--catalogs.has-covers { align-items: center; padding-right: 22px; }
.bmb-insp--catalogs .bmb-insp-body { flex: 1 1 auto; min-width: 0; }
.bmb-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--bmb-mute); font-size: 14.5px; line-height: 1.5; }
.bmb-new { display: inline-block; padding: 1px 10px; border-radius: 99px; background: var(--bmb-btn); color: #fff; font-size: 13px; font-weight: 700; }
.bmb-covers { flex: none; display: flex; flex-direction: row-reverse; align-items: center; padding: 6px 12px 6px 6px; }
.bmb-cover { position: relative; display: block; width: 96px; height: 134px; overflow: hidden; border-radius: 7px; background: var(--bmb-tint); box-shadow: 0 0 0 2px #fff, 0 6px 16px rgba(20, 30, 45, .18); transform-origin: 50% 100%; transition: transform .2s ease, margin .2s ease; }
.bmb-cover + .bmb-cover { margin-right: -52px; }
.bmb-cover img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.bmb-cover:nth-child(1) { z-index: 4; transform: rotate(7deg); }
.bmb-cover:nth-child(2) { z-index: 3; transform: rotate(2deg) translateY(-4px); }
.bmb-cover:nth-child(3) { z-index: 2; transform: rotate(-3deg) translateY(-4px); }
.bmb-cover:nth-child(4) { z-index: 1; transform: rotate(-8deg); }
.bmb-insp-card:hover .bmb-cover + .bmb-cover { margin-right: -38px; }
.bmb-card-ico .bmb-fi { width: 64px; height: 64px; }
.bmb-insp-body { display: block; }
.bmb-insp-card h3 { margin: 0 0 6px; font-size: 23px; }
.bmb-insp-card p { margin: 0 0 12px; color: var(--bmb-mute); font-size: 17px; }
.bmb-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 18px; border: 1px solid var(--bmb-line2); border-radius: 99px; color: var(--bmb-navy); font-size: 16px; font-weight: 700; line-height: 1.3; transition: border-color .2s ease, color .2s ease; }
.bmb-insp-card:hover .bmb-more { border-color: var(--bmb-btn); color: var(--bmb-deep); }
.bmb-more .bmb-ico { width: 20px; height: 20px; transition: transform .2s ease; }
.bmb-insp-card:hover .bmb-more .bmb-ico { transform: translateX(4px); }
.bmb-seo .bmb-chips-title { margin: 32px 0 12px; font-size: 17px; font-weight: 700; color: var(--bmb-navy); }
.bmb-insp + .bmb-chips-title { margin-top: 32px; }
.bmb-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.bmb-chips a { display: inline-block; padding: 11px 22px; border: 1px solid var(--bmb-line2); border-radius: 99px; background: #fff; color: var(--bmb-navy); font-size: 16px; font-weight: 600; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.bmb-chips a:hover, .bmb-chips a:focus { border-color: #b9c3cc; background: var(--bmb-tint); color: var(--bmb-navy); transform: translateY(-2px); }
/* Marken mit Herstellerlogo (ruhig in Graustufen, beim Zeigen in Farbe); ohne Logo steht der Name */
.bmb-brands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.bmb-brands a { display: flex; align-items: center; justify-content: center; height: 78px; padding: 12px 18px; border: 1px solid var(--bmb-line); border-radius: 14px; background: #fff; color: var(--bmb-navy); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.bmb-brands img { display: block; width: auto; height: auto; max-width: 100%; max-height: 36px; object-fit: contain; filter: grayscale(1); opacity: .78; transition: filter .2s ease, opacity .2s ease; }
.bmb-brands span { font-size: 17px; font-weight: 700; letter-spacing: .2px; }
.bmb-brands a:hover, .bmb-brands a:focus { border-color: var(--bmb-line2); box-shadow: 0 10px 22px rgba(20, 30, 45, .08); transform: translateY(-2px); }
.bmb-brands a:hover img, .bmb-brands a:focus img { filter: none; opacity: 1; }

/* 5. Häufige Fragen */
.bmb-seo-faq details { margin: 0 0 12px; border: 1px solid var(--bmb-line); border-radius: 18px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.bmb-seo-faq details[open] { border-color: var(--bmb-line2); box-shadow: 0 10px 26px rgba(20, 30, 45, .07); }
.bmb-seo-faq summary { position: relative; padding: 22px 70px 22px 28px; list-style: none; font-size: 18.5px; font-weight: 700; color: var(--bmb-navy); cursor: pointer; }
.bmb-seo-faq summary::-webkit-details-marker { display: none; }
.bmb-seo-faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--bmb-tint2); color: var(--bmb-navy); font-size: 24px; line-height: 36px; text-align: center; transition: transform .25s ease, background .25s ease; }
.bmb-seo-faq details[open] summary::after { content: "–"; background: var(--bmb-navy); color: #fff; transform: rotate(180deg); }
.bmb-seo-faq details p { margin: 0; padding: 0 28px 24px; color: #3b4651; }

/* 6. Aufruf */
.bmb-cta { margin: 0 0 34px; padding: 54px 64px; border: 1px solid var(--bmb-line); border-radius: 26px; background: linear-gradient(120deg, #eef1f4 0%, #f6f7f9 55%, #fff 100%); }
.bmb-cta .bmb-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.bmb-cta h2 { margin: 0 0 8px; font-size: 36px; }
.bmb-cta p { margin: 0 0 6px; color: var(--bmb-mute); font-size: 19px; }
.bmb-seo .bmb-seo-phone { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 17px; color: var(--bmb-ink); }
.bmb-seo-phone .bmb-ico { width: 24px; height: 24px; color: var(--bmb-btn); }
.bmb-seo-phone a { color: var(--bmb-deep); font-weight: 700; text-decoration: underline; }
.bmb-seo-btn { display: inline-flex; align-items: center; gap: 10px; padding: 18px 40px; border: 0; border-radius: 99px; background: var(--bmb-btn); color: #fff; font-size: 19px; font-weight: 700; box-shadow: 0 12px 26px rgba(10, 121, 168, .28); transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.bmb-seo-btn:hover, .bmb-seo-btn:focus { background: var(--bmb-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(10, 121, 168, .34); }
.bmb-seo-btn .bmb-ico { width: 22px; height: 22px; transition: transform .2s ease; }
.bmb-seo-btn:hover .bmb-ico { transform: translateX(4px); }
.bmb-seo a:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.bmb-seo-faq summary:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }

/* Schwebender Knopf zurück zum Planer */
.bmb-fab { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border: 0; border-radius: 99px; background: #0a79a8; color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 26px rgba(10, 60, 90, .28); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, background .2s ease; }
.bmb-fab:hover { background: #0b6f96; }
.bmb-fab:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.bmb-fab.is-on { opacity: 1; transform: none; pointer-events: auto; }
.bmb-fab .bmb-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-90deg); }

/* Einblenden beim Scrollen: nur mit JavaScript, ohne bleibt alles sichtbar */
.bmb-js .bmb-reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease; }
.bmb-js .bmb-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .is--ctl-bmaxxbadplaner { scroll-behavior: auto; }
    .bmb-js .bmb-reveal { opacity: 1; transform: none; transition: none; }
    .bmb-seo *, .bmb-fab { transition: none !important; animation: none !important; }
    .bmb-band-img img { transform: none !important; }
    .bmb-bands li.is-try:hover { transform: none; }
}

@media (max-width: 1100px) {
    .is--ctl-bmaxxbadplaner .bmb-seo-hero { padding: 20px 32px; }
    .is--ctl-bmaxxbadplaner .bmb-seo-hero .bmb-hero-img { height: 170px; }
    .bmb-band { padding: 56px 36px; }
    .bmb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bmb-step:not(:last-child)::after { content: none; }
    .bmb-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bmb-band-img { aspect-ratio: 16 / 11; padding: 5% 8%; }
    .bmb-scale { display: none; }
    .bmb-room-tool { grid-template-columns: 240px minmax(0, 1fr); }
    .bmb-room-out { grid-column: 1 / -1; }
    .bmb-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bmb-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bmb-cta { padding: 44px 40px; }
}
@media (max-width: 900px) {
    .is--ctl-bmaxxbadplaner .bmb-seo-hero { padding: 18px 24px; }
    .is--ctl-bmaxxbadplaner .bmb-seo-hero .bmb-hero-img { height: 140px; }
    .bmb-band { padding: 44px 26px; }
    .bmb-insp, .bmb-tips { grid-template-columns: minmax(0, 1fr); }
    .bmb-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bmb-cta { padding: 34px 26px; }
}
@media (max-width: 640px) {
    .is--ctl-bmaxxbadplaner .bmb-seo-hero { display: block; padding: 18px 18px; border-radius: 16px; }
    .is--ctl-bmaxxbadplaner .bmb-seo-hero h1 { font-size: 26px; }
    .is--ctl-bmaxxbadplaner .bmb-seo-hero .bmb-hero-lead { font-size: 16.5px; }
    .is--ctl-bmaxxbadplaner .bmb-seo-hero .bmb-hero-chips li { font-size: 14.5px; }
    .is--ctl-bmaxxbadplaner .bmb-seo-hero .bmb-hero-img { display: none; }
    .bmb-seo { font-size: 16.5px; }
    .bmb-seo h2 { font-size: 27px; }
    .bmb-seo .bmb-lead { font-size: 17px; margin-bottom: 26px; }
    .bmb-steps, .bmb-bands, .bmb-guide { grid-template-columns: minmax(0, 1fr); }
    .bmb-steps { gap: 28px; margin-top: 30px; }
    .bmb-step { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 18px; align-items: start; }
    .bmb-step-ico { grid-row: 1 / span 2; width: 84px; height: 84px; margin: 0; border-radius: 24px; }
    .bmb-step .bmb-fi { width: 54px; height: 54px; }
    .bmb-step-num { top: -9px; right: -9px; width: 30px; height: 30px; border-width: 3px; font-size: 14px; line-height: 24px; }
    .bmb-step h3 { margin: 2px 0 4px; font-size: 21px; }
    .bmb-step p { grid-column: 2; font-size: 16px; }
    .bmb-room-tool { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
    .bmb-room-out ul { grid-template-columns: minmax(0, 1fr); }
    .bmb-bands li.has-img { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-content: start; column-gap: 14px; padding: 10px 16px 14px 10px; }
    .bmb-bands li.has-img .bmb-band-img { grid-row: 1 / span 4; align-self: start; aspect-ratio: 1 / 1; margin: 0; padding: 8px; border-radius: 12px; }
    .bmb-bands li.has-img > .bmb-band-top, .bmb-bands li.has-img > h3, .bmb-bands li.has-img > p, .bmb-bands li.has-img > .bmb-band-try { grid-column: 2; margin-left: 0; margin-right: 0; }
    .bmb-bands li.has-img > .bmb-band-top { margin-top: 4px; margin-bottom: 6px; }
    .bmb-bands h3 { margin-bottom: 4px; font-size: 18px; }
    .bmb-bands p { font-size: 15px; line-height: 1.55; }
    .bmb-band-try { padding-top: 10px; font-size: 14.5px; }
    .bmb-match { top: -12px; left: auto; right: 14px; padding: 4px 11px 4px 8px; font-size: 12.5px; }
    .bmb-band { padding: 32px 18px; border-radius: 18px; }
    .bmb-guide-col { padding: 22px 20px 10px; }
    .bmb-insp-card { padding: 20px; gap: 16px; }
    .bmb-insp--catalogs.has-covers { flex-direction: column; align-items: flex-start; padding-right: 20px; }
    .bmb-covers { order: -1; padding: 4px 0 2px 34px; }
    .bmb-cover { width: 70px; height: 98px; }
    .bmb-cover + .bmb-cover { margin-right: -38px; }
    .bmb-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .bmb-brands a { height: 66px; }
    .bmb-card-ico { width: 72px; height: 72px; border-radius: 20px; }
    .bmb-card-ico .bmb-fi { width: 46px; height: 46px; }
    .bmb-seo-faq summary { padding: 18px 58px 18px 18px; font-size: 17px; }
    .bmb-seo-faq details p { padding: 0 18px 20px; }
    .bmb-cta h2 { font-size: 28px; }
    .bmb-seo-btn { width: 100%; justify-content: center; }
    .bmb-fab { right: 12px; bottom: 12px; padding: 12px 18px; }
}

/* ---------- 0.1.30: Planer per Knopf starten (Einstellung „Start des Planers“, .is-start-button) ----------
   Vor dem Start: Kopfband mit „Badplaner starten“, der Rahmen ist zu (Höhe 0, lädt noch nichts). Nach dem Klick (embed.js):
   .is-started klappt Einstieg, Vorteile, Knopf und Grafik ein (die H1 bleibt als schmale Titelzeile) und den Planer auf,
   .is-open folgt nach der Animation. .is-instant (Planungslink, „Bewegung reduzieren“) schaltet ohne Animation um. */
.is--ctl-bmaxxbadplaner .bmb-hero-fold { display: grid; grid-template-rows: 1fr; }
.is--ctl-bmaxxbadplaner .bmb-hero-fold-in { min-height: 0; }
.is--ctl-bmaxxbadplaner .bmb-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 24px 0 2px; }
.is--ctl-bmaxxbadplaner .bmb-start-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; margin: 0; padding: 0 30px 0 18px; border: 0; border-radius: 16px; background: #0099cc; color: #fff; font-family: inherit; font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: .1px; text-transform: none; text-decoration: none; cursor: pointer;
    box-shadow: 0 14px 28px -14px rgba(0, 153, 204, .85), 0 2px 5px rgba(20, 30, 45, .10); transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.is--ctl-bmaxxbadplaner .bmb-start-btn:hover { background: #008bb9; transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(0, 153, 204, .9), 0 3px 6px rgba(20, 30, 45, .12); }
.is--ctl-bmaxxbadplaner .bmb-start-btn:active { transform: none; }
.is--ctl-bmaxxbadplaner .bmb-start-btn:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }
.is--ctl-bmaxxbadplaner .bmb-start-btn[aria-busy="true"] { cursor: progress; }
.is--ctl-bmaxxbadplaner .bmb-play { flex: none; width: 32px; height: 32px; }
.is--ctl-bmaxxbadplaner .bmb-play circle { fill: rgba(255, 255, 255, .18); stroke: #fff; stroke-width: 1.6; }
.is--ctl-bmaxxbadplaner .bmb-play path { fill: #fff; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.is--ctl-bmaxxbadplaner .bmb-start-hint { display: none; color: var(--bmb-mute); font-size: 14.5px; line-height: 1.4; }
/* Grafik startet den Planer ebenfalls (nur Maus/Touch, die Tastatur nimmt den Knopf) */
.is--ctl-bmaxxbadplaner .bmb-hero-media { position: relative; flex: none; max-width: 42%; max-height: 260px; cursor: pointer; }
.is--ctl-bmaxxbadplaner .bmb-hero-media .bmb-hero-img { max-width: 100%; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.is--ctl-bmaxxbadplaner .bmb-hero-media:hover .bmb-hero-img { transform: translateY(-5px) scale(1.03); }
.is--ctl-bmaxxbadplaner .bmb-hero-play { position: absolute; left: 50%; bottom: 4%; display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border-radius: 99px; background: rgba(255, 255, 255, .96); color: var(--bmb-navy); font-size: 15px; font-weight: 800; line-height: 1.2; white-space: nowrap;
    box-shadow: 0 10px 22px rgba(20, 30, 45, .16); opacity: 0; transform: translate(-50%, 8px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.is--ctl-bmaxxbadplaner .bmb-hero-play .bmb-play { width: 28px; height: 28px; }
.is--ctl-bmaxxbadplaner .bmb-hero-play .bmb-play circle { fill: #0099cc; stroke: none; }
.is--ctl-bmaxxbadplaner .bmb-hero-media:hover .bmb-hero-play { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .is--ctl-bmaxxbadplaner .bmb-hero-play { opacity: 1; transform: translate(-50%, 0); } }

/* Rahmen zu bis zum Start; danach klappt er auf (Höhe setzt embed.js wie bisher passend zum Fenster) */
.is-start-button .bmb-planner-box { display: grid; grid-template-rows: 0fr; scroll-margin-top: 8px; transition: grid-template-rows .5s cubic-bezier(.2, .7, .2, 1); }
.is-start-button .bmb-planner-in { min-height: 0; overflow: hidden; }
.is-start-button.is-started .bmb-planner-box { grid-template-rows: 1fr; }
.is-start-button.is-open .bmb-planner-in { overflow: visible; }
.is-start-button:not(.is-started) .bmaxx-badplaner-frame { visibility: hidden; }

/* Eingeklappt: schmale Titelzeile */
.is-start-button .bmb-seo-hero { transition: padding .45s ease, gap .45s ease, margin .45s ease; }
.is-start-button .bmb-seo-hero h1 { transition: font-size .45s ease, margin .45s ease; }
.is-start-button .bmb-hero-fold { transition: grid-template-rows .45s ease, opacity .3s ease; }
.is-start-button .bmb-hero-media { transition: max-width .45s ease, max-height .45s ease, opacity .3s ease; }
.is--ctl-bmaxxbadplaner .is-started .bmb-seo-hero { gap: 0; margin-bottom: 12px; padding-top: 14px; padding-bottom: 14px; }
.is--ctl-bmaxxbadplaner .is-started .bmb-seo-hero h1 { margin: 0; font-size: 24px; }
.is--ctl-bmaxxbadplaner .is-started .bmb-hero-fold { grid-template-rows: 0fr; opacity: 0; }
.is--ctl-bmaxxbadplaner .is-started .bmb-hero-fold-in { overflow: hidden; visibility: hidden; transition: visibility 0s linear .45s; }
.is--ctl-bmaxxbadplaner .is-started .bmb-hero-media { max-width: 0; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.is-instant, .is-instant *, .is-instant *::before, .is-instant *::after { transition: none !important; }

/* Hinweis für Mitarbeiter: Dieser Browser wird nicht mitgezählt (?statistik=aus) */
.is--ctl-bmaxxbadplaner .bmb-stat-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; padding: 8px 14px; border: 1px solid #f1d58a; border-radius: 10px; background: #fff8e1; color: #5b4a14; font-size: 14px; line-height: 1.4; }
.is--ctl-bmaxxbadplaner .bmb-stat-note a { color: #0a79a8; font-weight: 700; text-decoration: underline; }

@media (max-width: 1100px) {
    .is--ctl-bmaxxbadplaner .bmb-start-btn { min-height: 54px; font-size: 18px; }
}
@media (max-width: 760px) {
    .is--ctl-bmaxxbadplaner .bmb-start-hint { display: block; }
}
@media (max-width: 640px) {
    .is--ctl-bmaxxbadplaner .bmb-hero-media { display: none; }
    .is--ctl-bmaxxbadplaner .bmb-hero-cta { margin-top: 18px; }
    .is--ctl-bmaxxbadplaner .bmb-start-btn { width: 100%; justify-content: center; }
    .is--ctl-bmaxxbadplaner .is-started .bmb-seo-hero h1 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .is-start-button .bmb-planner-box, .is-start-button .bmb-seo-hero, .is-start-button .bmb-seo-hero h1, .is-start-button .bmb-hero-fold, .is-start-button .bmb-hero-media,
    .is--ctl-bmaxxbadplaner .bmb-start-btn, .is--ctl-bmaxxbadplaner .bmb-hero-media .bmb-hero-img, .is--ctl-bmaxxbadplaner .bmb-hero-play { transition: none !important; }
    .is--ctl-bmaxxbadplaner .bmb-hero-media:hover .bmb-hero-img { transform: none; }
}

/* ---------- 0.1.31: Startseite „Vom Strich zum Raum“ (nur bei Start per Knopf, .is-start-button) ----------
   Planpapier in Markenblau, große Überschrift in Barlow Condensed (Datei im Plugin, nicht von Google, index.tpl lädt sie vor),
   großer runder Knopf mit den drei Vorteilen daneben, rechts groß die 3D-Grafik. Vor dem Klick keine Animation.
   Bis die Schrift da ist, steht die Überschrift in einer auf 68 % verkleinerten Arial (gleich breit wie Barlow Condensed): Die Zeilen
   brechen gleich um, beim Wechsel springt nichts (gut für Google, Core Web Vitals).
   Nach dem Start klappt alles zur schmalen Titelzeile ein wie in 0.1.30. Ohne Knopf (Start „sofort“) bleibt das schmale Kopfband. */
@font-face { font-family: 'BMB Barlow Condensed'; src: url('fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'BMB Condensed Ersatz'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('LiberationSans-Bold'), local('Helvetica Bold'), local('Helvetica-Bold'), local('Roboto Bold'), local('Roboto-Bold'); font-weight: 700; font-style: normal; size-adjust: 68%; }
.is--ctl-bmaxxbadplaner .is-start-button .bmb-seo-hero {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 24px 40px;
    margin: 0 0 18px; padding: 52px 44px 52px 60px; border: 1px solid #d6e4eb; border-radius: 22px; color: #12303f;
    background-color: #f4f8fa;
    background-image: linear-gradient(rgba(0, 153, 204, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 153, 204, .13) 1px, transparent 1px),
        linear-gradient(rgba(0, 153, 204, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 153, 204, .055) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-position: -1px -1px;
    transition: padding .45s ease, gap .45s ease, margin .45s ease, grid-template-columns .45s ease; }
.is--ctl-bmaxxbadplaner .is-start-button .bmb-seo-hero .bmb-hero-txt { max-width: 720px; }
.is--ctl-bmaxxbadplaner .is-start-button .bmb-seo-hero h1 { margin: 0 0 22px; font-family: 'BMB Barlow Condensed', 'BMB Condensed Ersatz', sans-serif; font-size: clamp(44px, 2.6vw + 28px, 86px); font-weight: 700; line-height: .95; letter-spacing: -.5px; text-transform: uppercase; color: #12303f; }
.is--ctl-bmaxxbadplaner .is-start-button .bmb-seo-hero h1 .bmb-hl { display: block; color: inherit; }   /* Zeilenumbruch nach „online:“ */
.is--ctl-bmaxxbadplaner .is-start-button .bmb-seo-hero .bmb-hero-lead { max-width: 540px; margin: 0 0 30px; font-size: 20px; line-height: 1.5; color: #3d5563; text-wrap: pretty; }
.is--ctl-bmaxxbadplaner .is-start-button .bmb-hero-cta { gap: 16px 28px; margin: 0; }
.is--ctl-bmaxxbadplaner .is-start-button .bmb-start-btn { min-height: 72px; padding: 0 40px 0 20px; gap: 14px; border-radius: 999px; font-size: 22px; letter-spacing: 0;
    box-shadow: 0 18px 34px -16px rgba(0, 153, 204, .95), 0 2px 6px rgba(18, 48, 63, .12); }
.is--ctl-bmaxxbadplaner .is-start-button .bmb-start-btn:hover { box-shadow: 0 22px 38px -16px rgba(0, 153, 204, .95), 0 3px 8px rgba(18, 48, 63, .14); }
.is--ctl-bmaxxbadplaner .is-start-button .bmb-start-btn .bmb-play { width: 38px; height: 38px; }
.is--ctl-bmaxxbadplaner .is-start-button .bmb-seo-hero .bmb-hero-chips { flex-direction: column; flex-wrap: nowrap; gap: 5px; }
.is--ctl-bmaxxbadplaner .is-start-button .bmb-seo-hero .bmb-hero-chips li { gap: 9px; padding: 0; border: 0; border-radius: 0; background: none; color: #3d5563; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.is--ctl-bmaxxbadplaner .is-start-button .bmb-seo-hero .bmb-hero-chips .bmb-ico { width: 19px; height: 19px; padding: 3px; stroke-width: 3.8; }
.is--ctl-bmaxxbadplaner .is-start-button .bmb-start-hint { flex-basis: 100%; }
.is--ctl-bmaxxbadplaner .is-start-button .bmb-hero-media { display: flex; justify-content: center; align-items: center; min-width: 0; max-width: none; max-height: 560px; }
.is--ctl-bmaxxbadplaner .is-start-button .bmb-hero-media .bmb-hero-img { display: block; width: 100%; max-width: 500px; height: auto; margin: 0; filter: drop-shadow(0 34px 30px rgba(18, 48, 63, .24)); }
.is--ctl-bmaxxbadplaner .is-start-button .bmb-hero-media:hover .bmb-hero-img { transform: translateY(-4px); }
/* nach dem Start: schmale Titelzeile, Grafik weg */
.is--ctl-bmaxxbadplaner .is-start-button.is-started .bmb-seo-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); gap: 0; margin-bottom: 12px; padding: 14px 28px; }
.is--ctl-bmaxxbadplaner .is-start-button.is-started .bmb-seo-hero h1 { margin: 0; font-size: 26px; letter-spacing: 0; }
.is--ctl-bmaxxbadplaner .is-start-button.is-started .bmb-seo-hero h1 .bmb-hl { display: inline; }
.is--ctl-bmaxxbadplaner .is-start-button.is-started .bmb-hero-media { max-width: 0; max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; }
@media (max-width: 860px) {
    .is--ctl-bmaxxbadplaner .is-start-button .bmb-seo-hero { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 34px 28px 30px; }
    .is--ctl-bmaxxbadplaner .is-start-button .bmb-seo-hero h1 { font-size: clamp(38px, 6vw + 14px, 62px); }
    .is--ctl-bmaxxbadplaner .is-start-button .bmb-hero-media .bmb-hero-img { max-width: 400px; }
    .is--ctl-bmaxxbadplaner .is-start-button.is-started .bmb-seo-hero { grid-template-columns: minmax(0, 1fr); padding: 12px 20px; }
}
@media (max-width: 640px) {
    .is--ctl-bmaxxbadplaner .is-start-button .bmb-seo-hero { gap: 22px; padding: 24px 18px 18px; border-radius: 16px; background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; }
    .is--ctl-bmaxxbadplaner .is-start-button .bmb-seo-hero h1 { margin-bottom: 14px; }
    .is--ctl-bmaxxbadplaner .is-start-button .bmb-seo-hero .bmb-hero-lead { margin-bottom: 22px; font-size: 17px; }
    .is--ctl-bmaxxbadplaner .is-start-button .bmb-start-btn { width: 100%; justify-content: center; min-height: 64px; padding: 0 24px 0 18px; font-size: 20px; }
    .is--ctl-bmaxxbadplaner .is-start-button .bmb-seo-hero .bmb-hero-chips { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
    .is--ctl-bmaxxbadplaner .is-start-button .bmb-seo-hero .bmb-hero-chips li { font-size: 14.5px; }
    .is--ctl-bmaxxbadplaner .is-start-button .bmb-hero-media { display: flex; }
    .is--ctl-bmaxxbadplaner .is-start-button .bmb-hero-media .bmb-hero-img { max-width: 330px; }
    .is--ctl-bmaxxbadplaner .is-start-button.is-started .bmb-seo-hero { padding: 12px 16px; }
    .is--ctl-bmaxxbadplaner .is-start-button.is-started .bmb-seo-hero h1 { font-size: 22px; }
}