/* MARCH PUMPEN – Über uns
   Idee: Gebäude und belegbare Eckdaten im Kopf, danach das Prinzip der Magnetkupplung als Schnittgrafik (die eine auffällige Stelle der Seite). */

.about-head__title,
.about-principle h2,
.about-site h2,
.about-range h2,
.about-strengths h2,
.about-facts dt,
.about-range__name,
.about-strengths h3,
.about-vision__quote {
	font-family: var(--font-display);
	font-weight: 700;
	text-wrap: balance;
}

/* ------------------------------------------------------------------
   Kopf
   ------------------------------------------------------------------ */
.about-head {
	background:
		radial-gradient(60rem 22rem at 8% 0%, rgba(71, 208, 255, .1), transparent 70%),
		linear-gradient(180deg, var(--color-bg-alt), var(--color-bg));
	padding-top: clamp(2.5rem, 6vw, 5rem);
}
.about-head__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: end;
	gap: 1.5rem clamp(2rem, 6vw, 6rem);
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.about-head__title {
	margin: 0;
	font-size: clamp(2.4rem, 7vw, 6rem);
	line-height: .92;
	letter-spacing: -.025em;
	overflow-wrap: break-word;
}
.about-head__lead {
	margin: 0;
	color: var(--color-text-muted);
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	line-height: 1.55;
}
.about-head__figure {
	margin: 0;
	border: 1px solid var(--color-line);
	border-radius: .375rem;
	overflow: hidden;
	aspect-ratio: 16 / 5;
}
.about-head__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }

.about-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 0;
}
.about-facts__item {
	padding: 1.5rem 1.5rem 2.25rem 0;
}
.about-facts__item + .about-facts__item {
	padding-left: 1.5rem;
	border-left: 1px solid var(--color-line);
}
.about-facts dt {
	margin: 0 0 .5rem;
	font-size: 1.4rem;
	line-height: 1.15;
	color: var(--color-text);
}
.about-facts dd {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 1rem;
	line-height: 1.5;
}
@media (width < 64rem) {
	.about-head__inner { grid-template-columns: 1fr; }
	.about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.about-facts__item:nth-child(odd) { padding-left: 0; border-left: 0; }
	.about-facts__item:nth-child(n + 3) { border-top: 1px solid var(--color-line); }
}
@media (width < 36rem) {
	.about-head__figure { aspect-ratio: 16 / 9; }
	.about-facts { grid-template-columns: 1fr; }
	.about-facts__item,
	.about-facts__item + .about-facts__item { padding: 1.25rem 0; border-left: 0; }
	.about-facts__item + .about-facts__item { border-top: 1px solid var(--color-line); }
}

/* ------------------------------------------------------------------
   Prinzip: Text links, Schnittgrafik rechts
   ------------------------------------------------------------------ */
.about-principle,
.about-site,
.about-range,
.about-strengths {
	padding-block: clamp(3rem, 7vw, 6rem);
}
.about-principle { background: var(--color-bg-alt); border-block: 1px solid var(--color-line); }
.about-principle__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}
.about-principle h2,
.about-site h2,
.about-range h2,
.about-strengths h2 {
	margin: 0 0 1.25rem;
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	line-height: 1.02;
	letter-spacing: -.015em;
}
.about-prose { color: var(--color-text-muted); }
.about-prose p { margin: 0 0 1.1em; max-width: 38rem; }
.about-prose p:first-child { color: var(--color-text); font-size: 1.2rem; }

.about-diagram { margin: 0; }
.about-diagram svg { width: 100%; height: auto; overflow: visible; }
.about-diagram .d-medium { fill: rgba(71, 208, 255, .12); stroke: none; }
.about-diagram .d-solid { fill: #12263b; stroke: var(--color-line); stroke-width: 2; }
.about-diagram .d-fin { stroke: rgba(255, 255, 255, .18); stroke-width: 2; fill: none; }
.about-diagram .d-magnet { fill: var(--color-blue-deep); stroke: var(--color-blue); stroke-width: 2; }
.about-diagram .d-magnet--in { fill: var(--color-blue); stroke: var(--color-cyan); }
.about-diagram .d-wall { fill: none; stroke: var(--color-cyan); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.about-diagram .d-shaft { stroke: var(--color-text-muted); stroke-width: 6; stroke-linecap: round; fill: none; }
.about-diagram .d-impeller circle { fill: rgba(5, 15, 26, .55); stroke: var(--color-text-muted); stroke-width: 3; }
.about-diagram .d-impeller path { stroke: var(--color-text-muted); stroke-width: 6; stroke-linecap: round; fill: none; }
.about-diagram .d-field path {
	stroke: var(--color-cyan);
	stroke-width: 3;
	stroke-dasharray: 5 5;
	stroke-linecap: round;
	fill: none;
}
.about-diagram .d-marker circle { fill: var(--color-bg); stroke: var(--color-cyan); stroke-width: 2; }
.about-diagram .d-marker text {
	fill: var(--color-text);
	font: 700 15px/1 var(--font-base);
}
/* Einstieg (nur mit JS, Bewegung reduzieren schaltet die Dauer global ab): Magnetfeld erscheint beim Einblenden. */
.js .about-diagram:not(.is-in) .d-field path { stroke-dasharray: 20; stroke-dashoffset: 20; }
.js .about-diagram .d-field path { transition: stroke-dashoffset 1.1s var(--ease) .3s; }
.js .about-diagram.is-in .d-field path { stroke-dashoffset: 0; }

.about-steps {
	list-style: none;
	counter-reset: step;
	margin: 1.75rem 0 0;
	padding: 0;
	display: grid;
	gap: .75rem;
}
.about-steps li {
	counter-increment: step;
	position: relative;
	padding-left: 2.5rem;
	color: var(--color-text-muted);
	font-size: 1rem;
	line-height: 1.5;
}
.about-steps li::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: .05rem;
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	border: 2px solid var(--color-cyan);
	border-radius: 50%;
	font-size: .85rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-text);
}
.about-steps strong { color: var(--color-text); font-weight: 600; }
.about-diagram__note { margin: 1.25rem 0 0; color: var(--color-text-muted); font-size: .95rem; }
@media (width < 64rem) {
	.about-principle__inner { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Standort
   ------------------------------------------------------------------ */
.about-site__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: center;
}
.about-site__figure {
	margin: 0;
	border: 1px solid var(--color-line);
	border-radius: .375rem;
	overflow: hidden;
}
.about-site__figure img { width: 100%; }
.about-site__text p { margin: 0 0 1.1em; max-width: 36rem; color: var(--color-text-muted); }
.about-address {
	margin-top: 1.75rem;
	padding-left: 1.25rem;
	border-left: 3px solid var(--color-cyan);
	font-style: normal;
	line-height: 1.6;
}
.about-address a { text-decoration-color: var(--color-cyan); text-underline-offset: .2em; }
@media (width < 64rem) {
	.about-site__inner { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Lieferprogramm: ganze Zeilen sind Links
   ------------------------------------------------------------------ */
.about-range { padding-top: 0; }
.about-range__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line); }
.about-range__list li { border-bottom: 1px solid var(--color-line); }
.about-range__link {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1.2fr) minmax(0, 1.4fr) 1.5rem;
	align-items: center;
	gap: 1.5rem;
	padding: 1.5rem .5rem;
	text-decoration: none;
	transition: background-color .25s var(--ease), padding-left .25s var(--ease);
}
.about-range__link:hover,
.about-range__link:focus-visible { background: rgba(71, 208, 255, .06); padding-left: 1.25rem; }
.about-range__icon,
.about-range__arrow { color: var(--color-cyan); }
.about-range__icon svg { width: 2rem; height: 2rem; }
.about-range__arrow svg { width: 1.4rem; height: 1.4rem; }
.about-range__name { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.15; }
.about-range__desc { color: var(--color-text-muted); font-size: 1rem; }
@media (width < 48rem) {
	.about-range__link { grid-template-columns: 2rem minmax(0, 1fr) 1.25rem; gap: .25rem 1rem; }
	.about-range__desc { grid-column: 2; grid-row: 2; }
	.about-range__arrow { grid-column: 3; grid-row: 1 / span 2; }
}

/* ------------------------------------------------------------------
   Stärken
   ------------------------------------------------------------------ */
.about-strengths { background: var(--color-bg-alt); border-top: 1px solid var(--color-line); }
.about-strengths__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}
.about-strengths h2 { margin-bottom: 0; }
.about-strengths__list { list-style: none; margin: 0; padding: 0; }
.about-strengths__list li {
	display: grid;
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
	gap: .5rem 2rem;
	padding: 1.25rem 0;
	border-top: 1px solid var(--color-line);
}
.about-strengths__list li:last-child { border-bottom: 1px solid var(--color-line); }
.about-strengths h3 { margin: 0; font-size: 1.4rem; line-height: 1.2; color: var(--color-cyan); }
.about-strengths p { margin: 0; color: var(--color-text-muted); }
@media (width < 64rem) {
	.about-strengths__inner { grid-template-columns: 1fr; }
}
@media (width < 36rem) {
	.about-strengths__list li { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Leitbild
   ------------------------------------------------------------------ */
.about-vision {
	padding-block: clamp(4rem, 10vw, 8rem);
	background:
		radial-gradient(50rem 24rem at 85% 100%, rgba(11, 143, 223, .22), transparent 70%),
		var(--color-bg);
	border-top: 1px solid var(--color-line);
}
.about-vision__quote { margin: 0; }
.about-vision__quote p {
	margin: 0;
	max-width: 56rem;
	font-size: clamp(2rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -.02em;
}