/* Stil der Ansicht „login“.
 *
 * Stand bis zum 25.08.2026 als <style>-Block in views/login.php. Diese Ansicht bringt
 * ihren eigenen <head> mit und läuft nicht über views/layouts/main.php –
 * der Verweis steht deshalb direkt in ihr, nicht über den automatischen
 * Weg des Layouts.
 */
body { 
    margin: 0; 
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    background: var(--bg-subtle); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
}

#globalSystemMessage { 
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100%;
    z-index: 10000; 
    padding: 14px 20px; 
    font-size: var(--text-sm); 
    font-weight: 600; 
    text-align: center; 
    color: var(--text-on-accent); 
    box-shadow: var(--shadow-md); 
    animation: slideDownMsg 0.4s var(--ease); 
    box-sizing: border-box;
}
@keyframes slideDownMsg { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.login-box { 
    background: var(--bg-card); 
    padding: 40px; 
    border-radius: var(--radius-xl); 
    box-shadow: var(--shadow-lg); 
    width: 100%; 
    max-width: 380px; 
    text-align: center; 
    box-sizing: border-box;
    transition: all var(--duration-slow) var(--ease);
}

.login-title { font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); margin: 0 0 8px 0; letter-spacing: -0.5px; }
.login-subtitle { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 28px 0; line-height: 1.4; }

.mac-input { 
    width: 100%; 
    box-sizing: border-box; 
    padding: 14px 16px; 
    background: var(--bg-hover); 
    border: 1px solid transparent; 
    border-radius: var(--radius-md); 
    font-size: var(--text-base); 
    font-weight: 500;
    color: var(--text-primary);
    outline: none; 
    margin-bottom: 14px; 
    font-family: inherit; 
    transition: all var(--duration-fast) ease; 
    -webkit-appearance: none;
}
.mac-input:focus { 
    background: var(--bg-card); 
    border-color: var(--accent-border); 
    box-shadow: 0 0 0 4px var(--focus-ring-soft); 
}
.mac-input::placeholder { color: var(--text-muted); }

.name-row { display: flex; gap: 12px; margin-bottom: 14px; }
.name-row .mac-input { margin-bottom: 0; }

.mac-btn { 
    width: 100%; 
    padding: 14px; 
    background: var(--accent-color); 
    color: var(--text-on-accent); 
    border: none; 
    border-radius: var(--radius-md); 
    font-size: var(--text-base); 
    font-weight: 600; 
    cursor: pointer; 
    transition: all var(--duration-fast) ease; 
    font-family: inherit; 
    margin-top: 8px;
}
.mac-btn:hover { background: var(--accent-hover); }
.mac-btn:active { transform: scale(0.98); opacity: 0.9; }

.error-msg { background: var(--danger-soft); color: var(--danger-color); padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; margin-bottom: 20px; text-align: left; line-height: 1.4; }
.success-msg { background: var(--success-soft); color: var(--success-color); padding: 12px 16px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; margin-bottom: 20px; text-align: left; line-height: 1.4; }

.pwd-meter-container { height: 4px; background: var(--bg-hover); border-radius: var(--radius-xs); margin: 4px 4px 8px 4px; overflow: hidden; }
.pwd-meter-bar { height: 100%; width: 0%; background-color: var(--danger-color); transition: width var(--duration-slow) ease, background-color var(--duration-slow) ease; border-radius: var(--radius-xs); }
.pwd-meter-text { font-size: var(--text-2xs); color: var(--text-secondary); text-align: left; margin: 0 4px 14px 4px; font-weight: 500; }

.tos-label { display: flex; align-items: flex-start; gap: 10px; text-align: left; margin-bottom: 20px; margin-top: 8px; font-size: var(--text-sm); color: var(--text-primary); cursor: pointer; }
.tos-checkbox { margin-top: 2px; accent-color: var(--accent-color); transform: scale(1.1); }

.apple-link-container { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.apple-link { font-size: var(--text-sm); color: var(--accent-text); text-decoration: none; font-weight: 500; cursor: pointer; transition: color var(--duration-fast); }
.apple-link:hover { color: var(--accent-text); text-decoration: underline; }

.forgot-link-wrapper { text-align: right; margin-top: -6px; margin-bottom: 14px; }
.forgot-link { font-size: var(--text-xs); color: var(--text-muted); text-decoration: none; cursor: pointer; transition: color var(--duration-fast); font-weight: 500; }
.forgot-link:hover { color: var(--accent-text); }

.view-pane { display: none; }
.view-pane.active { display: block; animation: fadeIn 0.3s ease; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
/* --- Feinschliff auf Basis des Design-Systems (assets/css/tokens.css) --- */
body {
    background-color: var(--bg-app);
    background-image: radial-gradient(60rem 32rem at 50% -12%, var(--accent-soft), transparent 70%);
}
.login-box {
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}
.login-title { letter-spacing: -0.035em; color: var(--text-primary); }
.login-subtitle { color: var(--text-secondary); }
.mac-input {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-control);
    background: var(--bg-input);
}
.mac-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--focus-ring-soft);
    background: var(--bg-card);
}
/* Der Anmelde-Button traegt keinen Verlauf mehr. Verlaeufe bleiben der
   Wortmarke vorbehalten; auf einem Bedienelement erschweren sie nur die
   Kontrastpruefung, weil der Kontrast ueber die Flaeche wandert. */
.mac-btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.error-msg { background: var(--danger-soft); border-radius: var(--radius-md); }
.success-msg { background: var(--success-soft); color: var(--success-color); border-radius: var(--radius-md); }
.apple-link:hover { color: var(--accent-hover); }
    

/* =============================================================================
   Zweigeteilte Anmeldeseite
   -----------------------------------------------------------------------------
   Links die Marke, rechts das Formular. Vorher stand die Karte allein auf
   gepunktetem Grund – ohne Logo, ohne Namen ausser der Ueberschrift. Das ist
   die erste Seite, die jemand vom Portal sieht.

   Die vier Ansichten der Seite (Anmelden, Registrieren, Passwort vergessen,
   Passwort neu setzen) liegen unveraendert in .login-box; sie wissen von der
   Buehne nichts. Deshalb bekommt die Buehne eine feste Hoehe: Ohne sie
   spraenge der Markenbereich beim Wechsel zwischen den Ansichten mit, weil das
   Registrierformular deutlich hoeher ist als das Anmeldeformular.
   ============================================================================= */
.login-buehne {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    width: 100%;
    max-width: 940px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Die Karte gibt ihren eigenen Rahmen auf – sie IST jetzt die rechte Haelfte. */
.login-buehne .login-box {
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-marke {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    padding: 44px 40px;
    color: #ffffff;
    /* Der Verlauf ist der Wortmarke vorbehalten (siehe tokens.css) – hier
       traegt er eine ganze Flaeche, kein Bedienelement, und ist damit an der
       einzigen Stelle, an der die Gestaltungsregel ihn zulaesst. */
    background: var(--accent-gradient, linear-gradient(135deg, #1b62d6 0%, #0d3576 100%));
    position: relative;
    overflow: hidden;
}
/* Ein sehr ruhiges Punktraster, dasselbe Motiv wie auf dem Seitenhintergrund –
   es haelt die grosse Farbflaeche davon ab, wie ein Farbeimer zu wirken. */
.login-marke::after {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}
.login-marke > * { position: relative; z-index: 1; }

/* Das Zeichen steht auf einer eigenen Zeile ueber dem Namen statt klein
   daneben. Es ist die Bildmarke der Uebungsgruppe und das Erste, was auf der
   Anmeldeseite gelesen wird – 52px neben einem Schriftzug haben es zur
   Beigabe gemacht. Als eigenes Element darueber traegt es die Flaeche. */
.login-marke-kopf {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: var(--space-4);
}
.login-marke-bild {
    width: 104px; height: 104px;
    /* Ohne Unterlage und ohne Ring: Die Bildmarke bringt ihren eigenen
       schwarzen Rand mit und braucht keinen zweiten. Der helle Kasten
       dahinter stand als eigenes Rechteck im Bild, statt zu fassen.
       Der weiche Schatten bleibt – er ist kein Rahmen, sondern haelt die
       Marke davon ab, auf dem Verlauf aufgeklebt zu wirken. */
    filter: drop-shadow(0 10px 24px rgba(4, 20, 52, 0.34));
}
.login-marke-name { font-size: var(--text-2xl); font-weight: 800; letter-spacing: var(--tracking-tight); }
.login-marke-unter {
    font-size: var(--text-2xs); font-weight: 700;
    letter-spacing: var(--tracking-wide); text-transform: uppercase;
    color: rgba(255,255,255,0.72);
}

.login-marke-satz {
    margin: 0 0 var(--space-6);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    text-wrap: pretty;
}
.login-marke-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.login-marke-liste li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: rgba(255,255,255,0.9); }
.login-marke-liste svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: 0.85; }

.login-marke-fuss { font-size: var(--text-xs); color: rgba(255,255,255,0.62); }

/* Unter 820px faellt der Markenbereich ERSATZLOS weg, statt sich ueber das
   Formular zu legen: Auf einem Telefon zaehlt, dass die Eingabefelder ohne
   Rollen erreichbar sind. Der Name steht dann in der Ueberschrift der Karte,
   wo er vorher auch stand. */
@media (max-width: 820px) {
    .login-buehne { grid-template-columns: 1fr; max-width: 400px; }
    .login-marke { display: none; }
    .login-buehne .login-box { padding: 36px 28px; }
}

/* Die Marke fuer schmale Schirme. Auf breiten ist sie aus – dort steht der
   Name schon im linken Bereich. */
.login-marke-klein { display: none; }
@media (max-width: 820px) {
    /* Auf schmalen Schirmen ist das hier die EINZIGE Stelle, an der das
       Zeichen ueberhaupt vorkommt – der linke Bereich faellt ja weg. Also
       ebenfalls gross und ueber dem Namen statt klein daneben. */
    .login-marke-klein {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: var(--space-3); margin-bottom: var(--space-5);
        font-size: var(--text-lg); font-weight: 700;
        letter-spacing: var(--tracking-tight); color: var(--text-primary);
    }
    .login-marke-klein img {
        width: 84px; height: 84px; border-radius: var(--radius-lg);
        box-shadow: 0 4px 16px rgba(16, 21, 31, 0.14);
    }
}