/* =====================================================================
   Firmenkunden + Standortseiten (standort.php)
   Ersetzt die alte css/b2b-style.css. Gleiche Werte wie der Rest der
   Website: kantige Flaechen, Haarlinien, Inter, Violett #6d28d9.
   Cache-Busting ueber ?v= beim Einbinden hochzaehlen.
   ===================================================================== */
/* ---------------------------------------------------------------
   Firmenkunden
   Gleiche Werte wie der Rest der Website: dunkler Hero (der Header
   ist oben transparent mit weisser Schrift), kantige Flaechen ohne
   Radius, Haarlinien statt Kacheln, Inter als einzige Schrift.
   Neu gegenueber der Vorversion:
     - Hero mit Foto aus dem Bestand (Switch) statt Verlauf und Portrait
     - Leistungen mit stehender linker Spalte (sticky) statt Liste
     - Bild-Text-Bloecke im 1200er-Raster, Bild mit festem Seitenverhaeltnis
     - Portrait sitzt jetzt beim Thema "Ansprechpartner", wo es hingehoert
     - Ablauf (drei Schritte) und FAQ mit Schema
     - Scroll-Choreografie wie auf der Startseite (data-anim)
   --------------------------------------------------------------- */
.b2b {
  --b2b-ink:     #0f172a;
  --b2b-deep:    #140c2e;
  --b2b-primary: #6d28d9;
  --b2b-hover:   #5b21b6;
  --b2b-soft:    #c9bdf0;
  --b2b-surface: #f8fafc;
  --b2b-muted:   #475569;
  --b2b-line:    #e2e8f0;
  --b2b-wrap:    1200px;
  --b2b-gutter:  clamp(20px, 4vw, 32px);
  color: var(--b2b-ink);
}
.b2b * { box-sizing: border-box; }
.b2b :focus-visible { outline: 2px solid var(--b2b-primary); outline-offset: 3px; }
.b2b img { max-width: 100%; }

.b2b-wrap {
  width: 100%; max-width: var(--b2b-wrap); margin: 0 auto;
  padding-left: var(--b2b-gutter); padding-right: var(--b2b-gutter);
}
.b2b-sec { padding: clamp(64px, 9vw, 104px) 0; }

.b2b-kicker {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--b2b-primary); margin: 0 0 14px;
}
.b2b-kicker--light { color: var(--b2b-soft); }
.b2b-h2 {
  margin: 0 0 18px; font-size: clamp(27px, 3.4vw, 36px); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance;
}
.b2b-p { margin: 0 0 22px; font-size: 16.5px; line-height: 1.75; color: var(--b2b-muted); max-width: 58ch; text-wrap: pretty; }

/* ---------- Buttons ---------- */
.b2b-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
  padding: 15px 28px; border-radius: 0; border: 1px solid transparent;
  background: var(--b2b-primary); color: #fff !important;
  transition: background .18s ease, border-color .18s ease, transform .2s cubic-bezier(0.16,1,0.3,1), box-shadow .2s ease;
}
.b2b-btn:hover { background: var(--b2b-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(109,40,217,.25); }
.b2b-btn:active { transform: translateY(0); transition-duration: .05s; }
.b2b-btn--ghost { background: transparent; border-color: rgba(255,255,255,.38); }
.b2b-btn--ghost:hover { background: transparent; border-color: #fff; box-shadow: none; }
.b2b-btn--line { background: transparent; border-color: #cbd5e1; color: var(--b2b-ink) !important; }
.b2b-btn--line:hover { background: transparent; border-color: var(--b2b-primary); color: var(--b2b-primary) !important; box-shadow: none; }
.b2b-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Hero: Foto statt Verlauf ----------
   Ein echtes Bild aus dem Bestand traegt den Hero, wie auf der Startseite
   (Video) und bei Ueber uns. Links liegt eine dunkle Flaeche fuer den Text,
   rechts kommt das Foto durch. Kein Raster, keine Leuchtflecken. */
.b2b-hero {
  position: relative; color: #fff; overflow: hidden; background: var(--b2b-ink);
  min-height: min(760px, 92vh);
  display: flex; align-items: center;
  padding: clamp(150px, 20vh, 200px) 0 clamp(80px, 11vh, 120px);
}
/* Das Foto sitzt bewusst nach rechts geschoben: der Stecker steht dann
   neben dem Text statt dahinter. Links bleibt die dunkle Flaeche. */
.b2b-hero__bg {
  position: absolute; top: 0; bottom: 0; left: 18%; width: 100%; height: 100%;
  object-fit: cover; object-position: 20% 50%; display: block;
}
.b2b-hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(13,8,28,.96) 0%, rgba(13,8,28,.90) 38%, rgba(13,8,28,.55) 68%, rgba(13,8,28,.35) 100%),
    linear-gradient(180deg, rgba(13,8,28,.55) 0%, rgba(13,8,28,0) 30%, rgba(13,8,28,0) 75%, rgba(13,8,28,.6) 100%);
}
.b2b-hero__inner { position: relative; z-index: 2; }
.b2b-hero__text { max-width: 620px; }
.b2b-hero h1 {
  margin: 0 0 24px; color: #fff; font-weight: 800; letter-spacing: -0.035em;
  font-size: clamp(36px, 5.2vw, 60px); line-height: 1.03; text-wrap: balance;
}
.b2b-hero h1 span { display: block; color: var(--b2b-soft); }
.b2b-hero__lead {
  margin: 0 0 34px; max-width: 46ch; font-size: clamp(16px, 2vw, 18px);
  line-height: 1.7; color: rgba(255,255,255,.82); text-wrap: pretty;
}
.b2b-hero__note { margin: 24px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.6); max-width: 46ch; }

/* ---------- Leistungen: linke Spalte bleibt stehen ---------- */
.b2b-services { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.b2b-services__aside { position: sticky; top: 112px; }
.b2b-rows { border-top: 1px solid var(--b2b-ink); }
.b2b-row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  padding: clamp(26px, 3.2vw, 36px) 0; border-bottom: 1px solid var(--b2b-line);
}
.b2b-row:last-child { border-bottom: 1px solid var(--b2b-ink); }
.b2b-row h3 { margin: 0; font-size: clamp(20px, 2.2vw, 23px); font-weight: 700; letter-spacing: -0.015em; }
.b2b-row p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--b2b-muted); max-width: 60ch; text-wrap: pretty; }
.b2b-row__eg {
  margin: 6px 0 0; padding-left: 14px; border-left: 2px solid var(--b2b-primary);
  font-size: 14px; line-height: 1.6; color: var(--b2b-ink); max-width: 60ch;
}

/* ---------- Bild-Text-Bloecke im 1200er-Raster ---------- */
.b2b-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.b2b-feature--img-right .b2b-feature__media { order: 2; }
.b2b-feature__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--b2b-line); }
.b2b-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.b2b-feature__body > * { max-width: 520px; }

.b2b-list { list-style: none; padding: 0; margin: 0 0 30px; border-top: 1px solid var(--b2b-line); }
.b2b-list li {
  padding: 12px 0 12px 24px; border-bottom: 1px solid var(--b2b-line);
  position: relative; font-size: 15.5px; line-height: 1.5; color: var(--b2b-ink);
}
.b2b-list li::before { content: ''; position: absolute; left: 0; top: 21px; width: 10px; height: 2px; background: var(--b2b-primary); }

/* ---------- Ansprechpartner ---------- */
.b2b-person { background: var(--b2b-surface); }
.b2b-person__grid {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px); align-items: center;
}
.b2b-person__figure { margin: 0; position: relative; }
.b2b-person__figure img {
  width: 100%; height: auto; max-height: 520px; object-fit: cover; object-position: top;
  display: block; border-left: 3px solid var(--b2b-primary);
}
.b2b-person__figure figcaption {
  margin: 12px 0 0; font-size: 13px; color: var(--b2b-muted);
}
.b2b-person__figure figcaption b { display: block; color: var(--b2b-ink); font-weight: 700; font-size: 14px; }
.b2b-quote {
  margin: 0 0 22px; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.22; text-wrap: balance;
}
.b2b-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--b2b-line); }
.b2b-facts li { padding: 14px 0; border-bottom: 1px solid var(--b2b-line); font-size: 14.5px; line-height: 1.5; color: var(--b2b-muted); }
.b2b-facts li b { display: block; color: var(--b2b-ink); font-weight: 700; margin-bottom: 2px; }

/* ---------- Ortsseiten (standort.php, einsatzgebiet.php) ---------- */
.b2b-crumbs { background: #fff; border-bottom: 1px solid var(--b2b-line); font-size: 13.5px; color: var(--b2b-muted); }
.b2b-crumbs .b2b-wrap { display: flex; flex-wrap: wrap; gap: 6px 0; padding-top: 14px; padding-bottom: 14px; }
.b2b-crumbs a { color: var(--b2b-muted); text-decoration: none; }
.b2b-crumbs a:hover { color: var(--b2b-primary); }
.b2b-crumbs a::after { content: '/'; margin: 0 10px; color: #cbd5e1; }
.b2b-crumbs span { color: var(--b2b-ink); font-weight: 600; }
.b2b-brief { padding: 24px 28px; background: var(--b2b-surface); border-left: 3px solid var(--b2b-primary); }
.b2b-brief h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--b2b-primary); }
.b2b-brief p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--b2b-ink); text-wrap: pretty; }
.b2b-stand { margin: 0; font-size: 13px; color: var(--b2b-muted); }
.b2b-kreis { margin: 0 0 44px; }
.b2b-kreis h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.b2b-kreis__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--b2b-ink); }
.b2b-kreis__list li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 8px 24px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--b2b-line); font-size: 15px; }
.b2b-kreis__list li b { font-weight: 700; color: var(--b2b-ink); }
.b2b-kreis__list li a { color: var(--b2b-ink); text-decoration: none; border-bottom: 1px solid var(--b2b-primary); }
.b2b-kreis__list li a:hover { color: var(--b2b-primary); }
.b2b-kreis__list li span { color: var(--b2b-muted); line-height: 1.5; }
.b2b-kreis__list li em { font-style: normal; font-size: 13.5px; color: var(--b2b-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .b2b-kreis__list li { grid-template-columns: 1fr; gap: 2px; }
}
.b2b-ref {
  margin: 28px 0 0; padding: 22px 26px; border-left: 3px solid var(--b2b-primary);
  background: var(--b2b-surface);
}
.b2b-ref p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.65; color: var(--b2b-ink); text-wrap: pretty; }
.b2b-ref footer { font-size: 13.5px; color: var(--b2b-muted); }
.b2b-orte { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--b2b-muted); }
.b2b-orte a { color: var(--b2b-ink); text-decoration: none; border-bottom: 1px solid var(--b2b-line); }
.b2b-orte a:hover { color: var(--b2b-primary); border-color: var(--b2b-primary); }

/* ---------- Ablauf: echte Reihenfolge, deshalb Nummern ---------- */
.b2b-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); border-top: 1px solid var(--b2b-ink); }
.b2b-step { padding: 28px 0 8px; position: relative; }
.b2b-step::before {
  content: ''; position: absolute; left: 0; top: -1px; width: 48px; height: 3px; background: var(--b2b-primary);
}
.b2b-step__n { font-size: 13px; font-weight: 700; color: var(--b2b-primary); font-variant-numeric: tabular-nums; margin: 0 0 14px; }
.b2b-step h3 { margin: 0 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.b2b-step p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--b2b-muted); text-wrap: pretty; }
.b2b-steps__after { margin: 36px 0 0; font-size: 16px; line-height: 1.7; color: var(--b2b-ink); max-width: 60ch; }

/* ---------- FAQ ---------- */
.b2b-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.b2b-faq__list { border-top: 1px solid var(--b2b-ink); }
.b2b-faq details { border-bottom: 1px solid var(--b2b-line); }
.b2b-faq details:last-child { border-bottom: 1px solid var(--b2b-ink); }
.b2b-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; font-size: 17px; font-weight: 700; color: var(--b2b-ink); letter-spacing: -0.01em;
}
.b2b-faq summary::-webkit-details-marker { display: none; }
.b2b-faq summary svg { flex: 0 0 auto; color: var(--b2b-primary); transition: transform .25s cubic-bezier(0.16,1,0.3,1); }
.b2b-faq details[open] summary svg { transform: rotate(45deg); }
.b2b-faq details p { margin: 0 0 22px; font-size: 15.5px; line-height: 1.7; color: var(--b2b-muted); max-width: 60ch; text-wrap: pretty; }

/* ---------- Abschluss ---------- */
.b2b-end {
  color: #fff;
  background:
    radial-gradient(90% 90% at 90% 10%, rgba(109,40,217,.35) 0%, rgba(109,40,217,0) 60%),
    var(--b2b-ink);
}
.b2b-end__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.b2b-end h2 { margin: 0 0 16px; color: #fff; font-size: clamp(27px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; }
.b2b-end p { margin: 0 0 28px; font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,.72); max-width: 46ch; }
.b2b-meta { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.18); }
.b2b-meta li { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.18); font-size: 15px; color: rgba(255,255,255,.75); }
.b2b-meta a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.b2b-meta a:hover { border-color: var(--b2b-soft); color: var(--b2b-soft); }

/* ---------- Scroll-Choreografie (wie index.php, nur mit JS) ---------- */
.js [data-anim] { --ease: cubic-bezier(0.22, 1, 0.36, 1); }
.js [data-anim="rise"] { opacity: 0; transform: translateY(22px); transition: opacity .85s var(--ease) var(--d, 0s), transform .85s var(--ease) var(--d, 0s); }
.js [data-anim="fade"] { opacity: 0; transition: opacity 1.1s var(--ease) var(--d, 0s); }
.js [data-anim="img"]  { opacity: 0; transform: scale(1.06); clip-path: inset(12% 0 0 0); transition: opacity .9s var(--ease) var(--d,0s), transform 1.5s var(--ease) var(--d,0s), clip-path 1.1s var(--ease) var(--d,0s); }
.js [data-anim="mask"] { display: block; overflow: hidden; }
.js [data-anim="mask"] > * { display: block; transform: translateY(105%); transition: transform 1s var(--ease) var(--d, 0s); }
.js [data-anim].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.js [data-anim="mask"].is-in > * { transform: none; }
.js [data-stagger] > *:nth-child(1) { --d: 0s; }
.js [data-stagger] > *:nth-child(2) { --d: .08s; }
.js [data-stagger] > *:nth-child(3) { --d: .16s; }
.js [data-stagger] > *:nth-child(4) { --d: .24s; }
.js [data-stagger] > *:nth-child(5) { --d: .32s; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .b2b-services, .b2b-faq { grid-template-columns: 1fr; gap: 28px; }
  .b2b-services__aside { position: static; }
}
@media (max-width: 900px) {
  .b2b-hero { min-height: 0; padding: clamp(130px, 18vh, 160px) 0 64px; }
  .b2b-hero__bg { left: 0; width: 100%; object-position: 45% 50%; }
  .b2b-hero__shade {
    background:
      linear-gradient(180deg, rgba(13,8,28,.94) 0%, rgba(13,8,28,.86) 60%, rgba(13,8,28,.72) 100%);
  }
  .b2b-person__grid, .b2b-end__grid { grid-template-columns: 1fr; }
  .b2b-feature { grid-template-columns: 1fr; gap: 28px; }
  .b2b-feature__media { aspect-ratio: 16 / 10; order: 0 !important; }
  .b2b-person__figure img { max-height: 380px; object-position: center 20%; }
  .b2b-steps { grid-template-columns: 1fr; gap: 0; border-top: none; }
  .b2b-step { border-top: 1px solid var(--b2b-line); padding: 24px 0 26px; }
  .b2b-step:first-child { border-top: 1px solid var(--b2b-ink); }
}
@media (max-width: 600px) {
  .b2b-actions { flex-direction: column; }
  .b2b-actions .b2b-btn { width: 100%; }
  .b2b-facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .b2b *, .b2b *::before, .b2b *::after,
  .js [data-anim], .js [data-anim="mask"] > * {
    transition: none !important; animation: none !important;
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
}