.elementor-kit-6{--e-global-color-primary:#224B67;--e-global-color-secondary:#FF6F61;--e-global-color-text:#224B67;--e-global-color-accent:#8FB77A;--e-global-typography-primary-font-family:"Noto Sans";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Noto Sans";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Noto Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Noto Sans";--e-global-typography-accent-font-weight:500;color:var( --e-global-color-primary );font-family:"Noto Sans", Sans-serif;font-size:18px;--e-page-transition-entrance-animation:e-page-transition-fade-out;--e-page-transition-exit-animation:e-page-transition-fade-in;--e-page-transition-animation-duration:200ms;}.elementor-kit-6 e-page-transition{background-color:#224B67;}.elementor-kit-6 a{color:#FF6F61;font-family:"Noto Sans", Sans-serif;}.elementor-kit-6 h1{color:#FFFFFF;font-family:"Noto Sans", Sans-serif;font-size:45px;line-height:3.7rem;}.elementor-kit-6 h2{color:#224B67;font-family:"Noto Sans", Sans-serif;font-size:42px;line-height:52px;}.elementor-kit-6 h3{color:#224B67;font-family:"Noto Sans", Sans-serif;font-size:22px;}.elementor-kit-6 h4{font-family:"Noto Sans", Sans-serif;}.elementor-kit-6 h5{color:#224B67;font-family:"Noto Sans", Sans-serif;}.elementor-kit-6 h6{font-family:"Noto Sans", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1279px){.elementor-kit-6 h1{font-size:26px;line-height:1.2em;}.elementor-kit-6 h2{font-size:26px;line-height:1.2em;}.elementor-kit-6 h3{font-size:20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6 h1{font-size:23px;}.elementor-kit-6 h2{font-size:21px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ===== 1. Der Rahmen für das Logo ===== */

/* Standard-Stil für das Logo auf der Startseite */
.frame-part-logo {
    border: 3px solid #fff;
    border-bottom: 0px;
    position: relative;
    padding-bottom: 11px;
    padding-top: 10px;
    background-color: #224B67;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    transform: translateY(3px);
    z-index: 1;
    padding-inline: 1rem;
}

/* Ecken für das Logo (nur Startseite) */
body.home .frame-part-logo:before {
    content: "" !important;
    display: block !important;
    width: 0px !important;
    height: 0px !important;
    position: absolute !important;
    bottom: 0px !important;
    left: 0px !important;
    background-color: #224B67 !important;
    background-position: bottom right !important;
    z-index: 1 !important;
}

body.home .frame-part-logo:after {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    position: absolute !important;
    bottom: 0px !important;
    right: -20px !important;
    background-color: #224B67 !important;
    background-position: bottom left !important;
    background-image: url("https://neu.24talents.de/wp-content/uploads/2025/09/Header-Rahmen-frei-rechts.png") !important;
    z-index: 2 !important;
}

/* Linie unter dem Logo auf den Unterseiten erstellen */
body:not(.home) .frame-part-logo {
    border: 3px solid transparent;
    background-color: transparent;
}


/* ===== 2. Der Rahmen für die Navigation (FINALE VERSION) ===== */

/* Grund-Stil für alle Menüpunkte (ohne Rahmen) */
.frame-part-nav .menu-item {
    position: relative;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-inline: 1rem;
    margin-inline: 1rem;
    transform: translateY(3px);
}

/* Rahmen zum AKTIVEN Menüpunkt oder dessen übergeordnetem Punkt hinzufügen (trifft erstmal alle) */
.frame-part-nav .menu-item.current-menu-item,
.frame-part-nav .menu-item.current-menu-ancestor {
    border: 3px solid #fff;
    border-bottom: 0px;
    background-color: #224B67;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* Eck-Bilder für den aktiven Rahmen (trifft erstmal alle) */
.frame-part-nav .menu-item.current-menu-item:before,
.frame-part-nav .menu-item.current-menu-ancestor:before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    position: absolute !important;
    bottom: 0px !important;
    left: -20px !important;
    background-color: #224B67 !important;
    background-position: bottom right !important;
    background-image: url("https://neu.24talents.de/wp-content/uploads/2025/09/Header-Rahmen-frei-links.png") !important;
    z-index: 2 !important;
}

.frame-part-nav .menu-item.current-menu-item:after,
.frame-part-nav .menu-item.current-menu-ancestor:after {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    position: absolute !important;
    bottom: 0px !important;
    right: -20px !important;
    background-color: #224B67 !important;
    background-position: bottom left !important;
    background-image: url("https://neu.24talents.de/wp-content/uploads/2025/09/Header-Rahmen-frei-rechts.png") !important;
    z-index: 2 !important;
}


/* ===== RESET-REGELN FÜR DROPDOWN-MENÜS ===== */

/* Entfernt den Rahmen und Hintergrund von aktiven Punkten IM DROPDOWN */
.frame-part-nav .sub-menu .menu-item.current-menu-item {
    border: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* Entfernt die Eck-Bilder von aktiven Punkten IM DROPDOWN */
.frame-part-nav .sub-menu .menu-item.current-menu-item:before,
.frame-part-nav .sub-menu .menu-item.current-menu-item:after {
    display: none !important;
}

/* ===== 3. Elementor-Anpassungen ===== */

/* Unschöne graue Trennlinie von Elementor entfernen */
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:last-child)::after {
    border-left: none !important;
}


.elementor-10 .elementor-element.elementor-element-36e442f {
    border-radius: 0px 20px 20px 20px;
}


/* ===== Navigation Farben ===== */

/* Ändert die Hover-Farbe der Hauptnavigation */
.elementor-nav-menu--main .elementor-item:hover {
    color: #FF6F61 !important;
}

/* Ändert die Farbe für den AKTIVEN Menüpunkt */
.elementor-nav-menu--main .current-menu-item .elementor-item,
.elementor-nav-menu--main .current-menu-ancestor .elementor-item {
    color: #FF6F61 !important;
}

/* Versteckt die animierte Linie (Pointer) von Elementor beim Hovern */
.elementor-nav-menu--main .elementor-item::after {
    background-color: transparent !important;
}


/* =================================================================== */
/* ===== 4. ELEMENTOR-ANPASSUNGEN ===== */
/* =================================================================== */

/* Unschöne graue Trennlinie von Elementor in der Navi entfernen */
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li:not(:last-child)::after {
    border-left: none !important;
}



/* =================================================================== */


/* Haupt-Container für den "Mehr lesen"-Effekt */
.expand-container {
  position: relative;
  border: 2px solid #6c757d; /* Farbe des Rahmens anpassen */
  border-radius: 25px;       /* Abrundung der Ecken anpassen */
}

/* Der Textbereich, der eingeklappt wird */
.expand-content {
  max-height: 150px; /* Höhe des sichtbaren Textbereichs anpassen */
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s ease-out; /* Sanfte Animation beim Aufklappen */
  padding-bottom: 70px !important; /* NEU: !important zwingt den Stil zum Überschreiben */
}

/* Der magische Fade-Effekt (das "Absoften") */
.expand-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px; /* Höhe des Fade-Verlaufs anpassen */
  background: linear-gradient(to bottom, transparent, #EDF3F9); /* "white" durch Ihre Hintergrundfarbe ersetzen! */
  transition: opacity 0.3s ease-in-out;
}

/* Zustand, wenn der Inhalt aufgeklappt ist */
.expand-container.expanded .expand-content {
  max-height: 2000px; /* Eine ausreichend große Höhe für den gesamten Text */
}

.expand-container.expanded .expand-content::after {
  opacity: 0; /* Fade-Effekt ausblenden, wenn aufgeklappt */
}

/* Styling für den Klick-Button/Icon */
.expand-trigger {
  cursor: pointer;
  position: absolute;
  bottom: 15px;
  right: 25px;
  transition: transform 0.4s ease, color 0.4s ease; /* Color-Transition hinzugefügt */
}

/* Icon drehen, wenn aufgeklappt */
.expand-container.expanded .expand-trigger {
  transform: rotate(180deg);
}

/* Icon-Farbe ändern, wenn der Container aufgeklappt ist */
.expand-container.expanded .expand-trigger {
  color: #224b67 !important; /* HIER ist die Korrektur */
}


/* ---- Connected Boxes (Finale Version) ---- */

/* Der Hauptcontainer */
.connected-slide {
  position: relative;
  overflow: visible !important;
}

/* Der 'Tab' rechts mit deinem SVG - Standard-Position ist MITTE */
.connected-slide::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(calc(50% + 21px), -50%);
  width: 120px;
  height: 240px;
  background-image: url('/wp-content/uploads/2025/10/blaues-verbindungselement.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 10;
  transition: top 0.4s ease;
}

/* --- FINALE Version: Abwechselnde Positionen mit dem korrekten Slider-Klassennamen --- */

/* Position im oberen Drittel für die Slides 1, 4, 7, ... */
.swiper-slide[data-slide="1"] .connected-slide::after,
.swiper-slide[data-slide="4"] .connected-slide::after,
.swiper-slide[data-slide="7"] .connected-slide::after {
  top: 33.33%;
}

/* Position im unteren Drittel für die Slides 3, 6, 9, ... */
.swiper-slide[data-slide="3"] .connected-slide::after,
.swiper-slide[data-slide="6"] .connected-slide::after,
.swiper-slide[data-slide="9"] .connected-slide::after {
  top: 66.66%;
}


/* Erzwingt die korrekte Farbe für die Icons INNERHALB EINER ICON-BOX */
.icon-box-blau .elementor-icon-box-icon span,
.icon-box-blau .elementor-icon-box-icon i {
  color: #224b67 !important;
}


/* Styling für das mobile Logo mit abgerundeten Ecken */
.logo-mobile {
  background-color: #224B67;
  padding: 22px;
  border-radius: 22px; 
  margin-bottom: -35px;
  
  position: relative;
  z-index: 10; 
}


/* Der Textbereich, der eingeklappt wird */
.expand-content-new {
  max-height: 150px; 
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s ease-out; 
  padding-bottom: 70px !important; 
}

/* Der magische Fade-Effekt (das "Absoften") */
.expand-content-new::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px; 
  background: linear-gradient(to bottom, transparent, #224b67); 
  transition: opacity 0.3s ease-in-out;
}

/* --- Modifikator für den dunklen Mobile-Fade --- */
@media (max-width: 767px) {
  .fade-dark-mobile .expand-content::after {
    background: linear-gradient(to bottom, transparent, #224b67);
  }
}


.bg-image-header {
  /* Der Mittelpunkt des Verlaufs wurde von 'left' auf 'right' geändert */
  -webkit-mask-image: radial-gradient(ellipse 120% 100% at right center, black 40%, transparent 85%);
          mask-image: radial-gradient(ellipse 120% 100% at right center, black 40%, transparent 85%);
}


/* Erzwingt, dass interne SVG-Farben von der Elementor-Farbeinstellung überschrieben werden. */
.elementor-icon svg [class*="cls-"] {
  fill: currentColor !important;
}


/* Fügt dem gesamten Navigations-Container einen rechten Abstand hinzu */
.elementor-element-190f1ba {
  padding-right: 22px !important; 
}


/* Fügt auf Tablets/Laptops einen seitlichen Abstand von 42px hinzu, nur für Elemente mit der Klasse "container-laptop". */
@media (min-width: 768px) and (max-width: 1439px) {
  .container-laptop {
    padding-left: 42px !important;
    padding-right: 42px !important;
    box-sizing: border-box;
  }
}


/* --- Icons für die Dropdown-Menüpunkte (SVG-Version) --- */

/* 1. Grund-Stil für alle Icon-Platzhalter */
.sub-menu .menu-item a::before {
  content: ''; 
  display: inline-block;
  width: 20px; 
  height: 20px;
  margin-right: 12px; 
  vertical-align: middle; 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 2. Hier werden die spezifischen SVG-Bilder zugewiesen */
.sub-menu .icon-arbeitgebermarke a::before { 
  background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-54-1.svg'); 
}
.sub-menu .icon-karriereseite a::before { 
  background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-60.svg'); 
}
.sub-menu .icon-social-media a::before { 
  background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-40.svg'); 
}
.sub-menu .icon-kampagnen a::before { 
  background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-63-1.svg'); 
}
.sub-menu .icon-landing a::before { 
  background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-31-1.svg'); 
}
.sub-menu .icon-foto a::before { 
  background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-34.svg'); 
}

/* Haupt-Styling für das Dropdown-Panel (z-index erhöht & Position erzwungen) */
.frame-part-nav .sub-menu {
  border-radius: 15px;
  background-color: rgba(245, 245, 245, 0.85) !important;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  z-index: 1001 !important;
  padding: 10px 0;
  
  /* KORREKTUR: Erzwingt absolute Positionierung gegen Elementor-Defaults */
  position: absolute !important;
  top: 100% !important; /* Platziert es direkt unter dem Menüpunkt */
  left: 0 !important;
  min-width: 220px; /* Stellt sicher, dass es nicht zu schmal wird */
}

/* Der Pfeil nach oben - Größe bleibt */
.frame-part-nav .sub-menu::before {
  content: '';
  position: absolute;
  top: -20px; 
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20px solid transparent; 
  border-right: 20px solid transparent; 
  /* KORREKTUR: Pfeilfarbe angepasst */
  border-bottom: 20px solid rgba(245, 245, 245, 0.85) !important; /* Farbe wie neuer Hintergrund */
}

/* Styling für die einzelnen Menüpunkte im Dropdown (unverändert) */
.frame-part-nav .sub-menu .menu-item a {
  color: #224B67 !important; 
  font-size: 1.33em !important; 
  font-weight: bold;
  padding: 10px 10px !important;
  transition: color 0.3s ease; 
}

/* Entfernt den Standard-Hover-Hintergrund von Elementor (unverändert) */
.frame-part-nav .sub-menu .menu-item a:hover,
.frame-part-nav .sub-menu .menu-item.current-menu-item a { 
    background-color: transparent !important;
}

/* Icons: Grund-Stil & Größe (unverändert) */
.frame-part-nav .sub-menu .menu-item a::before {
  content: ''; 
  display: inline-block;
  width: 26px; 
  height: 26px;
  margin-right: 15px; 
  vertical-align: middle; 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: filter 0.3s ease; 
  filter: none; 
}

/* Icons: Zuweisung der SVGs (unverändert) */
.sub-menu .icon-arbeitgebermarke a::before { background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-54-1.svg'); }
.sub-menu .icon-karriereseite a::before { background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-60.svg'); }
.sub-menu .icon-social-media a::before { background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-40.svg'); }
.sub-menu .icon-kampagnen a::before { background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-63-1.svg'); }
.sub-menu .icon-landing a::before { background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-31-1.svg'); }
.sub-menu .icon-foto a::before { background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-34.svg'); }


/* --- HOVER-EFFEKT (unverändert) --- */

/* Schriftfarbe bei Hover ändern */
.frame-part-nav .sub-menu .menu-item a:hover {
  color: #FF6F61 !important; 
}

/* Icon-Farbe bei Hover ändern (Trick mit CSS-Filter) */
.frame-part-nav .sub-menu .menu-item a:hover::before {
  filter: invert(58%) sepia(51%) saturate(5436%) hue-rotate(334deg) brightness(101%) contrast(101%);
}


/* Stellt sicher, dass die gesamte Navigation (frame-part-nav) über anderen Elementen liegt */
.frame-part-nav {
  position: relative; /* z-index funktioniert nur bei positionierten Elementen */
  z-index: 8;
}


/* --- Styling NUR für das mobile Vollbild-Menü (.frame-part-nav-mobile) --- */

/* Haupt-Container des Dropdowns */
.frame-part-nav-mobile .elementor-nav-menu--dropdown.elementor-nav-menu__container {
  height: 100vh !important;
  width: 100vw !important;
  top: 0 !important;
  left: 0 !important;
  position: fixed !important;
  background-color: rgba(245, 245, 245, 0.6) !important;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  z-index: 1000 !important; /* Menü liegt über dem Inhalt */
  padding-top: 10px; /* Mehr Platz oben für das X */
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 50px;
  box-sizing: border-box;
  overflow-y: auto; /* Erlaubt Scrollen, falls Menü länger als Bildschirm */
}

/* Versteckt Untermenü-Pfeile */
.frame-part-nav-mobile .elementor-nav-menu--dropdown .elementor-item-has-children > .elementor-item::after {
  display: none !important;
}

/* Abstände zwischen Hauptpunkten reduzieren */
.frame-part-nav-mobile .elementor-nav-menu--dropdown > .elementor-nav-menu--main > .menu-item > a {
    margin-top: 15px !important; /* War 25px */
}

/* Stellt sicher, dass Untermenüs immer sichtbar sind */
.frame-part-nav-mobile .elementor-nav-menu--dropdown .sub-menu {
  display: block !important;
  position: static !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 15px;
}

/* Styling der Haupt-Menüpunkte (Großbuchstaben & Größe angepasst - KORRIGIERTER SELEKTOR) */
.frame-part-nav-mobile .elementor-nav-menu--dropdown > .elementor-nav-menu--main > .menu-item > a {
  font-weight: bold !important;
  text-transform: uppercase !important; /* Großbuchstaben für die oberste Ebene */
  font-size: 1.5em !important; /* Größer als Unterpunkte */
  margin-top: 25px !important;
  color: #224B67 !important;
  padding: 5px 0 !important;
}

/* Styling der Unterpunkte (Links) - Normale Groß-/Kleinschreibung */
.frame-part-nav-mobile .elementor-nav-menu--dropdown .sub-menu .menu-item a {
  color: #224B67 !important;
  font-size: 1.33em !important;
  font-weight: normal !important;
  padding: 8px 0 !important;
  text-transform: none !important; /* Verhindert Großschreibung */
}

/* Icons: Grund-Stil */
.frame-part-nav-mobile .elementor-nav-menu--dropdown .sub-menu .menu-item a::before {
  content: '';
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-right: 15px;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: none;
}

/* Icons: Zuweisung der SVGs */
.frame-part-nav-mobile .sub-menu .icon-arbeitgebermarke a::before { background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-54-1.svg'); }
.frame-part-nav-mobile .sub-menu .icon-karriereseite a::before { background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-60.svg'); }
.frame-part-nav-mobile .sub-menu .icon-social-media a::before { background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-40.svg'); }
.frame-part-nav-mobile .sub-menu .icon-kampagnen a::before { background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-63-1.svg'); }
.frame-part-nav-mobile .sub-menu .icon-landing a::before { background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-31-1.svg'); }
.frame-part-nav-mobile .sub-menu .icon-foto a::before { background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-34.svg'); }
.frame-part-nav-mobile .sub-menu .icon-team a::before { background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-34.svg'); }


/* Neue Icons für das "Über uns" Untermenü */
.sub-menu .icon-team a::before { 
  background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-46.svg'); 
}

.sub-menu .icon-referenzen a::before { 
  background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-51.svg'); 
}

.sub-menu .icon-jobportale a::before { 
  background-image: url('https://neu.24talents.de/wp-content/uploads/2025/10/Element-73.svg'); 
}



/* Hover-Effekt für Unterpunkte */
.frame-part-nav-mobile .elementor-nav-menu--dropdown .sub-menu .menu-item a:hover {
  color: #FF6F61 !important;
}
.frame-part-nav-mobile .elementor-nav-menu--dropdown .sub-menu .menu-item a:hover::before {
  filter: invert(58%) sepia(51%) saturate(5436%) hue-rotate(334deg) brightness(101%) contrast(101%);
}


/* --- Korrektur für Toggle Button (X) --- */

/* Stellt sicher, dass der Toggle Button über dem Menü-Overlay liegt */
.frame-part-nav-mobile .elementor-menu-toggle {
    z-index: 1001 !important; /* Höher als das Menü-Overlay */
    position: relative; /* Stellt sicher, dass z-index wirkt */
}

/* Optional: Stellt sicher, dass der gesamte Header darüber liegt (falls Toggle im Header ist) */
header.elementor-location-header {
  z-index: 1001 !important;
  position: relative;
}


.elementor-10 .elementor-element.elementor-element-8e1a2a8 .elementor-nav-menu--dropdown a, .elementor-10 .elementor-element.elementor-element-8e1a2a8 .elementor-menu-toggle {
    color: var(--e-global-color-primary);
    fill: var(--e-global-color-primary);
    font-weight: bold;
    font-size: 18px;
}


.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item {
    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-weight: var(--e-global-typography-accent-font-weight);
    font-size: 18px;
    color: #224B67;
}

/* --- Animierter Kontakt-Button (Version 2 mit responsive Fix) --- */

/* 1. Grund-Styling des Buttons */
.animated-contact-button .elementor-button {
  position: relative; 
  background-color: #224b67; 
  border: 3px solid #FF6F61;
  padding: 15px 30px 15px 80px; 
  border-radius: 50px; 
  transition: border-color 0.4s ease;
  overflow: hidden; 
  text-align: left; 
}

/* 2. Der Text im Button (Desktop-Schriftgröße) */
.animated-contact-button .elementor-button-text {
  position: relative;
  z-index: 2;
  line-height: 1.4; 
  font-size: 18px; /* Deine Standard-Desktop-Schriftgröße */
  font-weight: bold;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), font-size 0.3s ease;
}

/* 3. Der farbige Kreis (liegt hinter dem Icon) */
.animated-contact-button .elementor-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 6px; 
  transform: translateY(-50%);
  width: 50px; 
  height: 50px;
  background-color: #FF6F61;
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  z-index: 1;
}

/* 4. Das echte Icon aus dem Elementor-Widget */
.animated-contact-button .elementor-button-icon {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  font-size: 24px;
  color: white;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  z-index: 2;
  margin: 0 !important;
  padding-right: 0 !important;
}

/* --- HOVER-EFFEKT --- */

/* 5. Rahmenfarbe bei Hover ändern */
.animated-contact-button .elementor-button:hover {
  border-color: #8fb77a;
}

/* 6. Kreis-Position und -Farbe bei Hover ändern */
.animated-contact-button .elementor-button:hover::before {
  left: calc(100% - 56px); 
  background-color: #8fb77a;
}

/* 7. Icon-Position bei Hover ändern */
.animated-contact-button .elementor-button:hover .elementor-button-icon {
  left: calc(100% - 44px);
}

/* 8. Text bei Hover nach links verschieben */
.animated-contact-button .elementor-button:hover .elementor-button-text {
  transform: translateX(-65px);
}


/* --- Responsive Anpassungen für die animierten Buttons --- */

/* Für Tablet: Gleiche Breite und kleinere Schrift */
@media (min-width: 768px) and (max-width: 1024px) {
  .animated-contact-button {
    flex-grow: 1;
    max-width: 450px;
  }
  
  .animated-contact-button .elementor-button {
    width: 100%;
    justify-content: center;
  }

  /* NEU: Kleinere Schrift für Tablet */
  .animated-contact-button .elementor-button-text {
    font-size: 16px !important; 
  }
}

/* Für Mobile: Gleiche Breite und noch kleinere Schrift */
@media (max-width: 767px) {
  .animated-contact-button .elementor-button {
    width: 100%;
    max-width: 380px;
    justify-content: center;
    font-size: 14px !important;
  }
  
  /* NEU: Kleinere Schrift für Mobile (und Umbruch-Regeln entfernt) */
  .animated-contact-button .elementor-button-text {
    font-size: 14px !important;
  }
}

/* Erzwingt, dass alle Slides in Elementor-Karussells die gleiche Höhe haben */
.elementor-carousel .swiper-wrapper {
  align-items: stretch;
}

.elementor-carousel .swiper-slide {
  height: auto;
}

/* Zentriert die neue Überschrift */
.centered-highlight-heading {
  text-align: center;
}

/* Der Highlight-Effekt (unverändert) */
.highlight-heading {
  position: relative;
  z-index: 1; 
  /* white-space: nowrap;  <-- DIESE ZEILE WURDE ENTFERNT */
}

.highlight-heading::before {
  content: "";
  background-color: #FF6F61; 
  position: absolute;
  width: calc(100% + 10px);
  height: 60%;
  left: -5px;
  bottom: 5px;
  z-index: -1;
  transform: rotate(-2deg);
}

/* --- Neue, mehrzeilige Überschrift Version 2 --- */

/* Haupt-Stil für die neue Überschrift */
.multi-line-heading2 {
  text-align: center;
  font-size: 26px; /* Neue, kleinere Basisschriftgröße */
  line-height: 1.3;
  font-weight: bold; /* Stellt sicher, dass die oberen Zeilen fett sind */
}

/* Stil für die kleinere, letzte Zeile */
.multi-line-heading2 .subline-heading {
  font-size: 18px;
  font-weight: normal; /* Macht die letzte Zeile nicht-fett */
}

/* Der Highlight-Effekt */
.multi-line-heading2 .highlight-heading {
  position: relative;
  z-index: 1; 
  /* white-space: nowrap;  <-- DIESE ZEILE WURDE ENTFERNT */
}

.multi-line-heading2 .highlight-heading::before {
  content: "";
  background-color: #FF6F61; 
  position: absolute;
  width: calc(100% + 10px);
  height: 60%;
  left: -5px;
  bottom: 5px;
  z-index: -1;
  transform: rotate(-2deg);
}


/* Stellt sicher, dass die gesamte Navigation einen z-index hat */
.frame-part-nav {
  position: relative; /* Notwendig, damit z-index wirkt */
  z-index: 100; /* Sicherstellen, dass die Navi über Standard-Inhalt liegt */
}

/* Haupt-Styling für das Dropdown-Panel (z-index erhöht) */
.frame-part-nav .sub-menu {
  border-radius: 15px;
  background-color: rgba(245, 245, 245, 0.85) !important; 
  -webkit-backdrop-filter: blur(15px);       
  backdrop-filter: blur(15px);               
  /* KORREKTUR: z-index deutlich erhöht */
  z-index: 1001 !important; /* Muss höher sein als der Seiteninhalt */ 
  padding: 10px 0; 
  position: absolute; /* Wichtig für z-index im Kontext des Elternelements */
}

/* Der Pfeil nach oben */
.frame-part-nav .sub-menu::before {
  content: '';
  position: absolute;
  top: -20px; 
  left: 28%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20px solid transparent; 
  border-right: 20px solid transparent; 
  border-bottom: 20px solid rgba(245, 245, 245, 0.85) !important; 
  z-index: 1002; /* Muss über dem Dropdown liegen, falls es Probleme gibt */
}

/* --- Der Rest deines Dropdown-CSS bleibt unverändert --- */
/* (Styling für Menüpunkte, Icons, Hover etc.) */

/* --- GLOBALER HEADER-FIX (z-index) --- */

/* Hebt den gesamten Header (Desktop & Mobil) über den Seiteninhalt */
header.elementor-location-header {
  z-index: 100 !important;
  position: relative; /* Notwendig, damit z-index zuverlässig greift */
}


/* --- Styling-Fix für mobile Navigation: Entfernt dunklen Hintergrund bei Hover/Aktiv --- */
.frame-part-nav-mobile .elementor-nav-menu--dropdown .elementor-item-active,
.frame-part-nav-mobile .elementor-nav-menu--dropdown .elementor-item:hover,
.frame-part-nav-mobile .elementor-nav-menu--dropdown .elementor-sub-item:hover,
.frame-part-nav-mobile .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
  background-color: transparent !important;
}

/* Begrenzt die Schriftgröße in den animierten Buttons auf Mobilgeräten */
@media (max-width: 767px) {
  .animated-contact-button .elementor-button-text {
    font-size: 16px !important;
  }
}


/* --- Custom Flip Box Text-Hintergrund (NUR RÜCKSEITE) --- */

/* Erzeugt den weißen Kasten NUR auf der Rückseite (.elementor-flip-box__back) */
.flip-custom .elementor-flip-box__back .elementor-flip-box__layer__inner {
  background-color: rgba(255, 255, 255, 0.85) !important;
  padding: 30px !important;
  border-radius: 15px !important;
  margin: 15px !important;
}

/* Erzwingt dunkle Textfarbe NUR auf der Rückseite */
.flip-custom .elementor-flip-box__back .elementor-flip-box__layer__title,
.flip-custom .elementor-flip-box__back .elementor-flip-box__layer__description {
  color: #224B67 !important;
}

/* OPTIONAL: Abstände ZWISCHEN den Hauptpunkten reduzieren */
.frame-part-nav-mobile .elementor-nav-menu--dropdown > .elementor-nav-menu--main > .menu-item > a {
    margin-top: 10px !important; /* War vorher 25px oder 15px */
    padding: 2px 0 !important;   /* War 5px */
}

/* OPTIONAL: Abstände der Unterpunkte reduzieren */
.frame-part-nav-mobile .elementor-nav-menu--dropdown .sub-menu .menu-item a {
    padding: 5px 0 !important; /* War 8px */
}

/* --- twentyfourtalents Newsletter Formular Style (ID: 6033) --- */

/* * Wir zielen auf die ID "wpcf7-f6033-...", 
 * damit andere Formulare ihr Styling behalten.
 */

/* 1. Textfarbe für alle Labels (E-Mail-Adresse, Anrede, etc.) */
div[id^="wpcf7-f6033-"] label {
  color: #224B67;
}

/* 2. Textfarbe für den Datenschutz-Akzeptanztext */
div[id^="wpcf7-f6033-"] .wpcf7-acceptance .wpcf7-list-item-label {
  color: #224B67;
}

/* 3. Rahmen- UND Textfarbe für die Eingabefelder */
div[id^="wpcf7-f6033-"] .wpcf7-form-control.wpcf7-text,
div[id^="wpcf7-f6033-"] .wpcf7-form-control.wpcf7-email,
div[id^="wpcf7-f6033-"] .wpcf7-form-control.wpcf7-select {
  border-color: #224B67;
  color: #224B67; /* Färbt den Text, den der Nutzer eingibt */
}

/* 4. [Optional] Rahmenfarbe, wenn ein Feld angeklickt wird (Fokus) */
div[id^="wpcf7-f6033-"] .wpcf7-form-control.wpcf7-text:focus,
div[id^="wpcf7-f6033-"] .wpcf7-form-control.wpcf7-email:focus,
div[id^="wpcf7-f6033-"] .wpcf7-form-control.wpcf7-select:focus {
  border-color: #224B67;
  outline: none; /* Entfernt den blauen Standard-Ring */
  box-shadow: 0 0 3px 1px rgba(34, 75, 103, 0.3); /* Dezenter Schatten in Ihrer Farbe */
}

/* --- twentyfourtalents Mailchimp Formular Style --- */

/* 1. TEXTFARBEN (Labels & Datenschutz) */
#mc_embed_signup .mc-field-group label,
#mc_embed_signup .mc-field-group.input-group strong,
#mc_embed_signup .mc-field-group.input-group label {
  color: #224B67 !important; /* !important wird evtl. benötigt, um Mailchimp-Stile zu überschreiben */
}

/* 2. FELDER-STYLING (Standard-Rahmen Blau) */
#mc_embed_signup .mc-field-group input[type="text"],
#mc_embed_signup .mc-field-group input[type="email"],
#mc_embed_signup .mc-field-group select {
  border: 1px solid #224B67 !important;
  color: #224B67;
  width: 100%;
  box-sizing: border-box; /* Stellt sicher, dass Felder nicht überlaufen */
}

/* 3. RESPONSIVES LAYOUT (Desktop = 2 Spalten) */

/* MOBILE & TABLET (Standard): 
 * Mailchimp-Felder (.mc-field-group) sind standardmäßig untereinander. 
 * Das ist bereits korrekt.
 */

/* DESKTOP (ab 769px Breite) */
@media (min-width: 769px) {
  
  /* Wir nutzen Flexbox für den Container */
  #mc_embed_signup_scroll {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  /* Titel und Pflichtfeld-Hinweis bleiben 100% breit */
  #mc_embed_signup_scroll h2,
  #mc_embed_signup_scroll .indicates-required {
    flex-basis: 100%;
  }

  /* Die 4 Haupt-Felder bekommen 48% Breite */
  #mc_embed_signup_scroll .mc-field-group {
    flex-basis: 48%;
    box-sizing: border-box;
    padding-right: 2%; /* Kleiner Abstand */
  }
  
  /* Das letzte Feld-Paar braucht keinen rechten Abstand */
  #mc_embed_signup_scroll .mc-field-group:nth-of-type(3),
  #mc_embed_signup_scroll .mc-field-group:nth-of-type(5) {
     padding-right: 0;
  }

  /* Datenschutz-Box und Button bekommen 100% Breite */
  #mc_embed_signup_scroll .mc-field-group.input-group,
  #mc_embed_signup_scroll .clear {
    flex-basis: 100%;
    padding-right: 0;
  }
}

/* --- Blur Text Animation --- */

/* Versteckt die Überschrift, bevor das JS sie umbaut,
   um ein "Aufblitzen" des ungestylten Texts zu verhindern */
.animate-blur-heading {
  opacity: 0;
}
/* Sobald das JS bereit ist, wird die Überschrift sichtbar */
.animate-blur-heading.js-ready {
  opacity: 1;
}

/* * Das ist der Start-Zustand für jedes einzelne Wort,
 * das wir gleich mit JS erstellen.
*/
.blur-word {
  display: inline-block;
  opacity: 0;
  filter: blur(8px); /* Startet unscharf */
  transform: translateY(30px); /* Startet 30px nach unten verschoben */

  /* * Die Animationseinstellungen. 
   * cubic-bezier sorgt für einen modernen, "federnden" Look. 
  */
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* * Das ist der End-Zustand, den wir auslösen,
 * wenn das Wort ins Bild scrollt.
*/
.blur-word.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* NEU: SVG auf Mobilgeräten ausblenden */
@media (max-width: 767px) {
  .connected-slide::after {
    /* Versteckt das SVG komplett auf Bildschirmen, 
       die 767px oder schmaler sind */
    display: none;
  }
}

/* --- Text auf Hover einblenden --- */

/* 1. Den Text standardmäßig ausblenden */
/* Wir zielen auf den Text (.CTA-Text) INNERHALB des Containers (.Bild-CTA) */
.Bild-CTA .CTA-Text {
  opacity: 0;
  visibility: hidden;
  
  /* Optional: Sorgt für einen sanften Fade-in-Effekt */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 2. Den Text einblenden, wenn über den Container gehovert wird */
.Bild-CTA:hover .CTA-Text {
  opacity: 1;
  visibility: visible;
}

/* --- Globales Styling für ALLE Contact Form 7 Formulare (Weißer Text) --- */
/*
  HINWEIS: Diese Regeln gelten für JEDES CF7-Formular auf der Website.
*/

/* Stellt sicher, dass die Stile auf alle CF7-Formulare wirken */
.wpcf7 {
  color: #ffffff; /* Setzt die allgemeine Textfarbe im Formular auf Weiß */
}

/* Stile für die Labels (Name*, Firma*, Nachricht) */
.wpcf7 label {
  display: block; /* Stellt sicher, dass das Feld unter dem Label erscheint */
  
  /* === HIER IST IHRE ÄNDERUNG === */
  /* Abstand NACH dem Label (zum EIGENEN Feld) auf 0 gesetzt */
  margin-bottom: 0px;
  /* NEU: Abstand VOR dem Label (zum FELD DARÜBER) hinzugefügt */
  margin-top: 26px; /* Passen Sie diesen Wert (z.B. 16px) nach Wunsch an */
  
  font-weight: 600;
}

/* ERSTER LABEL-BLOCK: Den Abstand oben entfernen, damit das Formular bündig beginnt */
.wpcf7 p:first-child label {
    margin-top: 0px;
}

/* Stile für alle Text-Eingabefelder und die Textarea */
.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.8); /* Leicht transparenter weißer Rahmen */
  border-radius: 12px;
  color: #ffffff;
  padding: 12px 18px;
  width: 100%;
  box-sizing: border-box; /* Verhindert Überlaufen bei 100% Breite */
  transition: border-color 0.3s ease;
}

/* Spezielle Höhe für die Nachrichten-Box */
.wpcf7 textarea {
  height: 150px;
  resize: vertical; /* Erlaubt dem Nutzer, die Box vertikal zu vergrößern */
}

/* Rahmenfarbe ändern, wenn man in ein Feld klickt */
.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):focus {
  border-color: #FF6F61; /* Orange Farbe beim Fokussieren */
  outline: none; /* Entfernt den Standard-Browser-Rahmen */
}

/* Zustimmungshäkchen (Checkbox) und Text */
.wpcf7 .wpcf7-acceptance {
  margin-top: 20px;
}
.wpcf7 .wpcf7-acceptance span {
  font-size: 14px;
}


/* --- Senden-Button --- */

/* Grund-Stil für den Button */
.wpcf7 .wpcf7-submit {
  background-color: #FF6F61; /* Dein Marken-Orange */
  color: #ffffff;
  border: none;
  border-radius: 30px; /* Macht den Button rund */
  padding: 15px 40px;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  margin-top: 20px;
  width: auto;
  
  /* Sanfter Übergang für den Hover-Effekt */
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Hover-Effekt für den Button */
.wpcf7 .wpcf7-submit:hover {
  background-color: #8fb77a; /* Dein Blau für den Hover */
  transform: scale(1.1); /* Macht den Button 10% größer */
}

.elementor-nav-menu__align-end .elementor-nav-menu {
    transform: translateY(5px);
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://twentyfourtalents.de/wp-content/uploads/2025/11/noto-sans-v42-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://twentyfourtalents.de/wp-content/uploads/2025/11/noto-sans-v42-latin-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Noto Sans';
	font-style: italic;
	font-weight: normal;
	font-display: auto;
	src: url('https://twentyfourtalents.de/wp-content/uploads/2025/11/noto-sans-v42-latin-italic.woff2') format('woff2');
}
/* End Custom Fonts CSS */