/* ==========================================================================
   Portfolio-Cases — eigenständige Editorial-/Blueprint-Seitengrammatik.
   Alle visuellen Werte stammen aus assets/css/tokens.css.
   ========================================================================== */

.tc-case .wp-block-post-content > * {
	margin-block-start: 0;
}

.tc-case-study {
	background: var(--bg-page);
	color: var(--text-body);
}

.tc-case-shell {
	width: min(100%, var(--container));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.tc-case-hero {
	position: relative;
	isolation: isolate;
	padding-block: clamp(var(--space-8), 9vw, var(--space-12));
	overflow: hidden;
	background-color: var(--bg-raised);
	border-bottom: var(--border-w) solid var(--border-subtle);
}

.tc-case-hero__backdrop {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.tc-case-hero__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--bg-void) 4%, color-mix(in srgb, var(--bg-void) 94%, transparent) 34%, color-mix(in srgb, var(--bg-void) 48%, transparent) 66%, color-mix(in srgb, var(--bg-void) 18%, transparent));
}

.tc-case-hero__backdrop img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.tc-case-hero::after {
	content: "";
	position: absolute;
	inset: auto -12% -45% 42%;
	z-index: -1;
	width: min(60vw, 56rem);
	aspect-ratio: 1;
	border-radius: var(--radius-pill);
	background: var(--glow-red);
	pointer-events: none;
}

.tc-case-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.78fr);
	align-items: center;
	gap: clamp(var(--space-7), 7vw, var(--space-12));
}

.tc-case-hero--backdrop {
	min-height: min(52rem, calc(100svh - var(--tc-header-h)));
	display: flex;
	align-items: center;
}

.tc-case-hero--backdrop .tc-case-hero__grid {
	grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1.1fr);
}

.tc-case-hero--backdrop .tc-case-hero__copy {
	padding: var(--space-6);
	border: var(--border-w) solid color-mix(in srgb, var(--off-white) 12%, transparent);
	border-radius: var(--radius-lg);
	background: color-mix(in srgb, var(--bg-void) 80%, transparent);
	backdrop-filter: var(--blur-panel);
	box-shadow: var(--shadow-lg);
}

.tc-case-kicker,
.tc-case-index {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-eyebrow);
	line-height: var(--lh-normal);
	text-transform: uppercase;
}

.tc-case-kicker {
	margin: 0 0 var(--space-4);
	color: var(--marker);
}

.tc-case-hero h1 {
	max-width: 16ch;
	margin: 0;
	font-size: clamp(var(--text-4xl), 5.2vw, var(--text-display-lg));
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tighter);
	hyphens: auto;
	hyphenate-limit-chars: 12 6 6;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.tc-case-lead {
	max-width: 61ch;
	margin: var(--space-6) 0 0;
	font-size: var(--text-lg);
	line-height: var(--lh-relaxed);
	color: var(--text-secondary);
}

/* Fliesstextlinks nicht nur ueber Farbe kennzeichnen (WCAG 1.4.1). */
.tc-case-copy p a,
.tc-case-related > div > p a {
	text-decoration: underline;
	text-decoration-thickness: var(--border-w);
	text-underline-offset: var(--space-1);
}

.tc-case-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-7);
}

.tc-case-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--space-10);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-pill);
	background: var(--accent);
	box-shadow: var(--shadow-accent);
	color: var(--off-white);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.tc-case-button:hover {
	background: var(--accent-hover);
	color: var(--off-white);
	box-shadow: var(--shadow-accent);
}

.tc-case-button:active {
	transform: translateY(var(--border-w));
}

.tc-case-text-link {
	padding-block: var(--space-3);
	color: var(--text-secondary);
	font-weight: var(--fw-semibold);
	text-decoration: underline;
	text-decoration-color: var(--border-strong);
	text-underline-offset: var(--space-1);
}

.tc-case-hero__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: var(--border-w) solid var(--border-strong);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	box-shadow: var(--shadow-lg);
}

.tc-case-hero__media img {
	display: block;
	width: 100%;
	min-height: 32rem;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.tc-case-hero__media--contain {
	display: grid;
	place-items: center;
	background: var(--bg-void);
}

.tc-case-hero__media--contain img {
	position: static;
	width: 100%;
	min-height: 0;
	max-height: min(36rem, 62vh);
	aspect-ratio: auto;
	object-fit: contain;
	padding: clamp(var(--space-3), 2vw, var(--space-6));
}

/* Helle Bühne für Mockups, die auf Weiß freigestellt sind. */
.tc-case-hero__media--light {
	background: var(--off-white);
	border-color: color-mix(in srgb, var(--black-900) 14%, var(--off-white));
}

.tc-case-hero__media--light img {
	padding: clamp(var(--space-4), 2.5vw, var(--space-7));
}

.tc-case-hero__media figcaption {
	position: absolute;
	right: var(--space-4);
	bottom: var(--space-4);
	left: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border: var(--border-w) solid var(--border-subtle);
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--bg-void) 82%, transparent);
	backdrop-filter: var(--blur-panel);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--ls-eyebrow);
	line-height: var(--lh-normal);
	text-transform: uppercase;
	color: var(--off-white);
}

.tc-case-section {
	padding-block: clamp(var(--space-8), 8vw, var(--space-12));
	border-bottom: var(--border-w) solid var(--border-subtle);
}

.tc-case-section--raised {
	background: var(--bg-raised);
}

.tc-case-section--facts {
	padding-block: clamp(var(--space-7), 5vw, var(--space-10));
	background: var(--bg-panel);
}

.tc-case-facts {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	border-block: var(--border-w) solid var(--border-subtle);
}

.tc-case-facts > div {
	padding: var(--space-5);
	border-right: var(--border-w) solid var(--border-subtle);
}

.tc-case-facts > div:last-child {
	border-right: 0;
}

.tc-case-facts dt {
	margin-bottom: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--text-muted);
}

.tc-case-facts dd {
	margin: 0;
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
	color: var(--text-secondary);
}

.tc-case-copy-grid {
	display: grid;
	grid-template-columns: minmax(4rem, 0.22fr) minmax(0, 1fr);
	gap: clamp(var(--space-6), 7vw, var(--space-10));
}

/* Section mit Begleitbild: Index | Copy | Medium */
.tc-case-copy-grid--media {
	grid-template-columns: minmax(3rem, 0.14fr) minmax(0, 1.05fr) minmax(16rem, 0.72fr);
	align-items: center;
}

.tc-case-copy-grid--media .tc-case-index {
	align-self: start;
}

.tc-case-copy-media {
	margin: 0;
	overflow: hidden;
	border: var(--border-w) solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	background-image: var(--card-sheen);
	box-shadow: var(--shadow-card);
}

.tc-case-copy-media img,
.tc-case-copy-media video {
	display: block;
	width: 100%;
	height: auto;
}

.tc-case-copy-media video {
	aspect-ratio: 16 / 9;
	background: var(--bg-void);
}

.tc-case-copy-media--contain img {
	max-height: 34rem;
	object-fit: contain;
	padding: clamp(var(--space-3), 2vw, var(--space-5));
}

.tc-case-copy-media--light {
	background: var(--off-white);
	background-image: none;
	border-color: color-mix(in srgb, var(--black-900) 14%, var(--off-white));
}

.tc-case-copy-media figcaption {
	padding: var(--space-3) var(--space-4);
	border-top: var(--border-w) solid var(--border-subtle);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--ls-eyebrow);
	line-height: var(--lh-normal);
	text-transform: uppercase;
	color: var(--text-muted);
}

.tc-case-copy-media--light figcaption {
	border-top-color: color-mix(in srgb, var(--black-900) 14%, var(--off-white));
	color: var(--gray-500);
}

/* Full-Bleed-Bildband zwischen Sections */
.tc-case-stage {
	padding-block: clamp(var(--space-7), 6vw, var(--space-10));
	background: var(--bg-void);
	border-bottom: var(--border-w) solid var(--border-subtle);
}

.tc-case-stage figure {
	margin: 0;
	overflow: hidden;
	border: var(--border-w) solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	box-shadow: var(--shadow-card);
}

.tc-case-stage img,
.tc-case-stage video {
	display: block;
	width: 100%;
	height: auto;
}

.tc-case-stage figcaption {
	padding: var(--space-3) var(--space-4);
	border-top: var(--border-w) solid var(--border-subtle);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--ls-eyebrow);
	line-height: var(--lh-normal);
	text-transform: uppercase;
	color: var(--text-muted);
}

.tc-case-index {
	margin: var(--space-2) 0 0;
	color: var(--index-label);
}

.tc-case-copy {
	max-width: 50rem;
}

.tc-case-copy h2,
.tc-case-related h2,
.tc-case-faq-layout h2,
.tc-case-cta h2 {
	margin: 0 0 var(--space-6);
	font-size: clamp(var(--text-3xl), 4.4vw, var(--text-display-md));
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tighter);
	hyphens: auto;
	hyphenate-limit-chars: 12 6 6;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.tc-case-copy p,
.tc-case-related p,
.tc-case-cta p {
	max-width: 66ch;
	font-size: var(--text-lg);
	line-height: var(--lh-relaxed);
}

.tc-case-copy p + p {
	margin-top: var(--space-5);
}

.tc-case-visual {
	padding-block: clamp(var(--space-7), 6vw, var(--space-10));
	background: var(--bg-void);
	border-bottom: var(--border-w) solid var(--border-subtle);
}

/* --------------------------------------------------------------------------
   Projektbildwelten: echte Screens, Device-Mockups, Kampagnenbilder und Video
   -------------------------------------------------------------------------- */

.tc-case-visuals {
	padding-block: clamp(var(--space-10), 9vw, var(--space-16));
	background: var(--bg-void);
	border-bottom: var(--border-w) solid var(--border-subtle);
}

.tc-case-visuals__intro {
	max-width: 50rem;
	margin-bottom: clamp(var(--space-7), 6vw, var(--space-10));
}

.tc-case-visuals__intro h2 {
	margin: 0;
	font-size: clamp(var(--text-3xl), 4.4vw, var(--text-display-md));
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tighter);
	hyphens: auto;
	text-wrap: balance;
}

.tc-case-gallery {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: stretch;
	gap: clamp(var(--space-5), 4vw, var(--space-8));
}

.tc-case-gallery__item {
	position: relative;
	display: flex;
	flex-direction: column;
	grid-column: 1 / -1;
	margin: 0;
	overflow: hidden;
	border: var(--border-w) solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	background-image: var(--card-sheen);
	box-shadow: var(--shadow-card);
}

/* Spalten-Layouts im 12er-Grid: Paare statt gestapelter Vollbreiten. */
.tc-case-gallery__item--wide {
	grid-column: span 7;
}

.tc-case-gallery__item--side {
	grid-column: span 5;
}

.tc-case-gallery__item--half {
	grid-column: span 6;
}

.tc-case-gallery__item--portrait {
	grid-column: span 5;
}

.tc-case-gallery__item img,
.tc-case-gallery__item video {
	display: block;
	width: 100%;
	height: auto;
}

/* In gemischten Zeilen füllt das Medium die Kartenhöhe der Zeile. */
.tc-case-gallery__item--wide img,
.tc-case-gallery__item--side img,
.tc-case-gallery__item--half img,
.tc-case-gallery__item--portrait img {
	flex: 1 1 auto;
	min-height: 0;
	object-fit: cover;
}

.tc-case-gallery__item--contain img {
	max-height: 40rem;
	object-fit: contain;
	padding: clamp(var(--space-3), 2.5vw, var(--space-6));
}

.tc-case-gallery__item--cover img,
.tc-case-gallery__item--cover video {
	object-fit: cover;
}

.tc-case-gallery__item--light {
	background: var(--off-white);
	background-image: none;
	border-color: color-mix(in srgb, var(--black-900) 14%, var(--off-white));
}

.tc-case-gallery__item--focus-right img {
	object-position: 82% center;
}

.tc-case-gallery__item figcaption {
	padding: var(--space-3) var(--space-4);
	border-top: var(--border-w) solid var(--border-subtle);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	letter-spacing: var(--ls-eyebrow);
	line-height: var(--lh-normal);
	text-transform: uppercase;
	color: var(--text-muted);
}

.tc-case-gallery__item--light figcaption {
	border-top-color: color-mix(in srgb, var(--black-900) 14%, var(--off-white));
	color: var(--gray-500);
}

.tc-case-study--icg .tc-case-visuals {
	background: color-mix(in srgb, var(--bg-void) 94%, var(--accent));
}

.tc-case-study--icg .tc-case-gallery__item {
	border-color: color-mix(in srgb, var(--accent) 28%, var(--border-subtle));
}

.tc-case-visual figure {
	margin: 0;
	overflow: hidden;
	border: var(--border-w) solid var(--border-subtle);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	box-shadow: var(--shadow-card);
}

.tc-case-visual img {
	display: block;
	width: 100%;
	max-height: 48rem;
	object-fit: cover;
}

.tc-case-section--quote {
	background: var(--bg-panel);
}

.tc-case-section--quote blockquote {
	max-width: 58rem;
	margin: 0 auto;
	padding-left: clamp(var(--space-5), 5vw, var(--space-8));
	border-left: var(--border-w-strong) solid var(--accent);
}

.tc-case-section--quote blockquote p {
	margin: 0;
	font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--text-heading);
}

.tc-case-section--quote cite {
	display: block;
	margin-top: var(--space-5);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-style: normal;
	line-height: var(--lh-normal);
	color: var(--marker);
}

.tc-case-related {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.42fr);
	gap: clamp(var(--space-7), 8vw, var(--space-12));
}

.tc-case-related__links {
	display: flex;
	flex-direction: column;
	align-self: end;
	border-top: var(--border-w) solid var(--border-strong);
}

.tc-case-related__links a {
	padding: var(--space-4) 0;
	border-bottom: var(--border-w) solid var(--border-subtle);
	color: var(--text-secondary);
	font-weight: var(--fw-semibold);
}

.tc-case-faq-layout {
	display: grid;
	grid-template-columns: minmax(14rem, 0.38fr) minmax(0, 1fr);
	gap: clamp(var(--space-7), 8vw, var(--space-12));
}

.tc-case-faqs details {
	border-top: var(--border-w) solid var(--border-strong);
}

.tc-case-faqs details:last-child {
	border-bottom: var(--border-w) solid var(--border-strong);
}

.tc-case-faqs summary {
	cursor: pointer;
	padding: var(--space-5) var(--space-7) var(--space-5) 0;
	font-size: var(--text-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--text-heading);
}

.tc-case-faqs details p {
	max-width: 62ch;
	margin: 0;
	padding: 0 0 var(--space-5);
	line-height: var(--lh-relaxed);
}

.tc-case-cta {
	padding-block: clamp(var(--space-10), 10vw, var(--space-16));
	background-color: var(--bg-raised);
	background-image: var(--bg-blueprint);
	text-align: center;
}

.tc-case-cta .tc-case-shell {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tc-case-cta h2 {
	max-width: 18ch;
}

.tc-case-cta p {
	margin: 0 auto var(--space-7);
	color: var(--text-secondary);
}

@media (max-width: 960px) {
	.tc-case-hero__grid,
	.tc-case-related,
	.tc-case-faq-layout {
		grid-template-columns: 1fr;
	}

	.tc-case-hero__media img {
		min-height: 0;
		max-height: 36rem;
		aspect-ratio: 16 / 10;
	}

	.tc-case-hero__media--contain img {
		aspect-ratio: auto;
		max-height: 30rem;
	}

	.tc-case-copy-grid--media {
		grid-template-columns: minmax(4rem, 0.22fr) minmax(0, 1fr);
	}

	.tc-case-copy-grid--media .tc-case-copy-media {
		grid-column: 2;
		max-width: 34rem;
		margin-top: var(--space-6);
	}

	.tc-case-gallery__item--wide,
	.tc-case-gallery__item--side,
	.tc-case-gallery__item--half {
		grid-column: 1 / -1;
	}

	.tc-case-gallery__item--portrait {
		grid-column: 3 / span 8;
	}

	.tc-case-hero--backdrop {
		min-height: 44rem;
	}

	.tc-case-hero--backdrop .tc-case-hero__grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(10rem, 0.5fr);
	}

	.tc-case-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tc-case-facts > div {
		border-bottom: var(--border-w) solid var(--border-subtle);
	}
}

@media (max-width: 620px) {
	.tc-case-hero {
		padding-top: var(--space-8);
	}

	.tc-case-hero h1 {
		font-size: clamp(var(--text-3xl), 12vw, var(--text-display-md));
	}

	.tc-case-hero--backdrop {
		min-height: 42rem;
		align-items: flex-end;
	}

	.tc-case-hero--backdrop .tc-case-hero__backdrop::after {
		background: linear-gradient(180deg, color-mix(in srgb, var(--bg-void) 18%, transparent), var(--bg-void) 78%);
	}

	.tc-case-hero--backdrop .tc-case-hero__backdrop img {
		object-position: 62% center;
	}

	.tc-case-hero--backdrop .tc-case-hero__grid {
		grid-template-columns: 1fr;
	}

	.tc-case-hero--backdrop .tc-case-hero__copy {
		padding: var(--space-5);
	}

	.tc-case-actions,
	.tc-case-button {
		width: 100%;
	}

	.tc-case-copy-grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.tc-case-facts {
		grid-template-columns: 1fr;
	}

	.tc-case-facts > div {
		border-right: 0;
	}

	.tc-case-facts > div:last-child {
		border-bottom: 0;
	}

	.tc-case-hero__media figcaption {
		position: static;
		border: 0;
		border-top: var(--border-w) solid var(--border-subtle);
		border-radius: 0;
		background: var(--surface-card);
	}

	.tc-case-copy p,
	.tc-case-related p,
	.tc-case-cta p {
		font-size: var(--text-base);
	}

	.tc-case-gallery {
		grid-template-columns: 1fr;
	}

	.tc-case-gallery__item,
	.tc-case-gallery__item--portrait {
		grid-column: 1;
	}

	.tc-case-gallery__item--wide img,
	.tc-case-gallery__item--side img,
	.tc-case-gallery__item--half img,
	.tc-case-gallery__item--portrait img,
	.tc-case-gallery__item--cover img,
	.tc-case-gallery__item--cover video {
		height: auto;
		aspect-ratio: auto;
		object-fit: contain;
	}

	.tc-case-gallery__item--contain img {
		padding: var(--space-3);
	}

	.tc-case-copy-grid--media .tc-case-copy-media {
		grid-column: 1;
		max-width: none;
		margin-top: var(--space-4);
	}

	.tc-case-stage {
		padding-block: var(--space-6);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tc-case-button {
		transition: none;
	}
}