/*
 * Startbildschirm.
 *
 * ## Warum eine eigene Datei, und warum als erste eingebunden
 *
 * Der Startbildschirm muss beim **ersten** Bildaufbau dastehen — bevor ein
 * einziges Programmmodul geladen ist. Er steht deshalb im Dokument und nicht
 * im Programm, und seine Gestaltung steht hier und nicht in `app.css`: diese
 * Datei ist klein, wird als erste geladen und ist die einzige, die vor dem
 * ersten Bild gebraucht wird.
 *
 * ## Warum feste Farben und keine Variablen
 *
 * Der Bildschirm ist eine Marke und kein Bedienelement. Er sieht im hellen
 * und im dunklen Modus gleich aus — sonst waere das Logo eines Ingenieurbueros
 * je nach Systemeinstellung ein anderes. Die uebrigen Ansichten folgen
 * weiterhin `prefers-color-scheme`.
 *
 * ## Hochformat zuerst
 *
 * Samsung-Hochformat, 412 x 915: Zeichnung, Schriftzug und Fusszeile passen
 * ohne Bildlauf. Im Querformat rueckt die Zeichnung enger, damit die
 * Textzeilen sichtbar bleiben.
 */

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  background: #0d1c28;
  background-image:
    radial-gradient(120% 80% at 50% 18%, #1b3a55 0%, #0d1c28 62%, #0a1620 100%);
  color: #e8eef2;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center;
  /* Der Uebergang gehoert dem Startbildschirm und nicht der Anwendung: er
     verschwindet, sie erscheint nicht. */
  opacity: 1;
  transition: opacity 320ms ease-out;
}

/* Ausgeblendet: nicht mehr sichtbar und nicht mehr bedienbar. Der Knoten wird
   danach entfernt — bis dahin darf er keine Beruehrung abfangen. */
.splash.aus {
  opacity: 0;
  pointer-events: none;
}

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

.splash-inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 420px;
  width: 100%;
}

.splash-bild {
  width: 100%;
  max-width: 340px;
  height: auto;
  margin-bottom: 26px;
}

.splash-buero {
  margin: 0 0 6px;
  font-size: clamp(0.7rem, 3vw, 0.82rem);
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #8fbcdd;
}

.splash-titel {
  margin: 0 0 10px;
  /* Der Name darf nicht am Bindestrich umbrechen: „NWG-" auf der einen und
     „Gebäudeaufnahme" auf der naechsten Zeile liest sich wie zwei Woerter.
     Die Groesse folgt deshalb der Breite und nicht umgekehrt. */
  font-size: clamp(1.15rem, 6.2vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #ffffff;
}

.splash-leistung {
  margin: 0 0 22px;
  font-size: clamp(0.76rem, 3.4vw, 0.9rem);
  /* „DIN V 18599" bleibt zusammen — die Norm ist ein Name, kein Satz. */
  white-space: nowrap;
  color: #b6c8d6;
}

.splash-linie {
  width: 64px;
  height: 1px;
  margin: 0 0 20px;
  background: #3d6485;
}

.splash-person {
  margin: 0 0 26px;
  font-size: 0.95rem;
  color: #dbe6ee;
}

.splash-fuss {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: #7f97a8;
}

/*
 * „Anwendung wird vorbereitet …" — erscheint erst, wenn die Initialisierung
 * laenger dauert als die Mindestanzeige. Vorher waere sie eine Meldung ueber
 * etwas, das gar nicht stockt, und der Startbildschirm saehe bei jedem Start
 * nach einem Problem aus.
 */
.splash-stand {
  margin: 14px 0 0;
  min-height: 1.4em;
  font-size: 0.85rem;
  color: #8fbcdd;
}

/* Querformat: die Zeichnung tritt zurueck, der Schriftzug bleibt. */
@media (orientation: landscape) and (max-height: 560px) {
  .splash-bild { max-width: 220px; margin-bottom: 14px; }
  .splash-titel { font-size: 1.35rem; }
  .splash-leistung { margin-bottom: 14px; }
  .splash-person { margin-bottom: 14px; }
}