/* ============================================================
   Bildfunk — Leistungs-Detailseite (Pilot 02) · Template
   Foundation = Design-System-Tokens + website.css (Header, Footer,
   Kicker/Signalweg, Buttons). Diese Datei ergänzt nur die
   Detailseiten-Sektionen (Präfix .bfl-). Anti-Repetition: jede
   Sektion hat ein eigenes Layout, keines wiederholt die Startseite.
   ============================================================ */

/* ============================================================
   S1 — Leistungs-Hero · Split: Copy links, Detailfoto-Panel rechts
   (bewusst NICHT das 100vh-Full-bleed-Muster der Startseite)
   ============================================================ */
.bfl-hero { position: relative; background: var(--bf-dark); color: #fff; overflow: hidden; }
/* Grid bleibt wie im Master zentriert (max-width/auto) — dadurch sitzt die Copy-Spalte
   exakt auf der .bf-wrap-Flucht. Die Copy-Spalte behält ihre Master-Breite (fr-Äquivalent
   0.525·maxw als Minimum, wächst per min-content für lange Headline-Wörter); die Bildspalte
   (1fr) füllt bis zur Container-Kante. Das Full-bleed nach rechts macht das Bildpanel selbst
   (margin-right, s. .bfl-hero-fig). */
.bfl-hero-grid { max-width: var(--bf-maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(calc(var(--bf-maxw) * 0.525), min-content) minmax(0, 1fr); align-items: stretch; }
.bfl-hero-copy { padding: 118px 56px 72px calc(40px + var(--bf-rail)); display: flex; flex-direction: column; justify-content: center; }
.bfl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--bf-font-mono); font-size: 12px; color: #7E94B5; margin: 0 0 26px; }
.bfl-crumbs a { color: #7E94B5; text-decoration: none; }
.bfl-crumbs a:hover { color: #fff; text-decoration: none; }
.bfl-crumbs .bfl-crumb-sep { color: rgba(255,255,255,0.28); }
.bfl-crumb-cur { color: #C7D4E6; }
.bfl-hero-eyebrow { margin: 0 0 20px; }
.bfl-h1 { font-size: clamp(38px, 4.6vw, 58px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: #fff; margin: 0 0 20px; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.bfl-hero-sub { font-size: 19px; line-height: 1.6; color: #C7D4E6; max-width: 560px; margin: 0 0 34px; text-wrap: pretty; }
.bfl-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* Bildpanel randlos bis zur rechten Viewport-Kante: es überzieht die rechte
   Container-Marge nach rechts (calc auf 50vw/Container). <=1080px stapelt der Master
   (margin-right rechnet auf 0). Der Überschuss wird von .bfl-hero (overflow:hidden) gekappt. */
.bfl-hero-fig { position: relative; min-height: 560px; margin: 0 calc(-1 * max(0px, (100vw - var(--bf-maxw)) / 2)) 0 0; }
.bfl-hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.bfl-hero-fig::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,22,46,0.92) 0%, rgba(7,22,46,0.25) 34%, rgba(7,22,46,0) 60%); z-index: 1; }
.bfl-hero-chip { position: absolute; top: 24px; right: 24px; z-index: 2; font-size: 12px; letter-spacing: 0.04em; color: #fff; background: rgba(7,18,38,0.78); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; padding: 7px 13px; }
/* markierter Bild-Platzhalter */
.bfl-ph-note { position: absolute; left: 0; bottom: 0; z-index: 2; margin: 0; background: rgba(7,18,38,0.82); backdrop-filter: blur(4px); color: #9DB8DD; font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.06em; padding: 9px 16px; display: inline-flex; align-items: center; gap: 10px; }
.bfl-ph-note::before { content: ""; width: 7px; height: 7px; background: var(--bf-orange); transform: rotate(45deg); flex-shrink: 0; }

/* ============================================================
   S2 — Nutzen · Editorial-Split: große Copy links, Funktionszeilen rechts
   ============================================================ */
.bfl-nutzen { background: #fff; padding: 96px 0; }
.bfl-nutzen-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: start; }
.bfl-nutzen-l .bf-kicker { margin-bottom: 18px; }
.bfl-nutzen-l .bf-h2 { margin: 0 0 22px; }
.bfl-nutzen-copy { font-size: 18px; line-height: 1.7; color: var(--bf-text); margin: 0; max-width: 560px; text-wrap: pretty; }
.bfl-fns { display: flex; flex-direction: column; margin-top: 8px; }
.bfl-fn { display: flex; align-items: flex-start; gap: 18px; padding: 22px 0; border-top: 1px solid var(--bf-border); }
.bfl-fn:last-child { border-bottom: 1px solid var(--bf-border); }
.bfl-fn-ico { flex-shrink: 0; display: flex; padding-top: 2px; }
.bfl-fn-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--bf-text); margin: 0 0 5px; }
.bfl-fn-body { font-size: 14px; line-height: 1.6; color: var(--bf-text-muted); margin: 0; }

/* ============================================================
   S3 — Leistungsumfang · nummerierte Hairline-Liste, 2-spaltig
   (keine Cards, keine Directory-Zeilen wie Startseite S4)
   ============================================================ */
.bfl-umfang { background: var(--bf-surface); padding: 96px 0; }
.bfl-umfang-head { max-width: 720px; margin-bottom: 48px; }
.bfl-umfang-head .bf-h2 { margin: 18px 0 0; }
.bfl-umfang-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 56px; }
.bfl-u { border-top: 2px solid var(--bf-border-strong); padding-top: 20px; position: relative; }
.bfl-u::before { content: ""; position: absolute; left: 0; top: -2px; width: 44px; height: 2px; background: var(--bf-orange); }
.bfl-u-n { font-family: var(--bf-font-mono); font-size: 13px; color: var(--bf-orange-800); display: block; margin-bottom: 10px; }
.bfl-u-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--bf-text); margin: 0 0 8px; }
.bfl-u-body { font-size: 15px; line-height: 1.6; color: var(--bf-text-muted); margin: 0; max-width: 480px; }

/* ============================================================
   S4 — Service & Wartung · Text links, Wartungs-Spezifikation rechts
   (Abschnitt, kein eigenes Gewerk)
   ============================================================ */
.bfl-wartung { background: #fff; padding: 96px 0; }
.bfl-wartung-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 72px; align-items: start; }
.bfl-wartung-l .bf-kicker { margin-bottom: 18px; }
.bfl-wartung-l .bf-h2 { margin: 0 0 18px; }
.bfl-wartung-copy { font-size: 17px; line-height: 1.7; color: var(--bf-text-muted); margin: 0; max-width: 540px; text-wrap: pretty; }
.bfl-wcard { background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: var(--bf-radius-xl); padding: 30px 32px; }
.bfl-wcard-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: 18px; }
.bfl-wlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bfl-wlist li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bf-border); font-size: 15px; font-weight: 500; color: var(--bf-text); line-height: 1.5; }
.bfl-wlist li svg { flex-shrink: 0; color: var(--bf-success); margin-top: 3px; }
.bfl-wcard-foot { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--bf-border); font-family: var(--bf-font-mono); font-size: 12px; line-height: 1.6; color: var(--bf-text-muted); }

/* ============================================================
   S5 — Normen & Zertifikate · gerahmtes Panel mit Norm-Chips
   (bewusst schlank; Credential-Cards im Detail bleiben der Startseite)
   ============================================================ */
.bfl-normen { background: #fff; padding: 0 0 96px; }
.bfl-normen-panel { border: 1px solid var(--bf-border); border-radius: var(--bf-radius-xl); padding: 44px 48px; display: grid; grid-template-columns: 1fr 0.95fr; gap: 56px; align-items: start; background: #fff; box-shadow: var(--bf-shadow-sm); }
.bfl-normen-l .bf-kicker { margin-bottom: 18px; }
.bfl-normen-l .bf-h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 0 0 16px; }
.bfl-normen-copy { font-size: 16px; line-height: 1.65; color: var(--bf-text-muted); margin: 0 0 22px; max-width: 480px; }
.bfl-chips { display: flex; flex-direction: column; gap: 12px; }
.bfl-chip { display: flex; align-items: baseline; gap: 16px; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-lg); padding: 16px 20px; transition: border-color var(--bf-dur-base) var(--bf-ease-standard); }
.bfl-chip:hover { border-color: var(--bf-border-strong); }
.bfl-chip-n { font-family: var(--bf-font-mono); font-size: 15px; font-weight: 600; color: var(--bf-blue); white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.bfl-chip-n::before { content: ""; width: 7px; height: 7px; background: var(--bf-orange); transform: rotate(45deg); flex-shrink: 0; }
.bfl-chip-d { font-size: 14px; color: var(--bf-text-muted); line-height: 1.5; }

/* ============================================================
   S6 — Ablauf · 5 Schritte auf horizontaler Signalschiene mit
   Rauten-Knoten (nicht die 3er-Kreis-Rail der Startseite) + Planungsbüro
   ============================================================ */
.bfl-ablauf { background: var(--bf-surface); padding: 96px 0; }
.bfl-ablauf-head { max-width: 720px; margin-bottom: 52px; }
.bfl-ablauf-head .bf-h2 { margin: 18px 0 0; }
.bfl-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; position: relative; }
.bfl-steps::before { content: ""; position: absolute; left: 5px; right: 5px; top: 5px; height: 2px; background: linear-gradient(90deg, var(--bf-blue) 0%, var(--bf-blue) 84%, var(--bf-orange) 100%); opacity: 0.35; }
.bfl-step { position: relative; padding-top: 30px; }
.bfl-step::before { content: ""; position: absolute; left: 1px; top: 0; width: 10px; height: 10px; background: var(--bf-surface); border: 2px solid var(--bf-blue); transform: rotate(45deg); }
.bfl-step:last-child::before { border-color: var(--bf-orange); background: var(--bf-orange); }
.bfl-step-n { font-family: var(--bf-font-mono); font-size: 13px; color: var(--bf-orange-800); display: block; margin-bottom: 8px; }
.bfl-step-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--bf-text); margin: 0 0 8px; }
.bfl-step-body { font-size: 14px; line-height: 1.6; color: var(--bf-text-muted); margin: 0; max-width: 220px; }
/* Planungsbüro-Callout */
.bfl-pb { margin-top: 48px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 24px 30px; background: #fff; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-xl); }
.bfl-pb-l { display: flex; align-items: center; gap: 20px; }
.bfl-pb-ico { width: 52px; height: 52px; border-radius: 12px; background: #EAF1F9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bfl-pb-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; }
.bfl-pb-v { font-size: 16px; line-height: 1.5; color: var(--bf-text); max-width: 560px; }

/* ============================================================
   S7 — Anwendung & Referenz · dunkel, Text links + ein Projektprofil
   (nicht das 3er-Karten-Raster der Startseite)
   ============================================================ */
.bfl-ref { background: var(--bf-dark); color: #fff; padding: 104px 0; }
.bfl-ref-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 72px; align-items: center; }
.bfl-ref-l .bf-kicker { margin-bottom: 18px; }
.bfl-ref-l .bf-h2 { margin: 0 0 16px; }
.bfl-ref-lead { font-size: 18px; line-height: 1.6; color: #C7D4E6; margin: 0 0 30px; max-width: 460px; text-wrap: pretty; }
.bfl-ref-links { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.bfl-case-feat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 40px 42px; position: relative; }
.bfl-case-feat::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px; background: var(--bf-orange); border-radius: 3px; }
.bfl-case-sector { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-orange-600); display: block; margin-bottom: 16px; }
.bfl-case-title { font-size: 26px; font-weight: 700; letter-spacing: -0.015em; color: #fff; margin: 0 0 12px; }
.bfl-case-scope { font-size: 16px; line-height: 1.65; color: #C7D4E6; margin: 0 0 22px; }
.bfl-case-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bfl-case-note { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.12); font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.04em; color: #8FA8CC; }

/* ============================================================
   S8 — FAQ · Accordion mit Aside
   ============================================================ */
.bfl-faq { background: #fff; padding: 96px 0; }
.bfl-faq-grid { display: grid; grid-template-columns: 360px 1fr; gap: 72px; align-items: start; }
.bfl-faq-aside .bf-kicker { margin-bottom: 18px; }
.bfl-faq-aside .bf-h2 { margin: 0 0 16px; }
.bfl-faq-hint { font-size: 15px; line-height: 1.6; color: var(--bf-text-muted); margin: 0 0 18px; max-width: 300px; }
.bfl-faq-phone { display: inline-flex; align-items: center; gap: 10px; font-family: var(--bf-font-mono); font-size: 15px; color: var(--bf-blue); text-decoration: none; }
.bfl-faq-phone:hover { color: var(--bf-blue-600); text-decoration: none; }
.bfl-qs { border-top: 1px solid var(--bf-border); }
.bfl-q { border-bottom: 1px solid var(--bf-border); }
.bfl-q-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 4px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--bf-text); transition: color var(--bf-dur-fast) var(--bf-ease-standard); }
.bfl-q-btn:hover { color: var(--bf-blue); }
.bfl-q-btn svg { flex-shrink: 0; color: var(--bf-blue); transition: transform var(--bf-dur-base) var(--bf-ease-standard); }
.bfl-q.open .bfl-q-btn svg { transform: rotate(45deg); color: var(--bf-orange); }
.bfl-q-a { padding: 0 4px 26px; font-size: 15px; line-height: 1.7; color: var(--bf-text-muted); margin: 0; max-width: 640px; }

/* ============================================================
   S9 — Abschluss-CTA + verwandte Leistungen · dunkles Band
   ============================================================ */
.bfl-cta { background: var(--bf-dark); color: #fff; padding: 96px 0 88px; }
.bfl-cta-grid { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
.bfl-cta-l .bf-kicker { margin-bottom: 18px; }
.bfl-cta-l .bf-h2 { margin: 0 0 14px; }
.bfl-cta-sub { font-size: 18px; line-height: 1.6; color: #C7D4E6; margin: 0; max-width: 520px; text-wrap: pretty; }
.bfl-cta-r { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.bfl-cta-phone { display: inline-flex; align-items: center; gap: 10px; font-family: var(--bf-font-mono); font-size: 15px; color: #C7D4E6; text-decoration: none; }
.bfl-cta-phone:hover { color: #fff; text-decoration: none; }
.bfl-cta-phone svg { color: var(--bf-orange-600); }
.bfl-verwandt { margin-top: 60px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.14); }
.bfl-verwandt-k { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8FA8CC; display: block; margin-bottom: 20px; }
.bfl-verwandt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bfl-vlink { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 20px 22px; text-decoration: none; transition: border-color var(--bf-dur-base) var(--bf-ease-standard), background var(--bf-dur-base) var(--bf-ease-standard); }
.bfl-vlink:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); text-decoration: none; }
.bfl-vlink-label { font-size: 15px; font-weight: 600; color: #fff; display: block; margin-bottom: 4px; }
.bfl-vlink-norm { font-family: var(--bf-font-mono); font-size: 11px; color: #8FA8CC; }
.bfl-vlink-arrow { color: var(--bf-orange-600); display: flex; flex-shrink: 0; transition: transform var(--bf-dur-base) var(--bf-ease-standard); }
.bfl-vlink:hover .bfl-vlink-arrow { transform: translateX(4px); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  /* minmax(0,1fr) lässt die gestapelte Copy-Spalte unter ihre min-content-Breite
     schrumpfen, damit lange Headline-Wörter per overflow-wrap umbrechen statt vom
     overflow:hidden des Heros abgeschnitten zu werden. */
  .bfl-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .bfl-hero-copy { padding: 100px 40px 48px; }
  .bfl-hero-fig { min-height: 300px; order: 2; }
  .bfl-nutzen-grid, .bfl-wartung-grid, .bfl-ref-grid, .bfl-faq-grid { grid-template-columns: 1fr; gap: 44px; }
  .bfl-cta-grid { grid-template-columns: 1fr; gap: 32px; }
  .bfl-normen-panel { grid-template-columns: 1fr; gap: 32px; padding: 36px; }
  .bfl-steps { grid-template-columns: 1fr; gap: 32px; }
  .bfl-steps::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: linear-gradient(180deg, var(--bf-blue) 0%, var(--bf-blue) 84%, var(--bf-orange) 100%); }
  .bfl-step { padding-top: 0; padding-left: 34px; }
  .bfl-step::before { left: 0; top: 5px; background: var(--bf-surface); }
  .bfl-step:last-child::before { background: var(--bf-orange); }
  .bfl-step-body { max-width: 460px; }
}
@media (max-width: 760px) {
  .bfl-umfang-grid { grid-template-columns: 1fr; gap: 32px; }
  .bfl-verwandt-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bfl-hero-copy { padding: 88px 22px 40px; }
  .bfl-hero-ctas { flex-direction: column; align-items: stretch; }
  .bfl-hero-ctas .bf-btn { width: 100%; }
  .bfl-h1 { font-size: clamp(30px, 8.5vw, 40px); }
  .bfl-hero-fig { min-height: 240px; }
  .bfl-nutzen, .bfl-umfang, .bfl-wartung, .bfl-ablauf, .bfl-ref, .bfl-faq, .bfl-cta { padding: 64px 0; }
  .bfl-normen { padding: 0 0 64px; }
  .bfl-normen-panel { padding: 26px 22px; }
  .bfl-chip { flex-direction: column; gap: 6px; }
  .bfl-case-feat { padding: 28px 24px; }
  .bfl-case-title { font-size: 22px; }
  .bfl-q-btn { font-size: 16px; padding: 20px 2px; }
  .bfl-pb { padding: 22px; }
  .bfl-pb-l { align-items: flex-start; }
  .bfl-wcard { padding: 24px 22px; }
  .bfl-cta-r { align-items: stretch; }
  .bfl-cta-r .bf-btn { width: 100%; }
}