/* Theme Name:      Atlas (Optimiert für arte logo)
 Author:          Mark Hendriksen / Anpassungen arte logo
 Template:        Divi
 Version:         1.2
 Description:     Sauberes Divi Child Theme mit lokaler Font-Einbindung & butterweichem Scroll-Effekt.
*/ 

/* ==========================================================================
   1. SCHRIFTEN & TYPOGRAFIE
   ========================================================================= */

@font-face {
    font-family: 'Work-Sans-Local';
    src: url('https://arte-logo.de/wp-content/themes/atlas-divi-child-theme/fonts/work-sans-v24-latin-700.woff2') format('woff2');
    font-weight: 700; 
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans-Local';
    src: url('https://arte-logo.de/wp-content/themes/atlas-divi-child-theme/fonts/open-sans-v44-latin-600.woff2') format('woff2');
    font-weight: 600; 
    font-display: swap;
}

body, p, li, a, .et_pb_module, .et_pb_button, .et_mobile_menu li a, 
.dipi_testimonial, .dipi_filterable_grid, .dipi_image_showcase,
.dipi_filterable_grid_filter_item a {
    font-family: 'Open Sans-Local', sans-serif !important;
    font-weight: 600 !important;
}

h1, h2, h3, h4, .et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4, 
.et_pb_module_header {
    font-family: 'Work-Sans-Local', sans-serif !important;
    font-weight: 700 !important;
}
h1, h2, h3, h4, .et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4, 
.et_pb_module_header {
    font-family: 'Work-Sans-Local', sans-serif !important;
    font-weight: 700 !important;
}

/* Spezielle Sektionen, die Work Sans im Text nutzen (Promo-Module) */
.section-with-white-bg .text-white-projects .et_pb_promo_description p,
.text-black-projects .et_pb_promo_description p {
    font-family: 'Work-Sans-Local', sans-serif !important;
    font-weight: 700 !important;
}

.et_pb_module_header h5{
	font-family: 'Open Sans-Local', sans-serif !important;
}

span {
    font-family: 'Open Sans-Local', sans-serif !important;
    font-weight: 600 !important;
}

strong, b{
	    font-family: 'Work-Sans-Local', sans-serif !important;
    font-weight: 700;
}

/* ==========================================================================
   2. DER WEICHE SCROLL-FARBWECHSEL (0.7s)
   ========================================================================= */
.section-with-white-bg, 
.section-with-white-bg h2, 
.section-with-white-bg p, 
.section-with-white-bg span {
    transition: background-color 0.7s ease-in-out, color 0.7s ease-in-out !important;
}

.et_pb_section.section-with-white-bg.section-with-color-bg {
    background-color: #0a141f !important;
}

.section-with-white-bg.section-with-color-bg h2, 
.section-with-white-bg.section-with-color-bg p {
    color: #ffffff !important;
}

/* ==========================================================================
   3. STRUKTUR & HEADER
   ========================================================================= */
#page-container { overflow-x: hidden; }

@media screen and (min-width: 981px) {
    .header-v1-column { display: flex; align-items: center; }
    .header-v1-menu { flex: 2 1 auto; }
    .header-v1-menu.et_pb_menu .et-menu>li { padding-left: 17px; padding-right: 17px; }
    .top-bar-menu-row, .appointment-cta-row { display: flex; align-items: center; }
}

@media screen and (max-width: 980px) {
    .header-button-1, .header-button-2 { width: 100%; text-align: center; }
    .project-section-home .et_pb_row { display: flex; flex-direction: column-reverse; }
}

/* ==========================================================================
   4. NAVIGATION & MOBILE MENÜ
   ========================================================================= */
.nav li li a { border-bottom: 1px solid rgb(255 255 255 / 19%); font-size: 16px !important; }
.et-menu > .menu-item-has-children > .sub-menu:before { border-bottom: 12px #00eab7 solid; } 

.hamburger-icon-v1::after, 
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
    background: #00eab7 !important;
    color: #0a141f !important;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
    top: 10px; position: relative; font-family: "ETModules"; content: '\33'; border-radius: 50%; padding: 3px;
}
ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after { content: '\32'; }
ul.et_mobile_menu .menu-item-has-children .sub-menu { display: none !important; visibility: hidden !important; }
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible { display: block !important; visibility: visible !important; }

/* ==========================================================================
   5. IMAGE SHOWCASE FIX (MASSIVE DÄMPFUNG)
   ========================================================================= */

/* Dies erzwingt eine extrem langsame Bildbewegung im Mockup */
.dipi_image_showcase_child_image, 
.dipi_image_showcase_child img,
.et_pb_column_2_5 .dipi_image_showcase_child_image {
    transition: transform 2.5s cubic-bezier(0.1, 0.5, 0.2, 1) !important;
    transition-duration: 2.5s !important; /* Verlängert die Ausführungszeit der Bewegung */
    will-change: transform;
}

/* Falls Divi Pixel interne Animationen nutzt, machen wir sie hier weicher */
.dipi_image_showcase_child {
    transition: all 1.5s ease-out !important;
	}

	/* ==========================================================================
   5. Login-Page
   ========================================================================= */

/* Das gesamte Divi Passwort-Formular */
.et_password_protected_form {
    background: #ffffff !important;
    padding: 50px !important;
    border-radius: 10px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
    max-width: 500px !important;
    margin: 60px auto !important;
    text-align: center !important;
}

/* Der Hinweistext */
.et_password_protected_form p {
    font-size: 18px !important;
    color: #333 !important;
    margin-bottom: 25px !important;
}

/* Das Eingabefeld */
.et_password_protected_form input[type="password"] {
    width: 100% !important;
    padding: 15px !important;
    border: 3px solid #0a141f !important;
    border-radius: 5px !important;
    margin-bottom: 15px !important;
    background: #fdfdfd !important;
}

/* Der Senden-Button */
.et_password_protected_form button[type="submit"], 
.et_password_protected_form input[type="submit"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    width: 100% !important;
    padding: 15px !important;
    border: none !important;
    border-radius: 100px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

/* Hover-Effekt für den Button */
.et_password_protected_form button[type="submit"]:hover, 
.et_password_protected_form input[type="submit"]:hover {
    background-color: #00cc99 !important; /* Deine Wunschfarbe */
    color: #ffffff !important;
}

/* ==========================================================================
   6. AKZENTE & SPEZIAL-STYLES
   ========================================================================= */
.dot { color: #f7a50f; } 
.blurb-service li::marker { font-family: FontAwesome !important; content: "\f105"; color: #00eab7; }

.service-box { display: flex; flex-direction: column; justify-content: flex-end; height: 600px; }
@media screen and (min-width: 981px) {
    .service-box .service-animated-text {
        max-height: 0em; opacity: 0; transition: all .25s ease;
    }
    .service-box:hover .service-animated-text { max-height: 8em; opacity: 1; }
}