/* responsive.css - reveal states + breakpoints */ /* Scroll-reveal initial states (JS adds .is-in). Direction is set per element via data-reveal="left|right|up" (default: up). */ [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); } [data-reveal="left"] { transform: translateX(-56px); } [data-reveal="right"] { transform: translateX(56px); } [data-reveal="up"] { transform: translateY(40px); } [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } } /* Split text lines reveal */ [data-split] .line > span { transform: translateY(105%); transition: transform .9s var(--ease-out); } [data-split].is-in .line > span { transform: translateY(0); } /* ---- Tablet ---- */ @media (max-width: 1020px) { .features__grid { grid-template-columns: repeat(2, 1fr); } .stats__grid { grid-template-columns: repeat(2, 1fr); } .pricing__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } .price-card--featured { order: -1; } } /* ---- Mobile ---- */ @media (max-width: 720px) { .nav__links { display: none; } .nav { padding: 14px var(--pad); } .nav__right { gap: 12px; } .hero__actions { flex-direction: column; width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; gap: 12px; } .hero__actions .btn { width: 100%; justify-content: center; } .hero__actions .btn--lg { padding: 13px 22px; font-size: .95rem; } .features__grid { grid-template-columns: 1fr; } /* no GSAP pin on mobile -> native horizontal swipe with snap */ .industries__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; } .industries__viewport::-webkit-scrollbar { display: none; } .industries__track { transform: none !important; } .industry-card { flex-basis: 78vw; scroll-snap-align: center; } .industries__hint { display: none; } .dash__stats { gap: 22px; } .dash__stat-num { font-size: 1.3rem; } .how__track { grid-template-columns: 1fr; } .how__panel { padding: 28px; } .stat__num { font-size: 2.6rem; } .footer__bottom { flex-direction: column; align-items: flex-start; } .cal-event small { display: none; } } @media (max-width: 480px) { .stats__grid { grid-template-columns: 1fr; } .dash__stats { width: 100%; justify-content: space-between; } .nav__logo { font-size: 1.2rem; } } /* ============================================================ DEEP MOBILE PASS — nav drawer, calendar, animations, touch ============================================================ */ /* Kill any horizontal overflow at the root too (not just ). Without this, a single too-wide child can widen the layout viewport on phones and push every right-anchored element — burger, drawer button — off the visible screen. */ html { overflow-x: hidden; } /* ---- Mobile nav: hamburger + slide-in drawer ---- The burger + drawer only ever appear <=720px; desktop keeps the inline nav. */ .nav__burger { display: none; } .nav__drawer { display: none; } /* Engage the mobile header below 860px — that's where the inline links + CTA start to crowd the logo (and overflow on the smallest phones). */ @media (max-width: 860px) { /* Two-end header: logo hard-left, [lang][burger] hard-right, nothing in between. Overrides the desktop 3-column grid so nothing can overflow the edge. */ .nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: var(--pad); padding-right: var(--pad); } .nav__links { display: none; } /* moved into the drawer */ .nav__cta { display: none; } /* moved into the drawer */ .nav__right { gap: 10px; flex: none; margin-right: 0; } /* compact the DE/EN toggle so logo + toggle + burger breathe */ .lang-toggle { padding: 2px; } .lang-toggle button { padding: 6px 11px; font-size: .78rem; } /* logo never wraps / never gets squeezed */ .nav__logo { flex: none; } .nav__logo-word { white-space: nowrap; } .nav__burger { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; border-radius: 12px; flex: none; transition: background .25s var(--ease); } .nav.is-scrolled .nav__burger { background: rgba(22, 19, 15, 0.05); } .nav__burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s var(--ease); } .nav__burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger.is-active span:nth-child(2) { opacity: 0; } .nav__burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* While the drawer is open, give the header a SOLID plate (no backdrop-filter!). A non-none backdrop-filter/transform on .nav would make it the containing block for the fixed drawer and collapse inset:0 to the nav box — keep it plain background so the drawer always anchors to the viewport. */ body.nav-open .nav { background: rgba(244, 237, 228, 0.98); -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Full-screen drawer. Anchored to the viewport (inset:0). Content lives in a centred, max-width column so the button always keeps gutters on BOTH sides, even if the layout viewport is a few px wider than the device. */ .nav__drawer { display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; inset: 0; z-index: 90; padding: 96px 24px max(36px, env(safe-area-inset-bottom, 0px)); background: rgba(244, 237, 228, 0.98); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease); } .nav__drawer.is-open { opacity: 1; visibility: visible; transform: none; } /* explicit, always-visible close button inside the drawer (top-right) */ .nav__drawer-close { position: absolute; top: 14px; right: var(--pad); width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: var(--ink); background: rgba(22, 19, 15, 0.06); font-size: 1.5rem; line-height: 1; } .nav__drawer-close:active { background: rgba(22, 19, 15, 0.12); } .nav__drawer-links { display: flex; flex-direction: column; gap: 2px; width: 100%; max-width: 360px; margin: 0 auto; } .nav__drawer-links a:not(.btn) { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 7vw, 1.9rem); color: var(--ink); padding: 18px 4px; border-bottom: 1px solid var(--line); transition: color .2s var(--ease), padding-left .25s var(--ease); } .nav__drawer-links a:not(.btn):active { color: var(--accent); padding-left: 10px; } .nav__drawer-links .btn { margin-top: 28px; justify-content: center; width: 100%; box-sizing: border-box; } /* lock the page behind the drawer */ body.nav-open { overflow: hidden; } } /* ---- Global mobile niceties ---- */ @media (max-width: 720px) { a, button { -webkit-tap-highlight-color: rgba(255, 90, 60, 0.18); } /* keep long German compounds from forcing horizontal scroll */ h1, h2, h3, p, a, li { overflow-wrap: break-word; } /* comfortable tap targets on every primary control */ .btn { min-height: 46px; } .lang-toggle button { min-height: 36px; } } /* ---- Hero ---- */ @media (max-width: 720px) { .hero { min-height: 92svh; padding-top: 84px; } .hero__content { flex: 0 0 auto; justify-content: flex-start; padding-top: 6vh; } .hero__title { font-size: clamp(3rem, 13vw, 4rem); } .hero__subtitle { margin-top: 20px; } .hero__actions { margin-top: 28px; } .hero__note { margin-top: 14px; } } /* ---- Section rhythm: tighten vertical padding on phones ---- */ @media (max-width: 720px) { :root { --section-pad: clamp(48px, 12vw, 72px); } .marquee { padding: 18px 0; } /* clean single-column check list, left-aligned */ .hero-trust { margin-top: 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; padding: 0 var(--pad) 24px; max-width: 280px; margin-left: auto; margin-right: auto; } .hero-trust__item { justify-content: flex-start; font-size: .9rem; line-height: 1.2; white-space: nowrap; } } /* ---- Story ---- */ @media (max-width: 720px) { .story__col--side { margin-top: 4px; } .missed-card { padding: 20px 20px; } } /* ---- Dashboard / Calendar — the big mobile cleanup ---- On phones the week grid keeps its colour-coded blocks but DROPS the text inside each event (caller names etc.) so cells never look cluttered. The live feed beside it carries the readable detail instead. */ @media (max-width: 860px) { .dash__bar { padding: 12px 16px; gap: 12px; } .dash__stats { gap: 20px; } .dash__body { grid-template-columns: 1fr; } .dash__week { border-right: none; border-bottom: 1px solid var(--line); } } @media (max-width: 640px) { .dash__week { grid-template-columns: 34px repeat(5, 1fr); } .cal-cell { min-height: 46px; } .cal-cell--head { min-height: 38px; font-size: .72rem; } .cal-cell--time { font-size: .58rem; } /* colour block only — no caller text. Instead of a flat fill, a hand-scribbled sine-wave sits inside each block — reads as "a voice booking" without clutter. */ .cal-event { inset: 3px; padding: 0; font-size: 0; border-radius: 6px; box-shadow: 0 4px 10px -6px rgba(0,0,0,.4); } .cal-event small { display: none; } .cal-event::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 26'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 9q3-5 6 0t6 0 6 0 6 0 6 0 6 0'/%3E%3Cpath d='M5 18q3-5 6 0t6 0 6 0 6 0'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 76% auto; opacity: .8; } .dash__stat-num { font-size: 1.25rem; } .dash__stat-lab { font-size: .72rem; } .dash__feed { padding: 14px; gap: 10px; } .feed-item { padding: 11px 13px; gap: 11px; } .feed-item__icon { width: 34px; height: 34px; border-radius: 10px; } } /* ---- Industries ---- */ @media (max-width: 720px) { .industry-card { padding: 24px 22px; } .industries__head { text-align: center; } } /* ---- How / Setup ---- */ @media (max-width: 720px) { .how__panel { padding: 24px; } .how__num { font-size: 2.6rem; } } /* ---- Pricing teaser band (homepage) ---- */ @media (max-width: 720px) { .price-teaser__amt { font-size: clamp(2.6rem, 13vw, 3.4rem); } /* these min-widths can exceed a narrow phone and widen the whole layout */ .pricing--8bit .pricing__strip-text, .pricing--8bit .pricing__strip-action { min-width: 0; } } /* ---- Callback + footer ---- */ @media (max-width: 720px) { .callback-section { padding-left: 16px; padding-right: 16px; } .callback-section__inner { padding: 36px 24px; } .footer__top { gap: 24px; } .footer__bottom { gap: 6px; } } /* ---- Exit popup: leave room for notches, fit small screens ---- */ @media (max-width: 480px) { .exit-popup__card { padding: 40px 26px; width: calc(100% - 32px); } .exit-popup__title { font-size: 1.35rem; } } /* ---- Forms (contact + preise callback) ---- */ @media (max-width: 720px) { /* 16px inputs stop iOS Safari from auto-zooming on focus */ .form-group input, .form-group textarea, .callback-card__input { font-size: 16px; } .contact-form-card { position: static; padding: 26px 22px; } } /* ============================================================ MOBILE PERFORMANCE — calm the heaviest GPU animations on phones. These large blurred/hue-rotating layers tank scroll FPS on mobile without adding much on a small screen. The hero ORB/gradient stays (brand-critical) — only its costly hue-rotate filter loop is stilled. ============================================================ */ @media (max-width: 720px) { /* 4 × 90px-blur orbs animating forever = the worst offender → freeze them */ .cal-glow__orb { animation: none !important; filter: blur(64px); opacity: .6; } /* infinite hue-rotate on a full-screen layer is expensive; keep the gradient, drop the loop */ .hero__gradient { animation: none !important; } /* decorative shimmer loops add little on a phone */ .price-teaser__amt { animation: none; } .price-teaser::before { animation: none; } .hero__grain { opacity: .35; } } /* Respect users who ask for less motion everywhere (belt + braces) */ @media (prefers-reduced-motion: reduce) { .cal-glow__orb, .hero__gradient, .marquee__track, .industry-card__icon, .missed-card__icon { animation: none !important; } }