/*
 * EdelVerify — Grundstil des Hinweises.
 *
 * Farben ausschliesslich über CSS-Variablen und Selektoren mit EINER Stufe
 * Spezifitaet. Ein Theme braucht damit nur
 *
 *   .edelverify-banner { --ev-knopf: #1E3B32; --ev-grund: #FFFDF9; }
 *
 * und keine Kette von !important. Ein Riegel, der zum Laden gehoeren soll,
 * darf sich nicht gegen dessen Gestaltung stemmen.
 */

.edelverify-banner {
    --ev-grund: #f8fafc;
    --ev-linie: #cbd5e1;
    --ev-tinte: #0f172a;
    --ev-knopf: #0f62d6;
    --ev-knopf-text: #fff;
    --ev-knopf-hover: #0b4fae;
    --ev-rund: 12px;
    --ev-grund-ok: #f0fdf4;
    --ev-linie-ok: #86efac;

    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 24px;
    padding: 16px 18px;
    border: 1px solid var(--ev-linie);
    border-radius: var(--ev-rund);
    background: var(--ev-grund);
    color: var(--ev-tinte);
    font-size: 15px;
    line-height: 1.5;
}

.edelverify-banner__text {
    flex: 1 1 16rem;
    min-width: 0;
}

.edelverify-banner__knopf {
    box-sizing: border-box;
    padding: 11px 20px;
    border: 0;
    border-radius: calc(var(--ev-rund) - 3px);
    background: var(--ev-knopf);
    color: var(--ev-knopf-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.edelverify-banner__knopf:hover {
    background: var(--ev-knopf-hover);
}

.edelverify-banner__knopf:focus-visible {
    outline: 2px solid var(--ev-knopf);
    outline-offset: 2px;
}

.edelverify-banner.is-bestaetigt {
    background: var(--ev-grund-ok);
    border-color: var(--ev-linie-ok);
}