/*  bubfy.de — Startseite
 *  Datei: assets/css/pages/home.css
 *  ═══════════════════════════════════════════════════════════════
 *  Vorher standen diese Regeln als <style>-Block in front-page.php:
 *  rund 7 KB, die bei JEDEM Aufruf mitgeladen wurden, nie im Cache
 *  landeten und sich nur im PHP bearbeiten liessen.
 *
 *  Jetzt eine eigene Datei, die ausschliesslich auf der Startseite
 *  eingebunden wird (siehe inc/assets.php). Der Browser cacht sie,
 *  und alle anderen Seiten laden sie gar nicht erst.
 *
 *  Gegenueber der Inline-Fassung ueberarbeitet:
 *    · Formularfelder mit erkennbarem Fokus- und Fehlerzustand
 *    · Kennzahlen mit Akzentlinie statt flacher Kachel
 *    · Fallzahlen als eigenes Raster mit Trennlinien
 *    · Stimmen mit Zitatmarke und ruhigerer Typografie
 *    · Sticky-Leiste kollidiert nicht mehr mit App-Leiste und WhatsApp
 *    · durchgehend Tastaturbedienung sichtbar
 *  ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   RICHTUNGSWECHSEL — Startseite bekommt bewusst eine hellere,
   weichere Bildsprache als der Rest der Seite: warmes Creme statt
   Steinpapier, große Radien, weiche Schatten, Pillen-Chips mit
   Icon, Punktraster- und Blob-Dekoration, nummerierte Kreis-Badges.
   Nur body.home betroffen — Header, Footer und alle anderen Seiten
   bleiben beim bestehenden Signage-System.
   ═══════════════════════════════════════════════════════════════ */
body.home{
  --h-bg:      #FFF9EC;
  --h-card:    #FFFFFF;
  --h-r-lg:    26px;
  --h-r:       18px;
  --h-r-sm:    12px;
  --h-shadow-sm: 0 4px 16px -8px rgba(23,29,27,.10);
  --h-shadow:    0 14px 34px -14px rgba(23,29,27,.16), 0 2px 8px rgba(23,29,27,.05);
  --h-shadow-lg: 0 24px 48px -18px rgba(23,29,27,.20);
  background:var(--h-bg);
}

/* Eyebrow als runde Pille mit Icon statt eckigem Schild */
body.home .bf-eyebrow{
  font-family:var(--f-body);font-size:.85rem;font-weight:700;letter-spacing:0;
  color:var(--signal-ink);background:var(--signal);
  border-radius:999px;padding:.5rem 1rem .5rem .7rem;
  display:inline-flex;align-items:center;gap:.45rem;margin:0 0 1.2rem;
  box-shadow:var(--h-shadow-sm);
}
body.home .bf-eyebrow svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.home .bf-home-totop:hover{transform:translateY(-3px)!important;box-shadow:var(--h-shadow-sm)!important;border-color:var(--signal)!important}
body.home .bf-home-numbers{border-radius:var(--h-r-lg)!important}
body.home .bf-cta .bf-eyebrow{background:var(--paper);color:var(--ink)}

/* Buttons: Pillenform, weicher Farbschatten statt harter Kontur */
body.home .bf-btn{border-radius:999px!important}
body.home .bf-btn--primary{
  border:none!important;box-shadow:0 10px 24px -10px rgba(242,183,5,.65),var(--h-shadow-sm)!important;
}
body.home .bf-btn--primary:hover{transform:translateY(-2px)!important;box-shadow:0 14px 30px -10px rgba(242,183,5,.75)!important}
body.home .bf-btn--ghost{border-color:var(--rule)!important}
body.home .bf-btn--ghost:hover{transform:translateY(-2px)!important;box-shadow:var(--h-shadow-sm)!important}

/* Karten: große Radien, weicher Schatten statt harter Kontur+Versatz */
body.home .bf-card,body.home .bf-claim,body.home .bf-quote,
body.home .bf-home-number,body.home .bf-home-testimonial,body.home .bf-table__wrap{
  border-radius:var(--h-r-lg)!important;border:none!important;box-shadow:var(--h-shadow-sm)!important;
}
body.home a.bf-card:hover{transform:translateY(-6px)!important;box-shadow:var(--h-shadow)!important}
body.home .bf-claim:hover{transform:translateY(-4px)!important;box-shadow:var(--h-shadow)!important}
body.home .bf-home-number:hover,body.home .bf-home-testimonial:hover{transform:translateY(-5px)!important;box-shadow:var(--h-shadow)!important}

/* Nummerierte Kreis-Badges oben rechts auf Leistungs- und Prozesskarten */
body.home .bf-card{position:relative}
body.home .bf-card__num{
  position:absolute;top:1.3rem;right:1.3rem;width:30px;height:30px;border-radius:50%;
  background:var(--signal);color:var(--signal-ink);font-weight:800;font-size:.8rem;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--h-shadow-sm);
}

/* Dekoration: Punktraster-Ecken und weiche Farbflächen im Hintergrund */
body.home .bf-dots{
  position:absolute;width:110px;height:80px;pointer-events:none;z-index:0;
  background-image:radial-gradient(var(--signal) 1.6px, transparent 1.6px);
  background-size:14px 14px;opacity:.55;
}
body.home .bf-blob{
  position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  background:var(--signal);opacity:.14;filter:blur(2px);
}

/* Segment-Chips unter den Hero-CTAs: reale Zielgruppen, keine
   erfundenen Kundenlogos oder Sternebewertungen (siehe Schema-Hinweis
   im PHP — es liegen keine verifizierten Bewertungen vor). */
.bf-hero__segments{
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0 0;padding:0;
}
.bf-hero__segments li{
  font-size:.8rem;font-weight:600;color:var(--muted);
  background:var(--surface);border:1px solid var(--rule-soft);
  padding:.4rem .8rem;border-radius:999px;
}
body.home .bf-hero__segments li{box-shadow:var(--h-shadow-sm)}

/* "Was häufig schiefgeht / Wie wir das vermeiden" — zwei Kacheln mit
   nummerierten Zeilen und verbindenden Pfeilen, wie im Referenzbild. */
.bf-fix{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:stretch}
.bf-fix__col{
  background:var(--surface);border:1px solid var(--rule-soft);border-radius:var(--h-r-lg,var(--r-lg));
  padding:1.75rem 1.85rem;box-shadow:var(--h-shadow-sm,var(--sh-1));
}
.bf-fix__col--check{background:var(--signal-bg);border-color:transparent}
.bf-fix__col h3{display:flex;align-items:center;gap:.65rem;margin-bottom:1.3rem}
.bf-fix__badge{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
}
.bf-fix__badge svg{width:15px;height:15px}
.bf-fix__badge--x{background:var(--paper-2);color:var(--muted)}
.bf-fix__badge--check{background:var(--signal);color:var(--signal-ink)}
.bf-fix__row{
  display:flex;align-items:baseline;gap:.85rem;padding:.75rem 0;
  border-bottom:1px solid var(--rule-soft);color:var(--muted);font-size:.94rem;
}
.bf-fix__row:last-child{border-bottom:0}
.bf-fix__no{
  font-family:var(--f-data);font-size:.72rem;color:var(--muted-2);flex:none;width:1.4rem;
}
.bf-fix__arrows{
  display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;color:var(--signal);
  padding:1.3rem 0;
}
.bf-fix__arrows svg{width:20px;height:20px}
@media (max-width:820px){
  .bf-fix{grid-template-columns:1fr}
  .bf-fix__arrows{flex-direction:row;justify-content:center;gap:1rem;padding:.5rem 0}
  .bf-fix__arrows svg{transform:rotate(90deg)}
}
.bf-quote__item{display:inline-flex;align-items:center;gap:.5rem}
.bf-quote__item svg{width:15px;height:15px;color:var(--signal-ink);background:var(--signal);border-radius:50%;padding:2px;flex:none}

/* Preis-Pakete: mittlere Karte optisch hervorgehoben, wie im Referenzbild */
body.home .bf-price{border-radius:var(--h-r-lg)!important;box-shadow:var(--h-shadow-sm)!important}
body.home .bf-price:hover{transform:translateY(-5px)!important;box-shadow:var(--h-shadow)!important}
body.home .bf-price--focus{
  border:2px solid var(--signal)!important;box-shadow:var(--h-shadow)!important;transform:scale(1.02);
}
body.home .bf-price--focus::before{box-shadow:var(--h-shadow-sm)}
body.home .bf-price li::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--signal-bg);
  display:inline-flex;align-items:center;justify-content:center;top:.15em}

/* Vergleichstabelle: große Radien, bubfy-Spalte dezent hervorgehoben */
body.home .bf-table__wrap{overflow:hidden;border-radius:var(--h-r-lg)!important;box-shadow:var(--h-shadow-sm)!important}
body.home .bf-table thead th{background:var(--surface-2)}
body.home .bf-table td:last-child,body.home .bf-table th:last-child{
  background:var(--signal-bg);
}
.bf-home-answer{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(1.5rem,3vw,2.75rem);align-items:end;
}
.bf-home-answer__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.bf-home-answer__facts span{
  display:block;padding:.95rem 1rem;background:var(--paper);
  border-radius:var(--r-sm);border:1px solid var(--rule-soft);
  font-family:var(--f-body);font-size:.82rem;letter-spacing:0;
  text-transform:none;color:var(--muted-2);
}
.bf-home-answer__facts b{
  display:block;color:var(--ink);font-size:1.02rem;margin-top:.35rem;
  letter-spacing:0;text-transform:none;font-weight:700;
}
@media (max-width:860px){
  .bf-home-answer{grid-template-columns:1fr}
  .bf-home-answer__facts{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:520px){.bf-home-answer__facts{grid-template-columns:1fr}}

/* ── Kennzahlenleiste im Hero ─────────────────────────────── */
.bf-home-statbar{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.25rem;
}
.bf-home-statbar > div{
  position:relative;padding:1.4rem 1.35rem 1.35rem;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-sm);box-shadow:var(--sh-1);overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.bf-home-statbar > div::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--signal);
}
.bf-home-statbar > div:hover{
  transform:translate(-2px,-2px);box-shadow:var(--sh-2);border-color:var(--signal);
}
.bf-home-statbar strong{
  display:block;font-family:var(--f-data);font-size:1.35rem;
  font-weight:700;letter-spacing:-.02em;color:var(--ink);
}
.bf-home-statbar span{
  display:block;color:var(--muted);font-size:.85rem;line-height:1.45;margin-top:.35rem;
}
@media (max-width:900px){.bf-home-statbar{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.bf-home-statbar{grid-template-columns:1fr}}

.bf-home-cta-note{
  font-family:var(--f-data);font-size:.75rem;color:var(--muted-2);margin:1.1rem 0 0;
}

/* ── Kennzahlen ───────────────────────────────────────────── */
.bf-home-numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.bf-home-number{
  padding:1.85rem 1.5rem;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r);box-shadow:var(--sh-1);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.bf-home-number:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-3);border-color:var(--signal)}
.bf-home-number__fig{
  font-family:var(--f-data);font-size:clamp(1.9rem,1.5rem + 1.2vw,2.5rem);
  font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
.bf-home-number__label{margin-top:.7rem;color:var(--muted);font-size:.88rem;line-height:1.45}
@media (max-width:900px){.bf-home-numbers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.bf-home-numbers{grid-template-columns:1fr}}

/* ── Fallbeispiel ─────────────────────────────────────────── */
.bf-home-case{
  display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.75rem,3.5vw,3rem);
  align-items:center;padding:clamp(1.75rem,3vw,2.5rem);
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-lg);box-shadow:var(--sh-2);
}
.bf-home-case__metrics{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-soft);
  border:1px solid var(--rule-soft);border-radius:var(--r-sm);overflow:hidden}
.bf-home-case__metric{padding:1.35rem 1.25rem;background:var(--paper)}
.bf-home-case__metric b{
  display:block;font-family:var(--f-data);font-size:1.5rem;color:var(--ink);
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;
}
.bf-home-case__metric span{display:block;margin-top:.3rem;color:var(--muted);font-size:.85rem;line-height:1.4}
@media (max-width:820px){
  .bf-home-case{grid-template-columns:1fr}
}

/* ── Stimmen ──────────────────────────────────────────────── */
.bf-home-testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.bf-home-testimonial{
  display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;
  padding:2rem 1.85rem;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r);box-shadow:var(--sh-1);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.bf-home-testimonial:hover{transform:translate(-3px,-3px);box-shadow:var(--sh-3);border-color:var(--ink)}
.bf-home-testimonial__quote{
  margin:0;color:var(--ink);font-size:1.04rem;line-height:1.6;letter-spacing:-.008em;
}
.bf-home-testimonial__quote::before{
  content:"\201C";color:var(--signal);font-size:2em;line-height:0;
  vertical-align:-.32em;margin-right:.1rem;font-weight:700;
}
.bf-home-testimonial__who{display:flex;align-items:center;gap:.85rem}
.bf-home-testimonial__avatar{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--paper-2),var(--signal-bg));
  border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-data);font-size:.85rem;font-weight:700;color:var(--ink-2);
}
.bf-home-testimonial__meta{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.bf-home-testimonial__name{font-weight:700;font-size:.95rem;color:var(--ink)}
.bf-home-testimonial__role{
  font-family:var(--f-data);font-size:.75rem;color:var(--muted-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bf-home-testimonials-note{
  font-family:var(--f-data);font-size:.75rem;color:var(--muted-2);
  margin-top:1.35rem;padding-left:.9rem;border-left:2px solid var(--rule);
}
@media (max-width:960px){.bf-home-testimonials{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.bf-home-testimonials{grid-template-columns:1fr}}

/* ── Kontaktformular ──────────────────────────────────────── */
.bf-home-form{display:flex;flex-direction:column;gap:1.15rem}
.bf-home-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}
.bf-home-field{display:flex;flex-direction:column;gap:.5rem}
.bf-home-field--full{grid-column:1/-1}
.bf-home-field label{
  font-size:.82rem;font-weight:700;color:var(--ink-2);
  letter-spacing:.01em;
}
.bf-req{color:var(--signal);font-weight:700}
.bf-home-field input,
.bf-home-field select,
.bf-home-field textarea{
  width:100%;font:inherit;font-size:.98rem;color:var(--ink);
  background:var(--surface-2);border:1.5px solid var(--rule);
  border-radius:var(--r-sm);padding:.9rem 1.05rem;outline:none;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.bf-home-field textarea{min-height:140px;resize:vertical;line-height:1.55}
.bf-home-field input::placeholder,
.bf-home-field textarea::placeholder{color:var(--muted-2)}
.bf-home-field input:hover,
.bf-home-field select:hover,
.bf-home-field textarea:hover{border-color:var(--muted-2)}
.bf-home-field input:focus,
.bf-home-field select:focus,
.bf-home-field textarea:focus{
  border-color:var(--signal);background:var(--surface);
  box-shadow:0 0 0 4px var(--signal-bg);
}
/* Fehler erst zeigen, wenn wirklich etwas eingegeben wurde */
.bf-home-field input:not(:placeholder-shown):invalid,
.bf-home-field textarea:not(:placeholder-shown):invalid{
  border-color:#B3402B;background:#FDF3F1;
}
.bf-home-consent{
  display:flex;align-items:flex-start;gap:.7rem;
  font-size:.85rem;color:var(--muted);line-height:1.5;
  padding:1rem 1.15rem;background:var(--paper);border-radius:var(--r-sm);
}
.bf-home-consent input{margin-top:.15rem;flex:0 0 auto;width:18px;height:18px;accent-color:var(--signal)}
.bf-home-consent a{color:var(--ink);font-weight:700}
.bf-home-form__submit{display:flex;align-items:center;gap:1.15rem;flex-wrap:wrap}
.bf-home-form__status{
  font-family:var(--f-data);font-size:.8rem;color:var(--muted);line-height:1.5;
}
.bf-home-form__status[data-state="error"]{color:#B3402B;font-weight:600}
.bf-home-form__status[data-state="ok"]{color:#177D3F;font-weight:600}
.bf-home-form__status a{color:inherit;font-weight:700}
/* Honeypot — für Menschen unsichtbar, für Bots ein Köder */
.bf-home-hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
@media (max-width:640px){.bf-home-form__grid{grid-template-columns:1fr}}

/* ── Sticky-Leiste unten ──────────────────────────────────── */
.bf-home-stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  box-shadow:0 -4px 18px -6px rgba(14,42,43,.22);
  padding-bottom:env(safe-area-inset-bottom);
}
.bf-home-stickycta a{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  padding:1.05rem .5rem;font-family:var(--f-data);font-size:.84rem;font-weight:700;
  text-decoration:none;background:var(--surface);color:var(--ink);
}
.bf-home-stickycta a.bf-home-stickycta__primary{
  background:var(--signal);color:var(--signal-ink);
}
/* Die App-Leiste aus dem Footer belegt bereits den unteren Rand.
   Beide gleichzeitig wäre doppelt — deshalb blendet die App-Leiste
   auf der Startseite aus, sobald die Sticky-Leiste sichtbar ist. */
@media (max-width:720px){
  .bf-home-stickycta{display:grid}
  body.home .bf-appbar{display:none}
  body.home{padding-bottom:calc(3.9rem + env(safe-area-inset-bottom))}
  body.home .bf-wa{bottom:calc(4.4rem + env(safe-area-inset-bottom))}
}

/* ── Nach oben ────────────────────────────────────────────── */
.bf-home-totop{
  position:fixed;right:1.15rem;bottom:1.15rem;z-index:55;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--surface);border:1px solid var(--rule);
  box-shadow:var(--sh-2);color:var(--ink);text-decoration:none;
  opacity:0;pointer-events:none;
  transition:opacity var(--t),transform var(--t),box-shadow var(--t);
}
.bf-home-totop.is-in{opacity:1;pointer-events:auto}
.bf-home-totop:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-3);border-color:var(--signal)}
@media (max-width:720px){
  /* WhatsApp sitzt schon rechts unten — hier nach links ausweichen */
  .bf-home-totop{right:auto;left:1rem;bottom:calc(4.4rem + env(safe-area-inset-bottom))}
}

/* ── Themen-Chips ─────────────────────────────────────────── */
.bf-home-topic{
  font-family:var(--f-data);font-size:.78rem;
  padding:.6rem 1rem;border:1px solid var(--rule);border-radius:100px;
  background:var(--surface);color:var(--ink-2);
}

@media (prefers-reduced-motion:reduce){
  .bf-home-number:hover,.bf-home-testimonial:hover,
  .bf-home-statbar > div:hover,.bf-home-totop:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   KONTAKT: TEXT LINKS, FORMULAR RECHTS
   ═══════════════════════════════════════════════════════════════
   Das Formular steht jetzt rechts und bleibt beim Scrollen stehen.
   Der Absende-Button sitzt rechtsbündig unter den Feldern — dort
   sucht ihn das Auge nach dem letzten Eingabefeld.
   ═══════════════════════════════════════════════════════════════ */
.bf-home-contact{
  display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(2rem,4vw,4rem);align-items:start;
}
/* Formular steht im Markup an zweiter Stelle -> automatisch rechts.
   Der Infokasten wandert nach links unter den Text. */
.bf-home-contact > .bf-contact__box{grid-column:2;grid-row:1 / span 2}
.bf-home-contact > *:not(.bf-contact__box){grid-column:1}
@media (max-width:900px){
  .bf-home-contact > .bf-contact__box,
  .bf-home-contact > *:not(.bf-contact__box){grid-column:1;grid-row:auto}
}
.bf-home-contact__form{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:clamp(1.75rem,3vw,2.5rem);
  box-shadow:var(--sh-3);position:relative;overflow:hidden;
}
.bf-home-contact__form::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--signal),var(--signal-2));
}
.bf-home-form__submit{justify-content:flex-end;flex-direction:row-reverse}
.bf-home-form__submit .bf-btn{min-width:13rem;justify-content:center}
.bf-home-form__status{flex:1;text-align:left}
@media (max-width:900px){
  .bf-home-contact{grid-template-columns:1fr}
  .bf-home-form__submit{flex-direction:column;align-items:stretch}
  .bf-home-form__submit .bf-btn{width:100%}
}

/* ═══════════════════════════════════════════════════════════════
   VERTRAUENS-LEISTE — Werkzeuge & Standards als ruhiger Marquee
   Bewusst kein Kartenmodul: bubfy ist eine DACH/Mittelstand-Agentur,
   keine globale Multi-Länder-Agentur — eine "60+ Länder"-Erzählung
   oder Weltkarte wäre hier unpassend bzw. irreführend.
   ═══════════════════════════════════════════════════════════════ */
.bf-home-trust{
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
  background:var(--surface-2);overflow:hidden;padding:1.5rem 0;
}
.bf-home-trust__label{
  font-family:var(--f-body);font-size:.85rem;letter-spacing:0;text-transform:none;
  color:var(--muted-2);text-align:center;margin:0 0 1.1rem;
}
.bf-home-trust__track{
  display:flex;align-items:center;width:max-content;gap:2.25rem;
  animation:bf-home-marquee 32s linear infinite;will-change:transform;
}
.bf-home-trust:hover .bf-home-trust__track{animation-play-state:paused}
.bf-home-trust__item{
  display:inline-flex;align-items:center;gap:.55rem;flex:none;
  font-family:var(--f-data);font-size:.85rem;font-weight:600;color:var(--ink-2);
  white-space:nowrap;
}
.bf-home-trust__item svg{width:17px;height:17px;flex:none;color:var(--signal)}
.bf-home-trust__dot{width:3px;height:3px;border-radius:50%;background:var(--rule);flex:none}
@keyframes bf-home-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (max-width:640px){
  .bf-home-trust__item{font-size:.78rem}
  .bf-home-trust__track{gap:1.65rem;animation-duration:24s}
}
@media (prefers-reduced-motion:reduce){
  .bf-home-trust__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
}

/* ═══════════════════════════════════════════════════════════════
   HERO — mehr Präsenz statt Minimalismus
   ═══════════════════════════════════════════════════════════════ */
body.home .bf-hero{background:none}
/* Weiche Farbfläche oben rechts + Punktraster unten links — die
   "wow"-Dekoration aus den Referenzbildern, aber dezent genug, um
   Lesbarkeit und Ladezeit nicht zu beeinträchtigen. */
body.home .bf-hero::before{
  content:"";position:absolute;top:-15%;right:-8%;width:46%;padding-bottom:46%;
  border-radius:50%;background:var(--signal);opacity:.16;pointer-events:none;z-index:0;
  filter:blur(1px);
}
body.home .bf-hero::after{
  content:"";position:absolute;bottom:4%;left:2%;width:130px;height:100px;
  pointer-events:none;z-index:0;opacity:.6;
  background-image:radial-gradient(var(--signal) 1.7px, transparent 1.7px);
  background-size:15px 15px;
}
body.home .bf-hero > *{position:relative;z-index:1}
body.home .bf-h1{
  font-size:clamp(2.7rem,1.5rem + 5vw,5.1rem);letter-spacing:-.045em;
}
.bf-mark{color:#D99A00}
.bf-statement .bf-mark,.bf-cta .bf-mark{color:var(--signal)}

/* (Der frühere "atmende" Glow entfällt — die Hero-Akzentfläche ist jetzt
   ein ruhiger, flacher Schild-Streifen statt eines weichen Verlaufs.) */

/* Abschnitte abwechselnd tönen — ABER dunkle Blöcke ausnehmen.
   BEHOBENER FEHLER: Diese Regel hatte höhere Spezifität als .bf-cta
   und hat dessen dunklen Hintergrund überschrieben. Die Überschrift
   blieb hell -> heller Text auf hellem Grund, unlesbar. */
body.home .bf-section--rule:nth-of-type(even):not(.bf-cta):not(.bf-statement):not(.bf-footer){
  background:var(--surface-2);
}

/* Kennzahlen größer und mit Trennlinien statt Einzelkacheln */
body.home .bf-home-numbers{
  gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-lg);overflow:hidden;
}
body.home .bf-home-number{border:0;border-radius:0;box-shadow:none;background:var(--surface)}
body.home .bf-home-number:hover{transform:none;background:var(--signal-bg)}


/* ═══════════════════════════════════════════════════════════════════════
   SIGNATURE — die Startseite bekommt EINE unverwechselbare Idee statt
   vieler kleiner Effekte: das Angebot ist ein echtes Preisschild, kein
   Rechnungsdokument. Gelb ist die Schildfarbe, Graphit die Aufschrift.
   Keine zusätzliche Schriftfamilie — die schmale Groteske aus dem
   globalen System trägt den Charakter bereits.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   SIGNATURE — die Preiskarte im Hero ist eine schwebende Übersichtskarte:
   weicher Schatten, große Radien, ein runder Erledigt-Badge statt eines
   Dokumenten-Stempels.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Badge: rundes Häkchen, schwebt über der Karte ──────────────────── */
.bf-quote{overflow:visible !important}
body.home .bf-quote__head{padding-right:5.5rem}
@media (max-width:520px){body.home .bf-quote__head{padding-right:4.5rem}}
.bf-quote__stamp{
  position:absolute;top:-1rem;right:1.75rem;z-index:2;
  width:3.6rem;height:3.6rem;border-radius:50%;
  background:var(--signal);box-shadow:var(--h-shadow,0 10px 24px -10px rgba(23,29,27,.25));
  display:flex;align-items:center;justify-content:center;
  transform:scale(0);color:var(--signal-ink);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1) .5s;
}
.bf-quote__stamp svg{width:20px;height:20px;color:var(--signal-ink);stroke-width:3}
.bf-quote__stamp span{display:none}
.bf-reveal.is-in .bf-quote__stamp{transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  .bf-quote__stamp{transform:scale(1);transition:none}
}
@media (max-width:520px){
  .bf-quote__stamp{width:3rem;height:3rem;top:-.75rem;right:1.25rem}
  .bf-quote__stamp svg{width:16px;height:16px}
}

/* Trennlinie zwischen Positionsliste und Endsumme — dezent statt hart */
.bf-quote__tear{
  height:0;margin:0 1.75rem;position:relative;
  border-top:1px solid var(--rule-soft);
}

/* Positionen "tippen" sich nacheinander ein, wie ein Bondrucker —
   eine bewusste, einzelne Bewegung statt vieler kleiner Hover-Gimmicks. */
.bf-reveal.is-in .bf-quote__row{
  animation:bf-quote-print .5s ease both;
}
.bf-reveal.is-in .bf-quote__row:nth-child(1){animation-delay:.55s}
.bf-reveal.is-in .bf-quote__row:nth-child(2){animation-delay:.63s}
.bf-reveal.is-in .bf-quote__row:nth-child(3){animation-delay:.71s}
.bf-reveal.is-in .bf-quote__row:nth-child(4){animation-delay:.79s}
.bf-reveal.is-in .bf-quote__row:nth-child(5){animation-delay:.87s}
.bf-reveal.is-in .bf-quote__row:nth-child(6){animation-delay:.95s}
@keyframes bf-quote-print{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .bf-reveal.is-in .bf-quote__row{animation:none}
}

/* ── Primärer CTA auf der Startseite erbt den globalen Plate-Hover;
   kein zusätzlicher Glanz-Effekt nötig. ── */
body.home .bf-btn--primary{box-shadow:var(--sh-2)}

/* ── Verlaufs-Unterstrich unter Sektionstiteln — der eine wiederkehrende
   Rhythmus der Seite, kein Extra-Glow auf jeder Karte. ── */
body.home .bf-section__head{position:relative}
body.home .bf-section__head::after{
  content:"";display:block;width:2.75rem;height:2px;margin-top:1.1rem;
  background:var(--signal);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.22,.61,.36,1) .1s;
}
body.home .bf-section__head.bf-reveal.is-in::after{transform:scaleX(1)}
body.home .bf-section__head:not(.bf-reveal)::after{transform:scaleX(1)}

/* ── Marquee: weiche Ausblendung an den Rändern statt hartem Schnitt ── */
.bf-home-trust{position:relative}
.bf-home-trust::before,.bf-home-trust::after{
  content:"";position:absolute;top:0;bottom:0;width:5rem;z-index:2;pointer-events:none;
}
.bf-home-trust::before{left:0;background:linear-gradient(90deg,var(--surface-2),transparent)}
.bf-home-trust::after{right:0;background:linear-gradient(270deg,var(--surface-2),transparent)}

/* ── Feines Korn über der Startseite: passt jetzt inhaltlich zum
   "Papier/Dokument"-Motiv, nicht nur Dekor. Sehr niedrige Deckkraft. ── */
body.home{position:relative}
body.home::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.03;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Zurückhaltend gestaffeltes Einblenden für Rasterelemente ───────── */
body.home .bf-grid-3.bf-reveal.is-in > *,
body.home .bf-claims.bf-reveal.is-in > *,
body.home .bf-home-numbers.bf-reveal.is-in > *,
body.home .bf-home-testimonials.bf-reveal.is-in > *,
body.home .bf-prices.bf-reveal.is-in > *{
  animation:bf-home-rise .55s cubic-bezier(.22,.61,.36,1) both;
}
body.home .bf-grid-3.bf-reveal.is-in > *:nth-child(2),
body.home .bf-claims.bf-reveal.is-in > *:nth-child(2),
body.home .bf-home-numbers.bf-reveal.is-in > *:nth-child(2),
body.home .bf-home-testimonials.bf-reveal.is-in > *:nth-child(2),
body.home .bf-prices.bf-reveal.is-in > *:nth-child(2){animation-delay:.07s}
body.home .bf-grid-3.bf-reveal.is-in > *:nth-child(3),
body.home .bf-claims.bf-reveal.is-in > *:nth-child(3),
body.home .bf-home-numbers.bf-reveal.is-in > *:nth-child(3),
body.home .bf-home-testimonials.bf-reveal.is-in > *:nth-child(3),
body.home .bf-prices.bf-reveal.is-in > *:nth-child(3){animation-delay:.14s}
body.home .bf-home-numbers.bf-reveal.is-in > *:nth-child(4){animation-delay:.21s}
@keyframes bf-home-rise{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  body.home .bf-grid-3.bf-reveal.is-in > *,
  body.home .bf-claims.bf-reveal.is-in > *,
  body.home .bf-home-numbers.bf-reveal.is-in > *,
  body.home .bf-home-testimonials.bf-reveal.is-in > *,
  body.home .bf-prices.bf-reveal.is-in > *{animation:none}
}