/* =====================================================================
   LPS – Anpassungen am Produktkopf (.product-hero)
   Stand: 2026-10-14. Ergänzt main.css, ohne sie anzufassen.

   Ziel: Produktname über die ganze Breite, darunter links die Merkmale
   und rechts – auf gleicher Höhe – das Gerät, groß. Die Galerie läuft
   darunter als Karussell über die volle Inhaltsbreite: so viele Folien
   nebeneinander, wie in die Höhe des Streifens passen, mit Punkten und
   Pfeilen. Die zugehörigen Swiper-Einstellungen stehen in js/main.js,
   Abschnitt "Galerie im Produktkopf". Unter 1024 px bleibt alles wie
   gehabt.
   ===================================================================== */

/* Folien im Seitenverhältnis der Produktfotos (16:9), damit das Gerät
   nicht links und rechts beschnitten wird. */
.product-hero__gallery-slider .swiper-slide {
	aspect-ratio: 16 / 9;
}

/* Pfeile (main.js hängt sie an): auf schmalen Schirmen wird gewischt. */
.product-hero__gallery-nav {
	display: none;
}

@media (min-width: 1024px) {
	/* Raster: Zeile und Produktname über die ganze Breite; darunter die
	   Merkmale links und das Gerät rechts; dann Einsatzgebiete, Galerie.
	   Bleibt Höhe übrig (Kopf = Fensterhöhe), geht sie in die Gerätezeile,
	   Merkmale und Gerät bleiben darin mittig und damit auf einer Höhe. */
	.product-hero__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
		grid-template-rows: auto auto minmax(0, 1fr) auto auto;
		column-gap: clamp(2rem, 4vw, 5rem);
		row-gap: 0;
		padding-block-end: 2rem;
	}

	.product-hero__info {
		display: contents;
	}

	.product-hero__series {
		grid-area: 1 / 1 / 2 / 3;
	}

	.product-hero__title {
		grid-area: 2 / 1 / 3 / 3;
		width: auto;
		margin-block-end: .75rem;
	}

	.product-hero__features {
		grid-area: 3 / 1 / 4 / 2;
		align-self: center;
		max-width: 36rem;
		padding-block: .5rem;
	}

	/* Gerät: rechte Spalte, mittig zu den Merkmalen, immer ganz zu sehen.
	   Die Freisteller von laserworld.com sind inzwischen eng auf das Gerät
	   zugeschnitten (1024 × 356); ein fester Ausschnitt (früher 1024 × 420
	   für Dateien mit leerem Rand oben) schnitt breitere Bilder seitlich ab. */
	.product-hero__image {
		grid-area: 3 / 2 / 4 / 3;
		align-self: center;
		justify-self: stretch;
		width: 100%;
		align-items: center;
		justify-content: flex-end;
	}

	.product-hero__image img {
		width: 100%;
		height: auto;
		max-block-size: none;
		aspect-ratio: auto;
		object-fit: contain;
		object-position: 50% 50%;
	}

	.product-hero__usecases {
		grid-area: 4 / 1 / 5 / 3;
		align-self: start;
		padding-block: 1.25rem 0;
	}

	/* Galerie: Karussell über die ganze Inhaltsbreite. Die Höhe des
	   Streifens richtet sich nach dem Fenster, die Folienbreite folgt aus
	   dem Seitenverhältnis – große Schirme zeigen größere Bilder, kleine
	   mehr davon. Was über den Rand hinausreicht, bleibt verdeckt. */
	.product-hero__gallery {
		grid-area: 5 / 1 / 6 / 3;
		align-self: end;
		width: 100%;
		max-width: none;
		margin-inline: 0;
		margin-block-start: clamp(1.25rem, 3vh, 2.5rem);
		padding: 0;
		position: relative;
	}

	.product-hero__gallery-wrapper {
		height: clamp(11rem, 27vh, 24rem);
		overflow: hidden;
		border-radius: .5rem;
	}

	.product-hero__gallery-slider {
		height: 100%;
		overflow: hidden;
	}

	.product-hero__gallery-slider .swiper-wrapper {
		height: 100%;
	}

	.product-hero__gallery-slider .swiper-slide {
		width: auto;
		height: 100%;
		box-shadow: none;
	}

	/* Fußzeile des Karussells: Punkte links, Pfeile rechts. */
	.product-hero__gallery-pagination {
		min-height: 2.75rem;
		align-items: center;
		justify-content: flex-start;
		margin-block-start: .75rem;
		padding-inline-end: 7.5rem;
	}

	.product-hero__gallery-nav {
		position: absolute;
		inset-inline-end: 0;
		inset-block-end: 0;
		display: flex;
		gap: .75rem;
	}

	.product-hero__gallery-prev,
	.product-hero__gallery-next {
		display: grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border: 1px solid rgb(255 255 255 / .6);
		border-radius: 50%;
		background: transparent;
		color: #fff;
		cursor: pointer;
		transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
	}

	.product-hero__gallery-prev svg,
	.product-hero__gallery-next svg {
		width: 1.1rem;
		height: 1.1rem;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.product-hero__gallery-prev svg {
		transform: rotate(180deg);
	}

	.product-hero__gallery-prev:is(:hover, :focus-visible),
	.product-hero__gallery-next:is(:hover, :focus-visible) {
		background-color: #fff;
		border-color: #fff;
		color: var(--color-ink);
	}

	.product-hero__gallery-prev.swiper-button-disabled,
	.product-hero__gallery-next.swiper-button-disabled {
		opacity: .3;
		pointer-events: none;
	}
}

@media (min-width: 1600px) {
	.product-hero__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	}
}

/* =====================================================================
   Produktseite: Beschreibung unter dem Kopf (.vorteile-features__intro)
   Der Text kommt als Fließtext mit Zeilenumbrüchen aus der Produktdaten-
   bank, sein Umfang ist je Gerät verschieden. Statt zentriert steht er
   linksbündig; ab etwa 1100 px Fensterbreite verteilt er sich von selbst
   auf zwei gleich hohe Spalten (column-width), darunter bleibt es eine.
   Eine zweite Spalte entsteht nur, wenn jede mindestens 32 rem breit sein
   kann – rund 55 Zeichen je Zeile, gut lesbar.
   ===================================================================== */
.vorteile-features__intro {
	text-align: start;
	hyphens: auto;
	text-wrap: pretty;
	columns: 32rem 2;
	column-gap: clamp(2rem, 4vw, 4rem);
	column-fill: balance;
}

/* =====================================================================
   Produktseite: „Andere Geräte aus der Serie“ ohne Leistungs-Plakette
   Stand: 2026-10-14. Die Plakette („30 Watt“) kommt aus
   html/com_content/article/default_product.php und soll nicht
   erscheinen. Ohne sie rückt das Gerätebild auf halben Abstand nach
   oben – main.css hält über dem Bild Platz für die Plakette frei,
   sonst bliebe dort ein leerer Kopf.
   ===================================================================== */
.andere-geraete__card-badge {
	display: none;
}

.andere-geraete__card-image {
	margin-block-start: calc(var(--fluid-space) * 1.5);
}

/* =====================================================================
   Rechtstexte (Datenschutzerklärung, Impressum): .legal-text
   Stand: 2026-10-14. main.css gestaltet dort h2, h3, p, ul, address
   und Links; es fehlen Tabellen (Cookie-Übersichten), eine vierte
   Überschriftenebene und etwas Abstand-Feinschliff.
   ===================================================================== */
.legal-text h4 {
	font-size: var(--text-body);
	font-weight: 700;
	line-height: 1.4;
	margin: 1.75rem 0 .5rem;
}

/* Folgt eine Zwischenüberschrift direkt auf die Abschnittsüberschrift,
   rückt sie näher an sie heran. */
.legal-text h2 + h3 {
	margin-block-start: 1.25rem;
}

.legal-text h3 + h4 {
	margin-block-start: 1rem;
}

.legal-text table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	font-size: var(--text-body);
	line-height: 1.5;
}

.legal-text th,
.legal-text td {
	padding: .6rem 1rem .6rem 0;
	border-bottom: 1px solid rgb(25 26 28 / .15);
	text-align: start;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.legal-text th {
	font-weight: 700;
	border-bottom-color: var(--color-ink);
}

.legal-text th:last-child,
.legal-text td:last-child {
	padding-inline-end: 0;
}

/* =====================================================================
   Impressum (.impressum) – Rechtsseite im Layout „legal“
   Stand: 2026-10-14. Der Beitrag (ID 8) liefert das Markup: eine helle
   Anbieterkarte (Firma, Anschrift, Kontakt), darunter die Pflichtangaben
   als zweispaltiges Raster, zum Schluss Haftungs- und Markenhinweis in
   Lesebreite. Ab 768 px stehen Anschrift und Kontakt nebeneinander.

   Die Selektoren beginnen mit .legal-text, weil main.css p, ul, li und
   address unter .legal-text mit zwei Teilen (Klasse + Element) gestaltet;
   eine Klasse allein käme dagegen nicht an.
   ===================================================================== */

/* Die Rechtsseite ist auf 48 rem Lesebreite ausgelegt; Karte und Raster
   brauchen etwas mehr Platz. Der Hinweistext bleibt bei 48 rem. */
.legal-text__inner:has(> .impressum) {
	max-width: 64rem;
}

.legal-text .impressum__card {
	position: relative;
	display: grid;
	gap: 2rem;
	padding: clamp(1.5rem, 3vw, 2.75rem);
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
	background-color: var(--color-surface);
	border-radius: .75rem;
	overflow: hidden;
}

/* Farbbalken links in den Markenfarben. */
.legal-text .impressum__card::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: .375rem;
	background: linear-gradient(180deg, #e84d4d 0%, #233862 60%, #2d487c 100%);
}

@media (min-width: 768px) {
	.legal-text .impressum__card {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: 3rem;
	}
}

.legal-text .impressum__label,
.legal-text .impressum__fact-label {
	margin: 0 0 .5rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--color-muted);
}

.legal-text .impressum__company {
	margin: 0 0 .75rem;
	font-family: var(--font-display);
	font-size: max(1.5rem, calc(var(--type-unit) * 2));
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.1;
}

.legal-text .impressum__adresse {
	margin: 0;
	font-style: normal;
	font-size: var(--text-body);
	line-height: 1.6;
}

.legal-text .impressum__contact {
	margin: 0;
	padding: 0;
	list-style: none;
}

.legal-text .impressum__contact li {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	margin: 0 0 .75rem;
	font-size: var(--text-body);
	line-height: 1.5;
}

.legal-text .impressum__contact li:last-child {
	margin-block-end: 0;
}

/* Symbol je Zeile als Maske – so färbt es sich mit der Textfarbe. */
.legal-text .impressum__contact li::before {
	content: '';
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	align-self: center;
	background-color: var(--color-red);
	-webkit-mask: var(--impressum-icon) center / contain no-repeat;
	mask: var(--impressum-icon) center / contain no-repeat;
}

.impressum__contact--tel {
	--impressum-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.impressum__contact--fax {
	--impressum-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E");
}

.impressum__contact--mail {
	--impressum-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

.impressum__contact--web {
	--impressum-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
}

.legal-text .impressum__contact-label {
	flex: none;
	min-width: 3.75rem;
	color: var(--color-muted);
}

.legal-text .impressum__contact a {
	color: inherit;
	text-decoration: none;
	transition: color .2s;
}

.legal-text .impressum__contact a:is(:hover, :focus-visible) {
	color: var(--color-red);
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* Pflichtangaben: zweispaltig ab 768 px, je Eintrag eine Haarlinie oben.
   Eine Liste statt <dl>, weil TinyMCE die Gruppen-<div>s in einer
   Definitionsliste entfernt; ein Eintrag ist <li> mit Label und Wert. */
.legal-text .impressum__facts {
	display: grid;
	gap: 0 clamp(2rem, 4vw, 3.5rem);
	margin: 0 0 clamp(2.5rem, 5vw, 4rem);
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.legal-text .impressum__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.legal-text .impressum__fact {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding-block: 1.125rem 1.25rem;
	border-top: 1px solid rgb(25 26 28 / .14);
	line-height: 1.5;
}

.legal-text .impressum__fact-value {
	font-size: max(1.0625rem, calc(var(--type-unit) * 1.25));
	font-weight: 500;
	line-height: 1.5;
}

/* Hinweise in Lesebreite, Überschriften wie auf den anderen Rechtsseiten. */
.legal-text .impressum__notes {
	max-width: 48rem;
}

.legal-text .impressum__notes h2:first-child {
	margin-block-start: 0;
}

/* ==========================================================================
   Laserworld Academy (com_academy, mod_academy_events, mod_academy_registration)

   Die Erweiterungen sind für Bootstrap-5-Templates geschrieben. lps26 lädt
   kein Bootstrap, und Tailwinds Preflight setzt Abstände, Listen und
   Überschriften zurück — ohne diesen Block stehen die Karten untereinander,
   w-100 ist Tailwinds 25rem statt 100 %, und die Beschreibungen laufen
   ohne Absätze ineinander. Hier stehen nur die Bootstrap-Klassen, die die
   Erweiterungen benutzen, beschränkt auf ihre Container, dazu Farben für
   dunkle Seiten: die mitgelieferten Stylesheets gehen von hellem Grund aus
   (#333-Text, #eee- und #dcdcdc-Kästen).

   Alles beginnt mit .site (Körperklasse): events.css und academy.css
   kommen nach user.css und tragen zwei Klassen, eine mehr gewinnt.
   Die Farben leiten sich aus currentColor ab, damit dieselben Regeln auf
   hellem Grund taugen, falls die Terminliste dort einmal steht.
   ========================================================================== */

.site :is(.mod-academy-events, .com-academy-detail) {
	--academy-line: color-mix(in srgb, currentColor 18%, transparent);
	--academy-panel: color-mix(in srgb, currentColor 4%, transparent);
	--academy-muted: color-mix(in srgb, currentColor 66%, transparent);
	--academy-gap: clamp(1rem, 1.6vw, 1.5rem);
}

/* Freier Text (Modul „Eigener Inhalt") direkt in einer Abschnittsposition:
   ohne eigenen Container stünde er randlos unter der Navigation. */
.site #main-content > .mod-custom {
	width: 100%;
	max-width: var(--container-site);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	padding-block-start: calc(var(--fluid-unit) * 4);
}

.site #main-content > .mod-custom :is(p, ul, ol) {
	margin: 0 0 1em;
	font-size: var(--text-lead);
	line-height: 1.385;
}

.site #main-content > .mod-custom :is(p, ul, ol):last-child {
	margin-block-end: 0;
}

/* Modultitel (Override html/mod_custom) und Überschriften im Text groß
   wie die Titel auf Support und Über uns; der Text bleibt Fließtext. */
.site #main-content > .mod-custom :is(.mod-custom__title, h1, h2),
.site .com-academy-list > .page-header,
.site .com-academy-detail .academy-title {
	max-width: 36ch;
	margin: 0 0 calc(var(--fluid-unit) * 1.5);
	font-family: var(--font-display);
	font-size: clamp(1.625rem, calc(var(--type-unit) * 3.75), 3.5rem);
	font-weight: 700;
	line-height: 1.1;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Auf der Terminseite trägt der Termin die Überschrift; der Text der
   Übersicht steht als Zeile darüber. */
.site.com_academy.view-detail #main-content > .mod-custom :is(.mod-custom__title, h1, h2, p) {
	max-width: none;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-meta);
	font-weight: 500;
	line-height: 1.4;
	color: color-mix(in srgb, currentColor 66%, transparent);
}

.site .com-academy-list,
.site .com-academy-detail {
	padding-block: calc(var(--fluid-unit) * 3) var(--support-pad, calc(var(--fluid-space) * 7.625));
}

/* ---- Terminliste: Raster (row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3) ---- */

.site .mod-academy-events .row {
	display: grid;
	grid-template-columns: repeat(var(--academy-cols, 1), minmax(0, 1fr));
	gap: var(--academy-gap);
	margin: 0;
	padding: 0;
}

.site .mod-academy-events .row-cols-2 { --academy-cols: 2; }
.site .mod-academy-events .row-cols-3 { --academy-cols: 3; }

@media (min-width: 768px) {
	.site .mod-academy-events .row-cols-md-2 { --academy-cols: 2; }
	.site .mod-academy-events .row-cols-md-3 { --academy-cols: 3; }
}

@media (min-width: 992px) {
	.site .mod-academy-events .row-cols-lg-2 { --academy-cols: 2; }
	.site .mod-academy-events .row-cols-lg-3 { --academy-cols: 3; }
	.site .mod-academy-events .row-cols-lg-4 { --academy-cols: 4; }
}

.site .mod-academy-events .col {
	min-width: 0;
}

/* ---- Terminliste: Karten wie die Kacheln im Mega-Menü ---- */

.site .mod-academy-events .card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background-color: var(--academy-panel);
	border: 1px solid var(--academy-line);
	border-radius: 5px;
	overflow: hidden;
	transition: border-color .2s;
}

.site .mod-academy-events .card:is(:hover, :focus-within) {
	border-color: var(--color-red);
}

.site .mod-academy-events .academy-card-title {
	min-height: 0;
	padding: 1.25rem 1.5rem 1rem;
	background: none;
	border-bottom: 1px solid var(--academy-line);
}

.site .mod-academy-events .academy-card-title a {
	color: inherit;
}

.site .mod-academy-events .academy-card-title a span {
	/* Zwei Zeilen Platz, damit die Karten einer Reihe meist gleich hoch beginnen */
	min-height: calc(2 * 1.15em);
	font-family: var(--font-display);
	font-size: var(--text-card);
	font-weight: 700;
	line-height: 1.15;
	color: inherit;
	transition: color .2s;
}

.site .mod-academy-events .academy-card-title a:is(:hover, :focus-visible) span {
	color: var(--color-red);
	text-decoration: none;
}

.site .mod-academy-events .card-body {
	flex: 1 1 auto;
	padding: 1.25rem 1.5rem 1.5rem;
}

.site .mod-academy-events .d-flex { display: flex; }
.site .mod-academy-events .flex-column { flex-direction: column; }
.site .mod-academy-events .h-100 { height: 100%; }
.site .mod-academy-events .mt-auto { margin-top: auto; }
.site .mod-academy-events .w-100 { width: 100%; }

.site .mod-academy-events .academy-card-date {
	font-size: var(--text-headline);
}

.site .mod-academy-events :is(.academy-card-mode, .academy-card-exam, .academy-meta-label, .academy-card-vat, .academy-noresult) {
	color: var(--academy-muted);
}

.site .mod-academy-events .academy-card-meta {
	font-size: .9375rem;
}

.site .mod-academy-events .academy-card-price {
	margin: 1rem 0 .875rem;
	font-size: var(--text-headline);
}

.site .mod-academy-events .academy-card-vat {
	font-size: .8125rem;
}

/* ---- Schaltflächen: Grundform kommt von .btn des Templates ---- */

.site .mod-academy-events .btn {
	padding: .8125rem 1.25rem;
	white-space: normal;
}

/* Anmelden; „Wenige Plätze" sagt es im Text, Orange gibt es im Haus nicht */
.site .mod-academy-events :is(.btn-primary, .btn-warning) {
	color: #fff;
	background-color: var(--color-red);
	border-color: var(--color-red);
}

.site .mod-academy-events :is(.btn-primary, .btn-warning):is(:hover, :focus-visible) {
	color: #fff;
	background-color: #d33f3f;
	border-color: #d33f3f;
}

/* Ausgebucht, heute */
.site .mod-academy-events .btn-secondary {
	color: var(--academy-muted);
	background-color: transparent;
	border-color: var(--academy-line);
}

.site .mod-academy-events .btn.disabled {
	cursor: default;
	pointer-events: none;
}

.site .mod-academy-events .alert {
	padding: 1rem 1.25rem;
	border: 1px solid #f7aa00;
	border-radius: 5px;
}

/* ---- Terminseite ---- */

.site .com-academy-detail {
	font-size: var(--text-body);
	line-height: 1.5;
}

.site .com-academy-detail .academy-title {
	max-width: none;
	padding: 0;
	margin-block-end: calc(var(--fluid-unit) * 2.5);
	color: inherit;
	background: none;
	border-radius: 0;
}

.site .com-academy-detail .academy-eventbox {
	padding: clamp(1.25rem, 2vw, 2rem);
	margin-block-end: calc(var(--fluid-unit) * 3);
	background-color: var(--academy-panel);
	border-color: var(--academy-line);
}

.site .com-academy-detail .academy-eventbox p {
	margin: 0 0 .25rem;
}

.site .com-academy-detail .academy-date-day,
.site .com-academy-detail .academy-price-value {
	font-size: var(--text-headline);
}

.site .com-academy-detail :is(.academy-date-time, .academy-date-label, .academy-flag-label) {
	color: var(--academy-muted);
}

.site .com-academy-detail .academy-price small {
	margin-block-start: .125rem;
	font-size: .8125rem;
	color: var(--academy-muted);
}

/* Auch „Wenige Plätze": academy.css färbt sie gelb mit schwarzer Schrift */
.site .com-academy-detail .academy-btn {
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .8125rem 1.5rem;
	font-size: var(--text-meta);
	line-height: 1.2;
	background-color: var(--color-red);
	border-color: var(--color-red);
	border-radius: .25rem;
	transition: background-color .2s, border-color .2s;
}

.site .com-academy-detail .academy-btn:is(:hover, :focus-visible) {
	background-color: #d33f3f;
	border-color: #d33f3f;
	text-decoration: none;
}

.site .com-academy-detail .academy-btn-muted,
.site .com-academy-detail .academy-btn-muted:hover {
	color: var(--academy-muted) !important;
	background-color: transparent;
	border-color: var(--academy-line);
}

.site .com-academy-detail .academy-streamlink,
.site .com-academy-detail .academy-collapse {
	padding: 1.25rem 1.5rem;
	background-color: var(--academy-panel);
	border: 1px solid var(--academy-line);
	border-radius: 5px;
}

.site .com-academy-detail .academy-collapse summary {
	font-size: var(--text-meta);
	transition: color .2s;
}

.site .com-academy-detail .academy-collapse summary:hover {
	color: var(--color-red);
}

.site .com-academy-detail .academy-collapse[open] summary {
	margin-block-end: 1rem;
}

.site .com-academy-detail .academy-map iframe {
	border-color: var(--academy-line);
}

/* Beschreibungen aus der Academy-Datenbank: Absätze, Zwischentitel und
   Listen wie im Fließtext auf Support, über die volle Breite des Kastens. */
.site .com-academy-detail :is(.academy-shortdesc, .academy-detaildesc, .academy-collapse) {
	font-size: max(1.0625rem, calc(var(--type-unit) * 1.25));
	line-height: 1.55;
}

.site .com-academy-detail .academy-shortdesc {
	font-size: var(--text-lead);
	line-height: 1.385;
}

.site .com-academy-detail :is(.academy-shortdesc, .academy-detaildesc, .academy-collapse) :is(p, ul, ol) {
	margin: 0 0 1em;
}

.site .com-academy-detail :is(.academy-detaildesc, .academy-collapse) :is(h2, h3, h4) {
	margin: 1.75em 0 .5em;
	font-family: var(--font-sans);
	font-size: var(--text-headline);
	font-weight: 700;
	line-height: 1.3;
}

/* Der Text aus der Datenbank setzt vor Zwischentitel oft noch zwei <br> */
.site .com-academy-detail .academy-detaildesc br + :is(h2, h3, h4) {
	margin-block-start: .5em;
}

.site .com-academy-detail :is(.academy-shortdesc, .academy-detaildesc, .academy-collapse) :is(ul, ol) {
	padding-inline-start: 1.25em;
}

.site .com-academy-detail :is(.academy-shortdesc, .academy-detaildesc, .academy-collapse) ul { list-style: disc outside; }
.site .com-academy-detail :is(.academy-shortdesc, .academy-detaildesc, .academy-collapse) ol { list-style: decimal outside; }

.site .com-academy-detail :is(.academy-shortdesc, .academy-detaildesc, .academy-collapse) li + li {
	margin-block-start: .35em;
}

.site .com-academy-detail :is(.academy-shortdesc, .academy-detaildesc, .academy-collapse) a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .15em;
	transition: color .2s;
}

.site .com-academy-detail :is(.academy-shortdesc, .academy-detaildesc, .academy-collapse) a:is(:hover, :focus-visible) {
	color: var(--color-red);
}

/* ---- Anmeldeformular: bringt sein eigenes helles Design mit, hier nur
   Abstand, Schrift und die Hausfarbe statt Orange ---- */

.site .mod-academy-registration {
	--academy-accent: var(--color-red);
	margin-block-start: calc(var(--fluid-unit) * 3);
}

.site .mod-academy-registration .academy-reg-title {
	font-family: var(--font-display);
	font-weight: 700;
}

.site .mod-academy-registration :is(.academy-reg-intro, .academy-reg-notice, .academy-reg-legaltext) :is(p, ul, ol) {
	margin: 0 0 .75em;
}

.site .mod-academy-registration :is(.academy-reg-notice, .academy-reg-legaltext) ul {
	padding-inline-start: 1.25em;
	list-style: disc outside;
}

/* ==========================================================================
   Download Manager (com_downloadmanager und seine Module)

   Dieselbe Erweiterung und Datenbank wie auf laserworld.com und
   showcontroller.com, dort mit Bootstrap-5-Templates. downloadmanager.css
   bringt nur Farben und Kästen mit und überlässt Raster, Abstände und
   Schaltflächen den Bootstrap-Klassen im Markup; lps26 hat kein Bootstrap.
   Ohne diesen Block ist die Zeile ein Inline-Link (grauer Grund nur hinter
   dem Text, weiße Schrift darauf, unterstrichen), und die Downloadseite ist
   weiß, mit weißem Kopf darüber.

   Hier: die benutzten Bootstrap-Klassen, beschränkt auf .dlm, mit
   Bootstraps eigenen Gutter-Variablen (--bs-gutter-x/-y), auf die
   downloadmanager.css schon rechnet. Die Farben der Erweiterung werden über
   ihre eigenen Variablen gesetzt und aus currentColor gemischt: auf dunklem
   Grund dunkle Zeilen, auf hellem graue wie auf showcontroller.com.
   Die Erweiterung selbst bleibt unverändert.
   ========================================================================== */

.site .dlm {
	--dlm-row-bg: color-mix(in srgb, currentColor 4%, transparent);
	--dlm-row-bg-alt: color-mix(in srgb, currentColor 10%, transparent);
	--dlm-row-bg-hover: color-mix(in srgb, currentColor 14%, transparent);
	--dlm-border: color-mix(in srgb, currentColor 18%, transparent);
	--dlm-border-strong: color-mix(in srgb, currentColor 40%, transparent);
	--dlm-muted: color-mix(in srgb, currentColor 66%, transparent);
	--dlm-accent: var(--color-red);
	--dlm-button-bg: var(--color-red);
	--dlm-button-bg-hover: #d33f3f;
	--dlm-button-fg: #fff;
}

/* Die Downloadseiten haben keinen Menüeintrag und damit keine
   Seitenklasse; sie gehören zu Support und sind dunkel wie Support. */
body.site.com_downloadmanager {
	background-color: var(--color-ink);
	color: #fff;
}

.site.com_downloadmanager .main-column {
	padding-block: calc(var(--fluid-unit) * 4) calc(var(--fluid-space) * 7.625);
}

/* ---- Raster: .row/.col wie in Bootstrap 5 ---- */

.site .dlm .row {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--bs-gutter-y));
	margin-inline: calc(-.5 * var(--bs-gutter-x));
}

.site .dlm .row > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	margin-top: var(--bs-gutter-y);
	padding-inline: calc(.5 * var(--bs-gutter-x));
}

.site .dlm .g-2 { --bs-gutter-x: .5rem; --bs-gutter-y: .5rem; }
.site .dlm .g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.site .dlm .g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }

.site .dlm .col { flex: 1 0 0%; }
.site .dlm .col-auto { flex: 0 0 auto; width: auto; }
.site .dlm .col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
	.site .dlm .col-sm-4 { flex: 0 0 auto; width: 33.3333%; }
	.site .dlm .col-sm-6 { flex: 0 0 auto; width: 50%; }
	.site .dlm .col-sm-8 { flex: 0 0 auto; width: 66.6667%; }
	.site .dlm .ms-sm-auto { margin-left: auto; }
}

@media (min-width: 768px) {
	.site .dlm .col-md-auto { flex: 0 0 auto; width: auto; }
	.site .dlm .text-md-end { text-align: right; }
	.site .dlm .justify-content-md-end { justify-content: flex-end; }
}

@media (min-width: 992px) {
	.site .dlm .col-lg-auto { flex: 0 0 auto; width: auto; }
	.site .dlm .col-lg-3 { flex: 0 0 auto; width: 25%; }
	.site .dlm .col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
	.site .dlm .col-lg-6 { flex: 0 0 auto; width: 50%; }
	.site .dlm .col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
}

/* ---- Hilfsklassen, die im Markup stehen ---- */

.site .dlm .d-block { display: block; }
.site .dlm .d-flex { display: flex; }
.site .dlm .flex-column { flex-direction: column; }
.site .dlm .flex-wrap { flex-wrap: wrap; }
.site .dlm .flex-grow-1 { flex-grow: 1; }
.site .dlm .flex-shrink-0 { flex-shrink: 0; }
.site .dlm .align-items-start { align-items: flex-start; }
.site .dlm .align-items-center { align-items: center; }
.site .dlm .align-items-end { align-items: flex-end; }
.site .dlm .justify-content-between { justify-content: space-between; }
.site .dlm .gap-1 { gap: .25rem; }
.site .dlm .gap-2 { gap: .5rem; }
.site .dlm .gap-3 { gap: 1rem; }
.site .dlm .text-decoration-none { text-decoration: none; }
.site .dlm .text-body { color: inherit; }
.site .dlm .text-center { text-align: center; }
.site .dlm .text-uppercase { text-transform: uppercase; }
.site .dlm .text-lowercase { text-transform: lowercase; }
.site .dlm .small { font-size: .875em; }
.site .dlm .fw-normal { font-weight: 400; }
.site .dlm .fs-6 { font-size: 1rem; }
.site .dlm .w-auto { width: auto; }
.site .dlm .overflow-hidden { overflow: hidden; }
.site .dlm .img-fluid { max-width: 100%; height: auto; }
.site .dlm .rounded { border-radius: 5px; }
.site .dlm .rounded-3 { border-radius: .5rem; }
.site .dlm .border { border: 1px solid var(--dlm-border); }
.site .dlm .bg-white { background-color: #fff; color: var(--color-ink); }
.site .dlm .p-2 { padding: .5rem; }
.site .dlm .p-3 { padding: 1rem; }
.site .dlm .p-4 { padding: 1.5rem; }
.site .dlm .px-2 { padding-inline: .5rem; }
.site .dlm .ps-4 { padding-left: 1.5rem; }
.site .dlm .mb-0 { margin-bottom: 0; }
.site .dlm .mb-1 { margin-bottom: .25rem; }
.site .dlm .mb-4 { margin-bottom: 1.5rem; }
.site .dlm .mt-4 { margin-top: 1.5rem; }
.site .dlm .mt-5 { margin-top: 3rem; }
.site .dlm .my-4 { margin-block: 1.5rem; }

/* ---- Liste: Zeile wie auf showcontroller.com, in den Farben der Seite ---- */

.site .dlm .dlm-downloads__heading {
	margin: 0 0 1rem;
	font-family: var(--font-display);
	font-size: calc(var(--text-headline) * 1.25);
	font-weight: 700;
	line-height: 1.2;
}

.site .dlm .dlm-row {
	padding: 1rem 1.25rem;
	margin-bottom: .375rem;
	color: inherit;
	text-decoration: none;
	border-radius: 5px;
}

/* Schlägt die Link-Farbe des Support-Beitrags (rot beim Überfahren) */
.site .dlm .dlm-row:is(:hover, :focus-visible) {
	color: inherit;
	text-decoration: none;
}

.site .dlm .dlm-row__title {
	font-size: max(1.0625rem, calc(var(--type-unit) * 1.25));
	font-weight: 700;
	line-height: 1.3;
}

.site .dlm .dlm-row__description,
.site .dlm .dlm-row__firmware {
	margin-top: .25rem;
	color: var(--dlm-muted);
	opacity: 1;
	line-height: 1.5;
}

.site .dlm .dlm-row__years {
	margin-bottom: .25rem;
	color: var(--dlm-muted);
}

.site .dlm .dlm-row__type {
	font-weight: 700;
}

.site .dlm .dlm-row__icon {
	width: 40px;
	flex-basis: 40px;
}

/* Hat keine Zeile der Liste ein Vorschaubild, fällt die leere Spalte weg */
.site .dlm .dlm-list:not(:has(.dlm-row__image img)) .dlm-row__image {
	display: none;
}

/* Auf dem Telefon bleibt das Bild klein neben dem Titel, statt eine
   eigene Zeile zu belegen; eine Zeile ohne Bild rückt nicht ein. */
@media (max-width: 575.98px) {
	.site .dlm .dlm-row__image {
		min-width: 0;
	}

	.site .dlm .dlm-row__image img {
		max-width: 64px;
	}

	.site .dlm .dlm-row__image:not(:has(img)) {
		display: none;
	}

	.site .dlm .dlm-row__content {
		min-width: 0;
	}
}

/* multiply passt zu grauen Zeilen auf Weiß, auf dunklem Grund würde das
   Bild schwarz: dort ein weißes Kärtchen dahinter. */
.site:is(.is-dark-page, .com_downloadmanager) .dlm :is(.dlm-row__image, .dlm-listtile__image) img {
	mix-blend-mode: normal;
	background-color: #fff;
	border-radius: 4px;
}

/* ---- Downloadseite ---- */

.site .dlm .dlm-item__heading {
	padding: 0;
	margin: 0;
	background: none;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: var(--font-display);
	font-size: clamp(1.625rem, calc(var(--type-unit) * 3.75), 3.5rem);
	font-weight: 700;
	line-height: 1.1;
	overflow-wrap: break-word;
	hyphens: auto;
}

.site .dlm .dlm-item__type {
	margin-bottom: .5rem;
	font-family: var(--font-sans);
	font-size: var(--text-meta);
	font-weight: 500;
	line-height: 1.4;
	color: var(--dlm-muted);
}

.site .dlm .dlm-item__title {
	font-size: 1em;
	font-weight: 700;
}

.site .dlm .dlm-item__body {
	padding-left: 0;
	font-size: max(1.0625rem, calc(var(--type-unit) * 1.25));
}

/* Haarlinien zwischen den Angaben, bündig mit Titel und Schaltfläche:
   ohne die Gutter der .row, die Linien sonst in den Rand ziehen */
.site .dlm .dlm-item__facts {
	margin-inline: 0;
	border-bottom: 1px solid var(--dlm-border);
}

.site .dlm .dlm-item__facts > * {
	margin: 0;
	padding: .625rem 0;
	border-top: 1px solid var(--dlm-border);
}

@media (min-width: 576px) {
	.site .dlm .dlm-item__fact-value {
		padding-left: 1rem;
	}
}

/* Die Linie mischt aus der eigenen Schriftfarbe; die Beschriftung ist auf
   66 % gedämpft, 27 % davon ergeben dieselbe Linie wie beim Wert. */
.site .dlm .dlm-item__fact-label {
	color: var(--dlm-muted);
	border-top-color: color-mix(in srgb, currentColor 27%, transparent);
}

@media (max-width: 575.98px) {
	.site .dlm .dlm-item__fact-label {
		padding-bottom: 0;
	}

	.site .dlm .dlm-item__fact-value {
		padding-top: .125rem;
		border-top: 0;
	}
}

.site .dlm :is(.dlm-item__summary, .dlm-item__description) :is(p, ul, ol) {
	margin: 0 0 1em;
}

.site .dlm :is(.dlm-item__summary, .dlm-item__description) ul {
	padding-left: 1.25em;
	list-style: disc outside;
}

.site .dlm :is(.dlm-item__summary, .dlm-item__description) ol {
	padding-left: 1.25em;
	list-style: decimal outside;
}

.site .dlm :is(.dlm-item__summary, .dlm-item__description) a {
	text-decoration: underline;
	text-underline-offset: .15em;
}

/* Der Download selbst: die rote Schaltfläche des Hauses */
.site .dlm .dlm-item__button {
	padding: 1.125rem 1.5rem;
	border: 0;
	border-radius: .25rem !important;
	font-size: var(--text-meta);
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .2s;
}

.site .dlm .dlm-item__button-label {
	font-weight: 700;
}

.site .dlm .dlm-item__button-meta {
	font-size: .875rem;
	opacity: .85;
}

.site .dlm .dlm-item__icon {
	width: 40px;
	height: auto;
}

/* ---- Suche und Filter ---- */

.site .dlm .form-label {
	display: block;
	margin-bottom: .375rem;
	font-weight: 500;
}

.site .dlm :is(.form-control, .form-select) {
	display: block;
	width: 100%;
	padding: .625rem .875rem;
	font: inherit;
	color: inherit;
	background-color: var(--dlm-row-bg);
	border: 1px solid var(--dlm-border);
	border-radius: .25rem;
}

.site .dlm :is(.form-control, .form-select):focus {
	border-color: var(--color-red);
	outline: 0;
}

.site .dlm .form-select option {
	color: var(--color-ink);
}

.site .dlm .btn-primary {
	color: #fff;
	background-color: var(--color-red);
	border-color: var(--color-red);
}

.site .dlm .btn-primary:is(:hover, :focus-visible) {
	background-color: #d33f3f;
	border-color: #d33f3f;
}

/* ==========================================================================
   Hauptnavigation: schlichtes Dropdown statt Mega-Feld

   main-nav.php setzt has-dropdown / main-nav__mega--dropdown, wenn ein
   Eintrag Kinder hat, aber weder Module auf mega-<alias> noch Linkbilder an
   den Kindern (z. B. Support). Statt des weißen Felds über die ganze
   Containerbreite klappt dann unter dem Eintrag eine Liste auf, gestaltet
   wie die des Sprachumschalters. Der Abstand nach oben ist derselbe wie beim
   Mega-Feld, die Brücke (:before aus main.css) hat genau diese Höhe und
   hält das Hover beim Hinunterfahren. Nur im Kopfbereich: im mobilen
   Overlay bleibt es die Liste unter dem Eintrag.
   ========================================================================== */

.site-header__nav .main-nav__item.has-dropdown {
	position: relative;
}

.site-header__nav .main-nav__mega--dropdown {
	inset-inline: calc(-1 * (1.25rem + 1px)) auto;
	top: calc(100% + var(--header-pad) + (var(--header-logo) - 1.5rem) / 2);
	min-width: 15rem;
	padding: .875rem 1.25rem;
	color: #fff;
	background-color: var(--color-ink, #191a1c);
	border: 1px solid var(--color-hairline, #3d3d3f);
	border-radius: 0;
	box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .5);
}

.site-header__nav .main-nav__mega--dropdown > .main-nav__sub {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.site-header__nav .main-nav__mega--dropdown .main-nav__sub-title {
	margin: 0;
	text-align: start;
	white-space: nowrap;
	font-size: max(1rem, calc(var(--type-unit) * 1.25));
}

/* ==========================================================================
   Produktseite: Technisches Datenblatt

   Der Verweis unter der Tabelle in „Technische Details" (default_product.php)
   führt zum Generator auf laserworld.com, der das PDF aus derselben
   Produktdatenbank baut. Aussehen wie dort: Symbol und fetter Text, auf der
   Höhe der Tabellenzellen eingerückt, Hover in der Akzentfarbe.
   ========================================================================== */

.tech-details__download {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	margin-block-start: 1.5rem;
	padding-inline-start: var(--fluid-unit);
	color: var(--color-ink, #191a1c);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: color .2s;
}

.tech-details__download:is(:hover, :focus-visible) {
	color: var(--color-red, #e84d4d);
}

.tech-details__download-icon {
	flex-shrink: 0;
	display: block;
}

.tech-details__download-icon svg {
	display: block;
	width: 1.0625rem;
	height: auto;
}

@media (min-width: 1024px) {
	.tech-details__download {
		font-size: 1.375rem;
	}
}