/* Release candidate with eight transparent images, two already-alpha originals.
 * User approved layout: 2214x1580 source reference, uploaded SHA256:
 * d4c1976efacc5604dfc336c066dd8a861d96caec8235b5137969143c9c1d10b0
 * User positions applied at min-width 1100px by container query.
 * Below 1100px existing tested responsive grid stays in place. */
/* mabo.de – final user-approved homepage valve collages (30 October 2026).
 * Source: private user's 9-position visual editor export. Source SHA256: d4c1976efacc5604dfc336c066dd8a861d96caec8235b5137969143c9c1d10b0
 * A deliberately gentle photograph background gradient is restored from
 * the original public friend-design.css (not the discarded extended blue hero).
 * Static CSS only: no public editor, localStorage, cookies, or external scripts.
 */
html:root body .family-card__media--gallery {
  isolation: isolate;
  background:
    radial-gradient(70% 55% at 50% 88%, rgba(11, 42, 64, .12), transparent 70%),
    linear-gradient(170deg, #fff 0%, var(--surface-2) 100%);
}

/* Transparent source images retain their original colors without CSS blending. */
html:root body .family-card__media--gallery > .family-card__gallery {
  mix-blend-mode: normal;
}

/* Slightly straighten and center the upper brass hero valve, as approved. */
.hero__visual > .hero__product--1 {
  transform: translateX(clamp(5px, .75vw, 10px)) rotate(1.5deg);
  transform-origin: center center;
}

/* Structural composition and shape-aware grid design, also used in preview. */
/* Experiment: ruhigere Bildgroessen und asymmetrische Ventilcollagen.
 * Nur auf der passwortgeschuetzten Startseite; Produktfotos bleiben unberuehrt.
 * Bei Smartphonebreite bleibt das Original-Raster vorerst bestehen.
 */
@media (min-width: 640px) {
  /* 1.28 : 1 statt 1.618 : 1: Nebenprodukte erhalten sichtbar mehr Raum. */
  :root .family-card__gallery:not(.family-card__gallery--single) {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
    gap: .3rem;
  }
  :root .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-image--main {
    height: 79%;
    align-self: center;
    justify-self: center;
  }
  :root .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs {
    gap: .35rem;
  }
  :root .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs > .family-card__gallery-image {
    transform-origin: center center;
  }
  /* Standardventile: grosses Produkt links ruhiger, Nebenausfuehrungen diagonal versetzt. */
  :root .family-card:nth-child(1) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-image--main {
    transform: translate(-3px, 9px) scale(.98);
  }
  :root .family-card:nth-child(1) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs > .family-card__gallery-image:first-child {
    transform: translate(-13px, -6px) scale(1.11);
  }
  :root .family-card:nth-child(1) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs > .family-card__gallery-image:last-child {
    transform: translate(-6px, 7px) scale(1.10);
  }
  /* Kunststoff: den Rhythmus spiegeln, Leitprodukt rechts, kleinere links. */
  :root .family-card:nth-child(2) .family-card__gallery:not(.family-card__gallery--single) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
  }
  :root .family-card:nth-child(2) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-image--main {
    grid-column: 2;
    grid-row: 1;
    transform: translate(5px, -2px) scale(.90);
  }
  :root .family-card:nth-child(2) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs {
    grid-column: 1;
    grid-row: 1;
  }
  :root .family-card:nth-child(2) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs > .family-card__gallery-image:first-child {
    transform: translate(21px, 7px) scale(1.12);
  }
  :root .family-card:nth-child(2) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs > .family-card__gallery-image:last-child {
    transform: translate(2px, -7px) scale(1.12);
  }
  /* Vakuum: flanschseitiges Hauptprodukt tiefer, Nebenbilder freier verteilt. */
  /* Vacuum valves: explicit separation, independent of SVG visual crop. */
  :root .family-card:nth-child(3) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs {
    row-gap: 1.3rem;
  }
  :root .family-card:nth-child(3) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-image--main {
    transform: translate(-4px, 12px) scale(1.02);
  }
  :root .family-card:nth-child(3) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs > .family-card__gallery-image:first-child {
    transform: translate(-11px, -4px) scale(1.02);
  }
  :root .family-card:nth-child(3) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs > .family-card__gallery-image:last-child {
    transform: translate(9px, 1px) scale(1.00);
  }
  /* Starterventil: Einzelabbildung und gemeinsamer Kartenrahmen unveraendert. */
}

/* Final user placement. Exported X and Y are % of gallery RECT,
   not % of the SVG image: 1cqw/1cqh are exactly 1% of the parent size.
   The 1397px desktop layout can therefore be reproduced without JS.
   On narrower screens use the earlier non-overlapping responsive grid. */
@supports (container-type: size) {
@media (min-width: 1100px) {
  :root .family-card:nth-child(-n+3) .family-card__gallery:not(.family-card__gallery--single) {
    container-type: size;
  }
  /* standard-1 – Baureihe 22 */
  :root .family-card:nth-child(1) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-image--main {
    transform: translate(0.999cqw, 4.059cqh) scale(0.93);
  }
  /* standard-2 – Baureihe 70 */
  :root .family-card:nth-child(1) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs > .family-card__gallery-image:first-child {
    transform: translate(-10.829cqw, -12.808cqh) scale(0.96);
  }
  /* standard-3 – Baureihe 13 */
  :root .family-card:nth-child(1) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs > .family-card__gallery-image:last-child {
    transform: translate(-2.304cqw, -5.502cqh) scale(1.3);
  }
  /* plastic-1 – K01 */
  :root .family-card:nth-child(2) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-image--main {
    transform: translate(1.306cqw, 16.054cqh) scale(0.65);
  }
  /* plastic-2 – K01 Multi */
  :root .family-card:nth-child(2) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs > .family-card__gallery-image:first-child {
    transform: translate(38.788cqw, -9.11cqh) scale(1.27);
  }
  /* plastic-3 – K02 */
  :root .family-card:nth-child(2) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs > .family-card__gallery-image:last-child {
    transform: translate(5.376cqw, -10.372cqh) scale(1.32);
  }
  /* vacuum-1 – MV235 NC */
  :root .family-card:nth-child(3) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-image--main {
    transform: translate(37.481cqw, -33.552cqh) scale(0.92);
  }
  /* vacuum-2 – MV220 NC */
  :root .family-card:nth-child(3) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs > .family-card__gallery-image:first-child {
    transform: translate(-5.76cqw, 50.145cqh) scale(1.27);
  }
  /* vacuum-3 – HV250 M */
  :root .family-card:nth-child(3) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs > .family-card__gallery-image:last-child {
    transform: translate(-50.615cqw, -21.557cqh) scale(1.6);
  }
}
}

/* Responsive QA fix: separate K01 Multi/K02 from 640 to 1099 CSS px.
 * Preserve the approved desktop placements from 1100px upwards. */
@media (min-width: 640px) and (max-width: 1099px) {
  :root .family-card:nth-child(2) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs > .family-card__gallery-image:first-child {
    transform: translate(21px, 5px) scale(1.05);
  }
  :root .family-card:nth-child(2) .family-card__gallery:not(.family-card__gallery--single) > .family-card__gallery-thumbs > .family-card__gallery-image:last-child {
    transform: translate(2px, 4px) scale(1.05);
  }
}

/* Cross-engine SVG grid sizing (Safari / WebKit, 30 Oct 2026).
 * In WebKit, height:100% of the SVG thumbnail sometimes resolves against the
 * whole gallery instead of its grid track, doubling its rendered height.
 * Size-independent upper bound matches half the card gallery height, taking
 * the original padding/border/row gap into account, without changing the
 * approved transforms, the four-column iPad layout or any product artwork. */
html:root body .family-card__gallery-thumbs > .family-card__gallery-image {
  max-height: calc(clamp(8rem, 10vw, 9rem) - 1.925rem - 1px);
}

/* Homepage hero: associate the 150 bar / Baureihe 70 badge with the left valve.
 * Vertical move only (top: 8% -> 26%); left, size and all valve placements unchanged. */
html:root body .hero__visual > .hero__badge--a { top: 26%; }