/* ==========================================================================
   BOME Studio Bremen — Übernahme-Seite (studio-bremen-uebernahme.html)
   Ergänzt studio-bremen.css um die wenigen Bausteine, die nur diese Seite
   braucht. Farben kommen aus den --st-* Variablen, damit Hell/Dunkel passt.
   ========================================================================== */

/* Ablöse-Kasten im Hero */
.ue-preis {
  display: inline-flex; flex-direction: column; gap: 0.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.2rem); padding: 1rem 1.3rem;
  border: 1px solid rgba(255,255,255,0.35); background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ue-preis__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
.ue-preis__wert { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -0.03em; color: #fff; }
.ue-preis__wert small { font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0; color: rgba(255,255,255,0.75); margin-left: 0.4rem; }

/* Eckdaten: st-addons, aber mit langen Erklärzeilen */
.ue-fakten .st-addon dd { font-size: 1.2rem; }
.ue-fakten .st-addon dd span { line-height: 1.45; }

/* Einheiten-Karten: eigenes Etikett statt "Am häufigsten gebucht" */
.ue-einheit--haupt { border-color: var(--st-red); }
.ue-einheit__etikett {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--st-red); color: #fff; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 0.35rem 0.9rem; white-space: nowrap;
}
.ue-einheit__miete { font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -0.02em; margin: 0.4rem 0 0; color: var(--st-fg); }
.ue-einheit__miete small { display: block; font-family: var(--font-body); font-size: 0.82rem; color: var(--st-fg-soft); letter-spacing: 0; margin-top: 0.3rem; }

/* Inventar-Gruppen */
.ue-inventar { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
@media (max-width: 1100px) { .ue-inventar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .ue-inventar { grid-template-columns: 1fr; } }
.ue-inventar article { border-top: 1px solid var(--st-line); padding-top: 1.2rem; }
.ue-inventar h3 { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 0.9rem; color: var(--st-fg); }
.ue-inventar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ue-inventar li { color: var(--st-fg-soft); font-size: 0.95rem; line-height: 1.45; }

/* FAQ im Studio-Look */
.ue-faq { max-width: 860px; }
.ue-faq details { border-bottom: 1px solid var(--st-line); padding: 1.2rem 0; }
.ue-faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem;
  align-items: baseline; font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  letter-spacing: -0.01em; color: var(--st-fg);
}
.ue-faq summary::-webkit-details-marker { display: none; }
.ue-faq summary::after { content: "+"; color: var(--st-red); font-size: 1.4rem; line-height: 1; }
.ue-faq details[open] summary::after { content: "–"; }
.ue-faq details p { margin: 0.8rem 0 0; color: var(--st-fg-soft); line-height: 1.65; max-width: 70ch; }

.ue-hinweis { margin-top: 1.5rem; font-size: 0.85rem; color: var(--st-fg-soft); max-width: 70ch; line-height: 1.55; }

/* Eckdaten: feste Raster, damit keine leeren Felder entstehen (8 Angaben) */
.ue-fakten { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .ue-fakten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .ue-fakten { grid-template-columns: 1fr; } }

/* Pacht-Hinweis im Ablöse-Kasten */
.ue-preis__alt { font-size: 0.85rem; color: rgba(255,255,255,0.85); margin-top: 0.35rem; }