#poosch-ki-glossar {
    max-width: none;
}

.glossar-hero {
    text-align: center;
    padding: 56px 24px 56px;
    background: #F3F8FB;
}

.glossar-hero__title {
    color: #1D2327;
	text-align: center;
	font-family: Inter;
	font-size: 56px;
	font-weight: 500;
}

.glossar-hero__desc {
    max-width: 846px;
    margin: 16px auto;
    color: #6B6D72;
	text-align: center;
	font-family: Inter;
	font-size: 16px;
	line-height: 160%; /* 25.6px */
}

.glossar-hero__cta {
    color: #2271B1;
	text-align: center;
	font-family: Inter;
	font-size: 16px;
	font-weight: 600;
	line-height: 160%; /* 25.6px */
    margin: 0 0 8px;
}

.glossar-search-wrap {
    display: flex;
	max-width: 630px;
	padding: 4px 4px 4px 20px;
	justify-content: space-between;
	align-items: center;
	border-radius: 32px;
	border: 1px solid #E7E9EE;
	background: #FFF;
	margin: 0 auto;
}

.glossar-search-wrap input {
	width: 225px !important;
    border: none !important;
    outline: none !important;
    background: none !important;
	font-family: Inter !important;
	font-size: 16px !important;
	line-height: 160% !important; /* 25.6px */
	margin: 0 !important;
	padding: 0 !important;
}

.glossar-search__input::placeholder {
    color: #6B6D72;
}

.glossar-search__btn {
    display: flex;
    padding: 16px;
    align-items: center;
    gap: 10px;
    border-radius: 32px;
    background: #2271B1;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
}

.glossar-search__btn:focus,
.glossar-search__btn:active {
    outline: none;
    box-shadow: none;
    border: none;
}

.glossar-search__btn--loading svg {
    opacity: 0.4;
}

.glossar-alpha-nav {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 6px;
    align-items: flex-start;
    border-radius: 16px;
    border: 1px solid #E7E9EE;
    background: #FFF;
    gap: 6px;
    width: 100%;
    max-width: 1172px;
}

.glossar-alpha-nav__letter {
    display: flex;
	width: 32px;
	padding: 12px 4px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	color: #1D2327;
	text-align: center;
	font-family: Inter;
	font-size: 20px;
	font-weight: 600;
	line-height: 160%; /* 32px */
    text-decoration: none;
    transition: color 0.3s, background 0.3s;
}

.glossar-alpha-nav__letter:hover {
    color: #2563eb;
    text-decoration: none;
}

.glossar-alpha-nav__letter--active {
    color: #2563eb;
}

.glossar-alpha-nav__letter--disabled {
    color: #b0bec5;
    cursor: default;
    pointer-events: none;
}

.poosch-ki-glossar-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px 56px;
}

.poosch-glossar-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 56px;
}

.glossar-group {
    display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 0 0;
}

.glossar-group__header {
    display: flex;
	width: 100%;
	padding: 0 24px 6px 24px;
	margin-bottom: 10px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 16px;
	background: #F3F8FB;
}

.glossar-group__header span{
	flex: 1 0 0;
	color: #2271B1;
	font-family: Inter;
	font-size: 40px;
	font-weight: 600;
	line-height: 160%; /* 64px */
}

.glossar-group__letter {
    font-size: var(--glossar-letter-size, 32px);
    font-weight: 700;
    color: var(--glossar-letter-color, #2563eb);
    line-height: 1;
}

.glossar-group__list {
    list-style: none;
    margin: 0;
	padding-left: 24px;
}

.glossar-group__item {
    margin-bottom: 10px !important;
	position: unset !important;
	padding-left: 0 !important;
}

.glossar-group__item a{
    color: #1D2327;
	font-family: Inter;
	font-size: 16px;
	line-height: 160%; /* 25.6px */
}

.glossar-group__item:last-child {
    margin-bottom: 0;
}

.glossar-group__link {
    font-size: var(--glossar-item-size, 15px);
    font-weight: 400;
    color: var(--glossar-item-color, #333);
    text-decoration: none;
    line-height: 1.4;
    display: block;
}

.glossar-group__link:hover {
    color: #2563eb;
}

.glossar-no-results {
    text-align: center;
    padding: 40px;
    color: #888;
    font-size: 1rem;
    grid-column: 1 / -1;
}

@media (max-width: 1100px) {
    .poosch-glossar-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .poosch-glossar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .glossar-hero__title {
        font-size: 2rem;
    }

    .poosch-ki-glossar-container {
        padding-left: 16px;
        padding-right: 16px;
    }
	
	.glossar-alpha-nav{
		justify-content: unset;
		max-width: 362px;
		display: flex;
		padding: 4px;
		align-items: flex-start;
		align-content: flex-start;
		flex-wrap: wrap;
		border-radius: 16px;
		border: 1px solid #E7E9EE;
		background: #FFF;
		margin: 0 auto;
	}
	
	.glossar-alpha-nav__letter{
		display: flex;
		width: 32px;
		height: 32px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 10px;
		flex-shrink: 0;
		aspect-ratio: 1/1;
		
		text-align: center;
		font-family: Inter;
		font-size: 20px;
		font-weight: 600;
		line-height: 160%; /* 32px */
	}
	
	.glossar-alpha-nav-wrapper{
		margin-top: -85px !important;
	}
	
	.glossar-group__header span{
		font-size: 24px;
	}
	
	.glossar-hero{
		height: 520px;
	}
}

@media (max-width: 480px) {
    .poosch-glossar-grid {
        grid-template-columns: 1fr;
    }
}

.te-hidden {
    display: none !important;
}

.see-more-glossar,
.see-less-glossar {
    display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	padding-left: 24px;
}

.see-more-glossar,
.see-less-glossar span{
	color: #2271B1;
	font-family: Inter;
	font-size: 16px;
	font-weight: 600;
	line-height: 160%; /* 25.6px */
}

.glossar-words {
    overflow: hidden;
    transition: all 0.2s ease;
}

.glossar-words-inner {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
    overflow: hidden;
}

.glossar-words-inner > ul {
    overflow: hidden;
    min-height: 0;
}

.glossar-words-inner.is-open {
    grid-template-rows: 1fr;
}

.see-more-glossar.is-hidden,
.see-less-glossar.is-hidden {
    display: none !important;
}