/*
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  弗沃德铠筑 - 德系工业美学增强
  German Industrial Aesthetics Enhancement for Industry Template
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  基于工业模板,强化德国工业美学特征:
  • Braun - 极简主义、功能优先
  • Bauhaus - 几何形态、精确网格
  • 黄色 < 3% - 仅功能性强调
  • 8px网格系统
  • 硬朗的线条和边角

  "Weniger, aber besser" - Less, but better

  加载顺序: style.min.css → brand-overrides.css → industry-german.css
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/

:root {
  /* 德国国旗色 - 黑红黄 (不经意间展现) */
  --germany-black: #000000;      /* 纯黑 */
  --germany-red: #DD0000;        /* 德国红 */
  --germany-gold: #FFCE00;       /* 德国金 */

  /* 德系品牌色 */
  --fkz-yellow: #FFCE00;         /* 改为德国金色 */
  --fkz-yellow-dark: #D4A600;
  --fkz-red: #DD0000;            /* 德国红(点缀) */
  --fkz-red-dark: #B80000;
  --fkz-black: #000000;          /* 纯黑(更冷) */
  --fkz-graphite: #1A1A1A;
  --fkz-white: #FFFFFF;

  /* 精确灰度(更冷的色调) */
  --fkz-gray-98: #0A0A0A;
  --fkz-gray-95: #0D0D0D;
  --fkz-gray-90: #171717;
  --fkz-gray-80: #2A2A2A;
  --fkz-gray-70: #404040;
  --fkz-gray-50: #737373;
  --fkz-gray-30: #B3B3B3;
  --fkz-gray-20: #CCCCCC;
  --fkz-gray-10: #E5E5E5;
  --fkz-gray-05: #F5F5F5;

  /* 8px网格 */
  --fkz-space-1: 8px;
  --fkz-space-2: 16px;
  --fkz-space-3: 24px;
  --fkz-space-4: 32px;
  --fkz-space-6: 48px;
  --fkz-space-8: 64px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HEADER - 德系极简导航(清冷克制)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#header {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--fkz-gray-10);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05),
              0 2px 16px rgba(0, 0, 0, 0.04);
}

/* Logo区域 - 德国国旗三色条(黑红黄) */
#logo {
  position: relative;
  padding-left: 20px;
}

/* 三色竖条 - 不经意间的德国元素 */
#logo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 32px;
  background: linear-gradient(
    to bottom,
    var(--germany-black) 0%,
    var(--germany-black) 33%,
    var(--germany-red) 33%,
    var(--germany-red) 66%,
    var(--germany-gold) 66%,
    var(--germany-gold) 100%
  );
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

#logo:hover::before {
  width: 4px;
  height: 36px;
}

/* 导航菜单 - 当前页德国金色指示 */
.nav-menu > li.menu-active > a::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--germany-gold);
  box-shadow: 0 0 8px rgba(255, 206, 0, 0.3);
}

.nav-menu > li > a {
  position: relative;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fkz-gray-80);
  transition: color 250ms ease;
}

.nav-menu > li > a:hover {
  color: var(--germany-black) !important;
}

/* 二级菜单hover - 细微的红色点缀 */
.nav-menu > li > a:hover::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 60%;
  background: var(--germany-red);
  opacity: 0;
  animation: fadeInLeft 200ms ease forwards;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BANNER - Hero区域优化(清冷克制)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.banner-area {
  background-color: var(--germany-black);
}

.banner-area .overlay-bg {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.88) 40%,
    rgba(221, 0, 0, 0.08) 70%,  /* 不经意的红 */
    rgba(255, 206, 0, 0.05) 100%  /* 不经意的金 */
  );
}

.banner-content h1 {
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
  position: relative;
  display: inline-block;
}

/* H1下方 - 细微的德国三色线 */
.banner-content h1::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    var(--germany-black) 0%,
    var(--germany-black) 33%,
    var(--germany-red) 33%,
    var(--germany-red) 66%,
    var(--germany-gold) 66%,
    var(--germany-gold) 100%
  );
  opacity: 0.6;
}

.banner-content p {
  font-size: 18px;
  line-height: 1.8;
  opacity: 0.85;
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* 主按钮 - 德国国旗三色渐变条 */
.primary-btn {
  position: relative;
  background: var(--germany-black) !important;
  color: var(--fkz-white) !important;
  border: none !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding-left: 36px !important;
  overflow: hidden;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 左侧三色渐变条 - 黑红黄 */
.primary-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(
    to bottom,
    var(--germany-black) 0%,
    var(--germany-black) 33%,
    var(--germany-red) 33%,
    var(--germany-red) 66%,
    var(--germany-gold) 66%,
    var(--germany-gold) 100%
  );
  transition: width 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.primary-btn:hover,
.primary-btn:focus {
  background: var(--fkz-gray-98) !important;
  color: var(--germany-gold) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
              0 0 0 1px var(--germany-gold) !important;
}

.primary-btn:hover::before {
  width: 100%;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FEATURE CARDS - 产品特性卡片
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.single-cat {
  padding: var(--fkz-space-4);
  border: 1px solid var(--fkz-gray-10);
  border-radius: 8px;
  background: var(--fkz-white);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.single-cat:hover {
  border-color: var(--fkz-yellow);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10, 10, 10, 0.1);
}

/* 六边形图标容器 - 冷色调 */
.hex-icon {
  background: var(--fkz-gray-05);
  border: 2px solid var(--fkz-gray-10);
  transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.single-cat:hover .hex-icon {
  background: var(--fkz-black);
  border-color: var(--germany-gold);
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(255, 206, 0, 0.2),
              inset 0 0 20px rgba(221, 0, 0, 0.05); /* 内部红光 */
}

.single-cat:hover .hex-icon svg {
  color: var(--germany-gold) !important;
  filter: drop-shadow(0 0 4px rgba(255, 206, 0, 0.4));
}

.single-cat h2.h4 {
  font-weight: 600;
  letter-spacing: -0.01em;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SERVICE CARDS - 服务卡片
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.single-service {
  border: 1px solid var(--fkz-gray-10);
  border-radius: 8px;
  overflow: hidden;
  background: var(--fkz-white);
  transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 图片容器 - 统一高度 */
.single-service .thumb {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  background: var(--fkz-gray-5);
  flex-shrink: 0;
}

.single-service .thumb picture {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.single-service .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0;
}

/* 内容区域 */
.single-service h3,
.single-service h4,
.single-service p {
  padding-left: 24px;
  padding-right: 24px;
  text-align: left;
}

.single-service h3:first-of-type,
.single-service h4:first-of-type {
  margin-top: 24px;
}

.single-service p:last-child {
  padding-bottom: 24px;
}

/* 不经意间的红色点缀 */
.single-service::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 0;
  background: var(--germany-red);
  transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.single-service:hover {
  border-color: var(--germany-gold);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(4, 9, 30, 0.12),
              0 4px 12px rgba(4, 9, 30, 0.08),
              0 0 0 1px var(--germany-gold);
}

.single-service:hover::after {
  height: 60px;
}

.single-service:hover .thumb img {
  transform: scale(1.05);
}

.single-service h4 a {
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 200ms ease;
}

.single-service:hover h4 a {
  color: var(--fkz-yellow-dark) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BRAND SERIES & PRODUCT CARDS - 品牌系列卡片
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.brand-series-card,
.brand-product-card,
.product-card {
  border: 1px solid var(--fkz-gray-10);
  border-radius: 8px;
  overflow: hidden;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--fkz-white) !important;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 强制移除可能的黄色背景 */
.brand-series-card *,
.brand-product-card *,
.product-card * {
  background: none !important;
}

/* 只有卡片主容器有白色背景 */
.brand-series-card,
.brand-product-card,
.product-card {
  background: var(--fkz-white) !important;
}

.brand-series-card img,
.brand-product-card img,
.product-card img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  background-color: transparent !important;
}

.brand-series-card-link:hover .brand-series-card,
.brand-series-card-link:focus-visible .brand-series-card,
.brand-product-card-link:hover .brand-product-card,
.brand-product-card-link:focus-visible .brand-product-card {
  border-color: var(--fkz-yellow);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(4, 9, 30, 0.12), 0 4px 12px rgba(4, 9, 30, 0.08);
}

/* 为卡片图片添加柔和的遮罩 */
.brand-series-card picture,
.brand-product-card picture,
.product-card .product-media {
  position: relative;
  display: block;
  background: var(--fkz-gray-5);
}

.brand-series-card picture::after,
.brand-product-card picture::after,
.product-card .product-media::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(4, 9, 30, 0.03) 100%);
  pointer-events: none;
  transition: opacity 300ms ease;
}

.brand-series-card-link:hover picture::after,
.brand-product-card-link:hover picture::after {
  opacity: 0;
}

.brand-series-card h3,
.brand-product-card h4,
.product-card h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 200ms ease;
}

.brand-series-card-link:hover .brand-series-card h3,
.brand-product-card-link:hover .brand-product-card h4 {
  color: var(--fkz-yellow-dark) !important;
}

/* CTA链接 */
.brand-card-cta {
  color: var(--fkz-yellow-dark) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.brand-series-card-link:hover .brand-card-cta,
.brand-product-card-link:hover .brand-card-cta {
  color: var(--fkz-graphite) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION TITLES - 区块标题
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.section-title h2,
.section-title-gray h2 {
  font-weight: 700;
  letter-spacing: -0.025em;
  position: relative;
  padding-bottom: var(--fkz-space-3);
}

.section-title h2::after,
.section-title-gray h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--fkz-yellow);
}

.section-title.text-center h2::after,
.section-title-gray.text-center h2::after {
  left: 50%;
  transform: translateX(-50%);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER - 页脚
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#footer {
  background: var(--fkz-gray-98);
  border-top: 1px solid var(--fkz-gray-90);
}

#footer .single-footer-widget h4 {
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fkz-white);
}

#footer a {
  transition: all 200ms ease;
  border-left: 2px solid transparent;
  padding-left: 0;
}

#footer a:hover {
  color: var(--fkz-yellow) !important;
  border-left-color: var(--fkz-yellow);
  padding-left: 12px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FORMS - 表单元素
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  border: 2px solid var(--fkz-gray-10) !important;
  border-radius: 6px !important;
  transition: all 200ms ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: var(--fkz-yellow) !important;
  box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.1) !important;
  outline: none !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BREADCRUMB - 面包屑导航
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.breadcrumb {
  background: transparent;
}

.breadcrumb-item.active {
  color: var(--fkz-yellow-dark);
  font-weight: 500;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UTILITIES - 工具类
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 黄色强调 */
.text-yellow {
  color: var(--fkz-yellow) !important;
}

.text-yellow-dark {
  color: var(--fkz-yellow-dark) !important;
}

.bg-yellow {
  background: var(--fkz-yellow) !important;
}

.bg-yellow-light {
  background: rgba(255, 193, 7, 0.08) !important;
}

/* 边框工具 */
.border-yellow {
  border-color: var(--fkz-yellow) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ANIMATIONS - 动画增强
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 选中文本颜色 */
::selection {
  background: var(--fkz-yellow);
  color: var(--fkz-graphite);
}

::-moz-selection {
  background: var(--fkz-yellow);
  color: var(--fkz-graphite);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE - 响应式优化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
  #logo::before {
    width: 2px;
    height: 24px;
  }

  .primary-btn {
    padding-left: 28px !important;
  }

  .primary-btn::before {
    width: 3px;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ACCESSIBILITY - 可访问性
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Focus可见性 */
*:focus-visible {
  outline: 2px solid var(--fkz-yellow);
  outline-offset: 2px;
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  #header {
    border-bottom-width: 2px;
  }

  .single-cat,
  .single-service,
  .brand-series-card,
  .brand-product-card {
    border-width: 2px;
  }

  .primary-btn::before {
    width: 6px;
  }
}


/*
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  END OF GERMAN ENHANCEMENT

  "少即是多" - Less, but better
  "形式服从功能" - Form follows function

  © 2026 Forward Kaizu 弗沃德铠筑
  Licensed by Forward Vorwärts GmbH Germany
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GERMAN FLAG SUBTLE TOUCHES - 不经意间的德国元素
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 页脚顶部 - 细微的三色线 */
#footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--germany-black) 0%,
    var(--germany-black) 33%,
    var(--germany-red) 33%,
    var(--germany-red) 66%,
    var(--germany-gold) 66%,
    var(--germany-gold) 100%
  );
  opacity: 0.5;
}

/* 滚动条 - 德国金色 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--fkz-gray-05);
}

::-webkit-scrollbar-thumb {
  background: var(--fkz-gray-30);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--germany-gold);
}

/* 选中文本 - 德国金色 */
::selection {
  background: var(--germany-gold);
  color: var(--germany-black);
}

::-moz-selection {
  background: var(--germany-gold);
  color: var(--germany-black);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COLD & RESTRAINED - 清冷克制的德系美学
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 整体背景 - 更冷的色调 + 精确网格 */
body {
  background: #FAFAFA;
  color: var(--fkz-gray-80);
  position: relative;
}

/* 8px精确网格背景(非常细微) */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.015) 1px, transparent 1px);
  background-size: 8px 8px;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
}

/* 标题 - 更冷静的字重 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--germany-black);
}

/* 段落 - 更宽松的行高 */
p {
  line-height: 1.75;
  color: var(--fkz-gray-70);
  font-weight: 300;
}

/* 链接 - 冷静的交互 */
a {
  transition: all 250ms ease;
}

a:hover {
  color: var(--germany-gold);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION DIVIDERS - 区块分隔(不经意的三色)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.section-gap {
  position: relative;
}

/* 区块间的细微分隔线 */
.section-gap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 800px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--fkz-gray-10) 20%,
    var(--fkz-gray-10) 80%,
    transparent 100%
  );
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PREMIUM DETAILS - 高级细节
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 品牌系列卡片 - 德系精确边框 */
.brand-series-card {
  border: 1px solid var(--fkz-gray-10);
  border-left-width: 2px;
  border-left-color: transparent;
  border-radius: 8px;
  transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* 右上角标记 */
.brand-series-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 32px 32px 0;
  border-color: transparent var(--fkz-gray-05) transparent transparent;
  transition: border-color 300ms ease;
  z-index: 1;
}

.brand-series-card-link:hover .brand-series-card::before,
.brand-series-card-link:focus-visible .brand-series-card::before {
  border-color: transparent rgba(255, 206, 0, 0.15) transparent transparent;
}

.brand-series-card-link:hover .brand-series-card,
.brand-series-card-link:focus-visible .brand-series-card {
  border-color: var(--germany-gold);
  border-left-width: 4px;
  border-left-color: var(--germany-black);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12),
              0 0 0 1px rgba(255, 206, 0, 0.2);
}

/* 表单 - 纯黑边框 */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  border: 1px solid var(--fkz-gray-20) !important;
  border-radius: 4px !important;
  background: var(--fkz-white) !important;
  transition: all 250ms ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: var(--germany-black) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05),
              inset -2px 0 0 0 var(--germany-gold) !important;
  outline: none !important;
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COLD PRECISION - 冷峻精确的德系工业感
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 整体文字 - 更冷静的灰度 */
.single-cat,
.single-service {
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.single-cat {
  padding: var(--fkz-space-4);
}

/* 卡片右上角 - 细微的金色三角标记 */
.single-cat::after,
.single-service::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent var(--fkz-gray-05) transparent transparent;
  transition: border-color 300ms ease;
}

.single-cat:hover::after {
  border-color: transparent var(--germany-gold) transparent transparent;
}

.single-service:hover::after {
  border-color: transparent var(--germany-gold) transparent transparent;
}

/* 卡片内的文字 - 冷灰色 */
.single-cat h2.h4,
.single-service h4 {
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fkz-gray-90);
  transition: all 300ms ease;
}

.single-cat p,
.single-service p {
  color: var(--fkz-gray-70);
  font-weight: 300;
  line-height: 1.8;
}

/* 特性编号 - 德系精确标注 */
.single-cat {
  counter-increment: feature;
}

.single-cat h2.h4::before {
  content: "0" counter(feature);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--fkz-gray-30);
  margin-bottom: 8px;
  font-family: 'Courier New', monospace;
  transition: color 300ms ease;
}

.single-cat:hover h2.h4::before {
  color: var(--germany-gold);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MICRO INTERACTIONS - 微交互(不经意的三色)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 卡片hover - 左侧出现德国红色边 */
.single-cat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(
    to bottom,
    var(--germany-black) 0%,
    var(--germany-red) 50%,
    var(--germany-gold) 100%
  );
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.single-cat:hover::before {
  width: 4px;
}

/* 标题hover - 渐变到德国金(更克制) */
.single-cat:hover h2.h4 {
  color: var(--fkz-gray-98);
  transform: translateX(4px);
}

.single-service:hover h4 a {
  color: var(--fkz-gray-98) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION TITLES - 区块标题(三色装饰)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.section-title h2,
.section-title-gray h2 {
  font-weight: 700;
  letter-spacing: -0.03em;
  position: relative;
  padding-bottom: var(--fkz-space-3);
  color: var(--germany-black);
}

/* 标题下方 - 德国三色横条 */
.section-title h2::after,
.section-title-gray h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 72px;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--germany-black) 0%,
    var(--germany-black) 33%,
    var(--germany-red) 33%,
    var(--germany-red) 66%,
    var(--germany-gold) 66%,
    var(--germany-gold) 100%
  );
}

.section-title.text-center h2::after,
.section-title-gray.text-center h2::after {
  left: 50%;
  transform: translateX(-50%);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER - 页脚(纯黑背景)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#footer {
  background: var(--germany-black);
  border-top: none;
  position: relative;
}

#footer .single-footer-widget h4 {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fkz-white);
  font-size: 14px;
  text-transform: uppercase;
}

#footer p,
#footer a {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 300;
}

#footer a {
  transition: all 250ms ease;
  border-left: 2px solid transparent;
  padding-left: 0;
  display: inline-block;
}

#footer a:hover {
  color: var(--germany-gold) !important;
  border-left-color: var(--germany-red);
  padding-left: 12px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  font-weight: 300;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LOADING & ANIMATIONS - 加载和动画
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 页面加载进度条 - 德国三色 */
#nprogress .bar {
  background: linear-gradient(
    to right,
    var(--germany-black) 0%,
    var(--germany-red) 50%,
    var(--germany-gold) 100%
  ) !important;
  height: 3px !important;
}

#nprogress .peg {
  box-shadow: 0 0 10px var(--germany-gold),
              0 0 5px var(--germany-gold) !important;
}

/* 淡入动画 - 更慢更克制 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.single-cat,
.single-service {
  animation: fadeIn 600ms ease-out backwards;
}

.single-cat:nth-child(1) { animation-delay: 100ms; }
.single-cat:nth-child(2) { animation-delay: 200ms; }
.single-cat:nth-child(3) { animation-delay: 300ms; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE COLD - 响应式(保持冷峻)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
  /* Logo三色条 - 移动端稍小 */
  #logo::before {
    width: 2px;
    height: 28px;
  }

  /* 按钮三色条 */
  .primary-btn::before {
    width: 3px;
  }

  /* 区块标题下方三色条 */
  .section-title h2::after,
  .section-title-gray h2::after {
    width: 56px;
    height: 2px;
  }

  /* 动画简化 */
  .single-cat,
  .single-service {
    animation: none !important;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GERMAN PRECISION MARKERS - 德系精确标注
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 区块容器计数器 */
.cat-area,
.service-area,
.brand-area {
  counter-reset: feature;
}

/* 页面四角 - 精确网格标记(非常细微) */
body::after {
  content: "";
  position: fixed;
  top: 16px;
  left: 16px;
  width: 24px;
  height: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  pointer-events: none;
  z-index: 9999;
}

/* 技术参数标注样式(给未来扩展用) */
.german-spec-label {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fkz-gray-50);
  border-left: 2px solid var(--germany-gold);
  padding-left: 8px;
  margin-bottom: 4px;
  display: inline-block;
}

/* 精确数值样式 */
.german-spec-value {
  font-family: 'Courier New', monospace;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--germany-black);
  line-height: 1;
}

.german-spec-unit {
  font-size: 12px;
  font-weight: 400;
  color: var(--fkz-gray-50);
  margin-left: 4px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   IMAGE ENHANCEMENTS - 图片优化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 所有内容区域图片添加统一圆角 */
.single-service picture,
.brand-series-card picture,
.brand-product-card picture,
.about-content picture,
.feature-card picture {
  border-radius: 8px;
  overflow: hidden;
  display: block;
}

/* 图片加载时的背景色 */
img {
  background-color: var(--fkz-gray-5);
}

/* 提升图片的清晰度和对比度 */
.brand-series-card img,
.brand-product-card img,
.single-service img {
  filter: contrast(1.02) saturate(1.05);
  transition: filter 300ms ease, transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-series-card-link:hover img,
.brand-product-card-link:hover img {
  filter: contrast(1.05) saturate(1.1);
  transform: scale(1.02);
}

/* 为大尺寸图片添加柔和阴影 */
.banner-area img,
.about-img img,
.contact-page-area img {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(4, 9, 30, 0.08);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   IMPROVED SPACING & BREATHING ROOM - 优化间距和呼吸感
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 为图片容器添加更好的内边距 */
.single-service .thumb,
.brand-series-card picture,
.brand-product-card picture {
  margin: 0;
  line-height: 0;
}

/* 卡片内容区域的呼吸空间 */
.single-service .desc,
.brand-series-card .card-body,
.brand-product-card .card-body,
.product-card .card-body {
  padding: 24px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent !important;
  width: 100%;
  box-sizing: border-box;
}

/* 卡片内的标题和文本 */
.brand-series-card h3,
.brand-series-card h4,
.brand-product-card h3,
.brand-product-card h4,
.product-card h3,
.product-card h4 {
  margin: 0;
  width: 100%;
}

.brand-series-card p,
.brand-product-card p,
.product-card p {
  margin: 0;
  width: 100%;
}

/* 确保卡片中所有子元素没有黄色背景 */
.brand-series-card .card-body *,
.brand-product-card .card-body *,
.product-card .card-body * {
  background: none !important;
}

/* 为小屏幕优化图片显示 */
@media (max-width: 768px) {
  .brand-series-card,
  .brand-product-card,
  .single-service {
    border-radius: 6px;
  }
  
  .brand-series-card picture,
  .brand-product-card picture,
  .single-service picture {
    border-radius: 6px 6px 0 0;
  }
}

/* 提高产品卡片图片的纵横比一致性 */
.brand-product-card picture {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* 系列产品卡片 - 使用更合适的 4:3 比例,并确保图片不变形 */
.brand-series-card picture {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f5f5f5 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.brand-series-card picture img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图片完整不变形 */
  object-position: center;
  background-color: transparent !important;
}

/* 产品卡片picture */
.brand-product-card picture,
.product-card picture {
  background: #f5f5f5 !important;
}

.brand-product-card picture img,
.product-card picture img {
  background-color: transparent !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE FIXES FOR PRODUCT CARDS - 产品卡片响应式修复
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 991px) {
  .single-service .thumb {
    height: 240px;
  }
}

@media (max-width: 767px) {
  .single-service .thumb {
    height: 220px;
  }
  
  .single-service h3,
  .single-service h4,
  .single-service p {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .single-service h3:first-of-type,
  .single-service h4:first-of-type {
    margin-top: 20px;
  }
  
  .single-service p:last-child {
    padding-bottom: 20px;
  }
}

/* 产品卡片特定样式 */
.product-card .product-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.product-card .product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card .product-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--fkz-yellow);
  color: var(--fkz-graphite);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 2;
}

.product-card h3 {
  font-size: 20px;
  margin: 0;
  width: 100%;
  color: var(--fkz-graphite);
}

.product-card .card-description {
  color: var(--fkz-gray-60);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  width: 100%;
  flex: 1;
}

.product-card .product-positioning {
  color: var(--fkz-gray-70);
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-card .product-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  padding-top: 12px;
  width: 100%;
  border-top: 1px solid var(--fkz-gray-10);
}

.product-card .product-meta > div {
  flex: 1;
}

.product-card .product-meta b {
  display: block;
  font-weight: 600;
  color: var(--fkz-graphite);
  margin-bottom: 4px;
  font-size: 12px;
}

.product-card .product-meta span {
  color: var(--fkz-gray-60);
}

.product-card .card-arrow {
  color: var(--fkz-yellow-dark);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  transition: all 200ms ease;
}

.product-card:hover .card-arrow {
  color: var(--fkz-graphite);
  gap: 8px;
}

.product-card .link-arrow {
  transition: transform 200ms ease;
}

.product-card:hover .link-arrow {
  transform: translateX(4px);
}

.product-card:hover {
  border-color: var(--fkz-yellow);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(4, 9, 30, 0.12), 0 4px 12px rgba(4, 9, 30, 0.08);
}

.product-card:hover .product-media::after {
  opacity: 0;
}

/* Homepage feature cards share one layout and stretch to the same row height. */
.page-home #feature .row > .col-lg-4 {
  display: flex;
}
.page-home #feature .single-cat {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.page-home #feature .single-cat > h2 {
  margin-top: 40px;
}
.page-home #feature .single-cat > p {
  margin-bottom: 0;
}

/* Align copyright and registration text on the same baseline. */
.page-home .footer-bottom {
  align-items: baseline;
}
.page-home .footer-bottom .footer-text,
.page-home .footer-bottom .footer-legal {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.8;
}