/* Animation für h1#klarheit - Blur-Effekt */
@keyframes clarity-blur {
    0% { filter: blur(0px); }
    40% { filter: blur(0px); }  /* Bleibe 40% der Zeit klar */
    50% { filter: blur(8px); }  /* Werde innerhalb von 10% sehr unscharf */
    60% { filter: blur(8px); }  /* Bleibe 10% der Zeit unscharf */
    100% { filter: blur(0px); } /* Werde wieder klar über 40% der Zeit */
}

h1#klarheit {
    animation: clarity-blur 6s infinite ease-in-out;
    text-align: center;
    letter-spacing: 1px;
}

.klarheit-referenz {
    margin-bottom: 30px;
    padding: 15px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.zitat {
    /* font-size from base styles */
    line-height: 1.6;
    margin-bottom: 10px;
}

.autor {
    text-align: left;
    font-weight: normal;
}

.autor a {
    color: #0066cc;
    text-decoration: none;
}

.autor a:hover {
    text-decoration: underline;
}

/* Match-List Styling */
.match-list {
    margin: 10px 0 15px 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.toggle-info-button {
    margin: 10px 0;
    padding: 5px 10px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    /* font-size from base styles */
    transition: background-color 0.2s;
}

.toggle-info-button:hover {
    background-color: #e9ecef;
}

.match-list ul {
    list-style-type: none;
    padding-left: 10px;
}

.match-list li {
    margin-bottom: 4px;
}

.match {
    color: #006400; /* Dunkelgrün */
    font-weight: bold;
}

.mismatch {
    color: #8B0000; /* Dunkelrot */
}

/* Scoring Hintergrundfarben */
.score-positive-3 {
    background-color: #d4edda;
}

.score-positive-2 {
    background-color: #dff1e3;
}

.score-positive-1 {
    background-color: #e7f5ea;
}

.score-neutral {
    background-color: #f8f9fa;
}

.score-negative-1 {
    background-color: #f8ebeb;
}

.score-negative-2 {
    background-color: #f5dfdf;
}

.score-negative-3 {
    background-color: #f8d7da;
}

/* Formular Styling */
.dimension {
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
}