.elementor-11031 .elementor-element.elementor-element-83a8dca{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:150px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}:root{--page-title-display:none;}/* Start custom CSS *//*
 * Individuelles CSS für Elementor
 * Design inspiriert von "Josis Malreihen-Spaß"
 *
 * Anleitung: Füge dieses CSS in Elementor unter
 * Website-Einstellungen > Benutzerdefiniertes CSS ein.
*/

/* --- Globale Schriftart --- */
/* Stellt die Standard-Schriftart für den Textkörper ein */
body, .elementor-text-editor {
    font-family: 'Baloo 2', cursive !important;
}

/* --- Globaler Abstand --- */
/* Fügt Abstand zwischen dem Header und dem ersten Abschnitt hinzu */
.elementor-section-wrap {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}


/* --- Überschriften --- */
/* Stil für die Hauptüberschriften (H1, H2, H3 etc.) */
.elementor-widget-heading .elementor-heading-title {
    color: #ff6fae !important;
    text-shadow: 1px 1px 2px #ffd6e8 !important;
    font-family: 'Baloo 2', cursive !important;
}


/* --- Buttons --- */
/* Grundstil für alle Elementor-Buttons */
.elementor-element .elementor-button {
    background-color: #ffb6c1 !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 12px 24px !important;
    font-size: 18px !important;
    font-family: 'Baloo 2', cursive !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
    color: #444 !important; /* Stellt sicher, dass der Text lesbar ist */
}

/* Hover-Effekt für Buttons */
.elementor-element .elementor-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 10px rgba(0,0,0,0.15) !important;
    background-color: #ffadc0 !important;
}


/* --- Abschnitte & Container --- */
/* Verleiht Abschnitten mit einer bestimmten CSS-Klasse einen Karten-Stil */
/* Füge die Klasse 'pink-card' zu einem Abschnitt in den Erweitert-Einstellungen hinzu */
.pink-card {
    background: white;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 2px solid #ffe6f0;
}


/* --- Formular-Felder (z.B. Kontaktformulare) --- */
/* Stil für die Beschriftung (z.B. "Dein Name") */
.elementor-form-fields-wrapper .elementor-field-label {
    color: #444 !important;
    font-family: 'Baloo 2', cursive !important;
    font-size: 16px !important;
    padding-bottom: 5px !important;
}

/* Stil für Eingabefelder */
.elementor-form-fields-wrapper .elementor-field-group .elementor-field {
    font-size: 18px !important;
    padding: 10px 15px !important;
    text-align: left !important;
    border: 2px solid #ffb6c1 !important;
    border-radius: 12px !important;
    outline: none !important;
    transition: 0.2s !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    font-family: 'Baloo 2', cursive !important;
}

/* Stil für den Fokus-Zustand von Eingabefeldern */
.elementor-form-fields-wrapper .elementor-field-group .elementor-field:focus {
    border-color: #ff80a0 !important;
    box-shadow: 0 0 10px rgba(255,128,160,0.3) !important;
}

/* Stil für den Absende-Button in Formularen */
.elementor-form-fields-wrapper .elementor-button {
    background-color: #ffb6c1 !important;
    border-radius: 20px !important;
    width: 100% !important; /* Nimmt die volle Breite im Container ein */
}

.elementor-form-fields-wrapper .elementor-button:hover {
     background-color: #ffadc0 !important;
}


/* --- Responsive Anpassungen --- */
/* Stile für Tablets und Mobilgeräte (bis 768px Breite) */
@media (max-width: 768px) {
    
    .elementor-section-wrap {
        margin-top: 30px !important; /* Weniger Abstand auf Mobilgeräten */
    }

    .elementor-widget-heading .elementor-heading-title {
        font-size: 28px !important; /* Etwas kleinere Überschriften */
    }

    .elementor-element .elementor-button {
        padding: 10px 20px !important;
        font-size: 16px !important;
    }

    .pink-card {
        padding: 20px;
    }

    .elementor-form-fields-wrapper .elementor-field-group .elementor-field {
        font-size: 16px !important;
    }
}/* End custom CSS */