/* ================================================================
   Feedback-Seite
   WCAG 2.1 AA
   ================================================================ */

.feedback-page
{
    min-height: 100%;
    background: var(--color-background, #f8fafc);
    padding: 2rem 1rem 4rem;
    overflow-y: auto;
}

.feedback-container
{
    max-width: 680px;
    margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────────────── */

.feedback-header
{
    margin-bottom: 2rem;
}

.feedback-header__title
{
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--color-text, #0f172a);
}

.feedback-header__subtitle
{
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ── Erfolgs-Banner ─────────────────────────────────────────── */

.feedback-success
{
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

/* ── Formular ───────────────────────────────────────────────── */

.feedback-form
{
    background: var(--color-background, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Kategorie ──────────────────────────────────────────────── */

.feedback-category-fieldset
{
    border: none;
    padding: 0;
    margin: 0;
}

.feedback-categories
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 0.4rem;
}

@media (max-width: 500px)
{
    .feedback-categories { grid-template-columns: 1fr 1fr; }
}

.feedback-category
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.75rem 0.5rem;
    border: 2px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    background: var(--color-background, #fff);
    transition: border-color 0.12s, background 0.12s;
}

.feedback-category input[type="radio"]
{
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.feedback-category:hover
{
    border-color: var(--color-primary, #0057b7);
    background: #f0f7ff;
}

.feedback-category.is-selected
{
    border-color: var(--color-primary, #0057b7);
    background: #f0f7ff;
    color: var(--color-primary, #0057b7);
}

.feedback-category input:focus-visible ~ .feedback-category__label
{
    outline: 3px solid #0057b7;
    outline-offset: 2px;
    border-radius: 2px;
}

.feedback-category__icon { font-size: 1.5rem; line-height: 1; }
.feedback-category__label { font-size: 0.8rem; font-weight: 600; line-height: 1.2; }

/* ── Felder ─────────────────────────────────────────────────── */

.feedback-row
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 520px)
{
    .feedback-row { grid-template-columns: 1fr; }
}

.feedback-field
{
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.feedback-label
{
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.feedback-label__optional
{
    font-weight: 400;
    font-size: 0.8rem;
    color: #94a3b8;
}

.feedback-field input,
.feedback-field textarea
{
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    font-size: 0.9375rem;
    font-family: inherit;
    background: var(--color-background, #fff);
    color: var(--color-text, #0f172a);
    width: 100%;
    box-sizing: border-box;
}

.feedback-field textarea
{
    resize: vertical;
    line-height: 1.6;
}

.feedback-field input:focus,
.feedback-field textarea:focus
{
    outline: 3px solid #0057b7;
    outline-offset: 1px;
    border-color: #0057b7;
}

.feedback-field input[aria-invalid="true"],
.feedback-field textarea[aria-invalid="true"]
{
    border-color: #ef4444;
}

.feedback-field__hint
{
    font-size: 0.78rem;
    color: #94a3b8;
    text-align: right;
}

.feedback-field__error
{
    font-size: 0.825rem;
    color: #b91c1c;
    margin: 0;
}

/* ── Submit ─────────────────────────────────────────────────── */

.feedback-submit
{
    align-self: flex-start;
    min-width: 160px;
}