/* ============================================================ AURALEX — MOBILE STYLES Zentrale Override-Datei für alle @media (max-width: 768px). Desktop wird NIEMALS verändert. Diese Datei ist nach allen anderen CSS-Files im verlinkt damit sie auf Mobile gewinnt (Cascade-Order). Struktur: 1. GLOBAL — Resets, Overflow-Guards, Universal-Patterns 2. NAV / HEADER — Auf allen Pages identisch 3. INDEX — pro Section 4. CORE — pro Section 5. VOICE-AGENT — pro Section 6. CUSTOM — pro Section 7. WEBDESIGN — pro Section 8. ABOUT — pro Section 9. CONTACT — pro Section 10. LEGAL (agb / impressum / datenschutz) Convention: nie !important wenn höhere Specificity reicht. Wegbegleiter-Berg behält bewusst seine sticky-Choreografie. ============================================================ */ /* ====== 1. GLOBAL ====== */ @media (max-width: 768px) { /* Overflow-Guard — V3 critical: use `overflow-x: clip` NOT `hidden`. `hidden` makes html/body a scroll-container which breaks ALL position:sticky on the page (sticky becomes relative to that container instead of the viewport). `clip` clips overflow WITHOUT creating a scroll-container, so sticky stays viewport-relative. This was the root cause of pain/apropos/heliont sticky-sections being broken on mobile. */ html, body { overflow-x: clip; max-width: 100vw; } /* Bilder + Videos überschreiten nie ihren Container */ img, video, svg, iframe { max-width: 100%; height: auto; } /* Common: Tap-Targets ≥ 44x44 (Apple HIG) */ a, button, [role="button"] { min-height: 44px; } /* Ausnahme: kleine Icon-Buttons in dichten Cards (z.B. FAQ-Toggle) */ .faq-icon, .menu-close, [data-tap-target="small"] { min-height: 0; } /* Reveal-Pending · 2026-05-17 reaktiviert auf User-Wunsch. Vorher: transform: none !important (nur Opacity-Fade, kein Translate). Jetzt: translate dosiert (18px statt 30px wie Desktop) damit der Fade auf Mobile sichtbar bleibt, ohne 50 GPU-Layer auf einmal. Visible-State fixiert auf translateY(0) — !important, sonst kann irgendein Vorrang- Wirrwarr (z.B. .reveal-pending nach DOM-Reorder) die End-Position ueberschreiben. */ .solution-block.reveal-pending, .animate-on-scroll.reveal-pending { transform: translateY(18px) !important; } .solution-block.reveal-pending.visible, .solution-block.visible, .animate-on-scroll.reveal-pending.visible, .animate-on-scroll.visible { transform: translateY(0) !important; } /* Mobile-Timing: kuerzere Duration + kompaktere Stagger-Delays, damit der Reveal knackig wirkt (0.5s statt 0.7-0.8s wie Desktop). Vier gestaffelte Elemente landen jetzt nach 0.74s statt 1.2s. */ .animate-on-scroll { transition-duration: 0.5s !important; } .animate-on-scroll.stagger-1 { transition-delay: 0.06s !important; } .animate-on-scroll.stagger-2 { transition-delay: 0.12s !important; } .animate-on-scroll.stagger-3 { transition-delay: 0.18s !important; } .animate-on-scroll.stagger-4 { transition-delay: 0.24s !important; } } /* ================================================================= 1b. PERFORMANCE-KILLER ENTFERNEN auf Mobile ================================================================ iOS Safari und Chrome Mobile sterben an backdrop-filter und filter:blur(). Das sind GPU-Compositor-Killer. Die schmeißen wir global auf Mobile raus. Visuelle Differenz ist gering weil: - backdrop-filter wird durch solid background ersetzt - filter:blur auf Background-Gradients ist optisch ähnlich ohne blur - 41 CSS-Animationen auf einer Page ist zu viel für Mobile-GPU */ @media (max-width: 768px) { /* Backdrop-Filter komplett aus auf Mobile (30 Elements waren betroffen) */ * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Blur-Filter aus auf Mobile außer für SVG-Defs (22 Elements waren betroffen). Hero-Sunbeam ist explizit whitelisted — der Beam BRAUCHT den Blur sonst ist er nur ein harter Conic-Gradient ohne Atmosphäre. */ *:not(svg):not(svg *):not(.sun-beam) { filter: none !important; } /* Will-change auf transform/opacity nicht überall lassen — nur wo wirklich animiert wird. Massiv weniger GPU-Layers. */ *:not(.intro-overlay):not(.menu-overlay):not(.task-feed-track) { will-change: auto !important; } /* dotlottie-player: weniger Frames auf Mobile durch Animation-Pause wenn nicht im Viewport. Default-Speed kann reduziert werden. */ dotlottie-player { transform: translateZ(0); /* leichter Compositing-Hint, kein 3D */ } /* V2: Static-orb-Layer komplett raus auf allen Mobile-Viewports (war: nur <600px). Tests auf iPhone zeigten dass orbs auch auf 390-768px noch GPU killen. */ .static-orb-layer, .static-orb { display: none !important; } /* perspective + transform-style 3D ist auf Mobile teuer. Flach machen. */ .app-scene-laptop-wrap, [style*="perspective"] { perspective: none !important; transform-style: flat !important; } } /* ====== 2. NAV / HEADER (alle Pages) ====== */ @media (max-width: 768px) { /* Standard Auralex-Nav nutzt grid mit logo links / MENU rechts. Date-stamp "AURALEX · 2026" rechts oben kollidiert auf 390px mit MENU. Auf Mobile ausblenden. */ .nav-datestamp, [class*="nav-datestamp"], .top-meta-stamp { display: none !important; } /* MENU-Button: bessere Touch-Affordanz */ .nav-menu-toggle, [data-menu-toggle] { padding: 12px 16px; } } /* ====== 3. INDEX ====== */ @media (max-width: 768px) { /* --- HERO --- */ /* Task-feed (Live-Ticker) clippen damit Marquee nicht über Viewport hinausläuft. Mobile bleibt im Hero-Rahmen visuell sauber. */ .task-feed, [aria-label*="Live-Log"] { overflow: hidden; max-width: 100vw; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); } /* --- IS-THIS-YOU + HEADING-STICKY (Zayla-style scroll section) --- V3: Desktop-Sticky 1:1, nur grid-mobile-stack. PAIN SECTION block am Ende der Datei kümmert sich um Typo/Card-Width. */ #is-this-you .grid, #is-this-you [class*="grid-cols"] { grid-template-columns: 1fr !important; gap: 16px; } /* --- BIG-NUMBER PAIN-STAT (#ityPainSection) --- V3: Desktop's min-height: 200vh BELASSEN damit der sticky-Scroll für "bis zu 70%" auf mobile auch funktioniert. Nur typografisch tunen. */ #ityPainSection .big-number, #ityPainSection [class*="big-number"], #ityPainSection .stat-number { font-size: clamp(4rem, 22vw, 7rem) !important; line-height: 0.95; } /* --- SERVICES (#services) --- */ #services .grid, #services [class*="grid-cols-2"], #services [class*="grid-cols-3"] { grid-template-columns: 1fr !important; gap: 20px; } #services .outcome-card { padding: 24px 20px; } /* --- ROI Kalkulator (#roi) — V2 Pattern B: compact 2x2 slider grid --- */ /* (Detail-Styles im ROI COMPACT V2 block am Ende der Datei) */ /* --- FIRST-MONTH (#firstMonth) --- V3: Timeline-Cards waren auf Mobile "viel zu groß" per User. Tighter Sizing. */ #firstMonth .grid, #firstMonth [class*="grid-cols"] { grid-template-columns: 1fr !important; gap: 20px; } #firstMonth .etl-card { padding: 20px 18px !important; height: auto !important; } #firstMonth .etl-number { font-size: 36px !important; letter-spacing: -1px; margin-bottom: 2px; } #firstMonth .etl-when { margin-bottom: 12px; } #firstMonth .etl-unit { font-size: 12px !important; margin-bottom: 10px; } #firstMonth .etl-desc { font-size: 13px !important; line-height: 1.45; } #firstMonth .ergebnis-timeline { gap: 28px !important; } #firstMonth .etl-node { padding-left: 56px !important; padding-bottom: 24px !important; margin-bottom: 8px !important; } /* --- SOLUTIONS (#solutions) --- */ #solutions .grid, #solutions [class*="grid-cols"] { grid-template-columns: 1fr !important; gap: 20px; } /* --- APP-SHOWCASE (#app-showcase) --- Laptop-Showcase mit Studio-Tour. Studio-tour is-touring fixiert auf Desktop fullscreen, das wollen wir auf Mobile nicht. */ .app-scene { padding: 40px 0 60px !important; min-height: auto !important; } .app-scene-laptop-wrap { max-width: 100% !important; perspective: 900px; } /* Studio-stage tour-mode komplett deaktivieren auf Mobile - touch-and-fixed-overlay-tour ist auf Mobile-Browsern unzuverlässig */ .studio-stage.is-touring, .studio-stage { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; } .streetview-scene .scene-overlay { /* Scene-overlays auf Mobile kleiner und nur Top-Right anzeigen */ font-size: 0.78rem; } .scene-overlay--bottom-left, .scene-overlay--bottom-right, .scene-overlay--top-left { display: none; } /* --- WEGBEGLEITER MOUNTAIN — SACRED, siehe eigene Section unten --- */ /* --- WEBSITES-REVEAL (#websites-reveal / Apropos) --- V3: Desktop sticky GSAP 1:1 on mobile. Only grid-stack adjustment. */ #websites-reveal .grid, #websites-reveal [class*="grid-cols"] { grid-template-columns: 1fr !important; } /* --- HELIONT-SHOWCASE (#heliont-showcase) --- V3: User wants Desktop sticky watch-build choreography 1:1 on mobile. Lass Desktop CSS/GSAP machen, nur Mobile-Sizing-Adjustments. */ #heliont-showcase .hs-watch-frame { max-width: 320px; margin: 0 auto; } /* Side-annotations verstecken (Desktop-only, brauchen Layoutraum) */ #heliont-showcase .hs-annotations, #heliont-showcase .hs-annot { display: none !important; } /* --- FAQ (#faq) --- */ #faq .faq-item { padding: 18px 16px; } /* --- FINAL CTA --- */ #finalCta { padding: 60px 16px; } } /* ====== 4. CORE ====== */ @media (max-width: 768px) { /* --- #core-reveal: "Light-Cascade" mit Threads + Sticky-Pin --- V3 (2026-05-13): die V2-De-Stickify-Override ist entfernt — Sticky-Pin bleibt auch auf Mobile aktiv. Threads und Pin-Wrapper-Höhen kommen aus core.html selbst (mit Mobile-Tuning unter @media max-width: 768px). Die Choreography läuft per JS in core.html (headline-in / sub-in). */ /* --- #core-graph: Chart-Section mit 200vh sticky pin --- V3: Sticky-Pin bleibt aktiv auf Mobile — die Cascade-Animation braucht den Pin damit der User "ins Brain reinscrollt" und die Knoten staggered erscheinen. Layout-Werte (Sizes, Distances) kommen aus core-graph.js mit isMobile-Detect, Info-Card + Legend sind hidden auf Mobile. */ /* V3 (2026-05-13): info-card + legend dürfen wieder absolute/fixed sein — der Sticky-Pin ist auf Mobile aktiv, position: relative würde sie als normale Block-Elemente unter den Graph rutschen lassen. Die Positionierung macht core-graph.css selbst (mit Bottom-Pill bzw. Top-Pill). Die alte position:relative-Override war für die V2-Variante. */ /* --- #cockpit Mobile V3 (2026-05-13): Tab-Switcher statt langer Stack --- Statt 5 Cards untereinander (3400px Section-Höhe) gibt es eine Tab-Bar oben mit 4 Tabs: Briefing / Pipeline / Sprints / Tasks. Nur die aktive Card ist sichtbar. Health-Card + Narrative-Panel sind komplett hidden auf Mobile (zu komplex für den Touch-Flow). Swipe-Gesture switcht Tabs (JS-Logik in core.html). */ .core-cockpit { padding: 40px 0 60px !important; } .core-mod { margin: 0 auto !important; padding: 18px 20px !important; } .core-stage-shell, .core-stage-wrap { height: auto !important; min-height: auto !important; } /* Health-Card + Narrative panel auf Mobile komplett verbergen — Code-Anim ist auf einem 390er-Phone unlesbar, Narrative-Panel doppelt die Header- Idee aus dem Intro-Shell ohne Mehrwert. */ .core-cockpit .core-mod--health, .core-cockpit .core-narrative, .core-cockpit .core-wip { display: none !important; } /* V3.1 (2026-05-14): Mobile-Carousel-Track statt display:none-Switch. Alle 4 Mods sind absolute positioniert übereinander; per CSS-var --ck-slot auf jedem Mod (set durch JS) werden sie horizontal verschoben. Beim Drag setzt JS zusätzlich --ck-drag-x (px) auf der Stage, was alle Mods gleich- mäßig mitverschiebt → "Peek"-Effekt (nächste Card kommt von der Seite). */ .core-cockpit .core-stage { position: relative !important; overflow: hidden !important; /* JS setzt --ck-stage-h auf die Höhe der aktiven Card, sonst kollabiert die Stage weil die Children absolute sind. */ height: var(--ck-stage-h, 480px); transition: height 360ms cubic-bezier(0.22, 1, 0.36, 1); /* Drag-State (px) — wird von JS während touchmove geschrieben. */ --ck-drag-x: 0px; } .core-cockpit .core-mod { position: absolute !important; inset: 0 !important; width: 100% !important; max-width: 100% !important; /* Slot ist 0 für aktive Card, ±1, ±2, ±3 für nachbarn. */ transform: translateX(calc(var(--ck-slot, 0) * 100% + var(--ck-drag-x, 0px))) !important; transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease; will-change: transform; /* Nachbar-Cards leicht ausgegraut sodass nur die active card volle Aufmerk- samkeit zieht. Distanz > 1 = ganz aus. */ opacity: 1; } /* Während Drag: keine CSS-Transition damit Finger 1:1 folgt. */ .core-cockpit[data-dragging="1"] .core-mod { transition: none !important; } /* Nachbarn (slot ±1) etwas dimmen damit der active card heller wirkt. */ .core-cockpit .core-mod[data-ck-distance="0"] { opacity: 1 !important; } .core-cockpit .core-mod[data-ck-distance="1"] { opacity: 0.55 !important; } .core-cockpit .core-mod[data-ck-distance="2"] { opacity: 0.30 !important; } .core-cockpit .core-mod[data-ck-distance="3"] { opacity: 0 !important; pointer-events: none; } /* ----- Tab-Bar Styling ----- */ .core-cockpit-tabs { display: flex; position: relative; margin: 24px auto 28px; padding: 6px; width: calc(100% - 32px); max-width: 540px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 100px; overflow: hidden; isolation: isolate; } .core-cockpit-tab-indicator { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 4); border-radius: 100px; background: linear-gradient(135deg, rgba(160,180,255,0.20), rgba(160,107,255,0.18)); border: 1px solid rgba(160,180,255,0.30); transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1); z-index: 0; box-shadow: 0 8px 22px rgba(108,140,255,0.20); pointer-events: none; } .core-cockpit-tab { flex: 1 1 0; z-index: 1; padding: 9px 4px; background: transparent; border: none; color: rgba(255,255,255,0.50); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; transition: color 240ms ease; -webkit-tap-highlight-color: transparent; } .core-cockpit-tab.is-active { color: #fff; } .core-cockpit-tab:focus-visible { outline: 2px solid rgba(160,180,255,0.5); outline-offset: 4px; border-radius: 100px; } /* Stage gets touch-pan-y to release horizontal swipes for our gesture. */ .core-cockpit .core-stage { touch-action: pan-y; user-select: none; -webkit-user-select: none; } /* --- #roi outer grid: stack slider column on top of result column --- V2: Outer .grid hat 2 Kinder (Slider-Spalte, Result-Spalte). Auf Mobile wollen wir die untereinander, dann die Slider-Spalte selbst 2x2 (siehe ROI COMPACT V2 block weiter unten). */ #roi .grid, #roi [class*="grid-cols"] { grid-template-columns: 1fr !important; gap: 20px !important; } #roi .pricing-card, #roi [class*="pricing"] { padding: 24px 18px; } /* --- #results V3 (2026-05-13): Desktop sticky cross-fade Pattern auch auf Mobile aktiv. Die V2-Override (alles relative, stacked) hat die 3 Scene-Cards um 195px nach rechts versetzt (left: 50% blieb erhalten, transform: translate(-50%,-50%) wurde mit transform:none gekillt). Jetzt: sticky-pin bleibt, scenes bleiben absolute mit translate(-50%,-50%), die Card-Folds laufen wie auf Desktop. Width-Tuning (kleinere Card) und das min-height der Pin-Distance müssen aber Mobile-fit sein. */ #results .results-scene { width: min(92vw, 480px) !important; padding: 38px 22px !important; border-radius: 22px !important; } /* Die Scene-Inhalte (große Zahlen + Headlines) müssen auf Mobile kleiner — "TAG 0/1/2" wären sonst zu wuchtig für die kleinere Card. */ #results .results-scene .results-scene-number, #results .results-scene [class*="number"] { font-size: clamp(72px, 22vw, 110px) !important; line-height: 1 !important; } #results .results-scene .results-scene-headline, #results .results-scene h3, #results .results-scene [class*="headline"] { font-size: clamp(22px, 5.6vw, 32px) !important; line-height: 1.15 !important; } #results .results-scene .results-scene-body, #results .results-scene p { font-size: 14px !important; line-height: 1.55 !important; } /* --- #results-chart --- */ #results-chart { padding: 40px 16px; } #results-chart svg { max-width: 100%; height: auto; } /* --- #faq Core --- */ #faq .faq-item { padding: 18px 16px; } /* --- #final-cta --- */ #final-cta { padding: 60px 16px; } } /* ====== 5. VOICE-AGENT ====== */ @media (max-width: 768px) { /* --- Pain-Stats: Two-col → Single-col --- */ #va-pain .grid, .va-pain-stats, [id*="pain"] .grid, [id*="pain"] [class*="grid-cols-2"] { grid-template-columns: 1fr !important; gap: 20px; } /* --- Kalkulator: Slider full-width, Output unten --- */ .calculator, .va-calc, [class*="calc"] .grid, [class*="calc"] [class*="grid-cols-2"] { grid-template-columns: 1fr !important; } .calculator input[type="range"], .va-calc input[type="range"] { width: 100% !important; } .calculator .output, .va-calc .output, [class*="calc-output"] { margin-top: 28px; } /* --- Voice-Demo (#voice-demo) --- */ #voice-demo .vd-stage { padding: 32px 16px; } #voice-demo .vd-pulse-btn { width: 96px !important; height: 96px !important; } #voice-demo .vd-pulse-ring { /* rings bleiben — Animation skaliert mit Button */ } #voice-demo .vd-status { font-size: 1.05rem; margin-top: 20px; } #voice-demo h2 { font-size: clamp(1.8rem, 7vw, 2.4rem); } } /* ====== 6. CUSTOM ====== */ @media (max-width: 768px) { /* --- Multi-Stage Process · 2026-05-16 --- Frueher: auf Mobile statischer Stack. User-Wunsch: Sticky-Cross-Fade auch auf Mobile aktiv (1:1 wie Desktop, nur flacher mit 420vh). Die Mobile-Sticky-Regeln liegen jetzt inline in custom.html unter .editorial-quote-section.is-multistage. Static-Fallback greift nur, wenn JS .is-static setzt (kein GSAP / reduced motion). */ .editorial-quote-section.is-multistage.is-static[data-sticky] { height: auto !important; min-height: auto !important; } .editorial-quote-section.is-multistage.is-static .editorial-quote-stage { position: relative !important; height: auto !important; } .editorial-quote-section.is-multistage.is-static .editorial-quote-inner { position: relative !important; inset: auto !important; opacity: 1 !important; transform: none !important; padding: 40px 16px !important; margin-bottom: 24px; border-top: 1px solid rgba(255,255,255,0.08); } .editorial-quote-section.is-multistage.is-static .editorial-quote-inner:first-of-type { border-top: none; } /* --- Custom Examples / Use-Cases --- */ #examples .grid, #examples [class*="grid-cols"] { grid-template-columns: 1fr !important; gap: 20px; } /* --- #process (single-stage editorial-quote on voice-agent) --- Only collapse when neither JS-Sticky-Path is engaged: weder die single- stage .qx-mobile-pin Choreographie noch die multistage Sticky-Cross-Fade (is-multistage). is-static greift den Static-Fallback ab. */ #process[data-sticky]:not(.qx-mobile-pin):not(.is-multistage), #process.editorial-quote-section[data-sticky]:not(.qx-mobile-pin):not(.is-multistage) { height: auto !important; min-height: auto !important; } #process:not(.qx-mobile-pin):not(.is-multistage) .editorial-quote-stage { position: relative !important; height: auto !important; } } /* ====== 7. WEBDESIGN ====== */ @media (max-width: 768px) { /* --- .cinema-track Sticky-Pin · 2026-05-17 --- Frueher: auf Mobile entstickifiziert. User-Wunsch: Sticky-Cross-Fade auch auf Mobile aktiv (gleiche Magic wie Desktop). Die alten override !important-Regeln wurden entfernt; das inline-CSS in webdesign.html unter @media (max-width:768px) (.cinema-track height:360vh + sticky) uebernimmt jetzt. Diese Section bleibt fuer eventuelle generische Anpassungen reserviert. */ /* --- #examples (project examples bento-grid) --- Existing rule setzt 2col mit 100px rows. Mit grid-row-span Werten von 5-8 entstehen tile-Höhen von 500-800px und Total 7000px+. Wir kollabieren auf single-column mit auto-rows damit Tiles natürliche Höhe haben. */ #examples .bento-grid { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; gap: 16px !important; } #examples .bento-grid .tile { grid-row: auto !important; grid-column: auto !important; aspect-ratio: 16 / 10; transform: none !important; } #examples .grid:not(.bento-grid), #examples [class*="grid-cols"]:not(.bento-grid) { grid-template-columns: 1fr !important; gap: 24px; } /* --- #process (process-cinema) --- */ #process.process-cinema { min-height: auto !important; } /* --- #meta-moment --- */ #meta-moment { padding: 60px 16px; } } /* ====== 8. ABOUT ====== */ @media (max-width: 768px) { /* --- Video-Overflow Fix --- .story__bg video hat scale(1.08) transform was 8% overflow erzeugt. Auf Mobile transform entfernen damit width=390 endgültig 390 ist. */ .story__bg video, .story video { transform: none !important; width: 100% !important; max-width: 100% !important; height: 100% !important; } /* --- Hero --- */ .hero-full { height: 100vh !important; min-height: 600px !important; } /* --- Story-Section: bg muss fixed bleiben, sonst scrollt der video-bg out of viewport (position:absolute relativ zu body = bei y=-1500 wenn man hingescrollt hat). GPU-accelerated translateZ glaettet den iOS-Safari address-bar jank ohne fixed zu verlieren. */ .story__bg { position: fixed !important; transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; will-change: opacity; } .story__item { min-height: auto !important; padding: 40px 16px !important; opacity: 1 !important; transform: none !important; } /* --- Founder section --- */ #founder .grid, #founder [class*="grid-cols"] { grid-template-columns: 1fr !important; gap: 24px; } } /* ====== 9. CONTACT ====== */ @media (max-width: 768px) { /* Form-Field Touch-Targets */ #contact input, #contact textarea, #contact select, .contact-form input, .contact-form textarea, .contact-form select { min-height: 48px; font-size: 16px; /* verhindert iOS-Zoom on focus */ padding: 12px 14px; } .contact-form button[type="submit"], #contact button[type="submit"] { width: 100%; min-height: 52px; font-size: 1.05rem; } /* Contact Info Grid */ #contact .grid, #contact [class*="grid-cols-2"] { grid-template-columns: 1fr !important; gap: 24px; } } /* ====== 10. LEGAL (agb / impressum / datenschutz) ====== */ @media (max-width: 768px) { .legal-page, body[data-page="legal"] { padding: 24px 16px; } .legal-page main, .legal-content { max-width: 100%; padding: 0; } .legal-content h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); } .legal-content h2 { font-size: 1.15rem; margin-top: 28px; } .legal-content p, .legal-content li { font-size: 0.95rem; line-height: 1.6; } } /* ============================================================ WEGBEGLEITER CAMERA-FOLLOW MOUNTAIN — V2 Sticky-pin 600vh, mountain pannt mit Trail-Tip nach unten weg, Beat-Cards fade in/out per progress-range, Progress-Badge "Etappe X/6" + Progress-Bar bottom. ============================================================ */ @media (max-width: 768px) { /* Re-enable sticky pin (override inline @media 1024px static rule) */ #wegbegleiter .wegbegleiter-pin { height: 600vh !important; position: relative !important; } #wegbegleiter .wegbegleiter-stage { /* V3: native position:sticky works now that html/body use overflow-x: clip instead of hidden. JS .wb-stage-pinned workaround removed. V4: flex-zentriert, damit der Berg mittig in der 100vh-Stage sitzt (statt oben zu kleben). */ position: sticky !important; top: 0 !important; height: 100vh !important; overflow: hidden !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Header is OUTSIDE the pin (scrolls past before sticky starts). Style only its mobile dimensions; the live "context" during sticky scroll is the wb-progress-badge "Etappe X / 6" overlay. */ #wegbegleiter .wegbegleiter-header { padding: 36px 16px 24px !important; text-align: left !important; } #wegbegleiter .wegbegleiter-headline { font-size: clamp(1.4rem, 6vw, 1.8rem) !important; line-height: 1.1 !important; margin: 6px 0 0 !important; } #wegbegleiter .wegbegleiter-lede { display: none !important; /* Mobile: lede ausblenden für mehr Mountain-Platz */ } /* V4 (2026-05-17): Berg komplett sichtbar wie auf Desktop. Kein Camera- Pan mehr — die ganze 1400x1100 Viewbox sitzt in der Stage, der Trail fuellt sich beim Scroll, und die Etappen-Cards kommen als grosses mittiges Overlay rein. wb-stage-inner kriegt das echte Aspect-Ratio zurueck (vorher absolute/inset:0 fuer Pan-Frame). */ #wegbegleiter .wb-stage-inner { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; /* Berg-Container nutzt volle Viewport-Breite. Hoehe via aspect-ratio 1400/1100. preserveAspectRatio="xMidYMid meet" im SVG sorgt fuer saubere Skalierung — nichts wird verzerrt. */ width: 100vw !important; height: auto !important; aspect-ratio: 1400 / 1100 !important; max-width: 100vw !important; max-height: 80vh !important; margin: 0 auto; overflow: visible; } #wegbegleiter .wegbegleiter-mountain { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; max-width: none !important; transform: none !important; will-change: auto; /* V2: kill heavy drop-shadow (80px blur Mobile-GPU killer) */ filter: none !important; -webkit-filter: none !important; } /* Heller Sichtbarkeits-Boost: Mountain-Faces auf Mobile deutlicher. Desktop nutzt very-subtle blue gradient; auf Mobile mit kleinem Viewport verschwimmt das ins Schwarze. */ #wegbegleiter .wegbegleiter-mountain .wb-face-right { fill: rgba(51, 85, 255, 0.35) !important; } #wegbegleiter .wegbegleiter-mountain .wb-face-left { fill: rgba(20, 30, 80, 0.55) !important; } #wegbegleiter .wegbegleiter-mountain .wb-peak-bg { fill: rgba(51, 85, 255, 0.12) !important; } #wegbegleiter .wegbegleiter-mountain .wb-trail { stroke: rgba(170, 192, 255, 0.95) !important; stroke-width: 4 !important; filter: drop-shadow(0 0 6px rgba(51, 85, 255, 0.6)) !important; } #wegbegleiter .wegbegleiter-mountain .wb-stop-glow { fill: rgba(51, 85, 255, 0.45) !important; } #wegbegleiter .wegbegleiter-mountain .wb-stop-dot { fill: rgba(255, 255, 255, 0.95) !important; stroke: #5577FF !important; stroke-width: 2 !important; } /* V4: Beat-Cards als grosses, mittiges Overlay vor dem Berg. Nur die aktive Card ist sichtbar (.is-on/.is-active). Positioniert relativ zur Sticky-Stage, nicht zum stage-inner — so steht die Card unter der Berg-Spitze und blockt nicht die Trail-Sicht. */ #wegbegleiter .wegbegleiter-pin .wb-beat { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; bottom: 4vh !important; width: min(86vw, 420px) !important; max-width: 86vw !important; margin: 0 !important; padding: 18px 20px 20px !important; background: rgba(8,10,18,0.82) !important; backdrop-filter: blur(12px) saturate(140%) !important; -webkit-backdrop-filter: blur(12px) saturate(140%) !important; border: 1px solid rgba(51,85,255,0.32) !important; border-radius: 16px !important; box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 40px rgba(51,85,255,0.18) !important; opacity: 0; transform: translate(-50%, 14px) !important; transition: opacity 420ms cubic-bezier(0.22,1,0.36,1), transform 480ms cubic-bezier(0.34,1.4,0.64,1) !important; pointer-events: none; z-index: 50; text-align: center !important; } #wegbegleiter .wegbegleiter-pin .wb-beat.is-on, #wegbegleiter .wegbegleiter-pin .wb-beat.is-active { opacity: 1; transform: translate(-50%, 0) !important; pointer-events: auto; } #wegbegleiter .wegbegleiter-pin .wb-beat[data-beat="6"] { background: linear-gradient(135deg, rgba(150,112,255,0.22), rgba(51,85,255,0.10)) !important; border: 1px solid rgba(150,112,255,0.5) !important; } #wegbegleiter .wegbegleiter-pin .wb-beat .wb-beat-num { font-size: 10px !important; letter-spacing: 0.22em !important; margin-bottom: 6px !important; } #wegbegleiter .wegbegleiter-pin .wb-beat .wb-beat-title { font-size: clamp(20px, 5.4vw, 26px) !important; margin: 0 0 8px !important; } #wegbegleiter .wegbegleiter-pin .wb-beat .wb-beat-text { font-size: clamp(13px, 3.6vw, 15px) !important; line-height: 1.55 !important; color: rgba(255,255,255,0.82) !important; } /* Progress-Bar auf Mobile ausgeblendet — der wachsende Trail im Berg ist das visuelle Feedback fuer den Scroll-Fortschritt. */ #wegbegleiter .wb-progress { display: none !important; } /* Progress badge */ #wegbegleiter .wb-progress-badge { position: absolute; top: 20px; right: 16px; padding: 5px 11px; background: rgba(51, 85, 255, 0.16); border: 1px solid rgba(170, 192, 255, 0.6); border-radius: 12px; font-size: 0.7rem; font-weight: 600; color: #aac0ff; z-index: 6; letter-spacing: 0.02em; } /* FAQ + Final-CTA: force always-visible on mobile. Reveal-pending IO can mis-fire on iOS Safari after a long sticky-pinned section above (heliont showcase with GSAP pin). Belt+suspenders: kill reveal-pending for these two sections on mobile. */ #faq .animate-on-scroll, #faq .animate-on-scroll.reveal-pending, #finalCta .animate-on-scroll, #finalCta .animate-on-scroll.reveal-pending, #finalCta .final-cta-inner, #faq .faq-item { opacity: 1 !important; transform: none !important; } /* Wegbegleiter Closer — Quote sticky-zentriert wie 70% pattern. Section ist 160vh hoch, Quote rastet bei ~35vh ein und bleibt 100vh sticky stehen, danach folgt 60vh Spacer bevor websites-reveal anfaengt. Verhindert Overlap mit der APROPOS-Stage. */ #wegbegleiter .wegbegleiter-closer { position: relative; min-height: 170vh; padding: 60px 20px 0 !important; text-align: center; } #wegbegleiter .wbq-thread { /* V4: Linie deutlich laenger, damit sie sich beim Scrollen sichtbar aufbaut (vorher 50vh = zu kurz, fuehlte sich wie "snap" an). */ height: 90vh !important; margin: 0 auto 40px !important; } #wegbegleiter .wegbegleiter-closer .wbq-quote-pin { position: sticky; top: 30vh; padding-bottom: 70vh; } #wegbegleiter .wegbegleiter-quote { font-size: clamp(24px, 6.6vw, 32px) !important; line-height: 1.32 !important; color: rgba(255,255,255,0.92) !important; max-width: 22ch !important; margin: 0 auto !important; letter-spacing: -0.012em !important; text-wrap: balance; } #wegbegleiter .wegbegleiter-author { margin-top: 22px !important; font-size: 10.5px !important; letter-spacing: 0.22em !important; color: rgba(255,255,255,0.42) !important; } } /* ============================================================ V2 PERF KILLS — Live-Ticker static, shadows capped, glow no-pulse ============================================================ */ @media (max-width: 768px) { /* Live-Ticker → static rotating lines (no marquee animation) */ #hero .task-feed-track, .hero-task-feed .task-feed-track { animation: none !important; transform: none !important; display: flex !important; flex-direction: column !important; gap: 6px; width: 100% !important; max-width: 100%; } #hero .task-feed-track > * { flex: 0 0 auto; text-align: center; opacity: 0; animation: mobile-ticker-cycle 12s linear infinite; } #hero .task-feed-track > *:nth-child(1) { animation-delay: 0s; } #hero .task-feed-track > *:nth-child(2) { animation-delay: 4s; } #hero .task-feed-track > *:nth-child(3) { animation-delay: 8s; } #hero .task-feed-track > *:nth-child(n+4) { display: none; } @keyframes mobile-ticker-cycle { 0%, 5% { opacity: 0; transform: translateY(8px); } 8%, 32% { opacity: 0.8; transform: translateY(0); } 35%, 100%{ opacity: 0; transform: translateY(-8px); } } /* Box-Shadow blur-radius cap auf 20px für card-elements */ .outcome-card, .solution-block, .solution-inner, .roi-card, .pricing-card, .has-glow-card, .ity-card, [class*="card"]:not(.scene-hotspot-card) { box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important; } .laptop-spotlight { filter: blur(20px) !important; opacity: 0.4 !important; } /* Glow-Card pulse off */ .has-glow-card, .has-glow-card.glow-visible { animation: none !important; box-shadow: 0 0 0 1px rgba(51,85,255,0.25) inset, 0 4px 16px rgba(0,0,0,0.2) !important; } } /* ============================================================ HEADING-GLOW MOBILE RESTORE (V2) V1 hat alle filter:blur global gekillt. Heading-Auras werden hier explizit zurückgebracht mit reduzierter Blur (20px statt 90px) und ohne pulse-animation. Performant. ============================================================ */ @media (max-width: 768px) { /* Index-Hero behält "ohne Glow" Regel — Memory: feedback_no_heading_glow */ #hero .has-glow-heading::before, #hero h1::before, #hero h2::before { display: none !important; } /* Section-Headings + Voice-Agent/Core Hero: Glow zurück */ .has-glow-heading::before { display: block !important; filter: blur(20px) !important; width: 110% !important; height: 150% !important; animation: none !important; opacity: 0.4 !important; } .has-glow-heading.glow-visible::before { opacity: 0.4 !important; transform: translate(-50%, -50%) scale(1) !important; animation: none !important; } } /* ============================================================ INDEX HERO V2 — größere Headline, kompakte Status-Lines ============================================================ */ @media (max-width: 768px) { /* V5 (2026-05-18): Hero-Headline auf Mobile so gross wie moeglich — NUR auf index.html (Editorial-Hero mit .hero-editorial Container). Andere Seiten (voice-agent, core, custom, webdesign, about, contact) haben "gewoehnliche" h1-Headlines mit Tailwind text-4xl/5xl — die sollen unveraendert bleiben. Scope: .hero-editorial > .hero-headline. */ #hero .hero-editorial .hero-headline { font-size: clamp(68px, 18.5vw, 108px) !important; line-height: 0.92 !important; letter-spacing: -0.04em !important; } #hero .hero-editorial .hero-headline-line-2 { padding-left: clamp(24px, 7vw, 56px) !important; } #hero .hero-editorial { top: clamp(120px, 18vh, 170px) !important; left: 18px !important; right: 18px !important; max-width: none !important; } #hero .hero-subline, #hero h1 + p { font-size: 1.05rem !important; margin-top: 18px !important; line-height: 1.45 !important; } /* CTA-Button-Padding mobile-comfortable */ #hero a[href*="diagnose"], #hero .hero-cta { padding: 14px 22px !important; font-size: 0.95rem; } /* ---------------------------------------------------------- FINAL-CTA Button-Glow auf Mobile. Desktop nutzt einen blur(22px)-Pulse-Layer, der durch unsere globale `filter: none !important` Regel auf Mobile gekillt wird. Ersatz: box-shadow-basierter Glow direkt am Button (filter-frei, kein extra Layer, kein GPU-Cost). ---------------------------------------------------------- */ /* Final-CTA Button-Glow auf Mobile. Vier Button-Wrapper-Varianten: - index.html #finalCta .final-cta-button-wrap > .hero-cta - voice-agent.html #final-cta .final-cta-button-wrap > .hero-cta - core/custom/webdesign #final-cta .orbital-glow.pill > .hero-cta Wir treffen alle via .hero-cta innerhalb dieser Wrapper. */ .final-cta-button-wrap .hero-cta, #final-cta .orbital-glow .hero-cta, #finalCta .orbital-glow .hero-cta { box-shadow: 0 0 0 1px rgba(51, 85, 255, 0.55), 0 0 24px rgba(51, 85, 255, 0.45), 0 0 64px rgba(51, 85, 255, 0.30), 0 8px 24px rgba(0, 0, 0, 0.35) !important; animation: finalCtaGlowMobile 3.2s ease-in-out infinite !important; } /* Wrapper-eigene Glow-Layer wegnehmen — der Glow sitzt jetzt direkt am Button. Sonst Doppel-Glow oder geclippte Pseudo-Backgrounds. */ .final-cta-button-wrap .final-cta-pulse, #final-cta .orbital-glow .orb-wrap, #finalCta .orbital-glow .orb-wrap { display: none !important; } @keyframes finalCtaGlowMobile { 0%, 100% { box-shadow: 0 0 0 1px rgba(51, 85, 255, 0.55), 0 0 22px rgba(51, 85, 255, 0.38), 0 0 56px rgba(51, 85, 255, 0.22), 0 8px 22px rgba(0, 0, 0, 0.35); } 50% { box-shadow: 0 0 0 1px rgba(51, 85, 255, 0.75), 0 0 32px rgba(51, 85, 255, 0.58), 0 0 80px rgba(51, 85, 255, 0.38), 0 10px 28px rgba(0, 0, 0, 0.4); } } /* Live-Ticker container (CSS-cycle siehe V2 PERF KILLS block) */ .task-feed, #hero .task-feed { margin-top: 32px; height: 64px; overflow: hidden; position: relative; } } /* ============================================================ ROI COMPACT V2 — Pattern B (2x2 slider-grid + stacked result-card) ============================================================ */ @media (max-width: 768px) { #roi { padding: 60px 0 !important; background: #000 !important; } /* Premium deep-black card on mobile: pitch-black, hard royal-blue rim, no gradient overlay */ #roi .roi-card, #roi [class*="roi-card"] { padding: 26px 18px !important; background: #050505 !important; border: 1px solid rgba(51, 85, 255, 0.22) !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset, 0 24px 60px rgba(0,0,0,0.65), 0 0 40px rgba(51, 85, 255, 0.12) !important; border-radius: 20px !important; } #roi .roi-card::before { display: none !important; } /* Inner result-box: even deeper black with subtle royal-blue rim */ #roi .roi-result-box, #roi [class*="roi-result-box"] { background: #000 !important; border: 1px solid rgba(51, 85, 255, 0.18) !important; border-radius: 14px !important; padding: 18px 16px !important; } /* Branche-Pills: horizontal scrollable row statt wrap (sah gequetscht aus). */ #roi .roi-branche-row { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; margin-bottom: 22px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 2px 8px !important; margin-left: -2px !important; margin-right: -2px !important; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } #roi .roi-branche-row::-webkit-scrollbar { display: none; } #roi .roi-branche-label { flex: 0 0 auto !important; align-self: center; padding-right: 6px; } #roi .roi-branche-pill { padding: 8px 14px !important; font-size: 0.78rem !important; flex: 0 0 auto !important; white-space: nowrap !important; } /* Slider-Container: 2x2 Grid. Die Slider-Spalte ist das erste
innerhalb von #roi .grid (die mit den 4 .roi-slider-row Kindern). Wir machen die selbst 2x2. */ #roi .roi-controls, #roi .grid > div:first-child:has(.roi-slider-row), #roi .grid > div:has(> .roi-slider-row) { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 18px 12px !important; margin-bottom: 0 !important; } /* Slider-rows inside the 2x2: no own margins */ #roi .roi-slider-row { margin-bottom: 0 !important; } /* Each slider-row label compact, clean: text on top, value below, large + bright */ #roi .roi-slider-label { flex-direction: column !important; align-items: flex-start !important; flex-wrap: nowrap !important; gap: 4px !important; margin-bottom: 8px !important; } #roi .roi-slider-label .label-text { font-size: 0.72rem !important; line-height: 1.3 !important; color: rgba(255,255,255,0.55) !important; opacity: 1 !important; font-weight: 500 !important; flex: 0 0 auto !important; letter-spacing: 0.01em; } #roi .roi-slider-label .label-value { font-size: 1.55rem !important; font-weight: 800 !important; color: #ffffff !important; background: none !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; flex: 0 0 auto !important; line-height: 1 !important; text-shadow: none; font-variant-numeric: tabular-nums; } #roi .roi-slider-label .label-value .unit { color: rgba(255,255,255,0.6) !important; font-size: 0.8rem !important; font-weight: 500 !important; margin-left: 3px; } #roi label { font-size: 0.7rem !important; opacity: 0.65; letter-spacing: 0.04em; margin-bottom: 4px; } /* The label-text inside .roi-slider-label is the dim "Stunden pro Woche…" caption — only that should be muted, not the value next to it. Applying opacity to the whole .roi-slider-label container was greying out the bold number ("10 h") and made it visibly off-white compared to the result-box values. Mute only the caption span. */ #roi .roi-slider-label { font-size: 0.7rem !important; letter-spacing: 0.04em; margin-bottom: 4px; } #roi .roi-slider-label .label-text { opacity: 0.65; } #roi .roi-slider-value, #roi [class*="slider-value"] { font-size: 0.95rem !important; font-weight: 600; margin-bottom: 4px; } #roi input[type="range"] { width: 100% !important; height: 16px; appearance: none; -webkit-appearance: none; background: transparent; } #roi input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: rgba(51,85,255,0.2); border-radius: 2px; } #roi input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #3355FF; margin-top: -7px; box-shadow: 0 2px 8px rgba(51,85,255,0.4); } /* Result-Card compact */ #roi .roi-output, #roi [class*="roi-result"], #roi .roi-summary { padding: 18px !important; text-align: center; border-radius: 14px; } #roi .roi-output .big-number, #roi [class*="result-amount"] { font-size: clamp(2.2rem, 9vw, 3rem) !important; line-height: 1; } #roi .roi-output-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px; margin-top: 12px; } } /* ============================================================ PAIN SECTION V3 — Desktop-Sticky-Choreografie 1:1 auf Mobile User-Feedback nach V2: "wie auf dem Desktop, sticky Mode wo das in der Mitte ist, dann kommen die Karten so runter gefahren". Wir lassen Desktop-GSAP initPainScene laufen und passen NUR Typografie + Card-Sizing für Mobile-Viewport an. ============================================================ */ @media (max-width: 768px) { /* Headline: kleinere Schrift damit sie auf Mobile in den 100vh sticky reinpasst ohne zu overflowen. Behält Desktop's flex-center alignment. */ #ity-heading-sticky h2, #ity-heading-sticky .hero-headline-text { font-size: clamp(1.8rem, 8.5vw, 2.6rem); line-height: 1.0; letter-spacing: -0.02em; } #ity-heading-sticky .bracket-label { margin-bottom: 10px; font-size: 0.7rem; } #ity-heading-sticky .ity-lede { font-size: 0.92rem; margin-top: 14px; opacity: 0.7; line-height: 1.45; max-width: 90vw; } /* Card-Spalten-Wechsel auf Mobile: alle Cards center-aligned + 88% width. Desktop's align-start/end (75% width left/right) ist auf 390px zu eng. */ #is-this-you .ity-card-row.align-start, #is-this-you .ity-card-row.align-end, #is-this-you .ity-card-row.align-center { justify-content: center !important; } #is-this-you .ity-card { width: 92% !important; max-width: 340px !important; } /* Cards-Flow tighter gaps für Mobile (50px statt 80px) — passt mehr in den scroll-Bereich rein ohne Section ewig zu machen. */ #ity-cards-flow { gap: 50px !important; padding-bottom: 12vh; } } /* ============================================================ STUDIO-TOUR V2 — Image-dominant, auto-rotate, tap-pills ============================================================ */ @media (max-width: 768px) { /* Studio-Stage: kein Tour-Mode, statische Anzeige. V3: aspect-ratio 4/5 statt 4/3 damit Bild deutlich größer wirkt — User Feedback "geht das Bild nicht größer? viel Leerfläche". 16:9 source-image wird via object-fit:cover auf 4:5 zugeschnitten (Sides minimal beschnitten, Action bleibt zentriert). */ #services .studio-stage { border-radius: 16px; overflow: hidden; height: auto !important; /* Override alte index.html-Fallback-Regel min-height:560px die das aspect-ratio sabotiert. Mit min-height:0 greift 4/5 echt. */ min-height: 0 !important; aspect-ratio: 4 / 5 !important; padding: 0 !important; position: relative; } #services .studio-stage img, #services .streetview-scene img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } /* Image container — dominant */ #services .studio-viewport, #services .streetview-stack { position: relative !important; width: 100% !important; height: 100% !important; } /* Scenes: nur aktive zeigen, kein transform-stack */ #services .streetview-scene { position: absolute !important; inset: 0; opacity: 0; transition: opacity 600ms ease; pointer-events: none; } #services .streetview-scene.is-active { opacity: 1; pointer-events: auto; } /* Scene-Overlay top-left = Raum-Pill */ #services .scene-overlay--top-left { display: block !important; top: 12px !important; left: 12px !important; right: auto !important; bottom: auto !important; padding: 4px 9px; background: rgba(0,0,0,0.55); border-radius: 8px; font-size: 0.65rem; letter-spacing: 0.1em; } /* Scene-Overlay top-right = Product-Badge */ #services .scene-overlay--top-right { display: block !important; top: 12px !important; right: 12px !important; bottom: auto !important; left: auto !important; padding: 4px 9px; background: #3355FF; border-radius: 8px; font-size: 0.65rem; font-weight: 600; } /* Picture-Wrapper transparent halten, damit width/height:100% des img gegen .streetview-scene-position absolute greifen. */ #services .streetview-scene picture { display: contents; } /* Hotspots — statische dots, klein. Position kommt aus inline-CSS-Vars --mt / --ml (Mobile-kalibriert auf 819x1024 4:5-Crop). Fallback bleibt die Desktop-Position falls keine var gesetzt. */ #services .scene-hotspot { width: 24px !important; height: 24px !important; top: var(--mt) !important; left: var(--ml) !important; } #services .scene-hotspot-pulse, #services .scene-hotspot-card { display: none !important; } /* Bottom-Overlay-Tag auf Mobile nach OBEN routen — die Pegman-Rail belegt unten 60+ px und ueberlappt mit jedem Bottom-Overlay. Scene 4 + 5 nutzen --bottom-left/right und haben oben Platz. */ #services .scene-overlay--bottom-left, #services .scene-overlay--bottom-right { display: inline-flex !important; top: 12px !important; left: 12px !important; right: auto !important; bottom: auto !important; max-width: calc(100% - 24px) !important; padding: 4px 9px !important; background: rgba(0,0,0,0.62) !important; border-radius: 8px !important; font-size: 0.65rem !important; line-height: 1.3 !important; } #services .scene-overlay--bottom-left .scene-overlay-label, #services .scene-overlay--bottom-right .scene-overlay-label { font-size: 0.55rem !important; padding-right: 8px !important; margin-right: 0 !important; } #services .scene-overlay--bottom-left .scene-overlay-text, #services .scene-overlay--bottom-right .scene-overlay-text { font-size: 0.65rem !important; line-height: 1.3 !important; } /* Pills komplett raus auf Mobile (Pegman-Rail uebernimmt). */ #services .mobile-tour-pills, #services .mobile-tour-pill { display: none !important; } /* Pegman-Rail clean: nur Dots + Pegman, Counter/Raumname weg. */ #services .sv-rail-meta { display: none !important; } #services .streetview-rail { padding: 10px 16px 12px !important; bottom: 10px !important; background: rgba(8,10,16,0.6) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } /* Pegman-Pfeile (prev/next) auf Mobile dezenter & kleiner */ #services .streetview-arrow { opacity: 0.7; } /* ===== HOTSPOT-FLIPCARD (Mobile) ============================ Tap auf einen Hotspot oeffnet eine Text-Karte die das Szenenbild ersetzt. Image + Overlay dimmen + blurren leicht im Hintergrund, die Karte legt sich darueber. Tap-anywhere + Close-X schliessen. ============================================================ */ #services .streetview-scene.has-open-card > picture, #services .streetview-scene.has-open-card > .scene-overlay, #services .streetview-scene.has-open-card > .scene-hotspot { opacity: 0; pointer-events: none; transition: opacity 0.32s cubic-bezier(0.22,1,0.36,1); } /* Wenn irgendeine Szene eine offene Card hat, Prev/Next-Pfeile ausblenden (Pegman-Rail bleibt zur Navigation sichtbar). */ #services .studio-viewport:has(.streetview-scene.has-open-card) .streetview-arrow { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.3s ease; } /* Flipcard selbst */ #services .scene-mobile-flipcard { position: absolute; inset: 0; z-index: 25; overflow: hidden; cursor: pointer; background: radial-gradient(ellipse at 18% 20%, rgba(51,85,255,0.22), transparent 55%), radial-gradient(ellipse at 82% 90%, rgba(120,80,255,0.16), transparent 50%), linear-gradient(160deg, rgba(8,10,16,0.96) 0%, rgba(14,18,32,0.98) 100%); color: #fff; border-radius: inherit; display: flex; flex-direction: column; justify-content: center; padding: 28px 22px 78px; animation: flipcardIn 0.36s cubic-bezier(0.22,1,0.36,1) both; } @keyframes flipcardIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } #services .scene-flipcard-glow { position: absolute; top: -40%; left: 50%; width: 220%; height: 70%; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(51,85,255,0.35), transparent 60%); pointer-events: none; filter: blur(10px); opacity: 0.7; } #services .scene-flipcard-grain { position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: 0.18; } #services .scene-flipcard-close { position: absolute; top: 12px; right: 12px; z-index: 4; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; -webkit-tap-highlight-color: transparent; } #services .scene-flipcard-close:hover, #services .scene-flipcard-close:focus-visible { background: rgba(51,85,255,0.45); color: #fff; transform: scale(1.06); outline: none; } #services .scene-flipcard-close svg { width: 18px; height: 18px; display: block; } #services .scene-flipcard-inner { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 14px; } #services .scene-flipcard-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: #6c8cff; display: inline-flex; align-items: center; gap: 8px; } #services .scene-flipcard-eyebrow::before { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, #6c8cff); } #services .scene-flipcard-body { font-family: 'Montserrat', sans-serif; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.92); font-weight: 400; margin: 0; letter-spacing: -0.005em; } #services .scene-flipcard-metric { margin-top: 6px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; background: linear-gradient(135deg, rgba(51,85,255,0.18), rgba(51,85,255,0.04)); font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.04em; color: rgba(255,255,255,0.92); text-transform: none; line-height: 1.4; } } /* ============================================================= HOTSPOT EDIT MODE (?hsedit=1) — dev tooling, nicht in Prod aktiv ============================================================= */ @media (max-width: 768px) { #services .scene-hotspot.is-edit-mode { opacity: 1 !important; touch-action: none; cursor: grab; } #services .scene-hotspot.is-edit-mode .scene-hotspot-icon { background: #ff7a3d !important; box-shadow: 0 0 0 2.5px rgba(0,0,0,0.55), 0 0 18px rgba(255,122,61,0.8) !important; } #services .scene-hotspot.is-edit-mode.is-active-edit .scene-hotspot-icon { background: #00ffaa !important; transform: translate(-50%, -50%) scale(1.3) !important; } #services .scene-hotspot.is-edit-mode.is-dragging { cursor: grabbing; z-index: 50; } /* Im Edit-Mode immer alle Hotspots sichtbar (auch in inaktiven Szenen) */ #services .streetview-scene .scene-hotspot.is-edit-mode { opacity: 1 !important; pointer-events: auto !important; } } /* Banner-UI overlay — fixed top, immer on top */ #hotspot-edit-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 99999; background: rgba(8,10,16,0.96); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 12px; padding: 10px 14px 12px; border-bottom: 1px solid rgba(0,255,170,0.35); box-shadow: 0 8px 30px rgba(0,0,0,0.6); } #hotspot-edit-banner .hsedit-header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } #hotspot-edit-banner strong { color: #00ffaa; letter-spacing: 0.16em; margin-right: auto; } #hotspot-edit-banner button { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; padding: 5px 10px; font: inherit; cursor: pointer; } #hotspot-edit-banner button:hover { background: rgba(0,255,170,0.18); border-color: #00ffaa; } #hotspot-edit-banner #hsedit-exit { color: #ff7a3d; border-color: rgba(255,122,61,0.4); } #hotspot-edit-banner .hsedit-status { margin-top: 8px; color: rgba(255,255,255,0.85); font-size: 11px; } #hotspot-edit-banner .hsedit-status code { background: rgba(0,255,170,0.12); padding: 2px 6px; border-radius: 4px; color: #00ffaa; } #hotspot-edit-banner .hsedit-list { margin-top: 6px; font-size: 10.5px; } #hotspot-edit-banner .hsedit-list summary { cursor: pointer; color: rgba(255,255,255,0.6); } #hotspot-edit-banner .hsedit-list pre { margin: 6px 0 0; padding: 8px 10px; background: rgba(0,0,0,0.4); border-radius: 4px; max-height: 30vh; overflow: auto; color: rgba(255,255,255,0.85); white-space: pre; }