/*
 * THE Q · Q278
 * Präzisionskorrekturen auf Basis von Q276.
 * Der Rechenkern und seine Daten bleiben unverändert.
 */

:root {
  --q278-active: #00ad4f;
  --q278-inactive: #ef2029;
}

/* --------------------------------------------------------------------------
   Statuszeichen: geometrisch zentriert, ohne doppeltes natives Zeichen
   -------------------------------------------------------------------------- */

#apartmentList .v253-option .pill-label {
  display: grid !important;
  grid-template-columns: 29px minmax(0, 1fr) 19px !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
}

#apartmentList .v253-option .pill-label:not(:has(.info-btn)) {
  grid-template-columns: 29px minmax(0, 1fr) !important;
}

#apartmentList .v253-option .v253-option-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

#apartmentList .v253-option .pill-label > .info-btn {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 19px !important;
  height: 19px !important;
  min-width: 19px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

#apartmentList .v253-option input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  min-height: 29px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 3px solid var(--q278-inactive) !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .18) !important;
  cursor: pointer !important;
}

#apartmentList .v253-option input[type="checkbox"]::before {
  content: none !important;
  display: none !important;
}

#apartmentList .v253-option input[type="checkbox"]::after {
  content: "×";
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 0 2px !important;
  color: var(--q278-inactive) !important;
  font-family: Arial, "Segoe UI Symbol", sans-serif !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: none !important;
  pointer-events: none !important;
}

#apartmentList .v253-option input[type="checkbox"]:checked {
  border-color: var(--q278-active) !important;
}

#apartmentList .v253-option input[type="checkbox"]:checked::after {
  content: "✓";
  padding-bottom: 1px !important;
  color: var(--q278-active) !important;
  font-size: 20px !important;
}

#apartmentList .v253-option.inactive .v253-option-copy,
#apartmentList .v253-option.inactive .v253-option-copy * {
  color: #8a9198 !important;
}

.q270-option-state,
.q275-role-state,
.q276-button-state {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.q270-option-state::after,
.q275-role-state::after,
.q276-button-state::after {
  content: "×";
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 0 2px !important;
  color: var(--q278-inactive) !important;
  font: 900 19px/1 Arial, "Segoe UI Symbol", sans-serif !important;
  pointer-events: none !important;
}

.q270-option:not(.is-off) .q270-option-state::after,
.q272-role-choice.is-active .q275-role-state::after,
.q272-role-choice[aria-pressed="true"] .q275-role-state::after,
.q276-state-button.is-q276-active .q276-button-state::after,
.q276-state-button[aria-pressed="true"] .q276-button-state::after {
  content: "✓";
  padding-bottom: 1px !important;
  color: var(--q278-active) !important;
}

/* --------------------------------------------------------------------------
   Aktive/inaktive Icons: derselbe Bildkörper, nur die Farbe ändert sich
   -------------------------------------------------------------------------- */

#apartmentList .v253-option .v253-option-icon {
  display: block !important;
  flex: 0 0 auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

#apartmentList .q278-option-furnish .v253-option-icon {
  width: 78px !important;
  height: 54px !important;
}

#apartmentList .q278-option-garage .v253-option-icon {
  width: 68px !important;
  height: 46px !important;
}

#apartmentList .q278-option-rentuse .v253-option-icon,
#apartmentList .q278-option-selfuse .v253-option-icon {
  width: 64px !important;
  height: 64px !important;
}

#apartmentList .v253-option.inactive .v253-option-icon,
.q270-option.is-off img {
  filter: grayscale(1) saturate(0) brightness(.84) contrast(.93) !important;
  opacity: .72 !important;
  transform: none !important;
}

.q270-option img {
  object-position: center !important;
  transform: none !important;
}

/* Die lange blaue Überschrift bleibt auf Desktop in einer Zeile. */
@media (min-width: 981px) {
  #v169InvestmentBlock .v180-portfolio .v180-card-title .q270-title-copy > span {
    white-space: nowrap !important;
    font-size: clamp(.84rem, 1.03vw, 1.13rem) !important;
  }
}

/* --------------------------------------------------------------------------
   EK-Rendite: kompakte Formel mittig, kein Pfeil
   -------------------------------------------------------------------------- */

#v169InvestmentBlock .q274-ek-showcase {
  justify-items: center !important;
}

#v169InvestmentBlock .q274-ek-showcase [class*="arrow"],
#v169InvestmentBlock .q274-ek-showcase img[src*="arrow"],
#v169InvestmentBlock .q274-ek-showcase img[src*="pfeil"] {
  display: none !important;
}

#v169InvestmentBlock.v187-ready
  .v180-tile.v187-ek-tile.q270-ek-tile
  .q274-ek-formula {
  justify-self: center !important;
  object-position: 50% 50% !important;
  margin-inline: auto !important;
}

/* --------------------------------------------------------------------------
   3D-Staffelung: UG sichtbar tiefer, EG an der Bodenkante
   -------------------------------------------------------------------------- */

#theq3DStage.theq-anim3d .theq-3d-layer {
  --q278-floor-y: 0%;
  transform: translate3d(0, var(--q278-floor-y), 0) scale(1) !important;
}

#theq3DStage.theq-anim3d .theq-3d-layer[data-theq-floor="UG"] {
  --q278-floor-y: 8%;
}

#theq3DStage.theq-anim3d .theq-3d-layer[data-theq-floor="EG"] {
  --q278-floor-y: 5%;
}

#theq3DStage.theq-anim3d .theq-3d-layer[data-theq-floor="1"] {
  --q278-floor-y: 3%;
}

#theq3DStage.theq-anim3d .theq-3d-layer[data-theq-floor="1ZG"] {
  --q278-floor-y: 2%;
}

#theq3DStage.theq-anim3d .theq-3d-layer[data-theq-floor="2"] {
  --q278-floor-y: 1.25%;
}

#theq3DStage.theq-anim3d .theq-3d-layer[data-theq-floor="3"] {
  --q278-floor-y: .8%;
}

#theq3DStage.theq-anim3d .theq-3d-layer[data-theq-floor="4"] {
  --q278-floor-y: .5%;
}

#theq3DStage.theq-anim3d .theq-3d-layer[data-theq-floor="5"],
#theq3DStage.theq-anim3d .theq-3d-layer[data-theq-floor="5ZG"] {
  --q278-floor-y: .25%;
}

#theq3DStage.theq-anim3d .theq-3d-layer.is-entering {
  transform:
    translate3d(0, calc(var(--q278-floor-y) - 9.5%), 0)
    scale(.925) !important;
}

#theq3DStage.theq-anim3d .theq-3d-layer.is-exiting {
  transform:
    translate3d(0, calc(var(--q278-floor-y) - 10.5%), 0)
    scale(.91) !important;
}

/* --------------------------------------------------------------------------
   Mobil/Tablet: Lage und 3D fest eingepasst, nur 2D horizontal beweglich
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  #theq3DStage.floor3d-v91.q278-fixed-visual,
  #theq3DStage.floor3d-v91.q278-fixed-visual .theq-anim-viewport,
  #theq3DStage.floor3d-v91.q278-fixed-visual .theq-layer-stack,
  .q270-location.q278-fixed-visual,
  .q270-location.q278-fixed-visual .q270-location-stage {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    touch-action: pan-y !important;
    overscroll-behavior-x: none !important;
    scrollbar-width: none !important;
  }

  #theq3DStage.floor3d-v91.q278-fixed-visual::-webkit-scrollbar,
  .q270-location.q278-fixed-visual::-webkit-scrollbar,
  .q270-location.q278-fixed-visual .q270-location-stage::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  #theq3DStage.floor3d-v91.q278-fixed-visual .theq-building,
  #theq3DStage.floor3d-v91.q278-fixed-visual .theq-3d-layer,
  .q270-location.q278-fixed-visual .q270-location-map {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #theqPlanCanvas.plan-canvas-v72.q278-scrollable-plan {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
    scrollbar-width: thin !important;
  }

  #theqPlanCanvas .etw-marker-v72 {
    width: 86px !important;
    min-width: 86px !important;
    min-height: 44px !important;
    padding: 6px 7px !important;
    border-radius: 13px !important;
    font-size: 10.5px !important;
    line-height: 1.04 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  #theqPlanCanvas .etw-marker-v72 .line1 {
    font-size: 10.5px !important;
    line-height: 1.04 !important;
  }

  #theqPlanCanvas .etw-marker-v72 .line2 {
    display: block !important;
    margin-top: 2px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
  }

  #apartmentList .q278-option-furnish .v253-option-icon,
  #apartmentList .q278-option-garage .v253-option-icon {
    width: 58px !important;
    height: 42px !important;
  }

  #apartmentList .q278-option-rentuse .v253-option-icon,
  #apartmentList .q278-option-selfuse .v253-option-icon {
    width: 52px !important;
    height: 52px !important;
  }

  body#theq-v255-body.v255-mobile
    #apartmentList .q278-option-furnish .v253-option-icon,
  body#theq-v255-body.v255-mobile
    #apartmentList .q278-option-garage .v253-option-icon {
    width: 58px !important;
    height: 42px !important;
    flex-basis: 58px !important;
  }

  body#theq-v255-body.v255-mobile
    #apartmentList .q278-option-rentuse .v253-option-icon,
  body#theq-v255-body.v255-mobile
    #apartmentList .q278-option-selfuse .v253-option-icon {
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
  }
}

@media (max-width: 650px) {
  #apartmentList .v253-option {
    overflow: hidden !important;
  }

  #apartmentList .v253-option .pill-label {
    grid-template-columns: 29px minmax(0, 1fr) 19px !important;
    column-gap: 8px !important;
    width: 0 !important;
  }

  #apartmentList .v253-option .pill-label:not(:has(.info-btn)) {
    grid-template-columns: 29px minmax(0, 1fr) !important;
  }

  #apartmentList .q278-option-rentuse .v253-option-icon,
  #apartmentList .q278-option-selfuse .v253-option-icon {
    width: 48px !important;
    height: 48px !important;
  }

  body#theq-v255-body.v255-mobile
    #apartmentList .q278-option-rentuse .v253-option-icon,
  body#theq-v255-body.v255-mobile
    #apartmentList .q278-option-selfuse .v253-option-icon {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }
}

/* Nur die aktuelle Nach-oben-Schaltfläche bleibt sichtbar. */
#v157BackToTop,
#v159BackToTop,
#v165BackToTop {
  display: none !important;
}