/* Amsero — production base styles. Globals ported verbatim from the Design Master head;
   the master authored in content-box (no global box-sizing reset) — do not add one. */

html { scroll-behavior: smooth; }
body { margin: 0; background: #faf2e6; color: #150600; font-family: 'Public Sans', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #150600; }
a:hover { color: #b58443; }
::selection { background: #b58443; color: #faf2e6; }
a:focus-visible, button:focus-visible { outline: 2px solid #b58443; outline-offset: 4px; }
img, svg { max-width: 100%; }

/* --- recreated hover/focus states (were runtime-injected scoped CSS, not serialized) --- */
.scp1:hover { background: linear-gradient(180deg, #cd9855, #b58443) !important; color: #faf2e6 !important; }
[data-cta-outline]:hover { border-color: #b58443 !important; color: #b58443 !important; }

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

/* ============================================================
   RESPONSIVE
   Master does responsive in JS (matchMedia state -> inline styles).
   Breakpoints: 1150 (mobile), 1000 (narrow), 699 (phone), 479 (tiny), 399 (xs).
   clamp() in inline styles already handles fluid sizing; these rules cover
   the discrete structural/layout switches only. !important overrides inline.
   ============================================================ */

/* default (desktop >1150): mobile-only bits hidden */
.nav-hamburger { display: none !important; }
#mobile-menu { display: none !important; }
.lc-mobile { display: none !important; }
.fit-narrow { display: none; }

/* isShort: laptops <=760px tall (matches master matchMedia max-height:760 and min-width:1151) */
@media (max-height: 760px) and (min-width: 1151px) {
  .hero-body { padding-top: 12px !important; padding-bottom: 40px !important; min-height: min(88vh, 840px) !important; }
  .hero-copy > h1 { font-size: clamp(44px, 5.2vw, 68px) !important; }
}

@media (max-width: 1150px) {
  /* --- navigation --- */
  .nav-desktop { display: none !important; }
  .nav-hamburger { display: inline-flex !important; }
  #mobile-menu { display: flex !important; }
  /* --- "Der zweite Kauf": desktop graphic -> mobile graphic --- */
  .lc-desktop { display: none !important; }
  .lc-mobile { display: block !important; }
  /* --- Fit "Amsero übernimmt": desktop blob -> mobile stacked pills --- */
  .fit-wide { display: none !important; }
  .fit-narrow { display: block !important; }
  /* --- hero: absolute right graphic -> stacked dark panel below copy --- */
  .hero-bg-desktop { display: none !important; }
  .hero-section { overflow: visible !important; }
  .hero-body { min-height: 0 !important; display: block !important; padding-bottom: 0 !important; }
  .hero-copy { position: static !important; max-width: 620px !important; }
  .life-wrap {
    position: relative !important; top: auto !important; bottom: auto !important; right: auto !important;
    width: auto !important; z-index: 2 !important;
    margin: 72px calc(-1 * clamp(20px, 5vw, 56px)) 0 !important;
    padding: 72px clamp(24px, 6vw, 44px) 80px !important;
    background: radial-gradient(130% 120% at 82% 0%, #31180a, #1f0c03 52%, #150600) !important;
    border-radius: 40px 40px 0 0 !important;
  }
  #life-box { position: relative !important; width: auto !important; height: auto !important; display: flex !important; flex-direction: column !important; gap: 44px !important; }
  #life-box > button[data-life-node] { position: relative !important; left: auto !important; top: auto !important; transform: none !important; max-width: 420px !important; }
  #life-box > button[data-life-node]:nth-of-type(1) { margin-left: 20px !important; }
  #life-box > button[data-life-node]:nth-of-type(2) { margin-left: 0 !important; }
  #life-box > button[data-life-node]:nth-of-type(3) { margin-left: 44px !important; }
  #life-box > button[data-life-node]:nth-of-type(4) { margin-left: 8px !important; }
  #life-box > button[data-life-node]:nth-of-type(5) { margin-left: 28px !important; }
  /* mobile stage question column widens (desktop clamp ~260px -> 340px) */
  #life-box > button[data-life-node] > span:nth-child(2) > span:nth-child(2) { max-width: 340px !important; }
  /* top-bar CTA sizing on mobile (matches navCtaStyle) */
  .nav-cta { padding: 10px 14px !important; font-size: 13px !important; }
}

/* phone kicker letter-spacing tightens (kickerStyle: phone -> 0.16em) */
@media (max-width: 699px) {
  .hero-copy > div:first-child { letter-spacing: 0.16em !important; }
}

/* isXs (<=399): top-bar CTA hidden, hamburger + menu carry the CTA */
@media (max-width: 399px) {
  .nav-cta { display: none !important; }
}

/* --- staging patch: item 5 (case Replenishment card top alignment, desktop) --- */
@media (min-width: 700px) {
  .r-beo-align { padding-top: 22px !important; }
}
/* --- staging patch: item 6 (reduce desktop gap before "So läuft die Arbeit") --- */
@media (min-width: 1151px) {
  .r-blick-inner { padding-bottom: clamp(60px, 6vw, 92px) !important; }
  .r-arbeitsweise-inner { padding-top: clamp(40px, 4vw, 52px) !important; }
}

/* grid collapses (narrow <=1000) */
@media (max-width: 1000px) {
  .r-ansetzt-cols { grid-template-columns: 1fr !important; }
  .r-kpi-cols { grid-template-columns: 1fr !important; }
  .r-blick-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* wide-only ({{ wide }}) decorations the master drops on narrow */
  .r-wide-only { display: none !important; }
  .r-wide-conn { display: none !important; }
  /* absolute desktop campaign caption -> normal centered flow (avoids off-screen clip) */
  .r-camp-label { position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; text-align: center !important; margin: 8px 0 0 !important; white-space: normal !important; width: auto !important; }
}

/* phone (<=699) */
@media (max-width: 699px) {
  .r-prio-cols { grid-template-columns: 1fr !important; }
  .r-build-cols { grid-template-columns: 1fr 1fr !important; }
  .r-blick-cols { grid-template-columns: 1fr !important; }
  /* flow diagrams: wrap 6 nodes into 2 rows (flowRowStyle/flowBreak mobile) */
  .flow-noderow { overflow-x: visible !important; flex-wrap: wrap !important; row-gap: 12px !important; }
  .flow-noderow [data-draw="280"] { flex: 0 0 100% !important; min-width: 0 !important; margin: 0 !important; border: none !important; }
  .r-flow-labelcol { grid-template-columns: 60px minmax(0px, 1fr) !important; }
  /* case-study 2-column section grids collapse to single column */
  .r-col-collapse { grid-template-columns: 1fr !important; }
  /* item 9: case section headlines — avoid stranded short words on phone */
  .r-case-h2 { font-size: clamp(30px, 8.2vw, 40px) !important; text-wrap: balance !important; }
  /* item 10: hide measure-timeline horizontal connectors on phone (steps stack -> connectors are fragments) */
  .r-measure-conn { display: none !important; }
  /* mobile micro-patch: drop decorative left line + its indent so the block aligns to the content edge */
  .r-mobile-noline { border-left: none !important; padding-left: 0 !important; }
  /* customer-level KPI (Tag24/Tag19): replace the leftover vertical separator with the SAME horizontal
     divider used between KPI groups (border-top 1px rgba(250,242,230,0.2) + matching spacing rhythm) */
  .r-kpi3-divider {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid rgba(250, 242, 230, 0.2) !important;
    margin-top: clamp(36px, 3.6vw, 52px) !important;
    padding-top: clamp(28px, 2.8vw, 36px) !important;
  }
  /* case-study KPI table -> phone widths/sizes (matches master phone branch) */
  .r-kpi-table th:nth-child(1) { width: 32% !important; }
  .r-kpi-table th:nth-child(2), .r-kpi-table th:nth-child(3) { width: 17% !important; }
  .r-kpi-table th:nth-child(4) { width: 34% !important; }
  .r-kpi-table th { font-size: 11px !important; letter-spacing: 0.08em !important; }
  .r-kpi-table td { font-size: 14.5px !important; white-space: normal !important; }
  /* item 7: Umsetzen connector lines are notPhone-only in the master -> hide on phone */
  .r-umsetzen-conn { display: none !important; }
  /* campaign icons: absolute cpL/cpT layout -> centered wrap (matches master 3+2) */
  .camp-cont { height: auto !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: flex-start !important; gap: 22px 26px !important; }
  .camp-cont > div { position: static !important; left: auto !important; top: auto !important; right: auto !important; transform: none !important; }
  .camp-cont > span { display: none !important; }
  .camp-cont > p { position: static !important; left: auto !important; right: auto !important; top: auto !important; flex: 0 0 100% !important; width: auto !important; margin: 6px 0 0 !important; text-align: center !important; }
}