/* ==========================================================================
   Sektion 8 · Über uns (acf/mk-team)
   Grundlage Design #13b/#13m. Grund Schwarz: bricht die Folge Sand/Weiß bewusst (Brech-Effekt).
   Auf Dunkel laut Farbregel Gold hell (#D6A742) für Text, Linien und Icons, Text hell.
   Kopf zentriert wie Sektion 6/7. Darunter Person / Goldlinie / Argumente / Goldlinie / Person.
   Reservierte Zeilen ab 1280 px: Eyebrow 1, H2 2, Einleitung 4, Name 1, Rolle 1, Zitat 6.
   Maße in em auf Basis --mk-fs-body, kein zoom.
   ========================================================================== */

.mk-section.mk-team {
	--mk-team-x: max(var(--mk-gutter), 6.25vw);                       /* 90 px bei 1440 */
	--mk-team-gold-line: rgba(214, 167, 66, 0.4);
	padding: 0;                                     /* doppelte Klasse: sonst gewinnt .mk-section */
	font-size: var(--mk-fs-body);
	font-weight: 400;
	background: var(--mk-black);
	color: var(--mk-text-dark);
	-webkit-font-smoothing: antialiased;           /* laut Design auf Schwarz */
}

.mk-team__inner {
	max-width: calc(70em + 2 * var(--mk-team-x));   /* Inhalt 1260 px bei 1440 */
	margin-inline: auto;
	padding: 4em var(--mk-team-x) 3.56em;           /* 72 / 64 px */
}

/* ---------- Kopf (wie Sektion 6/7) ---------- */
.mk-team__kopf { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mk-team__eyebrow {
	margin: 0 0 1.333em; min-height: 1.3em;
	font-size: 0.667em; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
	line-height: 1.3; color: var(--mk-gold);
}
.mk-team__rule { display: block; width: 4.89em; height: 2px; margin-bottom: 1.22em; background: var(--mk-gold); }
.mk-team__rule--thin { width: 6.67em; height: 1px; margin: 1.22em 0; background: rgba(214, 167, 66, 0.75); }
.mk-team .mk-team__h2 {
	max-width: calc(var(--mk-fs-h2) * 18.2);        /* 800 px bei 1440 */
	margin: 0; min-height: 2.08em; color: var(--mk-white);
	text-wrap: balance;
}
.mk-team__gold { color: var(--mk-gold-head); font-weight: 900; }
.mk-team__intro {
	max-width: 37.78em; min-height: 6.6em;          /* 680 px, 4 Zeilen reserviert */
	margin: 0; font-size: 1em; line-height: 1.65; color: var(--mk-text-dark);
}
.mk-team__intro strong { font-weight: 700; color: var(--mk-gold); }

/* ---------- Raster: Person / Linie / Argumente / Linie / Person ---------- */
.mk-team__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1px 11.67em 1px minmax(0, 1fr);   /* Mitte 210 px */
	grid-template-areas: "p1 l1 args l2 p2";
	column-gap: 2.44em;                             /* 44 px */
	align-items: stretch;
	margin-top: 3.56em;                             /* 64 px (Design 44 + 20) */
	padding-inline: 1.11em;                         /* 20 px: Design 110 statt 90 px Rand */
}
.mk-team__person--1 { grid-area: p1; }
.mk-team__person--2 { grid-area: p2; }
.mk-team__linie--1  { grid-area: l1; }
.mk-team__linie--2  { grid-area: l2; }
.mk-team__args      { grid-area: args; }
.mk-team__linie { display: block; background: var(--mk-team-gold-line); }

/* ---------- Person ---------- */
.mk-team__person { min-width: 0; display: flex; flex-direction: column; }
.mk-team__kopfzeile { display: flex; align-items: center; gap: 1em; }   /* 18 px */

.mk-team__foto {
	position: relative; flex: 0 0 auto;
	width: 4.67em; height: 4.67em;                  /* 84 px */
	border: 2px solid var(--mk-gold); border-radius: 50%; overflow: hidden;
	background: var(--mk-ink);
	box-shadow: 0 8px 20px -10px rgba(20, 20, 19, 0.4);
	transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
}
.mk-team__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-team__initialen {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	font-family: var(--mk-font-head); font-size: 1.44em; font-weight: 900; letter-spacing: 0.02em;
	color: var(--mk-gold);
}
@media (hover: hover) {
	.mk-team__foto:hover {
		transform: scale(1.06);
		border-color: var(--mk-gold-light);
		box-shadow: 0 0 0 5px rgba(214, 167, 66, 0.18), 0 14px 30px -10px rgba(0, 0, 0, 0.6);
	}
}

.mk-team__namebox { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.33em; }
.mk-team .mk-team__name {
	margin: 0;
	font-family: var(--mk-font-head); font-size: 1.5em; font-weight: 400;   /* 27 px */
	line-height: 1.15; letter-spacing: -0.015em; color: var(--mk-white);
}
.mk-team__nachname { font-weight: 900; letter-spacing: 0.01em; text-transform: uppercase; }
.mk-team__rolle {
	margin: 0;
	font-size: 0.667em; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;   /* 12 px */
	line-height: 1.3; color: var(--mk-gold);
}

/* Zitat: füllt die Spalte (flex: 1), damit Telefon und E-Mail beider Personen bündig abschließen */
.mk-team__zitat {
	position: relative; flex: 1;
	margin: 1.556em 0 0; padding: 0 1.44em;         /* 28 / 26 px */
}
.mk-team__zitat p {
	margin: 0;
	font-size: 0.917em; line-height: 1.7; font-style: italic; color: var(--mk-text-dark-2);   /* Design #E4E1DA */   /* 16,5 px */
}
.mk-team__zitat strong { font-weight: 700; color: var(--mk-gold); }
.mk-team__qm {
	position: absolute;
	font-family: var(--mk-font-head); font-size: 2.11em; font-weight: 900; line-height: 1;   /* 38 px */
	color: var(--mk-gold);
	opacity: 0.55;
	animation: mkBreathe 7s ease-in-out infinite;
}
.mk-team__qm--auf { left: 0; top: -0.16em; }
.mk-team__qm--zu  { right: 0; bottom: -0.37em; animation-delay: 1.4s; }

.mk-team__trenner { display: block; height: 1px; margin: 1.89em 0 1.22em; background: var(--mk-team-gold-line); }   /* 34 / 22 px */

.mk-team__kontakt { display: flex; flex-direction: column; gap: 0.78em; margin: 0; padding: 0; list-style: none; }   /* 14 px */
.mk-team__link {
	display: inline-flex; align-items: center; gap: 0.67em;                  /* 12 px */
	font-size: 0.861em; color: var(--mk-white); text-decoration: none;        /* 15,5 px */
	transition: color 160ms ease;
}
.mk-team__kreis {
	width: 2.2em; height: 2.2em; flex: 0 0 auto;                              /* 34 px */
	display: flex; align-items: center; justify-content: center;
	border: 1px solid rgba(214, 167, 66, 0.75); border-radius: 50%;
	color: var(--mk-gold);
}
.mk-team__kreis .mk-icon { width: 0.97em; height: 0.97em; }                  /* 15 px */
.mk-team__linktext {
	padding-bottom: 3px;
	background: linear-gradient(var(--mk-gold), var(--mk-gold)) no-repeat 0 100% / 0% 1px;
	box-shadow: inset 0 -1px 0 rgba(214, 167, 66, 0.45);
	transition: background-size 420ms ease;
	overflow-wrap: anywhere;
}
.mk-team__link:focus-visible { color: var(--mk-gold); }
.mk-team__link:focus-visible .mk-team__linktext { background-size: 100% 1px; }
@media (hover: hover) {
	.mk-team__link:hover { color: var(--mk-gold); }
	.mk-team__link:hover .mk-team__linktext { background-size: 100% 1px; }
}

/* ---------- Argumente (Mitte) ---------- */
.mk-team__args {
	display: flex; flex-direction: column; justify-content: center;
	margin: 0; padding: 0; list-style: none;
}
.mk-team__arg {
	display: flex; flex-direction: column; align-items: center; gap: 0.67em;   /* 12 px */
	padding: 1.67em 0;                                                        /* 30 px */
	text-align: center;
}
.mk-team__arg + .mk-team__arg { border-top: 1px solid rgba(214, 167, 66, 0.35); }
.mk-team__arg:first-child { padding-top: 0; }
.mk-team__arg:last-child  { padding-bottom: 0; }
.mk-team__argicon { width: 1.56em; height: 1.56em; color: var(--mk-gold); overflow: visible; }   /* 28 px */
.mk-team__argicon--person { transform-origin: 50% 50%; animation: mkPulse 3.4s ease-in-out infinite; }
.mk-team__argicon--hoerer { transform-origin: 50% 50%; animation: mkRing 3s ease-in-out infinite; }
.mk-team__argicon--uhr-lauf .mk-icon__zeiger { transform-origin: 10px 10px; animation: mkSpin 6s linear infinite; }
.mk-team__arglabel {
	font-size: 0.639em; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;   /* 11,5 px */
	line-height: 1.5; color: var(--mk-text-dark);
}

/* ---------- Feste Bühne ab 1280 px ---------- */
@media (min-width: 1280px) {
	.mk-team .mk-team__name { white-space: nowrap; }
	.mk-team__zitat { min-height: 9.35em; }            /* 6 Zeilen Zitat (16,5 × 1,7 × 6 = 168 px) */
}

/* 1280–1439 px: Mitte schmaler, Rand wie der Kopf, damit das Zitat gleich breit bleibt wie bei 1440 */
@media (min-width: 1280px) and (max-width: 1439px) {
	.mk-team__raster { grid-template-columns: minmax(0, 1fr) 1px 9.5em 1px minmax(0, 1fr); column-gap: 1.78em; padding-inline: 0; }
	.mk-team__zitat { padding-inline: 1.22em; }
}

/* ---------- Zwischengröße 901–1279 px: Argumente als Reihe oben, Personen nebeneinander ---------- */
@media (min-width: 901px) and (max-width: 1279px) {
	.mk-team__raster {
		grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
		grid-template-areas: "args args args" "l2 l2 l2" "p1 l1 p2";
		column-gap: 2.22em; row-gap: 2.22em;
		padding-inline: 0;
	}
	.mk-team__linie--2 { height: 1px; }
	.mk-team__args { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mk-team__arg, .mk-team__arg:first-child, .mk-team__arg:last-child { padding: 0 0.5em; }
	.mk-team__arg + .mk-team__arg { border-top: 0; border-left: 1px solid rgba(214, 167, 66, 0.35); }
	.mk-team__zitat { padding-inline: 1.22em; }
	.mk-team .mk-team__name { font-size: 1.17em; }   /* 21 px: Name passt bis 901 px in eine Zeile */
}

/* ---------- Mobil (Design #13m): Argumente oben, Trenner, Person 1, Trenner, Person 2 ---------- */
@media (max-width: 900px) {
	.mk-team__inner { padding: 34px 22px 30px; }
	.mk-team__eyebrow { margin-bottom: 12px; font-size: 11px; min-height: 0; }
	.mk-team__rule { width: 72px; margin-bottom: 18px; }
	.mk-team .mk-team__h2 { max-width: none; min-height: 0; letter-spacing: -0.03em; }
	.mk-team__rule--thin { width: 100px; margin: 18px 0; }
	.mk-team__intro { min-height: 0; }

	.mk-team__raster {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "args" "l1" "p1" "l2" "p2";
		row-gap: 30px; margin-top: 30px; padding-inline: 0;
	}
	.mk-team__linie { height: 1px; }
	.mk-team__args { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; align-items: start; }
	.mk-team__arg, .mk-team__arg:first-child, .mk-team__arg:last-child { padding: 0; gap: 10px; }
	.mk-team__arg + .mk-team__arg { border-top: 0; }
	.mk-team__argicon { width: 21px; height: 21px; }
	.mk-team__arglabel { font-size: 10px; letter-spacing: 0.03em; }     /* Design 9,5 px, etwas größer; „Ansprechpartner“ passt bei 390 px */

	.mk-team__kopfzeile { gap: 14px; }
	.mk-team__foto { width: 64px; height: 64px; }
	.mk-team__initialen { font-size: 20px; }
	.mk-team .mk-team__name { font-size: 21px; }
	.mk-team__rolle { font-size: 11px; }
	.mk-team__zitat { margin-top: 22px; padding: 0 18px; }
	.mk-team__zitat p { font-size: 15px; }
	.mk-team__qm { font-size: 30px; }
	.mk-team__trenner { margin: 28px 0 18px; }
	.mk-team__kontakt { gap: 0; }
	.mk-team__link { min-height: 44px; font-size: 14.5px; }   /* Tippfläche 44 px */
	.mk-team__kreis { width: 30px; height: 30px; }
	.mk-team__kreis .mk-icon { width: 14px; height: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.mk-team__qm, .mk-team__argicon, .mk-team__argicon .mk-icon__zeiger { animation: none; }
	.mk-team__foto, .mk-team__linktext { transition: none; }
}