/*** ANMELDESEITE ***/

@import url('vars.css');
@import url('colors.css');

@font-face
{
    font-family : 'Lato';
    src         : url('../fonts/lato/Lato-Regular.ttf') format('truetype');
}

@font-face
{
    font-family : 'LatoBold';
    src         : url('../fonts/lato/Lato-Bold.ttf') format('truetype');
}

body.login
{
    background-color : var(--color-background);
    font-family      : Lato, sans-serif;
    color            : var(--font-color-primary);

    *
    {
        font-family : Lato, sans-serif;
    }

    strong,
    label
    {
        font-family : LatoBold, sans-serif;
    }
}

body.login .dashicons,
body.login [class^="dashicons-"],
body.login [class*=" dashicons-"],
body.login .dashicons-before::before
{
    font-family : dashicons !important;
}

body.login h1.wp-login-logo a
{
    width               : 130px;
    height              : 130px;
    margin              : 0 auto;
    background-image    : url('../images/logo.png');
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : center;
    text-indent         : -9999em;
    overflow            : hidden;
}

body.login form
{
    border           : 0;
    border-radius    : var(--small-border-radius);
    background-color : var(--content-block-background);
    box-shadow       : var(--content-box-shadow);
    padding          : calc(1.4 * var(--padding-default));
    margin-top       : var(--padding-default);
}

body.login label
{
    color     : var(--font-color-primary);
    font-size : .95em;
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login select
{
    border           : 1px solid var(--border-color-default);
    border-radius    : var(--small-border-radius);
    background-color : var(--color-background);
    color            : var(--font-color-primary);
    box-shadow       : none;
    padding          : 8px 10px;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus,
body.login select:focus
{
    border-color : var(--color-accent-dark);
    box-shadow   : 0 0 0 2px var(--color-accent);
    outline      : 2px solid transparent;
}

body.login .button-primary
{
    border           : 0;
    border-radius    : var(--small-border-radius);
    background-color : var(--font-color-primary);
    color            : var(--font-color-light);
    text-transform   : uppercase;
    text-shadow      : none;
    box-shadow       : none;
    padding          : 6px 18px;
    height           : auto;
    line-height      : 1.6;
    transition       : background-color 200ms ease;
}

body.login .button-primary:hover,
body.login .button-primary:focus
{
    background-color : var(--color-accent-dark);
    color            : var(--font-color-light);
}

body.login .button-primary:focus-visible
{
    outline        : 2px solid var(--color-accent-dark);
    outline-offset : 2px;
}

body.login .button-secondary,
body.login .language-switcher .button
{
    border           : 1px solid var(--color-accent);
    border-radius    : var(--small-border-radius);
    background-color : var(--color-accent);
    color            : var(--font-color-primary);
    box-shadow       : none;
}

body.login .button-secondary:hover,
body.login .language-switcher .button:hover
{
    background-color : var(--color-accent-dark);
    border-color     : var(--color-accent-dark);
    color            : var(--font-color-light);
}

body.login .wp-pwd .wp-hide-pw .dashicons
{
    color : inherit;
}

/* Die Links unter dem Formular tragen dieselbe Pille wie die PDF-Links im
   Seiteninhalt: mint, unten die dunkelgruene Kante, ein Zeichen davor. Als
   blosse unterstrichene Zeilen gingen sie neben dem Formular unter. */
body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a
{
    display          : inline-flex;
    align-items      : center;
    gap              : 10px;
    text-decoration  : none;
    font-family      : LatoBold, sans-serif;
    font-size        : .92em;
    line-height      : 1.2;
    color            : var(--font-color-primary);
    background-color : var(--color-accent);
    border           : 1px solid transparent;
    border-bottom    : 2px solid var(--color-accent-dark);
    border-radius    : var(--small-border-radius);
    padding          : 9px 16px 9px 13px;
    transition       : background-color .15s ease;
}

body.login #nav a::before,
body.login #backtoblog a::before
{
    content             : '';
    flex                : 0 0 auto;
    width               : 18px;
    height              : 18px;
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : contain;
}

/* Schluessel fuer "Passwort vergessen?" */
body.login #nav a::before
{
    background-image : url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="%231c1c1c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="13" cy="7" r="3.6"/><path d="M10.5 9.5 3 17v2h3v-2h2v-2h2v-2.2"/></svg>');
}

/* Person mit Plus fuer "Registrieren" */
body.login #nav a.wp-login-register::before
{
    background-image : url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="%231c1c1c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="6.5" r="3.2"/><path d="M2 17c.6-3.2 3-5 6-5s5.4 1.8 6 5"/><path d="M16 5.5v5M13.5 8h5"/></svg>');
}

/* Tuer mit Pfeil fuer "Anmelden" auf der Registrierungsseite */
body.login #nav a.wp-login-log-in::before
{
    background-image : url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="%231c1c1c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11 3h4.5A1.5 1.5 0 0 1 17 4.5v11a1.5 1.5 0 0 1-1.5 1.5H11"/><path d="M3 10h9"/><path d="m8.5 6.5 3.5 3.5-3.5 3.5"/></svg>');
}

/* Registrieren und Passwort vergessen stehen als Pillen nebeneinander;
   die Trennstriche nimmt login_link_separator heraus. */
body.login #nav
{
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    gap             : 10px;
}

/* Honigtopf gegen Bots im Registrierungsformular - fuer Menschen
   unsichtbar, auch fuer Screenreader. */
body.login .konzert-honigtopf
{
    position : absolute !important;
    left     : -9999px !important;
    width    : 1px;
    height   : 1px;
    overflow : hidden;
}

/* Pfeil zurueck fuer den Weg auf die Website */
body.login #backtoblog a::before
{
    background-image : url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="%231c1c1c" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M17 10H4"/><path d="M9 5 4 10l5 5"/></svg>');
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover
{
    background-color : #bcdcb1;
    color            : var(--font-color-primary);
}

body.login #nav a:focus-visible,
body.login #backtoblog a:focus-visible,
body.login .privacy-policy-page-link a:focus-visible
{
    outline        : 2px solid var(--color-accent-dark);
    outline-offset : 2px;
}

/* Etwas Luft zwischen Formular und den beiden Pillen. */
body.login #nav,
body.login #backtoblog
{
    margin  : var(--padding-default) 0 0;
    padding : 0;
}

/*
 * Alles unterhalb der Eingabefelder steht mittig - der Anmelden-Knopf wie die
 * beiden Pillen darunter.
 *
 * Der Kern stellt die Checkbox nach links und den Knopf nach rechts, beide
 * ueber float in dieselbe Zeile. Nebeneinander laesst sich davon nichts
 * sauber zentrieren, deshalb bekommt die Checkbox eine eigene Zeile und der
 * Knopf steht darunter.
 */
body.login form .forgetmenot
{
    float         : none;
    display       : block;
    margin        : 0 0 var(--padding-default);
    text-align    : center;
}

body.login .button-primary
{
    float : none;
}

body.login form .submit,
body.login #nav,
body.login #backtoblog
{
    text-align : center;
}

body.login .message,
body.login #login .notice,
body.login .success
{
    border-left      : 4px solid var(--color-accent-dark);
    border-radius    : var(--small-border-radius);
    background-color : var(--content-block-background);
    box-shadow       : none;
}

body.login #login_error,
body.login .login .notice-error
{
    border-left      : 4px solid #b32d2e;
    border-radius    : var(--small-border-radius);
    background-color : var(--content-block-background);
    box-shadow       : none;
}

body.login .language-switcher label
{
    color : var(--font-color-primary);
}

/*
 * Auf grossen Bildschirmen steht das Formular in der Mitte statt oben zu
 * kleben. Bewusst mit einer Bedingung an die Hoehe: auf einem flachen Fenster
 * waere der obere Rand des Formulars sonst ausserhalb des Sichtfelds, und
 * niemand koennte dorthin scrollen.
 */
@media screen and (min-width : 783px) and (min-height : 620px)
{
    body.login
    {
        display         : flex;
        flex-direction  : column;
        justify-content : center;
        min-height      : 100vh;
        min-height      : 100dvh;
        box-sizing      : border-box;
        padding         : calc(2 * var(--padding-default)) 0;
        margin          : 0;
    }

    body.login #login
    {
        padding-top : 0;
    }
}