/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/
/* ====================================
Font Fix
==================================== */
@font-face{
font-family:"Metropolis-Regular";
src:url("https://relaunch.dil-ev.de/wp-content/uploads/2025/03/Metropolis-Regular.woff")
format("woff"),
url("https://relaunch.dil-ev.de/wp-content/uploads/2025/03/Metropolis-Regular.ttf")
format("truetype");
font-weight:normal;
font-style:normal;
font-display:swap
}
@font-face{
font-family:"Metropolis-Medium";
src:url("https://relaunch.dil-ev.de/wp-content/uploads/2025/03/Metropolis-Medium.woff")
format("woff"),
url("https://relaunch.dil-ev.de/wp-content/uploads/2025/03/Metropolis-Medium.ttf")
format("truetype");
font-weight:normal;font-style:normal;
font-display:swap
}
@font-face{
font-family:"Metropolis-Semibold";
src:url("https://relaunch.dil-ev.de/wp-content/uploads/2025/03/Metropolis-SemiBold.woff")
format("woff"),
url("https://relaunch.dil-ev.de/wp-content/uploads/2025/03/Metropolis-SemiBold.ttf")
format("truetype");
font-weight:normal;
font-style:normal;
font-display:swap
}
@font-face{
font-family:"Metropolis-Bold";
src:url("https://relaunch.dil-ev.de/wp-content/uploads/2025/03/Metropolis-Bold.woff")
format("woff"),
url("https://relaunch.dil-ev.de/wp-content/uploads/2025/03/Metropolis-Bold.ttf")
format("truetype");
font-weight:normal;
font-style:normal;
font-display:swap
}
#el-82214324163e6287ed344b>ul>li>a {
font-family: 'Metropolis-Semibold' !important;
}
#main-header {
display: block !important;
}
.gusta-section .container {
max-width: 100%;
padding: 0 !important;
margin: 0 !important;
}
.gusta-section.header-section .vc_row {
margin: 0 !important;
padding: 0 !important;
}
.gusta-logo img {
max-height: 100%;
width: auto;
}
.vc_figure a {
border-color: #ffffff !important;
}
.vc_figure a:hover {
border-color: #ffffff !important;
}
.tg-filter.tg-filter-active, .tg-filter:hover {
background: #0092ae !important;
}
.tg-filter-name {
font-size: 120% !important;
}
.portfolio.type-portfolio .section-post-header {
display: none;
}
@media screen and (max-width: 768px) {
.actionlink .wpb_wrapper {
position: relative;
}
}
@media screen and (max-width: 1024px) {
.gusta-icon-link {
font-size: 100% !important;
}
}
/* ====================================
Entfernt obere & untere Abstände bei Zeilen
==================================== */
/* Entfernt Header-Gesamtabstände */
header#Header,
.header-wrapper,
.gusta-site-logo,
.gusta-header-row,
.header-stack,
.gusta-align-left .wpb_wrapper,
.vc_row[style*="padding-top"],
.vc_row[style*="padding-bottom"] {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
}
/* Entfernt vertikale Abstände bei Zeilen */
.vc_row,
.mfn-row,
.section,
.section_wrapper,
.content_wrapper {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
/* Wichtiger Zusatz für WPBakery Inline-Styling */
box-sizing: border-box;
}
/* Entfernt Padding/Margin bei Spalten */
.vc_column_container,
.mfn-column,
.wpb_column {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Entfernt Abstand in Inner-Wrappern */
.wpb_wrapper,
.mfn-wrapper,
.vc_column-inner {
padding: 0 !important;
margin: 0 !important;
}
/* Text- und Content-Elemente zurücksetzen */
.wpb_text_column,
.wpb_content_element {
margin: 0 !important;
padding: 0 !important;
}
/* Headings ohne Abstand */
.section .section_title,
.section .column_title,
h1, h2, h3, h4, h5, h6 {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* BeTheme: Intro/Header-Sektion (section-post-header) Abstand global entfernen */
header.section.mcb-section.section-post-header,
header.section.mcb-section.section-post-header *{
padding-block:0 !important;
margin-block:0 !important;
min-height:0 !important;
}
header.section.mcb-section.section-post-header::before,
header.section.mcb-section.section-post-header::after,
header.section.mcb-section.section-post-header *::before,
header.section.mcb-section.section-post-header *::after{
content:none !important;
display:none !important;
height:0 !important;
}
/* ====================================
mpc-column a:hover
==================================== */
.mpc-column a:hover {
text-decoration: none !important;
}
/* ====================================
Doppelter Scrollbalken entfernen
==================================== */
body {overflow: hidden;}
/* ====================================
gusta-nav
==================================== */
.gusta-nav {
width: 100% !important;
}
.gusta-nav>ul>li {
flex-grow: 1;
flex-basis: 0;
}
.gusta-align-right.gusta-inline {
padding-top: 0px !important;
}
.gusta-nav.horizontal>ul>li.menu-item-has-children>a:before {
position: absolute !important;
right: 0 !important;
}
.gusta-nav>ul>li>a,
.gusta-nav>ul>li>ul>li>a,
.gusta-nav>ul>li>ul>li>ul>li>a {
white-space: nowrap;
}
/* menu word-break */
.ss-element * {
word-break: keep-all !important;
}
/* ====================================
gusta-nav Logo scale
==================================== */
.gusta-logo, .gusta-logo a {
height: clamp(50px, 4vw, 70px) !important;
}
/*dil-navigation font scale*/
.dil-navigation > ul {
display: flex;
align-items: center;
}
/* Menü + Sprachumschalter: responsive skalierend (Megamenüs ausgeschlossen) */
.dil-navigation ul:not([id^="menu-dil-megamenu-"]) > li > a,
.dil-navigation ul:not([id^="menu-dil-megamenu-"]) > li > a span,
.lang-switch .wpml-ls a {
font-size: clamp(18px, 1.2vw, 28px) !important;
line-height: clamp(30px, 5vw, 40px) !important;
text-align: center;
display: inline-block;
box-sizing: border-box;
}
/* Sprachschalter: nur line-height trennen */
.lang-switch .wpml-ls.wpml-ls-legacy-list-horizontal li a {
line-height: 0 !important;
padding-block: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
/* ====================================
Mega-Menüs
==================================== */
/* === Mega-Menüs – kleinere Typo, linksbündig (Klasse: .megamenu) === */
.megamenu .menu,
[id^="menu-dil-megamenu-"] {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
gap: 6px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Mega-Menü Eigenschaften */
.megamenu .menu > li > a,
.megamenu .menu > li > a span,
[id^="menu-dil-megamenu-"] > li > a,
[id^="menu-dil-megamenu-"] > li > a span {
font-size: clamp(12px, 1vw, 18px) !important;
padding: 10px 14px !important;
text-align: left !important;
display: block !important;
width: 100% !important;
}
[id^="menu-dil-megamenu-"] > li > a {
line-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
display: flex !important;
align-items: center !important; /* Text vertikal mittig */
}
/* ====================================
Menu-Pfeil
==================================== */
/* Menu-Pfeil – kompakt */
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li>a{position:relative;padding-right:22px}
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li>a::after{content:"";position:absolute;top:50%;right:0;transform:translateY(-50%);width:10px;height:10px;background:url("https://relaunch.dil-ev.de/wp-content/uploads/2025/09/chevrondown.png") center/contain no-repeat!important;pointer-events:none}
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li>a:hover::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li:hover>a::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li>a:focus-visible::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li.current-menu-item>a::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li.current_page_item>a::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li.current-menu-ancestor>a::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li.current_page_ancestor>a::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li.current-menu-parent>a::after,
.dil-navigation ul:not([id^="menu-dil-megamenu-"])>li>a[aria-current="page"]::after{background-image:url("https://relaunch.dil-ev.de/wp-content/uploads/2025/09/chevrondown-over.png")!important}
/* ==========================================
Mega-Menü – Pfeile & Trennlinien (GLOBAL)
Gilt für alle IDs, die mit gusta-mega-menu- beginnen
========================================== */
[id^="gusta-mega-menu-"] ul[class*="gusta-nav"]{margin:0!important;padding:0!important;list-style:none!important}
[id^="gusta-mega-menu-"] ul[class*="gusta-nav"]>li{
margin:0!important;padding:0!important;position:relative!important;
display:flex!important;align-items:center!important;
/* Basis-Reihenhöhe responsiv */
min-height:clamp(26px, 18px + 0.6vw, 34px)!important;
}
[id^="gusta-mega-menu-"] ul[class*="gusta-nav"]>li>a{
--mm-icon: clamp(10px, 0.70vw, 12px); /* Icongröße responsiv */
position:relative!important;display:block!important;flex:1 1 auto!important;margin:0!important;
padding:0!important;
text-indent:var(--mm-icon)!important; /* 0px zusätzlicher Abstand */
background:none!important
}
[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.dil-ev.de/wp-content/uploads/2025/09/pfeil-rechts-black.png") center/contain no-repeat!important
}
[id^="gusta-mega-menu-"] ul[class*="gusta-nav"]>li>a:is(:hover,:focus,:active,[aria-current="page"])::before,
[id^="gusta-mega-menu-"] ul[class*="gusta-nav"]>li:is(.current-menu-item,.current_page_item,.is-active,.active)>a::before{
background-image:url("https://relaunch.dil-ev.de/wp-content/uploads/2025/10/pfeil-rechts-gruen.png")!important
}
/* NUR größte Auflösung: +25% Zeilenabstand (34px → 40px) */
@media (min-width: 1920px){
[id^="gusta-mega-menu-"] ul[class*="gusta-nav"]>li{
min-height:40px!important;
}
}
.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;text-align:left!important;background:0 0!important;border:0!important;box-shadow:none!important;min-height:0!important;vertical-align:middle!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}
/* ====================================
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;
}
/* ====================================
Content Abdunkeln bei Megamenu öffnen
==================================== */
:root {
--mm-dim: 0.75; /* Stärke 0.6–0.9 */
--mm-dim-dur: .10s; /* Übergangsdauer */
--mm-dim-delay: .10s; /* Delay nur beim Einschalten */
}
.mm-dim-target{
/* Kein Delay im Normalzustand (sofortes Ausblenden) */
transition: filter var(--mm-dim-dur) ease 0s;
will-change: filter;
}
body.mm-dim .mm-dim-target{
/* Delay nur beim Rein-Dimmen */
transition-delay: var(--mm-dim-delay);
filter: brightness(var(--mm-dim));
}
/* Header/Megamenü niemals abdunkeln */
#gusta-head,
[id^="gusta-mega-menu-"]{ filter: none !important; }
/* ====================================
Schrift groessen
==================================== */
/*p Schrift groesse*/
p {
font-size: clamp(0.9rem, 0.9vw, 1.5rem); /* kleinste grösse 1rem, maximal 1.5rem */
line-height: 1.5; /* Einheitliche Zeilenhöhe */
font-family: 'Metropolis-Medium' !important;
letter-spacing: -0.02em; /* Buchstabenabstand */
}
.p-logoclaim-schrift p {
font-size: clamp(0.6rem, 0.8vw, 0.8rem) !important;
line-height: 1.1 !important;
font-family: 'Metropolis-Medium' !important;
letter-spacing: -0.02em !important;
}
/* H1 Schriftgröße */
h1 {
font-size: clamp(1.5rem, 2.6vw, 2.6rem);
line-height: 1.1;
font-family: 'Metropolis-Bold', Arial, sans-serif !important;
letter-spacing: -0.02em; /* Buchstabenabstand */
}
.h1-custom-font h1 {
font-size: clamp(1.5rem, 2.0vw, 2.0rem);
line-height: 1.1;
font-family: 'Metropolis-Medium', Arial, sans-serif !important;
letter-spacing: -0.03em; /* Buchstabenabstand */
color: #003300 !important;
}
/* Unter 991px kleinere Schrift */
@media (max-width: 991px) {
.h1-custom-font h1 {
font-size: clamp(1.5rem, 2.0vw, 2.0rem);
}
}
/*H2 Schrift groesse*/
h2 {
font-size: clamp(1.5rem, 2.6vw, 2.6rem);
line-height: 1.1;
font-family: 'Metropolis-Bold', Arial, sans-serif !important;
letter-spacing: -0.02em; /* Buchstabenabstand */
}
.h2-custom-font-zitat h2 {
font-size: clamp(1.5rem, 2.6vw, 2.6rem);
line-height: 1.1;
font-family: 'Metropolis-Bold', Arial, sans-serif !important;
letter-spacing: -0.03em;
color: #003300 !important;
}
/*H3 Schrift groesse*/
h3 {
font-size: clamp(1.5rem, 2.6vw, 2.6rem); /* Skaliert zwischen 120% und 400% */
line-height: 1.1;
font-family: 'Metropolis-Bold', Arial, sans-serif !important;
letter-spacing: -0.02em; /* Buchstabenabstand */
}
.h3-custom-font h3 {
font-family: 'Mohave-Regular', Arial, sans-serif !important;
font-size: clamp(1rem, 1.0vw, 1.0rem);
line-height: 1;
color: #000000 !important;
}
/*H4 Schrift groesse*/
h4 {
font-size: clamp(1.5rem, 1.6vw, 1.6rem); /* Skaliert zwischen 110% und 200% */
line-height: 1.1;
font-family: 'Metropolis-Bold', Arial, sans-serif !important;
letter-spacing: -0.02em; /* Buchstabenabstand */
}
.h4-custom-font h4 {
font-family: 'Mohave-Regular' !important;
font-size: clamp(1.5rem, 2.0vw, 2.0rem);
line-height: 1;
color: #000000 !important;
}
/*H5 Schrift groesse*/
h5 {
font-size: clamp(1rem, 1.25vw, 1.25rem);
line-height: 1.2;
font-family: 'Metropolis-Medium', Arial, sans-serif !important;
letter-spacing: -0.02em; /* Buchstabenabstand */
}
.h5-custom-font h5 {
font-family: 'Mohave-Regular', Arial, sans-serif !important;
font-size: clamp(1rem, 1.0vw, 1.0rem);
line-height: 1;
color: #000000 !important;
}
/*H6 Schrift groesse*/
h6 {
font-size: clamp(0.8rem, 0.8vw, 0.8rem); /* Skaliert zwischen 80% und 100% */
line-height: 1.2;
font-family: 'Metropolis-Regular', Arial, sans-serif !important;
letter-spacing: -0.02em; /* Buchstabenabstand */
}
/* ====================================
Paddings
==================================== */
/*padding-top-35px*/
.vc_column_container > .vc_column-inner { padding-top: 0px !important;
}
/*margin-bottom-15px*/
.wpb_wrapper > div { margin-bottom: 0px !important;
}
/*Padding Menu*/
.paddingmenu {
padding-top: clamp(1vh, 2vh, 1vh) !important;
padding-bottom: clamp(0vh, 0vh, 0vh) !important;
padding-left: clamp(4vw, 8vw, 8vw) !important;
padding-right: clamp(4vw, 8vw, 8vw) !important;
}
/*Padding Mega Menu*/
.paddingmegamenu {
padding-top: clamp(4vh, 3vh, 4vh) !important;
padding-bottom: clamp(4vh, 3vh, 4vh) !important;
padding-left: clamp(3vw, 3vw, 3vw) !important;
padding-right: clamp(3vw, 3vw, 3vw) !important;
}
/*Globales - Padding Top-Bottom*/
.padding-top-first {
padding-top: clamp(0vh, 2vw, 8vh) !important;
}
.padding-bottom-first {
padding-bottom: clamp(0vh, 2vw, 2vh) !important;
}
@media (max-width: 991px) {
.padding-top-first {
padding-top: 2vh !important;
}
.padding-bottom-first {
padding-bottom: 0vh !important;
}
}
.padding-top {
padding-top: clamp(2vh, 4vw, 6vh) !important;
}
@media (max-width: 991px) {
.padding-top {
padding-top: 0vh !important;
}
}
.padding-top-less {
padding-top: clamp(2vh, 2vw, 2vh) !important;
}
/* Unter 991px: Top-Padding fix auf 2vh */
@media (max-width: 991px) {
.padding-top-less {
padding-top: 0vh !important;
}
}
.padding-bottom {
padding-bottom: clamp(3vh, 3vw, 6vh) !important;
}
@media (max-width: 991px) {
.padding-bottom {
padding-bottom: 0vh !important;
}
}
.padding-bottom-less {
padding-bottom: clamp(2vh, 2vw, 2vh) !important;
}
@media (max-width: 991px) {
.padding-bottom-less {
padding-bottom: 0vh !important;
}
}
/*Padding-left-right im Content*/
.padding-left-right-normal {
padding-left: clamp(4vw, 12vw, 18vw) !important;
padding-right: clamp(4vw, 12vw, 18vw) !important;
}
.padding-left-right-more {
padding-left: clamp(4vw, 22vw, 36vw) !important;
padding-right: clamp(4vw, 22vw, 36vw) !important;
}
.padding-left-right-less {
padding-left: clamp(4vw, 12vw, 16vw) !important;
padding-right: clamp(4vw, 12vw, 16vw) !important;
}
@media (max-width: 991px) {
.padding-left-right-less {
padding-left: 2vw !important;
padding-right: 2vw !important;
}
}
.padding-left-right-less-bulletpoints {
padding-left: clamp(4vw, 8vw, 12vw) !important;
padding-right: clamp(4vw, 8vw, 12vw) !important;
}
@media (max-width: 991px) {
.padding-left-right-less-bulletpoints {
padding-left: 7vw !important;
padding-right: 7vw !important;
}
}
.padding-left-right-tiny {
padding-left: clamp(4vw, 8vw, 8vw) !important;
padding-right: clamp(4vw, 8vw, 8vw) !important;
}
/* Unter 991px: fix auf 2vw links/rechts */
@media (max-width: 991px) {
.padding-left-right-tiny {
padding-left: 2vw !important;
padding-right: 2vw !important;
}
}
.padding-left-right-moretiny {
padding-left: clamp(4vw, 4vw, 4vw) !important;
padding-right: clamp(4vw, 4vw, 4vw) !important;
}
/* Unter 991px: fix auf 2vw links/rechts */
@media (max-width: 1300px) {
.padding-left-right-moretiny {
padding-left: 2vw !important;
padding-right: 2vw !important;
}
}
/*Padding überschrift*/
.uberschrift {
padding-top: clamp(0vh, 0vh, 0vh) !important;
padding-bottom: clamp(1vh, 2vh, 3vh) !important;
}
/* Unter 1200px: Bottom-Padding fix auf 2vh */
@media (max-width: 991px) {
.uberschrift {
padding-bottom: 0vh !important;
}
}
/*Padding überschrift viel*/
.uberschriftviel {
padding-top: clamp(0vh, 0vh, 0vh) !important;
padding-bottom: clamp(2vh, 4vh, 6vh) !important;
}
@media screen and (max-width: 991px) {
.uberschriftviel {
padding-bottom: 0vh !important;
}
}
/*Padding Innen*/
.paddinginnen-header {
padding-left: clamp(2vw, 4vw, 6vw) !important;
padding-right: clamp(2vw, 4vw, 6vw) !important;
padding-top: clamp(8vh, 4vh, 12vh) !important;
padding-bottom: clamp(16vh, 32vh, 42vh) !important;
}
.paddinginnen-more {
padding-left: clamp(2vw, 4vw, 6vw) !important;
padding-right: clamp(2vw, 4vw, 6vw) !important;
padding-top: clamp(2vh, 6vh, 8vh) !important;
padding-bottom: clamp(2vh, 6vh, 8vh) !important;
}
@media (max-width: 991px) {
.paddinginnen-more {
padding-top: 2vh !important;
padding-bottom: 2vh !important;
}
}
.paddinginnen-less {
padding-left: clamp(2vw, 2vw, 4vw) !important;
padding-right: clamp(2vw, 2vw, 4vw) !important;
padding-top: clamp(2vh, 2vh, 4vh) !important;
padding-bottom: clamp(2vh, 2vh, 4vh) !important;
}
.paddinginnen-tiny {
padding-left: clamp(1vw, 1vw, 1vw) !important;
padding-right: clamp(1vw, 1vw, 1vw) !important;
padding-top: clamp(0.2vh, 2vh, 2vh) !important;
padding-bottom: clamp(0.2vh, 2vh, 2vh) !important;
}
/* "no-paddinginnen" – alle Innenabstände neutralisieren
Anwendung: class="paddinginnen-less no-paddinginnen" (oder -more / -tiny)
*/
/* Eigenes Padding der Utility-Klassen entfernen */
.paddinginnen-more.no-paddinginnen,
.paddinginnen-less.no-paddinginnen,
.paddinginnen-tiny.no-paddinginnen {
padding: 0 !important;
}
/* WPBakery-Column-Innenabstände & Wrapper-Padding entfernen */
.paddinginnen-more.no-paddinginnen > .vc_column-inner,
.paddinginnen-less.no-paddinginnen > .vc_column-inner,
.paddinginnen-tiny.no-paddinginnen > .vc_column-inner,
.paddinginnen-more.no-paddinginnen .wpb_wrapper,
.paddinginnen-less.no-paddinginnen .wpb_wrapper,
.paddinginnen-tiny.no-paddinginnen .wpb_wrapper {
padding: 0 !important;
}
/* Elemente unter 991px ausblenden:
Klasse z.B. auf das Element/Column/Row setzen: .hide-under-991 */
@media (max-width: 991px) {
.hide-under-991 {
display: none !important;
}
}
/* ====================================
Responsive ausblendungen
==================================== */
/* Ausblendungen Typo-schriften links */
@media (max-width: 991px) {
/* nur die, die als "Contain" Bild laufen – deine PNGs mit Schrift */
.upb_row_bg[style*="background-size: contain"] {
display: none !important;
}
}
/* Ab 991px abwärts: Bild oben, Card/Text direkt DARUNTER,
kein Overlap mehr in dieser Hero-Spalte */
@media (max-width: 991px) {
/* 1) Bildbereich in der Spalte (Background der Spalte) – wie vorher */
.hero-img-top-mobile > .vc_column-inner {
position: relative;
background-position: center top !important;
background-size: cover !important;
/* Höhe des Bildbereichs – bei Bedarf anpassen */
padding-top: 60vw !important;
}
/* 2) Overlap der inneren Zeile abschalten:
paddinginnen-more ist deine innere Row mit dem Content */
.hero-img-top-mobile .paddinginnen-more {
margin-top: 0 !important;
position: static !important;
transform: none !important;
}
/* 3) Falls das Overlap auf der Card-Spalte selbst hängt */
.hero-img-top-mobile .hero-card-4-3-col,
.hero-img-top-mobile .hero-card-4-3-col.vc_column_container,
.hero-img-top-mobile .hero-card-4-3-col.vc_column_container > .vc_column-inner {
margin-top: 0 !important;
top: auto !important;
transform: none !important;
left: auto !important;
right: auto !important;
}
/* 4) Columns in der inneren Zeile sicher vollbreit */
.hero-img-top-mobile .paddinginnen-more > .wpb_column {
width: 100% !important;
max-width: 100% !important;
float: none !important;
}
}
/* MOBILE (unter 991px):
"Leere" 8/4-Placeholder-Column entfernen (verursacht ~13px Abstand)
-> blendet die 2. Spalte (col-sm-4) aus, wenn sie als Platzhalter
hinter einer col-sm-8 kommt */
@media (max-width: 991px) {
/* --- 1) 8/4 Placeholder-Spalte weg --- */
.vc_row.wpb_row.vc_row-flex > .wpb_column.vc_col-sm-8 + .wpb_column.vc_col-sm-4 {
display: none !important;
}
/* Erste Spalte dann auf volle Breite */
.vc_row.wpb_row.vc_row-flex > .wpb_column.vc_col-sm-8 {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
}
/* --- 2) 6/6: NUR die zweite Spalte entfernen, WENN sie leer ist --- */
.vc_row.wpb_row.vc_row-flex
> .wpb_column.vc_col-sm-6
+ .wpb_column.vc_col-sm-6
> .vc_column-inner
> .wpb_wrapper:empty {
/* wir verstecken die Column, aber nur wenn wrapper wirklich leer ist */
}
.vc_row.wpb_row.vc_row-flex
> .wpb_column.vc_col-sm-6
+ .wpb_column.vc_col-sm-6:has(> .vc_column-inner > .wpb_wrapper:empty) {
display: none !important;
}
/* Erste 6er Spalte dann auf volle Breite */
.vc_row.wpb_row.vc_row-flex
> .wpb_column.vc_col-sm-6:has(+ .wpb_column.vc_col-sm-6:has(> .vc_column-inner > .wpb_wrapper:empty)) {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
}
}
/* Carousel: "Stück" Hintergrund unten entfernen
(unter 1300px, greift auch unter 991px) */
@media (max-width: 1300px) {
/* Row selbst: kein Bottom-Padding */
.carousel-row.vc_row,
.carousel-row.vc_row-fluid {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Slider-Spalte / Inner: kein Bottom-Padding */
.carousel-row.vc_row > .wpb_column:nth-child(2) > .vc_column-inner,
.carousel-row.vc_row-fluid > .wpb_column:nth-child(2) > .vc_column-inner {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Ult/Slick Wrapper: unten keine Luft */
.carousel-row .ult-carousel-wrapper,
.carousel-row .ult-carousel-wrapper > [class*="ult-carousel-"],
.carousel-row .ult-carousel-wrapper .slick-slider,
.carousel-row .ult-carousel-wrapper .slick-list,
.carousel-row .ult-carousel-wrapper figure,
.carousel-row .wpb_single_image,
.carousel-row .vc_single_image-wrapper {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* Dots erzeugen oft die Rest-Luft */
.carousel-row .slick-dots {
margin: 0 !important;
padding: 0 !important;
}
}
/* ====================================
3-Spalten-Layout – Klasse: mobile-three-cols
==================================== */
@media (max-width: 1199px) {
.mobile-three-cols .wpb_column,
.mobile-three-cols .vc_column_container {
width: 33.333% !important;
max-width: 33.333% !important;
flex: 0 0 33.333% !important;
}
}
/* ====================================
Dispay im Header Column: hero-card-4-3-col
==================================== */
/* Grund-Layout für die Karten-Column
Extra-Klasse auf der Column: hero-card-4-3-col */
.hero-card-4-3-col.vc_column_container > .vc_column-inner {
position: relative;
background: #ffffff;
box-sizing: border-box;
/* Schatten rundum */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
/* oben & Seiten */
padding-top: 4vh !important;
padding-right: 2vw !important;
padding-left: 2vw !important;
/* flexibles Padding unten (sichtbar ab 1200px aufwärts) */
padding-bottom: 6vw !important;
}
/* Unter 1200px: Padding unten explizit nochmal setzen,
damit WPBakery-Media-Queries nichts wegnehmen */
@media (max-width: 1199px) {
.hero-card-4-3-col.vc_column_container > .vc_column-inner {
padding-bottom: 6vw !important; /* etwas größer für kleinere Screens */
padding-top: 4vh !important;
padding-right: 2vw !important;
padding-left: 2vw !important;
}
}
/* Optional: unter 991px nochmal anpassen, falls nötig */
@media (max-width: 991px) {
.hero-card-4-3-col.vc_column_container > .vc_column-inner {
padding-bottom: 6vw !important;
}
}
/* ====================================
DIL – Hero-Bereich + Band-Hintergrund
==================================== */
/* ------------------------------------------------
1) Hero-Row mit Hintergrundbild
- Extra Class dieser Row: padding-hero-bg
- Bild links/rechts einziehen (Ultimate Addons Layer)
------------------------------------------------ */
.padding-hero-bg {
position: relative;
}
/* Ultimate Addons Hintergrund-Layer in der Hero-Row */
.padding-hero-bg .upb_row_bg {
left: clamp(4vw, 8vw, 12vw) !important;
right: clamp(4vw, 8vw, 12vw) !important;
width: auto !important;
/* KEIN z-index hier setzen – Bild bleibt sichtbar */
}
/* ====================================
Carousel-Row: Text links, Slider rechts
- Row-Klasse: carousel-row
- Desktop: zwei Spalten nebeneinander (Standard)
- Unter 1300px: Text oben, Slider darunter
- Carousel wie Content einrücken (clamp / 2vw)
==================================== */
.carousel-row {
/* bewusst leer gelassen */
}
/* Unter 1300px: Spalten untereinander stapeln + Carousel einrücken */
@media (max-width: 1300px) {
/* Row als Flex-Container mit Umbruch */
.carousel-row.vc_row,
.carousel-row.vc_row-fluid {
display: flex !important;
flex-wrap: wrap !important;
box-sizing: border-box !important;
}
/* Standard-Float der Spalten deaktivieren */
.carousel-row.vc_row > .wpb_column,
.carousel-row.vc_row-fluid > .wpb_column {
float: none !important;
}
/* Linke Spalte (Text) – zuerst, volle Breite */
.carousel-row.vc_row > .wpb_column:nth-child(1),
.carousel-row.vc_row-fluid > .wpb_column:nth-child(1) {
order: 1;
width: 100% !important;
max-width: 100% !important;
}
/* Rechte Spalte (Slider/Bild) – darunter, volle Breite */
.carousel-row.vc_row > .wpb_column:nth-child(2),
.carousel-row.vc_row-fluid > .wpb_column:nth-child(2) {
order: 2;
width: 100% !important;
max-width: 100% !important;
margin-top: 30px;
}
/* Variablen (Tablet) */
.carousel-row {
--cr-pad: clamp(4vw, 8vw, 8vw);
--cr-fix: 16px; /* Feintuning */
}
/* Ult-Carousel-Wrapper + Slick-Container auf Content-Breite zwingen (Tablet) */
.carousel-row .ult-carousel-wrapper,
.carousel-row .ult-carousel-wrapper > [class*="ult-carousel-"],
.carousel-row .ult-carousel-wrapper .slick-slider {
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
width: calc(100vw - (var(--cr-pad) * 2) - var(--cr-fix)) !important;
max-width: calc(100vw - (var(--cr-pad) * 2) - var(--cr-fix)) !important;
margin-left: auto !important;
margin-right: auto !important;
left: auto !important;
right: auto !important;
}
/* Slick “List” innerhalb wieder 100% (Track nicht anfassen!) */
.carousel-row .ult-carousel-wrapper .slick-list {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* Unter 991px: Seitenabstand per clamp (einfach & sauber) */
@media (max-width: 991px) {
.carousel-row {
--cr-pad: clamp(2vw, 3vw, 4vw) !important;
--cr-fix: 0px !important;
}
}
/* ====================================
Weißer "Cut" oben und unten in einer Section
Klasse an die VC-Row hängen: section-cut-white
==================================== */
.section-cut-white {
position: relative;
overflow: hidden; /* damit nichts übersteht */
}
/* Inhalt über den Cuts anzeigen */
.section-cut-white > * {
position: relative;
z-index: 1;
}
/* die beiden weißen Flächen */
.section-cut-white::before,
.section-cut-white::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: clamp(15px, 3vh, 30px); /* Höhe des "Cuts" – nach Geschmack anpassen */
background: #ffffff;
z-index: 0;
pointer-events: none;
}
.section-cut-white::before {
top: 0; /* oberer Cut */
}
.section-cut-white::after {
bottom: 0; /* unterer Cut */
}
@media (max-width: 991px) {
.section-cut-white::before,
.section-cut-white::after {
display: none !important;
}
}
/* ====================================
Schatten-Card, zentriert um das Element herum
==================================== */
.shadow-card {
position: relative;
background-color: #ffffff; /* weiße Karte */
/* x-offset | y-offset | blur | (optional spread) | color */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* mittiger, rundum verteilter Schatten */
}
/* Kein Padding im Inhalt */
.shadow-card .wpb_wrapper {
padding: 0;
}
/* ====================================
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 */
}
}
/* ====================================
Elemte anpinnen oben links
==================================== */
.pinned {
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
padding: 0vw 0vw;
margin: 0;
}
/* ====================================
Verschiebt Buttom nach unten im Layout
==================================== */
/* Spalte mit Button am Fuß */
.btn-bottom-col > .vc_column-inner {
height: 100%;
}
.btn-bottom-col > .vc_column-inner > .wpb_wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
/* Button-Container nach unten schieben */
.btn-bottom-col .vc_btn3-container {
margin-top: auto; /* schiebt den Button an den Spaltenboden */
/* optional: */
align-self: flex-start; /* lässt ihn links ausrichten */
/* padding-top: 1.25rem; // kleiner Abstand nach oben, wenn gewünscht */
}
/* Spalte: Höhe durchreichen */
.btn-bottom-col-2 > .vc_column-inner { height: 100%; }
/* Der UA-Wrapper enthält Text + Button → als Flex-Spalte nutzen */
.btn-bottom-col-2 .ult_animation_holder {
display: flex;
flex-direction: column;
height: 100%;
}
/* Button innerhalb dieses Wrappers nach unten drücken */
.btn-bottom-col-2 .ult_animation_holder .vc_btn3-container {
margin-top: auto;
align-self: flex-start; /* optional: links ausrichten */
}
/* Newsletter: Icon + Text inline (robust & schlank)
Klasse auf Column: icon-text-inline | Unterzeile: uberschrift */
.icon-text-inline{--icon:75px;--gap:12px}
.icon-text-inline>.vc_column-inner>.wpb_wrapper{position:relative!important;padding-left:calc(var(--icon) + var(--gap))!important}
.icon-text-inline .wpb_single_image{position:absolute!important;left:0!important;top:50%!important;transform:translateY(-50%)!important;margin:0!important}
.icon-text-inline .wpb_single_image .vc_single_image-wrapper{width:var(--icon)!important;max-width:var(--icon)!important}
.icon-text-inline .wpb_single_image img.vc_single_image-img{width:var(--icon)!important;max-width:var(--icon)!important;min-width:var(--icon)!important;height:auto!important;display:block!important}
.icon-text-inline .wpb_text_column{margin:0!important}
.icon-text-inline h4{margin:0!important;line-height:1.1!important}
.icon-text-inline .wpb_text_column.uberschrift p{margin:0!important;line-height:1.2!important}
/* ====================================
Padding & Margin von WPBakery Column komplett entfernen
==================================== */
.no-spacing.wpb_column,
.no-spacing .vc_column-inner,
.no-spacing .wpb_wrapper {
padding: 0 !important;
margin: 0 !important;
}
@media (max-width: 1199px) {
.no-spacing.wpb_column,
.no-spacing .vc_column-inner,
.no-spacing .wpb_wrapper {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
.vc_column-inner {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Unter 1200px: wieder etwas Luft oben und unten */
@media (max-width: 1199px) {
.vc_column-inner {
padding-top: 0vh !important;
padding-bottom: 0vh !important;
}
/* Extra: letzter inner Container bekommt unten Abstand */
.vc_column-inner:last-child {
padding-bottom: 0vh !important;
}
}
/*Margin-bottom für Smart-Sections */
/* exakt deine Karte – ID absichtlich doppelt für maximale Spezifität */
#gusta-post-41#gusta-post-41.post-listing-container.show-container{
margin-bottom:0 !important;
}
/* ====================================
Bilder breiter im Advamnced Carousel
==================================== */
/* Carousel hat die Extra-Klasse "no-flex" */
.no-flex .vc_row.vc_row-flex,
.no-flex .vc_row.vc_row-o-equal-height {
display: block !important; /* Flex der Row abschalten */
}
/* Equal-height gibt auch den Spalten Flex – zurücksetzen */
.no-flex .vc_row.vc_row-o-equal-height > .vc_column_container,
.no-flex .vc_row.vc_row-flex > .vc_column_container,
.no-flex .vc_row.vc_row-flex > .vc_column_container > .vc_column-inner {
display: block !important;
flex: none !important;
align-items: initial !important;
justify-content: initial !important;
}
/* Falls Slick die Slides klont: gleiche Regel auch für Klone */
.no-flex .slick-slide .vc_row.vc_row-flex {
display: block !important;
}
/* ====================================
Entfernt abstand zwischen Content und Footer
==================================== */
.the_content_wrapper {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* ====================================
actionlink
==================================== */
.actionlink {
box-sizing: border-box;
padding: 50px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
margin: 0 auto;
}
.actionlink:hover {
-ms-transform: scale(1.02); /* IE 9 */
-webkit-transform: scale(1.02); /* Safari 3-8 */
transform: scale(1.02);
opacity: 1;
}
/* ====================================
inline-element
==================================== */
.inline {
display: inline !important;
}
/* ====================================
WPML: nur EN / DE zeigen
==================================== */
/* Flags & lange Namen verbergen */
.wpml-ls .wpml-ls-flag,
.wpml-ls .wpml-ls-native,
.wpml-ls .wpml-ls-display {
display: none !important;
}
/* Links kompakt nebeneinander */
.wpml-ls {
line-height: 1 !important;
margin-left: auto !important; /* drückt den Schalter nach rechts (falls Parent flex ist) */
}
.wpml-ls ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
display: flex !important;
gap: 10px !important;
}
.wpml-ls li {
margin: 0 !important;
padding: 0 !important;
}
.wpml-ls a {
text-decoration: none !important;
font-weight: 600 !important;
color: #000 !important;
}
/* Codes einsetzen */
.wpml-ls-item-en a::before { content: "EN"; }
.wpml-ls-item-de a::before { content: "DE"; }
/* Aktive Sprache leicht abgedunkelt */
.wpml-ls-current-language a {
opacity: 0.6 !important;
}
/* === Rechts ausrichten (nur das Element mit der Extra Class) === */
/* Setze die Extra Class "lang-switch" an das Element mit dem Shortcode */
.lang-switch .wpml-ls {
float: right !important; /* erzwingt Rechtsbündigkeit ohne das Grid/menü zu verändern */
}
/* (kleiner Schutz, falls der Builder dem Element display:block gibt) */
.lang-switch {
display: block !important;
}
/* ====================================
CSS zur Skalierung von Bildern ohne zusätzlichen Abstand
==================================== */
/* Basis: alle Bilder in deinem Bereich standardmäßig 10% */
.specific-container img.vc_single_image-img {
width: 25% !important;
max-width: none !important; /* heb Theme-Regeln wie max-width:100% auf */
height: auto !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Icon rechts ausrichten, wenn Klasse direkt am IMG hängt:
![]()
*/
.specific-container img.vc_single_image-img.icon-right {
margin-left: auto !important;
margin-right: 0 !important;
display: block !important; /* zur Sicherheit noch mal explizit */
}
/* (Optional) Icon rechts ausrichten, wenn Klasse am Wrapper hängt
-> falls du es doch mal so brauchst */
.specific-container .wpb_single_image.icon-right img.vc_single_image-img,
.specific-container .vc_single_image-wrapper.icon-right img.vc_single_image-img {
margin-left: auto !important;
margin-right: 0 !important;
}
/* 25%-Gruppe: Icon breiter */
.specific-container .wpb_single_image.w-25 img.vc_single_image-img,
.specific-container .vc_single_image-wrapper.w-25 img.vc_single_image-img {
width: 30% !important;
}
/* Optional: Wenn du die Scale-Klasse verwendest, NICHT die Breite setzen */
.specific-container img.scale-with-padding {
/* KEIN width hier, sonst werden wieder alle 100% */
transform: scale(0.5) !important;
transform-origin: center center !important;
}
/* Angepasster Abstand zwischen den Bereichen */
@media (min-width: 769px) {
.custom-gap .vc_row {
display: flex;
flex-wrap: nowrap;
}
.custom-gap .vc_row .vc_column_container {
flex: 1;
}
.custom-gap .vc_row .vc_column_container:nth-child(2) {
margin-left: clamp(4vw, 6vw, 10vw) !important;
border-left: none !important;
}
}
@media (max-width: 768px) {
.custom-gap .vc_row {
display: block;
}
.custom-gap .vc_row .vc_column_container:nth-child(2) {
margin-left: 0 !important;
border-left: none !important;
}
}
/* Pfeil-Icon von Betheme für .icon-right deaktivieren */
.specific-container .icon-right:before,
.specific-container .icon-right:after {
content: none !important;
display: none !important;
}
/* ===========================================
Post Carousel Slider Overlay Home
=========================================== */
.carousel-wrapper {
position: absolute !important;
top: 05% !important; /* Statt 50%, damit Text weiter oben */
left: 5% !important;
transform: translateY(50%) !important; /* kein vertikales Verschieben */
z-index: 10 !important;
width: auto !important;
max-width: 700px !important;
text-align: left !important;
background: none !important;
pointer-events: none !important;
}
.carousel-wrapper .wpb_wrapper {
pointer-events: all !important;
padding: 0 !important;
}
.carousel-wrapper p,
.carousel-wrapper div {
text-align: left !important;
}
/* Mobil */
@media (max-width: 991px) {
.carousel-wrapper {
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
margin-top: 2rem;
margin-bottom: 2rem;
z-index: auto;
text-align: center !important;
}
.carousel-wrapper p,
.carousel-wrapper div {
text-align: center !important;
}
}
/* ====================================
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;
}
/* 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;
}
/* 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 */
}
}
/* 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: #013E99 !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 von rechts nach Links animieren - Marquee Loop
=========================================== */
/* 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);
}
/* ===========================================
Carousel Pfeile custom – weiter innen & kleiner
=========================================== */
/* Wrapper vorbereiten */
.ult-carousel-wrapper {
position: relative !important;
}
/* Gemeinsames Styling für beide Pfeile */
.slick-prev.slick-arrow,
.slick-next.slick-arrow {
display: flex !important;
justify-content: center;
align-items: center;
opacity: 1 !important;
visibility: visible !important;
position: absolute !important;
top: 50% !important;
transform: translateY(-50%);
z-index: 99;
/* 25% kleiner als Original */
width: clamp(30px, 4vw, 55px) !important;
height: clamp(30px, 4vw, 55px) !important;
background-color: white !important;
border-radius: 0px !important;
border: none !important;
background-repeat: no-repeat !important;
background-size: 60% !important;
background-position: center !important;
font-size: 0 !important;
transition: background-color 0.3s ease, background-image 0.3s ease;
}
/* Linker Pfeil – weiter rein */
.slick-prev.slick-arrow {
left: 25px !important; /* vorher 10px */
background-image: url('https://relaunch.dil-ev.de/wp-content/uploads/2025/10/pfeil-links-black.png') !important;
}
/* Rechter Pfeil – weiter rein */
.slick-next.slick-arrow {
right: 25px !important; /* vorher 10px */
background-image: url('https://relaunch.dil-ev.de/wp-content/uploads/2025/09/pfeil-rechts-black.png') !important;
}
/* 🖱️ Hover-Effekt */
.slick-prev.slick-arrow:hover {
background-color: #2d2d2d !important;
background-image: url('https://relaunch.dil-ev.de/wp-content/uploads/2025/10/pfeil-links-white.png') !important;
}
.slick-next.slick-arrow:hover {
background-color: #2d2d2d !important;
background-image: url('https://relaunch.dil-ev.de/wp-content/uploads/2025/09/pfeil-rechts-white.png') !important;
}
/* ❌ Standard Slick-Pfeile ausblenden */
.slick-arrow::before,
.slick-prev::before,
.slick-next::before {
display: none !important;
content: none !important;
}
/* 📱 Mobile Optimierung */
@media (max-width: 768px) {
.slick-prev.slick-arrow,
.slick-next.slick-arrow {
width: clamp(20px, 5vw, 35px) !important;
height: clamp(20px, 5vw, 35px) !important;
left: 10px !important;
right: 10px !important;
}
}
/* ===========================================
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;
}
/* ====================================
H4 in "Info Box" auf echte H3-Skala zwingen
==================================== */
/* === Info-Box: Icon kleiner + vertikal zur H4 zentriert + +10px Gap === */
:root{
/* Typo */
--h4: clamp(1.3rem, 1.3vw, 1.3rem);
--h4-line: 2.0;
--h4-track: -0.5px;
--p: clamp(1rem, 1vw, 1.0rem);
--p-line: 1.2;
/* H4-Font */
--font: 'Metropolis-Bold', Arial, sans-serif;
/* P-Font separat */
--font-p: 'Metropolis-Regular', Arial, sans-serif;
/* Icon + Abstände */
--ib-icon-h: clamp(20px, 1.5vw, 50px); /* Icon-Höhe */
--ib-aspect: 1; /* Breite/Höhe – bei Bedarf z.B. 1.6 */
--ib-gap: clamp(0px, 5vw - 10px, 10px); /* responsiver Gap 0→10px */
--icon-nudge: clamp(-5px, (480px - 100vw) / 40, 0px); /* -5px (Desktop) → 0px (mobil) */
--ib-color: #161922;
}
/* H4 */
.aio-icon-box .aio-icon-header :is(h4, h4.aio-icon-title, .aio-icon-title.ult-responsive){
font: 400 var(--h4)/var(--h4-line) var(--font) !important;
letter-spacing: var(--h4-track) !important;
margin: 0 !important;
}
/* Layout: Einzug = Iconbreite + responsiver Gap + feste +10px */
.aio-icon-box.default-icon{
position: relative !important;
padding-left: calc(var(--ib-icon-h) * var(--ib-aspect) + var(--ib-gap) + 10px) !important;
}
/* Icon-Wrapper: absolut, vertikal zur H4 zentriert */
.aio-icon-box.default-icon .aio-icon-default{
position: absolute !important;
left: 0;
top: calc((var(--h4-line) * 1em - var(--ib-icon-h)) / 2 + var(--icon-nudge)) !important;
width: calc(var(--ib-icon-h) * var(--ib-aspect)) !important;
margin: 0 !important;
padding: 0 !important;
}
/* Bild: keine Verzerrung */
.aio-icon-box.default-icon img.img-icon{
height: var(--ib-icon-h) !important;
width: auto !important;
max-width: none !important;
display: block !important;
margin: 0 !important;
}
/* Unterzeile: Farbe/Typo, kein zusätzlicher Einzug */
.aio-icon-component .aio-icon-box.default-icon .aio-icon-description{
padding-left: 0 !important;
margin-top: 0 !important;
color: var(--ib-color) !important;
opacity: 1 !important;
}
.aio-icon-box .aio-icon-description *{
color: inherit !important;
opacity: 1 !important;
}
/* p + li: Metropolis-Medium + Größe aus --p (1rem, 1vw, 1.5rem) */
.aio-icon-box .aio-icon-description :is(p,li){
font: 400 var(--p)/var(--p-line) var(--font-p) !important;
}
.aio-icon-box .aio-icon-description ul{
list-style: square !important;
}
.aio-icon-box .aio-icon-description li::marker{
color: var(--ib-color) !important;
}
/* === Icon-Nudge stufig: mobil 0px, groß schrittweise höher === */
:root{ --icon-nudge: 0px; } /* < 768px → 0px */
@media (min-width: 768px){
:root{ --icon-nudge: 0px; } /* 768–991px */
}
@media (min-width: 992px){
:root{ --icon-nudge: 5px; } /* 992–1279px */
}
@media (min-width: 1280px){
:root{ --icon-nudge: 5px; } /* 1280–1439px */
}
@media (min-width: 1440px){
:root{ --icon-nudge: 10px; } /* ≥ 1440px */
}
/* nutzt die Variable – belass deine bestehende Zeile so */
.aio-icon-box.default-icon .aio-icon-default{
top: calc((var(--h4-line) * 1em - var(--ib-icon-h)) / 2 + var(--icon-nudge)) !important;
}
/* AIO: Restabstand killen, aber linken Einzug der Bullets beibehalten */
.aio-icon-box.default-icon .aio-icon-description :is(ul,ol){
margin:0!important;
padding-left:2.0em!important; /* Einzug für Bullets */
}
.aio-icon-box.default-icon .aio-icon-description li{
margin:0 0 .35em 0!important
}
.aio-icon-box.default-icon .aio-icon-description li:last-child{
margin-bottom:0!important
}
/* ====================================
DIL – WPBakery Accordion Styling
==================================== */
/* 1) Alle Standard-Rahmen & Schatten (außer Headings) entfernen */
.vc_general.vc_tta.vc_tta-accordion,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panels-container,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panels,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-body {
border: none !important;
box-shadow: none !important;
}
/* 1b) Lila Hintergrund komplett entfernen – alles transparent */
.vc_general.vc_tta.vc_tta-accordion,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panels-container,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panels,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-heading,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title > a,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-body {
background: transparent !important;
background-color: transparent !important;
}
/* auch im aktiven Zustand kein Lila */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel.vc_active,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-heading,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-title > a {
background: transparent !important;
background-color: transparent !important;
}
/* 2) Basis-Typografie für Accordion-Titel */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title > a {
font-size: clamp(1rem, 1.4vw, 1.4rem);
line-height: clamp(1.2, 1.3, 1.35);
font-family: 'Metropolis-Semibold', Arial, sans-serif !important;
letter-spacing: -0.01em;
color: #003300 !important;
text-decoration: none;
}
/* 3) Header-Layout: Text links, Icon rechts (Flexbox) */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title > a {
display: flex !important;
align-items: center;
width: 100%;
padding: 0.75rem 2.0rem 0.75rem 0; /* rechts Platz für Icon */
}
/* Linken Abstand im Accordion-Header komplett entfernen */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-heading,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title > a,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title > a .vc_tta-title-text {
padding-left: 3px !important;
margin-left: 0 !important;
}
/* 5) Plus-Icon rechts ALS BILD */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title .vc_tta-controls-icon {
order: 2;
margin-left: auto;
float: none !important;
position: relative !important;
display: flex;
align-items: center;
justify-content: center;
width: 1.4rem; /* Icon-Größe anpassen */
height: 1.4rem;
background-image: url('https://relaunch.dil-ev.de/wp-content/uploads/2025/12/plus-icon.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
font-size: 0; /* evtl. Font-Icon verstecken */
/* leicht nach unten verschieben, damit es optisch zentriert wirkt */
transform: translateY(1px);
}
/* Default-Theme-Linien des Icons komplett abschalten */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title .vc_tta-controls-icon::before,
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-title .vc_tta-controls-icon::after {
content: none !important;
}
/* 6) Linie unter JEDEM Header via box-shadow (Standard-Zustand, geschlossen) */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel-heading {
border: none !important;
box-shadow: inset 0 -3px 0 #003300 !important;
background: transparent !important;
}
/* Beim letzten Element ebenfalls eine Linie anzeigen (wenn NICHT aktiv) */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel:last-child:not(.vc_active) .vc_tta-panel-heading {
box-shadow: inset 0 -3px 0 #003300 !important;
}
/* WICHTIG: Linie beim aktiven (offenen) Panel ausblenden */
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-heading {
box-shadow: none !important;
}
/* ====================================
Bulletpoints im H4-Stil
Klasse: .bulletpoints (auf ODER Wrapper legen)
==================================== */
.bulletpoints ul,
.bulletpoints {
list-style: none; /* Standard-Bullets aus */
margin: 0;
padding-left: 0; /* wir regeln den Abstand selbst */
}
.bulletpoints li {
position: relative;
padding-left: 1.6em; /* Platz für das Quadrat links */
font-family: 'Metropolis-Regular', Arial, sans-serif;
font-size: var(--h4);
line-height: 1.3;
letter-spacing: var(--h4-track);
color: #003300; /* Schriftfarbe */
}
/* Links im Bullet die gleiche Farbe geben */
.bulletpoints li a {
color: inherit;
}
/* Custom-Square-Bullet */
.bulletpoints li::before {
content: "";
position: absolute;
left: 0vw;
top: 0.55em;
transform: translateY(-50%);
width: 0.55em;
height: 0.55em;
border-radius: 0px; /* bleibt viereckig */
background-color: #009447; /* dein Grün */
}
/* ====================================
Corner-mask-left – Basis
==================================== */
/* Row mit Masken-Ecke unten links */
.corner-mask-left,
.corner-mask-left-white {
position: relative;
overflow: hidden;
}
.corner-mask-left::before,
.corner-mask-left-white::before {
content: "";
position: absolute;
bottom: 0;
left: clamp(4vw, 8vw, 8vw); /* Standard-Abstand (z.B. andere Padding-Variante) */
/* 50% von 1080x1080 = 540x540 */
width: 540px;
height: 540px;
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 100%; /* keine Verzerrung, voller Bereich */
pointer-events: none;
}
/* Farbvarianten */
.corner-mask-left::before {
background-image: url("https://relaunch.dil-ev.de/wp-content/uploads/2025/12/corner-mask.png");
}
.corner-mask-left-white::before {
background-image: url("https://relaunch.dil-ev.de/wp-content/uploads/2025/12/corner-mask-white.png");
}
/* ====================================
Variante mit EXTRA Abstand
→ wenn die Row zusätzlich .padding-left-right-normal hat
==================================== */
.padding-left-right-normal.corner-mask-left::before,
.padding-left-right-normal.corner-mask-left-white::before {
left: clamp(4vw, 12vw, 18vw); /* größerer Abstand passend zum Padding */
}
/* Optional: auf Mobile alle Masken ausblenden */
@media (max-width: 991px) {
.corner-mask-left::before,
.corner-mask-left-white::before {
display: none;
}
}