/*
 * elbCommerce — Sektions-CSS
 *
 * Diese Datei laeuft in BEIDEN Kontexten: im Frontend (wp_enqueue_style) und im
 * Site-Editor-Canvas (add_editor_style). Deshalb nur eine Datei statt zwei.
 *
 * Regel 1: Was theme.json ausdruecken kann, steht NICHT hier. Eine Regel doppelt
 *          zu pflegen ist der Weg, auf dem Editor und Frontend auseinanderlaufen.
 * Regel 2: Nie ein rohes Hex. Immer var(--wp--preset--*) oder var(--wp--custom--*),
 *          damit eine Token-Aenderung in theme.json ueberall durchschlaegt.
 */

/* ------------------------------------------------------------------ *
 * Grundlagen
 * ------------------------------------------------------------------ */

html {
	scroll-behavior: smooth;
	/* Ohne diesen Offset landet jeder Anker-Sprung unter dem Sticky-Header. */
	scroll-padding-top: var(--wp--custom--scroll-offset, 64px);
}

/* Angemeldet kommt die Adminleiste oben drauf — der Sprungversatz waechst mit.
   :has() statt einer Klasse an <html>, weil `admin-bar` an <body> haengt. */
html:has(body.admin-bar) { scroll-padding-top: calc(var(--wp--custom--scroll-offset, 64px) + 32px); }

@media screen and (max-width: 782px) {
	html:has(body.admin-bar) { scroll-padding-top: calc(var(--wp--custom--scroll-offset, 64px) + 46px); }
}

@media screen and (max-width: 600px) {
	html:has(body.admin-bar) { scroll-padding-top: var(--wp--custom--scroll-offset, 64px); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body { -webkit-font-smoothing: antialiased; }

/* Sektionsrhythmus: 80px oben und unten, im Konzept auch mobil unveraendert. */
.ec-section {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

/* Abstand unter dem Sektionskopf (Eyebrow + H2 + Lead). */
.ec-section-head { margin-bottom: var(--wp--preset--spacing--60); }

/* Zentrierter Sektionskopf — im neuen CI bei Tech-Stack, Ablauf, Warum und
   Kundenstimmen. Der Lead braucht die !important, weil .is-style-ec-lead ihn
   fuer den Normalfall links verankert (siehe dort). */
.ec-section-head.ec-center {
	text-align: center;
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.ec-center .is-style-ec-lead {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Doppelstrich unter jeder H2.
   Ein Element, zwei Striche: der box-shadow ist die zweite Linie 5px darunter.
   Zwei Pseudo-Elemente braeuchte es nur, wenn die Linien verschiedene Farben
   haetten. */
h2.wp-block-heading {
	position: relative;
	padding-bottom: 16px;
}

h2.wp-block-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 2px;
	background: var(--wp--preset--color--ink);
	box-shadow: 0 5px 0 var(--wp--preset--color--ink);
}

.ec-center h2.wp-block-heading::after {
	left: 50%;
	transform: translateX(-50%);
}

.ec-dark h2.wp-block-heading::after {
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--base);
	box-shadow: 0 5px 0 var(--wp--preset--color--base);
}

/* ------------------------------------------------------------------ *
 * Bewegung
 *
 * Alle Reveal- und Hover-Effekte des Konzepts haengen an diesen drei Bloecken.
 * ------------------------------------------------------------------ */

/*
 * Einblenden beim Reinscrollen. Versteckt wird erst, NACHDEM reveal.js
 * .ec-reveal-armed gesetzt hat — ohne JavaScript steht der Inhalt also da,
 * statt dauerhaft auf opacity:0 zu haengen.
 *
 * Verschoben wird ueber `translate`, nicht ueber `transform`: der Hover-Lift
 * der Karten benutzt `transform`, beide kombinieren sich dann, statt sich
 * gegenseitig zu ueberschreiben.
 */
.ec-reveal-armed > * {
	opacity: 0;
	translate: 0 18px;
	transition: opacity .5s ease, translate .35s ease;
}

.ec-reveal-armed > .is-visible {
	opacity: 1;
	translate: none;
}

/* Hover-Lift der Buttons. Der Schatten selbst steht in theme.json
   (elements.button.shadow), nur die Skalierung geht dort nicht. */
.wp-block-button__link {
	transition: transform .18s, background-color .18s, box-shadow .18s;
}

.wp-block-button__link:hover {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.ec-reveal-armed > *,
	.ec-reveal-armed > .is-visible {
		opacity: 1;
		translate: none;
		transition: none;
	}

	.wp-block-button__link:hover { transform: none; }
}

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */

/*
 * Sticky gehoert an den Template-Part, NICHT an .ec-header.
 *
 * WordPress rendert den Header-Part als <header class="wp-block-template-part">
 * und diese Huelle ist exakt so hoch wie ihr Inhalt. Ein sticky-Element klebt
 * aber nur innerhalb des Kastens seines Elternelements — sass die Regel an
 * .ec-header, war nach 79px Schluss und der Kopf scrollte weg. Eine Ebene
 * hoeher ist das Elternelement .wp-site-blocks und damit die ganze Seite.
 */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/*
 * Angemeldet steht die Adminleiste als position:fixed ueber der Seite. Ein
 * sticky-Kopf mit top:0 klebt an der Viewport-Oberkante und verschwindet
 * dahinter — die Navigation ist dann nicht mehr bedienbar. Die Hoehen sind
 * die von Core:
 *
 *   ab 783px   32px, fixiert
 *   601-782px  46px, fixiert
 *   bis 600px  nicht fixiert, scrollt mit weg -> kein Versatz noetig
 *
 * Die Reihenfolge der Media Queries ist deshalb absteigend: die 600px-Regel
 * muss die 782px-Regel schlagen koennen.
 */
body.admin-bar header.wp-block-template-part { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar header.wp-block-template-part { top: 46px; }
}

@media screen and (max-width: 600px) {
	body.admin-bar header.wp-block-template-part { top: 0; }
}

.ec-header {
	background: rgb(255 255 255 / 96%);
	border-bottom: 1px solid var(--wp--preset--color--line);
	backdrop-filter: blur(8px);
	transition: box-shadow .25s ease;
}

.ec-header-inner {
	min-height: var(--wp--custom--header-height);
	transition: min-height .25s ease;
}

/*
 * „Lebender" Kopf: header.js setzt .ec-scrolled an <html>, sobald gescrollt
 * wird. Die Hoehe faellt von 78px auf 50px, Termin-Button und Navigationslinks
 * werden flacher,
 * und ein weicher Schatten loest die Sektion darunter ab — die Trennlinie
 * allein traegt nicht mehr, sobald Inhalt darunter durchlaeuft.
 *
 * Nur das Innenmass des Buttons wird angefasst, nicht seine Schrift: sonst
 * springt die Beschriftung und die Kopfzeile wirkt unruhig.
 */
.ec-scrolled .ec-header {
	box-shadow: var(--wp--custom--shadow--card);
}

.ec-scrolled .ec-header-inner {
	min-height: var(--wp--custom--header-height-compact);
}

.ec-header .wp-block-button__link {
	transition: padding .25s ease, transform .18s, background-color .18s, box-shadow .18s;
}

.ec-scrolled .ec-header .wp-block-button__link {
	padding-top: 7px;
	padding-bottom: 7px;
}

/* Die Navigationslinks muessen mitgehen, sonst sind sie bei 50px Kopfhoehe das
   hoechste Element und bestimmen die Hoehe statt des Buttons. Nur oben und
   unten — seitlich bleibt der Abstand, sonst rutschen die Punkte zusammen. */
.ec-scrolled .ec-nav a,
.ec-scrolled .ec-nav .wp-block-navigation-item__content {
	padding-top: 6px;
	padding-bottom: 6px;
}

@media (prefers-reduced-motion: reduce) {
	/* Der kompakte Zustand bleibt — nur der Uebergang entfaellt. Die
	   Platzersparnis will man gerade dann. */
	.ec-header,
	.ec-header-inner,
	.ec-header .wp-block-button__link,
	.ec-nav a,
	.ec-nav .wp-block-navigation-item__content { transition: none; }
}

/* Wortmarke.
   Das Konzept setzt sie als Text, nicht als Bild — dadurch ist sie in jeder
   Groesse scharf und folgt automatisch dem ink-Token. Soll spaeter doch eine
   SVG-Datei rein, ersetzt sie in header.html/footer.html diesen Absatz. */
.ec-brand {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.2px;
	line-height: 1;
	margin: 0;
}

.ec-brand strong { font-weight: 800; }

/* Links sind global teal — die Wortmarke ist die Ausnahme. */
.ec-brand a,
.ec-brand a:hover,
.ec-brand a:focus {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ec-header .wp-block-site-logo img {
	display: block;
	width: auto;
	max-height: 46px;
}

/* Wortmarke als Bild. Die Hoehe faehrt mit der Kopfzeile mit, sonst sprengt
   sie die kompakte Leiste (50px). */
.ec-brand-logo { margin: 0; line-height: 0; }

/* Nur die Hoehe wird gesetzt, die Breite folgt. Im Bild-Block darf deshalb
   KEINE Inline-Breite stehen — die schlaegt als Inline-Style jedes width:auto
   und quetscht die Wortmarke, sobald die Kopfzeile zusammenrueckt. */
.ec-brand-logo img {
	display: block;
	width: auto;
	height: 32px;
	transition: height .25s ease;
}

.ec-scrolled .ec-header .ec-brand-logo img { height: 26px; }

@media (prefers-reduced-motion: reduce) {
	.ec-brand-logo img { transition: none; }
}

.ec-nav a,
.ec-nav .wp-block-navigation-item__content {
	padding: 9px 14px;
	color: var(--wp--preset--color--ink);
	font-size: 14.5px;
	font-weight: 700;
	border-radius: 6px;
	text-decoration: none;
	/* padding animiert mit, weil .ec-scrolled die Linkhoehe verringert. */
	transition: background .18s, color .18s, padding .25s ease;
}

.ec-nav a:hover,
.ec-nav .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--accent-deep);
	text-decoration: none;
}

@media (max-width: 820px) {
	/* Zwei Klassen, damit die Regel WPs .wp-block-buttons-is-layout-flex
	   (display:flex) schlaegt — die wird nach dem Theme-CSS eingebunden.
	   Bleibt der Button stehen, sprengt die nowrap-Kopfzeile den Viewport
	   und die gesamte Seite laeuft horizontal ueber. */
	.ec-header .ec-header-cta { display: none; }
}

/* ------------------------------------------------------------------ *
 * Typografie-Utilities (registrierte Block-Styles)
 * ------------------------------------------------------------------ */

/* Teal, nicht Terrakotta: das neue CI zieht den Eyebrow zur Akzentfarbe.
   Terrakotta bleibt den KPI-Zahlen, den Punktmarkern der Ausgangslage und den
   Anfuehrungszeichen der Kundenstimmen vorbehalten. */
.is-style-ec-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-deep);
	margin-bottom: 10px;
}

.is-style-ec-lead {
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--ink-soft);
	max-width: 680px;
	/* WPs constrained-Layout setzt margin-left/right: auto !important und wuerde
	   jedes schmalere Kind zentrieren. Nur !important kommt dagegen an.
	   Der zentrierte Fall steht als Ausnahme unter .ec-dark. */
	margin-left: 0 !important;
	margin-right: auto !important;
}

.is-style-ec-tag {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-deep);
	margin-bottom: 12px;
}

.is-style-ec-benefit {
	color: var(--wp--preset--color--accent-deep);
	font-weight: 700;
	font-style: italic;
	font-size: 13.5px;
	margin-bottom: 12px;
}

.is-style-ec-stat {
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
	margin-bottom: 10px;
}

.is-style-ec-note {
	color: var(--wp--preset--color--accent-deep);
	font-size: var(--wp--preset--font-size--sm);
	font-style: italic;
	margin-top: 18px;
}

.is-style-ec-meta {
	color: var(--wp--preset--color--gray);
	font-size: var(--wp--preset--font-size--sm);
}

.is-style-ec-stack-tag {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--wp--preset--color--accent-deep);
}

.is-style-ec-chip {
	display: inline-block;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	padding: 8px 16px;
	border-radius: var(--wp--custom--radius);
	transition: background .18s, border-color .18s, color .18s, transform .18s;
}

/* Jeder zweite Chip leicht getont — rein positional, deshalb unkritisch
   gegenueber Umsortieren im Editor. */
.ec-chips > .is-style-ec-chip:nth-child(even) {
	background: var(--wp--custom--tint--accent-soft);
	border-color: var(--wp--custom--tint--accent-soft-line);
}

.is-style-ec-chip:hover {
	background: var(--wp--custom--tint--accent-soft-hi);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-deep);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.is-style-ec-chip { transition: none; }
	.is-style-ec-chip:hover { transform: none; }
}

/* Schrittnummern des Ablaufs: farbige Plakette statt der grossen grauen Ziffer
   aus Konzept v1. Drei registrierte Styles statt Basis-Style + Farb-Style —
   der Inspektor laesst nur EINEN Block-Style gleichzeitig zu, ein zweiter
   waere eine frei getippte Klasse und beim Kopieren des Blocks weg. */
.is-style-ec-step-1,
.is-style-ec-step-2,
.is-style-ec-step-3 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--base);
	margin: 0 0 18px;
}

.is-style-ec-step-1 { background: var(--wp--preset--color--ink); }
.is-style-ec-step-2 { background: var(--wp--preset--color--accent); }
.is-style-ec-step-3 { background: var(--wp--preset--color--warm); }

/* ------------------------------------------------------------------ *
 * Karten
 * ------------------------------------------------------------------ */

/*
 * EIN Schattensystem fuer alle Karten: ruhend --shadow--card, beim Hover
 * --shadow--card-hover plus 3px Lift. Das Konzept variiert die Werte je
 * Sektion um ein paar Prozent; eine Stufe fuer alle haelt die Seite ruhiger
 * und die Pflege bei einer Stelle.
 */
.is-style-ec-card,
.ec-testi {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--custom--shadow--card);
	transition: box-shadow .2s, transform .2s;
}

.is-style-ec-card { overflow: hidden; }

.is-style-ec-card:hover,
.ec-testi:hover {
	box-shadow: var(--wp--custom--shadow--card-hover);
	transform: translateY(var(--wp--custom--lift));
}

@media (prefers-reduced-motion: reduce) {
	.is-style-ec-card,
	.ec-testi { transition: none; }

	.is-style-ec-card:hover,
	.ec-testi:hover { transform: none; }
}

/* Achte Leistungskachel: dunkle Einladung statt Leistung.
   Eigenstaendig statt zusaetzlich zu is-style-ec-card — der Inspektor laesst
   nur EINEN Block-Style gleichzeitig zu. */
.is-style-ec-cta-tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius);
	padding: 28px;
}

.is-style-ec-cta-tile h3 { color: var(--wp--preset--color--base); font-size: 17px; margin-bottom: 8px; }
.is-style-ec-cta-tile p  { color: var(--wp--custom--tint--on-dark); font-size: var(--wp--preset--font-size--base); margin-bottom: 16px; }
.is-style-ec-cta-tile a  { color: var(--wp--preset--color--accent); font-weight: 700; }

/* Teal hervorgehobene Karte — im IKOS-Block auf ein Modul angewandt. */
.is-style-ec-highlight {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.is-style-ec-highlight :is(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--base); }
.is-style-ec-highlight p { color: var(--wp--preset--color--base-alt); }

.is-style-ec-placeholder {
	border: 2px dashed var(--wp--preset--color--line);
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--gray);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-align: center;
	padding: 40px 24px;
	border-radius: var(--wp--custom--radius);
}

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */

/* Kein Hintergrundbild mehr — der Hero ist eine ruhige Ink-Flaeche. Deshalb
   auch kein wp:cover mehr im Pattern, sondern eine schlichte Gruppe. */
.ec-hero { border-bottom: 1px solid var(--wp--preset--color--line); }
.ec-hero :is(h1, h2) { color: var(--wp--preset--color--base); }

/*
 * Intro: der Hero-Inhalt steigt beim Laden gestaffelt ein.
 *
 * Das Konzept animiert die beiden Haelften der H1 als zwei <span class="l">.
 * In core/heading ueberlebt ein solches span die erste redaktionelle
 * Bearbeitung nicht — Core's Rich Text laesst nur eine feste Liste von
 * Inline-Tags zu. Gestaffelt wird darum der ganze Hero-Stapel; die Wirkung
 * ist dieselbe, die Ueberschrift bleibt normaler Text.
 *
 * `backwards` haelt den Startzustand waehrend der Verzoegerung — ohne das
 * blitzt der Text vor dem Einsetzen der Animation auf.
 */
.ec-hero .wp-block-group > * {
	animation: ec-rise .7s cubic-bezier(.2, .7, .3, 1) backwards;
}

.ec-hero .wp-block-group > :nth-child(1) { animation-delay: .05s; }
.ec-hero .wp-block-group > :nth-child(2) { animation-delay: .17s; }
.ec-hero .wp-block-group > :nth-child(3) { animation-delay: .29s; }
.ec-hero .wp-block-group > :nth-child(4) { animation-delay: .41s; }
.ec-hero .wp-block-group > :nth-child(5) { animation-delay: .53s; }

@keyframes ec-rise {
	from { opacity: 0; transform: translateY(18px); }
}

@media (prefers-reduced-motion: reduce) {
	.ec-hero .wp-block-group > * { animation: none; }
}
.ec-hero .is-style-ec-eyebrow { color: var(--wp--preset--color--base); opacity: .85; }
.ec-hero .is-style-ec-lead { color: rgb(255 255 255 / 85%); }
.ec-hero .ec-hero-note { color: rgb(255 255 255 / 60%); font-size: var(--wp--preset--font-size--sm); }

/* Ghost-Button auf dunklem Grund: Cores is-style-outline in Weiss umgefaerbt. */
.ec-hero .is-style-outline .wp-block-button__link,
.ec-dark .is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--base);
	border-color: rgb(255 255 255 / 55%);
	background: transparent;
}

.ec-hero .is-style-outline .wp-block-button__link:hover,
.ec-dark .is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------------ *
 * KPI-Band
 * ------------------------------------------------------------------ */

.ec-kpi {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.is-style-ec-kpi-number {
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 700;
	color: var(--wp--preset--color--warm);
	line-height: 1;
	letter-spacing: -.5px;
	font-variant-numeric: tabular-nums;
	text-align: center;
	margin: 0;
}

.is-style-ec-kpi-label {
	color: var(--wp--preset--color--ink-soft);
	font-size: 12.5px;
	line-height: 1.4;
	text-align: center;
	margin-top: 8px;
}

/* ------------------------------------------------------------------ *
 * Logo-Strip
 * ------------------------------------------------------------------ */

.ec-logos { border-bottom: 1px solid var(--wp--preset--color--line); }

/*
 * Endlos-Laufband, von rechts nach links.
 *
 * .ec-logos-row ist das Fenster (auf Inhaltsbreite, maskiert), .ec-logos-track
 * die Spur, die darin wandert. Die Spur enthaelt den Logosatz VIERMAL: sie
 * verschiebt sich um genau zwei Saetze nach links und springt dann zurueck --
 * der Sprung ist unsichtbar, weil an dieser Stelle die Kopie deckungsgleich
 * ueber dem Original steht. Vier statt zwei Saetze, weil die Verschiebestrecke
 * (2 Saetze, ~1530px) breiter sein muss als das Fenster (1220px); sonst laeuft
 * am rechten Rand eine Luecke durch.
 *
 * Der Abstand kommt aus --wp--custom--logo-gap und steckt in derselben Rechnung:
 * -50% der Spur ist zwei Saetze minus dem letzten Abstand, die halbe Luecke
 * gleicht das aus. Wer den Abstand aendert, aendert ihn in theme.json -- hier
 * und in der Strecke passt er sich von selbst an.
 */
.ec-logos-row {
	overflow: hidden;
	/* Weiche Kanten statt hartem Schnitt an den Fensterraendern. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
}

.ec-logos .ec-logos-track {
	width: max-content;
	flex-wrap: nowrap;
	gap: var(--wp--custom--logo-gap);
	animation: ec-logos-marquee 40s linear infinite;
}

.ec-logos-track:hover { animation-play-state: paused; }

.ec-logos-track .wp-block-image { flex: 0 0 auto; }

.ec-logos-track img {
	height: 28px;
	width: auto;
	filter: grayscale(1);
	opacity: .65;
	transition: opacity .2s, filter .2s;
}

.ec-logos-track img:hover { filter: grayscale(0); opacity: 1; }

@keyframes ec-logos-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - var(--wp--custom--logo-gap) / 2)); }
}

/* Ohne Bewegung bleibt ein einzelner, zentrierter Satz stehen. */
@media (prefers-reduced-motion: reduce) {
	.ec-logos-row {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.ec-logos .ec-logos-track {
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
		animation: none;
	}

	.ec-logos-track .ec-logo-dup { display: none; }
}

/* ------------------------------------------------------------------ *
 * Verortung — der versetzte Stapel
 *
 * Bewusst als registrierte Block-Styles statt :nth-child(). Sobald jemand im
 * Editor eine Zeile verschiebt oder dupliziert, waeren die Abstufungen bei
 * :nth-child() vertauscht; als Style ist die Ebene eine bewusste Auswahl.
 * ------------------------------------------------------------------ */

.ec-stack .wp-block-columns {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	padding: 22px 26px;
	background: var(--wp--preset--color--base);
	align-items: center;
	margin-bottom: 12px;
}

/*
 * Staffelung der Schrift, wie im Konzept: der NAME wandert von ink ueber
 * ink-soft nach gray und wird kleiner — je weiter hinten die Ebene, desto
 * zurueckhaltender. Die Beschreibung rechts bleibt auf allen Ebenen ink-soft
 * und wird nur kleiner; sonst verliert der Satz an Lesbarkeit.
 *
 * Farbe und Groesse stehen deshalb je Ebene und NICHT in einer gemeinsamen
 * .ec-stack-strong-Regel: die hat dieselbe Spezifitaet, stuende weiter unten
 * und wuerde die Staffelung wieder einebnen. Genau das ist hier passiert.
 */
.is-style-ec-stack-1 { border-left: 6px solid var(--wp--preset--color--ink) !important; }
.is-style-ec-stack-1 strong { font-size: 17px; color: var(--wp--preset--color--ink); }
.is-style-ec-stack-1 p { font-size: 14px; }

.is-style-ec-stack-2 {
	margin-left: 26px !important;
	background: var(--wp--custom--tint--level-2-bg) !important;
	border-color: var(--wp--custom--tint--level-2-line) !important;
}

.is-style-ec-stack-2 strong { font-size: 15px; color: var(--wp--preset--color--ink-soft); }
.is-style-ec-stack-2 p { font-size: var(--wp--preset--font-size--sm); }
.is-style-ec-stack-2 .is-style-ec-stack-tag { color: var(--wp--preset--color--gray); }

.is-style-ec-stack-3 {
	margin-left: 52px !important;
	background: var(--wp--custom--tint--level-3-bg) !important;
	border-color: var(--wp--custom--tint--level-3-line) !important;
}

.is-style-ec-stack-3 strong { font-size: 14px; color: var(--wp--preset--color--gray); }
.is-style-ec-stack-3 p { font-size: 12.5px; }
.is-style-ec-stack-3 .is-style-ec-stack-tag { color: var(--wp--preset--color--gray); opacity: .75; }

.ec-stack strong { display: block; }

/* Der Tag ist ein eigener Absatz und faellt damit unter die p-Regel seiner
   Ebene. Zwei Klassen halten dagegen, sonst waere er mal 14.5, mal 13px. */
.ec-stack .is-style-ec-stack-tag { font-size: 12.5px; }

/* Icon links neben dem Namen. Die erste Spalte wird dafuer zur Flex-Zeile;
   die Zeile selbst hebt sich beim Hover leicht an. */
.ec-stack .wp-block-columns > .wp-block-column:first-child {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.ec-stack .wp-block-image { flex: 0 0 auto; margin: 2px 0 0; }

.ec-stack .wp-block-columns {
	transition: box-shadow .2s, transform .2s;
}

.ec-stack .wp-block-columns:hover {
	box-shadow: var(--wp--custom--shadow--card);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.ec-stack .wp-block-columns { transition: none; }
	.ec-stack .wp-block-columns:hover { transform: none; }
}

@media (max-width: 700px) {
	.is-style-ec-stack-2 { margin-left: 12px !important; }
	.is-style-ec-stack-3 { margin-left: 24px !important; }
}

/* ------------------------------------------------------------------ *
 * Ausgangslage — Punktmarker
 *
 * Absolut positioniert, nicht als Grid-Spalte wie im Konzept: in einem Block
 * sind die Grid-Kinder die INNEREN Bloecke, ein zusaetzlicher Absatz wuerde
 * die Spalten verschieben. Absolute Positionierung ist gegenueber der
 * Blockanzahl indifferent.
 * ------------------------------------------------------------------ */

.is-style-ec-chal-item {
	position: relative;
	padding: 22px 0 22px 40px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.is-style-ec-chal-item:first-child { border-top: 1px solid var(--wp--preset--color--line); }

.is-style-ec-chal-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 29px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--warm);
}

.is-style-ec-chal-item h3 { margin-bottom: 6px; }
.is-style-ec-chal-item p { font-size: var(--wp--preset--font-size--base); }

/* ------------------------------------------------------------------ *
 * Unsere Antwort
 * ------------------------------------------------------------------ */

/*
 * Aus der Tabellenzeile von Konzept v1 wird eine Kachel mit Haekchen.
 *
 * Das Haekchen sind zwei Pseudo-Elemente statt eines Inline-SVG: ::before ist
 * der Teal-Kreis, ::after das weisse Haekchen als Maske. Damit folgen beide
 * Farben den Tokens (eine Maske faerbt ueber background, nicht ueber die
 * Datei) und in der Kachel liegen nur die beiden Textabsaetze — ein dritter
 * Block wuerde nichts verschieben.
 */
/* Kein max-width mehr: die Breite kommt aus contentSize:820px der Gruppe,
   die Linksbuendigkeit aus ihrem justifyContent:left. Ein zusaetzliches
   max-width hier wuerde die Gruppe SELBST auf 820px setzen — und die zentriert
   WPs constrained-Layout dann mittig. Bis Konzept v1 war das noetig, weil die
   2px-Linie oben so breit sein musste wie die Zeilen; die Linie ist weg. */

.is-style-ec-answer-row {
	position: relative;
	padding: 22px 26px 22px 78px;
	border-radius: var(--wp--custom--radius);
	background: var(--wp--custom--tint--accent-soft);
}

.is-style-ec-answer-row::before {
	content: "";
	position: absolute;
	left: 26px;
	top: 24px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.is-style-ec-answer-row::after {
	content: "";
	position: absolute;
	left: 35px;
	top: 33px;
	width: 16px;
	height: 16px;
	background: var(--wp--preset--color--base);
	-webkit-mask: url("../images/icons/check.svg") center / contain no-repeat;
	mask: url("../images/icons/check.svg") center / contain no-repeat;
}

.is-style-ec-answer-to {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--md);
	margin-bottom: 4px;
}

@media (max-width: 640px) {
	.is-style-ec-answer-row { padding-left: 68px; }
	.is-style-ec-answer-row::before { left: 18px; }
	.is-style-ec-answer-row::after  { left: 27px; }
}

/* ------------------------------------------------------------------ *
 * Fuer wen — 1px-Gap als Trennlinie
 * ------------------------------------------------------------------ */

.ec-fw-grid {
	background: var(--wp--preset--color--line);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	overflow: hidden;
	gap: 1px;
}

.ec-fw-grid > .wp-block-column {
	background: var(--wp--preset--color--base);
	padding: 34px;
	margin: 0;
}

.ec-fw-grid > .wp-block-column:first-child { background: var(--wp--preset--color--base-alt); }

.ec-fw-grid .wp-block-image { margin: 0 0 16px; }

/* ------------------------------------------------------------------ *
 * IKOS — Dashboard-Visual
 *
 * Das Bild bringt Laptop-Rahmen, Schatten und Hintergrund selbst mit, hier
 * steht deshalb kein CSS-Rahmen mehr (den gab es, solange ein nackter
 * Screenshot im Visual lag — siehe Git-Historie).
 *
 * Es behaelt seine eigene Hoehe: kein aspect-ratio, kein Zuschnitt, sonst
 * wuerde der Laptop beschnitten.
 * ------------------------------------------------------------------ */

.ec-ikos-visual > * { margin: 0; }

.ec-ikos-screen img {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ *
 * IKOS
 * ------------------------------------------------------------------ */

/* Feines Raster hinter der Tech-Stack-Sektion — die einzige Sektion mit
   Textur. Der Rasterabstand steht als Token in theme.json. */
.ec-techstack {
	background-color: var(--wp--preset--color--base);
	background-image:
		linear-gradient(var(--wp--custom--tint--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--wp--custom--tint--grid-line) 1px, transparent 1px);
	background-size: var(--wp--custom--grid-size) var(--wp--custom--grid-size);
}

.ec-chips { justify-content: center; }

.ec-ikos-shell {
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-lg);
	padding: 36px;
}

.ec-ikos-mods > .wp-block-column {
	position: relative;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	padding: 18px 22px;
	transition: box-shadow .2s, transform .2s;
}

.ec-ikos-mods > .wp-block-column:hover {
	box-shadow: var(--wp--custom--shadow--card-hover);
	transform: translateY(var(--wp--custom--lift));
}

@media (prefers-reduced-motion: reduce) {
	.ec-ikos-mods > .wp-block-column { transition: none; }
	.ec-ikos-mods > .wp-block-column:hover { transform: none; }
}

/* Pfeil als Pseudo-Element: kann nicht versehentlich geloescht werden und wird
   Screenreadern nicht vorgelesen. :not(:last-child) ist hier unkritisch, weil
   rein positional — jede Karte ausser der letzten bekommt einen Pfeil. */
.ec-ikos-mods > .wp-block-column:not(:last-child)::after {
	content: "\2192";
	position: absolute;
	right: -22px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--gray);
	font-size: 18px;
	font-weight: 700;
}

.ec-ikos-mods > .wp-block-column.is-style-ec-highlight {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.ec-ikos-mods h3 { font-size: 15px; margin-bottom: 8px; }
.ec-ikos-mods p  { font-size: var(--wp--preset--font-size--sm); }

@media (max-width: 780px) {
	.ec-ikos-mods > .wp-block-column:not(:last-child)::after {
		content: "\2193";
		right: auto;
		left: 50%;
		top: auto;
		bottom: -26px;
		transform: translateX(-50%);
	}
}

/* ------------------------------------------------------------------ *
 * Leistungen — Grid, nicht Columns
 *
 * core/columns bricht nicht um; sieben Karten in drei Spalten gehen damit nicht.
 * layout:{"type":"grid"} bricht nativ um und bleibt im Inspektor einstellbar.
 * ------------------------------------------------------------------ */

.ec-svc-top { border-bottom: 3px solid var(--wp--preset--color--ink); }
.ec-svc-top h3 { font-size: 16.5px; margin: 0; }
.ec-svc-top .wp-block-image { flex: 0 0 auto; margin: 0; }
.ec-svc-body { padding: 22px; }
.ec-svc-body p { font-size: var(--wp--preset--font-size--base); }

/* ------------------------------------------------------------------ *
 * Ablauf
 *
 * Aus den drei Spalten unter einer Trennlinie werden im neuen CI drei Karten
 * mit farbiger Schrittnummer. Die Kartenoptik kommt aus is-style-ec-card,
 * hier steht nur das Innenmass.
 * ------------------------------------------------------------------ */

.ec-steps > .wp-block-column { padding: 28px; }
.ec-steps h3 { margin-bottom: 8px; }
.ec-steps p  { font-size: var(--wp--preset--font-size--base); }

/* ------------------------------------------------------------------ *
 * Warum elbCommerce
 * ------------------------------------------------------------------ */

.ec-trust .wp-block-image { margin: 0 0 14px; }

/* ------------------------------------------------------------------ *
 * Kundenstimmen
 * ------------------------------------------------------------------ */

/*
 * Die Kacheln kommen aus dem Shortcode [kundenstimmen] (mu-plugin), nicht mehr
 * als einzelne Bloecke. Das Raster muss deshalb hier stehen: WPs Grid-Layout
 * erzeugt seine Spalten ueber eine generierte wp-container-Klasse, die ein
 * Shortcode nicht hat.
 */
.ec-testi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--wp--preset--spacing--50);
}

/* Rahmen, Radius, Schatten und Hover teilt sich .ec-testi mit .is-style-ec-card
   (siehe Abschnitt „Karten"). Hier bleibt nur das, was die Zitatkachel
   eigenes hat. */
.ec-testi {
	padding: 28px;
	margin: 0;
}

.ec-testi blockquote { margin: 0; border: 0; padding: 0; }

.ec-testi blockquote::before {
	content: "\201C";
	display: block;
	color: var(--wp--preset--color--warm);
	font-size: 32px;
	font-family: var(--wp--preset--font-family--heading);
	line-height: .5;
	margin-bottom: 8px;
}

.ec-testi blockquote p { font-size: 15.5px; line-height: 1.6; color: var(--wp--preset--color--ink-soft); }
/* Namenszeile: Portrait links, darueber-/darunterliegend Name und Funktion.
   Das Portrait ist optional — ohne Bild rueckt der Text einfach nach links,
   weil das <img> dann gar nicht erst ausgegeben wird. */
.ec-testi cite {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--gray);
	font-style: normal;
}

.ec-testi-portrait {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.ec-testi-person { min-width: 0; }
.ec-testi cite strong { display: block; color: var(--wp--preset--color--ink); font-weight: 700; }
.ec-testi-role { display: block; }

/* ------------------------------------------------------------------ *
 * FAQ — core/details
 * ------------------------------------------------------------------ */

.ec-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 18px 0;
}

.ec-faq .wp-block-details:first-child { border-top: 1px solid var(--wp--preset--color--line); }

.ec-faq summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	font-size: 15.5px;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.ec-faq summary::-webkit-details-marker { display: none; }

.ec-faq summary::after {
	content: "+";
	font-size: 20px;
	color: var(--wp--preset--color--accent);
	font-weight: 400;
	flex-shrink: 0;
}

.ec-faq .wp-block-details[open] summary::after { content: "\2013"; }

.ec-faq .wp-block-details > *:not(summary) {
	margin-top: 12px;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink-soft);
	max-width: 70ch;
}

/* ------------------------------------------------------------------ *
 * Termin-CTA (dunkel)
 * ------------------------------------------------------------------ */

.ec-dark :is(h1, h2, h3) { color: var(--wp--preset--color--base); }
.ec-dark .is-style-ec-eyebrow { color: var(--wp--preset--color--accent); }
.ec-dark .is-style-ec-lead { color: rgb(255 255 255 / 78%); margin-left: auto !important; margin-right: auto !important; }
.ec-dark .is-style-ec-meta { color: rgb(255 255 255 / 55%); }

.ec-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

.ec-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------------ *
 * Kontaktformular (Shortcode [kontaktformular], mu-plugin elbcommerce-anfrage)
 *
 * Masse und Farben aus dem Konzept (.form-wrap, .qual/.f3). Das Formular
 * ist eigenes Markup, kein Zoho-iframe — alles hier greift direkt.
 * ------------------------------------------------------------------ */

.ec-form-wrap {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-lg);
	padding: 36px;
}

.ec-anfrage-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

@media (max-width: 640px) {
	.ec-anfrage-row { grid-template-columns: 1fr; }
	.ec-form-wrap { padding: 24px; }
}

.ec-anfrage-field { margin-bottom: 16px; }

.ec-anfrage label {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin-bottom: 6px;
}

.ec-anfrage :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
	padding: 11px 13px;
	border-radius: 6px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
}

.ec-anfrage textarea { min-height: 110px; resize: vertical; display: block; }

.ec-anfrage :is(input, select, textarea):focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

/* Einwilligung: Checkbox neben dem Text, Label hier in normaler Schrift. */
.ec-anfrage-consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 4px 0 20px;
}

.ec-anfrage-consent input { margin-top: 3px; flex: none; accent-color: var(--wp--preset--color--accent); }

.ec-anfrage .ec-anfrage-consent label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}

/* Der Knopf ist ein <button>, kein core/button — Farben kommen ueber
   wp-element-button aus theme.json. */
.ec-anfrage button[type="submit"] {
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein normales Feld.
   Nicht display:none — das ueberspringen manche Bots gezielt. */
.ec-anfrage-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ec-anfrage-error {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--warm);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
}

.ec-anfrage-done { text-align: center; padding: 24px 0; }
.ec-anfrage-done p { margin: 0; }

.ec-anfrage-done .ec-anfrage-done-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin-bottom: 8px;
}

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */

.ec-footer { border-top: 1px solid var(--wp--preset--color--line); }
.ec-footer .wp-block-site-logo img { max-height: 46px; width: auto; }
.ec-footer .ec-brand-logo { margin-bottom: 12px; }
.ec-footer h4 { font-size: var(--wp--preset--font-size--sm); margin-bottom: 12px; }
.ec-footer p { font-size: 13.5px; line-height: 1.7; }

.ec-footer-links { list-style: none; padding-left: 0; margin: 0; }
.ec-footer-links li { padding: 5px 0; }

.ec-footer-links a {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--base);
	text-decoration: none;
}

.ec-footer-links a:hover { color: var(--wp--preset--color--accent-deep); }

.ec-impressum {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 20px;
	margin-top: 12px;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-soft);
}

.ec-footer-bottom {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 22px;
	font-size: 12.5px;
	color: var(--wp--preset--color--gray);
}

/* ------------------------------------------------------------------ *
 * Seitenkopf der Unterseiten
 * ------------------------------------------------------------------ */

.ec-page-header { border-bottom: 1px solid var(--wp--preset--color--line); }
.ec-post-item + .ec-post-item { border-top: 1px solid var(--wp--preset--color--line); }