/*
 * UNITS: 1rem == 10px on this site (AutomaticCSS sets a 62.5% root).
 * Rescaled 2026-10-11 — this file had been authored against a 16px base, so
 * every size rendered ~40% too small (KPI labels at 9px, section title at
 * 17px). That, not the colour scheme, is why the section read as off-brand.
 */

/**
 * SEO Revolution — proof explorer.
 *
 * Scoped under .sr-proof so nothing leaks into Bricks or AutomaticCSS.
 * Colours read from ACSS custom properties where available, with literal
 * fallbacks so the block still looks right if a variable is renamed.
 * Type scales with clamp() per the responsive-typography rule — no fixed px
 * font sizes, and it survives 200% zoom and long German compounds.
 */

/**
 * Token mapping to this site's AutomaticCSS palette. Resolved values at time
 * of writing:
 *   --primary   #002B7F  deep navy   -> headings, emphasis
 *   --secondary #009CE5  bright cyan -> the data colour (line, sparklines)
 *   --accent    #F6F7F9  near-white  -> a SURFACE colour in this setup, not an
 *                                       accent. Used for the KPI tile ground.
 *   --base      #313133  body text   --base-light #d8d8da  borders
 *
 * Every value goes through the ACSS variable first, so changing the palette in
 * AutomaticCSS restyles this block with no edit here. The literal after each
 * comma is only a safety net if a variable is ever renamed.
 */
.sr-proof {
	--sr-ink: var(--base, #313133);
	--sr-muted: color-mix(in srgb, var(--base, #313133) 65%, var(--white, #fff));
	--sr-line: var(--base-light, #d8d8da);
	--sr-surface: var(--white, #fff);
	/* --accent is #F6F7F9 here: the correct light ground for tiles. */
	--sr-surface-2: var(--accent, #f6f7f9);
	/* Cyan reads as "data" and stays legible on white; navy is too heavy for a line. */
	--sr-accent: var(--secondary, #009ce5);
	--sr-accent-deep: var(--primary, #002b7f);
	--sr-radius: var(--radius-m, 14px);

	container-type: inline-size;
	color: var(--sr-ink);
}

/* Headings pick up the navy so the block sits inside the brand rather than
   beside it. */
.sr-proof__title,
.sr-proof__client {
	color: var(--sr-accent-deep);
}

/* ---------- intro ---------- */

.sr-proof__intro {
	max-width: 62ch;
	margin-block-end: clamp(2.4rem, 3vw, 4rem);
}

.sr-proof__title {
	font-size: clamp(2.8rem, 1.76rem + 2.4vw, 4.4rem);
	line-height: 1.15;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

.sr-proof__lead {
	font-size: clamp(1.6rem, 1.52rem + 0.3vw, 1.8rem);
	line-height: 1.6;
	color: var(--sr-muted);
	margin: 0;
	text-wrap: pretty;
}

/* ---------- project nav ---------- */

.sr-proof__nav {
	margin-block-end: clamp(1.6rem, 2vw, 2.8rem);
}

/* Before Splide mounts, show a horizontally scrollable row rather than a
   stacked list — avoids a layout jump on slow connections. */
.sr-proof__nav:not(.is-initialized) .splide__list {
	display: flex;
	gap: 0.8rem;
	overflow-x: auto;
	list-style: none;
	margin: 0;
	padding: 0 0 0.4rem;
	scrollbar-width: thin;
}

.sr-proof__nav:not(.is-initialized) .splide__slide {
	flex: 0 0 auto;
}

.sr-proof__tabbtn {
	display: flex;
	flex-direction: column;
	gap: 0.24rem;
	inline-size: 100%;
	min-height: 44px; /* touch target */
	padding: 1.12rem 1.6rem;
	text-align: start;
	background: var(--sr-surface);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius);
	cursor: pointer;
	transition: border-color 0.18s, background 0.18s, transform 0.18s;
}

.sr-proof__tabbtn:hover {
	border-color: color-mix(in srgb, var(--sr-accent) 45%, var(--sr-line));
}

.sr-proof__tabbtn.is-active {
	border-color: var(--sr-accent);
	background: color-mix(in srgb, var(--sr-accent) 6%, var(--sr-surface));
}

.sr-proof__tabbtn:focus-visible {
	outline: 2px solid var(--sr-accent);
	outline-offset: 2px;
}

.sr-proof__tabname {
	font-weight: 600;
	font-size: 1.52rem;
	line-height: 1.25;
}

.sr-proof__tabmeta {
	font-size: 1.28rem;
	color: var(--sr-muted);
}

/* ---------- panel ---------- */

.sr-proof__panel {
	padding: clamp(1.76rem, 2.5vw, 3.2rem);
	background: var(--sr-surface);
	border: 1px solid var(--sr-line);
	border-radius: calc(var(--sr-radius) + 4px);
}

.sr-proof__panel[hidden] {
	display: none;
}

.sr-proof__head {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem 2.4rem;
	align-items: start;
	justify-content: space-between;
	padding-block-end: 1.6rem;
	border-block-end: 1px solid var(--sr-line);
}

.sr-proof__client {
	font-size: clamp(1.92rem, 1.6rem + 0.9vw, 2.56rem);
	line-height: 1.2;
	margin: 0 0 0.2em;
}

.sr-proof__branche,
.sr-proof__period {
	margin: 0;
	font-size: 1.44rem;
	color: var(--sr-muted);
}

.sr-proof__sep {
	opacity: 0.5;
	margin-inline: 0.35em;
}

.sr-proof__desc {
	margin: 1.6rem 0 0;
	max-width: 70ch;
	line-height: 1.6;
	color: var(--sr-muted);
	text-wrap: pretty;
}

/* ---------- KPIs ---------- */

.sr-proof__kpis {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.6rem;
	margin: clamp(2rem, 3vw, 3.2rem) 0;
}

@container (min-width: 54.4rem) {
	.sr-proof__kpis {
		grid-template-columns: repeat(3, 1fr);
	}
}

.sr-proof__kpi {
	padding: 1.6rem 1.76rem;
	background: var(--sr-surface-2);
	border-radius: var(--sr-radius);
}

/* dd before dt: the number leads visually, the label explains it. */
.sr-proof__kpival {
	margin: 0;
	font-size: clamp(2.56rem, 1.76rem + 2.2vw, 3.84rem);
	font-weight: 700;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.sr-proof__kpival.is-probing {
	color: var(--sr-accent);
}

.sr-proof__kpilabel {
	margin: 0.56rem 0 0;
	font-size: 1.44rem;
	font-weight: 600;
	line-height: 1.3;
}

.sr-proof__kpisub {
	margin: 0.24rem 0 0;
	font-size: 1.25rem;
	color: var(--sr-muted);
}

/* Sparkline: word-sized, no axes, no grid, no labels. Inherits colour from
   the tile so it reads as part of the number, not as a second chart. */
.sr-proof__spark {
	margin-block-start: 0.96rem;
	color: var(--sr-accent);
	line-height: 0;
	opacity: 0.85;
}

.sr-proof__spark svg {
	display: block;
	inline-size: 100%;
	block-size: 34px;
}

.sr-proof__spark[hidden] {
	display: none;
}

/* ---------- source tabs + metric chips ---------- */

.sr-proof__sources {
	display: flex;
	flex-wrap: wrap;
	gap: 0.64rem;
	margin-block-end: 2rem;
}

.sr-proof__source,
.sr-proof__chip {
	min-height: 40px;
	padding: 0.8rem 1.52rem;
	font-size: 1.4rem;
	font-weight: 550;
	background: var(--sr-surface);
	color: var(--sr-ink);
	border: 1px solid var(--sr-line);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.sr-proof__source:hover,
.sr-proof__chip:hover {
	border-color: color-mix(in srgb, var(--sr-accent) 45%, var(--sr-line));
}

.sr-proof__source.is-active,
.sr-proof__chip.is-active {
	background: var(--sr-accent);
	border-color: var(--sr-accent);
	color: #fff;
}

.sr-proof__source:focus-visible,
.sr-proof__chip:focus-visible,
.sr-proof__what:focus-visible {
	outline: 2px solid var(--sr-accent);
	outline-offset: 2px;
}

.sr-proof__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.64rem;
	margin-block-end: 1.44rem;
}

.sr-proof__chips:empty {
	display: none;
}

/* ---------- chart ---------- */

.sr-proof__chart {
	inline-size: 100%;
	block-size: clamp(240px, 34vw, 380px);
}

/* No timeline data yet: collapse the canvas so we don't show an empty box. */
.sr-proof__chartwrap.is-empty .sr-proof__chart {
	block-size: 0;
	overflow: hidden;
}

.sr-proof__empty {
	margin: 0;
	padding: 1.76rem 2rem;
	font-size: 1.44rem;
	color: var(--sr-muted);
	background: var(--sr-surface-2);
	border: 1px dashed var(--sr-line);
	border-radius: var(--sr-radius);
}

.sr-proof__hint {
	margin: 0.96rem 0 0;
	font-size: 1.28rem;
	color: var(--sr-muted);
}

/* ---------- milestones ---------- */

.sr-proof__what {
	margin-block-start: 1.2rem;
	padding: 0.64rem 0;
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--sr-accent);
	background: none;
	border: 0;
	border-block-end: 1px dashed currentColor;
	cursor: pointer;
}

.sr-proof__milestones {
	margin: 1.44rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.96rem;
}

.sr-proof__milestones li {
	padding: 1.12rem 1.44rem;
	background: var(--sr-surface-2);
	border-radius: 10px;
	font-size: 1.4rem;
}

.sr-proof__milestones p {
	margin: 0.4rem 0 0;
	color: var(--sr-muted);
}

.sr-proof__msmonth {
	margin-inline-start: 0.5em;
	font-size: 1.28rem;
	color: var(--sr-muted);
}

/* ---------- footer ---------- */

.sr-proof__foot {
	margin-block-start: clamp(1.6rem, 2vw, 2.4rem);
	padding-block-start: 1.6rem;
	border-block-start: 1px solid var(--sr-line);
}

.sr-proof__srcnote {
	margin: 0;
	font-size: 1.28rem;
	color: var(--sr-muted);
	text-wrap: pretty;
}

/* Accessible text summary — available to screen readers and crawlers,
   visually redundant next to the chart. */
.sr-proof__a11y {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.sr-proof *,
	.sr-proof *::before,
	.sr-proof *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ---------- ApexCharts integration ---------- */

/* Apex injects its own container; keep it flush with our wrapper. */
.sr-proof__chart .apexcharts-canvas {
	margin-inline: auto;
}

.sr-proof__chart .apexcharts-tooltip {
	border: 0 !important;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18) !important;
	border-radius: 10px !important;
	background: rgba(20, 22, 26, 0.95) !important;
}

/* Custom tooltip body (built in JS) */
.sr-tip {
	padding: 0.96rem 1.2rem;
	color: #fff;
	font-size: 1.28rem;
	line-height: 1.35;
	min-width: 15.2rem;
}

.sr-tip__m {
	font-weight: 700;
	margin-block-end: 0.48rem;
}

.sr-tip__l {
	opacity: 0.7;
	font-size: 1.15rem;
}

.sr-tip__v {
	font-size: 1.68rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	margin-block-start: 0.08rem;
}

.sr-tip__d {
	margin-block-start: 0.48rem;
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums;
}

.sr-tip__d.is-up { color: #5fd39b; }
.sr-tip__d.is-down { color: #ff9c85; }

/* ---------- preview mode badge ---------- */

.sr-proof__chartwrap {
	position: relative;
}

.sr-proof__chartwrap.is-demo::after {
	content: 'Beispieldaten – Vorschau';
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	z-index: 2;
	padding: 0.32rem 0.8rem;
	font-size: 1.09rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #8a5a00;
	background: #ffeab5;
	border-radius: 6px;
	pointer-events: none;
}

/* =========================================================================
   LAYOUT STABILITY
   Switching projects must not move anything. Panels are absolutely the same
   box: all six are laid out in the same grid cell, stacked, and only the
   active one is visible. The tallest panel therefore sets the height once and
   nothing reflows on click — no "dancing".
   ========================================================================= */

.sr-proof__panels {
	display: grid;
}

/* Every panel occupies the same cell. */
.sr-proof__panels > .sr-proof__panel {
	grid-area: 1 / 1;
}

/* [hidden] would collapse the cell, so hide visually and keep the box. */
.sr-proof__panels > .sr-proof__panel[hidden] {
	display: block !important;
	visibility: hidden;
	pointer-events: none;
}

/* Fixed KPI row: three equal columns at every breakpoint above the container
   query, so a longer label can never rebalance the grid. */
.sr-proof__kpis {
	align-items: stretch;
}

.sr-proof__kpi {
	display: flex;
	flex-direction: column;
	min-inline-size: 0; /* long German compounds must not widen the column */
}

/* Push the sparkline to the bottom so tiles with and without one still align. */
.sr-proof__spark {
	margin-block-start: auto;
	padding-block-start: 0.96rem;
}

/* Reserve the sparkline's height even when there is no timeline yet, so the
   tiles do not grow the day real data arrives. */
.sr-proof__kpi[data-sr-kpi] > [data-sr-spark][hidden] {
	display: block !important;
	visibility: hidden;
	block-size: 34px;
}

/* The number must not reflow while probing a hovered month. */
.sr-proof__kpival {
	min-block-size: 1.05em;
	font-variant-numeric: tabular-nums;
}

/* Chip row keeps its height when a project offers fewer metrics. */
.sr-proof__chips {
	min-block-size: 40px;
}

/* ---------- team expert cards ---------- */

.sr-team__title {
	font-size: clamp(2.24rem, 1.6rem + 1.6vw, 3.2rem);
	line-height: 1.2;
	margin: 0 0 clamp(1.6rem, 2vw, 2.8rem);
	color: var(--primary, #002b7f);
	text-wrap: balance;
}

/* team-container ships as var(--grid-3); this instance wants four across. */
.sr-team__grid[data-cols='4'] {
	grid-template-columns: var(--grid-4, repeat(4, 1fr));
}

/* Breakpoints copied verbatim from .team-container on /team/ so this block
   reflows at exactly the same widths as the real team grid. */
@media (max-width: 992px) {
	.sr-team__grid[data-cols='4'] {
		grid-template-columns: var(--grid-2, repeat(2, 1fr));
	}
}

@media (max-width: 480px) {
	.sr-team__grid[data-cols='4'] {
		grid-template-columns: var(--grid-1, 1fr);
	}
}

.sr-team__ident {
	min-inline-size: 0;
}

/* The pill inherits `label` wholesale; only the stacking margin it carries for
   standalone use is removed, since here it sits inside a flex row. */
.sr-team__badge {
	margin-block-end: 0 !important;
	align-self: flex-start;
	flex: 0 0 auto;
	font-size: var(--text-xs, 1.15rem);
	white-space: nowrap;
}

/* ---------- verified analytics aggregates ---------- */

/* Rendered as text, not as a chart, because the monthly timelines are empty
   until real exports land. Reuses .sr-proof__kpis tiles so the figures read as
   the same class of object as the Search Console triplet above; only the
   column count differs, since there can be up to five of them. */
.sr-proof__ga {
	margin-block: clamp(2rem, 3vw, 3.2rem);
}

.sr-proof__galabel {
	margin: 0 0 1.2rem;
	font-size: 1.31rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sr-muted);
}

.sr-proof__kpis--ga {
	margin: 0;
	grid-template-columns: 1fr;
}

@container (min-width: 54.4rem) {
	.sr-proof__kpis--ga {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container (min-width: 83.2rem) {
	.sr-proof__kpis--ga {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* The metric chips belong to the chart. With no timeline the chart is
   collapsed, so the (empty) chip row must not leave a gap behind. */
.sr-proof__chartwrap.is-empty .sr-proof__chips {
	display: none;
}

/* NOTE ON UNITS — 1rem == 10px here (AutomaticCSS sets a 62.5% root).
   The values below are written against that base: 1.2rem is 12px, not 19px.
   Authoring them against a 16px mental model is what produced 7px labels on
   the first pass. Prefer the --text-* / --space-* tokens where one fits. */

/* ==========================================================================
   SRProofCard — project proof "console" (hero + portfolio variants)
   --------------------------------------------------------------------------
   Design language taken from the approved concept: a dark console shell with
   translucent inner cards, large white figures and a cyan accent. The concept's
   own palette is NOT copied — its ground (#172341 -> #080d1b) and its blue
   (#335cff) are replaced by values derived from this site's own --primary navy
   and --secondary cyan, so the card tracks the brand if the palette changes.

   Radii: the concept uses 30px/20px, well off this project's scale
   (--radius-l is 12.8px). Rather than hardcode a foreign value, the shell uses
   calc(var(--radius-l) * 2) and inner tiles use var(--radius-l) — the same
   soft-console proportions, still on the token scale.

   Contrast: on the dark ground every foreground token flips. --primary navy
   would be unreadable here, so figures are white and supporting text is a
   light blue-grey. Do not reintroduce the light-ground tokens below.
   ========================================================================== */

.sr-proof-mount {
	width: 100%;
}

.sr-proof-card {
	/* derived from the brand palette, not from the concept's hex values */
	--sr-con-ink: #fff;
	--sr-con-muted: color-mix(in srgb, var(--secondary, #009ce5) 26%, #c3ccde);
	--sr-con-line: rgba(255, 255, 255, 0.1);
	--sr-con-tile: rgba(255, 255, 255, 0.055);
	--sr-con-accent: var(--secondary, #009ce5);

	position: relative;
	display: grid;
	gap: 1.2rem;
	width: 100%;
	padding: 1.6rem;
	color: var(--sr-con-ink);
	background: #0a1733;   /* fallback for no color-mix */
	background: linear-gradient(
		145deg,
		color-mix(in srgb, var(--primary, #002b7f) 58%, #000),
		color-mix(in srgb, var(--primary, #002b7f) 10%, #000)
	);
	border-radius: calc(var(--radius-l, 12.8px) * 2);
	box-shadow: 0 3.5rem 9rem rgba(0, 43, 127, 0.26);
}

/* eyebrow row sits on the shell, outside the inner card */
.sr-proof-card__header {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.8rem 0.8rem 0.4rem;
	color: var(--sr-con-muted);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.sr-proof-card__status {
	display: inline-flex;
	gap: 0.7rem;
	align-items: center;
	color: var(--sr-con-muted);
}

/* the "live" dot from the concept, rendered from the accent token */
.sr-proof-card__status::before {
	width: 0.8rem;
	height: 0.8rem;
	content: "";
	background: var(--sr-con-accent);
	border-radius: 50%;
	box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--secondary, #009ce5) 18%, transparent);
}

/* identity + metrics + source form the inner translucent card */
.sr-proof-card__identity,
.sr-proof-card__metrics,
.sr-proof-card__source {
	padding-inline: 2.4rem;
}

.sr-proof-card__identity {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.6rem;
	align-items: baseline;
	justify-content: space-between;
	padding-top: 2.4rem;
	background: var(--sr-con-tile);
	border: 1px solid var(--sr-con-line);
	border-bottom: 0;
	border-radius: var(--radius-l, 12.8px) var(--radius-l, 12.8px) 0 0;
}

.sr-proof-card__title {
	margin: 0;
	color: var(--sr-con-ink);
	font-size: clamp(1.8rem, 2vw, 2.2rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.sr-proof-card__context {
	flex: 1 1 100%;
	margin: 0;
	color: var(--sr-con-muted);
	font-size: 1.3rem;
}

.sr-proof-card__period {
	order: 2;
	margin: 0;
	color: var(--sr-con-muted);
	font-size: 1.2rem;
	white-space: nowrap;
	background: var(--sr-con-tile);
	border-inline: 1px solid var(--sr-con-line);
	padding: 0 2.4rem;
}

.sr-proof-card__metrics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding-top: 1.8rem;
	background: var(--sr-con-tile);
	border-inline: 1px solid var(--sr-con-line);
}

.sr-proof-card__metric {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
	padding: 1.6rem;
	background: rgba(255, 255, 255, 0.055);
	border-radius: var(--radius-m, 8px);
}

/* label first in the DOM for screen readers, figure first visually */
.sr-proof-card__metric dt {
	order: 2;
	color: var(--sr-con-muted);
	font-size: 1.2rem;
	line-height: 1.3;
}

.sr-proof-card__metric dd {
	margin: 0;
	color: var(--sr-con-ink);
	font-size: clamp(2.3rem, 3.2vw, 3rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

.sr-proof-card__source {
	padding-top: 1.4rem;
	padding-bottom: 2.4rem;
	margin: 0;
	color: var(--sr-con-muted);
	font-size: 1.2rem;
	line-height: 1.5;
	background: var(--sr-con-tile);
	border: 1px solid var(--sr-con-line);
	border-top: 0;
	border-radius: 0 0 var(--radius-l, 12.8px) var(--radius-l, 12.8px);
}

.sr-proof-card__source strong { color: var(--sr-con-ink); }

/* second console card: the evidence row */
.sr-proof-card__evidence {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.3rem;
	align-items: center;
	padding: 1.6rem 2.4rem;
	color: var(--sr-con-muted);
	font-size: 1.2rem;
	line-height: 1.45;
	background: var(--sr-con-tile);
	border: 1px solid var(--sr-con-line);
	border-radius: var(--radius-l, 12.8px);
}

.sr-proof-card__evidence strong {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--sr-con-ink);
}

.sr-proof-card__evidence-icon {
	display: grid;
	place-items: center;
	width: 3.4rem;
	height: 3.4rem;
	color: var(--sr-con-accent);
	font-size: 1.4rem;
	font-weight: 700;
	background: color-mix(in srgb, var(--secondary, #009ce5) 16%, transparent);
	border-radius: var(--radius-m, 8px);
}

.sr-proof-card__more {
	margin: 0.4rem 0 0.8rem;
	padding-inline: 0.8rem;
	font-size: 1.3rem;
}

.sr-proof-card__more a { color: var(--sr-con-accent); }

/* portfolio variant: same console, allowed more width */
.sr-proof-card--portfolio { max-width: 102.4rem; }

@media (max-width: 600px) {
	.sr-proof-card__metrics { grid-template-columns: 1fr; }
	.sr-proof-card__header { align-items: flex-start; }
}

/* ==========================================================================
   Team selection section (inc/team-select.php)
   --------------------------------------------------------------------------
   Self-contained on purpose. Bricks compiles global-class CSS per page from
   that page's element tree, so a shortcode printing `team-card` on a page
   without real Bricks team elements would ship class names and no styling.
   These .sr-teamsel-* rules therefore stand on their own, using the same ACSS
   tokens the rest of the site uses so the result still reads as native.
   Columns follow the site's own convention: 4 across, 3 at <=992px, 2 at
   <=480px — matching .flex-grid--4 / --l-3 / --s-2 without depending on them.
   ========================================================================== */

.sr-teamsel__title {
	margin: 0 0 0.5em;
	color: var(--primary, #002b7f);
	text-wrap: balance;
}

.sr-teamsel__intro {
	max-width: 62ch;
	margin: 0 0 clamp(2.4rem, 3vw, 4rem);
	color: var(--neutral-semi-dark, #6e7072);
	line-height: 1.6;
	text-wrap: pretty;
}

.sr-teamsel__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--grid-gap, 3.8rem);
	padding: 0;
	margin: 0;
	list-style: none;
}

@media (max-width: 992px) {
	.sr-teamsel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
	.sr-teamsel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sr-teamsel__item { min-width: 0; }

.sr-teamsel__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--accent, #f6f7f9);
	border-radius: var(--radius-l, 12.8px);
}

.sr-teamsel__media {
	order: -1;          /* photo above the text, as on the team page */
	margin: 0;
	aspect-ratio: 24 / 25;
	overflow: hidden;
}

.sr-teamsel__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sr-teamsel__content {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: var(--space-m, 3.8rem);
}

/* Job title sits above the name but after it in the DOM order of importance;
   `order` keeps the visual hierarchy without weakening the heading. */
.sr-teamsel__expertise {
	order: -1;
	margin: 0;
	color: var(--secondary, #009ce5);
	/* deliberately below --text-s: as an eyebrow above the name it should read
	   as a label, not compete with it. */
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sr-teamsel__name {
	margin: 0;
	color: var(--primary, #002b7f);
	font-size: var(--h4, 3.5rem);
	line-height: 1.15;
}

.sr-teamsel__context {
	margin: 0;
	color: var(--neutral-semi-dark, #6e7072);
	font-size: var(--text-s, 2.3rem);
	line-height: 1.5;
	text-wrap: pretty;
}

/* ==========================================================================
   "Echte SEO-Ergebnisse" — explorer brought into the console family
   --------------------------------------------------------------------------
   The explorer previously used a light ground with navy figures while the hero
   card is a dark console, so the two read as different components. The brief
   requires them to look like one family. The panel now sits on the same dark
   console shell, with the same translucent tiles, white figures and cyan
   accent, so the hero card is recognisably a compact version of this section.
   Only presentation changes — no markup, data or behaviour is touched.
   ========================================================================== */

.sr-proof__panels {
	--sr-con-ink: #fff;
	--sr-con-muted: color-mix(in srgb, var(--secondary, #009ce5) 26%, #c3ccde);
	--sr-con-line: rgba(255, 255, 255, 0.1);
	--sr-con-tile: rgba(255, 255, 255, 0.055);

	padding: clamp(2rem, 2.5vw, 3.2rem);
	color: var(--sr-con-ink);
	background: #0a1733;
	background: linear-gradient(
		145deg,
		color-mix(in srgb, var(--primary, #002b7f) 58%, #000),
		color-mix(in srgb, var(--primary, #002b7f) 10%, #000)
	);
	border-radius: calc(var(--radius-l, 12.8px) * 2);
	box-shadow: 0 3.5rem 9rem rgba(0, 43, 127, 0.26);
}

.sr-proof__panels .sr-proof__client,
.sr-proof__panels .sr-proof__kpival {
	color: var(--sr-con-ink);
}

.sr-proof__panels .sr-proof__branche,
.sr-proof__panels .sr-proof__period,
.sr-proof__panels .sr-proof__desc,
.sr-proof__panels .sr-proof__kpilabel,
.sr-proof__panels .sr-proof__kpisub,
.sr-proof__panels .sr-proof__srcnote,
.sr-proof__panels .sr-proof__galabel {
	color: var(--sr-con-muted);
}

/* KPI tiles match .sr-proof-card__metric exactly */
.sr-proof__panels .sr-proof__kpi {
	background: var(--sr-con-tile);
	border: 1px solid var(--sr-con-line);
	border-radius: var(--radius-m, 8px);
}

.sr-proof__panels .sr-proof__kpival {
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

/* source/period chips and the pending note on the dark ground */
.sr-proof__panels .sr-proof__source {
	color: var(--sr-con-muted);
	background: var(--sr-con-tile);
	border-color: var(--sr-con-line);
}

.sr-proof__panels .sr-proof__source.is-active {
	color: var(--sr-con-ink);
	background: color-mix(in srgb, var(--secondary, #009ce5) 18%, transparent);
	border-color: color-mix(in srgb, var(--secondary, #009ce5) 42%, transparent);
}

.sr-proof__panels .sr-proof__empty {
	color: var(--sr-con-muted);
	background: var(--sr-con-tile);
	border-color: var(--sr-con-line);
}

.sr-proof__panels .sr-proof__foot,
.sr-proof__panels .sr-proof__head {
	border-color: var(--sr-con-line);
}

/* keyboard focus must stay visible on the dark ground */
.sr-proof__panels :focus-visible {
	outline: 2px solid var(--secondary, #009ce5);
	outline-offset: 2px;
}

/* FIX: .sr-proof__panel paints its own white surface, which sat on top of the
   dark console container and, combined with the white text below, rendered the
   whole block blank. The panel is the console's interior now, so it carries no
   ground of its own. */
.sr-proof__panels .sr-proof__panel {
	background: transparent;
	border-color: var(--sr-con-line);
}

/* anything inside the panel that still assumes a light ground */
.sr-proof__panels .sr-proof__tabbtn,
.sr-proof__panels .sr-proof__chip {
	color: var(--sr-con-muted);
	background: var(--sr-con-tile);
	border-color: var(--sr-con-line);
}

.sr-proof__panels .sr-proof__chip.is-active,
.sr-proof__panels .sr-proof__tabbtn.is-active {
	color: var(--sr-con-ink);
	background: color-mix(in srgb, var(--secondary, #009ce5) 18%, transparent);
	border-color: color-mix(in srgb, var(--secondary, #009ce5) 42%, transparent);
}

.sr-proof__panels .sr-proof__spark { color: var(--sr-con-accent, #009ce5); }

/* "SEO Experte" badge — the gradient pill from the site's own `label` class,
   reproduced here because this component must stand alone on pages whose
   Bricks element tree does not include that global class. */
.sr-teamsel__badge {
	align-self: flex-start;
	margin: 0.6rem 0 0;
	padding: 0.5rem 1.2rem;
	color: var(--white, #fff);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	background: linear-gradient(91deg, var(--primary, #002b7f) -7%, var(--secondary, #009ce5) 110%);
	border-radius: 100vw;
}

/* Sparkline inside the proof card. Inherits the accent through currentColor,
   so the fill gradient and stroke follow the brand token. */
.sr-proof-card__chart {
	padding-inline: 2.4rem;
	background: var(--sr-con-tile);
	border-inline: 1px solid var(--sr-con-line);
	color: var(--sr-con-accent, #009ce5);
	line-height: 0;
}

.sr-proof-card__chart svg {
	width: 100%;
	height: 11rem;
	overflow: visible;
}

/* Illustrative curve — must never be mistaken for measured data. */
.sr-proof-card__chart.is-demo { position: relative; opacity: 0.75; }

.sr-proof-card__chart.is-demo::after {
	position: absolute;
	inset-inline-start: 2.4rem;
	inset-block-start: 0.6rem;
	padding: 0.3rem 0.8rem;
	content: "Beispielkurve — keine Messdaten";
	color: var(--sr-con-muted, #90c0e0);
	font-size: 1.1rem;
	letter-spacing: 0.04em;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 100vw;
}

/* role line under the name, when the title says more than the label */
.sr-teamsel__role {
	margin: 0;
	color: var(--neutral-semi-dark, #6e7072);
	font-size: 1.3rem;
	line-height: 1.35;
}

/* ==========================================================================
   Homepage hero: text left, proof card right
   --------------------------------------------------------------------------
   Scoped to .home on purpose. .hero__container is a Bricks global class and
   changing it in this stylesheet would alter every page that uses it; the
   two-column treatment is specific to the homepage hero.
   Below 993px it falls back to the stacked order the global class already
   defines, so the card drops under the copy on tablet and phone.
   ========================================================================== */

@media (min-width: 993px) {
	.home .hero__container {
		flex-direction: row;
		align-items: center;
		gap: var(--grid-gap, 2.4rem);
	}

	.home .hero__container > .hero__content-wrapper {
		flex: 1 1 58%;
		max-width: 58%;
	}

	.home .hero__container > .brxe-shortcode {
		flex: 0 1 40rem;
		min-width: 0;
		margin-inline-start: auto;
	}
}

@media (max-width: 992px) {
	.home .hero__container > .brxe-shortcode {
		margin-block-start: var(--space-m, 2.4rem);
		max-inline-size: 48rem;
	}
}

/* ==========================================================================
   Homepage client logos: continuous, slow marquee
   --------------------------------------------------------------------------
   No carousel plugin is added — the brief forbids one, and the site already
   ships enough JS. This is a CSS animation over a list the child theme
   duplicates once (sr-logo-marquee.js, ~20 lines) so the loop is seamless.

   Motion is deliberately slow and linear: a logo strip is peripheral
   reassurance, not something to pull the eye off the H1. It pauses on hover
   and on keyboard focus, and stops entirely under prefers-reduced-motion,
   where the strip falls back to a static row.
   ========================================================================== */

.home .kunden-logo-container {
	display: flex;
	/* Bricks containers are flex-column by default — setting display:flex alone
	   leaves the direction as column and stacks the logos full-width. */
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--grid-gap, 2.4rem);
}

.home .kunden-logo-container > .kunden-card {
	flex: 0 0 auto;
	inline-size: 15rem;
	min-width: 0;
}

/* The marquee viewport: clip the overflow and fade both edges so logos
   enter and leave instead of being cut off mid-glyph. */
.home .sr-logo-marquee {
	position: relative;
	/* The track inside is width:max-content, so the viewport must be clamped
	   explicitly — otherwise it stretches to the full track (~7000px) and
	   nothing is ever clipped. */
	inline-size: min(100%, var(--content-width, 120rem));
	margin-inline: auto;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.home .sr-logo-marquee .kunden-logo-container {
	width: max-content;
	animation: sr-logo-scroll var(--sr-marquee-duration, 90s) linear infinite;
	will-change: transform;
}

/* Hover and keyboard focus both pause it, so a visitor can actually look at
   a logo they recognised. */
.home .sr-logo-marquee:hover .kunden-logo-container,
.home .sr-logo-marquee:focus-within .kunden-logo-container {
	animation-play-state: paused;
}

/* -50% because the list is duplicated exactly once: at the halfway point the
   second copy sits where the first began, so the reset is invisible. */
@keyframes sr-logo-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.home .sr-logo-marquee .kunden-logo-container {
		animation: none;
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
	}
	.home .sr-logo-marquee { mask-image: none; -webkit-mask-image: none; }
	/* the duplicated half is redundant once it no longer scrolls */
	.home .sr-logo-marquee .kunden-logo-container > [data-sr-clone] { display: none; }
}