/*
 * Finanz-Dresden Immobilien – Anpassungen zum Creuva Theme
 *
 * Wird im Seitenlayout unter "Creuva-Design › Eigene Stylesheets" nach creuva.css
 * geladen. Creuva liegt in CSS-Cascade-Layern, Regeln ohne Layer haben deshalb
 * immer Vorrang (kein !important nötig).
 */

/* ------------------------------------------------------------------ */
/* Markenfarben aus dem bisherigen Design                              */
/* Blau #305979 (Weiß darauf 7,4 : 1), Orange #ee7321.                 */
/* Orange als Textfarbe ist auf Weiß zu hell (2,9 : 1), deshalb wird   */
/* für Text das dunklere #b5520e verwendet (5,0 : 1) und auf orangen   */
/* Flächen dunkle Schrift (5,8 : 1).                                   */
/* ------------------------------------------------------------------ */
:root,
:root[data-scheme] {
  --scheme-primary: #305979;
  --scheme-accent: #ee7321;
  --scheme-accent-text: #b5520e;
  --scheme-accent-contrast: #1c1c1b;
  --scheme-dark-accent: #f4a46e;
}

/* Etwas mehr Luft im Fließtext, Silbentrennung wie bisher */
main {
  hyphens: auto;
  hyphenate-limit-chars: 10;
}

main :is(h1, h2, h3) {
  hyphens: manual;
}

/* ------------------------------------------------------------------ */
/* Über uns: Tilo und Amelie auf blauem Hintergrund                    */
/* Bild größer (Hochformat), Text als eigene Fläche abgesetzt          */
/* ------------------------------------------------------------------ */
.fd-person.c-media {
  align-items: stretch;
  gap: 0;
}

@media (min-width: 56rem) {
  .fd-person.c-media--left:has(.c-media__visual) {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .fd-person.c-media--right:has(.c-media__visual) {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.fd-person .c-media__visual img {
  aspect-ratio: 4 / 5;
  height: 100%;
  box-shadow: none;
}

.fd-person .c-media__body {
  align-self: center;
  margin: var(--space-m) 0 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--radius-l);
  border-top: 4px solid var(--scheme-accent);
  background: rgb(255 255 255 / 0.08);
}

@media (min-width: 56rem) {
  .fd-person.c-media--left .c-media__body {
    margin: 0 0 0 calc(var(--space-l) * -1);
  }

  .fd-person.c-media--right .c-media__body {
    margin: 0 calc(var(--space-l) * -1) 0 0;
    position: relative;
    z-index: 1;
  }

  .fd-person .c-media__body {
    position: relative;
    z-index: 1;
    background: color-mix(in srgb, var(--scheme-primary) 82%, #000);
    box-shadow: var(--shadow-l);
  }
}

.fd-person .c-media__body blockquote {
  margin: 0 0 var(--space-m);
  padding: 0;
  border: 0;
  font-size: var(--fs-large);
  font-style: italic;
}

.fd-person + .fd-person {
  margin-top: var(--space-xl);
}

/* ------------------------------------------------------------------ */
/* Referenzen: größere Bilder, Text klar vom Bild getrennt             */
/* Hintergrund hell/dunkel wählt die Redaktion pro Artikel im          */
/* CSS-Stil (Hintergrund › Grau/Hauptfarbe) aus.                       */
/* ------------------------------------------------------------------ */
@media (min-width: 56rem) {
  .fd-reference.c-media--left:has(.c-media__visual) {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }

  .fd-reference.c-media--right:has(.c-media__visual) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  }
}

.fd-reference .c-media__visual img {
  aspect-ratio: 3 / 2;
}

.fd-reference .c-media__body {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  background: var(--c-surface);
  box-shadow: var(--shadow-m);
}

.fd-reference .c-media__body .rte ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1.25rem;
  font-size: var(--fs-small);
}

.fd-reference .c-media__body .rte ul > li + li {
  margin-top: 0;
}

.u-bg-primary .fd-reference .c-media__body {
  border-color: rgb(255 255 255 / 0.18);
  background: color-mix(in srgb, var(--scheme-primary) 82%, #000);
}

.fd-reference + .fd-reference {
  margin-top: var(--space-xl);
}

/* ------------------------------------------------------------------ */
/* Formulare: zweispaltig, über die ganze Inhaltsbreite                */
/* Klasse "fd-form" am Formular-Element, "fd-half" an halben Feldern,  */
/* "fd-frame" an der Elementgruppe für den blauen Rahmen               */
/* ------------------------------------------------------------------ */
.fd-frame {
  padding: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  border: 3px solid var(--scheme-primary);
  border-radius: var(--radius-l);
  background: var(--c-surface);
}

.fd-form .formbody {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-m);
}

@media (min-width: 40rem) {
  .fd-form .formbody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fd-form .formbody > * {
    grid-column: 1 / -1;
  }

  .fd-form .formbody > .fd-half {
    grid-column: auto;
  }
}

.fd-form fieldset {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0 0 var(--space-m);
  padding: 0;
  border: 0;
}

.fd-form fieldset > legend {
  margin-bottom: var(--space-s);
  padding: 0;
  color: var(--c-primary);
  font-size: var(--fs-h3);
  font-weight: 700;
}

.fd-form fieldset:not(.radio_container, .checkbox_container) {
  display: grid;
  grid-template-columns: inherit;
  gap: inherit;
}

@media (min-width: 40rem) {
  .fd-form fieldset:not(.radio_container, .checkbox_container) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fd-form fieldset > * {
    grid-column: 1 / -1;
  }

  .fd-form fieldset > .fd-half {
    grid-column: auto;
  }
}

/* Radio-Auswahl (Objektart, Heizart) nebeneinander */
.fd-form .fd-inline :is(fieldset.radio_container, fieldset.checkbox_container) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.fd-form .fd-inline :is(fieldset.radio_container, fieldset.checkbox_container) > legend {
  flex-basis: 100%;
}

.fd-form .fd-note {
  color: var(--c-text-muted);
  font-size: var(--fs-small);
}

/* ------------------------------------------------------------------ */
/* Footer: ruhigere Abstände, dünnere Linien                           */
/* ------------------------------------------------------------------ */
.l-footer {
  padding-block: var(--space-xl) var(--space-l);
  border-top: 1px solid var(--c-border);
}

.l-footer__inner {
  gap: var(--space-l) clamp(2rem, 1rem + 4vw, 5rem);
}

.l-bottom {
  border-top: 1px solid var(--c-border);
}

/* Kontaktleiste im Footer: dünne Linie statt Fläche mit Rahmen */
.l-footer .c-footer-contact {
  margin-top: var(--space-m);
  border: 0;
  border-top: 1px solid var(--c-border);
  border-radius: 0;
  padding-inline: 0;
  background: none;
}

/* ------------------------------------------------------------------ */
/* Immobilienliste (Maklermodul, Template makler_list_creuva)          */
/* ------------------------------------------------------------------ */
.fd-estates #estate_list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-m);
}

.fd-estate {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  background: var(--c-surface);
  color: var(--c-text);
  text-decoration: none;
  box-shadow: var(--shadow-s);
  transition: transform var(--transition-hover), box-shadow var(--transition-hover);
}

.fd-estate > .mix {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.fd-estate:hover,
.fd-estate:focus-visible {
  transform: translateY(var(--hover-lift));
  box-shadow: var(--shadow-m);
}

.fd-estate__image {
  position: relative;
  margin: 0;
}

.fd-estate__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.fd-estate__location {
  position: absolute;
  left: var(--space-s);
  bottom: var(--space-s);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--scheme-primary);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 600;
}

.fd-estate__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
}

.fd-estate__title {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 1.25;
}

.fd-estate__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  margin: auto 0 0;
  padding-top: var(--space-s);
  border-top: 1px solid var(--c-border);
}

.fd-estate__facts dt {
  color: var(--c-text-muted);
  font-size: 0.8125rem;
}

.fd-estate__facts dd {
  margin: 0;
  font-weight: 700;
}

.fd-estate__more {
  color: var(--c-accent-text);
  font-weight: 600;
}