/*
 * Sektions-Styling nach Original-Vermessung (Task 6b).
 * Alle Werte stammen aus dem Original-Markup/CSS von ewerle-gmbh.de
 * (referenz/webroot-2026-09-06, Bundler-Template + Komponente) —
 * nicht geschätzt, nicht gerundet. Soll-Ist-Protokoll: docs/fidelity-abgleich.md
 */

/* Grundlagen ------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}
/* Original setzt global border-box — nötig u. a. für Award-Kacheln (132px inkl. Padding) */
[class*="ewerle-"],
[class*="ewerle-"] * {
	box-sizing: border-box;
}
body {
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
.ewerle-section,
.ewerle-hero,
.ewerle-zwischen-cta {
	scroll-margin-top: 96px;
}
/* Sektionen stoßen wie im Original bündig aneinander (kein Block-Gap) */
.wp-block-post-content {
	margin-block-start: 0;
}
/* Absolut positionierte Vollflächen-Ebenen dürfen keinen Block-Gap-Versatz
   bekommen (WP: "> * + *" erhält margin-block-start) — sonst heller Streifen
   an der Oberkante von S11/K11 (Abnahme-Finding 3). */
.ewerle-zwischen-cta-foto,
.ewerle-zwischen-cta-overlay,
.ewerle-hero-glow-orange,
.ewerle-hero-glow-blau,
.ewerle-hero-dreieck-1,
.ewerle-hero-dreieck-2 {
	margin: 0 !important;
}
.wp-block-post-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
footer.wp-block-template-part,
header.wp-block-template-part {
	margin-block-start: 0;
	margin-block-end: 0;
}
::selection {
	background: #E8821A;
	color: #fff;
}

/* Mesh-Hintergründe (Original: 3 Radial-Verläufe über Navy) -------------- */
.ewerle-mesh-a {
	background:
		radial-gradient(120% 90% at 82% 6%, #3A578F 0%, rgba(58, 87, 143, 0) 52%),
		radial-gradient(115% 120% at 6% 24%, #223A64 0%, rgba(34, 58, 100, 0) 55%),
		radial-gradient(130% 120% at 50% 118%, #0B1424 0%, rgba(11, 20, 36, 0) 60%),
		#16233E !important;
}
.ewerle-mesh-b {
	background:
		radial-gradient(120% 100% at 85% 8%, #3A578F 0%, rgba(58, 87, 143, 0) 52%),
		radial-gradient(115% 120% at 8% 20%, #223A64 0%, rgba(34, 58, 100, 0) 55%),
		radial-gradient(130% 120% at 50% 112%, #0B1424 0%, rgba(11, 20, 36, 0) 60%),
		#16233E !important;
}
.ewerle-mesh-fahrplan {
	background:
		radial-gradient(120% 90% at 82% 6%, #3A578F 0%, rgba(58, 87, 143, 0) 50%),
		radial-gradient(115% 115% at 8% 22%, #223A64 0%, rgba(34, 58, 100, 0) 55%),
		radial-gradient(130% 120% at 55% 108%, #0B1424 0%, rgba(11, 20, 36, 0) 60%),
		#16233E !important;
}
.ewerle-mesh-flach {
	background:
		radial-gradient(120% 100% at 85% 8%, #3A578F 0%, rgba(58, 87, 143, 0) 52%),
		radial-gradient(115% 120% at 8% 20%, #223A64 0%, rgba(34, 58, 100, 0) 55%),
		#14213A !important;
}

/* Buttons (CTA, Original: Orange-Radialverlauf) --------------------------- */
.ewerle-btn .wp-block-button__link {
	background:
		radial-gradient(120% 130% at 10% 0%, #E8921F 0%, rgba(232, 146, 31, 0) 55%),
		radial-gradient(130% 130% at 100% 100%, #8F4405 0%, rgba(143, 68, 5, 0) 55%),
		#B85F09 !important;
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	padding: 20px 40px;
	border-radius: 10px;
	box-shadow: 0 18px 38px -14px rgba(232, 130, 26, .7);
	transition: transform .35s cubic-bezier(.16, .8, .3, 1), box-shadow .35s;
}
.ewerle-btn .wp-block-button__link:hover,
.ewerle-btn .wp-block-button__link:focus {
	transform: translateY(-8px);
}
.ewerle-cta-sub {
	display: block;
	font-size: 13px;
	font-weight: 400;
	opacity: .85;
	margin-top: 2px;
}

/* Header (Original: fixiert, transparent -> dunkel mit Blur beim Scrollen;
   hier sticky als flussverträgliche Annäherung) --------------------------- */
/* Original: Header fixiert, anfangs transparent über dem Hero, ab 40px
   Scroll dunkel abgesetzt (rgba(16,23,40,.92) + Blur + Schatten). */
header.wp-block-template-part:has(.ewerle-header) {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}
.ewerle-header {
	background: transparent;
	transition: background .35s, box-shadow .35s;
	border-bottom: 1px solid transparent;
}
.ewerle-header.is-scrolled,
html:not(.ewerle-js) .ewerle-header {
	background: rgba(16, 23, 40, .92);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 8px 30px -12px rgba(0, 0, 0, .5);
	border-bottom-color: rgba(255, 255, 255, .08);
}
/* Seiten ohne Hero: Platz für den fixierten Header schaffen */
body.ewerle-ohne-hero {
	padding-top: 76px;
}
html:not(.ewerle-js) body {
	padding-top: 76px;
}
html:not(.ewerle-js) body:has(.ewerle-hero) {
	padding-top: 0;
}
.ewerle-header-inner {
	align-items: center;
	padding: clamp(15px, 2.2vw, 20px) clamp(18px, 4vw, 48px);
	gap: 20px;
	transition: padding .35s cubic-bezier(.16, .8, .3, 1);
}
.ewerle-header.is-scrolled .ewerle-header-inner {
	padding-top: clamp(9px, 1.4vw, 13px);
	padding-bottom: clamp(9px, 1.4vw, 13px);
}
.ewerle-header .ewerle-logo {
	margin: 0;
	flex-shrink: 0;
}
.ewerle-header .ewerle-logo img {
	display: block;
	height: 34px;
	width: auto;
	transition: height .35s;
}
.ewerle-header.is-scrolled .ewerle-logo img {
	height: 28px;
}
.ewerle-header-cta {
	flex-shrink: 0;
	margin: 0;
}
/* Header-CTA: kleinere Button-Variante (Original: 15px/12px 22px/Radius 8) */
.ewerle-header-cta .ewerle-btn .wp-block-button__link {
	font-size: 15px;
	padding: 12px 22px;
	border-radius: 8px;
	box-shadow: 0 10px 24px -10px rgba(232, 130, 26, .7);
	white-space: nowrap;
}
.ewerle-header-cta .ewerle-btn .wp-block-button__link:hover,
.ewerle-header-cta .ewerle-btn .wp-block-button__link:focus {
	transform: none;
}
/* TÜV-Siegel in der Navigation (Original: 64px hoch, weißer Grund) */
.ewerle-header-tuv {
	flex-shrink: 0;
	line-height: 0;
}
.ewerle-header-tuv img {
	height: 64px;
	width: auto;
	background: var(--wp--preset--color--weiss);
	border-radius: 6px;
	padding: 4px;
	display: block;
}
@media (max-width: 1120px) {
	.ewerle-header-tuv {
		display: none;
	}
}



/* Eigene Hauptnavigation (Original: deskNavStyle + servicesMenuStyle) ----- */
.ewerle-header {
	position: relative;
}
.ewerle-nav--eigen {
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 2.6vw, 40px);
}
.ewerle-nav-link {
	color: #fff;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: .5px;
	padding: 8px 0;
	text-decoration: none;
	white-space: nowrap;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.ewerle-nav-link:hover,
.ewerle-nav-link:focus {
	color: var(--wp--preset--color--orange-hell);
}
/* Dropdown (Original: Hover-Brücke padding-bottom 16 / margin-bottom -16) */
.ewerle-dropdown {
	position: relative;
	padding-bottom: 16px;
	margin-bottom: -16px;
}
.ewerle-caret {
	transition: transform .28s;
}
.ewerle-dropdown.is-offen .ewerle-caret {
	transform: rotate(180deg);
}
.ewerle-dropdown-panel {
	position: absolute;
	top: 100%;
	left: -24px;
	width: 320px;
	background: #16233E;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 14px;
	padding: 12px;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
	display: flex;
	flex-direction: column;
	gap: 2px;
	transition: all .28s cubic-bezier(.16, .8, .3, 1);
	transform-origin: top;
	opacity: 0;
	transform: translateY(-10px) scaleY(.96);
	pointer-events: none;
	z-index: 20;
}
.ewerle-dropdown.is-offen .ewerle-dropdown-panel,
.ewerle-dropdown:hover .ewerle-dropdown-panel,
.ewerle-dropdown:focus-within .ewerle-dropdown-panel {
	opacity: 1;
	transform: translateY(0) scaleY(1);
	pointer-events: auto;
}
.ewerle-dropdown-diamant {
	position: absolute;
	top: -8px;
	left: 24px;
	width: 16px;
	height: 16px;
	background: #16233E;
	transform: rotate(45deg);
}
.ewerle-dropdown-item {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 13px 16px;
	border-radius: 10px;
	background: transparent;
	transition: background .2s;
	text-decoration: none;
}
.ewerle-dropdown-item.is-aktiv {
	background: rgba(232, 130, 26, .16);
}
a.ewerle-dropdown-item:hover,
a.ewerle-dropdown-item:focus {
	background: rgba(255, 255, 255, .06);
}
span.ewerle-dropdown-item {
	cursor: default;
}
.ewerle-dropdown-dreieck {
	flex: none;
	width: 10px;
	height: 12px;
	background: rgba(255, 255, 255, .3);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.is-aktiv .ewerle-dropdown-dreieck {
	background: #E8821A;
}
.ewerle-dropdown-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ewerle-dropdown-titel {
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	letter-spacing: .3px;
}
.ewerle-dropdown-desc {
	font-size: 13.5px;
	font-weight: 300;
	color: rgba(255, 255, 255, .6);
}
.ewerle-dropdown-badge {
	margin-left: auto;
	flex: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	color: #E8821A;
	background: rgba(232, 130, 26, .16);
	padding: 4px 9px;
	border-radius: 100px;
}
/* Burger (Original: 26px-Striche, 2.5px, Kreuz-Zustand) */
.ewerle-burger {
	display: none;
	flex-direction: column;
	gap: 6px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}
.ewerle-burger span {
	display: block;
	width: 26px;
	height: 2.5px;
	background: #fff;
	border-radius: 2px;
	transition: .3s;
}
.ewerle-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(8.5px) rotate(45deg);
}
.ewerle-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}
.ewerle-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-8.5px) rotate(-45deg);
}
/* Drawer (Original: rgba(16,23,40,.98) + blur, max-height-Übergang .45s) */
.ewerle-drawer {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	padding: 0 clamp(18px, 4vw, 48px);
	background: rgba(16, 23, 40, .98);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	overflow: hidden;
	transition: max-height .45s cubic-bezier(.16, .8, .3, 1), padding .3s, opacity .3s;
	max-height: 0;
	opacity: 0;
}
.ewerle-drawer.is-offen {
	max-height: 620px;
	opacity: 1;
	padding-bottom: 40px;
}
.ewerle-drawer-link {
	color: #fff;
	font-size: 26px;
	font-weight: 700;
	padding: 14px 0;
	border-top: 1px solid rgba(255, 255, 255, .1);
	text-decoration: none;
}
.ewerle-drawer-link:first-child {
	border-top: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.ewerle-drawer-label {
	font-size: 14px;
	letter-spacing: 3px;
	font-weight: 700;
	color: #E8821A;
	padding-top: 18px;
}
.ewerle-drawer-leistung {
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, .85);
	font-size: 20px;
	font-weight: 300;
	padding: 9px 0;
	text-decoration: none;
}
.ewerle-drawer-leistung.is-aktiv {
	color: #E8821A;
	font-weight: 700;
}
span.ewerle-drawer-leistung {
	cursor: default;
}
.ewerle-drawer-badge {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .5px;
	color: #E8821A;
	background: rgba(232, 130, 26, .16);
	padding: 3px 9px;
	border-radius: 100px;
}
.ewerle-drawer-cta {
	margin-top: 22px;
	background:
		radial-gradient(120% 130% at 10% 0%, #E8921F 0%, rgba(232, 146, 31, 0) 55%),
		radial-gradient(130% 130% at 100% 100%, #8F4405 0%, rgba(143, 68, 5, 0) 55%),
		#B85F09;
	color: #fff;
	text-align: center;
	padding: 20px;
	border-radius: 8px;
	font-size: 20px;
	font-weight: 700;
	text-decoration: none;
}
/* Footer-Leistungen mit „in Kürze"-Badges (Original: footItemStyle) */
.ewerle-footer-liste .ewerle-foot-leistung {
	display: flex;
	align-items: center;
	gap: 8px;
}
span.ewerle-foot-leistung {
	color: rgba(255, 255, 255, .6);
	font-size: 15px;
	font-weight: 300;
	cursor: default;
}
.ewerle-foot-badge {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .5px;
	color: #E8821A;
	background: rgba(232, 130, 26, .16);
	padding: 2px 7px;
	border-radius: 100px;
}

@media (max-width: 1023px) {
	.ewerle-nav--eigen {
		display: none;
	}
	.ewerle-burger {
		display: flex;
	}
}
@media (max-width: 781px) {
	.ewerle-header-cta,
	.ewerle-header-tuv {
		display: none;
	}
	.ewerle-header .ewerle-logo img {
		height: 28px;
	}
}

/* Footer (Original: #0E1728, Spaltentitel weiß, Links 15px/300/.6) -------- */
.ewerle-footer {
	background: #0E1728 !important;
	padding-top: clamp(56px, 8vw, 90px);
	padding-bottom: 40px;
}
.ewerle-footer-grid {
	align-items: flex-start;
	gap: 40px;
	margin-bottom: 36px;
}
.ewerle-footer-col {
	min-width: 180px;
}
.ewerle-footer-firma {
	min-width: 220px;
}
.ewerle-footer .ewerle-logo img {
	height: 26px;
	width: auto;
	margin-bottom: 16px;
}
.ewerle-footer-adresse {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(255, 255, 255, .6);
}
.ewerle-footer-headline {
	font-size: 14px;
	letter-spacing: 2px;
	font-weight: 700;
	color: #fff !important;
	margin: 0 0 18px;
}
.ewerle-footer-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ewerle-footer-liste li {
	margin-bottom: 12px;
}
.ewerle-footer-liste a {
	color: rgba(255, 255, 255, .6);
	font-size: 15px;
	font-weight: 300;
	text-decoration: none;
}
.ewerle-footer-liste a:hover,
.ewerle-footer-liste a:focus {
	color: var(--wp--preset--color--orange-hell);
}
.ewerle-footer .ewerle-logo a {
	line-height: 0;
}
.ewerle-footer-trenner {
	opacity: .1;
	margin: 0 0 24px;
}
.ewerle-footer-copyright {
	font-size: 13.5px;
	font-weight: 300;
	color: rgba(255, 255, 255, .4) !important;
	margin: 0;
}

@media (max-width: 781px) {
	.ewerle-footer-grid {
		flex-direction: column;
		gap: 32px;
	}
	.ewerle-footer-col,
	.ewerle-footer-firma {
		min-width: 0;
		width: 100%;
	}
}

/* ==========================================================================
   Sektions-Grundlagen
   ========================================================================== */
.ewerle-section {
	padding: clamp(70px, 10vw, 130px) clamp(18px, 4vw, 48px);
}
.ewerle-section--tight {
	padding: clamp(60px, 8vw, 100px) clamp(18px, 4vw, 48px);
}
.ewerle-section-head {
	margin: 0 auto clamp(44px, 6vw, 64px);
	text-align: center;
}
/* Headlines nicht auf die globale contentSize (1120px) einengen —
   das Original begrenzt Überschriften nur über die Sektionsbreite. */
.ewerle-section-head > h1,
.ewerle-section-head > h2,
.ewerle-section-head > h3 {
	max-width: none;
}
/* Kopf-Varianten: Original beschränkt nur einzelne Köpfe (Fahrplan 760, K12 720) */
.ewerle-section-head--schmal {
	max-width: 760px;
}
.ewerle-section-head--720 {
	max-width: 720px;
}
.ewerle-section-head h2,
.ewerle-section-head h3.wp-block-heading {
	font-size: clamp(30px, 5vw, 56px);
	font-weight: 700;
	letter-spacing: -.5px;
	line-height: normal;
	margin: 0 0 14px;
}
/* Original-Zeilenhöhen: 1.1 (S3/S10), 1.08 (S6/S7/K12) */
.ewerle-section-head h2.ewerle-h2--52 {
	line-height: 1.1;
}
.ewerle-section-head--schmal h2,
.ewerle-section-head--720 h2,
.ewerle-section-head h2:has(.ewerle-methode-mark) {
	line-height: 1.08;
}
/* Original-Varianten: 52px (S3/S10), 50px (S4/S8/S12/S15) */
.ewerle-section-head h2.ewerle-h2--52 {
	font-size: clamp(30px, 5vw, 52px);
}
.ewerle-section-head h2.ewerle-h2--50 {
	font-size: clamp(28px, 4.5vw, 50px);
}
.ewerle-section-head p:not(.ewerle-eyebrow):not(.ewerle-ehre-badge):not(.ewerle-pill) {
	font-size: clamp(17px, 2.2vw, 21px);
	font-weight: 300;
	line-height: 1.5;
	margin: 0;
}
/* Sublines, die das Original fix setzt (S4/S15: 18px, S8: 17px/1.6) */
.ewerle-section-head p.ewerle-sub-18 {
	font-size: 18px !important;
}
.ewerle-section-head p.ewerle-sub-17 {
	font-size: 17px !important;
	line-height: 1.6 !important;
}
/* Subline-Deckungen wie Original (hell: rgba(26,39,68,.65) / dunkel: rgba(255,255,255,.72)) */
.ewerle-section-head p:not(.ewerle-eyebrow):not(.ewerle-pill):not(.ewerle-ehre-badge) {
	color: rgba(26, 39, 68, .65);
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.ewerle-section-head p.has-weiss-color:not(.ewerle-eyebrow):not(.ewerle-methode-sub):not(.ewerle-ehre-badge) {
	color: rgba(255, 255, 255, .72) !important;
	opacity: 1 !important;
}
.ewerle-eyebrow {
	display: block;
	color: var(--wp--preset--color--orange) !important;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	margin: 0 0 10px;
}
/* Orange markierte Headline-Teile */
.ewerle-section-head .ewerle-mark,
.ewerle-hero .ewerle-mark {
	color: var(--wp--preset--color--orange);
}

/* Karten-Raster ------------------------------------------------------------ */
.ewerle-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 24px;
}
.ewerle-cards--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
	gap: 22px;
}
/* 4-Karten-Raster (Folgerunde 2, Punkt 8): nie 3+1 umbrechen — entweder
   eine Reihe (breiter Desktop), sauberes 2×2 oder einspaltig. Feste
   Spaltenzahlen statt auto-fit, damit die Zwischenbreiten kein 3+1
   erzeugen; die zentrierte 5. Karte (GEO) bleibt über nth-child(5). */
.ewerle-cards--4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}
@media (min-width: 1100px) {
	.ewerle-cards--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (max-width: 620px) {
	.ewerle-cards--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}
.ewerle-card {
	background: var(--wp--preset--color--creme);
	border: 1px solid rgba(26, 39, 68, .06);
	border-radius: 16px;
	padding: clamp(28px, 3.5vw, 40px);
	display: flex;
	flex-direction: column;
	gap: 18px;
	transition: transform .35s cubic-bezier(.16, .8, .3, 1), box-shadow .35s;
}
.ewerle-card:hover {
	transform: translateY(-8px);
}
.ewerle-card h3 {
	font-size: 22px;
	font-weight: 700;
	color: #1A2744;
	line-height: 1.2;
	margin: 0;
}
.ewerle-card p {
	margin: 0;
	font-size: 16.5px;
	font-weight: 300;
	color: rgba(26, 39, 68, .7);
	line-height: 1.55;
}
/* Dunkle Karten (S4/K4: rgba-Weiß auf Mesh) */
.ewerle-card--dark {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	padding: clamp(26px, 3vw, 36px);
	gap: 16px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.ewerle-card--dark h3 {
	font-size: 20px;
	color: #fff !important;
	line-height: 1.25;
}
.ewerle-card--dark p {
	font-size: 15.5px;
	color: rgba(255, 255, 255, .7) !important;
}
/* Pain-Point-Icon (S2/K2: weiße Kachel 64px mit Linien-SVG) */
.ewerle-card-icon {
	width: 64px;
	height: 64px;
	border-radius: 14px;
	background: var(--wp--preset--color--weiss);
	box-shadow: 0 8px 22px -10px rgba(232, 130, 26, .5);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
.ewerle-card-icon svg {
	width: 34px;
	height: 34px;
	stroke: #E8821A;
	stroke-width: 2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* Nummern-Badge (S4/K4/K12: Quadrat 56px, Radius 12) */
.ewerle-card-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: var(--wp--preset--color--orange);
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	flex: none;
}
/* K12-Variante: Orange-Verlauf, 52px, Radius 13 */
.ewerle-card--portal {
	background: var(--wp--preset--color--weiss);
	border: 1px solid rgba(26, 39, 68, .07);
	padding: clamp(26px, 3vw, 36px);
	gap: 14px;
	box-shadow: 0 18px 44px -32px rgba(26, 39, 68, .4);
}
.ewerle-card--portal h3 {
	font-size: 19px;
	line-height: 1.25;
}
.ewerle-card--portal p {
	font-size: 15.5px;
}
.ewerle-card--portal .ewerle-card-num {
	width: 52px;
	height: 52px;
	border-radius: 13px;
	font-size: 22px;
	background:
		radial-gradient(120% 130% at 10% 0%, #E8921F 0%, rgba(232, 146, 31, 0) 55%),
		radial-gradient(130% 130% at 100% 100%, #8F4405 0%, rgba(143, 68, 5, 0) 55%),
		#B85F09;
}

/* Lösungs-Karten (S3/K3: horizontal, oranger Verlaufs-Haken 34px) --------- */
.ewerle-cards--loesung {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 20px;
}
.ewerle-card--row {
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	border-radius: 14px;
	padding: clamp(22px, 2.6vw, 30px);
}
.ewerle-card--row .ewerle-card-body {
	display: block;
}
.ewerle-card--row h3 {
	font-size: 17px;
	line-height: 1.3;
}
.ewerle-card--row p {
	font-size: 15px;
	margin-top: 4px;
}
.ewerle-check-square {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background:
		radial-gradient(120% 130% at 10% 0%, #E8921F 0%, rgba(232, 146, 31, 0) 55%),
		radial-gradient(130% 130% at 100% 100%, #8F4405 0%, rgba(143, 68, 5, 0) 55%),
		#B85F09;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
}

/* Checkliste (Hero: 28px-Quadrat mit Orange-Verlauf, Radius 7) ------------ */
.ewerle-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.ewerle-checklist li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0;
	font-size: 17.5px;
	font-weight: 300;
	color: rgba(255, 255, 255, .9);
	line-height: 1.45;
}
.ewerle-checklist li::before {
	content: "\2713";
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background:
		radial-gradient(120% 130% at 10% 0%, #E8921F 0%, rgba(232, 146, 31, 0) 55%),
		radial-gradient(130% 130% at 100% 100%, #8F4405 0%, rgba(143, 68, 5, 0) 55%),
		#B85F09;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 700;
	margin-top: 2px;
}
.ewerle-checklist strong {
	font-weight: 700;
	color: #fff;
}

/* Garantie-Badges (grüne 24px-Kreise) ------------------------------------- */
.ewerle-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
}
.ewerle-badges span {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 500;
	font-size: 14.5px;
	color: rgba(255, 255, 255, .85);
}
.ewerle-badges span::before {
	content: "\2713";
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--wp--preset--color--gruen);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
}
/* Helle Variante (K12-Hakenliste auf Creme) */
.ewerle-badges--hell span {
	font-size: 15px;
	color: rgba(26, 39, 68, .8);
}
.ewerle-badges--hell span::before {
	width: 22px;
	height: 22px;
	font-size: 12px;
}

/* Grüner Status-Pill (Original: transparent-grün mit Rand + Punkt, KEIN Haken) */
.ewerle-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(59, 165, 93, .12);
	border: 1px solid rgba(59, 165, 93, .3);
	color: #2E8049;
	padding: 9px 20px;
	border-radius: 100px;
	font-weight: 500;
	font-size: 15px;
}
.ewerle-pill::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #3BA55D;
}
/* Dunkle Variante (Hero): hellgrüner Text, pulsierender Punkt */
.ewerle-hero .ewerle-pill {
	background: rgba(59, 165, 93, .15);
	border-color: rgba(59, 165, 93, .4);
	color: #8FE3AB;
	padding: 9px 18px;
	letter-spacing: .4px;
}
.ewerle-hero .ewerle-pill::before {
	animation: ewerle-pulse 2.4s infinite;
}
@keyframes ewerle-pulse {
	0% { box-shadow: 0 0 0 0 rgba(59, 165, 93, .6); }
	80%, 100% { box-shadow: 0 0 0 9px rgba(59, 165, 93, 0); }
}

/* Grünes Garantie-Badge (S10/K10-Karten) */
.ewerle-gruen-badge {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 10px;
	background: rgba(59, 165, 93, .16);
	border: 1px solid rgba(59, 165, 93, .4);
	border-radius: 100px;
	padding: 7px 14px;
	font-size: 14px;
	font-weight: 700;
	color: #8FE3AB;
	letter-spacing: .3px;
	margin: 0;
}
.ewerle-gruen-badge::before {
	content: "\2713";
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #3BA55D;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}

/* ==========================================================================
   Hero (S1/K1)
   ========================================================================== */
.ewerle-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(120px, 17vw, 180px) clamp(18px, 4vw, 48px) clamp(96px, 12vw, 150px);
}
/* Glow-Kreise + Dreiecke (Original: absolute Deko-Ebenen) */
.ewerle-hero-glow-orange,
.ewerle-hero-glow-blau,
.ewerle-hero-dreieck-1,
.ewerle-hero-dreieck-2 {
	position: absolute;
	pointer-events: none;
}
.ewerle-hero-glow-orange {
	top: 8%;
	right: -6%;
	width: min(46vw, 540px);
	height: min(46vw, 540px);
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(232, 130, 26, .5), rgba(232, 130, 26, 0) 68%);
	filter: blur(10px);
}
.ewerle-hero-glow-blau {
	bottom: -4%;
	left: -6%;
	width: min(40vw, 420px);
	height: min(40vw, 420px);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(58, 87, 143, .55), rgba(58, 87, 143, 0) 70%);
	filter: blur(8px);
}
.ewerle-hero-dreieck-1 {
	top: 14%;
	left: 8%;
	width: 64px;
	height: 74px;
	background: rgba(232, 130, 26, .16);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	animation: ewerle-floaty 7s ease-in-out infinite;
}
.ewerle-hero-dreieck-2 {
	bottom: 22%;
	right: 12%;
	width: 44px;
	height: 52px;
	background: rgba(255, 255, 255, .08);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	animation: ewerle-floaty 9s ease-in-out infinite;
}
@keyframes ewerle-floaty {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-20px); }
}

.ewerle-hero .ewerle-eyebrow {
	font-size: clamp(13px, 1.6vw, 16px);
	letter-spacing: 2.5px;
	margin-bottom: 16px;
}
.ewerle-hero h1 {
	font-size: clamp(30px, 4.6vw, 56px);
	line-height: 1.06;
	font-weight: 700;
	letter-spacing: -.5px;
	text-wrap: balance;
	margin: 0 0 clamp(28px, 4vw, 46px);
}
.ewerle-hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(32px, 4.5vw, 60px);
	align-items: start;
}
.ewerle-hero-links,
.ewerle-hero-aside {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.ewerle-hero-beschreibung {
	font-size: clamp(17px, 2.1vw, 20px);
	font-weight: 300;
	color: rgba(255, 255, 255, .82) !important;
	line-height: 1.5;
	margin: 0;
}
/* Video-Karte */
.ewerle-hero-video-wrap {
	position: relative;
	margin: 0 0 26px;
}
.ewerle-hero-video {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7);
	aspect-ratio: 16 / 9;
	background: #0B1424;
}
.ewerle-hero-video img.ewerle-hero-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .35;
	filter: grayscale(.4);
}
.ewerle-hero-video-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 20, 36, .2) 0%, rgba(11, 20, 36, .2) 55%, rgba(11, 20, 36, .85) 100%);
	pointer-events: none;
}
/* NK-Hero: Bild-Modus des Originals (volle Deckkraft, helleres Overlay) */
.ewerle-hero-video--bild {
	cursor: default;
}
.ewerle-hero-video--bild .ewerle-hero-bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ewerle-hero-video--bild .ewerle-hero-video-overlay {
	background: linear-gradient(180deg, rgba(11, 20, 36, .15) 0%, rgba(11, 20, 36, .15) 55%, rgba(11, 20, 36, .9) 100%);
}
.ewerle-hero-video-badge {
	position: absolute;
	top: 22px;
	left: 22px;
	background: rgba(232, 130, 26, .95);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	padding: 8px 14px;
	border-radius: 6px;
	text-transform: uppercase;
	z-index: 2;
}
/* SMM-Hero (Folgerunde 2, Punkt 9): Label rechts oben, damit es nicht auf
   dem Kopf der linken Person sitzt. */
.ewerle-hero-video-badge--rechts {
	left: auto;
	right: 22px;
}
.ewerle-hero-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 84px;
	height: 84px;
	z-index: 2;
}
.ewerle-hero-play::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	animation: ewerle-pulsering 2.6s infinite;
}
.ewerle-hero-play::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--weiss);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.ewerle-hero-play span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-left: 3px;
	border-left: 26px solid #1A2744;
	border-top: 16px solid transparent;
	border-bottom: 16px solid transparent;
	z-index: 1;
}
@keyframes ewerle-pulsering {
	0% { transform: scale(.85); opacity: .6; }
	80% { transform: scale(1.9); opacity: 0; }
	100% { opacity: 0; }
}
.ewerle-hero-video-caption {
	position: absolute;
	left: 22px;
	bottom: 22px;
	right: 22px;
	color: #fff !important;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .5px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
	margin: 0;
	z-index: 2;
	text-align: left;
}
/* TÜV-Siegel schwebend unten rechts an der Video-Karte */
.ewerle-hero-tuv-wrap {
	position: absolute;
	right: -14px;
	bottom: -22px;
	border-radius: 12px;
	box-shadow: 0 22px 46px -18px rgba(0, 0, 0, .5);
	animation: ewerle-floaty 6s ease-in-out infinite;
	z-index: 3;
	line-height: 0;
}
.ewerle-hero-tuv-wrap img {
	display: block;
	height: 108px;
	width: auto;
	border-radius: 12px;
}
/* Hero-CTA: Original 18px / 18px 30px / Radius 9 */
.ewerle-hero-cta {
	margin-top: 4px;
}
.ewerle-hero-cta .ewerle-btn .wp-block-button__link {
	font-size: 18px;
	padding: 18px 30px;
	border-radius: 9px;
	line-height: 1.15;
	box-shadow: 0 16px 34px -12px rgba(232, 130, 26, .7);
	text-align: left;
}
.ewerle-hero-cta .ewerle-cta-sub {
	font-size: 12.5px;
	letter-spacing: .3px;
	margin-top: 0;
}
.ewerle-hero-checklist {
	margin: 0;
}
.ewerle-hero-aside .ewerle-badges {
	border-top: 1px solid rgba(255, 255, 255, .14);
	padding-top: 22px;
}
/* Presse-Logoleiste */
.ewerle-hero-media {
	position: relative;
	margin-top: clamp(52px, 7vw, 80px);
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-top: 30px;
}
.ewerle-hero-media .ewerle-hero-media-label {
	font-size: 13px;
	letter-spacing: 3px;
	font-weight: 700;
	color: rgba(255, 255, 255, .5) !important;
	text-align: center;
	margin: 0 0 22px;
}
.ewerle-hero-media .ewerle-logo-row {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: clamp(12px, 3vw, 40px);
	margin: 0;
}
.ewerle-hero-media .ewerle-logo-row img {
	height: clamp(16px, 2.4vw, 34px);
	width: auto;
	max-width: 18%;
	object-fit: contain;
	opacity: .9;
	filter: none;
}
/* Scroll-Hinweis */
.ewerle-hero-scroll {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	animation: ewerle-bob 2s ease-in-out infinite;
	pointer-events: none;
}
.ewerle-hero-scroll .ewerle-hero-scroll-text {
	font-size: 11px;
	letter-spacing: 2px;
	color: rgba(255, 255, 255, .5);
}
.ewerle-hero-scroll .ewerle-hero-scroll-pfeil {
	width: 18px;
	height: 18px;
	border-right: 2px solid rgba(255, 255, 255, .6);
	border-bottom: 2px solid rgba(255, 255, 255, .6);
	transform: translateX(-4px) rotate(45deg);
}
@keyframes ewerle-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(12px); }
}

/* Pain-Points (S2/K2): Abschluss-Box + Pfeil-CTA -------------------------- */
.ewerle-painbox {
	margin: clamp(36px, 4.5vw, 52px) auto 0;
	background:
		radial-gradient(120% 130% at 12% 0%, rgba(232, 130, 26, .16), rgba(232, 130, 26, 0) 60%),
		#16233E !important;
	border: 1px solid rgba(232, 130, 26, .35);
	border-radius: 18px;
	padding: clamp(28px, 3.6vw, 44px) !important;
	text-align: center;
	max-width: 920px;
}
.ewerle-painbox p {
	font-size: clamp(17px, 2.1vw, 21px);
	font-weight: 300;
	color: rgba(255, 255, 255, .9);
	line-height: 1.55;
	margin: 0;
}
.ewerle-painbox strong {
	font-weight: 700;
}
.ewerle-pfeil-cta {
	margin-top: clamp(44px, 6vw, 68px);
	text-align: center;
}
.ewerle-pfeil-cta .ewerle-pfeil {
	display: block;
	font-size: 32px;
	color: var(--wp--preset--color--orange);
	animation: ewerle-bob 2s ease-in-out infinite;
	margin: 0 0 22px;
}

/* Logo-Marquee (S5/K5) ----------------------------------------------------- */
.ewerle-marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ewerle-marquee-track {
	display: flex;
	width: max-content;
	gap: clamp(48px, 7vw, 96px);
	animation: ewerle-marquee 60s linear infinite;
}
.ewerle-marquee-track img {
	height: clamp(80px, 10vw, 132px);
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .65;
}
@keyframes ewerle-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.ewerle-marquee-track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
	}
}
/* Logowand-Kopf: kleinere Headline (Original: clamp(26px,4vw,44px)) */
.ewerle-logowand-head h3.wp-block-heading {
	font-size: clamp(26px, 4vw, 44px);
}

/* Presse-/Siegel-Reihen (Fallback für einfache Logo-Zeilen) --------------- */
.ewerle-logo-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

/* Methode (S6/K6): weiße Foto-Karten mit überlappender Nummer ------------- */
.ewerle-methode-mark {
	background: var(--wp--preset--color--orange);
	color: #fff;
	padding: 2px 14px;
	border-radius: 6px;
}
.ewerle-methode-sub {
	font-size: clamp(19px, 2.5vw, 26px) !important;
	font-weight: 700 !important;
	color: #fff !important;
	margin-top: 16px !important;
}
.ewerle-methode-text {
	font-size: 17px !important;
	max-width: 720px;
	margin: 20px auto 0 !important;
	line-height: 1.6 !important;
}
.ewerle-photo-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 28px;
	margin-top: clamp(50px, 7vw, 80px);
}
/* 4-Bildkarten-Variante (Abläufe WD/SMM/KS, Folgerunde 2 Punkt 8): nie
   3+1, sondern durchgehend sauberes 2×2, mobil einspaltig. Vier Spalten
   passen in die 1180px-Contentbreite nur mit ~274px je Karte — dort
   bricht der Fließtext auf sechs kurze Zeilen um; das 2×2 gibt jeder
   Karte die doppelte Breite. Identische Spaltenbreiten garantieren
   identischen Bildbeschnitt und identische Bildhöhe aller vier Karten
   (aspect-ratio 16/10 + object-fit cover, s. .ewerle-photo-card img). */
.ewerle-photo-cards--4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
	.ewerle-photo-cards--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}
.ewerle-photo-card {
	background: var(--wp--preset--color--weiss);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
	transition: transform .35s cubic-bezier(.16, .8, .3, 1);
}
.ewerle-photo-card:hover {
	transform: translateY(-8px);
}
.ewerle-photo-card img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
/* Nahezu quadratische Fotos (team-foto-1/-4, 700x670) verlieren im
   16:10-Feld oben und unten je rund 116px. Bei beiden liegen die Gesichter
   im oberen Bilddrittel – mit der Vorgabe „center" schneidet der Beschnitt
   die Köpfe ab. Deshalb für diese Bilder am oberen Rand ausrichten.
   Bewusst als Modifier statt global: Die Querformat-Fotos
   (werkstatt-generisch-*, 1280x675/853) sind mittig korrekt beschnitten
   und bleiben unverändert. */
.ewerle-photo-card img.ist-hochkant {
	object-position: center top;
}
.ewerle-photo-card-body {
	position: relative;
	padding: clamp(26px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
.ewerle-photo-card-badge {
	position: absolute;
	top: -32px;
	left: 50%;
	transform: translateX(-50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	color: #fff;
	font-size: 28px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px -8px rgba(232, 130, 26, .8);
}
.ewerle-photo-card-label {
	margin: 20px 0 0 !important;
	font-size: 15px;
	letter-spacing: 4px;
	font-weight: 700;
	color: var(--wp--preset--color--orange);
}
.ewerle-photo-card-body p:not(.ewerle-photo-card-label) {
	margin: 0;
	font-size: 16.5px;
	font-weight: 300;
	color: rgba(26, 39, 68, .75);
	line-height: 1.6;
}

/* ==========================================================================
   Fahrplan (S7/K7): Zickzack-Fluss mit gepunkteten Verbindungen
   ========================================================================== */
.ewerle-thread-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(30px, 3.5vw, 50px) clamp(46px, 5.5vw, 84px);
	grid-auto-rows: 1fr;
	margin-top: clamp(24px, 4vw, 52px);
}
.ewerle-thread-card {
	position: relative;
	background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 20px;
	padding: clamp(18px, 2vw, 26px);
	height: 100%;
	box-shadow: 0 34px 66px -36px rgba(0, 0, 0, .75);
	transition: transform .5s cubic-bezier(.16, .8, .3, 1), box-shadow .5s, border-color .5s;
}
.ewerle-thread-card:hover {
	border-color: rgba(232, 130, 26, .5);
	box-shadow: 0 40px 80px -34px rgba(0, 0, 0, .8), 0 0 0 1px rgba(232, 130, 26, .3);
}
.ewerle-thread-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 13px;
	overflow: hidden;
	background: radial-gradient(130% 130% at 50% 0%, rgba(232, 130, 26, .14), rgba(11, 20, 36, .4));
	border: 1px solid rgba(255, 255, 255, .08);
	margin-bottom: 16px;
}
.ewerle-thread-stage svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
/* Original animiert die Illustrationen je aktiver Karte — statisch: voll gezeichnet */
.ewerle-thread-stage .a-fade,
.ewerle-thread-stage .a-fade2,
.ewerle-thread-stage .a-fade3 {
	opacity: 1;
}
.ewerle-thread-tag {
	display: block;
	font-size: 12px;
	letter-spacing: 2.5px;
	font-weight: 700;
	color: var(--wp--preset--color--orange);
	margin: 0 0 7px;
	text-transform: uppercase;
}
.ewerle-thread-card h3 {
	font-size: clamp(18px, 1.9vw, 22px);
	font-weight: 700;
	color: #fff;
	margin: 0 0 7px;
	line-height: 1.2;
}
.ewerle-thread-card p {
	font-size: 14.5px;
	font-weight: 300;
	color: rgba(255, 255, 255, .72);
	line-height: 1.5;
	margin: 0;
}
/* Serpentinen-Anordnung (Desktop, 3 Spalten):
   Reihe 1: 1-2-3 · Reihe 2: 6-5-4 · Reihe 3: 7-8-9 · Reihe 4: 12-11-10 */
@media (min-width: 1024px) {
	.ewerle-thread-card:nth-child(1)  { grid-column: 1; grid-row: 1; }
	.ewerle-thread-card:nth-child(2)  { grid-column: 2; grid-row: 1; }
	.ewerle-thread-card:nth-child(3)  { grid-column: 3; grid-row: 1; }
	.ewerle-thread-card:nth-child(4)  { grid-column: 3; grid-row: 2; }
	.ewerle-thread-card:nth-child(5)  { grid-column: 2; grid-row: 2; }
	.ewerle-thread-card:nth-child(6)  { grid-column: 1; grid-row: 2; }
	.ewerle-thread-card:nth-child(7)  { grid-column: 1; grid-row: 3; }
	.ewerle-thread-card:nth-child(8)  { grid-column: 2; grid-row: 3; }
	.ewerle-thread-card:nth-child(9)  { grid-column: 3; grid-row: 3; }
	.ewerle-thread-card:nth-child(10) { grid-column: 3; grid-row: 4; }
	.ewerle-thread-card:nth-child(11) { grid-column: 2; grid-row: 4; }
	.ewerle-thread-card:nth-child(12) { grid-column: 1; grid-row: 4; }

	/* Horizontale gepunktete Verbindungen (im Spalten-Zwischenraum) */
	.ewerle-thread-card:nth-child(2)::before,
	.ewerle-thread-card:nth-child(3)::before,
	.ewerle-thread-card:nth-child(8)::before,
	.ewerle-thread-card:nth-child(9)::before,
	.ewerle-thread-card:nth-child(5)::after,
	.ewerle-thread-card:nth-child(6)::after,
	.ewerle-thread-card:nth-child(11)::after,
	.ewerle-thread-card:nth-child(12)::after {
		content: "";
		position: absolute;
		top: 50%;
		width: clamp(46px, 5.5vw, 84px);
		height: 3px;
		background: repeating-linear-gradient(90deg, #E8821A 0, #E8821A 14px, transparent 14px, transparent 25px);
		opacity: .85;
		pointer-events: none;
	}
	.ewerle-thread-card:nth-child(2)::before,
	.ewerle-thread-card:nth-child(3)::before,
	.ewerle-thread-card:nth-child(8)::before,
	.ewerle-thread-card:nth-child(9)::before {
		left: calc(-1 * clamp(46px, 5.5vw, 84px));
	}
	.ewerle-thread-card:nth-child(5)::after,
	.ewerle-thread-card:nth-child(6)::after,
	.ewerle-thread-card:nth-child(11)::after,
	.ewerle-thread-card:nth-child(12)::after {
		right: calc(-1 * clamp(46px, 5.5vw, 84px));
	}
	/* Vertikale Verbindungen am Reihenwechsel (3->4, 6->7, 9->10) */
	.ewerle-thread-card:nth-child(4)::before,
	.ewerle-thread-card:nth-child(7)::before,
	.ewerle-thread-card:nth-child(10)::before {
		content: "";
		position: absolute;
		left: 50%;
		top: calc(-1 * clamp(30px, 3.5vw, 50px));
		width: 3px;
		height: clamp(30px, 3.5vw, 50px);
		background: repeating-linear-gradient(180deg, #E8821A 0, #E8821A 14px, transparent 14px, transparent 25px);
		opacity: .85;
		pointer-events: none;
	}
}
/* Tablet: 2 Spalten, Serpentine 1-2 / 4-3 / 5-6 / 8-7 / 9-10 / 12-11 */
@media (min-width: 680px) and (max-width: 1023px) {
	.ewerle-thread-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ewerle-thread-card:nth-child(4n+3) { grid-column: 2; }
	.ewerle-thread-card:nth-child(4n)   { grid-column: 1; }
}
/* Mobil: 1 Spalte mit vertikalen Punktlinien */
@media (max-width: 679px) {
	.ewerle-thread-grid {
		grid-template-columns: 1fr;
		gap: 64px 0;
	}
	.ewerle-thread-card:not(:first-child)::before {
		content: "";
		position: absolute;
		left: 50%;
		top: -64px;
		width: 3px;
		height: 64px;
		background: repeating-linear-gradient(180deg, #E8821A 0, #E8821A 11px, transparent 11px, transparent 19px);
		opacity: .85;
	}
}

/* Agentur in Zahlen (S8/K8) ------------------------------------------------ */
.ewerle-awards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-bottom: clamp(44px, 6vw, 64px);
}
.ewerle-award {
	background: var(--wp--preset--color--weiss);
	border: 1px solid rgba(26, 39, 68, .1);
	border-radius: 12px;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 118px;
	width: 132px;
}
.ewerle-award img {
	max-height: 90px;
	max-width: 100px;
	width: auto;
	object-fit: contain;
}
.ewerle-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 24px;
}
.ewerle-stat {
	background: #1A2744;
	border-radius: 18px;
	padding: clamp(36px, 4vw, 54px) 28px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform .35s cubic-bezier(.16, .8, .3, 1);
}
.ewerle-stat:hover {
	transform: translateY(-8px);
}
.ewerle-stat-value {
	font-size: clamp(48px, 7vw, 76px);
	font-weight: 700;
	color: var(--wp--preset--color--orange);
	line-height: 1;
	letter-spacing: -1px;
}
.ewerle-stat-label {
	font-size: 18px;
	font-weight: 300;
	color: rgba(255, 255, 255, .85) !important;
	margin: 0;
}

/* Erfolgsgeschichten (S9) -------------------------------------------------- */
.ewerle-testimonials {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: 22px;
}
.ewerle-testimonial-card {
	background: var(--wp--preset--color--weiss);
	border: 1px solid rgba(26, 39, 68, .1);
	border-radius: 14px;
	padding: clamp(24px, 2.6vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 18px 44px -30px rgba(26, 39, 68, .4);
	transition: transform .35s cubic-bezier(.16, .8, .3, 1);
}
.ewerle-testimonial-card:hover {
	transform: translateY(-8px);
}
.ewerle-testimonial-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: #16233E;
	box-shadow: 0 12px 30px -16px rgba(26, 39, 68, .6);
	line-height: 0;
}
.ewerle-testimonial-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .3;
	filter: grayscale(.5);
}
.ewerle-testimonial-thumb::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 130% at 82% 8%, rgba(58, 87, 143, .5) 0%, rgba(58, 87, 143, 0) 55%),
		linear-gradient(160deg, rgba(22, 35, 62, .55), rgba(11, 20, 36, .78));
}
.ewerle-testimonial-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background:
		radial-gradient(120% 130% at 10% 0%, #E8921F 0%, rgba(232, 146, 31, 0) 55%),
		radial-gradient(130% 130% at 100% 100%, #8F4405 0%, rgba(143, 68, 5, 0) 55%),
		#B85F09;
	box-shadow: 0 12px 26px -8px rgba(232, 130, 26, .8);
}
.ewerle-testimonial-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-left: 3px;
	border-left: 20px solid #fff;
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
}
.ewerle-testimonial-badge {
	position: absolute;
	left: 14px;
	bottom: 12px;
	color: rgba(255, 255, 255, .9);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.2;
}
.ewerle-testimonial-trophy {
	display: inline-flex;
	align-self: flex-start;
	gap: 9px;
	align-items: center;
	background: var(--wp--preset--color--creme);
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 16px;
	font-weight: 700;
	color: #1A2744;
	line-height: 1.2;
	margin: 0;
}
.ewerle-testimonial-quote {
	font-size: 15.5px;
	font-weight: 300;
	color: rgba(26, 39, 68, .75);
	line-height: 1.55;
	margin: 0;
	flex: 1;
}
.ewerle-testimonial-fuss {
	border-top: 1px solid rgba(26, 39, 68, .1);
	padding-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.ewerle-testimonial-name {
	font-size: 16px;
	font-weight: 700;
	color: #1A2744;
}
.ewerle-testimonial-firma {
	display: block;
	font-size: 13.5px;
	font-weight: 300;
	color: rgba(26, 39, 68, .6);
}
.ewerle-testimonial-verified {
	margin: 6px 0 0;
	color: #3BA55D;
	font-size: 13px;
	font-weight: 500;
}
.ewerle-load-more {
	text-align: center;
	margin-top: clamp(36px, 4.5vw, 52px);
}
.ewerle-load-more button {
	cursor: pointer;
	background: var(--wp--preset--color--weiss);
	border: 2px solid #1A2744;
	color: #1A2744;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	padding: 16px 38px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	transition: transform .35s cubic-bezier(.16, .8, .3, 1);
}
.ewerle-load-more button:hover {
	transform: translateY(-8px);
}
.ewerle-load-more button .ewerle-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	color: #fff;
	font-size: 18px;
	line-height: 1;
}
.ewerle-testimonials-hidden {
	display: none;
}
.ewerle-testimonials-hidden.is-visible {
	display: flex;
}

/* Zwischen-CTA mit Hintergrundfoto (S11/K11) ------------------------------- */
.ewerle-zwischen-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(90px, 13vw, 170px) clamp(18px, 4vw, 48px);
	text-align: center;
	background: #16233E;
}
.ewerle-zwischen-cta-foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none !important;
	object-fit: cover;
}
.ewerle-zwischen-cta-overlay {
	max-width: none !important;
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(22, 35, 62, .92) 0%, rgba(22, 35, 62, .72) 50%, rgba(11, 20, 36, .9) 100%);
	pointer-events: none;
}
.ewerle-zwischen-cta-inner {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
}
.ewerle-zwischen-cta-inner h2 {
	font-size: clamp(30px, 5vw, 56px);
	font-weight: 700;
	letter-spacing: -.5px;
	margin: 0 0 14px;
}
.ewerle-zwischen-cta-inner > p {
	font-size: clamp(17px, 2.2vw, 21px);
	font-weight: 300;
	color: rgba(255, 255, 255, .82) !important;
	max-width: 660px;
	margin: 0 auto clamp(30px, 4vw, 44px);
	line-height: 1.55;
}
.ewerle-zwischen-cta .ewerle-btn .wp-block-button__link {
	padding: 20px 44px;
	box-shadow: 0 20px 44px -14px rgba(232, 130, 26, .7);
}
.ewerle-zwischen-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 20px;
	margin: clamp(44px, 6vw, 64px) auto 0;
	max-width: 1000px;
}
.ewerle-zwischen-step {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 14px;
	padding: 28px 24px;
	text-align: left;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.ewerle-zwischen-step-chip {
	display: inline-block;
	background: var(--wp--preset--color--orange);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	padding: 5px 12px;
	border-radius: 5px;
	margin: 0 0 14px;
}
.ewerle-zwischen-step h3 {
	font-size: 19px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 8px;
}
.ewerle-zwischen-step p {
	font-size: 15px;
	font-weight: 300;
	color: rgba(255, 255, 255, .72);
	line-height: 1.55;
	margin: 0;
}

/* Sterne-Slider (S11 unten, Original: Creme-Hintergrund, weiße Karte) ------ */
.ewerle-slider {
	background: var(--wp--preset--color--creme);
	padding: clamp(70px, 10vw, 130px) clamp(18px, 4vw, 48px);
	overflow: hidden;
}
.ewerle-slider-track {
	max-width: 900px;
	margin: 0 auto;
	position: relative;
}
/* Original: Track-Verschiebung mit transform .6s cubic-bezier(.16,.8,.3,1) */
.ewerle-slider-viewport {
	position: relative;
	overflow: hidden;
}
.ewerle-slider-band {
	display: flex;
	transition: transform .6s cubic-bezier(.16, .8, .3, 1);
}
.ewerle-slider-slide {
	flex: 0 0 100%;
	padding: 0 clamp(6px, 2vw, 20px);
	box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce) {
	.ewerle-slider-band {
		transition: none;
	}
}
.ewerle-slider-card {
	background: var(--wp--preset--color--weiss);
	border-radius: 20px;
	padding: clamp(32px, 5vw, 60px);
	box-shadow: 0 30px 70px -40px rgba(26, 39, 68, .5);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}
.ewerle-slider-stars {
	font-size: 26px;
	color: var(--wp--preset--color--orange);
	letter-spacing: 5px;
	margin: 0;
}
.ewerle-slider-quote {
	font-size: clamp(19px, 2.6vw, 26px);
	font-weight: 300;
	color: #1A2744;
	line-height: 1.5;
	max-width: 640px;
	margin: 0;
}
.ewerle-slider-autor {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 6px;
}
.ewerle-slider-autor img {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	box-shadow: 0 8px 20px -8px rgba(26, 39, 68, .5);
}
.ewerle-slider-autor-text {
	text-align: left;
}
.ewerle-slider-author {
	display: block;
	font-size: 19px;
	font-weight: 700;
	color: #1A2744;
}
.ewerle-slider-firma {
	display: block;
	font-size: 15px;
	font-weight: 300;
	color: rgba(26, 39, 68, .6);
}
.ewerle-slider-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 34px;
}
.ewerle-slider-dots {
	display: flex;
	gap: 10px;
	align-items: center;
}
.ewerle-slider-dots span {
	width: 10px;
	height: 10px;
	border-radius: 100px;
	background: rgba(26, 39, 68, .2);
	transition: .3s;
}
.ewerle-slider-dots span.is-active {
	width: 30px;
	background: var(--wp--preset--color--orange);
}
.ewerle-slider-nav button {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: none;
	background: var(--wp--preset--color--orange);
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px -10px rgba(232, 130, 26, .8);
	transition: transform .35s cubic-bezier(.16, .8, .3, 1);
}
.ewerle-slider-nav button:hover {
	transform: translateY(-4px);
}

/* Vergleich (S12/K13) ------------------------------------------------------ */
.ewerle-vergleich {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: 24px;
}
.ewerle-vergleich-col {
	border-radius: 18px;
	padding: clamp(28px, 3.5vw, 42px);
}
.ewerle-vergleich-col.is-schlecht {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
}
.ewerle-vergleich-col.is-gut {
	background: linear-gradient(160deg, rgba(232, 130, 26, .16), rgba(59, 165, 93, .08));
	border: 1.5px solid rgba(232, 130, 26, .4);
}
.ewerle-vergleich-col h3 {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 24px;
	line-height: 1.25;
}
.ewerle-vergleich-col.is-schlecht h3 {
	color: rgba(255, 255, 255, .7);
}
.ewerle-vergleich-col.is-gut h3 {
	color: #fff;
}
.ewerle-vergleich-item {
	display: flex;
	gap: 14px;
	margin-bottom: 18px;
	align-items: flex-start;
}
.ewerle-vergleich-item:last-child {
	margin-bottom: 0;
}
/* Original: schlichte Glyphen statt farbiger Kreise */
.ewerle-vergleich-icon {
	flex: none;
	font-size: 18px;
	margin-top: 1px;
	background: none;
	width: auto;
	height: auto;
}
.is-schlecht .ewerle-vergleich-icon {
	color: #F17B7B;
}
.is-gut .ewerle-vergleich-icon {
	color: #8FE3AB;
}
.ewerle-vergleich-text strong {
	display: block;
	font-size: 16.5px;
	font-weight: 700;
	margin-bottom: 3px;
}
.is-schlecht .ewerle-vergleich-text strong {
	color: rgba(255, 255, 255, .9);
}
.is-gut .ewerle-vergleich-text strong {
	color: #fff;
}
.ewerle-vergleich-text span {
	font-size: 14.5px;
	font-weight: 300;
	line-height: 1.5;
}
.is-schlecht .ewerle-vergleich-text span {
	color: rgba(255, 255, 255, .55);
}
.is-gut .ewerle-vergleich-text span {
	color: rgba(255, 255, 255, .7);
}

/* Ansprechpartner + Team-Galerie (S13/S14) --------------------------------- */
.ewerle-team-card {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 0;
	background: var(--wp--preset--color--creme);
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 28px;
}
.ewerle-team-photo {
	position: relative;
	min-height: clamp(420px, 52vw, 560px);
}
.ewerle-team-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}
.ewerle-team-text {
	padding: clamp(30px, 4vw, 52px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}
.ewerle-team-text h3 {
	font-size: 30px;
	font-weight: 700;
	color: #1A2744;
	margin: 0;
}
.ewerle-team-role {
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--orange);
	line-height: 1.3;
	margin: 0;
}
.ewerle-team-text p:not(.ewerle-team-role) {
	font-size: 16px;
	font-weight: 300;
	color: rgba(26, 39, 68, .75);
	line-height: 1.6;
	margin: 0;
}
/* Foto rechts bei umgekehrter Karte (Desktop) */
@media (min-width: 782px) {
	.ewerle-team-card.is-reverse .ewerle-team-photo {
		order: 2;
	}
}
.ewerle-team-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 16px;
	margin-top: 28px;
}
.ewerle-team-gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 14px;
}

/* Handwerker-Ehre (S15/K16) ------------------------------------------------ */
.ewerle-ehre-badge {
	display: inline-block;
	background: var(--wp--preset--color--orange);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	padding: 8px 20px;
	border-radius: 8px;
	margin: 0 auto 16px;
}
.ewerle-card--ehre {
	background: var(--wp--preset--color--weiss);
	border: none;
	border-radius: 14px;
	padding: clamp(26px, 3vw, 36px);
	flex-direction: row;
	align-items: flex-start;
	gap: 18px;
	box-shadow: 0 18px 44px -32px rgba(26, 39, 68, .4);
}
.ewerle-card--ehre h3 {
	font-size: 19px;
	margin-bottom: 8px;
}
.ewerle-card--ehre p {
	font-size: 15.5px;
}
.ewerle-icon-verbot {
	flex: none;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(232, 130, 26, .12);
	color: var(--wp--preset--color--orange);
	font-size: 20px;
}

/* FAQ (S16/K17) ------------------------------------------------------------ */
.ewerle-faq {
	max-width: 840px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ewerle-faq details {
	background: var(--wp--preset--color--creme);
	border: 1px solid rgba(26, 39, 68, .06);
	border-radius: 12px;
	overflow: hidden;
	margin: 0;
}
.ewerle-faq summary {
	cursor: pointer;
	padding: clamp(20px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px);
	padding-right: 72px;
	font-size: clamp(17px, 2.1vw, 20px);
	font-weight: 700;
	color: #1A2744;
	list-style: none;
	position: relative;
}
.ewerle-faq summary::-webkit-details-marker {
	display: none;
}
.ewerle-faq summary::after {
	content: "+";
	position: absolute;
	right: clamp(20px, 2.6vw, 30px);
	top: 50%;
	margin-top: -17px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(26, 39, 68, .08);
	color: #1A2744;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 400;
	transition: .3s;
}
.ewerle-faq details[open] summary::after {
	background: var(--wp--preset--color--orange);
	color: #fff;
	transform: rotate(135deg);
}
.ewerle-faq-answer {
	padding: 0 clamp(20px, 2.6vw, 30px) clamp(22px, 2.6vw, 28px);
	font-size: 16.5px;
	font-weight: 300;
	color: rgba(26, 39, 68, .72);
	line-height: 1.6;
}
/* FAQ-Kopf: kleinere Headline wie Original */
h2.ewerle-faq-headline {
	font-size: clamp(28px, 4.5vw, 50px);
	letter-spacing: -.5px;
	margin: 0 0 clamp(40px, 5vw, 60px);
}

/* Erstgespräch (S17/K18) --------------------------------------------------- */
.ewerle-erstgespraech {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(40px, 5vw, 64px);
	align-items: center;
	max-width: 1100px;
	margin: 0 auto;
}
.ewerle-erstgespraech-text {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.ewerle-erstgespraech-badge {
	display: inline-flex;
	align-self: flex-start;
	background: rgba(232, 130, 26, .16);
	color: var(--wp--preset--color--orange);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	padding: 8px 16px;
	border-radius: 100px;
	margin: 0;
}
.ewerle-erstgespraech-text h2 {
	font-size: clamp(28px, 4.2vw, 48px);
	font-weight: 700;
	color: #fff;
	line-height: 1.1;
	margin: 0;
}
.ewerle-erstgespraech-text > p {
	font-size: 18px;
	font-weight: 300;
	color: rgba(255, 255, 255, .8);
	line-height: 1.6;
	margin: 0;
}
.ewerle-erstgespraech-steps {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: eg-schritt;
}
.ewerle-erstgespraech-steps li {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	counter-increment: eg-schritt;
	font-size: 14.5px;
	font-weight: 300;
	color: rgba(255, 255, 255, .7);
	line-height: 1.5;
}
.ewerle-erstgespraech-steps li::before {
	content: counter(eg-schritt);
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ewerle-erstgespraech-steps strong {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 4px;
}
.ewerle-erstgespraech-text .ewerle-badges {
	margin-top: 8px;
}
.ewerle-erstgespraech-text .ewerle-badges span {
	font-size: 14px;
	color: rgba(255, 255, 255, .82);
}
.ewerle-erstgespraech-text .ewerle-badges span::before {
	width: 22px;
	height: 22px;
	font-size: 12px;
}
.ewerle-erstgespraech-form {
	background: var(--wp--preset--color--weiss);
	color: #1A2744;
	border-radius: 18px;
	padding: clamp(26px, 3vw, 40px);
	box-shadow: 0 34px 80px -30px rgba(0, 0, 0, .6);
}
/* Fluent-Forms-Markup an die Original-Formularoptik anlehnen (siehe
   referenz/handoff/recruiting.dc.html, Sektion #angebot: helle Felder,
   abgerundete Ecken, Orange-Verlauf-Button). */
.ewerle-erstgespraech-form .ff-el-group {
	margin-bottom: 14px;
}
.ewerle-erstgespraech-form .ff-el-input--label label {
	font-size: 14px;
	font-weight: 600;
	color: #1A2744;
}
.ewerle-erstgespraech-form .ff-el-form-control {
	background: #F4F1EB;
	border: 2px solid #E7E0D2;
	border-radius: 10px;
	padding: 15px 16px;
	font-size: 16px;
	font-family: inherit;
	color: #1A2744;
	outline: none;
	transition: border-color .2s;
}
.ewerle-erstgespraech-form select.ff-el-form-control {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231A2744'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%231A2744' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}
.ewerle-erstgespraech-form .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--orange);
}
.ewerle-erstgespraech-form .ff-el-form-check {
	margin-bottom: 8px;
}
.ewerle-erstgespraech-form .ff-el-form-check-label {
	font-size: 15px;
	font-weight: 300;
	color: rgba(26, 39, 68, .82);
}
.ewerle-erstgespraech-form .ff-el-form-check-input {
	accent-color: var(--wp--preset--color--orange);
	width: 17px;
	height: 17px;
}
.ewerle-erstgespraech-form .ff-btn-submit {
	width: 100%;
	background:
		radial-gradient(120% 130% at 10% 0%, #E8921F 0%, rgba(232, 146, 31, 0) 55%),
		radial-gradient(130% 130% at 100% 100%, #8F4405 0%, rgba(143, 68, 5, 0) 55%),
		#B85F09;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	padding: 18px 24px;
	border: none;
	border-radius: 9px;
	cursor: pointer;
	box-shadow: 0 16px 34px -12px rgba(232, 130, 26, .7);
	transition: transform .2s;
}
.ewerle-erstgespraech-form .ff-btn-submit:hover {
	transform: translateY(-2px);
}
.ewerle-erstgespraech-form .ff_submit_btn_wrapper {
	margin-top: 6px;
}
/* Erfolgsmeldung nach Formular-Absenden (Task 10): dezent im Theme-Stil
   statt Plugin-Default, Grün-Akzent als Bestätigungssignal. */
.ewerle-erstgespraech-form .ff-message-success {
	background: var(--wp--preset--color--creme);
	border-left: 4px solid var(--wp--preset--color--gruen);
	border-radius: 10px;
	padding: 20px 22px;
	color: #1A2744;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}
.ewerle-erstgespraech-datenschutz {
	margin: 14px 0 0;
	font-size: 12.5px;
	font-weight: 300;
	color: rgba(26, 39, 68, .55);
	text-align: center;
}
.ewerle-erstgespraech-datenschutz a {
	color: inherit;
	text-decoration: underline;
}

/* Rechenbeispiel (K9) ------------------------------------------------------ */
.ewerle-rechenbeispiel-box {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	padding: clamp(30px, 4vw, 56px);
	background:
		radial-gradient(120% 100% at 85% 8%, #3A578F 0%, rgba(58, 87, 143, 0) 52%),
		radial-gradient(115% 120% at 8% 20%, #223A64 0%, rgba(34, 58, 100, 0) 55%),
		#14213A;
	box-shadow: 0 40px 90px -40px rgba(11, 20, 36, .7);
}
.ewerle-rechenbeispiel-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 18px;
	align-items: stretch;
}
.ewerle-rechenbeispiel-stat {
	border-radius: 16px;
	padding: clamp(24px, 3vw, 36px);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ewerle-rechenbeispiel-stat.is-kosten {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.ewerle-rechenbeispiel-stat.is-auftrag {
	background: rgba(232, 130, 26, .14);
	border: 1px solid rgba(232, 130, 26, .4);
}
.ewerle-rechenbeispiel-stat.is-gewinn {
	background: linear-gradient(160deg, rgba(59, 165, 93, .2), rgba(59, 165, 93, .06));
	border: 1px solid rgba(59, 165, 93, .45);
}
.ewerle-rechenbeispiel-label {
	font-size: 13px;
	letter-spacing: 2px;
	font-weight: 700;
	color: rgba(255, 255, 255, .6);
	text-transform: uppercase;
	margin: 0;
}
.ewerle-rechenbeispiel-stat.is-auftrag .ewerle-rechenbeispiel-label {
	color: #F6A64F;
}
.ewerle-rechenbeispiel-stat.is-gewinn .ewerle-rechenbeispiel-label {
	color: #8FE3AB;
}
.ewerle-rechenbeispiel-value {
	font-size: clamp(40px, 6vw, 62px);
	font-weight: 700;
	color: #fff;
	line-height: 1;
	letter-spacing: -1px;
	margin: 0;
}
.ewerle-rechenbeispiel-stat.is-auftrag .ewerle-rechenbeispiel-value {
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.05;
	letter-spacing: 0;
}
.ewerle-rechenbeispiel-sub {
	font-size: 15px;
	font-weight: 300;
	color: rgba(255, 255, 255, .65);
	margin: 0;
}
.ewerle-rechenbeispiel-kernaussage {
	margin: 26px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	font-size: clamp(18px, 2.4vw, 24px);
	font-weight: 300;
	color: rgba(255, 255, 255, .85);
}
.ewerle-rechenbeispiel-kernaussage strong {
	font-weight: 700;
	color: #fff;
}
.ewerle-rechenbeispiel-kernaussage .ewerle-faktor {
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	color: var(--wp--preset--color--orange);
	letter-spacing: -.5px;
}
.ewerle-gewerke-titel {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #1A2744 !important;
	margin: clamp(40px, 5vw, 60px) auto 18px !important;
}
.ewerle-tag-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.ewerle-tag {
	background: var(--wp--preset--color--creme);
	border: 1px solid rgba(26, 39, 68, .1);
	color: #1A2744;
	padding: 11px 20px;
	border-radius: 100px;
	font-size: 15.5px;
	font-weight: 500;
}
/* Pills als Buttons (Gewerke-Slider): ohne JS inert, optisch wie Spans */
button.ewerle-tag {
	font-family: inherit;
	line-height: inherit;
	cursor: default;
	appearance: none;
	-webkit-appearance: none;
}
.ewerle-tag.ist-klickbar {
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
.ewerle-tag.ist-klickbar:hover {
	border-color: rgba(232, 130, 26, .55);
}
.ewerle-tag.ist-aktiv {
	background: rgba(232, 130, 26, .12);
	border-color: var(--wp--preset--color--orange);
	color: #9C550E;
}
.ewerle-tag.ist-mehr {
	background: transparent;
	border-style: dashed;
	color: rgba(26, 39, 68, .65);
}

/* Gewerke-Slider in der Rechenbeispiel-Karte (Frank-Auftrag 08.09.) ------- */
.ewerle-rechenbeispiel-stat.is-kosten .ewerle-rechenbeispiel-value {
	/* Anfragekosten bleiben einzeilig; längere Spannen (z. B. „100–150 €")
	   bekommen per JS .ist-lang und rücken eine Schriftstufe runter */
	white-space: nowrap;
}
.ewerle-rechenbeispiel-stat.is-kosten .ewerle-rechenbeispiel-value.ist-lang {
	font-size: clamp(34px, 4.8vw, 48px);
}
.ewerle-rechenbeispiel-stat.is-auftrag .ewerle-rechenbeispiel-value {
	/* Platz für zweizeilige Gewerk-Namen reservieren: kein Höhenspringen */
	min-height: 2.2em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ewerle-rechenbeispiel-box [data-rb-kosten],
.ewerle-rechenbeispiel-box [data-rb-gewerk],
.ewerle-rechenbeispiel-box [data-rb-gewerk-sub],
.ewerle-rechenbeispiel-box [data-rb-gewinn],
.ewerle-rechenbeispiel-box [data-rb-gewinn-sub],
.ewerle-rechenbeispiel-box [data-rb-faktor],
.ewerle-rechenbeispiel-box [data-rb-schluss] {
	transition: opacity .32s ease, transform .32s ease;
}
.ewerle-rechenbeispiel-box.ist-wechsel [data-rb-kosten],
.ewerle-rechenbeispiel-box.ist-wechsel [data-rb-gewerk],
.ewerle-rechenbeispiel-box.ist-wechsel [data-rb-gewerk-sub],
.ewerle-rechenbeispiel-box.ist-wechsel [data-rb-gewinn],
.ewerle-rechenbeispiel-box.ist-wechsel [data-rb-gewinn-sub],
.ewerle-rechenbeispiel-box.ist-wechsel [data-rb-faktor],
.ewerle-rechenbeispiel-box.ist-wechsel [data-rb-schluss] {
	opacity: 0;
	transform: translateY(10px);
}
.ewerle-rb-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 26px;
}
.ewerle-rb-pfeil {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .2);
	background: rgba(255, 255, 255, .07);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background .2s ease, border-color .2s ease;
}
.ewerle-rb-pfeil:hover {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .35);
}
.ewerle-rb-pfeil svg {
	width: 20px;
	height: 20px;
}
.ewerle-rb-dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	max-width: 300px;
}
.ewerle-rb-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, .28);
	cursor: pointer;
	transition: background .25s ease, transform .25s ease;
}
.ewerle-rb-dot:hover {
	background: rgba(255, 255, 255, .55);
}
.ewerle-rb-dot.ist-aktiv {
	background: var(--wp--preset--color--orange);
	transform: scale(1.3);
}
.ewerle-rechenbeispiel-hinweis {
	text-align: center;
	font-size: 13.5px;
	font-weight: 300;
	color: rgba(26, 39, 68, .55);
	margin: 14px auto 0;
	max-width: 640px;
}


/* ==========================================================================
   Verhaltens-Schicht (JS): Reveal, Faden, Slider, Embeds — Originalwerte
   ========================================================================== */

/* Scroll-Reveal (Original: revealUp .9s cubic-bezier(.16,.8,.3,1)) */
@keyframes ewerle-revealUp {
	from { opacity: 0; transform: translateY(46px); }
	to { opacity: 1; transform: none; }
}
[data-ewerle-reveal] {
	opacity: 0;
	will-change: transform, opacity;
}
[data-ewerle-reveal][data-inview] {
	animation: ewerle-revealUp .9s cubic-bezier(.16, .8, .3, 1) both;
	animation-delay: var(--reveal-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
	[data-ewerle-reveal] {
		opacity: 1;
	}
	[data-ewerle-reveal][data-inview] {
		animation: none;
	}
}

/* Fahrplan-Faden (Original: .thread-svg / .thread-card / data-lit) */
.ewerle-thread-wrap {
	position: relative;
}
.ewerle-thread-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	overflow: visible;
}
.ewerle-thread-grid {
	position: relative;
	z-index: 1;
}
/* Mit aktivem Faden übernehmen SVG-Konnektoren; CSS-Punktlinien aus,
   Karten blenden nacheinander ein (Original: opacity/translate/scale) */
.ewerle-thread-grid.hat-faden .ewerle-thread-card::before,
.ewerle-thread-grid.hat-faden .ewerle-thread-card::after {
	content: none !important;
}
.ewerle-thread-grid.hat-faden .ewerle-thread-card {
	opacity: 0;
	transform: translateY(48px) scale(.93);
	transition: opacity .8s cubic-bezier(.16, .8, .3, 1), transform .8s cubic-bezier(.16, .8, .3, 1), border-color .35s, box-shadow .35s;
}
.ewerle-thread-grid.hat-faden .ewerle-thread-card[data-lit] {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.ewerle-thread-card[data-active] {
	border-color: rgba(232, 130, 26, .5);
	box-shadow: 0 40px 80px -34px rgba(0, 0, 0, .8), 0 0 0 1px rgba(232, 130, 26, .3);
}
/* Stage-Illustrationen: Original animiert die aktive Karte */
.ewerle-thread-grid.hat-faden .a-draw,
.ewerle-thread-grid.hat-faden .a-draw2 {
	stroke-dasharray: 400;
	stroke-dashoffset: 400;
}
.ewerle-thread-grid.hat-faden .a-fade,
.ewerle-thread-grid.hat-faden .a-fade2,
.ewerle-thread-grid.hat-faden .a-fade3 {
	opacity: .16;
}
.ewerle-thread-card[data-active] .a-draw { animation: ewerle-aDraw 2.6s ease-in-out infinite; }
.ewerle-thread-card[data-active] .a-draw2 { animation: ewerle-aDraw 2.6s ease-in-out .5s infinite; }
.ewerle-thread-card[data-active] .a-fade { animation: ewerle-aFade 1.9s ease-in-out infinite; }
.ewerle-thread-card[data-active] .a-fade2 { animation: ewerle-aFade 1.9s ease-in-out .48s infinite; }
.ewerle-thread-card[data-active] .a-fade3 { animation: ewerle-aFade 1.9s ease-in-out .96s infinite; }
@keyframes ewerle-aDraw {
	0% { stroke-dashoffset: 400; }
	55%, 100% { stroke-dashoffset: 0; }
}
@keyframes ewerle-aFade {
	0%, 100% { opacity: .16; }
	50% { opacity: 1; }
}
@keyframes ewerle-aFlow {
	0%, 100% { opacity: .35; }
	50% { opacity: 1; }
}
@media (max-width: 680px) {
	.ewerle-thread-grid.hat-faden {
		gap: 104px 0;
	}
	[data-thread-track] { stroke: rgba(255, 255, 255, .34) !important; stroke-width: 3.4 !important; stroke-dasharray: 11 8 !important; }
	[data-thread-path] { stroke-width: 5.5 !important; }
}
@media (prefers-reduced-motion: reduce) {
	.ewerle-thread-grid.hat-faden .ewerle-thread-card {
		opacity: 1;
		transform: none;
	}
	.ewerle-thread-card[data-active] .a-draw,
	.ewerle-thread-card[data-active] .a-draw2,
	.ewerle-thread-card[data-active] .a-fade,
	.ewerle-thread-card[data-active] .a-fade2,
	.ewerle-thread-card[data-active] .a-fade3 {
		animation: none;
	}
}

/* Video-Embeds (Original: Klick ersetzt Poster durch Loom-iframe) */
button.ewerle-hero-video,
button.ewerle-testimonial-thumb {
	appearance: none;
	border: 0;
	padding: 0;
	font: inherit;
	text-align: inherit;
	width: 100%;
	cursor: pointer;
	display: block;
}
.ewerle-embed-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #0B1424;
	z-index: 4;
}
/* Vorgeladenes (unsichtbares) iframe darf keine Klicks abfangen */
.ewerle-embed-frame[aria-hidden="true"] {
	pointer-events: none;
}

/* FAQ: sanftes Auf-/Zuklappen (Annäherung an Original max-height .45s) */
.ewerle-faq details {
	interpolate-size: allow-keywords;
}
.ewerle-faq details::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size .45s cubic-bezier(.16, .8, .3, 1), content-visibility .45s allow-discrete;
}
.ewerle-faq details[open]::details-content {
	block-size: auto;
}
@media (prefers-reduced-motion: reduce) {
	.ewerle-faq details::details-content {
		transition: none;
	}
}

/* Rechtsseiten (Impressum/Datenschutz, Task 7) — 1:1 aus dem Original-Style
   von referenz/webroot-2026-09-06/{impressum,datenschutz}.html übernommen
   (dort inline bzw. als Bundler-<style> hinterlegt, hier als Theme-CSS). */
.ewerle-recht-h1 {
	font-size: clamp(34px, 6vw, 54px);
	font-weight: 700;
	line-height: 1.05;
	margin: 0 0 36px;
}
.ewerle-rechtstext {
	background: #fff;
	border: 1px solid rgba(26, 39, 68, .1);
	border-radius: 14px;
	padding: clamp(24px, 4vw, 44px);
	display: flex;
	flex-direction: column;
	gap: 30px;
}
.ewerle-rechtstext a {
	color: var(--wp--preset--color--orange);
	text-decoration: none;
	word-break: break-word;
}
.ewerle-rechtstext a:hover {
	color: var(--wp--preset--color--navy-hell);
}
.ewerle-rechtstext section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ewerle-rechtstext h2 {
	font-size: 20px;
	font-weight: 700;
	color: #1A2744;
	margin: 0;
}
.ewerle-rechtstext p {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.75;
	color: rgba(26, 39, 68, .85);
	margin: 0;
}
/* Datenschutz: mehr/verschachtelte Abschnitte (Original-Klasse "ds") */
.ewerle-rechtstext--ds {
	gap: 24px;
}
.ewerle-rechtstext--ds section {
	gap: 8px;
	padding-top: 20px;
	border-top: 1px solid rgba(26, 39, 68, .09);
}
.ewerle-rechtstext--ds section:first-child {
	border-top: 0;
	padding-top: 0;
}
.ewerle-rechtstext--ds h2 {
	font-size: 21px;
	margin-top: 8px;
}
.ewerle-rechtstext--ds h3 {
	font-size: 17px;
	font-weight: 700;
	color: #1A2744;
	margin: 12px 0 0;
}
.ewerle-rechtstext--ds p {
	font-size: 15.5px;
}
.ewerle-rechtstext--ds ul {
	margin: 0 0 0 20px;
	padding: 0;
}
.ewerle-rechtstext--ds li {
	font-size: 15.5px;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(26, 39, 68, .85);
}

/* 404-Seite (Task 7) — Navy-Block, zentriert, wie Erstgespräch-CTA-Sektionen */
.ewerle-404 {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.ewerle-404-code {
	font-size: clamp(48px, 9vw, 88px);
	font-weight: 700;
	color: var(--wp--preset--color--orange);
	line-height: 1;
}
.ewerle-404-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
	margin: 8px 0 12px;
	padding: 0;
	list-style: none;
}
.ewerle-404-links a {
	color: #fff;
	font-size: 17px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(255, 255, 255, .4);
}
.ewerle-404-links a:hover {
	text-decoration-color: #fff;
}
.ewerle-404-links .ewerle-404-badge {
	display: inline-block;
	margin-left: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange-hell);
	opacity: .9;
}

/* ==========================================================================
   Showcase-Block (Task 13c): Geräterahmen, Projekt-Showcase, Diagramme
   ========================================================================== */

/* 390px-Fix (Task 13g): Die 3D-Neigung der Laptop-/Phone-Rahmen projiziert
   auf schmalen Viewports wenige Pixel über die Viewport-Kante hinaus
   (scrollable overflow trotz 18px Innenabstand). Auf der vollbreiten
   Showcase-Sektion gekappt — sichtbar wird nichts beschnitten. */
.ewerle-section--showcase {
	overflow-x: clip;
}

/* Projekt-Showcase: gestaffeltes Grid aus Laptop-Karten ------------------- */
.ewerle-showcase-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(38px, 4.5vw, 64px) clamp(30px, 4vw, 56px);
	margin-top: clamp(28px, 4vw, 50px);
}
.ewerle-showcase-karte {
	display: block;
	text-decoration: none;
}
/* Gestaffelte Anordnung: jede zweite Karte leicht nach unten versetzt */
@media (min-width: 900px) {
	.ewerle-showcase-karte:nth-child(even) {
		margin-top: clamp(22px, 3vw, 46px);
	}
}
/* Karriere-Variante (Task 13g): ab 900px 3 Spalten (6 Rasterspuren, jede
   Karte spannt 2). Bei 5 Karten wird die letzte Reihe (Karte 4+5)
   zentriert — 3+2-Anordnung; die sechste Referenz (folgt von Frank) füllt
   das Grid dann automatisch zu 3+3 auf. 720-899px: 2 Spalten, eine
   ungerade letzte Karte läuft zentriert über beide Spalten. */
@media (min-width: 720px) and (max-width: 899px) {
	.ewerle-showcase-grid--karriere .ewerle-showcase-karte:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		width: min(100%, 540px);
		margin-inline: auto;
	}
}
@media (min-width: 900px) {
	.ewerle-showcase-grid--karriere {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: clamp(30px, 3.5vw, 48px) clamp(20px, 2.2vw, 32px);
	}
	.ewerle-showcase-grid--karriere .ewerle-showcase-karte {
		grid-column: span 2;
		margin-top: 0;
	}
	.ewerle-showcase-grid--karriere .ewerle-showcase-karte:nth-child(3n+2) {
		margin-top: clamp(22px, 3vw, 46px);
	}
	/* 5 Karten: Karte 4 beginnt in Spur 2, Karte 5 folgt — letzte Reihe mittig */
	.ewerle-showcase-grid--karriere .ewerle-showcase-karte:nth-child(4):nth-last-child(2) {
		grid-column: 2 / span 2;
	}
}

/* Generischer Laptop-Rahmen (CSS, ohne Marken-Logos) */
.ewerle-laptop {
	position: relative;
	display: block;
	transition: transform .65s cubic-bezier(.16, .8, .3, 1);
	will-change: transform;
}
.ewerle-showcase-karte:nth-child(odd) .ewerle-laptop {
	transform: perspective(1500px) rotateY(6.5deg) rotateX(2deg);
}
.ewerle-showcase-karte:nth-child(even) .ewerle-laptop {
	transform: perspective(1500px) rotateY(-6.5deg) rotateX(2deg);
}
.ewerle-showcase-karte:hover .ewerle-laptop,
.ewerle-showcase-karte:focus-visible .ewerle-laptop {
	transform: perspective(1500px) rotateY(0deg) rotateX(0deg) translateY(-8px);
}
.ewerle-laptop::before { /* Kamerapunkt im oberen Rahmen */
	content: "";
	position: absolute;
	top: 4px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #3A4356;
	z-index: 2;
}
.ewerle-laptop-schirm {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: #0B1424;
	border: 10px solid #1C2230;
	border-radius: 16px 16px 5px 5px;
	overflow: hidden;
	/* Safari-Vorsorge (Task 13g): eigener Stacking-Context stabilisiert das
	   Clipping animierter Kinder an border-radius + overflow:hidden. */
	isolation: isolate;
	box-shadow: 0 34px 64px -30px rgba(11, 20, 36, .55);
}
.ewerle-laptop-schirm img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	display: block;
	transform: translateY(0);
}
.ewerle-laptop-basis {
	display: block;
	position: relative;
	height: 13px;
	margin: 0 -5.5%;
	background: linear-gradient(180deg, #2A3242, #161C28);
	border-radius: 3px 3px 12px 12px;
	box-shadow: 0 16px 30px -18px rgba(11, 20, 36, .6);
}
.ewerle-laptop-basis::before { /* Griffmulde */
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 14%;
	height: 5px;
	background: #0E1420;
	border-radius: 0 0 8px 8px;
}

/* Auto-Scroll des Screenshots im Rahmen (Bilder 1000x1022, Schirm 16:10:
   maximale Fahrt = (1.022 - 0.625) / 1.022 ≈ 38.8 % der Bildhöhe) */
@keyframes ewerle-screen-pan {
	0%, 10% { transform: translateY(0); }
	46%, 60% { transform: translateY(-38.5%); }
	96%, 100% { transform: translateY(0); }
}
.ewerle-showcase-karte[data-inview] .ewerle-laptop-schirm img {
	animation: ewerle-screen-pan 17s ease-in-out infinite;
}
/* Versetzt starten, damit nicht alle Rahmen synchron scrollen */
.ewerle-showcase-karte:nth-child(2)[data-inview] .ewerle-laptop-schirm img { animation-delay: 2.4s; }
.ewerle-showcase-karte:nth-child(3)[data-inview] .ewerle-laptop-schirm img { animation-delay: 4.8s; }
.ewerle-showcase-karte:nth-child(4)[data-inview] .ewerle-laptop-schirm img { animation-delay: 7.2s; }
.ewerle-showcase-karte:nth-child(5)[data-inview] .ewerle-laptop-schirm img { animation-delay: 1.2s; }
.ewerle-showcase-karte:nth-child(6)[data-inview] .ewerle-laptop-schirm img { animation-delay: 3.6s; }
.ewerle-showcase-karte:nth-child(7)[data-inview] .ewerle-laptop-schirm img { animation-delay: 6s; }
.ewerle-showcase-karte:nth-child(8)[data-inview] .ewerle-laptop-schirm img { animation-delay: 8.4s; }
.ewerle-showcase-karte:nth-child(9)[data-inview] .ewerle-laptop-schirm img { animation-delay: 3s; }
.ewerle-showcase-karte:nth-child(10)[data-inview] .ewerle-laptop-schirm img { animation-delay: 5.4s; }

.ewerle-showcase-titel {
	display: block;
	text-align: center;
	margin-top: 18px;
	font-weight: 700;
	font-size: 16.5px;
	line-height: 1.35;
	color: var(--wp--preset--color--navy);
}
.ewerle-showcase-domain {
	display: block;
	margin-top: 2px;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .4px;
	color: var(--wp--preset--color--orange-dunkel);
}
.ewerle-showcase-karte:hover .ewerle-showcase-domain,
.ewerle-showcase-karte:focus-visible .ewerle-showcase-domain {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Dezente Leiste der übrigen Referenzen */
.ewerle-showcase-mehr {
	margin: clamp(44px, 6vw, 68px) auto 0;
	max-width: 900px;
	text-align: center;
	font-size: 14.5px;
	line-height: 2.3;
	color: rgba(26, 39, 68, .75);
}
.ewerle-showcase-mehr strong {
	display: inline-block;
	margin-bottom: 6px;
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}
.ewerle-showcase-mehr span {
	white-space: nowrap;
	font-weight: 600;
	font-size: 13px;
	color: rgba(26, 39, 68, .85);
	background: rgba(26, 39, 68, .05);
	border: 1px solid rgba(26, 39, 68, .12);
	padding: 3px 11px;
	border-radius: 999px;
	margin: 0 3px;
}

@media (max-width: 719px) {
	.ewerle-showcase-grid {
		grid-template-columns: 1fr;
		gap: 44px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ewerle-showcase-karte .ewerle-laptop-schirm img {
		animation: none !important;
	}
	.ewerle-showcase-karte .ewerle-laptop,
	.ewerle-showcase-karte:hover .ewerle-laptop {
		transform: none;
		transition: none;
	}
}

/* Diagramme (Funnelhub /webdesign/, Retargeting-Loop /karriere-seiten/) --- */
.ewerle-diagramm {
	position: relative;
	margin-top: clamp(28px, 4vw, 54px);
}
.ewerle-diagramm-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	overflow: visible;
}

/* Funnelhub: Quellen | Zentrum | Conversions */
.ewerle-hub-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1.3fr 1fr;
	gap: clamp(28px, 5vw, 76px);
	align-items: center;
}
.ewerle-hub-spalte {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ewerle-hub-spaltentitel {
	font-size: 12px;
	letter-spacing: 2.5px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
	text-align: center;
	margin-bottom: 2px;
}
.ewerle-hub-node {
	display: flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	padding: 13px 16px;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	box-shadow: 0 20px 44px -28px rgba(0, 0, 0, .7);
}
.ewerle-hub-node svg {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--wp--preset--color--orange-hell);
}
.ewerle-hub-zentrum {
	position: relative;
	text-align: center;
	background: radial-gradient(120% 130% at 50% 0%, rgba(232, 130, 26, .16), rgba(11, 20, 36, .5));
	border: 1.5px solid rgba(232, 130, 26, .55);
	border-radius: 20px;
	padding: clamp(22px, 3vw, 34px) clamp(18px, 2.5vw, 28px);
	color: #fff;
	animation: ewerle-hub-puls 2.8s ease-out infinite;
}
@keyframes ewerle-hub-puls {
	0% { box-shadow: 0 0 0 0 rgba(232, 130, 26, .35); }
	70% { box-shadow: 0 0 0 22px rgba(232, 130, 26, 0); }
	100% { box-shadow: 0 0 0 0 rgba(232, 130, 26, 0); }
}
.ewerle-hub-zentrum-label {
	display: block;
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 700;
	letter-spacing: .5px;
}
.ewerle-hub-zentrum-sub {
	display: block;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange-hell);
	margin-top: 3px;
	font-weight: 700;
}
.ewerle-hub-zentrum-text {
	display: block;
	font-size: 13.5px;
	font-weight: 300;
	color: rgba(255, 255, 255, .75);
	margin-top: 10px;
	line-height: 1.55;
}
.ewerle-hub-beispiel {
	opacity: .85;
	margin-top: clamp(30px, 4vw, 46px) !important;
	font-size: 15.5px;
}
.ewerle-hub-beispiel a {
	color: var(--wp--preset--color--orange-hell);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(251, 183, 101, .45);
}
.ewerle-hub-beispiel a:hover {
	text-decoration-color: var(--wp--preset--color--orange-hell);
}

/* Kontextuelle Querverweise zwischen den Leistungsseiten (SEO-Quick-Wins,
   Punkt 5). Sie stehen im Fließtext auf dunklem Grund – ohne eigene Regel
   wären sie von der Umgebung nicht zu unterscheiden. Gleiche Optik wie
   .ewerle-hub-beispiel a, damit im Layout kein neuer Link-Stil entsteht. */
.ewerle-leistung-schluss a,
.ewerle-thread-card p a {
	color: var(--wp--preset--color--orange-hell);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(251, 183, 101, .45);
}
.ewerle-leistung-schluss a:hover,
.ewerle-thread-card p a:hover {
	text-decoration-color: var(--wp--preset--color--orange-hell);
}
@media (max-width: 719px) {
	.ewerle-hub-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.ewerle-hub-spalte--quellen {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
	}
	.ewerle-hub-spalte--quellen .ewerle-hub-spaltentitel {
		width: 100%;
	}
	.ewerle-hub-spalte--ziele {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.ewerle-hub-spalte--ziele .ewerle-hub-spaltentitel {
		grid-column: 1 / -1;
	}
	.ewerle-hub-node {
		font-size: 13.5px;
		padding: 10px 12px;
		gap: 9px;
	}
	.ewerle-hub-node svg {
		width: 18px;
		height: 18px;
	}
}

/* Retargeting-Loop: 4 Stationen im Uhrzeigersinn (2x2), Mobil untereinander */
.ewerle-loop-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(48px, 6vw, 96px) clamp(70px, 10vw, 160px);
	max-width: 960px;
	margin-inline: auto;
}
.ewerle-loop-node {
	background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03));
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 16px;
	padding: 18px 20px;
	box-shadow: 0 26px 52px -32px rgba(0, 0, 0, .75);
}
/* Uhrzeigersinn: Station 3 unten rechts, Station 4 unten links */
.ewerle-loop-node:nth-child(3) {
	grid-column: 2;
	grid-row: 2;
}
.ewerle-loop-node:nth-child(4) {
	grid-column: 1;
	grid-row: 2;
}
.ewerle-loop-node--ziel {
	border-color: rgba(232, 130, 26, .55);
	background: radial-gradient(130% 140% at 50% 0%, rgba(232, 130, 26, .15), rgba(11, 20, 36, .45));
}
.ewerle-loop-tag {
	display: block;
	font-size: 12px;
	letter-spacing: 2.5px;
	font-weight: 700;
	color: var(--wp--preset--color--orange);
	margin: 0 0 7px;
	text-transform: uppercase;
}
.ewerle-loop-node h3 {
	font-size: 17.5px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 7px;
	line-height: 1.3;
}
.ewerle-loop-node p {
	font-size: 14px;
	font-weight: 300;
	color: rgba(255, 255, 255, .72);
	line-height: 1.55;
	margin: 0;
}
/* Pixel-Punkt: pulsiert an der Karriere-Seiten-Station */
.ewerle-loop-pixel {
	display: inline-block;
	position: relative;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	margin-left: 9px;
	vertical-align: middle;
	box-shadow: 0 0 8px rgba(232, 130, 26, .9);
}
.ewerle-loop-pixel::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1.5px solid rgba(232, 130, 26, .6);
	animation: ewerle-pixel-puls 2s ease-out infinite;
}
@keyframes ewerle-pixel-puls {
	0% { transform: scale(.6); opacity: 1; }
	100% { transform: scale(2.2); opacity: 0; }
}
@media (max-width: 719px) {
	.ewerle-loop-grid {
		grid-template-columns: 1fr;
		gap: 44px;
		padding-left: 26px;
	}
	.ewerle-loop-node:nth-child(3),
	.ewerle-loop-node:nth-child(4) {
		grid-column: auto;
		grid-row: auto;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ewerle-hub-zentrum {
		animation: none;
	}
	.ewerle-loop-pixel::after {
		animation: none;
	}
}

/* Leistungsumfang mit 5. Karte (GEO, Kundenwunsch 07.09.): die fünfte Karte
   schließt zentriert über die volle Breite ab. */
.ewerle-cards--4 > .ewerle-card:nth-child(5) {
	grid-column: 1 / -1;
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
}

/* Generischer Phone-Rahmen (Mobil-Ansichten im Showcase, Task 13c) -------- */
/* Der Schatten liegt auf dem Wrapper, weil der Schirm per clip-path hart an
   der Border-Box gekappt wird (Safari-Fix, s. u.) — ein Schatten auf dem
   Schirm selbst würde mitgekappt. */
.ewerle-phone {
	display: block;
	border-radius: 22px;
	box-shadow: 0 22px 44px -20px rgba(11, 20, 36, .75), 0 0 0 1.5px rgba(255, 255, 255, .06);
}
.ewerle-phone-schirm {
	position: relative;
	display: block;
	aspect-ratio: 39 / 80;
	background: #0B1424;
	border: 5px solid #1C2230;
	border-radius: 22px;
	overflow: hidden;
	/* Safari-Fix (Task 13g, Bild 24): Safari clippt das animierte
	   Screenshot-Bild nicht zuverlässig an border-radius + overflow:hidden —
	   der Screenshot "bricht aus dem iPhone-Rahmen aus". clip-path kappt
	   hart an der Border-Box; der Schatten liegt deshalb auf .ewerle-phone. */
	isolation: isolate;
	clip-path: inset(0 round 22px);
}
.ewerle-phone-schirm::before { /* Kamera-Insel */
	content: "";
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 34%;
	height: 9px;
	background: #1C2230;
	border-radius: 7px;
	z-index: 2;
}
.ewerle-phone-schirm img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	display: block;
}
/* Mobil-Bilder sind 390x1200 (Schirm 39:80): Fahrt ≈ 33 % der Bildhöhe */
@keyframes ewerle-phone-pan {
	0%, 14% { transform: translateY(0); }
	50%, 64% { transform: translateY(-33%); }
	96%, 100% { transform: translateY(0); }
}
.ewerle-showcase-karte[data-inview] .ewerle-phone-schirm img {
	animation: ewerle-phone-pan 15s ease-in-out 1.6s infinite;
}
.ewerle-phone--statisch .ewerle-phone-schirm img {
	animation: none !important;
}
/* Duo: Phone lehnt unten rechts am Laptop (kippt und richtet sich mit ihm) */
.ewerle-phone--duo {
	position: absolute;
	right: -3.5%;
	bottom: -6%;
	width: 23%;
	z-index: 2;
}
/* Solo-Phone-Karte (METAKON): zentriert, gleiche Neigungs-Mechanik */
.ewerle-showcase-karte--phone {
	align-self: center;
}
.ewerle-phone--solo {
	position: relative;
	width: min(52%, 210px);
	margin-inline: auto;
	transform: perspective(1200px) rotateY(-6.5deg) rotateX(2deg);
	transition: transform .65s cubic-bezier(.16, .8, .3, 1);
	will-change: transform;
}
.ewerle-showcase-karte--phone:hover .ewerle-phone--solo,
.ewerle-showcase-karte--phone:focus-visible .ewerle-phone--solo {
	transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-8px);
}
/* Steht die Solo-Phone-Karte allein in der letzten Reihe: mittig */
.ewerle-showcase-grid > .ewerle-showcase-karte--phone:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}
@media (prefers-reduced-motion: reduce) {
	.ewerle-phone-schirm img {
		animation: none !important;
	}
	.ewerle-phone--solo,
	.ewerle-showcase-karte--phone:hover .ewerle-phone--solo {
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   Social-Media-Showcase (Task 13d): iPhone-Fächer, Reel-Loops, Redaktionsplan
   ========================================================================== */

/* iPhone-Fächer: drei gestaffelte, leicht rotierte Profile ----------------- */
.ewerle-sm-faecher {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 0;
	margin-top: clamp(26px, 4vw, 46px);
	padding-bottom: 10px;
}
.ewerle-sm-karte {
	display: block;
	text-decoration: none;
	width: min(31%, 236px);
	flex: 0 0 auto;
}
.ewerle-sm-karte .ewerle-phone--faecher {
	transition: transform .65s cubic-bezier(.16, .8, .3, 1);
	will-change: transform;
}
.ewerle-sm-karte:nth-child(1) { z-index: 1; }
.ewerle-sm-karte:nth-child(2) { z-index: 3; margin-inline: -3.5%; }
.ewerle-sm-karte:nth-child(3) { z-index: 2; }
.ewerle-sm-karte:nth-child(1) .ewerle-phone--faecher {
	transform: perspective(1300px) rotate(-6deg) rotateY(7deg) translateY(20px);
}
.ewerle-sm-karte:nth-child(2) .ewerle-phone--faecher {
	transform: perspective(1300px) translateY(-4px);
}
.ewerle-sm-karte:nth-child(3) .ewerle-phone--faecher {
	transform: perspective(1300px) rotate(6deg) rotateY(-7deg) translateY(20px);
}
.ewerle-sm-karte:hover .ewerle-phone--faecher,
.ewerle-sm-karte:focus-visible .ewerle-phone--faecher {
	transform: perspective(1300px) rotate(0deg) rotateY(0deg) translateY(-8px);
}
/* Nur die mittlere Karte trägt den Titel unterm Fächer nicht versetzt */
.ewerle-sm-karte .ewerle-showcase-titel { margin-top: 30px; }
.ewerle-sm-karte:nth-child(2) .ewerle-showcase-titel { margin-top: 14px; }

/* Fächer-Bilder (480x1200): Fahrt ≈ 18 % der Bildhöhe */
@keyframes ewerle-sm-pan {
	0%, 12% { transform: translateY(0); }
	50%, 62% { transform: translateY(-17.8%); }
	96%, 100% { transform: translateY(0); }
}
.ewerle-sm-karte[data-inview] .ewerle-phone-schirm img {
	animation: ewerle-sm-pan 16s ease-in-out infinite;
}
.ewerle-sm-karte:nth-child(2)[data-inview] .ewerle-phone-schirm img { animation-delay: 2.2s; }
.ewerle-sm-karte:nth-child(3)[data-inview] .ewerle-phone-schirm img { animation-delay: 4.4s; }

/* Reel-Loops: drei 9:16-Phones nebeneinander ------------------------------ */
.ewerle-sm-reels {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(14px, 3vw, 36px);
	margin-top: clamp(34px, 5vw, 60px);
}
.ewerle-sm-reel {
	margin: 0;
	width: min(29%, 216px);
}
.ewerle-phone--reel .ewerle-phone-schirm {
	aspect-ratio: 9 / 16;
}
.ewerle-phone--reel video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ewerle-sm-reel .ewerle-showcase-titel { margin-top: 14px; }

/* Redaktionsplan im Browser-Rahmen + Status-Schritte ----------------------- */
.ewerle-sm-plan {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	margin-top: clamp(40px, 6vw, 72px);
}
.ewerle-browser {
	display: block;
	background: #0B1424;
	border: 1px solid #1C2230;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 30px 60px -28px rgba(11, 20, 36, .5);
}
.ewerle-browser-leiste {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 12px;
	background: #1C2230;
}
.ewerle-browser-leiste i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #3A4356;
}
.ewerle-browser-leiste b {
	margin-left: 10px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .4px;
	color: #8B94A6;
	background: #0E1420;
	border-radius: 6px;
	padding: 3px 12px;
}
.ewerle-browser img {
	display: block;
	width: 100%;
	height: auto;
}
.ewerle-sm-plan-hinweis {
	margin: 10px 2px 0;
	font-size: 13px;
	color: var(--wp--preset--color--grau, #5B6472);
	opacity: .8;
}
.ewerle-sm-plan-text h3 {
	font-size: clamp(21px, 2.4vw, 27px);
	margin: 0 0 18px;
}
.ewerle-sm-schritte {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ewerle-sm-schritte li {
	margin: 0 0 16px;
	line-height: 1.55;
}
.ewerle-sm-status {
	display: inline-block;
	margin: 0 8px 4px 0;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .4px;
	white-space: nowrap;
	vertical-align: 1px;
}
.ewerle-sm-status.ist-review { background: #E8EAF0; color: #3D4759; }
.ewerle-sm-status.ist-geplant { background: #E3EAF6; color: #2B4B8F; }
.ewerle-sm-status.ist-freigabe { background: #FBEBD8; color: #A05A12; }
.ewerle-sm-status.ist-live { background: #DFF2E4; color: #1F7A3D; }

/* Posting-Flow-Demo (Folgerunde 2): stilisierter Beitrag + Kalenderblatt +
   Status-Chips + Social-Feed-Mini-Frame im Browser-Rahmen. Statischer Stand
   (No-JS/reduced-motion) = alle 4 Chips als Phasenreihe, Kalender angedockt,
   ein Beitrag im Feed; ewerle.js schaltet .is-animiert dazu. ------------- */
.ewerle-postflow {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.6vw, 18px);
	padding: clamp(12px, 2vw, 20px);
	background: #F3F4F7;
}
.ewerle-pf-plan {
	flex: 1.35;
	min-width: 0;
}
.ewerle-pf-plan-titel {
	display: block;
	margin: 0 2px 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: #5B6472;
}
.ewerle-pf-beitrag {
	position: relative;
	background: #fff;
	border: 1px solid rgba(26, 39, 68, .08);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(11, 20, 36, .07);
	padding: 10px;
}
.ewerle-pf-kalender {
	position: absolute;
	top: -10px;
	right: -8px;
	z-index: 2;
	width: 46px;
	background: #fff;
	border: 1px solid rgba(26, 39, 68, .1);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 18px -8px rgba(11, 20, 36, .45);
	text-align: center;
	transform: rotate(3deg);
}
.ewerle-pf-kalender b {
	display: block;
	background: #E8821A;
	color: #fff;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 1.2px;
	padding: 2px 0;
}
.ewerle-pf-kalender i {
	display: block;
	font-style: normal;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.15;
	color: #1A2744;
	padding-top: 2px;
}
.ewerle-pf-kalender em {
	display: block;
	font-style: normal;
	font-size: 7.5px;
	color: #5B6472;
	padding: 0 0 3px;
}
/* Creative = echtes Kundenfoto (Folgerunde 2, Punkt 7); der Farbverlauf
   bleibt als Backdrop, solange das Foto lädt. */
.ewerle-pf-creative {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
}
.ewerle-pf-creative.ist-a,
.ewerle-pf-feed-creative.ist-a { background: linear-gradient(135deg, #F2B268, #C96F12); }
.ewerle-pf-creative.ist-b,
.ewerle-pf-feed-creative.ist-b { background: linear-gradient(135deg, #7E97C9, #23407D); }
.ewerle-pf-creative.ist-c,
.ewerle-pf-feed-creative.ist-c { background: linear-gradient(135deg, #7FBE93, #1F6E39); }
.ewerle-pf-creative img,
.ewerle-pf-feed-creative img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ewerle-pf-creative b {
	position: absolute;
	left: 7px;
	bottom: 7px;
	z-index: 1;
	max-width: calc(100% - 14px);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .3px;
	color: #fff;
	background: rgba(11, 20, 36, .62);
	border-radius: 999px;
	padding: 2px 9px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ewerle-pf-zeile {
	display: block;
	height: 7px;
	margin-top: 7px;
	border-radius: 4px;
	background: #E8EAF0;
}
.ewerle-pf-beitrag > .ewerle-pf-zeile:first-of-type { margin-top: 10px; }
.ewerle-pf-zeile.ist-mittel { width: 78%; }
.ewerle-pf-zeile.ist-kurz { width: 55%; }
.ewerle-pf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 10px;
	min-height: 20px;
}
.ewerle-pf-chips .ewerle-sm-status {
	margin: 0;
	font-size: 10px;
	padding: 2px 8px;
	vertical-align: 0;
}
.ewerle-pf-pfeil {
	flex: 0 0 auto;
	width: 24px;
	color: #B4BBC9;
}
.ewerle-pf-pfeil svg {
	display: block;
	width: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ewerle-pf-phone {
	flex: 1;
	min-width: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(26, 39, 68, .12);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 14px 30px -18px rgba(11, 20, 36, .45);
}
.ewerle-pf-phone-kopf {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 7px 9px;
	border-bottom: 1px solid #EEF0F4;
	color: #3D4759;
}
.ewerle-pf-phone-kopf svg {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ewerle-pf-wortzeile {
	flex: 0 1 38%;
	height: 7px;
	margin-right: auto;
	border-radius: 4px;
	background: #E5E8EE;
}
.ewerle-pf-feed {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ewerle-pf-feedpost {
	background: #fff;
	border: 1px solid #EEF0F4;
	border-radius: 9px;
	padding: 6px;
}
.ewerle-pf-feed-kopf {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 6px;
}
.ewerle-pf-avatar {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: linear-gradient(135deg, #D7DCE5, #A9B2C2);
}
.ewerle-pf-feed-zeilen {
	flex: 1;
	min-width: 0;
}
.ewerle-pf-feed-zeilen b {
	display: block;
	height: 5px;
	border-radius: 3px;
	background: #E8EAF0;
	width: 62%;
}
.ewerle-pf-feed-zeilen b + b { margin-top: 3px; width: 40%; }
.ewerle-pf-feed-creative {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
}
.ewerle-pf-feed-creative b {
	position: absolute;
	left: 5px;
	bottom: 5px;
	z-index: 1;
	max-width: calc(100% - 10px);
	font-size: 7.5px;
	font-weight: 600;
	letter-spacing: .3px;
	color: #fff;
	background: rgba(11, 20, 36, .62);
	border-radius: 999px;
	padding: 1px 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ewerle-pf-feed-aktionen {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	color: #3D4759;
}
.ewerle-pf-feed-aktionen svg {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ewerle-pf-like-zeile {
	flex: 0 1 30%;
	height: 5px;
	margin-left: 2px;
	border-radius: 3px;
	background: #E8EAF0;
}

/* Plattform-Chip-Reihe unter der Demo (Folgerunde 2, Punkt 7): stilisierte
   Icons, keine 1:1-Markenlogos — die Namen sind reine Nennung. */
.ewerle-pf-plattformen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 12px 2px 0;
	font-size: 12.5px;
	color: var(--wp--preset--color--grau, #5B6472);
}
.ewerle-pf-plattformen-label {
	font-weight: 600;
}
.ewerle-pf-plattform {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #fff;
	border: 1px solid rgba(26, 39, 68, .1);
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 600;
	color: #3D4759;
	white-space: nowrap;
}
.ewerle-pf-plattform svg {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	fill: none;
	stroke: var(--wp--preset--color--orange, #E8821A);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Fotostrecken-Leiste (Folgerunde 2, Punkt 7): 4 echte Kundenfotos zwischen
   Reels und Posting-Flow. 4er-Reihe, unter 640px sauberes 2×2. */
.ewerle-sm-fotos {
	margin-top: clamp(34px, 5vw, 60px);
}
.ewerle-sm-fotos-text {
	max-width: 720px;
	margin: 0 auto 18px;
	text-align: center;
}
.ewerle-sm-fotos-leiste {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}
.ewerle-sm-fotos-leiste figure {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 22px 44px -26px rgba(11, 20, 36, .5);
}
.ewerle-sm-fotos-leiste img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
@media (max-width: 640px) {
	.ewerle-sm-fotos-leiste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

/* Animierter Modus (setzt ewerle.js, nie bei reduced motion) --------------- */
@keyframes ewerle-pf-rein {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes ewerle-pf-raus {
	from { opacity: 1; }
	to { opacity: 0; transform: translateY(-8px); }
}
@keyframes ewerle-pf-chip-rein {
	from { opacity: 0; transform: scale(.75); }
	to { opacity: 1; transform: scale(1); }
}
@keyframes ewerle-pf-feed-rein {
	from { opacity: 0; transform: scale(.92); }
	to { opacity: 1; transform: scale(1); }
}
@keyframes ewerle-pf-herz {
	0%, 100% { transform: scale(1); }
	35% { transform: scale(1.55); }
	65% { transform: scale(1.15); }
}
.ewerle-postflow.is-animiert [data-pf-kalender] {
	opacity: 0;
	transform: translate(20px, -28px) rotate(12deg) scale(.7);
	transition: transform .6s cubic-bezier(.16, .8, .3, 1), opacity .45s ease;
}
.ewerle-postflow.is-animiert [data-pf-kalender].ist-da {
	opacity: 1;
	transform: translate(0, 0) rotate(3deg) scale(1);
}
.ewerle-postflow.is-animiert [data-pf-chip] { display: none; }
.ewerle-postflow.is-animiert [data-pf-chip].ist-aktiv {
	display: inline-block;
	animation: ewerle-pf-chip-rein .35s cubic-bezier(.16, .8, .3, 1) both;
}
.ewerle-postflow.is-animiert .ewerle-pf-beitrag.ist-neu {
	animation: ewerle-pf-rein .55s cubic-bezier(.16, .8, .3, 1) both;
}
.ewerle-postflow.is-animiert .ewerle-pf-beitrag.ist-raus {
	animation: ewerle-pf-raus .45s ease-in both;
}
.ewerle-pf-flug {
	position: absolute;
	z-index: 6;
	margin: 0;
	box-shadow: 0 14px 30px -12px rgba(11, 20, 36, .5);
	transition: transform .7s cubic-bezier(.3, .7, .25, 1), opacity .7s ease;
	will-change: transform;
	pointer-events: none;
}
.ewerle-pf-feedpost.ist-wartet { visibility: hidden; }
.ewerle-pf-feedpost.ist-neu {
	animation: ewerle-pf-feed-rein .45s cubic-bezier(.16, .8, .3, 1) both;
}
.ewerle-pf-feedpost.ist-neu .ewerle-pf-herz {
	color: #E8821A;
	animation: ewerle-pf-herz .8s ease-out .25s 1;
	transform-origin: center;
}
.ewerle-pf-feedpost.ist-alt { opacity: .55; }

@media (max-width: 600px) {
	.ewerle-postflow { padding: 10px; gap: 8px; }
	.ewerle-pf-plan-titel { font-size: 8.5px; margin-bottom: 6px; }
	.ewerle-pf-beitrag { padding: 8px; }
	.ewerle-pf-kalender { width: 38px; right: -5px; top: -8px; }
	.ewerle-pf-kalender i { font-size: 14px; }
	.ewerle-pf-creative b { font-size: 9px; }
	.ewerle-pf-chips .ewerle-sm-status { font-size: 8.5px; padding: 2px 6px; }
	.ewerle-pf-pfeil { width: 16px; }
	.ewerle-pf-phone { border-radius: 12px; }
	.ewerle-pf-feed { padding: 6px; gap: 6px; }
}

@media (max-width: 860px) {
	.ewerle-sm-plan {
		grid-template-columns: minmax(0, 1fr);
	}
	.ewerle-sm-plan-text h3 { margin-top: 4px; }
}
@media (max-width: 640px) {
	.ewerle-sm-karte { width: 32%; }
	.ewerle-sm-reel { width: 31%; }
	.ewerle-sm-karte .ewerle-showcase-titel .ewerle-showcase-domain { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.ewerle-sm-karte .ewerle-phone-schirm img {
		animation: none !important;
	}
	.ewerle-sm-karte .ewerle-phone--faecher,
	.ewerle-sm-karte:hover .ewerle-phone--faecher {
		transition: none;
	}
}
.ewerle-sm-karte:hover .ewerle-showcase-domain,
.ewerle-sm-karte:focus-visible .ewerle-showcase-domain {
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Handle-Leiste im SM-Showcase steht näher am Fächer */
.ewerle-sm-showcase .ewerle-showcase-mehr {
	margin-top: clamp(30px, 4vw, 46px);
}
/* Lange Instagram-Handles dürfen unter den schmalen Fächer-Phones umbrechen */
.ewerle-sm-karte .ewerle-showcase-domain {
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Kundenportal-Showcase (Task 13f): animiertes Kanban + echte Portal-Shots
   ========================================================================== */

/* Zweispaltiger Kopf: Demo-Board links, Feature-Bullets rechts ------------- */
.ewerle-kp {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: clamp(28px, 4vw, 60px);
	align-items: center;
	margin-top: clamp(28px, 4vw, 50px);
}
.ewerle-kp-browser {
	width: 100%;
}

/* Demo-Board im Browser-Rahmen: helle Portal-Optik auf dunklem Chrome ------ */
.ewerle-kp-board {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	padding: 12px;
	background: #F3F4F7;
	min-height: 350px;
	align-items: stretch;
}
/* Kampagnen-/Board-Kopfzeile über den Spalten (Folgerunde 2): macht die
   Demo-Story sofort lesbar („Kampagne: Monteur (m/w/d) — SHK-Betrieb"). */
.ewerle-kp-boardkopf {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .3px;
	color: #3D4759;
	background: #fff;
	border: 1px solid rgba(26, 39, 68, .08);
	border-radius: 8px;
	padding: 6px 10px;
}
.ewerle-kp-boardkopf::before {
	content: '';
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--orange, #E8821A);
}
.ewerle-kp-spalte {
	background: #EAECF1;
	border-radius: 10px;
	padding: 8px;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.ewerle-kp-spalte-kopf {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: #3D4759;
	padding: 3px 4px 8px;
	white-space: nowrap;
	min-width: 0;
}
.ewerle-kp-spalte-kopf b {
	margin-left: auto;
	font-size: 10.5px;
	font-weight: 700;
	color: #5B6472;
	background: rgba(26, 39, 68, .08);
	border-radius: 999px;
	padding: 1px 7px;
}
/* Optionaler Kurztitel im Spaltenkopf („Termin vor Ort" → „Termin"):
   unter 600px würde der lange Titel die schmale Spalte sprengen. */
.ewerle-kp-kopf-kurz { display: none; }
.ewerle-kp-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}
.ewerle-kp-dot.ist-neu { background: #E8821A; }
.ewerle-kp-dot.ist-mitte1 { background: #2B4B8F; }
.ewerle-kp-dot.ist-mitte2 { background: #A05A12; }
.ewerle-kp-dot.ist-ziel { background: #1F7A3D; }

.ewerle-kp-liste {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 40px;
}
.ewerle-kp-karte {
	background: #fff;
	border: 1px solid rgba(26, 39, 68, .08);
	border-radius: 8px;
	padding: 9px 10px;
	box-shadow: 0 1px 2px rgba(11, 20, 36, .07);
	min-width: 0;
}
.ewerle-kp-karte strong {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	line-height: 1.25;
	color: var(--wp--preset--color--navy);
	overflow-wrap: break-word;
	hyphens: auto;
}
.ewerle-kp-karte span {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	line-height: 1.3;
	color: #5B6472;
	overflow-wrap: break-word;
	hyphens: auto;
}
.ewerle-kp-check {
	flex: 0 0 auto;
	display: inline-flex;
	width: 15px;
	height: 15px;
	color: #1F7A3D;
}
.ewerle-kp-check svg,
.ewerle-kp-badge svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ewerle-kp-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	max-width: 100%;
	font-style: normal;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.2;
	color: #A05A12;
	background: #FBEBD8;
	border-radius: 999px;
	padding: 2px 8px;
}
.ewerle-kp-badge svg {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	stroke-width: 2.2;
}

/* Live-Karte (nur per JS eingesetzt): hereingleiten, wandern, feiern ------- */
@keyframes ewerle-kp-rein {
	from { opacity: 0; transform: translateY(-14px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes ewerle-kp-raus {
	to { opacity: 0; transform: translateY(8px); }
}
@keyframes ewerle-kp-badge-rein {
	from { opacity: 0; transform: scale(.7); }
	to { opacity: 1; transform: scale(1); }
}
@keyframes ewerle-kp-feier {
	0%, 100% { box-shadow: 0 1px 2px rgba(11, 20, 36, .07); }
	35% { box-shadow: 0 0 0 5px rgba(31, 122, 61, .22); }
}
@keyframes ewerle-kp-tick {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}
.ewerle-kp-karte--live {
	border-color: rgba(232, 130, 26, .45);
	animation: ewerle-kp-rein .55s cubic-bezier(.16, .8, .3, 1) both;
	will-change: transform;
}
.ewerle-kp-karte--live.ist-unterwegs {
	position: relative;
	z-index: 3;
	transition: transform .65s cubic-bezier(.3, .7, .25, 1);
}
.ewerle-kp-karte--live .ewerle-kp-badge {
	animation: ewerle-kp-badge-rein .4s cubic-bezier(.16, .8, .3, 1) both;
}
.ewerle-kp-karte--live.ist-fertig {
	border-color: rgba(31, 122, 61, .45);
	animation: ewerle-kp-feier 1.2s ease-out 1;
}
.ewerle-kp-karte--live.ist-raus {
	animation: ewerle-kp-raus .5s ease-in both;
}
.ewerle-kp-karte--live .ewerle-kp-check {
	animation: ewerle-kp-badge-rein .45s cubic-bezier(.16, .8, .3, 1) both;
}

/* Zähler + Hinweise unter dem Board --------------------------------------- */
.ewerle-kp-zaehlerzeile {
	margin: 14px 2px 0;
	font-size: 14px;
	color: var(--wp--preset--color--navy);
}
.ewerle-kp-zaehlerzeile b {
	display: inline-block;
	min-width: 26px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: #1F7A3D;
	background: #DFF2E4;
	border-radius: 999px;
	padding: 1px 8px;
	margin-right: 4px;
}
.ewerle-kp-zaehlerzeile b.ist-tick {
	animation: ewerle-kp-tick .5s ease-out;
}
.ewerle-kp-hinweis {
	margin: 6px 2px 0;
	font-size: 12.5px;
	color: #5B6472;
	opacity: .85;
}

/* Rechte Spalte: Feature-Bullets im Ton der Pain-Point-Icons --------------- */
.ewerle-kp-text h3 {
	font-size: clamp(21px, 2.4vw, 27px);
	margin: 0 0 18px;
	color: var(--wp--preset--color--navy);
}
.ewerle-kp-punkte {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ewerle-kp-punkte li {
	display: flex;
	gap: 14px;
	margin: 0 0 18px;
}
.ewerle-kp-punkt-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(232, 130, 26, .1);
	border-radius: 12px;
}
.ewerle-kp-punkt-icon svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: #E8821A;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ewerle-kp-punkt-text {
	font-size: 15px;
	line-height: 1.55;
	color: rgba(26, 39, 68, .8);
}
.ewerle-kp-punkt-text strong {
	display: block;
	margin-bottom: 2px;
	font-size: 16.5px;
	color: var(--wp--preset--color--navy);
}
.ewerle-kp-ton {
	margin: 20px 0 0;
	padding: 12px 16px;
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(26, 39, 68, .85);
	background: rgba(232, 130, 26, .07);
	border-left: 3px solid var(--wp--preset--color--orange);
	border-radius: 0 10px 10px 0;
}

/* Echte Portal-Screenshots ------------------------------------------------- */
.ewerle-kp-echt {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 40px);
	margin-top: clamp(44px, 6vw, 72px);
}
.ewerle-kp-echt-bild {
	margin: 0;
}
.ewerle-kp-echt-bild figcaption {
	margin-top: 12px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}
/* Demo-Chat im WhatsApp-Look (Folgerunde 2, Punkt 12): stilisiert, keine
   Marken-Logos — nur Bubble-Anmutung in Grün/Weiß auf hellem Grund. */
.ewerle-kp-wa {
	background: #EFEAE2;
	padding: 12px;
	min-height: 320px;
	display: flex;
	flex-direction: column;
}
.ewerle-kp-wa-kopf {
	display: flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid rgba(26, 39, 68, .08);
	border-radius: 10px;
	padding: 7px 10px;
	margin-bottom: 10px;
}
.ewerle-kp-wa-avatar {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, #D7DCE5, #A9B2C2);
}
.ewerle-kp-wa-wer {
	min-width: 0;
	display: block;
}
.ewerle-kp-wa-wer strong {
	display: block;
	font-size: 12.5px;
	line-height: 1.25;
	color: var(--wp--preset--color--navy);
}
.ewerle-kp-wa-wer em {
	display: block;
	font-style: normal;
	font-size: 10.5px;
	color: #5B6472;
}
.ewerle-kp-wa-verlauf {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.ewerle-kp-wa-bubble {
	position: relative;
	max-width: 82%;
	font-size: 12px;
	line-height: 1.45;
	color: #1A2744;
	background: #fff;
	border-radius: 10px;
	padding: 7px 10px 15px;
	box-shadow: 0 1px 1px rgba(11, 20, 36, .1);
	align-self: flex-start;
	border-bottom-left-radius: 3px;
}
.ewerle-kp-wa-bubble.ist-aus {
	background: #DCF7D0;
	align-self: flex-end;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 3px;
}
.ewerle-kp-wa-zeit {
	position: absolute;
	right: 8px;
	bottom: 3px;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 8.5px;
	color: #5B6472;
}
.ewerle-kp-wa-zeit svg {
	width: 11px;
	height: 11px;
	fill: none;
	stroke: #2B84D6;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ewerle-kp-echt-hinweis {
	margin: 14px auto 0;
	max-width: 760px;
	text-align: center;
	font-size: 12.5px;
	color: #5B6472;
	opacity: .85;
}

/* Responsiv ---------------------------------------------------------------- */
@media (max-width: 899px) {
	.ewerle-kp {
		grid-template-columns: minmax(0, 1fr);
	}
	.ewerle-kp-text h3 { margin-top: 8px; }
}
@media (max-width: 719px) {
	.ewerle-kp-echt {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Kurztitel greift schon hier: ab ~700px wird die Spalte zu schmal
	   für „Termin vor Ort" im 11px-Kopf. */
	.ewerle-kp-kopf-lang { display: none; }
	.ewerle-kp-kopf-kurz { display: inline; }
}
@media (max-width: 600px) {
	.ewerle-kp-board {
		gap: 6px;
		padding: 8px;
		min-height: 300px;
	}
	.ewerle-kp-boardkopf { font-size: 9px; padding: 4px 7px; gap: 5px; border-radius: 6px; }
	.ewerle-kp-boardkopf::before { width: 6px; height: 6px; }
	.ewerle-kp-spalte { padding: 5px; border-radius: 8px; }
	.ewerle-kp-spalte-kopf {
		font-size: 8.5px;
		letter-spacing: .2px;
		gap: 4px;
		padding: 2px 2px 6px;
	}
	.ewerle-kp-spalte-kopf b { font-size: 8.5px; padding: 0 5px; }
	.ewerle-kp-dot { width: 6px; height: 6px; }
	.ewerle-kp-karte { padding: 6px 7px; border-radius: 6px; }
	.ewerle-kp-karte strong { font-size: 10px; gap: 3px; }
	.ewerle-kp-karte span { font-size: 8.5px; }
	.ewerle-kp-check { width: 11px; height: 11px; }
	.ewerle-kp-badge { font-size: 7.5px; padding: 2px 6px; gap: 3px; }
	.ewerle-kp-badge svg { width: 9px; height: 9px; }
}

/* Ohne Bewegung: statisch gefülltes Board, keine Live-Karte/Zähler --------- */
@media (prefers-reduced-motion: reduce) {
	.ewerle-kp-karte--live,
	.ewerle-kp-zaehlerzeile {
		display: none !important;
	}
	.ewerle-kp-karte--live.ist-unterwegs { transition: none; }
}

/* ==========================================================================
   Presse & Auftritte (/presse/) — patterns/seite-presse.php
   ========================================================================== */

/* Kopfbereich: gleiche Anmutung wie die zentrierten Sektionsköpfe, aber als
   eigene H1-Seite (Muster Impressum/Datenschutz). */
.ewerle-presse-kopf {
	text-align: center;
}
.ewerle-presse-kopf h1 {
	font-size: clamp(32px, 5.5vw, 54px);
	font-weight: 700;
	letter-spacing: -.5px;
	line-height: 1.06;
	margin: 0 0 18px;
}
.ewerle-presse-kopf p:not(.ewerle-eyebrow) {
	font-size: clamp(17px, 2.2vw, 20px);
	font-weight: 300;
	line-height: 1.55;
	color: rgba(26, 39, 68, .68);
	margin: 0 auto;
	max-width: 720px;
}

/* Liste: chronologisch, neueste zuerst — je Eintrag Medien-Kachel + Text. */
.ewerle-presse-liste {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.ewerle-presse-eintrag {
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 36px);
	align-items: center;
	background: var(--wp--preset--color--creme);
	border: 1px solid rgba(26, 39, 68, .06);
	border-radius: 16px;
	padding: clamp(16px, 2vw, 22px);
	transition: transform .35s cubic-bezier(.16, .8, .3, 1), box-shadow .35s;
}
.ewerle-presse-eintrag:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 48px -34px rgba(26, 39, 68, .55);
}

/* Medien-Kachel: immer Navy — die weißen Medien-Logos aus der Hero-Leiste
   funktionieren nur auf dunklem Grund, und Standbild wie Podcast-Cover
   sitzen darauf ebenfalls ruhig. */
.ewerle-presse-media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background:
		radial-gradient(120% 130% at 82% 8%, rgba(58, 87, 143, .55) 0%, rgba(58, 87, 143, 0) 58%),
		#16233E;
	line-height: 0;
	appearance: none;
	border: 0;
	padding: 0;
	font: inherit;
	text-align: inherit;
	text-decoration: none;
}
button.ewerle-presse-media,
a.ewerle-presse-media {
	cursor: pointer;
}
.ewerle-presse-media--video img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Podcast-Cover ist quadratisch, Logos sind Querformate: beide werden
   eingepasst statt beschnitten. */
.ewerle-presse-media--cover img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: 78%;
	max-width: 78%;
	object-fit: contain;
	border-radius: 8px;
}
.ewerle-presse-media--logo img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 58%;
	max-width: 210px;
	height: auto;
	object-fit: contain;
	opacity: .95;
}

/* Gattungs-Chip (Interview/Vortrag/Podcast …) */
.ewerle-presse-art {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: var(--wp--preset--color--orange);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.6px;
	line-height: 1;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: 999px;
}
/* Sitzt als eigene Pille unten rechts, nicht frei auf dem Standbild: Die
   YouTube-Vorschaubilder tragen selbst großflächige Textbalken, darüber war
   der Hinweis nicht lesbar. */
.ewerle-presse-hinweis {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	background: rgba(11, 20, 36, .78);
	color: rgba(255, 255, 255, .92);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .3px;
	line-height: 1.2;
	padding: 5px 9px;
	border-radius: 999px;
}

/* Play-Knopf wie bei den Erfolgsgeschichten, eine Nummer kleiner. */
.ewerle-presse-play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background:
		radial-gradient(120% 130% at 10% 0%, #E8921F 0%, rgba(232, 146, 31, 0) 55%),
		radial-gradient(130% 130% at 100% 100%, #8F4405 0%, rgba(143, 68, 5, 0) 55%),
		#B85F09;
	box-shadow: 0 12px 26px -8px rgba(232, 130, 26, .8);
	transition: transform .3s cubic-bezier(.16, .8, .3, 1);
}
.ewerle-presse-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-left: 3px;
	border-left: 17px solid #fff;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
}
.ewerle-presse-media:hover .ewerle-presse-play {
	transform: translate(-50%, -50%) scale(1.07);
}
/* Nach dem Klick liegt das iframe (z-index 4) über Poster, Chip und Knopf. */
.ewerle-presse-media.is-spielend .ewerle-presse-play,
.ewerle-presse-media.is-spielend .ewerle-presse-hinweis {
	display: none;
}

/* Textspalte */
.ewerle-presse-inhalt {
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
}
.ewerle-presse-quelle {
	margin: 0;
	color: var(--wp--preset--color--orange);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.35;
	text-transform: uppercase;
}
.ewerle-presse-titel {
	margin: 0;
	font-size: clamp(20px, 2.6vw, 27px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.3px;
	color: var(--wp--preset--color--navy-hell);
}
.ewerle-presse-meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 500;
	color: rgba(26, 39, 68, .6);
}
.ewerle-presse-text {
	margin: 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.55;
	color: rgba(26, 39, 68, .78);
}
.ewerle-presse-link {
	align-self: flex-start;
	margin-top: 4px;
	color: var(--wp--preset--color--navy-hell);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .2px;
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--orange);
	padding-bottom: 2px;
	transition: color .25s;
}
.ewerle-presse-link:hover,
.ewerle-presse-link:focus {
	color: var(--wp--preset--color--orange);
}

/* Abschluss-CTA (ein CTA je Seite, wie überall) */
.ewerle-presse-cta h2 {
	font-size: clamp(27px, 4.2vw, 42px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.5px;
	margin: 0 0 14px;
}

@media (max-width: 860px) {
	.ewerle-presse-eintrag {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
	.ewerle-presse-media--logo img {
		width: 46%;
	}
}

/* Nur-für-Screenreader (bislang im Theme nicht definiert, wird auch vom
   Einwilligungs-Banner genutzt). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Presse-Logo-Leiste der Hero-Sektionen führt auf /presse/ — Optik im
   Ruhezustand unverändert (Klasse .ewerle-logo-row liefert weiter das
   Layout), es kommt nur Cursor, Fokusring und ein leichter Hover dazu. */
.ewerle-hero-media .ewerle-logo-row--presse {
	text-decoration: none;
	border-radius: 10px;
	transition: opacity .25s;
}
.ewerle-hero-media .ewerle-logo-row--presse:hover img,
.ewerle-hero-media .ewerle-logo-row--presse:focus-visible img {
	opacity: 1;
}
.ewerle-hero-media .ewerle-logo-row--presse:focus-visible {
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 8px;
}

/* Ratgeber- und Regionalseiten (Welle 1) ---------------------------------
   Fließtext-Layout für lange Beiträge. Zwei Breiten in einer Spalte: der
   Lesetext steht auf Zeilenlänge (~70 Zeichen, --ewerle-mass), Tabellen,
   Kästen und Karten nutzen die volle Sektionsbreite von 900 px. Tabellen
   scrollen in ihrem eigenen Rahmen — die Seite selbst bleibt schmal genug
   für 390 px. */
.ewerle-artikel {
	/* Zeilenlaenge als feste Breite, nicht in ch: „ch" loest sich je
	   Schriftgroesse anders auf, dann stuenden Ueberschriften und Absaetze
	   nicht mehr in derselben Spalte. 525px sind bei 18px Roboto Condensed
	   rund 70 Zeichen. */
	--ewerle-mass: 525px;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.75;
	color: rgba(26, 39, 68, .88);
}
.ewerle-artikel > * {
	max-width: var(--ewerle-mass);
	margin-inline: auto;
}
.ewerle-artikel > .ewerle-artikel-toc,
.ewerle-artikel > .ewerle-artikel-tabelle,
.ewerle-artikel > .ewerle-artikel-kasten,
.ewerle-artikel > .ewerle-artikel-rechnung,
.ewerle-artikel > .ewerle-artikel-quellen,
.ewerle-artikel > .ewerle-artikel-autorenbox,
.ewerle-artikel > .ewerle-faq {
	max-width: none;
}
.ewerle-artikel p {
	margin-block: 0 20px;
}
.ewerle-artikel h2 {
	font-size: clamp(24px, 3.2vw, 31px);
	font-weight: 700;
	line-height: 1.2;
	color: #1A2744;
	margin-block: 46px 16px;
}
.ewerle-artikel h3 {
	font-size: clamp(19px, 2.4vw, 22px);
	font-weight: 700;
	line-height: 1.3;
	color: #1A2744;
	margin-block: 32px 10px;
}
/* Fixierter Header: Sprungziele des Inhaltsverzeichnisses dürfen nicht
   darunter verschwinden. */
.ewerle-artikel [id] {
	scroll-margin-top: 108px;
}
.ewerle-artikel a {
	color: var(--wp--preset--color--orange-dunkel);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	word-break: break-word;
}
.ewerle-artikel a:hover,
.ewerle-artikel a:focus-visible {
	color: var(--wp--preset--color--navy-hell);
}
.ewerle-artikel strong {
	font-weight: 700;
	color: #1A2744;
}
.ewerle-artikel ul,
.ewerle-artikel ol {
	margin-block: 0 22px;
	padding-left: 22px;
}
.ewerle-artikel li {
	margin-bottom: 10px;
}
.ewerle-artikel-lead {
	font-size: clamp(19px, 2.4vw, 21px);
	line-height: 1.6;
	color: #1A2744;
}
.ewerle-artikel-lead strong {
	font-weight: 500;
}
.ewerle-artikel-fussnote,
.ewerle-artikel-tabellenquelle,
.ewerle-artikel-datenstand {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(26, 39, 68, .62);
}
.ewerle-artikel-datenstand {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 13px;
	margin-bottom: 8px;
}
.ewerle-artikel-frageblock {
	border-left: 3px solid var(--wp--preset--color--orange);
	padding-left: 18px;
	font-size: 19px;
}

/* Artikelkopf (Creme) ---------------------------------------------------- */
.ewerle-artikel-kopf {
	padding-bottom: clamp(32px, 4vw, 46px) !important;
}
.ewerle-artikel-buehne {
	padding-top: clamp(32px, 4vw, 50px) !important;
}
.ewerle-artikel-brotkrume {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(26, 39, 68, .6);
	margin-bottom: 16px;
}
.ewerle-artikel-brotkrume a {
	color: rgba(26, 39, 68, .7);
	text-decoration: none;
}
.ewerle-artikel-brotkrume a:hover,
.ewerle-artikel-brotkrume a:focus-visible {
	color: var(--wp--preset--color--orange-dunkel);
	text-decoration: underline;
}
.ewerle-artikel-brotkrume span[aria-hidden] {
	opacity: .45;
}
.ewerle-artikel-kopf h1 {
	font-size: clamp(30px, 5vw, 46px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--navy-hell);
	margin: 0 0 18px;
}
.ewerle-artikel-teaser {
	font-size: clamp(17px, 2.2vw, 19px);
	font-weight: 300;
	line-height: 1.65;
	color: rgba(26, 39, 68, .82);
	max-width: 62ch;
	margin: 0 0 28px;
}
.ewerle-artikel-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 26px;
	padding-top: 22px;
	border-top: 1px solid rgba(26, 39, 68, .12);
}
.ewerle-artikel-autor {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ewerle-artikel-autor img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 16%;
	flex: none;
}
.ewerle-artikel-autor-text {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}
.ewerle-artikel-autor-text strong {
	font-size: 16px;
	font-weight: 700;
	color: #1A2744;
}
.ewerle-artikel-autor-text span {
	font-size: 14px;
	font-weight: 300;
	color: rgba(26, 39, 68, .7);
}
.ewerle-artikel-daten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	color: rgba(26, 39, 68, .7);
}
.ewerle-artikel-daten span[aria-hidden] {
	opacity: .45;
}

/* Inhaltsverzeichnis ----------------------------------------------------- */
.ewerle-artikel-toc {
	background: var(--wp--preset--color--creme);
	border: 1px solid rgba(26, 39, 68, .08);
	border-radius: 14px;
	padding: 18px clamp(18px, 2.4vw, 26px);
	margin-block: 0 38px;
}
.ewerle-artikel-toc > summary {
	cursor: pointer;
	list-style: none;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #1A2744;
	position: relative;
	padding-right: 30px;
}
.ewerle-artikel-toc > summary::-webkit-details-marker {
	display: none;
}
.ewerle-artikel-toc > summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--orange-dunkel);
}
.ewerle-artikel-toc[open] > summary::after {
	content: "–";
}
.ewerle-artikel-toc-inhalt {
	padding-top: 14px;
}
.ewerle-artikel-toc-inhalt ol {
	margin: 0;
	padding-left: 20px;
	columns: 2;
	column-gap: 32px;
}
.ewerle-artikel-toc-inhalt li {
	margin-bottom: 8px;
	break-inside: avoid;
	font-size: 16px;
}
.ewerle-artikel-toc-inhalt a {
	color: rgba(26, 39, 68, .85);
	text-decoration: none;
}
.ewerle-artikel-toc-inhalt a:hover,
.ewerle-artikel-toc-inhalt a:focus-visible {
	color: var(--wp--preset--color--orange-dunkel);
	text-decoration: underline;
}
@media (max-width: 720px) {
	.ewerle-artikel-toc-inhalt ol {
		columns: 1;
	}
}

/* Tabellen — echtes <table>, eigener Scrollrahmen ------------------------ */
.ewerle-artikel-tabelle {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid rgba(26, 39, 68, .12);
	border-radius: 12px;
	margin: 0 0 12px;
}
.ewerle-artikel-tabelle table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 15.5px;
	line-height: 1.55;
}
.ewerle-artikel-tabelle--breit table {
	min-width: 900px;
}
.ewerle-artikel-tabelle th,
.ewerle-artikel-tabelle td {
	text-align: left;
	vertical-align: top;
	padding: 12px 16px;
	border-bottom: 1px solid rgba(26, 39, 68, .09);
}
.ewerle-artikel-tabelle thead th {
	background: var(--wp--preset--color--creme);
	font-weight: 700;
	color: #1A2744;
	white-space: nowrap;
}
.ewerle-artikel-tabelle tbody tr:last-child td {
	border-bottom: 0;
}
.ewerle-artikel-tabelle tbody tr:hover td {
	background: rgba(244, 241, 235, .55);
}
.ewerle-artikel-tabellenquelle {
	margin-top: 0;
}

/* Methoden- und Rechenkästen -------------------------------------------- */
.ewerle-artikel-kasten,
.ewerle-artikel-rechnung {
	background: var(--wp--preset--color--creme);
	border-radius: 16px;
	padding: clamp(22px, 3.2vw, 38px);
	margin: 40px 0;
}
.ewerle-artikel-rechnung {
	background: #fff;
	border: 1px solid rgba(26, 39, 68, .14);
	border-left: 4px solid var(--wp--preset--color--orange);
}
.ewerle-artikel-kasten > *,
.ewerle-artikel-rechnung > * {
	max-width: var(--ewerle-mass);
	margin-inline: auto;
}
.ewerle-artikel-kasten > .ewerle-artikel-tabelle,
.ewerle-artikel-rechnung > .ewerle-artikel-tabelle {
	max-width: none;
}
.ewerle-artikel-kasten > h2:first-child,
.ewerle-artikel-rechnung > h2:first-child {
	margin-top: 0;
}
.ewerle-artikel-kasten > *:last-child,
.ewerle-artikel-rechnung > *:last-child {
	margin-bottom: 0;
}
.ewerle-artikel-schritt {
	padding: 12px 0;
	border-bottom: 1px dashed rgba(26, 39, 68, .16);
	margin-bottom: 0;
}
.ewerle-artikel-schritt:last-of-type {
	border-bottom: 0;
	margin-bottom: 18px;
}

/* Zitat-/Beispielkasten -------------------------------------------------- */
.ewerle-artikel-zitat {
	border-left: 4px solid var(--wp--preset--color--orange);
	background: rgba(244, 241, 235, .7);
	border-radius: 0 12px 12px 0;
	padding: 20px clamp(18px, 2.4vw, 26px);
	margin: 0 auto 24px;
}
.ewerle-artikel-zitat > *:last-child {
	margin-bottom: 0;
}
.ewerle-artikel-zitat-quelle {
	font-size: 14.5px;
	font-style: italic;
	color: rgba(26, 39, 68, .62);
}

/* Quellenverzeichnis ----------------------------------------------------- */
.ewerle-artikel-quellen {
	background: var(--wp--preset--color--creme);
	border-radius: 16px;
	padding: clamp(22px, 3.2vw, 38px);
	margin: 44px 0 0;
	font-size: 16px;
}
.ewerle-artikel-quellen > * {
	max-width: var(--ewerle-mass);
	margin-inline: auto;
}
.ewerle-artikel-quellen h2 {
	margin-block-start: 0;
	font-size: clamp(21px, 2.6vw, 25px);
}
.ewerle-artikel-quellen li {
	margin-bottom: 12px;
	line-height: 1.6;
}
.ewerle-artikel-quellen > *:last-child {
	margin-bottom: 0;
}

/* Autorenbox ------------------------------------------------------------- */
.ewerle-artikel-autorenbox {
	display: flex;
	gap: clamp(18px, 3vw, 30px);
	align-items: flex-start;
	background: #fff;
	border: 1px solid rgba(26, 39, 68, .14);
	border-radius: 16px;
	padding: clamp(22px, 3.2vw, 34px);
	margin: 40px 0 0;
	font-size: 16px;
}
.ewerle-artikel-autorenbox img {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 14%;
	flex: none;
}
.ewerle-artikel-autorenbox h2 {
	font-size: 22px;
	margin: 0 0 10px;
}
.ewerle-artikel-autorenbox p {
	margin-bottom: 12px;
	line-height: 1.65;
}
.ewerle-artikel-autorenbox p:last-child {
	margin-bottom: 0;
}
.ewerle-artikel-autorenbox-label {
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange-dunkel);
	margin-bottom: 4px !important;
}
@media (max-width: 620px) {
	.ewerle-artikel-autorenbox {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* Abschluss-CTA (bewusst schlanker als die Erstgespräch-Sektionen) ------- */
.ewerle-artikel-cta {
	text-align: center;
	color: #fff;
}
.ewerle-artikel-cta h2 {
	font-size: clamp(24px, 3.4vw, 34px);
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
	margin: 0 0 16px;
}
.ewerle-artikel-cta p {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.7;
	color: #fff;
	opacity: .88;
	margin: 0 auto 28px;
	max-width: 62ch;
}
.ewerle-artikel-cta a {
	color: var(--wp--preset--color--orange-hell);
}
.ewerle-artikel-cta {
	margin-bottom: 28px;
}
.ewerle-artikel-nap {
	text-align: center;
	color: #fff;
	font-size: 14.5px;
	font-weight: 300;
	line-height: 1.7;
	opacity: .7;
	margin: 26px auto 0;
}

/* Übersichtsseite /ratgeber/ --------------------------------------------- */
.ewerle-artikel-karten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 22px;
}
.ewerle-artikel-karte {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(26, 39, 68, .14);
	border-radius: 16px;
	padding: clamp(22px, 2.8vw, 30px);
	transition: transform .35s cubic-bezier(.16, .8, .3, 1), box-shadow .35s;
}
.ewerle-artikel-karte:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 40px -26px rgba(26, 39, 68, .55);
}
.ewerle-artikel-karte-label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange-dunkel);
	margin: 0 0 10px;
}
.ewerle-artikel-karte h2 {
	font-size: clamp(20px, 2.4vw, 24px);
	font-weight: 700;
	line-height: 1.25;
	color: #1A2744;
	margin: 0 0 12px;
}
.ewerle-artikel-karte h2 a {
	color: inherit;
	text-decoration: none;
}
.ewerle-artikel-karte h2 a:hover,
.ewerle-artikel-karte h2 a:focus-visible {
	color: var(--wp--preset--color--orange-dunkel);
}
.ewerle-artikel-karte-teaser {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.65;
	color: rgba(26, 39, 68, .82);
	margin: 0 0 16px;
}
.ewerle-artikel-karte-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14px;
	color: rgba(26, 39, 68, .6);
	margin: 0 0 16px;
}
.ewerle-artikel-karte-meta span[aria-hidden] {
	opacity: .5;
}
.ewerle-artikel-karte-mehr {
	margin: auto 0 0;
	font-size: 16px;
	font-weight: 700;
}
.ewerle-artikel-karte-mehr a {
	color: var(--wp--preset--color--orange-dunkel);
	text-decoration: none;
}
.ewerle-artikel-karte-mehr a:hover,
.ewerle-artikel-karte-mehr a:focus-visible {
	text-decoration: underline;
}
.ewerle-artikel-hinweis {
	max-width: 62ch;
	margin: 34px auto 0;
	font-size: 15.5px;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(26, 39, 68, .68);
	text-align: center;
}
.ewerle-artikel-hinweis a {
	color: var(--wp--preset--color--orange-dunkel);
}

/* Kontextverweise auf die Ratgeber in den Pain-Point-Kästen der
   Leistungsseiten (dunkler Untergrund). */
.ewerle-painbox a {
	color: var(--wp--preset--color--orange-hell);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ewerle-painbox a:hover,
.ewerle-painbox a:focus-visible {
	color: #fff;
}
/* Dieselben Kontextverweise in den Sektionsköpfen (heller und dunkler
   Untergrund unterscheiden sich nur in der Linkfarbe). */
.ewerle-section-head p a {
	color: var(--wp--preset--color--orange-dunkel);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ewerle-section-head p.has-weiss-color a {
	color: var(--wp--preset--color--orange-hell);
}
.ewerle-section-head p a:hover,
.ewerle-section-head p a:focus-visible {
	color: var(--wp--preset--color--orange);
}