/* ═══════════════════════════════════════════════════════════════════════════ APPLE LIGHT — PRE-LOGIN THEME §APPLE-LIGHT-2026-09-11 --------------------------------------------------------------------------- Scope guard: EVERY rule in this file is gated behind `body:not(.auth-ready)`. `auth-ready` is added by v11MarkAuthReady() on successful login (assets/js/ui-render.js:34155) and removed by v11ClearAuth(). The logged-in cyber-dark shell (#cd-shell, chat, settings, mobile shell) therefore never matches a single selector below — the dark theme stays byte-for-byte intact. Loaded LAST in so it wins on equal specificity; `!important` is used only where the markup carries inline style attributes. Structure / IDs / handlers are untouched — this file is presentation only. Revert = remove the one tag in index.html. ═══════════════════════════════════════════════════════════════════════════ */ body:not(.auth-ready){ /* Surfaces */ --al-bg: #F5F5F7; --al-bg-alt: #FFFFFF; --al-surface: rgba(255, 255, 255, 0.80); --al-surface-solid: rgba(255, 255, 255, 0.92); --al-fill: #F2F2F7; --al-fill-2: #E8E8ED; --al-fill-3: #E2E2E7; /* Text */ --al-text: #1D1D1F; --al-text-2: #86868B; --al-text-3: #A1A1A6; /* Lines */ --al-border: rgba(0, 0, 0, 0.08); --al-border-soft: rgba(0, 0, 0, 0.05); /* Accents */ --al-accent: #0071E3; --al-accent-hi: #0077ED; --al-accent-soft: rgba(0, 113, 227, 0.08); --al-ink: #1D1D1F; --al-gold: #8A6100; --al-gold-soft: rgba(180, 132, 0, 0.10); --al-green: #1D8A4E; --al-red: #C7332B; /* Elevation */ --al-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --al-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); --al-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.04); --al-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.06); --al-shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.10); /* Radii */ --al-r-sm: 10px; --al-r: 14px; --al-r-lg: 20px; --al-r-xl: 26px; } /* ─────────────────────────────────────────────────────────────────────────── 1. PAGE SURFACE ─────────────────────────────────────────────────────────────────────────── */ body:not(.auth-ready){ background: var(--al-bg) !important; color: var(--al-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body:not(.auth-ready) #landing-screen, body:not(.auth-ready) #splash, body:not(.auth-ready) #login-screen, body:not(.auth-ready) #setup-new, body:not(.auth-ready) #setup-join, body:not(.auth-ready) #recovery-screen{ background: var(--al-bg) !important; color: var(--al-text); } /* Dark decorative vignettes / grids / particle canvases read as dirt on a light ground — retire them for the pre-login surface only. */ body:not(.auth-ready) #landing-screen #lp-hero::before, body:not(.auth-ready) #landing-screen #lp-hero::after, body:not(.auth-ready) #splash.ec-auth-landing::before, body:not(.auth-ready) #splash.ec-auth-landing::after{ display: none !important; } body:not(.auth-ready) #splash-particles, body:not(.auth-ready) #lp-cursor, body:not(.auth-ready) #lp-trail, body:not(.auth-ready) #landing-screen .lp-motion-dust, body:not(.auth-ready) #lp-hero-canvas{ display: none !important; } /* Selection */ body:not(.auth-ready) ::selection{ background: rgba(0, 113, 227, 0.16); color: var(--al-text); } /* ─────────────────────────────────────────────────────────────────────────── 2. HEADER / NAVIGATION ─────────────────────────────────────────────────────────────────────────── */ body:not(.auth-ready) #lp-nav{ background: rgba(245, 245, 247, 0.80) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--al-border-soft) !important; padding: 0.7rem clamp(1rem, 3vw, 2.5rem) !important; min-height: 56px; } body:not(.auth-ready) #landing-screen .lp-nav-logo, body:not(.auth-ready) #landing-screen .lp-nav-logo-text{ color: var(--al-text) !important; letter-spacing: -0.02em; font-weight: 600; } body:not(.auth-ready) #landing-screen .lp-nav-links a{ color: var(--al-text-2) !important; font-size: 0.8rem; font-weight: 500; transition: color 0.2s ease; } body:not(.auth-ready) #landing-screen .lp-nav-links a:hover{ color: var(--al-text) !important; } body:not(.auth-ready) #landing-screen .lp-nav-sep{ background: var(--al-border) !important; } body:not(.auth-ready) #landing-screen .lp-nav-cta{ background: var(--al-ink) !important; color: #FFFFFF !important; border: none !important; border-radius: 980px !important; padding: 0.5rem 1.15rem !important; box-shadow: none !important; font-weight: 600 !important; transition: background 0.15s ease, transform 0.15s ease !important; } body:not(.auth-ready) #landing-screen .lp-nav-cta:hover{ background: #000000 !important; opacity: 1 !important; transform: none !important; } body:not(.auth-ready) #landing-screen .lp-donate-btn{ color: var(--al-text) !important; background: var(--al-fill-2) !important; border: 1px solid var(--al-border-soft) !important; border-radius: 980px !important; font-weight: 500; } body:not(.auth-ready) #landing-screen .lp-donate-btn:hover{ background: var(--al-fill-3) !important; } body:not(.auth-ready) #lp-burger{ background: var(--al-fill-2) !important; border: 1px solid var(--al-border-soft) !important; color: var(--al-text) !important; border-radius: 10px !important; min-width: 44px; min-height: 44px; } body:not(.auth-ready) #lp-mobile-menu{ background: rgba(245, 245, 247, 0.97) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--al-border-soft) !important; } body:not(.auth-ready) #lp-mobile-menu a{ color: var(--al-text) !important; border-bottom: 1px solid var(--al-border-soft) !important; min-height: 44px; display: flex !important; align-items: center; } body:not(.auth-ready) #lp-mobile-menu a:hover{ color: var(--al-accent) !important; } body:not(.auth-ready) #landing-screen .lp-mobile-cta{ background: var(--al-accent) !important; color: #FFFFFF !important; border-radius: 12px !important; min-height: 48px; box-shadow: 0 4px 14px rgba(0, 113, 227, 0.22) !important; } body:not(.auth-ready) #landing-screen .lp-mobile-cta:hover{ background: var(--al-accent-hi) !important; } /* ─────────────────────────────────────────────────────────────────────────── 3. HERO ─────────────────────────────────────────────────────────────────────────── */ body:not(.auth-ready) #lp-hero{ background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%) !important; padding: clamp(6rem, 14vw, 8rem) clamp(1rem, 5vw, 1.5rem) clamp(2.5rem, 6vw, 3.5rem) !important; } body:not(.auth-ready) #landing-screen .lp-hero-badges{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.5rem; } body:not(.auth-ready) #landing-screen .lp-hero-badge-pill, body:not(.auth-ready) #landing-screen .lp-hero-badge{ background: var(--al-fill-2) !important; border: 1px solid var(--al-border-soft) !important; color: var(--al-text) !important; border-radius: 980px !important; padding: 0.34rem 0.85rem !important; font-size: 0.66rem !important; font-weight: 600 !important; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: none !important; } body:not(.auth-ready) #landing-screen .lp-badge-dot{ background: var(--al-green) !important; box-shadow: 0 0 0 3px rgba(29, 138, 78, 0.14); } /* Headline — the gradient text-fill has to be neutralised or it renders transparent-on-white. */ body:not(.auth-ready) #landing-screen .lp-h1, body:not(.auth-ready) #landing-screen .lp-h1-w1, body:not(.auth-ready) #landing-screen .lp-h1-w2{ background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; animation: none !important; color: var(--al-text) !important; } body:not(.auth-ready) #landing-screen .lp-h1{ font-size: clamp(2.25rem, 7.5vw, 4.5rem) !important; font-weight: 600 !important; letter-spacing: -0.03em !important; line-height: 1.06 !important; opacity: 1 !important; } body:not(.auth-ready) #landing-screen .lp-h1-w2{ color: var(--al-text-2) !important; } body:not(.auth-ready) #landing-screen .lp-hero-sub{ color: var(--al-text-2) !important; font-size: clamp(0.95rem, 2.4vw, 1.125rem) !important; line-height: 1.6 !important; font-weight: 400 !important; max-width: 40rem; opacity: 1 !important; } body:not(.auth-ready) #landing-screen .lp-hero-note{ color: var(--al-text-3) !important; background: var(--al-fill) !important; border: 1px solid var(--al-border-soft) !important; border-radius: var(--al-r) !important; } body:not(.auth-ready) #landing-screen .lp-hero-note *{ color: inherit !important; } /* Hero CTAs */ body:not(.auth-ready) #landing-screen .lp-ctas{ opacity: 1 !important; } body:not(.auth-ready) #landing-screen .lp-btn-primary{ background: var(--al-accent) !important; color: #FFFFFF !important; border-radius: 980px !important; padding: 0.85rem 1.75rem !important; font-weight: 600 !important; box-shadow: 0 6px 20px rgba(0, 113, 227, 0.22) !important; min-height: 48px; transition: background 0.15s ease, transform 0.15s ease !important; } body:not(.auth-ready) #landing-screen .lp-btn-primary:hover{ background: var(--al-accent-hi) !important; transform: none !important; box-shadow: 0 8px 26px rgba(0, 113, 227, 0.28) !important; } body:not(.auth-ready) #landing-screen .lp-btn-primary:active{ transform: scale(0.99) !important; } body:not(.auth-ready) #landing-screen .lp-btn-secondary, body:not(.auth-ready) #landing-screen .lp-ghost-cta{ background: var(--al-fill-2) !important; color: var(--al-text) !important; border: 1px solid var(--al-border-soft) !important; border-radius: 980px !important; padding: 0.85rem 1.75rem !important; font-weight: 500 !important; min-height: 48px; -webkit-backdrop-filter: none; backdrop-filter: none; } body:not(.auth-ready) #landing-screen .lp-btn-secondary:hover, body:not(.auth-ready) #landing-screen .lp-ghost-cta:hover{ background: var(--al-fill-3) !important; transform: none !important; } /* Hero right column / globe artwork: soften the neon halo on white */ body:not(.auth-ready) #ec-cobe-globe-container::before{ opacity: 0.35 !important; } body:not(.auth-ready) #ec-cobe-globe, body:not(.auth-ready) .ec-globe-img-wrap img{ filter: none !important; } body:not(.auth-ready) #landing-screen .lp-scroll{ color: var(--al-text-3) !important; opacity: 1 !important; } body:not(.auth-ready) #landing-screen .lp-scroll-line{ background: linear-gradient(180deg, var(--al-text-3), transparent) !important; } /* ─────────────────────────────────────────────────────────────────────────── 4. FEATURE BADGE STRIP (TLS 1.3 · Kein Tracking · Ablaufzeiten) ─────────────────────────────────────────────────────────────────────────── */ body:not(.auth-ready) #landing-screen .lp-featurestrip{ display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; max-width: 56rem !important; margin: 0 auto !important; padding: 0 16px !important; background: transparent !important; border: none !important; } @media (min-width: 768px) { body:not(.auth-ready) #landing-screen .lp-featurestrip{ grid-template-columns: repeat(3, 1fr) !important; } } body:not(.auth-ready) #landing-screen .lp-fs-card{ background: rgba(255, 255, 255, 0.90) !important; -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border: 1px solid var(--al-border-soft) !important; border-radius: 16px !important; padding: 16px !important; box-shadow: var(--al-shadow-sm) !important; display: flex !important; align-items: center; gap: 12px; transition: box-shadow 0.2s ease, transform 0.2s ease !important; } body:not(.auth-ready) #landing-screen .lp-fs-card:hover{ box-shadow: var(--al-shadow-md) !important; transform: none !important; border-color: var(--al-border) !important; } body:not(.auth-ready) #landing-screen .lp-fs-icon{ background: var(--al-fill) !important; color: var(--al-text) !important; border: none !important; border-radius: 12px !important; padding: 10px !important; display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: none !important; } body:not(.auth-ready) #landing-screen .lp-fs-text strong{ color: var(--al-text) !important; font-weight: 600 !important; } body:not(.auth-ready) #landing-screen .lp-fs-text span{ color: var(--al-text-2) !important; } /* Hero foot bar */ body:not(.auth-ready) #landing-screen .lp-herofoot{ background: transparent !important; border-top: 1px solid var(--al-border-soft) !important; border-bottom: none !important; } body:not(.auth-ready) #landing-screen .lp-herofoot-brand strong, body:not(.auth-ready) #landing-screen .lp-herofoot-ico{ color: var(--al-text) !important; } body:not(.auth-ready) #landing-screen .lp-herofoot-sep{ color: var(--al-border) !important; } body:not(.auth-ready) #landing-screen .lp-herofoot-claim, body:not(.auth-ready) #landing-screen .lp-herofoot-tag{ color: var(--al-text-2) !important; } /* ─────────────────────────────────────────────────────────────────────────── 5. MARKETING SECTIONS — surfaces, headings, body copy ─────────────────────────────────────────────────────────────────────────── */ /* Section backgrounds are inline-styled per section (#000, #050508, #0a0a12 …) so they need !important. Alternating tint keeps the rhythm of the dark original without the darkness. */ body:not(.auth-ready) #landing-screen .lp-section, body:not(.auth-ready) #landing-screen .lp-premium-section, body:not(.auth-ready) #landing-screen .lp-premium-section--alt{ background: var(--al-bg) !important; padding: clamp(3.5rem, 9vw, 6rem) 0 !important; } body:not(.auth-ready) #landing-screen .lp-section:nth-of-type(even), body:not(.auth-ready) #landing-screen .lp-premium-section--alt{ background: var(--al-bg-alt) !important; } body:not(.auth-ready) #landing-screen .lp-section::before, body:not(.auth-ready) #landing-screen .lp-section::after, body:not(.auth-ready) #landing-screen .lp-premium-section::before, body:not(.auth-ready) #landing-screen .lp-premium-section::after{ opacity: 0.35 !important; } body:not(.auth-ready) #landing-screen .lp-wrap{ padding: 0 clamp(1rem, 4vw, 2rem) !important; } body:not(.auth-ready) #landing-screen .lp-label{ color: var(--al-accent) !important; font-weight: 600 !important; letter-spacing: 0.1em; } body:not(.auth-ready) #landing-screen .lp-label::before{ background: var(--al-accent) !important; } body:not(.auth-ready) #landing-screen .lp-title, body:not(.auth-ready) #landing-screen .lp-section-head h2, body:not(.auth-ready) #landing-screen .lp-faq-headline, body:not(.auth-ready) #landing-screen .lp-cgh, body:not(.auth-ready) #landing-screen .lp-lt-h, body:not(.auth-ready) #landing-screen h1, body:not(.auth-ready) #landing-screen h2, body:not(.auth-ready) #landing-screen h3, body:not(.auth-ready) #landing-screen h4{ color: var(--al-text) !important; -webkit-text-fill-color: currentColor !important; background: none !important; font-weight: 600 !important; letter-spacing: -0.025em !important; } body:not(.auth-ready) #landing-screen .lp-title{ font-size: clamp(1.75rem, 4vw, 2.75rem) !important; line-height: 1.1 !important; } body:not(.auth-ready) #landing-screen .lp-sub, body:not(.auth-ready) #landing-screen .lp-section-head p, body:not(.auth-ready) #landing-screen p, body:not(.auth-ready) #landing-screen li, body:not(.auth-ready) #landing-screen .lp-reserve-copy, body:not(.auth-ready) #landing-screen .lp-pricing-note, body:not(.auth-ready) #landing-screen .lp-lt-p, body:not(.auth-ready) #landing-screen .lp-lt-note{ color: var(--al-text-2) !important; line-height: 1.65 !important; } body:not(.auth-ready) #landing-screen p strong, body:not(.auth-ready) #landing-screen li strong{ color: var(--al-text) !important; } /* Reveal animations must not leave content invisible if the observer is late */ body:not(.auth-ready) #landing-screen .lp-reveal, body:not(.auth-ready) #landing-screen .lp-reveal-left, body:not(.auth-ready) #landing-screen .lp-reveal-right{ opacity: 1; } /* ── Generic card families ───────────────────────────────────────────────── */ body:not(.auth-ready) #landing-screen .lp-feat-grid{ background: var(--al-border-soft) !important; border: 1px solid var(--al-border-soft) !important; border-radius: var(--al-r-lg) !important; } body:not(.auth-ready) #landing-screen .lp-feat-card, body:not(.auth-ready) #landing-screen .lp-bc, body:not(.auth-ready) #landing-screen .lp-compare-card, body:not(.auth-ready) #landing-screen .lp-truth-card, body:not(.auth-ready) #landing-screen .lp-roadmap-card, body:not(.auth-ready) #landing-screen .lp-meta-card, body:not(.auth-ready) #landing-screen .lp-pf-cell, body:not(.auth-ready) #landing-screen .lp-wbox, body:not(.auth-ready) #landing-screen .lp-beta-box, body:not(.auth-ready) #landing-screen .lp-stat, body:not(.auth-ready) #landing-screen .lp-mini-metric, body:not(.auth-ready) #landing-screen .lp-step, body:not(.auth-ready) #landing-screen .lp-permission, body:not(.auth-ready) #landing-screen .lp-seed-wrap, body:not(.auth-ready) #landing-screen .lp-terminal, body:not(.auth-ready) #landing-screen .lp-cta-shell{ background: var(--al-bg-alt) !important; border: 1px solid var(--al-border-soft) !important; border-radius: var(--al-r-lg) !important; box-shadow: var(--al-shadow-sm) !important; color: var(--al-text) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } body:not(.auth-ready) #landing-screen .lp-feat-card::after, body:not(.auth-ready) #landing-screen .lp-feat-card::before{ display: none !important; } body:not(.auth-ready) #landing-screen .lp-bc:hover, body:not(.auth-ready) #landing-screen .lp-feat-card:hover, body:not(.auth-ready) #landing-screen .lp-compare-card:hover{ box-shadow: var(--al-shadow-md) !important; border-color: var(--al-border) !important; } body:not(.auth-ready) #landing-screen .lp-feat-icon, body:not(.auth-ready) #landing-screen .lp-bc-icon, body:not(.auth-ready) #landing-screen .lp-pf-icon, body:not(.auth-ready) #landing-screen .lp-spec-check, body:not(.auth-ready) #landing-screen .lp-step-n, body:not(.auth-ready) #landing-screen .lp-roadmap-dot{ background: var(--al-fill) !important; color: var(--al-text) !important; border: none !important; border-radius: 12px !important; box-shadow: none !important; -webkit-text-fill-color: currentColor !important; } body:not(.auth-ready) #landing-screen .lp-spec-check{ color: var(--al-green) !important; } body:not(.auth-ready) #landing-screen .lp-roadmap-dot{ border-radius: 50% !important; background: var(--al-accent) !important; } body:not(.auth-ready) #landing-screen .lp-roadmap-dot--future{ background: var(--al-fill-3) !important; } body:not(.auth-ready) #landing-screen .lp-roadmap-line{ background: var(--al-border) !important; } body:not(.auth-ready) #landing-screen .lp-feat-tag, body:not(.auth-ready) #landing-screen .lp-roadmap-tag, body:not(.auth-ready) #landing-screen .lp-chip-secure, body:not(.auth-ready) #landing-screen .lp-plan-badge, body:not(.auth-ready) #landing-screen .lp-plan-kicker{ background: var(--al-fill-2) !important; border: 1px solid var(--al-border-soft) !important; color: var(--al-text) !important; border-radius: 980px !important; } body:not(.auth-ready) #landing-screen .lp-feat-card h3, body:not(.auth-ready) #landing-screen .lp-fc-title, body:not(.auth-ready) #landing-screen .lp-bc-title, body:not(.auth-ready) #landing-screen .lp-pf-t, body:not(.auth-ready) #landing-screen .lp-stat-n, body:not(.auth-ready) #landing-screen .lp-plan-name, body:not(.auth-ready) #landing-screen .lp-roadmap-date{ color: var(--al-text) !important; -webkit-text-fill-color: currentColor !important; background: none !important; } body:not(.auth-ready) #landing-screen .lp-fc-desc, body:not(.auth-ready) #landing-screen .lp-bc-desc, body:not(.auth-ready) #landing-screen .lp-pf-d, body:not(.auth-ready) #landing-screen .lp-stat-l, body:not(.auth-ready) #landing-screen .lp-plan-desc, body:not(.auth-ready) #landing-screen .lp-seed-text{ color: var(--al-text-2) !important; } /* Semantic colour accents rebalanced for a light ground */ body:not(.auth-ready) #landing-screen .lp-t-cyan{ color: var(--al-accent) !important; -webkit-text-fill-color: currentColor !important; } body:not(.auth-ready) #landing-screen .lp-t-gold{ color: var(--al-gold) !important; -webkit-text-fill-color: currentColor !important; } body:not(.auth-ready) #landing-screen .lp-t-red{ color: var(--al-red) !important; -webkit-text-fill-color: currentColor !important; } body:not(.auth-ready) #landing-screen .lp-yes{ color: var(--al-green) !important; } body:not(.auth-ready) #landing-screen .lp-no{ color: var(--al-red) !important; } /* Comparison table */ body:not(.auth-ready) #landing-screen .lp-ctable{ background: var(--al-bg-alt) !important; border: 1px solid var(--al-border-soft) !important; border-radius: var(--al-r-lg) !important; overflow: hidden; box-shadow: var(--al-shadow-sm) !important; } body:not(.auth-ready) #landing-screen .lp-ctable th, body:not(.auth-ready) #landing-screen .lp-ctable td{ color: var(--al-text) !important; border-color: var(--al-border-soft) !important; background: transparent !important; } body:not(.auth-ready) #landing-screen .lp-ctable thead th{ background: var(--al-fill) !important; color: var(--al-text-2) !important; } body:not(.auth-ready) #landing-screen .lp-ctable tbody tr:nth-child(even) td{ background: rgba(0, 0, 0, 0.015) !important; } /* Terminal block */ body:not(.auth-ready) #landing-screen .lp-term-bar{ background: var(--al-fill) !important; border-bottom: 1px solid var(--al-border-soft) !important; } body:not(.auth-ready) #landing-screen .lp-term-body{ color: var(--al-text) !important; } body:not(.auth-ready) #landing-screen .lt-c{ color: var(--al-text-3) !important; } body:not(.auth-ready) #landing-screen .lt-d{ color: #C7C7CC !important; } body:not(.auth-ready) #landing-screen .lt-k{ color: #8250DF !important; } body:not(.auth-ready) #landing-screen .lt-v{ color: #0550AE !important; } body:not(.auth-ready) #landing-screen .lt-f{ color: var(--al-accent) !important; } body:not(.auth-ready) #landing-screen .lt-s{ color: #0A7B34 !important; } body:not(.auth-ready) #landing-screen .lt-ok{ color: var(--al-green) !important; } /* Pricing */ body:not(.auth-ready) #landing-screen .lp-plan{ background: var(--al-bg-alt) !important; border: 1px solid var(--al-border-soft) !important; border-radius: var(--al-r-xl) !important; box-shadow: var(--al-shadow-sm) !important; } body:not(.auth-ready) #landing-screen .lp-plan.lp-featured{ border-color: rgba(0, 113, 227, 0.35) !important; box-shadow: var(--al-shadow-lg) !important; } body:not(.auth-ready) #landing-screen .lp-amount, body:not(.auth-ready) #landing-screen .lp-curr{ color: var(--al-text) !important; -webkit-text-fill-color: currentColor !important; background: none !important; } body:not(.auth-ready) #landing-screen .lp-period{ color: var(--al-text-2) !important; } body:not(.auth-ready) #landing-screen .lp-inc li{ color: var(--al-text-2) !important; } body:not(.auth-ready) #landing-screen .lp-pcta, body:not(.auth-ready) #landing-screen .lp-gold-cta{ background: var(--al-accent) !important; color: #FFFFFF !important; border: none !important; border-radius: 12px !important; min-height: 48px; font-weight: 600 !important; box-shadow: 0 4px 14px rgba(0, 113, 227, 0.20) !important; } body:not(.auth-ready) #landing-screen .lp-pcta:hover, body:not(.auth-ready) #landing-screen .lp-gold-cta:hover{ background: var(--al-accent-hi) !important; } /* FAQ / details */ body:not(.auth-ready) #landing-screen .lp-faq-item{ background: var(--al-bg-alt) !important; border: 1px solid var(--al-border-soft) !important; border-radius: var(--al-r) !important; box-shadow: var(--al-shadow-xs) !important; margin-bottom: 10px; } body:not(.auth-ready) #landing-screen .lp-faq-summary{ color: var(--al-text) !important; min-height: 48px; display: flex !important; align-items: center; justify-content: space-between; gap: 12px; font-weight: 500 !important; } body:not(.auth-ready) #landing-screen .lp-faq-summary::-webkit-details-marker{ display: none; } body:not(.auth-ready) #landing-screen .lp-faq-icon{ color: var(--al-text-2) !important; } body:not(.auth-ready) #landing-screen .lp-faq-body{ color: var(--al-text-2) !important; } /* Reserved-ID box + landing inputs */ body:not(.auth-ready) #landing-screen input[type="text"], body:not(.auth-ready) #landing-screen input[type="email"], body:not(.auth-ready) #landing-screen textarea{ background: var(--al-fill) !important; border: 1px solid var(--al-border-soft) !important; color: var(--al-text) !important; border-radius: 12px !important; min-height: 48px; outline: none; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } body:not(.auth-ready) #landing-screen input::placeholder, body:not(.auth-ready) #landing-screen textarea::placeholder{ color: var(--al-text-2) !important; } body:not(.auth-ready) #landing-screen input:focus, body:not(.auth-ready) #landing-screen textarea:focus{ background: #FFFFFF !important; border-color: var(--al-accent) !important; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.20) !important; } /* Aura landing card keeps its identity — a soft violet wash instead of neon */ body:not(.auth-ready) #lp-aura-card{ background: linear-gradient(135deg, rgba(124, 106, 247, 0.07), rgba(0, 113, 227, 0.04)) !important; border-color: rgba(124, 106, 247, 0.20) !important; } /* ─────────────────────────────────────────────────────────────────────────── 6. LANGUAGE SWITCHER (landing section + login segmented control) ─────────────────────────────────────────────────────────────────────────── */ body:not(.auth-ready) #lp-lang-section{ background: var(--al-bg) !important; } body:not(.auth-ready) #lp-lang-menu-title{ color: var(--al-text-2) !important; } body:not(.auth-ready) #lp-lang-menu, body:not(.auth-ready) #lang-picker-dropdown{ background: rgba(255, 255, 255, 0.92) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--al-border) !important; box-shadow: var(--al-shadow-xl) !important; border-radius: 18px !important; } body:not(.auth-ready) #lp-lang-btn, body:not(.auth-ready) #lang-picker-btn, body:not(.auth-ready) #splash .ec-auth-lang-btn{ background: var(--al-fill-2) !important; border: 1px solid var(--al-border-soft) !important; color: var(--al-text) !important; border-radius: 980px !important; min-height: 44px; } body:not(.auth-ready) #lp-lang-btn:hover, body:not(.auth-ready) #lang-picker-btn:hover, body:not(.auth-ready) #splash .ec-auth-lang-btn:hover{ background: var(--al-fill-3) !important; } body:not(.auth-ready) #landing-screen .lp-lang-opt, body:not(.auth-ready) #landing-screen .lang-opt{ background: transparent !important; border: 1px solid transparent !important; color: var(--al-text) !important; border-radius: 12px !important; min-height: 44px; display: flex !important; align-items: center; } body:not(.auth-ready) #landing-screen .lp-lang-opt:hover, body:not(.auth-ready) #landing-screen .lang-opt:hover{ background: var(--al-fill) !important; border-color: var(--al-border-soft) !important; transform: none !important; } body:not(.auth-ready) #landing-screen .lp-lang-opt.active, body:not(.auth-ready) #landing-screen .lang-opt.active{ background: var(--al-accent-soft) !important; border-color: rgba(0, 113, 227, 0.30) !important; } body:not(.auth-ready) #landing-screen .lp-lang-opt-code{ color: var(--al-accent) !important; background: var(--al-accent-soft) !important; } body:not(.auth-ready) #landing-screen .lp-lang-opt-name{ color: var(--al-text) !important; } /* Login screen segmented control (Deutsch / English / Polski) */ body:not(.auth-ready) #login-screen .ec-login-desktop-lang{ /* NOTE - deliberately NO `display` here. style.css:9052 sets these desktop-only nodes to display:none and only reveals them inside the desktop media query; forcing display would surface the bar on mobile. */ align-items: center; gap: 2px; background: var(--al-fill-2) !important; padding: 4px !important; border-radius: 980px !important; border: none !important; box-shadow: none !important; } body:not(.auth-ready) #login-screen .ec-login-desktop-lang button{ background: transparent !important; border: none !important; color: var(--al-text-2) !important; font-size: 12px !important; font-weight: 500 !important; padding: 7px 14px !important; border-radius: 980px !important; min-height: 34px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } body:not(.auth-ready) #login-screen .ec-login-desktop-lang button:hover{ color: var(--al-text) !important; } body:not(.auth-ready) #login-screen .ec-login-desktop-lang button[aria-current="true"], body:not(.auth-ready) #login-screen .ec-login-desktop-lang button.is-active{ background: #FFFFFF !important; color: var(--al-text) !important; box-shadow: var(--al-shadow-xs) !important; } /* ─────────────────────────────────────────────────────────────────────────── 7. PUBLIC FOOTER ─────────────────────────────────────────────────────────────────────────── */ body:not(.auth-ready) #landing-screen #lp-footer{ background: var(--al-bg) !important; border-top: 1px solid var(--al-border-soft) !important; padding: 32px 0 !important; } body:not(.auth-ready) #landing-screen .lp-footer-inner{ padding: 0 clamp(1rem, 4vw, 2rem) !important; text-align: center; } body:not(.auth-ready) #landing-screen .lp-footer-logo{ color: var(--al-text) !important; font-weight: 600 !important; -webkit-text-fill-color: currentColor !important; background: none !important; } body:not(.auth-ready) #landing-screen .lp-footer-text{ color: var(--al-text-2) !important; font-size: 12px !important; } body:not(.auth-ready) #landing-screen .lp-footer-links{ display: flex !important; flex-wrap: wrap; justify-content: center; gap: 4px clamp(16px, 4vw, 24px) !important; } body:not(.auth-ready) #landing-screen .lp-footer-links button{ color: var(--al-text-2) !important; font-size: 12px !important; transition: color 0.15s ease; } body:not(.auth-ready) #landing-screen .lp-footer-links button:hover{ color: var(--al-text) !important; } /* Auth-screen footers (splash + login) */ body:not(.auth-ready) #splash .ec-auth-footer, body:not(.auth-ready) #login-screen .ec-login-desktop-footer, body:not(.auth-ready) #setup-new .ec-reg-desktop-footer{ color: var(--al-text-2) !important; font-size: 12px !important; border-top: 1px solid var(--al-border-soft); padding-top: 16px; /* NOTE - no `display`: .ec-login-desktop-footer / .ec-reg-desktop-footer are display:none outside the desktop breakpoint. */ flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; } body:not(.auth-ready) #splash .ec-auth-footer b, body:not(.auth-ready) #login-screen .ec-login-desktop-footer b{ color: var(--al-text) !important; } body:not(.auth-ready) #splash .ec-auth-foot-dot{ color: var(--al-text-3) !important; } body:not(.auth-ready) #splash .ec-auth-foot-link{ color: var(--al-text-2) !important; text-decoration: none; cursor: pointer; transition: color 0.15s ease; } body:not(.auth-ready) #splash .ec-auth-foot-link:hover{ color: var(--al-text) !important; } /* ─────────────────────────────────────────────────────────────────────────── 8. SPLASH / AUTH LANDING (#splash) ─────────────────────────────────────────────────────────────────────────── */ body:not(.auth-ready) #splash.ec-auth-landing{ background: var(--al-bg) !important; } body:not(.auth-ready) #splash.ec-auth-landing .splash-back-btn{ background: var(--al-fill-2) !important; border: 1px solid var(--al-border-soft) !important; color: var(--al-text) !important; border-radius: 980px !important; min-height: 44px; padding: 10px 18px !important; } body:not(.auth-ready) #splash.ec-auth-landing .splash-back-btn:hover{ background: var(--al-fill-3) !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-brand-name, body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-card h2{ color: var(--al-text) !important; -webkit-text-fill-color: currentColor !important; background: none !important; font-weight: 600 !important; letter-spacing: -0.02em !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-card p, body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-copy p{ color: var(--al-text-2) !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-copy h1{ color: var(--al-text) !important; -webkit-text-fill-color: currentColor !important; background: none !important; font-weight: 600 !important; letter-spacing: -0.03em !important; line-height: 1.08 !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-copy h1 span{ color: var(--al-text-2) !important; -webkit-text-fill-color: currentColor !important; background: none !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-logo-mark, body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-card-icon{ background: var(--al-fill) !important; border: 1px solid var(--al-border-soft) !important; box-shadow: none !important; } /* Glassmorphic action card */ body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-card{ background: rgba(255, 255, 255, 0.85) !important; -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: 1px solid var(--al-border) !important; border-radius: var(--al-r-xl) !important; box-shadow: var(--al-shadow-lg) !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-card-divider{ background: var(--al-border-soft) !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-primary-action{ background: var(--al-accent) !important; color: #FFFFFF !important; border: none !important; border-radius: 14px !important; min-height: 50px; font-weight: 600 !important; box-shadow: 0 6px 18px rgba(0, 113, 227, 0.20) !important; transition: background 0.15s ease, transform 0.15s ease !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-primary-action:hover{ background: var(--al-accent-hi) !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-primary-action:active{ transform: scale(0.99) !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-secondary-action{ background: var(--al-fill) !important; color: var(--al-text) !important; border: 1px solid var(--al-border-soft) !important; border-radius: 14px !important; min-height: 48px; font-weight: 500 !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-secondary-action:hover{ background: var(--al-fill-2) !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-primary-action b, body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-secondary-action b{ opacity: 0.55; } /* Badge grid + trust/privacy notes */ body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-badge, body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-trust, body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-privacy{ background: rgba(255, 255, 255, 0.90) !important; border: 1px solid var(--al-border-soft) !important; border-radius: 16px !important; box-shadow: var(--al-shadow-xs) !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-badge strong, body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-trust strong, body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-privacy strong{ color: var(--al-text) !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-badge small, body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-trust small, body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-privacy small{ color: var(--al-text-2) !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-trust > span, body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-privacy > span{ color: var(--al-accent) !important; } /* ─────────────────────────────────────────────────────────────────────────── 9. AUTH SCREENS — login / register / join / recovery ─────────────────────────────────────────────────────────────────────────── */ body:not(.auth-ready) #login-screen, body:not(.auth-ready) #setup-new, body:not(.auth-ready) #setup-join, body:not(.auth-ready) #recovery-screen{ background: var(--al-bg) !important; } /* Top bar */ body:not(.auth-ready) #login-screen .auth-topbar, body:not(.auth-ready) #setup-new .auth-topbar, body:not(.auth-ready) #setup-join .auth-topbar, body:not(.auth-ready) #recovery-screen .auth-topbar{ background: rgba(245, 245, 247, 0.80) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--al-border-soft) !important; } body:not(.auth-ready) #login-screen .auth-topbar-title, body:not(.auth-ready) #setup-new .auth-topbar-title, body:not(.auth-ready) #setup-join .auth-topbar-title, body:not(.auth-ready) #recovery-screen .auth-topbar-title{ color: var(--al-text) !important; -webkit-text-fill-color: currentColor !important; background: none !important; font-weight: 600 !important; letter-spacing: -0.01em; } body:not(.auth-ready) #login-screen .auth-topbar-subtitle, body:not(.auth-ready) #setup-new .auth-topbar-subtitle, body:not(.auth-ready) #setup-join .auth-topbar-subtitle, body:not(.auth-ready) #recovery-screen .auth-topbar-subtitle{ color: var(--al-text-2) !important; } body:not(.auth-ready) #login-screen .auth-back-btn, body:not(.auth-ready) #setup-new .auth-back-btn, body:not(.auth-ready) #setup-join .auth-back-btn, body:not(.auth-ready) #recovery-screen .auth-back-btn, body:not(.auth-ready) #login-screen .ec-nav-back, body:not(.auth-ready) #setup-new .ec-nav-back, body:not(.auth-ready) #setup-join .ec-nav-back, body:not(.auth-ready) #recovery-screen .ec-nav-back{ background: var(--al-fill-2) !important; border: 1px solid var(--al-border-soft) !important; color: var(--al-text) !important; border-radius: 12px !important; min-width: 44px !important; min-height: 44px !important; } body:not(.auth-ready) #login-screen .auth-back-btn:hover, body:not(.auth-ready) #setup-new .auth-back-btn:hover, body:not(.auth-ready) #setup-join .auth-back-btn:hover, body:not(.auth-ready) #recovery-screen .auth-back-btn:hover{ background: var(--al-fill-3) !important; } /* Desktop brand lockup on the login screen */ body:not(.auth-ready) #login-screen .ec-login-desktop-brand, body:not(.auth-ready) #setup-new .ec-reg-desktop-brand{ color: var(--al-text) !important; } body:not(.auth-ready) #login-screen .ec-login-desktop-brand span, body:not(.auth-ready) #setup-new .ec-reg-desktop-brand span{ color: var(--al-text) !important; -webkit-text-fill-color: currentColor !important; background: none !important; font-weight: 600 !important; letter-spacing: -0.02em; } /* ── The login / signup card ─────────────────────────────────────────────── */ body:not(.auth-ready) #login-screen .auth-panel, body:not(.auth-ready) #setup-new .auth-panel, body:not(.auth-ready) #setup-join .auth-panel, body:not(.auth-ready) #recovery-screen .auth-panel, body:not(.auth-ready) #login-screen .auth-panel--login, body:not(.auth-ready) #setup-new .auth-panel--login, body:not(.auth-ready) #setup-join .auth-panel--login, body:not(.auth-ready) #recovery-screen .auth-panel--login, body:not(.auth-ready) #login-screen .auth-panel--recovery, body:not(.auth-ready) #setup-new .auth-panel--recovery, body:not(.auth-ready) #setup-join .auth-panel--recovery, body:not(.auth-ready) #recovery-screen .auth-panel--recovery{ background: rgba(255, 255, 255, 0.85) !important; -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px); border: 1px solid var(--al-border) !important; border-radius: 24px !important; box-shadow: var(--al-shadow-lg) !important; padding: clamp(20px, 5vw, 32px) !important; box-sizing: border-box; } body:not(.auth-ready) #login-screen .auth-hero-title, body:not(.auth-ready) #setup-new .auth-hero-title, body:not(.auth-ready) #setup-join .auth-hero-title, body:not(.auth-ready) #recovery-screen .auth-hero-title, body:not(.auth-ready) #login-screen .setup-title, body:not(.auth-ready) #setup-new .setup-title, body:not(.auth-ready) #setup-join .setup-title, body:not(.auth-ready) #recovery-screen .setup-title, body:not(.auth-ready) #login-screen .ec-reg-card-title, body:not(.auth-ready) #setup-new .ec-reg-card-title, body:not(.auth-ready) #setup-join .ec-reg-card-title, body:not(.auth-ready) #recovery-screen .ec-reg-card-title{ color: var(--al-text) !important; -webkit-text-fill-color: currentColor !important; background: none !important; font-weight: 600 !important; letter-spacing: -0.02em !important; } body:not(.auth-ready) #login-screen .auth-hero-subtitle, body:not(.auth-ready) #setup-new .auth-hero-subtitle, body:not(.auth-ready) #setup-join .auth-hero-subtitle, body:not(.auth-ready) #recovery-screen .auth-hero-subtitle, body:not(.auth-ready) #login-screen .setup-desc, body:not(.auth-ready) #setup-new .setup-desc, body:not(.auth-ready) #setup-join .setup-desc, body:not(.auth-ready) #recovery-screen .setup-desc, body:not(.auth-ready) #login-screen .ec-reg-card-subtitle, body:not(.auth-ready) #setup-new .ec-reg-card-subtitle, body:not(.auth-ready) #setup-join .ec-reg-card-subtitle, body:not(.auth-ready) #recovery-screen .ec-reg-card-subtitle{ color: var(--al-text-2) !important; } /* Labels */ body:not(.auth-ready) #login-screen label, body:not(.auth-ready) #setup-new label, body:not(.auth-ready) #setup-join label, body:not(.auth-ready) #recovery-screen label{ color: var(--al-text-2) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase; } /* Inputs — one rule for every text-ish control on every auth screen */ body:not(.auth-ready) #login-screen input[type="text"], body:not(.auth-ready) #setup-new input[type="text"], body:not(.auth-ready) #setup-join input[type="text"], body:not(.auth-ready) #recovery-screen input[type="text"], body:not(.auth-ready) #login-screen input[type="password"], body:not(.auth-ready) #setup-new input[type="password"], body:not(.auth-ready) #setup-join input[type="password"], body:not(.auth-ready) #recovery-screen input[type="password"], body:not(.auth-ready) #login-screen input[type="email"], body:not(.auth-ready) #setup-new input[type="email"], body:not(.auth-ready) #setup-join input[type="email"], body:not(.auth-ready) #recovery-screen input[type="email"], body:not(.auth-ready) #login-screen input[type="tel"], body:not(.auth-ready) #setup-new input[type="tel"], body:not(.auth-ready) #setup-join input[type="tel"], body:not(.auth-ready) #recovery-screen input[type="tel"], body:not(.auth-ready) #login-screen input[type="number"], body:not(.auth-ready) #setup-new input[type="number"], body:not(.auth-ready) #setup-join input[type="number"], body:not(.auth-ready) #recovery-screen input[type="number"], body:not(.auth-ready) #login-screen input:not([type]), body:not(.auth-ready) #setup-new input:not([type]), body:not(.auth-ready) #setup-join input:not([type]), body:not(.auth-ready) #recovery-screen input:not([type]), body:not(.auth-ready) #login-screen textarea, body:not(.auth-ready) #setup-new textarea, body:not(.auth-ready) #setup-join textarea, body:not(.auth-ready) #recovery-screen textarea, body:not(.auth-ready) #login-screen select, body:not(.auth-ready) #setup-new select, body:not(.auth-ready) #setup-join select, body:not(.auth-ready) #recovery-screen select{ background: var(--al-fill) !important; border: 1px solid var(--al-border-soft) !important; color: var(--al-text) !important; border-radius: 12px !important; min-height: 48px; outline: none !important; box-shadow: none !important; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important; -webkit-text-fill-color: var(--al-text); } body:not(.auth-ready) #login-screen input::placeholder, body:not(.auth-ready) #setup-new input::placeholder, body:not(.auth-ready) #setup-join input::placeholder, body:not(.auth-ready) #recovery-screen input::placeholder, body:not(.auth-ready) #login-screen textarea::placeholder, body:not(.auth-ready) #setup-new textarea::placeholder, body:not(.auth-ready) #setup-join textarea::placeholder, body:not(.auth-ready) #recovery-screen textarea::placeholder{ color: var(--al-text-2) !important; opacity: 1; } body:not(.auth-ready) #login-screen input:focus, body:not(.auth-ready) #setup-new input:focus, body:not(.auth-ready) #setup-join input:focus, body:not(.auth-ready) #recovery-screen input:focus, body:not(.auth-ready) #login-screen textarea:focus, body:not(.auth-ready) #setup-new textarea:focus, body:not(.auth-ready) #setup-join textarea:focus, body:not(.auth-ready) #recovery-screen textarea:focus, body:not(.auth-ready) #login-screen select:focus, body:not(.auth-ready) #setup-new select:focus, body:not(.auth-ready) #setup-join select:focus, body:not(.auth-ready) #recovery-screen select:focus{ background: #FFFFFF !important; border-color: var(--al-accent) !important; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.20) !important; } /* Chrome autofill paints its own yellow — pin it back to the fill token. */ body:not(.auth-ready) #login-screen input:-webkit-autofill, body:not(.auth-ready) #setup-new input:-webkit-autofill, body:not(.auth-ready) #setup-join input:-webkit-autofill, body:not(.auth-ready) #recovery-screen input:-webkit-autofill, body:not(.auth-ready) #login-screen input:-webkit-autofill:hover, body:not(.auth-ready) #setup-new input:-webkit-autofill:hover, body:not(.auth-ready) #setup-join input:-webkit-autofill:hover, body:not(.auth-ready) #recovery-screen input:-webkit-autofill:hover, body:not(.auth-ready) #login-screen input:-webkit-autofill:focus, body:not(.auth-ready) #setup-new input:-webkit-autofill:focus, body:not(.auth-ready) #setup-join input:-webkit-autofill:focus, body:not(.auth-ready) #recovery-screen input:-webkit-autofill:focus{ -webkit-text-fill-color: var(--al-text) !important; -webkit-box-shadow: 0 0 0 1000px var(--al-fill) inset !important; caret-color: var(--al-text); } /* Password-reveal toggle inside the field */ body:not(.auth-ready) #login-screen .auth-panel button[aria-label="Passwort anzeigen"], body:not(.auth-ready) #setup-new .auth-panel button[aria-label="Passwort anzeigen"], body:not(.auth-ready) #setup-join .auth-panel button[aria-label="Passwort anzeigen"], body:not(.auth-ready) #recovery-screen .auth-panel button[aria-label="Passwort anzeigen"]{ color: var(--al-text-2) !important; min-width: 44px; min-height: 44px; display: flex !important; align-items: center; justify-content: center; } /* Security check (CAPTCHA) card */ body:not(.auth-ready) #login-screen .auth-captcha-card, body:not(.auth-ready) #setup-new .auth-captcha-card, body:not(.auth-ready) #setup-join .auth-captcha-card, body:not(.auth-ready) #recovery-screen .auth-captcha-card, body:not(.auth-ready) #login-screen .ec-reg-captcha-card, body:not(.auth-ready) #setup-new .ec-reg-captcha-card, body:not(.auth-ready) #setup-join .ec-reg-captcha-card, body:not(.auth-ready) #recovery-screen .ec-reg-captcha-card{ background: var(--al-fill) !important; border: 1px solid var(--al-border-soft) !important; border-radius: 16px !important; box-shadow: none !important; } body:not(.auth-ready) #login-screen .auth-captcha-title, body:not(.auth-ready) #setup-new .auth-captcha-title, body:not(.auth-ready) #setup-join .auth-captcha-title, body:not(.auth-ready) #recovery-screen .auth-captcha-title, body:not(.auth-ready) #login-screen .ec-reg-captcha-head, body:not(.auth-ready) #setup-new .ec-reg-captcha-head, body:not(.auth-ready) #setup-join .ec-reg-captcha-head, body:not(.auth-ready) #recovery-screen .ec-reg-captcha-head{ color: var(--al-text) !important; font-weight: 600 !important; } body:not(.auth-ready) #login-screen .auth-chip-btn, body:not(.auth-ready) #setup-new .auth-chip-btn, body:not(.auth-ready) #setup-join .auth-chip-btn, body:not(.auth-ready) #recovery-screen .auth-chip-btn, body:not(.auth-ready) #login-screen .ec-reg-captcha-refresh, body:not(.auth-ready) #setup-new .ec-reg-captcha-refresh, body:not(.auth-ready) #setup-join .ec-reg-captcha-refresh, body:not(.auth-ready) #recovery-screen .ec-reg-captcha-refresh{ background: #FFFFFF !important; border: 1px solid var(--al-border-soft) !important; color: var(--al-text) !important; border-radius: 10px !important; min-height: 36px; box-shadow: var(--al-shadow-xs) !important; } body:not(.auth-ready) #login-screen .auth-chip-btn:hover, body:not(.auth-ready) #setup-new .auth-chip-btn:hover, body:not(.auth-ready) #setup-join .auth-chip-btn:hover, body:not(.auth-ready) #recovery-screen .auth-chip-btn:hover{ background: var(--al-fill-2) !important; } body:not(.auth-ready) #login-screen #captcha-img-login, body:not(.auth-ready) #setup-new #captcha-img-login, body:not(.auth-ready) #setup-join #captcha-img-login, body:not(.auth-ready) #recovery-screen #captcha-img-login, body:not(.auth-ready) #login-screen #captcha-img-reg, body:not(.auth-ready) #setup-new #captcha-img-reg, body:not(.auth-ready) #setup-join #captcha-img-reg, body:not(.auth-ready) #recovery-screen #captcha-img-reg, body:not(.auth-ready) #login-screen .ec-reg-captcha-img, body:not(.auth-ready) #setup-new .ec-reg-captcha-img, body:not(.auth-ready) #setup-join .ec-reg-captcha-img, body:not(.auth-ready) #recovery-screen .ec-reg-captcha-img{ background: #FFFFFF !important; border: 1px solid var(--al-border-soft) !important; } body:not(.auth-ready) #login-screen #captcha-answer-login, body:not(.auth-ready) #setup-new #captcha-answer-login, body:not(.auth-ready) #setup-join #captcha-answer-login, body:not(.auth-ready) #recovery-screen #captcha-answer-login, body:not(.auth-ready) #login-screen #captcha-answer-reg, body:not(.auth-ready) #setup-new #captcha-answer-reg, body:not(.auth-ready) #setup-join #captcha-answer-reg, body:not(.auth-ready) #recovery-screen #captcha-answer-reg, body:not(.auth-ready) #login-screen .ec-reg-captcha-input, body:not(.auth-ready) #setup-new .ec-reg-captcha-input, body:not(.auth-ready) #setup-join .ec-reg-captcha-input, body:not(.auth-ready) #recovery-screen .ec-reg-captcha-input{ background: #FFFFFF !important; border: 1px solid var(--al-border-soft) !important; } body:not(.auth-ready) #login-screen #captcha-hint-login, body:not(.auth-ready) #setup-new #captcha-hint-login, body:not(.auth-ready) #setup-join #captcha-hint-login, body:not(.auth-ready) #recovery-screen #captcha-hint-login, body:not(.auth-ready) #login-screen #captcha-hint-reg, body:not(.auth-ready) #setup-new #captcha-hint-reg, body:not(.auth-ready) #setup-join #captcha-hint-reg, body:not(.auth-ready) #recovery-screen #captcha-hint-reg, body:not(.auth-ready) #login-screen .ec-reg-captcha-hint, body:not(.auth-ready) #setup-new .ec-reg-captcha-hint, body:not(.auth-ready) #setup-join .ec-reg-captcha-hint, body:not(.auth-ready) #recovery-screen .ec-reg-captcha-hint{ color: var(--al-text-2) !important; } /* Primary action */ body:not(.auth-ready) #login-screen .auth-primary-btn, body:not(.auth-ready) #setup-new .auth-primary-btn, body:not(.auth-ready) #setup-join .auth-primary-btn, body:not(.auth-ready) #recovery-screen .auth-primary-btn{ background: var(--al-accent) !important; color: #FFFFFF !important; border: none !important; border-radius: 12px !important; min-height: 50px; font-weight: 600 !important; font-size: 16px !important; box-shadow: 0 6px 18px rgba(0, 113, 227, 0.20) !important; transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important; } body:not(.auth-ready) #login-screen .auth-primary-btn:hover, body:not(.auth-ready) #setup-new .auth-primary-btn:hover, body:not(.auth-ready) #setup-join .auth-primary-btn:hover, body:not(.auth-ready) #recovery-screen .auth-primary-btn:hover{ background: var(--al-accent-hi) !important; transform: none !important; box-shadow: 0 8px 24px rgba(0, 113, 227, 0.26) !important; } body:not(.auth-ready) #login-screen .auth-primary-btn:active, body:not(.auth-ready) #setup-new .auth-primary-btn:active, body:not(.auth-ready) #setup-join .auth-primary-btn:active, body:not(.auth-ready) #recovery-screen .auth-primary-btn:active{ transform: scale(0.99) !important; } body:not(.auth-ready) #login-screen .auth-primary-btn:disabled, body:not(.auth-ready) #setup-new .auth-primary-btn:disabled, body:not(.auth-ready) #setup-join .auth-primary-btn:disabled, body:not(.auth-ready) #recovery-screen .auth-primary-btn:disabled{ opacity: 0.45 !important; box-shadow: none !important; } /* Secondary action */ body:not(.auth-ready) #login-screen .auth-secondary-btn, body:not(.auth-ready) #setup-new .auth-secondary-btn, body:not(.auth-ready) #setup-join .auth-secondary-btn, body:not(.auth-ready) #recovery-screen .auth-secondary-btn, body:not(.auth-ready) #login-screen .btn.secondary, body:not(.auth-ready) #setup-new .btn.secondary, body:not(.auth-ready) #setup-join .btn.secondary, body:not(.auth-ready) #recovery-screen .btn.secondary{ background: var(--al-fill) !important; color: var(--al-text) !important; border: 1px solid var(--al-border-soft) !important; border-radius: 12px !important; min-height: 48px; font-weight: 500 !important; } body:not(.auth-ready) #login-screen .auth-secondary-btn:hover, body:not(.auth-ready) #setup-new .auth-secondary-btn:hover, body:not(.auth-ready) #setup-join .auth-secondary-btn:hover, body:not(.auth-ready) #recovery-screen .auth-secondary-btn:hover, body:not(.auth-ready) #login-screen .btn.secondary:hover, body:not(.auth-ready) #setup-new .btn.secondary:hover, body:not(.auth-ready) #setup-join .btn.secondary:hover, body:not(.auth-ready) #recovery-screen .btn.secondary:hover{ background: var(--al-fill-2) !important; border-color: var(--al-border) !important; } /* Helper links */ body:not(.auth-ready) #login-screen .auth-inline-actions a, body:not(.auth-ready) #setup-new .auth-inline-actions a, body:not(.auth-ready) #setup-join .auth-inline-actions a, body:not(.auth-ready) #recovery-screen .auth-inline-actions a, body:not(.auth-ready) #login-screen .auth-back-link, body:not(.auth-ready) #setup-new .auth-back-link, body:not(.auth-ready) #setup-join .auth-back-link, body:not(.auth-ready) #recovery-screen .auth-back-link, body:not(.auth-ready) #login-screen .auth-helper-row a, body:not(.auth-ready) #setup-new .auth-helper-row a, body:not(.auth-ready) #setup-join .auth-helper-row a, body:not(.auth-ready) #recovery-screen .auth-helper-row a{ color: var(--al-accent) !important; font-size: 13px !important; text-decoration: none !important; cursor: pointer; display: inline-block; padding: 8px 4px; min-height: 36px; } body:not(.auth-ready) #login-screen .auth-inline-actions a:hover, body:not(.auth-ready) #setup-new .auth-inline-actions a:hover, body:not(.auth-ready) #setup-join .auth-inline-actions a:hover, body:not(.auth-ready) #recovery-screen .auth-inline-actions a:hover, body:not(.auth-ready) #login-screen .auth-back-link:hover, body:not(.auth-ready) #setup-new .auth-back-link:hover, body:not(.auth-ready) #setup-join .auth-back-link:hover, body:not(.auth-ready) #recovery-screen .auth-back-link:hover{ text-decoration: underline !important; } /* Divider */ body:not(.auth-ready) #login-screen .auth-divider > div:first-child, body:not(.auth-ready) #setup-new .auth-divider > div:first-child, body:not(.auth-ready) #setup-join .auth-divider > div:first-child, body:not(.auth-ready) #recovery-screen .auth-divider > div:first-child, body:not(.auth-ready) #login-screen .auth-divider > div:last-child, body:not(.auth-ready) #setup-new .auth-divider > div:last-child, body:not(.auth-ready) #setup-join .auth-divider > div:last-child, body:not(.auth-ready) #recovery-screen .auth-divider > div:last-child, body:not(.auth-ready) #login-screen .auth-divider-line, body:not(.auth-ready) #setup-new .auth-divider-line, body:not(.auth-ready) #setup-join .auth-divider-line, body:not(.auth-ready) #recovery-screen .auth-divider-line{ background: var(--al-border) !important; } body:not(.auth-ready) #login-screen .auth-divider, body:not(.auth-ready) #setup-new .auth-divider, body:not(.auth-ready) #setup-join .auth-divider, body:not(.auth-ready) #recovery-screen .auth-divider{ color: var(--al-text-3) !important; } body:not(.auth-ready) #login-screen .auth-divider > div:nth-child(2), body:not(.auth-ready) #setup-new .auth-divider > div:nth-child(2), body:not(.auth-ready) #setup-join .auth-divider > div:nth-child(2), body:not(.auth-ready) #recovery-screen .auth-divider > div:nth-child(2){ color: var(--al-text-3) !important; } /* Info / consent / security / alert cards */ body:not(.auth-ready) #login-screen .auth-security-card, body:not(.auth-ready) #setup-new .auth-security-card, body:not(.auth-ready) #setup-join .auth-security-card, body:not(.auth-ready) #recovery-screen .auth-security-card, body:not(.auth-ready) #login-screen .auth-consent-card, body:not(.auth-ready) #setup-new .auth-consent-card, body:not(.auth-ready) #setup-join .auth-consent-card, body:not(.auth-ready) #recovery-screen .auth-consent-card, body:not(.auth-ready) #login-screen .auth-password-note, body:not(.auth-ready) #setup-new .auth-password-note, body:not(.auth-ready) #setup-join .auth-password-note, body:not(.auth-ready) #recovery-screen .auth-password-note, body:not(.auth-ready) #login-screen .ec-rdf-card, body:not(.auth-ready) #setup-new .ec-rdf-card, body:not(.auth-ready) #setup-join .ec-rdf-card, body:not(.auth-ready) #recovery-screen .ec-rdf-card{ background: var(--al-fill) !important; border: 1px solid var(--al-border-soft) !important; border-radius: 14px !important; color: var(--al-text-2) !important; box-shadow: none !important; } body:not(.auth-ready) #login-screen .auth-security-card strong, body:not(.auth-ready) #setup-new .auth-security-card strong, body:not(.auth-ready) #setup-join .auth-security-card strong, body:not(.auth-ready) #recovery-screen .auth-security-card strong, body:not(.auth-ready) #login-screen .auth-consent-card strong, body:not(.auth-ready) #setup-new .auth-consent-card strong, body:not(.auth-ready) #setup-join .auth-consent-card strong, body:not(.auth-ready) #recovery-screen .auth-consent-card strong, body:not(.auth-ready) #login-screen .ec-rdf-card strong, body:not(.auth-ready) #setup-new .ec-rdf-card strong, body:not(.auth-ready) #setup-join .ec-rdf-card strong, body:not(.auth-ready) #recovery-screen .ec-rdf-card strong{ color: var(--al-text) !important; } body:not(.auth-ready) #login-screen .auth-alert-card, body:not(.auth-ready) #setup-new .auth-alert-card, body:not(.auth-ready) #setup-join .auth-alert-card, body:not(.auth-ready) #recovery-screen .auth-alert-card{ background: rgba(199, 51, 43, 0.06) !important; border: 1px solid rgba(199, 51, 43, 0.20) !important; color: var(--al-red) !important; border-radius: 14px !important; } body:not(.auth-ready) #login-screen .auth-password-rule, body:not(.auth-ready) #setup-new .auth-password-rule, body:not(.auth-ready) #setup-join .auth-password-rule, body:not(.auth-ready) #recovery-screen .auth-password-rule{ color: var(--al-text-2) !important; } body:not(.auth-ready) #login-screen .auth-password-weak, body:not(.auth-ready) #setup-new .auth-password-weak, body:not(.auth-ready) #setup-join .auth-password-weak, body:not(.auth-ready) #recovery-screen .auth-password-weak{ color: var(--al-red) !important; } body:not(.auth-ready) #login-screen .danger-badge, body:not(.auth-ready) #setup-new .danger-badge, body:not(.auth-ready) #setup-join .danger-badge, body:not(.auth-ready) #recovery-screen .danger-badge{ background: rgba(199, 51, 43, 0.08) !important; color: var(--al-red) !important; border: 1px solid rgba(199, 51, 43, 0.20) !important; } /* Register desktop marketing column */ body:not(.auth-ready) #setup-new .ec-reg-desktop-copy, body:not(.auth-ready) #setup-new .ec-reg-hero-caption, body:not(.auth-ready) #setup-new .ec-reg-desktop-trust{ color: var(--al-text-2) !important; } body:not(.auth-ready) #setup-new .ec-reg-desktop-hero, body:not(.auth-ready) #setup-new .ec-reg-desktop-features, body:not(.auth-ready) #setup-new .ec-reg-desktop-trust{ background: rgba(255, 255, 255, 0.90) !important; border: 1px solid var(--al-border-soft) !important; border-radius: 18px !important; box-shadow: var(--al-shadow-xs) !important; } body:not(.auth-ready) #setup-new .ec-reg-hero-tag{ background: var(--al-fill-2) !important; border: 1px solid var(--al-border-soft) !important; color: var(--al-text) !important; border-radius: 980px !important; } /* Generic modals shown pre-login (legal, claim-code) */ body:not(.auth-ready):not(.auth-ready) #landing-screen .modal, body:not(.auth-ready) #login-screen .modal, body:not(.auth-ready) #setup-new .modal, body:not(.auth-ready) #setup-join .modal, body:not(.auth-ready) #recovery-screen .modal{ background: rgba(255, 255, 255, 0.94) !important; -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: 1px solid var(--al-border) !important; border-radius: 22px !important; box-shadow: var(--al-shadow-xl) !important; color: var(--al-text) !important; } body:not(.auth-ready) #login-screen .modal-title, body:not(.auth-ready) #setup-new .modal-title, body:not(.auth-ready) #setup-join .modal-title, body:not(.auth-ready) #recovery-screen .modal-title{ color: var(--al-text) !important; } body:not(.auth-ready) #login-screen .modal-handle, body:not(.auth-ready) #setup-new .modal-handle, body:not(.auth-ready) #setup-join .modal-handle, body:not(.auth-ready) #recovery-screen .modal-handle{ background: var(--al-fill-3) !important; } /* Input group helpers (generate-button next to a field) */ body:not(.auth-ready) #login-screen .gen-btn, body:not(.auth-ready) #setup-new .gen-btn, body:not(.auth-ready) #setup-join .gen-btn, body:not(.auth-ready) #recovery-screen .gen-btn{ background: var(--al-fill-2) !important; border: 1px solid var(--al-border-soft) !important; color: var(--al-text) !important; border-radius: 12px !important; min-height: 48px; min-width: 48px; } body:not(.auth-ready) #login-screen .gen-btn:hover, body:not(.auth-ready) #setup-new .gen-btn:hover, body:not(.auth-ready) #setup-join .gen-btn:hover, body:not(.auth-ready) #recovery-screen .gen-btn:hover{ background: var(--al-fill-3) !important; } /* ─────────────────────────────────────────────────────────────────────────── 10. FLOATING AURA WIDGET ─────────────────────────────────────────────────────────────────────────── */ body:not(.auth-ready) #aura-fab{ bottom: 16px !important; right: 16px !important; z-index: 50; height: auto !important; padding: 8px 16px 8px 8px !important; gap: 12px !important; background: rgba(255, 255, 255, 0.90) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--al-border) !important; border-radius: 980px !important; box-shadow: var(--al-shadow-xl) !important; animation: none !important; color: var(--al-text) !important; min-height: 48px; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } body:not(.auth-ready) #aura-fab::before, body:not(.auth-ready) #aura-fab::after{ display: none !important; } body:not(.auth-ready) #aura-fab:hover{ transform: translateY(-1px) !important; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.14) !important; } body:not(.auth-ready) #aura-fab:active{ transform: scale(0.98) !important; } body:not(.auth-ready) #aura-fab-avatar{ width: 34px !important; height: 34px !important; border: 1px solid var(--al-border) !important; background: var(--al-fill) !important; } body:not(.auth-ready) #aura-fab .aura-fab-name{ color: var(--al-text) !important; font-size: 14px !important; font-weight: 600 !important; } /* "lokal · privat" reads as the soft violet-blue accent badge */ body:not(.auth-ready) #aura-fab .aura-fab-meta{ color: #FFFFFF !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.10em !important; background: linear-gradient(135deg, #7C6AF7 0%, #0071E3 100%); padding: 2px 8px !important; border-radius: 980px !important; display: inline-block; } @media (min-width: 640px) { body:not(.auth-ready) #aura-fab{ bottom: 24px !important; right: 24px !important; } } /* ─────────────────────────────────────────────────────────────────────────── 11. COOKIE / PRIVACY BANNER ─────────────────────────────────────────────────────────────────────────── */ body:not(.auth-ready) #cookie-banner{ background: rgba(255, 255, 255, 0.92) !important; -webkit-backdrop-filter: saturate(180%) blur(24px) !important; backdrop-filter: saturate(180%) blur(24px) !important; border: 1px solid var(--al-border) !important; border-radius: 20px !important; box-shadow: var(--al-shadow-xl) !important; bottom: 16px !important; } body:not(.auth-ready) #cookie-banner div, body:not(.auth-ready) #cookie-banner span, body:not(.auth-ready) #cookie-banner strong{ color: var(--al-text-2) !important; } body:not(.auth-ready) #cookie-banner strong, body:not(.auth-ready) #cookie-banner > div > div > div:first-child span{ color: var(--al-text) !important; } body:not(.auth-ready) #cookie-banner span[onclick]{ color: var(--al-accent) !important; } body:not(.auth-ready) #cookie-banner button{ background: var(--al-accent) !important; color: #FFFFFF !important; border-radius: 12px !important; min-height: 44px !important; box-shadow: 0 4px 14px rgba(0, 113, 227, 0.20) !important; } @media (min-width: 640px) { body:not(.auth-ready) #cookie-banner{ bottom: 24px !important; } } /* ─────────────────────────────────────────────────────────────────────────── 12. RESPONSIVE / TOUCH TARGETS ─────────────────────────────────────────────────────────────────────────── */ /* Nothing in the pre-login flow may scroll the page sideways. */ body:not(.auth-ready) #landing-screen, body:not(.auth-ready) #splash, body:not(.auth-ready) #login-screen, body:not(.auth-ready) #setup-new, body:not(.auth-ready) #setup-join, body:not(.auth-ready) #recovery-screen{ overflow-x: hidden; } body:not(.auth-ready) #landing-screen img, body:not(.auth-ready) #splash img, body:not(.auth-ready) #login-screen img, body:not(.auth-ready) #setup-new img, body:not(.auth-ready) #setup-join img, body:not(.auth-ready) #recovery-screen img{ max-width: 100%; height: auto; } /* Wide tables/terminals get their own scroller instead of pushing the page. */ body:not(.auth-ready) #landing-screen .lp-ctable{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 767px) { /* 44px minimum touch target across every interactive pre-login control. */ body:not(.auth-ready) #landing-screen a[onclick], body:not(.auth-ready) #landing-screen button, body:not(.auth-ready) #splash button, body:not(.auth-ready) #login-screen button, body:not(.auth-ready) #setup-new button, body:not(.auth-ready) #setup-join button, body:not(.auth-ready) #recovery-screen button, body:not(.auth-ready) #login-screen a[onclick], body:not(.auth-ready) #setup-new a[onclick], body:not(.auth-ready) #setup-join a[onclick], body:not(.auth-ready) #recovery-screen a[onclick]{ min-height: 44px; } body:not(.auth-ready) #landing-screen .lp-footer-links button{ min-height: 44px; } body:not(.auth-ready) #landing-screen .lp-hero-inner{ gap: 2rem !important; } body:not(.auth-ready) #landing-screen .lp-h1{ font-size: clamp(2rem, 9vw, 2.75rem) !important; } body:not(.auth-ready) #landing-screen .lp-title{ font-size: clamp(1.6rem, 7vw, 2rem) !important; } body:not(.auth-ready) #login-screen .auth-panel, body:not(.auth-ready) #setup-new .auth-panel, body:not(.auth-ready) #setup-join .auth-panel, body:not(.auth-ready) #recovery-screen .auth-panel, body:not(.auth-ready) #login-screen .auth-panel--login, body:not(.auth-ready) #setup-new .auth-panel--login, body:not(.auth-ready) #setup-join .auth-panel--login, body:not(.auth-ready) #recovery-screen .auth-panel--login{ border-radius: 20px !important; padding: 20px !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-card{ border-radius: 22px !important; } /* Segmented language control wraps rather than overflowing at 375px. */ body:not(.auth-ready) #login-screen .ec-login-desktop-lang{ flex-wrap: wrap; justify-content: center; } body:not(.auth-ready) #login-screen .ec-login-desktop-lang button{ padding: 7px 12px !important; } /* FAB shrinks to the avatar + label without crowding the viewport edge. */ body:not(.auth-ready) #aura-fab{ padding: 7px 14px 7px 7px !important; } body:not(.auth-ready) #aura-fab .aura-fab-name{ font-size: 13px !important; } } @media (max-width: 380px) { body:not(.auth-ready) #aura-fab .aura-fab-meta{ display: none !important; } body:not(.auth-ready) #cookie-banner{ padding: 16px !important; } } /* Respect reduced-motion for everything this file animates. */ @media (prefers-reduced-motion: reduce) { body:not(.auth-ready) #landing-screen *, body:not(.auth-ready) #splash *, body:not(.auth-ready) #login-screen *, body:not(.auth-ready) #setup-new *, body:not(.auth-ready) #setup-join *, body:not(.auth-ready) #recovery-screen *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ─────────────────────────────────────────────────────────────────────────── 13. ACTIVE LANGUAGE PILL --------------------------------------------------------------------------- applyLang() already writes `document.documentElement.lang` on every language change (assets/js/ui-render.js:30754). The buttons carry an additive data-lang attribute, so the active pill is pure CSS — no JS was touched and setLang()'s own behaviour is unchanged. ─────────────────────────────────────────────────────────────────────────── */ body:not(.auth-ready) #setup-new .ec-reg-desktop-lang{ /* NOTE - deliberately no `display`; see the login bar above. */ align-items: center; gap: 2px; background: var(--al-fill-2) !important; padding: 4px !important; border-radius: 980px !important; border: none !important; } body:not(.auth-ready) #setup-new .ec-reg-desktop-lang button{ background: transparent !important; border: none !important; color: var(--al-text-2) !important; font-size: 12px !important; font-weight: 500 !important; padding: 7px 14px !important; border-radius: 980px !important; min-height: 34px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } body:not(.auth-ready) #setup-new .ec-reg-desktop-lang button:hover{ color: var(--al-text) !important; } /* #login-screen / #setup-new are required here: style.css scopes the resting pill state through `#login-screen .ec-login-desktop-lang button`, and an ID always outranks any number of attribute/class selectors. */ html[lang="de"] body:not(.auth-ready) #login-screen .ec-login-desktop-lang button[data-lang="de"], html[lang="en"] body:not(.auth-ready) #login-screen .ec-login-desktop-lang button[data-lang="en"], html[lang="pl"] body:not(.auth-ready) #login-screen .ec-login-desktop-lang button[data-lang="pl"], html[lang="de"] body:not(.auth-ready) #setup-new .ec-reg-desktop-lang button[data-lang="de"], html[lang="en"] body:not(.auth-ready) #setup-new .ec-reg-desktop-lang button[data-lang="en"], html[lang="pl"] body:not(.auth-ready) #setup-new .ec-reg-desktop-lang button[data-lang="pl"]{ background: #FFFFFF !important; color: var(--al-text) !important; box-shadow: var(--al-shadow-xs) !important; font-weight: 600 !important; } /* ═══════════════════════════════════════════════════════════════════════════ 14. SPECIFICITY ESCALATION --------------------------------------------------------------------------- app.css / desktop-overrides.css / register-desktop-grid.css style a handful of pre-login nodes through TWO-ID selectors with !important (e.g. `#login-screen #btn-login`, `#landing-screen #lp-hero .lp-h1`). A single-ID rule can never beat those, so the affected nodes are restated here at matching-or-higher specificity. Same gate, same tokens — this block only raises weight, it introduces no new design decisions. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Hero (two-ID competitors under #landing-screen #lp-hero) ────────────── */ body:not(.auth-ready) #landing-screen #lp-hero{ background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%) !important; } body:not(.auth-ready) #landing-screen #lp-hero .lp-h1, body:not(.auth-ready) #landing-screen #lp-hero .lp-h1 .lp-h1-w1{ color: var(--al-text) !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; font-weight: 600 !important; letter-spacing: -0.03em !important; opacity: 1 !important; } body:not(.auth-ready) #landing-screen #lp-hero .lp-h1 .lp-h1-w2{ color: var(--al-text-2) !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; animation: none !important; } body:not(.auth-ready) #landing-screen #lp-hero .lp-hero-sub{ color: var(--al-text-2) !important; opacity: 1 !important; } body:not(.auth-ready) #landing-screen #lp-hero .lp-hero-badge, body:not(.auth-ready) #landing-screen #lp-hero .lp-hero-badge-pill{ background: var(--al-fill-2) !important; border: 1px solid var(--al-border-soft) !important; color: var(--al-text) !important; opacity: 1 !important; } body:not(.auth-ready) #landing-screen #lp-hero .lp-ctas{ opacity: 1 !important; } body:not(.auth-ready) #landing-screen #lp-hero .lp-terminal{ background: var(--al-bg-alt) !important; border: 1px solid var(--al-border-soft) !important; box-shadow: var(--al-shadow-sm) !important; opacity: 1 !important; } /* ── Nav / burger / footer / lang (two-ID competitors) ───────────────────── */ body:not(.auth-ready) #landing-screen #lp-nav{ background: rgba(245, 245, 247, 0.80) !important; border-bottom: 1px solid var(--al-border-soft) !important; } body:not(.auth-ready) #landing-screen #lp-nav .lp-nav-links a{ color: var(--al-text-2) !important; } body:not(.auth-ready) #landing-screen #lp-nav .lp-nav-links a:hover{ color: var(--al-text) !important; } body:not(.auth-ready) #landing-screen #lp-burger{ background: var(--al-fill-2) !important; border: 1px solid var(--al-border-soft) !important; color: var(--al-text) !important; } body:not(.auth-ready) #landing-screen #lp-footer{ background: var(--al-bg) !important; border-top: 1px solid var(--al-border-soft) !important; } body:not(.auth-ready) #landing-screen #lp-footer .lp-footer-inner{ color: var(--al-text-2) !important; } body:not(.auth-ready) #landing-screen #lp-footer .lp-footer-links button{ color: var(--al-text-2) !important; } body:not(.auth-ready) #landing-screen #lp-footer .lp-footer-links button:hover{ color: var(--al-text) !important; } body:not(.auth-ready) #landing-screen #lp-lang-btn{ background: var(--al-fill-2) !important; border: 1px solid var(--al-border-soft) !important; color: var(--al-text) !important; } body:not(.auth-ready) #landing-screen #lp-lang-menu{ background: rgba(255, 255, 255, 0.92) !important; border: 1px solid var(--al-border) !important; box-shadow: var(--al-shadow-xl) !important; } body:not(.auth-ready) #landing-screen #lp-premium .lp-bento > *{ background: var(--al-bg-alt) !important; border-color: var(--al-border-soft) !important; } /* ── Login screen (two-ID competitors) ───────────────────────────────────── */ body:not(.auth-ready) #login-screen #ec-login-form{ background: rgba(255, 255, 255, 0.85) !important; -webkit-backdrop-filter: saturate(180%) blur(28px) !important; backdrop-filter: saturate(180%) blur(28px) !important; border: 1px solid var(--al-border) !important; border-radius: 24px !important; box-shadow: var(--al-shadow-lg) !important; } body:not(.auth-ready) #login-screen #ec-login-form .auth-hero{ background: transparent !important; } body:not(.auth-ready) #login-screen #btn-login{ background: var(--al-accent) !important; border: none !important; color: #FFFFFF !important; border-radius: 12px !important; box-shadow: 0 6px 18px rgba(0, 113, 227, 0.20) !important; font-weight: 600 !important; min-height: 50px !important; } body:not(.auth-ready) #login-screen #btn-login:hover{ background: var(--al-accent-hi) !important; box-shadow: 0 8px 24px rgba(0, 113, 227, 0.26) !important; } body:not(.auth-ready) #login-screen #captcha-answer-login{ background: #FFFFFF !important; border: 1px solid var(--al-border-soft) !important; border-radius: 12px !important; color: var(--al-text) !important; box-shadow: none !important; } body:not(.auth-ready) #login-screen #captcha-answer-login:focus{ border-color: var(--al-accent) !important; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.20) !important; } body:not(.auth-ready) #login-screen #captcha-hint-login{ color: var(--al-text-2) !important; } /* ── Register screen (two-ID competitors) ────────────────────────────────── */ body:not(.auth-ready) #setup-new #btn-create-acc, body:not(.auth-ready) #setup-new .auth-shell--wide #btn-create-acc{ background: var(--al-accent) !important; border: none !important; color: #FFFFFF !important; border-radius: 12px !important; box-shadow: 0 6px 18px rgba(0, 113, 227, 0.20) !important; font-weight: 600 !important; min-height: 50px !important; } body:not(.auth-ready) #setup-new #btn-create-acc[disabled], body:not(.auth-ready) #setup-new .auth-shell--wide #btn-create-acc[disabled]{ background: var(--al-fill-3) !important; color: var(--al-text-3) !important; box-shadow: none !important; } body:not(.auth-ready) #setup-new #captcha-answer-reg{ background: #FFFFFF !important; border: 1px solid var(--al-border-soft) !important; border-radius: 12px !important; color: var(--al-text) !important; } body:not(.auth-ready) #setup-new #agb-consent + label, body:not(.auth-ready) #setup-new #datenschutz-consent + label{ color: var(--al-text-2) !important; } /* ── Every input on every auth screen (beats `#login-screen input`) ──────── */ body:not(.auth-ready) #login-screen input, body:not(.auth-ready) #login-screen textarea, body:not(.auth-ready) #setup-new input, body:not(.auth-ready) #setup-new textarea, body:not(.auth-ready) #setup-join input, body:not(.auth-ready) #setup-join textarea, body:not(.auth-ready) #recovery-screen input, body:not(.auth-ready) #recovery-screen textarea{ background: var(--al-fill) !important; border: 1px solid var(--al-border-soft) !important; border-color: var(--al-border-soft) !important; border-radius: 12px !important; color: var(--al-text) !important; box-shadow: none !important; -webkit-text-fill-color: var(--al-text); } body:not(.auth-ready) #login-screen input:focus, body:not(.auth-ready) #login-screen textarea:focus, body:not(.auth-ready) #setup-new input:focus, body:not(.auth-ready) #setup-new textarea:focus, body:not(.auth-ready) #setup-join input:focus, body:not(.auth-ready) #setup-join textarea:focus, body:not(.auth-ready) #recovery-screen input:focus, body:not(.auth-ready) #recovery-screen textarea:focus{ background: #FFFFFF !important; border-color: var(--al-accent) !important; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.20) !important; } /* ── Splash back-nav (two-ID competitor) ─────────────────────────────────── */ body:not(.auth-ready) #splash.ec-auth-landing #splash-back-nav .splash-back-btn{ background: var(--al-fill-2) !important; border: 1px solid var(--al-border-soft) !important; color: var(--al-text) !important; } /* ═══════════════════════════════════════════════════════════════════════════ 15. TOUCH-TARGET FLOOR (≤1024px — phone + tablet) --------------------------------------------------------------------------- Hard requirement: no interactive pre-login control below 44px on touch widths. The segmented language pills and the auth footer links are the two places where the visual spec alone would land under that floor, so they are raised here rather than shipped at 34px / 18px. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { body:not(.auth-ready) #login-screen .ec-login-desktop-lang button, body:not(.auth-ready) #setup-new .ec-reg-desktop-lang button { min-height: 44px !important; padding: 11px 16px !important; } body:not(.auth-ready) #splash .ec-auth-foot-link, body:not(.auth-ready) #login-screen .ec-auth-foot-link, body:not(.auth-ready) #setup-new .ec-auth-foot-link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; } body:not(.auth-ready) #login-screen .auth-chip-btn, body:not(.auth-ready) #setup-new .auth-chip-btn, body:not(.auth-ready) #setup-new .ec-reg-captcha-refresh { min-height: 44px !important; } body:not(.auth-ready) #login-screen .auth-inline-actions a, body:not(.auth-ready) #setup-new .auth-inline-actions a, body:not(.auth-ready) #setup-join .auth-inline-actions a, body:not(.auth-ready) #recovery-screen .auth-inline-actions a, body:not(.auth-ready) #login-screen .auth-back-link, body:not(.auth-ready) #setup-new .auth-back-link, body:not(.auth-ready) #setup-join .auth-back-link, body:not(.auth-ready) #recovery-screen .auth-back-link { min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════════════ 16. RETIRE THE DARK DECORATIVE LAYERS ON THE AUTH SCREENS --------------------------------------------------------------------------- app.css:1505 and style.css:7870 paint cyan/violet radial washes plus a scanline grid onto ::before/::after of every auth screen. On the dark shell they read as atmosphere; on #F5F5F7 they read as a pastel stain. Removed for the pre-login screens only. #pin-screen is deliberately NOT listed: the PIN lock is a post-login state, so it keeps the dark treatment it was designed for. ═══════════════════════════════════════════════════════════════════════════ */ body:not(.auth-ready) #login-screen::before, body:not(.auth-ready) #login-screen::after, body:not(.auth-ready) #setup-new::before, body:not(.auth-ready) #setup-new::after, body:not(.auth-ready) #setup-join::before, body:not(.auth-ready) #setup-join::after, body:not(.auth-ready) #recovery-screen::before, body:not(.auth-ready) #recovery-screen::after { display: none !important; background: none !important; opacity: 0 !important; } /* The screens themselves also carry a dark gradient body in style.css:7860. */ body:not(.auth-ready) #login-screen.auth-screen, body:not(.auth-ready) #setup-new.auth-screen, body:not(.auth-ready) #setup-join.auth-screen, body:not(.auth-ready) #recovery-screen.auth-screen, body:not(.auth-ready) #login-screen.auth-screen--login, body:not(.auth-ready) #login-screen.auth-screen--login.active { background: var(--al-bg) !important; } body:not(.auth-ready) #login-screen.auth-screen--login::before, body:not(.auth-ready) #login-screen.auth-screen--login::after { display: none !important; background: none !important; } /* The auth shell wrapper inherits a translucent dark panel in some breakpoints. */ body:not(.auth-ready) #login-screen .auth-shell, body:not(.auth-ready) #setup-new .auth-shell, body:not(.auth-ready) #setup-join .auth-shell, body:not(.auth-ready) #recovery-screen .auth-shell { background: transparent !important; } /* ═══════════════════════════════════════════════════════════════════════════ 17. HERO PANEL + BRAND WORDMARK --------------------------------------------------------------------------- app.css:376 turns .lp-hero-inner into a dark glass slab and landing-layout-fix.css:1019 paints the wordmark with a blue→violet gradient text-fill. Both need two-ID specificity to restate on the light ground. ═══════════════════════════════════════════════════════════════════════════ */ body:not(.auth-ready) #landing-screen #lp-hero .lp-hero-inner { background: rgba(255, 255, 255, 0.72) !important; border: 1px solid var(--al-border-soft) !important; border-radius: 28px !important; box-shadow: var(--al-shadow-md) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } body:not(.auth-ready) #landing-screen #lp-hero .lp-hero-inner::before, body:not(.auth-ready) #landing-screen #lp-hero .lp-hero-inner::after, body:not(.auth-ready) #landing-screen #lp-hero .lp-hero-stage::after { display: none !important; background: none !important; opacity: 0 !important; } body:not(.auth-ready) #landing-screen .lp-nav-logo .lp-nav-logo-text { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: var(--al-text) !important; color: var(--al-text) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; } /* Hero info rows / note box sit on the new white panel. */ body:not(.auth-ready) #landing-screen #lp-hero .lp-hero-note, body:not(.auth-ready) #landing-screen #lp-hero .lp-hero-note > * { background: transparent !important; color: var(--al-text-2) !important; border-color: var(--al-border-soft) !important; } body:not(.auth-ready) #landing-screen #lp-hero .lp-hero-note strong, body:not(.auth-ready) #landing-screen #lp-hero .lp-hero-note b { color: var(--al-text) !important; } /* ═══════════════════════════════════════════════════════════════════════════ 18. SPLASH SHELL WRAPPER --------------------------------------------------------------------------- #splash itself, the card and the CTA already resolve to the light tokens, but .ec-auth-desktop-shell carries its own dark linear-gradient as a background-IMAGE. Because the card is translucent (white @ 85%) that slab showed through and turned the whole screen charcoal. Clearing the image is enough — the light ground underneath is already correct. ═══════════════════════════════════════════════════════════════════════════ */ body:not(.auth-ready) #splash .ec-auth-desktop-shell, body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-desktop-shell { background: transparent !important; background-image: none !important; } body:not(.auth-ready) #splash .ec-auth-marketing, body:not(.auth-ready) #splash .ec-auth-visual, body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-marketing, body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-visual { background: transparent !important; background-image: none !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-copy h1, body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-copy h1 span { color: var(--al-text) !important; -webkit-text-fill-color: currentColor !important; background: none !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-copy h1 span { color: var(--al-text-2) !important; } /* ═══════════════════════════════════════════════════════════════════════════ 19. SPLASH POLISH — card edge + hero artwork --------------------------------------------------------------------------- style.css:7668 draws a violet/cyan 1px gradient ring on the action card, and style.css:7553 blends the shield render with `mix-blend-mode: screen`, which is tuned for a dark backdrop. Both are corrected for the light ground: a plain hairline border, and a normally-composited artwork whose alpha mask fades earlier so its dark plate dissolves into the page instead of sitting on it as a hard disc. ═══════════════════════════════════════════════════════════════════════════ */ body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-card::before, body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-card::after { display: none !important; } body:not(.auth-ready) #splash.ec-auth-landing .ec-auth-shield-img { mix-blend-mode: normal !important; -webkit-mask-image: radial-gradient(ellipse at center, #000 38%, rgba(0, 0, 0, 0) 70%) !important; mask-image: radial-gradient(ellipse at center, #000 38%, rgba(0, 0, 0, 0) 70%) !important; opacity: 0.95; } /* ═══════════════════════════════════════════════════════════════════════════ 20. SCOPED TOKEN REMAP --------------------------------------------------------------------------- Large parts of the pre-login markup reference the global dark-theme custom properties inline (`color:var(--text2)`, `background:var(--bg2)`, …). Rather than rewriting hundreds of inline style attributes, the tokens themselves are re-pointed at the Apple Light palette *inside the pre-login subtrees only*. Custom properties inherit down the tree, so this reaches every inline usage below these roots and reaches nothing outside them — :root keeps the dark values, and the logged-in shell is not a descendant of any node listed here. ═══════════════════════════════════════════════════════════════════════════ */ body:not(.auth-ready) #landing-screen, body:not(.auth-ready) #splash, body:not(.auth-ready) #login-screen, body:not(.auth-ready) #setup-new, body:not(.auth-ready) #setup-join, body:not(.auth-ready) #recovery-screen, body:not(.auth-ready) #cookie-banner, body:not(.auth-ready) #aura-fab { --bg: #F5F5F7; --bg2: #F2F2F7; --bg3: #E8E8ED; --bg4: #E2E2E7; --border: rgba(0, 0, 0, 0.08); --border-hi: rgba(0, 113, 227, 0.35); --accent: #0071E3; --accent-hi: #0077ED; --cyan: #0071E3; --cyan-dim: #0060C0; --purple: #6E56CF; --gold: #8A6100; --gold-dim: #6F4E00; --danger: #C7332B; --green: #1D8A4E; --text: #1D1D1F; --text2: #86868B; --text3: #A1A1A6; --glass: rgba(0, 0, 0, 0.02); --glass-hi: rgba(0, 0, 0, 0.04); --glow-cyan: 0 6px 18px rgba(0, 113, 227, 0.18); --glow-purple: 0 6px 18px rgba(110, 86, 207, 0.18); --glow-gold: 0 6px 18px rgba(138, 97, 0, 0.14); --accent2: #0071E3; } /* Register screen: password-strength panel + brand wordmark ---------------- */ body:not(.auth-ready) #setup-new .auth-password-feedback { background: var(--al-fill) !important; border: 1px solid var(--al-border-soft) !important; border-radius: 16px !important; box-shadow: none !important; } body:not(.auth-ready) #setup-new .auth-password-rule, body:not(.auth-ready) #setup-new .auth-password-note { color: var(--al-text-2) !important; } body:not(.auth-ready) #setup-new .auth-password-rule.ok, body:not(.auth-ready) #setup-new .auth-password-rule.is-ok { color: var(--al-green) !important; } body:not(.auth-ready) #setup-new .auth-password-weak { color: var(--al-red) !important; } body:not(.auth-ready) #setup-new .ec-reg-card-logo span, body:not(.auth-ready) #setup-new .ec-reg-card-title { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: var(--al-text) !important; color: var(--al-text) !important; font-weight: 600 !important; } body:not(.auth-ready) #setup-new .ec-reg-card-subtitle { color: var(--al-text-2) !important; } /* The green "AES-256-GCM" security badge needs an accessible light variant. */ body:not(.auth-ready) #setup-new .auth-security-card { background: rgba(29, 138, 78, 0.06) !important; border: 1px solid rgba(29, 138, 78, 0.18) !important; } body:not(.auth-ready) #setup-new .auth-security-card span[style*="4ade80"] { color: var(--al-green) !important; } /* Register form labels ---------------------------------------------------- */ body:not(.auth-ready) #setup-new .input-group label, body:not(.auth-ready) #setup-join .input-group label, body:not(.auth-ready) #recovery-screen .input-group label { color: var(--al-text) !important; font-weight: 600 !important; text-transform: none; letter-spacing: 0; font-size: 13px !important; } body:not(.auth-ready) #setup-new .input-group label span[style*="text2"], body:not(.auth-ready) #setup-new .input-group label span:not([data-t$="LabelMain"]) { font-weight: 400; } /* ─────────────────────────────────────────────────────────────────────────── NATIVE / TOUCH-KORREKTUREN §APPLE-LIGHT-NATIVE-2026-09-12 --------------------------------------------------------------------------- Gemessen mit Playwright auf 430x932 (iPhone 15 Pro Max) und 360x800 (Android kompakt), Safe-Area-Insets hart injiziert, weil headless env(safe-area-inset-*) immer 0 liefert. Nur Praesentation, keine Struktur. ───────────────────────────────────────────────────────────────────────── */ /* 1) Der Splash-Zurueck-Button lag bei left:-182px AUSSERHALB des Viewports und war auf dem Handy unerreichbar — auf iOS gibt es keine Hardware-Zurueck- Taste, der Splash war also eine Einbahnstrasse. Ursache: app.css:1562 zentriert die Nav (left:50%; transform:translateX(-50%); width:min(100%,560px); padding:0 24px). style.css:7124 ueberschreibt danach nur `left:24px` und laesst das transform stehen: 24 - 215 + 24 = -182. Dieselbe Regel ersetzt zudem das safe-area-top aus app.css durch feste 24px, wodurch der Button unter Notch/Dynamic Island rutscht. */ body:not(.auth-ready) #splash.ec-auth-landing #splash-back-nav { transform: none !important; left: max(20px, env(safe-area-inset-left, 20px)) !important; top: max(20px, env(safe-area-inset-top, 20px)) !important; width: auto !important; padding: 0 !important; } /* 2) Trefferflaeche 44px (Apple HIG) statt gemessener 42px: die bestehende Regel oben in dieser Datei (min-height:44px) verliert gegen app.css:1576 `min-height:40px !important` — plus 2px Rahmen = 42px. */ body:not(.auth-ready) #splash.ec-auth-landing .splash-back-btn { min-height: 44px !important; padding: 0 16px !important; } /* 3) Der Aura-Knopf sass mit bottom:16px in der Home-Indicator-Zone (34px) und lag damit unter der iOS-Wischgeste. Er haengt am , nicht am Screen, erscheint also auf allen Pre-Login-Flaechen. */ body:not(.auth-ready) #aura-fab { bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; right: calc(16px + env(safe-area-inset-right, 0px)) !important; } /* 4) Consent-Checkboxen der Registrierung waren 20x20px — die kleinsten Ziele im ganzen Pre-Login-Fluss, und zwar an den beiden Pflichtfeldern. Nur fuer Touch-Geraete (pointer:coarse), damit die Maus-Layouts am Desktop unveraendert bleiben. Das Label traegt `for=`, ist also selbst Trefferflaeche — es bekommt die 44px, die Box wird auf 24px sichtbar. */ @media (pointer: coarse) { body:not(.auth-ready) #setup-new .auth-consent-card { align-items: center !important; padding: 10px 16px !important; } body:not(.auth-ready) #setup-new .auth-consent-card input[type="checkbox"] { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; margin-top: 0 !important; } body:not(.auth-ready) #setup-new .auth-consent-card label { min-height: 44px !important; display: flex !important; align-items: center !important; flex-wrap: wrap; } }