/* first-paint stability (2026-08-24, Fable): metric-matched fallback for the hero accent. Until Instrument Serif loads the browser used Georgia, which is 21.6% wider (1016 vs 835px for the same string @100px) - the accent wrapped to a 2nd line and the two words painted on top of each other for ~100ms after every reload. 'ISerif-fb' is Georgia scaled to the real face's exact width (835/1016 = 82.25%), so the line count can never change. */ @font-face{font-family:'ISerif-fb';src:local('Georgia Italic'),local('Georgia');font-style:italic;size-adjust:82.25%} /* mobile-fix.css — phone-only corrections for the aioos.ai landing page. Load LAST, after every other stylesheet. Additive only; every layout rule is inside a max-width query, so desktop is untouched. Grounded in the AIOOS Design Canon (hetzner-vox:/home/vox/specs/DESIGN-CANON-AIOOS.md): C3 one visually dominant element per screen, one filled primary action C12 nothing grabs attention uninvited - target zero §3 Chatbot-Embed: "Launcher = six-wave mark alone: no pulsing halo, no fake '1' badge ... never out-shouts the host's own primary CTA" What was wrong, measured on a real device and reproduced on an iPhone WebKit preview: two position:fixed controls own the bottom corners permanently - #bfab .fab bottom-left and .aw.aw-fixed bottom-right (z-index 140). Whatever scrolls under them is covered. At one scroll position that is the trust-chip row; a little further down it is the "Demo ansehen" CTA itself. So this is not a chips bug, it is the launcher obstructing the host's primary CTA, which the canon forbids outright. */ /* ---------------------------------------------------------------- 1. forced dark mode */ /* The page declares no colour-scheme, so Samsung Internet and Chrome auto-dark are free to invert it: the brand gradient goes muddy and "kluger kommunizieren" ends up dark blue on near-black. Declaring the scheme we actually ship stops the inversion. This is not a mobile-only rule on purpose - the same browsers do it on desktop. */ :root { color-scheme: light; } /* --------------------------------------------------------- 2. the launcher's status pip */ /* span.aw-pip inside .aw-launch, rgb(18,161,74), 8px. A permanent green badge on the launcher is exactly the "fake badge" the embed checklist rules out, and it is an uninvited attention grabber under C12. It also carries no state: it is green whether or not anything is live. Iman's standing rule: no status dots on AIOOS surfaces. */ .aw-pip { display: none !important; } @media (max-width: 760px) { /* ------------------------------------------- 3. the floating controls yield to content */ /* They stay exactly where they are and look exactly as they did - they simply get out of the way while the page is moving, and come back when it stops. Nothing is permanently covered any more, and the launcher stops competing with the CTA in the same viewport (C3). Driven by mobile-fix.js, which only toggles .is-scrolling on . */ #bfab .fab, .aw.aw-fixed, .to-top { transition: opacity .2s ease, transform .2s ease, visibility .2s; } html.is-scrolling #bfab .fab { opacity: 0; transform: translateX(-120%); pointer-events: none; /* visibility, not just pointer-events: branchen.css re-enables hit-testing on the child with #bfab .tab{pointer-events:auto}, so the faded-out tab still stole the tap on DSGVO-KONFORM at 375 and 402px. visibility takes the whole subtree out. */ visibility: hidden; } html.is-scrolling .aw.aw-fixed, html.is-scrolling .to-top { opacity: 0; transform: translateX(120%); pointer-events: none; /* visibility, not just pointer-events: branchen.css re-enables hit-testing on the child with #bfab .tab{pointer-events:auto}, so the faded-out tab still stole the tap on DSGVO-KONFORM at 375 and 402px. visibility takes the whole subtree out. */ visibility: hidden; } /* -------------------------------------------------- 4. the tab stops sharing its pixels */ /* At 80% opacity the body text behind the Branchen tab read through its middle, so pill and paragraph smeared into one illegible block. Opaque, and smaller, so it takes less of a 402px screen. Also: max one backdrop-blur surface per viewport (D2) - this one drops its blur, the nav keeps it. */ #bfab .tab { background: #fff; backdrop-filter: none; padding: 10px 14px; gap: 8px; box-shadow: 0 10px 30px -12px rgb(10 18 34 / .35); } #bfab .tab .word { font-size: 10px; letter-spacing: .14em; } /* the collapsed menu keeps a 320x356 fixed box over the page with only opacity:0. pointer-events is already none; this takes it out of the layout and the a11y tree. */ #bfab .fab:not(.open) .menu { visibility: hidden; } #bfab .fab.open .menu { visibility: visible; } /* --------------------------------------------------------------- 5. the trust-chip row */ /* Four short labels were eating four full-width rows of a 664px screen. Two-up. */ .hero-chips, .assure { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; justify-items: stretch; } .hero-chips > *, .assure > * { width: 100%; margin: 0; justify-content: center; align-items: center; gap: 6px; font-size: 11px; padding-left: 10px; padding-right: 10px; white-space: nowrap; } .hero-chips > * > *, .assure > * > * { white-space: nowrap; } /* NOTE: margin-bottom on the chip row does NOT lift it clear of the controls - the controls are anchored to the viewport, not to the flow, so the row stays exactly where it was and only the content BELOW moves. Measured and discarded. The row is kept clear by hiding the controls while it is on screen (see .row-visible in mobile-fix.js). */ html.row-visible #bfab .fab, html.row-visible .aw.aw-fixed, html.row-visible .to-top { opacity: 0; transform: none; pointer-events: none; /* visibility, not just pointer-events: branchen.css re-enables hit-testing on the child with #bfab .tab{pointer-events:auto}, so the faded-out tab still stole the tap on DSGVO-KONFORM at 375 and 402px. visibility takes the whole subtree out. */ visibility: hidden; } } /* prefers-reduced-motion: the controls still yield, they just do not slide (C canon: every state stays readable without the show). */ @media (prefers-reduced-motion: reduce) { #bfab .fab, .aw.aw-fixed, .to-top { transition: opacity .01s linear; } html.is-scrolling #bfab .fab, html.is-scrolling .aw.aw-fixed, html.is-scrolling .to-top { transform: none; } } /* ══════════════════════════════════════════════════════════════════════════ MOBILE PASS 2026-08-15 — measured on a 390x844 iPhone against the live site. Everything below is inside a max-width query except one no-op blur removal. ══════════════════════════════════════════════════════════════════════════ */ /* 1 · The bar was pressed flat against both screen edges — the pill read as cut off. nav is width:fit-content with a 38px gap and 26px of left padding, so it asked for 369px inside a 350px slot and spilled over its own shell. The rule that fixes this was written months ago in api.css and never reached the home page. */ @media (max-width:900px){ .nav-shell nav{gap:16px; padding:10px 10px 10px 18px} } @media (max-width:520px){ .nav-shell{padding:0 14px} .nav-shell nav{gap:10px; padding:8px 8px 8px 14px} } /* 2 · The glass belongs to the bar. A bare nav{} selector in index.html also catches