/* ==========================================================================
   BCE HOME v2 — uklady strony glownej
   --------------------------------------------------------------------------
   Zrodlo prawdy dla wygladu:
     design/homepage-v2-export/BCE Homepage v2 - Concept 01.dc.html
     sha256 e5cefd6f23f6cec17cc027c1381de22169b6f4b65fa4a9eb23b58e9c953a1a81

   Wszystko ponizej siedzi w zasiegu .bce-home. Warstwa wspolna (tokeny,
   fonty, reset, fokus) jest w bce-base.css i NIE zawiera nic specyficznego
   dla tej strony.

   Swiadome odstepstwa od eksportu — pelne uzasadnienie w
   docs/homepage-v2-implementation.md:
     1. Brak `overflow-x:hidden` na kontenerze strony. W eksporcie ten zapis
        zabijal `position:sticky` naglowka (przodek z overflow != visible
        przejmuje role kontenera przewijania). Zamiast zaslaniac problem
        przycinaniem, uklad nie wychodzi poza ekran.
     2. Siatki 4-elementowe (Zusammenarbeit, So arbeiten wir, stopka) maja
        JAWNE progi 4 / 2 / 1 zamiast `auto-fit minmax()`. `auto-fit` przy
        tych wartosciach daje na szerokim pulpicie uklad 3+1 z osieroconym
        elementem w drugim rzedzie.
     3. Diagram pieciu pol ma JEDEN DOM dla ukladu poziomego i pionowego
        (eksport trzymal dwie kopie tej samej tresci). Prog przelaczenia
        zostaje taki jak w eksporcie: 820 px.
   ========================================================================== */

/* UWAGA do wszystkich `minmax(min(Npx, 100%), 1fr)` ponizej.
   Eksport uzywa `minmax(Npx, 1fr)`. Przy bardzo waskim ekranie (ok. 320 px)
   sam prog N bywa szerszy niz dostepna tresc i tor siatki wychodzi poza
   ekran. W eksporcie tego nie widac, bo `overflow-x:hidden` na kontenerze
   po cichu to PRZYCINA. Skoro zdjelismy przycinanie, blad trzeba naprawic,
   a nie zaslonic: `min(Npx, 100%)` nie zmienia niczego na zadnej szerokosci,
   na ktorej prog i tak sie miesci.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. TOKENY STRONY GLOWNEJ
   --------------------------------------------------------------------------
   Szarosci i linie strony glownej sa CHLODNE (niebieskawe). Landing /shk/
   uzywa cieplej skali (#8b8781 / #d8d5cf). Roznica jest zamierzona i dlatego
   siedzi tutaj, a nie w warstwie wspolnej.
   -------------------------------------------------------------------------- */

.bce-home {
  --bce-line: #d8e3ef;        /* linie sekcji, ramki paneli          */
  --bce-line-soft: #e3eaf1;   /* separatory wewnatrz kolumn          */
  --bce-line-faint: #eef2f6;  /* separatory w menu mobilnym          */
  --bce-muted: #55636f;       /* tekst drugorzedny na jasnym tle     */
  --bce-muted-dark: #8b9aa6;  /* tekst drugorzedny na grafitcie      */
  --bce-body-dark: #c9d3dc;   /* tekst ciagly na grafitcie           */
  --bce-on-blue: #bfdcf6;     /* tekst drugorzedny na blekicie       */
}

/* --------------------------------------------------------------------------
   2. NAGLOWEK I NAWIGACJA
   --------------------------------------------------------------------------
   Naglowek jest `sticky` i MUSI nim pozostac, dlatego zaden jego przodek
   (html, body, wrapper) nie ma overflow innego niz `visible`.
   -------------------------------------------------------------------------- */

.bce-home__header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--bce-graphite);
}

.bce-home__bar {
  max-width: var(--bce-max);
  margin: 0 auto;
  padding: 12px var(--bce-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}

.bce-home__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.bce-home__logo {
  height: 36px;
  width: auto;
  flex: none;
  display: block;
}

.bce-home__brandname {
  font-family: var(--bce-cond);
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 18px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Przycisk menu: ma sens wylacznie z JavaScriptem, wiec bez niego
   pozostaje ukryty, a nawigacja jest po prostu widoczna. */
.bce-home__toggle {
  display: none;
  order: 2;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid var(--bce-graphite);
  padding: 10px 14px;
  font-family: var(--bce-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.bce-home__nav {
  order: 3;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 34px);
  font-family: var(--bce-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bce-home__nav-cta {
  color: var(--bce-blue);
}

/* --- ponizej 820 px: nawigacja jako panel pod paskiem ---------------------
   Jeden i ten sam element <nav>: na pulpicie lezy w pasku, na telefonie
   zawija sie do pelnej szerokosci. Dzieki temu w DOM jest tylko jedna
   kopia linkow i czytnik ekranu nie slyszy menu dwa razy. */
@media (max-width: 820px) {
  .js .bce-home__toggle {
    display: inline-flex;
  }

  /* Bez tego pasek lamie sie na dwie linie ponizej ~400 px.
     `flex-wrap:wrap` dzieli elementy wedlug ich ROZMIARU HIPOTETYCZNEGO,
     a nie min-content: nazwa marki liczy sie wtedy pelna szerokoscia
     (280 px) i wypycha przycisk do drugiego wiersza, przez co naglowek
     rosnie z 61 px do 115 px. `flex-basis:0` zeruje rozmiar hipotetyczny,
     wiec marka i przycisk zostaja w jednym wierszu, a marka dobiera
     reszte miejsca — dokladnie tak jak w zatwierdzonym zrodle. */
  .bce-home__brand {
    flex: 1 1 0;
  }

  .bce-home__nav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 12px calc(-1 * var(--bce-gutter)) -12px;
    padding: 8px var(--bce-gutter) 16px;
    border-top: 1px solid var(--bce-line);
    background: var(--bce-white);
    font-size: 13px;
    letter-spacing: 0.1em;
  }

  .bce-home__nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--bce-line-faint);
  }

  .bce-home__nav a:last-child {
    border-bottom: 0;
  }

  /* Stan zwiniety obowiazuje TYLKO gdy JavaScript dziala. */
  .js .bce-home__nav {
    display: none;
  }

  .js .bce-home__nav.is-open {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   3. SEKCJE I SIATKA PODSTAWOWA
   -------------------------------------------------------------------------- */

.bce-home__wrap {
  max-width: var(--bce-max);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 96px) var(--bce-gutter);
}

.bce-home__wrap--hero {
  padding: clamp(40px, 7vw, 96px) var(--bce-gutter) clamp(34px, 5vw, 72px);
}

.bce-home__wrap--92 {
  padding: clamp(44px, 6vw, 92px) var(--bce-gutter);
}

.bce-home__wrap--band {
  padding: clamp(34px, 4.5vw, 64px) var(--bce-gutter);
}

.bce-home__sec--hero {
  border-bottom: 1px solid var(--bce-graphite);
}

.bce-home__sec--tint {
  background: var(--bce-tint);
}

.bce-home__sec--tint,
#leistungen.bce-home__sec,
#zusammenarbeit.bce-home__sec {
  border-bottom: 1px solid var(--bce-line);
}

.bce-home__sec--dark {
  background: var(--bce-graphite);
  color: var(--bce-offwhite);
}

.bce-home__sec--blue {
  background: var(--bce-blue);
  color: var(--bce-white);
}

/* Dwukolumnowy blok naglowek + tekst. Dwa dzieci, wiec `auto-fit` zwija
   nadmiarowy tor i zawsze wychodza dwie rowne kolumny albo jedna. */
.bce-home__split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 4vw, 64px);
}

.bce-home__split--end {
  align-items: end;
}

.bce-home__split--start {
  align-items: start;
}

.bce-home__split--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(28px, 5vw, 72px);
}

.bce-home__split--intro {
  margin-bottom: clamp(32px, 4vw, 56px);
}

.bce-home__stack {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.bce-home__stack--contact {
  gap: 24px;
}

.bce-home__stack--band {
  gap: 20px;
}

/* --------------------------------------------------------------------------
   4. TYPOGRAFIA SEKCJI
   -------------------------------------------------------------------------- */

.bce-home__eyebrow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(22px, 3vw, 36px);
  font-family: var(--bce-mono);
  font-size: 11.5px;
}

.bce-home__eyebrow-num {
  color: var(--bce-blue);
  letter-spacing: 0.1em;
}

.bce-home__eyebrow-label {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bce-muted);
}

/* Wieksze swiatlo pod nagłowkiem ma WYLACZNIE sekcja 04. Kontakt (08) jest
   tak samo ciemny, ale w zrodle ma clamp(22px,3vw,36px) — czyli wartosc
   domyslna. Regula na `.bce-home__sec--dark` obejmowalaby obie i dawala
   sekcji kontaktowej 4 px za duzo. Zmierzone wzgledem eksportu. */
#ansatz .bce-home__eyebrow {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.bce-home__sec--dark .bce-home__eyebrow-num {
  color: var(--bce-blue-light);
}

.bce-home__sec--dark .bce-home__eyebrow-label {
  color: var(--bce-muted-dark);
}

.bce-home__sec--blue .bce-home__eyebrow {
  margin-bottom: clamp(18px, 2.5vw, 28px);
}

.bce-home__sec--blue .bce-home__eyebrow-num,
.bce-home__sec--blue .bce-home__eyebrow-label {
  color: var(--bce-on-blue);
}

.bce-home__h1 {
  max-width: 20ch;
  font-family: var(--bce-cond);
  font-weight: 700;
  font-size: clamp(38px, 7vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.bce-home__h2 {
  font-family: var(--bce-cond);
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 50px);
  line-height: 1.05;
  text-transform: uppercase;
}

.bce-home__h2--xl {
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.04;
}

.bce-home__h2--lg {
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.03;
}

.bce-home__sec--blue .bce-home__h2 {
  font-size: clamp(26px, 3.6vw, 48px);
}

.bce-home__h2--gap {
  margin-bottom: clamp(30px, 4vw, 56px);
}

#ablauf .bce-home__h2--gap {
  margin-bottom: clamp(28px, 4vw, 52px);
}

/* Grupowanie, ktore ma przetrwac kazda szerokosc: "SINN MACHT." nigdy
   nie rozpada sie na dwie linie. Reszta naglowka lamie sie swobodnie. */
.bce-home__keep {
  white-space: nowrap;
}

.bce-home__accent {
  color: var(--bce-blue);
}

.bce-home__sec--dark .bce-home__accent {
  color: var(--bce-blue-light);
}

.bce-home__lead {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  max-width: 52ch;
  color: var(--bce-body);
  text-wrap: pretty;
}

.bce-home__lead--narrow {
  max-width: 50ch;
}

.bce-home__sec--hero .bce-home__lead {
  font-size: clamp(15.5px, 1.5vw, 20px);
  line-height: 1.5;
}

.bce-home__sec--dark .bce-home__lead {
  color: var(--bce-body-dark);
}

.bce-home__body {
  font-size: 15px;
  line-height: 1.65;
  max-width: 52ch;
  color: var(--bce-body);
  text-wrap: pretty;
}

.bce-home__body--wide {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
}

.bce-home__sec--blue .bce-home__body--wide {
  font-size: clamp(15px, 1.4vw, 17.5px);
  color: inherit;
}

.bce-home__body--intro {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  margin: 20px 0 clamp(32px, 4vw, 56px);
}

/* --------------------------------------------------------------------------
   5. PRZYCISKI I LINKI TECHNICZNE
   -------------------------------------------------------------------------- */

.bce-home__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.bce-home__actions--center {
  align-items: center;
}

.bce-home__btn {
  display: inline-block;
  font-family: var(--bce-cond);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 17px 30px;
  text-align: center;
}

/* Wypelniony przycisk NIE ma ramki — tak jest w zatwierdzonym zrodle.
   Dodanie `border:1px solid transparent` (wygodny nawyk, zeby warianty
   mialy rowna wysokosc) podnosilo go o 2 px ponad projekt. Zmierzone. */

.bce-home__btn--primary,
.bce-home__btn--onDark {
  background: var(--bce-blue);
  color: var(--bce-white);
  transition: background 160ms ease, color 160ms ease;
}

.bce-home__btn--primary:hover {
  background: var(--bce-graphite);
  color: var(--bce-white);
}

.bce-home__btn--onDark:hover {
  background: var(--bce-white);
  color: var(--bce-graphite);
}

.bce-home__btn--outline {
  border: 1px solid var(--bce-blue-light);
  color: var(--bce-offwhite);
  transition: color 160ms ease;
}

.bce-home__btn--outline:hover {
  color: var(--bce-blue-light);
}

.bce-home__linktech {
  align-self: center;
  font-family: var(--bce-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bce-graphite);
  border-bottom: 1px solid var(--bce-graphite);
  padding-bottom: 4px;
  transition: color 160ms ease, border-color 160ms ease;
}

.bce-home__linktech:hover {
  color: var(--bce-blue);
  border-bottom-color: var(--bce-blue);
}

.bce-home__linktech--blue {
  align-self: flex-start;
  color: var(--bce-blue);
  border-bottom-color: var(--bce-blue);
}

.bce-home__linktech--blue:hover {
  color: var(--bce-graphite);
  border-bottom-color: var(--bce-graphite);
}

/* --------------------------------------------------------------------------
   6. SEKCJA 01 — HERO
   -------------------------------------------------------------------------- */

.bce-home__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(22px, 3vw, 34px);
  font-family: var(--bce-mono);
  font-size: clamp(10.5px, 1.1vw, 12.5px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bce-blue);
}

.bce-home__kicker-rule {
  width: 26px;
  height: 1px;
  background: var(--bce-blue);
  flex: none;
}

.bce-home__sec--hero .bce-home__split {
  gap: clamp(26px, 4vw, 64px);
  margin-top: clamp(28px, 4vw, 52px);
}

.bce-home__herobox {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bce-home__region {
  font-family: var(--bce-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bce-muted);
  border-top: 1px solid var(--bce-line);
  padding-top: 14px;
}

/* --------------------------------------------------------------------------
   7. SEKCJA 02 — DIAGRAM PIECIU POL
   --------------------------------------------------------------------------
   Jeden DOM, dwa uklady — zamiast dwoch kopii tresci jak w eksporcie.
   Czytnik ekranu dostaje jedna liste pieciu krokow, nie dwie.

   Prog 820 px jest taki sam jak w eksporcie. Na /shk/ analogiczny diagram
   ma prog 900 px, ale tam kolumn jest SZESC i etykiety sa dluzsze. Tutaj
   sprawdzono w przegladarce najciasniejszy przypadek (821 px): na kolumne
   wypada 151 px, na tresc 114 px, "SCHALTSCHRANK & SPS / DDC" lamie sie
   na dwie linie i nic nie dotyka krawedzi. Podnoszenie progu byloby wiec
   odejsciem od zatwierdzonego projektu bez powodu.
   -------------------------------------------------------------------------- */

.bce-home__system {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  font-family: var(--bce-mono);
  background: var(--bce-white);
  border: 1px solid var(--bce-line);
}

.bce-home__field {
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bce-home__field:not(:last-child) {
  border-right: 1px solid var(--bce-line);
}

.bce-home__field--mark {
  background: var(--bce-tint);
}

.bce-home__field-num {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--bce-blue);
}

.bce-home__field-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.bce-home__field-name {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}

.bce-home__field-rule {
  height: 1px;
  flex: none;
  background: var(--bce-blue);
}

.bce-home__field-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--bce-muted);
}

@media (max-width: 820px) {
  .bce-home__system {
    grid-template-columns: 1fr;
  }

  .bce-home__field {
    padding: 18px 16px;
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
  }

  .bce-home__field:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--bce-line);
  }

  .bce-home__field-num {
    font-size: 10.5px;
    letter-spacing: 0.12em;
    flex: none;
  }

  .bce-home__field-body {
    gap: 5px;
  }

  .bce-home__field-name {
    font-size: 13px;
    letter-spacing: 0.08em;
  }

  .bce-home__field-rule {
    display: none;
  }

  .bce-home__field-desc {
    font-size: 11.5px;
    line-height: 1.5;
  }
}

.bce-home__protocols {
  margin-top: 18px;
  font-family: var(--bce-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bce-blue);
}

.bce-home__note {
  margin-top: 20px;
  border-top: 1px solid var(--bce-line);
  padding-top: 18px;
  font-size: clamp(14.5px, 1.3vw, 16px);
  line-height: 1.6;
  color: var(--bce-body);
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   8. SEKCJA 03 — KOMPETENCJE
   -------------------------------------------------------------------------- */

.bce-home__comp {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}

@media (min-width: 1020px) {
  .bce-home__comp {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px;
  }
}

.bce-home__col {
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-top: 2px solid var(--bce-graphite);
  padding-top: 20px;
}

.bce-home__col--accent {
  border-top-color: var(--bce-blue);
}

.bce-home__col-title {
  font-family: var(--bce-cond);
  font-weight: 700;
  font-size: clamp(20px, 2.1vw, 26px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.bce-home__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Separator miedzy pozycjami. W eksporcie byl osobnym pustym <div>;
   tutaj jest krawedzia elementu, zeby nie trzymac w DOM pustych wezlow. */
.bce-home__item + .bce-home__item {
  border-top: 1px solid var(--bce-line-soft);
  padding-top: 22px;
}

.bce-home__item-title {
  font-family: var(--bce-cond);
  font-weight: 600;
  font-size: 16.5px;
  letter-spacing: 0.02em;
}

.bce-home__item-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bce-body);
}

/* Wspolne zamkniecie POD wszystkimi trzema kolumnami. Wlasny, szerszy
   obszar (68ch) — celowo niezalezny od szerokosci kolumny Software. */
.bce-home__closing {
  margin-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--bce-graphite);
  padding-top: 22px;
  font-family: var(--bce-cond);
  font-weight: 700;
  font-size: clamp(17px, 1.9vw, 24px);
  line-height: 1.2;
  text-transform: uppercase;
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   9. SEKCJA 04 — UNSER PRINZIP
   -------------------------------------------------------------------------- */

.bce-home__principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 22px 32px;
}

.bce-home__principle {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid var(--bce-line-dark);
  padding-top: 16px;
}

.bce-home__principle-title {
  font-family: var(--bce-mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bce-blue-light);
}

.bce-home__principle-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bce-body-dark);
}

/* --------------------------------------------------------------------------
   10. SEKCJA 05 — PASMO BLEKITNE
   -------------------------------------------------------------------------- */

.bce-home__chain {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  padding-top: 16px;
  font-family: var(--bce-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bce-home__chain-sep {
  color: var(--bce-on-blue);
}

/* --------------------------------------------------------------------------
   11. SEKCJA 06 — ZUSAMMENARBEIT
   --------------------------------------------------------------------------
   Progi jawne: 4 / 2 / 1. `auto-fit minmax(300px,1fr)` z eksportu nigdy nie
   miesci czterech torow w kontenerze 1440 px i konczy sie ukladem 3+1.
   -------------------------------------------------------------------------- */

.bce-home__audience {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3.5vw, 52px);
}

@media (min-width: 620px) {
  .bce-home__audience {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .bce-home__audience {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.bce-home__group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--bce-graphite);
  padding-top: 20px;
}

.bce-home__group--accent {
  border-top-color: var(--bce-blue);
}

.bce-home__group-title {
  font-family: var(--bce-cond);
  font-weight: 700;
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.15;
  text-transform: uppercase;
}

.bce-home__group-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bce-body);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   12. SEKCJA 07 — SO ARBEITEN WIR
   -------------------------------------------------------------------------- */

.bce-home__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 40px);
}

@media (min-width: 620px) {
  .bce-home__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .bce-home__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.bce-home__step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 2px solid var(--bce-graphite);
  padding-top: 18px;
}

.bce-home__step--last {
  border-top-color: var(--bce-blue);
}

.bce-home__step-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--bce-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--bce-blue);
}

.bce-home__step-title {
  font-family: var(--bce-cond);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.1;
  text-transform: uppercase;
}

.bce-home__step-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bce-body);
}

/* --- blok "Über BCE" ----------------------------------------------------- */

.bce-home__about {
  margin-top: clamp(32px, 4vw, 56px);
  background: var(--bce-white);
  border: 1px solid var(--bce-line);
  padding: clamp(22px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(22px, 3vw, 48px);
  align-items: start;
}

.bce-home__about-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bce-home__about-label {
  font-family: var(--bce-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bce-blue);
}

.bce-home__about-title {
  font-family: var(--bce-cond);
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.12;
  text-transform: uppercase;
}

.bce-home__about-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bce-home__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--bce-line-soft);
  padding-top: 16px;
  font-family: var(--bce-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

.bce-home__card-name {
  color: var(--bce-graphite);
  font-weight: 500;
}

.bce-home__card-role {
  color: var(--bce-muted);
}

.bce-home__card-tel {
  align-self: flex-start;
  color: var(--bce-graphite);
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
}

.bce-home__card-mail {
  align-self: flex-start;
  color: var(--bce-blue);
}

/* --------------------------------------------------------------------------
   13. SEKCJA 08 — KONTAKT
   -------------------------------------------------------------------------- */

.bce-home__mailline {
  font-family: var(--bce-mono);
  font-size: 13px;
  color: var(--bce-blue-light);
  border-top: 1px solid var(--bce-line-dark);
  padding-top: 18px;
}

.bce-home__mailline:hover {
  color: var(--bce-white);
}

/* --------------------------------------------------------------------------
   14. STOPKA
   -------------------------------------------------------------------------- */

.bce-home__footer {
  border-top: 1px solid var(--bce-graphite);
}

.bce-home__wrap--footer {
  padding: clamp(26px, 3.5vw, 48px) var(--bce-gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  font-family: var(--bce-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--bce-body);
}

@media (min-width: 560px) {
  .bce-home__wrap--footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .bce-home__wrap--footer {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.bce-home__foot-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.bce-home__foot-logo {
  height: 22px;
  width: auto;
  flex: none;
  display: block;
}

.bce-home__foot-company {
  color: var(--bce-graphite);
  font-weight: 500;
}

.bce-home__foot-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bce-home__foot-col--links {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.bce-home__foot-col--muted {
  color: var(--bce-muted);
}

.bce-home__foot-tel {
  align-self: flex-start;
  color: var(--bce-graphite);
  font-weight: 500;
  font-size: 13px;
}

.bce-home__foot-mail {
  align-self: flex-start;
  color: var(--bce-body);
}

.bce-home__foot-col--links a {
  align-self: flex-start;
  color: var(--bce-body);
}