/* Anmeldemaske im Designsystem "Werkstatt" – gleiche Farben und Schriften
   wie die Anwendung, aber ohne deren CSS zu laden (die Maske liegt vor
   der Anmeldung, sie soll so wenig wie möglich ausliefern). */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url(/_auth/inter-400-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url(/_auth/inter-500-latin.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;
  src:url(/_auth/bricolage-grotesque-600-latin.woff2) format('woff2')}

:root{
  --shell:#151C24; --paper:#F6F3EE; --surface:#fff;
  --line:#E7E0D5; --line-2:#D7CEBF; --line-3:#C3B8A5;
  --ink:#1A1613; --ink-2:#57504A; --ink-3:#8B837A;
  --bronze:#B0741F; --bronze-d:#8A5A16; --bronze-r:rgba(176,116,31,.16);
  --brick:#AD3F38; --brick-l:#FAE9E7;
  --t:150ms cubic-bezier(.2,.8,.3,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;display:grid;place-items:center;padding:24px;
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.55;
  color:var(--ink);background:var(--shell);
  /* dezente Papierfläche im Hintergrund, damit es nicht nach Standarddialog aussieht */
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0);
  background-size:22px 22px;
  -webkit-font-smoothing:antialiased;
}

.karte{
  width:100%;max-width:404px;background:var(--paper);border-radius:20px;padding:34px 34px 26px;
  box-shadow:0 30px 70px rgba(0,0,0,.42), 0 4px 14px rgba(0,0,0,.22);
}
.kopf{text-align:center;margin-bottom:26px}
.mark{
  width:52px;height:52px;margin:0 auto 14px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--bronze),var(--bronze-d));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 3px 10px rgba(138,90,22,.3);
}
.mark svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
h1{font-family:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;font-weight:600;font-size:23px;
   letter-spacing:-.02em;margin:0}
.kopf p{margin:4px 0 0;font-size:13px;color:var(--ink-3)}

.feld{margin-bottom:15px}
label{display:block;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px}
input{
  width:100%;height:46px;padding:0 13px;font:inherit;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:10px;
  transition:border-color var(--t),box-shadow var(--t);
}
input:hover{border-color:var(--line-3)}
input:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 3px var(--bronze-r)}
input[aria-invalid="true"]{border-color:var(--brick)}

.pw{position:relative}
.pw input{padding-right:46px}
#zeigen{
  position:absolute;right:5px;top:5px;width:36px;height:36px;display:grid;place-items:center;
  background:none;border:none;border-radius:8px;color:var(--ink-3);cursor:pointer;transition:all var(--t);
}
#zeigen:hover{background:var(--line);color:var(--ink-2)}
#zeigen:focus-visible{outline:2px solid var(--bronze);outline-offset:1px}
#zeigen svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.meldung{
  display:flex;gap:8px;margin:0 0 14px;padding:10px 13px;border-radius:10px;font-size:13.5px;
  background:var(--brick-l);color:var(--brick);border:1px solid rgba(173,63,56,.2);
}
.meldung[hidden]{display:none}

.senden{
  width:100%;height:47px;margin-top:6px;font:inherit;font-weight:500;
  background:var(--bronze);color:#fff;border:none;border-radius:10px;cursor:pointer;
  transition:background var(--t),transform var(--t);
}
.senden:hover:not(:disabled){background:var(--bronze-d)}
.senden:active:not(:disabled){transform:scale(.99)}
.senden:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.senden:disabled{opacity:.6;cursor:progress}

.fuss{margin:22px 0 0;text-align:center;font-size:11.5px;color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}
@media (max-width:420px){ .karte{padding:26px 22px 20px} }