/* ============================================================
   Bildfunk — Über uns / Geschichte (Unternehmensseite)
   Foundation = tokens (colors_and_type.css) + components.css +
   website.css (Header, Kicker, Signalweg, Footer, Reveal).
   This file adds ONLY the page-specific section layouts — each
   section gets its own pattern (anti-repetition rule), none
   copied from Startseite, Leistungs-, Branchen- oder Karriereseiten.
   ============================================================ */

/* ------------------------------------------------------------
   U1 — Hero · editorial: dark navy, copy links + Fakten-Ledger
   mit großer Jahreszahl rechts; darunter ein flaches Foto-Band.
   (bewusst NICHT der 100vh-Vollbild-Hero der Startseite und
   NICHT der Split-Panel-Hero der Branchenseiten)
   ------------------------------------------------------------ */
.bfu-hero { background: var(--bf-dark); color: #fff; position: relative; }
.bfu-hero-inner { max-width: var(--bf-maxw); margin: 0 auto; padding: 116px 40px 84px calc(40px + var(--bf-rail)); display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 80px; align-items: center; }
.bfu-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; }
.bfu-crumbs a { color: #9DB8DD; text-decoration: none; }
.bfu-crumbs a:hover { color: #fff; text-decoration: none; }
.bfu-crumb-sep { color: rgba(255,255,255,0.3); }
.bfu-crumb-here { color: #E4EAF2; }
.bfu-hero-copy .bf-kicker { margin-bottom: 20px; }
.bfu-hero-h1 { font-size: clamp(36px, 4.3vw, 56px); font-weight: 700; line-height: 1.07; letter-spacing: -0.028em; margin: 0 0 20px; color: #fff; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.bfu-hero-lead { font-size: 18px; line-height: 1.65; color: #C7D4E6; max-width: 580px; margin: 0 0 34px; text-wrap: pretty; }
.bfu-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Fakten-Ledger */
.bfu-hero-facts { border-left: 1px solid rgba(255,255,255,0.14); padding-left: 52px; }
.bfu-hero-year-k { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #7E94B5; margin: 0 0 8px; display: inline-flex; align-items: center; gap: 9px; }
.bfu-hero-year-k::before { content: ""; width: 7px; height: 7px; background: var(--bf-orange); transform: rotate(45deg); }
.bfu-hero-year { font-size: clamp(72px, 7vw, 112px); font-weight: 700; line-height: 0.95; letter-spacing: -0.045em; color: #fff; margin: 0 0 30px; }
.bfu-fact-dl { display: grid; margin: 0; }
.bfu-fact-dl > div { display: grid; grid-template-columns: 118px 1fr; gap: 18px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.12); align-items: baseline; }
.bfu-fact-dl dt { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #7E94B5; }
.bfu-fact-dl dd { margin: 0; color: #fff; font-size: 15px; line-height: 1.45; }

/* Foto-Band unter dem Hero */
.bfu-hero-band { position: relative; height: 340px; background-image: url(../img/unternehmen-ueber-uns-standort.webp); background-size: cover; background-position: center; border-top: 1px solid rgba(255,255,255,0.10); }
.bfu-hero-band-veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,30,61,0.55) 0%, rgba(10,30,61,0.2) 55%, rgba(10,30,61,0.45) 100%); }
.bfu-band-cap { position: absolute; left: 0; bottom: 0; background: rgba(7,18,38,0.82); backdrop-filter: blur(4px); color: #fff; font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.06em; padding: 9px 16px; display: inline-flex; align-items: center; gap: 10px; }
.bfu-band-cap::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--bf-orange); }
.bfu-band-flag { position: absolute; right: 20px; bottom: 16px; font-family: var(--bf-font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: #C7D4E6; border: 1px dashed rgba(199,212,230,0.55); border-radius: 5px; padding: 5px 9px; background: rgba(7,18,38,0.5); }

/* ------------------------------------------------------------
   U2 — Wer wir sind · großzügiger Editorial-Textblock mit
   hervorgehobener Kennzahl (kein Karten- oder Spaltenmuster)
   ------------------------------------------------------------ */
.bfu-intro { background: #fff; padding: 104px 0; }
.bfu-intro-col { max-width: 840px; }
.bfu-intro-col .bf-h2 { margin: 18px 0 26px; }
.bfu-intro-copy { font-size: 21px; line-height: 1.65; color: var(--bf-text); margin: 0; letter-spacing: -0.005em; text-wrap: pretty; }
.bfu-intro-copy + .bfu-intro-copy { margin-top: 22px; }
.bfu-stat { font-weight: 600; color: var(--bf-text); border-bottom: 2px solid var(--bf-orange); padding-bottom: 1px; white-space: nowrap; }

/* ------------------------------------------------------------
   U3 — Timeline · horizontale Meilenstein-Rails (2 Reihen à 3),
   Diamant-Nodes auf der Leitung; mobil vertikale Leiste
   ------------------------------------------------------------ */
.bfu-tl-sec { background: var(--bf-surface); padding: 104px 0; }
.bfu-tl-head { max-width: 760px; margin-bottom: 60px; }
.bfu-tl-head .bf-h2 { margin: 18px 0 14px; }
.bfu-tl-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 44px; position: relative; padding-top: 42px; }
.bfu-tl-row + .bfu-tl-row { margin-top: 60px; }
.bfu-tl-row::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: rgba(126,148,181,0.4); }
.bfu-tl-row::after { content: ""; position: absolute; right: -1px; top: 4px; width: 10px; height: 10px; background: rgba(126,148,181,0.55); transform: rotate(45deg); }
.bfu-tl-row-last::after { background: var(--bf-orange); box-shadow: 0 0 0 4px rgba(240,125,0,0.14); }
.bfu-ms { position: relative; }
.bfu-ms-node { position: absolute; left: 0; top: -38px; width: 10px; height: 10px; background: var(--bf-blue); transform: rotate(45deg); }
.bfu-ms-node-orange { background: var(--bf-orange); box-shadow: 0 0 0 4px rgba(240,125,0,0.14); }
.bfu-ms-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.bfu-ms-idx { font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-text-muted); }
.bfu-ms-year { font-family: var(--bf-font-mono); font-size: 15px; font-weight: 600; color: var(--bf-orange-800); }
.bfu-ms-flag { font-family: var(--bf-font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bf-text-muted); border: 1px dashed var(--bf-border-strong); border-radius: 5px; padding: 3px 7px; }
.bfu-ms-title { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--bf-text); margin: 0 0 10px; line-height: 1.25; }
.bfu-ms-body { font-size: 15px; line-height: 1.65; color: var(--bf-text-muted); margin: 0; max-width: 340px; }
.bfu-tl-note { font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-text-muted); margin: 44px 0 0; }

/* ------------------------------------------------------------
   U4 — Diskretion · dunkle Sektion, gerahmtes Symbolbild links,
   Text + Zusicherungen rechts (kein Edge-Bleed wie Startseite S8)
   ------------------------------------------------------------ */
.bfu-disk { background: var(--bf-dark); color: #fff; padding: 104px 0; }
.bfu-disk-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 76px; align-items: center; }
.bfu-disk-fig { position: relative; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; overflow: hidden; min-height: 460px; background: #06203F; }
.bfu-disk-photo { position: absolute; inset: 0; background-image: url(../img/cd-botschaft-neutral.webp); background-size: cover; background-position: center; }
.bfu-disk-veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,30,61,0.5) 0%, rgba(10,30,61,0.08) 45%); }
.bfu-disk-cap { position: absolute; left: 0; bottom: 0; background: rgba(7,18,38,0.82); backdrop-filter: blur(4px); color: #fff; font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.06em; padding: 9px 16px; display: inline-flex; align-items: center; gap: 10px; }
.bfu-disk-cap::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--bf-orange); }
.bfu-disk-flag { position: absolute; right: 14px; top: 14px; font-family: var(--bf-font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: #C7D4E6; border: 1px dashed rgba(199,212,230,0.55); border-radius: 5px; padding: 5px 9px; background: rgba(7,18,38,0.55); }
.bfu-disk-copy .bf-h2 { margin: 18px 0 20px; }
.bfu-disk-body { font-size: 17px; line-height: 1.75; color: #C7D4E6; margin: 0 0 28px; max-width: 560px; text-wrap: pretty; }
.bfu-disk-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.bfu-disk-points li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.12); font-size: 15px; font-weight: 500; color: #E4EAF2; }
.bfu-disk-points li:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.bfu-disk-points li svg { flex-shrink: 0; color: var(--bf-orange-600); }

/* ------------------------------------------------------------
   U5 — Was uns ausmacht · offenes Hairline-Raster (3×2), Icon +
   Wert + ein Satz; bewusst keine Karten, keine Kacheln
   ------------------------------------------------------------ */
.bfu-werte { background: #fff; padding: 104px 0; }
.bfu-werte-head { max-width: 720px; margin-bottom: 44px; }
.bfu-werte-head .bf-h2 { margin: 18px 0 14px; }
.bfu-werte-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 56px; border-top: 1px solid var(--bf-border); }
.bfu-wert { padding: 30px 0 34px; border-bottom: 1px solid var(--bf-border); }
.bfu-wert-t { display: flex; align-items: center; gap: 14px; }
.bfu-wert-ico { color: var(--bf-blue); display: flex; flex-shrink: 0; }
.bfu-wert-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--bf-text); margin: 0; }
.bfu-wert-body { font-size: 15px; line-height: 1.6; color: var(--bf-text-muted); margin: 10px 0 0; padding-left: 48px; }
.bfu-werte-cta { margin-top: 32px; }

/* ------------------------------------------------------------
   U6 — Zertifikate-Teaser · Copy links, Credential-Ledger rechts
   (gestapelte Zeilen im Panel, keine Tabelle, keine 3er-Karten)
   ------------------------------------------------------------ */
.bfu-certs { background: var(--bf-surface); padding: 96px 0; }
.bfu-certs-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 76px; align-items: center; }
.bfu-certs-copy .bf-h2 { margin: 18px 0 18px; }
.bfu-certs-body { font-size: 17px; line-height: 1.7; color: var(--bf-text); margin: 0 0 26px; max-width: 480px; text-wrap: pretty; }
.bfu-creds { background: #fff; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-xl); box-shadow: var(--bf-shadow-sm); padding: 8px 34px; }
.bfu-cred { display: grid; grid-template-columns: 56px 1fr auto; gap: 22px; align-items: center; padding: 22px 0; border-top: 1px solid var(--bf-border); }
.bfu-cred:first-child { border-top: none; }
.bfu-cred-seal { width: 56px; height: 56px; border-radius: 14px; background: #EAF1F9; display: flex; align-items: center; justify-content: center; color: var(--bf-blue); }
.bfu-cred-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--bf-text); margin: 0 0 3px; }
.bfu-cred-scope { font-size: 13px; line-height: 1.5; color: var(--bf-text-muted); margin: 0; }
.bfu-cred-reg { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bfu-cred-reg-k { font-family: var(--bf-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-text-muted); }
.bfu-cred-reg-v { font-family: var(--bf-font-mono); font-size: 13px; color: var(--bf-blue); white-space: nowrap; }
.bfu-creds-foot { display: inline-flex; align-items: center; gap: 8px; font-family: var(--bf-font-mono); font-size: 12px; color: var(--bf-success); margin-top: 18px; }

/* ------------------------------------------------------------
   U7 — Kontakt-CTA · dunkles Statement-Band ohne Formular,
   Kontaktdaten als Mono-Zeile unter Hairline
   ------------------------------------------------------------ */
.bfu-contact { background: var(--bf-dark); color: #fff; padding: 100px 0; }
.bfu-contact-col { max-width: 760px; }
.bfu-contact-col .bf-h2 { margin: 18px 0 16px; }
.bfu-contact-sub { font-size: 18px; line-height: 1.65; color: #C7D4E6; margin: 0 0 34px; max-width: 560px; text-wrap: pretty; }
.bfu-contact-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.bfu-contact-strip { margin-top: 52px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-wrap: wrap; gap: 14px 40px; }
.bfu-cline { display: inline-flex; align-items: baseline; gap: 10px; font-size: 14px; color: #C7D4E6; }
.bfu-cline-k { font-family: var(--bf-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #7E94B5; }
.bfu-cline a { color: #fff; text-decoration: none; }
.bfu-cline a:hover { color: var(--bf-orange-600); text-decoration: underline; text-underline-offset: 2px; }
.bfu-cline .bf-mono { font-size: 14px; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .bfu-hero-inner { grid-template-columns: 1fr; gap: 52px; padding-top: 96px; padding-bottom: 64px; }
  .bfu-hero-facts { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 36px; }
  .bfu-hero-year { margin-bottom: 22px; }
  .bfu-disk-grid, .bfu-certs-grid { grid-template-columns: 1fr; gap: 44px; }
  .bfu-disk-fig { min-height: 380px; }
  .bfu-werte-grid { grid-template-columns: repeat(2, 1fr); gap: 0 44px; }
  .bfu-tl-row { grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
}
@media (max-width: 760px) {
  .bfu-tl-row { grid-template-columns: 1fr; gap: 36px; padding-top: 0; }
  .bfu-tl-row + .bfu-tl-row { margin-top: 36px; }
  .bfu-tl-row::before, .bfu-tl-row::after { display: none; }
  .bfu-ms { padding-left: 26px; border-left: 2px solid rgba(126,148,181,0.35); }
  .bfu-ms-node { left: -7px; top: 4px; }
  .bfu-werte-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .bfu-hero-inner { padding-left: 22px; padding-right: 22px; padding-top: 88px; }
  .bfu-hero-ctas { flex-direction: column; align-items: stretch; }
  .bfu-hero-ctas .bf-btn { width: 100%; }
  .bfu-hero-year { font-size: 64px; }
  .bfu-fact-dl > div { grid-template-columns: 1fr; gap: 3px; }
  .bfu-hero-band { height: 240px; }
  .bfu-band-flag { right: 12px; bottom: 12px; }
  .bfu-intro, .bfu-tl-sec, .bfu-disk, .bfu-werte, .bfu-certs, .bfu-contact { padding: 64px 0; }
  .bfu-intro-copy { font-size: 18px; }
  .bfu-disk-fig { min-height: 300px; }
  .bfu-wert-body { padding-left: 0; }
  .bfu-creds { padding: 4px 20px; }
  .bfu-cred { grid-template-columns: 44px 1fr; gap: 16px; }
  .bfu-cred-seal { width: 44px; height: 44px; border-radius: 11px; }
  .bfu-cred-reg { grid-column: 2; align-items: flex-start; flex-direction: row; gap: 10px; align-items: baseline; }
  .bfu-contact-ctas { flex-direction: column; align-items: stretch; }
  .bfu-contact-ctas .bf-btn { width: 100%; }
  .bfu-contact-strip { flex-direction: column; gap: 12px; }
}