/* ============================================================
   TIM Tietze Industrie Montage — warstwa stylu (gramatyka Operis)
   Baza: assets/operis-baza.css (fonty Operis self-hosted + reset body)
   Paleta TIM: primary #B10D27 | secondary #252525 | accent #F28A00 | tła #F8F8F8
   Mapowanie ról (wg PALETA w STRUKTURA+TRESCI-DE.md):
   trust-blue→#B10D27, deep-navy→#252525, crisp-white→#fff, light-slate→#F8F8F8,
   akcent wtórny→#F28A00 (oszczędnie: dark-sekcje, hover, badge)
   ============================================================ */

:root {
  --tim-primary: #B10D27;
  --tim-primary-dark: #8E0A1F;
  --tim-secondary: #252525;
  --tim-accent: #F28A00;
  --tim-bg-light: #F8F8F8;
  --tim-text-gray: #D8D8D8;
  --shadow-nav: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 20px 40px -15px rgba(0, 0, 0, 0.08);
  --radius-xl: 1rem;
  --radius-2xl: 2rem;
  --radius-3xl: 3rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-sans);
  color: var(--tim-secondary);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

::selection { background: rgba(177, 13, 39, 0.85); color: #fff; }

:focus-visible { outline: 2px solid var(--tim-primary); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tim-primary); color: #fff; padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.75rem 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

.container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; width: 100%; }
@media (min-width: 40rem) { .container { padding: 0 1.5rem; } }
@media (min-width: 64rem) { .container { padding: 0 2rem; } }

/* ============ NAV: transparent nad hero, pigułka glass po scrollu (Operis) ============
   Gramatura wzorca (pomiar operis-hr.pl 22.09): na starcie brak tła/obramowania
   (logo + linki wprost na zdjęciu), po ~50px scrolla pojawia się pigułka glass:
   tło grafit 50% + blur 12px + border white/10 + shadow, padding 8px->12px.
   Logo zawsze w wariancie jasnym (tim_personal_light.svg). */

.nav-wrap {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center; width: 100%;
  padding: 1.5rem 1rem 0;
  transition: padding 0.5s ease-out;
  pointer-events: none;
}
.nav-wrap.scrolled { padding-top: 0.75rem; }

.nav-inner {
  pointer-events: auto;
  display: flex; align-items: center; width: 100%; max-width: 80rem;
  background: transparent; border: 1px solid transparent; border-radius: 9999px;
  padding: 0.5rem 0;
  transition: all 0.5s ease-out;
}
.nav-wrap.scrolled .nav-inner {
  background: rgba(37, 37, 37, 0.55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.1);
  padding: 0.75rem 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.nav-pill { display: flex; align-items: center; gap: 1rem; width: 100%; }

.nav-logo { flex-shrink: 0; display: inline-flex; align-items: center; }
.nav-logo-img { height: 2.25rem; width: auto; max-width: 100%; }

.nav-links { display: none; align-items: center; gap: 0.25rem; margin-left: auto; }
.nav-link {
  color: rgba(255, 255, 255, 0.85); font-weight: 500; font-size: 0.9rem;
  white-space: nowrap; padding: 0.45rem 0.55rem; border-radius: 9999px;
  transition: all 0.3s ease;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }

.nav-right { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; justify-content: flex-end; }
.nav-links + .nav-right { margin-left: 0; }

/* (P1) Przełącznik języków — układ jak we wzorcu: pielka z 3 pozycjami.
   PL/EN wyłączone (placeholder, disabled) — języki dodamy po odbiorze DE. */
.lang-switch {
  display: inline-flex; align-items: center; gap: 0.15rem;
  padding: 0.2rem; border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(30, 30, 30, 0.35);
}
.lang-btn {
  min-width: 1.95rem; height: 1.9rem; padding: 0 0.45rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
  white-space: nowrap; color: rgba(255, 255, 255, 0.65);
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.lang-btn img {
  display: block; width: 1.375rem; height: 1.375rem; border-radius: 50%;
  object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.lang-btn:hover:not(:disabled):not(.is-active) { color: #fff; background: rgba(255, 255, 255, 0.1); }
.lang-btn:hover:not(:disabled):not(.is-active) img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); }
.lang-btn.is-active { background: var(--tim-primary); color: #fff; box-shadow: 0 0 0 2px var(--tim-primary), 0 0 0 3px rgba(255, 255, 255, 0.4); }
.lang-btn.is-active img { box-shadow: 0 0 0 1.5px #fff; }
.lang-btn:disabled { color: rgba(255, 255, 255, 0.58); cursor: not-allowed; }
.lang-btn:disabled img { opacity: 0.45; filter: grayscale(35%); }
.nav-right .lang-switch { display: none; }

.nav-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; padding: 0 0.7rem;
  border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.3s ease;
}
.nav-burger:hover { background: rgba(255, 255, 255, 0.16); }
.nav-burger span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 64rem) {
  .nav-links { display: flex; }
  .nav-burger { display: none; }
  .nav-logo-img { height: 2.85rem; }
  .nav-right .lang-switch { display: inline-flex; }
}
@media (max-width: 63.98rem) {
  .nav-right .btn-nav { display: none; }
  .nav-pill { gap: 0.75rem; }
  /* Logo na CAŁĄ wolną szerokość paska (feedback K. 23.09):
     kontener rozciąga się (flex:1), img rośnie do pełnej wysokości
     przycisku i wypełnia szerokość; contain pilnuje proporcji SVG,
     gdy miejsce spadnie (wąskie telefony / stan scrolled). */
  .nav-logo { flex: 1 1 auto; min-width: 0; }
  .nav-logo-img {
    height: 2.75rem; width: auto; max-width: 100%;
    object-fit: contain; object-position: left center;
  }
}

/* ============ MOBILE MENU: pełnoekranowy off-canvas z prawej (Operis) ============
   (P3) Porządek stylistyczny: grafitowy gradient z delikatną poświatą czerwoną
   w rogach, logo w jednym rzędzie do samego końca, języki w własnym bloku,
   dolny rząd: jedno CTA + okrągłe kontakty w jednej linii. */

.mmenu {
  position: fixed; inset: 0; z-index: 110;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 1.25rem 1.5rem 1.5rem;
  background: linear-gradient(180deg, #2B2B2B 0%, #222222 52%, #1A1A1A 100%);
  color: #fff; overflow-y: auto;
  opacity: 0; transform: translateX(100%); visibility: hidden;
  transition: all 0.3s ease;
}
.mmenu::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(560px 420px at 88% -6%, rgba(177, 13, 39, 0.16), transparent 62%),
    radial-gradient(460px 340px at -12% 106%, rgba(177, 13, 39, 0.10), transparent 58%);
}
.mmenu.open { opacity: 1; transform: translateX(0); visibility: visible; }
@media (min-width: 40rem) { .mmenu { padding: 2rem; } }

.mmenu-top {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mmenu-logo { height: 2.6rem; width: auto; max-width: calc(100% - 4.5rem); object-fit: contain; object-position: left center; }
.mmenu-close {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08);
}
.mmenu-nav { position: relative; display: flex; flex-direction: column; margin-top: 0.25rem; }
.mmenu-link {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: var(--font-heading); font-weight: 600; font-size: 1.35rem;
  color: #fff; padding: 1.05rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.3s ease, padding-left 0.3s ease;
}
.mmenu-link:hover { color: var(--tim-accent); padding-left: 0.4rem; }
.mmenu-link-icon { flex-shrink: 0; color: var(--tim-accent); }
@media (min-width: 40rem) { .mmenu-link { font-size: 1.6rem; } }

/* (P3) Języki w offcanvas — spójny blok jak we wzorcu */
.mmenu-lang {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.75rem; padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.05);
}
.mmenu-lang-label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
}
.lang-switch-menu { background: rgba(255, 255, 255, 0.07); }
.lang-switch-menu .lang-btn { min-width: 2.25rem; height: 2.1rem; }
.lang-switch-menu .lang-btn img { width: 1.75rem; height: 1.75rem; }

.mmenu-bottom {
  position: relative; margin-top: auto; padding-top: 1.75rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
  display: flex; align-items: center; gap: 0.75rem;
}
.mmenu-bottom .btn-block { flex: 1; width: auto; min-width: 0; }
.mmenu-contacts { display: flex; gap: 0.6rem; flex-shrink: 0; }
.mmenu-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 9999px; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.07);
  transition: transform 0.3s ease, background 0.3s ease;
}
.mmenu-chip:hover { transform: scale(1.08); background: rgba(255, 255, 255, 0.14); }
/* oba kontakty w spokojnym stylu obrysowym — czerwień w dolnym rzędzie tylko przy CTA */

body.menu-locked { overflow: hidden; }

/* ============ PRZYCISKI (Operis MagneticButton: lift + sheen) ============ */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.6rem; border-radius: 9999px;
  font-weight: 600; font-size: 1rem; line-height: 1.2;
  transition: all 0.3s ease-out;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn-sheen {
  position: absolute; inset: 0; background: rgba(255, 255, 255, 0.1);
  opacity: 0; transition: opacity 0.3s ease;
}
.btn:hover .btn-sheen { opacity: 1; }
.btn-label { position: relative; z-index: 10; }

.btn-primary { background: var(--tim-primary); color: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
.btn-primary:hover { background: var(--tim-primary-dark); box-shadow: 0 20px 25px -5px rgba(177, 13, 39, 0.25), 0 8px 10px -6px rgba(177, 13, 39, 0.25); }

.btn-outline {
  background: rgba(255, 255, 255, 0.06); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.15); }

.btn-lg { padding: 1rem 2rem; font-size: 1.125rem; }
.btn-nav { padding: 0.65rem 1.25rem; font-size: 0.925rem; white-space: nowrap; }
.btn-block { width: 100%; }

/* ============ HERO: slider 4 tła + treść (Operis Hero) ============ */

.hero {
  position: relative; min-height: 100dvh;
  display: flex; align-items: center;
  padding: 7.4rem 0 9rem; /* rezerwacja na nav (Operis pt-[118px]) + miejsce na zakładkę TrustBar */
  overflow: hidden; color: #fff;
}

/* bleed 15% góra/dół — miejsce na parallax yPercent (gramatyka Operis: tło hero 10–15%) */
.hero-slides { position: absolute; inset: -15% 0; will-change: transform, opacity; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.2s ease;
}
.hero-slide.active { opacity: 1; animation: heroZoom 7s ease-out forwards; }
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }

.hero-overlay { position: absolute; inset: 0; pointer-events: none; }
/* Globalny overlay rozjaśniony (recenzja 22.09: poprzedni 0.74/0.55/0.82 zaćmiał
   slajdy): cały czas zapewnia bazowy kontrast, scrim lokalny (poniżej) robi
   resztę pod blokiem tekstu — identycznie na każdym z 4 slajdów. */
.hero-overlay-1 { background: linear-gradient(180deg, rgba(15, 15, 15, 0.52) 0%, rgba(15, 15, 15, 0.38) 45%, rgba(15, 15, 15, 0.60) 100%); }
.hero-overlay-2 { background: radial-gradient(1100px 600px at 50% 40%, transparent 0%, rgba(0, 0, 0, 0.18) 100%); }

/* Lokalny scrim pod blokiem tekstu hero (P2: rozjaśniony po przeglądzie —
   za „Produktion” ma być jasno; czytelność trzymają cienie tekstu + overlaye).
   Dalej powtarzalny na każdym z 4 slajdów — kontrast nie jest loterią. */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: linear-gradient(90deg, rgba(10, 10, 10, 0.20) 0%, rgba(10, 10, 10, 0.12) 44%, rgba(10, 10, 10, 0.04) 66%, rgba(10, 10, 10, 0) 82%);
}
/* Mobile: tekst wchodzi na pełną szerokość — scrim pionowy pod całą treścią */
@media (max-width: 63.98rem) {
  .hero-scrim {
    background: linear-gradient(180deg, rgba(10, 10, 10, 0) 8%, rgba(10, 10, 10, 0.10) 30%, rgba(10, 10, 10, 0.20) 100%);
  }
}

.hero-content { position: relative; z-index: 10; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 1.1rem; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
}
/* (a) kropka badge — hero to ciemne tło, ale czerwień #B10D27 słabo czyta się
   na ciemnym: .ping-base to jaśniejszy odcień tej samej czerwieni. */
.ping-dot {
  position: relative; width: 0.55rem; height: 0.55rem;
  border-radius: 9999px; background: var(--ping-base, var(--tim-accent));
  box-shadow: 0 0 10px var(--ping-base, var(--tim-accent));
}
.ping-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background: var(--ping-base, var(--tim-accent)); animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: 0.7; } 75%, 100% { transform: scale(2.4); opacity: 0; } }
.hero .ping-dot { --ping-base: #D6203B; }

.hero-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.9rem, 5.2vw, 4rem); line-height: 1.08;
  max-width: 56rem; text-wrap: balance;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.7);
  margin-bottom: 1.5rem;
}
/* (a) Dyscyplina akcentu: czerwień jest jasna, ale bez scrimgu traci widoczność
   na zdjęciu — dodatkowy drop-shadow podbija czytelność na każdym slajdzie. */
.accent-glow {
  font-family: var(--font-accent); font-style: italic; font-weight: 700;
  font-size: 1.22em; letter-spacing: 0.01em; display: inline-block;
  color: #D6203B;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.30), 0 0 44px rgba(255, 255, 255, 0.16);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.hero-sub {
  font-size: 1.15rem; color: rgba(255, 255, 255, 0.85); max-width: 42rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  margin-bottom: 2.5rem;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-dots {
  position: absolute; bottom: 8.5rem; right: 1.5rem; z-index: 20;
  display: flex; flex-direction: column; gap: 0.75rem;
}
/* (b) Kropki slidera: target dotykowy min. 44px (okno klikalne przez ::before),
   widoczna ramka + aria-label w HTML; akcent czerwieni jak w całym hero (a). */
.hero-dot {
  position: relative; width: 0.8rem; height: 0.8rem; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: all 0.3s ease;
}
.hero-dot::before {
  content: ""; position: absolute; inset: -1.05rem; border-radius: 9999px;
}
.hero-dot.active { background: var(--tim-primary); border-color: rgba(255, 255, 255, 0.85); box-shadow: 0 0 10px rgba(177, 13, 39, 0.7); transform: scale(1.15); }
.hero-dot:not(.active):hover { background: rgba(255, 255, 255, 0.8); }
@media (min-width: 64rem) { .hero-dots { right: 2.5rem; } }

/* ============ TRUSTBAR: biała karta na zakładkę (Operis TrustBar) ============ */

.trustbar { background: #fff; }
.tb-card {
  position: relative; z-index: 30; margin-top: -4.5rem;
  background: #fff; border: 1px solid rgba(241, 245, 249, 1);
  border-radius: 2rem; box-shadow: var(--shadow-card);
  padding: 2rem;
}
@media (min-width: 40rem) { .tb-card { border-radius: var(--radius-3xl); padding: 3rem; } }

.tb-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 48rem) {
  .tb-grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .tb-item { padding: 0 1.5rem; }
  .tb-item + .tb-item { border-left: 1px solid rgba(226, 232, 240, 1); }
}
.tb-item { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; }
.tb-num { font-family: var(--font-heading); font-weight: 700; font-size: 2.25rem; color: var(--tim-secondary); line-height: 1.1; }
@media (min-width: 40rem) { .tb-num { font-size: 3rem; } }
.tb-num em { font-style: normal; color: var(--tim-primary); }
.tb-label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; font-weight: 600; color: #64748b; line-height: 1.3; }


/* ============ SEKCJE: rytm py-24/py-32, naprzemienne tła (Operis) ============ */

.sec { padding: 6rem 0; position: relative; overflow: hidden; }
@media (min-width: 40rem) { .sec { padding: 8rem 0; } }

.sec-white { background: #fff; color: var(--tim-secondary); }
.sec-light { background: var(--tim-bg-light); color: var(--tim-secondary); }
.sec-dark { background: var(--tim-secondary); color: #fff; }

.sec-head { max-width: 48rem; margin: 0 auto 4rem; text-align: center; position: relative; z-index: 10; }

.eyebrow {
  display: inline-block; padding: 0.4rem 1rem; border-radius: 9999px;
  background: rgba(177, 13, 39, 0.1); color: var(--tim-primary);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.sec-dark .eyebrow { background: rgba(242, 138, 0, 0.14); color: var(--tim-accent); }

.sec-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.15;
  margin-bottom: 1.25rem;
}
.sec-title .accent {
  font-family: var(--font-accent); font-style: italic; font-weight: 700;
  font-size: 1.22em; letter-spacing: 0.01em; display: inline-block;
  color: var(--tim-primary);
}
.sec-dark .sec-title .accent { color: var(--tim-accent); }
.split-word { display: inline-block; will-change: transform, opacity; }

.lead { font-size: 1.125rem; color: #475569; }
.lead-dark { color: rgba(255, 255, 255, 0.75); }
.sec-dark .lead { color: rgba(255, 255, 255, 0.75); }

/* Ambient blobs (Operis: blur-3xl koła w tle) */
.blob { position: absolute; border-radius: 9999px; filter: blur(120px); pointer-events: none; }
.blob-1 { width: 480px; height: 480px; background: rgba(177, 13, 39, 0.07); top: -160px; right: -120px; }
.blob-2 { width: 560px; height: 560px; background: rgba(177, 13, 39, 0.16); top: -180px; left: -160px; }
.sec-dark .blob-2 { background: rgba(177, 13, 39, 0.22); }

/* ============ (P4) SEKCJE Z TŁEM ZDJĘCIOWYM: Ablauf + Dual-CTA ============
   Ciemne zdjęcie + przyciemniający tint (kontrast jasnych kart bez zmian);
   obraz z zapasem pionowym (inset -12%) pod efekt parallax przy scrollu. */

.sec-has-bg { color: #fff; }
.sec-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sec-bg-img {
  position: absolute; inset: -12% 0;
  background-size: cover; background-position: center;
  will-change: transform;
}
.sec-bg-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.82) 0%, rgba(26, 26, 26, 0.64) 50%, rgba(22, 22, 22, 0.88) 100%);
}
.sec-has-bg .container { position: relative; z-index: 10; }

/* ============ BRANCHEN: 4 karty (gramatura kart z tickera Operis) ============ */

.branch-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; position: relative; z-index: 10; }
@media (min-width: 40rem) { .branch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .branch-grid { grid-template-columns: repeat(4, 1fr); } }

.branch-card {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: var(--radius-2xl);
  background: var(--tim-secondary);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.branch-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); }

.branch-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform 0.7s ease;
}
.branch-card:hover .branch-bg { transform: scale(1.05); }

.branch-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.82) 100%);
}
.branch-tint::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(177, 13, 39, 0.3); mix-blend-mode: overlay;
  opacity: 0; transition: opacity 0.5s ease;
}
.branch-card:hover .branch-tint::after { opacity: 1; }

.branch-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 1.5rem;
}
.branch-title { color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; }
.branch-arrow {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff; transition: background 0.3s ease, transform 0.3s ease;
}
.branch-card:hover .branch-arrow { background: var(--tim-primary); transform: translateX(3px); }

/* ============ ABLAUF: kroki 01–04 (Operis process-step) ============ */

.process-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; position: relative; z-index: 10; }
@media (min-width: 48rem) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .process-grid { grid-template-columns: repeat(4, 1fr); } }

.process-step {
  background: var(--tim-bg-light); border: 1px solid #f1f5f9;
  border-radius: var(--radius-2xl); padding: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.process-step:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(37, 37, 37, 0.08); }

.step-num {
  display: block; font-family: var(--font-heading); font-weight: 700;
  font-size: 2.5rem; line-height: 1; color: var(--tim-primary);
  margin-bottom: 1rem;
}
.step-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.3rem; margin-bottom: 0.6rem; color: var(--tim-secondary); }
.step-desc { font-size: 0.975rem; color: #475569; }

/* ============ ÜBER UNS: split + parallax + highlight-box (Operis About) ============ */

.about-grid {
  display: grid; grid-template-columns: 1fr; gap: 3.5rem;
  align-items: center; position: relative; z-index: 10;
}
@media (min-width: 64rem) { .about-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.about-text .sec-title { text-align: left; }
.about-p { color: #475569; margin-bottom: 1rem; }

.check-list { list-style: none; margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0.75rem; }
.check-list li { position: relative; padding-left: 2.1rem; color: #334155; font-weight: 500; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.15rem;
  width: 1.4rem; height: 1.4rem; border-radius: 9999px;
  background: rgba(16, 185, 129, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

.highlight-box {
  background: rgba(177, 13, 39, 0.07);
  border-left: 4px solid var(--tim-primary);
  border-radius: 0 1rem 1rem 0; padding: 1.5rem 1.75rem;
  margin-top: 1.75rem;
}
.highlight-box p { font-weight: 600; color: var(--tim-secondary); }

.about-media { position: relative; }
.about-img-wrap { position: relative; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: 0 24px 60px rgba(37, 37, 37, 0.18); aspect-ratio: 4 / 3; }
/* bleed 15% góra/dół pod parallax yPercent (Operis: zdjęcie misji 20%) */
.about-img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; display: block; will-change: transform; }
.about-badge {
  position: absolute; left: -0.75rem; bottom: -1.5rem;
  background: #fff; border: 1px solid #f1f5f9; border-radius: var(--radius-xl);
  box-shadow: 0 16px 40px rgba(37, 37, 37, 0.14);
  padding: 1.1rem 1.5rem; display: flex; flex-direction: column;
}
@media (min-width: 48rem) { .about-badge { left: -1.75rem; } }
.about-badge-num { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; color: var(--tim-primary); line-height: 1.2; }
.about-badge-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: #64748b; max-width: 16rem; }

/* ============ WARUM TIM: karty info-card (Operis) ============ */

.why-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; position: relative; z-index: 10; }
@media (min-width: 40rem) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .why-grid { grid-template-columns: repeat(4, 1fr); } }

.why-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: var(--radius-xl); padding: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.why-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(177, 13, 39, 0.06); }

.why-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-xl);
  background: rgba(177, 13, 39, 0.1); color: var(--tim-primary);
  margin-bottom: 1.5rem;
}
.why-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; margin-bottom: 0.5rem; }
.why-desc { font-size: 0.95rem; color: #475569; }

/* ============ DUAL-CTA (Operis DualCTA) ============ */

.cta-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; position: relative; z-index: 10; }
@media (min-width: 64rem) { .cta-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }

.cta-card {
  height: 100%;
  border-radius: var(--radius-2xl); padding: 2.5rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem;
}
@media (min-width: 40rem) { .cta-card { padding: 3rem; } }

.cta-card:nth-child(1) {
  background: linear-gradient(135deg, var(--tim-primary) 0%, var(--tim-primary-dark) 100%);
  color: #fff; box-shadow: 0 24px 60px rgba(177, 13, 39, 0.35);
}
.cta-card:nth-child(2) {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: #fff;
}

.cta-tag {
  display: inline-block; padding: 0.4rem 1rem; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.cta-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.25; }
.cta-desc { color: rgba(255, 255, 255, 0.8); }
.cta-card .btn { margin-top: auto; }

/* ============ FOOTER (Operis Footer) ============
   (P4) Spójne ciemne tło ze zdjęciową teksturą (tryby, opacity 16%) pod całą
   stopką — kontenery i treści bez zmian. */

.footer {
  position: relative; overflow: hidden;
  background: var(--tim-secondary); color: var(--tim-text-gray);
  padding: 4rem 0 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.footer-bg-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.16; filter: saturate(0.7);
}
.footer .container { position: relative; z-index: 10; }

.footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* (f) „Für Bewerber" we własnej kolumnie (nie pod Leistungen): 5 kolumn —
   brand szerszy, następnie Für Unternehmen / Leistungen / Für Bewerber / Prawne */
@media (min-width: 64rem) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 2.5rem; } }

.footer-logo { height: 2.75rem; width: auto; margin-bottom: 1.25rem; }
.footer-claim { font-size: 0.95rem; margin-bottom: 1.25rem; max-width: 24rem; color: rgba(216, 216, 216, 0.8); }
.footer-address { font-style: normal; font-size: 0.95rem; line-height: 1.9; color: rgba(216, 216, 216, 0.75); }
.footer-address a { transition: color 0.3s ease; }
.footer-address a:hover { color: var(--tim-accent); }

.footer-head { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: #fff; margin-bottom: 1.25rem; }
.footer-col a { display: block; font-size: 0.925rem; color: rgba(216, 216, 216, 0.7); padding: 0.35rem 0; transition: color 0.3s ease, padding-left 0.3s ease; }
.footer-col a:hover { color: #fff; padding-left: 0.35rem; }

.footer-bottom {
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; flex-direction: column; gap: 1rem;
  font-size: 0.78rem; color: rgba(216, 216, 216, 0.55);
}
@media (min-width: 48rem) { .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { transition: color 0.3s ease; }
.footer-legal a:hover { color: #fff; }

/* ============ DOSTĘPNOŚĆ: ograniczenie ruchu ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   PODSTRONY: hero kompaktowy ze zdjęciowym tłem (gramatyka Operis)
   Karty t_e7a63893 (fuer-unternehmen) i kolejne trasy tej fazy.
   Ten sam nav/mmenu/footer/slider-app.js co na Start — różni się
   tylko hero: banner trasy, min-height 62/72vh, bez slidera i dots.
   ============================================================ */

/* Tło hero podstrony: bleed 15% pod parallax yPercent (jak hero-slides na Start) */
.page-hero {
  position: relative; display: flex; align-items: center;
  min-height: 72vh; overflow: hidden; color: #fff;
}
.page-hero-bg {
  position: absolute; inset: -15% 0; background-size: cover; background-position: center;
  will-change: transform;
}
.page-hero .hero-overlay-1 { z-index: 1; }
.page-hero .hero-overlay-2 { z-index: 1; }
/* scrim pod blokiem tekstu — ten sam kierunek i wartości co .hero-scrim na Start */
.page-hero .hero-scrim { z-index: 2; }
.page-hero .hero-content { padding: 8.5rem 1rem 5rem; } /* rezerwacja na nav (pt-118); boki = gutter .container */
@media (min-width: 40rem) { .page-hero .hero-content { padding: 8.5rem 1.5rem 5rem; } }
@media (min-width: 64rem) { .page-hero .hero-content { padding: 8.5rem 2rem 5rem; } }

@media (max-width: 63.98rem) { .page-hero { min-height: 62vh; } }
@media (max-width: 39.98rem) { .page-hero { min-height: 56vh; } .page-hero .hero-content { padding: 7.5rem 1rem 4rem; } }

/* Breadcrumb nad tytułem hero (aria-label, pierwsza pozycja ukryta dla oczu) */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75); margin-bottom: 1.1rem;
}
.breadcrumb a { color: rgba(255, 255, 255, 0.75); transition: color 0.3s ease; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { opacity: 0.55; }
.breadcrumb [aria-hidden="true"] {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.breadcrumb .current { color: #fff; }

/* Tytuł hero podstrony: jak .hero-title, nieco mniejszy clamp */
.page-hero .hero-title { font-size: clamp(1.9rem, 4.2vw, 3.4rem); }
.page-hero .hero-sub { margin-bottom: 2.25rem; }

/* INTRO: teksty 1:1 ze starej strony (kolumna max 52rem) */
.intro-col { max-width: 52rem; margin: 0 auto; text-align: center; }
.intro-lead { font-size: 1.15rem; color: #334155; font-weight: 500; margin-bottom: 1.5rem; }
.intro-col .about-p { font-size: 1.025rem; }
.intro-strong { font-weight: 600; color: var(--tim-secondary); margin-bottom: 1rem; }

/* USP-lista: 8 punktów „Unsere Leistungen für Ihr Unternehmen" (ikony check,
   ale czerwień TIM — to zaleta dla firmy, nie potwierdzenie jak .check-list) */
.usp-list { list-style: none; margin: 2rem auto 0; padding: 0; text-align: left;
  display: grid; grid-template-columns: 1fr; gap: 0.65rem 2.5rem; max-width: 52rem; }
@media (min-width: 40rem) { .usp-list { grid-template-columns: repeat(2, 1fr); } }
.usp-list li { position: relative; padding-left: 2.1rem; color: #334155; font-weight: 500; }
.usp-list li::before {
  content: ""; position: absolute; left: 0; top: 0.15rem;
  width: 1.4rem; height: 1.4rem; border-radius: 9999px;
  background-color: rgba(177, 13, 39, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B10D27' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
/* ostatni punkt „… " — na całą szerokość (nie wygląda na sierotę) */
@media (min-width: 40rem) { .usp-list li:last-child { grid-column: 1 / -1; } }

/* ZYTAAT: cytat ze starej strony (Cormorant italic, duża cudzysłowa, na jasnym) */
.zitat {
  max-width: 52rem; margin: 4.5rem auto 0; text-align: center;
  padding: 2.5rem 1.75rem 0; border-top: 1px solid #e2e8f0;
}
@media (min-width: 40rem) { .zitat { padding: 3rem 2.5rem 0; } }
.zitat-mark {
  display: block; font-family: var(--font-accent); font-size: 3.4rem; line-height: 0.6;
  color: var(--tim-primary); margin-bottom: 1rem;
}
.zitat-text {
  font-family: var(--font-accent); font-style: italic; font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.5; color: var(--tim-secondary);
}
.zitat-author {
  display: inline-block; margin-top: 1.25rem; padding: 0.35rem 1.1rem;
  border-radius: 9999px; background: rgba(177, 13, 39, 0.08); color: var(--tim-primary);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}

/* BEREICHE: karty linkujące 6 podstron (3 kolumny desktop, tint jak branch-card) */
.bereiche-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  position: relative; z-index: 10;
}
@media (min-width: 40rem) { .bereiche-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .bereiche-grid { grid-template-columns: repeat(3, 1fr); } }

.bereiche-card {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; border-radius: var(--radius-2xl);
  background: var(--tim-secondary);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bereiche-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); }
.bereiche-card .branch-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.7s ease; }
.bereiche-card:hover .branch-bg { transform: scale(1.05); }
.bereiche-card .branch-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.82) 100%);
}
.bereiche-card .branch-tint::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(177, 13, 39, 0.3); mix-blend-mode: overlay;
  opacity: 0; transition: opacity 0.5s ease;
}
.bereiche-card:hover .branch-tint::after { opacity: 1; }
.bereiche-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 1.5rem;
}
.bereiche-title { color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; }
.bereiche-card .branch-arrow {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff; transition: background 0.3s ease, transform 0.3s ease;
}
.bereiche-card:hover .branch-arrow { background: var(--tim-primary); transform: translateX(3px); }

/* ============================================================
   KONTAKT (karta t_cde0e496): dane + formularz (wysyłka nieaktywna)
   Struktura starej strony: kolumna info (adres/tel/fax/mail/standorte)
   + karta mapy (link, bez iframe) + formularz CF7 1:1 (Name, E-Mail,
   Nachricht, zgoda Datenschutz, 2 noty, Senden).
   ============================================================ */

.kontakt-grid {
  display: grid; grid-template-columns: 1fr; gap: 3rem;
  position: relative; z-index: 10; align-items: start;
}
@media (min-width: 64rem) { .kontakt-grid { grid-template-columns: 1.15fr 1fr; gap: 4rem; } }

.kontakt-strong {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.1rem; color: var(--tim-secondary);
  margin: 1.9rem 0 0.55rem;
}
.kontakt-info .kontakt-strong:first-child { margin-top: 0; }
.kontakt-firma { font-size: 1.05rem; color: #334155; line-height: 1.8; }

.kontakt-liste { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.kontakt-liste li { display: flex; align-items: center; gap: 0.7rem; color: #334155; font-weight: 500; }
.kontakt-liste svg { flex-shrink: 0; color: var(--tim-primary); }
.kontakt-liste a { border-bottom: 1px solid rgba(177, 13, 39, 0.25); transition: color 0.3s ease, border-color 0.3s ease; }
.kontakt-liste a:hover { color: var(--tim-primary); border-color: var(--tim-primary); }

.kontakt-standorte { color: #475569; max-width: 34rem; }

.kontakt-media { margin-top: 2rem; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-card); }
.kontakt-media img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

/* Karta mapy: LINK do Google Maps (stara strona miała iframe — bez zgód nie osadzamy) */
.kontakt-map { position: sticky; top: 6.5rem; }
.map-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem;
  background: var(--tim-bg-light); border: 1px solid #e2e8f0;
  border-radius: var(--radius-2xl); padding: 2.25rem;
  background-image:
    radial-gradient(420px 300px at 110% -10%, rgba(177, 13, 39, 0.07), transparent 60%);
  box-shadow: var(--shadow-card);
}
.map-pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; border-radius: 9999px;
  background: rgba(177, 13, 39, 0.1); color: var(--tim-primary);
}
.map-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--tim-secondary); }
.map-addr { color: #475569; line-height: 1.7; }
.map-card .btn { margin-top: 0.5rem; }

/* Formularz: layout 1:1 ze starym CF7 (one-column, pełna szerokość only) */
.kontakt-form {
  position: relative; z-index: 10;
  max-width: 52rem; margin: 0 auto;
  background: #fff; border: 1px solid #e2e8f0; border-radius: var(--radius-2xl);
  padding: 2.25rem 1.75rem; box-shadow: var(--shadow-card);
}
@media (min-width: 40rem) { .kontakt-form { padding: 3rem; } }

.kf-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 48rem) { .kf-grid { grid-template-columns: repeat(2, 1fr); } }
.kf-field { display: flex; flex-direction: column; gap: 0.5rem; }
.kf-full { grid-column: 1 / -1; }

.kontakt-form label { font-weight: 600; font-size: 0.95rem; color: var(--tim-secondary); }
.kontakt-form .required { color: var(--tim-primary); }

.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form textarea {
  width: 100%; font: inherit; color: var(--tim-secondary);
  background: #fff; border: 1px solid #cbd5e1; border-radius: 0.9rem;
  padding: 0.85rem 1.1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.kontakt-form textarea { min-height: 8.5rem; resize: vertical; }
.kontakt-form input:focus, .kontakt-form textarea:focus {
  outline: none; border-color: var(--tim-primary);
  box-shadow: 0 0 0 3px rgba(177, 13, 39, 0.12);
}

.kf-check { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
.kf-check input[type="checkbox"] {
  appearance: auto; width: 1.2rem; height: 1.2rem; margin-top: 0.2rem;
  flex-shrink: 0; accent-color: var(--tim-primary); cursor: pointer;
}
.kf-check label { font-weight: 500; color: #334155; cursor: pointer; }
.kf-check a { color: var(--tim-primary); border-bottom: 1px solid rgba(177, 13, 39, 0.3); }

.kf-info { font-size: 0.875rem; color: #64748b; margin-top: 1.1rem; }
.kf-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.kf-response { font-size: 0.95rem; font-weight: 600; color: var(--tim-primary); }

@media (max-width: 39.98rem) {
  .kontakt-map { position: static; }
  .kontakt-form { padding: 1.75rem 1.25rem; }
}

/* ============================================================
   BEWERBER (karta t_34d4dc17): Online-Bewerbung — karty 4 branż,
   lista zalet + Zitat, formularz aplikacji (wysyłka nieaktywna).
   Layout pól 1:1 ze starym CF7 f1011 — reużywa .kontakt-form/.kf-*.
   ============================================================ */

/* Group label (radiogroup) — bez for, dlatego osobna klasa */
.bew-group-label {
  font-weight: 600; font-size: 0.95rem; color: var(--tim-secondary);
}

/* Tel (Telefonnummer Arbeitspartner) — te same pole co tekstowe
   (.kontakt-form w KONTAKT nie ma typu tel, więc reguła jest tu obojętna) */
.kontakt-form input[type="tel"] {
  width: 100%; font: inherit; color: var(--tim-secondary);
  background: #fff; border: 1px solid #cbd5e1; border-radius: 0.9rem;
  padding: 0.85rem 1.1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.kontakt-form input[type="tel"]:focus {
  outline: none; border-color: var(--tim-primary);
  box-shadow: 0 0 0 3px rgba(177, 13, 39, 0.12);
}

/* Radio Führerschein Klasse B: Ja / Nein w jednym rzędzie */
.bew-radio-row { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 0.25rem; }
.bew-radio {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 500; color: #334155; cursor: pointer;
}
.bew-radio input[type="radio"] {
  appearance: auto; width: 1.2rem; height: 1.2rem; margin: 0;
  accent-color: var(--tim-primary); cursor: pointer;
}

/* Upload CV: customowy styl przycisku z etykietami w języku podstrony (zero FOUC / zero obcych języków przeglądarki) */
.bew-file-wrap {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  width: 100%; font: inherit; color: var(--tim-secondary);
  background: #fff; border: 1px dashed #cbd5e1; border-radius: 0.9rem;
  padding: 0.75rem 1.1rem; cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.bew-file-wrap:focus-within, .bew-file-wrap:hover {
  border-color: var(--tim-primary);
  box-shadow: 0 0 0 3px rgba(177, 13, 39, 0.08);
}
.bew-file-btn {
  font: inherit; font-size: 0.925rem; font-weight: 600; color: var(--tim-primary);
  background: rgba(177, 13, 39, 0.08); border: 1px solid rgba(177, 13, 39, 0.3);
  border-radius: 9999px; padding: 0.5rem 1.1rem; cursor: pointer;
  transition: background 0.3s ease; display: inline-flex; align-items: center; justify-content: center;
}
.bew-file-btn:hover { background: rgba(177, 13, 39, 0.15); }
.bew-file-name {
  font-size: 0.925rem; color: #64748b; font-weight: 400;
  word-break: break-all;
}
.bew-file-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.bew-file input[type= file]:not(.bew-file-input) {
  width: 100%; font: inherit; color: var(--tim-secondary);
  background: #fff; border: 1px dashed #cbd5e1; border-radius: 0.9rem;
  padding: 0.75rem 1.1rem; cursor: pointer;
}

/* Zaproszenie do rozmowy (paragraf po 6 punktach) — jak .intro-col na FU */
.bew-einladung { max-width: 52rem; margin: 2.25rem auto 0; text-align: center; }
.bew-einladung .about-p { font-size: 1.025rem; }

@media (max-width: 39.98rem) {
  .bew-radio-row { gap: 1.1rem; }
}

/* ============ PVB: grafika Ablauf-Schema (Bewerber.svg) na Personalvermittlung & Beratung ============ */
.pvb-gfx {
  margin: 3rem auto 0; max-width: 56rem; text-align: center;
}
.pvb-gfx img {
  width: 100%; height: auto; display: inline-block;
  filter: drop-shadow(0 18px 32px rgba(37, 37, 37, 0.12));
}

/* ============ TV: Tarifvertrag — vorteile + dokumenty (podstrona /fuer-unternehmen/tarifvertrag/) ============ */
.tv-col { max-width: 52rem; margin: 0 auto; }
.tv-col .check-list { text-align: left; }
.tv-pdf-note {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-top: 1rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #64748b;
}
.tv-docs {
  max-width: 52rem; margin: 3rem auto 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 1.25rem; text-align: left;
}
@media (max-width: 63.98rem) { .tv-docs { grid-template-columns: 1fr; max-width: 34rem; } }
.tv-doc-group {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem;
  padding: 1.5rem 1.4rem; box-shadow: 0 12px 32px rgba(37, 37, 37, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tv-doc-group:hover {
  transform: translateY(-4px); box-shadow: 0 20px 44px rgba(37, 37, 37, 0.1);
}
.tv-doc-head {
  display: flex; align-items: center; gap: 0.65rem; margin: 0 0 1.1rem;
  font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700;
  color: var(--tim-secondary);
}
.tv-doc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; flex: none; border-radius: 9999px;
  background: rgba(177, 13, 39, 0.08); color: var(--tim-primary);
}
.tv-doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.tv-doc-list a {
  position: relative; display: block; padding: 0.65rem 2.4rem 0.65rem 2.5rem;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.75rem;
  color: var(--tim-secondary); font-size: 0.92rem; font-weight: 600; line-height: 1.45;
  text-decoration: none; transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.tv-doc-list a::after {
  content: "\2197"; position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%);
  font-size: 0.95rem; color: var(--tim-primary);
}
.tv-doc-list a:hover { border-color: rgba(177, 13, 39, 0.4); background: rgba(177, 13, 39, 0.05); color: var(--tim-primary); }
.tv-doc-list a:focus-visible { outline: 2px solid var(--tim-primary); outline-offset: 2px; }


/* ============ KONTAKT REDESIGN & FILE UPLOAD ============ */
.kontakt-grid {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start;
}
@media (min-width: 64rem) {
  .kontakt-grid { grid-template-columns: 0.95fr 1.05fr; gap: 3.5rem; }
}
.kontakt-form-col .kontakt-form {
  max-width: 100%; margin: 0; padding: 2.25rem 2rem;
}
.kontakt-form-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem;
  color: var(--tim-secondary); margin-bottom: 1.25rem;
}
.file-dropzone {
  position: relative; border: 2px dashed #cbd5e1; border-radius: 1rem;
  background: #f8fafc; padding: 1.25rem 1rem; text-align: center;
  cursor: pointer; transition: all 0.25s ease;
}
.file-dropzone:hover, .file-dropzone.dragover {
  border-color: var(--tim-primary); background: rgba(177, 13, 39, 0.04);
}
.file-dropzone .file-input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  cursor: pointer; z-index: 5;
}
.dropzone-content {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem; pointer-events: none;
}
.dropzone-icon { color: var(--tim-primary); opacity: 0.85; }
.dropzone-main { font-weight: 600; font-size: 0.92rem; color: var(--tim-secondary); }
.dropzone-browse { color: var(--tim-primary); text-decoration: underline; text-underline-offset: 3px; }
.dropzone-hint { font-size: 0.8rem; color: #64748b; margin-top: 0.15rem; }
.kf-security-note {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: 0.8rem; color: #475569; background: #f1f5f9;
  border-radius: 0.75rem; padding: 0.65rem 0.85rem; margin-top: 0.5rem; line-height: 1.45;
}
.kf-security-note svg { flex-shrink: 0; color: #059669; margin-top: 0.15rem; }
.file-list {
  display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.75rem; text-align: left;
}
.file-item {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 0.6rem;
  padding: 0.45rem 0.75rem; font-size: 0.85rem; font-weight: 500;
}
.file-item-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 85%;
}

/* Map Card Section */
.map-container-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: var(--radius-2xl);
  overflow: hidden; box-shadow: var(--shadow-card);
}
.map-card-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem; padding: 1.5rem 2rem; border-bottom: 1px solid #f1f5f9;
}
.map-card-info { display: flex; align-items: center; gap: 1rem; }
.map-card-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--tim-secondary);
}
.map-card-addr { font-size: 0.95rem; color: #64748b; margin-top: 0.15rem; }
.map-embed-wrapper { width: 100%; position: relative; background: #e2e8f0; }