/* LSI Wissen - Glossar, Frontend-Styles
   Farben verifiziert aus den Enfold Theme Options (Fund aus dem lsi-wissen-Projekt):
   Primary #348a83, Highlight/Hover #e58900, Ueberschrift #1f315a, Rahmen #dcdcdc
   Wichtig: KEINE Enfold ".container"-Klasse auf eigenen Wrappern verwenden,
   das fuehrt zu einem Ladereihenfolge-Konflikt bei Eigenschaften wie max-width. */

.lsi-glossar-wrap {
	max-width: 1210px;
	margin: 0 auto;
	padding: 20px;
}

/* Vertikaler Rhythmus als EIN System, nicht einzeln pro Element:
   - H1 bekommt spuerbar Luft, bevor irgendetwas anderes kommt.
   - Ueberschriften (h2/h3) stehen naeher an ihrem eigenen Inhalt als
     am vorherigen Abschnitt: mehr Abstand oben, wenig unten. */
.lsi-glossar-entry h1,
.lsi-glossar-wrap h1 {
	color: #1f315a;
	margin-bottom: 28px;
}

.lsi-glossar-entry h2,
.lsi-glossar-entry h3 {
	color: #1f315a;
	margin-top: 40px;
	margin-bottom: 12px;
}

.lsi-glossar-entry {
	line-height: 1.7;
}

.lsi-glossar-entry p {
	margin: 0 0 1em;
}

.lsig-kurzdefinition {
	font-size: 1.15em;
	line-height: 1.6;
	border-left: 4px solid #348a83;
	padding-left: 14px;
	margin: 0 0 28px;
}

.lsig-kurzdefinition strong {
	font-weight: 600;
}

.lsig-bild {
	font-style: italic;
	color: #444444;
	margin-bottom: 28px;
}

/* Nur noch EIN echter Farbblock auf der Seite: der Merksatz als
   bewusster Farbtupfer am Ende, kein "jedes Feld ist eine Box". */
.lsig-box {
	border-radius: 4px;
	padding: 16px 20px;
	margin: 32px 0;
	line-height: 1.6;
}

.lsig-box-merksatz {
	background: #1f315a;
	color: #ffffff;
	font-size: 1.1em;
	font-weight: 600;
	text-align: center;
}

/* Ruhige, farbige Beschriftung statt Rahmen fuer Praxisbeispiel/Abgrenzung.
   Label sitzt eng an seinem eigenen Absatz, Abstand kommt VOR dem Label. */
.lsig-label {
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 28px 0 4px;
}

.lsig-label:first-of-type {
	margin-top: 0;
}

/* Spezifischer als Enfolds generische p-Regel (laedt nach unserem CSS,
   siehe Hinweis oben), sonst gewinnt dort der Standard-Absatzabstand. */
.lsig-label + p {
	margin-top: 0;
}

.lsig-label-praxisbeispiel {
	color: #348a83;
}

.lsig-label-abgrenzung {
	color: #b56b00;
}

.lsig-quellen {
	font-size: 0.9em;
	color: #666666;
}

.lsig-az-list {
	columns: 3;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.lsig-az-list li a {
	color: #348a83;
	text-decoration: none;
}

.lsig-az-list li a:hover {
	color: #e58900;
}

/* Aufklapp-Elemente (details/summary) -- funktioniert ohne jedes JS,
   egal auf welcher WordPress-Umgebung das Plugin laeuft.
   Bewusst als leichte Trennlinie statt umschlossener Box, damit
   nicht jeder Abschnitt gleich schwer wirkt. */
.lsig-aufklappen {
	border: none;
	border-top: 1px solid #dcdcdc;
	border-radius: 0;
	margin: 0;
	padding: 18px 0;
}

.lsig-aufklappen summary {
	cursor: pointer;
	font-weight: 600;
	color: #1f315a;
	padding: 2px 0;
}

.lsig-aufklappen p {
	margin: 14px 0 4px;
}

.lsig-aufklappen[open] summary {
	color: #348a83;
}

/* FAQ-Eintraege bewusst leichter als das Praxisbeispiel:
   Praxisbeispiel ist der Star der Formel, FAQ ist Zusatz. */
.lsig-faq-item summary {
	font-size: 0.97em;
	font-weight: 500;
}

/* Hover-Vorschau bei verwandten Begriffen: reines CSS, kein AJAX. */
.lsig-tooltip {
	position: relative;
	border-bottom: 1px dotted #348a83;
	text-decoration: none;
}

.lsig-tooltip:hover::after {
	content: attr( data-tooltip );
	position: absolute;
	left: 0;
	bottom: 100%;
	margin-bottom: 6px;
	background: #1f315a;
	color: #ffffff;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 0.85em;
	white-space: normal;
	width: 240px;
	z-index: 10;
}

/* Live-Suche auf der Uebersichtsseite */
.lsig-suchfeld {
	width: 100%;
	max-width: 420px;
	padding: 10px 14px;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	margin: 16px 0 28px;
	font-size: 1em;
}

.lsig-keine-treffer {
	color: #666666;
}

.lsig-letter-group[hidden] {
	display: none;
}

@media (max-width: 782px) {
	.lsig-az-list {
		columns: 1;
	}
}