/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/


/* ===========================================
   Smooth Load (kein Weiß-Blitz)
=========================================== */

html.is-loading body{
  opacity: 0;
  transition: none !important;
}

html.is-ready body{
  opacity: 1;
  transition: opacity .10s ease;
}


/* ===========================================
   SmartSection Post Carousel Fix – kein Sprung (final)
   .sprung-fix
=========================================== */

.sprung-fix{
  position: relative !important;
  min-height: 680px; /* ggf. anpassen */
}

/* Solange nicht ready -> Slider unsichtbar, Platz bleibt */
.sprung-fix:not(.pc-ready) .owl-carousel{
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Wenn ready -> einblenden */
.sprung-fix.pc-ready .owl-carousel{
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity .18s ease !important;
}

/* Optional: responsive Reserve */
@media (max-width: 1200px){
  .sprung-fix{ min-height: 520px; }
}
@media (max-width: 767px){
  .sprung-fix{ min-height: 360px; }
}


/* ====================================
   Scroll Probleme Fix
==================================== */
html.vc_transform,
html.vc_transform body.wpb-js-composer{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  max-height: none !important;
}

/* Manche Lock-Skripte setzen zusätzlich position/fixed – das neutralisieren wir im Composer */
html.vc_transform body.wpb-js-composer{
  position: static !important;
  top: auto !important;
}


/* ====================================
   Link ohne Mouse/Hand-Icon
==================================== */

.nomouseicon a,
.nomouseicon [role="link"]{
  cursor: default !important;
}


/* ====================================
   Bakery Page builder Colums-Link
==================================== */

/* macht den Overlay-Link flächig */
.vc_column_container .big_link{
  position: absolute;
  inset: 0;            /* top:0 right:0 bottom:0 left:0 */
  z-index: 1;
}

/* Inhalt über dem Overlay (Buttons/Links bleiben klickbar) */
.vc_column_container .wpb_wrapper{
  position: relative;
  z-index: 2;
}


/* ====================================
   Font Fix
==================================== */

@font-face{
	font-family:"Metropolis-Regular";
	src:url("https://dil-ev.de/wp-content/uploads/2025/03/Metropolis-Regular.woff") 
		format("woff"),
		url("https://dil-ev.de/wp-content/uploads/2025/03/Metropolis-Regular.ttf") 
		format("truetype");
	font-weight:normal;
	font-style:normal;
	font-display:swap
}
@font-face{
	font-family:"Metropolis-Medium";
	src:url("https://dil-ev.de/wp-content/uploads/2025/03/Metropolis-Medium.woff") 
		format("woff"),
		url("https://dil-ev.de/wp-content/uploads/2025/03/Metropolis-Medium.ttf") 
		format("truetype");
	font-weight:normal;font-style:normal;
	font-display:swap
}
@font-face{
	font-family:"Metropolis-Semibold";
	src:url("https://dil-ev.de/wp-content/uploads/2025/03/Metropolis-SemiBold.woff") 
		format("woff"),
		url("https://dil-ev.de/wp-content/uploads/2025/03/Metropolis-SemiBold.ttf") 
		format("truetype");
	font-weight:normal;
	font-style:normal;
	font-display:swap
}
@font-face{
	font-family:"Metropolis-Bold";
	src:url("https://dil-ev.de/wp-content/uploads/2025/03/Metropolis-Bold.woff") 
		format("woff"),
		url("https://dil-ev.de/wp-content/uploads/2025/03/Metropolis-Bold.ttf") 
		format("truetype");
	font-weight:normal;
	font-style:normal;
	font-display:swap
}

#el-82214324163e6287ed344b>ul>li>a {
    font-family: 'Metropolis-Semibold' !important;
}

#main-header {
	display: block !important;
}
.gusta-section .container {
    max-width: 100%;
    padding: 0 !important;
	margin: 0 !important;
}
.gusta-section.header-section .vc_row {
	margin: 0 !important;
	padding: 0 !important;
}
.gusta-logo img {
	max-height: 100%;
	width: auto;
}

.vc_figure a {
	border-color: #ffffff !important;
}
.vc_figure a:hover {
	border-color: #ffffff !important;
}

.tg-filter.tg-filter-active, .tg-filter:hover {
	background: #0092ae !important;
}
.tg-filter-name {
	font-size: 120% !important;
}

.portfolio.type-portfolio .section-post-header {
	display: none;
}

@media screen and (max-width: 768px) {
	.actionlink .wpb_wrapper {
		position: relative;
	}
}

@media screen and (max-width: 1024px) {
	.gusta-icon-link {
		font-size: 100% !important;
	}
}


/* ====================================
  Entfernt obere & untere Abstände bei Zeilen
==================================== */

/* Entfernt Header-Gesamtabstände */
header#Header,
.header-wrapper,
.gusta-site-logo,
.gusta-header-row,
.header-stack,
.gusta-align-left .wpb_wrapper,
.vc_row[style*="padding-top"],
.vc_row[style*="padding-bottom"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Entfernt vertikale Abstände bei Zeilen */
.vc_row,
.mfn-row,
.section,
.section_wrapper,
.content_wrapper {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  /* Wichtiger Zusatz für WPBakery Inline-Styling */
  box-sizing: border-box;
}

/* Entfernt Padding/Margin bei Spalten */
.vc_column_container,
.mfn-column,
.wpb_column {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Entfernt Abstand in Inner-Wrappern */
.wpb_wrapper,
.mfn-wrapper,
.vc_column-inner {
  padding: 0 !important;
  margin: 0 !important;
}

/* Text- und Content-Elemente zurücksetzen */
.wpb_text_column,
.wpb_content_element {
  margin: 0 !important;
  padding: 0 !important;
}

/* Headings ohne Abstand */
.section .section_title,
.section .column_title,
h1, h2, h3, h4, h5, h6 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* BeTheme: Intro/Header-Sektion (section-post-header) Abstand global entfernen */
header.section.mcb-section.section-post-header,
header.section.mcb-section.section-post-header *{
  padding-block:0 !important;
  margin-block:0 !important;
  min-height:0 !important;
}
header.section.mcb-section.section-post-header::before,
header.section.mcb-section.section-post-header::after,
header.section.mcb-section.section-post-header *::before,
header.section.mcb-section.section-post-header *::after{
  content:none !important;
  display:none !important;
  height:0 !important;
}

/* Entfernt den „grünen“ Streifen (= Padding) oberhalb vom Bild */
/* erst unter 1300px entfernen */
@media (max-width: 1299px){

  .vc_row.vc_inner.carousel-row.padding-top{
    padding-top: 0 !important;
  }

  /* falls der Abstand von der Column kommt */
  .vc_row.vc_inner.carousel-row > .vc_column_container > .vc_column-inner{
    padding-top: 0 !important;
  }
}

/* Kategorie-Zeile in den Cards komplett ausblenden */
.projektdatenbank-kategorien p.js-projekt-kategorie{
  display:none !important;
}

/* Fallback (falls es mal kein <p> ist) */
.projektdatenbank-kategorien .js-projekt-kategorie,
.projektdatenbank-kategorien .js-projekt-kategorie *{
  display:none !important;
}


/* ====================================
   mpc-column a:hover
==================================== */

.mpc-column a:hover {
    text-decoration: none !important;
  }


/* ====================================
   Doppelter Scrollbalken entfernen
==================================== */

html, body{
  overflow-x: hidden !important;
  overflow-y: auto !important;
}


/* ====================================
   gusta-nav
==================================== */

.gusta-nav {
    width: 100% !important;
}

.gusta-nav>ul>li {
    flex-grow: 1;
    flex-basis: 0;
}

.gusta-align-right.gusta-inline  {
	padding-top: 0px !important;
}

.gusta-nav.horizontal>ul>li.menu-item-has-children>a:before {
	position: absolute !important;
	right: 0 !important;	
}
.gusta-nav>ul>li>a,
.gusta-nav>ul>li>ul>li>a,
.gusta-nav>ul>li>ul>li>ul>li>a {
    white-space: nowrap;
}

/* menu word-break */

.ss-element * {
    word-break: keep-all !important;
}


/* ====================================
   FIX: Abstand zwischen Menü-Punkten wird auf kleineren Auflösungen zu groß
   Ursache: .gusta-nav>ul>li { flex-grow:1; flex-basis:0; }
   Lösung: LI nicht mehr strecken, Abstand über gap steuern
==================================== */

/* Desktop/Tablet: Menüpunkte NICHT auf gleiche Breite ziehen */
body .gusta-nav.horizontal > ul > li{
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-basis: auto !important;
}

/* Abstand zwischen Punkten über gap statt Stretch */
body .gusta-nav.horizontal > ul{
  justify-content: flex-start !important;
  column-gap: clamp(0px, 0vw, 0px) !important;
}


/* ====================================
   LOGO – Skalierung
==================================== */
.gusta-logo,
.gusta-logo a{
  height: clamp(50px, 4vw, 70px) !important;
}


/* =========================================================
   NO-KLICK (CSS) – nur im Menü mit .no-klick
   - macht klar: kein Hand-Cursor
========================================================= */
.dil-navigation.no-klick > ul > li > a{
  cursor: default !important;
}


/* ====================================
   HAUPTMENÜ (ohne Mega-Menüs)
==================================== */
.dil-navigation > ul{
  display: flex;
  align-items: center;
}

/* Menü + Sprachumschalter (Mega-Menüs ausgeschlossen) */
.dil-navigation ul:not([id^="menu-dil-megamenu-"]) > li > a,
.dil-navigation ul:not([id^="menu-dil-megamenu-"]) > li > a span,
.lang-switch .wpml-ls a{
  font-size: clamp(18px, 1.4vw, 30px) !important;
  line-height: clamp(30px, 5vw, 40px) !important;
  letter-spacing: -0.01em !important;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}


/* ====================================
   SERVICE-MENÜ (ohne Mega-Menüs)
   Scope: .dil-service-nav-header
==================================== */

/* UL als Flex */
.dil-service-nav-header > ul{
  display: flex;
  align-items: center;
}

/* Menü + Sprachumschalter (Mega-Menüs ausgeschlossen) */
.dil-service-nav-header ul:not([id^="menu-dil-megamenu-"]) > li > a,
.dil-service-nav-header ul:not([id^="menu-dil-megamenu-"]) > li > a span,
.dil-service-nav-header .lang-switch .wpml-ls a{
font-size: clamp(12px, 1vw, 20px) !important;
line-height: clamp(30px, 5vw, 40px) !important;
  letter-spacing: -0.01em !important;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}


/* ====================================
   WPML SPRACHSCHALTER
==================================== */
.lang-switch .wpml-ls.wpml-ls-legacy-list-horizontal li a{
  line-height: 1 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Hover / Aktiv: #12A15D */
.lang-switch .wpml-ls.wpml-ls-legacy-list-horizontal li a:hover,
.lang-switch .wpml-ls.wpml-ls-legacy-list-horizontal li a:focus,
.lang-switch .wpml-ls.wpml-ls-legacy-list-horizontal li a:focus-visible,
.lang-switch .wpml-ls.wpml-ls-legacy-list-horizontal li.wpml-ls-current-language > a{
  color: #12A15D !important;
}


/* ====================================
   MEGA-MENÜ (FINAL, SAUBER) – schlank + responsive
==================================== */

/* UL – kleiner, stabiler Abstand zwischen Menüpunkten */
div[id^="gusta-mega-menu-"] ul[id^="menu-dil-megamenu-"]{
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* LI – keine Margins */
div[id^="gusta-mega-menu-"] ul[id^="menu-dil-megamenu-"] > li{
  margin: 0 !important;
  padding: 0 !important;
}

/* A – Schriftgröße + Abstand zwischen Punkten + Pfeil-Abstand */
div[id^="gusta-mega-menu-"] ul[id^="menu-dil-megamenu-"] > li > a{
  font-size: clamp(14px, 1vw, 18px) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.5 !important;

  /* Abstand zwischen Menüpunkten (responsive klein, nicht „größer“ auf Mobile) */
  padding: clamp(0px, 0vw, 0px) 10px !important;

  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

/* Pfeil ↔ Text (falls der Pfeil per ::before kommt) */
div[id^="gusta-mega-menu-"] ul[id^="menu-dil-megamenu-"] > li > a::before{
  margin-right: 8px !important;
}

/* Falls Text im span liegt */
div[id^="gusta-mega-menu-"] ul[id^="menu-dil-megamenu-"] > li > a > span{
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Abstand kommt hier her: UL ist flex -> gap auf 0 erzwingen */
div[id^="gusta-mega-menu-"] ul[id^="menu-dil-megamenu-"]{
  gap: 0 !important;
  row-gap: 0 !important;
}

/* Falls zusätzlich margin am LI gesetzt ist */
div[id^="gusta-mega-menu-"] ul[id^="menu-dil-megamenu-"] > li{
  margin: 0 !important;
}


/* ====================================
   Menu-Pfeil-Down im Hauptmenu
==================================== */

/* Menu-Pfeil – kompakt */
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li>a{position:relative;padding-right:22px}
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li>a::after{content:"";position:absolute;top:50%;right:0;transform:translateY(-50%);width:10px;height:10px;background:url("https://dil-ev.de/wp-content/uploads/2025/09/chevrondown.png") center/contain no-repeat!important;pointer-events:none}
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li>a:hover::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li:hover>a::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li>a:focus-visible::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li.current-menu-item>a::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li.current_page_item>a::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li.current-menu-ancestor>a::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li.current_page_ancestor>a::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li.current-menu-parent>a::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li>a[aria-current="page"]::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li>a[data-force-active="1"]::after{background-image:url("https://dil-ev.de/wp-content/uploads/2025/09/chevrondown-over.png")!important}


/* ==========================================
   Mega-Menü – Pfeile & Trennlinien (GLOBAL)
   (final, ohne @media, inkl. >=1920px Schutz)
========================================== */

[id^="gusta-mega-menu-"] ul[class*="gusta-nav"]{
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}

[id^="gusta-mega-menu-"] ul[class*="gusta-nav"] > li{
  margin:0!important;
  padding:0!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;

  min-height: clamp(15px, 17px + 0.7vw, 30px) !important;

  /* ✅ Schutz gegen Theme-Overrides auf großen Screens */
  height: auto !important;
  line-height: normal !important;
}

[id^="gusta-mega-menu-"] ul[class*="gusta-nav"] > li > a{
  --mm-icon: clamp(10px, 0.70vw, 12px);
  position:relative!important;
  display:block!important;
  flex:1 1 auto!important;
  margin:0!important;
  padding:0!important;

  text-indent:var(--mm-icon)!important;
  background:none!important;
  line-height: inherit !important; /* ✅ erbt sauber vom li */
}

[id^="gusta-mega-menu-"] ul[class*="gusta-nav"] > li > a::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:var(--mm-icon)!important;
  height:var(--mm-icon)!important;
  background:url("https://dil-ev.de/wp-content/uploads/2025/12/megamenuarrow.png") center/contain no-repeat!important;
}

[id^="gusta-mega-menu-"] ul[class*="gusta-nav"] > li > a:is(:hover,:focus,:active,[aria-current="page"])::before,
[id^="gusta-mega-menu-"] ul[class*="gusta-nav"] > li:is(.current-menu-item,.current_page_item,.is-active,.active) > a::before{
  background-image:url("https://dil-ev.de/wp-content/uploads/2025/12/megamenuarrow-over.png")!important;
}


/* ====================================
   actionhover - Menu – gilt für alle Megamenüs mit Hover-Aktivierung
==================================== */

.wpb_fadeIn.wpb_animate_when_almost_visible {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}

/* actionhover - Menu – gilt für alle Megamenüs mit Hover-Aktivierung */
.gusta-navigation > li.menu-item > a {
  color: inherit;
  transition: color 0s ease !important;
}

.gusta-navigation > li.menu-item:hover > a {
  transition: color 0s ease 0s !important;
}


/* ========================================
   Verzögerter Fade-In für Text & Inhalt
   ======================================== */

@keyframes fadeInCustom {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadein-delay {
  opacity: 0; /* initialer Zustand */
  animation-name: fadeInCustom;
  animation-duration: 0.05s !important;
  animation-delay: 0.05s !important;
  animation-fill-mode: forwards;
}


/* ====================================
   Footer-Menü kompakt + Typo wie Hauptmenü
==================================== */

/* Footer-Menü kompakt + Typo wie Hauptmenü */
#gusta-footer .dil-footermenu ul{margin:0!important;padding:0!important;list-style:none!important}
#gusta-footer .dil-footermenu li{margin:0!important;padding:0!important}
#gusta-footer .dil-footermenu a,
#gusta-footer .dil-footermenu a span{
  font-size:clamp(15px,1.2vw,25px)!important;
  line-height:clamp(20px,2.0vw,35px)!important;
  letter-spacing:-.01em!important;
  display:inline-flex!important;align-items:center!important;
  padding:0!important;margin:0!important;
}

/* Footer: alle Menü-Pfeile/Indikatoren AUS (BeTheme/Gusta) */
#gusta-footer .footer-no-mega.gusta-nav.horizontal > ul > li.menu-item-has-children > a::before,
#gusta-footer .footer-no-mega.gusta-nav.horizontal > ul > li.menu-item-has-children > a::after,
#gusta-footer .footer-no-mega.dil-navigation > ul > li > a::after,
#gusta-footer .footer-no-mega.dil-navigation > ul > li > a::before{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Footer: kein Platz mehr für Pfeil reservieren */
#gusta-footer .footer-no-mega.gusta-nav.horizontal > ul > li > a,
#gusta-footer .footer-no-mega.dil-navigation > ul > li > a{
  padding-right: 0 !important;
}


/* ====================================
   icon-text-inline im Footer
==================================== */

/* Newsletter: Icon + Text inline (robust & schlank)
   Klasse auf Column: icon-text-inline  | Unterzeile: uberschrift */

.icon-text-inline{--icon:75px;--gap:12px}
.icon-text-inline>.vc_column-inner>.wpb_wrapper{position:relative!important;padding-left:calc(var(--icon) + var(--gap))!important}

.icon-text-inline .wpb_single_image{position:absolute!important;left:0!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important}
.icon-text-inline .wpb_single_image .vc_single_image-wrapper{width:var(--icon)!important;max-width:var(--icon)!important}
.icon-text-inline .wpb_single_image img.vc_single_image-img{width:var(--icon)!important;max-width:var(--icon)!important;min-width:var(--icon)!important;height:auto!important;display:block!important}

.icon-text-inline .wpb_text_column{margin:0!important}
.icon-text-inline h4{margin:0!important;line-height:1.1!important}
.icon-text-inline .wpb_text_column.uberschrift p{margin:0!important;line-height:1.2!important}

/* icon-text-inline – unter 991px deaktivieren */

@media (max-width: 991px){
  .icon-text-inline>.vc_column-inner>.wpb_wrapper{padding-left:0!important}
  .icon-text-inline .wpb_single_image{display:none!important}
}


/* =========================================
   The Newsletter – Profilseite: Feld "Ich bin" (Gender) ausblenden
   URL: ?nm=profile
========================================= */

/* Das ganze Feld (Label + Dropdown) */
body.nl-nm-profile .tnp-field.tnp-field-gender{
  display:none !important;
}

/* Fallback, falls body-Klasse nicht gesetzt ist */
body .tnp-profile .tnp-field.tnp-field-gender{
  display:none !important;
}

/* Extra-sicher: das Select (name="nx") + Label */
body .tnp-profile select[name="nx"],
body .tnp-profile label[for="nx"]{
  display:none !important;
}


/* ====================================
   Schatten-Card, im Menu
==================================== */

.shadow-card{
  position: relative;
  background-color: transparent !important; /* 100% transparent */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Kein Padding im Inhalt */
.shadow-card .wpb_wrapper{
  padding: 0 !important;
}

/* ====================================
   Shadow nur unten
==================================== */

.shadow-bottom-card{
  position: relative;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* WPBakery: auch inner/wrapper nicht clippen */
.shadow-bottom-card > .vc_column-inner,
.shadow-bottom-card > .vc_column-inner > .wpb_wrapper{
  overflow: visible !important;
}

/* der Schatten: weich nach unten auslaufend */
.shadow-bottom-card::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25px;                 /* wirklich unterhalb */
  height: 25px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.10) 0%,
    rgba(0,0,0,0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Inhalt bleibt oben drüber */
.shadow-bottom-card > *{
  position: relative;
  z-index: 2;
}

/* Kein Padding im Inhalt */
.shadow-bottom-card .wpb_wrapper{
  padding: 0 !important;
}


/* ==========================================
   Smart-Section Buttons im Menu 
   für die Hauptmenupunkte Institut-Forschung-Service-Publikationen
========================================== */

.smartsec-btn[class*="ssbtn-"]{
  font-size: clamp(14px, 1vw, 16px) !important;
  letter-spacing: -0.02em !important;
}

/* Optional: damit Icon/SVG die gleichen Typo-Werte erben (meist nicht nötig) */
.smartsec-btn[class*="ssbtn-"] *,
.smartsec-btn[class*="ssbtn-"] svg,
.smartsec-btn[class*="ssbtn-"] svg *{
  font-size: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}


/* ==========================================
   Mobile-Menü Sachen
========================================== */

ul#gusta-nav-mobile-menu li.menu-item-has-children > i.fa.gusta-menu-toggle,
ul#menu-dil-mobile-menu li.menu-item-has-children > i.fa.gusta-menu-toggle,
ul.gusta-navigation li.menu-item-has-children > i.fa.gusta-menu-toggle{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* SmartSection Mobile-Menü: oberste + unterste Trennlinie wirklich weg */
ul.gusta-navigation > li:first-child > a,
ul#gusta-nav-mobile-menu > li:first-child > a,
ul#menu-dil-mobile-menu > li:first-child > a{
  border-top: 0 !important;
  box-shadow: none !important; /* falls Linie als shadow kommt */
}

ul.gusta-navigation > li:last-child > a,
ul#gusta-nav-mobile-menu > li:last-child > a,
ul#menu-dil-mobile-menu > li:last-child > a{
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Mobile-Menü Untermenüs: weniger Abstand oben/unten (gusta-dropdown-menu) */
body ul#gusta-nav-mobile-menu ul.gusta-dropdown-menu > li > a,
body ul#menu-dil-mobile-menu ul.gusta-dropdown-menu > li > a,
body ul.gusta-navigation ul.gusta-dropdown-menu > li > a{
  padding-top: .50em !important;
  padding-bottom: .50em !important;
  line-height: 1.2 !important;
}


/* ====================================
   Socialmedia Icons in Footer nebeneinander
==================================== */

/* Footer: Icons nebeneinander (social-inline sitzt auf jedem Icon) */
#gusta-footer .wpb_wrapper:has(> .ult-just-icon-wrapper.social-inline){
  display:flex!important;
  align-items:center!important;
  gap:15px!important;
}

#gusta-footer .ult-just-icon-wrapper.social-inline{
  margin:0!important;
  display:inline-flex!important;
}

#gusta-footer .ult-just-icon-wrapper.social-inline img.img-icon{
  width:50px!important;
  height:50px!important;
  max-width:none!important;
  display:block!important;
}


/* ===========================================
   FIX: Sticky immer über Footer (Betheme Custom Sections)
=========================================== */

/* Sticky-Section ganz nach vorne */
#gusta-sticky{
  position: relative !important;
  z-index: 2147483647 !important;
}

/* Dein vertikales Menü */
.verticalsticky{
  position: fixed !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2147483647 !important;
}

.verticalsticky ul.gusta-navigation{
  display: flex !important;
  flex-direction: column-reverse !important;
  margin: 0 !important;
  padding: 0 !important;
}
.verticalsticky ul.gusta-navigation > li{ list-style: none !important; }
.verticalsticky ul.gusta-navigation > li > a{
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  transform: rotate(180deg) !important;
  display: inline-block !important;
}
.verticalsticky ul.gusta-navigation,
.verticalsticky ul.gusta-navigation > li,
.verticalsticky ul.gusta-navigation > li > a{
  padding: 0 !important;
  margin: 0 !important;
}

/* Footer darunter halten (dein Footer ist #gusta-footer) */
#gusta-footer{
  position: relative !important;
  z-index: 1 !important;
}

/* Optional: auf Mobile ausblenden */
@media (max-width: 991px){
  .verticalsticky{ display:none !important; }
}


/* ====================================
   Schrift groessen
==================================== */

/*p Schrift groesse*/
p {
  font-size: clamp(0.9rem, 1.0vw, 1.5rem); /* kleinste grösse 1rem, maximal 1.5rem */
  line-height: 1.5;                    /* Einheitliche Zeilenhöhe */
  font-family: 'Metropolis-Medium' !important;
  letter-spacing: -0.02em;             /* Buchstabenabstand */
}

/*p Schrift groesse logoclaim*/
.p-logoclaim-schrift p {
  font-size: clamp(0.6rem, 0.8vw, 0.8rem) !important;
  line-height: 1.2 !important;
  font-family: 'Metropolis-Medium' !important;
  letter-spacing: -0.02em !important;
}

/* P Variante Projekte */
p.p-custom-font-projekte,
p.p-custom-font-projekte > span.ss-element-item,
p.p-custom-font-projekte :is(a, span, strong, em){
  font-size: clamp(0.9rem, 1.0vw, 1.5rem) !important;
  line-height: 1.5 !important;
  font-family: "Metropolis-Regular", Arial, sans-serif !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

/*p variante Publikationen*/
body .gusta-post-meta:has(p.p-custom-font-publikationen) :is(p, a, span, strong, em, li){
  font-size: clamp(0.9rem, 0.9vw, 0.9rem) !important;
  line-height: 1.2 !important;
  font-family: "Metropolis-Regular", Arial, sans-serif !important;
  letter-spacing: -0.01em !important;
}

/* p-Variante für News-Titel (Carddesign / Custom Field) */
.p-custom-font-news-titel,
.p-custom-font-news-titel *{
  font-size: clamp(1rem, 1.3vw, 1.3rem) !important;
  line-height: 1.2 !important;
  font-family: "Metropolis-Bold", Arial, sans-serif !important;
  letter-spacing: -0.02em !important;
}

/* p-Variante für News-Untertitel (Carddesign / Custom Field) */
.p-custom-font-news-untertitel,
.p-custom-font-news-untertitel *{
  font-size: clamp(1rem, 1vw, 1rem) !important;
  line-height: 1.3 !important;
  font-family: "Metropolis-Regular", Arial, sans-serif !important;
  letter-spacing: -0.02em !important;
}

/* p-Variante für News-Inhalt (ACF WYSIWYG / Ausgabe) */
body .gusta-post-meta p.p-custom-font-news-inhalt,
body .gusta-post-meta p.p-custom-font-news-inhalt ~ p,
body .gusta-post-meta p.p-custom-font-news-inhalt ~ :is(ul,ol,blockquote){
  font-size: clamp(0.9rem, 1vw, 1.5rem) !important;
  line-height: 1.5 !important;
  font-family: "Metropolis-Medium", Arial, sans-serif !important;
  letter-spacing: -0.02em !important;
}

/* Absatz-Abstände wieder herstellen (überschreibt dein margin:0 Kill) */
body .gusta-post-meta p.p-custom-font-news-inhalt,
body .gusta-post-meta p.p-custom-font-news-inhalt ~ p{
  margin: 0 0 1em 0 !important;
}

/* =========================================
   Download-Link (JS erzeugt <a class="acf-download ...">)
   -> bekommt dieselbe Typo wie News-Inhalt
========================================= */
#Download a.acf-download{color:#003300!important;font-family:"Metropolis-Bold",Arial,sans-serif!important;font-size:clamp(.9rem,1vw,1.5rem)!important;line-height:1.5!important;letter-spacing:-.02em!important;text-decoration:none!important}
#Download a.acf-download span.ss-element-item{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.18em}
#Download a.acf-download:hover span.ss-element-item{text-decoration-color:currentColor}
#Download .wpb_wrapper a[href^="http"]:not(.acf-download){display:none!important}


/* H1 Schriftgröße */
h1 {
  font-size: clamp(1.5rem, 2.6vw, 2.6rem);
  line-height: 1.1;
  font-family: 'Metropolis-Bold', Arial, sans-serif !important;
  letter-spacing: -0.03em; /* Buchstabenabstand */
}

/* Unter 991px: H1 doppelt so klein (ca. 50%) */
@media (max-width: 991px) {
  h1{
    font-size: clamp(1.5rem, 2.0vw, 2.0rem) !important;
  }
}

/* H1 Custom */
h1.h1-custom-font,
.h1-custom-font h1{
  font-size: clamp(1.0rem, 1.5vw, 1.5rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  color: #003300 !important;
}

/* Wrapper (enthält beide Zeilen) -> Standard: Medium */
h1.h1-custom-font .fade,
.h1-custom-font h1 .fade{
  font-family: 'Metropolis-Medium', Arial, sans-serif !important;
}

/* Erste Zeile (inneres span) -> Bold + grün */
h1.h1-custom-font .fade > span:first-child,
.h1-custom-font h1 .fade > span:first-child{
  font-family: 'Metropolis-Medium', Arial, sans-serif !important;
  color: #12A15D !important;
}

/* Unter 991px */
@media (max-width: 991px){
  h1.h1-custom-font,
  .h1-custom-font h1{
    font-size: clamp(1.0rem, 1.0vw, 1.0rem) !important;
  }
}


/* H1 Variante Projekte */
h1.h1-custom-font-projekte,
h1.h1-custom-font-projekte > span.ss-element-item,
h1.h1-custom-font-projekte :is(a, span, strong, em){
  font-size: clamp(1.5rem, 2vw, 2rem) !important;
  line-height: 1.2 !important;
  font-family: "Metropolis-Bold", Arial, sans-serif !important;
  letter-spacing: -0.03em !important;
  color: #12A15D !important;
  margin: 0 !important;
}

/* h1 Variante News */
h1.h1-custom-font-news,
h1.h1-custom-font-news > span.ss-element-item,
h1.h1-custom-font-news :is(a, span, strong, em){
  font-size: clamp(1.5rem, 2.3vw, 2.3rem) !important;
  line-height: 1.1 !important;
  font-family: "Metropolis-Bold", Arial, sans-serif !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

/* Unter 991px: Schriftgröße kleiner */
@media (max-width: 991px){
  h1.h1-custom-font-news,
  h1.h1-custom-font-news > span.ss-element-item,
  h1.h1-custom-font-news :is(a, span, strong, em){
    font-size: clamp(1.15rem, 1.15vw, 1.15rem) !important;
  }
}

/*H2 Schrift groesse*/
h2 {
  font-size: clamp(1.5rem, 2.0vw, 2.0rem);
  line-height: 1.1;
  font-family: 'Metropolis-Bold', Arial, sans-serif !important;
  letter-spacing: -0.03em; /* Buchstabenabstand */
}

h2.h2-custom-font,
.h2-custom-font h2{
  font-size: clamp(2.5rem, 3.6vw, 3.6rem);
  line-height: 1.1;
  font-family: 'Metropolis-Bold', Arial, sans-serif !important;
  letter-spacing: -0.03em;
  color: #003300 !important;
}

/* Unter 991px */
@media (max-width: 991px){
  h2.h2-custom-font,
  .h2-custom-font h2{
  font-size: clamp(1.5rem, 2.6vw, 2.6rem) !important;
  }
}


/* H2 Variante Zitat */
.h2-custom-font-zitat h2 {
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  line-height: 1.1;
  font-family: 'Metropolis-Bold', Arial, sans-serif !important;
  letter-spacing: -0.03em;
  color: #003300 !important;
}

/* H2 Variante Projekte */
h2.h2-custom-font-projekte,
h2.h2-custom-font-projekte > span.ss-element-item,
h2.h2-custom-font-projekte :is(a, span, strong, em){
  font-size: clamp(1.2rem, 1.5vw, 1.5rem) !important;
  line-height: 1.2 !important;
  font-family: "Metropolis-Medium", Arial, sans-serif !important;
  letter-spacing: -0.02em !important;
  color: #003300 !important;
  margin: 0 !important;
}

/* H2 Variante News */
h2.h2-custom-font-news,
h2.h2-custom-font-news > span.ss-element-item,
h2.h2-custom-font-news :is(a, span, strong, em){
  font-size: clamp(1rem, 1.8vw, 1.8rem) !important;
  line-height: 1.2 !important;
  font-family: "Metropolis-Medium", Arial, sans-serif !important;
  letter-spacing: -0.03em !important;
  margin: 0 !important;
}

/*H3 Schrift groesse*/
h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.6rem); /* Skaliert zwischen 120% und 400% */
  line-height: 1.1;
  font-family: 'Metropolis-Bold', Arial, sans-serif !important;
  letter-spacing: -0.02em; /* Buchstabenabstand */
}

.h3-custom-font h3 {
  font-size: clamp(2.5rem, 3.6vw, 3.6rem);
  line-height: 1.1;
  font-family: 'Metropolis-Bold', Arial, sans-serif !important;
  letter-spacing: -0.02em; /* Buchstabenabstand */
}

/* H3 Variante Projekte (robust) */
.h3-custom-font-projekte h3,
h3.h3-custom-font-projekte{
  font-size: clamp(1rem, 1vw, 1rem) !important;
  line-height: 1.1 !important;
  font-family: "Metropolis-Medium", Arial, sans-serif !important;
  letter-spacing: -0.00em !important;
  margin: 0 !important;
}

/* H3 Variante Publikationen */
h3.h3-custom-font-publikationen,
h3.h3-custom-font-publikationen :is(a, span, strong, em){
  font-size: clamp(1rem, 1vw, 1rem) !important;
  line-height: 1.2 !important;
  font-family: "Metropolis-Semibold", Arial, sans-serif !important;
  letter-spacing: -0.02em !important;
}

/* Abstände killen */
h3.h3-custom-font-publikationen{
  margin: 0 !important;
  padding: 0 !important;
}

/*H4 Schrift groesse*/
h4 {
  font-size: clamp(1.5rem, 1.5vw, 1.5rem); /* Skaliert zwischen 110% und 200% */
  line-height: 1.2;
  font-family: 'Metropolis-Bold', Arial, sans-serif !important;
  letter-spacing: -0.02em; /* Buchstabenabstand */
}

/* Unter 991px kleinere Schrift */
@media (max-width: 991px) {
  h4{
    font-size: clamp(1.2rem, 1.2vw, 1.2rem) !important;
  }
}

.h4-custom-font h4 {
  font-family: 'Metropolis-Semibold' !important;
  font-size: clamp(1.5rem, 2.0vw, 2.0rem);
  line-height: 1.2;
  letter-spacing: -0.02em; /* Buchstabenabstand */
}

/*H5 Schrift groesse*/
h5 {
  font-size: clamp(0.9rem, 0.9vw, 1.2rem);
  line-height: 1.3;
  font-family: 'Metropolis-Medium', Arial, sans-serif !important;
  letter-spacing: -0.02em; /* Buchstabenabstand */
}

.h5-custom-font h5 {
  font-family: 'Metropolis-Regular', Arial, sans-serif !important;
  font-size: clamp(1rem, 1.0vw, 1.0rem);
  line-height: 1.3;
  color: #000000 !important;
}

/*H6 Schrift groesse*/
h6 {
  font-size: clamp(0.8rem, 0.8vw, 0.8rem); /* Skaliert zwischen 80% und 100% */
  line-height: 1.2;
  font-family: 'Metropolis-Regular', Arial, sans-serif !important;
  letter-spacing: -0.01em; /* Buchstabenabstand */
}

/* H6 Variante News */
h6.h6-custom-font-news,
h6.h6-custom-font-news > span.ss-element-item,
h6.h6-custom-font-news :is(a, span, strong, em){
  font-size: clamp(0.5rem, 0.7vw, 0.7rem) !important;
  line-height: 1.2 !important;
  font-family: "Metropolis-Regular", Arial, sans-serif !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

/* Datum Variante News */
.datum-font-news,
.datum-font-news > span.ss-element-item,
.datum-font-news :is(a, span, strong, em){
  font-size: clamp(0.5rem, 0.7vw, 0.7rem) !important;
  line-height: 1.2 !important;
  font-family: "Metropolis-Medium", Arial, sans-serif !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}


/* ====================================
   Smart Section: Post Custom Fields + Buttons
   -> übernimmt Standard-p-Typo
   -> AUSGENOMMEN: Projekte + Publikationen + News-Titel + News-Untertitel
==================================== */

/* Post Custom Field */
body p.gusta-post-custom-field
  :not(.p-custom-font-projekte)
  :not(.p-custom-font-publikationen)
  :not(.p-custom-font-news-titel)
  :not(.p-custom-font-news-untertitel),
body p.gusta-post-custom-field
  :not(.p-custom-font-projekte)
  :not(.p-custom-font-publikationen)
  :not(.p-custom-font-news-titel)
  :not(.p-custom-font-news-untertitel)
  > span.ss-element-item,

/* Smart Section allgemein */
body p.ss-element
  :not(.p-custom-font-projekte)
  :not(.p-custom-font-publikationen)
  :not(.p-custom-font-news-titel)
  :not(.p-custom-font-news-untertitel),
body p.ss-element
  :not(.p-custom-font-projekte)
  :not(.p-custom-font-publikationen)
  :not(.p-custom-font-news-titel)
  :not(.p-custom-font-news-untertitel)
  > span.ss-element-item,

/* Buttons (SmartSection-Button-Modul, falls vorhanden) */
body .smartsec-btn p,
body .smartsec-btn p > span.ss-element-item{
  font-size: clamp(0.9rem, 1vw, 1.5rem) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
  font-family: "Metropolis-Medium", Arial, sans-serif !important;
  margin: 0 !important;
}


/* ====================================
   Alle "gusta-read-more-button" Buttons: Layout
==================================== */

/* Alle "gusta-read-more-button" Buttons: Layout (Icon + Text) vertikal mittig */
body a.gusta-read-more-button{
  display: inline-flex !important;
  align-items: center !important;
  gap: .45em !important; /* optional: Abstand Icon–Text */
}

/* Alle "gusta-read-more-button" Buttons: nur Text-Typo (Icon bleibt intakt) */
body a.gusta-read-more-button > span{
  font-size: clamp(0.6rem, 0.9vw, 0.9rem) !important;
  line-height: 1 !important; /* wichtig für saubere Vertikalzentrierung */
  letter-spacing: -0.01em !important;
  font-family: "Metropolis-Semibold", Arial, sans-serif !important;
}

/* Icon (optional, verhindert "hoch/tief" sitzen) */
body a.gusta-read-more-button > i{
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

/* Falls im Text mal <strong>/<em> etc. drin ist */
body a.gusta-read-more-button > span :is(strong, em, b){
  font: inherit !important;
}

/* Unter 991px: weniger Button-Höhe (oben/unten) */

@media (max-width: 1440px){

  /* Button-Box selbst: vertikales Padding reduzieren */
  body a.gusta-read-more-button{
    padding-top: .45em !important;
    padding-bottom: .45em !important;

    /* falls Betheme/VC eine Mindesthöhe setzt */
    min-height: 0 !important;
    height: auto !important;

    /* optional: etwas weniger Abstand Icon–Text */
    gap: .35em !important;
  }

  /* Text: kompakter (verhindert "hohe" Buttons durch Zeilenhöhe) */
  body a.gusta-read-more-button > span{
    line-height: 1 !important;
  }

  /* Icon: kompakt halten */
  body a.gusta-read-more-button > i{
    line-height: 1 !important;
  }
}


/* =========================================================
   NEWS Cards – FIXE Höhe (58vh) + Bild fix + Smart-Container füllt bis unten
   + Volltext (scrollt nur im Textbereich)
   + Abstand NUR zwischen den Cards (Reihen)
   + Reveal/Scroll Animation der Cards deaktivieren (nur hier)
   + FIX: Post Read More Button "News" IM BILD oben links (ohne Text zu killen)
   Scope: Post Listing -> Extra Class Name: news-equal-cards
========================================================= */

.news-equal-cards{
  --news-card-height: 58vh;     /* Gesamthöhe je Card */
  --news-image-height: 32vh;    /* Bildhöhe */
  --news-gap-y: 48px;           /* Abstand zwischen Cards (vertikal) */

  --news-badge-top: 12px;       /* Position Badge im Bild */
  --news-badge-left: 12px;
}

/* ---------------------------------------------------------
   0) Abstand zwischen Cards
--------------------------------------------------------- */
.news-equal-cards .gusta-grid > .column{
  margin-bottom: var(--news-gap-y) !important;
}
.news-equal-cards .gusta-grid > .column:last-child{
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------
   1) Columns strecken
--------------------------------------------------------- */
.news-equal-cards .gusta-grid{
  align-items: stretch !important;
}
.news-equal-cards .gusta-grid > .column{
  display: flex !important;
  flex-direction: column !important;
}

/* ---------------------------------------------------------
   2) Card = fixe Höhe + Flex-Column
--------------------------------------------------------- */
.news-equal-cards .post-listing-container.show-container{
  height: var(--news-card-height) !important;
  min-height: var(--news-card-height) !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important; /* verhindert "Auslaufen" in den Gap */

  /* Referenz für den absolut positionierten Badge */
  position: relative !important;
}

/* ---------------------------------------------------------
   3) Bildbereich fix (Cover)
--------------------------------------------------------- */
.news-equal-cards .post-listing-container.show-container
.ss-element.gusta-image-as-background{
  position: relative !important;
  width: 100% !important;

  height: var(--news-image-height) !important;
  min-height: var(--news-image-height) !important;
  max-height: var(--news-image-height) !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  overflow: hidden !important;
}

/* Klickfläche über dem Bild */
.news-equal-cards .post-listing-container.show-container
.ss-element.gusta-image-as-background > a.gusta-image-as-background{
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  z-index: 1 !important;
}

/* Falls IMG drin ist */
.news-equal-cards .post-listing-container.show-container
.ss-element.gusta-image-as-background img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ---------------------------------------------------------
   4) FIX: NUR den "News" Button pinnen (Meta & Text NICHT anfassen)
--------------------------------------------------------- */
.news-equal-cards .post-listing-container.show-container a.gusta-read-more-button,
.news-equal-cards .post-listing-container.show-container .gusta-read-more-button{
  position: absolute !important;
  top: var(--news-badge-top) !important;
  left: var(--news-badge-left) !important;

  z-index: 50 !important;

  margin: 0 !important;
  transform: none !important;

  /* wichtig: nicht "aus dem Layout verschwinden" */
  display: inline-flex !important;
  align-items: center !important;

  opacity: 1 !important;
  visibility: visible !important;
}

/* ---------------------------------------------------------
   5) Smart-Container füllt Rest
--------------------------------------------------------- */
.news-equal-cards .post-listing-container.show-container
.ss-element.gusta-container{
  height: calc(var(--news-card-height) - var(--news-image-height)) !important;
  min-height: calc(var(--news-card-height) - var(--news-image-height)) !important;

  flex: 1 1 auto !important;
  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: visible !important; /* Hintergrund/Hover bleibt ok */
}

/* ---------------------------------------------------------
   6) Volltext: nur Textbereich scrollt
--------------------------------------------------------- */
.news-equal-cards .post-listing-container.show-container
.ss-element.gusta-container .wpb_wrapper{
  flex: 1 1 auto !important;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Clamps/„…“ deaktivieren */
.news-equal-cards .post-listing-container.show-container
.p-custom-font-news-titel,
.news-equal-cards .post-listing-container.show-container
.p-custom-font-news-untertitel,
.news-equal-cards .post-listing-container.show-container
.post-excerpt,
.news-equal-cards .post-listing-container.show-container
.gusta-excerpt,
.news-equal-cards .post-listing-container.show-container
.excerpt{
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}

/* Datum Abstand minimal */
.news-equal-cards .post-listing-container.show-container .gusta-post-date,
.news-equal-cards .post-listing-container.show-container .post-date{
  margin-bottom: .35rem !important;
}

/* ---------------------------------------------------------
   7) VC Empty Space neutralisieren, falls er 32vh ist
--------------------------------------------------------- */
.news-equal-cards .post-listing-container.show-container
.vc_empty_space[style*="height: 32vh"]{
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------------------------------------------------------
   9) Reveal/Scroll-Animation im Listing deaktivieren (nur hier)
--------------------------------------------------------- */
.news-equal-cards .post-listing-container.show-container,
.news-equal-cards .post-listing-container.show-container *{
  animation: none !important;
  transition: none !important;
}

/* Falls das Theme per Transform/Opacity reinblendet */
.news-equal-cards .post-listing-container.show-container{
  transform: none !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------
   10) Mobile: keine fixe Gesamthöhe
--------------------------------------------------------- */
@media (max-width: 991px){
  .news-equal-cards{
    --news-gap-y: 28px;
    --news-badge-top: 10px;
    --news-badge-left: 10px;
  }

  .news-equal-cards .post-listing-container.show-container{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .news-equal-cards .post-listing-container.show-container
  .ss-element.gusta-container{
    height: auto !important;
    min-height: 0 !important;
  }

  .news-equal-cards .post-listing-container.show-container
  .ss-element.gusta-container .wpb_wrapper{
    overflow: visible !important;
  }
}


/* =========================================
   dil-file-button (PDF/Downloads)
========================================= */

/* Wrapper */
.vc_btn3-container.dil-file-button{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  border-radius:0!important;
}
.vc_btn3-container.dil-file-button.vc_btn3-inline{ display:block!important; }

/* Button-Link */
.vc_btn3-container.dil-file-button > a.vc_btn3,
.vc_btn3-container.dil-file-button > a.vc_general{
  display:flex!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;

  justify-content:flex-start!important;
  text-align:left!important;

  background:#E4F2D0!important;
  border:none!important;
  border-radius:0!important;

  font-family:'Metropolis-Semibold', Arial, sans-serif!important;
  font-size:clamp(0.9rem, 1vw, 2rem)!important;
  line-height:1.3!important;
  letter-spacing:-0.02em!important;
  color:#000!important;

  position:relative!important;
  padding-right:64px!important; /* Platz fürs Icon */

  flex-direction: column !important;     /* Text 2-zeilig */
  align-items: flex-start !important;
  gap: .25em !important;
}

/* Icon rechts */
.vc_btn3-container.dil-file-button > a.vc_btn3::after,
.vc_btn3-container.dil-file-button > a.vc_general::after{
  content:""!important;
  position:absolute!important;
  right:18px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:35px!important;
  height:35px!important;

  /* ✅ DEIN ICON */
  background:url("https://dil-ev.de/wp-content/uploads/2026/01/downloadicon.png") center/contain no-repeat!important;

  pointer-events:none!important;
}

/* Zweite Zeile (Dateityp + Größe) */
.vc_btn3-container.dil-file-button > a .file-meta{
  display:block!important;
  font-family:"Metropolis-Medium", Arial, sans-serif!important;
  font-size:0.7em!important;
  line-height:1.1!important; /* (0.5 war sehr eng) */
  letter-spacing:-0.01em!important;
  opacity:1!important;
}


/* =========================================
   NEWS-BULLET-POINTS
========================================= */

/* =========================================
   NEWS: Standard-ULs wie .bullet-points stylen
   -> ABER: NICHT die umgebauten Listen (.bp-list) anfassen
========================================= */

/* Scope: Inhalt im News-Block */
.gusta-post-meta.gusta-align-left ul:not(.bp-list){
  margin: 0 !important;
  padding-left: 1.3em !important;
  list-style: square outside !important;
  color: #003300 !important;
}

/* Theme-Bullets (Pseudo-Icons) ausschalten (nur News-ULs) */
.gusta-post-meta.gusta-align-left ul:not(.bp-list) li::before{
  content: none !important;
  display: none !important;
}

.gusta-post-meta.gusta-align-left ul:not(.bp-list) li{
  display: list-item !important;
  list-style: square outside !important;
  background: none !important;
  padding-left: 0 !important;

  font-size: clamp(1rem, 1vw, 2.3rem) !important;
  line-height: 1.4 !important;
  margin: .20em 0 .04em !important;
  letter-spacing: -0.2px !important;

  font-family: "Metropolis-Bold", Arial, sans-serif !important;
  color: inherit !important;
}

.gusta-post-meta.gusta-align-left ul:not(.bp-list) li::marker{
  font-size: 1.4em !important;
  color: currentColor !important;
}

.gusta-post-meta.gusta-align-left ul:not(.bp-list) a{
  color: inherit !important;
  text-decoration: underline;
}

.gusta-post-meta.gusta-align-left ul:not(.bp-list){
  display: flow-root !important;
  margin-bottom: 1em !important;
}

/* Erzwinge im News-Inhalt wieder echte Block-Absätze */
.gusta-post-meta.gusta-align-left p{
  display:block !important;
  width:100% !important;
  clear:both !important;
  float:none !important;
}


/* ================================================
   News-Download: sofort verstecken, nur bei Datei einblenden
=================================================== */
#Download{
  display: none !important;
}


/* =========================================
   NEWS Download: altes Material-Icon raus + PNG Icon rein
   Scope: #Download
========================================= */

/* das Theme/Iconfont-<i> ausblenden */
#Download a.acf-download i.vc-material.label-icon,
#Download a.acf-download i.label-icon{
  display:none !important;
}

/* Mehr Abstand zwischen Icon (gusta-label) und Text */
#Download a.acf-download{
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important; /* mehr Abstand Icon ↔ Text */
}

/* Fallback, falls irgendwas Flex überschreibt */
#Download a.acf-download > .gusta-label{
  margin-right: 0 !important;
}

/* PNG Icon vor den Text */
#Download a.acf-download .gusta-label::before{
  content:"" !important;
  display:inline-block !important;
  width:25px !important;
  height:25px !important;
  background:url("https://dil-ev.de/wp-content/uploads/2026/02/news-downloadicon.png") center/contain no-repeat !important;
  transform: translateY(5px);
}

/* Textfarbe für den Download-Link (Label + Dateiname) */
#Download a.acf-download,
#Download a.acf-download *{
  color: #12A15D !important;
  -webkit-text-fill-color: #12A15D !important;
}

/* optional: Hover gleich lassen (oder etwas dunkler, wenn du willst) */
#Download a.acf-download:hover,
#Download a.acf-download:hover *{
  color: #12A15D !important;
  -webkit-text-fill-color: #12A15D !important;
}


/* =========================================
   News-Link Ausgabe (nur Label-Link mit Icon)
   Scope: #Link
========================================= */

/* nur die Label-Zeile lassen (die hat Extra Class: acf-link) */
#Link p.gusta-post-custom-field:not(.acf-link){
  display: none !important;
}

/* Label-Zeile klickbar (dein JS macht innen <a class="acf-link-label"> ) */
#Link .acf-link-label{
  display: inline-flex !important;
  align-items: center !important;
  gap: .55em !important;
  text-decoration: none !important;

  font-weight: 700 !important; /* Bold */
}

/* Icon vor dem Label (PNG) */
#Link .acf-link-label::before{
  content: "" !important;
  display: inline-block !important;
  line-height: 1 !important;

  width: 25px !important;
  height: 25px !important;

  background: url("https://dil-ev.de/wp-content/uploads/2026/02/link-icon.png")
    center / contain no-repeat !important;

  transform: translateY(1px);
}

/* Hover */
#Link .acf-link-label:hover{
  text-decoration: underline !important;
  text-underline-offset: .18em !important;
}


/* ====================================
   Publikationen – Inhalte pro Zeile oben (top) ausrichten
==================================== */

/* 1) Der Flex-Wrapper: immer oben ausrichten */
.post-listing-container .gusta-post-meta{
  align-items: flex-start !important;
}

/* 2) Jede Spalte (Kinder von gusta-post-meta) als Column, Start oben */
.post-listing-container .gusta-post-meta > *{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* 3) WYSIWYG bringt <p> mit margins -> entfernen */
.post-listing-container .gusta-post-meta p{
  margin: 0 !important;
  padding: 0 !important;
}

/* 4) Falls der Titel als h3 kommt: auch dort margins weg */
.post-listing-container .gusta-post-meta h3{
  margin: 0 !important;
  padding: 0 !important;
}

/* 5) Publikationen – WYSIWYG <p class="p1"> nicht als Flex rendern */
.post-listing-container .gusta-post-meta p.p1{
  display: block !important;     /* statt flex */
  width: auto !important;
}

/* sicherstellen, dass inline bleibt */
.post-listing-container .gusta-post-meta p.p1 :is(strong, a, span, em){
  display: inline !important;
}


/* ====================================
   Paddings
==================================== */

/*padding-top-35px*/

.vc_column_container > .vc_column-inner  { padding-top: 0px !important; 
}

/*margin-bottom-15px*/

.wpb_wrapper > div { margin-bottom: 0px !important; 
}

/*Padding Menu*/

.paddingmenu {
  padding-top: clamp(1vh, 2vh, 1vh) !important;
  padding-bottom: clamp(0vh, 0vh, 0vh) !important;
  padding-left: clamp(4vw, 8vw, 8vw) !important;
  padding-right: clamp(4vw, 8vw, 8vw) !important;
}

/*Padding Mega Menu*/

.paddingmegamenu {
  padding-top: clamp(4vh, 3vh, 4vh) !important;
  padding-bottom: clamp(4vh, 3vh, 4vh) !important;
  padding-left: clamp(3vw, 3vw, 3vw) !important;
  padding-right: clamp(3vw, 3vw, 3vw) !important;
}

/*Padding Mega Menu Mobil*/

.padding-left-right-mobilmenu {
  padding-left: clamp(5vw, 6vw, 8vw) !important;
  padding-right: clamp(5vw, 6vw, 8vw) !important;
}

/*Globales - Padding Top-Bottom*/

.padding-top-first {
  padding-top: clamp(0vh, 2vw, 8vh) !important;
}

.padding-bottom-first {
  padding-bottom: clamp(0vh, 2vw, 2vh) !important;
}

@media (max-width: 991px) {
  .padding-top-first {
    padding-top: 2vh !important;
  }

  .padding-bottom-first {
    padding-bottom: 2vh !important;
  }
}

.padding-top {
  padding-top: clamp(2vh, 4vw, 6vh) !important;
}

@media (max-width: 991px) {
  .padding-top {
    padding-top: 2vh !important;
  }
}

.padding-top-less {
  padding-top: clamp(2vh, 2vw, 2vh) !important;
}

/* Unter 991px: Top-Padding fix auf 2vh */
@media (max-width: 991px) {
  .padding-top-less {
    padding-top: 2vh !important;
  }
}

.padding-bottom {
  padding-bottom: clamp(3vh, 3vw, 6vh) !important;
}

@media (max-width: 991px) {
  .padding-bottom {
    padding-bottom: 2vh !important;
  }
}

.padding-bottom-less {
  padding-bottom: clamp(2vh, 2vw, 2vh) !important;
}

@media (max-width: 991px) {
  .padding-bottom-less {
    padding-bottom: 2vh !important;
  }
}

/*Padding-left-right im Content*/

.padding-left-right-normal {
  padding-left: clamp(4vw, 12vw, 18vw) !important;
  padding-right: clamp(4vw, 12vw, 18vw) !important;
}

/* Unter 991px: fix auf 2vw links/rechts */
@media (max-width: 991px) {
  .padding-left-right-normal {
    padding-left: 2vw !important;
    padding-right: 2vw !important;
  }
}

.padding-left-right-more {
  padding-left: clamp(4vw, 22vw, 36vw) !important;
  padding-right: clamp(4vw, 22vw, 36vw) !important;
}

/* Unter 991px: fix auf 2vw links/rechts */
@media (max-width: 991px) {
  .padding-left-right-more {
    padding-left: 2vw !important;
    padding-right: 2vw !important;
  }
}

.padding-left-right-less {
  padding-left: clamp(4vw, 12vw, 16vw) !important;
  padding-right: clamp(4vw, 12vw, 16vw) !important;
}

@media (max-width: 991px) {
  .padding-left-right-less {
    padding-left: 2vw !important;
    padding-right: 2vw !important;
  }
}

.padding-left-right-less-bulletpoints {
  padding-left: clamp(4vw, 8vw, 12vw) !important;
  padding-right: clamp(4vw, 8vw, 12vw) !important;
}

@media (max-width: 991px) {
  .padding-left-right-less-bulletpoints {
    padding-left: 7vw !important;
    padding-right: 7vw !important;
  }
}

.padding-left-right-tiny {
  padding-left: clamp(4vw, 8vw, 8vw) !important;
  padding-right: clamp(4vw, 8vw, 8vw) !important;
}

/* Unter 991px: fix auf 2vw links/rechts */
@media (max-width: 991px) {
  .padding-left-right-tiny {
    padding-left: 2vw !important;
    padding-right: 2vw !important;
  }
}

.padding-left-right-tinypic {
  padding-left: clamp(4vw, 8vw, 8vw) !important;
  padding-right: clamp(4vw, 8vw, 8vw) !important;
}

/* Unter 991px: fix auf 2vw links/rechts */
@media (max-width: 991px) {
  .padding-left-right-tinypic {
    padding-left: 0vw !important;
    padding-right: 0vw !important;
  }
}

.padding-left-right-moretiny {
  padding-left: clamp(4vw, 4vw, 6vw) !important;
  padding-right: clamp(4vw, 4vw, 6vw) !important;
}

/* Unter 991px: fix auf 2vw links/rechts */
@media (max-width: 1300px) {
  .padding-left-right-moretiny {
    padding-left: 0vw !important;
    padding-right: 0vw !important;
  }
}

.padding-left-right-moretinymediahub {
  padding-left: clamp(4vw, 4vw, 6vw) !important;
  padding-right: clamp(4vw, 4vw, 6vw) !important;
}

/* Unter 991px: fix auf 2vw links/rechts */
@media (max-width: 1300px) {
  .padding-left-right-moretinymediahub {
    padding-left: 2vw !important;
    padding-right: 2vw !important;
  }
}

/*Padding überschrift*/

.uberschrift {
  padding-top: clamp(0vh, 0vh, 0vh) !important;
  padding-bottom: clamp(1vh, 2vh, 3vh) !important;
}

/* Unter 1200px: Bottom-Padding fix auf 2vh */
@media (max-width: 991px) {
  .uberschrift {
    padding-bottom: 1vh !important;
  }
}

/*Padding überschrift viel*/

.uberschriftviel {
  padding-top: clamp(0vh, 0vh, 0vh) !important;
  padding-bottom: clamp(2vh, 4vh, 6vh) !important;
}

@media screen and (max-width: 991px) {
.uberschriftviel {
    padding-bottom: 1vh !important;
  }
}

/*Padding überschrift less*/

.uberschrift-less {
  padding-top: clamp(0vh, 0vh, 0vh) !important;
  padding-bottom: clamp(0.5vh, 1vh, 1.5vh) !important;
}

/* Unter 991px: Bottom-Padding fix */
@media (max-width: 991px) {
  .uberschrift-less {
    padding-bottom: 1vh !important;
  }
}

/*Padding Innen*/

.paddinginnen-header {
  padding-left: clamp(2vw, 4vw, 6vw) !important;
  padding-right: clamp(2vw, 4vw, 6vw) !important;
  padding-top: clamp(8vh, 4vh, 12vh) !important;
  padding-bottom: clamp(16vh, 32vh, 42vh) !important;
}

.paddinginnen-more {
  padding-left: clamp(2vw, 4vw, 6vw) !important;
  padding-right: clamp(2vw, 4vw, 6vw) !important;
  padding-top: clamp(2vh, 6vh, 8vh) !important;
  padding-bottom: clamp(2vh, 6vh, 8vh) !important;
}

@media (max-width: 991px) {
  .paddinginnen-more {
    padding-top: 2vh !important;
    padding-bottom: 2vh !important;
  }
}

.paddinginnen-less {
  padding-left: clamp(2vw, 2vw, 4vw) !important;
  padding-right: clamp(2vw, 2vw, 4vw) !important;
  padding-top: clamp(2vh, 2vh, 4vh) !important;
  padding-bottom: clamp(2vh, 2vh, 4vh) !important;
}

.paddinginnen-tiny {
  padding-left: clamp(1vw, 1vw, 1vw) !important;
  padding-right: clamp(1vw, 1vw, 1vw) !important;
  padding-top: clamp(0.2vh, 2vh, 2vh) !important;
  padding-bottom: clamp(0.2vh, 2vh, 2vh) !important;
}

/*Padding Footer*/

.padding-top-footer {
  padding-top: clamp(2vh, 6vw, 8vh) !important;
}

.padding-bottom-footer {
  padding-bottom: clamp(0vh, 2vw, 2vh) !important;
}

.padding-left-right-footer {
  padding-left: clamp(4vw, 8vw, 8vw) !important;
  padding-right: clamp(4vw, 8vw, 8vw) !important;
}

/* Unter 991px: fix auf 2vw links/rechts */
@media (max-width: 991px) {
  .padding-left-right-footer {
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }
}


/* "no-paddinginnen" – alle Innenabstände neutralisieren
   Anwendung: class="paddinginnen-less no-paddinginnen" (oder -more / -tiny)
*/

/* Eigenes Padding der Utility-Klassen entfernen */
.paddinginnen-more.no-paddinginnen,
.paddinginnen-less.no-paddinginnen,
.paddinginnen-tiny.no-paddinginnen {
  padding: 0 !important;
}

/* WPBakery-Column-Innenabstände & Wrapper-Padding entfernen */
.paddinginnen-more.no-paddinginnen > .vc_column-inner,
.paddinginnen-less.no-paddinginnen > .vc_column-inner,
.paddinginnen-tiny.no-paddinginnen > .vc_column-inner,
.paddinginnen-more.no-paddinginnen .wpb_wrapper,
.paddinginnen-less.no-paddinginnen .wpb_wrapper,
.paddinginnen-tiny.no-paddinginnen .wpb_wrapper {
  padding: 0 !important;
}

/*Padding News Bildbanner*/

.padding-left-right-newsbildbanner {
  padding-left: clamp(4vw, 9vw, 12vw) !important;
  padding-right: clamp(4vw, 9vw, 12vw) !important;
}

/* Unter 991px: fix auf 4vw links/rechts */
@media (max-width: 991px) {
  .padding-left-right-newsbildbanner {
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }
}


/* ====================================
   hide-under show-under
==================================== */

/* Elemente unter 991px ausblenden:
   Klasse z.B. auf das Element/Column/Row setzen: .hide-under-1280 */
@media (max-width: 991px) {
  .hide-under-991 {
    display: none !important;
  }
}

/* Elemente unter 1280px ausblenden:
   Klasse z.B. auf das Element/Column/Row setzen: .hide-under-1280 */
@media (max-width: 1279px){
  .hide-under-1280{
    display: none !important;
  }
}

/* Elemente unter 1280px zeigen */
.show-from-1280{
  display: none !important;
}

/* Unter 1280px: anzeigen */
@media (max-width: 1279px){
  .show-from-1280{
    display: block !important;
  }
}


/* ====================================
   Abstand für Button-Reihen
==================================== */

/* Abstand für diese "Gusta"-Buttons – DIREKT auf die vorhandenen Klassen */
.wpb_wrapper .gusta-align-left.gusta-inline{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px 10px !important;  /* row-gap 5px, column-gap 10px */
}

/* Theme-Margins neutralisieren, damit gap wirkt */
.wpb_wrapper .gusta-align-left.gusta-inline > a{
  margin: 0 10px 5px 0 !important; /* rechts 10, unten 5 */
}



/* ====================================
   Stats – Restabstand über dem Icon entfernen
   Verursacher: .aio-icon-top
==================================== */

.stats-block.stats-top .aio-icon-top{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

/* falls das Icon selbst (oder sein Inneres) noch Luft erzeugt */
.stats-block.stats-top .aio-icon-top *{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* optional: falls zwischen Icon-Block und Zahl noch Abstand steckt */
.stats-block.stats-top .aio-icon-top + .stats,
.stats-block.stats-top .aio-icon-top + .stats-content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ====================================
   Responsive ausblendungen
==================================== */

/* Ausblendungen Typo-schriften links */
@media (max-width: 991px) {
  /* nur die, die als "Contain" Bild laufen – deine PNGs mit Schrift */
  .upb_row_bg[style*="background-size: contain"] {
    display: none !important;
  }
}

/* Ab 991px abwärts: Bild oben, Card/Text direkt DARUNTER,
   kein Overlap mehr in dieser Hero-Spalte */
@media (max-width: 991px) {

  /* 1) Bildbereich in der Spalte (Background der Spalte) – wie vorher */
  .hero-img-top-mobile > .vc_column-inner {
    position: relative;
    background-position: center top !important;
    background-size: cover !important;

    /* Höhe des Bildbereichs – bei Bedarf anpassen */
    padding-top: 0vw !important;
  }

  /* 2) Overlap der inneren Zeile abschalten:
        paddinginnen-more ist deine innere Row mit dem Content */
  .hero-img-top-mobile .paddinginnen-more {
    margin-top: 0 !important;
    position: static !important;
    transform: none !important;
  }

  /* 3) Falls das Overlap auf der Card-Spalte selbst hängt */
  .hero-img-top-mobile .hero-card-4-3-col,
  .hero-img-top-mobile .hero-card-4-3-col.vc_column_container,
  .hero-img-top-mobile .hero-card-4-3-col.vc_column_container > .vc_column-inner {
    margin-top: 0 !important;
    top: auto !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  /* 4) Columns in der inneren Zeile sicher vollbreit */
  .hero-img-top-mobile .paddinginnen-more > .wpb_column {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
}

/* MOBILE (unter 991px):
   "Leere" 8/4-Placeholder-Column entfernen (verursacht ~13px Abstand)
   -> blendet die 2. Spalte (col-sm-4) aus, wenn sie als Platzhalter
      hinter einer col-sm-8 kommt */

@media (max-width: 991px) {

  /* --- 1) 8/4 Placeholder-Spalte weg --- */
  .vc_row.wpb_row.vc_row-flex > .wpb_column.vc_col-sm-8 + .wpb_column.vc_col-sm-4 {
    display: none !important;
  }

  /* Erste Spalte dann auf volle Breite */
  .vc_row.wpb_row.vc_row-flex > .wpb_column.vc_col-sm-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* --- 2) 6/6: NUR die zweite Spalte entfernen, WENN sie leer ist --- */
  .vc_row.wpb_row.vc_row-flex
  > .wpb_column.vc_col-sm-6
  + .wpb_column.vc_col-sm-6
  > .vc_column-inner
  > .wpb_wrapper:empty {
    /* wir verstecken die Column, aber nur wenn wrapper wirklich leer ist */
  }

  .vc_row.wpb_row.vc_row-flex
  > .wpb_column.vc_col-sm-6
  + .wpb_column.vc_col-sm-6:has(> .vc_column-inner > .wpb_wrapper:empty) {
    display: none !important;
  }

  /* Erste 6er Spalte dann auf volle Breite */
  .vc_row.wpb_row.vc_row-flex
  > .wpb_column.vc_col-sm-6:has(+ .wpb_column.vc_col-sm-6:has(> .vc_column-inner > .wpb_wrapper:empty)) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Carousel: "Stück" Hintergrund unten entfernen
   (unter 1300px, greift auch unter 991px) */

@media (max-width: 1300px) {

  /* Row selbst: kein Bottom-Padding */
  .carousel-row.vc_row,
  .carousel-row.vc_row-fluid {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Slider-Spalte / Inner: kein Bottom-Padding */
  .carousel-row.vc_row > .wpb_column:nth-child(2) > .vc_column-inner,
  .carousel-row.vc_row-fluid > .wpb_column:nth-child(2) > .vc_column-inner {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Ult/Slick Wrapper: unten keine Luft */
  .carousel-row .ult-carousel-wrapper,
  .carousel-row .ult-carousel-wrapper > [class*="ult-carousel-"],
  .carousel-row .ult-carousel-wrapper .slick-slider,
  .carousel-row .ult-carousel-wrapper .slick-list,
  .carousel-row .ult-carousel-wrapper figure,
  .carousel-row .wpb_single_image,
  .carousel-row .vc_single_image-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Dots erzeugen oft die Rest-Luft */
  .carousel-row .slick-dots {
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* ====================================
   icon-title-heading - Grafiken jpg-png automatisch mit der Schriftgröße skalieren
==================================== */

/* ICON + HEADING (schlank) */
.icon-title-img{display:none!important}

/* leere Icon-Spalte entfernen + Text-Spalte vollbreit */
.vc_row.vc_inner:has(.icon-title-heading)>.wpb_column.vc_col-sm-2{display:none!important}
.vc_row.vc_inner:has(.icon-title-heading)>.wpb_column.vc_col-sm-10{flex:0 0 100%!important;max-width:100%!important;width:100%!important}

/* Heading + Icon links, mittig in der Höhe */
.icon-title-heading :is(h1,h2,h3,h4,h5,h6,p,.vc_custom_heading){
  display:flex;width:100%;
  align-items:center;justify-content:flex-start;
  gap:.0em;line-height:1.05
}

/* Icon links via ::before */
.icon-title-heading :is(h1,h2,h3,h4,h5,h6,p,.vc_custom_heading)::before{
  content:"";
  width:2.0em;height:2.0em;flex:0 0 auto;
  background:center/contain no-repeat url("https://dil-ev.de/wp-content/uploads/2025/12/slash.png")
}

/* Unter 991px: Icon ausblenden */
@media (max-width: 991px){
  .icon-title-heading :is(h1,h2,h3,h4,h5,h6,p,.vc_custom_heading)::before{
    content: none !important;
    display: none !important;
  }
}


/* ====================================
   mobile-three-cols: 3-Spalten-Layout
==================================== */

@media (max-width: 1199px) {
  .mobile-three-cols .wpb_column,
  .mobile-three-cols .vc_column_container {
    width: 33.333% !important;
    max-width: 33.333% !important;
    flex: 0 0 33.333% !important;
  }
}


/* ====================================
   hero-card-4-3-col: Dispay im Header Column
==================================== */

/* Grund-Layout für die Karten-Column
   Extra-Klasse auf der Column: hero-card-4-3-col */
.hero-card-4-3-col.vc_column_container > .vc_column-inner {
  position: relative;
  background: #ffffff;
  box-sizing: border-box;

  /* Schatten rundum */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);

  /* oben & Seiten */
  padding-top: 4vh !important;
  padding-right: 2vw !important;
  padding-left: 2vw !important;

  /* flexibles Padding unten (sichtbar ab 1200px aufwärts) */
  padding-bottom: 6vw !important;
}

/* Unter 1200px: Padding unten explizit nochmal setzen,
   damit WPBakery-Media-Queries nichts wegnehmen */
@media (max-width: 1199px) {
  .hero-card-4-3-col.vc_column_container > .vc_column-inner {
    padding-bottom: 6vw !important;  /* etwas größer für kleinere Screens */
    padding-top: 4vh !important;
    padding-right: 2vw !important;
    padding-left: 2vw !important;
  }
}

/* Optional: unter 991px nochmal anpassen, falls nötig */
@media (max-width: 991px) {
  .hero-card-4-3-col.vc_column_container > .vc_column-inner {
    padding-bottom: 6vw !important;
  }
}


/* ====================================
   DIL – Hero-Bereich + Band-Hintergrund
==================================== */

/* ------------------------------------------------
   1) Hero-Row mit Hintergrundbild
   - Extra Class dieser Row: padding-hero-bg
   - Bild links/rechts einziehen (Ultimate Addons Layer)
------------------------------------------------ */

.padding-hero-bg {
  position: relative;
}

/* Ultimate Addons Hintergrund-Layer in der Hero-Row */
.padding-hero-bg .upb_row_bg {
  left: clamp(4vw, 8vw, 12vw) !important;
  right: clamp(4vw, 8vw, 12vw) !important;
  width: auto !important;
  /* KEIN z-index hier setzen – Bild bleibt sichtbar */
}


/* ====================================
     Carousel-Row: Text links, Slider rechts
  - Row-Klasse: carousel-row
  - Desktop: zwei Spalten nebeneinander (Standard)
  - Unter 1300px: Text oben, Slider darunter
  - Carousel wie Content einrücken (clamp / 2vw)
==================================== */

.carousel-row {
  /* bewusst leer gelassen */
}

/* Unter 1300px: Spalten untereinander stapeln + Carousel einrücken */
@media (max-width: 1300px) {

  /* Row als Flex-Container mit Umbruch */
  .carousel-row.vc_row,
  .carousel-row.vc_row-fluid {
    display: flex !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
  }

  /* Standard-Float der Spalten deaktivieren */
  .carousel-row.vc_row > .wpb_column,
  .carousel-row.vc_row-fluid > .wpb_column {
    float: none !important;
  }

  /* Linke Spalte (Text) – zuerst, volle Breite */
  .carousel-row.vc_row > .wpb_column:nth-child(1),
  .carousel-row.vc_row-fluid > .wpb_column:nth-child(1) {
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Rechte Spalte (Slider/Bild) – darunter, volle Breite */
  .carousel-row.vc_row > .wpb_column:nth-child(2),
  .carousel-row.vc_row-fluid > .wpb_column:nth-child(2) {
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 30px;
  }

  /* Variablen (Tablet) */
  .carousel-row {
    --cr-pad: clamp(4vw, 8vw, 8vw);
    --cr-fix: 16px; /* Feintuning */
  }

  /* Ult-Carousel-Wrapper + Slick-Container auf Content-Breite zwingen (Tablet) */
  .carousel-row .ult-carousel-wrapper,
  .carousel-row .ult-carousel-wrapper > [class*="ult-carousel-"],
  .carousel-row .ult-carousel-wrapper .slick-slider {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;

    width: calc(100vw - (var(--cr-pad) * 2) - var(--cr-fix)) !important;
    max-width: calc(100vw - (var(--cr-pad) * 2) - var(--cr-fix)) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    left: auto !important;
    right: auto !important;
  }

  /* Slick “List” innerhalb wieder 100% (Track nicht anfassen!) */
  .carousel-row .ult-carousel-wrapper .slick-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Unter 991px: Seitenabstand per clamp (einfach & sauber) */
@media (max-width: 991px) {
  .carousel-row {
    --cr-pad: clamp(2vw, 3vw, 4vw) !important;
    --cr-fix: 0px !important;
  }
}


/* ====================================
   Weißer "Cut" oben und unten in einer Section
   Klasse an die VC-Row hängen: section-cut-white
==================================== */

.section-cut-white {
  position: relative;
  overflow: hidden; /* damit nichts übersteht */
}

/* Inhalt über den Cuts anzeigen */
.section-cut-white > * {
  position: relative;
  z-index: 1;
}

/* die beiden weißen Flächen */
.section-cut-white::before,
.section-cut-white::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(15px, 3vh, 30px); /* Höhe des "Cuts" – nach Geschmack anpassen */
  background: #ffffff;
  z-index: 0;
  pointer-events: none;
}

.section-cut-white::before {
  top: 0;      /* oberer Cut */
}

.section-cut-white::after {
  bottom: 0;   /* unterer Cut */
}

@media (max-width: 991px) {
  .section-cut-white::before,
  .section-cut-white::after {
    display: none !important;
  }
}


/* ====================================
  DIL – Weißer Block mit Cut rechts
  Cut unter 1300px entfernen
==================================== */

/* Desktop / Basis */
.white-cut-right,
.carousel-white-cut-right {
  position: relative;
  background-color: transparent !important;
  background-image: linear-gradient(
    to right,
    #ECF0EE 0,
    #ECF0EE calc(100% - 20vw),
    #ffffff calc(100% - 20vw),
    #ffffff 100%
  ) !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Sicherheit: keine weißen Hintergründe in den Columns selbst */
.white-cut-right .vc_column-inner,
.carousel-white-cut-right .vc_column-inner {
  background-color: transparent !important;
}

/* Unter 1300px: Cut deaktivieren (volle Fläche einfarbig) */
@media (max-width: 1299px) {
  .white-cut-right,
  .carousel-white-cut-right {
    background-image: none !important;
    background-color: #ECF0EE !important; /* volle Fläche ohne Cut */
  }
}

/* ====================================
  DIL – Grüner Block mit Cut rechts
  Cut unter 1300px entfernen
==================================== */

/* Desktop / Basis */
.white-cut-right-green,
.carousel-white-cut-right-green {
  position: relative;
  background-color: transparent !important;
  background-image: linear-gradient(
    to right,
    #E4F2D0 0,
    #E4F2D0 calc(100% - 20vw),
    #ffffff calc(100% - 20vw),
    #ffffff 100%
  ) !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Sicherheit: keine Hintergründe in den Columns selbst */
.white-cut-right-green .vc_column-inner,
.carousel-white-cut-right-green .vc_column-inner {
  background-color: transparent !important;
}

/* Unter 1300px: Cut deaktivieren (volle Fläche einfarbig) */
@media (max-width: 1299px) {
  .white-cut-right-green,
  .carousel-white-cut-right-green {
    background-image: none !important;
    background-color: #E4F2D0 !important; /* volle Fläche ohne Cut */
  }
}


/* ====================================
  DIL – Weißer Block mit Cut links
  Cut unter 1300px entfernen
==================================== */

/* Desktop / Basis */
.white-cut-left,
.carousel-white-cut-left {
  position: relative;
  background-color: transparent !important;
  background-image: linear-gradient(
    to right,
    #ffffff 0,
    #ffffff 20vw,
    #ECF0EE 20vw,
    #ECF0EE 100%
  ) !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Sicherheit: keine weißen Hintergründe in den Columns selbst */
.white-cut-left .vc_column-inner,
.carousel-white-cut-left .vc_column-inner {
  background-color: transparent !important;
}

/* Unter 1300px: Cut deaktivieren (volle Fläche einfarbig) */
@media (max-width: 1299px) {
  .white-cut-left,
  .carousel-white-cut-left {
    background-image: none !important;
    background-color: #ECF0EE !important;
  }
}


/* ====================================
   Elemte anpinnen oben links
==================================== */

.pinned {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;
	padding: 0vw 0vw;
  margin: 0;
}


/* ====================================
   Verschiebt Buttom nach unten im Layout
==================================== */

/* Spalte mit Button am Fuß */
.btn-bottom-col > .vc_column-inner {
  height: 100%;
}
.btn-bottom-col > .vc_column-inner > .wpb_wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Button-Container nach unten schieben */
.btn-bottom-col .vc_btn3-container {
  margin-top: auto;          /* schiebt den Button an den Spaltenboden */
  /* optional: */
  align-self: flex-start;     /* lässt ihn links ausrichten */
  /* padding-top: 1.25rem;    // kleiner Abstand nach oben, wenn gewünscht */
}


/* Spalte: Höhe durchreichen */
.btn-bottom-col-2 > .vc_column-inner { height: 100%; }

/* Der UA-Wrapper enthält Text + Button → als Flex-Spalte nutzen */
.btn-bottom-col-2 .ult_animation_holder {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Button innerhalb dieses Wrappers nach unten drücken */
.btn-bottom-col-2 .ult_animation_holder .vc_btn3-container {
  margin-top: auto;
  align-self: flex-start;  /* optional: links ausrichten */
}


/* ====================================
   Padding & Margin von WPBakery Column komplett entfernen
==================================== */

.no-spacing.wpb_column,
.no-spacing .vc_column-inner,
.no-spacing .wpb_wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 1199px) {
  .no-spacing.wpb_column,
  .no-spacing .vc_column-inner,
  .no-spacing .wpb_wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

.vc_column-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Unter 1200px: wieder etwas Luft oben und unten */
@media (max-width: 1199px) {
  .vc_column-inner {
    padding-top: 0vh !important;
    padding-bottom: 0vh !important;
  }

  /* Extra: letzter inner Container bekommt unten Abstand */
  .vc_column-inner:last-child {
    padding-bottom: 0vh !important;
  }
}

/*Margin-bottom für Smart-Sections */

/* exakt deine Karte – ID absichtlich doppelt für maximale Spezifität */
#gusta-post-41#gusta-post-41.post-listing-container.show-container{
  margin-bottom:0 !important;
}


/* ====================================
   Bilder breiter im Advamnced Carousel
==================================== */

/* Carousel hat die Extra-Klasse "no-flex" */
.no-flex .vc_row.vc_row-flex,
.no-flex .vc_row.vc_row-o-equal-height {
  display: block !important; /* Flex der Row abschalten */
}

/* Equal-height gibt auch den Spalten Flex – zurücksetzen */
.no-flex .vc_row.vc_row-o-equal-height > .vc_column_container,
.no-flex .vc_row.vc_row-flex > .vc_column_container,
.no-flex .vc_row.vc_row-flex > .vc_column_container > .vc_column-inner {
  display: block !important;
  flex: none !important;
  align-items: initial !important;
  justify-content: initial !important;
}

/* Falls Slick die Slides klont: gleiche Regel auch für Klone */
.no-flex .slick-slide .vc_row.vc_row-flex { 
  display: block !important; 
}


/* ====================================
   Entfernt abstand zwischen Content und Footer
==================================== */

.the_content_wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* ====================================
   actionlink
==================================== */

.actionlink {
 	box-sizing: border-box;
	padding: 50px;
	-webkit-transition: all 0.2s ease-in-out;
 	-moz-transition: all 0.2s ease-in-out;    
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;    
	transition: all 0.2s ease-in-out;
	margin: 0 auto;
}

.actionlink:hover {
	-ms-transform: scale(1.02); /* IE 9 */
	-webkit-transform: scale(1.02); /* Safari 3-8 */
	transform: scale(1.02); 
 	opacity: 1;
}


/* ====================================
   inline-element
==================================== */

.inline {
  display: inline !important;
}


/* ====================================
   WPML: nur EN / DE zeigen
==================================== */

/* Flags & lange Namen verbergen */
.wpml-ls .wpml-ls-flag,
.wpml-ls .wpml-ls-native,
.wpml-ls .wpml-ls-display { 
    display: none !important; 
}

/* Links kompakt nebeneinander */
.wpml-ls { 
    line-height: 1 !important; 
    margin-left: auto !important; /* drückt den Schalter nach rechts (falls Parent flex ist) */
}
.wpml-ls ul { 
    margin: 0 !important; 
    padding: 0 !important; 
    list-style: none !important; 
    display: flex !important; 
    gap: 10px !important; 
}
.wpml-ls li { 
    margin: 0 !important; 
    padding: 0 !important; 
}
.wpml-ls a { 
    text-decoration: none !important; 
    font-weight: 600 !important; 
    color: #000 !important; 
}

/* Codes einsetzen */
.wpml-ls-item-en a::before { content: "EN"; }
.wpml-ls-item-de a::before { content: "DE"; }

/* Aktive Sprache leicht abgedunkelt */
.wpml-ls-current-language a { 
    opacity: 0.6 !important; 
}

/* === Rechts ausrichten (nur das Element mit der Extra Class) === */
/* Setze die Extra Class "lang-switch" an das Element mit dem Shortcode */
.lang-switch .wpml-ls { 
    float: right !important;      /* erzwingt Rechtsbündigkeit ohne das Grid/menü zu verändern */
}
/* (kleiner Schutz, falls der Builder dem Element display:block gibt) */
.lang-switch { 
    display: block !important;
}


/* =========================================================
   .specific-container · Images skalieren
   - KEINE Default-Ausrichtung
   - vc_align_* bestimmt die Ausrichtung (auch in Flex-Umgebungen)
   ========================================================= */

/* Scale */
.specific-container img.vc_single_image-img{
  width: 25% !important;
  max-width: none !important;
  height: auto !important;
  margin: unset !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
}

/* Optional: w-25 etwas breiter */
.specific-container .w-40 img.vc_single_image-img{ width: 40% !important; }

/* Optional: Scale-Klasse */
.specific-container img.scale-with-padding{ transform: scale(0.5) !important; }

/* Align nur wenn im Builder gesetzt (funktioniert auch bei flex) */
.specific-container .wpb_single_image{ flex: 0 0 auto !important; width: auto !important; float: none !important; }
.specific-container .wpb_single_image.vc_align_left  { margin: 0 auto 0 0 !important; }
.specific-container .wpb_single_image.vc_align_center{ margin: 0 auto !important; }
.specific-container .wpb_single_image.vc_align_right { margin: 0 0 0 auto !important; }

/* custom-gap (wie gehabt) */
@media (min-width: 769px){
  .custom-gap .vc_row{ display:flex; flex-wrap:nowrap; }
  .custom-gap .vc_row .vc_column_container{ flex:1; }
  .custom-gap .vc_row .vc_column_container:nth-child(2){
    margin-left: clamp(4vw, 6vw, 10vw) !important;
    border-left: none !important;
  }
}
@media (max-width: 768px){
  .custom-gap .vc_row{ display:block; }
  .custom-gap .vc_row .vc_column_container:nth-child(2){
    margin-left: 0 !important;
    border-left: none !important;
  }
}

/* Betheme Pseudo-Icons aus */
.specific-container .icon-right:before,
.specific-container .icon-right:after{
  content: none !important;
  display: none !important;
}


/* ===========================================
   Post Carousel Slider Overlay Home
   =========================================== */

.carousel-wrapper {
  position: absolute !important;
  top: 05% !important; /* Statt 50%, damit Text weiter oben */
  left: 5% !important;
  transform: translateY(50%) !important; /* kein vertikales Verschieben */
  z-index: 10 !important;
  width: auto !important;
  max-width: 700px !important;
  text-align: left !important;
  background: none !important;
  pointer-events: none !important;
}

.carousel-wrapper .wpb_wrapper {
  pointer-events: all !important;
  padding: 0 !important;
}

.carousel-wrapper p,
.carousel-wrapper div {
  text-align: left !important;
}

/* Mobil */

@media (max-width: 991px) {
  .carousel-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 2rem;
    margin-bottom: 2rem;
    z-index: auto;
    text-align: center !important;
  }

  .carousel-wrapper p,
  .carousel-wrapper div {
    text-align: center !important;
  }
}


/* ====================================
   Smart-Section-Slider Dots GLOBAL (SmartSection / Gusta)
==================================== */

:root{
  --dot-size: 12px;      /* 20px -> 13px = -35% */
  --dot-gap: 5px;
  --dot-bottom: 0px;     /* Abstand vom unteren Rand */
}

/* Bezugspunkt */
.gusta-post-carousel,
.owl-carousel{
  position: relative !important;
}

/* Dots-Leiste */
.gusta-post-carousel .owl-dots,
.owl-carousel .owl-dots{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;  /* nur X */
  bottom: var(--dot-bottom) !important;
  top: auto !important;

  display: flex !important;
  gap: var(--dot-gap) !important;

  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;

  z-index: 999999 !important;
}

/* Dot-Button (Theme überschreiben) */
.gusta-post-carousel .owl-dots button.owl-dot,
.owl-carousel .owl-dots button.owl-dot{
  width: var(--dot-size) !important;
  height: var(--dot-size) !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 999px !important;

  background: #ECF0EE !important;          /* inaktiv */
  background-color: #ECF0EE !important;

  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;

  transform: none !important;
  transition: background-color .25s ease, transform .25s ease;
}

/* Falls Owl/Theme den Punkt über <span> zeichnet */
.gusta-post-carousel .owl-dots button.owl-dot > span,
.owl-carousel .owl-dots button.owl-dot > span{
  width: var(--dot-size) !important;
  height: var(--dot-size) !important;

  border-radius: 999px !important;
  border: 0 !important;

  background: #ECF0EE !important;          /* inaktiv */
  background-color: #ECF0EE !important;

  box-shadow: none !important;
  display: block !important;
  opacity: 1 !important;
}

/* Active */
.gusta-post-carousel .owl-dots button.owl-dot.active,
.owl-carousel .owl-dots button.owl-dot.active{
  background: #12A15D !important;
  background-color: #12A15D !important;
}

.gusta-post-carousel .owl-dots button.owl-dot.active > span,
.owl-carousel .owl-dots button.owl-dot.active > span{
  background: #12A15D !important;
  background-color: #12A15D !important;
}

/* Pseudo-Elemente aus */
.gusta-post-carousel .owl-dots button.owl-dot::before,
.gusta-post-carousel .owl-dots button.owl-dot::after,
.owl-carousel .owl-dots button.owl-dot::before,
.owl-carousel .owl-dots button.owl-dot::after{
  content: none !important;
  display: none !important;
}

/* Mobile optional minimal anpassen */
@media (max-width: 991px){
  :root{
    --dot-bottom: 8px;
  }
}


/* ===========================================
   Carousel Pfeile custom – weiter innen & kleiner
   =========================================== */

/* Wrapper vorbereiten */
.ult-carousel-wrapper {
    position: relative !important;
}

/* Gemeinsames Styling für beide Pfeile */
.slick-prev.slick-arrow,
.slick-next.slick-arrow {
    display: flex !important;
    justify-content: center;
    align-items: center;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%);
    z-index: 99;

    /* 25% kleiner als Original */
    width: clamp(30px, 4vw, 55px) !important;
    height: clamp(30px, 4vw, 55px) !important;

    background-color: white !important;
    border-radius: 0px !important;
    border: none !important;

    background-repeat: no-repeat !important;
    background-size: 60% !important;
    background-position: center !important;

    font-size: 0 !important;
    transition: background-color 0.3s ease, background-image 0.3s ease;
}

/* Linker Pfeil – weiter rein */
.slick-prev.slick-arrow {
    left: 25px !important; /* vorher 10px */
    background-image: url('https://dil-ev.de/wp-content/uploads/2025/10/pfeil-links-black.png') !important;
}

/* Rechter Pfeil – weiter rein */
.slick-next.slick-arrow {
    right: 25px !important; /* vorher 10px */
    background-image: url('https://dil-ev.de/wp-content/uploads/2025/09/pfeil-rechts-black.png') !important;
}

/* 🖱️ Hover-Effekt */
.slick-prev.slick-arrow:hover {
    background-color: #2d2d2d !important;
    background-image: url('https://dil-ev.de/wp-content/uploads/2025/10/pfeil-links-white.png') !important;
}

.slick-next.slick-arrow:hover {
    background-color: #2d2d2d !important;
    background-image: url('https://dil-ev.de/wp-content/uploads/2025/09/pfeil-rechts-white.png') !important;
}

/* ❌ Standard Slick-Pfeile ausblenden */
.slick-arrow::before,
.slick-prev::before,
.slick-next::before {
    display: none !important;
    content: none !important;
}

/* 📱 Mobile Optimierung */
@media (max-width: 768px) {
  .slick-prev.slick-arrow,
  .slick-next.slick-arrow {
    width: clamp(20px, 5vw, 35px) !important;
    height: clamp(20px, 5vw, 35px) !important;
    left: 10px !important;
    right: 10px !important;
  }
}


/* ===========================================
   SmartSection Post Carousel (OWL) – Pfeile mittig links/rechts
   Scope: .gusta-post-carousel
=========================================== */

/* Bezugspunkt für Overlay */
.gusta-post-carousel{ position: relative !important; }

/* Nav über den Slider legen */
.gusta-post-carousel .owl-nav{
  position: absolute !important;
  inset: 0 !important;
  z-index: 999999 !important;
  pointer-events: none !important;
}

/* Buttons: responsive + weiß + PNG (überschreibt background:0 aus Theme) */
.gusta-post-carousel .owl-nav button.owl-prev,
.gusta-post-carousel .owl-nav button.owl-next{
  /* Button-Box responsive */
  width: clamp(28px, 3.2vw, 40px) !important;
  height: clamp(28px, 3.2vw, 40px) !important;

  position: absolute !important;
  top: 45% !important;
  transform: translateY(-45%) !important;

  border: 0 !important;
  border-radius: 0 !important;

  /* shorthand -> killt Theme background:0 */
  background: #fff center/ clamp(14px, 1.6vw, 22px) no-repeat !important;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: auto !important;
}

/* Links/Rechts */
.gusta-post-carousel .owl-nav button.owl-prev{
  left: 1vw !important;
  background-image: url("https://dil-ev.de/wp-content/uploads/2025/10/pfeil-links-black.png") !important;
}
.gusta-post-carousel .owl-nav button.owl-next{
  right: 1vw !important;
  background-image: url("https://dil-ev.de/wp-content/uploads/2025/09/pfeil-rechts-black.png") !important;
}

/* THEME-ICON-KÄSTCHEN endgültig weg */
.gusta-post-carousel .owl-nav button.owl-prev > i,
.gusta-post-carousel .owl-nav button.owl-next > i{
  display: none !important;
  background: transparent !important;
  background-color: transparent !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Spezialfall: Linker-rechter Pfeil braucht mehr Abstand nach innen
   Extra Class am Carousel: carousel-arrow-more-in */
.carousel-arrow-more-in .gusta-post-carousel .owl-nav button.owl-prev,
.carousel-arrow-more-in.gusta-post-carousel .owl-nav button.owl-prev{
  left: calc(15px + 1vw) !important;
}

/* Spezialfall: mehr Abstand nach innen – RECHTS (optional, falls du es auch so robust willst) */
.carousel-arrow-more-in .gusta-post-carousel .owl-nav button.owl-next,
.carousel-arrow-more-in.gusta-post-carousel .owl-nav button.owl-next{
  right: calc(15px + 1vw) !important;
}

/* Unter 991px: Pfeile ausblenden */
@media (max-width: 991px){
  .gusta-post-carousel .owl-nav{
    display: none !important;
  }
}


/* =================================================
   button-bottom - Button unten in einer Column (Klasse: button-bottom)
   ohne Content-Verschiebung + ohne Abschneiden
   ================================================= */

/* NICHT mehr mit height:100% arbeiten -> nur Flex + min-height */
.button-bottom .vc_column-inner{
  display:flex !important;
  flex-direction:column !important;
  overflow: visible !important;
}

/* Wrapper als Flex-Spalte, darf wachsen */
.button-bottom .vc_column-inner > .wpb_wrapper{
  position: relative !important;          /* Bezug für den Button */
  display:flex !important;
  flex-direction:column !important;
  flex: 1 1 auto !important;
  min-height: 100% !important;            /* nutzt Equal Height der Row */
  overflow: visible !important;

  padding-bottom: 70px !important;        /* Platz für Button (60–90px) */
}

/* Button wirklich unten platzieren (relativ zum wpb_wrapper) */
.button-bottom a.gusta-read-more-button{
  position: absolute !important;
  left: 0 !important;                     /* oder zentrieren, siehe unten */
  bottom: 0 !important;
  margin: 0 !important;
}

/* Spacer UNTER dem Button entfernen (sonst hängt er hoch) */
.button-bottom .vc_empty_space:last-child,
.button-bottom .vc_empty_space:last-child .vc_empty_space_inner{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* (Optional) falls Theme Bottom-Margins reinbringt */
.button-bottom .wpb_wrapper > *:last-child{
  margin-bottom: 0 !important;
}

/* Button 2vh Abstand zum unteren Rand */
.button-bottom a.gusta-read-more-button{
  bottom: 2vh !important;
}

/* Platz nach unten anpassen, damit der Button nicht in Content reinragt */
.button-bottom .vc_column-inner > .wpb_wrapper{
  padding-bottom: calc(70px + 2vh) !important; /* 70px ggf. dein Button-Block */
}


/* ====================================
   H4 in "Info Box" auf echte H3-Skala zwingen
==================================== */

/* === Info-Box: Icon kleiner + vertikal zur H4 zentriert + +10px Gap === */
:root{
  /* Typo */
  --h4: clamp(1.3rem, 1.3vw, 1.3rem);
  --h4-line: 2.0;
  --h4-track: -0.5px;

  --p: clamp(1rem, 1vw, 1.0rem);
  --p-line: 1.2;

  /* H4-Font */
  --font: 'Metropolis-Bold', Arial, sans-serif;
  /* P-Font separat */
  --font-p: 'Metropolis-Regular', Arial, sans-serif;

  /* Icon + Abstände */
  --ib-icon-h: clamp(20px, 1.5vw, 50px);   /* Icon-Höhe */
  --ib-aspect: 1;                           /* Breite/Höhe – bei Bedarf z.B. 1.6 */
  --ib-gap: clamp(0px, 5vw - 10px, 10px);   /* responsiver Gap 0→10px */
  --icon-nudge: clamp(-5px, (480px - 100vw) / 40, 0px); /* -5px (Desktop) → 0px (mobil) */
  --ib-color: #161922;
}

/* H4 */
.aio-icon-box .aio-icon-header :is(h4, h4.aio-icon-title, .aio-icon-title.ult-responsive){
  font: 400 var(--h4)/var(--h4-line) var(--font) !important;
  letter-spacing: var(--h4-track) !important;
  margin: 0 !important;
}

/* Layout: Einzug = Iconbreite + responsiver Gap + feste +10px */
.aio-icon-box.default-icon{
  position: relative !important;
  padding-left: calc(var(--ib-icon-h) * var(--ib-aspect) + var(--ib-gap) + 10px) !important;
}

/* Icon-Wrapper: absolut, vertikal zur H4 zentriert */
.aio-icon-box.default-icon .aio-icon-default{
  position: absolute !important;
  left: 0;
  top: calc((var(--h4-line) * 1em - var(--ib-icon-h)) / 2 + var(--icon-nudge)) !important;
  width: calc(var(--ib-icon-h) * var(--ib-aspect)) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Bild: keine Verzerrung */
.aio-icon-box.default-icon img.img-icon{
  height: var(--ib-icon-h) !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
  margin: 0 !important;
}

/* Unterzeile: Farbe/Typo, kein zusätzlicher Einzug */
.aio-icon-component .aio-icon-box.default-icon .aio-icon-description{
  padding-left: 0 !important;
  margin-top: 0 !important;
  color: var(--ib-color) !important;
  opacity: 1 !important;
}

.aio-icon-box .aio-icon-description *{
  color: inherit !important;
  opacity: 1 !important;
}

/* p + li: Metropolis-Medium + Größe aus --p (1rem, 1vw, 1.5rem) */
.aio-icon-box .aio-icon-description :is(p,li){
  font: 400 var(--p)/var(--p-line) var(--font-p) !important;
}

.aio-icon-box .aio-icon-description ul{
  list-style: square !important;
}
.aio-icon-box .aio-icon-description li::marker{
  color: var(--ib-color) !important;
}

/* === Icon-Nudge stufig: mobil 0px, groß schrittweise höher === */
:root{ --icon-nudge: 0px; }                   /* < 768px → 0px */

@media (min-width: 768px){
  :root{ --icon-nudge: 0px; }                 /* 768–991px */
}
@media (min-width: 992px){
  :root{ --icon-nudge: 5px; }                 /* 992–1279px */
}
@media (min-width: 1280px){
  :root{ --icon-nudge: 5px; }                 /* 1280–1439px */
}
@media (min-width: 1440px){
  :root{ --icon-nudge: 10px; }                /* ≥ 1440px */
}

/* nutzt die Variable – belass deine bestehende Zeile so */
.aio-icon-box.default-icon .aio-icon-default{
  top: calc((var(--h4-line) * 1em - var(--ib-icon-h)) / 2 + var(--icon-nudge)) !important;
}

/* AIO: Restabstand killen, aber linken Einzug der Bullets beibehalten */
.aio-icon-box.default-icon .aio-icon-description :is(ul,ol){
  margin:0!important;
  padding-left:2.0em!important; /* Einzug für Bullets */
}
.aio-icon-box.default-icon .aio-icon-description li{
  margin:0 0 .35em 0!important
}
.aio-icon-box.default-icon .aio-icon-description li:last-child{
  margin-bottom:0!important
}


/* ====================================
   DIL – WPBakery Accordion Styling
==================================== */

/* 1) Alle Standard-Rahmen & Schatten (außer Headings) entfernen */
.vc_general.vc_tta.vc_tta-accordion,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panels-container,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panels,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-body {
  border: none !important;
  box-shadow: none !important;
}

/* 1b) Lila Hintergrund komplett entfernen – alles transparent */
.vc_general.vc_tta.vc_tta-accordion,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panels-container,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panels,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-heading,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title > a,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-body {
  background: transparent !important;
  background-color: transparent !important;
}

/* auch im aktiven Zustand kein Lila */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel.vc_active,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-heading,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-title > a {
  background: transparent !important;
  background-color: transparent !important;
}

/* 2) Basis-Typografie für Accordion-Titel */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title > a {
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  line-height: clamp(1.2, 1.3, 1.35);
  font-family: 'Metropolis-Semibold', Arial, sans-serif !important;
  letter-spacing: -0.01em;
  color: #003300 !important;
  text-decoration: none;
}

/* 3) Header-Layout: Text links, Icon rechts (Flexbox) */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title > a {
  display: flex !important;
  align-items: center;
  width: 100%;
  padding: 0.75rem 2.0rem 0.75rem 0; /* rechts Platz für Icon */
}

/* Linken Abstand im Accordion-Header komplett entfernen */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-heading,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title > a,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title > a .vc_tta-title-text {
  padding-left: 3px !important;
  margin-left: 0 !important;
}

/* 5) Plus-Icon rechts ALS BILD */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title .vc_tta-controls-icon {
  order: 2;
  margin-left: auto;
  float: none !important;
  position: relative !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;   /* Icon-Größe anpassen */
  height: 1.4rem;
  background-image: url('https://dil-ev.de/wp-content/uploads/2025/12/plus-icon.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  font-size: 0;   /* evtl. Font-Icon verstecken */

  /* leicht nach unten verschieben, damit es optisch zentriert wirkt */
  transform: translateY(1px);
}

/* Default-Theme-Linien des Icons komplett abschalten */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title .vc_tta-controls-icon::before,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title .vc_tta-controls-icon::after {
  content: none !important;
}

/* 6) Linie unter JEDEM Header via box-shadow (Standard-Zustand, geschlossen) */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-heading {
  border: none !important;
  box-shadow: inset 0 -3px 0 #003300 !important;
  background: transparent !important;
}

/* Beim letzten Element ebenfalls eine Linie anzeigen (wenn NICHT aktiv) */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel:last-child:not(.vc_active) .vc_tta-panel-heading {
  box-shadow: inset 0 -3px 0 #003300 !important;
}

/* WICHTIG: Linie beim aktiven (offenen) Panel ausblenden */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-heading {
  box-shadow: none !important;
}

/* 5b) Wenn Accordion offen ist: Plus -> Minus */
.vc_general.vc_tta.vc_tta-accordion
.vc_tta-panel.vc_active
.vc_tta-panel-title
.vc_tta-controls-icon{
  background-image: url('https://dil-ev.de/wp-content/uploads/2026/01/minus-icon.png') !important;
}


/* ====================================
   Bulletpoints im H4-Stil
   Klasse: .bulletpoints (auf <ul> ODER Wrapper legen)
==================================== */

.bulletpoints ul,
.bulletpoints {
  list-style: none;           /* Standard-Bullets aus */
  margin: 0;
  padding-left: 0;            /* wir regeln den Abstand selbst */
}

.bulletpoints li {
  position: relative;
  padding-left: 1.6em;        /* Platz für das Quadrat links */
  font-family: 'Metropolis-Regular', Arial, sans-serif;
  font-size: var(--h4);
  line-height: 1.3;
  letter-spacing: var(--h4-track);
  color: #003300;             /* Schriftfarbe */
}

/* Links im Bullet die gleiche Farbe geben */
.bulletpoints li a {
  color: inherit;
}

/* Custom-Square-Bullet */
.bulletpoints li::before {
  content: "";
  position: absolute;
  left: 0vw;
  top: 0.55em;
  transform: translateY(-50%);
  width: 0.55em;
  height: 0.55em;
  border-radius: 0px;         /* bleibt viereckig */
  background-color: #009447;  /* dein Grün */
}


/* ====================================
   Corner-mask-left – corner-mask-left-white
==================================== */

/* Row mit Masken-Ecke unten links */
.corner-mask-left,
.corner-mask-left-white {
  position: relative;
  overflow: hidden;
}

.corner-mask-left::before,
.corner-mask-left-white::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: clamp(4vw, 8vw, 8vw);   /* Standard-Abstand (z.B. andere Padding-Variante) */

  /* 50% von 1080x1080 = 540x540 */
  width: 540px;
  height: 540px;

  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 100%;   /* keine Verzerrung, voller Bereich */
  pointer-events: none;
}

/* Farbvarianten */
.corner-mask-left::before {
  background-image: url("https://dil-ev.de/wp-content/uploads/2025/12/corner-mask.png");
}

.corner-mask-left-white::before {
  background-image: url("https://dil-ev.de/wp-content/uploads/2025/12/corner-mask-white.png");
}

/* ====================================
   Variante mit EXTRA Abstand
   → wenn die Row zusätzlich .padding-left-right-normal hat
==================================== */

.padding-left-right-normal.corner-mask-left::before,
.padding-left-right-normal.corner-mask-left-white::before {
  left: clamp(4vw, 12vw, 18vw);   /* größerer Abstand passend zum Padding */
}

/* Optional: auf Mobile alle Masken ausblenden */
@media (max-width: 991px) {
  .corner-mask-left::before,
  .corner-mask-left-white::before {
    display: none;
  }
}


/* ====================================
   Corner-mask-topright – FIX (Maske an der echten Kartenkante)
   Klasse: corner-mask-topright (auf der Column)
==================================== */

.corner-mask-topright{
  /* außen NICHT clippen, sonst schneidest du dir wieder was ab */
  overflow: visible !important;
}

/* Das ist die "Karte"/Fläche bei WPBakery */
.corner-mask-topright > .vc_column-inner{
  position: relative !important;
  overflow: hidden !important;          /* Maske sauber in der Karte clippen */
}

/* Maske sitzt jetzt oben an der echten Kante der Karte */
.corner-mask-topright > .vc_column-inner::before{
  content: "";
  position: absolute;
  top: 0;                               /* <<< FIX oben */
  right: 0;                             /* <<< FIX rechts (in der Kartenkante) */

  width: 540px;
  height: 540px;

  background-image: url("https://dil-ev.de/wp-content/uploads/2026/01/corner-mask-topright.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 100% 100%;
  pointer-events: none;
}

/* Optional: auf Mobile ausblenden */
@media (max-width: 991px){
  .corner-mask-topright > .vc_column-inner::before{
    display: none;
  }
}


/* ====================================
   corner-mask-left-projekte
==================================== */

/* Klasse sitzt z.B. auf .wpb_single_image */
.wpb_single_image.corner-mask-left-projekte,
.wpb_single_image.corner-mask-left-projekte-white{
  position: relative;
}

/* Maske auf den eigentlichen Image-Wrapper legen */
.wpb_single_image.corner-mask-left-projekte .vc_single_image-wrapper,
.wpb_single_image.corner-mask-left-projekte-white .vc_single_image-wrapper{
  position: relative;
  overflow: hidden;
}

/* Pseudo-Element direkt am Wrapper -> exakt links unten im Bild */
.wpb_single_image.corner-mask-left-projekte .vc_single_image-wrapper::before,
.wpb_single_image.corner-mask-left-projekte-white .vc_single_image-wrapper::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;                 /* komplett links unten */
  width: 540px;
  height: 540px;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}

/* Bild unter die Maske */
.wpb_single_image.corner-mask-left-projekte .vc_single_image-wrapper img,
.wpb_single_image.corner-mask-left-projekte-white .vc_single_image-wrapper img{
  position: relative;
  z-index: 1;
  display: block;
}

/* Farbvarianten */
.wpb_single_image.corner-mask-left-projekte .vc_single_image-wrapper::before{
  background-image: url("https://dil-ev.de/wp-content/uploads/2025/12/corner-mask-white.png");
}

.wpb_single_image.corner-mask-left-projekte-white .vc_single_image-wrapper::before{
  background-image: url("https://dil-ev.de/wp-content/uploads/2025/12/corner-mask-white.png");
}

/* Optional: Mobile ausblenden */
@media (max-width: 991px){
  .wpb_single_image.corner-mask-left-projekte .vc_single_image-wrapper::before,
  .wpb_single_image.corner-mask-left-projekte-white .vc_single_image-wrapper::before{
    display: none;
  }
}


/* ====================================
   Corner-mask-left – FLUSH Variante (wirklich ganz links am Element)
   Neue Klassen: corner-mask-left-edge / corner-mask-left-white-edge
==================================== */

.corner-mask-left-edge,
.corner-mask-left-white-edge{
  position: relative;
  overflow: hidden;

  /* optional steuerbar */
  --cm-size: 540px;     /* Masken-Größe */
  --cm-shift-x: 0px;    /* Feintuning, z.B. -2px wenn du sie minimal rausziehen willst */
}

.corner-mask-left-edge::before,
.corner-mask-left-white-edge::before{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;                           /* <- Fix: kein vw/clamp, wirklich links */
  width: var(--cm-size);
  height: var(--cm-size);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 100%;
  pointer-events: none;
  transform: translateX(var(--cm-shift-x));
}

/* Farbvarianten */
.corner-mask-left-edge::before{
  background-image: url("https://dil-ev.de/wp-content/uploads/2025/12/corner-mask.png");
}

.corner-mask-left-white-edge::before{
  background-image: url("https://dil-ev.de/wp-content/uploads/2025/12/corner-mask-white.png");
}

/* Optional: auf Mobile ausblenden */
@media (max-width: 991px){
  .corner-mask-left-edge::before,
  .corner-mask-left-white-edge::before{
    display: none;
  }
}


/* =========================================
   JOBS-BULLET-POINTS
========================================= */

/* =========================================
   STELLENANZEIGEN – Bullet-Listen (eindeutig)
   - .job-bullet-points  → eckige Marker (::marker)
   - .job-bullet-pfeil   → Pfeil-Icon als Background
   - .job-bullet-check   → Check-Icon als Background
========================================= */

/* ===== job-bullet-points (UL trägt die Klasse) ===== */
ul.bp-list.job-bullet-points{
  --bp-color:#161922; --lh:1.4;
  margin:0!important; padding-left:1.3em!important;
  list-style:square outside!important;
  color:var(--bp-color)!important;
}
ul.bp-list.job-bullet-points li{
  display:list-item!important;
  font-size:clamp(1rem,1vw,2.3rem)!important;
  line-height:var(--lh)!important;
  margin:.20em 0 .04em!important;
  letter-spacing:-.2px;
  font-family:'Metropolis-medium',Arial,sans-serif!important;
  color:inherit!important;
}
ul.bp-list.job-bullet-points li::marker{ font-size:1.4em!important; color:currentColor!important; }

/* ===== job-bullet-pfeil ===== */
ul.bp-list.job-bullet-pfeil{
  --bp-color:#161922; --lh:1.8;
  --h:15px; --ar:1.315789; --gap:10px; --offset:-2px;
  margin:0!important; padding:0!important; list-style:none!important;
  color:var(--bp-color)!important;
}
ul.bp-list.job-bullet-pfeil li{
  list-style:none!important;
  font:normal clamp(1rem,1vw,2.3rem)/var(--lh) 'Metropolis-medium',Arial,sans-serif!important;
  letter-spacing:-.2px; color:inherit!important;
  margin:.20em 0 .04em!important;
  padding-left:calc(var(--h)*var(--ar) + var(--gap))!important;
  background:url("https://dil-ev.de/wp-content/uploads/2025/09/pfeil-rechts-black.png")
    no-repeat left calc(((var(--lh)*1em - var(--h))/2) + var(--offset)) / calc(var(--h)*var(--ar)) var(--h) !important;
}

/* ===== job-bullet-check ===== */
ul.bp-list.job-bullet-check{
  --bp-color:#fff; --lh:1.4;
  --h:20px; --ar:1; --gap:10px; --offset:0px;
  margin:0!important; padding:0!important; list-style:none!important;
  color:var(--bp-color)!important;
}
ul.bp-list.job-bullet-check li{
  list-style:none!important; color:inherit!important;
  font:normal clamp(1rem,1vw,2.3rem)/var(--lh) 'Metropolis-semibold',Arial,sans-serif!important;
  letter-spacing:-.2px; margin:.20em 0 .04em!important;
  padding-left:calc(var(--h)*var(--ar) + var(--gap))!important;
  background:url("https://dil-ev.de/wp-content/uploads/2026/01/check-icon-white.png")
    no-repeat left calc(((var(--lh)*1em - var(--h))/2) + var(--offset)) / calc(var(--h)*var(--ar)) var(--h) !important;
}


/* ====================================
   PROJEKTE-BULLET-POINTS
==================================== */

/* ====================================
   Projekte Bulletpoints wie p-custom-font-projekte
   Greift NUR auf Single-Projekte (CPT: projekte)
==================================== */

/* Projekte-Bullets (Sibling-Struktur) */
p.bullet-points + ul.bp-list{
  margin: 0 !important;
  padding-left: 1.1em !important;

  color: #003300 !important;                 /* <<< Farbe */
  list-style-type: square !important;        /* <<< viereckig */
  list-style-position: outside !important;
}

/* Typo + Farbe */
p.bullet-points + ul.bp-list li{
  font-size: clamp(0.9rem, 1.0vw, 1.5rem) !important;
  line-height: 1.5 !important;
  font-family: "Metropolis-Semibold", Arial, sans-serif !important;
  letter-spacing: -0.02em !important;
  margin: .25em 0 !important;

  color: #003300 !important;                 /* <<< Farbe sicher */
  list-style-type: square !important;        /* <<< viereckig auch am li */
}

/* Marker: Größe + Farbe */
p.bullet-points + ul.bp-list li::marker{
  font-size: 1.1em !important;
  color: #003300 !important;                 /* <<< Marker-Farbe */
}

/* Links in der Bullet ebenfalls grün */
p.bullet-points + ul.bp-list a{
  color: #003300 !important;
}


/* ====================================
   Social Icons fest auf 50x50px
==================================== */

/* Social Icons fix 50×50 (schlank) */
.social-media-icons a{display:inline-flex!important;width:50px!important;height:50px!important;align-items:center;justify-content:center}
.social-media-icons img,
.social-media-icons svg,
.social-media-icons i{width:50px!important;height:50px!important;max-width:none!important;object-fit:contain!important;line-height:50px!important;font-size:50px!important}


/* ====================================
   Smart Section "News"-Icon/Symbol oben links ausrichten
   Variante 1: Badge liegt in einem .ss-element  (DEIN bestehender Fall)
==================================== */

.ss-element:has(.news-badge){ position: relative !important; }

.ss-element:has(.news-badge) .news-badge{
  position: absolute !important;
  z-index: 50 !important;
  top: clamp(10px, 1.8vw, 22px) !important;
  left: clamp(10px, 1.8vw, 22px) !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

.ss-element:has(.news-badge) .news-badge a,
.ss-element:has(.news-badge) .news-badge button{ pointer-events:auto !important; }


/* ====================================
   Variante 2: Badge + Bild in derselben Column
   (WPBakery/Smart Section Struktur: .vc_column-inner > .wpb_wrapper > …)
   → nutze die Column als Bezugspunkt
==================================== */

.vc_column-inner:has(.news-badge),
.wpb_wrapper:has(.news-badge){
  position: relative !important;
}

.vc_column-inner:has(.news-badge) .news-badge,
.wpb_wrapper:has(.news-badge) .news-badge{
  position: absolute !important;
  z-index: 60 !important;                  /* leicht höher als Var. 1 */
  top: clamp(10px, 1.8vw, 22px) !important;
  left: clamp(10px, 1.8vw, 22px) !important;
  margin: 0 !important;
  pointer-events: auto !important;
  display: inline-block !important;
}


/* =====================================================
   ACF Projektstatus - grünner kreis
   - Element bekommt Klasse: .acf-status-dot
   - JS setzt dann je nach Inhalt: .is-laufend / .is-abgeschlossen
===================================================== */

.acf-status-dot{
  display: inline-flex !important;
  align-items: center !important;
  gap: .45em !important;
}

.acf-status-dot::before{
  content:"" !important;
  width: .55em !important;
  height: .55em !important;
  border-radius: 999px !important;
  background: transparent !important;
  flex: 0 0 auto !important;
}

/* laufend -> grün */
.acf-status-dot.is-laufend::before{
  background: #2bb673 !important;
}

/* abgeschlossen -> grau */
.acf-status-dot.is-abgeschlossen::before{
  background: #9aa3ad !important;
}


@media (min-width: 991px) {
    .wpc-filters-widget-wrapper {
        display: flex;
        flex-direction: column;
    }
}


/* =====================================================
   Projekte-Suchefilter einstellungen
===================================================== */

@media (min-width: 991px) {
    .wpc-filters-widget-wrapper {
        display: flex;
        flex-direction: column;
    }
}


/* =========================================================
   Footer Newsletter (Plugin "Newsletter" / .tnp-subscription)
   FIX: Immer links, kein Zentrieren, Button nicht rechts
   ========================================================= */

/* Align-Fix (so wie bei dir – NICHT weglassen) */
.footer-section .tnp.tnp-subscription,
.footer-section .tnp.tnp-subscription form,
.footer-section .tnp.tnp-subscription .tnp-field{
  display:block !important;
  float:none !important;
  text-align:left !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
}
.footer-section .tnp.tnp-subscription form{ width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; }
.footer-section .wpb_wrapper .tnp.tnp-subscription{ margin-left:0 !important; margin-right:0 !important; }
.footer-section .tnp.tnp-subscription .tnp-field-email{ width:520px !important; max-width:100% !important; margin:0 !important; }

/* Label weg */
.footer-section .tnp-subscription label[for^="tnp-"],
.footer-section .tnp-subscription .tnp-field label{ display:none !important; }

/* P-Typo: Input + Button */
.footer-section .tnp.tnp-subscription input.tnp-email,
.footer-section .tnp.tnp-subscription input.tnp-submit{
  font-size:clamp(0.9rem, 1.0vw, 1.5rem) !important;
  line-height:1.5 !important;
  font-family:'Metropolis-Medium' !important;
  letter-spacing:-0.02em !important;
}

/* Input pill */
.footer-section .tnp.tnp-subscription input.tnp-email{
  width:100% !important;
  margin:0 !important;
  padding:10px 10px !important;
  border:0px solid rgba(0,0,0,.12) !important;
  border-radius:50px !important;
  background:#ECF0EE !important;
  outline:none !important;
}

/* Button unter Feld, transparent, ohne Linien, kompakter */
.footer-section .tnp.tnp-subscription .tnp-field-button{ margin-top:10px !important; width:auto !important; text-align:left !important; }
.footer-section .tnp-subscription input.tnp-submit,
.footer-section .tnp-subscription button.tnp-submit,
.footer-section .tnp-subscription .tnp-submit{
  display:inline-block !important;
  width:auto !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
  color:#003300 !important;
  padding:6px 12px !important;      /* weniger oben/unten */
  line-height:1.2 !important;
  border-radius:50px !important;
}
.footer-section .tnp-subscription input.tnp-submit:hover,
.footer-section .tnp-subscription button.tnp-submit:hover,
.footer-section .tnp-subscription .tnp-submit:hover{
  background:transparent !important;
  color:#12A15D !important;
}

/* E-Mail-Feld: Text 1vw weiter nach innen (links) */
.footer-section .tnp.tnp-subscription input.tnp-email,
.footer-section .tnp-subscription input[type="email"]{
  padding: 14px 14px 14px calc(14px + 1vw) !important; /* oben | rechts | unten | links */
  box-sizing: border-box !important;
}