/*
 * Login-Seite des Portals.
 *
 * Eigenes Stylesheet statt Tailwind: die Seite steht ausserhalb des Layouts,
 * muss fuer alle Mandanten funktionieren (Logos in Marineblau, Petrol und Rot)
 * und soll ohne Build-Schritt aenderbar bleiben.
 *
 * Aufbau: eine zentrierte Spalte auf Weiss. Nur das Logo des Mandanten setzt
 * Farbe - alles andere ist markenneutral, damit die Seite unter jedem Logo
 * funktioniert.
 */

/* Schriften liegen lokal im Projekt (kein Google-Fonts-Aufruf). */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/open-sans-v29-latin-regular.woff2') format('woff2'),
         url('/assets/fonts/open-sans-v29-latin-regular.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/open-sans-v29-latin-600.woff2') format('woff2'),
         url('/assets/fonts/open-sans-v29-latin-600.woff') format('woff');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/lato-v23-latin-300.woff2') format('woff2'),
         url('/assets/fonts/lato-v23-latin-300.woff') format('woff');
}

:root {
    --card:    #ffffff;
    --field:   #f5f7f9;
    --ink:     #14202b;   /* Text und Primaeraktion */
    --ink-2:   #5c6a77;
    --rule:    #d6dce2;   /* Planlinien, Raender */
    --mark:    #0e7c86;   /* Fokus und aktiver Stand */
    --danger:  #b3261e;
    --ok:      #1f6b4a;
    --radius:  4px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--card);
    color: var(--ink);
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ Seite */

.page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 3rem 1.5rem;
}

.col {
    width: 100%;
    max-width: 24rem;
}

.brand {
    display: flex;
    justify-content: center;
    margin-bottom: 2.75rem;
}

.brand img {
    display: block;
    max-width: 180px;
    max-height: 52px;
    width: auto;
    height: auto;
}

.form__foot {
    margin-top: 3.5rem;
    font-size: 0.8125rem;
    color: var(--ink-2);
}

.form__foot a { color: var(--ink-2); }

/* Sprachumschalter */
.langs {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.625rem 0 0;
    font-size: 0.8125rem;
    color: var(--ink-2);
}

.langs__form { display: inline; }
.langs__sep { color: #b6bfc7; }

.langs__active {
    color: var(--ink);
    font-weight: 600;
}

.langs .link { font-size: inherit; }


/* ------------------------------------------------------------------ Typo */

.eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.step-title {
    margin: 0;
    font-family: 'Lato', 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.step-lead {
    margin: 0.5rem 0 0;
    color: var(--ink-2);
    font-size: 0.9375rem;
}

/* --------------------------------------------------------------- Formular */

.stack { margin-top: 2rem; }
.stack > * + * { margin-top: 1.25rem; }

.field > label,
.field-label {
    display: block;
    margin-bottom: 0.4375rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.input {
    display: block;
    width: 100%;
    padding: 0.8125rem 0.9375rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.input::placeholder { color: #9aa6b1; }

.input:hover { border-color: #bcc5cd; }

.input:focus {
    outline: 2px solid var(--mark);
    outline-offset: 2px;
    background: var(--card);
    border-color: var(--mark);
}

.input--code {
    font-size: 1.75rem;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    text-align: center;
    padding: 0.75rem 0.5rem;
}

.input--recovery {
    font-size: 1.125rem;
    letter-spacing: 0.18em;
    text-align: center;
    text-transform: uppercase;
}

.btn {
    display: block;
    width: 100%;
    padding: 0.8125rem 1rem;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #ffffff;
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn:hover { background: #1e2f3e; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }
.btn[disabled] { opacity: 0.5; cursor: default; }

.btn--quiet {
    color: var(--ink-2);
    background: transparent;
    border-color: transparent;
    font-weight: 400;
    padding: 0.5rem;
}

.btn--quiet:hover { background: transparent; color: var(--ink); text-decoration: underline; }

.check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--ink-2);
    cursor: pointer;
}

.check input {
    margin: 0.2rem 0 0;
    width: 1rem;
    height: 1rem;
    accent-color: var(--ink);
    flex: none;
}

/* Zeile mit der erkannten E-Mail-Adresse in Schritt 2 */
.identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 0.6875rem 0.9375rem;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    font-size: 0.9375rem;
}

.identity span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link {
    color: var(--mark);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.link:hover { text-decoration: underline; }
.link:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

/* Nebenwege (Passwort vergessen, andere Adresse, Recovery) treten hinter der
   Hauptaktion zurueck. */
.link--quiet,
.foot .link {
    color: var(--ink-2);
    font-weight: 400;
}

.link--quiet:hover,
.foot .link:hover { color: var(--ink); }

/* Verweis mitten im Fließtext: uebernimmt Groesse und Farbe des Satzes und
   ist nur an der Unterstreichung als Aktion erkennbar. */
.link--inline {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Nebenwege stehen auf derselben linken Kante wie alles andere - eine
   zentrierte Zeile wuerde eine zweite Achse aufmachen. */
.foot {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--ink-2);
}

.link[disabled] {
    color: var(--ink-2);
    font-weight: 400;
    cursor: default;
}

.link[disabled]:hover { text-decoration: none; }

/* --------------------------------------------------------------- Meldungen */

.note {
    padding: 0.75rem 0.9375rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    border-left: 3px solid;
}

.note--error   { background: #fdf3f2; border-color: var(--danger); color: #7f1d1a; }
.note--ok      { background: #f0f7f3; border-color: var(--ok); color: #14503a; }
.note--info    { background: #f2f6f7; border-color: var(--mark); color: #114b52; }

.field-error {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--danger);
}

/* ------------------------------------------------------- Einrichtung / QR */

.setup-steps {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: setup;
}

.setup-steps > li {
    position: relative;
    padding-left: 2.25rem;
    counter-increment: setup;
}

.setup-steps > li + li { margin-top: 1.25rem; }

.setup-steps > li::before {
    content: counter(setup, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.1rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--ink-2);
}

.setup-steps h3 {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.setup-steps p { margin: 0; color: var(--ink-2); font-size: 0.875rem; }

.qr {
    margin-top: 0.875rem;
    padding: 0.875rem;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    display: inline-block;
    line-height: 0;
}

/* Der Schlüssel muss in EINER Zeile stehen: umgebrochen tippt man ihn falsch
   ab. Die ganze Fläche ist ein Kopier-Button. */
.secret {
    display: block;
    width: 100%;
    margin: 0.75rem 0 0;
    padding: 0.625rem 0.75rem;
    font-family: inherit;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow-x: auto;
    text-align: left;
    color: var(--ink);
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    cursor: pointer;
}

.secret:hover { border-color: #bcc5cd; }
.secret:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

.secret-hint {
    margin: 0.4375rem 0 0;
    font-size: 0.8125rem;
    color: var(--ink-2);
}

.codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.5rem;
    margin-top: 1.25rem;
    padding: 1.125rem 1.25rem;
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
}

.codes div { font-variant-numeric: tabular-nums; }

.row { display: flex; gap: 0.625rem; margin-top: 0.75rem; }
.row > * { flex: 1; }

.btn--ghost {
    color: var(--ink);
    background: transparent;
    border-color: var(--rule);
    font-weight: 400;
}

.btn--ghost:hover { background: var(--field); }

/* ------------------------------------------------------------- Bestaetigung */

/* Kopfzeile mit Zeichen und Überschrift auf einer Linie */
.head-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

/* Die Zeile ist hoeher als eine reine Textueberschrift, deshalb darunter
   etwas mehr Luft. */
.head-row + .step-lead { margin-top: 1rem; }

.done-mark {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    border-radius: 50%;
    color: var(--mark);
}

/* Block "Link erneut senden": Hinweis und Aktion gehoeren zusammen und
   stehen deshalb enger beieinander als die uebrigen Abschnitte. */
.resend { margin-top: 1.75rem; }
.resend p { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
.resend button { margin-top: 0.5rem; }
.resend .resend-msg { margin-top: 0.5rem; }

/* ---------------------------------------------------------------- Reaktion */

@media (max-width: 600px) {
    .page {
        justify-content: flex-start;
        padding: 2.5rem 1.25rem 3rem;
    }

    /* Der Schlüssel bleibt auch auf schmalen Geräten einzeilig. */
    .secret {
        font-size: 0.75rem;
        letter-spacing: 0.02em;
    }

    .brand { margin-bottom: 2rem; }

    .form__foot { margin-top: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}