/* anymail.ws – eigene Ergaenzungen zu Bootstrap 5.
   Mobile-first: Basisregeln gelten fuer kleine Schirme, Media-Queries
   erweitern nach oben. Keine externen Schriften, keine externen Assets. */

:root {
    --anymail-accent: #0d6efd;
    --anymail-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
}

body {
    font-size: 1rem;
    line-height: 1.6;
}

/* Sprungmarke: nur sichtbar, wenn sie den Fokus hat. */
.skip-link:focus {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1080;
    padding: 0.5rem 0.75rem;
    background: var(--bs-body-bg);
    border: 2px solid var(--anymail-accent);
    border-radius: 0.375rem;
}

.brand-mark {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.15rem;
    line-height: 1.6rem;
    text-align: center;
    color: #fff;
    background: var(--anymail-accent);
    border-radius: 0.4rem;
    font-weight: 700;
}

/* Honeypot: fuer Menschen unsichtbar, aber im DOM vorhanden und ohne
   display:none, damit einfache Bots das Feld trotzdem ausfuellen. */
.hp-wrap {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.step-badge {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    font-weight: 600;
}

/* Alias-Anzeige auf der Statusseite */
.alias-box {
    font-family: var(--anymail-mono);
    font-size: 1.05rem;
    word-break: break-all;
}

@media (min-width: 576px) {
    .alias-box {
        font-size: 1.25rem;
        word-break: normal;
    }
}

.countdown {
    font-variant-numeric: tabular-nums;
    font-family: var(--anymail-mono);
}

/* Altcha-Widget an die Bootstrap-Optik angleichen. */
altcha-widget {
    --altcha-border-width: 1px;
    --altcha-border-radius: 0.375rem;
    --altcha-max-width: 100%;
    display: block;
}

/* Grosses Briefsymbol auf der "Postfach pruefen"-Seite. */
.mail-icon {
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    font-size: 2rem;
    text-align: center;
    color: var(--anymail-accent);
    background: var(--bs-secondary-bg);
    border-radius: 50%;
}