/* ── ALL IN GROUP – Survey Frontend ───────────────────────────────────── */

.aig-sv {
    --aig-sv-gap: 1.5rem;
    --aig-sv-radius: 6px;
    --aig-sv-border: #d5d7da;
    --aig-sv-border-focus: #1a1a1a;
    --aig-sv-error: #b32d2e;
    --aig-sv-error-bg: #fdecea;
    --aig-sv-success: #1e6c36;
    --aig-sv-success-bg: #e6f4ea;
    --aig-sv-info: #1c5f8b;
    --aig-sv-info-bg: #e7f2f9;
    --aig-sv-muted: #6b7280;
}

/*
 * Muss vor den display-Regeln stehen bleiben: Elemente wie .aig-sv__form
 * setzen display:flex und würden das hidden-Attribut sonst aushebeln.
 */
.aig-sv [hidden] {
    display: none !important;
}

.aig-sv__intro {
    margin-bottom: var(--aig-sv-gap);
}

.aig-sv__form {
    display: flex;
    flex-direction: column;
    gap: var(--aig-sv-gap);
}

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

.aig-sv__field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.aig-sv__label {
    font-weight: 600;
    line-height: 1.4;
}

.aig-sv__req {
    color: var(--aig-sv-error);
}

.aig-sv__field input[type="text"],
.aig-sv__field input[type="email"],
.aig-sv__field input[type="tel"],
.aig-sv__field input[type="url"],
.aig-sv__field input[type="number"],
.aig-sv__field input[type="date"],
.aig-sv__field select,
.aig-sv__field textarea {
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--aig-sv-border);
    border-radius: var(--aig-sv-radius);
    background: #fff;
    font: inherit;
    color: inherit;
}

.aig-sv__field input:focus,
.aig-sv__field select:focus,
.aig-sv__field textarea:focus {
    outline: 2px solid var(--aig-sv-border-focus);
    outline-offset: 1px;
}

.aig-sv__field textarea {
    resize: vertical;
}

/* ── Radio- / Checkbox-Gruppen ────────────────────────────────────────── */

.aig-sv__group {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.aig-sv__group .aig-sv__label {
    margin-bottom: .25rem;
}

.aig-sv__option,
.aig-sv__check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    line-height: 1.45;
    cursor: pointer;
}

.aig-sv__option input,
.aig-sv__check input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin: .1rem 0 0;
    accent-color: var(--aig-sv-border-focus);
}

.aig-sv__consents {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.aig-sv__check--error>span {
    color: var(--aig-sv-error);
}

/* ── Fehlerzustand ────────────────────────────────────────────────────── */

.aig-sv__field--error input,
.aig-sv__field--error select,
.aig-sv__field--error textarea {
    border-color: var(--aig-sv-error);
    background: var(--aig-sv-error-bg);
}

.aig-sv__field--error .aig-sv__label {
    color: var(--aig-sv-error);
}

.aig-sv__error {
    font-size: .85rem;
    color: var(--aig-sv-error);
}

/* ── Honeypot ─────────────────────────────────────────────────────────── */

.aig-sv__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Aktionen ─────────────────────────────────────────────────────────── */

.aig-sv__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.aig-sv__submit {
    padding: .8rem 1.75rem;
    border: 0;
    border-radius: var(--aig-sv-radius);
    background: var(--aig-sv-border-focus);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.aig-sv__submit:hover {
    opacity: .9;
}

.aig-sv__submit:disabled {
    opacity: .55;
    cursor: default;
}

.aig-sv__spinner {
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid var(--aig-sv-border);
    border-top-color: var(--aig-sv-border-focus);
    border-radius: 50%;
    animation: aig-sv-spin .8s linear infinite;
}

@keyframes aig-sv-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Meldungen ────────────────────────────────────────────────────────── */

.aig-sv__message {
    padding: 1rem 1.15rem;
    border-radius: var(--aig-sv-radius);
    border-left: 4px solid var(--aig-sv-muted);
    background: #f3f4f6;
}

.aig-sv__message--success {
    border-left-color: var(--aig-sv-success);
    background: var(--aig-sv-success-bg);
    color: var(--aig-sv-success);
}

.aig-sv__message--error {
    border-left-color: var(--aig-sv-error);
    background: var(--aig-sv-error-bg);
    color: var(--aig-sv-error);
}

.aig-sv__message--info {
    border-left-color: var(--aig-sv-info);
    background: var(--aig-sv-info-bg);
    color: var(--aig-sv-info);
}

.aig-sv__message-note {
    margin: .5rem 0 0;
    font-size: .95rem;
    opacity: .9;
}

.aig-sv__message-note--error {
    color: var(--aig-sv-error);
}

/* ── Übernommenes Formular ────────────────────────────────────────────── */

/*
 * Die Meldung sitzt direkt vor dem Absenden-Button. Steckt der in einer
 * Flex- oder Grid-Zeile, beansprucht sie damit eine eigene Zeile darüber
 * statt neben dem Button zu stehen.
 */
.aig-sv--attached {
    flex: 1 0 100%;
    grid-column: 1 / -1;
    width: 100%;
    margin: 1rem 0 0;
}

.aig-sv-notice {
    padding: .75rem 1rem;
    background: #fdecea;
    border-left: 4px solid #b32d2e;
}