/* Display NONE bis der Konfigurator fertig ist ---- */

.leistung-card-link {
    display: inline-flex;
}



/* .leistung-card-link {
    display: none;
}
/*

/* ============================================================
   JACOBI – J11v & Z5 | NUR DIE ZIEGEL-CARD
   ============================================================ */

#leistungCard:has(.pw-ziegel) {
  box-sizing: border-box;
  width: calc(100vw - 48px) !important;
  max-width: calc(100vw - 48px) !important;
  left: 50% !important;
  top: calc(50dvh + 60px) !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  max-height: calc(100dvh - 144px) !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(224,32,38,.45) transparent;
}

.pw-ziegel, .pw-ziegel * { box-sizing: border-box; }
.pw-ziegel {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #fafafa;
  color: #252322;
  font-family: inherit;
}
.pw-ziegel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 24px;
  background: #fff;
  border-bottom: 1px solid #ece8e5;
}
.pw-ziegel-toplabel {
  color: #8a8581;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  white-space: nowrap;
}
.pw-ziegel-toplabel span { color: #e02026; padding: 0 5px; }
.pw-ziegel-models {
  display: flex;
  align-items: stretch;
  gap: 5px;
  padding: 4px;
  border: 1px solid #e8e4e1;
  border-radius: 10px;
  background: #f5f3f1;
}
.pw-ziegel-model {
  position: relative;
  min-width: 138px;
  padding: 9px 20px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #686362;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.pw-ziegel-model span { display: block; font-size: 17px; font-weight: 850; line-height: 1.2; }
.pw-ziegel-model small { display: block; margin-top: 3px; font-size: 10px; font-weight: 600; }
.pw-ziegel-model:hover { background: #ece7e4; color: #2e2a28; }
.pw-ziegel-model.is-active {
  background: #2b2827;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.13);
}
.pw-ziegel-model.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: #e02026;
}
.pw-ziegel-model-count { color: #514b47;; font-size: 11px; font-weight: 700; white-space: nowrap; }

.pw-ziegel-main {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
}
.pw-ziegel-viewer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 410px;
  padding: 20px 20px 14px;
  background: #f0efec;
}
.pw-ziegel-viewer-kicker, .pw-ziegel-image-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #86817c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.pw-ziegel-viewer-index { color: #5f5956; }
.pw-ziegel-stage {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  flex: 1;
  min-height: 340px;
  width: 100%;
}
.pw-ziegel-photo {
  position: relative;
  min-width: 0;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pw-ziegel-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none !important;
  user-select: none;
  pointer-events: none;
  opacity: 1;
  transition: opacity .22s ease;
}
.pw-ziegel-image.is-changing { opacity: .15; }
.pw-ziegel-arrow {
  width: 40px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #302b29;
  font-family: Arial, sans-serif;
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.pw-ziegel-arrow:hover { background: rgba(0,0,0,.055); color: #e02026; transform: scale(1.08); }
.pw-ziegel-image-foot { letter-spacing: .06em; }
.pw-ziegel-image-foot > span:last-child { font-size: 9px; }

.pw-ziegel-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 25px 34px 22px;
  background: #fafafa;
}
.pw-ziegel-overline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  color: #89837f;
}
.pw-ziegel-overline-dot { width: 6px; height: 6px; border-radius: 50%; background: #e02026; }
.pw-ziegel-title-row { display: flex; align-items: baseline; gap: 15px; margin: 7px 0 7px; flex-wrap: wrap; }
.pw-ziegel-title-row h3.pw-ziegel-title { margin: 0; color: #191715; font-size: 36px; line-height: 1.08; font-weight: 850; letter-spacing: -.045em; }
.pw-ziegel-kind { font-size: 13px; color: #77716d; }
#leistungCard .pw-ziegel .pw-ziegel-description {
  font-size: 12px;
  line-height: 1.5;
  color: #79736e;
  margin: 0 0 18px;
}
.pw-ziegel-color-heading { display: flex; flex-direction: column; gap: 4px; margin-bottom: 13px; }
.pw-ziegel-color-heading > span { color: #8e8884; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.pw-ziegel-current { color: #24211f; font-size: 19px; font-weight: 800; line-height: 1.2; }
.pw-ziegel-colors { display: flex; flex-direction: column; gap: 12px; }
.pw-ziegel-color-group > h4 { margin: 0 0 9px; color: #514b47; font-size: 11px; font-weight: 750; }
.pw-ziegel-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pw-ziegel-swatch {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 3px;
  background: linear-gradient(105deg, rgba(0,0,0,.20),rgba(255,255,255,.12) 55%,rgba(0,0,0,.12)), var(--swatch);
  background-clip: padding-box;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pw-ziegel-swatch:hover { transform: translateY(-3px); box-shadow: 0 5px 13px rgba(0,0,0,.2); }
.pw-ziegel-swatch.is-active { outline: 1px solid #272321; outline-offset: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.pw-ziegel-swatch:focus-visible, .pw-ziegel-model:focus-visible,
.pw-ziegel-arrow:focus-visible, .pw-ziegel-product-link:focus-visible {
  outline: 2px solid #e02026; outline-offset: 3px;
}
.pw-ziegel-selection-note { margin: 15px 0 16px; color: #928c87; font-size: 10px; line-height: 1.55; }
.pw-ziegel-product-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding: 13px 18px;
  border: 1px solid #292525;
  border-radius: 999px;
  background: #292525;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.pw-ziegel-product-link:hover { background: #b51b21; border-color: #b51b21; box-shadow: 0 8px 24px rgba(181,27,33,.18); }
.pw-ziegel-product-link > span { font-size: 18px; font-weight: 400; }

.pw-ziegel-specs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 18px 16px;
  border-top: 1px solid #e9e5e1;
  background: #fff;
}
.pw-ziegel-spec {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  min-width: 0;
  text-align: center;
  color: #33302d;
}
.pw-ziegel-spec-mark { color: #c40a10; font-size: 18px; font-weight: 600; line-height: 1.3; }

.pw-ziegel-spec strong {
  color: #514b47;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.pw-ziegel-spec > span:last-child {
  color: #25211f;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.4;
}

.pw-ziegel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 24px;
  background: #f9f8f7;
  border-top: 1px solid #ece8e5;
}
.pw-ziegel-logo-link { display: inline-flex; flex: 0 0 auto; align-items: center; }
.pw-ziegel-logo-link img { width: 120px; height: auto; display: block; }
.pw-ziegel-footer > span { color: #918a85; font-size: 10px; line-height: 1.4; text-align: center; }
.pw-ziegel-footer-link { color: #5c5550; font-size: 11px; font-weight: 800; white-space: nowrap; text-decoration: none; }
.pw-ziegel-footer-link:hover { color: #e02026; }

@media (max-width: 900px) {
  .pw-ziegel-topbar { flex-wrap: wrap; justify-content: center; }
  .pw-ziegel-main { grid-template-columns: 1fr; }
  .pw-ziegel-viewer { min-height: 315px; }
  .pw-ziegel-stage { min-height: 270px; }
  .pw-ziegel-photo { height: 270px; }
  .pw-ziegel-details { padding: 22px 24px; }
  .pw-ziegel-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px 8px; }
}
@media (max-width: 530px) {
  .pw-ziegel-topbar { padding: 12px; gap: 10px; }
  .pw-ziegel-toplabel { width: 100%; text-align: center; }
  .pw-ziegel-model { min-width: 126px; padding: 8px 13px; }
  .pw-ziegel-model-count { width: 100%; text-align: center; }
  .pw-ziegel-viewer { padding: 14px 12px; min-height: 260px; }
  .pw-ziegel-stage { min-height: 225px; grid-template-columns: 30px minmax(0, 1fr) 30px; }
  .pw-ziegel-photo { height: 225px; }
  .pw-ziegel-arrow { width: 30px; }
  .pw-ziegel-image-foot > span:last-child { display: none; }
  .pw-ziegel-details { padding: 22px 17px; }
  .pw-ziegel-title-row h3.pw-ziegel-title { font-size: 31px; }
  .pw-ziegel-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-ziegel-footer { flex-wrap: wrap; justify-content: center; padding: 12px; gap: 8px 16px; }
  .pw-ziegel-footer > span { flex-basis: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .pw-ziegel * { transition: none !important; }
}


.leistung-card p {
    margin: 0 0 30px;
}

/* =====================================================
   GAUBEN – INTERAKTIVES MATCH-SPIEL
   ===================================================== */


/* NUR DAS GAUBEN-WINDOW VERBREITERN */

#leistungCard:has(.pw-gauben) {

  box-sizing: border-box;

  width: calc(100vw - 48px);
  max-width: calc(100vw - 28px) !important;

  height: auto !important;
  max-height: calc(100dvh - 150px) !important;

  overflow: clip;

}


/* INHALT NUR BEI PLATZMANGEL SCROLLEN */

#leistungCard:has(.pw-gauben) .leistung-card-content {

  box-sizing: border-box;

  max-height: calc(100dvh - 190px);

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior: contain;

  scrollbar-width: thin;
  scrollbar-color: rgba(224,32,38,.4) transparent;

}


/* SPIELBEREICH */

.pw-gauben,
.pw-gauben * {
  box-sizing: border-box;
}

.pw-gauben {
  width: 100%;
  color: #fff;
}


/* =========================================
   SPIELKOPF
   ========================================= */

.pw-gauben-top {

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;

  margin: 20px 0 18px;

}

.pw-gauben-instruction {

  color: rgba(255,255,255,.75);

  font-size: 13px;
  line-height: 1.5;

}


/* FORTSCHRITTSANZEIGE */

.pw-gauben-progress {

  display: flex;
  flex-direction: column;

  flex: 0 0 110px;

  gap: 7px;

  text-align: right;

}

.pw-gauben-count {

  color: white;

  font-size: 14px;
  font-weight: 700;

}

.pw-gauben-progress-track {

  height: 3px;

  border-radius: 99px;

  overflow: hidden;

  background: rgba(255,255,255,.18);

}

.pw-gauben-progress-fill {

  display: block;

  width: 0;
  height: 100%;

  background: #e02026;

  transition: width .35s ease;

}


/* =========================================
   BILDERRASTER
   ========================================= */

.pw-gauben-board {

  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 10px;

}


/* EINZELNE BILDKACHEL */

.pw-gauben-tile {

  flex: 0 0 calc((100% - 40px) / 5);

  min-width: 0;

  padding: 5px;

  border: 1px solid rgba(255,255,255,.25);
  border-radius: 9px;

  background: rgba(0,0,0,.23);

  cursor: pointer;

  outline: none;

  transition:
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;

}


/* HOVER */

.pw-gauben-tile:hover,
.pw-gauben-tile:focus-visible {

  border-color: rgba(255,255,255,.75);

}


/* DRAG-ZIEL */

.pw-gauben-tile.is-target {

  border-color: #e02026;

  box-shadow:
    0 0 0 2px rgba(224,32,38,.25);

}


/* RICHTIGE ANTWORT */

.pw-gauben-tile.is-correct {

  border-color: rgba(95,210,135,.85);

  background: rgba(45,120,70,.18);

  cursor: default;

}


/* FALSCHE ANTWORT */

.pw-gauben-tile.is-wrong {

  border-color: #e02026;

  box-shadow:
    0 0 0 2px rgba(224,32,38,.22);

  animation: pw-gauben-wrong .3s ease;

}

@keyframes pw-gauben-wrong {

  25% {
    transform: translateX(-3px);
  }

  75% {
    transform: translateX(3px);
  }

}


/* =========================================
   GAUBENBILDER
   ========================================= */

/*
   Die Originalbilder enthalten unten
   bereits ihre Bezeichnung.

   Diese wird hier nur im Spiel abgeschnitten.
   Die Original-PNGs bleiben unverändert.
*/

.pw-gauben-photo {

  width: 100%;

  aspect-ratio: 460 / 278;

  overflow: hidden;

  border-radius: 5px;

  background: #f3f2ef;

}

.pw-gauben-photo img {

  display: block;

  width: 100%;
  height: auto;

  max-width: none;

  user-select: none;
  pointer-events: none;

}


/* =========================================
   ABLEGEFLÄCHE UNTER DEM BILD
   ========================================= */

.pw-gauben-slot {

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;

  margin-top: 5px;
  padding: 5px;

  border: 1px dashed rgba(255,255,255,.35);
  border-radius: 5px;

  color: rgba(255,255,255,.55);

  font-size: 10px;
  line-height: 1.3;

  text-align: center;

}

.pw-gauben-tile.is-correct .pw-gauben-slot {

  border-color: transparent;

  background: rgba(65,170,100,.16);

}


/* =========================================
   NAMENSLEISTE
   ========================================= */

.pw-gauben-bank-header {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    padding-top: 20px;
    gap: 15px;
    margin: 20px 0 12px;
    align-content: center;
}

.pw-gauben-bank-header strong {

  color: white;

  font-size: 13px;
  font-weight: 700;

}


/* NEU MISCHEN */

.pw-gauben-reset {

  padding: 5px 0;

  border: none;

  background: transparent;

  color: rgba(255,255,255,.7);

  font-family: inherit;
  font-size: 12px;

  cursor: pointer;

  transition: color .25s ease;

}

.pw-gauben-reset:hover {

  color: #fff;

}


/* NAMENSBANK */

.pw-gauben-bank {

  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 8px;

  min-height: 42px;

}


/* ZIEHBARE NAMEN */

.pw-gauben-name {

  padding: 9px 13px;

  border: 1px solid rgba(255,255,255,.35);
  border-radius: 7px;

  background: rgba(255,255,255,.12);

  color: white;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  white-space: nowrap;

  cursor: grab;

  user-select: none;
  touch-action: none;

  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;

}


/* NAMEN-HOVER */

.pw-gauben-name:hover {

  border-color: rgba(255,255,255,.85);

  background: rgba(255,255,255,.20);

}


/* AUSGEWÄHLTER NAME */

.pw-gauben-name.is-selected,
.pw-gauben-name.is-dragging {

  border-color: #e02026;

  background: rgba(224,32,38,.25);

  box-shadow:
    0 0 0 2px rgba(224,32,38,.15);

}


/* RICHTIG ABGELEGTER NAME */

.pw-gauben-name.is-placed {

  padding: 4px 6px;

  border: none;

  background: transparent;

  color: #bcefc9;

  font-size: 11px;

  cursor: default;

  white-space: normal;

}


/* NAME WÄHREND DES ZIEHENS */

.pw-gauben-drag-ghost {

  position: fixed !important;

  z-index: 999999;

  width: max-content;
  max-width: 220px;

  margin: 0 !important;

  transform: translate(-50%, -50%);

  pointer-events: none;

  opacity: .95;

  box-shadow:
    0 12px 28px rgba(0,0,0,.45) !important;

}


/* =========================================
   SPIELRÜCKMELDUNG
   ========================================= */

.pw-gauben-feedback {

  min-height: 20px;

  margin-top: 15px;

  color: rgba(255,255,255,.7);

  font-size: 12px;

  text-align: center;

}

.pw-gauben.is-complete .pw-gauben-feedback {

  color: #bcefc9;

  font-weight: 700;

}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 820px) {

  .pw-gauben-tile {

    flex-basis: calc((100% - 20px) / 3);

  }

}


@media (max-width: 520px) {

  .pw-gauben-top {

    gap: 10px;

  }

  .pw-gauben-instruction {

    font-size: 11px;

  }

  .pw-gauben-progress {

    flex-basis: 65px;

  }

  .pw-gauben-board {

    gap: 8px;

  }

  .pw-gauben-tile {

    flex-basis: calc((100% - 8px) / 2);

  }

  .pw-gauben-name {

    padding: 8px;

    font-size: 11px;

  }

}


/* REDUZIERTE BEWEGUNG */

@media (prefers-reduced-motion: reduce) {

  .pw-gauben-tile,
  .pw-gauben-name,
  .pw-gauben-progress-fill {

    transition: none;
    animation: none;

  }

}

/* =====================================================
   DACHFORMEN-QUIZ
   ===================================================== */


/* NUR DIE FLACHDACH-CARD VERBREITERN */

#leistungCard:has(.pw-dachquiz)

 {
    box-sizing: border-box;
        background: #00000047;
    left: 10px !important;
    width: calc(100vw - 48px);
    max-width: calc(100vw - 28px) !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden;
}


/* INHALT NUR BEI PLATZMANGEL SCROLLEN */

#leistungCard:has(.pw-dachquiz) .leistung-card-content {
  box-sizing: border-box;

  max-height: calc(100dvh - 168px);

  overflow-x: hidden;
  overflow-y: auto;

  scrollbar-width: none;
  overscroll-behavior: contain;
}

#leistungCard:has(.pw-dachquiz) .leistung-card-content::-webkit-scrollbar {
  display: none;
}


/* GRUNDLAGEN */

.pw-dachquiz,
.pw-dachquiz * {
  box-sizing: border-box;
}

.pw-dachquiz {
  width: 100%;
  margin-top: 24px;

  color: #fff;
}


/* =====================================================
   SPIELKOPF
   ===================================================== */

.pw-dachquiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 17px;
}

.pw-dachquiz-heading {
  display: flex;
  flex-direction: column;

  gap: 7px;
}

.pw-dachquiz-eyebrow {
  color: #e02026;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .15em;
}

.pw-dachquiz-heading strong {
  color: #fff;

  font-size: 19px;
  font-weight: 700;
}

.pw-dachquiz-counter {
  display: flex;
  align-items: baseline;

  gap: 5px;

  color: rgba(255,255,255,.45);

  font-size: 19px;
  font-weight: 400;
}

.pw-dachquiz-current {
  color: #fff;

  font-size: 30px;
  font-weight: 800;
}

.pw-dachquiz-divider {
  color: #e02026;
}


/* FORTSCHRITTSANZEIGE */

.pw-dachquiz-progress {
  width: 100%;
  height: 3px;

  margin-bottom: 21px;

  overflow: hidden;
  border-radius: 99px;

  background: rgba(255,255,255,.15);
}

.pw-dachquiz-progress-fill {
  display: block;

  width: 0;
  height: 100%;

  background: #e02026;

  transition: width .45s ease;
}


/* =====================================================
   ZWEISPALTIGES LAYOUT
   ===================================================== */

.pw-dachquiz-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 18px;

  align-items: stretch;
}


/* =====================================================
   LINKE SEITE – DACHBILD
   ===================================================== */

.pw-dachquiz-visual {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  min-width: 0;
  min-height: 280px;

  padding: 15px;

  border-radius: 11px;

  background: #f2f1ee;

  overflow: hidden;
}

.pw-dachquiz-visual-label {
  align-self: flex-start;

  color: #777;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .09em;
}


/* DACHBILD */

.pw-dachquiz-image {
  display: block;

  width: 100%;
  height: 225px;
  max-height: 32dvh;

  object-fit: contain;
  object-position: center;

  user-select: none;
  pointer-events: none;

  transition:
    opacity .2s ease,
    transform .35s ease;
}


/* BILDNUMMER */

.pw-dachquiz-visual-number {
  align-self: flex-end;

  color: #999;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .1em;
}


/* =====================================================
   RECHTE SEITE – QUIZ
   ===================================================== */

.pw-dachquiz-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;

  padding: 13px 6px;
}

.pw-dachquiz-question-number {
  color: #e02026;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .13em;
}

.pw-dachquiz-panel h3 {
  margin: 12px 0 10px;

  color: #fff;

  font-size: clamp(21px, 2.5vw, 27px);
  font-weight: 800;
  line-height: 1.2;
}

.pw-dachquiz-panel-top > p {
  margin: 0 0 25px;

  color: rgba(255,255,255,.65);

  font-size: 12px;
  line-height: 1.6;
}


/* =====================================================
   EINGABEFELD
   ===================================================== */

.pw-dachquiz-form {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.pw-dachquiz-form label {
  color: rgba(255,255,255,.65);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .1em;
}

.pw-dachquiz-input {
  display: block;

  width: 100%;
  min-width: 0;

  padding: 14px 16px;

  border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px;

  outline: none;

  background: rgba(255,255,255,.10);

  color: #fff;

  font: inherit;
  font-size: 14px;

  transition:
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.pw-dachquiz-input::placeholder {
  color: rgba(255,255,255,.35);
}

.pw-dachquiz-input:focus {
  border-color: #e02026;

  background: rgba(255,255,255,.14);

  box-shadow:
    0 0 0 3px rgba(224,32,38,.12);
}


/* FALSCHE ANTWORT */

.pw-dachquiz-input.is-wrong {
  border-color: #e02026;

  background: rgba(224,32,38,.10);
}


/* RICHTIGE ANTWORT */

.pw-dachquiz-input.is-correct {
  border-color: #50c17a;

  background: rgba(80,193,122,.10);
}


/* =====================================================
   ANTWORT PRÜFEN
   ===================================================== */

.pw-dachquiz-check,
.pw-dachquiz-next,
.pw-dachquiz-restart {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  width: 100%;

  padding: 13px 17px;

  border: 1px solid rgba(224,32,38,.75);
  border-radius: 8px;

  background: rgba(224,32,38,.14);

  color: #fff;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;

  text-align: left;

  cursor: pointer;

  transition:
    background .3s ease,
    border-color .3s ease,
    transform .3s ease;
}

.pw-dachquiz-check span,
.pw-dachquiz-next span {
  font-size: 20px;
  font-weight: 400;
}

.pw-dachquiz-check:hover,
.pw-dachquiz-next:hover,
.pw-dachquiz-restart:hover {
  background: rgba(224,32,38,.35);

  border-color: #e02026;

  transform: translateY(-2px);
}

.pw-dachquiz-check:disabled {
  opacity: .45;
  cursor: default;
  transform: none;
}


/* NÄCHSTE FRAGE */

.pw-dachquiz-next {
  margin-top: 10px;
}


/* RÜCKMELDUNG */

.pw-dachquiz-feedback {
  min-height: 20px;

  margin-top: 13px;

  color: rgba(255,255,255,.7);

  font-size: 12px;
  line-height: 1.5;
}

.pw-dachquiz-feedback.is-wrong {
  color: #ff8185;
}

.pw-dachquiz-feedback.is-correct {
  color: #85e4a6;
}


/* =====================================================
   ABSCHLUSS
   ===================================================== */

.pw-dachquiz-finish {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 30px 20px;

  text-align: center;
}

.pw-dachquiz-finish-symbol {
  display: grid;
  place-items: center;

  width: 75px;
  height: 75px;

  margin-bottom: 18px;

  border: 1px solid rgba(80,193,122,.65);
  border-radius: 50%;

  background: rgba(80,193,122,.12);

  color: #85e4a6;

  font-size: 35px;
}

.pw-dachquiz-finish h3 {
  margin: 10px 0;

  color: #fff;
  font-size: 34px;
}

.pw-dachquiz-finish > p {
  margin: 0 0 25px;

  color: rgba(255,255,255,.7);

  font-size: 14px;
}

.pw-dachquiz-restart {
  width: auto;
  justify-content: center;

  padding: 13px 25px;
}


/* HIDDEN MUSS AUCH BEI FLEX GREIFEN */

.pw-dachquiz [hidden] {
  display: none !important;
}


/* =====================================================
   UNTERE LEISTE
   ===================================================== */

.pw-dachquiz-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 15px;

  margin-top: 19px;
  padding-top: 14px;

  border-top: 1px solid rgba(255,255,255,.14);
}

.pw-dachquiz-footer > span {
  color: rgba(255,255,255,.45);
  font-size: 11px;
}

.pw-dachquiz-reset {
  padding: 5px 0;

  border: none;
  background: transparent;

  color: rgba(255,255,255,.7);

  font-family: inherit;
  font-size: 11px;

  white-space: nowrap;
  cursor: pointer;

  transition: color .25s ease;
}

.pw-dachquiz-reset:hover {
  color: #fff;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 620px) {

  .pw-dachquiz {
    margin-top: 18px;
  }

  .pw-dachquiz-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pw-dachquiz-visual {
    min-height: 0;
    padding: 12px;
  }

  .pw-dachquiz-image {
    height: 185px;
    max-height: none;
  }

  .pw-dachquiz-panel {
    padding: 7px 2px;
  }

  .pw-dachquiz-panel-top > p {
    margin-bottom: 17px;
  }

  .pw-dachquiz-footer {
    align-items: flex-start;
  }

}


/* KLEINE BILDSCHIRMHÖHEN */

@media (max-height: 650px) {

  .pw-dachquiz-image {
    height: 165px;
    max-height: none;
  }

  .pw-dachquiz-visual {
    min-height: 220px;
  }

}


/* REDUZIERTE BEWEGUNG */

@media (prefers-reduced-motion: reduce) {

  .pw-dachquiz *,
  .pw-dachquiz-progress-fill {
    transition: none !important;
  }

}

/* =====================================================
   DACHFORMEN-QUIZ – HINWEISE & AUFLÖSUNG
   ===================================================== */


/* HINWEIS */

.pw-dachquiz-hint {
  margin: 12px 0;
  padding: 14px 16px;

  border: 1px solid rgba(255,255,255,.25);
  border-left: 3px solid #e02026;
  border-radius: 7px;

  background: rgba(255,255,255,.07);
}

.pw-dachquiz-hint strong {
  display: block;

  margin-bottom: 6px;

  color: #fff;
  font-size: 12px;
}

.pw-dachquiz-hint p {
  margin: 0;

  color: rgba(255,255,255,.75);
  font-size: 12px;
  line-height: 1.6;
}


/* AUFLÖSUNG */

.pw-dachquiz-solution {
  margin: 12px 0;
  padding: 15px 17px;

  border: 1px solid rgba(80,193,122,.45);
  border-radius: 8px;

  background: rgba(80,193,122,.10);
}

.pw-dachquiz-solution-name {
  display: block;

  margin-bottom: 7px;

  color: #a5f0bd;
  font-size: 17px;
  font-weight: 700;
}

.pw-dachquiz-solution-text {
  margin: 0;

  color: rgba(255,255,255,.8);
  font-size: 12px;
  line-height: 1.6;
}


/* HILFEBUTTONS */

.pw-dachquiz-help-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 12px;
  margin-top: 10px;
}

.pw-dachquiz-reveal,
.pw-dachquiz-skip {
  padding: 8px 0;

  border: 0;
  background: transparent;

  font-family: inherit;
  font-size: 12px;
  font-weight: 600;

  cursor: pointer;

  transition: color .25s ease;
}


/* ANTWORT AUFLÖSEN */

.pw-dachquiz-reveal {
  color: #ff8589;
}

.pw-dachquiz-reveal:hover {
  color: #fff;
}


/* ÜBERSPRINGEN */

.pw-dachquiz-skip {
  margin-left: auto;

  color: rgba(255,255,255,.55);
}

.pw-dachquiz-skip:hover {
  color: #fff;
}


/* AUSWERTUNG */

.pw-dachquiz-results {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));

  gap: 10px;

  width: 100%;
  margin: 20px 0 25px;
}

.pw-dachquiz-results > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;
  padding: 18px 8px;

  border: 1px solid rgba(255,255,255,.17);
  border-radius: 9px;

  background: rgba(255,255,255,.07);
}

.pw-dachquiz-results strong {
  color: #fff;
  font-size: 29px;
  font-weight: 800;
}

.pw-dachquiz-results span {
  color: rgba(255,255,255,.6);

  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}


/* AUSWERTUNG – FARBAKZENTE */

.pw-dachquiz-results > div:nth-child(1) strong {
  color: #85e4a6;
}

.pw-dachquiz-results > div:nth-child(2) strong {
  color: #fff;
}

.pw-dachquiz-results > div:nth-child(3) strong {
  color: #ff8589;
}

.pw-dachquiz-results > div:nth-child(4) strong {
  color: rgba(255,255,255,.55);
}


/* KLEINE BILDSCHIRME */

@media (max-width: 520px) {

  .pw-dachquiz-results {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

}

/* ============================================================
   DÄMMUNG & DACHAUFBAU – ORIGINALBILDER
   ============================================================ */

/* NUR DIESE CARD */

#leistungCard:has(.pw-dachbau) {
  box-sizing: border-box;

  width: calc(100vw - 48px) !important;
  max-width: calc(100vw - 28px) !important;

  height: auto !important;
  max-height: calc(100dvh - 146px) !important;

  overflow: hidden !important;
}

#leistungCard:has(.pw-dachbau) .leistung-card-content {
  box-sizing: border-box;

  max-height: calc(100dvh - 170px);

  overflow-x: hidden;
  overflow-y: auto;

  scrollbar-width: thin;
  scrollbar-color: rgba(224, 32, 38, .55) transparent;
}

/* GRUNDLAGEN */

.pw-dachbau,
.pw-dachbau * {
  box-sizing: border-box;
}

.pw-dachbau {
  width: 100%;
  margin-top: 18px;
  color: #fff;
}

/* KOPFBEREICH */

.pw-dachbau-head {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;
  margin-bottom: 12px;
  background: rgb(255 255 255 / 20%);
    border-radius: 18px;
    padding: 18px;
}

.pw-dachbau-eyebrow {
  color: #ef5459;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}

.pw-dachbau-head h3 {
  margin: 7px 0 4px;

  color: white;
  font-size: 24px;
  line-height: 1.2;
}

.pw-dachbau-head p {
  margin: 0;

  color: rgba(255,255,255,.7);
  font-size: 12px;
  line-height: 1.5;
}

.pw-dachbau-counter {
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.pw-dachbau-counter strong {
  color: #fff;
  font-size: 29px;
}

.pw-dachbau-counter span {
  color: rgba(255,255,255,.55);
  font-size: 16px;
}

/* FORTSCHRITT */

.pw-dachbau-progress {
  height: 3px;
  margin-bottom: 15px;

  border-radius: 3px;
  background: rgba(255,255,255,.17);

  overflow: hidden;
}

.pw-dachbau-progress > span {
  display: block;

  width: 0%;
  height: 100%;

  background: #e02026;

  transition: width .25s ease;
}

/* ARBEITSBEREICH */

.pw-dachbau-workspace {
  display: grid;

  grid-template-columns: minmax(0, 1fr) 250px;

  gap: 15px;
  align-items: start;
}

/* ZEICHNUNG */

.pw-dachbau-drawing {
  min-width: 0;
  padding: 12px;

  border: 1px solid rgba(255,255,255,.20);
  border-radius: 12px;

    background: rgb(0 0 0 / 25%);
}

.pw-dachbau-drawing-title {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  gap: 7px;
  margin-bottom: 10px;

  color: rgba(255,255,255,.75);

  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}

.pw-dachbau-drawing-state {
  color: #fff;
}

/* ============================================================
   ORIGINALBILDER – DECKUNGSGLEICH
   ============================================================ */

/*
  Originalgröße: 1448 × 1086 Pixel.

  Der tatsächliche Dachaufbau beginnt bei Y=228.
  Deshalb zeigen wir den Ausschnitt Y=228 bis Y=988.

  Alle neun PNGs behalten dieselbe Skalierung
  und exakt dieselbe Position.
*/

.pw-dachbau-canvas {
  position: relative;

  width: 100%;
  aspect-ratio: 1448 / 760;

  overflow: hidden;

  border-radius: 8px;
  isolation: isolate;
}

.pw-dachbau-canvas > img.pw-dachbau-layer {
  position: absolute;
  display: block;

  left: 0;
  top: -30%;

  width: 100%;
  height: auto;

  max-width: none;

  margin: 0;
  padding: 0;

  border: 0;

  opacity: 0;

  pointer-events: none;
  user-select: none;

  transform: none;
  object-fit: initial;

  transition: opacity .25s ease;
}

/* EINGESETZTE SCHICHTEN */

.pw-dachbau-canvas > img.pw-dachbau-layer.is-installed {
  opacity: 1;
}

/* EBENENREIHENFOLGE */

.pw-dachbau-canvas [data-part="innen"] {
  z-index: 1;
}

.pw-dachbau-canvas [data-part="dampfbremse"] {
  z-index: 2;
}

.pw-dachbau-canvas [data-part="zwischensparren"] {
  z-index: 3;
}

.pw-dachbau-canvas [data-part="sparren"] {
  z-index: 4;
}

.pw-dachbau-canvas [data-part="aufsparren"] {
  z-index: 5;
}

.pw-dachbau-canvas [data-part="unterdeckbahn"] {
  z-index: 6;
}

.pw-dachbau-canvas [data-part="konterlatten"] {
  z-index: 7;
}

.pw-dachbau-canvas [data-part="traglatten"] {
  z-index: 8;
}

.pw-dachbau-canvas [data-part="deckung"] {
  z-index: 9;
}

/* BILDUNTERSCHRIFT */

.pw-dachbau-note {
  margin: 8px 1px 0 !important;

  color: rgba(255,255,255,.52);

  font-size: 10px !important;
  line-height: 1.4;
}

/* ============================================================
   ABLAGEPLÄTZE
   ============================================================ */

.pw-dachbau-slots {
  display: flex;
  flex-direction: column;

  gap: 6px;
  min-width: 0;
}

.pw-dachbau-slots-title {
  margin: 0 0 4px;

  color: rgba(255,255,255,.74);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

.pw-dachbau-slot {
  display: flex;
  align-items: center;

  gap: 9px;

  width: 100%;
  min-height: 37px;

  padding: 7px 10px;

  border: 1px dashed rgba(255,255,255,.35);
  border-radius: 7px;

background: rgb(0 0 0 / 25%);

  color: #fff;
  font: inherit;
  text-align: left;

  cursor: pointer;

  transition:
    border-color .15s ease,
    background .15s ease;
}

.pw-dachbau-slot-number {
  flex: 0 0 22px;

  color: #ef5459;

  font-size: 11px;
  font-weight: 800;
}

.pw-dachbau-slot-label {
  flex: 1;
  min-width: 0;

  font-size: 11px;
  line-height: 1.25;
}

.pw-dachbau-slot-symbol {
  color: rgba(255,255,255,.5);
  font-size: 15px;
}

/* HOVER UND DRAG-ZIEL */

.pw-dachbau-slot:hover:not(.is-correct),
.pw-dachbau-slot.is-over {
  border-color: #e02026;
  background: rgba(224,32,38,.15);
}

/* FALSCH */

.pw-dachbau-slot.is-wrong {
  border-color: #f54750;
  background: rgba(245,71,80,.2);
}

/* RICHTIG */

.pw-dachbau-slot.is-correct {
  border-style: solid;
  border-color: rgba(94,214,139,.7);

  background: rgba(94,214,139,.14);

  cursor: default;
}

.pw-dachbau-slot.is-correct .pw-dachbau-slot-symbol {
  color: #a0edb6;
}

/* ============================================================
   BAUTEILE
   ============================================================ */

.pw-dachbau-bank-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  gap: 8px;
  margin: 16px 0 9px;

  color: rgba(255,255,255,.64);
  font-size: 11px;
}

.pw-dachbau-bank-head strong {
  color: white;
  font-size: 11px;
  letter-spacing: .08em;
}

.pw-dachbau-bank {
  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 8px;
}

.pw-dachbau-piece {
  display: flex;
  align-items: center;

  gap: 8px;

  min-width: 0;
  min-height: 41px;

  padding: 8px 10px;

  border: 1px solid rgba(255,255,255,.27);
  border-radius: 7px;
background: rgb(0 0 0 / 25%);

  color: white;

  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;

  overflow-wrap: anywhere;

  cursor: grab;
  user-select: none;
  touch-action: none;
}

.pw-dachbau-piece::before {
  content: "";

  flex: 0 0 9px;

  width: 9px;
  height: 9px;

  border-radius: 2px;

  background: var(--piece, #e02026);
}

.pw-dachbau-piece:hover,
.pw-dachbau-piece.is-selected {
  border-color: #e02026;
  background: rgba(224,32,38,.18);
}

/* EINGESETZTE BAUTEILE VERSCHWINDEN */

.pw-dachbau-piece.is-used,
.pw-dachbau-piece[hidden] {
  display: none !important;
}

/* BAUTEIL WÄHREND DES ZIEHENS */

.pw-dachbau-ghost {
  position: fixed !important;

  z-index: 999999 !important;

  width: max-content !important;
  max-width: 220px;

  pointer-events: none !important;

  transform: translate(-50%, -50%);

  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}

/* ============================================================
   RÜCKMELDUNG UND BUTTONS
   ============================================================ */

.pw-dachbau-feedback {
  min-height: 18px;
  margin-top: 10px;

    color: var(--white);
  font-size: 12px;
}

.pw-dachbau-feedback.is-success {
  color: #a5efbc;
}

.pw-dachbau-actions {
  display: flex;
  justify-content: space-between;

  gap: 15px;

  margin-top: 10px;
  padding-top: 10px;

  border-top: 1px solid rgba(255,255,255,.14);
}

.pw-dachbau-help,
.pw-dachbau-reset {
  padding: 5px 0;

  border: 0;
  background: transparent;

  color: rgba(255,255,255,.76);

  font: inherit;
  font-size: 12px;

  cursor: pointer;
}

.pw-dachbau-help {
  color: #ff8589;
}

.pw-dachbau-help:hover,
.pw-dachbau-reset:hover {
  color: #fff;
}

.pw-dachbau-help:disabled {
  opacity: .3;
  cursor: default;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 800px) {

  .pw-dachbau-workspace {
    grid-template-columns: 1fr;
  }

  .pw-dachbau-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pw-dachbau-slots-title {
    grid-column: 1 / -1;
  }

  .pw-dachbau-bank {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (max-width: 480px) {

  .pw-dachbau-slots,
  .pw-dachbau-bank {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pw-dachbau-head h3 {
    font-size: 20px;
  }

}

@media (prefers-reduced-motion: reduce) {

  .pw-dachbau-progress > span,
  .pw-dachbau-canvas > img.pw-dachbau-layer {
    transition: none;
  }

}

/* =====================================================
   ALLE WINDOWS – EINHEITLICHE BREITE
   ===================================================== */


#leistungCard:has(.pw-j11),
#leistungCard:has(.pw-gauben),
#leistungCard:has(.pw-dachquiz),
#leistungCard:has(.pw-dachbau),
#leistungenContactCard {
  width: calc(100vw - 48px) !important;
  max-width: calc(100vw - 48px) !important;
}


/* =====================================================
   DACHAUFBAU – VOLLE HÖHE UNTER DEM HEADER
   ===================================================== */

#leistungCard:has(.pw-dachbau) {
  position: fixed !important;

  top: 135px !important;
  left: 24px !important;

  right: auto !important;
  bottom: auto !important;

  height: calc(100dvh - 120px) !important;
  min-height: calc(100dvh - 120px) !important;
  max-height: calc(100dvh - 120px) !important;

  transform: none !important;

  display: flex;
  flex-direction: column;

  overflow: hidden !important;
}


/* INNERER FENSTERBEREICH */

#leistungCard:has(.pw-dachbau) .leistung-card-content {
  flex: 1;
  min-height: 0;

  max-height: none !important;

  overflow-x: hidden;
  overflow-y: auto;
}


/* PUZZLE FÜLLT DEN VERFÜGBAREN RAUM */

#leistungCard:has(.pw-dachbau) #leistungCardBody {
  display: flex;
  flex-direction: column;

  min-height: 100%;
}

#leistungCard:has(.pw-dachbau) .pw-dachbau {
  display: flex;
  flex-direction: column;

  flex: 1;

  min-height: 0;
}


/* ZEICHNUNG UND ABLAGEPLÄTZE */

#leistungCard:has(.pw-dachbau) .pw-dachbau-workspace {
  flex: 1;

  min-height: 0;

  align-items: stretch;
}

#leistungCard:has(.pw-dachbau) .pw-dachbau-drawing {
  display: flex;
  flex-direction: column;

  justify-content: center;
}


/* ABLAGEPLÄTZE ÜBER DIE HÖHE VERTEILEN */

#leistungCard:has(.pw-dachbau) .pw-dachbau-slots {
  justify-content: space-between;
}


/* SPARREN IMMER SICHTBAR */

#leistungCard:has(.pw-dachbau)
.pw-dachbau-canvas
img[data-part="sparren"] {
  opacity: 1 !important;
}

/* DACHAUFBAU – KOMPAKTE FENSTERHÖHE */

#leistungCard:has(.pw-dachbau) {
  top: calc(50dvh + 60px) !important;
    background: rgb(153 153 153 / 30%);
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 144px) !important;

  transform: translateY(-50%) !important;
}

#leistungCard:has(.pw-dachbau) .leistung-card-content {
  flex: initial;
  max-height: calc(100dvh - 190px) !important;
  overflow-y: auto;
}

#leistungCard:has(.pw-dachbau) #leistungCardBody {
  display: block;
  min-height: 0;
}

#leistungCard:has(.pw-dachbau) .pw-dachbau {
  display: block;
  flex: none;
}

#leistungCard:has(.pw-dachbau) .pw-dachbau-workspace {
  flex: none;

  grid-template-columns: minmax(0, 580px) 250px;

  justify-content: center;
  align-items: start;

  background: rgb(0 0 0 / 25%);
    border-radius: 18px;
    padding: 15px;
}

#leistungCard:has(.pw-dachbau) .pw-dachbau-drawing {
  width: 100%;
  height: auto;
  min-height: 0;
}

@media (max-width: 900px) {
  #leistungCard:has(.pw-dachbau) .pw-dachbau-workspace {
    grid-template-columns: 1fr;
  }

  #leistungCard:has(.pw-dachbau) .pw-dachbau-drawing {
    max-width: 580px;
    margin-inline: auto;
  }
}

#leistungCard:has(.pw-dachbau) .pw-dachbau-slots {
  justify-content: flex-start;
}

/* JACOBI – AUTOMATISCH ZUGESCHNITTENE PRODUKTBILDER */

.pw-ziegel-image {
  display: block;
  width: 100%;
  height: 100%;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
  object-position: center;

  transform: none !important;
}

/* JACOBI – STARKER GLAS-EFFEKT */

#leistungCard:has(.pw-ziegel) {
  background: rgba(0, 0, 0, 0) !important;
  border: 1px solid rgba(255, 255, 255, .25);
}

#leistungCard:has(.pw-ziegel) .leistung-card-content {
  background: transparent !important;
}

.pw-ziegel {
  background: rgba(255, 255, 255, 0.103) !important;

  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);

  border: 1px solid rgba(255, 255, 255, .60);

  box-shadow:
    0 18px 50px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .65);
}

/* ALLE INNENFLÄCHEN TRANSPARENT */

.pw-ziegel-topbar {
  background: rgba(255, 255, 255, .5) !important;
}

.pw-ziegel-viewer {
background: #ffffff2b !important;
}

.pw-ziegel-details {
  background: rgba(255, 255, 255, .7) !important;
}

.pw-ziegel-specs {
  background: rgba(255, 255, 255, .5) !important;
}

.pw-ziegel-footer {
  background: rgba(255, 255, 255, .8) !important;
}

/* LESBARKEIT SICHERN */

.pw-ziegel-toplabel,
.pw-ziegel-viewer-kicker,
.pw-ziegel-image-foot,
.pw-ziegel-overline,
.pw-ziegel-color-heading > span,
.pw-ziegel-selection-note,
.pw-ziegel-footer > span {
    color: #000000 !important;
}

.pw-dachfenster-iframe {
  display: block;
  width: 100%;
  height: min(650px, calc(100dvh - 250px));
  border: none;
  border-radius: 10px;
}


/* =========================================
   DACHFENSTER – WINDOW
   ========================================= */

#leistungCard:has(.pw-roto-iframe) {
  position: fixed !important;

  width: calc(100vw - 30px) !important;
  max-width: calc(100vw - 30px) !important;

  height: min(740px, calc(100dvh - 200px)) !important;
  max-height: calc(100dvh - 150px) !important;

  left: 50% !important;
  top: calc(50dvh + 60px) !important;
  bottom: auto !important;

  transform: translate(-50%, -50%) !important;

  display: flex;
  flex-direction: column;

  overflow: hidden !important;
      background: rgb(0 0 0 / 50%);
}

/* FENSTERINHALT */

#leistungCard:has(.pw-roto-iframe) .leistung-card-content {
  display: flex;
  flex-direction: column;

  flex: 1;
  min-height: 0;
  max-height: none !important;

  overflow: hidden !important;
}

#leistungCard:has(.pw-roto-iframe) #leistungCardBody {
  display: flex;
  flex-direction: column;

  flex: 1;
  min-height: 0;
}

/* EINGEBUNDENER KONFIGURATOR */

.pw-roto-iframe {
  display: block;

  flex: 1;
  min-height: 0;

  width: 100%;
  height: 0;

  border: none;
  border-radius: 8px;

  background: #101216;
}

/* =====================================================
   SCHORNSTEIN – FOTOPUZZLE
   ===================================================== */

.pw-schorn-puzzle,
.pw-schorn-puzzle * {
  box-sizing: border-box;
}

.pw-schorn-puzzle {
  height: clamp(320px, calc(100dvh - 320px), 560px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: inherit;
  font: inherit;
}

.pw-schorn-puzzle__top,
.pw-schorn-puzzle__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.pw-schorn-puzzle__top {
  border-bottom: 1px solid #ffffff30;
}

.pw-schorn-puzzle__bottom {
  border-top: 1px solid #ffffff30;
}

.pw-schorn-puzzle__top strong {
  font-size: 15px;
}

.pw-schorn-puzzle__count,
.pw-schorn-puzzle__feedback {
  font-size: 14px;
}

.pw-schorn-puzzle__main {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 12px;
  padding: 4px 0;
}

.pw-schorn-puzzle__stage,
.pw-schorn-puzzle__boardwrap {
  min-width: 0;
  min-height: 0;
}

.pw-schorn-puzzle__boardwrap {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 2px;
}

.pw-schorn-puzzle__board {
  position: relative;
  flex: none;
  isolation: isolate;
  outline: 1px solid #ffffff70;
  background: #101216;
  touch-action: none;
}

.pw-schorn-puzzle__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .15;
  pointer-events: none;
}

.pw-schorn-puzzle__board.is-hint .pw-schorn-puzzle__preview {
  opacity: .55;
}

.pw-schorn-puzzle__cursor {
  position: absolute;
  display: none;
  pointer-events: none;
  outline: 2px solid #e02026;
  outline-offset: -2px;
  z-index: 3;
}

.pw-schorn-puzzle__board:focus-visible .pw-schorn-puzzle__cursor {
  display: block;
}

.pw-schorn-puzzle__bank {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;

  display: grid;
  grid-template-columns: repeat(auto-fill, 72px);
  grid-auto-rows: max-content;
  justify-content: center;
  align-content: start;

  gap: 8px;
  padding: 8px;

  border: 1px solid #ffffff35;
  border-radius: 8px;
}

.pw-schorn-puzzle__piece {
  width: 100%;
  display: grid;
  place-items: center;
  padding: 3px;

  border: 1px solid #ffffff45;
  border-radius: 5px;

  color: inherit;
  background: #ffffff0d;

  cursor: grab;
  touch-action: none;
}

.pw-schorn-puzzle__piece canvas {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.pw-schorn-puzzle__piece.is-selected {
  border-color: #e02026;
  outline: 2px solid #e02026;
}

.pw-schorn-puzzle__piece.is-dragging {
  opacity: .35;
}

.pw-schorn-puzzle__board > .pw-schorn-puzzle__piece {
  position: absolute;
  display: block;
  width: auto;
  border: 0;
  padding: 0;
  background: none;
  pointer-events: none;
  border-radius: 0;
}

.pw-schorn-puzzle__board > .pw-schorn-puzzle__piece canvas {
  width: 100%;
  height: 100%;
}

.pw-schorn-puzzle__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pw-schorn-puzzle__actions button {
  min-height: 44px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;

  border: 1px solid #ffffff60;
  border-radius: 5px;

  background: transparent;
  color: inherit;
  cursor: pointer;
}

.pw-schorn-puzzle__actions button:disabled {
  opacity: .35;
  cursor: default;
}

.pw-schorn-puzzle__actions button:not(:disabled):hover {
  border-color: #e02026;
}

.pw-schorn-puzzle button:focus-visible,
.pw-schorn-puzzle__board:focus-visible {
  outline: 3px solid #f1666b;
  outline-offset: 3px;
}

.pw-schorn-puzzle__ghost {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  opacity: .9;
  filter: drop-shadow(0 5px 9px #0008);
}

.pw-schorn-puzzle__ghost canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 780px) {
.pw-schorn-puzzle__main {
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 8px;
}

.pw-schorn-puzzle__bank {
  grid-template-columns: repeat(auto-fill, 68px);
  gap: 4px;
}

  .pw-schorn-puzzle__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .pw-schorn-puzzle {
    height: 620px;
  }

  .pw-schorn-puzzle__main {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 72%) minmax(0, 28%);
  }

  .pw-schorn-puzzle__boardwrap {
    padding: 4px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pw-schorn-puzzle * {
    transition: none !important;
  }
}

/* =========================================
   SCHORNSTEIN – WINDOW GRÖSSE & POSITION
   ========================================= */

#leistungCard:has(.pw-schorn-puzzle) {
  box-sizing: border-box !important;

  position: fixed !important;

  top: 135px !important;
  left: 24px !important;
  right: auto !important;
  bottom: auto !important;

  width: calc(100vw - 48px) !important;
  max-width: calc(100vw - 48px) !important;

  height: calc(100dvh - 150px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 150px) !important;

  transform: none !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
}

/* INHALT AN FENSTERHÖHE ANPASSEN */

#leistungCard:has(.pw-schorn-puzzle) .leistung-card-content {
  display: flex;
  flex-direction: column;

  flex: 1;
  min-height: 0;
  max-height: none !important;

  overflow: hidden;
}

#leistungCard:has(.pw-schorn-puzzle) #leistungCardBody {
  display: flex;
  flex-direction: column;

  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* PUZZLE NUTZT DEN VERFÜGBAREN PLATZ */

#leistungCard:has(.pw-schorn-puzzle) .pw-schorn-puzzle {
  height: auto !important;
  min-height: 0 !important;

  flex: 1 1 0;
}

#leistungCard:has(.pw-schorn-puzzle) .pw-schorn-puzzle__main {
  min-height: 0;
}

/* =========================================
   SCHORNSTEIN – KOMPAKTE BEDIENLEISTE
   ========================================= */

.pw-schorn-puzzle {
  grid-template-rows: auto minmax(0, 1fr);
}

.pw-schorn-puzzle__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;

  gap: 20px;
  padding: 6px 0 10px;
}

.pw-schorn-puzzle__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
}

.pw-schorn-puzzle__feedback {
  min-width: 0;
  margin: 0;
  line-height: 1.4;
}

.pw-schorn-puzzle__actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 7px;
}

/* BEI WENIGER PLATZ ZWEIZEILIG */

@media (max-width: 1100px) {
  .pw-schorn-puzzle__top {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
  }

  .pw-schorn-puzzle__feedback {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .pw-schorn-puzzle__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* SCHORNSTEIN – KOMPAKTE MOBILE BEDIENLEISTE */

@media (max-width: 485px) {

  .pw-schorn-puzzle__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 5px 0;
  }

  .pw-schorn-puzzle__meta {
    grid-column: 1;
    grid-row: 1;

    display: flex;
    justify-content: space-between;
    gap: 8px;
  }

  .pw-schorn-puzzle__actions {
    grid-column: 1;
    grid-row: 2;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    width: 100%;
    gap: 5px;
  }

  .pw-schorn-puzzle__actions button {
    width: 100%;
    min-width: 0;
    min-height: 44px;

    padding: 4px 2px;

    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }

  .pw-schorn-puzzle__feedback {
    grid-column: 1;
    grid-row: 3;

    font-size: 13px;
    line-height: 1.3;
  }

}

/* SCHORNSTEIN – SEHR SCHMALE DISPLAYS */

@media (max-width: 329px) {

  .pw-schorn-puzzle__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .pw-schorn-puzzle__actions button {
    min-height: 44px;
    padding: 6px 8px;
    font-size: 12px;
    white-space: nowrap;
  }

}

/* =====================================================
   DACHENTWÄSSERUNG – PIPE MANIA
   ===================================================== */

/* WINDOW */

#leistungCard:has(.pw-pipe-game) {
  box-sizing: border-box !important;

  position: fixed !important;
  padding-right: 10%;
  top: 135px !important;
  left: 24px !important;
  right: auto !important;
  bottom: auto !important;

  width: calc(100vw - 48px) !important;
  max-width: calc(100vw - 48px) !important;

  height: calc(100dvh - 150px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 150px) !important;

  transform: none !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
}

/* INNERER FENSTERBEREICH */

#leistungCard:has(.pw-pipe-game) .leistung-card-content {
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  flex: 1 1 0;
  min-height: 0;

  max-height: none !important;
  overflow: hidden !important;
}

#leistungCard:has(.pw-pipe-game) #leistungCardBody {
  display: flex;
  flex-direction: column;

  flex: 1 1 0;
  min-height: 0;

  overflow: hidden;
}

#leistungCard:has(.pw-pipe-game) #leistungCardBody > p {
  margin-bottom: 8px !important;
}

/* SPIEL */

.pw-pipe-game,
.pw-pipe-game * {
  box-sizing: border-box;
}

.pw-pipe-game {
  flex: 1 1 0;
  min-height: 0;

  display: flex;
  flex-direction: column;

  font: inherit;
  color: inherit;
}

/* OBERE BEDIENLEISTE */

.pw-pipe-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  gap: 8px 16px;
  padding: 3px 0 9px;

  flex: none;
}

.pw-pipe-level {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
}

.pw-pipe-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pw-pipe-buttons button {
  min-height: 44px;

  padding: 8px 14px;

  font: inherit;
  font-size: 14px;
  line-height: 1.2;

  color: inherit;
  background: rgba(255,255,255,.08);

  border: 1px solid currentColor;
  border-radius: 6px;

  cursor: pointer;
}

.pw-pipe-buttons button:hover:not(:disabled) {
  border-color: #e02026;
}

.pw-pipe-buttons button:disabled {
  opacity: .38;
  cursor: default;
}

.pw-pipe-buttons button:focus-visible,
.pw-pipe-tile:focus-visible {
  outline: 3px solid #ef4b52;
  outline-offset: 2px;
  z-index: 2;
}

/* SPIELFLÄCHE – NUTZT VERFÜGBARE HÖHE */

.pw-pipe-area {
  flex: 1 1 0;

  min-height: 0;
  min-width: 0;

  overflow: hidden;

  display: grid;
  place-items: center;

  container-type: inline-size;
}

/* HAUS MIT DACHRINNE */

.pw-pipe-scene {
  position: relative;
  flex: none;

  height: min(100%, 124.9554cqw);
  max-width: 100%;

  aspect-ratio: 1122 / 1402;

  background:
    url("../bilder/leistungen/rohrspiel/background.png")
    center / 100% 100% no-repeat;

  overflow: hidden;
}

/* ROHRRASTER */

.pw-pipe-grid {
  position: absolute;

  left: 0;
  top: auto;
  bottom: 6.4%;

  width: 100%;
  aspect-ratio: 1;

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));

  gap: 0;
}

/* EINZELNE ROHRKACHEL */

.pw-pipe-tile {
  position: relative;
  display: block;

  min-width: 0;
  min-height: 0;

  width: 100%;
  height: 100%;

  padding: 0;
  border: none;
  border-radius: 0;

  background: transparent;

  cursor: pointer;
  touch-action: manipulation;
}

.pw-pipe-tile > img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: fill;

  transform: rotate(var(--turn, 0deg));

  pointer-events: none;
  user-select: none;
}

/* FESTER AUSLASS */

.pw-pipe-tile.is-fixed {
  cursor: default;
  opacity: 1;
}

/* WASSERFLUSS */

.pw-pipe-tile.is-wet::after {
  content: "";

  position: absolute;
  inset: 2px;

  border: 3px solid #59d8d9;
  border-radius: 10%;

  box-shadow:
    inset 0 0 11px #37cdd98c,
    0 0 9px #37cdd99c;

  pointer-events: none;
}

/* STATUS */

.pw-pipe-status {
  flex: none;

  min-height: 24px;

  margin: 0;
  padding: 4px 0 0;

  font-size: 14px;
  line-height: 1.4;
}

/* MOBILE */

@media (max-width: 650px) {

  .pw-pipe-toolbar {
    gap: 6px;
  }

  .pw-pipe-buttons {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 5px;
  }

  .pw-pipe-buttons button {
    min-width: 0;

    padding: 7px 3px;
    font-size: 12px;
  }

}

/* SEHR SCHMALE DISPLAYS */

@media (max-width: 335px) {

  .pw-pipe-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #leistungCard:has(.pw-pipe-game) #leistungCardBody > h2 {
    font-size: 21px;
    overflow-wrap: anywhere;
  }

}

/* REDUZIERTE BEWEGUNG */

@media (prefers-reduced-motion: reduce) {

  .pw-pipe-game *,
  .pw-pipe-game *::after {
    animation: none !important;
    transition: none !important;
  }

}

/* =====================================================
   PIPE MANIA – MEHR PLATZ FÜR DAS SPIEL
   ===================================================== */

/* ZWEISPALTIGER FENSTERINHALT */

#leistungCard:has(.pw-pipe-game) #leistungCardBody {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    clamp(250px, 23vw, 330px);

  grid-template-rows:
    auto
    auto
    auto
    minmax(0, 1fr);

  column-gap: 22px;
  row-gap: 18px;
}

/* SPIELINHALTE IM GRID ANORDNEN */

#leistungCard:has(.pw-pipe-game) .pw-pipe-game {
  display: contents;
}

/* LINKS: GROSSES SPIELFELD */

#leistungCard:has(.pw-pipe-game) .pw-pipe-area {
  grid-column: 1;
  grid-row: 1 / 5;

  min-width: 0;
  min-height: 0;
}

/* RECHTS: ÜBERSCHRIFT */

#leistungCard:has(.pw-pipe-game) #leistungCardBody > h2 {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

/* RECHTS: BESCHREIBUNG */

#leistungCard:has(.pw-pipe-game) #leistungCardBody > p {
  grid-column: 2;
  grid-row: 2;

  margin: 0 !important;
}

/* RECHTS: LEVEL UND BUTTONS */

#leistungCard:has(.pw-pipe-game) .pw-pipe-toolbar {
  grid-column: 2;
  grid-row: 3;

  display: flex;
  flex-direction: column;
  align-items: stretch;

  gap: 12px;
  padding: 4px 0 0;
}

/* BUTTONS IN ZWEI SPALTEN */

#leistungCard:has(.pw-pipe-game) .pw-pipe-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  width: 100%;
  gap: 8px;
}

#leistungCard:has(.pw-pipe-game) .pw-pipe-buttons button {
  min-width: 0;
}

/* RECHTS: STATUSMELDUNG */

#leistungCard:has(.pw-pipe-game) .pw-pipe-status {
  grid-column: 2;
  grid-row: 4;

  align-self: start;
  padding-top: 4px;
}


/* =====================================================
   MOBILE – STEUERUNG ÜBER DEM SPIEL
   ===================================================== */

@media (max-width: 780px) {

  #leistungCard:has(.pw-pipe-game) #leistungCardBody {
    grid-template-columns: minmax(0, 1fr);

    grid-template-rows:
      auto
      auto
      auto
      auto
      minmax(0, 1fr);

    row-gap: 5px;
  }

  #leistungCard:has(.pw-pipe-game) #leistungCardBody > h2 {
    grid-column: 1;
    grid-row: 1;
  }

  #leistungCard:has(.pw-pipe-game) #leistungCardBody > p {
    grid-column: 1;
    grid-row: 2;
  }

  #leistungCard:has(.pw-pipe-game) .pw-pipe-toolbar {
    grid-column: 1;
    grid-row: 3;

    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px 9px;
    padding: 0;
  }

  #leistungCard:has(.pw-pipe-game) .pw-pipe-buttons {
    flex: 1 1 100%;

    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  #leistungCard:has(.pw-pipe-game) .pw-pipe-buttons button {
    padding: 6px 2px;
    font-size: 12px;
  }

  #leistungCard:has(.pw-pipe-game) .pw-pipe-status {
    grid-column: 1;
    grid-row: 4;
    padding: 0;
  }

  #leistungCard:has(.pw-pipe-game) .pw-pipe-area {
    grid-column: 1;
    grid-row: 5;
  }
}

/* UNTER 335 PX: BUTTONS 2 × 2 */

@media (max-width: 335px) {

  #leistungCard:has(.pw-pipe-game) .pw-pipe-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* =====================================================
   DACHSANIERUNG – VIDEO WINDOW
   ===================================================== */

#leistungCard:has(.pw-sanierung) {
  position: fixed !important;

  top: 135px !important;
  left: 24px !important;
  right: auto !important;
  bottom: auto !important;

  transform: none !important;

    width: calc(100vw - 110px) !important;
  max-width: calc(100vw - 110px) !important;

  height: calc(100dvh - 220px) !important;
  max-height: calc(100dvh - 220px) !important;

  display: flex;
  flex-direction: column;

  overflow: hidden !important;
}

#leistungCard:has(.pw-sanierung) .leistung-card-content {
  display: flex;
  flex-direction: column;

  flex: 1;
  min-height: 0;
  max-height: none !important;

  overflow-x: hidden;
  overflow-y: auto;
}

#leistungCard:has(.pw-sanierung) #leistungCardBody {
  display: flex;
  flex-direction: column;

  flex: 1;
  min-height: 0;
}

#leistungCard:has(.pw-sanierung) #leistungCardBody > p {
  margin-bottom: 14px !important;
}


/* HAUPTLAYOUT */

.pw-sanierung,
.pw-sanierung * {
  box-sizing: border-box;
}

.pw-sanierung {
  display: grid;

  grid-template-columns:
    minmax(0, 1.38fr)
    minmax(325px, .83fr);

  gap: clamp(12px, 1.8vw, 26px);

  flex: 1;
  min-height: 0;
  width: 100%;

  font-family: inherit;
  color: #fff;
}


/* =====================================================
   VIDEO
   ===================================================== */

.pw-sanierung__film {
  position: relative;
  isolation: isolate;

  min-width: 0;
  min-height: 0;

  overflow: hidden;
  border-radius: 9px;

  background:
    #101318
    url("../bilder/leistungen/sanierung/ziegelwurf_poster.webp")
    center / cover no-repeat;
}

.pw-sanierung__film video {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.pw-sanierung__film::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,.38) 0%,
    transparent 35%,
    rgba(0,0,0,.12) 54%,
    rgba(5,8,12,.88) 100%
  );

  pointer-events: none;
}

.pw-sanierung__film-top,
.pw-sanierung__film-bottom,
.pw-sanierung__pause {
  position: absolute;
  z-index: 2;
}


/* KLEINE KENNZEICHNUNG */

.pw-sanierung__film-top {
  top: 24px;
  left: 26px;

  display: flex;
  align-items: center;
  gap: 9px;

  color: white;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
}

.pw-sanierung__dot {
  width: 7px;
  height: 7px;

  background: #e02026;
  border-radius: 50%;
}


/* GROSSE VIDEO-HEADLINE */

.pw-sanierung__film-bottom {
  bottom: 30px;
  left: clamp(18px, 3vw, 38px);
  right: 100px;
}

.pw-sanierung__film-bottom strong {
  display: block;

  font-size: clamp(34px, 4.2vw, 72px);
  font-weight: 900;
  line-height: .97;

  letter-spacing: -.065em;
}

.pw-sanierung__film-bottom > span {
  display: block;

  margin-top: 14px;
  max-width: 410px;

  color: #e2e2e2;

  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.5;
}


/* VIDEO PAUSIEREN */

.pw-sanierung__pause {
  right: 26px;
  bottom: 26px;

  display: grid;
  place-items: center;

  width: 46px;
  height: 46px;

  padding: 0;

  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;

  background: rgba(17,17,17,.6);
  backdrop-filter: blur(7px);

  color: white;
  font-size: 19px;

  cursor: pointer;

  transition:
    background .2s ease,
    border-color .2s ease;
}

.pw-sanierung__pause:hover {
  background: #e02026;
  border-color: #e02026;
}


/* =====================================================
   RECHTE INFORMATIONSSPALTE
   ===================================================== */

.pw-sanierung__details {
  display: flex;
  flex-direction: column;

  min-height: 0;

  padding: clamp(20px, 2.6vw, 38px);

  background: rgba(9,10,13,.56);

  border: 1px solid rgba(255,255,255,.11);
  border-radius: 9px;
}


/* KLEINE ÜBERSCHRIFT MIT ROTER LINIE */

.pw-sanierung__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;

  color: #d7d7d7;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}

.pw-sanierung__eyebrow::before {
  content: "";

  width: 28px;
  height: 2px;

  flex: none;

  background: #e02026;
}


/* HAUPTÜBERSCHRIFT */

.pw-sanierung__details h3 {
  margin:
    clamp(16px, 2.2vw, 30px)
    0
    clamp(16px, 2.4vw, 34px);

  color: white;

  font-size: clamp(23px, 2vw, 40px);
  font-weight: 800;
  line-height: 1.08;

  letter-spacing: -.055em;
}


/* ARBEITSSCHRITTE */

.pw-sanierung__steps {
  display: grid;
  gap: 0;

  margin: 0;
  padding: 0;

  list-style: none;
}

.pw-sanierung__steps li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);

  gap: 10px;

  padding: 14px 0;

  border-top: 1px solid rgba(255,255,255,.16);
}

.pw-sanierung__steps b {
  color: #ec3e43;
  font-size: 13px;
}

.pw-sanierung__steps strong {
  display: block;

  margin-bottom: 4px;

  color: white;
  font-size: 16px;
}

.pw-sanierung__steps li span {
  display: block;

  color: #c9cbd0;

  font-size: 14px;
  line-height: 1.43;
}


/* =====================================================
   LINKS
   ===================================================== */

.pw-sanierung__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: auto;
  padding-top: 22px;
      justify-content: space-between;
}

.pw-sanierung__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  gap: 15px;

  min-height: 46px;
  padding: 10px 18px;

  border: 1px solid #e02026;
  border-radius: 5px;

  background: #cf1820;

  color: white;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;

  transition: background .2s ease;
}

.pw-sanierung__cta:hover {
  background: #a90b13;
}

.pw-sanierung__secondary {
  display: inline-flex;
  align-items: center;

  min-height: 46px;

padding: 10px 18px;
    border: 1px solid #e02026;
    border-radius: 5px;
    background: #cf1820;
    color: white;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: background .2s ease;
}

.pw-sanierung__secondary:hover {
  border-color: #e02026;
}


/* TASTATURBEDIENUNG */

.pw-sanierung a:focus-visible,
.pw-sanierung button:focus-visible {
  outline: 3px solid white;
  outline-offset: 4px;
}


/* =====================================================
   KLEINERE DESKTOPS
   ===================================================== */

@media (max-width: 1180px) {

  .pw-sanierung {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(265px, .8fr);
  }

  .pw-sanierung__details {
    padding: 16px 18px;
  }

  .pw-sanierung__details h3 {
    font-size: clamp(23px, 2.3vw, 28px);
    margin: 12px 0;
  }

  .pw-sanierung__steps li {
    padding: 8px 0;
  }

  .pw-sanierung__steps li span {
    font-size: 13px;
  }

  .pw-sanierung__links {
    gap: 8px;
    padding-top: 10px;
  }

}


/* =====================================================
   MOBILE – VIDEO OBEN, INFORMATIONEN DARUNTER
   ===================================================== */

@media (max-width: 750px) {

  .pw-sanierung {
    grid-template-columns: 1fr;

    grid-template-rows:
      clamp(200px, 35dvh, 300px)
      auto;

    flex: none;
    min-height: auto;
  }

  .pw-sanierung__film {
    min-height: 200px;
  }

  .pw-sanierung__film video {
    object-fit: contain;
    background: #101318;
  }

  .pw-sanierung__film-top {
    top: 16px;
    left: 18px;
    font-size: 11px;
  }

  .pw-sanierung__film-bottom {
    bottom: 16px;
    right: 65px;
  }

  .pw-sanierung__film-bottom strong {
    font-size: clamp(27px, 7vw, 43px);
  }

  .pw-sanierung__pause {
    right: 14px;
    bottom: 14px;
  }

  .pw-sanierung__details h3 {
    font-size: clamp(23px, 6vw, 33px);
  }

  .pw-sanierung__links {
    padding-top: 15px;
  }

}


/* BEWEGUNGEN REDUZIEREN */

@media (prefers-reduced-motion: reduce) {

  .pw-sanierung__film video,
  .pw-sanierung__pause {
    display: none;
  }

  .pw-sanierung * {
    animation: none !important;
    transition: none !important;
  }

}

/* =====================================================
   PHOTOVOLTAIK – UNNÜTZES WISSEN
   ===================================================== */

/* WINDOW – BESTEHENDE GRÖSSENKONVENTION */

#leistungCard:has(.pw-pv-wissen) {
  box-sizing: border-box !important;

  position: fixed !important;

  top: 135px !important;
  left: 24px !important;
  right: auto !important;
  bottom: auto !important;

  width: calc(100vw - 48px) !important;
  max-width: calc(100vw - 48px) !important;

  height: calc(100dvh - 150px) !important;
  max-height: calc(100dvh - 150px) !important;
  min-height: 0 !important;

  transform: none !important;

  display: flex;
  flex-direction: column;

  overflow: hidden !important;
}

#leistungCard:has(.pw-pv-wissen) .leistung-card-content {
  display: flex;
  flex-direction: column;

  flex: 1;
  min-height: 0;
  max-height: none !important;

  overflow-x: hidden;
  overflow-y: auto;
}

#leistungCard:has(.pw-pv-wissen) #leistungCardBody {
  display: flex;
  flex-direction: column;

  flex: 1;
  min-height: 0;
}

#leistungCard:has(.pw-pv-wissen) #leistungCardBody > p {
  margin-bottom: 12px !important;
}


/* SPIELBEREICH */

.pw-pv-wissen,
.pw-pv-wissen * {
  box-sizing: border-box;
}

.pw-pv-wissen {
  --pv-accent: #e02026;
  --pv-line: rgba(255,255,255,.22);

  display: flex;
  flex-direction: column;

  flex: 1;
  min-height: 430px;
  width: 100%;

  color: inherit;
  font-family: inherit;
}


/* KOPFZEILE */

.pw-pv-head {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 15px;

  padding: 8px 0 14px;
  border-bottom: 1px solid var(--pv-line);
}

.pw-pv-kicker {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.5;
}

.pw-pv-counter {
  display: flex;
  align-items: baseline;
  gap: 8px;

  white-space: nowrap;

  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.pw-pv-counter strong {
  font-size: 25px;
  color: var(--pv-accent);
}


/* THEMENFILTER */

.pw-pv-categories {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
  padding: 13px 0 13px;
}

.pw-pv-categories button {
  min-height: 44px;
  padding: 9px 15px;

  border: 1px solid var(--pv-line);
  border-radius: 6px;

  background: transparent;
  color: inherit;

  font-family: inherit;
  font-size: 14px;
  font-weight: 700;

  cursor: pointer;
}

.pw-pv-categories button:hover {
  border-color: var(--pv-accent);
}

.pw-pv-categories button.is-active {
  border-color: var(--pv-accent);
  box-shadow: inset 0 -3px 0 var(--pv-accent);
}


/* EINZELNER FACT */

.pw-pv-stage {
  display: grid;
  grid-template-columns: minmax(120px, .28fr) minmax(0, 1fr);
  align-items: center;

  gap: clamp(20px, 4vw, 65px);
    background: #0000004a;
  flex: 1;
  min-width: 0;

  padding: clamp(18px, 3vw, 12px) 10px;
border-radius: 18px;
  border-bottom: 1px solid var(--pv-line);
}


/* GROSSES ICON */

.pw-pv-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 18px;
  min-width: 0;
}

.pw-pv-icon {
  display: block;

  font-family: "Apple Color Emoji", "Segoe UI Emoji",
               "Noto Color Emoji", sans-serif;

  font-size: clamp(72px, 10vw, 154px);
  line-height: 1.2;

  text-align: center;
  user-select: none;
}

.pw-pv-visual-number {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;

  color: var(--pv-accent);
}


/* TEXT */

.pw-pv-content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;
  max-width: 900px;
}

.pw-pv-category-name {
  margin-bottom: 13px;

  color: var(--pv-accent);

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.5;
}

.pw-pv-title {
  margin: 0 0 18px;

  color: inherit;

  font-family: inherit;
  font-size: clamp(25px, 3vw, 47px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.035em;
  overflow-wrap: break-word;
}

.pw-pv-wissen .pw-pv-text {
  margin: 0 !important;

  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;

  color: inherit;
  overflow-wrap: break-word;
}


/* QUELLEN */

.pw-pv-sources {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;

  gap: 8px 14px;
  margin-top: 24px;

  font-size: 14px;
  line-height: 1.5;
}

.pw-pv-source-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  opacity: .75;
}

.pw-pv-source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.pw-pv-source-links a {
  color: inherit;
  font-size: 14px;

  text-decoration: underline;
  text-decoration-color: var(--pv-accent);
  text-underline-offset: 4px;
}

.pw-pv-source-links a:hover {
  text-decoration-thickness: 2px;
}


/* UNTERE NAVIGATION */

.pw-pv-navigation {
  flex: none;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
  padding: 16px 0 5px;
}

.pw-pv-progress {
  flex: 1;
  max-width: 300px;
  height: 4px;

  background: rgba(255,255,255,.2);
  border-radius: 10px;
  overflow: hidden;
}

.pw-pv-progress-fill {
  display: block;
  height: 100%;
  width: 9.09%;

  background: var(--pv-accent);
  transition: width .25s ease;
}

.pw-pv-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pw-pv-controls button {
  min-height: 44px;
  padding: 9px 17px;

  border: 1px solid var(--pv-line);
  border-radius: 6px;

  background: transparent;
  color: inherit;

  font-family: inherit;
  font-size: 14px;
  font-weight: 700;

  cursor: pointer;
}

.pw-pv-controls button:hover {
  border-color: var(--pv-accent);
}

.pw-pv-next {
  border-color: var(--pv-accent) !important;
}


/* TASTATUR */

.pw-pv-wissen button:focus-visible,
.pw-pv-wissen a:focus-visible {
  outline: 3px solid var(--pv-accent);
  outline-offset: 3px;
}


/* KLEINERE BILDSCHIRME */

@media (max-width: 800px) {

  .pw-pv-stage {
    grid-template-columns: minmax(85px, .25fr) minmax(0, 1fr);
    gap: 18px;
  }

  .pw-pv-icon {
    font-size: clamp(60px, 10vw, 100px);
  }

  .pw-pv-navigation {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .pw-pv-progress {
    flex: none;
    width: 100%;
    max-width: none;
  }

  .pw-pv-controls {
    justify-content: space-between;
  }

}


/* SMARTPHONES */

@media (max-width: 540px) {

  .pw-pv-wissen {
    min-height: 560px;
  }

  .pw-pv-head {
    padding: 6px 0 10px;
  }

  .pw-pv-kicker {
    font-size: 11px;
  }

  .pw-pv-categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 0;
  }

  .pw-pv-categories button {
    min-width: 0;
    padding: 8px 6px;
    font-size: 13px;
  }

  .pw-pv-stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;

    gap: 12px;
    padding: 18px;
  }

  .pw-pv-visual {
    flex-direction: row;
    justify-content: flex-start;
    gap: 15px;
  }

  .pw-pv-icon {
    font-size: 64px;
  }

  .pw-pv-title {
    font-size: clamp(25px, 7vw, 34px);
    margin-bottom: 12px;
  }

  .pw-pv-category-name {
    margin-bottom: 8px;
  }

  .pw-pv-wissen .pw-pv-text {
    font-size: 16px;
    line-height: 1.55;
  }

  .pw-pv-sources {
    margin-top: 18px;
  }

  .pw-pv-navigation {
    padding-top: 12px;
  }

  .pw-pv-controls button {
    padding: 8px;
    font-size: 13px;
  }

}


/* UNTER 360 PX: BEDIENUNG NICHT ZUSAMMENDRÜCKEN */

@media (max-width: 359px) {

  .pw-pv-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pw-pv-random {
    grid-column: 1 / -1;
    grid-row: 2;
  }

}


/* REDUZIERTE BEWEGUNGEN */

@media (prefers-reduced-motion: reduce) {

  .pw-pv-progress-fill {
    transition: none;
  }

}

/* =====================================================
   SCHNEEFANG & ABRISS – NUR WINDOW-INHALTE
   Das Fenster (#leistungCard), H2 und Einleitung bleiben im Originaldesign.
   ===================================================== */

#leistungCard:has(.pw-safety) .leistung-card-content,
#leistungCard:has(.pw-archive) .leistung-card-content {
  overflow-x: hidden;
  overflow-y: auto;
}

#leistungCard:has(.pw-safety) #leistungCardBody,
#leistungCard:has(.pw-archive) #leistungCardBody {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pw-safety, .pw-safety *, .pw-archive, .pw-archive * { box-sizing: border-box; }
.pw-safety, .pw-archive { color: inherit; font-family: inherit; }

/* === SCHNEEFANG: INTERAKTIVES SICHERHEITSDACH === */
.pw-safety {
  --pw-red: #e02026;
  --pw-border: rgba(255,255,255,.22);
  display: grid;
  grid-template-columns: minmax(0,1.18fr) minmax(280px,.82fr);
  gap: clamp(16px,2.6vw,38px);
  flex: 1 0 auto;
  min-height: 390px;
  padding: 9px 0 14px;
}
.pw-safety__left { display:flex; flex-direction:column; min-width:0; }
.pw-safety__label, .pw-archive__index-title {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:12px; font-weight:800; letter-spacing:.11em;
  border-bottom:1px solid var(--pw-border,rgba(255,255,255,.22));
  padding-bottom:10px;
}
.pw-safety__label span { font-weight:400; letter-spacing:0; opacity:.75; }
.pw-safety__drawing { position:relative; flex:1; min-height:270px; width:100%; }
.pw-safety__drawing svg { position:absolute; inset:0; width:100%; height:100%; }
.pw-safety__spot {
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:clamp(43px,4.1vw,58px); height:clamp(43px,4.1vw,58px);
  display:grid; place-items:center; padding:0;
  font-size:clamp(20px,2vw,28px); line-height:1;
  border-radius:50%; border:1px solid rgba(255,255,255,.55);
  background:rgba(18,19,21,.90); color:white;
  box-shadow:0 5px 16px rgba(0,0,0,.23);
  cursor:pointer; transition:border-color .17s,box-shadow .17s;
}
.pw-safety__spot:hover,.pw-safety__spot.is-active { border-color:var(--pw-red); box-shadow:0 0 0 3px rgba(224,32,38,.25); }
.pw-safety__easter {
  display:flex; align-items:center; gap:12px; justify-content:center;
  min-height:51px; border-top:1px solid var(--pw-border);
}
.pw-safety__easter > span { font-size:11px; font-weight:800; letter-spacing:.1em; opacity:.75; }
.pw-safety__easter button {
  border:1px solid var(--pw-border); border-radius:5px;
  background:transparent; color:inherit; padding:4px 10px;
  min-width:45px; min-height:44px; font-size:23px; cursor:pointer;
}
.pw-safety__easter button:hover,.pw-safety__easter button.is-active {border-color:var(--pw-red);}
.pw-safety__detail {
  display:flex; border-radius: 18px; flex-direction:column; justify-content:center; min-width:0;
  border-left:2px solid var(--pw-red);
      background: #00000047; padding:12px 0 12px clamp(18px,2.5vw,35px);
}
.pw-safety__badge,.pw-archive__fileno { font-size:12px; font-weight:800; letter-spacing:.14em; color:var(--pw-red); }
.pw-safety__icon { font-size:clamp(45px,5.3vw,80px); line-height:1.4; margin:16px 0 5px; }
.pw-safety__title,.pw-archive__title {margin:0 0 17px; font:inherit; font-size:clamp(24px,2.4vw,39px); font-weight:800; line-height:1.12; letter-spacing:-.025em;}
.pw-safety__text,.pw-archive__text {margin:0;     margin-top: 20px !important; font:inherit; font-size:clamp(15px,1.2vw,18px); line-height:1.6;}
.pw-safety__sources,.pw-archive__sources {display:flex; flex-wrap:wrap; align-items:center; gap:8px 15px; margin-top:21px; font-size:13px;}
.pw-safety__sources a,.pw-archive__sources a {color:inherit; text-decoration:underline; text-decoration-color:var(--pw-red); text-underline-offset:4px;}
.pw-safety__foot {margin-top:auto; padding-top:20px; opacity:.62; font-size:10px; line-height:1.5; letter-spacing:.08em;}

/* === ABRISS: ANKLICKBARER AKTENSCHRANK === */
.pw-archive {
  --pw-red:#e02026; --pw-border:rgba(255,255,255,.22);
  display:grid;
  grid-template-columns:minmax(240px,.43fr) minmax(0,.95fr);
  gap:clamp(18px,3vw,48px);
  flex:1 0 auto; min-height:420px; padding:9px 0 14px;
}
.pw-archive__index {display:flex; flex-direction:column; min-width:0;}
.pw-archive__index-title span {color:var(--pw-red); white-space:nowrap;}
.pw-archive__cases {display:grid; grid-auto-rows:minmax(56px,auto); gap:5px; padding-top:11px;}
.pw-archive__case {
  display:grid; grid-template-columns:29px minmax(0,1fr) 17px; gap:10px; align-items:center;
  min-height:56px; padding:9px 11px; text-align:left;
  border:0; border-left:3px solid transparent; border-bottom:1px solid var(--pw-border);
  background:transparent; color:inherit; font:inherit; cursor:pointer;
}
.pw-archive__case > span {color:var(--pw-red);font-size:12px;font-weight:800;}
.pw-archive__case strong {font-size:clamp(13px,1.1vw,16px);font-weight:650;}
.pw-archive__case i {font-style:normal;opacity:.6;}
.pw-archive__case:hover,.pw-archive__case.is-active {border-left-color:var(--pw-red);background:rgba(255,255,255,.2);}
.pw-archive__file {
  display:flex;flex-direction:column; min-width:0;     padding: 15px clamp(18px, 2vw, 30px);
  border-left:1px solid var(--pw-border);background: rgb(0 0 0 / 25%);
    border-radius: 18px;
}
.pw-archive__meta {display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;}
.pw-archive__tag {font-size:11px;     background: rgb(0 0 0 / 25%);
    border-radius: 18px;font-weight:800; letter-spacing:.1em; border:1px solid var(--pw-red); padding:5px 9px;}
.pw-archive__symbol {font-size:clamp(57px,7vw,108px);line-height:1.4; margin:9px 0;}
.pw-archive__title {font-size:clamp(26px,2.8vw,46px);max-width:700px;}
.pw-archive__text {max-width:730px;}
.pw-archive__end {display:flex;flex-wrap:wrap;gap:9px 14px;margin-top:auto;padding-top:22px;font-size:12px;border-top:1px solid var(--pw-border);}
.pw-archive__end::first-letter {color:var(--pw-red);}
.pw-archive__end-text {opacity:.75;}

/* FOKUS */
.pw-safety button:focus-visible,.pw-safety a:focus-visible,
.pw-archive button:focus-visible,.pw-archive a:focus-visible {
  outline:3px solid #e02026;outline-offset:3px;
}

@media(max-width:900px) {
  .pw-safety {grid-template-columns:minmax(0,1fr);min-height:0;}
  .pw-safety__drawing {min-height:clamp(245px,47vw,380px);}
  .pw-safety__detail {border-left:0;border-top:2px solid var(--pw-red);padding:17px 0;}
  .pw-safety__icon {font-size:48px;margin:6px 0;}
  .pw-safety__foot {margin-top:10px;padding-top:8px;}
  .pw-archive {grid-template-columns:minmax(0,1fr);min-height:0;gap:14px;}
  .pw-archive__cases {grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;}
  .pw-archive__file {border-left:0;border-top:2px solid var(--pw-red);padding:14px;}
  .pw-archive__symbol {font-size:52px;}
  .pw-archive__end {margin-top:20px;}
}
@media(max-width:420px){
  .pw-safety__drawing {min-height:228px;}
  .pw-safety__spot {width:42px;height:42px;font-size:21px;}
  .pw-safety__label,.pw-archive__index-title {font-size:11px;}
  .pw-safety__easter {gap:6px;}
  .pw-safety__easter > span {font-size:10px;}
  .pw-archive__case {grid-template-columns:22px minmax(0,1fr);gap:6px;padding:8px 4px;min-height:61px;}
  .pw-archive__case i {display:none;}
  .pw-archive__case strong {font-size:13px;}
}
@media(prefers-reduced-motion:reduce){.pw-safety__spot{transition:none;}}

/* =====================================================
   SCHNEEFANG & ABRISS – WINDOW-POSITION UND GRÖSSE
   ===================================================== */

#leistungCard:has(.pw-safety),
#leistungCard:has(.pw-archive) {
  box-sizing: border-box !important;

  position: fixed !important;

  top: 135px !important;
  left: 24px !important;
  right: auto !important;
  bottom: auto !important;

  width: calc(100vw - 48px) !important;
  max-width: calc(100vw - 48px) !important;

  height: calc(100dvh - 150px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 150px) !important;

  transform: none !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
}

/* INNERER FENSTERBEREICH */

#leistungCard:has(.pw-safety) .leistung-card-content,
#leistungCard:has(.pw-archive) .leistung-card-content {
  display: flex;
  flex-direction: column;

  flex: 1 1 0;
  min-height: 0;

  max-height: none !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* INHALT */

#leistungCard:has(.pw-safety) #leistungCardBody,
#leistungCard:has(.pw-archive) #leistungCardBody {
  display: flex;
  flex-direction: column;

  flex: 1 0 auto;
  min-height: 0;
}

.pw-archive__heading {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 12px 0 22px;
}

.pw-archive__heading .pw-archive__symbol {
  flex: none;
  margin: 0;
  line-height: 1;
}

.pw-archive__heading .pw-archive__title {
  margin: 0;
  min-width: 0;
}

@media (max-width: 540px) {
  .pw-archive__heading {
    gap: 14px;
  }

  .pw-archive__heading .pw-archive__symbol {
    font-size: 48px;
  }
}

/* ABRISS – KEINE SCROLLLEISTE AUF DESKTOP */

@media (min-width: 1100px) and (min-height: 850px) {

  #leistungCard:has(.pw-archive) .leistung-card-content,
  #leistungCard:has(.pw-archive) #leistungCardBody {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #leistungCard:has(.pw-archive) #leistungCardBody {
    flex: 1 1 0 !important;
  }

  #leistungCard:has(.pw-archive) .pw-archive {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    padding-bottom: 0;
  }

}

/* =====================================================
   SCHNEEFANG – INTERAKTIVE DACHLAWINE
   ===================================================== */

/* WINDOW-MASSE */

#leistungCard:has(.pw-winter) {
  box-sizing: border-box !important;

  position: fixed !important;

  top: 135px !important;
  left: 24px !important;
  right: auto !important;
  bottom: auto !important;

  width: calc(100vw - 48px) !important;
  max-width: calc(100vw - 48px) !important;

  height: calc(100dvh - 150px) !important;
  max-height: calc(100dvh - 150px) !important;
  min-height: 0 !important;

  transform: none !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
}

#leistungCard:has(.pw-winter) .leistung-card-content {
  display: flex;
  flex-direction: column;

  flex: 1 1 0;
  min-height: 0;

  max-height: none !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#leistungCard:has(.pw-winter) #leistungCardBody {
  display: flex;
  flex-direction: column;

  flex: 1 1 0;
  min-height: 0;
}

#leistungCard:has(.pw-winter) #leistungCardBody > p {
  margin-bottom: 12px !important;
}


/* HAUPTLAYOUT */

.pw-winter,
.pw-winter * {
  box-sizing: border-box;
}

.pw-winter {
  --pw-w-red: #e02026;
  --pw-w-border: rgba(255,255,255,.22);

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(290px, .8fr);

  flex: 1 1 0;

  min-height: 0;
  min-width: 0;

  gap: clamp(17px, 2.2vw, 34px);
  padding-bottom: 4px;

  color: inherit;
  font-family: inherit;
}


/* LINKE SEITE */

.pw-winter__playground {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 0;
}

.pw-winter__overline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  gap: 8px;
  padding: 9px 0 12px;

  border-bottom: 1px solid var(--pw-w-border);

  font-size: 12px;
  letter-spacing: .12em;
}

.pw-winter__overline strong {
  font-weight: 800;
}

.pw-winter__overline span {
  opacity: .68;
  font-size: 11px;
}


/* ANIMIERTE ZEICHNUNG */

.pw-winter__stage {
  position: relative;

  flex: 1 1 0;

  min-height: 0;
  min-width: 0;

  overflow: hidden;

  background: linear-gradient(
    180deg,
    rgba(125,139,159,.11),
    rgba(255,255,255,.008) 70%
  );
}

.pw-winter__art {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 260px;
}

.pw-winter__svg-caption {
  fill: #bfbfc4;

  font: 700 12px Arial, sans-serif;
  letter-spacing: 3px;
}


/* SCHNEEFANG EIN / AUS */

.pw-winter__guard {
  opacity: 1;
  transition: opacity .22s ease;
}

.pw-winter.is-open .pw-winter__guard {
  opacity: 0;
}


/* SCHNEE */

.pw-winter__roof-snow {
  transition: opacity .4s ease;
}

.pw-winter__avalanche,
.pw-winter__puff {
  opacity: 0;
}

.pw-winter__snowfall {
  animation: pw-winter-snow 6s linear infinite;
  opacity: .8;
}


/* RUMMS-EFFEKT */

.pw-winter__boom {
  position: absolute;

  right: 3%;
  bottom: 17%;

  opacity: 0;
  pointer-events: none;

  font-size: clamp(25px, 4vw, 57px);
  line-height: 1;

  font-weight: 1000;
  letter-spacing: -.06em;

  color: #fff;

  text-shadow: 3px 3px 0 var(--pw-w-red);

  transform: scale(.5) rotate(-12deg);
}


/* ANIMATIONEN AKTIVIEREN */

.pw-winter.is-running.is-open .pw-winter__avalanche {
  animation:
    pw-winter-slide
    1.7s
    cubic-bezier(.25,.5,.45,1)
    both;
}

.pw-winter.is-running.is-open .pw-winter__roof-snow {
  opacity: .15;
}

.pw-winter.is-running.is-open .pw-winter__puff {
  animation:
    pw-winter-puff
    .7s
    1.12s
    ease-out
    both;
}

.pw-winter.is-running.is-open .pw-winter__boom {
  animation:
    pw-winter-boom
    .9s
    1.12s
    ease-out
    both;
}

.pw-winter.is-running:not(.is-open) .pw-winter__roof-snow {
  animation:
    pw-winter-jiggle
    .54s
    ease-in-out
    2;
}


/* FALLENDE SCHNEEFLOCKEN */

@keyframes pw-winter-snow {
  from {
    transform: translateY(-25px);
  }

  to {
    transform: translateY(145px);
  }
}


/* DACHLAWINE */

@keyframes pw-winter-slide {

  0% {
    opacity: 0;
    transform: translate(-75px,-50px) rotate(-7deg);
  }

  12% {
    opacity: 1;
  }

  55% {
    opacity: 1;
    transform: translate(107px,70px) rotate(8deg);
  }

  73% {
    opacity: 1;
    transform: translate(190px,160px) rotate(19deg);
  }

  100% {
    opacity: 0;
    transform: translate(250px,440px) rotate(45deg);
  }

}


/* SCHNEEWOLKE BEIM AUFPRALL */

@keyframes pw-winter-puff {

  0% {
    opacity: 0;
    transform: scale(.3) translate(-80px,-30px);
  }

  25% {
    opacity: .9;
  }

  100% {
    opacity: 0;
    transform: scale(2.3) translate(40px,-5px);
  }

}


/* RUMMS! */

@keyframes pw-winter-boom {

  0% {
    opacity: 0;
    transform: scale(.35) rotate(-18deg);
  }

  25% {
    opacity: 1;
    transform: scale(1.1) rotate(-6deg);
  }

  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.2) rotate(-2deg);
  }

}


/* SCHNEE BLEIBT HÄNGEN */

@keyframes pw-winter-jiggle {

  0%, 100% {
    transform: translateY(0);
  }

  35% {
    transform: translateY(4px);
  }

  65% {
    transform: translateY(-3px);
  }

}


/* BEDIENUNG */

.pw-winter__console {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;

  gap: 10px;
  padding-top: 12px;
}

.pw-winter__toggle {
  display: flex;

  flex: 1 1 240px;

  min-width: 0;
  gap: 6px;
}

.pw-winter__toggle button,
.pw-winter__go,
.pw-winter__radio-bottom button {
  min-height: 44px;

  cursor: pointer;

  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .015em;

  border: 1px solid var(--pw-w-border);
  border-radius: 5px;

  color: inherit;
  background: transparent;
}

.pw-winter__toggle button {
  flex: 1 1 0;

  padding: 8px 9px;

  white-space: nowrap;
}

.pw-winter__toggle button.is-active {
  border-color: var(--pw-w-red);
  box-shadow: inset 0 -3px 0 var(--pw-w-red);
}

.pw-winter__go {
  flex: 0 0 auto;

  padding: 9px 21px;

  border-color: var(--pw-w-red);
}

.pw-winter__go:hover,
.pw-winter__radio-bottom button:hover {
  border-color: #ff5257;
}


/* ERGEBNIS */

.pw-winter__result {
  margin: 0 !important;
  padding: 10px 0 3px;

  min-height: 37px;

  font-size: 14px;
  line-height: 1.4;

  opacity: .85;
}


/* =====================================================
   RECHTS: DACHFUNK
   ===================================================== */

.pw-winter__radio {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 0;

  border-left: 1px solid var(--pw-w-border);

  padding-left: clamp(15px, 2vw, 32px);
}

.pw-winter__radio-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  gap: 8px;
  padding: 9px 0 12px;

  border-bottom: 1px solid var(--pw-w-border);

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
}

.pw-winter__radio-top span:first-child {
  color: #f04449;
}


/* FACT-ANZEIGE */

.pw-winter__radio-main {
  display: flex;
  flex-direction: column;
  justify-content: center;

  flex: 1 1 0;
  min-height: 0;

  padding: 10px 0;
}

.pw-winter__fact-icon {
  font-size: clamp(54px, 5.4vw, 95px);
  line-height: 1.5;
}

.pw-winter__fact-subtitle {
  color: #f04449;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
}

.pw-winter__fact-title {
  margin: 15px 0 12px;

  font-size: clamp(25px, 2.25vw, 37px);
  font-weight: 800;

  letter-spacing: -.035em;
  line-height: 1.15;

  color: inherit;
}

.pw-winter .pw-winter__fact-text {
  margin: 0 !important;

  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
}


/* QUELLEN */

.pw-winter__fact-source {
  font-size: 12px;
  margin-top: 15px;
}

.pw-winter__fact-source:empty {
  display: none;
}

.pw-winter__fact-source a {
  color: inherit;

  text-underline-offset: 3px;
  text-decoration-color: var(--pw-w-red);
}


/* DACHFUNK-NAVIGATION */

.pw-winter__radio-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
  padding: 13px 0 6px;

  border-top: 1px solid var(--pw-w-border);
}

.pw-winter__radio-bottom button {
  padding: 9px 18px;

  border-color: var(--pw-w-red);
}


/* ANIMIERTE RADIO-BALKEN */

.pw-winter__bars {
  display: flex;
  align-items: center;

  gap: 4px;
  height: 22px;
}

.pw-winter__bars i {
  display: block;

  width: 3px;
  height: 10px;

  background: var(--pw-w-red);

  animation:
    pw-winter-bars
    .65s
    ease-in-out
    infinite
    alternate;
}

.pw-winter__bars i:nth-child(2) {
  height: 20px;
  animation-delay: .12s;
}

.pw-winter__bars i:nth-child(3) {
  height: 13px;
  animation-delay: .26s;
}

.pw-winter__bars i:nth-child(4) {
  height: 18px;
  animation-delay: .18s;
}

.pw-winter__bars i:nth-child(5) {
  height: 7px;
  animation-delay: .4s;
}

@keyframes pw-winter-bars {
  to {
    height: 4px;
  }
}


/* TASTATUR */

.pw-winter button:focus-visible,
.pw-winter a:focus-visible {
  outline: 3px solid var(--pw-w-red);
  outline-offset: 3px;
}


/* =====================================================
   KLEINERE DESKTOPS
   ===================================================== */

@media (max-width: 900px) {

  .pw-winter {
    grid-template-columns:
      minmax(0, 1.3fr)
      minmax(245px, .9fr);

    gap: 14px;
  }

  .pw-winter__radio {
    padding-left: 14px;
  }

  .pw-winter__console {
    gap: 7px;
  }

  .pw-winter__go {
    flex: 1 1 100%;
  }

}


/* =====================================================
   SMARTPHONES
   ===================================================== */

@media (max-width: 700px) {

  .pw-winter {
    display: flex;
    flex-direction: column;

    flex: 0 0 auto;
    min-height: 0;

    gap: 18px;
  }

  .pw-winter__playground {
    flex: none;
  }

  .pw-winter__stage {
    height: clamp(210px, 56vw, 360px);
    flex: none;
  }

  .pw-winter__art {
    min-height: 0;
  }

  .pw-winter__radio {
    border-left: none;
    padding-left: 0;

    border-top: 1px solid var(--pw-w-border);
  }

  .pw-winter__radio-main {
    flex: none;
    min-height: auto;

    justify-content: flex-start;

    padding: 17px 0 24px;
  }

  .pw-winter__fact-icon {
    font-size: 57px;
  }

  .pw-winter__result {
    min-height: 0;
  }

}


/* SEHR SCHMALE DISPLAYS */

@media (max-width: 365px) {

  .pw-winter__overline span {
    display: none;
  }

  .pw-winter__toggle button {
    font-size: 11px;
    padding: 7px 5px;
  }

}


/* REDUZIERTE BEWEGUNG */

@media (prefers-reduced-motion: reduce) {

  .pw-winter__snowfall,
  .pw-winter__bars i {
    animation: none !important;
  }

  .pw-winter__avalanche,
  .pw-winter__puff,
  .pw-winter__boom,
  .pw-winter__roof-snow {
    animation-duration: .01ms !important;
  }

}

/* =========================================
   SCHNEEFANG – FOTO LINKS + SCHNEE ANIMATION
   ========================================= */

.pw-safety__left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

.pw-safety__label {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;

  font-size: 12px;
  line-height: 1.25;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .9;
}

.pw-safety__label span {
  opacity: .62;
  letter-spacing: .08em;
  font-weight: 600;
}

.pw-safety__hero {
  position: relative;
  margin: 0;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;

  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;

    background: linear-gradient(180deg, rgba(0, 0, 0, .06), rgb(8 0 84 / 24%)), rgba(255, 255, 255, .06);

  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 16px 34px rgba(0,0,0,.18);
}

.pw-safety__hero-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: contain;
  object-position: center center;
  filter: saturate(.96) contrast(1.02);
}

.pw-safety__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,14,20,.08) 0%, rgba(10,14,20,.14) 36%, rgba(10,14,20,.58) 100%);
  pointer-events: none;
  z-index: 1;
}

.pw-safety__hero-overlay {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 3;

  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pw-safety__hero-kicker {
  align-self: flex-start;
  padding: 6px 10px;

  font-size: 11px;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;

  color: #fff;
  background: rgba(224, 32, 38, .92);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(224,32,38,.28);
}

.pw-safety__hero-title {
  margin: 0;

  max-width: 22ch;

  font-size: clamp(24px, 2.8vw, 40px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;

  text-shadow:
    0 2px 10px rgba(0,0,0,.35),
    0 12px 28px rgba(0,0,0,.32);
}

/* SCHNEE ANIMATION ÜBER DEM FOTO */

.pw-safety__snow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.pw-safety__flake {
  position: absolute;
  top: -12%;
  color: rgba(255,255,255,.92);
  text-shadow:
    0 0 10px rgba(255,255,255,.32),
    0 0 22px rgba(255,255,255,.18);
  user-select: none;
  will-change: transform, opacity;
  animation-name: pwSnowFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* einzelne Flocken */
.flake-1  { left: 4%;  font-size: 18px; animation-duration: 10s; animation-delay: -2s; opacity: .72; }
.flake-2  { left: 11%; font-size: 12px; animation-duration: 13s; animation-delay: -5s; opacity: .62; }
.flake-3  { left: 18%; font-size: 21px; animation-duration: 11s; animation-delay: -7s; opacity: .84; }
.flake-4  { left: 28%; font-size: 14px; animation-duration: 15s; animation-delay: -1s; opacity: .58; }
.flake-5  { left: 37%; font-size: 17px; animation-duration: 12s; animation-delay: -6s; opacity: .74; }
.flake-6  { left: 46%; font-size: 22px; animation-duration: 14s; animation-delay: -3s; opacity: .8; }
.flake-7  { left: 56%; font-size: 13px; animation-duration: 16s; animation-delay: -10s; opacity: .6; }
.flake-8  { left: 64%; font-size: 18px; animation-duration: 10.5s; animation-delay: -4s; opacity: .83; }
.flake-9  { left: 73%; font-size: 15px; animation-duration: 13.5s; animation-delay: -9s; opacity: .68; }
.flake-10 { left: 82%; font-size: 20px; animation-duration: 11.5s; animation-delay: -8s; opacity: .76; }
.flake-11 { left: 90%; font-size: 14px; animation-duration: 15.5s; animation-delay: -11s; opacity: .56; }
.flake-12 { left: 96%; font-size: 19px; animation-duration: 12.5s; animation-delay: -6.5s; opacity: .8; }

@keyframes pwSnowFall {
  0% {
    top: -12%;
    transform: translateX(0) rotate(0deg);
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  50% {
    top: 50%;
    transform: translateX(12px) rotate(140deg);
    opacity: .95;
  }

  100% {
    top: 112%;
    transform: translateX(-14px) rotate(300deg);
    opacity: 0;
  }

}

/* EASTEREGG-LEISTE */
.pw-safety__easter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pw-safety__easter > span {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .78;
}

.pw-safety__easter > button {
  min-width: 42px;
  min-height: 42px;
  padding: 0 12px;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;

  background: rgba(255,255,255,.08);
  color: inherit;
  font: inherit;
  font-size: 20px;
  cursor: pointer;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.pw-safety__easter > button:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.13);
  border-color: rgba(224,32,38,.7);
}

.pw-safety__easter > button:focus-visible {
  outline: 3px solid #ef4b52;
  outline-offset: 2px;
}

/* MOBILE */
@media (max-width: 900px) {
  .pw-safety__hero-image {
    min-height: 280px;
  }

  .pw-safety__hero-overlay {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .pw-safety__hero-title {
    font-size: clamp(22px, 7vw, 34px);
    max-width: 18ch;
  }
}

@media (max-width: 520px) {
  .pw-safety__hero-image {
    min-height: 240px;
  }

  .pw-safety__hero-kicker {
    font-size: 10px;
    padding: 5px 9px;
  }

  .pw-safety__hero-title {
    font-size: clamp(20px, 7.2vw, 28px);
    line-height: 1.04;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pw-safety__flake {
    animation: none !important;
    opacity: .45;
  }
}



/* =====================================================
   REPARATUREN & STURMSCHÄDEN – LECKSUCHE
   ===================================================== */

/* WINDOW */

#leistungCard:has(.pw-leak) {
  box-sizing: border-box !important;
  position: fixed !important;

  top: 135px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;

  transform: translateX(-50%) !important;

  width: calc(100vw - 48px) !important;
  max-width: calc(100vw - 48px) !important;

  height: calc(100dvh - 150px) !important;
  max-height: calc(100dvh - 150px) !important;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
}

#leistungCard:has(.pw-leak) .leistung-card-content {
  display: flex;
  flex-direction: column;

  flex: 1 1 0;
  min-height: 0;

  max-height: none !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#leistungCard:has(.pw-leak) #leistungCardBody {
  display: flex;
  flex-direction: column;

  flex: 1 1 0;
  min-height: 0;
}

#leistungCard:has(.pw-leak) #leistungCardBody > p {
  margin-bottom: 12px !important;
}


/* =====================================================
   HAUPTLAYOUT
   ===================================================== */

.pw-leak,
.pw-leak * {
  box-sizing: border-box;
}

.pw-leak {
  --leak-red: #e02026;
  --leak-line: rgba(255,255,255,.23);

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(310px, .8fr);

  gap: clamp(18px, 2.5vw, 40px);

  flex: 1 1 0;

    background: rgb(0 0 0 / 25%);
    min-height: 0;
    padding: 30px;
  min-width: 0;

  font: inherit;
  color: inherit;
}


/* =====================================================
   LINKS: BILDBEREICH
   ===================================================== */

.pw-leak__left {
  display: flex;
  flex-direction: column;

  min-height: 0;
  min-width: 0;
}

.pw-leak__topline,
.pw-leak__righttop {
  display: flex;
  flex-wrap: wrap;

  align-items: center;
  justify-content: space-between;

  gap: 8px;

  padding: 6px 0 12px;

  border-bottom: 1px solid var(--leak-line);

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
}

.pw-leak__phase {
  color: var(--leak-red);
  font-size: 11px;
}


/* BILD POSITIONIEREN */

.pw-leak__scene {
  display: grid;
  place-items: center;

  flex: 1 1 0;

  min-height: 0;
  min-width: 0;

  overflow: hidden;
}

.pw-leak__frame {
  position: relative;

  height: 100%;
  max-width: 100%;

  aspect-ratio: 3 / 2;

  overflow: hidden;
  isolation: isolate;
}

.pw-leak__photo {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;
}


/* =====================================================
   WASSERFLECKEN – NACHEINANDER SICHTBAR
   ===================================================== */

.pw-leak__damage {
  opacity: 0;

  transition: opacity 1s ease;
}

/* SCHORNSTEIN */

.pw-leak__damage--chimney {
  -webkit-mask-image:
    radial-gradient(
      ellipse 16% 39% at 32% 49%,
      #000 35%,
      transparent 95%
    );

  mask-image:
    radial-gradient(
      ellipse 16% 39% at 32% 49%,
      #000 35%,
      transparent 95%
    );
}

/* DECKE */

.pw-leak__damage--ceiling {
  -webkit-mask-image:
    radial-gradient(
      ellipse 19% 18% at 52% 21%,
      #000 30%,
      transparent 95%
    );

  mask-image:
    radial-gradient(
      ellipse 19% 18% at 52% 21%,
      #000 30%,
      transparent 95%
    );
}

/* RECHTE WAND */

.pw-leak__damage--wall {
  -webkit-mask-image:
    radial-gradient(
      ellipse 24% 22% at 82% 72%,
      #000 30%,
      transparent 95%
    );

  mask-image:
    radial-gradient(
      ellipse 24% 22% at 82% 72%,
      #000 30%,
      transparent 95%
    );
}

/* SICHTBAR SCHALTEN */

.pw-leak.has-chimney .pw-leak__damage--chimney,
.pw-leak.has-ceiling .pw-leak__damage--ceiling,
.pw-leak.has-wall .pw-leak__damage--wall {
  opacity: 1;
}


/* =====================================================
   ANIMIERTER REGEN
   ===================================================== */

.pw-leak__rain {
  position: absolute;
  inset: 0;

  z-index: 2;

  pointer-events: none;
  opacity: 0;

  background-image:
    repeating-linear-gradient(
      108deg,
      transparent 0 24px,
      rgba(225,239,255,.35) 25px,
      transparent 27px,
      transparent 65px
    );

  background-size: 190px 240px;

  animation:
    pw-leak-rain .55s linear infinite;

  transition: opacity .3s;
}

.pw-leak.is-storming .pw-leak__rain {
  opacity: .48;
}

@keyframes pw-leak-rain {
  to {
    background-position: -95px 240px;
  }
}


/* =====================================================
   BLITZE
   ===================================================== */

.pw-leak__flash {
  position: absolute;
  inset: 0;

  z-index: 3;

  pointer-events: none;

  background: white;
  opacity: 0;
}

.pw-leak.is-storming .pw-leak__flash {
  animation:
    pw-leak-flash 5s linear infinite;
}

@keyframes pw-leak-flash {
  0%, 9%, 12%, 100% {
    opacity: 0;
  }

  9.5% {
    opacity: .33;
  }

  10.3% {
    opacity: 0;
  }

  11% {
    opacity: .25;
  }
}


/* =====================================================
   ANKLICKBARE SCHADENSSTELLEN
   ===================================================== */

.pw-leak__spot {
  position: absolute;
  z-index: 5;

  left: var(--x);
  top: var(--y);

  transform: translate(-50%, -50%);

  display: grid;
  place-items: center;

  width: 46px;
  height: 46px;

  padding: 0;

  border: 2px solid white;
  border-radius: 50%;

  background: #b5121a;
  color: white;

  font: 800 17px/1 Arial, sans-serif;

  box-shadow:
    0 0 0 6px rgba(224,32,38,.18),
    0 3px 14px #0006;

  cursor: pointer;

  visibility: hidden;
  opacity: 0;

  transition: opacity .4s;
}

/* NACH DEM UNWETTER EINBLENDEN */

.pw-leak.is-searching .pw-leak__spot {
  visibility: visible;
  opacity: 1;
}

/* AKTIV */

.pw-leak__spot.is-active {
  background: white;
  color: #c8141e;
  border-color: #e02026;
}

/* ERLEDIGTE SPUR */

.pw-leak__spot.is-found::after {
  content: "✓";

  position: absolute;
  right: -10px;
  bottom: -9px;

  display: grid;
  place-items: center;

  width: 21px;
  height: 21px;

  background: #222;
  color: white;

  border: 1px solid white;
  border-radius: 50%;

  font-size: 12px;
}


/* =====================================================
   RÖNTGENBLICK – ANIMIERTE WASSERWEGE
   ===================================================== */

.pw-leak__xray {
  position: absolute;
  inset: 0;

  z-index: 4;

  width: 100%;
  height: 100%;

  pointer-events: none;

  opacity: 0;

  transition: opacity .35s;
}

.pw-leak.is-xray .pw-leak__xray {
  opacity: 1;
}

.pw-leak__xray path {
  fill: none;

  stroke: #8edffc;
  stroke-width: 8;

  stroke-linejoin: round;
  stroke-linecap: round;

  stroke-dasharray: 15 16;

  filter: drop-shadow(0 0 4px #000);

  animation:
    pw-leak-flow 1.3s linear infinite;
}

@keyframes pw-leak-flow {
  to {
    stroke-dashoffset: -62;
  }
}


/* =====================================================
   BUTTONS
   ===================================================== */

.pw-leak__controls {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
  padding-top: 10px;
}

.pw-leak__controls button,
.pw-leak__answers button {
  min-height: 44px;

  padding: 9px 15px;

  border: 1px solid var(--leak-line);
  border-radius: 5px;

  background: transparent;
  color: inherit;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;

  cursor: pointer;
}

.pw-leak__controls button:first-child {
  border-color: var(--leak-red);
}

.pw-leak__controls button:hover:not(:disabled),
.pw-leak__answers button:hover:not(:disabled) {
  border-color: var(--leak-red);
}

.pw-leak button:disabled {
  opacity: .4;
  cursor: default;
}

.pw-leak button:focus-visible {
  outline: 3px solid var(--leak-red);
  outline-offset: 3px;
}

.pw-leak__note {
  margin: 8px 0 0 !important;

  font-size: 12px;
  line-height: 1.4;

  opacity: .7;
}


/* =====================================================
   RECHTS: LECK-DETEKTIV
   ===================================================== */

.pw-leak__right {
  display: flex;
  flex-direction: column;

  min-height: 0;
  min-width: 0;

  padding-left: clamp(16px, 2vw, 30px);

  border-left: 1px solid var(--leak-line);
}

.pw-leak__righttop strong {
  color: var(--leak-red);
  font-size: 12px;
}

.pw-leak__case {
  padding: clamp(10px, 2vw, 28px) 0 12px;
}

.pw-leak__icon {
  display: block;

  font-size: clamp(50px, 6vw, 85px);
  line-height: 1.3;
}

.pw-leak__label {
  display: block;

  margin: 10px 0;

  color: var(--leak-red);

  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.pw-leak__title {
  margin: 0 0 15px;

  color: inherit;

  font-size: clamp(25px, 2.4vw, 39px);
  line-height: 1.11;

  letter-spacing: -.035em;
}

.pw-leak__description {
  margin: 0 !important;

  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.53;
}


/* ANTWORTMÖGLICHKEITEN */

.pw-leak__answers {
  display: grid;
  gap: 8px;
}

.pw-leak__answers:empty {
  display: none;
}

.pw-leak__answers button {
  text-align: left;
  width: 100%;
}

.pw-leak__answers button.is-correct {
  border-color: var(--leak-red);
}


/* ERKLÄRUNG */

.pw-leak__feedback {
  margin: 12px 0 0 !important;

  min-height: 0;

  font-size: 14px;
  line-height: 1.5;
}


/* FORTSCHRITT */

.pw-leak__footer {
  margin-top: auto;
  padding-top: 15px;
}

.pw-leak__dots {
  display: flex;
  gap: 7px;

  margin-bottom: 14px;
}

.pw-leak__dots i {
  display: block;

  width: 26px;
  height: 4px;

  background: rgba(255,255,255,.24);
}

.pw-leak__dots i.is-found {
  background: var(--leak-red);
}

.pw-leak__footer p {
  margin: 0 !important;

  padding-top: 12px;

  border-top: 1px solid var(--leak-line);

  font-size: 13px;
  line-height: 1.55;

  opacity: .72;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 850px) {

  .pw-leak {
    grid-template-columns: 1fr;

    gap: 18px;

    flex: 0 0 auto;
    min-height: 0;
  }

  .pw-leak__scene {
    flex: none;

    min-height: 0;
    height: auto;
  }

  .pw-leak__frame {
    height: auto;
    width: 100%;
    max-width: 100%;

    aspect-ratio: 3 / 2;
  }

  .pw-leak__right {
    padding: 14px 0 0;

    border-left: none;
    border-top: 1px solid var(--leak-line);
  }

  .pw-leak__case {
    padding: 12px 0;
  }

  .pw-leak__icon {
    font-size: 48px;
  }

  .pw-leak__title {
    font-size: 27px;
  }

  .pw-leak__spot {
    width: 40px;
    height: 40px;
  }

  .pw-leak__footer {
    padding-top: 18px;
  }

}

@media (max-width: 380px) {

  .pw-leak__controls button {
    flex: 1 1 auto;
    padding: 8px;
  }

  .pw-leak__topline,
  .pw-leak__righttop {
    font-size: 11px;
  }

  .pw-leak__spot {
    width: 36px;
    height: 36px;
  }

}


/* REDUZIERTE BEWEGUNG */

@media (prefers-reduced-motion: reduce) {

  .pw-leak__rain,
  .pw-leak__flash,
  .pw-leak__xray path {
    animation: none !important;
  }

  .pw-leak__damage,
  .pw-leak__xray {
    transition: none !important;
  }

}

/* LECK-DETEKTIV – ICON UND TITEL NEBENEINANDER */

.pw-leak__case {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 22px;
  align-items: center;
}

.pw-leak__icon {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
}

.pw-leak__label {
  grid-column: 2;
  grid-row: 1;
}

.pw-leak__title {
  grid-column: 2;
  grid-row: 2;
}

.pw-leak__description {
  grid-column: 1 / -1;
  margin-top: 18px !important;
}

/* LECK-DETEKTIV – FORTSCHRITT OBEN RECHTS */

.pw-leak__progress {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pw-leak__progress .pw-leak__dots {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  flex: none;
}

.pw-leak__progress .pw-leak__count {
  white-space: nowrap;
}

#leistungCard:has(.pw-winter)::before {
  content: none !important;
  display: none !important;
}

/* =====================================================
   GAUBEN – GRÖSSER, SCROLLBAR, BILDTITEL VERSTECKT
   ===================================================== */

/* SCROLLEN REPARIEREN */

#leistungCard:has(.pw-gauben) {
  height: calc(100dvh - 150px) !important;
  max-height: calc(100dvh - 150px) !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
}

#leistungCard:has(.pw-gauben) .leistung-card-content {
  flex: 1 1 0 !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch;
}

#leistungCard:has(.pw-gauben) #leistungCardBody {
  flex: 0 0 auto !important;

  height: auto !important;
  max-height: none !important;

  overflow: visible !important;
}


/* DESKTOP – 3 × 3 MIT NAMEN RECHTS */

#leistungCard:has(.pw-gauben) .pw-gauben {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr) 290px !important;

  grid-template-areas:
    "top top"
    "board head"
    "board bank"
    "feedback feedback" !important;

  grid-template-rows: auto auto auto auto !important;

  gap: 10px 22px !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
}

#leistungCard:has(.pw-gauben) .pw-gauben-top {
  grid-area: top !important;
  margin: 0 0 5px !important;
}

#leistungCard:has(.pw-gauben) .pw-gauben-board {
  grid-area: board !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  width: 100% !important;
  max-width: none !important;

  gap: 12px !important;
  margin: 0 !important;
}

#leistungCard:has(.pw-gauben) .pw-gauben-tile {
  width: 100% !important;
  min-width: 0 !important;

  flex: none !important;
}


/* ORIGINALBILDER RICHTIG BESCHNEIDEN */

#leistungCard:has(.pw-gauben) .pw-gauben-photo {
  width: 100% !important;

  aspect-ratio: 460 / 278 !important;

  overflow: hidden !important;
}

#leistungCard:has(.pw-gauben) .pw-gauben-photo img {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  max-width: none !important;

  object-fit: initial !important;
}


/* NAMENSAUSWAHL RECHTS */

#leistungCard:has(.pw-gauben) .pw-gauben-bank-header {
  grid-area: head !important;
  margin: 0 !important;
}

#leistungCard:has(.pw-gauben) .pw-gauben-bank {
  grid-area: bank !important;

  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;

  align-items: stretch !important;
  justify-content: flex-start !important;

  width: 100% !important;
  height: 100% !important;

  gap: 7px !important;
  margin: 0 !important;
}

#leistungCard:has(.pw-gauben) .pw-gauben-bank > .pw-gauben-name {
  flex: 1 1 0 !important;
  min-height: 44px !important;
}

#leistungCard:has(.pw-gauben) .pw-gauben-feedback {
  grid-area: feedback !important;
  margin: 4px 0 0 !important;
}


/* =====================================================
   MOBILE – URSPRÜNGLICHE REIHENFOLGE
   ===================================================== */

@media (max-width: 900px) {

  #leistungCard:has(.pw-gauben) .pw-gauben {
    grid-template-columns: minmax(0, 1fr) !important;

    grid-template-areas:
      "top"
      "board"
      "head"
      "bank"
      "feedback" !important;

    grid-template-rows: auto !important;

    gap: 10px !important;
  }

  /* ZWEI GAUBEN PRO REIHE */

  #leistungCard:has(.pw-gauben) .pw-gauben-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* NAMEN WIEDER UNTER DEM RASTER */

  #leistungCard:has(.pw-gauben) .pw-gauben-bank {
    position: static !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;

    justify-content: flex-start !important;

    height: auto !important;

    padding: 0 !important;
    background: transparent !important;
  }

  #leistungCard:has(.pw-gauben) .pw-gauben-bank > .pw-gauben-name {
    flex: 0 0 auto !important;

    width: auto !important;
    min-height: 44px !important;

touch-action: none !important;
  }

}

.pw-gauben-name {
  touch-action: none !important;
}

#leistungCard:has(.pw-gauben) .pw-gauben-bank > .pw-gauben-name {
  flex: 0 0 auto !important;

  width: auto !important;
  min-height: 44px !important;

  touch-action: none !important;
}


@media (max-width: 400px) {
.pw-sanierung__film-bottom > span {
      margin-top: 1px;
}
}



  .pw-leak.is-searching .pw-leak__spot,
  .pw-leak.is-searching .pw-leak__spot.is-active {
    background: transparent !important;
    border: 2px solid #e02026 !important;
    box-shadow: 0 0 0 1px white !important;

    color: white !important;
    text-shadow: 0 1px 4px black;
  }



@media (max-width: 700px) {
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* =====================================================
   LEISTUNGS-WINDOWS – EINHEITLICHE ZENTRIERUNG
   Wie beim stabilen Ziegel-Window
   ===================================================== */

#leistungCard:has(.pw-gauben),
#leistungCard:has(.pw-dachquiz),
#leistungCard:has(.pw-dachbau),
#leistungCard:has(.pw-schorn-puzzle),
#leistungCard:has(.pw-schornstein-iframe),
#leistungCard:has(.pw-pipe-game),
#leistungCard:has(.pw-sanierung),
#leistungCard:has(.pw-pv-wissen),
#leistungCard:has(.pw-safety),
#leistungCard:has(.pw-archive),
#leistungCard:has(.pw-winter),
#leistungCard:has(.pw-leak),
#leistungCard:has(.pw-roto-iframe),
#leistungCard:has(.pw-dachfenster-iframe) {

  position: fixed !important;

  left: 50% !important;
  top: calc(50dvh + 60px) !important;

  right: auto !important;
  bottom: auto !important;

  transform: translate(-50%, -50%) !important;

}

/* ALLE WINDOWS – EINHEITLICHE MAXIMALE HÖHE */

#leistungCard:not(.pw-games-fullscreen) {
  box-sizing: border-box !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 144px) !important;
}

/* FLACHDACH – INHALT BEI PLATZMANGEL SCROLLEN */

#leistungCard:not(.pw-games-fullscreen):has(.pw-dachquiz) {
  display: flex !important;
  flex-direction: column !important;
}

#leistungCard:not(.pw-games-fullscreen):has(.pw-dachquiz)
.leistung-card-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* FLACHDACHFENSTER – GLEICHE WINDOW-GEOMETRIE */

#leistungCard:has(.pw-flatfacts) {
  box-sizing: border-box !important;
  position: fixed !important;

  top: 135px !important;
  left: 24px !important;
  right: auto !important;
  bottom: auto !important;

  width: calc(100vw - 48px) !important;
  max-width: calc(100vw - 48px) !important;

  height: calc(100dvh - 150px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 150px) !important;

  transform: none !important;

  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
      padding: 0;
}

#leistungCard:has(.pw-flatfacts) .leistung-card-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  max-height: none !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

      background: rgb(0 0 0 / 40%);
    border-radius: 18px;
    padding: 15px

}

#leistungCard:has(.pw-flatfacts) #leistungCardBody {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 0;
}

/* =====================================================
   FLACHDACHFENSTER – KURIOSES DACHWISSEN
   ===================================================== */

.pw-flatfacts,
.pw-flatfacts * {
  box-sizing: border-box;
}

.pw-flatfacts {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;

  width: 100%;
  min-width: 0;
  min-height: 0;

  margin-top: 24px;
  color: #fff;
}

.pw-flatfacts__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;

  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.pw-flatfacts__eyebrow {
  color: #e02026;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}

.pw-flatfacts__counter {
  color: rgba(255,255,255,.56);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}

.pw-flatfacts__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(26px, 4vw, 72px);

  flex: 1 0 auto;
  width: 100%;
  min-height: 0;

  padding: clamp(28px, 4vh, 56px) 0;
}

.pw-flatfacts__left,
.pw-flatfacts__right {
  min-width: 0;
}

.pw-flatfacts__kicker {
  display: block;
  margin-bottom: 18px;

  color: #e02026;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}

.pw-flatfacts__title {
  margin: 0;

  color: #fff;
  font-size: clamp(42px, 4.6vw, 84px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.pw-flatfacts__line {
  width: 72px;
  height: 3px;
  margin-bottom: 24px;
  background: #e02026;
}

.pw-flatfacts__text {
  margin: 0;
  max-width: 640px;

  color: rgba(255,255,255,.86);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.75;
}

.pw-flatfacts__nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;

  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.18);
}

.pw-flatfacts__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  min-height: 44px;
  padding: 10px 16px;

  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;

  background: rgba(255,255,255,.06);
  color: #fff;

  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;

  cursor: pointer;
  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.pw-flatfacts__btn:hover {
  border-color: rgba(224,32,38,.72);
  background: rgba(224,32,38,.12);
  transform: translateY(-1px);
}

.pw-flatfacts__btn:focus-visible {
  outline: 3px solid #ef4b52;
  outline-offset: 2px;
}

.pw-flatfacts__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pw-flatfacts__dot {
  width: 10px;
  height: 10px;
  padding: 0;

  border: none;
  border-radius: 999px;

  background: rgba(255,255,255,.22);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.pw-flatfacts__dot:hover {
  transform: scale(1.12);
}

.pw-flatfacts__dot.is-active {
  background: #e02026;
}

.pw-flatfacts__dot:focus-visible {
  outline: 3px solid #ef4b52;
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .pw-flatfacts__stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 28px 0 32px;
  }

  .pw-flatfacts__title {
    font-size: clamp(38px, 9vw, 68px);
  }

  .pw-flatfacts__text {
    font-size: 16px;
    line-height: 1.65;
  }
}

@media (max-width: 560px) {
  .pw-flatfacts__nav {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .pw-flatfacts__btn {
    justify-content: center;
    width: 100%;
  }

  .pw-flatfacts__dots {
    order: -1;
  }
}

/* FUNDARCHIV – LANGE AKTENLISTE */

.pw-archive__index {
  min-height: 0;
}

.pw-archive__cases {
  max-height: min(60dvh, 580px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #e02026 transparent;
  align-content: start;
}

@media (max-width: 900px) {
  .pw-archive__cases {
    max-height: 35dvh;
  }
}

/* MEHR ABSTAND ZU SCROLLLEISTEN – NUR DESKTOP */

@media (min-width: 768px) {
  #leistungCard:has(#leistungCardBody > :is(section, div, iframe))
  .leistung-card-content {
    padding-right: 44px !important;
    box-sizing: border-box;
    scrollbar-gutter: stable;
  }
}

/* ======================================
   DACHFENSTER-PLANER – KOMPAKT
   ====================================== */

/* WINDOW */

#leistungCard:has(.pw-dachfenster-planer) {
  position: fixed !important;
  top: 135px !important;
  left: 24px !important;

  width: calc(100vw - 48px) !important;
  max-width: none !important;

  height: auto !important;
  max-height: calc(100dvh - 150px) !important;

  transform: none !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
      background: #111;
}

/* NUR EINE SCROLLLEISTE */

#leistungCard:has(.pw-dachfenster-planer)
.leistung-card-content {
  display: block !important;
  flex: 0 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 210px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#leistungCard:has(.pw-dachfenster-planer)
#leistungCardBody {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* KONFIGURATOR */

.pw-dachfenster-planer {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}

.pw-dachfenster-planer .df-configurator {
  padding: 0 !important;
}

/* DOPPELTE ÜBERSCHRIFT ENTFERNEN */

.pw-dachfenster-planer
.df-configurator__head {
  display: none !important;
}

/* SCHMALERE SCHRITTLEISTE */

.pw-dachfenster-planer
.df-configurator__inner {
    max-width: 1100px !important;
}

.pw-dachfenster-planer
.df-configurator__shell {
  grid-template-columns: 250px minmax(0, 1fr) !important;
  gap: 12px !important;
}

.pw-dachfenster-planer
.df-configurator__steps {
  padding: 8px !important;
  gap: 2px !important;
}

.pw-dachfenster-planer .df-step {
  padding: 6px 8px !important;
}

/* KOMPAKTER FRAGENBEREICH */

.pw-dachfenster-planer
.df-configurator__body {
  min-height: 0 !important;
  padding: 16px 20px !important;
}

.pw-dachfenster-planer .df-question {
  font-size: clamp(22px, 2.2vw, 29px) !important;
  margin: 8px 0 12px !important;
}

.pw-dachfenster-planer .df-hint {
  margin-bottom: 12px !important;
}

/* KLEINERE AUSWAHLKARTEN */

.pw-dachfenster-planer .df-options {
  gap: 8px !important;
}

.pw-dachfenster-planer .df-card {
  min-height: 76px !important;
  padding: 11px 14px !important;
  gap: 5px !important;
}

/* WENIGER LEERRAUM */

.pw-dachfenster-planer .df-live {
  margin-top: 12px !important;
  padding-top: 10px !important;
}

.pw-dachfenster-planer
.df-configurator__footer {
  padding: 10px 20px !important;
}

/* MOBIL */

@media (max-width: 900px) {

  .pw-dachfenster-planer
  .df-configurator__shell {
    grid-template-columns: 1fr !important;
  }

  .pw-dachfenster-planer
  .df-configurator__steps {
    display: flex !important;
    overflow-x: auto !important;
  }
}

@media (max-width: 600px) {

  .pw-dachfenster-planer .df-options {
    grid-template-columns: 1fr !important;
  }

  .pw-dachfenster-planer .df-card {
    min-height: 70px !important;
  }

  .pw-dachfenster-planer
  .df-configurator__body {
    padding: 14px !important;
  }
}

.df-configurator .df-configurator__inner {
    padding: 30px 30px !important;
}


/* PSEUDOELEMENT IM KONFIGURATOR ENTFERNEN */

#leistungCard:has(.pw-dachfenster-planer)
.leistung-card-content::before {
  display: none !important;
  content: none !important;
}

/* DACHFENSTER-KONFIGURATOR – VOLLBILD */

#leistungCard.pw-games-fullscreen:has(.pw-dachfenster-planer) {
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-height: none !important;
  transform: none !important;
}

#leistungCard.pw-games-fullscreen:has(.pw-dachfenster-planer)
.leistung-card-content {
  flex: 1 1 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
}

/* HINTERGRUND DACHFENSTER-KONFIGURATOR */

.pw-dachfenster-planer .df-configurator {
    background: radial-gradient(circle at 25% 40%, rgb(196 22 28 / 75%), transparent 28%), linear-gradient(145deg, #10101000 0%, #17171700 45%, #0b0b0b00 100%);
}

/* PSEUDOELEMENTE IM KONFIGURATOR DEAKTIVIEREN */

.pw-dachfenster-planer .df-configurator::before,
.pw-dachfenster-planer .df-configurator::after {
  content: none !important;
  display: none !important;
}

.pw-roto-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 12px;
      justify-content: space-between;
}

.pw-roto-heading h2 {
  margin: 0;
}

.pw-roto-katalog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 1px 10px;

  background: #c81018;
  color: #fff !important;
  border: 1px solid #e02026;
  border-radius: 28px;

  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none !important;

  transition: background .2s, box-shadow .2s;
}

.pw-roto-katalog-btn:hover {
  background: #f02028;
  box-shadow: 0 0 22px rgba(224,32,38,.4);
}

.pw-roto-katalog-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Im Vollbildmodus ausblenden */
#leistungCard.pw-games-fullscreen:has(.pw-roto-iframe)
.pw-roto-heading {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .pw-roto-katalog-btn {
    transition: none;
  }
}

@media (max-width: 750px) {

  #leistungCard:has(.pw-sanierung) {
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
  }

  .pw-sanierung {
    grid-template-rows: minmax(270px, 35dvh) auto;
  }

  .pw-sanierung__film {
    min-height: 270px;
  }

  .pw-sanierung__film video {
    z-index: 0;
  }

  .pw-sanierung__film::after {
    z-index: 1;
  }

  .pw-sanierung__film-bottom {
    left: 16px;
    right: 14px;
    bottom: 16px;
    z-index: 3;
  }

  .pw-sanierung__film-bottom > span {
    max-width: calc(100% - 56px);
  }

}

@media (max-width: 750px) {

  #leistungCard.pw-sanierung-window:not(.pw-games-fullscreen) {
    box-sizing: border-box !important;

    position: fixed !important;
    left: 24px !important;
    right: auto !important;

    width: calc(100vw - 48px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 48px) !important;

    transform: none !important;
  }

}

@media (max-width: 750px) {

  #leistungCard.pw-sanierung-window:not(.pw-games-fullscreen) {
    box-sizing: border-box !important;
    position: fixed !important;

    top: 135px !important;
    bottom: 15px !important;

    left: 24px !important;
    right: 24px !important;

    width: auto !important;
    max-width: none !important;

    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;

    transform: none !important;
    overflow: hidden !important;
    z-index: 9999 !important;
  }

}

@media (max-width: 750px) {
.df-configurator .df-configurator__inner {
    padding: 0 !important;
}
}