/* ========================================
   HEROIC GLOSSARY – STYLES
   ======================================== */

/* ========================================
   1. Glossary Tags (Frontend)
   ======================================== */

.glossary-tag {
	display: inline-block;
	padding: 4px 12px;
	margin: 5px;
	background-color: #e7f3ff;
	border: 1px solid #b3d9ff;
	border-radius: 4px;
	font-size: 13px;
	color: #0066cc;
	font-weight: 500;
}

/* ========================================
   2. Glossary Anchor (Sprungmarke)
   ======================================== */

.glossary-anchor {
	position: relative;
	scroll-margin-top: 100px; /* Abstand beim Anspringen (für fixed Header) */
}

/* ========================================
   3. Tag-Filter über Glossar (Frontend)
   ======================================== */

.glossary-tags-filter {
	margin-bottom: 30px;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;
}

.glossary-tags-filter h3 {
	margin: 0 0 15px;
	font-size: 18px;
}

.glossary-tags-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* Filter-Buttons (mit Webflow-Klassen-Kompatibilität) */  /*
.g-btn.w-button.glossary-tag-filter {
	margin: 5px;
	padding: 8px 16px;
	background-color: #fff;
	border: 2px solid #ddd;
	border-radius: 20px;
	font-size: 14px;
	color: #333;
	cursor: pointer;
	transition: all 0.3s ease;
}

.g-btn.w-button.glossary-tag-filter:hover {
	background-color: #e9ecef;
	border-color: #999;
}

.g-btn.w-button.glossary-tag-filter.active,
.g-btn.w-button.glossary-tag-filter.active:hover {
	background-color: #dd2b5c;
	border-color: #dd2b5c;
	color: white;
	background-image: none;
	padding: 10px 20px;
}*/


.g-btn.w-button.glossary-tag-filter.active {
	background-color: #dd2b5c;
}

.g-btn.w-button.glossary-tag-filter.active:hover {
	background-image: none;
	padding: 10px 20px;
}

.g-btn.w-button.glossary-tag-filter {
	margin: 5px;
}

/* ========================================
   4. Glossary Block Styling (Heroic Plugin)
   ======================================== */

.hg-glossary .hg-glossary__header {
	background-color: #e0e9ff;
	padding: 20px;
	border-radius: 20px;
}

.hg-glossary.is-style-boxed {
	padding: 0;
	border-radius: 20px;
}

.hg-glossary.is-style-boxed .hg-content {
	padding: 20px;
}

.hg-glossary.is-style-boxed .hg-content__letter {
	color: #dd2b5c;
	font-size: 42px;
	border-bottom-color: lightgray !important;
}

/* Deaktivierte Buchstaben */
.hg-content__letter.htgb_disabled {
	color: #999 !important;
	pointer-events: none;
}

/* ========================================
   5. Gutenberg Editor Styles (Backend only)
   ======================================== */

/* Tags im Editor */
.editor-styles-wrapper .glossary-tag {
	/* Identisch mit Frontend – daher kann man oft denselben Code nutzen */
	/* Keine Duplikation nötig, wenn du die gleichen Stile willst */
	/* (Belassen, falls du später abweichende Editor-Stile brauchst) */
}

/* Sprungmarken im Editor – visuelle Markierung */
.editor-styles-wrapper .glossary-anchor {
	position: relative;
	font-style: italic;
	background-color: #e0e0e0;
	padding: 0 2px;
	border-radius: 2px;
}

.editor-styles-wrapper .glossary-anchor::before {
	content: "#";
	margin-right: 2px;
	color: #666;
	font-style: normal;
}