/*
 * Kursfinder. Aufbau nach dem Kundenprototyp, Farben und Abstaende
 * ausschliesslich aus den bestehenden Tokens - keine eigenen Farbwerte,
 * kein Uppercase, Symbole einfarbig ueber currentColor.
 */

.lvq-finder{
	--k-lvq:var(--lvq);
	--k-lvq-2:var(--lvq-2);
	--k-wb:var(--weiterbildung);
	--k-biz:var(--business);
	/* Drei Symbolgroessen statt frei gewaehlter Werte. Die Ruecknahme-Werte
	   greifen nur, falls die Variablen im Style Manager fehlen. */
	--k-ikon-s:var(--icon-s,1.6rem);
	--k-ikon-m:var(--icon-m,2rem);
	--k-ikon-l:var(--icon-l,2.4rem);
	display:flex;flex-direction:column;gap:var(--space-m);
	color:var(--c-text);line-height:var(--lh-body);font-size:var(--text-m);
}
.lvq-finder > *{min-width:0}

/* ---- Fortschritt ---- */
.lvq-finder__fortschritt{display:flex;flex-direction:column;gap:var(--space-2xs)}
.lvq-finder__fortschrittzeile{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-s)}
.lvq-finder__schritt,
.lvq-finder__prozent{font-size:var(--text-2xs);font-weight:var(--fw-semibold);color:var(--c-muted)}
.lvq-finder__balken{
	height:.5rem;border-radius:var(--radius-pill);
	background:var(--paper-cool);overflow:hidden;
}
.lvq-finder__balken i{
	display:block;height:100%;border-radius:var(--radius-pill);
	background:var(--grad-lvq);transition:width .25s;
}

/* ---- Fragekarte ---- */
.lvq-finder__karte-frage{
	background:var(--c-surface);border:1px solid var(--c-border);
	border-radius:var(--radius-l);padding:var(--space-m);
	display:flex;flex-direction:column;gap:var(--space-s);
}
.lvq-finder__zaehler{
	font-size:var(--text-2xs);font-weight:var(--fw-bold);color:var(--k-lvq);
}
.lvq-finder__titel-frage{
	margin:0;font-size:var(--text-l);font-weight:var(--fw-bold);
	color:var(--c-heading);line-height:var(--lh-heading);text-wrap:balance;
}
/* 74ch statt 64: der laengste Untertitel braucht 837px, bei 64ch standen
   nur 748 zur Verfuegung und er brach in eine lange Zeile plus zwei Woerter.
   Wo es doch eng wird, teilt balance den Satz in gleich lange Zeilen. */
.lvq-finder__unter{
	margin:0;font-size:var(--text-xs);color:var(--c-muted);
	max-width:74ch;text-wrap:balance;
}

/* ---- Antworten ---- */
.lvq-finder__optionen{
	display:grid;grid-template-columns:repeat(auto-fit,minmax(26rem,1fr));
	gap:var(--space-s);
}
.lvq-finder__optionen[data-spalten="1"]{grid-template-columns:1fr}

.lvq-finder__option{
	display:flex;align-items:flex-start;gap:var(--space-s);text-align:left;
	background:var(--c-surface);border:1px solid var(--c-border);
	border-radius:var(--radius-m);padding:var(--space-s);
	font-family:inherit;cursor:pointer;
	transition:border-color .15s,background .15s;
}
.lvq-finder__option:hover{border-color:var(--k-lvq)}
.lvq-finder__option.ist-gewaehlt{
	border-color:var(--k-lvq);
	background:color-mix(in srgb, var(--k-lvq) 8%, var(--c-surface));
}

.lvq-finder__zeichen{
	flex:none;width:var(--k-ikon-l);height:var(--k-ikon-l);min-width:0;
	color:var(--k-lvq);display:block;margin-top:.2rem;
}
.lvq-finder__zeichen svg{width:100%;height:100%;min-width:0;display:block}

.lvq-finder__text{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.lvq-finder__label{
	font-size:var(--text-s);font-weight:var(--fw-bold);color:var(--c-heading);
	line-height:var(--lh-heading);
}
.lvq-finder__bs{font-size:var(--text-2xs);color:var(--c-muted);line-height:1.45}
.lvq-finder__zahl{font-size:var(--text-2xs);font-weight:var(--fw-semibold);color:var(--k-lvq)}

/* ---- Fusszeile ---- */
.lvq-finder__fuss{
	display:flex;align-items:center;justify-content:space-between;
	gap:var(--space-s);flex-wrap:wrap;
	border-top:1px solid var(--c-border);padding-top:var(--space-s);
}
.lvq-finder__zurueck{
	background:none;border:none;padding:0;font-family:inherit;cursor:pointer;
	font-size:var(--text-2xs);font-weight:var(--fw-semibold);color:var(--c-heading);
	display:inline-flex;align-items:center;gap:var(--space-2xs);
	transition:color .15s,opacity .15s;
}
.lvq-finder__zurueck:hover:not([disabled]){color:var(--k-lvq)}
.lvq-finder__zurueck[disabled]{opacity:.35;cursor:default}
.lvq-finder__zurueck svg{width:var(--k-ikon-s);height:var(--k-ikon-s);min-width:0;display:block}

.lvq-finder__haupt{
	background:var(--grad-lvq);color:var(--on-accent);border:none;
	border-radius:var(--radius-pill);padding:var(--space-xs) var(--space-l);
	font-family:inherit;font-size:var(--text-xs);font-weight:var(--fw-bold);
	line-height:1.25;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-2xs);
	transition:opacity .15s;
}
.lvq-finder__haupt:hover:not([disabled]){opacity:.9}
.lvq-finder__haupt[disabled]{opacity:.35;cursor:not-allowed}
/* Symbole in Knoepfen messen 1.25em statt eines festen Tokens. Die Schrift
   ist fluid, das Token waere es nicht - auf schmalen Fenstern waere das
   Symbol dann hoeher als die Textzeile und ein Knopf mit Symbol hoeher als
   einer ohne. 1.25em entspricht genau der Zeilenhoehe, damit sind alle
   Knoepfe gleich hoch, egal ob ein Symbol darin steht. Die --icon-Tokens
   gelten weiter fuer Symbole ausserhalb einer Textzeile. */
.lvq-finder__haupt svg{width:1.25em;height:1.25em;min-width:0;display:block}
/* Der Schraegpfeil ist eine gefuellte Form mit eigenem Raster und bleibt bei
   1em, waehrend die uebrigen Knopfsymbole 1.25em messen. So zeichnet ihn die
   Vorlage neben 16px Schrift, und seine Unterkante trifft die Grundlinie. */
.lvq-finder svg.lvq-pfeil{width:1em;height:1em}


/* ---- Ergebniskopf ---- */
.lvq-finder__ergebniskopf{display:flex;flex-direction:column;gap:var(--space-2xs)}
.lvq-finder__ergebniskopf h3{
	margin:0;font-size:var(--text-l);font-weight:var(--fw-bold);color:var(--c-heading);
	line-height:var(--lh-heading);
}
.lvq-finder__ergebniskopf p{margin:0;font-size:var(--text-xs);color:var(--c-muted)}

/* ---- Rueckblick auf die Antworten ---- */
.lvq-finder__rueckblick{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.lvq-finder__chip{
	background:var(--paper-cool);border:1px solid var(--c-border);color:var(--c-heading);
	border-radius:var(--radius-pill);padding:var(--space-2xs) var(--space-s);
	font-family:inherit;font-size:var(--text-2xs);font-weight:var(--fw-semibold);
	cursor:pointer;transition:border-color .15s,color .15s;
}
.lvq-finder__chip:hover{border-color:var(--k-lvq);color:var(--k-lvq)}

/* ---- Trefferliste ---- */
.lvq-finder__treffer{display:flex;flex-direction:column;gap:var(--space-xs)}

.lvq-finder__reihe{
	display:grid;grid-template-columns:auto 1fr auto auto;
	gap:var(--space-s) var(--space-m);align-items:center;
	background:var(--c-surface);border:1px solid var(--c-border);
	border-radius:var(--radius-l);padding:var(--space-s) var(--space-m);
}
.lvq-finder__reihe.ist-oben{border-color:var(--k-lvq)}

.lvq-finder__rang{
	flex:none;width:2.6rem;height:2.6rem;border-radius:var(--radius-pill);
	display:inline-flex;align-items:center;justify-content:center;
	background:var(--paper-cool);color:var(--c-muted);
	font-size:var(--text-2xs);font-weight:var(--fw-bold);
}
.lvq-finder__reihe.ist-oben .lvq-finder__rang{
	background:var(--grad-lvq);color:var(--on-accent);
}

.lvq-finder__mitte{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.lvq-finder__marke{font-size:var(--text-2xs);font-weight:var(--fw-semibold)}
.lvq-finder__marke[data-bereich="weiterbildung"]{color:var(--k-wb)}
.lvq-finder__marke[data-bereich="business-akademie"]{color:var(--k-biz)}
.lvq-finder__kurstitel{
	font-size:var(--text-s);font-weight:var(--fw-bold);color:var(--c-heading);
	line-height:var(--lh-heading);
}
.lvq-finder__meta{font-size:var(--text-2xs);color:var(--c-muted)}
.lvq-finder__termine{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-top:.2rem}
.lvq-finder__termin{
	background:var(--paper-cool);border:1px solid var(--c-border);color:var(--c-heading);
	border-radius:var(--radius-pill);padding:2px var(--space-xs);
	font-size:var(--text-2xs);font-weight:var(--fw-semibold);white-space:nowrap;
}

.lvq-finder__quote{display:flex;flex-direction:column;gap:.2rem;align-items:flex-end;flex:none}
.lvq-finder__prozentwert{font-size:var(--text-s);font-weight:var(--fw-bold);color:var(--k-lvq)}
.lvq-finder__quotelabel{font-size:var(--text-2xs);color:var(--c-muted)}
.lvq-finder__quotebalken{
	width:6rem;height:.4rem;border-radius:var(--radius-pill);
	background:var(--paper-cool);overflow:hidden;
}
.lvq-finder__quotebalken i{display:block;height:100%;background:var(--grad-lvq);border-radius:var(--radius-pill)}

.lvq-finder__tun{display:flex;flex-direction:column;gap:var(--space-2xs);flex:none}

.lvq-finder__zweit{
	background:none;border:1px solid var(--c-border);color:var(--c-heading);
	border-radius:var(--radius-pill);padding:calc(var(--space-xs) - 1px) var(--space-m);
	font-family:inherit;font-size:var(--text-xs);font-weight:var(--fw-semibold);
	line-height:1.25;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;
	justify-content:center;gap:var(--space-2xs);white-space:nowrap;
	transition:border-color .15s,color .15s;
}

/* Kursaufruf in einer Trefferzeile. Bewusst kleiner als die Knoepfe der
   Fusszeile und ohne Fuellung: die Zeile kommt zwanzigmal vor. Masse
   identisch mit .lvq-komb__slot-link im Kombinator. */
.lvq-finder__kursknopf{
	background:none;border:1px solid var(--c-border);color:var(--c-heading);
	border-radius:var(--radius-pill);
	padding:calc(var(--space-2xs) * .55 + 1px) var(--space-s);
	font-family:inherit;font-size:var(--text-2xs);font-weight:var(--fw-bold);
	text-decoration:none;display:inline-flex;align-items:center;
	justify-content:center;gap:var(--space-2xs);white-space:nowrap;
	transition:border-color .15s,color .15s;
}
.lvq-finder__kursknopf:hover{border-color:var(--k-lvq);color:var(--k-lvq)}
.lvq-finder__kursknopf svg{width:var(--k-ikon-s);height:var(--k-ikon-s);min-width:0;display:block}
.lvq-finder__zweit:hover{border-color:var(--k-lvq);color:var(--k-lvq)}
.lvq-finder__zweit svg{width:1.25em;height:1.25em;min-width:0;display:block}

.lvq-finder__leer{
	padding:var(--space-l);text-align:center;color:var(--c-muted);font-size:var(--text-xs);
	border:1px dashed var(--c-border);border-radius:var(--radius-l);
}
/* Aufklapper fuer die zweite Stufe. */
.lvq-finder__mehr{
	background:none;border:1px solid var(--c-border);color:var(--c-heading);
	border-radius:var(--radius-pill);padding:calc(var(--space-xs) - 1px) var(--space-m);
	font-family:inherit;font-size:var(--text-xs);font-weight:var(--fw-semibold);
	line-height:1.25;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-2xs);
	transition:border-color .15s,color .15s;
}
.lvq-finder__mehr:hover{border-color:var(--k-lvq);color:var(--k-lvq)}
.lvq-finder__mehr svg{width:1.25em;height:1.25em;min-width:0;display:block;transition:transform .15s}
.lvq-finder__mehr.ist-offen svg{transform:rotate(180deg)}
.lvq-finder__treffer[hidden]{display:none}
.lvq-finder__knoepfe{display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap}
/* Die Weiterfuehrung steht rechts, abgesetzt von den Nebenhandlungen. */
.lvq-finder__kombi{margin-left:auto;text-decoration:none}

/* Hinweise zur Finanzierung. Bewusst ohne farbigen Randstreifen links -
   die Toenung und das Symbol tragen die Unterscheidung. */
.lvq-finder__hinweis{
	display:flex;align-items:flex-start;gap:var(--space-s);
	border-radius:var(--radius-m);padding:var(--space-s) var(--space-m);
	font-size:var(--text-xs);line-height:1.5;color:var(--c-text);
}
.lvq-finder__hinweis p{margin:0}
.lvq-finder__hinweis strong{color:var(--c-heading);font-weight:var(--fw-bold)}
.lvq-finder__hinweiszeichen{flex:none;width:var(--k-ikon-l);height:var(--k-ikon-l);min-width:0;display:block}
.lvq-finder__hinweiszeichen svg{width:100%;height:100%;min-width:0;display:block}
.lvq-finder__hinweis[data-bereich="weiterbildung"]{
	background:color-mix(in srgb, var(--k-wb) 10%, var(--c-surface));
}
.lvq-finder__hinweis[data-bereich="weiterbildung"] .lvq-finder__hinweiszeichen{color:var(--k-wb)}
.lvq-finder__hinweis[data-bereich="business-akademie"]{
	background:color-mix(in srgb, var(--k-biz) 10%, var(--c-surface));
}
.lvq-finder__hinweis[data-bereich="business-akademie"] .lvq-finder__hinweiszeichen{color:var(--k-biz)}

@media(max-width:820px){
	.lvq-finder__reihe{grid-template-columns:auto 1fr;gap:var(--space-s)}
	.lvq-finder__quote{grid-column:2;align-items:flex-start}
	.lvq-finder__tun{grid-column:2;flex-direction:row}
}
@media(max-width:560px){
	.lvq-finder__optionen{grid-template-columns:1fr}
}