.elementor-45 .elementor-element.elementor-element-074fa05{--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;}.elementor-45 .elementor-element.elementor-element-386e066{--display:flex;}.elementor-45 .elementor-element.elementor-element-ee27999{--display:flex;}.elementor-45 .elementor-element.elementor-element-2ad4ec1 iframe{height:300px;}.elementor-45 .elementor-element.elementor-element-8998cae{--display:flex;}.elementor-45 .elementor-element.elementor-element-5d8f5fa{--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;}.elementor-45 .elementor-element.elementor-element-b8c1300{--display:flex;}.elementor-45 .elementor-element.elementor-element-1d83ad0.elementor-element{--align-self:center;}.elementor-45 .elementor-element.elementor-element-5dfadc2{--display:flex;}.elementor-45 .elementor-element.elementor-element-5dfadc2.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-45 .elementor-element.elementor-element-0c0fd1e .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-45 .elementor-element.elementor-element-0c0fd1e .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-45 .elementor-element.elementor-element-0c0fd1e .elementor-field-group.recaptcha_v3-bottomleft, .elementor-45 .elementor-element.elementor-element-0c0fd1e .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-45 .elementor-element.elementor-element-0c0fd1e .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-45 .elementor-element.elementor-element-0c0fd1e .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-45 .elementor-element.elementor-element-0c0fd1e .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-45 .elementor-element.elementor-element-0c0fd1e .elementor-field-type-html{padding-bottom:0px;}.elementor-45 .elementor-element.elementor-element-0c0fd1e .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-45 .elementor-element.elementor-element-0c0fd1e .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-45 .elementor-element.elementor-element-0c0fd1e .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-45 .elementor-element.elementor-element-0c0fd1e .elementor-button[type="submit"]{color:#ffffff;}.elementor-45 .elementor-element.elementor-element-0c0fd1e .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-45 .elementor-element.elementor-element-0c0fd1e .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-45 .elementor-element.elementor-element-0c0fd1e .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-45 .elementor-element.elementor-element-0c0fd1e .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-45 .elementor-element.elementor-element-0c0fd1e .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-45 .elementor-element.elementor-element-0c0fd1e .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-45 .elementor-element.elementor-element-0c0fd1e{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}@media(min-width:768px){.elementor-45 .elementor-element.elementor-element-5dfadc2{--width:98.278%;}}/* Start custom CSS for html, class: .elementor-element-050810c *//* ========================================= */
/* HERO ELEMENT STYLING (Bild Rechts / Text Links) */
/* ========================================= */
.hero-container {
    max-width: 1280px; 
    margin: 0 auto 40px auto; 
    position: relative;
    overflow: hidden;
    height: 600px;
    border-radius: 6px; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: row-reverse; 
    /* Basis-Hintergrund für den Textbereich */
    background-color: #f0f0f0; 
}

/* RECHTER BILD-BEREICH */
.hero-image-wrapper {
    position: relative;
    flex-basis: 45%; 
    overflow: hidden;
}

.hero-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply; 
    background-color: rgba(0, 0, 0, 0.2); 
}

/* DIAGONALE TRENNLINIE */
.hero-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50px; 
    right: auto; 
    width: 100px;
    height: 100%;
    background-color: #f0f0f0; 
    transform: skewX(5deg); 
    z-index: 2;
}

/* LINKER TEXT-BEREICH */
.hero-content {
    flex-basis: 55%; 
    /* IMPORTANT: Hintergrundbild-Styles hier belassen, aber ohne Opacity */
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center center; 
    background-color: #f0f0f0; /* Stellt den Standard-Hintergrund sicher */
    
    /* Layout und Padding für den Inhalt */
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: flex-start; 
    text-align: left;
    padding: 0 60px;
    z-index: 1;
    position: relative; /* Für das Pseudo-Element */
}

/* **NEUER TRICK: Overlay für das Hintergrundbild** Wir nutzen ein Pseudoelement (::before), um eine transparente Ebene ÜBER das Hintergrundbild,
aber UNTER den Text zu legen. Das Hintergrundbild muss dafür im HTML bleiben! */
.hero-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* WICHTIG: Transparenz auf dem Overlay anwenden */
    background: rgba(240, 240, 240, 0.9); /* #f0f0f0 mit 90% Deckkraft */
    z-index: 0; /* Stellt sicher, dass es HINTER dem Text liegt */
}

/* ALLE TEXTELEMENTE UND BUTTONS ÜBER DAS OVERLAY ZWINGEN */
.hero-content > * {
    position: relative; /* Wichtig, um z-index zu aktivieren */
    z-index: 3; /* Höher als das Overlay (z-index: 0) */
}

/* TEXT STYLES */
.hero-title {
    font-size: 3.2em; 
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #002339; /* Bleibt volle Farbe */
    text-shadow: none;
}
/* ... alle anderen Text- und Button-Styles bleiben wie zuvor und behalten volle Deckkraft ... */
.hero-subtitle {
    font-size: 1.3em;
    font-weight: 400;
    margin-bottom: 40px;
    max-width: 600px;
    color: #555;
}

.hero-button {
    text-decoration: none;
    background-color: #00b0ff; 
    color: #fff; 
    font-size: 1.1em;
    font-weight: bold;
    padding: 15px 40px;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.hero-button:hover {
    background-color: #2ec4b6; 
    transform: translateY(-2px);
}

/* RESPONSIVE ANPASSUNGEN */
@media (max-width: 1000px) {
    .hero-container {
        flex-direction: column; 
        height: auto;
        border-radius: 0;
        box-shadow: none;
    }
    .hero-image-wrapper {
        flex-basis: 100%;
        height: 350px;
        order: -1; 
    }
    .hero-image-wrapper::after {
        content: none; 
    }
    .hero-content {
        flex-basis: 100%;
        padding: 40px 30px;
        align-items: center;
        text-align: center;
    }
    /* Overlay für mobile Ansicht anpassen */
    .hero-content::before {
        background: rgba(240, 240, 240, 0.95); /* ggf. etwas weniger transparent */
    }
    .hero-title {
        font-size: 2.5em;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a352230 *//* GRUNDSTRUKTUR UND CONTAINER */
.block-container {
    display: flex;
    flex-wrap: wrap; 
    gap: 25px; /* Etwas größerer Abstand zwischen den Blöcken */
    max-width: 1280px; /* Container etwas breiter */
    margin: 40px auto; 
    padding: 0 20px; 
    text-align: left; 
}

/* STYLING FÜR DEN EINZELNEN BLOCK (Der gesamte Block ist ein Link) */
.content-block {
    flex: 1 1 280px; /* Basis: 4 Spalten, Blöcke etwas breiter */
    text-decoration: none;
    color: #fff; 
    background-color: #002339; 
    overflow: hidden;
    /* Übergänge für alle Effekte */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 6px; /* Etwas stärker abgerundete Ecken */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Stärkerer Schatten */
    min-height: 480px; /* Block insgesamt länger gezogen */
    display: flex;
    flex-direction: column;
}

/* HOVER EFFEKT: Etwas dunklerer Hintergrund und Anhebung */
.content-block:hover {
    background-color: #003855; /* Noch dunkleres Blau */
    transform: translateY(-12px); /* Stärkere Anhebung */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); /* Noch stärkerer Schatten */
}

/* BILD BEREICH */
.block-image {
    height: 200px; /* Bildhöhe etwas erhöht */
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply; 
    background-color: rgba(0, 0, 0, 0.4); /* Etwas stärkerer Overlay */
    transition: transform 0.4s ease; /* Übergang für den Zoom-Effekt */
}

/* BILD ZOOM EFFEKT BEIM HOVER */
.content-block:hover .block-image {
    transform: scale(1.08); /* Bild wird um 8% größer */
}

/* TEXT BEREICH */
.block-text {
    padding: 25px 30px 60px 30px; /* Mehr Padding, besonders unten für den Pfeil */
    position: relative;
    flex-grow: 1; /* Lässt den Textbereich den restlichen Platz einnehmen */
    /* Min-Höhe um Textbereich proportional größer als Bild zu machen */
    min-height: calc(100% - 200px); /* Restliche Höhe abzüglich Bildhöhe */
}

/* TEXT ELEMENTE */
.subtitle {
    font-size: 0.9em;
    font-weight: 500; /* Etwas dickerer Untertitel */
    color: #a0a0a0;
    margin: 0 0 8px 0; /* Mehr Abstand zum Titel */
}

.title {
    font-size: 1.5em; /* Titel etwas größer */
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 18px 0; /* Mehr Abstand zur Beschreibung */
    color: #fff;
}

.description {
    font-size: 1.05em; /* Beschreibung leicht größer */
    line-height: 1.7; /* Zeilenabstand etwas größer */
    margin: 0;
    color: #d0d0d0; /* Hellerer Text für die Beschreibung */
}

/* PFEIL-SYMBOL */
.arrow {
    position: absolute;
    bottom: 25px; 
    left: 30px; 
    font-size: 2.5em; /* Pfeil dicker/größer */
    font-weight: bold; /* Macht den Pfeil wirklich dicker, falls das Zeichen es zulässt */
    line-height: 1;
    color: #00b0ff; /* Etwas leuchtenderes Hellblau */
    text-shadow: 0 0 8px rgba(0, 176, 255, 0.6); /* Leichter Glüheffekt */
    transition: transform 0.3s ease, color 0.3s ease; /* Übergang für Farbe und Bewegung */
}

/* HOVER EFFEKT FÜR DEN PFEIL */
.content-block:hover .arrow {
    transform: translateX(15px); /* Pfeil bewegt sich weiter nach rechts */
    color: #2ec4b6; /* Farbe ändert sich beim Hover */
}


/* RESPONSIVE ANPASSUNGEN */
@media (max-width: 1200px) {
    .content-block {
        flex: 1 1 calc(33.333% - 25px); /* 3 Spalten Layout */
        min-width: 280px;
    }
}

@media (max-width: 880px) {
    .content-block {
        flex: 1 1 calc(50% - 12.5px); /* 2 Spalten Layout */
    }
}

@media (max-width: 600px) {
    .block-container {
        gap: 15px;
        padding: 0 10px;
    }
    .content-block {
        flex: 1 1 100%;
        min-height: auto; /* Auf Mobilgeräten Höhe flexibel lassen */
    }
    .block-text {
        padding: 20px 20px 50px 20px;
    }
    .arrow {
        left: 20px;
        bottom: 20px;
    }
}/* End custom CSS */