/* ============================================================
   bbfdesign Relaunch — zentrales UI-System (Design-System-Layer)
   Quelle: Claude-Design-Handoff „Website-Prototyp" (2026-07-07)
   bbfdesign-design-system-3a6b4903 · Tokens 1:1 übernommen.
   Additiv: eigene Token-Namen (--brand, --space, --radius, ...),
   kollidieren NICHT mit dem Alt-System (--bbf). Wird NACH style.css
   geladen und regiert die Relaunch-Seiten (Wrapper .bbf-r).
   ============================================================ */

/* Fonts (Schibsted Grotesk Display + Public Sans Body) — LOKAL self-hosted
   via assets/fonts.css (@font-face), DSGVO-konform, kein Google-CDN. */

:root {
  /* Brand-Spektrum (Logo-Verlauf, links → rechts) */
  --brand-magenta:#e23589; --brand-purple:#931d7d; --brand-indigo:#1c1545;
  --brand-blue:#0280b9; --brand-cyan:#00aee7; --brand-green:#71bf93;
  --brand-lime:#c8dd9b; --brand-warm:#fdd091;

  --cyan-50:#e6f7fd; --cyan-100:#b9ebfa; --cyan-400:#29bdec;
  --cyan-500:#00aee7; --cyan-600:#0091c4; --cyan-700:#00749c;
  --magenta-50:#fce8f2; --magenta-500:#e23589; --magenta-600:#c62778;

  --ink-950:#0a0d12; --ink-900:#0d1117; --ink-850:#12161d;
  --ink-800:#1a1f28; --ink-700:#262c37;

  --white:#fff; --neutral-50:#f6f8fa; --neutral-100:#eef1f5;
  --neutral-200:#e2e7ee; --neutral-300:#cbd3dd; --neutral-400:#9aa4b2;
  --neutral-500:#6b7482; --neutral-600:#4b5563; --neutral-700:#333a45;
  --neutral-800:#1d222b; --neutral-900:#12161d;

  --color-accent:var(--brand-cyan); --color-accent-hover:var(--cyan-600);
  --color-accent-contrast:#fff;
  --surface-page:var(--neutral-50); --surface-card:var(--white);
  --surface-dark:var(--ink-900); --surface-dark-raised:var(--ink-800);
  --text-strong:var(--neutral-900); --text-body:var(--neutral-600);
  /* eine Nuance dunkler als --neutral-500 (#6b7482), damit Sekundaertext auch auf
     der grauen Sektionsflaeche 4.5:1 erreicht (4.44 -> 4.57). Palette bleibt. */
  --text-muted:#697280; --text-on-dark:#fff;
  --text-on-dark-muted:#9aa7b8; --text-link:var(--brand-cyan);
  --text-link-hover:var(--cyan-400);
  --border-subtle:var(--neutral-200); --border-strong:var(--neutral-300);
  --border-on-dark:rgba(255,255,255,0.08);
  --badge-lime-bg:#e4eec6; --badge-lime-text:#4d6b1f;
  --green-700:#417655; /* dunkle Abstufung von --brand-green fuer Text auf hellem Grund (4.54:1) */

  --gradient-brand:linear-gradient(90deg,#e23589,#931d7d,#0280b9,#00aee7,#71bf93,#c8dd9b,#fdd091);
  --gradient-brand-soft:linear-gradient(90deg,#ec6fae,#7d5fb8,#29bdec,#8bcf9f);
  --gradient-accent:linear-gradient(135deg,var(--brand-cyan),var(--brand-blue));
  --gradient-dark-bloom:radial-gradient(120% 65% at 0% 120%,rgba(147,29,125,0.34),transparent 60%),radial-gradient(120% 65% at 100% 120%,rgba(113,191,147,0.28),transparent 60%),var(--ink-900);

  /* Typografie */
  --font-display:'Schibsted Grotesk','Segoe UI',system-ui,sans-serif;
  --font-body:'Public Sans','Segoe UI',system-ui,sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;
  --fs-display-xl:4.25rem; --fs-display-l:3rem; --fs-display-m:2.25rem;
  --fs-h1:2rem; --fs-h2:1.5rem; --fs-h3:1.25rem; --fs-lead:1.1875rem;
  --fs-body:1.0625rem; --fs-sm:0.9375rem; --fs-xs:0.8125rem; --fs-eyebrow:0.8125rem;
  --lh-tight:1.05; --lh-snug:1.2; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-tight:-0.02em; --ls-normal:0; --ls-eyebrow:0.14em;

  /* Abstände / Layout (8px-Rhythmus) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --space-20:80px; --space-24:96px; --space-32:128px;
  --section-pad-y:clamp(64px,9vw,128px); --container-max:1240px;
  --container-pad:clamp(20px,5vw,64px);

  /* Effekte — SCHARFE KANTEN: Radien global 0 (Logo hat harte Kanten) */
  --radius-xs:0px; --radius-sm:0px; --radius-md:0px; --radius-lg:0px; --radius-xl:0px;
  --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(13,17,23,0.06); --shadow-sm:0 2px 8px rgba(13,17,23,0.06);
  --shadow-md:0 8px 24px rgba(13,17,23,0.08); --shadow-lg:0 18px 48px rgba(13,17,23,0.12);
  --shadow-accent:0 12px 30px rgba(0,174,231,0.28); --shadow-focus:0 0 0 3px rgba(0,174,231,0.35);
  --accent-bar-height:4px;
  --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --dur-fast:140ms; --dur-base:240ms; --dur-slow:420ms;
}

/* --- Relaunch-Basis: nur innerhalb .bbf-r, um Alt-CSS-Kollisionen zu meiden --- */
.bbf-r{font-family:var(--font-body);color:var(--text-body);line-height:var(--lh-normal);font-size:var(--fs-body)}
/* Border-box-Reset für ALLE Relaunch-Inhalte (bbf-r = Block-Seiten,
   bbf-convert = klassisch konvertierte Seiten). Ohne diesen einheitlichen
   Reset rechnete max-width bei content-box-Containern das Padding zusätzlich
   auf → Inhaltskante sprang um 128px. Standard-Reset, kein Override. */
.bbf-r *,.bbf-r *::before,.bbf-r *::after,
.bbf-convert *,.bbf-convert *::before,.bbf-convert *::after{box-sizing:border-box}
.bbf-r h1,.bbf-r h2,.bbf-r h3,.bbf-r h4{font-family:var(--font-display);color:var(--text-strong);letter-spacing:var(--ls-tight)}
.bbf-r a{text-decoration:none}
.bbf-r a:not([class]){color:var(--cyan-700)}
/* Inline-Textlinks im Fliesstext als Link erkennbar (Unterstreichung); in hellen Karten dunkler fuer Kontrast (WCAG AA) */
.bbf-r p a:not([class]){text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.bbf-r .bbf-grow p a:not([class]),.bbf-r .bbf-feature p a:not([class]){color:var(--cyan-700)}
.bbf-r img{max-width:100%}
/* Einheitliche Inhaltsflucht: EIN Gutter + EINE Maximalbreite für jede Sektion,
   linksbündig zu Header/Footer. Der Content trägt kein horizontales Padding und
   keine Sonderbreite mehr am .bbf-container (per Migration entfernt) → diese
   Klasse regiert ohne !important. */
.bbf-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}

/* Fertig-umgebaute Seiten (body.bbf-clean = altes style.css dequeued): Basis + A11y-Helfer */
body.bbf-clean{margin:0;background:var(--surface-page);font-family:var(--font-body);color:var(--text-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.bbf-clean main img,body.bbf-clean section img,body.bbf-clean .bbf-shot img,body.bbf-clean .bbf-prose img{max-width:100%;height:auto}
body.bbf-clean #bbf-main,body.bbf-clean .bbf-site-main,body.bbf-clean .bbf-page-article,body.bbf-clean .bbf-entry-content{margin:0;padding:0;max-width:none;width:auto}
.bbf-skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.bbf-skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;z-index:2000;background:#fff;color:var(--text-strong);padding:10px 16px;border:1px solid var(--brand-cyan)}
.bbf-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.logo-fallback[hidden],.drawer-logo-fallback[hidden]{display:none}
/* #6 Footer- + Drawer-Links: gedämpft, Cyan NUR auf Hover (Design-Vorgabe) */
.bbfx-footer-col a:not(.bbf-btn){color:var(--text-on-dark-muted)!important;text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
.bbfx-footer-bottom a{color:var(--text-on-dark-muted)!important}
.bbfx-acc-body a{color:rgba(255,255,255,0.82)!important}
.bbfx-drawer-cta a,.bbfx-drawer-contact a{color:var(--brand-cyan)}

/* --- Signatur-Animationen (aus dem Prototyp-Helmet) --- */
@keyframes bbfMenuIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes bbfFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes bbfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes bbfGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes bbfBlobA{
  0%,100%{transform:translate(0,0) scale(1);opacity:.82;filter:blur(var(--flare-blur,46px)) hue-rotate(0deg)}
  33%{transform:translate(13%,-9%) scale(1.34);opacity:1;filter:blur(var(--flare-blur,46px)) hue-rotate(58deg)}
  66%{transform:translate(9%,-4%) scale(1.18);opacity:.9;filter:blur(var(--flare-blur,46px)) hue-rotate(116deg)}
}
@keyframes bbfBlobB{
  0%,100%{transform:translate(0,0) scale(1.3);opacity:1;filter:blur(var(--flare-blur,46px)) hue-rotate(0deg)}
  40%{transform:translate(-12%,9%) scale(.86);opacity:.86;filter:blur(var(--flare-blur,46px)) hue-rotate(-84deg)}
  70%{transform:translate(-6%,4%) scale(1.06);opacity:.94;filter:blur(var(--flare-blur,46px)) hue-rotate(-152deg)}
}
/* Organische (nicht-lineare) Bloom-Drift für dunkle Sektionen + Footer-Glow */
@keyframes bbfBloomDrift{0%{background-position:8% 28%,90% 22%,55% 60%}25%{background-position:34% 12%,66% 52%,36% 44%}50%{background-position:62% 50%,40% 16%,72% 74%}75%{background-position:18% 66%,84% 40%,46% 24%}100%{background-position:8% 28%,90% 22%,55% 60%}}
/* Hero-Leucht-Flares: sanftes Drift+Puls, unten verankert (kein Wash der H1) */
/* Flares: wandern langsam UND wechseln dabei durch die CI-Farben (Logo-Reihenfolge
   Magenta -> Blau -> Cyan -> Gruen). Der Farbwechsel laeuft ueber hue-rotate, das
   Opacity-Pulsieren ist bewusst schwach, damit es sich bewegt statt zu blinken.
   --flare-blur kommt vom jeweiligen Element (Hero 48px, Footer 72px, Hub 46px). */
@keyframes bbfHeroGlowA{
  0%,100%{transform:translate(0,0) scale(1);opacity:.84;filter:blur(var(--flare-blur,48px)) hue-rotate(0deg)}
  25%{transform:translate(10%,-7%) scale(1.14);opacity:.95;filter:blur(var(--flare-blur,48px)) hue-rotate(-72deg)}
  50%{transform:translate(17%,-11%) scale(1.26);opacity:1;filter:blur(var(--flare-blur,48px)) hue-rotate(-132deg)}
  75%{transform:translate(8%,-5%) scale(1.12);opacity:.92;filter:blur(var(--flare-blur,48px)) hue-rotate(-165deg)}
}
@keyframes bbfHeroGlowB{
  0%,100%{transform:translate(0,0) scale(1.2);opacity:1;filter:blur(var(--flare-blur,48px)) hue-rotate(0deg)}
  30%{transform:translate(-11%,-9%) scale(1) rotate(0deg);opacity:.9;filter:blur(var(--flare-blur,48px)) hue-rotate(48deg)}
  60%{transform:translate(-15%,-12%) scale(.9);opacity:.86;filter:blur(var(--flare-blur,48px)) hue-rotate(100deg)}
  80%{transform:translate(-7%,-6%) scale(1.04);opacity:.94;filter:blur(var(--flare-blur,48px)) hue-rotate(64deg)}
}

/* Scroll-Reveal: Startzustand; .is-in wird per IntersectionObserver gesetzt */
.bbf-r [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
.bbf-r [data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .bbf-r [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .bbf-r [style*="animation"]{animation:none!important}
  .bbf-btn:hover::before,.bbf-btn:focus-visible::before{animation:none!important}
  .bbf-btn:hover,.bbf-btn:focus-visible{transform:none}
  .bbf-hero::before,.bbf-hero::after,.bbf-subhero::before,.bbf-subhero::after,.bbfx-footer::before,.bbfx-footer::after{animation:none}
  .bbf-subhero__grad{animation:none}
}

/* ============================================================
   Komponenten — exakt aus _ds_bundle.js (Badge/Button/Chip/
   Eyebrow/GradientRule/FeatureCard). Scharfe Kanten via Tokens.
   Hover als CSS-:hover (im DS React-State, hier deklarativ).
   ============================================================ */

/* Button */
.bbf-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display);font-weight:var(--fw-semibold);letter-spacing:0.08em;text-transform:uppercase;line-height:1;border-radius:var(--radius-sm);border:1.5px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;position:relative;overflow:hidden;isolation:isolate;transition:transform var(--dur-fast) var(--ease-out),background var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
/* Button-Hover: deutlich sichtbarer, fliessender Marken-Farbverlauf auf ALLEN Buttons */
/* Strahlende, weiche Farbwolken auf HELLEM Grund — kräftig/leuchtend (nicht dunkel/dreckig),
   weiche Kanten, organische (nicht L→R) Bewegung. */
@keyframes bbfBtnBloom{0%{background-position:0% 30%,100% 20%,50% 100%,85% 75%}33%{background-position:36% 66%,64% 54%,28% 54%,56% 34%}66%{background-position:64% 24%,40% 82%,72% 86%,24% 62%}100%{background-position:0% 30%,100% 20%,50% 100%,85% 75%}}
.bbf-btn::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(60% 150% at 20% 25%,rgba(88,214,255,0.42),transparent 66%),radial-gradient(58% 160% at 80% 22%,rgba(255,120,196,0.38),transparent 66%),radial-gradient(66% 175% at 55% 92%,rgba(190,240,120,0.34),transparent 68%),radial-gradient(52% 150% at 92% 82%,rgba(178,150,255,0.32),transparent 66%);background-color:#f2fbff;background-size:205% 205%,215% 215%,225% 225%,205% 205%;background-position:0% 30%,100% 20%,50% 100%,85% 75%;transition:opacity 300ms var(--ease-out)}
/* Gradient-Unterkante bleibt beim Hover sichtbar (liegt ueber den Wolken) */
.bbf-btn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:-1;background:var(--gradient-brand);opacity:0;transition:opacity 300ms var(--ease-out)}
.bbf-btn--sm{padding:9px 16px;font-size:13px}
.bbf-btn--md{padding:13px 24px;font-size:14px}
.bbf-btn--lg{padding:16px 30px;font-size:15px}
/* Sicherheitsnetz: Buttons OHNE Groessenklasse kollabierten zum "schwarzen Balken
   am Text" (kein Padding) → immer md-Masse als Standard. */
.bbf-btn:not(.bbf-btn--sm):not(.bbf-btn--md):not(.bbf-btn--lg){padding:13px 24px;font-size:14px}
/* Primär-Button lt. Prototyp (btnGrad): SOLIDE Füllung + 3px Marken-Gradient-Unterkante.
   Default = weiße Füllung (dunkler Grund: Hero/CTA/Header). Auf hellen Flächen: .bbf-on-light (dunkle Füllung). */
/* Füllung = solide Farbe, Unterkante = ::after mit fester Höhe (kein calc()).
   Grund: calc(100% - 3px) als background-size rundet je nach Buttonhöhe/Zoom auf
   Subpixel (Kante mal zu dünn, mal zu dick) und liess den Button ohne
   background-color beim ersten Paint durchscheinen. Prototyp: 3px → 6px im Hover. */
.bbf-btn--primary{color:#12161d;box-shadow:0 8px 24px rgba(13,17,23,.12);background:#fff}
.bbf-btn--primary::after{opacity:1}
.bbf-btn--primary.bbf-on-light{color:#fff;background:#12161d}
.bbf-btn--secondary{background:transparent;color:var(--text-strong);border-color:var(--border-strong)}
.bbf-btn--secondary.bbf-on-dark{color:#fff;border-color:rgba(255,255,255,0.3)}
.bbf-btn--ghost{background:var(--neutral-100);color:var(--text-strong)}
.bbf-btn--ghost.bbf-on-dark{background:rgba(255,255,255,0.06);color:#fff}
/* Primär-Buttons in kanonischen HELLEN Containern -> dunkle Füllung automatisch (kein weiß-auf-weiß) */
.bbf-refbody .bbf-btn--primary,.bbf-refcard .bbf-btn--primary,.bbf-section--light .bbf-btn--primary,.bbf-section--white .bbf-btn--primary,.bbf-contact-form-wrap .bbf-btn--primary{color:#fff;background:#12161d}
/* Footer-Primärbutton: weiße Füllung, dunkler Text – die Footer-Link-Farbe
   (gedämpftes Grau) darf den Buttontext nicht blass ziehen. */
.bbfx-footer .bbf-btn--primary{color:#12161d}
/* .bbf-btn--grad: Kompat-Klasse (Gradient-Unterkante ist jetzt in .bbf-btn--primary integriert) */
.bbf-btn--grad{overflow:hidden}

/* Zertifikatsreihe: gleichmaessiges Raster statt flex-wrap mit zentrierter
   Restzeile. Gleiche Kachelhoehe, Logo per object-fit mittig — dadurch wirken
   auch Dateien mit abweichendem Seitenverhaeltnis nicht kleiner. */
.bbf-certgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:clamp(12px,1.6vw,18px);margin-top:clamp(36px,4vw,52px)}
/* Die JTL-Badges bringen Flaeche und Rahmen selbst mit — ein zusaetzlicher
   weisser Kasten mit Rahmen und Schatten rahmt sie doppelt ein. */
.bbf-certgrid__cell{display:flex;align-items:center;justify-content:center;background:transparent;border:0;box-shadow:none;padding:clamp(10px,1.4vw,16px);min-height:0}
/* Die 2026er Badges sind quadratisch, die alten waren querformatig — mit 56px
   Hoehe schrumpfen sie auf Briefmarkengroesse. */
.bbf-certgrid__cell img{max-width:100%;max-height:132px;width:auto;height:auto;object-fit:contain;display:block}

/* Badge */
.bbf-badge{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:12px;letter-spacing:0.04em;line-height:1;padding:6px 12px;border-radius:var(--radius-xs)}
.bbf-badge--lime{background:var(--badge-lime-bg);color:var(--badge-lime-text)}
.bbf-badge--cyan{background:var(--cyan-50);color:var(--cyan-700)}
.bbf-badge--magenta{background:var(--magenta-50);color:var(--magenta-600)}
.bbf-badge--neutral{background:var(--neutral-100);color:var(--neutral-600)}
.bbf-badge--dark{background:rgba(255,255,255,0.08);color:#fff}

/* Chip (neutral → cyan bei hover/active) */
.bbf-chip{display:inline-flex;align-items:center;font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:14px;line-height:1;padding:10px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--border-strong);color:var(--text-body);background:var(--white);transition:all var(--dur-base) var(--ease-out)}
.bbf-chip.bbf-on-dark{border-color:rgba(255,255,255,0.16);color:#fff;background:rgba(255,255,255,0.04)}

/* Eyebrow (bar: Verlaufsbalken + Label) */
.bbf-eyebrow{display:inline-flex;align-items:center;gap:12px}
.bbf-eyebrow::before{content:"";width:34px;height:4px;border-radius:2px;background:var(--gradient-brand)}
/* Auf HELLEM Grund gilt --cyan-700 (#00749c, 5.28:1 auf Weiss / 4.96:1 auf Grau).
   Das ist die im Design-System als "interactive state" vorgesehene dunkle
   Abstufung; --brand-cyan/--brand-blue erreichen als Text nur 2.56 bzw. 4.38.
   Auf DUNKLEM Grund bleibt --brand-cyan unveraendert. */
.bbf-eyebrow>span{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;line-height:1;color:var(--cyan-700)}
.bbf-eyebrow.bbf-on-dark>span{color:var(--brand-cyan)}
.bbf-eyebrow--grad{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;line-height:1;background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* GradientRule (Marken-Haarlinie) */
/* Splitter/Haarlinie = Design-Element, läuft randlos über die VOLLE Breite
   (edge-to-edge), unabhängig vom Content-Gutter. Konsistent auf allen Seiten. */
.bbf-rule{width:100%;height:4px;background:var(--gradient-brand);border-radius:0}
/* Liegt eine Linie ausnahmsweise INNERHALB eines Containers, bricht sie per
   Full-Bleed-Technik auf volle Viewport-Breite aus (Container ist zentriert). */
.bbf-container .bbf-rule{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
/* Ex-„Trenner"-Bänder: Inhalt wurde auf .bbf-rule umgestellt; Fallback falls ein
   120px-Band noch irgendwo liegt → auf Linienhöhe eindampfen. */
[style*="height:120px;background:#0d1117"]{height:5px!important;background:var(--gradient-brand)!important;overflow:hidden}
[style*="height:120px;background:#0d1117"]>div{display:none!important}

/* FeatureCard (Signatur-Wertkarte) */
.bbf-feature{position:relative;background:var(--surface-card);border-radius:var(--radius-sm);padding:38px 34px 34px;overflow:hidden;border:1px solid var(--border-subtle);box-shadow:var(--shadow-md);backface-visibility:hidden;transition:transform 340ms var(--ease-out),box-shadow 340ms var(--ease-out)}
.bbf-feature::before{content:"";position:absolute;left:0;top:30px;width:4px;height:64px;background:linear-gradient(180deg,#00aee7 0%,#0280b9 28%,#931d7d 55%,#e23589 78%,#c8dd9b 100%);transition:top 420ms var(--ease-out),height 420ms var(--ease-out),width var(--dur-base) var(--ease-out)}
.bbf-feature::after{content:"";position:absolute;top:0;right:0;width:28px;height:28px;background:linear-gradient(135deg,#e23589 0%,#931d7d 30%,#0280b9 55%,#00aee7 75%,#71bf93 100%);clip-path:polygon(0 0,100% 0,100% 100%)}
.bbf-newscard{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);padding:26px 24px 24px 28px;text-decoration:none;color:inherit;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
/* Vereinheitlichung mit den Vorgabe-Boxen (.bbf-feature): wachsender
   Gradient-Akzent-Balken links + Hover. Ecke entfällt (oben rechts sitzt das Datum). */
.bbf-newscard::before{content:"";position:absolute;left:0;top:26px;width:4px;height:52px;background:linear-gradient(180deg,#00aee7 0%,#0280b9 28%,#931d7d 55%,#e23589 78%,#c8dd9b 100%);transition:top 420ms var(--ease-out),height 420ms var(--ease-out)}
.bbf-newscard .cat{display:inline-flex;align-items:center;padding:4px 9px;border-radius:3px;font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:rgba(0,174,231,.12);color:var(--cyan-700)}
.bbf-newscard .cat--cyan{background:rgba(0,174,231,.12);color:var(--cyan-700)}
.bbf-newscard .cat--magenta{background:rgba(226,53,137,.13);color:#c01f6f}
.bbf-newscard .cat--green{background:rgba(113,191,147,.22);color:var(--green-700)}
.bbf-newscard .date{font-size:12px;color:var(--text-muted)}
.bbf-newscard h3{font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.3;color:var(--text-strong);margin:12px 0 10px}
.bbf-newscard p{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--text-body)}
.bbf-newscard .more{margin-top:auto;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-700);display:inline-flex;align-items:center;gap:6px}

/* ============================================================
   HOMEPAGE (Gutenberg-Blöcke, klassenbasiert, KEIN Inline-CSS)
   Reveal-Animation klassenbasiert: .bbf-reveal (+ --d1..--d4 Stagger)
   ============================================================ */
.bbf-reveal{opacity:0;transform:translateY(26px);transition:opacity 700ms var(--ease-out) var(--bbf-delay,0ms),transform 700ms var(--ease-out) var(--bbf-delay,0ms)}
/* Deckkraft bleibt erzwungen (die alte Reveal-Engine setzt sonst inline 0),
   die Transformation NICHT: sonst kann sich eine Karte im Hover nicht mehr
   anheben — das `!important` hier hat den Hover-Effekt stillgelegt. */
.bbf-reveal.is-in{opacity:1!important;transform:none}
.bbf-reveal--d1{transition-delay:80ms}
.bbf-reveal--d2{transition-delay:160ms}
.bbf-reveal--d3{transition-delay:240ms}
.bbf-reveal--d4{transition-delay:320ms}

/* ============================================================
   Bewegungsschicht — Wellenreveal in Rastern
   Karten in einem Raster schweben abwechselnd von links und rechts ein, leicht
   gekippt und gestaffelt. Start- und Zielzustand setzt bbf-relaunch.js direkt
   am Element (und raeumt sie nach dem Lauf wieder weg), damit die Staffelung
   je Position stimmt, ohne im Inhalt Klassen zu pflegen.
   Alles andere — Hero, Fliesstext, Einzelblöcke — blendet unveraendert nach
   oben ein.
   ============================================================ */
.bbf-reveal--raster{backface-visibility:hidden}
@media (prefers-reduced-motion: reduce){
  .bbf-reveal,.bbf-reveal--raster{opacity:1;transform:none;transition:none;animation:none}
  /* Auch das Anheben beim Hover entfaellt — kein Ruck, kein Versatz. */
  .bbf-feature:hover,.bbf-grow:hover,.bbf-eco:hover{transform:none}
}

}
/* CTA-Einstieg deutlicher sichtbar: der Block-Wrapper trägt keine eigene
   Bewegung mehr, stattdessen staffeln H2, Text und Button einzeln mit mehr Weg
   ein. Nur Bewegung – Farben/Layout/Abstände unverändert. */
.bbf-cta .bbf-reveal{transform:none}
.bbf-cta .bbf-reveal>*>*{opacity:0;transform:translateY(52px);transition:opacity 620ms cubic-bezier(.16,1,.3,1),transform 720ms cubic-bezier(.16,1,.3,1)}
.bbf-cta .bbf-reveal.is-in>*>*{opacity:1;transform:none}
.bbf-cta .bbf-reveal.is-in>*>*:nth-child(1){transition-delay:40ms}
.bbf-cta .bbf-reveal.is-in>*>*:nth-child(2){transition-delay:170ms}
.bbf-cta .bbf-reveal.is-in>*>*:nth-child(3){transition-delay:300ms}

/* Vertikale Sektions-Abstände (statt Inline-Padding) */
.bbf-pad{padding-top:clamp(64px,9vw,112px);padding-bottom:clamp(64px,9vw,112px)}
.bbf-hero-pad{padding-top:clamp(52px,7vw,92px);padding-bottom:clamp(28px,4vw,48px)}

/* Hero-Grid: Text | Ablauf-Karte */
.bbf-herogrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:clamp(36px,4.5vw,72px);align-items:center}
.bbf-hero-sub{font-size:15px;line-height:1.6;color:var(--text-on-dark-muted);margin:0 0 30px;max-width:520px}
.bbf-hero-actions{display:flex;flex-wrap:wrap;gap:14px}

/* Ablauf-Karte (rechts im Hero) */
.bbf-flow{position:relative;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg);padding:28px 28px 20px}
.bbf-flow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#00aee7 0%,#0280b9 28%,#931d7d 55%,#e23589 78%,#c8dd9b 100%)}
.bbf-flow__title{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.25;color:var(--text-strong);margin:0 0 10px}
.bbf-flow__intro{font-size:15px;line-height:1.6;color:var(--text-body);margin:0 0 14px}
.bbf-flow__step{display:flex;align-items:center;gap:16px;padding:15px 0;border-top:1px solid var(--border-subtle)}
.bbf-flow__num{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--neutral-100);font-family:var(--font-display);font-weight:800;font-size:16px;background-clip:padding-box}
.bbf-flow__num span{color:var(--brand-cyan)}
.bbf-flow__st{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--text-strong);line-height:1.3;display:block}
.bbf-flow__cap{font-size:14px;color:var(--text-muted);margin-top:2px;display:block}

/* Stat-Karten (Gold / Fokus / Team) */
.bbf-statcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:18px}
.bbf-statcard{position:relative;background:var(--ink-800);border:1px solid rgba(255,255,255,0.08);padding:22px 22px 24px;overflow:hidden;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
@media (hover:hover){
  .bbf-statcard:hover{transform:translateY(-4px);border-color:rgba(255,255,255,0.16);box-shadow:0 16px 38px rgba(0,0,0,0.38)}
  .bbf-statcard--gold:hover{border-color:rgba(230,187,90,0.5);box-shadow:0 16px 38px rgba(230,187,90,0.16)}
  .bbf-statcard--magenta:hover{border-color:rgba(233,52,139,0.5);box-shadow:0 16px 38px rgba(233,52,139,0.16)}
  .bbf-statcard--green:hover{border-color:rgba(113,191,147,0.5);box-shadow:0 16px 38px rgba(113,191,147,0.16)}
  .bbf-statcard--cyan:hover{border-color:rgba(0,174,231,0.5);box-shadow:0 16px 38px rgba(0,174,231,0.16)}
}
.bbf-statcard::before{content:"";position:absolute;top:0;left:24px;width:40px;height:3px;background:var(--brand-cyan)}
.bbf-statcard--gold::before{background:linear-gradient(90deg,#e6bb5a,#fdd091)}
.bbf-statcard--magenta::before{background:var(--brand-magenta,#e9348b)}
.bbf-statcard--green::before{background:var(--brand-green,#71bf93)}
/* Rahmen einheitlich (26.07.2026): Basis rgba(255,255,255,0.08) fuer alle Karten,
   keine per-Variante-Rahmenfarbe (Gold wirkte olivfarben/als Fehler). Farbidentitaet
   bleibt nur ueber den dezenten Ecken-Bloom + die Akzentleiste oben. */
.bbf-statcard--gold{background:radial-gradient(140% 90% at 0% 0%,rgba(230,187,90,0.12),transparent 55%),var(--ink-800)}
.bbf-statcard--magenta{background:radial-gradient(140% 90% at 0% 0%,rgba(233,52,139,0.12),transparent 55%),var(--ink-800)}
.bbf-statcard--green{background:radial-gradient(140% 90% at 0% 0%,rgba(113,191,147,0.12),transparent 55%),var(--ink-800)}
.bbf-statcard--cyan::before{background:var(--brand-cyan)}
.bbf-statcard--cyan{background:radial-gradient(140% 90% at 0% 0%,rgba(0,174,231,0.14),transparent 55%),var(--ink-800);border-color:rgba(0,174,231,0.34)}
.bbf-statcard--cyan .bbf-statcard__head{color:var(--brand-cyan)}
.bbf-statcard__head{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-cyan)}
.bbf-statcard--gold .bbf-statcard__head{color:#e6bb5a}
.bbf-statcard--magenta .bbf-statcard__head{color:#f06aac}
.bbf-statcard--green .bbf-statcard__head{color:var(--brand-green,#71bf93)}
.bbf-statcard__sub{display:block;font-size:14px;color:var(--text-on-dark-muted);margin-bottom:6px}
.bbf-statcard__val{display:block;font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.25;color:#fff}

/* Zahlen-Band */
.bbf-statwrap{padding:clamp(48px,6vw,80px) 0 clamp(30px,4vw,44px)}
.bbf-bandinner{padding:clamp(36px,4vw,52px) 0}
.bbf-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:28px}
.bbf-band__item{text-align:center}
.bbf-band__num{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.2vw,44px);letter-spacing:-.02em;color:#fff}
.bbf-band__lbl{display:block;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-dark-muted);margin-top:6px}

/* Sektions-Kopf einspaltig (nur Eyebrow + H2, ggf. + Button rechts) */
.bbf-head{max-width:760px;margin-bottom:clamp(32px,4vw,52px)}
.bbf-head h2,.bbf-sec-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.4vw,46px);line-height:1.1;letter-spacing:-.02em;color:var(--text-strong);margin:18px 0 0}
.bbf-head p{font-size:17px;line-height:1.65;color:var(--text-body);margin:16px 0 0}

/* Icon in Karten (einheitlich) */
.bbf-feature .bbf-ico,.bbf-flow .bbf-ico{color:var(--brand-cyan)}

/* JTL-Wawi-Hub */
.bbf-hubdecor{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bbf-hubdecor::before{content:"";position:absolute;left:-6%;top:-18%;width:48vw;height:48vw;max-width:620px;max-height:620px;border-radius:50%;background:radial-gradient(circle,rgba(0,174,231,0.56),transparent 54%);--flare-blur:46px;filter:blur(var(--flare-blur));animation:bbfBlobA 19s ease-in-out infinite;will-change:transform,opacity,filter}
.bbf-hubdecor::after{content:"";position:absolute;right:-8%;bottom:-22%;width:50vw;height:50vw;max-width:660px;max-height:660px;border-radius:50%;background:radial-gradient(circle,rgba(233,52,139,0.52),transparent 54%);--flare-blur:46px;filter:blur(var(--flare-blur));animation:bbfBlobB 25s ease-in-out infinite;will-change:transform,opacity,filter}
@media (prefers-reduced-motion: reduce){.bbf-hubdecor::before,.bbf-hubdecor::after{animation:none}}
.bbf-hubgrid{position:relative;display:flex;flex-wrap:wrap;gap:18px;align-items:stretch}
.bbf-hubcol{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:18px;justify-content:center}
.bbf-hubmid{flex:1.4 1 320px;min-width:0;display:flex;align-items:stretch}
.bbf-hubmid__box{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;background:rgba(12,16,22,0.62);border:1px solid rgba(255,255,255,0.1);padding:clamp(28px,3vw,48px) clamp(20px,2.5vw,40px)}
.bbf-hubmid__h{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.6vw,36px);line-height:1.15;letter-spacing:-.02em;color:#fff;margin-bottom:16px}
.bbf-hubmid__p{font-size:16px;line-height:1.65;color:#b4bfce;margin:0 0 22px}
.bbf-hubmid__chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:26px}
.bbf-hubmid__cta{display:flex;justify-content:center}

/* Button-Reihe (Basis + Varianten) */
.bbf-btn-row{display:flex;flex-wrap:wrap;gap:14px}
.bbf-btn-row--start{justify-content:flex-start;margin-top:clamp(32px,4vw,48px)}

/* News-Karten-Kopf */
.bbf-newscard__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}

/* CTA-Abstände + oben liegende Trennlinie */
.bbf-cta-pad{padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px)}
.bbf-rule--top{position:absolute;top:0;left:0;right:0}
/* Steht eine Linie als ERSTES Kind einer dunklen Flaeche, ist sie als obere
   Kante gemeint. Ohne --top bleibt sie im Textfluss und rutscht hinter das
   Innenabstand-Polster — gemessen 96px mitten ins Dunkle (Verleih-Seite). */
:is(.bbf-section--dark,.bbf-cta,.bbf-subhero,.bbf-hero)>.bbf-rule:first-child:not(.bbf-rule--top),
:is(.bbf-section--dark,.bbf-cta,.bbf-subhero,.bbf-hero)>.wp-block-group__inner-container>.bbf-rule:first-child:not(.bbf-rule--top){position:absolute;top:0;left:0;right:0;margin:0}
.bbf-rule--bottom{position:absolute;bottom:0;left:0;right:0}
/* Verlaufslinie als LETZTES Kind einer dunklen Sektion = Abschlusskante: an die
   Unterkante setzen, sonst bleibt unter der Linie ein schwarzes Padding-Band.
   !important, weil manche Linien inline position:relative tragen; gilt auch für
   inline-dunkle Sektionen (#0d1117). */
/* Letzte Linie einer dunklen/Hero-Sektion an die Sektions-Unterkante pinnen –
   ABER eine ausdrücklich als --top markierte Linie bleibt oben (sonst landet die
   CTA-Oberlinie unten und doppelt sich mit der Footer-Linie). */
/* Marken-Linie als Sektionsabschluss buendig an die Unterkante.
   Zweiter Selektor: Gutenberg wrappt bei tagName:"section" ALLES in
   .wp-block-group__inner-container — die Linie ist dort nie direktes Kind der
   Section, sonst bliebe unter ihr das Sektions-Padding als dunkler Streifen. */
:is(.bbf-section--dark,.bbf-cta,.bbf-hero,section[style*="0d1117"],section[style*="ink-900"])>.bbf-rule:last-child:not(.bbf-rule--top),
:is(.bbf-section--dark,.bbf-cta,.bbf-hero,section[style*="0d1117"],section[style*="ink-900"])>.wp-block-group__inner-container>.bbf-rule:last-child:not(.bbf-rule--top){position:absolute!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;margin-top:0!important}
/* NEUTRALISIERT (26.07.2026): frueher flutete dieser Inline-Overlay-Div die dunklen
   Inline-Sektionen mit 3 Blooms (Alpha 0.55/0.48/0.42) + Drift -> voller Wash. Die
   Sektion traegt ihren Bloom jetzt selbst (Ecken-Blooms im Section-Background). */
div[style*="animation:bbfGradient"][style*="blur("]{background:none!important;animation:none!important;filter:none!important}
/* Dunkle Sektion mit bündiger Hairline: weniger Auslauf unten */
.bbf-section--dark.bbf-section--flush{padding-bottom:clamp(44px,6vw,72px)}

@media (prefers-reduced-motion: reduce){
  .bbf-reveal{opacity:1;transform:none;transition:none}
  .bbf-cta .bbf-reveal>*>*{opacity:1;transform:none;transition:none}
  .bbf-grad-text{animation:none}
}
@media (max-width:860px){
  .bbf-herogrid{grid-template-columns:1fr}
}
.bbf-feature h3{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h3);color:var(--text-strong);margin:24px 0 12px;line-height:var(--lh-snug)}
.bbf-feature p{margin:0;font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--text-body)}

/* Lucide-Icons: Wrapper mit fixer Größe/Farbe, SVG füllt ihn */
.bbf-ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.bbf-ico>svg,.bbf-ico i{width:100%;height:100%;display:block;stroke-width:2}

/* HubCard (dunkle Satellitenkarte mit geschnittener Ecke) */
.bbf-hub{background:rgba(12,16,22,0.62);border:1px solid var(--border-on-dark);padding:18px 20px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.bbf-hub .eb{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--brand-cyan);margin-bottom:8px}
.bbf-hub.mag .eb{color:#f06aac}
.bbf-hub .ti{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-h3);color:var(--text-on-dark);line-height:1.2;margin-bottom:6px}
.bbf-hub .cap{font-size:var(--fs-sm);color:#b4bfce;line-height:var(--lh-normal)}

/* EcosystemCard (Lösungen-Teaser) */
.bbf-eco{display:block;text-decoration:none;background:var(--surface-card);border:1px solid var(--border-subtle);padding:18px 20px;box-shadow:none;transition:all var(--dur-base) var(--ease-out)}
.bbf-eco .ti{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-body);line-height:1.25;color:var(--text-strong);margin-bottom:8px}
.bbf-eco .tx{font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--text-body)}

/* Prozess-/News-Karte mit Growbar (linker Balken wächst bei Hover) */
.bbf-grow{position:relative;background:#fff;border:1px solid var(--border-subtle);overflow:hidden;box-shadow:var(--shadow-md);backface-visibility:hidden;transition:transform 340ms var(--ease-out),box-shadow 340ms var(--ease-out)}
.bbf-grow .bar{position:absolute;left:0;top:30px;width:4px;height:64px;background:linear-gradient(180deg,#00aee7 0%,#0280b9 28%,#931d7d 55%,#e23589 78%,#c8dd9b 100%);transition:top 420ms var(--ease-out),height 420ms var(--ease-out),width var(--dur-base) var(--ease-out)}
.bbf-grow .corner{position:absolute;top:0;right:0;width:28px;height:28px;background:linear-gradient(135deg,#e23589 0%,#931d7d 30%,#0280b9 55%,#00aee7 75%,#71bf93 100%);clip-path:polygon(0 0,100% 0,100% 100%)}

/* Header + Mega-Menü (CSS-Hover, kein JS) */
.bbf-nav-item{position:static}
.bbf-mega{position:absolute;top:100%;left:0;right:0;background:#12161d;border-bottom:1px solid rgba(255,255,255,0.08);box-shadow:0 18px 48px rgba(13,17,23,0.5);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility var(--dur-base)}
.bbf-mega a.mega-link{display:block;padding:10px;cursor:pointer;transition:background var(--dur-fast)}
.bbf-navbtn{display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:14px;padding:10px 14px;color:rgba(255,255,255,0.82);transition:color var(--dur-fast) var(--ease-out);text-decoration:none}

/* Mobile-Drawer */
.bbf-drawer{position:fixed;top:72px;left:0;right:0;bottom:0;z-index:99;background:#0d1117;overflow:auto;display:none}
.bbf-drawer.open{display:block;animation:bbfMenuIn 240ms var(--ease-out) both}
.bbf-burger{display:none}
@media (max-width:979px){
  .bbf-desktop-nav{display:none!important}
  .bbf-burger{display:flex!important}
}

/* ============================================================
   GLOBALES CHROME (bbfx-*) — Header/Mega/Mobile/Footer
   Neue, kollisionsfreie Klassen (Alt-CSS greift nicht).
   ============================================================ */
.bbfx-header{position:sticky;top:0;z-index:1000;font-family:var(--font-body)}
.bbfx-header *{box-sizing:border-box}
/* Anker-Sprünge (Mega-Menü/Inhaltslinks) nicht unter den 114px-Sticky-Header laufen
   lassen. :where() = Spezifität 0, greift nicht in bestehende Layouts ein. */
:where(section,[id],h1,h2,h3,h4){scroll-margin-top:120px}
.bbfx-topbar{background:#0a0d12;border-bottom:1px solid rgba(255,255,255,0.06)}
.bbfx-topbar-in{max-width:var(--container-max);margin:0 auto;padding:0 clamp(20px,5vw,64px);height:40px;display:flex;align-items:center;gap:18px}
.bbfx-topbadge{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-cyan)}
.bbfx-topbadge .bbfx-ico{color:var(--brand-cyan)}
.bbfx-topmsg{font-size:12.5px;color:var(--text-on-dark-muted)}
.bbfx-toplinks{margin-left:auto;display:flex;gap:18px}
/* Spezifisch, weil der <header> die Klasse bbf-r traegt und sonst
   .bbf-r a:not([class]) (Content-Linkfarbe, hell gedacht) hier gewinnt. */
.bbfx-topbar .bbfx-toplinks a{font-size:12.5px;color:var(--text-on-dark-muted);display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.bbfx-topbar .bbfx-ico,.bbfx-topbadge .bbfx-ico{width:15px;height:15px;display:inline-flex}
.bbfx-nav-wrap{background:rgba(13,17,23,0.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.08)}
.bbfx-bar{max-width:var(--container-max);margin:0 auto;padding:0 clamp(20px,5vw,64px);height:72px;display:flex;align-items:center;gap:22px}
.bbfx-logo{display:flex;align-items:center;flex-shrink:0}
.bbfx-logo img{height:40px;width:auto;max-width:none;display:block}
.bbfx-nav{display:flex;align-items:stretch;gap:2px;height:100%}
/* Header schmaleres Seitenpadding (braucht kein 64px wie Content) — mehr Platz für Nav+CTA, damit CTA nie abgeschnitten wird */
.bbfx-nav-wrap .bbfx-bar,.bbfx-nav-wrap+.bbfx-topbar .bbfx-topbar-in,.bbfx-topbar .bbfx-topbar-in{padding-left:clamp(16px,2.6vw,40px);padding-right:clamp(16px,2.6vw,40px)}
@media (min-width:1281px) and (max-width:1440px){.bbfx-nav{gap:0}.bbfx-navlink{font-size:13px;padding:9px 7px}.bbfx-cta{font-size:13px}}
@media (min-width:981px) and (max-width:1280px){.bbfx-nav{gap:0}.bbfx-navlink{font-size:12.5px;padding:8px 6px}.bbfx-navlink .bbfx-ico{width:12px;height:12px;margin-left:-2px}.bbfx-cta{font-size:12.5px;padding-left:12px;padding-right:12px}.bbfx-cta .bbfx-ico{display:none}}
.bbfx-nav-item{position:static;display:flex;align-items:center}
.bbfx-navlink{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-family:var(--font-display);font-weight:600;font-size:14px;color:rgba(255,255,255,0.82);padding:10px 12px;text-decoration:none;cursor:pointer;background:none;border:none;transition:color var(--dur-fast) var(--ease-out)}
.bbfx-nav-item{flex:0 0 auto}
.bbfx-navlink .bbfx-ico{width:15px;height:15px;transition:transform var(--dur-base) var(--ease-out)}
.bbfx-megaback{position:fixed;inset:0;z-index:900;background:rgba(5,7,10,0.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out),visibility var(--dur-base)}
.bbfx-mega{position:absolute;left:0;right:0;top:100%;background:#12161d;border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.08);box-shadow:0 26px 50px rgba(0,0,0,0.55);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility var(--dur-base);z-index:1000}
/* Einheitliches Mega-Layout: Kopfzeile (Titel + Intro + Übersicht-Link) + Inhalt darunter — für ALLE Megas */
.bbfx-mega-in{max-width:var(--container-max);margin:0 auto;padding:30px clamp(20px,5vw,64px) 36px;display:block}
.bbfx-mega-intro strong{display:block;font-family:var(--font-display);font-weight:700;font-size:20px;color:#fff;margin-bottom:10px}
.bbfx-mega-intro p{font-size:14px;line-height:1.6;color:var(--text-on-dark-muted);margin:0 0 18px}
.bbfx-mega-intro .bbfx-mega-all{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-cyan);text-decoration:none}
/* Besuchte Links duerfen nicht auf Browser-Lila zurueckfallen (Mega/Nav/Karten auf dunkel) */
.bbfx-mega-all,.bbfx-mega-all:visited{color:var(--brand-cyan)!important}
.bbfx-mega-link:visited strong{color:#fff}
.bbfx-mega-link:visited span{color:var(--text-on-dark-muted)}
/* Mega-Menü: Prototyp-Layout mit Titelzeile + Gruppen-Spalten */
.bbfx-mega-in--cols{display:block}
.bbfx-mega-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:22px}
.bbfx-mega-top strong{font-family:var(--font-display);font-weight:800;font-size:22px;color:#fff}
.bbfx-mega-top p{margin:0;font-size:14px;color:var(--text-on-dark-muted);flex:1;min-width:240px}
.bbfx-mega-top .bbfx-mega-all{margin-left:auto}
.bbfx-mega-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.bbfx-mega-colhead{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-cyan);margin-bottom:10px}
.bbfx-mega-col .bbfx-mega-link{padding:8px 10px;margin-left:-10px}
.bbfx-mega-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:2px 20px;align-content:start}
.bbfx-mega-link{display:block;padding:9px 10px;text-decoration:none;border-left:2px solid transparent;transition:background var(--dur-fast),border-color var(--dur-fast)}
.bbfx-mega-link strong{display:block;font-family:var(--font-display);font-weight:600;font-size:14px;line-height:1.3;color:#fff}
.bbfx-mega-link span{display:block;font-size:12.5px;line-height:1.4;color:var(--text-on-dark-muted);margin-top:2px}
.bbfx-cta{margin-left:auto;flex-shrink:0}
.bbfx-burger{display:none;align-items:center;justify-content:center;flex:0 0 44px!important;width:44px!important;height:44px!important;min-width:44px;box-sizing:border-box;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);cursor:pointer;color:#fff;overflow:visible;padding:0}
.bbfx-burger .bbfx-ico{width:22px!important;height:22px!important;flex-shrink:0}
.bbfx-header,.bbfx-nav-wrap,.bbfx-bar{overflow:visible}
/* Mobile-Drawer (adaptiert, hochwertig) */
.bbfx-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,90vw);z-index:1100;background:#0d1117;border-left:1px solid rgba(255,255,255,0.08);box-shadow:-24px 0 60px rgba(0,0,0,0.5);overflow-y:auto;transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-out);visibility:hidden}
.bbfx-drawer.open{transform:none;visibility:visible}
.bbfx-scrim{position:fixed;inset:0;z-index:1090;background:rgba(5,7,10,0.5);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);opacity:0;visibility:hidden;transition:opacity var(--dur-base)}
.bbfx-scrim.open{opacity:1;visibility:visible}
.bbfx-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.08)}
.bbfx-drawer-head img{height:28px}
.bbfx-drawer-x{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:#fff;cursor:pointer}
.bbfx-drawer-x .bbfx-ico{width:20px;height:20px}
.bbfx-drawer-status{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,0.08)}
.bbfx-drawer-status strong{display:block;font-family:var(--font-display);font-weight:700;color:#fff;font-size:15px;margin-bottom:4px}
.bbfx-drawer-status span{font-size:13px;color:var(--text-on-dark-muted);line-height:1.5}
.bbfx-acc{border-bottom:1px solid rgba(255,255,255,0.08)}
.bbfx-acc>button{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;padding:16px 20px;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:16px;color:#fff;text-align:left}
.bbfx-acc>button .bbfx-ico{width:18px;height:18px;color:var(--brand-cyan);transition:transform var(--dur-base)}
.bbfx-acc.open>button .bbfx-ico{transform:rotate(180deg)}
/* CTA-/Drawer-/Footer-Button-Icons + Full-Width-Drawer-CTA (loesen frühere Inline-Styles ab) */
.bbfx-cta .bbfx-ico,.bbfx-drawer-cta .bbfx-ico,.bbfx-drawer-contact .bbfx-ico,.bbfx-footer-col .bbfx-ico{width:16px;height:16px;display:inline-flex}
.bbfx-drawer-cta .bbf-btn{width:100%}
.bbfx-footer-col .bbf-btn{margin-top:8px}
.logo-fallback,.drawer-logo-fallback{color:#fff;font-family:var(--font-display);font-weight:700}
.bbfx-acc-body{display:none;padding:0 20px 12px}
.bbfx-acc.open .bbfx-acc-body{display:block;animation:bbfMenuIn 220ms var(--ease-out) both}
.bbfx-acc-body a{display:block;padding:9px 12px;font-size:14px;color:rgba(255,255,255,0.82);text-decoration:none;border-left:2px solid transparent}
.bbfx-drawer-cta{padding:20px}
.bbfx-drawer-contact{padding:0 20px 28px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--text-on-dark-muted)}
.bbfx-drawer-contact a{color:var(--brand-cyan);text-decoration:none}
@media (max-width:1259px){
  .bbfx-nav,.bbfx-cta,.bbfx-topmsg{display:none}
  .bbfx-burger{display:inline-flex}
  .bbfx-logo img{height:32px}
  /* Mobil: die dunkle Kopfzeilenflaeche wird beim Scrollen leicht glasig —
     Inhalt zieht sichtbar dahinter durch. Nur die Flaeche; Logo, Burger und
     Text bleiben deckend, weil sie Kinder ohne eigene Transparenz sind.
     Am Seitenanfang (kein `is-stuck`) bleibt sie deckend dunkel, sonst laege
     hinter der Leiste der helle Seitenhintergrund und wuerde sie grau waschen. */
  .bbfx-nav-wrap{background:#0d1117;transition:background var(--dur-base) var(--ease-out)}
  .bbfx-header.is-stuck .bbfx-nav-wrap{background:rgba(13,17,23,0.78);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
  /* Ohne Backdrop-Filter (aeltere Browser) bleibt die Flaeche deckend lesbar. */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .bbfx-header.is-stuck .bbfx-nav-wrap{background:rgba(13,17,23,0.96)}
  }
  /* Geoeffnetes Menue: keine Durchsicht, sonst flimmert der Drawer durch. */
  body:has(#bbfx-drawer.open) .bbfx-header.is-stuck .bbfx-nav-wrap{background:rgba(13,17,23,0.96)}
  /* Row-Layout gegen externe (Divi-)Mobile-Overrides erzwingen, sonst kippt die Bar
     auf flex-direction:column und der Burger rutscht unter das Logo. */
  .bbfx-nav-wrap .bbfx-bar{height:60px;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;gap:16px}
  .bbfx-nav-wrap .bbfx-logo{flex:0 0 auto!important;width:auto!important;align-self:center!important}
  .bbfx-nav-wrap .bbfx-burger{align-self:center!important;margin:0!important}
  /* Topbar mobil kompakt: einzeilig, keine Umbrueche, kein Hoehen-Sprung/Abstand */
  .bbfx-topbar-in{height:auto;min-height:38px;padding-top:8px;padding-bottom:8px;gap:12px;flex-wrap:nowrap}
  .bbfx-topbadge{font-size:11px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .bbfx-toplinks{gap:12px;flex-shrink:0}
  .bbfx-toplinks a span:not(.bbfx-ico){display:none} /* nur Icon + Nummer knapp */
}
@media (max-width:560px){
  /* Auf kleinen Screens Topbar ganz weg (Abstand/Umbruch vermeiden) — Kontakt liegt im Drawer */
  .bbfx-topbar{display:none}
}
/* Mobile-Drawer — abgestimmte Optik */
.bbfx-drawer-status{background:rgba(255,255,255,0.03)}
.bbfx-acc-body{padding-bottom:14px}
.bbfx-drawer-cta .bbf-btn{justify-content:center}
/* Footer */
.bbfx-footer{position:relative;overflow:hidden;background:var(--gradient-dark-bloom);font-family:var(--font-body)}
/* Footer-Leucht-Flares (sichtbar + animiert, wie Hero) */
.bbfx-footer::before,.bbfx-footer::after{content:"";position:absolute;z-index:0;pointer-events:none;border-radius:50%;--flare-blur:72px;filter:blur(var(--flare-blur));will-change:transform,opacity,filter}
.bbfx-footer::before{left:-8%;top:6%;width:50vw;height:44vw;max-width:680px;max-height:550px;background:radial-gradient(circle,rgba(147,29,125,0.62),transparent 54%);animation:bbfHeroGlowA 24s ease-in-out infinite}
.bbfx-footer::after{right:-6%;bottom:-12%;width:52vw;height:46vw;max-width:720px;max-height:590px;background:radial-gradient(circle,rgba(0,174,231,0.52),transparent 52%);animation:bbfHeroGlowB 29s ease-in-out infinite}
.bbfx-footer-in,.bbfx-footer-rule{position:relative;z-index:1}
/* Animierte Linie ueber dem Footer — EXAKT wie Mockup: scharfe 5px-Spektrumlinie
   + weicher Blur-Glow (120px, opacity .18) darueber, bbfGradient 26s. */
.bbfx-footer-rule{position:relative;width:100%;height:6px;background:linear-gradient(90deg,#e23589,#931d7d,#0280b9,#00aee7,#71bf93,#c8dd9b,#fdd091,#e23589);background-size:50% 100%;animation:bbfGradient 14s linear infinite}
.bbfx-footer-rule::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:220px;background:radial-gradient(30% 96% at 22% 100%,rgba(226,53,137,0.60),transparent 74%),radial-gradient(32% 100% at 68% 100%,rgba(0,174,231,0.52),transparent 74%),radial-gradient(28% 90% at 46% 100%,rgba(113,191,147,0.46),transparent 76%);background-size:175% 175%,185% 185%,195% 195%;animation:bbfBloomDrift 22s ease-in-out infinite;filter:blur(42px);pointer-events:none}
.bbfx-footer-in{max-width:var(--container-max);margin:0 auto;padding:clamp(56px,7vw,88px) clamp(20px,5vw,64px) 32px;position:relative}
.bbfx-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(28px,4vw,52px)}
.bbfx-footer-grid h3{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 18px}
.bbfx-footer-grid p{font-size:15px;line-height:1.65;color:var(--text-on-dark-muted);margin:0 0 20px;max-width:320px}
.bbfx-footer-col{display:flex;flex-direction:column;gap:11px}
.bbfx-footer-col a,.bbfx-footer-col span{font-size:15px;color:var(--text-on-dark-muted);text-decoration:none}
.bbfx-footer-logo{height:34px;width:auto;max-width:none;margin-bottom:20px}
.bbfx-social{display:flex;gap:10px;margin-top:4px}
.bbfx-social a{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.8);transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.bbfx-social .bbfx-ico{width:18px;height:18px}
/* Safari kollabiert SVGs ohne width/height auf 0 → explizite Groesse + Farbe erben */
.bbfx-social a svg{width:18px;height:18px;display:block;fill:currentColor}
.bbfx-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid rgba(255,255,255,0.1);margin-top:clamp(40px,5vw,64px);padding-top:24px}
.bbfx-footer-bottom span,.bbfx-footer-bottom a{font-size:14px;color:var(--text-on-dark-muted);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
.bbfx-footer-bottom .bbfx-legal{display:flex;gap:22px}
@media (max-width:900px){.bbfx-footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.bbfx-footer-grid{grid-template-columns:1fr}}
.bbfx-ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.bbfx-ico svg{width:100%;height:100%;display:block}

/* ============================================================
   Cookie-Banner — EINE kanonische Definition.
   Vorher lag die Optik auf vier Ebenen (style.css dreifach, Inline-Style im
   mu-plugin, hier) und jede arbeitete mit !important; deshalb liess sich die
   mobile Darstellung nicht korrigieren. Die Alt-Ebenen sind entfernt, dieser
   Block regiert allein — ohne !important, ohne Inline.

   Rechtlicher Rahmen: Zustimmen, Ablehnen und Einstellungen sind gleichwertig
   dargestellt (gleiche Groesse, gleicher Kontrast, gleiche Ebene — BGH
   „Planet49", DSK-Vorgaben). Kein farblich hervorgehobener Akzeptieren-Knopf.
   ============================================================ */
.bbf-cookie-consent{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:1200;display:flex;justify-content:center;align-items:flex-end;padding:16px;font-family:var(--font-body)}
.bbf-cookie-consent[hidden]{display:none}
.bbf-cookie-consent__card{width:100%;max-width:var(--container-max);margin:0;background:#12161d;border:1px solid rgba(255,255,255,0.12);box-shadow:0 -8px 40px rgba(0,0,0,0.5);padding:20px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;max-height:min(80svh,720px);overflow-y:auto;overscroll-behavior:contain}
.bbf-cookie-consent__eyebrow{display:block;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-cyan);margin-bottom:4px}
.bbf-cookie-consent__copy{flex:1 1 360px;min-width:0}
.bbf-cookie-consent__copy h2,.bbf-cookie-consent__title{display:block;font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.2;color:#fff;margin:0 0 6px}
.bbf-cookie-consent__copy p{font-size:14px;line-height:1.55;color:var(--text-on-dark-muted);margin:0}
.bbf-cookie-consent__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.bbf-cookie-button{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:46px;min-width:150px;padding:0 18px;font-family:var(--font-display);font-weight:600;font-size:13px;line-height:1.2;text-align:center;color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,0.55);box-sizing:border-box;cursor:pointer;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.bbf-cookie-button:focus-visible{outline:2px solid var(--brand-cyan);outline-offset:2px}
.bbf-cookie-link{font-size:13px;color:var(--text-on-dark-muted);text-decoration:none;align-self:center}
.bbf-cookie-consent__settings{flex-basis:100%;display:flex;flex-direction:column;gap:12px;border-top:1px solid rgba(255,255,255,0.1);margin-top:6px;padding-top:16px}
.bbf-cookie-consent__settings[hidden]{display:none}
.bbf-cookie-choice{display:flex;gap:12px;align-items:flex-start}
.bbf-cookie-choice input{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:var(--brand-cyan)}
.bbf-cookie-choice span strong{display:block;font-family:var(--font-display);font-weight:600;font-size:14px;color:#fff}
.bbf-cookie-choice span small{display:block;font-size:12.5px;line-height:1.4;color:var(--text-on-dark-muted);margin-top:2px}
.bbf-cookie-consent__actions--settings{flex-basis:100%}
/* Mobil: Karte als Blatt am unteren Rand, Buttons volle Breite untereinander —
   gleich gross, gleich erreichbar, Daumenhoehe 48 px. */
@media (max-width:640px){
  .bbf-cookie-consent{padding:0}
  /* nowrap ist Pflicht: In der Spalte wuerde `flex-wrap:wrap` (Basisregel) die
     Karte bei Hoehenbegrenzung in eine ZWEITE Spalte umbrechen — das
     Einstellungsfeld lag dadurch unsichtbar neben dem Text. */
  .bbf-cookie-consent__card{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:14px;border-left:0;border-right:0;border-bottom:0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));max-height:min(76svh,620px)}
  .bbf-cookie-consent__copy{flex:0 0 auto}
  .bbf-cookie-consent__copy h2,.bbf-cookie-consent__title{font-size:16.5px}
  .bbf-cookie-consent__copy p{font-size:13.5px;line-height:1.45}
  .bbf-cookie-consent__actions{flex-direction:column;align-items:stretch;gap:8px}
  .bbf-cookie-button{width:100%;min-width:0;height:48px;padding:0 14px}
  .bbf-cookie-link{align-self:flex-start;padding:2px 0}
  /* In der Spalte bedeutet flex-basis die HOEHE — das Einstellungsfeld bekaeme
     sonst die volle Kartenhoehe und schoebe sich aus dem Bild. */
  .bbf-cookie-consent__settings,.bbf-cookie-consent__actions--settings{flex-basis:auto}
  .bbf-cookie-consent__settings{margin-top:0;padding-top:14px}
}

/* ============================================================
   REFERENZ-DETAILSEITE (Fallstudie) — kanonische Komponenten, EINE Definition.
   Vorlage: Prototyp #/refdetail. Klassenbasiert (kein per-Seite-Inline).
   ============================================================ */
.bbf-refhero{position:relative;overflow:hidden;background:radial-gradient(120% 65% at 0% 120%,rgba(2,128,185,0.30),transparent 60%),radial-gradient(120% 65% at 100% 120%,rgba(113,191,147,0.20),transparent 60%),var(--ink-900)}
.bbf-refhero .bbf-wrap{position:relative;padding-top:clamp(40px,6vw,64px);padding-bottom:clamp(44px,6vw,68px)}
.bbf-refhero .bbf-mark,.bbf-hero .bbf-mark{position:absolute;right:-5%;bottom:-18%;width:46vw;max-width:680px;opacity:.10;filter:grayscale(1);pointer-events:none;z-index:1}
.bbf-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:24px;list-style:none;padding:0}
.bbf-breadcrumb li,.bbf-breadcrumb a,.bbf-breadcrumb span{font-size:13px;color:var(--text-on-dark-muted)}
.bbf-breadcrumb a{text-decoration:none}
.bbf-breadcrumb .sep{color:rgba(255,255,255,0.35)}
.bbf-breadcrumb [aria-current]{color:#fff}
.bbf-refhero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(32px,3.8vw,52px);line-height:1.12;letter-spacing:-.02em;color:#fff;margin:22px 0;max-width:820px}
.bbf-refhero .bbf-lead{font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:rgba(255,255,255,.88);margin:0 0 26px;max-width:680px}
.bbf-metachips{display:flex;flex-wrap:wrap;gap:10px}
.bbf-metachip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid rgba(255,255,255,0.16);font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85)}
/* Body: 2 Spalten (Hauptspalte + sticky Sidebar), mobil untereinander (980px) */
.bbf-refbody{background:var(--neutral-50)}
/* FAQ-Accordion auf Block-Referenzseiten (kein .bbf-r-Scope noetig) */
.bbf-refmain .seo-faq-band{display:flex;flex-direction:column;gap:14px;max-width:860px}
.bbf-refmain .seo-faq-item{display:block;background:transparent;border:0;border-bottom:1px solid var(--border-subtle);box-shadow:none}
.bbf-refmain .seo-faq-item>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px;font-family:var(--font-display);font-weight:700;font-size:clamp(16px,2vw,19px);line-height:1.35;color:var(--text-strong);transition:color var(--dur-fast) var(--ease-out)}
.bbf-refmain .seo-faq-item>summary::-webkit-details-marker{display:none}
.bbf-refmain .seo-faq-item>summary::marker{content:""}
.bbf-refmain .seo-faq-item>summary::after{content:"+";flex-shrink:0;font-family:var(--font-body);font-weight:400;font-size:26px;line-height:1;color:var(--brand-cyan);transition:transform var(--dur-base) var(--ease-out)}
.bbf-refmain .seo-faq-item[open]>summary::after{content:"\2013"}
.bbf-refmain .seo-faq-item>div{padding:0 2px 22px;color:var(--text-body);font-size:var(--fs-body);line-height:1.7;max-width:820px}
/* Fliesstext-Links auf Referenzseiten: cyan, Hover unterstrichen */
.bbf-refmain p a{color:var(--cyan-700);text-decoration:none}
.bbf-refbody p:empty,.bbf-refmore p:empty{display:none;margin:0}
.bbf-refbody .bbf-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(32px,4vw,56px);align-items:start;padding-top:clamp(48px,6vw,72px);padding-bottom:clamp(64px,9vw,112px)}
/* Gutenberg-Fassung: Group rendert einen Inner-Container -> Grid dort aufspannen */
.bbf-refbody .bbf-wrap:has(>.wp-block-group__inner-container){display:block}
.bbf-refbody .bbf-wrap>.wp-block-group__inner-container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(32px,4vw,56px);align-items:start}
.bbf-refmain{min-width:0;max-width:720px}
/* Rhythmus der Fallstudie: Vorher lagen Ueberschrift, Absatz, Karte und FAQ
   alle 14 px auseinander — ohne Abstufung klebt der ganze Text zusammen.
   Abschnittsueberschriften bekommen Luft nach oben (die Marge faellt mit dem
   Abstand des Vorgaengers zusammen, addiert sich also nicht). */
.bbf-refmain .bbf-leistungen{margin-bottom:clamp(28px,3vw,40px)}
.bbf-refmain .bbf-refslider{margin-bottom:clamp(32px,3.5vw,44px)}
.bbf-refmain .bbf-refquote{margin-top:clamp(28px,3vw,40px)}
.bbf-refmain h2{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.4vw,32px);line-height:1.2;letter-spacing:-.02em;color:var(--text-strong);margin:clamp(36px,4vw,52px) 0 16px}
/* ACHTUNG: Jede Ueberschrift ist erstes Kind ihres eigenen Wrappers —
   ein blosses :first-child hat deshalb ALLEN Ueberschriften die Luft genommen.
   Nur die erste Ueberschrift der Spalte darf ohne Abstand starten. */
.bbf-refmain > h2:first-child,.bbf-refmain > div:first-child > h2:first-child,.bbf-refmain > .bbf-shot + h2{margin-top:0}
.bbf-refmain p{font-size:17px;line-height:1.65;color:var(--text-body);margin:0 0 14px}
.bbf-shot{position:relative;background:#fff;border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);display:block;overflow:hidden;margin-bottom:clamp(32px,4vw,44px)}
/* Nie über die eigene Auflösung hinaus vergrössern: Manche Archivbilder liegen
   nur in 320 px vor und wirken auf volle Breite gezogen unscharf. */
.bbf-shot img{width:auto;max-width:100%;height:auto;display:block;margin-inline:auto}
/* Markenleiste über dem Bild — wie im Prototyp; fasst den Screenshot ein und
   nimmt die Gradient-Sprache der Hero-Kanten und der Sidebar-Karte auf. */
.bbf-shot::before,.bbf-refslider::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:2;background:var(--gradient-brand);background-size:220% 100%;animation:bbfGradient 9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.bbf-shot::before,.bbf-refslider::before{animation:none}}
/* Schrumpft auf die Bildbreite, damit die Markenleiste bei kleinen Originalen
   (alte 320-Pixel-Aufmacher) nicht ueber die ganze Spalte laeuft. */
.bbf-shot--plain{background:transparent;border:0;box-shadow:none;overflow:visible;padding-top:4px;width:fit-content;max-width:100%;margin-inline:0}
/* min-content + min-width:100% haelt die Bildunterschrift auf Bildbreite —
   sonst zieht der laengere Text die Figur (und damit die Markenleiste) breiter
   als das Bild. */
.bbf-shot--plain figcaption{margin-top:10px;width:min-content;min-width:100%;font-size:13px;line-height:1.5;color:var(--text-muted)}
.bbf-shot--ph{aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;color:var(--neutral-400);font:600 13px/1.4 var(--font-display);text-align:center;padding:16px}
.bbf-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:20px;margin-bottom:clamp(36px,4vw,48px)}
.bbf-shots .bbf-shot{margin-bottom:0}.bbf-shots .bbf-shot--ph{aspect-ratio:16/11}
/* Zusatzbilder im Paar: gleiche Kachelhoehe, damit die Reihe ruhig steht.
   Die Desktopaufnahme fuellt (oben ausgerichtet, dort steht der Kopf der Seite),
   die Hochkant-Aufnahme des Handys wird eingepasst statt beschnitten. */
.bbf-shots .bbf-shot{height:clamp(220px,20vw,280px);background:#eef1f2;overflow:hidden}
.bbf-shots .bbf-shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.bbf-shots .bbf-shot--mobil img{object-fit:contain;background:#12161d}
.bbf-leistungen{display:flex;flex-direction:column;border:1px solid var(--border-subtle);background:#fff;box-shadow:var(--shadow-sm);margin:0 0 8px}
.bbf-leistung{display:flex;gap:14px;align-items:flex-start;padding:18px 22px;border-bottom:1px solid var(--border-subtle)}
.bbf-leistung:last-child{border-bottom:0}
.bbf-leistung .bbf-ico{width:20px;height:20px;color:var(--brand-cyan);margin-top:1px}
.bbf-leistung span{font-size:15px;line-height:1.6;color:var(--text-body)}
.bbf-leistung strong{color:var(--text-strong)}
.bbf-quote{position:relative;margin:clamp(36px,4vw,48px) 0 0;padding:28px 30px 26px 34px;background:#fff;border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm)}
.bbf-quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#00aee7 0%,#0280b9 28%,#931d7d 55%,#e23589 78%,#c8dd9b 100%)}
.bbf-quote blockquote{margin:0;font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.5;color:var(--text-strong)}
.bbf-quote figcaption{margin-top:14px;font-size:14px;color:var(--text-muted)}
/* Sidebar „Projekt auf einen Blick" */
.bbf-refside{position:sticky;top:130px;max-width:420px}
/* Kicker in Weitere-Projekte-Karten (Projektart aus Meta) */
.bbf-eco .eb{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-700);margin-bottom:6px}
/* Screenshot-Slider (Referenz-Detail) */
.bbf-refslider{position:relative;margin-bottom:clamp(32px,4vw,44px)}
.bbf-refslider__track{position:relative;background:#eef1f2;border:1px solid var(--border-subtle);height:clamp(280px,34vw,440px);overflow:hidden}
.bbf-refslider__track::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-brand);z-index:2}
.bbf-refslider__track:has(.bbf-refslide__ph){border-style:dashed;border-color:var(--border-strong)}
/* Slider-Wechsel: ueberblenden statt umschalten. Das eintreffende Bild kommt
   aus der Laufrichtung, das alte geht in die Gegenrichtung — 480 ms, dieselbe
   Kurve wie im ganzen Auftritt. Nur Deckkraft und transform, deshalb fluessig. */
.bbf-refslide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate3d(calc(var(--bbf-richtung,1) * 34px),0,0) scale(1.015);
  will-change:transform,opacity;transition:opacity 480ms var(--ease-out),transform 620ms cubic-bezier(.22,1,.36,1),visibility 0s linear 620ms}
.bbf-refslide.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity 480ms var(--ease-out),transform 620ms cubic-bezier(.22,1,.36,1),visibility 0s}
.bbf-refslide.is-raus{transform:translate3d(calc(var(--bbf-richtung,1) * -34px),0,0) scale(.99)}
@media (prefers-reduced-motion: reduce){
  .bbf-refslide{transition:none;transform:none}
  .bbf-refslide.is-raus{transform:none}
}
/* Der globale Bild-Reset (`body.bbf-clean … img{height:auto}`) ist spezifischer
   als eine einzelne Klasse — ohne den Praefix wuchs das Hochformat auf seine
   volle Hoehe und wurde vom Rahmen abgeschnitten. Deshalb hier mit Praefix und
   ueber max-* statt fester Groesse: passt ein, skaliert nie hoch. */
body.bbf-clean .bbf-refslide img,.bbf-refslide img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;display:block;margin:0 auto;cursor:zoom-in}
.bbf-refslide__ph{display:flex;flex-direction:column;align-items:center;gap:9px;color:#8a939e;text-align:center;padding:16px}
.bbf-refslide__ph .bbf-ph-ico{color:#a3acb6}
.bbf-refslide__ph .bbf-ph-ico svg{width:30px;height:30px;stroke-width:1.6}
.bbf-refslide__ph .bbf-ph-cap{font:600 13px/1.4 var(--font-display);color:#8a939e}
.bbf-refslider__label{position:absolute;left:18px;bottom:16px;display:inline-flex;align-items:baseline;gap:8px;background:#12161d;color:#fff;font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px}
.bbf-refslider__label .n{color:rgba(255,255,255,.6);font-size:10px;letter-spacing:0}
.bbf-refslider__btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#12161d;color:#fff;border:0;cursor:pointer;transition:background var(--dur-fast) var(--ease-out)}
/* Bedienelemente ueber das Bild: In der Galerie-Variante liegt das Bild auf
   z-index 1 (wegen der unscharfen Fuellung dahinter) — ohne eigene Ebene
   verschwinden Pfeile und Beschriftung darunter. */
.bbf-refslider__btn,.bbf-refslider__label{z-index:3}
.bbf-refslider__btn--prev{left:16px}
.bbf-refslider__btn--next{right:16px}
.bbf-refslider__btn .bbf-ico{width:18px;height:18px}
.bbf-refslider__dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.bbf-refslider__dot{width:26px;height:3px;background:var(--border-strong);border:0;cursor:pointer;padding:0;transition:background var(--dur-fast) var(--ease-out)}
.bbf-refslider__dot.is-active{background:var(--brand-cyan)}
@media (max-width:640px){.bbf-refslider__btn--prev{left:8px}.bbf-refslider__btn--next{right:8px}.bbf-refslider__track{height:220px}}
/* Kundenzitat-Box (Referenz-Detail) */
.bbf-refquote{position:relative;margin:clamp(28px,3vw,40px) 0;padding:24px 26px 20px 30px;background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm)}
.bbf-refquote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gradient-brand)}
.bbf-refquote p{font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.6vw,20px);line-height:1.45;color:var(--text-strong);margin:0 0 12px}
.bbf-refquote cite{font-style:normal;font-size:14px;color:var(--text-body)}
.bbf-refquote .note{font-size:12.5px;color:var(--text-muted)}
/* Screenshots: klickbar (Lightbox) */
.bbf-refdetail .bbf-shot img,.bbf-refbody .bbf-shot img,.bbf-refslide img{cursor:zoom-in}
.bbf-lightbox{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px);background:rgba(10,13,18,0.92);opacity:0;transition:opacity 220ms var(--ease-out)}
.bbf-lightbox.is-open{opacity:1}
.bbf-lightbox img{max-width:100%;max-height:100%;box-shadow:var(--shadow-lg);cursor:zoom-out}
.bbf-lightbox__close{position:absolute;top:18px;right:22px;appearance:none;background:none;border:0;cursor:pointer;color:#fff;font:300 34px/1 var(--font-body);opacity:.8;transition:opacity var(--dur-fast) var(--ease-out)}
@media (prefers-reduced-motion: reduce){.bbf-lightbox{transition:none}}
.bbf-refcard{position:relative;background:#fff;border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);padding:28px 28px 30px;overflow:hidden;max-width:100%;box-sizing:border-box}
.bbf-refcard .bbf-btn{display:flex;width:100%;justify-content:center;box-sizing:border-box;white-space:normal;text-align:center;margin-top:12px}
.bbf-refcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#00aee7 0%,#0280b9 28%,#931d7d 55%,#e23589 78%,#c8dd9b 100%)}
.bbf-refcard .bbf-refcard-h{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-700);margin-bottom:18px}
.bbf-fact{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--border-subtle)}
.bbf-fact:last-of-type{border-bottom:0}
.bbf-fact .k{font-size:14px;color:var(--text-muted)}
.bbf-fact .v{font-size:14px;font-weight:600;color:var(--text-strong);text-align:right}
.bbf-fact a.v{color:var(--cyan-700)}
.bbf-refcard .bbf-btn{width:100%;margin-top:10px}
.bbf-refcard .bbf-btn:first-of-type{margin-top:22px}
@media (max-width:980px){
  .bbf-refbody .bbf-wrap{grid-template-columns:1fr}
  .bbf-refbody .bbf-wrap>.wp-block-group__inner-container{grid-template-columns:1fr}
  .bbf-refside{position:static;max-width:none}
}
/* Referenz-Übersicht: Filter-Chips + verlinkte Fallstudien-Kacheln */
.bbf-reffilter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,3vw,40px)}
.bbf-reffilter button{font-family:var(--font-body);font-weight:600;font-size:14px;line-height:1;padding:10px 16px;border:1.5px solid var(--border-strong);background:var(--white);color:var(--text-body);cursor:pointer;transition:all var(--dur-base) var(--ease-out)}
.bbf-reffilter button.is-active{border-color:var(--brand-cyan);color:var(--brand-cyan);background:var(--cyan-50)}
.bbf-reftile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);text-decoration:none;overflow:hidden;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.bbf-reftile .bbf-reftile-img{position:relative;height:180px;background:linear-gradient(135deg,rgba(0,174,231,0.12),rgba(233,52,139,0.09) 55%,rgba(149,201,61,0.10)),var(--surface-card,#fff);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#7a8590;text-align:center;padding:12px;overflow:hidden}
.bbf-reftile-img::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 0% 0%,rgba(255,255,255,0.5),transparent 60%);pointer-events:none}
.bbf-reftile-img .bbf-ph-ico{display:inline-flex;color:var(--brand-cyan);opacity:.65;position:relative}
.bbf-reftile-img .bbf-ph-ico svg{width:30px;height:30px;stroke-width:1.6}
.bbf-reftile-img .bbf-ph-cap{font:600 13px/1.4 var(--font-display);letter-spacing:.01em;color:#6b7681;position:relative}
.bbf-reftile .bbf-reftile-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.bbf-reftile .tag{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-700);margin-bottom:2px}
.bbf-reftile .tag-sub{font-family:var(--font-body);font-size:12px;line-height:1.3;color:var(--text-muted);margin-bottom:8px}
.bbf-reftile h3{font-family:var(--font-display);font-weight:700;font-size:18px;line-height:1.3;color:var(--text-strong);margin:0}
.bbf-reftile p{font-size:15px;line-height:1.6;color:var(--text-body);margin:8px 0 0}
.bbf-reftile .more{margin-top:16px;font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-700);display:inline-flex;align-items:center;gap:6px}
.bbf-reftile .more .bbf-ico{width:15px;height:15px}
.bbf-refgrid{--grid-min:300px}
.bbf-refmoregrid{--grid-min:280px}
/* absolute + !important: der globale height:auto-Reset kollabierte das Bild auf 0px,
   wodurch loading="lazy" nie feuerte (0px-Element gilt als unsichtbar) — Deadlock. */
.bbf-reftile-img img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;display:block}
.bbf-reftile[hidden]{display:none!important}
.bbf-refintro{max-width:760px;margin:0 0 clamp(28px,3vw,40px)}
.bbf-refintro p{font-size:17px;line-height:1.65;color:var(--text-body);margin:0}
.bbf-cta__inner{max-width:680px;margin:0 auto}

/* ============================================================
   KANONISCHES ACCORDION / FAQ — EINE Definition, verbindlich auf ALLEN Seiten.
   !important überschreibt jedes per-Seite-Inline (z.B. Kasten-Variante der Startseite),
   damit die FAQ überall identisch wie auf /jtl-warenwirtschaft/ aussieht (Linien-Stil).
   ============================================================ */
.bbf-r .seo-faq-band:not(section){background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;max-width:900px}
.bbf-r .seo-faq-list{display:block!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0!important}
.bbf-r .seo-faq-item{display:block!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--border-subtle)!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin:0!important}
.bbf-r .seo-faq-item > summary{list-style:none!important;cursor:pointer;display:flex!important;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px!important;margin:0!important;font-family:var(--font-display)!important;font-weight:700!important;font-size:clamp(16px,2vw,19px)!important;line-height:1.35!important;color:var(--text-strong)!important;background:transparent!important;border:0!important;transition:color var(--dur-fast) var(--ease-out)}
.bbf-r .seo-faq-item > summary::-webkit-details-marker{display:none}
.bbf-r .seo-faq-item > summary::marker{content:""}
.bbf-r .seo-faq-item > summary::after{content:"+";flex-shrink:0;font-family:var(--font-body);font-weight:400;font-size:26px;line-height:1;color:var(--brand-cyan);transition:transform var(--dur-base) var(--ease-out)}
.bbf-r .seo-faq-item[open] > summary::after{content:"–"}
.bbf-r .seo-faq-item > div,.bbf-r .seo-faq-item > p{padding:0 2px 22px!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--text-body)!important;font-size:var(--fs-body)!important;line-height:1.7!important;max-width:820px}
.bbf-r .seo-faq-item[open]{animation:none}
.bbf-r .seo-faq-item[open] > div,.bbf-r .seo-faq-item[open] > p{animation:bbfFadeUp 300ms var(--ease-out) both}

/* ============================================================
   KANONISCHE LAYOUT-/SEKTIONS-KOMPONENTEN (eine Struktur je Element)
   Ersetzt die per-Seite inline-gestylten Sektionen/Heros/CTAs.
   Ziel: keine Abweichungen, kein CSS-Bloat. Markup:
   <section class="bbf-section bbf-section--dark"><div class="bbf-wrap">…</div></section>
   ============================================================ */
.bbf-wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.bbf-section{padding:var(--section-pad-y) 0;position:relative}
.bbf-section--light{background:var(--surface-page)}
.bbf-section--white{background:var(--surface-card);border-top:1px solid var(--border-subtle)}
/* Schliesst die Sektion darueber bereits mit der Markenlinie ab, entfaellt der
   eigene 1px-Rahmen — sonst stehen zwei Linien direkt uebereinander.
   Zweite Zeile: Gutenberg haengt die Linie in den inner-container. */
section:has(>.bbf-rule:last-child:not(.bbf-rule--top))+.bbf-section--white,
section:has(>.wp-block-group__inner-container>.bbf-rule:last-child:not(.bbf-rule--top))+.bbf-section--white{border-top:0}
.bbf-section--dark{background:var(--gradient-dark-bloom);overflow:hidden}
/* Kanon: dunkle SECTION-Elemente bekommen IMMER vertikalen Abstand (58 Seiten hatten keinen).
   Nur <section> — Gutenberg-Gruppen (div.wp-block-group, z.B. Startseite) haben eigenes
   Innen-Padding und duerfen NICHT doppelt aufgepolstert werden. */
section.bbf-section--dark:not(.bbf-section){padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
/* Animierter, organisch driftender Bloom für dunkle Sektionen (Klasse + inline #0d1117).
   Höher platziert; Inhalt liegt darüber; unter Texten dezent (Deckkraft moderat). */
/* isolation + z-index:-1 statt Kinder auf position:relative zu zwingen —
   Letzteres verschob die Anker von absolut positionierten Linien (--bottom)
   auf den Gutenberg-inner-container → Band unter der Linie (Regression). */
.bbf-section--dark,.bbf-cta,.bbf-hero,section[style*="0d1117"]{position:relative;isolation:isolate}
/* Deko-Blobs (absolute, right:-10% u. ä.) erzeugen ohne Clipping horizontales
   Scrollen auf Mobil — die dunklen Sektionen clippen deshalb immer. */
section[style*="0d1117"]{overflow:hidden}
/* Lange deutsche Komposita („Standardproduktversprechen") sprengen sonst 390px:
   Überschriften dürfen mobil per Silbentrennung brechen; min-width:0 lässt
   Flex-Kopf-Spalten unter ihre min-content-Breite schrumpfen. */
@media (max-width:640px){
  h1,h2,h3{hyphens:auto;overflow-wrap:break-word}
  div[style*="flex-wrap:wrap"][style*="justify-content:space-between"]>*{min-width:0}
}
/* Karten-Titel: lange Komposita („Verantwortungsmatrix") brechen auch auf
   Desktop per Silbentrennung statt aus der Karte zu laufen. */
.bbf-feature h3,.bbf-grow h3,.bbf-eco .ti,.bbf-hub .ti{hyphens:auto;overflow-wrap:break-word}
/* ENTFERNT (26.07.2026): Das ::before stapelte 3 satte Blooms (Alpha 0.52/0.46/0.38,
   davon einer mittig bei 56% 60%) plus bbfBloomDrift-Animation ueber JEDE dunkle Sektion
   und flutete so die Mitte -> kein Ink sichtbar, diagonales Banding. Sollzustand: genau EINE
   Hintergrunddeklaration je Host (2 Ecken-Blooms + #0d1117), keine weitere Ebene. */
/* Sanfte Tonwechsel (hell↔hell): #fff/#f6f8fa unterscheiden sich kaum, deshalb
   stapeln sich 128px unten + 128px oben zu einem ~256px-Loch. Hier reicht EIN
   Rhythmus-Abstand – beide Seiten atmen je die Hälfte, die Hairline trennt sauber.
   Dunkle Übergänge bleiben voll (der Farbsprung trägt den Abstand). */
.bbf-section--light:has(+ .bbf-section--white),
.bbf-section--white:has(+ .bbf-section--light),
.bbf-section--white:has(+ .bbf-section--white),
.bbf-section--light:has(+ .bbf-section--light){padding-bottom:clamp(40px,5vw,64px)}
.bbf-section--white + .bbf-section--light,
.bbf-section--light + .bbf-section--white,
.bbf-section--white + .bbf-section--white,
.bbf-section--light + .bbf-section--light{padding-top:clamp(40px,5vw,64px)}
.bbf-section--dark,.bbf-section--dark h2,.bbf-section--dark h3{color:var(--text-on-dark)}
.bbf-section--dark p{color:var(--text-on-dark-muted)}
/* Hero (dunkel, Bloom, überschrift + lead + cta) — EINE Definition */
.bbf-hero{position:relative;overflow:hidden;background:radial-gradient(110% 75% at 8% 108%,rgba(147,29,125,0.40),transparent 60%),radial-gradient(105% 70% at 94% 110%,rgba(113,191,147,0.30),transparent 60%),#0d1117}
/* Sichtbare, animierte Leucht-Flares im unteren Hero (Stat-Band) — distinkt & weich, wie Prototyp; verankern unten, waschen die H1-Mitte nicht aus */
.bbf-hero::before,.bbf-hero::after,.bbf-subhero::before,.bbf-subhero::after{content:"";position:absolute;z-index:0;pointer-events:none;border-radius:50%;--flare-blur:48px;filter:blur(var(--flare-blur));will-change:transform,opacity,filter}
.bbf-hero::before,.bbf-subhero::before{left:-4%;bottom:-14%;width:56vw;height:46vw;max-width:780px;max-height:610px;background:radial-gradient(circle,rgba(147,29,125,0.88),transparent 50%);animation:bbfHeroGlowA 16s ease-in-out infinite}
.bbf-hero::after,.bbf-subhero::after{right:-2%;bottom:-16%;width:54vw;height:46vw;max-width:760px;max-height:610px;background:radial-gradient(circle,rgba(0,174,231,0.66),transparent 48%);animation:bbfHeroGlowB 21s ease-in-out infinite}
.bbf-hero>.bbf-container,.bbf-hero>.bbf-wrap,.bbf-hero>.bbf-stat-band,.bbf-hero>.bbf-rule,.bbf-subhero>.bbf-container,.bbf-subhero>.bbf-wrap,.bbf-subhero>.bbf-stat-band,.bbf-subhero>.bbf-rule{position:relative;z-index:2}
.bbf-hero .bbf-wrap{padding-top:clamp(52px,7vw,92px);padding-bottom:clamp(28px,4vw,48px)}
/* Zeilenabstand: 1.08 setzte die Zeilen so dicht, dass Umlautpunkte (Ä, Ö, Ü)
   fast die Zeile darueber beruehrten. 1.16 gibt Luft, ohne die Ueberschrift
   auseinanderzuziehen. */
.bbf-hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(36px,4.6vw,62px);line-height:1.16;letter-spacing:-.02em;color:#fff;margin:22px 0 20px;text-wrap:balance}
.bbf-nowrap{white-space:nowrap}
.bbf-hero .bbf-lead{font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:rgba(255,255,255,.88);margin:0 0 14px;max-width:600px}
.bbf-hero .bbf-sub{font-size:15px;line-height:1.6;color:var(--text-on-dark-muted);margin:0 0 30px;max-width:560px}
/* Gradient-Textzeile in Headlines — EINE Klasse statt inline */
/* Eyecatcher: Verlauf strömt NAHTLOS in eine Richtung (kein Hin-und-Zurück).
   Symmetrische Stops (Magenta→Cyan→Magenta) + Tiling: der Sprung bei 200% ist
   unsichtbar, dadurch endloser Fluss statt Ping-Pong. linear = gleichmäßig. */
.bbf-grad-text{background:linear-gradient(100deg,#e23589,#931d7d,#0280b9,#00aee7,#0280b9,#931d7d,#e23589);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:bbfGradWave 9s ease-in-out infinite}
/* Organische Welle statt gleichmäßigem Lauf: ungleiche Wegpunkte + ease-in-out
   je Segment -> Fluss surgt und driftet unregelmäßig ("mal mehr, mal weniger").
   Endet bei -200% = nahtloser Loop (symmetrische Stops + Tiling). */
@keyframes bbfGradWave{
  0%{background-position:0% 50%}
  16%{background-position:-22% 50%}
  33%{background-position:-100% 50%}
  48%{background-position:-116% 50%}
  68%{background-position:-172% 50%}
  100%{background-position:-200% 50%}
}
/* Sektions-Kopf: Eyebrow + H2 (+ optional Intro rechts) */
.bbf-sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(32px,4vw,52px)}
/* Kanon: Eyebrow nimmt die volle Zeile ein — sonst schiebt er die H2 nach rechts
   (Ursache der uneinheitlichen Hub-Koepfe: mal Headline links, mal rechts). */
.bbf-sec-head>.bbf-eyebrow{flex-basis:100%;margin-bottom:-12px}
/* Gutenberg-Variante: der inner-container hebelte das Flex aus (H2+Intro gestapelt,
   rechte Haelfte leer) → gleiches Layout wie die reine Markup-Variante erzwingen. */
.bbf-sec-head>.wp-block-group__inner-container{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;width:100%}
.bbf-sec-head>.wp-block-group__inner-container>.bbf-eyebrow{flex-basis:100%;margin-bottom:-12px}
.bbf-sec-head>.wp-block-group__inner-container>.bbf-sec-intro{max-width:420px;margin:0}
.bbf-sec-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.4vw,46px);line-height:1.1;letter-spacing:-.02em;color:var(--text-strong);margin:16px 0 0;max-width:640px}
.bbf-section--dark .bbf-sec-head h2{color:#fff}
.bbf-sec-head .bbf-sec-intro{max-width:420px;font-size:17px;line-height:1.65;color:var(--text-body);margin:0}
.bbf-section--dark .bbf-sec-head .bbf-sec-intro{color:var(--text-on-dark-muted)}
/* Standard-Grid (auto-fit) — EINE Definition, per --min steuerbar */
.bbf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(var(--grid-min,300px),100%),1fr));gap:var(--grid-gap,24px)}
/* CTA-Band (dunkel, Bloom, zentriert) */
.bbf-cta{position:relative;overflow:hidden;background:var(--gradient-dark-bloom);text-align:center}
.bbf-cta .bbf-wrap{padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px)}
.bbf-cta h2{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.4vw,44px);line-height:1.12;letter-spacing:-.02em;color:#fff;margin:0 0 16px}
.bbf-cta p{font-size:17px;line-height:1.65;color:var(--text-on-dark-muted);margin:0 auto 30px;max-width:720px}
.bbf-cta .bbf-btn-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
/* Zweispaltige CTA-Variante (Text links, Buttons rechts) — gleicher Bloom, anderes Layout.
   Die inneren Container bringen ihr Flex-Layout selbst mit; hier nur die Ausrichtung
   zuruecknehmen, damit text-align:center des Standards nicht durchschlaegt. */
.bbf-cta--split{text-align:left}
.bbf-cta--split p{margin-left:0;margin-right:0}
.bbf-cta--split .bbf-btn-row{justify-content:flex-start}
/* Zweispaltiges CTA-Band: Text links, Buttons rechts. Das Layout stand vorher
   je Seite inline; als Klasse laesst es sich mobil ueberhaupt erst anfassen. */
.bbf-ctasplit{position:relative;display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:center;justify-content:space-between}
.bbf-ctasplit__text{flex:1 1 420px;min-width:0;max-width:640px}
.bbf-ctasplit__actions{flex:0 0 auto}
/* Mobil zaehlt Einheitlichkeit: jedes CTA-Band steht mittig, egal welche
   Variante — sonst sitzen die Buttons hier links und auf allen anderen
   Seiten mittig. */
@media (max-width:600px){
  .bbf-cta--split{text-align:center}
  .bbf-cta--split p{margin-left:auto;margin-right:auto}
  .bbf-cta--split .bbf-btn-row{justify-content:center}
  .bbf-ctasplit{justify-content:center}
  .bbf-ctasplit__text{flex:1 1 100%;max-width:none}
  .bbf-ctasplit__actions{flex:1 1 100%;justify-content:center}
}
/* Unterseiten-Hero (Vergleichs-/Landingpages): dunkel mit Bloom, ohne Stat-Band.
   Ersetzt den bisher je Seite inline gesetzten Farbverlauf. */
/* REINE Container-Klasse: ersetzt nur den je Seite inline gesetzten Farbverlauf.
   KEINE Typografie hier — sonst greift sie auf allen Bestandsseiten, deren H1
   ihre Groessen selbst mitbringt (quetscht Ueberschriften, bricht Button-Zeilen). */
.bbf-subhero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 0% 100%,rgba(147,29,125,0.38),transparent 55%),radial-gradient(120% 90% at 100% 100%,rgba(113,191,147,0.28),transparent 55%),var(--ink-900)}
/* Typografie nur fuer Seiten, die den Hero ueber die Klasse aufbauen (Vergleichsseiten). */
.bbf-subhero--cmp>.bbf-wrap{position:relative;z-index:2;padding-top:clamp(52px,7vw,92px);padding-bottom:clamp(30px,4vw,52px)}
.bbf-subhero--cmp h1{font-family:var(--font-display);font-weight:800;font-size:clamp(32px,4.2vw,56px);line-height:1.09;letter-spacing:-.02em;color:#fff;margin:22px 0 18px;max-width:15ch}
.bbf-subhero__lead{font-family:var(--font-display);font-weight:600;font-size:clamp(16px,1.4vw,18px);line-height:1.4;color:rgba(255,255,255,0.90);margin:0 0 22px;max-width:760px}
.bbf-subhero__copy{font-size:17px;line-height:1.65;color:var(--text-on-dark-muted);margin:0 0 28px;max-width:620px}
.bbf-subhero__grad{background:var(--gradient-brand);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:bbfGradient 9s ease-in-out infinite}
.bbf-subhero>.bbf-rule{height:4px}
/* Schreibmarke des rotierenden Hero-Worts (nur Startseite). Die Verlaufsfarbe
   nutzt weiter bbfGradient — keine zweite Gradient-Keyframe. */
@keyframes bbfCursorBlink{0%,45%{opacity:1}50%,100%{opacity:0}}
/* Auf schmalen Schirmen ist „JTL-Warenwirtschaft." breiter als der Viewport
   (gemessen 385px bei 375px). Ohne Umbruch wuerde der Body es wegen
   overflow-x:clip abschneiden — deshalb dort Umbruch am Bindestrich erlauben. */
[data-hero-rotate]{white-space:nowrap}
@media (max-width:520px){
  /* Das laengste Wort („JTL-Warenwirtschaft.") ist breiter als der Schirm.
     Statt es umbrechen zu lassen — die Ueberschrift wuerde je nach Wort um
     eine Zeile wachsen und die Seite ruckt — verkleinert bbf-relaunch.js die
     GANZE Ueberschrift so weit, dass jedes Wort einzeilig passt
     (--bbf-hero-fs). Die getippte Zeile behaelt damit denselben Schriftgrad
     wie die Zeilen darueber; reserviert wird zusaetzlich ihre Hoehe. */
  /* Mobil stehen die Zeilen enger beieinander als am Desktop (kleinerer Grad,
     gleiche Umlautpunkte) — deshalb hier noch etwas mehr Luft. */
  .bbf-hero h1:has([data-hero-rotate]){font-size:var(--bbf-hero-fs,clamp(36px,4.6vw,62px));line-height:1.24}
  [data-hero-rotate]{display:block;white-space:nowrap;min-height:var(--bbf-rot-h,auto)}
}
/* Servicepartner: Gold-Akzent statt Magenta — bezieht sich auf den JTL-Gold-Status. */
.bbf-subhero--gold{background:radial-gradient(120% 90% at 0% 100%,rgba(2,128,185,0.30),transparent 55%),radial-gradient(120% 90% at 100% 100%,rgba(253,208,145,0.20),transparent 55%),var(--ink-900)}
/* Stat-Band im Unterseiten-Hero wie auf der Startseite (eine Flaeche, keine Naht). */
.bbf-subhero>.bbf-stat-band{position:relative;z-index:2}
/* Badge-Band: Das Raster bringt 52px margin-top mit — im Band addiert sich das
   auf dessen Polster (zusammen 104px). Badges sind ausserdem hoeher als Zahlen,
   deshalb das Polster knapper als beim Zahlenband. */
.bbf-certband .bbf-certgrid{margin-top:0}
/* Kartenband im Hero: Der innere Container bringt sein Polster selbst mit,
   deshalb hier keins doppeln — sonst klafft es ueber den Karten. */
.bbf-cardband>.bbf-container{padding-top:clamp(20px,2.4vw,30px);padding-bottom:clamp(20px,2.4vw,30px)}
.bbf-certband .bbf-bandinner{padding-top:clamp(18px,2vw,26px);padding-bottom:clamp(18px,2vw,26px)}
/* Folgt ein Band, endet der Hero-Inhalt enger — wie auf der Startseite (48px
   statt 80px), sonst klafft eine leere Flaeche ueber dem Band. */
.bbf-subhero>.bbf-container:has(+.bbf-stat-band),
.bbf-subhero>.bbf-wrap:has(+.bbf-stat-band){padding-bottom:clamp(28px,4vw,48px)}
.bbf-rule--thick{height:4px}
/* Systemvergleich: Kriterien-Tabelle und Gegenüberstellungs-Raster */
.bbf-cmpgrid{--grid-min:min(420px,100%);margin-top:clamp(28px,3.4vw,44px)}
.bbf-cmptable{overflow-x:auto;margin-top:clamp(28px,3.4vw,44px);border:1px solid var(--border-subtle)}
.bbf-cmptable table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.6;min-width:720px}
.bbf-cmptable thead tr{background:var(--ink-900)}
.bbf-cmptable th{text-align:left;padding:16px 18px;font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.bbf-cmptable td{padding:15px 18px;color:var(--text-body);border-top:1px solid var(--border-subtle);vertical-align:top}
.bbf-cmptable tbody tr:nth-child(even){background:var(--neutral-50)}
.bbf-cmptable td:first-child{font-family:var(--font-display);font-weight:600;color:var(--text-strong)}
.bbf-cmptable em{color:var(--text-muted)}
.bbf-cmpnote{font-size:14px;color:var(--text-muted);margin-top:16px}
/* Stat-/Zähler-Band */
/* Fix 1: Kennzahlen-Reihe ist Teil der EINEN Hero-Fläche — kein eigener/dunklerer BG, keine Naht. */
.bbf-stat-band{border-top:1px solid rgba(255,255,255,0.10);background:rgba(0,0,0,0.34)}
.bbf-stat{text-align:center}
.bbf-stat .num{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(34px,3.4vw,46px);letter-spacing:-.02em;color:#fff}
.bbf-stat .lbl{display:block;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-dark-muted);margin-top:6px}
/* ============================================================
   Über-uns-Seite (bbf-about-*) — Hero/Band/Hub/CTA wiederverwendet,
   eigene Teile: Owner-Split, Partner-Karten, FAQ (ohne .bbf-r), Distinct.
   ============================================================ */
.bbf-about-hero{background:radial-gradient(120% 90% at 0% 100%,rgba(147,29,125,0.30),transparent 55%),radial-gradient(120% 90% at 100% 100%,rgba(113,191,147,0.20),transparent 55%),#0d1117}
.bbf-about-hero__inner{position:relative;padding:clamp(56px,7.5vw,104px) var(--container-pad) clamp(30px,4vw,48px);max-width:1240px}
.bbf-about-hero h1{max-width:820px}
.bbf-about-hero .bbf-lead{max-width:620px}
/* „Ein Ansprechpartner." braucht bei 36 px rund 384 px, auf dem Handy stehen
   aber nur ~350 px zur Verfuegung — die Zeile brach um und die Ueberschrift
   lief auf drei bis vier Zeilen. Die Groesse folgt jetzt der Bildschirmbreite,
   damit es bei zwei Zeilen bleibt. */
@media (max-width:460px){
  .bbf-about-hero h1{font-size:min(36px,calc(8.6vw - 2px))}
}
/* Owner-Split (Foto links, Text rechts) */
/* Masse aus der Prototyp-Vorlage (design-handoff/Website-Prototyp.dc.html):
   Fotospalte bis 520 px, Abstand clamp(32px,5vw,64px), mittig ausgerichtet. */
.bbf-about-owner__grid{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
/* 12 px Einzug bei 5 px Leiste: zwischen Leiste und Foto bleiben 7 px Luft —
   im Prototyp klebt die Leiste NICHT am Bild. */
.bbf-about-photo{position:relative;padding-left:12px}
/* Markenleiste am Portraitfoto — wie im Prototyp. (Sie war zwischenzeitlich
   entfernt worden; der Prototyp zeigt sie eindeutig an der linken Bildkante.) */
/* Senkrechte Fassung des Markenverlaufs: der waagerechte (--gradient-brand)
   zeigt auf 6px Breite praktisch nur eine Farbe. */
.bbf-about-photo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,#00aee7 0%,#0280b9 28%,#931d7d 55%,#e23589 78%,#c8dd9b 100%)}
.bbf-about-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 20%}
.bbf-about-owner__text .bbf-eyebrow{margin-bottom:4px}
.bbf-about-owner__text h2{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.4vw,46px);line-height:1.1;letter-spacing:-.02em;color:var(--text-strong);margin:18px 0 14px}
.bbf-about-owner__text>p{font-size:17px;line-height:1.65;color:var(--text-body);margin:0 0 14px}
.bbf-about-owner__text>p:last-of-type{margin-bottom:20px}
.bbf-about-stats{display:flex;flex-wrap:wrap;gap:clamp(24px,3vw,44px);margin:0 0 22px;padding:0;border:0}
.bbf-about-stat{display:flex;flex-direction:column;gap:2px}
.bbf-about-stat__num{font-family:var(--font-display);font-weight:800;font-size:21px;letter-spacing:-.01em;color:var(--text-strong)}
.bbf-about-stat__lbl{font-size:14px;color:var(--text-muted)}
/* Mobil: statt zufälligem 2+1-Umbruch eine geordnete Liste mit Trennlinien */
@media (max-width:560px){
  .bbf-about-stats{gap:14px}
  .bbf-about-stat{flex:1 1 100%;padding-bottom:12px;border-bottom:1px solid var(--border-subtle)}
  .bbf-about-stat:last-child{padding-bottom:0;border-bottom:0}
}
/* Rahmen, Polster und Schrift wie im Prototyp. Einzige Abweichung: die Fuellung.
   Der Prototyp setzt --neutral-50 auf eine WEISSE Sektion; hier liegt der
   Abschnitt selbst auf --neutral-50, deshalb eine Nuance dunkler — sonst
   verschwindet der Kasten in der Flaeche. */
.bbf-about-quote{position:relative;margin:0 0 22px;padding:20px 24px;background:var(--neutral-100);border:1px solid var(--border-subtle)}
.bbf-about-quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#00aee7 0%,#0280b9 28%,#931d7d 55%,#e23589 78%,#c8dd9b 100%)}
.bbf-about-quote p{font-family:var(--font-body);font-weight:400;font-size:17px;line-height:1.6;color:var(--text-strong);margin:0}
/* Die Buttons folgen direkt auf den Zitatkasten (dessen 22 px reichen). */
.bbf-about-owner__text .bbf-btn-row--start{margin-top:0}
.bbf-about-quote cite{display:block;font-style:normal;font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-top:10px}
/* Partner-Karten: Feature-Basis mit Grow-Leiste, ohne Icon */
.bbf-partner{position:relative;overflow:hidden;background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);padding:30px 28px 26px 30px;display:flex;flex-direction:column;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.bbf-partner::before{content:"";position:absolute;left:0;top:30px;width:5px;height:56px;background:linear-gradient(180deg,#00aee7 0%,#0280b9 28%,#931d7d 55%,#e23589 78%,#c8dd9b 100%);transition:top 420ms var(--ease-out),height 420ms var(--ease-out)}
.bbf-partner__kicker{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-700)}
.bbf-partner__title{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.25;color:var(--text-strong);margin:10px 0 8px}
.bbf-partner__text{font-size:15px;line-height:1.65;color:var(--text-body);margin:0 0 16px}
.bbf-partner__link{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-700);text-decoration:none;transition:gap var(--dur-base) var(--ease-out)}
/* Emphasized-Feature (Karte 5): nur cyaner Ring, keine Leiste/Ecke */
/* FAQ-Accordion im Site-Standard (details/summary), ohne .bbf-r-Kontext */
.bbf-faq{max-width:840px}
.bbf-faq .seo-faq-item{display:block;border-bottom:1px solid var(--border-subtle)}
.bbf-faq .seo-faq-item>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px;font-family:var(--font-display);font-weight:700;font-size:clamp(16px,2vw,19px);line-height:1.35;color:var(--text-strong);transition:color var(--dur-fast) var(--ease-out)}
.bbf-faq .seo-faq-item>summary::-webkit-details-marker{display:none}
.bbf-faq .seo-faq-item>summary::marker{content:""}
.bbf-faq .seo-faq-item>summary::after{content:"+";flex-shrink:0;font-family:var(--font-body);font-weight:400;font-size:26px;line-height:1;color:var(--brand-cyan);transition:transform var(--dur-base) var(--ease-out)}
.bbf-faq .seo-faq-item[open]>summary::after{content:"–"}
.bbf-faq .seo-faq-item>div{padding:0 2px 22px;color:var(--text-body);font-size:var(--fs-body);line-height:1.7;max-width:820px}
.bbf-faq .seo-faq-item>div>p{margin:0}
.bbf-faq .seo-faq-item[open]>div{animation:bbfFadeUp 300ms var(--ease-out) both}

/* ============================================================
   GLOBALE FAQ-VEREINHEITLICHUNG — greift auf JEDER Seite (auch ausserhalb
   von .bbf-r / .bbf-refmain / .bbf-faq) und ueberschreibt Inline-Boxen sowie
   native <details>-Marker. Einheitlicher Ticketing-Linienstil (+ / –).
   ============================================================ */
.seo-faq-band:not(section){display:flex!important;flex-direction:column;gap:0!important;max-width:900px;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0}
.seo-faq-list{display:block!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
.seo-faq-item{display:block!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--border-subtle)!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin:0!important}
.seo-faq-item>summary{list-style:none!important;cursor:pointer;display:flex!important;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px!important;margin:0!important;font-family:var(--font-display)!important;font-weight:700!important;font-size:clamp(16px,2vw,19px)!important;line-height:1.35!important;color:var(--text-strong)!important;background:transparent!important;border:0!important;transition:color var(--dur-fast) var(--ease-out)}
.seo-faq-item>summary::-webkit-details-marker{display:none!important}
.seo-faq-item>summary::marker{content:""!important;font-size:0!important}
.seo-faq-item>summary::after{content:"+";flex-shrink:0;font-family:var(--font-body);font-weight:400;font-size:26px;line-height:1;color:var(--brand-cyan);transition:transform var(--dur-base) var(--ease-out)}
.seo-faq-item[open]>summary::after{content:"\2013"}
.seo-faq-item>div,.seo-faq-item>p{padding:0 2px 22px!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--text-body)!important;font-size:var(--fs-body)!important;line-height:1.7!important;max-width:820px}
.seo-faq-item[open]>div,.seo-faq-item[open]>p{animation:bbfFadeUp 300ms var(--ease-out) both}
@media (max-width:900px){
  .bbf-about-owner__grid{grid-template-columns:1fr}
  .bbf-about-photo{max-width:420px}
}
/* ============================================================
   Support/Fernwartung (bbf-dl* Downloads, bbf-os* Anleitungen,
   bbf-dev* Android-Geräte-Tabs). Tabs desktop, Accordions mobil.
   ============================================================ */
/* Hero-Textlink zu den Downloads */
/* FAQ linksbündig an der Hauptflucht (Zentrierung wurde per Content-Migration
   aus dem FAQ-Wrapper entfernt). Liste bleibt für die Lesbarkeit schmal. */
.seo-faq-list,.bbf-faq{max-width:880px;margin-left:0;margin-right:0}
/* News-/Archiv-Index (aktuelles): thematische Linklisten */
.bbf-newsindex{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(28px,3.5vw,48px)}
.bbf-newsindex h3{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--text-strong);margin:0 0 10px;padding-bottom:12px;border-bottom:2px solid var(--brand-cyan)}
.bbf-newsindex ul{list-style:none;margin:0;padding:0}
.bbf-newsindex a{position:relative;display:flex;gap:12px;align-items:baseline;padding:10px 0 10px 14px;font-size:15.5px;line-height:1.5;color:var(--text-body);text-decoration:none;border-bottom:1px solid var(--border-subtle);transition:color var(--dur-fast) var(--ease-out)}
.bbf-newsindex a::before{content:"";position:absolute;left:0;top:50%;width:3px;height:0;background:var(--brand-cyan);transform:translateY(-50%);transition:height var(--dur-fast) var(--ease-out)}
.bbf-newsindex .yr{margin-left:auto;flex-shrink:0;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--text-muted)}

.bbf-dllink{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-700);text-decoration:underline;text-decoration-color:rgba(0,174,231,0.35);text-decoration-thickness:1px;text-underline-offset:6px;transition:text-decoration-color var(--dur-fast) var(--ease-out)}
.bbf-dllink .bbf-ico{width:16px;height:16px}
/* Download-Sektion: 3px-Gradient-Linie an der Oberkante */
.bbf-dlsec{position:relative}
.bbf-dlsec::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-brand)}
/* Download-Liste: eine Plattform pro Zeile (Icon | Titel | Hinweis | Button) */
.bbf-dlgrid{display:flex;flex-direction:column;gap:14px}
.bbf-dlcard{display:grid;grid-template-columns:54px minmax(120px,170px) 1fr auto;align-items:center;column-gap:clamp(16px,2.5vw,28px);background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);padding:18px clamp(18px,2.5vw,28px);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.bbf-dlcard__ico{width:54px;height:54px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0d1117,#1a1f28);color:var(--brand-cyan)}
.bbf-dlcard__ico svg{width:24px;height:24px}
.bbf-dlcard__ti{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--text-strong)}
.bbf-dlcard__tx{font-size:14px;line-height:1.6;color:var(--text-body);margin:0}
.bbf-dlcard .bbf-btn{justify-self:end;white-space:nowrap}
/* Karten mit zwei Zielen (z. B. Apple Silicon und Intel) */
.bbf-dlcard__acts{justify-self:end;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bbf-dlcard__acts .bbf-btn{justify-self:auto}
@media (max-width:760px){
  .bbf-dlcard{grid-template-columns:44px 1fr;row-gap:10px}
  .bbf-dlcard__ico{width:44px;height:44px}
  .bbf-dlcard__ti{align-self:center}
  .bbf-dlcard__tx{grid-column:1/-1}
  .bbf-dlcard .bbf-btn{grid-column:1/-1;justify-self:start}
  .bbf-dlcard__acts{grid-column:1/-1;justify-self:start}
}
/* Plattform-Tabs (dunkle Sektion) */
.bbf-ostabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.bbf-ostab{appearance:none;cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,0.25);color:rgba(255,255,255,0.85);font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:11px 16px;min-height:44px;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.bbf-ostab[aria-selected="true"]{color:var(--brand-cyan);border-color:var(--brand-cyan)}
/* Panels: <details> — desktop Tab-Panel, mobil natives Accordion */
.bbf-osacc{display:block;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1)}
.bbf-osacc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:44px;padding:14px 18px;font-family:var(--font-display);font-weight:700;font-size:16px;color:#fff}
.bbf-osacc>summary::-webkit-details-marker{display:none}
.bbf-osacc>summary::marker{content:""}
.bbf-osacc>summary .bbf-ico{width:20px;height:20px;color:var(--brand-cyan);flex-shrink:0}
.bbf-osacc__extra{font-family:var(--font-body);font-weight:400;font-size:13px;color:var(--text-on-dark-muted)}
.bbf-osacc__chev{margin-left:auto;width:18px;height:18px;color:var(--brand-cyan);transition:transform var(--dur-base) var(--ease-out)}
.bbf-osacc[open]>summary .bbf-osacc__chev{transform:rotate(180deg)}
.bbf-osacc__body{position:relative}
.bbf-osscroll{padding:20px 22px}
.bbf-osintro{font-size:15px;line-height:1.65;color:var(--text-on-dark-muted);margin:0 0 14px}
.bbf-ossteps{margin:0;padding-left:22px;color:rgba(255,255,255,0.88);font-size:15px;line-height:1.65}
.bbf-ossteps li{margin-bottom:10px}
.bbf-ossteps strong{color:#fff}
.bbf-oshint{font-size:14px;line-height:1.6;color:var(--text-on-dark-muted);margin:14px 0 0}
.bbf-oshint strong{color:#fff}
/* Geräte-Tabs im Android-Panel */
.bbf-devintro{font-family:var(--font-display);font-weight:600;font-size:14px;color:#fff;margin:0 0 12px}
.bbf-devtabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.bbf-devtab{appearance:none;cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,0.25);color:rgba(255,255,255,0.8);font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:9px 13px;min-height:38px;transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.bbf-devtab[aria-selected="true"]{color:var(--brand-cyan);border-color:var(--brand-cyan)}
.bbf-devhint{font-size:14px;line-height:1.6;color:var(--text-on-dark-muted);margin:14px 0 0}
.bbf-devhint a{color:var(--cyan-700);text-decoration:none}
/* Desktop (>980px): Tab-Ansicht — Summaries weg, nur aktives Panel, Binnen-Scroll */
@media (min-width:981px){
  .bbf-osacc{display:none}
  .bbf-osacc.is-active{display:block}
  .bbf-osacc>summary{display:none}
  .bbf-osscroll{min-height:280px;max-height:280px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(0,174,231,0.55) rgba(255,255,255,0.06)}
  .bbf-osscroll::-webkit-scrollbar{width:8px}
  .bbf-osscroll::-webkit-scrollbar-track{background:rgba(255,255,255,0.06)}
  .bbf-osscroll::-webkit-scrollbar-thumb{background:rgba(0,174,231,0.55);border-radius:0}
  .bbf-osfade{position:absolute;left:1px;right:9px;bottom:0;height:44px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;background:linear-gradient(180deg,rgba(18,22,29,0) 0%,rgba(18,22,29,0.92) 78%);pointer-events:none;transition:opacity var(--dur-base) var(--ease-out)}
  .bbf-osfade span{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-cyan)}
  .bbf-osfade .bbf-ico{width:12px;height:12px}
  .bbf-noscrollhint .bbf-osfade{opacity:0}
}
/* Mobil (≤980px): native Accordions, Android hervorgehoben */
@media (max-width:980px){
  .bbf-ostabs{display:none}
  .bbf-osacc{margin-bottom:12px}
  .bbf-osacc--android{border:1.5px solid var(--brand-cyan)}
  .bbf-osfade{display:none}
}
/* Konvertierte Alt-Seiten (bbf-convert): kanonische Typo für Block-Texte */
.bbf-convert a{text-decoration:none}
.bbf-convert .bbf-section .wp-block-heading{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3.2vw,44px);line-height:1.12;letter-spacing:-.02em;color:var(--text-strong);margin:0 0 16px;max-width:820px}
.bbf-convert .bbf-section h3.wp-block-heading{font-size:clamp(20px,2vw,26px);font-weight:700;margin:28px 0 10px}
.bbf-convert .bbf-section .wp-block-group__inner-container>p{font-size:17px;line-height:1.65;color:var(--text-body);margin:0 0 14px;max-width:760px}
.bbf-convert .bbf-section .bbf-eyebrow{margin-bottom:14px;display:inline-flex}
.bbf-convert .bbf-section .wp-block-html{margin-top:clamp(20px,3vw,32px)}
/* Dunkle Sektionen auf konvertierten Seiten: Text MUSS hell bleiben.
   Die .bbf-convert-Typoregeln oben setzen dunkle Farben und schlagen
   .bbf-section--dark h2/p in der Spezifitaet (0,3,0 vs 0,1,1). */
.bbf-convert .bbf-section--dark .wp-block-heading,
.bbf-convert .bbf-section--dark h2,
.bbf-convert .bbf-section--dark h3{color:var(--text-on-dark)}
.bbf-convert .bbf-section--dark p,
.bbf-convert .bbf-section--dark .wp-block-group__inner-container>p,
.bbf-convert .bbf-section--dark .bbf-container>p{color:var(--text-on-dark-muted)}
/* ============================================================
   Kontakt-Modal (Prototyp): dunkle Info-Spalte + weißes Formular
   ============================================================ */
.bbf-cmodal-overlay[hidden]{display:none!important}
.bbf-cmodal-overlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);background:rgba(8,10,14,0.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;transition:opacity 220ms var(--ease-out)}
.bbf-cmodal-overlay.is-open{opacity:1}
.bbf-cmodal{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);width:min(980px,100%);max-height:92vh;overflow:auto;background:var(--surface-card);box-shadow:var(--shadow-lg)}
.bbf-cmodal::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-brand);z-index:2}
.bbf-cmodal__x{position:absolute;top:14px;right:16px;z-index:3;appearance:none;background:none;border:0;cursor:pointer;color:var(--text-muted);width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:color var(--dur-fast) var(--ease-out)}
.bbf-cmodal__x svg{width:22px;height:22px}
.bbf-cmodal__info{background:#0d1117;padding:clamp(28px,4vw,44px)}
.bbf-cmodal__info h2{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.6vw,34px);line-height:1.12;letter-spacing:-.02em;color:#fff;margin:14px 0 14px}
.bbf-cmodal__info>p{font-size:15.5px;line-height:1.65;color:rgba(255,255,255,0.85);margin:0 0 22px}
.bbf-cmodal__line{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:16px;color:#fff;text-decoration:none;margin-bottom:14px}
.bbf-cmodal__line .bbf-ico{width:17px;height:17px;color:var(--brand-cyan);flex-shrink:0}
.bbf-cmodal__line--muted{font-family:var(--font-body);font-weight:400;font-size:14px;color:var(--text-on-dark-muted)}
.bbf-cmodal__hr{border:0;border-top:1px solid rgba(255,255,255,0.12);margin:20px 0}
.bbf-cmodal__note{font-size:13.5px;line-height:1.6;color:var(--text-on-dark-muted);margin:0}
.bbf-cmodal__formwrap{padding:clamp(28px,4vw,44px)}
.bbf-cmodal__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-bottom:16px}
.bbf-cmodal__form label{display:flex;flex-direction:column;gap:6px;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--text-strong)}
.bbf-cmodal__form input,.bbf-cmodal__form select,.bbf-cmodal__form textarea{font-family:var(--font-body);font-size:15px;color:var(--text-strong);background:#fff;border:1px solid var(--border-strong);border-radius:0;padding:11px 12px;width:100%;box-sizing:border-box}
.bbf-cmodal__form input:focus,.bbf-cmodal__form select:focus,.bbf-cmodal__form textarea:focus{outline:2px solid var(--brand-cyan);outline-offset:-1px}
.bbf-cmodal__form input::placeholder,.bbf-cmodal__form textarea::placeholder{color:var(--text-muted)}
.bbf-cmodal__msg{margin-bottom:18px}
.bbf-cmodal__consent{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.5;color:var(--text-muted);margin:0 0 16px;cursor:pointer}
.bbf-cmodal__consent input{margin-top:3px;flex-shrink:0;width:16px;height:16px;accent-color:var(--brand-cyan)}
.bbf-cmodal__consent a{color:var(--brand-cyan);text-decoration:none}
.bbf-cmodal__legal{font-size:12.5px;line-height:1.5;color:var(--text-muted);margin:12px 0 0;max-width:340px}
.bbf-cmodal__legal a{color:var(--brand-cyan);text-decoration:none}
.bbf-cmodal__status{font-family:var(--font-display);font-weight:700;font-size:15px;margin:14px 0 0}
.bbf-cmodal__status.is-ok{color:#2e7d4f}
.bbf-cmodal__status.is-err{color:#c0392b}
.bbf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
body.bbf-cmodal-open{overflow:hidden}
@media (max-width:860px){
  .bbf-cmodal{grid-template-columns:1fr}
  .bbf-cmodal__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){.bbf-cmodal-overlay{transition:none}}
/* Thematisch verwandte Seiten ("Weiterdenken:"): Abstand + Chip-Optik */
.seo-link-map{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(28px,4vw,44px)}
.seo-link-map>span{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-right:4px}
.seo-link-map>a{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--cyan-700);text-decoration:none;padding:7px 12px;border:1px solid var(--border-subtle);transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.bbf-section--dark .seo-link-map>a,.bbf-hero .seo-link-map>a{border-color:rgba(255,255,255,0.16)}
/* Fließtext-Block (Standard-Typo für redaktionellen Content) */
.bbf-prose{max-width:760px;font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--text-body)}
.bbf-prose h2{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.6vw,34px);color:var(--text-strong);margin:40px 0 14px;letter-spacing:-.02em}
.bbf-prose h3{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--text-strong);margin:28px 0 10px}
.bbf-prose p{margin:0 0 16px}
.bbf-prose ul{margin:0 0 16px;padding-left:20px}.bbf-prose li{margin:6px 0}
.bbf-prose a{color:var(--cyan-700)}
/* Archiv-Beiträge: alte WP-Inhalte (figure/align-Klassen) im neuen Kanon bändigen */
.bbf-prose img{display:block;max-width:100%;height:auto;margin:24px 0;box-shadow:var(--shadow-sm);border:1px solid var(--border-subtle)}
.bbf-prose figure{margin:24px 0}
.bbf-prose figure img{margin:0}
/* Bilderstrecke im Fliesstext: Die allgemeinen Prose-Bildregeln stehen weiter
   unten und wuerden dem Slider `height:auto` geben — das Bild waere dann
   beschnitten statt eingepasst. Deshalb hier die Slider-Masse wiederholen. */
/* Kleine Altbilder (manche Originale sind nur 320 px breit) werden NICHT
   hochskaliert — sonst wirken sie unscharf. Sie stehen mittig im Rahmen. */
body.bbf-clean .bbf-prose .bbf-refslide img,.bbf-prose .bbf-refslide img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;margin:0 auto;border:0;box-shadow:none}
.bbf-prose .bbf-refslider{margin-top:clamp(24px,3vw,36px)}
/* Fotostrecken auf dunkler Flaeche: Hochformate lassen seitlich Raum frei —
   auf Ink wirkt das wie ein Bildbetrachter statt wie eine Luecke. */
.bbf-galerie .bbf-refslider__track{background:#12161d;border-color:rgba(255,255,255,0.12)}
/* Unscharfe Fassung desselben Bildes als Fuellung hinter kleinen Aufnahmen.
   Die Bildadresse setzt bbf-relaunch.js je Slide als Custom Property. */
.bbf-galerie .bbf-refslide::before{content:"";position:absolute;inset:0;background-image:var(--bbf-slide-bg);background-size:cover;background-position:center;filter:blur(30px) saturate(115%);opacity:.32;transform:scale(1.12)}
.bbf-galerie .bbf-refslide img{position:relative;z-index:1}
.bbf-prose figcaption{font-size:13px;color:var(--text-muted);margin-top:8px}
.bbf-prose .alignleft,.bbf-prose .alignright,.bbf-prose .aligncenter{float:none!important;margin-left:0!important;margin-right:0!important}
.bbf-prose blockquote{margin:24px 0;padding:16px 22px;border-left:3px solid var(--brand-cyan);background:var(--neutral-50);font-style:italic}
.bbf-prose pre,.bbf-prose code{font-size:14px;background:#0d1117;color:#e6edf3;border-radius:2px}
.bbf-prose{overflow-wrap:break-word}
.bbf-prose code{white-space:pre-wrap;overflow-wrap:anywhere}
.bbf-prose code{padding:2px 6px}
.bbf-prose pre{padding:16px 20px;overflow-x:auto;margin:20px 0}
.bbf-prose pre code{padding:0;background:transparent}
.bbf-prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.bbf-prose th,.bbf-prose td{border:1px solid var(--border-subtle);padding:10px 12px;text-align:left}
.bbf-prose h1{display:none}
.bbf-prose .wp-block-columns{display:block}
.bbf-prose .wp-block-column{flex-basis:auto!important;width:100%}

/* Button-Gruppen (Hero/CTA): eine Zeile ab Tablet, sauber gestapelt erst auf schmalem Mobile.
   :has() zielt auf inline-gestylte Flex-Container mit .bbf-btn-Kindern. */
@media (min-width:560px){
  .bbf-r div:has(> .bbf-btn--lg),
  .bbf-r div:has(> .bbf-btn--md){flex-wrap:nowrap!important;align-items:center}
}
/* Mittlerer Bereich: Buttons leicht kompakter, damit zwei --lg sicher in eine Zeile passen */
@media (min-width:560px) and (max-width:820px){
  .bbf-r div:has(> .bbf-btn--lg) > .bbf-btn--lg{padding:13px 18px;font-size:13.5px;letter-spacing:0.04em}
  .bbf-r div:has(> .bbf-btn--lg) > .bbf-btn--lg .bbf-ico{width:16px!important;height:16px!important}
}
/* Schmales Mobile: sauber vollbreit gestapelt (kein krummer Umbruch) */
@media (max-width:559px){
  .bbf-r div:has(> .bbf-btn){flex-direction:column;align-items:stretch}
  .bbf-r div:has(> .bbf-btn) > .bbf-btn{width:100%;justify-content:center}
}

/* Einheitliche Button-Höhen: Icons, Gradient-Unterkante oder Zeilenhöhe
   dürfen die Höhe nicht mehr variieren (49px vs 52px gemischt). */
.bbf-btn{box-sizing:border-box!important}
/* Buttons tragen white-space:nowrap. In engen Flex-Reihen wurden sie schmaler
   gerechnet als ihre Beschriftung — der Text lief aus dem Rahmen. Nicht schrumpfen
   lassen; die Reihe hat flex-wrap und bricht stattdessen um. */
.bbf-btn{flex-shrink:0;max-width:100%}
.bbf-btn--sm{height:38px;padding-top:0!important;padding-bottom:0!important}
.bbf-btn--md{height:46px;padding-top:0!important;padding-bottom:0!important}
.bbf-btn--lg{height:52px;padding-top:0!important;padding-bottom:0!important}
.bbf-btn:not(.bbf-btn--sm):not(.bbf-btn--md):not(.bbf-btn--lg){height:46px;padding-top:0!important;padding-bottom:0!important}
/* Mobile: Doppeltipp-Zoom aus (Pinch-Zoom bleibt) -> Links/Buttons reagieren auf den ERSTEN Tap;
   horizontales Panning der Seite unterbinden. */
html,body{overflow-x:clip;max-width:100%}
html,body{touch-action:manipulation}
a,button{touch-action:manipulation}
/* Verlinkte Funktions-Karten */
a.bbf-feature{display:block;color:inherit;text-decoration:none;cursor:pointer}
a.bbf-feature h3,a.bbf-feature p{text-decoration:none}
/* News-Karte mit Titelbild (Archiv-Highlights) */
.bbf-newscard__img{margin:-26px -24px 18px -28px;height:170px;overflow:hidden;border-bottom:1px solid var(--border-subtle)}
.bbf-newscard__img img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Hover nur auf Geräten mit echtem Hover (Maus) =====
   Auf Touch bleiben Elemente im Ruhezustand: kein klebriger Hover,
   kein Doppel-Tipp, keine halb angewandten Hover-Optiken. */
@media (hover:hover){
.bbf-r a:not([class]):hover{color:var(--cyan-400)}
.bbf-r .bbf-grow p a:not([class]):hover,.bbf-r .bbf-feature p a:not([class]):hover{color:var(--cyan-600)}
.bbfx-footer-col a:not(.bbf-btn):hover{color:var(--brand-cyan)!important}
.bbfx-footer-bottom a:hover{color:var(--brand-cyan)!important}
.bbfx-acc-body a:hover,.bbfx-acc-body a.is-current{color:var(--brand-cyan)!important}
.bbf-btn:hover::before,.bbf-btn:focus-visible::before{opacity:1;animation:bbfBtnBloom 4.5s ease-in-out infinite}
.bbf-btn:hover::after,.bbf-btn:focus-visible::after{opacity:1}
.bbf-btn:hover,.bbf-btn:focus-visible{color:#0b0f14!important;border-color:transparent!important;transform:translateY(-2px)}
.bbf-btn:hover .bbf-ico,.bbf-btn:focus-visible .bbf-ico{color:#0b0f14}
/* Prototyp-Hover: Unterkante waechst 3px → 6px (ueber ::after, das ueber den Wolken liegt) */
.bbf-btn--primary:hover::after,.bbf-btn--primary:focus-visible::after{height:6px}
.bbf-btn--primary:hover{box-shadow:0 14px 32px rgba(0,174,231,.28);color:#12161d}
.bbf-btn--primary.bbf-on-light:hover{color:#fff;box-shadow:0 14px 32px rgba(0,174,231,.28)}
/* Dunkel gefuellte Primaerbuttons: Hover exakt wie im Prototyp (btnGrad) —
   Fuellung bleibt dunkel, die Markenkante waechst von 3 auf 6 px, dazu leichtes
   Anheben und Cyan-Schein. Die helle Farbwolke bleibt den hellen Buttons
   vorbehalten; auf dunkler Flaeche kippte sie Text und Fuellung ins Helle. */
:is(.bbf-btn--primary.bbf-on-light,.bbf-refbody .bbf-btn--primary,.bbf-refcard .bbf-btn--primary,.bbf-section--light .bbf-btn--primary,.bbf-section--white .bbf-btn--primary,.bbf-contact-form-wrap .bbf-btn--primary):hover::before,
:is(.bbf-btn--primary.bbf-on-light,.bbf-refbody .bbf-btn--primary,.bbf-refcard .bbf-btn--primary,.bbf-section--light .bbf-btn--primary,.bbf-section--white .bbf-btn--primary,.bbf-contact-form-wrap .bbf-btn--primary):focus-visible::before{opacity:0;animation:none}
:is(.bbf-btn--primary.bbf-on-light,.bbf-refbody .bbf-btn--primary,.bbf-refcard .bbf-btn--primary,.bbf-section--light .bbf-btn--primary,.bbf-section--white .bbf-btn--primary,.bbf-contact-form-wrap .bbf-btn--primary):hover,
:is(.bbf-btn--primary.bbf-on-light,.bbf-refbody .bbf-btn--primary,.bbf-refcard .bbf-btn--primary,.bbf-section--light .bbf-btn--primary,.bbf-section--white .bbf-btn--primary,.bbf-contact-form-wrap .bbf-btn--primary):focus-visible{background:#12161d;color:#fff!important;transform:translateY(-3px);box-shadow:0 20px 40px rgba(0,174,231,.25)}
:is(.bbf-btn--primary.bbf-on-light,.bbf-refbody .bbf-btn--primary,.bbf-refcard .bbf-btn--primary,.bbf-section--light .bbf-btn--primary,.bbf-section--white .bbf-btn--primary,.bbf-contact-form-wrap .bbf-btn--primary):hover .bbf-ico{color:#fff}
.bbf-btn--secondary:hover{border-color:var(--brand-cyan);color:var(--brand-cyan)}
.bbf-btn--secondary.bbf-on-dark:hover{border-color:var(--brand-cyan);color:var(--brand-cyan)}
.bbf-btn--ghost:hover{background:var(--neutral-200)}
.bbf-btn--ghost.bbf-on-dark:hover{background:rgba(255,255,255,0.12)}
.bbf-refbody .bbf-btn--primary:hover,.bbf-refcard .bbf-btn--primary:hover,.bbf-section--light .bbf-btn--primary:hover,.bbf-section--white .bbf-btn--primary:hover,.bbf-contact-form-wrap .bbf-btn--primary:hover{background:#12161d}
.bbf-chip:hover,.bbf-chip.is-active{border-color:var(--brand-cyan);color:var(--brand-cyan)}
.bbf-chip.bbf-on-dark:hover,.bbf-chip.bbf-on-dark.is-active{border-color:var(--brand-cyan);color:var(--brand-cyan)}
.bbf-feature:hover::before{top:0;height:100%;width:4px}
.bbf-feature:hover{box-shadow:0 20px 40px rgba(13,17,23,.14);transform:translateY(-6px)}
.bbf-newscard:hover::before{top:0;height:100%}
.bbf-newscard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.bbf-newscard:hover .more{gap:9px}
.bbf-hub:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,174,231,0.20)}
.bbf-eco:hover{border-color:var(--brand-cyan);box-shadow:var(--shadow-md);transform:translateY(-2px)}
/* Karte ohne Ziel: kein Hover-Versprechen, damit niemand vergeblich klickt.
   Wird als reine Information gelesen, bleibt aber Teil der Reihe. */
.bbf-eco--static,.bbf-eco--static:hover{border-style:dashed;border-color:var(--border-subtle);box-shadow:none;transform:none;cursor:default;background:var(--neutral-50)}
.bbf-grow:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(13,17,23,.14)}
.bbf-grow:hover .bar{top:0;height:100%;width:4px}
.bbf-nav-item:hover>.bbf-mega,.bbf-mega:hover{opacity:1;visibility:visible;transform:none}
.bbf-mega a.mega-link:hover{background:rgba(255,255,255,0.05)}
.bbf-navbtn:hover{color:var(--brand-cyan)}
.bbfx-toplinks a:hover{color:var(--brand-cyan)}
.bbfx-navlink:hover,.bbfx-nav-item:hover .bbfx-navlink,.bbfx-nav-item.is-current .bbfx-navlink{color:var(--brand-cyan)}
.bbfx-nav-item:hover .bbfx-navlink .bbfx-ico{transform:rotate(180deg)}
body:has(.bbfx-nav-item:hover>.bbfx-mega){}
.bbfx-header:has(.bbfx-nav-item:hover .bbfx-mega)~.bbfx-megaback,.bbfx-megaback:has(~*){}
body:has(.bbfx-nav-item:hover .bbfx-mega) .bbfx-megaback{opacity:1;visibility:visible}
.bbfx-nav-item:hover .bbfx-mega,.bbfx-mega:hover{opacity:1;visibility:visible;transform:none}
.bbfx-mega-all:hover,.bbfx-mega-all:focus-visible{color:#fff!important;text-decoration:underline;text-underline-offset:3px}
/* Aktiver Untermenue-Eintrag sieht aus wie beim Hover: die Rubrik zeigt damit
   auch im geoeffneten Mega-Menue, auf welcher Seite man gerade steht. */
.bbfx-mega-link:hover,.bbfx-mega-link.is-current{background:rgba(255,255,255,0.05);border-left-color:var(--brand-cyan)}
.bbfx-mega-link.is-current strong{color:var(--brand-cyan)}
.bbfx-acc-body a:hover,.bbfx-acc-body a.is-current{color:var(--brand-cyan);border-left-color:var(--brand-cyan);background:rgba(255,255,255,0.04)}
.bbfx-acc>button:hover{color:var(--brand-cyan)}
.bbfx-footer-col a:not(.bbf-btn):hover{color:var(--brand-cyan)}
.bbfx-social a:hover{border-color:var(--brand-cyan);color:var(--brand-cyan)}
.bbfx-footer-bottom a:hover{color:var(--brand-cyan)}
/* Hover fuer alle drei Cookie-Buttons gleich — auch im Hover darf Zustimmen
   nicht bevorzugt aussehen. */
.bbf-cookie-button:hover{background:rgba(255,255,255,0.10);border-color:#fff;color:#fff}
.bbf-cookie-link:hover{color:var(--brand-cyan)}
.bbf-breadcrumb a:hover{color:var(--brand-cyan)}
.bbf-refmain .seo-faq-item>summary:hover{color:var(--brand-cyan)}
.bbf-refmain p a:hover{text-decoration:underline}
.bbf-refslider__btn:hover{background:var(--brand-cyan)}
.bbf-lightbox__close:hover{opacity:1}
.bbf-lightbox:focus{outline:none}
.bbf-lightbox__close:focus{outline:none}
.bbf-lightbox__close:focus-visible{outline:2px solid var(--brand-cyan);outline-offset:3px;border-radius:6px;opacity:1}
.bbf-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.10);border:0;color:#fff;font:300 30px/1 var(--font-body);cursor:pointer;opacity:.85;transition:background var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.bbf-lightbox__nav:hover{background:rgba(255,255,255,0.20);opacity:1}
.bbf-lightbox__nav:focus{outline:none}
.bbf-lightbox__nav:focus-visible{outline:2px solid var(--brand-cyan);outline-offset:2px}
.bbf-lightbox__nav--prev{left:clamp(8px,3vw,28px)}
.bbf-lightbox__nav--next{right:clamp(8px,3vw,28px)}
@media (max-width:640px){.bbf-lightbox__nav{width:40px;height:40px;font-size:26px}}
/* Hover für inline-gestylte Statcards älterer Seiten (bis zur Klassen-Migration). */
@media (hover:hover){
  .bbf-r div[style*="ink-800"]{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
  .bbf-r div[style*="ink-800"]:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,0.38)}
}
.bbf-reffilter button:hover{border-color:var(--brand-cyan);color:var(--brand-cyan)}
.bbf-reftile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.bbf-r .seo-faq-item > summary:hover{color:var(--brand-cyan)!important}
.bbf-partner:hover::before{top:0;height:100%}
.bbf-partner:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.bbf-partner:hover .bbf-partner__link{gap:9px}
.bbf-faq .seo-faq-item>summary:hover{color:var(--brand-cyan)}
.seo-faq-item>summary:hover{color:var(--brand-cyan)!important}
/* Kein padding-left beim Hover: der Titel bricht dann um, die Zeile wird hoeher
   und die ganze Liste springt. Der Platz links ist deshalb dauerhaft reserviert,
   sichtbar wird nur die Markierung. */
.bbf-newsindex a:hover{color:var(--brand-blue,#0280b9)}
.bbf-newsindex a:hover::before{height:18px}
.bbf-dllink:hover{text-decoration-color:var(--brand-cyan)}
.bbf-dlcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.bbf-ostab:hover{color:var(--brand-cyan);border-color:rgba(0,174,231,0.6)}
.bbf-devtab:hover{color:var(--brand-cyan);border-color:rgba(0,174,231,0.6)}
.bbf-cmodal__x:hover{color:var(--text-strong)}
.seo-link-map>a:hover{border-color:var(--brand-cyan);background:rgba(0,174,231,0.06)}
}
/* Touch-Feedback: dezenter Press-Effekt statt Hover */
@media (hover:none){
  .bbf-btn:active{transform:translateY(1px);filter:brightness(1.12)}
  a.bbf-eco:active,a.bbf-feature:active,.bbf-newscard:active,a.bbf-reftile:active{filter:brightness(0.97)}
}

/* ============================================================
   Willkommens-Band „Für jede Größe" — zweispaltig: Text links, Grafik rechts.
   Kleine Kunden bewusst abholen, ohne den Premium-Anspruch zu verwässern.
   Klassenbasiert, kein Inline.
   ============================================================ */
.bbf-welcome{background:var(--neutral-50);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
/* Container muss border-box sein, sonst kappt max-width:1240 nicht → würde breiter fluchten als die anderen Sektionen */
.bbf-welcome .bbf-container{box-sizing:border-box}
.bbf-welcome__inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:clamp(32px,5vw,64px);align-items:center;padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(40px,5vw,68px)}
.bbf-welcome__text h2{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3vw,40px);line-height:1.15;letter-spacing:-.02em;color:var(--text-strong);text-wrap:balance;margin:12px 0 12px}
.bbf-welcome__text p{font-size:17px;line-height:1.65;color:var(--text-body);margin:0;max-width:560px}
.bbf-welcome__figure{position:relative;margin:0;border:1px solid var(--border-subtle);box-shadow:0 18px 44px -20px rgba(13,17,23,0.28);background:#fff;aspect-ratio:4/3;overflow:hidden}
.bbf-welcome__figure img{width:100%;height:100%;object-fit:cover;display:block}
.bbf-welcome__figure::after{content:"";position:absolute;top:0;right:0;width:80px;height:4px;background:var(--gradient-brand);z-index:1}
/* Text+Grafik-Raster INNERHALB einer normalen Sektion: das vertikale Padding
   kommt dann von der Sektion, sonst summiert es sich doppelt. */
.bbf-section .bbf-welcome__inner{padding-top:0;padding-bottom:0}
.bbf-section .bbf-welcome__text p{max-width:none}
.bbf-section .bbf-welcome__text p + p{margin-top:14px}
/* Fliesstext UNTER dem Text+Grafik-Raster: begrenzte Zeilenlaenge, damit die
   Spalte neben der Grafik kurz bleibt (Verhaeltnis wie auf der Startseite). */
.bbf-welcome__after{margin-top:clamp(28px,3.4vw,44px);max-width:820px}
.bbf-welcome__after p{font-size:17px;line-height:1.65;color:var(--text-body);margin:0}
.bbf-welcome__after p + p{margin-top:14px}

/* ============================================================
   V-Bildmarke als angerissenes Wasserzeichen (dekorativ, hinter Text).
   Zentral per JS in jede dunkle Sektion + Footer injiziert.
   Weiße Silhouette aus der farbigen Marke (brightness/invert).
   ============================================================ */
.bbf-vmark-host{position:relative;overflow:hidden}
.bbf-vmark{position:absolute;z-index:0;pointer-events:none;user-select:none;
  filter:grayscale(1) brightness(0) invert(1);will-change:transform}
/* Doppelklasse (0,2,0) schlägt .bbf-r img{max-width:100%} (0,1,1) — sonst wird
   der max-width-Deckel im .bbf-r-Footer/Hero ausgehebelt und das V auf breiten
   Screens ungekappt riesig. */
.bbf-vmark.bbf-vmark--hero-home{right:-3%;bottom:-16%;width:46vw;max-width:700px;opacity:.11}
.bbf-vmark.bbf-vmark--hero-sub{right:-5%;bottom:-20%;width:44vw;max-width:640px;opacity:.10}
/* V-Marke mobil sichtbar (vorher rechts unten fast komplett aus dem Bild) */
@media (max-width:768px){
  .bbf-vmark.bbf-vmark--hero-home,.bbf-vmark.bbf-vmark--hero-sub,.bbf-refhero .bbf-mark,.bbf-hero .bbf-mark{width:82vw;max-width:none;right:-16%;bottom:-6%;opacity:.08}
}
.bbf-vmark.bbf-vmark--footer{left:-8%;bottom:-38%;width:34vw;max-width:480px;opacity:.06}
.bbf-vmark--float{animation:bbfVmarkFloat 11s ease-in-out infinite}
@keyframes bbfVmarkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion: reduce){
  .bbf-vmark--float{animation:none}
}

/* ============================================================
   #48/#50 CTA-Band + JTL-Wawi-Hub — Prototyp-Angleichung.
   Seam-Hairlines EXAKT wie die Footer-Linie: nahtloser Brand-Verlauf
   (endet wieder auf #e23589 → kein Kachel-Sprung/„doppelt"), bbfGradient 14s.
   EINE Linie pro dunkel→hell-Naht, kein Extra-Glow. CTA-Farbe + Hub-Hover.
   ============================================================ */
.bbf-rule{background:linear-gradient(90deg,#e23589,#931d7d,#0280b9,#00aee7,#71bf93,#c8dd9b,#fdd091,#e23589);background-size:50% 100%;animation:bbfGradient 14s linear infinite}
/* Wawi-Hub Zentralkarte: Cyan-Border + Ring/Glow bei Hover */
.bbf-hubmid__box{transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
@media (hover:hover){.bbf-hubmid__box:hover{border-color:rgba(0,174,231,0.45);
  box-shadow:0 0 0 1px rgba(0,174,231,0.30),0 18px 44px rgba(0,174,231,0.18)}}
/* CTA-Band Basis-Verlauf exakt wie Prototyp (dezenter als der Default-Bloom) */
.bbf-cta{background:radial-gradient(120% 65% at 0% 120%,rgba(147,29,125,0.34),transparent 60%),
  radial-gradient(120% 90% at 100% 100%,rgba(113,191,147,0.22),transparent 55%),var(--ink-900)}
@media (prefers-reduced-motion: reduce){.bbf-rule{animation:none}}

/* #50: 100vw-Full-Bleed-Hairlines + Off-Screen-Drawer verursachten ~20px h-Scroll.
   overflow-x:clip am Root kappt das, ohne position:sticky zu brechen (anders als hidden). */
html,body{overflow-x:clip;max-width:100%}

/* ============================================================
   Fix 2: FAQ-Sektionen einheitlich — heller Wash (#f6f8fa) + Border-Top
   an der Naht. Zentral am FAQ-Inhalt erkannt (:has), unabhängig vom
   Section-Modifier (--light/--white) oder Template. Keine pro-Seite-Regel.
   ============================================================ */
/* FAQ-Sektion IMMER weiss (Björn): eine zentrale Regel statt pro Seite. Ref-Detailseiten behalten ihren Body-Ton. */
section:has(.seo-faq-item){background:#fff;border-top:0}
.bbf-refbody section:has(.seo-faq-item),.bbf-refmain section:has(.seo-faq-item){background:transparent}

/* Fix 1: Solo-Nav-Link entkernt (war inline) + Mobile-Akkordeon Aktiv-Markierung (Cyan wie Desktop). */
.bbfx-acc-solo{display:block;padding:16px 20px;font-family:var(--font-display);font-weight:600;font-size:16px;color:#fff;text-decoration:none}
.bbfx-acc.is-current>button,.bbfx-acc.is-current>.bbfx-acc-solo{color:var(--brand-cyan)}

/* Fix 1: HubCards auf hellem Wash = sattes Ink #0d1117 (rgba(0.62) würde auf Hell grau) — Dark-Sektion-Hubs unverändert. */
.bbf-section--light .bbf-hub,.bbf-section--white .bbf-hub{background:#0d1117}

/* Cookie-Banner: dezente Slide-up-Animation. Die Varianten --primary/--reject/
   --ghost sehen bewusst identisch aus (Gleichwertigkeit), deshalb keine eigenen
   Farbregeln mehr — der Kanon-Block oben gilt fuer alle drei. */
@keyframes bbfCookieUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.bbf-cookie-consent__card{animation:bbfCookieUp 420ms cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion: reduce){.bbf-cookie-consent__card{animation:none}}

/* ============================================================
   Marke fuer KI-generierte Bilder (KI-Verordnung Art. 50).
   Unten rechts im Bild, zurueckhaltend: gedeckter Grauton mit leichter
   Durchsicht, weisse Schrift, scharfe Kanten wie der restliche Auftritt.
   Fotos, Screenshots und Logos tragen sie nicht — die Zuordnung passiert in
   functions.php ueber eine gepflegte Liste.
   ============================================================ */
.bbf-kibild{position:relative;display:block;line-height:0}
.bbf-kibild>img{display:block;max-width:100%;height:auto}
.bbf-kibild__tag{position:absolute;right:10px;bottom:10px;z-index:4;
  display:inline-flex;align-items:center;
  padding:5px 9px;
  font-family:var(--font-display);font-weight:600;font-size:11px;line-height:1.1;
  letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:rgba(18,22,29,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  pointer-events:none;user-select:none}
/* In Slidern und Galerien sitzt das Bild mittig — die Marke folgt dem Rahmen. */
.bbf-refslide .bbf-kibild{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
@media (max-width:520px){
  .bbf-kibild__tag{right:6px;bottom:6px;padding:4px 7px;font-size:10px}
}