/* =============================================================================
   Block: FAQ
   =============================================================================

   Bewusst KURZ. Rahmen, Abstaende, Typografie und das Pluszeichen kommen aus der
   Theme-CSS zu `.faq-mini-section`; dieser Block traegt dieselben Klassen und erbt
   das alles. Hier steht nur, was `details`/`summary` zusaetzlich braucht — und was
   der Browser sonst als graues Dreieck davorsetzt.

   Diese Regeln sind aus dem abgenommenen PDL-Entwurf uebernommen, nicht neu erfunden.
   ========================================================================== */

/* Der Standardpfeil des Browsers muss weg, das Theme setzt sein eigenes Zeichen
   als ::after an .question. Zwei Schreibweisen, weil ::marker und
   ::-webkit-details-marker nicht dieselben Browser bedienen. */
.faq-mini summary.question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	list-style: none;
	/* 44px Trefferflaeche, sonst ist die Frage auf dem Handy kaum zu treffen. */
	min-height: 44px;
}

.faq-mini summary.question::-webkit-details-marker { display: none; }
.faq-mini summary.question::marker { content: ""; }

/* Die Frage IST eine Ueberschrift und soll wie eine aussehen — aber die Groesse
   kommt von .question aus dem Theme, nicht vom h3-Default des Browsers. */
.faq-mini summary.question h3 {
	margin: 0;
	font: inherit;
	color: inherit;
	/* Ohne flex-grow schrumpft die Frage auf etwa die halbe Breite und bricht zweizeilig um (Denis 09.09.2026). */
	flex: 1 1 auto;
	min-width: 0;
}

/* Tastaturfokus sichtbar machen. Ohne diese Regel ist die Seite zwar bedienbar,
   aber man sieht nicht, wo man ist. */
.faq-mini summary.question:focus-visible {
	outline: 2px solid var(--typography-black, #27252a);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Das Theme versteckt `.answer` per display:none und blendet sie mit JavaScript ein.
   Hier uebernimmt das `details` selbst: zu heisst zu, offen heisst offen. */
.faq-mini details.item > .answer { display: none; }
.faq-mini details.item[open] > .answer { display: block; }
.faq-mini-section .faq-mini .answer p { margin: 0 0 14px; }
.faq-mini-section .faq-mini .answer p:last-child { margin-bottom: 0; }

/* ANTWORT AN DIE TEXTKANTE DER FRAGE. Denis am 18.08.2026: „bei den faqs ist noch ein
   komischer versatz".

   Gemessen auf Seite 38941: die Frage steht bei x=867, die Antwort bei x=915. Die 48px
   kommen aus dem Theme, das der Frage `padding:16px 60px 16px 16px` gibt, der Antwort
   aber `padding:24px 64px`. Die Antwort ruckt damit gegen die Frage ein, ohne dass links
   etwas stuende, das den Einzug traegt — kein Icon, keine Nummer, nichts.

   Nur padding-left wird angefasst. Rechts bleibt alles, wie es ist: dort sitzt bei der
   Frage das Plus-Icon, und auf dem Handy setzt das Theme ohnehin eigene Werte.

   Die Regel MUSS spezifischer sein als die des Themes (0,3,0). Mit `details.item >`
   kommt sie auf (0,4,1) und gewinnt unabhaengig davon, in welcher Reihenfolge Theme- und
   Block-Stylesheet geladen werden. Auf die Ladereihenfolge zu setzen waere eine Wette. */
.faq-mini-section .faq-mini details.item > .answer { padding-left: 16px; }

/* Lesbarkeit 21.10.2026: Antworten sind Fliesstext, also 20 px wie im Theme (text-body-2) statt
   der kleinen Akkordeon-Schrift. Gleiche Spezifitaet wie oben, damit die Ladereihenfolge egal ist. */
.faq-mini-section .faq-mini details.item > .answer {
	font-size: var(--schrift-20);
	line-height: 1.6;
}

/* Stand-Zeile: linksbuendig an der Antwortspalte (rechtsbuendig flatterte dreizeilig, Audit 09.09.2026). */
.faq-stand {
	font-family: var(--font4);
	font-size: var(--schrift-16); /* Meta-Zeile: Sekundaertext mind. 16 */
	line-height: 1.6;
	color: var(--typography-dark-grey, #444);
	margin: 22px 0 0;
	max-width: 62ch;
	text-align: left;
}

@media (max-width: 900px) {
	.faq-stand { text-align: left; margin-left: 0; }
}

/* =============================================================================
   Fragen-Seite 2026 (/fragen/): optionale Erweiterungen. Ohne die neuen Felder greift nichts davon,
   die Hubs und /weiterbildungen/ bleiben unverändert.
   ========================================================================== */

/* Abstand der Themenabschnitte wie im Entwurf (72 px statt 136 px). Alle Layout-Regeln hängen an doppelten Klassen:
   das Theme setzt .faq-mini als 12er-Raster mit span 5/7 und lädt je nach Seite vor oder nach dem Block-CSS. */
.faq-mini-section.faq-mini-section--schmal,
.faq-mini-section.faq-mini-section--gestapelt,
.faq-mini-section.faq-mini-section--foto {
	margin: 0;
	padding: 72px 0;
	border-top: 1px solid var(--background-borders);
}
/* Direkt unter dem Kopf kein Trenner (Entwurf). */
.fragen-kopf + .faq-mini-section { border-top: 0; }
/* Das letzte Element einer Liste bringt keinen eigenen Abstand mit: der Abschnitt trägt 72 px unten. */
.faq-mini-section.faq-mini-section--schmal .faq-mini__faq-holder > :last-child,
.faq-mini-section.faq-mini-section--gestapelt .faq-mini__faq-holder > :last-child,
.faq-mini-section.faq-mini-section--foto .faq-mini__faq-holder > :last-child { margin-bottom: 0; }

/* 4/8 statt 5/7 (nur Desktop, darunter stapelt das Theme ohnehin). */
@media (min-width: 992px) {
	.faq-mini-section.faq-mini-section--schmal .faq-mini .faq-mini__content-holder { grid-column: span 4; }
	.faq-mini-section.faq-mini-section--schmal .faq-mini .faq-mini__faq-holder { grid-column: span 8; }
	/* Das Theme setzt body auf overflow-x:hidden; dadurch wird body zum Scroll-Container und position:sticky bleibt wirkungslos.
	   clip beschneidet weiter, erzeugt aber keinen Scroll-Container. Nur auf Seiten mit diesem Layout (:has). */
	body:has(.faq-mini-section--schmal) { overflow-x: clip; }
	/* Titelspalte klebt unter dem Kopf, damit links keine leere Fläche neben der langen Liste steht (nur Desktop). */
	.faq-mini-section.faq-mini-section--schmal .faq-mini .faq-mini__content-holder { position: sticky; top: 120px; align-self: start; }
}

/* Titel oben, Fragen darunter in zwei Spalten (Prüfung). */
.faq-mini-section.faq-mini-section--gestapelt .faq-mini .faq-mini__content-holder,
.faq-mini-section.faq-mini-section--gestapelt .faq-mini .faq-mini__faq-holder { grid-column: 1 / -1; }
@media (min-width: 992px) {
	.faq-mini-section.faq-mini-section--gestapelt .faq-mini .faq-mini__faq-holder {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
		align-items: start;
	}
	.faq-mini-section.faq-mini-section--gestapelt .faq-mini .faq-karten,
	.faq-mini-section.faq-mini-section--gestapelt .faq-mini .faq-weitere,
	.faq-mini-section.faq-mini-section--gestapelt .faq-mini .faq-stand { grid-column: 1 / -1; }
}

/* Marke über der Überschrift: beige Kachel 64 px, Bild 44 px (Entwurf `.marke`). */
.faq-marke {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 20px;
	border-radius: 16px;
	background: var(--background-beige);
}
.faq-marke img { display: block; width: 44px; height: 44px; }

/* Sprungziele: der Kopf klebt oben. */
.faq-mini__content-holder[id],
.faq-mini .title[id],
.faq-foto[id],
.faq-anker { scroll-margin-top: calc(var(--hh, 96px) + 24px); }
.faq-anker { display: block; height: 0; }

/* Zwei Karten vor der Liste (Markup aus hoeher_lernform_karte_html(), Stile hier, weil hubs.css nur auf Hub-Seiten lädt). */
.faq-karten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-bottom: 32px;
}
.faq-karten .lf__karte {
	min-width: 0;
	border-radius: 20px;
	padding: 32px;
}
.faq-karten .lf__karte--orange { background: var(--orange-100); }
.faq-karten .lf__karte--lila { background: var(--lila-100); }
.faq-karten .lf__text { padding: 0; }
.faq-karten .lf__wann {
	font-family: var(--font3), serif;
	font-weight: 400;
	font-size: var(--schrift-h3);
	line-height: 1.3;
	color: var(--typography-black);
	margin: 0 0 12px;
	text-wrap: balance;
}
.faq-karten .lf__satz {
	font-family: var(--font4);
	font-size: var(--schrift-16);
	line-height: 1.5;
	color: var(--typography-black);
	margin: 0;
}
@media (max-width: 767px) {
	.faq-karten { grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
	.faq-karten .lf__karte { padding: 24px; }
}

/* „Weitere Fragen anzeigen“: natives details, der summary trägt die Klassen des Tertiärknopfs (button button_transparent
   icon-bg-yellow, Optik und Kreis aus dem Theme). Plus/Minus statt Pfeil im gelben Kreis, linksbündig, 48 px hoch.
   Offen steht dort „Weniger Fragen anzeigen“ (per CSS, der details meldet den Zustand ohnehin an Screenreader). */
.faq-weitere { margin: 8px 0 0; }
.faq-mini .faq-weitere > .faq-weitere__knopf {
	display: inline-flex;
	height: 48px;
	cursor: pointer;
	list-style: none;
}
.faq-weitere__knopf::-webkit-details-marker { display: none; }
.faq-weitere__knopf::marker { content: ""; }
.faq-mini .faq-weitere > .faq-weitere__knopf.button.icon-bg-yellow > span::before {
	content: "+";
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: none;
	font-family: var(--font4);
	font-size: var(--schrift-20);
	font-weight: 500;
	line-height: 1;
	color: var(--typography-black);
}
.faq-mini .faq-weitere[open] > .faq-weitere__knopf.button.icon-bg-yellow > span::before { content: "\2212"; }
.faq-mini .faq-weitere[open] > .faq-weitere__knopf.button.icon-bg-yellow > span { font-size: 0; }
.faq-mini .faq-weitere[open] > .faq-weitere__knopf.button.icon-bg-yellow > span::after { content: "Weniger Fragen anzeigen"; font-size: var(--schrift-16); }
.faq-weitere__knopf:focus-visible {
	outline: 2px solid var(--typography-black);
	outline-offset: 3px;
	border-radius: 24px;
}
.faq-weitere__liste { margin-top: 16px; }

/* Suche (assets/hoeher/fragen-suche.js) blendet per hidden aus. Die Elemente haben ein eigenes display,
   deshalb ohne diese Regel bliebe hidden wirkungslos (AGENTS.md). */
.faq-mini details.item[hidden],
.faq-mini .faq-weitere[hidden],
.faq-mini-section[hidden] { display: none; }

/* Bauchbinde auf Fotos (Fragen-Kopf, Teamfoto im Paar-Block): Werte von .ablauf__bauchbinde (hoeher-ablauf/style.css),
   unten links im Bild. Eine Klasse für beide Stellen. */
.faq-binde {
	position: absolute;
	left: 16px;
	bottom: 16px;
	z-index: 1;
	max-width: calc(100% - 32px);
	padding: 8px 12px;
	border-radius: 8px;
	background: hsla(0, 0%, 100%, 0.75);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-family: var(--font4);
	font-weight: 500;
	font-size: var(--schrift-16);
	line-height: 1.5;
	color: var(--typography-black);
}
.faq-binde span {
	display: block;
	margin-top: 5px;
	font-size: var(--schrift-12);
	line-height: 1.34;
	color: var(--typography-black);
	opacity: 0.75;
}
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
	.faq-binde { background: hsla(0, 0%, 100%, 0.88); }
}

/* Aufbau „Foto links“ (Betreuung): Foto 4 Spalten vollständig im Hochformat, Kopf und Fragen ab Spalte 6 über 7 Spalten.
   Mobil stapelt das Theme (Foto zuerst, ganz). */
.faq-foto {
	position: relative;
	margin: 0;
	width: 100%;
	aspect-ratio: 848 / 1259;
	border-radius: 20px;
	overflow: hidden;
}
.faq-foto__bild { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 992px) {
	.faq-mini-section.faq-mini-section--foto .faq-mini { align-items: start; }
	.faq-mini-section.faq-mini-section--foto .faq-mini .faq-foto { grid-column: 1 / span 4; grid-row: 1 / span 2; }
	.faq-mini-section.faq-mini-section--foto .faq-mini .faq-mini__content-holder { grid-column: 6 / span 7; grid-row: 1; }
	.faq-mini-section.faq-mini-section--foto .faq-mini .faq-mini__faq-holder { grid-column: 6 / span 7; grid-row: 2; }
}


/* Knöpfe unter der Liste (Fragen-Seite, „Welche Weiterbildung zu Dir passt“): Beratung schwarz, daneben Tertiär. */
.faq-knoepfe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	margin-top: 24px;
}
.faq-knoepfe__zeile {
	flex: 0 0 100%;
	margin: 0;
	font-family: var(--font4);
	font-size: var(--schrift-20);
	line-height: 1.6;
	color: var(--typography-dark-grey);
}

/* Links in Antworten: unterstrichen wie Fließtextlinks (Orange 400, 2 px, Abstand 3 px), Knöpfe in Antworten ausgenommen.
   Fokus 2 px Ink. Gilt auch für die Hubs, die denselben Block nutzen. */
.faq-mini .answer a:not(.button) {
	color: var(--typography-black);
	text-decoration: underline;
	text-decoration-color: var(--orange-400);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.faq-mini .answer a:not(.button):hover { text-decoration-color: var(--typography-black); }
.faq-mini .answer a:not(.button):focus-visible {
	outline: 2px solid var(--typography-black);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Abstand H2 zur Einleitung in allen Layouts der Fragen-Seite 16 px (Paar: .fragen-paar__einl). */
.faq-mini-section.faq-mini-section--schmal .faq-mini .faq-mini__content-holder .title,
.faq-mini-section.faq-mini-section--gestapelt .faq-mini .faq-mini__content-holder .title,
.faq-mini-section.faq-mini-section--foto .faq-mini .faq-mini__content-holder .title { margin: 0; }
.faq-mini-section.faq-mini-section--schmal .faq-mini .faq-mini__content-holder .subtitle,
.faq-mini-section.faq-mini-section--gestapelt .faq-mini .faq-mini__content-holder .subtitle,
.faq-mini-section.faq-mini-section--foto .faq-mini .faq-mini__content-holder .subtitle { margin-top: 16px; }

/* Stand-Zeile (Feld stand) darf zweizeilig laufen, auch in der breiten Liste. */
.faq-mini-section.faq-mini-section--schmal .faq-mini .faq-stand,
.faq-mini-section.faq-mini-section--gestapelt .faq-mini .faq-stand,
.faq-mini-section.faq-mini-section--foto .faq-mini .faq-stand { max-width: none; white-space: normal; }