/*
 * THE Q – Q287
 * Ruhigere Zustandsbuttons, selektive Detailtiefe, mobile Highlights in
 * zwei Reihen und eine lesbare VOR-/NACH-Gehaltsprojektion.
 * Diese Datei verändert keine Berechnungsformel.
 */

:root {
  --q287-navy: #0b3764;
  --q287-blue: #215f9a;
  --q287-cyan: #00b0f0;
  --q287-orange-top: #ffc34f;
  --q287-orange-mid: #f59c00;
  --q287-orange-bottom: #aa6100;
  --q287-grey-top: #c9ced3;
  --q287-grey-mid: #929aa2;
  --q287-grey-bottom: #5b646d;
  --q287-soft-blue: #eaf5ff;
}

/* -------------------------------------------------------------------------
   Objektintention: kein zusätzlicher Rot-/Grün-Farbcode.
   Aktiv = Orange + orangenes Häkchen, inaktiv = Grau + graues Kreuz.
   ------------------------------------------------------------------------- */

.q272-role-choice {
  min-width: 0 !important;
  min-height: 46px !important;
  grid-template-columns: minmax(0, 1fr) 32px !important;
  gap: 9px !important;
  padding: 6px 7px 6px 13px !important;
  border-width: 2px !important;
  border-radius: 14px !important;
  font-size: clamp(.78rem, .82vw, .94rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  filter: none !important;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease !important;
}

.q272-role-choice .q275-role-text {
  overflow: visible !important;
  color: #fff !important;
  font-weight: 950 !important;
  text-align: center !important;
  text-overflow: clip !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .54) !important;
  white-space: nowrap !important;
}

.q272-role-choice .q275-role-state {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 3px solid currentColor !important;
  border-radius: 8px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    0 2px 5px rgba(0, 0, 0, .23) !important;
}

.q272-role-choice .q275-role-state::after {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  transform: none !important;
}

.q272-role-choice.is-active,
.q272-role-choice[aria-pressed="true"],
.q272-role-choice.is-q276-active {
  border-color: rgba(255, 244, 205, .94) !important;
  background:
    linear-gradient(180deg,
      var(--q287-orange-top) 0%,
      #ffa923 28%,
      var(--q287-orange-mid) 62%,
      var(--q287-orange-bottom) 100%) !important;
  color: #d87900 !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .82),
    inset 0 -4px 0 rgba(91, 45, 0, .34),
    0 6px 11px rgba(121, 71, 0, .30) !important;
}

.q272-role-choice.is-active .q275-role-state,
.q272-role-choice[aria-pressed="true"] .q275-role-state,
.q272-role-choice.is-q276-active .q275-role-state {
  border-color: #c86e00 !important;
  background: linear-gradient(180deg, #fff9e8, #ffd78b) !important;
  color: #c86e00 !important;
}

.q272-role-choice.is-active .q275-role-state::after,
.q272-role-choice[aria-pressed="true"] .q275-role-state::after,
.q272-role-choice.is-q276-active .q275-role-state::after {
  content: "✓" !important;
  color: #b55f00 !important;
}

.q272-role-choice:not(.is-active),
.q272-role-choice[aria-pressed="false"],
.q272-role-choice.is-q276-inactive {
  border-color: rgba(255, 255, 255, .62) !important;
  background:
    linear-gradient(180deg,
      var(--q287-grey-top) 0%,
      var(--q287-grey-mid) 47%,
      var(--q287-grey-bottom) 100%) !important;
  color: #4f5963 !important;
  filter: saturate(.18) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .69),
    inset 0 -4px 0 rgba(35, 42, 48, .30),
    0 5px 9px rgba(35, 42, 48, .24) !important;
}

.q272-role-choice:not(.is-active) .q275-role-state,
.q272-role-choice[aria-pressed="false"] .q275-role-state,
.q272-role-choice.is-q276-inactive .q275-role-state {
  border-color: #59636d !important;
  background: linear-gradient(180deg, #e7e9eb, #a9b0b7) !important;
  color: #59636d !important;
}

.q272-role-choice:not(.is-active) .q275-role-state::after,
.q272-role-choice[aria-pressed="false"] .q275-role-state::after,
.q272-role-choice.is-q276-inactive .q275-role-state::after {
  content: "×" !important;
  color: #4e5862 !important;
}

/* Entsprechende Intentionsschalter in den ausführlichen Wohnungskarten. */
#apartmentList .q276-state-button[data-action="roleKeepV74"],
#apartmentList .q276-state-button[data-action="roleSellV74"] {
  min-width: 164px !important;
  min-height: 44px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 13px !important;
  color: #fff !important;
  font-size: .79rem !important;
  font-weight: 950 !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .48) !important;
}

#apartmentList .q276-state-button[data-action="roleKeepV74"].is-q276-active,
#apartmentList .q276-state-button[data-action="roleSellV74"].is-q276-active {
  background: linear-gradient(180deg, var(--q287-orange-top), var(--q287-orange-mid) 60%, var(--q287-orange-bottom)) !important;
}

#apartmentList .q276-state-button[data-action="roleKeepV74"].is-q276-inactive,
#apartmentList .q276-state-button[data-action="roleSellV74"].is-q276-inactive {
  background: linear-gradient(180deg, var(--q287-grey-top), var(--q287-grey-mid) 48%, var(--q287-grey-bottom)) !important;
  filter: saturate(.16) !important;
}

#apartmentList .q276-state-button[data-action="roleKeepV74"] .q276-button-state,
#apartmentList .q276-state-button[data-action="roleSellV74"] .q276-button-state {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 3px solid currentColor !important;
  border-radius: 7px !important;
  background: rgba(255, 255, 255, .78) !important;
  line-height: 1 !important;
}

#apartmentList .q276-state-button.is-q276-active .q276-button-state {
  color: #bd6500 !important;
}

#apartmentList .q276-state-button.is-q276-inactive .q276-button-state {
  color: #525d67 !important;
}

/* -------------------------------------------------------------------------
   Zwischenlösung für Formulardetails: Kernangaben bleiben offen; nur
   Kranken-/Pflegeversicherung und weitere Einkünfte sind optional klappbar.
   ------------------------------------------------------------------------- */

#berechnung .v228-subhead.q287-optional-head {
  position: relative !important;
  padding-right: 48px !important;
  cursor: pointer !important;
  user-select: none !important;
}

#berechnung .v228-subhead.q287-optional-head::after {
  content: "−";
  position: absolute;
  right: 12px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid rgba(0, 92, 160, .36);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
  color: var(--q287-navy);
  font-size: 20px;
  font-weight: 1000;
  line-height: 1;
  transform: translateY(-50%);
  box-shadow: 0 3px 7px rgba(11, 55, 100, .14);
}

#berechnung .v228-subhead.q287-optional-head[aria-expanded="false"]::after {
  content: "+";
}

#berechnung .q287-optional-field.q287-is-collapsed {
  display: none !important;
}

/* -------------------------------------------------------------------------
   Gehaltsabrechnung: der Monatsvorteil bleibt immer sichtbar. Das große
   VOR-/NACH-Formular kann als ein einziges Detailpaket geöffnet werden.
   ------------------------------------------------------------------------- */

#berechnung .v228-projection-section {
  position: relative !important;
}

#berechnung .q287-payroll-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  margin: 0 0 10px;
  padding: 8px 15px;
  border: 2px solid rgba(255, 239, 194, .82);
  border-radius: 13px;
  background: linear-gradient(180deg, #ffc34f, #f59c00 60%, #aa6100);
  color: #fff;
  font-size: .82rem;
  font-weight: 950;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .48);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .82),
    inset 0 -3px 0 rgba(91, 45, 0, .34),
    0 6px 12px rgba(105, 61, 0, .24);
  cursor: pointer;
}

#berechnung .q287-payroll-toggle::after {
  content: "▾";
  font-size: 1rem;
  line-height: 1;
  transition: transform .18s ease;
}

#berechnung .q287-payroll-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

#berechnung .v228-projection-section.q287-payroll-collapsed .v228-datev-compare,
#berechnung .v228-projection-section.q287-payroll-collapsed .v228-param-note,
#berechnung .v228-projection-section.q287-payroll-collapsed .v228-taxonly-note,
#berechnung .v228-projection-section.q287-payroll-collapsed .v240-allowance-summary {
  display: none !important;
}

#berechnung .v228-titlebar strong {
  font-size: clamp(1rem, 1.15vw, 1.22rem) !important;
}

#berechnung .v228-delta {
  min-height: 72px !important;
  font-size: .93rem !important;
}

#berechnung .v228-delta b {
  font-size: clamp(1.12rem, 1.42vw, 1.38rem) !important;
}

#berechnung .v228-o.v228-small {
  font-size: clamp(7.2px, .55vw, 9.6px) !important;
}

/* -------------------------------------------------------------------------
   3D-Animation: der Etagenstapel beginnt etwas tiefer. Die 3D-Grafik und der
   Lageplan bleiben mobil vollständig eingepasst und niemals horizontal
   scrollbar.
   ------------------------------------------------------------------------- */

#theq3DStage .theq-layer-stack {
  transform: translateY(4.5%) scaleY(1.035) !important;
  transform-origin: 50% 72% !important;
}

@media (max-width: 980px) {
  #theq3DStage,
  #theq3DViewport,
  #theq3DStage .theq-layer-stack,
  #v169LageSlot,
  #v169LageSlot .q270-location-stage {
    max-width: 100% !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }

  #theq3DStage .theq-layer-stack {
    transform: translateY(3.8%) scaleY(1.025) !important;
  }
}

/* -------------------------------------------------------------------------
   Mobile Header: sieben Highlights in exakt zwei Reihen. Der Inhalt beginnt
   unterhalb der geöffneten USP-Fläche, sodass die erste orange Headline nicht
   verdeckt wird.
   ------------------------------------------------------------------------- */

@media (max-width: 980px) {
  html {
    scroll-padding-top: 92px !important;
  }

  html body#theq-v255-body {
    transition: padding-top .22s ease !important;
  }

  html body#theq-v255-body.q287-usp-visible {
    padding-top: 176px !important;
  }

  #v257MobileHeader .v257-usp {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: thin !important;
  }

  #v257MobileHeader .v257-usp-list {
    grid-template-columns: none !important;
    grid-template-rows: repeat(2, 40px) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(186px, 46vw) !important;
    width: max-content !important;
    min-width: 100% !important;
  }

  #v257MobileHeader .v257-usp-list li {
    min-height: 40px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-size: clamp(.66rem, 2.45vw, .75rem) !important;
    line-height: 1.12 !important;
  }

  #v169InvestmentBlock,
  #v169LageSection,
  #v169SimSection,
  #wohnungen,
  #berechnung,
  #unterlagen,
  #afa-effekt,
  #reservierung,
  #finanzierungsanfrage,
  #videos,
  #formeln {
    scroll-margin-top: 92px !important;
  }

  .q272-role-picker {
    max-width: none !important;
  }

  .q272-role-choice {
    min-height: 48px !important;
    font-size: .82rem !important;
  }

  #berechnung .v228-projection-section {
    padding: 12px !important;
  }

  #berechnung .q287-payroll-toggle {
    width: 100%;
  }
}

@media (max-width: 620px) {
  html body#theq-v255-body.q287-usp-visible {
    padding-top: 170px !important;
  }

  #v257MobileHeader .v257-usp-list {
    grid-auto-columns: minmax(176px, 71vw) !important;
  }

  .q270-unit-head {
    grid-template-columns: 43px minmax(0, 1fr) !important;
  }

  .q272-role-picker {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
  }

  .q272-role-buttons {
    grid-template-columns: 1fr !important;
  }

  .q272-role-choice .q275-role-text {
    white-space: normal !important;
  }

  #berechnung .v228-delta {
    grid-template-columns: 1fr !important;
  }
}

/* Genau ein Nach-oben-Button. */
#v157BackToTop,
#v159BackToTop,
#v165BackToTop {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* -------------------------------------------------------------------------
   Farbangleichung der Aktionsbuttons:
   Kaufabsicht aktiv = Blau, gewählte Objektstrategie = Orange,
   nicht gewählte/deaktivierte Auswahl = Grau. Statussymbol und Rahmen
   übernehmen jeweils denselben Farbton wie der zugehörige Button.
   ------------------------------------------------------------------------- */

:root {
  --q287-action-blue-top: #6ed8ff;
  --q287-action-blue-mid: #159edc;
  --q287-action-blue-bottom: #09689f;
  --q287-action-blue-state: #0874b4;
  --q287-action-orange-top: #ffc95d;
  --q287-action-orange-mid: #f5a000;
  --q287-action-orange-bottom: #ad6500;
  --q287-action-orange-state: #c96f00;
  --q287-action-grey-top: #d1d5d9;
  --q287-action-grey-mid: #929aa2;
  --q287-action-grey-bottom: #59636d;
  --q287-action-grey-state: #59636d;
}

/* Kaufabsicht: blauer Button mit blauem Häkchen. */
#apartmentList .q276-state-button[data-action="buytoggle"].is-q276-active {
  border-color: rgba(205, 243, 255, .96) !important;
  background:
    linear-gradient(
      180deg,
      var(--q287-action-blue-top) 0%,
      var(--q287-action-blue-mid) 47%,
      var(--q287-action-blue-bottom) 100%
    ) !important;
}

#apartmentList
  .q276-state-button[data-action="buytoggle"].is-q276-active
  .q276-button-state {
  border-color: var(--q287-action-blue-state) !important;
  background: linear-gradient(180deg, #f1fbff, #b9eaff) !important;
  color: var(--q287-action-blue-state) !important;
}

/* Bestandsobjekt oder Verkaufsabsicht: orange mit orangem Häkchen. */
#apartmentList
  .q276-state-button[data-action="roleKeepV74"].is-q276-active,
#apartmentList
  .q276-state-button[data-action="roleSellV74"].is-q276-active {
  border-color: rgba(255, 244, 205, .95) !important;
  background:
    linear-gradient(
      180deg,
      var(--q287-action-orange-top) 0%,
      var(--q287-action-orange-mid) 56%,
      var(--q287-action-orange-bottom) 100%
    ) !important;
}

#apartmentList
  .q276-state-button[data-action="roleKeepV74"].is-q276-active
  .q276-button-state,
#apartmentList
  .q276-state-button[data-action="roleSellV74"].is-q276-active
  .q276-button-state {
  border-color: var(--q287-action-orange-state) !important;
  background: linear-gradient(180deg, #fff9e8, #ffd78b) !important;
  color: var(--q287-action-orange-state) !important;
}

/* Jede nicht gewählte bzw. deaktivierte Variante wird einheitlich grau. */
#apartmentList
  .q276-state-button[data-action="buytoggle"].is-q276-inactive,
#apartmentList
  .q276-state-button[data-action="roleKeepV74"].is-q276-inactive,
#apartmentList
  .q276-state-button[data-action="roleSellV74"].is-q276-inactive {
  border-color: rgba(255, 255, 255, .66) !important;
  background:
    linear-gradient(
      180deg,
      var(--q287-action-grey-top) 0%,
      var(--q287-action-grey-mid) 48%,
      var(--q287-action-grey-bottom) 100%
    ) !important;
  filter: saturate(.16) !important;
}

#apartmentList
  .q276-state-button[data-action="buytoggle"].is-q276-inactive
  .q276-button-state,
#apartmentList
  .q276-state-button[data-action="roleKeepV74"].is-q276-inactive
  .q276-button-state,
#apartmentList
  .q276-state-button[data-action="roleSellV74"].is-q276-inactive
  .q276-button-state {
  border-color: var(--q287-action-grey-state) !important;
  background: linear-gradient(180deg, #e7e9eb, #a9b0b7) !important;
  color: var(--q287-action-grey-state) !important;
}