/* Stufe 4 — Demo-Hauptseite (Lab-only, based on index.html layout) */

.pm-lab--main-page-demo {
  overflow-x: hidden;
  --pm-stage4-focus-surround-opacity: 0;
  --pm-stage4-focus-blur: 8px;
  --pm-stage4-focus-duration: 1.08s;
  --pm-stage4-focus-exit-duration: 1.25s;
  --pm-stage4-focus-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pm-stage4-focus-header-shift: -120%;
}

/* Stufe 4: aurora scene must never block clicks */
body.pm-lab--main-page-demo.is-repair-focus .repair-focus-scene,
body.pm-lab--main-page-demo.is-repair-focus-enter .repair-focus-scene,
body.pm-lab--main-page-demo.is-repair-focus-exit .repair-focus-scene,
body.pm-lab--main-page-demo .pm-lab-aurora--viewport .repair-focus-scene {
  pointer-events: none !important;
}

/*
 * Stufe 4 focus backdrop — state machine (normal → enter/active → exit → normal).
 * Prevents production wipe (opacity:0, visibility:hidden, translateY) while keeping
 * smooth opacity/filter transitions on background sections.
 */
body.pm-lab--main-page-demo .site-header,
body.pm-lab--main-page-demo main > :not(.repair-focus-target),
body.pm-lab--main-page-demo .section.device-search-section + .section {
  opacity: 1;
  filter: none;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--pm-stage4-focus-duration) var(--pm-stage4-focus-ease),
    filter var(--pm-stage4-focus-duration) var(--pm-stage4-focus-ease),
    transform var(--pm-stage4-focus-duration) var(--pm-stage4-focus-ease);
}

/* Wipe guard — keep layout in flow (no display:none / visibility:hidden wipe) */
body.pm-lab--main-page-demo.is-repair-focus .site-header,
body.pm-lab--main-page-demo.is-repair-focus-enter .site-header,
body.pm-lab--main-page-demo.is-repair-focus-exit .site-header,
body.pm-lab--main-page-demo.pm-stage4-focus-leave .site-header {
  visibility: visible !important;
  pointer-events: none !important;
}

body.pm-lab--main-page-demo.is-repair-focus main > :not(.repair-focus-target),
body.pm-lab--main-page-demo.is-repair-focus-enter main > :not(.repair-focus-target),
body.pm-lab--main-page-demo.is-repair-focus-exit main > :not(.repair-focus-target),
body.pm-lab--main-page-demo.pm-stage4-focus-leave main > :not(.repair-focus-target),
body.pm-lab--main-page-demo.is-repair-focus .section.device-search-section + .section,
body.pm-lab--main-page-demo.is-repair-focus-enter .section.device-search-section + .section,
body.pm-lab--main-page-demo.is-repair-focus-exit .section.device-search-section + .section,
body.pm-lab--main-page-demo.pm-stage4-focus-leave .section.device-search-section + .section {
  visibility: visible !important;
  pointer-events: none !important;
  transform: none !important;
}

/* Enter + active: header slides up/out; surrounding page fades like Reparatur-starten */
body.pm-lab--main-page-demo.is-repair-focus:not(.is-repair-focus-exit):not(.pm-stage4-focus-leave) .site-header,
body.pm-lab--main-page-demo.is-repair-focus-enter:not(.is-repair-focus-exit) .site-header {
  opacity: var(--pm-stage4-focus-surround-opacity) !important;
  filter: blur(var(--pm-stage4-focus-blur)) saturate(0.78) brightness(0.94) !important;
  transform: translateY(var(--pm-stage4-focus-header-shift)) !important;
  pointer-events: none !important;
}

body.pm-lab--main-page-demo.is-repair-focus:not(.is-repair-focus-exit):not(.pm-stage4-focus-leave) main > :not(.repair-focus-target),
body.pm-lab--main-page-demo.is-repair-focus-enter:not(.is-repair-focus-exit) main > :not(.repair-focus-target),
body.pm-lab--main-page-demo.is-repair-focus:not(.is-repair-focus-exit):not(.pm-stage4-focus-leave) .section.device-search-section + .section,
body.pm-lab--main-page-demo.is-repair-focus-enter:not(.is-repair-focus-exit) .section.device-search-section + .section {
  opacity: var(--pm-stage4-focus-surround-opacity) !important;
  filter: blur(var(--pm-stage4-focus-blur)) saturate(0.78) brightness(0.94) !important;
  pointer-events: none !important;
}

/* Exit: symmetric unwind (matches production 1.25s leave) */
body.pm-lab--main-page-demo.is-repair-focus-exit .site-header,
body.pm-lab--main-page-demo.pm-stage4-focus-leave .site-header,
body.pm-lab--main-page-demo.is-repair-focus-exit main > :not(.repair-focus-target),
body.pm-lab--main-page-demo.pm-stage4-focus-leave main > :not(.repair-focus-target),
body.pm-lab--main-page-demo.is-repair-focus-exit .section.device-search-section + .section,
body.pm-lab--main-page-demo.pm-stage4-focus-leave .section.device-search-section + .section {
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  transition:
    opacity var(--pm-stage4-focus-exit-duration) var(--pm-stage4-focus-ease),
    filter var(--pm-stage4-focus-exit-duration) var(--pm-stage4-focus-ease),
    transform var(--pm-stage4-focus-exit-duration) var(--pm-stage4-focus-ease) !important;
}

/* Aurora: enter + leave share duration/easing */
body.pm-lab--main-page-demo.is-repair-focus .pm-lab-aurora:not(.is-disabled) .repair-focus-scene,
body.pm-lab--main-page-demo.is-repair-focus-enter .pm-lab-aurora:not(.is-disabled) .repair-focus-scene {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--pm-stage4-focus-duration) var(--pm-stage4-focus-ease),
    visibility 0s linear;
}

body.pm-lab--main-page-demo.is-repair-focus-exit .pm-lab-aurora:not(.is-disabled) .repair-focus-scene,
body.pm-lab--main-page-demo.pm-stage4-focus-leave .pm-lab-aurora:not(.is-disabled) .repair-focus-scene,
body.pm-lab--main-page-demo .pm-lab-aurora:not(.is-disabled) .repair-focus-scene.pm-stage4-aurora-leaving {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition:
    opacity var(--pm-stage4-focus-exit-duration) var(--pm-stage4-focus-ease),
    visibility 0s linear var(--pm-stage4-focus-exit-duration);
}

/*
 * Stufe 4: pm-heading parity with Full RepairFlow.
 * main-page-demo loads repair-flow.css + is-repair-focus; production rules target
 * h2:not([data-repair-flow-title]) and break heading-lab-shared blur transitions.
 * Re-assert lab heading states (same tokens/classes as full-repairflow.html).
 */
body.pm-lab--main-page-demo .repair-focus-target > .container > .section-head.repair-flow-head .pm-heading-stage .pm-heading-layer.is-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.pm-lab--main-page-demo .repair-focus-target > .container > .section-head.repair-flow-head .pm-heading-stage .pm-heading-current {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
  transition: none !important;
}

body.pm-lab--main-page-demo .repair-focus-target > .container > .section-head.repair-flow-head .pm-heading-stage .pm-heading-outgoing {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
  transition:
    opacity var(--pm-heading-out-ms) var(--pm-heading-ease-out),
    filter var(--pm-heading-out-ms) var(--pm-heading-ease-out),
    transform var(--pm-heading-out-ms) var(--pm-heading-ease-out) !important;
}

body.pm-lab--main-page-demo .repair-focus-target > .container > .section-head.repair-flow-head .pm-heading-stage .pm-heading-outgoing.is-exiting,
body.pm-lab--main-page-demo.is-repair-focus .repair-focus-target > .container > .section-head.repair-flow-head .pm-heading-stage h2.pm-heading-outgoing.is-exiting,
body.pm-lab--main-page-demo.is-repair-focus-enter .repair-focus-target > .container > .section-head.repair-flow-head .pm-heading-stage h2.pm-heading-outgoing.is-exiting {
  opacity: 0 !important;
  filter: blur(var(--pm-heading-blur)) !important;
  transform: translateY(var(--pm-heading-out-shift)) !important;
}

body.pm-lab--main-page-demo .repair-focus-target > .container > .section-head.repair-flow-head .pm-heading-stage .pm-heading-incoming {
  opacity: 0 !important;
  filter: blur(var(--pm-heading-blur)) !important;
  transform: translateY(var(--pm-heading-in-shift)) !important;
  transition:
    opacity var(--pm-heading-in-ms) var(--pm-heading-ease-in),
    filter calc(var(--pm-heading-in-ms) * 1.12) var(--pm-heading-ease-in),
    transform calc(var(--pm-heading-in-ms) * 1.08) var(--pm-heading-ease-in) !important;
}

body.pm-lab--main-page-demo .repair-focus-target > .container > .section-head.repair-flow-head .pm-heading-stage .pm-heading-incoming.is-visible,
body.pm-lab--main-page-demo.is-repair-focus .repair-focus-target > .container > .section-head.repair-flow-head .pm-heading-stage h2.pm-heading-incoming.is-visible,
body.pm-lab--main-page-demo.is-repair-focus-enter .repair-focus-target > .container > .section-head.repair-flow-head .pm-heading-stage h2.pm-heading-incoming.is-visible {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
}

body.pm-lab--main-page-demo.is-repair-focus .repair-focus-target > .container > .section-head.repair-flow-head .pm-heading-stage,
body.pm-lab--main-page-demo.is-repair-focus-enter .repair-focus-target > .container > .section-head.repair-flow-head .pm-heading-stage,
body.pm-lab--main-page-demo.is-repair-focus-exit .repair-focus-target > .container > .section-head.repair-flow-head .pm-heading-stage {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

body.pm-lab--main-page-demo.is-repair-focus .repair-focus-target > .container > .section-head.repair-flow-head .pm-heading-stage h2.pm-heading-layer,
body.pm-lab--main-page-demo.is-repair-focus-enter .repair-focus-target > .container > .section-head.repair-flow-head .pm-heading-stage h2.pm-heading-layer,
body.pm-lab--main-page-demo.is-repair-focus-exit .repair-focus-target > .container > .section-head.repair-flow-head .pm-heading-stage h2.pm-heading-layer {
  visibility: visible !important;
  pointer-events: none !important;
}

body.pm-lab--main-page-demo.is-repair-focus .repair-focus-target > .container > .section-head .kicker,
body.pm-lab--main-page-demo.is-repair-focus-enter .repair-focus-target > .container > .section-head .kicker,
body.pm-lab--main-page-demo.is-repair-focus-exit .repair-focus-target > .container > .section-head .kicker {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body.pm-lab--main-page-demo.is-repair-focus .repair-focus-target,
body.pm-lab--main-page-demo.is-repair-focus-enter .repair-focus-target {
  pointer-events: auto;
}

.pm-lab-demo-banner {
  position: sticky;
  top: 0;
  z-index: 120;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 8px 16px;
  font-size: 0.82rem;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(8px);
}

.pm-lab-demo-banner a {
  color: #075cff;
  text-decoration: none;
}

.pm-lab-demo-banner[hidden] {
  display: none !important;
}

.pm-lab--main-page-demo .pm-repairflow-mount {
  position: relative;
  z-index: 2;
}

.pm-lab--main-page-demo #geraetesuche {
  scroll-margin-top: 112px;
}

.pm-lab--main-page-demo #geraetesuche .device-search-card.reveal {
  animation: none;
  opacity: 1;
  transform: none;
}

.pm-lab--main-page-demo .device-search-section.pm-repairflow-mount {
  padding-block: clamp(72px, 9vw, 132px);
}

.pm-lab--main-page-demo .device-search-section.pm-repairflow-mount > .container {
  position: relative;
  z-index: 2;
  max-width: 960px;
}

.pm-lab--main-page-demo .section-head.repair-flow-head {
  text-align: center;
}

.pm-lab--main-page-demo .pm-lab-aurora--viewport {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Production homepage — full viewport width, no lab preview gutters */
html:has(body.pm-lab--main-page-demo),
body.page-home.pm-lab--main-page-demo {
  scrollbar-gutter: auto;
  margin: 0;
  width: 100%;
  overflow-x: hidden;
}

body.pm-lab--main-page-demo.pm-lab--full-repairflow {
  scrollbar-gutter: auto;
}

body.pm-lab--main-page-demo.pm-lab--full-repairflow .pm-repairflow-mount {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

body.pm-lab--main-page-demo > .pm-lab-aurora.pm-lab-aurora--viewport {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  contain: none;
  overflow: visible;
}

body.pm-lab--main-page-demo > .pm-lab-aurora .repair-focus-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  overflow: visible;
  contain: none;
}

body.pm-lab--main-page-demo > .pm-lab-aurora .repair-focus-aurora {
  inset: 0;
  overflow: visible;
}

/* Termin/Versand: equal inner padding — reference bottom gap = --pm-lab-card-hover-safe (14px) */
.pm-lab--main-page-demo [data-lab-shell-inner]:has(
  [data-lab-content-panel="channel"].is-active:not([hidden]),
  [data-lab-content-panel="channel"].is-entering:not([hidden])
) {
  justify-content: flex-start !important;
  align-items: stretch !important;
}

.pm-lab--main-page-demo [data-lab-content-panel="channel"]:is(.is-active, .is-entering) {
  padding: 0 !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  min-height: auto !important;
  box-sizing: border-box;
}

.pm-lab--main-page-demo [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .pm-lab-shell-layout-stack {
  justify-content: flex-start !important;
  align-items: stretch !important;
  width: 100%;
  flex: 0 0 auto;
}

.pm-lab--main-page-demo [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .pm-lab-shell-layout-zone--content,
.pm-lab--main-page-demo [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .pm-frf-channel-layout {
  justify-content: flex-start !important;
  align-items: stretch !important;
  width: 100%;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
}

.pm-lab--main-page-demo [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .pm-frf-channel-layout {
  padding: var(--pm-lab-card-hover-safe, 14px);
  box-sizing: border-box;
}

.pm-lab--main-page-demo [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .channel-choice-grid {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.pm-lab--main-page-demo [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .channel-choice-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
  text-align: left;
}

.pm-lab--main-page-demo [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .channel-choice-card span {
  margin-top: auto;
}

@media (max-width: 768px) {
  .pm-lab--main-page-demo [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .channel-choice-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile Termin/Versand — compact 2-column cards inside shell (not stacked tall cards) */
@media (max-width: 767px) {
  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-shell-inner]:has(
    [data-lab-content-panel="channel"].is-active:not([hidden]),
    [data-lab-content-panel="channel"].is-entering:not([hidden])
  ) {
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-content-panel="channel"]:is(.is-active, .is-entering) {
    justify-content: flex-start !important;
    align-items: stretch !important;
    min-height: auto !important;
    padding: 8px !important;
  }

  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .pm-lab-shell-layout-stack,
  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .pm-lab-shell-layout-zone--content {
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .pm-frf-channel-layout {
    padding: 6px !important;
    width: 100%;
    box-sizing: border-box;
  }

  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .channel-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .channel-choice-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 8px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 4px !important;
    text-align: left;
  }

  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .channel-choice-card strong {
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0;
  }

  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .channel-choice-card span {
    font-size: 0.7rem !important;
    line-height: 1.25 !important;
    margin-top: 0 !important;
    display: block;
    overflow-wrap: anywhere;
  }
}

.pm-lab--main-page-demo [data-lab-shell-window]:has(
  [data-lab-content-panel="channel"].is-active:not([hidden]),
  [data-lab-content-panel="channel"].is-entering:not([hidden])
):not(.is-overflowing) [data-lab-shell-inner] {
  scrollbar-gutter: auto;
}

.pm-lab--main-page-demo .device-search-card .pm-lab-scroll,
.pm-lab--main-page-demo .device-search-card .pm-repairflow-scroll {
  min-width: 0;
}

.pm-lab--main-page-demo .search-results-panel.pm-lab-scroll {
  padding-right: 2px;
}

/* Shell stability parity with Full RepairFlow while the dropdown is closing */
.pm-lab--main-page-demo [data-device-search-mount][data-lab-search-state="closing"] [data-device-search-dropdown] {
  grid-template-rows: 1fr !important;
  max-height: min(58vh, 560px) !important;
  margin-top: 14px !important;
  padding: 12px 14px 14px !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: translateY(0) scaleY(1) !important;
}

.pm-lab--main-page-demo [data-device-search-mount][data-lab-search-state="closing"] .device-search-dropdown-inner,
.pm-lab--main-page-demo [data-device-search-mount][data-lab-search-state="closing"] [data-device-brand-chips],
.pm-lab--main-page-demo [data-device-search-mount][data-lab-search-state="closing"] [data-popular-devices],
.pm-lab--main-page-demo [data-device-search-mount][data-lab-search-state="closing"] [data-device-search-results],
.pm-lab--main-page-demo [data-device-search-mount][data-lab-search-state="closing"] [data-device-search-dropdown] > *,
.pm-lab--main-page-demo [data-device-search-mount][data-lab-search-state="closing"] [data-popular-devices] > *,
.pm-lab--main-page-demo [data-device-search-mount][data-lab-search-state="closing"] [data-device-search-results] > * {
  max-height: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transform: none !important;
}

body.pm-lab--main-page-demo.is-aurora-lab.is-repair-focus .repair-focus-target {
  transform: none;
}

body.pm-lab--main-page-demo.is-aurora-lab.is-repair-focus .device-search-card {
  transform: none;
  margin-top: 0;
}

.pm-lab--main-page-demo [data-lab-shell-inner].pm-lab-repairflow-panels.pm-lab-content-stage {
  display: grid;
}

/* Full RepairFlow content reveal only — no legacy translateY transitions (they caused 1-frame flicker) */
.pm-lab--main-page-demo.pm-lab--full-repairflow .pm-lab-content-stage > .repair-flow-panel.is-frf-content-reveal,
.pm-lab--main-page-demo.pm-lab--full-repairflow .pm-lab-content-stage > .repair-flow-panel.is-active,
.pm-lab--main-page-demo.pm-lab--full-repairflow .pm-lab-content-stage > .repair-flow-panel.is-entering,
.pm-lab--main-page-demo.pm-lab--full-repairflow .pm-lab-content-stage > .repair-flow-panel.is-exiting {
  transform: none !important;
}

.pm-lab--main-page-demo.pm-lab--full-repairflow .pm-lab-content-stage > .repair-flow-panel.is-frf-content-reveal.is-entering {
  transition: none !important;
}

.pm-lab--main-page-demo.pm-lab--full-repairflow .pm-lab-content-stage > .repair-flow-panel.is-frf-content-reveal.is-active {
  pointer-events: auto;
}

.pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-shell-window].is-lab-shell-measuring [data-lab-shell-inner] > .repair-flow-panel:not(.is-active):not(.is-entering):not(.is-frf-exit-held) {
  visibility: hidden;
  pointer-events: none;
}

.pm-lab--main-page-demo .repair-picker-scroll,
.pm-lab--main-page-demo .repair-offer-grid[data-repair-offers] {
  max-height: none !important;
  overflow: visible !important;
}

body.page-home.pm-lab--main-page-demo #geraetesuche .repair-flow-head > .kicker {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Repair picker: top-align — centered flex clips the first tile in overflow shells */
.pm-lab--main-page-demo [data-lab-shell-inner]:has(
  [data-lab-content-panel="repair"].is-active:not([hidden]),
  [data-lab-content-panel="repair"].is-entering:not([hidden]),
  [data-lab-content-panel="repair-overflow"].is-active:not([hidden]),
  [data-lab-content-panel="repair-overflow"].is-entering:not([hidden])
) {
  justify-content: flex-start !important;
  align-items: stretch !important;
}

.pm-lab--main-page-demo [data-lab-content-panel="repair"]:is(.is-active, .is-entering),
.pm-lab--main-page-demo [data-lab-content-panel="repair-overflow"]:is(.is-active, .is-entering) {
  justify-content: flex-start !important;
  align-items: stretch !important;
}

.pm-lab--main-page-demo [data-lab-content-panel="repair"]:is(.is-active, .is-entering) .pm-lab-shell-layout-stack,
.pm-lab--main-page-demo [data-lab-content-panel="repair"]:is(.is-active, .is-entering) .pm-lab-shell-layout-zone--content,
.pm-lab--main-page-demo [data-lab-content-panel="repair-overflow"]:is(.is-active, .is-entering) .pm-lab-shell-layout-stack,
.pm-lab--main-page-demo [data-lab-content-panel="repair-overflow"]:is(.is-active, .is-entering) .pm-lab-shell-layout-zone--content {
  justify-content: flex-start !important;
  align-items: stretch !important;
}

.pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-shell-inner].pm-lab-content-stage > .repair-flow-panel[data-lab-content-panel="repair"]:is(.is-active, .is-entering),
.pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-shell-inner].pm-lab-content-stage > .repair-flow-panel[data-lab-content-panel="repair-overflow"]:is(.is-active, .is-entering) {
  justify-content: flex-start !important;
  align-items: stretch !important;
}

.pm-lab--main-page-demo [data-lab-content-panel="repair"] .pm-lab-shell-layout-zone--content,
.pm-lab--main-page-demo [data-lab-content-panel="repair"] .repair-offer-grid[data-repair-offers],
.pm-lab--main-page-demo [data-lab-content-panel="repair"] .repair-picker-scroll,
.pm-lab--main-page-demo [data-lab-content-panel="repair"] .repair-compact-list,
.pm-lab--main-page-demo [data-lab-content-panel="repair-overflow"] .pm-lab-shell-layout-zone--content,
.pm-lab--main-page-demo [data-lab-content-panel="repair-overflow"] .repair-offer-grid[data-repair-offers],
.pm-lab--main-page-demo [data-lab-content-panel="repair-overflow"] .repair-picker-scroll,
.pm-lab--main-page-demo [data-lab-content-panel="repair-overflow"] .repair-compact-list {
  margin-top: 0;
  transform: none;
  scroll-padding-top: 0;
}

.pm-lab--main-page-demo [data-lab-content-panel="repair"] .repair-offer-grid[data-repair-offers],
.pm-lab--main-page-demo [data-lab-content-panel="repair"] .repair-picker-scroll {
  padding-top: max(6px, calc(var(--pm-lab-card-hover-safe, 14px) - 2px));
  padding-bottom: max(6px, calc(var(--pm-lab-card-hover-safe, 14px) - 2px));
  box-sizing: border-box;
}

/* Overflow shell: panel already carries the inset — no second top pad on the scroll list */
.pm-lab--main-page-demo [data-lab-content-panel="repair-overflow"]:is(.is-active, .is-entering) {
  padding-top: max(6px, calc(var(--pm-lab-card-hover-safe, 14px) - 2px)) !important;
  padding-bottom: max(6px, calc(var(--pm-lab-card-hover-safe, 14px) - 2px)) !important;
  padding-inline: var(--pm-lab-card-hover-safe, 14px) !important;
}

.pm-lab--main-page-demo [data-lab-content-panel="repair-overflow"] .repair-offer-grid[data-repair-offers],
.pm-lab--main-page-demo [data-lab-content-panel="repair-overflow"] .repair-picker-scroll {
  padding-top: 0;
  padding-bottom: 0;
}

.pm-lab--main-page-demo [data-lab-shell-inner][data-repair-flow-stage],
.pm-lab--main-page-demo [data-lab-shell-window].is-overflowing [data-repair-flow-stage],
.pm-lab--main-page-demo [data-lab-shell-inner],
.pm-lab--main-page-demo [data-lab-content-panel="repair"] .repair-picker-scroll {
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.pm-lab--main-page-demo [data-repair-flow-panel] .repair-flow-panel-scroll,
.pm-lab--main-page-demo .repair-variant-panel {
  max-height: none !important;
}

.pm-lab--main-page-demo [data-lab-shell-window] {
  margin-inline: auto;
  text-align: left;
  min-height: var(--pm-s25-search-initial-shell-height, 191px);
}

.pm-lab--main-page-demo .repair-flow-shell {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
}

.pm-lab--main-page-demo .repair-flow-toolbar {
  position: static;
  flex-shrink: 0;
  order: -1;
  align-self: flex-end;
  width: 100%;
  min-height: var(--pm-flow-toolbar-space, 2.25rem);
  pointer-events: auto;
  z-index: 2;
  margin: 0;
  padding: 2px 2px 0;
}

.pm-lab--main-page-demo [data-repair-flow-stage] {
  height: auto !important;
  min-height: 0;
  transition: none !important;
}

.pm-lab--main-page-demo [data-lab-shell-window]:not(.is-overflowing) [data-repair-flow-stage] {
  max-height: none !important;
  overflow: visible;
}

.pm-lab--main-page-demo [data-lab-shell-window].is-overflowing [data-repair-flow-stage] {
  overflow-y: auto;
}

.pm-lab--main-page-demo [data-repair-flow-stage].is-fluid-locked {
  height: auto !important;
}

.pm-lab--main-page-demo .pm-lab-flow-subtitle {
  text-align: center;
}

.pm-lab--main-page-demo .repair-flow-heading-wrap.is-heading-animating,
.pm-lab--main-page-demo .repair-flow-heading-wrap.is-heading-liquid {
  min-height: unset !important;
}

.pm-lab--main-page-demo [data-lab-shell-inner].pm-lab-scroll {
  padding-right: 2px;
  flex: 1 1 auto;
  min-height: 0;
}

.pm-lab--main-page-demo [data-lab-shell-window].is-overflowing [data-lab-shell-inner] {
  scrollbar-gutter: stable;
}

/* Lab-only deviceMode fallback (iframe width usually drives media queries) */
body.pm-lab--main-page-demo.pm-lab-device-mobile .hero-bento--desktop,
body.pm-lab--main-page-demo.pm-lab-device-small-mobile .hero-bento--desktop {
  display: none !important;
}

body.pm-lab--main-page-demo.pm-lab-device-mobile .hero-bento--mobile,
body.pm-lab--main-page-demo.pm-lab-device-small-mobile .hero-bento--mobile {
  display: grid !important;
}

body.pm-lab--main-page-demo.pm-lab-device-desktop .hero-bento--mobile {
  display: none !important;
}

body.pm-lab--main-page-demo.pm-lab-device-desktop .hero-bento--desktop {
  display: grid !important;
}

body.pm-lab--main-page-demo.pm-lab-device-tablet .device-search-section.pm-repairflow-mount,
body.pm-lab--main-page-demo.pm-lab-device-ipad .device-search-section.pm-repairflow-mount {
  padding-block: 80px;
}

body.pm-lab--main-page-demo.pm-lab-device-mobile .device-search-section.pm-repairflow-mount,
body.pm-lab--main-page-demo.pm-lab-device-large-mobile .device-search-section.pm-repairflow-mount,
body.pm-lab--main-page-demo.pm-lab-device-small-mobile .device-search-section.pm-repairflow-mount {
  padding-block: 56px;
}

body.pm-lab--main-page-demo.pm-lab-device-mobile .device-search-section.pm-repairflow-mount > .container,
body.pm-lab--main-page-demo.pm-lab-device-large-mobile .device-search-section.pm-repairflow-mount > .container,
body.pm-lab--main-page-demo.pm-lab-device-small-mobile .device-search-section.pm-repairflow-mount > .container {
  width: min(100% - 24px, 640px);
  padding-inline: 0;
}

/* --- Responsive: Mobile/Tablet only (desktop base rules above stay unchanged) --- */

.pm-lab--main-page-demo {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

@media (max-width: 1024px) {
  .pm-lab--main-page-demo .device-search-section.pm-repairflow-mount > .container {
    max-width: min(100% - 32px, 960px);
  }

  .pm-lab--main-page-demo [data-lab-shell-window] {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .pm-lab--main-page-demo main .container {
    width: min(100% - 24px, 100%);
    max-width: 100%;
    box-sizing: border-box;
  }

  .pm-lab--main-page-demo .service-grid,
  .pm-lab--main-page-demo .why-grid,
  .pm-lab--main-page-demo .location-grid,
  .pm-lab--main-page-demo .review-grid,
  .pm-lab--main-page-demo .hero-grid {
    min-width: 0;
  }

  .pm-lab--main-page-demo .service-card,
  .pm-lab--main-page-demo .bento-card,
  .pm-lab--main-page-demo .location-card,
  .pm-lab--main-page-demo .review-card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  .pm-lab--main-page-demo .hero-actions,
  .pm-lab--main-page-demo .section-cta-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .pm-lab--main-page-demo .hero-actions .button,
  .pm-lab--main-page-demo .section-cta-row .button {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }

  .pm-lab--main-page-demo #geraetesuche {
    scroll-margin-top: max(72px, env(safe-area-inset-top, 0px) + 56px);
  }

  .pm-lab--main-page-demo .device-search-section.pm-repairflow-mount {
    padding-block: clamp(48px, 10vw, 72px);
  }

  .pm-lab--main-page-demo .device-search-section.pm-repairflow-mount > .container {
    width: min(100% - 20px, 100%);
    padding-inline: 0;
  }

  .pm-lab--main-page-demo [data-lab-shell-window] {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  .pm-lab--main-page-demo [data-device-search-mount] .brand-chip-row,
  .pm-lab--main-page-demo [data-device-search-mount] [data-popular-devices] {
    max-width: 100%;
    min-width: 0;
  }

  .pm-lab--main-page-demo [data-lab-shell-window] {
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .pm-lab--main-page-demo [data-lab-shell-window].is-lab-search-shell-animating,
  .pm-lab--main-page-demo [data-lab-shell-window].is-lab-search-transitioning {
    will-change: height;
  }

  /* Mobile browse: horizontal scroll inside shell, no clipped chips/devices */
  .pm-lab--main-page-demo [data-device-search-mount] .device-search-dropdown-inner {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .pm-lab--main-page-demo [data-device-search-mount] .brand-chip-nav {
    display: none !important;
  }

  .pm-lab--main-page-demo [data-device-search-mount] .brand-chip-row,
  .pm-lab--main-page-demo [data-device-search-mount] [data-device-brand-chips] {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .pm-lab--main-page-demo [data-device-search-mount] .brand-chip-row::-webkit-scrollbar,
  .pm-lab--main-page-demo [data-device-search-mount] [data-device-brand-chips]::-webkit-scrollbar {
    display: none;
  }

  .pm-lab--main-page-demo [data-device-search-mount] .brand-chip,
  .pm-lab--main-page-demo [data-device-search-mount] .popular-device-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .pm-lab--main-page-demo [data-device-search-mount] .popular-devices-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .pm-lab--main-page-demo [data-device-search-mount] .popular-devices-row::-webkit-scrollbar {
    display: none;
  }

  /* Mobile shell containment: repair list must stay inside shell inner scroll */
  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-shell-window]:has(
    [data-lab-content-panel="repair"].is-active:not([hidden]),
    [data-lab-content-panel="repair"].is-entering:not([hidden]),
    [data-lab-content-panel="repair-overflow"].is-active:not([hidden])
  ) {
    overflow: hidden !important;
  }

  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-shell-window]:has(
    [data-lab-content-panel="repair"].is-active:not([hidden]),
    [data-lab-content-panel="repair"].is-entering:not([hidden]),
    [data-lab-content-panel="repair-overflow"].is-active:not([hidden])
  ) [data-lab-shell-inner] {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-content-panel="repair"]:is(.is-active, .is-entering),
  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-content-panel="repair-overflow"]:is(.is-active, .is-entering) {
    overflow: hidden !important;
    max-height: 100%;
    min-height: 0;
    width: 100%;
    transform: none !important;
  }

  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-content-panel="repair"] .repair-offer-grid[data-repair-offers],
  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-content-panel="repair"] .repair-picker-scroll,
  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-content-panel="repair"] .repair-compact-list,
  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-content-panel="repair-overflow"] .repair-offer-grid[data-repair-offers] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transform: none !important;
    box-sizing: border-box;
  }

  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-shell-window]:has(
    [data-device-search-mount].is-search-expanded,
    [data-device-search-mount][data-search-open="true"]
  ) {
    overflow: hidden !important;
  }

  .pm-lab--main-page-demo.pm-lab--full-repairflow [data-lab-shell-window]:has(
    [data-device-search-mount].is-search-expanded,
    [data-device-search-mount][data-search-open="true"]
  ) [data-lab-shell-inner] {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.pm-lab--main-page-demo.is-repair-focus #geraetesuche .repair-flow-head {
    margin-bottom: 12px;
  }
}

@media (max-width: 480px) {
  .pm-lab--main-page-demo main .container {
    width: min(100% - 16px, 100%);
  }

  .pm-lab--main-page-demo .device-search-section.pm-repairflow-mount {
    padding-block: 44px;
  }

  .pm-lab--main-page-demo .device-search-section.pm-repairflow-mount > .container {
    width: min(100% - 12px, 100%);
  }

  .pm-lab--main-page-demo .hero-copy h1,
  .pm-lab--main-page-demo .section-head h2 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .pm-lab--main-page-demo [data-lab-shell-inner].pm-lab-scroll {
    padding-right: 0;
  }

  .pm-lab--main-page-demo .search-results-panel.pm-lab-scroll {
    padding-right: 0;
  }
}

/* Desktop homepage — center RepairFlow start block, remove „Reparatur starten“ kicker */
@media (min-width: 1181px) {
  body.page-home.pm-lab--main-page-demo #geraetesuche.device-search-section.pm-repairflow-mount {
    min-height: 100dvh;
    padding-block: clamp(56px, 8vh, 96px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    box-sizing: border-box;
  }

  body.page-home.pm-lab--main-page-demo #geraetesuche > .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-inline: auto;
  }

  body.page-home.pm-lab--main-page-demo #geraetesuche .repair-flow-head {
    margin-bottom: clamp(14px, 2vh, 24px);
  }

  body.page-home.pm-lab--main-page-demo #geraetesuche .device-search-card {
    width: 100%;
    margin-inline: auto;
  }
}

/* Tablet: 768px–1180px — own layout band between mobile and desktop */
@media (min-width: 768px) and (max-width: 1180px) {
  body.page-home.pm-lab--main-page-demo,
  html:has(body.page-home.pm-lab--main-page-demo) {
    overflow-x: hidden;
  }

  .pm-lab--main-page-demo .device-search-section.pm-repairflow-mount {
    min-height: auto;
    padding-block: clamp(56px, 8vh, 88px);
  }

  body.page-home.pm-lab--main-page-demo #geraetesuche > .container,
  .pm-lab--main-page-demo .device-search-section.pm-repairflow-mount > .container {
    width: min(100% - 40px, 920px);
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
  }

  .pm-lab--main-page-demo [data-lab-shell-window] {
    width: 100%;
    max-width: min(100%, 880px);
    margin-inline: auto;
  }

  .pm-lab--main-page-demo [data-device-search-mount] .brand-chip-row,
  .pm-lab--main-page-demo [data-device-search-mount] [data-popular-devices],
  .pm-lab--main-page-demo [data-device-search-mount] [data-device-search-dropdown] {
    max-width: 100%;
    min-width: 0;
  }

  .pm-lab--main-page-demo [data-lab-content-panel="repair"] .repair-offer-grid[data-repair-offers] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .pm-lab--main-page-demo [data-lab-content-panel="channel"]:is(.is-active, .is-entering) .channel-choice-grid {
    max-width: min(100%, 640px);
    margin-inline: auto;
  }

  body.pm-lab--main-page-demo.pm-lab-device-tablet .device-search-section.pm-repairflow-mount,
  body.pm-lab--main-page-demo.pm-lab-device-ipad .device-search-section.pm-repairflow-mount,
  body.pm-lab--main-page-demo.pm-tablet-preview .device-search-section.pm-repairflow-mount {
    padding-block: clamp(56px, 8vh, 88px);
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .pm-lab--main-page-demo [data-lab-content-panel="repair"] .repair-offer-grid[data-repair-offers] {
    grid-template-columns: 1fr;
  }
}