/*
Theme Name:   astra Child       
Description:  atras Child Theme
Author:           Sabo
Template:         astra
Version:          1.0.0 
*/


body {
    font-family: 'Overlock', fantasy;
}



/* Stellt sicher, dass die Icons im Menü richtig angezeigt werden */
.menu-item i {
    margin-right: 8px; /* Abstand zwischen Icon und Text */
    font-size: 16px; /* Größe der Icons */
    vertical-align: middle; /* Richtige Ausrichtung des Icons */
}
/* ######################################### */

/* Eingabefelder abrunden */
.forminator-input,
.forminator-textarea,
.forminator-select {
    border-radius: 8px !important; /* Wichtig, um vorhandene Stile zu überschreiben */
    padding: 10px;
    border: 2px solid #ccc; /* Optional: Border hinzufügen */
}

/* Eingabefelder und Textareas abrunden */
.forminator-input,
.forminator-textarea,
.forminator-select {
    border-radius: 10px !important;
    padding: 10px;
    border: 2px solid #ccc;
}

/* Absende-Button abrunden */
.forminator-submit {
    border-radius: 10px !important; /* Wichtig, um vorhandene Stile zu überschreiben */
    padding: 12px 20px;
  
    border: 2px solid #0073e6; /* Sicherstellen, dass der Button auch einen Rahmen hat */
    cursor: pointer;
}




/* ######################################### */

.bild-formular-container {
    display: flex;
    gap: 20px;
    max-width: 900px;
    margin: auto;
}

.bild-container {
    flex: 1;
}

.bild-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

.formular-container {
    flex: 1;
}


.bild-formular-container {
    display: flex;
    flex-wrap: wrap; /* Falls der Bildschirm zu klein ist, geht es untereinander */
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    max-width: 1000px; /* Begrenzung der Breite */
    margin: auto;
}

.bild-container {
    flex: 1; /* Gleichmäßige Verteilung */
    min-width: 45%; /* Mindestbreite */
}

.bild-container img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 10px; /* Abrundung der Ecken */
    border: 12px solid #4A4A4A; /* Schwarzer Rahmen */
}


.formular-container {
    flex: 1; /* Gleichmäßige Verteilung */
    min-width: 45%; /* Mindestbreite */
}

@media (max-width: 768px) {
    .bild-container,
    .formular-container {
        min-width: 100%;
        flex: 1 1 100%;
    }
}


/* ######################################## */
/* ######################################## */
/* ######################################## */

/* Stil für die Navigationsbuttons */
.navigation-buttons .button {
    background-color: #DE8245C7; /* Grüner Hintergrund */
    color: #35439C; /* Weißer Text */
    padding: 10px 20px; /* Innenabstand */
    text-decoration: none!important; /* Entfernt den Unterstrich */
    border-radius: 10px; /* Abgerundete Ecken */
    font-size: 16px; /* Schriftgröße */
    font-weight: bold; /* Fettschrift */
    transition: background-color 0.3s, transform 0.2s; /* Smooth Transition für Farbänderung und Animation */
  	text-decoration: none;
}

/* Hover-Effekt */
.navigation-buttons .button:hover {
    background-color: #DE8245C7; /* Dunklerer Grünton beim Hover */
    transform: scale(1.05); /* Vergrößert den Button leicht */
	color: #F2EFE7; /* Weißer Text */
  	text-decoration: none;
}

.navigation-buttons .button:last-of-type:hover {
  background-color: #DE8245C7; /* Dunkleres Blau beim Hover */
  text-decoration: none;
  
}

/* Blendet das Feld im Bildanfrage Formular aus, da dort der Bildername hinterlegt wird*/
#name-2 {
    display: none;
}

.ast-header-menu-toggle {
  display: block !important;
}