/* ============================================================
   Bildfunk — Branchenseiten-Template (Pilot: Gesundheit & Pflege)
   Foundation = tokens (colors_and_type.css) + components.css +
   website.css (Header, Kicker, Signalweg, Kontakt, Footer, Reveal).
   This file adds ONLY the branch-page section layouts — each
   section family gets its own pattern (anti-repetition rule),
   none copied from the homepage catalog.
   ============================================================ */

/* ------------------------------------------------------------
   B1 — Branchen-Hero · split panel: navy copy + image placeholder
   (deliberately NOT the 100vh full-bleed homepage hero)
   ------------------------------------------------------------ */
.bfb-hero { background: var(--bf-dark); color: #fff; position: relative; overflow: hidden; }
/* Grid bleibt wie im Master zentriert (max-width/auto) — Copy-Spalte auf der .bf-wrap-
   Flucht. Copy behält Master-Breite (fr-Äquivalent 0.54·maxw als Minimum, wächst per
   min-content für lange Headline-Wörter); Bildspalte (1fr) füllt bis zur Container-Kante.
   Das Full-bleed nach rechts macht das Bildpanel selbst (margin-right, s. .bfb-hero-figure). */
.bfb-hero-grid { max-width: var(--bf-maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(calc(var(--bf-maxw) * 0.54), min-content) minmax(0, 1fr); min-height: 640px; }
.bfb-hero-copy { padding: 120px 64px 80px calc(40px + var(--bf-rail)); display: flex; flex-direction: column; justify-content: center; }
.bfb-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--bf-font-mono); font-size: 12px; letter-spacing: 0.04em; color: #7E94B5; margin: 0 0 30px; }
.bfb-crumbs a { color: #9DB8DD; text-decoration: none; }
.bfb-crumbs a:hover { color: #fff; text-decoration: none; }
.bfb-crumbs .bfb-crumb-sep { color: rgba(255,255,255,0.3); }
.bfb-crumbs .bfb-crumb-here { color: #E4EAF2; }
.bfb-hero-copy .bf-kicker { margin-bottom: 20px; }
.bfb-hero-h1 { font-size: clamp(36px, 4.4vw, 56px); font-weight: 700; line-height: 1.06; letter-spacing: -0.028em; margin: 0 0 20px; color: #fff; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.bfb-hero-lead { font-size: 18px; line-height: 1.65; color: #C7D4E6; max-width: 560px; margin: 0 0 34px; text-wrap: pretty; }
.bfb-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* Bildpanel randlos bis zur rechten Viewport-Kante: überzieht die rechte Container-Marge
   nach rechts. <=1080px stapelt der Master (margin-right rechnet auf 0); .bfb-hero kappt. */
.bfb-hero-figure { position: relative; background: #06203F; border-left: 1px solid rgba(255,255,255,0.10); min-height: 420px; margin-right: calc(-1 * max(0px, (100vw - var(--bf-maxw)) / 2)); }

/* marked image placeholder (reusable) */
.bfb-ph { position: absolute; inset: 24px; border: 1.5px dashed rgba(157,184,221,0.45); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 32px; color: #8FA8CC; font-size: 13px; line-height: 1.6; }
.bfb-ph-tag { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #9DB8DD; display: inline-flex; align-items: center; gap: 8px; }
.bfb-ph-tag::before { content: ""; width: 7px; height: 7px; background: var(--bf-orange); transform: rotate(45deg); }

/* ------------------------------------------------------------
   B2 — Herausforderung · editorial copy + numbered requirement list
   ------------------------------------------------------------ */
.bfb-need { background: #fff; padding: 104px 0; }
.bfb-need-grid { display: grid; grid-template-columns: 1fr 0.94fr; gap: 80px; align-items: start; }
.bfb-need-copy .bf-h2 { margin: 18px 0 22px; }
.bfb-need-body { font-size: 17px; line-height: 1.75; color: var(--bf-text); margin: 0; max-width: 560px; text-wrap: pretty; }
.bfb-need-list { border-top: 1px solid var(--bf-border); margin-top: 8px; }
.bfb-req { display: grid; grid-template-columns: 44px 1fr; gap: 22px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--bf-border); }
.bfb-req-ico { color: var(--bf-blue); display: flex; }
.bfb-req-n { font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-orange-800); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.bfb-req-n::before { content: ""; width: 6px; height: 6px; background: var(--bf-orange); transform: rotate(45deg); }
.bfb-req-t { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--bf-text); line-height: 1.4; }

/* ------------------------------------------------------------
   B3 — Passende Gewerke · horizontale Gewerk-Karten (Icon links,
   Norm-Meta, Arrow-Link) + „Ergänzend“-Streifen
   ------------------------------------------------------------ */
.bfb-gewerke { background: var(--bf-surface); padding: 104px 0; }
.bfb-gewerke-head { max-width: 720px; margin-bottom: 48px; }
.bfb-gewerke-head .bf-h2 { margin: 18px 0 14px; }
.bfb-gewerke-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.bfb-gw { display: grid; grid-template-columns: 48px 1fr; gap: 22px; padding: 32px; background: #fff; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-xl); text-decoration: none; align-items: start; position: relative; transition: border-color var(--bf-dur-base) var(--bf-ease-standard), box-shadow var(--bf-dur-base) var(--bf-ease-standard), transform var(--bf-dur-base) var(--bf-ease-standard); }
.bfb-gw:hover { border-color: var(--bf-border-strong); box-shadow: var(--bf-shadow-md); transform: translateY(-3px); text-decoration: none; }
.bfb-gw-ico { color: var(--bf-blue); display: flex; padding-top: 2px; }
.bfb-gw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.bfb-gw-title { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--bf-text); margin: 0; line-height: 1.25; }
.bfb-gw-norm { font-family: var(--bf-font-mono); font-size: 11px; color: var(--bf-text-muted); white-space: nowrap; flex-shrink: 0; }
.bfb-gw-body { font-size: 15px; line-height: 1.6; color: var(--bf-text-muted); margin: 0 0 18px; }
.bfb-gw .bf-arrow-link { font-size: 14px; }
.bfb-gw:hover .bf-arrow-link svg { transform: translateX(4px); }
.bfb-gewerke-plus { margin-top: 20px; display: flex; align-items: center; gap: 24px; padding: 24px 32px; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-xl); background: #fff; }
.bfb-gewerke-plus-icons { display: flex; gap: 14px; flex-shrink: 0; color: var(--bf-blue); }
.bfb-gewerke-plus-txt { font-size: 15px; line-height: 1.6; color: var(--bf-text); margin: 0; }
.bfb-gewerke-plus-txt .bfb-plus-k { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-text-muted); display: block; margin-bottom: 4px; }

/* ------------------------------------------------------------
   B4 — Referenz der Branche · dunkle Editorial-Zeilen (keine Karten)
   ------------------------------------------------------------ */
.bfb-refs { background: var(--bf-dark); color: #fff; padding: 104px 0; }
.bfb-refs-head { max-width: 720px; margin-bottom: 40px; }
.bfb-refs-head .bf-h2 { margin: 18px 0 16px; }
.bfb-refs-lead { font-size: 18px; line-height: 1.6; color: #C7D4E6; margin: 0; text-wrap: pretty; }
.bfb-ref { display: grid; grid-template-columns: 230px 1fr auto; gap: 36px; padding: 34px 0; border-top: 1px solid rgba(255,255,255,0.14); align-items: start; }
.bfb-ref:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.14); }
.bfb-ref-sector { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-orange-600); padding-top: 6px; display: flex; flex-direction: column; gap: 10px; }
.bfb-ref-title { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: #fff; margin: 0 0 8px; }
.bfb-ref-scope { font-size: 15px; line-height: 1.6; color: #C7D4E6; margin: 0; max-width: 560px; }
.bfb-ref-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 4px; }
.bfb-ref-tag { font-family: var(--bf-font-mono); font-size: 11px; color: #BCD0EA; background: rgba(255,255,255,0.06); border-radius: var(--bf-radius-sm); padding: 4px 9px; white-space: nowrap; }
.bfb-ref-phflag { font-family: var(--bf-font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: #9DB8DD; border: 1px dashed rgba(157,184,221,0.5); border-radius: 5px; padding: 4px 8px; align-self: flex-start; }
.bfb-refs-note { font-family: var(--bf-font-mono); font-size: 12px; color: #8FA8CC; margin: 26px 0 0; }

/* ------------------------------------------------------------
   B5 — Service & Wartung · Text + Leistungsumfang-Panel
   ------------------------------------------------------------ */
.bfb-service { background: #fff; padding: 104px 0; }
.bfb-service-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 80px; align-items: start; }
.bfb-service-copy .bf-h2 { margin: 18px 0 20px; }
.bfb-service-body { font-size: 17px; line-height: 1.75; color: var(--bf-text); margin: 0 0 18px; max-width: 560px; text-wrap: pretty; }
.bfb-service-247 { display: inline-flex; align-items: center; gap: 10px; font-family: var(--bf-font-mono); font-size: 13px; color: var(--bf-text-muted); margin-top: 8px; }
.bfb-service-247 svg { color: var(--bf-blue); flex-shrink: 0; }
.bfb-service-panel { border: 1px solid var(--bf-border); border-radius: var(--bf-radius-xl); box-shadow: var(--bf-shadow-sm); padding: 34px; background: #fff; }
.bfb-service-panel-k { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-text-muted); margin: 0 0 18px; }
.bfb-service-list { list-style: none; margin: 0; padding: 0; }
.bfb-service-list li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--bf-border); font-size: 15px; line-height: 1.55; color: var(--bf-text); font-weight: 500; }
.bfb-service-list li svg { flex-shrink: 0; color: var(--bf-blue); margin-top: 2px; }

/* ------------------------------------------------------------
   B6 — Normen & Zertifikate · Chips + Text (keine Tabelle)
   ------------------------------------------------------------ */
.bfb-norm { background: var(--bf-surface); padding: 96px 0; }
.bfb-norm-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-bottom: 38px; }
.bfb-norm-head .bf-h2 { margin: 18px 0 0; }
.bfb-norm-head .bf-lead { padding-top: 42px; }
.bfb-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.bfb-chip { display: inline-flex; align-items: baseline; gap: 10px; padding: 13px 18px; background: #fff; border: 1px solid var(--bf-border-strong); border-radius: 10px; }
.bfb-chip-norm { font-family: var(--bf-font-mono); font-size: 13px; font-weight: 600; color: var(--bf-blue); white-space: nowrap; }
.bfb-chip-scope { font-size: 13px; color: var(--bf-text-muted); white-space: nowrap; }
.bfb-norm-foot { display: inline-flex; align-items: center; gap: 8px; font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-success); margin-top: 24px; }

/* ------------------------------------------------------------
   B7 — Kontakt-Querlinks (Erweiterung des ContactBlock-Layouts)
   ------------------------------------------------------------ */
.bfb-quer { margin-top: 34px; }
.bfb-quer-k { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #7E94B5; margin: 0 0 14px; }
.bfb-quer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .bfb-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bfb-hero-copy { padding: 96px 40px 56px; }
  .bfb-hero-figure { border-left: none; border-top: 1px solid rgba(255,255,255,0.10); min-height: 300px; }
  .bfb-need-grid, .bfb-service-grid { grid-template-columns: 1fr; gap: 44px; }
  .bfb-gewerke-grid { grid-template-columns: 1fr; }
  .bfb-norm-head { grid-template-columns: 1fr; gap: 16px; }
  .bfb-norm-head .bf-lead { padding-top: 0; }
  .bfb-ref { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .bfb-ref-sector { flex-direction: row; align-items: center; padding-top: 0; }
  .bfb-ref-tags { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; padding-top: 2px; }
}
@media (max-width: 600px) {
  .bfb-hero-copy { padding: 88px 22px 44px; }
  .bfb-hero-ctas { flex-direction: column; align-items: stretch; }
  .bfb-hero-ctas .bf-btn { width: 100%; }
  .bfb-hero-figure { min-height: 240px; }
  .bfb-ph { inset: 16px; padding: 20px; }
  .bfb-need, .bfb-gewerke, .bfb-refs, .bfb-service, .bfb-norm { padding: 64px 0; }
  .bfb-gw { grid-template-columns: 1fr; gap: 14px; padding: 24px; }
  .bfb-gw-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .bfb-gewerke-plus { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; }
  .bfb-req { grid-template-columns: 38px 1fr; gap: 16px; }
  .bfb-chip { flex-direction: column; gap: 3px; }
  .bfb-chip-norm, .bfb-chip-scope { white-space: normal; }
  .bfb-quer-links { grid-template-columns: 1fr; }
  .bfb-service-panel { padding: 24px; }
}