/* =========================================================
ZUFALLS-BUTTON
========================================================= */

.lex-quiz-button {

display: inline-flex;

align-items: center;

gap: 10px;

padding: 13px 26px;

border: 2px solid var(--dark);

border-radius: 100px;

background: var(--pink);

color: var(--dark);

font-family: inherit;

font-size: 0.82rem;

font-weight: 700;

cursor: pointer;

transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;

}

.lex-quiz-button:hover {

transform: translateY(-2px);

background: var(--dark);

color: var(--white);

}

.lex-quiz-icon {

display: inline-block;

font-size: 1.1rem;

transition: transform 0.4s ease;

}

.lex-quiz-button:hover .lex-quiz-icon {

transform: rotate(25deg);

}

/* =========================================================
SUCH- & FILTERBEREICH
========================================================= */

.lex-tools {

padding: 30px 55px 28px;

background: var(--mint);

border-bottom:
    1px solid
    rgba(81,75,87,0.08);

}

.lex-search-box {

position: relative;

max-width: 690px;

height: 54px;

margin: 0 auto 23px;

display: flex;

align-items: center;

border:
    2px solid
    var(--pink);

border-radius: 100px;

background: var(--white);

transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;

}

.lex-search-box:focus-within {

border-color: var(--lilac);

box-shadow:
    0 6px 22px
    rgba(183,182,225,0.25);

}

.lex-search-box .search-symbol {

width: 52px;

flex: 0 0 52px;

text-align: center;

color: var(--lilac);

font-size: 1.55rem;

line-height: 1;

}

.lex-search-box input {

flex: 1;

min-width: 0;

height: 100%;

padding: 0 12px 0 0;

border: 0;

outline: none;

background: transparent;

color: var(--dark);

font-size: 0.88rem;

}

.lex-search-box input::placeholder {

color: #aaa4ae;

}

/* =========================================================
FILTER (Basis – fehlte bisher komplett auf dieser Seite,
dadurch wirkten die Buttons eckig/unstyled)
========================================================= */

/* Kategorie-Buttons: einheitlich hell lila statt eckig/bunt */

.lex-filter-tag {

background: var(--pink);

border-color: var(--pink);

color: var(--dark);

}

.lex-filter-tag:hover,
.lex-filter-tag.active {

border-color: var(--dark);

box-shadow:
    inset 0 0 0 1px
    var(--dark);

}

/* =========================================================
ERGEBNISZEILE
========================================================= */

.lex-result-line {

padding: 24px 55px 14px;

display: flex;

align-items: center;

justify-content: space-between;

color: var(--soft-dark);

font-size: 0.72rem;

}

.lex-result-line strong {

color: var(--dark);

}

.lex-result-decoration {

color: var(--yellow);

font-size: 1.1rem;

}

/* =========================================================
LEXIKON-INHALT
========================================================= */

.lex-content {

padding: 10px 55px 85px;

display: flex;

flex-direction: column;

gap: 55px;

max-width: 900px;

margin: 0 auto;

}

.lex-group {

transition: opacity 0.2s ease;

}

.lex-group.hidden {

display: none;

}

.lex-group-header {

display: flex;

align-items: center;

gap: 14px;

margin-bottom: 20px;

}

.lex-group-header h2 {

font-size: clamp(1.6rem, 3vw, 2.1rem);

}

.lex-group-badge {

padding: 6px 15px;

border-radius: 100px;

background: var(--pink);

color: var(--dark);

font-size: 0.65rem;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 0.07em;

white-space: nowrap;

}

/* =========================================================
FAQ-ITEMS AUSBLENDEN (Filter/Suche)
========================================================= */

.faq-item.hidden {

display: none;

}

/* =========================================================
LISTENPUNKTE IN DEN ANTWORTEN
========================================================= */

.lex-points {

margin: 10px 0 14px;

padding: 0;

list-style: none;

display: flex;

flex-direction: column;

gap: 6px;

}

.lex-points li {

position: relative;

padding-left: 18px;

color: var(--soft-dark);

font-size: 0.84rem;

line-height: 1.6;

}

.lex-points li::before {

content: "";

position: absolute;

left: 0;
top: 0.55em;

width: 6px;
height: 6px;

border-radius: 50%;

background: var(--pink);

}

/* =========================================================
HIGHLIGHT (Zufälliger Begriff)
========================================================= */

.lex-highlight {

animation: lex-pulse 1.2s ease;

}

@keyframes lex-pulse {

0% {

    box-shadow:
        0 0 0 0
        rgba(229,166,193,0.55);

}

100% {

    box-shadow:
        0 0 0 16px
        rgba(229,166,193,0);

}

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 950px) {

.lex-tools {

    padding: 28px 35px;

}

.lex-result-line {

    padding-left: 35px;
    padding-right: 35px;

}

.lex-content {

    padding: 10px 35px 70px;

}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

.lex-quiz-button {

    padding: 12px 20px;

    font-size: 0.78rem;

}

.lex-tools {

    padding: 23px 20px;

}

.lex-search-box {

    height: 50px;

}

.lex-result-line {

    padding: 22px 20px 12px;

}

.lex-content {

    padding: 10px 20px 60px;

    gap: 42px;

}

.lex-group-header {

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

}

.faq-question {

    padding: 17px 18px;

}

.faq-answer {

    padding: 0 18px 20px 62px;

}

}

/* =========================================================
REDUZIERTE BEWEGUNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

.lex-quiz-icon,
.lex-quiz-button,
.lex-highlight {

    animation: none !important;

    transition: none !important;

}

}