/* =========================================
   ths-glossar.css – TRAUPE Glossar Styles
   Zentrale CSS-Datei für das Glossar
   traupe.de
   28/04/2026 09:20
   ========================================= */

/* ---- Wrapper ---- */
.ths-glossar {
	font-family: inherit;
	margin-top: 10px;
}

/* ---- A–Z Navigation ---- */
.ths-az {
	background: #f4f8fb;
	border: 1px solid #d0e4ef;
	border-radius: 6px;
	padding: 12px 18px;
	line-height: 2;
	font-size: 0.97rem;
}

.ths-az a {
	color: #004b7a;
	font-weight: 600;
	text-decoration: none;
	padding: 2px 5px;
	border-radius: 3px;
	transition: background 0.15s ease, color 0.15s ease;
}

.ths-az a:hover {
	background: #004b7a;
	color: #fff;
}

/* ---- Buchstaben-Header background: #004b7a ---- */
.ths-glossar h2 {
	background: #006A9C;
	color: #fff !important;
	font-size: 1.6rem;
	font-weight: 700;
	padding: 10px 20px;
	margin: 40px 0 16px 0;
	border-radius: 6px;
	letter-spacing: 0.04em;
}

/* Erster Buchstabe ohne großen Abstand oben */
.ths-glossar h2:first-of-type {
	margin-top: 24px;
}

/* ---- Definitions-Liste ---- */
.ths-glossar dl {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
}

/* ---- dt ausblenden – Begriff steht im gl-term Header ---- */
.ths-glossar dt {
	display: none;
}

/* ---- Card ---- */
.ths-glossar dd {
	background: #fff;
	border: 1px solid #dde8f0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 75, 122, 0.06);
	margin: 0;
	padding: 0;
	transition: box-shadow 0.2s ease;
}

.ths-glossar dd:hover {
	box-shadow: 0 4px 16px rgba(0, 75, 122, 0.12);
}

/* Begriff-Header oben in der Card */
.ths-glossar dd .gl-term {
	background: #eef5f9;
	border-bottom: 2px solid #004b7a;
	padding: 10px 18px;
	font-weight: 700;
	font-size: 1.02rem;
	color: #004b7a;
}

/* Inhalt der Card */
.ths-glossar dd .gl-body {
	padding: 14px 18px;
	line-height: 1.75;
	color: #333;
	font-size: 0.96rem;
}

/* Label-Wörter wie "Definition:", "Kontext:" fett */
.ths-glossar dd .gl-body strong {
	color: #004b7a;
}

/* Listen in der Card */
.ths-glossar dd .gl-body ul {
	padding-left: 18px;
	margin: 8px 0 10px 0;
	list-style-type: disc;
}

.ths-glossar dd .gl-body ul li {
	font-size: inherit !important;
	margin-bottom: 4px;
}

/* Links-Zeile am unteren Rand der Card */
.ths-glossar dd .gl-links {
	border-top: 1px solid #e4eef5;
	background: #f8fbfd;
	padding: 9px 18px;
	font-size: 0.9rem;
	color: #555;
}

.ths-glossar dd .gl-links a {
	color: #004570 !important;             /* ← von #004b7a auf #003d63 */
	text-decoration: underline;
	text-decoration-thickness: 1.5px !important;
	text-underline-offset: 2px;
	font-weight: 500 !important;
}

.ths-glossar dd .gl-links a:hover {
	color: #0066a2;
}

/* -------------------------------------------------------
   Glossar-Links (gepunktet, class="gl")
   Vier Selektoren für maximale Spezifität gegen
   Shop-eigene Link-Styles in .html-editor-content
------------------------------------------------------- */
.html-editor-content .ths-glossar dd .gl-body a.gl:not(.btn),
.html-editor-content .ths-glossar dd .gl-links a.gl:not(.btn),
.ths-glossar dd .gl-body a.gl,
.ths-glossar dd .gl-links a.gl {
	font-weight: 600 !important;
	text-decoration-line: underline !important;
	text-decoration-style: dotted !important;
	text-decoration-thickness: 1.5px !important;
	text-decoration-color: #004b7a !important;
	text-underline-offset: 3px !important;
	color: #004b7a !important;
}

/* ---- Trennlinie zwischen Abschnitten ---- */
.ths-glossar hr {
	border: none;
	border-top: 1px solid #dde8f0;
	margin: 8px 0 0 0;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
	.ths-glossar h2 {
		font-size: 1.3rem;
		padding: 8px 14px;
	}

	.ths-glossar dd .gl-term {
		font-size: 0.97rem;
		padding: 9px 14px;
	}

	.ths-glossar dd .gl-body {
		padding: 12px 14px;
		font-size: 0.93rem;
	}

	.ths-glossar dd .gl-links {
		padding: 8px 14px;
	}
}