/* Lost& Klartext-Lexikon — Eintrags-Layout (Block 797) + Glossar-Übersicht (/wissen/).
   Bewusst neutrale Grautöne + geerbte Typo, funktioniert auf hellen und dunklen Sektionen. */

/* === Lexikon-Eintrag ===
   Layout (Spalten, Abstände) liegt im Uncode Content Block 797 und ist dort
   im Builder editierbar — dieses CSS macht nur Typografie und Detail-Politur.
   Struktur: Zurück-Link → Kicker → Titel → Lead-Definition | Hauptspalte mit
   nummerierten Abschnitten, Seitenspalte mit Brücke/Quellen/Verwandten. */

.lex-zurueck {
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .14em;
	margin-bottom: 2.5em;
}
.lex-zurueck a { text-decoration: none; opacity: .55; }
.lex-zurueck a:hover { opacity: 1; }

/* Kopfzeile läuft über die volle Breite der Builder-Spalte (Vorgabe @lorenz) */

.lex-meta {
	font-size: .72em;
	text-transform: uppercase;
	letter-spacing: .18em;
	opacity: .5;
	margin-bottom: 1.75em;
}
h1.lex-titel {
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	line-height: 1.12;
	letter-spacing: -.015em;
	margin-bottom: .5em;
}
.lex-definition {
	font-size: 1.45em;
	line-height: 1.55;
	margin-bottom: 0;
}

/* Abschnitte: nummeriert wie die 01–04-Prozesse der Service-Seiten */
body.single-wissen { counter-reset: lexsec; }
.lex-abschnitt-titel {
	margin-top: 3em;
	margin-bottom: .9em;
	font-size: 1.55em;
	line-height: 1.25;
}
.lex-abschnitt-titel:first-child { margin-top: 0; }
.lex-abschnitt-titel:not(.lex-titel-neben) { counter-increment: lexsec; }
.lex-abschnitt-titel:not(.lex-titel-neben)::before {
	content: counter(lexsec, decimal-leading-zero);
	display: block;
	font-size: .55em;
	letter-spacing: .2em;
	opacity: .4;
	margin-bottom: .6em;
}
.lex-titel-neben {
	font-size: .82em;
	text-transform: uppercase;
	letter-spacing: .16em;
	opacity: .55;
	margin-top: 3.75em;
	margin-bottom: .25em;
}

/* Fließtext: mehr Größe, Zeilenluft und Kontrast als der Theme-Default */
.lex-abschnitt {
	font-size: 1.06em;
	line-height: 1.75;
}
body.single-wissen .lex-abschnitt,
body.single-wissen ul.lex-quellen { color: #4a4d50; }
.lex-abschnitt p { margin-bottom: 1.15em; }
.lex-abschnitt p:last-child { margin-bottom: 0; }

/* Quellen: ruhige Liste mit Hairlines statt Bullet-Points */
ul.lex-quellen {
	list-style: none;
	padding: 0;
	margin-top: 1em;
}
ul.lex-quellen li {
	padding: 1em 0;
	margin: 0;
	border-bottom: 1px solid rgba(127, 127, 127, .18);
	font-size: .95em;
	line-height: 1.65;
}
ul.lex-quellen li:first-child { border-top: 1px solid rgba(127, 127, 127, .18); }
ul.lex-quellen li a { font-weight: 600; }

/* Brücke: der eine hervorgehobene Kasten des Eintrags (sitzt oben in der Seitenspalte).
   Ecken im Lost&-Signature-Muster: drei rund, unten rechts eckig. */
.lex-bruecke {
	margin-top: 0;
	padding: 1.9em 2.1em;
	background: rgba(127, 127, 127, .07);
	border-radius: 25px 25px 0 25px;
}
.lex-bruecke p { margin: 0; line-height: 1.7; }
.lex-bruecke a { font-weight: 600; white-space: nowrap; }

/* Seitenspalte: eine Stufe kleiner und ruhiger als die Hauptspalte */
.lex-aside .lex-titel-neben { margin-top: 2.75em; }
.lex-aside ul.lex-quellen li { font-size: .88em; line-height: 1.6; }
.lex-aside .lex-bruecke { font-size: .95em; }
@media (min-width: 960px) {
	.lex-aside { position: sticky; top: 110px; align-self: flex-start; }
}

ul.lex-verwandte {
	list-style: none;
	margin-top: 1em;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
}
ul.lex-verwandte li a {
	display: inline-block;
	padding: .4em 1em;
	border: 1px solid rgba(127, 127, 127, .35);
	border-radius: 9999px 9999px 0 9999px;
	text-decoration: none;
	font-size: .9em;
}
ul.lex-verwandte li a:hover { border-color: currentColor; }

/* === Glossar-Übersicht ===
   Karten-Zeilen: Begriff links, Cluster-Badge rechts, kuratierte
   Kurzbeschreibung, klarer Weiterlese-Link. Filter über Such-Feld +
   Cluster-Pills (Buttons, kein <select> — Theme-Select-Styling kollidierte). */

.lex-glossar-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em 1.5em;
	margin-bottom: 1.25em;
}
.lex-glossar-filter input[type="search"] {
	flex: 1 1 260px;
	max-width: 380px;
	padding: .75em 1.1em;
	background: transparent;
	border: 1px solid rgba(127, 127, 127, .4);
	border-radius: 9999px 9999px 0 9999px;
	color: inherit;
	font: inherit;
	font-size: .95em;
	-webkit-appearance: none;
	appearance: none;
}
.lex-glossar-filter input[type="search"]:focus {
	outline: none;
	border-color: currentColor;
}
.lex-glossar-pills {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}
.lex-glossar-pills button {
	padding: .55em 1.1em;
	background: transparent;
	border: 1px solid rgba(127, 127, 127, .4);
	border-radius: 9999px 9999px 0 9999px;
	color: inherit;
	font: inherit;
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .08em;
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}
.lex-glossar-pills button:hover { border-color: currentColor; }
.lex-glossar-pills button.ist-aktiv {
	background: #111;
	border-color: #111;
	color: #fff;
}

.lex-glossar-alpha {
	display: flex;
	flex-wrap: wrap;
	gap: .3em;
	margin-bottom: 1em;
}
.lex-glossar-alpha a,
.lex-glossar-alpha span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.9em;
	height: 1.9em;
	font-size: .8em;
	text-decoration: none;
	border-radius: .3em;
	border: 1px solid rgba(127, 127, 127, .28);
	color: inherit;
	transition: border-color .15s;
}
.lex-glossar-alpha span,
.lex-glossar-alpha a.ist-leer {
	opacity: .22;
	pointer-events: none;
	border-style: dashed;
}
.lex-glossar-alpha a:hover { border-color: currentColor; }

.lex-glossar-buchstabe {
	font-size: .82em;
	text-transform: uppercase;
	letter-spacing: .16em;
	opacity: .5;
	margin: 2em 0 .75em;
}
.lex-glossar-gruppe:first-of-type .lex-glossar-buchstabe { margin-top: 1em; }
ul.lex-glossar-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .9em;
}
.lex-glossar-item a {
	display: block;
	padding: 1.6em 1.9em;
	border: 1px solid rgba(127, 127, 127, .3);
	border-radius: 25px 25px 0 25px;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s, box-shadow .15s;
}
.lex-glossar-item a:hover {
	border-color: currentColor;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
}
.lex-glossar-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5em 1em;
}
.lex-glossar-begriff {
	margin: 0;
	font-size: 1.25em;
}
.lex-glossar-cluster {
	font-size: .7em;
	text-transform: uppercase;
	letter-spacing: .1em;
	opacity: .65;
	white-space: nowrap;
	border: 1px solid rgba(127, 127, 127, .35);
	border-radius: 9999px 9999px 0 9999px;
	padding: .35em .9em;
}
.lex-glossar-teaser {
	margin: .7em 0 .5em;
	opacity: .75;
	max-width: 52em;
	line-height: 1.65;
}
.lex-glossar-mehr {
	display: block;
	text-align: right;
	font-size: .82em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.lex-glossar-item a:hover .lex-glossar-mehr { text-decoration: underline; }
.lex-glossar-entwurf {
	font-size: .5em;
	vertical-align: middle;
	text-transform: uppercase;
	letter-spacing: .1em;
	border: 1px solid rgba(127, 127, 127, .5);
	border-radius: 9999px 9999px 0 9999px;
	padding: .25em .7em;
	margin-left: .8em;
	opacity: .6;
	white-space: nowrap;
}
.lex-glossar-keine,
.lex-glossar-leer { opacity: .6; margin-top: 2em; }

@media (max-width: 599px) {
	.lex-glossar-kopf { flex-direction: column; align-items: flex-start; gap: .5em; }
	.lex-glossar-item a { padding: 1.25em 1.25em; }
}