/* LVQ Kurs-Kombinator
   Nutzt ausschliesslich die Design-Variablen aus dem Bricks Style Manager.
   Wird dort eine Farbe, ein Radius oder ein Abstand geaendert, folgt das Tool. */

.lvq-komb{
	--k-lvq:var(--lvq);
	--k-lvq-2:var(--lvq-2);
	--k-wb:var(--weiterbildung);
	--k-biz:var(--business);
	--k-warn:var(--warning);
	--k-danger:var(--danger);
	--k-konflikt:var(--danger);
	/* Drei Symbolgroessen statt frei gewaehlter Werte. Die Ruecknahme-Werte
	   greifen nur, falls die Variablen im Style Manager fehlen. */
	--k-ikon-xs:var(--icon-xs,1.4rem);
	--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-l);
	color:var(--c-text);line-height:var(--lh-body);font-size:var(--text-m);
}
.lvq-komb *{box-sizing:border-box}

/* Waehrend des Theme-Wechsels stillgelegt. Die Uebergaenge sind fuer Hover
   gedacht, feuern aber bei jeder Wertaenderung - also auch, wenn Bricks die
   Farbvariablen tauscht. Sonst laufen Kursliste und Terminchips der uebrigen
   Oberflaeche sichtbar hinterher. */
.lvq-komb.ohne-uebergang *{transition:none!important}

/* Scrollbalken folgen dem Theme. Die Seite deklariert kein color-scheme,
   deshalb malt der Browser sie sonst immer hell - auch im Dark Mode. */
.lvq-komb__kurse,.lvq-komb__pakete,.lvq-komb__zeit{
	scrollbar-width:thin;scrollbar-color:var(--c-border) transparent;
}
.lvq-komb__kurse::-webkit-scrollbar,
.lvq-komb__pakete::-webkit-scrollbar,
.lvq-komb__zeit::-webkit-scrollbar{width:8px;height:8px}
.lvq-komb__kurse::-webkit-scrollbar-track,
.lvq-komb__pakete::-webkit-scrollbar-track,
.lvq-komb__zeit::-webkit-scrollbar-track{background:transparent}
.lvq-komb__kurse::-webkit-scrollbar-thumb,
.lvq-komb__pakete::-webkit-scrollbar-thumb,
.lvq-komb__zeit::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:var(--radius-pill)}
.lvq-komb__kurse::-webkit-scrollbar-thumb:hover,
.lvq-komb__pakete::-webkit-scrollbar-thumb:hover,
.lvq-komb__zeit::-webkit-scrollbar-thumb:hover{background:var(--c-muted)}

/* ---- Karten mit gefuelltem Kopf ---- */
.lvq-komb__karte{
	background:var(--c-surface);border:1px solid var(--c-border);
	border-radius:var(--radius-l);overflow:hidden;
}
.lvq-komb__kopf{
	/* Tonfestes Paar: --c-header bleibt in beiden Modi dunkelblau, --on-header
	   bleibt weiss. --on-accent waere hier falsch, es kippt im Dark Mode auf
	   fast schwarz und setzt eine helle Flaeche voraus. */
	background:var(--c-header);color:var(--on-header);
	padding:var(--space-s) var(--space-m);
	display:flex;align-items:center;justify-content:space-between;
	gap:var(--space-s);flex-wrap:wrap;
}
.lvq-komb__kopf h3{
	margin:0;font-size:var(--text-s);font-weight:var(--fw-bold);
	color:var(--on-header);line-height:var(--lh-heading);
}
.lvq-komb__kopf p{margin:var(--space-2xs) 0 0;font-size:var(--text-xs);opacity:.85}

/* ---- Planungskopf mit Zugang zu den Kombinationen ---- */
.lvq-komb__planungskopf{
	display:flex;align-items:center;justify-content:space-between;
	gap:var(--space-s);margin-bottom:var(--space-xs);flex-wrap:wrap;
}
.lvq-komb__planungstext{
	font-size:var(--text-xs);font-weight:var(--fw-semibold);color:var(--c-muted);
}
/* Der Zugang zu den Kombinationen ist ein Nebenweg, kein Hauptbefehl. Er darf
   im Kopf nicht so schwer wiegen wie die Aktion im Fuss - vorher war er mit
   57px sogar hoeher als "Auswahl anfragen" mit 55px. */
.lvq-komb__planungskopf .lvq-komb__zweit{
	font-size:var(--text-2xs);padding:var(--space-2xs) var(--space-s);
}

/* ---- Auswahlebene fuer die fertigen Kombinationen ----
   Natives dialog-Element: Fokusfalle, Escape und Hintergrund kommen vom Browser. */
.lvq-komb__ebene{
	border:none;padding:0;background:var(--c-surface);color:var(--c-text);
	border-radius:var(--radius-l);overflow:hidden;
	width:min(76rem,calc(100vw - 4rem));max-height:calc(100vh - 6rem);
	font-family:inherit;
}
.lvq-komb__ebene[open]{display:flex;flex-direction:column}
.lvq-komb__ebene::backdrop{background:rgba(0,0,0,.6)}
.lvq-komb__ebene-kopf{
	display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-s);
	background:var(--c-header);color:var(--on-header);
	padding:var(--space-s) var(--space-m);flex:none;
}
.lvq-komb__ebene-kopf h3{
	margin:0;font-size:var(--text-s);font-weight:var(--fw-bold);
	color:var(--on-header);line-height:var(--lh-heading);
}
.lvq-komb__ebene-kopf p{margin:var(--space-2xs) 0 0;font-size:var(--text-xs);opacity:.85}
.lvq-komb__ebene-zu{
	background:none;border:none;cursor:pointer;color:var(--on-header);flex:none;
	padding:var(--space-2xs);line-height:0;display:inline-flex;border-radius:var(--radius-xs);
}
.lvq-komb__ebene-zu svg{width:var(--k-ikon-m);height:var(--k-ikon-m);min-width:0;display:block}
/* Rueckfrage vor dem Ersetzen der Planung. Sitzt direkt unter dem Kopf,
   damit sie im Blick liegt, ohne die Kombinationsliste zu verdecken. */
.lvq-komb__ebene-frage{
	display:flex;align-items:center;justify-content:space-between;
	gap:var(--space-m);flex-wrap:wrap;flex:none;
	padding:var(--space-s) var(--space-m);
	background:var(--paper-cool);
	background:color-mix(in srgb, var(--k-lvq) 14%, var(--c-surface));
	border-bottom:2px solid var(--k-lvq);
	animation:lvq-komb-frage .18s ease-out;
}
@keyframes lvq-komb-frage{
	from{opacity:0;transform:translateY(-8px)}
	to{opacity:1;transform:none}
}
/* Im Dunkelmodus liegen Toenung und Dialogflaeche sonst nur 0,016 Helligkeit
   auseinander - gemessen; die Leiste war praktisch unsichtbar. Hell braucht
   die Anhebung nicht, dort ist der Abstand bereits 0,22. */
:root[data-brx-theme="dark"] .lvq-komb__ebene-frage{
	background:color-mix(in srgb, var(--k-lvq) 30%, var(--c-surface));
}
.lvq-komb__ebene-frage[hidden]{display:none}
/* Flex-Basis statt Textbreite: sonst bricht die Zeile um, BEVOR der Satz
   schrumpfen darf, und die Knoepfe rutschen darunter. Erst unter rund
   440px Innenbreite ist der Umbruch gewollt. */
.lvq-komb__ebene-frage p{
	margin:0;font-size:var(--text-xs);font-weight:var(--fw-semibold);
	color:var(--c-heading);flex:1 1 20rem;min-width:0;
}
.lvq-komb__ebene-frage-knoepfe{display:flex;gap:var(--space-xs);flex:none}
/* Die Leiste ist nur rund 87px hoch. Buttons in der Groesse der Haupt-
   handlung der Seite fuellen davon die halbe Hoehe und wirken deshalb zu
   schwer - dieselbe kompakte Stufe wie der Ausloeser im Planungskopf. */
.lvq-komb__ebene-frage-knoepfe .lvq-komb__zweit,
.lvq-komb__ebene-frage-knoepfe .lvq-komb__aktion{
	font-size:var(--text-2xs);padding:var(--space-2xs) var(--space-s);
}
/* Die angefragte Kombination bleibt sichtbar markiert, solange gefragt wird. */
.lvq-komb__paket.ist-gefragt{
	border-color:var(--k-lvq);background:var(--paper-cool);
	box-shadow:0 0 0 2px color-mix(in srgb, var(--k-lvq) 40%, transparent);
}
/* Waehrend gefragt wird, treten die uebrigen Kombinationen zurueck -
   damit sichtbar ist, worauf sich die Frage bezieht. */
.lvq-komb__pakete.ist-gefragt-modus .lvq-komb__paket:not(.ist-gefragt){opacity:.3}

/* Eigener Tooltip fuer die gekuerzten Kursnamen im Zeitplan. */
.lvq-komb__tipp{
	position:fixed;z-index:100;pointer-events:none;left:0;top:0;
	max-width:min(34rem, calc(100vw - 2rem));
	background:var(--c-header);color:var(--on-header);
	padding:var(--space-2xs) var(--space-xs);
	border-radius:var(--radius-xs);
	font-size:var(--text-2xs);font-weight:var(--fw-semibold);line-height:1.4;
	box-shadow:0 4px 14px rgba(0,0,0,.28);
	opacity:0;visibility:hidden;transition:opacity .12s;
}
.lvq-komb__tipp.ist-da{opacity:1;visibility:visible}
.lvq-komb__zeit-name{cursor:default}
.lvq-komb__ebene-filter{
	display:flex;flex-direction:column;gap:var(--space-2xs);flex:none;
	padding:var(--space-s) var(--space-m);
	border-bottom:1px solid var(--c-border);background:var(--paper-cool);
}
.lvq-komb__filterreihe{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.lvq-komb__filter{
	background:var(--c-surface);border:1px solid var(--c-border);color:var(--c-text);
	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,background .15s,color .15s;
}
.lvq-komb__filter:hover{border-color:var(--k-lvq);color:var(--k-lvq)}
.lvq-komb__filter.ist-aktiv{background:var(--k-lvq);border-color:var(--k-lvq);color:var(--on-accent)}

/* ---- Die Kombinationen selbst ---- */
.lvq-komb__pakete{
	display:grid;grid-template-columns:repeat(auto-fill,minmax(26rem,1fr));
	gap:var(--space-s);padding:var(--space-m);overflow-y:auto;flex:1;
}
.lvq-komb__paket{
	border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);
	border-radius:var(--radius-m);padding:var(--space-s);
	font-family:inherit;cursor:pointer;text-align:left;
	display:flex;flex-direction:column;gap:var(--space-2xs);
	transition:border-color .15s,background .15s;
}
.lvq-komb__paket:hover{border-color:var(--k-lvq);background:var(--paper-cool)}
.lvq-komb__paket-kopf{display:flex;align-items:center;gap:var(--space-2xs);flex-wrap:wrap}
.lvq-komb__paket-zahl{
	margin-left:auto;font-size:var(--text-2xs);font-weight:var(--fw-semibold);color:var(--c-muted);
}
.lvq-komb__paket-kurse{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.lvq-komb__paket-kurse li{
	font-size:var(--text-xs);font-weight:var(--fw-semibold);
	color:var(--c-heading);line-height:var(--lh-heading);
}

/* ---- Zweispalter ---- */
.lvq-komb__haupt{display:grid;grid-template-columns:minmax(280px,350px) 1fr;gap:var(--space-m);align-items:stretch}
/* Grid- und Flex-Kinder haben min-width:auto und dehnen sich auf ihre
   Inhaltsbreite. Ohne min-width:0 sprengt das breite Zeitplanraster damit
   die ganze Seite, statt in seinem eigenen Container zu scrollen. */
.lvq-komb > *,
.lvq-komb__haupt > *{min-width:0}
/* Die Seitenspalte ist eine Flex-Saeule: die Liste nimmt die Resthoehe ein
   und waechst damit automatisch mit der rechten Seite mit. */
aside.lvq-komb__karte{display:flex;flex-direction:column}
/* Frueher stapeln: sonst werden die Slots so schmal, dass der Kartenkopf umbricht. */
@media(max-width:1100px){.lvq-komb__haupt{grid-template-columns:1fr}}

/* ---- Filter-Reiter ---- */
.lvq-komb__reiter{display:flex;border-bottom:1px solid var(--c-border);background:var(--paper-cool)}
.lvq-komb__reiter button{
	/* 1 1 auto statt 1: der freie Platz wird auf die Inhaltsbreite addiert,
	   statt alle Reiter auf dieselbe Gesamtbreite zu zwingen. Sonst bekommt
	   der kurze Reiter "Alle" genauso viel Breite wie "Weiterbildung". */
	flex:1 1 auto;background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-1px;
	padding:var(--space-xs) calc(var(--space-2xs) * .6);font-family:inherit;font-size:var(--text-2xs);
	font-weight:var(--fw-semibold);color:var(--c-muted);cursor:pointer;
	display:flex;align-items:center;justify-content:center;gap:calc(var(--space-2xs) * .6);
}
.lvq-komb__reiter button:hover{color:var(--k-lvq)}
.lvq-komb__reiter button.ist-aktiv{color:var(--k-lvq);border-bottom-color:var(--k-lvq);background:var(--c-surface)}
.lvq-komb__zahl{
	color:var(--c-muted);font-size:var(--text-2xs);font-weight:var(--fw-bold);
	line-height:1;font-variant-numeric:tabular-nums;
}
.lvq-komb__reiter button.ist-aktiv .lvq-komb__zahl{color:var(--k-lvq)}

/* ---- Kursliste ---- */
.lvq-komb__suche{padding:var(--space-xs) var(--space-m);border-bottom:1px solid var(--c-border)}
.lvq-komb__suche input{
	width:100%;border:1px solid var(--c-border);border-radius:var(--radius-s);
	padding:var(--space-2xs) var(--space-xs);font-family:inherit;font-size:var(--text-xs);
	color:var(--c-text);background:var(--c-surface);line-height:1.4;
}
.lvq-komb__suche input:focus{outline:2px solid var(--k-lvq);outline-offset:1px;border-color:var(--k-lvq)}
.lvq-komb__kurse{flex:1 1 0;min-height:58rem;overflow-y:auto}
.lvq-komb__kurs{
	width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line-soft);
	padding:var(--space-s) var(--space-m);
	cursor:pointer;font-family:inherit;display:block;transition:background .15s;
}
.lvq-komb__kurs:hover{background:var(--paper-cool)}
.lvq-komb__kurs[disabled]{opacity:.4;cursor:not-allowed}
.lvq-komb__kurs.ist-gewaehlt{background:var(--paper-cool);opacity:.55;cursor:default}
.lvq-komb__kurs.ist-empfohlen{background:color-mix(in srgb,var(--k-wb) 6%,transparent)}
.lvq-komb__kurs-titel{
	display:block;font-size:var(--text-xs);font-weight:var(--fw-bold);
	color:var(--c-heading);line-height:var(--lh-heading);margin-bottom:var(--space-2xs);
}
.lvq-komb__kurs-meta{display:block;font-size:var(--text-2xs);color:var(--c-muted)}
.lvq-komb__leer{padding:var(--space-l);text-align:center;color:var(--c-muted);font-size:var(--text-xs)}

/* ---- Termin-Chips ---- */
.lvq-komb__chips{display:flex;flex-wrap:wrap;gap:var(--space-2xs);margin-top:0}
/* In den Kursplaetzen ist margin-top:0 gewollt - dort zaehlt jede Zeile.
   In der linken Liste klebten die Terminmarken damit an der Metazeile. */
.lvq-komb__kurs .lvq-komb__chips{margin-top:var(--space-2xs)}
.lvq-komb__chip{
	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);font-family:inherit;
	white-space:nowrap;line-height:1.6;
}
button.lvq-komb__chip{cursor:pointer;transition:background .15s,border-color .15s,color .15s}
button.lvq-komb__chip:hover{border-color:var(--k-lvq);color:var(--k-lvq)}
button.lvq-komb__chip.ist-aktiv{background:var(--k-slot-farbe);border-color:var(--k-slot-farbe);color:var(--on-accent)}
button.lvq-komb__chip.hat-konflikt{background:var(--k-konflikt);border-color:var(--k-konflikt);color:var(--on-accent)}

/* ---- Bereichs-Kennzeichnung ---- */
.lvq-komb__marke{
	display:inline-block;font-size:var(--text-2xs);font-weight:var(--fw-semibold);
}
/* Abstand nur dort, wo die Marke UEBER dem Titel steht. In Zeilen mit
   align-items:center wuerde ein margin-bottom sie sonst nach oben ziehen. */
.lvq-komb__kurs .lvq-komb__marke{margin-bottom:var(--space-2xs)}
/* Bereichsfarbe erscheint als Umriss, nie als Flaeche - ueberall gleich. */
.lvq-komb__marke[data-bereich="weiterbildung"]{color:var(--k-wb)}
.lvq-komb__marke[data-bereich="business-akademie"]{color:var(--k-biz)}
.lvq-komb__hinweis{
	display:inline-block;font-size:var(--text-2xs);font-weight:var(--fw-bold);
	color:var(--k-wb);margin-left:var(--space-2xs);
}

/* ---- Slots ---- */
.lvq-komb__slots{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-xs)}
@media(max-width:640px){
	.lvq-komb__slots{grid-template-columns:1fr}
	/* Titel und Legende untereinander: nebeneinander bleibt auf dem Handy
	   kein brauchbarer Platz fuer beides. */
	.lvq-komb__kopf{flex-direction:column;align-items:flex-start;gap:var(--space-2xs)}
	.lvq-komb__legende{gap:var(--space-xs)}
	.lvq-komb__zeit{padding:var(--space-s) var(--space-s)}
}
.lvq-komb__slot{
	--k-slot-farbe:var(--c-border);
	--k-slot-grad:var(--grad-lvq);
	background:var(--c-surface);border:2px dashed var(--c-border);
	border-radius:var(--radius-l);min-height:13rem;display:flex;flex-direction:column;
	overflow:hidden;
}
.lvq-komb__slot[data-bereich="weiterbildung"]{--k-slot-farbe:var(--k-wb);--k-slot-grad:var(--grad-weiterbildung)}
.lvq-komb__slot[data-bereich="business-akademie"]{--k-slot-farbe:var(--k-biz);--k-slot-grad:var(--grad-business)}
.lvq-komb__slot.ist-belegt{border-style:solid;border-color:var(--c-border)}
.lvq-komb__slot.hat-konflikt{border-color:var(--k-konflikt)}
.lvq-komb__slot-kopf{
	display:flex;align-items:center;justify-content:space-between;gap:var(--space-2xs);
	padding:var(--space-xs) var(--space-s);border-bottom:1px solid var(--line-soft);
}
/* Im Kartenkopf steht die Bereichsmarke neben der Kursnummer und spart eine Zeile. */
.lvq-komb__slot-kopf .lvq-komb__marke{margin-right:auto;align-self:center;white-space:nowrap}
.lvq-komb__slot-nr{
	font-size:var(--text-2xs);font-weight:var(--fw-bold);
	white-space:nowrap;color:var(--c-muted);
	display:inline-flex;align-items:center;gap:var(--space-2xs);
}
.lvq-komb__slot-punkt{width:.8rem;height:.8rem;border-radius:var(--radius-pill);display:block;flex:none}
.lvq-komb__slot-weg{
	background:none;border:none;cursor:pointer;color:var(--c-muted);
	padding:var(--space-2xs);border-radius:var(--radius-xs);line-height:0;
	display:inline-flex;align-items:center;justify-content:center;
	transition:color .15s,background .15s;
}
.lvq-komb__slot-weg svg{width:var(--k-ikon-s);height:var(--k-ikon-s);min-width:0;display:block}
.lvq-komb__slot-weg:hover{color:var(--k-danger);background:var(--paper-cool)}
.lvq-komb__slot-frei{
	flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
	padding:var(--space-l);color:var(--c-muted);font-size:var(--text-2xs);
}
.lvq-komb__slot-inhalt{padding:var(--space-xs) var(--space-s);display:flex;flex-direction:column;gap:var(--space-2xs);flex:1}
.lvq-komb__slot-titel{
	font-size:var(--text-s);font-weight:var(--fw-bold);color:var(--c-heading);
	line-height:var(--lh-heading);
}
.lvq-komb__slot-meta{font-size:var(--text-2xs);color:var(--c-muted)}
.lvq-komb__slot-label{
	font-size:var(--text-2xs);font-weight:var(--fw-bold);color:var(--c-muted);
	/* Kein eigener Abstand mehr: der gap der Karte steht ohnehin darueber,
	   zusammen ergab das den doppelten Abstand ueber und unter der Zeile. */
	margin-top:0;line-height:1.3;
}
.lvq-komb__slot-link{
	align-self:flex-end;margin-top:auto;text-decoration:none;
	background:var(--k-slot-grad);color:var(--on-accent);border-radius:var(--radius-s);
	padding:calc(var(--space-2xs) * .55 + 2px) var(--space-s);font-size:var(--text-2xs);font-weight:var(--fw-bold);
	display:inline-flex;align-items:center;gap:var(--space-2xs);
	transition:opacity .15s;
}
.lvq-komb__slot-link:hover{opacity:.9;color:var(--on-accent)}

/* ---- Zeitplan ---- */
/* Bewusst OHNE scroll-behavior:smooth. Nachgemessen: mit der Eigenschaft
   endet ein Sprung von 150px nach 3px, ohne sie kommen die vollen 150px an.
   Ein harter Monatssprung ist verlaesslich, eine Animation die nicht laeuft
   sieht aus wie ein kaputter Knopf. */
.lvq-komb__zeit{padding:var(--space-s) var(--space-m);overflow-x:auto}
/* Enger Abstand zwischen den Zellen: bei 14 Monaten sind das 13 Luecken,
   jede eingesparte Stelle geht direkt in die Spaltenbreite. */
.lvq-komb__zeit-raster{display:grid;gap:calc(var(--space-2xs) * .6);min-width:40rem;align-items:center}
.lvq-komb__zeit-monat{
	font-size:var(--text-2xs);font-weight:var(--fw-bold);color:var(--k-lvq);
	text-align:center;padding-bottom:var(--space-xs);
	border-bottom:2px solid var(--c-border);white-space:nowrap;
}
.lvq-komb__zeit-name{
	font-size:var(--text-2xs);font-weight:var(--fw-semibold);
	padding-right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Der native Scrollbalken ist ausgeblendet: er sieht je nach System anders
   aus und laesst sich nicht mit den Pfeilen in eine Reihe stellen. */
.lvq-komb__zeit{scrollbar-width:none}
/* Weiche Kante rechts, damit der Inhalt nicht hart an der Kartenkante
   abgeschnitten wirkt. Bewusst eine Maske statt eines deckenden Streifens:
   ein Streifen wuerde dauerhaft rund 2rem des Zeitplans verdecken. */
.lvq-komb__zeit.ist-scrollbar{
	-webkit-mask-image:linear-gradient(to right, black calc(100% - 2.4rem), transparent);
	mask-image:linear-gradient(to right, black calc(100% - 2.4rem), transparent);
}
.lvq-komb__zeit::-webkit-scrollbar{display:none}

/* Pfeile und Balken sitzen zusammen in einer Leiste unter dem Raster.
   Der Innenabstand links und rechts entspricht dem des Rasters, damit die
   Pfeile nicht am Kartenrand kleben. */
.lvq-komb__zeit-leiste{
	display:flex;align-items:center;gap:var(--space-s);
	padding:0 var(--space-m) var(--space-s);
}
.lvq-komb__zeit-leiste[hidden]{display:none}
.lvq-komb__zeit-leiste button{
	width:1.8rem;height:1.8rem;padding:0;flex:none;cursor:pointer;
	display:inline-flex;align-items:center;justify-content:center;
	background:none;border:none;color:var(--c-heading);
	transition:color .15s,opacity .15s;
}
.lvq-komb__zeit-leiste button:hover:not([disabled]){color:var(--k-lvq)}
.lvq-komb__zeit-leiste button[disabled]{opacity:.3;cursor:default}
/* min-width:0 ist noetig: als Flex-Kind hat das SVG min-width:auto und wird
   damit auf 19px hochgezogen, egal welche Breite gesetzt ist. */
.lvq-komb__zeit-leiste svg{width:var(--k-ikon-xs);height:var(--k-ikon-xs);min-width:0;display:block}
.lvq-komb__zeit-spur{
	flex:1;height:.6rem;position:relative;cursor:pointer;
	border-radius:var(--radius-pill);background:var(--paper-cool);
}
.lvq-komb__zeit-griff{
	position:absolute;top:0;left:0;height:100%;touch-action:none;cursor:grab;
	border-radius:var(--radius-pill);background:var(--c-border);
	transition:background .15s;
}
.lvq-komb__zeit-griff:hover{background:var(--c-muted)}
.lvq-komb__zeit-griff:active{cursor:grabbing;background:var(--c-muted)}

/* Die Kursspalte bleibt beim waagerechten Scrollen stehen - sonst weiss
   man nach zwei Monaten nicht mehr, zu welchem Kurs eine Zeile gehoert. */
.lvq-komb__zeit-name,
.lvq-komb__zeit-ecke{
	position:sticky;left:0;z-index:2;background:var(--c-surface);
	/* Voile Zeilenhoehe: das Raster zentriert seine Kinder, dadurch war der
	   Kasten nur so hoch wie sein Text und die Balken schauten oben und
	   unten heraus. */
	align-self:stretch;display:flex;align-items:center;
	/* Der Kasten sitzt wegen des Innenabstands 2rem vom Rand entfernt. Ohne
	   diesen Schatten scrollen die Balken in genau diesem Streifen sichtbar
	   darunter durch. Der overflow des Zeitplans beschneidet den Ueberstand. */
	box-shadow:-4rem 0 0 var(--c-surface);
}
.lvq-komb__zeit-zelle{
	height:2.8rem;border-radius:var(--radius-xs);background:var(--paper-cool);
	display:flex;align-items:center;justify-content:center;
}
/* Punkt fuer einen moeglichen Ausweichtermin in diesem Monat. */
.lvq-komb__zeit-punkt{
	width:.8rem;height:.8rem;border-radius:var(--radius-pill);display:block;opacity:.55;
}
.lvq-komb__zeit-balken{
	height:2.8rem;border-radius:var(--radius-xs);display:flex;align-items:center;
	justify-content:center;font-size:var(--text-2xs);font-weight:var(--fw-bold);
	color:var(--on-accent);white-space:nowrap;overflow:hidden;
	padding:0 calc(var(--space-2xs) * .5);text-overflow:ellipsis;
}
.lvq-komb__zeit-balken.hat-konflikt{background:var(--k-konflikt)!important}
/* Die Legende sass als eigene Reihe unter dem Zeitplan und kostete 57px.
   Im Kopf steht sie neben dem Titel und kostet nichts. */
.lvq-komb__legende{
	display:flex;gap:var(--space-s);flex-wrap:wrap;align-items:center;
	color:var(--on-header);font-size:var(--text-2xs);
}
.lvq-komb__karte--zeit{margin-top:var(--space-xs)}
.lvq-komb__legende span{display:flex;align-items:center;gap:var(--space-2xs);font-size:inherit;color:inherit}
/* Ring, weil Kurs 1 (--lvq) und Kurs 4 (--lvq-2) sonst auf der dunkelblauen
   Kopfzeile verschwinden - --lvq-2 und --c-header sind derselbe Farbwert. */
.lvq-komb__legende i{
	width:.85rem;height:.85rem;border-radius:var(--radius-pill);display:block;
	box-shadow:0 0 0 1px var(--on-header);
}

/* ---- Meldung ---- */
.lvq-komb__meldung{
	margin-top:var(--space-s);padding:var(--space-s);
	border-radius:var(--radius-m);font-size:var(--text-xs);font-weight:var(--fw-semibold);
	border:1px solid;
}
.lvq-komb__meldung[data-art="warnung"]{
	background:color-mix(in srgb,var(--k-warn) 10%,transparent);
	border-color:color-mix(in srgb,var(--k-warn) 35%,transparent);color:var(--c-text);
}
.lvq-komb__meldung[data-art="fehler"]{
	background:color-mix(in srgb,var(--k-danger) 10%,transparent);
	border-color:color-mix(in srgb,var(--k-danger) 35%,transparent);color:var(--c-text);
}
.lvq-komb__meldung[data-art="konflikt"]{
	background:color-mix(in srgb,var(--k-konflikt) 12%,transparent);
	border-color:color-mix(in srgb,var(--k-konflikt) 45%,transparent);color:var(--c-heading);
}
.lvq-komb__meldung[data-art="konflikt"] strong{color:var(--k-konflikt)}
.lvq-komb__meldung[data-art="info"]{
	background:color-mix(in srgb,var(--k-wb) 9%,transparent);
	border-color:color-mix(in srgb,var(--k-wb) 32%,transparent);color:var(--c-text);
}

/* ---- Zusammenfassung ---- */
.lvq-komb__tabelle{width:100%;border-collapse:collapse;font-size:var(--text-xs)}
.lvq-komb__tabelle th{
	text-align:left;padding:var(--space-xs) var(--space-m);color:var(--c-heading);
	font-weight:var(--fw-bold);
	background:var(--paper-cool);border-bottom:1px solid var(--c-border);font-size:var(--text-2xs);
}
.lvq-komb__tabelle td{padding:var(--space-s) var(--space-m);border-bottom:1px solid var(--line-soft)}
/* Der Kurstitel bekommt den freien Platz, die uebrigen Spalten schrumpfen auf
   ihren Inhalt. Sonst verteilt der Browser gleichmaessig und der Titel bricht um. */
.lvq-komb__tabelle th:not(:first-child),
.lvq-komb__tabelle td:not(:first-child){white-space:nowrap;width:1%}
.lvq-komb__tabelle th:last-child,
.lvq-komb__tabelle td:last-child{text-align:right}
.lvq-komb__tabelle tr:last-child td{border-bottom:none}
.lvq-komb__tabelle a{color:var(--k-lvq);font-weight:var(--fw-semibold);text-decoration:none}
.lvq-komb__tabelle a:hover{text-decoration:underline}
.lvq-komb__punkt{width:.7rem;height:.7rem;border-radius:var(--radius-pill);display:inline-block;margin-right:var(--space-2xs)}
.lvq-komb__fuss{
	display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);
	padding:var(--space-m);border-top:1px solid var(--c-border);
	background:var(--paper-cool);flex-wrap:wrap;
}
.lvq-komb__summe{font-size:var(--text-xs);color:var(--c-muted)}
.lvq-komb__summe strong{color:var(--c-heading);font-weight:var(--fw-bold)}
/* Eine Knopfgroesse fuer Kombinator und Kursfinder. Die feste Zeilenhoehe
   ist der Grund, warum beide gleich hoch sind: ohne sie richtet sich die
   Hoehe nach der Schrift und springt, sobald ein Symbol dazukommt. */
.lvq-komb__aktion{
	background:var(--grad);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;transition:opacity .15s;
	display:inline-flex;align-items:center;gap:var(--space-2xs);
}
/* 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-komb__aktion 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-komb svg.lvq-pfeil{width:1em;height:1em}

.lvq-komb__aktion:hover{opacity:.9}
.lvq-komb__aktion[disabled]{opacity:.4;cursor:not-allowed}
/* Zweitrangige Schaltflaechen: Kursplan sichern, Beratung. */
.lvq-komb__knoepfe{display:flex;align-items:center;gap:var(--space-xs);flex-wrap:wrap}
.lvq-komb__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;gap:var(--space-2xs);
	transition:border-color .15s,color .15s;
}
.lvq-komb__zweit svg{width:1.25em;height:1.25em;min-width:0;display:block}
.lvq-komb__zweit:hover{border-color:var(--k-lvq);color:var(--k-lvq)}
.lvq-komb__zweit[disabled]{opacity:.4;cursor:not-allowed}