/*
 * Kundenspezifische Styles nur für dieses Projekt.
 */

/* ------------------------------------------------
 * Remove default paragraph / heading spacing from
 * Gutenberg original blocks (because
 * Astra / Spectra Containers are managing this now).
 * ------------------------------------------------ */

.entry-content p,
.entry-content :where(h1, h2, h3, h4, h5, h6),
.site-footer p,
.site-footer :where(h1, h2, h3, h4, h5, h6) {
	margin-bottom: 0;
}

/* ------------------------------------------------
 * Default Site / Root Container Padding
 * ------------------------------------------------ */

:root {
	--section-pad-y: 100px;
	--page-pad-x: 25px;
}

.entry-content > .uagb-is-root-container {
	padding-top: var(--section-pad-y);
	padding-bottom: var(--section-pad-y);
}

.entry-content > .uagb-is-root-container:first-child {
	padding-top: 0;
}

.entry-content > .uagb-is-root-container:last-child {
	padding-bottom: 0;
}

.entry-content > .uagb-is-root-container.no-section-padding {
	padding-top: 0;
	padding-bottom: 0;
}

.entry-content > .uagb-is-root-container.no-top-padding {
	padding-top: 0;
}

.entry-content > .uagb-is-root-container.no-bottom-padding {
	padding-bottom: 0;
}

/* Positive Overrides */
.entry-content > .uagb-is-root-container.keep-top-padding {
	padding-top: var(--section-pad-y);
}

.entry-content > .uagb-is-root-container.keep-bottom-padding {
	padding-bottom: var(--section-pad-y);
}

.entry-content > .uagb-is-root-container.double-top-padding {
	padding-top: calc(2 * var(--section-pad-y));
}

.entry-content > .uagb-is-root-container.double-bottom-padding {
	padding-bottom: calc(2 * var(--section-pad-y));
}

.entry-content > .uagb-is-root-container,
.site-footer .ast-builder-grid-row-container {
	padding-left: var(--page-pad-x);
	padding-right: var(--page-pad-x);
}

.site-footer .ast-builder-grid-row-container .wp-block-image {
	margin: 0;
	padding-right: 50px;
}

.stick-to-bottom {
	margin-top: auto;
}

/* Spectra Tablet */
@media (max-width: 1024px) {
	:root {
		--section-pad-y: 80px;
		--page-pad-x: 20px;
	}
}

/* Spectra Mobile */
@media (max-width: 767px) {
	:root {
		--section-pad-y: 50px;
		--page-pad-x: 10px;
	}

	.site-footer .ast-builder-grid-row-container .wp-block-image {
		padding-left: 20%;
		padding-right: 20%;
	}

	.text-center-mobile-footer {
		text-align: center;
	}
}

/* ------------------------------------------------
 * Hero Container Styles
 * ------------------------------------------------ */

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name .hero-home-overlay
 * @desc Hero-Container für die Startseite mit starkem Farbverlauf-Overlay
 *       über Hintergrundbild oder -video. Gradient deckt oben links stark ab
 *       und läuft nach unten in die Markenfarbe aus.
 * @usage Im Block-Editor: äußeren Hero-Container → Erweitert → Zusätzliche CSS-Klasse.
 *        Nur für die Startseite verwenden.
 * @example <div class="hero-home-overlay"><!-- Hero-Inhalt --></div>
 * @note Intensiverer Farbverlauf als .hero-overlay. Für Unterseiten
 *       stattdessen .hero-overlay verwenden.
 */

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name .hero-overlay
 * @desc Hero-Container für Unterseiten mit leichterem Farbverlauf-Overlay
 *       über Hintergrundbild oder -video. Gradient läuft nach unten in die
 *       Markenfarbe aus.
 * @usage Im Block-Editor: äußeren Hero-Container → Erweitert → Zusätzliche CSS-Klasse.
 *        Für die Startseite stattdessen .hero-home-overlay verwenden.
 * @example <div class="hero-overlay"><!-- Hero-Inhalt --></div>
 */

.wp-block-uagb-container.hero-home-overlay,
.wp-block-uagb-container.hero-overlay {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	/* Video + Content sauber übereinanderlegen */
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);

	/* wichtig, damit das Video bis ganz außen kann */
	padding-left: 0 !important;
	padding-right: 0 !important;
	gap: 0 !important;
}

.hero-home-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
	linear-gradient(
		165deg,
		rgba(11,29,38,0.8) 0%,
		rgba(11,29,38,0.5) 20%,
		rgba(11,29,38,0.0) 50%,
		rgba(72,102,146,0.0) 80%
	),
	linear-gradient(
		180deg,
		rgba(20,40,60,0.25) 0%,
		rgba(20,40,60,0.55) 45%,
		rgba(72,102,146,1) 90%,
		rgba(72,102,146,1) 100%
	);
}

.hero-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
	linear-gradient(
		165deg,
		rgba(11,29,38,0.4) 0%,
		rgba(11,29,38,0.2) 20%,
		rgba(11,29,38,0.0) 50%,
		rgba(72,102,146,0.0) 80%
	),
	linear-gradient(
		180deg,
		rgba(20,40,60,0.15) 0%,
		rgba(20,40,60,0.35) 45%,
		rgba(72,102,146,1) 90%,
		rgba(72,102,146,1) 100%
	);
}

/* Beide direkten Kinder des äußeren Hero-Containers überlagern */
.wp-block-uagb-container.hero-home-overlay > .uagb-container-inner-blocks-wrap,
.wp-block-uagb-container.hero-overlay > .uagb-container-inner-blocks-wrap {
	grid-area: 1 / 1;
	min-width: 0;
	min-height: 0;
}

.wp-block-uagb-container.hero-home-overlay > .uagb-container__video-wrap,
.wp-block-uagb-container.hero-overlay > .uagb-container__video-wrap {
	position: absolute !important;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw !important;
	transform: translateX(-50%);
	max-width: none !important;

	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	margin: 0 !important;
	padding: 0 !important;
}

.wp-block-uagb-container.hero-home-overlay > .uagb-container__video-wrap > video,
.wp-block-uagb-container.hero-overlay > .uagb-container__video-wrap > video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Content-Ebene */
.wp-block-uagb-container.hero-home-overlay > .uagb-container-inner-blocks-wrap,
.wp-block-uagb-container.hero-overlay > .uagb-container-inner-blocks-wrap {
	position: relative;
	z-index: 2;
	align-self: stretch;
	justify-self: center !important;
}

/* Hero-Layout füllt die verfügbare Fläche */
.wp-block-uagb-container.hero-home-overlay .hero-layout,
.wp-block-uagb-container.hero-overlay .hero-layout {
	min-height: 100% !important;
	height: auto !important;
}

/* ------------------------------------------------
 * Hero Layout
 * ------------------------------------------------ */

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name Hero Layout
 * @desc Positioniert die Inhaltsbereiche des Hero: Prefix oben links,
 *       Hauptüberschrift darunter, Scroll-Icon am unteren Rand zentriert.
 *       Das horizontale Padding skaliert per JavaScript mit der Fensterbreite.
 * @classes .hero-layout
 *          .hero-prefix-wrapper
 *          .hero-heading-wrapper
 *          .hero-heading
 *          .hero-sub-heading
 *          .hero-bottom-wrapper
 * @usage Klassen auf die jeweiligen Inhaltselemente innerhalb von
 *        .hero-home-overlay oder .hero-overlay setzen.
 * @example-start
 * <div class="hero-overlay">
 *   <div class="hero-layout">
 *     <div class="hero-prefix-wrapper"><!-- Prefix --></div>
 *     <div class="hero-heading-wrapper">
 *       <h1 class="hero-heading">Überschrift</h1>
 *       <p class="hero-sub-heading">Unterzeile</p>
 *     </div>
 *     <div class="hero-bottom-wrapper"><!-- Scroll-Icon --></div>
 *   </div>
 * </div>
 * @example-end
 * @note Das Padding wird per JavaScript dynamisch berechnet und als
 *       CSS-Variable --hero-layout-left-padding gesetzt.
 */

:root {
	--hero-max-left-padding: 35;
	--hero-min-left-padding: 4;
	--hero-max-right-padding: 2;
	--hero-min-right-padding: 2;
	--hero-scale-from: 921;
	--hero-scale-to: 1280;

	/* werden per JS gesetzt */
	--hero-layout-left-padding: 4%;
	--hero-layout-right-padding: 2%;
}

.hero-layout {
	min-width: 100% !important;
	width: 100% !important;
	min-height: 100% !important;
	position: relative;
	display: grid;
	grid-template-rows: 42vh 1fr auto;
	padding-left: var(--hero-layout-left-padding, 4%);
	box-sizing: border-box;
}

.hero-prefix-wrapper {
	position: absolute;
	top: calc(42vh - 20px);
	left: var(--hero-layout-left-padding, 4%);
	transform: translateY(-100%);
	margin: 0;
}

.hero-heading-wrapper {
	position: absolute;
	top: 42vh;
	left: var(--hero-layout-left-padding, 4%);
	right: var(--hero-layout-right-padding, 2%);
	margin: 0;
}

.hero-heading,
.hero-sub-heading {
	margin: 0;
}

.hero-bottom-wrapper {
	grid-row: 3;
	align-self: end;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box;

	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	margin: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	display: block !important;
}

.hero-bottom-wrapper .uagb-icon-wrapper {
	display: flex !important;
	justify-content: center;
	align-items: center;
	width: auto !important;
	margin: 0 !important;
}

.hero-bottom-wrapper .uagb-svg-wrapper {
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name .home-overlay-hero-signet
 * @desc Fügt einem Hero-Container ein dekoratives Signet als Hintergrundelement
 *       ein (halbtransparent, rechts außen, überragt den Container bewusst).
 * @usage Im Block-Editor: Container-Block → Erweitert → Zusätzliche CSS-Klasse.
 * @example <div class="home-overlay-hero-signet"><!-- Hero-Inhalt --></div>
 */
.home-overlay-hero-signet {
	position: relative;
	overflow: hidden !important;
	isolation: isolate;
}

.home-overlay-hero-signet::after {
	content: "";
	position: absolute;
	top: 0%;
	left: 100%;
	transform: translate(-80%, 0%);
	width: clamp(40rem, 45vw, 60rem);
	aspect-ratio: 500 / 517.17;
	background-color: rgba(72, 102, 146, 0.2);
	pointer-events: none;
	z-index: 1;

	-webkit-mask-image: url('../images/feingefuehlt-signet.svg');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;

	mask-image: url('../images/feingefuehlt-signet.svg');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name .hero-badge
 * @desc Rahmt einen Text-Block als Badge ein (Außenrahmen in Primärfarbe,
 *       abgerundete Ecken, kompaktes Padding).
 * @usage Im Block-Editor: Text- oder Überschriften-Block → Erweitert →
 *        Zusätzliche CSS-Klasse.
 * @example <span class="hero-badge">Auszeichnung</span>
 */
.hero-badge {
	border: 2px solid var(--ast-global-color-0);
	border-radius: 6px;
	padding: 4px 10px;
}

/* ------------------------------------------------
 * Section Container Styles (image-gradient Hintergrund)
 * ------------------------------------------------ */

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name Section mit Bild-Gradient-Overlay
 * @desc Legt einen Farbverlauf über den Hintergrund eines Section-Containers,
 *       der ein Hintergrundbild hat. Vier Varianten steuern die Richtung und
 *       Intensität des Overlays:
 *       - image-gradient-overlay: oben und unten in Markenfarbe, Mitte abgedunkelt
 *       - image-gradient-overlay-darkened-left: wie oben, zusätzlich links stärker abgedunkelt
 *       - image-gradient-bottom-overlay: Overlay läuft nach unten in Markenfarbe aus
 *       - image-gradient-top-overlay: Overlay läuft nach oben in Markenfarbe aus
 * @classes .image-gradient-overlay
 *          .image-gradient-overlay-darkened-left
 *          .image-gradient-bottom-overlay
 *          .image-gradient-top-overlay
 * @usage Im Block-Editor: Container-Block mit Hintergrundbild auswählen →
 *        Erweitert → Zusätzliche CSS-Klasse. Der Container muss
 *        position: relative unterstützen (Standard bei Spectra-Containern).
 * @example <div class="image-gradient-overlay"><!-- Section-Inhalt --></div>
 * @note Nur eine Variante pro Container verwenden. Das Padding oben und unten
 *       wird automatisch vergrößert, damit der Inhalt nicht im Gradient-Bereich liegt.
 */

.image-gradient-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
	linear-gradient(
		0deg,
		rgba(72,102,146,1) 0%,
		rgba(72,102,146,1) 3%,
		rgba(20,40,60,0.55) 15%,
		rgba(20,40,60,0.55) 50%,
		rgba(20,40,60,0.55) 85%,
		rgba(72,102,146,1) 97%,
		rgba(72,102,146,1) 100%
	);
}

.image-gradient-overlay-darkened-left::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
	linear-gradient(
		0deg,
		rgba(72,102,146,1) 0%,
		rgba(72,102,146,1) 3%,
		rgba(20,40,60,0.55) 15%,
		rgba(20,40,60,0.35) 50%,
		rgba(20,40,60,0.55) 85%,
		rgba(72,102,146,1) 97%,
		rgba(72,102,146,1) 100%
	),
	linear-gradient(
		90deg,
		rgba(20,40,60,0.65) 0%,
		rgba(20,40,60,0.55) 50%,
		rgba(20,40,60,0.25) 75%,
		rgba(20,40,60,0) 97%,
		rgba(20,40,60,0) 100%
	);
}

.image-gradient-bottom-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
	linear-gradient(
		195deg,
		rgba(11,29,38,0.8) 0%,
		rgba(11,29,38,0.5) 20%,
		rgba(11,29,38,0.3) 50%,
		rgba(11,29,38,0.0) 60%,
		rgba(72,102,146,0.0) 80%
	),
	linear-gradient(
		180deg,
		rgba(20,40,60,0.45) 0%,
		rgba(20,40,60,0.55) 75%,
		rgba(72,102,146,1) 95%,
		rgba(72,102,146,1) 100%
	);
}

.image-gradient-top-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
	linear-gradient(
		15deg,
		rgba(11,29,38,0.8) 0%,
		rgba(11,29,38,0.5) 20%,
		rgba(11,29,38,0.0) 50%,
		rgba(72,102,146,0.0) 80%
	),
	linear-gradient(
		0deg,
		rgba(20,40,60,0.25) 0%,
		rgba(20,40,60,0.55) 45%,
		rgba(72,102,146,1) 97%,
		rgba(72,102,146,1) 100%
	);
}

.image-gradient-overlay,
.image-gradient-overlay-darkened-left,
.image-gradient-overlay-darkened-right {
	position: relative;
	padding-top: calc(2.5 * var(--section-pad-y)) !important;
	padding-bottom: calc(2.5 * var(--section-pad-y)) !important;
}

.image-gradient-bottom-overlay {
	position: relative;
	padding-bottom: calc(2.5 * var(--section-pad-y)) !important;
}

.image-gradient-top-overlay {
	position: relative;
	padding-top: calc(2.5 * var(--section-pad-y)) !important;
}

.image-gradient-overlay > *,
.image-gradient-overlay-darkened-left > *,
.image-gradient-overlay-darkened-right > *,
.image-gradient-bottom-overlay > *,
.image-gradient-top-overlay > * {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------
 * Section Container Styles (Personal Image Hintergrund)
 * ------------------------------------------------ */

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name Section mit Persönlichem Bild-Overlay
 * @desc Legt einen halbtransparenten Farbverlauf über den Hintergrund eines
 *       Section-Containers mit Personenbild. Vier Varianten steuern Intensität
 *       und Richtung des Overlays:
 *       - image-section-overlay: leichtes Overlay diagonal von oben links
 *       - image-section-overlay-dark: stärkeres Overlay diagonal von oben links
 *       - image-section-overlay-dark-left: starkes Overlay von links, rechts auslaufend
 *       - image-section-overlay-dark-right: starkes Overlay von rechts, links auslaufend
 * @classes .image-section-overlay
 *          .image-section-overlay-dark
 *          .image-section-overlay-dark-left
 *          .image-section-overlay-dark-right
 * @usage Im Block-Editor: Container-Block mit Personenbild als Hintergrund →
 *        Erweitert → Zusätzliche CSS-Klasse. Nur eine Variante pro Container.
 * @example <div class="image-section-overlay"><!-- Section-Inhalt --></div>
 * @note Die left/right-Varianten erhöhen ihre Deckkraft auf Tablet automatisch,
 *       damit Text auch auf kleineren Bildschirmen lesbar bleibt.
 */

.image-section-overlay {
	position: relative;
}

.image-section-overlay > * {
	position: relative;
	z-index: 1;
}

.image-section-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
	linear-gradient(
		155deg,
		rgba(62,88,126,0.8) 0%,
		rgba(62,88,126,0.6) 20%,
		rgba(62,88,126,0.5) 50%,
		rgba(62,88,126,0.4) 80%
	);
}

.image-section-overlay-dark {
	position: relative;
}

.image-section-overlay-dark > * {
	position: relative;
	z-index: 1;
}

.image-section-overlay-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
	linear-gradient(
		155deg,
		rgba(62,88,126,0.95) 0%,
		rgba(62,88,126,0.85) 20%,
		rgba(62,88,126,0.75) 50%,
		rgba(62,88,126,0.55) 80%
	);
}

.image-section-overlay-dark-left,
.image-section-overlay-dark-right {
	position: relative;
}

.image-section-overlay-dark-left > *,
.image-section-overlay-dark-right > * {
	position: relative;
	z-index: 1;
}

.image-section-overlay-dark-left::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
	linear-gradient(
		90deg,
		rgba(20,40,60,0.65) 0%,
		rgba(20,40,60,0.55) 50%,
		rgba(20,40,60,0.25) 75%,
		rgba(20,40,60,0) 97%,
		rgba(20,40,60,0) 100%
	);
}

.image-section-overlay-dark-right::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
	linear-gradient(
		270deg,
		rgba(20,40,60,0.65) 0%,
		rgba(20,40,60,0.55) 50%,
		rgba(20,40,60,0.25) 75%,
		rgba(20,40,60,0) 97%,
		rgba(20,40,60,0) 100%
	);
}

/* Spectra Tablet */
@media (max-width: 1024px) {

	.image-section-overlay-dark-left::before {
		background:
		linear-gradient(
			90deg,
			rgba(20,40,60,0.85) 0%,
			rgba(20,40,60,0.75) 50%,
			rgba(20,40,60,0.65) 75%,
			rgba(20,40,60,0.55) 97%,
			rgba(20,40,60,0.55) 100%
		);
	}

	.image-section-overlay-dark-right::before {
		background:
		linear-gradient(
			270deg,
			rgba(20,40,60,0.85) 0%,
			rgba(20,40,60,0.75) 50%,
			rgba(20,40,60,0.65) 75%,
			rgba(20,40,60,0.55) 97%,
			rgba(20,40,60,0.55) 100%
		);
	}

}

/* ------------------------------------------------
 * LinkedIn Section
 * ------------------------------------------------ */

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name .linkedin-post-slider
 * @desc Gestaltet einen Spectra-Slider für LinkedIn-Beiträge:
 *       Pfeile und Dots werden auf einer gemeinsamen Achse am unteren Rand
 *       ausgerichtet. Jede Slide ist vollständig klickbar – der Link muss
 *       dafür auf dem Bild-Block innerhalb der Slide gesetzt sein.
 *       Auf Desktop wird die Navigation automatisch ausgeblendet.
 * @usage Im Block-Editor: Slider-Block auswählen → Erweitert → Zusätzliche CSS-Klasse.
 * @example <div class="linkedin-post-slider"><!-- Spectra Slider --></div>
 * @note Navigation (Pfeile + Dots) ist nur auf Mobilgeräten sichtbar –
 *       ab 1023px Bildschirmbreite wird sie ausgeblendet.
 *       Fokus-Outline für Tastaturnavigation ist eingebaut.
 */

/* Slider Navigation Fix (UAGB / Swiper): Arrows auf Höhe der Dots & innerhalb */

.linkedin-post-slider {
	position: relative;
}

/* Gemeinsame Achse */
.linkedin-post-slider::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	height: 0;
}

/* Dots */
.linkedin-post-slider .swiper-pagination {
	position: absolute;
	left: 50%;
	top: auto;
	bottom: 20px;
	transform: translate(-50%, 50%);
	z-index: 5;
}

/* Arrows */
.linkedin-post-slider .swiper-button-prev,
.linkedin-post-slider .swiper-button-next {
	position: absolute;
	top: auto !important;
	bottom: 20px;
	transform: translateY(50%);
	z-index: 6;

	width: 40px;
	height: 40px;
}

.linkedin-post-slider .swiper-button-prev {
	left: 15px;
}

.linkedin-post-slider .swiper-button-next {
	right: 15px;
}

@media (min-width: 1023px) {
	.linkedin-post-slider .swiper-pagination {
		display: none;
	}

	.linkedin-post-slider .swiper-button-prev,
	.linkedin-post-slider .swiper-button-next {
		display: none;
	}
}

/* Klickbare Slides – Link muss auf Bild-Block gesetzt sein */

.linkedin-post-slider .swiper-slide {
	cursor: pointer;
}

.linkedin-post-slider .swiper-slide:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Image Overlay im Slider-Kontext */

.linkedin-post-slider .linkedin-image-heading-overlay__img .wp-block-uagb-image__figure {
	position: relative;
	overflow: hidden;
	aspect-ratio: 5 / 6;
	width: 100%;
}

.linkedin-post-slider .linkedin-image-heading-overlay__img .wp-block-uagb-image__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(28, 29, 33, 0.55);
	pointer-events: none;
	z-index: 1;
}

.linkedin-post-slider .linkedin-image-heading-overlay__img .wp-block-uagb-image__figure img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.linkedin-post-slider .linkedin-image-heading-overlay__title {
	position: relative;
	z-index: 2;
}

/* ------------------------------------------------
 * Bild + Heading Overlay
 * ------------------------------------------------ */

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name Bild mit Überschriften-Overlay
 * @desc Legt eine Überschrift über ein Bild (unten links). Das Bild erhält
 *       im LinkedIn-Post-Slider ein dunkles Overlay, damit die Überschrift
 *       lesbar bleibt.
 * @classes .linkedin-image-heading-overlay
 *          .linkedin-image-heading-overlay__img
 *          .linkedin-image-heading-overlay__title
 * @usage Im Block-Editor: äußeren Container → .linkedin-image-heading-overlay,
 *        Bild-Block → .linkedin-image-heading-overlay__img,
 *        Überschriften-Block → .linkedin-image-heading-overlay__title.
 * @example-start
 * <div class="linkedin-image-heading-overlay">
 *   <div class="linkedin-image-heading-overlay__img"><!-- Bild --></div>
 *   <div class="linkedin-image-heading-overlay__title"><!-- Überschrift --></div>
 * </div>
 * @example-end
 */

.linkedin-image-heading-overlay {
	display: grid;
	overflow: hidden;
}

.linkedin-image-heading-overlay > * {
	grid-area: 1 / 1;
}

.linkedin-image-heading-overlay__img {
	display: block;
	min-width: 100%;
	width: 100%;
	height: auto;
	z-index: 0;
}

.linkedin-image-heading-overlay__title {
	align-self: end;
	justify-self: stretch;
	z-index: 1;
	margin: 0;
}

/* ------------------------------------------------
 * Heading with Background Styles
 * ------------------------------------------------ */

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name .highlight-heading-container
 * @desc Begrenzt die Breite eines Containers auf den tatsächlichen Inhalt, sodass der Container als "Badge" dient.
 *       Verhindert, dass der Container die volle Spaltenbreite einnimmt.
 * @usage Im Block-Editor: Container-Block auswählen → Erweitert → Zusätzliche CSS-Klasse.
 * @example <div class="highlight-heading-container">Überschrift</div>
 */
.highlight-heading-container {
	width: fit-content !important;
}

/* ------------------------------------------------
 * Section Header Lines / Styles
 * ------------------------------------------------ */

:root {
	--deko-line-color: var(--ast-global-color-0);
	--deko-line-height: 2px;
	--deko-line-gap: 24px;

	/* nur Konfigurationswerte */
	--deko-line-offset-start: 1600;
	--deko-line-offset-end: 1920;
	--deko-line-offset-max: 100px;
}

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name Überschrift mit Dekorationslinie
 * @desc Fügt neben dem Überschriftentext eine horizontale Dekorationslinie ein.
 *       Varianten steuern Richtung (links/rechts), Ausrichtung und Versatz.
 * @classes .heading-line-left-window
 *          .heading-line-right-window
 *          .heading-line-left-window-offset
 *          .heading-line-right-window-offset
 *          .heading-centered-line-left-window
 *          .heading-centered-line-right-window
 *          .heading-centered-line-left-window-offset
 *          .heading-centered-line-right-window-offset
 *          .heading-inherit-alignment-line-left-window
 *          .heading-inherit-alignment-line-right-window
 *          .heading-inherit-alignment-line-left-window-offset
 *          .heading-inherit-alignment-line-right-window-offset
 * @usage Im Block-Editor: Überschriften-Block → Erweitert → Zusätzliche CSS-Klasse.
 * @example-start
 * <!-- Linie links, linksbündig ausgerichtet -->
 * <h2 class="heading-line-left-window">Überschrift</h2>
 *
 * <!-- Linie rechts, zentriert ausgerichtet -->
 * <h2 class="heading-centered-line-right-window">Überschrift</h2>
 * @example-end
 * @note Linienfarbe ist über Astra-Variable 0 konfigurierbar (Customizer).
 */

.heading-inherit-alignment-line-left-window,
.heading-inherit-alignment-line-right-window,
.heading-inherit-alignment-line-left-window-offset,
.heading-inherit-alignment-line-right-window-offset {
	position: relative;
	display: inline-block;
	width: fit-content !important;
	max-width: 100%;
	margin: 0;
	text-align: inherit !important;
	vertical-align: middle;
	align-self: inherit !important;

	/* werden per JS gesetzt */
	--line-left-width: 0px;
	--line-right-width: 0px;
	--line-anchor-y: 0px;
	--line-left-anchor-x: 0px;
	--line-right-anchor-x: 0px;
}

.heading-line-left-window,
.heading-line-right-window,
.heading-line-left-window-offset,
.heading-line-right-window-offset {
	position: relative;
	display: inline-block;
	width: fit-content !important;
	max-width: 100%;
	margin: 0;
	text-align: left;
	vertical-align: middle;
	align-self: flex-start;

	/* werden per JS gesetzt */
	--line-left-width: 0px;
	--line-right-width: 0px;
	--line-anchor-y: 0px;
	--line-left-anchor-x: 0px;
	--line-right-anchor-x: 0px;
}

.heading-centered-line-left-window,
.heading-centered-line-right-window,
.heading-centered-line-left-window-offset,
.heading-centered-line-right-window-offset {
	position: relative;
	display: inline-block;
	width: fit-content !important;
	max-width: 100%;
	margin: 0;
	text-align: left;
	vertical-align: middle;
	align-self: center;

	/* werden per JS gesetzt */
	--line-left-width: 0px;
	--line-right-width: 0px;
	--line-anchor-y: 0px;
	--line-left-anchor-x: 0px;
	--line-right-anchor-x: 0px;
}

/* optional: Standardabstände im Heading-Block bereinigen */
.heading-line-left-window .uagb-desc-text,
.heading-line-right-window .uagb-desc-text,
.heading-line-left-window-offset .uagb-desc-text,
.heading-line-right-window-offset .uagb-desc-text,
.heading-line-left-window .uagb-heading-text,
.heading-line-right-window .uagb-heading-text,
.heading-line-left-window-offset .uagb-heading-text,
.heading-line-right-window-offset .uagb-heading-text,
.heading-inherit-alignment-line-left-window .uagb-desc-text,
.heading-inherit-alignment-line-right-window .uagb-desc-text,
.heading-inherit-alignment-line-left-window-offset .uagb-desc-text,
.heading-inherit-alignment-line-right-window-offset .uagb-desc-text,
.heading-centered-line-left-window .uagb-desc-text,
.heading-centered-line-right-window .uagb-desc-text,
.heading-centered-line-left-window-offset .uagb-desc-text,
.heading-centered-line-right-window-offset .uagb-desc-text,
.heading-centered-line-left-window .uagb-heading-text,
.heading-centered-line-right-window .uagb-heading-text,
.heading-centered-line-left-window-offset .uagb-heading-text,
.heading-centered-line-right-window-offset .uagb-heading-text {
	position: relative;
	z-index: 1;
}

/* linke Varianten */

.heading-line-left-window::before,
.heading-line-left-window-offset::before,
.heading-inherit-alignment-line-left-window::before,
.heading-inherit-alignment-line-left-window-offset::before,
.heading-centered-line-left-window::before,
.heading-centered-line-left-window-offset::before {
	content: "";
	position: absolute;
	top: var(--line-anchor-y);
	left: calc(var(--line-left-anchor-x) - var(--deko-line-gap) - var(--line-left-width));
	transform: translateY(-50%);
	width: var(--line-left-width);
	height: var(--deko-line-height);
	background: var(--deko-line-color);
	pointer-events: none;
}

/* rechte Varianten */

.heading-line-right-window::after,
.heading-line-right-window-offset::after,
.heading-inherit-alignment-line-right-window::after,
.heading-inherit-alignment-line-right-window-offset::after,
.heading-centered-line-right-window::after,
.heading-centered-line-right-window-offset::after {
	content: "";
	position: absolute;
	top: var(--line-anchor-y);
	left: calc(var(--line-right-anchor-x) + var(--deko-line-gap));
	transform: translateY(-50%);
	width: var(--line-right-width);
	height: var(--deko-line-height);
	background: var(--deko-line-color);
	pointer-events: none;
}

/* ------------------------------------------------
 * Spectra Icon List: Punkt an erster Textzeile ausrichten
 * ------------------------------------------------ */

.uagb-icon-list__wrap .wp-block-uagb-icon-list-child {
	display: flex !important;
	align-items: flex-start !important;
}

.uagb-icon-list__wrap .uagb-icon-list__source-wrap {
	flex: 0 0 auto !important;
	align-self: flex-start !important;
	position: relative;
	top: 0.7em;
}

.uagb-icon-list__wrap .uagb-icon-list__label {
	flex: 1 1 auto !important;
	align-self: flex-start !important;
}

.uagb-icon-list__wrap .uagb-icon-list__source-wrap svg {
	display: block;
}

/* ------------------------------------------------
 * Nur Fullscreen / Popup Close Button angleichen
 * Original Menü-Button bleibt unverändert
 * ------------------------------------------------ */

@media (max-width: 1024px) {

	:root {
		/* echte Höhe deines Mobile-Headers eintragen */
		--mobile-header-wrap-height: 71px;

		/* rechte Position passt bei dir schon */
		--popup-close-offset-right: 20px;

		/* soll identisch zum Original Menübutton sein */
		--popup-close-button-size: 44px;
		--popup-close-icon-size: 24px;
	}

	#ast-mobile-popup-wrapper .ast-mobile-popup-header {
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
		min-height: 0 !important;
		margin: 0 !important;
		padding:
			calc(
				(var(--mobile-header-wrap-height) - var(--popup-close-button-size)) / 2
			)
			var(--popup-close-offset-right)
			0
			0 !important;
		box-sizing: border-box;
	}

	#ast-mobile-popup-wrapper #menu-toggle-close.menu-toggle-close {
		width: var(--popup-close-button-size) !important;
		height: var(--popup-close-button-size) !important;
		min-width: var(--popup-close-button-size) !important;
		min-height: var(--popup-close-button-size) !important;

		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		box-sizing: border-box;

		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		line-height: 0 !important;
		font-size: 0 !important;
		color: inherit;
	}

	#ast-mobile-popup-wrapper #menu-toggle-close.menu-toggle-close .ast-svg-iconset {
		width: var(--popup-close-icon-size) !important;
		height: var(--popup-close-icon-size) !important;
		margin: 0 !important;
		padding: 0 !important;

		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		line-height: 0 !important;
		color: var(--ast-global-color-0) !important;
	}

	#ast-mobile-popup-wrapper #menu-toggle-close.menu-toggle-close .ast-svg-iconset svg {
		width: var(--popup-close-icon-size) !important;
		height: var(--popup-close-icon-size) !important;
		display: block;
	}
}

/* ------------------------------------------------
 * Image-Box Shadow
 * ------------------------------------------------ */

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name Bild mit Schatteneffekt
 * @desc Fügt einem Bild-Block einen weichen Schatten mit Hover-Effekt hinzu.
 *       Zwei Varianten: Schatten nach rechts (Standard) oder nach links.
 * @classes .uagb-image-box-shadow
 *          .uagb-image-box-shadow-left
 * @usage Im Block-Editor: Bild-Block auswählen → Erweitert → Zusätzliche CSS-Klasse.
 *        Nur eine der beiden Klassen pro Bild verwenden.
 * @example-start
 * <!-- Schatten nach rechts unten -->
 * <figure class="uagb-image-box-shadow">...</figure>
 *
 * <!-- Schatten nach links unten -->
 * <figure class="uagb-image-box-shadow-left">...</figure>
 * @example-end
 * @note Der Schatten verstärkt sich beim Hover automatisch – kein weiteres Setup nötig.
 */
.uagb-image-box-shadow .wp-block-uagb-image__figure {
	margin: 0;
	line-height: 0;
	overflow: hidden;
	box-shadow: 15px 15px 25px rgba(0, 0, 0, 0.44);
	border-radius: 6px;
	transition: box-shadow 0.35s ease;
}

.uagb-image-box-shadow:hover .wp-block-uagb-image__figure {
	box-shadow: 20px 20px 35px rgba(0, 0, 0, 0.55);
}

.uagb-image-box-shadow-left .wp-block-uagb-image__figure {
	margin: 0;
	line-height: 0;
	overflow: hidden;
	box-shadow: -15px 15px 25px rgba(0, 0, 0, 0.44);
	border-radius: 6px;
	transition: box-shadow 0.35s ease;
}

.uagb-image-box-shadow-left:hover .wp-block-uagb-image__figure {
	box-shadow: -20px 20px 35px rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------
 * Container Shadow
 * ------------------------------------------------ */

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name Container mit Schatteneffekt
 * @desc Fügt einem Container-Block einen weichen Schatten mit Hover-Effekt hinzu.
 *       Zwei Varianten: Schatten nach rechts (Standard) oder nach links.
 * @classes .uagb-container-box-shadow
 *          .uagb-container-box-shadow-left
 * @usage Im Block-Editor: Container-Block auswählen → Erweitert → Zusätzliche CSS-Klasse.
 *        Nur eine der beiden Klassen pro Container verwenden.
 * @example-start
 * <!-- Schatten nach rechts unten -->
 * <div class="uagb-container-box-shadow">...</div>
 *
 * <!-- Schatten nach links unten -->
 * <div class="uagb-container-box-shadow-left">...</div>
 * @example-end
 * @note Der Schatten verstärkt sich beim Hover automatisch – kein weiteres Setup nötig.
 */
.uagb-container-box-shadow,
.uagb-container-box-shadow-left {
	position: relative;
	overflow: visible !important;
	isolation: isolate;
}

.uagb-container-box-shadow::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
	box-shadow: 15px 15px 25px rgba(0, 0, 0, 0.44);
	transition: box-shadow 0.35s ease;
}

.uagb-container-box-shadow-left::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
	box-shadow: -15px 15px 25px rgba(0, 0, 0, 0.44);
	transition: box-shadow 0.35s ease;
}

/* Inhalt über den Shadow legen */
.uagb-container-box-shadow > *,
.uagb-container-box-shadow-left > * {
	position: relative;
	z-index: 1;
}

.uagb-container-box-shadow:hover::before {
	box-shadow: 20px 20px 35px rgba(0, 0, 0, 0.55);
}

.uagb-container-box-shadow-left:hover::before {
	box-shadow: -20px 20px 35px rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------
 * Slider Navigation Fix (UAGB / Swiper)
 * Arrows auf Höhe der Dots & innerhalb
 * ------------------------------------------------ */

.wp-block-uagb-slider {
	position: relative;
}

/* Gemeinsame Achse */
.wp-block-uagb-slider::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	height: 0;
}

/* Dots */
.wp-block-uagb-slider .swiper-pagination {
	position: absolute;
	left: 50%;
	top: auto;
	bottom: 20px;
	transform: translate(-50%, 50%);
	z-index: 5;
}

/* Arrows */
.wp-block-uagb-slider .swiper-button-prev,
.wp-block-uagb-slider .swiper-button-next {
	position: absolute;
	top: auto !important;
	bottom: 20px;
	transform: translateY(50%);
	z-index: 6;

	width: 40px;
	height: 40px;
}

.wp-block-uagb-slider .swiper-button-prev {
	left: 15px;
}

.wp-block-uagb-slider .swiper-button-next {
	right: 15px;
}

/* Barrierefreiheit erfüllen */
.swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  margin: 0 10px !important;
}

/* ======================================================
   Snake Timeline
   Klasse auf den äußeren Spectra-Container: snake-timeline
   ====================================================== */

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name .snake-timeline
 * @desc Verwandelt einen Spectra-Container in eine visuelle Snake-Timeline:
 *       Einträge wechseln links/rechts ab und werden durch eine geschwungene
 *       SVG-Linie mit Punkten und Signet-Markierungen verbunden.
 * @usage Im Block-Editor: äußeren Container-Block auswählen → Erweitert →
 *        Zusätzliche CSS-Klasse. Die Kind-Elemente müssen Spectra Info-Boxen sein.
 * @example <div class="snake-timeline"><!-- Spectra Info-Boxen --></div>
 * @note Erfordert das zugehörige JavaScript – ohne JS erscheinen nur die Info-Boxen,
 *       keine Linie. JS wird automatisch geladen, wenn die CSS-Klasse zugewiesen wird.
 */
.snake-timeline {
	--snake-line-color: var(--ast-global-color-0);
	--snake-line-width: 2;
	--snake-dot-size: 16;

	/* Signets */
	--snake-signet-size: 34;

	/* Signet-Positionen rein über CSS-Transform */
	--snake-signet-start-x: 12px;
	--snake-signet-start-y: 0px;

	--snake-signet-end-x: 12px;
	--snake-signet-end-y: 0px;

	/* Abstand zur äußeren Timeline-Grenze */
	--snake-outer-x: 32;

	/* Abstand der Linie zum gleich breiten Info-Box-Bereich */
	--snake-track-padding-x: 50;
	--snake-track-padding-y: 14;

	/* Breite der gesamten Snake */
	--snake-track-min-width: 450;
	--snake-track-max-width: 900;

	/* Feinkorrektur horizontal */
	--snake-track-offset-x: 0;

	/* Automatische gemeinsame Breite der Info-Boxen */
	--snake-item-width: auto;
	--snake-item-max-width: 860px;
	--snake-item-extra-width: 36px;

	position: relative;
	overflow: visible;
}

/* Falls Spectra einen inneren Wrapper erzeugt */
.snake-timeline > .uagb-container-inner-blocks-wrap {
	position: relative;
	overflow: visible;
	box-sizing: border-box;
}

/* SVG-Layer für die durchgehende Linie */
.snake-timeline .snake-track {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
}

/* SVG */
.snake-timeline .snake-track svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Linie */
.snake-timeline .snake-track path {
	fill: none;
	stroke: var(--snake-line-color);
	stroke-width: var(--snake-line-width);
	vector-effect: non-scaling-stroke;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Punkte */
.snake-timeline .snake-track circle {
	fill: var(--snake-line-color);
}

/* Signets als maskierte HTML-Elemente */
.snake-timeline .snake-signet {
	position: absolute;
	z-index: 2;
	width: calc(var(--snake-signet-size) * 1px);
	height: calc(var(--snake-signet-size) * 1px);
	background-color: var(--snake-line-color);
	pointer-events: none;

	-webkit-mask-image: url('../images/feingefuehlt-signet.svg');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;

	mask-image: url('../images/feingefuehlt-signet.svg');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.snake-timeline .snake-signet--start {
	transform:
		translate(
			calc(-50% + var(--snake-signet-start-x)),
			calc(-50% + var(--snake-signet-start-y))
		)
		rotate(10deg);
}

.snake-timeline .snake-signet--end {
	transform:
		translate(
			calc(-50% + var(--snake-signet-end-x)),
			calc(-50% + var(--snake-signet-end-y))
		)
		rotate(10deg);
}

/* ======================================================
   Timeline-Items
   NICHT 100% Breite.
   Die Item-Container bekommen dieselbe Breite wie die Info-Box.
   ====================================================== */

.snake-timeline > .wp-block-uagb-container,
.snake-timeline > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
	position: relative;
	z-index: 1;
	overflow: visible;

	width: var(--snake-item-width) !important;
	max-width: var(--snake-item-max-width) !important;
	box-sizing: border-box;

	margin-left: auto !important;
	margin-right: auto !important;

	flex: 0 0 auto !important;
	flex-basis: auto !important;

	transform: none !important;
}

/* Info-Box füllt den jeweiligen gleich breiten Item-Container */
.snake-timeline .wp-block-uagb-info-box,
.snake-timeline .uagb-ifb-content {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;

	margin-left: 0 !important;
	margin-right: 0 !important;

	transform: none !important;
}

/* Titel und Beschreibung sollen auf Desktop eine Zeile bleiben */
.snake-timeline .uagb-ifb-title,
.snake-timeline .uagb-ifb-desc {
	white-space: nowrap;
}

/* Grundausrichtung / Box-Modell */
.snake-timeline .uagb-ifb-title-wrap,
.snake-timeline .uagb-ifb-title,
.snake-timeline .uagb-ifb-desc {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

/* ======================================================
   Content-Ausrichtung
   Wichtig:
   .snake-track wird per JS als erstes div eingefügt.
   Deshalb ist der erste echte Container technisch nth-of-type(2).

   Logisch:
   Item 1, 3, 5 = linksbündig
   Item 2, 4, 6 = rechtsbündig
   ====================================================== */

/* Direkte Child-Struktur: logische ungerade Items links */
.snake-timeline > .wp-block-uagb-container:nth-of-type(even) .uagb-ifb-title-wrap,
.snake-timeline > .wp-block-uagb-container:nth-of-type(even) .uagb-ifb-title,
.snake-timeline > .wp-block-uagb-container:nth-of-type(even) .uagb-ifb-desc {
	text-align: left !important;
}

/* Direkte Child-Struktur: logische gerade Items rechts */
.snake-timeline > .wp-block-uagb-container:nth-of-type(odd):not(.snake-track) .uagb-ifb-title-wrap,
.snake-timeline > .wp-block-uagb-container:nth-of-type(odd):not(.snake-track) .uagb-ifb-title,
.snake-timeline > .wp-block-uagb-container:nth-of-type(odd):not(.snake-track) .uagb-ifb-desc {
	text-align: right !important;
}

/* Spectra Wrapper-Struktur: logische ungerade Items links */
.snake-timeline > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container:nth-of-type(even) .uagb-ifb-title-wrap,
.snake-timeline > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container:nth-of-type(even) .uagb-ifb-title,
.snake-timeline > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container:nth-of-type(even) .uagb-ifb-desc {
	text-align: left !important;
}

/* Spectra Wrapper-Struktur: logische gerade Items rechts */
.snake-timeline > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container:nth-of-type(odd):not(.snake-track) .uagb-ifb-title-wrap,
.snake-timeline > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container:nth-of-type(odd):not(.snake-track) .uagb-ifb-title,
.snake-timeline > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container:nth-of-type(odd):not(.snake-track) .uagb-ifb-desc {
	text-align: right !important;
}

/* Optional: bessere Abstände innerhalb der Info-Box */
.snake-timeline .uagb-ifb-title {
	margin-bottom: 10px;
}

.snake-timeline .uagb-ifb-desc {
	margin-top: 0;
}

/* ======================================================
   Mobile
   Wechsel bleibt erhalten:
   Logische ungerade Items = links
   Logische gerade Items = rechts
   ====================================================== */

@media (max-width: 767px) {
	.snake-timeline {
		--snake-line-width: 1.5;
		--snake-dot-size: 16;
		--snake-signet-size: 28;

		--snake-signet-start-x: 12px;
		--snake-signet-start-y: 0px;

		--snake-signet-end-x: 12px;
		--snake-signet-end-y: 0px;

		--snake-outer-x: 24;
		--snake-track-padding-x: 32;
		--snake-track-padding-y: 18;

		--snake-track-min-width: 350;
		--snake-track-max-width: 900;

		--snake-item-width: auto;
		--snake-item-max-width: 350px;
		--snake-item-extra-width: 36px;

		overflow: visible;
	}

	.snake-timeline > .wp-block-uagb-container,
	.snake-timeline > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
		width: var(--snake-item-width) !important;
		max-width: var(--snake-item-max-width) !important;
		box-sizing: border-box;

		margin-left: 0 !important;
		margin-right: 0 !important;

		padding-left: 48px !important;
		padding-right: 48px !important;

		flex: 0 0 auto !important;
		flex-basis: auto !important;

		transform: none !important;
	}

	.snake-timeline .wp-block-uagb-info-box,
	.snake-timeline .uagb-ifb-content {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;

		margin-left: 0 !important;
		margin-right: 0 !important;

		transform: none !important;
	}

	.snake-timeline .uagb-ifb-title-wrap,
	.snake-timeline .uagb-ifb-title,
	.snake-timeline .uagb-ifb-desc {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.snake-timeline .uagb-ifb-title,
	.snake-timeline .uagb-ifb-desc {
		white-space: normal;
		overflow-wrap: normal;
		word-break: normal;
		hyphens: manual;
	}

	.snake-timeline .uagb-ifb-title {
		margin-bottom: 8px;
	}
}

/* ------------------------------------------------
 * Info-Box Title below Description
 * ------------------------------------------------ */

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name .title-below-desc
 * @desc Kehrt die Anzeigereihenfolge einer Spectra Info-Box um: Beschreibung oben,
 *       Titel darunter, Bild/Icon ganz unten.
 * @usage Im Block-Editor: Info-Box-Block auswählen → Erweitert → Zusätzliche CSS-Klasse.
 * @example <div class="title-below-desc"><!-- Spectra Info-Box --></div>
 */

.entry-content .title-below-desc .uagb-ifb-content {
	display: flex;
	flex-direction: column;
}

.entry-content .title-below-desc .uagb-ifb-desc {
	order: 1;
}

.entry-content .title-below-desc .uagb-ifb-title-wrap {
	order: 2;
}

.entry-content .title-below-desc .uagb-ifb-image-content,
.entry-content .title-below-desc .uagb-ifb-icon-wrap {
	order: 3;
}

/* ------------------------------------------------
 * 3 Step Cards → gleiche Breite trotz Icons dazwischen
 * ------------------------------------------------ */

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name 3-Schritt-Karten mit Pfeil-Icons
 * @desc Ordnet drei Karten mit Pfeil-Icons dazwischen in einer Reihe an.
 *       Alle Karten erhalten automatisch dieselbe Breite. Auf Mobilgeräten
 *       stapeln sich Karten und Pfeile untereinander.
 * @classes .step-card-align-desc
 *          .step-card
 * @usage Im Block-Editor: äußeren Container-Block → .step-card-align-desc.
 *        Jeden der drei Karten-Container zusätzlich mit .step-card versehen.
 *        Pfeil-Icon-Blöcke zwischen den Karten benötigen keine extra Klasse.
 * @example-start
 * <div class="step-card-align-desc">
 *   <div class="step-card"><!-- Karte 1 --></div>
 *   <!-- Pfeil-Icon -->
 *   <div class="step-card"><!-- Karte 2 --></div>
 *   <!-- Pfeil-Icon -->
 *   <div class="step-card"><!-- Karte 3 --></div>
 * </div>
 * @example-end
 */

/* Desktop */
@media (min-width: 1023px) {

	.entry-content .step-card-align-desc {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
		column-gap: clamp(16px, 2vw, 28px);
		row-gap: 0;
		align-items: stretch;
	}

	/* Karten sollen ihre Grid-Spalte komplett füllen */
	.entry-content .step-card-align-desc > .step-card {
		width: 100%;
		min-width: 0;
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.entry-content .step-card-align-desc > .step-card > .wp-block-uagb-container,
	.entry-content .step-card-align-desc > .step-card .uagb-infobox__content-wrap,
	.entry-content .step-card-align-desc > .step-card .uagb-ifb-content {
		width: 100%;
		height: 100%;
		min-width: 0;
	}

	/* Pfeile mittig zwischen den Karten */
	.entry-content .step-card-align-desc > .uagb-icon-wrapper {
		justify-self: center;
		align-self: center;
		min-width: 0;
	}

	.entry-content .step-card-align-desc > .uagb-icon-wrapper .uagb-svg-wrapper {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* Mobile + Tablet: untereinander stapeln */
@media (max-width: 1024px) {

	.entry-content .step-card-align-desc {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
		align-items: stretch;
	}

	.entry-content .step-card-align-desc > .step-card {
		width: 100%;
		min-width: 0;
	}

	.entry-content .step-card-align-desc > .uagb-icon-wrapper {
		justify-self: center;
		align-self: center;
	}
}

/* ------------------------------------------------
 * Angebots-Karten nebeneinander
 * ------------------------------------------------ */

/**
 * @customer-doc
 * @section CSS-Klassen
 * @name Angebots-Karten nebeneinander
 * @desc Ordnet Angebotskarten in zwei gleichbreiten Spalten an. Überschriften
 *       werden auf dieselbe Höhe gebracht, sodass die Karten bündig wirken.
 *       Auf Mobilgeräten stapeln sich die Karten untereinander.
 * @classes .offers-align-desc
 *          .offer-card
 * @usage Im Block-Editor: äußeren Container-Block → .offers-align-desc.
 *        Jeden Karten-Container zusätzlich mit .offer-card versehen.
 * @example-start
 * <div class="offers-align-desc">
 *   <div class="offer-card"><!-- Karte 1 --></div>
 *   <div class="offer-card"><!-- Karte 2 --></div>
 * </div>
 * @example-end
 */

.offers-align-desc .uagb-container-inner-blocks-wrap {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	align-items: stretch;
}

.offers-align-desc .offer-card {
	display: flex;
	flex-direction: column;
}

/* Heading-Bereich in beiden Cards gleich hoch machen */
.offers-align-desc .offer-card .wp-block-uagb-advanced-heading {
	min-height: 4.5rem;
	display: flex;
	align-items: flex-start;
}

.offers-align-desc .offer-card .wp-block-uagb-advanced-heading + p {
	margin-top: 0;
}

@media (max-width: 768px) {

	.offers-align-desc .uagb-container-inner-blocks-wrap {
		grid-template-columns: 1fr;
	}

	.offers-align-desc .offer-card .wp-block-uagb-advanced-heading {
		min-height: auto;
	}

}