/* ==========================================================================
   Sektion 10 · FAQ (acf/mk-faq)
   Grundlage Design #15b/#15m. Grund Schwarz, Hintergrundfoto über die ganze Sektion, Overlay 0.92 → 0.86 → 0.94.
   Kopfspalte 400 px laut Design. Nur wenn ein Leistungsname länger ist, wird sie so breit wie dieses Wort
   (z. B. „Grünflächenbetreuung“ 550 px). Die Fragen nehmen den Rest ein.
   Kopf steht senkrecht mittig zu den geschlossenen Fragen (Betrieb) und bleibt stehen, wenn eine Frage aufgeht.
   Mehr Luft als im Design (Betrieb: Sektion höher): Polster 112 / 104 statt 72 / 64 px, Fragen 28 statt 24 px.
   Unter 1440 px Kopf oben, Fragen darunter (daneben bliebe für die Fragen zu wenig Platz).
   Akkordeon: <details name> (genau eins offen, Klick auf offenes schließt). Beim Laden alle zu.
   Reservierte Zeilen: Frage 2 (der Kopf ist immer niedriger als die Fragen). Geschlossen ist die Höhe auf allen Seiten gleich.
   Maße in em auf Basis --mk-fs-body, kein zoom.
   ========================================================================== */

.mk-section.mk-faq {
	--mk-faq-x: max(var(--mk-gutter), 6.25vw);                        /* 90 px bei 1440 */
	--mk-faq-kopf: max(22.22em, calc(var(--mk-fs-h2) * 9.09));        /* 400 px bei 1440, wächst mit der H2 */
	--mk-faq-kopf-max: calc(var(--mk-fs-h2) * 12.73);                   /* Platz für das längste Wort (560 px bei 1440) */
	--mk-faq-gap: 4em;                                                  /* 72 px */
	--mk-faq-liste: 34.9em;                                             /* Fragenspalte mindestens 628 px bei 1440 */
	--mk-faq-pad: 1.556em;                                              /* 28 px über und unter jeder Frage */
	--mk-faq-nr: 2.444em;                                               /* Ziffernspalte 44 px */
	--mk-faq-kreis: 2em;                                                /* 36 px */
	--mk-faq-spalt: 0.889em;                                            /* 16 px */
	--mk-faq-einzug: 1.444em;                                           /* 26 px: Platz für den Streifen links */
	position: relative;
	overflow: hidden;
	padding: 0;                                     /* doppelte Klasse: sonst gewinnt .mk-section */
	font-size: var(--mk-fs-body);
	background: var(--mk-black);
	color: var(--mk-text-dark);
	-webkit-font-smoothing: antialiased;           /* laut Design auf Schwarz */
}

/* ---------- Hintergrundfoto mit dunklem Overlay ---------- */
.mk-faq__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.mk-faq__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-faq__bg::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.86) 45%, rgba(0,0,0,0.94) 100%);
}

.mk-faq__inner {
	position: relative; z-index: 1;
	display: grid;
	/* Kopf 400 px, bei langem Wort so breit wie das Wort. Fragen nehmen den Rest */
	grid-template-columns: minmax(var(--mk-faq-kopf), min-content) minmax(0, 1fr);
	column-gap: var(--mk-faq-gap);
	align-items: start;
	/* Inhalt 1260 px bei 1440. Darüber so breit, dass die Fragen auch neben dem längsten Wort ihre Mindestbreite haben */
	max-width: calc(max(70em, var(--mk-faq-kopf-max) + var(--mk-faq-gap) + var(--mk-faq-liste)) + 2 * var(--mk-faq-x));
	margin-inline: auto;
	padding: 6.22em var(--mk-faq-x) 5.78em;        /* 112 / 104 px */
}

/* ---------- Kopfblock ---------- */
.mk-faq__kopf {
	min-width: 0;
	/* Mittig zur Höhe der GESCHLOSSENEN Fragen (n × 2 Zeilen), damit der Kopf beim Aufklappen nicht springt.
	   n = Anzahl der Fragen, höchstens 6 (render.php): bei mehr Fragen bleibt der Kopf oben neben den ersten sechs (0.19.0) */
	min-height: calc(var(--mk-faq-anzahl, 6) * (2 * var(--mk-faq-pad) + 0.972 * 2.9em) + 7px);
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.mk-faq__eyebrow {
	margin: 0 0 1.333em; min-height: 1.3em;         /* 16 px, eine Zeile reserviert */
	font-size: 0.667em; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
	line-height: 1.3; color: var(--mk-gold);
}
.mk-faq__rule { display: block; width: 4.89em; height: 2px; margin-bottom: 1.22em; background: var(--mk-gold); }   /* 88 / 22 px */
.mk-faq__rule--thin { width: 6.67em; height: 1px; margin: 1.22em 0; background: rgba(214, 167, 66, 0.6); }        /* 120 px */
.mk-faq .mk-faq__h2 {           /* doppelte Klasse: sonst gewinnt .mk-h2 aus main.css */
	max-width: none; margin: 0;                      /* keine Reservierung: die Sektionshöhe bestimmen die Fragen */
	color: var(--mk-white);
	text-wrap: wrap; hyphens: manual;
}
.mk-faq__gold { color: var(--mk-gold-head); font-weight: 900; }
.mk-faq__intro {
	margin: 0;
	font-size: 1em; line-height: 1.65; color: var(--mk-text-dark);
}
.mk-faq__intro strong { font-weight: 700; color: var(--mk-gold); }

/* ---------- Akkordeon ---------- */
.mk-faq__liste { min-width: 0; border-bottom: 1px solid var(--mk-line-gold); }
.mk-faq__item {
	position: relative;
	border-top: 1px solid var(--mk-line-gold);
	padding: var(--mk-faq-pad) 0 var(--mk-faq-pad) var(--mk-faq-einzug);   /* 28 / 26 px */
}
/* Streifen links: geschlossen 1 px blass, offen 3 px gold */
.mk-faq__item::before {
	content: ""; position: absolute; left: 0; top: calc(var(--mk-faq-pad) - 0.333em); bottom: calc(var(--mk-faq-pad) - 0.333em);   /* 6 px über die Frage hinaus */
	width: 1px; background: rgba(214, 167, 66, 0.22);
	transition: width 220ms ease, background 220ms ease;
}
.mk-faq__item[open]::before { width: 3px; background: var(--mk-gold); }

.mk-faq__frage {
	display: grid;
	grid-template-columns: var(--mk-faq-nr) 1px minmax(0, 1fr) var(--mk-faq-kreis);
	column-gap: var(--mk-faq-spalt);
	align-items: start;
	cursor: pointer;
	list-style: none;
}
.mk-faq__frage::-webkit-details-marker { display: none; }
.mk-faq__frage::marker { content: ""; }
.mk-faq__frage:focus-visible { outline: 2px solid var(--mk-gold); outline-offset: 4px; border-radius: 2px; }

.mk-faq__nr {
	padding-top: 3px;
	font-family: var(--mk-font-head); font-size: 0.722em; font-weight: 700; letter-spacing: 0.06em;   /* 13 px */
	line-height: 1.45; color: var(--mk-gold);
}
.mk-faq__linie { position: relative; align-self: stretch; width: 1px; background: var(--mk-line-gold); }
.mk-faq__punkt {
	display: none; position: absolute; left: 50%; top: 10px; margin-left: -3.5px;
	width: 7px; height: 7px; border-radius: 50%; background: var(--mk-gold);
	box-shadow: 0 0 0 3px rgba(14, 14, 13, 0.9);
}
.mk-faq__item[open] .mk-faq__punkt { display: block; }

.mk-faq .mk-faq__h3 {
	margin: 0; min-height: 2.9em;                   /* 2 Zeilen reserviert */
	font-family: var(--mk-font-head); font-size: 0.972em; font-weight: 600;   /* 17,5 px */
	line-height: 1.45; letter-spacing: -0.005em;
	color: var(--mk-head-dark);
	text-wrap: pretty;
	transition: color 200ms ease;
}
.mk-faq__frage:hover .mk-faq__h3,
.mk-faq__item[open] .mk-faq__h3 { color: var(--mk-gold); }

.mk-faq__kreis {
	display: flex; align-items: center; justify-content: center;
	width: 100%; aspect-ratio: 1;                    /* füllt die Spalte (36 px), em hier sonst in Kreis-Schriftgröße */
	border: 1px solid rgba(214, 167, 66, 0.55); border-radius: 50%;
	box-sizing: border-box;
	font-family: var(--mk-font-head); font-size: 1.056em; font-weight: 600; line-height: 1;   /* 19 px */
	color: var(--mk-gold);
	transition: background 220ms ease, border-color 220ms ease;
}
.mk-faq__kreis::before { content: "+"; }
.mk-faq__item[open] .mk-faq__kreis::before { content: "\2212"; }
.mk-faq__kreis:hover { background: rgba(214, 167, 66, 0.16); border-color: var(--mk-gold); }

/* Antwort: linke Kante exakt wie die Frage */
.mk-faq__antwort {
	margin-top: 1em;                                 /* 18 px */
	padding-left: calc(var(--mk-faq-nr) + 1px + 2 * var(--mk-faq-spalt));   /* 77 px */
	padding-right: 2.78em;                           /* 50 px */
}
.mk-faq__antwort p {
	margin: 0; font-size: 0.917em; line-height: 1.7; color: var(--mk-text-dark-2);   /* 16,5 px */
	text-wrap: pretty;
}
.mk-faq__antwort strong { font-weight: 700; color: var(--mk-head-dark); }

/* 901–1439 px: Kopf oben, Fragen darunter (daneben wäre die Fragenspalte zu schmal). Höhe folgt dem Text */
@media (min-width: 901px) and (max-width: 1439px) {
	.mk-faq__inner { grid-template-columns: minmax(0, 1fr); row-gap: 2.44em; max-width: none; }   /* 44 px */
	.mk-faq__kopf { min-height: 0; max-width: var(--mk-faq-kopf-max); }
	.mk-faq__intro { max-width: 37.78em; }            /* 680 px */
	.mk-faq__liste { max-width: 47em; }               /* 846 px, Zeilenlänge der Antworten lesbar */
}

/* ---------- Mobil (Design #15m) ---------- */
@media (max-width: 900px) {
	.mk-section.mk-faq {
		--mk-faq-nr: 34px; --mk-faq-kreis: 30px; --mk-faq-spalt: 12px; --mk-faq-einzug: 18px; --mk-faq-pad: 20px;
	}
	.mk-faq__inner { display: block; padding: 34px 22px 30px; }
	.mk-faq__kopf { margin-bottom: 26px; min-height: 0; }
	.mk-faq__eyebrow { margin-bottom: 12px; font-size: 11px; min-height: 0; }
	.mk-faq__rule { width: 72px; margin-bottom: 18px; }
	.mk-faq__rule--thin { width: 100px; margin: 18px 0; }
	.mk-faq__item::before { top: 14px; bottom: 14px; }
	.mk-faq__nr { font-size: 12px; }
	.mk-faq__punkt { top: 8px; }
	.mk-faq .mk-faq__h3 { font-size: 15.5px; min-height: 0; }
	.mk-faq__kreis { font-size: 17px; }
	.mk-faq__antwort { margin-top: 14px; padding-right: 36px; }
	.mk-faq__antwort p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.mk-faq__item::before, .mk-faq .mk-faq__h3, .mk-faq__kreis { transition: none; }
}