/*
Theme Name:   Kulturkommunikation
Theme URI:    https://create-systems.de
Author:       Create Systems – Christian Schmidt
Author URI:   https://create-systems.de
Description:  Block-Theme für Initiative Kulturkommunikation / kulturmarketing.de. 1:1-Nachbau des bisherigen Divi-Designs mit nativen Gutenberg-Blöcken.
Version:      1.1.0
Requires at least: 6.6
Requires PHP: 8.0
Text Domain:  kulturkommunikation
*/

/* ==========================================================
   1. Basis (entspricht Divi-Grundstyles)
   ========================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* Divi: strong fett (700), b relativ (bolder) */
strong {
	font-weight: 700;
}
a {
	text-decoration: none;
}
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ==========================================================
   2. Raster: Sektion > Zeile > Spalte > Modul (wie Divi)
   Zeile = 80 % der Sektion, max. 1080 px. Standardabstände wie Divi
   (fließend, siehe unten), eigene Werte inline bzw. in assets/css/responsive.css.
   ========================================================== */
.cs-section {
	position: relative;
	margin-block: 0;
}
.cs-row {
	position: relative;
	display: flow-root;
	width: 80%;
	max-width: 1080px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.cs-row-inner {
	width: 100%;
	max-width: none;
}
.cs-section > *,
.cs-row > *,
.cs-col > *,
.cs-row .wp-block-column > *,
.cs-code > *,
.cs-text > *,
.cs-blurb-body > * {
	margin-block: 0;
}
.cs-row > .wp-block-columns {
	margin-block: 0;
}

/* Divi-Standardabstände, fließend wie Divi 4 (eigene Werte stehen inline am Block bzw. als cs-t-/cs-p-Klasse):
   Sektion 4 % (ab 1350 px 54 px, bis 980 px 50 px), Zeile 2 % (27 / 30 px), Modul unten je Spaltenbreite in % der Spalte (Gutter 3),
   bis 980 px 30 px; das letzte Modul einer Spalte ohne Abstand. */
:where(.wp-block-group.has-background),
:where(.wp-block-columns.has-background) {
	padding: 0;
}
.cs-section,
.cs-section-inner {
	padding: 4% 0;
}
.cs-row {
	padding: 2% 0;
}
.cs-row-inner {
	padding: 0;
}
@media (min-width: 1350px) {
	.cs-section,
	.cs-section-inner {
		padding: 54px 0;
	}
	.cs-row {
		padding: 27px 0;
	}
	.cs-row-inner {
		padding: 0;
	}
}
@media (max-width: 980px) {
	.cs-section,
	.cs-section-inner {
		padding: 50px 0;
	}
	.cs-row,
	.cs-row-inner {
		padding: 30px 0;
	}
}
/* Divi: Sektionen in voller Breite (Fullwidth-Sektion) ohne Innenabstand */
.cs-section.cs-section-full,
.cs-section-full > .cs-section-inner {
	padding: 0;
}
@media (min-width: 981px) {
	.cs-row > :not(:last-child),
	.cs-col > :not(:last-child) {
		margin-bottom: 2.75%;
	}
	.cs-ct-3-4 > :not(:last-child) {
		margin-bottom: 3.735%;
	}
	.cs-ct-2-3 > :not(:last-child) {
		margin-bottom: 4.242%;
	}
	.cs-ct-3-5 > :not(:last-child) {
		margin-bottom: 4.758%;
	}
	.cs-ct-1-2 > :not(:last-child) {
		margin-bottom: 5.82%;
	}
	.cs-ct-2-5 > :not(:last-child) {
		margin-bottom: 7.493%;
	}
	.cs-ct-1-3 > :not(:last-child) {
		margin-bottom: 9.27%;
	}
	.cs-ct-1-4 > :not(:last-child) {
		margin-bottom: 13.174%;
	}
	.cs-ct-1-5 > :not(:last-child) {
		margin-bottom: 17.628%;
	}
	.cs-ct-1-6 > :not(:last-child) {
		margin-bottom: 22.759%;
	}
	.cs-g1 > :not(:last-child) {
		margin-bottom: 0%;
	}
	.cs-g1 .cs-ct-3-4 > :not(:last-child) {
		margin-bottom: 0%;
	}
	.cs-g1 .cs-ct-2-3 > :not(:last-child) {
		margin-bottom: 0%;
	}
	.cs-g1 .cs-ct-3-5 > :not(:last-child) {
		margin-bottom: 0%;
	}
	.cs-g1 .cs-ct-1-2 > :not(:last-child) {
		margin-bottom: 0%;
	}
	.cs-g1 .cs-ct-2-5 > :not(:last-child) {
		margin-bottom: 0%;
	}
	.cs-g1 .cs-ct-1-3 > :not(:last-child) {
		margin-bottom: 0%;
	}
	.cs-g1 .cs-ct-1-4 > :not(:last-child) {
		margin-bottom: 0%;
	}
	.cs-g1 .cs-ct-1-5 > :not(:last-child) {
		margin-bottom: 0%;
	}
	.cs-g1 .cs-ct-1-6 > :not(:last-child) {
		margin-bottom: 0%;
	}
	.cs-g2 > :not(:last-child) {
		margin-bottom: 1.5%;
	}
	.cs-g2 .cs-ct-3-4 > :not(:last-child) {
		margin-bottom: 2.02%;
	}
	.cs-g2 .cs-ct-2-3 > :not(:last-child) {
		margin-bottom: 2.284%;
	}
	.cs-g2 .cs-ct-3-5 > :not(:last-child) {
		margin-bottom: 2.551%;
	}
	.cs-g2 .cs-ct-1-2 > :not(:last-child) {
		margin-bottom: 3.093%;
	}
	.cs-g2 .cs-ct-2-5 > :not(:last-child) {
		margin-bottom: 3.927%;
	}
	.cs-g2 .cs-ct-1-3 > :not(:last-child) {
		margin-bottom: 4.787%;
	}
	.cs-g2 .cs-ct-1-4 > :not(:last-child) {
		margin-bottom: 6.593%;
	}
	.cs-g2 .cs-ct-1-5 > :not(:last-child) {
		margin-bottom: 8.523%;
	}
	.cs-g2 .cs-ct-1-6 > :not(:last-child) {
		margin-bottom: 10.588%;
	}
	.cs-g4 > :not(:last-child) {
		margin-bottom: 4%;
	}
	.cs-g4 .cs-ct-3-4 > :not(:last-child) {
		margin-bottom: 5.479%;
	}
	.cs-g4 .cs-ct-2-3 > :not(:last-child) {
		margin-bottom: 6.25%;
	}
	.cs-g4 .cs-ct-3-5 > :not(:last-child) {
		margin-bottom: 7.042%;
	}
	.cs-g4 .cs-ct-1-2 > :not(:last-child) {
		margin-bottom: 8.696%;
	}
	.cs-g4 .cs-ct-2-5 > :not(:last-child) {
		margin-bottom: 11.364%;
	}
	.cs-g4 .cs-ct-1-3 > :not(:last-child) {
		margin-bottom: 14.286%;
	}
	.cs-g4 .cs-ct-1-4 > :not(:last-child) {
		margin-bottom: 21.053%;
	}
	.cs-g4 .cs-ct-1-5 > :not(:last-child) {
		margin-bottom: 29.412%;
	}
	.cs-g4 .cs-ct-1-6 > :not(:last-child) {
		margin-bottom: 40%;
	}
}
@media (max-width: 980px) {
	.cs-row > :not(:last-child),
	.cs-col > :not(:last-child) {
		margin-bottom: 30px;
	}
	.cs-g1 > :not(:last-child),
	.cs-g1 .cs-col > :not(:last-child) {
		margin-bottom: 0;
	}
}
.cs-row > .cs-row-inner:not(:last-child),
.cs-col > .cs-row-inner:not(:last-child) {
	margin-bottom: 0;
}

/* Spalten wie Divi: bis 980 px untereinander (30 px Abstand), vier/fünf Spalten zu zweit, sechs zu dritt; bis 479 px alle untereinander.
   cs-t-keep / cs-p-keep: bei Divi nebeneinander (Childtheme) */
@media (min-width: 768px) and (max-width: 980px) {
	.cs-row-cols > .wp-block-columns:not(.cs-t-keep) {
		flex-wrap: wrap !important;
	}
	.cs-row-cols > .wp-block-columns:not(.cs-t-keep) > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 0 !important;
	}
	.cs-row-cols > .wp-block-columns:not(.cs-t-keep) > .wp-block-column:not(:last-child) {
		margin-bottom: 30px;
	}
}
@media (max-width: 767px) {
	.cs-row-cols > .wp-block-columns:not(.cs-p-keep) {
		flex-wrap: wrap !important;
	}
	.cs-row-cols > .wp-block-columns:not(.cs-p-keep) > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 0 !important;
	}
	.cs-row-cols > .wp-block-columns:not(.cs-p-keep) > .wp-block-column:not(:last-child) {
		margin-bottom: 30px;
	}
}
@media (min-width: 480px) and (max-width: 980px) {
	.cs-row-cols > [class*="cs-cols-"] {
		column-gap: 5.5% !important;
	}
	.cs-row-cols > .wp-block-columns.cs-cols-4col > .wp-block-column,
	.cs-row-cols > .wp-block-columns.cs-cols-1-4_1-4 > .cs-ct-1-4,
	.cs-row-cols > .wp-block-columns.cs-cols-1-4_1-4_1-2 > .cs-ct-1-4,
	.cs-row-cols > .wp-block-columns.cs-cols-1-2_1-4_1-4 > .cs-ct-1-4,
	.cs-row-cols > .wp-block-columns.cs-cols-5col > .wp-block-column,
	.cs-row-cols > .wp-block-columns.cs-cols-1-5_1-5_3-5 > .cs-ct-1-5,
	.cs-row-cols > .wp-block-columns.cs-cols-3-5_1-5_1-5 > .cs-ct-1-5 {
		flex-basis: 47.25% !important;
	}
	.cs-row-cols > .wp-block-columns.cs-cols-6col > .wp-block-column,
	.cs-row-cols > .wp-block-columns.cs-cols-1-6_1-6_1-6_1-2 > .cs-ct-1-6,
	.cs-row-cols > .wp-block-columns.cs-cols-1-2_1-6_1-6_1-6 > .cs-ct-1-6 {
		flex-basis: 29.666% !important;
	}
	.cs-row-cols > .wp-block-columns.cs-cols-4col > .wp-block-column:nth-last-child(-n+2),
	.cs-row-cols > .wp-block-columns.cs-cols-1-4_1-4 > .wp-block-column:nth-last-child(-n+2),
	.cs-row-cols > .wp-block-columns.cs-cols-1-2_1-4_1-4 > .wp-block-column:nth-last-child(-n+2),
	.cs-row-cols > .wp-block-columns.cs-cols-3-5_1-5_1-5 > .wp-block-column:nth-last-child(-n+2),
	.cs-row-cols > .wp-block-columns.cs-cols-6col > .wp-block-column:nth-last-child(-n+3),
	.cs-row-cols > .wp-block-columns.cs-cols-1-2_1-6_1-6_1-6 > .wp-block-column:nth-last-child(-n+3) {
		margin-bottom: 0;
	}
}

/* Alt: Stapeln bzw. 2er-Raster aus den Messwerten (nur noch für ältere Umwandlungen) */
@media (min-width: 768px) and (max-width: 980px) {
	.wp-block-columns.cs-t-stack.cs-t-stack {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.cs-t-stack > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 0;
	}
	.wp-block-columns.cs-t-half.cs-t-half {
		flex-wrap: wrap !important;
		column-gap: 5.5% !important;
	}
	.wp-block-columns.cs-t-half > .wp-block-column {
		flex-basis: 47.25% !important;
		flex-grow: 0;
	}
}
@media (max-width: 767px) {
	.wp-block-columns.cs-p-stack.cs-p-stack {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.cs-p-stack > .wp-block-column {
		flex-basis: 100% !important;
		flex-grow: 0;
	}
	.wp-block-columns.cs-p-half.cs-p-half {
		flex-wrap: wrap !important;
		column-gap: 5.5% !important;
	}
	.wp-block-columns.cs-p-half > .wp-block-column {
		flex-basis: 47.25% !important;
		flex-grow: 0;
	}
}

/* Sichtbarkeit je Gerät (Divi „Deaktivieren auf …“) */
@media (min-width: 981px) {
	.cs-hide-d {
		display: none !important;
	}
}
@media (min-width: 768px) and (max-width: 980px) {
	.cs-hide-t {
		display: none !important;
	}
}
@media (max-width: 767px) {
	.cs-hide-p {
		display: none !important;
	}
}

/* Seiten auf Bildschirmhoehe (Danke-Seiten): Footer unten, Sektionen wachsen/zentrieren */
.wp-site-blocks:has(> .cs-fill) {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.admin-bar .wp-site-blocks:has(> .cs-fill) {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}
.cs-fill,
.cs-fill > .wp-block-post-content {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}
.cs-fill .cs-grow {
	flex: 1 0 auto;
}
.cs-fill .cs-vcenter-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.cs-fill .cs-vcenter-row {
	display: flex;
	align-items: center;
	justify-content: center;
}
.cs-fill .cs-mt-auto {
	margin-top: auto !important;
}
.cs-fill .cs-mb-auto {
	margin-bottom: auto !important;
}

/* Klickbare Elemente (Divi link_option_url) */
[class*="cs-goto-"] {
	cursor: pointer;
}

/* Ausrichtung von Modulen mit max. Breite */
.cs-mx-auto {
	margin-left: auto !important;
	margin-right: auto !important;
}
.cs-ml-auto {
	margin-left: auto !important;
	margin-right: 0 !important;
}
.cs-mr-auto {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ==========================================================
   3. Text-Modul: Divi-Typografie
   ========================================================== */
.cs-text,
.cs-blurb {
	overflow-wrap: break-word;
}
.cs-text > p,
.cs-blurb-body > p {
	padding-bottom: 1em;
}
.cs-text > p:last-of-type,
.cs-blurb-body > p:last-of-type {
	padding-bottom: 0;
}
.cs-text > :is(h1, h2, h3, h4, h5, h6),
.cs-blurb-body > :is(h1, h2, h3, h4, h5, h6) {
	padding-bottom: 10px;
}
.cs-text > ul,
.cs-blurb-body > ul {
	list-style-type: disc;
	padding: 0 0 23px 1em;
	line-height: 26px;
}
.cs-text > ol,
.cs-blurb-body > ol {
	list-style-type: decimal;
	list-style-position: inside;
	padding: 0 0 23px;
	line-height: 26px;
}
.cs-text li ul,
.cs-blurb-body li ul {
	padding: 2px 0 2px 20px;
}
.cs-text li ol,
.cs-blurb-body li ol {
	padding: 2px 0 2px 35px;
}
.cs-text > .wp-block-quote {
	margin: 20px 0 30px;
	padding-left: 20px;
	border-left: 5px solid #005567;
	font-style: italic;
}
.cs-text > .wp-block-image,
.cs-image {
	line-height: 0;
}
.wp-block-image img {
	vertical-align: bottom;
}
.cs-img-right {
	text-align: right;
}

/* ==========================================================
   4. Blurb (Divi: Inhalt max. 550 px, zentriert)
   ========================================================== */
.cs-blurb-content {
	width: 100%;
	max-width: 550px;
	margin-left: auto;
	margin-right: auto;
}
.cs-icon {
	transition: color 0.3s, background-color 0.3s;
	font-family: ETmodules;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	speak: never;
	-webkit-font-smoothing: antialiased;
}
.cs-blurb-content > .cs-icon,
.cs-blurb-content > .cs-blurb-media {
	margin-bottom: 30px;
}
.cs-icon-boxed {
	width: fit-content;
}
.cs-icon-boxed.has-text-align-center {
	margin-left: auto;
	margin-right: auto;
}
.cs-icon-boxed.has-text-align-right {
	margin-left: auto;
}
.cs-blurb-left {
	gap: 15px;
}
.cs-blurb-left > .cs-icon,
.cs-blurb-left > .cs-blurb-media {
	flex-shrink: 0;
	margin: 0;
}
/* Divi: Icon-Zelle links ist 32px breit (table-cell), bei Platzmangel nur so breit wie das Icon */
.cs-blurb-left > .cs-icon:not(.cs-icon-boxed) {
	flex: 0 1 32px;
	min-width: min-content;
}
.cs-blurb-left > .cs-blurb-body {
	flex: 1 1 auto;
	min-width: auto; /* Divi (display:table): Text nie schmaler als das laengste Wort, Blurb darf ueberstehen */
}

/* Font Awesome (wie Divi: drei Schnitte unter einem Namen) */
@font-face {
	font-family: FontAwesome;
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url(assets/fonts/fa/fa-regular-400.woff2) format("woff2"), url(assets/fonts/fa/fa-regular-400.woff) format("woff");
}
@font-face {
	font-family: FontAwesome;
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url(assets/fonts/fa/fa-solid-900.woff2) format("woff2"), url(assets/fonts/fa/fa-solid-900.woff) format("woff");
}
@font-face {
	font-family: FontAwesome;
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url(assets/fonts/fa/fa-brands-400.woff2) format("woff2"), url(assets/fonts/fa/fa-brands-400.woff) format("woff");
}
.cs-icon.cs-fa {
	font-family: FontAwesome !important;
}

/* ==========================================================
   5. Buttons (Divi-Button-Modul)
   ========================================================== */
.cs-buttons {
	gap: 0;
}
/* Button-Icon (ETmodules) wie Divi */
.cs-bi .wp-block-button__link {
	position: relative;
}
.cs-bi .wp-block-button__link::before,
.cs-bi .wp-block-button__link::after {
	position: absolute;
	font-family: ETmodules !important;
	font-weight: 400 !important;
	font-style: normal;
	font-size: inherit;
	line-height: inherit;
	text-transform: none;
	speak: never;
	transition: all 0.2s;
}
.cs-bi-l .wp-block-button__link::after,
.cs-bi-r .wp-block-button__link::before {
	content: none !important;
}
.cs-bi-l .wp-block-button__link::before {
	margin-left: -1.3em;
}
.cs-bi-r .wp-block-button__link::after {
	margin-left: 0.3em;
}
.cs-bi-hover.cs-bi-r .wp-block-button__link::after {
	opacity: 0;
	margin-left: -1em;
}
.cs-bi-hover.cs-bi-r .wp-block-button__link:hover {
	padding-right: 2em !important;
	padding-left: 0.7em !important;
}
.cs-bi-hover.cs-bi-r .wp-block-button__link:hover::after {
	opacity: 1;
	margin-left: 0;
}
.cs-bi-hover.cs-bi-l .wp-block-button__link::before {
	opacity: 0;
}
.cs-bi-hover.cs-bi-l .wp-block-button__link:hover {
	padding-left: 2em !important;
	padding-right: 0.7em !important;
}
.cs-bi-hover.cs-bi-l .wp-block-button__link:hover::before {
	opacity: 1;
}
.cs-bta-left .wp-block-button__link {
	text-align: left;
}
.cs-bta-center .wp-block-button__link {
	text-align: center;
}
.cs-bta-right .wp-block-button__link {
	text-align: right;
}
.wp-block-button__link {
	text-decoration: none !important;
	word-break: normal;
	transition: all 0.2s;
}

/* ==========================================================
   6. Header (Divi-Standardheader: 95 px, ab 980 px Hamburger)
   ========================================================== */
@media (min-width: 981px) {
	.wp-site-blocks > header.wp-block-template-part {
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0px);
		left: 0;
		right: 0;
		z-index: 99999;
	}
	/* Divi: Inhalt beginnt unter dem 95px-Header; beim Scrollen 26px hoeher (Header 95 -> 69px) */
	.wp-site-blocks > header.wp-block-template-part + * {
		margin-top: 95px;
	}
	.cs-scrolled .wp-site-blocks > header.wp-block-template-part + * {
		margin-top: 68px;
	}
}
.cs-header {
	min-height: 95px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	transition: all 0.4s ease-in-out;
}
.cs-header .wp-block-site-logo img {
	transition: all 0.4s ease-in-out;
}
@media (min-width: 981px) {
	.cs-scrolled .cs-header {
		min-height: 69px;
		box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
	}
	.cs-scrolled .cs-header .wp-block-site-logo img {
		width: 199px;
	}
}
.cs-header .wp-block-site-logo {
	line-height: 0;
}
.cs-header .wp-block-site-logo img {
	width: 274px;
	height: auto;
}
.cs-header nav.cs-nav {
	margin-top: 15px !important;
}
.cs-nav .wp-block-navigation__container {
	gap: 26.2px;
	align-items: center;
}
.cs-nav .wp-block-navigation-item {
	font-size: 16px;
	font-weight: 600;
}
.cs-nav .wp-block-navigation-item__content {
	color: #000;
	padding: 0;
	line-height: 14px;
	transition: opacity 0.4s;
}
.cs-nav .wp-block-navigation-item__content:hover {
	text-decoration: none;
	opacity: 0.7;
}
.cs-nav .cs-nav-cta > .wp-block-navigation-item__content {
	background: #005467;
	color: #fff;
	padding: 15px 25px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.cs-nav .cs-nav-cta > .wp-block-navigation-item__content:hover {
	opacity: 0.9;
}

@media (max-width: 980px) {
	.cs-header.cs-header {
		position: relative;
		top: auto;
		min-height: 80px;
		padding-left: calc(10% + 4.1px) !important;
		padding-right: 10% !important;
	}
	/* Divi: Kopf liegt ueber dem Inhalt, der Inhalt beginnt 1px unter der Kopf-Unterkante (Hoehe - 1) */
	.wp-site-blocks > header.wp-block-template-part {
		position: relative;
		z-index: 99999;
	}
	.wp-site-blocks > header.wp-block-template-part + * {
		margin-top: -1px;
	}
	/* Divi: Logo max. halbe Containerbreite; das Leerzeichen vor dem Logo (4,1px) zaehlt nicht mit */
	.cs-header .wp-block-site-logo {
		max-width: calc(50% + 2.05px);
	}
	.cs-header .wp-block-site-logo img {
		width: auto;
		max-width: 100%;
		max-height: 43.2px;
	}
	.cs-header nav.cs-nav {
		margin-top: 0 !important;
		position: static;
	}
	/* Hamburger wie Divi (ETmodules-Icon), Menü als Dropdown unter dem Header */
	.cs-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.cs-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	.cs-nav .wp-block-navigation__responsive-container-open,
	.cs-nav .wp-block-navigation__responsive-container-close {
		padding: 0;
		color: #005567;
	}
	.cs-nav .wp-block-navigation__responsive-container-open svg,
	.cs-nav .wp-block-navigation__responsive-container-close svg {
		display: none;
	}
	.cs-nav .wp-block-navigation__responsive-container-open::before,
	.cs-nav .wp-block-navigation__responsive-container-close::before {
		content: "\61";
		font-family: ETmodules;
		font-size: 32px;
		line-height: 32px;
		font-weight: 400;
	}
	/* Dropdown statt Vollbild: Seite bleibt scrollbar (wie Divi) */
	html.has-modal-open {
		overflow: visible !important;
	}
	/* Divi behaelt das Hamburger-Icon auch bei offenem Menue */
	.cs-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
		visibility: hidden;
	}
	.cs-nav .wp-block-navigation__responsive-container.is-menu-open {
		position: absolute !important;
		top: 80px !important;
		left: 10% !important;
		right: 10% !important;
		bottom: auto !important;
		height: auto !important;
		overflow: visible !important;
		padding: 4% !important;
		background: #fff !important;
		border-top: 3px solid #005567;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		animation: none !important;
	}
	.cs-nav .is-menu-open .wp-block-navigation__responsive-close,
	.cs-nav .is-menu-open .wp-block-navigation__responsive-dialog {
		position: static;
		max-width: none;
		margin: 0;
	}
	.cs-nav .is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: -59px;
		right: 0;
		width: 32px;
		height: 32px;
	}
	.cs-nav .is-menu-open .wp-block-navigation__responsive-container-content {
		padding: 0 !important;
		gap: 0 !important;
		align-items: stretch !important;
	}
	.cs-nav .is-menu-open .wp-block-navigation__container {
		gap: 0 !important;
		align-items: stretch !important;
		width: 100%;
	}
	.cs-nav .is-menu-open .wp-block-navigation-item {
		width: 100%;
		display: block;
	}
	.cs-nav .is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 10px 5% !important;
		font-size: 14px;
		line-height: 23px;
		font-weight: 600;
		color: #666 !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.03);
	}
	.cs-nav .is-menu-open .cs-nav-cta > .wp-block-navigation-item__content {
		padding: 15px 25px !important;
		background: #005467 !important;
		color: #fff !important;
		letter-spacing: 1px;
		text-transform: uppercase;
	}
	.cs-nav .is-menu-open .wp-block-navigation-item__content:focus:not(:focus-visible) {
		outline: none;
	}
}

/* ==========================================================
   6b. Beitrag (Divi-Beitragskopf: Titel + Datum)
   ========================================================== */
.cs-single {
	padding-bottom: 85px;
}
.cs-single > * {
	margin-block: 0;
}
.cs-post-header {
	width: 80%;
	max-width: 1080px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-top: 6%;
}
.cs-post-header > * {
	margin-block: 0;
}
.cs-post-header .wp-block-post-title {
	font-size: 38px;
	line-height: 1em;
	font-weight: 700;
	color: #000;
	padding-bottom: 10px;
}
.cs-post-header .wp-block-post-date {
	font-size: 14px;
	line-height: 30.6px;
	color: #000;
	padding-bottom: 15px;
	margin-bottom: 6px;
}
/* Divi: Beitrag bis 1100px mit 42px statt 60px Abstand unten (.et_pb_post) */
@media (max-width: 1100px) {
	.cs-single {
		padding-bottom: 67px;
	}
}
@media (max-width: 980px) {
	.cs-post-header .wp-block-post-title {
		font-size: 33px;
	}
}
/* Divi: Metazeile erst bis 479px grau, h2 im Beitrag ohne Abstand unten (.et_pb_post h2) */
@media (max-width: 479px) {
	.cs-post-header .wp-block-post-date {
		color: #666;
	}
	.cs-post-content h2 {
		padding-bottom: 0 !important;
	}
}

/* ==========================================================
   7. Footer (schwarze Leiste mit Footer-Menü)
   ========================================================== */
.cs-footer-nav {
	width: 80%;
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}
/* Divi: jedes Element 22px Innenabstand rechts + Leerzeichen (3,7px) */
.cs-footer-nav .wp-block-navigation__container {
	gap: 0 3.7px;
	justify-content: flex-start;
}
.cs-footer-nav .wp-block-navigation-item {
	padding-right: 22px;
	min-height: 31.6px;
	font-size: 16px;
	font-weight: 600;
	line-height: 30.6px;
}
.cs-footer-nav .wp-block-navigation-item__content {
	color: #fff;
	padding: 0;
	transition: opacity 0.4s;
}
.cs-footer-nav .wp-block-navigation-item__content:hover {
	text-decoration: none;
	opacity: 0.7;
}
.cs-footer > * {
	margin-block: 0;
}
@media (max-width: 980px) {
	.cs-footer-nav,
	.cs-footer-nav .wp-block-navigation__container {
		justify-content: center;
		text-align: center;
	}
}

/* ==========================================================
   8. Übernommen aus dem Divi-Childtheme
   ========================================================== */

/* Brevo-Formulare der Webinar-Anmeldungen
   Die Regeln haengen am Embed-Code selbst (Klassen cs-custom-size-inputfield und cs-custom-label-row),
   nicht mehr an Abschnittsklassen. So sieht das Formular auf jeder Seite gleich aus, egal wo es eingefuegt wird. */
.sib-form:has(.cs-custom-size-inputfield) {
	font-size: 18px;
}
.sib-form:has(.cs-custom-size-inputfield) .form__label-row .entry__label::after {
	color: #d2b828;
}
.sib-form .form__label-row .cs-custom-label-row {
	flex-direction: row;
	gap: 1em;
}
.sib-form .form__label-row .cs-custom-label-row .entry__field {
	flex: 1;
}
/* Feldbreite: hoechstens 32rem (512px, so breit wie bisher mit 50 % auf /webinar/), auch auf Tablets.
   Auf schmalen Bildschirmen volle Breite. Vorname und Nachname stehen nebeneinander. */
.sib-form .cs-custom-size-inputfield {
	max-width: 32rem;
}
@media only screen and (max-width: 450px) {
	.brevo-form-section .brevo-form-row {
		width: 100%;
	}
	.sib-form .form__label-row .cs-custom-label-row {
		flex-direction: column;
	}
}
#sib-container input::placeholder,
#sib-container textarea::placeholder {
	text-align: left;
	color: #c0ccda;
}
#sib-container a {
	text-decoration: underline;
	color: #000;
}

/* Referenzen: Logo-Raster */
.galerie-logos.wp-block-gallery {
	display: grid !important;
	grid-template-columns: repeat(6, 1fr);
	gap: 30px !important;
}
.galerie-logos.wp-block-gallery .wp-block-image {
	width: 100% !important;
	margin: 0 !important;
}
.galerie-logos.wp-block-gallery a {
	pointer-events: none;
}
@media (min-width: 550px) and (max-width: 981px) {
	.galerie-logos.wp-block-gallery {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (max-width: 549px) {
	.galerie-logos.wp-block-gallery {
		grid-template-columns: repeat(3, 1fr);
	}
}
/* Wie im Divi-Original: das Clearfix-Pseudoelement der Divi-Galerie belegt eine eigene Rasterzelle (gleicher Abstand unter dem Raster) */
.galerie-logos.wp-block-gallery::after {
	content: "";
}

/* Testimonials: Zitat-Kaesten in mittleren Breiten hoeher (Childtheme) */
@media (min-width: 981px) and (max-width: 1100px) {
	.testimonials-row .cs-col > .cs-blurb {
		height: 350px !important;
	}
}
@media (min-width: 1101px) and (max-width: 1302px) {
	.testimonials-row .cs-col > .cs-blurb {
		height: 300px !important;
	}
}

/* Spalten auf Mobil umdrehen (Divi-Klasse row-reverse) */
@media (max-width: 980px) {
	.row-reverse > .wp-block-columns {
		flex-direction: column-reverse;
	}
}

/* Formular-Zeilen mobil volle Breite */
@media only screen and (max-width: 450px) {
	.form-row {
		width: 100%;
	}
	.form-section,
	.form-section > .cs-section-inner {
		padding: 0 !important;
	}
}

/* Gleich hohe Spalten mit Button unten (Referenzen, Podcast, Presse) */
.equal-height-row > .wp-block-columns {
	align-items: stretch !important;
}
.equal-height-row .wp-block-column {
	display: flex;
	flex-direction: column;
}
.equal-height-row .case-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.equal-height-row .case-btn {
	margin-top: auto !important;
}
@media (max-width: 980px) {
	.equal-height-row > .wp-block-columns {
		align-items: flex-start !important;
	}
	.equal-height-row .wp-block-column {
		display: block;
	}
	.equal-height-row .case-btn {
		margin-top: 16px !important;
	}
	.equal-height-row .case-content {
		margin-bottom: 0 !important;
	}
}
@media (max-width: 767px) {
	.equal-height-row .case-btn {
		margin-top: 20px !important;
	}
}

/* Divi-Blograster (Blog-Modul, Raster): Karten, 3/2/1 Spalten reihum wie Salvattore */
.cs-blog .cs-masonry {
	display: grid;
	grid-template-columns: repeat(3, 29.666%);
	column-gap: 5.5%;
	align-items: start;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cs-blog .cs-masonry.cs-m-ready {
	display: flex;
	align-items: flex-start;
	column-gap: 0;
}
.cs-blog .cs-mcol {
	width: 29.666%;
	margin: 0 5.5% 0 0;
	padding: 0;
	list-style: none;
}
.cs-blog .cs-mcol:last-child {
	margin-right: 0;
}
.cs-blog .cs-mcol > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cs-blog .wp-block-post {
	display: flex;
	flex-direction: column;
	min-height: 560px;
	padding: 19px;
	border: 1px solid #d8d8d8;
	background: #fff;
	margin: 0 0 18.539% !important;
	overflow-wrap: break-word;
}
.cs-blog .wp-block-post:last-child {
	margin-bottom: 30px !important;
}
.cs-blog .wp-block-post-featured-image {
	margin: -20px -20px 29px !important;
	flex-shrink: 0;
}
.cs-blog .wp-block-post-featured-image a {
	display: block;
	margin-bottom: 10px;
}
.cs-blog .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}
.cs-blog .wp-block-post-title {
	font-size: 25px;
	line-height: 1.2em;
	font-weight: 500;
	color: #000;
	margin: 0 !important;
	padding-bottom: 10px;
}
.cs-blog .wp-block-post-title a {
	display: inline;
	color: inherit;
}
.cs-blog .wp-block-post-date {
	margin: 0 !important;
}
.cs-blog .wp-block-post-excerpt {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	margin: 0 !important;
}
.cs-blog .wp-block-post-excerpt__excerpt {
	font-size: 18px;
	line-height: 1.6em;
	font-weight: 300;
	color: #000;
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}
.cs-blog .wp-block-post-excerpt__more-text {
	margin: auto 0 0 !important;
	line-height: 1.6em;
}
.cs-blog .wp-block-post-excerpt__more-link {
	display: block;
	font-size: 18px;
	line-height: 1.6em;
	font-weight: 600;
	color: #005467;
}
@media (max-width: 980px) {
	.cs-blog .cs-masonry {
		grid-template-columns: repeat(2, 47.25%);
	}
	.cs-blog .cs-mcol {
		width: 47.25%;
	}
	.cs-blog .wp-block-post {
		min-height: 520px;
		margin-bottom: 16.21% !important;
	}
}
@media (max-width: 767px) {
	.cs-blog .cs-masonry {
		grid-template-columns: 100%;
	}
	.cs-blog .cs-mcol {
		width: 100%;
		margin-right: 0;
	}
	.cs-blog .wp-block-post {
		min-height: 0;
		margin-bottom: 9.5% !important;
	}
}
/* Divi: bis 479px groesserer Abstand und Titel ohne Abstand unten (.et_pb_post h2) */
@media (max-width: 479px) {
	.cs-blog .wp-block-post {
		margin-bottom: 11.5% !important;
	}
	.cs-blog .wp-block-post-title {
		padding-bottom: 0;
	}
}

/* Divi-Child: Listenpunkte innen (style.css des Child-Themes) */
ul {
	list-style-position: inside;
}

/* Divi: Listen im Textmodul mit 1em Abstand unten (.et_pb_text ul) */
.cs-text > ul,
.cs-text > ol {
	padding-bottom: 1em;
}

/* Aktiver Menuepunkt im Header (Divi: #005567) */
.wp-site-blocks > header .wp-block-navigation .current-menu-item:not(.cs-nav-cta) > a {
	color: #005567;
}

/* Text ohne <p> im Divi-Original (z. B. <div>) und letzter echter Absatz: ohne Abstand */
.cs-text > p.cs-np,
.cs-blurb-body > p.cs-np,
.cs-text > p.cs-lastp,
.cs-blurb-body > p.cs-lastp {
	padding-bottom: 0;
}

/* Divi-Reset: Formularelemente uebernehmen die Schrift */
button,
input,
select,
textarea {
	font-family: inherit;
}

/* Divi-Reset: eingebettete Inhalte (Karten, Videos) nie breiter als ihr Container */
embed,
iframe,
object,
video {
	max-width: 100%;
}

/* Divi FitVids: Video-iframes skalieren mit */
.fluid-width-video-wrapper {
	width: 100%;
	position: relative;
	padding: 0;
}
.fluid-width-video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Divi: kleinere Standard-Ueberschriften in schmalen Spalten (1/3, 1/4, 1/5, 1/6, 2/5) */
.cs-ct-1-3 h1, .cs-ct-1-4 h1, .cs-ct-1-5 h1, .cs-ct-1-6 h1, .cs-ct-2-5 h1 {
	font-size: 26px;
}
.cs-ct-1-3 h2, .cs-ct-1-4 h2, .cs-ct-1-5 h2, .cs-ct-1-6 h2, .cs-ct-2-5 h2 {
	font-size: 23px;
}
.cs-ct-1-3 h3, .cs-ct-1-4 h3, .cs-ct-1-5 h3, .cs-ct-1-6 h3, .cs-ct-2-5 h3 {
	font-size: 20px;
}
.cs-ct-1-3 h4, .cs-ct-1-4 h4, .cs-ct-1-5 h4, .cs-ct-1-6 h4, .cs-ct-2-5 h4 {
	font-size: 18px;
}
.cs-ct-1-3 h5, .cs-ct-1-4 h5, .cs-ct-1-5 h5, .cs-ct-1-6 h5, .cs-ct-2-5 h5 {
	font-size: 16px;
}
.cs-ct-1-3 h6, .cs-ct-1-4 h6, .cs-ct-1-5 h6, .cs-ct-1-6 h6, .cs-ct-2-5 h6 {
	font-size: 15px;
}

/* Divi-Sidebar (Widget-Bereich): Trennlinie, Abstand zwischen Widgets, Liste der neuesten Beitraege */
.cs-sidebar-border-l {
	border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.cs-sidebar-border-r {
	border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.cs-sidebar > h4:not(:first-child) {
	margin-top: 18.539% !important;
}
.cs-sidebar::after {
	content: '';
	display: block;
	margin-top: 18.539%;
}
.cs-text.cs-sidebar > ul.wp-block-latest-posts {
	padding: 0;
	line-height: inherit;
	list-style: none;
}
.cs-sidebar .wp-block-latest-posts li {
	margin-top: 0;
	margin-bottom: 0.5em;
}
.cs-sidebar .wp-block-latest-posts a {
	color: #666;
}

/* ==========================================================
   9. Landingpages (Divi Theme Builder: eigener Sticky-Header, reduziertes Footer-Menue)
   ========================================================== */
.wp-site-blocks > header.cs-lp.cs-lp {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10010;
}
/* Header unter der Adminleiste, wenn sie angezeigt wird */
body.admin-bar .wp-site-blocks > header.cs-lp.cs-lp {
	top: var(--wp-admin--admin-bar--height, 32px);
}
/* Wie der Divi-Sticky-Header: oben Standard-Zeilenabstand (27px ab 1350px, 2 % darunter, 30px bis 980px) und Logo 240px,
   klebend (cs-lp-stuck, sobald gescrollt wird) 15px und Logo 170px. Der Inhalt beginnt unter dem Header im Ausgangszustand (% = Anteil der Seitenbreite). */
.wp-site-blocks > header.cs-lp + *,
.cs-scrolled .wp-site-blocks > header.cs-lp + * {
	margin-top: calc(50px + 4%) !important;
}
.cs-lp-header-row {
	width: 80%;
	max-width: 1230px;
	margin: 0 auto;
	padding: 2% 0;
}
.cs-lp-header .wp-block-site-logo {
	line-height: 0;
}
.cs-lp-header .wp-block-site-logo img {
	width: 240px;
	height: auto;
}
.cs-lp-stuck .cs-lp-header-row {
	padding: 15px 0;
}
.cs-lp-stuck .cs-lp-header .wp-block-site-logo img {
	width: 170px;
}
@media (min-width: 1350px) {
	.wp-site-blocks > header.cs-lp + *,
	.cs-scrolled .wp-site-blocks > header.cs-lp + * {
		margin-top: 104px !important;
	}
	.cs-lp-header-row {
		padding: 27px 0;
	}
}
.cs-lp-nav .cs-lp-cta > .wp-block-navigation-item__content {
	background: #005567;
	color: #fff !important;
	border-radius: 6px;
	padding: 10px 20px;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.4em;
	transition: background-color 300ms ease;
}
.cs-lp-nav .cs-lp-cta > .wp-block-navigation-item__content:hover {
	background: rgba(0, 85, 103, 0.9);
	opacity: 1;
}
.cs-footer-nav-center .wp-block-navigation__container {
	justify-content: center;
}
@media (max-width: 980px) {
	.wp-site-blocks > header.cs-lp + *,
	.cs-scrolled .wp-site-blocks > header.cs-lp + * {
		margin-top: 95px !important;
	}
	.cs-lp-header-row {
		padding: 30px 0;
	}
	.cs-lp-header .wp-block-site-logo img {
		width: 170px;
	}
	.cs-lp-nav .is-menu-open.wp-block-navigation__responsive-container {
		top: 95px !important;
	}
	.cs-lp-nav .is-menu-open .wp-block-navigation__responsive-container-close {
		top: -63px;
	}
	.cs-lp-stuck .cs-lp-nav .is-menu-open.wp-block-navigation__responsive-container {
		top: 65px !important;
	}
	.cs-lp-stuck .cs-lp-nav .is-menu-open .wp-block-navigation__responsive-container-close {
		top: -48px;
	}
}

/* Divi: zu breite Buttons laufen nach rechts ueber (Inline-Element), statt beidseitig */
.cs-buttons.is-content-justification-center {
	justify-content: safe center !important;
}
.cs-buttons.is-content-justification-right {
	justify-content: safe flex-end !important;
}

/* Divi-Trenner: Modulhoehe mit Linie oben/mittig/unten in der Linienfarbe */
hr.wp-block-separator.cs-divider {
	border: 0 !important;
	background: none !important;
	position: relative;
	height: 23px;
	margin-top: 0;
	margin-bottom: 0;
	opacity: 1;
}
hr.cs-divider::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	border-top: 1px solid currentColor;
}
hr.cs-divider-center::before {
	top: 50%;
	transform: translateY(-50%);
}
hr.cs-divider-bottom::before {
	top: auto;
	bottom: 0;
}
hr.cs-divider-hidden::before {
	display: none;
}

/* Divi: leere Blurbs behalten ihren Aussenabstand (kein Zusammenfallen der Margins) */
.cs-blurb {
	display: flow-root;
}

/* Divi: ausgeblendeter Button, der Wrapper bleibt als leerer Block (Abstaende fallen wie bei Divi zusammen) */
@media (min-width: 981px) {
	.cs-buttons:not(:has(> .wp-block-button:not(.cs-hide-d))) {
		display: block !important;
	}
}
@media (min-width: 768px) and (max-width: 980px) {
	.cs-buttons:not(:has(> .wp-block-button:not(.cs-hide-t))) {
		display: block !important;
	}
}
@media (max-width: 767px) {
	.cs-buttons:not(:has(> .wp-block-button:not(.cs-hide-p))) {
		display: block !important;
	}
}

/* Divi-Seiten auf Bildschirmhoehe: Divi zieht auch auf Tablet/Handy 95px Header ab (dort 80px hoch) */
@media (max-width: 980px) {
	.wp-site-blocks:has(> .cs-fill .cs-fill-tab95) {
		min-height: calc(100vh - 15px);
	}
	/* mit Kopf: Divi beginnt den Inhalt 1px hoeher (Kopfhoehe - 1), die Mindesthoehe zieht aber die volle Kopfhoehe ab */
	.wp-site-blocks:has(> header.wp-block-template-part):has(> .cs-fill) {
		min-height: calc(100vh - 1px);
	}
	.wp-site-blocks:has(> header.wp-block-template-part):has(> .cs-fill .cs-fill-tab95) {
		min-height: calc(100vh - 16px);
	}
	.admin-bar .wp-site-blocks:has(> header.wp-block-template-part):has(> .cs-fill) {
		min-height: calc(100vh - 1px - var(--wp-admin--admin-bar--height, 0px));
	}
	.admin-bar .wp-site-blocks:has(> header.wp-block-template-part):has(> .cs-fill .cs-fill-tab95) {
		min-height: calc(100vh - 16px - var(--wp-admin--admin-bar--height, 0px));
	}
}

/* Supreme Content Timeline: Linie (Baum) hinter den Karten, Fortschritt und aktive Karten per Theme-Skript */
.cs-content-timeline {
	position: relative;
	isolation: isolate;
	display: flow-root; /* Divi: Abstand der letzten Karte bleibt im Modul */
}
.cs-content-timeline > .cs-timeline-item {
	position: relative;
}
.cs-content-timeline > .cs-tl-tree {
	position: absolute;
	top: 0;
	left: 50%;
	width: 5px;
	margin: 0 0 0 -2.5px;
	z-index: -1;
	background-color: rgba(0, 0, 0, 0.1);
	pointer-events: none;
}
.cs-content-timeline > .cs-tl-tree > .cs-tl-progress {
	height: 0;
	background-color: #005567;
}

/* Divi-Testimonial: Absaetze mit 1em Abstand (auch der letzte), Autor und Position/Firma ohne */
.cs-testimonial > p {
	padding-bottom: 1em;
}
.cs-testimonial > p.cs-np,
.cs-testimonial > p.cs-testimonial-author,
.cs-testimonial > p.cs-testimonial-meta {
	padding-bottom: 0;
}

/* Divi-Spalten sind eigene Formatierungskontexte (Float/Flex): Aussenabstaende der Module bleiben in der Spalte */
.cs-row > .cs-col {
	display: flow-root;
}

/* Divi: leere Spalten sind 1px hoch (.et_pb_column min-height) */
.cs-col {
	min-height: 1px;
}

/* Divi-Beitraege (#left-area ul): Listen mit 23px Abstand unten statt 1em */
.single-post .cs-text > ul,
.single-post .cs-text > ol {
	padding-bottom: 23px;
}

/* Divi-Sektionstrenner: Zeilen liegen ueber dem Trenner (wie .section_has_divider .et_pb_row) */
.cs-has-divider .cs-row {
	z-index: 5;
}

/* WP-Kern setzt Spalten auf word-break:break-word (Mindestbreite = 0); Divi bricht Woerter nur bei Ueberlauf */
.wp-block-column.cs-col {
	word-break: normal;
}

/* Text-Modul mit eigenem Inhalt für Tablet/Handy: die Hülle trägt die Abstände, die Varianten nicht */
.cs-text-variants > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Divi-Header zwischen 981 und 1184 px: das Menü bricht wie bei Divi in zwei Zeilen um (Knöpfe links bündig ab dem Logo),
   Logo 60 px hoch, Kopf 134 px (152 px bis 1006 px, wenn auch „Jobs“ in die zweite Zeile rutscht) */
@media (min-width: 981px) and (max-width: 1184px) {
	.cs-header {
		min-height: 134px;
		column-gap: 0 !important;
	}
	.wp-site-blocks > header.wp-block-template-part + * {
		margin-top: 134px;
	}
	/* Divi (Seiten auf Bildschirmhoehe mit Header): Inhalt + Footer mindestens 100vh - 95px, unabhaengig von der Headerhoehe */
	.wp-site-blocks:has(> header.wp-block-template-part):has(> .cs-fill) {
		min-height: calc(100vh + 39px);
	}
	.admin-bar .wp-site-blocks:has(> header.wp-block-template-part):has(> .cs-fill) {
		min-height: calc(100vh + 39px - var(--wp-admin--admin-bar--height, 0px));
	}
	.cs-header .wp-block-site-logo {
		flex-shrink: 0;
		max-width: none;
	}
	.cs-header .wp-block-site-logo img {
		width: auto !important;
		height: 60px !important;
		max-height: none;
	}
	.cs-header nav.cs-nav {
		flex: 1 1 auto;
		align-self: flex-start;
		margin: 33px 0 0 28px !important;
	}
	.cs-header nav.cs-nav .wp-block-navigation__container {
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
		align-items: center;
		column-gap: 4px;
		row-gap: 33px;
	}
	.cs-header nav.cs-nav .wp-block-navigation-item:not(.cs-nav-cta) {
		padding-right: 22px;
	}
}
@media (min-width: 981px) and (max-width: 1006px) {
	.cs-header {
		min-height: 152px;
	}
	.wp-site-blocks > header.wp-block-template-part + * {
		margin-top: 152px;
	}
}

/* Button-Stil "CTA zweizeilig" (Block-Stil im Editor): fette Beschriftung + Unterzeile. Farben ueber die Block-Farben. */
.wp-block-button.is-style-cta .wp-block-button__link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 72px;
	padding: 12px 40px;
	border: 0;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	text-align: center;
	transition: background-color 150ms ease;
}
.wp-block-button.is-style-cta .wp-block-button__link strong {
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}
/* Zeilenumbruch nur fuer den Editor; im Flex-Layout stehen Beschriftung und Unterzeile ohnehin untereinander */
.wp-block-button.is-style-cta .wp-block-button__link br {
	display: none;
}
.wp-block-button.is-style-cta .wp-block-button__link:hover,
.wp-block-button.is-style-cta .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--weiss) !important;
	color: var(--wp--preset--color--nachtblau) !important;
}
.wp-block-button.is-style-cta .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--gelb);
	outline-offset: 3px;
}
/* Dunkle CTA-Buttons (z. B. Petrol auf weissem Abschnitt): beim Hover dunkler statt weiss,
   sonst verschwindet der Button auf hellem Untergrund. Gelbe Buttons behalten den weissen Hover. */
.wp-block-button.is-style-cta .wp-block-button__link:is(.has-petrol-background-color, .has-dunkelblau-background-color, .has-schwarz-background-color):hover,
.wp-block-button.is-style-cta .wp-block-button__link:is(.has-petrol-background-color, .has-dunkelblau-background-color, .has-schwarz-background-color):focus-visible {
	background-color: var(--wp--preset--color--nachtblau) !important;
	color: var(--wp--preset--color--weiss) !important;
}
.wp-block-button.is-style-cta .wp-block-button__link.has-nachtblau-background-color:hover,
.wp-block-button.is-style-cta .wp-block-button__link.has-nachtblau-background-color:focus-visible {
	background-color: var(--wp--preset--color--petrol) !important;
	color: var(--wp--preset--color--weiss) !important;
}
/* CTA-Zusatzklasse "cs-cta-anheben" (Trends 2027, Wunsch Martin 12.11.): beim Hover bleibt die eigene Farbe
   und wird etwas dunkler statt weiss, der Button hebt sich minimal an; beim Klick kurz kleiner. */
.wp-block-button.is-style-cta.cs-cta-anheben .wp-block-button__link {
	transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.wp-block-button.is-style-cta.cs-cta-anheben .wp-block-button__link:is(:hover, :focus-visible) {
	transform: scale(1.03);
	box-shadow: 0 8px 18px rgb(0 0 0 / 22%);
}
.wp-block-button.is-style-cta.cs-cta-anheben .wp-block-button__link.has-gelb-background-color:is(:hover, :focus-visible) {
	background-color: color-mix(in srgb, var(--wp--preset--color--gelb) 90%, #000) !important;
	color: var(--wp--preset--color--nachtblau) !important;
}
.wp-block-button.is-style-cta.cs-cta-anheben .wp-block-button__link.has-petrol-background-color:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--dunkelblau) !important;
	color: var(--wp--preset--color--weiss) !important;
}
/* Weisser Rahmen-Button (ohne Hintergrundfarbe) auf dunklem Grund: beim Hover nur ein Hauch Weiss */
.wp-block-button.is-style-cta.cs-cta-anheben .wp-block-button__link.has-weiss-color:not(.has-background):is(:hover, :focus-visible) {
	background-color: rgb(255 255 255 / 10%) !important;
	color: var(--wp--preset--color--weiss) !important;
}
.wp-block-button.is-style-cta.cs-cta-anheben .wp-block-button__link:active {
	transform: scale(0.97);
	box-shadow: 0 3px 8px rgb(0 0 0 / 18%);
	transition-duration: 80ms;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-cta.cs-cta-anheben .wp-block-button__link {
		transform: none !important;
	}
}
/* Funnel-Seiten (Vorlage "Funnel: ein Bildschirm"; Trends 2027: Danke, Anmeldebestaetigung, Live):
   Kopf und dunkle Flaeche fuellen genau einen Bildschirm, der Fuss mit Impressum/Datenschutz folgt darunter.
   Der Kopf steht hier im Fluss (nicht fixiert), deshalb muss keine Kopfhoehe eingerechnet werden. */
.cs-funnel-bildschirm {
	display: flex;
	flex-direction: column;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}
.cs-funnel-bildschirm > * {
	margin-block: 0 !important;
}
.cs-funnel-bildschirm > .cs-funnel,
.cs-funnel-bildschirm > .cs-funnel > .wp-block-post-content {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}
/* Die dunkle Flaeche (oberster Block der Seite) waechst bis zum unteren Bildschirmrand */
.cs-funnel-bildschirm > .cs-funnel > .wp-block-post-content > * {
	flex: 1 0 auto;
	margin-block: 0;
}
/* Listen-Stil "Schritte (nummeriert)": gelbe Kreise mit Nummer, auf dem Computer drei nebeneinander */
.wp-block-list.is-style-cs-schritte {
	list-style: none;
	padding: 0;
	counter-reset: cs-schritt;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px 24px;
}
.wp-block-list.is-style-cs-schritte > li {
	counter-increment: cs-schritt;
	position: relative;
	min-height: 38px;
	margin: 0;
	padding: 7px 0 0 52px;
	font-size: 17px;
	line-height: 1.45;
}
.wp-block-list.is-style-cs-schritte > li::before {
	content: counter(cs-schritt);
	position: absolute;
	left: 0;
	top: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--wp--preset--color--gelb);
	color: var(--wp--preset--color--nachtblau);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}
/* Listen-Stil "Themen mit Balken": gelber Balken links, auf dem Computer zweispaltig */
.wp-block-list.is-style-cs-themen {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 32px;
}
.wp-block-list.is-style-cs-themen > li {
	margin: 0;
	padding: 2px 0 2px 14px;
	border-left: 4px solid var(--wp--preset--color--gelb);
	font-size: 17px;
	line-height: 1.35;
}
@media (max-width: 781px) {
	/* Handy: kompakter Logo-Kopf (wie beim Scrollen), Inhalt oben statt mittig, schmalerer Streifen,
	   Listen einspaltig, CTA-Buttons volle Breite. So passt jede Seite bei 390 x 844 auf einen Bildschirm. */
	.cs-funnel-bildschirm .cs-lp-header-row {
		padding: 15px 0;
	}
	.cs-funnel-mitte {
		justify-content: flex-start !important;
		padding: 28px 22px 24px !important;
	}
	.cs-funnel-streifen {
		min-height: 40px !important;
	}
	.wp-block-list.is-style-cs-schritte,
	.wp-block-list.is-style-cs-themen {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.cs-funnel-bildschirm .wp-block-button.is-style-cta,
	.cs-funnel-bildschirm .wp-block-button.is-style-cta .wp-block-button__link {
		width: 100%;
	}
}
/* Landingpages im Claude-Design (Trends 2027): Mobil-Fassung wie im Entwurf, Umbruch bei 900px.
   Die Klassen stehen an den Bloecken (Erweitert > Zusaetzliche CSS-Klasse). */
@media (max-width: 900px) {
	/* Spalten schon auf Tablets untereinander (WordPress-Standard waere erst unter 782px) */
	.wp-block-columns.cs-stapeln-tablet {
		flex-wrap: wrap !important;
	}
	.wp-block-columns.cs-stapeln-tablet > .wp-block-column {
		flex-basis: 100% !important;
	}
	/* Textspalte neben einem Bild: kompakte Abstaende statt der Desktop-Werte */
	.wp-block-column.cs-spalte-text {
		padding: 32px 24px 44px !important;
	}
	/* Hero: etwas mehr Luft oben und unten (Logo steht im Header, nicht im Hero) */
	.wp-block-column.cs-spalte-text.cs-hero-text {
		padding: 56px 24px 56px !important;
	}
	/* Bildhoehen wie im Entwurf */
	.cs-bild-hero {
		min-height: 260px !important;
	}
	.cs-vk {
		min-height: 220px !important;
	}
	/* Fotos neben Text (Einstieg, Host): feste Hoehe statt max(100%, 300px) aus dem Block.
	   Safari auf dem iPhone wertet die Prozentangabe bei gestapelten Spalten als 0, dann ist das Bild weg. */
	.cs-bild-einstieg,
	.cs-bild-host {
		min-height: 300px !important;
	}
	/* Host-Foto mobil weiter links, damit der Laptop zu sehen ist */
	.cs-bild-host {
		background-position: 0% 40% !important;
	}
	/* Anmeldekarte: Brevo-Innenabstand seitlich weg, die Felder nutzen die Kartenbreite */
	.cs-formkarte {
		padding: 40px 10px 44px !important;
	}
	.cs-formkarte .sib-form {
		padding-left: 0;
		padding-right: 0;
	}
	.cs-formkarte .sib-form-block {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Zusatzklasse: Karte ragt seitlich in den Abschnittsrand, das Formular laeuft fast ueber die volle Breite */
	.cs-formkarte.cs-formkarte-breit {
		margin-left: -16px !important;
		margin-right: -16px !important;
	}
	/* CTA-Button: Hoehe ueber min-height, kein zusaetzlicher Innenabstand oben/unten */
	.wp-block-button.is-style-cta .wp-block-button__link {
		padding: 0 22px;
	}
	/* Kennzahlen-Zeile mit Trennpunkten: untereinander, Punkte aus */
	.cs-zahlen.cs-zahlen {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}
	.cs-zahlen > .cs-punkt {
		display: none;
	}
}