/*
	Theme Name: KNOLLE-DESIGN-Theme
	Theme URI: https://knolle.biz/
	Description: Willkommen zum Knolle-Theme – die perfekte Grundlage für dein Webprojekt! Entwickelt und bereitgestellt von Jens Knolle, bietet dieses Theme eine Auswahl an durchdachten Features, die deine Arbeit mit Wordpress noch effizienter und kreativer machen.
	Author: Jens Knolle
	Author URI: https://knolle.biz/
	Template: Divi
	Version: 1.1.0
	Tag: Child Theme, Knolle Biz 
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/


/* ==========================================================================
   BASIC / RESET
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
}

#page-container { overflow: hidden; }

a[href^="#"] { cursor: pointer !important; }

.mce-panel .mce-stack-layout-item.mce-first {
  position: sticky !important;
  top: 0;
}



/* ==========================================================================
   ROOT: Farben + Transitions
   Schriftgrößen, Zeilenhöhen und Abstände → Divi-Variablen (siehe CLAUDE.md)
   ========================================================================== */
:root {
  /* GLOBAL COLORS */

  --c1:          #2A2B39; 
  --c2:          #2ea3f2;

  --c3:          red;
  --c4:          green;
  --c5:          coral;
  --c6:          purple;

  --white:       #ffffff;
  --black:       #000000;

  --kdac:        #c9dd2e;  /* KD Accent */
	
  --ha1:		 #009fe3;		/* hero-animated-bg farbe 1 */
  --ha2:		 #000000;		/* hero-animated-bg farbe 1 */

		

  /* MOBILES MENÜ (Vollbild) */
  --menu-bg:     #f7f7f5;                           /* Fläche */
  --menu-text:   var(--c1);                         /* Menüpunkte, Knopf im offenen Menü */
  --menu-muted:  rgb(from var(--c1) r g b / 0.55);  /* Nummern //01 */
  --menu-line:   rgb(from var(--c1) r g b / 0.12);  /* Trennlinien */
  --menu-accent: #1774b5;                           /* aktiv, Hover, Call-to-Action – dunkler als --c2 für Kontrast (5,0:1 auf Weiß-Schrift, 4,7:1 auf --menu-bg) */
  --menu-btn:    var(--white);                      /* Knopf "Menü" bei geschlossenem Menü */

  /* TRANSITIONS */
  --tra-3s: all .3s ease-in-out;
  --tra-5s: all .5s ease-in-out;
  --tra-7s: all .7s ease-in-out;
}

/* ==========================================================================
   TYPO
   Größen und Zeilenhöhen kommen aus den Divi-Vorlagen.
   ========================================================================== */
/* Divi setzt für Listen fest line-height: 26px → Wert der Text-Vorlage erben */
.et_pb_module.et_pb_text ol,
.et_pb_module.et_pb_text ul {
  line-height: inherit;
}

.et_pb_module.et_pb_text ol li,
.et_pb_module.et_pb_text ul li {
  padding-bottom: clamp(1.2rem, calc(1.015rem + 0.513vw), 2rem); /* = space-s */
}





/* ==========================================================================
   HEADER – Show / Hide on Scroll
   ========================================================================== */
#kd_header {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#kd_header.hide-header {
  transform: translateY(-100%);
}

#kd_header.show-header {
  transform: translateY(0);
}

body.admin-bar #kd_header {
	top: 32px !important;
}

@media (max-width: 782px) {
	body.admin-bar #kd_header {
		top: 46px !important;
	}
}


.et-db #et-boc .et-l #kd_header {
	background:transparent!important;
	transition: all 0.5s ease;
  border-bottom: 1px solid rgb(from var(--c1) r g b / 0.3);
	}
	
.et-db #et-boc .et-l #kd_header.hide-header {
	opacity: 0;
	margin-top: -150px!important;
	transition: all 0.5s ease;
	}

.et-db #et-boc .et-l #kd_header.show-header {
	opacity: 1;
	margin-top: 0px!important;
	transition: all 0.5s ease;
	background:var(--c1)!important;
	}
	
.et-db #et-boc .et-l #kd_header.show-header {
	border:none
	}
	
.et-db #et-boc .et-l #kd_header .et_pb_row {
	padding:0
	}
	
.et-db #et-boc .et-l #kd_header .et_pb_menu__logo {
	max-width:160px;
	padding:10px 0
	}
	
.et-db #et-boc .et-l #kd_header .et_pb_menu .et-menu li a {
	font-size:1.3rem;
	text-transform:uppercase;
	font-weight:400;
  padding: 20px 0;
	}
	
.et-db #et-boc .et-l #kd_header .et-menu li a {
	position: relative;
	text-decoration: none
	}
	
.et-db #et-boc .et-l #kd_header .et-menu li a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	top: 0;
	background-color: white;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s
	}

.et-db #et-boc .et-l #kd_header .et-menu li.current-menu-item a:before,
.et-db #et-boc .et-l #kd_header .et-menu li a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1)
	}

.et-db #et-boc .et-l #kd_header .et-menu li ul li a:before {
 height:0
}
/*.et-db #et-boc .et-l #kd_header.show-header ul li a {
	color:black!important
	}*/

/*.et-db #et-boc .et-l #kd_header.show-header ul li a:before {
	background-color:var(--c3)
	}*/

/*.et-db #et-boc .et-l #kd_header.show-header ul li.current-menu-item a:before,
.et-db #et-boc .et-l #kd_header.show-header ul li a:hover:before {
	color:var(--c3)!important
	}*/

/*.et-db #et-boc .et-l #kd_header.show-header .et_pb_menu__logo {
	-webkit-filter: invert(100%); 
	filter: invert(100%);
	}*/
	
.et-db #et-boc .et-l #kd_header .menu-icon a {
	background:var(--c1);
	padding: 0 30px!important;
  border-left: 1px solid rgb(from var(--c1) r g b / 0.3);
	border-right: 1px solid rgb(from var(--c1) r g b / 0.3);
	font-size:1.8rem!important
	}

.et-db #et-boc .et-l #kd_header .menu-icon:hover a {
	background:var(--c1)
	}

.et-db #et-boc .et-l #kd_header.show-header .menu-icon a {
	background:var(--c1);
	padding: 0 30px!important;
  border-left: 1px solid rgb(from var(--c1) r g b / 0.3);
	border-right: 1px solid rgb(from var(--c1) r g b / 0.3);
	color:white!important;
	font-size:1.8rem!important
	}
	
.et-db #et-boc .et-l #kd_header .menu-icon a::before {
	display:none
	}

.et-db #et-boc .et-l #kd_header .et-menu li ul li a:before {
 height:0
}
	
@media(min-width:var(--bp2)) and (max-width:var(--bp3)) {
	.et-db #et-boc .et-l #kd_header .et_pb_menu ul li {
		padding:0 10px
		}
}

@media (max-width: 1100px) {
    #dtb-m-menu {
        padding: 60px 0 0 0;
		margin:0;
      z-index:1
    }
	#dtb-m-menu .dtb-mobile-menu>li>a:first-of-type {
    border-top:none
  }
}


















/* END */






/* ==========================================================================
   CONTENT: Hyphenation + Link-Hover
   ========================================================================== */
body {
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.nohyphens {
  -moz-hyphens: none;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
}

.nohyphens.et_pb_module {
  word-wrap: normal !important;
  overflow: visible !important;
}

p a:hover { text-decoration: underline !important; }

.whitelinks a { color: #ffffff; }
.blacklinks a { color: #000; }

/* Dateinamen unter Gallerybild entfernen */
.mfp-title { display: none !important; }

/* 3 Bilder nebeneinander on mobile */
@media only screen and (max-width: 980px) {
  .three-columns .et_pb_column { width: 33.33% !important; }
}

/* Fix Gallery-Thumb-Größe */
@media only screen and (max-width: 980px) {
  .et_pb_gallery_grid .et_pb_gallery_item img { width: 100%; }
}








/* ==========================================================================
   Animated Gradient Hero Background
   Klasse: .hero-animated-bg
   Die drei .hero-bg-blob-Elemente erzeugt custom.js, die Animation läuft per CSS.
   Verlauf (Sinus, per ease-in-out alternate):
     Blob 1: Deckkraft 0.2–1.0, Periode 10 s
     Blob 2: Deckkraft 0.2–1.0, Periode 10 s, 1/6 Periode voraus
     Blob 3: Deckkraft 0.1–0.5, Periode 7 s
   Startwerte (opacity) = Zustand bei t = 0, gelten auch bei reduzierter Bewegung.
   ========================================================================== */

.hero-animated-bg {
  position: relative !important;
  overflow: hidden !important;
  background-color: #000;	
}

.hero-animated-bg > .et_pb_row,
.hero-animated-bg > .et_pb_row_inner {
  position: relative;
  z-index: 1;
}

.hero-bg-blob-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-bg-blob {
  position: absolute;
}

.hero-bg-blob:nth-child(1) {
  width: 130%;
  height: 130%;
  opacity: 0.6;
  animation: kd-hero-blob-a 5s ease-in-out -2.5s infinite alternate;
  background: radial-gradient(
    70% 70% at 10% 20%,
    var(--ha1) 0%,
    var(--ha2) 100%
  );
}

.hero-bg-blob:nth-child(2) {
  width: 110%;
  height: 110%;
  opacity: 0.95;
  animation: kd-hero-blob-a 5s ease-in-out -4.167s infinite alternate;
  background: radial-gradient(
    60% 60% at 90% 80%,
    var(--ha1) 0%,
    var(--ha2) 100%
  );
}

.hero-bg-blob:nth-child(3) {
  width: 100%;
  height: 100%;
  opacity: 0.46;
  animation: kd-hero-blob-b 3.5s ease-in-out -4.2s infinite alternate;
  background: radial-gradient(
    50% 50% at 30% 70%,
    var(--ha1) 0%,
    var(--ha2) 100%
  );
}

@keyframes kd-hero-blob-a {
  from { opacity: 0.2; }
  to   { opacity: 1; }
}

@keyframes kd-hero-blob-b {
  from { opacity: 0.1; }
  to   { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-blob { animation: none; }
}



/* ==========================================================================
   LENIS – Smooth Scrolling (Basis-CSS aus lenis@1.3.26/dist/lenis.css)
   data-lenis-prevent an Elementen, die selbst scrollen sollen (Popups, Karten …)
   ========================================================================== */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}



/* ==========================================================================
   MOBILES MENÜ – Vollbild (bis 980 px)
   Divis Ausklappmenü wird zur Fläche über den ganzen Bildschirm.
   - Nummerierung //01 … vor den Hauptpunkten
   - Menüpunkt mit CSS-Klasse "menu-cta" (Menüs → CSS-Klassen) = Call-to-Action
   - Untermenüs auf-/zuklappbar (Knopf .mobile-toggle aus custom.js)
   - Farben: --menu-* in :root
   Größen hier fest, weil Divi für das Vollbild-Menü keine eigene Einstellung hat
   (Werte = Divi-Variablen, siehe Kommentar).
   ========================================================================== */

/* Header und Menü über allen Inhalten */
.et-l--header,
.et-l--header .et_pb_menu {
  position: relative;
  z-index: 99999;
}

@media only screen and (max-width: 980px) {

  .et_pb_menu .et_mobile_menu {
    --kd-menu-fs:     clamp(3.2rem, calc(2.831rem + 1.026vw), 4.8rem); /* = fs-h2 */
    --kd-menu-fs-sub: clamp(1.7rem, calc(1.631rem + 0.192vw), 2rem);   /* = fs-lead */
    --kd-menu-fs-num: clamp(1.2rem, calc(1.154rem + 0.128vw), 1.4rem); /* = fs-small */
    --kd-menu-gap:    clamp(2rem, calc(1.723rem + 0.769vw), 3.2rem);   /* = space-m */
    --kd-menu-num-w:  3.6rem;

    position: fixed !important;
    inset: 0 !important;
    z-index: 100000;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 12rem 2rem 4rem !important;
    overflow-y: auto;
    background: var(--menu-bg) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    counter-reset: kd-menu;
  }

  /* Menüpunkte */
  .et_pb_menu .et_mobile_menu li {
    position: relative;
  }

  .et_pb_menu .et_mobile_menu li a {
    display: block;
    padding: 1.4rem 0 !important;
    border-bottom: 1px solid var(--menu-line) !important;
    background: transparent !important;
    font-size: var(--kd-menu-fs) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em;
    color: var(--menu-text) !important;
    opacity: 1 !important;
  }

  /* aktiv/Hover – "html body … .et_pb_module", weil Divi die Aktiv-Farbe
     modulbezogen mit !important setzt (.et_pb_menu_0_tb_header …) */
  html body .et_pb_menu.et_pb_module .et_mobile_menu li.current-menu-item > a,
  html body .et_pb_menu.et_pb_module .et_mobile_menu li.current-menu-ancestor > a,
  html body .et_pb_menu.et_pb_module .et_mobile_menu li a:hover {
    color: var(--menu-accent) !important;
  }

  /* Nummerierung //01, //02 … (ohne Call-to-Action) */
  .et_pb_menu .et_mobile_menu > li:not(.menu-cta) {
    counter-increment: kd-menu;
  }

  .et_pb_menu .et_mobile_menu > li:not(.menu-cta) > a:not(.mobile-toggle) {
    display: flex !important;
    align-items: baseline;
    gap: var(--kd-menu-gap);
  }

  .et_pb_menu .et_mobile_menu > li:not(.menu-cta) > a:not(.mobile-toggle)::before {
    content: "//" counter(kd-menu, decimal-leading-zero);
    flex-shrink: 0;
    min-width: var(--kd-menu-num-w);
    font-size: var(--kd-menu-fs-num);
    letter-spacing: 0;
    color: var(--menu-muted);
  }

  /* Untermenü: kleiner, bündig mit dem Text der Hauptpunkte, standardmäßig zu.
     Auf-/Zuklappen über die Grid-Zeile (0fr → 1fr) = echte Höhe, dadurch
     in beide Richtungen gleich weich. Der Menüpunkt bekommt beim Öffnen
     die Klasse dt-open (custom.js). visibility sorgt dafür, dass zugeklappte
     Links nicht per Tastatur erreichbar sind (gegen Divis visible !important). */
  .et_pb_menu .et_mobile_menu li.menu-item-has-children,
  .et_pb_menu .et_mobile_menu li.page_item_has_children {
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows .8s cubic-bezier(.4, 0, .2, 1);
  }

  .et_pb_menu .et_mobile_menu li.dt-open {
    grid-template-rows: auto 1fr;
  }

  .et_pb_menu .et_mobile_menu .sub-menu {
    display: block !important;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden !important;
    padding-left: calc(var(--kd-menu-num-w) + var(--kd-menu-gap)) !important;
    border: none !important;
    box-shadow: none !important;
    transition: opacity .5s ease, visibility 0s linear .8s;
  }

  .et_pb_menu .et_mobile_menu li.dt-open > .sub-menu {
    opacity: 1;
    visibility: visible !important;
    transition: opacity .6s ease .15s, visibility 0s;
  }

  .et_pb_menu .et_mobile_menu .sub-menu li a {
    padding: 1rem 0 !important;
    font-size: var(--kd-menu-fs-sub) !important;
    letter-spacing: 0;
  }

  /* Auf-/Zu-Knopf fürs Untermenü (rechts in der Zeile des Hauptpunkts) */
  .et_pb_menu .et_mobile_menu li > a.mobile-toggle {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 4.8rem;
    height: calc(2.8rem + 1.15 * var(--kd-menu-fs));
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  .et_pb_menu .et_mobile_menu li > a.mobile-toggle::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--menu-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center / 2.4rem no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M212.24,100.24l-80,80a6,6,0,0,1-8.48,0l-80-80a6,6,0,0,1,8.48-8.48L128,167.51l75.76-75.75a6,6,0,0,1,8.48,8.48Z'/%3E%3C/svg%3E") center / 2.4rem no-repeat;
    transition: transform .3s ease;
  }

  .et_pb_menu .et_mobile_menu li.dt-open > a.mobile-toggle::after {
    transform: rotate(180deg);
  }

  /* Call-to-Action: gleiche Größe, Akzentfarbe, bündig mit dem Text */
  .et_pb_menu .et_mobile_menu li.menu-cta {
    margin-top: var(--kd-menu-gap);
  }

  .et_pb_menu .et_mobile_menu li.menu-cta > a {
    padding-left: calc(var(--kd-menu-num-w) + var(--kd-menu-gap)) !important;
    border: none !important;
    color: var(--menu-accent) !important;
  }

  /* Einträge blenden gestaffelt ein */
  .mobile_nav.opened .et_mobile_menu > li {
    animation: kd-menu-in .5s cubic-bezier(.2, .7, .2, 1) both;
  }

  .mobile_nav.opened .et_mobile_menu > li:nth-child(2) { animation-delay: .05s; }
  .mobile_nav.opened .et_mobile_menu > li:nth-child(3) { animation-delay: .10s; }
  .mobile_nav.opened .et_mobile_menu > li:nth-child(4) { animation-delay: .15s; }
  .mobile_nav.opened .et_mobile_menu > li:nth-child(5) { animation-delay: .20s; }
  .mobile_nav.opened .et_mobile_menu > li:nth-child(6) { animation-delay: .25s; }
  .mobile_nav.opened .et_mobile_menu > li:nth-child(n+7) { animation-delay: .30s; }

  /* Knopf bleibt über der Fläche */
  .et_pb_menu .mobile_menu_bar {
    position: relative;
    z-index: 100001;
  }

  /* Header bleibt sichtbar, solange das Menü offen ist
     (und ohne transform, sonst wäre die Fläche auf den Header begrenzt) */
  #kd_header:has(.mobile_nav.opened),
  .et-db #et-boc .et-l #kd_header:has(.mobile_nav.opened) {
    transform: none !important;
    opacity: 1 !important;
    margin-top: 0 !important;
  }

  /* Seite hinter dem Menü nicht scrollen */
  html:has(.mobile_nav.opened),
  body:has(.mobile_nav.opened) {
    overflow: hidden;
  }
}

@keyframes kd-menu-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile_nav.opened .et_mobile_menu > li { animation: none; }
  .et_pb_menu .et_mobile_menu li,
  .et_pb_menu .et_mobile_menu .sub-menu { transition: none !important; }
}

/* Menü-Knopf: "Menü" + drei Striche, offen: "Schließen" + X im Kreis */
.et_pb_menu .mobile_menu_bar {
  display: flex !important;
  align-items: center;
  gap: 1.2rem;
  line-height: 1 !important;
  color: var(--menu-btn);
  cursor: pointer;
}

.et_pb_menu .mobile_menu_bar::before {
  content: "Menü" !important;
  position: static !important;
  display: block !important;
  transform: none !important;
  font-family: inherit !important; /* statt Divi-Iconfont: Schrift des Menümoduls */
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: currentColor !important;
}

.et_pb_menu .mobile_menu_bar::after {
  content: "";
  display: block;
  width: 5.6rem;
  height: 5.6rem;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M222,128a6,6,0,0,1-6,6H40a6,6,0,0,1,0-12H216A6,6,0,0,1,222,128ZM40,70H216a6,6,0,0,0,0-12H40a6,6,0,0,0,0,12ZM216,186H40a6,6,0,0,0,0,12H216a6,6,0,0,0,0-12Z'/%3E%3C/svg%3E") center / 3.2rem no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M222,128a6,6,0,0,1-6,6H40a6,6,0,0,1,0-12H216A6,6,0,0,1,222,128ZM40,70H216a6,6,0,0,0,0-12H40a6,6,0,0,0,0,12ZM216,186H40a6,6,0,0,0,0,12H216a6,6,0,0,0,0-12Z'/%3E%3C/svg%3E") center / 3.2rem no-repeat;
  color: inherit !important; /* Divi färbt ::after sonst selbst */
  background-color: currentColor;
  transition: var(--tra-3s);
}

.et_pb_menu .mobile_nav.opened .mobile_menu_bar {
  color: var(--menu-text);
}

.et_pb_menu .mobile_nav.opened .mobile_menu_bar::before {
  content: "Schließen" !important;
}

/* offen: X im Kreis (Kreis per Maske, damit alles die Textfarbe übernimmt) */
.et_pb_menu .mobile_nav.opened .mobile_menu_bar::after {
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M204.24,195.76a6,6,0,1,1-8.48,8.48L128,136.49,60.24,204.24a6,6,0,0,1-8.48-8.48L119.51,128,51.76,60.24a6,6,0,0,1,8.48-8.48L128,119.51l67.76-67.75a6,6,0,0,1,8.48,8.48L136.49,128Z'/%3E%3C/svg%3E") center / 2.2rem no-repeat,
    radial-gradient(circle, transparent calc(70.7% - 1.5px), #000 calc(70.7% - 1px), #000 70.7%, transparent calc(70.7% + 0.5px));
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M204.24,195.76a6,6,0,1,1-8.48,8.48L128,136.49,60.24,204.24a6,6,0,0,1-8.48-8.48L119.51,128,51.76,60.24a6,6,0,0,1,8.48-8.48L128,119.51l67.76-67.75a6,6,0,0,1,8.48,8.48L136.49,128Z'/%3E%3C/svg%3E") center / 2.2rem no-repeat,
    radial-gradient(circle, transparent calc(70.7% - 1.5px), #000 calc(70.7% - 1px), #000 70.7%, transparent calc(70.7% + 0.5px));
}

/* Call-to-Action auf dem Desktop als Button im Menü */
@media only screen and (min-width: 981px) {
  .et_pb_menu li.menu-cta {
    display: flex !important;
    align-items: center;
    align-self: center;
    margin-left: 1.2rem;
    padding: 0 !important;
  }

  .et_pb_menu li.menu-cta > a {
    display: inline-flex !important;
    align-items: center;
    padding: 1.2rem 2.8rem !important;
    line-height: 1.4 !important;
    border-radius: 999px;
    background: var(--menu-accent);
    color: var(--white) !important;
    opacity: 1 !important;
    transition: var(--tra-3s);
  }

  /* Hover: weiß mit dunkler Schrift – hebt sich vom transparenten
     wie vom dunklen Header (show-header = --c1) ab */
  .et_pb_menu li.menu-cta > a:hover {
    background: var(--white) !important;
    color: var(--c1) !important;
  }

  /* Auf der Seite selbst (z. B. Kontakt) nicht anders einfärben.
     Hohe Spezifität, weil Divi die Aktiv-Farbe modulbezogen mit !important setzt. */
  html body .et_pb_menu.et_pb_module li.menu-cta.current-menu-item > a,
  html body .et_pb_menu.et_pb_module li.menu-cta.current_page_item > a {
    background: var(--menu-accent) !important;
    color: var(--white) !important;
  }

  html body .et_pb_menu.et_pb_module li.menu-cta.current-menu-item > a:hover,
  html body .et_pb_menu.et_pb_module li.menu-cta.current_page_item > a:hover {
    background: var(--white) !important;
    color: var(--c1) !important;
  }

  /* keine Unterstrich-Linie aus dem KD-Header-Menü */
  .et-db #et-boc .et-l #kd_header li.menu-cta > a::before {
    display: none;
  }
}



/* ==========================================================================
   ACCORDION (aus neu)
   ========================================================================== */
.et_pb_accordion .et_pb_toggle_close .et_pb_toggle_title::before {
  content: "\33" !important;
  font-size: 20px;
}

.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title::before {
  display: block;
  content: "\32" !important;
  font-size: 20px;
}

/* ==========================================================================
   GALLERY 
   ========================================================================== */
.et_pb_gallery .et_pb_gallery_item { border: 3px solid #f9f5f2; }
.et_pb_gallery .et_overlay { background: #121416; }

.et_pb_gallery_image:before,
.et_pb_gallery_image:after {
  box-sizing: border-box;
  transition: var(--tra-5s);
}

.et_pb_gallery_image:before,
.et_pb_gallery_image:after {
  content: '';
  background-color: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  z-index: 99;
}

.et_pb_gallery_image:before {
  width: 60px;
  height: 1px;
  left: 100%;
}

.et_pb_gallery_image:after {
  height: 60px;
  width: 1px;
  top: 0%;
}

.et_pb_gallery_item:hover .et_overlay {
  opacity: 0.7;
}

.et_pb_gallery_image:hover:before,
.et_pb_gallery_image:hover:after {
  opacity: 1;
  top: 50%;
  left: 50%;
}

.et_pb_inline_icon:before,
.et_overlay.et_pb_inline_icon:before {
  content: '';
}








/* ==========================================================================
   FOOTER 
   ========================================================================== */
.kd_footer_bottom .et_pb_column {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 !important;
}

.kd_footer_bottom .et_pb_image {
  width: 20px;
  max-width: 20px;
  margin-top: 3px;
}

.kd_footer_bottom .et_pb_menu__menu { padding: 0; }
.kd_footer_bottom .et_pb_module { width: 100%; }

.kd_footer_menu .et_pb_menu__menu {
  font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
}

/* FOOTER KEIN HAMBURGER MENU */
.et-l.et-l--footer .et_pb_menu__menu { display: block !important; }
.et-l.et-l--footer .et_mobile_nav_menu { display: none !important; }

/* Footer-Menü linksbündig auf tablet und Mobile */
@media only screen and (max-width: 980px) {
  .et_pb_menu--style-left_aligned .et_pb_menu__wrap {
    justify-content: flex-start !important;
  }
}

/* ==========================================================================
   KUDO SECTION (aus alt behalten)
   ========================================================================== */
.kd-heart::after {
  content: "\e089";
  font-family: 'ETmodules';
  color: var(--kdac);
}