/* 
 Theme Name:     Kali
 Author:         Mark Hendriksen
 Author URI:     https://markhendriksen.com
 Template:       Divi
 Version:        1.0
 Description:    A Divi Child Theme 
*/ 

/* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */ 

/* ########################### */
/* ###### CHANGE COLORS ###### */
/* ########################### */

/* ### Dropdown menu ### */
.nav li li a { 
  	border-bottom: 1px solid rgb(0 0 0 / 10%); /* Dropdown border bottom */ 
  	font-weight: 500 !important; /* Dropdown font weight */ 
  	font-size: 14px !important; /* Dropdown font size */ 
}
  
.et-menu > .menu-item-has-children > .sub-menu:before {
  	border-bottom: 12px #5956e9 solid; /* Dropdown arrow color */
}

/* #### Collaping mobile menu #### */
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
	color: #ffffff; /* Icon color */
	background: #5956e9; /* Icon background color */
}

/* ### Line before text ### */
.line-before-sub-text:before {
    background: #5956e9; /* Line color */
}

/* ### Team members social bg ### */
.custom-teammember .et_pb_member_social_links {
    background-color: #5956e9; /* Background color */
}

/* ### Contact form checkbox ### */
.kavi-contact-form .et_pb_contact p input[type=checkbox]:checked+label i:before {
    color: #000000 !important; /* Check color */
}

/* ### Services blurbs page 2 ### */
.service-blurb-v2:before {
	background: linear-gradient(135deg,#ffffff 0%,#ffffff 50%,#2ab1b9 50%,#29c4a9 100%); /* Backgorund hover color */
}

/* ###  Style scroll bar ### */
#style-scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #F5F5F5; /* Scroll bar background color */
}

#style-scrollbar::-webkit-scrollbar {
  background-color: #F5F5F5; /* Scroll bar background color */
}

#style-scrollbar::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #5956e9; /* Scroll handle background color */
}

/* ###  Blog button ### */
.more-link {
	background-color: #5956e9; /* Button background color */
	color: #fff; /* Button text color */
}

/* ###  Single project list ### */
.job-list ul li::marker {
    color: #5956e9; /* list icon color */
}

/* ### END COLORS ### */

/* ### General ### */
body {
	font-weight: 400!important;
}

#page-container {
    overflow-x: hidden;
}

/* ### ZLOE Figma design system ### */
:root {
	/* Türkis = Divis Primärfarbe (Divi → Theme-Optionen → Primärfarbe). Dort ändern,
	   nicht hier – der Wert nach dem Komma ist nur die Rückfallfarbe. Hover wird
	   automatisch etwas dunkler daraus berechnet. */
	--zloe-teal: var(--gcid-primary-color, #60C3D9);
	--zloe-teal-dark: color-mix(in srgb, var(--zloe-teal), #000 15%);
	--zloe-text: #181715;
	--zloe-text-strong: #1a1a18;
	--zloe-muted: #5e5e5e;
	--zloe-white: #ffffff;
	--zloe-content-width: 1920px;
	--zloe-content-gutter: 38px;
}

html body,
body input,
body textarea,
body select,
body button,
body .et_pb_module,
body .et_pb_text,
body .et_pb_button {
	font-family: "Lato", Arial, sans-serif !important;
	letter-spacing: 0 !important;
}

body,
body .et_pb_text,
body .et_pb_blurb_description,
body .et_pb_post_content,
body .entry-content {
	color: var(--zloe-text);
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 27px !important;
}

body #page-container .entry-content .et_pb_text_inner p a:not(.et_pb_button):not(.button),
body #page-container .entry-content .et_pb_text_inner li a:not(.et_pb_button):not(.button),
body #page-container .entry-content .et_pb_post_content p a:not(.et_pb_button):not(.button),
body #page-container .entry-content .et_pb_post_content li a:not(.et_pb_button):not(.button) {
	color: var(--zloe-teal) !important;
}

:where(body #page-container) h1,
:where(body #page-container .et_pb_text) h1 {
	color: var(--zloe-teal) !important;
	font-size: 80px !important;
	font-weight: 900 !important;
	line-height: 88px !important;
}

:where(body #page-container) h2,
:where(body #page-container .et_pb_text) h2 {
	color: var(--zloe-teal) !important;
	font-size: 52px !important;
	font-weight: 900 !important;
	line-height: 52px !important;
}

:where(body #page-container) h3,
:where(body #page-container .et_pb_text) h3,
:where(body #page-container .et_pb_blurb) h3 {
	color: var(--zloe-text);
	font-size: 28px !important;
	font-weight: 900 !important;
	line-height: 30.8px !important;
}

:where(body #page-container .title-gradient) h1,
:where(body #page-container .title-gradient) h2,
:where(body #page-container .title-gradient) h3 {
	background: none !important;
	background-clip: border-box !important;
	-webkit-background-clip: initial !important;
	-webkit-text-fill-color: currentColor !important;
}

:where(body #page-container .title-gradient) h1,
:where(body #page-container .title-gradient) h2 {
	color: var(--zloe-teal) !important;
}

:where(body #page-container .title-gradient) h3 {
	color: var(--zloe-text);
}

:where(body #page-container) h4,
:where(body #page-container .et_pb_text) h4,
:where(body #page-container .et_pb_blurb) h4 {
	color: var(--zloe-text) !important;
	font-size: 24px !important;
	font-weight: 600 !important;
	line-height: 24px !important;
}

:where(body #page-container) h5,
:where(body #page-container .et_pb_text) h5 {
	color: var(--zloe-text) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
}

:where(body #page-container) h6,
:where(body #page-container .et_pb_text) h6 {
	color: var(--zloe-text);
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 16px !important;
}

body #page-container .et_pb_button,
body #page-container .zloe-button .et_pb_button,
body #page-container .zloe-button.et_pb_button {
	align-items: center !important;
	/* Schräge in festen px statt Prozent: bei langen Texten wuchs der durchsichtige
	   Keil sonst über das Padding hinaus und die Schrift ragte aus der Fläche */
	background: var(--zloe-teal) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-sizing: border-box !important;
	clip-path: polygon(30px 0, calc(100% - 12px) 0, calc(100% - 30px) 100%, 12px 100%) !important;
	color: var(--zloe-white) !important;
	display: inline-flex !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	justify-content: center !important;
	line-height: 27.2px !important;
	min-height: 48px;
	min-width: 205px;
	overflow: hidden !important;
	padding: 10px 46px !important;
	position: relative !important;
	text-align: center !important;
	text-shadow: none !important;
	z-index: 0;
}

body #page-container .et_pb_button:hover,
body #page-container .et_pb_module .et_pb_button:hover {
	background: var(--zloe-teal-dark) !important;
	border: 0 !important;
	padding: 10px 46px !important;
}

body #page-container .et_pb_button:before,
body #page-container .et_pb_button:after {
	display: none !important;
}

body #page-container .et-l--header .et_pb_section:has(.top-bar-row) {
	background: var(--zloe-teal) !important;
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 !important;
}

body #page-container .top-bar-row.et_pb_row {
	align-items: center !important;
	display: flex !important;
	height: 40px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: var(--zloe-content-width) !important;
	padding: 0 !important;
	width: calc(100% - (var(--zloe-content-gutter) * 2)) !important;
}

body #page-container .top-bar-row .et_pb_column {
	align-items: center !important;
	display: flex !important;
	height: 40px !important;
}

body #page-container .top-bar-row .top-bar-second-column {
	gap: 0 !important;
	justify-content: flex-end !important;
}

body #page-container .top-bar-row .blurb-top-bar {
	display: none !important;
}

body #page-container .top-bar-row .et_pb_social_media_follow,
body #page-container .top-bar-row .et_pb_social_media_follow li {
	align-items: center !important;
	display: flex !important;
	margin: 0 5px 0 0 !important;
	padding: 0 !important;
}

body #page-container .top-bar-row .et_pb_social_media_follow li a.icon {
	background: var(--zloe-white) !important;
	border-radius: 0 !important;
	height: 21px !important;
	width: 21px !important;
}

body #page-container .top-bar-row .et_pb_social_media_follow li a.icon:before {
	color: var(--zloe-teal) !important;
	font-size: 12px !important;
	height: 21px !important;
	line-height: 21px !important;
	width: 21px !important;
}

body #page-container .top-bar-row .et_pb_button {
	background: var(--zloe-white) !important;
	clip-path: none !important;
	color: var(--zloe-teal) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 16px !important;
	min-height: 28px !important;
	min-width: 205px !important;
	padding: 0 18px !important;
}

body #page-container .top-bar-row .et_pb_button:before {
	display: none !important;
}

body #page-container .et-l--header .top-bar-row .et_pb_button_0_tb_header.et_pb_button,
body #page-container .et-l--header .top-bar-row .et_pb_button_0_tb_header.et_pb_button:hover {
	background: var(--zloe-white) !important;
	clip-path: none !important;
	color: var(--zloe-teal) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 16px !important;
	min-height: 28px !important;
	min-width: 205px !important;
	padding: 0 18px !important;
	text-shadow: none !important;
}

body #page-container .et-l--header .et_pb_section:has(.header-v1-menu) {
	background: var(--zloe-white) !important;
	box-shadow: 0 12px 24px rgba(24, 49, 58, 0.12) !important;
	min-height: 96px !important;
	padding: 0 !important;
	z-index: 10000 !important;
}

body #page-container .et-l--header .et_pb_section:has(.header-v1-menu) > .et_pb_row {
	align-items: center !important;
	display: flex !important;
	height: 96px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: var(--zloe-content-width) !important;
	padding: 0 !important;
	width: calc(100% - (var(--zloe-content-gutter) * 2)) !important;
}

body #page-container .custom-menu-v1-column,
body #page-container .header-v1-menu,
body #page-container .header-v1-menu .et_pb_menu_inner_container {
	align-items: center !important;
	display: flex !important;
	width: 100% !important;
}

body #page-container .header-v1-menu.et_pb_menu {
	margin: 0 !important;
	padding: 0 !important;
}

body #page-container .header-v1-menu .et_pb_menu__logo-wrap {
	flex: 0 0 auto !important;
	margin: 0 auto 0 0 !important;
}

body #page-container .header-v1-menu .et_pb_menu__logo img {
	display: block !important;
	height: auto !important;
	max-height: 79px !important;
	max-width: 205px !important;
	object-fit: contain !important;
	width: 205px !important;
}

body #page-container .header-v1-menu .et_pb_menu__wrap {
	flex: 1 1 auto !important;
	justify-content: flex-end !important;
}

body #page-container .header-v1-menu .et-menu {
	align-items: center !important;
	gap: 44px !important;
	padding: 0 !important;
}

body #page-container .header-v1-menu.et_pb_menu .et-menu > li {
	padding: 0 !important;
}

body #page-container .header-v1-menu.et_pb_menu .et-menu > li > a {
	color: #333333 !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 20px !important;
	padding: 40px 0 !important;
}

body #page-container .header-v1-menu.et_pb_menu .et-menu > li.current-menu-item > a,
body #page-container .header-v1-menu.et_pb_menu .et-menu > li.current_page_item > a,
body #page-container .header-v1-menu.et_pb_menu .et-menu > li > a:hover {
	color: var(--zloe-teal) !important;
}

/* Hero-Hintergrundbild kommt aus Divi (Abschnitt „Hero“ → Hintergrund, am Handy aus).
   Hier nur Farbe sowie Größe/Position je Bildschirmbreite – kein `background:`-Kurzwert,
   der würde Divis Bild überschreiben. */
body #page-container .zloe-figma-hero.et_pb_section {
	background-color: var(--zloe-white) !important;
	min-height: 820px;
	overflow: visible;
	padding: 0 !important;
}

body #page-container .zloe-hero-row.et_pb_row {
	align-items: stretch !important;
	display: flex !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: var(--zloe-content-width) !important;
	min-height: 820px;
	padding: 0 !important;
	width: calc(100% - (var(--zloe-content-gutter) * 2)) !important;
}

body #page-container .zloe-hero-copy {
	display: flex !important;
	flex: 0 0 51% !important;
	flex-direction: column;
	justify-content: flex-start;
	padding: 168px 0 76px clamp(80px, calc(35vw - 368px), 320px) !important;
	width: 51% !important;
	z-index: 2;
}

body #page-container .zloe-hero-title {
	margin-bottom: 56px !important;
	max-width: 660px;
}

body #page-container .zloe-hero-text {
	color: var(--zloe-text-strong) !important;
	font-size: 28px !important;
	line-height: 35.2px !important;
	margin-bottom: 34px !important;
	max-width: 600px;
}

body #page-container .zloe-hero-text strong {
	color: var(--zloe-text-strong) !important;
	font-weight: 900 !important;
}

@media (min-width: 768px) {
	body #page-container .zloe-figma-hero.et_pb_section {
		background-color: var(--zloe-white) !important;
		background-position: right var(--zloe-content-gutter) top 0 !important;
		background-repeat: no-repeat !important;
		background-size: auto 760px !important;
	}

	body #page-container .zloe-hero-row.et_pb_row {
		display: block !important;
		position: relative;
	}

	body #page-container .zloe-hero-copy {
		box-sizing: border-box;
		flex: none !important;
		min-height: 820px;
		width: 100% !important;
	}

}

@media (min-width: 768px) and (max-width: 1399px) {
	body #page-container .zloe-figma-hero.et_pb_section {
		background-position: right -150px top 0 !important;
		background-size: auto 680px !important;
		min-height: 760px;
	}

	body #page-container .zloe-hero-row.et_pb_row,
	body #page-container .zloe-hero-copy {
		min-height: 760px;
	}

	body #page-container .zloe-hero-copy {
		padding-top: 142px !important;
	}

	body #page-container .zloe-hero-title {
		margin-bottom: 38px !important;
		max-width: 520px;
	}

	body #page-container .zloe-hero-title h1 {
		font-size: 66px !important;
		line-height: 72px !important;
	}

	body #page-container .zloe-hero-text {
		font-size: 24px !important;
		line-height: 31px !important;
		max-width: 500px;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	body #page-container .zloe-figma-hero.et_pb_section {
		background-position: right 20% top 0 !important;
		background-size: auto 640px !important;
		min-height: 700px;
	}

	body #page-container .zloe-hero-row.et_pb_row {
		display: block !important;
		min-height: 700px;
		position: relative;
	}

	body #page-container .zloe-hero-copy {
		box-sizing: border-box;
		margin: 0 !important;
		min-height: 700px;
		padding: 118px 0 56px 44px !important;
		width: 100% !important;
	}

	body #page-container .zloe-hero-title,
	body #page-container .zloe-hero-text {
		max-width: 380px;
	}

	body #page-container .zloe-hero-title h1 {
		font-size: 48px !important;
		line-height: 54px !important;
	}

	body #page-container .zloe-hero-text {
		font-size: 20px !important;
		line-height: 27px !important;
	}
}

@media (min-width: 768px) and (max-width: 980px) {
	body #page-container .zloe-hero-title {
		margin-bottom: 30px !important;
	}

	body #page-container .zloe-hero-text {
		margin-bottom: 26px !important;
	}
}

@media (min-width: 1400px) and (max-width: 1799px) {
	body #page-container .zloe-figma-hero.et_pb_section {
		background-position: right -140px top 0 !important;
		background-size: auto 760px !important;
	}
}

@media (min-width: 1921px) {
	body #page-container .zloe-figma-hero.et_pb_section {
		background-position: right calc((100vw - var(--zloe-content-width)) / 2) top 0 !important;
	}
}

@media (min-width: 1800px) {
	body #page-container .zloe-figma-hero.et_pb_section,
	body #page-container .zloe-hero-row.et_pb_row {
		min-height: 943px;
	}

	body #page-container .zloe-figma-hero.et_pb_section {
		background-size: auto 887px !important;
	}

	body #page-container .zloe-hero-copy {
		min-height: 943px;
	}
}

body #page-container .zloe-home-intro-section,
body #page-container .zloe-home-cards-section,
body #page-container .zloe-home-mission-section,
body #page-container .zloe-home-member-section,
body #page-container .zloe-home-news-section,
body #page-container .zloe-home-newsletter-section {
	background: var(--zloe-white) !important;
	padding: 88px 0 !important;
}

body #page-container .zloe-home-intro-row,
body #page-container .zloe-home-cards-row,
body #page-container .zloe-home-mission-row,
body #page-container .zloe-home-member-row,
body #page-container .zloe-home-news-heading-row,
body #page-container .zloe-home-news-row,
body #page-container .zloe-home-cta-row {
	max-width: 1240px !important;
	padding: 0 !important;
	width: calc(100% - 80px) !important;
}

body #page-container .zloe-home-intro-section {
	padding: 88px 0 34px !important;
	text-align: center;
}

body #page-container .zloe-home-cards-section {
	padding: 34px 0 92px !important;
}

body #page-container .zloe-home-intro-column {
	margin: 0 auto !important;
	max-width: 1040px;
}

body #page-container .zloe-home-intro-title,
body #page-container .zloe-home-intro-copy {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 980px;
}

body #page-container .zloe-home-intro-copy,
body #page-container .zloe-home-section-copy,
body #page-container .zloe-home-card-copy,
body #page-container .zloe-home-news-copy,
body #page-container .zloe-home-cta-copy {
	color: var(--zloe-text) !important;
}

body #page-container .zloe-home-cards-row,
body #page-container .zloe-home-news-row {
	align-items: stretch !important;
	display: flex !important;
	gap: 52px;
}

body #page-container .zloe-home-card,
body #page-container .zloe-home-news-card {
	align-items: center;
	background: var(--zloe-white) !important;
	display: flex !important;
	flex-direction: column;
	justify-content: flex-start;
	padding: 24px 24px 28px !important;
	text-align: center;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

body #page-container .zloe-home-card:hover,
body #page-container .zloe-home-news-card:hover {
	box-shadow: 0 20px 44px rgba(24, 49, 58, 0.14);
	transform: translateY(-3px);
}

body #page-container .zloe-home-card-image,
body #page-container .zloe-home-card-image .et_pb_image_wrap {
	height: 170px !important;
	margin: 0 auto 26px !important;
	width: 100% !important;
}

body #page-container .zloe-home-card-image img {
	box-shadow: none !important;
	display: block !important;
	height: 170px !important;
	margin: 0 auto !important;
	max-width: 310px !important;
	object-fit: contain !important;
	width: 100% !important;
}

body #page-container .zloe-home-card-title,
body #page-container .zloe-home-news-title {
	margin-bottom: 22px !important;
}

body #page-container .zloe-home-card-copy,
body #page-container .zloe-home-news-copy {
	margin: 0 auto 30px !important;
	max-width: 330px;
}

body #page-container .zloe-home-card .et_pb_button_module_wrapper,
body #page-container .zloe-home-news-card .et_pb_button_module_wrapper {
	margin-top: auto !important;
}

body #page-container .zloe-home-mission-section {
	background: #f4fbfd !important;
}

body #page-container .zloe-home-mission-row,
body #page-container .zloe-home-member-row {
	align-items: center !important;
	display: flex !important;
	gap: 72px;
}

body #page-container .zloe-home-feature-item {
	background: var(--zloe-white) !important;
	margin-bottom: 20px !important;
	padding: 28px 32px !important;
}

body #page-container .zloe-home-feature-item h3 {
	margin-bottom: 10px !important;
}

body #page-container .zloe-home-feature-item p {
	margin: 0 !important;
}

body #page-container .zloe-home-member-section {
	background: #eef8fa !important;
}

body #page-container .zloe-home-member-image img {
	box-shadow: none !important;
	display: block !important;
	margin: 0 auto !important;
	max-height: 360px;
	object-fit: contain;
	width: 100%;
}

body #page-container .zloe-home-eyebrow {
	color: var(--zloe-teal) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 27px !important;
	margin-bottom: 14px !important;
}

body #page-container .zloe-home-centered,
body #page-container .zloe-home-centered p,
body #page-container .zloe-home-centered h2 {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 980px;
	text-align: center !important;
}

body #page-container .zloe-home-news-heading {
	margin-bottom: 34px !important;
	text-align: center;
}

body #page-container .zloe-home-news-kicker {
	color: var(--zloe-teal) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	margin-bottom: 14px !important;
}

body #page-container .zloe-home-newsletter-section {
	background: var(--zloe-teal-dark) !important;
	padding: 88px 0 !important;
}

body #page-container .zloe-home-cta-column {
	align-items: center;
	display: flex !important;
	flex-direction: column;
	text-align: center;
}

body #page-container .zloe-home-cta-title h2,
body #page-container .zloe-home-cta-copy p {
	color: var(--zloe-white) !important;
}

body #page-container .zloe-home-cta-copy {
	margin: 0 auto 26px !important;
	max-width: 760px;
}

body #page-container .et-l--footer .et_pb_row {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1400px !important;
	width: calc(100% - (var(--zloe-content-gutter) * 2)) !important;
}

body #page-container .et-l--footer h1,
body #page-container .et-l--footer h2,
body #page-container .et-l--footer h3,
body #page-container .et-l--footer h4,
body #page-container .et-l--footer h5,
body #page-container .et-l--footer h6,
body #page-container .et-l--footer .et_pb_text_inner h1,
body #page-container .et-l--footer .et_pb_text_inner h2,
body #page-container .et-l--footer .et_pb_text_inner h3,
body #page-container .et-l--footer .et_pb_text_inner h4,
body #page-container .et-l--footer .et_pb_text_inner h5,
body #page-container .et-l--footer .et_pb_text_inner h6,
body #page-container .et-l--footer .et_pb_blurb .et_pb_module_header {
	color: var(--zloe-teal) !important;
}

body #page-container .et-l--footer,
body #page-container .et-l--footer .et_pb_text,
body #page-container .et-l--footer .et_pb_text_inner,
body #page-container .et-l--footer .et_pb_text_inner p,
body #page-container .et-l--footer .et_pb_text_inner li,
body #page-container .et-l--footer .et_pb_blurb_description {
	color: var(--zloe-text) !important;
	font-size: 20px !important;
	line-height: 27px !important;
}

body #page-container .et-l--footer .et_pb_text_inner p a:not(.et_pb_button):not(.button),
body #page-container .et-l--footer .et_pb_text_inner li a:not(.et_pb_button):not(.button),
body #page-container .et-l--footer .et_pb_module a:not(.et_pb_button):not(.button) {
	color: var(--zloe-teal) !important;
}

body #page-container .zloe-video-embed {
	aspect-ratio: var(--zloe-video-aspect, 16 / 9);
	background: #000;
	display: block;
	max-width: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

body #page-container .et_pb_text:has(.zloe-video-embed),
body #page-container .et_pb_code:has(.zloe-video-embed),
body #page-container .et_pb_text_inner:has(.zloe-video-embed),
body #page-container .et_pb_code_inner:has(.zloe-video-embed) {
	max-width: 100% !important;
	width: 100% !important;
}

/* Galerie-Modul (Slider) quadratisch, Bilder füllen die Fläche und werden zugeschnitten.
   Nur die Klasse im Modul unter Erweitert → CSS-Klasse eintragen, sonst nichts.
   Das Divi-Seitenverhältnis wirkt nur auf den Modulrahmen, nicht auf die Bilder –
   deshalb hier; ein dort eingestellter Wert wird überschrieben. */
body #page-container .zloe-slider-quadratisch.et_pb_gallery {
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
}

body #page-container .zloe-slider-quadratisch .et_pb_gallery_image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

body #page-container .zloe-slider-quadratisch .et_pb_gallery_image a,
body #page-container .zloe-slider-quadratisch .et_pb_gallery_image img {
	display: block;
	height: 100% !important;
	width: 100% !important;
}

body #page-container .zloe-slider-quadratisch .et_pb_gallery_image img {
	max-height: none !important;
	object-fit: cover;
}

body #page-container .zloe-video-embed iframe {
	border: 0;
	display: block;
	height: 100% !important;
	inset: 0;
	position: absolute;
	width: 100% !important;
}

@media (min-width: 1200px) and (max-width: 1500px) {
	body #page-container .zloe-hero-copy {
		padding-left: clamp(80px, calc(35vw - 368px), 320px) !important;
	}
}

@media (max-width: 1500px) {
	body #page-container .header-v1-menu .et-menu {
		gap: 34px !important;
	}
}

@media (max-width: 767px) {
	body #page-container .zloe-figma-hero.et_pb_section,
	body #page-container .zloe-hero-row.et_pb_row {
		min-height: 0;
	}

	/* Handy: Hintergrundbild (Divi, Handy-Ansicht) oben in voller Breite, Text darunter.
	   Das Bild ist quadratisch – der Text beginnt daher eine Bildbreite tiefer. */
	body #page-container .zloe-figma-hero.et_pb_section {
		background-position: center top !important;
		background-repeat: no-repeat !important;
		background-size: 100% auto !important;
	}

	body #page-container .zloe-hero-row.et_pb_row {
		display: block !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	body #page-container .zloe-hero-copy {
		box-sizing: border-box;
		margin: 0 !important;
		padding: calc(100% + 42px) var(--zloe-content-gutter) 56px !important;
		width: 100% !important;
	}

	body #page-container .zloe-hero-title {
		margin-bottom: 24px !important;
	}

	body #page-container .zloe-hero-text {
		font-size: 22px !important;
		line-height: 28px !important;
		margin-bottom: 26px !important;
		/* −25px aus dem Divi-Modul aufheben, sonst klebt der Text an der H1 */
		margin-top: 0 !important;
	}

}

@media (max-width: 980px) {
	/* Mobil/Tablet: ein Seitenrand für alles (Header, Hero, Content, Footer) */
	:root {
		--zloe-content-gutter: 22px;
	}

	/* Divi-Zeilen stehen sonst auf 80 % Breite (Rand je nach Gerät 35–40px) */
	body #page-container #et-main-area .et_pb_row:not(.zloe-hero-row) {
		max-width: none !important;
		width: calc(100% - (var(--zloe-content-gutter) * 2)) !important;
	}

	body #page-container h1,
	body #page-container .et_pb_text h1 {
		font-size: 44px !important;
		line-height: 48px !important;
	}

	body #page-container h2,
	body #page-container .et_pb_text h2 {
		font-size: 36px !important;
		line-height: 40px !important;
	}

	body #page-container h3,
	body #page-container .et_pb_text h3,
	body #page-container .et_pb_blurb h3 {
		font-size: 24px !important;
		line-height: 27px !important;
	}

	body #page-container h4,
	body #page-container .et_pb_text h4,
	body #page-container .et_pb_blurb h4 {
		font-size: 22px !important;
		line-height: 24px !important;
	}

	body,
	body .et_pb_text,
	body .entry-content {
		font-size: 18px !important;
		line-height: 26px !important;
	}

	/* Mobil: Mindesthöhe an die Zeile anpassen (sonst 30px Leerraum unter Logo/Menü),
	   seitlicher Abstand nur über die Zeilenbreite wie im Content – kein Zusatz-Padding */
	body #page-container .et-l--header .et_pb_section:has(.header-v1-menu) {
		min-height: 66px !important;
	}

	body #page-container .et-l--header .et_pb_section:has(.header-v1-menu) > .et_pb_row {
		height: 66px !important;
		padding: 0 !important;
	}

	body #page-container .header-v1-menu .et_pb_menu__logo img {
		max-height: 50px !important;
		max-width: 132px !important;
		width: 132px !important;
	}

	body #page-container .zloe-home-intro-section,
	body #page-container .zloe-home-cards-section,
	body #page-container .zloe-home-mission-section,
	body #page-container .zloe-home-member-section,
	body #page-container .zloe-home-news-section,
	body #page-container .zloe-home-newsletter-section {
		padding: 64px 0 !important;
	}

	body #page-container .zloe-home-intro-row,
	body #page-container .zloe-home-cards-row,
	body #page-container .zloe-home-mission-row,
	body #page-container .zloe-home-member-row,
	body #page-container .zloe-home-news-heading-row,
	body #page-container .zloe-home-news-row,
	body #page-container .zloe-home-cta-row {
		width: calc(100% - (var(--zloe-content-gutter) * 2)) !important;
	}

	body #page-container .zloe-home-cards-row,
	body #page-container .zloe-home-news-row,
	body #page-container .zloe-home-mission-row,
	body #page-container .zloe-home-member-row {
		display: block !important;
	}

	body #page-container .zloe-home-card,
	body #page-container .zloe-home-news-card,
	body #page-container .zloe-home-mission-copy,
	body #page-container .zloe-home-feature-list,
	body #page-container .zloe-home-member-visual,
	body #page-container .zloe-home-member-copy {
		margin-bottom: 34px !important;
		width: 100% !important;
	}

}

@media (min-width: 768px) and (max-width: 980px) {
	body #page-container .zloe-figma-hero.et_pb_section {
		background-position: right 55% top 0 !important;
		background-size: auto 500px !important;
		min-height: 500px;
	}

	body #page-container .zloe-hero-row.et_pb_row {
		display: block !important;
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: var(--zloe-content-width) !important;
		min-height: 500px;
		position: relative;
		width: calc(100% - (var(--zloe-content-gutter) * 2)) !important;
	}

	body #page-container .zloe-hero-copy {
		box-sizing: border-box;
		margin: 0 !important;
		min-height: 500px;
		padding: 118px 0 56px 44px !important;
		width: 100% !important;
	}

	/* H1 steht im Bild, der Fließtext darunter: Die Überschrift-Box reicht bis zur
	   Bildunterkante (500px Bild − 118px Abstand oben). */
	body #page-container .zloe-hero-title {
		margin-bottom: 32px !important;
		max-width: 320px;
		min-height: 382px;
	}

	body #page-container .zloe-hero-title h1 {
		font-size: 48px !important;
		line-height: 54px !important;
	}

	body #page-container .zloe-hero-text {
		font-size: 20px !important;
		line-height: 27px !important;
		margin-bottom: 26px !important;
		/* Im Divi-Modul steht oben −25px (rückt den Text an die H1) – hier steht er
		   unter dem Bild, daher aufheben. */
		margin-top: 0 !important;
		max-width: 640px;
	}
}

.line-before-sub-text:before {
	content: "";
    position: absolute;
    top: 13px;
    left: 0;
    width: 45px;
    height: 2px;
}

/* ### Header & menu ### */

.custom-menu-v1-row {
	display: flex;
    align-items: center;
}

.custom-menu-v1-row .custom-menu-v1.et_pb_menu .et-menu>li {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.align-button-hamburger {
	display: flex;
    align-items: center;
    justify-content: flex-end;
}


@media screen and (min-width: 981px) {
.custom-menu-v1-column {
	display: flex;
    align-items: center;
}}

.header-v1-menu.et_pb_menu .et-menu>li {
    padding-left: 20px !important;
    padding-right: 20px !important;	
}

@media screen and (min-width: 981px) {
.header-v1-menu {
    flex: 2 1 auto;
}}

/* ### Header & menu v3 ### */
.top-bar-row {
	display: flex;
    align-items: center;
}

.top-bar-row .top-bar-second-column .et_pb_blurb_container {
	padding-left: 0px!important;
}

.top-bar-second-column {
	display: flex;
    justify-content: flex-end;
}

.top-bar-second-column h4.et_pb_module_header {
	padding-bottom: 0px !important;
}

.top-bar-row .et_pb_social_media_follow li {
	margin-bottom: 0px!important;
}

.blurb-top-bar {
	display: flex;
    align-self: center;
}

/* ### logo row ### */
.logos-row {
	display: flex;
    align-items: center;	
}

.et-l--header .et_pb_menu__logo img,
.et-l--header .et_pb_menu__logo-wrap img,
.header-v1-menu .et_pb_menu__logo img,
.header-v1-menu .et_pb_menu__logo-wrap img,
.custom-menu-v1 .et_pb_menu__logo img,
.custom-menu-v1 .et_pb_menu__logo-wrap img {
	width: auto !important;
	max-width: 205px !important;
	max-height: 79px !important;
	object-fit: contain;
}

@media (max-width: 980px) {
	.et-l--header .et_pb_menu__logo img,
	.et-l--header .et_pb_menu__logo-wrap img,
	.header-v1-menu .et_pb_menu__logo img,
	.header-v1-menu .et_pb_menu__logo-wrap img,
	.custom-menu-v1 .et_pb_menu__logo img,
	.custom-menu-v1 .et_pb_menu__logo-wrap img {
		max-width: 132px !important;
		max-height: 50px !important;
	}
}

/* ### Team members ### */

.custom-teammember .et_pb_member_social_links {
	margin: 0 0 27px;
    list-style: none;
    position: absolute;
    width: 49px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    bottom: 100px;
    right: 0px;
    padding: 12px 0;
    text-align: center;
    z-index: 100;
    -webkit-transition: all .25s cubic-bezier(.645,.045,.355,1);
    -khtml-transition: all .25s cubic-bezier(.645,.045,.355,1);
    -moz-transition: all .25s cubic-bezier(.645,.045,.355,1);
    -ms-transition: all .25s cubic-bezier(.645,.045,.355,1);
    -o-transition: all .25s cubic-bezier(.645,.045,.355,1);
    transition: all .25s cubic-bezier(.645,.045,.355,1);
    opacity: 0;
}

.custom-teammember:hover .et_pb_member_social_links {
	right: 25px;
	opacity:1;
}

.custom-teammember .et_pb_member_social_links li {
    width: 100%;
    padding: 5px 0px;
}

@media (max-width: 980px) and (min-width: 768px) {
.et_pb_column .custom-teammember .et_pb_team_member_description {
    display: block;
}}

.custom-teammember .et_pb_team_member_image img {
	border-radius: 12px;
}

/* ### Blog ### */
.custom-blog-full-v1 article{
	margin-bottom: 0px;
}

.kali-blog-list .entry-featured-image-url {
	width: 100px;
	float: left;
	margin-bottom: 0!important;
}

.kali-blog-list .entry-title,
.kali-blog-list .post-meta {
	width: calc(100% - 100px);
	float: left;
	padding-left: 20px;
}

.kali-blog-list .entry-featured-image-url {
	padding-top: 100px;
	display: block;
}

.kali-blog-list .entry-featured-image-url img {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
}

.kali-blog-list .et_pb_post:not(:last-child) {
	border-bottom: 1px solid #dddddd!important;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.kali-blog-list article:last-child {
	margin-bottom: 0px;
}

.kali-blog-list h2.entry-title {
	margin-top: 25px;
}

.kali-blog-list img {
	border-radius: 10px;
}

.featured-post .et_pb_post .post-meta {
    position: absolute;
    left: 10px;
    top: 10px;
}

.featured-post .et_pb_post .post-meta a {
    display: inline-block;
    padding: 0px 12px;
    border-radius: 5px;
    font-weight: 700;
}

.featured-post .et_pb_post .post-meta a {
    background-color: #f1f3f4;
}

.featured-post-overlay:after {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	left:0;
	top:0;
	background-color: rgba(0,0,0,0.3);
	opacity: 0;
	transition: all 0.2s ease-in-out;
	z-index: -1;
}
 
.featured-post-overlay:hover:after {
	opacity: 1;
} 


/* #### Dropdown Menu #### */
  
.nav li ul.sub-menu {
	padding: 0px !important;
  	border-radius: 5px;
  	box-shadow: 0 5px 17px 0px rgb(0 0 0 / 25%);
  	-moz-box-shadow: 0 5px 17px 0px rgba(0,0,0,.25);
  	-webkit-box-shadow: 0 5px 17px 0px rgb(0 0 0 / 25%);
}
  
.nav li li {
  	padding: 0 0px !important;
  	width: 100%;
}
  
.et-menu li li a {
  	padding: 10px 20px;
  	width: 100% !important;
}
  
.et-menu > .menu-item-has-children > .sub-menu:before {
	content: '';
  	display: block;
  	position: absolute;
  	left: 35px;
  	top: -20px;
  	width: 0;
  	height: 0;
  	border-top: 8px solid transparent;
  	border-right: 12px solid transparent;
  	border-left: 12px solid transparent;
  	z-index: 1;
}
  
.custom-menu-v1.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li>a {
    padding-bottom: 20px;
	padding-top: 20px;
}

.custom-menu-v1 .et-menu .menu-item-has-children>a:first-child:after {
    top: 36%;
}

.nav li li ul {
    top: -3px !important;
}

.custom-menu-v1.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li {
    margin-top: 0px;
}

/* #### Collaping Mobile Menu #### */

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '\33';
	border-radius: 50%;
	padding: 3px;
}

ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open>.mobile-toggle-icon::after {
	content: '\32';
}

.et_mobile_menu .menu-item-has-children>a {
    font-weight: 600 !important; 
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}

.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon {
	text-align: center;
	opacity: 1;
}

  
/* ###  Style scroll bar ### */

#style-scrollbar::-webkit-scrollbar-track {
  border-radius: 0px;
}

#style-scrollbar::-webkit-scrollbar {
  width: 10px;
}

#style-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
}  
  
/* ###### Slide-in ###### */
.slide-in-row ul {
  flex-direction: column;
}

.slide-in-row {
	overflow: hidden;
  	transform: translateX(104%);
  	transition: all .3s ease;
	opacity:1;
	display: flex;
}

.slide-in-row.active-menu-v1 {
  	overflow: hidden;
  	transform: translateX(-3%);
  	transition: all .3s ease;
	opacity:1;
}

.et_pb_sticky .slide-in-row .et_pb_blurb:hover {
	box-shadow: 0px 2px 25px 0px rgb(0 0 0 / 10%) !important;
}

/* ###### Blurb V2 ###### */
.service-blurb-v2 .et_pb_blurb_content {
	z-index:9;
}

.service-blurb-v2:before {
	content: "";
    position: absolute;
    bottom: -20px;
    right: -20px;
    height: 100px;
    width: 100px;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease,-webkit-transform 0.4s ease;
}

.service-blurb-v2:hover:before,
.service-blurb-v2:hover:after {
-webkit-transform: scale(21);
    transform: scale(21);
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease,-webkit-transform 1s ease;
}



/* ### Post ### */
.single-post .custom-post-content h2,
.single-post .custom-post-content h3 {
	padding: 1.3em 0 0.8em !important;
}

@media only screen and (min-width: 479px) {
.kali-custom-optin .et_pb_newsletter_fields {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.kali-custom-optin .et_pb_newsletter_button_wrap {
	display: flex;
}

.kali-custom-optin .et_pb_newsletter_form p.et_pb_newsletter_field {
    padding-bottom: 0em !important;
}

.kali-custom-optin .et_pb_newsletter_button_text {
	vertical-align: sub;
}}

/* ### General ### */

@media screen and (min-width: 981px) and (max-width: 1300px){
.et_pb_section .custom-row-1300.et_pb_row {
	padding-left: 0px !important;
	padding-right: 0px !important;
}}

@media screen and (min-width: 981px) and (max-width: 1450px){
.custom-row-width-981.et_pb_row  {
	width: 90% !important;
	max-width: 90% !important;
}}
  
/* ### Blog ### */ 

.kali-blog-equal-height .kali-auto-height {
    height: auto !important;
}
.kali-blog-equal-height .kali-auto-margin {
    margin-top: 20px !important;
}

.more-link {
	display: inline-block;
    padding: 5px 15px;
    border-radius: 6px;
}

.job-list ul li {
    padding-bottom: 20px;
}

/* ### Contact form home page ### */
.kavi-contact-form {
	border-radius: 12px;	
}

@media only screen and (min-width: 981px) {
.kavi-contact-form .et_pb_contact_field_options_list  {
	display: flex !important;
    flex-wrap: wrap;
}

.kavi-contact-form .et_pb_contact_field_checkbox {
	flex: 0 0 33.333333%;
	padding-bottom: 5px;
}

.kavi-contact-form .et_pb_contact_field_checkbox label {
	display: flex !important;
    align-items: center;	
}}

.kavi-contact-form .et_pb_contact_field_options_title {
	color: rgba(0,0,0,1) !important;
	font-size: 16px !important;
	padding-top: 10px;
}

/* Hide slide-in for visual builder */
.et-fb .slide-in-row {
	display: none;
}

/* Keep Divi's first slider image visible when Imagify adds a picture wrapper. */
body #page-container .et_pb_slider .et_pb_slide:first-child .et_pb_slide_image picture > img {
	opacity: 1 !important;
}

/* ### Eventbrite-Karten ([wfea layout="card"], News & Events) ###
   Das Plugin hängt an „Anmelden" die Klasse et_pb_button an, dadurch greift der
   schräge Divi-Button von oben. Hier innerhalb der Karten zurück auf den
   Originallook des Plugins (Vorlage: assets/events.png). */
body #page-container .wfea-card .eaw-content-block h3.eaw-title {
	font-size: 15px !important;
	line-height: 1.45 !important;
	margin-bottom: 14px !important;
	padding-bottom: 0 !important;
}

body #page-container .wfea-card .eaw-content-block h3.eaw-title a {
	text-decoration: underline !important;
	text-decoration-color: #d9d9d9 !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 5px;
}

body #page-container .wfea-card .eaw-content-block .eaw-time {
	color: #000 !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
}

body #page-container .wfea-card .eaw-content-block .eaw-buttons {
	align-items: center !important;
	gap: 12px;
	margin-top: auto !important;
	padding-bottom: 10px !important;
	padding-top: 20px !important;
}

body #page-container .wfea-card .eaw-content-block .eaw-button-details {
	color: var(--zloe-teal) !important;
	cursor: pointer;
	font-size: 17px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-transform: uppercase;
}

body #page-container .wfea-card .eaw-content-block .eaw-button-details .eaw-card-details {
	text-transform: none;
}

body #page-container .wfea-card .eaw-booknow a.et_pb_button,
body #page-container .wfea-card .eaw-booknow a.et_pb_button:hover {
	background: var(--zloe-teal) !important;
	border-radius: 3px !important;
	clip-path: none !important;
	color: #fff !important;
	display: block !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: 0.5px !important;
	line-height: 1.4 !important;
	min-height: 0;
	min-width: 0;
	padding: 8px 16px !important;
	text-transform: uppercase;
}

body #page-container .wfea-card .eaw-booknow a.et_pb_button:hover {
	background: var(--zloe-teal-dark) !important;
}

body #page-container .wfea-card .eaw-calendar-date .eaw-calendar-date-month {
	color: #000 !important;
}

/* Hero-Text am Desktop bündig mit dem Schriftzug im Logo (Logo-Text beginnt 103px
   nach dem linken Logorand). Überschrift ohne Breitengrenze, damit
   „zukunft.lehre.österreich." in einer Zeile steht. Steht bewusst am Dateiende:
   überschreibt die älteren, breitenabhängigen Einzüge darüber. */
@media (min-width: 981px) {
	:root {
		--zloe-hero-einzug: 103px;
	}

	body #page-container .zloe-hero-copy {
		padding-left: var(--zloe-hero-einzug) !important;
	}

	body #page-container .zloe-hero-title {
		max-width: none !important;
	}
}

/* H1-Größe so, dass „zukunft.lehre.österreich." ~30px vor dem türkisen Bildrahmen endet.
   Die Zeile ist rund 11,3 × Schriftgröße breit; der Rahmen liegt je nach Hintergrund-
   Regel (Stufen 1200/1400/1800 oben) unterschiedlich – daher je Stufe eine Formel. */
@media (min-width: 981px) and (max-width: 1199px) {
	/* Rahmen liegt hier sehr weit links – Text ganz nach links (kein Logo-Einzug),
	   Schrift bleibt bei 48px, die Überschrift bricht vor dem Rahmen um
	   (Umbruchstellen nach „zukunft." und „lehre." stehen im Inhalt als U+200B). */
	:root {
		--zloe-hero-einzug: 0px;
	}

	body #page-container .zloe-hero-title {
		max-width: calc(80vw - 443px) !important;
	}
}

@media (min-width: 1200px) and (max-width: 1399px) {
	body #page-container .zloe-hero-title h1 {
		font-size: calc(8.84vw - 62.9px) !important;
		line-height: 1.1 !important;
	}
}

@media (min-width: 1400px) and (max-width: 1799px) {
	body #page-container .zloe-hero-title h1 {
		font-size: min(80px, calc(8.84vw - 70.9px)) !important;
		line-height: 1.1 !important;
	}
}

@media (min-width: 1800px) {
	body #page-container .zloe-hero-title h1 {
		font-size: min(73px, calc(8.84vw - 97.8px)) !important;
		line-height: 1.1 !important;
	}
}