@charset "UTF-8";
/* ============================================================
   Astropraxis — Template
   Farben und Typografie entsprechen der bisherigen Seite.
   Werte, die im Backend einstellbar sind, kommen als
   CSS-Variablen aus index.php und werden hier nur verwendet.
   ============================================================ */

/* ---------- Schriften ---------- */
@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/open-sans-400.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/open-sans-400-italic.woff2') format('woff2');
	font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/open-sans-600.woff2') format('woff2');
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/open-sans-700.woff2') format('woff2');
	font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Kennwerte ---------- */
:root {
	--ap-primary: #432333;
	--ap-accent: #ef4339;
	--ap-muted: #93838b;
	--ap-surface: #f8f6fa;
	--ap-header-h: 80px;
	--ap-logo-h: 36px;

	--ap-text: var(--ap-primary);
	--ap-bg: #fff;
	--ap-border: #e5e5ea;
	--ap-footer-text: #f2eef5;
	--ap-footer-link: #c4bec1;
	--ap-topbar-btn: #0e48b5;
	--ap-pagehead-bg: #bad3ff;
	--ap-pagehead-text: #fff;
	--ap-meta: #a486bc;
	--ap-kachel-bg: #fafafb;
	--ap-karte-rand: #e1e7ec;
	--ap-karte-trenner: #e9eff2;
	--ap-violett-60: #a486bc;
	--ap-violett-80: #7d529f;
	--ap-artikel-breit: 1170px;
	--ap-artikel-text: 750px;

	--ap-font: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ap-wrap: 1427px;
	--ap-gap: 1.5rem;
	--ap-radius: 4px;
	/* Gemeinsamer Radius aller Knoepfe und Eingabefelder.
	   Der hohe Wert ist Absicht: Browser begrenzen den Radius auf die
	   halbe Hoehe des Elements. Dadurch entsteht bei jeder Hoehe eine
	   saubere Pillenform, ohne dass je Element ein eigener Wert noetig
	   waere. Wer stattdessen eine dezente Rundung moechte, traegt hier
	   einen festen Wert ein, etwa 8px. */
	--ap-radius-form: 999px;
	--ap-shadow: 0 2px 12px rgba(67, 35, 51, .08);
	--ap-speed: .2s;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* html davor, damit die Angabe auch dann gilt, wenn eine Erweiterung
   ihre eigene Groesse fuer body mitbringt und spaeter geladen wird. */
html body {
	margin: 0;
	font-family: var(--ap-font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ap-text);
	background: var(--ap-bg);
	-webkit-font-smoothing: antialiased;
}
/* Die Grundschrift bleibt auf allen Bildschirmen bei 16px. */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ap-primary);
}
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); line-height: 1.3; }
h4 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); line-height: 1.3; }
h5 { font-size: 1.3125rem; line-height: 1.5; }
h6 { font-size: 1rem; line-height: 1.5; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1rem; }

a { color: var(--ap-accent); text-decoration: none; }
/* Auf der ganzen Seite kein Unterstrich beim Ueberfahren. */
a:hover, a:focus-visible { text-decoration: none; }

img, svg, video, iframe { max-width: 100%; height: auto; }

:focus-visible {
	outline: 3px solid var(--ap-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---------- Hilfsklassen ---------- */
.ap-wrap {
	width: 100%;
	max-width: var(--ap-wrap);
	margin-inline: auto;
	padding-inline: var(--ap-gap);
}
.ap-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}
.ap-skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	padding: .75rem 1.25rem;
	background: var(--ap-primary); color: #fff;
}
.ap-skip:focus { left: 0; }

/* ---------- Buttons ---------- */
.ap-btn,
.btn-primary,
.sppb-btn-primary,
body .sppb-btn.sppb-btn-default {
	display: inline-block;
	padding: .625rem 1.5rem;
	border: 2px solid var(--ap-accent);
	border-radius: var(--ap-radius-form);
	background: var(--ap-accent);
	color: #fff;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ap-speed), color var(--ap-speed);
}
.ap-btn:hover,
.btn-primary:hover,
.sppb-btn-primary:hover,
body .sppb-btn.sppb-btn-default:hover {
	background: #fff;
	color: var(--ap-accent);
	text-decoration: none;
}
.ap-btn--outline,
body .sppb-btn.sppb-btn-default.sppb-btn-outline {
	background: #fff;
	color: var(--ap-accent);
}
.ap-btn--outline:hover,
body .sppb-btn.sppb-btn-default.sppb-btn-outline:hover {
	background: var(--ap-accent);
	color: #fff;
}

/* ---------- Hinweisleiste ---------- */
.ap-topbar {
	background: var(--ap-topbar-bg);
	color: var(--ap-topbar-text);
	font-size: .9375rem;
}
.ap-topbar .ap-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5rem 1.5rem;
	min-height: 48px;
	padding-block: .5rem;
}
.ap-topbar__content {
	flex: 1 1 auto;
	display: flex; flex-wrap: wrap;
	align-items: center; justify-content: center;
	gap: .5rem 1.5rem;
	text-align: center;
}
.ap-topbar__content > * { margin: 0; }

/* Handlungsknopf rechts. Faellt weg, sobald der Platz knapp wird —
   der Hinweistext ist wichtiger als der Knopf. */
.ap-topbar__action {
	position: absolute;
	right: 4.5rem;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}
@media (max-width: 991.98px) {
	.ap-topbar__action { display: none; }
}
@media (min-width: 992px) {
	/* Platz freihalten, damit der Text nicht unter den Knopf laeuft */
	.ap-topbar__content { padding-right: 12rem; padding-left: 2rem; }
}
.ap-topbar .ap-btn--blue {
	padding: .5rem 1.5rem;
	border-color: var(--ap-topbar-btn);
	background: var(--ap-topbar-btn);
	color: #fff;
	border-radius: var(--ap-radius-form);
	white-space: nowrap;
}
.ap-topbar .ap-btn--blue:hover {
	background: #fff;
	color: var(--ap-topbar-btn);
	text-decoration: none;
}
.ap-topbar__content { font-weight: 700; }
.ap-topbar a { color: var(--ap-topbar-text); text-decoration: underline; font-weight: 700; }
.ap-topbar a:hover { text-decoration: none; }

/* Der Handlungsknopf ist als Flaeche erkennbar, ein Unterstrich waere doppelt */
.ap-topbar .ap-btn--blue,
.ap-topbar .ap-btn--blue:hover { text-decoration: none; }
.ap-topbar__close {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	flex: 0 0 auto;
	display: inline-flex;
	padding: .375rem;
	border: 0; border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background var(--ap-speed);
}
.ap-topbar__close:hover { background: rgba(255, 255, 255, .25); }
/* Vom Miniskript im head gesetzt — verhindert das Aufblitzen */
.ap-topbar-off .ap-topbar { display: none; }

/* ---------- Header ---------- */
.ap-header {
	position: relative;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--ap-border);
}
.has-sticky-header .ap-header { position: sticky; top: 0; }
.ap-header.is-scrolled { box-shadow: var(--ap-shadow); }

.ap-header .ap-wrap { max-width: calc(var(--ap-wrap) - 30px); }
.ap-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ap-gap);
	min-height: var(--ap-header-h);
}
.ap-logo { display: inline-flex; align-items: center; }
.ap-logo img { height: var(--ap-logo-h); width: auto; }
.ap-logo__mobile { display: none; }
@media (max-width: 991.98px) {
	.ap-logo__desktop { display: none; }
	.ap-logo__mobile { display: block; }
}

/* ---------- Hauptmenü ---------- */
.ap-nav { display: none; }
@media (min-width: 992px) { .ap-nav { display: block; } }

.ap-nav ul { list-style: none; margin: 0; padding: 0; }
.ap-nav > ul,
.ap-nav .mod-menu {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}
.ap-nav a,
.ap-nav .ap-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .5rem 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	color: var(--ap-muted);
	cursor: pointer;
	transition: color var(--ap-speed);
}
/* Beim Ueberfahren violett, der aktive Punkt bleibt im Primaerton. Die
   Regel fuer den aktiven Punkt steht danach, damit sie beim Ueberfahren
   eines aktiven Punktes gewinnt. */
.ap-nav a:hover,
.ap-nav a:focus-visible,
.ap-nav .ap-nav__toggle:hover,
.ap-nav .ap-nav__toggle:focus-visible {
	color: #7d529f;
	text-decoration: none;
}

.ap-nav .current > a,
.ap-nav .active > a,
.ap-nav .current > a:hover,
.ap-nav .active > a:hover,
.ap-nav .current > .ap-nav__toggle,
.ap-nav .active > .ap-nav__toggle {
	color: var(--ap-primary);
	text-decoration: none;
}
.ap-nav li { position: relative; }

.ap-nav .ap-nav__sub {
	position: absolute;
	top: 100%; left: -1rem;
	z-index: 60;
	display: none;
	min-width: 260px;
	padding: .5rem 0;
	background: #fff;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius);
	box-shadow: var(--ap-shadow);
}
.ap-nav li:hover > .ap-nav__sub,
.ap-nav li:focus-within > .ap-nav__sub,
.ap-nav .ap-nav__sub.is-open { display: block; }
.ap-nav .ap-nav__sub a {
	display: block;
	padding: .5rem 1.25rem;
	font-weight: 400;
}
/* Punkte mit Untermenue bekommen ein Dreieck. Es haengt am Aufklappknopf,
   den der Override ohnehin ausgibt — bei verlinkten Punkten steht er
   hinter dem Link, bei Ueberschriften enthaelt er den Titel selbst.
   Das mitgelieferte Pfeilsymbol wird dafuer ausgeblendet, sonst waeren
   es zwei Zeichen nebeneinander. */
.ap-nav .ap-nav__caret { display: none; }

.ap-nav .parent > .ap-nav__toggle::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform var(--ap-speed);
}
.ap-nav .parent:hover > .ap-nav__toggle::after,
.ap-nav .parent:focus-within > .ap-nav__toggle::after { transform: rotate(180deg); }

/* Der Knopf hinter einem verlinkten Punkt braucht nur Platz fuer das
   Dreieck, nicht die volle Polsterung eines Menuepunktes. */
.ap-nav .parent > a + .ap-nav__toggle { padding-inline: 0; }

/* ---------- Offcanvas ---------- */
.ap-burger {
	display: inline-flex;
	padding: .5rem;
	border: 0;
	background: none;
	color: var(--ap-primary);
	cursor: pointer;
}
@media (min-width: 992px) { .ap-burger { display: none; } }

.ap-offcanvas {
	position: fixed;
	top: 0; bottom: 0;
	z-index: 120;
	width: min(88vw, 360px);
	padding: 1rem;
	background: #fff;
	overflow-y: auto;
	transition: transform var(--ap-speed) ease-out;
}
.ap-offcanvas[hidden] { display: block; visibility: hidden; }
.ap-offcanvas--left  { left: 0;  transform: translateX(-100%); }
.ap-offcanvas--right { right: 0; transform: translateX(100%); }
.ap-offcanvas.is-open { visibility: visible; transform: translateX(0); }

.ap-offcanvas__head { display: flex; justify-content: flex-end; }
.ap-offcanvas__close {
	padding: .5rem; border: 0; background: none;
	color: var(--ap-primary); cursor: pointer;
}
.ap-offcanvas ul { list-style: none; margin: 0; padding: 0; }
.ap-offcanvas__body { padding: .5rem .25rem 2rem; }

/* Menuepunkte: Link und Aufklappknopf sehen gleich aus, keine Trennlinien */
.ap-offcanvas .ap-menu a,
.ap-offcanvas .ap-menu .ap-nav__toggle {
	display: flex;
	align-items: center;
	gap: .4rem;
	width: 100%;
	padding: .6rem .25rem;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--ap-primary);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.ap-offcanvas .ap-menu > li + li { margin-top: .25rem; }

.ap-offcanvas .ap-menu a:hover,
.ap-offcanvas .ap-menu a:focus-visible,
.ap-offcanvas .ap-menu .ap-nav__toggle:hover,
.ap-offcanvas .ap-menu .current > a,
.ap-offcanvas .ap-menu .active > a { color: var(--ap-accent); text-decoration: none; }

.ap-offcanvas .ap-nav__caret { flex: none; transition: transform var(--ap-speed); }
.ap-offcanvas [aria-expanded="true"] .ap-nav__caret { transform: rotate(180deg); }

/* Untermenue: zunaechst geschlossen, oeffnet ueber den Aufklappknopf */
.ap-offcanvas .ap-nav__sub {
	display: none;
	padding-left: 1rem;
	margin-bottom: .25rem;
}
.ap-offcanvas .ap-nav__sub.is-open { display: block; }
.ap-offcanvas .ap-nav__sub a {
	font-weight: 400;
	font-size: 1rem;
	color: var(--ap-muted);
}

/* Weitere Module unter dem Menue, durch eine Linie abgesetzt */
.ap-offcanvas__body > * + * {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ap-border);
}
.ap-offcanvas .mod-custom a { display: inline-block; }
.ap-offcanvas .blue-btn {
	display: inline-block;
	width: auto;
	max-width: 100%;
	color: #fff;
	text-decoration: none;
}
.ap-offcanvas .blue-btn:hover,
.ap-offcanvas .blue-btn:focus-visible { color: #fff; }

.ap-backdrop {
	position: fixed; inset: 0; z-index: 110;
	background: rgba(67, 35, 51, .45);
}
.ap-backdrop[hidden] { display: none; }

/* ---------- Inhalt ---------- */
/* Abstaende wie auf der bisherigen Seite: 120 / 80 / 40 px */
.ap-main { padding-block: 40px; }
@media (min-width: 768px)  { .ap-main { padding-block: 80px; } }
@media (min-width: 992px)  { .ap-main { padding-block: 120px; } }
.ap-main--full { padding: 0; }

.ap-layout { display: block; }
@media (min-width: 992px) {
	.ap-layout--sidebar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 2.5rem;
		align-items: start;
	}
}
.ap-layout__side > * + * { margin-top: 1.5rem; }

.ap-breadcrumb {
	padding-block: .75rem;
	background: var(--ap-surface);
	font-size: .875rem;
}
.ap-breadcrumb ol {
	display: flex; flex-wrap: wrap; gap: .5rem;
	list-style: none; margin: 0; padding: 0;
}
.ap-after-article, .ap-backmenu { margin-top: 2rem; }

/* Modulstil "card" */
.card {
	padding: 1.25rem;
	background: var(--ap-surface);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius);
}
.card .card-header, .card > h3:first-child {
	margin-top: 0; font-size: 1.125rem;
}

/* ---------- Fußbereich ---------- */
.ap-footer {
	padding-block: 3rem 1.5rem;
	background: var(--ap-primary);
	color: var(--ap-footer-text);
}
.ap-footer a { color: var(--ap-footer-link); }
.ap-footer a:hover { color: var(--ap-footer-text); }
.ap-footer h1, .ap-footer h2, .ap-footer h3,
.ap-footer h4, .ap-footer h5, .ap-footer h6 { color: var(--ap-footer-text); }

.ap-footer__top {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	padding-bottom: 2rem;
}
@media (min-width: 768px) {
	.ap-footer__top { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}
/* Bereich ueber den Spalten, volle Breite — fuer ein Page-Builder-Modul */
.ap-footer__oben { padding-bottom: 2rem; }
.ap-footer__oben > :last-child { margin-bottom: 0; }

/* Das Logo im Fuss kam frueher fest aus dem Template. Es steht jetzt in
   einem Modul, damit es dort gepflegt werden kann. Die Regel bleibt fuer
   den Fall, dass ein Modul ein Logo mit dieser Klasse ausgibt. */
.ap-footer__brand img { height: calc(var(--ap-logo-h) + 8px); width: auto; margin-bottom: 1rem; }
.ap-footer ul { list-style: none; margin: 0; padding: 0; }
.ap-footer li + li { margin-top: .5rem; }

.ap-footer__legal {
	display: flex; flex-wrap: wrap;
	align-items: center; justify-content: space-between;
	gap: .75rem 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .15);
	font-size: .875rem;
}
.ap-footer__copy { margin: 0; }
.ap-footer__legal ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.ap-footer__legal li + li { margin-top: 0; }

/* ---------- Fehler- und Wartungsseite ---------- */
.ap-minimal {
	display: grid; place-items: center;
	min-height: 100vh; margin: 0; padding: var(--ap-gap);
	background: var(--ap-surface);
}
.ap-minimal__box {
	width: 100%; max-width: 480px;
	padding: 2rem;
	background: #fff;
	border-radius: var(--ap-radius);
	box-shadow: var(--ap-shadow);
	text-align: center;
}
/* Eigene Groesse: der Seitenname ist lang, die H1-Skala des Inhalts
   waere hier viel zu gross. */
.ap-minimal__box h1 {
	margin-block: 1rem .75rem;
	font-size: clamp(1.125rem, 1rem + .8vw, 1.5rem);
	line-height: 1.35;
	text-wrap: balance;
	hyphens: auto;
}
.ap-minimal__box img { max-width: 220px; height: auto; }
.ap-minimal__box p { font-size: .9375rem; }
.ap-minimal__box > p:last-of-type { margin-bottom: 0; }
.ap-minimal__form {
	display: grid; gap: .375rem;
	text-align: left;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ap-border);
}
.ap-minimal__form label { font-size: .8125rem; color: var(--ap-muted); }
.ap-minimal__form button { margin-top: .75rem; }
.ap-minimal__form input {
	padding: .625rem .75rem;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-form);
	font: inherit;
}
.ap-error__code {
	margin: 0 0 .5rem; font-size: 3.5rem; font-weight: 700; line-height: 1;
	color: var(--ap-accent);
}
.ap-error .ap-minimal__box h1 { font-size: 1.375rem; }
.ap-error__trace {
	margin-top: 1.5rem; padding: 1rem;
	background: var(--ap-surface);
	font-size: .75rem; text-align: left; overflow-x: auto;
}

/* ---------- Druck ---------- */
@media print {
	.ap-header, .ap-topbar, .ap-footer, .ap-offcanvas,
	.ap-backdrop, .ap-burger, .ap-skip, .ap-breadcrumb { display: none !important; }
	body { font-size: 11pt; color: #000; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* ============================================================
   Kursseiten — Ankernavigation und Lektions-Umschalter
   Nachgebaut aus dem alten Template, damit die importierten
   SP-Page-Builder-Seiten wie gewohnt funktionieren.
   ============================================================ */

/* Ein-/Ausklappen weiterer Lektionen */
.visible-hidden { display: none; }
.toggleStyle { display: block; }
.toggleButton { cursor: pointer; }

/* Ankernavigation der Kursseiten.
   Ruhender Zustand: nur eine feine Linie oben und unten, kein Kasten.
   Angehefteter Zustand (.ap-navfix, vom Skript gesetzt): weisser Streifen
   ueber die volle Fensterbreite, Inhalt darin auf Seitenbreite begrenzt. */
.scrollnav {
	position: relative;
	z-index: 40;
	background: #fff;
	border-top: 1px solid #ebeef0;
	border-bottom: 1px solid #ebeef0;
}
.scrollnav ul {
	display: flex;
	gap: 0 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
.scrollnav ul::-webkit-scrollbar { display: none; }
.scrollnav ul li { padding: 0; }
.scrollnav ul li a {
	display: inline-block;
	padding-block: 1.375rem;
	color: var(--ap-muted);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	transition: color var(--ap-speed);
}
.scrollnav ul li a:hover { color: #7d529f; }
.scrollnav ul li.active a,
.scrollnav ul li a:focus-visible { color: var(--ap-primary); }

/* Markierungslinie unter dem aktiven Punkt */
.scrollnav .indicator-line {
	position: absolute;
	bottom: 0; left: 0;
	width: 0; height: 2px;
	background: var(--ap-accent);
	transition: left var(--ap-speed), width var(--ap-speed);
}

@media (min-width: 992px) and (max-width: 1399.98px) {
	.scrollnav ul { gap: 0 1.75rem; }
	.scrollnav ul li a { font-size: .9375rem; }
}

/* Angehefteter Zustand */
.ap-navfix,
.nav-area.ap-navfix,
.scrollnav.ap-navfix {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 40;
	background: #fff;
	border-top: 0;
	border-bottom: 1px solid #ebeef0;
	box-shadow: 0 4px 10px rgba(67, 35, 51, .08);
}

/* Der Inhalt bleibt auf Seitenbreite, damit die Punkte buendig zum
   uebrigen Inhalt stehen und nicht am Fensterrand kleben. */
.ap-navfix > ul,
.nav-area.ap-navfix > ul,
.scrollnav.ap-navfix > ul {
	max-width: calc(var(--ap-wrap) - 30px);
	margin-inline: auto;
	padding-inline: 15px;
}

.ap-navfix .indicator,
.scrollnav .indicator { display: none; }

/* Randverlauf als Hinweis, dass die Leiste seitlich scrollt */
@media (max-width: 991.98px) {
	.anchor-nav.scrollnav::after {
		content: "";
		position: absolute;
		top: 0; right: 0; bottom: 0;
		width: 2rem;
		pointer-events: none;
		background-image: linear-gradient(270deg, #fff 0, rgba(255, 255, 255, 0));
	}
}

/* Ankerziele nicht unter den klebenden Kopf laufen lassen */
[id^="course-"] { scroll-margin-top: calc(var(--ap-header-h) + 60px); }

/* ============================================================
   Uebernommen aus dem user.css der bisherigen Seite.
   Diese Klassen stehen in den importierten Inhalten und werden
   dort gebraucht. Tote Erweiterungen (SPLMS, ChronoForms, Kunena,
   K2, jManagement, altes Cookie-Modul) sind nicht dabei.
   ============================================================ */

.font_s {
    font-size: 14px;
    line-height: 1.6;
}
.violett {
    color: #A486BC;
}
.aubergine {
    color: #432333;
}
.coral {
    color: #EF4339;
}
.semibold {
    font-weight: 600;
}
.underline {
    text-decoration: underline;
}
.zertifikat .sppb-addon-content img.sppb-img-responsive {
    max-height: 154px;
    width: auto;
}
.edulif-university-home-testimonial-wrapper .sppb-carousel-extended-list .sppb-carousel-extended-outer-stage .sppb-carousel-extended-item::after {
    background-color: #432333;
}
.edulif-university-home-testimonial-wrapper .sppb-carousel-extended-list .sppb-carousel-extended-outer-stage .sppb-carousel-extended-item:nth-child(2n)::after {
    background-color: #0E48B5;
}
.edulif-university-home-testimonial-wrapper .sppb-carousel-extended-list .sppb-carousel-extended-outer-stage .sppb-carousel-extended-item:nth-child(3n)::after {
    background-color: #CBBAD9;
}
.sppb-testimonial-carousel-message {
    min-height: 104px;
}
.lassons-home-article .sppb-article-info-wrap .sppb-meta-date {
    font-weight: 700;
    letter-spacing: 0;
}
.lassons-home-article .sppb-article-info-wrap h3 {
    line-height: 1;
}
.lassons-home-article .sppb-article-info-wrap h3 a {
    font-size: 21px;
    font-weight: 700;
    font-stretch: normal;
    line-height: 32px;
    letter-spacing: 0;
}
.blue-btn {
    padding: 8px 24px !important;
    color: white;
    background-color: #0E48B5;
    border-radius: var(--ap-radius-form);
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
}
.blue-btn:hover {
    color: white;
    background-color: #4A76C7;
}
.blue-btn:active {
    color: white;
    background-color: #BAD3FF;
}
.lassons-home-slider.sp-slider .sppb-sp-slider-button .sp-slider-btn-text {
    letter-spacing: 0;
    text-transform: none;
}
.sppb-nav.sppb-nav-pills::before {
    display: none;
}
/* Die frueheren Regeln zu .course-nav-area sind entfallen: sie beschrieben
   dieselbe Leiste ein drittes Mal und haben mit 25px Polsterung oben und
   unten den Kasten unnoetig hoch gemacht. Zustaendig ist jetzt allein der
   Block "Ankernavigation der Kursseiten" weiter oben. */
.box-border .sppb-addon-content {
    line-height: 1;
}
.course-sessions-meta li {
    list-style-type: "";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-left: 16px;
    margin-bottom: 13px
}
.course-sessions-meta li span {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 22.4px;
}
.course-sessions-meta li span strong {
    font-weight: 700 !important;
}
.course-sessions-meta {
    padding: 0;
    margin: 22px 16px
}
.box-border {
  box-shadow: 0 80px 290px 0 rgba(178, 188, 191, 0.25) !important;
}
.smallfont {
    font-size: 12px;
    line-height: 16.8px;
}
.gray {
    color: #999999;
}
.blue {
    color: #0E48B5;
}
.sppb-panel-heading {
    padding: 22px 100px 22px 16px
}
.sppb-panel-title {
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
}
.sppb-panel-default > .sppb-panel-heading {
    background: #FAFAFB;
}
.sppb-panel-default {
    border-color: #D0D0D0;
}
.sppb-panel-faq > .sppb-panel-heading {
    border-color: #D0D0D0;
}
.sppb-panel-default > .sppb-panel-heading .sppb-toggle-direction {
    color: #432333;
}
.align-center {
    align-items : center;
}
.align-top {
    align-items : flex-start;
}
.feedback .sppb-col-md-2 figure img {
    border-radius: 100px;
}
.feedback h5 {
    color: #7D529F;
    margin-bottom: 0;
}
.feedback .feedbackcontent .sppb-col-md-10 .introtext {
    background: #F8F6FA;
    padding: 22px 16px 1px;
}
.feedbackcontent {
    margin-top: 0;
    margin-bottom: 20px;
}
.feedback .feedbackcontent .triangle {
    width: 0px;
    height: 0px;
    -webkit-transform:rotate(360deg);
    border-style: solid;
    border-width: 0 19px 18px 19px;
    border-color: transparent transparent #F8F6FA transparent;
    margin-left: 24px;
    display: table;
}
.tutorenlist img {
    min-width: 100%;
}
.tutorenlist a {
    color: #432333;
}
.tutorenlist h6 {
    margin: 18px 0 8px;
}
.tutorenlist .small {
    font-size: 14px;
    margin-bottom: 22px;
}
.person .contact-misc {
    padding-right: 280px;
}
.person .thumbnail img {
    min-width: 100%;
}
.breadcrumb-item + .breadcrumb-item::before {
    padding-right: 17px;
    color: #7D529F;
}
.breadcrumb-item + .breadcrumb-item {
    padding-left: 17px;
}
.related-article-list-container .related-article-title {
    border-bottom: none;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}
.article-bottem hr {
    border-width: 2px;
    border-color: #D0D0D0;
    margin: 60px 0;
}
.element-invisible {
    display: none;
}
.sppb-addon-form-builder .sppb-form-check-label::before {
    border-color: #999999;
    top: 5px;
    border-radius: 5px !important;
}
.form-builder-checkbox-content label {
    margin-left: 36px;
}
/* Grundregel fuer die farbigen Kreise hinter den Zahlen. Sie stammt aus
   der template.css der bisherigen Seite und fehlte hier — die Farbregeln
   darunter setzten eine Farbe auf ein Element, das es nicht gab. */
.lassons-bobble { position: relative; }

.lassons-bobble .sppb-animated-number {
    position: relative;
    display: inline-block;
}

.lassons-bobble .sppb-animated-number::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% - 20px);
    width: 82px;
    height: 82px;
    border-radius: 100%;
    background-color: var(--ap-accent);
    transform: translateY(-50%);
    z-index: -1;
}

@media (max-width: 991px) {
    .lassons-bobble .sppb-animated-number::before {
        width: 62px;
        height: 62px;
    }
}

.lassons-bobble.violettbg20 .sppb-animated-number::before {
    background-color: #E5DCEC;
}
.lassons-bobble.violettbg60 .sppb-animated-number::before {
    background-color: #A486BC;
}
.lassons-bobble.skybluebg .sppb-animated-number::before {
    background-color: #BAD3FF;
}
.lassons-bobble.violettbg5 .sppb-animated-number::before {
    background-color: #F8F6FA;
}
.lassons-bobble.limebg .sppb-animated-number::before {
    background-color: #FFFF87;
}
.lassons-bobble .sppb-animated-number::before {
    left: 20px;
    transform: translateY(-36%);
}
.article-details div[itemprop="articleBody"] {
    margin-top: 60px;
}
.related-article-list-container p.img_caption {
    display: none;
}
.related_specials {
    margin-bottom: 122px;
}
.related_specials .related-article-list-container p.img_caption {
    display: block; 
    padding-bottom: 0;
}
.border {
    border: 1px solid #D0D0D0;
    box-sizing: border-box;
    border-radius: 4px;
}
.banner picture img {
    max-width: 442px;
}
.lassons-feature-list li a {
    color: #432333;
}
.acym_module_form p {
    margin-bottom: 0;
}
.pressestimmen.sppb-addon-articles .sppb-addon-article {
    margin-bottom: 0;
}
.pressestimmen .sppb-article-info-wrap h3 a {
    color: #432333 !important;
    font-weight: 700;
    font-size: 21px !important;
    line-height: 32px;
}
.pressestimmen .sppb-article-info-wrap h3 {
    margin: 0;
}
.pressestimmen a.sppb-readmore {
    font-weight: bold;
}
.pressestimmen .sppb-article-info-wrap {
    position: relative;
    padding: 30px 100px 30px  0;
    border-bottom: 1px solid #999999;
}
.pressestimmen .sppb-col-sm-12:last-child .sppb-article-info-wrap {
  border-bottom: none;
}
.lassons-home-article .sppb-article-info-wrap h3 {
    margin: 0;
}
.sppb-panel-heading .sppb-toggle-direction {
    -webkit-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}
.sppb-panel-heading.active .sppb-toggle-direction {
    -webkit-transform: translateY(-50%) rotate(-90deg);
    transform: translateY(-50%) rotate(-90deg);
}
#jform_privacyconsent_privacy .form-check-inline input[type="radio"] {
    display: inline-block;
}
.zitat {
    background: #F2EEF5;
    color: #432333;
    text-align: center;
    padding: 34px 16px;
    line-height: 1.5;
    border-radius: 6px;
    margin: 60px 0;
    box-sizing: border-box;
}
.zitat.right_side {
    padding: 16px;
    background: #F8F6FA;
    line-height: 1.5;
    margin: 0;
}
.profil_right .detailinfos {
    margin: 28px 0 16px;
}
.sppb-sp-slider-button .sp-slider-btn-text {
    background: #EF4339 !important;
    border: 2px solid #EF4339;
    color: white;
    font-weight: 700;
    cursor: pointer;
}
.sppb-sp-slider-button .sp-slider-btn-text:hover {
    background: #F3726A !important;
    border: 2px solid #F3726A !important;
}
.sppb-sp-slider-button .sp-slider-btn-text:focus {
    background: #F7A19C !important;
    border: 2px solid #F7A19C !important;
    color: white;
}
.secondary .sppb-sp-slider-button .sp-slider-btn-text {
    background: white !important;
    color: #EF4339 !important;
    border: 2px solid #EF4339;
    font-weight: 700;
    cursor: pointer;
}
.secondary .sppb-sp-slider-button .sp-slider-btn-text:hover {
    background: #EF4339 !important;
    color: white !important;
}
.secondary .sppb-sp-slider-button .sp-slider-btn-text:active {
    background: #F7A19C !important;
    border:2px solid #F7A19C !important;
    color: white !important;
}
.gray .sppb-sp-slider-button .sp-slider-btn-text {
    background: white !important;
    color: #432333 !important;
    border: 2px solid #432333 !important;
}
.gray .sppb-sp-slider-button .sp-slider-btn-text:hover {
    background: #F8F6FA !important;
}
.gray .sppb-sp-slider-button .sp-slider-btn-text:active {
    background: #E5DCEC !important;
}
.sppb-sp-slider-button .sp-slider-btn-text {
    padding: 16px 32px;
    box-sizing: border-box;
    font-size: 16px;
}
#jssmartbar-consent .js-smartbar-button {
    width: 16px;
    height: 16px;
    background: url("../images/close.png") no-repeat;
    text-indent: -9999px;
}
.lassons-feature-section .sppb-container-inner > .sppb-row > div:hover {
    cursor: default;
}
.auberginebox {
    color: #432333;
    background: #F2EEF5;
    border-radius: 6px;
    padding: 16px;
}
.auberginebox a {
    color: #432333;
    text-decoration: underline;
}
#moreFeedbacks {
    margin-top: 30px;
}
.pagination .page-item.active .page-link {
    border: solid 2px #432333;
    background-color: transparent;
    color: #432333;
}
.pagination .page-item.active .page-link:active {
    border: solid 2px #432333;
    background-color: transparent;
    color: #432333;
}
.pagination .page-item .page-link:active {
    color: #432333;
}
.headline_1 {
    font-size: 64px;
    line-height: 70.4px;
    margin-bottom: 56px;
}
.acym_form {
    position: relative;
}
.btn-arrow {
    background: url("../images/arrow-right.svg") white no-repeat 50% 50%;
    width: 30px;
    border: none;
}
.btn-arrow:hover {
    background: url("../images/arrow-right-hover.svg") white no-repeat 50% 50%;
}
.arrow-left a:before {
    background: url("../images/arrow-left.svg") transparent no-repeat 0% 50%;
    content: '';
    width: 34px;
    height: 16px;
    display: inline-block;
    margin-bottom: -2px;
}
.subbutton {
    position: absolute;
    right: 40px;
    top: 1px;
    height: 54px;
}
.acym_module_form .onefield.acyfield_text {
    margin: 0;
    padding: 11px 0px 11px 24px;
    background: white;
    border: 1px solid #D0D0D0;
    box-sizing: border-box;
    border-radius: var(--ap-radius-form);
    height: 56px;
    font-size: 16px;
    line-height: 1.6;
    color: #999999;
}
.acym_module_form .onefield.acyfield_text input {
    border: none;
    padding-top: 4px;
}
.acym_module_form input.acym__user__edit__email {
    cursor: auto;
}
.acym_module_form input.subbutton {
    cursor: pointer;
}
.newsflash.feedback {
    font-size: 16px;
    line-height: 1.6;
}
#column-wrap-id-1638486714058 {
    z-index: 10;
}
#overview-caption p {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
}
.sppb-addon-testimonial .fa-quote-left::before {
    font-size: 24px !important;
    font-style: normal !important;
}
.edulif-static-testimonial .sppb-addon-testimonial-client {
    font-style: normal !important;
}
.pagination-wrapper > .mr-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}
.sppb-addon-content p a {
    color: #432333;
    text-decoration: underline;
}
.sppb-addon-content p a:focus {
    color:#7D529F;
}
.iconpics .newsflash-image {
    max-width: 100px;
    margin-bottom: 0;
}
.person .contact-miscinfo a {
    color: #432333;
    text-decoration: underline;
}
.content-links  .nav-tabs {
    border: none;
}
.content-links li {
    text-align: center;
    display: block;
    width: 100%;
}
.pointer {
    cursor: pointer;
}
.align-right {
    text-align: right;
}
.red {
    color: #EF4339;
}
.contact-misc .zitat {
    display: flex;
    max-width: 956px;
    padding: 18px 22px;
    margin: 20px 0;
}
.contact-misc .zitat p {
    margin: 0;
    display: block;
    width: 100%;
}
.container #sp-page-builder .sppb-row-container {
    padding-left: 0;
    padding-right: 0;
}
#xmap h2.menutitle {
    display:none;
}
.top50 {
    margin-top: 66px;
}
.smallview .titles {
    padding: 8px;
    font-size: 11px;
}
.mediumview .titles {
    padding: 12px 0px;
    font-size: 16px;
}
.whitebg .titles {
    background: white;
}
.affiliate-logo { 
    max-width: 442px;
}
.affiliate-logo a img {
    display: inline;
    margin-bottom: 5px;
    margin-right: 10px;
}
.affiliate-logo span {
    vertical-align: bottom;
    font-size: 30px;
    color: #432333;
    display: inline;
}
.affiliate .affiliate-hide {
    display: none;
}
.mainfield label[for=security_image_70] {
    padding-bottom: 10px;
}
.through-line {
    text-decoration-line: line-through;
    text-decoration-thickness: 2px;
    text-decoration-style: solid;
    text-decoration-color: red;
    -webkit-text-decoration-line: line-through;
    -webkit-text-decoration-color: red;
    -webkit-text-decoration-thickness: 2px;
}
.titleOverlay .img_caption.none {
    max-width: 100%;
    position: relative;
}
.titleOverlay p.img_caption {
    position: absolute;
    bottom: 5%;
    width: 530px;
    color: white;
    text-align: left;
    left: 12%;
}
.padding25 {
    padding: 25px 50px;
}
.sppb-addon-content p a.red {
    color: #EF4339;
}
#jssmartbar-consent .oc-btn a.blue-btn {
   text-decoration: none !important;
}
.sppb-img-responsive.float-left-img {
	margin: 6px 20px 10px 0;
  	float: left;
  	max-width: 45%;
}
#section-ladingpage-submitbox .sppb-row-container {
  padding: 0;
}
.sppb-addon-single-image.reher {
    position: relative;
}
.reher .sppb-addon-title {
    font-family: 'aptos-light','Open Sans';
    font-size: 48px;
    position: absolute;
    color: white;
    z-index: 1000;
    font-weight: normal;
    text-align: left;
    padding: 20px;
    margin: 0;
    white-space: nowrap;
}
.reher.rightside .sppb-addon-title { 
    font-size: 30px;
    padding: 10px;
}
.reher.middle .sppb-addon-title {
    top: 50%;
    transform: translateY(-50%);
}
.reher.deutschland .sppb-addon-title {
    top: 12%;
}
.reher.bottom .sppb-addon-title {
   bottom: 30px;
}
.reher.rightside.bottom .sppb-addon-title {
   bottom: 0;
}
.reher.center .sppb-addon-title {
    left: 50%;
    transform: translateX(-50%);
}
.sppb-addon-single-image.rightside {
    width: 75%;
}
.related-article-list .article-intro-image div.img_caption {
    max-width: 100% !important;
}
.lassons-home-slider.sp-slider .sppb-sp-slider-title {
    max-width: 80%;
}
#kostenfreie-proben-und-infos-specials-start_page .grouped.fields .field {
  display: inline-block;
}
.tutortext {
    display: flex;
    align-items: center;
}
.subcategory-header .subcategory-title {
    margin-bottom: 0;
}
.subcategory-header .subcategory-desc {
  margin-bottom: 30px;
}
#aktuelle-folge {
    scroll-margin-top: 60px; /* Höhe des Sticky Headers anpassen */
}
#mini-workshop-start_page .grouped.fields .field.termineseletion {
  min-width: 350px;
}

/* ---------- Seitenkopf ---------- */
.ap-pagehead {
	background: var(--ap-pagehead-bg);
	color: var(--ap-pagehead-text);
	padding-block: 48px;
	text-align: center;
}
@media (min-width: 768px) { .ap-pagehead { padding-block: 72px; } }
@media (min-width: 992px)  { .ap-pagehead { padding-block: 96px; } }
@media (min-width: 1400px) { .ap-pagehead { padding-block: 134px; } }
.ap-pagehead--bild {
	background-image: var(--ap-pagehead-img);
	background-size: cover;
	background-position: center;
}
/* Die Unterzeile steht ueber der Ueberschrift — sie benennt das Angebot,
   die Ueberschrift den Titel. Im Markup steht sie hinter der Ueberschrift,
   damit Vorlesegeraete zuerst die Ueberschrift hoeren. */
.ap-pagehead > .ap-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ap-pagehead__unter {
	order: -1;
	margin: 0 0 .375rem;
	color: var(--ap-primary);
	font-size: clamp(1.125rem, .8rem + 1.35vw, 2.125rem);
	font-weight: 700;
	line-height: 1.2;
	opacity: 1;
}
.ap-pagehead__titel {
	margin: 0;
	color: inherit;
	/* Waechst bis 90px wie auf der bisherigen Seite. Der Anstieg ist
	   flacher gesetzt, damit mittlere Bildschirme nicht ueberfahren
	   werden. */
	font-size: clamp(1.75rem, 1rem + 4.2vw, 5.625rem);
	line-height: 1.1;
	letter-spacing: .64px;
	font-weight: 700;
	text-wrap: balance;
}
/* Der Seitenkopf ersetzt die Ueberschrift der Komponente */
.ap-pagehead + .ap-breadcrumb { border-top: 0; }

/* ---------- Kachelliste ---------- */
.ap-kacheln__einleitung { margin-bottom: 2rem; }
.ap-kachelgruppe + .ap-kachelgruppe { margin-top: 3.5rem; }
.ap-kachelgruppe__titel {
	margin: 0 0 .25rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ap-primary);
}
.ap-kachelgruppe__text {
	margin-bottom: 1.75rem;
	color: var(--ap-muted);
	font-size: .9375rem;
}
.ap-kachelgruppe__text > :last-child { margin-bottom: 0; }

.ap-kacheln__raster {
	display: grid;
	gap: 1.875rem;
	grid-template-columns: 1fr;
}
@media (min-width: 576px) {
	.ap-kacheln__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
	.ap-kacheln__raster {
		grid-template-columns: repeat(var(--ap-kachel-spalten, 4), minmax(0, 1fr));
	}
}

.ap-kachel {
	display: flex;
	flex-direction: column;
	background: var(--ap-bg);
	border: 1px solid #e1e7ec;
	border-radius: 5px;
	overflow: hidden;
	transition: box-shadow var(--ap-speed), transform var(--ap-speed);
}
.ap-kachel:hover { box-shadow: var(--ap-shadow); transform: translateY(-2px); }
.ap-kachel--versteckt { opacity: .6; }

.ap-kachel__bild { display: block; }
.ap-kachel__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ap-kachel__inhalt { padding: 1.25rem 1.25rem .5rem; flex: 1 1 auto; }
.ap-kachel__termin {
	margin: 0 0 .5rem;
	color: var(--ap-meta);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.4;
}
.ap-kachel__titel {
	margin: 0;
	font-size: 1rem;
	line-height: 1.45;
	font-weight: 700;
}
.ap-kachel__titel a { color: var(--ap-primary); text-decoration: none; }
.ap-kachel__titel a:hover { text-decoration: none; }
.ap-kachel__text {
	margin-top: .75rem;
	font-size: .9375rem;
	color: var(--ap-muted);
}
.ap-kachel__text > :last-child { margin-bottom: 0; }

.ap-kachel__mehr {
	margin: 1rem 0 0;
	padding: 1rem 1.25rem;
	border-top: 1px solid #e9eff2;
}
.ap-kachel__mehr a {
	color: var(--ap-accent);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
}
.ap-kachel__mehr a:hover { text-decoration: none; }

.ap-kacheln__links { list-style: none; margin: 2rem 0 0; padding: 0; }
.ap-kacheln__links li + li { margin-top: .5rem; }
.ap-kacheln__blaettern { margin-top: 3rem; }
.ap-kacheln__zaehler { color: var(--ap-muted); font-size: .875rem; margin: .75rem 0 0; }


/* ---------- SP Page Builder an die Seitenbreite angleichen ----------
   SPPB bringt eine eigene Regel mit 1140px mit. Ohne diese Ergaenzung
   waeren vom Page Builder gebaute Seiten schmaler als der Rest. */
@media (min-width: 1200px) {
	body .sppb-row-container,
	body .sppb-container,
	body .sppb-row-column > .sppb-column {
		max-width: var(--ap-wrap);
		width: auto;
	}
}


/* ---------- Kategorieblog ---------- */
.ap-blog__kopf,
.ap-blog__kategorie { margin: 0 0 1rem; }
.ap-blog__einleitung { margin-bottom: 2rem; }

/* Themenauswahl */
.ap-blog__themen {
	position: relative;
	margin-bottom: 2.625rem;
}
.ap-blog__themen-schalter {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6875rem 2rem;
	border: 1px solid #d0d0d0;
	border-radius: var(--ap-radius-form);
	color: var(--ap-violett-80);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	transition: background-color var(--ap-speed), color var(--ap-speed);
}
.ap-blog__themen-schalter::-webkit-details-marker { display: none; }
.ap-blog__themen-schalter::marker { content: ''; }
.ap-blog__themen-schalter:hover,
.ap-blog__themen-schalter:focus-visible {
	background: var(--ap-violett-80);
	border-color: var(--ap-violett-80);
	color: #fff;
}
.ap-blog__pfeil {
	width: .5rem;
	height: .5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--ap-speed);
}
.ap-blog__themen[open] .ap-blog__pfeil { transform: rotate(-135deg) translate(-2px, -2px); }

/* Die Liste schwebt ueber dem Inhalt, statt ihn nach unten zu schieben. */
.ap-blog__themen-liste {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	list-style: none;
	margin: .5rem 0 0;
	padding: .5rem 0;
	border: 1px solid #d0d0d0;
	border-radius: 10px;
	background: var(--ap-bg);
	box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
	width: fit-content;
	min-width: 12rem;
	overflow: hidden;
}
.ap-blog__themen-liste a {
	display: block;
	padding: .375rem 1rem;
	color: var(--ap-violett-80);
	text-decoration: none;
}
.ap-blog__themen-liste a:hover,
.ap-blog__themen-liste a:focus-visible {
	background: var(--ap-violett-80);
	color: #fff;
}
.ap-blog__anzahl { opacity: .6; margin-left: .375rem; }

/* Raster statt Spalten: die Beitraege laufen zeilenweise von links nach
   rechts, der neueste steht oben links. Ein Mauerwerk aus CSS-Spalten
   wuerde spaltenweise fuellen — dabei liest man senkrecht statt
   waagerecht. Die Karten richten sich oben aus und behalten ihre
   natuerliche Hoehe. */
.ap-blog__raster {
	display: grid;
	gap: var(--ap-gap);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}
@media (min-width: 576px) {
	.ap-blog__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
	.ap-blog__raster { grid-template-columns: repeat(var(--ap-blog-spalten, 4), minmax(0, 1fr)); }
}

/* Vom Skript gesetzt, sobald die Karten auf Spalten verteilt sind. Dann
   stapelt jede Spalte fuer sich und es entstehen keine Luecken.
   Die Klasse "ap-verteilt" laesst sich an jeder Liste ergaenzen, die
   dasselbe Verhalten bekommen soll. */
.ap-blog__raster--verteilt {
	display: flex;
	align-items: flex-start;
	gap: var(--ap-gap);
}

.ap-blog__spalte {
	display: flex;
	flex-direction: column;
	gap: var(--ap-gap);
	flex: 1 1 0;
	min-width: 0;
}

.ap-blogkarte {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--ap-bg);
	border: 1px solid var(--ap-karte-rand);
	border-radius: 5px;
	overflow: hidden;
	transition: box-shadow var(--ap-speed), transform var(--ap-speed);
}
.ap-blogkarte:hover { box-shadow: var(--ap-shadow); transform: translateY(-2px); }
.ap-blogkarte--versteckt { opacity: .6; }

.ap-blogkarte__bild { display: block; }
.ap-blogkarte__bild img { display: block; width: 100%; height: auto; }

.ap-blogkarte__inhalt { padding: 1.25rem; }

.ap-blogkarte__kategorie {
	margin: 0 0 .5rem;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 700;
	color: var(--ap-violett-60);
}
.ap-blogkarte__kategorie a { color: inherit; text-decoration: none; }
.ap-blogkarte__kategorie a:hover { text-decoration: none; }

.ap-blogkarte__titel {
	margin: 0;
	font-size: 1.3125rem;
	line-height: 1.5;
	font-weight: 700;
}
.ap-blogkarte__titel a { color: var(--ap-primary); text-decoration: none; }
.ap-blogkarte__titel a:hover { color: var(--ap-accent); }

.ap-blogkarte__datum {
	margin: .5rem 0 0;
	font-size: .875rem;
	color: var(--ap-muted);
}
.ap-blogkarte__text {
	margin-top: .75rem;
	font-size: .9375rem;
	color: var(--ap-muted);
}
.ap-blogkarte__text > :last-child { margin-bottom: 0; }

.ap-blogkarte__mehr {
	margin: 0;
	padding: 1rem 1.5625rem;
	border-top: 1px solid var(--ap-karte-trenner);
}
.ap-blogkarte__mehr a {
	display: block;
	color: var(--ap-accent);
	font-weight: 700;
	text-decoration: none;
}
.ap-blogkarte__mehr a:hover { text-decoration: none; }

.ap-blog__weitere { margin-top: 2rem; }
.ap-blog__blaettern { margin-top: 3rem; }
.ap-blog__zaehler { color: var(--ap-muted); font-size: .875rem; margin: .75rem 0 0; }

@media (min-width: 481px) and (max-width: 991px) {
	.ap-blogkarte__titel { font-size: 1.125rem; }
}


/* ---------- Blaetterung ----------
   Passend zum Markup des Joomla-Kerns: nav.pagination__wrapper > ul.pagination
   > li.page-item > a.page-link, der aktive Eintrag mit der Klasse "active". */
.pagination__wrapper { margin-top: 3.125rem; }

ul.pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pagination .page-item { margin: 0; }

.pagination .page-link {
	display: grid;
	place-items: center;
	min-width: 3rem;
	height: 3rem;
	padding-inline: .5rem;
	border: 2px solid transparent;
	border-radius: 50%;
	background: none;
	color: var(--ap-muted);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: color var(--ap-speed), background-color var(--ap-speed), border-color var(--ap-speed);
}

.pagination .page-link:hover,
.pagination .page-link:focus-visible { color: var(--ap-accent); }

.pagination .active .page-link {
	border-color: var(--ap-primary);
	color: var(--ap-primary);
}

.pagination .active .page-link:hover,
.pagination .active .page-link:focus-visible {
	background: var(--ap-primary);
	color: #fff;
}

.pagination .disabled .page-link {
	opacity: .35;
	cursor: default;
}

/* Die Pfeile des Kerns sind Symbolschriftzeichen. Da das Template ohne
   Symbolschrift auskommt, werden sie hier als Textzeichen gesetzt. */
.pagination [class*="icon-angle"] {
	font-style: normal;
	font-size: 1.5rem;
	line-height: 1;
}
.pagination .icon-angle-left::before        { content: "\2039"; }
.pagination .icon-angle-right::before       { content: "\203A"; }
.pagination .icon-angle-double-left::before  { content: "\00AB"; }
.pagination .icon-angle-double-right::before { content: "\00BB"; }

@media (max-width: 767px) {
	.pagination .page-link { min-width: 2.375rem; height: 2.375rem; font-size: .875rem; }
	ul.pagination { gap: .125rem; }
}


/* ---------- Suchfeld im Seitenkopf ---------- */
.ap-pagehead__suche {
	/* Breite und Abstand wie auf der bisherigen Seite: rund 710px und
	   deutlich mehr Luft zur Ueberschrift. Als Maximalbreite formuliert,
	   damit es auf schmalen Bildschirmen von selbst mitgeht.

	   width:100% ist noetig, weil der Kopfbereich seine Kinder mittig
	   ausrichtet (align-items: center) — dabei schrumpfen sie sonst auf
	   ihre Inhaltsbreite, und die Maximalbreite kaeme nie zum Tragen. */
	width: 100%;
	margin: 3.5rem auto 0;
	max-width: 44.5rem;
}

@media (max-width: 767px) {
	.ap-pagehead__suche { margin-top: 2rem; }
}
.ap-pagehead__suche form { display: flex; width: 100%; }

/* Das Suchmodul verschachtelt mehrfach:
   form > label + div.mod-finder__search > div.awesomplete > input + button.
   Feld und Knopf liegen also nicht im Formular, sondern zwei Ebenen
   tiefer. Die Zwischenebenen duerfen die Breite nicht begrenzen. */
.ap-pagehead__suche > div,
.ap-pagehead__suche search,
.ap-pagehead__suche .mod-finder,
.ap-pagehead__suche .search { display: block; width: 100%; }

.ap-pagehead__suche .mod-finder__search,
.ap-pagehead__suche .input-group {
	display: flex;
	width: 100%;
}

/* Huelle der Vorschlagsliste — ohne Breitenangabe nur so breit wie ihr
   Inhalt, dadurch blieb das Feld schmal. */
.ap-pagehead__suche .awesomplete {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

/* Vorschlagsliste unter dem Feld */
.ap-pagehead__suche .awesomplete > ul {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	margin: .25rem 0 0;
	padding: .25rem 0;
	list-style: none;
	background: var(--ap-bg);
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius);
	box-shadow: var(--ap-shadow);
	text-align: left;
}
.ap-pagehead__suche .awesomplete > ul li { padding: .375rem 1rem; cursor: pointer; }
.ap-pagehead__suche .awesomplete > ul li:hover,
.ap-pagehead__suche .awesomplete > ul li[aria-selected="true"] { background: var(--ap-surface); }

/* Das Lupensymbol stammt aus einer Symbolschrift, die das Template
   nicht mitbringt — es waere ein leerer Platzhalter. */
.ap-pagehead__suche .icon-search { display: none; }
/* Das Feld bringt oft ein size-Attribut mit, das ihm eine Eigenbreite
   gibt. width sticht das aus. */
.ap-pagehead__suche input[type="text"],
.ap-pagehead__suche input[type="search"] {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: 1rem 1.5rem;
	border: 1px solid var(--ap-accent);
	border-right: 0;
	border-radius: var(--ap-radius-form) 0 0 var(--ap-radius-form);
	background: var(--ap-bg);
	color: var(--ap-text);
	font: inherit;
	font-size: .9375rem;
}
.ap-pagehead__suche button,
.ap-pagehead__suche input[type="submit"] {
	flex: none;
	padding: 1rem 2.5rem;
	border: 1px solid var(--ap-accent);
	border-radius: 0 var(--ap-radius-form) var(--ap-radius-form) 0;
	background: var(--ap-accent);
	color: #fff;
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
}
.ap-pagehead__suche button:hover,
.ap-pagehead__suche input[type="submit"]:hover { filter: brightness(.92); }
.ap-pagehead__suche label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.ap-suchstreifen { padding-block: 1.5rem; }

/* aktives Thema in der Auswahl */
.ap-blog__thema--aktiv > a {
	background: var(--ap-surface);
	font-weight: 700;
}


/* ---------- Suchergebnisse ---------- */
.ap-blog__raster--liste {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ap-blog__raster--liste > .ap-blogkarte { margin-bottom: var(--ap-gap); }

/* Beschreibung im Treffer auf drei Zeilen begrenzen, damit eine lange
   Fundstelle die Spalte nicht unnoetig in die Laenge zieht. */
.ap-blogkarte__text--kurz {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ap-blogkarte__text mark,
.ap-blogkarte__titel mark {
	background: transparent;
	color: var(--ap-accent);
	font-weight: 700;
}

.ap-suche__hinweis { margin-bottom: 1.5rem; color: var(--ap-muted); }
.ap-suche__leer { padding-block: 2rem; }
.ap-suche__leer h2 { margin-top: 0; }
.ap-suche__sortierung { margin-bottom: 1.5rem; }


/* ---------- Einzelner Beitrag ----------
   Fliesstext laeuft schmal, damit die Zeilen lesbar bleiben. Beitraege,
   die im Page Builder gebaut sind, brauchen dagegen die volle Breite —
   das erkennt die Regel selbst am Vorhandensein eines Abschnitts.
   Übersteuern laesst sich beides ueber die Seitenklasse im Menuepunkt:
   "ap-breit" erzwingt volle Breite, "ap-schmal" den schmalen Satz. */
.com-content-article {
	--ap-textbreite: 100%;
	max-width: var(--ap-artikel-breit);
	margin-inline: auto;
}

.com-content-article:not(:has(.sppb-section)):not(:has(.sp-page-builder)) {
	--ap-textbreite: var(--ap-artikel-text);
}

.com-content-article:has(.sppb-section),
.com-content-article:has(.sp-page-builder),
.com-content-article.ap-breit { max-width: none; }

.com-content-article.ap-breit  { --ap-textbreite: 100%; }
.com-content-article.ap-schmal { --ap-textbreite: var(--ap-artikel-text); max-width: var(--ap-artikel-breit); }

/* Aeltere Browser ohne :has() bekommen den schmalen Satz nicht aufgezwungen */
@supports not selector(:has(*)) {
	.com-content-article { --ap-textbreite: 100%; }
	.com-content-article.ap-schmal { --ap-textbreite: var(--ap-artikel-text); }
}

.com-content-article > .page-header,
.com-content-article > .com-content-article__body,
.com-content-article > .article-info,
.com-content-article > .com-content-article__links,
.com-content-article > .tags,
.com-content-article > .pagination,
.com-content-article__body > * {
	max-width: var(--ap-textbreite);
	margin-inline: auto;
}

/* Bilder, Tabellen und Page-Builder-Abschnitte duerfen ausbrechen */
.com-content-article__body > figure,
.com-content-article__body > .float-none,
.com-content-article__body > table,
.com-content-article__body > .table-responsive,
.com-content-article__body > .sp-page-builder,
.com-content-article__body > .sppb-section {
	max-width: 100%;
}

.com-content-article > .page-header { margin-bottom: 2.5rem; }
.com-content-article > .page-header > * { margin: 0; }

/* Der Beitragstitel folgt nicht der allgemeinen h1-Groesse, sondern der
   Vorgabe der bisherigen Seite: 40px, Zeilenhoehe 1.5, Schriftstaerke 700. */
.com-content-article > .page-header > h1,
.com-content-article > .page-header > h2 {
	font-size: 2.5rem;
	line-height: 1.5;
	font-weight: 700;
}

/* Kategorie ueber dem Titel */
.com-content-article > .page-header > .ap-beitrag__kategorie {
	margin: 0 0 .5rem;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 700;
	color: var(--ap-violett-80);
}
.ap-beitrag__kategorie a { color: inherit; text-decoration: underline; }
.ap-beitrag__kategorie a:hover,
.ap-beitrag__kategorie a:focus-visible { color: var(--ap-accent); text-decoration: underline; }

.com-content-article .item-image,
.com-content-article figure.item-image {
	max-width: 100%;
	margin: 0 0 2.5rem;
	text-align: center;
}
.com-content-article .item-image img { display: inline-block; height: auto; }
.com-content-article .item-image figcaption,
.com-content-article .item-image .caption {
	max-width: var(--ap-artikel-text);
	margin: .875rem auto 0;
	color: var(--ap-violett-60);
	font-size: .875rem;
}

.com-content-article__body { margin-top: 2.5rem; }

/* ---------- Groesserer Fliesstext ----------
   Wird ueber die Seitenklasse "ap-lesetext" im Menuepunkt eingeschaltet
   (Seitenanzeige → Seitenklasse) und gilt dann fuer alle Beitraege unter
   diesem Menuepunkt. Ohne die Klasse bleibt alles bei 16px.
   Ueberschriften, Bildunterschriften und Page-Builder-Abschnitte behalten
   ihre eigenen Groessen. */
.com-content-article.ap-lesetext .com-content-article__body {
	font-size: 1.3125rem;
	line-height: 1.5;
}
/* Page-Builder-Abschnitte innerhalb eines Beitrags behalten ihre Groesse.
   Ueberschriften brauchen keine Ausnahme — sie bringen eigene Werte mit. */
.com-content-article.ap-lesetext .com-content-article__body :is(.sp-page-builder, .sppb-section) {
	font-size: 1rem;
}

/* ---------- Verwandte Beitraege ---------- */
.ap-verwandt {
	margin-top: 3.75rem;
	padding-top: 3.75rem;
	border-top: 2px solid #d0d0d0;
}
.ap-verwandt__titel {
	margin: 0 0 1.75rem;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
	line-height: 1.2;
	font-weight: 700;
}
.ap-verwandt__raster {
	display: grid;
	gap: var(--ap-gap);
	grid-template-columns: 1fr;
}
@media (min-width: 576px) { .ap-verwandt__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ap-verwandt__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ap-verwandt__raster .ap-blogkarte { margin: 0; }
.ap-verwandt__raster .ap-blogkarte__bild img { aspect-ratio: 16 / 10; object-fit: cover; }
.ap-verwandt__raster .ap-blogkarte__titel { font-size: 1rem; }

.ap-verwandt__mehr { margin: 2.5rem 0 0; text-align: center; }
.ap-knopf {
	display: inline-block;
	padding: .75rem 2rem;
	border: 1px solid var(--ap-accent);
	border-radius: var(--ap-radius-form);
	color: var(--ap-accent);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--ap-speed), color var(--ap-speed);
}
.ap-knopf:hover,
.ap-knopf:focus-visible { background: var(--ap-accent); color: #fff; }

@media (max-width: 767px) {
	.ap-verwandt { margin-top: 2.5rem; padding-top: 2.5rem; }
	.com-content-article__body { margin-top: 1.75rem; }
}


/* ---------- Kacheln zentriert ----------
   Fuer von Hand gesetzte Bloecke mit wenigen Karten: das Raster wird
   mittig gestellt und die Spaltenbreite begrenzt, damit zwei Karten
   nicht ueber die ganze Seitenbreite auseinandergezogen werden. */
.ap-kacheln__raster--zentriert { justify-content: center; }

@media (min-width: 992px) {
	.ap-kacheln__raster--zentriert {
		grid-template-columns: repeat(var(--ap-kachel-spalten, 4), minmax(0, var(--ap-kachel-max, 22rem)));
	}
}

/* groessere Schrift fuer einzeln gesetzte Kacheln */
.ap-kachel--gross .ap-kachel__titel { font-size: 1.3125rem; line-height: 1.4; }
.ap-kachel--gross .ap-kachel__termin { font-size: 1rem; }


/* ---------- SP Page Builder: Artikel-Addon ----------
   Das Addon gibt sein Markup selbst aus, es laesst sich nur ueber CSS
   gestalten. Angehaengt an die Addon-Klasse statt an eine Zusatzklasse,
   damit jeder Artikelblock ohne weitere Einstellung passend aussieht. */
.sppb-addon-articles .sppb-addon-article {
	background: var(--ap-bg);
	border: 1px solid var(--ap-karte-rand);
	border-radius: 5px;
	overflow: hidden;
	transition: box-shadow var(--ap-speed), transform var(--ap-speed);
}
.sppb-addon-articles .sppb-addon-article:hover {
	box-shadow: var(--ap-shadow);
	transform: translateY(-2px);
}

.sppb-addon-articles .sppb-article-img-wrap { display: block; }
.sppb-addon-articles .sppb-article-img-wrap img {
	display: block;
	width: 100%;
	height: auto;
}

/* Die Kategorie steht im Markup hinter dem Titel und wird hier davor gesetzt */
.sppb-addon-articles .sppb-article-info-wrap {
	display: flex;
	flex-direction: column;
	padding: 1rem 1.25rem 1.25rem;
	margin: 0;
}
.sppb-addon-articles .sppb-article-meta {
	order: -1;
	margin: 0 0 .5rem;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 600;
}
.sppb-addon-articles .sppb-meta-category a,
.sppb-addon-articles .sppb-meta-date {
	color: var(--ap-violett-60);
	text-decoration: none;
}
.sppb-addon-articles .sppb-meta-category a:hover { text-decoration: none; }

.sppb-addon-articles .sppb-article-info-wrap h3 {
	margin: 0;
	font-size: 1.3125rem;
	line-height: 1.4;
	font-weight: 700;
}
.sppb-addon-articles .sppb-article-info-wrap h3 a {
	color: var(--ap-primary);
	text-decoration: none;
}
.sppb-addon-articles .sppb-article-info-wrap h3 a:hover { color: var(--ap-accent); }

.sppb-addon-articles .sppb-article-introtext {
	margin-top: .75rem;
	font-size: .9375rem;
	color: var(--ap-muted);
}

@media (max-width: 991px) {
	.sppb-addon-articles .sppb-article-info-wrap h3 { font-size: 1.125rem; }
}


/* ---------- Sichtbarkeit nach Bildschirmbreite ----------
   Als Hilfsklassen gedacht: im Menuepunkt unter "Linktyp" als CSS-Klasse
   eintragen, oder an einem beliebigen Element im Inhalt verwenden.
   Das !important ist hier bewusst gesetzt, damit die Klasse unabhaengig
   von der Spezifitaet der umgebenden Regeln greift. */
@media (min-width: 992px) {
	.ap-nur-mobil { display: none !important; }
}

@media (max-width: 991px) {
	.ap-nur-desktop { display: none !important; }
}


/* ---------- Kopfbereich: Umbruchverhalten ----------
   Die Menuepunkte sind lang. Damit sie nicht mitten im Wort umbrechen,
   bleiben sie in sich zusammen; reicht die Zeile nicht, rutscht das
   gesamte Menue unter das dann mittig stehende Logo. */
.ap-nav a,
.ap-nav .ap-nav__toggle,
.ap-nav .ap-menu__label { white-space: nowrap; }

@media (min-width: 992px) and (max-width: 1399.98px) {
	.ap-header__inner {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		min-height: 0;
		padding-block: .875rem;
	}

	.ap-header__logo,
	.ap-nav { width: 100%; }

	.ap-header__logo { display: flex; justify-content: center; }

	.ap-nav > ul,
	.ap-nav .mod-menu {
		flex-wrap: wrap;
		justify-content: center;
		gap: .5rem 1.25rem;
	}

	.ap-nav a,
	.ap-nav .ap-nav__toggle { padding-block: .25rem; }
}

/* Ab 1400px steht alles wieder in einer Zeile */
@media (min-width: 1400px) {
	.ap-nav > ul,
	.ap-nav .mod-menu { flex-wrap: nowrap; }
}

/* Burger rechts, Logo links — auch wenn das Menue ausgeblendet ist */
@media (max-width: 991.98px) {
	.ap-header__inner { justify-content: space-between; }
	.ap-burger { margin-left: auto; order: 9; }
}


/* Zwischen 992 und 1200 wird der Platz knapp: kleinere Menueschrift */
@media (min-width: 992px) and (max-width: 1399.98px) {
	.ap-nav a,
	.ap-nav .ap-nav__toggle,
	.ap-nav .ap-menu__label { font-size: 13px; }

	.ap-nav > ul,
	.ap-nav .mod-menu { gap: .5rem 1rem; }
}


/* ---------- Aus Word eingefuegte Formatierung neutralisieren ----------
   Beim Einfuegen aus Word bringt der Text eigene Schriftangaben mit,
   meist als style-Attribut am span. Diese Regel setzt sie zurueck.
   Symbolschriften sind ausgenommen, sonst verschwinden deren Zeichen. */
[style*="font-family"]:not([class*="fa-"]):not([class*="icon-"]):not(.fa):not(.fas):not(.far):not(.fab),
[face],
font {
	font-family: var(--ap-font) !important;
}

/* Word-eigene Absatzklassen und Reste */
.MsoNormal,
.MsoListParagraph,
.MsoNoSpacing,
[class^="Mso"] {
	font-family: var(--ap-font) !important;
	margin-bottom: 1em;
}

/* Word setzt haeufig feste Schriftgroessen in Punkt */
[style*="font-size"][style*="pt"]:not([class*="fa-"]):not([class*="icon-"]) {
	font-size: inherit !important;
}

/* Leere Absaetze aus Word erzeugen sonst grosse Luecken */
o\:p { display: none; }

/* ============================================================
   Feinschliff — Abgleich mit der bisherigen Seite
   ============================================================ */

/* ---------- 1. Punkte des Sliders ----------
   Die Seiten-CSS von SP Page Builder enthaelt "background-color: dot",
   einen ungueltigen Wert. Der Browser verwirft die Zeile, dadurch bleibt
   der innere Kreis weiss und verdeckt den dunklen Punkt darunter. */
.sp-slider .sp-dots ul li span,
.sp-slider .sp-dots ul li::after,
.sp-slider .sp-dots ul li:hover span,
.sp-slider .sp-dots ul li:hover::after { background-color: transparent !important; }

.lassons-home-slider.sp-slider .sp-dots ul { display: flex; align-items: center; }
.lassons-home-slider.sp-slider .sp-dots ul li {
	width: 10px !important;
	height: 10px !important;
	border-width: 0 !important;
}
.lassons-home-slider.sp-slider .sp-dots ul li.active {
	width: 30px !important;
	height: 30px !important;
	border-width: 10px !important;
}

/* ---------- 2. Formularmodul ----------
   Die Gestaltung liegt jetzt im Modul selbst (mod_academy_formstart ab
   1.1.2). Frueher stand sie hier und hat die Modul-CSS ueberstimmt —
   dadurch liess sich das Feld auf hellem Grund nicht anpassen. */

/* ---------- 3. Knoepfe von SP Page Builder ----------
   Die runden Varianten duerfen nicht von der Grundregel ueberschrieben
   werden; sppb-btn-round ist genau dafuer gedacht. */
body .sppb-btn { padding: .8125rem 2.5rem; font-size: 1rem; }
body .sppb-btn.sppb-btn-round,
body .sppb-btn.sppb-btn-default.sppb-btn-round,
body .sppb-btn.sppb-btn-rounded,
body .sppb-btn.sppb-btn-default.sppb-btn-rounded { border-radius: var(--ap-radius-form); }

/* ---------- 4. Pressestimmen ----------
   Der Block nutzt die Artikelklassen von SPPB, soll aber anders aussehen
   als der Blogblock auf der Startseite. Daher an der Zusatzklasse
   aufgehaengt, damit die allgemeine Regel unangetastet bleibt. */
.pressestimmen .sppb-addon-article {
	background: none;
	border: 0;
	border-radius: 0;
	transition: none;
}
.pressestimmen .sppb-addon-article:hover { box-shadow: none; transform: none; }

.pressestimmen .sppb-row > div + div .sppb-article-info-wrap { border-top: 1px solid #999; }

.pressestimmen .sppb-article-info-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: .25rem 2rem;
	padding: 1.75rem 0;
	margin: 0;
}
.pressestimmen .sppb-article-info-wrap h3 {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
}
.pressestimmen .sppb-article-info-wrap h3 a { color: var(--ap-primary); text-decoration: none; }
.pressestimmen .sppb-article-info-wrap h3 a:hover { color: var(--ap-accent); }

.pressestimmen .sppb-article-meta {
	grid-column: 1;
	grid-row: 2;
	order: 0;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
}
.pressestimmen .sppb-meta-author { color: var(--ap-primary); }

.pressestimmen .sppb-readmore {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	color: #f0433f;
	font-size: .875rem;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
}
.pressestimmen .sppb-readmore:hover { text-decoration: none; }

@media (max-width: 767px) {
	.pressestimmen .sppb-article-info-wrap { grid-template-columns: minmax(0, 1fr); }
	.pressestimmen .sppb-readmore { grid-column: 1; grid-row: 3; margin-top: .5rem; }
}

/* ---------- 5. Feedback-Karussell ----------
   Farbiger Streifen je Stimme. Die Zuordnung haengt an der Nummer im
   Namen, nicht an der Position — das Karussell erzeugt Klone, bei denen
   sich eine Zaehlung nach Position beim Blaettern verschieben wuerde. */
.edulif-university-home-testimonial-wrapper .sppb-carousel-extended-outer-stage { padding-bottom: 60px; }

.edulif-university-home-testimonial-wrapper .sppb-carousel-extended-item {
	position: relative;
	background: #fff;
	transition: box-shadow .3s;
}
.edulif-university-home-testimonial-wrapper .sppb-carousel-extended-item:hover {
	box-shadow: 0 70px 60px rgba(178, 188, 191, .3);
}
.edulif-university-home-testimonial-wrapper .sppb-carousel-extended-item::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: -7px;
	height: 7px;
	background: #cbbbd8;
}
.edulif-university-home-testimonial-wrapper [id*="carousel-item-key-1"]::after,
.edulif-university-home-testimonial-wrapper [id*="carousel-item-key-4"]::after,
.edulif-university-home-testimonial-wrapper [id*="carousel-item-key-7"]::after { background: #432333; }

.edulif-university-home-testimonial-wrapper [id*="carousel-item-key-2"]::after,
.edulif-university-home-testimonial-wrapper [id*="carousel-item-key-5"]::after,
.edulif-university-home-testimonial-wrapper [id*="carousel-item-key-8"]::after { background: #004cb1; }

.edulif-university-home-testimonial-wrapper .sppb-carousel-extended-dots { bottom: -10px !important; }
.edulif-university-home-testimonial-wrapper .sppb-carousel-extended-dots ul {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* ---------- 7. Akkordeon ---------- */
.sppb-addon-accordion .sppb-panel-faq {
	border: 0;
	border-bottom: 1px solid var(--ap-border);
	background: none;
}
.sppb-addon-accordion .sppb-panel-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	padding: 1.625rem .5rem;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}
.sppb-addon-accordion .sppb-panel-title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ap-primary);
}
.sppb-addon-accordion .sppb-panel-heading:hover .sppb-panel-title { color: var(--ap-accent); }

/* Das Symbol ist fest ein Pfeil nach rechts. Drehen statt austauschen —
   dadurch laesst sich der Wechsel zusaetzlich weich gestalten. */
.sppb-addon-accordion .sppb-toggle-direction i {
	display: inline-block;
	transform: rotate(90deg);
	transition: transform var(--ap-speed);
	color: var(--ap-primary);
}
.sppb-addon-accordion .sppb-panel-heading[aria-expanded="true"] .sppb-toggle-direction i {
	transform: rotate(-90deg);
}

.sppb-addon-accordion .sppb-panel-body { padding: 0 .5rem 2rem; }

@media (max-width: 767px) {
	.sppb-addon-accordion .sppb-panel-title { font-size: 1.0625rem; }
	.sppb-addon-accordion .sppb-panel-heading { padding: 1.125rem .25rem; }
}

/* ---------- 8. Alte Kursbloecke ----------
   Handgeschriebenes Markup mit Bootstrap- und Edulif-Klassen. Statt jeden
   Block einzeln umzuschreiben, werden die alten Klassen auf die
   Kacheloptik abgebildet — begrenzt auf .specials. */
.specials .article-list .row {
	display: grid;
	gap: var(--ap-gap);
	grid-template-columns: 1fr;
	margin: 0;
}
@media (min-width: 576px) { .specials .article-list .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .specials .article-list .row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.specials .article-list .row > [class*="col-"] { max-width: none; padding: 0; flex: none; }

.specials .article {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ap-bg);
	border: 1px solid var(--ap-karte-rand);
	border-radius: 5px;
	overflow: hidden;
	transition: box-shadow var(--ap-speed), transform var(--ap-speed);
}
.specials .article:hover { box-shadow: var(--ap-shadow); transform: translateY(-2px); }

.specials .article img { display: block; width: 100%; height: auto; }

.specials .article p.img_caption {
	margin: 0;
	padding: 1.25rem 1.25rem 0;
	color: var(--ap-violett-60);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.4;
}

.specials .article .article-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0;
}
.specials .article .article-header { padding: .5rem 1.25rem 1.25rem; flex: 1 1 auto; }
.specials .article .article-header h4,
.specials .article .article-header h3 {
	margin: 0;
	font-size: 1rem;
	line-height: 1.45;
	font-weight: 700;
}
.specials .article .article-header a { color: var(--ap-primary); text-decoration: none; }
.specials .article .article-header a:hover { text-decoration: none; }

.specials .article .readmore {
	margin: 0;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--ap-karte-trenner);
}
.specials .article .readmore a {
	color: var(--ap-accent);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
}
.specials .article .readmore a:hover { text-decoration: none; }


/* ---------- Knopfvariante "gray" ----------
   Wird im Seiteninhalt als Zusatzklasse gesetzt: Rahmen und Schrift im
   Primaerton statt im Akzentrot, beim Ueberfahren nur ein leicht
   getoenter Grund. Uebernommen aus der bisherigen Seite. */
body .gray.sppb-btn.sppb-btn-default,
body .gray.sppb-btn.sppb-btn-default.sppb-btn-outline,
.gray .sppb-sp-slider-button .sp-slider-btn-text {
	background: #fff;
	color: var(--ap-primary);
	border: 2px solid var(--ap-primary);
}

body .gray.sppb-btn.sppb-btn-default:hover,
body .gray.sppb-btn.sppb-btn-default.sppb-btn-outline:hover,
body .gray.sppb-btn.sppb-btn-default.sppb-btn-outline:focus-visible,
.gray .sppb-sp-slider-button .sp-slider-btn-text:hover {
	background: #f8f6fa;
	color: var(--ap-primary);
	border-color: var(--ap-primary);
}

body .gray.sppb-btn.sppb-btn-default.sppb-btn-outline:active,
.gray .sppb-sp-slider-button .sp-slider-btn-text:active { background: #e5dcec; }

@media (max-width: 767px) {
	body .gray.sppb-btn.sppb-btn-default.sppb-btn-outline,
	.gray .sppb-sp-slider-button .sp-slider-btn-text { border-width: 1px; }
}


/* ---------- Sichtbarkeitsklassen von SP Page Builder ----------
   Umbruchpunkte nach dem heutigen Schema von SP Page Builder:
   xs bis 575, sm 576 bis 767, md 768 bis 991, lg 992 bis 1199,
   xl ab 1200. Ein Element soll auf dem Desktop verschwinden? Dann ist
   "xl" gemeint, nicht "lg". */
@media (max-width: 575.98px) {
	.sppb-hidden-xs { display: none !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
	.sppb-hidden-sm { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.sppb-hidden-md { display: none !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.sppb-hidden-lg { display: none !important; }
}

@media (min-width: 1200px) {
	.sppb-hidden-xl { display: none !important; }
}

/* ---------- Anmeldebereich des Portals ----------
   Im Anmeldemodul unter Erweitert als Modulklasse "ap-portal-login"
   eintragen. Die Regeln greifen unabhaengig davon, ob Joomla den
   Absendeknopf als button oder als input ausgibt. */
.ap-portal-login {
	max-width: 26rem;
	margin-inline: auto;
	text-align: center;
}

.ap-portal-login form { display: grid; gap: 1rem; }

.ap-portal-login input[type="text"],
.ap-portal-login input[type="password"],
.ap-portal-login input[type="email"] {
	width: 100%;
	padding: .8125rem 1.25rem;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-form);
	background: var(--ap-bg);
	font: inherit;
	font-size: 1rem;
	color: var(--ap-text);
}
.ap-portal-login input[type="text"]:focus,
.ap-portal-login input[type="password"]:focus,
.ap-portal-login input[type="email"]:focus {
	border-color: var(--ap-primary);
	outline: 2px solid rgba(67, 35, 51, .15);
	outline-offset: 1px;
}

.ap-portal-login label { text-align: left; font-weight: 600; font-size: .875rem; }

.ap-portal-login button[type="submit"],
.ap-portal-login input[type="submit"],
.ap-portal-login .btn-primary,
.ap-portal-login .ap-portal-login__btn {
	display: inline-block;
	width: 100%;
	padding: .9375rem 2.5rem;
	border: 2px solid var(--ap-accent);
	border-radius: var(--ap-radius-form);
	background: var(--ap-accent);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ap-speed), color var(--ap-speed), border-color var(--ap-speed);
}
.ap-portal-login button[type="submit"]:hover,
.ap-portal-login input[type="submit"]:hover,
.ap-portal-login .btn-primary:hover,
.ap-portal-login .ap-portal-login__btn:hover,
.ap-portal-login button[type="submit"]:focus-visible,
.ap-portal-login .ap-portal-login__btn:focus-visible {
	background: #fff;
	color: var(--ap-accent);
}

/* Kennwort vergessen, Benutzername vergessen, Registrieren */
.ap-portal-login ul,
.ap-portal-login .mod-login__options { list-style: none; margin: 1rem 0 0; padding: 0; }
.ap-portal-login ul li + li { margin-top: .375rem; }
.ap-portal-login ul a {
	color: var(--ap-muted);
	font-size: .875rem;
	text-decoration: none;
}
.ap-portal-login ul a:hover { color: var(--ap-primary); text-decoration: none; }

/* Angemeldeter Zustand: Begruessung und Abmeldeknopf */
.ap-portal-login .mod-login-logout__name { font-weight: 700; }

@media (max-width: 575px) {
	.ap-portal-login button[type="submit"],
	.ap-portal-login input[type="submit"],
	.ap-portal-login .ap-portal-login__btn { padding-inline: 1.5rem; }
}


/* ---------- Sitemap-Uebersicht ----------
   Ausgabe des Plugins "Astropraxis Sitemap" ueber den Platzhalter
   {sitemap} in einem Beitrag. */
.apx-sitemap__menue {
	margin: 2.5rem 0 1rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ap-primary);
}
.apx-sitemap__menue:first-child { margin-top: 0; }

.apx-sitemap__liste { list-style: none; margin: 0; padding: 0; }

.apx-sitemap__liste--1 > .apx-sitemap__punkt {
	padding-block: .625rem;
	border-bottom: 1px solid var(--ap-border);
}
.apx-sitemap__liste--1 > .apx-sitemap__punkt:last-child { border-bottom: 0; }

.apx-sitemap__liste--2,
.apx-sitemap__liste--3 { margin-top: .5rem; padding-left: 1.25rem; }
.apx-sitemap__liste--2 > .apx-sitemap__punkt,
.apx-sitemap__liste--3 > .apx-sitemap__punkt { padding-block: .25rem; }

.apx-sitemap__titel {
	color: var(--ap-primary);
	font-weight: 700;
	text-decoration: none;
}
.apx-sitemap__liste--2 .apx-sitemap__titel,
.apx-sitemap__liste--3 .apx-sitemap__titel {
	font-weight: 400;
	color: var(--ap-muted);
}
a.apx-sitemap__titel:hover { color: var(--ap-accent); text-decoration: none; }

/* Punkte ohne Ziel, etwa Ueberschriften im Menue */
span.apx-sitemap__titel { color: var(--ap-muted); cursor: default; }

@media (min-width: 768px) {
	.apx-sitemap__liste--1 { columns: 1; }
}


/* ---------- Anmeldemodul ----------
   Joomla gibt das Modul mit Bootstrap-Klassen aus (form-control,
   input-group, btn-primary, form-check). Da das Template ohne Bootstrap
   auskommt, sind die noetigen Regeln hier nachgebildet — an .mod-login
   aufgehaengt, damit es auch ohne eigene Modulklasse greift. */
.mod-login {
	max-width: 26rem;
	margin-inline: auto;
}

.mod-login .form-group + .form-group { margin-top: 1rem; }

.mod-login .input-group { display: flex; align-items: stretch; }

.mod-login .form-control {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	padding: .8125rem 1.25rem;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-form);
	background: var(--ap-bg);
	font: inherit;
	font-size: 1rem;
	color: var(--ap-text);
}
.mod-login .form-control::placeholder { color: var(--ap-muted); }
.mod-login .form-control:focus {
	border-color: var(--ap-primary);
	outline: 2px solid rgba(67, 35, 51, .15);
	outline-offset: 1px;
}

/* Das Symbol neben dem Benutzernamen ist rein schmueckend und wuerde
   ohne Symbolschrift als leerer Kasten erscheinen. */
.mod-login .input-group-text { display: none; }

/* Knopf zum Sichtbarmachen des Kennworts — bleibt erhalten, bekommt
   aber ein eigenes Zeichen, das ohne Symbolschrift auskommt. */
.mod-login .input-password-toggle {
	flex: none;
	display: grid;
	place-items: center;
	width: 3rem;
	margin-left: -1px;
	border: 1px solid var(--ap-border);
	border-radius: 0 var(--ap-radius-form) var(--ap-radius-form) 0;
	background: var(--ap-surface);
	cursor: pointer;
}
.mod-login .input-password-toggle:hover { background: #efeaf2; }
.mod-login .mod-login__password .form-control { border-radius: var(--ap-radius-form) 0 0 var(--ap-radius-form); }

.mod-login .input-password-toggle .icon-eye,
.mod-login .input-password-toggle .icon-eye-slash {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23432333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mod-login .input-password-toggle .icon-eye-slash { opacity: .5; }

.mod-login .form-check {
	display: flex;
	align-items: center;
	gap: .5rem;
}
.mod-login .form-check-input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--ap-primary); }
.mod-login .form-check-label { font-size: .9375rem; }

.mod-login .btn-primary,
.mod-login button[type="submit"] {
	display: inline-block;
	width: 100%;
	padding: .9375rem 2.5rem;
	border: 2px solid var(--ap-accent);
	border-radius: var(--ap-radius-form);
	background: var(--ap-accent);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--ap-speed), color var(--ap-speed);
}
.mod-login .btn-primary:hover,
.mod-login button[type="submit"]:hover,
.mod-login button[type="submit"]:focus-visible {
	background: #fff;
	color: var(--ap-accent);
}

/* Der Knopf zum Kennwort darf die Regel oben nicht erben */
.mod-login .input-password-toggle,
.mod-login .input-password-toggle:hover {
	width: 3rem;
	padding: 0;
	border-color: var(--ap-border);
	border-radius: 0 var(--ap-radius-form) var(--ap-radius-form) 0;
	color: inherit;
}

.mod-login .mod-login__options,
.mod-login .list-unstyled {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	text-align: center;
}
.mod-login .mod-login__options li + li { margin-top: .375rem; }
.mod-login .mod-login__options a {
	color: var(--ap-muted);
	font-size: .875rem;
	text-decoration: none;
}
.mod-login .mod-login__options a:hover { color: var(--ap-primary); text-decoration: none; }

/* Joomlas Hilfsklasse, sonst stehen die Beschriftungen sichtbar im Weg */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}


/* ---------- Anmeldeseite der Komponente ----------
   com_users gibt ein anderes Markup aus als das Modul: control-group
   statt form-group, eigene Klassen fuer die Verweise. Deshalb ein
   eigener Block, der aber dasselbe Erscheinungsbild erzeugt. */
.com-users-login {
	max-width: 26rem;
	margin-inline: auto;
}

.com-users-login fieldset,
.com-users-login .well {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.com-users-login .control-group + .control-group { margin-top: 1rem; }

.com-users-login .control-label {
	display: block;
	margin-bottom: .375rem;
	font-size: .9375rem;
	font-weight: 600;
}
.com-users-login .control-label label { margin: 0; }
.com-users-login .star { color: var(--ap-accent); }

.com-users-login .form-control {
	display: block;
	width: 100%;
	padding: .8125rem 1.25rem;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-form);
	background: var(--ap-bg);
	font: inherit;
	font-size: 1rem;
	color: var(--ap-text);
}
.com-users-login .form-control:focus {
	border-color: var(--ap-primary);
	outline: 2px solid rgba(67, 35, 51, .15);
	outline-offset: 1px;
}

/* Fehlerhinweise der Pruefung */
.com-users-login .form-control-feedback {
	display: block;
	margin-top: .25rem;
	color: var(--ap-accent);
	font-size: .8125rem;
	font-weight: 400;
}
.com-users-login .form-control-danger,
.com-users-login input.invalid { border-color: var(--ap-accent); }

.com-users-login .password-group { width: 100%; }
.com-users-login .input-group { display: flex; align-items: stretch; }
.com-users-login .input-group .form-control { border-radius: var(--ap-radius-form) 0 0 var(--ap-radius-form); }

.com-users-login .input-password-toggle {
	flex: none;
	display: grid;
	place-items: center;
	width: 3rem;
	margin-left: -1px;
	padding: 0;
	border: 1px solid var(--ap-border);
	border-radius: 0 var(--ap-radius-form) var(--ap-radius-form) 0;
	background: var(--ap-surface);
	cursor: pointer;
}
.com-users-login .input-password-toggle:hover { background: #efeaf2; }
.com-users-login .input-password-toggle .icon-eye,
.com-users-login .input-password-toggle .icon-eye-slash {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23432333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.com-users-login .input-password-toggle .icon-eye-slash { opacity: .5; }

.com-users-login .form-check {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1rem;
}
.com-users-login .form-check-input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--ap-primary); }
.com-users-login .form-check-label { font-size: .9375rem; }

.com-users-login__submit { margin-top: 1.25rem; }

.com-users-login .btn-primary {
	display: inline-block;
	width: 100%;
	padding: .9375rem 2.5rem;
	border: 2px solid var(--ap-accent);
	border-radius: var(--ap-radius-form);
	background: var(--ap-accent);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--ap-speed), color var(--ap-speed);
}
.com-users-login .btn-primary:hover,
.com-users-login .btn-primary:focus-visible { background: #fff; color: var(--ap-accent); }

.com-users-login__options {
	display: grid;
	gap: .375rem;
	margin-top: 1.25rem;
	text-align: center;
}
.com-users-login__options .list-group-item {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ap-muted);
	font-size: .875rem;
	text-decoration: none;
}
.com-users-login__options .list-group-item:hover {
	color: var(--ap-primary);
	text-decoration: underline;
}


/* ---------- Fusszeile: untere Verweiszeile ----------
   Die Punkte zwischen den Verweisen entstehen ueber ein Pseudoelement,
   damit im Markup keine Trennzeichen stehen, die vorgelesen wuerden. */
.ap-footer__legal ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ap-footer__legal li { margin: 0; }
.ap-footer__legal li + li::before {
	content: "\2022";
	display: inline-block;
	margin-inline: 1rem;
	opacity: .45;
}

/* Abstaende der Spalten wie auf der bisherigen Seite */
.ap-footer__top li + li { margin-top: .875rem; }
.ap-footer__oben { padding-bottom: 3rem; }


/* ---------- Newsletter im Fussbereich (AcyMailing) ----------
   Im Modul unter Erweitert als Modulklasse "apx-news" eintragen.
   Der Absendeknopf liegt im Markup in einem eigenen Absatz neben dem
   Feldblock. Deshalb wird nicht der Knopf selbst positioniert, sondern
   sein Absatz — bezogen auf .acym_form, dessen erstes Kind das
   Eingabefeld ist. Dadurch sitzt der Pfeil unabhaengig von der Laenge
   des Einleitungstextes immer mittig im Feld. */
.apx-news { max-width: none; }

.apx-news .acym_introtext {
	margin-bottom: .75rem;
	font-size: 1rem;
	line-height: 1.5;
}

/* Ab 900px stehen Text und Feld nebeneinander, darunter untereinander.
   Der Knopfabsatz liegt ausserhalb des Flusses und wird davon nicht
   beruehrt. */
@media (min-width: 900px) {
	.apx-news .acym_module_form {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
		gap: 0 2.5rem;
		align-items: start;
	}

	.apx-news .acym_introtext {
		margin-bottom: 0;
		text-align: right;
	}
}

.apx-news .acym_form { position: relative; }
.apx-news .acym_module_form { position: static; }

/* AcyMailing legt die Feldbloecke nebeneinander (Flex bzw. Raster) und
   hinterlegt sie. Beides wird hier zurueckgesetzt, damit Eingabefeld und
   Zustimmung untereinander stehen. */
.apx-news .acym_fulldiv,
.apx-news .acym_module_form > .acym_form {
	background: none;
	border: 0;
	box-shadow: none;
}

.apx-news .acym_form {
	display: block;
	padding: 0;
	margin: 0;
}

.apx-news .acym_form .onefield {
	display: block;
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Der erste Feldblock bekommt genau die Hoehe des Eingabefeldes. Nur so
   ist der Bezugsrahmen fuer den Knopf eindeutig — sonst verschiebt ihn
   jede Kleinigkeit, die AcyMailing zusaetzlich einfuegt. */
.apx-news .acym_form > .onefield:first-child {
	position: relative;
	height: 56px;
}

.apx-news .acym__field__error__block {
	position: absolute;
	top: 100%;
	left: 1.5rem;
}

.apx-news .acym_form .cell { width: 100%; max-width: none; }

/* Der Pfeil sitzt als Hintergrundbild im Eingabefeld. "center" richtet
   ihn zur tatsaechlichen Feldhoehe aus — unabhaengig davon, welche Hoehe
   das Feld am Ende hat. Der Knopf darueber ist nur noch die Klaeche. */
.apx-news .acym_form input[type="email"],
.apx-news .acym_form input[type="text"] {
	display: block;
	width: 100%;
	height: 56px;
	padding: 0 4.25rem 0 1.5rem;
	margin: 0;
	border: 0;
	border-radius: var(--ap-radius-form);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23432333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.375rem center;
	background-size: 24px 24px;
	box-shadow: none;
	font: inherit;
	font-size: 1rem;
	line-height: 56px;
	color: var(--ap-primary);
}

/* Beim Ueberfahren des Knopfes wechselt das Feld auf den roten Kreis mit
   weissem Pfeil. Auch dieser ist mittig gesetzt, springt also nicht. */
.apx-news .acym_form:has(~ .acysubbuttons button:hover) input[type="email"],
.apx-news .acym_form:has(~ .acysubbuttons button:focus-visible) input[type="email"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23ef4339'/%3E%3Cpath d='M15 24h16M25 18l6 6-6 6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right .25rem center;
	background-size: 48px 48px;
}
.apx-news .acym_form input::placeholder { color: var(--ap-muted); }
.apx-news .acym_form input:focus {
	outline: 2px solid rgba(255, 255, 255, .55);
	outline-offset: 2px;
}

/* Absatz mit dem Absendeknopf. Statt mit der halben Feldhoehe zu rechnen,
   wird der Absatz ueber die volle Feldhoehe gelegt und der Knopf darin
   mittig ausgerichtet — das stimmt auch, wenn sich die Hoehe aendert. */
.apx-news .acysubbuttons {
	position: absolute;
	top: 0;
	right: .25rem;
	height: 56px;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.apx-news .acysubbuttons .subbutton,
.apx-news .acysubbuttons button {
	display: block;
	width: 48px;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--ap-radius-form);
	background: none;
	font-size: 0;
	line-height: 0;
	color: transparent;
	cursor: pointer;
}

.apx-news .acysubbuttons noscript { display: none; }

/* Zustimmung unter dem Feld */
/* Die Regel muss mindestens so stark sein wie
   ".apx-news .acym_form .onefield { margin: 0 }", sonst greift der
   Abstand nicht. */
.apx-news .acym_form .onefield.fieldacyterms { margin-top: 1.125rem; }
/* Das Label enthaelt Text, Verweise und versteckte Fensterelemente als
   einzelne Bestandteile. Mit Flexbox wuerde jeder davon zu einem eigenen
   Kasten und der Satz in Spalten zerfallen — deshalb normaler Fliesstext
   mit freigehaltenem Platz fuer das Kaestchen. */
.apx-news .fieldacyterms label {
	display: block;
	position: relative;
	margin: 0;
	padding-left: 1.5rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--ap-footer-link);
	cursor: pointer;
}
.apx-news .fieldacyterms input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: .2rem;
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: #fff;
}
.apx-news .fieldacyterms .acym__modal { display: none !important; }
.apx-news .fieldacyterms a {
	color: var(--ap-footer-text);
	text-decoration: underline;
}

/* Fehlerhinweise der Pruefung */
.apx-news .acym__field__error__block {
	font-size: .8125rem;
	color: #ffd9d7;
}

@media (max-width: 899px) {
	.apx-news .acym_introtext { text-align: left; }
}


/* ---------- Reihenfolge in schmalen Ansichten ----------
   Zweispaltige Abschnitte stapeln sich sonst als "erst alles links,
   dann alles rechts". Mit diesen Klassen laesst sich die Reihenfolge
   frei mischen, ohne Bausteine doppelt anzulegen.

   In SP Page Builder:
     - der Zeile (Row) die Klasse "apx-mix" geben
     - jedem Baustein eine Klasse "apx-order-1" bis "apx-order-6"

   Wie es wirkt: Spalten und ihre Huellen werden unterhalb von 992px auf
   "display: contents" gesetzt. Dadurch verschwinden ihre Kaesten, und die
   Bausteine werden direkte Kinder der Zeile — erst dann laesst sich ihre
   Reihenfolge bestimmen.

   Zu beachten: Ohne Kasten verlieren die Spalten in dieser Ansicht auch
   ihren Hintergrund, ihre Innenabstaende und ihre Rahmen. Bei rein
   inhaltlichen Spalten faellt das nicht auf; bei gestalteten Spalten
   sollte man es vorher pruefen. */
@media (max-width: 991.98px) {
	.apx-mix .sppb-row {
		display: flex;
		flex-direction: column;
	}

	.apx-mix .sppb-row > [class*="sppb-col"],
	.apx-mix .sppb-column,
	.apx-mix .sppb-column-addons { display: contents; }

	.apx-mix .sppb-addon-wrapper:has(.apx-order-1) { order: 1; }
	.apx-mix .sppb-addon-wrapper:has(.apx-order-2) { order: 2; }
	.apx-mix .sppb-addon-wrapper:has(.apx-order-3) { order: 3; }
	.apx-mix .sppb-addon-wrapper:has(.apx-order-4) { order: 4; }
	.apx-mix .sppb-addon-wrapper:has(.apx-order-5) { order: 5; }
	.apx-mix .sppb-addon-wrapper:has(.apx-order-6) { order: 6; }
}


/* Die Anpassung fuer hellen Grund ist entfallen. Das Modul erbt jetzt
   die Farben seiner Umgebung und bringt den dunklen Kasten ueber eine
   eigene Einstellung mit — siehe mod_academy_formstart ab 1.1.2. */


/* ---------- Mittig gesetzter, begrenzter Block ----------
   Ersatz fuer die frueheren Bootstrap-Klassen. Statt "row
   justify-content-center" und "col-sm-9" genuegt ein Element mit
   "ap-mitte". Die Breite laesst sich ueber eine Zusatzklasse oder
   unmittelbar setzen: style="--ap-mitte-max: 37rem".

   Eine Maximalbreite braucht nur einen Wert: auf breiten Bildschirmen
   begrenzt sie, auf schmalen greift sie nicht und der Block nutzt die
   volle Breite. Anteile wie col-md-5 brauchen dagegen je Bildschirm-
   groesse einen eigenen Wert. */
.ap-mitte {
	margin-inline: auto;
	max-width: var(--ap-mitte-max, 46rem);
}
.ap-mitte--schmal { --ap-mitte-max: 34rem; }
.ap-mitte--breit  { --ap-mitte-max: 60rem; }

/* ---------- Dateiliste (Proben zum Hoeren, Lesen, Ansehen) ----------
   Uebernommen aus der bisherigen Seite. Die beiden Symbole sind als
   Vektorgrafik eingebettet, damit keine zusaetzlichen Dateien noetig
   sind und die Farbe zum Akzentton passt. */
.border { border: 1px solid #d0d0d0; }

ul.filelist {
	margin: 0;
	padding: 36px 36px 0 36px;
	list-style: none;
}
@media (max-width: 767px) {
	ul.filelist { padding: 36px 4px 0 4px; }
}

ul.filelist li {
	display: flex;
	justify-content: space-between;
	margin-bottom: 36px;
	list-style: none;
}

ul.filelist li a {
	display: inline-block;
	position: relative;
	color: var(--ap-primary);
	text-decoration: none;
}
ul.filelist li a:hover { color: var(--ap-accent); }

ul.filelist li a.file,
ul.filelist li a.play {
	min-height: 24px;
	padding-left: 40px;
	padding-right: 50px;
}

ul.filelist li a.file::before,
ul.filelist li a.play::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background-position: center;
	background-repeat: no-repeat;
}
ul.filelist li a.file::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='20' viewBox='0 0 14 20' fill='none'%3E%3Cpath d='M8.34 2.46L11.86 5.92H8.34V2.46ZM13.13 7.67V18.75H0.88V1.25H6.59V6.79V7.67H7.47H13.13Z' stroke='%23EF4339' stroke-width='1.75'/%3E%3C/svg%3E"); background-size: 14px 20px; }
ul.filelist li a.play::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 16.8V6.72L17.64 12L9 16.8Z' fill='%23EF4339'/%3E%3Ccircle cx='12' cy='12' r='10.08' stroke='%23EF4339' stroke-width='1.83'/%3E%3C/svg%3E"); background-size: 24px 24px; }

ul.filelist li span.right {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
}

/* ---------- Knopfvariante "primary" von SP Page Builder ----------
   SPPB liefert dafuer ein Blau mit. Auf dieser Seite sind Handlungsknoepfe
   durchgehend rot. */
body .sppb-btn.sppb-btn-primary,
body a.sppb-btn.sppb-btn-primary {
	background: var(--ap-accent);
	border: 2px solid var(--ap-accent);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}
body .sppb-btn.sppb-btn-primary:hover,
body a.sppb-btn.sppb-btn-primary:hover,
body .sppb-btn.sppb-btn-primary:focus-visible {
	background: #fff;
	border-color: var(--ap-accent);
	color: var(--ap-accent);
}


/* ---------- Logo aus einem Modul ----------
   Wird das Logo nicht vom Template, sondern von einem eigenen Modul
   ausgegeben, greift die Klasse "logo-image". Die Hoehe folgt der
   Template-Einstellung, damit beide Wege dieselbe Groesse ergeben. */
.logo-image {
	height: var(--ap-logo-h, 36px);
	width: auto;
	display: block;
}


/* ---------- Weitere Knoepfe im Anmeldebereich ----------
   Joomla ergaenzt das Anmeldeformular je nach Konfiguration um weitere
   Knoepfe, etwa fuer Passkeys. Sie kommen mit Bootstrap-Klassen und einem
   eingebetteten Symbol ohne feste Masse — ohne Begrenzung nimmt es die
   volle Breite ein. Der Knopf zum Sichtbarmachen des Kennworts ist
   ausgenommen, der hat seine eigene Gestaltung. */
.mod-login .btn-secondary:not(.input-password-toggle),
.com-users-login .btn-secondary:not(.input-password-toggle),
.mod-login .webauthn-login-button,
.com-users-login .webauthn-login-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	padding: .75rem 1.5rem;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-form);
	background: var(--ap-bg);
	color: var(--ap-primary);
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--ap-speed), border-color var(--ap-speed);
}

.mod-login .btn-secondary:not(.input-password-toggle):hover,
.com-users-login .btn-secondary:not(.input-password-toggle):hover,
.mod-login .webauthn-login-button:hover,
.com-users-login .webauthn-login-button:hover {
	background: var(--ap-surface);
	border-color: var(--ap-primary);
}

.mod-login .btn-secondary:not(.input-password-toggle) svg,
.mod-login .btn-secondary:not(.input-password-toggle) img,
.com-users-login .btn-secondary:not(.input-password-toggle) svg,
.com-users-login .btn-secondary:not(.input-password-toggle) img,
.mod-login .webauthn-login-button svg,
.com-users-login .webauthn-login-button svg {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

/* Abstand zum Anmeldeknopf darunter */
.mod-login .btn-secondary:not(.input-password-toggle),
.com-users-login .btn-secondary:not(.input-password-toggle) { margin-block: .25rem; }


/* ---------- Inhaltsbreite ueber die Seitenklasse ----------
   Im Menuepunkt unter "Seitenanzeige" als Seitenklasse eintragen, etwa
   "ap-inhalt-9". Die Klasse landet am body, wirkt also unabhaengig davon,
   welches Markup die jeweilige Komponente ausgibt.

   Gerechnet wird in Zwoelfteln der Seitenbreite. Es ist eine
   Maximalbreite: Sie begrenzt, solange Platz da ist, und greift nicht
   mehr, sobald das Fenster schmaler wird. */
[class*="ap-inhalt-"] .ap-main > .ap-wrap > .ap-layout:not(.ap-layout--sidebar) > .ap-layout__main,
[class*="ap-inhalt-"] .ap-main > .ap-wrap > .ap-layout:not(.ap-layout--sidebar) {
	max-width: var(--ap-inhalt-max);
	margin-inline: auto;
}

.ap-inhalt-6  { --ap-inhalt-max: calc(var(--ap-wrap) / 12 * 6); }
.ap-inhalt-7  { --ap-inhalt-max: calc(var(--ap-wrap) / 12 * 7); }
.ap-inhalt-8  { --ap-inhalt-max: calc(var(--ap-wrap) / 12 * 8); }
.ap-inhalt-9  { --ap-inhalt-max: calc(var(--ap-wrap) / 12 * 9); }
.ap-inhalt-10 { --ap-inhalt-max: calc(var(--ap-wrap) / 12 * 10); }


/* ---------- Breite der Kategoriebeschreibung in com_academy ----------
   Die Komponente begrenzt .academy-category-desc auf 46rem und stellt
   sie nicht mittig. Damit sich die Breite je Seite steuern laesst, ohne
   den Code der Komponente zu aendern, wird der Wert hier ueber eine
   Variable gefuehrt und der Bereich zentriert.

   Voreingestellt bleibt es bei 46rem — bestehende Seiten aendern sich
   also nicht. Fuer eine andere Breite genuegt am Element, an der Zeile
   oder ueber die Seitenklasse:  style="--ap-desc-max: 59rem" */
.academy-category-desc {
	max-inline-size: var(--ap-desc-max, 46rem);
	margin-inline: auto;
}

/* Passende Seitenklassen, im Menuepunkt unter "Seitenanzeige" */
.ap-desc-8  { --ap-desc-max: calc(var(--ap-wrap) / 12 * 8); }
.ap-desc-9  { --ap-desc-max: calc(var(--ap-wrap) / 12 * 9); }
.ap-desc-10 { --ap-desc-max: calc(var(--ap-wrap) / 12 * 10); }
.ap-desc-voll { --ap-desc-max: none; }


/* ---------- Podcast-Verweise ----------
   Uebernommen aus der bisherigen Seite. Vier Symbole nebeneinander mit
   Beschriftung darunter; auf schmalen Bildschirmen umbrechend statt
   gequetscht. */
ul.podcasts-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

ul.podcasts-list li { width: 100px; }

ul.podcasts-list li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .375rem;
	text-align: center;
	text-decoration: none;
	color: var(--ap-primary);
	font-size: .875rem;
	line-height: 1.3;
}
ul.podcasts-list li a:hover { color: var(--ap-accent); }

ul.podcasts-list li img {
	width: 50px;
	height: auto;
}

/* Die Zeilenumbrueche im Text stammen aus der Pflege; ein <br> vor dem
   Bild wuerde die Beschriftung sonst zusaetzlich abtrennen. */
ul.podcasts-list li a br { display: none; }


/* ---------- Modulstil "card" ----------
   Wird in der Seitenspalte und ueber dem Inhalt verwendet. Die Vorlage
   dazu liegt in html/layouts/chromes/card.php. */
.ap-modul + .ap-modul { margin-top: 1.5rem; }

.ap-modul__titel {
	margin: 0 0 1rem;
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--ap-primary);
}

.ap-modul__inhalt > :first-child { margin-top: 0; }
.ap-modul__inhalt > :last-child { margin-bottom: 0; }

/* In der Seitenspalte bekommt jedes Modul einen ruhigen Rahmen */
.ap-layout__side .ap-modul {
	padding: 1.5rem;
	background: var(--ap-surface);
	border-radius: 5px;
}


/* ---------- Benutzerprofil (com_users) ----------
   Betrifft beide Ansichten: das Profil ansehen und bearbeiten. Joomla
   gibt sie mit Bootstrap-Klassen aus (control-group, form-control, btn),
   die das Template nicht mitbringt — deshalb sind die noetigen Regeln
   hier nachgebildet. */
.com-users-profile,
.com-users-profile__edit {
	max-width: 44rem;
	margin-inline: auto;
}

.com-users-profile .page-header,
.com-users-profile__edit .page-header { margin-bottom: 2rem; }
.com-users-profile .page-header > *,
.com-users-profile__edit .page-header > * { margin: 0; }

/* ---- Profil ansehen ----
   Die Angaben stehen in fieldset-Bloecken mit legend. Ohne eigene Regeln
   zeichnet der Browser dort seine Standardrahmen. */
.com-users-profile fieldset {
	margin: 0 0 1.5rem;
	padding: 1.75rem;
	border: 1px solid var(--ap-border);
	border-radius: 5px;
}

.com-users-profile legend {
	width: auto;
	margin: 0 0 1.25rem;
	padding: 0 .5rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ap-primary);
}

.com-users-profile dl {
	display: grid;
	grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
	gap: .875rem 1.5rem;
	margin: 0;
	padding: 0;
	background: none;
}

/* Zeilen voneinander absetzen, ohne Linie unter der letzten */
.com-users-profile dl > dt:not(:first-of-type),
.com-users-profile dl > dd:not(:first-of-type) {
	padding-top: .875rem;
	border-top: 1px solid var(--ap-border);
}
.com-users-profile dt {
	margin: 0;
	font-weight: 700;
	color: var(--ap-primary);
}
.com-users-profile dd { margin: 0; color: var(--ap-text); }

/* Joomla traegt bei leeren Angaben einen Hinweistext ein */
.com-users-profile dd:empty::after { content: "—"; color: var(--ap-muted); }

@media (max-width: 767px) {
	.com-users-profile fieldset { padding: 1.25rem; }
	.com-users-profile dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.com-users-profile dl > dt:not(:first-of-type) { margin-top: .875rem; }
	.com-users-profile dl > dd:not(:first-of-type) { padding-top: 0; border-top: 0; }
	.com-users-profile dd { margin-bottom: .25rem; }
}

/* Werkzeugleiste mit dem Knopf zum Bearbeiten */
.com-users-profile__edit.btn-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	float: none;
}
.com-users-profile__edit.btn-toolbar .btn-group { display: flex; gap: .75rem; }

/* ---- Profil bearbeiten ---- */
.com-users-profile__edit-form.well {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.com-users-profile__edit-form fieldset {
	margin: 0 0 2rem;
	padding: 1.75rem;
	border: 1px solid var(--ap-border);
	border-radius: 5px;
}

.com-users-profile__edit-form legend {
	width: auto;
	margin: 0 0 1.25rem;
	padding: 0 .5rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ap-primary);
}

.com-users-profile__edit-form fieldset > p {
	margin: -.5rem 0 1.25rem;
	color: var(--ap-muted);
	font-size: .9375rem;
}

.com-users-profile__edit-form .control-group + .control-group { margin-top: 1.25rem; }

.com-users-profile__edit-form .control-label {
	display: block;
	margin-bottom: .375rem;
	font-size: .9375rem;
	font-weight: 600;
}
.com-users-profile__edit-form .control-label label { margin: 0; }
.com-users-profile__edit-form .star { color: var(--ap-accent); }

.com-users-profile__edit-form .form-control,
.com-users-profile__edit-form select,
.com-users-profile__edit-form textarea {
	display: block;
	width: 100%;
	padding: .8125rem 1.25rem;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-form);
	background: var(--ap-bg);
	font: inherit;
	font-size: 1rem;
	color: var(--ap-text);
}
.com-users-profile__edit-form textarea {
	border-radius: var(--ap-radius);
	min-height: 8rem;
	resize: vertical;
}
.com-users-profile__edit-form .form-control:focus,
.com-users-profile__edit-form select:focus,
.com-users-profile__edit-form textarea:focus {
	border-color: var(--ap-primary);
	outline: 2px solid rgba(67, 35, 51, .15);
	outline-offset: 1px;
}

.com-users-profile__edit-form .form-control-danger,
.com-users-profile__edit-form input.invalid { border-color: var(--ap-accent); }
.com-users-profile__edit-form .form-control-feedback {
	display: block;
	margin-top: .25rem;
	color: var(--ap-accent);
	font-size: .8125rem;
	font-weight: 400;
}

/* Kennwortfeld mit Knopf zum Sichtbarmachen */
.com-users-profile__edit-form .input-group { display: flex; align-items: stretch; }
.com-users-profile__edit-form .input-group .form-control {
	border-radius: var(--ap-radius-form) 0 0 var(--ap-radius-form);
}
.com-users-profile__edit-form .input-password-toggle {
	flex: none;
	display: grid;
	place-items: center;
	width: 3rem;
	margin-left: -1px;
	padding: 0;
	border: 1px solid var(--ap-border);
	border-radius: 0 var(--ap-radius-form) var(--ap-radius-form) 0;
	background: var(--ap-surface);
	cursor: pointer;
}

/* Auswahlfelder mit Ja und Nein */
.com-users-profile__edit-form fieldset.radio,
.com-users-profile__edit-form .form-check {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: 0;
	border: 0;
}
.com-users-profile__edit-form .form-check-input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--ap-primary); }

/* Knoepfe zum Speichern und Abbrechen */
.com-users-profile__edit-submit {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.5rem;
}
.com-users-profile__edit-submit .controls {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	width: 100%;
}

.com-users-profile .btn,
.com-users-profile__edit .btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .875rem 2rem;
	border: 2px solid var(--ap-accent);
	border-radius: var(--ap-radius-form);
	background: var(--ap-accent);
	color: #fff;
	font: inherit;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ap-speed), color var(--ap-speed);
}
.com-users-profile .btn:hover,
.com-users-profile__edit .btn:hover,
.com-users-profile__edit .btn:focus-visible {
	background: #fff;
	color: var(--ap-accent);
}

/* Abbrechen zurueckhaltender als Speichern */
.com-users-profile__edit .btn-danger,
.com-users-profile__edit .btn-secondary {
	border-color: var(--ap-border);
	background: var(--ap-bg);
	color: var(--ap-muted);
}
.com-users-profile__edit .btn-danger:hover,
.com-users-profile__edit .btn-secondary:hover {
	background: var(--ap-surface);
	border-color: var(--ap-primary);
	color: var(--ap-primary);
}

/* Die Symbole stammen aus einer Symbolschrift, die hier fehlt */
.com-users-profile [class^="icon-"],
.com-users-profile__edit [class^="icon-"] { display: none; }


/* ---------- Titel über dem Bild (Zusatzklasse "titleOverlay") ----------
   SP Page Builder gibt die Ueberschrift hinter dem Bild aus. Sie wird
   hier darueber gelegt: links unten, auf halber Bildbreite, damit sie
   ueber mehrere Zeilen laeuft. */
.titleOverlay .sppb-addon-content {
	position: relative;
}

.titleOverlay .sppb-addon-single-image-container img { display: block; }

.titleOverlay .sppb-addon-title {
	position: absolute;
	left: 10%;
	bottom: 8%;
	width: 50%;
	margin: 0;
	color: #fff;
	text-align: left;
}

@media (max-width: 767px) {
	.titleOverlay .sppb-addon-title { width: 70%; left: 6%; }
}


/* ---------- Newsletter-Archiv (com_acym) ----------
   Die Komponente reiht Link und Versanddatum flach aneinander. Das
   Skript fasst beides zu Karten zusammen; hier folgt die Gestaltung —
   dieselbe Anmutung wie die Beitragskarten im Blog. */
.acym__front__archive__title {
	margin: 0 0 1.5rem;
}

#acym__front__archive__search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	max-width: 32rem;
	margin: 0 0 2.5rem;
}
#acym__front__archive__search input[type="text"] {
	flex: 1 1 12rem;
	min-width: 0;
	padding: .8125rem 1.25rem;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-form);
	background: var(--ap-bg);
	font: inherit;
	font-size: 1rem;
	color: var(--ap-text);
}
#acym__front__archive__search input[type="text"]:focus {
	outline: none;
	border-color: var(--ap-accent);
}

/* Der Knopf traegt aus der Komponente die Klasse .subbutton. Diese ist
   weiter oben — fuer das Anmeldeformular — absolut gesetzt und wuerde
   den Knopf aus dem Feld heraus an den Seitenrand ziehen. Hier also
   zurueck in den Fluss neben das Eingabefeld, im Aussehen der uebrigen
   Knoepfe (.ap-btn). Auch die Farbe der Komponente wird ersetzt. */
#acym__front__archive__search button {
	position: static;
	right: auto;
	top: auto;
	flex: none;
	align-self: stretch;
	display: inline-block;
	height: auto;
	padding: .625rem 1.5rem;
	border: 2px solid var(--ap-accent);
	border-radius: var(--ap-radius-form);
	background: var(--ap-accent);
	color: #fff;
	font: inherit;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ap-speed), color var(--ap-speed);
}
#acym__front__archive__search button:hover,
#acym__front__archive__search button:focus-visible {
	background: #fff;
	color: var(--ap-accent);
}

.apx-archiv__raster {
	display: grid;
	gap: var(--ap-gap);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	margin-bottom: 2.5rem;
	--ap-kachel-spalten: 3;
}
@media (min-width: 576px) {
	.apx-archiv__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
	.apx-archiv__raster { grid-template-columns: repeat(var(--ap-kachel-spalten, 3), minmax(0, 1fr)); }
}

.apx-archiv__karte {
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
	background: var(--ap-bg);
	border: 1px solid var(--ap-karte-rand);
	border-radius: 5px;
	transition: box-shadow var(--ap-speed), transform var(--ap-speed);
}
.apx-archiv__karte:hover { box-shadow: var(--ap-shadow); transform: translateY(-2px); }

/* Titel — je nach Einstellung ein Verweis oder ein Fensteroeffner */
.apx-archiv__karte > a.acym__modal__handle,
.apx-archiv__karte .acym__front__archive__raw a {
	order: 2;
	color: var(--ap-primary);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.45;
	text-decoration: none;
}
.apx-archiv__karte > a.acym__modal__handle:hover,
.apx-archiv__karte .acym__front__archive__raw a:hover { color: var(--ap-accent); }
.apx-archiv__karte .acym__front__archive__raw { order: 2; margin: 0; }

/* Versanddatum ueber den Titel, wie die Kategorie im Blog */
.apx-archiv__karte .acym__front__archive__newsletter_sending-date {
	order: 1;
	margin: 0 0 .5rem;
	color: var(--ap-violett-60);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.4;
}