.elementor-kit-8{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Open Sans";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Open Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Open Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Open Sans";--e-global-typography-accent-font-weight:500;color:#000000;font-family:"Open Sans", Sans-serif;}.elementor-kit-8 p{margin-bottom:18px;}.elementor-kit-8 a{color:#A8CCDD;font-family:"Open Sans", Sans-serif;}.elementor-kit-8 a:hover{color:#A8CCDD;}.elementor-kit-8 h1{font-family:"Open Sans", Sans-serif;}.elementor-kit-8 h2{font-family:"Open Sans", Sans-serif;}.elementor-kit-8 h3{font-family:"Open Sans", Sans-serif;}.elementor-kit-8 h4{font-family:"Open Sans", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.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);}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}@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 */.hero-lottie {
    opacity: 0;
    transition: opacity 2s ease-in;
}

.hero-lottie.fade-in {
    opacity: 0.8;
}


.bdt-ep-advanced-heading-main-title>.bdt-ep-advanced-heading-main-title-inner, .bdt-ep-advanced-heading-main-title>.bdt-mainh-split-text {
    display: inline; /* oder 'inline-block' anstelle von 'inline-flex' */
    box-sizing: border-box;
}


.elementor-widget-text-editor p:last-child{ margin-bottom:0px;}


.elementor-widget:not(:last-child) { margin-bottom: 20px; }

.bdt-member-photo img {
    filter: grayscale(100%);
    transition: filter 0.5s ease; /* Sanfter Übergang */
}

.bdt-member:hover .bdt-member-photo img {
    filter: grayscale(0%);
}

.bdt-member-role {
    transition: opacity 0.5s ease; /* Definiert den sanften Übergang für die Opazität */
    opacity: 1!important; /* Startwert der Opazität */
}

.bdt-member:hover .bdt-member-role {
    opacity: 0!important; /* Opazität wird auf 0 gesetzt, wenn über .bdt-member gehovert wird */
}

/* Standard-Style für Links */
.top-menu-link a {
    color:#FFFFFF;
    border: 2px dotted #FFFFFF00; /* Transparente weiße Border */
    transition: border-color 0.3s; /* Für einen weichen Übergang der Farbe */
    padding: 2px; /* Fügt etwas Platz um den Text hinzu, damit die Border nicht zu nahe ist */
    display: inline-block; /* Ermöglicht die Border um den gesamten Text */
}


.profil-list ul {
    list-style-type: none; /* Entfernt die Bullets */
    padding-left: 0; /* Entfernt den linken Abstand */
    margin-bottom: 10px; /* Abstand nach unten zwischen den Listenpunkten */
}

.profil-list ul li {
    font-size: 18px; /* Schriftgröße der Listenpunkte */
    color: #000000; /* Schriftfarbe der Listenpunkte */
    background-color: #F5F5F5; /* Hintergrundfarbe der Listenpunkte */
    padding: 20px; /* Padding um die Listenpunkte */
    margin-bottom: 10px; /* Abstand nach unten zum nächsten Listenpunkt */
    border-style: solid;
    border-width: 0px 0px 0px 4px;
    border-color: #4D616E;
}
.bdt-scrollnav .bdt-nav, .bdt-nav ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.bdt-scrollnav .bdt-navbar-left {
    width: 100%; /* Setzt die Breite auf 100% der Breite des übergeordneten Containers */
    margin: 0; /* Entfernt jeglichen Außenabstand */
    padding: 0; /* Entfernt jeglichen Innenabstand */
}
.container-green {
    position: relative;
    background: linear-gradient(to right, #4D616E 10px, transparent 10px);
    overflow: hidden;
}

.container-green::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; /* Beginne mit keiner Breite */
    height: 100%;
    background-color: #8CC168; /* Ziel-Farbe bei Hover */
    transition: width 0.5s ease; /* Glatter Übergang der Breite */
    z-index: 0;
}

.container-green:hover::before {
    width: 100%; /* Volle Breite bei Hover, um die Farbe #8CC168 zu zeigen */
}

.container-green .title-hover,
.container-green .text-hover {
    color: #4D616E; /* Standardfarbe für Titel und Text */
}

/* Schriftfarbe bei Mouseover ändern */
.container-green:hover .title-hover,
.container-green:hover .text-hover {
    color: #FFFFFF;
}


/* Übergangseigenschaften für das Icon */
.container-green .arrow-hover .elementor-icon {
    transition: background-color 0.3s ease, fill 0.3s ease; /* Übergangseigenschaften für das Icon */
}

/* Hintergrundfarbe des Icons bei Mouseover ändern */
.container-green:hover .arrow-hover .elementor-icon {
    background-color: #FFFFFF!important; /* Hintergrundfarbe des Icons bei Mouseover */
}

/* Farbe des Icons bei Mouseover ändern */
.container-green:hover .arrow-hover .elementor-icon svg {
    fill: #8CC168!important; /* Farbe des Icons bei Mouseover */
}

.container-red {
    position: relative;
    background: linear-gradient(to right, #4D616E 10px, transparent 10px);
    overflow: hidden;
}

.container-red::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; /* Beginne mit keiner Breite */
    height: 100%;
    background-color: #E57373; /* Ziel-Farbe bei Hover */
    transition: width 0.5s ease; /* Glatter Übergang der Breite */
    z-index: 0;
}

.container-red:hover::before {
    width: 100%; /* Volle Breite bei Hover, um die Farbe #8CC168 zu zeigen */
}

.container-red .title-hover,
.container-red .text-hover {
    color: #4D616E; /* Standardfarbe für Titel und Text */
}

/* Schriftfarbe bei Mouseover ändern */
.container-red:hover .title-hover,
.container-red:hover .text-hover {
    color: #FFFFFF;
}


/* Übergangseigenschaften für das Icon */
.container-red .arrow-hover .elementor-icon {
    transition: background-color 0.3s ease, fill 0.3s ease; /* Übergangseigenschaften für das Icon */
}

/* Hintergrundfarbe des Icons bei Mouseover ändern */
.container-red:hover .arrow-hover .elementor-icon {
    background-color: #FFFFFF!important; /* Hintergrundfarbe des Icons bei Mouseover */
}

/* Farbe des Icons bei Mouseover ändern */
.container-red:hover .arrow-hover .elementor-icon svg {
    fill: #E57373!important; /* Farbe des Icons bei Mouseover */
}

.container-purple {
    position: relative;
    background: linear-gradient(to right, #4D616E 10px, transparent 10px);
    overflow: hidden;
}

.container-purple::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; /* Beginne mit keiner Breite */
    height: 100%;
    background-color: #B490FC; /* Ziel-Farbe bei Hover */
    transition: width 0.5s ease; /* Glatter Übergang der Breite */
    z-index: 0;
}

.container-purple:hover::before {
    width: 100%; /* Volle Breite bei Hover, um die Farbe #8CC168 zu zeigen */
}

.container-purple .title-hover,
.container-purple .text-hover {
    color: #4D616E; /* Standardfarbe für Titel und Text */
}

/* Schriftfarbe bei Mouseover ändern */
.container-purple:hover .title-hover,
.container-purple:hover .text-hover {
    color: #FFFFFF;
}


/* Übergangseigenschaften für das Icon */
.container-purple .arrow-hover .elementor-icon {
    transition: background-color 0.3s ease, fill 0.3s ease; /* Übergangseigenschaften für das Icon */
}

/* Hintergrundfarbe des Icons bei Mouseover ändern */
.container-purple:hover .arrow-hover .elementor-icon {
    background-color: #FFFFFF!important; /* Hintergrundfarbe des Icons bei Mouseover */
}

/* Farbe des Icons bei Mouseover ändern */
.container-purple:hover .arrow-hover .elementor-icon svg {
    fill: #B490FC!important; /* Farbe des Icons bei Mouseover */
}

.container-orange {
    position: relative;
    background: linear-gradient(to right, #4D616E 10px, transparent 10px);
    overflow: hidden;
}

.container-orange::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; /* Beginne mit keiner Breite */
    height: 100%;
    background-color: #F88B69; /* Ziel-Farbe bei Hover */
    transition: width 0.5s ease; /* Glatter Übergang der Breite */
    z-index: 0;
}

.container-orange:hover::before {
    width: 100%; /* Volle Breite bei Hover, um die Farbe #8CC168 zu zeigen */
}

.container-orange .title-hover,
.container-orange .text-hover {
    color: #4D616E; /* Standardfarbe für Titel und Text */
}

/* Schriftfarbe bei Mouseover ändern */
.container-orange:hover .title-hover,
.container-orange:hover .text-hover {
    color: #FFFFFF;
}


/* Übergangseigenschaften für das Icon */
.container-orange .arrow-hover .elementor-icon {
    transition: background-color 0.3s ease, fill 0.3s ease; /* Übergangseigenschaften für das Icon */
}

/* Hintergrundfarbe des Icons bei Mouseover ändern */
.container-orange:hover .arrow-hover .elementor-icon {
    background-color: #FFFFFF!important; /* Hintergrundfarbe des Icons bei Mouseover */
}

/* Farbe des Icons bei Mouseover ändern */
.container-orange:hover .arrow-hover .elementor-icon svg {
    fill: #F88B69!important; /* Farbe des Icons bei Mouseover */
}
.img-color-switch {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.parent-img-container:hover .img-color-switch {
    filter: grayscale(0%);
}
.header-img-switch {
    filter: grayscale(100%);
    transition: filter 0.3s ease; /* Sanfter Übergang */
}

.header-section-img:hover .header-img-switch {
    filter: grayscale(0%);
}
.elementor-kit-8 .e-n-accordion-item-title {
    transition: background-color 0.5s ease, color 0.5s ease; /* Weicher Übergang der Hintergrundfarbe */
}
.bdt-overlay>:last-child {
    margin-bottom: -20px;
}

.footer-with-border {
    border-top: 0px solid transparent;
    background-image: linear-gradient(to left, 
        #B490FC 0%, #B490FC 8%, 
        #F88B69 8%, #F88B69 16%, 
        #E57373 16%, #E57373 23%, 
        #8CC168 23%, #8CC168 30%, 
        #A8CCDD 30%, #A8CCDD 38%, 
        #708591 38%, #708591 45%, 
        #4D616E 45%, #4D616E 52%, 
        #2B3C46 52%, #2B3C46 60%, 
        #ffffff 60%, #ffffff 100%);
    background-repeat: no-repeat;
    background-size: 100% 5px;
    background-position: top;
}

.section-with-border {
    border-bottom: 0px solid transparent;
    background-image: linear-gradient(to right, 
        #2B3C46 0%, #2B3C46 8%, 
        #4D616E 8%, #4D616E 16%, 
        #708591 16%, #708591 23%, 
        #A8CCDD 23%, #A8CCDD 30%, 
        #8CC168 30%, #8CC168 38%, 
        #E57373 38%, #E57373 45%, 
        #F88B69 45%, #F88B69 52%, 
        #B490FC 52%, #B490FC 60%, 
        #ffffff 60%, #ffffff 100%);
    background-repeat: no-repeat;
    background-size: 100% 5px;
    background-position: bottom;
}

ul { margin-bottom: 20px;}

.standort-container-photo img {
    filter: grayscale(100%);
    transition: filter 0.5s ease; /* Sanfter Übergang */
}

.standort-container:hover .standort-container-photo img {
    filter: grayscale(0%);
}

@media (max-width: 767px) {
    /* Normalzustand des Icons für mobile Geräte */
    .elementor-item .sub-arrow .e-font-icon-svg {
        fill: #4D616E; /* Dunkelgraue Farbe */
        transition: fill 0.3s ease; /* Sanfter Farbwechsel */
    }

    /* Aktiver Zustand des Icons für mobile Geräte */
    .elementor-item.highlighted .sub-arrow .e-font-icon-svg,
    .elementor-item.has-submenu[aria-expanded="true"] .sub-arrow .e-font-icon-svg {
        fill: #FFFFFF; /* Weiß */
    }
}

@media (max-width: 767px) {
    /* Normalzustand des Icons für Untermenü-Links */
    .elementor-sub-item .sub-arrow .e-font-icon-svg {
        fill: #4D616E; /* Dunkelgraue Farbe */
        transition: fill 0.3s ease; /* Sanfter Farbwechsel */
    }

    /* Aktiver Zustand des Icons für Untermenü-Links */
    .elementor-sub-item.highlighted .sub-arrow .e-font-icon-svg,
    .elementor-sub-item.has-submenu[aria-expanded="true"] .sub-arrow .e-font-icon-svg {
        fill: #FFFFFF; /* Weiß */
    }
}

.bdt-ep-advanced-heading-main-title-inner {
    white-space: nowrap!importnat; /* Verhindert den Umbruch innerhalb dieses Elements */
}
@media (max-width: 767px) { /* Passt für die meisten Mobilgeräte */
    .bdt-ep-advanced-heading-main-title-inner {
        display: inline-block!important; /* Behandelt den Buchstaben als Inline-Block, um den Umbruch zu steuern */
    }
}
.section-with-border {
    position: fixed;
    top: 0px; /* Höhe des Headers */
    width: 100%;
    opacity: 1;
    transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
}

.header-with-border {
    border-bottom: 0px solid transparent;
    background-image: linear-gradient(to right, 
        #2B3C46 0%, #2B3C46 8%, 
        #4D616E 8%, #4D616E 16%, 
        #708591 16%, #708591 23%, 
        #A8CCDD 23%, #A8CCDD 30%, 
        #8CC168 30%, #8CC168 38%, 
        #E57373 38%, #E57373 45%, 
        #F88B69 45%, #F88B69 52%, 
        #B490FC 52%, #B490FC 60%, 
        #ffffff 60%, #ffffff 100%);
    background-repeat: no-repeat;
    background-size: 100% 5px;
    background-position: bottom;
}
body {
    opacity: 0;
    transition: opacity 1s ease-out;
}
.bdt-ep-advanced-heading-main-title>.bdt-ep-advanced-heading-main-title-inner, .bdt-ep-advanced-heading-main-title>.bdt-mainh-split-text {
    display: inline!important;
    box-sizing: border-box;
}
.bdt-post-grid-title {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}

@media (max-width: 768px) {
.blog-preview-title {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}
}


@media (max-width: 480px) {
    .evo_page_content {
        margin-top: -0px!important;
    }
}

@media (max-width: 480px) {
    #evcal_list .eventon_list_event .event_description p, #evcal_list .eventon_list_event .event_description li, .evo_pop_body .evcal_evdata_row .evcal_evdata_cell p {
        font-size: 13px!important;
    }
}

.insta-icon {
    position: fixed;
    right: 0px; /* Abstand vom rechten Rand */
    top: 50%; /* Startet in der Mitte der Seite */
    transform: translateY(-50%); /* Zentriert das Icon vertikal */
    opacity: 0; /* Macht das Icon anfangs unsichtbar */
    pointer-events: none; /* Verhindert Interaktion, wenn das Icon unsichtbar ist */
    transition: opacity 0.5s; /* Animiert nur die Deckkraft */
    z-index: 1000; /* Stellt sicher, dass das Icon über anderen Elementen liegt */
}

.linkedin-icon {
    position: fixed;
    right: 0px; /* Abstand vom rechten Rand */
    top: calc(50% + 60px); /* Startet in der Mitte der Seite */
    transform: translateY(-50%); /* Zentriert das Icon vertikal */
    opacity: 0; /* Macht das Icon anfangs unsichtbar */
    pointer-events: none; /* Verhindert Interaktion, wenn das Icon unsichtbar ist */
    transition: opacity 0.5s; /* Animiert nur die Deckkraft */
    z-index: 1000; /* Stellt sicher, dass das Icon über anderen Elementen liegt */
}

.xing-icon {
    position: fixed;
    right: 0px; /* Abstand vom rechten Rand */
    top: calc(50% + 120px); /* Startet in der Mitte der Seite */
    transform: translateY(-50%); /* Zentriert das Icon vertikal */
    opacity: 0; /* Macht das Icon anfangs unsichtbar */
    pointer-events: none; /* Verhindert Interaktion, wenn das Icon unsichtbar ist */
    transition: opacity 0.5s; /* Animiert nur die Deckkraft */
    z-index: 1000; /* Stellt sicher, dass das Icon über anderen Elementen liegt */
}

.yt-icon {
    position: fixed;
    right: 0px; /* Abstand vom rechten Rand */
    top: calc(50% + 180px); /* Startet in der Mitte der Seite */
    transform: translateY(-50%); /* Zentriert das Icon vertikal */
    opacity: 0; /* Macht das Icon anfangs unsichtbar */
    pointer-events: none; /* Verhindert Interaktion, wenn das Icon unsichtbar ist */
    transition: opacity 0.5s; /* Animiert nur die Deckkraft */
    z-index: 1000; /* Stellt sicher, dass das Icon über anderen Elementen liegt */
}


.scroll-icon {
    position: fixed;
    right: 0px; /* Abstand vom rechten Rand, identisch zum kontakt-icon */
    top: calc(50% + 240px); /* Startet direkt unter dem kontakt-icon, Abstand anpassen */
    transform: translateY(-50%); /* Zentriert das Icon vertikal */
    opacity: 0; /* Macht das Icon anfangs unsichtbar */
    pointer-events: none; /* Verhindert Interaktion, wenn das Icon unsichtbar ist */
    transition: opacity 0.5s; /* Animiert nur die Deckkraft */
    z-index: 1000; /* Stellt sicher, dass das Icon über anderen Elementen liegt */
}

.scroll-icon:hover {
    cursor: pointer; /* Ändert den Mauszeiger bei Hover */
}

/* Gesamt-Container der Stellenanzeigen */
.position-listing-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px !important;
    border: 1px solid #000 !important; /* Rahmen an allen Seiten */
    background: #ffffff;
    box-sizing: border-box;
    margin-bottom: 20px; /* Abstand zwischen den Stellen */
    border-radius: 0px; /* Keine abgerundeten Ecken */
    transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
}

/* HOVER-EFFEKT für den Container */
.position-listing-wrapper:hover {
    background: #4D616E;
    border: 1px solid #4D616E !important; /* Rahmenfarbe anpassen */
}

/* Titel */
.entry-title a {
    font-size: 22px;
    font-weight: 600;
    color: #000000;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

/* Ändert die Textfarbe des Titels beim Hover über den Container */
.position-listing-wrapper:hover .entry-title a {
    color: #ffffff;
}

/* Standort + Arbeitszeit */
.position-excerpt,
.entry-content p {
    font-size: 18px;
    color: #000000;
    margin-top: 5px;
    margin-bottom: 5px;
    transition: color 0.3s ease-in-out;
}

/* Ändert die Textfarbe von Standort & Arbeitszeit beim Hover über den Container */
.position-listing-wrapper:hover .position-excerpt,
.position-listing-wrapper:hover .entry-content p {
    color: #ffffff;
}

/* Button-Container */
.position-button {
    flex-shrink: 0;
}

/* Bewerbungs-Button */
.personio-integration-application-button a {
    display: flex;
    font-size: 18px;
    font-weight: 600 !important;
    align-items: center;
    justify-content: center;
    background: #4D616E;
    color: #ffffff !important;
    padding: 15px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0px;
    text-align: center;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Ändert die Hintergrund- und Textfarbe des Buttons, wenn man über den Container fährt */
.position-listing-wrapper:hover .personio-integration-application-button a {
    background: #FFFFFF;
    color: #4D616E !important;
}

/* Verbesserte Vertikale Ausrichtung für den Button */
.personio-integration-application-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Mobile & Tablet Ansicht: Button unterhalb der Excerpts */
@media screen and (max-width: 1024px) {
    .position-listing-wrapper {
        flex-direction: column; /* Ändert Layout zu vertikal */
        align-items: flex-start; /* Alle Elemente links ausrichten */
    }

    .position-button {
        margin-left: 0 !important; /* Entfernt den linken Abstand */
        width: 100%;
        display: flex;
        justify-content: flex-start; /* Links ausrichten */
        margin-top: 0px; /* Abstand zum Excerpt */
    }

    /* Bewerbungs-Button */
    .personio-integration-application-button a {
        width: auto;
        padding: 10px 20px;
        display: flex;
        justify-content: flex-start; /* Links ausrichten */
    }
}

.entry-content h3 {
    font-size: 18px !important;
    font-weight: 500 !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
    color: #4D616E !important;
}
.entry-content ul {
    margin-bottom: 50px;
}


/* Genauer Stanort Dteil Stellenanzeige */
.job-location-wrapper {
    margin-top: 0px;
}

.job-location-title {
    color: #FFFFFF;
    font-family: "Open Sans", Sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 0px!important;
}

.job-location-address {
    color: #FFFFFF;
    font-family: "Open Sans", Sans-serif;
    font-size: 16px;
    font-weight: 400;
     margin-top: 0!important; /* Kein Abstand nach oben */
}

.job-location-link {
    color: #FFFFFF!important; /* Nimmt die Standardfarbe des Textes */
    text-decoration: none; /* Entfernt die Unterstreichung */
    pointer-events: all; /* Stellt sicher, dass der Link klickbar bleibt */
}

.job-location-link:hover {
    color: #FFFFFF!important;
    text-decoration: none;
}


/* Stil für Bewerbungsformulare */
.personio-application-form {
    background-color: #F5F5F5;
    padding: 20px;
    border-radius: 8px; /* Optional: Abrundung der Ecken für ein schöneres Design */
}

.personio-application-form input[type="text"],
.personio-application-form input[type="email"],
.personio-application-form input[type="date"],
.personio-application-form input[type="file"],
.personio-application-form input[type="tel"],
.personio-application-form input[type="number"],
.personio-application-form select,
.personio-application-form textarea {
    border: 1px solid #000000;
    border-radius: 0px;
    padding: 10px;
    width: 100%; /* Sorgt dafür, dass die Felder sich an die Breite des Containers anpassen */
    box-sizing: border-box; /* Verhindert, dass Padding die Gesamtbreite beeinflusst */
}

.personio-application-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600; /* Optional: Falls die Labels etwas hervorgehoben werden sollen */
}

.personio-integration-upload-size-hint {
    font-size: 12px!important;
    color: #666; /* Optional: Falls du die Farbe etwas dezenter haben möchtest */
    margin-top: 3px; /* Optional: Falls du etwas mehr Abstand nach oben möchtest */
}


.privacy {
    display: flex;
    align-items: center;
}

.privacy input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 25px;
    height: 25px;
    margin-right: 10px; /* Abstand zwischen Checkbox und Text */
    border: 1px solid #000;
    background-color: white;
    cursor: pointer;
    position: relative;
}

/* Farbe der Checkbox ändern, wenn sie aktiviert ist */
.privacy input[type="checkbox"]:checked {
    background-color: #4D616E;
    border-color: #4D616E;
}

/* Eigenes Häkchen hinzufügen */
.privacy input[type="checkbox"]:checked::after {
    content: "\2713"; /* Unicode für Häkchen */
    font-size: 14px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
}

.privacy label {
    font-weight: 400;
    display: inline-block;
    max-width: 90%; /* Optional: Begrenzt die Breite des Textes, damit er umbricht */
}

/* Bewerbungsformular-Button Styling */
.personio-application-form input[type="submit"] {
    width: 100%; /* Volle Breite */
    font-family: "Open Sans", Sans-serif;
    background-color: #4D616E; 
    color: #ffffff; 
    font-size: 18px;
    font-weight: 600;
    border: none; /* Standard-Border entfernen */
    border-radius: 0px; /* Keine abgerundeten Ecken */
    padding: 20px; /* Gleichmäßiger Abstand */
    cursor: pointer; /* Zeigt an, dass es ein klickbares Element ist */
    text-transform: normal; /* Falls du den Text in Großbuchstaben willst */
}

/* Hover-Effekt ohne Farbänderung */
.personio-application-form input[type="submit"]:hover {
    background-color: #4D616E; /* Bleibt gleich */
    color: #ffffff; /* Bleibt gleich */
}


/* Listenpunkte Unterseiten Expertise */
.expertise-list ul {
    padding: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Immer 3 Spalten */
    gap: 10px; /* Abstand zwischen den Spalten */
}

.expertise-list ul li {
    display: flex;
    align-items: center; /* Vertikal zentrieren */
    justify-content: left; /* Links ausrichten */
    text-align: left;
    font-size: 18px;
    color: #000000;
    background-color: #F5F5F5;
    padding: 20px;
    border-left: 4px solid #4D616E; /* Linke Border */
    min-height: 100px; /* Mindesthöhe für Konsistenz */
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://woho2025.mmd-konzept.de/wp-content/uploads/2024/07/OpenSans-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 300;
	font-display: auto;
	src: url('https://woho2025.mmd-konzept.de/wp-content/uploads/2024/07/OpenSans-LightItalic.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://woho2025.mmd-konzept.de/wp-content/uploads/2024/07/OpenSans-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	font-display: auto;
	src: url('https://woho2025.mmd-konzept.de/wp-content/uploads/2024/07/OpenSans-Italic.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://woho2025.mmd-konzept.de/wp-content/uploads/2024/07/OpenSans-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 500;
	font-display: auto;
	src: url('https://woho2025.mmd-konzept.de/wp-content/uploads/2024/07/OpenSans-MediumItalic.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://woho2025.mmd-konzept.de/wp-content/uploads/2024/07/OpenSans-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 600;
	font-display: auto;
	src: url('https://woho2025.mmd-konzept.de/wp-content/uploads/2024/07/OpenSans-SemiBoldItalic.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://woho2025.mmd-konzept.de/wp-content/uploads/2024/07/OpenSans-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 700;
	font-display: auto;
	src: url('https://woho2025.mmd-konzept.de/wp-content/uploads/2024/07/OpenSans-BoldItalic.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('https://woho2025.mmd-konzept.de/wp-content/uploads/2024/07/OpenSans-ExtraBold.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 700;
	font-display: auto;
	src: url('https://woho2025.mmd-konzept.de/wp-content/uploads/2024/07/OpenSans-ExtraBoldItalic.ttf') format('truetype');
}
/* End Custom Fonts CSS */