@charset "utf-8";
/* CSS Document */



/* 1. Der Normalzustand: Hier definieren wir die weiche Blende (Fade) */
html body a.link,
html body footer a.link,
#footer a.link,
.link {
    transition: color 0.3s ease-in-out !important; 
}

/* 2. Dein Hover-Zustand: Hier ändert sich nur noch die Farbe */
html body a.link:hover,
html body footer a.link:hover,
#footer a.link:hover,
.link:hover {
    color: #68a2b9 !important; 
}

input.submit-maklerie { 
    background-color: #000000 !important; 
    border-radius: 0px !important; 
    color: #ffffff !important;
    border: none !important;
    
    /* Der unsichtbare blaue Schatten auf der linken Seite (0 Pixel breit) */
    box-shadow: inset 0 0 0 0 #68a2b9 !important;
    
    /* Wir animieren nur den Schatten, das läuft in jedem Browser absolut flüssig */
    transition: box-shadow 0.4s ease-out !important;
}

input.submit-maklerie:hover { 
    /* Der Schatten wächst von links auf 1000px an und überflutet den Button */
    box-shadow: inset 1000px 0 0 0 #68a2b9 !important;
    
    /* Zur Sicherheit, damit das Theme nicht dazwischenfunkt */
    background-color: #000000 !important;
	
	transition: box-shadow 1.0s ease-out !important;
}

/* Padding für das Kontaktformular auf Smartphones (bis 767px Breite) */
@media only screen and (max-width: 767px) {
    #contact-section .wpcf7 {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
}


/* Wir übertragen die typischen Eigenschaften der H6 auf die H1 */
h1 {
    font-family: "Roboto" !important; /* Nimmt die Schriftart deines Themes */
    font-size: 14px !important;              /* Typische H6-Größe (Wert eventuell anpassen) */
    font-weight: 500 !important;             /* Schriftdicke */
    text-transform: uppercase !important;               /* Macht den Text zu GROSSBUCHSTABEN */
    letter-spacing:3px !important;                     /* Abstand zwischen den Buchstaben */
    line-height: 1.3em;
	color: #68a2b9 !important;

}



/* Cookie Banner Styles */
#cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: #f4f1ec; /* Passt zu eurer Web-Farbe */
    border: 1px solid #68a2b9;
    padding: 20px;
    z-index: 99999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: none;
    font-family: 'Open Sans', sans-serif;
}
.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.cookie-text {
    font-size: 14px;
    color: #333;
    line-height: 1.5em;
    flex: 1;
}
.cookie-text a {
    color: #68a2b9;
    text-decoration: underline;
}
.cookie-buttons {
    display: flex;
    gap: 10px;
}
.cookie-btn {
    padding: 10px 20px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.3s;
}
.btn-accept {
    background: #68a2b9;
    color: #fff;
}
.btn-accept:hover { background: #578fa5; }
.btn-deny {
    background: #e0dbd5;
    color: #333;
}
.btn-deny:hover { background: #d0c9c1; }

@media (max-width: 768px) {
    .cookie-content { flex-direction: column; text-align: center; }
}


/* Overlayer */ 
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

    .fade-in { animation: fadeIn 0.5s forwards; }
    .fade-out { animation: fadeOut 0.5s forwards; }