/* Het inlogscherm (index.php) en de poort (poort.php). */

.poort {
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: 2rem 1.25rem;
    background: var(--groen-diep);
}

.poort-kaart {
    width: min(410px, 100%);
    padding: 3rem 2.5rem 2.25rem;
    text-align: center;
    background: var(--papier);
    border: 1px solid var(--groen);
    outline: 1px solid var(--groen);
    outline-offset: 5px;
}

.poort-logo { display: block; width: 165px; margin: 0 auto 1.5rem; }

.poort-kop {
    margin: 0 0 1.2rem;
    padding-bottom: 1.2rem;
    font-family: var(--serif);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.1;
    border-bottom: 3px double var(--lijn);
}

.poort-tekst { margin: 0 0 1.8rem; font-size: .92rem; color: var(--zacht); }

.poort-form { display: grid; gap: .6rem; }

.poort-form input {
    width: 100%;
    padding: .9rem 1rem;
    font-family: var(--sans);
    font-size: 1rem;
    text-align: center;
    letter-spacing: .1em;
    color: var(--groen);
    background: #fff;
    border: 1px solid var(--lijn);
    border-radius: 0;
}
.poort-form input:focus { border-color: var(--groen); outline: none; }

.poort-form button {
    padding: .95rem 1rem;
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--papier);
    background: var(--groen);
    border: 1px solid var(--groen);
    cursor: pointer;
    transition: background .15s linear;
}
.poort-form button:hover { background: var(--wijn); border-color: var(--wijn); }

.poort-fout {
    margin: 0 0 1.2rem;
    padding: .6rem .9rem;
    font-size: .88rem;
    color: var(--wijn);
    background: var(--papier-dof);
    border: 1px solid var(--wijn);
}

.poort-voet { margin: 1.6rem 0 0; font-size: .74rem; color: var(--zacht); }