/*
 * THE Q · Q288
 * Geführte Kundenreise auf Basis der unveränderten Q287-Rechenlogik.
 */

body.q288-guided {
  scroll-behavior: smooth;
}

body.q288-guided #etagen-ueberblick {
  display: none !important;
}

body.q288-guided #wohnungslage > .section-title {
  display: none !important;
}

body.q288-guided #wohnungslage > .content-card {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.q288-journey {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px !important;
  margin-bottom: 16px !important;
  padding: 12px !important;
  border: 2px solid #00aeef;
  border-radius: 18px;
  background: #eaf6ff;
  box-shadow:
    0 0 0 1px rgba(0, 174, 239, .20),
    0 8px 16px rgba(0, 40, 74, .18);
}

.q288-journey a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 8px 13px;
  border: 2px solid rgba(255, 244, 205, .96);
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      #ffd46d 0%,
      #ffad21 36%,
      #f29a00 62%,
      #bd7000 100%
    );
  color: #fff;
  text-decoration: none;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, .82),
    1px 1px 0 rgba(0, 0, 0, .62);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .72),
    inset 0 -3px 0 rgba(95, 52, 0, .28),
    0 7px 11px rgba(0, 35, 68, .24);
}

.q288-journey a:hover,
.q288-journey a:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.05);
  outline: 3px solid rgba(0, 174, 239, .42);
  outline-offset: 2px;
}

.q288-journey a > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, .88);
  border-radius: 9px;
  background: rgba(177, 101, 0, .42);
  font: 1000 1rem/1 Nunito, Arial, sans-serif;
}

.q288-journey a > strong {
  align-self: end;
  font-size: .98rem;
  line-height: 1.02;
}

.q288-journey a > small {
  align-self: start;
  font-size: .68rem;
  font-weight: 900;
  line-height: 1.05;
}

.q288-step-section {
  scroll-margin-top: 200px;
}

body.q288-guided #v169LageSection {
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}

body.q288-guided #v169InvestmentBlock,
body.q288-guided #berechnung {
  margin-top: 18px !important;
}

.q288-numbered-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.q288-numbered-title::before {
  content: attr(data-q288-step);
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, .94);
  border-radius: 9px;
  background: rgba(169, 96, 0, .36);
  color: #fff;
  font: 1000 1rem/1 Nunito, Arial, sans-serif;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .72);
}

.q288-step-intro {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1.5px solid #00aeef;
  border-radius: 14px;
  background: #eaf6ff;
  color: #0b3d6b;
  box-shadow: 0 6px 10px rgba(0, 40, 74, .14);
}

.q288-step-intro > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(180deg, #2c79b8, #0a3d6c);
  color: #fff;
  font-weight: 1000;
}

.q288-step-intro > strong {
  font-size: .88rem;
  line-height: 1.24;
}

/*
 * Q288 verwendet für jede Kauf-/Objektentscheidung exakt dieselbe
 * dreidimensionale Schaltfläche. Das Statusfeld übernimmt immer die
 * Fachfarbe und bleibt vollständig innerhalb der Schaltfläche.
 */
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],
html body#theq-v255-body #planModalBuy.q288-modal-purchase {
  overflow: hidden !important;
  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-state,
html body#theq-v255-body
  #apartmentList
  .q276-state-button
  .q276-button-state,
html body#theq-v255-body button[data-hover-buy] .q287-hover-state,
html body#theq-v255-body #planModalBuy .q288-modal-state {
  position: relative !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
  margin-right: 0 !important;
  transform: none !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .78),
    3px 4px 7px rgba(0, 0, 0, .30) !important;
}

html body#theq-v255-body #planModalBuy.q288-modal-purchase {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 30px !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 170px !important;
  min-height: 44px !important;
  padding: 6px 8px 6px 14px !important;
  border: 2px solid var(--q287-r5-grey-300) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(180deg, #b8c0c7 0%, var(--q287-r5-grey-600) 100%) !important;
  font-weight: 950 !important;
}

html body#theq-v255-body #planModalBuy .q288-modal-label {
  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 #planModalBuy .q288-modal-state {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !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: 1000 21px/1 Arial, sans-serif !important;
  text-shadow: none !important;
}

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

html body#theq-v255-body
  #planModalBuy.q288-is-active
  .q288-modal-state {
  border-color: var(--q287-r5-blue-600) !important;
  background: #effaff !important;
  color: var(--q287-r5-blue-600) !important;
}

/* Nur Abstand zwischen Gruppen, nie zwischen Headline und Inhalt. */
body.q288-guided #v169SimSection .v169-blue-strip + .v169-filter-area,
body.q288-guided #v169SimSection .v169-blue-strip + #v169StageSlot,
body.q288-guided #v169SimSection .v169-blue-strip + #v169PlanSlot,
body.q288-guided #v169LageSection .v169-blue-strip + #v169LageSlot {
  margin-top: 0 !important;
}

@media (max-width: 980px) {
  .q288-journey {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    overscroll-behavior-x: none;
  }

  .q288-journey a {
    width: 100%;
  }

  .q288-step-section {
    scroll-margin-top: 150px;
  }
}

/* =========================================================================
   Q288-v12 · finale Zustandsfarben und präzise Acht-Schritt-Kundenreise
   ========================================================================= */

html body#theq-v255-body .q288-step-target {
  scroll-margin-top: calc(var(--q288-desktop-header, 244px) + 16px) !important;
}

/* Kaufabsicht und Bestandsobjekt: derselbe brillante Orangeton. */
html body#theq-v255-body
  :is(.q272-role-choice.q287-kind-purchase.is-q276-active,
      .q272-role-choice.q287-kind-purchase.is-active,
      .q272-role-choice.q287-kind-purchase[aria-pressed="true"],
      .q272-role-choice.q287-kind-keep.is-q276-active,
      .q272-role-choice.q287-kind-keep.is-active,
      .q272-role-choice.q287-kind-keep[aria-pressed="true"],
      #apartmentList .q276-state-button.q287-kind-purchase.is-q276-active,
      #apartmentList .q276-state-button.q287-kind-keep.is-q276-active,
      button[data-hover-buy].q287-is-active,
      button[data-hover-buy].is-blue,
      #planModalBuy.q288-is-active) {
  border-color: #ffe1a0 !important;
  background: var(--q288-orange-button) !important;
  color: #fff !important;
  filter: none !important;
}

html body#theq-v255-body
  :is(.q272-role-choice.q287-kind-purchase.is-q276-active,
      .q272-role-choice.q287-kind-purchase.is-active,
      .q272-role-choice.q287-kind-purchase[aria-pressed="true"],
      .q272-role-choice.q287-kind-keep.is-q276-active,
      .q272-role-choice.q287-kind-keep.is-active,
      .q272-role-choice.q287-kind-keep[aria-pressed="true"])
  .q275-role-state,
html body#theq-v255-body
  #apartmentList
  :is(.q276-state-button.q287-kind-purchase.is-q276-active,
      .q276-state-button.q287-kind-keep.is-q276-active)
  .q276-button-state,
html body#theq-v255-body
  :is(button[data-hover-buy].q287-is-active,
      button[data-hover-buy].is-blue)
  .q287-hover-state,
html body#theq-v255-body #planModalBuy.q288-is-active .q288-modal-state {
  border-color: #d77d00 !important;
  background: #fff8e9 !important;
  color: #d77d00 !important;
}

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

/* Verkaufsabsicht: Blau bleibt die eindeutige Verkaufsfarbe. */
html body#theq-v255-body
  :is(.q272-role-choice.q287-kind-sell.is-q276-active,
      .q272-role-choice.q287-kind-sell.is-active,
      .q272-role-choice.q287-kind-sell[aria-pressed="true"],
      #apartmentList .q276-state-button.q287-kind-sell.is-q276-active) {
  border-color: #7de3ff !important;
  background: var(--q288-blue-button) !important;
  color: #fff !important;
  filter: none !important;
}

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

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

/* Nicht gewählt: einheitlich Grau mit grauem Kreuz. */
html body#theq-v255-body
  :is(.q272-role-choice.is-q276-inactive,
      .q272-role-choice[aria-pressed="false"],
      #apartmentList .q276-state-button.is-q276-inactive,
      button[data-hover-buy].q287-is-inactive,
      #planModalBuy.q288-is-inactive) {
  border-color: #cbd0d4 !important;
  background: linear-gradient(180deg, #c8cdd1 0%, #8d949a 100%) !important;
  color: #fff !important;
  filter: saturate(.18) !important;
}

html body#theq-v255-body
  :is(.q272-role-choice.is-q276-inactive,
      .q272-role-choice[aria-pressed="false"])
  .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,
html body#theq-v255-body #planModalBuy.q288-is-inactive .q288-modal-state {
  border-color: #626b73 !important;
  background: #f2f4f5 !important;
  color: #626b73 !important;
}

html body#theq-v255-body
  :is(.q272-role-choice.is-q276-inactive,
      .q272-role-choice[aria-pressed="false"])
  .q275-role-state::after,
html body#theq-v255-body
  #apartmentList
  .q276-state-button.is-q276-inactive
  .q276-button-state::after {
  content: "×" !important;
  color: #626b73 !important;
}

html body#theq-v255-body
  :is(.q272-role-choice, #apartmentList .q276-state-button,
      button[data-hover-buy], #planModalBuy) {
  color: #fff !important;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, .92),
    1px 1px 0 rgba(0, 0, 0, .78) !important;
}

html body#theq-v255-body .q272-role-choice .q275-role-state,
html body#theq-v255-body
  #apartmentList .q276-state-button .q276-button-state,
html body#theq-v255-body button[data-hover-buy] .q287-hover-state,
html body#theq-v255-body #planModalBuy .q288-modal-state {
  margin-right: 6px !important;
  margin-left: 4px !important;
  transform: none !important;
}

/* Acht Stationen: 4 × 2 am großen Desktop, 2 × 4 auf kleinen Desktops. */
html body#theq-v255-body .q288-journey {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body#theq-v255-body .q288-journey a > strong,
html body#theq-v255-body .q288-journey a > small {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (min-width: 981px) and (max-width: 1350px) {
  html body#theq-v255-body .q288-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  html body#theq-v255-body .q288-step-target {
    scroll-margin-top: 92px !important;
  }

  html body#theq-v255-body .q288-journey {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 560px) {
  .q288-journey {
    margin-top: 10px !important;
    padding: 9px !important;
  }

  .q288-journey a {
    min-height: 58px;
  }

  .q288-numbered-title::before {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
    font-size: .9rem;
  }

  .q288-step-intro {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 9px 10px;
  }

  .q288-step-intro > strong {
    font-size: .78rem;
  }
}

/* =========================================================================
   Q288 – verbindliche Farb- und Kartenlogik nach der freigegebenen Vorlage
   ========================================================================= */

:root {
  --container: min(1880px, calc(100vw - 56px));
  --q288-orange-edge: #ffad00;
  --q288-orange-light: #fef4e7;
  --q288-orange-button: linear-gradient(
    180deg,
    #ffe7c4 0%,
    #ffcb8a 18%,
    #fe9c2a 48%,
    #d98900 78%,
    #a66100 100%
  );
  --q288-orange-head: linear-gradient(
    105deg,
    #f0a000 0%,
    #ffbd00 30%,
    #fff06a 72%,
    #ffbf00 100%
  );
  --q288-blue-edge: #00aeef;
  --q288-blue-light: #e1eef8;
  --q288-blue-button: linear-gradient(
    180deg,
    #9cd0f5 0%,
    #419bdf 32%,
    #1373bb 68%,
    #054a84 100%
  );
  --q288-blue-head: linear-gradient(
    100deg,
    #0a3158 0%,
    #155387 58%,
    #3c8ec8 100%
  );
  --q288-page-gray: #d8d8d8;
  --q288-dark-shadow: rgba(0, 0, 0, .88);
  --q288-orange-glow:
    0 0 0 1px rgba(255, 226, 109, .90),
    0 0 22px rgba(255, 171, 0, .55),
    0 15px 28px rgba(77, 47, 14, .24);
  --q288-blue-glow:
    0 0 0 1px rgba(117, 226, 255, .72),
    0 0 19px rgba(0, 174, 239, .42),
    0 10px 20px rgba(8, 58, 92, .22);
}

html,
html body#theq-v255-body {
  overflow-x: hidden !important;
}

html body#theq-v255-body {
  background:
    linear-gradient(
      90deg,
      #c3c3c3 0%,
      var(--q288-page-gray) 7%,
      var(--q288-page-gray) 93%,
      #c3c3c3 100%
    ) !important;
}

html body#theq-v255-body main,
html body#theq-v255-body section,
html body#theq-v255-body .content-card,
html body#theq-v255-body .listing-grid,
html body#theq-v255-body .q288-blue-panel,
html body#theq-v255-body .q288-blue-group {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Geführte Vier-Schritt-Navigation */
html body#theq-v255-body .q288-journey {
  border-color: var(--q288-blue-edge) !important;
  background: #eaf6ff !important;
  box-shadow:
    0 0 0 1px rgba(0, 174, 239, .24),
    0 9px 17px rgba(0, 40, 74, .20) !important;
}

html body#theq-v255-body .q288-journey a {
  border-color: rgba(255, 244, 205, .98) !important;
  background: var(--q288-orange-button) !important;
  color: #fff !important;
  text-shadow:
    0 2px 2px var(--q288-dark-shadow),
    1px 1px 0 rgba(0, 0, 0, .72) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .90),
    inset 0 -4px 0 rgba(91, 48, 0, .38),
    0 8px 12px rgba(0, 35, 68, .30) !important;
}

html body#theq-v255-body .q288-journey a > span,
html body#theq-v255-body .q288-numbered-title::before {
  background: linear-gradient(180deg, #e39a00, #b96b00) !important;
  color: #fff !important;
}

html body#theq-v255-body .q288-step-intro {
  border-color: var(--q288-blue-edge) !important;
  background: #eaf6ff !important;
  color: #0a3f72 !important;
}

html body#theq-v255-body .q288-step-intro > span {
  background: linear-gradient(180deg, #2c79b8, #0a3d6c) !important;
}

/* Brillanter Desktopkopf aus der Referenz */
@media (min-width: 981px) {
  html body#theq-v255-body > .topbar {
    position: fixed !important;
    inset: 0 0 auto !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background:
      radial-gradient(ellipse at 24% 50%, rgba(18, 136, 255, .22), transparent 25%),
      radial-gradient(ellipse at 51% 50%, rgba(37, 159, 255, .18), transparent 27%),
      linear-gradient(90deg, #062745 0%, #153b62 47%, #082b4c 100%) !important;
    border: 0 !important;
    box-shadow: 0 20px 42px rgba(3, 18, 38, .36) !important;
  }

  html body#theq-v255-body > .topbar::before,
  html body#theq-v255-body > .topbar::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
  }

  html body#theq-v255-body > .topbar::before {
    z-index: -2 !important;
    background:
      linear-gradient(90deg, rgba(255,255,255,.02), rgba(118,208,255,.10) 49%, rgba(255,255,255,.02)),
      repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 82px) !important;
  }

  html body#theq-v255-body > .topbar::after {
    z-index: -1 !important;
    background:
      radial-gradient(ellipse 7px 82px at 27% 50%, rgba(125,224,255,.92), rgba(26,132,255,.40) 35%, transparent 74%),
      radial-gradient(ellipse 7px 88px at 52% 50%, rgba(125,224,255,.92), rgba(26,132,255,.40) 35%, transparent 74%) !important;
    mix-blend-mode: screen !important;
    opacity: .84 !important;
  }

  html body#theq-v255-body > .topbar .topbar-inner {
    display: grid !important;
    grid-template-columns:
      minmax(210px, .62fr)
      minmax(340px, .95fr)
      minmax(620px, 1.55fr) !important;
    align-items: center !important;
    gap: 28px !important;
    min-height: 208px !important;
    padding: 15px 0 !important;
    overflow: visible !important;
  }

  html body#theq-v255-body > .topbar .brand,
  html body#theq-v255-body > .topbar .neo-header-bullets {
    position: relative !important;
  }

  html body#theq-v255-body > .topbar .brand::after,
  html body#theq-v255-body > .topbar .neo-header-bullets::after {
    content: "" !important;
    position: absolute !important;
    top: 8px !important;
    right: -17px !important;
    bottom: 8px !important;
    display: block !important;
    width: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, transparent, #7de8ff 18%, #128fff 50%, #7de8ff 82%, transparent) !important;
    box-shadow: 0 0 8px #74dbff, 0 0 22px rgba(32,151,255,.88), 0 0 42px rgba(18,126,245,.55) !important;
    opacity: .98 !important;
    pointer-events: none !important;
  }

  html body#theq-v255-body > .topbar .brand::before,
  html body#theq-v255-body > .topbar .neo-header-bullets::before {
    content: "" !important;
    position: absolute !important;
    top: 20px !important;
    right: -35px !important;
    bottom: 20px !important;
    display: block !important;
    width: 70px !important;
    background: radial-gradient(ellipse, rgba(73,183,255,.34), rgba(73,183,255,.10) 38%, transparent 72%) !important;
    pointer-events: none !important;
  }

  html body#theq-v255-body > .topbar .neo-header-bullets li {
    min-height: 29px !important;
    padding: 4px 11px 4px 40px !important;
    border: 1px solid rgba(104, 195, 242, .76) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #286190 0%, #1d5485 46%, #0c416f 100%) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 2px rgba(0,0,0,.72) !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.28),
      0 4px 8px rgba(0,0,0,.24),
      0 0 10px rgba(44,168,231,.20) !important;
  }

  html body#theq-v255-body > .topbar .neo-header-bullets li::before {
    left: 9px !important;
    width: 24px !important;
    height: 24px !important;
    border-color: #67c8f3 !important;
    background: linear-gradient(180deg, #60c8fa, #0e6eae) !important;
    color: #fff !important;
    font-size: 14px !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.62), 0 3px 6px rgba(0,0,0,.30) !important;
  }

  html body#theq-v255-body > .topbar .nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-content: center !important;
    align-items: center !important;
    gap: 9px 10px !important;
    width: 100% !important;
    max-width: 820px !important;
    margin-left: auto !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 {
    position: relative !important;
    z-index: 3 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 43px !important;
    height: 43px !important;
    padding: 0 17px !important;
    overflow: hidden !important;
    border: 2px solid rgba(255, 243, 204, .90) !important;
    border-radius: 12px !important;
    background: var(--q288-orange-button) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 2px var(--q288-dark-shadow), 1px 1px 0 rgba(0,0,0,.74) !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.92),
      inset 0 -4px 0 rgba(102,52,0,.36),
      0 8px 15px rgba(0,0,0,.36),
      0 0 15px rgba(255,167,26,.34) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  html body#theq-v255-body > .topbar .nav a.nav-legal {
    border-color: rgba(178,232,255,.88) !important;
    background: var(--q288-blue-button) !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.82),
      inset 0 -4px 0 rgba(0,53,104,.48),
      0 8px 15px rgba(0,0,0,.36),
      0 0 15px rgba(48,174,255,.34) !important;
  }

  html body#theq-v255-body > .topbar .nav a::before {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    right: 7px !important;
    left: 7px !important;
    display: block !important;
    height: 42% !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.46) 42%, transparent) !important;
    opacity: .84 !important;
    pointer-events: none !important;
  }
}

@media (min-width: 981px) and (max-width: 1260px) {
  html body#theq-v255-body > .topbar .topbar-inner {
    grid-template-columns: 180px minmax(220px, .82fr) minmax(390px, 1.35fr) !important;
    gap: 20px !important;
    min-height: 198px !important;
  }

  html body#theq-v255-body > .topbar .nav {
    max-width: 520px !important;
    gap: 8px !important;
  }

  html body#theq-v255-body > .topbar .nav a {
    padding: 0 11px !important;
    font-size: 10.8px !important;
  }
}

/* Genau eine orange Außenkachel je Hauptsektion */
html body#theq-v255-body .q288-orange-section {
  position: relative !important;
  box-sizing: border-box !important;
  width: var(--container) !important;
  max-width: calc(100vw - 56px) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding: 0 20px 20px !important;
  overflow: hidden !important;
  border: 3px solid var(--q288-orange-edge) !important;
  border-radius: 24px !important;
  background: var(--q288-orange-light) !important;
  box-shadow: var(--q288-orange-glow) !important;
}

html body#theq-v255-body .q288-orange-section > .q288-orange-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  width: calc(100% + 40px) !important;
  max-width: none !important;
  min-height: 68px !important;
  margin: -3px -20px 18px !important;
  padding: 14px 22px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 244, 211, .88) !important;
  border-radius: 21px 21px 0 0 !important;
  background: var(--q288-orange-head) !important;
  color: #fff !important;
  font-family: Nunito, Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(1.08rem, 1.45vw, 1.48rem) !important;
  font-weight: 1000 !important;
  line-height: 1.16 !important;
  text-shadow: 0 2px 2px var(--q288-dark-shadow), 1px 1px 0 rgba(0,0,0,.72) !important;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.78),
    inset 0 -3px 0 rgba(173, 103, 0, .22),
    0 7px 16px rgba(116,55,0,.30),
    0 0 18px rgba(255, 183, 0, .30) !important;
}

html body#theq-v255-body .q288-orange-section > .content-card,
html body#theq-v255-body .q288-orange-section > .v169-section-body,
html body#theq-v255-body .q288-orange-section > .v169-invest-shell {
  background: var(--q288-orange-light) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body#theq-v255-body .q288-orange-section > .content-card {
  padding: 0 !important;
}

/* Orange bleibt ausschließlich die äußere Hierarchie. */
html body#theq-v255-body .q288-orange-section
  :is(.orange-bar, .v169-blue-strip, .v180-card-title, .v74-exit-head,
      .v254-panel-title, .v253-card-head, .v228-titlebar,
      .q283-person-head, .q288-blue-title) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  min-height: 56px !important;
  padding: 12px 17px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(155, 222, 255, .72) !important;
  border-radius: 14px 14px 0 0 !important;
  background: var(--q288-blue-head) !important;
  color: #fff !important;
  font-family: Nunito, Inter, "Segoe UI", Arial, sans-serif !important;
  font-weight: 950 !important;
  line-height: 1.13 !important;
  text-shadow: 0 2px 2px rgba(0,0,0,.78), 1px 1px 0 rgba(0,0,0,.54) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 4px 9px rgba(2,40,72,.20) !important;
}

/* Hellblaue Unterkacheln mit bündigem Verlaufstitel */
html body#theq-v255-body .q288-blue-group,
html body#theq-v255-body .q288-blue-panel,
html body#theq-v255-body .q288-orange-section .v180-card {
  position: relative !important;
  overflow: hidden !important;
  border: 2px solid var(--q288-blue-edge) !important;
  border-radius: 18px !important;
  background: var(--q288-blue-light) !important;
  box-shadow: var(--q288-blue-glow) !important;
}

html body#theq-v255-body .q288-blue-group {
  display: block !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

html body#theq-v255-body .q288-blue-group:last-child {
  margin-bottom: 0 !important;
}

html body#theq-v255-body .q288-blue-group > .q288-blue-title {
  width: 100% !important;
  margin: 0 !important;
  border-radius: 15px 15px 0 0 !important;
}

html body#theq-v255-body .q288-blue-group > :not(.q288-blue-title) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 0 14px 14px !important;
  background: var(--q288-blue-light) !important;
  box-shadow: none !important;
}

html body#theq-v255-body .q288-redundant-title {
  display: none !important;
}

html body#theq-v255-body .q288-blue-panel.q288-has-blue-title,
html body#theq-v255-body .q288-orange-section .v180-card {
  padding: 0 14px 14px !important;
}

html body#theq-v255-body .q288-blue-panel.q288-has-blue-title > .q288-blue-title,
html body#theq-v255-body .q288-orange-section .v180-card > .v180-card-title {
  width: calc(100% + 28px) !important;
  max-width: none !important;
  margin: -2px -14px 14px !important;
}

html body#theq-v255-body .q288-orange-section > .content-card > .finance-layout {
  gap: 16px !important;
}

html body#theq-v255-body #apartmentList .ap-card.q288-blue-panel {
  padding: 0 !important;
}

html body#theq-v255-body #apartmentList .ap-card.q288-blue-panel > :not(.q288-blue-title) {
  margin-right: 12px !important;
  margin-left: 12px !important;
}

html body#theq-v255-body .q288-orange-section
  :is(.about-card, .video-card, .photo-card, .energy-card, .logic-card,
      .logic-formula, .selection-box-v72, .side-card, .kpi,
      .readonly-box, .helper-box, .v180-tile, .v74-exit-kpi,
      .v254-finance-meta, .ap-extra-kpi, .ap-calc-section) {
  min-width: 0 !important;
  max-width: 100% !important;
  border-color: rgba(0, 174, 239, .76) !important;
  background: linear-gradient(180deg, #fff 0%, #eef7ff 56%, #cfe6f8 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 7px 14px rgba(8,58,92,.16) !important;
}

/*
 * Nur eine Verpackungsebene: Layout-Gruppen ordnen mehrere blaue Kacheln,
 * ohne selbst noch einmal als leuchtende Kachel aufzutreten. Unterkacheln
 * innerhalb einer echten blauen Karte bleiben bewusst ruhiger.
 */
html body#theq-v255-body .q288-blue-layout-root {
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body#theq-v255-body .q288-blue-layout-root > .q288-blue-title {
  width: 100% !important;
  margin: 0 0 16px !important;
  border: 2px solid var(--q288-blue-edge) !important;
  border-radius: 16px !important;
  box-shadow: var(--q288-blue-glow) !important;
}

html body#theq-v255-body
  .q288-blue-group.q288-blue-layout-root
  > :not(.q288-blue-title) {
  overflow: visible !important;
  background: transparent !important;
}

html body#theq-v255-body .q288-inner-panel {
  border: 1px solid rgba(0, 174, 239, .56) !important;
  border-radius: 14px !important;
  background: rgba(247, 252, 255, .78) !important;
  box-shadow: 0 6px 13px rgba(8,58,92,.13) !important;
}

html body#theq-v255-body .q288-inner-panel.q288-has-blue-title {
  padding: 0 10px 10px !important;
}

html body#theq-v255-body
  .q288-inner-panel.q288-has-blue-title
  > .q288-blue-title {
  width: calc(100% + 20px) !important;
  min-height: 42px !important;
  margin: -1px -10px 10px !important;
  padding: 8px 12px !important;
  border-radius: 13px 13px 0 0 !important;
  font-size: clamp(.78rem, .94vw, .98rem) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 3px 7px rgba(2,40,72,.16) !important;
}

html body#theq-v255-body .q288-orange-section
  :is(.v180-top-grid, .finance-layout, .listing-grid, .v180-tiles,
      .v254-panel-grid, .v253-grid, .logic-grid, .media-grid) {
  gap: 18px !important;
}

/* Zugängliche Infobuttons für die wichtigsten Haupt- und Unterbereiche. */
html body#theq-v255-body .q288-title-info {
  position: relative !important;
  z-index: 3 !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  margin-left: auto !important;
  padding: 0 !important;
  border: 2px solid rgba(255,255,255,.88) !important;
  border-radius: 50% !important;
  background: rgba(7, 50, 91, .78) !important;
  color: #fff !important;
  font: 1000 15px/1 Georgia, serif !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), 0 4px 9px rgba(0,0,0,.30) !important;
  cursor: pointer !important;
}

html body#theq-v255-body .q288-title-info::before {
  content: "i" !important;
}

html body#theq-v255-body .q288-title-info:hover,
html body#theq-v255-body .q288-title-info:focus-visible {
  filter: brightness(1.12) !important;
  outline: 3px solid rgba(255,255,255,.48) !important;
  outline-offset: 2px !important;
}

html body#theq-v255-body .q288-info-popover {
  position: fixed !important;
  z-index: 2147483000 !important;
  box-sizing: border-box !important;
  max-width: calc(100vw - 24px) !important;
  padding: 18px 44px 18px 18px !important;
  border: 2px solid var(--q288-blue-edge) !important;
  border-radius: 16px !important;
  background: #f5fbff !important;
  color: #0a3158 !important;
  box-shadow: 0 0 18px rgba(0,174,239,.34), 0 18px 42px rgba(0,24,48,.30) !important;
}

html body#theq-v255-body .q288-info-popover[hidden] {
  display: none !important;
}

html body#theq-v255-body .q288-info-popover strong {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 1rem !important;
}

html body#theq-v255-body .q288-info-popover p {
  margin: 0 !important;
  font-size: .92rem !important;
  font-weight: 750 !important;
  line-height: 1.42 !important;
}

html body#theq-v255-body .q288-info-close {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 1px solid rgba(10,49,88,.24) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #0a3158 !important;
  font: 1000 22px/1 Arial, sans-serif !important;
  cursor: pointer !important;
}

html body#theq-v255-body #wohnungen .q288-blue-group .listing-grid {
  padding: 14px !important;
  background: var(--q288-blue-light) !important;
}

html body#theq-v255-body #wohnungen .q288-blue-group .load-wrap {
  padding: 0 14px 14px !important;
  background: var(--q288-blue-light) !important;
}

html body#theq-v255-body
  #wohnungen
  .q288-blue-group.q288-blue-layout-root
  :is(.listing-grid, .load-wrap) {
  background: transparent !important;
}

/* Orangefarbene Aktionsschaltflächen im selben Brillanzgrad */
html body#theq-v255-body #v169SimSection .q276-filter-reset,
html body#theq-v255-body .q288-orange-section .btn.primary {
  border-color: rgba(255, 243, 204, .92) !important;
  background: var(--q288-orange-button) !important;
  color: #fff !important;
  text-shadow: 0 2px 2px var(--q288-dark-shadow) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.90),
    inset 0 -3px 0 rgba(102,52,0,.32),
    0 6px 10px rgba(0,0,0,.28) !important;
}

/* Gehaltsabrechnungen: Desktop nebeneinander, mobil untereinander */
html body#theq-v255-body
  #berechnung
  .v228-projection-section.q287-payroll-positioned {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html body#theq-v255-body
  #berechnung
  .v228-projection-section.q287-payroll-positioned
  .v228-datev-compare,
html body#theq-v255-body #afa-effekt .v128-datev-compare,
html body#theq-v255-body .v225-payroll-section .v225-compare {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 10px 0 4px !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: none !important;
}

html body#theq-v255-body
  #berechnung
  .v228-projection-section.q287-payroll-positioned
  :is(.v228-datev-col, .v228-datev-sheet, .v228-datev-body, .v228-datev-row),
html body#theq-v255-body #afa-effekt
  :is(.v128-datev-col, .v128-datev-sheet),
html body#theq-v255-body .v225-payroll-section
  :is(.v225-col, .v225-sheet) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html body#theq-v255-body .v225-payroll-section {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

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

  html body#theq-v255-body #berechnung .v228-kpi .lbl {
    font-size: clamp(6.6px, .46vw, 9px) !important;
  }

  html body#theq-v255-body #berechnung .v228-kpi .val {
    font-size: clamp(9px, .70vw, 14px) !important;
  }
}

/* Große Diagramme respektieren die Kachelbreite. */
html body#theq-v255-body .perf-scroll,
html body#theq-v255-body .big-vert-scroll {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

html body#theq-v255-body .perf-scroll > .perf-grid {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-template-columns: repeat(14, minmax(0, 1fr)) !important;
}

html body#theq-v255-body .big-vert-scroll > .big-vert-chart {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-template-columns: 66px minmax(0, 1fr) !important;
}

/* Fachlich eindeutige Zustandsfarben */
html body#theq-v255-body
  :is(.q272-role-choice, #apartmentList .q276-state-button,
      button[data-hover-buy], #planModalBuy) {
  color: #fff !important;
  text-shadow: 0 2px 2px var(--q288-dark-shadow), 1px 1px 0 rgba(0,0,0,.70) !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.72), inset 0 -4px 0 rgba(0,0,0,.22), 0 6px 11px rgba(8,38,62,.26) !important;
}

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

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

/* Mobile: USPs und Kundenreise untereinander; Menü zweispaltig. */
@media (max-width: 980px) {
  :root {
    --container: calc(100vw - 20px);
  }

  html body#theq-v255-body #v257MobileHeader .v257-usp,
  html body#theq-v255-body #v257MobileHeader .v257-usp-list {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-usp::-webkit-scrollbar,
  html body#theq-v255-body #v257MobileHeader .v257-usp-list::-webkit-scrollbar {
    display: none !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-usp-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 6px !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-usp-list li {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-color: rgba(104, 195, 242, .72) !important;
    background: linear-gradient(180deg, #286190, #1d5485 48%, #0c416f) !important;
    color: #fff !important;
    text-shadow: 0 2px 2px rgba(0,0,0,.72) !important;
  }

  html body#theq-v255-body
    #v257MobileHeader[data-panel="usp"]
    .v257-usp,
  html body#theq-v255-body
    #v257MobileHeader[data-panel="usp"]
    .v257-usp * {
    pointer-events: none !important;
    touch-action: pan-y !important;
    overscroll-behavior: auto !important;
    user-select: none !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-menu-grid {
    display: grid !important;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
    gap: 9px !important;
    align-items: start !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-menu-col.v257-legal {
    grid-column: 1 !important;
    order: 1 !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-menu-col.v257-main {
    grid-column: 2 !important;
    order: 2 !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-menu-col.nav a {
    width: 100% !important;
    min-height: 43px !important;
    margin: 0 !important;
    padding: 8px 6px !important;
    color: #fff !important;
    font-size: clamp(.67rem, 2.55vw, .84rem) !important;
    line-height: 1.05 !important;
    text-shadow: 0 2px 2px rgba(0,0,0,.88), 1px 1px 0 rgba(0,0,0,.66) !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-menu-col.v257-main a,
  html body#theq-v255-body #v257MobileHeader #v257MobileToggle {
    background: var(--q288-orange-button) !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-menu-col.v257-legal a {
    background: var(--q288-blue-button) !important;
  }

  html body#theq-v255-body .q288-journey {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }

  html body#theq-v255-body .q288-orange-section {
    width: var(--container) !important;
    max-width: calc(100vw - 20px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 0 8px 8px !important;
    border-radius: 17px !important;
  }

  html body#theq-v255-body .q288-orange-section > .q288-orange-title {
    width: calc(100% + 16px) !important;
    min-height: 52px !important;
    margin: -3px -8px 10px !important;
    padding: 10px 12px !important;
    border-radius: 14px 14px 0 0 !important;
    font-size: clamp(.86rem, 3.8vw, 1.02rem) !important;
  }

  html body#theq-v255-body .q288-blue-group {
    margin-bottom: 10px !important;
  }

  html body#theq-v255-body
    #berechnung
    .v228-projection-section.q287-payroll-positioned
    .v228-datev-compare,
  html body#theq-v255-body #afa-effekt .v128-datev-compare,
  html body#theq-v255-body .v225-payroll-section .v225-compare {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 699px) {
  html body#theq-v255-body .perf-scroll,
  html body#theq-v255-body .big-vert-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body#theq-v255-body .perf-scroll > .perf-grid {
    width: 680px !important;
    min-width: 680px !important;
    max-width: none !important;
  }

  html body#theq-v255-body .big-vert-scroll > .big-vert-chart {
    width: 760px !important;
    min-width: 760px !important;
    max-width: none !important;
    grid-template-columns: 62px minmax(680px, 1fr) !important;
  }
}

/* =========================================================================
   Q288-v05 – gemeinsame Seitenachse, brillante Headlines und ruhige Bedienung
   ========================================================================= */

:root {
  --q288-shell: min(1980px, calc(100vw - 60px));
  --container: var(--q288-shell);
  --q288-orange-edge: #ff9f00;
  --q288-orange-light: #fff4e7;
  --q288-orange-head:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .70) 0%,
      rgba(255, 255, 255, .30) 17%,
      rgba(255, 255, 255, 0) 43%,
      rgba(144, 71, 0, .16) 100%
    ),
    linear-gradient(
      100deg,
      #f39a00 0%,
      #ffb90c 30%,
      #fff36a 70%,
      #ffad00 100%
    );
  --q288-orange-glow:
    0 0 0 1px rgba(255, 236, 145, .96),
    0 0 12px rgba(255, 183, 0, .74),
    0 0 28px rgba(255, 153, 0, .44),
    0 16px 28px rgba(77, 47, 14, .24);
}

html body#theq-v255-body > .topbar .topbar-inner,
html body#theq-v255-body > #q288Journey,
html body#theq-v255-body > #wohnungslage,
html body#theq-v255-body > #v169LowerWrap,
html body#theq-v255-body > main.container.dash-shell,
html body#theq-v255-body > .container.dash-shell,
html body#theq-v255-body > .q288-orange-section {
  box-sizing: border-box !important;
  width: var(--q288-shell) !important;
  min-width: 0 !important;
  max-width: var(--q288-shell) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

html body#theq-v255-body #v169LowerWrap,
html body#theq-v255-body #wohnungslage,
html body#theq-v255-body main.container.dash-shell {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: var(--q288-shell) !important;
}

html body#theq-v255-body #v169LowerWrap > .q288-orange-section,
html body#theq-v255-body #wohnungslage .q288-orange-section,
html body#theq-v255-body main.container.dash-shell > .q288-orange-section {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body#theq-v255-body .q288-orange-section {
  margin-top: 26px !important;
  margin-bottom: 26px !important;
  border-color: var(--q288-orange-edge) !important;
  background: var(--q288-orange-light) !important;
  box-shadow: var(--q288-orange-glow) !important;
}

html body#theq-v255-body .q288-orange-section > .q288-orange-title {
  width: calc(100% + 40px) !important;
  max-width: none !important;
  min-height: 70px !important;
  height: auto !important;
  margin: -3px -20px 18px !important;
  padding: 14px 22px !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 21px 21px 0 0 !important;
  background: var(--q288-orange-head) !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  text-shadow:
    0 3px 3px rgba(0, 0, 0, .92),
    1px 1px 0 rgba(0, 0, 0, .82) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .92),
    inset 0 -4px 0 rgba(153, 78, 0, .22),
    0 9px 17px rgba(116, 55, 0, .31),
    0 0 23px rgba(255, 177, 0, .54) !important;
}

html body#theq-v255-body .q288-orange-section > .q288-orange-title > * {
  min-width: 0 !important;
}

/* Statusfeld bleibt vollständig im Button und erhält rechts Luft. */
html body#theq-v255-body .q272-role-choice .q275-role-state,
html body#theq-v255-body
  #apartmentList
  .q276-state-button
  .q276-button-state,
html body#theq-v255-body button[data-hover-buy] .q287-hover-state,
html body#theq-v255-body #planModalBuy .q288-modal-state {
  margin-right: 6px !important;
  margin-left: 2px !important;
  transform: none !important;
}

/* Cashflow ist die abschließende, volle Ergebniszeile. */
html body#theq-v255-body
  #apartmentList
  .v254-liquidity-panel
  .ap-cash-row {
  box-sizing: border-box !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 12px 16px !important;
}

html body#theq-v255-body
  #apartmentList
  .v254-liquidity-panel
  .ap-cash-row.positive {
  border: 3px solid #169d50 !important;
  background: #f2fff7 !important;
  color: #0b8d49 !important;
}

html body#theq-v255-body
  #apartmentList
  .v254-liquidity-panel
  .ap-cash-row.negative {
  border: 3px solid #d83232 !important;
  background: #fff4f4 !important;
  color: #cf2828 !important;
}

/* Jede vorhandene Gehaltsvorlage folgt derselben VOR-/NACH-Logik. */
@media (min-width: 981px) {
  html body#theq-v255-body #berechnung
    :is(.v214-payroll-body, .v225-compare, .v226-datev-compare,
        .v228-datev-compare),
  html body#theq-v255-body #afa-effekt .v128-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: hidden !important;
    overflow-x: hidden !important;
  }

  html body#theq-v255-body #berechnung
    :is(.v214-slip, .v225-col, .v225-sheet, .v226-datev-col,
        .v226-datev-sheet, .v228-datev-col, .v228-datev-sheet),
  html body#theq-v255-body #afa-effekt
    :is(.v128-datev-col, .v128-datev-sheet) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Alte Hover-Nudges erzeugten sichtbares Zittern in der Bedienoberfläche. */
html body#theq-v255-body > .topbar .nav a,
html body#theq-v255-body #v257MobileHeader .v257-menu-col.nav a,
html body#theq-v255-body .q272-role-choice,
html body#theq-v255-body #apartmentList .q276-state-button {
  animation: none !important;
  will-change: auto !important;
}

/* Genau ein Nach-oben-Button; das bereitgestellte Bild bleibt unverändert. */
#v157BackToTop,
#v159BackToTop,
#v165BackToTop,
#v179BackToTop {
  display: none !important;
}

html body#theq-v255-body .q288-back-to-top {
  position: fixed !important;
  right: 22px !important;
  bottom: 24px !important;
  z-index: 2147482000 !important;
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: transparent !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .28) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(12px) !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
  cursor: pointer !important;
}

/* =========================================================================
   Q288-v12 · durchgängige Wohnungsentscheidung und acht Sprungstationen
   ========================================================================= */

html body#theq-v255-body .q270-unit-head {
  grid-template-columns: 48px minmax(0, 1fr) !important;
  align-items: center !important;
}

html body#theq-v255-body .q270-unit-head > .q272-role-picker {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin-top: 4px !important;
}

html body#theq-v255-body .q272-role-buttons,
html body#theq-v255-body .q288-card-decisions,
html body#theq-v255-body .q288-hover-decisions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
  width: 100% !important;
  min-width: 0 !important;
}

html body#theq-v255-body .q288-card-decisions {
  margin: 2px 0 17px !important;
  padding: 12px !important;
  border: 1.5px solid rgba(0, 174, 239, .34) !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, #eef9ff 0%, #dcefff 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .86),
    0 7px 15px rgba(8, 54, 90, .12) !important;
}

html body#theq-v255-body .q288-decision-button {
  min-height: 50px !important;
  padding: 6px 8px 6px 13px !important;
  cursor: pointer !important;
}

html body#theq-v255-body .q288-decision-button:disabled {
  opacity: 1 !important;
  cursor: not-allowed !important;
}

html body#theq-v255-body #apartmentList .v253-rent .v253-option-copy {
  min-width: 0 !important;
}

html body#theq-v255-body #apartmentList .v253-rent .v253-option-copy small,
html body#theq-v255-body #apartmentList .v253-rent .v253-option-copy strong {
  display: block !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.22 !important;
}

html body#theq-v255-body #apartmentList .v253-rent .v253-option-copy strong {
  margin-top: 4px !important;
  color: #075b9b !important;
  font-size: .72rem !important;
}

html body#theq-v255-body .q270-option[data-q270-action="rent"] {
  min-height: 92px !important;
}

html body#theq-v255-body
  .q270-option[data-q270-action="rent"]
  .q270-option-copy small {
  line-height: 1.24 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html body#theq-v255-body #theqHoverOverlayV116.q288-hover-enhanced {
  width: min(560px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

html body#theq-v255-body
  #theqHoverOverlayV116.q288-hover-enhanced
  .hover-card-v72 {
  position: relative !important;
  overflow: visible !important;
}

html body#theq-v255-body .q288-overlay-close {
  display: none !important;
  border: 2px solid #85dfff !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, #3abcf1, #0d5f9f) !important;
  color: #fff !important;
  font: 1000 1.45rem/1 Arial, sans-serif !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .72) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .62),
    0 5px 12px rgba(0, 38, 72, .26) !important;
  cursor: pointer !important;
}

html body#theq-v255-body .q288-hover-rent {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 9px 0 !important;
}

html body#theq-v255-body .q288-hover-rent > span {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  padding: 9px 10px !important;
  border: 1.5px solid #72cce9 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, #e9f6ff 100%) !important;
  box-shadow: 0 4px 9px rgba(10, 61, 99, .10) !important;
}

html body#theq-v255-body .q288-hover-rent small {
  color: #60718f !important;
  font-size: .64rem !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
}

html body#theq-v255-body .q288-hover-rent b {
  color: #0c497b !important;
  font-size: .76rem !important;
  font-weight: 1000 !important;
  line-height: 1.18 !important;
  overflow-wrap: anywhere !important;
}

html body#theq-v255-body .q288-hover-decisions {
  margin: 10px 0 !important;
  padding: 9px !important;
  border-radius: 14px !important;
  background: #e8f6ff !important;
  border: 1.5px solid rgba(0, 174, 239, .34) !important;
}

html body#theq-v255-body .q288-hover-decisions .q272-role-choice {
  min-height: 46px !important;
  padding-left: 10px !important;
  font-size: .72rem !important;
}

html body#theq-v255-body .q288-overlay-mobile-action {
  display: none !important;
}

html body#theq-v255-body .q288-decision-status {
  position: fixed !important;
  left: 50% !important;
  bottom: 22px !important;
  z-index: 2147483605 !important;
  width: max-content !important;
  max-width: calc(100vw - 28px) !important;
  padding: 11px 15px !important;
  border: 2px solid #75dcff !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #174f80, #082e53) !important;
  color: #fff !important;
  font-weight: 950 !important;
  text-align: center !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .72) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .34) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 12px) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

html body#theq-v255-body .q288-decision-status.is-visible {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

@media (max-width: 980px) {
  html body#theq-v255-body .q272-role-buttons,
  html body#theq-v255-body .q288-card-decisions,
  html body#theq-v255-body .q288-hover-decisions {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  html body#theq-v255-body .q288-card-decisions {
    padding: 9px !important;
  }

  html body#theq-v255-body #theqHoverOverlayV116.q288-hover-enhanced {
    position: fixed !important;
    inset: auto 6px 6px 6px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(88dvh, calc(100dvh - 12px)) !important;
    padding: 0 !important;
    border-radius: 18px !important;
    scroll-padding-bottom: 74px !important;
  }

  html body#theq-v255-body .q288-overlay-close {
    position: sticky !important;
    top: 7px !important;
    z-index: 30 !important;
    display: grid !important;
    place-items: center !important;
    float: right !important;
    width: 42px !important;
    height: 42px !important;
    margin: 7px 7px -49px auto !important;
  }

  html body#theq-v255-body .q288-hover-rent {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body#theq-v255-body .q288-overlay-mobile-action {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 25 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 52px !important;
    margin-top: 12px !important;
    padding: 8px 14px !important;
    border: 2px solid #74dfff !important;
    border-radius: 13px !important;
    background: var(--q288-blue-button) !important;
    color: #fff !important;
    font-size: .9rem !important;
    font-weight: 1000 !important;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .82) !important;
    box-shadow:
      inset 0 3px 0 rgba(255, 255, 255, .70),
      0 -7px 18px rgba(0, 34, 65, .22) !important;
  }
}

html body#theq-v255-body .q288-back-to-top.q288-is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

html body#theq-v255-body .q288-back-to-top:hover,
html body#theq-v255-body .q288-back-to-top:focus-visible {
  transform: translateY(-2px) scale(1.035) !important;
  outline: 3px solid rgba(0, 174, 239, .58) !important;
  outline-offset: 3px !important;
}

html body#theq-v255-body .q288-back-to-top img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

@media (max-width: 980px) {
  :root {
    --q288-shell: calc(100vw - 20px);
    --container: var(--q288-shell);
  }

  html body#theq-v255-body .q288-orange-section {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }

  html body#theq-v255-body .q288-orange-section > .q288-orange-title {
    width: calc(100% + 16px) !important;
    min-height: 54px !important;
    margin: -3px -8px 10px !important;
    padding: 10px 12px !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-usp,
  html body#theq-v255-body #v257MobileHeader .v257-usp-list {
    overflow: visible !important;
    overflow-x: hidden !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-usp-list li {
    min-height: 39px !important;
    padding: 7px 10px 7px 38px !important;
    font-size: clamp(.78rem, 2.8vw, .96rem) !important;
    font-weight: 900 !important;
    line-height: 1.14 !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-menu-grid {
    grid-template-columns: minmax(108px, 180px) minmax(168px, 250px) !important;
    justify-content: end !important;
    gap: 9px !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-menu-col {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: end !important;
  }

  html body#theq-v255-body #berechnung
    :is(.v214-payroll-body, .v225-compare, .v226-datev-compare,
        .v228-datev-compare),
  html body#theq-v255-body #afa-effekt .v128-datev-compare {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
  }

  html body#theq-v255-body #berechnung
    :is(.v214-slip, .v225-col, .v225-sheet, .v226-datev-col,
        .v226-datev-sheet, .v228-datev-col, .v228-datev-sheet),
  html body#theq-v255-body #afa-effekt
    :is(.v128-datev-col, .v128-datev-sheet) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body#theq-v255-body .q288-back-to-top {
    right: 10px !important;
    bottom: 14px !important;
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    border-radius: 17px !important;
  }
}

@media (max-width: 420px) {
  html body#theq-v255-body #v257MobileHeader .v257-menu-grid {
    grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr) !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-menu-col.nav a {
    font-size: clamp(.70rem, 2.9vw, .83rem) !important;
  }
}

/*
 * Q288-v09 – Wohnungsauswahl nach der gelieferten PowerPoint-Referenz.
 * Der technische Träger #wohnungslage ist keine zweite orange Kachel.
 */
html body#theq-v255-body #wohnungslage,
html body#theq-v255-body #wohnungslage > .content-card,
html body#theq-v255-body #v169LowerWrap {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body#theq-v255-body #wohnungslage {
  padding: 0 !important;
}

html body#theq-v255-body #wohnungslage > .content-card {
  padding: 0 !important;
}

html body#theq-v255-body #v169SimSection.q288-orange-section {
  outline: 0 !important;
}

html body#theq-v255-body #v169SimSection
  > .v169-section-body
  > .q288-blue-group {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

html body#theq-v255-body #v169SimSection
  > .v169-section-body
  > .q288-blue-group:last-child {
  margin-bottom: 0 !important;
}

/* Es existiert physisch und optisch nur ein Nach-oben-Element. */
html body#theq-v255-body
  :is(#v157BackToTop, #v159BackToTop, #v165BackToTop, #v179BackToTop) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html body#theq-v255-body #q288BackToTop::before,
html body#theq-v255-body #q288BackToTop::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* =========================================================================
   Q288-v09 – verbindliches Rastersystem aus „Aufbau Website Part 05/06“
   ========================================================================= */

:root {
  --q288-stage: min(2040px, calc(100vw - 24px));
  --q288-shell: min(1980px, calc(100vw - 56px));
  --container: var(--q288-shell);
  --q288-desktop-header: 272px;
  --q288-orange-edge: #ffc000;
  --q288-orange-light: #fef4e7;
  --q288-orange-head: linear-gradient(
    90deg,
    #ffc000 0%,
    #ffc000 55%,
    #fff248 61%,
    #ffe48f 68%,
    #ffe48f 86%,
    #ffc000 93%,
    #ffc000 100%
  );
  --q288-blue-edge: #00b0f0;
  --q288-blue-light: #e8f5fd;
  --q288-blue-head: linear-gradient(
    90deg,
    #08345f 0%,
    #1e669f 27%,
    #59a5e4 58%,
    #397fb7 78%,
    #174a77 100%
  );
  --q288-inner-card: linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fcff 42%,
    #e8f4fc 73%,
    #cfe7f8 100%
  );
  --q288-orange-glow:
    0 0 0 1px rgba(255, 239, 150, .98),
    0 0 13px rgba(255, 210, 0, .88),
    0 0 31px rgba(255, 159, 0, .60),
    0 17px 30px rgba(75, 44, 8, .27);
  --q288-blue-glow:
    0 0 0 1px rgba(132, 229, 255, .88),
    0 0 13px rgba(0, 176, 240, .57),
    0 11px 22px rgba(7, 51, 84, .25);
}

html {
  background: #9f9f9f !important;
  scroll-padding-top: calc(var(--q288-desktop-header) + 20px) !important;
}

html body#theq-v255-body {
  box-sizing: border-box !important;
  padding-top: var(--q288-desktop-header) !important;
  background: linear-gradient(
    90deg,
    #a8a8a8 0,
    #a8a8a8 calc((100% - var(--q288-stage)) / 2),
    #eeeeee calc((100% - var(--q288-stage)) / 2),
    #eeeeee calc((100% + var(--q288-stage)) / 2),
    #a8a8a8 calc((100% + var(--q288-stage)) / 2),
    #a8a8a8 100%
  ) !important;
}

html body#theq-v255-body > .topbar .topbar-inner,
html body#theq-v255-body > #q288Journey,
html body#theq-v255-body > #wohnungslage,
html body#theq-v255-body > #v169LowerWrap,
html body#theq-v255-body > main.container.dash-shell,
html body#theq-v255-body > .container.dash-shell,
html body#theq-v255-body > .q288-orange-section {
  width: var(--q288-shell) !important;
  min-width: 0 !important;
  max-width: var(--q288-shell) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Größerer Desktopkopf gemäß beiden Referenzfolien. */
@media (min-width: 1800px) {
  html body#theq-v255-body > .topbar .topbar-inner {
    grid-template-columns:
      minmax(250px, .56fr)
      minmax(500px, 1.10fr)
      minmax(780px, 1.72fr) !important;
    gap: 30px !important;
    height: var(--q288-desktop-header) !important;
    min-height: var(--q288-desktop-header) !important;
    padding: 12px 0 !important;
  }

  html body#theq-v255-body > .topbar .brand {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 10px !important;
  }

  html body#theq-v255-body > .topbar .brand-theq,
  html body#theq-v255-body > .topbar .brand-powered {
    display: grid !important;
    justify-items: start !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  html body#theq-v255-body > .topbar .brand-theq img {
    width: 224px !important;
    height: auto !important;
    max-height: 104px !important;
  }

  html body#theq-v255-body > .topbar .brand-powered em {
    display: block !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    font-style: normal !important;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .72) !important;
  }

  html body#theq-v255-body > .topbar .brand-powered img {
    width: 248px !important;
    height: auto !important;
    max-height: 70px !important;
  }

  html body#theq-v255-body > .topbar .neo-header-bullets {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 570px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body#theq-v255-body > .topbar .neo-header-bullets li {
    min-height: 31px !important;
    padding: 4px 14px 4px 47px !important;
    border-radius: 12px !important;
    font-size: 15.5px !important;
    line-height: 1.08 !important;
  }

  html body#theq-v255-body > .topbar .neo-header-bullets li::before {
    left: 9px !important;
    width: 29px !important;
    height: 29px !important;
    font-size: 17px !important;
  }

  html body#theq-v255-body > .topbar .nav {
    max-width: 920px !important;
    gap: 12px 13px !important;
  }

  html body#theq-v255-body > .topbar .nav a {
    min-height: 50px !important;
    height: 50px !important;
    padding: 0 19px !important;
    border-radius: 14px !important;
    font-size: 15.5px !important;
  }
}

@media (min-width: 981px) and (max-width: 1799px) {
  :root { --q288-desktop-header: 244px; }

  html body#theq-v255-body > .topbar .topbar-inner {
    grid-template-columns: 210px minmax(330px, .95fr) minmax(0, 1.50fr) !important;
    gap: 18px !important;
    height: var(--q288-desktop-header) !important;
    min-height: var(--q288-desktop-header) !important;
    padding: 12px 0 !important;
  }

  html body#theq-v255-body > .topbar .brand {
    display: grid !important;
    gap: 8px !important;
  }

  html body#theq-v255-body > .topbar .brand-theq img { width: 176px !important; height: auto !important; }
  html body#theq-v255-body > .topbar .brand-powered img { width: 194px !important; height: auto !important; }
  html body#theq-v255-body > .topbar .brand-powered em { font-size: 13px !important; }

  html body#theq-v255-body > .topbar .neo-header-bullets {
    display: grid !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body#theq-v255-body > .topbar .neo-header-bullets li {
    min-height: 28px !important;
    padding: 3px 9px 3px 39px !important;
    font-size: 13.2px !important;
  }

  html body#theq-v255-body > .topbar .neo-header-bullets li::before {
    width: 24px !important;
    height: 24px !important;
  }

  html body#theq-v255-body > .topbar .nav { max-width: 720px !important; gap: 8px !important; }
  html body#theq-v255-body > .topbar .nav a {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 11px !important;
    font-size: 12px !important;
  }
}

/* Vier gleich große Orientierungskacheln. */
html body#theq-v255-body .q288-journey {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 28px !important;
  margin-bottom: 28px !important;
  padding: 16px !important;
  border: 2px solid var(--q288-blue-edge) !important;
  border-radius: 23px !important;
  background: #e8f5fd !important;
}

html body#theq-v255-body .q288-journey a {
  grid-template-columns: 48px minmax(0, 1fr) !important;
  min-height: 78px !important;
  padding: 10px 16px !important;
  border-radius: 17px !important;
}

html body#theq-v255-body .q288-journey a > span {
  width: 42px !important;
  height: 42px !important;
  border-radius: 11px !important;
  font-size: 1.22rem !important;
}

html body#theq-v255-body .q288-journey a > strong { font-size: 1.16rem !important; }
html body#theq-v255-body .q288-journey a > small { font-size: .79rem !important; }

/* Genau eine leuchtende orange Verpackung je Sektion. */
html body#theq-v255-body .q288-orange-section {
  width: var(--q288-shell) !important;
  max-width: var(--q288-shell) !important;
  margin-top: 30px !important;
  margin-bottom: 30px !important;
  padding: 0 28px 28px !important;
  overflow: hidden !important;
  border: 3px solid var(--q288-orange-edge) !important;
  border-radius: 25px !important;
  background: var(--q288-orange-light) !important;
  box-shadow: var(--q288-orange-glow) !important;
}

html body#theq-v255-body .q288-orange-section > .q288-orange-title {
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: flex-start !important;
  gap: 6px 15px !important;
  width: calc(100% + 56px) !important;
  max-width: none !important;
  height: 90px !important;
  min-height: 90px !important;
  max-height: 90px !important;
  margin: -3px -28px 25px !important;
  padding: 10px 25px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  background: var(--q288-orange-head) !important;
  color: #fff !important;
  font-family: "Nunito Black", Nunito, Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(1.15rem, 1.55vw, 1.90rem) !important;
  font-weight: 1000 !important;
  line-height: 1.04 !important;
  letter-spacing: -.018em !important;
  text-align: left !important;
  text-shadow:
    0 3px 3px rgba(0, 0, 0, .96),
    1px 1px 0 rgba(0, 0, 0, .90),
    0 0 2px rgba(0, 0, 0, .90) !important;
  box-shadow:
    0 8px 9px rgba(0, 0, 0, .48),
    0 0 17px rgba(255, 207, 0, .80) !important;
}

html body#theq-v255-body .q288-orange-section > .q288-orange-title
  :is(strong, span, h2) {
  min-width: 0 !important;
  margin: 0 !important;
  color: #fff !important;
  font: inherit !important;
  line-height: inherit !important;
  text-shadow: inherit !important;
}

html body#theq-v255-body .q288-numbered-title::before {
  flex: 0 0 50px !important;
  width: 50px !important;
  height: 50px !important;
  border: 3px solid rgba(255, 255, 255, .96) !important;
  border-radius: 12px !important;
  background: rgba(183, 108, 0, .55) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .34), 0 4px 8px rgba(0, 0, 0, .30) !important;
  font-size: 1.22rem !important;
}

/* Blaue Untersektionen: gleiche Kontur, Höhe und bündiger Abschluss. */
html body#theq-v255-body .q288-blue-group,
html body#theq-v255-body .q288-blue-panel,
html body#theq-v255-body .q288-orange-section .v180-card {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border: 3px solid var(--q288-blue-edge) !important;
  border-radius: 21px !important;
  background: var(--q288-blue-light) !important;
  box-shadow: var(--q288-blue-glow) !important;
}

html body#theq-v255-body .q288-blue-group {
  width: 100% !important;
  margin: 0 0 25px !important;
  padding: 0 !important;
}

html body#theq-v255-body .q288-blue-group:last-child { margin-bottom: 0 !important; }

html body#theq-v255-body .q288-orange-section
  :is(.q288-blue-title, .v169-blue-strip, .v180-card-title,
      .v74-exit-head, .v254-panel-title, .v253-card-head,
      .v228-titlebar, .q283-person-head) {
  box-sizing: border-box !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  padding: 9px 20px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  background: var(--q288-blue-head) !important;
  color: #fff !important;
  font-family: "Nunito Black", Nunito, Inter, "Segoe UI", Arial, sans-serif !important;
  font-size: clamp(.96rem, 1.24vw, 1.46rem) !important;
  font-weight: 1000 !important;
  line-height: 1.06 !important;
  text-align: left !important;
  text-shadow:
    0 3px 3px rgba(0, 0, 0, .90),
    1px 1px 0 rgba(0, 0, 0, .78) !important;
  box-shadow: 0 7px 9px rgba(0, 0, 0, .38) !important;
}

html body#theq-v255-body .q288-blue-group > .q288-blue-title {
  width: 100% !important;
  margin: 0 !important;
}

html body#theq-v255-body .q288-blue-panel.q288-has-blue-title,
html body#theq-v255-body .q288-orange-section .v180-card {
  padding: 0 18px 18px !important;
}

html body#theq-v255-body .q288-blue-panel.q288-has-blue-title > .q288-blue-title,
html body#theq-v255-body .q288-orange-section .v180-card > .v180-card-title {
  width: calc(100% + 36px) !important;
  max-width: none !important;
  margin: -3px -18px 18px !important;
}

html body#theq-v255-body .q288-blue-group > :not(.q288-blue-title) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 0 !important;
  border-radius: 0 0 18px 18px !important;
  background: var(--q288-blue-light) !important;
  box-shadow: none !important;
}

html body#theq-v255-body .q288-blue-subtitle {
  margin-left: auto !important;
  max-width: 50% !important;
  color: #fff !important;
  font-size: .64em !important;
  font-weight: 950 !important;
  line-height: 1.06 !important;
  text-align: right !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .82) !important;
}

/* Nur echte Layoutträger bleiben rahmenlos; die Ergebnisgruppe bleibt sichtbar. */
html body#theq-v255-body .q288-blue-layout-root:not([data-q288-blue-group="apartments"]) {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body#theq-v255-body
  .q288-blue-layout-root:not([data-q288-blue-group="apartments"])
  > .q288-blue-title {
  margin-bottom: 18px !important;
  border: 3px solid var(--q288-blue-edge) !important;
  border-radius: 18px !important;
  box-shadow: var(--q288-blue-glow) !important;
}

/* Kleine Kacheln innerhalb der blauen Untersektionen erhalten den PPT-Verlauf. */
html body#theq-v255-body .q288-orange-section
  :is(.q288-inner-tile, .v180-tile, .v180-p-cell,
      .about-card, .video-card, .photo-card, .energy-card,
      .logic-card, .logic-formula, .selection-box-v72, .side-card,
      .kpi, .readonly-box, .helper-box, .v74-exit-kpi,
      .v254-finance-meta, .ap-extra-kpi, .ap-calc-section,
      .property-card, .v221-projection-card) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border: 1.5px solid rgba(0, 176, 240, .72) !important;
  border-radius: 15px !important;
  background: var(--q288-inner-card) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .96),
    0 7px 14px rgba(7, 55, 91, .18) !important;
}

html body#theq-v255-body .q288-reference-group
  :is(.about-grid, .videos-grid, .photo-grid, .energy-grid,
      .logic-media-grid, .logic-grid) {
  gap: 20px !important;
}

html body#theq-v255-body .q288-orange-section
  :is(.v180-top-grid, .finance-layout, .listing-grid, .v180-tiles,
      .v254-panel-grid, .v253-grid, .logic-grid, .media-grid,
      .about-grid, .videos-grid, .photo-grid, .energy-grid) {
  gap: 20px !important;
}

/* Info-Schalter bleiben innerhalb der Überschrift und verändern deren Höhe nie. */
html body#theq-v255-body .q288-title-info {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  margin-left: auto !important;
}

/* Desktop: sämtliche VOR-/NACH-Gehaltsabrechnungen ohne Scrollen nebeneinander. */
@media (min-width: 981px) {
  html body#theq-v255-body #berechnung
    :is(.v214-payroll-body, .v225-compare, .v226-datev-compare,
        .v228-datev-compare),
  html body#theq-v255-body #afa-effekt .v128-datev-compare {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
  }

  html body#theq-v255-body #berechnung
    :is(.v214-slip, .v225-col, .v225-sheet, .v226-datev-col,
        .v226-datev-sheet, .v228-datev-col, .v228-datev-sheet),
  html body#theq-v255-body #afa-effekt
    :is(.v128-datev-col, .v128-datev-sheet) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body#theq-v255-body .q288-step-section,
  html body#theq-v255-body .q288-orange-section {
    scroll-margin-top: calc(var(--q288-desktop-header) + 20px) !important;
  }
}

@media (max-width: 980px) {
  :root {
    --q288-stage: 100vw;
    --q288-shell: calc(100vw - 18px);
    --container: var(--q288-shell);
  }

  html { scroll-padding-top: 88px !important; }
  html body#theq-v255-body {
    padding-top: 76px !important;
    background: #eeeeee !important;
  }

  html body#theq-v255-body .q288-journey {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    width: var(--q288-shell) !important;
    margin-top: 18px !important;
    margin-bottom: 18px !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  html body#theq-v255-body .q288-journey a {
    min-height: 64px !important;
  }

  html body#theq-v255-body .q288-orange-section {
    width: var(--q288-shell) !important;
    max-width: var(--q288-shell) !important;
    margin-top: 19px !important;
    margin-bottom: 19px !important;
    padding: 0 9px 9px !important;
    border-radius: 18px !important;
  }

  html body#theq-v255-body .q288-orange-section > .q288-orange-title {
    width: calc(100% + 18px) !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    margin: -3px -9px 11px !important;
    padding: 8px 11px !important;
    border-radius: 15px 15px 0 0 !important;
    font-size: clamp(.84rem, 3.65vw, 1.02rem) !important;
    line-height: 1.06 !important;
  }

  html body#theq-v255-body .q288-numbered-title::before {
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    border-width: 2px !important;
    border-radius: 9px !important;
    font-size: .92rem !important;
  }

  html body#theq-v255-body .q288-blue-group,
  html body#theq-v255-body .q288-blue-panel,
  html body#theq-v255-body .q288-orange-section .v180-card {
    border-width: 2px !important;
    border-radius: 16px !important;
  }

  html body#theq-v255-body .q288-blue-group { margin-bottom: 13px !important; }

  html body#theq-v255-body .q288-orange-section
    :is(.q288-blue-title, .v169-blue-strip, .v180-card-title,
        .v74-exit-head, .v254-panel-title, .v253-card-head,
        .v228-titlebar, .q283-person-head) {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 7px 10px !important;
    border-radius: 14px 14px 0 0 !important;
    font-size: clamp(.76rem, 3.25vw, .93rem) !important;
  }

  html body#theq-v255-body .q288-blue-group > :not(.q288-blue-title) {
    padding: 10px !important;
  }

  html body#theq-v255-body .q288-blue-subtitle {
    display: none !important;
  }

  html body#theq-v255-body #v257MobileHeader {
    height: 76px !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-bar {
    height: 76px !important;
    min-height: 76px !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-panel {
    top: 75px !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-brand-theq {
    height: 49px !important;
    max-width: 86px !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-powered img {
    width: 108px !important;
    max-width: 108px !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-usp,
  html body#theq-v255-body #v257MobileHeader .v257-usp-list {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-x: hidden !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-usp-list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 6px !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-usp-list li {
    grid-column: 1 !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 7px 9px 7px 39px !important;
    font-size: clamp(.79rem, 2.95vw, .96rem) !important;
    line-height: 1.12 !important;
  }

  html body#theq-v255-body #v257MobileHeader .v257-menu-grid {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr) !important;
    justify-content: end !important;
    gap: 9px !important;
    overflow-x: hidden !important;
  }

  html body#theq-v255-body #berechnung
    :is(.v214-payroll-body, .v225-compare, .v226-datev-compare,
        .v228-datev-compare),
  html body#theq-v255-body #afa-effekt .v128-datev-compare {
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: hidden !important;
  }
}

/* Letzte Spezifitätskorrektur gegen ältere Q287-ID-Regeln. */
:root {
  --q287-small-card: var(--q288-inner-card);
}

html body#theq-v255-body
  :is(#v169SimSection, #v169LageSection, #v169InvestmentBlock,
      #wohnungen, #atlas, #berechnung, #unterlagen, #afa-effekt,
      #reservierung, #finanzierungsanfrage, #videos,
      #energieeffizienz, #formeln).q288-orange-section {
  width: var(--q288-shell) !important;
  min-width: var(--q288-shell) !important;
  max-width: var(--q288-shell) !important;
  margin-right: calc((100% - var(--q288-shell)) / 2) !important;
  margin-left: calc((100% - var(--q288-shell)) / 2) !important;
}

html body#theq-v255-body
  :is(#v169SimSection, #v169LageSection, #v169InvestmentBlock,
      #wohnungen, #atlas, #berechnung, #unterlagen, #afa-effekt,
      #reservierung, #finanzierungsanfrage, #videos,
      #energieeffizienz, #formeln).q288-orange-section
  > .q288-orange-title {
  flex-wrap: nowrap !important;
  background: linear-gradient(
    90deg,
    #ffc000 0%,
    #ffc000 55%,
    #fff248 61%,
    #ffe48f 68%,
    #ffe48f 86%,
    #ffc000 93%,
    #ffc000 100%
  ) !important;
}

html body#theq-v255-body
  :is(#v169SimSection, #v169LageSection).v169-main-section.q288-orange-section
  > .v169-section-title.q288-orange-title,
html body#theq-v255-body
  #v169InvestmentBlock.q288-orange-section
  > .v169-main-title.q288-orange-title,
html body#theq-v255-body
  #wohnungen.q288-orange-section
  > .board-head.q288-orange-title,
html body#theq-v255-body
  section.section.container.q288-orange-section:is(
    #atlas, #berechnung, #unterlagen, #afa-effekt, #reservierung,
    #finanzierungsanfrage, #videos, #energieeffizienz, #formeln
  )
  > .section-title.q288-orange-title {
  background: linear-gradient(
    90deg,
    #ffc000 0%,
    #ffc000 55%,
    #fff248 61%,
    #ffe48f 68%,
    #ffe48f 86%,
    #ffc000 93%,
    #ffc000 100%
  ) !important;
  color: #fff !important;
  text-shadow:
    0 3px 3px rgba(0, 0, 0, .96),
    1px 1px 0 rgba(0, 0, 0, .90),
    0 0 2px rgba(0, 0, 0, .90) !important;
}

html body#theq-v255-body .q288-numbered-title::before {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  align-self: center !important;
  order: 0 !important;
  margin: 0 3px 0 0 !important;
  transform: none !important;
}

@media (max-width: 980px) {
  html body#theq-v255-body
    :is(#v169SimSection, #v169LageSection, #v169InvestmentBlock,
        #wohnungen, #atlas, #berechnung, #unterlagen, #afa-effekt,
        #reservierung, #finanzierungsanfrage, #videos,
        #energieeffizienz, #formeln).q288-orange-section {
    min-width: var(--q288-shell) !important;
    margin-right: calc((100% - var(--q288-shell)) / 2) !important;
    margin-left: calc((100% - var(--q288-shell)) / 2) !important;
  }
}

/* =========================================================================
   Q288-v09 – finale 4K-/Windows-Skalierung und semantische Referenzicons
   ========================================================================= */

@media (min-width: 981px) {
  html body#theq-v255-body > .topbar .topbar-inner,
  html body#theq-v255-body > .topbar .topbar-inner > * {
    min-width: 0 !important;
  }

  html body#theq-v255-body > .topbar .nav {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

@media (min-width: 981px) and (max-width: 1799px) {
  html body#theq-v255-body > .topbar .topbar-inner {
    grid-template-columns:
      minmax(170px, .55fr)
      minmax(290px, .95fr)
      minmax(0, 1.50fr) !important;
    gap: clamp(12px, 1.1vw, 18px) !important;
  }
}

html body#theq-v255-body .q288-orange-section
  :is(.q288-blue-title, .v169-blue-strip, .v180-card-title,
      .v74-exit-head, .v254-panel-title, .v253-card-head,
      .v228-titlebar, .q283-person-head) {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  gap: 14px !important;
}

html body#theq-v255-body .q288-orange-section
  :is(.q288-blue-title, .v169-blue-strip, .v180-card-title,
      .v74-exit-head, .v254-panel-title, .v253-card-head,
      .v228-titlebar, .q283-person-head)
  > img {
  box-sizing: border-box !important;
  display: block !important;
  flex: 0 0 56px !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  margin: 0 0 0 -4px !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, .98))
    drop-shadow(0 1px 1px rgba(255, 255, 255, .74)) !important;
  opacity: 1 !important;
}

/* Detailkacheln nutzen die kompakteren Icons mit dunkler 3D-Schattierung. */
html body#theq-v255-body .q288-orange-section
  :is(.v180-tile, .v180-p-cell, .kpi, .v74-exit-kpi,
      .ap-extra-kpi, .v254-finance-meta, .readonly-box, .helper-box)
  img:not(.q288-headline-icon) {
  filter:
    drop-shadow(1px 1px 0 rgba(4, 49, 88, .74))
    drop-shadow(4px 5px 4px rgba(0, 0, 0, .46)) !important;
}

@media (max-width: 980px) {
  html body#theq-v255-body .q288-orange-section
    :is(.q288-blue-title, .v169-blue-strip, .v180-card-title,
        .v74-exit-head, .v254-panel-title, .v253-card-head,
        .v228-titlebar, .q283-person-head) {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    gap: 8px !important;
  }

  html body#theq-v255-body .q288-orange-section
    :is(.q288-blue-title, .v169-blue-strip, .v180-card-title,
        .v74-exit-head, .v254-panel-title, .v253-card-head,
        .v228-titlebar, .q283-person-head)
    > img {
    flex-basis: 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin-left: -3px !important;
  }
}

html body#theq-v255-body .q288-orange-section
  :is(.q288-blue-title, .v169-blue-strip, .v180-card-title,
      .v74-exit-head, .v254-panel-title, .v253-card-head,
      .v228-titlebar, .q283-person-head),
html body#theq-v255-body .q288-orange-section
  :is(.q288-blue-title, .v169-blue-strip, .v180-card-title,
      .v74-exit-head, .v254-panel-title, .v253-card-head,
      .v228-titlebar, .q283-person-head) > * {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 980px) {
  html body#theq-v255-body .q288-orange-section
    :is(.q288-blue-title, .v169-blue-strip, .v180-card-title,
        .v74-exit-head, .v254-panel-title, .v253-card-head,
        .v228-titlebar, .q283-person-head),
  html body#theq-v255-body .q288-orange-section
    :is(.q288-blue-title, .v169-blue-strip, .v180-card-title,
        .v74-exit-head, .v254-panel-title, .v253-card-head,
        .v228-titlebar, .q283-person-head) > * {
    white-space: normal !important;
  }

  html body#theq-v255-body .q288-orange-section .v74-exit-head > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  html body#theq-v255-body .q288-orange-section .v74-exit-head p,
  html body#theq-v255-body .q288-orange-section .v74-exit-head .v74-mode-chip,
  html body#theq-v255-body .q288-orange-section .v258-location-side {
    display: none !important;
  }

  html body#theq-v255-body .q288-orange-section
    .q288-mobile-compact-title {
    font-size: .68rem !important;
    line-height: 1 !important;
  }
}

/* Q288-v12: Diese abschließende Ebene steht bewusst am Dateiende, damit
   keine historische Q287-/Q288-Regel die fachlichen Zustände übermalt. */
html body#theq-v255-body
  :is(.q272-role-choice.is-q276-inactive,
      .q272-role-choice[aria-pressed="false"],
      #apartmentList .q276-state-button.is-q276-inactive,
      button[data-hover-buy].q287-is-inactive,
      #planModalBuy.q288-is-inactive) {
  border-color: #cbd0d4 !important;
  background: linear-gradient(180deg, #c8cdd1 0%, #8d949a 100%) !important;
  color: #fff !important;
  filter: saturate(.18) !important;
}

html body#theq-v255-body
  :is(.q272-role-choice.is-q276-inactive,
      .q272-role-choice[aria-pressed="false"])
  .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,
html body#theq-v255-body
  #planModalBuy.q288-is-inactive .q288-modal-state {
  border-color: #626b73 !important;
  background: #f2f4f5 !important;
  color: #626b73 !important;
}

html body#theq-v255-body
  :is(.q272-role-choice.is-q276-inactive,
      .q272-role-choice[aria-pressed="false"])
  .q275-role-state::after,
html body#theq-v255-body
  #apartmentList .q276-state-button.is-q276-inactive
  .q276-button-state::after {
  content: "×" !important;
  color: #626b73 !important;
}

html body#theq-v255-body
  :is(.q272-role-choice.q287-kind-purchase.is-q276-active,
      .q272-role-choice.q287-kind-purchase.is-active,
      .q272-role-choice.q287-kind-purchase[aria-pressed="true"],
      .q272-role-choice.q287-kind-keep.is-q276-active,
      .q272-role-choice.q287-kind-keep.is-active,
      .q272-role-choice.q287-kind-keep[aria-pressed="true"],
      #apartmentList .q276-state-button.q287-kind-purchase.is-q276-active,
      #apartmentList .q276-state-button.q287-kind-keep.is-q276-active,
      button[data-hover-buy].q287-is-active,
      button[data-hover-buy].is-blue,
      #planModalBuy.q288-is-active) {
  border-color: #ffe1a0 !important;
  background: var(--q288-orange-button) !important;
  color: #fff !important;
  filter: none !important;
}

html body#theq-v255-body
  :is(.q272-role-choice.q287-kind-purchase.is-q276-active,
      .q272-role-choice.q287-kind-purchase.is-active,
      .q272-role-choice.q287-kind-purchase[aria-pressed="true"],
      .q272-role-choice.q287-kind-keep.is-q276-active,
      .q272-role-choice.q287-kind-keep.is-active,
      .q272-role-choice.q287-kind-keep[aria-pressed="true"])
  .q275-role-state,
html body#theq-v255-body
  #apartmentList
  :is(.q276-state-button.q287-kind-purchase.is-q276-active,
      .q276-state-button.q287-kind-keep.is-q276-active)
  .q276-button-state,
html body#theq-v255-body
  :is(button[data-hover-buy].q287-is-active,
      button[data-hover-buy].is-blue) .q287-hover-state,
html body#theq-v255-body
  #planModalBuy.q288-is-active .q288-modal-state {
  border-color: #d77d00 !important;
  background: #fff8e9 !important;
  color: #d77d00 !important;
}

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

html body#theq-v255-body
  :is(.q272-role-choice.q287-kind-sell.is-q276-active,
      .q272-role-choice.q287-kind-sell.is-active,
      .q272-role-choice.q287-kind-sell[aria-pressed="true"],
      #apartmentList .q276-state-button.q287-kind-sell.is-q276-active) {
  border-color: #7de3ff !important;
  background: var(--q288-blue-button) !important;
  color: #fff !important;
  filter: none !important;
}

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

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

html body#theq-v255-body
  :is(.q272-role-choice, #apartmentList .q276-state-button,
      button[data-hover-buy], #planModalBuy) {
  color: #fff !important;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, .92),
    1px 1px 0 rgba(0, 0, 0, .78) !important;
}

html body#theq-v255-body .q272-role-choice .q275-role-state,
html body#theq-v255-body
  #apartmentList .q276-state-button .q276-button-state,
html body#theq-v255-body button[data-hover-buy] .q287-hover-state,
html body#theq-v255-body #planModalBuy .q288-modal-state {
  margin-right: 6px !important;
  margin-left: 4px !important;
  transform: none !important;
}

html body#theq-v255-body .q288-step-target {
  scroll-margin-top: calc(var(--q288-desktop-header, 244px) + 16px) !important;
}

html body#theq-v255-body .q288-journey {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body#theq-v255-body .q288-journey a > strong,
html body#theq-v255-body .q288-journey a > small {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (min-width: 981px) and (max-width: 1350px) {
  html body#theq-v255-body .q288-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  html body#theq-v255-body .q288-step-target {
    scroll-margin-top: 92px !important;
  }

  html body#theq-v255-body .q288-journey {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}