/*
 * Turicum Cloud — turicum_konto.css
 * Anmeldung, Registrierung, Passwort, Zwei-Faktor und Kontoeinstellungen.
 *
 * Massgebend ist der Shop. Die Werte hier sind keine neue Erfindung,
 * sondern dieselben wie in turicum_shop.css: 14px am Kartenrand, 10px am
 * Knopf, die Hairline auf #e6e6e3, der weiche neutrale Schatten und der
 * helle Blauverlauf des Shop-Heros.
 *
 * Warum eine eigene Datei: die Anmeldeseiten trugen bisher je eine eigene
 * Kopie des Design-Systems im <style>-Block — mit eigenen Radien (11px,
 * 20px), eigener Wortmarke und blau geflutetem Kopf und Fuss. Kopien
 * driften. Jetzt lesen alle dieselbe Datei.
 *
 * Reihenfolge im base.html:
 *   1. base.css   (Tokens + Typografie)
 *   2. styles.css (Komponenten, u.a. .tc-input und .tc-btn)
 *   3. turicum_konto.css (diese Datei)
 */

/* ------------------------------------------------------------------ */
/* 1. Tokens — abgeleitet aus dem Shop                                 */
/* ------------------------------------------------------------------ */
.tc-auth,
.konto {
    --konto-primary: var(--tc-blue, #1a5cf5);
    --konto-primary-hover: var(--tc-blue-hover, #0f3fb8);
    --konto-tint: var(--tc-blue-tint, #eef3ff);
    --konto-surface: var(--tc-surface, #ffffff);
    --konto-ground: var(--tc-bg, #f7f7f5);
    --konto-line: var(--tc-line, #e6e6e3);
    --konto-line-strong: var(--tc-line-strong, #cfcfca);
    --konto-ink: var(--tc-ink, #0a1f44);
    --konto-ink-2: var(--tc-ink-2, #505d78);

    --konto-radius: 14px;
    --konto-radius-sm: 10px;
    --konto-radius-pill: 999px;

    --konto-shadow-sm: 0 1px 2px rgba(10, 31, 68, 0.05);
    --konto-shadow-md: 0 4px 16px rgba(10, 31, 68, 0.07);

    font-family: var(--tc-font-text, "Instrument Sans", ui-sans-serif, system-ui, sans-serif);
    color: var(--konto-ink);
}

/* ------------------------------------------------------------------ */
/* 2. Seitenrahmen der Anmeldeseiten                                   */
/* ------------------------------------------------------------------ */
/* Eigenstaendige Seiten ohne die Hauptnavigation: Anmelden, Registrieren,
   Passwort zuruecksetzen. Sie tragen Kopf und Fuss selbst. */
.tc-auth {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--konto-ground);
}

/* Der Kopf war voller Signalblau ueber die ganze Breite. Der Shop hat
   keine solche Bande — sein Hero ist ein heller Verlauf auf Cream, und
   das Blau bleibt dem vorbehalten, was anzuklicken ist. */
.tc-auth__kopf {
    background: linear-gradient(160deg,
        var(--konto-surface) 0%, var(--konto-tint) 55%, var(--konto-ground) 100%);
    border-bottom: 1px solid var(--konto-line);
}

.tc-auth__kopf-innen {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.1rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tc-auth__zurueck {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--konto-ink-2);
    text-decoration: none;
    transition: color 0.16s ease;
}

.tc-auth__zurueck:hover {
    color: var(--konto-primary);
    text-decoration: none;
}

.tc-auth__main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.4rem;
}

.tc-auth__fuss {
    border-top: 1px solid var(--konto-line);
    background: var(--konto-surface);
    padding: 1.1rem 0;
    font-size: 0.8rem;
    color: var(--konto-ink-2);
}

.tc-auth__fuss-innen {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 1.4rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
}

.tc-auth__fuss a {
    color: var(--konto-ink-2);
    text-decoration: none;
}

.tc-auth__fuss a:hover {
    color: var(--konto-primary);
}

/* ------------------------------------------------------------------ */
/* 3. Wortmarke — dieselbe wie im Shop                                 */
/* ------------------------------------------------------------------ */
/* Der Anmeldekopf sagte "turicum.cloud", der Shop "turicum-cloud.ch".
   Zwei Schreibweisen derselben Marke auf zwei Seiten desselben Hauses. */
.tc-wortmarke {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--tc-font-display, "Space Grotesk", ui-sans-serif, sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--konto-ink);
    text-decoration: none;
    white-space: nowrap;
}

.tc-wortmarke:hover {
    color: var(--konto-ink);
    text-decoration: none;
}

.tc-wortmarke__tld {
    color: var(--konto-primary);
}

/* ------------------------------------------------------------------ */
/* 4. Karte                                                            */
/* ------------------------------------------------------------------ */
/* Wie die Produktkarte im Shop: solide weiss, eine Haarlinie, ein
   weicher neutraler Schatten. Kein Glas, kein blauer Schimmer. */
.tc-auth__karte {
    width: 100%;
    max-width: 440px;
    background: var(--konto-surface);
    border: 1px solid var(--konto-line);
    border-radius: var(--konto-radius);
    box-shadow: var(--konto-shadow-md);
    padding: 2rem;
}

.tc-auth__karte--breit {
    max-width: 560px;
}

/* ------------------------------------------------------------------ */
/* 5. Titel                                                            */
/* ------------------------------------------------------------------ */
/* Derselbe blaue Balken, der im Shop unter jeder Kategorie steht. Er
   ersetzt das Kicker-Woertchen ("KUNDENPORTAL", "KONTO"), das vorher
   ueber der Ueberschrift stand und ihr nichts hinzufuegte. */
.tc-auth__titel,
.konto__titel {
    font-family: var(--tc-font-display, "Space Grotesk", ui-sans-serif, sans-serif);
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--konto-ink);
    margin: 0;
    text-wrap: balance;
}

.tc-auth__titel::after,
.konto__titel::after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    margin-top: 0.7rem;
    border-radius: 2px;
    background: var(--konto-primary);
}

.tc-auth__lead,
.konto__sub {
    max-width: 46ch;
    margin: 1rem 0 1.75rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--konto-ink-2);
}

/* ------------------------------------------------------------------ */
/* 6. Felder                                                           */
/* ------------------------------------------------------------------ */
/* Basis ist .tc-input aus styles.css; hier nur der Radius auf den Wert
   des Shops und der Abstand innerhalb der Karte. */
.tc-auth .tc-input,
.tc-auth .tc-select,
.tc-auth .tc-textarea,
.konto .tc-input,
.konto .tc-select,
.konto .tc-textarea {
    border-radius: var(--konto-radius-sm);
}

.tc-auth__feld {
    margin-bottom: 1rem;
}

.tc-auth__feld:last-of-type {
    margin-bottom: 1.25rem;
}

/* Zwei Felder nebeneinander, unter 340px untereinander. */
.tc-auth__reihe {
    display: grid;
    gap: 0 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/* Auskunftsblock (Passwortrichtlinie, Empfehlungen): eine Auskunft, kein
   Alarm — darum der ruhige Blauton des Shops und kein Warngelb. */
.tc-auth__hinweis {
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(26, 92, 245, 0.16);
    border-radius: var(--konto-radius-sm);
    background: var(--konto-tint);
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--konto-ink-2);
}

/* Nur die erste Zeile ist die Ueberschrift des Blocks — ein <strong>
   mitten im Text soll nicht umbrechen. */
.tc-auth__hinweis > strong:first-child {
    display: block;
    margin-bottom: 0.4rem;
}

.tc-auth__hinweis strong {
    color: var(--konto-ink);
}

.tc-auth__hinweis ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* In layouts/base.html eingebettet: Kopf und Fuss bringt die Seite schon
   mit, hier braucht es nur die Mitte. */
.tc-auth--eingebettet {
    display: block;
    min-height: 0;
    background: transparent;
    padding: 2.5rem 0 4rem;
}

.tc-auth--eingebettet .tc-auth__main {
    padding: 0 1.4rem;
}

/* Bestaetigungsseite: ein Haken im gruenen Kreis, in derselben Sprache
   wie die Zustandsfarben des Shops. */
.tc-auth__erfolg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    /* Links wie die Ueberschrift darunter: ihr blauer Balken sitzt am
       linken Rand, ein zentrierter Kreis darueber staende daneben. */
    margin: 0 0 1.25rem;
    border-radius: 50%;
    background: var(--tc-ok-bg, #dcfce7);
    color: var(--tc-ok-ink, #15803d);
    font-size: 1.75rem;
}

.tc-auth__liste {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.tc-auth__liste li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--konto-ink-2);
}

.tc-auth__liste i {
    flex: 0 0 auto;
    margin-top: 0.15em;
    font-size: 0.85rem;
    color: var(--konto-primary);
}

.tc-auth__haken {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
    font-size: 0.86rem;
    color: var(--konto-ink-2);
}

.tc-auth__haken input {
    accent-color: var(--konto-primary);
    width: 1rem;
    height: 1rem;
}

/* ------------------------------------------------------------------ */
/* 7. Knoepfe — wie "In den Warenkorb" auf der Produktkarte            */
/* ------------------------------------------------------------------ */
.tc-auth__btn,
.konto .tc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.72rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--konto-radius-sm);
    font-family: var(--tc-font-text, "Instrument Sans", ui-sans-serif, sans-serif);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, filter 0.16s ease;
}

.tc-auth__btn--primary,
.konto .tc-btn--primary {
    background: var(--konto-primary);
    border-color: var(--konto-primary);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(26, 92, 245, 0.22);
}

.tc-auth__btn--primary:hover,
.konto .tc-btn--primary:hover {
    background: var(--konto-primary-hover);
    border-color: var(--konto-primary-hover);
    color: #ffffff;
    filter: brightness(0.94);
}

.tc-auth__btn--ghost {
    background: var(--konto-surface);
    border-color: var(--konto-line-strong);
    color: var(--konto-ink-2);
}

.tc-auth__btn--ghost:hover {
    border-color: var(--konto-primary);
    color: var(--konto-primary);
}

.tc-auth__btn--block {
    width: 100%;
}

/* ------------------------------------------------------------------ */
/* 8. Fusszeile der Karte                                              */
/* ------------------------------------------------------------------ */
.tc-auth__kartenfuss {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--konto-line);
    font-size: 0.85rem;
}

.tc-auth__kartenfuss a {
    color: var(--konto-primary);
    font-weight: 600;
    text-decoration: none;
}

.tc-auth__kartenfuss a:hover {
    color: var(--konto-primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ */
/* 9. Meldungen                                                        */
/* ------------------------------------------------------------------ */
.tc-auth__flash {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 0.95rem;
    margin-bottom: 1rem;
    border-radius: var(--konto-radius-sm);
    font-size: 0.86rem;
    line-height: 1.45;
    background: var(--tc-info-bg, #eef3ff);
    color: var(--tc-info-ink, #1a3a8f);
}

.tc-auth__flash--success { background: var(--tc-ok-bg, #dcfce7);    color: var(--tc-ok-ink, #15803d); }
.tc-auth__flash--warning { background: var(--tc-warn-bg, #fef3c7);  color: var(--tc-warn-ink, #92400e); }
.tc-auth__flash--danger,
.tc-auth__flash--error   { background: var(--tc-alert-bg, #fee7d6); color: var(--tc-alert-ink, #9a3412); }

/* ------------------------------------------------------------------ */
/* 10. Zwei-Faktor                                                     */
/* ------------------------------------------------------------------ */
.tc-auth__code {
    width: 100%;
    max-width: 260px;
    margin: 0 auto 1.25rem;
    display: block;
    padding: 0.7rem 1rem;
    border: 1px solid var(--konto-line);
    border-radius: var(--konto-radius-sm);
    background: var(--konto-surface);
    color: var(--konto-ink);
    /* Ziffern in gleicher Breite: sonst tanzt der Code beim Tippen. */
    font-family: var(--tc-font-display, "Space Grotesk", ui-sans-serif, sans-serif);
    font-variant-numeric: tabular-nums;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    /* Die Sperrung haengt hinter der letzten Ziffer nach. */
    text-indent: 0.32em;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tc-auth__code:focus {
    outline: none;
    border-color: var(--konto-primary);
    box-shadow: 0 0 0 3px var(--konto-tint);
}

/* QR-Code neben der Anleitung; unter 620px untereinander. */
.tc-auth__zweispalt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
    margin-bottom: 1.75rem;
}

@media (max-width: 620px) {
    .tc-auth__zweispalt {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

.tc-auth__schritte {
    margin: 0 0 1.25rem;
    padding-left: 1.15rem;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--konto-ink-2);
}

.tc-auth__schritte strong,
.tc-auth__schritte em {
    color: var(--konto-ink);
}

.tc-auth__aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

.tc-auth__qr {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto 1.25rem;
    padding: 0.75rem;
    background: var(--konto-surface);
    border: 1px solid var(--konto-line);
    border-radius: var(--konto-radius);
}

/* Der Ersatzschluessel zum Abtippen — Monospace, weil es hier wirklich um
   Zeichen geht und nicht um Lesefluss. */
.tc-auth__schluessel {
    display: block;
    margin: 0 0 1.25rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--konto-line);
    border-radius: var(--konto-radius-sm);
    background: var(--tc-surface-alt, #f4f4f2);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-align: center;
    word-break: break-all;
    color: var(--konto-ink);
}

/* ------------------------------------------------------------------ */
/* 10b. Passwortstaerke und Richtlinien-Liste                          */
/* ------------------------------------------------------------------ */
/* Die Klassennamen (pw-strength, pw-rule, pass, fail) bleiben, wie sie
   sind: das Skript auf der Seite spricht sie an. Nur die Gestaltung
   wandert aus dem <style>-Block hierher und in die Shop-Werte. */
.tc-auth .pw-strength {
    height: 5px;
    margin-top: 0.55rem;
    border-radius: var(--konto-radius-pill);
    background: var(--tc-surface-alt, #f4f4f2);
    overflow: hidden;
}

.tc-auth .pw-strength-bar {
    height: 100%;
    width: 100%;
    /* Skalieren statt die Breite animieren — sonst rechnet der Browser bei
       jedem Tastendruck das Layout neu. */
    transform: scaleX(0);
    transform-origin: left center;
    border-radius: inherit;
    background: var(--konto-primary);
    transition: transform 0.25s ease, background 0.25s ease;
}

.tc-auth .pw-strength-bar[data-staerke="schwach"] { background: var(--tc-block-ink, #991b1b); }
.tc-auth .pw-strength-bar[data-staerke="mittel"]  { background: var(--tc-dot-yellow, #f59e0b); }
.tc-auth .pw-strength-bar[data-staerke="stark"]   { background: var(--tc-ok-ink, #15803d); }

@media (prefers-reduced-motion: reduce) {
    .tc-auth .pw-strength-bar {
        transition: none;
    }
}

.tc-auth .pw-policy {
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--konto-line);
    border-radius: var(--konto-radius-sm);
    background: var(--tc-surface-alt, #f4f4f2);
}

.tc-auth .pw-policy-title {
    margin-bottom: 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--konto-ink-2);
}

.tc-auth .pw-rule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.16rem 0;
    font-size: 0.85rem;
    color: var(--konto-ink-2);
}

.tc-auth .pw-rule i {
    font-size: 0.85rem;
    color: var(--konto-line-strong);
}

.tc-auth .pw-rule.pass        { color: var(--tc-ok-ink, #15803d); }
.tc-auth .pw-rule.pass i      { color: var(--tc-ok-ink, #15803d); }
.tc-auth .pw-rule.fail        { color: var(--tc-block-ink, #991b1b); }
.tc-auth .pw-rule.fail i      { color: var(--tc-block-ink, #991b1b); }

/* ------------------------------------------------------------------ */
/* 11. Kontoeinstellungen                                              */
/* ------------------------------------------------------------------ */
/* Die Karten der Kontoseite tragen dieselbe Oberflaeche wie die Karten
   im Shop. .tc-card bringt eine Glasflaeche mit blauem Schimmer mit —
   die gehoert nicht in dieselbe Reihe wie ein Produktregal. */
.konto__karte {
    background: var(--konto-surface);
    border: 1px solid var(--konto-line);
    border-radius: var(--konto-radius);
    box-shadow: var(--konto-shadow-sm);
    padding: 1.5rem;
    margin-bottom: 1rem;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.konto__karte:hover {
    box-shadow: var(--konto-shadow-sm);
}

.konto__karte--gefahr {
    border-color: var(--tc-block-ink, #991b1b);
}

.konto .tc-card__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.25rem;
    font-family: var(--tc-font-display, "Space Grotesk", ui-sans-serif, sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--konto-ink);
}

.konto .tc-card__title i {
    font-size: 0.95rem;
    color: var(--konto-primary);
}

.konto__kopf {
    margin-bottom: 2rem;
}

/* Erklaerender Fliesstext in den Karten: in der breiten Portalkarte lief
   er sonst ueber die volle Breite und damit weit ueber eine lesbare
   Zeilenlaenge hinaus. */
.konto__text {
    max-width: 68ch;
}

/* Der Konto-Stil ohne den Seitenrahmen: fuer Seiten, die ihr eigenes
   Raster mitbringen (das Kundenportal). .konto aus styles.css setzt sonst
   eine Spaltenbreite von 760px und eigene Polsterung darueber. */
.konto--flaechig {
    max-width: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 575.98px) {
    .tc-auth__main {
        padding: 2rem 1rem;
    }

    .tc-auth__karte {
        padding: 1.5rem;
    }
}