/* ---------- Login-Screen, nach Figma 27279:827 ----------
   Formular links auf Weiss, Zitat rechts auf getoenter Flaeche. Die
   Spaltenteilung 850 zu 830 und die Innenabstaende stammen aus dem
   Frame, ebenso Titel 52, Lede 19, Zitat 38 und Anfuehrungszeichen 112.
   Feld und Knopf folgen den PTS-Komponenten: 56 hoch mit 16 Radius und
   2 Kontur, Knopf 54 hoch mit 3 Radius und Versalien in Mono.
   Uebernommen ist das Layout, nicht die Markenfarbe: der Wireframe
   bleibt bei wf-blue. */
.login-view{min-height:calc(100vh - 40px);display:grid;grid-template-columns:1.024fr 1fr;}
.login-form-col{background:var(--paper);display:flex;flex-direction:column;padding:28px 12.2% 34px;}
.login-quote-col{background:var(--tint);display:flex;flex-direction:column;justify-content:space-between;padding:106px 12% 34px;}

.fig-brand{display:flex;align-items:baseline;gap:.5em;height:76px;flex-shrink:0;}
.fig-brand b{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--green-deep);}
.fig-brand span{font-family:var(--font-display);font-style:italic;font-size:19px;color:var(--ink);}

.fig-body{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:526px;width:100%;}
.fig-eyebrow{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:38px;}
.fig-title{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,3.3vw,52px);line-height:1.06;color:var(--ink);margin:0 0 18px;}
.fig-lede{font-size:19px;line-height:1.45;color:var(--ink-soft);margin:0 0 28px;}
.fig-label{display:block;font-family:var(--font-mono);font-size:15px;line-height:18px;color:var(--ink);padding:0 8px;margin-bottom:8px;}
.fig-input{width:100%;height:56px;padding:0 16px;border:2px solid var(--line);border-radius:16px;background:var(--paper);
  font-family:var(--font-mono);font-size:16px;color:var(--ink);}
.fig-input::placeholder{color:#BBBBBB;}
.fig-input:focus{border-color:var(--amber);outline:none;}
.fig-btn{width:100%;height:54px;margin-top:14px;border-radius:3px;background:var(--amber);color:#fff;
  font-family:var(--font-mono);font-size:15px;letter-spacing:.04em;text-transform:uppercase;
  transition:background var(--duration-quick) var(--ease-smooth-out);}
.fig-btn:hover{background:var(--green-deep);}
.fig-hint{font-size:14px;line-height:1.45;color:var(--ink-soft);margin:14px 0 0;}
.fig-hint-proto{font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--ink-soft);margin:.5em 0 0;}
.fig-switch{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink);
  margin-top:28px;padding:0;text-align:left;}
.fig-switch em{font-style:normal;font-weight:400;color:var(--ink-soft);margin-right:.4em;}
.fig-switch:hover{color:var(--green-deep);}
/* Feldhinweis und Fehlertext unter dem Feld. Leer nimmt der Fehler keinen Platz weg. */
.fig-field-hint{font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--ink-soft);margin:6px 8px 0;}
.fig-error{font-family:var(--font-mono);font-size:13px;line-height:1.4;color:var(--red);margin:6px 8px 0;}
.fig-error:empty{margin:0;}
.fig-input[aria-invalid="true"]{border-color:var(--red);}
.fig-footer{display:flex;gap:2em;font-size:12px;color:var(--ink-soft);flex-shrink:0;}

.fig-code-boxes{display:flex;gap:12px;}
.fig-code-box{width:64px;height:56px;text-align:center;border:2px solid var(--line);border-radius:16px;
  background:var(--paper);font-family:var(--font-mono);font-size:20px;color:var(--ink);}
.fig-code-box:focus{border-color:var(--amber);outline:none;}

.fig-quote-top{max-width:580px;}
.fig-quote-mark{font-family:var(--font-display);font-weight:700;font-size:112px;line-height:1;color:var(--amber);
  margin:24px 0 24px;user-select:none;}
.fig-quote-text{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,2.4vw,38px);line-height:1.06;
  color:var(--ink);margin:0;transition:opacity var(--duration-fast) var(--ease-smooth-out),transform var(--duration-fast) var(--ease-smooth-out);}
.fig-quote-text.is-out{opacity:0;transform:translateY(6px);}
.fig-quote-foot{max-width:580px;}
.fig-quote-foot b{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.45;}
.fig-quote-foot span{display:block;font-size:14px;color:var(--ink-soft);line-height:1.45;}
.login-dots{display:flex;gap:.55em;margin-top:18px;}
.login-dot{width:.7em;height:.7em;padding:0;border-radius:50%;border:1px solid var(--green-deep);background:transparent;
  transition:background var(--duration-quick) var(--ease-smooth-out);}
.login-dot.active{background:var(--green-deep);}

@media (max-width:1040px){
  .login-view{grid-template-columns:1fr;}
  .login-form-col{order:1;padding:20px 24px 28px;}
  .login-quote-col{order:2;padding:40px 24px 32px;gap:40px;border-top:1px solid var(--line);}
  .fig-eyebrow{margin-bottom:24px;}
  .fig-quote-mark{font-size:72px;margin:16px 0;}
}
.muted-note{font-size:.78rem;color:var(--ink-soft);margin-top:-.4em;}