/* P-Date – Web-Styling abgeleitet aus dem Flutter-Material-3-Theme (Seed #4F46E5, Light) */
@font-face {
 font-family:'Inter';
 src:url('/assets/assets/fonts/Inter-Regular.ttf') format('truetype');
 font-weight:400; font-display:swap;
}

@font-face {
  font-family:'Inter';
  src:url('/assets/assets/fonts/Inter-Medium.ttf') format('truetype');
  font-weight:500; font-display:swap;
}

@font-face {
  font-family:'Inter';
  src:url('/assets/assets/fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight:600; font-display:swap;
}

@font-face {
  font-family:'Inter';
  src:url('/assets/assets/fonts/Inter-Bold.ttf') format('truetype');
  font-weight:700; font-display:swap;
}

/* Material-Icons-Glyphe – vollständige OTF (alle Symbole der Windows App) */
@font-face {
  font-family:'Material Icons';
  src:url('/assets/fonts/MaterialIcons-Regular.otf') format('opentype');
  font-style:normal;
  font-weight:400;
  font-display:block;
}

.mi {
  font-family:'Material Icons' !important;
  font-weight:normal;
  font-style:normal;
  font-size:24px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  vertical-align:middle;
  -webkit-font-smoothing:antialiased;
}

:root {
  --accent:#4f46e5;            /* M3 primary (Seed Indigo)    */
  --on-accent:#ffffff;
  --bg:#faf9ff;                /* M3 light surface/background */
  --surface:#ffffffaa;           /* Karten                      */
  --text:#1c1b20;              /* M3 on-surface               */
  --muted:#7a7784;             /* M3 secondary-text           */
  --outline:#cac4d0;           /* Feld-/Karten-Rahmen         */
  --err:#ba1a1a;               /* M3 error                    */
  --ok:#146c2e;                /* grüne Erfolgsmeldungen      */
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter',system-ui,sans-serif;
}

body {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  color:var(--text);
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/assets/pictures/background.png");
  background-position: left center;
}

/* Card = Flutter-Card: weiß, Radius 12 px, Elevation 1 */
.card {
  width:min(420px,90vw);
  text-align:center;
  padding:32px 28px;
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,.08), 0 1px 3px 1px rgba(0,0,0,.05);
  margin-top:10px;
  margin-bottom:10px;
}

.card.wide {
  width:min(680px,92vw);
  text-align:left;
}

.msg {
  min-height:1.4em;
  margin-top:16px;
  font-size:.9rem;
  line-height:1.4;
}

.error {
  color:var(--err);
}

.ok {
  color:var(--ok);
}

h1 {
  font-size:1.7rem;            /* M3 headlineMedium         */
  font-weight:600;             /* Inter SemiBold            */
  letter-spacing:.2px;
  margin-bottom:16px;
  color:var(--text);
}

p.sub {
  color:var(--muted);          /* bodyLarge                 */
  font-size:1rem;
  line-height:1.5;
  margin-bottom:28px;
}

label {
  display:inline-block;
  text-align:left;
  font-size:.85rem;            /* labelLarge                */
  color:var(--muted);
  margin:16px 0 6px;
}

/* OutlinedTextField-Look (Material 3) */
input {
  width:100%;
  padding:14px 16px;           /* ≈ 48 px Mindesthöhe       */
  border-radius:8px;
  border:1px solid var(--outline);
  background:transparent;      /* M3 outlined = transparent */
  color:var(--text);
  font-size:1rem;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}

input[type="checkbox"] {
  width:48px;
}

input::placeholder {
  color:var(--muted);
}

input:focus {
  border:2px solid var(--accent);
  padding-left:15px;           /* Rahmenstärke ausgleichen  */
  padding-right:15px;
}

button {
  margin-top:24px;
  min-height:48px;             /* FilledButton minimumSize  */
  width:100%;
  padding:0 24px;
  border:none;
  border-radius:999px;         /* M3 Stadium-Form           */
  cursor:pointer;
  background:var(--accent);
  color:var(--on-accent);
  font-weight:600;
  font-size:1rem;              /* labelLarge                */
  letter-spacing:.1px;
  transition:filter .15s ease, box-shadow .15s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.12), 0 1px 3px 1px rgba(79,70,229,.12);
}

button:hover:not(:disabled) {
  filter:brightness(1.08);
}

button.ghost {
  display:inline-block;       /* OutlinedButton            */
  width:auto;
  margin-top:16px;
  padding:0 26px;
  min-height:48px;
  background:transparent;
  color:var(--accent);
  border:1px solid var(--outline);
  border-radius:999px;
  font-weight:600;
  box-shadow:none;
}

button.ghost:hover:not(:disabled) {
  filter:none;
  background:rgba(79,70,229,.06);
}

button:disabled {
  opacity:.5; cursor:not-allowed;
}

button.btn-icon, a.btn-icon {
  display:block;
  align-items:center;
  gap:8px;
}

button.btn-icon .mi, a.btn-icon .mi {
  font-size:20px;
}


/* E-Mail-Bestätigung: sechs Ziffernfelder im Outlined-Stil */
.code-boxes {
  display:flex;
  gap:10px;
  justify-content:center;
  margin:20px 0;
  flex-wrap:wrap;
}

.digit {
  width:46px;
  height:54px;
  text-align:center;
  font-size:1.5rem;
  border-radius:8px;
  background:transparent;
  color:var(--text);
  border:1px solid var(--outline);
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}

.digit:focus {
  border:2px solid var(--accent);
  box-sizing:border-box;
}

.hint {
  min-height:1.2em;
  margin-top:8px;
  font-size:.8rem;
  color:var(--muted);
  text-align: left;
}

a.link {
  display:inline-block;
  margin-top:18px;
  font-size:.9rem;             /* M3 link = primary         */
  color:var(--accent);
  text-decoration:none;
}

a.small {
  font-size:0.75rem;             /* M3 link = primary         */
}

a.link:hover {
  text-decoration:underline;
}

/* Großformatige Buttons auf der Startseite (ebenfalls Stadium) */
a.btn {
  display:block;
  min-height:48px;
  /*line-height:calc(48px - 28px + 28px);`*/
  padding:14px 24px;
  margin:12px 0;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  transition:filter .15s ease, box-shadow .15s ease;
  font-size: 20px;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .1px;
}

a.primary {
  background:var(--accent);
  color:#fff;
  box-shadow:0 1px 2px rgba(79,70,229,.3), 0 2px 6px 2px rgba(79,70,229,.15);
}

a.btn:hover {
  filter:brightness(1.05);
}

.secondary {
  background:transparent;
  color:var(--text);
  border:1px solid var(--outline);
}

#statusBox {
  display:none;
  margin-bottom:20px;
  padding:12px 14px;
  border-radius:12px;          /* M3-Surface-Ton            */
  background:rgba(20,108,46,.08);
  border:1px solid rgba(20,108,46,.25);
  color:var(--ok);
  font-size:.9rem;
  text-align:left;
}

/* Checkbox „Login merken“ – natives HTML-Eingabefeld mit M3-Akzentfarbe */
.remember {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:4px;
  padding-bottom:12px;
  cursor:pointer;
  user-select:none;
  font-size:.9rem;
}
.remember input[type=checkbox] {
  accent-color: var(--accent);
  width:18px;
  height:18px;
  margin:0;
  flex-shrink:0;
  cursor:pointer;
}

footer {
  position:fixed;
  bottom:16px;
  font-size:.75rem;
  color:var(--muted);
  width: 100%;
}

/* Icons wie im Flutter-Login-Screen */
.avatar {
  width:95%;
  height:56px;
  margin-bottom:16px;          /* SizedBox(height:16) in der App */
  color:var(--accent);         /* theme.colorScheme.primary     */
}

.avatar .mi {
  font-size:56px;
}

/* Kleine Glyphen z. B. im Abmelde-Link der StatusBox */
.mi-sm {
  font-size:18px;
  vertical-align:-3px;
  margin-left:4px;
  color:#e57373;
  cursor:pointer;
}

#statusBox a:hover .mi-sm, #statusBox a:hover > .mi-sm {
  color:#ba1a1a;
}

.field {
  position:relative;
}

.field input {        /* Platz für Prefix-Icon   */
  padding-left:44px;
}

.field.has-suffix input {
  padding-right:48px;
}

.field input:focus {
  padding-left:43px;
  border-width:2px;
}

.field.has-suffix input:focus {
  padding-right:47px;
}

.prefix {
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  pointer-events:none;
  color:var(--text);
}

.prefix .mi {
  font-size:20px; flex-shrink:0;
}

.icon-btn {
  position:absolute;
  right:5px;
  top:50%;
  transform:translateY(-50%);
  width:auto;
  min-height:auto;
  margin:0;
  padding:6px;
  background:none;
  border:none;
  box-shadow:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  cursor:pointer;
  color:var(--muted);
}

.icon-btn:hover:not(:disabled) {
  filter:none;
  background:rgba(0,0,0,.06);
}

.icon-btn .mi {
  font-size:20px;
}

div.right {
  display: flex;
  justify-content: flex-end;
}