/*
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
*/


/* ====================================
   Scroll Probleme lösen
==================================== */
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;
}


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

@font-face{
	font-family:"Barlow-ExtraBold";
	src:url("https://relaunch.li-food.de/wp-content/uploads/2026/03/Barlow-ExtraBold.woff") format("woff"),
		url("https://relaunch.li-food.de/wp-content/uploads/2026/03/Barlow-ExtraBold.ttf") format("truetype");
	font-weight:800;
	font-style:normal;
	font-display:swap;
}
@font-face{
	font-family:"Barlow-Bold";
	src:url("https://relaunch.li-food.de/wp-content/uploads/2026/03/Barlow-Bold.woff") format("woff"),
		url("https://relaunch.li-food.de/wp-content/uploads/2026/03/Barlow-Bold.ttf") format("truetype");
	font-weight:700;
	font-style:normal;
	font-display:swap;
}
@font-face{
	font-family:"Barlow-SemiBold";
	src:url("https://relaunch.li-food.de/wp-content/uploads/2026/03/Barlow-SemiBold.woff") format("woff"),
		url("https://relaunch.li-food.de/wp-content/uploads/2026/03/Barlow-SemiBold.ttf") format("truetype");
	font-weight:600;
	font-style:normal;
	font-display:swap;
}
@font-face{
	font-family:"Barlow-Medium";
	src:url("https://relaunch.li-food.de/wp-content/uploads/2026/03/Barlow-Medium.woff") format("woff"),
		url("https://relaunch.li-food.de/wp-content/uploads/2026/03/Barlow-Medium.ttf") format("truetype");
	font-weight:500;
	font-style:normal;
	font-display:swap;
}
@font-face{
	font-family:"Barlow-Regular";
	src:url("https://relaunch.li-food.de/wp-content/uploads/2026/03/Barlow-Regular.woff") format("woff"),
		url("https://relaunch.li-food.de/wp-content/uploads/2026/03/Barlow-Regular.ttf") format("truetype");
	font-weight:400;
	font-style:normal;
	font-display:swap;
}
@font-face{
	font-family:"Zona-Pro-Bold";
	src:url("https://relaunch.li-food.de/wp-content/uploads/2026/03/Zona-Pro-Bold.woff") format("woff"),
		url("https://relaunch.li-food.de/wp-content/uploads/2026/03/Zona-Pro-Bold.ttf") format("truetype");
	font-weight:700;
	font-style:normal;
	font-display:swap;
}


/* ====================================
   Hintergrund Farbfade – Desktop
==================================== */

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: transparent !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 10%, #eee58f 0%, transparent 30%),
    radial-gradient(circle at 88% 14%, #efc0c9 0%, transparent 32%),
    radial-gradient(circle at 8% 88%,  #43ddd8 0%, transparent 34%),
    radial-gradient(circle at 56% 92%, #67b6ea 0%, transparent 30%),
    radial-gradient(circle at 86% 64%, #d8b7e4 0%, transparent 26%),
    linear-gradient(
      135deg,
      #efe49a 0%,
      #f0c79f 24%,
      #e5d6cb 48%,
      #cfc6de 66%,
      #9ec3e1 82%,
      #62cde0 100%
    );
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}

#Wrapper,
#Content,
.mfn-wrapper,
.section,
.section_wrapper,
.section-page,
.section-content,
.content_wrapper,
.the_content_wrapper,
.column,
.mcb-wrap,
.mcb-section,
.mcb-column,
.vc_row,
.vc_column_container,
.wpb_wrapper {
  background: transparent !important;
  box-shadow: none !important;
}


/* ====================================
  Font type im Menu
==================================== */

ul[id^="menu-lifood-hauptmenu"] > li > a{
  font-family: "Barlow-Bold", Arial, sans-serif !important;
  font-weight: 700 !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;
	}
}


/* ====================================
  Cursor wieder sichtbar machen
==================================== */

html, body { cursor: auto !important; }

/* Über Links/Buttons wieder die Hand zeigen */
a[href], button, [role="button"],
input[type="button"], input[type="submit"], label[for] {
  cursor: pointer !important;
}

/* Häufige Klassen von Custom-Cursor-Plugins ausknipsen */
.custom-cursor, .cursor-dot, .cursor-outline, .cursor-follower {
  display: none !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;
}

.vc_do_custom_heading.h3-custom-font-daten-fakten-uberschrift {
  margin: 0 !important;
  padding: 1vh 0 !important;
  line-height: 1 !important;
}

/* Abstand unter Content-Wrapper entfernen */
.has_content .the_content_wrapper {
  margin-bottom: 0 !important;
}

/* Nur für die Farblinie */
.farblinie,
.farblinie .wpb_wrapper,
.farblinie .vc_figure,
.farblinie .vc_single_image-wrapper,
.farblinie img {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.farblinie .vc_single_image-wrapper,
.farblinie img {
  display: block !important;
}


/* =====================================================
   GLOBAL: Share-Block (Share / Social Icons) ausblenden
===================================================== */
.section.section-post-intro-share{
  display: none !important;
}


/* =========================================================
   bg-ohne-padding
   ========================================================= */

/* Inhalt immer über dem Background */
.bg-ohne-padding{ position: relative !important; }

/* falls WPBakery/Theme den Background innen setzt -> aus */
.bg-ohne-padding .vc_column-inner,
.bg-ohne-padding .wpb_wrapper{
  background: none !important;
}

/* Background ohne Padding */
.bg-ohne-padding::before{
  content: "";
  position: absolute;
  inset: 0;                 /* bis an den Rand */
  background-image: url("https://relaunch.dil-engineering.com/wp-content/uploads/2026/02/muster.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;   /* oder: contain / 100% auto */
  pointer-events: none;
  z-index: 0;
}

/* Inhalt bekommt Padding */
.bg-ohne-padding > .vc_column-inner{
  position: relative !important;
  z-index: 1;
  padding: clamp(18px, 2.5vw, 48px) !important;
}

/* =========================================
   Slider/Bild: weißen Bereich darunter killen (Slick + WPBakery)
========================================= */

/* =========================================
   Ultimate Addons / ULT Carousel (Slick)
   weißen Streifen unter dem Carousel entfernen
========================================= */

/* 1) Untere Abstände im Carousel-Stack killen */
.ult-carousel-wrapper,
.ult-carousel-wrapper .slick-slider,
.ult-carousel-wrapper .slick-list,
.ult-carousel-wrapper .slick-track,
.ult-carousel-wrapper .slick-slide{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) Dots nicht unterhalb “rausdrücken”, sondern ins Bild legen */
.ult-carousel-wrapper .slick-slider{
  position: relative !important;
}
.ult-carousel-wrapper .slick-dots{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 14px !important;   /* ggf. anpassen */
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) WPBakery Single Image default-margin killen (falls Slides Single Images sind) */
.ult-carousel-wrapper .wpb_single_image,
.ult-carousel-wrapper .wpb_single_image.wpb_content_element{
  margin-bottom: 0 !important;
}
.ult-carousel-wrapper img{
  display: block !important;
}


/* ====================================
   Column-Hover
==================================== */

/*mpc-column a:hover*/

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


/* =========================================================
   NO-KLICK – Cursor nur auf deaktivierten Top-Level Links
========================================================= */
ul[id^="menu-dil-eng-hauptmenu"] > li > a.no-klick-disabled{
  cursor: default !important;
  text-decoration: none !important;
}


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

/* menu word-break */

.ss-element * {
    word-break: keep-all !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;
}

/* Kein Hand-Cursor auf deaktivierten Hauptmenüpunkten */
ul[id^="menu-lifood-hauptmenu"] > li > a.no-klick-disabled,
ul[id^="menu-lifood-hauptmenu"] > li > a.no-klick-disabled:hover,
ul[id^="menu-lifood-hauptmenu"] > li > a.no-klick-disabled:focus,
ul[id^="menu-lifood-hauptmenu"] > li > a.no-klick-disabled:active{
  cursor: default !important;
}

/* ====================================
   gusta-haupt-navigation font scale
==================================== */

.gusta-navigation > ul {
  display: flex;
  align-items: center;
}

.gusta-navigation > ul > li > a {
  font-size: clamp(16px, 1.5vw, 80px) !important;
  line-height: clamp(60px, 4vw, 120px) !important;
  letter-spacing: -0.01em !important;
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
}

/* --- Menü nach unten ausrichten --- */

.gusta-align-center.gusta-inline {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  height: 100px !important;

  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  box-sizing: border-box !important;
}


/* ====================================
   gusta-navigation Footer
==================================== */

/* Footer-Menüs (beide Smart-Section Instanzen) */
:is(#el-1946284296909c72040b90, #el-961657186690a0f4b0131a) ul[id^="menu-dil-eng-"]>li{
  margin:0!important;padding:0!important;border:0!important;line-height:0!important
}
:is(#el-1946284296909c72040b90, #el-961657186690a0f4b0131a) ul[id^="menu-dil-eng-"]>li>a{
  display:block!important;
  font-size:clamp(16px,1.1vw,30px)!important;
  line-height:1.5em!important;
  letter-spacing:-.7px!important;
  border:0!important
}

/* Basisfarbe im Footer: WEISS lassen */
:is(#el-1946284296909c72040b90,#el-961657186690a0f4b0131a) ul[id^="menu-dil-eng-"]>li>a{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;   /* neutralisiert grüne Inline-Farbe im Normalzustand */
  border:0!important;
}

/* Nur Active/Hover: #161922 */
:is(#el-1946284296909c72040b90,#el-961657186690a0f4b0131a) ul[id^="menu-dil-eng-"]>li>a:is(:hover,:focus,[aria-current="page"]),
:is(#el-1946284296909c72040b90,#el-961657186690a0f4b0131a) ul[id^="menu-dil-eng-"]>li:is(.current-menu-item,.current_page_item,.current-menu-ancestor)>a{
  color:#161922!important;
  -webkit-text-fill-color:#161922!important;
  border:0!important; border-color:transparent!important;
}


/* ====================================
   gusta-sub-navigation font scale
==================================== */

/* === Submenü-Größe in Mega-Menüs (alle Punkte) === */
[id^="gusta-mega-menu-"] .gusta-navigation li > a{
  font-size: clamp(16px, 1.0vw, 30px) !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  display: inline-block !important;
  text-decoration: none !important;
  padding: .2rem 0 !important;
  font-family: inherit !important;
}

/* Mega-Menü line-height */
[id^="gusta-mega-menu-"] .gusta-nav.vertical > ul > li > a,
[id^="gusta-mega-menu-"] .gusta-nav.vertical > ul > li > ul > li > a,
[id^="gusta-mega-menu-"] .gusta-nav.vertical > ul > li > ul > li > ul > li > a{
  line-height: clamp(30px, 1.5vw, 30px) !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  border: 0 !important;
  display: block !important;
}

@media (max-width: 1199px){
  [id^="gusta-mega-menu-"] .gusta-nav.vertical > ul > li > a,
  [id^="gusta-mega-menu-"] .gusta-nav.vertical > ul > li > ul > li > a,
  [id^="gusta-mega-menu-"] .gusta-nav.vertical > ul > li > ul > li > ul > li > a{
    line-height: 30px !important;
  }
}

/* Menü-Wrapper hat die Klasse .submenu-head
   -> erster Menüpunkt darin: fett + ohne Pfeil */
.submenu-head ul.gusta-navigation > li:first-child > a,
.submenu-head ul.gusta-navigation > li:first-child > a *{
  font-family: "Barlow-ExtraBold", Arial, sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
  font-synthesis: none !important;
  text-indent: 0 !important;
  padding-left: 0 !important;
  color: #3083c5 !important;
}

/* Pfeil weg */
.submenu-head ul.gusta-navigation > li:first-child > a::before,
.submenu-head ul.gusta-navigation > li:first-child::before{
  content: none !important;
  display: none !important;
}

/* Hover nicht grün */
.submenu-head ul.gusta-navigation > li:first-child > a:hover,
.submenu-head ul.gusta-navigation > li:first-child > a:focus,
.submenu-head ul.gusta-navigation > li:first-child.current-menu-item > a{
  color: #3083c5 !important;
}


/* ====================================
   Gusta Logo
==================================== */

/* Logo im Header wirklich skalieren */
.gusta-site-logo,
[class*="gusta-site-logo"]{ display:block; line-height:0; }

.gusta-site-logo img,
[class*="gusta-site-logo"] img{
  height:auto !important;                               /* natürliche Höhe */
  max-height: clamp(70px, 7vw, 150px) !important;       /* skaliert mit Viewport */
  width:auto !important;
  object-fit:contain !important;
}


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

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

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

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


/* ====================================
   Haupt-Menu-Pfeil – (gusta-navigation)
   ==================================== */

/* Menu-Pfeil – Hauptmenü (.gusta-navigation) */
.gusta-navigation > ul[class*="gusta-nav"] > li > a{position:relative!important;padding-right:22px!important}
.gusta-navigation > ul[class*="gusta-nav"] > li > a::after{content:"";position:absolute;top:50%;right:0;transform:translateY(-50%);width:10px;height:10px;background:url("https://relaunch.li-food.de/wp-content/uploads/2026/03/chevrondown-menu.png") center/contain no-repeat!important;pointer-events:none}
.gusta-navigation > ul[class*="gusta-nav"] > li:hover > a::after,
.gusta-navigation > ul[class*="gusta-nav"] > li > a:focus-visible::after,
.gusta-navigation > ul[class*="gusta-nav"] > li.current-menu-ancestor > a::after,
.gusta-navigation > ul[class*="gusta-nav"] > li.current-menu-item > a::after{background-image:url("https://relaunch.li-food.de/wp-content/uploads/2026/03/chevrondown-menu-over.png")!important}


/* ==========================================
   Mega-Menü – Pfeile & (nur Top-Level) Trennlinien
   Für alle Smart-Section-Panels: id^="gusta-mega-menu-"
   Icons: normal + hover/active aus Benutzer-URLs
   ========================================== */

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

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

/* Links: Platz für Icon links */
[id^="gusta-mega-menu-"] ul[class*="gusta-nav"] > li > a{
  --mm-icon: clamp(10px, .70vw, 12px);
  --mm-gap: .5em;
  position:relative!important; display:block!important; flex:1 1 auto!important;
  margin:0!important; padding:0!important; background:transparent!important;
  text-indent: calc(var(--mm-icon) + var(--mm-gap))!important;
  color:#1a1d22;
}

/* Pfeil links – NORMAL (schwarz) */
[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://relaunch.li-food.de/wp-content/uploads/2026/03/submenu-icon.png") center/contain no-repeat!important;
  opacity:.9;
}

/* Pfeil bei Hover/Focus/Active/Current – GRÜN */
[id^="gusta-mega-menu-"] ul[class*="gusta-nav"] > li > a:is(:hover,:focus,[aria-current="page"])::before,
[id^="gusta-mega-menu-"] ul[class*="gusta-nav"] > li:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current_page_parent) > a::before{
  background-image:url("https://relaunch.li-food.de/wp-content/uploads/2026/03/submenu-icon-over.png")!important;
}

/* Textfarbe bei Hover/Current */
[id^="gusta-mega-menu-"] ul[class*="gusta-nav"] > li > a:is(:hover,:focus,[aria-current="page"]),
[id^="gusta-mega-menu-"] ul[class*="gusta-nav"] > li:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current_page_parent) > a{
}

/* Trennlinien NUR im Top-Level (KEINE Linien in Untermenüs) */
[id^="gusta-mega-menu-"] > ul[class*="gusta-nav"] > li:not(:last-child)::after,
[id^="gusta-mega-menu-"] > div > ul[class*="gusta-nav"] > li:not(:last-child)::after{
  content:""!important; position:absolute!important; left:0!important; right:0!important; bottom:0!important;
  height:1px!important; background:rgba(0,0,0,.15)!important; pointer-events:none!important;
}

/* Untermenüs explizit ohne Linien/Borders */
[id^="gusta-mega-menu-"] ul ul[class*="gusta-nav"] > li > a{
  border:0!important; box-shadow:none!important;
}
[id^="gusta-mega-menu-"] ul ul[class*="gusta-nav"] > li > a::before,
[id^="gusta-mega-menu-"] ul ul[class*="gusta-nav"] > li > a::after,
[id^="gusta-mega-menu-"] ul ul[class*="gusta-nav"] > li::after{
  content:none!important;
}

/* +25% Zeilenabstand ab 1920px */
@media (min-width:1920px){
  [id^="gusta-mega-menu-"] ul[class*="gusta-nav"] > li{ min-height:40px!important; }
}

/* Kompakter Head/Button */
.mm-compact{
  display:inline-flex!important; align-items:center!important; justify-content:flex-start!important; float:left!important;
  margin:0!important; margin-right:auto!important; padding:0!important; line-height:1!important;
  background:transparent!important; border:0!important; box-shadow:none!important; min-height:0!important;
}
.mm-compact>span,.mm-compact .gusta-btn-text,.mm-compact .gusta-icon,.mm-compact i{padding:0!important;margin:0!important;line-height:1!important}
.mm-compact+*,.mm-compact+* ul,.mm-compact+div>ul{margin-top:0!important;padding-top:0!important}
li:has(>.mm-compact){margin-bottom:0!important;padding-bottom:0!important}


/* ====================================
   service-submenu-stack
   Service-Menü: Subpunkte unter dem Parent anzeigen
   Klasse direkt im Navigation Menu Element:
   ==================================== */

/* Wichtig: Parent-LI wieder als Block statt Flex */
.gusta-nav.vertical.service-submenu-stack > ul.gusta-navigation > li,
.gusta-nav.vertical.service-submenu-stack > ul > li {
  display: block !important;
  align-items: initial !important;
  width: 100% !important;
  position: relative !important;
}

/* Hauptlink normal als Block */
.gusta-nav.vertical.service-submenu-stack > ul.gusta-navigation > li > a,
.gusta-nav.vertical.service-submenu-stack > ul > li > a {
  display: block !important;
  width: 100% !important;
  padding-right: 0 !important;
}

/* Plus/Minus rechts ausblenden */
.gusta-nav.vertical.service-submenu-stack > ul.gusta-navigation > li > a.gusta-menu-toggle,
.gusta-nav.vertical.service-submenu-stack > ul > li > a.gusta-menu-toggle,
.gusta-nav.vertical.service-submenu-stack .gusta-menu-toggle {
  display: none !important;
}

/* Dropdown immer sichtbar und normal unter dem Parent */
.gusta-nav.vertical.service-submenu-stack > ul.gusta-navigation > li > ul.gusta-dropdown-menu,
.gusta-nav.vertical.service-submenu-stack > ul > li > ul.gusta-dropdown-menu,
.gusta-nav.vertical.service-submenu-stack > ul.gusta-navigation > li > ul.sub-menu,
.gusta-nav.vertical.service-submenu-stack > ul > li > ul.sub-menu {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  margin: 8px 0 0 22px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Subpunkte untereinander */
.gusta-nav.vertical.service-submenu-stack > ul.gusta-navigation > li > ul.gusta-dropdown-menu > li,
.gusta-nav.vertical.service-submenu-stack > ul > li > ul.gusta-dropdown-menu > li,
.gusta-nav.vertical.service-submenu-stack > ul.gusta-navigation > li > ul.sub-menu > li,
.gusta-nav.vertical.service-submenu-stack > ul > li > ul.sub-menu > li {
  display: block !important;
  width: 100% !important;
  margin: 4px 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Links der Unterpunkte */
.gusta-nav.vertical.service-submenu-stack > ul.gusta-navigation > li > ul.gusta-dropdown-menu > li > a,
.gusta-nav.vertical.service-submenu-stack > ul > li > ul.gusta-dropdown-menu > li > a,
.gusta-nav.vertical.service-submenu-stack > ul.gusta-navigation > li > ul.sub-menu > li > a,
.gusta-nav.vertical.service-submenu-stack > ul > li > ul.sub-menu > li > a {
  display: block !important;
  width: 100% !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-indent: calc(var(--mm-icon) + var(--mm-gap)) !important;
}

/* falls das Theme Untermenüs per max-height / overflow versteckt */
.gusta-nav.vertical.service-submenu-stack ul.gusta-dropdown-menu {
  max-height: none !important;
  overflow: visible !important;
}

/* optional: Parent optisch aktiv lassen, aber ohne extra Toggle-Abstand */
.gusta-nav.vertical.service-submenu-stack li.menu-item-has-children > a.gusta-dropdown-toggle::after {
  display: none !important;
  content: none !important;
}


/* ====================================
   Footer-Menü (Gusta): .dil-footermenu – gewinnt sicher
   - zielt exakt auf: .gusta-nav.vertical > ul.gusta-navigation > li > a
   - line-height greift sicher
   - Font-Family NICHT gesetzt (steuerst du im Menü selbst)
==================================== */

/* UL/LI reset (optional, stört nicht) */
.dil-footermenu.gusta-nav ul.gusta-navigation{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.dil-footermenu.gusta-nav ul.gusta-navigation > li{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* WICHTIG: <a> direkt im Theme-Pfad überschreiben */
.dil-footermenu.gusta-nav.vertical > ul.gusta-navigation > li > a{
  /* Typo */
  font-size: clamp(15px, 1.1vw, 22px) !important;
  letter-spacing: -0.01em !important;

  /* NICHT setzen, damit du es im Menü steuern kannst */
  /* font-family: ... */
  /* font-weight: ... */

  /* Zeilenhöhe */
  line-height: clamp(25px, 2.3vw, 40px) !important;

  /* echte Abstände entfernen */
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;

  /* line-height sichtbar machen */
  display: block !important;
  text-decoration: none !important;
}

/* falls span drin ist */
.dil-footermenu.gusta-nav.vertical > ul.gusta-navigation > li > a > span{
  font-size: inherit !important;
  line-height: inherit !important;
  /* font-family / font-weight bewusst NICHT erzwungen */
}

/* Pfeile/Indikatoren AUS */
.dil-footermenu.gusta-nav.vertical > ul.gusta-navigation > li > a::before,
.dil-footermenu.gusta-nav.vertical > ul.gusta-navigation > li > a::after{
  content: none !important;
  display: none !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.2s !important;
  animation-delay: 0.2s !important;
  animation-fill-mode: forwards;
}


/* ====================================
   Text im Editor weiß
==================================== */

/* Weißer Text im WPBakery-Textblock */
.wpb_text_column.text-white,
.wpb_text_column.text-white .wpb_wrapper,
.wpb_text_column.text-white .wpb_wrapper *{
  color:#fff !important;
}


/* ====================================
   TYPOGRAFIE-GRUNDEINSTELLUNGEN
==================================== */

/*p Schrift groesse*/

/* Standard-Absatzstil */
p {
  font-size: clamp(1rem, 1.1vw, 2.2rem); !important;
  line-height: 1.5 !important;
  font-family: 'Barlow-Medium', Arial, sans-serif !important;
  letter-spacing: -0.2px;
}

/* Alternative Schriftart für alle Elemente mit .alt-font */
.alt-font p {
  font-family: 'Metropolis-Bold', Arial, sans-serif !important;
}

/* News-Typo */

/* p-Variante für News-Titel (Carddesign / Custom Field) */
.p-custom-font-news-titel,
.p-custom-font-news-titel *{
  font-size: clamp(1.5rem, 1.5vw, 1.5rem) !important;
  line-height: 1.2 !important;
  font-family: "Barlow-Regular", 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: "Barlow-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: "Barlow-Regular", 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;
}

/* === Custom Field: news_inhalt === */
.gusta-post-meta p{
  font-size: clamp(1rem, 1vw, 2.3rem) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.2px;
  font-family: 'Barlow-Regular', Arial, sans-serif !important;
}

/* Post Custom Field: news_untertitel fett */
.news-untertitel,
.news-untertitel p{
  /* Größe wie deine P-Typo – falls schon global geregelt, kannst du die 1. Zeile weglassen */
  font-size: clamp(1rem, 1vw, 2.3rem) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.1px;
  font-family: 'Barlow-Bold', Arial, sans-serif !important;
}

/* P-Typo im Footer (.p-footer) – fett */
.p-footer,
.p-footer p{
  font-size: clamp(0.8rem, 0.8vw, 1.8rem) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.1px !important;
  font-family: 'Barlow-Regular', Arial, sans-serif !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* 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: "Barlow-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.8rem, 0.8vw, 0.8rem) !important;
  line-height: 1.2 !important;
  font-family: "Barlow-Medium", Arial, sans-serif !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

/* ===========================================
   p-custom-font-produkte (standalone)
   + Kombi-Regel: wenn Bulletpoints im gleichen Wrapper sind,
     bekommen die LI die kleinere p-Schriftgröße
   =========================================== */

p.p-custom-font-produkte,
.p-custom-font-produkte > p{
  font-size: clamp(0.95rem, 0.95vw, 1.0rem) !important;
  line-height: 1.25 !important;
  font-family: "Barlow-Bold", Arial, sans-serif !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

/* Kombi: p-custom-font-produkte + Bulletpoints */
p.p-custom-font-produkte.bullet-points .bp-list li,
p.p-custom-font-produkte.bullet-points-white .bp-list li,
.p-custom-font-produkte.bullet-points .bp-list li,
.p-custom-font-produkte.bullet-points-white .bp-list li{
  font-size: clamp(0.95rem, 0.95vw, 1.0rem) !important;
  line-height: 1.25 !important;
}

/*H1 Schrift groesse*/

h1 {
  font-size: clamp(1.5rem, 3vw, 4rem); !important;
  line-height: 1.2;
  font-family: 'Zona-Pro-Bold', Arial, sans-serif !important;
  letter-spacing: -0.02em !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.0vw, 3.0rem) !important;
  line-height: 1.1 !important;
  font-family: "Barlow-Bold", Arial, sans-serif !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

.text-fade {
  --dir: to right;
  --from: #000000;
  --to:   #666666;
  background: linear-gradient(var(--dir), var(--from), var(--to));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Füge Stile für gezielte Wörter hinzu */
.custom-font {
  font-family: 'Barlow-Bold', Arial, sans-serif !important;
  color: #55b41b !important;
}

/*H2 Schrift groesse*/

h2 {
  font-size: clamp(1.5rem, 3vw, 4rem); !important;
  line-height: 1.2;
  letter-spacing: -2px;
  font-family: 'Zona-Pro-Bold', Arial, sans-serif !important;
  letter-spacing: -0.02em; /* Buchstabenabstand */
}

.h2-custom-font h2 {
  font-family: 'Zona-Pro-Bold', Arial, sans-serif !important;
  font-size: clamp(1.5rem, 2.5vw, 3.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em !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(1.5rem, 2.0vw, 3.0rem) !important;
  line-height: 1.1 !important;
  font-family: "Zona-Pro-Bold", Arial, sans-serif !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

/*H3 Schrift groesse*/

h3 {
  font-size: clamp(1.5rem, 2.5vw, 3.5rem); !important;
  line-height: 1.2;
  font-family: 'Zona-Pro-Bold', Arial, sans-serif !important;
  letter-spacing: -0.03em; /* Buchstabenabstand */	
}

.h3-custom-font h3 {
  font-family: 'Zona-Pro-Bold', Arial, sans-serif !important;
  font-size: clamp(1.5rem, 3vw, 4rem);
  line-height: 1.2;
  letter-spacing: -0.03em !important;	
}

h4 {
  font-size: clamp(1rem, 2vw, 2rem); !important;
  line-height: 1.3;
  letter-spacing: -0.01em !important;
  font-family: 'Zona-Pro-Bold', Arial, sans-serif !important;
}

.h4-custom-font h4 {
  font-family: 'Barlow-Regular', Arial, sans-serif !important;
  font-size: clamp(1rem, 2vw, 2rem);
  line-height: 1;
  letter-spacing: -0.01em !important;
  color: #161922 !important;	
}

/* Basis H5 */
h5 {
  font-size: clamp(0.8rem, 1.5vw, 1.7rem) !important;
  line-height: 1.2;
  letter-spacing: -0.02em !important;
  font-family: 'Barlow-Semibold', Arial, sans-serif !important;
}

/* Variante mit spezieller Klasse – beide Fälle:
   1) Element hat selbst die Klasse .h5-custom-font
   2) h5 sitzt IN einem Element mit .h5-custom-font
*/
.h5-custom-font,
.h5-custom-font h5 {
  font-family: 'Barlow-Regular', Arial, sans-serif !important;
  font-size: clamp(0.8rem, 1.0vw, 1.4rem) !important;
  line-height: 1;
  letter-spacing: -0.02em !important;
  color: #1f1f1f !important;	
}

/* H6 – 10% größer, abgerundet */
h6 {
  font-size: clamp(0.5rem, 1.1vw, 1.1rem); !important;
  line-height: 1.2;
  font-family: 'Zona-Pro-Bold', Arial, sans-serif !important;
}

/* Breadcrumb wie H6 (Smart Section) */
.ss-element.gusta-breadcrum :is(li, a, .active){
  font-size: clamp(0.5rem, 1.1vw, 1.1rem) !important;
  line-height: 1.2 !important;
  font-family: 'Zona-Pro-Bold', Arial, sans-serif !important;
}

/* Fallback, falls der Container mal anders geschrieben ist */
[class*="gusta-breadcrum"] :is(li, a, .active){
  font-size: clamp(0.5rem, 1.1vw, 1.1rem) !important;
  line-height: 1.2 !important;
  font-family: 'Zona-Pro-Bold', Arial, sans-serif !important;
}


/* ====================================
   Schatten-Card + weiss-innenblock behalten
==================================== */

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

/* Kein Schatten auf der Row selbst */
.vc_row.shadow-card,
.wpb_row.shadow-card{
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Schatten auf die direkten Spalten der Row */
.vc_row.shadow-card > .wpb_column > .vc_column-inner,
.wpb_row.shadow-card > .wpb_column > .vc_column-inner{
  position: relative;
  box-shadow: 0 18px 30px rgba(120, 140, 170, 0.70) !important;
  overflow: visible !important;
}

/* WICHTIG: weiss-innenblock soll weiß bleiben */
.vc_row.shadow-card > .wpb_column.weiss-innenblock > .vc_column-inner,
.wpb_row.shadow-card > .wpb_column.weiss-innenblock > .vc_column-inner,
.shadow-card.weiss-innenblock > .vc_column-inner{
  background: #ffffff !important;
}

/* nichts abschneiden */
.shadow-card,
.shadow-card > .vc_column-inner,
.vc_row.shadow-card > .wpb_column,
.vc_row.shadow-card > .wpb_column > .vc_column-inner,
.vc_row.shadow-card > .wpb_column > .vc_column-inner > .wpb_wrapper,
.wpb_row.shadow-card > .wpb_column,
.wpb_row.shadow-card > .wpb_column > .vc_column-inner,
.wpb_row.shadow-card > .wpb_column > .vc_column-inner > .wpb_wrapper{
  overflow: visible !important;
}

/* Kein zusätzliches Innenpadding */
.shadow-card .wpb_wrapper{
  padding: 0 !important;
}

/* Smart Section – kleinerer Schatten */

.post-listing-container.show-container .actionlink{
  position: relative !important;
  overflow: visible !important;
  filter: drop-shadow(0 10px 14px rgba(120, 140, 170, 0.80)) !important;
}


/* ====================================
   Schatten direkt auf dem Bild-Element
   Klasse direkt am Bild:
   shadow-card-profil
==================================== */

.shadow-card-image{
  display: inline-block !important;
  position: relative !important;
  overflow: visible !important;
  box-shadow: 0 14px 28px rgba(120, 140, 170, 0.80) !important;
}

/* ====================================
   Shadow nur unten im Megamenu
==================================== */

.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,.25) 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;
}


/* ====================================
   News-Content: Link bring in die nächste Zeile fixen
==================================== */
/* =========================================================
   1) SINGLE / CONTENT: Links im Fließtext NICHT umbrechen
   (nur auf Inhaltsseiten)
========================================================= */
body.single .the_content .gusta-post-meta.gusta-align-left a{
  display: inline !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* =========================================================
   2) CARDS: Titel-Links dürfen umbrechen (Listing/Carousel)
   (nur im Card-Container)
========================================================= */
.post-listing-container .p-custom-font-news-title a{
  display: inline !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
}


/* ====================================
   Wörter als Farbfade darstellen
==================================== */

/* Farbverlauf von links nach rechts für Wörter mit class="fade" */
.fade {
  background: linear-gradient(to right, #009447, #16c471);
  -webkit-background-clip: text;  /* Chrome, Safari, Edge */
  background-clip: text;          /* Firefox */
  -webkit-text-fill-color: transparent;
  color: transparent;             /* Fallback für Firefox */
  text-shadow: none !important;   /* Theme-Schatten neutralisieren */
  background-image: linear-gradient(to right, #009447, #16c471) !important;
}


/* ====================================
   Alternative grüne Textverlauf-Variante
==================================== */

.text-gradient-green {
  display: inline-block !important;
  background: linear-gradient(to right, #161922, #12a15d) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}


/* Full height row */
/* Standard: deaktiviert (unter 1440px) */
.full-height-column {
  height: auto !important;
  display: block !important;
  flex-direction: initial !important;
  justify-content: initial !important;
}

/* Ab 1440px aktiv */
@media (min-width: 1440px) {
  .full-height-column {
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}

/* Optional: Top-Bar rechtsbündig */
.top-bar {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding: 0 !important;
}

/* Falls zusätzliche Umrandung vorhanden ist */
.wpml-ls-statics-shortcode_actions {
  line-height: 1 !important;
}


/* Elemente übereinander legen */

/* Container (Row mit ID #oben): erlaubt überstehendes Overlay */
#row-container {
  position: relative;
  overflow: visible;
  padding-bottom: 140px;
}


/* Overlay-Bild */
.stack-overlay {
  position: absolute;
  right: 0px;       /* nach links geschoben */
  bottom: -300px;     /* nach unten geschoben */
  transform: scale(0.5);
  transform-origin: center center;  /* <<< Hier geändert */
  z-index: 10;
}


/* Bild nicht verzerren */
.stack-overlay img {
  height: auto !important;
  width: auto !important;
  max-width: 100%;
}


/* ====================================
   text-row-overlay
==================================== */

/* nur der gemeinsame Bereich */
.vc_row {
  position: relative;
}

/* Textspalte Desktop */
.text-row-overlay {
  position: absolute !important;
  top: 40px;
  left: 40px;
  z-index: 20 !important;
  width: auto !important;
  max-width: 1200px !important;
}

/* Textinhalte normal untereinander */
.text-row-overlay .wpb_wrapper {
  position: relative;
}

.text-row-overlay .element-oben,
.text-row-overlay .element-unten {
  position: relative !important;
  margin: 0 !important;
}

.text-row-overlay .element-unten {
  margin-top: 15px !important;
}

/* Bildspalte */
.bild-row-overlay {
  position: relative !important;
  z-index: 1 !important;
}

.bild-row-overlay .vc_column-inner,
.bild-row-overlay .wpb_wrapper,
.bild-row-overlay .wpb_single_image,
.bild-row-overlay .vc_figure,
.bild-row-overlay .vc_single_image-wrapper,
.bild-row-overlay .vc_single_image-wrapper img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

.bild-row-overlay .wpb_single_image {
  margin: 0 !important;
}


/* Linie unter Ziele für normale Headlines + Smart Section Headlines */

/* NORMALER CONTENT */
.zeilenblock-weiss {
  display: inline !important;
  text-decoration: none !important;
  box-shadow: none !important;
  padding: 0 0 0.12em 0 !important;
  line-height: 1.45 !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 5px !important;
  background-position: 0 100% !important;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
}

/* SMART SECTION: nur Post Custom Field mit ss-element-item neutralisieren */
h1.zeilenblock-weiss:has(.ss-element-item) {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* SMART SECTION: inneres Span neutral */
h1.zeilenblock-weiss .ss-element-item {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* SMART SECTION: nur der Link bekommt die Linien */
h1.zeilenblock-weiss .ss-element-item a {
  display: inline !important;
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: none !important;
  padding: 0 0 0.12em 0 !important;
  line-height: 1.45 !important;
  background-image: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 5px !important;
  background-position: 0 100% !important;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
}

/* Responsive */
@media (max-width: 991px) {
  .text-row-overlay {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 20 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 20px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .text-row-overlay .wpb_wrapper {
    max-width: 100% !important;
  }

  .text-row-overlay .element-oben,
  .text-row-overlay .element-unten {
    margin: 0 !important;
  }

  .text-row-overlay .element-unten {
    margin-top: 10px !important;
  }

  .bild-row-overlay,
  .bild-row-overlay .vc_column-inner,
  .bild-row-overlay .wpb_wrapper,
  .bild-row-overlay .wpb_single_image,
  .bild-row-overlay .vc_figure,
  .bild-row-overlay .vc_single_image-wrapper,
  .bild-row-overlay .vc_single_image-wrapper img {
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
    transform: none !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;
  }
}


/* ====================================
  Positionierung oben links
==================================== */

.top-left {
  position: absolute;
  top: 0;
  left: 0;
  margin: 8px; /* Optionaler Abstand vom Rand */
}

/* ====================================
   dil-social-inline
==================================== */

/* Social Icons nebeneinander (wenn jedes Icon ein eigener ult-just-icon-wrapper ist) */
.ult-just-icon-wrapper.dil-social-inline{
  display: inline-block !important;
  width: auto !important;
  margin: 0 5px 0 0 !important;  /* Abstand rechts */
  vertical-align: middle;
}

/* Dein LinkedIn-Icon sitzt in .align-icon -> auch inline setzen */
.align-icon{
  display: inline-block !important;
  margin: 0 5px 0 0 !important;
  vertical-align: middle;
}

/* optional: Bild sauber */
.ult-just-icon-wrapper.dil-social-inline img,
.align-icon img{
  display: block;
}


/* ====================================
   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{
  position: relative;
  padding: 2vh 3vw 0 !important; /* oben 2vh, rechts/links 3vw, unten 0 */
}

/*Padding Mega Menu*/

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

/* mega-panel-centered – linker Abstand responsive (nur vw) */
.mega-panel-centered{
  padding-left: clamp(4vw, 12vw, 18vw) !important;
}

/* unter 991px: kein linker Abstand */
@media (max-width: 991px){
  .mega-panel-centered{
    padding-left: 0vw !important;
  }
}


/* ====================================
   Weiss Innenblock
==================================== */

.weiss-innenblock {
  margin-left: clamp(3vw, 3vw, 6vw) !important;
  margin-right: clamp(3vw, 3vw, 6vw) !important;
  width: auto !important;
}

.weiss-innenblock > .vc_column-inner {
  background: #ffffff !important;
  padding: 0 !important;
}


/*Globales - Padding Top-Bottom*/

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

.padding-bottom-last {
  padding-bottom: clamp(8vh, 8vw, 18vh) !important;
}

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

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

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

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


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

.vc_row.wpb_row.padding-bottom-less{
  padding-bottom: clamp(4vh, 6vw, 6vh) !important;
}

/*Padding-left-right*/

.padding-left-right-more {
  padding-left: clamp(6vw, 20vw, 32vw) !important;
  padding-right: clamp(6vw, 20vw, 32vw) !important;
}

@media (max-width: 768px) {
  .padding-left-right-more {
    padding-left: 6vw !important;
    padding-right: 6vw !important;
  }
}

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

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

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

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

/*Padding text im slider*/
.padding-left-right-frame {
  padding-left: clamp(2vw, 2vw, 2vh) !important;
  padding-right: clamp(2vw, 2vw, 2vh) !important;
}

/*Padding Content quote*/

.paddingcontentquote {
  padding-left: clamp(4vw, 5vw, 6vw) !important; /* Dynamisches padding-left */
  padding-right: clamp(4vw, 5vw, 6vw) !important; /* Dynamisches padding-right */
}

/*Padding Content Innen*/

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

.paddinginnen-more {
  padding-left: clamp(4vw, 3vw, 6vw) !important;
  padding-right: clamp(4vw, 3vw, 6vw) !important;
  padding-top: clamp(4vh, 3vh, 6vh) !important;
  padding-bottom: clamp(4vh, 3vh, 6vh) !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(2vh, 2vh, 2vh) !important;
  padding-bottom: clamp(1vh, 2vh, 2vh) !important;
}

/*Padding überschrift*/

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

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

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

/*Padding Footer*/

.paddingfooter {
  padding-top: clamp(2vh, 6vh, 8vh) !important; /* Dynamisches padding-top */
  padding-bottom: clamp(2vh, 6vh, 6vh) !important; /* Dynamisches padding-bottom */
  padding-left: clamp(4vw, 4vw, 4vw) !important; /* Einheitliches padding-left */
  padding-right: clamp(4vw, 4vw, 4vw) !important; /* Einheitliches padding-right */
}

/*Padding footer menu*/

.paddingfootermenu {
  padding-top: clamp(4vh, 6vh, 8vh) !important; /* Dynamisches padding-top */
  padding-bottom: 0vh !important; /* Einheitliches padding-bottom */
  padding-left: 0vw !important; /* Einheitliches padding-left */
  padding-right: 0vw !important; /* Einheitliches padding-right */
}

/*Kein Margin und Padding oben und Unten*/

.no-spacing {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* ====================================
  Row für FiberFlow-Karten: Spalten gleich hoch machen
==================================== */

.fiberflow-equal .vc_row.wpb_row > .wpb_column {
  display: flex !important;
}

/* Inneres der Spalte auch als Flex-Container */
.fiberflow-equal .vc_row.wpb_row > .wpb_column > .vc_column-inner {
  display: flex !important;
  flex: 1 1 auto;
}

/* Inhalt der Spalte vertikal stapeln */
.fiberflow-equal .vc_row.wpb_row > .wpb_column > .vc_column-inner > .wpb_wrapper {
  display: flex !important;
  flex-direction: column;
}

/* Karte selbst (blau+grün) auf volle Höhe strecken */
.fiberflow-equal .gusta-post-meta {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
}


/* ====================================
  Mobile Sachen und Ausblendugen
==================================== */

/* swap-on-mobile */

@media only screen and (max-width: 769px) {
	.swap {
	display: flex !important;
	flex-direction: column-reverse;
	}
}


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

.actionlink {
    display: inline-block;
    transition: transform 0.3s ease;
    transform-origin: center center;
}

.actionlink:hover {
    transform: scale(1.03);
}


/* ====================================
  CSS zur Skalierung von Bildern ohne zusätzlichen Abstand
==================================== */

.specific-container img.scale-with-padding {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-block !important; /* statt block -> zentrierbar über text-align */
  transform: scale(0.5) !important;
  transform-origin: center center !important;
}

.specific-container img {
  width: auto !important;
  max-width: 35% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  display: inline-block !important; /* verhindert Links-Drift bei kleinerer Breite */
  vertical-align: top !important;
  float: none !important;
}

/* Angepasster Abstand zwischen den Bereichen */

@media (min-width: 769px) {
  .custom-gap .vc_row {
    display: flex; /* Sicherstellen, dass Flexbox verwendet wird */
    flex-wrap: nowrap; /* Verhindern, dass Spalten umbrechen */
  }

  .custom-gap .vc_row .vc_column_container {
    flex: 1; /* Spalten gleichmäßig verteilen */
  }

  .custom-gap .vc_row .vc_column_container:nth-child(2) {
    margin-left: clamp(4vw, 6vw, 10vw) !important; /* Dynamischer Abstand mit clamp */
    border-left: none !important; /* Entfernt die Linie */
  }
}

@media (max-width: 768px) {
  .custom-gap .vc_row {
    display: block; /* Zeilen werden bei kleineren Auflösungen übereinander gestapelt */
  }

  .custom-gap .vc_row .vc_column_container:nth-child(2) {
    margin-left: 0 !important; /* Kein Abstand bei kleinen Auflösungen */
    border-left: none !important; /* Entfernt die Linie */
  }
}


/* ====================================
   scale-with-padding-more
==================================== */

.specific-container .scale-with-padding-more .vc_single_image-wrapper,
.specific-container .scale-with-padding-more figure {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  display: block !important;
}

.specific-container .scale-with-padding-more img.vc_single_image-img,
.specific-container .scale-with-padding-more .vc_single_image-wrapper img {
  width: 6vw !important;
  max-width: 6vw !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  object-fit: contain !important;
  transform: none !important;
  float: none !important;
  aspect-ratio: auto !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .specific-container .scale-with-padding-more img.vc_single_image-img,
  .specific-container .scale-with-padding-more .vc_single_image-wrapper img {
    width: 6vw !important;
    max-width: 6vw !important;
    max-height: none !important;
  }
}


/* ===========================================
   SCROLL FADE ohne und mit Farbweschel
   =========================================== */

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
}

/* .wrapper soll Übergang zeigen */
.wrapper {
  transition: background-color 0.3s ease;
}

/* Scroll-Effekt – wie bisher */
.scroll-fade,
.scroll-fade-color {
  opacity: 0;
  transform: translateY(40px);
  filter: grayscale(100%);
  will-change: opacity, transform, filter;
  transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
}

.scroll-fade.visible,
.scroll-fade-color.visible {
  opacity: 1;
  transform: translateY(0);
  filter: grayscale(0%);
}

.wrapper, .site-content, .main-content {
  transition: background-color 0.3s ease;
}

.site-wrapper {
  transition: background-color 0.4s ease;
}

/* Mobile – keine Animation */
@media (max-width: 1199px) {
  .scroll-fade,
  .scroll-fade-color {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}


/* ===========================================
   WP Bakery Pagebuilder CSS Animas faster
   =========================================== */

.fadein {
    animation-duration: 0.2s !important;
    animation-timing-function: ease-out !important;
}


/* ===========================================
   Carousel Pfeile custom – 25% kleiner + grün + Hover schwarz
   =========================================== */

.ult-carousel-wrapper{
  position: relative !important;
}

/* Pfeile Standard */
.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 (vorher: 40/5vw/70) */
  width: clamp(30px, 3.75vw, 52.5px) !important;
  height: clamp(30px, 3.75vw, 52.5px) !important;

  /* Hintergrund grün */
  background-color: #0fa461 !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;
}

/* Pfeile links/rechts */
.slick-prev.slick-arrow{
  left: -25px !important;
  background-image: url('https://www.runningframes.de/wp-content/uploads/2025/04/pfeil-links-weiss.svg') !important;
}
.slick-next.slick-arrow{
  right: -25px !important;
  background-image: url('https://www.runningframes.de/wp-content/uploads/2025/04/pfeil-rechts-weiss.svg') !important;
}

/* Hover: Hintergrund schwarz + Pfeile weiß */
.slick-prev.slick-arrow:hover{
  background-color: #000 !important;
  background-image: url('https://www.runningframes.de/wp-content/uploads/2025/04/pfeil-links-weiss.svg') !important;
}
.slick-next.slick-arrow:hover{
  background-color: #000 !important;
  background-image: url('https://www.runningframes.de/wp-content/uploads/2025/04/pfeil-rechts-weiss.svg') !important;
}

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

/* Mobil: auch 25% kleiner (vorher: 25/5vw/40) */
@media (max-width: 768px){
  .slick-prev.slick-arrow,
  .slick-next.slick-arrow{
    width: clamp(18.75px, 3.75vw, 30px) !important;
    height: clamp(18.75px, 3.75vw, 30px) !important;
  }
  .slick-prev.slick-arrow{ left: -10px !important; }
  .slick-next.slick-arrow{ right: -10px !important; }
}


/* ===========================================
   Maus-scroll animation von Links nach rechts
   =========================================== */

.scroll-lr {
  transform: translateX(600px); /* weiter rechts starten */
  transition: transform 0s;
  will-change: transform;
}


/* ===========================================
   Vertikaler Font
   =========================================== */

.verticalfont {
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  text-orientation: mixed !important;
}


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

.carousel-wrapper {
  position: absolute !important;
  top: 20% !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;
  }
}


/* ====================================
   Slider Sachen
==================================== */

@media (max-width: 1199px) {
  /* Auf jeden Fall Slick-Elemente nullen */
  .slider-padding-mobile .slick-slider,
  .slider-padding-mobile .slick-list,
  .slider-padding-mobile .slick-track,
  .slider-padding-mobile .slick-slide {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Auch die Spalten nullen */
  .slider-padding-mobile .wpb_column,
  .slider-padding-mobile .wpb_column > .vc_column-inner,
  .slider-padding-mobile .vc_column-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Die Row selber */
  .slider-padding-mobile.vc_row,
  .slider-padding-mobile .vc_row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Die Klasse selber */
  .slider-padding-mobile {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Dots positionieren im Slider */
.slick-dots {
  position: absolute !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
}

/* Slider-Container auf relative setzen, damit absolute Position der Dots funktioniert */
.slider-padding-mobile {
  position: relative !important;
}

/* Unter 1200px: Dots näher an unteren Rand */
@media (max-width: 1199px) {
  .slider-padding-mobile .slick-dots {
    bottom: 0px !important; /* oder 0px, je nach Bedarf */
  }
}

/* Dots grösser und bereinigt */
.ult-carousel-wrapper .ultsl-record {
  all: unset !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background-color: #fff !important; /* inaktiv: weiß */
  margin: 0 4px !important;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  position: relative;
}

/* Entferne mögliche Pseudo-Elemente */
.ult-carousel-wrapper .ultsl-record::before,
.ult-carousel-wrapper .ultsl-record::after {
  display: none !important;
  content: none !important;
}

/* Aktiver Punkt: dein Wunschblau */
.ult-carousel-wrapper .slick-dots li.slick-active .ultsl-record {
  background-color: #12a15d !important;
  transform: scale(1.2);
}

/* Slider-Container auf volle breite */
@media (max-width: 1199px) {
  .ult-carousel-wrapper.ult_horizontal {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ====================================
   text-overlay-left: Text als Zitate mit z-index und weissen hintergrund
==================================== */

.text-overlay-left {
  position: absolute !important;
  top: 50% !important;
  left: 0% !important; /* statt 5% */
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  color: white !important;
  text-align: left !important;
  background: #12a15d !important;
  min-height: 1px;
  width: 40% !important;  
  max-width: 700px !important;
  padding: 4vh 4vw !important;
}

/* Linie (10px) außen drunter – trifft genau dein Column-Element */
.wpb_column.vc_column_container.text-overlay-left.specific-container{
  position: absolute !important; /* zur Sicherheit */
  overflow: visible !important;
}

/* die Linie */
.wpb_column.vc_column_container.text-overlay-left.specific-container::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -09px !important;   /* außen drunter */
  width: 100% !important;
  height: 15px !important;
  background: #60ae7e !important;  /* Farbe */
  display: block !important;
  z-index: 999999 !important;
  pointer-events: none !important;
}

.text-overlay-right {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  color: white !important;
  text-align: right !important;
  background: #ffffff !important;
	min-height: 1px; 
  width: 50% !important;
  max-width: 600px !important;
  padding: 4vh 4vw !important;  /* Abstand innen */
}

/* ====================================
   text-overlay-left-small (inkl. Reset für WPBakery-Abstände)
==================================== */

.text-overlay-left-small{
  position: absolute !important;
  top: 48% !important;
  left: 0% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  color: #fff !important;
  text-align: left !important;
  background: #12a15d !important;
  min-height: 1px;
  width: 40% !important;
  max-width: 700px !important;

  /* 25% mehr Höhe (oben/unten) */
  padding: 6vh 6vw !important;
}

/* WPBakery/Theme-Abstände im Overlay entfernen (vc_column-inner + wpb_wrapper + Headings) */
.wpb_column.vc_column_container.text-overlay-left-small > .vc_column-inner{
  padding: 0 !important;
}

.wpb_column.vc_column_container.text-overlay-left-small .wpb_wrapper{
  margin: 0 !important;
  padding: 0 !important;
}

.wpb_column.vc_column_container.text-overlay-left-small h1,
.wpb_column.vc_column_container.text-overlay-left-small h2,
.wpb_column.vc_column_container.text-overlay-left-small h3,
.wpb_column.vc_column_container.text-overlay-left-small h4,
.wpb_column.vc_column_container.text-overlay-left-small h5,
.wpb_column.vc_column_container.text-overlay-left-small p{
  margin-top: 0 !important;
  margin-bottom: 0.8em !important;
}

.wpb_column.vc_column_container.text-overlay-left-small h1:last-child,
.wpb_column.vc_column_container.text-overlay-left-small h2:last-child,
.wpb_column.vc_column_container.text-overlay-left-small h3:last-child,
.wpb_column.vc_column_container.text-overlay-left-small h4:last-child,
.wpb_column.vc_column_container.text-overlay-left-small h5:last-child,
.wpb_column.vc_column_container.text-overlay-left-small p:last-child{
  margin-bottom: 0 !important;
}

@media (max-width: 1200px){
  .text-overlay-left-small{
    display: none !important;
  }
}

/* Bild-Spacer */
.image-space{
  margin-left: 25% !important;
}

@media (max-width: 1200px){
  .image-space{
    margin-left: 0% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ====================================
   Button Arrow
==================================== */

/* Basis Button-Style bleibt */
.custom-button-style {
  font-family: var(--h4-font-family, inherit) !important;
  font-size: var(--h4-font-size, clamp(0.74rem, 1vw, 1.23rem)) !important;
  font-weight: var(--h4-font-weight, bold) !important;
  line-height: var(--h4-line-height, 1.3) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #101015 !important; /* Schriftfarbe */
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  text-decoration: none !important;
}

/* Bestehendes Icon ersetzen */
.custom-button-style i,
.custom-button-style span.vc_btn3-icon {
  width: 1.2em;
  height: 1.2em;
  background-image: url('https://master-foodscience.com/wp-content/uploads/2025/04/arrowleft.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  font-style: normal; /* Wichtig: Kein echtes Font-Icon mehr */
  color: transparent; /* Falls noch Schrift-Icon da ist */
  transition: background-image 0.3s ease; /* sanfter Übergang beim Hover */
}

/* Hover: Icon auf weiß ändern */
.custom-button-style:hover i,
.custom-button-style:hover span.vc_btn3-icon {
  background-image: url('https://master-foodscience.com/wp-content/uploads/2025/04/arrowleft-white.png');
}

@media (max-width: 1199px) {
  /* Button-Größe verkleinern */
  .vc_btn3-size-lg {
    font-size: 0.8rem !important;
    padding: 0.4em 1em !important;
  }

  /* Icon-Größe anpassen */
  .vc_btn3-size-lg i,
  .vc_btn3-size-lg span.vc_btn3-icon {
    width: 1em !important;
    height: 1em !important;
  }

  /* Icon komplett ausblenden */
  .vc_btn3-size-lg i,
  .vc_btn3-size-lg span.vc_btn3-icon {
    display: none !important;
  }
}


/* ===========================================
   Marquee Loop
   =========================================== */

/* === [DIL] Marquee Loop — CSS (rAF, jitterless) for H2/H3/H4 === */

/* Ziel-Headings: Klasse am Textblock ODER direkt am Heading */
.wpb_text_column.marquee-live .wpb_wrapper > h2,
.wpb_text_column.marquee-live .wpb_wrapper > h3,
.wpb_text_column.marquee-live .wpb_wrapper > h4,
h2.marquee-live,
h3.marquee-live,
h4.marquee-live {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  margin: 0;
  /* Abstand zwischen Wiederholungen (0 = keine Lücke) */
  --gap: 5px;
  /* alte Experimente neutralisieren */
  animation: none !important;
  transform: none !important;
}

/* Track unsichtbar bis „ready“ -> kein Start-Jitter */
.marq-track{
  display: inline-flex;
  will-change: transform;
  visibility: hidden;
  transform: translate3d(0,0,0);
}
.marquee-ready .marq-track{ visibility: visible; }

/* Einzelne Wiederholung */
.marq-item{
  flex: 0 0 auto;
  white-space: nowrap !important;
  padding-right: var(--gap);
}

/* Marquee Text weiß */
.wpb_text_column.marquee-live .wpb_wrapper > h2,
.wpb_text_column.marquee-live .wpb_wrapper > h3,
.wpb_text_column.marquee-live .wpb_wrapper > h4,
h2.marquee-live,
h3.marquee-live,
h4.marquee-live,
.wpb_text_column.marquee-live .marq-item,
h2.marquee-live .marq-item,
h3.marquee-live .marq-item,
h4.marquee-live .marq-item{
  color: #fff !important;
}


/* ===========================================
   Social Media Tab-icon ersetzen
   =========================================== */

.vc_tta-icon.fa-share-alt::before {
  content: "" !important;
}

.vc_tta-icon.fa-share-alt {
  background-image: url('https://relaunch.dil-engineering.com/wp-content/uploads/2025/10/Side-sticky-social.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 80px 80px !important; /* ← Größer geht nicht sauber */
  width: 80px !important;                /* ← Fläche gleich wie Tab */
  height: 80px !important;
  display: inline-block !important;
  font-size: 0 !important;
  color: transparent !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  border: none !important;
  box-shadow: none !important;
  vertical-align: middle !important;

  /* VERFÄRBUNG VERHINDERN */
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background-blend-mode: normal !important;
  background-color: transparent !important;
}

/* -----------------------------
   A-Tag begrenzen
   ----------------------------- */
.vc_tta-tab > a {
  width: 80px !important;
  height: 80px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;

  /* ERZWINGE: keine Überlagerung */
  filter: none !important;
  opacity: 1 !important;
}

/* -----------------------------
   Tab-Element begrenzen
   ----------------------------- */
.vc_tta-tab {
  width: 80px !important;
  height: 80px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* -----------------------------
   UL-Liste der Tabs (z.B. vertikale Leiste)
   ----------------------------- */
ul.vc_tta-tabs-list {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  gap: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Optional (falls andere LI-Tabs ungleich sind) */
ul.vc_tta-tabs-list > li.vc_tta-tab {
  width: 80px !important;
  height: 80px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}


/* =========================================================
   SMART SECTION BUTTON - EIGENE PFEIL-ICONS (blackarrow / whitearrow)
   ========================================================= */

/* 1) Standard-Material-Icon ausblenden */
.blackarrow.gusta-icon-link i.vc-material-arrow_forward,
.whitearrow.gusta-icon-link i.vc-material-arrow_forward {
  color: transparent !important;
  font-size: 0 !important;
}

/* 2) Gesamter Button-Inhalt (Text + Icon) korrekt ausrichten */
.blackarrow.gusta-icon-link,
.whitearrow.gusta-icon-link {
  display: inline-flex !important;
  align-items: center !important;       /* Text + Icon vertikal mittig */
  justify-content: center !important;
  gap: 0.3em !important;                /* kleiner Abstand zwischen Icon & Text */
  text-decoration: none !important;
  line-height: 1 !important;
  transform: translateY(2px);           /* Text leicht nach unten versetzt (~2px) */
}

/* 3) Icon-Container (runder Kreis) zentrieren */
.blackarrow.gusta-icon-link .gusta-icon,
.whitearrow.gusta-icon-link .gusta-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(1.75rem, 3vw, 2.25rem) !important;   /* Kreisgröße */
  height: clamp(1.75rem, 3vw, 2.25rem) !important;
  flex-shrink: 0 !important;
}

/* 4) Eigenes Icon direkt im <i>-Element anzeigen */
.blackarrow.gusta-icon-link i.vc-material-arrow_forward,
.whitearrow.gusta-icon-link i.vc-material-arrow_forward {
  display: block !important;
  width: clamp(1rem, 2vw, 1.5rem) !important;       /* Pfeilgröße */
  height: clamp(1rem, 2vw, 1.5rem) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  line-height: 1 !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* 5) Schwarzer Pfeil */
.blackarrow.gusta-icon-link i.vc-material-arrow_forward {
  background-image: url("https://relaunch.dil-engineering.com/wp-content/uploads/2025/10/pfeil-rechts-black.png") !important;
}

/* Hover: Pfeil weiß */
.blackarrow.gusta-icon-link:hover i.vc-material-arrow_forward,
.blackarrow.gusta-icon-link:focus-visible i.vc-material-arrow_forward{
  background-image: url("https://relaunch.dil-engineering.com/wp-content/uploads/2025/10/pfeil-rechts-white.png") !important;
}

/* 6) Weißer Pfeil */
.whitearrow.gusta-icon-link i.vc-material-arrow_forward {
  background-image: url("https://relaunch.dil-engineering.com/wp-content/uploads/2025/10/pfeil-rechts-white.png") !important;
}

/* 7) Feinjustierung: Icon bei großen Auflösungen 15% kleiner */
@media (min-width: 1600px) {
  .blackarrow.gusta-icon-link i.vc-material-arrow_forward,
  .whitearrow.gusta-icon-link i.vc-material-arrow_forward {
    width: clamp(0.9rem, 1.8vw, 1.3rem) !important;
    height: clamp(0.9rem, 1.8vw, 1.3rem) !important;
  }
}


/* =========================================================
   Ultimate Addons - List Element anpassungen
   ========================================================= */

/* UABB Info List – Kreis weitere 25% kleiner */
ul.smile_icon_list.left.circle.with_bg{
  --icon: 35px;  /* vorher 47px */
  --gap: 12px;   /* vorher 16px */
}

/* Kreisgröße + Icon zentriert */
ul.smile_icon_list.left.circle.with_bg li .icon_list_icon{
  width: var(--icon) !important;
  height: var(--icon) !important;
  line-height: var(--icon) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
}

/* Text links daneben mit konstantem Abstand */
ul.smile_icon_list.left.circle.with_bg li .icon_description{
  margin-left: calc(var(--icon) + var(--gap)) !important;
}

/* Connector-Linie exakt durch die Kreismitte */
ul.smile_icon_list.left.circle.with_bg li .icon_list_connector{
  left: calc(var(--icon) / 2) !important;
  right: auto !important;
  transform: translateX(0) !important;
}

/* PNG-Icons 35% kleiner als der Kreis */
ul.smile_icon_list.left.circle.with_bg li .icon_list_icon img{
  width: calc(var(--icon) * 0.65) !important; /* 0.65 = 35% kleiner */
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* (1) Deine globalen H3-Werte EINMAL festlegen */
:root{
  --h3-size: clamp(22px, 1.6vw, 28px);
  --h3-line: 1.25;
  --h3-weight: 700;
}

/* (2) UABB Info List: H3 soll die obigen Werte nutzen (overrides inline) */
ul.smile_icon_list.left.circle.with_bg h3.ult-responsive.info-list-heading{
  font-size: var(--h3-size) !important;
  line-height: var(--h3-line) !important;
  font-weight: var(--h3-weight) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin: 0 0 .35em !important;
}

/* UABB Info List – Bullets aus dem WP-Editor mit deiner P-Typo + Farbe */
ul.smile_icon_list.left.circle.with_bg .icon_description ul,
ul.smile_icon_list.left.circle.with_bg .icon_description ol{
  margin: 0 0 .75em !important;
  padding-left: 1.25em !important;     /* Einzug für Bullets */
  list-style-position: outside !important;
}

ul.smile_icon_list.left.circle.with_bg .icon_description li{
  font-size: clamp(1rem, 1.1vw, 3rem) !important;        /* wie p */
  line-height: 1.5 !important;
  font-family: 'Metropolis-regular', Arial, sans-serif !important;
  color: #161922 !important;
  margin: 0 0 .25em !important;
}

/* Bullet/Marker einfärben (falls Theme/Browser es nicht automatisch erbt) */
ul.smile_icon_list.left.circle.with_bg .icon_description li::marker{
  color: #161922;
}

/* Links im Listentext: gleiche Typo/Farbe erben */
ul.smile_icon_list.left.circle.with_bg .icon_description li a{
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
}

/* Viereckige Bullets */
ul.smile_icon_list.left.circle.with_bg .icon_description ul{
  list-style-type: square !important;
}

ul.smile_icon_list.left.circle.with_bg .icon_description li::marker{
  color: #161922;                /* Farbe wie Text */
  font-size: 1em;                /* ggf. 0.9–1.2 justieren */
}


/* ===========================================
   Vertikale Anordnung (4 Zonen)
   Spalten-Klasse: vertikale-anordnung
   Elemente: element-oben, element-halbmitte, element-mitte, element-unten
   =========================================== */

/* ------- EDITIERBARE ABSTANDS-VARIABLEN ------- */
/* Oben → Halbmitte  */ 
.vertikale-anordnung { --gap-oben-halb: clamp(1.5px, 0.225vw, 4.5px); }
/* Halbmitte → Mitte */ 
.vertikale-anordnung { --gap-halb-mitte: clamp(18px, 2.7vw, 48px); }
/* (optional) Mindestabstand Mitte → Unten */
.vertikale-anordnung { --gap-mitte-unten: 0; } /* z.B. clamp(8px, 1.2vw, 18px) */
/* Unten → Unterkante (Rand)  */
.vertikale-anordnung { --gap-unterer-rand: 0; } /* z.B. clamp(8px, 2vh, 24px) */

/* ---------------------------------------------- */

/* Wrapper als Flex-Spalte mit etwas Reserve unten */
.vertikale-anordnung .wpb_wrapper{
  display:flex !important;
  flex-direction:column !important;
  min-height:100% !important;
  height:100% !important;
  padding-bottom:clamp(6px, 1.5vh, 20px) !important; /* etwas kleiner + responsive */
}

/* WPBakery/Theme-Helfer neutralisieren */
.vertikale-anordnung .gusta-clear{ display:none !important; }
.vertikale-anordnung .gusta-align-left{ display:contents !important; }

/* Grundlayout */
.vertikale-anordnung .element-oben,
.vertikale-anordnung .element-halbmitte,
.vertikale-anordnung .element-mitte,
.vertikale-anordnung .element-unten{
  flex:0 0 auto !important;
}

/* 1) Oberer Block – kompakter Abstand darunter
      ► Abstände anpassen: --gap-oben-halb */
.vertikale-anordnung .element-oben{
  margin-bottom: var(--gap-oben-halb) !important;      /* ← HIER */
}

/* 2) Halbmitte – etwas mehr Luft als oben
      ► Abstände anpassen: --gap-halb-mitte */
.vertikale-anordnung .element-halbmitte{
  margin-bottom: var(--gap-halb-mitte) !important;     /* ← HIER */
}

/* 3) Mitte füllt den Raum – optional zentriert/links
      ► optionaler Mindestabstand zur unteren Zone: --gap-mitte-unten */
.vertikale-anordnung .element-mitte{
  flex:1 1 auto !important;              /* <<< wächst */
  display:flex !important;
  align-items:center !important;          /* falls links: flex-start */
  justify-content:flex-start !important;
  min-height:0 !important;                /* Overflow-Schutz im Flex-Container */
  margin-bottom: var(--gap-mitte-unten) !important;    /* ← HIER (optional) */
}

/* 4) Unten – sitzt verlässlich am Spaltenende 
      ► Abstand zur Unterkante: --gap-unterer-rand */
.vertikale-anordnung .element-unten{
  margin-top:auto !important;             /* <<< schiebt nach unten */
  align-self:flex-start !important;
  margin-bottom: var(--gap-unterer-rand) !important;   /* ← HIER */
}

/* (Optional) Mobile Feinschliff */
@media (max-width: 768px){
  .vertikale-anordnung .element-oben{        margin-bottom:clamp(4px, 1.5vw, 10px) !important; }
  .vertikale-anordnung .element-halbmitte{   margin-bottom:clamp(6px, 2vw, 14px) !important; }
  .vertikale-anordnung .wpb_wrapper{         padding-bottom:clamp(8px, 2.5vh, 18px) !important; }
  .vertikale-anordnung .element-unten{       margin-bottom:clamp(10px, 3vh, 24px) !important; }
}

/* --- BOTTOM-FIX: Button wirklich ganz unten --- */

/* 1) Unterkante-Padding der Column & des Wrappers deaktivieren
      (wir steuern den unteren Abstand über --gap-unterer-rand) */
.vertikale-anordnung .vc_column-inner,
.vertikale-anordnung .wpb_wrapper{
  padding-bottom: 0 !important;
}

/* 2) Der mittlere Bereich darf überlassenen Raum wirklich nutzen */
.vertikale-anordnung .element-mitte{
  flex: 1 1 auto !important;
  min-height: 0 !important; /* verhindert, dass innerer Inhalt Flex sprengt */
  align-items: flex-start !important; /* optional statt center */
}

/* 3) Button-Zone: nach unten drücken & KEINE Restabstände (außer via --gap-unterer-rand) */
.vertikale-anordnung .element-unten{
  margin-top: auto !important;   /* schiebt nach unten */
  align-self: flex-start !important;
}

/* 4) Eventuelle Default-Margins des Buttons selbst neutralisieren */
.vertikale-anordnung .element-unten a,
.vertikale-anordnung .element-unten .gusta-button,
.vertikale-anordnung .element-unten .gusta-read-more-button{
  margin-bottom: 0 !important;
}

/* 5) Builder-"Clears" ausschalten, damit nichts dazwischen funkt */
.vertikale-anordnung .gusta-clear,
.vertikale-anordnung .gusta-mobile-clear{ 
  display: none !important; 
}

/* 6) Falls dein Theme Wrapper mit eigener Unterkante setzt: neutralisieren */
.vertikale-anordnung .wpb_wrapper > *:last-child{
  margin-bottom: 0 !important;
}

/* ---------- Icon-Größe im oberen Bereich fixen ---------- */
/* Wunschgröße zentral einstellbar */
.vertikale-anordnung { 
  --icon-size: clamp(50px, 4vw, 90px);  /* ← bei Bedarf anpassen */
}

/* Bild/SVG in element-oben nie groß ziehen */
.vertikale-anordnung .element-oben img,
.vertikale-anordnung .element-oben svg,
.vertikale-anordnung .element-oben .vc_single_image-img {
  width: auto !important;                 /* überschreibt img{width:100%} */
  max-width: var(--icon-size) !important; /* begrenzt Breite */
  max-height: var(--icon-size) !important;/* begrenzt Höhe (für SVGs hilfreich) */
  height: auto !important;
  display: inline-block !important;
}

/* (optional) Figure/Wrapper verhindert Stretching */
.vertikale-anordnung .element-oben .wpb_single_image,
.vertikale-anordnung .element-oben figure,
.vertikale-anordnung .element-oben .wpb_wrapper_pc_figure {
  display: inline-flex !important;
  align-items: flex-start !important;
}

/* Optional: auf sehr kleinen Screens etwas kleiner */
@media (max-width: 768px){
  .vertikale-anordnung { --icon-size: clamp(32px, 6vw, 56px); }
}


/* ====================================
   Sticky beim Scrollen nach oben
==================================== */

.gusta-navigation.sticky-up{
  position: fixed;
  top: var(--adminbar, 0);
  left: 0; right: 0;
  transform: translateY(-100%);
  transition: transform .25s ease;
  z-index: 10020; /* bei Bedarf anheben/absenken */
}
.gusta-navigation.sticky-up.show-sticky{
  transform: translateY(0);
}

/* Untermenüs NUR ausblenden, wenn das Sticky-Menü sichtbar ist */
.gusta-navigation.sticky-up.show-sticky .sub-menu,
.gusta-navigation.sticky-up.show-sticky .gusta-mega,
.gusta-navigation.sticky-up.show-sticky [class*="mega-menu"],
.gusta-navigation.sticky-up.show-sticky [class*="mega-panel"]{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.gusta-navigation.sticky-up.show-sticky .menu-item-has-children:hover > .sub-menu,
.gusta-navigation.sticky-up.show-sticky .menu-item-has-children:focus-within > .sub-menu{
  display: none !important;
}

/* Pfeil/Dropdown-Caret im Sticky-Menü ausblenden */
.gusta-navigation.sticky-up .menu-item-has-children > a::after,
.gusta-navigation.sticky-up .gusta-nav > ul > li > a::after,
.gusta-navigation.sticky-up .gusta-arrow,
.gusta-navigation.sticky-up .menu-caret,
.gusta-navigation.sticky-up .sub-toggle,
.gusta-navigation.sticky-up .gusta-menu-caret{
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
}
/* Falls der Pfeil Platz reserviert hat (rechts) */
.gusta-navigation.sticky-up .menu-item-has-children > a{
  padding-right: 0 !important;
  background-image: none !important;
}


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

/* === Info-Box: Icon kleiner + vertikal zur H4 zentriert + +10px Gap === */
:root{
  /* Typo */
  --h4: clamp(0.8rem, 1.5vw, 1.7rem);
  --h4-line: 1.3;
  --h4-track: -0.8px;
  --p: clamp(1rem, 1vw, 2.3rem);
  --p-line: 1.5;
  --font: 'Barlow-Semibold', Arial, sans-serif;

  /* Icon + Abstände */
  --ib-icon-h: clamp(20px, 1.5vw, 60px);   /* 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; }
.aio-icon-box .aio-icon-description :is(p,li){ font: 400 var(--p)/var(--p-line) var(--font) !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}



/* ====================================
   Smart Section – "Post featuring image as background": Bild transparent
==================================== */

/* nur der Wrapper mit dieser ID (Präfix reicht) */
[id^="el-152253"] .gusta-image-as-background{
  background:none !important;
  opacity:0 !important;        /* killt auch Inline-!important-Background */
  box-shadow:none !important;
}


/* =========================================
   Einheitliche Bullet-Listen (ohne feste Farben)
   - .bullet-points  → eckige Marker (::marker)
   - .bullet-points-produkte
   - .bullet-point-pfeil → Pfeil-Icon als Background
   - .bullet-point-chek → Check-Icon als Background
   ========================================= */

/* ===== bullet-points ===== */
.bullet-points{
  --bp-color:#161922; --lh:1.4;
  color:var(--bp-color)!important;
}
.bullet-points .bp-list{
  margin:0!important; padding-left:1.3em!important;
  list-style:square outside!important; color:inherit!important;
}
.bullet-points .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:var(--lh)!important;
  margin:.20em 0 .04em!important; letter-spacing:-.2px;
  font-family:'Metropolis-medium',Arial,sans-serif!important; color:inherit!important;
}
.bullet-points .bp-list li::marker{ font-size:1.4em!important; color:currentColor!important; }
.bullet-points .bp-list a{ color:inherit!important; text-decoration:underline; }

/* ===== bullet-point-pfeil ===== */
.bullet-point-pfeil{
  --bp-color:#161922; --lh:1.8;
  --h:15px; --ar:1.315789; --gap:10px; --offset:-2px; /* Pfeil-Params (150×114) */
  color:var(--bp-color)!important;
}
.bullet-point-pfeil .bp-list{
  margin:0!important; padding:0!important; list-style:none!important;
  color:inherit!important; /* <- Farbe erben ( #161922 ) */
}
.bullet-point-pfeil .bp-list 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; /* identisch zu .bullet-points */
  padding-left:calc(var(--h)*var(--ar) + var(--gap))!important;
  background-image:url("https://relaunch.dil-engineering.com/wp-content/uploads/2025/10/pfeil-rechts-black.png")!important;
  background-repeat:no-repeat!important;
  background-position:left calc(((var(--lh)*1em - var(--h)) / 2) + var(--offset))!important;
  background-size:calc(var(--h)*var(--ar)) var(--h)!important;
}
.bullet-point-pfeil .bp-list li a{ color:inherit!important; }
/* Fallback, falls noch <span> statt <ul> vorhanden */
.bullet-point-pfeil .ss-element-item{
  display:block!important; color:inherit!important;
  font:normal clamp(1rem,1vw,2.3rem)/var(--lh) 'Metropolis-medium',Arial,sans-serif!important;
  letter-spacing:-.2px; margin:.20em 0 .04em!important;
  padding-left:calc(var(--h)*var(--ar) + var(--gap))!important;
}

/* ===== bullet-point-chek (Check-Icon) ===== */
.bullet-point-chek{
  --bp-color:#fff; --lh:1.4;                 /* Text jetzt weiß */
  --h:20px; --ar:1; --gap:10px; --offset:0px;
  color:var(--bp-color)!important;
}
.bullet-point-chek .bp-list{ margin:0!important; padding:0!important; list-style:none!important; color:inherit!important; }
.bullet-point-chek .bp-list 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-image:url("https://relaunch.dil-engineering.com/wp-content/uploads/2025/11/check-icon-white.png")!important;
  background-repeat:no-repeat!important;
  background-position:left calc(((var(--lh)*1em - var(--h)) / 2) + var(--offset))!important;
  background-size:calc(var(--h)*var(--ar)) var(--h)!important;
}
.bullet-point-chek .bp-list li a{ color:inherit!important; }
/* Fallback */
.bullet-point-chek .ss-element-item{
  display:block!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;
}

/* Bestehende .bullet-points in weiss */

/* Zusatz: Variante in Weiß */
.bullet-points.bullet-points-white {
  --bp-color: #fff;
}

.bullet-points.bullet-points-white .bp-list li{
  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important; /* 25% transparentes Weiß */
  padding-bottom: 0.2em !important; /* kleiner Abstand zur Linie */
}

/* Optional: letzte Zeile ohne Linie */
.bullet-points.bullet-points-white .bp-list li:last-child{
  border-bottom: none !important;
}


/* =========================================
   FIX: Social Icons im Footer + Sticky nicht aufblasen (News/Blog)
   Ziel: nur die Icon-Images (img.img-icon) wieder klein halten
========================================= */

/* Footer Icons */
footer .ult-just-icon-wrapper .aio-icon-img img.img-icon,
footer .ult-just-icon-wrapper img.img-icon{
  width: 50px !important;
  height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
}

/* Seiten-Sticky Icons (rechts) */
#gusta-sticky .ult-just-icon-wrapper .aio-icon-img img.img-icon,
.section-sticky .ult-just-icon-wrapper .aio-icon-img img.img-icon,
.section-sticky img.img-icon{
  width: 70px !important;
  height: 70px !important;
  max-width: 70px !important;
  max-height: 70px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
}

/* Falls eine Blog-Regel den Container aufbläst */
footer .ult-just-icon-wrapper,
.section-sticky .ult-just-icon-wrapper,
footer .aio-icon-img,
.section-sticky .aio-icon-img{
  width: auto !important;
  height: auto !important;
  max-width: none !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;
}


/* =========================================================
   PRODUKTE – Post Listing Cards: gleiche Höhe (pro Reihe)
   + Restfläche unten IMMER grün (#12A15D)
   + nach 4 Items automatisch neue Reihe (Item 5 nicht abgeschnitten)
   Scope: Post Listing Extra Class = produkte-equal-cards
========================================================= */

.produkte-equal-cards{
  --p-green: #12A15D;
}

/* ---------------------------------------------------------
   DESKTOP/TABLET: Flex-Wrap + feste Spaltenbreiten
--------------------------------------------------------- */
@media (min-width: 768px){

  /* Grid als Flex + Wrap */
  .produkte-equal-cards .gusta-grid{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    overflow: visible !important; /* wichtig gegen "cut" */
  }

  /* Default: Tablet 2 Spalten */
  .produkte-equal-cards .gusta-grid > .column{
    float: none !important;
    width: auto !important;

    flex: 0 0 50% !important;
    max-width: 50% !important;

    display: flex !important;              /* Equal Height pro Reihe */
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 0 !important;
  }

  /* Desktop 4 Spalten */
  @media (min-width: 992px){
    .produkte-equal-cards .gusta-grid > .column{
      flex: 0 0 25% !important;
      max-width: 25% !important;
    }
  }

  /* Card-Outer: füllt Column-Höhe, aber OHNE min-height:100% */
  .produkte-equal-cards .gusta-grid > .column > .post-listing-container.show-container{
    flex: 1 1 auto !important;

    height: auto !important;
    min-height: 0 !important;

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

    background: var(--p-green) !important; /* Restfläche grün */
    overflow: hidden !important;           /* sauber clippen */
    position: relative !important;
  }
}

/* ---------------------------------------------------------
   OBERER BEREICH (Bild / Headline) bleibt weiß
--------------------------------------------------------- */
.produkte-equal-cards .post-listing-container.show-container .gusta-post-meta.gusta-align-center{
  background: #fff !important;
  flex: 0 0 auto !important;
}

/* Falls im oberen Block Wrapper/Elemente selbst Farben setzen */
.produkte-equal-cards .post-listing-container.show-container
.gusta-post-meta.gusta-align-center,
.produkte-equal-cards .post-listing-container.show-container
.gusta-post-meta.gusta-align-center *{
  background-color: transparent !important;
}
.produkte-equal-cards .post-listing-container.show-container
.gusta-post-meta.gusta-align-center{
  background-color:#fff !important;
}

/* ---------------------------------------------------------
   GRÜNER BEREICH (Produkteigenschaften)
   wächst bis zum Boden (Equal Height), Rest bleibt grün (Outer)
--------------------------------------------------------- */
.produkte-equal-cards .post-listing-container.show-container .gusta-post-meta.gusta-align-left{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
}

/* In diesem Bereich darf NICHTS weiß “reinknallen” */
.produkte-equal-cards .post-listing-container.show-container
.gusta-post-meta.gusta-align-left,
.produkte-equal-cards .post-listing-container.show-container
.gusta-post-meta.gusta-align-left *{
  background: transparent !important;
}

/* WPBakery-Wrapper im grünen Bereich muss flexibel sein */
.produkte-equal-cards .post-listing-container.show-container
.gusta-post-meta.gusta-align-left .wpb_wrapper{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Clears raus */
.produkte-equal-cards .post-listing-container.show-container
.gusta-post-meta.gusta-align-left .gusta-clear,
.produkte-equal-cards .post-listing-container.show-container
.gusta-post-meta.gusta-align-left .gusta-mobile-clear{
  display: none !important;
}

/* Empty Space: am Ende halten */
.produkte-equal-cards .post-listing-container.show-container
.gusta-post-meta.gusta-align-left .vc_empty_space{
  margin-top: auto !important;
  background: transparent !important;
}

/* ---------------------------------------------------------
   MOBILE: kein Equal-Height erzwingen
--------------------------------------------------------- */
@media (max-width: 767px){
  .produkte-equal-cards .gusta-grid{
    display: block !important;
  }
  .produkte-equal-cards .gusta-grid > .column{
    display: block !important;
    max-width: none !important;
  }
  .produkte-equal-cards .gusta-grid > .column > .post-listing-container.show-container{
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }
  .produkte-equal-cards .post-listing-container.show-container .gusta-post-meta.gusta-align-left{
    display: block !important;
  }
}


/* ====================================
     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
  Heller Farbverlauf aus Bildfarben
  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,
      transparent 20vw,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      #eef1f3 0%,
      #e9edf0 38%,
      #e4e8ec 72%,
      #dfe4e8 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 */
@media (max-width: 1299px) {
  .white-cut-left,
  .carousel-white-cut-left {
    background-image:
      linear-gradient(
        180deg,
        #eef1f3 0%,
        #e9edf0 38%,
        #e4e8ec 72%,
        #dfe4e8 100%
      ) !important;
    background-color: transparent !important;
  }
}


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

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

/* Button-Link */
.vc_btn3-container.lifood-file-button > a.vc_btn3,
.vc_btn3-container.lifood-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.lifood-file-button > a.vc_btn3::after,
.vc_btn3-container.lifood-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;

  background:url("https://dil-engineering.com/wp-content/uploads/2026/03/downloadicon.png") center/contain no-repeat!important;

  pointer-events:none!important;
}

/* Zweite Zeile (Dateityp + Größe) */
.vc_btn3-container.lifood-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;
  letter-spacing:-0.01em!important;
  opacity:1!important;
}

/* =========================================
   lifood-link-button
========================================= */

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

/* Button-Link */
.vc_btn3-container.lifood-link-button > a.vc_btn3,
.vc_btn3-container.lifood-link-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: linear-gradient(to left, #DDEEF6, #D5ECF3) !important;
  border:none!important;
  border-radius:15px!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;
  text-decoration:none!important;

  position:relative!important;
  padding-right:64px!important;

  align-items:center!important;
  min-height:64px!important;
}

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

  background:url("https://relaunch.li-food.de/wp-content/uploads/2026/04/link.png") center/contain no-repeat!important;

  pointer-events:none!important;
}


/* =========================================
   Farben ohne Innenabstände
========================================= */

/* Blau */
.blue-full-no-gap,
.blue-full-no-gap > .vc_column-inner {
  background: #48b9e6 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Grün */
.green-full-no-gap,
.green-full-no-gap > .vc_column-inner {
  background: #8fba13 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Grün */
.lila-full-no-gap,
.lila-full-no-gap > .vc_column-inner {
  background: #d53e8d !important;
  border: none !important;
  box-shadow: none !important;
}

/* orange */
.orange-full-no-gap,
.orange-full-no-gap > .vc_column-inner {
  background: #f5a42e !important;
  border: none !important;
  box-shadow: none !important;
}

/* yellow */
.yellow-full-no-gap,
.yellow-full-no-gap > .vc_column-inner {
  background: #fdc800 !important;
  border: none !important;
  box-shadow: none !important;
}