/*
Theme Name: Klaas
Template: Divi
Author: Klaas Marketing
Version: 1.1.0.0
Updated: 2026-05-06 11:54:00

*/

:root {
	--kk-blau: #164194;
	--kk-blau-dunkel: #0E2E63;
	--kk-blau-hell: #B4CDF0;
	--kk-gruen: #157A63;
	--kk-text: #5A5A5A;
	--kk-text-stark: #3A404B;
	--kk-linie: #E3E3E3;
	--kk-flaeche: #F8F8F8;
	--kk-flaeche-kuehl: #F0F2F5;
	--kk-weiss: #ffffff;
	--kk-radius: 5px;
}

/*Fonts*/
.futura-light {
	font-family: "futura-pt", sans-serif;
	font-weight: 300;
	font-style: normal;
}
.futura-book {
	font-family: "futura-pt", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.futura-heavy {
	font-family: "futura-pt", sans-serif;
	font-weight: 700;
	font-style: normal;
}
.futura-bold {
	font-family: "futura-pt-bold", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.eurostile-regular {
	font-family: "eurostile-extended", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.eurostile-medium {
	font-family: "eurostile-extended", sans-serif;
	font-weight: 500;
	font-style: normal;
}

/*Basics*/
body, p, input, textarea, select {
    font-family: "futura-pt", sans-serif !important;
}
html {
    scroll-padding-top: 140px;
}
.klaas-bc ol {
	font-size: 18px;
  	display: flex;
  	flex-wrap: wrap;
  	gap: .5em;
  	margin: 0;
  	padding: 0;
  	list-style: none;
}

.klaas-bc li {
  	display: flex;
  	align-items: center;
  	gap: .5em;
}

.klaas-bc li + li::before {
  	content: "|";
  	color: #c9c9c9;
}
body, p {
	font-size: 18px;
	font-weight: 400;
	font-style: normal;
	hyphens: auto;
}
h1, h2 {
	font-family: "eurostile-extended", sans-serif !important;
	color: var(--kk-blau);
    font-weight: 500;
	font-style: normal;
	hyphens: auto;
}
h3, h4, h5, h6 {
	font-family: "eurostile-extended", sans-serif !important;
	color: var(--kk-blau);
    font-weight: 500;
	font-style: normal;
	line-height: 1.2em;
	hyphens: auto;
}

h1 {
	font-size: 34px;
}
@media (min-width: 992px) {
	h1 {
		font-size: 54px;
	}
}

h2 {
	font-size: 24px;
}
@media (min-width: 992px) {
	h2 {
		font-size: 44px;
	}
}

h3 {
	font-size: 20px;
}
@media (min-width: 992px) {
	h3 {
		font-size: 40px;
	}
}

h4 {
	font-size: 16px;
}
@media (min-width: 992px) {
	h4 {
		font-size: 36px;
	}
}

h5 {
	font-size: 14px;
}
@media (min-width: 992px) {
	h5 {
		font-size: 34px;
	}
}

h6 {
	font-size: 12px;
}
@media (min-width: 992px) {
	h6 {
		font-size: 32px;
	}
}

.acf-textbereich .et_pb_text_inner {
  white-space: pre-line;
}
.no-border {
    border: none !important;
}
.side-by-side .et_pb_button_module_wrapper {
    display: inline-block;
    margin-right: 25px;
}
.vertical-menu nav ul li {
	width: 100%;
	display: block;
}
@media (max-width: 980px) {
	.vertical-menu .et_pb_menu__menu, #menu-cookie-recht .et_pb_menu__menu {
		display: flex!important;
	}
	.vertical-menu .et_mobile_nav_menu, #menu-cookie-recht .et_mobile_nav_menu {
		display: none!important;
	}
}

/*Schaltflächen*/
.klaas-btn {
	display: inline-block;
	background: var(--kk-blau);
	color: var(--kk-weiss) !important;
	border: 2px solid var(--kk-blau);
	border-radius: var(--kk-radius);
	padding: 13px 24px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	min-height: 48px;
}

.klaas-btn:hover,
.klaas-btn:focus {
	background: var(--kk-blau-dunkel);
	border-color: var(--kk-blau-dunkel);
	color: var(--kk-weiss) !important;
}

.klaas-btn.active {
	background: var(--kk-gruen);
	border-color: var(--kk-blau-dunkel);
	color: var(--kk-weiss) !important;
}

.klaas-btn--ghost {
	background: transparent;
	color: var(--kk-blau) !important;
}

.klaas-btn--ghost:hover,
.klaas-btn--ghost:focus {
	background: var(--kk-flaeche-kuehl);
	color: var(--kk-blau-dunkel) !important;
}

.klaas-btn[disabled] {
	opacity: .6;
	cursor: default;
}

/*
.klaas-kran-kaufen-button {
    background-color: #164194 !important;
	color: #fff !important;
    border-radius: 0 !important;
    border-width: 0 !important;
    font-size: 21px !important;
    padding: 10px 40px 10px 20px !important;
    transition: all 300ms ease 0ms;
}
.klaas-kran-kaufen-button:hover {
    background-image: initial;
    background-color: #000000 !important;
}
.klaas-kran-kaufen-button:after {
	content: "\24" !important;
	line-height: inherit !important;
    font-size: inherit !important;
    opacity: 1 !important;
    margin-left: .3em !important;
    left: auto;
    font-weight: 400 !important;
}
*/
.fancybox__container {
	z-index: 999999;
}
/*Login Formular*/
.klaas-login-wrap form { 
	max-width: 420px; 
}
.klaas-login-wrap input[type="text"],
.klaas-login-wrap input[type="password"]{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
}
.klaas-login-wrap input[type="submit"]{
  padding: 10px 14px;
  border-radius: 10px;
}
.klaas-login-error{
  padding:10px 12px;
  border-radius:10px;
  margin-bottom:12px;
  background:#fff2f2;
  border:1px solid #ffb3b3;
}
/*Tabellen*/
.divi-table {
  	width: 100%;
  	border-collapse: collapse;
  	margin-top: 20px;
  	font-family: inherit;
	font-size: 18px;
}

.divi-table th,
.divi-table td {
  	border: 1px solid #ddd;
  	padding: 12px;
  	text-align: left;
  	transition: background-color 0.3s ease;
}

.divi-table th {
  	background-color: #f2f2f2;
  	font-weight: 700;
}

.divi-table tr:nth-child(even) {
  	background-color: #fafafa;
}

.divi-table tr:hover td {
  	background-color: #e6f7ff;
}

/* Mobile Tabellen */
@media (max-width: 980px) {
  /* Zeilen mit Tabellen stapeln – sonst teilen sich zwei Tabellen 312px */
  .et-db #et-boc .et-l .et_pb_row:has(.divi-table) { flex-direction: column; }
  .et-db #et-boc .et-l .et_pb_row:has(.divi-table) > .et_pb_column { width: 100%; }
}

@media (max-width: 768px) {
  /* Ab drei Spalten: je Datensatz ein Block, Label links, Wert rechts */
  .divi-table:has(td:nth-child(3)) { display: block; }
  .divi-table:has(td:nth-child(3)) thead { display: none; }
  .divi-table:has(td:nth-child(3)) tbody { display: block; }

  .divi-table:has(td:nth-child(3)) tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid #ddd;
  }

  .divi-table:has(td:nth-child(3)) td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1em;
    padding: 10px 12px;
    text-align: right;
    border: 0;
    border-bottom: 1px solid #eee;
  }

  .divi-table:has(td:nth-child(3)) td:last-child { border-bottom: 0; }

  .divi-table:has(td:nth-child(3)) td::before {
    content: attr(data-label);
    font-weight: 700;
    text-align: left;
    flex: 0 1 auto;
  }

  /* Zwei Spalten bleiben Tabelle – „Parameter/Wert" als Label bringt nichts */
  .divi-table:not(:has(td:nth-child(3))) td:last-child { text-align: right; }
}
/*Head*/
.small-devices-topbar-visible {
    display: none !important;
	opacity: 0;
	visibility: hidden;
}
@media (min-width:1270px) {
	#small-devices-topbar {
		display: none !important;
		opacity: 0;
		visibility: hidden;
	}
	.small-devices-topbar-visible {
		display: inline-block !important;
		opacity: 1;
		visibility: visible;
	}
}

/* Header unter 1270px: Servicezeile mit „Gebrauchtgeräte", darunter eine Zeile
   mit Logo-Block, Vergleich, Suche und Menü – mobil wie im Hamburger-Bereich
   981–1269px (Umschaltung weiter unten). Ab 1270px greift die Desktop-Navigation.
   Der Präfix #page-container #et-boc ist nötig: auf Kranseiten (CPT) verschärft
   Divi seine Selektoren mit .et-db #et-boc .et-l – ohne Präfix verliert dieser
   Block dort. */
@media (max-width: 1269px) {
	/* Servicezeile: nur der Link, Vergleich und Suche wandern in die Hauptzeile */
	#page-container #et-boc #small-devices-topbar {
		display: flex !important;
		width: 100% !important;
		max-width: none !important;
		height: 34px;
		margin: 0 !important;
		padding: 0 16px !important;
		background: var(--kk-flaeche-kuehl);
	}
	#page-container #et-boc #small-devices-topbar .et_pb_column_0_tb_header {
		width: 100% !important;
		justify-content: flex-end !important;
		align-items: center !important;
	}
	#page-container #et-boc #small-devices-topbar .et_pb_code_0_tb_header,
	#page-container #et-boc #small-devices-topbar .et_pb_icon_1_tb_header {
		display: none !important;
	}
	#page-container #et-boc #small-devices-topbar .et_pb_button_module_wrapper {
		display: flex !important;
		align-items: center;
		height: 34px;
		margin: 0 !important;
	}
	/* drei IDs: Divis Button-Regel bringt es auf Kranseiten auf zwei IDs und drei Klassen */
	#page-container #et-boc #small-devices-topbar .et_pb_button_0_tb_header {
		height: 34px;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		color: var(--kk-blau) !important;
		font-size: 14px !important;
		font-weight: 500 !important;
		line-height: 34px !important;
	}
	#page-container #et-boc #small-devices-topbar .et_pb_button_0_tb_header::after {
		content: "\2192" !important;
		display: inline !important;
		position: static !important;
		margin-left: 6px !important;
		opacity: 1 !important;
		font-family: inherit !important;
		font-size: 14px !important;
		line-height: 34px !important;
	}

	/* Hauptzeile über die volle Breite – Divis 80%-Zeile ließ links und rechts Rand frei */
	#page-container #et-boc .et_pb_row_1_tb_header {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	#page-container #et-boc .et_pb_row_1_tb_header .dd-flex-column {
		height: 64px;
		align-items: center !important;
		gap: 0 !important;
		padding: 0 6px 0 0 !important;
	}
	/* ab 981px: leeres Desktop-Menü (margin-left: 39px) und zweite Gebrauchtgeräte-Hülle (margin-left: auto) raus */
	#page-container #et-boc #desktop-menu,
	#page-container #et-boc .et_pb_button_1_tb_header_wrapper {
		display: none !important;
	}
	/* Logo-Block bündig links; margin-right:auto schiebt die Icons an den rechten Rand */
	#page-container #et-boc .et_pb_image_0_tb_header {
		width: auto !important;
		height: 64px !important;
		margin: 0 auto 0 0 !important;
		padding: 0 18px !important;
		justify-content: center !important;
	}
	#page-container #et-boc .et_pb_image_0_tb_header img {
		width: 136px !important;
		height: auto !important;
	}
	/* Vergleich, Suche und Menü aus der Desktop-Zeile; opacity/visibility gegen .small-devices-topbar-visible */
	#page-container #et-boc .et_pb_code_1_tb_header,
	#page-container #et-boc .et_pb_icon_3_tb_header,
	#page-container #et-boc #dd-hamburger {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 44px !important;
		height: 44px !important;
		margin: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
	#page-container #et-boc .et_pb_icon_3_tb_header .et_pb_icon_wrap,
	#page-container #et-boc .et_pb_icon_3_tb_header .et-pb-icon {
		visibility: visible !important;
	}
	/* Tap-Fläche 44 × 44; margin:0 hebt das globale margin: 0 20px am Wrapper auf */
	#page-container #et-boc .et_pb_code_1_tb_header .et_pb_code_inner,
	#page-container #et-boc .et_pb_code_1_tb_header .kran-vergleich-icon-wrapper,
	#page-container #et-boc .et_pb_code_1_tb_header .kran-vergleich-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0;
	}
	#page-container #et-boc .et_pb_code_1_tb_header .kran-vergleich-counter {
		top: 3px !important;
		right: 0 !important;
	}
	#page-container #et-boc #dd-hamburger .et_pb_blurb_content {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#page-container #et-boc .et_pb_code_1_tb_header .et-pb-icon {
		font-size: 24px !important;
	}
	#page-container #et-boc .et_pb_icon_3_tb_header .et-pb-icon {
		font-size: 22px !important;
	}
	#page-container #et-boc #dd-hamburger .et-pb-icon {
		font-size: 28px !important;
	}
	#page-container #et-boc .et_pb_code_1_tb_header .et-pb-icon,
	#page-container #et-boc .et_pb_icon_3_tb_header .et-pb-icon,
	#page-container #et-boc #dd-hamburger .et-pb-icon {
		color: var(--kk-blau) !important;
	}
}

body:not(.et-fb) #et-boc .et-l #dd-section {
	right: -110%;
	position: fixed;
    top: 0;
    overflow: auto;
    z-index: 9999;
    -webkit-transition: right .4s cubic-bezier(.75, 0, .25, 1);
    transition: right .4s cubic-bezier(.75, 0, .25, 1);
}

 .et-db #et-boc .et-l #dd-section.dd-m-menu {
    right: 0 !important;
}

.et-db #et-boc .et-l #dd-menu-mobile .mobile_menu_bar {
    display: none;
}

.et-db #et-boc .et-l #dd-menu-mobile .et_mobile_menu {
    display: block !important;
    border-top: none;
    box-shadow: none;
    position: relative;
}
@media (max-width: 980px) {
  .et-db #et-boc .et-l #dd-menu-mobile .et_pb_menu__wrap {
    flex: 1 1 100%;
    width: 100%;
  }
  .et-db #et-boc .et-l #dd-menu-mobile .et_mobile_nav_menu,
  .et-db #et-boc .et-l #dd-menu-mobile .mobile_nav,
  .et-db #et-boc .et-l #dd-menu-mobile .et_mobile_menu {
    width: 100%;
  }
}
.et-db #et-boc .et-l #dd-menu-mobile .et_mobile_nav_menu,
.et-db #et-boc .et-l #dd-menu-mobile .mobile_nav {
    width: 100%;
}

.et-db #et-boc .et-l #dd-menu-mobile ul li a {
    text-align: center; /* Alignment of menu items */
    font-weight: 400!important; /* Font-weight of menu items */
    border-bottom: none; /* Bottom border of menu items */
    cursor: pointer;
}
    
.et-db #et-boc .et-l #dd-menu-mobile ul li a:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0);
}

.et-db #et-boc .et-l #dd-menu-mobile ul li.menu-item-has-children > a {
    background-color: rgba(0, 0, 0, 0);
}

.et-db #et-boc .et-l #dd-menu-mobile.dd-submenu ul li a {
    text-align: left; /* Alignment of menu items in case sub-items exist */
}

.et-db #et-boc .et-l #dd-menu-mobile .mobile_nav li ul.hide {
    display: none !important;
}

/* erster Untermenüpunkt ist im Mega-Menü die Überschrift – mobil wiederholt er nur den Oberpunkt */
.et-db #et-boc .et-l #dd-menu-mobile .klaas-menu-first-item {
    display: none;
}

.et-db #et-boc .et-l #dd-menu-mobile .mobile_nav .menu-item-has-children {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.et-db #et-boc .et-l #dd-menu-mobile .mobile_nav .menu-item-has-children > a {
    flex: 1 1 auto;
}

.et-db #et-boc .et-l #dd-menu-mobile .mobile_nav .menu-item-has-children > a + span {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 20px;
    font-weight: 700; /* Font-weight of submenu parent menu item icons */
    cursor: pointer;
    z-index: 3;
}

.et-db #et-boc .et-l #dd-menu-mobile .mobile_nav .menu-item-has-children > ul.sub-menu {
    flex: 0 0 100%;
}
.et-db #et-boc .et-l #dd-menu-mobile span.menu-closed:before {
    content: "L";
    display: block;
    color: #333; /* Color of submenu parent menu item icons */
    font-size: 16px;
    font-family: ETmodules;
}

.et-db #et-boc .et-l #dd-menu-mobile span.menu-closed.menu-open:before {
    content: "K";
}

/* sticky auf die äußere Header-Hülle — dort ist Spielraum */
header.et-l--header {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* Admin-Bar berücksichtigen */
body.admin-bar header.et-l--header {
	top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar header.et-l--header {
	  top: 46px;
	}
}

/* die Section selbst braucht kein sticky mehr */
.et-l--header .dd-fixed-header {
	position: relative; top: auto;
}

/* Mega-Menü folgt der echten Unterkante */
.sub-menu-flyout-frstlv {
	top: var(--klaas-header-bottom, 100px) !important;
}

.dd-search input.et_pb_searchsubmit {
	background: transparent !important;
    border: none !important;
    padding: 0 20px;
    z-index: 99;
}
 
.dd-search-icon {
    position: absolute;
    height: 100%;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    padding: 0 17px;
    background-color: #263547; /* background-color of Search Icon */
    border-left: 1px solid rgba(0, 0, 0, 0); /* Left Border of Search Icon */
}

 .dd-search-icon:after {
    content: "U";
    font-family: "ETmodules" !important;
    display: block;
    font-size: 17px; /* Font-size of Search Icon */
    font-weight: bold;
    color: #fff; /* Color of Search Icon */
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}
  
 header .et_builder_inner_content {
    z-index: 100000;
}
@media (min-width: 981px) and (max-width: 1912px) {
  #desktop-menu #menu-hauptmenue {
    flex-wrap: nowrap;
  }

  #desktop-menu #menu-hauptmenue > li {
    padding-left: clamp(3px, 0.5vw, 11px) !important;
    padding-right: clamp(3px, 0.5vw, 11px) !important;
  }

  #desktop-menu #menu-hauptmenue > li > a {
    font-size: clamp(14px, 1.15vw, 22px);
    white-space: nowrap;
  }
}
#desktop-menu #menu-hauptmenue .menu-item-has-children>a:first-child {
    padding-right: 0;
}
@media (min-width: 981px) {
  /* Logo → Menü wieder auf die ursprünglichen 59px (20px gap + 39px) */
  .et-db #et-boc .et-l .et_pb_column_1_tb_header > #desktop-menu {
    margin-left: 39px;
  }

  /* schiebt die Dreiergruppe an den rechten Rand */
  .et-db #et-boc .et-l .et_pb_column_1_tb_header > .et_pb_button_1_tb_header_wrapper {
    margin-left: auto;
  }

  /* Gebrauchtgeräte → Herz und Herz → Lupe auf je 10px (20px gap − 10px) */
  .et-db #et-boc .et-l .et_pb_column_1_tb_header > .kran-vergleich-modul,
  .et-db #et-boc .et-l .et_pb_column_1_tb_header > .et_pb_icon {
    margin-left: -10px;
  }
}
@media (min-width: 981px) and (max-width: 1269px) {
  .et-db #et-boc .et-l #desktop-menu .et_pb_menu__menu { display: none !important; }
  .et-db #et-boc .et-l #dd-hamburger { display: block !important; }
  .et-db #et-boc .et-l #dd-section { display: block !important; }
  .et-db #et-boc .et-l #dd-menu-mobile .et_mobile_nav_menu { display: block !important; }
}
@media (min-width: 981px) and (max-width: 1269px) {
  /* die zweite, überzählige Liste im Mobil-Modul */
  .et-db #et-boc .et-l #dd-menu-mobile .et_pb_menu__menu { display: none !important; }
}

@media (max-width: 1269px) {
  /* ohne die Desktop-Liste kollabiert der Wrapper auf 157px */
  .et-db #et-boc .et-l #dd-menu-mobile .et_pb_menu__wrap { flex: 1 1 100%; width: 100%; }
  .et-db #et-boc .et-l #dd-menu-mobile .et_mobile_nav_menu,
  .et-db #et-boc .et-l #dd-menu-mobile .mobile_nav,
  .et-db #et-boc .et-l #dd-menu-mobile .et_mobile_menu { width: 100%; }

  /* die volle Breite macht Divis disc-Marker sichtbar */
  .et-db #et-boc .et-l #dd-menu-mobile .et_mobile_menu,
  .et-db #et-boc .et-l #dd-menu-mobile .et_mobile_menu li { list-style: none !important; }
}
#desktop-menu #menu-hauptmenue .sub-menu-flyout-frstlv {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
	visibility: hidden;
    opacity: 0;
}
#desktop-menu #menu-hauptmenue li > .sub-menu-flyout-frstlv > .sub-menu {
	position: relative;
    width: 100%;
    margin: auto;
    max-width: 1920px;
	background: #f0f2f5 !important;
}
#desktop-menu #menu-hauptmenue li > .sub-menu-flyout-frstlv > .sub-menu > li.active {
    background: #fff;
    color: #164194;
}
#desktop-menu #menu-hauptmenue li > .sub-menu-flyout-frstlv > .sub-menu > li.active > a {
    color: #164194;
}
#desktop-menu #menu-hauptmenue .sub-menu-flyout-frstlv .close-menu {
	position: absolute;
	z-index: 4000;
	top: 40px;
	right: 30px;
	cursor: pointer;
}
#desktop-menu #menu-hauptmenue .sub-menu-flyout-frstlv .close-menu::after {
	content: "\4d";
    font-family: 'ETMODULES';
    color: #000;
    font-size: 40px;
    cursor: pointer;
}
.et_mobile_menu li a:hover, #desktop-menu #menu-hauptmenue ul li a:hover {
    background-color: unset;
}
/*change the visibility of the menu submenu on click*/
#desktop-menu #menu-hauptmenue li.et-touch-hover ul,
#desktop-menu #menu-hauptmenue li:hover ul {
	opacity: 0;
	visibility: hidden;
}
#desktop-menu #menu-hauptmenue .sub-menu-flyout-frstlv.hide.visible {
	opacity: 1;
	visibility: visible;
}
#desktop-menu #menu-hauptmenue .sub-menu-flyout-frstlv.hide.visible .sub-menu {
	opacity: 1;
	visibility: visible;
}
#desktop-menu #menu-hauptmenue .sub-menu-flyout-frstlv > .sub-menu {
    padding: 50px 20px !important;
	min-height: 50vh;
}
@media (max-height:1081px) {
	#desktop-menu #menu-hauptmenue .sub-menu-flyout-frstlv > .sub-menu {
		min-height: 70vh;
	}
}
#desktop-menu #menu-hauptmenue .sub-menu-flyout-frstlv > .sub-menu li {
    display: block;
}
#desktop-menu #menu-hauptmenue .sub-menu-flyout-frstlv > .sub-menu .klaas-menu-first-item {
    margin: 0 0 40px 0;
}
#desktop-menu #menu-hauptmenue .sub-menu-flyout-frstlv > .sub-menu .klaas-menu-first-item a {
    font-size: 30px;
	padding: 0px 10px !important;
}
#desktop-menu #menu-hauptmenue li li a {
    width: 180px;
	padding: 10px 15px !important;
}
@media (min-width: 1360px) {
	#desktop-menu #menu-hauptmenue li li a {
		width: 260px;
	}
}
@media (min-width: 1540px) {
	#desktop-menu #menu-hauptmenue li li a {
		width: 320px;
	}
}
@media (min-width: 1690px) {
	#desktop-menu #menu-hauptmenue li li a {
		width: 370px;
	}
}
#desktop-menu #menu-hauptmenue .sub-menu-flyout-secondlv {
    position: fixed;
    top: 20px;
    left: 400px;
    right: 20px;
    bottom: 20px;
    visibility: hidden;
    opacity: 0;
    background: #fff;
	z-index: 2000;
	pointer-events: none;
}
#desktop-menu #menu-hauptmenue li.active > .sub-menu-flyout-secondlv {
  z-index: 3000;
}
#desktop-menu #menu-hauptmenue .sub-menu-flyout-secondlv.hide.visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
#desktop-menu #menu-hauptmenue .sub-menu-flyout-secondlv.hide.visible .sub-menu {
	opacity: 1;
	visibility: visible;
}
#desktop-menu #menu-hauptmenue .sub-menu-flyout-secondlv .sub-menu {
    top: 0;
    left: 0;
    box-shadow: none;
    border-top: 0;
}

#desktop-menu #menu-hauptmenue .sub-menu-flyout-secondlv .sub-menu-overview {
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 1001;
}

#desktop-menu #menu-hauptmenue .sub-menu-flyout-secondlv .sub-menu-overview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px !important;
  border-radius: 0;
  background: #164194;
  color: #fff !important;
  text-decoration: none;
  white-space: nowrap;
}

#desktop-menu #menu-hauptmenue .sub-menu-flyout-secondlv .sub-menu-overview-btn:hover {
  background: #c90010;
  color: #fff;
  text-decoration: none;
}

#desktop-menu #menu-hauptmenue .sub-menu-flyout-frstlv li.menu-item-has-children>a:first-child:after {
    transform: rotate(-90deg) !important;
    top: 15px;
}
.klaas-24-btn {
  	background: url(/wp-content/uploads/2025/04/klaas-24-icon_30.png) #164194;
	background-repeat: no-repeat;
	background-position: bottom -4px right -5px;
    background-size: 38%;
}
.kran-vergleich-modul {
    margin-bottom: 0 !important;
}

.kran-vergleich-icon-wrapper {
	position: relative;
	display: inline-block;
	margin: 0 20px;
}

.kran-vergleich-counter {
	position: absolute;
    top: -6px;
    right: -10px;
    background: #e3000f;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.image_nav ul {
	display: flex;
  	flex-wrap: wrap;
  	list-style: none;
  	padding: 0;
  	margin: 0;
  	column-gap: 10px;
	width: 100% !important;
	text-align: center !important;
}
@media (min-width: 992px) {
	.image_nav .k2500 a:before , .image_nav .k2350 a:before, .image_nav .k2300 a:before, .image_nav .k1003 a:before, .image_nav .k950lhx a:before, .image_nav .k950 a:before, .image_nav .k910 a:before, .image_nav .k760 a:before, .image_nav .k700 a:before, .image_nav .k775 a:before, .image_nav .k21-30 a:before, .image_nav .k23-33 a:before, .image_nav .k280 a:before, .image_nav .k300e a:before, .image_nav .k350e a:before, .image_nav .k400 a:before, .image_nav .theo25 a:before, .image_nav .rudi21 a:before, .image_nav .lutz a:before, .image_nav .toplight-21-bau a:before, .image_nav .hv26-6-ka a:before, .image_nav .shorty-25 a:before, .image_nav .bigmover a:before, .image_nav .roadrunner a:before, .image_nav .toplight a:before, .image_nav .topworker a:before {
		content: "";
		height: 130px;
		display: block;
		margin: 0 auto;
	}
	/* Autokrane */
	.image_nav .k2500 a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/02/K2500_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .k2350 a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/01/K2350_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .k2300 a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2025/05/K2500_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .k1003 a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/02/K1003_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .k950lhx a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/01/K950_L_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .k950 a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/01/K950_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .k910 a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/01/K910_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .k775 a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/06/K775_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .k760 a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/01/K760_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .k700 a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/01/K700_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	/* Anhängerkrane */
	.image_nav .k21-30 a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/02/K21-30_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .k23-33 a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/02/K23-33_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .k280 a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/01/K280_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .k300e a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/02/K300E_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .k350e a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/01/K350_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .k400 a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/01/K400_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	/* Hubarbeitsbühnen */
	.image_nav .theo25 a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/01/theo25_v_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .rudi21 a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/01/Rudi21_navi.jpg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .lutz a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/02/Lutz75_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	/* Bauaufzüge */
	.image_nav .toplight-21-bau a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/06/Toplight21_Bau_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .hv26-6-ka a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/06/HV-26_6-KA_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	/* Möbelaufzüge */
	.image_nav .shorty-25 a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/06/Shorty25_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .bigmover a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/06/bigmover_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .roadrunner a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/06/roadrunner_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .toplight a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/06/toplight21_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
	.image_nav .topworker a:before {
		background: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2026/06/topworker_navi.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left;
	}
}

@media (min-width: 1270px) {
	/* Autokrane */
	.image_nav .k2500 a:before {
		background-position: center;
	}
	.image_nav .k2350 a:before {
		background-position: center;
	}
	.image_nav .k2300 a:before {
		background-position: center;
	}
	.image_nav .k1003 a:before {
		background-position: center;
	}
	.image_nav .k950lhx a:before {
		background-position: center;
	}
	.image_nav .k950 a:before {
		background-position: center;
	}
	.image_nav .k910 a:before {
		background-position: center;
	}
	.image_nav .k775 a:before {
		background-position: center;
	}
	.image_nav .k760 a:before {
		background-position: center;
	}
	.image_nav .k700 a:before {
		background-position: center;
	}
	/* Anhängerkrane */
	.image_nav .k21-30 a:before {
		background-position: center;
	}
	.image_nav .k23-33 a:before {
		background-position: center;
	}
	.image_nav .k280 a:before {
		background-position: center;
	}
	.image_nav .k300e a:before {
		background-position: center;
	}
	.image_nav .k350e a:before {
		background-position: center;
	}
	.image_nav .k400 a:before {
		background-position: center;
	}
	/* Hubarbeitsbühnen */
	.image_nav .theo25 a:before {
		background-position: center;
	}
	.image_nav .rudi21 a:before {
		background-position: center;
	}
	.image_nav .lutz a:before {
		background-position: center;
	}
	/* Bauaufzüge */
	.image_nav .toplight-21-bau a:before {
		background-position: center;
	}
	.image_nav .hv26-6-ka a:before {
		background-position: center;
	}
	/* Möbelaufzüge */
	.image_nav .shorty-25 a:before {
		background-position: center;
	}
	.image_nav .bigmover a:before {
		background-position: center;
	}
	.image_nav .roadrunner a:before {
		background-position: center;
	}
	.image_nav .toplight a:before {
		background-position: center;
	}
	.image_nav .topworker a:before {
		background-position: center;
	}
}

/*Hero*/
/*
#klaas_hero {
	margin-top: -50px;
}
@media (min-width: 980px) {
	#klaas_hero {
		margin-top: -15px;
	}
}
@media (min-width: 1270px) {
	#klaas_hero {
		margin-top: -70px;
	}
}
@media (min-width: 1720px) {
	#klaas_hero {
		margin-top: -170px;
	}
}
*/
@media (max-width: 1921px) {
	#hero #slogan-wrapper {
		padding: 10px;
		background: rgba(255, 255, 255, .75);
	}
}
#klaas_hero:before {
    content: "";
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}
@media (min-width: 1720px) {
	#hero-content {
		width: 100%;
	}
}
.hero-title {
	font-family: "eurostile-extended", sans-serif !important;
    font-size: clamp(32px, 4.3vw, 60px);
	font-weight: 500;
    display: block;
    padding-bottom: 10px;
    line-height: 1.10em;
}

.hero-subtitle {
    font-size: 40px;
	font-weight: 400;
    display: block;
    padding-bottom: 10px;
    line-height: 1.10em;
}

/*Hero Unterseiten*/
@media (min-width: 981px) {
	.hero-text {
		width: 50%;
	}
}
.hero-text h1, .hero-text p {
    color:#fff;
}

/*Klaas Teaser Section*/
.klaas-expert-area-item-wrapper {
    margin: 0;
    background: #e3e3e3;
    transition: all 0.5s;
    height: 100%;
}
@media (min-width:480px) {
	.klaas-expert-area-item-wrapper {
		margin: 0 5px 0 0;
	}
}
.et-last-child .klaas-expert-area-item-wrapper {
	margin: 0;
}
@media (min-width:480px) and (max-width:980px) {
	.klaas-expert-area-item-wrapper.tablet-last-item {
		margin: 0;
	}
}
.klaas-expert-area-item-wrapper:hover {
	background: #164194;
	color: #fff;
}
.klaas-expert-area-item {
    padding: 20px;	
}
.klaas-expert-area-item .klaas-exp-icon-title {
    text-align: center;
}
@media (min-width: 1480px) {
	.klaas-expert-area-item .klaas-exp-icon-title {
		display: flex;
		align-items: center;
		text-align: left;
	}
}
.klaas-expert-area-item .klaas-exp-icon-title .klaas-exp-icon {
    margin-right: 15px;
    width: 60px;
	height: 60px;
}
.klaas-expert-area-item .klaas-exp-icon-title .klaas-exp-title h5 {
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2em;
	transition: color 0.5s;
}
.klaas-expert-area-item:hover .klaas-exp-icon-title .klaas-exp-title h5 {
    color: #fff;
}
.klaas-expert-area-item .klaas-exp-text {
    font-size: 18px;
	color: #000;
}
@media (max-width: 1479px) {
	.klaas-expert-area-item .klaas-exp-text {
		text-align: center;
	}
}
.klaas-expert-area-item:hover .klaas-exp-text {
    color: #fff;
}
.svg-left-to-right-animation-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}
.svg-left-to-right-animation-wrap .svg-left-to-right-animation {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
    overflow: hidden;
}
.svg-left-to-right-animation-wrap .svg-left-to-right-animation > :first-child {
    transition: all 0.5s;
    transform: translateX(-150%);
}
.klaas-expert-area-item:hover .klaas-exp-icon .svg-left-to-right-animation > :first-child {
    transform: translateX(50%);
}
.svg-left-to-right-animation-wrap .svg-left-to-right-animation > :last-child {
    transition: all 0.5s;
    transform: translateX(-50%);
}
.klaas-expert-area-item:hover .klaas-exp-icon .svg-left-to-right-animation > :last-child {
    transform: translateX(170%) rotateX(50deg);
}
/*Klaas Zahlen Liste*/
.numbers-wrapper {
	padding: 0 1rem !important;
    background: #fff;
    row-gap: 0px;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    list-style: none !important;
    margin: 0px;
	height: 150px;
    position: absolute;
    top: -150px;
    right: 0;
    align-content: center;
}
@media (min-width: 1200px) {
	.numbers-wrapper {
		padding: 0 3rem !important;
		gap: 2.5rem;
	}
}
.numbers-headline {
    font-weight: 500;
    color: #000;
    font-size: 24px;
    margin: 0px 0 10px 0;
    display: inline-block;
}
.numbers-text {
    color: #000;
}
/* ============================================================
   Klaas Produkte Section
   Mobile-first: Die Basisregeln beschreiben die Touch-Fassung
   (bis 980px, Divi-Breakpoint). Erst ab 981px kommen Hover-Bild,
   Pfeil-Icon und der transparente Textkasten dazu.
   ============================================================ */

/* --- Raster: alle Kacheln einer Zeile gleich hoch ----------- */

/* Divi setzt die Spalten im Desktop-Layout nebeneinander (float),
   erst unter 981px werden sie zu Flex-Items. Nur als Flex-Items
   werden sie auf eine gemeinsame Zeilenhöhe gestreckt – und nur
   dann greift das height:100% in der Kette darunter. */
@media (min-width: 981px) {
    .et-db #et-boc .et-l .et_pb_row:has(.klaas-produkte-item-content) {
        display: flex;
        flex-wrap: wrap;
    }
}

/* Die Spalte wird gestreckt, das Code-Modul darin nicht. */
.et-db #et-boc .et-l .et_pb_column:has(.klaas-produkte-item-content) > .et_pb_code,
.et-db #et-boc .et-l .et_pb_column:has(.klaas-produkte-item-content) > .et_pb_code > .et_pb_code_inner {
    height: 100%;
}

/* Vier Spalten brauchen rund 265px Kachelbreite, sonst passt
   "Kranschulung" nicht mehr in eine Zeile und läuft aus der Kachel.
   Das ist ab 1340px der Fall – darunter zweispaltig. */
@media (min-width: 981px) and (max-width: 1339px) {
    .et-db #et-boc .et-l .et_pb_column:has(.klaas-produkte-item-content) {
        width: 50%;
        margin-right: 0;
    }
}

/* --- Kachel ------------------------------------------------- */

.klaas-produkte-item-content {
    position: relative;
    overflow: hidden;
    height: 100%;
    color: #fff;
}

@media (min-width: 480px) {
    .klaas-produkte-item-content {
        border-right: 1px solid rgba(255, 255, 255, 0.3);
    }
}

/* --- Inhaltsfläche ------------------------------------------ */

/* Der Textblock liegt im Fluss und gibt die Kachelhöhe vor.
   Absolut positioniert kann er nicht wachsen – so wurde der Link
   der längsten Kachel von overflow:hidden gekappt. */
.klaas-produkte-item-content .klaas-produkte-item-content-in {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    height: 100%;
    padding: 10px;
}

@media (min-width: 981px) {
    .klaas-produkte-item-content .klaas-produkte-item-content-in {
        padding: 20px 20px 50px 30px;
    }
}

/* --- Pfeil-Icon --------------------------------------------- */

/* Reagiert nur auf Hover – auf Touch kostet es bloß Höhe. */
.klaas-produkte-item-content .klaas-prod-icon {
    display: none;
}

@media (min-width: 981px) {
    .klaas-produkte-item-content .klaas-prod-icon {
        display: block;
        text-align: right;
    }

    .klaas-produkte-item-content .klaas-prod-icon i {
        font-style: normal;
    }

    .klaas-produkte-item-content .klaas-prod-icon i::before {
        content: '\26';
        font-family: 'ETMODULES';
        font-size: 90px;
        line-height: 1;
        color: #fff;
        transition: font-size 0.4s ease;
    }
	
	.klaas-produkte-item-content .klaas-prod-icon i::before {
		content: '\26';
		display: inline-block;
		font-family: 'ETMODULES';
		font-size: 90px;
		line-height: 1;
		color: #fff;
		transform-origin: right top;
		transition: transform 0.4s ease;
	}

	.klaas-produkte-item-content:hover .klaas-prod-icon i::before {
		transform: scale(0.5556);
	}
}

/* --- Textkasten --------------------------------------------- */

/* Auf Touch dauerhaft hinterlegt und über die volle Höhe: der
   Hintergrund kam bisher erst per :hover, ohne Mauszeiger stand
   weißer Text ohne Kontrast auf dem Hintergrundbild der Zeile. */
.klaas-produkte-item-content .klaas-prod-content {
    flex: 1 1 auto;
    padding: 10px;
    background: rgba(22, 65, 148, 0.7);
}

@media (min-width: 981px) {
    .klaas-produkte-item-content .klaas-prod-content {
        flex: 0 1 auto;
        /* gleiche RGB-Basis wie der Hover-Wert, sonst blendet der
           Übergang über Weiß auf */
        background: rgba(22, 65, 148, 0);
        transition: background 0.7s ease;
    }

    .klaas-produkte-item-content:hover .klaas-prod-content {
        background: rgba(22, 65, 148, 0.7);
    }
}

/* --- Typografie im Textkasten -------------------------------- */

.klaas-produkte-item-content .klaas-prod-content h3 {
    margin-bottom: 15px;
    font-size: 21px;
    font-weight: 500;
    color: #fff;
}

.klaas-produkte-item-content .klaas-prod-content p,
.klaas-produkte-item-content .klaas-prod-content a {
    font-size: 20px;
    color: #fff;
}

.klaas-produkte-item-content .klaas-prod-content p {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Pfeil und Text bleiben zusammen – im reinen Inline-Fluss
   rutschte der Pfeil auf schmalen Kacheln in die nächste Zeile. */
.klaas-produkte-item-content .klaas-prod-content a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.klaas-produkte-item-content .klaas-prod-content a::after {
    content: '\24';
    font-family: 'ETMODULES';
    font-size: 32px;
    line-height: 1;
    color: #fff;
}

.klaas-produkte-item-content .klaas-prod-content a span {
    position: relative;
}

.klaas-produkte-item-content .klaas-prod-content a span::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.6s ease-out;
}

.klaas-produkte-item-content .klaas-prod-content a:hover span::before {
    transform: scaleX(1);
    transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/* --- Hover-Bild ---------------------------------------------- */

/* Bis 980px lädt das <picture> gar keine Bilddatei (die <source>
   greift erst ab 981px); display:none hält den Platzhalter aus
   dem Layout. */
.klaas-produkte-item-content .klaas-produkte-item-img {
    display: none;
}

@media (min-width: 981px) {
    /* Das Bild liegt als Fläche hinter dem Text, statt im Fluss die
       Kachelhöhe vorzugeben. Nur direktes Kind, damit die Transform
       nicht doppelt greift, falls das <img> dieselbe Klasse trägt. */
    .klaas-produkte-item-content > .klaas-produkte-item-img {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        opacity: 0;
        transform: scale(1) translateY(5%);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .klaas-produkte-item-content .klaas-produkte-item-img picture {
        display: block;
        height: 100%;
    }

    .klaas-produkte-item-content .klaas-produkte-item-img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .klaas-produkte-item-content:hover > .klaas-produkte-item-img {
        opacity: 1;
        transform: scale(1.2) translateY(-1%);
    }
}

@media (max-width: 992px) {
	.social-icon-card {
		display: none;
		visibility: hidden;
		opacity: 0;
	}
}

.social-icon-card {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translate(0%, -50%);
}

.social-icon-card ul {
    list-style: none;
}

.social-icon-card ul li {
    width: 50px;
    height: 50px;
    position: relative;
    background: #e59500;
    cursor: pointer;
}

.social-icon-card ul li span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.social-icon-card ul li span:before {
    font-family: FontAwesome!important;
    content: '\5b';
    font-size: 32px;
    color: #fff;
    vertical-align: middle;
}

.facebook span:before {
    content: '\f39e' !important;
}

.instagram span:before {
    content: '\f16d' !important;
}

.google span:before {
    content: '\f1a0' !important;
}

.linkedin span:before {
    content: '\f08c' !important;
}

.youtube span:before {
    content: '\f167' !important;
}

.whatsapp span:before {
    content: '\f232' !important;
}

.social-icon-card ul li.facebook, .social-icon-card ul li.facebook div.slider {
    background: #3b5998
}

.social-icon-card ul li.instagram, .social-icon-card ul li.instagram div.slider {
    background: #D50071
}

.social-icon-card ul li.youtube, .social-icon-card ul li.youtube div.slider {
    background: #FF0033
}

.social-icon-card ul li.linkedin, .social-icon-card ul li.linkedin div.slider {
    background: #0A66C2
}

.social-icon-card ul li.google, .social-icon-card ul li.google div.slider {
    background: #E84D40
}

.social-icon-card ul li.whatsapp, .social-icon-card ul li.whatsapp div.slider {
    background: #4dc247
}

.social-icon-card .slider {
    content: "";
    position: absolute;
    top: 0;
    left: 51px;
    width: 0px;
    height: 50px;
    background: #eebb5c;
    transition: all 0.5s 0.3s ease;
}

.social-icon-card .slider a {
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 50px;
    opacity: 0;
    transition: all 0.6s ease;
    display: block;
    text-decoration: none;
}

.social-icon-card ul li:hover .slider {
    width: 180px;
    transition: all 0.5s ease;
}

.social-icon-card ul li:hover .slider a {
    opacity: 1;
    transition: all 1s 0.2s ease;
}

.kran-gruende-slider {
	overflow: visible !important;
}
.kran-gruende-slider .et_pb_slide {
    padding: 0 !important;
	overflow: hidden !important;
}
.kran-gruende-slider .et_pb_slides .et_pb_slider_container_inner {
    display: block !important;
    width: 100% !important;
    vertical-align: inherit !important;
	text-align: left !important;
}
.kran-gruende-slider .et_pb_slide_description {
	padding: 15% 6% !important;
	background: #fff !important;
	width: 60% !important;
	float: right !important;
	text-shadow: none !important;
	animation: none !important ;
}
.kran-gruende-slider .et_pb_slide_image, .kran-gruende-slider .et_pb_slide_image img.active {
	animation: none !important;
}
.kran-gruende-slider .et-pb-arrow-next, .kran-gruende-slider .et-pb-arrow-prev {
    background: #e3e3e3 !important;
}
.kran-gruende-slider .et-pb-arrow-prev, .kran-gruende-slider .et-pb-arrow-next {
    opacity: 1 !important;
	padding: 15px !important;
	font-size: 45px !important;
}
.kran-gruende-slider .et-pb-arrow-prev {
    left: 0 !important;
}
.kran-gruende-slider .et-pb-arrow-next {
    right: 0 !important;
}
.kran-gruende-slider:hover .et-pb-arrow-prev {
    left: 0 !important;
}
.kran-gruende-slider:hover .et-pb-arrow-next {
    right: 0 !important;
}
.kran-gruende-slider .et-pb-controllers {
    bottom: -45px !important;
}
.kran-gruende-slider .et-pb-controllers a {
    width: 105px !important;
    height: 10px !important;
}

.klaas-360 {
    cursor: url(https://klaas-gt8upoy6gv.live-website.com/wp-content/uploads/2025/05/drag.png), auto;
}

/* --- Tab Buttons --- */
.tab-buttons {
  display: flex;
  gap: 0px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.tab-buttons button {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  background: none;
  transition: all 0.3s ease;
  border-radius: 0;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #777777;
  position:relative;
}
.tab-buttons button:before {
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #777777;
}

.tab-buttons button.active {
  color: #000;
}
.tab-buttons button.active:before {
    content: "";
    height: 3px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #164194;
}
/* --- Tab Content Styling --- */
.tab-content-container {
  position: relative;
}

.tab-content {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  gap: 30px;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

.tab-content.active {
  display: flex;
  opacity: 1;
}

.tab-content .column {
  flex: 1 1 22%;
  min-width: 250px;
  max-width: 22%;
  background: #fff;
  display: flex;          /* sorgt dafür, dass Inhalt "mitwächst" */
  flex-direction: column; /* Text/Bilder normal untereinander */
}

.tab-content img {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
}
  
.tab-content .tab-text {
  padding: 0 20px 20px;
  font-size: 20px;
}
@media (min-width: 992px) {
    .tab-content .tab-text h3 {
        font-size: 20px;
    }
}
.tab-content .tab-text h3 {
  padding-bottom: 20px;
}

.tab-content .tab-text ul {
  padding: 0 0 0 1em;
}

.tab-content .tab-text ul li {
  padding: 0 0 15px 0;
}

@media (max-width: 768px) {
  .tab-content.active {
    flex-direction: column;
  }
}

.bw-ablauf_number p {
	font-size: 60px;
	line-height: 1.05;
	margin: 0 0 8px;
}

@media (max-width: 980px) {
	.bw-ablauf_number p { font-size: 44px; }
}