/**
 * ifas Angebotsfinder — Gestaltung
 * --------------------------------
 * Alles unterhalb von .ifas-af, damit nichts in das Salient-Theme blutet und
 * umgekehrt Theme-Regeln den Finder nicht ueberschreiben.
 *
 * Kontrast (WCAG 2.2 AA, gemessen gegen die tatsaechlich verwendeten
 * Hintergruende):
 *   dunkel  #1B2A3A auf weiss    14,6:1   — Fliesstext
 *   petrol  #2E7D6B auf weiss     4,9:1   — Links, Rahmen, Text
 *   weiss   auf petrol            4,9:1   — Primaerknopf
 *   gold    #E2A53F auf weiss     2,2:1   — NUR Dekoration, nie Text
 *   gold    auf dunkel            6,7:1   — Akzent im dunklen Kasten
 * Gold ist deshalb Balken und Flaeche, niemals Schriftfarbe auf Hell.
 *
 * Autor: Dluxe Media GmbH — https://dluxe-media.de
 */

.ifas-af {
	--ifas-af-petrol: #2E7D6B;
	--ifas-af-petrol-dunkel: #24614F;
	--ifas-af-petrol-hell: #EAF3F0;
	--ifas-af-gold: #E2A53F;
	--ifas-af-gold-hell: #FDF3E1;
	--ifas-af-dunkel: #1B2A3A;
	--ifas-af-grau: #5A6672;
	--ifas-af-linie: #D6DBE0;
	--ifas-af-flaeche: #FFFFFF;
	--ifas-af-abstand: 1.5rem;
	--ifas-af-radius: 10px;

	/* 44 px Mindestgroesse fuer alle Klickflaechen (WCAG 2.5.8). */
	--ifas-af-klickflaeche: 44px;

	box-sizing: border-box;
	color: var(--ifas-af-dunkel);
	max-width: 100%;

	/* Verhindert, dass lange Woerter wie "Rehabilitationsplanung" auf 375 px
	   die Karte aufsprengen und die Seite horizontal scrollen lassen. */
	overflow-wrap: break-word;
	word-break: break-word;
}

.ifas-af *,
.ifas-af *::before,
.ifas-af *::after {
	box-sizing: inherit;
}

/* --------------------------------------------------------------------------
 * Nur fuer Screenreader
 * ----------------------------------------------------------------------- */

.ifas-af__live,
.ifas-af-nur-screenreader {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;

	/* clip-path statt clip: clip ist veraltet, wird aber von aelteren
	   Screenreadern noch ausgewertet — deshalb beides. */
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

/* --------------------------------------------------------------------------
 * Sichtbarer Fokus
 *
 * outline-offset schiebt den Ring nach aussen, sodass er immer an den hellen
 * Seitenhintergrund grenzt und dort die geforderten 3:1 erreicht — auch bei
 * Elementen, die selbst petrolfarben sind.
 * ----------------------------------------------------------------------- */

.ifas-af a:focus-visible,
.ifas-af button:focus-visible,
.ifas-af input:focus-visible,
.ifas-af summary:focus-visible,
.ifas-af [tabindex]:focus-visible {
	outline: 3px solid var(--ifas-af-dunkel);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Im dunklen Beratungskasten waere ein dunkler Ring unsichtbar. */
.ifas-af__beratung a:focus-visible,
.ifas-af__beratung button:focus-visible {
	outline-color: var(--ifas-af-gold);
}

/* Die Ueberschrift bekommt den Fokus beim Schrittwechsel programmatisch.
   Sie ist kein Bedienelement, deshalb bleibt der Ring dezent. */
.ifas-af__titel:focus {
	outline: none;
}

.ifas-af__titel:focus-visible {
	outline: 3px solid var(--ifas-af-dunkel);
	outline-offset: 4px;
}

/* --------------------------------------------------------------------------
 * Grundgeruest
 * ----------------------------------------------------------------------- */

.ifas-af__schritt {
	background: var(--ifas-af-flaeche);
	border: 1px solid var(--ifas-af-linie);
	border-radius: var(--ifas-af-radius);
	padding: var(--ifas-af-abstand);
}

.ifas-af .ifas-af__titel {
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
	line-height: 1.3;
	margin: 0 0 0.75rem;
	padding: 0;
	color: var(--ifas-af-dunkel);
}

.ifas-af .ifas-af__hinweis {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ifas-af-grau);
	margin: 0 0 var(--ifas-af-abstand);
	padding: 0;
}

.ifas-af .ifas-af__begriff {
	color: var(--ifas-af-petrol);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ifas-af .ifas-af__begriff:hover {
	color: var(--ifas-af-petrol-dunkel);
}

/* --------------------------------------------------------------------------
 * Knoepfe
 * ----------------------------------------------------------------------- */

.ifas-af .ifas-af-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 0.15rem;
	min-height: var(--ifas-af-klickflaeche);
	min-width: var(--ifas-af-klickflaeche);
	padding: 0.7rem 1.25rem;
	border: 2px solid transparent;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ifas-af .ifas-af-button--primaer {
	background: var(--ifas-af-petrol);
	border-color: var(--ifas-af-petrol);
	color: #FFFFFF;
}

.ifas-af .ifas-af-button--primaer:hover,
.ifas-af .ifas-af-button--primaer:focus {
	background: var(--ifas-af-petrol-dunkel);
	border-color: var(--ifas-af-petrol-dunkel);
	color: #FFFFFF;
}

.ifas-af .ifas-af-button--sekundaer {
	background: transparent;
	border-color: var(--ifas-af-petrol);
	color: var(--ifas-af-petrol);
}

.ifas-af .ifas-af-button--sekundaer:hover,
.ifas-af .ifas-af-button--sekundaer:focus {
	background: var(--ifas-af-petrol-hell);
	color: var(--ifas-af-petrol-dunkel);
	border-color: var(--ifas-af-petrol-dunkel);
}

.ifas-af .ifas-af-button--text {
	background: none;
	border-color: transparent;
	color: var(--ifas-af-petrol);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 0.7rem 0.5rem;
}

.ifas-af .ifas-af-button--text:hover,
.ifas-af .ifas-af-button--text:focus {
	color: var(--ifas-af-petrol-dunkel);
	background: var(--ifas-af-petrol-hell);
}

/* Grosse Auswahlflaechen der Einstiegsfrage. */
.ifas-af .ifas-af-button--wahl {
	align-items: flex-start;
	text-align: left;
	width: 100%;
	padding: 1.1rem 1.25rem;
	background: var(--ifas-af-flaeche);
	border-color: var(--ifas-af-linie);
	color: var(--ifas-af-dunkel);
	font-size: 1.05rem;
}

.ifas-af .ifas-af-button--wahl:hover,
.ifas-af .ifas-af-button--wahl:focus {
	border-color: var(--ifas-af-petrol);
	background: var(--ifas-af-petrol-hell);
}

.ifas-af .ifas-af-button__zusatz {
	display: block;
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--ifas-af-grau);
}

.ifas-af__einstieg-auswahl {
	display: grid;
	gap: 0.75rem;
}

/* --------------------------------------------------------------------------
 * Fortschritt
 * ----------------------------------------------------------------------- */

.ifas-af__fortschritt {
	margin-bottom: var(--ifas-af-abstand);
}

.ifas-af .ifas-af__fortschritt-text {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ifas-af-grau);
	margin: 0 0 0.5rem;
	padding: 0;
}

.ifas-af__fortschritt-schiene {
	height: 6px;
	border-radius: 3px;
	background: var(--ifas-af-linie);
	overflow: hidden;
}

.ifas-af__fortschritt-balken {
	height: 100%;
	background: var(--ifas-af-petrol);
	transition: width 0.25s ease;
}

/* --------------------------------------------------------------------------
 * Fragen und Optionen
 * ----------------------------------------------------------------------- */

.ifas-af .ifas-af__feld {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.ifas-af .ifas-af__legende {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	float: none;
}

.ifas-af .ifas-af__legende .ifas-af__titel {
	margin-bottom: 0.75rem;
}

.ifas-af__optionen {
	display: grid;
	gap: 0.5rem;
}

.ifas-af .ifas-af-option {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-height: var(--ifas-af-klickflaeche);
	padding: 0.75rem 1rem;
	border: 2px solid var(--ifas-af-linie);
	border-radius: 8px;
	background: var(--ifas-af-flaeche);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1.45;
	font-weight: 400;
	color: var(--ifas-af-dunkel);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ifas-af .ifas-af-option:hover {
	border-color: var(--ifas-af-petrol);
	background: var(--ifas-af-petrol-hell);
}

/* Der markierte Zustand haengt nicht allein an der Farbe: der Rahmen wird
   zusaetzlich kraeftiger und die Flaeche wechselt. */
.ifas-af .ifas-af-option:has(.ifas-af-option__eingabe:checked) {
	border-color: var(--ifas-af-petrol);
	background: var(--ifas-af-petrol-hell);
}

.ifas-af .ifas-af-option__eingabe {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	border: 2px solid var(--ifas-af-grau);
	background: #FFFFFF;
	cursor: pointer;
	position: relative;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ifas-af input[type="radio"].ifas-af-option__eingabe {
	border-radius: 50%;
}

.ifas-af input[type="checkbox"].ifas-af-option__eingabe {
	border-radius: 4px;
}

.ifas-af .ifas-af-option__eingabe:checked {
	border-color: var(--ifas-af-petrol);
}

/* Gefuellter Punkt beim Radio — als Innenschatten, ohne Pseudo-Element. */
.ifas-af input[type="radio"].ifas-af-option__eingabe:checked {
	box-shadow: inset 0 0 0 5px var(--ifas-af-petrol);
}

.ifas-af input[type="checkbox"].ifas-af-option__eingabe:checked {
	background: var(--ifas-af-petrol);
}

/* Haken der Checkbox. Reine Dekoration: die Information steckt im
   checked-Zustand des nativen Feldes, nicht in diesem Strich. */
.ifas-af input[type="checkbox"].ifas-af-option__eingabe:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 1px;
	width: 6px;
	height: 12px;
	border: solid #FFFFFF;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.ifas-af .ifas-af-option__text {
	flex: 1 1 auto;
	min-width: 0;
}

.ifas-af .ifas-af__fehler {
	margin: 0.75rem 0 0;
	padding: 0.75rem 1rem;
	border-left: 4px solid #B3261E;
	background: #FDECEA;
	color: #7A1810;
	font-size: 0.95rem;
}

.ifas-af .ifas-af__fehler[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
 * Navigation
 * ----------------------------------------------------------------------- */

.ifas-af__navigation {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--ifas-af-abstand);
}

.ifas-af__navigation .ifas-af-button {
	flex: 1 1 auto;
}

.ifas-af__navigation--ergebnis {
	justify-content: flex-start;
}

.ifas-af__navigation--ergebnis .ifas-af-button {
	flex: 0 0 auto;
}

.ifas-af .ifas-af__ueberspringen {
	display: inline-flex;
	margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
 * Ergebnis
 * ----------------------------------------------------------------------- */

.ifas-af__abschnitt {
	margin-top: var(--ifas-af-abstand);
}

.ifas-af .ifas-af__abschnitt-titel {
	display: flex;
	align-items: center;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 1;
	color: var(--ifas-af-dunkel);
	border-left: 4px solid var(--ifas-af-gold);
	padding: 2px 0 2px 0.75rem;
	margin: 0 0 1rem;
}

.ifas-af .ifas-af-karten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.ifas-af .ifas-af-karte {
	margin: 0;
	padding: 1.25rem;
	border: 1px solid var(--ifas-af-linie);
	border-left: 4px solid var(--ifas-af-petrol);
	border-radius: 8px;
	background: var(--ifas-af-flaeche);
}

.ifas-af .ifas-af-karte__name {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 0.5rem;
	padding: 0;
	color: var(--ifas-af-dunkel);
}

.ifas-af .ifas-af-karte__text {
	margin: 0 0 1rem;
	padding: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ifas-af-dunkel);
}

/* Hinweis auf eine noch ungeklaerte Voraussetzung. Bewusst freundlich und
   nicht als Warnung gestaltet — es ist kein Ausschluss, sondern ein Thema
   fuers gemeinsame Gespraech. */
.ifas-af .ifas-af-karte__hinweis {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--ifas-af-gold);
	border-radius: 0 6px 6px 0;
	background: var(--ifas-af-gold-hell);
	color: var(--ifas-af-dunkel);
	font-size: 0.95rem;
	line-height: 1.55;
}

.ifas-af-karte__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

.ifas-af .ifas-af-karte__kontakt {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0;
	padding: 0;
	font-size: 0.95rem;
	color: var(--ifas-af-dunkel);
}

.ifas-af .ifas-af-karte__kontakt-name {
	font-weight: 600;
}

.ifas-af .ifas-af-karte__kontakt-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--ifas-af-klickflaeche);
	color: var(--ifas-af-petrol);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
 * Eingeklappter Bereich
 * ----------------------------------------------------------------------- */

.ifas-af__weitere {
	margin-top: var(--ifas-af-abstand);
	border-top: 1px solid var(--ifas-af-linie);
	padding-top: var(--ifas-af-abstand);
}

.ifas-af .ifas-af__weitere-titel {
	display: flex;
	align-items: center;
	min-height: var(--ifas-af-klickflaeche);
	padding: 0.5rem 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ifas-af-petrol);
	cursor: pointer;
	list-style-position: inside;
}

.ifas-af .ifas-af__weitere-titel:hover {
	color: var(--ifas-af-petrol-dunkel);
}

.ifas-af__weitere[open] > .ifas-af__weitere-titel {
	margin-bottom: 0.5rem;
}

/* Karten im eingeklappten Bereich treten optisch zurueck. */
.ifas-af__weitere .ifas-af-karte {
	border-left-color: var(--ifas-af-linie);
}

/* --------------------------------------------------------------------------
 * Beratungskasten
 * ----------------------------------------------------------------------- */

.ifas-af__beratung {
	margin-top: var(--ifas-af-abstand);
	padding: 1.25rem;
	border-radius: 8px;
	background: var(--ifas-af-dunkel);
	color: #FFFFFF;
}

.ifas-af .ifas-af__beratung-titel {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 0.5rem;
	padding: 0;
	color: var(--ifas-af-gold);
}

.ifas-af .ifas-af__beratung-text {
	margin: 0 0 1rem;
	padding: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: #FFFFFF;
}

.ifas-af__beratung .ifas-af-button--primaer {
	background: var(--ifas-af-gold);
	border-color: var(--ifas-af-gold);
	/* Dunkle Schrift auf Gold: 6,7:1. Weiss auf Gold waere 2,2:1. */
	color: var(--ifas-af-dunkel);
}

.ifas-af__beratung .ifas-af-button--primaer:hover,
.ifas-af__beratung .ifas-af-button--primaer:focus {
	background: #F0BA63;
	border-color: #F0BA63;
	color: var(--ifas-af-dunkel);
}

/* --------------------------------------------------------------------------
 * Statische Uebersicht (noscript und Notfall)
 * ----------------------------------------------------------------------- */

.ifas-af-static {
	background: var(--ifas-af-flaeche, #FFFFFF);
	border: 1px solid #D6DBE0;
	border-radius: 10px;
	padding: 1.5rem;
	color: #1B2A3A;
}

.ifas-af-static__liste {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	display: grid;
	gap: 1.25rem;
}

.ifas-af-static__eintrag {
	margin: 0;
	padding: 0 0 1.25rem;
	border-bottom: 1px solid #D6DBE0;
}

.ifas-af-static__eintrag:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ifas-af-static .ifas-af-static__name {
	font-size: 1.1rem;
	margin: 0 0 0.35rem;
	padding: 0;
}

.ifas-af-static .ifas-af-static__name a {
	color: #2E7D6B;
}

/* --------------------------------------------------------------------------
 * Schmale Viewports (Bezug: 375 px)
 * ----------------------------------------------------------------------- */

@media (max-width: 480px) {

	.ifas-af {
		--ifas-af-abstand: 1.15rem;
	}

	.ifas-af__schritt,
	.ifas-af-static {
		padding: 1.15rem 1rem;
	}

	.ifas-af .ifas-af-karte {
		padding: 1rem;
	}

	/* Knoepfe untereinander statt gequetscht nebeneinander. */
	.ifas-af__navigation .ifas-af-button,
	.ifas-af-karte__aktionen .ifas-af-button {
		flex: 1 1 100%;
		width: 100%;
	}

	.ifas-af .ifas-af__abschnitt-titel {
		font-size: 0.95rem;
		letter-spacing: 0.5px;
	}
}

/* --------------------------------------------------------------------------
 * Bewegung reduzieren
 * ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.ifas-af *,
	.ifas-af *::before,
	.ifas-af *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
 * Erhoehter Kontrast und Windows-Kontrastmodus
 * ----------------------------------------------------------------------- */

@media (forced-colors: active) {

	.ifas-af .ifas-af-option {
		border-color: ButtonBorder;
	}

	.ifas-af .ifas-af-option:has(.ifas-af-option__eingabe:checked) {
		border-color: Highlight;
	}

	/* Im erzwungenen Farbmodus werden Hintergruende ersetzt; der markierte
	   Zustand muss deshalb zusaetzlich am Rahmen erkennbar sein. */
	.ifas-af .ifas-af-option__eingabe:checked {
		forced-color-adjust: none;
		border-color: Highlight;
		box-shadow: inset 0 0 0 5px Highlight;
	}
}

/* --------------------------------------------------------------------------
 * Druck
 * ----------------------------------------------------------------------- */

@media print {

	.ifas-af__navigation,
	.ifas-af__ueberspringen {
		display: none;
	}

	.ifas-af__weitere > .ifas-af-karten {
		display: grid !important;
	}
}