/*
 * Glossar im Auftritt von inspirezz (Schnitt 2.6). Farben und Schrift aus dem Kit der Seite (gemessen 26.10.2026): Text und
 * Kopf #2B2B2B, Akzent #EA6363, Grau #6B6B6B, Fläche #F5F5F7, Linie #DCDCE0, Schrift Poppins (lädt das Theme). Eigene
 * Werte statt der Elementor-Variablen, damit das Glossar ohne Elementor gleich bleibt.
 */
.glossar-seite {
	--g-text: #2b2b2b;
	--g-akzent: #ea6363;
	--g-akzent-dunkel: #c03737;
	--g-grau: #6b6b6b;
	--g-grau-hell: #9a9a9a;
	--g-flaeche: #f5f5f7;
	--g-linie: #dcdce0;
	--g-kopf: 80px; /* Höhe des Seitenkopfs, setzt glossar.js */
	--g-leiste: 60px;
	color: var(--g-text);
	font-family: "Poppins", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.7;
}
.glossar-seite *,
.glossar-seite *::before,
.glossar-seite *::after { box-sizing: border-box; }
.glossar-seite .glossar-innen { margin: 0 auto; max-width: 1180px; padding: 0 20px; }
.glossar-seite .glossar-lesebreite { max-width: 860px; }
.glossar-seite a { color: inherit; text-decoration: none; }
.glossar-seite a:focus-visible { outline: 2px solid var(--g-akzent); outline-offset: 2px; border-radius: 4px; }

.glossar-seite .glossar-augenbraue {
	color: var(--g-akzent);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .08em;
	margin: 0 0 .6em;
	text-transform: uppercase;
}
.glossar-seite .glossar-titel {
	color: var(--g-text);
	font-size: clamp(34px, 5vw, 52px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 .45em;
}

/* ---------- Übersicht ---------- */
.glossar-seite .glossar-band { background: var(--g-flaeche); padding: 72px 0 40px; text-align: center; }
.glossar-seite .glossar-einleitung { color: var(--g-grau); font-size: 18px; margin: 0 auto; max-width: 720px; }
.glossar-seite .glossar-suche { margin: 28px auto 0; max-width: 520px; position: relative; }
.glossar-seite .glossar-suche input {
	appearance: none;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='6.5'/%3E%3Cpath d='m13.5 13.5 5 5'/%3E%3C/svg%3E") no-repeat 18px 50%;
	border: 1px solid var(--g-linie);
	border-radius: 999px;
	color: var(--g-text);
	font: inherit;
	font-size: 16px;
	height: 52px;
	padding: 0 22px 0 50px;
	width: 100%;
}
.glossar-seite .glossar-suche input:focus { border-color: var(--g-akzent); box-shadow: 0 0 0 3px rgba(234, 99, 99, .18); outline: none; }

.glossar-seite .glossar-werkzeug {
	background: #fff;
	border-bottom: 1px solid var(--g-linie);
	position: sticky;
	top: var(--g-kopf);
	z-index: 5;
}
.glossar-seite .glossar-leiste ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 10px 0;
}
.glossar-seite .glossar-leiste a,
.glossar-seite .glossar-leiste span {
	align-items: center;
	border-radius: 6px;
	display: inline-flex;
	font-size: 15px;
	font-weight: 600;
	height: 38px;
	justify-content: center;
	min-width: 34px;
	padding: 0 6px;
}
.glossar-seite .glossar-leiste a { color: var(--g-text); transition: background-color .15s, color .15s; }
.glossar-seite .glossar-leiste a:hover { background: var(--g-flaeche); color: var(--g-akzent); }
.glossar-seite .glossar-leiste a[aria-current="true"] { background: var(--g-akzent); color: #fff; }
.glossar-seite .glossar-leiste span,
.glossar-seite .glossar-leiste a.glossar-aus { color: #c9c9ce; pointer-events: none; }

.glossar-seite .glossar-liste { padding-bottom: 80px; }
.glossar-seite .glossar-gruppe { margin-top: 44px; scroll-margin-top: calc(var(--g-kopf) + var(--g-leiste) + 16px); }
.glossar-seite .glossar-buchstabe {
	align-items: center;
	color: var(--g-akzent);
	display: flex;
	font-size: 44px;
	font-weight: 800;
	gap: 20px;
	line-height: 1;
	margin: 0 0 22px;
}
.glossar-seite .glossar-buchstabe::after { background: var(--g-linie); content: ""; flex: 1; height: 1px; }
.glossar-seite .glossar-karten {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}
.glossar-seite .glossar-karte a {
	background: #fff;
	border: 1px solid var(--g-linie);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 22px 24px 20px;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.glossar-seite .glossar-karte a:hover { border-color: var(--g-akzent); box-shadow: 0 10px 30px rgba(43, 43, 43, .08); transform: translateY(-2px); }
.glossar-seite .glossar-karte-titel { color: var(--g-text); font-size: 18px; font-weight: 600; line-height: 1.35; transition: color .2s; }
.glossar-seite .glossar-karte a:hover .glossar-karte-titel { color: var(--g-akzent); }
.glossar-seite .glossar-karte-text {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: var(--g-grau);
	display: -webkit-box;
	font-size: 15px;
	line-height: 1.6;
	margin-top: 8px;
	overflow: hidden;
}
.glossar-seite .glossar-karte-mehr { color: var(--g-akzent); font-size: 14px; font-weight: 600; margin-top: auto; padding-top: 14px; }
.glossar-seite .glossar-leer { color: var(--g-grau); margin: 48px 0; text-align: center; }

/* ---------- Eintrag ---------- */
.glossar-seite .glossar-pfad { margin: 40px 0 28px; }
.glossar-seite .glossar-pfad a { color: var(--g-grau); font-size: 15px; font-weight: 500; }
.glossar-seite .glossar-pfad a:hover { color: var(--g-akzent); }
.glossar-seite .glossar-text { font-size: 17px; line-height: 1.75; }
.glossar-seite .glossar-text h2,
.glossar-seite .glossar-text h3,
.glossar-seite .glossar-text h4 { color: var(--g-text); font-weight: 600; line-height: 1.3; margin: 1.6em 0 .6em; }
.glossar-seite .glossar-text h2 { font-size: 26px; }
.glossar-seite .glossar-text h3 { font-size: 22px; }
.glossar-seite .glossar-text h4 { font-size: 19px; }
.glossar-seite .glossar-text p { margin: 0 0 1.1em; }
.glossar-seite .glossar-text ul,
.glossar-seite .glossar-text ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.glossar-seite .glossar-text li { margin-bottom: .4em; }
.glossar-seite .glossar-text li::marker { color: var(--g-akzent); }
.glossar-seite .glossar-text a { color: var(--g-akzent-dunkel); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.glossar-seite .glossar-text a:hover { color: var(--g-akzent); }
.glossar-seite .glossar-text strong { font-weight: 600; }

.glossar-seite .glossar-mehr { background: var(--g-flaeche); margin-top: 64px; padding: 48px 0 64px; }
.glossar-seite .glossar-mehr-titel { font-size: 20px; font-weight: 700; margin: 0 0 16px; }
.glossar-seite .glossar-mehr-titel:not(:first-child) { margin-top: 40px; }
.glossar-seite .glossar-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.glossar-seite .glossar-chips a {
	background: #fff;
	color: var(--g-text);
	border: 1px solid var(--g-linie);
	border-radius: 999px;
	display: inline-block;
	font-size: 15px;
	padding: 7px 16px;
	transition: border-color .15s, color .15s;
}
.glossar-seite .glossar-chips a:hover { border-color: var(--g-akzent); color: var(--g-akzent); }
.glossar-seite .glossar-nachbarn { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
.glossar-seite .glossar-nachbar {
	background: #fff;
	color: var(--g-text);
	border: 1px solid var(--g-linie);
	border-radius: 8px;
	display: block;
	font-weight: 600;
	line-height: 1.4;
	padding: 18px 22px;
	transition: border-color .2s;
}
.glossar-seite .glossar-nachbar span { color: var(--g-grau); display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.glossar-seite .glossar-nachbar:hover { border-color: var(--g-akzent); color: var(--g-akzent); }
.glossar-seite .glossar-nachbar-nachher { grid-column: 2; text-align: right; }
.glossar-seite .glossar-mehr .glossar-leiste ul { justify-content: flex-start; padding: 0; }
.glossar-seite .glossar-mehr .glossar-leiste a { background: #fff; }

@media (max-width: 1024px) {
	.glossar-seite .glossar-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.glossar-seite { font-size: 16px; }
	.glossar-seite .glossar-band { padding: 48px 0 28px; }
	.glossar-seite .glossar-einleitung { font-size: 16px; }
	.glossar-seite .glossar-werkzeug .glossar-leiste ul {
		flex-wrap: nowrap;
		justify-content: flex-start;
		-webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
		mask-image: linear-gradient(to right, #000 85%, transparent);
		overflow-x: auto;
		padding-right: 40px;
		scrollbar-width: none;
	}
	.glossar-seite .glossar-werkzeug .glossar-leiste ul::-webkit-scrollbar { display: none; }
	.glossar-seite .glossar-karten { grid-template-columns: 1fr; gap: 14px; }
	.glossar-seite .glossar-gruppe { margin-top: 32px; }
	.glossar-seite .glossar-buchstabe { font-size: 36px; }
	.glossar-seite .glossar-nachbarn { grid-template-columns: 1fr; }
	.glossar-seite .glossar-nachbar-nachher { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.glossar-seite .glossar-karte a,
	.glossar-seite .glossar-karte-titel { transition: none; }
	.glossar-seite .glossar-karte a:hover { transform: none; }
}