@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/Sora-Bold-ab81a2699f2b.woff2') format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/Sora-ExtraBold-252d9bb6e981.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/PlusJakartaSans-Regular-1fab25b7246f.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/PlusJakartaSans-Medium-20b71f716687.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/PlusJakartaSans-SemiBold-463aa51a8d4a.woff2') format('woff2')}
/* GENERIERT von packages/design-tokens (pnpm tokens). Nicht von Hand ändern. */
:root {
  --mnv-color-night: #0A0E27;
  --mnv-color-violett: #4B2BF0;
  --mnv-color-blau: #2F6BFF;
  --mnv-color-mint: #14D3A0;
  --mnv-color-tiefviolett: #1A0B66;
  --mnv-color-indigo: #3B1FD9;
  --mnv-color-royal: #2348D6;
  --mnv-color-fliesstext: #3A3F58;
  --mnv-color-grau: #5A5F78;
  --mnv-color-linie: #E3E5EF;
  --mnv-color-soft: #F4F5FB;
  --mnv-color-lila-hell: #EEF0FF;
  --mnv-color-mint-dunkel: #0B8F6C;
  --mnv-color-signal-rot: #E5484D;
  --mnv-color-weiss: #FFFFFF;
  --mnv-color-night-10: #E6E7E9;
  --mnv-color-night-20: #CECFD4;
  --mnv-color-night-50: #848693;
  --mnv-color-violett-10: #EDEAFE;
  --mnv-color-violett-20: #DBD5FC;
  --mnv-color-violett-50: #A595F8;
  --mnv-color-blau-10: #EAF0FF;
  --mnv-color-blau-20: #D5E1FF;
  --mnv-color-blau-50: #97B5FF;
  --mnv-color-mint-10: #E8FBF6;
  --mnv-color-mint-20: #D0F6EC;
  --mnv-color-mint-50: #8AE9D0;
  --mnv-color-rot-10: #FDECEC;
  --mnv-color-rot-dunkel: #B4262B;
  --mnv-color-mint-text: #097B5D;
  --mnv-color-rot-dunkel-hover: #992025;
  --mnv-verlauf-signatur: linear-gradient(120deg, #4B2BF0 0%, #2F6BFF 60%, #14D3A0 100%);
  --mnv-verlauf-kapitel: linear-gradient(160deg, #1A0B66 0%, #3B1FD9 45%, #2348D6 85%);
  --mnv-verlauf-text-hell: linear-gradient(100deg, #4B2BF0 0%, #2F6BFF 55%, #0E9F7E 100%);
  --mnv-verlauf-text-dunkel: linear-gradient(90deg, #B4A8FF 0%, #7FB2FF 50%, #3BF0BF 100%);
  --mnv-verlauf-kachel: linear-gradient(135deg, #4B2BF0 0%, #2F6BFF 60%, #14D3A0 100%);
  --mnv-radius-karte: 20px;
  --mnv-radius-kachel: 14px;
  --mnv-radius-pill: 999px;
  --mnv-radius-control: 12px;
  --mnv-radius-sheet: 24px;
  --mnv-radius-chat-ecke: 6px;
  --mnv-radius-zaehler-mobil: 16px;
  --mnv-radius-checkbox: 8px;
  --mnv-shadow-karte: 0 10px 30px rgba(20,24,60,0.06);
  --mnv-font-headline: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --mnv-font-text: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
}

/*
 * Einstiegsseite login.mentanova.app (M4.20): Aufbau wie die Kunden-Anmeldung (`AuthScreen`,
 * docs/12 §6) – Night mit violettem und mintfarbenem Glow und Punkteraster, Logo negativ, weiße
 * Karte. Nur Design-Tokens (`var(--mnv-…)`), keine Farbwerte. Ohne JavaScript.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--mnv-color-night);
  color: var(--mnv-color-fliesstext);
  font-family: var(--mnv-font-text);
  -webkit-font-smoothing: antialiased;
}

/* Fokus-Ring je Untergrund (Entscheidung T10): hell → Violett, dunkel → Violett 50. */
[data-surface='hell'] {
  --mnv-focus-ring: var(--mnv-color-violett);
}

[data-surface='dunkel'] {
  --mnv-focus-ring: var(--mnv-color-violett-50);
}

:focus-visible {
  outline: 2px solid var(--mnv-focus-ring, var(--mnv-color-violett));
  outline-offset: 2px;
}

.screen {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  align-items: center;
  padding: 40px 16px;
  background-color: var(--mnv-color-night);
  background-image:
    radial-gradient(
      360px 240px at 85% 0%,
      color-mix(in srgb, var(--mnv-color-violett) 60%, transparent),
      transparent 70%
    ),
    radial-gradient(
      320px 220px at 10% 100%,
      color-mix(in srgb, var(--mnv-color-mint) 45%, transparent),
      transparent 70%
    );
}

.raster {
  pointer-events: none;
  position: fixed;
  inset: 0;
  background-image: url('/assets/punkteraster-027441cc46e2.svg');
  background-size: 26px 26px;
}

.column {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 460px;
  flex-direction: column;
  gap: 32px;
}

.logo {
  display: block;
  width: 170px;
  height: auto;
  max-width: none;
  align-self: center;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: var(--mnv-radius-karte);
  background-color: var(--mnv-color-weiss);
  padding: 24px;
  box-shadow: var(--mnv-shadow-karte);
}

.intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kicker {
  margin: 0;
  color: var(--mnv-color-violett);
  font-family: var(--mnv-font-headline);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: var(--mnv-color-night);
  font-family: var(--mnv-font-headline);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.body {
  margin: 0;
  color: var(--mnv-color-fliesstext);
  font-size: 16px;
  line-height: 1.6;
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--mnv-radius-control);
  background-color: var(--mnv-color-soft);
  padding: 12px 14px;
  color: var(--mnv-color-night);
  font-size: 13px;
  line-height: 1.5;
}

.notice svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--mnv-color-violett);
}

.notice span {
  min-width: 0;
  overflow-wrap: anywhere;
}

form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  color: var(--mnv-color-night);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.control {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--mnv-color-linie);
  border-radius: var(--mnv-radius-control);
  background-color: var(--mnv-color-weiss);
  padding: 12px 14px;
  color: var(--mnv-color-night);
  font-family: var(--mnv-font-text);
  font-size: 16px;
  line-height: 1.6;
  transition: border-color 0.15s;
}

.control::placeholder {
  color: var(--mnv-color-grau);
}

.control:focus {
  border-color: var(--mnv-color-violett);
}

.control[aria-invalid='true'] {
  border-color: var(--mnv-color-signal-rot);
}

/* Firmenadresse: Eingabe mit fester Endung „.mentanova.app“. */
.affix {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.affix .control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.suffix {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  border: 1px solid var(--mnv-color-linie);
  border-left: 0;
  border-top-right-radius: var(--mnv-radius-control);
  border-bottom-right-radius: var(--mnv-radius-control);
  background-color: var(--mnv-color-soft);
  padding: 0 12px;
  color: var(--mnv-color-grau);
  font-size: 15px;
}

.hint {
  color: var(--mnv-color-grau);
  font-size: 13px;
  line-height: 1.5;
}

.error {
  color: var(--mnv-color-rot-dunkel);
  font-size: 13px;
  line-height: 1.5;
}

.button {
  display: inline-flex;
  width: 100%;
  height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--mnv-color-violett);
  border-radius: var(--mnv-radius-kachel);
  background-color: var(--mnv-color-violett);
  padding: 0 20px;
  color: var(--mnv-color-weiss);
  cursor: pointer;
  font-family: var(--mnv-font-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

.button.secondary {
  border-color: var(--mnv-color-linie);
  background-color: var(--mnv-color-weiss);
  color: var(--mnv-color-night);
}

@media (hover: hover) {
  .button:hover {
    border-color: var(--mnv-color-indigo);
    background-color: var(--mnv-color-indigo);
    color: var(--mnv-color-weiss);
  }

  .button.secondary:hover {
    border-color: var(--mnv-color-linie);
    background-color: var(--mnv-color-soft);
    color: var(--mnv-color-night);
  }

  a:hover,
  summary:hover {
    color: var(--mnv-color-indigo);
  }
}

.divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--mnv-color-linie);
}

/* Zweitweg (Nr. 515): ohne JavaScript über details/summary. */
details {
  display: flex;
  flex-direction: column;
}

summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: var(--mnv-color-violett);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary svg {
  flex-shrink: 0;
  transition: transform 0.15s;
}

details[open] summary svg {
  transform: rotate(90deg);
}

details form {
  margin-top: 10px;
}

.meta {
  margin: 0;
  color: var(--mnv-color-grau);
  font-size: 13px;
  line-height: 1.5;
}

a {
  color: var(--mnv-color-violett);
  font-weight: 600;
}

.footer {
  color: var(--mnv-color-weiss);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 48rem) {
  .screen {
    justify-content: center;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .logo {
    align-self: flex-start;
  }

  .card {
    padding: 32px;
  }

  h1 {
    font-size: 32px;
  }

  .body {
    font-size: 15px;
  }

  label,
  summary {
    font-size: 14px;
  }

  .suffix {
    font-size: 14px;
  }

  .button {
    height: 46px;
    border-radius: var(--mnv-radius-control);
  }

  .footer {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .raster {
    display: none;
  }
}