/**
 * Branchen-Landingpages – Skalierung + Innenabstand an Karten-Rahmen.
 * Nach cango-empire-v4-monopoly.css einbinden (v6).
 */
:root {
  --branche-inset: 1.75rem 2rem;       /* 28px 32px – Standard-Karten */
  --branche-inset-lg: 2rem 2.25rem;    /* 32px 36px – große Boxen */
  --branche-inset-sm: 1.125rem 1.375rem;
}

/* ── Container-Rand (Viewport) ── */
body.empire-sync--landing .container,
body.has-primary-cta-bar .hr-section > .container,
body.has-primary-cta-bar .hr-wrap {
  padding-left: clamp(20px, 5vw, 60px);
  padding-right: clamp(20px, 5vw, 60px);
}

/* ── Typografie (kompakt) ── */
body.empire-sync--landing .section__title,
body.empire-sync--landing h2.section__title {
  font-size: clamp(1.125rem, 2.5vw, 1.625rem) !important;
  line-height: 1.2 !important;
}

body.empire-sync--landing .section__header {
  margin-bottom: 1.5rem !important;
}

body.empire-sync--landing .hero__title,
body.empire-sync--landing .subpage-hero__title {
  font-size: clamp(1.375rem, 3.5vw, 2.125rem) !important;
}

body.empire-sync--landing .hero__subtitle,
body.empire-sync--landing .subpage-hero__subtitle {
  font-size: 0.9375rem !important;
  max-width: 38rem !important;
}

body.empire-sync--landing .hero {
  min-height: unset !important;
  padding-top: clamp(48px, 7vw, 80px) !important;
  padding-bottom: clamp(36px, 5vw, 56px) !important;
}

body.empire-sync--landing .section {
  padding-top: clamp(32px, 4vw, 48px) !important;
  padding-bottom: clamp(32px, 4vw, 48px) !important;
}

/* ── INNENABSTAND: Inhalt nicht am orangen/farbigen Rahmen ── */
body.empire-sync--landing .problem__card,
body.empire-sync--landing .solution__card,
body.empire-sync--landing .partner-card,
body.empire-sync--landing .tech__card,
body.empire-sync--landing .pillar-card,
body.empire-sync--landing .offer-card,
body.empire-sync--landing .benefit-card,
body.empire-sync--landing .proof-card,
body.empire-sync--landing .value-card {
  padding: var(--branche-inset) !important;
  box-sizing: border-box !important;
}

body.empire-sync--landing .problem__intro,
body.empire-sync--landing .partners__intro {
  padding: var(--branche-inset-lg) !important;
  box-sizing: border-box !important;
}

body.empire-sync--landing .cango-advantage {
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  padding: var(--branche-inset-lg) !important;
  box-sizing: border-box !important;
}

body.empire-sync--landing .cango-advantage__step {
  padding: 1.5rem 1.25rem !important;
  box-sizing: border-box !important;
}

body.empire-sync--landing .solution__benefit {
  padding: var(--branche-inset-sm) !important;
  box-sizing: border-box !important;
}

body.empire-sync--landing .digital-banner__number-box {
  padding: 1.5rem 1.75rem !important;
  box-sizing: border-box !important;
}

body.empire-sync--landing .digital-banner__feature {
  padding: 0.875rem 1.125rem !important;
  box-sizing: border-box !important;
}

body.empire-sync--landing .hero__stat,
body.empire-sync--landing .hero__stats .hero__stat {
  padding: 1.125rem 1rem !important;
  box-sizing: border-box !important;
}

body.empire-sync--landing .hero__stat-value {
  font-size: 1.25rem !important;
}

body.empire-sync--landing .problem__card-stat {
  font-size: 1.5rem !important;
}

body.empire-sync--landing .app-showcase__feature {
  padding: 0.875rem 1rem !important;
  box-sizing: border-box !important;
}

/* Karriere & HR */
body.has-primary-cta-bar .hr-hero,
body.has-primary-cta-bar .hero {
  padding-top: clamp(40px, 6vw, 64px) !important;
  padding-bottom: clamp(32px, 4vw, 48px) !important;
}

body.has-primary-cta-bar .hr-hero h1,
body.has-primary-cta-bar .hero h1 {
  font-size: clamp(1.375rem, 3.5vw, 2.125rem) !important;
}

body.has-primary-cta-bar .hr-problem-card,
body.has-primary-cta-bar .hr-partner-card,
body.has-primary-cta-bar .hr-solution-card {
  padding: var(--branche-inset) !important;
  box-sizing: border-box !important;
}

body.has-primary-cta-bar .hr-alliance-box {
  padding: var(--branche-inset-lg) !important;
  box-sizing: border-box !important;
}

body.has-primary-cta-bar .hr-section,
body.has-primary-cta-bar .sec {
  padding-top: clamp(32px, 4vw, 48px) !important;
  padding-bottom: clamp(32px, 4vw, 48px) !important;
}

body.has-primary-cta-bar .hr-stat {
  padding: 12px 16px !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  :root {
    --branche-inset: 1.375rem 1.5rem;
    --branche-inset-lg: 1.5rem 1.75rem;
  }

  body.empire-sync--landing .container,
  body.has-primary-cta-bar .hr-section > .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}