@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:        #c7a546;   /* primary gold — из логотипа */
  --green-dark:   #a8882e;   /* dark gold — hover */
  --green-mid:    #b8943a;   /* mid gold */
  --green-deep:   #8a6e24;   /* deep gold */
  /* backward-compat aliases */
  --green-accent: #c7a546;
  --green-btn:    #c7a546;
  --green-hover:  #a8882e;
  --green-tag:    #c7a546;
  --gold:         #c7a546;
  --black:        #111111;
  --dark:         #0D0C0C;
  --gray-mid:     #666666;
  --gray-light:   #F4F4F4;
  --white:        #ffffff;
  --font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --shadow: 0 4px 24px rgba(0,0,0,.10);
}

html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--black); line-height: 1.6; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.section { padding: 72px 0; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 28px; border-radius: 8px;
  font-size: 14px; font-weight: 500; font-family: var(--font);
  letter-spacing: .3px; cursor: pointer;
  transition: all .2s ease; border: 2px solid transparent;
  text-transform: uppercase; line-height: 26px;
}
.btn-green       { background: var(--green); color: #fff; border-color: var(--green); }
.btn-green:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn-outline     { background: transparent; color: #000; border-color: #000; }
.btn-outline:hover { background: rgba(0,0,0,.08); }
.btn-outline-dark { background: transparent; color: var(--green-dark); border-color: var(--green-dark); border-radius: 32px; }
.btn-outline-dark:hover { background: var(--green-dark); color: #fff; }
.btn-pill { border-radius: 32px; }
.btn-full { width: 100%; justify-content: center; }
.btn-lg { font-size: 24px; padding: 14px 48px; line-height: 35px; border-radius: 8px; }

/* ===== HEADER ===== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(13,12,12,.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .3s ease, border-color .3s ease;
}
/* Полупрозрачный тёмный header на главной (как stats-bar) */
.page-home .site-header {
  background: rgba(31, 31, 31, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.page-home .site-header.scrolled {
  background: rgba(13,12,12,.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 128px;
}
.logo img { height: 50px; width: auto; }

.nav-main { display: flex; align-items: center; gap: 20px; }

/* ===== BURGER BUTTON ===== */
.burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px;
  background: none; border: none; cursor: pointer; padding: 4px;
  z-index: 1100;
}
.burger span {
  display: block; width: 100%; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== MOBILE NAV ===== */
.mobile-nav {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(13,12,12,.98);
  z-index: 1050;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.mobile-nav.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.mobile-nav-inner {
  display: flex; flex-direction: column;
  padding: 120px 32px 48px;
  gap: 4px;
}
.mobile-nav-inner a {
  font-size: 22px; font-weight: 500; color: #fff;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-transform: uppercase; letter-spacing: .5px;
  transition: color .2s;
}
.mobile-nav-inner a:hover { color: var(--gold); }
.mobile-nav-cta {
  margin-top: 20px !important;
  background: var(--gold) !important;
  color: #000 !important;
  border-radius: 32px !important;
  text-align: center !important;
  padding: 16px 0 !important;
  border-bottom: none !important;
}
.mobile-nav-lang {
  display: flex; align-items: center; gap: 12px;
  margin-top: 24px; padding-top: 16px;
}
.mobile-nav-lang a { font-size: 16px; font-weight: 600; color: rgba(255,255,255,.5); border: none !important; padding: 0 !important; }
.mobile-nav-lang a.lang-active { color: var(--gold); }
.mobile-nav-lang span { color: rgba(255,255,255,.25); }
.nav-main > a {
  color: #fff; font-size: 13px;
  font-weight: 400; letter-spacing: .3px;
  text-transform: uppercase; transition: color .18s;
  position: relative;
}
.nav-main > a:hover { color: var(--green); }

/* Активная ссылка — золото + подчёркивание */
.nav-main > a.nav-active {
  color: var(--green) !important;
  position: relative;
}
.nav-main > a.nav-active::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0; right: 0;
  height: 2px;
  background: var(--green);
  border-radius: 1px;
}

/* "DKS FUELS" первый пункт — с подчёркиванием */
.nav-main .nav-brand {
  display: flex; align-items: center; gap: 6px;
}
.nav-main .nav-brand::after {
  content: '';
  position: absolute; bottom: -4px; left: 0;
  width: 100%; height: 1px;
  background: #fff;
}

.nav-chevron {
  display: inline-block; width: 10px; height: 6px;
  flex-shrink: 0; vertical-align: middle; margin-left: 2px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

.nav-lang { color: rgba(255,255,255,.7); font-size: 16px; font-weight: 400; }
.nav-lang-switch { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.nav-lang-switch a { color: rgba(255,255,255,.55); transition: color .2s; }
.nav-lang-switch a:hover { color: #fff; }
.nav-lang-switch a.lang-active { color: var(--gold); font-weight: 700; }
.nav-lang-switch span { color: rgba(255,255,255,.25); }
.btn-nav {
  padding: 8px 18px; font-size: 13px; font-weight: 400;
  border-radius: 32px; border: 2px solid var(--green-dark);
  background: transparent; color: #fff; text-transform: uppercase;
  transition: all .2s; white-space: nowrap; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.btn-nav:hover { background: var(--green-dark); color: #fff; }

/* ===== HERO WRAP — hero + stats bar вместе на одном фоне = 100vh ===== */
.hero-wrap {
  position: relative;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== HERO ===== */
/* Высота определяется контентом; padding-bottom создаёт gap до stats bar */
.hero-home {
  position: relative;
  overflow: hidden;
  background: transparent;
}

@keyframes kenburns {
  0%   { transform: scale(1.0) translate(0%, 0%); }
  35%  { transform: scale(1.06) translate(-1%, 0.5%); }
  70%  { transform: scale(1.08) translate(-0.5%, -1%); }
  100% { transform: scale(1.0) translate(0%, 0%); }
}

/* Фото и градиент на весь hero-wrap (включает stats bar) */
.hero-bg-photo {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('../images/hero-truck.png');
  background-size: cover;
  background-position: center center;
  animation: kenburns 24s ease-in-out infinite;
  transform-origin: center center;
}
.hero-bg-gradient {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.92) 0%,
    rgba(255,255,255,0.60) 30%,
    rgba(255,255,255,0.00) 55%,
    rgba(0,0,0,0.00) 100%
  );
}

.hero-home .container {
  position: relative; z-index: 2;
  padding-top: 170px;
  padding-bottom: 48px;
  display: flex;
  align-items: flex-start;
}
/* Увеличиваем ширину чтобы h1 укладывался в 3 строки как в Figma */
.hero-content { max-width: 860px; }

.hero-tag-label {
  display: block;
  font-size: 16px; font-weight: 400;
  letter-spacing: 0; text-transform: uppercase;
  color: var(--green); margin-bottom: 24px;
}
.hero-home h1 {
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 600;
  color: #000; line-height: 1.15;
  margin-bottom: 24px;
  text-transform: capitalize;
}
.hero-home h1 .text-green { color: var(--green); }
.hero-sub {
  font-size: 16px; color: #333;
  line-height: 26px; margin-bottom: 40px; max-width: 480px;
  text-transform: capitalize;
}
.hero-btns { display: flex; gap: 20px; flex-wrap: wrap; }

/* ===== STATS BAR ===== */
.stats-bar {
  background: transparent;   /* по бокам виден hero/грузовик */
  padding: 0;
  position: relative; z-index: 1;
}
/* Тёмный фон только под контентом, 80% непрозрачность */
.stats-bar .container {
  background: rgba(31, 31, 31, 0.8);
  padding: 0 40px;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  min-height: 145px;
}
.stat-col {
  display: flex; align-items: center; gap: 20px;
  padding: 28px 32px;
  border-right: 1px solid #5A5A5A;
}
.stat-col:first-child { padding-left: 32px; }
.stat-col:last-child { border-right: none; padding-right: 32px; }
.stat-icon-wrap {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.stat-icon-wrap img { display: block; }
.stat-text { display: flex; flex-direction: column; }
.stat-text strong {
  display: block; font-size: 32px; font-weight: 600;
  color: #fff; line-height: 27px;
  margin-bottom: 4px;
}
.stat-text span { font-size: 16px; color: rgba(255,255,255,.8); line-height: 27px; }
.stat-label-bold { font-size: 20px; font-weight: 600; color: #fff; line-height: 27px; }

/* ===== DARK WRAPPER ===== */
/* ===== MARKET PRICES BLOCK ===== */
.prices-outer {
  background: var(--dark);
  margin-top: 48px;
}
.prices-section {
  background: var(--dark);
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 48px 24px;
}
.prices-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px;
}
.prices-label {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold);
}
.prices-header-right {
  display: flex; align-items: center; gap: 20px;
}
.prices-meta {
  font-size: 12px; color: rgba(255,255,255,.45);
}
.prices-currency-toggle {
  display: flex; background: rgba(255,255,255,.08);
  border-radius: 20px; padding: 2px;
}
.pct-btn {
  font-size: 11px; font-weight: 600; letter-spacing: .5px;
  padding: 5px 14px; border-radius: 18px; border: none;
  background: transparent; color: rgba(255,255,255,.45);
  cursor: pointer; transition: all .2s;
}
.pct-btn.pct-active {
  background: var(--gold); color: #000;
}
.prices-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-left: 1px solid rgba(255,255,255,.08);
}
.price-card {
  padding: 24px 20px;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 6px;
}
.pc-name {
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
.pc-value {
  font-size: 28px; font-weight: 600; color: #fff;
  line-height: 1.1;
}
.pc-unit {
  font-size: 11px; color: rgba(255,255,255,.4);
}
.pc-change {
  font-size: 13px; font-weight: 500; margin-top: 4px;
}
.pc-change.up   { color: #4ade80; }
.pc-change.down { color: #f87171; }
.price-card--cta { justify-content: center; align-items: flex-start; }
.pc-value--cta {
  font-size: 20px; color: rgba(255,255,255,.6);
}
.pc-cta-btn {
  display: inline-block; margin-top: 10px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--dark);
  background: var(--gold); border-radius: 32px;
  padding: 8px 16px; transition: opacity .2s;
}
.pc-cta-btn:hover { opacity: .85; }
.prices-disclaimer {
  font-size: 11px; color: rgba(255,255,255,.25);
  margin-top: 16px; text-align: right;
}

.dark-wrapper {
  background: #fff;
  padding-top: 40px;
  padding-bottom: 40px;
  position: relative; z-index: 10;
}

/* ===== INDUSTRIES (Unsere Lösungen) ===== */
.industries-section {
  background: #fff;
  border-radius: 30px;
  border: 1.5px solid #000;
  padding: 60px 0 72px;
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
}

.industries-top {
  display: grid;
  /* Figma: H2 ~29%, описание+кнопка ~71% */
  grid-template-columns: 5fr 9fr;
  gap: 48px; align-items: start;
  padding: 0 60px;
  margin-bottom: 48px;
}
.industries-top-label {
  font-size: 16px; font-weight: 600; line-height: 27px;
  color: var(--green-dark); margin-bottom: 14px; display: block;
}
.industries-top h2 {
  font-size: clamp(24px, 2.5vw, 36px); font-weight: 600;
  line-height: 1.35; color: var(--black);
}
/* Правая колонка: описание выровнено с H2, кнопка ниже */
.industries-top-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  /* 41px = высота лейбла (27px) + margin-bottom (14px) — выравниваем по H2 */
  padding-top: 41px;
}
.industries-top-right p {
  font-size: 14px; color: var(--black);
  line-height: 24px; margin: 0;
}
.btn-more-solutions {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 16px; font-weight: 400; text-transform: uppercase;
  color: var(--black); border: 2px solid var(--green-dark);
  border-radius: 32px; padding: 10px 28px;
  transition: all .2s; flex-shrink: 0;
}
.btn-more-solutions:hover { background: var(--green-dark); color: #fff; }

/* Photo-overlay industry cards */
/* gap:26px из Figma (636-610=26px между карточками) */
.industry-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; padding: 0 60px; }
.industry-card {
  border-radius: 17px; overflow: hidden;
  position: relative; height: 268px;
  transition: transform .3s;
}
.industry-card:hover { transform: scale(1.02); }
.ic-photo {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  position: relative;
}
/* Градиент: верх прозрачный, низ тёмный */
.ic-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0.65) 70%,
    rgba(0,0,0,0.82) 100%
  );
}
/* Иконка — верхний левый, 20px от верха (пропорционально 268/334) */
.ic-icon {
  position: absolute;
  top: 20px; left: 32px;
  z-index: 1;
}
.ic-icon img { display: block; height: 30px; width: auto; }
/* Текст — нижняя часть */
.ic-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0 32px 18px;
  z-index: 1;
}
.ic-overlay h3 {
  font-size: 18px; font-weight: 500; color: #fff;
  line-height: 24px; margin-bottom: 6px;
}
.ic-overlay p {
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.9);
  line-height: 20px; margin-bottom: 10px;
}
.ic-overlay a {
  font-size: 13px; font-weight: 500; color: var(--green);
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px;
}
.ic-overlay a:hover { color: #fff; }
.ic-arrow { font-size: 14px; }

/* ===== WARUM DKS? ===== */
.partner-stats-section { background: var(--dark); padding: 72px 0; }

/* 3 колонки горизонтально: H2 | чеклист | 3 статистики */
.warum-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.5fr;
  gap: 40px;
  align-items: center;
}
/* Колонка 1: тег + заголовок */
.warum-col-left .ps-tag {
  font-size: 15px; font-weight: 600;
  color: var(--green); margin-bottom: 16px; display: block;
  text-transform: uppercase;
}
.warum-col-left h2 {
  font-size: clamp(22px, 2.2vw, 32px); font-weight: 600;
  line-height: 1.47; color: #fff;
}
/* Колонка 2: чеклист */
.checklist { list-style: none; }
.checklist li {
  font-size: 15px; color: #fff; padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  white-space: nowrap;
}
.checklist li:last-child { border-bottom: none; }

/* Колонка 3: 3 статистики с иконками */
.warum-col-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid #5A5A5A;
}
.warum-stat-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 16px;
  border-right: 1px solid #5A5A5A;
}
.warum-stat-item:last-child { border-right: none; }
.warum-stat-icon { height: 28px; width: auto; margin-bottom: 12px; }
.warum-stat-item strong {
  display: block; font-size: 32px; font-weight: 600;
  color: #fff; line-height: 1; margin-bottom: 6px;
}
.warum-stat-item span { font-size: 16px; color: rgba(255,255,255,.8); }

/* ===== ÜBER DKS FUELS + VALUES — единый белый блок как в Figma ===== */
/* Rectangle 11 в Figma: white #FFFFFF, y:1823–y:2817, покрывает обе секции */
.about-section { background: #fff; padding: 80px 0 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.about-img { border-radius: 17px; width: 100%; height: 446px; object-fit: cover; }
.section-label {
  display: block; font-size: 15px; font-weight: 600;
  color: var(--green-mid); margin-bottom: 16px; text-transform: uppercase;
}
.about-heading {
  font-size: clamp(28px, 2.8vw, 40px); font-weight: 600;
  line-height: 1.33; margin-bottom: 28px; color: var(--black);
}
.about-body {
  font-size: 16px; color: var(--black);
  line-height: 28px; margin-bottom: 32px;
}
/* "MEHR ÜBER UNS" — зелёная кнопка с белым текстом (Rectangle 13 в Figma) */
.link-more {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-mid); color: #fff;
  font-size: 16px; font-weight: 500; text-transform: uppercase;
  border-radius: 8px; padding: 16px 40px;
  transition: background .2s; text-decoration: none;
}
.link-more:hover { background: var(--green-dark); }

/* ===== VALUES — продолжение белого блока ===== */
.values-section { background: #fff; padding: 56px 0 80px; }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.value-card {
  padding: 48px 40px 56px;
  border-right: 1px solid #5A5A5A;
  display: grid;
  grid-template-rows: 70px auto 1fr;
  row-gap: 20px;
  align-items: start;
  transition: transform .3s ease;
  cursor: default;
}
.value-card:last-child { border-right: none; }
.value-card:hover { transform: translateY(-8px); }

/* Иконка — фиксированная высота строки 70px, выровнена по низу */
.vc-icon {
  display: flex; align-items: flex-end;
  height: 70px; margin-bottom: 0;
}
.vc-icon img { display: block; }

.value-card h3 {
  font-size: clamp(18px, 1.6vw, 22px); font-weight: 600;
  color: var(--black); margin-bottom: 0; line-height: 1.2;
  align-self: end;
}
.value-card p {
  font-size: 15px; color: #444;
  line-height: 24px; margin: 0;
}

/* ===== CTA DARK ===== */
/* Figma: h2 y:2905, p y:2968 (gap 38px), button y:3045 (gap 52px) */
.cta-dark {
  background: var(--dark);
  padding: 100px 0; text-align: center;
}
.cta-dark h2 {
  font-size: clamp(28px, 2.8vw, 36px); font-weight: 600;
  color: #fff; margin-bottom: 38px; line-height: 1.2;
}
.cta-dark p {
  font-size: 24px; color: rgba(255,255,255,.85);
  margin-bottom: 52px; line-height: 1.4;
}
.btn-cta-large {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-mid); color: #fff;
  font-size: 24px; font-weight: 400; text-transform: uppercase;
  border-radius: 8px; padding: 14px 56px; line-height: 35px;
  min-width: 358px;
  transition: background .2s;
}
.btn-cta-large:hover { background: var(--green-dark); }

/* ===== ÜBER UNS PAGE ===== */
.ou-hero {
  position: relative; min-height: 680px;
  overflow: hidden;
}
.ou-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 30%;
  z-index: 0;
}
.ou-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(13,12,12,.82) 0%, rgba(13,12,12,.50) 100%);
  z-index: 0;
}
.ou-hero .container {
  position: relative; z-index: 1;
  padding-top: 200px; padding-bottom: 80px;
}
.ou-hero-content { max-width: 560px; }
.ou-tag {
  display: block;
  font-size: 16px; font-weight: 500;
  color: var(--gold);
  margin-bottom: 20px;
}
.ou-hero-title {
  font-size: clamp(34px, 3.4vw, 50px); font-weight: 500;
  color: #fff; line-height: 1.32; margin-bottom: 36px;
}
.ou-hero-accent { color: var(--gold); }
.ou-hero-btn {
  display: inline-flex; align-items: center;
  background: var(--gold); color: #fff;
  font-size: 22px; font-weight: 400;
  padding: 14px 48px; border-radius: 8px;
  transition: background .2s;
}
.ou-hero-btn:hover { background: var(--green-dark); }

.ou-content {
  padding: 96px 0;
  background: #fff;
}
.ou-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 72px;
  align-items: start;
}

/* Photo column */
.ou-photo-col { position: relative; }
.ou-photo-wrap {
  position: relative;
  border-radius: 20px;
  overflow: visible;
  display: inline-block;
  width: 100%;
}
.ou-photo-frame {
  position: absolute;
  top: -14px; left: -14px;
  right: -14px;
  bottom: -14px;
  border: 2px solid var(--gold);
  border-radius: 20px;
  opacity: .5;
  pointer-events: none;
}
.ou-photo {
  width: 100%; aspect-ratio: 4/5;
  object-fit: cover; object-position: top center;
  border-radius: 20px;
  position: relative; z-index: 1;
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
  display: block;
}
.ou-photo-caption {
  margin-top: 24px;
  display: flex; flex-direction: column; gap: 4px;
  padding-left: 4px;
  position: relative; z-index: 2;
}
.ou-caption-topic {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold);
}
.ou-caption-name {
  font-size: 16px; font-weight: 600; color: var(--black);
}


/* Text column */
.ou-text-col {
  display: flex; flex-direction: column; gap: 20px;
  padding-top: 8px;
}
.ou-text-col p {
  font-size: 16px; color: #333; line-height: 1.8;
}
.ou-text-col a {
  color: var(--gold); text-decoration: underline;
}
.ou-text-col a:hover { color: var(--green-dark); }


@media (max-width: 1024px) {
  .ou-grid { grid-template-columns: 340px 1fr; gap: 48px; }
}
@media (max-width: 768px) {
  .ou-grid { grid-template-columns: 1fr; gap: 40px; }
  .ou-hero { min-height: 440px; }
  .ou-hero .container { padding-top: 100px; padding-bottom: 40px; }
  .ou-hero-title { font-size: 28px; }
  .ou-photo { aspect-ratio: 4/5; }
  .ou-content { padding: 48px 0; }

  /* Über Uns hero overlay darker on mobile */
  .ou-hero-overlay { background: rgba(13,12,12,.88); }

  /* Inner page heroes */
  .hero-inner { min-height: 360px; }
  .hero-inner .container { padding-top: 100px; padding-bottom: 40px; }
  .hero-inner h1 { font-size: 28px; }
  .hi-content { max-width: 100%; overflow: hidden; }
  .hero-inner .hero-sub { max-width: 100%; white-space: normal; }
  .hero-meta { flex-wrap: wrap; gap: 12px; }

  /* Produkte hero */
  .p-hero { min-height: 500px; }
  .p-hero .container { padding-top: 120px; padding-bottom: 40px; }
  .p-hero-title { font-size: 28px; }
  .p-hero-benefits { grid-template-columns: 1fr; max-width: 100%; }
  .p-industry-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .p-industry-card { height: 220px; }

  /* Team grid */
  .tm-cards-grid { grid-template-columns: 1fr !important; }

  /* Team hero */
  .tm-hero { min-height: 500px; }
  .tm-hero .container { padding-top: 110px; padding-bottom: 40px; }
  .tm-hero-content { max-width: 100%; }
  .tm-hero-title { font-size: 26px; }
  .tm-hero-desc { font-size: 14px; line-height: 1.6; max-width: 100%; }
  .tm-form-row { grid-template-columns: 1fr; }
  .tm-hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(255,255,255,.75) 0%, rgba(255,255,255,.4) 100%);
  }

  /* Nachhaltigkeit hero */
  .nch-hero { min-height: 500px; }
  .nch-hero .container { padding-top: 110px; padding-bottom: 40px; }
  .nch-hero-content { max-width: 100%; }
  .nch-hero-title { font-size: 26px; }
  .nch-hero-desc { font-size: 14px; line-height: 1.6; max-width: 100%; }

  /* Partner hero */
  .pr-hero .container { padding-top: 110px; }
  .pr-hero-content { max-width: 100%; }
  .pr-hero-title { font-size: 26px !important; }

  /* Innovationen */
  .inn-hero .container { padding-top: 110px !important; }
  .inn-hero-content { max-width: 100% !important; }
}

/* ===== FOOTER ===== */
/* ===== FOOTER ===== */
/* Figma: brand(450px) | nav(253px) | lösungen(292px) | kontakt(319px) | co2(160px) */
.site-footer { background: var(--dark); padding: 60px 0 32px; border-top: 1px solid rgba(255,255,255,.12); }
.footer-grid {
  display: grid;
  grid-template-columns: 340px 1fr 1.2fr 1.4fr 100px;
  gap: 32px;
  margin-bottom: 48px;
  align-items: start;
}
/* Brand column */
.footer-brand .logo-img { height: 50px; width: auto; margin-bottom: 20px; }
.footer-brand .footer-tagline {
  font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; color: #fff;
  text-transform: uppercase; line-height: 1.35; margin-bottom: 16px;
}
.footer-brand > p { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.7; }
/* CO2 badge — 5-я колонка, как в Figma */
.footer-badge { padding-top: 0; }
.footer-badge img { width: 100px; height: auto; opacity: 0.9; }
/* Nav column headers */
.footer-col h4 {
  font-size: 20px; font-weight: 500;
  color: #fff; margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--green);
  white-space: nowrap;
}
/* Nav links */
.footer-col ul li { margin-bottom: 0; }
.footer-col ul li a {
  font-size: 16px; color: rgba(255,255,255,.8);
  transition: color .18s; line-height: 40px;
  display: block;
}
.footer-col ul li a:hover { color: var(--green); }
/* Kontakt address */
.fc-address { font-size: 16px; color: rgba(255,255,255,.8); line-height: 1.6; margin-bottom: 16px; }
.fc-address p { margin-bottom: 4px; }
/* Green separator before contact */
.fc-separator { border: none; border-top: 1px solid var(--green); margin: 12px 0 12px; }
.fc-contact { font-size: 16px; color: rgba(255,255,255,.8); line-height: 1.8; }
.fc-contact a { color: rgba(255,255,255,.8); display: block; transition: color .18s; }
.fc-contact a:hover { color: var(--green); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 24px; display: flex;
  justify-content: space-between; align-items: center;
}
.footer-bottom p, .footer-bottom a { font-size: 14px; color: rgba(255,255,255,.35); }

/* ===== HERO INNER (подстраницы) ===== */
.hero-inner {
  position: relative; min-height: 460px;
  display: flex; align-items: center;
  overflow: hidden; padding-top: 64px;
}
.hi-bg-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  z-index: 0;
}
.hi-bg-gradient {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(10,22,10,.96) 0%,
    rgba(10,22,10,.90) 40%,
    rgba(10,22,10,.60) 70%,
    rgba(10,22,10,.20) 100%
  );
}
.hero-inner .container { position: relative; z-index: 2; padding-top: 72px; padding-bottom: 72px; }
.hi-content { max-width: 620px; }
.hero-tag-label {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--green-accent); margin-bottom: 20px;
}
.hero-inner h1 {
  font-size: 50px; font-weight: 900; color: #fff;
  line-height: 1.1; letter-spacing: -.5px; margin-bottom: 20px;
}
.hero-inner h1 .text-green { color: var(--green-accent); }
.hero-inner .hero-sub { font-size: 14px; color: rgba(255,255,255,.68); line-height: 1.8; margin-bottom: 32px; max-width: 520px; }
.hero-meta { display: flex; gap: 24px; margin-top: 12px; }
.hero-meta span { color: rgba(255,255,255,.75); font-size: 13px; font-weight: 600; }

/* ===== TIMELINE ===== */
.timeline-wrap { padding: 88px 0; }
.section-title { text-align: center; font-size: 36px; font-weight: 800; margin-bottom: 64px; }
.timeline { display: grid; grid-template-columns: repeat(4,1fr); position: relative; }
.timeline::before {
  content: ''; position: absolute;
  top: 28px; left: 12.5%; right: 12.5%;
  height: 2px; background: linear-gradient(90deg, var(--green-accent), var(--green-btn));
}
.tl-item { text-align: center; padding: 0 20px; position: relative; z-index: 1; }
.tl-dot {
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 3px solid var(--green-btn);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; font-size: 22px;
  box-shadow: 0 0 0 6px rgba(78,140,63,.1);
  transition: transform .3s;
}
.tl-item:hover .tl-dot { transform: scale(1.12); }
.tl-year {
  display: inline-block; background: var(--green-btn);
  color: #fff; font-size: 12px; font-weight: 700;
  padding: 4px 14px; border-radius: 20px; margin-bottom: 12px;
}
.tl-item h3 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.tl-item p { font-size: 13px; color: var(--gray-mid); line-height: 1.6; }

/* ===== CHECK LIST ===== */
.check-list { list-style: none; margin: 24px 0 36px; display: flex; flex-direction: column; gap: 20px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; }
.check-icon {
  width: 28px; height: 28px; min-width: 28px; border-radius: 50%;
  background: var(--green-btn); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; margin-top: 2px;
}
.check-list strong { font-size: 15px; font-weight: 700; display: block; margin-bottom: 3px; }
.check-list p { font-size: 13px; color: var(--gray-mid); margin: 0; line-height: 1.6; }

/* ===== CONTACT SPLIT ===== */
.contact-split { padding: 88px 0; background: var(--gray-light); }
.contact-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.cs-left h2 { font-size: 32px; font-weight: 800; line-height: 1.2; margin-bottom: 20px; }
.cs-left p { font-size: 14px; color: var(--gray-mid); line-height: 1.8; margin-bottom: 24px; }
.cs-left .section-tag {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--green-tag); margin-bottom: 12px;
}
.feature-list { list-style: none; }
.feature-list li { font-size: 14px; color: var(--green-btn); font-weight: 600; padding: 5px 0; display: flex; align-items: center; gap: 8px; }
.contact-form-box { background: #fff; border-radius: 10px; padding: 36px; box-shadow: var(--shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--black); margin-bottom: 6px; }
.form-group input, .form-group textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid #e2e2e2; border-radius: 6px;
  font-size: 14px; font-family: var(--font); color: var(--black);
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus, .form-group textarea:focus {
  border-color: var(--green-btn);
  box-shadow: 0 0 0 3px rgba(78,140,63,.1);
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: 12px; color: var(--gray-mid); margin-bottom: 16px; line-height: 1.6; }

/* ===== TEAM ===== */
.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 52px; }
.team-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); transition: transform .3s; }
.team-card:hover { transform: translateY(-5px); }
.team-card img { width: 100%; height: 240px; object-fit: cover; object-position: center top; }
.tc-info { padding: 20px; }
.tc-info h3 { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.tc-role { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--green-btn); margin-bottom: 12px; display: block; }
.tc-contacts a { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-mid); padding: 2px 0; }
.tc-contacts a:hover { color: var(--green-btn); }
.tc-social { display: flex; gap: 8px; margin-top: 12px; }
.tc-social a {
  width: 28px; height: 28px; border-radius: 6px;
  background: var(--green-btn); display: flex;
  align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700;
}

/* ===== PRODUCTS ===== */
.product-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 48px; }
.product-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0,0,0,.13); }
.pc-img-wrap { position: relative; overflow: hidden; }
.pc-img-wrap img { width: 100%; height: 185px; object-fit: cover; transition: transform .4s; }
.product-card:hover .pc-img-wrap img { transform: scale(1.05); }
.pc-badge { position: absolute; top: 12px; left: 12px; background: var(--green-btn); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px; }
.pc-info { padding: 20px 22px; flex: 1; display: flex; flex-direction: column; }
.pc-info h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.pc-info p { font-size: 13px; color: var(--gray-mid); flex: 1; margin-bottom: 16px; line-height: 1.65; }

/* ===== CTA BANNER ===== */
.cta-banner { background: var(--gray-light); padding: 60px 0; }
.cta-banner-box {
  background: #fff; border-radius: 12px; padding: 44px 52px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 48px; box-shadow: var(--shadow);
}
.cta-banner-box h2 { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.cta-banner-box p { font-size: 14px; color: var(--gray-mid); max-width: 580px; }

/* ===== SCROLL ANIMATIONS ===== */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity .65s ease, transform .65s ease; }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(36px); transition: opacity .65s ease, transform .65s ease; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
  .industries-section { max-width: 100%; border-radius: 0; margin: 0; }
  .industry-cards { padding: 0 40px; }
  .industries-top { padding: 0 40px; }
}
@media (max-width: 1024px) {
  .hero-home h1 { font-size: 44px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(2,1fr); }
  .warum-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .site-header .container { height: 80px; }
  .nav-main { display: none; }
  .burger { display: flex; }
  .mobile-nav { display: block; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .industries-top { grid-template-columns: 1fr; padding: 0 20px; }
  .industry-cards { grid-template-columns: 1fr; padding: 0 20px; }
  .industry-card { height: 280px; }
  .partner-stats-inner { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-img { height: 300px; }
  .values-grid { grid-template-columns: 1fr; }
  .value-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
  .contact-split-grid { grid-template-columns: 1fr; }
  .cta-banner-box { flex-direction: column; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .timeline::before { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-home h1 { font-size: 36px; }
  .hero-inner h1 { font-size: 34px; }
  .warum-stats { grid-template-columns: 1fr; }
  .about-body { font-size: 18px; }
  .value-card p { font-size: 18px; }
}

/* ===================================================
   PRODUKTE PAGE
   =================================================== */

/* ----- HERO ----- */
/* Figma: Tag at y:232, nav height 131px → content 101px below nav
   Our header: 128px → total padding-top: 128+104 = 232px to match Figma */
.p-hero {
  position: relative;
  min-height: 820px;
  background: #f5f5f5;
  overflow: hidden;
}
.p-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: right center;
  z-index: 0;
}
.p-hero .container {
  position: relative; z-index: 1;
  padding-top: 232px;   /* 128px header + 104px gap (matches Figma y:232) */
  padding-bottom: 80px;
}
/* Figma: H1 width 548px, desc width 392px — stays left of the industrial image */
.p-hero-content { max-width: 560px; }

.p-hero-tag {
  display: block;
  font-size: 16px; font-weight: 500; text-transform: capitalize;
  color: var(--green); margin-bottom: 20px;
}
.p-hero-title {
  font-size: clamp(32px, 3.2vw, 50px); font-weight: 500;
  color: #000; line-height: 1.32; margin-bottom: 24px;
}
.p-hero-accent { color: var(--green); }
.p-hero-desc {
  font-size: 16px; font-weight: 500; color: #333;
  line-height: 32px; margin-bottom: 40px; max-width: 400px;
}
/* Figma: benefits at y:603 — 3 cols, Nachhaltig(x:147), Zuverlässig(x:409), Vielseitig(x:684) */
.p-hero-benefits {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  border-top: 1px solid rgba(0,0,0,.12);
  padding-top: 28px;
  max-width: 560px;
}
.p-hero-benefit strong {
  display: block; font-size: 18px; font-weight: 500;
  color: #000; margin-bottom: 6px;
}
.p-hero-benefit span { font-size: 14px; color: #555; line-height: 1.5; }

/* ----- INDUSTRY SECTION ----- */
/* Figma: 6 cards in a row, each 242x513px (portrait 2.12:1 ratio)
   At 1200px container with 12px gap: card width=190px, height=190×2.12=403px */
.p-industries { background: #fff; padding: 80px 0; }
.p-section-title {
  font-size: clamp(24px, 2.5vw, 36px); font-weight: 500;
  color: #000; text-align: center; margin-bottom: 48px;
}
.p-industry-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.p-industry-card {
  border-radius: 20px; overflow: hidden;
  position: relative; height: 380px;
  box-shadow: 1px 2px 16px rgba(0,0,0,.09);
  transition: transform .3s;
}
.p-industry-card:hover { transform: scale(1.02); }
.p-industry-photo {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  position: relative;
}
.p-industry-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.85) 100%);
}
.p-industry-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 16px 14px 20px; z-index: 1;
}
.p-industry-overlay h3 {
  font-size: 15px; font-weight: 500; color: #fff;
  margin-bottom: 6px; line-height: 1.3;
}
.p-industry-overlay p {
  font-size: 11px; color: rgba(255,255,255,.88);
  line-height: 1.55; margin-bottom: 10px;
}
.p-industry-overlay a {
  font-size: 11px; font-weight: 500;
  color: var(--green); text-transform: uppercase; letter-spacing: .3px;
}
.p-industry-overlay a:hover { color: #fff; }

/* ----- NACHHALTIGKEIT IM FOKUS ----- */
/* Figma: Rectangle 28 — light card (1527×340px, r:20px) on #F5F5F5 bg
   World map image, dark text, horizontal layout text-left + button-right */
.p-nachhaltig {
  background: #f5f5f5;   /* same bg as products section below */
  padding: 60px 0 0;
}
.p-nachhaltig-card {
  position: relative;
  border-radius: 20px; overflow: hidden;
  min-height: 280px;
  background-image: url('/public/images/produkte/nachhaltigkeit-bg.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 48px 64px;
}
.p-nachhaltig-left { flex: 1; max-width: 68%; }
.p-nachhaltig-tag {
  display: block; font-size: 16px; font-weight: 500;
  color: var(--green-mid); text-transform: uppercase;
  margin-bottom: 16px;
}
.p-nachhaltig-card h2 {
  font-size: clamp(26px, 2.2vw, 36px); font-weight: 500;
  color: #000; line-height: 1.3; margin-bottom: 20px;
}
.p-nachhaltig-card p {
  font-size: 18px; color: #333;
  line-height: 1.6; margin: 0;
}
.p-nachhaltig-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-mid); color: #fff;
  font-size: 18px; font-weight: 400;
  padding: 16px 36px; border-radius: 8px;
  text-transform: capitalize; transition: background .2s;
  white-space: nowrap; flex-shrink: 0;
}
.p-nachhaltig-btn:hover { background: var(--green-dark); }

/* ----- PRODUCTS GRID ----- */
.p-products { background: #f5f5f5; padding: 80px 0; }
.p-products-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.p-product-card {
  background: #fff; border-radius: 20px;
  display: flex; flex-direction: row;
  overflow: hidden;
  box-shadow: 1px 2px 16px rgba(0,0,0,.09);
  transition: transform .3s, box-shadow .3s;
}
.p-product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,.14); }
.p-product-img {
  width: 180px; flex-shrink: 0;
  overflow: hidden;
}
.p-product-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.p-product-img--soon img { filter: grayscale(20%) opacity(0.85); }
.p-product-info {
  flex: 1; padding: 24px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.p-product-info h3 {
  font-size: 22px; font-weight: 600; color: #000;
  line-height: 1.3; margin: 0;
}
.p-product-info p {
  font-size: 14px; color: #555; line-height: 1.6; flex: 1;
}
.p-product-btn {
  display: inline-flex; align-items: center;
  background: #aaa; color: #fff;
  font-size: 11px; font-weight: 500; letter-spacing: 0.4px;
  padding: 10px 18px; border-radius: 14px;
  text-transform: uppercase; transition: background .2s;
  align-self: flex-start; margin-top: 8px;
}
.p-product-btn:hover { background: var(--green-mid); }
.p-product-btn--soon { cursor: default; }
.p-product-btn--soon:hover { background: #999; }

/* ===== PRODUCT MODAL ===== */
.pm-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(13,12,12,.72);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.pm-overlay.pm-open {
  opacity: 1; pointer-events: all;
}
.pm-card {
  position: relative;
  background: #fff; border-radius: 24px;
  display: flex; flex-direction: row;
  max-width: 880px; width: 100%;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,.28);
  transform: scale(.92) translateY(24px);
  transition: transform .35s cubic-bezier(.22,.68,0,1.2);
}
.pm-overlay.pm-open .pm-card {
  transform: scale(1) translateY(0);
}
.pm-close {
  position: absolute; top: 18px; right: 18px; z-index: 10;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,.08); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #333; transition: background .2s, color .2s;
}
.pm-close:hover { background: rgba(0,0,0,.16); color: #000; }
.pm-img-wrap {
  width: 320px; flex-shrink: 0; position: relative; overflow: hidden;
}
.pm-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pm-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(199,165,70,.18) 0%, rgba(0,0,0,.12) 100%);
}
.pm-body {
  flex: 1; padding: 40px 40px 36px;
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto;
}
.pm-badge {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase; padding: 5px 14px;
  border-radius: 20px; align-self: flex-start;
}
.pm-badge--available {
  background: rgba(199,165,70,.15); color: var(--gold);
}
.pm-badge--soon {
  background: rgba(0,0,0,.07); color: #777;
}
.pm-title {
  font-size: 28px; font-weight: 600; color: #111;
  line-height: 1.25; margin: 0;
}
.pm-desc {
  font-size: 15px; color: #444; line-height: 1.7; margin: 0;
}
.pm-desc p { margin: 0 0 12px; }
.pm-desc p:last-child { margin-bottom: 0; }
.pm-desc a { color: var(--gold); text-decoration: underline; }
.pm-desc a:hover { color: var(--green-mid); }
.pm-desc ol, .pm-desc ul { padding-left: 22px; margin: 4px 0 12px; }
.pm-desc li { margin-bottom: 4px; line-height: 1.6; }
.pm-desc ul { list-style: disc; }
.pm-desc ol { list-style: decimal; }
.pm-desc ul ul { list-style: circle; margin: 4px 0 0; }
.pm-table {
  width: 100%; border-collapse: collapse;
  margin: 8px 0 12px; font-size: 13px;
}
.pm-table th, .pm-table td {
  border: 1px solid #e0e0e0;
  padding: 8px 10px; text-align: left; vertical-align: middle;
}
.pm-table thead th {
  background: #f4f4f4; font-weight: 600; color: #111;
}
.pm-table tbody tr:nth-child(even) td { background: #fafafa; }
.pm-specs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 24px; margin-top: 4px;
}
.pm-spec {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 10px;
  background: #f7f7f7;
}
.pm-spec-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.3px;
  text-transform: uppercase; color: #999;
}
.pm-spec-value {
  font-size: 14px; font-weight: 600; color: #111;
}
.pm-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-mid); color: #fff;
  font-size: 14px; font-weight: 500;
  padding: 13px 28px; border-radius: 12px;
  text-transform: capitalize; transition: background .2s;
  align-self: flex-start; margin-top: auto;
}
.pm-cta:hover { background: var(--green-dark); }
@media (max-width: 680px) {
  .pm-card { flex-direction: column; }
  .pm-img-wrap { width: 100%; height: 220px; }
  .pm-body { padding: 28px 24px 24px; }
  .pm-specs { grid-template-columns: 1fr; }
}

/* ----- RESPONSIVE ----- */
@media (max-width: 1200px) {
  .p-industry-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .p-hero-benefits { grid-template-columns: 1fr; }
  .p-industry-grid { grid-template-columns: repeat(2, 1fr); }
  .p-products-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .p-industry-grid { grid-template-columns: 1fr; }
  .p-products-grid { grid-template-columns: 1fr; }
  .p-product-card { flex-direction: column; }
  .p-product-img { width: 100%; height: 200px; }
}

/* ===================================================
   INNOVATIONEN PAGE
   =================================================== */

/* ----- HERO ----- */
/* Figma: lab bg (light), tag y:232, H1 50px, CTA 347x64px */
.inn-hero {
  position: relative; min-height: 680px;
  background: #f5f5f5; overflow: hidden;
}
.inn-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: right center; z-index: 0;
}
.inn-hero .container {
  position: relative; z-index: 1;
  padding-top: 200px; padding-bottom: 48px;
}
.inn-hero-content { max-width: 580px; }
.inn-tag {
  display: block; font-size: 16px; font-weight: 500;
  color: var(--green-mid); text-transform: capitalize;
  margin-bottom: 20px;
}
.inn-hero-title {
  font-size: clamp(34px, 3.2vw, 50px); font-weight: 500;
  color: #000; line-height: 1.32; margin-bottom: 28px;
}
.inn-accent { color: var(--green-mid); }
.inn-accent-deep { color: var(--green-dark); }
.inn-hero-desc {
  font-size: 16px; font-weight: 500; color: #333;
  line-height: 32px; margin-bottom: 40px;
}
/* Figma: CTA кнопка 347x64px, 24px, gold bg */
.inn-cta-btn {
  display: inline-flex; align-items: center;
  background: var(--green-mid); color: #fff;
  font-size: 22px; font-weight: 400;
  padding: 14px 48px; border-radius: 8px;
  transition: background .2s;
}
.inn-cta-btn:hover { background: var(--green-dark); }

/* ----- TREIBER SECTION ----- */
/* Figma: image left (723x707, r:30px) | text right */
/* Figma: starts y:1558, ~55px after milestones bottom */
.inn-treiber { background: #fff; padding: 60px 0 80px; }
.inn-treiber-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: start;
}
.inn-treiber-img img {
  width: 100%; border-radius: 30px;
  object-fit: cover; height: 580px;
  box-shadow: 0 8px 40px rgba(0,0,0,.12);
}
.inn-treiber-title {
  font-size: clamp(28px, 2.6vw, 42px); font-weight: 600;
  color: #000; line-height: 1.25; margin-bottom: 28px;
}
.inn-treiber-desc {
  font-size: 18px; color: #333;
  line-height: 32px; margin-bottom: 40px;
}
/* Features с leaf иконками */
.inn-features { display: flex; flex-direction: column; gap: 28px; }
.inn-feature {
  display: flex; gap: 18px; align-items: flex-start;
}
.inn-leaf { width: 26px; height: 36px; flex-shrink: 0; margin-top: 2px; }
.inn-feature strong {
  display: block; font-size: 18px; font-weight: 500;
  color: #000; margin-bottom: 6px; line-height: 174.2%;
}
.inn-feature span { font-size: 16px; color: #555; line-height: 1.6; }

/* ----- ROADMAP ----- */
/* Figma: roadmap y:817 (27px after hero), title y:845, image y:817 h:562, milestones y:1244 */
.inn-roadmap { background: #f9f9f9; padding: 48px 0 60px; }
.inn-roadmap-title {
  font-size: clamp(26px, 2.4vw, 36px); font-weight: 500;
  color: #000; text-align: center; margin-bottom: 40px;
}
/* Roadmap image: green → gold via hue-rotate(-37deg) */
/* Figma: milestones start INSIDE image white area (overlap 135px from bottom)
   At our 410px height: 135 × (410/562) ≈ 98px overlap */
.inn-roadmap-img { margin-bottom: -95px; position: relative; z-index: 0; }
.inn-roadmap-img img {
  width: 100%; display: block;
  filter: hue-rotate(-37deg) saturate(1.1);
}
.inn-milestones { position: relative; z-index: 1; }
/* 4 колонки выровнены по верху — Figma: x:187, 569, 947, 1306, all y:1244 */
.inn-milestones {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; align-items: start;
}
.inn-milestone {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 8px; text-align: left;
}
/* min-height фиксирует высоту заголовка — все описания начинаются с одной y */
.inn-milestone strong {
  font-size: 16px; font-weight: 600; color: #000;
  line-height: 1.35; min-height: 46px;
  display: flex; align-items: flex-start;
}
.inn-milestone span {
  font-size: 14px; color: #555; line-height: 1.6;
}

/* ----- RESPONSIVE ----- */
@media (max-width: 900px) {
  .inn-treiber-grid { grid-template-columns: 1fr; }
  .inn-treiber-img img { height: 340px; }
  .inn-milestones { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .inn-milestones { grid-template-columns: 1fr; }
}

/* ===================================================
   TEAM PAGE
   =================================================== */

/* Hero */
.tm-hero { position: relative; min-height: 680px; background: #f5f5f5; overflow: hidden; }
.tm-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: right center; z-index: 0; }
.tm-hero .container { position: relative; z-index: 1; padding-top: 200px; padding-bottom: 48px; }
.tm-hero-content { max-width: 580px; }
.tm-tag { display: block; font-size: 16px; font-weight: 500; color: var(--green-mid); margin-bottom: 20px; }
.tm-hero-title { font-size: clamp(32px, 3vw, 50px); font-weight: 500; color: #000; line-height: 1.32; margin-bottom: 28px; }
.tm-accent { color: var(--green-mid); }
.tm-hero-desc { font-size: 16px; font-weight: 500; color: #333; line-height: 32px; margin-bottom: 40px; }
.tm-cta-btn { display: inline-flex; align-items: center; background: var(--green-mid); color: #fff; font-size: 22px; font-weight: 400; padding: 14px 48px; border-radius: 8px; transition: background .2s; }
.tm-cta-btn:hover { background: var(--green-dark); }

/* Team Cards */
.tm-team { background: #fff; padding: 72px 0; }
.tm-section-title { font-size: clamp(24px, 2.5vw, 36px); font-weight: 500; color: #000; text-align: center; margin-bottom: 48px; }
.tm-cards-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.tm-cards-grid .tm-card { grid-column: span 2; }
.tm-cards-grid .tm-card:nth-child(4) { grid-column: 2 / span 2; }
.tm-cards-grid .tm-card:nth-child(5) { grid-column: 4 / span 2; }
.tm-card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 15px rgba(0,0,0,.15); transition: transform .3s; }
.tm-card:hover { transform: translateY(-4px); }
.tm-card-photo { height: 280px; overflow: hidden; }
.tm-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.tm-card-info { padding: 20px 20px 24px; }
.tm-card-info h3 { font-size: 20px; font-weight: 600; color: #000; margin-bottom: 4px; }
.tm-role { display: block; font-size: 14px; color: var(--green-mid); font-weight: 500; margin-bottom: 16px; }
.tm-contacts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.tm-contact-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555; transition: color .18s; }
.tm-contact-line:hover { color: var(--green-mid); }
.tm-contact-line svg { flex-shrink: 0; color: var(--green-mid); }
.tm-socials { display: flex; gap: 8px; }
.tm-social-btn { width: 40px; height: 40px; border-radius: 8px; background: var(--green-mid); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.tm-social-btn:hover { background: var(--green-dark); }

/* Contact Section */
/* Figma: fill_PUG0T5 = #F5F5F5 (светло-серый), НЕ тёмный */
.tm-contact { background: #F5F5F5; padding: 80px 0; }
/* Figma: left ~35%, right ~65% (tag x:142, form x:709 в 1728px) */
.tm-contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
/* Figma: fill_84SR8M='#85AE30'→gold, 20px Medium */
.tm-contact-tag { display: block; font-size: 16px; font-weight: 500; color: var(--green-mid); text-transform: uppercase; margin-bottom: 20px; }
/* Figma: fill_I674W7='#000' → black, 36px SemiBold */
.tm-contact-title { font-size: clamp(24px, 2.2vw, 36px); font-weight: 600; color: #000; line-height: 1.35; margin-bottom: 20px; }
/* Figma: fill_I674W7='#000' → black */
.tm-contact-desc { font-size: 16px; color: #333; line-height: 1.7; margin-bottom: 36px; }
.tm-features { display: flex; flex-direction: column; gap: 20px; }
.tm-feature-item { display: flex; gap: 14px; align-items: flex-start; }
.tm-feat-icon { width: 26px; height: 26px; flex-shrink: 0; color: var(--green-mid); margin-top: 2px; }
/* Figma: fill_I674W7='#000' → black text */
.tm-feature-item strong { display: block; font-size: 16px; font-weight: 600; color: #000; margin-bottom: 3px; }
.tm-feature-item span { font-size: 14px; color: #555; }

/* Form — Figma: white inputs (#FFFFFF), gray border (#C2C2C2), gray placeholder (#5A5A5A) */
.tm-form { display: flex; flex-direction: column; gap: 12px; }
.tm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tm-form-group input, .tm-form-group textarea {
  width: 100%; padding: 13px 16px; border-radius: 10px;
  border: 1px solid #C2C2C2; background: #fff;
  color: #000; font-family: var(--font); font-size: 15px;
  outline: none; transition: border-color .2s;
}
.tm-form-group input::placeholder, .tm-form-group textarea::placeholder { color: #5A5A5A; }
.tm-form-group input:focus, .tm-form-group textarea:focus { border-color: var(--green-mid); }
.tm-form-group textarea { resize: vertical; min-height: 120px; }
.tm-form-check { display: flex; gap: 12px; align-items: flex-start; }
.tm-form-check input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--green-mid); cursor: pointer; }
/* Figma: label text black */
.tm-form-check label { font-size: 13px; color: #333; line-height: 1.5; cursor: pointer; }
/* Figma: fill_C2PBFF='#6D921F'→gold */
.tm-form-check label a { color: var(--green-dark); text-decoration: underline; }
/* Figma: fill_84SR8M='#85AE30'→gold button */
.tm-submit-btn { background: var(--green-mid); color: #fff; border: none; padding: 14px 40px; border-radius: 8px; font-size: 18px; font-family: var(--font); cursor: pointer; transition: background .2s; align-self: flex-start; }
.tm-submit-btn:hover { background: var(--green-dark); }

/* Responsive */
@media (max-width: 1024px) {
  .tm-cards-grid { grid-template-columns: 1fr 1fr; }
  .tm-cards-grid .tm-card { grid-column: span 1; }
  .tm-cards-grid .tm-card:nth-child(4) { grid-column: span 1; }
  .tm-cards-grid .tm-card:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 768px) {
  .tm-cards-grid { grid-template-columns: 1fr; }
  .tm-contact-grid { grid-template-columns: 1fr; }
  .tm-form-row { grid-template-columns: 1fr; }
}

/* ===================================================
   NACHHALTIGKEIT PAGE
   =================================================== */

/* Hero */
.nch-hero { position: relative; min-height: 680px; background: #f5f5f5; overflow: hidden; }
.nch-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: right center; z-index: 0; }
.nch-hero .container { position: relative; z-index: 1; padding-top: 200px; padding-bottom: 48px; }
.nch-hero-content { max-width: 560px; }
.nch-tag { display: block; font-size: 16px; font-weight: 500; color: var(--green-mid); margin-bottom: 20px; }
.nch-hero-title { font-size: clamp(34px, 3.4vw, 50px); font-weight: 500; color: #000; line-height: 1.32; margin-bottom: 28px; }
.nch-accent { color: var(--green-mid); }
.nch-hero-desc { font-size: 16px; font-weight: 500; color: #333; line-height: 32px; margin-bottom: 40px; }
.nch-cta-btn { display: inline-flex; align-items: center; background: var(--green-mid); color: #fff; font-size: 22px; font-weight: 400; padding: 14px 48px; border-radius: 8px; transition: background .2s; }
.nch-cta-btn:hover { background: var(--green-dark); }

/* Stats */
.nch-stats { background: var(--dark); padding: 60px 0; }
.nch-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.nch-stat { display: flex; align-items: center; gap: 20px; padding: 24px 32px; border-right: 1px solid #3a3a3a; }
.nch-stat:last-child { border-right: none; }
.nch-stat-icon { width: 56px; height: 56px; flex-shrink: 0; }
.nch-stat-text { display: flex; flex-direction: column; }
.nch-stat-text strong { font-size: 32px; font-weight: 700; color: var(--green); line-height: 1; }
.nch-stat-label { font-size: 16px; font-weight: 600; color: #fff; margin-top: 2px; }
.nch-stat-text span:last-child { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.4; margin-top: 2px; }

/* Nachhaltigkeit in Aktion */
/* Figma: Bild links (x:0-870), Text rechts (x:959+), WEISSER Hintergrund, schwarzer Text */
.nch-aktion { background: #fff; padding: 80px 0; }
.nch-aktion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.nch-aktion-img-col img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}
.nch-aktion-title { font-size: clamp(28px, 2.8vw, 42px); font-weight: 600; color: #000; line-height: 1.2; margin-bottom: 20px; }
.nch-aktion-desc { font-size: 18px; color: #333; line-height: 1.6; margin-bottom: 32px; }
.nch-features { display: flex; flex-direction: column; gap: 18px; }
.nch-feature { display: flex; gap: 14px; align-items: flex-start; }
.nch-check { width: 26px; height: 26px; flex-shrink: 0; color: var(--green-mid); margin-top: 1px; }
.nch-feature strong { display: block; font-size: 16px; font-weight: 600; color: #000; }
.nch-feature span { font-size: 14px; color: #555; }

/* Fahrplan */
.nch-fahrplan { background: #fff; padding: 40px 0 48px; }
.nch-fahrplan-title { font-size: clamp(24px, 2.4vw, 36px); font-weight: 500; color: #000; text-align: center; margin-bottom: 24px; }
.nch-roadmap-img { margin-bottom: -95px; position: relative; z-index: 0; }
.nch-roadmap-img img { width: 100%; display: block; filter: hue-rotate(-37deg) saturate(1.1); }
.nch-milestones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; position: relative; z-index: 1; }
.nch-milestone { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.nch-year { font-size: 20px; font-weight: 700; color: var(--green-mid); }
.nch-milestone p { font-size: 14px; color: #444; line-height: 1.6; margin: 0; }

/* Responsive */
@media (max-width: 900px) {
  .nch-stats-grid { grid-template-columns: 1fr 1fr; }
  .nch-aktion .container { justify-content: flex-start; }
  .nch-milestones { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .nch-stats-grid { grid-template-columns: 1fr; }
  .nch-milestones { grid-template-columns: 1fr; }
}

/* ===================================================
   PARTNER PAGE
   =================================================== */

/* Hero */
/* Partner: нет description → ещё компактнее */
.pr-hero { position: relative; min-height: 600px; background: #f5f5f5; overflow: hidden; }
.pr-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: right center; z-index: 0; }
.pr-hero .container { position: relative; z-index: 1; padding-top: 200px; padding-bottom: 48px; }
.pr-hero-content { max-width: 640px; }
.pr-tag { display: block; font-size: 16px; font-weight: 500; color: var(--green-mid); margin-bottom: 20px; }
.pr-hero-title { font-size: clamp(32px, 3.4vw, 50px); font-weight: 500; color: #000; line-height: 1.32; margin-bottom: 40px; }
.pr-accent { color: var(--green-mid); }
.pr-cta-btn { display: inline-flex; align-items: center; background: var(--green-mid); color: #fff; font-size: 22px; font-weight: 400; padding: 14px 48px; border-radius: 8px; transition: background .2s; }
.pr-cta-btn:hover { background: var(--green-dark); }

/* Warum Partner werden? */
.pr-warum { background: #fff; padding: 80px 0; }
.pr-section-title { font-size: clamp(26px, 2.4vw, 36px); font-weight: 500; color: #000; text-align: center; margin-bottom: 56px; }
/* Figma: 5 Karten in einer Zeile */
.pr-benefits-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.pr-benefit { background: #f9f9f9; border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; transition: transform .3s, box-shadow .3s; }
.pr-benefit:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,.1); }
.pr-benefit-icon { width: 44px; height: 44px; background: rgba(199,165,70,.12); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.pr-benefit-icon svg { width: 22px; height: 22px; color: var(--green-mid); }
.pr-benefit h3 { font-size: 16px; font-weight: 600; color: #000; line-height: 1.3; }
.pr-benefit p { font-size: 14px; color: #555; line-height: 1.6; }

/* Responsive */
@media (max-width: 1100px) { .pr-benefits-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .pr-benefits-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pr-benefits-grid { grid-template-columns: 1fr; } }

/* ===== FORM SUCCESS MESSAGE ===== */
.form-success {
  background: #f0f8e8;
  border: 1px solid var(--green-mid);
  color: #3a5a1a;
  border-radius: 8px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 20px;
}

/* ===== FORM SELECT — Betreff ===== */
.tm-form-select-wrap { display: flex; flex-direction: column; gap: 6px; }
.tm-select-label { font-size: 14px; color: #555; font-weight: 500; }
.tm-select {
  width: 100%; padding: 13px 16px; border-radius: 10px;
  border: 1px solid #C2C2C2; background: #fff;
  color: #000; font-family: var(--font); font-size: 15px;
  outline: none; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  transition: border-color .2s;
}
.tm-select:focus { border-color: var(--green-mid); }
.tm-select option[value=""][disabled] { color: #5A5A5A; }

/* ===== DKS NEWS — PUBLIC ===== */
.news-hero {
  background: var(--dark);
  padding: 160px 0 72px;
  position: relative;
}
.news-hero-tag {
  display: block; font-size: 16px; font-weight: 500;
  color: var(--gold); margin-bottom: 16px;
}
.news-hero-title {
  font-size: clamp(34px, 3.4vw, 50px); font-weight: 500;
  color: #fff; line-height: 1.32; margin-bottom: 20px;
}
.news-hero-accent { color: var(--gold); }
.news-hero-desc { font-size: 16px; color: rgba(255,255,255,.7); max-width: 560px; }

.news-list { padding: 80px 0; background: #f9f9f7; }
.news-empty { color: #888; font-size: 16px; text-align: center; padding: 48px 0; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.news-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.news-card-img-wrap { display: block; overflow: hidden; aspect-ratio: 16/9; }
.news-card-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s ease;
}
.news-card:hover .news-card-img { transform: scale(1.04); }
.news-card-img--placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1a2e18 0%, #2d4a2a 100%);
}
.news-card-body {
  padding: 24px 28px 28px;
  display: flex; flex-direction: column; flex: 1;
}
.news-card-date {
  font-size: 12px; font-weight: 500; letter-spacing: .5px;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 10px; display: block;
}
.news-card-title {
  font-size: 17px; font-weight: 600; color: var(--black);
  line-height: 1.45; margin-bottom: 12px;
}
.news-card-title a { color: inherit; }
.news-card-title a:hover { color: var(--gold); }
.news-card-excerpt {
  font-size: 14px; color: #555; line-height: 1.7;
  margin-bottom: 20px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card-btn {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--gold);
  letter-spacing: .3px; margin-top: auto;
  transition: color .2s;
}
.news-card-btn:hover { color: var(--green-dark); }

/* Article page */
.na-hero {
  position: relative; min-height: 440px;
  display: flex; align-items: flex-end;
  padding-bottom: 56px; padding-top: 80px;
  overflow: hidden;
}
.na-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.na-hero-bg--dark { background: var(--dark); }
.na-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,12,12,.92) 0%, rgba(13,12,12,.45) 100%);
}
.na-hero-content {
  position: relative; z-index: 2;
  max-width: 800px;
}
.na-hero .container { position: relative; z-index: 1; }
.na-back {
  display: inline-block; font-size: 13px; font-weight: 500;
  color: var(--gold); margin-bottom: 16px;
  transition: opacity .2s;
}
.na-back:hover { opacity: .75; }
.na-date {
  display: block; font-size: 12px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.na-title {
  font-size: clamp(24px, 2.8vw, 40px); font-weight: 600;
  color: #fff; line-height: 1.3;
}

.na-body { padding: 72px 0 96px; background: #fff; }
.na-body .container { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; }
.na-excerpt {
  font-size: 18px; color: #333; line-height: 1.8;
  font-weight: 500; margin-bottom: 28px;
  padding-bottom: 28px; border-bottom: 1px solid #eee;
}
.na-text { font-size: 16px; color: #333; line-height: 1.9; }
.na-text p { margin-bottom: 20px; }
.na-text h2, .na-text h3 { font-weight: 600; color: var(--black); margin: 32px 0 12px; }
.na-text a { color: var(--gold); text-decoration: underline; }

.na-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 100px; }
.na-sidebar-card {
  background: #f5f5f3; border-radius: 14px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.na-sidebar-card h3 { font-size: 15px; font-weight: 700; color: var(--black); }
.na-sidebar-card p { font-size: 14px; color: #555; line-height: 1.6; }
.na-sidebar-btn {
  display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--gold);
  transition: color .2s;
}
.na-sidebar-btn:hover { color: var(--green-dark); }
.na-sidebar-card--cta { background: var(--dark); }
.na-sidebar-card--cta h3 { color: #fff; }
.na-sidebar-card--cta p { color: rgba(255,255,255,.7); }
.na-sidebar-btn--gold {
  background: var(--gold); color: #fff;
  padding: 10px 20px; border-radius: 8px; margin-top: 4px;
}
.na-sidebar-btn--gold:hover { background: var(--green-dark); color: #fff; }

/* Home news teaser */
.home-news { padding: 80px 0; background: #fff; }
.home-news-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 40px;
}
.home-news-header h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; color: var(--black); }
.home-news-header a { font-size: 14px; font-weight: 600; color: var(--gold); white-space: nowrap; }
.home-news-header a:hover { color: var(--green-dark); }
.home-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

@media (max-width: 1024px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .home-news-grid { grid-template-columns: repeat(2, 1fr); }
  .na-body .container { grid-template-columns: 1fr; }
  .na-sidebar { position: static; }
}
@media (max-width: 640px) {
  .news-grid { grid-template-columns: 1fr; }
  .home-news-grid { grid-template-columns: 1fr; }
  .home-news-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ===== MOBILE FIXES ===== */
@media (max-width: 768px) {
  /* Hero */
  .hero-home .container { padding-top: 110px; padding-bottom: 32px; }
  .hero-content { max-width: 100%; }
  .hero-btns { flex-direction: column; gap: 12px; }
  .btn, .btn-outline { width: 100%; text-align: center; justify-content: center; }

  /* Stats bar */
  .stats-bar .container { padding: 0 12px; }
  .stat-col { padding: 20px 12px; gap: 12px; }
  .stat-col:first-child { padding-left: 12px; }
  .stat-col:last-child { padding-right: 12px; }
  .stat-text strong { font-size: 24px; }

  /* Prices block */
  .prices-outer { margin-top: 16px; }
  .prices-section { padding: 24px 16px 16px; }
  .prices-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .prices-header-right { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; }
  .prices-grid { grid-template-columns: repeat(2, 1fr); }
  .price-card { padding: 18px 14px; }
  .pc-value { font-size: 22px; }

  /* OUR SOLUTIONS */
  .dark-wrapper { padding-top: 24px; padding-bottom: 24px; }
  .industries-section { border-radius: 16px; padding: 32px 0 40px; }
  .industries-top { gap: 24px; margin-bottom: 32px; }

  /* WHY DKS */
  .warum-inner { grid-template-columns: 1fr; gap: 28px; }
  .checklist li { white-space: normal; word-break: break-word; }
  .warum-col-stats {
    grid-template-columns: repeat(3, 1fr);
    border-left: none;
    border-top: 1px solid #5A5A5A;
    padding-top: 20px;
    overflow: hidden;
  }
  .warum-stat-item { padding: 0 8px; }
  .warum-stat-item strong { font-size: 24px; }
  .warum-stat-item span { font-size: 12px; }

  /* About */
  .about-grid { gap: 32px; }

  /* Footer */
  .footer-grid { gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* Hamburger menu hint */
  .nav-mobile-hint { display: block; }
}

@media (max-width: 480px) {
  /* Prices — 1 column on very small */
  .prices-grid { grid-template-columns: 1fr; }
  .prices-header-right { flex-direction: column; align-items: flex-start; }

  /* Stats — 1 column */
  .stats-grid { grid-template-columns: 1fr; }
  .stat-col { border-right: none; border-bottom: 1px solid #5A5A5A; }
  .stat-col:last-child { border-bottom: none; }

  /* Hero */
  .hero-home .container { padding-top: 100px; }
  .hero-home h1 { font-size: 30px; }
}