/* =========================================================================
   LV Autismus – Veranstaltungen
   Nur auf Einzelansichten von Veranstaltungen und auf der Übersichtsseite geladen.

   Farben ausschließlich über die Kit-Variablen. Keine Hexwerte — sonst hängt
   dieses Stylesheet nicht mehr am Designsystem und bricht beim nächsten
   Token-Update.

   Die Schriftgrößen spiegeln bewusst die Skala aus dem Kit-CSS. Grund: Die dortigen
   Klassen (.medium, .small, .normal) sind Nachfahren-Selektoren und wirken nicht auf
   das Element, das die Klasse trägt. Für das hier erzeugte Markup wären sie damit
   wirkungslos.

   Keine Übergänge außer auf Hover und Fokus. Keine Transformationen, keine
   Einblendungen. Bewegung, die niemand ausgelöst hat, gibt es auf dieser Site nicht.
   ========================================================================= */

/* --- Bänder ------------------------------------------------------------- */

.lvat-band {
	display: block;
	width: 100%;
}

.lvat-band--mint {
	background-color: var(--e-global-color-hellgruen_hintergrund);
	color: var(--e-global-color-text);
}

.lvat-band--grey {
	background-color: var(--e-global-color-4695866);
	color: var(--e-global-color-text);
}

.lvat-band--alert {
	background-color: var(--e-global-color-orange_giants);
	color: var(--e-global-color-blau_english_violet);
}

.lvat-band__inner {
	max-width: var(--section-narrow, 62.5rem);
	margin-inline: auto;
}

.lvat-band__title {
	font-size: clamp(1.5rem, calc(1.25rem + 1.04vw), 2rem);
	line-height: 1.3;
	font-weight: 500;
	margin: 0 0 var(--gap-m) 0;
}

.lvat-band__subtitle {
	font-size: clamp(1.25rem, calc(1.12rem + 0.52vw), 1.5rem);
	line-height: 1.35;
	font-weight: 500;
	margin: var(--gap-l) 0 var(--gap-s) 0;
}

/* Zweite und weitere Überschrift innerhalb eines Bandes brauchen Luft nach oben. */
.lvat-band__inner > .lvat-band__title ~ .lvat-band__title {
	margin-top: var(--gap-l);
}

/* --- Kopfbereich der Detailseite ---------------------------------------- */

.lvat-head > * + * {
	margin-top: var(--gap-xs);
}

.lvat-subtitle {
	font-size: clamp(1.25rem, calc(1.12rem + 0.52vw), 1.5rem);
	line-height: 1.35;
}

/* Termin und Ort: die Teile stehen als eigene Zeilen, damit ein fehlender
   Teil kein hängendes Trennzeichen hinterlässt. */
.lvat-when,
.lvat-where {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--gap-s);
	margin: 0;
}

.lvat-when__date,
.lvat-when__time,
.lvat-where__line {
	display: block;
}

.lvat-where__line {
	flex-basis: 100%;
}

address.lvat-where {
	font-style: normal;
}

/* --- Status ------------------------------------------------------------- */

/* Farbe ist nie der alleinige Träger — der Text sagt dasselbe wie die Fläche. */
.lvat-status {
	margin: var(--gap-s) 0 0 0;
	font-weight: 600;
}

.lvat-status--alert {
	background-color: var(--e-global-color-orange_giants);
	color: var(--e-global-color-blau_english_violet);
	padding: var(--gap-s) var(--gap-m);
	border-radius: 4px;
}

.lvat-status__note {
	margin: var(--gap-xs) 0 0 0;
}

/* --- Hinweisband -------------------------------------------------------- */

.lvat-notice > :first-child {
	margin-top: 0;
}

.lvat-notice > :last-child {
	margin-bottom: 0;
}

.lvat-notice a {
	color: var(--e-global-color-blau_english_violet);
	text-decoration: underline;
}

/* --- Einladungstext ------------------------------------------------------ */

.lvat-invitation > :first-child {
	margin-top: 0;
}

.lvat-invitation > :last-child {
	margin-bottom: 0;
}

/* --- Programmablauf ----------------------------------------------------- */

.lvat-program {
	display: grid;
	grid-template-columns: minmax(6.5rem, max-content) 1fr;
	gap: var(--gap-s) var(--gap-l);
	margin: 0;
	font-size: clamp(1.13rem, calc(1.06rem + 0.26vw), 1.25rem);
	line-height: 1.6;
}

.lvat-program__time {
	font-weight: 600;
	margin: 0;
}

.lvat-program__item {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gap-xxs);
}

.lvat-program__title {
	font-weight: 600;
}

.lvat-program__note :first-child {
	margin-top: 0;
}

@media (max-width: 600px) {
	/* Einspaltig, damit die Zeitangabe nicht auf zwei Zeilen umbricht. */
	.lvat-program {
		grid-template-columns: 1fr;
		gap: var(--gap-xxs);
	}

	.lvat-program__item {
		margin-bottom: var(--gap-m);
	}
}

/* --- Tagesordnung ------------------------------------------------------- */

.lvat-agenda {
	margin: 0;
	padding-left: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: var(--gap-m);
}

.lvat-agenda__item {
	display: flex;
	flex-direction: column;
	gap: var(--gap-xxs);
}

.lvat-agenda__title {
	font-weight: 600;
}

/* --- Referent, Beteiligte ----------------------------------------------- */

.lvat-speaker > * + *,
.lvat-abstract > * + * {
	margin-top: var(--gap-xs);
}

.lvat-speaker__name {
	font-weight: 600;
	margin: 0;
}

.lvat-speaker__line {
	margin: 0;
}

.lvat-people {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gap-m);
}

.lvat-people__item {
	display: flex;
	flex-direction: column;
	gap: var(--gap-xxs);
}

.lvat-people__name {
	font-weight: 600;
}

/* --- Downloads ---------------------------------------------------------- */

.lvat-downloads {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gap-s);
}

.lvat-downloads__item {
	display: flex;
	flex-direction: column;
	gap: var(--gap-xxs);
}

.lvat-downloads__note {
	font-size: clamp(1rem, calc(0.93rem + 0.26vw), 1.13rem);
}

/* --- Links und Schaltflächen -------------------------------------------- */

.lvat-band a:not(.lvat-button) {
	color: var(--e-global-color-orange_flame);
	text-decoration: underline;
}

.lvat-band a:not(.lvat-button):hover {
	color: var(--e-global-color-a9f3c21);
}

.lvat-band--alert a:hover {
	color: var(--e-global-color-blau_english_violet);
}

.lvat-button {
	display: inline-block;
	background-color: var(--e-global-color-orange_flame);
	color: var(--e-global-color-8d1760f);
	text-decoration: none;
	/* Mindestens 44 px hoch, damit das Ziel auch mit ungenauer Bedienung sicher
	   getroffen wird. */
	padding: 0.75rem 1.5rem;
	min-height: 44px;
	line-height: 1.5;
	border-radius: 4px;
	font-weight: 600;
}

.lvat-button:hover,
.lvat-button:focus-visible {
	background-color: var(--e-global-color-a9f3c21);
	color: var(--e-global-color-8d1760f);
}

.lvat-hint {
	font-size: clamp(1rem, calc(0.93rem + 0.26vw), 1.13rem);
	margin-top: var(--gap-xxs);
}

/* --- Abstände innerhalb der Bänder -------------------------------------- */

.lvat-band__inner > * + * {
	margin-top: var(--gap-m);
}

.lvat-band__inner > .lvat-band__title + * {
	margin-top: 0;
}

/* --- Karte im Loop Grid ------------------------------------------------- */

/* Die Karte selbst wird in Elementor gestaltet. Hier stehen nur die Teile,
   die aus den Shortcodes kommen. */

.my-loop-card .lvat-when {
	font-weight: 600;
}

.my-loop-card .lvat-status {
	margin-top: var(--gap-xs);
}

.my-loop-card .lvat-status--alert {
	padding: var(--gap-xs) var(--gap-s);
}

.my-loop-card .lvat-card-link {
	margin-top: var(--gap-s);
}

.my-loop-card .lvat-card-link a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 1rem;
	color: var(--e-global-color-orange_flame);
	text-decoration: underline;
}

.my-loop-card .lvat-card-link a:hover,
.my-loop-card .lvat-card-link a:focus-visible {
	color: var(--e-global-color-a9f3c21);
}

/* --- Vergangene Veranstaltungen: Jahresgruppen -------------------------- */

/* Die Jahreszahl ist eine Zwischenueberschrift unter der H2 des Abschnitts.
   Groesse bewusst identisch mit .lvat-band__subtitle - es ist dieselbe Ebene,
   und eine neue Stufe in der Skala gaebe es dafuer nicht. */

/* Zwei Klassen im Selektor sind Absicht: Der Theme Style des Kits setzt
   .elementor-kit-357 h3 auf 1px (Spezifitaet 0-1-1). Eine einzelne Klasse
   verliert dagegen. Siehe CHANGELOG zu A10. */
.lvat-years__group .lvat-years__heading {
	font-size: clamp(1.25rem, calc(1.12rem + 0.52vw), 1.5rem);
	line-height: 1.35;
	font-weight: 600;
	margin: var(--gap-l) 0 var(--gap-m) 0;
}

.lvat-years__group:first-child .lvat-years__heading {
	margin-top: 0;
}

/* Liste statt loser Karten: Screenreader sagen damit an, wie viele
   Veranstaltungen unter dem Jahr stehen. Das Attribut role=list steht
   zusaetzlich im Markup, weil list-style: none die Listensemantik in
   Safari sonst entfernt. */
.lvat-years__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gap-l);
}

/* Karte fuellt die Zelle, damit nebeneinander stehende Karten gleich hoch sind. */
.lvat-years__item {
	display: flex;
}

.lvat-years__item > .elementor {
	display: flex;
	width: 100%;
}

.lvat-years__item > .elementor > .e-con {
	width: 100%;
}

@media (max-width: 767px) {
	.lvat-years__list {
		grid-template-columns: 1fr;
	}
}

/* Wird ausschliesslich vom JavaScript gesetzt. Ohne JavaScript wird nichts
   verborgen. !important, weil ein verborgenes Element verborgen bleiben muss,
   unabhaengig davon, welche display-Regel es sonst traegt. */
.lvat-is-hidden {
	display: none !important;
}

/* --- Schaltflaeche fuer die restlichen Veranstaltungen ------------------- */

/* Standard aus DESIGN-DIRECTION Abschnitt 3 (A9). Keine eigenen Farbwerte:
   die Hexwerte dort sind identisch mit diesen Token. Unterstrichen, weil auf
   dieser Site jede Schaltflaeche unterstrichen ist - Wiedererkennbarkeit vor
   typografischer Feinheit. */
button.lvat-more {
	display: inline-block;
	/* Hello Biz setzt fuer button white-space: nowrap. Bei grosser Schrift und
	   schmalem Viewport sprengt die Beschriftung sonst den Seitenrand und die
	   Seite scrollt seitwaerts. Deshalb Umbruch erlauben und die Breite deckeln. */
	white-space: normal;
	max-width: 100%;
	margin-top: var(--gap-l);
	background-color: var(--e-global-color-orange_flame);
	color: var(--e-global-color-8d1760f);
	border: 0;
	border-radius: 8px;
	padding: 0.75rem 1.5rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4em;
	font-weight: 500;
	text-decoration: underline;
	cursor: pointer;
}

button.lvat-more:hover,
button.lvat-more:focus-visible {
	background-color: var(--e-global-color-a9f3c21);
	color: var(--e-global-color-8d1760f);
}

.lvat-years__empty {
	margin: 0;
}

/* --- Einzelansicht: kompaktere Abschnittsabstände ----------------------- */

/* Gilt nur für die Veranstaltungs-Einzelansicht. Die Inhalte bleiben über
   .lvat-band__inner auf der bestehenden Lesebreite; reduziert wird allein
   der vertikale Innenabstand der sichtbaren Abschnitte. */
.single-veranstaltung .elementor-2505 .section-l {
	padding-block: clamp(1.25rem, calc(0.25rem + 3.25vw), 3.75rem);
}