/* Shared public design contract: docs/homepage-design.md.
   The accepted homepage supplies the single type/spacing scale.
   Editorial pages and public UI use these tokens; the private admin is untouched. */
:root {
  --home-body: .9375rem;
  --home-body-line: 1.375rem;
  --home-small: .8125rem;
  --home-small-line: 1.125rem;
  --home-h1: 2.25rem;
  --home-h1-line: 2.5rem;
  --home-h2: 1.75rem;
  --home-h2-line: 2.125rem;
  --home-h3: 1.375rem;
  --home-h3-line: 1.75rem;
  --home-section: 3.5rem;
  --home-gutter: 1rem;
  --home-block: 2rem;
  --home-layout: 2rem;
  --home-price: 1.75rem;
  --home-price-line: 2.125rem;
}

/* Share the hero's diagonal bands with the first reference section. The
   background occupies the hero grid row plus a runout, without changing either
   section's layout. Compensated stops preserve the original 185deg composition:
   extending the gradient line adds runout * cos(5deg) to its length. */
.home-intro {
  --hero-band-runout: clamp(6rem, 12vw, 24rem);
  display: grid;
  isolation: isolate;
}
.home-intro-background {
  position: relative;
  overflow: clip;
  grid-area: 1 / 1;
  margin-bottom: calc(-1 * var(--hero-band-runout));
  pointer-events: none;
  background: linear-gradient(185deg,
    #fff 0%,
    #fff calc(62% - var(--hero-band-runout) * .617641),
    #ededed calc(74% - var(--hero-band-runout) * .737184),
    #fff calc(77% - var(--hero-band-runout) * .767070),
    #ededed calc(86% - var(--hero-band-runout) * .856727),
    #fff calc(88% - var(--hero-band-runout) * .876651),
    #fff 100%);
}
.home-intro > .home-hero { grid-area: 1 / 1; }
.home-intro-references { grid-area: 2 / 1; }
.home-intro > .home-hero,
.home-intro-references { position: relative; }

/* One narrow full-width raster. 185deg gray-gradient isolines rise at +5deg;
   extend beyond both viewport edges, with no capsule ends or full-area filter. */
.home-sunray {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ray-width, 0px);
  height: var(--ray-height, 0px);
  pointer-events: none;
  opacity: 0;
  transform-origin: 0 0;
  transform: translate3d(var(--ray-x, 0px), var(--ray-y, 0px), 0) rotate(5deg);
  background: linear-gradient(to bottom,
    rgb(233 183 67 / 0) 0%, rgb(233 183 67 / .10) 28%,
    rgb(233 183 67 / .18) 50%, rgb(233 183 67 / .10) 72%, rgb(233 183 67 / 0) 100%);
}
@keyframes hero-random-ray {
  0% { opacity: 0; transform: translate3d(var(--ray-x), calc(var(--ray-y) + var(--ray-drift)), 0) rotate(5deg); }
  50% { opacity: var(--ray-peak); transform: translate3d(var(--ray-x), var(--ray-y), 0) rotate(5deg); }
  100% { opacity: 0; transform: translate3d(var(--ray-x), calc(var(--ray-y) - var(--ray-drift)), 0) rotate(5deg); }
}

@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .home-intro-background[data-sunlight-state="running"] > .home-sunray {
    display: block;
    will-change: transform, opacity;
  }
  .home-intro-background[data-sunlight-state="running"] > .home-sunray[data-active] {
    animation: hero-random-ray var(--ray-duration) cubic-bezier(.45, 0, .55, 1) both;
  }
}

[data-site-shell]:has(.heading-hero) :is(section, footer) {
  font-family: Inter, sans-serif;
  font-size: var(--home-body);
  line-height: var(--home-body-line);
  font-weight: 400;
}

[data-site-shell]:has(.heading-hero) section {
  padding-block: var(--home-section);
  padding-inline: var(--home-gutter);
}
[data-site-shell]:has(.heading-hero) section:has(.heading-hero) {
  padding-top: 7rem;
  min-height: 0;
}
/* The logo strip is a compact supporting element, not a content section. */
[data-site-shell]:has(.heading-hero) section:has(.animate-scroll) {
  padding-block: 1.5rem;
}

/* Decorative section labels add visual noise above headings. Functional labels,
   including step numbers and article categories, remain visible. */
[data-site-shell]:has(.heading-hero) section[aria-labelledby="home-references-heading"] p.uppercase,
[data-site-shell]:has(.heading-hero) #dashcam-einbau-muenchen > div > .grid > div:first-child > p.uppercase,
[data-site-shell]:has(.heading-hero) #dashcam-einbau-muenchen > div > .border-t > .flex > div > p.uppercase {
  display: none;
}

[data-site-shell]:has(.heading-hero) :is(section, footer) :is(h1, h2, h3) {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  letter-spacing: -.025em;
  margin-block: 0;
}
[data-site-shell]:has(.heading-hero) section h1 {
  font-size: var(--home-h1);
  line-height: var(--home-h1-line);
  letter-spacing: -.035em;
}
[data-site-shell]:has(.heading-hero) :is(section, footer) h2 {
  font-size: var(--home-h2);
  line-height: var(--home-h2-line);
}
[data-site-shell]:has(.heading-hero) :is(section, footer) h3 {
  font-size: var(--home-h3);
  line-height: var(--home-h3-line);
}

[data-site-shell]:has(.heading-hero) :is(section, footer) :is(p, blockquote, .home-copy),
[data-site-shell]:has(.heading-hero) section [role="region"] > div,
[data-site-shell]:has(.heading-hero) section li > span {
  font-family: Inter, sans-serif;
  font-size: var(--home-body);
  line-height: var(--home-body-line);
  font-weight: 400;
}
/* Secondary information stays secondary; descriptions are always body text. */
[data-site-shell]:has(.heading-hero) :is(section, footer) :is(p.text-xs, .home-meta, div.text-xs, span.text-xs) {
  font-size: var(--home-small);
  line-height: var(--home-small-line);
  font-weight: 400;
}
[data-site-shell]:has(.heading-hero) section a.group p.mt-0\.5 {
  font-size: var(--home-small);
  line-height: var(--home-small-line);
}
[data-site-shell]:has(.heading-hero) :is(section, footer) :is(p.uppercase, .home-label) {
  font-size: var(--home-small);
  line-height: var(--home-small-line);
  font-weight: 600;
  letter-spacing: .12em;
}
[data-site-shell]:has(.heading-hero) :is(section, footer) :is(button, summary, a.inline-flex, a.underline, h4),
[data-site-shell]:has(.heading-hero) section button > span:not([aria-hidden]),
[data-site-shell]:has(.heading-hero) section .mt-auto.font-semibold {
  font-family: Inter, sans-serif;
  font-size: var(--home-small);
  line-height: var(--home-small-line);
  font-weight: 600;
}
/* Vehicle names and reviewer names are identification, not paragraph emphasis. */
[data-site-shell]:has(.heading-hero) section :is(p.font-bold.text-base, p.break-words.font-semibold) {
  font-weight: 600;
}
[data-site-shell]:has(.heading-hero) section p.text-3xl,
[data-site-shell]:has(.heading-hero) section p > span.text-3xl {
  font-family: Inter, sans-serif;
  font-size: var(--home-price);
  line-height: var(--home-price-line);
  font-weight: 600;
}

/* One spacing scale: label -> title 8; title -> copy 16;
   title -> card copy 8; copy -> content/actions 32. */
[data-site-shell]:has(.heading-hero) :is(section, footer) :is(h1, h2) + p {
  margin-top: 1rem;
}
[data-site-shell]:has(.heading-hero) :is(section, footer) h3 + p {
  margin-top: .5rem;
}
[data-site-shell]:has(.heading-hero) :is(section, footer) p + p {
  margin-top: 1rem;
}
[data-site-shell]:has(.heading-hero) section p.uppercase {
  margin-bottom: .5rem;
}
[data-site-shell]:has(.heading-hero) section p.uppercase + :is(h2, h3) {
  margin-top: 0;
}
[data-site-shell]:has(.heading-hero) section :is(h1, h2) + p,
[data-site-shell]:has(.heading-hero) section :is(p.mb-6, p.mb-8, p.mb-10, p.mb-16) {
  margin-bottom: var(--home-block);
}
/* Leads in a shared heading row have no extra bottom gap: content owns it. */
[data-site-shell]:has(.heading-hero) section .flex.flex-col > div > h2 + p,
[data-site-shell]:has(.heading-hero) #dashcam-einbau-muenchen h2 + p {
  margin-bottom: 0;
}
[data-site-shell]:has(.heading-hero) section .mt-8 {
  margin-top: var(--home-block);
}
[data-site-shell]:has(.heading-hero) section .grid.md\:grid-cols-2:not(.grid-cols-2) {
  gap: var(--home-layout);
}
[data-site-shell]:has(.heading-hero) #dashcam-einbau-muenchen > div > .grid {
  gap: var(--home-layout);
}
[data-site-shell]:has(.heading-hero) section .space-y-12 > * + * {
  margin-top: var(--home-section);
}
[data-site-shell]:has(.heading-hero) #dashcam-einbau-muenchen > div > .border-t {
  margin-top: var(--home-section);
  padding-top: var(--home-section);
}
[data-site-shell]:has(.heading-hero) section ul > li + li {
  margin-top: .5rem;
}
[data-site-shell]:has(.heading-hero) section p.text-3xl {
  margin-bottom: 1rem;
}
[data-site-shell]:has(.heading-hero) section .grid.grid-cols-2 {
  gap: 1rem;
}
[data-site-shell]:has(.heading-hero) section .group > div.flex-1,
[data-site-shell]:has(.heading-hero) section a.group > div.p-6 {
  padding: 1rem;
}
[data-site-shell]:has(.heading-hero) footer > div {
  padding-block: var(--home-section);
  padding-inline: var(--home-gutter);
}
[data-site-shell]:has(.heading-hero) footer h3 {
  margin-bottom: 1rem;
}
[data-site-shell]:has(.heading-hero) footer > div > .max-w-6xl {
  max-width: 80rem;
}
[data-site-shell]:has(.heading-hero) footer h2 + p {
  margin-bottom: var(--home-block);
}
[data-site-shell]:has(.heading-hero) footer p > .italic.font-semibold {
  font-style: normal;
  font-weight: inherit;
}

@media (min-width: 768px) {
  :root {
    --home-h2: 2.25rem;
    --home-h2-line: 2.6875rem;
    --home-h3: 1.5rem;
    --home-h3-line: 1.875rem;
    --home-section: 5rem;
    --home-gutter: 1.5rem;
    --home-layout: 3rem;
    --home-price: 2rem;
    --home-price-line: 2.375rem;
  }
  [data-site-shell]:has(.heading-hero) section:has(.heading-hero) {
    padding-top: 9rem;
  }
  [data-site-shell]:has(.heading-hero) section:has(.animate-scroll) {
    padding-block: 2rem;
  }
  [data-site-shell]:has(.heading-hero) section .grid.grid-cols-2 {
    gap: 1.5rem;
  }
  [data-site-shell]:has(.heading-hero) section .group > div.flex-1,
  [data-site-shell]:has(.heading-hero) section a.group > div.p-6 {
    padding: 1.5rem;
  }
}

/* Keep the H1 compact while the tablet hero already uses two columns. */
@media (min-width: 1024px) {
  :root {
    --home-h1: 3.25rem;
    --home-h1-line: 3.625rem;
  }
}

/* Shared footer legal controls are quiet text links on every route.
   The structural fallback also supports the verified pre-existing JS bundle. */
[data-site-shell] footer :is(.footer-legal-links, .border-t > .flex.flex-wrap) {
  align-items: center;
}
[data-site-shell] footer :is(.footer-legal-links, .border-t > .flex.flex-wrap) > :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #666;
  font-family: Inter, sans-serif;
  font-size: .8125rem;
  line-height: 1.125rem;
  font-weight: 400;
  text-decoration: none;
}
[data-site-shell] footer :is(.footer-legal-links, .border-t > .flex.flex-wrap) > :is(a, button):hover {
  color: #000;
  text-decoration: underline;
  text-underline-offset: .2em;
}
[data-site-shell] footer :is(.footer-legal-links, .border-t > .flex.flex-wrap) > :is(a, button):focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* Homepage: separate editorial sections with whitespace, not long rules.
   Keep functional card/button, table and FAQ row borders intact. */
[data-site-shell]:has(.heading-hero) section,
[data-site-shell]:has(.heading-hero) section[aria-labelledby="home-reviews-heading"] :is(p.border-y, article.border-t, div.border-t) {
  border-block-width: 0;
}
[data-site-shell]:has(.heading-hero) #einbaupreise,
[data-site-shell]:has(.heading-hero) #dashcam-einbau-muenchen > div > .border-t {
  border-top-width: 0;
}

/* Site-wide editorial rule: no decorative separators on public pages.
   Preserve controls, complete card frames, tables, FAQ/filter boundaries,
   checkout state and active navigation indicators. No blanket border reset. */
[data-site-shell] :is(section.border-t, section.border-b, section.border-y:not(form section),
  aside.border-y, nav.border-y, article.border-t),
[data-site-shell] footer .border-t,
[data-site-shell] section[aria-labelledby="shop-guide-heading"] > .border-y,
[data-site-shell] section[aria-labelledby="home-references-heading"] .border-y,
[data-site-shell] section .mt-auto.border-t,
[data-site-shell] section .mb-8.pb-8.border-b,
[data-site-shell] section ul.border-t,
[data-site-shell] section ul.border-t > li.border-b,
[data-site-shell] main article > header > .border-b,
[data-site-shell] main article > .border-t,
[data-site-shell] main div.border-b:has(> h2),
[data-site-shell]:has(#shop-guide-heading) section .mt-14.border-t,
[data-site-shell]:has(#shop-guide-heading) section .border-y.py-16,
[data-site-shell] main .mt-8.pt-6.border-t,
[data-site-shell] main > .border-y {
  border-block-width: 0;
}
/* Non-interactive process/benefit lists, including homepage and fleet copy. */
[data-site-shell] section ol.divide-y,
[data-site-shell] section ol.divide-y > :not([hidden]),
[data-site-shell] section div.divide-y:not(:has(details, button, input)),
[data-site-shell] section div.divide-y:not(:has(details, button, input)) > :not([hidden]),
[data-site-shell] section[aria-labelledby="privacy-heading"] .border-t,
[data-site-shell] section[aria-labelledby="related-heading"] a.border-t {
  border-block-width: 0;
}
/* Editorial accent rules, not alert boxes or selected-state markers. */
[data-site-shell] section :is(p.border-l-2, div.border-l-2),
[data-site-shell] section[aria-labelledby="fleet-proof-heading"] .border-l,
[data-site-shell] main article > header p.border-l-4,
[data-site-shell] main article blockquote.border-l-4 {
  border-left-width: 0;
}
[data-site-shell] > header :is(a.border-b, button.border-b) {
  border-bottom-width: 0;
}

/* Public typography. Scope excludes the private admin and the shared navigation.
   Existing homepage-specific identification and spacing rules remain authoritative. */
:is([data-site-shell] [data-route-transition], [data-site-shell] footer,
  :where(#root) > main.h-dvh, [data-modal-panel],
  :where(body:has([data-site-shell])) [role="dialog"][aria-modal="true"]) {
  font-family: Inter, sans-serif;
  font-size: var(--home-body);
  line-height: var(--home-body-line);
  font-weight: 400;
}
:is([data-site-shell] [data-route-transition], [data-site-shell] footer,
  :where(#root) > main.h-dvh, [data-modal-panel],
  :where(body:has([data-site-shell])) [role="dialog"][aria-modal="true"]) :is(h1, h2, h3) {
  font-family: "Playfair Display", serif;
  font-weight: 400;
  letter-spacing: -.025em;
  overflow-wrap: break-word;
}
:is([data-site-shell] [data-route-transition], :where(#root) > main.h-dvh) h1 {
  font-size: var(--home-h1);
  line-height: var(--home-h1-line);
  letter-spacing: -.035em;
}
:is([data-site-shell] [data-route-transition], [data-site-shell] footer,
  [data-modal-panel], :where(body:has([data-site-shell])) [role="dialog"][aria-modal="true"]) h2 {
  font-size: var(--home-h2);
  line-height: var(--home-h2-line);
}
:is([data-site-shell] [data-route-transition], [data-site-shell] footer,
  :where(#root) > main.h-dvh, [data-modal-panel],
  :where(body:has([data-site-shell])) [role="dialog"][aria-modal="true"]) h3 {
  font-size: var(--home-h3);
  line-height: var(--home-h3-line);
}
:is([data-site-shell] [data-route-transition], [data-site-shell] footer,
  :where(#root) > main.h-dvh, [data-modal-panel],
  :where(body:has([data-site-shell])) [role="dialog"][aria-modal="true"]) :is(p, blockquote, li) {
  font-family: Inter, sans-serif;
  font-size: var(--home-body);
  line-height: var(--home-body-line);
  font-weight: 400;
}
:is([data-site-shell] [data-route-transition], [data-modal-panel]) div.font-inter:is(.leading-relaxed, .leading-6, .leading-7) {
  font-size: var(--home-body);
  line-height: var(--home-body-line);
  font-weight: 400;
}
:is([data-site-shell] [data-route-transition], [data-site-shell] footer,
  :where(#root) > main.h-dvh, [data-modal-panel],
  :where(body:has([data-site-shell])) [role="dialog"][aria-modal="true"]) :is(.text-xs, time, figcaption, nav) {
  font-family: Inter, sans-serif;
  font-size: var(--home-small);
  line-height: var(--home-small-line);
}
:is([data-site-shell] [data-route-transition], [data-site-shell] footer,
  :where(#root) > main.h-dvh, [data-modal-panel],
  :where(body:has([data-site-shell])) [role="dialog"][aria-modal="true"]) :is(button, summary, label, legend, h4, a.inline-flex) {
  font-family: Inter, sans-serif;
  font-size: var(--home-small);
  line-height: var(--home-small-line);
  font-weight: 600;
}
/* Inputs keep the existing 16px mobile-safe role, not paragraph or headline sizes. */
:is([data-site-shell] [data-route-transition], :where(#root) > main.h-dvh,
  [data-modal-panel]) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
}
:is([data-site-shell] [data-route-transition], [data-site-shell] footer,
  :where(#root) > main.h-dvh, [data-modal-panel]) p.uppercase {
  font-size: var(--home-small);
  line-height: var(--home-small-line);
  font-weight: 600;
}
:is([data-site-shell] [data-route-transition], [data-modal-panel]) :is(strong, b) {
  font-weight: 600;
}
:is([data-site-shell] [data-route-transition], [data-modal-panel]) p.text-3xl {
  font-size: var(--home-price);
  line-height: var(--home-price-line);
  font-weight: 600;
}
/* Names, metadata and control text have semantic roles, not random text-* sizes. */
[data-site-shell]:not(:has(.heading-hero)) [data-route-transition] :is(p.font-bold.text-black.text-xl, p.font-semibold.text-sm) {
  font-weight: 600;
}
[data-site-shell]:not(:has(.heading-hero)) [data-route-transition] p.font-bold.text-black.text-xl {
  font-size: var(--home-price);
  line-height: var(--home-price-line);
}
[data-site-shell] [data-route-transition] :is(nav a, nav li, table, table p) {
  font-size: var(--home-small);
  line-height: var(--home-small-line);
}
[data-site-shell] [data-route-transition] :is([role="alert"] h2, #saved-details-heading) {
  font-family: Inter, sans-serif;
  font-size: var(--home-small);
  line-height: var(--home-small-line);
  font-weight: 600;
}
/* Product-card titles use the homepage card-heading role, not section headings. */
[data-site-shell] [data-route-transition] h2:has(> a[href^="/product/"]) {
  font-size: var(--home-h3);
  line-height: var(--home-h3-line);
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
[data-site-shell] [data-route-transition] aside[aria-label="Produktfilter"] h2,
[data-site-shell] [data-route-transition] details h2:not(.heading-section) {
  font-family: Inter, sans-serif;
  font-size: var(--home-small);
  line-height: var(--home-small-line);
  font-weight: 600;
}
[data-site-shell] [data-route-transition] [aria-labelledby="channel-entry-heading"] button .font-playfair {
  font-size: var(--home-h3);
  line-height: var(--home-h3-line);
  font-weight: 400;
}
[data-site-shell] [data-route-transition] [aria-labelledby="channel-entry-heading"] button .mt-2.block {
  font-size: var(--home-body);
  line-height: var(--home-body-line);
  font-weight: 400;
}
[data-site-shell] [data-route-transition] [aria-labelledby="channel-entry-heading"] button .mt-3.block {
  font-size: var(--home-small);
  line-height: var(--home-small-line);
  font-weight: 400;
}
[data-site-shell] [data-route-transition] a.group p.font-bold.text-base {
  font-weight: 600;
}
[data-site-shell] [data-route-transition] a.group p.mt-0\.5 {
  font-size: var(--home-small);
  line-height: var(--home-small-line);
}
[data-site-shell] [data-route-transition] main:has([aria-labelledby="fleet-proof-heading"]) h1 > span {
  white-space: nowrap;
}

/* Editorial rhythm: only non-home page content; never blanket-pad nested cards/forms. */
[data-site-shell]:not(:has(.heading-hero)) [data-route-transition] :is(h1, h2, h3) {
  margin-block: 0;
}
[data-site-shell]:not(:has(.heading-hero)) [data-route-transition] :is(h1, h2) + p {
  margin-top: 1rem;
}
[data-site-shell]:not(:has(.heading-hero)) [data-route-transition] h1 + p {
  margin-bottom: 0;
}
[data-site-shell]:not(:has(.heading-hero)) [data-route-transition] h1 + p + :is(div, a) {
  margin-top: var(--home-block);
}
[data-site-shell]:not(:has(.heading-hero)) [data-route-transition] h3 + p {
  margin-top: .5rem;
}
[data-site-shell]:not(:has(.heading-hero)) [data-route-transition] p + p {
  margin-top: 1rem;
}
[data-site-shell]:not(:has(.heading-hero)) [data-route-transition] ul > li + li {
  margin-top: .5rem;
}
[data-site-shell]:not(:has(.heading-hero)) [data-route-transition] :is(.mb-8, .mb-10, .mb-12, .mb-14):has(> h1) {
  margin-bottom: var(--home-block);
}
[data-site-shell]:not(:has(.heading-hero)) [data-route-transition] p.uppercase:has(+ :is(h1, h2)):not(:has(+ h2 > a[href^="/product/"])) {
  display: none;
}
[data-site-shell]:has(> header):not(:has(.heading-hero)) :is([data-route-transition] > main, [data-route-transition] > div > main) {
  padding-top: 7rem;
  padding-bottom: var(--home-section);
}
[data-site-shell]:has(> header):not(:has(.heading-hero)) [data-route-transition] > main:has(> section):not(:has(> article)) {
  padding-block: 0;
}
[data-site-shell]:has(> header):not(:has(.heading-hero)) [data-route-transition] > main:has(> section) {
  padding-bottom: 0;
}
[data-site-shell]:has(> header):not(:has(.heading-hero)) :is([data-route-transition] > main > section, [data-route-transition] > main > div > section, [data-route-transition] > div > section) {
  padding-block: var(--home-section);
  padding-inline: var(--home-gutter);
}
[data-site-shell]:has(> header):not(:has(.heading-hero)) :is([data-route-transition] > main:not(:has(> article)) > section:first-of-type, [data-route-transition] > div > section:first-of-type) {
  padding-top: 7rem;
}
[data-site-shell]:not(:has(.heading-hero)) [data-route-transition] :is(main > div.px-6, main > article.px-6) {
  padding-inline: var(--home-gutter);
}
[data-site-shell] [data-route-transition] main:is(.px-4, .px-5, .px-6) {
  padding-inline: var(--home-gutter);
}
/* Reveal wrappers are not sections: target the fleet's explicit editorial surfaces. */
[data-site-shell] [data-route-transition] main:has([aria-labelledby="fleet-proof-heading"]) section.px-4:not(:has(nav[aria-label="Breadcrumb"])) {
  padding-block: var(--home-section);
  padding-inline: var(--home-gutter);
}
[data-site-shell]:has(#shop-guide-heading) [data-route-transition] .max-w-\[1440px\] {
  max-width: 80rem;
}
[data-site-shell]:has(#shop-guide-heading) section > div > .min-h-screen {
  min-height: 0;
  padding-block: 0;
}
[data-site-shell]:has(#shop-guide-heading) section[aria-labelledby="shop-guide-heading"] {
  padding-top: var(--home-section);
  margin-top: var(--home-section);
  gap: var(--home-layout);
}
[data-site-shell]:not(:has(.heading-hero)) [data-route-transition] .grid.lg\:grid-cols-2 {
  gap: var(--home-layout);
}
[data-site-shell] [data-route-transition] main div.space-y-16 > section + section {
  margin-top: var(--home-section);
}
[data-site-shell] [data-route-transition] section[id] > .border-b:has(> h2) {
  padding-bottom: 0;
  margin-bottom: 1rem;
}
/* Long-form content: paragraphs 16, lists/media 32, heading-led sections 56/80. */
[data-site-shell] [data-route-transition] .prose-content > p {
  margin-top: 1rem;
}
[data-site-shell] [data-route-transition] .prose-content > :is(ul, ol, figure, blockquote, div) {
  margin-block: var(--home-block);
}
[data-site-shell] [data-route-transition] .prose-content > h2 {
  margin-top: var(--home-section);
  margin-bottom: 1rem;
}
[data-site-shell] [data-route-transition] .prose-content > section {
  margin-top: var(--home-section);
  padding-top: 0;
}
[data-site-shell] [data-route-transition] .prose-content > :first-child {
  margin-top: 0;
}
[data-site-shell] [data-route-transition] article > header {
  margin-bottom: var(--home-block);
}
[data-site-shell] [data-route-transition] section[aria-labelledby="related-products-heading"] {
  margin-top: var(--home-section);
  padding-top: var(--home-section);
}
/* Shared footer has the same rhythm on every public route. */
[data-site-shell] footer > div {
  padding-block: var(--home-section);
  padding-inline: var(--home-gutter);
}
[data-site-shell] footer > div > .max-w-6xl {
  max-width: 80rem;
}
[data-site-shell] footer h2 {
  margin-block: 0;
}
[data-site-shell] footer h2 + p {
  margin-top: 1rem;
  margin-bottom: var(--home-block);
}
[data-site-shell] footer h3 {
  margin-bottom: 1rem;
}
[data-site-shell] footer p > .italic.font-semibold {
  font-style: normal;
  font-weight: inherit;
}
[data-site-shell] footer a.text-sm {
  font-size: var(--home-small);
  line-height: var(--home-small-line);
}
@media (min-width: 768px) {
  [data-site-shell]:has(> header):not(:has(.heading-hero)) :is([data-route-transition] > main, [data-route-transition] > div > main) {
    padding-top: 9rem;
  }
  [data-site-shell]:has(> header):not(:has(.heading-hero)) :is([data-route-transition] > main:not(:has(> article)) > section:first-of-type, [data-route-transition] > div > section:first-of-type) {
    padding-top: 9rem;
  }
  [data-site-shell]:has(> header):not(:has(.heading-hero)) [data-route-transition] > main:has(> section):not(:has(> article)) {
    padding-top: 0;
  }
}

/* Two responsive, static viewport edge filters. No scroll listener, animation or
   full-screen filter. Navigation (z50) and dialogs/drawers (z80+) stay above.
   The empty generated content is decorative and never captures input. */
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) and ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
  @media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
    [data-viewport-blur]::before,
    [data-viewport-blur]::after {
      content: "";
      position: fixed;
      inset-inline: 0;
      z-index: 40;
      pointer-events: none;
      user-select: none;
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }
    [data-viewport-blur]::before {
      top: 0;
      height: 64px;
      -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
      mask-image: linear-gradient(to bottom, #000, transparent);
    }
    [data-viewport-blur]::after {
      bottom: 0;
      height: 40px;
      -webkit-mask-image: linear-gradient(to top, #000, transparent);
      mask-image: linear-gradient(to top, #000, transparent);
    }
    @media (max-width: 767px) {
      [data-viewport-blur]::before { height: 52px; }
      [data-viewport-blur]::after { height: 32px; }
    }
    /* Desktop only: triple the zones and fade white inward on the same layers.
       Tablet/mobile retain their original transparent backdrop-only filters. */
    @media (min-width: 1024px) {
      [data-viewport-blur]::before {
        height: 192px;
        background: linear-gradient(to bottom, #fff, rgb(255 255 255 / 0));
      }
      [data-viewport-blur]::after {
        height: 120px;
        background: linear-gradient(to top, #fff, rgb(255 255 255 / 0));
      }
    }
    /* Also protect route-local lightboxes trapped in a route stacking context. */
    [data-viewport-blur]:has([data-route-transition] .fixed.inset-0)::before,
    [data-viewport-blur]:has([data-route-transition] .fixed.inset-0)::after {
      content: none;
    }
  }
}
@media print {
  [data-viewport-blur]::before,
  [data-viewport-blur]::after { content: none; }
}

/* Public element motion is armed only after the React route is mounted.
   Body copy is never boot-hidden. Static HTML/no-JS stays visible;
   form/checkout/private routes are excluded. */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion-boot] #root :is(h1, h2, h3, h4, h5, h6, img):not(header *, nav *, footer *, form *, aside *, .product-availability, [role="alert"], [role="alert"] *, [role="status"], [role="status"] *) {
    opacity: 0;
  }
}
[data-site-shell] {
  --element-reveal-duration: 900;
  --element-reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
}
[data-site-shell] #rezensionen [data-review-card],
[data-site-shell] #rezensionen [data-review-card]:hover {
  border: 1px solid #e5e7eb;
  box-shadow: none;
  transform: none;
}

[data-site-shell] [data-reveal-state="pending"] {
  opacity: 0;
  translate: 0 16px;
}
@media (max-width: 767px) {
  [data-site-shell] [data-reveal-state="pending"] { translate: 0 12px; }
}
[data-site-shell] [data-reveal-kind="chars"][data-reveal-state="pending"] { translate: none; }
[data-site-shell] [data-reveal-kind="surface"][data-reveal-state="pending"] { opacity: 1; translate: none; }

/* Text is measured in-place and never split/reparented in the React tree.
   The inert generated-ink overlay has no duplicate searchable text nodes. */
[data-text-reveal-position] { position: relative; }
[data-text-reveal-overlay] {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
[data-text-reveal-part], [data-text-reveal-ink] {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
[data-text-reveal-ink]::before { content: attr(data-text); }
[data-site-shell] :is(button, a, summary, [data-motion-card] img) {
  transition-duration: 280ms;
}
@media (prefers-reduced-motion: no-preference) {
  [data-site-shell] [data-reveal-kind="surface"][data-reveal-state="pending"] {
    border-color: transparent !important;
    background-color: transparent !important;
  }
  [data-text-reveal-source] {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
  }
  [data-text-reveal-gradient] { background-image: none !important; }
}
@media (hover: hover) and (pointer: fine) {
  [data-site-shell] [data-motion-card] {
    transition-property: border-color, background-color, box-shadow;
    transition-duration: 280ms;
  }
  [data-site-shell] [data-motion-card]:hover {
    border-color: #9ca3af;
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.06);
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-site-shell] [data-reveal-state] { opacity: 1 !important; translate: none !important; filter: none !important; }
  [data-text-reveal-overlay] { display: none !important; }
  [data-site-shell] [data-motion-card]:hover,
  [data-site-shell] .group:hover img { transform: none !important; }
}