/*
Theme Name:   Villa Luxe Child
Theme URI:    https://ihre-domain.de
Description:  Divi Child Theme – Luxuriöses Villen-Vermietungsdesign (Dunkel & Gold)
Author:       Ihr Name
Author URI:   https://ihre-domain.de
Template:     Divi
Version:      1.0.0
Text Domain:  villa-luxe
*/

/* =====================================================
   IMPORT GOOGLE FONTS
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

/* =====================================================
   CSS CUSTOM PROPERTIES (Design-Tokens)
   ===================================================== */
:root {
  --gold:        #C9A96E;
  --gold-light:  #E8D5AA;
  --gold-dark:   #9A7A45;
  --black:       #0A0A08;
  --dark:        #111110;
  --dark2:       #1A1A17;
  --dark3:       #242420;
  --text:        #E8E4DA;
  --text-muted:  #8A8577;
  --border:      rgba(201,169,110,0.2);
}

/* =====================================================
   GLOBALE BASIS
   ===================================================== */
body, html {
  background-color: var(--black) !important;
  color: var(--text) !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  color: var(--text) !important;
  line-height: 1.1 !important;
}

p, li, span, .et_pb_text p {
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
  color: var(--text-muted) !important;
  line-height: 1.8 !important;
}

a { color: var(--gold) !important; text-decoration: none !important; }
a:hover { color: var(--gold-light) !important; }

/* =====================================================
   DIVI: SECTIONS
   ===================================================== */
.et_pb_section {
  background-color: var(--dark) !important;
  padding: 80px 0 !important;
}

/* Hero-Section: volle Bildschirmhöhe */
.et_pb_section.hero-section {
  min-height: 100vh !important;
  display: flex !important;
  align-items: flex-end !important;
  background-color: var(--black) !important;
  padding: 80px 6% !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Abwechselnde Sections dunkel */
.et_pb_section:nth-child(even) {
  background-color: var(--black) !important;
}

.et_pb_section:nth-child(odd) {
  background-color: var(--dark) !important;
}

/* =====================================================
   DIVI: ROWS & COLUMNS
   ===================================================== */
.et_pb_row {
  max-width: 1280px !important;
}

/* =====================================================
   DIVI: TEXT MODULE
   ===================================================== */
.et_pb_text_inner h1 { font-size: clamp(3rem, 6vw, 5.5rem) !important; }
.et_pb_text_inner h2 { font-size: clamp(2rem, 4vw, 3.5rem) !important; }
.et_pb_text_inner h3 { font-size: 1.8rem !important; }

/* Gold-Eyebrow-Text: Klasse "gold-label" ans Modul vergeben */
.gold-label .et_pb_text_inner p,
.gold-label .et_pb_text_inner {
  font-size: 0.7rem !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  font-weight: 400 !important;
}

.gold-label .et_pb_text_inner::before {
  content: '';
  display: inline-block;
  width: 40px; height: 1px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 1rem;
}

/* Gold-Trennlinie: Klasse "gold-divider" */
.gold-divider .et_pb_text_inner {
  border-bottom: 1px solid var(--gold) !important;
  padding-bottom: 2rem !important;
  margin-bottom: 3rem !important;
  background: linear-gradient(to right, var(--gold), transparent) !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* =====================================================
   DIVI: BUTTONS
   ===================================================== */
.et_pb_button,
a.et_pb_button,
.et_pb_button_module a {
  background: transparent !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 0 !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  padding: 1rem 2.5rem !important;
  transition: all 0.4s !important;
  position: relative !important;
  overflow: hidden !important;
}

.et_pb_button::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--gold) !important;
  transform: translateX(-100%) !important;
  transition: transform 0.4s !important;
  z-index: 0 !important;
}

.et_pb_button:hover::before {
  transform: translateX(0) !important;
}

.et_pb_button:hover,
a.et_pb_button:hover {
  color: var(--black) !important;
  background: var(--gold) !important;
}

/* Gold-Vollflächiger Button (Klasse "btn-gold-solid") */
.btn-gold-solid .et_pb_button {
  background: var(--gold) !important;
  color: var(--black) !important;
}

.btn-gold-solid .et_pb_button:hover {
  background: var(--gold-light) !important;
}

/* =====================================================
   DIVI: BLURB MODULE (Villa-Feature-Icons)
   ===================================================== */
.et_pb_blurb {
  background: var(--dark2) !important;
  border: 1px solid var(--border) !important;
  padding: 2rem !important;
  text-align: center !important;
  transition: border-color 0.4s !important;
}

.et_pb_blurb:hover {
  border-color: rgba(201,169,110,0.5) !important;
}

.et_pb_blurb_title {
  font-family: 'Cormorant Garamond', serif !important;
  color: var(--text) !important;
  font-size: 1.3rem !important;
  font-weight: 300 !important;
}

.et_pb_blurb_description {
  color: var(--text-muted) !important;
  font-size: 0.85rem !important;
}

.et_pb_main_blurb_image .et-pb-icon {
  color: var(--gold) !important;
}

/* =====================================================
   DIVI: PRICING MODULE (Villa-Karte)
   ===================================================== */
.et_pb_pricing_table {
  background: var(--dark2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  transition: border-color 0.4s !important;
  overflow: hidden !important;
}

.et_pb_pricing_table:hover {
  border-color: rgba(201,169,110,0.5) !important;
}

.et_pb_pricing_heading {
  background: var(--dark3) !important;
  padding: 2.5rem !important;
}

.et_pb_pricing_title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 2rem !important;
  font-weight: 300 !important;
  color: var(--text) !important;
}

.et_pb_pricing_subtitle {
  color: var(--gold) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

.et_pb_et_price {
  font-family: 'Cormorant Garamond', serif !important;
  color: var(--gold) !important;
  font-weight: 300 !important;
}

.et_pb_sum { font-size: 3rem !important; }
.et_pb_frequency { font-size: 0.85rem !important; color: var(--text-muted) !important; }

.et_pb_pricing_content_top,
.et_pb_pricing_content {
  background: var(--dark2) !important;
}

.et_pb_pricing_content li {
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0.6rem 0 !important;
  font-size: 0.85rem !important;
}

.et_pb_pricing_content li::before {
  color: var(--gold) !important;
  content: '◆' !important;
  font-size: 0.5rem !important;
  margin-right: 0.75rem !important;
}

/* =====================================================
   DIVI: CONTACT FORM
   ===================================================== */
.et_pb_contact_form_container {
  background: transparent !important;
}

.et_pb_contact_field input,
.et_pb_contact_field textarea,
.et_pb_contact_field select {
  background: var(--dark2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  color: var(--text) !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.9rem !important;
  padding: 0.85rem 1rem !important;
  transition: border-color 0.3s !important;
}

.et_pb_contact_field input:focus,
.et_pb_contact_field textarea:focus {
  border-color: var(--gold) !important;
  outline: none !important;
}

.et_pb_contact_field label {
  font-size: 0.65rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  font-family: 'Jost', sans-serif !important;
}

.et_contact_bottom_container .et_pb_contact_submit {
  background: transparent !important;
  color: var(--gold) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 0 !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 1rem 2.5rem !important;
  cursor: pointer !important;
  transition: all 0.4s !important;
}

.et_contact_bottom_container .et_pb_contact_submit:hover {
  background: var(--gold) !important;
  color: var(--black) !important;
}

/* =====================================================
   DIVI: NUMBER COUNTER (Statistiken)
   ===================================================== */
.et_pb_counter_amount {
  background: var(--gold) !important;
  border-radius: 0 !important;
}

.et_pb_counter_title {
  color: var(--text-muted) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

/* =====================================================
   DIVI: IMAGE MODULE
   ===================================================== */
.et_pb_image img {
  filter: brightness(0.8) saturate(0.85) !important;
  transition: all 0.6s !important;
}

.et_pb_image:hover img {
  filter: brightness(0.95) saturate(1) !important;
  transform: scale(1.03) !important;
}

/* =====================================================
   DIVI: SLIDER / FULLWIDTH SLIDER
   ===================================================== */
.et_pb_slider {
  background: var(--black) !important;
}

.et_pb_slide_description .et_pb_slide_title {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  color: var(--text) !important;
  font-size: clamp(3rem, 6vw, 5.5rem) !important;
}

.et_pb_slide_content {
  color: var(--text-muted) !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
}

.et-pb-arrow-prev, .et-pb-arrow-next {
  color: var(--gold) !important;
  border: 1px solid var(--gold) !important;
  border-radius: 0 !important;
}

/* =====================================================
   DIVI: TESTIMONIAL MODULE
   ===================================================== */
.et_pb_testimonial {
  background: var(--dark2) !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: 0 !important;
}

.et_pb_testimonial_description {
  color: var(--text) !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: 1.2rem !important;
}

.et_pb_testimonial_author {
  color: var(--gold) !important;
}

/* =====================================================
   DIVI: HEADER / NAVIGATION
   ===================================================== */
#main-header, #top-header {
  background-color: rgba(10,10,8,0.95) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid var(--border) !important;
}

#main-header.et-fixed-header {
  background: rgba(10,10,8,0.97) !important;
}

.logo_container img { max-height: 50px !important; }

#et-top-navigation nav > ul > li > a {
  font-family: 'Jost', sans-serif !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  font-weight: 400 !important;
}

#et-top-navigation nav > ul > li > a:hover {
  color: var(--gold) !important;
}

/* CTA-Button in Navigation */
#et-top-navigation .menu-item-has-children:last-child > a,
.nav-cta > a {
  background: transparent !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold) !important;
  padding: 0.4rem 1.2rem !important;
}

/* =====================================================
   DIVI: FOOTER
   ===================================================== */
#footer-widgets {
  background: var(--dark) !important;
  border-top: 1px solid var(--border) !important;
}

#footer-bottom {
  background: var(--black) !important;
  border-top: 1px solid var(--border) !important;
}

#footer-info, #footer-info a {
  color: var(--text-muted) !important;
  font-size: 0.75rem !important;
  font-family: 'Jost', sans-serif !important;
}

.widget_title {
  font-family: 'Cormorant Garamond', serif !important;
  color: var(--text) !important;
  font-size: 1.2rem !important;
  font-weight: 300 !important;
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 0.75rem !important;
}

/* =====================================================
   UTILITY KLASSEN (in Divi-Module als CSS-Klassen eintragen)
   ===================================================== */

/* Gold-Akzent-Text */
.text-gold, .text-gold * { color: var(--gold) !important; }

/* Großes Hintergrundnummer-Dekor (z.B. "01", "02") */
.property-number-bg::before {
  content: attr(data-number);
  font-family: 'Cormorant Garamond', serif;
  font-size: 8rem;
  color: var(--dark3);
  position: absolute;
  top: -2rem; left: -1rem;
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}

/* Goldene horizontale Linie */
.gold-line {
  border: none !important;
  border-top: 1px solid var(--gold) !important;
  opacity: 0.4 !important;
  margin: 2rem 0 !important;
}

/* Dunkle Karte */
.dark-card {
  background: var(--dark2) !important;
  border: 1px solid var(--border) !important;
  padding: 2.5rem !important;
  transition: border-color 0.4s !important;
}

.dark-card:hover {
  border-color: rgba(201,169,110,0.5) !important;
}

/* Gold-Badge (für "Verfügbar" etc.) */
.gold-badge .et_pb_text_inner p {
  display: inline-block !important;
  background: rgba(10,10,8,0.9) !important;
  border: 1px solid var(--border) !important;
  color: var(--gold) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 0.4rem 1rem !important;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 980px) {
  .et_pb_text_inner h1 { font-size: 2.8rem !important; }
  .et_pb_text_inner h2 { font-size: 2rem !important; }

  .et_pb_section { padding: 60px 4% !important; }
}

@media (max-width: 767px) {
  .et_pb_text_inner h1 { font-size: 2.2rem !important; }
  nav { padding: 1rem !important; }
}