/*
 * Kombinationskachel nach der Vorlage vom 25.09.2026 - gemeinsam fuer den
 * Kombinator ("Bewaehrte Kombinationen" unter dem Zeitplan) und das Popup auf
 * der Kursseite. Eine Quelle, eine Optik. Tokens ausschliesslich aus dem
 * Style Manager; die neutrale Segmentfarbe wird aus --lvq abgeleitet.
 */

.lvq-kacheln{
	/* Neutral = hellgrau, eigene Wahl = orange - so zeigt es die Vorlage der
	   Designerin (Docx 25.09.2026), im Kombinator wie auf der Kursseite.
	   Die blaue Variante aus dem HTML-Prototyp ist bewusst verworfen (29.09.). */
	--k-neutral:var(--c-border);
	--k-wahl:var(--weiterbildung);
	column-count:2;column-gap:var(--space-s);
}
@media(max-width:700px){.lvq-kacheln{column-count:1}}
.lvq-kacheln > *{min-width:0}

.lvq-kachel{
	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);
	width:100%;break-inside:avoid;margin-bottom:var(--space-s);
	color:var(--c-text);font-size:var(--text-xs);line-height:var(--lh-body);
	transition:opacity .15s,border-color .15s;
}
.lvq-kachel[hidden]{display:none}

.lvq-kachel__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-s)}
.lvq-kachel__name{
	margin:0;font-size:var(--text-s);font-weight:var(--fw-bold);color:var(--c-heading);
	line-height:var(--lh-heading);min-width:0;
}
.lvq-kachel__zahl{font-size:var(--text-2xs);color:var(--c-muted);white-space:nowrap;flex:none}

/* Ein Segment je Kurs. */
.lvq-kachel__balken{display:flex;gap:calc(var(--space-2xs) * .5)}
.lvq-kachel__balken i{flex:1;height:.6rem;border-radius:var(--radius-pill);background:var(--k-neutral)}
.lvq-kachel__balken i.ist-wahl{background:var(--grad-weiterbildung)}

/* Kursliste: Punkt, Titel, Startdatum. Der Titel darf brechen, das Datum nie. */
.lvq-kachel__kurse{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:calc(var(--space-2xs) * .8)}
.lvq-kachel__kurse li{
	display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-2xs);
	align-items:baseline;line-height:var(--lh-heading);
}
.lvq-kachel__punkt{
	width:.9rem;height:.9rem;border-radius:var(--radius-pill);background:var(--k-neutral);
	display:block;flex:none;align-self:center;
}
.lvq-kachel__kurse li.ist-wahl .lvq-kachel__punkt{background:var(--k-wahl)}
.lvq-kachel__titel{min-width:0;color:var(--c-text);hyphens:auto;overflow-wrap:anywhere}
.lvq-kachel__kurse li.ist-wahl .lvq-kachel__titel{color:var(--c-heading);font-weight:var(--fw-bold)}
.lvq-kachel__wahl{
	font-style:normal;font-weight:var(--fw-semibold);color:var(--k-wahl);
	font-size:var(--text-2xs);margin-left:calc(var(--space-2xs) * .5);white-space:nowrap;
}
.lvq-kachel__start{
	font-size:var(--text-2xs);color:var(--c-muted);white-space:nowrap;
	font-variant-numeric:tabular-nums;
}

.lvq-kachel__zeitraum{
	margin:0;padding-top:var(--space-s);border-top:1px solid var(--c-border);
	font-size:var(--text-2xs);color:var(--c-muted);
}
.lvq-kachel__zeitraum strong{color:var(--c-heading);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}

/* Ein Knopf je Kachel, Randstil wie in der Vorlage. Masse wie die
   sekundaeren Knoepfe im Kombinator, damit alles gleich hoch ist. */
.lvq-kachel__fuss{margin-top:auto;display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap}
.lvq-kachel__knopf[disabled]{opacity:.5;cursor:default;pointer-events:none}
.lvq-kachel__knopf{
	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;gap:var(--space-2xs);
	transition:border-color .15s,color .15s,background .15s;
}
.lvq-kachel__knopf:hover{border-color:var(--lvq);color:var(--lvq)}
.lvq-kachel__knopf:focus-visible{outline:2px solid var(--lvq);outline-offset:2px}

/* Rueckfrage-Modus im Kombinator: die angeklickte Kachel bleibt, die
   uebrigen treten zurueck. */
.lvq-kachel.ist-gefragt{border-color:var(--lvq)}
.lvq-kacheln.ist-gefragt-modus .lvq-kachel:not(.ist-gefragt){opacity:.3}

/* Groessen-Filter (Alle / 2 Kurse / ...), wie die Pillen in der Vorlage. */
.lvq-pillen{
	display:inline-flex;align-items:center;gap:calc(var(--space-2xs) * .5);
	border:1px solid var(--c-border);border-radius:var(--radius-pill);
	padding:calc(var(--space-2xs) * .5);background:var(--c-surface);flex:none;
}
.lvq-pillen button{
	appearance:none;background:none;border:none;border-radius:var(--radius-pill);
	padding:calc(var(--space-2xs) * .8) var(--space-s);font-family:inherit;
	font-size:var(--text-2xs);font-weight:var(--fw-semibold);color:var(--c-text);
	cursor:pointer;line-height:1.25;white-space:nowrap;transition:background .15s,color .15s;
}
.lvq-pillen button:hover{color:var(--lvq)}
.lvq-pillen button.ist-aktiv{background:var(--c-header);color:var(--on-header)}
.lvq-pillen button:focus-visible{outline:2px solid var(--lvq);outline-offset:1px}