/* Inline styles extracted from deckt.njk */
#s-deckt .gp-section__inner {
  --gp-section-pt: 0px;
  --gp-section-pb: 210px;
}

#s-deckt .gp-stackable-image__main {
  --gp-si-width: 600px;
  --gp-si-height: 300px;
}

#s-deckt .gp-stackable-image__overlay {
  --gp-si-width: 300px;
  --gp-si-height: 350px;
}

#s-deckt .gp-deckt-flex-item-container .gp-max-width-container {
  --gp-max-width: 250px;
}



#s-deckt .gp-deckt-flex-item-container .gp-spacer {
  --gp-height: 30px;
}

/* Section-specific styles extracted from style.css */
@media (max-width: 999px) {
  .gp-section-deckt-main .gp-section__inner {
    --gp-section-pb: 120px !important;
  }
}

@media (max-width: 767px) {
  .gp-section-deckt-main .gp-section__inner {
    --gp-section-pb: 50px !important;
  }
}

@media (min-width: 1024px) {
  .gp-section-deckt-main .gp-deckt-flex-container {
    margin-top: -50px;
  }
}

@media (max-width: 999px) {
  .gp-section-deckt-main .gp-deckt-flex-container {
    margin-top: -28px;
    flex-direction: column;
  }
}

@media (max-width: 999px) {
  .gp-section-deckt-main .gp-deckt-flex-container .gp-stackable-image {
    flex-direction: column;
  }
}

.gp-section-deckt-main .gp-deckt-flex-container .gp-stackable-image__main {
  left: -150px;
  position: relative;
  z-index: 1;
}

@media (max-width: 999px) {
  .gp-section-deckt-main .gp-deckt-flex-container .gp-stackable-image__main {
    --gp-si-width: 100% !important;
    --gp-si-height: 300px !important;
    left: 0;
    margin-inline: calc(var(--gp-container-side-gutter) * -1);
    margin-top: -3%;
  }
}

@media (max-width: 767px) {
  .gp-section-deckt-main .gp-deckt-flex-container .gp-stackable-image__main {
    --gp-si-height: 180px !important;
    margin-top: 0%;
  }
}

.gp-section-deckt-main .gp-deckt-flex-container .gp-stackable-image__main > img {
  -o-object-position: bottom center;
     object-position: bottom center;
}

.gp-section-deckt-main .gp-deckt-flex-container .gp-stackable-image__overlay {
  position: absolute;
  right: 30px;
  top: 35%;
  z-index: 2;
}

@media (max-width: 999px) {
  .gp-section-deckt-main .gp-deckt-flex-container .gp-stackable-image__overlay {
    --gp-si-width: 41vw !important;
    --gp-si-height: 48vw !important;
    right: auto;
    top: 60%;
  }
}

@media (max-width: 767px) {
  .gp-section-deckt-main .gp-deckt-flex-container .gp-stackable-image__overlay {
    --gp-si-width: 41vw !important;
    --gp-si-height: 56vw !important;
  }
}

.gp-section-deckt-main .gp-deckt-flex-container .gp-stackable-image__overlay > img {
  -o-object-position: 45% center;
     object-position: 45% center;
}

@media (max-width: 999px) {
  .gp-section-deckt-main .gp-deckt-flex-container .gp-deckt-flex-item-container > .gp-max-width-container {
    --gp-max-width: 320px !important;
  }
  .gp-section-deckt-main .gp-deckt-flex-container .gp-deckt-flex-item-container > .gp-max-width-container.-left {
    margin-right: unset;
    margin-left: auto;
    position: relative;
    z-index: 2;
  }
  .gp-section-deckt-main .gp-deckt-flex-container .gp-deckt-flex-item-container > .gp-max-width-container .gp-heading {
    font-size: 3.6vmax;
  }
  .gp-section-deckt-main .gp-deckt-flex-container .gp-deckt-flex-item-container > .gp-max-width-container .gp-paragraph {
    font-size: 1.7vmax;
  }
}

@media (max-width: 767px) {
  .gp-section-deckt-main .gp-deckt-flex-container .gp-deckt-flex-item-container > .gp-max-width-container {
    --gp-max-width: 45vw !important;
  }
}

/* Phones up to 440px */
@media (max-width: 440px) {
  .gp-section-deckt-main .gp-deckt-flex-container .gp-deckt-flex-item-container > .gp-max-width-container .gp-heading {
    font-size: 3vmax;
  }
}

/* Narrow tall phones */
@media (max-width: 360px) and (min-height: 780px) {
  .gp-section-deckt-main .gp-deckt-flex-container .gp-deckt-flex-item-container > .gp-max-width-container .gp-heading {
    font-size: 2.5vmax;
  }
}

.gp-section-deckt-main .gp-section-deckt__svg-underlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
  left: 0;
  pointer-events: none;
  overflow: hidden;
}

.gp-section-deckt-main .gp-section-deckt__svg-underlay svg {
  height: auto;
  width: 100%;
  transform: translate(40px, 52px) scale(1.1);
}

@media (min-width: 768px) and (max-width: 999px) {
  .gp-section-deckt-main .gp-section-deckt__svg-underlay svg {
    transform: translate(80px, 150px) scale(1.1);
  }
}

/* ===== Mobile: roof-tile image starts just below DECKT (small overlap) =====
   Design intent (mobile-design-screenshots/deckt.png): the roof image's top
   edge sits just at/under DECKT's visible bottom (just a hair of overlap).

   ─── TUNE THIS to dial the overlap ──────────────────────────────────────
   --gp-deckt-image-overlap controls how far the roof image top sits ABOVE
   the visible bottom of DECKT (i.e. how much they overlap vertically).
     positive value (e.g. 12px) → more overlap (image creeps further up)
     0                          → image top exactly at DECKT's bottom
     negative value             → gap (image starts below DECKT bottom)
   Scoped to mobile only (max-width: 999px); desktop is untouched.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  .gp-section.gp-section-deckt-main {
    --gp-deckt-image-overlap: -20px;     /* ← tweak me */
    overflow: hidden;
  }
  .gp-section.gp-section-deckt-main .gp-section__inner {
    justify-content: flex-start;
  }
  .gp-section.gp-section-deckt-main .gp-deckt-flex-container {
    margin-top: 0;
  }
  .gp-section.gp-section-deckt-main .gp-stackable-image__main {
    margin-top: 0;
  }
  #s-deckt .gp-section__inner {
    --gp-section-pt: calc(var(--gp-branding-font-size) * 1.83 - 4.5rem - var(--gp-deckt-image-overlap)) !important;
  }
}

/* Desktop: in the screendesign the copy column sits beside the DECKT letters
   rather than below the photos, so it is lifted out of the flex row's flow.
   The photo boxes also change shape (the roof photo is shallower and bleeds
   further off the left edge; the inset photo is smaller).
   Kept last in the file so it wins over the equally-specific base rules. */
@media (min-width: 1000px) {
  #s-deckt .gp-section__inner {
    --gp-section-pb: 40px;
  }
  /* .gp-section__inner centres its children, which pushed the DECKT wordmark
     123px down once this section's content became shorter than the viewport.
     Pin it to the top so the wordmark sits directly under the floating G. */
  #s-deckt .gp-section__inner {
    justify-content: flex-start;
  }
  .gp-section-deckt-main .gp-deckt-flex-container {
    margin-top: -42px;
  }
  #s-deckt .gp-deckt-flex-item-container .gp-max-width-container {
    --gp-max-width: 398px;
  }
  #s-deckt .gp-deckt-flex-item-container.-for-content {
    margin-top: -251px;
  }
  #s-deckt .gp-stackable-image__main {
    --gp-si-height: min(287px, 31.9vh);
  }
  .gp-section-deckt-main .gp-deckt-flex-container .gp-stackable-image__main {
    left: -253px;
  }
  #s-deckt .gp-stackable-image__overlay {
    --gp-si-width: min(275px, 30.6vh);
    --gp-si-height: min(326px, 36.2vh);
  }
  .gp-section-deckt-main .gp-deckt-flex-container .gp-stackable-image__overlay {
    right: auto;
    left: 347px;
    top: 76px;
  }
}

/* ===== Mobile: run the copy full width =====
   The 45vw column was sized for the old placeholder text. With the shipped
   heading it broke "Abdichtungstechnik" mid-word and the five bullets spilled
   into the next section, so the copy now runs the full content width beneath
   the photos and the inset photo overlaps only the roof image. */
@media (max-width: 767px) {
  .gp-section-deckt-main .gp-deckt-flex-container .gp-deckt-flex-item-container > .gp-max-width-container {
    --gp-max-width: 100% !important;
  }
  .gp-section-deckt-main .gp-deckt-flex-container .gp-deckt-flex-item-container > .gp-max-width-container .gp-heading {
    font-size: 20px;
  }
  .gp-section-deckt-main .gp-deckt-flex-container .gp-deckt-flex-item-container > .gp-max-width-container .gp-paragraph {
    font-size: 13px;
    line-height: 1.45;
  }
  .gp-section.gp-section-deckt-main .gp-stackable-image__main {
    --gp-si-height: 150px !important;
  }
  .gp-section-deckt-main .gp-deckt-flex-container .gp-stackable-image__overlay {
    --gp-si-width: 33vw !important;
    --gp-si-height: 26vw !important;
    left: 0;
    right: auto;
    top: 34px;
  }
  #s-deckt .gp-deckt-flex-item-container .gp-spacer {
    --gp-height: 14px;
  }
  #s-deckt .gp-bullet-list {
    font-size: 12.5px;
    margin-top: 16px;
  }
  #s-deckt .gp-bullet-list__item + .gp-bullet-list__item {
    margin-top: 7px;
  }
}

/* Short phones (SE-class, <=640px tall). */
@media (max-width: 767px) and (max-height: 640px) {
  .gp-section.gp-section-deckt-main .gp-stackable-image__main {
    --gp-si-height: 96px !important;
  }
  .gp-section-deckt-main .gp-deckt-flex-container .gp-stackable-image__overlay {
    --gp-si-width: 26vw !important;
    --gp-si-height: 20vw !important;
  }
  .gp-section-deckt-main .gp-deckt-flex-container .gp-deckt-flex-item-container > .gp-max-width-container .gp-heading {
    font-size: 15px;
  }
  .gp-section-deckt-main .gp-deckt-flex-container .gp-deckt-flex-item-container > .gp-max-width-container .gp-paragraph {
    font-size: 10.5px;
    line-height: 1.4;
  }
  #s-deckt .gp-deckt-flex-item-container .gp-spacer {
    --gp-height: 8px;
  }
  #s-deckt .gp-bullet-list {
    font-size: 10px;
    margin-top: 10px;
  }
  #s-deckt .gp-bullet-list__item + .gp-bullet-list__item {
    margin-top: 4px;
  }
}

/* ===== Tablet (768-999px) =====
   A 320px copy column broke "Abdichtungstechnik" mid-word and pushed the
   bullets past the fold; run the copy full width beneath the photos here too. */
@media (min-width: 768px) and (max-width: 999px) {
  .gp-section-deckt-main .gp-deckt-flex-container .gp-deckt-flex-item-container > .gp-max-width-container {
    --gp-max-width: 100% !important;
  }
  .gp-section-deckt-main .gp-deckt-flex-container .gp-deckt-flex-item-container > .gp-max-width-container .gp-heading {
    font-size: 26px;
  }
  .gp-section-deckt-main .gp-deckt-flex-container .gp-deckt-flex-item-container > .gp-max-width-container .gp-paragraph {
    font-size: 15px;
    line-height: 1.45;
  }
  .gp-section.gp-section-deckt-main .gp-stackable-image__main {
    --gp-si-height: 200px !important;
  }
  .gp-section-deckt-main .gp-deckt-flex-container .gp-stackable-image__overlay {
    --gp-si-width: 26vw !important;
    --gp-si-height: 20vw !important;
    left: 0;
    right: auto;
    top: 40px;
  }
  #s-deckt .gp-deckt-flex-item-container .gp-spacer {
    --gp-height: 18px;
  }
  #s-deckt .gp-bullet-list {
    font-size: 14px;
    margin-top: 18px;
  }
  #s-deckt .gp-bullet-list__item + .gp-bullet-list__item {
    margin-top: 8px;
  }
}