/* =========================================================
   Login – Netzwerkdokumentation
   Weiße Seite → der ganze Bildschirm wechselt sanft von Weiß in Akzentblau → das weiße Logo erscheint groß in der Mitte, darunter eine schlanke Maske.
   Schriften und Farben wie in der Doku, alles lokal (kein CDN).
   ========================================================= */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 700; font-display: swap; src: url("assets/fonts/inter-tight-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Life Savers"; font-weight: 800; font-display: swap; src: url("assets/fonts/life-savers-latin-800-normal.woff2") format("woff2"); }
/* Erweiterter Zeichensatz für Sonderbuchstaben in der Wortmarke */
@font-face { font-family: "Life Savers"; font-weight: 800; font-display: swap; src: url("assets/fonts/life-savers-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  --akzent: #0D1C5C;           /* Blau der Lunge – einzige Akzentfarbe */
  --weiss: #ffffff;
  --text: #18181b;
  --text-2: #3f3f46;
  --muted: #71717a;
  --rand: #dcdce0;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Inter Tight", "Inter", system-ui, sans-serif;

  /* Zeitplan der Animation beim Betreten */
  --start: 0.15s;              /* beginnt praktisch sofort */
  --einfahrt: 1s;              /* Bildschirm wechselt vollflächig von Weiß zu Blau */
  --fenster: calc(var(--start) + var(--einfahrt) - 0.15s);   /* Logo erscheint, sobald die Fläche blau ist */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; min-height: 100vh; overflow: hidden;
  background: var(--weiss); color: var(--text);
  font: 15px/1.6 var(--font); -webkit-font-smoothing: antialiased;
  display: grid; place-items: center;
}

/* ---------- Blaue Fläche ----------
   Beim Betreten blendet sie vollflächig ein (Weiß → Akzentblau), nach der Anmeldung wieder aus. */
.flaeche {
  position: fixed; inset: 0; pointer-events: none; background: var(--akzent);
  animation: einblenden var(--einfahrt) cubic-bezier(.4, 0, .2, 1) var(--start) both;
}
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Logo und Anmeldemaske ---------- */
.anmeldung {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  width: min(320px, calc(100vw - 48px));
  animation: erscheinen .8s cubic-bezier(.2, .8, .2, 1) var(--fenster) both;
}
@keyframes erscheinen {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Nur für Screenreader */
.unsichtbar { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Tiefblauer Schein unter allen Elementen – gibt der blauen Fläche etwas Tiefe */
:root {
  --glow: rgba(2, 6, 26, .55);
  --glow-stark: rgba(2, 6, 26, .7);
}

/* Das Logo (Lunge) – weiß, freistehend */
.logo {
  /* 375 px – auf schmalen oder niedrigen Fenstern automatisch kleiner, damit die Maske sichtbar bleibt */
  display: block; width: min(375px, 63vw, 41vh); height: auto; margin-bottom: 10px;
  filter: drop-shadow(0 14px 30px var(--glow));
  animation: logo 1s cubic-bezier(.2, .8, .2, 1) var(--fenster) both;
}
@keyframes logo {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* Name der Seite unter dem Logo – Wortmarke wie in der Kopfzeile der Doku, hier in Weiß */
.marke {
  margin: 0 0 34px; color: var(--weiss); white-space: nowrap;
  font: 800 42px/1 "Life Savers", var(--font-head); letter-spacing: -.01em;
  text-shadow: 0 6px 22px var(--glow);
  animation: logo 1s cubic-bezier(.2, .8, .2, 1) calc(var(--fenster) + .1s) both;
}
.marke-gross { font-size: 1.3em; }  /* „Betty“ 30 % größer, wie in der Doku */
/* Unterzeile unter der Wortmarke: Teil des Titels nach dem Doppelpunkt */
.marke-unter {
  margin: -22px 0 30px; color: var(--weiss); text-align: center;
  font: 600 15px/1.35 var(--font);
  animation: logo 1s cubic-bezier(.2, .8, .2, 1) calc(var(--fenster) + .15s) both;
}

/* Maske: zwei Felder und ein Knopf, nur Platzhalter – kommt kurz nach dem Logo */
.formular {
  display: grid; gap: 10px; width: 100%;
  animation: erscheinen .7s cubic-bezier(.2, .8, .2, 1) calc(var(--fenster) + .2s) both;
}
/* Felder in die blaue Fläche eingelassen: etwas dunkleres Blau mit weißer Linie.
   Fokus: Linie wird kräftiger (zweite weiße Linie als Schatten) */
.formular input {
  --feld: color-mix(in srgb, #000 16%, var(--akzent));
  width: 100%; padding: 12px 16px;
  font: inherit; color: var(--weiss); text-align: center;
  background: var(--feld);
  border: 1px solid var(--weiss); border-radius: 12px;
  box-shadow: 0 10px 24px -10px var(--glow);
  outline: none; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.formular input::placeholder { color: var(--weiss); opacity: 1; text-align: center; }
.formular input:hover { background: color-mix(in srgb, #000 22%, var(--akzent)); }
.formular input:focus-visible { box-shadow: 0 0 0 1px var(--weiss), 0 10px 24px -10px var(--glow); }
/* Vom Browser ausgefüllte Felder: gleiche Farbe statt Gelb/Blau */
.formular input:-webkit-autofill,
.formular input:-webkit-autofill:hover,
.formular input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--weiss); caret-color: var(--weiss);
  box-shadow: 0 0 0 100px var(--feld) inset, 0 10px 24px -10px var(--glow);
  transition: background-color 9999s;
}
.formular input:-webkit-autofill:focus-visible { box-shadow: 0 0 0 100px var(--feld) inset, 0 0 0 1px var(--weiss), 0 10px 24px -10px var(--glow); }

.knopf {
  margin-top: 6px; padding: 12px 16px;
  font: 600 15px var(--font); color: var(--weiss);   /* weiße Schrift und Linie wie die Felder */
  background: color-mix(in srgb, #000 16%, var(--akzent)); border: 2px solid var(--weiss); border-radius: 12px; cursor: pointer;
  box-shadow: 0 10px 24px -10px var(--glow);
  transition: background-color .2s, color .2s;
}
/* Hover/Tastatur-Fokus: Farben tauschen – weißer Knopf, blaue Schrift */
.knopf:hover:not(:disabled), .knopf:focus-visible {
  outline: none; background: var(--weiss); color: var(--akzent);
}
.knopf:disabled { cursor: progress; opacity: .75; }

/* Platz für eine Meldung ist reserviert – nichts springt, wenn sie erscheint */
.meldung { min-height: 1.5em; margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--weiss); text-align: center; }

/* ---------- Fußzeile (weiß auf der blauen Fläche) ---------- */
.fuss {
  position: fixed; left: 0; right: 0; bottom: 16px; z-index: 1;
  text-align: center; font-size: 12.5px; color: var(--weiss); opacity: .85;
  animation: erscheinen .7s ease var(--fenster) both;
}

/* ---------- Nach erfolgreicher Anmeldung ----------
   Logo und Maske blenden aus, die blaue Fläche bleibt stehen. Die Doku beginnt unter derselben blauen Fläche,
   die dort ruhig ausblendet (Gegenstück in src/styles/custom.css: html.ankunft). */
body.abschied .anmeldung,
body.abschied .fuss { animation: verschwinden .45s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes verschwinden { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.985); } }

/* ---------- Kleine Bildschirme ---------- */
@media (max-height: 560px) {
  .logo { margin-bottom: 6px; }
  .marke { font-size: 32px; margin-bottom: 20px; }
  .marke-unter { margin: -12px 0 18px; font-size: 13.5px; }
}

/* ---------- Weniger Bewegung gewünscht: Endzustand sofort ---------- */
@media (prefers-reduced-motion: reduce) {
  .knopf { transition: none; }
  .flaeche, .anmeldung, .logo, .marke, .marke-unter, .formular, .fuss,
  body.abschied .anmeldung, body.abschied .fuss { animation: none; }
}