/*
 * Patterns — Section-spezifische Styles für alle Block-Patterns,
 * die nicht eigenes File-CSS haben (Hero, AEO, Sections-Basis liegen separat).
 *
 * Reihenfolge wie in Section 6 des Briefings.
 */

/* ========== Pillars ========== */
/* Head: zwei Spalten (Headline links, Lead rechts), 760px-Center entfällt. */
.bf-pillars__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 56px;
  text-align: left;
}
.bf-pillars__head .bf-eyebrow,
.bf-pillars__head .is-style-bf-eyebrow { text-align: left; }
.bf-pillars__head h2 { margin-bottom: 0; }
.bf-pillars__head-text {
  font-size: 17px;
  color: var(--bf-gray-80);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 1024px) {
  .bf-pillars__head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
}

.bf-pillars__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.bf-pillars__grid.wp-block-columns { gap: 28px; }
@media (max-width: 900px) {
  .bf-pillars__grid { grid-template-columns: 1fr; }
}
.bf-pillar {
  position: relative;
  padding: 44px 40px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 380px;
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  transition: all 0.3s var(--ease);
}
.bf-pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Variante 1: Lernarchitektur — dunkelgrün → türkis Verlauf, weißer Text. */
.bf-pillar--lernarchitektur {
  background: linear-gradient(140deg, var(--bf-green-dark-1) 0%, var(--bf-turquoise-dark) 100%);
  color: var(--bf-white);
}
.bf-pillar--lernarchitektur .bf-pillar__title,
.bf-pillar--lernarchitektur .bf-pillar__text,
.bf-pillar--lernarchitektur .bf-pillar__bullets li { color: var(--bf-white); }
.bf-pillar--lernarchitektur .bf-pillar__text { color: rgba(255,255,255,0.86); }
.bf-pillar--lernarchitektur .bf-pillar__bullets li { color: rgba(255,255,255,0.92); }
.bf-pillar--lernarchitektur .bf-pillar__bullets li {
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.bf-pillar--lernarchitektur .bf-pillar__tag {
  background: rgba(255,255,255,0.14);
  color: var(--bf-white);
}
.bf-pillar--lernarchitektur .bf-pillar__cta {
  background: var(--bf-white);
  color: var(--bf-green-dark-1);
}

/* Variante 2: Consulting — beige Hintergrund, dunkler Text. */
.bf-pillar--consulting {
  background: var(--bf-beige-light);
  color: var(--bf-gray-dark);
  border: 1px solid rgba(212,214,215,0.6);
}
.bf-pillar--consulting .bf-pillar__tag {
  background: var(--bf-white);
  color: var(--bf-pink);
  box-shadow: var(--shadow-sm);
}
.bf-pillar--consulting .bf-pillar__cta {
  background: var(--bf-gray-dark);
  color: var(--bf-white);
}

/* Tag oben: kleiner Pill mit Icon + Label */
.bf-pillar__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

.bf-pillar__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: 30px !important;
  line-height: 1.15;
  margin: 4px 0 0;
}
.bf-pillar__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--bf-gray-80);
}

.bf-pillar__bullets {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.bf-pillar__bullets li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(38,50,55,0.08);
  font-size: 14.5px;
  position: relative;
  padding-left: 22px;
}
.bf-pillar__bullets li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--bf-turquoise-40);
  font-weight: 700;
}
.bf-pillar--consulting .bf-pillar__bullets li::before { color: var(--bf-green); }
.bf-pillar__bullets li:last-child { border-bottom: 0; }

.bf-pillar__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: auto;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  transition: transform 0.18s var(--ease);
}
.bf-pillar__cta:hover { transform: translateX(3px); }

/* ========== Promises ========== */
.bf-promises__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 900px) { .bf-promises__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .bf-promises__grid { grid-template-columns: 1fr; } }

.bf-promise {
  background: var(--bf-white);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  border: 1px solid rgba(212, 214, 215, .4);
  display: flex !important; flex-direction: column; gap: 12px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bf-promise:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.bf-promise__icon {
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center; color: var(--bf-white); font-size: 22px; margin-bottom: 6px;
}
.bf-promise__icon i,
.bf-problem-card__icon i,
.bf-pillar__tag i,
.bf-compare__icon i,
.bf-ai__demo-avatar i,
.bf-proof__award-icon i,
.bf-ab__icon i {
  line-height: 1;
}
.bf-promise__icon i      { font-size: 22px; }
.bf-problem-card__icon i { font-size: 20px; }
.bf-pillar__tag i        { font-size: 14px; }
.bf-compare__icon i      { font-size: 14px; }
.bf-ai__demo-avatar i    { font-size: 18px; }
.bf-proof__award-icon i  { font-size: 16px; color: #fff; }
.bf-ab__icon i           { font-size: 18px; }
.bf-promise--wirkt    .bf-promise__icon { background: linear-gradient(135deg, var(--bf-turquoise), var(--bf-turquoise-dark)); }
.bf-promise--verbindet .bf-promise__icon { background: linear-gradient(135deg, var(--bf-pink), var(--bf-orange)); }
.bf-promise--sicher   .bf-promise__icon { background: linear-gradient(135deg, var(--bf-yellow), var(--bf-orange)); }
.bf-promise--modular  .bf-promise__icon { background: linear-gradient(135deg, var(--bf-green), var(--bf-green-dark-1)); }
/* Title bewusst klein — Sections-Headline-Regel würde sonst clamp(34,3.6vw,50) erzwingen. */
.bf-promise__title,
.bf-promise .wp-block-heading {
  font-family: 'DM Serif Display', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  color: var(--bf-gray-dark) !important;
  letter-spacing: -0.01em !important;
}
.bf-promise__text  { margin: 0; color: var(--bf-gray-80); line-height: 1.55; font-size: 14.5px; }

/* ========== Topics ========== */
.bf-topics__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.bf-topic {
  position: relative; display: flex; flex-direction: column; gap: 18px;
  padding: 40px 32px; border-radius: var(--radius-lg); color: var(--bf-white);
  text-decoration: none; min-height: 240px; overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.bf-topic:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--bf-white); }
.bf-topic--lead    { background: linear-gradient(155deg, #0B696E 0%, #00BF9A 100%); }
.bf-topic--sell    { background: linear-gradient(155deg, #DD1F5A 0%, #F46721 100%); }
.bf-topic--talk    { background: linear-gradient(155deg, #00A5B6 0%, #00C3D6 100%); }
.bf-topic--act     { background: linear-gradient(155deg, #0D7C82 0%, #0B696E 100%); }
.bf-topic--develop { background: linear-gradient(155deg, #F46721 0%, #ECB903 100%); }
.bf-topic--feel    { background: linear-gradient(155deg, #ECB903 0%, #F46721 100%); }
.bf-topic__short {
  font-family: 'DM Serif Display', Georgia, serif; font-size: 48px; line-height: 1;
  letter-spacing: -0.02em; color: rgba(255,255,255,0.96);
}
.bf-topic__body { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.bf-topic__name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 8px;
}
.bf-topic__desc { font-size: 14.5px; opacity: 0.95; line-height: 1.5; margin-bottom: 16px; }

@media (max-width: 900px) { .bf-topics__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .bf-topics__grid { grid-template-columns: 1fr; } }

/* ========== Scenarios ========== */
.bf-scenarios__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
}

/* Klickbare Karten (als <a> gerendert): keine Link-Unterstreichung, Farbe erben.
 * Gilt für alle CPT-Kachel-Typen, die im aktiven Zustand zu Links werden. */
a.bf-scenario, a.bf-service, a.bf-project, a.bf-topic,
.bf-scenario--link, .bf-service--link, .bf-project--link {
  text-decoration: none;
  color: inherit;
}
a.bf-scenario *, a.bf-service *, a.bf-project *, a.bf-topic * {
  text-decoration: none;
}
.bf-scenario {
  background: var(--bf-white); border-radius: var(--radius-lg);
  padding: 36px 32px;
  border: 1px solid rgba(212, 214, 215, .4);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.bf-scenario:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.bf-scenario__head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.bf-scenario__num {
  font-family: 'DM Serif Display', serif; font-size: 14px; font-weight: 400;
  color: var(--bf-pink);
  padding: 5px 12px;
  background: rgba(221, 31, 90, 0.08);
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
}
.bf-scenario__tag {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bf-gray-60);
}
.bf-scenario__title {
  font-family: 'DM Serif Display', serif;
  font-size: 26px; font-weight: 400; letter-spacing: -0.015em;
  margin: 0 0 12px; color: var(--bf-gray-dark);
}
.bf-scenario__text  { margin: 0 0 20px; color: var(--bf-gray-80); font-size: 15px; line-height: 1.6; }
.bf-scenario__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-scenario__pill {
  font-size: 12px; font-weight: 600;
  padding: 5px 11px;
  background: var(--bf-beige-light);
  color: var(--bf-green-dark-1);
  border-radius: var(--radius-pill);
}
@media (max-width: 540px) { .bf-scenarios__grid { grid-template-columns: 1fr; } }

/* ========== Proof ========== */
.bf-proof__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; padding: 40px 32px;
  background: linear-gradient(135deg, var(--bf-gray-dark) 0%, var(--bf-green-dark-1) 100%);
  border-radius: var(--radius-xl); color: var(--bf-white);
}
.bf-stat { padding: 0 18px; border-right: 1px solid rgba(255,255,255,0.15); text-align: center; }
.bf-stat:last-child { border-right: 0; }
.bf-stat__num {
  font-family: 'DM Serif Display', serif; font-size: clamp(36px,4vw,56px);
  line-height: 1; letter-spacing: -0.02em; margin-bottom: 8px;
}
.bf-stat__num em { font-style: normal; color: var(--bf-turquoise-40); }
.bf-stat__label { font-size: 13px; opacity: 0.8; }
.bf-proof__logos { display: flex; gap: 50px; justify-content: center; flex-wrap: wrap; margin-top: 56px; opacity: 0.5; }
.bf-proof__logo  {
  font-weight: 700; font-size: 18px; color: var(--bf-gray-60);
  font-family: 'DM Serif Display', serif;
}
.bf-proof__award {
  display: flex; align-items: center; gap: 12px; margin: 32px auto 0;
  padding: 12px 22px; background: var(--bf-white); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md); font-size: 14px; font-weight: 600; color: var(--bf-green-dark-1);
  width: fit-content;
}
.bf-proof__award-icon {
  width: 36px; height: 36px; background: linear-gradient(135deg, var(--bf-yellow), var(--bf-orange));
  border-radius: 50%; display: grid; place-items: center; color: var(--bf-white); font-size: 16px;
}

@media (max-width: 768px) {
  .bf-proof__stats { grid-template-columns: repeat(2, 1fr); padding: 32px 24px; }
  .bf-stat { border-right: 0; padding: 16px 0; }
  .bf-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.15); }
}
@media (max-width: 480px) {
  .bf-proof__stats { grid-template-columns: 1fr; gap: 24px; }
  .bf-stat { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 24px; }
  .bf-stat:last-child { border-bottom: 0; }
}

/* ========== Founders ========== */
.bf-founders__inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 900px) {
  .bf-founders__inner { grid-template-columns: 1fr; gap: 40px; }
}
.bf-founders__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.bf-founder-card {
  background: var(--bf-white); border-radius: var(--radius-lg);
  padding: 24px 22px; text-align: center; box-shadow: var(--shadow-sm);
  transition: all 0.25s var(--ease);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  /* Stretcht durch align-items: stretch im Parent + flex column hier. */
}
.bf-founder-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* User-Feedback: Karten sollen gleich hoch sein — Offset entfernen. */
.bf-founder__avatar {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--bf-turquoise), var(--bf-green));
  display: grid; place-items: center; color: var(--bf-white);
  font-family: 'DM Serif Display', serif; font-size: 36px;
}
.bf-founder-card:nth-child(2) .bf-founder__avatar {
  background: linear-gradient(135deg, var(--bf-pink), var(--bf-orange));
}
.bf-founder__name { font-weight: 700; font-size: 16px; margin-bottom: 2px; }
.bf-founder__role { font-size: 13px; color: var(--bf-gray-60); line-height: 1.4; }

/* ========== Founder Big ========== */
.bf-founder-big__avatar {
  width: 180px; height: 180px; border-radius: 50%;
  background: linear-gradient(135deg, var(--bf-turquoise), var(--bf-green));
  color: var(--bf-white); font-family: 'DM Serif Display', serif;
  font-size: 64px; display: grid; place-items: center; margin-bottom: 28px;
  box-shadow: var(--shadow-md);
}
.bf-founder-big__credentials { display: flex; flex-direction: column; gap: 14px; }
.bf-founder-big__credential {
  background: var(--bf-white); padding: 14px 18px; border-radius: var(--radius-md);
  display: flex; align-items: baseline; gap: 12px; box-shadow: var(--shadow-sm);
}
.bf-founder-big__credential strong {
  font-family: 'DM Serif Display', serif; font-size: 24px;
  color: var(--bf-green-dark-1); font-weight: 400;
}
.bf-founder-big__credential span { color: var(--bf-gray-80); font-size: 14px; }

/* ========== Origin / Timeline ========== */
.bf-origin__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.bf-origin__grid.wp-block-columns { gap: 80px; }
@media (max-width: 900px) {
  .bf-origin__grid { grid-template-columns: 1fr; gap: 40px; }
}
.bf-origin__steps {
  list-style: none; padding: 0; margin: 0;
  position: relative;
}
.bf-origin__steps::before {
  content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px;
  width: 2px;
  /* Vertikaler Verlauf pink → orange → grün → türkis (oben nach unten). */
  background: linear-gradient(180deg,
    var(--bf-pink) 0%,
    var(--bf-orange) 38%,
    var(--bf-green) 70%,
    var(--bf-turquoise) 100%);
}
.bf-origin__step {
  position: relative; padding-left: 36px; padding-bottom: 28px;
}
/* Hohle Ring-Dots — weiße Mitte, farbiger Rand pro Schritt. */
.bf-origin__step::before {
  content: ''; position: absolute; left: 2px; top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bf-white);
  border: 2.5px solid var(--bf-turquoise);
  box-sizing: border-box;
}
.bf-origin__step:nth-child(1)::before { border-color: var(--bf-pink); }
.bf-origin__step:nth-child(2)::before { border-color: var(--bf-orange); }
.bf-origin__step:nth-child(3)::before { border-color: var(--bf-green); }
.bf-origin__step:nth-child(4)::before { border-color: var(--bf-turquoise); }
.bf-origin__step-year {
  font-family: 'DM Serif Display', serif; font-size: 24px;
  color: var(--bf-green-dark-1); margin-bottom: 4px;
}
.bf-origin__step-title { font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.bf-origin__step-text  { margin: 0; color: var(--bf-gray-80); line-height: 1.55; }

/* ========== Authoring Blocks ========== */
.bf-authoring__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
}
.bf-authoring__grid.wp-block-columns { gap: 60px; align-items: start; }
@media (max-width: 1100px) {
  .bf-authoring__grid { grid-template-columns: 1fr; gap: 48px; }
}
/* 14 Bausteine als 2-spaltige Liste (Icon links, Title + Description rechts). */
.bf-authoring__blocks {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (max-width: 700px) {
  .bf-authoring__blocks { grid-template-columns: 1fr; }
}
.bf-ab {
  --ab-bg:    var(--bf-turquoise-20);
  --ab-color: var(--bf-green-dark-1);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: center;
  background: var(--bf-white);
  border: 1px solid rgba(212, 214, 215, .45);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease);
}
.bf-ab:hover { transform: translateY(-1px); border-color: var(--bf-gray-20); }
.bf-ab__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--ab-bg);
  color: var(--ab-color);
  display: grid; place-items: center; font-size: 22px;
}
.bf-ab__icon i { line-height: 1; }
.bf-ab__copy { min-width: 0; }
.bf-ab__name {
  font-size: 14.5px; font-weight: 700; color: var(--bf-gray-dark);
  line-height: 1.25; margin-bottom: 4px;
}
.bf-ab__desc {
  font-size: 13px; line-height: 1.45; color: var(--bf-gray-60);
}

/* 14 Soft-Pastell-Farbvarianten — Background als solide helle Pastellfarbe,
 * Icon-Farbe deutlich kräftiger (matched dem Screenshot). */
.bf-ab--text        { --ab-bg: #EEEFFC; --ab-color: #6366F1; } /* indigo */
.bf-ab--quiz        { --ab-bg: #FCE4E6; --ab-color: #EF4444; } /* rot   */
.bf-ab--reflexion   { --ab-bg: #FCE6D5; --ab-color: #F97316; } /* peach */
.bf-ab--zuordnung   { --ab-bg: #EFE5FC; --ab-color: #A855F7; } /* lila  */
.bf-ab--szenario    { --ab-bg: #D6F3E5; --ab-color: #10B981; } /* mint  */
.bf-ab--lueckentext { --ab-bg: #DAF1F4; --ab-color: #0EA5BE; } /* cyan  */
.bf-ab--lernkarten  { --ab-bg: #FCEAD5; --ab-color: #D97706; } /* amber */
.bf-ab--paare       { --ab-bg: #FBE0EB; --ab-color: #EC4899; } /* pink  */
.bf-ab--reihenfolge { --ab-bg: #EBE3FC; --ab-color: #8B5CF6; } /* violet*/
.bf-ab--vergleich   { --ab-bg: #DCE7F8; --ab-color: #3B82F6; } /* blue  */
.bf-ab--audio       { --ab-bg: #FCE3CB; --ab-color: #F97316; } /* orange*/
.bf-ab--video       { --ab-bg: #D8F1DD; --ab-color: #22C55E; } /* green */
.bf-ab--hotspot     { --ab-bg: #FBDEEB; --ab-color: #DB2777; } /* rose  */
.bf-ab--pdf         { --ab-bg: #EBEBEB; --ab-color: #6B7280; } /* gray  */
.bf-authoring__info {
  margin-top: 18px; padding: 14px 18px; background: var(--bf-white);
  border-radius: var(--radius-md); border: 1px solid var(--bf-gray-20);
  font-size: 13px; color: var(--bf-gray-80); display: flex; align-items: center; gap: 10px;
}
.bf-authoring__info i { color: var(--bf-green); font-size: 18px; }
.bf-authoring__info-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bf-green); color: var(--bf-white);
  display: grid; place-items: center; flex-shrink: 0; font-size: 16px;
}
.bf-authoring__info-icon i { color: var(--bf-white); font-size: 16px; }

/* ========== Compare Dark ========== */
.bf-compare__table {
  background: rgba(255,255,255,0.04); border-radius: var(--radius-lg);
  padding: 32px 38px; backdrop-filter: blur(8px);
}
.bf-compare__row {
  display: grid; grid-template-columns: 1.1fr 1fr 1.2fr;
  gap: 18px; padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bf-compare__row:last-child { border-bottom: 0; }
.bf-compare__row--head {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); font-weight: 700;
}
.bf-compare__aspect { font-weight: 600; color: var(--bf-white); }
.bf-compare__alt,
.bf-compare__brainfood {
  display: flex; align-items: flex-start; gap: 10px;
}
.bf-compare__alt    { color: rgba(255,255,255,0.55); }
.bf-compare__brainfood {
  color: var(--bf-turquoise-40); font-weight: 600;
}
.bf-compare__icon {
  flex-shrink: 0; width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  margin-top: 1px;
}
.bf-compare__icon--cross {
  background: rgba(221, 31, 90, 0.18);
  color: var(--bf-pink);
}
.bf-compare__icon--check {
  background: rgba(0, 195, 154, 0.22);
  color: var(--bf-green);
}
@media (max-width: 720px) {
  .bf-compare__row { grid-template-columns: 1fr; gap: 4px; }
  .bf-compare__row--head { display: none; }
}

/* ========== KI Spotlight ========== */
.bf-ai__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}
.bf-ai__grid.wp-block-columns { gap: 60px; align-items: center; }
@media (max-width: 900px) {
  .bf-ai__grid { grid-template-columns: 1fr; gap: 48px; }
}
.bf-ai__steps { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 18px; }
.bf-ai-step {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 18px 22px;
  background: var(--bf-beige-light);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: all 0.22s var(--ease);
}
.bf-ai-step:hover {
  background: var(--bf-white);
  box-shadow: var(--shadow-sm);
  border-color: var(--bf-turquoise-20);
  transform: translateX(4px);
}
.bf-ai-step__num {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--bf-white);
  color: var(--bf-green-dark-1);
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400; font-size: 18px;
  display: grid; place-items: center;
  border: 1px solid var(--bf-turquoise-20);
  flex-shrink: 0;
}
.bf-ai-step__title { font-weight: 700; font-size: 15.5px; margin-bottom: 4px; color: var(--bf-gray-dark); }
.bf-ai-step__desc  { margin: 0; color: var(--bf-gray-80); font-size: 14.5px; line-height: 1.5; }
/* ===== KI-Demo-Interface (Chat-Mockup im App-Stil, Loop-animiert) ===== */
.bf-ai__demo.bf-kidemo {
  background: var(--bf-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--bf-gray-20);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header */
.bf-kidemo__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--bf-gray-20);
}
.bf-kidemo__id { display: flex; align-items: center; gap: 12px; }
.bf-kidemo__avatar {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--bf-turquoise), var(--bf-green));
  color: #fff; display: grid; place-items: center; font-size: 20px; flex-shrink: 0;
}
.bf-kidemo__name { font-weight: 700; font-size: 15px; color: var(--bf-gray-dark); }
.bf-kidemo__tag  {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--bf-green-dark-1); margin-top: 1px;
}
.bf-kidemo__tag i { font-size: 13px; }
.bf-kidemo__actions { display: flex; align-items: center; gap: 7px; }
.bf-kidemo__hbtn {
  width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--bf-gray-20);
  display: grid; place-items: center; color: var(--bf-gray-60); font-size: 15px;
}

/* Body / Chat */
.bf-kidemo__body {
  padding: 20px 18px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 420px;
}

/* Bubbles — Start: unsichtbar + leicht nach unten versetzt. */
.bf-kidemo__msg {
  max-width: 88%;
  padding: 13px 16px;
  border-radius: 16px;
  font-size: 14px; line-height: 1.5;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.bf-kidemo__msg--ai {
  background: var(--bf-beige-light); color: var(--bf-gray-dark);
  align-self: flex-start; border-bottom-left-radius: 5px;
}
.bf-kidemo__msg--user {
  background: var(--bf-turquoise); color: #fff;
  align-self: flex-end; border-bottom-right-radius: 5px; font-weight: 500;
}

/* Auswertungs-Box */
.bf-kidemo__profile {
  border: 1px solid var(--bf-gray-20);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  margin-top: 4px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.bf-kidemo__profile-title { font-weight: 700; font-size: 15px; color: var(--bf-gray-dark); margin-bottom: 10px; }

/* Bubbles + Profil sichtbar, wenn .is-visible (von JS gesetzt). */
.bf-kidemo__msg.is-visible,
.bf-kidemo__profile.is-visible { opacity: 1; transform: translateY(0); }

/* Radar (div-Container, SVG wird per JS injiziert) */
.bf-kidemo__radar { display: block; width: 100%; max-width: 320px; margin: 0 auto 6px; padding: 4px 0; }
.bf-kidemo__radar svg { display: block; width: 100%; height: auto; overflow: visible; }
.bf-kidemo__radar-ring { fill: none; stroke: var(--bf-gray-20); stroke-width: 1; }
.bf-kidemo__radar-axis { stroke: var(--bf-gray-20); stroke-width: 1; }
.bf-kidemo__radar-data {
  fill: rgba(0,195,214,0.16); stroke: var(--bf-turquoise); stroke-width: 2.5;
  /* Polygon wächst aus dem Zentrum, wenn Profil sichtbar wird. */
  transform: scale(0.1); transform-origin: 140px 140px;
  transition: transform .6s var(--ease);
}
.bf-kidemo__radar-dot { fill: var(--bf-turquoise); opacity: 0; transition: opacity .3s var(--ease) .5s; }
.bf-kidemo__radar-label { font-size: 10px; fill: var(--bf-gray-60); }
.bf-kidemo__profile.is-visible .bf-kidemo__radar-data { transform: scale(1); }
.bf-kidemo__profile.is-visible .bf-kidemo__radar-dot  { opacity: 1; }

/* Balken */
.bf-kidemo__bars { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.bf-kidemo__bar-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.bf-kidemo__bar-head span    { font-size: 13px; color: var(--bf-gray-dark); }
.bf-kidemo__bar-head strong  { font-size: 13px; color: var(--bf-turquoise-dark); font-weight: 700; }
.bf-kidemo__bar-track { height: 5px; background: var(--bf-gray-20); border-radius: 3px; overflow: hidden; }
.bf-kidemo__bar-fill {
  display: block; height: 100%; width: 0;
  background: var(--c, var(--bf-orange)); border-radius: 3px;
  transition: width .9s var(--ease);
}
.bf-kidemo__profile.is-visible .bf-kidemo__bar-fill { width: var(--val); }

/* ========== Final CTA ========== */
.bf-final {
  padding-block: 110px;
  padding-inline: 32px;            /* dunkle Box hat damit immer Rand zum Viewport */
}
@media (max-width: 768px) {
  .bf-final { padding-block: 80px; padding-inline: 24px; }
}
.bf-final__inner {
  background: linear-gradient(135deg, var(--bf-gray-dark) 0%, var(--bf-green-dark-1) 100%);
  border-radius: var(--radius-xl); padding: 80px 60px;
  color: var(--bf-white); position: relative; overflow: hidden;
  max-width: 1080px; margin-inline: auto;
}
.bf-final__inner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 80% 20%, rgba(0,195,214,0.18) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(221,31,90,0.12) 0%, transparent 45%);
}
.bf-final__content {
  position: relative; max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px;
  align-items: center;
  text-align: center;
}
.bf-final__content p,
.bf-final__content h2 { text-align: center; }

/* Ghost-Button auf dunklem Final-CTA: weiße Schrift, halbtransparent.
 * Lift erbt vom .btn-Base; Shadow ist hier dunkel (auf hellem Verlauf sichtbar).
 * Spec-Maximierung über body + a-Tag + alle Klassen am Link gegen WP-Globale Styles. */
body .bf-final .btn--ghost,
body .bf-final .wp-block-button.is-style-bf-ghost > a.wp-block-button__link,
body .bf-final .wp-block-button.is-style-bf-ghost > .wp-block-button__link.wp-element-button {
  background-color: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
body .bf-final .btn--ghost:hover,
body .bf-final .wp-block-button.is-style-bf-ghost > a.wp-block-button__link:hover,
body .bf-final .wp-block-button.is-style-bf-ghost > .wp-block-button__link.wp-element-button:hover {
  background-color: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30);
}
.bf-final__title {
  font-size: clamp(38px,4vw,56px) !important; font-weight: 400; line-height: 1.05;
  letter-spacing: -0.025em; margin: 0; color: var(--bf-white);
}
.bf-final__title em { font-style: italic; color: var(--bf-turquoise-40); }
.bf-final__text { font-size: 18px; line-height: 1.55; opacity: 0.82; margin: 0; }
.bf-final__buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}

/* Theme-Color-Variante */
.bf-final--theme .bf-final__inner {
  background: linear-gradient(155deg, var(--bf-theme-from, #0B696E) 0%, var(--bf-theme-to, #00BF9A) 100%);
}

@media (max-width: 768px) {
  .bf-final { padding-block: 70px; }
  .bf-final__inner { padding: 60px 32px; }
}

/* ========== CTA-Band ========== */
.bf-cta-band {
  padding-block: 40px;
}
.bf-cta-band__inner {
  background: var(--bf-gray-dark); color: var(--bf-white);
  border-radius: var(--radius-lg); padding: 28px 36px;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  flex-wrap: wrap !important; gap: 20px;
}
.bf-cta-band__title { color: var(--bf-white) !important; margin: 0; }
.bf-cta-band__text  { color: rgba(255,255,255,0.7); margin: 4px 0 0; }

/* ========== Pricing ========== */
.bf-pricing__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch;
}
.bf-plan {
  background: var(--bf-white); border-radius: var(--radius-lg);
  padding: 36px 30px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 22px; position: relative;
  border: 1.5px solid var(--bf-gray-20);
}
.bf-plan--featured {
  border-color: var(--bf-turquoise); box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}
.bf-plan__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--bf-turquoise), var(--bf-green));
  color: var(--bf-white); padding: 6px 16px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.bf-plan__sub {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bf-green-dark-1); font-weight: 700; margin-bottom: 6px;
}
.bf-plan__name { margin: 0; font-size: 24px; }
.bf-plan__desc { margin: 6px 0 0; color: var(--bf-gray-80); font-size: 14.5px; line-height: 1.55; }
.bf-plan__price { border-top: 1px solid var(--bf-gray-20); border-bottom: 1px solid var(--bf-gray-20); padding: 18px 0; }
.bf-plan__price-row { display: flex; align-items: baseline; gap: 8px; }
.bf-plan__price-num {
  font-family: 'DM Serif Display', serif; font-size: 38px; line-height: 1;
  color: var(--bf-gray-dark);
}
.bf-plan__price-unit { font-size: 13px; color: var(--bf-gray-60); }
.bf-plan__price-meta { margin-top: 6px; font-size: 12px; color: var(--bf-gray-60); }
/* .bf-plan__features Styles liegen in preise.css — patterns.css darf hier nicht
 * mit-definieren, sonst mergen Pseudo-Element-Properties (padding-left +
 * position:absolute vs flex-mask-icon) zu einem kaputten Layout. */
.bf-plan__cta-primary {
  background: var(--bf-gray-dark); color: var(--bf-white);
  text-align: center; padding: 14px 24px; border-radius: var(--radius-pill);
  font-weight: 600; text-decoration: none; transition: all 0.22s var(--ease);
}
.bf-plan--featured .bf-plan__cta-primary { background: var(--bf-turquoise); }
.bf-plan__cta-primary:hover {
  background: var(--bf-green-dark-1); color: var(--bf-white); transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(11,105,110,0.2);
}
.bf-pricing__note {
  margin-top: 28px; text-align: center; font-size: 13px; color: var(--bf-gray-60);
}
@media (max-width: 1024px) { .bf-pricing__grid { grid-template-columns: 1fr; } .bf-plan--featured { transform: none; } }

/* ========== Add-ons ========== */
.bf-addons__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.bf-addon {
  background: var(--bf-white); border-radius: var(--radius-md);
  padding: 22px 24px; display: grid; grid-template-columns: 48px 1fr auto;
  gap: 16px; align-items: center; box-shadow: var(--shadow-sm);
}
.bf-addon__icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--bf-beige-light); color: var(--bf-green-dark-1);
  display: grid; place-items: center; font-size: 22px;
}
.bf-addon__name { font-weight: 700; font-size: 15px; }
.bf-addon__desc { color: var(--bf-gray-80); font-size: 13.5px; line-height: 1.5; margin-top: 2px; }
.bf-addon__price { text-align: right; }
.bf-addon__price-num { font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--bf-gray-dark); display: block; }
.bf-addon__price-unit { font-size: 11px; color: var(--bf-gray-60); display: block; }
@media (max-width: 720px) { .bf-addons__grid { grid-template-columns: 1fr; } }

/* ========== Included Grid ========== */
.bf-included__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 880px; margin-inline: auto;
}
.bf-included__item {
  display: flex; align-items: center; gap: 12px;
  background: var(--bf-beige-light); padding: 14px 18px; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600; color: var(--bf-gray-dark);
}
.bf-included__item i { color: var(--bf-green); font-size: 20px; }
@media (max-width: 768px) { .bf-included__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .bf-included__grid { grid-template-columns: 1fr; } }

/* ========== Services ========== */
.bf-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bf-service {
  background: var(--bf-white); border-radius: var(--radius-lg);
  padding: 30px 28px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 12px;
}
.bf-service__icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--bf-turquoise-20), var(--bf-turquoise-40));
  color: var(--bf-green-dark-1); display: grid; place-items: center; font-size: 26px;
}
.bf-service__title { margin: 0; font-size: 20px; }
.bf-service__text  { margin: 0; color: var(--bf-gray-80); font-size: 14.5px; line-height: 1.6; }
/* .bf-service__features Styles liegen in consulting.css — patterns.css darf
 * hier nicht mit-definieren, sonst mergen die Pseudo-Element-Properties zu
 * einem kaputten Layout (Bullet liegt über dem Text). */
@media (max-width: 1024px) { .bf-services__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px)  { .bf-services__grid { grid-template-columns: 1fr; } }

/* ========== Process ========== */
.bf-process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.bf-step {
  text-align: center; padding: 24px 18px;
}
.bf-step__num {
  font-family: 'DM Serif Display', serif; font-size: 56px;
  color: var(--bf-turquoise-40); line-height: 1; margin-bottom: 12px;
}
.bf-step__title { margin: 0 0 6px; font-size: 18px; }
.bf-step__text  { margin: 0; color: var(--bf-gray-80); font-size: 14px; line-height: 1.55; }
@media (max-width: 768px) { .bf-process__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .bf-process__grid { grid-template-columns: 1fr; } }

/* ========== Projects ========== */
.bf-projects__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bf-project {
  background: var(--bf-white); border-radius: var(--radius-lg);
  padding: 30px 28px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px;
}
.bf-project__tag {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bf-green-dark-1); font-weight: 700;
}
.bf-project__title { margin: 4px 0; font-size: 20px; }
.bf-project__text  { margin: 0; color: var(--bf-gray-80); line-height: 1.55; font-size: 14.5px; }
@media (max-width: 900px) { .bf-projects__grid { grid-template-columns: 1fr; } }

/* ========== Team Grid ========== */
.bf-team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bf-person {
  background: var(--bf-white); border-radius: var(--radius-lg);
  padding: 28px 24px; text-align: center; box-shadow: var(--shadow-sm);
}
.bf-person__avatar {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--bf-turquoise), var(--bf-green));
  color: var(--bf-white); font-family: 'DM Serif Display', serif;
  font-size: 32px; display: grid; place-items: center;
}
.bf-person:nth-child(2) .bf-person__avatar { background: linear-gradient(135deg, var(--bf-pink), var(--bf-orange)); }
.bf-person:nth-child(3) .bf-person__avatar { background: linear-gradient(135deg, var(--bf-yellow), var(--bf-orange)); }
.bf-person:nth-child(4) .bf-person__avatar { background: linear-gradient(135deg, var(--bf-green), var(--bf-green-dark-1)); }
.bf-person__name { font-weight: 700; font-size: 15px; }
.bf-person__role { font-size: 13px; color: var(--bf-gray-60); margin-top: 2px; }
.bf-person__tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.bf-person__tag {
  font-size: 11px; padding: 3px 10px; background: var(--bf-beige-light);
  color: var(--bf-gray-80); border-radius: var(--radius-pill);
}
@media (max-width: 1024px) { .bf-team__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px)  { .bf-team__grid { grid-template-columns: 1fr; } }

/* ========== Awards ========== */
.bf-awards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bf-award {
  background: var(--bf-white); border-radius: var(--radius-lg);
  padding: 28px 24px; box-shadow: var(--shadow-sm);
}
.bf-award__year {
  font-family: 'DM Serif Display', serif; font-size: 38px;
  color: var(--bf-yellow); line-height: 1; margin-bottom: 10px;
}
.bf-award__year em { font-style: normal; color: var(--bf-orange); }
.bf-award__title { font-weight: 700; font-size: 15px; }
.bf-award__sub   { font-size: 13.5px; color: var(--bf-gray-60); margin-top: 2px; }
@media (max-width: 900px) { .bf-awards__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .bf-awards__grid { grid-template-columns: 1fr; } }

/* ========== Locations ========== */
.bf-locations__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 880px; margin-inline: auto; }
.bf-location {
  background: var(--bf-white); border-radius: var(--radius-lg);
  padding: 32px 28px; box-shadow: var(--shadow-sm);
}
.bf-location__city { margin: 0 0 6px; font-size: 28px; }
.bf-location__tag {
  display: inline-block; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bf-green-dark-1);
  background: var(--bf-turquoise-20); padding: 4px 10px;
  border-radius: var(--radius-pill); margin-bottom: 14px;
}
.bf-location__address { color: var(--bf-gray-80); margin: 0 0 14px; line-height: 1.55; }
.bf-location__contact { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; font-size: 14px; }
.bf-location__contact dt { color: var(--bf-gray-60); font-weight: 600; }
.bf-location__contact dd { margin: 0; color: var(--bf-gray-dark); }
@media (max-width: 720px) { .bf-locations__grid { grid-template-columns: 1fr; } }

/* ========== Page-Hero (.bf-ph) Generic ==========
 * .bf-ph wird auf 5 Pages genutzt (plattform, inhalte, consulting, preise,
 * ueber-uns). Plattform.css lädt aber nur auf der Plattform-Page — daher
 * gehören die generic bf-ph__*-Styles hier in patterns.css.
 * Plattform-spezifische Overrides (Background-Effekte etc.) bleiben in
 * plattform.css mit höherer Spec via .bf-ph--plattform oder ähnlich. */
.bf-ph__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
}
.bf-ph__eyebrow {
  display: inline-block;
  color: var(--bf-pink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.bf-ph__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(40px, 5vw, 64px) !important;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--bf-green-dark-1);
  margin: 0 0 24px;
  max-width: 900px;
}
.bf-ph__title em { font-style: italic; color: var(--bf-pink); font-weight: 400; }
.bf-ph__lead {
  font-size: 20px;
  line-height: 1.55;
  color: var(--bf-gray-80);
  max-width: 720px;
  margin: 0 0 36px;
}
.bf-ph__ctas { display: flex; gap: 20px; flex-wrap: wrap; }

/* Zentrierte Hero-Variante (z.B. Glossar-Seite). */
.bf-ph--center { text-align: center; padding-block: 32px 0; }
.bf-ph--center .bf-ph__inner { max-width: 760px; margin: 0 auto; }
.bf-ph--center .bf-ph__lead { margin: 0 auto; }
.bf-ph--center .bf-ph__title { color: var(--bf-gray-dark); }
.bf-ph--center .bf-ph__title em { color: var(--bf-turquoise-dark); }

/* Ghost-Button Override für alle .bf-ph Hero-Varianten — dunkel-gefüllt mit weißer Schrift. */
body .bf-ph .btn--ghost,
body .bf-ph .wp-block-button.is-style-bf-ghost > a.wp-block-button__link,
body .bf-ph .wp-block-button.is-style-bf-ghost > .wp-block-button__link.wp-element-button {
  background-color: #263237 !important;
  color: #ffffff !important;
  border-color: #263237 !important;
}
body .bf-ph .btn--ghost:hover,
body .bf-ph .wp-block-button.is-style-bf-ghost > a.wp-block-button__link:hover,
body .bf-ph .wp-block-button.is-style-bf-ghost > .wp-block-button__link.wp-element-button:hover {
  background-color: #0B696E !important;
  border-color: #0B696E !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(11, 105, 110, 0.28);
}

/* ========== Ways (Drei Bezugswege) ========== */
.bf-ways__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bf-way {
  position: relative;
  background: var(--bf-white); border-radius: var(--radius-lg);
  padding: 36px 32px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--bf-gray-20);
  display: flex; flex-direction: column; gap: 12px;
}
/* 01/02/03 — groß, hellgrau, rechts oben in der Kachel.
 * Aligned mit Icon: card-padding 36px oben, icon top:36px (height 52). Number
 * top:36px (statt 24 wie im Design) damit die Top-Edges sauber ausgerichtet sind.
 * font-size:52 (statt 60) damit auch die Unter-Edges aufeinander liegen. */
.bf-way__num {
  position: absolute;
  top: 36px;
  right: 32px;
  font-family: 'DM Serif Display', serif;
  font-size: 52px;
  line-height: 1;
  color: var(--bf-gray-20);
  letter-spacing: -0.02em;
  pointer-events: none;
}
.bf-way__icon {
  width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(135deg, var(--bf-turquoise), var(--bf-green));
  color: var(--bf-white); display: grid; place-items: center; font-size: 24px;
  position: relative; z-index: 1;
  margin-bottom: 20px;
}
.bf-way--scorm  .bf-way__icon { background: linear-gradient(135deg, var(--bf-green-dark-1), var(--bf-turquoise-dark)); color: var(--bf-white); }
.bf-way--custom .bf-way__icon { background: linear-gradient(135deg, var(--bf-pink), var(--bf-orange)); color: var(--bf-white); }
.bf-way__title { margin: 0; font-size: 20px; }
.bf-way__text  { margin: 0; color: var(--bf-gray-80); font-size: 14.5px; line-height: 1.55; }
.bf-way__features { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.bf-way__features li {
  padding: 6px 0;
  font-size: 13.5px;
  color: var(--bf-gray-80);
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Check-Icon als CSS-Mask (analog Design) — keine padding-left/absolute mehr,
 * damit das Icon NEBEN dem Text steht und nicht von ihm überlagert wird. */
.bf-way__features li::before {
  content: '';
  width: 14px; height: 14px;
  background-color: var(--bf-green);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  flex-shrink: 0;
}
.bf-way__cta { margin-top: auto; color: var(--bf-green-dark-1); font-weight: 600; text-decoration: none; }
.bf-way__cta:hover { color: var(--bf-green); }
@media (max-width: 1024px) { .bf-ways__grid { grid-template-columns: 1fr; } }

/* ========== Microtraining-Anatomy ========== */
.bf-anatomy__steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
}
.bf-anatomy__steps > li {
  background: var(--bf-white); border-radius: var(--radius-md);
  padding: 22px 18px; box-shadow: var(--shadow-sm);
}
.bf-anatomy__num {
  display: inline-block; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--bf-turquoise), var(--bf-green));
  color: var(--bf-white); display: grid; place-items: center;
  font-family: 'DM Serif Display', serif; font-size: 16px; margin-bottom: 10px;
}
.bf-anatomy__title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.bf-anatomy__steps p { margin: 0; color: var(--bf-gray-80); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 1024px) { .bf-anatomy__steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .bf-anatomy__steps { grid-template-columns: 1fr; } }

/* ========== Skills Grid ========== */
.bf-skills__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bf-skill-card {
  background: var(--bf-white); border-radius: var(--radius-md);
  padding: 22px 20px; box-shadow: var(--shadow-sm);
}
.bf-skill-card__num {
  font-family: 'DM Serif Display', serif; font-size: 22px;
  color: var(--bf-turquoise-40); margin-bottom: 8px;
}
.bf-skill-card__name { margin: 0 0 6px; font-size: 16px; }
.bf-skill-card__text { margin: 0; color: var(--bf-gray-80); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 1024px) { .bf-skills__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px)  { .bf-skills__grid { grid-template-columns: 1fr; } }

/* ========== Learning Paths ========== */
.bf-paths__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bf-path {
  background: var(--bf-white); border-radius: var(--radius-lg);
  padding: 28px 24px; box-shadow: var(--shadow-sm);
}
.bf-path__level {
  display: inline-block; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bf-green-dark-1);
  background: var(--bf-turquoise-20); padding: 4px 10px;
  border-radius: var(--radius-pill); margin-bottom: 12px;
}
.bf-path__name { margin: 0 0 8px; font-size: 20px; }
.bf-path__text { margin: 0; color: var(--bf-gray-80); font-size: 14.5px; line-height: 1.55; }
.bf-path__meta { margin-top: 14px; font-size: 12px; color: var(--bf-gray-60); }
@media (max-width: 1024px) { .bf-paths__grid { grid-template-columns: 1fr; } }

/* ========== Courses Grid ========== */
.bf-courses__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bf-course-card {
  background: var(--bf-white); border-radius: var(--radius-md);
  padding: 22px 20px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px;
}
.bf-course-card__meta { display: flex; justify-content: space-between; align-items: center; }
.bf-course-card__level {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bf-green-dark-1); font-weight: 700;
}
.bf-course-card__time { font-size: 12px; color: var(--bf-gray-60); }
.bf-course-card__title { margin: 0; font-size: 16px; }
.bf-course-card__text  { margin: 0; color: var(--bf-gray-80); font-size: 13.5px; line-height: 1.5; }
.bf-course-card__cta {
  margin-top: auto; color: var(--bf-green-dark-1); font-weight: 600;
  text-decoration: none; font-size: 13.5px;
}
@media (max-width: 1024px) { .bf-courses__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px)  { .bf-courses__grid { grid-template-columns: 1fr; } }

/* ========== Skill-Radar Demo (dark) ========== */
.bf-radar__demo {
  max-width: 720px; margin-inline: auto; margin-top: 32px;
  background: rgba(255,255,255,0.04); border-radius: var(--radius-lg);
  padding: 32px; backdrop-filter: blur(8px);
}
.bf-radar__bars { display: flex; flex-direction: column; gap: 14px; }
.bf-radar__bar { display: grid; grid-template-columns: 1fr 200px; gap: 12px; align-items: center; }
.bf-radar__bar-label { font-size: 14px; color: rgba(255,255,255,0.78); }
.bf-radar__bar-track { height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.bf-radar__bar-fill  { height: 100%; background: linear-gradient(90deg, var(--bf-turquoise), var(--bf-green)); border-radius: 4px; }
@media (max-width: 540px) {
  .bf-radar__bar { grid-template-columns: 1fr; gap: 4px; }
  .bf-radar__bar-track { width: 100%; }
}

/* ============================================================
 * 1:1-Korrekturen aus Vorlage (brainfood-startseite.html)
 * Status-Quo, Topics-Head, Topic-Card-Geometrie, Origin-Hintergrund,
 * Authoring-Info, KI-Bar mit %-Spalte.
 * ============================================================ */

/* ----- Status-Quo (Problem-Karten, 4 Spalten) ----- */
.bf-problem__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.bf-problem-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 28px 26px;
  border: 1px solid rgba(212,214,215,0.5);
  transition: all 0.25s var(--ease);
}
.bf-problem-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--bf-turquoise-40);
}
.bf-problem-card__icon {
  width: 44px; height: 44px;
  background: var(--bf-beige-light);
  border-radius: 14px;
  display: grid; place-items: center;
  color: var(--bf-pink);
  margin-bottom: 18px;
}
.bf-problem-card__title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 8px;
  color: var(--bf-gray-dark);
  letter-spacing: 0;
  line-height: 1.3;
}
.bf-problem-card__text {
  font-size: 14.5px; line-height: 1.55;
  color: var(--bf-gray-80); margin: 0;
}
@media (max-width: 1024px) { .bf-problem__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .bf-problem__grid { grid-template-columns: 1fr; } }

/* ----- Topics-Head (zwei Spalten links/rechts) + Bridge ----- */
.bf-topics__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 56px;
  text-align: left;
}
.bf-topics__head h2 { margin: 0; }
.bf-topics__head-text {
  font-size: 17px; color: var(--bf-gray-80);
  line-height: 1.6; margin: 0;
}
@media (max-width: 1024px) {
  .bf-topics__head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
}

.bf-topics__bridge {
  margin: 32px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--bf-gray-60);
}
.bf-topics__bridge a {
  color: var(--bf-green-dark-1);
  font-weight: 600;
  border-bottom: 1.5px solid var(--bf-turquoise);
  text-decoration: none;
}

/* ----- Topic-Card: aspect 5/4, justify-between, „Demo ansehen"-Link ----- */
.bf-topic {
  position: relative;
  padding: 32px 28px !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #fff;
  aspect-ratio: 5 / 4;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between !important;
  text-decoration: none;
  transition: transform 0.3s var(--ease);
  min-height: 0 !important;
  gap: 0 !important;
}
.bf-topic:hover { transform: translateY(-4px); color: #fff; }
.bf-topic--lead    { background: linear-gradient(155deg, var(--bf-green-dark-1) 0%, var(--bf-green) 100%); }
.bf-topic--sell    { background: linear-gradient(155deg, var(--bf-pink) 0%, var(--bf-orange) 100%); }
.bf-topic--talk    { background: linear-gradient(155deg, var(--bf-turquoise-dark) 0%, var(--bf-turquoise) 100%); }
.bf-topic--act     { background: linear-gradient(155deg, var(--bf-green-dark-2) 0%, var(--bf-green-dark-1) 100%); }
.bf-topic--develop { background: linear-gradient(155deg, var(--bf-orange) 0%, var(--bf-yellow) 100%); }
.bf-topic--feel    { background: linear-gradient(155deg, var(--bf-yellow) 0%, var(--bf-orange) 100%); }

.bf-topic__short {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: rgba(255,255,255,0.96);
  font-weight: 400;
}
.bf-topic__short span { color: rgba(255,255,255,0.6); }
.bf-topic__body { display: flex; flex-direction: column; gap: 8px; }
.bf-topic__name { font-weight: 700; font-size: 17px; }
.bf-topic__desc { font-size: 13.5px; opacity: 0.9; line-height: 1.55; }
.bf-topic__demo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 13px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  color: #fff;
  transition: background 0.18s var(--ease);
  width: fit-content;
}
.bf-topic:hover .bf-topic__demo,
.bf-topic__demo:hover { background: rgba(255, 255, 255, 0.3); }

/* ----- Origin: Linear-Verlauf weiß → beige-light ----- */
.bf-origin {
  background: linear-gradient(180deg, #fff 0%, var(--bf-beige-light) 100%);
}

/* ----- Authoring-Info-Banner (überarbeitet) ----- */
.bf-authoring__info {
  margin-top: 24px;
  padding: 18px 22px;
  background: var(--bf-white);
  border-radius: var(--radius-md);
  display: flex; gap: 14px; align-items: center;
  border: 1px solid var(--bf-turquoise-20);
}
.bf-authoring__info-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--bf-pink), var(--bf-orange));
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--bf-white);
}
.bf-authoring__info-text {
  font-size: 13px; color: var(--bf-gray-80); line-height: 1.45;
}
.bf-authoring__info-text strong {
  color: var(--bf-green-dark-1);
  font-size: 13.5px;
}

/* ----- KI-Bar: drei Spalten Label/Track/% ----- */
.bf-ai__bar {
  display: grid;
  grid-template-columns: 1fr 1fr 40px;
  gap: 12px;
  align-items: center;
  font-size: 12px;
}
.bf-ai__bar-pct {
  text-align: right; font-weight: 600; color: var(--bf-gray-dark);
}

/* ----- Proof: zentriert ausrichten ----- */
.bf-proof { text-align: center; }
.bf-proof .bf-section-head { text-align: center; }

/* ============================================================================
 * Mobile-Optimierungen (Smartphone-Slider mit Scroll-Snap)
 * ============================================================================ */

/* ----- Standbeine: Smartphone als Slider (Scroll-Snap) ----- */
@media (max-width: 600px) {
  .bf-pillars__grid {
    display: flex !important;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: -24px;
    padding-inline: 24px;
    gap: 16px;
  }
  .bf-pillars__grid::-webkit-scrollbar { display: none; }
  .bf-pillar {
    flex: 0 0 88%;
    scroll-snap-align: center;
    min-height: auto;
  }
}

/* ----- Themen-Kacheln: Smartphone als Slider mit halber Nachbar-Kachel ----- */
@media (max-width: 768px) {
  .bf-topics__grid {
    display: flex !important;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: -24px;
    padding-inline: 24px;
    padding-bottom: 8px;
    gap: 16px;
  }
  .bf-topics__grid::-webkit-scrollbar { display: none; }
  .bf-topic {
    flex: 0 0 72%; /* 72% sichtbar → ~28% der nächsten Kachel als „Peek". */
    scroll-snap-align: start;
    min-height: 280px;
    display: flex;
    flex-direction: column;
  }
  .bf-topic__body { flex-grow: 1; }
}

/* ----- Scenarios: Tablet 2 gleichbreite Spalten, Smartphone untereinander ----- */
.bf-scenarios__grid {
  /* sicherstellen dass auf Tablet beide Kacheln gleich breit sind */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 600px) {
  .bf-scenarios__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ===================== Kontaktformular ([bf_contact_form]) ===================== */
.bf-contact-form { max-width: 640px; margin: 0 auto; }
.bf-contact-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bf-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bf-contact-form__field { display: block; margin-bottom: 18px; }
.bf-contact-form__field > span { display: block; font-size: 14px; font-weight: 600; color: var(--bf-gray-dark); margin-bottom: 7px; }
.bf-contact-form__field input,
.bf-contact-form__field textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--bf-gray-20); border-radius: var(--radius-md, 16px);
  font: inherit; color: var(--bf-gray-dark); background: #fff; outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.bf-contact-form__field input:focus,
.bf-contact-form__field textarea:focus { border-color: var(--bf-turquoise); box-shadow: 0 0 0 4px rgba(0,195,214,.14); }
.bf-contact-form__field textarea { resize: vertical; }
.bf-contact-form__consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 22px; font-size: 14px; color: var(--bf-gray-80); line-height: 1.5; }
.bf-contact-form__consent input { margin-top: 3px; flex-shrink: 0; }
.bf-contact-form__submit { border: 0; cursor: pointer; }
.bf-contact-form__hint { font-size: 12.5px; color: var(--bf-gray-60); margin-top: 14px; }
.bf-contact-form__notice { padding: 14px 18px; border-radius: var(--radius-md, 16px); margin-bottom: 22px; font-size: 15px; }
.bf-contact-form__notice--ok { background: var(--bf-turquoise-20); color: var(--bf-green-dark-1); }
.bf-contact-form__notice--err { background: rgba(221,31,90,.1); color: var(--bf-pink); }
@media (max-width: 600px) { .bf-contact-form__row { grid-template-columns: 1fr; gap: 0; } }

/* LMS-Kurskatalog: Karten-Titel in der Theme-Display-Schrift (wie die übrigen Cards).
 * Höhere Spezifität als das Plugin-`.lms-catalog-view *`-Font-Reset. */
.lms-catalog-view .lms-card__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}