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

/* Inhalte vertikal zentrieren (Spalte) */
.kd_align_center_section,
.kd_align_center_row .et_pb_column,
.kd_align_center_module {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Inhalte nebeneinander, vertikal zentriert (Zeile) */
.kd_align_center_section_2,
.kd_align_center_row_2 .et_pb_column,
.kd_align_center_module_2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}



/* ==========================================================================
   ROOT: Farben + Transitions
   Schriftgrößen, Zeilenhöhen und Abstände → Divi-Variablen (siehe CLAUDE.md)
   ========================================================================== */
:root {
  /* GLOBAL COLORS – Ristorante Arena
     --c3 … --c8 und --kdac unverändert aus dem alten Theme (evtl. in Divi verwendet) */

  --c1:          #16172f;  /* Dunkel: Header-Hintergrund, Menütext (= --c6) */
  --c2:          #00a3bf;  /* Hellblau (= --c4) */

  --c3:          #88724e;  /* Gold */
  --c4:          #00a3bf;  /* Hellblau */
  --c5:          #422713;  /* Dunkelbraun */
  --c6:          #16172f;  /* Dunkelblau */
  --c7:          #b2bbde;  /* Hellblau */
  --c8:          #f1f1f1;  /* Hellgrau */

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

  --kdac:        #beac84;  /* KD Accent (helles Gold) */
	
  --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: var(--c3);                         /* aktiv, Hover, Call-to-Action – Gold (4,6:1 mit weißer Schrift) */
  --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 */
}

/* --------------------------------------------------------------------------
   ÜBERGANG: Dynamische Schriftgrößen aus dem alten Theme
   Entfernen, sobald die Divi-Variablen (fs-*, lh-*) und Vorlagen
   auf der Seite angelegt sind – dann kommen die Größen aus Divi.
   -------------------------------------------------------------------------- */
.et_pb_module.et_pb_text h1,
.header-content h1,
.et_pb_column .et_pb_module h1,
h1,
.et_pb_module.et_pb_text.h1_substitute p {
  font-size: clamp(3.6rem, 5vw, 6rem);
  line-height: clamp(4rem, 6vw, 7rem);
}

.et_pb_module.et_pb_text h2,
.header-content h2,
.et_pb_column .et_pb_module h2,
.et_pb_de_mach_content h2,
h2 {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: clamp(3rem, 5vw, 4rem);
}

.et_pb_module.et_pb_text h3,
.header-content h3,
.et_pb_column .et_pb_module h3,
h3 {
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: clamp(2.6rem, 5vw, 3.6rem);
}

.et_pb_module.et_pb_text h4,
.header-content h4,
.et_pb_column .et_pb_module h4,
h4 {
  font-size: clamp(2.2rem, 5vw, 2.4rem);
  line-height: clamp(2.2rem, 5vw, 3.8rem);
}

.et_pb_module.et_pb_text h5,
.header-content h5,
.et_pb_column .et_pb_module h5,
h5 {
  font-size: clamp(2rem, 5vw, 2.2rem);
  line-height: clamp(2.2rem, 5vw, 3rem);
}

.et_pb_module.et_pb_text h6,
.header-content h6,
.et_pb_column .et_pb_module h6,
h6 {
  font-size: clamp(1.8rem, 5vw, 2rem);
  line-height: clamp(2rem, 5vw, 2.5rem);
}

.et_pb_module.et_pb_text p,
.et_pb_module.et_pb_text span,
.et_pb_module.et_pb_text li,
.et_pb_blurb_description p,
.et_pb_de_mach_content p,
.et_pb_de_mach_content li,
.et_pb_de_mach_content,
.dmach-acf-item-content p,
.dmach-acf-value p,
.dmach-acf-value span,
.dmach-acf-value li {
  font-size: clamp(1.8rem, 5vw, 2rem);
  line-height: clamp(2.4rem, 5vw, 3rem);
}
/* ÜBERGANG ENDE */





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

/* --------------------------------------------------------------------------
   Klassischer Divi-Header (Theme-Optionen, kein Theme Builder) – aus altem Theme
   -------------------------------------------------------------------------- */

/* Schriftgröße Menü zwischen 980 und 1280 px */
@media (min-width: 980px) and (max-width: 1280px) {
  #top-menu li { padding-right: 14px; }

  ul#top-menu li a { font-size: 1.4rem; }
}

/* E-Mail und Telefon im Top-Menü nach rechts (alle Breiten) */
#et-info { float: right !important; }

/* Telefonnummer im Top-Header mobil näher an den Text davor */
@media only screen and (max-width: 767px) {
  #db-info-text { margin-right: 0 !important; }
}

.select_page { visibility: hidden; }

/* Hover-Effekt auf klickbare Telefonnummer */
#et-info-phone:hover {
  opacity: 0.7;
  transition: all .4s ease-in-out;
}

@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%; }
}

/* Gallery-Bilder nebeneinander (Klasse .col-width): Desktop 4, darunter 2 Spalten */
.col-width .et_pb_gallery_item {
  width: 25% !important;
  clear: none !important;
}

@media only screen and (max-width: 980px) {
  .col-width .et_pb_gallery_item { width: 50% !important; }
}

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

/* Linkfarben für dunkle/helle Hintergründe */
.dunkle-links a { color: var(--c5); }
.helle-links a  { color: var(--white); }

/* Hochgestellt */
sup { font-size: 1rem !important; }

/* Einzelbeitrag: kein Abstand unter dem Beitrag */
.single-post .post {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}








/* ==========================================================================
   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);
}