/* RoentgenHausEtagen – Hausgrafik mit Etagen-Flügeln, mobil als Chips */

.roentgen-haus-etagen-block {
  --rgh-accent: var(--us-link, #1f5a96);
  --rgh-surface: color-mix(in srgb, var(--us-bg-surface, #eef0f3) 66%, transparent 33%);
  --rgh-glow: var(--us-bg-surface, #eef0f3);
  --rgh-fade: 600ms;
  --rgh-ease: cubic-bezier(.4, 0, .2, 1);
  --rgh-tuck: clamp(2rem, 5vw, 5.5rem);
}

.roentgen-haus-etagen-block .rgh-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1.2fr);
  grid-template-areas: "left house right";
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- Haus ---------- */
.rgh-house {
  grid-area: house;
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
}
.rgh-house img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--rgh-fade) var(--rgh-ease);
  pointer-events: none;
  user-select: none;
}
.rgh-house img.is-active { opacity: 1; }
/* Grundbild bleibt immer stehen, die beleuchteten Varianten blenden darüber */
.rgh-house img[data-state="aus"] { opacity: 1; }

/* ---------- Flügel ---------- */
.rgh-wings {
  display: flex;
  flex-direction: column;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}
.rgh-wings--left  { grid-area: left;  align-items: flex-end;   text-align: right; }
.rgh-wings--right { grid-area: right; align-items: flex-start; text-align: left; }

.rgh-wing {
  position: relative;
  isolation: isolate;
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 1.1rem 1.4rem;
  color: inherit;
  text-decoration: none;
  outline-offset: 4px;
  transition: opacity 300ms var(--rgh-ease);
}
/* Zweite Zeile: schmaler, zum Motiv hin eingerückt */
.rgh-wing:nth-child(2) { width: 85%; }

/* Verlauf: grau außen, transparent zum Haus hin. Zwei Ebenen, damit das
   Aufleuchten weich überblendet (Gradients selbst sind nicht animierbar). */
.rgh-wing::before,
.rgh-wing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transition: opacity 400ms var(--rgh-ease);
}
.rgh-wings--left .rgh-wing  { border-radius: var(--us-radius, 6px) 0 0 var(--us-radius, 6px); }
.rgh-wings--right .rgh-wing { border-radius: 0 var(--us-radius, 6px) var(--us-radius, 6px) 0; }

.rgh-wings--left  .rgh-wing::before { background: linear-gradient(to right, var(--rgh-surface), transparent); }
.rgh-wings--right .rgh-wing::before { background: linear-gradient(to left,  var(--rgh-surface), transparent); }
.rgh-wings--left  .rgh-wing::after  { background: linear-gradient(to right, var(--rgh-glow) 15%, transparent); opacity: 0; }
.rgh-wings--right .rgh-wing::after  { background: linear-gradient(to left,  var(--rgh-glow) 15%, transparent); opacity: 0; }
.rgh-wing.is-active::after { opacity: 1; }

.rgh-wing-floor {
  display: block;
  font-size: .875rem;
  color: var(--us-text-weak, #6b7280);
  margin-bottom: .2rem;
  transition: color 250ms var(--rgh-ease);
}
.rgh-wing-title {
  margin: 0 0 .35rem;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.2;
  font-weight: 600;
  color: var(--rgh-accent);
}
.rgh-wing-text {
  margin: 0;
  text-wrap: pretty;
  font-size: .975rem;
  line-height: 1.5;
  color: var(--us-text-strong, #1c1c1c);
}
.rgh-wing.is-active .rgh-wing-floor { color: var(--us-text-strong, #1c1c1c); }
.rgh-wing.is-active .rgh-wing-text { color: var(--us-text-strong, #1c1c1c); }


/* Inaktive Flügel treten leicht zurück, sobald einer aktiv ist */
.roentgen-haus-etagen-block.has-active .rgh-wing:not(.is-active) { opacity: .55; }

/* Flügel ziehen leicht unter das Haus: Verlauf läuft unter dem Motiv aus,
   der Text bleibt durch den Innenabstand frei. */
@media (min-width: 900px) {
  .rgh-house { z-index: 1; pointer-events: none; }
  .rgh-wings { position: relative; z-index: 0; }
  .rgh-wings--left  { margin-right: calc(var(--rgh-tuck) * -1); }
  .rgh-wings--right { margin-left:  calc(var(--rgh-tuck) * -1); }
  .rgh-wings--left  .rgh-wing { padding-right: calc(var(--rgh-tuck) * .55 + 1.4rem); }
  .rgh-wings--right .rgh-wing { padding-left:  calc(var(--rgh-tuck) * .55 + 1.4rem); }
}


/* ---------- Chips (nur mobil) ---------- */
.rgh-chips { display: none; }
 
@media (max-width: 899px) {
  .roentgen-haus-etagen-block .rgh-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "house" "chips" "panel";
    gap: 1rem;
    max-width:540px;
  }
  .rgh-wings { display: contents; }
  .rgh-wings .rgh-wing,
  .rgh-wings .rgh-wing:nth-child(2) {
    grid-area: panel;
    display: none;
    width: 100%;
    text-align: center;
    border-radius: var(--us-radius-large, 6px);
    box-shadow: var(--us-box-shadow);
  }
  .rgh-wing::before { display: none; }
  .rgh-wing::after { background: var(--rgh-glow) !important; opacity: 1; }
  /* Gleiche Spezifität wie die nth-child-Regel oben, damit auch die zweiten Flügel erscheinen */
  .rgh-wings .rgh-wing.is-active { display: block; animation: rgh-in 300ms var(--rgh-ease); }
  .roentgen-haus-etagen-block.has-active .rgh-wing:not(.is-active) { opacity: 1; }
 
  .rgh-chips {
    grid-area: chips;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* Optik kommt von themebtn secondary/primary, hier nur Touch-Ziel */
  .rgh-chip { min-height: 44px; }
}
 
@keyframes rgh-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
 
@media (prefers-reduced-motion: reduce) {
  .roentgen-haus-etagen-block { --rgh-fade: 0ms; }
  .rgh-wing, .rgh-wing::after, .rgh-wing.is-active { transition: none; animation: none; }
}