.elementor-kit-11817{--e-global-color-primary:#FECD07;--e-global-color-secondary:#556B2F;--e-global-color-text:#222222;--e-global-color-accent:#556B2F;--e-global-typography-primary-font-family:"Verdana";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-font-style:normal;--e-global-typography-secondary-font-family:"Arial";--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-font-style:normal;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;color:var( --e-global-color-text );}.elementor-kit-11817 e-page-transition{background-color:#FFBC7D;}.elementor-kit-11817 a{color:var( --e-global-color-primary );}.elementor-kit-11817 a:hover{color:var( --e-global-color-secondary );}.elementor-kit-11817 h1{color:var( --e-global-color-text );}.elementor-kit-11817 h2{color:var( --e-global-color-text );}.elementor-kit-11817 h3{color:var( --e-global-color-text );}.elementor-kit-11817 h4{color:var( --e-global-color-text );}.elementor-kit-11817 h5{color:var( --e-global-color-text );}.elementor-kit-11817 h6{color:var( --e-global-color-text );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Stellt sicher, dass die Spalten in der mobilen Ansicht die Reihenfolge tauschen */
@media (max-width: 767px) {

    /* Wählt den Abschnitt aus, den wir per Klasse markiert haben */
    .reverse-on-mobile > .elementor-container {
        /* WICHTIG: Erlaubt Flexbox, die Reihenfolge zu manipulieren */
        display: flex;
        flex-direction: column; /* Stellt sicher, dass sie untereinander stehen */
    }

    /* 🔥 Kehrt die Reihenfolge der Kindelemente (der Spalten) um */
    .reverse-on-mobile > .elementor-container > .elementor-column {
        /* Nutze die 'order'-Eigenschaft, um die zweite Spalte nach oben zu setzen */
        /* Die 1. Spalte (Text) bekommt order: 2
           Die 2. Spalte (Bild) bekommt order: 1 */
        
        /* Da wir nicht wissen, welche Spalte das Bild ist, ist 'column-reverse' einfacher */
        order: initial; /* Setzt die Standard-Reihenfolge zurück */
    }
    
    /* Bessere Lösung: Den gesamten Spalten-Stapel umkehren */
    .reverse-on-mobile > .elementor-container {
        /* Kehrt die Stapelung um: Spalte 2 kommt vor Spalte 1 */
        flex-direction: column-reverse !important;
    }
}
/* Ändert die Hintergrundfarbe des Senden-Buttons */
[wpcf7-submit] {
    background-color: #000000 !important; /* HIER DIE HINTERGRUNDFARBE (Schwarz) */
    color: #FFC000 !important; /* HIER DIE TEXTFARBE (Gelb) */
    border: none !important; /* Entfernt Ränder */
    padding: 15px 30px !important; /* Abstand/Größe anpassen */
    transition: all 0.3s ease; /* Macht den Hover-Effekt geschmeidiger */
}

/* Ändert die Farbe beim Mouse-Over (Hover) */
[wpcf7-submit]:hover {
    background-color: #FFC000 !important; /* HIER DIE HINTERGRUNDFARBE beim Hover (Gelb) */
    color: #000000 !important; /* HIER DIE TEXTFARBE beim Hover (Schwarz) */
}/* End custom CSS */