.rsce-ti {
	--rsce-ti-max-width: 1200px;
	--rsce-ti-text-color: #34404a;
	--rsce-ti-muted-color: #61717e;
	--rsce-ti-line-color: #aa8d54;
	--rsce-ti-button-bg: #4b4a83;
	--rsce-ti-button-bg-hover: #4b4a83bd;
	--rsce-ti-button-color: #fff;
	--rsce-ti-bg-lightbrown: #f8ecde;
	--rsce-ti-bg-brown: #c7b19a;
	--rsce-ti-bg-lightviolett: #a4a3cd;

	color: var(--rsce-ti-text-color);
}

.rsce-ti,
.rsce-ti * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------
	Haupt-Items
------------------------------------------------------------ */

.rsce-ti__item {
	background: var(--rsce-ti-section-bg, #f7f2e8);
	overflow: hidden;
}

.rsce-ti__inner {
	width: min(calc(100% - 2rem), var(--rsce-ti-max-width));
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
	gap: clamp(2.5rem, 6vw, 6.5rem);
	align-items: center;
	padding-block: clamp(4.5rem, 8vw, 8rem);
}

.rsce-ti__item--spacing-small .rsce-ti__inner {
	padding-block: clamp(1.5rem, 2.5vw, 2.5rem);
}

.rsce-ti__item--spacing-compact .rsce-ti__inner {
	padding-block: clamp(3rem, 5vw, 5rem);
}

.rsce-ti__item--spacing-large .rsce-ti__inner {
	padding-block: clamp(6rem, 10vw, 10rem);
}

.rsce-ti__content {
	max-width: 46rem;
	position: relative;
	z-index: 2;
}

.rsce-ti__headline {
	margin: 0;
	color: var(--rsce-ti-text-color);
	font-size: clamp(1.65rem, 3vw, 2rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.rsce-ti__item--headline-line .rsce-ti__headline::after {
	content: "";
	display: block;
	width: 4.2rem;
	height: 1px;
	margin-top: 1rem;
	background: var(--rsce-ti-line-color);
}

.rsce-ti__overline {
	margin: 0 0 0.75rem;
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rsce-ti-muted-color);
}

.rsce-ti__headline + .rsce-ti__overline {
	margin-top: 1rem;
	margin-bottom: 0;
}

.rsce-ti__text {
	margin-top: clamp(1.35rem, 2vw, 2rem);
	font-size: clamp(1rem, 1.15vw, 1.13rem);
	line-height: 1.78;
	color: var(--rsce-ti-text-color);
}

.rsce-ti__text > *:first-child {
	margin-top: 0;
}

.rsce-ti__text > *:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------
	Button Haupt-Item
------------------------------------------------------------ */

.rsce-ti__button-wrap {
	margin: 2rem 0 0;
}

.rsce-ti__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.8rem 1.45rem;
	border-radius: 10px;
	background: var(--rsce-ti-button-bg);
	color: var(--rsce-ti-button-color);
	text-decoration: none;
	font-weight: 700;
	line-height: 1.2;
	transition:
		background-color 0.25s ease,
		transform 0.25s ease;
}

.rsce-ti__button:hover,
.rsce-ti__button:focus-visible {
	background: var(--rsce-ti-button-bg-hover);
	color: var(--rsce-ti-button-color);
	transform: translateY(-2px);
}

/* ------------------------------------------------------------
	Hauptbild
------------------------------------------------------------ */

.rsce-ti__media {
	position: relative;
	min-width: 0;
	padding: clamp(1.25rem, 2.5vw, 2.5rem);
}

.rsce-ti__media::before {
	content: "";
	position: absolute;
	z-index: 0;
	background: var(--rsce-ti-image-bg, #dadae9);
	pointer-events: none;
}

.rsce-ti__item--image-right .rsce-ti__media::before {
	inset: -2.5rem -8vw -2.5rem 30%;
}

.rsce-ti__item--image-left .rsce-ti__media::before {
	inset: -2.5rem 30% -2.5rem -8vw;
}

.rsce-ti__picture {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	margin: 0;
	overflow: hidden;
	background: #ddd;
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.08);
}

/* Wichtig für sichtbares CSS-Cropping:
   picture/img werden absolut in den festen Bildrahmen gelegt. */
.rsce-ti .rsce-ti__picture > picture,
.rsce-ti .rsce-ti__picture > img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.rsce-ti .rsce-ti__picture img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: var(--rsce-ti-object-position, center center);
}

/* Hauptbild Formate */

.rsce-ti__item--ratio-4-3 .rsce-ti__picture {
	aspect-ratio: 4 / 3;
}

.rsce-ti__item--ratio-3-2 .rsce-ti__picture {
	aspect-ratio: 3 / 2;
}

.rsce-ti__item--ratio-16-9 .rsce-ti__picture {
	aspect-ratio: 16 / 9;
}

.rsce-ti__item--ratio-1-1 .rsce-ti__picture {
	aspect-ratio: 1 / 1;
}

/* Auto = kein CSS-Cropping */
.rsce-ti__item--ratio-auto .rsce-ti__picture {
	aspect-ratio: auto;
}

.rsce-ti__item--ratio-auto .rsce-ti__picture > picture,
.rsce-ti__item--ratio-auto .rsce-ti__picture > img {
	position: static;
	inset: auto;
	width: 100%;
	height: auto;
}

.rsce-ti__item--ratio-auto .rsce-ti__picture img {
	width: 100% !important;
	height: auto !important;
	object-fit: contain;
}

/* ------------------------------------------------------------
	Desktop Positionierung HauptItems
------------------------------------------------------------ */

.rsce-ti__item--image-left .rsce-ti__media {
	grid-column: 1;
	grid-row: 1;
}

.rsce-ti__item--image-left .rsce-ti__content {
	grid-column: 2;
	grid-row: 1;
}

.rsce-ti__item--image-right .rsce-ti__content {
	grid-column: 1;
	grid-row: 1;
}

.rsce-ti__item--image-right .rsce-ti__media {
	grid-column: 2;
	grid-row: 1;
}

/* HauptItem ohne Bild: Text breiter darstellen */
.rsce-ti__item--no-image .rsce-ti__inner {
	grid-template-columns: minmax(0, 60rem);
	justify-content: center;
}

.rsce-ti__item--no-image .rsce-ti__content {
	max-width: 60rem;
	width: 100%;
}

.blog-news .rsce-ti__item--no-image .rsce-ti__inner {
	grid-template-columns: minmax(0, 75rem);
	justify-content: center;
}

.blog-news .rsce-ti__item--no-image .rsce-ti__content {
	max-width: 75rem;
	width: 100%;
}
.schlafgeschichten .rsce-ti__item--no-image .rsce-ti__inner {
	grid-template-columns: minmax(0, 75rem);
	justify-content: center;
}


.schlafgeschichten .rsce-ti__item--no-image .rsce-ti__content {
	max-width: 75rem;
	width: 100%;
}
/* ------------------------------------------------------------
	SubItems / Zusatz Bild-Text-Blöcke
------------------------------------------------------------ */

.rsce-ti__subitems {
	margin-top: clamp(2rem, 4vw, 3.5rem);
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.rsce-ti__subitem {
	display: grid;
	grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2rem);
	align-items: center;
}

.rsce-ti__subitem--image-right {
	grid-template-columns: minmax(0, 1fr) minmax(120px, 0.42fr);
}

.rsce-ti__subitem--image-right .rsce-ti__subitem-image {
	grid-column: 2;
	grid-row: 1;
}

.rsce-ti__subitem--image-right .rsce-ti__subitem-content {
	grid-column: 1;
	grid-row: 1;
}

.rsce-ti__subitem-image {
	position: relative;
	margin: 0;
	padding: 0.75rem;
	background: var(--rsce-ti-subimage-bg, #e4decc);
	overflow: hidden;
}

/* Innerer Cropping-Rahmen trotz Padding */
.rsce-ti__subitem-image > picture,
.rsce-ti__subitem-image > img {
	position: absolute;
	inset: 0.75rem;
	display: block;
	width: calc(100% - 1.5rem);
	height: calc(100% - 1.5rem);
}

.rsce-ti .rsce-ti__subitem-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	object-position: var(--rsce-ti-subobject-position, center center);
}

/* SubItem Bildformate */

.rsce-ti__subitem--ratio-4-3 .rsce-ti__subitem-image {
	aspect-ratio: 4 / 3;
}

.rsce-ti__subitem--ratio-3-2 .rsce-ti__subitem-image {
	aspect-ratio: 3 / 2;
}

.rsce-ti__subitem--ratio-16-9 .rsce-ti__subitem-image {
	aspect-ratio: 16 / 9;
}

.rsce-ti__subitem--ratio-1-1 .rsce-ti__subitem-image {
	aspect-ratio: 1 / 1;
}

/* Auto = kein CSS-Cropping bei SubItems */
.rsce-ti__subitem--ratio-auto .rsce-ti__subitem-image {
	aspect-ratio: auto;
}

.rsce-ti__subitem--ratio-auto .rsce-ti__subitem-image > picture,
.rsce-ti__subitem--ratio-auto .rsce-ti__subitem-image > img {
	position: static;
	inset: auto;
	width: 100%;
	height: auto;
}

.rsce-ti__subitem--ratio-auto .rsce-ti__subitem-image img {
	width: 100% !important;
	height: auto !important;
	object-fit: contain;
}

/* SubItem ohne Bild: Text über volle Breite */

.rsce-ti__subitem--no-image,
.rsce-ti__subitem--no-image.rsce-ti__subitem--image-right {
	grid-template-columns: 1fr;
}

.rsce-ti__subitem--no-image .rsce-ti__subitem-content {
	grid-column: 1 / -1;
	grid-row: auto;
	max-width: none;
}

.rsce-ti__subitem--no-image .rsce-ti__subitem-image {
	display: none;
}

.rsce-ti__subitem-headline {
	margin: 0 0 0.75rem;
	font-size: clamp(1.15rem, 1.8vw, 1.45rem);
	line-height: 1.25;
	color: var(--rsce-ti-text-color);
}

.rsce-ti__subitem-overline {
	margin: 0 0 0.75rem;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rsce-ti-muted-color);
}

.rsce-ti__subitem-headline + .rsce-ti__subitem-overline {
	margin-top: -0.25rem;
}

.rsce-ti__subitem-text {
	font-size: 0.98rem;
	line-height: 1.65;
	color: var(--rsce-ti-text-color);
}

.rsce-ti__subitem-text > *:first-child {
	margin-top: 0;
}

.rsce-ti__subitem-text > *:last-child {
	margin-bottom: 0;
}

/* Button SubItem */

.rsce-ti__subitem-button-wrap {
	margin: 1.35rem 0 0;
}

.rsce-ti__subitem-button,.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.65rem;
	padding: 0.68rem 1.2rem;
	border-radius: 10px;
	background: var(--rsce-ti-button-bg);
	color: var(--rsce-ti-button-color);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.2;
	transition:
		background-color 0.25s ease,
		transform 0.25s ease;
}

.rsce-ti__subitem-button:hover,
.rsce-ti__subitem-button:focus-visible {
	background: var(--rsce-ti-button-bg-hover);
	color: var(--rsce-ti-button-color);
	transform: translateY(-2px);
}

/* ------------------------------------------------------------
	Fade-up Effekt
------------------------------------------------------------ */

.js .rsce-ti--animate [data-rsce-ti-reveal] {
	opacity: 0;
	transform: translateY(2.5rem);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
	transition-delay: var(--rsce-ti-delay, 0ms);
}

.js .rsce-ti--animate [data-rsce-ti-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ------------------------------------------------------------
	Tablet / Mobile HauptItems
------------------------------------------------------------ */

@media (max-width: 900px) {
	.rsce-ti__inner {
		grid-template-columns: 1fr;
		gap: clamp(2rem, 7vw, 4rem);
		padding-block: clamp(3.5rem, 10vw, 6rem);
	}

	/* Desktop-Grid-Positionen mobil komplett zurücksetzen */
	.rsce-ti__item--image-left .rsce-ti__content,
	.rsce-ti__item--image-right .rsce-ti__content,
	.rsce-ti__item--image-left .rsce-ti__media,
	.rsce-ti__item--image-right .rsce-ti__media {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.rsce-ti__item--mobile-textFirst .rsce-ti__content {
		order: 1;
	}

	.rsce-ti__item--mobile-textFirst .rsce-ti__media {
		order: 2;
	}

	.rsce-ti__item--mobile-imageFirst .rsce-ti__media {
		order: 1;
	}

	.rsce-ti__item--mobile-imageFirst .rsce-ti__content {
		order: 2;
	}

	.rsce-ti__content {
		max-width: none;
		width: 100%;
	}

	.rsce-ti__media {
		width: 100%;
		padding: clamp(1rem, 5vw, 2rem);
	}

	.rsce-ti__item--image-right .rsce-ti__media::before,
	.rsce-ti__item--image-left .rsce-ti__media::before {
		inset: 0 -1rem 0 22%;
	}

	.rsce-ti__item--image-left .rsce-ti__media::before {
		inset: 0 22% 0 -1rem;
	}
}

/* ------------------------------------------------------------
	Mobile SubItems
------------------------------------------------------------ */

@media (max-width: 700px) {
	.rsce-ti__subitem,
	.rsce-ti__subitem--image-right {
		grid-template-columns: 1fr;
	}

	.rsce-ti__subitem--image-left .rsce-ti__subitem-image,
	.rsce-ti__subitem--image-right .rsce-ti__subitem-image,
	.rsce-ti__subitem--image-left .rsce-ti__subitem-content,
	.rsce-ti__subitem--image-right .rsce-ti__subitem-content {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.rsce-ti__subitem--mobile-imageFirst .rsce-ti__subitem-image {
		order: 1;
	}

	.rsce-ti__subitem--mobile-imageFirst .rsce-ti__subitem-content {
		order: 2;
	}

	.rsce-ti__subitem--mobile-textFirst .rsce-ti__subitem-content {
		order: 1;
	}

	.rsce-ti__subitem--mobile-textFirst .rsce-ti__subitem-image {
		order: 2;
	}

	.rsce-ti__subitem--no-image .rsce-ti__subitem-content {
		order: 1;
	}
}

/* ------------------------------------------------------------
	Kleine Smartphones
------------------------------------------------------------ */

@media (max-width: 560px) {
	.rsce-ti__inner {
		width: min(calc(100% - 1.25rem), var(--rsce-ti-max-width));
	}

	.rsce-ti__headline {
		font-size: clamp(1.65rem, 8vw, 2rem);
	}

	.rsce-ti__text {
		font-size: 1rem;
		line-height: 1.68;
	}

	.rsce-ti__button,
	.rsce-ti__subitem-button {
		width: 100%;
	}
}

/* ------------------------------------------------------------
	Bewegung reduzieren
------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.js .rsce-ti--animate [data-rsce-ti-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.rsce-ti__button,
	.rsce-ti__subitem-button {
		transition: none;
	}
}

/* ------------------------------------------------------------
	Automatische Silbentrennung
------------------------------------------------------------ */

.rsce-ti__text,
.rsce-ti__subitem-text {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
	word-break: normal;
}

/* Headlines nur auf kleineren Screens trennen, damit Desktop ruhiger bleibt */
@media (max-width: 700px) {
	.rsce-ti__headline,
	.rsce-ti__subitem-headline {
		-webkit-hyphens: auto;
		hyphens: auto;
		overflow-wrap: break-word;
		word-break: normal;
	}
}

/* ==========================================================================
   RSCE Text/Bild Liste: Nur-Text-Abschnitte steuerbar machen
   Wichtig: Dieser Patch muss ganz am Ende der CSS-Datei stehen.
   ========================================================================== */

/* Grundwerte für reine Textabschnitte */
.ce_rsce_text_bild_liste .rsce-ti__item--no-image,
.ce_rsce_text_bild_liste .rsce-ti__item--text-only {
	--rsce-ti-text-only-width: 58rem;
	--rsce-ti-text-only-padding: clamp(2.75rem, 5vw, 4.75rem);
}

/* Textbreite: schmal */
.ce_rsce_text_bild_liste .rsce-ti__item--text-width-narrow {
	--rsce-ti-text-only-width: 44rem;
}

/* Textbreite: normal */
.ce_rsce_text_bild_liste .rsce-ti__item--text-width-normal {
	--rsce-ti-text-only-width: 58rem;
}

/* Textbreite: breit */
.ce_rsce_text_bild_liste .rsce-ti__item--text-width-wide {
	--rsce-ti-text-only-width: 66rem;
}

/* Abstand: klein */
.ce_rsce_text_bild_liste .rsce-ti__item--spacing-small.rsce-ti__item--no-image,
.ce_rsce_text_bild_liste .rsce-ti__item--spacing-small.rsce-ti__item--text-only {
	--rsce-ti-text-only-padding: clamp(1.5rem, 2.5vw, 2.5rem);
}

/* Abstand: kompakt */
.ce_rsce_text_bild_liste .rsce-ti__item--spacing-compact.rsce-ti__item--no-image,
.ce_rsce_text_bild_liste .rsce-ti__item--spacing-compact.rsce-ti__item--text-only {
	--rsce-ti-text-only-padding: clamp(2rem, 4vw, 3.5rem);
}

/* Abstand: normal */
.ce_rsce_text_bild_liste .rsce-ti__item--spacing-normal.rsce-ti__item--no-image,
.ce_rsce_text_bild_liste .rsce-ti__item--spacing-normal.rsce-ti__item--text-only {
	--rsce-ti-text-only-padding: clamp(2.75rem, 5vw, 4.75rem);
}

/* Abstand: groß */
.ce_rsce_text_bild_liste .rsce-ti__item--spacing-large.rsce-ti__item--no-image,
.ce_rsce_text_bild_liste .rsce-ti__item--spacing-large.rsce-ti__item--text-only {
	--rsce-ti-text-only-padding: clamp(4.5rem, 8vw, 7rem);
}

/* Nur-Text-Layout anwenden */
.ce_rsce_text_bild_liste .rsce-ti__item--no-image .rsce-ti__inner,
.ce_rsce_text_bild_liste .rsce-ti__item--text-only .rsce-ti__inner {
	grid-template-columns: minmax(0, var(--rsce-ti-text-only-width));
	justify-content: center;
	width: min(calc(100% - 3rem), var(--rsce-ti-max-width));
	padding-block: var(--rsce-ti-text-only-padding);
}

.ce_rsce_text_bild_liste .rsce-ti__item--no-image .rsce-ti__content,
.ce_rsce_text_bild_liste .rsce-ti__item--text-only .rsce-ti__content {
	max-width: var(--rsce-ti-text-only-width);
	width: 100%;
	margin-inline: auto;
}

/* Zwei reine Textblöcke direkt hintereinander kompakter */
.ce_rsce_text_bild_liste .rsce-ti__item--no-image + .rsce-ti__item--no-image .rsce-ti__inner,
.ce_rsce_text_bild_liste .rsce-ti__item--text-only + .rsce-ti__item--text-only .rsce-ti__inner,
.ce_rsce_text_bild_liste .rsce-ti__item--no-image + .rsce-ti__item--text-only .rsce-ti__inner,
.ce_rsce_text_bild_liste .rsce-ti__item--text-only + .rsce-ti__item--no-image .rsce-ti__inner {
	padding-top: clamp(1rem, 2.5vw, 2rem);
}

/* Abstand zwischen Headline und Text bei Nur-Text etwas kompakter */
.ce_rsce_text_bild_liste .rsce-ti__item--no-image .rsce-ti__text,
.ce_rsce_text_bild_liste .rsce-ti__item--text-only .rsce-ti__text {
	margin-top: clamp(1rem, 1.6vw, 1.35rem);
}

/* RSCE-Headline gegen globale .schlafgeschichten h2 Regeln absichern */
.ce_rsce_text_bild_liste .rsce-ti .rsce-ti__headline {
	margin: 0;
}

/* Unter 1200px etwas ruhiger */
@media (max-width: 1200px) {
	.ce_rsce_text_bild_liste .rsce-ti__item--text-width-narrow {
		--rsce-ti-text-only-width: 42rem;
	}

	.ce_rsce_text_bild_liste .rsce-ti__item--text-width-normal {
		--rsce-ti-text-only-width: 54rem;
	}

	.ce_rsce_text_bild_liste .rsce-ti__item--text-width-wide {
		--rsce-ti-text-only-width: 60rem;
	}
}

/* Mobile: alle Breiten auf volle verfügbare Spalte */
@media (max-width: 700px) {
	.ce_rsce_text_bild_liste .rsce-ti__item--text-width-narrow,
	.ce_rsce_text_bild_liste .rsce-ti__item--text-width-normal,
	.ce_rsce_text_bild_liste .rsce-ti__item--text-width-wide {
		--rsce-ti-text-only-width: 100%;
	}

	.ce_rsce_text_bild_liste .rsce-ti__item--no-image .rsce-ti__inner,
	.ce_rsce_text_bild_liste .rsce-ti__item--text-only .rsce-ti__inner {
		grid-template-columns: 1fr;
		width: min(calc(100% - 2rem), var(--rsce-ti-max-width));
	}
}