/* ======================================
   ROCKSOLID CUSTOM ELEMENTS CSS
   Ergänzung für Contao RockSolid
   ====================================== */

/* RockSolid fügt automatisch .ce_rsce_* Klassen hinzu */

/* ======================================
   1. FULL-WIDTH SECTION
   ====================================== */
.content-fullwidth,
.ce_rsce_fullwidth {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	max-width: 100vw;
	padding: 120px 0px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.content-fullwidth .inner-content,
.ce_rsce_fullwidth .inner-content {
	max-width: 1046px;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
	left: auto;
	right: auto;
	margin-left: auto;
	margin-right: auto;
}

#wrapper .content-fullwidth,
#wrapper .ce_rsce_fullwidth {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	max-width: 100vw;
	text-align: center;
	color: white;
}

.content-fullwidth h2,
.ce_rsce_fullwidth h2,
#wrapper .content-fullwidth h2,
#wrapper .ce_rsce_fullwidth h2 {
	color: white !important;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.3;
	margin-bottom: 20px;
	/*! text-align: left !important; */
}

.content-fullwidth p,
.ce_rsce_fullwidth p {
	color: white;
	line-height: 1.6;
	margin-bottom: 30px;
}

.content-fullwidth .button-group,
.ce_rsce_fullwidth .button-group {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.content-fullwidth .btn-primary,
.content-fullwidth .btn-secondary,
.ce_rsce_fullwidth .btn-primary,
.ce_rsce_fullwidth .btn-secondary {
	display: inline-block;
	padding: 14px 35px;
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	border-radius: 0;
	transition: all 0.3s ease;
	border: 2px solid white;
}

.content-fullwidth .btn-primary,
.ce_rsce_fullwidth .btn-primary {
	background: #1976d2;
	color: white;
	border-color: #1976d2;
}

.content-fullwidth .btn-primary:hover,
.ce_rsce_fullwidth .btn-primary:hover {
	background: #1565c0;
	border-color: #1565c0;
}

.content-fullwidth .btn-secondary,
.ce_rsce_fullwidth .btn-secondary {
	background: transparent;
	color: white;
	border-color: white;
}

.content-fullwidth .btn-secondary:hover,
.ce_rsce_fullwidth .btn-secondary:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* ======================================
   2. IMAGE-TEXT LAYOUT (Bild links)
   ====================================== */
.content-image-text,
.ce_rsce_image_text {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 60px;
	/*! align-items: center; */
	margin: 17px 0;
	/*! margin-left: auto; */
	/*! margin-right: auto; */
	/*! border-top: 1px solid #e3e0d9; */
	padding-top: 70px;
	padding-bottom: 43px;
}

.content-image-text .image-side,
.ce_rsce_image_text .image-side {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 6px 6px 10px #80808070;
}

.content-image-text .image-side img,
.ce_rsce_image_text .image-side img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.5s ease;
	animation: smoothZoom 8s ease-in-out infinite alternate;
}

.ce_rsce_image_text.noshadow .image-side
{box-shadow:0px 0px 0px 0px !important}

.content-image-text .text-side h2,
.ce_rsce_image_text .text-side h2,
#wrapper .content-image-text .text-side h2,
#wrapper .ce_rsce_image_text .text-side h2 {
	font-size: 26px;
	font-weight: 400;
	/*! color: #000; */
	margin-bottom: 20px;
	text-align: left !important;
	padding-left: 0;
	border: none;
	line-height: 36px;
	padding-top: 0px;
	margin-top: 0px;
}

.content-image-text .text-side p,
.ce_rsce_image_text .text-side p {
	line-height: 1.7;
	color: #333;
	margin-bottom: 15px;
}

.content-image-text .text-side .cta-link,
.ce_rsce_image_text .text-side .cta-link {
	display: inline-block;
	margin-top: 20px;
	padding: 12px 30px;
	background: #003c88;
	color: white;
	text-decoration: none;
	border-radius: 0;
	transition: all 0.3s ease;
}

.content-image-text .text-side .cta-link:hover,
.ce_rsce_image_text .text-side .cta-link:hover {
	background: #1976d2;
	transform: translateY(-2px);
}

/* ======================================
   3. TEXT-IMAGE LAYOUT (Text links)
   ====================================== */
.content-text-image,
.ce_rsce_text_image {
display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 60px;
	/*! align-items: center; */
	margin: 24px 0;
	/*! max-width: 1200px; */
	/*! margin-left: auto; */
	/*! margin-right: auto; */
	/*! border-top: 1px solid #e3e0d9; */
	padding-top: 70px;
	padding-bottom: 43px;
}

.content-text h3{text-align:center !important;font-weight:400;padding-top:30px}
.content-text li:before{content:"> "}
.content-text-image .text-side,
.ce_rsce_text_image .text-side {
	order: 1;
	/*! padding: 20px; */
}

.content-text-image .image-side,
.ce_rsce_text_image .image-side {
	order: 2;
	position: relative;
	overflow: hidden;
	border-radius: 7px;
	/*! box-shadow: 10px 10px 10px #80808054; */
}

.content-text-image .image-side img,
.ce_rsce_text_image .image-side img {
 width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
  animation: smoothZoom 8s ease-in-out infinite alternate;
}


.content-text-image .text-side h2,
.ce_rsce_text_image .text-side h2,
#wrapper .content-text-image .text-side h2,
#wrapper .ce_rsce_text_image .text-side h2 {
font-size: 26px;
  font-weight: 300;
  /*! color: #000; */
  margin-bottom: 20px;
  text-align: left !important;
  padding-left: 0;
  border: none;
  line-height: 40px;
  padding-top: 0px;
  margin-top: 0px;
}

.content-text-image .text-side p,
.ce_rsce_text_image .text-side p {
	line-height: 1.8;
	color: #333;
	margin-bottom: 15px;
}

.content-text-image .text-side .cta-link,
.ce_rsce_text_image .text-side .cta-link {
	display: inline-block;
	margin-top: 20px;
	padding: 12px 30px;
	background: #003c88;
	color: white;
	text-decoration: none;
	border-radius: 0;
	transition: all 0.3s ease;
}

.content-text-image .text-side .cta-link:hover,
.ce_rsce_text_image .text-side .cta-link:hover {
	background: #1976d2;
	transform: translateY(-2px);
}

/* ======================================
   4. KARTEN MIT ICONS
   ====================================== */
.content-cards-icons,
.ce_rsce_cards_icons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 40px;
	margin: 16px 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0px 0px 44px 0px;
	/*! background: #f8f9fa; */
}

.content-cards-icons .card-icon,
.ce_rsce_cards_icons .card-icon {
	text-align: center;
	padding: 38px 19px 10px;
	background: white;
	transition: all 0.3s ease;
	border-radius: 20px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}



.content-cards-icons .card-icon .icon,
.ce_rsce_cards_icons .card-icon .icon {
	/*! width: 162px; */
	/*! height: 120px; */
	margin: 0 auto 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	/*! border: 2px solid #003c88; */
	border-radius: 50%;
	position: relative;
	/*! font-size: 65px; */
}

.content-cards-icons .card-icon .icon svg,
.content-cards-icons .card-icon .icon img,
.ce_rsce_cards_icons .card-icon .icon svg,
.ce_rsce_cards_icons .card-icon .icon img,
.ce_rsce_cards_icons .card-icon .icon i {
	/*! width: 86px; */
	/*! height: 64px; */
	stroke: #003c88;
	fill: none;
}

.content-cards-icons .card-icon h3,
.ce_rsce_cards_icons .card-icon h3 {
	font-size: 1.2rem;
	font-weight: 400;
	color: #000;
	margin-bottom: 15px;
	text-align: left;
	line-height: 28px;
	text-align: center;
}

.content-cards-icons .card-icon p,
.ce_rsce_cards_icons .card-icon p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #343434;
	text-align: left;
	font-weight: 300;
}

/* ======================================
   5. EINFACHE KARTEN
   ====================================== */
.content-cards-simple,
.ce_rsce_cards_simple {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 30px;
	margin: 60px 0;
	margin-left: auto;
	margin-right: auto;
}

.content-cards-simple .card-simple,
.ce_rsce_cards_simple .card-simple {
	padding: 30px;
	background: white;
	border: 1px solid #e0e0e0;
	transition: all 0.3s ease;
}

.content-cards-simple .card-simple:hover,
.ce_rsce_cards_simple .card-simple:hover {
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	border-color: #003c88;
}

.content-cards-simple .card-simple h3,
.ce_rsce_cards_simple .card-simple h3 {
	font-size: 1.3rem;
	font-weight: 500;
	color: #003c88;
	margin-bottom: 15px;
	text-align: left;
}

.content-cards-simple .card-simple p,
.ce_rsce_cards_simple .card-simple p {
	font-size: 0.95rem;
	line-height: 1.7;
	color: #666;
	margin-bottom: 0;
}

/* ======================================
   RESPONSIVE ANPASSUNGEN
   ====================================== */
@media (max-width: 1024px) {
	.content-image-text,
	.content-text-image,
	.ce_rsce_image_text,
	.ce_rsce_text_image {
		gap: 40px;
	}

	.content-cards-icons,
	.content-cards-simple,
	.ce_rsce_cards_icons,
	.ce_rsce_cards_simple {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}

	.content-fullwidth h2,
	.ce_rsce_fullwidth h2 {
		font-size: 2rem;
	}
}

@media (max-width: 768px) {
	.content-image-text,
	.content-text-image,
	.ce_rsce_image_text,
	.ce_rsce_text_image {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.content-text-image .text-side,
	.ce_rsce_text_image .text-side {
		order: 1;
	}

	.content-text-image .image-side,
	.ce_rsce_text_image .image-side {
		order: 2;
	}

	.content-cards-icons,
	.content-cards-simple,
	.ce_rsce_cards_icons,
	.ce_rsce_cards_simple {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.content-fullwidth,
	.ce_rsce_fullwidth {
		padding: 60px 0px;
	}

	.content-fullwidth h2,
	.ce_rsce_fullwidth h2 {
		font-size: 1.8rem;
	}

	.content-fullwidth .button-group,
	.ce_rsce_fullwidth .button-group {
		flex-direction: column;
	}

	.content-fullwidth .btn-primary,
	.content-fullwidth .btn-secondary,
	.ce_rsce_fullwidth .btn-primary,
	.ce_rsce_fullwidth .btn-secondary {
		width: 100%;
		text-align: center;
	}

	.content-image-text .text-side h2,
	.content-text-image .text-side h2,
	.ce_rsce_image_text .text-side h2,
	.ce_rsce_text_image .text-side h2 {
		font-size: 1.6rem;
	}
}


/* ======================================
   IMAGE ZOOM ANIMATION
   ====================================== */

/* Sanfte Zoom-Animation für Bilder */
@keyframes smoothZoom {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.08);
	}
}

/* ======================================
   SCROLL ANIMATIONS
   ====================================== */

/* Initial state - versteckt */
.scroll-animate {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Karten initial versteckt */
.scroll-animate-card {
	opacity: 0;
	transform: translateY(20px) scale(0.95);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Animierter Zustand - sichtbar */
.scroll-animate.animate-in {
	opacity: 1;
	transform: translateY(0);
}

.scroll-animate-card.animate-in {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Spezifische Animationen für verschiedene Elemente */

/* Image-Text von links einblenden */
.content-image-text.scroll-animate,
.ce_rsce_image_text.scroll-animate {
	transform: translateX(-30px);
}

.content-image-text.animate-in,
.ce_rsce_image_text.animate-in {
	transform: translateX(0);
}

/* Text-Image von rechts einblenden */
.content-text-image.scroll-animate,
.ce_rsce_text_image.scroll-animate {
	transform: translateX(30px);
}

.content-text-image.animate-in,
.ce_rsce_text_image.animate-in {
	transform: translateX(0);
}

/* Fullwidth Section fade-in */
.content-fullwidth.scroll-animate,
.ce_rsce_fullwidth.scroll-animate {
	opacity: 0;
	transform: scale(0.98);
}

.content-fullwidth.animate-in,
.ce_rsce_fullwidth.animate-in {
	opacity: 1;
	transform: scale(1);
}

/* Hero-Bereiche: reines CSS-Einblenden per Keyframes (ohne JS).
   animation-fill-mode "both" versteckt die Kacheln schon ab dem
   allerersten Frame - dadurch kein Aufblitzen vor der Animation.
   Links blendet zuerst ein, rechts folgt kurz danach. */
@keyframes heroFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.content-hero-split .split-left {
	animation: heroFadeIn 0.6s ease-out both;
}
.content-hero-split .split-right {
	animation: heroFadeIn 0.6s ease-out 0.2s both;
}
.content-hero-stat .hero-stat-content {
	animation: heroFadeIn 0.6s ease-out both;
}
.content-hero-stat .hero-stat-box {
	animation: heroFadeIn 0.6s ease-out 0.25s both;
}

/* Reduzierte Animation für Nutzer mit motion-preference */
@media (prefers-reduced-motion: reduce) {
	.scroll-animate,
	.scroll-animate-card {
		transform: none;
		transition: opacity 0.3s ease-out;
	}

	.scroll-animate.animate-in,
	.scroll-animate-card.animate-in {
		transform: none;
	}

	.content-hero-split .split-left,
	.content-hero-split .split-right,
	.content-hero-stat .hero-stat-content,
	.content-hero-stat .hero-stat-box {
		animation: none;
	}

	/* Zoom-Animation für Barrierefreiheit deaktivieren */
	.content-image-text .image-side img,
	.ce_rsce_image_text .image-side img,
	.content-text-image .image-side img,
	.ce_rsce_text_image .image-side img {
		animation: none;
	}
}

/* ======================================
   6. QUOTE / ZITAT
   ====================================== */
.content-quote,
.ce_rsce_quote {
	margin: 45px auto;
	max-width: 658px;
	padding: 0 20px;
}

.content-quote .quote-block,
.ce_rsce_quote .quote-block {
	position: relative;
	margin: 0;
	padding: 0;
}

/* Quote Mark */
.content-quote .quote-mark,
.ce_rsce_quote .quote-mark {
	font-size: 120px;
	line-height: 0;
	color: #003c88;
	opacity: 0.15;
	font-family: Georgia, serif;
	position: absolute;
	top: 20px;
	left: -10px;
	z-index: 0;
}

/* Quote Text */
.content-quote .quote-text,
.ce_rsce_quote .quote-text {
	font-size: 1.5rem;
	line-height: 1.6;
	color: #000;
	font-weight: 300;
	font-style: italic;
	margin: 0 0 20px 0;
	padding: 30px 0 0 0;
	position: relative;
	z-index: 1;
}

/* Quote Footer */
.content-quote .quote-footer,
.ce_rsce_quote .quote-footer {
	font-style: normal;
	font-size: 1rem;
	color: #666;
	margin-top: 20px;
}

.content-quote .quote-author,
.ce_rsce_quote .quote-author {
	font-weight: 500;
	color: #003c88;
	font-style: normal;
}

.content-quote .quote-author::before,
.ce_rsce_quote .quote-author::before {
	content: "— ";
}

.content-quote .quote-role,
.ce_rsce_quote .quote-role {
	display: block;
	font-size: 0.9rem;
	color: #999;
	margin-top: 5px;
}

/* ======================================
   Quote Styles
   ====================================== */

/* Default Style - Zentriert */
.content-quote.quote-style-default,
.ce_rsce_quote.quote-style-default {
	text-align: center;
}

.quote-style-default .quote-mark {
	left: 50%;
	transform: translateX(-50%);
}

/* Left Style - Linksbündig */
.content-quote.quote-style-left,
.ce_rsce_quote.quote-style-left {
	text-align: left;
}

.quote-style-left .quote-text {
	padding-left: 40px;
	border-left: 4px solid #003c88;
}

.quote-style-left .quote-mark {
	display: none;
}

/* Highlight Style - Mit Hintergrund */
.content-quote.quote-style-highlight,
.ce_rsce_quote.quote-style-highlight {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	padding: 50px 40px;
	border-radius: 10px;
	text-align: center;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.quote-style-highlight .quote-text {
	font-size: 1.6rem;
	color: #003c88;
}

/* ======================================
   Responsive Anpassungen für Quotes
   ====================================== */
@media (max-width: 768px) {
	.content-quote .quote-text,
	.ce_rsce_quote .quote-text {
		font-size: 1.2rem;
	}

	.content-quote .quote-mark,
	.ce_rsce_quote .quote-mark {
		font-size: 80px;
		top: 10px;
	}

	.content-quote.quote-style-highlight,
	.ce_rsce_quote.quote-style-highlight {
		padding: 30px 20px;
	}

	.quote-style-left .quote-text {
		padding-left: 20px;
	}
}

/* ======================================
   7. KARTEN MIT BILD
   ====================================== */
.content-cards-image,
.ce_rsce_cards_image {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 30px;
	margin: 60px 0;
	margin-left: auto;
	margin-right: auto;
}

.content-cards-image .card-image,
.ce_rsce_cards_image .card-image {
	background: white;
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
}


/* Bild Container */
.content-cards-image .card-image-wrapper,
.ce_rsce_cards_image .card-image-wrapper {
	width: 100%;
	height: 220px;
	overflow: hidden;
	position: relative;
	background: #f5f5f5;
}

.content-cards-image .card-image-wrapper img,
.ce_rsce_cards_image .card-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.content-cards-image .card-image:hover .card-image-wrapper img,
.ce_rsce_cards_image .card-image:hover .card-image-wrapper img {
	transform: scale(1.08);
}

/* Card Content */
.content-cards-image .card-content,
.ce_rsce_cards_image .card-content {
	padding: 25px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.content-cards-image, .card-content a{font-weight:400;text-decoration:none}
.content-cards-image .card-content h3,
.ce_rsce_cards_image .card-content h3 {
	font-size: 1.3rem;
	font-weight: 300;
	color: #000;
	margin-bottom: 15px;
	line-height: 1.4;
	margin-top: 0px;
}

/* Verlinkter Titel sieht aus wie der unverlinkte, färbt sich beim Hover blau */
.content-cards-image .card-content h3 a,
.ce_rsce_cards_image .card-content h3 a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.content-cards-image .card-content h3 a:hover,
.ce_rsce_cards_image .card-content h3 a:hover {
	color: #003c88;
}

.content-cards-image .card-content p,
.ce_rsce_cards_image .card-content p {
	font-size: 0.95rem;
	line-height: 1.6;
	color: #666;
	margin-bottom: 20px;
	flex: 1;
	font-weight: 300;
}

/* Card Link */
.content-cards-image .card-link,
.ce_rsce_cards_image .card-link {
	display: inline-flex;
	align-items: center;
	color: #003c88;
	font-weight: 500;
	text-decoration: none;
	font-size: 0.95rem;
	transition: all 0.3s ease;
	margin-top: auto;
}

.content-cards-image .card-link:hover,
.ce_rsce_cards_image .card-link:hover {
	color: #1976d2;
	transform: translateX(5px);
}

.content-cards-image .card-link::after,
.ce_rsce_cards_image .card-link::after {
	content: '→';
	margin-left: 8px;
	transition: margin-left 0.3s ease;
}

.content-cards-image .card-link:hover::after,
.ce_rsce_cards_image .card-link:hover::after {
	margin-left: 12px;
}

/* ======================================
   Responsive Anpassungen für Image Cards
   ====================================== */
@media (max-width: 1024px) {
	.content-cards-image,
	.ce_rsce_cards_image {
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
	}
}

@media (max-width: 768px) {
	.content-cards-image,
	.ce_rsce_cards_image {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.content-cards-image .card-image-wrapper,
	.ce_rsce_cards_image .card-image-wrapper {
		height: 200px;
	}

	.content-cards-image .card-content,
	.ce_rsce_cards_image .card-content {
		padding: 20px;
	}
}

/* ----- Feste Spaltenanzahl (Feld "Karten pro Reihe") ----- */
/* Überschrift belegt immer die volle Breite des Grids */
.content-cards-image > h1, .ce_rsce_cards_image > h1,
.content-cards-image > h2, .ce_rsce_cards_image > h2,
.content-cards-image > h3, .ce_rsce_cards_image > h3,
.content-cards-image > h4, .ce_rsce_cards_image > h4 {
	grid-column: 1 / -1;
}

/* Verlinktes Bild füllt den Bild-Container komplett */
.content-cards-image .card-image-wrapper a,
.ce_rsce_cards_image .card-image-wrapper a {
	display: block;
	width: 100%;
	height: 100%;
}

.content-cards-image.cards-cols-2,
.ce_rsce_cards_image.cards-cols-2 {
	grid-template-columns: repeat(2, 1fr);
}
.content-cards-image.cards-cols-3,
.ce_rsce_cards_image.cards-cols-3 {
	grid-template-columns: repeat(3, 1fr);
}
.content-cards-image.cards-cols-4,
.ce_rsce_cards_image.cards-cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* Tablet: 3er/4er auf 2 Spalten reduzieren */
@media (max-width: 1024px) {
	.content-cards-image.cards-cols-3,
	.ce_rsce_cards_image.cards-cols-3,
	.content-cards-image.cards-cols-4,
	.ce_rsce_cards_image.cards-cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobil: immer 1 Spalte */
@media (max-width: 768px) {
	.content-cards-image.cards-cols-2,
	.ce_rsce_cards_image.cards-cols-2,
	.content-cards-image.cards-cols-3,
	.ce_rsce_cards_image.cards-cols-3,
	.content-cards-image.cards-cols-4,
	.ce_rsce_cards_image.cards-cols-4 {
		grid-template-columns: 1fr;
	}
}

/* ======================================
   8. EINSCHUB (KEINE LINIE)
   ====================================== */
.content-insert,
.ce_rsce_insert {
	margin: 0;
	padding: 0;
	border: none;
}

.content-insert .insert-content,
.ce_rsce_insert .insert-content {
	width: 100%;
	text-align: center;
	padding: 14px 0px;
}


.insert-content a{color:black;padding:20px 0px;display:inline-block;/*! background: #f2f2f2; */padding: 20px;border-radius: 11px;color: #003c88;}

/* Text Ausrichtung */
.content-insert.text-align-left,
.ce_rsce_insert.text-align-left {
	text-align: left;
}

.content-insert.text-align-center,
.ce_rsce_insert.text-align-center {
	text-align: center;
}

.content-insert.text-align-right,
.ce_rsce_insert.text-align-right {
	text-align: right;
}

/* Padding Optionen */
.content-insert.padding-none,
.ce_rsce_insert.padding-none {
	padding: 0;
}


.content-insert h2{font-size:30px !important;}

.content-insert.padding-small,
.ce_rsce_insert.padding-small {
	padding: 20px;
}

.content-insert.padding-medium,
.ce_rsce_insert.padding-medium {
	padding: 40px;
}

.content-insert.padding-large,
.ce_rsce_insert.padding-large {
	padding: 60px;
}

/* Überschriften im Einschub */
.content-insert h1,
.content-insert h2,
.content-insert h3,
.content-insert h4,
.ce_rsce_insert h1,
.ce_rsce_insert h2,
.ce_rsce_insert h3,
.ce_rsce_insert h4 {
	margin-top: 0;
}

/* Responsive Anpassungen für Einschub */
@media (max-width: 768px) {
	.content-insert.padding-medium,
	.ce_rsce_insert.padding-medium {
		padding: 30px 20px;
	}

	.content-insert.padding-large,
	.ce_rsce_insert.padding-large {
		padding: 40px 20px;
	}
}

/* ======================================
   TITEL-AUSRICHTUNG FÜR KARTEN
   ====================================== */

/* Cards Icons - Titel linksbündig */
.content-cards-icons.title-align-left .card-icon h3,
.ce_rsce_cards_icons.title-align-left .card-icon h3 {
	text-align: left !important;
}

/* Cards Icons - Titel zentriert (Standard) */
.content-cards-icons.title-align-center .card-icon h3,
.ce_rsce_cards_icons.title-align-center .card-icon h3 {
	text-align: center !important;
}

/* Cards Simple - Titel linksbündig (Standard) */
.content-cards-simple.title-align-left .card-simple h3,
.ce_rsce_cards_simple.title-align-left .card-simple h3 {
	text-align: left !important;
}

/* Cards Simple - Titel zentriert */
.content-cards-simple.title-align-center .card-simple h3,
.ce_rsce_cards_simple.title-align-center .card-simple h3 {
	text-align: center !important;
}

/* Cards Image - Titel linksbündig (Standard) */
.content-cards-image.title-align-left .card-image h3,
.ce_rsce_cards_image.title-align-left .card-image h3 {
	text-align: left !important;
}

/* Cards Image - Titel zentriert */
.content-cards-image.title-align-center .card-image h3,
.ce_rsce_cards_image.title-align-center .card-image h3 {
	text-align: center !important;
}

/* Auch Text ausrichten bei Zentriertem Titel */
.content-cards-icons.title-align-center .card-icon p,
.ce_rsce_cards_icons.title-align-center .card-icon p,
.content-cards-simple.title-align-center .card-simple p,
.ce_rsce_cards_simple.title-align-center .card-simple p,
.content-cards-image.title-align-center .card-image p,
.ce_rsce_cards_image.title-align-center .card-image p {
	text-align: center !important;
}

/* ======================================
   SPALTEN-AUFTEILUNG FÜR IMAGE-TEXT LAYOUTS
   ====================================== */

/* Image-Text: Bild größer (1.5 : 1) - Standard */
.content-image-text.ratio-image-larger,
.ce_rsce_image_text.ratio-image-larger {
	grid-template-columns: 1.5fr 1fr;
}

/* Image-Text: Gleich groß (1 : 1) */
.content-image-text.ratio-equal,
.ce_rsce_image_text.ratio-equal {
	grid-template-columns: 1fr 1fr;
}

/* Image-Text: Text größer (1 : 1.5) */
.content-image-text.ratio-text-larger,
.ce_rsce_image_text.ratio-text-larger {
	grid-template-columns: 1fr 1.5fr;
	margin: var(--spacing-xl) 0;
	background: #f7f0e8;
	border-radius: 15px;
	padding: 21px;
}

/* Text-Image: Text größer (1.5 : 1) - Standard */
.content-text-image.ratio-text-larger,
.ce_rsce_text_image.ratio-text-larger {
	grid-template-columns: 1.5fr 1fr;
	margin: var(--spacing-xl) 0;
	background: #f7f0e8;
	border-radius: 15px;
	padding: 21px;
}

/* Text-Image: Gleich groß (1 : 1) */
.content-text-image.ratio-equal,
.ce_rsce_text_image.ratio-equal {
	grid-template-columns: 1fr 1fr;
}

/* Text-Image: Bild größer (1 : 1.5) */
.content-text-image.ratio-image-larger,
.ce_rsce_text_image.ratio-image-larger {
	grid-template-columns: 1fr 1.5fr;
}

/* Responsive: Mobile immer 1 Spalte */
@media (max-width: 768px) {
	.content-image-text.ratio-image-larger,
	.content-image-text.ratio-equal,
	.content-image-text.ratio-text-larger,
	.ce_rsce_image_text.ratio-image-larger,
	.ce_rsce_image_text.ratio-equal,
	.ce_rsce_image_text.ratio-text-larger,
	.content-text-image.ratio-text-larger,
	.content-text-image.ratio-equal,
	.content-text-image.ratio-image-larger,
	.ce_rsce_text_image.ratio-text-larger,
	.ce_rsce_text_image.ratio-equal,
	.ce_rsce_text_image.ratio-image-larger {
		grid-template-columns: 1fr !important;
	}
}

/* ======================================
   HERO SPLIT (RSCE: rsce_hero_split)
   Markup: <section class="content-hero-split hero-split-variant-...">
   Randabfallender, 50:50 geteilter Hero-Bereich.
   ====================================== */

/* Section bricht aus dem 80%-.inside-Wrapper aus und wird vollbreit */
.content-hero-split {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 0;
    overflow: hidden;
    position: relative;
    background: transparent; /* Hintergründe liegen auf den Kacheln */
}

/* Innerer Wrapper – zwei Kacheln mit Lücke (wie content-cards-bg),
   align-items: stretch hält beide Kacheln immer gleich hoch */
.content-hero-split .hero-split-inner {
    max-width: 1800px;
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 24px;
    min-height: inherit;
    position: relative;
    margin-top: 20px;
}

/* Spalten = Kacheln mit abgerundeten Ecken; Inhalt vertikal zentriert */
.content-hero-split .split-col {
    position: relative;
    padding: 40px 50px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #013d7d;
}
.content-hero-split .split-right {
    background: #f5efe7;
}

/* Farbvarianten – wird vom Template per Klasse gesetzt */
.content-hero-split.hero-split-variant-default .split-left {

    background: url('../../files/images/Allgemein/b2bheader_wachstum.png') center center no-repeat, #013d7d;;

}
.content-hero-split.hero-split-variant-default .split-right {
    background: url('../../files/images/Allgemein/Weyergans_Double.jpg') right center / cover no-repeat, #f5efe7;
}
.content-hero-split.hero-split-variant-blue-white .split-left { background: #003c88; }
.content-hero-split.hero-split-variant-blue-white .split-right { background: #ffffff; }
.content-hero-split.hero-split-variant-dark-gold .split-left { background: #013d7d; }
.content-hero-split.hero-split-variant-dark-gold .split-right { background: #d4b56b; }
/* variant-custom: Inline-Styles aus dem Template färben die beiden Kacheln */

/* Textblock innerhalb einer Spalte */
.content-hero-split .split-col-content {
    position: relative;
    z-index: 2;
    max-width: 61%;
}

/* Eyebrow (kleine Überzeile in Gold) */
.content-hero-split .eyebrow {
    color: #d4b56b;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0 0 14px;
}
.content-hero-split.hero-split-variant-dark-gold .split-right .eyebrow { color: #013d7d; }

/* Headline – überschreibt globale h1/h2/content-headline-Borders */
.content-hero-split .split-headline {
    font-size: 2.6rem;
    line-height: 1.15;
    font-weight: 400;
    margin: 0 0 18px;
    border: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}
.content-hero-split .split-left  .split-headline { color: #ffffff !important; }
.content-hero-split .split-right .split-headline { color: #003c88 !important; }
.content-hero-split.hero-split-variant-dark-gold .split-right .split-headline { color: #013d7d !important; }

/* Lauftext (Wrapper-Div + TinyMCE-Paragraphen darin) */
.content-hero-split .split-text {
    line-height: 1.6;
    font-size: 1.05rem;
}
.content-hero-split .split-text p { margin: 0 0 12px; }
.content-hero-split .split-text p:last-child { margin-bottom: 0; }
.content-hero-split .split-left  .split-text,
.content-hero-split .split-left  .split-text p { color: #e2e2e2; }
.content-hero-split .split-right .split-text,
.content-hero-split .split-right .split-text p { color: #444; }
.content-hero-split.hero-split-variant-dark-gold .split-right .split-text,
.content-hero-split.hero-split-variant-dark-gold .split-right .split-text p { color: #013d7d; }

/* Action-Reihe (umschließt beide Buttons) */
.content-hero-split .split-actions {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

/* Primary-Button (links gold, rechts blau via .btn-blue) */
.content-hero-split .btn-primary {
    display: inline-block;
    padding: 11px 11px;
    background: #d4b56b;
    color: #013d7d !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease, transform 0.3s ease;
}
.content-hero-split .btn-primary:hover {
    background: #c2a35a;
    transform: translateY(-1px);
}
.content-hero-split .btn-primary.btn-blue {
    background: #003c88;
    color: #ffffff !important;
}
.content-hero-split .btn-primary.btn-blue:hover {
    background: #002a66;
}

/* Secondary-Button (Textlink mit Unterstrich) */
.content-hero-split .btn-secondary {
    display: inline-block;
    color: #d4b56b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
}
.content-hero-split .split-right .btn-secondary { color: #003c88; }
.content-hero-split.hero-split-variant-dark-gold .split-right .btn-secondary { color: #013d7d; }

/* ----- Bilder ----- */
/* Bild links – Standard: im Textfluss */
.content-hero-split .split-left .split-image {
    margin: 0 0 24px;
    max-width: 100%;
}
.content-hero-split .split-left .split-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Variante: Bild links ragt nach links über den Wrapper hinaus */
.content-hero-split .split-left .split-image-bleed-left {
    position: absolute;
    left: -8%;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    max-width: 320px;
    z-index: 1;
}

/* Bild rechts – Standard: im Textfluss */
.content-hero-split .split-right .split-image {
    margin: 0 0 24px;
    text-align: right;
}
.content-hero-split .split-right .split-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Variante: Bild füllt die rechte Kachel randabfallend (Ecken bleiben rund) */
.content-hero-split .split-right .split-image-bleed-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 1;
}
.content-hero-split .split-right .split-image-bleed-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Wenn das rechte Bild randabfallend ist, sitzt der Text mit Halbtransparenz darüber */
.content-hero-split .split-right.has-bleed-image .split-col-content {
    /*! background: linear-gradient(to right, rgba(245,239,231,0.92) 0%, rgba(245,239,231,0.7) 70%, rgba(245,239,231,0) 100%); */
    padding: 30px 30px 30px 0;
    border-radius: 4px;
}

/* ----- Responsive ----- */
/* Tablet */
@media (max-width: 1100px) {
    .content-hero-split .split-headline { font-size: 2.1rem; }
    .content-hero-split .split-col { padding: 44px 32px; }
    /* Textblock darf auf Tablets fast die ganze Kachel nutzen */
    .content-hero-split .split-col-content { max-width: 90%; }
    .content-hero-split .split-left .split-image-bleed-left {
        left: -4%;
        max-width: 240px;
    }
}

/* Mobile: Kacheln untereinander, jede behält ihren eigenen Hintergrund */
@media (max-width: 900px) {
    .content-hero-split .hero-split-inner {
        grid-template-columns: 1fr;
        width: 90%;
        min-height: 0;
        gap: 20px;
    }
    .content-hero-split .split-col,
    .content-hero-split .split-right {
        padding: 40px 28px;
    }
    .content-hero-split .split-col-content {
        max-width: 100%;
    }
    .content-hero-split .split-left .split-image-bleed-left {
        position: static;
        transform: none;
        margin: 0 auto 30px;
        max-width: 220px;
    }
    /* Auf Mobilgeraeten: Bild in der rechten Kachel komplett ausblenden
       (sowohl randabfallendes/eingebettetes Bild als auch das
       Hintergrundbild der Standard-Variante) */
    .content-hero-split .split-right .split-image {
        display: none;
    }
    .content-hero-split.hero-split-variant-default .split-right {
        background: #f5efe7;
    }
    .content-hero-split .split-right.has-bleed-image .split-col-content {
        background: none;
        padding: 0;
    }
    .content-hero-split .btn-secondary {
        margin-left: 0;
    }
}

/* ======================================
   FACTS BAR (RSCE: rsce_facts_bar)
   Horizontale Leiste mit Icon, Titel, Untertitel
   ====================================== */

.content-facts-bar {
    margin: 56px 0;
}

/* Mobil: deutlich weniger Abstand nach oben */
@media (max-width: 768px) {
    .content-facts-bar {
        margin-top: 16px;
    }
}

/* Mobil: Facts-Bar immer sofort sichtbar (keine Scroll-Animation) -
   sie liegt direkt unter dem Hero; animiert wirkt es, als kaeme nichts mehr */
@media (max-width: 900px) {
    .content-facts-bar.scroll-animate,
    .content-facts-bar .facts-bar-item.scroll-animate-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.content-facts-bar .facts-bar-headline {
    text-align: center;
    margin-bottom: 30px;
}

.content-facts-bar .facts-bar-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    align-items: start;
}

.content-facts-bar .facts-bar-item {
    text-align: center;
    padding: 16px 12px;
}

.content-facts-bar .facts-bar-icon {
    margin-bottom: 14px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-facts-bar .facts-bar-icon i {
    font-size: 2.2rem;
    line-height: 1;
}

.content-facts-bar .facts-bar-icon img {
    max-height: 42px;
    width: auto;
    display: block;
}

.content-facts-bar .facts-bar-title {
    font-size: 1.15rem;
    font-weight: 500;
    color: #003c88;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.25;
    margin-bottom: 8px;
}

.content-facts-bar .facts-bar-text {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #666;
}

.facts-bar-item.germanlinie {
    position: relative;
    padding-bottom: 16px;
}
.facts-bar-item.germanlinie::after {
    content: '';
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 0;
    height: 6px;
    background: linear-gradient(
        to right,
        #000000 0 33.33%,
        #DD0000 33.33% 66.66%,
        #FFCE00 66.66% 100%
    );
    border-radius: 2px;
}

/* Optionale Akzent-Modifier (per cssClass im Backend setzbar) */
.content-facts-bar .facts-bar-item.accent-gold .facts-bar-title { color: #d4b56b; }
.content-facts-bar .facts-bar-item.accent-gold .facts-bar-icon i { color: #d4b56b !important; }

.content-facts-bar .facts-bar-item.accent-dark .facts-bar-title { color: #013d7d; }
.content-facts-bar .facts-bar-item.accent-dark .facts-bar-icon i { color: #013d7d !important; }

/* Responsive */
@media (max-width: 900px) {
    .content-facts-bar .facts-bar-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 12px;
    }
}

@media (max-width: 500px) {
    .content-facts-bar .facts-bar-list {
        grid-template-columns: 1fr;
    }
    .content-facts-bar .facts-bar-item {
        padding: 12px 0;
    }
}

/* ======================================
   CARDS WITH BACKGROUND (RSCE: rsce_cards_bg)
   2 nebeneinanderliegende Karten mit eigenem Hintergrundbild
   ====================================== */

.content-cards-bg {
    margin: 40px 0;
}


.content-cards-bg .cards-bg-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    /*! padding: 20px; */
}

/* Einzelne Karte */
.content-cards-bg .card-bg {
    position: relative;
    min-height: 320px;
    padding: 0px 35px;
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 20px;
    /*! width: 100%; */
}

.card-bg.first{color:white !Important}

/* Inhalt nimmt nur die linke Hälfte ein, damit Bild rechts sichtbar bleibt */
.content-cards-bg .card-bg-content {
    position: relative;
    z-index: 2;
    max-width: 62%;
}

/* Eyebrow */
.content-cards-bg .card-bg-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0 0 18px;
    color: #d4b56b;
}

/* Listen mit Häkchen */
.content-cards-bg .card-bg-text {
    font-size: 1.05rem;
    line-height: 1.8;
    margin: 0 0 26px;
}
.content-cards-bg .card-bg-text ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.content-cards-bg .card-bg-text ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
}
.content-cards-bg .card-bg-text ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 3px;
    font-size: 0.9rem;
}
.content-cards-bg .card-bg-text p { margin: 0 0 12px; }

/* Button */
.content-cards-bg .card-bg-button {
    display: inline-block;
    padding: 16px 28px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease, transform 0.3s ease;
    font-size: 14px;
}
.content-cards-bg .card-bg-button:hover {
    transform: translateY(-1px);
}

/* ===== Dunkle Karte (Standard) – heller Text, goldener Button ===== */
.content-cards-bg .card-bg-dark {
    color: #ffffff;
}

.content-cards-bg .first p{color:white !Important}

.content-cards-bg .card-bg-dark::before {
    content: '';
    /*! position: absolute; */
    /*! inset: 0; */
    /*! background: linear-gradient(to right, rgba(0,26,77,0.85) 0%, rgba(0,26,77,0.45) 60%, rgba(0,26,77,0) 100%); */
    /*! z-index: 1; */
}
.content-cards-bg .card-bg-dark .card-bg-text { color: #f0f0f0; }
.content-cards-bg .card-bg-dark .card-bg-text ul li::before { color: #d4b56b; }
.content-cards-bg .card-bg-dark .card-bg-button {
    background: #d4b56b;
    color: #013d7d;
}
.content-cards-bg .card-bg-dark .card-bg-button:hover { background: #c2a35a; }

/* ===== Helle Karte – dunkler Text, blauer Button ===== */
.content-cards-bg .card-bg-light {
    color: #2b2b2b;
}
.content-cards-bg .card-bg-light::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(245,239,231,0.85) 0%, rgba(245,239,231,0.4) 60%, rgba(245,239,231,0) 100%);
    z-index: 1;
}
.content-cards-bg .card-bg-light .card-bg-eyebrow { color: #003c88; }
.content-cards-bg .card-bg-light .card-bg-text { color: #333; }
.content-cards-bg .card-bg-light .card-bg-text ul li::before { color: #003c88; }
.content-cards-bg .card-bg-light .card-bg-button {
    background: #003c88;
    color: #ffffff;
}
.content-cards-bg .card-bg-light .card-bg-button:hover { background: #002a66; }

/* ===== Responsive ===== */
@media (max-width: 1600px) {
    .content-cards-bg .cards-bg-list {
        grid-template-columns: 1fr;
    }
    .content-cards-bg .card-bg-content {
        max-width: 70%;
    }
}

@media (max-width: 600px) {
    .content-cards-bg .card-bg {
        padding: 32px 24px;
        min-height: 280px;
    }
    .content-cards-bg .card-bg-content {
        max-width: 100%;
    }
    /* Auf Mobile den Verlauf voll deckend machen, damit Text lesbar bleibt */
    .content-cards-bg .card-bg-dark::before {
        background: linear-gradient(to right, rgba(0,26,77,0.85) 0%, rgba(0,26,77,0.7) 100%);
    }
    .content-cards-bg .card-bg-light::before {
        background: linear-gradient(to right, rgba(245,239,231,0.9) 0%, rgba(245,239,231,0.75) 100%);
    }
}

/* ======================================
   PROCESS STEPS (RSCE: rsce_process_steps)
   3 oder 6 Schritte mit Icon im Kreis + Pfeile
   ====================================== */

.content-process-steps {
    margin: 86px 0;
}

.content-process-steps .process-steps-headline {
    /*! text-align: center; */
    /*! text-transform: uppercase; */
    /*! letter-spacing: 0.1em; */
    /*! font-weight: 500; */
    /*! color: #2b2b2b; */
    /*! margin: 0 0 30px; */
    /*! border: 0 !important; */
    /*! padding: 0 !important; */
}

/* Labels über den 2 Hälften (nur bei 6 Spalten) */
.content-process-steps .process-steps-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 24px;
    text-align: center;
}
.content-process-steps .process-steps-label-left,
.content-process-steps .process-steps-label-right {
    color: #d4b56b;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Step-Reihe */
.content-process-steps .process-steps-list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 5px;
    padding: 24px 10px;
    background: #f7f0e8;
    border-radius: 20px;
}

/* Einzelner Schritt */
.content-process-steps .process-step {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 0 8px;
}

/* Icon im Kreis */
.content-process-steps .process-step-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #fdfdfd;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.content-process-steps .process-step:hover .process-step-icon {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.content-process-steps .process-step-icon i {
    font-size: 2rem;
    line-height: 1;
}

/* Titel */
.content-process-steps .process-step-title {
    font-size: 1.05rem;
    font-weight: 500;
    color: #2b2b2b;
    margin: 0 0 8px;
    line-height: 1.3;
}

/* Beschreibung */
.content-process-steps .process-step-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #666;
}

/* Pfeil zwischen den Schritten */
.content-process-steps .process-step-arrow {
    flex: 0 0 auto;
    align-self: flex-start;
    padding-top: 4%;
    color: #000;
    font-size: 1.2rem;
}
.content-process-steps .process-step-arrow i {
    display: block;
}

/* ----- Zweigeteilt (6 Spalten): zwei Kästen statt einer Leiste ----- */
/* Äußeres Grid: 2 Kästen mit Lücke, stretch hält beide gleich hoch */
.content-process-steps .process-steps-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 24px;
    background: none;
    padding: 0;
    border-radius: 0;
}

/* Einzelner Kasten: links blau, rechts der bisherige Beige-Ton */
.content-process-steps .process-steps-group {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    padding: 28px 16px;
}
.content-process-steps .process-steps-group-left {
    background: #013d7d;
}
.content-process-steps .process-steps-group-right {
    background: #f7f0e8;
}

/* Label im Kasten (gold, zentriert) */
.content-process-steps .process-steps-group-label {
    text-align: center;
    color: #d4b56b;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 24px;
}

/* Step-Reihe innerhalb eines Kastens */
.content-process-steps .process-steps-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 5px;
    flex: 1;
}

/* Helle Schrift im blauen Kasten */
.content-process-steps .process-steps-group-left .process-step-title { color: #ffffff; }
.content-process-steps .process-steps-group-left .process-step-text { color: #e2e2e2; }
.content-process-steps .process-steps-group-left .process-step-arrow { color: #ffffff; }

/* ----- CTA-Button zentriert unter den Schritten ----- */
.content-process-steps .process-steps-cta {
    text-align: center;
    margin: 32px 0 0;
}
.content-process-steps .process-steps-cta-button {
    display: inline-block;
    padding: 14px 32px;
    background: #003c88;
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease, transform 0.3s ease;
}
.content-process-steps .process-steps-cta-button:hover {
    background: #1976d2;
    transform: translateY(-2px);
}

/* Icons im blauen Kasten immer blau – überschreibt die Inline-Farbe aus dem Backend */
.content-process-steps .process-steps-group-left .process-step-icon i {
    color: #003c88 !important;
}

/* ===== Responsive ===== */

/* 6-Spalten-Layout: ab mittlerer Breite Kästen untereinander */
@media (max-width: 1100px) {

	.process-step-arrow{display:none;}
    .content-process-steps .process-steps-split {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* 3-Spalten-Layout: ab schmaler Breite untereinander stapeln */
@media (max-width: 768px) {
    .content-process-steps.process-steps-cols-3 .process-steps-list {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .content-process-steps.process-steps-cols-3 .process-step {
        max-width: 360px;
        padding: 0;
    }
    /* Schritte innerhalb der beiden Kästen ebenfalls stapeln */
    .content-process-steps .process-steps-row {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .content-process-steps .process-steps-group .process-step {
        max-width: 360px;
        padding: 0;
    }
    /* Pfeile drehen sich nach unten */
    .content-process-steps.process-steps-cols-3 .process-step-arrow {
        padding-top: 0;
        transform: rotate(90deg);
    }
}

/* Kleinste Mobile: auch 6-Spalten-Variante stapelt komplett */
@media (max-width: 600px) {
    .content-process-steps.process-steps-cols-6 .process-steps-list {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .content-process-steps.process-steps-cols-6 .process-step {
        max-width: 360px;
        flex: 0 0 auto;
        padding: 0;
    }
    /* Pfeile drehen sich nach unten oder ausblenden – wir drehen */
    .content-process-steps.process-steps-cols-6 .process-step-arrow {
        padding-top: 0;
        transform: rotate(90deg);
    }
    /* Trenner bleibt horizontale Linie */
    .content-process-steps.process-steps-cols-6 .process-steps-divider {
        width: 60%;
        flex: 0 0 1px;
        margin: 12px auto;
    }
    /* Icon-Kreise etwas kleiner */
    .content-process-steps .process-step-icon {
        width: 72px;
        height: 72px;
    }
    .content-process-steps .process-step-icon i {
        font-size: 1.7rem;
    }
}

/* Sehr klein: Pfeile ganz weglassen */
@media (max-width: 420px) {
    .content-process-steps .process-step-arrow {
        display: none;
    }
}

/* ======================================
   HERO MIT KENNZAHL-BOX (RSCE: rsce_hero_stat)
   Markup: <section class="content-hero-stat hero-stat-overlay-...">
   Randabfallender Header mit Hintergrundbild, Text/Buttons links,
   Glas-Box mit Kennzahl (z. B. "+32%") rechts.
   ====================================== */

/* Section bricht aus dem 80%-.inside-Wrapper aus und wird vollbreit */
.content-hero-stat {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    background-color: #013d7d; /* Fallback + Fläche links neben dem Bild */
    background-size: cover;
    background-repeat: no-repeat;
}

/* Überlagerung für Textlesbarkeit – Variante wird vom Template per Klasse gesetzt */
.content-hero-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.content-hero-stat.hero-stat-overlay-gradient::before {
    background: linear-gradient(
        to right,
        rgba(1, 61, 125, 0.96) 0%,
        rgba(1, 61, 125, 0.82) 40%,
        rgba(1, 61, 125, 0.35) 68%,
        rgba(1, 61, 125, 0.12) 100%
    );
}
.content-hero-stat.hero-stat-overlay-dark::before {
    background: rgba(1, 61, 125, 0.6);
}
.content-hero-stat.hero-stat-overlay-none::before {
    display: none;
}

/* Innerer Wrapper – gleicher Raster wie der Rest der Seite (80% / max 1800px) */
.content-hero-stat .hero-stat-inner {
    position: relative;
    z-index: 2;
    max-width: 1800px;
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 40px;
    min-height: inherit;
}

/* ----- Textblock links ----- */
.content-hero-stat .hero-stat-content {
    max-width: 560px;
    padding: 70px 0;
}

/* Eyebrow (kleine Überzeile in Gold) */
.content-hero-stat .eyebrow {
    color: #d4b56b;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0 0 14px;
}

/* Headline – überschreibt globale h1/h2/content-headline-Borders */
.content-hero-stat .hero-stat-headline {
    font-size: 2.6rem;
    line-height: 1.15;
    font-weight: 400;
    color: #ffffff !important;
    margin: 0 0 18px;
    border: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* Lauftext */
.content-hero-stat .hero-stat-text,
.content-hero-stat .hero-stat-text p {
    color: #e2e2e2;
    line-height: 1.6;
    font-size: 1.05rem;
}
.content-hero-stat .hero-stat-text p { margin: 0 0 12px; }
.content-hero-stat .hero-stat-text p:last-child { margin-bottom: 0; }

/* Action-Reihe */
.content-hero-stat .hero-stat-actions {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
}

/* Primary-Button (gold) */
.content-hero-stat .btn-primary {
    display: inline-block;
    padding: 11px 18px;
    background: #d4b56b;
    color: #013d7d !important;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease, transform 0.3s ease;
}
.content-hero-stat .btn-primary:hover {
    background: #c2a35a;
    transform: translateY(-1px);
}

/* Outline-Button (weiß umrandet) */
.content-hero-stat .btn-outline {
    display: inline-block;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease, border-color 0.3s ease;
}
.content-hero-stat .btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
}

/* Textlink unterhalb der Buttons */
.content-hero-stat .hero-stat-textlink {
    margin: 20px 0 0;
}
.content-hero-stat .hero-stat-textlink a {
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}
.content-hero-stat .hero-stat-textlink a:hover {
    color: #d4b56b;
}

/* ----- Kennzahl-Box rechts (Glas-Optik) ----- */
.content-hero-stat .hero-stat-box {
    justify-self: end;
    align-self: center;
    max-width: 320px;
    padding: 30px 34px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    color: #ffffff;
    margin: 70px 0;
}
.content-hero-stat .hero-stat-value {
    font-size: 3rem;
    line-height: 1.1;
    font-weight: 500;
    margin-bottom: 12px;
}
.content-hero-stat .hero-stat-desc {
    font-size: 1rem;
    line-height: 1.45;
    color: #f0f0f0;
}
.content-hero-stat .hero-stat-footnote {
    margin-top: 16px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.65);
}

/* ----- Responsive ----- */
/* Tablet */
@media (max-width: 1100px) {
    .content-hero-stat .hero-stat-headline { font-size: 2.1rem; }
    .content-hero-stat .hero-stat-content { padding: 50px 0; }
    .content-hero-stat .hero-stat-box { margin: 50px 0; padding: 26px 28px; }
    .content-hero-stat .hero-stat-value { font-size: 2.5rem; }
}

/* Mobile: einspaltig, Box unter dem Text, Overlay flächig */
@media (max-width: 900px) {
    .content-hero-stat .hero-stat-inner {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .content-hero-stat.hero-stat-overlay-gradient::before {
        background: rgba(1, 61, 125, 0.78);
    }
    .content-hero-stat .hero-stat-content {
        max-width: 100%;
        padding: 44px 0 0;
    }
    .content-hero-stat .hero-stat-box {
        justify-self: start;
        margin: 30px 0 44px;
    }
}

/* ======================================
   REVIEWS CAROUSEL (RSCE: rsce_reviews)
   Karussell mit Rezensionen: 1 Karte pro Ansicht,
   Autoplay, Pfeile, Punkte, Wischen.
   Sterne blenden gestaffelt ein.
   ====================================== */

.content-reviews {
    margin: 86px 0;
}

.content-reviews .reviews-headline {
    text-align: center !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 36px;
}

/* Karussell-Rahmen – Pfeile werden hieran ausgerichtet */
.content-reviews .reviews-carousel {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 30px;
    touch-action: pan-y;
}

/* Sichtfenster schneidet die Slides ab */
.content-reviews .reviews-viewport {
    overflow: hidden;
}

/* Spur – wird per JS in 100%-Schritten verschoben, daher KEIN gap */
.content-reviews .reviews-track {
    display: flex;
    transition: transform 0.6s ease;
    will-change: transform;
}

.content-reviews .review-slide {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 10px 34px; /* Luft für den Kartenschatten */
}

/* Rezensions-Karte */
.content-reviews .review-card {
    max-width: 720px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 44px 50px 38px;
    text-align: center;
}

.content-reviews .review-quote-icon {
    font-size: 2rem;
    line-height: 1;
    color: #d4b56b;
    margin-bottom: 18px;
}

.content-reviews .review-text {
    font-size: 1.2rem;
    line-height: 1.7;
    font-weight: 300;
    font-style: italic;
    color: #333;
    margin: 0 0 22px;
}

.content-reviews .review-name {
    font-weight: 500;
    color: #003c88;
    margin: 0 0 4px;
}

.content-reviews .review-subline {
    font-size: 0.9rem;
    color: #999;
    margin: 0 0 18px;
}

/* Sterne */
.content-reviews .review-stars {
    color: #d4b56b;
    font-size: 1.15rem;
    letter-spacing: 4px;
}
.content-reviews .review-stars i.is-empty {
    color: #ddd6c9;
}

/* Sterne blenden auf dem aktiven Slide gestaffelt ein */
.content-reviews .review-stars i {
    opacity: 0;
}
.content-reviews .review-slide.active .review-stars i {
    animation: reviewStarIn 0.45s ease forwards;
}
.content-reviews .review-slide.active .review-stars i:nth-child(1) { animation-delay: 0.15s; }
.content-reviews .review-slide.active .review-stars i:nth-child(2) { animation-delay: 0.30s; }
.content-reviews .review-slide.active .review-stars i:nth-child(3) { animation-delay: 0.45s; }
.content-reviews .review-slide.active .review-stars i:nth-child(4) { animation-delay: 0.60s; }
.content-reviews .review-slide.active .review-stars i:nth-child(5) { animation-delay: 0.75s; }

@keyframes reviewStarIn {
    0%   { opacity: 0; transform: scale(0.3); }
    60%  { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

/* Pfeile */
.content-reviews .reviews-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e3e0d9;
    color: #003c88;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    z-index: 3;
}
.content-reviews .reviews-arrow:hover {
    background: #003c88;
    border-color: #003c88;
    color: #ffffff;
}
.content-reviews .reviews-prev { left: -8px; }
.content-reviews .reviews-next { right: -8px; }

/* Punkte */
.content-reviews .reviews-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}
.content-reviews .reviews-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: #d6cfc2;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}
.content-reviews .reviews-dot.active {
    background: #003c88;
    transform: scale(1.2);
}

/* Responsive */
@media (max-width: 768px) {
    .content-reviews .reviews-carousel { padding: 0 6px; }
    .content-reviews .review-card { padding: 30px 22px 28px; }
    .content-reviews .review-text { font-size: 1.05rem; }
    .content-reviews .reviews-arrow { width: 38px; height: 38px; }
    .content-reviews .reviews-prev { left: -2px; }
    .content-reviews .reviews-next { right: -2px; }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    .content-reviews .reviews-track { transition: none; }
    .content-reviews .review-stars i,
    .content-reviews .review-slide.active .review-stars i {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ======================================
   GERÄTE CAROUSEL (RSCE: rsce_devices)
   Karussell mit Geräte-Karten: 3 pro Ansicht,
   ab 1024px 2, mobil 1. Autoplay, Pfeile,
   Punkte, Wischen. Das JS liest den gap der
   Spur aus – gap daher immer in px angeben.
   ====================================== */

.content-devices {
    margin: 86px 0;
}

.content-devices .devices-headline {
    text-align: center !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 36px;
}

.content-devices .devices-carousel {
    position: relative;
    padding: 0 30px;
    touch-action: pan-y;
}

.content-devices .devices-viewport {
    overflow: hidden;
}

.content-devices .devices-track {
    display: flex;
    gap: 24px;
    transition: transform 0.6s ease;
    will-change: transform;
}

/* 3 Karten pro Ansicht: Breite = (100% − 2 × gap) / 3 */
.content-devices .device-slide {
    flex: 0 0 calc((100% - 48px) / 3);
    max-width: calc((100% - 48px) / 3);
    box-sizing: border-box;
    padding-bottom: 16px; /* Luft für den Kartenschatten */
}

/* Geräte-Karte – alle Karten gleich hoch, Bild an der Unterkante */
.content-devices .device-card {
    height: 100%;
    box-sizing: border-box;
    background: #f7f0e8;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 26px 26px 22px;
    display: flex;
    flex-direction: column;
}

.content-devices .device-title {
    font-size: 1.15rem;
    font-weight: 500;
    color: #003c88;
    line-height: 1.35;
    margin: 0 0 12px;
}

.content-devices .device-text {
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 300;
    color: #666;
    margin: 0 0 20px;
    flex: 1; /* schiebt das Bild an die Kartenunterkante */
}

.content-devices .device-image {
    margin: auto 0 0;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
}
.content-devices .device-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.content-devices .device-card:hover .device-image img {
    transform: scale(1.06);
}

/* Pfeile */
.content-devices .devices-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e3e0d9;
    color: #003c88;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    z-index: 3;
}
.content-devices .devices-arrow:hover {
    background: #003c88;
    border-color: #003c88;
    color: #ffffff;
}
.content-devices .devices-prev { left: -8px; }
.content-devices .devices-next { right: -8px; }

/* Punkte (werden vom JS erzeugt) */
.content-devices .devices-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}
.content-devices .devices-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: #d6cfc2;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}
.content-devices .devices-dot.active {
    background: #003c88;
    transform: scale(1.2);
}

/* Responsive: 2 Karten pro Ansicht */
@media (max-width: 1024px) {
    .content-devices .device-slide {
        flex: 0 0 calc((100% - 24px) / 2);
        max-width: calc((100% - 24px) / 2);
    }
}

/* Responsive: 1 Karte pro Ansicht */
@media (max-width: 700px) {
    .content-devices .devices-carousel { padding: 0 6px; }
    .content-devices .device-slide {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .content-devices .devices-arrow { width: 38px; height: 38px; }
    .content-devices .devices-prev { left: -2px; }
    .content-devices .devices-next { right: -2px; }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    .content-devices .devices-track { transition: none; }
    .content-devices .device-image img { transition: none; }
    .content-devices .device-card:hover .device-image img { transform: none; }
}

/* ======================================
   HIDEMOBILE-UTILITY
   Klasse "hidemobile" im Backend-Feld "CSS-Klasse" einer Kachel/
   Karte vergeben -> Element wird unterhalb von 1300px ausgeblendet.
   Die :has()-Regeln stellen den jeweiligen Container auf eine Spalte
   um, damit die verbleibende Seite die volle Breite einnimmt.
   ====================================== */

@media (max-width: 1300px) {
    .hidemobile {
        display: none !important;
    }

    /* Hero Split: verbleibende Kachel wird 100% breit */
    .content-hero-split .hero-split-inner:has(> .split-col.hidemobile) {
        grid-template-columns: 1fr;
    }

    /* Hero mit Kennzahl-Box: Inhalt nutzt volle Breite, wenn die Box versteckt ist */
    .content-hero-stat .hero-stat-inner:has(> .hidemobile) {
        grid-template-columns: 1fr;
    }

    /* Prozess-Schritte: verbleibender Kasten wird 100% breit */
    .content-process-steps .process-steps-split:has(> .process-steps-group.hidemobile) {
        grid-template-columns: 1fr;
    }

    /* Karten mit Bild: uebrige Karten fuellen die Reihe wieder auf */
    .content-cards-image:has(> .card-image.hidemobile),
    .ce_rsce_cards_image:has(> .card-image.hidemobile) {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    /* Cards mit Hintergrund: verbleibende Karte wird 100% breit */
    .content-cards-bg .cards-bg-list:has(> .card-bg.hidemobile) {
        grid-template-columns: 1fr;
    }
}

/* ======================================
   SCROLL-DOWN-HINWEIS (Hero Split)
   Animierter Pfeil unter den Hero-Kacheln,
   nur auf kleinen Bildschirmen sichtbar.
   ====================================== */

.content-hero-split .hero-scroll-down {
    display: none; /* wird erst ab 900px eingeblendet */
    width: 44px;
    height: 44px;
    /* unten genug Abstand, damit die 8px-Wipp-Animation nicht vom
       overflow:hidden der Section abgeschnitten wird */
    margin: 18px auto 16px;
    border-radius: 50%;
    border: 1px solid #b9c3d8;
    background: #ffffff;
    color: #013d7d;
    font-size: 1rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    animation: scrollHintBounce 2s ease-in-out infinite;
}
.content-hero-split .hero-scroll-down:hover {
    background: #013d7d;
    border-color: #013d7d;
    color: #ffffff;
}

@keyframes scrollHintBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

@media (max-width: 900px) {
    /* Mobil: fixed unten rechts, schwebt über dem Inhalt */
    .content-hero-split .hero-scroll-down {
        display: flex;
        position: fixed;
        right: 16px;
        bottom: 16px;
        margin: 0;
        z-index: 998;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    /* Sobald etwas gescrollt wurde, blendet das Icon aus (JS setzt die Klasse) */
    .content-hero-split .hero-scroll-down.is-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-hero-split .hero-scroll-down {
        animation: none;
    }
}


@media (max-width: 768px) {
    .content-cards-bg .card-bg {
        background-image: none !important;
        background-color: #f7f0e8;
    }
    .content-cards-bg .card-bg-dark {
        color: #2b2b2b;
    }
    .content-cards-bg .card-bg-dark .card-bg-text {
        color: #444;
    }
    .content-cards-bg .first p {
        color: #444 !important;
    }
}