/* Progressive refinements: retain the existing brand and cascade layers. */
@layer experience {
  :root {
    --motion-fast: 180ms;
    --motion-enter: 420ms;
    --ease-out: cubic-bezier(.2,.8,.2,1);
    --focus-ring: #375600;
  }

  html { scroll-padding-top: calc(var(--header-height) + 2rem); }
  /* Large narrative sections must never become blank/skipped while scrolling. */
  .section { content-visibility: visible; contain-intrinsic-size: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  h1, h2, h3, p, li, label, summary {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .page-hero h1 + p { margin-block-start: 1.25rem; }
  .seo-copy p + h2 { margin-block-start: 2.25rem; }
  .seo-copy p a { text-decoration: underline; text-underline-offset: .18em; }
  :is(.team-links, .contact-details) a { overflow-wrap: anywhere; }
  :is(.region-grid, .seo-copy-grid, .team-list) > * { min-inline-size: 0; }
  :is(.button, .seo-static-phone) { min-block-size: 44px; }
  :is(.seo-static-nav a, summary) {
    min-block-size: 44px;
    align-content: center;
  }
  summary { padding-block: .5rem; }
  :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 4px;
  }
  :is(.button--primary, .seo-static-phone) { background-color: #547800; color: #fff; }
  :is(.region-list, .district-list) li { font-size: .8rem; }
  .webnode-table-wrap { overscroll-behavior-inline: contain; }

  @media (width <= 680px) {
    .home-hero h1 { max-width: none; width: 100%; }
    h1 { font-size: clamp(1.65rem, 7.2vw, 2.4rem); line-height: 1.18; }
    h2 { font-size: clamp(1.4rem, 6vw, 1.9rem); line-height: 1.24; }
    h3 { font-size: clamp(1.15rem, 5vw, 1.5rem); line-height: 1.3; }
    :is(.region-card h3, .seo-copy h2) { font-size: clamp(1.35rem, 5.8vw, 1.8rem); line-height: 1.24; }
    :is(.button, .seo-static-phone, .region-list li, .district-list li) { white-space: normal; overflow-wrap: normal; word-break: normal; }
    :is(input, textarea, select) { font-size: 1rem; }
    .seo-static-nav a { font-size: .8rem; }
    .seo-static-header { --header-height: 9.5rem; }
    html { scroll-padding-top: 10rem; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .reveal.is-visible { animation: a24-enter var(--motion-enter) var(--ease-out) both; }
    :is(.button, .seo-static-phone, .region-card) {
      transition: transform var(--motion-fast) var(--ease-out),
        box-shadow var(--motion-fast) var(--ease-out),
        background-color var(--motion-fast) linear;
    }
    @media (hover: hover) and (pointer: fine) {
      :is(.button, .seo-static-phone):hover { transform: translateY(-2px); }
      .region-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
    }
  }
  @keyframes a24-enter {
    from { transform: translateY(12px); }
    to { transform: translateY(0); }
  }
}

/* Accessibility overrides also cover legacy unlayered rules and pseudo-elements. */
@media (width <= 680px) {
  .kosten-details-card { padding: 1rem; }
}
.home-hero__visual img, .pricing-skeleton span,
.services-contact-strip__request, .services-contact-strip__request::before,
.services-contact-strip__request::after {
  animation: none !important;
}
.services-contact-strip__request::before { display: none; }
.home-hero__visual, .home-hero__copy > :is(.eyebrow, h1, .hero-lead, .hero-actions, .hero-trust) {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}
@media print {
  .section, .reveal { content-visibility: visible !important; opacity: 1 !important; transform: none !important; }
}