/*
 * THE Q · Q280
 * Einheitliche visuelle Hierarchie auf dem unveränderten Q278-Rechenmodell.
 */

:root {
  --q278d-navy-1: #0a3158;
  --q278d-navy-2: #155286;
  --q278d-blue-3: #4297d2;
  --q278d-cyan: #00aeef;
  --q278d-panel:
    linear-gradient(180deg, #fbfeff 0%, #eef8ff 53%, #d9edfb 100%);
  --q278d-tile:
    linear-gradient(180deg, #ffffff 0%, #ffffff 31%, #eaf5fd 66%, #afd2ef 100%);
  --q278d-blue-head:
    linear-gradient(90deg, var(--q278d-navy-1) 0%, var(--q278d-navy-2) 48%, var(--q278d-blue-3) 100%);
  --q278d-orange-button:
    linear-gradient(180deg, #ffb438 0%, #ff8d12 40%, #f5a000 67%, #b96d00 100%);
  --q278d-orange-button-hover:
    linear-gradient(180deg, #ffc65a 0%, #ff9d20 40%, #ffae00 67%, #c97800 100%);
  --q278d-grey-button:
    linear-gradient(180deg, #dce1e6 0%, #b8c0c8 42%, #929ca5 70%, #6f7881 100%);
  --q278d-dark-shadow:
    0 2px 2px rgba(0, 0, 0, .84),
    1px 1px 0 rgba(0, 0, 0, .72);
  --q278d-card-shadow:
    4px 5px 8px rgba(0, 33, 62, .25);
}

/* --------------------------------------------------------------------------
   Lageplan nach freigegebener Orientierungsvorlage
   -------------------------------------------------------------------------- */

.q278d-location .q270-location-stage {
  aspect-ratio: 1.70 / 1 !important;
  min-height: 0 !important;
}

.q278d-location .q270-direction,
.q278d-location .q278d-transit-label {
  display: none !important;
}

.q278d-location .q278d-place-layer {
  position: absolute;
  inset: 0;
  z-index: 11;
  overflow: hidden;
  pointer-events: none;
}

.q278d-location .q278d-place {
  position: absolute;
  box-sizing: border-box;
  color: #fff;
  font-family: Nunito, Arial, sans-serif;
  font-weight: 1000;
  line-height: 1.04;
  text-align: center;
  text-shadow:
    -1px -1px 1px rgba(0, 0, 0, .82),
    1px 1px 2px rgba(0, 0, 0, .88),
    0 2px 4px rgba(0, 0, 0, .52);
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .34));
}

.q278d-location .q278d-place strong,
.q278d-location .q278d-place small {
  display: block;
}

.q278d-location .q278d-place:not(.q278d-place-theq) {
  min-height: 40px;
  padding: 7px 13px;
  border: 2px solid rgba(255, 255, 255, .84);
  border-radius: 10px;
  background:
    linear-gradient(180deg, #65c5f0 0%, #2789c7 44%, #0663aa 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .58),
    inset 0 -3px 0 rgba(0, 43, 88, .34),
    0 0 0 2px rgba(0, 174, 239, .50),
    0 7px 10px rgba(0, 0, 0, .32);
}

.q278d-location .q278d-place:not(.q278d-place-theq) strong {
  font-size: clamp(.76rem, 1.20vw, 1.18rem);
}

.q278d-location .q278d-place:not(.q278d-place-theq) small {
  margin-top: 2px;
  font-size: clamp(.61rem, .92vw, .92rem);
}

.q278d-location .q278d-place i {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 38px;
  min-width: 38px;
  height: 38px;
  border: 2px solid rgba(255, 255, 255, .88);
  border-radius: 9px;
  background:
    linear-gradient(180deg, #73cdf3 0%, #2789c7 42%, #065fa4 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .62),
    inset 0 -3px 0 rgba(0, 43, 88, .34),
    0 5px 8px rgba(0, 0, 0, .34);
  color: #fff;
  font-style: normal;
  font-size: 1.65rem;
  line-height: 1;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .72);
}

.q278d-location .q278d-place-theq {
  left: 29.0%;
  top: 11.4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(126px, 18.6%, 248px);
  min-height: 86px;
  padding: 8px 14px 7px;
  border: 2px solid rgba(255, 255, 255, .88);
  border-radius: 12px;
  background:
    linear-gradient(180deg, #ffbd31 0%, #f28d00 43%, #d86800 100%);
  box-shadow:
    inset 0 4px 0 rgba(255, 255, 255, .62),
    inset 0 -4px 0 rgba(111, 43, 0, .32),
    0 0 0 2px rgba(255, 153, 0, .56),
    0 8px 12px rgba(0, 0, 0, .35);
}

.q278d-location .q278d-place-theq strong {
  font-size: clamp(.92rem, 1.42vw, 1.38rem);
}

.q278d-location .q278d-place-theq img {
  display: block;
  width: min(82%, 118px);
  height: 40px;
  margin-top: 3px;
  object-fit: contain;
}

.q278d-location .q278d-place-theq i {
  position: absolute;
  left: 50%;
  bottom: -48px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, #ffc84b 0%, #f29100 45%, #d66c00 100%);
}

.q278d-location .q278d-place-erlangen {
  left: 63.8%;
  top: 2.2%;
  display: flex;
  align-items: center;
  width: clamp(134px, 18.0%, 224px);
  padding: 0 0 0 12px !important;
}

.q278d-location .q278d-place-erlangen strong,
.q278d-location .q278d-place-fuerth strong {
  flex: 1 1 auto;
}

.q278d-location .q278d-place-erlangen i {
  margin: -2px -2px -2px 8px;
}

.q278d-location .q278d-place-fuerth {
  left: .8%;
  top: 30.2%;
  display: flex;
  align-items: center;
  width: clamp(136px, 18.0%, 224px);
  padding: 0 12px 0 0 !important;
}

.q278d-location .q278d-place-fuerth i {
  margin: -2px 8px -2px -2px;
}

.q278d-location .q278d-place-eberhardshof {
  left: 55.2%;
  top: 56.0%;
  width: clamp(132px, 17.8%, 224px);
}

.q278d-location .q278d-place-zentrum {
  right: .9%;
  bottom: 1.4%;
  display: flex;
  align-items: center;
  width: clamp(158px, 20.5%, 258px);
  padding: 0 0 0 12px !important;
}

.q278d-location .q278d-place-zentrum > span {
  flex: 1 1 auto;
}

.q278d-location .q278d-place-zentrum i {
  margin: -2px -2px -2px 8px;
}

.q278d-location .q272-block-five {
  left: 31.2% !important;
  top: 43.9% !important;
  width: 21.2% !important;
  height: 19.4% !important;
  clip-path:
    polygon(3% 4%, 92% 0, 100% 43%, 91% 69%, 83% 98%, 11% 91%, 1% 70%, 0 28%) !important;
  background:
    linear-gradient(145deg, rgba(238, 188, 58, .94), rgba(173, 112, 25, .86)) !important;
  filter:
    drop-shadow(0 0 3px rgba(255, 245, 184, .94))
    drop-shadow(0 0 10px rgba(212, 152, 28, .88)) !important;
  mix-blend-mode: color !important;
}

.q278d-location .q270-location-pin {
  left: 37.4% !important;
  top: 52.0% !important;
  z-index: 14 !important;
  width: 34px !important;
  height: 34px !important;
  border: 4px solid #fff !important;
  background: #f18700 !important;
  box-shadow:
    0 0 0 5px rgba(242, 139, 0, .34),
    0 7px 12px rgba(0, 0, 0, .34) !important;
}

.q278d-location .q270-location-label {
  left: calc(37.4% + 42px) !important;
  top: calc(52.0% + 2px) !important;
  z-index: 14 !important;
  min-height: 30px !important;
  padding: 6px 12px !important;
  border: 2px solid rgba(255, 255, 255, .88) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, #ffb829 0%, #ef8800 47%, #cc6500 100%) !important;
  color: #fff !important;
  font-size: clamp(.60rem, .76vw, .82rem) !important;
  text-shadow: var(--q278d-dark-shadow) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .58),
    0 5px 8px rgba(0, 0, 0, .32) !important;
}

.q278d-location .q270-site-connector {
  left: 33.8% !important;
  top: 69.0% !important;
  bottom: auto !important;
  width: 16.3% !important;
  height: 3px !important;
  z-index: 10 !important;
  background: rgba(255, 255, 255, .94) !important;
  transform: rotate(-57deg) !important;
  transform-origin: left center !important;
}

.q278d-location[data-view="model"] .q278d-place-layer {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 980px) {
  .q278d-location .q270-location-stage {
    aspect-ratio: 4 / 3 !important;
    min-height: 420px !important;
  }

  .q278d-location .q278d-place-theq {
    left: 28%;
    top: 10%;
    width: clamp(112px, 23%, 160px);
    min-height: 74px;
    padding: 7px 9px 5px;
  }

  .q278d-location .q278d-place-theq img {
    height: 34px;
  }

  .q278d-location .q278d-place-erlangen {
    left: auto;
    right: 1.4%;
    width: clamp(122px, 25%, 168px);
  }

  .q278d-location .q278d-place-fuerth {
    width: clamp(120px, 25%, 168px);
  }

  .q278d-location .q278d-place-eberhardshof {
    left: 55%;
    width: clamp(116px, 23%, 156px);
  }

  .q278d-location .q278d-place-zentrum {
    width: clamp(140px, 28%, 184px);
  }
}

@media (max-width: 650px) {
  .q278d-location .q270-location-stage {
    min-height: 370px !important;
  }

  .q278d-location .q278d-place:not(.q278d-place-theq) {
    min-height: 32px;
    padding: 5px 7px;
    border-radius: 8px;
  }

  .q278d-location .q278d-place:not(.q278d-place-theq) strong {
    font-size: .66rem;
  }

  .q278d-location .q278d-place:not(.q278d-place-theq) small {
    font-size: .53rem;
  }

  .q278d-location .q278d-place i {
    width: 30px;
    min-width: 30px;
    height: 30px;
    border-radius: 7px;
    font-size: 1.20rem;
  }

  .q278d-location .q278d-place-theq {
    left: 29%;
    top: 9%;
    width: 98px;
    min-height: 65px;
    padding: 6px 7px 4px;
  }

  .q278d-location .q278d-place-theq strong {
    font-size: .72rem;
  }

  .q278d-location .q278d-place-theq img {
    width: 74px;
    height: 28px;
  }

  .q278d-location .q278d-place-theq i {
    bottom: -38px;
  }

  .q278d-location .q278d-place-erlangen {
    width: 104px;
  }

  .q278d-location .q278d-place-erlangen i {
    margin-left: 5px;
  }

  .q278d-location .q278d-place-fuerth {
    top: 29%;
    width: 102px;
  }

  .q278d-location .q278d-place-fuerth i {
    margin-right: 5px;
  }

  .q278d-location .q278d-place-eberhardshof {
    left: auto;
    right: 3%;
    top: 55%;
    width: 101px;
  }

  .q278d-location .q278d-place-zentrum {
    width: 121px;
  }

  .q278d-location .q270-location-pin {
    width: 27px !important;
    height: 27px !important;
    border-width: 3px !important;
  }

  .q278d-location .q270-location-label {
    left: calc(37.4% + 32px) !important;
    min-height: 25px !important;
    padding: 4px 7px !important;
    font-size: .54rem !important;
  }
}

/* --------------------------------------------------------------------------
   Schriftkontrast der orangenen Abschnittsköpfe und Header-Buttons
   -------------------------------------------------------------------------- */

.topbar .nav a,
.q272-role-choice,
#apartmentList .q276-state-button {
  font-family: Nunito, Arial, sans-serif !important;
  font-weight: 1000 !important;
  text-shadow: var(--q278d-dark-shadow) !important;
}

.topbar .nav a {
  border-radius: 13px !important;
}

#v169InvestmentBlock.v187-ready .v169-main-title,
#v169LageSection .v169-section-title,
#v169SimSection .v169-section-title {
  text-shadow: var(--q278d-dark-shadow) !important;
}

/* --------------------------------------------------------------------------
   Blaue Hauptkarten: heller Innenraum, dunkler bündiger Kopf
   -------------------------------------------------------------------------- */

#v169InvestmentBlock.v187-ready .v180-card {
  background: var(--q278d-panel) !important;
  border-color: var(--q278d-cyan) !important;
  box-shadow: var(--q278d-card-shadow) !important;
}

#v169InvestmentBlock.v187-ready .v180-card-title {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 8px 14px !important;
  border-radius: 13px 13px 0 0 !important;
  background: var(--q278d-blue-head) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .28),
    inset 0 -2px 0 rgba(255, 255, 255, .88),
    0 4px 9px rgba(0, 0, 0, .28) !important;
  color: #fff !important;
  text-shadow: var(--q278d-dark-shadow) !important;
}

#v169InvestmentBlock.v187-ready .v180-card-title > *,
#v169InvestmentBlock .q270-title-copy,
#v169InvestmentBlock .q270-title-copy > span,
#v169InvestmentBlock .v258-title-copy {
  min-width: 0 !important;
}

#v169InvestmentBlock.v180-ready.v187-ready
  .v180-portfolio .v180-card-title.full {
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

#v169InvestmentBlock.v180-ready.v187-ready
  .v180-portfolio .v180-card-title.full .q270-title-copy {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 43px !important;
}

#v169InvestmentBlock.v180-ready.v187-ready
  .v180-portfolio .v180-card-title.full .q270-title-copy > span {
  display: block !important;
  margin: 0 !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

#v169InvestmentBlock .q270-title-icon,
#v169InvestmentBlock .v258-title-icon {
  width: 43px !important;
  height: 43px !important;
  flex: 0 0 43px !important;
  object-position: center !important;
}

/* --------------------------------------------------------------------------
   Kleine Karten: identischer Verlauf, gleichmäßige Höhe und Typografie
   -------------------------------------------------------------------------- */

#v169InvestmentBlock.v187-ready .v180-tiles {
  align-items: stretch !important;
  grid-auto-rows: 176px !important;
}

#v169InvestmentBlock.v187-ready .v180-tile:not(.v187-ek-tile) {
  box-sizing: border-box !important;
  grid-template-rows: 56px auto auto !important;
  row-gap: 3px !important;
  align-content: start !important;
  height: 176px !important;
  min-height: 176px !important;
  overflow: hidden !important;
  background: var(--q278d-tile) !important;
  border-color: var(--q278d-cyan) !important;
  box-shadow: 3px 4px 6px rgba(0, 42, 76, .25) !important;
}

#v169InvestmentBlock.v187-ready .v180-tile > img {
  justify-self: center !important;
  object-position: center !important;
}

#v169InvestmentBlock.v187-ready .v180-tile .v180-main,
#v169InvestmentBlock.v187-ready .v180-tile .v180-sub {
  min-width: 0 !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: auto;
  text-align: center !important;
  text-wrap: balance;
}

#v169InvestmentBlock.v187-ready .v180-tile .v180-main {
  font-size: clamp(.96rem, 1.08vw, 1.22rem) !important;
  line-height: 1.03 !important;
}

#v169InvestmentBlock.v187-ready .v180-tile .v180-sub {
  font-size: clamp(.61rem, .66vw, .75rem) !important;
  line-height: 1.10 !important;
  overflow-wrap: anywhere !important;
}

#v169InvestmentBlock.v187-ready
  .v180-top-grid > .v180-card:nth-child(2)
  .v180-tile:nth-child(2) .v185-info-btn {
  display: flex !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 2px auto 0 !important;
  padding: 0 !important;
}

#v169InvestmentBlock.v187-ready
  .v180-top-grid > .v180-card:nth-child(2)
  .v180-tile:nth-child(2) .v185-info-btn img {
  width: 18px !important;
  height: 18px !important;
}

#v169InvestmentBlock.v187-ready
  .v180-top-grid > .v180-card:first-child
  .v180-tile:nth-child(5) .v180-sub {
  font-size: .56rem !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* --------------------------------------------------------------------------
   Wohnungskarten: heller Kartenkörper, abgestufte Innenkarten
   -------------------------------------------------------------------------- */

.q270-unit-card {
  background: var(--q278d-panel) !important;
  border-color: var(--q278d-cyan) !important;
  box-shadow: var(--q278d-card-shadow) !important;
}

.q270-unit-head,
.q270-tax-link {
  background: var(--q278d-blue-head) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .25),
    inset 0 -2px 0 rgba(255, 255, 255, .82) !important;
}

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

.q270-unit-body {
  background: linear-gradient(180deg, #f7fcff 0%, #e5f4ff 100%) !important;
}

.q270-option,
.q270-metric {
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-color: var(--q278d-cyan) !important;
  background: var(--q278d-tile) !important;
  box-shadow: 2px 3px 5px rgba(0, 40, 72, .18) !important;
}

.q270-option {
  height: 84px !important;
  min-height: 84px !important;
}

.q270-option.is-off {
  border-color: #c5ccd3 !important;
  background: linear-gradient(180deg, #f5f6f7 0%, #e1e5e8 100%) !important;
}

.q270-option-copy {
  min-width: 0 !important;
  align-self: center !important;
}

.q270-option-copy strong,
.q270-option-copy small {
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: auto;
  text-wrap: balance;
}

.q270-option-copy strong {
  font-size: clamp(.78rem, .78vw, .88rem) !important;
  line-height: 1.04 !important;
}

.q270-option-copy small {
  font-size: clamp(.61rem, .60vw, .68rem) !important;
  line-height: 1.10 !important;
  overflow-wrap: anywhere !important;
}

.q270-metric {
  height: 108px !important;
  min-height: 108px !important;
  grid-template-rows: 40px auto minmax(22px, auto) !important;
  align-content: start !important;
  justify-items: center !important;
}

.q270-metric img {
  align-self: center !important;
  justify-self: center !important;
  object-position: center !important;
}

.q270-metric b,
.q270-metric small {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: auto;
  text-align: center !important;
  text-wrap: balance;
}

.q270-metric b {
  font-size: clamp(.78rem, .82vw, .94rem) !important;
  line-height: 1.02 !important;
  white-space: nowrap !important;
}

.q270-metric small {
  font-size: clamp(.57rem, .56vw, .64rem) !important;
  line-height: 1.08 !important;
  overflow-wrap: anywhere !important;
}

/* --------------------------------------------------------------------------
   Objektintention: aktiv orange + grünes Häkchen, inaktiv grau + rotes Kreuz
   -------------------------------------------------------------------------- */

.q272-role-choice {
  min-height: 38px !important;
  padding: 5px 7px 5px 11px !important;
  border-radius: 11px !important;
  color: #fff !important;
  font-size: clamp(.60rem, .63vw, .70rem) !important;
  line-height: 1 !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .70),
    inset 0 -2px 0 rgba(49, 54, 59, .34),
    0 4px 7px rgba(0, 0, 0, .30) !important;
}

.q272-role-choice.is-active,
.q272-role-choice[aria-pressed="true"],
.q272-role-choice.is-q276-active {
  border-color: rgba(255, 255, 255, .72) !important;
  background: var(--q278d-orange-button) !important;
}

.q272-role-choice.is-active:hover,
.q272-role-choice[aria-pressed="true"]:hover,
.q272-role-choice.is-q276-active:hover {
  background: var(--q278d-orange-button-hover) !important;
}

.q272-role-choice:not(.is-active),
.q272-role-choice[aria-pressed="false"],
.q272-role-choice.is-q276-inactive {
  border-color: rgba(255, 255, 255, .58) !important;
  background: var(--q278d-grey-button) !important;
  color: #fff !important;
  filter: saturate(.36) !important;
}

.q272-role-choice .q275-role-text {
  color: #fff !important;
  text-shadow: var(--q278d-dark-shadow) !important;
}

/* --------------------------------------------------------------------------
   Zusammenfassung EK-Rendite: Formel mittig, Text und Ergebnis gleich geneigt
   -------------------------------------------------------------------------- */

#v169InvestmentBlock .v187-ek-tile.q270-ek-tile {
  box-sizing: border-box !important;
  height: 176px !important;
  min-height: 176px !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 223, 133, .32), transparent 58%),
    linear-gradient(180deg, #fffefb 0%, #fff2d8 100%) !important;
}

#v169InvestmentBlock .q274-ek-showcase {
  grid-template-rows: 54px 20px 46px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 4px !important;
  min-height: 164px !important;
  padding: 6px 5px !important;
}

#v169InvestmentBlock.v187-ready
  .v180-tile.v187-ek-tile.q270-ek-tile
  .q274-ek-formula {
  width: min(136px, calc(100% - 6px)) !important;
  height: 54px !important;
  max-width: calc(100% - 6px) !important;
  margin: 0 auto !important;
}

#v169InvestmentBlock .q274-ek-label {
  align-self: center !important;
  margin: 0 !important;
  color: #f28a00 !important;
  font-size: clamp(.76rem, .79vw, .91rem) !important;
  line-height: 1 !important;
  transform: rotate(-2.5deg) !important;
  transform-origin: center !important;
  text-shadow:
    0 1px 0 #462600,
    0 2px 2px rgba(0, 0, 0, .34) !important;
}

#v169InvestmentBlock .q274-ek-pill.q270-ek-result {
  width: calc(100% - 8px) !important;
  max-width: 144px !important;
  min-height: 43px !important;
  padding: 5px 8px !important;
  border: 2px solid rgba(255, 255, 255, .66) !important;
  border-radius: 13px !important;
  background: var(--q278d-orange-button) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .72),
    inset 0 -2px 0 rgba(96, 48, 0, .34),
    0 5px 8px rgba(88, 45, 0, .40) !important;
  transform: rotate(-2.5deg) !important;
  transform-origin: center !important;
}

#v169InvestmentBlock.v187-ready
  .v180-tile.v187-ek-tile.q270-ek-tile
  .q274-ek-pill .v180-main {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  text-align: center !important;
  color: #fff !important;
  font-size: clamp(.88rem, .95vw, 1.08rem) !important;
  text-shadow: var(--q278d-dark-shadow) !important;
}

/* --------------------------------------------------------------------------
   Einzel-ETW EK-Rendite: dieselbe Optik, bewusst ohne Formel
   -------------------------------------------------------------------------- */

.q270-metrics > .q270-metric:last-child {
  grid-template-rows: 27px 20px 39px !important;
  align-content: center !important;
  gap: 2px !important;
  padding: 6px 7px !important;
  border: 1.5px solid #f29a00 !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 223, 133, .26), transparent 58%),
    linear-gradient(180deg, #fffefb 0%, #fff2d8 100%) !important;
}

.q270-metrics > .q270-metric:last-child img {
  grid-row: 1 !important;
  width: 27px !important;
  height: 27px !important;
  margin: 0 !important;
}

.q270-metrics > .q270-metric:last-child small {
  grid-row: 2 !important;
  align-self: center !important;
  margin: 0 !important;
  color: #f28a00 !important;
  font-size: 0 !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: rotate(-2.5deg) !important;
  transform-origin: center !important;
  text-shadow:
    0 1px 0 #462600,
    0 2px 2px rgba(0, 0, 0, .30) !important;
}

.q270-metrics > .q270-metric:last-child small::after {
  content: "Ø EK-Rendite";
  font-size: clamp(.60rem, .60vw, .70rem);
}

.q270-metrics > .q270-metric:last-child b {
  grid-row: 3 !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  box-sizing: border-box !important;
  width: calc(100% - 6px) !important;
  min-height: 36px !important;
  margin: 0 auto !important;
  padding: 5px 7px !important;
  border: 2px solid rgba(255, 255, 255, .66) !important;
  border-radius: 11px !important;
  background: var(--q278d-orange-button) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .70),
    inset 0 -2px 0 rgba(96, 48, 0, .34),
    0 4px 7px rgba(88, 45, 0, .34) !important;
  color: #fff !important;
  font-size: clamp(.76rem, .77vw, .90rem) !important;
  line-height: 1 !important;
  transform: rotate(-2.5deg) !important;
  transform-origin: center !important;
  text-shadow: var(--q278d-dark-shadow) !important;
}

.q270-metrics > .q270-metric:last-child b::after {
  content: " p.a.";
}

/* --------------------------------------------------------------------------
   Lagekarte: saubere Karte, korrekt zugeordnetes Bauteil 5 und Verbindung
   -------------------------------------------------------------------------- */

.q270-location-stage .q278d-transit-label {
  position: absolute;
  left: 59.7%;
  top: 53.0%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font: 900 clamp(.60rem, .72vw, .82rem)/1 Nunito, Arial, sans-serif;
  white-space: nowrap;
  text-shadow:
    -1px -1px 1px #1c1c1c,
    1px 1px 2px #1c1c1c,
    0 2px 4px rgba(0, 0, 0, .88);
}

.q270-location-stage .q278d-transit-label b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 5px;
  background: #3346b6;
  color: #fff;
  font: 1000 .72rem/1 Nunito, Arial, sans-serif;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .44);
}

.q272-block-five {
  left: 31.5% !important;
  top: 45.8% !important;
  width: 19.4% !important;
  height: 15.6% !important;
  clip-path:
    polygon(2% 7%, 94% 0, 100% 48%, 90% 69%, 84% 96%, 13% 87%, 1% 66%, 0 30%) !important;
  background:
    linear-gradient(145deg, rgba(213, 171, 60, .96), rgba(137, 83, 22, .90)) !important;
  mix-blend-mode: color !important;
}

.q270-location-pin {
  left: 40.7% !important;
  top: 52.2% !important;
  z-index: 9 !important;
  width: 34px !important;
  height: 34px !important;
  background: #a97019 !important;
}

.q270-location-label {
  left: calc(40.7% + 44px) !important;
  top: calc(52.2% + 1px) !important;
  z-index: 9 !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

.q270-site-connector {
  left: 34.0% !important;
  top: 68.5% !important;
  bottom: auto !important;
  width: 13.2% !important;
  height: 3px !important;
  z-index: 8 !important;
  background: #fff !important;
  transform: rotate(-48deg) !important;
  transform-origin: left center !important;
}

.q270-site-connector::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 11px solid #fff;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .34));
  transform: translateY(-50%);
}

.q270-location[data-view="map"] .q278d-transit-label {
  opacity: 1;
}

.q270-location[data-view="model"] .q278d-transit-label {
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Sektion 3: Filter, Etagenauswahl und bündige 3D-Simulationskarte
   -------------------------------------------------------------------------- */

#v169SimSection .v169-section-body > .v169-blue-strip:not(:first-child) {
  box-sizing: border-box !important;
  min-height: 54px !important;
  padding: 8px 14px !important;
  border: 2px solid var(--q278d-cyan) !important;
  border-bottom: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  background: var(--q278d-blue-head) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .28),
    inset 0 -2px 0 rgba(255, 255, 255, .90),
    0 4px 10px rgba(0, 35, 66, .30) !important;
  color: #fff !important;
  font-family: Nunito, Arial, sans-serif !important;
  font-weight: 1000 !important;
  text-shadow: var(--q278d-dark-shadow) !important;
}

#v169SimSection .v169-section-body > .v169-blue-strip.light {
  margin-bottom: 0 !important;
}

#v169SimSection .q276-filter-reset {
  min-height: 34px !important;
  padding: 5px 13px !important;
  border: 2px solid rgba(255, 255, 255, .78) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(180deg, #ffe09a 0%, #ffc253 30%, #f5a01c 68%, #d78200 100%) !important;
  color: #fff !important;
  font: 1000 .72rem/1 Nunito, Arial, sans-serif !important;
  text-shadow: var(--q278d-dark-shadow) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .78),
    inset 0 -2px 0 rgba(102, 53, 0, .28),
    0 4px 7px rgba(0, 0, 0, .27) !important;
}

#v169SimSection .q276-filter-reset:hover,
#v169SimSection .q276-filter-reset:focus-visible {
  background:
    linear-gradient(180deg, #ffebba 0%, #ffd173 30%, #ffaf2f 68%, #e38e00 100%) !important;
  outline: none !important;
}

#v169SimSection .v169-filter-area {
  box-sizing: border-box !important;
  margin-top: 0 !important;
  padding: 11px 9px 7px !important;
  border: 2px solid var(--q278d-cyan) !important;
  border-top: 0 !important;
  border-radius: 0 0 15px 15px !important;
  background: var(--q278d-panel) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, .92),
    4px 5px 8px rgba(0, 35, 66, .24) !important;
}

#v169SimSection #v187FilterPanel {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#v169SimSection #v187FilterPanel .v187-filter-grid {
  box-sizing: border-box !important;
  grid-template-columns: 1.10fr repeat(4, minmax(0, 1fr)) !important;
  gap: 13px !important;
  padding: 1px 6px 12px !important;
  border: 0 !important;
  background: transparent !important;
}

#v169SimSection #v187FilterPanel .v187-filter-field {
  min-width: 0 !important;
  gap: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#v169SimSection #v187FilterPanel .v187-filter-field label {
  min-height: 15px !important;
  color: #154f82 !important;
  font: 1000 .70rem/1.08 Nunito, Arial, sans-serif !important;
  letter-spacing: .018em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .92) !important;
}

#v169SimSection #v187FilterPanel .v187-filter-field input,
#v169SimSection #v187FilterPanel .v187-filter-field select {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 38px !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  border: 1.5px solid rgba(26, 107, 169, .42) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #fff 0%, #f4faff 100%) !important;
  color: #173b60 !important;
  font: 900 .80rem/1 Nunito, Arial, sans-serif !important;
  box-shadow:
    inset 0 1px 2px rgba(18, 35, 68, .08),
    0 2px 4px rgba(0, 47, 82, .09) !important;
}

#v169SimSection #v187FilterPanel .v187-filter-field input:focus,
#v169SimSection #v187FilterPanel .v187-filter-field select:focus {
  border-color: var(--q278d-cyan) !important;
  outline: 2px solid rgba(0, 174, 239, .18) !important;
  outline-offset: 1px !important;
}

#v169SimSection #theqFloorTabs.floor-tabs-v72 {
  box-sizing: border-box !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 6px 7px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#v169SimSection #theqFloorTabs.floor-tabs-v72 button {
  box-sizing: border-box !important;
  min-width: 100px !important;
  min-height: 58px !important;
  padding: 6px 10px !important;
  border: 1.5px solid rgba(16, 102, 164, .28) !important;
  border-radius: 11px !important;
  background: var(--q278d-tile) !important;
  color: #0c4e84 !important;
  font-family: Nunito, Arial, sans-serif !important;
  font-weight: 1000 !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .94),
    0 6px 11px rgba(0, 42, 74, .14) !important;
}

#v169SimSection #theqFloorTabs.floor-tabs-v72 button:hover,
#v169SimSection #theqFloorTabs.floor-tabs-v72 button:focus-visible {
  transform: translateY(-1px) !important;
  border-color: var(--q278d-cyan) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .94),
    0 8px 15px rgba(0, 42, 74, .20) !important;
  outline: none !important;
}

#v169SimSection #theqFloorTabs.floor-tabs-v72 button.active {
  border-color: rgba(255, 255, 255, .76) !important;
  background: var(--q278d-orange-button) !important;
  color: #fff !important;
  text-shadow: var(--q278d-dark-shadow) !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .75),
    inset 0 -2px 0 rgba(94, 48, 0, .30),
    0 8px 15px rgba(158, 82, 0, .29) !important;
}

#v169SimSection .v169-filter-area + .v169-blue-strip {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

#v169SimSection #v169StageSlot {
  margin-top: 0 !important;
}

#v169SimSection #theq3DStage.floor3d-v91 {
  box-sizing: border-box !important;
  margin: 0 0 14px !important;
  border: 2px solid var(--q278d-cyan) !important;
  border-top: 0 !important;
  border-radius: 0 0 15px 15px !important;
  background: #fff !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, .9),
    4px 6px 10px rgba(0, 35, 66, .22) !important;
}

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

/* --------------------------------------------------------------------------
   Responsive Abstufung – gleiche Systematik pro Ansicht
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  #v169InvestmentBlock.v187-ready .v180-card-title {
    height: 64px !important;
    min-height: 64px !important;
  }

  #v169InvestmentBlock.v180-ready.v187-ready
    .v180-portfolio .v180-card-title.full {
    white-space: normal !important;
  }

  #v169InvestmentBlock.v187-ready .v180-tiles {
    grid-auto-rows: 176px !important;
  }

  #v169InvestmentBlock.v187-ready .v180-tile:not(.v187-ek-tile) {
    height: 176px !important;
    min-height: 176px !important;
  }

  #v169InvestmentBlock .v187-ek-tile.q270-ek-tile {
    height: 176px !important;
    min-height: 176px !important;
  }

  .q270-option {
    height: 84px !important;
    min-height: 84px !important;
  }

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

  .q270-location-stage .q278d-transit-label {
    left: 59.3%;
    top: 53.2%;
  }

  #v169SimSection #v187FilterPanel .v187-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px !important;
  }

  #v169SimSection #v187FilterPanel .v187-filter-field:first-child {
    grid-column: 1 / -1 !important;
  }

  #v169SimSection #theqFloorTabs.floor-tabs-v72 button {
    min-width: calc(33.333% - 8px) !important;
    min-height: 58px !important;
    flex: 1 1 calc(33.333% - 8px) !important;
  }
}

@media (max-width: 650px) {
  #v169InvestmentBlock.v187-ready .v180-card-title {
    height: 68px !important;
    min-height: 68px !important;
    padding: 8px 10px !important;
    font-size: .84rem !important;
  }

  #v169InvestmentBlock .q270-title-icon,
  #v169InvestmentBlock .v258-title-icon {
    width: 39px !important;
    height: 39px !important;
    flex-basis: 39px !important;
  }

  #v169InvestmentBlock.v187-ready .v180-tiles {
    grid-auto-rows: 176px !important;
  }

  #v169InvestmentBlock.v187-ready .v180-tile:not(.v187-ek-tile) {
    height: 176px !important;
    min-height: 176px !important;
  }

  #v169InvestmentBlock .v187-ek-tile.q270-ek-tile {
    height: 176px !important;
    min-height: 176px !important;
  }

  #v169InvestmentBlock.v187-ready .v180-tile .v180-main {
    font-size: .94rem !important;
  }

  #v169InvestmentBlock.v187-ready .v180-tile .v180-sub {
    font-size: .61rem !important;
  }

  .q272-role-choice {
    min-height: 40px !important;
    border-radius: 10px !important;
    font-size: .64rem !important;
  }

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

  .q272-role-picker {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  .q270-option-copy strong {
    font-size: .78rem !important;
  }

  .q270-option-copy small {
    font-size: .61rem !important;
  }

  .q270-metric b {
    font-size: .80rem !important;
  }

  .q270-metric small {
    font-size: .58rem !important;
  }

  .q270-metrics > .q270-metric:last-child b {
    font-size: .78rem !important;
  }

  .q270-location-stage .q278d-transit-label {
    left: 58.8%;
    top: 53.5%;
    font-size: .58rem;
  }

  .q270-location-stage .q278d-transit-label b {
    width: 17px;
    height: 17px;
    font-size: .62rem;
  }

  .q270-location-pin {
    width: 28px !important;
    height: 28px !important;
    border-width: 3px !important;
  }

  .q270-location-label {
    left: calc(40.7% + 36px) !important;
    min-height: 29px !important;
    padding: 5px 7px !important;
    font-size: .58rem !important;
  }

  #v169SimSection .v169-section-body > .v169-blue-strip:not(:first-child) {
    min-height: 62px !important;
    padding: 8px 10px !important;
    font-size: .82rem !important;
  }

  #v169SimSection .q276-filter-reset {
    min-height: 32px !important;
    padding: 4px 8px !important;
    font-size: .62rem !important;
  }

  #v169SimSection #v187FilterPanel .v187-filter-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #v169SimSection #v187FilterPanel .v187-filter-field:first-child {
    grid-column: auto !important;
  }

  #v169SimSection #theqFloorTabs.floor-tabs-v72 button {
    min-width: calc(50% - 6px) !important;
    flex: 1 1 calc(50% - 6px) !important;
  }
}

/* ==========================================================================
   Q280 – letzte Präzisionskorrekturen auf der bestätigten Q278-Basis
   Rechenmodell und Daten bleiben unverändert.
   ========================================================================== */

/* Nur ein einziges Nach-oben-Symbol: Das vorhandene Bild bleibt erhalten,
   die zusätzlich gezeichneten CSS-Pfeile werden abgeschaltet. */
#v179BackToTop::before,
#v179BackToTop::after {
  content: none !important;
  display: none !important;
}

/* Objektintention: längere, gut lesbare Header-Buttons in der vertrauten
   Glanzoptik. Aktiv orange/grün, Alternative grau/rot. */
.q270-unit-head {
  grid-template-columns:
    48px minmax(0, 1fr) minmax(342px, 374px) !important;
}

.q272-role-picker {
  width: 100% !important;
  max-width: 374px !important;
  justify-self: end !important;
}

.q272-role-buttons {
  gap: 8px !important;
}

.q272-role-choice {
  grid-template-columns: minmax(0, 1fr) 30px !important;
  gap: 9px !important;
  min-height: 44px !important;
  padding: 6px 7px 6px 12px !important;
  border-width: 2px !important;
  border-radius: 13px !important;
  font-size: clamp(.76rem, .78vw, .88rem) !important;
  line-height: 1.04 !important;
  letter-spacing: .005em !important;
  filter: none !important;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .72),
    inset 0 -3px 0 rgba(45, 49, 54, .30),
    0 4px 7px rgba(0, 0, 0, .24) !important;
}

.q272-role-choice .q275-role-text {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.q272-role-choice .q275-role-state {
  align-self: center !important;
  justify-self: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-width: 3px !important;
  border-radius: 7px !important;
  background: #fff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .18) !important;
}

.q272-role-choice.is-active,
.q272-role-choice[aria-pressed="true"],
.q272-role-choice.is-q276-active {
  background: var(--q278d-orange-button) !important;
  border-color: rgba(255, 244, 206, .86) !important;
}

.q272-role-choice.is-active .q275-role-state,
.q272-role-choice[aria-pressed="true"] .q275-role-state,
.q272-role-choice.is-q276-active .q275-role-state {
  border-color: var(--q278-active) !important;
  background: #fff !important;
  color: var(--q278-active) !important;
}

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

.q272-role-choice:not(.is-active),
.q272-role-choice[aria-pressed="false"],
.q272-role-choice.is-q276-inactive {
  background:
    linear-gradient(180deg, #b9c0c7 0%, #8d969f 43%, #68727c 72%, #505a63 100%) !important;
  border-color: rgba(255, 255, 255, .62) !important;
  color: #fff !important;
  filter: none !important;
}

.q272-role-choice:not(.is-active) .q275-role-state,
.q272-role-choice[aria-pressed="false"] .q275-role-state,
.q272-role-choice.is-q276-inactive .q275-role-state {
  border-color: var(--q278-inactive) !important;
  background: #fff !important;
  color: var(--q278-inactive) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .18) !important;
}

.q272-role-choice:not(.is-active) .q275-role-state::after,
.q272-role-choice[aria-pressed="false"] .q275-role-state::after,
.q272-role-choice.is-q276-inactive .q275-role-state::after {
  content: "×" !important;
  inset: 0 !important;
  padding: 0 !important;
  color: var(--q278-inactive) !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

.q272-role-picker > small {
  font-size: .66rem !important;
}

/* Lageplan: Die Farbfläche endet oberhalb der vorgelagerten Wohnhäuser.
   Punkt und Bezeichnung liegen direkt am eigentlichen Bauteil 5. */
.q278d-location .q272-block-five {
  left: 34.2% !important;
  top: 36.7% !important;
  width: 25.8% !important;
  height: 17.0% !important;
  clip-path:
    polygon(4% 6%, 91% 0, 100% 42%, 96% 70%, 86% 96%, 10% 91%, 0 72%, 1% 29%) !important;
}

.q278d-location .q270-location-pin {
  left: 37.5% !important;
  top: 48.4% !important;
}

.q278d-location .q270-location-label {
  left: calc(37.5% + 42px) !important;
  top: calc(48.4% + 2px) !important;
}

/* Google Maps ist eine gleichrangige, zurückhaltende Registerkarte und kein
   dominanter Hauptbutton. */
.q278d-location .q270-location-switch .q272-map-link {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-height: 32px !important;
  padding: 5px 11px !important;
  border: 1.5px solid #00aeef !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f1f9ff 100%) !important;
  color: #1266a5 !important;
  font-size: .72rem !important;
  font-weight: 1000 !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 2px 4px rgba(0, 58, 100, .12) !important;
}

.q278d-location .q270-location-switch .q272-map-link:hover,
.q278d-location .q270-location-switch .q272-map-link:focus-visible {
  background: linear-gradient(180deg, #f5fbff 0%, #dcefff 100%) !important;
  border-color: #087ec5 !important;
  outline: none !important;
}

/* Dezente Schatten unter den Abschnittsköpfen. */
#v169InvestmentBlock.v187-ready .v169-main-title,
#v169LageSection .v169-section-title,
#v169SimSection .v169-section-title {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .64),
    0 4px 7px rgba(89, 53, 0, .18) !important;
}

/* Die 3D-Headline schließt direkt am Bild ab. Unter ihr bleibt nur eine
   feine Schattenkante; der türartige cyanfarbene Außenrahmen entfällt. */
#v169SimSection .v169-filter-area + .v169-blue-strip {
  border-bottom: 0 !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(255, 255, 255, .74),
    0 4px 7px rgba(0, 35, 66, .19) !important;
}

#v169SimSection #theq3DStage.floor3d-v91 {
  margin-top: 0 !important;
  border: 0 !important;
  border-radius: 0 0 15px 15px !important;
  box-shadow: 0 5px 9px rgba(0, 35, 66, .16) !important;
}

#v169SimSection .q276-filter-reset {
  font-size: .82rem !important;
}

@media (max-width: 980px) {
  .q270-unit-head {
    grid-template-columns:
      48px minmax(0, 1fr) minmax(330px, 370px) !important;
  }

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

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

@media (max-width: 650px) {
  .q270-unit-head {
    grid-template-columns: 42px minmax(0, 1fr) !important;
  }

  .q272-role-picker {
    grid-column: 1 / -1 !important;
    max-width: none !important;
    margin-top: 7px !important;
  }

  .q272-role-choice {
    min-height: 46px !important;
    padding-left: 10px !important;
    font-size: .78rem !important;
  }

  .q272-role-picker > small {
    font-size: .64rem !important;
  }

  .q278d-location .q270-location-switch .q272-map-link {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 32px !important;
    padding-inline: 9px !important;
    font-size: .67rem !important;
  }

  #v169SimSection .q276-filter-reset {
    font-size: .74rem !important;
  }
}

@media (max-width: 430px) {
  .q272-role-buttons {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .q272-role-choice {
    width: 100% !important;
    min-height: 44px !important;
    font-size: .80rem !important;
  }
}

/* ==========================================================================
   Q282 – Kennzahlen zuerst, lesbare Wohnungsparameter auf 4K und Mobilgeräten
   Die Werte stammen unverändert aus dem bestehenden Rechenmodell.
   ========================================================================== */

.q270-unit-body > .q270-metrics {
  margin: 0 0 15px !important;
}

.q270-unit-body > .q270-option-grid {
  margin: 0 !important;
}

.q270-metric {
  height: 128px !important;
  min-height: 128px !important;
  grid-template-rows: 42px minmax(22px, auto) minmax(34px, auto) !important;
  gap: 3px !important;
  padding: 9px 7px !important;
}

.q270-metric img {
  width: 42px !important;
  height: 42px !important;
}

.q270-metric b {
  margin: 0 !important;
  color: #0d5595 !important;
  font-size: clamp(.92rem, .98vw, 1.10rem) !important;
  line-height: 1.02 !important;
  white-space: nowrap !important;
}

.q270-metric small {
  margin: 1px 0 0 !important;
  color: #0c315b !important;
  font-size: clamp(.66rem, .68vw, .77rem) !important;
  font-weight: 900 !important;
  line-height: 1.10 !important;
}

.q270-option {
  height: 96px !important;
  min-height: 96px !important;
}

.q270-option-copy strong {
  font-size: clamp(.90rem, .92vw, 1.02rem) !important;
  line-height: 1.04 !important;
}

.q270-option-copy small {
  margin-top: 5px !important;
  font-size: clamp(.68rem, .70vw, .79rem) !important;
  font-weight: 850 !important;
  line-height: 1.13 !important;
}

.q270-option[data-q270-action="rent"].is-on .q270-option-copy small {
  color: #08793c !important;
  font-weight: 950 !important;
}

.q270-option[data-q270-action="rent"].is-off .q270-option-copy small {
  color: #737d86 !important;
}

.q270-metrics > .q270-metric:last-child {
  height: 128px !important;
  min-height: 128px !important;
  grid-template-rows: 30px 34px 44px !important;
  gap: 3px !important;
  padding: 7px 8px !important;
}

.q270-metrics > .q270-metric:last-child img {
  width: 30px !important;
  height: 30px !important;
}

.q270-metrics > .q270-metric:last-child small {
  align-self: center !important;
  max-width: 100% !important;
  color: #f28a00 !important;
  white-space: normal !important;
}

.q270-metrics > .q270-metric:last-child small::after {
  content: "Ø Eigenkapitalrendite" !important;
  display: block !important;
  font-size: clamp(.67rem, .70vw, .79rem) !important;
  line-height: 1.02 !important;
}

.q270-metrics > .q270-metric:last-child b {
  min-height: 41px !important;
  font-size: clamp(.91rem, .96vw, 1.08rem) !important;
}

@media (max-width: 980px) {
  .q270-metric,
  .q270-metrics > .q270-metric:last-child {
    height: 130px !important;
    min-height: 130px !important;
  }

  .q270-option {
    height: 98px !important;
    min-height: 98px !important;
  }
}

@media (max-width: 650px) {
  .q270-unit-body {
    padding: 11px !important;
  }

  .q270-metrics {
    gap: 8px !important;
  }

  .q270-metric {
    height: 126px !important;
    min-height: 126px !important;
    padding-inline: 5px !important;
  }

  .q270-metric b {
    font-size: .91rem !important;
  }

  .q270-metric small {
    font-size: .66rem !important;
  }

  .q270-metrics > .q270-metric:last-child {
    height: 126px !important;
    min-height: 126px !important;
  }

  .q270-metrics > .q270-metric:last-child small::after {
    font-size: .67rem !important;
  }

  .q270-metrics > .q270-metric:last-child b {
    font-size: .90rem !important;
  }

  .q270-option {
    height: 98px !important;
    min-height: 98px !important;
  }

  .q270-option-copy strong {
    font-size: .90rem !important;
  }

  .q270-option-copy small {
    font-size: .68rem !important;
  }
}