/**
 * Case Study single page styles
 */

.case-study-page {
	--cs-blue: #071d3a;
	--cs-orange: #f47b3f;
	--cs-light: #f3f3f3;
	color: var(--cs-blue);
}

.case-study-page .lh-2 {
	line-height: 1.5;
}

.case-study-page .cs-orange {
	color: var(--cs-orange);
}

.case-study-page .cs-blue {
	color: var(--cs-blue);
}

.case-study-page .cs-section-title {
	color: var(--cs-orange);
	letter-spacing: 0.08em;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 200;
	text-align: left !important;
	margin-bottom: 0.5rem;
}

.case-study-page .cs-headline {
	color: #08234a;
	font-weight: 900;
	line-height: 1.05;
}

.case-study-page .cs-text {
	color: #08234a;
}

.case-study-page .cs-text p:last-child {
	margin-bottom: 0;
}

/* Listen in WYSIWYG / Textareas = .list-check */
.case-study-page .cs-text ul,
.case-study-page .cs-block--accordion .card-body ul {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.case-study-page .cs-text ul li,
.case-study-page .cs-block--accordion .card-body ul li {
	position: relative;
	list-style-type: none;
	padding-left: 32px;
	font-size: 1.25rem;
}

.case-study-page .cs-text ul li + li,
.case-study-page .cs-block--accordion .card-body ul li + li {
	margin-top: 8px;
}

.case-study-page .cs-text ul li::before,
.case-study-page .cs-block--accordion .card-body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	display: block;
	width: 24px;
	height: 24px;
	background-image: url("../assets/images/list-bulltet-point.svg");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Hero */
.case-study-page .cs-hero-fullscreen {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #f3f3f3;
}

.case-study-page .cs-hero-bg {
	width: 100%;
	height: 82vh;
	object-fit: cover;
	object-position: right center;
	display: block;
}

.case-study-page .cs-hero-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background: linear-gradient(
		90deg,
		rgba(245, 245, 245, 0.95) 0%,
		rgba(245, 245, 245, 0.78) 38%,
		rgba(245, 245, 245, 0.18) 70%,
		rgba(245, 245, 245, 0) 100%
	);
}

.case-study-page .case-intro-logo {
	max-width: 300px;
	height: auto;
	margin-bottom: 1em;
}

/* KPIs */
.case-study-page .cs-kpi-row {
	gap: 1.5rem;
}

.case-study-page .cs-kpi-circle {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: var(--cs-orange);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
	font-size: clamp(12px, 2vw, 1.05rem);
	font-weight: bold;
}

.case-study-page .cs-result-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 200px;
}

.case-study-page .cs-result-circle {
	position: relative;
	isolation: isolate;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: var(--cs-orange);
	border: 0;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	font-weight: bold;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	text-align: center;
}

.case-study-page .cs-result-circle::before {
	content: "";
	position: absolute;
	inset: 5%;
	z-index: 0;
	background: url("../assets/images/cs-result-chart.svg") center / contain no-repeat;
	pointer-events: none;
}

.case-study-page .cs-result-value {
	position: relative;
	z-index: 1;
	font-size: clamp(2.25rem, 5vw, 3rem);
	line-height: 1;
	font-weight: 900;
	color: #fff;
}

.case-study-page .cs-result-label {
	margin-top: 0.85rem;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--cs-blue);
	text-align: center;
}

.case-study-page .case-kip-screen {
	width: 100%;
	height: auto;
	display: block;
}

.case-study-page .strategie-feature-image img {
	max-width: 100%;
	height: auto;
}

/* Maßnahmen */
.case-study-page .cs-massnahmen-paket {
	padding: 3rem 0 1rem;
	background: #fff;
}

.case-study-page .cs-massnahmen-heading {
	position: relative;
	margin: 0;
	padding-top: 0.15em;
	color: var(--cs-orange);
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
	isolation: isolate;
}

.case-study-page .cs-massnahmen-number {
	position: absolute;
	top: -0.18em;
	left: -0.08em;
	z-index: 0;
	font-size: 5.5em;
	font-weight: 800;
	line-height: 0.8;
	color: #f7c9b0;
	pointer-events: none;
	user-select: none;
}

.case-study-page .cs-massnahmen-title {
	position: relative;
	z-index: 1;
	display: block;
	margin-top: 5rem;
	color: inherit;
	font-weight: inherit;
}

.case-study-page .cs-massnahmen-intro {
	margin-bottom: 1.75rem;
}

.case-study-page .cs-massnahmen-intro strong,
.case-study-page .cs-massnahmen-intro b {
	color: var(--cs-orange);
	font-weight: 700;
}

/* Accordion in Maßnahmen */
.case-study-page .cs-block--accordion .accordion > .card {
	border: 1px solid #e4e4e4;
	border-radius: 0;
	overflow: hidden;
	margin-bottom: 0.75rem;
	background: #fff;
}

.case-study-page .cs-block--accordion .accordion > .card:last-child {
	margin-bottom: 0;
}

.case-study-page .cs-block--accordion .card-header {
	background: var(--cs-light);
	border: 0;
	border-left: 5px solid var(--cs-orange);
	border-radius: 0;
	padding: 0.85rem 1.25rem;
}

.case-study-page .cs-block--accordion .card-header:hover {
	background: #ececec;
}

.case-study-page .cs-block--accordion .cs-acc-title {
	color: var(--cs-blue);
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	line-height: 1.35;
}

.case-study-page .cs-block--accordion .card-body {
	padding: 1.25rem 1.35rem 1.5rem;
	color: #08234a;
	background: #fff;
}

.case-study-page .cs-block--accordion .card-body p:last-child {
	margin-bottom: 0;
}

/* Full-width band */
.case-study-page .cs-block--fullwidth {
	background: var(--cs-light);
	padding: 3.5rem 0;
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	overflow: visible;
}

.case-study-page .cs-block--fullwidth > .container,
.case-study-page .cs-block--fullwidth .row {
	overflow: visible;
}

.case-study-page .cs-fullwidth__title {
	color: #08234a;
	font-weight: 800;
}

.case-study-page .cs-fullwidth__media {
	margin: 0;
	position: relative;
	z-index: 2;
}

.case-study-page .cs-fullwidth__media img {
	width: 100%;
	height: auto;
	display: block;
}

@media (min-width: 992px) {
	.case-study-page .cs-block--fullwidth {
		padding: 4.5rem 0;
		margin-top: 5rem;
		margin-bottom: 5rem;
	}

	/* Bild ragt oben und unten über den grauen Streifen hinaus */
	.case-study-page .cs-fullwidth__media {
		margin-top: -6rem;
		margin-bottom: -6rem;
	}
}

/* Fazit */
.case-study-page .cs-final {
	background: #f3f3f3;
	position: relative;
	overflow: hidden;
}

.case-study-page .cs-final::after {
	content: "case study";
	position: absolute;
	right: -4rem;
	bottom: -3rem;
	font-size: 9rem;
	font-weight: 900;
	color: rgba(0, 0, 0, 0.05);
	z-index: 0;
	pointer-events: none;
}

.case-study-page .cs-final .container {
	position: relative;
	z-index: 2;
}

@media (max-width: 768px) {
	.case-study-page .cs-hero-fullscreen,
	.case-study-page .cs-hero-bg {
		min-height: 70vh;
		height: 70vh;
	}

	.case-study-page .cs-kpi-circle,
	.case-study-page .cs-result-circle {
		width: 135px;
		height: 135px;
	}

	.case-study-page .cs-result-value {
		font-size: 1.75rem;
	}

	.case-study-page .cs-block--fullwidth {
		padding: 2.25rem 0;
	}

	.case-study-page .cs-final::after {
		font-size: 4.5rem;
		right: -1rem;
		bottom: -1rem;
	}
}

/* ==========================================================================
   Archive: Case Studies
   ========================================================================== */

.case-study-archive .cs-archive-hero__bg {
	min-height: 28rem;
}

.case-study-archive .cs-archive-hero__subline {
	margin-top: -1.2rem;
	margin-left: 2.5rem;
}

.case-study-archive .cs-archive-list {
	background: #fff;
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
	scroll-margin-top: 5rem;
}

.case-study-archive .cs-archive-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 992px) {
	.case-study-archive .cs-archive-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2.25rem;
	}
}

.case-study-archive .cs-archive-item {
	margin: 0;
}

.case-study-archive .cs-archive-item__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	background: #fff;
	transition: transform 0.35s ease;
}

.case-study-archive .cs-archive-item__link:hover,
.case-study-archive .cs-archive-item__link:focus {
	text-decoration: none;
	color: inherit;
	transform: translateY(-4px);
}

.case-study-archive .cs-archive-item__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--cs-light);
}

.case-study-archive .cs-archive-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	display: block;
	transition: transform 0.55s ease;
}

.case-study-archive .cs-archive-item__link:hover .cs-archive-item__media img {
	transform: scale(1.04);
}

.case-study-archive .cs-archive-item__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e8e8e8, var(--cs-light));
}

.case-study-archive .cs-archive-item__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(255, 255, 255, 0.12) 45%,
		rgba(255, 255, 255, 0) 100%
	);
	pointer-events: none;
}

.case-study-archive .cs-archive-item__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem 1.35rem 1.65rem;
	background: var(--cs-light);
}

.case-study-archive .cs-archive-item__logo {
	max-width: 180px;
	height: auto;
	margin-bottom: 0.85rem;
}

.case-study-archive .cs-archive-item__title {
	margin: 0 0 0.75rem;
	color: var(--cs-orange);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 800;
	line-height: 1.1;
}

.case-study-archive .cs-archive-item__intro {
	margin: 0 0 1.25rem;
	color: var(--cs-blue);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	max-width: 28rem;
}

.case-study-archive .cs-archive-item__kpis {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem 1rem;
	list-style: none;
	margin: 0 0 1.35rem;
	padding: 0;
}

.case-study-archive .cs-archive-kpi {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 4.75rem;
	height: 4.75rem;
	border-radius: 50%;
	background: var(--cs-orange);
	color: #fff;
	text-align: center;
	padding: 0.35rem;
}

.case-study-archive .cs-archive-kpi__value {
	font-size: 1rem;
	font-weight: 900;
	line-height: 1;
}

.case-study-archive .cs-archive-kpi__label {
	margin-top: 0.2rem;
	font-size: 0.58rem;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	opacity: 0.95;
}

.case-study-archive .cs-archive-item__cta {
	margin-top: auto;
	color: var(--cs-orange);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.case-study-archive .cs-archive-item__cta::after {
	content: " →";
}

.case-study-archive .cs-archive-item__link:hover .cs-archive-item__cta {
	color: var(--cs-blue);
}

@media (max-width: 575px) {
	.case-study-archive .cs-archive-item__body {
		padding: 1.25rem 1.1rem 1.4rem;
	}

	.case-study-archive .cs-archive-kpi {
		width: 4.25rem;
		height: 4.25rem;
	}
}

/*
 * LiveCanvas overview hero (/case-study/):
 * AOS zoom-in starts at opacity:0. If JS is late/blocked, only the
 * background (on the parent) is visible — especially noticeable on mobile.
 * Above-the-fold hero content must stay readable without waiting for AOS.
 */
#theme-main > section:first-of-type [data-aos^="zoom"],
#theme-main > section:first-of-type [data-aos^="fade"] {
	opacity: 1 !important;
	transform: none !important;
}

/* Overview grid (LiveCanvas shortcode [case_studies]) */
.cs-overview-grid {
	--cs-blue: #071d3a;
	--cs-orange: #f47b3f;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.cs-overview-grid {
		grid-template-columns: 1fr 1fr;
		gap: 1.75rem;
	}
}

@media (min-width: 1200px) {
	.cs-overview-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.cs-overview-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #e4e4e4;
	overflow: hidden;
}

.cs-overview-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f3f3f3;
}

.cs-overview-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.cs-overview-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.75rem 1.5rem;
}

.cs-overview-card__logo {
	max-width: 160px;
	height: auto;
	margin-bottom: 1.5rem;
}

.cs-overview-card__title {
	margin: 0 0 1rem;
	color: var(--cs-blue, #071d3a);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.25;
}

.cs-overview-card__eyebrow {
	margin: 0 0 0.35rem;
	color: var(--cs-blue, #071d3a);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cs-overview-card__eyebrow--result {
	margin-top: 1.25rem;
}

.cs-overview-card__focus,
.cs-overview-card__result  {
	color: var(--cs-blue, #071d3a);
	font-size: 1.0rem;
	font-weight: 400;
	line-height: 1.35;
}


.cs-overview-card__label {
	margin: 1.25rem 0 1.5rem;
	color: #5a6a7a;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
}

.cs-overview-card__cta {
	margin-top: auto;
	align-self: flex-start;
}

.cs-overview-card--coming {
	background:#faddcc;
}

.cs-overview-card--coming .cs-overview-card__body {
	justify-content: center;
	padding: 2.5rem 1.75rem;
}

.cs-overview-card__coming-visual {
	display: block;
	width: min(100%, 280px);
	height: auto;
	margin-bottom: 1.75rem;
}

.cs-overview-card__coming-title {
	margin: 0 0 1rem;
	color:var(--cs-orange, #f47b3f);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 400;
	line-height: 1.2;
}

.cs-overview-card__coming-text {
	color: var(--cs-blue, #071d3a);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.45;
	max-width: 18rem;
	margin-left: auto;
	margin-right: auto;
}
.list-check.lead li {
    font-size: 1.7rem;
}
.list-check.lead li::before {
    top: 14px;
}