/* Die Anmeldeseiten sprechen wie semnav.com: Marke, Figtree, die Glaskarte aus website/src/stil/global.css (.login-flaeche,
   .login-karte), im Aufbau wie der Login von Personio. Sie sind das Letzte vor der Anwendung und das Erste nach der Website,
   deshalb gilt hier die Werteliste der Marke (marke/werkzeug/werte.mjs), nicht die aus 16.13. Rot bleibt der Abweisung. */
@font-face { font-family: Figtree; font-weight: 300 900; font-display: swap; src: url(figtree/figtree.woff2) format("woff2"); }

:root { --tiefsee: #0F2421; --petrol: #17564C; --strom: #4A5A56; --linie: #D8DBD5; --papier: #F7F7F3; --blatt: #FFFFFF;
  --rot: #D53236; --warnung: #8F6516; --tief: 0 2px 4px rgba(15, 36, 33, .06), 0 28px 72px rgba(15, 36, 33, .16); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { min-height: 100%; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; color: var(--tiefsee);
  background: radial-gradient(115% 95% at 50% 115%, #1C8A6E 0%, #5DBB9F 30%, #A9DCC8 54%, #DDEFE6 72%, var(--papier) 90%) var(--papier) no-repeat;
  font: 400 16px/1.5 Figtree, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 3px; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }

.kopf { flex: none; height: 72px; display: flex; align-items: center; padding: 0 clamp(16px, 4.5vw, 64px); }
.kopf img { display: block; width: auto; height: 32px; max-width: 100%; }

.flaeche { flex: 1; display: grid; place-items: center; padding: 16px 16px 72px; }
.karte { width: min(100%, 480px); display: grid; gap: 20px; padding: clamp(24px, 5vw, 40px); border-radius: 28px;
  background: rgba(255, 255, 255, .68); -webkit-backdrop-filter: blur(40px) saturate(1.5); backdrop-filter: blur(40px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), var(--tief); }
.karte h1 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-align: center; text-wrap: balance; }
.unterzeile { color: var(--strom); text-align: center; text-wrap: pretty; }

.anmeldung { display: grid; gap: 16px; }
.etikett { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.feld { display: block; width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--blatt);
  box-shadow: inset 0 0 0 1px var(--linie); }
.feld:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--petrol); }
.haken { display: inline-flex; align-items: center; gap: 8px; width: fit-content; cursor: pointer; color: var(--strom); font-size: 15px; }
.haken input { width: 18px; height: 18px; accent-color: var(--petrol); }
.knopf { width: 100%; height: 52px; border: 0; border-radius: 14px; background: var(--tiefsee); color: var(--blatt);
  font-size: 16px; font-weight: 600; cursor: pointer; transition: background .2s; }
.knopf:hover { background: var(--petrol); }

.meldung { padding: 12px 16px; border-radius: 14px; background: var(--blatt); color: var(--warnung); font-size: 15px;
  box-shadow: inset 0 0 0 1px var(--warnung); }
.meldung.stufe-3 { color: var(--rot); box-shadow: inset 0 0 0 1px var(--rot); }
.geheimnis { padding: 12px 16px; border-radius: 14px; background: var(--blatt); text-align: center; overflow-wrap: anywhere; }
.geheimnis code { font-size: 15px; letter-spacing: .08em; }
.leise { color: var(--strom); font-size: 15px; }
.weg { color: var(--strom); font-size: 15px; text-align: center; }
.weg a { color: var(--tiefsee); font-weight: 600; text-decoration: none; white-space: nowrap; }
.weg a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .knopf { transition: none; } }