/* Ladebildschirm beim Start der installierten App (pwaLaunchScreen.js). Wird auch in
   pwaStart.php eingebettet — dort ohne design_2026.css, deshalb keine --atlantis-*-Variablen,
   und Schrift/Farbe stehen hier selbst (der Bildschirm hängt an <html>, nicht in <body>).
   Weiß = background_color in manifest.json: Androids Startbild geht ohne Farbwechsel über. */
/* 100vw/100vh statt 100 %: bis global.js bei document.ready isMobile setzt, ist die Seite breiter
   als das Handy, Chrome vergrößert den Layout-Viewport (gemessen 863 × 1917 statt 412 × 915) —
   mit 100 % wüchse der Bildschirm mit, und der Fisch rutschte aus dem Bild. */
#pwaLaunchScreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000000; /* über #modalLoadingOverlay (999999) */
    background-color: white;
    font-family: arial;
    color: grey;
    transition: opacity 0.3s; /* = PWA_LAUNCH_FADE_MS */
}

#pwaLaunchScreen.pwaLaunchDone {
    opacity: 0;
    pointer-events: none;
}

/* Fisch und Text erst zusammen mit dem geladenen Bild (pwaLaunchReady) */
#pwaLaunchScreen > * {
    visibility: hidden;
}

#pwaLaunchScreen.pwaLaunchReady > * {
    visibility: visible;
}

/* Fischmitte = Bildschirmmitte und Größe wie Androids Startbild (gemessen am Fairphone 5:
   41,7 % der Bildschirmbreite), damit der Fisch beim Übergang nicht springt. */
#pwaLaunchScreen img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12.25rem;
    height: 12.25rem;
    margin: -6.125rem 0 0 -6.125rem;
    animation: pwaLaunchBreathe 2.4s ease-in-out infinite;
}

/* Unter dem Fisch, ohne ihn aus der Mitte zu schieben */
#pwaLaunchText {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + 7.5rem);
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.5rem; /* sonst normal auf pwaStart.php, 1.8rem in der App: Text spränge beim Übergang */
}

/* Negative Verzögerungen: alle Punkte laufen sofort im Takt, keiner steht anfangs voll da */
#pwaLaunchText span {
    animation: pwaLaunchDot 1.5s ease-in-out infinite;
    animation-delay: -0.5s;
}

#pwaLaunchText span:nth-child(2) {
    animation-delay: -0.25s;
}

#pwaLaunchText span:nth-child(3) {
    animation-delay: 0s;
}

@keyframes pwaLaunchBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

@keyframes pwaLaunchDot {
    0%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
}
