/*
 * THE Q – Q287
 * Ruhigere Zustandsbuttons, selektive Detailtiefe, mobile Highlights
 * untereinander 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;
  }
}

/*
 * Abschlussregeln mit bewusst höherer Spezifität. Mehrere historische
 * Darstellungsstufen werden dynamisch ergänzt; diese Regeln halten die
 * sichtbare Q287-Hierarchie trotzdem stabil.
 */
html body #v169InvestmentBlock.v187-ready .v180-card {
  background: var(--q287-subcard) !important;
  border: 2px solid var(--q287-contour) !important;
  box-shadow: var(--q287-contour-glow), var(--q287-panel-shadow) !important;
}

html body #v169InvestmentBlock.v187-ready .v180-card-title {
  background: var(--q287-subcard-head) !important;
  box-shadow: var(--q287-head-shadow) !important;
}

html body
  #v169InvestmentBlock.v187-ready
  .v180-tile:not(.v187-ek-tile),
html body #v169InvestmentBlock.v187-ready .v187-ek-tile {
  background: var(--q287-small-card) !important;
  border-color: var(--q287-contour) !important;
  box-shadow: 0 6px 9px rgba(0, 42, 76, .18) !important;
}

html body #v169LageSection #v169LageSlot,
html body #v169SimSection .v169-filter-area,
html body #v169SimSection #v169StageSlot,
html body #v169SimSection #v169PlanSlot {
  margin-top: 0 !important;
  background: var(--q287-subcard) !important;
  border: 2px solid var(--q287-contour) !important;
  border-top: 0 !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: var(--q287-contour-glow), var(--q287-panel-shadow) !important;
}

html body
  #v169SimSection
  #v169StageSlot
  #theq3DStage.floor3d-v91.q278-fixed-visual {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: none !important;
}

html body #v169SimSection #v169PlanSlot > :first-child,
html body #v169LageSection #v169LageSlot > :first-child {
  margin-top: 0 !important;
}

html body #apartmentList > .v74-exit-summary {
  background: var(--q287-subcard) !important;
  border: 2px solid var(--q287-contour) !important;
  box-shadow: var(--q287-contour-glow), var(--q287-panel-shadow) !important;
}

html body
  #apartmentList
  > .v74-exit-summary
  > .v74-exit-head {
  background: var(--q287-subcard-head) !important;
  box-shadow: var(--q287-head-shadow) !important;
}

html body #apartmentList .v74-exit-kpi,
html body #apartmentList .v74-growth-panel {
  background: var(--q287-small-card) !important;
  border-color: var(--q287-contour) !important;
  box-shadow: 0 6px 9px rgba(0, 42, 76, .16) !important;
}

/* -------------------------------------------------------------------------
   Mobile Header: sieben Highlights untereinander, ohne horizontale
   Scrollleiste. Der reservierte Einstiegsraum bleibt beim Einfahren stabil,
   sodass die erste orange Headline weder springt noch verdeckt wird.
   ------------------------------------------------------------------------- */

@media (max-width: 980px) {
  :root {
    --q287-mobile-intro-space: 480px;
  }

  html {
    scroll-padding-top: 92px !important;
  }

  html body#theq-v255-body.v257-mobile,
  html body#theq-v255-body.q287-usp-visible {
    padding-top: var(--q287-mobile-intro-space) !important;
    transition: none !important;
  }

  #v257MobileHeader .v257-usp {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    scrollbar-width: none !important;
    transition:
      transform .38s cubic-bezier(.22, .74, .24, 1),
      opacity .24s ease !important;
  }

  #v257MobileHeader .v257-usp::-webkit-scrollbar {
    display: none !important;
  }

  #v257MobileHeader .v257-usp-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #v257MobileHeader .v257-menu-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #v257MobileHeader .v257-menu,
  #v257MobileHeader .v257-menu-grid,
  #v257MobileHeader .v257-menu-col {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #v257MobileHeader .v257-usp-list li {
    min-height: 44px !important;
    padding: 7px 10px 7px 39px !important;
    font-size: clamp(.70rem, 2.65vw, .82rem) !important;
    line-height: 1.16 !important;
    transform: translateY(-12px) !important;
    opacity: 0 !important;
    transition:
      transform .30s cubic-bezier(.22, .74, .24, 1),
      opacity .22s ease !important;
  }

  #v257MobileHeader[data-panel="usp"] .v257-usp-list li {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  #v257MobileHeader[data-panel="usp"] .v257-usp-list li:nth-child(2) {
    transition-delay: .025s !important;
  }

  #v257MobileHeader[data-panel="usp"] .v257-usp-list li:nth-child(3) {
    transition-delay: .05s !important;
  }

  #v257MobileHeader[data-panel="usp"] .v257-usp-list li:nth-child(4) {
    transition-delay: .075s !important;
  }

  #v257MobileHeader[data-panel="usp"] .v257-usp-list li:nth-child(5) {
    transition-delay: .10s !important;
  }

  #v257MobileHeader[data-panel="usp"] .v257-usp-list li:nth-child(6) {
    transition-delay: .125s !important;
  }

  #v257MobileHeader[data-panel="usp"] .v257-usp-list li:nth-child(7) {
    transition-delay: .15s !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%;
  }
}

/* -------------------------------------------------------------------------
   Gehaltsabrechnung – endgültige Breitenlogik.
   Die historischen v228-Regeln erzwingen 620 px Mindestbreite je Formular
   und einen horizontalen Scroller. Q287 zeigt VOR und NACH am Desktop
   unmittelbar nebeneinander und mobil in voller Breite untereinander.
   ------------------------------------------------------------------------- */

html body#theq-v255-body
  #berechnung
  .v228-projection-section.q287-payroll-positioned {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-top: 16px !important;
  overflow: hidden !important;
}

html body#theq-v255-body
  #berechnung
  .v228-projection-section.q287-payroll-positioned
  .v228-datev-compare {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 14px !important;
  padding: 10px 0 4px !important;
  overflow: visible !important;
  overscroll-behavior-x: none !important;
}

html body#theq-v255-body
  #berechnung
  .v228-projection-section.q287-payroll-positioned
  .v228-datev-col,
html body#theq-v255-body
  #berechnung
  .v228-projection-section.q287-payroll-positioned
  .v228-datev-sheet {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (min-width: 981px) {
  html body#theq-v255-body
    #berechnung
    .v228-projection-section.q287-payroll-positioned
    .v228-datev-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  html body#theq-v255-body
    #berechnung
    .v228-projection-section.q287-payroll-positioned
    .v228-datev-compare {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 620px) {
  #v257MobileHeader .v257-usp-list {
    grid-template-columns: minmax(0, 1fr) !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;
}

/* -------------------------------------------------------------------------
   Q287 – durchgängiges Kachelsystem

   Ebene 1: orange Hauptsektion.
   Ebene 2: einheitlich hellblaue Untersektion mit bündiger dunkelblauer
            Headline und leuchtender Außenkontur.
   Ebene 3: kleine Icon-/Kennzahlenkacheln mit einem Verlauf nach unten.
   ------------------------------------------------------------------------- */

:root {
  --q287-subcard: #eaf6ff;
  --q287-subcard-soft: #f3faff;
  --q287-subcard-head:
    linear-gradient(90deg, #0a3158 0%, #155286 48%, #4297d2 100%);
  --q287-small-card:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdff 30%,
      #e8f5ff 64%,
      #b8d9f2 100%
    );
  --q287-contour: #00aeef;
  --q287-contour-glow:
    0 0 0 1px rgba(0, 174, 239, .22),
    0 0 12px rgba(0, 174, 239, .17);
  --q287-head-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .28),
    inset 0 -2px 0 rgba(255, 255, 255, .82),
    0 6px 10px rgba(0, 40, 74, .22);
  --q287-panel-shadow:
    0 8px 14px rgba(0, 40, 74, .18);
}

/* Die drei zentralen blauen Untersektionen. */
#v169InvestmentBlock .v180-card {
  overflow: hidden !important;
  background: var(--q287-subcard) !important;
  border: 2px solid var(--q287-contour) !important;
  border-radius: 16px !important;
  box-shadow: var(--q287-contour-glow), var(--q287-panel-shadow) !important;
}

#v169InvestmentBlock .v180-card-title,
#v169LageSection .v169-blue-strip,
#v169SimSection .v169-blue-strip {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 !important;
  border: 2px solid var(--q287-contour) !important;
  border-bottom: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  background: var(--q287-subcard-head) !important;
  color: #fff !important;
  box-shadow: var(--q287-head-shadow) !important;
}

#v169InvestmentBlock .v180-card-title {
  width: auto !important;
  margin: -2px -2px 0 !important;
}

/* Headline und zugehöriger Lage-/Filter-/3D-/2D-Inhalt bilden je eine Karte. */
#v169LageSection .v169-blue-strip + #v169LageSlot,
#v169SimSection .v169-blue-strip + .v169-filter-area,
#v169SimSection .v169-blue-strip + #v169StageSlot,
#v169SimSection .v169-blue-strip + #v169PlanSlot {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  background: var(--q287-subcard) !important;
  border: 2px solid var(--q287-contour) !important;
  border-top: 0 !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: var(--q287-contour-glow), var(--q287-panel-shadow) !important;
  overflow: hidden !important;
}

#v169LageSection .v169-section-body,
#v169SimSection .v169-section-body {
  background: linear-gradient(180deg, #fff5e9 0%, #fffaf4 100%) !important;
}

#v169LageSection .v169-blue-strip {
  margin-top: 0 !important;
}

#v169LageSlot {
  margin-bottom: 0 !important;
}

#v169StageSlot,
#v169PlanSlot {
  padding: 0 !important;
}

#v169StageSlot > *,
#v169PlanSlot > * {
  margin-top: 0 !important;
}

#v169StageSlot #theq3DStage,
#v169PlanSlot .selection-box-v72,
#v169PlanSlot .plan-canvas-v72 {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: none !important;
}

#v169StageSlot #theq3DStage {
  width: 100% !important;
  max-width: 100% !important;
}

/* Abstand nur zwischen zwei Karten, niemals zwischen Headline und Inhalt. */
#v169SimSection .v169-blue-strip[style*="margin-top"] {
  margin-top: 12px !important;
}

#v169SimSection .v169-blue-strip + #v169StageSlot,
#v169SimSection .v169-blue-strip + #v169PlanSlot,
#v169SimSection .v169-blue-strip + .v169-filter-area {
  margin-top: 0 !important;
}

/* Kleine Kacheln: heller Blauverlauf nach unten. */
#v169InvestmentBlock .v180-tile,
#v169InvestmentBlock .v180-p-row:not(.v180-p-head) .v180-p-cell,
#v169SimSection .floor-tabs-v72 button,
#v169SimSection .floor-status-v91,
#v169SimSection .floor-summary-v91,
#apartmentList .v74-exit-kpi,
#apartmentList .v74-growth-panel,
#apartmentList .v254-finance-meta,
#apartmentList .v254-loan-row,
#apartmentList .ap-extra-kpi,
#apartmentList .ap-calc-section,
#berechnung .kpi,
#berechnung .readonly-box,
#berechnung .helper-box {
  background: var(--q287-small-card) !important;
  border-color: rgba(0, 174, 239, .84) !important;
  box-shadow: 0 5px 9px rgba(0, 42, 76, .16) !important;
}

/* Portfolio-/Exit-Pool in derselben Hierarchie wie alle anderen Bereiche. */
#apartmentList > .v74-exit-summary {
  padding: 0 14px 14px !important;
  overflow: hidden !important;
  background: var(--q287-subcard) !important;
  border: 2px solid var(--q287-contour) !important;
  border-radius: 16px !important;
  box-shadow: var(--q287-contour-glow), var(--q287-panel-shadow) !important;
}

#apartmentList > .v74-exit-summary > .v74-exit-head {
  margin: -2px -14px 0 !important;
  padding: 11px 14px !important;
  border: 2px solid var(--q287-contour) !important;
  border-bottom: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  background: var(--q287-subcard-head) !important;
  color: #fff !important;
  box-shadow: var(--q287-head-shadow) !important;
}

#apartmentList > .v74-exit-summary > .v74-exit-head h3,
#apartmentList > .v74-exit-summary > .v74-exit-head p {
  color: #fff !important;
}

#apartmentList > .v74-exit-summary > .v74-growth-panel {
  margin-top: 12px !important;
}

/* Unterkacheln in den einzelnen Wohnungs- und Berechnungsbereichen. */
#apartmentList .v254-panel,
#berechnung .subpanel,
#berechnung .v228-projection-section {
  overflow: hidden !important;
  background: var(--q287-subcard) !important;
  border: 2px solid var(--q287-contour) !important;
  border-radius: 16px !important;
  box-shadow: var(--q287-contour-glow), var(--q287-panel-shadow) !important;
}

#apartmentList .v254-panel {
  padding: 0 !important;
}

#apartmentList .v254-panel-title,
#berechnung .subpanel > h4,
#berechnung .v228-titlebar {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .45) !important;
  border-radius: 14px 14px 0 0 !important;
  background: var(--q287-subcard-head) !important;
  color: #fff !important;
  box-shadow: var(--q287-head-shadow) !important;
}

#apartmentList .v254-panel-body {
  background: var(--q287-subcard) !important;
}

#berechnung .subpanel {
  padding: 0 14px 14px !important;
}

#berechnung .subpanel > h4 {
  margin: -2px -14px 14px !important;
  padding: 11px 14px !important;
}

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

#berechnung .v228-projection-head {
  margin: 0 -14px 12px !important;
}

#berechnung .v228-titlebar {
  padding: 11px 14px !important;
}

#berechnung .v228-subline {
  margin: 0 !important;
  padding: 10px 14px !important;
  background: var(--q287-subcard-soft) !important;
  border-bottom: 1px solid rgba(0, 174, 239, .42) !important;
  box-shadow: 0 5px 8px rgba(0, 40, 74, .12) !important;
}

/* Die persönliche Berechnung selbst bleibt eine einzige blaue Untersektion. */
#berechnung .q284-subsection {
  background: var(--q287-subcard) !important;
  border: 2px solid var(--q287-contour) !important;
  box-shadow: var(--q287-contour-glow), var(--q287-panel-shadow) !important;
}

#berechnung .q283-person-head {
  background: var(--q287-subcard-head) !important;
  color: #fff !important;
  box-shadow: var(--q287-head-shadow) !important;
}

/* Visuelle Karten in den nachfolgenden Informationssektionen. */
#unterlagen .about-card,
#videos .video-card,
#videos .photo-card,
#energieeffizienz .energy-card,
#formeln .logic-card,
#formeln .logic-formula {
  background: var(--q287-small-card) !important;
  border: 1.5px solid var(--q287-contour) !important;
  box-shadow: var(--q287-contour-glow), var(--q287-panel-shadow) !important;
}

@media (max-width: 980px) {
  #v169LageSection .v169-section-body,
  #v169SimSection .v169-section-body {
    padding: 10px !important;
  }

  #v169LageSection .v169-blue-strip + #v169LageSlot,
  #v169SimSection .v169-blue-strip + .v169-filter-area,
  #v169SimSection .v169-blue-strip + #v169StageSlot,
  #v169SimSection .v169-blue-strip + #v169PlanSlot {
    box-shadow: 0 7px 11px rgba(0, 40, 74, .16) !important;
  }

  #berechnung .v228-projection-section,
  #berechnung .subpanel {
    border-radius: 14px !important;
  }
}

/* =========================================================================
   Q287 R5 – eigenständiger, ruhiger Gesamtentwurf

   Die Rechen- und Auswahlfunktionen bleiben unverändert. Diese abschließende
   Schicht vereinheitlicht ausschließlich Hierarchie, Typografie, Abstände
   und die drei verbindlichen Zustandsfarben:

   Blau   = Kaufabsicht / aktive Ausstattung oder Nutzung
   Orange = aktive Objektstrategie
   Grau   = nicht gewählt / deaktiviert
   ========================================================================= */

:root {
  --q287-r5-navy-950: #052845;
  --q287-r5-navy-900: #073655;
  --q287-r5-blue-700: #0c6f9f;
  --q287-r5-blue-600: #1287bc;
  --q287-r5-blue-500: #249fd1;
  --q287-r5-blue-100: #e7f5fb;
  --q287-r5-blue-050: #f4fbfe;
  --q287-r5-orange-700: #bd5f07;
  --q287-r5-orange-600: #df770b;
  --q287-r5-orange-500: #ef9427;
  --q287-r5-orange-100: #fff0dc;
  --q287-r5-orange-050: #fff8ef;
  --q287-r5-grey-700: #596674;
  --q287-r5-grey-600: #6f7c88;
  --q287-r5-grey-300: #b8c0c7;
  --q287-r5-grey-100: #edf0f2;
  --q287-r5-ink: #123047;
  --q287-r5-muted: #627587;
  --q287-r5-line: #c9d7e1;
  --q287-r5-radius: 16px;
  --q287-r5-shadow: 0 9px 24px rgba(5, 40, 69, .11);
  --q287-r5-shadow-soft: 0 5px 14px rgba(5, 40, 69, .09);

  --q287-subcard: var(--q287-r5-blue-100);
  --q287-subcard-soft: var(--q287-r5-blue-050);
  --q287-subcard-head:
    linear-gradient(100deg, #073655 0%, #0c5e88 58%, #1287bc 100%);
  --q287-small-card:
    linear-gradient(180deg, #ffffff 0%, #f7fbfd 56%, #e5f2f8 100%);
  --q287-contour: #3e9dca;
  --q287-contour-glow:
    0 0 0 1px rgba(62, 157, 202, .14),
    0 6px 18px rgba(5, 58, 90, .09);
  --q287-head-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 4px 10px rgba(5, 40, 69, .14);
  --q287-panel-shadow: var(--q287-r5-shadow-soft);
}

html body#theq-v255-body {
  background:
    radial-gradient(circle at 8% 4%, rgba(36, 159, 209, .08), transparent 28rem),
    #edf3f7 !important;
  color: var(--q287-r5-ink) !important;
  font-family: Nunito, Inter, "Segoe UI", Arial, sans-serif !important;
}

/* -------------------------------------------------------------------------
   Kompakter Desktopkopf: alle Ziele bleiben direkt sichtbar und klickbar.
   ------------------------------------------------------------------------- */

@media (min-width: 981px) {
  html body#theq-v255-body > .topbar {
    position: fixed !important;
    inset: 0 0 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background:
      linear-gradient(105deg, #041f37 0%, #073655 52%, #052b49 100%) !important;
    border: 0 !important;
    box-shadow: 0 10px 28px rgba(2, 25, 45, .28) !important;
  }

  html body#theq-v255-body > .topbar::before,
  html body#theq-v255-body > .topbar::after,
  html body#theq-v255-body > .topbar .brand::before,
  html body#theq-v255-body > .topbar .brand::after,
  html body#theq-v255-body > .topbar .neo-header-bullets::before,
  html body#theq-v255-body > .topbar .neo-header-bullets::after {
    content: none !important;
    display: none !important;
  }

  html body#theq-v255-body > .topbar .topbar-inner {
    display: grid !important;
    grid-template-columns: 245px minmax(325px, .9fr) minmax(570px, 1.55fr) !important;
    align-items: center !important;
    gap: 22px !important;
    min-height: 182px !important;
    padding: 12px 0 !important;
  }

  html body#theq-v255-body > .topbar .brand {
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 9px !important;
    min-width: 0 !important;
  }

  html body#theq-v255-body > .topbar .brand-theq img {
    width: 112px !important;
    height: auto !important;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .25)) !important;
  }

  html body#theq-v255-body > .topbar .brand-powered {
    gap: 3px !important;
  }

  html body#theq-v255-body > .topbar .brand-powered em {
    font-size: 11px !important;
    font-weight: 850 !important;
  }

  html body#theq-v255-body > .topbar .brand-powered img {
    width: 174px !important;
    height: auto !important;
    filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .24)) !important;
  }

  html body#theq-v255-body > .topbar .neo-header-bullets {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  html body#theq-v255-body > .topbar .neo-header-bullets li {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 3px 8px 3px 28px !important;
    border: 1px solid rgba(104, 187, 229, .18) !important;
    border-radius: 8px !important;
    background: rgba(19, 93, 137, .34) !important;
    color: #f4fbff !important;
    font-size: 10.5px !important;
    line-height: 1.12 !important;
    font-weight: 750 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  }

  html body#theq-v255-body > .topbar .neo-header-bullets li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 7px !important;
    top: 50% !important;
    display: grid !important;
    place-items: center !important;
    width: 15px !important;
    height: 15px !important;
    border: 1px solid #66b9de !important;
    border-radius: 50% !important;
    background: #0d5f8c !important;
    color: #dff6ff !important;
    font-size: 9px !important;
    font-weight: 1000 !important;
    transform: translateY(-50%) !important;
  }

  html body#theq-v255-body > .topbar .neo-header-bullets li .q270-feature-copy,
  html body#theq-v255-body > .topbar .neo-header-bullets li b {
    min-width: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    white-space: nowrap !important;
  }

  html body#theq-v255-body > .topbar .neo-header-bullets li b {
    font-weight: 900 !important;
  }

  html body#theq-v255-body > .topbar .neo-header-bullets .q270-feature-arrow {
    color: #78c9ed !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  html body#theq-v255-body > .topbar .nav {
    grid-column: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: 36px !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 650px !important;
    margin: 0 0 0 auto !important;
    align-content: center !important;
  }

  html body#theq-v255-body > .topbar .nav a:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  html body#theq-v255-body > .topbar .nav a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(255, 224, 177, .64) !important;
    border-radius: 10px !important;
    background:
      linear-gradient(180deg, var(--q287-r5-orange-500), var(--q287-r5-orange-700)) !important;
    color: #fff !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.05 !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(70, 28, 0, .48) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .38),
      0 4px 9px rgba(0, 0, 0, .17) !important;
    overflow: hidden !important;
    white-space: normal !important;
  }

  html body#theq-v255-body > .topbar .nav a.nav-legal {
    border-color: rgba(160, 219, 245, .62) !important;
    background:
      linear-gradient(180deg, var(--q287-r5-blue-500), var(--q287-r5-blue-700)) !important;
    text-shadow: 0 1px 2px rgba(0, 37, 62, .46) !important;
  }

  html body#theq-v255-body > .topbar .nav a::before,
  html body#theq-v255-body > .topbar .nav a::after {
    content: none !important;
    display: none !important;
  }

  html body#theq-v255-body > .topbar .nav a:hover,
  html body#theq-v255-body > .topbar .nav a:focus-visible {
    transform: translateY(-1px) !important;
    filter: brightness(1.06) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .42),
      0 6px 13px rgba(0, 0, 0, .22) !important;
    outline: 2px solid rgba(255, 255, 255, .76) !important;
    outline-offset: 2px !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  html body#theq-v255-body > .topbar .topbar-inner {
    grid-template-columns: 205px minmax(275px, .82fr) minmax(450px, 1.35fr) !important;
    gap: 16px !important;
    min-height: 198px !important;
  }

  html body#theq-v255-body > .topbar .brand-theq img {
    width: 98px !important;
  }

  html body#theq-v255-body > .topbar .brand-powered img {
    width: 155px !important;
  }

  html body#theq-v255-body > .topbar .neo-header-bullets li {
    font-size: 9.7px !important;
  }

  html body#theq-v255-body > .topbar .nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 500px !important;
  }
}

/* -------------------------------------------------------------------------
   Orange Hauptsektion und blaue Unterkarten – überall dasselbe System.
   ------------------------------------------------------------------------- */

html body#theq-v255-body > #v169InvestmentBlock,
html body#theq-v255-body > section.section.container {
  box-sizing: border-box !important;
  padding: 0 14px 14px !important;
  overflow: hidden !important;
  border: 2px solid var(--q287-r5-orange-500) !important;
  border-radius: 18px !important;
  background: var(--q287-r5-orange-050) !important;
  box-shadow:
    0 0 0 1px rgba(239, 148, 39, .10),
    var(--q287-r5-shadow) !important;
}

html body#theq-v255-body > #v169InvestmentBlock > .v169-main-title,
html body#theq-v255-body > section.section.container > .section-title {
  width: auto !important;
  margin: -2px -14px 14px !important;
}

html body#theq-v255-body .v169-main-section {
  overflow: hidden !important;
  border: 2px solid var(--q287-r5-orange-500) !important;
  border-radius: 18px !important;
  background: var(--q287-r5-orange-050) !important;
  box-shadow:
    0 0 0 1px rgba(239, 148, 39, .10),
    var(--q287-r5-shadow) !important;
}

html body#theq-v255-body .v169-main-title,
html body#theq-v255-body .v169-section-title,
html body#theq-v255-body > section.section.container > .section-title {
  min-height: 48px !important;
  padding: 11px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 222, 178, .62) !important;
  border-radius: 16px 16px 0 0 !important;
  background:
    linear-gradient(100deg, var(--q287-r5-orange-700), var(--q287-r5-orange-600) 58%, var(--q287-r5-orange-500)) !important;
  color: #fff !important;
  font-family: Nunito, Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(.98rem, 1.35vw, 1.25rem) !important;
  font-weight: 950 !important;
  line-height: 1.18 !important;
  letter-spacing: -.01em !important;
  text-shadow: 0 2px 3px rgba(55, 22, 0, .56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 5px 12px rgba(97, 43, 0, .15) !important;
}

html body#theq-v255-body .v169-section-body {
  padding: 14px !important;
  background: var(--q287-r5-orange-050) !important;
}

html body#theq-v255-body #v169InvestmentBlock .v180-card,
html body#theq-v255-body #v169LageSection #v169LageSlot,
html body#theq-v255-body #v169SimSection .v169-filter-area,
html body#theq-v255-body #v169SimSection #v169StageSlot,
html body#theq-v255-body #v169SimSection #v169PlanSlot,
html body#theq-v255-body #apartmentList > .v74-exit-summary,
html body#theq-v255-body #apartmentList .v254-panel,
html body#theq-v255-body #berechnung .subpanel,
html body#theq-v255-body #berechnung .q284-subsection,
html body#theq-v255-body #berechnung .v228-projection-section {
  border-color: var(--q287-contour) !important;
  border-radius: var(--q287-r5-radius) !important;
  background: var(--q287-r5-blue-100) !important;
  box-shadow: var(--q287-contour-glow), var(--q287-r5-shadow-soft) !important;
}

html body#theq-v255-body #v169InvestmentBlock .v180-card-title,
html body#theq-v255-body #v169LageSection .v169-blue-strip,
html body#theq-v255-body #v169SimSection .v169-blue-strip,
html body#theq-v255-body #apartmentList > .v74-exit-summary > .v74-exit-head,
html body#theq-v255-body #apartmentList .v254-panel-title,
html body#theq-v255-body #berechnung .subpanel > h4,
html body#theq-v255-body #berechnung .q283-person-head,
html body#theq-v255-body #berechnung .v228-titlebar {
  width: auto !important;
  background: var(--q287-subcard-head) !important;
  color: #fff !important;
  font-family: Nunito, Inter, "Segoe UI", Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 27, 46, .50) !important;
  box-shadow: var(--q287-head-shadow) !important;
}

html body#theq-v255-body #v169InvestmentBlock .v180-tile,
html body#theq-v255-body #apartmentList .v74-exit-kpi,
html body#theq-v255-body #apartmentList .v74-growth-panel,
html body#theq-v255-body #apartmentList .v254-finance-meta,
html body#theq-v255-body #apartmentList .v254-loan-row,
html body#theq-v255-body #apartmentList .ap-extra-kpi,
html body#theq-v255-body #apartmentList .ap-calc-section,
html body#theq-v255-body #berechnung .kpi,
html body#theq-v255-body #berechnung .readonly-box,
html body#theq-v255-body #berechnung .helper-box,
html body#theq-v255-body #unterlagen .about-card,
html body#theq-v255-body #videos .video-card,
html body#theq-v255-body #videos .photo-card,
html body#theq-v255-body #energieeffizienz .energy-card,
html body#theq-v255-body #formeln .logic-card,
html body#theq-v255-body #formeln .logic-formula {
  border-color: rgba(62, 157, 202, .66) !important;
  background: var(--q287-small-card) !important;
  box-shadow: var(--q287-r5-shadow-soft) !important;
}

html body#theq-v255-body #apartmentList .ap-card {
  overflow: hidden !important;
  border: 1.5px solid rgba(62, 157, 202, .72) !important;
  border-radius: 18px !important;
  background: var(--q287-r5-blue-050) !important;
  box-shadow: var(--q287-r5-shadow) !important;
}

html body#theq-v255-body #apartmentList .v253-card-head {
  background: var(--q287-subcard-head) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 27, 46, .50) !important;
  box-shadow: var(--q287-head-shadow) !important;
}

html body#theq-v255-body #apartmentList .price-tag {
  min-width: 138px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(57, 157, 203, .82) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(180deg, #2a9dce 0%, #0b6d9d 100%) !important;
  color: #fff !important;
  font-weight: 950 !important;
  line-height: 1.22 !important;
  text-shadow: 0 1px 2px rgba(0, 38, 63, .50) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 5px 12px rgba(5, 70, 108, .18) !important;
}

/* -------------------------------------------------------------------------
   Verbindliches Statussystem für Hover-, Kurz- und Detailkarten.
   ------------------------------------------------------------------------- */

.q272-role-choice,
.q270-option,
#apartmentList .q276-state-button,
#apartmentList .v253-option,
button[data-hover-buy] {
  font-family: Nunito, Inter, "Segoe UI", Arial, sans-serif !important;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background .15s ease !important;
}

.q272-role-choice:hover,
.q270-option:hover,
#apartmentList .q276-state-button:hover,
#apartmentList .v253-option:hover,
button[data-hover-buy]:hover {
  transform: translateY(-1px) !important;
}

.q272-role-choice:focus-visible,
.q270-option:focus-visible,
#apartmentList .q276-state-button:focus-visible,
#apartmentList .v253-option:focus-within,
button[data-hover-buy]:focus-visible {
  outline: 3px solid rgba(18, 135, 188, .26) !important;
  outline-offset: 2px !important;
}

/* Objektstrategie: Orange oder Grau. */
.q272-role-choice.is-active,
.q272-role-choice[aria-pressed="true"],
.q272-role-choice.is-q276-active {
  border-color: #f3a14d !important;
  background:
    linear-gradient(180deg, var(--q287-r5-orange-500), var(--q287-r5-orange-700)) !important;
  color: var(--q287-r5-orange-600) !important;
  filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 5px 12px rgba(126, 58, 5, .20) !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: var(--q287-r5-orange-600) !important;
  background: #fff7ec !important;
  color: var(--q287-r5-orange-600) !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 {
  color: var(--q287-r5-orange-600) !important;
}

.q272-role-choice:not(.is-active),
.q272-role-choice[aria-pressed="false"],
.q272-role-choice.is-q276-inactive {
  border-color: var(--q287-r5-grey-300) !important;
  background:
    linear-gradient(180deg, #b8c0c7 0%, var(--q287-r5-grey-600) 100%) !important;
  color: var(--q287-r5-grey-700) !important;
  filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 4px 10px rgba(48, 59, 68, .15) !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: var(--q287-r5-grey-600) !important;
  background: #f2f4f5 !important;
  color: var(--q287-r5-grey-600) !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 {
  color: var(--q287-r5-grey-600) !important;
}

/* Konfiguration in der 2D-/Hoverkarte: Blau oder Grau. */
.q270-option {
  min-height: 58px !important;
  border-width: 2px !important;
  border-radius: 13px !important;
  box-shadow: var(--q287-r5-shadow-soft) !important;
}

.q270-option.is-on {
  border-color: var(--q287-r5-blue-600) !important;
  background:
    linear-gradient(180deg, #f5fcff 0%, #d9f0f9 100%) !important;
  color: var(--q287-r5-blue-700) !important;
}

.q270-option.is-off {
  border-color: var(--q287-r5-grey-300) !important;
  background:
    linear-gradient(180deg, #f6f7f8 0%, #e2e6e9 100%) !important;
  color: var(--q287-r5-grey-700) !important;
}

.q270-option .q270-option-state {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  border: 3px solid currentColor !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.q270-option .q270-option-state::before {
  content: none !important;
  display: none !important;
}

.q270-option .q270-option-state::after {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  font-family: Arial, sans-serif !important;
  font-size: 21px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

.q270-option.is-on .q270-option-state {
  border-color: var(--q287-r5-blue-600) !important;
  color: var(--q287-r5-blue-600) !important;
  background: #effaff !important;
}

.q270-option.is-on .q270-option-state::after {
  content: "✓" !important;
  color: var(--q287-r5-blue-600) !important;
}

.q270-option.is-off .q270-option-state {
  border-color: var(--q287-r5-grey-600) !important;
  color: var(--q287-r5-grey-600) !important;
  background: #f2f4f5 !important;
}

.q270-option.is-off .q270-option-state::after {
  content: "×" !important;
  color: var(--q287-r5-grey-600) !important;
}

/* Ausführliche Wohnungskarten: aktives Add-on/Nutzung Blau, inaktiv Grau. */
#apartmentList .v253-option {
  border-width: 1.5px !important;
  border-radius: 14px !important;
  box-shadow: var(--q287-r5-shadow-soft) !important;
}

#apartmentList .v253-option.active,
#apartmentList .v253-option:has(input[type="checkbox"]:checked) {
  border-color: var(--q287-r5-blue-500) !important;
  background:
    linear-gradient(180deg, #f3fbff 0%, #dff2fa 100%) !important;
  color: var(--q287-r5-blue-700) !important;
}

#apartmentList .v253-option.inactive,
#apartmentList .v253-option:has(input[type="checkbox"]:not(:checked)) {
  border-color: var(--q287-r5-grey-300) !important;
  background:
    linear-gradient(180deg, #f7f8f9 0%, #e8ebed 100%) !important;
  color: var(--q287-r5-grey-700) !important;
}

#apartmentList .v253-option .v253-option-copy b,
#apartmentList .v253-option .v253-option-copy small,
#apartmentList .v253-option .v253-option-copy strong {
  color: inherit !important;
}

#apartmentList .v253-option.active .v253-option-copy strong,
#apartmentList .v253-option:has(input[type="checkbox"]:checked) .v253-option-copy strong {
  color: var(--q287-r5-blue-700) !important;
}

#apartmentList .v253-option input[type="checkbox"] {
  appearance: none !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 3px solid var(--q287-r5-grey-600) !important;
  border-radius: 8px !important;
  background: #f2f4f5 !important;
  color: var(--q287-r5-grey-600) !important;
  box-shadow: none !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: "×" !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  color: var(--q287-r5-grey-600) !important;
  font-family: Arial, sans-serif !important;
  font-size: 21px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  transform: none !important;
}

#apartmentList .v253-option input[type="checkbox"]:checked {
  border-color: var(--q287-r5-blue-600) !important;
  background: #effaff !important;
  color: var(--q287-r5-blue-600) !important;
}

#apartmentList .v253-option input[type="checkbox"]:checked::after {
  content: "✓" !important;
  color: var(--q287-r5-blue-600) !important;
}

/* Aktionsreihe der Ergebnis-/Detailkarten. */
#apartmentList .q276-state-button {
  min-height: 44px !important;
  border-width: 2px !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    0 5px 11px rgba(5, 40, 69, .15) !important;
}

#apartmentList .q276-state-button .q276-button-state {
  display: grid !important;
  place-items: center !important;
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  padding: 0 !important;
  border: 3px solid currentColor !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

#apartmentList .q276-state-button .q276-button-state::after {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  font-family: Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

#apartmentList .q276-state-button[data-action="buytoggle"].is-q276-active {
  border-color: #73c5e7 !important;
  background:
    linear-gradient(180deg, var(--q287-r5-blue-500), var(--q287-r5-blue-700)) !important;
  filter: none !important;
}

#apartmentList
  .q276-state-button[data-action="buytoggle"].is-q276-active
  .q276-button-state {
  border-color: var(--q287-r5-blue-600) !important;
  background: #effaff !important;
  color: var(--q287-r5-blue-600) !important;
}

#apartmentList
  .q276-state-button[data-action="buytoggle"].is-q276-active
  .q276-button-state::after {
  content: "✓" !important;
  color: var(--q287-r5-blue-600) !important;
}

#apartmentList
  .q276-state-button[data-action="roleKeepV74"].is-q276-active,
#apartmentList
  .q276-state-button[data-action="roleSellV74"].is-q276-active {
  border-color: #f3a14d !important;
  background:
    linear-gradient(180deg, var(--q287-r5-orange-500), var(--q287-r5-orange-700)) !important;
  filter: none !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-r5-orange-600) !important;
  background: #fff7ec !important;
  color: var(--q287-r5-orange-600) !important;
}

#apartmentList
  .q276-state-button[data-action="roleKeepV74"].is-q276-active
  .q276-button-state::after,
#apartmentList
  .q276-state-button[data-action="roleSellV74"].is-q276-active
  .q276-button-state::after {
  content: "✓" !important;
  color: var(--q287-r5-orange-600) !important;
}

#apartmentList .q276-state-button.is-q276-inactive {
  border-color: var(--q287-r5-grey-300) !important;
  background:
    linear-gradient(180deg, #b8c0c7 0%, var(--q287-r5-grey-600) 100%) !important;
  filter: none !important;
}

#apartmentList
  .q276-state-button.is-q276-inactive
  .q276-button-state {
  border-color: var(--q287-r5-grey-600) !important;
  background: #f2f4f5 !important;
  color: var(--q287-r5-grey-600) !important;
}

#apartmentList
  .q276-state-button.is-q276-inactive
  .q276-button-state::after {
  content: "×" !important;
  color: var(--q287-r5-grey-600) !important;
}

/* Kaufabsicht direkt in der 2D-/Hoverkarte. */
button[data-hover-buy] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 6px 7px 6px 12px !important;
  border: 2px solid var(--q287-r5-grey-300) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, #b8c0c7 0%, var(--q287-r5-grey-600) 100%) !important;
  color: #fff !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .34) !important;
  box-shadow: 0 4px 10px rgba(48, 59, 68, .15) !important;
}

button[data-hover-buy].is-blue,
button[data-hover-buy].q287-is-active {
  border-color: #73c5e7 !important;
  background:
    linear-gradient(180deg, var(--q287-r5-blue-500), var(--q287-r5-blue-700)) !important;
}

button[data-hover-buy] .q287-hover-state {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border: 3px solid var(--q287-r5-grey-600) !important;
  border-radius: 8px !important;
  background: #f2f4f5 !important;
  color: var(--q287-r5-grey-600) !important;
  font-family: Arial, sans-serif !important;
  font-size: 20px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

button[data-hover-buy].is-blue .q287-hover-state,
button[data-hover-buy].q287-is-active .q287-hover-state {
  border-color: var(--q287-r5-blue-600) !important;
  background: #effaff !important;
  color: var(--q287-r5-blue-600) !important;
}

/* -------------------------------------------------------------------------
   Gehaltsabrechnung: VOR und NACH sofort nebeneinander, ohne X-Scroller.
   ------------------------------------------------------------------------- */

@media (min-width: 981px) {
  html body#theq-v255-body
    #berechnung
    .v228-projection-section.q287-payroll-positioned
    .v228-datev-compare {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
}

html body#theq-v255-body
  #berechnung
  .v228-projection-section.q287-payroll-positioned,
html body#theq-v255-body
  #berechnung
  .v228-projection-section.q287-payroll-positioned
  .v228-datev-compare,
html body#theq-v255-body
  #berechnung
  .v228-projection-section.q287-payroll-positioned
  .v228-datev-col,
html body#theq-v255-body
  #berechnung
  .v228-projection-section.q287-payroll-positioned
  .v228-datev-sheet {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: visible !important;
}

#berechnung .v228-datev-col {
  border: 1px solid rgba(62, 157, 202, .54) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: var(--q287-r5-shadow-soft) !important;
}

#berechnung .v228-datev-col b,
#berechnung .v228-datev-col strong,
#berechnung .v240-allowance-summary b,
#berechnung .v228-delta b {
  font-weight: 950 !important;
}

#berechnung .v240-allowance-summary {
  border-color: rgba(62, 157, 202, .62) !important;
  background: #e8f6fc !important;
  color: var(--q287-r5-blue-700) !important;
}

#berechnung .q287-payroll-toggle {
  border-color: #f3a14d !important;
  background:
    linear-gradient(180deg, var(--q287-r5-orange-500), var(--q287-r5-orange-700)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 5px 12px rgba(126, 58, 5, .18) !important;
}

/* -------------------------------------------------------------------------
   Eigenständiger Mobilkopf: USPs und Menü immer einspaltig, niemals scrollbar.
   ------------------------------------------------------------------------- */

@media (max-width: 980px) {
  html body#theq-v255-body {
    overflow-x: hidden !important;
  }

  #v257MobileHeader {
    background:
      linear-gradient(180deg, var(--q287-r5-navy-950), var(--q287-r5-navy-900)) !important;
    box-shadow: 0 9px 24px rgba(2, 25, 45, .28) !important;
  }

  #v257MobileHeader .v257-bar {
    height: 74px !important;
    min-height: 74px !important;
    padding: 9px 12px !important;
    background: transparent !important;
  }

  #v257MobileHeader .v257-brand-theq {
    max-width: 78px !important;
    height: 44px !important;
  }

  #v257MobileHeader .v257-powered img {
    width: 102px !important;
    max-width: 102px !important;
  }

  #v257MobileHeader #v257MobileToggle {
    min-width: 112px !important;
    min-height: 42px !important;
    height: 42px !important;
    border: 1px solid #f3a14d !important;
    border-radius: 12px !important;
    background:
      linear-gradient(180deg, var(--q287-r5-orange-500), var(--q287-r5-orange-700)) !important;
    color: #fff !important;
    font-size: .92rem !important;
    font-weight: 950 !important;
    text-shadow: 0 1px 2px rgba(70, 28, 0, .48) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .36),
      0 5px 12px rgba(0, 0, 0, .20) !important;
  }

  #v257MobileHeader .v257-panel {
    top: 74px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #v257MobileHeader .v257-usp,
  #v257MobileHeader .v257-menu,
  #v257MobileHeader .v257-menu-grid,
  #v257MobileHeader .v257-menu-col {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #v257MobileHeader .v257-usp {
    padding: 10px 12px 14px !important;
    background:
      linear-gradient(180deg, rgba(6, 48, 79, .99), rgba(4, 35, 60, .99)) !important;
  }

  #v257MobileHeader .v257-usp-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #v257MobileHeader .v257-usp-list li {
    min-height: 48px !important;
    padding: 9px 12px 9px 43px !important;
    border: 1px solid rgba(104, 187, 229, .28) !important;
    border-radius: 12px !important;
    background: rgba(20, 92, 136, .64) !important;
    color: #fff !important;
    font-size: clamp(.72rem, 2.9vw, .86rem) !important;
    line-height: 1.18 !important;
    font-weight: 850 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .30) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  }

  #v257MobileHeader .v257-usp-list li::before {
    left: 12px !important;
    width: 21px !important;
    height: 21px !important;
    border-color: #65b9df !important;
    background: #0c5f8b !important;
    color: #e5f9ff !important;
    box-shadow: none !important;
  }

  #v257MobileHeader .v257-menu {
    padding: 12px !important;
    background:
      linear-gradient(180deg, rgba(6, 48, 79, .99), rgba(4, 35, 60, .99)) !important;
  }

  #v257MobileHeader .v257-menu-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  #v257MobileHeader .v257-menu-col.v257-main {
    order: 1 !important;
  }

  #v257MobileHeader .v257-menu-col.v257-legal {
    order: 2 !important;
  }

  #v257MobileHeader .v257-menu-col.nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  #v257MobileHeader .v257-menu-col.nav a {
    width: min(292px, 100%) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 42px !important;
    height: auto !important;
    margin: 0 0 0 auto !important;
    padding: 9px 13px !important;
    border: 1px solid #f3a14d !important;
    border-radius: 11px !important;
    background:
      linear-gradient(180deg, var(--q287-r5-orange-500), var(--q287-r5-orange-700)) !important;
    color: #fff !important;
    font-size: .88rem !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(70, 28, 0, .48) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .32),
      0 4px 10px rgba(0, 0, 0, .17) !important;
    white-space: normal !important;
  }

  #v257MobileHeader .v257-menu-col.nav a.nav-legal {
    border-color: rgba(117, 198, 232, .72) !important;
    background:
      linear-gradient(180deg, var(--q287-r5-blue-500), var(--q287-r5-blue-700)) !important;
  }

  #v257MobileHeader .v257-menu-col.nav a::before,
  #v257MobileHeader .v257-menu-col.nav a::after {
    content: none !important;
    display: none !important;
  }

  html body#theq-v255-body > #v169InvestmentBlock,
  html body#theq-v255-body > section.section.container {
    padding: 0 9px 9px !important;
    border-radius: 15px !important;
  }

  html body#theq-v255-body > #v169InvestmentBlock > .v169-main-title,
  html body#theq-v255-body > section.section.container > .section-title {
    margin: -2px -9px 10px !important;
  }

  html body#theq-v255-body .v169-main-title,
  html body#theq-v255-body .v169-section-title,
  html body#theq-v255-body > section.section.container > .section-title {
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 13px 13px 0 0 !important;
    font-size: clamp(.84rem, 3.7vw, 1rem) !important;
  }

  html body#theq-v255-body .v169-section-body {
    padding: 9px !important;
  }

  #apartmentList .ap-top {
    align-items: stretch !important;
    gap: 10px !important;
  }

  #apartmentList .price-tag {
    min-width: 116px !important;
    padding: 9px 10px !important;
  }

  #berechnung
    .v228-projection-section.q287-payroll-positioned
    .v228-datev-compare {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    overflow: visible !important;
  }
}

@media (max-width: 520px) {
  #v257MobileHeader .v257-powered span {
    display: none !important;
  }

  #v257MobileHeader .v257-powered img {
    width: 88px !important;
    max-width: 88px !important;
  }

  #v257MobileHeader #v257MobileToggle {
    min-width: 100px !important;
    padding: 0 11px !important;
  }

  #apartmentList .ap-top {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #apartmentList .price-tag {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Letzte Präzisierung gegen besonders spezifische historische Regeln. */
@media (min-width: 1181px) {
  html body#theq-v255-body > .topbar .neo-header-bullets {
    gap: 3px !important;
  }

  html body#theq-v255-body > .topbar .neo-header-bullets li {
    min-height: 18px !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
  }
}

html body#theq-v255-body
  #apartmentList
  .q276-state-button[data-action="buytoggle"].is-q276-inactive,
html body#theq-v255-body
  #apartmentList
  .q276-state-button[data-action="roleKeepV74"].is-q276-inactive,
html body#theq-v255-body
  #apartmentList
  .q276-state-button[data-action="roleSellV74"].is-q276-inactive {
  border-color: var(--q287-r5-grey-300) !important;
  background:
    linear-gradient(180deg, #b8c0c7 0%, var(--q287-r5-grey-600) 100%) !important;
  filter: none !important;
}

html body#theq-v255-body
  #apartmentList
  .q276-state-button.is-q276-inactive
  .q276-button-state {
  border-color: var(--q287-r5-grey-600) !important;
  background: #f2f4f5 !important;
  color: var(--q287-r5-grey-600) !important;
}

html body#theq-v255-body
  #apartmentList
  .q276-state-button.is-q276-inactive
  .q276-button-state::after {
  color: var(--q287-r5-grey-600) !important;
}

html body#theq-v255-body button[data-hover-buy].is-blue,
html body#theq-v255-body button[data-hover-buy].q287-is-active {
  border-color: #73c5e7 !important;
  background:
    linear-gradient(180deg, var(--q287-r5-blue-500), var(--q287-r5-blue-700)) !important;
}

/* Der einzig verbliebene Nach-oben-Button gilt auf Desktop und Mobil. */
html body#theq-v255-body #v179BackToTop {
  position: fixed !important;
  right: 18px !important;
  bottom: 20px !important;
  z-index: 2400 !important;
  display: grid !important;
  place-items: center !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  border: 2px solid #f3a14d !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, var(--q287-r5-orange-500), var(--q287-r5-orange-700)) !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px rgba(70, 28, 0, .48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 7px 18px rgba(5, 40, 69, .24) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
  transition:
    opacity .18s ease,
    visibility .18s ease,
    transform .18s ease !important;
}

html body#theq-v255-body.v165-show-top #v179BackToTop,
html body#theq-v255-body.v166-show-top #v179BackToTop {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

html body#theq-v255-body #v179BackToTop:hover,
html body#theq-v255-body #v179BackToTop:focus-visible {
  filter: brightness(1.06) !important;
  outline: 3px solid rgba(239, 148, 39, .24) !important;
  outline-offset: 2px !important;
}

/* Hauptüberschriften schlagen auch die ältesten, sehr spezifischen Themes. */
html body#theq-v255-body
  > section#v169InvestmentBlock
  > .v169-main-title,
html body#theq-v255-body
  #v169LageSection.v169-main-section
  > .v169-section-title,
html body#theq-v255-body
  #v169SimSection.v169-main-section
  > .v169-section-title,
html body#theq-v255-body
  > section.section.container:is(
    #wohnungen,
    #berechnung,
    #energieeffizienz,
    #formeln,
    #reservierung,
    #finanzierungsanfrage,
    #termine,
    #videos,
    #unterlagen,
    #afa-effekt
  )
  > .section-title {
  background:
    linear-gradient(
      100deg,
      var(--q287-r5-orange-700),
      var(--q287-r5-orange-600) 58%,
      var(--q287-r5-orange-500)
    ) !important;
  color: #fff !important;
  text-shadow: 0 2px 3px rgba(55, 22, 0, .56) !important;
}

/* =========================================================================
   Q287 R6 – eindeutige Intentionsfarben und belastbare Navigation
   ========================================================================= */

/* Jeder gefüllte Intentionsbutton verwendet dieselbe Typografie. */
html body#theq-v255-body .q272-role-choice,
html body#theq-v255-body #apartmentList .q276-state-button,
html body#theq-v255-body button[data-hover-buy] {
  color: #fff !important;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, .88),
    0 0 1px rgba(0, 0, 0, .92) !important;
}

html body#theq-v255-body .q272-role-choice .q275-role-text,
html body#theq-v255-body
  #apartmentList
  .q276-state-button
  .q276-state-label,
html body#theq-v255-body button[data-hover-buy] .q287-hover-label {
  color: #fff !important;
  font-weight: 950 !important;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, .88),
    0 0 1px rgba(0, 0, 0, .92) !important;
}

/* Automatisch ermittelter Modus gemäß der skizzierten Einzelkauf-Anzeige. */
html body#theq-v255-body #theqModePill.q287-mode-status {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 12px !important;
  width: min(390px, 100%) !important;
  min-height: 50px !important;
  padding: 7px 8px 7px 17px !important;
  border: 2px solid #73c5e7 !important;
  border-radius: 14px !important;
  background:
    linear-gradient(
      180deg,
      var(--q287-r5-blue-500),
      var(--q287-r5-blue-700)
    ) !important;
  color: #fff !important;
  font-weight: 950 !important;
  text-align: left !important;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, .88),
    0 0 1px rgba(0, 0, 0, .92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 5px 12px rgba(5, 70, 108, .18) !important;
}

html body#theq-v255-body #theqModePill .q287-mode-state {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 3px solid var(--q287-r5-blue-600) !important;
  border-radius: 9px !important;
  background: #effaff !important;
  color: var(--q287-r5-blue-600) !important;
  font-family: Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

/* Bestandsobjekt aktiv: Orange + oranges Statusfeld + oranges Häkchen. */
html body#theq-v255-body
  .q272-role-choice.q287-kind-keep.is-q276-active,
html body#theq-v255-body
  .q272-role-choice.q287-kind-keep[aria-pressed="true"],
html body#theq-v255-body
  #apartmentList
  .q276-state-button.q287-kind-keep.is-q276-active {
  border-color: #f3a14d !important;
  background:
    linear-gradient(
      180deg,
      var(--q287-r5-orange-500),
      var(--q287-r5-orange-700)
    ) !important;
  color: #fff !important;
  filter: none !important;
}

html body#theq-v255-body
  .q272-role-choice.q287-kind-keep.is-q276-active
  .q275-role-state,
html body#theq-v255-body
  .q272-role-choice.q287-kind-keep[aria-pressed="true"]
  .q275-role-state,
html body#theq-v255-body
  #apartmentList
  .q276-state-button.q287-kind-keep.is-q276-active
  .q276-button-state {
  border-color: var(--q287-r5-orange-600) !important;
  background: #fff7ec !important;
  color: var(--q287-r5-orange-600) !important;
}

html body#theq-v255-body
  .q272-role-choice.q287-kind-keep.is-q276-active
  .q275-role-state::after,
html body#theq-v255-body
  .q272-role-choice.q287-kind-keep[aria-pressed="true"]
  .q275-role-state::after,
html body#theq-v255-body
  #apartmentList
  .q276-state-button.q287-kind-keep.is-q276-active
  .q276-button-state::after {
  content: "✓" !important;
  color: var(--q287-r5-orange-600) !important;
}

/*
 * Kaufabsicht und Verkaufsabsicht aktiv: Blau + blaues Statusfeld +
 * blaues Häkchen. Damit unterscheiden sie sich eindeutig vom Bestand.
 */
html body#theq-v255-body
  .q272-role-choice.q287-kind-sell.is-q276-active,
html body#theq-v255-body
  .q272-role-choice.q287-kind-sell[aria-pressed="true"],
html body#theq-v255-body
  #apartmentList
  .q276-state-button.q287-kind-purchase.is-q276-active,
html body#theq-v255-body
  #apartmentList
  .q276-state-button.q287-kind-sell.is-q276-active,
html body#theq-v255-body button[data-hover-buy].q287-is-active,
html body#theq-v255-body button[data-hover-buy].is-blue {
  border-color: #73c5e7 !important;
  background:
    linear-gradient(
      180deg,
      var(--q287-r5-blue-500),
      var(--q287-r5-blue-700)
    ) !important;
  color: #fff !important;
  filter: none !important;
}

html body#theq-v255-body
  .q272-role-choice.q287-kind-sell.is-q276-active
  .q275-role-state,
html body#theq-v255-body
  .q272-role-choice.q287-kind-sell[aria-pressed="true"]
  .q275-role-state,
html body#theq-v255-body
  #apartmentList
  .q276-state-button.q287-kind-purchase.is-q276-active
  .q276-button-state,
html body#theq-v255-body
  #apartmentList
  .q276-state-button.q287-kind-sell.is-q276-active
  .q276-button-state,
html body#theq-v255-body
  button[data-hover-buy].q287-is-active
  .q287-hover-state,
html body#theq-v255-body
  button[data-hover-buy].is-blue
  .q287-hover-state {
  border-color: var(--q287-r5-blue-600) !important;
  background: #effaff !important;
  color: var(--q287-r5-blue-600) !important;
}

html body#theq-v255-body
  .q272-role-choice.q287-kind-sell.is-q276-active
  .q275-role-state::after,
html body#theq-v255-body
  .q272-role-choice.q287-kind-sell[aria-pressed="true"]
  .q275-role-state::after,
html body#theq-v255-body
  #apartmentList
  .q276-state-button.q287-kind-purchase.is-q276-active
  .q276-button-state::after,
html body#theq-v255-body
  #apartmentList
  .q276-state-button.q287-kind-sell.is-q276-active
  .q276-button-state::after {
  content: "✓" !important;
  color: var(--q287-r5-blue-600) !important;
}

/* Inaktiv bleibt unabhängig von der fachlichen Bedeutung durchgehend grau. */
html body#theq-v255-body .q272-role-choice.is-q276-inactive,
html body#theq-v255-body
  #apartmentList
  .q276-state-button.is-q276-inactive,
html body#theq-v255-body button[data-hover-buy].q287-is-inactive {
  border-color: var(--q287-r5-grey-300) !important;
  background:
    linear-gradient(180deg, #b8c0c7 0%, var(--q287-r5-grey-600) 100%) !important;
  color: #fff !important;
  filter: none !important;
}

html body#theq-v255-body
  .q272-role-choice.is-q276-inactive
  .q275-role-state,
html body#theq-v255-body
  #apartmentList
  .q276-state-button.is-q276-inactive
  .q276-button-state,
html body#theq-v255-body
  button[data-hover-buy].q287-is-inactive
  .q287-hover-state {
  border-color: var(--q287-r5-grey-600) !important;
  background: #f2f4f5 !important;
  color: var(--q287-r5-grey-600) !important;
}

html body#theq-v255-body
  .q272-role-choice.is-q276-inactive
  .q275-role-state::after,
html body#theq-v255-body
  #apartmentList
  .q276-state-button.is-q276-inactive
  .q276-button-state::after {
  content: "×" !important;
  color: var(--q287-r5-grey-600) !important;
}

/* Die Navigationsbeschriftung folgt derselben gut lesbaren Schriftlogik. */
html body#theq-v255-body > .topbar .nav a,
html body#theq-v255-body #v257MobileHeader .v257-menu-col.nav a,
html body#theq-v255-body #v257MobileHeader #v257MobileToggle {
  color: #fff !important;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, .88),
    0 0 1px rgba(0, 0, 0, .92) !important;
}

/*
 * Desktop: Die sichtbare Originalnavigation darf von keiner alten
 * Mobilheader-Regel mehr unsichtbar oder unklickbar geschaltet werden.
 */
@media (min-width: 981px) {
  html body#theq-v255-body > .topbar,
  html body#theq-v255-body > .topbar .topbar-inner,
  html body#theq-v255-body > .topbar .nav,
  html body#theq-v255-body > .topbar .nav a {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body#theq-v255-body > .topbar .nav a {
    position: relative !important;
    z-index: 3 !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  html body#theq-v255-body > .topbar::before,
  html body#theq-v255-body > .topbar::after,
  html body#theq-v255-body > .topbar .nav::before,
  html body#theq-v255-body > .topbar .nav::after,
  html body#theq-v255-body > .topbar .nav a::before,
  html body#theq-v255-body > .topbar .nav a::after {
    pointer-events: none !important;
  }
}