/* =========================================================================== Native-App-Startbildschirm (iOS + Android, Capacitor) --------------------------------------------------------------------------- In der App gibt es keine Landingpage: statt Header/Hero/Sections/Footer startet index.html direkt mit dem animierten Logo und zwei Buttons ("Anmelden" / "Kostenlos starten"). Getippt wandert das Logo nach oben links, mittig erscheint das *bestehende* #authOverlay-Formular (bewusst kein zweites Login-Formular - alle Listener, i18n-Keys und Auth-Pfade bleiben die der Web-Version). Nach erfolgreicher Anmeldung rutscht das Logo zurueck in die Mitte, das Formular blendet aus, und die Intro- Animation laeuft rueckwaerts, bevor html/app.html geladen wird. Alles haengt an html.native-shell. Diese Klasse setzt ausschliesslich der Inline-Detektor im von index.html, und zwar nur in einer echten Capacitor-WebView (oder mit ?nativeShell=1 zum Testen). Im normalen Browser greift keine einzige Regel aus dieser Datei - die Landingpage bleibt unveraendert. Farben kommen aus den bestehenden Landing-Tokens (--public-*), damit der Startbildschirm Hell-/Dunkelmodus genauso mitmacht wie der Rest. Timeline siehe unten; sie entspricht der abgestimmten Logo-Animation. =========================================================================== */ #nativeAuthShell { display: none; } html.native-shell, html.native-shell body { height: 100%; overflow: hidden; /* Kein Dokument-Scroll = nichts, was am Formularende zurueckfedert und dabei den fixierten Header mitzieht. `overflow: hidden` + `height: 100%` reichen dafuer - ein zusaetzliches `position: fixed` auf dem body war auf Android (Capacitor 8, edge-to-edge) schaedlich: beim Oeffnen der Tastatur bekommt die WebView unten ein Inset-Padding, der fixierte body folgt dem aber nicht, und darunter klaffte die WebView-Grundfarbe als grauer Block auf. */ overscroll-behavior: none; background: var(--public-canvas); } /* Safe-Area-Tokens (siehe app-tokens.css - index.html laedt die nicht). */ :root { --safe-top: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px)); --safe-right: max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px)); --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px)); --safe-left: max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px)); } /* Die Landingpage selbst bleibt im DOM (das Auth-Formular liegt darin), aber alles Marketing-Drumherum ist in der App tot. */ html.native-shell #landingPage > *:not(#authOverlay) { display: none !important; } html.native-shell #nativeAuthShell { display: block; } /* Kaltstart mit bestehender Sitzung: kein Intro, kein Anmeldescreen - aber auch kein 2 Sekunden langer leerer lila Schirm, waehrend index.html den Session-Check macht und dann html/app.html laedt. Stattdessen steht das Logo (Plektrum + "bandset") sofort STATISCH und mittig da - genau an der Stelle, wo es auch am Ende der Animation sitzt, nur ohne Animation und ohne die beiden Buttons. Gesetzt von js/native-auth.js bei gueltigem Session-Cache; bei abgelaufener Sitzung wieder entfernt (dann laeuft das normale Intro nach). */ html.native-shell #nativeAuthShell.na-skip #nativeAuthCtas, html.native-shell #nativeAuthShell.na-skip #nativeAuthBack { display: none !important; } html.native-shell #nativeAuthShell.na-skip #nativeAuthLogo { transition: none !important; } html.native-shell #nativeAuthShell.na-skip .na-drop, html.native-shell #nativeAuthShell.na-skip .na-sheen { display: none !important; } html.native-shell #nativeAuthShell.na-skip .na-solid, html.native-shell #nativeAuthShell.na-skip .na-mark, html.native-shell #nativeAuthShell.na-skip .na-letter { animation: none !important; opacity: 1 !important; transform: none !important; } /* ---------------------------------------------------------------- Buehne */ #nativeAuthShell { position: fixed; inset: 0; z-index: 90; background: var(--public-canvas); overflow: hidden; --na-bar-height: calc(var(--safe-top) + 76px); /* Logo-Geometrie. Seitenverhaeltnis = viewBox des Hochformat-Lockups (160 x 112.36), damit --na-logo-h ohne JS stimmt. */ --na-logo-w: min(62vw, 300px); --na-logo-h: calc(var(--na-logo-w) * 112.36 / 160); --na-center-y: 42vh; /* Zielposition oben links, wenn das Formular offen ist. */ --na-pad: 20px; --na-top: calc(var(--safe-top) + 12px); --na-scale: 0.44; --na-move-ease: cubic-bezier(0.66, 0, 0.24, 1); --na-move-duration: 780ms; /* Exakt die Farbe aus dem bandset-Wortbildmarken-SVG (Hell-Variante), damit das Logo hier und im App-Header identisch aussieht. */ --na-logo-ink: #251a37; --na-logo-liquid: var(--public-accent); } html[data-theme="dark"] #nativeAuthShell { /* bandset-Wortbildmarke Dunkel-Variante (fast weiss). */ --na-logo-ink: #f4f4f2; } /* Sobald das Formular offen ist, wandert die Buehne UEBER das Formular und gibt ihren Hintergrund ab (den uebernimmt dann der body). Grund: das Registrierungsformular ist laenger als der Bildschirm; scrollt es unter einem Logo hindurch, das darunter liegt, blitzen Logoteile zwischen den Feldern durch. Oben liegt deshalb eine deckende Leiste, unter der die Inhalte sauber verschwinden. pointer-events bleibt aus, damit das Formular trotzdem bedienbar ist - nur Logo und Zurueck fangen Klicks. */ #nativeAuthShell[data-phase="form"], #nativeAuthShell[data-phase="exit"] { z-index: 110; background: transparent; pointer-events: none; } /* Die zwei Start-Buttons duerfen ab der Formular-Phase unter keinen Umstaenden mehr auftauchen - der lila "Anmelden"-Button blitzte sonst auf Android im Bereich zwischen Formular und Tastatur auf. */ #nativeAuthShell[data-phase="form"] #nativeAuthCtas, #nativeAuthShell[data-phase="exit"] #nativeAuthCtas { opacity: 0 !important; visibility: hidden; pointer-events: none; } #nativeAuthShell::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: calc(var(--na-bar-height) + 18px); background: linear-gradient(to bottom, var(--public-canvas) calc(100% - 18px), transparent); opacity: 0; transition: opacity 0.28s ease 0.18s; pointer-events: none; } #nativeAuthShell[data-phase="form"]::before { opacity: 1; } /* ------------------------------------------------------------------ Logo */ #nativeAuthLogo { position: absolute; left: 0; top: 0; z-index: 1; /* ueber der deckenden Kopfleiste (::before) */ width: var(--na-logo-w); transform-origin: 0 0; /* Grundzustand = mittig. Nur die Formular-Phase schiebt nach oben links, jede andere Phase (intro/ready/exit) faellt automatisch hierher zurueck - dadurch ist "Logo rutscht zurueck in die Mitte" nur ein Attributwechsel und kein zweiter Animationspfad. */ transform: translate(calc(50vw - var(--na-logo-w) / 2), calc(var(--na-center-y) - var(--na-logo-h) / 2)) scale(1); transition: transform var(--na-move-duration) var(--na-move-ease); will-change: transform; } #nativeAuthShell[data-phase="form"] #nativeAuthLogo { transform: translate(var(--na-pad), var(--na-top)) scale(var(--na-scale)); } #nativeAuthLogo svg { display: block; width: 100%; height: auto; overflow: visible; } /* ----------------------------------------------------------------- Intro Timeline (Sekunden, Start / Dauer): Tropfen 1-3 0,05 / 0,13 / 0,20 je 1,70 Flaeche 1,50 0,50 Puls 1,55 0,55 Sheen 1,95 0,75 Buchstaben 1,75 + i * 0,06 0,55 Buttons 2,55 0,55 -> Ende 3,10 Die Regeln sind bewusst unbedingt (nicht an data-phase gebunden): mit fill-mode "both" ist der Endzustand zugleich der Ruhezustand des Logos. Nur die Exit-Phase weiter unten ueberschreibt sie. */ #nativeAuthLogo .na-drop { fill: var(--na-logo-liquid); transform-box: fill-box; transform-origin: center; animation: na-rise-drop 1.7s cubic-bezier(0.34, 0.8, 0.3, 1) both; } /* Hub und Endgroesse gehoeren zu den cx/cy/r im Markup - zusammen ergeben sie die Endlagen, die die Bildmarke lueckenlos ausfuellen. */ #nativeAuthLogo .na-drop-1 { --na-y: -72px; --na-s: 1.2; animation-delay: 0.05s; } #nativeAuthLogo .na-drop-2 { --na-y: -62px; --na-s: 1.25; animation-delay: 0.13s; } #nativeAuthLogo .na-drop-3 { --na-y: -52px; --na-s: 1.2; animation-delay: 0.2s; } #nativeAuthLogo .na-solid { fill: var(--na-logo-ink); opacity: 0; animation: na-fade 0.5s ease-out 1.5s both; } #nativeAuthLogo .na-mark { transform-origin: 80px 38px; animation: na-settle 0.55s cubic-bezier(0.34, 1.4, 0.5, 1) 1.55s both; } #nativeAuthLogo .na-sheen rect { fill: var(--na-logo-liquid); } #nativeAuthLogo .na-sheen { opacity: 0; animation: na-sheen 0.75s ease-in-out 1.95s both; } #nativeAuthLogo .na-letter { fill: var(--na-logo-ink); opacity: 0; animation: na-letter 0.55s cubic-bezier(0.25, 1.2, 0.4, 1) calc(1.75s + var(--na-i) * 0.07s) both; /* Hub = Hoehe des Schriftzugs: zum Startzeitpunkt muessen die Buchstaben komplett unter der Unterkante des Clip-Bands (y 105,16) stehen. */ --na-lift: 20px; } @keyframes na-rise-drop { from { transform: translateY(0) scale(0.5); } to { transform: translateY(var(--na-y)) scale(var(--na-s)); } } @keyframes na-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes na-settle { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } } @keyframes na-sheen { 0% { opacity: 0; transform: translateX(20px); } 25% { opacity: 0.45; } 100% { opacity: 0; transform: translateX(150px); } } @keyframes na-letter { 0% { opacity: 0; transform: translateY(var(--na-lift)); } 70% { opacity: 1; transform: translateY(-1px); } 100% { opacity: 1; transform: translateY(0); } } /* ------------------------------------------------------------------ Exit Dieselben Bewegungen rueckwaerts, aber gestrafft (~1,05 s statt 2,72 s) - ein Ausgang darf sich nicht so lange Zeit lassen wie ein Auftritt. Reihenfolge kehrt sich um: erst sinken die Buchstaben zurueck in die Grundlinie (letzter zuerst), dann verliert die Flaeche ihre Farbe, dann fallen die Tropfen zurueck nach unten. */ #nativeAuthShell.na-vanish .na-letter { animation: na-letter-out 0.3s cubic-bezier(0.4, 0, 0.7, 0.2) calc((6 - var(--na-i)) * 0.04s) both; } #nativeAuthShell.na-vanish .na-solid { animation: na-fade-out 0.3s ease-in 0.22s both; } #nativeAuthShell.na-vanish .na-mark { animation: na-settle-out 0.34s cubic-bezier(0.5, 0, 0.75, 0) 0.2s both; } #nativeAuthShell.na-vanish .na-sheen { animation: none; opacity: 0; } #nativeAuthShell.na-vanish .na-drop { animation: na-drop-out 0.68s cubic-bezier(0.7, 0.2, 0.66, 1) both; } #nativeAuthShell.na-vanish .na-drop-1 { animation-delay: 0.36s; } #nativeAuthShell.na-vanish .na-drop-2 { animation-delay: 0.3s; } #nativeAuthShell.na-vanish .na-drop-3 { animation-delay: 0.24s; } @keyframes na-letter-out { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(var(--na-lift)); } } @keyframes na-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes na-settle-out { 0% { transform: scale(1); } 35% { transform: scale(1.04); } 100% { transform: scale(0.97); } } @keyframes na-drop-out { from { transform: translateY(var(--na-y)) scale(var(--na-s)); } to { transform: translateY(0) scale(0.5); } } /* --------------------------------------------------------------- Buttons */ #nativeAuthCtas { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 30px); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 22px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.34s ease, transform 0.34s ease; } #nativeAuthShell[data-phase="intro"] #nativeAuthCtas, #nativeAuthShell[data-phase="ready"] #nativeAuthCtas { opacity: 1; transform: none; } /* Erst antippbar, wenn die Intro-Animation wirklich durch ist. */ #nativeAuthShell[data-phase="ready"] #nativeAuthCtas { pointer-events: auto; } .na-cta { width: 100%; max-width: 420px; min-height: 52px; padding: 15px 20px; border: 1px solid transparent; border-radius: 14px; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, background-color 0.16s ease, border-color 0.16s ease; } #nativeAuthShell[data-phase="intro"] .na-cta { animation: na-cta-in 0.55s cubic-bezier(0, 0, 0.58, 1) 2.55s both; } .na-cta:active { transform: scale(0.98); } .na-cta-primary { background: var(--public-accent); color: var(--public-accent-ink); } .na-cta-secondary { background: transparent; border-color: var(--public-border-strong); color: var(--public-ink); } @keyframes na-cta-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------- Auth-Formular Das bestehende #authOverlay wird in der App durchsichtig, damit die Buehne mit dem Logo darunter sichtbar bleibt; es liefert nur noch die Karte in der Mitte. */ html.native-shell #authOverlay { background: transparent !important; /* top/height setzt js/native-auth.js inline (!important) auf das sichtbare Rechteck aus window.visualViewport - siehe bindOverlayViewport(). Das ist der EINZIGE verlaessliche Weg fuer die Android-App: dort schrumpft bei offener Tastatur weder der Layout-Viewport (position:fixed/inset:0 bliebe bildschirmfuellend, Formular mittig, nur das erste Feld sichtbar) noch greift adjustResize unter targetSdk 36. Die Werte hier sind nur der Fallback, bis das Skript laeuft (bzw. wenn visualViewport fehlt). */ left: 0; right: 0; top: 0; bottom: auto !important; height: 100vh; height: 100dvh; /* >= --na-bar-height (--safe-top + 76) + 18px Fade, damit der Formularanfang nicht hinter Logo/Leiste sitzt. */ padding-top: calc(var(--safe-top) + 100px); padding-bottom: calc(var(--safe-bottom) + 56px); /* Karte vertikal zentriert solange sie passt (margin: auto 0 an der Karte), sonst flex-start + Scroll - nichts wird oben abgeschnitten. */ justify-content: flex-start; /* Fokussiertes Feld nicht unter der Kopfleiste kleben lassen, wenn die WebView es in den sichtbaren Bereich scrollt. */ scroll-padding-top: calc(var(--na-bar-height) + 12px); scroll-padding-bottom: 24px; /* Am Formularende nicht an das Dokument weiterreichen. */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } html.native-shell #authOverlay .auth-white-card { /* Zentriert vertikal wenn Platz ist (kurzes Login-Formular), faellt bei Ueberlauf (langes Registrierungsformular) auf 0 zurueck -> flex-start, kein Abschneiden oben. */ margin: auto 0; flex: 0 0 auto; } html.native-shell #authOverlay.active { animation: na-form-in 0.42s ease 0.22s both; } /* Der Kopfbereich der Auth-Seite bringt ein zweites Logo und einen Zurueck-Link mit, die beide im Formular mitscrollen. In der App ersetzt #nativeAuthBack in der Buehne beides - dort steht es fest. */ html.native-shell #authOverlay .auth-page-header { display: none; } /* Login/Registrieren-Reiter ueber dem ersten Feld: in der App ueberfluessig, weil man schon auf dem Startbildschirm einen der beiden Buttons gewaehlt hat. Zum Wechseln gibt es unten im Formular weiter den Textlink bzw. den Zurueck-Weg. */ html.native-shell #authOverlay .auth-tab-row { display: none !important; } /* "Angemeldet bleiben": in der App meldet man sich nur einmal an und bleibt dann angemeldet (js/app.js -> readRememberPreference erzwingt das). Der Haken ist nur fuer den Browser-Login gedacht. */ html.native-shell #authOverlay #loginRememberMe, html.native-shell #authOverlay label:has(> #loginRememberMe) { display: none !important; } /* -------------------------------------------------------- Zurueck-Button */ #nativeAuthBack { position: absolute; z-index: 1; top: calc(var(--safe-top) + 22px); right: 16px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--public-hairline); border-radius: 10px; background: transparent; color: var(--public-ink); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.28s ease; -webkit-tap-highlight-color: transparent; } #nativeAuthShell[data-phase="form"] #nativeAuthBack { opacity: 1; pointer-events: auto; transition-delay: 0.28s; } #nativeAuthBack:active { background: var(--public-surface-soft); } /* Ausblenden waehrend des Exits. Muss die Einblend-Animation ueberschreiben, nicht nur deren Opacity - Animationen schlagen normale Deklarationen unabhaengig von der Spezifitaet. */ html.native-shell.na-form-out #authOverlay.active { animation: na-form-out 0.3s ease both; pointer-events: none; } @keyframes na-form-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes na-form-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } } /* --------------------------------------------------------- Reduced motion Kein Auf- und Absteigen: das Logo steht sofort im Endzustand, die Positionswechsel bleiben (ohne sie waere unklar, wo das Formular herkommt), laufen aber ohne Uebergang. */ @media (prefers-reduced-motion: reduce) { #nativeAuthLogo { transition-duration: 1ms; } #nativeAuthLogo .na-drop, #nativeAuthLogo .na-sheen, #nativeAuthShell.na-vanish .na-drop, #nativeAuthShell.na-vanish .na-sheen { display: none; } #nativeAuthLogo .na-solid, #nativeAuthLogo .na-mark, #nativeAuthLogo .na-letter, #nativeAuthShell[data-phase="intro"] .na-cta { animation: none; opacity: 1; transform: none; } #nativeAuthShell.na-vanish .na-solid, #nativeAuthShell.na-vanish .na-mark, #nativeAuthShell.na-vanish .na-letter { animation: na-fade-out 0.2s ease both; transform: none; } html.native-shell #authOverlay.active, html.native-shell.na-form-out #authOverlay.active { animation-duration: 1ms; } }