/*  bubfy.de — Stylesheet v2
 *  ═══════════════════════════════════════════════════════════════
 *  Was sich gegenüber v1 geändert hat und warum:
 *
 *  v1 war ein flaches Datenblatt: Haarlinien, keine Radien, keine
 *  Tiefe. Sachlich richtig, aber es sah nach Dokument aus, nicht nach
 *  Agentur. Diese Fassung behält die Haltung — Präzision, Monospace
 *  für Daten, Signalgelb sparsam — und ergänzt das, was gefehlt hat:
 *
 *    · echte Karten mit Fläche, Radius und abgestufter Tiefe
 *    · Icon-Kacheln statt reiner Textblöcke
 *    · sichtbare Hover-Zustände mit Akzentkante
 *    · größerer Weißraum und ein ruhigerer Satzspiegel
 *    · getönte Flächen, damit Abschnitte sich voneinander absetzen
 *
 *  Schriften weiterhin als System-Stack. Extern geladene Google Fonts
 *  waren in Deutschland wiederholt Gegenstand von Abmahnungen
 *  (LG München I, 3 O 17493/20). Wer eine Lizenzschrift will, hostet
 *  sie selbst und ergänzt hier einen @font-face-Block.
 *  ═══════════════════════════════════════════════════════════════ */

:root{
  /* Farbe — Ortsschild: das Gelb-Schwarz deutscher Ortseingangsschilder,
     das Blau der Autobahn-Wegweiser. Beides Signalfarben, die im echten
     Straßenbild für "hier ist ein Ort" bzw. "hier geht's lang" stehen —
     passend zu einer Agentur, deren Produkt lokale Auffindbarkeit ist. */
  --ink:        #171D1B;
  --ink-2:      #232B27;
  --ink-3:      #35423C;
  --muted:      #5B655F;
  --muted-2:    #838E86;
  --paper:      #EDEDE6;
  --paper-2:    #E3E2D6;
  --surface:    #FFFFFF;
  --surface-2:  #F7F6F0;
  --rule:       #C9CBBC;
  --rule-soft:  #DDDDD0;
  --signal:     #F2B705;
  --signal-2:   #FFC91A;
  --signal-ink: #241B00;
  --signal-bg:  #FBEFC4;
  --route:      #1F3A5F;
  --route-2:    #2C4F7C;

  /* Schrift — Kopfzeilen in schmaler Groteske, wie auf Wegweisern und
     Ortsschildern gesetzt; Lauftext in einer neutralen Humanist-Sans.
     Beides Systemfonts: keine nachgeladenen Webfonts, siehe Hinweis oben. */
  --f-display: "Roboto Condensed", "Arial Narrow", "Helvetica Neue Condensed", Arial, sans-serif;
  --f-body:    -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-data:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Maß */
  --wrap: 1200px;
  --gap:  clamp(3.5rem, 7vw, 7rem);

  /* Radius — Schildkante: knapp gerundet, kein SaaS-Card-Radius */
  --r-xs: 3px;
  --r-sm: 5px;
  --r:    7px;
  --r-lg: 9px;

  /* Tiefe — Kontur statt Weichzeichner. Tiefe kommt aus Rand und Versatz,
     nicht aus grauem Schlagschatten. */
  --sh-1: 0 1px 0 rgba(23,29,27,.05);
  --sh-2: 2px 2px 0 rgba(23,29,27,.08);
  --sh-3: 4px 4px 0 rgba(23,29,27,.10);
  --sh-4: 6px 6px 0 rgba(23,29,27,.12);

  --t: .22s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body.bubfy{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1rem,.95rem + .22vw,1.075rem);
  line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.bubfy a{color:inherit;text-decoration-color:var(--rule);text-underline-offset:3px}
.bubfy a:hover{text-decoration-color:var(--signal)}
.bubfy img{max-width:100%;height:auto;display:block}
:where(.bubfy) :focus-visible{outline:2.5px solid var(--signal);outline-offset:3px;border-radius:2px}

.bf-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);padding:.85rem 1.4rem;border-radius:0 0 var(--r-sm) 0}
.bf-skip:focus{left:0}
.bf-wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}

/* ═══ TYPOGRAFIE ═══════════════════════════════════════════ */
.bf-h1{
  font-family:var(--f-display);
  font-size:clamp(2.7rem,1.5rem + 5.2vw,5.3rem);
  line-height:.98;letter-spacing:-.005em;font-weight:700;
  margin:0 0 1.2rem;text-wrap:balance;
}
.bf-h2{
  font-family:var(--f-display);
  font-size:clamp(2rem,1.3rem + 2.7vw,3.3rem);
  line-height:1.02;letter-spacing:-.004em;font-weight:700;
  margin:0 0 1rem;text-wrap:balance;
}
.bf-h3{
  font-family:var(--f-display);
  font-size:clamp(1.2rem,1.08rem + .5vw,1.5rem);
  line-height:1.15;letter-spacing:0;font-weight:700;margin:0 0 .5rem;
}
.bf-lede{
  font-size:clamp(1.1rem,1rem + .55vw,1.35rem);
  line-height:1.55;color:var(--muted);margin:0 0 2rem;max-width:48ch;
}

/* Eyebrow als kleines Schild statt Pillen-Badge mit Monospace-Tracking:
   ein Wort auf einer soliden Farbfläche, wie ein Zusatzschild unter
   einem Ortsschild — kein Versal-Tracking, kein Bullet-Punkt. */
.bf-eyebrow{
  font-family:var(--f-body);font-size:.82rem;letter-spacing:0;
  text-transform:none;color:var(--signal-ink);font-weight:700;
  margin:0 0 1.1rem;display:inline-block;
  padding:.3rem .7rem;background:var(--signal);border-radius:var(--r-xs);
}
.bf-cta .bf-eyebrow{background:var(--ink-3);color:var(--paper)}

/* ═══ BUTTONS ══════════════════════════════════════════════ */
.bf-btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-body);font-size:.95rem;letter-spacing:0;
  text-transform:none;font-weight:700;
  padding:1rem 1.6rem;border-radius:var(--r-sm);border:1.5px solid var(--ink);
  text-decoration:none;cursor:pointer;
  transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
}
.bf-btn--primary{background:var(--signal);color:var(--signal-ink);border-color:var(--ink);box-shadow:var(--sh-2)}
.bf-btn--primary:hover{background:var(--signal-2);transform:translate(-2px,-2px);box-shadow:var(--sh-3)}
.bf-btn--ghost{background:transparent;border-color:var(--rule);color:var(--ink)}
.bf-btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:translate(-2px,-2px);box-shadow:var(--sh-2)}
.bf-btn--light{background:var(--signal);color:var(--signal-ink);border-color:var(--ink)}
.bf-btn--light:hover{background:var(--signal-2);transform:translate(-2px,-2px)}
.bf-btn--outline-light{background:transparent;border-color:rgba(237,237,230,.5);color:var(--paper)}
.bf-btn--outline-light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.bf-btn__arrow{transition:transform var(--t)}
.bf-btn:hover .bf-btn__arrow{transform:translateX(4px)}

/* ═══ HEADER ═══════════════════════════════════════════════ */
.bf-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--t),box-shadow var(--t);
}
.bf-header--stuck{border-bottom-color:var(--rule);box-shadow:var(--sh-1)}
.bf-header__bar{display:flex;align-items:center;gap:2rem;min-height:78px}
.bf-logo{display:inline-flex;align-items:center;line-height:0;text-decoration:none}
.bf-logo__svg{height:27px;width:auto;display:block}
.bf-logo--footer .bf-logo__svg{height:33px}

.bf-nav{margin-left:auto}
.bf-nav ul{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0}
.bf-nav a{
  text-decoration:none;font-size:.95rem;font-weight:500;color:var(--ink);
  padding:.55rem .9rem;border-radius:var(--r-sm);display:block;transition:background var(--t),color var(--t);
}
.bf-nav a:hover,.bf-nav .current-menu-item > a{background:var(--paper-2)}
.bf-nav .sub-menu{display:none}
.bf-header .bf-btn{padding:.8rem 1.35rem}

.bf-burger{
  display:none;margin-left:auto;background:var(--surface);border:1.5px solid var(--ink);
  border-radius:var(--r-sm);width:46px;height:46px;padding:0;cursor:pointer;
  align-items:center;justify-content:center;
}
.bf-burger span{display:block;width:17px;height:1.75px;background:var(--ink);position:relative;border-radius:2px}
.bf-burger span::before,.bf-burger span::after{
  content:"";position:absolute;left:0;width:17px;height:1.75px;background:var(--ink);
  border-radius:2px;transition:transform var(--t);
}
.bf-burger span::before{top:-5.5px}
.bf-burger span::after{top:5.5px}
.bf-burger[aria-expanded="true"] span{background:transparent}
.bf-burger[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.bf-burger[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}

.bf-mobile{display:none;border-top:1px solid var(--rule);background:var(--surface);padding:1rem 0 2rem}
.bf-mobile.is-open{display:block}
.bf-mobile ul{list-style:none;margin:0;padding:0}
.bf-mobile li{border-bottom:1px solid var(--rule-soft)}
.bf-mobile a{display:block;padding:1rem .25rem;text-decoration:none;font-weight:600}
.bf-mobile .bf-btn{margin-top:1.5rem;width:100%;justify-content:center}
@media (max-width:980px){
  .bf-nav,.bf-header__cta{display:none}
  .bf-burger{display:flex}
}

/* ═══ SEKTIONEN ════════════════════════════════════════════ */
.bf-section{padding-block:var(--gap);position:relative}
.bf-section--tight{padding-block:calc(var(--gap) * .6)}
.bf-section--rule{border-top:1px solid var(--rule)}
.bf-section--tint{background:var(--surface-2)}
.bf-section__head{max-width:62ch;margin-bottom:3.25rem}
.bf-section__head .bf-lede{margin-bottom:0}

/* ═══ HERO ═════════════════════════════════════════════════ */
.bf-hero{padding-top:clamp(3.5rem,8vw,6.5rem);padding-bottom:var(--gap);position:relative;overflow:hidden}
.bf-hero::after{
  content:"";position:absolute;top:0;right:0;width:clamp(140px,16vw,260px);height:10px;
  background:var(--signal);pointer-events:none;z-index:0;
}
.bf-hero > *{position:relative;z-index:1}
.bf-hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.bf-hero__actions{display:flex;flex-wrap:wrap;gap:.9rem}
.bf-hero__trust{
  font-family:var(--f-data);font-size:.78rem;color:var(--muted);
  margin-top:2rem;display:flex;flex-wrap:wrap;gap:.6rem 1rem;
}
.bf-hero__trust span{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-xs);
  padding:.45rem .9rem;
}
.bf-hero__trust b{color:var(--ink);font-weight:700}
@media (max-width:920px){.bf-hero__grid{grid-template-columns:1fr}}

/* ── Angebotskarte (Signatur) ── */
.bf-quote{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--sh-4);overflow:hidden;position:relative;
}
.bf-quote::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--signal),var(--signal-2))}
.bf-quote__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.65rem 1.75rem 1.2rem}
.bf-quote__label{font-family:var(--f-data);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bf-quote__no{font-family:var(--f-data);font-size:.68rem;color:var(--muted-2)}
.bf-quote__body{padding:0 1.75rem 1.2rem}
.bf-quote__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--rule-soft)}
.bf-quote__row:last-of-type{border-bottom:0}
.bf-quote__row span:first-child{font-size:.96rem}
.bf-quote__val{font-family:var(--f-data);font-size:.8rem;color:var(--muted);white-space:nowrap}
.bf-quote__val--yes{color:var(--ink-2);font-weight:700}
.bf-quote__total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.35rem 1.75rem;background:var(--ink)}
.bf-quote__total .bf-quote__label{color:rgba(242,244,243,.6)}
.bf-quote__sum{font-family:var(--f-data);font-size:1.3rem;font-weight:700;letter-spacing:-.02em;color:var(--signal)}
.bf-quote__foot{padding:.95rem 1.75rem;font-family:var(--f-data);font-size:.67rem;color:var(--muted-2);background:var(--surface-2);border-top:1px solid var(--rule-soft)}

/* ═══ KENNZAHLEN ═══════════════════════════════════════════ */
.bf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.bf-stats > div{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:1.85rem 1.6rem;box-shadow:var(--sh-1);transition:transform var(--t),box-shadow var(--t);
}
.bf-stats > div:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-2)}
.bf-stat__n{
  font-family:var(--f-data);font-size:clamp(1.6rem,1.2rem + 1.3vw,2.35rem);
  font-weight:700;letter-spacing:-.035em;line-height:1;margin:0 0 .5rem;color:var(--ink);
}
.bf-stat__l{font-size:.88rem;color:var(--muted);line-height:1.4;margin:0}
@media (max-width:820px){.bf-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.bf-stats{grid-template-columns:1fr}}

/* ═══ KARTEN — der zentrale Baustein ═══════════════════════ */
.bf-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.bf-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}

.bf-card{
  position:relative;display:flex;flex-direction:column;gap:.6rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:2rem 1.85rem 1.9rem;text-decoration:none;color:inherit;
  box-shadow:var(--sh-1);overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
/* Akzentkante fährt bei Hover von links ein */
.bf-card::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--signal);transform:scaleY(0);transform-origin:top;
  transition:transform var(--t);
}
a.bf-card:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-3);border-color:var(--ink)}
a.bf-card:hover::before{transform:scaleY(1)}
.bf-card__ico{
  width:46px;height:46px;border-radius:var(--r-xs);background:var(--signal-bg);
  display:flex;align-items:center;justify-content:center;margin-bottom:.35rem;
  transition:background var(--t),transform var(--t);
}
.bf-card__ico svg{width:22px;height:22px;stroke:var(--ink-2);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
a.bf-card:hover .bf-card__ico{background:var(--signal);transform:rotate(-4deg)}
.bf-card__key{
  font-family:var(--f-data);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted-2);font-weight:600;
}
.bf-card p{margin:0;color:var(--muted);font-size:.955rem;line-height:1.6}
.bf-card__more{
  margin-top:auto;padding-top:1.15rem;font-family:var(--f-data);
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--ink-2);display:inline-flex;align-items:center;gap:.4rem;
}
a.bf-card:hover .bf-card__more{color:var(--signal-ink)}
a.bf-card:hover .bf-card__more::after{transform:translateX(4px)}
.bf-card__more::after{content:"→";transition:transform var(--t)}
/* Nummerierte Variante */
.bf-card--num .bf-card__key{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r-xs);
  background:var(--ink);color:var(--signal);font-size:.78rem;letter-spacing:0;
}
@media (max-width:940px){.bf-grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.bf-grid-3,.bf-grid-2{grid-template-columns:1fr}}

/* ═══ AEO: Kurzantwort-Block ═══════════════════════════════ */
.bf-answer{
  background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--signal);
  border-radius:var(--r);padding:1.9rem 2rem;box-shadow:var(--sh-2);margin-bottom:2.5rem;
}
.bf-answer__k{
  font-family:var(--f-data);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .7rem;font-weight:600;
}
.bf-answer p{margin:0;font-size:1.12rem;line-height:1.55;color:var(--ink);font-weight:500}
.bf-answer p + p{margin-top:.85rem;font-size:1rem;font-weight:400;color:var(--muted)}
.bf-answer__facts{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.35rem;
  padding-top:1.25rem;border-top:1px solid var(--rule-soft);
}
.bf-answer__facts span{
  font-family:var(--f-data);font-size:.75rem;color:var(--muted);
  background:var(--paper);border-radius:100px;padding:.4rem .85rem;
}
.bf-answer__facts b{color:var(--ink);font-weight:700}

/* ═══ ANSPRÜCHE / CLAIMS ═══════════════════════════════════ */
.bf-claims{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.bf-claim{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:2.1rem 1.95rem;box-shadow:var(--sh-1);transition:transform var(--t),box-shadow var(--t);
}
.bf-claim:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-2)}
.bf-claim__no{
  font-family:var(--f-data);font-size:.75rem;font-weight:700;letter-spacing:.06em;
  color:var(--signal-ink);background:var(--signal);border-radius:var(--r-xs);
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;margin:0 0 1.1rem;
}
.bf-claim__not{
  font-size:.9rem;color:var(--muted-2);margin:.7rem 0 0;
  padding:.55rem .85rem;background:var(--paper);border-radius:var(--r-xs);
}
@media (max-width:760px){.bf-claims{grid-template-columns:1fr}}

/* ═══ SCHRITTE ═════════════════════════════════════════════ */
.bf-steps{counter-reset:s;display:grid;gap:1rem}
.bf-step{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.6rem;align-items:start;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:1.6rem 1.85rem;box-shadow:var(--sh-1);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.bf-step:hover{transform:translateX(4px);box-shadow:var(--sh-2);border-color:var(--signal)}
.bf-step__n{
  counter-increment:s;font-family:var(--f-data);font-size:.82rem;font-weight:700;
  width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--signal);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.bf-step__n::before{content:counter(s,decimal-leading-zero)}
.bf-step p{margin:.35rem 0 0;color:var(--muted);font-size:.955rem;max-width:66ch}
.bf-step__when{
  font-family:var(--f-data);font-size:.72rem;color:var(--muted);white-space:nowrap;
  background:var(--paper);border-radius:100px;padding:.4rem .8rem;
}
.bf-step--pair{grid-template-columns:auto 1fr}
.bf-step--pair .bf-step__n{background:var(--signal-bg);color:var(--ink-2)}
@media (max-width:760px){
  .bf-step{grid-template-columns:auto 1fr;gap:1rem}
  .bf-step__when{grid-column:2;justify-self:start;margin-top:.6rem}
}

/* ═══ ENTHALTEN / NICHT ENTHALTEN ══════════════════════════ */
.bf-inout{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:2rem 0}
.bf-inout > div{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:2rem 1.9rem;box-shadow:var(--sh-1);
}
.bf-inout > div:first-child{border-top:3px solid var(--signal)}
.bf-inout > div:last-child{background:var(--surface-2)}
.bf-inout ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.7rem;font-size:.96rem}
.bf-inout li{padding-left:2rem;position:relative;color:var(--ink-2);line-height:1.5}
.bf-inout li::before{
  position:absolute;left:0;top:.1rem;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;
}
.bf-inout__yes li::before{content:"✓";background:var(--signal-bg);color:var(--ink-2)}
.bf-inout__no li::before{content:"×";background:var(--paper-2);color:var(--muted-2)}
.bf-inout__no li{color:var(--muted)}
@media (max-width:760px){.bf-inout{grid-template-columns:1fr}}

/* ═══ TABELLEN ═════════════════════════════════════════════ */
.bf-table__wrap{
  overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--surface);box-shadow:var(--sh-1);
}
.bf-table{width:100%;border-collapse:collapse;font-size:.955rem}
.bf-table th,.bf-table td{text-align:left;padding:1.05rem 1.4rem;border-bottom:1px solid var(--rule-soft)}
.bf-table thead th{
  font-family:var(--f-data);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--rule);font-weight:600;
}
.bf-table tbody tr:last-child td{border-bottom:0}
.bf-table tbody tr{transition:background var(--t)}
.bf-table tbody tr:hover{background:var(--signal-bg)}
.bf-table td:first-child{font-weight:600}
.bf-table td:not(:first-child){color:var(--muted)}

/* ═══ WERKZEUGE ════════════════════════════════════════════ */
.bf-tools{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem;
}
.bf-tools li{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:1.3rem 1.45rem;box-shadow:var(--sh-1);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.bf-tools li:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-2);border-color:var(--signal)}
.bf-tools strong{display:block;font-size:1rem;margin-bottom:.25rem}
.bf-tools span{font-size:.9rem;color:var(--muted);line-height:1.5}

/* ═══ ORTE / CHIPS ═════════════════════════════════════════ */
.bf-places{display:flex;flex-wrap:wrap;gap:.55rem;margin:0;padding:0;list-style:none}
.bf-places a{
  display:inline-block;text-decoration:none;font-family:var(--f-data);font-size:.8rem;
  padding:.6rem 1rem;border:1px solid var(--rule);border-radius:100px;
  background:var(--surface);box-shadow:var(--sh-1);
  transition:border-color var(--t),transform var(--t),box-shadow var(--t),background var(--t);
}
.bf-places a:hover{border-color:var(--signal);background:var(--signal-bg);transform:translate(-2px,-2px);box-shadow:var(--sh-2)}

/* ═══ FAQ ══════════════════════════════════════════════════ */
.bf-faq{display:grid;gap:.85rem}
.bf-faq details{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:var(--sh-1);overflow:hidden;transition:box-shadow var(--t),border-color var(--t);
}
.bf-faq details[open]{box-shadow:var(--sh-2);border-color:var(--signal)}
.bf-faq summary{
  cursor:pointer;list-style:none;padding:1.4rem 3.5rem 1.4rem 1.75rem;
  font-weight:650;font-size:1.06rem;position:relative;
}
.bf-faq summary::-webkit-details-marker{display:none}
.bf-faq summary::after{
  content:"";position:absolute;right:1.5rem;top:50%;width:26px;height:26px;
  margin-top:-13px;border-radius:50%;background:var(--signal-bg);
  transition:transform var(--t),background var(--t);
}
.bf-faq summary::before{
  content:"+";position:absolute;right:1.5rem;top:50%;width:26px;height:26px;margin-top:-13px;
  display:flex;align-items:center;justify-content:center;z-index:1;
  font-family:var(--f-data);font-size:1.05rem;color:var(--ink-2);
  transition:transform var(--t);
}
.bf-faq details[open] summary::before{transform:rotate(45deg)}
.bf-faq details[open] summary::after{background:var(--signal)}
.bf-faq details > div{padding:0 1.75rem 1.6rem;color:var(--muted);max-width:74ch;line-height:1.65}

/* ═══ ABSCHLUSS-CTA ════════════════════════════════════════ */
.bf-cta{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.bf-cta::before{
  content:"";position:absolute;bottom:0;right:0;width:clamp(160px,18vw,300px);height:10px;
  background:var(--signal);
}
.bf-cta > *{position:relative}
.bf-cta .bf-h2{color:var(--paper)}
.bf-cta .bf-lede{color:rgba(242,244,243,.72)}
.bf-cta__grid{display:grid;grid-template-columns:1.35fr .65fr;gap:3rem;align-items:end}
@media (max-width:860px){.bf-cta__grid{grid-template-columns:1fr;gap:2rem}}

/* ═══ FOOTER ═══════════════════════════════════════════════ */
.bf-footer{background:var(--ink);color:rgba(242,244,243,.72);padding-top:var(--gap)}
.bf-footer a{color:rgba(242,244,243,.72);text-decoration:none;transition:color var(--t)}
.bf-footer a:hover{color:var(--signal)}
.bf-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:3.25rem}
.bf-footer h4{
  font-family:var(--f-display);font-size:1.05rem;letter-spacing:0;text-transform:none;
  color:var(--paper);margin:0 0 1.1rem;font-weight:700;
}
.bf-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;font-size:.94rem}
.bf-footer__brand p{margin:1.1rem 0 0;font-size:.94rem;max-width:36ch;line-height:1.6}
.bf-footer__cities{border-top:1px solid rgba(242,244,243,.12);padding:1.85rem 0;font-family:var(--f-data);font-size:.78rem;line-height:2.1}
.bf-footer__cities h4{margin-bottom:.7rem}
.bf-footer__bottom{
  border-top:1px solid rgba(242,244,243,.12);padding:1.6rem 0 2.5rem;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  font-family:var(--f-data);font-size:.74rem;
}
.bf-footer__legal{display:flex;flex-wrap:wrap;gap:1.5rem}
@media (max-width:920px){.bf-footer__grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media (max-width:560px){.bf-footer__grid{grid-template-columns:1fr}}

/* ═══ BLOG-TEASER ══════════════════════════════════════════ */
.bf-blogteaser{background:var(--surface-2)}
.bf-blogteaser__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.75rem;flex-wrap:wrap}
.bf-blogteaser__head .bf-h2{margin-bottom:0;max-width:22ch}
@media (max-width:640px){
  .bf-blogteaser__head{align-items:flex-start}
  .bf-blogteaser__head .bf-btn{width:100%;justify-content:center}
}

/* ═══ ARTIKEL ══════════════════════════════════════════════ */
.bf-article__img{margin:2.5rem auto 0}
.bf-article__img img{border-radius:var(--r-lg);border:1px solid var(--rule);box-shadow:var(--sh-3)}
.bf-article__grid{display:grid;grid-template-columns:16rem 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.bf-article__toc{
  position:sticky;top:104px;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r);padding:1.5rem 1.6rem;box-shadow:var(--sh-1);
}
.bf-article__toc h2{
  font-family:var(--f-data);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1rem;font-weight:600;border:0;padding:0;
}
.bf-article__toc ol{margin:0;padding-left:1.1rem;display:grid;gap:.6rem;font-size:.87rem}
.bf-article__toc a{text-decoration:none;color:var(--muted)}
.bf-article__toc a:hover{color:var(--ink)}
.bf-article__body{max-width:70ch}
.bf-author{
  display:grid;grid-template-columns:5.5rem 1fr;gap:1.6rem;align-items:start;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:1.85rem;box-shadow:var(--sh-1);
}
.bf-article__nav{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.bf-article__nav a{
  text-decoration:none;display:block;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r);padding:1.5rem 1.75rem;box-shadow:var(--sh-1);
  transition:transform var(--t),box-shadow var(--t);
}
.bf-article__nav a:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-2)}
.bf-article__nav--next{text-align:right}
@media (max-width:940px){.bf-article__grid{grid-template-columns:1fr}.bf-article__toc{position:static}}
@media (max-width:640px){
  .bf-author{grid-template-columns:1fr}
  .bf-article__nav{grid-template-columns:1fr}
  .bf-article__nav--next{text-align:left}
}

/* ═══ PREISE ═══════════════════════════════════════════════ */
.bf-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:2.5rem}
.bf-price{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:2.2rem 1.95rem;display:flex;flex-direction:column;box-shadow:var(--sh-1);
  transition:transform var(--t),box-shadow var(--t);
}
.bf-price:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-3)}
.bf-price--focus{border-color:var(--signal);box-shadow:var(--sh-3);position:relative}
.bf-price--focus::before{
  content:"Meistgewählt";position:absolute;top:1.2rem;right:1.2rem;
  background:var(--signal);color:var(--signal-ink);font-family:var(--f-data);
  font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:.35rem .75rem;border-radius:100px;
}
.bf-price__name{font-family:var(--f-data);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin:0 0 1.1rem}
.bf-price__fig{font-size:clamp(1.9rem,1.5rem + 1.3vw,2.5rem);font-weight:800;letter-spacing:-.035em;line-height:1;margin:0}
.bf-price__unit{font-family:var(--f-data);font-size:.74rem;color:var(--muted-2);margin:.55rem 0 1.6rem}
.bf-price ul{list-style:none;margin:0 0 1.85rem;padding:0;display:grid;gap:.7rem;font-size:.93rem}
.bf-price li{padding-left:1.6rem;position:relative;color:var(--muted)}
.bf-price li::before{content:"→";position:absolute;left:0;color:var(--signal);font-family:var(--f-data)}
.bf-price .bf-btn{margin-top:auto;justify-content:center}
@media (max-width:900px){.bf-prices{grid-template-columns:1fr}}

/* ═══ PERSONEN / STIMMEN / KONTAKT ═════════════════════════ */
.bf-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.25rem}
.bf-person{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:1.85rem;box-shadow:var(--sh-1)}
.bf-person__ph{
  aspect-ratio:1;background:linear-gradient(135deg,var(--paper-2),var(--signal-bg));
  border-radius:var(--r-sm);margin-bottom:1.1rem;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-data);font-size:1.7rem;font-weight:700;color:var(--ink-2);
}
.bf-person__role{font-family:var(--f-data);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:0}

.bf-quotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem}
.bf-testi{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:2.1rem 1.95rem;display:flex;flex-direction:column;gap:1.1rem;
  box-shadow:var(--sh-1);transition:transform var(--t),box-shadow var(--t);
}
.bf-testi:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-2)}
.bf-testi blockquote{margin:0;font-size:1.06rem;line-height:1.5;letter-spacing:-.01em}
.bf-testi blockquote::before{content:"„";color:var(--signal);font-size:1.8em;line-height:0;vertical-align:-.28em;margin-right:.05em}
.bf-testi figcaption{margin-top:auto;font-family:var(--f-data);font-size:.77rem;color:var(--muted);line-height:1.65}
.bf-testi figcaption b{display:block;color:var(--ink);font-weight:700}

.bf-contact{display:grid;grid-template-columns:1fr .85fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.bf-contact__box{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:2.1rem;box-shadow:var(--sh-2)}
.bf-contact__list{list-style:none;margin:0;padding:0;display:grid;gap:1.35rem}
.bf-contact__k{font-family:var(--f-body);font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--muted);margin:0 0 .3rem}
.bf-contact__v{font-size:1.06rem;font-weight:600;margin:0}
.bf-contact__v a{text-decoration:none}
@media (max-width:860px){.bf-contact{grid-template-columns:1fr}}

/* ═══ BEITRAGSLISTE ════════════════════════════════════════ */
.bf-posts{display:grid;gap:1rem}
.bf-post{
  display:grid;grid-template-columns:9rem 1fr;gap:1.85rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:1.75rem 1.9rem;text-decoration:none;color:inherit;box-shadow:var(--sh-1);
  transition:transform var(--t),box-shadow var(--t);
}
.bf-post:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-2)}
.bf-post__date{font-family:var(--f-data);font-size:.75rem;color:var(--muted-2);padding-top:.3rem}
.bf-post p{margin:.4rem 0 0;color:var(--muted);font-size:.955rem;max-width:66ch}
@media (max-width:660px){.bf-post{grid-template-columns:1fr;gap:.4rem}}

/* ═══ SITEMAP / PROSA / SONSTIGES ══════════════════════════ */
.bf-sitemap{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2rem}
.bf-sitemap > div{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:1.75rem;box-shadow:var(--sh-1)}
.bf-sitemap h3{font-family:var(--f-data);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem;padding-bottom:.7rem;border-bottom:1px solid var(--rule-soft)}
.bf-sitemap ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.94rem}
.bf-sitemap a{text-decoration:none}
.bf-sitemap a:hover{color:var(--signal)}

.bf-prose{max-width:74ch}
.bf-prose h2{font-size:clamp(1.3rem,1.1rem + .7vw,1.65rem);letter-spacing:-.022em;font-weight:700;margin:2.75rem 0 .85rem;padding-top:1.4rem;border-top:1px solid var(--rule)}
.bf-prose h2:first-child{border-top:0;padding-top:0;margin-top:0}
.bf-prose h3{font-size:1.1rem;font-weight:700;margin:1.85rem 0 .5rem}
.bf-prose p,.bf-prose li{color:var(--muted)}
.bf-prose ul,.bf-prose ol{padding-left:1.2rem}
.bf-prose li{margin-bottom:.45rem}
.bf-prose strong{color:var(--ink)}
.bf-prose__toc{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:1.5rem 1.7rem;margin-bottom:2.75rem;box-shadow:var(--sh-1)}
.bf-prose__toc ol{margin:0;padding-left:1.2rem;font-family:var(--f-data);font-size:.83rem;columns:2;column-gap:2rem}
.bf-prose__toc a{text-decoration:none}
@media (max-width:640px){.bf-prose__toc ol{columns:1}}

.bf-todo{display:block;background:var(--signal-bg);border:1px solid var(--rule);border-left:4px solid var(--signal);border-radius:var(--r-sm);padding:1.1rem 1.3rem;margin:1.25rem 0;font-family:var(--f-body);font-size:.88rem;color:var(--signal-ink);line-height:1.65}
.bf-note{font-family:var(--f-data);font-size:.78rem;color:var(--muted-2);margin-top:1.6rem;line-height:1.6}
.bf-lead-list{list-style:none;margin:1.5rem 0;padding:0;display:grid;gap:.9rem;max-width:64ch}
.bf-lead-list li{padding-left:1.85rem;position:relative;color:var(--muted)}
.bf-lead-list li::before{content:"→";position:absolute;left:0;color:var(--signal);font-family:var(--f-data)}
.bf-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.5vw,4rem)}
@media (max-width:820px){.bf-split{grid-template-columns:1fr}}

.bf-phero{padding-block:clamp(3rem,6.5vw,5rem) 0}
.bf-phero__grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(2rem,5vw,4rem);align-items:end}
.bf-phero .bf-h1{font-size:clamp(2.2rem,1.3rem + 3.4vw,3.85rem)}
.bf-phero__aside{
  background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--signal);
  border-radius:var(--r);padding:1.5rem 1.65rem;box-shadow:var(--sh-2);
  font-family:var(--f-data);font-size:.83rem;color:var(--muted);line-height:1.9;
}
.bf-phero__aside b{display:block;color:var(--ink);font-weight:700;font-size:.82rem;letter-spacing:0;text-transform:none;margin-top:.7rem}
.bf-phero__aside b:first-child{margin-top:0}
@media (max-width:860px){.bf-phero__grid{grid-template-columns:1fr;align-items:start}}

/* ═══ INNENSEITEN-DEFAULTS ═════════════════════════════════ */
.bubfy-page{padding-block:var(--gap)}
.bubfy-page > *{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.bubfy-crumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 2rem;padding:0;font-family:var(--f-data);font-size:.75rem;color:var(--muted-2)}
.bubfy-crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--rule)}
.bubfy-crumbs a{text-decoration:none}
.bubfy-crumbs a:hover{color:var(--ink)}
.bubfy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin:1.5rem 0}
.bubfy-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:1.85rem;box-shadow:var(--sh-1)}
.bubfy-card h3{margin:0 0 .5rem}
.bubfy-citylist{list-style:none;margin:1.25rem 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem;font-family:var(--f-data);font-size:.83rem}
.bubfy-citylist a{text-decoration:none;display:block;padding:.5rem .75rem;border-radius:var(--r-xs);transition:background var(--t)}
.bubfy-citylist a:hover{background:var(--signal-bg)}
.bubfy-pending{color:var(--muted-2);opacity:.5;padding:.5rem .75rem;display:block}
.bubfy-meta{font-family:var(--f-data);font-size:.78rem;color:var(--muted-2)}
.bubfy-cross{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.75rem}
.bubfy-cross li{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);padding:1rem 1.25rem;font-size:.95rem}
.bubfy-hub{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.bubfy-hub li a{display:inline-block;font-family:var(--f-data);font-size:.8rem;padding:.55rem .95rem;border:1px solid var(--rule);border-radius:100px;background:var(--surface);text-decoration:none}
.bubfy-hub li a:hover{border-color:var(--signal);background:var(--signal-bg)}
@media (max-width:940px){.bubfy-grid{grid-template-columns:1fr}}

/* ═══ EINBLENDEN ═══════════════════════════════════════════ */
.bf-reveal{opacity:0;transform:translateY(16px)}
.bf-reveal.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .bf-reveal{opacity:1;transform:none}
  .bf-btn:hover,.bf-card:hover,.bf-step:hover,.bf-price:hover,.bf-testi:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════
   MOBILES MENÜ — korrigiert
   Vorher wuchs das Panel unbegrenzt und schob den Viewport auf.
   Jetzt: begrenzte Höhe, eigener Scroll, Body gesperrt.
   ═══════════════════════════════════════════════════════════ */
body.bf-locked{overflow:hidden;touch-action:none}

.bf-mobile{
  display:none;border-top:1px solid var(--rule);background:var(--surface);
  padding:1rem 0 calc(1.75rem + env(safe-area-inset-bottom));
  max-height:calc(100dvh - 78px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;box-shadow:var(--sh-3);
}
.bf-mobile.is-open{display:block;animation:bf-slide .22s cubic-bezier(.22,.61,.36,1)}
@keyframes bf-slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.bf-mobile ul{list-style:none;margin:0;padding:0}
.bf-mobile li{border-bottom:1px solid var(--rule-soft)}
.bf-mobile > .bf-wrap > nav > ul > li > a{font-size:1.08rem;font-weight:650}
.bf-mobile a{display:flex;align-items:center;justify-content:space-between;padding:1.05rem .25rem;text-decoration:none}
.bf-mobile .sub-menu{margin:0 0 .5rem .9rem;border-left:2px solid var(--rule-soft)}
.bf-mobile .sub-menu li{border-bottom:0}
.bf-mobile .sub-menu a{padding:.6rem .9rem;font-size:.95rem;font-weight:500;color:var(--muted)}
.bf-mobile .bf-btn{margin-top:1.5rem;width:100%;justify-content:center}
.bf-mobile .bf-btn + .bf-btn{margin-top:.7rem}
/* Ohne JS erreichbar */
.bf-mobile:target{display:block}

/* ═══ WHATSAPP — fest unten rechts ═════════════════════════ */
.bf-wa{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;
  display:inline-flex;align-items:center;gap:.6rem;
  background:#1FAD54;color:#fff;text-decoration:none;
  padding:.9rem 1.35rem .9rem 1.1rem;border-radius:100px;
  box-shadow:0 6px 16px -4px rgba(31,173,84,.45),var(--sh-2);
  font-family:var(--f-data);font-size:.8rem;font-weight:600;letter-spacing:.03em;
  transition:transform var(--t),box-shadow var(--t),background var(--t);
}
.bf-wa:hover{background:#189447;transform:translateY(-3px);box-shadow:0 10px 24px -6px rgba(31,173,84,.55),var(--sh-3)}
.bf-wa svg{width:24px;height:24px;fill:currentColor;flex:none}
@media (max-width:720px){
  /* Ueber der App-Leiste parken, sonst ueberlagern sich beide */
  .bf-wa{bottom:calc(4.75rem + env(safe-area-inset-bottom));right:1rem;padding:.85rem;gap:0}
  .bf-wa__label{display:none}
}

/* ═══ APP-LEISTE — nur mobil ═══════════════════════════════ */
.bf-appbar{display:none}
@media (max-width:720px){
  .bf-appbar{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:95;
    background:color-mix(in srgb,var(--surface) 92%,transparent);
    backdrop-filter:saturate(180%) blur(16px);
    border-top:1px solid var(--rule);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 12px -6px rgba(14,42,43,.18);
  }
  .bf-appbar__item{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
    padding:.6rem .25rem .55rem;text-decoration:none;color:var(--muted);
    font-family:var(--f-data);font-size:.62rem;letter-spacing:.04em;
    position:relative;transition:color var(--t);
  }
  .bf-appbar__item svg{
    width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;
    stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t);
  }
  .bf-appbar__item:active svg{transform:scale(.88)}
  .bf-appbar__item.is-current{color:var(--ink)}
  .bf-appbar__item.is-current::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:26px;height:3px;background:var(--signal);border-radius:0 0 3px 3px;
  }
  .bf-appbar__item.is-current svg{stroke:var(--ink-2)}
  /* Platz schaffen, damit der Footer nicht unter der Leiste verschwindet */
  body.bubfy{padding-bottom:calc(4.25rem + env(safe-area-inset-bottom))}
}

/* ═══ FOOTER v2 ════════════════════════════════════════════ */
.bf-footer__cta{
  display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;
  padding:2rem 2.25rem;margin-bottom:3.5rem;
  background:rgba(242,244,243,.05);border:1px solid rgba(242,244,243,.12);
  border-radius:var(--r-lg);
}
.bf-footer__cta .bf-eyebrow{background:var(--signal);color:var(--signal-ink)}
.bf-footer__cta-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.bf-footer__contact{
  list-style:none;margin:1.35rem 0 0;padding:0;display:grid;gap:.5rem;
  font-family:var(--f-data);font-size:.82rem;
}
@media (max-width:760px){
  .bf-footer__cta{padding:1.6rem;flex-direction:column;align-items:flex-start}
  .bf-footer__cta-actions{width:100%}
  .bf-footer__cta-actions .bf-btn{flex:1;justify-content:center;min-width:8rem}
}

/* ═══ CHIPS — komplette Unterleistungen ════════════════════ */
.bf-chips{
  display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0;
}
.bf-chips li{
  font-family:var(--f-data);font-size:.82rem;
  padding:.7rem 1.15rem;border:1px solid var(--rule);border-radius:100px;
  background:var(--surface);box-shadow:var(--sh-1);color:var(--ink-2);
  transition:transform var(--t),border-color var(--t),background var(--t);
}
.bf-chips li:hover{transform:translate(-1px,-1px);border-color:var(--signal);background:var(--signal-bg)}

/* ═══ AUSSAGE-BLOCK ════════════════════════════════════════ */
.bf-statement{
  background:var(--ink);color:var(--paper);
  padding-block:clamp(3.5rem,7vw,6rem);position:relative;overflow:hidden;
}
.bf-statement::before{
  content:"";position:absolute;top:0;left:0;width:10px;height:100%;
  background:var(--signal);
}
.bf-statement > *{position:relative}
.bf-statement .bf-eyebrow{margin-bottom:1.5rem}
.bf-statement p:not(.bf-eyebrow){
  margin:0;max-width:24ch;
  font-size:clamp(1.9rem,1.2rem + 3vw,3.4rem);
  line-height:1.08;letter-spacing:-.034em;font-weight:800;text-wrap:balance;
}
.bf-statement p:not(.bf-eyebrow)::after{
  content:"";display:block;width:3.5rem;height:5px;background:var(--signal);
  margin-top:1.75rem;border-radius:3px;
}

/* ═══ CTA IN DER SEITENMITTE ═══════════════════════════════ */
.bf-midcta{
  display:flex;justify-content:space-between;align-items:center;gap:2.5rem;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--signal);
  border-radius:var(--r-lg);padding:2.1rem 2.35rem;box-shadow:var(--sh-2);
}
.bf-midcta__actions{display:flex;flex-wrap:wrap;gap:.7rem}
@media (max-width:760px){
  .bf-midcta{padding:1.75rem;flex-direction:column;align-items:flex-start}
  .bf-midcta__actions{width:100%}
  .bf-midcta__actions .bf-btn{flex:1;justify-content:center;min-width:8rem}
}

/* ═══════════════════════════════════════════════════════════════
   FARB-ISOLATION FÜR KARTEN
   ═══════════════════════════════════════════════════════════════
   BEHOBENER FEHLER: Steht eine helle Karte in einem dunklen Abschnitt
   (.bf-cta, .bf-statement, .bf-footer), erbte die Überschrift die helle
   Textfarbe des Abschnitts — heller Text auf weißer Karte, praktisch
   unlesbar. Genau das war auf „Warum bubfy" der Fall.

   Jede Karte setzt ihre Farben jetzt selbst. Damit ist sie überall
   einsetzbar, ohne dass der Abschnitt sie beeinflusst.
   ═══════════════════════════════════════════════════════════════ */
.bf-card,
.bf-claim,
.bf-price,
.bf-testi,
.bf-person,
.bf-step,
.bf-tools li,
.bf-chips li,
.bf-answer,
.bf-midcta,
.bf-contact__box,
.bf-article__toc,
.bubfy-card,
.bf-table__wrap,
.bf-home-number,
.bf-home-testimonial,
.bf-home-case,
.bf-home-statbar > div{
  color:var(--ink);
}
.bf-card h2,.bf-card h3,.bf-card h4,
.bf-claim h2,.bf-claim h3,.bf-claim h4,
.bf-price h3,.bf-testi h3,.bf-person h3,
.bf-step h3,.bf-midcta h2,.bf-midcta h3,
.bf-home-case h3,.bf-home-number h3{
  color:var(--ink);
}
.bf-card p,
.bf-claim p:not(.bf-claim__no):not(.bf-claim__not),
.bf-step p,.bf-price li,.bf-tools span{
  color:var(--muted);
}
.bf-claim .bf-claim__no{color:var(--signal-ink)}
.bf-claim .bf-claim__not{color:var(--muted-2)}
.bf-midcta p{color:var(--muted)}

/* Eyebrow innerhalb heller Karten in dunklen Abschnitten */
.bf-cta .bf-card .bf-eyebrow,
.bf-cta .bf-midcta .bf-eyebrow{background:var(--signal-bg);color:var(--muted)}

/* Tabellen in dunklen Abschnitten */
.bf-cta .bf-table th,.bf-cta .bf-table td{color:var(--ink)}
.bf-cta .bf-table td:not(:first-child){color:var(--muted)}

/* Abschnitt mit dunklem Grund, aber hellen Karten:
   Überschrift und Lede bleiben hell — das ist gewollt. */
.bf-cta > .bf-wrap > .bf-section__head .bf-h2{color:var(--paper)}
.bf-cta > .bf-wrap > .bf-section__head .bf-lede{color:rgba(242,244,243,.72)}

/* ═══════════════════════════════════════════════════════════════
   DUNKLE ABSCHNITTE ABSICHERN
   Der Hintergrund von .bf-cta und .bf-statement darf von keiner
   späteren Regel überschrieben werden — sonst steht heller Text auf
   hellem Grund. !important ist hier die einfachere Absicherung als
   ein Spezifitätswettlauf.
   ═══════════════════════════════════════════════════════════════ */
.bf-cta{background:var(--ink)!important;color:var(--paper)}
.bf-statement{background:var(--ink)!important;color:var(--paper)}
.bf-cta .bf-section__head .bf-h2,
.bf-cta > .bf-wrap > .bf-h2{color:var(--paper)}

/* Chips: mehr Luft, damit sie nicht aneinanderkleben */
/*.bf-chips{gap:.7rem .65rem;row-gap:.7rem}*/
.bf-chips{gap:.7rem .65rem;row-gap:.7rem;margin-top:1rem}
.bf-chips li{padding:.75rem 1.2rem;line-height:1.3}
.bubfy-hub{gap:.65rem}

/* ═══════════════════════════════════════════════════════════════
   WECHSELNDES ZWEISPALTEN-LAYOUT
   ═══════════════════════════════════════════════════════════════
   Inhalt links, freie Fläche rechts — im nächsten Abschnitt
   umgekehrt. Die freie Fläche nimmt ein Bild auf; ohne Bild steht
   dort ein ruhiger Platzhalter statt einer Lücke.

   Markup:
     <div class="bf-split-alt">
       <div class="bf-split-alt__text"> … </div>
       <div class="bf-split-alt__media"> <img …> </div>
     </div>
   Abschnitte mit .bf-split-alt--flip drehen die Seiten.
   ═══════════════════════════════════════════════════════════════ */
.bf-split-alt{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.bf-split-alt__text{min-width:0}
.bf-split-alt__media{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(135deg,var(--paper-2),var(--signal-bg));
  border:1px solid var(--rule);box-shadow:var(--sh-2);
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
}
.bf-split-alt__media img{width:100%;height:100%;object-fit:cover;display:block}
.bf-split-alt__media:empty::after,
.bf-split-alt__media--placeholder::after{
  content:"Bild folgt";font-family:var(--f-data);font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
}
/* Seiten tauschen */
.bf-split-alt--flip .bf-split-alt__text{order:2}
.bf-split-alt--flip .bf-split-alt__media{order:1}
/* Automatisch abwechseln, wenn mehrere Abschnitte hintereinander stehen */
.bf-section:nth-of-type(odd) > .bf-wrap > .bf-split-alt--auto .bf-split-alt__text{order:2}
.bf-section:nth-of-type(odd) > .bf-wrap > .bf-split-alt--auto .bf-split-alt__media{order:1}
@media (max-width:860px){
  .bf-split-alt{grid-template-columns:1fr}
  .bf-split-alt--flip .bf-split-alt__text,
  .bf-split-alt--flip .bf-split-alt__media{order:0}
  .bf-split-alt__media{aspect-ratio:16/10}
}