/*
 Theme Name:     Divi Child - Image Digital
 Theme URI:      https://image-digital.de/
 Description:    Individuelles Child Theme für Divi, erstellt von Image Digital.
 Author:         Image Digital
 Author URI:     https://image-digital.de/
 Template:       Divi
 Version:        1.0.0
*/
/* =========================================
   1. CSS VARIABLEN (FARBEN & SCHRIFTEN)
   ========================================= */
:root {
    --color-primary-blue: #00a2e0; /* Linke Welle - Cyan */
    --color-primary-teal: #00a880; /* Rechte Welle - Petrol/Seegrün */
    --color-accent-sand:  #d4a373; /* Mittlere Welle - Sand/Holz */
    --color-text-dark:    #2b2b2b; /* Dunkles Grau für Überschriften */
    --color-text-light:   #666666; /* Helles Grau für Fließtexte */
    --color-bg-light:     #f4f7f8; /* Hellgrauer Sektions-Hintergrund */
    --color-white:        #ffffff;

    --font-main: 'Poppins', Helvetica, Arial, sans-serif;
}

/* =========================================
   2. ALLGEMEINE TYPOGRAFIE & TEXTE
   ========================================= */
body, 
.et_pb_text_inner, 
.et_pb_text p {
    font-family: var(--font-main);
    color: var(--color-text-light);
    font-size: 16px;
    line-height: 1.7em;
    font-weight: 400;
}

b, strong {
    color: var(--color-text-dark);
    font-weight: 600;
}

/* =========================================
   3. ÜBERSCHRIFTEN (H1 - H6)
   ========================================= */
h1, h2, h3, h4, h5, h6, 
.et_pb_module_header,
.et_pb_slide_title {
    font-family: var(--font-main) !important;
    color: var(--color-text-dark);
    font-weight: 600;
    line-height: 1.3em;
}

h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; font-weight: 500; color: var(--color-primary-teal); }

@media only screen and (max-width: 767px) {
    h1 { font-size: 30px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
}

/* =========================================
   4. LINKS IN INHALTSBEREICHEN
   ========================================= */
/* Eingegrenzt auf Inhaltsmodule, um Konflikte mit dem Hauptmenü zu vermeiden */
.et_pb_text a, 
.et_pb_blurb_content a, 
.et_pb_post_content a {
    color: var(--color-primary-blue);
    text-decoration: underline;
    transition: color 0.3s ease-in-out;
}

.et_pb_text a:hover, 
.et_pb_blurb_content a:hover, 
.et_pb_post_content a:hover {
    color: var(--color-primary-teal);
}

/* =========================================
   5. DIVI MENÜ & HEADER (LOGO-FARBEN)
   ========================================= */
/* Aktives Menüelement & Hover im Hauptmenü */
#top-menu li.current-menu-item > a,
#top-menu li a:hover {
    color: var(--color-primary-teal) !important;
}

/* Mobile Hamburger-Icon Farbe */
.mobile_menu_bar:before {
    color: var(--color-primary-teal) !important;
}

/* =========================================
   6. DIVI BUTTONS (OPTIMIERT FÜR ICON-HOVER)
   ========================================= */
.et_pb_button {
    background-color: var(--color-primary-teal) !important;
    color: var(--color-white) !important;
    border: 2px solid var(--color-primary-teal) !important;
    border-radius: 6px !important;
    font-family: var(--font-main) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    transition: all 0.3s ease-in-out !important;
}

.et_pb_button:hover {
    background-color: var(--color-primary-blue) !important;
    border-color: var(--color-primary-blue) !important;
    color: var(--color-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 162, 224, 0.25) !important;
}

/* Sekundärer Button (Klasse: btn-secondary) */
.btn-secondary .et_pb_button {
    background-color: transparent !important;
    color: var(--color-primary-teal) !important;
    border: 2px solid var(--color-primary-teal) !important;
}

.btn-secondary .et_pb_button:hover {
    background-color: var(--color-primary-teal) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary-teal) !important;
}

/* =========================================
   7. HILFSKLASSEN & MODERNE EFFEKTE
   ========================================= */
.text-blue { color: var(--color-primary-blue) !important; }
.text-teal { color: var(--color-primary-teal) !important; }
.text-sand { color: var(--color-accent-sand) !important; }

.bg-light-grey { background-color: var(--color-bg-light) !important; }
.bg-sand { background-color: var(--color-accent-sand) !important; }

/* Moderner Card-Hover-Effekt für Wohnungs-Module */
.box-shadow-modern {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
}

.box-shadow-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}