/* ============================================================================ miraTEQ Hero V3 — "Glass Atelier" CSS ---------------------------------------------------------------------------- Compiled from prototype/hero-v3/: - style.css (hero base + Hero V3 components) - variants/hybrid.css (FLOATING CLUSTER + glass base + halos) - variants/glass-light.css (Liquid Glass + 4 Tuning Layers + Mobile 3D-Shuffle Carousel) All CSS custom properties are scoped to body.is-glass-light so the live site's global :root remains untouched. Hero-specific class names (.tile, .tile-wrap, .word-line, .float-chip, etc.) are V3-only and don't collide with the existing live-site CSS. Loaded by index-com.html via with a build.py-managed cache-bust hash. Critical above-fold subset is also inlined in for first-paint without FOUC. ============================================================================ */ body.is-glass-light { /* Brand */ --primary: #6592E6; --primary-dark: #2260D2; --primary-glow: rgba(101, 146, 230, 0.35); /* Thai-Premium Palette (warm, not cold-corporate) */ --bg-sand: #faf6f0; --bg-cream: #f4ede0; --bg-warm-mid: #ede4d2; --gold: #d4a574; --gold-deep: #b8895a; --jade: #8baa9b; --jade-deep: #5e7d6f; --dark: #1a2540; --darker: #0f172a; /* Text */ --text-strong: #0f172a; --text-dark: #1f2937; --text-mid: #4b5563; --text-soft: #6b7280; --text-light: #94a3b8; /* Channel brand colors (for tiles) */ --google-blue: #4285f4; --google-red: #ea4335; --google-yellow: #fbbc04; --google-green: #34a853; --google-text: #202124; --google-link: #1a0dab; --google-meta: #5f6368; --line-green: #06C755; --line-bg: #c0d3dd; --fb-blue: #1877F2; /* Layout */ --container: 1240px; --radius: 14px; --radius-lg: 18px; --radius-xl: 26px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Fonts */ --font-main: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif; --font-thai: 'Noto Sans Thai', 'Sukhumvit Set', 'Tahoma', sans-serif; } /* ============================================================================ 1. Hero base (extracted from prototype/hero-v3/style.css line 74+) ============================================================================ */ /* ========================================================================== HERO SECTION ========================================================================== */ #hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: 5rem 0 3rem; isolation: isolate; background: var(--bg-sand); } /* Layer 0: Mesh-Gradient WebGL canvas (desktop) */ .hero-mesh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; /* Welle 5.1c: Soft fade-in nach erstem WebGL-Frame — Stripe-Pattern. Klasse `.is-loaded` wird in mesh-caustics.js gesetzt sobald der erste Frame gerendert ist. Verhindert harten "Pop" beim Page-Load und macht das Ambient unauffälliger. */ opacity: 0; transition: opacity 800ms ease-out; /* CSS-only fallback: warm radial gradient layers */ background: radial-gradient(ellipse 65% 55% at 78% 42%, rgba(101, 146, 230, 0.18) 0%, transparent 60%), radial-gradient(ellipse 55% 45% at 22% 68%, rgba(212, 165, 116, 0.16) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 60% 88%, rgba(139, 170, 155, 0.14) 0%, transparent 55%), linear-gradient(135deg, #fdfcfa 0%, #f6f0e6 40%, #ede4d2 75%, #e9eff8 100%); animation: meshDrift 24s ease-in-out infinite alternate; } .hero-mesh.is-loaded { opacity: 1; } @keyframes meshDrift { 0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; } 100% { background-position: 6% 4%, -4% 6%, 4% -3%, 0% 0%; } } /* Layer 1: Lai-Thai Texture Overlay */ .hero-lai-thai { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); background-size: 320px 320px; background-repeat: repeat; animation: laiThaiDrift 90s linear infinite; } @keyframes laiThaiDrift { from { background-position: 0 0; } to { background-position: 320px 320px; } } /* Layer 2: Cursor-following spotlight (Cursor.com / Aceternity pattern) */ .hero-spotlight { position: fixed; pointer-events: none; z-index: 2; width: 600px; height: 600px; border-radius: 50%; transform: translate3d(-50%, -50%, 0); background: radial-gradient(circle at center, rgba(101, 146, 230, 0.10) 0%, rgba(212, 165, 116, 0.06) 30%, transparent 60%); opacity: 0; transition: opacity 0.4s ease-out; mix-blend-mode: screen; will-change: transform, opacity; } .hero-spotlight.is-active { opacity: 1; } /* Layer 3: Hero Container */ .hero-container { position: relative; z-index: 3; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media (min-width: 1024px) { .hero-container { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 3.5rem; } } /* ========================================================================== LEFT — Hero Text ========================================================================== */ .hero-text { position: relative; perspective: 1200px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 1rem; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(101, 146, 230, 0.22); border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: var(--primary-dark); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 1.6rem; box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 12px rgba(15, 23, 42, 0.04); } .eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-green); box-shadow: 0 0 0 4px rgba(6, 199, 85, 0.18); animation: pulseDot 2.4s ease-in-out infinite; } @keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 4px rgba(6, 199, 85, 0.18); transform: scale(1); } 50% { box-shadow: 0 0 0 9px rgba(6, 199, 85, 0.04); transform: scale(1.1); } } /* H1 — three statement words, always visible */ .hero-h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.05; font-weight: 800; color: var(--darker); letter-spacing: -0.03em; margin-bottom: 1.6rem; } .word-line { display: block; white-space: nowrap; position: relative; cursor: default; /* Quick decay when leaving active so two words can't share the gold-sweep */ transition: color 0.15s var(--ease-out), transform 0.15s var(--ease-out); transform-origin: left center; } .word-text { display: inline-block; background-image: linear-gradient(105deg, var(--darker) 0%, var(--darker) 40%, var(--gold-deep) 50%, var(--darker) 60%, var(--darker) 100%); background-size: 220% 100%; background-position: 100% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; /* Default = quick fade-out. Only the becoming-active word gets the slow in-sweep (rule below). Without this split, leaving + entering words overlap their 0.6s transitions and the gold appears to travel through both lines at once. */ transition: background-position 0.15s var(--ease-out); } .word-dot { display: inline-block; /* Default = Headline-Schwarz (--darker = #0f172a). Aktiv-State überschreibt auf die jeweilige Brand-Farbe (Blau/Grün/Gold) via data-word-Rules unten. */ color: var(--darker); font-weight: 900; margin-left: 0.05em; transition: color 0.15s var(--ease-out), transform 0.15s var(--ease-out); } /* Active state: only one word is lit at a time. The slow transitions live here so the in-sweep is smooth, while the out-sweep (above) is quick. */ .word-line.is-active .word-text, .word-line:hover .word-text { background-position: 0% 50%; transition: background-position 0.5s var(--ease-out); } .word-line.is-active .word-dot { color: var(--primary); transform: scale(1.25); transition: color 0.5s var(--ease-out), transform 0.5s var(--ease-out); } .word-line.is-active { transform: translateX(4px); transition: color 0.5s var(--ease-out), transform 0.5s var(--ease-out); } .word-line:hover .word-dot { color: var(--primary-dark); transform: scale(1.2); transition: color 0.5s var(--ease-out), transform 0.5s var(--ease-out); } .hero-sub { font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6; color: var(--text-mid); margin-bottom: 0.5rem; max-width: 42ch; } .hero-sub strong { color: var(--text-strong); font-weight: 700; } /* Channels line — brand-pulse synced with state-machine */ .hero-channels { font-size: clamp(0.95rem, 1.2vw, 1.05rem); line-height: 1.5; color: var(--text-soft); margin-bottom: 1.8rem; letter-spacing: 0.005em; } .brand { display: inline-block; padding: 0 0.05em; font-weight: 600; color: var(--text-dark); position: relative; transition: color 0.5s var(--ease-out), text-shadow 0.5s var(--ease-out), transform 0.5s var(--ease-out); } .brand em { font-style: normal; font-weight: 800; letter-spacing: -0.005em; } .brand-google.is-pulse { color: var(--google-blue); text-shadow: 0 0 22px rgba(66, 133, 244, 0.55), 0 0 4px rgba(66, 133, 244, 0.4); transform: translateY(-1px); } .brand-line.is-pulse { color: var(--line-green); text-shadow: 0 0 22px rgba(6, 199, 85, 0.55), 0 0 4px rgba(6, 199, 85, 0.4); transform: translateY(-1px); } .brand-fb.is-pulse { color: var(--fb-blue); text-shadow: 0 0 22px rgba(24, 119, 242, 0.55), 0 0 4px rgba(24, 119, 242, 0.4); transform: translateY(-1px); } /* CTA — magnetic, always-glowing */ .hero-cta { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; padding: 1.1rem 1.9rem; background: var(--darker); color: white; font-weight: 700; font-size: 1rem; border-radius: 14px; isolation: isolate; transition: transform 0.4s var(--ease-out), background 0.3s, box-shadow 0.3s; box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 10px 24px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.10); overflow: hidden; } .cta-arrow { display: inline-flex; align-items: center; transition: transform 0.3s var(--ease-out); } .cta-glow { position: absolute; inset: -2px; z-index: -1; border-radius: 16px; background: conic-gradient( from 0deg, transparent 0deg, var(--gold) 60deg, var(--primary) 120deg, var(--jade) 180deg, var(--gold) 240deg, transparent 300deg ); opacity: 0; filter: blur(14px); animation: ctaGlowSpin 6s linear infinite; transition: opacity 0.5s ease; } .hero-cta:hover { transform: translateY(-2px); background: var(--primary-dark); box-shadow: 0 14px 32px rgba(34, 96, 210, 0.4), 0 4px 10px rgba(15, 23, 42, 0.15); } .hero-cta:hover .cta-arrow { transform: translateX(5px); } .hero-cta:hover .cta-glow { opacity: 0.7; } @keyframes ctaGlowSpin { to { transform: rotate(360deg); } } .hero-trust { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.4rem; font-size: 0.83rem; color: var(--text-soft); } .trust-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-green); box-shadow: 0 0 0 3px rgba(6, 199, 85, 0.18); animation: pulseDot 2.4s ease-in-out infinite; } /* ========================================================================== RIGHT — Hero Stage (3 Bento Tiles) ========================================================================== */ .hero-stage { position: relative; width: 100%; height: 700px; perspective: 1800px; perspective-origin: 50% 50%; } .stage-beams { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; } /* Tile base — used by all 3 */ .tile { position: absolute; background: white; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset, 0 24px 56px -12px rgba(15, 23, 42, 0.20), 0 10px 22px -8px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06); transform-origin: center center; transform-style: preserve-3d; transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); will-change: transform; } .tile.is-paired { box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 0 0 1px rgba(101, 146, 230, 0.4), 0 0 38px rgba(101, 146, 230, 0.32), 0 32px 64px -12px rgba(15, 23, 42, 0.28), 0 14px 26px -8px rgba(15, 23, 42, 0.14); z-index: 20; } /* Animated glow border (Cursor.com pattern) */ .tile-glow-border { position: absolute; inset: -1px; z-index: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient( from var(--glow-angle, 0deg), transparent 0deg, var(--glow-color, var(--primary)) 25deg, transparent 80deg ); -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.55; animation: glowSpin 6s linear infinite; pointer-events: none; } .tile-glow-line { --glow-color: var(--line-green); animation-duration: 7s; animation-delay: -2s; } .tile-glow-jade { --glow-color: var(--jade-deep); animation-duration: 8s; animation-delay: -4s; } @property --glow-angle { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes glowSpin { to { --glow-angle: 360deg; } } /* Fallback for browsers without @property */ @supports not (background: conic-gradient(from 0deg, red, blue)) { .tile-glow-border { display: none; } } /* Tile positions (desktop) */ .tile-google { top: 20px; left: 0; width: 320px; z-index: 4; } .tile-message { top: 230px; left: 200px; width: 310px; z-index: 6; } .tile-booking { top: 460px; left: 380px; width: 290px; z-index: 5; } /* Tile bar (header for all tiles) */ .tile-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.95rem; font-size: 0.78rem; font-weight: 500; border-bottom: 1px solid rgba(0,0,0,0.05); } .bar-browser { background: #f6f6f7; color: var(--text-soft); } .bar-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; } .dot-r { background: #ff5f57; } .dot-y { background: #febc2e; } .dot-g { background: #28c840; } .bar-url { margin-left: auto; margin-right: auto; background: white; padding: 0.32rem 0.75rem; border-radius: 999px; font-size: 0.7rem; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-soft); border: 1px solid rgba(0,0,0,0.04); } .tile-body { position: relative; z-index: 1; background: white; } /* ========================================================================== TILE 1 — Google SERP ========================================================================== */ .tile-body-google { padding: 1rem 1rem 0.85rem; } .g-logo { text-align: center; font-weight: 500; font-size: 1.45rem; letter-spacing: -0.04em; line-height: 1; margin: 0.3rem 0 0.85rem; } .g-search { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem; border: 1px solid #dfe1e5; border-radius: 22px; background: white; font-size: 0.82rem; color: var(--google-text); margin-bottom: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04); font-family: var(--font-thai), var(--font-main); } .g-search-icon { width: 13px; height: 13px; flex-shrink: 0; } .g-search-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-main); min-width: 0; flex: 1 1 0; } /* Blinking caret right after typing text */ .g-cursor { display: inline-block; width: 1.5px; height: 0.95em; background: var(--google-text); margin-left: 1px; vertical-align: middle; animation: caretBlink 0.85s steps(2) infinite; transform: translateY(-1px); } @keyframes caretBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .g-cursor.is-hidden { opacity: 0; animation: none; } .g-result { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.4rem 0.45rem; border-radius: 8px; position: relative; margin-bottom: 0.4rem; transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); } .g-result.is-leaving { opacity: 0; transform: translateY(-6px); } .g-result.is-entering { opacity: 0; transform: translateY(8px); } .g-result-top { background: linear-gradient(135deg, rgba(101,146,230,0.10), rgba(212,165,116,0.06)); box-shadow: 0 0 0 1px rgba(101,146,230,0.22); } .g-fav { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #47B5ED); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.7rem; flex-shrink: 0; } .g-fav-dim { background: #cbd5e1; } .g-meta { flex: 1; min-width: 0; } .g-site { font-size: 0.68rem; color: var(--google-meta); line-height: 1.3; } .g-bread { color: #6b7280; } .g-title { font-size: 0.84rem; font-weight: 500; color: var(--google-link); line-height: 1.3; margin-top: 0.1rem; /* Welle 5.22.3 — Auf 1 Zeile mit Ellipsis begrenzen. Sonst sprengen lange Titel (z.B. "Khao Soi Imperator · Local favourite") die fixe Karten-Höhe und der Stats-Bar unten wird abgeschnitten. Google-SERP-Style. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .g-snippet { font-size: 0.72rem; color: #4d5156; line-height: 1.4; margin-top: 0.18rem; font-family: var(--font-thai), var(--font-main); } .g-badge { position: absolute; top: -6px; right: -4px; background: linear-gradient(135deg, var(--primary), #47B5ED); color: white; font-size: 0.6rem; font-weight: 800; padding: 0.15rem 0.5rem; border-radius: 999px; box-shadow: 0 4px 10px rgba(101,146,230,0.4); animation: badgePulse 3s ease-in-out infinite; } @keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } /* Tile stat row (live counter) */ .tile-stat { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.85rem; margin-top: 0.55rem; background: linear-gradient(135deg, rgba(101,146,230,0.08), rgba(212,165,116,0.06)); border-radius: 10px; border: 1px solid rgba(101,146,230,0.18); font-size: 0.78rem; } .stat-icon { font-size: 1rem; flex-shrink: 0; } .stat-text { display: flex; flex-direction: column; flex: 1; line-height: 1.15; } .stat-num { font-weight: 800; font-size: 1.05rem; color: var(--text-strong); font-variant-numeric: tabular-nums; } .stat-label { font-size: 0.7rem; color: var(--text-soft); } .stat-trend { font-size: 0.72rem; font-weight: 700; color: var(--line-green); background: rgba(6, 199, 85, 0.12); padding: 0.2rem 0.5rem; border-radius: 999px; } .stat-trend-jade { color: var(--jade-deep); background: rgba(94, 125, 111, 0.14); } .tile-stat-jade { background: linear-gradient(135deg, rgba(94, 125, 111, 0.10), rgba(212, 165, 116, 0.08)); border-color: rgba(94, 125, 111, 0.22); } /* ========================================================================== TILE 2 — Messages (LINE ↔ Facebook Shapeshifter) ========================================================================== */ .tile-message { height: 340px; } .msg-layer { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; transition: opacity 0.8s var(--ease-in-out); } .msg-layer-line { opacity: 1; z-index: 2; } .msg-layer-fb { opacity: 0; z-index: 1; background: white; } .tile-message.is-fb .msg-layer-line { opacity: 0; } .tile-message.is-fb .msg-layer-fb { opacity: 1; z-index: 3; } .bar-line { background: linear-gradient(180deg, #06C755 0%, #00b14f 100%); color: white; border-bottom: none; padding: 0.7rem 0.9rem; } .bar-fb { background: linear-gradient(180deg, #1877F2 0%, #145FCB 100%); color: white; border-bottom: none; padding: 0.7rem 0.9rem; } .msg-avatar { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .msg-avatar-fb { background: white; } .msg-name { display: flex; flex-direction: column; font-size: 0.85rem; font-weight: 600; line-height: 1.15; } .msg-status { font-size: 0.65rem; font-weight: 400; opacity: 0.9; margin-top: 0.05rem; display: inline-flex; align-items: center; gap: 0.35rem; } .online-dot { width: 6px; height: 6px; border-radius: 50%; background: #34a853; box-shadow: 0 0 0 2px rgba(255,255,255,0.5); animation: pulseDot 2s ease-in-out infinite; } .msg-channel { margin-left: auto; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255,255,255,0.18); padding: 0.2rem 0.55rem; border-radius: 6px; } .msg-body { flex: 1; padding: 0.85rem 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; } .msg-body-line { background: linear-gradient(180deg, #c0d3dd 0%, #b8ccd8 100%); } .msg-body-fb { background: #f0f2f5; } .msg-day { align-self: center; background: rgba(0,0,0,0.16); color: white; font-size: 0.62rem; padding: 0.18rem 0.65rem; border-radius: 999px; margin-bottom: 0.15rem; } .msg-body-fb .msg-day { background: rgba(0,0,0,0.07); color: #65676b; } .msg-bubble { position: relative; max-width: 80%; padding: 0.55rem 0.85rem; border-radius: 18px; font-size: 0.8rem; line-height: 1.45; font-family: var(--font-main); word-wrap: break-word; transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); } .msg-bubble.is-hidden, .msg-typing.is-hidden { opacity: 0; transform: translateY(8px) scale(0.96); pointer-events: none; } .msg-typing { transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); } /* Facebook variant of typing indicator */ .msg-typing-fb { align-self: flex-start; background: #e4e6eb; padding: 0.55rem 0.8rem; border-radius: 18px; border-bottom-left-radius: 4px; display: inline-flex; gap: 4px; align-items: center; } .msg-typing-fb span { width: 6px; height: 6px; background: #65676b; border-radius: 50%; animation: typingDot 1.4s ease-in-out infinite; } .msg-typing-fb span:nth-child(2) { animation-delay: 0.2s; } .msg-typing-fb span:nth-child(3) { animation-delay: 0.4s; } .msg-in { align-self: flex-start; background: white; color: var(--text-dark); border-bottom-left-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .msg-out { align-self: flex-end; background: var(--line-green); color: white; border-bottom-right-radius: 4px; box-shadow: 0 2px 6px rgba(6,199,85,0.3); } .msg-in-fb { align-self: flex-start; background: #e4e6eb; color: #050505; border-bottom-left-radius: 4px; padding: 0.55rem 0.85rem; border-radius: 18px; font-size: 0.8rem; line-height: 1.45; max-width: 82%; transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); } .msg-out-fb { align-self: flex-end; background: var(--fb-blue); color: white; border-bottom-right-radius: 4px; padding: 0.55rem 0.85rem; border-radius: 18px; font-size: 0.8rem; line-height: 1.45; max-width: 82%; box-shadow: 0 2px 6px rgba(24,119,242,0.3); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); } .msg-in-fb.is-hidden, .msg-out-fb.is-hidden { opacity: 0; transform: translateY(8px) scale(0.96); pointer-events: none; } .msg-time { font-size: 0.6rem; opacity: 0.7; margin-top: 0.15rem; } .msg-out .msg-time, .msg-out-fb .msg-time { color: rgba(255,255,255,0.85); } .msg-typing { align-self: flex-start; background: white; padding: 0.55rem 0.8rem; border-radius: 18px; border-bottom-left-radius: 4px; display: inline-flex; gap: 4px; align-items: center; box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .msg-typing span { width: 6px; height: 6px; background: #94a3b8; border-radius: 50%; animation: typingDot 1.4s ease-in-out infinite; } .msg-typing span:nth-child(2) { animation-delay: 0.2s; } .msg-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes typingDot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } .fb-engagement { display: flex; justify-content: space-around; margin-top: auto; padding: 0.5rem 0.4rem 0.15rem; border-top: 1px solid rgba(0,0,0,0.07); font-size: 0.68rem; color: #65676b; font-weight: 600; } .fb-engagement span { display: inline-flex; align-items: center; gap: 0.25rem; } .eng-icon { font-size: 0.85rem; } /* ========================================================================== TILE 3 — Calendar / Booking ========================================================================== */ .bar-cal { background: white; color: var(--text-strong); border-bottom: 1px solid #e5e7eb; font-weight: 600; font-size: 0.82rem; padding: 0.8rem 1rem; } .bar-cal svg { color: var(--jade-deep); } .tile-body-cal { padding: 0.85rem; display: flex; flex-direction: column; gap: 0.45rem; } .cal-slot { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.9rem; background: #f7f8fa; border: 1px solid #eef0f3; border-radius: 10px; font-size: 0.84rem; position: relative; overflow: hidden; transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), background 0.6s ease, border-color 0.6s ease; } .cal-slot.is-popping { animation: slotPop 0.65s var(--ease-out); } @keyframes slotPop { 0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(94, 125, 111, 0.0); } 50% { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(94, 125, 111, 0.18); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(94, 125, 111, 0.0); } } .cal-slot.is-leaving { opacity: 0; transform: translateY(-4px); } .cal-time { font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; } .cal-meta { font-size: 0.76rem; color: white; margin-left: auto; } .cal-status { margin-left: auto; font-size: 0.74rem; color: var(--text-light); } .cal-slot-booked { background: linear-gradient(135deg, var(--jade-deep), #4a7060); border-color: transparent; color: white; } .cal-slot-booked .cal-time { color: white; } .cal-check { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 0.5rem; animation: checkPulse 2.6s ease-in-out infinite; } @keyframes checkPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); } 50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } } /* ========================================================================== Scroll hint ========================================================================== */ .scroll-hint { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--text-soft); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; opacity: 0.7; } .scroll-arrow { display: inline-flex; animation: scrollBounce 2s ease-in-out infinite; } @keyframes scrollBounce { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(4px); opacity: 1; } } /* ========================================================================== Next section (placeholder) ========================================================================== */ #next { position: relative; padding: 6rem 1.5rem; background: linear-gradient(180deg, var(--bg-sand) 0%, #ede4d2 100%); } .next-inner { max-width: 800px; margin: 0 auto; text-align: center; } .next-eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 1rem; } #next h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: var(--darker); margin-bottom: 1rem; letter-spacing: -0.02em; } .next-body { font-size: 1rem; color: var(--text-mid); max-width: 50ch; margin: 0 auto; } /* ========================================================================== MOBILE / TABLET ========================================================================== */ @media (max-width: 1023px) { #hero { padding: 4rem 0 5rem; } .hero-spotlight { display: none; } .hero-stage { height: auto; min-height: 540px; } .tile { position: relative; width: 100%; margin-bottom: 1.2rem; top: auto !important; left: auto !important; } .tile-message { height: 320px; } .stage-beams { display: none; } } @media (max-width: 767px) { /* Welle 5.1c: padding-top 3rem→5rem damit der Eyebrow-Pill (y≈48) nicht mehr unter der Mobile-Nav-Bottom-Edge (y≈59) hervorlugt. Was als "Hairline" sichtbar war = obere Rundung des Eyebrows. Welle 5.1d: padding-bottom 4→3rem + tighter element-margins damit auf iPhone SE (553px visible) Trust-Bar wieder above-the-fold ist. */ #hero { padding: 5rem 0 3rem; min-height: auto; } .hero-eyebrow { margin-bottom: 1rem; } .hero-h1 { font-size: clamp(2.9rem, 12.5vw, 4.2rem); margin-bottom: 1rem; } .hero-trust { margin-top: 1rem; } /* Welle 5.1d: CTA linksbündig statt full-width — Premium-SaaS-Pattern (Stripe/Linear/Notion). Konsistent mit Eyebrow/H1/Subline alle links. */ .tile-google, .tile-message, .tile-booking { max-width: 380px; margin-left: auto; margin-right: auto; } .scroll-hint { display: none; } } /* ========================================================================== Welle 5.1d Audit-Fixes — alle Geräte sauber ========================================================================== */ /* Fix #2 + #3 — iPhone 5/SE1 320px UND Eyebrow auf <400px kompakter. Bei 320px ist padding-top 5rem zu viel → CTA fällt below-the-fold. Reduzierung auf 3.5rem + kompaktere Eyebrow-Pill (1-zeilig). */ @media (max-width: 399px) { .hero-eyebrow { font-size: 0.7rem; padding: 0.4rem 0.85rem; letter-spacing: 0.02em; margin-bottom: 0.85rem; } } @media (max-width: 359px) { #hero { padding: 3.5rem 0 2rem; } .hero-h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); margin-bottom: 0.75rem; } .hero-sub { margin-bottom: 0.4rem; font-size: 0.92rem; } .hero-trust { margin-top: 0.75rem; } } /* Fix #1 — Mobile Landscape (max-height 500px) — kompaktes Hero, kein Doppel-CTA. Bei landscape mit niedriger Höhe ist 1-spaltiges Layout nicht möglich → alle vertikalen Margins minimieren + nav-clean-cta verstecken. */ @media (max-width: 1023px) and (orientation: landscape) and (max-height: 500px) { #navbar.nav-clean .nav-clean-cta { display: none; } #hero { padding: 3rem 0 2rem; } .hero-eyebrow { margin-bottom: 0.5rem; padding: 0.3rem 0.85rem; font-size: 0.68rem; } .hero-h1 { font-size: clamp(1.5rem, 5vw, 2rem); margin-bottom: 0.5rem; } .hero-sub { margin-bottom: 0.4rem; font-size: 0.9rem; } .hero-trust { margin-top: 0.5rem; } } /* Fix #4 — Tablet 768-1023px: nav-clean-cta verstecken (Apple/Stripe-Pattern). Aktuell zeigt Nav 'Contact'-Button + Hamburger gleichzeitig → Doppel-CTA. Ab 1024px wird die volle Desktop-Nav sichtbar (Links sind dann da). */ @media (min-width: 768px) and (max-width: 1023px) { #navbar.nav-clean .nav-clean-cta { display: none; } } /* Fix #6 — Tablet Landscape (1024-1199px) mit niedriger Höhe (iPad mini landscape): Hero-Padding reduzieren damit Karten nicht überquellen. */ @media (min-width: 1024px) and (max-width: 1199px) and (max-height: 700px) { #hero { padding: 4rem 0 3rem; } } /* Fix #5 — QHD (2560+) und größer: Hero-Container vergrößern damit Inhalt nicht mickrig in der Mitte schwimmt. H1 etwas größer für Wow-Faktor. */ @media (min-width: 1800px) { .hero-container { max-width: 1400px; } } @media (min-width: 2200px) { .hero-container { max-width: 1500px; } .hero-h1 { font-size: clamp(2.4rem, 4vw, 4.6rem); } } /* ========================================================================== REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hero-mesh, .hero-lai-thai { animation: none; } .hero-spotlight { display: none; } .tile-glow-border { display: none; } .cta-glow { display: none; } /* Force all conditional content visible — state-machine doesn't run */ .msg-bubble.is-hidden, .msg-typing.is-hidden, .msg-in-fb.is-hidden, .msg-out-fb.is-hidden, .g-result.is-leaving, .g-result.is-entering, .cal-slot.is-leaving { opacity: 1 !important; transform: none !important; } .g-cursor { display: none; } } /* ========================================================================== SCROLL-DRIVEN: Hero shrinks gracefully when next section comes in (Progressive enhancement — newer browsers only) ========================================================================== */ @supports (animation-timeline: scroll()) { .hero-h1 { animation: heroH1Shrink linear both; animation-timeline: view(); animation-range: exit 0% exit 80%; } .hero-stage { animation: heroStageShrink linear both; animation-timeline: view(); animation-range: exit 0% exit 80%; } @keyframes heroH1Shrink { to { transform: scale(0.85) translateY(-20px); opacity: 0.7; } } @keyframes heroStageShrink { to { transform: scale(0.92) translateX(-30px); opacity: 0.75; } } } /* ============================================================================ 2. Floating Cluster + Glass base (prototype/hero-v3/variants/hybrid.css) ============================================================================ */ /* ============================================================ VARIANT A — "Sun-Drenched Atelier · Floating Cluster" Liquid Glass + 3D Depth + Halo Aura + Maus-Parallax + Scan-Line Loaded AFTER ../style.css — overrides only. ============================================================ */ :root { --radius: 20px; --radius-lg: 26px; --radius-xl: 34px; --gold-warm: #d4a574; --gold-deep: #a67838; } /* --- Mesh-Gradient: SUNRISE PALETTE — warmer, more uplifting, less "rainy" --- */ .hero-mesh { background: /* Sunrise peach/coral blob — top right (NEW, energetic warm anchor) */ radial-gradient(ellipse 65% 55% at 80% 25%, rgba(255, 183, 130, 0.42) 0%, transparent 60%), /* Brass-gold mid-left (more saturated than before) */ radial-gradient(ellipse 60% 55% at 18% 60%, rgba(212, 165, 116, 0.42) 0%, transparent 55%), /* Mirateq blue bottom-right (smaller, less dominant) */ radial-gradient(ellipse 45% 40% at 88% 80%, rgba(101, 146, 230, 0.30) 0%, transparent 55%), /* Soft pink-coral top-left (NEW warm accent) */ radial-gradient(ellipse 35% 30% at 12% 15%, rgba(255, 196, 196, 0.28) 0%, transparent 55%), /* Jade subtle balance bottom-center */ radial-gradient(ellipse 40% 35% at 55% 90%, rgba(139, 170, 155, 0.20) 0%, transparent 55%), /* WARM cream linear base — replace cool blue with sunrise gold */ linear-gradient(135deg, #fffbf3 0%, #fdf3e0 38%, #fbe5cc 72%, #f5dcc1 100%); } /* --- Hero stage: stronger perspective, preserve-3d for depth --- */ .hero-stage { perspective: 1700px; perspective-origin: 30% 35%; transform-style: preserve-3d; } /* --- Beams: more visible in this variant --- */ .stage-beams { z-index: 2; /* sits between background and tiles */ } /* ============================================================ FLOATING CLUSTER — wrapper-driven 3D depth Wrappers carry positioning + translateZ + parallax offset. Tiles inside fill 100% and take JS hover-tilt without conflict. ============================================================ */ .tile-wrap { position: absolute; transform-style: preserve-3d; /* Composed transform = parallax + base depth + base rotation */ transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0) translateZ(var(--depth, 0px)) rotateY(var(--rot, 0deg)); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } /* Per-tile depth (back / front / mid) + slight rotations */ .tile-wrap-google { top: 10px; left: 0; width: 340px; z-index: 4; --depth: -25px; --rot: -4deg; } .tile-wrap-message { top: 200px; left: 195px; width: 285px; z-index: 7; /* FRONT — highest */ --depth: 70px; --rot: 0deg; } .tile-wrap-booking { top: 460px; left: 350px; width: 290px; z-index: 5; --depth: 25px; --rot: 3deg; } /* Reset inner tile — wrapper now owns positioning */ .tile-google, .tile-message, .tile-booking { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; z-index: auto !important; } .tile-message { height: 340px; } /* ============================================================ GLASS BASE — Liquid Glass tile ============================================================ */ .tile { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: /* SHIMMER (4-side inset) — Liquid Glass edge */ inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 1.5px 0 0 rgba(255, 255, 255, 0.45), inset 0 -1.5px 0 rgba(15, 23, 42, 0.10), inset -1.5px 0 0 rgba(15, 23, 42, 0.04), /* Close shadow */ 0 6px 14px -4px rgba(15, 23, 42, 0.12), /* Mid shadow */ 0 30px 60px -20px rgba(15, 23, 42, 0.28), /* HALO AURA (4-layer) — visible through warm bg */ 0 0 0 1px var(--tile-glow, rgba(101, 146, 230, 0.30)), 0 0 40px 8px var(--tile-glow, rgba(101, 146, 230, 0.30)), 0 0 100px 30px var(--tile-glow, rgba(101, 146, 230, 0.30)), 0 50px 130px -20px var(--tile-glow-deep, rgba(101, 146, 230, 0.45)); isolation: isolate; transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1); } /* --- Per-tile halo color (DISTINCT for each, no clash) --- */ .tile-google { --tile-glow: rgba(66, 133, 244, 0.55); --tile-glow-deep: rgba(34, 96, 210, 0.70); } .tile-message { --tile-glow: rgba(6, 199, 85, 0.50); --tile-glow-deep: rgba(6, 199, 85, 0.65); } /* When chat shapeshifts to FB → halo turns FB-blue */ .tile-message.is-fb { --tile-glow: rgba(24, 119, 242, 0.55); --tile-glow-deep: rgba(24, 119, 242, 0.68); } /* Booking gets BRASS-GOLD halo — distinct from green chat halos, ties into Thai-Premium palette, signals "successful conversion" */ .tile-booking { --tile-glow: rgba(212, 165, 116, 0.60); --tile-glow-deep: rgba(166, 120, 56, 0.70); } /* --- Paired state: stronger halo + visible color rim --- */ .tile.is-paired { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 1.5px 0 0 rgba(255, 255, 255, 0.55), inset 0 -1.5px 0 rgba(15, 23, 42, 0.12), inset -1.5px 0 0 rgba(15, 23, 42, 0.05), 0 0 0 1.5px var(--tile-glow-deep, rgba(101, 146, 230, 0.55)), 0 8px 18px -6px rgba(15, 23, 42, 0.16), 0 36px 72px -24px rgba(15, 23, 42, 0.32), 0 0 130px 38px var(--tile-glow, rgba(101, 146, 230, 0.55)), 0 30px 160px -10px var(--tile-glow-deep, rgba(101, 146, 230, 0.75)); } /* --- Paired wrapper: pull the active card forward in 3D space + z-index --- */ .tile-wrap:has(.tile.is-paired) { z-index: 20; transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0) translateZ(calc(var(--depth, 0px) + 30px)) rotateY(calc(var(--rot, 0deg) * 0.5)); } /* --- Inner bodies: slightly transparent so glass effect carries --- */ .tile-body { background: transparent; } .tile-body-google { background: rgba(255, 255, 255, 0.45); } .tile-body-cal { background: rgba(255, 255, 255, 0.50); } .bar-browser { background: rgba(246, 246, 247, 0.85); backdrop-filter: blur(8px); } .bar-url { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); } .bar-line, .bar-fb { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); } .bar-cal { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(8px); } .cal-slot.cal-slot-open { background: rgba(255, 255, 255, 0.55); border-color: rgba(0, 0, 0, 0.04); backdrop-filter: blur(6px); } .tile-stat { background: linear-gradient(135deg, rgba(101, 146, 230, 0.14), rgba(212, 165, 116, 0.10)); border-color: rgba(101, 146, 230, 0.24); } .tile-stat-jade { background: linear-gradient(135deg, rgba(212, 165, 116, 0.18), rgba(110, 149, 134, 0.10)); border-color: rgba(212, 165, 116, 0.32); } .tile-glow-border { opacity: 0.45; } .tile.is-paired .tile-glow-border { opacity: 0.85; } /* ============================================================ SCAN-LINE — light sweep on the active tile (Cursor.com vibe) ============================================================ */ .tile-scan { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: linear-gradient(180deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.25) 48%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0.25) 52%, transparent 60%, transparent 100%); background-size: 100% 240%; background-position: 50% -120%; opacity: 0; mix-blend-mode: screen; border-radius: inherit; /* Smooth fade-out so the sweep doesn't cut mid-animation when the next card becomes paired (FIX: previous 0s transition cut visible). */ transition: opacity 0.6s ease-out 0.3s; } .tile.is-paired .tile-scan { opacity: 1; /* Slower sweep (was 2.6s → now 4.5s) so it has time to complete one full pass within each card's paired-period (~2.2s shortest, but the smooth fade-out delay above lets the sweep continue past the paired-end). */ animation: scanSweep 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite; transition: opacity 0.4s ease-in 0s; } @keyframes scanSweep { 0% { background-position: 50% -120%; } 100% { background-position: 50% 120%; } } /* ============================================================ FLOAT CHIPS — outside the tile, inside wrapper (no clipping) ============================================================ */ .float-chip { position: absolute; z-index: 30; display: inline-flex; align-items: center; gap: 0.32rem; font-family: 'Inter', system-ui, sans-serif; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.34rem 0.7rem; border-radius: 999px; white-space: nowrap; color: white; border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 6px rgba(15, 23, 42, 0.16), 0 8px 18px rgba(15, 23, 42, 0.18); pointer-events: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); /* float gently */ animation: chipFloat 4.5s ease-in-out infinite; } .float-chip svg { flex-shrink: 0; } .float-chip-blue { background: linear-gradient(135deg, #6592E6 0%, #2260D2 100%); } .float-chip-rating { background: linear-gradient(135deg, #fbbc04 0%, #f59e0b 50%, #d97706 100%); color: #2b1a05; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); } .float-chip-green { background: linear-gradient(135deg, #06C755 0%, #00B14F 100%); } .float-chip-gold { background: linear-gradient(135deg, #d4a574 0%, #a67838 100%); } /* Chip positions per wrapper */ .chip-google { top: -12px; left: 16px; transform: rotate(-4deg); animation-delay: -0.5s; } .chip-message { top: -14px; right: -10px; transform: rotate(5deg); animation-delay: -2s; } .chip-booking { top: -12px; right: 16px; transform: rotate(3deg); animation-delay: -3.5s; } @keyframes chipFloat { 0%, 100% { transform: var(--chip-rot, rotate(0deg)) translateY(0); } 50% { transform: var(--chip-rot, rotate(0deg)) translateY(-3px); } } .chip-google { --chip-rot: rotate(-4deg); transform: var(--chip-rot); } .chip-message { --chip-rot: rotate(5deg); transform: var(--chip-rot); } .chip-booking { --chip-rot: rotate(3deg); transform: var(--chip-rot); } /* The pulsing dot inside the booking chip */ .chip-pulse-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); animation: chipPulse 1.6s ease-in-out infinite; } @keyframes chipPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } } /* --- Existing g-badge upgrade --- */ .g-badge { background: linear-gradient(135deg, #6592E6 0%, #2260D2 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px rgba(34, 96, 210, 0.50); border: 1px solid rgba(255, 255, 255, 0.4); } /* --- CTA: glass-treated --- */ .hero-cta { background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 32px rgba(15, 23, 42, 0.30), 0 4px 10px rgba(15, 23, 42, 0.15); } .hero-eyebrow { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(14px) saturate(160%); border-color: rgba(101, 146, 230, 0.28); } /* ============================================================ CHANNELS — static brand colors (Google multicolor + LINE/FB) Pulse uses filter:drop-shadow so the multicolor Google glows. ============================================================ */ .brand-google { font-weight: 700; letter-spacing: -0.005em; } .brand-google .g-l { display: inline-block; } .brand-google .g-l-1 { color: #4285f4; } /* G — blue */ .brand-google .g-l-2 { color: #ea4335; } /* o — red */ .brand-google .g-l-3 { color: #fbbc04; } /* o — yellow */ .brand-google .g-l-4 { color: #4285f4; } /* g — blue */ .brand-google .g-l-5 { color: #34a853; } /* l — green */ .brand-google .g-l-6 { color: #ea4335; } /* e — red */ /* Whole-word brand colors (action-verb structure: "Reached on LINE", etc.) */ .brand-line { color: #06C755; /* LINE green — always */ font-weight: 800; letter-spacing: -0.005em; } .brand-fb { color: #1877F2; /* FB blue — always */ font-weight: 800; letter-spacing: -0.005em; } .brand-tiktok { color: #010101; /* TikTok black — always */ font-weight: 800; letter-spacing: -0.01em; background: linear-gradient(90deg, #25F4EE 0%, #010101 30%, #010101 70%, #FE2C55 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Channels-segment: keep each "Verb on Brand." together on one line */ .ch-seg { white-space: nowrap; margin-right: 0.45em; display: inline-block; } /* Pulse via filter so it works with multicolor Google + gradient TikTok */ .brand-google.is-pulse { filter: drop-shadow(0 0 14px rgba(66, 133, 244, 0.65)); transform: translateY(-1px) scale(1.04); } .brand-line.is-pulse { filter: drop-shadow(0 0 14px rgba(6, 199, 85, 0.65)); transform: translateY(-1px) scale(1.04); text-shadow: 0 0 18px rgba(6, 199, 85, 0.6); } .brand-fb.is-pulse { filter: drop-shadow(0 0 14px rgba(24, 119, 242, 0.65)); transform: translateY(-1px) scale(1.04); text-shadow: 0 0 18px rgba(24, 119, 242, 0.6); } .brand-tiktok.is-pulse { filter: drop-shadow(0 0 12px rgba(254, 44, 85, 0.55)) drop-shadow(0 0 8px rgba(37, 244, 238, 0.45)); transform: translateY(-1px) scale(1.04); } /* ============================================================ TRUST-LINE — Mini Bento Strip (single glass card, 3 cells) Premium boarding-pass look, distinct from eyebrow pill above. ============================================================ */ .hero-trust { display: inline-flex; align-items: stretch; gap: 0; margin-top: 1.8rem; padding: 0.85rem 1.1rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(252, 247, 234, 0.75) 100%); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border: 1px solid rgba(212, 165, 116, 0.35); border-radius: 18px; font-size: inherit; color: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(168, 130, 80, 0.05), 0 2px 6px rgba(82, 60, 30, 0.06), 0 14px 32px -8px rgba(82, 60, 30, 0.18), 0 0 60px -10px rgba(212, 165, 116, 0.20); position: relative; overflow: hidden; } /* Subtle inner shimmer at top edge */ .hero-trust::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.55) 30%, rgba(212, 165, 116, 0.85) 50%, rgba(212, 165, 116, 0.55) 70%, transparent); pointer-events: none; } .trust-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.18rem; padding: 0 1.15rem; text-align: center; min-width: 0; position: relative; z-index: 1; } .trust-cell-value { display: inline-flex; align-items: center; gap: 0.15rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-strong); font-size: 1.15rem; line-height: 1; letter-spacing: -0.01em; } .trust-cell-label { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); white-space: nowrap; } /* --- Cell 1: 5 Stars --- */ .trust-stars { display: inline-flex; align-items: center; gap: 0.12rem; color: #fbbc04; filter: drop-shadow(0 1px 2px rgba(251, 188, 4, 0.35)); } .trust-stars svg { display: inline-block; animation: starTwinkle 6s ease-in-out infinite; } .trust-stars svg:nth-child(1) { animation-delay: 0s; } .trust-stars svg:nth-child(2) { animation-delay: 0.4s; } .trust-stars svg:nth-child(3) { animation-delay: 0.8s; } .trust-stars svg:nth-child(4) { animation-delay: 1.2s; } .trust-stars svg:nth-child(5) { animation-delay: 1.6s; } @keyframes starTwinkle { 0%, 92%, 100% { transform: scale(1); filter: brightness(1); } 95% { transform: scale(1.15); filter: brightness(1.3); } } /* --- Cell 2: Price --- */ .trust-baht-symbol { color: var(--gold-deep); font-weight: 800; font-size: 0.95rem; margin-right: 0.12rem; } .trust-cell-num { color: var(--text-strong); } /* --- Cell 3: Language tags --- */ .trust-cell-lang-flags { gap: 0.32rem; } .trust-lang-tag { display: inline-block; padding: 0.18rem 0.42rem; background: rgba(101, 146, 230, 0.12); color: var(--primary-dark); border: 1px solid rgba(101, 146, 230, 0.30); border-radius: 5px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1; } /* --- Brass-gold dividers between cells --- */ .trust-divider { align-self: stretch; width: 1px; margin: 0.15rem 0; background: linear-gradient(180deg, transparent 0%, rgba(212, 165, 116, 0.50) 30%, rgba(184, 137, 90, 0.65) 50%, rgba(212, 165, 116, 0.50) 70%, transparent 100%); flex-shrink: 0; } /* --- Mobile: kompakter Boarding-Pass-Look (Welle 5.1c). Labels BLEIBEN — nur stark verkleinert. Stars/Wert/Pills oben, Mini-Label drunter. Container wird block-flex mit width:100% damit die 3 Cells horizontal mit space-between sitzen (Default `inline-flex` shrinkt sich sonst). Mehr vertikaler Padding + margin-bottom damit die Bento-Tiles drunter nicht in die Trust-Bar reinragen. --- */ @media (max-width: 599px) { .hero-trust { display: flex; width: 100%; box-sizing: border-box; padding: 0.7rem 0.85rem; margin-bottom: 0.5rem; border-radius: 12px; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; gap: 0.4rem; } .trust-cell { padding: 0; gap: 0.2rem; flex: 1 1 auto; min-width: 0; } .trust-cell-value { font-size: 0.92rem; line-height: 1.1; } .trust-cell-label { font-size: 0.5rem; letter-spacing: 0.04em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .trust-stars { gap: 1px; } .trust-stars svg { width: 11px; height: 11px; } .trust-lang-tag { padding: 0.06rem 0.22rem; font-size: 0.55rem; } .trust-divider { height: 32px; width: 1px; margin: 0; flex-shrink: 0; align-self: center; } } /* ============================================================ MOBILE — flatten the cluster, lose 3D, keep glass + halos ============================================================ */ @media (max-width: 1023px) { .tile-wrap { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; max-width: 380px; margin: 0 auto 2rem !important; transform: none !important; --depth: 0 !important; --rot: 0deg !important; --parallax-x: 0px !important; --parallax-y: 0px !important; } .tile-wrap:has(.tile.is-paired) { transform: none !important; } .tile { backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 -1.5px 0 rgba(15, 23, 42, 0.10), 0 4px 12px -4px rgba(15, 23, 42, 0.10), 0 18px 36px -12px rgba(15, 23, 42, 0.20), 0 0 60px 12px var(--tile-glow, rgba(101, 146, 230, 0.30)); } .float-chip { font-size: 0.58rem; padding: 0.28rem 0.6rem; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .float-chip { animation: none; } .chip-pulse-dot { animation: none; } .tile-scan { animation: none; opacity: 0; } .tile-wrap { transition: none; } } /* ============================================================================ 3. Liquid Glass + Tuning Layers + Mobile 3D-Shuffle (prototype/hero-v3/variants/glass-light.css) ============================================================================ */ /* ============================================================ ★ GLASS-LIGHT · "Liquid Glass Atelier" — Light theme Apple iOS 26 Liquid Glass language: cards are real refractive lenses over an animated caustics background. The caustics background is rendered by mesh-caustics.js (WebGL). The cards use multi-layer CSS to simulate Liquid Glass: - heavy backdrop-blur with saturate boost - SVG feDisplacementMap refraction (via .tile-glass-edge) - chromatic aberration via tri-color border layers - Fresnel inner glow on top edge - moving shimmer reflection - color halo bleed (Apple's "tinted glass" technique) ============================================================ */ body.is-glass-light { background: #fff8eb; } body.is-glass-light #hero { /* Clean bright light — no warm peach tones */ background: linear-gradient(180deg, #ffffff 0%, #fafbfd 60%, #f4f7fb 100%); } body.is-glass-light .hero-mesh { /* CSS-only caustic-ish fallback — clean light, very subtle blue tint */ background: radial-gradient(ellipse 70% 60% at 25% 30%, rgba(101, 146, 230, 0.10) 0%, transparent 60%), radial-gradient(ellipse 60% 55% at 75% 50%, rgba(180, 200, 230, 0.08) 0%, transparent 55%), linear-gradient(180deg, #ffffff 0%, #fafbfd 60%, #f4f7fb 100%); z-index: 0; } /* Subtle Lai-Thai overlay (Lanna anchor) */ body.is-glass-light .hero-lai-thai { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); background-size: 380px 380px; background-repeat: repeat; } /* ============================================================ LIQUID GLASS CARDS — the main attraction ============================================================ */ body.is-glass-light .tile { /* Heavy backdrop refraction */ backdrop-filter: blur(38px) saturate(220%) brightness(1.06); -webkit-backdrop-filter: blur(38px) saturate(220%) brightness(1.06); /* Glass body — almost transparent, very slight tint */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 245, 230, 0.18) 50%, rgba(255, 255, 255, 0.22) 100%); /* Multi-layer Apple-style Liquid Glass shadow stack */ box-shadow: /* Chromatic aberration edges (3 colored rings) */ 0 0 0 0.5px rgba(255, 100, 130, 0.20), 0 0 0 1px rgba(100, 220, 255, 0.16), 0 0 0 1.5px rgba(255, 220, 140, 0.14), /* Fresnel highlight — top edge bright like real glass */ inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 1.5px 0 0 rgba(255, 255, 255, 0.55), inset 0 -1.5px 0 rgba(15, 23, 42, 0.10), inset -1.5px 0 0 rgba(15, 23, 42, 0.04), /* Card body shadow — subtle (glass is translucent, doesn't cast hard shadow) */ 0 8px 18px -4px rgba(82, 60, 30, 0.14), 0 32px 70px -22px rgba(82, 60, 30, 0.28), /* Color halo bleed — REDUCED (was 50px/130px → 24px/60px) */ 0 0 24px 3px var(--tile-glow, rgba(101, 146, 230, 0.28)), 0 0 60px 10px var(--tile-glow, rgba(101, 146, 230, 0.14)); border: none; isolation: isolate; transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } /* SVG-filter-based real refraction layer — sits behind the body content, distorts what's seen through the card edges. */ body.is-glass-light .tile-glass-edge { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; backdrop-filter: url(#glassRefract) blur(2px); -webkit-backdrop-filter: url(#glassRefract) blur(2px); /* Fade refraction toward center, strongest at edges (like real glass) */ mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.85) 100%); -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.85) 100%); opacity: 0.9; } /* Animated shimmer — light reflection sweeping across glass surface */ body.is-glass-light .tile-glass-shimmer { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 0%, transparent 30%, rgba(255, 255, 255, 0.0) 40%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.0) 60%, transparent 70%, transparent 100%); background-size: 240% 100%; background-position: 100% 50%; mix-blend-mode: screen; opacity: 0.55; animation: glassShimmer 9s cubic-bezier(0.65, 0, 0.35, 1) infinite; animation-delay: var(--shimmer-delay, 0s); } body.is-glass-light .tile-google .tile-glass-shimmer { --shimmer-delay: 0s; } body.is-glass-light .tile-message .tile-glass-shimmer { --shimmer-delay: -3s; } body.is-glass-light .tile-booking .tile-glass-shimmer { --shimmer-delay: -6s; } @keyframes glassShimmer { 0% { background-position: 100% 50%; } 35% { background-position: -50% 50%; } 100% { background-position: -50% 50%; } } /* Make tile body content appear above glass effects. IMPORTANT: .msg-layer must keep its absolute positioning from style.css — we only bump z-index on it without touching its position. */ body.is-glass-light .tile > .tile-bar, body.is-glass-light .tile > .tile-body { position: relative; z-index: 2; } body.is-glass-light .tile > .msg-layer { z-index: 2; } /* Per-card halo color — DEZENT (reduced opacity ~50%) */ body.is-glass-light .tile-google { --tile-glow: rgba(66, 133, 244, 0.28); --tile-glow-deep: rgba(34, 96, 210, 0.42); } body.is-glass-light .tile-message { --tile-glow: rgba(6, 199, 85, 0.28); --tile-glow-deep: rgba(6, 199, 85, 0.42); } body.is-glass-light .tile-message.is-fb { --tile-glow: rgba(24, 119, 242, 0.32); --tile-glow-deep: rgba(24, 119, 242, 0.45); } body.is-glass-light .tile-booking { --tile-glow: rgba(212, 165, 116, 0.35); --tile-glow-deep: rgba(166, 120, 56, 0.48); } /* Paired state — DEZENTER (was 130px/220px → 60px/100px) */ body.is-glass-light .tile.is-paired { box-shadow: 0 0 0 0.5px rgba(255, 100, 130, 0.22), 0 0 0 1px rgba(100, 220, 255, 0.18), 0 0 0 1.5px rgba(255, 220, 140, 0.16), inset 0 2px 0 rgba(255, 255, 255, 1), inset 1.5px 0 0 rgba(255, 255, 255, 0.65), inset 0 -1.5px 0 rgba(15, 23, 42, 0.12), inset -1.5px 0 0 rgba(15, 23, 42, 0.05), 0 0 0 1.5px var(--tile-glow-deep), 0 12px 24px -8px rgba(82, 60, 30, 0.18), 0 44px 88px -22px rgba(82, 60, 30, 0.36), 0 0 60px 14px var(--tile-glow), 0 0 100px 26px var(--tile-glow-deep); } /* ============================================================ Tile body interiors — must stay readable on glass ============================================================ */ body.is-glass-light .tile-body { background: rgba(255, 255, 255, 0.40); } body.is-glass-light .tile-body-google { background: rgba(255, 255, 255, 0.55); } body.is-glass-light .tile-body-cal { background: rgba(255, 255, 255, 0.60); } body.is-glass-light .bar-browser { background: rgba(246, 246, 247, 0.85); } body.is-glass-light .bar-cal { background: rgba(255, 255, 255, 0.78); } /* ============================================================ CTA — mirror Apple Liquid Glass on dark ============================================================ */ /* CTA — eckig + premium (Apple-Hardware-Dark mit subtiler Hairline-Border). Border-radius 8px = sehr eckig, fast architektonisch. Plus 0.5px Hairline- Border für Material-Definition + stärkerer Top-Highlight für Liquid-Glass-Effekt. */ /* Welle 5.22 — Mocha-Gold Brand-CTA. Aus Recherche zu 2026er Hero-CTA-Standards (Stripe/Linear/Vercel): - 10% reserved Accent für CTAs (statt off-brand pop color) - Mocha-Gold = miraTEQ Brand-Identity, passt zur 3. Story-Karte "Get customers" - Hebt sich klar von Pearl-Background ab UND von dark Nav-Contact-Button → echte Visual-Hierarchy: das hier ist DER Primary Action - Single primary CTA = bis zu 266% mehr Conversion (vs. mehrere konkurrierende) Größer, links-aligned (F-Pattern), pill-shape (16px radius). */ body.is-glass-light .hero-cta { align-self: flex-start; padding: 0.95rem 1.9rem; font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; border-radius: 6px; border: 0.5px solid rgba(255, 255, 255, 0.28); /* Welle 5.22.4 — Offizielles miraTEQ-Logo-Blau (#1498D5). Cognac bleibt EXKLUSIV für Booking-Tile / "Get customers" → klares Brand-Color-Mapping: Blau = miraTEQ-Action, Gold = Booking. */ background: linear-gradient(180deg, #1498D5 0%, #0E7CAF 100%); color: #ffffff; gap: 0.6rem; text-shadow: 0 1px 1px rgba(8, 50, 70, 0.30); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -0.5px 0 rgba(8, 50, 70, 0.40), 0 1px 2px rgba(8, 50, 70, 0.24), 0 12px 28px -6px rgba(20, 152, 213, 0.42); } body.is-glass-light .hero-cta .cta-arrow svg { width: 16px; height: 16px; stroke-width: 2.4; } /* Glow-Ring komplett ausblenden — Brand-Blau ist schon der Accent */ body.is-glass-light .hero-cta .cta-glow { display: none; } body.is-glass-light .hero-cta:hover { transform: translateY(-2px); background: linear-gradient(180deg, #2BB0E5 0%, #1498D5 100%); border-color: rgba(255, 255, 255, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -0.5px 0 rgba(8, 50, 70, 0.42), 0 2px 6px rgba(8, 50, 70, 0.28), 0 18px 36px -8px rgba(20, 152, 213, 0.56); } /* Eyebrow + Trust strip — pearl glass treatment */ body.is-glass-light .hero-eyebrow { background: rgba(255, 255, 255, 0.78); border-color: rgba(212, 165, 116, 0.45); backdrop-filter: blur(14px) saturate(180%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 4px 18px rgba(212, 165, 116, 0.18); } body.is-glass-light .hero-trust { background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 240, 220, 0.82) 100%); border-color: rgba(212, 165, 116, 0.50); } /* ============================================================ MOBILE — Snap-Scroll Carousel (Apple App Store / Netflix pattern) 3 Cards horizontal, snap-centered. Auto-rotate every 7s. Pause on user-touch. Active card scaled up + full glass effects. Peek of next card visible right (~10%) → swipe-affordance signal. ============================================================ */ @media (max-width: 1023px) { /* Tighter hero on mobile so the carousel sits higher and the scroll indicator pulls in close to it. Default mobile #hero padding (style.css line 1182) is 4rem 0 5rem — we trim the bottom and remove the gap above the stage. Welle 5.22.14 — min-height: auto override damit Hero NICHT volle viewport-Höhe nimmt. style.css:1594 setzt 100svh für mobile, was dazu führt dass der user im first-view nicht die erste Section sehen kann (David Feedback). */ body.is-glass-light #hero { padding-bottom: 3rem !important; min-height: auto !important; } body.is-glass-light .scroll-hint { bottom: 1rem; } /* hero-container is a grid with gap: 3rem (style.css:161) which adds 48px between the stage and the stack-dots that JS inserts after it. Tighten the gap to 1rem so the dots hug the carousel. */ body.is-glass-light .hero-container { gap: 1rem; } /* Stage = 3D positioning container (NOT scroll). Cards arranged in 3D space. Replaces the old snap-scroll layout with true 3D shuffle. CRITICAL: overrides style.css min-height: 540px and hybrid.css absolute pos. */ /* Stage = 3D positioning container. Cards arranged in 3D space. Scaling-Magic (transform: scale + height) passiert in den breakpoint- spezifischen rules weiter unten (Zeile ~2983+). Hier nur Base-Setup. */ body.is-glass-light .hero-stage { position: relative !important; display: block !important; width: 100% !important; max-width: none !important; height: 700px !important; min-height: 700px !important; margin: 0 auto 0 !important; padding: 0 !important; overflow: visible !important; perspective: 1100px !important; perspective-origin: 50% 50% !important; transform-style: preserve-3d !important; } /* Layout rule — applies to ALL wraps, including paired ones. The :has(.tile.is-paired) duplicate selector outranks hybrid.css's `.tile-wrap:has(.tile.is-paired) { transform: none }` rule (their specificity is (0,0,3,0); ours is (0,0,4,1)). IMPORTANT: this rule must NOT set the --tw-* var defaults, because its specificity (41 in the :has variant) would beat the position- class rules below (specificity 31), making active cards invisible. */ body.is-glass-light .tile-wrap, body.is-glass-light .tile-wrap:has(.tile.is-paired) { position: absolute !important; top: 50% !important; left: 50% !important; width: 280px !important; max-width: 75vw !important; height: auto !important; margin: 0 !important; transform-origin: center center !important; transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.5s ease; will-change: transform, opacity; cursor: pointer; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translate(-50%, -50%) translateZ(calc(var(--tw-tz, 0) * 1px)) translateX(calc(var(--tw-tx, 0) * 1px)) rotateY(var(--tw-ry, 0deg)) scale(var(--tw-scale, 0.85)) !important; opacity: var(--tw-opacity, 0) !important; z-index: var(--tw-z, 1); } /* Default vars — separate, base-only selector. Specificity (0,0,2,1)=21 so the position-class rules below (specificity 31) win and update the vars based on which slot a card occupies. */ body.is-glass-light .tile-wrap { --tw-tx: 0; --tw-tz: 0; --tw-ry: 0deg; --tw-scale: 0.85; --tw-opacity: 0; --tw-z: 1; } /* FRONT (active) — centered, full-size, in front */ body.is-glass-light .tile-wrap.is-snap-center { --tw-tx: 0; --tw-tz: 0; --tw-ry: 0deg; --tw-scale: 1; --tw-opacity: 1; --tw-z: 5; } /* RIGHT — back-right, facing the viewer flat (no inward tilt) */ body.is-glass-light .tile-wrap.pos-right { --tw-tx: 85; --tw-tz: -180; --tw-ry: 0deg; --tw-scale: 0.84; --tw-opacity: 0.85; --tw-z: 2; } /* LEFT — back-left, facing the viewer flat (no inward tilt) */ body.is-glass-light .tile-wrap.pos-left { --tw-tx: -85; --tw-tz: -180; --tw-ry: 0deg; --tw-scale: 0.84; --tw-opacity: 0.85; --tw-z: 2; } /* While the user is actively dragging: kill transitions so cards follow the finger 1:1. Re-enabled the moment .is-dragging is removed, producing a smooth snap to the final arrangement. */ body.is-glass-light .hero-stage.is-dragging .tile-wrap { transition: none !important; } /* During drag: every card uses the lightweight peek look (opaque, no glass refraction, no halo, no iridescence). Two cards crossing each other mid-gesture would otherwise show conflicting layers — backdrop- filter on one, opaque on the other, with the glassy one bleeding through the opaque one. With a uniform peek look the 3D motion reads cleanly. The full liquid glass treatment snaps back on release. */ body.is-glass-light .hero-stage.is-dragging .tile, body.is-glass-light .hero-stage.is-dragging .tile-wrap.is-snap-center > .tile { background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), 0 6px 18px -4px rgba(15, 23, 42, 0.14), 0 22px 40px -16px rgba(15, 23, 42, 0.22) !important; transition: none !important; } /* Hide every overlay layer + float-chips during drag — they're noise while three cards animate through each other. */ body.is-glass-light .hero-stage.is-dragging .tile-glass-edge, body.is-glass-light .hero-stage.is-dragging .tile-glass-shimmer, body.is-glass-light .hero-stage.is-dragging .tile::before, body.is-glass-light .hero-stage.is-dragging .tile::after, body.is-glass-light .hero-stage.is-dragging .tile-glow-border, body.is-glass-light .hero-stage.is-dragging .tile-scan, body.is-glass-light .hero-stage.is-dragging .float-chip { opacity: 0 !important; transition: none !important; } /* Normalize card heights so 3D shuffle looks consistent */ body.is-glass-light .tile { min-height: 360px !important; } /* Caustics WebGL canvas + Lai-Thai stay visible — same as desktop. The earlier "weird aura" was NOT from these layers; it was from the 100px tile-halo box-shadows overlapping in the narrow carousel zone. */ /* Beams SVG between desktop tiles — hide in carousel layout */ body.is-glass-light .stage-beams { display: none; } /* Hide expensive refraction layers (perf) */ body.is-glass-light .tile-glass-edge, body.is-glass-light .tile-glass-shimmer { display: none; } /* === PEEK CARDS (default) — lightweight: NO backdrop-filter, NO halo === This is the key fix. Halos on 3 close cards = bluish "carousel zone". Peek cards get a clean white opaque background with subtle drop-shadow. */ body.is-glass-light .tile { background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), 0 6px 18px -4px rgba(15, 23, 42, 0.14), 0 22px 40px -16px rgba(15, 23, 42, 0.22) !important; } /* === ACTIVE CARD — full Liquid Glass, NO colored glow halo === Coverflow 3D depth handles hierarchy, no need for glow aura. */ body.is-glass-light .tile-wrap.is-snap-center > .tile { background: rgba(255, 255, 255, 0.78) !important; backdrop-filter: blur(18px) saturate(150%) !important; -webkit-backdrop-filter: blur(18px) saturate(150%) !important; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), 0 10px 24px -8px rgba(15, 23, 42, 0.20), 0 32px 56px -20px rgba(15, 23, 42, 0.28) !important; } /* Iridescent border + animated tile-glow-border ONLY on active card. Animations on inactive cards = wasted compositor work + visual noise. */ body.is-glass-light .tile-wrap:not(.is-snap-center) .tile::after, body.is-glass-light .tile-wrap:not(.is-snap-center) .tile-glow-border, body.is-glass-light .tile-wrap:not(.is-snap-center) .tile-scan { display: none !important; } /* Hide float-chips on inactive cards (cleaner peek) */ body.is-glass-light .tile-wrap:not(.is-snap-center) .float-chip { opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } body.is-glass-light .tile-wrap.is-snap-center .float-chip { opacity: 1; transition: opacity 0.4s ease 0.15s; } /* Carousel indicator dots (active dot has progress fill) */ .stack-dots { display: flex; gap: 10px; justify-content: center; align-items: center; margin: 0; padding: 0; } .stack-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: rgba(15, 23, 42, 0.16); border: none; padding: 0; cursor: pointer; transition: width 0.5s cubic-bezier(0.34, 1.16, 0.64, 1), background 0.5s ease, border-radius 0.5s ease; overflow: hidden; } .stack-dot.is-active { width: 36px; border-radius: 5px; background: rgba(15, 23, 42, 0.10); } /* Dark BG — slate dots are invisible on the navy background. Switch to a warm cream tint so the inactive dots remain readable as a hint. */ body.is-glass-light.is-dark-bg .stack-dot { background: rgba(245, 232, 214, 0.28); } body.is-glass-light.is-dark-bg .stack-dot.is-active { background: rgba(245, 232, 214, 0.18); } .stack-dot.is-active::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #6592e6 0%, #06c755 100%); transform-origin: left center; animation: stack-dot-progress 4.5s linear forwards; } .stack-dot.is-paused.is-active::before { animation: none; transform: scaleX(1); /* show full bar when paused = "stopped here" */ opacity: 0.6; } @keyframes stack-dot-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } } /* Hide carousel-dots on desktop */ @media (min-width: 1024px) { .stack-dots { display: none; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { body.is-glass-light .tile-glass-shimmer { animation: none; opacity: 0.25; } } /* ============================================================ ★ TUNING LAYER 1 — IRIDESCENT BORDERS (Apple Vision Pro feel) Slow hue-shifting outline around each card, like oil-on-water. Uses ::after with a wide linear-gradient + bg-position animation masked to a 1.5px border ring. ============================================================ */ body.is-glass-light .tile { position: relative; } body.is-glass-light .tile::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; padding: 1.5px; background: linear-gradient(110deg, #6592e6 0%, #c8a2e0 12%, #ff8eb3 24%, #ffb37a 36%, #d4a574 48%, #b8d68a 60%, #06c755 72%, #64dcff 84%, #6592e6 100%); background-size: 280% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0.55; animation: iriShift 16s linear infinite; } body.is-glass-light .tile-google::after { animation-delay: 0s; } body.is-glass-light .tile-message::after { animation-delay: -5s; } body.is-glass-light .tile-booking::after { animation-delay: -10s; } @keyframes iriShift { 0% { background-position: 0% 50%; } 100% { background-position: 280% 50%; } } /* ============================================================ ★ TUNING LAYER 2 — SPECULAR HIGHLIGHT (sun-on-glass) A soft white spot follows the cursor on each card surface. --specular-x/y are set by glass-tuning.js (in %). No mix-blend-mode — pure additive white reads cleanly on the translucent glass backdrop. ============================================================ */ body.is-glass-light .tile::before { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background: radial-gradient( circle 320px at var(--specular-x, 50%) var(--specular-y, 50%), rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 70%); opacity: var(--specular-opacity, 0); transition: opacity 0.45s ease; } /* ============================================================ ★ TUNING LAYER 3 — CARD-TILT 3D (Apple Vision Pro) --tilt-x / --tilt-y are set by glass-tuning.js (in deg). Stronger perspective (900px) for more pronounced 3D effect. Override default transform transition to 0.18s so the card actually keeps up with the cursor instead of lagging 500ms behind. ============================================================ */ body.is-glass-light .tile-wrap { perspective: 900px; transform-style: preserve-3d; } body.is-glass-light .tile { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(0); transform-origin: center center; will-change: transform; transition: box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================ ★ TUNING LAYER 4 — MAGNETIC CTA --magnet-x / --magnet-y are set by glass-tuning.js (in px). Combined with hover translateY for the lift. ============================================================ */ body.is-glass-light .hero-cta { transform: translate(var(--magnet-x, 0px), var(--magnet-y, 0px)); transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.5s ease, box-shadow 0.5s ease, color 0.4s ease; } body.is-glass-light .hero-cta:hover { /* Combined: magnetic offset + 2px lift on hover */ transform: translate( var(--magnet-x, 0px), calc(var(--magnet-y, 0px) - 2px) ); } /* ============================================================ ★ DARK-BACKGROUND MODE — toggle via .is-dark-bg on body The Liquid Glass cards (refraction, halos, iridescence, specular, tilt) STAY THE SAME — only background, headline, CTA, eyebrow and trust-strip swap to dark-friendly tones. The caustic shader swaps its palette via JS observer. ============================================================ */ body.is-glass-light.is-dark-bg { background: #0a0d14; color: #f5e8d6; } body.is-glass-light.is-dark-bg #hero { background: linear-gradient(180deg, #0a0d14 0%, #131826 60%, #0d1422 100%); } body.is-glass-light.is-dark-bg .hero-mesh { /* CSS-only fallback — won't be visible while WebGL runs */ background: radial-gradient(ellipse 70% 60% at 25% 30%, rgba(101, 146, 230, 0.20) 0%, transparent 60%), radial-gradient(ellipse 60% 55% at 75% 50%, rgba(180, 200, 230, 0.12) 0%, transparent 55%), linear-gradient(180deg, #0a0d14 0%, #131826 60%, #0d1422 100%); } body.is-glass-light.is-dark-bg .hero-lai-thai { opacity: 0.06; mix-blend-mode: screen; background-image: url("data:image/svg+xml;utf8,"); } /* — Headline + Subline */ body.is-glass-light.is-dark-bg .hero-h1 { color: #f5e8d6; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); } body.is-glass-light.is-dark-bg .word-text { background-image: linear-gradient(105deg, #f5e8d6 0%, #f5e8d6 40%, #ffd4a8 50%, #f5e8d6 60%, #f5e8d6 100%); background-size: 220% 100%; background-position: 100% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } body.is-glass-light.is-dark-bg .word-dot { color: #d4a574; text-shadow: 0 0 18px rgba(212, 165, 116, 0.65); } /* Welle 5.7.5: Dark-BG active-dot nutzt jetzt den per-word Akzent statt Gold. Override entfernt sodass var(--word-accent) aus light-mode-Regel durchkommt. */ body.is-glass-light.is-dark-bg .hero-sub { /* Welle 5.22.6 — !important nötig: style.css `.hero-sub { color: ... }` ist unlayered und schlägt diese layered rule sonst aus. Opacity von 0.66 → 0.92 für klare Lesbarkeit über Mesh-Hintergrund. */ color: rgba(245, 232, 214, 0.92) !important; } body.is-glass-light.is-dark-bg .hero-sub strong { color: #f5e8d6; } /* — Eyebrow */ body.is-glass-light.is-dark-bg .hero-eyebrow { background: rgba(245, 232, 214, 0.06); border-color: rgba(212, 165, 116, 0.40); color: rgba(245, 232, 214, 0.88); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 4px 20px rgba(212, 165, 116, 0.20); } body.is-glass-light.is-dark-bg .eyebrow-dot { background: #06C755; box-shadow: 0 0 0 4px rgba(6, 199, 85, 0.22), 0 0 12px rgba(6, 199, 85, 0.45); } /* — CTA: miraTEQ-Blau auch im Dark-Mode (Welle 5.22.5). Konsistent zu Light-Mode + Nav-CTA. Blau leuchtet auf dunklem BG sehr clean. */ body.is-glass-light.is-dark-bg .hero-cta { background: linear-gradient(180deg, #1498D5 0%, #0E7CAF 100%); color: #ffffff; border-color: rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -0.5px 0 rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px -6px rgba(20, 152, 213, 0.50); } body.is-glass-light.is-dark-bg .hero-cta:hover { background: linear-gradient(180deg, #2BB0E5 0%, #1498D5 100%); color: #ffffff; border-color: rgba(255, 255, 255, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44), inset 0 -0.5px 0 rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.22), 0 12px 30px -6px rgba(43, 176, 229, 0.58); } /* — Trust strip */ body.is-glass-light.is-dark-bg .hero-trust { background: linear-gradient(135deg, rgba(245, 232, 214, 0.10) 0%, rgba(212, 165, 116, 0.08) 100%); border-color: rgba(212, 165, 116, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.30), 0 14px 40px -8px rgba(0, 0, 0, 0.48), 0 0 80px -10px rgba(212, 165, 116, 0.32); } body.is-glass-light.is-dark-bg .trust-cell-value, body.is-glass-light.is-dark-bg .trust-cell-num { color: #f5e8d6; } body.is-glass-light.is-dark-bg .trust-baht-symbol { color: #ffd4a8; } body.is-glass-light.is-dark-bg .trust-cell-label { color: rgba(245, 232, 214, 0.50); } body.is-glass-light.is-dark-bg .trust-stars { color: #ffd166; filter: drop-shadow(0 0 8px rgba(255, 209, 102, 0.55)); } body.is-glass-light.is-dark-bg .trust-lang-tag { background: rgba(212, 165, 116, 0.18); color: #ffd4a8; border-color: rgba(212, 165, 116, 0.45); } body.is-glass-light.is-dark-bg .trust-divider { background: linear-gradient(180deg, transparent 0%, rgba(212, 165, 116, 0.65) 30%, rgba(255, 200, 140, 0.85) 50%, rgba(212, 165, 116, 0.65) 70%, transparent 100%); } body.is-glass-light.is-dark-bg .scroll-hint { color: rgba(245, 232, 214, 0.50); } body.is-glass-light.is-dark-bg #next { background: linear-gradient(180deg, #0a0d14 0%, #131826 40%, #f5dcc1 100%); } /* Smooth crossfade when toggling .is-dark-bg (CTA has its own transition rule because it also handles magnet transform) */ body.is-glass-light, body.is-glass-light #hero, body.is-glass-light .hero-h1, body.is-glass-light .hero-sub, body.is-glass-light .hero-eyebrow, body.is-glass-light .hero-trust, body.is-glass-light .trust-cell-value, body.is-glass-light .trust-cell-num, body.is-glass-light .trust-cell-label, body.is-glass-light .trust-baht-symbol, body.is-glass-light .trust-stars, body.is-glass-light .trust-lang-tag { transition: background 0.6s ease, color 0.5s ease, border-color 0.5s ease, text-shadow 0.5s ease, box-shadow 0.5s ease, filter 0.5s ease; } /* ============================================================================ 4. Responsive Desktop-Skalierung (Welle 5.1a, Live-Site Adaption) ---------------------------------------------------------------------------- Prototype-Stage ist 700px hoch mit hardcoded Card-Positions (top:10/200/460, widths 340/285/290px). Auf Desktops <1400px wirken die Cards proportional zu groß und überlappen den Hero-Text. Wir skalieren die ganze Stage über `transform: scale` plus angepasste height (damit Layout-Flow mit-shrinkt). Mobile (max-width: 1023px) nutzt sein eigenes 3D-Shuffle-Layout in Section 3 oben, ist von dieser Skalierung ausgenommen. ============================================================================ */ @media (min-width: 1024px) and (max-width: 1199px) { body.is-glass-light .hero-stage { /* tile-wrap-booking endet bei left:350+width:290=640px. 640*0.78=499px aber rechte Spalte bei 1024px ≈ 483px → Overflow. 640*0.72=461px → passt. */ transform: scale(0.72); transform-origin: top center; height: 504px; /* 700 * 0.72 */ } } @media (min-width: 1200px) and (max-width: 1399px) { body.is-glass-light .hero-stage { transform: scale(0.88); transform-origin: top center; height: 616px; /* 700 * 0.88 */ } } /* 1400px+ → volle Größe (700px), keine Skalierung nötig. */ /* ========================================================================== Welle 5.1e — Tablet (769–1023px): 2-spaltiges Premium-Layout Einspaltiger Stack wirkt wie überdimensioniertes Phone. 2-spaltig (Text links / Carousel rechts) wie Desktop = professionell. ========================================================================== */ /* ========================================================================== Welle 5.1f — Mobile-First Tab-Switcher (0–1023px) ---------------------------------------------------------------------------- Stripe/Vercel/Intercom-Pattern: Single dominantes Visual + Pill-Tabs. 3D-Shuffle-Carousel raus (Card-Inhalte unleserlich, scrollt vorbei). 1 Card aktiv, andere fade out. Auto-Rotate alle 4s, pause-on-touch. Cards-Width: min(420px, 90vw) — auf iPad Mini ~376px breit, lesbar. ========================================================================== */ @media (max-width: 1023px) { /* ============================================================================ Welle 5.1h — Reduzierter Hero + Trust-Strip-Brücke ---------------------------------------------------------------------------- Hero hat NUR 4 Elemente: H1 → Sub → CTA → Card. Eyebrow und Trust gehen in eine eigene Trust-Strip-Section direkt nach Hero, die above-fold peekt. Hero ~700px → Trust-Strip ~140px peekt → iPhone 12 Pro 844px exakt voll. ============================================================================ */ .hero-tabs { display: flex !important; } /* Eyebrow + Trust-Bar komplett aus Hero entfernt — gehen in Trust-Strip-Section. body-prefix für Specificity 0,2,1 — schlägt jeden default + Critical-CSS */ body .hero-eyebrow, body.is-glass-light .hero-eyebrow { display: none !important; } body .hero-trust, body.is-glass-light .hero-trust { display: none !important; } /* Reihenfolge: h1 → sub → cta → tabs → STAGE (notification-stack) */ .hero-text { display: contents; } .hero-h1 { order: 2; } .hero-sub { order: 3; } .hero-cta { order: 4; } .hero-tabs { order: 5; } .hero-stage { order: 6; } .notification-stack { order: 6; } /* H1: dominanter — Apple-Style große, prominente Headline */ body.is-glass-light .hero-h1 { font-size: clamp(2.75rem, 9.2vw, 3.6rem); line-height: 0.98; letter-spacing: -0.04em; margin-bottom: 0; } /* Sub: 1-2 Zeilen, kompakter */ body.is-glass-light .hero-sub { font-size: 0.92rem; line-height: 1.45; margin-bottom: 0.3rem; max-width: none; } /* CTA: dezent zentriert auf Mobile */ body.is-glass-light .hero-cta { margin-top: 0.6rem; margin-bottom: 0; align-self: center; } /* Tab-Bar versteckt — alle 3 Cards sind als Bars immer sichtbar */ body.is-glass-light .hero-tabs { display: none !important; } body.is-glass-light .hero-container { gap: 0.85rem !important; } /* Hero kompakt: min-height auto, top-aligned */ #hero { min-height: auto; align-items: start; padding-bottom: 2.5rem; } body.is-glass-light #hero { padding-bottom: 2.5rem !important; padding-top: 5rem !important; } /* === Single-Card-Switcher (Tab-controlled) === */ /* Tile-wraps: alle absolute zentriert, default hidden, active visible */ body.is-glass-light .tile-wrap, body.is-glass-light .tile-wrap:has(.tile.is-paired) { display: none !important; position: absolute !important; top: 0 !important; left: 50% !important; width: min(420px, 90vw) !important; max-width: min(420px, 90vw) !important; height: auto !important; margin: 0 !important; transform: translateX(-50%) !important; opacity: 1 !important; pointer-events: auto !important; transition: none !important; z-index: 5 !important; } /* Active Tile sichtbar */ body.is-glass-light .hero-stage[data-active="tile-google"] .tile-wrap-google, body.is-glass-light .hero-stage[data-active="tile-message"] .tile-wrap-message, body.is-glass-light .hero-stage[data-active="tile-booking"] .tile-wrap-booking { display: block !important; } /* === iOS-Notification-Bar Pattern: 3 kompakte Bars stacked === */ /* Stage als flex-column, alle 3 Cards immer sichtbar als Mini-Bars */ body.is-glass-light .hero-stage { display: flex !important; flex-direction: column !important; gap: 0.5rem !important; height: auto !important; min-height: 0 !important; width: min(320px, 85vw) !important; max-width: min(320px, 85vw) !important; margin: 0 auto !important; perspective: none !important; transform-style: flat !important; transform: none !important; overflow: visible !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; justify-self: center; } /* Alle 3 tile-wraps sichtbar als kompakte Bars */ body.is-glass-light .tile-wrap, body.is-glass-light .tile-wrap:has(.tile.is-paired) { display: block !important; position: relative !important; top: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; z-index: auto !important; } body.is-glass-light .tile-wrap .tile { border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 12px rgba(82, 60, 30, 0.10), 0 1px 2px rgba(0, 0, 0, 0.04); } /* Tab-styled Browser-Bars + Float-chips weg in Bar-Mode */ body.is-glass-light .float-chip { display: none !important; } body.is-glass-light .tile-glass-edge, body.is-glass-light .tile-glass-shimmer, body.is-glass-light .tile-glow-border, body.is-glass-light .tile-scan { display: none !important; } /* Card als horizontale Mini-Bar: Header inline mit Body in 1-2 Zeilen */ body.is-glass-light .tile { display: flex !important; flex-direction: column !important; padding: 0 !important; overflow: hidden; } /* Header schmal (Brand-Identifier) */ body.is-glass-light .tile-bar { padding: 0.5rem 0.7rem !important; font-size: 0.72rem !important; min-height: auto !important; border-bottom: 1px solid rgba(82, 60, 30, 0.08); } body.is-glass-light .bar-dot { display: none !important; } body.is-glass-light .bar-url { font-size: 0.65rem !important; } body.is-glass-light .msg-name { font-size: 0.72rem !important; } body.is-glass-light .msg-status { font-size: 0.55rem !important; } body.is-glass-light .msg-channel { font-size: 0.5rem !important; padding: 0.1rem 0.35rem !important; } body.is-glass-light .bar-title { font-size: 0.72rem !important; } body.is-glass-light .msg-avatar-line, body.is-glass-light .msg-avatar-fb { width: 24px !important; height: 24px !important; } /* Body kompakt: nur 1 wichtige Zeile zeigen, Rest hidden */ body.is-glass-light .tile-body { padding: 0.55rem 0.7rem !important; gap: 0 !important; min-height: auto !important; background: none !important; } /* === GOOGLE BAR: Search-Bar zeigen + Top-Result === */ body.is-glass-light .g-logo, body.is-glass-light .g-result-dim, body.is-glass-light .tile-body-google .tile-stat { display: none !important; } body.is-glass-light .g-search { padding: 0.3rem 0.5rem !important; font-size: 0.7rem !important; margin-bottom: 0.4rem !important; border-radius: 999px; } body.is-glass-light .g-result-top { padding: 0.35rem 0 !important; gap: 0.5rem !important; border: 0 !important; background: none !important; } body.is-glass-light .g-fav { width: 20px !important; height: 20px !important; font-size: 0.6rem !important; flex: 0 0 auto; } body.is-glass-light .g-site { font-size: 0.6rem !important; } body.is-glass-light .g-title { font-size: 0.74rem !important; line-height: 1.2 !important; } body.is-glass-light .g-snippet, body.is-glass-light .g-bread { display: none !important; } /* === MESSAGE BAR: nur 1 outgoing-Bubble (Confirmed-Message) === */ body.is-glass-light .msg-day, body.is-glass-light .msg-bubble.msg-in, body.is-glass-light .msg-bubble.msg-in-fb, body.is-glass-light .msg-typing, body.is-glass-light .msg-typing-fb, body.is-glass-light .fb-engagement { display: none !important; } body.is-glass-light .msg-bubble.msg-out, body.is-glass-light .msg-bubble.msg-out-fb { font-size: 0.72rem !important; padding: 0.45rem 0.7rem !important; align-self: flex-end; max-width: 90% !important; } body.is-glass-light .msg-bubble .msg-time { display: none !important; } /* === BOOKING BAR: nur active slot === */ body.is-glass-light .cal-slot.cal-slot-open, body.is-glass-light .tile-body-cal .tile-stat { display: none !important; } body.is-glass-light .cal-slot.cal-slot-booked { padding: 0.45rem 0.6rem !important; font-size: 0.74rem !important; gap: 0.45rem !important; } body.is-glass-light .cal-time { font-size: 0.7rem !important; flex: 0 0 auto; } body.is-glass-light .cal-meta { font-size: 0.66rem !important; } body.is-glass-light .cal-check { width: 16px !important; height: 16px !important; } /* Stage-Beams (SVG-Verbindungen zwischen Cards) raus — nur 1 Card sichtbar */ .stage-beams { display: none !important; } /* Stack-dots (3D-Shuffle-Carousel-Indicator) raus */ .stack-dots { display: none !important; } } /* ============================================================================ Tab-Switcher UI (Pills + Magic-Pill-Indicator) ============================================================================ */ .hero-tabs { display: none; /* Default versteckt; Mobile/Tablet via @media oben */ position: relative; margin-top: 1.25rem; padding: 0.3rem; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); border: 1px solid rgba(212, 165, 116, 0.30); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 4px 14px rgba(82, 60, 30, 0.08); gap: 0.15rem; width: fit-content; align-items: center; } .hero-tab { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem; background: transparent; border: 0; border-radius: 999px; font-family: inherit; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; color: var(--text-mid); cursor: pointer; transition: color 280ms ease, transform 200ms ease; -webkit-tap-highlight-color: transparent; white-space: nowrap; } .hero-tab svg { transition: stroke 280ms ease, color 280ms ease; } .hero-tab.is-active { color: var(--text-strong); } .hero-tab:active { transform: scale(0.96); } .hero-tab-indicator { position: absolute; top: 0.3rem; bottom: 0.3rem; left: 0; width: 0; /* JS sets via transform/width */ background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(252, 247, 234, 0.85) 100%); border-radius: 999px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 8px rgba(82, 60, 30, 0.12), 0 0 0 1px rgba(212, 165, 116, 0.25); transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), width 380ms cubic-bezier(0.32, 0.72, 0, 1); z-index: 1; pointer-events: none; } /* Dark-mode (body.is-dark-bg) */ body.is-dark-bg .hero-tabs { background: rgba(15, 23, 42, 0.55); border-color: rgba(212, 165, 116, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 14px rgba(0, 0, 0, 0.30); } body.is-dark-bg .hero-tab { color: rgba(255, 240, 215, 0.65); } body.is-dark-bg .hero-tab.is-active { color: rgba(255, 250, 235, 0.98); } body.is-dark-bg .hero-tab-indicator { background: linear-gradient(135deg, rgba(212, 165, 116, 0.95) 0%, rgba(184, 137, 90, 0.85) 100%); box-shadow: 0 1px 0 rgba(255, 200, 140, 0.4) inset, 0 2px 8px rgba(0, 0, 0, 0.25); } @media (prefers-reduced-motion: reduce) { .hero-tab-indicator { transition: none; } } /* Welle 5.14: Trust-Strip wurde nach _shared/css/components/trust-strip.css extrahiert + modernisiert (Reveal via globale .reveal/.is-visible IO statt eigener .trust-strip.is-visible-Logik). */ /* ============================================================================ Welle 5.2 — Notification-Stack (Mobile-First, iOS-Lockscreen-Pattern) ---------------------------------------------------------------------------- 3 Liquid-Glass-Notifications zeigen Customer-Journey aus Owner-Sicht. Mobile-First (390px Base), progressive enhancement zu Tablet/Desktop. Existing tile-wraps + hero-stage hidden (nur State-Container für SM-JS). ============================================================================ */ /* Welle 5.2 hatte die hero-stage hidden weil notification-stack übernahm. Welle 5.5 bringt die Tiles auf Desktop zurück — Stage muss sichtbar sein. Auf Mobile (≤1023px) bleibt sie hidden via separate media query unten. */ @media (max-width: 1023px) { body .hero-stage, body.is-glass-light .hero-stage { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; max-width: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; opacity: 0 !important; pointer-events: none !important; display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; } } /* Tab-Bar weg — Notifications sind das Interface */ .hero-tabs { display: none !important; } /* === BASE: Mobile (390px iPhone 12 Pro) === */ /* WICHTIG: Notification-Stack kommt visuell UNTER dem Hero-Pitch. order:99 weil hero-text via display:contents seine children mit order 1-7 verteilt. */ /* === Stack-Container === ABSOLUTE positioning für die Cards, damit prepends keinen Layout-Shift verursachen. min-height reserviert den Platz für 3 Cards damit der Hero nicht zuckt sobald die erste Notification spawnt. */ .notification-stack { order: 99; position: relative; width: 100%; max-width: 380px; margin: 0.85rem auto 0; /* Reserve: 1 full card (~95px) + 2 × overlap (38px) ≈ 175px */ min-height: 175px; --notif-overlap: 38px; --notif-ease: cubic-bezier(0.32, 0.72, 0, 1); } /* === BASE Card === */ .notification-card { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 14px 14px; background: rgba(28, 28, 30, 0.58); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 0.5px solid rgba(255, 255, 255, 0.12); border-radius: 22px; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.10), 0 1px 2px rgba(0, 0, 0, 0.18), 0 6px 16px -4px rgba(0, 0, 0, 0.22); /* iOS smooth-spring für state changes (entry, settle, exit) */ transition: transform 600ms var(--notif-ease), opacity 450ms ease-out, filter 400ms ease-out, box-shadow 280ms ease; outline: none; overflow: hidden; isolation: isolate; transform-origin: top center; will-change: transform, opacity; /* Default (initial paint, before JS): unsichtbar oben außerhalb */ opacity: 0; transform: translateY(-50px) scale(1); } /* === LIFECYCLE via data-state === "entering" — frisch geprependet, noch oben außerhalb (Default reicht) "entered" — settled in stack-position via :nth-child Selektor unten "leaving" — rutscht weiter nach unten raus + fadet weg */ .notification-card[data-state="leaving"] { opacity: 0; transform: translateY(calc(var(--notif-overlap) * 3 + 24px)) scale(0.78); filter: blur(3px); pointer-events: none; z-index: 0; } /* === Fresh-Entry-Animation === Bei jedem neuen Spawn bekommt die Top-Card kurz die .is-fresh Klasse (~800ms). Animation: kommt mit Overshoot rein (cubic-bezier > 1.5 = leichtes "Bounce-back"), plus dezente Scale-Pulse (0.90 → 1.03 → 1.0) und Blur-out. iOS-Notification-Feel. Plus: subtiler accent-glow Ring für ~700ms damit User die "neue" sofort sieht. */ @keyframes notif-fresh-entry { 0% { transform: translateY(-72px) scale(0.90); opacity: 0; filter: blur(3px); } 55% { transform: translateY(4px) scale(1.030); opacity: 1; filter: blur(0); } 85% { transform: translateY(-1px) scale(0.998); } 100% { transform: translateY(0) scale(1); opacity: 1; filter: none; } } @keyframes notif-fresh-ring { 0% { opacity: 0; transform: scale(1.04); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } .notification-stack > .notification-card[data-state="entered"]:nth-child(1).is-fresh { animation: notif-fresh-entry 720ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } .notification-stack > .notification-card[data-state="entered"]:nth-child(1).is-fresh::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; pointer-events: none; border: 1.5px solid rgba(101, 146, 230, 0.40); opacity: 0; animation: notif-fresh-ring 700ms cubic-bezier(0.32, 0.72, 0, 1) both; } @media (prefers-reduced-motion: reduce) { .notification-card.is-fresh, .notification-card.is-fresh::before { animation: none !important; } } /* === STACK-POSITIONING === Specificity bumped via [data-state="entered"] damit nth-child Regeln die "entering"-Default-Transform NICHT überschreiben bevor JS state setzt. */ .notification-stack > .notification-card[data-state="entered"]:nth-child(1) { z-index: 4; transform: translateY(0) scale(1); opacity: 1; } .notification-stack > .notification-card[data-state="entered"]:nth-child(2) { z-index: 3; transform: translateY(var(--notif-overlap)) scale(0.94); opacity: 1; } .notification-stack > .notification-card[data-state="entered"]:nth-child(3) { z-index: 2; transform: translateY(calc(var(--notif-overlap) * 2)) scale(0.88); opacity: 1; } /* (Vertikales Drag/Pre-Spawn-Setup wurde entfernt — Tap-on-Mid/Back nutzt nur die existierenden :nth-child Stack-Transitions für Bring-to-Front-Animation.) */ /* (Hero-Stage-Col Wrapper + Search-Bar wurden entfernt — Notifications sind jetzt die alleinige Story-Einheit. Stärkere Notification-Texte + prägnantere Spawn-Animation übernehmen die Storytelling-Last.) */ /* nth-child(4+): nur kurz sichtbar zwischen prepend und JS-cleanup. JS markiert sie mit data-state="leaving" → leaving-Regel oben übernimmt die Exit-Animation. */ /* App-Icon — iOS-Spec: 38×38 mit iOS-Squircle (~22% Radius = 8.5px) */ .notification-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; /* Subtiler Schatten für Icon-Tiefe (wie auf iOS Homescreen) */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .notification-icon-google { background: #fff; padding: 7px; } .notification-icon-line { background: #06C755; } .notification-icon-fb { background: linear-gradient(135deg, #00B2FF 0%, #006AFF 35%, #5C6FFF 65%, #C840FF 100%); } .notification-icon-booking { background: transparent; padding: 0; } /* iOS-Calendar SVG hat eigenen weißen BG + roten Top */ /* Channel-Switch: zeige nur das Icon das zum aktuellen Channel passt */ .notification-card[data-channel="line"] .notification-icon-fb, .notification-card[data-channel="fb"] .notification-icon-line { display: none; } /* Notification-Content — iOS-Typo (SF Pro fallback auf system-ui) */ .notification-content { flex: 1 1 auto; min-width: 0; } /* App-Name + Time Header-Zeile — iOS Dark: weiß / weiß-secondary */ .notification-meta { display: flex; align-items: center; gap: 5px; font-size: 13px; line-height: 1.3; color: rgba(235, 235, 245, 0.6); /* iOS Dark Secondary-Label */ font-weight: 400; margin-bottom: 2px; letter-spacing: -0.08px; } .notification-app { font-weight: 600; color: #fff; /* iOS Dark Primary-Label */ } .notification-meta-sep { opacity: 0.5; } .notification-time { font-variant-numeric: tabular-nums; } /* Title — iOS-Spec: 15px Semibold weiß */ .notification-title { font-size: 15px; font-weight: 600; line-height: 1.27; color: #fff; margin: 0 0 1px; letter-spacing: -0.24px; /* iOS SF Pro Tracking bei 15px */ } /* Body — iOS-Spec: 15px Regular weiß (mit minimal reduzierter Saturierung) */ .notification-snippet { font-size: 15px; line-height: 1.35; font-weight: 400; line-height: 1.33; color: #fff; margin: 0; letter-spacing: -0.24px; /* Truncate nach 2 Zeilen — iOS-typisch */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Dark-Mode (body.is-dark-bg) — helle Liquid-Glass-Cards. Auf dunklem Hintergrund kommt das helle Frosted-White besser zur Geltung und kontrastiert spannender mit dem Dark-Page (Reverse-Swap zu Light-Mode). */ body.is-dark-bg .notification-card { background: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(0, 0, 0, 0.18), 0 8px 22px -4px rgba(0, 0, 0, 0.30); } body.is-dark-bg .notification-app, body.is-dark-bg .notification-title, body.is-dark-bg .notification-snippet { color: #000; } body.is-dark-bg .notification-meta { color: rgba(60, 60, 67, 0.6); } /* Reduced motion: keine Reveal-Animation, alles direkt sichtbar */ @media (prefers-reduced-motion: reduce) { .notification-card { opacity: 1 !important; transform: none !important; transition: none !important; } } /* === Tablet (768px+) — Progressive Enhancement === iOS-Maße bleiben gleich (Notifications sehen auf iPad genauso aus wie auf iPhone), nur die max-width des Stacks wird leicht großzügiger. */ @media (min-width: 768px) { .notification-stack { max-width: 440px; } } /* === Tablet 2-spaltig (768–1023px) — Welle 5.2h Hybrid Premium === Ab iPad Portrait Mini (768px) geht's 2-spaltig: Text links, Stack rechts. H1 kompakter weil schmalere Spalte (50% = 384px). CTA + Stack links-bündig für rigorose Vertical-Achse (statt zentriertem Floating-Look). Welle 5.1h display:contents auf hero-text wird overridet. */ @media (min-width: 768px) and (max-width: 1023px) { .hero-container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; } /* Override Welle 5.1h: hero-text bleibt grid-item (statt display:contents) */ .hero-text { display: flex !important; flex-direction: column; align-items: flex-start; align-self: center; } body.is-glass-light .hero-h1 { font-size: clamp(2rem, 4.2vw, 2.8rem); line-height: 0.98; } body.is-glass-light .hero-sub { font-size: 0.95rem; max-width: none; } /* CTA links-bündig (statt center) — konsistent mit Headline */ body.is-glass-light .hero-cta { align-self: flex-start; } .notification-stack { max-width: 360px; margin: 0; align-self: center; } body.is-glass-light #hero { min-height: auto; padding: 4rem 0 3.5rem; } } /* === iPad Pro Portrait + Landscape (960–1023px) — etwas großzügiger === Mehr Breite verfügbar → größere H1 + breiterer Stack, näher am Desktop-Look. */ @media (min-width: 960px) and (max-width: 1023px) { .hero-container { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 3rem; } body.is-glass-light .hero-h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); } body.is-glass-light .hero-sub { font-size: 1rem; } .notification-stack { max-width: 420px; } body.is-glass-light #hero { padding: 5rem 0 4rem; } } /* === Desktop (1024+) — 2-spaltiges Hero, gleiche iOS-Specs für die Cards. Hero content-driven (kein 100vh-Stretch), notification-stack landet automatisch in der rechten Grid-Spalte (Critical-CSS setzt grid-template-columns). */ @media (min-width: 1024px) { body.is-glass-light #hero { min-height: 86vh; padding: 10rem 0 6rem; display: flex; align-items: center; } .hero-text { align-self: center; } .notification-stack { max-width: 480px; margin: 0; align-self: center; justify-self: end; padding-bottom: 0; } /* Cards bleiben in iOS-Spec — kein Aufblasen auf Desktop */ /* Welle 5.2k — 4. Card auf Desktop sichtbar (Lockscreen-Fülle). State-Machine setzt MAX_VISIBLE=4 ab 1024px. */ .notification-stack > .notification-card[data-state="entered"]:nth-child(4) { z-index: 1; transform: translateY(calc(var(--notif-overlap) * 3)) scale(0.82); opacity: 1; } } /* ============================================================================ Welle 5.2 / Phase 2.5 — iOS-authentische Lockscreen Touch-Gesten ---------------------------------------------------------------------------- Verifiziert via support.apple.com/108781 (iOS 17/18 Notification-Verhalten). A. Swipe LEFT auf Top-Card → Card fliegt links raus, neue spawnt sofort. JS schreibt translateX live während Drag, snap-back bei < 70px. B. Long-press 450ms → Modal öffnen (iOS Touch-and-Hold = Expanded Preview). C. Tap → Modal (Fallback). D. Press-Feedback: Card minimal heller via filter (kein scale weil das mit :nth-child stack-positions kollidieren würde). E. Affordance-Hint: einmaliger Swipe-Left-Nudge ~1.4s nach Page-Load. touch-action: none auf Stack damit horizontaler Drag nicht mit Page-Scroll kollidiert. Page-Scroll passiert außerhalb des Stacks (Hero hat Padding). ============================================================================ */ /* ===== D. Press-Feedback ===== */ .notification-card[data-state="entered"] { cursor: pointer; } .notification-card[data-state="entered"]:active { filter: brightness(1.12); transition: filter 80ms ease-out, box-shadow 80ms ease-out; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.20), 0 14px 32px -4px rgba(0, 0, 0, 0.32); } /* ===== Stack Touch-Surface ===== */ .notification-stack { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: none; } .notification-stack.is-paused .notification-card[data-state="entered"] { filter: brightness(1.04); } /* ===== E. Affordance-Hint ===== Einmaliger Swipe-Left-Hint der Top-Card ~900ms nach erstem Spawn. 12px nach links + kurzes Verharren + zurück. Kommuniziert "wisch mich nach links" ohne Text — iOS-User erkennen die Geste sofort wieder. */ @keyframes notif-swipe-hint { 0% { transform: translateX(0) translateY(0) scale(1); } 30% { transform: translateX(-12px) translateY(0) scale(1); } 50% { transform: translateX(-12px) translateY(0) scale(1); } 100% { transform: translateX(0) translateY(0) scale(1); } } .notification-stack.is-hint-ready > .notification-card[data-state="entered"]:nth-child(1) { animation: notif-swipe-hint 900ms cubic-bezier(0.32, 0.72, 0, 1) 1; } @media (prefers-reduced-motion: reduce) { .notification-stack.is-hint-ready > .notification-card[data-state="entered"]:nth-child(1) { animation: none; } } /* ===== D. Modal — iOS-Style Expand-from-Notification (FLIP) ===== Modal-Sheet expandiert von der Position der getappten Notification-Card. Theme-aware: matched den Glass-Look der Cards (dark glass auf light hero, light glass auf dark hero). Position + Größe wird per JS gesetzt für die FLIP-Animation; CSS regelt nur den visuellen Style. */ .notif-modal { position: fixed; inset: 0; z-index: 9999; pointer-events: none; visibility: hidden; } .notif-modal[aria-hidden="false"] { pointer-events: auto; visibility: visible; } .notif-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); opacity: 0; transition: opacity 320ms ease; cursor: pointer; } .notif-modal[aria-hidden="false"] .notif-modal-backdrop { opacity: 1; } /* Sheet startet "wie eine Card" und expandiert via JS-controlled top/left/width/height. Default-Style matcht .notification-card (dark glass auf light hero). */ .notif-modal-sheet { position: fixed; /* JS setzt top/left/width/height für FLIP */ top: 0; left: 0; width: 0; height: 0; background: rgba(28, 28, 30, 0.78); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border: 0.5px solid rgba(255, 255, 255, 0.14); border-radius: 22px; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.14), 0 1px 2px rgba(0, 0, 0, 0.20), 0 24px 60px -12px rgba(0, 0, 0, 0.50); color: #fff; overflow: hidden; opacity: 0; /* JS toggelt transition zwischen "none" (initial position) und "spring" (animate) */ } /* Dark Hero (body.is-dark-bg) → Light-Glass Modal (matched light cards) */ body.is-dark-bg .notif-modal-sheet { background: rgba(255, 255, 255, 0.92); border-color: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(0, 0, 0, 0.20), 0 24px 60px -12px rgba(0, 0, 0, 0.45); color: #000; } /* Inhalts-Container: Padding + Layout, scrollbar wenn Inhalt zu groß. */ .notif-modal-sheet-inner { position: absolute; inset: 0; padding: 22px 22px 24px; display: flex; flex-direction: column; overflow-y: auto; opacity: 0; /* fadet nach Expand-Animation ein */ transition: opacity 220ms ease 180ms; } .notif-modal[aria-hidden="false"] .notif-modal-sheet-inner { opacity: 1; } .notif-modal-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.14); border: none; border-radius: 50%; color: rgba(255, 255, 255, 0.85); cursor: pointer; z-index: 2; transition: background 180ms ease, color 180ms ease; } .notif-modal-close:hover { background: rgba(255, 255, 255, 0.22); color: #fff; } .notif-modal-close:active { background: rgba(255, 255, 255, 0.28); } body.is-dark-bg .notif-modal-close { background: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.65); } body.is-dark-bg .notif-modal-close:hover { background: rgba(0, 0, 0, 0.14); color: #000; } body.is-dark-bg .notif-modal-close:active { background: rgba(0, 0, 0, 0.18); } .notif-modal-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 4px 0 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); flex: 0 0 auto; } .notif-modal-icon-google { background: #fff; padding: 10px; } .notif-modal-icon-line { background: #06C755; } .notif-modal-icon-fb { background: linear-gradient(135deg, #00B2FF 0%, #006AFF 35%, #5C6FFF 65%, #C840FF 100%); } .notif-modal-icon-booking { background: transparent; } .notif-modal-title { font-size: 1.35rem; font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; color: inherit; margin: 0 0 0.6rem; padding-right: 32px; } .notif-modal-body { font-size: 0.95rem; line-height: 1.5; color: inherit; opacity: 0.78; margin: 0 0 1.4rem; flex: 1 1 auto; } /* Modal-CTA — kompakt + Premium-Material wie Hero-CTA (eckig, hairline border). */ .notif-modal-cta { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; gap: 0.45rem; padding: 0.65rem 1.15rem; background: linear-gradient(180deg, #2d2d2f 0%, #141416 100%); color: #fff; font-size: 0.88rem; font-weight: 600; letter-spacing: -0.005em; border-radius: 10px; border: 0.5px solid rgba(255, 255, 255, 0.08); text-decoration: none; flex: 0 0 auto; position: relative; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -0.5px 0 rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.20), 0 6px 18px -4px rgba(0, 0, 0, 0.45); transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 240ms ease, background 260ms ease, border-color 240ms ease; } .notif-modal-cta:hover { transform: translateY(-1px); background: linear-gradient(180deg, #3a3a3c 0%, #1a1a1c 100%); border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -0.5px 0 rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.22), 0 10px 24px -6px rgba(0, 0, 0, 0.52); } .notif-modal-cta:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -0.5px 0 rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.22), 0 3px 10px -3px rgba(0, 0, 0, 0.40); } .notif-modal-cta:focus { outline: none; } .notif-modal-cta:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.50); outline-offset: 3px; } /* Reduced-Motion: keine Animation */ @media (prefers-reduced-motion: reduce) { .notif-modal-sheet, .notif-modal-backdrop, .notif-modal-sheet-inner { transition: none !important; } } /* ════════════════════════════════════════════════════════════════════════════ WELLE 5.3 v6 — LIVING LOGO CARDS ──────────────────────────────────────────────────────────────────────────── 5 Service/App-Cards werden zu großen App-Icon-Style-Tiles mit: - Voll-Akzent-Background (Gradient) - Custom animiertes Logo dominant zentral (60-70% Card) - Glass-Text-Overlay unten (Brand + 1-Liner + CTA) - Konsistente Brand-Familie (verwandte SVG-Primitives) - Pro Logo eigene CSS-Animation ═══════════════════════════════════════════════════════════════════════════ */ /* === Living Logo Card Foundation === */ .suite-grid > .suite-card.suite-card--living { padding: 0; background: radial-gradient(ellipse 100% 60% at 30% 0%, rgba(255, 255, 255, 0.18) 0%, transparent 60%), linear-gradient(160deg, var(--card-accent) 0%, var(--card-accent-soft, var(--card-accent)) 100%); border: 1px solid rgba(0, 0, 0, 0.12); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) inset, 0 -1px 0 rgba(0, 0, 0, 0.10) inset, 0 18px 36px -12px var(--card-glow-color, rgba(184, 137, 90, 0.35)), 0 6px 12px rgba(0, 0, 0, 0.08); overflow: hidden; display: flex; flex-direction: column; min-height: 340px; } @media (min-width: 768px) { .suite-card--living { min-height: 380px; } } @media (min-width: 1024px) { .suite-card--living { min-height: 380px; } } body.is-dark-bg .suite-card--living { border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 -1px 0 rgba(0, 0, 0, 0.30) inset, 0 22px 44px -12px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.30); } /* === Living Logo Stage (top portion, 60-65% of card) === */ .suite-card--living .living-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.75rem 1.5rem 1rem; position: relative; z-index: 1; } /* === Brand-Icon: Microsoft-Office-Style Logo (Letter + Symbol + Material) === */ .brand-icon { position: relative; width: 150px; height: 150px; border-radius: 33px; /* iOS 22% Squircle */ display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; background: /* Specular Highlight oben links */ radial-gradient(ellipse 70% 50% at 22% 10%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.0) 60%), /* Top-Sheen + Bottom-Darken */ linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.0) 35%, rgba(0, 0, 0, 0.10) 100%), /* Base Brand-Gradient */ linear-gradient(160deg, color-mix(in srgb, var(--card-accent) 100%, white 8%) 0%, color-mix(in srgb, var(--card-accent) 100%, black 8%) 100%); box-shadow: /* Akzent-tinted Drop-Shadow */ 0 18px 36px -10px var(--card-glow-color, rgba(184, 137, 90, 0.50)), 0 6px 12px rgba(0, 0, 0, 0.15), 0 0 0 0.5px rgba(0, 0, 0, 0.10), /* Inner Highlight oben + Bottom Darken */ inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -2.5px 6px rgba(0, 0, 0, 0.18); } @media (min-width: 768px) { .brand-icon { width: 168px; height: 168px; border-radius: 37px; } } @media (min-width: 1024px) { .brand-icon { width: 175px; height: 175px; border-radius: 38px; } } /* Glanz-Layer 2 — Sheen oben für 3D-Refraktion */ .brand-icon::before { content: ''; position: absolute; top: 1px; left: 1px; right: 1px; height: 50%; border-radius: 32px 32px 60% 60% / 32px 32px 100% 100%; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100% ); pointer-events: none; mix-blend-mode: overlay; z-index: 5; } /* Edge-stroke for premium definition */ .brand-icon::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255, 255, 255, 0.20); pointer-events: none; z-index: 6; } /* Pattern (subtle decoration BG) */ .brand-icon .brand-pattern { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.18; } .brand-icon .brand-pattern * { stroke: #ffffff; fill: #ffffff; } /* Decoration (foreground symbols behind letter) */ .brand-icon .brand-decoration { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; } .brand-icon .brand-decoration * { stroke: rgba(255, 255, 255, 0.70); fill: none; stroke-width: 2.5; } /* Letter (Microsoft Office-Style, dominant zentral) */ .brand-icon .brand-letter { position: relative; z-index: 3; font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 84px; font-weight: 800; letter-spacing: -0.04em; color: #ffffff; line-height: 1; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.40), 0 2px 6px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.10); } @media (min-width: 768px) { .brand-icon .brand-letter { font-size: 96px; } } @media (min-width: 1024px) { .brand-icon .brand-letter { font-size: 100px; } } /* Accent (overlay with star/needle/check/etc — top-right corner) */ .brand-icon .brand-accent { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; } .brand-icon .brand-accent * { stroke: #ffffff; fill: #ffffff; } /* Floating animation on the whole icon — adds life */ .suite-card.is-visible .brand-icon { animation: anim-brand-float 5s ease-in-out infinite; } @keyframes anim-brand-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(-0.6deg); } } /* Hover: Icon pops out + tilts */ @media (hover: hover) and (pointer: fine) { .suite-card--living:hover .brand-icon { animation: none; transform: scale(1.06) rotate(-3deg) translateY(-3px) !important; box-shadow: 0 28px 48px -12px var(--card-glow-color, rgba(184, 137, 90, 0.65)), 0 10px 18px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.10), inset 0 2px 0 rgba(255, 255, 255, 0.65), inset 0 -2.5px 6px rgba(0, 0, 0, 0.20) !important; } } /* ╔═══════════════════════════════════════════════════════════════════════════╗ ║ v9 LIVING CONTEXT OVERLAY — Brand+Pulse · Function · Live-Data · Stories ║ ║ Logo bleibt static (kommt von Claude Design). Wow durch Kontext: ║ ║ Live-Pulse, Number-Counter, Stories-Rotation, Cursor-Glow. ║ ╚═══════════════════════════════════════════════════════════════════════════╝ */ .suite-card--living .living-overlay { background: linear-gradient(180deg, rgba(255, 255, 255, 0.0) 0%, rgba(0, 0, 0, 0.22) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.16) 100%); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border-top: 1px solid rgba(255, 255, 255, 0.22); padding: 0.95rem 1.15rem 1.05rem; color: #ffffff; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0.32rem; } /* Legacy — versteckt für sauberen DOM-Fallback */ .suite-card--living .living-tag { display: none; } /* === v9 Living-Head: Brand-Title + Live-Pulse one row === */ .suite-card--living .living-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0; } .suite-card--living .living-brand { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.015em; color: #ffffff; margin: 0; line-height: 1.2; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); } @media (min-width: 768px) { .suite-card--living .living-brand { font-size: 1.1rem; } } /* === v9 Live-Pulse — pulsating dot + label pill === */ .living-pulse { display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.22rem 0.5rem 0.22rem 0.42rem; background: rgba(255, 255, 255, 0.16); border: 0.5px solid rgba(255, 255, 255, 0.22); border-radius: 100px; font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); flex-shrink: 0; user-select: none; } .living-pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7), 0 0 6px rgba(255, 255, 255, 0.55); flex-shrink: 0; } .suite-card.is-visible .living-pulse-dot { animation: anim-pulse-dot 2.4s ease-out infinite; } @keyframes anim-pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7), 0 0 6px rgba(255, 255, 255, 0.55); } 50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0), 0 0 6px rgba(255, 255, 255, 0.55); } } .living-pulse-label { line-height: 1; } /* === v9 Function-Label — small uppercase descriptor === */ .suite-card--living .living-function { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin: 0; line-height: 1.3; } /* === v9 Live-Data Strip === */ .suite-card--living .living-data { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 0 0.4rem; margin-top: 0.1rem; border-top: 0.5px solid rgba(255, 255, 255, 0.20); } .living-data-row { display: inline-flex; align-items: baseline; gap: 0.18rem; flex-shrink: 0; } .living-data-num { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: #ffffff; line-height: 1; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.20); } @media (min-width: 768px) { .living-data-num { font-size: 1.55rem; } } .living-data-unit { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.82); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } .living-data-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.74); line-height: 1.25; flex: 1; min-width: 0; } /* === v9 Stories — 3 rotating real customer stories === */ .suite-card--living .living-stories { position: relative; height: 1.35em; list-style: none; margin: 0.05rem 0 0; padding: 0; overflow: hidden; font-size: 0.78rem; line-height: 1.3; } .living-story { position: absolute; inset: 0; color: rgba(255, 255, 255, 0.85); font-weight: 500; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(8px); } .suite-card.is-visible .living-story--1 { animation: anim-story-cycle 12s ease-in-out 0s infinite; } .suite-card.is-visible .living-story--2 { animation: anim-story-cycle 12s ease-in-out 4s infinite; } .suite-card.is-visible .living-story--3 { animation: anim-story-cycle 12s ease-in-out 8s infinite; } @keyframes anim-story-cycle { 0% { opacity: 0; transform: translateY(8px); } 4%, 30% { opacity: 1; transform: translateY(0); } 34%, 100% { opacity: 0; transform: translateY(-6px); } } /* === v9 CTA — small text-link mit Pfeil === */ .suite-card--living .living-cta { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.45rem; padding: 0; background: transparent; border: none; font-family: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.94); text-decoration: none; align-self: flex-start; cursor: pointer; transition: gap 280ms cubic-bezier(0.32, 0.72, 0, 1), color 200ms ease-out; } .suite-card--living .living-cta svg { width: 14px; height: 14px; transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1); } @media (hover: hover) and (pointer: fine) { .suite-card--living:hover .living-cta { gap: 0.6rem; color: #ffffff; } .suite-card--living:hover .living-cta svg { transform: translateX(3px); } } /* Reduced motion: stories static (1 visible only) === */ @media (prefers-reduced-motion: reduce) { .suite-card.is-visible .living-pulse-dot, .suite-card .living-story--1, .suite-card .living-story--2, .suite-card .living-story--3 { animation: none !important; } .suite-card .living-story--1 { opacity: 1 !important; transform: none !important; } .suite-card .living-story--2, .suite-card .living-story--3 { opacity: 0 !important; } } /* Hover: Card dramatically lifts with 3D tilt + glow intensifies */ @media (hover: hover) and (pointer: fine) { .suite-card--living { transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 450ms cubic-bezier(0.32, 0.72, 0, 1) !important; } .suite-card--living:hover { transform: translateY(-10px) rotateX(2deg) scale(1.02) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 -1px 0 rgba(0, 0, 0, 0.10) inset, 0 40px 72px -16px var(--card-glow-color, rgba(184, 137, 90, 0.65)), 0 16px 28px rgba(0, 0, 0, 0.16) !important; } body.is-dark-bg .suite-card--living:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.20) inset, 0 -1px 0 rgba(0, 0, 0, 0.30) inset, 0 44px 80px -16px rgba(0, 0, 0, 0.75), 0 18px 32px rgba(0, 0, 0, 0.40) !important; } } /* === v9 Scroll-Parallax — subtle Y-translate on Desktop ============ --parallax-y wird via JS gesetzt (-8..+8px range). Specificity-Boost via 3 chained classes (.suite-card.suite-card--living.is-visible) weil .suite-card.is-visible (Reveal-Rule bei ~5583) sonst überschreibt. Hover-Transform überschreibt zusätzlich mit !important (Hover hat Vorrang). */ @media (hover: hover) and (pointer: fine) and (min-width: 1024px) { .suite-card.suite-card--living.is-visible { transform: translate3d(0, var(--parallax-y, 0px), 0); transition: opacity 600ms cubic-bezier(0.32, 0.72, 0, 1), transform 240ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 450ms cubic-bezier(0.32, 0.72, 0, 1), border-color 250ms ease-out; will-change: transform; } } /* === v9 Cursor-Following Glow ON LIVING CARD ===== Stripe/Linear-Pattern: radial gradient folgt Cursor. --mouse-x / --mouse-y werden via JS gesetzt. */ .suite-card--living::after { content: ''; position: absolute; inset: 0; background: radial-gradient( 240px 240px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.0) 60% ); pointer-events: none; opacity: 0; transition: opacity 320ms ease-out; z-index: 3; border-radius: inherit; mix-blend-mode: soft-light; } @media (hover: hover) and (pointer: fine) { .suite-card--living:hover::after { opacity: 1; } } /* === v9 Stage padding tightened (more room for richer overlay) === */ .suite-card--living .living-stage { padding: 1.5rem 1.5rem 0.85rem; } /* === v9 Card Min-Height angepasst für zusätzlichen Content === */ .suite-card--living { min-height: 380px; } @media (min-width: 600px) { .suite-card--living { min-height: 410px; } } @media (min-width: 1024px) { .suite-card--living { min-height: 420px; } } /* ╔═══════════════════════════════════════════════════════════════════════════╗ ║ BRAND-ICON ANIMATIONS — Pro Logo unique animation per accent ║ ╚═══════════════════════════════════════════════════════════════════════════╝ */ /* === Marketing: Skyrocket-M with Star-Burst Accent === */ .brand-marketing .trail { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 2.2; stroke-dasharray: 70; stroke-dashoffset: 70; } .suite-card.is-visible .brand-marketing .trail-left { animation: anim-trail-draw 4.5s ease-in-out 0.3s infinite; } .suite-card.is-visible .brand-marketing .trail-right { animation: anim-trail-draw 4.5s ease-in-out 0.5s infinite; } @keyframes anim-trail-draw { 0% { stroke-dashoffset: 70; opacity: 0; } 20% { stroke-dashoffset: 70; opacity: 0.4; } 45% { stroke-dashoffset: 0; opacity: 1; } 75% { stroke-dashoffset: 0; opacity: 1; } 90% { stroke-dashoffset: -70; opacity: 0; } 100% { stroke-dashoffset: -70; opacity: 0; } } .brand-marketing .spark { opacity: 0; } .suite-card.is-visible .brand-marketing .spark-1 { animation: anim-spark-pop 4.5s ease-out 1.0s infinite; } .suite-card.is-visible .brand-marketing .spark-2 { animation: anim-spark-pop 4.5s ease-out 1.2s infinite; } .brand-marketing .star-core { opacity: 0; transform-origin: 78px 22px; } .suite-card.is-visible .brand-marketing .star-core { animation: anim-star-pop 4.5s ease-in-out 1.5s infinite; } .brand-marketing .ray { stroke: rgba(255, 255, 255, 0.95); stroke-width: 1.8; fill: none; opacity: 0; transform-origin: 78px 22px; } .suite-card.is-visible .brand-marketing .ray { animation: anim-ray-burst 4.5s ease-out 1.6s infinite; } .brand-marketing .ray-1 { animation-delay: 1.6s !important; } .brand-marketing .ray-2 { animation-delay: 1.65s !important; } .brand-marketing .ray-3 { animation-delay: 1.7s !important; } .brand-marketing .ray-4 { animation-delay: 1.75s !important; } .brand-marketing .ray-5 { animation-delay: 1.8s !important; } .brand-marketing .ray-6 { animation-delay: 1.75s !important; } .brand-marketing .ray-7 { animation-delay: 1.7s !important; } .brand-marketing .ray-8 { animation-delay: 1.65s !important; } /* === Consulting: Compass with Rotating Needle === */ .brand-consulting .compass-ring { fill: none; stroke: rgba(255, 255, 255, 0.42); stroke-width: 2; stroke-dasharray: 240; stroke-dashoffset: 240; } .suite-card.is-visible .brand-consulting .compass-ring { animation: anim-compass-draw 6s ease-in-out 0.3s infinite; } @keyframes anim-compass-draw { 0% { stroke-dashoffset: 240; opacity: 0; } 20% { stroke-dashoffset: 0; opacity: 1; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 240; opacity: 0; } } .brand-consulting .tick { stroke: rgba(255, 255, 255, 0.55); stroke-width: 2; } .brand-consulting .needle { transform-origin: 78px 32px; } .suite-card.is-visible .brand-consulting .needle { animation: anim-needle-spin 5s linear infinite; } @keyframes anim-needle-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .brand-consulting .needle-n { fill: rgba(255, 255, 255, 0.95); stroke: none; } .brand-consulting .needle-pivot { fill: rgba(255, 255, 255, 0.95); stroke: none; } /* === Bookmi: Calendar-B with Check-Mark === */ .brand-bookmi .cal-binding { stroke: rgba(255, 255, 255, 0.65); fill: none; } .brand-bookmi .check-bg { fill: rgba(255, 255, 255, 0.95); stroke: none; transform-origin: 78px 78px; opacity: 0; } .brand-bookmi .check-mark { stroke: var(--card-accent); fill: none; stroke-dasharray: 18; stroke-dashoffset: 18; } .suite-card.is-visible .brand-bookmi .check-bg { animation: anim-check-bg-pop 4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s infinite; } .suite-card.is-visible .brand-bookmi .check-mark { animation: anim-check-mark-draw 4s ease-out 0.9s infinite; } @keyframes anim-check-bg-pop { 0% { opacity: 0; transform: scale(0.4); } 15% { opacity: 1; transform: scale(1.1); } 25% { opacity: 1; transform: scale(1); } 78% { opacity: 1; transform: scale(1); } 90% { opacity: 0; transform: scale(0.7); } 100% { opacity: 0; transform: scale(0.4); } } @keyframes anim-check-mark-draw { 0%, 18% { stroke-dashoffset: 18; } 35% { stroke-dashoffset: 0; } 85% { stroke-dashoffset: 0; } 93%, 100% { stroke-dashoffset: 18; } } /* === Yummi: Y with Steam + Bowl === */ .brand-yummi .steam { stroke: rgba(255, 255, 255, 0.50); fill: none; stroke-width: 2.5; stroke-linecap: round; } .suite-card.is-visible .brand-yummi .steam-left { animation: anim-steam-wave-left 3.5s ease-in-out infinite; transform-origin: 28px 38px; } .suite-card.is-visible .brand-yummi .steam-right { animation: anim-steam-wave-right 3.8s ease-in-out infinite; transform-origin: 72px 38px; } @keyframes anim-steam-wave-left { 0%, 100% { opacity: 0.4; transform: translateY(0) translateX(0); } 50% { opacity: 0.8; transform: translateY(-3px) translateX(-2px); } } @keyframes anim-steam-wave-right { 0%, 100% { opacity: 0.4; transform: translateY(0) translateX(0); } 50% { opacity: 0.8; transform: translateY(-3px) translateX(2px); } } .brand-yummi .bowl-rim { stroke: rgba(255, 255, 255, 0.95); fill: none; } .brand-yummi .bowl-body { stroke: rgba(255, 255, 255, 0.95); fill: none; stroke-linecap: round; } .suite-card.is-visible .brand-yummi .bowl-rim { animation: anim-bowl-pulse 4s ease-in-out infinite; transform-origin: 50px 80px; } @keyframes anim-bowl-pulse { 0%, 100% { transform: scaleX(1); opacity: 0.95; } 50% { transform: scaleX(1.04); opacity: 1; } } /* === Shopmi: S with Bag-Handle + Sparkle === */ .brand-shopmi .bag-handle { stroke: rgba(255, 255, 255, 0.55); fill: none; } .brand-shopmi .tag-hole { fill: rgba(255, 255, 255, 0.95); stroke: none; } .brand-shopmi .tag-string { stroke: rgba(255, 255, 255, 0.85); fill: none; } .brand-shopmi .bag-sparkle { fill: #ffffff; stroke: none; opacity: 0; } .suite-card.is-visible .brand-shopmi .bag-sparkle { animation: anim-sparkle-flash 5s ease-out infinite; } @keyframes anim-sparkle-flash { 0%, 30% { opacity: 0; transform: scale(0); } 35% { opacity: 1; transform: scale(2.5); } 45% { opacity: 0; transform: scale(3); } 100% { opacity: 0; transform: scale(0); } } /* ╔═══════════════════════════════════════════════════════════════════════════╗ ║ LEGACY: Living Logo SVG-only stroke (vor v6 brand-icon-Update) ║ ║ Behält für Backward-Compat falls noch live HTML vorhanden ║ ╚═══════════════════════════════════════════════════════════════════════════╝ */ /* All living-logo SVG strokes default to white with consistent weight */ .living-logo { stroke: rgba(255, 255, 255, 0.95); stroke-width: 2.2; } /* ─── Marketing: Skyrocket-M ─── */ .living-marketing .trail { fill: none; stroke-dasharray: 60; stroke-dashoffset: 60; opacity: 0; } .suite-card.is-visible .living-marketing .trail-left { animation: anim-trail-draw 4s cubic-bezier(0.32, 0.72, 0, 1) 0.3s infinite; } .suite-card.is-visible .living-marketing .trail-right { animation: anim-trail-draw 4s cubic-bezier(0.32, 0.72, 0, 1) 0.5s infinite; } @keyframes anim-trail-draw { 0% { stroke-dashoffset: 60; opacity: 0; } 20% { stroke-dashoffset: 60; opacity: 0.5; } 45% { stroke-dashoffset: 0; opacity: 1; } 75% { stroke-dashoffset: 0; opacity: 1; } 90% { stroke-dashoffset: -60; opacity: 0; } 100% { stroke-dashoffset: -60; opacity: 0; } } .living-marketing .spark { fill: rgba(255, 255, 255, 0.95); stroke: none; opacity: 0; } .suite-card.is-visible .living-marketing .spark-1 { animation: anim-spark-pop 4s ease-out 1.0s infinite; } .suite-card.is-visible .living-marketing .spark-2 { animation: anim-spark-pop 4s ease-out 1.1s infinite; } .suite-card.is-visible .living-marketing .spark-3 { animation: anim-spark-pop 4s ease-out 1.4s infinite; } .suite-card.is-visible .living-marketing .spark-4 { animation: anim-spark-pop 4s ease-out 1.5s infinite; } @keyframes anim-spark-pop { 0%, 30% { opacity: 0; transform: scale(0); } 40% { opacity: 1; transform: scale(1.4); } 60% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; transform: scale(0); } } .living-marketing .star-core { fill: #ffffff; stroke: none; opacity: 0; transform-origin: 40px 22px; } .suite-card.is-visible .living-marketing .star-core { animation: anim-star-pop 4s ease-in-out 1.6s infinite; } @keyframes anim-star-pop { 0%, 30% { opacity: 0; transform: scale(0); } 40% { opacity: 1; transform: scale(1.5); } 50% { opacity: 1; transform: scale(1); } 85% { opacity: 1; transform: scale(1); } 95%, 100%{ opacity: 0; transform: scale(0.4); } } .living-marketing .ray { stroke: rgba(255, 255, 255, 0.95); stroke-width: 1.8; opacity: 0; transform-origin: 40px 22px; transform: scale(0.3); } .suite-card.is-visible .living-marketing .ray { animation: anim-ray-burst 4s ease-out 1.7s infinite; } .living-marketing .ray-1 { animation-delay: 1.7s !important; } .living-marketing .ray-2 { animation-delay: 1.75s !important; } .living-marketing .ray-3 { animation-delay: 1.8s !important; } .living-marketing .ray-4 { animation-delay: 1.85s !important; } .living-marketing .ray-5 { animation-delay: 1.9s !important; } .living-marketing .ray-6 { animation-delay: 1.85s !important; } .living-marketing .ray-7 { animation-delay: 1.8s !important; } .living-marketing .ray-8 { animation-delay: 1.75s !important; } @keyframes anim-ray-burst { 0%, 30% { opacity: 0; transform: scale(0.3); } 45% { opacity: 1; transform: scale(1); } 70% { opacity: 0.4; transform: scale(0.85); } 90%, 100%{ opacity: 0; transform: scale(0.3); } } .living-marketing .pin-bg { fill: rgba(255, 255, 255, 0.95); stroke: none; opacity: 0; transform-origin: 16px 63px; } .living-marketing .pin-num { font-family: 'SF Pro Text', system-ui, sans-serif; font-size: 9px; font-weight: 700; fill: var(--card-accent); stroke: none; opacity: 0; } .suite-card.is-visible .living-marketing .pin-bg, .suite-card.is-visible .living-marketing .pin-num { animation: anim-pin-rise 4s cubic-bezier(0.32, 0.72, 0, 1) 2.0s infinite; } @keyframes anim-pin-rise { 0%, 40% { opacity: 0; transform: translateY(8px) scale(0.6); } 55% { opacity: 1; transform: translateY(0) scale(1.1); } 65%, 88% { opacity: 1; transform: translateY(0) scale(1); } 95%, 100%{ opacity: 0; transform: translateY(-4px) scale(0.7); } } /* ─── Consulting: Compass-C ─── */ .living-consulting .compass-ring { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 2; stroke-dasharray: 201; stroke-dashoffset: 201; } .suite-card.is-visible .living-consulting .compass-ring { animation: anim-compass-draw 6s ease-in-out 0.3s infinite; } @keyframes anim-compass-draw { 0% { stroke-dashoffset: 201; opacity: 0.3; } 20% { stroke-dashoffset: 0; opacity: 1; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 201; opacity: 0.3; } } .living-consulting .tick { stroke: rgba(255, 255, 255, 0.75); stroke-width: 2; } .living-consulting .needle { transform-origin: 40px 40px; } .suite-card.is-visible .living-consulting .needle { animation: anim-needle-rotate 6s cubic-bezier(0.4, 0.0, 0.6, 1) infinite; } @keyframes anim-needle-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .living-consulting .needle-n { fill: rgba(255, 255, 255, 0.95); stroke: none; } .living-consulting .needle-s { fill: rgba(255, 255, 255, 0.45); stroke: none; } .living-consulting .needle-pivot { fill: rgba(255, 255, 255, 0.95); stroke: none; } .living-consulting .insight { fill: rgba(255, 255, 255, 0.95); stroke: none; opacity: 0; transform-origin: center center; } .suite-card.is-visible .living-consulting .insight-1 { animation: anim-insight-pulse 6s ease-in-out 1.5s infinite; } .suite-card.is-visible .living-consulting .insight-2 { animation: anim-insight-pulse 6s ease-in-out 2.5s infinite; } .suite-card.is-visible .living-consulting .insight-3 { animation: anim-insight-pulse 6s ease-in-out 3.5s infinite; } @keyframes anim-insight-pulse { 0%, 15% { opacity: 0; transform: scale(0.4); } 25% { opacity: 1; transform: scale(1.4); } 35% { opacity: 1; transform: scale(1); } 60% { opacity: 1; transform: scale(1); } 75%, 100%{ opacity: 0; transform: scale(0.5); } } .living-consulting .ripple { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.5; opacity: 0; transform-origin: center center; } .suite-card.is-visible .living-consulting .ripple-1 { animation: anim-ripple-out 6s ease-out 1.5s infinite; } .suite-card.is-visible .living-consulting .ripple-2 { animation: anim-ripple-out 6s ease-out 2.5s infinite; } .suite-card.is-visible .living-consulting .ripple-3 { animation: anim-ripple-out 6s ease-out 3.5s infinite; } @keyframes anim-ripple-out { 0%, 18% { opacity: 0; transform: scale(1); } 25% { opacity: 0.7; } 50% { opacity: 0; transform: scale(3.5); } 100% { opacity: 0; transform: scale(3.5); } } /* ─── Bookmi: Calendar-Tile ─── */ .living-bookmi .tile-shadow { fill: rgba(0, 0, 0, 0.15); stroke: none; } .living-bookmi .tile-body { fill: rgba(255, 255, 255, 0.96); stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; } .living-bookmi .tile-band { fill: var(--card-accent); stroke: none; opacity: 0.85; filter: brightness(1.08); } .living-bookmi .tile-day-name { font-family: 'SF Pro Text', system-ui, sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 0.10em; fill: #ffffff; stroke: none; text-transform: uppercase; } .living-bookmi .tile-day-stack { /* Stack of 3 day-numbers, animated cycling */ } .living-bookmi .tile-day { font-family: 'SF Pro Display', system-ui, sans-serif; font-size: 26px; font-weight: 700; fill: rgba(15, 23, 42, 0.92); stroke: none; opacity: 0; } .suite-card.is-visible .living-bookmi .tile-day-1 { animation: anim-day-cycle 7s ease-in-out 0.5s infinite; animation-delay: 0.5s; } .suite-card.is-visible .living-bookmi .tile-day-2 { animation: anim-day-cycle 7s ease-in-out 0.5s infinite; animation-delay: -1.7s; } .suite-card.is-visible .living-bookmi .tile-day-3 { animation: anim-day-cycle 7s ease-in-out 0.5s infinite; animation-delay: -4s; } @keyframes anim-day-cycle { 0%, 5% { opacity: 0; transform: translateY(8px); } 10% { opacity: 1; transform: translateY(0); } 30% { opacity: 1; transform: translateY(0); } 35%, 100%{ opacity: 0; transform: translateY(-8px); } } .living-bookmi .book-pill { fill: rgba(255, 255, 255, 0.92); stroke: none; opacity: 0; } .suite-card.is-visible .living-bookmi .book-pill-1 { animation: anim-pill-slide 7s ease-out 1.2s infinite; } .suite-card.is-visible .living-bookmi .book-pill-2 { animation: anim-pill-slide 7s ease-out 1.6s infinite; } .suite-card.is-visible .living-bookmi .book-pill-3 { animation: anim-pill-slide 7s ease-out 2.0s infinite; } @keyframes anim-pill-slide { 0%, 12% { opacity: 0; transform: translateX(8px); } 20% { opacity: 1; transform: translateX(0); } 78% { opacity: 1; transform: translateX(0); } 88%, 100%{ opacity: 0; transform: translateX(-4px); } } .living-bookmi .live-dot { fill: #ffffff; stroke: rgba(255, 255, 255, 0.5); stroke-width: 2; } .suite-card.is-visible .living-bookmi .live-dot { animation: anim-live-pulse 2s ease-in-out infinite; } @keyframes anim-live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } /* ─── Yummi: Bowl-with-Steam-Y ─── */ .living-yummi .steam { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 2.5; stroke-linecap: round; } .suite-card.is-visible .living-yummi .steam-left { animation: anim-steam-wave-left 3.5s ease-in-out infinite; transform-origin: 28px 38px; } .suite-card.is-visible .living-yummi .steam-right { animation: anim-steam-wave-right 3.8s ease-in-out infinite; transform-origin: 52px 38px; } .suite-card.is-visible .living-yummi .steam-center { animation: anim-steam-rise 3s ease-in-out infinite; } @keyframes anim-steam-wave-left { 0%, 100% { opacity: 0.7; transform: translateY(0) translateX(0); } 50% { opacity: 1; transform: translateY(-3px) translateX(-2px); } } @keyframes anim-steam-wave-right { 0%, 100% { opacity: 0.7; transform: translateY(0) translateX(0); } 50% { opacity: 1; transform: translateY(-3px) translateX(2px); } } @keyframes anim-steam-rise { 0%, 100% { opacity: 0.85; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } } .living-yummi .bowl-body { fill: rgba(255, 255, 255, 0.18); stroke: rgba(255, 255, 255, 0.95); stroke-width: 2.5; } .living-yummi .bowl-rim { fill: rgba(255, 255, 255, 0.95); stroke: rgba(255, 255, 255, 0.95); stroke-width: 1; } .living-yummi .bowl-liquid { fill: rgba(255, 255, 255, 0.55); stroke: none; } .suite-card.is-visible .living-yummi .bowl-liquid { animation: anim-liquid-pulse 4s ease-in-out infinite; transform-origin: 40px 44px; } @keyframes anim-liquid-pulse { 0%, 100% { transform: scale(1, 1); opacity: 0.55; } 50% { transform: scale(1.04, 1.1); opacity: 0.7; } } .living-yummi .order-pill { fill: rgba(255, 255, 255, 0.9); stroke: none; opacity: 0; } .suite-card.is-visible .living-yummi .order-1 { animation: anim-order-flow 5s ease-in-out 0.5s infinite; } .suite-card.is-visible .living-yummi .order-2 { animation: anim-order-flow 5s ease-in-out 1.0s infinite; } .suite-card.is-visible .living-yummi .order-3 { animation: anim-order-flow 5s ease-in-out 1.5s infinite; } @keyframes anim-order-flow { 0%, 5% { opacity: 0; transform: translateX(8px); } 15% { opacity: 1; transform: translateX(0); } 60% { opacity: 1; transform: translateX(0); } 75% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 0; transform: translateX(8px); } } /* ─── Shopmi: Shopping-Bag-S ─── */ .living-shopmi .bag-body { fill: rgba(255, 255, 255, 0.18); stroke: rgba(255, 255, 255, 0.95); stroke-width: 2.5; } .living-shopmi .bag-handle { fill: none; stroke: rgba(255, 255, 255, 0.95); stroke-width: 2.5; } .living-shopmi .bag-tag-bg { fill: rgba(255, 255, 255, 0.95); stroke: none; } .living-shopmi .bag-tag-letter { font-family: 'SF Pro Display', system-ui, sans-serif; font-size: 13px; font-weight: 700; fill: var(--card-accent); stroke: none; } .living-shopmi .drop-item { fill: rgba(255, 255, 255, 0.95); stroke: none; opacity: 0; } .suite-card.is-visible .living-shopmi .drop-1 { animation: anim-drop-fall 5s cubic-bezier(0.5, 0, 0.75, 0) 0.5s infinite; } .suite-card.is-visible .living-shopmi .drop-2 { animation: anim-drop-fall 5s cubic-bezier(0.5, 0, 0.75, 0) 1.0s infinite; } .suite-card.is-visible .living-shopmi .drop-3 { animation: anim-drop-fall 5s cubic-bezier(0.5, 0, 0.75, 0) 1.5s infinite; } @keyframes anim-drop-fall { 0%, 5% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; transform: translateY(0); } 35% { opacity: 1; transform: translateY(40px); } 40% { opacity: 0; transform: translateY(40px); } 100% { opacity: 0; transform: translateY(0); } } .living-shopmi .bag-sparkle { fill: #ffffff; stroke: none; opacity: 0; } .suite-card.is-visible .living-shopmi .bag-sparkle { animation: anim-sparkle-flash 5s ease-out infinite; } @keyframes anim-sparkle-flash { 0%, 30% { opacity: 0; transform: scale(0); } 35% { opacity: 1; transform: scale(2); } 45% { opacity: 0; transform: scale(2.5); } 100% { opacity: 0; transform: scale(0); } } /* ════════════════════════════════════════════════════════════════════════════ WELLE 5.3 — SUITE SECTION ("Six tools, one studio") ──────────────────────────────────────────────────────────────────────────── Showstopper #2 der Homepage. Sechs Cards (3 Services + 3 Apps) in einem responsiven Grid. Jede Card mit eigener CSS-Animation (Browser-Type, Search-Climb, Audit-Check, Calendar-Pills, Order-Stream, Cart-Fill). Architektur: - Mobile-First (1-Spalte → 2-Spalte ≥600px → 3×2 ≥1024px) - Glass-Atelier Material mit Hairline-Bronze-Akzent - Triple-Layer Card: Tag · Animation · Brand → Function → Outcome → CTA - 3D-Tilt + Cursor-Following Glow auf Hover (Desktop only) - IntersectionObserver-Trigger via .is-visible Class (siehe main-com.js) - prefers-reduced-motion: alle Animationen aus ═══════════════════════════════════════════════════════════════════════════ */ /* === Section-Container with subtle Akzent-Mesh-Glow === */ .suite-section { position: relative; padding: 4rem 0 4.5rem; background: linear-gradient(180deg, #fafaf8 0%, #f3f1ec 100%); overflow: hidden; isolation: isolate; } /* Atmosphärische Mesh-Layer hinter Cards */ .suite-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 25% 35%, rgba(184, 137, 90, 0.08) 0%, transparent 50%), radial-gradient(ellipse 50% 35% at 80% 60%, rgba(45, 106, 79, 0.06) 0%, transparent 50%), radial-gradient(ellipse 70% 30% at 50% 100%, rgba(217, 119, 87, 0.05) 0%, transparent 60%); pointer-events: none; z-index: 0; } .suite-section .container { position: relative; z-index: 1; } body.is-dark-bg .suite-section { background: linear-gradient(180deg, #0f1620 0%, #0a0e15 100%); } body.is-dark-bg .suite-section::before { background: radial-gradient(ellipse 60% 40% at 25% 35%, rgba(228, 200, 152, 0.10) 0%, transparent 50%), radial-gradient(ellipse 50% 35% at 80% 60%, rgba(108, 201, 163, 0.08) 0%, transparent 50%), radial-gradient(ellipse 70% 30% at 50% 100%, rgba(240, 167, 135, 0.07) 0%, transparent 60%); } @media (min-width: 768px) { .suite-section { padding: 6rem 0 6.5rem; } } @media (min-width: 1024px) { .suite-section { padding: 6rem 0 6.5rem; } } /* === Section Header — Premium "Big Number" Eyebrow === */ .suite-header { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; } /* Stat-Eyebrow: BIG number + divider + label */ .suite-stat-eyebrow { display: inline-flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; padding: 0.55rem 1rem 0.55rem 0.85rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 246, 240, 0.65) 100%); border: 1px solid rgba(184, 137, 90, 0.20); border-radius: 999px; box-shadow: 0 4px 12px -2px rgba(184, 137, 90, 0.12), 0 1px 0 rgba(255, 255, 255, 0.7) inset; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.is-dark-bg .suite-stat-eyebrow { background: linear-gradient(180deg, rgba(28, 35, 48, 0.85) 0%, rgba(15, 22, 32, 0.65) 100%); border-color: rgba(228, 200, 152, 0.22); box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.30), 0 1px 0 rgba(255, 255, 255, 0.10) inset; } .suite-stat-num { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; background: linear-gradient(180deg, #b8895a 0%, #8c6a3d 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; } body.is-dark-bg .suite-stat-num { background: linear-gradient(180deg, #e4c898 0%, #b8895a 100%); -webkit-background-clip: text; background-clip: text; } .suite-stat-divider { width: 1px; height: 16px; background: linear-gradient(180deg, transparent 0%, rgba(184, 137, 90, 0.45) 50%, transparent 100%); } body.is-dark-bg .suite-stat-divider { background: linear-gradient(180deg, transparent 0%, rgba(228, 200, 152, 0.50) 50%, transparent 100%); } .suite-stat-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: #8c6a3d; } body.is-dark-bg .suite-stat-label { color: #e4c898; } @media (min-width: 768px) { .suite-header { margin-bottom: 4rem; } } @media (min-width: 1024px) { .suite-header { margin-bottom: 3.5rem; } } /* === Card Grid === */ /* === MOBILE-BASE: Horizontal Scroll-Snap-Carousel === Apple iPhone-Page-Pattern. 1 Card pro Screen, 8% Peek der nächsten Card, smooth scroll-snap, native iOS-Swipe-Feel. align-items: flex-start damit Cards individuelle Höhen behalten (kein stretch). */ .suite-grid { list-style: none; margin: 0 -1.25rem; padding: 0.5rem 1.25rem 1rem; display: flex; align-items: flex-start; gap: 0.85rem; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding: 0 1.25rem; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; /* Hide scrollbar */ scrollbar-width: none; } .suite-grid::-webkit-scrollbar { display: none; } .suite-grid > .suite-card { flex: 0 0 88%; max-width: 88%; scroll-snap-align: center; scroll-snap-stop: always; } /* === TABLET (≥600px): Switch zu 2-Spalten-Grid === */ @media (min-width: 600px) { .suite-grid { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; overflow: visible; scroll-snap-type: none; scroll-padding: 0; } .suite-grid > .suite-card { flex: initial; max-width: none; scroll-snap-align: none; } .suite-card--featured { grid-column: 1 / -1; } } /* === DESKTOP (≥1024px): Bento-Layout mit Web 2×2 === */ @media (min-width: 1024px) { .suite-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .suite-card--featured { grid-column: 1 / 3; grid-row: 1 / 3; } } /* === Carousel-Indicator (Dots + Swipe-Hint) — nur Mobile <600px === */ .suite-carousel-indicator { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-top: 0.85rem; } @media (min-width: 600px) { .suite-carousel-indicator { display: none; } } .suite-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.4rem; align-items: center; } .suite-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(15, 23, 42, 0.18); transition: width 320ms cubic-bezier(0.32, 0.72, 0, 1), background-color 320ms cubic-bezier(0.32, 0.72, 0, 1); } body.is-dark-bg .suite-dot { background: rgba(255, 255, 255, 0.22); } .suite-dot.is-active { width: 18px; border-radius: 999px; background: #b8895a; } body.is-dark-bg .suite-dot.is-active { background: #e4c898; } .suite-swipe-hint { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: rgba(15, 23, 42, 0.40); animation: anim-swipe-hint 3.5s ease-in-out 1s 2; transform-origin: center; } body.is-dark-bg .suite-swipe-hint { color: rgba(255, 255, 255, 0.45); } @keyframes anim-swipe-hint { 0%, 100% { opacity: 0.5; transform: translateX(0); } 35% { opacity: 1; transform: translateX(8px); } 70% { opacity: 0.5; transform: translateX(0); } } /* === Card Component === */ .suite-card { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1rem 1rem 1.15rem; background: #ffffff; border: 1px solid rgba(184, 137, 90, 0.14); border-radius: 18px; overflow: hidden; isolation: isolate; opacity: 0; transform: translateY(20px); transition: opacity 600ms cubic-bezier(0.32, 0.72, 0, 1), transform 600ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 350ms cubic-bezier(0.32, 0.72, 0, 1), border-color 250ms ease-out; } @media (min-width: 768px) { .suite-card { padding: 1.15rem 1.15rem 1.3rem; gap: 1.05rem; border-radius: 20px; } } .suite-card.is-visible { opacity: 1; transform: translateY(0); } /* Stagger reveal-Delay über CSS-Variablen pro Card */ .suite-grid .suite-card:nth-child(1) { --reveal-delay: 0ms; } .suite-grid .suite-card:nth-child(2) { --reveal-delay: 80ms; } .suite-grid .suite-card:nth-child(3) { --reveal-delay: 160ms; } .suite-grid .suite-card:nth-child(4) { --reveal-delay: 240ms; } .suite-grid .suite-card:nth-child(5) { --reveal-delay: 320ms; } .suite-grid .suite-card:nth-child(6) { --reveal-delay: 400ms; } .suite-card.is-visible { transition-delay: var(--reveal-delay); } /* (consolidated above with mobile-first padding) */ body.is-dark-bg .suite-card { background: rgba(28, 35, 48, 0.72); border-color: rgba(228, 200, 152, 0.16); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); } /* Glow-Layer (cursor-following on hover) */ .suite-card-glow { position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; background: radial-gradient( 420px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--card-glow-color, rgba(184, 137, 90, 0.14)), transparent 40% ); transition: opacity 300ms ease-out; z-index: 0; } @media (hover: hover) and (pointer: fine) { .suite-card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 24px 48px -16px rgba(184, 137, 90, 0.20), 0 8px 20px -6px rgba(0, 0, 0, 0.08); border-color: rgba(184, 137, 90, 0.32); } body.is-dark-bg .suite-card:hover { box-shadow: 0 1px 0 rgba(228, 200, 152, 0.10) inset, 0 24px 48px -16px rgba(0, 0, 0, 0.55), 0 8px 20px -6px rgba(228, 200, 152, 0.10); border-color: rgba(228, 200, 152, 0.30); } .suite-card:hover .suite-card-glow { opacity: 1; } } /* Akzent-Farbe pro Card (CSS-Variable) */ .suite-card[data-card="web"] { --card-accent: #b8895a; --card-accent-soft: #d6b18c; --card-glow-color: rgba(184, 137, 90, 0.16); } .suite-card[data-card="marketing"] { --card-accent: #475569; --card-accent-soft: #94a3b8; --card-glow-color: rgba(71, 85, 105, 0.14); } .suite-card[data-card="consulting"] { --card-accent: #1a2540; --card-accent-soft: #475569; --card-glow-color: rgba(26, 37, 64, 0.14); } .suite-card[data-card="bookmi"] { --card-accent: #2d6a4f; --card-accent-soft: #5fa886; --card-glow-color: rgba(45, 106, 79, 0.18); } .suite-card[data-card="yummi"] { --card-accent: #d97757; --card-accent-soft: #f0a787; --card-glow-color: rgba(217, 119, 87, 0.20); } .suite-card[data-card="shopmi"] { --card-accent: #6b2d5c; --card-accent-soft: #a85d96; --card-glow-color: rgba(107, 45, 92, 0.18); } body.is-dark-bg .suite-card[data-card="web"] { --card-accent: #d6b18c; } body.is-dark-bg .suite-card[data-card="marketing"] { --card-accent: #94a3b8; } body.is-dark-bg .suite-card[data-card="consulting"] { --card-accent: #94a3b8; } body.is-dark-bg .suite-card[data-card="bookmi"] { --card-accent: #6cc9a3; } body.is-dark-bg .suite-card[data-card="yummi"] { --card-accent: #f0a787; } body.is-dark-bg .suite-card[data-card="shopmi"] { --card-accent: #c989b6; } /* === Card Tag (Service / App) === */ .suite-card-tag { position: absolute; top: 1rem; right: 1rem; padding: 0.22rem 0.55rem; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; border-radius: 999px; z-index: 3; font-variant-numeric: tabular-nums; } .suite-card-tag--service { color: #8c6a3d; background: rgba(184, 137, 90, 0.10); border: 1px solid rgba(184, 137, 90, 0.24); } .suite-card-tag--app { color: #235338; background: rgba(45, 106, 79, 0.10); border: 1px solid rgba(45, 106, 79, 0.26); } body.is-dark-bg .suite-card-tag--service { color: #e4c898; background: rgba(228, 200, 152, 0.10); border-color: rgba(228, 200, 152, 0.20); } body.is-dark-bg .suite-card-tag--app { color: #7fc7a4; background: rgba(127, 199, 164, 0.10); border-color: rgba(127, 199, 164, 0.22); } /* === Animation-Container (Top of Card) === Subtle Mesh-Gradient für Premium-Tiefe + Akzent-Farb-Tint pro Card. Mobile-Base: 110px für Service-Cards, 92px für Mini-App-Tiles. Tablet+: leicht größer. */ .suite-card-anim { position: relative; height: 110px; border-radius: 12px; background: radial-gradient(ellipse 80% 60% at 30% 0%, var(--card-glow-color, rgba(184, 137, 90, 0.10)), transparent 60%), linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(248, 246, 240, 0.4) 100%); border: 1px solid rgba(184, 137, 90, 0.08); overflow: hidden; z-index: 1; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(184, 137, 90, 0.05) inset; transition: height 350ms cubic-bezier(0.32, 0.72, 0, 1); } @media (min-width: 768px) { .suite-card-anim { height: 122px; } } /* App-Mini-Tiles haben kompaktere Animation */ .suite-card[data-tier="app"] .suite-card-anim { height: 92px; } @media (min-width: 768px) { .suite-card[data-tier="app"] .suite-card-anim { height: 100px; } } body.is-dark-bg .suite-card-anim { background: radial-gradient(ellipse 80% 60% at 30% 0%, var(--card-glow-color, rgba(228, 200, 152, 0.08)), transparent 60%), linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%); border-color: rgba(228, 200, 152, 0.10); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 -1px 0 rgba(0, 0, 0, 0.20) inset; } /* === Card Content === */ .suite-card-content { display: flex; flex-direction: column; z-index: 1; flex-grow: 1; } /* === App-Icon Premium Material-System (Apple iOS 2024 Pattern) === 5-Layer-Material: 1. Background-Gradient (135deg accent → accent-soft) 2. Specular Highlight (radial top-left, 22% white) 3. Edge-Highlight (top 1px) + Edge-Darken (bottom 1px) 4. Drop-Shadow tinted mit Akzent-Farbe + Soft second shadow 5. Symbol mit Drop-Shadow + Highlight-Glanz Squircle-Radius 22% (iOS-Standard). 56-60px Größe für Standard, 64-72px für Featured. ═════════════════════════════════════════════════════════════ */ .suite-card-icon { width: 44px; height: 44px; border-radius: 11px; background: /* Specular Highlight oben links — 3D-Sphäre-Effekt */ radial-gradient(ellipse 70% 50% at 25% 0%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.0) 60%), /* Subtle Top-to-Bottom Highlight für Material-Optik */ linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.0) 35%, rgba(0, 0, 0, 0.06) 100%), /* Base Brand-Gradient */ linear-gradient(135deg, var(--card-accent) 0%, var(--card-accent-soft, var(--card-accent)) 100%); color: #ffffff; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; position: relative; flex-shrink: 0; box-shadow: /* Akzent-tinted Drop-Shadow */ 0 12px 24px -8px var(--card-glow-color, rgba(184, 137, 90, 0.40)), /* Soft second shadow für Tiefe */ 0 4px 8px rgba(0, 0, 0, 0.10), /* Sub-pixel Edge */ 0 0 0 0.5px rgba(0, 0, 0, 0.10), /* Inner Top Highlight */ inset 0 1.5px 0 rgba(255, 255, 255, 0.55), /* Inner Bottom Darken */ inset 0 -2px 5px rgba(0, 0, 0, 0.18); transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 350ms cubic-bezier(0.32, 0.72, 0, 1); } @media (min-width: 768px) { .suite-card-icon { width: 52px; height: 52px; border-radius: 13px; } } /* App-Mini-Tiles: Icon etwas größer als Standard für mehr Hierarchie */ .suite-card[data-tier="app"] .suite-card-icon { width: 50px; height: 50px; } @media (min-width: 768px) { .suite-card[data-tier="app"] .suite-card-icon { width: 54px; height: 54px; } } .suite-card--featured .suite-card-icon { width: 64px; height: 64px; border-radius: 16px; } @media (min-width: 768px) { .suite-card--featured .suite-card-icon { width: 72px; height: 72px; border-radius: 18px; } } /* Glanz-Layer 2 — separater Top-Sheen für 3D-Refraktion */ .suite-card-icon::before { content: ''; position: absolute; top: 1px; left: 1px; right: 1px; height: 55%; border-radius: 13px 13px 65% 65% / 13px 13px 100% 100%; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.0) 100% ); pointer-events: none; mix-blend-mode: overlay; } /* Symbol mit Drop-Shadow + leichter Glanz-Filter */ .suite-card-icon svg { width: 26px; height: 26px; position: relative; z-index: 1; stroke-width: 1.85; filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, 0.22)) drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.12)); } @media (min-width: 768px) { .suite-card-icon svg { width: 28px; height: 28px; } } .suite-card--featured .suite-card-icon svg { width: 34px; height: 34px; } @media (min-width: 768px) { .suite-card--featured .suite-card-icon svg { width: 38px; height: 38px; } } /* Subtle floating animation when card is visible */ .suite-card.is-visible .suite-card-icon { animation: anim-icon-float 4.5s ease-in-out infinite; animation-delay: var(--reveal-delay, 0ms); } @keyframes anim-icon-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-0.8deg); } } /* Hover: Icon scaling + tilt + stronger shadow */ @media (hover: hover) and (pointer: fine) { .suite-card:hover .suite-card-icon { transform: scale(1.08) rotate(-4deg) translateY(-2px) !important; box-shadow: 0 18px 32px -8px var(--card-glow-color, rgba(184, 137, 90, 0.55)), 0 8px 14px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.10), inset 0 1.5px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 5px rgba(0, 0, 0, 0.20); } } body.is-dark-bg .suite-card-icon { box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.65), 0 6px 12px var(--card-glow-color, rgba(228, 200, 152, 0.18)), 0 0 0 0.5px rgba(255, 255, 255, 0.06), inset 0 1.5px 0 rgba(255, 255, 255, 0.30), inset 0 -2px 5px rgba(0, 0, 0, 0.32); } .suite-card-brand { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; color: #0f172a; margin: 0 0 0.15rem; line-height: 1.2; } @media (min-width: 768px) { .suite-card-brand { font-size: 1.12rem; } } body.is-dark-bg .suite-card-brand { color: #ffffff; } .suite-card-function { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--card-accent); margin-bottom: 0.5rem; } /* === v9 Featured Web-Card: Head row (brand + pulse) === */ .suite-card-head { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.05rem; } .suite-card-head .suite-card-brand { margin: 0; } .suite-card-head .living-pulse { background: rgba(15, 23, 42, 0.05); border: 0.5px solid rgba(15, 23, 42, 0.10); color: rgba(15, 23, 42, 0.78); } .suite-card-head .living-pulse-dot { background: var(--card-accent, #b8895a); box-shadow: 0 0 0 0 var(--card-accent, rgba(184, 137, 90, 0.7)), 0 0 6px var(--card-accent, rgba(184, 137, 90, 0.55)); } .suite-card.is-visible .suite-card-head .living-pulse-dot { animation: anim-pulse-dot-tinted 2.4s ease-out infinite; } @keyframes anim-pulse-dot-tinted { 0%, 100% { box-shadow: 0 0 0 0 var(--card-glow-color, rgba(184, 137, 90, 0.6)), 0 0 6px var(--card-accent, rgba(184, 137, 90, 0.55)); } 50% { box-shadow: 0 0 0 5px transparent, 0 0 6px var(--card-accent, rgba(184, 137, 90, 0.55)); } } body.is-dark-bg .suite-card-head .living-pulse { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.80); } /* === v9 Featured Web-Card: Live-Data-Strip === */ .suite-card-data { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.55rem 0 0.55rem; margin: 0.35rem 0 0.55rem; border-top: 1px solid rgba(15, 23, 42, 0.08); border-bottom: 1px solid rgba(15, 23, 42, 0.05); } body.is-dark-bg .suite-card-data { border-top-color: rgba(255, 255, 255, 0.10); border-bottom-color: rgba(255, 255, 255, 0.05); } .suite-data-row { display: inline-flex; align-items: baseline; gap: 0.18rem; flex-shrink: 0; } .suite-data-num { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 1.55rem; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--card-accent, #b8895a); line-height: 1; } @media (min-width: 768px) { .suite-data-num { font-size: 1.7rem; } } .suite-data-label { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.01em; color: rgba(15, 23, 42, 0.62); line-height: 1.3; flex: 1; min-width: 0; } body.is-dark-bg .suite-data-label { color: rgba(255, 255, 255, 0.65); } .suite-card-outcome { font-size: 0.88rem; line-height: 1.45; color: rgba(15, 23, 42, 0.72); margin: 0; flex-grow: 1; } @media (min-width: 768px) { .suite-card-outcome { font-size: 0.92rem; } } /* Mini-Tiles haben kompakteren Outcome (single sentence, 2 lines max) */ .suite-card[data-tier="app"] .suite-card-outcome { font-size: 0.85rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.is-dark-bg .suite-card-outcome { color: rgba(255, 255, 255, 0.72); } /* === Card CTA === */ .suite-card-cta { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1rem; padding: 0; font-size: 0.85rem; font-weight: 600; letter-spacing: -0.005em; color: var(--card-accent); text-decoration: none; align-self: flex-start; z-index: 2; position: relative; transition: gap 220ms cubic-bezier(0.32, 0.72, 0, 1); } .suite-card-cta:hover { gap: 0.6rem; } .suite-card-cta-arrow { width: 14px; height: 14px; } /* ============================================================ PER-CARD ANIMATIONS (CSS-only, IntersectionObserver-Trigger) Trigger via `.suite-card.is-visible` ============================================================ */ /* === Animation 1: Web — Mini-Hero im Browser-Frame mit cycling H1s === */ .suite-anim-web .anim-browser { position: absolute; inset: 12px; background: #ffffff; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } body.is-dark-bg .suite-anim-web .anim-browser { background: #1a2030; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } .suite-anim-web .anim-browser-bar { display: flex; align-items: center; gap: 4px; padding: 5px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); background: rgba(0, 0, 0, 0.03); flex-shrink: 0; } body.is-dark-bg .suite-anim-web .anim-browser-bar { border-bottom-color: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.04); } .suite-anim-web .anim-browser-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, 0.16); } body.is-dark-bg .suite-anim-web .anim-browser-dot { background: rgba(255, 255, 255, 0.20); } .suite-anim-web .anim-browser-url { margin-left: 6px; font-size: 0.58rem; font-family: 'SF Mono', 'JetBrains Mono', 'Menlo', monospace; color: rgba(15, 23, 42, 0.50); letter-spacing: 0.01em; } body.is-dark-bg .suite-anim-web .anim-browser-url { color: rgba(255, 255, 255, 0.55); } .suite-anim-web .anim-browser-content { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 6px 10px; } /* ════════════════════════════════════════════════════════════════════════ WELLE 5.3 v4 — Web-Card mit echten Premium-Site-Screenshots ────────────────────────────────────────────────────────────────────── 6 echte miraTEQ-Premium-Templates cyclen durch einen polished macOS-Safari-Style Browser-Frame. URL + Tab-Title syncen mit dem Cycle. Industry-Strip drunter highlighted die aktive Branche. ══════════════════════════════════════════════════════════════════════ */ /* === Featured-Card (Web 2×2 Bento) === */ .suite-card--featured { /* Mobile: stretch full width, doppelte Höhe für visuell "featured" */ /* Tablet/Desktop wird via Grid-Span gehandled */ } .suite-anim-web--featured { height: 280px; border-radius: 14px; padding: 0; background: linear-gradient(180deg, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.10) 100%); border-color: rgba(15, 23, 42, 0.10); display: flex; flex-direction: column; flex-grow: 1; } @media (min-width: 768px) { .suite-anim-web--featured { height: 360px; } } @media (min-width: 1024px) { .suite-anim-web--featured { height: auto; min-height: 420px; flex-grow: 1; } } /* Featured-Card Layout: Visual nimmt fast die gesamte Card, Content ist ein kompakter Horizontal-Strip darunter */ @media (min-width: 1024px) { .suite-card--featured { /* Card-Layout: vertical stack, Visual top, content bottom */ display: flex; flex-direction: column; } .suite-card--featured .suite-card-anim { margin-bottom: 1.5rem; } .suite-card--featured .suite-card-content { /* v9 Horizontal-Layout: icon | head+function+data | outcome side-by-side */ display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto auto; column-gap: 1.25rem; row-gap: 0.35rem; align-items: start; } .suite-card--featured .suite-card-icon { grid-row: 1 / 5; align-self: center; margin-bottom: 0; } .suite-card--featured .suite-card-head { grid-column: 2; grid-row: 1; } .suite-card--featured .suite-card-function { grid-column: 2; grid-row: 2; margin-bottom: 0; } .suite-card--featured .suite-card-data { grid-column: 2; grid-row: 3; margin: 0.1rem 0 0; padding: 0.35rem 0; } .suite-card--featured .suite-card-outcome { grid-column: 2; grid-row: 4; font-size: 1.02rem; line-height: 1.45; } .suite-card--featured .suite-card-kicker { grid-column: 1 / -1; grid-row: 5; margin-top: 0.5rem; margin-bottom: 0.4rem; } .suite-card--featured .suite-card-includes { grid-column: 1 / -1; grid-row: 6; margin-top: 0.4rem; padding-top: 0.85rem; } .suite-card--featured .suite-card-cta { align-self: flex-start; margin-top: 0.85rem; font-size: 0.95rem; } } body.is-dark-bg .suite-anim-web--featured { background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.20) 100%); border-color: rgba(255, 255, 255, 0.08); } /* === Browser-Frame (Premium macOS Safari Style) === */ .suite-anim-web .anim-browser { position: relative; flex: 1; margin: 8px 8px 0; background: #ffffff; border-radius: 10px 10px 4px 4px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 24px -8px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); } body.is-dark-bg .suite-anim-web .anim-browser { background: #1a2030; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.30); border-color: rgba(255, 255, 255, 0.10); } /* Browser-Bar Top */ .suite-anim-web .anim-browser-bar { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px; padding: 9px 12px 8px; background: linear-gradient(180deg, #f5f4f0 0%, #ebe8e0 100%); border-bottom: 1px solid rgba(0, 0, 0, 0.08); flex-shrink: 0; height: 36px; } body.is-dark-bg .suite-anim-web .anim-browser-bar { background: linear-gradient(180deg, #2a3140 0%, #1f2530 100%); border-bottom-color: rgba(255, 255, 255, 0.08); } /* macOS-Window-Controls (Red/Yellow/Green) */ .suite-anim-web .anim-browser-controls { display: flex; gap: 6px; align-items: center; } .suite-anim-web .anim-browser-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.08); } .suite-anim-web .anim-browser-dot--close { background: #ff5f57; } .suite-anim-web .anim-browser-dot--minimize { background: #febc2e; } .suite-anim-web .anim-browser-dot--maximize { background: #28c840; } /* Nav arrows (back/forward) */ .suite-anim-web .anim-browser-nav { display: flex; gap: 8px; align-items: center; color: rgba(15, 23, 42, 0.55); } body.is-dark-bg .suite-anim-web .anim-browser-nav { color: rgba(255, 255, 255, 0.50); } .suite-anim-web .anim-browser-arrow { width: 12px; height: 12px; } .suite-anim-web .anim-browser-arrow--dim { opacity: 0.40; } /* URL-Bar mit Lock-Icon */ .suite-anim-web .anim-browser-url { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 6px; min-width: 0; position: relative; height: 22px; } body.is-dark-bg .suite-anim-web .anim-browser-url { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); } .suite-anim-web .anim-browser-lock { width: 10px; height: 10px; color: rgba(15, 23, 42, 0.55); flex-shrink: 0; } body.is-dark-bg .suite-anim-web .anim-browser-lock { color: rgba(255, 255, 255, 0.55); } .suite-anim-web .anim-browser-url-text { position: relative; flex: 1; height: 14px; overflow: hidden; font-size: 0.7rem; font-family: 'SF Mono', 'JetBrains Mono', 'Menlo', monospace; color: rgba(15, 23, 42, 0.70); letter-spacing: -0.005em; } body.is-dark-bg .suite-anim-web .anim-browser-url-text { color: rgba(255, 255, 255, 0.78); } .suite-anim-web .anim-url-cycle { position: absolute; inset: 0; white-space: nowrap; opacity: 0; } /* Browser-Tab oben (zeigt Site-Title, syncs mit URL+Site) */ .suite-anim-web .anim-browser-tab { display: none; /* Tab-Visualisierung verschoben in URL-Bar weil kompakter */ } .suite-anim-web .anim-browser-tab-title { position: relative; display: block; height: 14px; overflow: hidden; } .suite-anim-web .anim-tab-title-cycle { position: absolute; inset: 0; white-space: nowrap; opacity: 0; } /* === Browser Content: 6 cycling Site-Images === */ .suite-anim-web .anim-browser-content { position: relative; flex: 0 0 auto; width: 100%; aspect-ratio: 9 / 14; overflow: hidden; background: #f5f5f5; } /* Welle 5.7.121 → siehe Ende der Datei (nach 5.7.115 Mobile-Block). */ /* Tablet+: Hero-Bento behält Browser-Aspect 8:5 mit cyclendem Site-Image */ @media (min-width: 768px) { .suite-anim-web .anim-browser-content { aspect-ratio: 8 / 5; } } body.is-dark-bg .suite-anim-web .anim-browser-content { background: #0f1620; } .suite-anim-web .anim-site-img { position: absolute; inset: 0; display: block; opacity: 0; } .suite-anim-web .anim-site-img img { width: 100%; height: 100%; object-fit: contain; /* Welle 5.7.57: war cover, schnitt links/rechts ab */ object-position: center top; display: block; } /* In Bento-Hero: Mobile 4:5 Phone-Aspect → object-fit cover zeigt Top-Half der Site (Hero-Bereich). Tablet+ zurück zu contain (Desktop-Browser-Aspect 8:5, kein Crop). Background matched zu Site-BG. */ .bento-tile--hero .anim-site-img img { object-fit: cover; /* Welle 5.7.113 Mobile: cover für Phone-Aspect-Container */ object-position: center top; } @media (min-width: 768px) { .bento-tile--hero .anim-site-img img { object-fit: contain; /* Tablet+: 8:5 Browser-Aspect, ganze Site sichtbar */ } } /* === 6-Site Cycle Engine === Total Loop: 30s (5s pro Site = 4.5s sichtbar + 0.5s crossfade) Site n sichtbar: (n-1)*5s bis n*5s -0.5s Cycle keyframe in % für 30s: 0% reset, 1.5% fade-in, 16.5% peak, 17% fade-out Each site offset: 16.66% per site (5s/30s) */ /* Site 1 (Hotel) sichtbar 0-5s = 0-16.66% */ .suite-card.is-visible .anim-site-1, .suite-card.is-visible .anim-url-1, .suite-card.is-visible .anim-tab-1, .suite-card.is-visible .anim-pill-1, .cinema-beat.is-active .anim-site-1, .cinema-beat.is-active .anim-url-1, .cinema-beat.is-active .anim-tab-1, .cinema-beat.is-active .anim-pill-1, .trading-modal[open] .anim-site-1, .trading-modal[open] .anim-url-1, .trading-modal[open] .anim-tab-1, .bento-tile--hero .anim-site-1, .bento-tile--hero .anim-url-1, .bento-tile--hero .anim-tab-1, .bento-tile--hero .anim-pill-1 { animation: anim-cycle-1 30s ease-in-out 0.5s infinite; } /* Site 2 (Restaurant) sichtbar 5-10s = 16.66-33.33% */ .suite-card.is-visible .anim-site-2, .suite-card.is-visible .anim-url-2, .suite-card.is-visible .anim-tab-2, .suite-card.is-visible .anim-pill-2, .cinema-beat.is-active .anim-site-2, .cinema-beat.is-active .anim-url-2, .cinema-beat.is-active .anim-tab-2, .cinema-beat.is-active .anim-pill-2, .trading-modal[open] .anim-site-2, .trading-modal[open] .anim-url-2, .trading-modal[open] .anim-tab-2, .bento-tile--hero .anim-site-2, .bento-tile--hero .anim-url-2, .bento-tile--hero .anim-tab-2, .bento-tile--hero .anim-pill-2 { animation: anim-cycle-2 30s ease-in-out 0.5s infinite; } .suite-card.is-visible .anim-site-3, .suite-card.is-visible .anim-url-3, .suite-card.is-visible .anim-tab-3, .suite-card.is-visible .anim-pill-3, .cinema-beat.is-active .anim-site-3, .cinema-beat.is-active .anim-url-3, .cinema-beat.is-active .anim-tab-3, .cinema-beat.is-active .anim-pill-3, .trading-modal[open] .anim-site-3, .trading-modal[open] .anim-url-3, .trading-modal[open] .anim-tab-3, .bento-tile--hero .anim-site-3, .bento-tile--hero .anim-url-3, .bento-tile--hero .anim-tab-3, .bento-tile--hero .anim-pill-3 { animation: anim-cycle-3 30s ease-in-out 0.5s infinite; } .suite-card.is-visible .anim-site-4, .suite-card.is-visible .anim-url-4, .suite-card.is-visible .anim-tab-4, .suite-card.is-visible .anim-pill-4, .cinema-beat.is-active .anim-site-4, .cinema-beat.is-active .anim-url-4, .cinema-beat.is-active .anim-tab-4, .cinema-beat.is-active .anim-pill-4, .trading-modal[open] .anim-site-4, .trading-modal[open] .anim-url-4, .trading-modal[open] .anim-tab-4, .bento-tile--hero .anim-site-4, .bento-tile--hero .anim-url-4, .bento-tile--hero .anim-tab-4, .bento-tile--hero .anim-pill-4 { animation: anim-cycle-4 30s ease-in-out 0.5s infinite; } .suite-card.is-visible .anim-site-5, .suite-card.is-visible .anim-url-5, .suite-card.is-visible .anim-tab-5, .suite-card.is-visible .anim-pill-5, .cinema-beat.is-active .anim-site-5, .cinema-beat.is-active .anim-url-5, .cinema-beat.is-active .anim-tab-5, .cinema-beat.is-active .anim-pill-5, .trading-modal[open] .anim-site-5, .trading-modal[open] .anim-url-5, .trading-modal[open] .anim-tab-5, .bento-tile--hero .anim-site-5, .bento-tile--hero .anim-url-5, .bento-tile--hero .anim-tab-5, .bento-tile--hero .anim-pill-5 { animation: anim-cycle-5 30s ease-in-out 0.5s infinite; } .suite-card.is-visible .anim-site-6, .suite-card.is-visible .anim-url-6, .suite-card.is-visible .anim-tab-6, .suite-card.is-visible .anim-pill-6, .cinema-beat.is-active .anim-site-6, .cinema-beat.is-active .anim-url-6, .cinema-beat.is-active .anim-tab-6, .cinema-beat.is-active .anim-pill-6, .trading-modal[open] .anim-site-6, .trading-modal[open] .anim-url-6, .trading-modal[open] .anim-tab-6, .bento-tile--hero .anim-site-6, .bento-tile--hero .anim-url-6, .bento-tile--hero .anim-tab-6, .bento-tile--hero .anim-pill-6 { animation: anim-cycle-6 30s ease-in-out 0.5s infinite; } /* Site-Image Animation: opacity + subtle scale parallax */ @keyframes anim-cycle-1 { 0% { opacity: 0; transform: scale(1.025); } 1.5% { opacity: 1; transform: scale(1); } 15.5% { opacity: 1; transform: scale(1.005); } 17% { opacity: 0; transform: scale(0.985); } 100% { opacity: 0; transform: scale(1.025); } } @keyframes anim-cycle-2 { 0%, 15.5% { opacity: 0; transform: scale(1.025); } 18% { opacity: 1; transform: scale(1); } 32% { opacity: 1; transform: scale(1.005); } 33.5% { opacity: 0; transform: scale(0.985); } 100% { opacity: 0; transform: scale(1.025); } } @keyframes anim-cycle-3 { 0%, 32% { opacity: 0; transform: scale(1.025); } 34.5% { opacity: 1; transform: scale(1); } 48.5% { opacity: 1; transform: scale(1.005); } 50% { opacity: 0; transform: scale(0.985); } 100% { opacity: 0; transform: scale(1.025); } } @keyframes anim-cycle-4 { 0%, 48.5% { opacity: 0; transform: scale(1.025); } 51% { opacity: 1; transform: scale(1); } 65% { opacity: 1; transform: scale(1.005); } 66.5% { opacity: 0; transform: scale(0.985); } 100% { opacity: 0; transform: scale(1.025); } } @keyframes anim-cycle-5 { 0%, 65% { opacity: 0; transform: scale(1.025); } 67.5% { opacity: 1; transform: scale(1); } 81.5% { opacity: 1; transform: scale(1.005); } 83% { opacity: 0; transform: scale(0.985); } 100% { opacity: 0; transform: scale(1.025); } } @keyframes anim-cycle-6 { 0%, 81.5% { opacity: 0; transform: scale(1.025); } 84% { opacity: 1; transform: scale(1); } 98% { opacity: 1; transform: scale(1.005); } 100% { opacity: 0; transform: scale(0.985); } } /* === Industry-Strip unter dem Browser === */ .suite-anim-web .anim-industry-strip { display: flex; align-items: center; gap: 10px; padding: 10px 12px 12px; flex-wrap: wrap; } .suite-anim-web .anim-industry-label { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(15, 23, 42, 0.45); flex-shrink: 0; } body.is-dark-bg .suite-anim-web .anim-industry-label { color: rgba(255, 255, 255, 0.50); } .suite-anim-web .anim-industry-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; } .suite-anim-web .anim-industry-pill { font-size: 0.62rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(184, 137, 90, 0.06); border: 1px solid rgba(184, 137, 90, 0.18); color: rgba(15, 23, 42, 0.55); white-space: nowrap; transition: all 280ms cubic-bezier(0.32, 0.72, 0, 1); } body.is-dark-bg .suite-anim-web .anim-industry-pill { background: rgba(228, 200, 152, 0.06); border-color: rgba(228, 200, 152, 0.16); color: rgba(255, 255, 255, 0.60); } /* Active-Pill-Phase (synced with site-cycle) */ @keyframes anim-pill-active-1 { 0%, 0.5% { background: rgba(184, 137, 90, 0.06); border-color: rgba(184, 137, 90, 0.18); color: rgba(15, 23, 42, 0.55); transform: scale(1); } 3%, 15.5% { background: var(--card-accent); border-color: var(--card-accent); color: #ffffff; transform: scale(1.05); } 17%, 100% { background: rgba(184, 137, 90, 0.06); border-color: rgba(184, 137, 90, 0.18); color: rgba(15, 23, 42, 0.55); transform: scale(1); } } /* Same pattern for pills 2-6, just shift % windows */ .suite-card.is-visible .anim-pill-1, .bento-tile--hero .anim-pill-1 { animation-name: anim-pill-active-1; } .suite-card.is-visible .anim-pill-2, .bento-tile--hero .anim-pill-2 { animation-name: anim-pill-active-2; } .suite-card.is-visible .anim-pill-3, .bento-tile--hero .anim-pill-3 { animation-name: anim-pill-active-3; } .suite-card.is-visible .anim-pill-4, .bento-tile--hero .anim-pill-4 { animation-name: anim-pill-active-4; } .suite-card.is-visible .anim-pill-5, .bento-tile--hero .anim-pill-5 { animation-name: anim-pill-active-5; } .suite-card.is-visible .anim-pill-6, .bento-tile--hero .anim-pill-6 { animation-name: anim-pill-active-6; } @keyframes anim-pill-active-2 { 0%, 17% { background: rgba(184, 137, 90, 0.06); border-color: rgba(184, 137, 90, 0.18); color: rgba(15, 23, 42, 0.55); transform: scale(1); } 19.5%, 32% { background: var(--card-accent); border-color: var(--card-accent); color: #ffffff; transform: scale(1.05); } 33.5%, 100% { background: rgba(184, 137, 90, 0.06); border-color: rgba(184, 137, 90, 0.18); color: rgba(15, 23, 42, 0.55); transform: scale(1); } } @keyframes anim-pill-active-3 { 0%, 33.5% { background: rgba(184, 137, 90, 0.06); border-color: rgba(184, 137, 90, 0.18); color: rgba(15, 23, 42, 0.55); transform: scale(1); } 36%, 48.5% { background: var(--card-accent); border-color: var(--card-accent); color: #ffffff; transform: scale(1.05); } 50%, 100% { background: rgba(184, 137, 90, 0.06); border-color: rgba(184, 137, 90, 0.18); color: rgba(15, 23, 42, 0.55); transform: scale(1); } } @keyframes anim-pill-active-4 { 0%, 50% { background: rgba(184, 137, 90, 0.06); border-color: rgba(184, 137, 90, 0.18); color: rgba(15, 23, 42, 0.55); transform: scale(1); } 52.5%, 65% { background: var(--card-accent); border-color: var(--card-accent); color: #ffffff; transform: scale(1.05); } 66.5%, 100% { background: rgba(184, 137, 90, 0.06); border-color: rgba(184, 137, 90, 0.18); color: rgba(15, 23, 42, 0.55); transform: scale(1); } } @keyframes anim-pill-active-5 { 0%, 66.5% { background: rgba(184, 137, 90, 0.06); border-color: rgba(184, 137, 90, 0.18); color: rgba(15, 23, 42, 0.55); transform: scale(1); } 69%, 81.5% { background: var(--card-accent); border-color: var(--card-accent); color: #ffffff; transform: scale(1.05); } 83%, 100% { background: rgba(184, 137, 90, 0.06); border-color: rgba(184, 137, 90, 0.18); color: rgba(15, 23, 42, 0.55); transform: scale(1); } } @keyframes anim-pill-active-6 { 0%, 83% { background: rgba(184, 137, 90, 0.06); border-color: rgba(184, 137, 90, 0.18); color: rgba(15, 23, 42, 0.55); transform: scale(1); } 85.5%, 98% { background: var(--card-accent); border-color: var(--card-accent); color: #ffffff; transform: scale(1.05); } 100% { background: rgba(184, 137, 90, 0.06); border-color: rgba(184, 137, 90, 0.18); color: rgba(15, 23, 42, 0.55); transform: scale(1); } } /* === Tab-Title und URL Cycle nutzen das gleiche Cycle-Pattern wie Site-Image === */ .suite-anim-web .anim-tab-title-cycle { /* shared mit Site-Cycle */ } /* Same animation timing als sites — opacity-only für text */ .suite-card.is-visible .anim-tab-title-cycle, .suite-card.is-visible .anim-url-cycle { /* re-use anim-cycle keyframes but ohne scale */ } /* Override: text fade only (no scale) */ @keyframes anim-cycle-1-text { 0%, 1.5% { opacity: 0; } 3% { opacity: 1; } 15.5% { opacity: 1; } 17% { opacity: 0; } 100% { opacity: 0; } } /* Hide legacy elements */ .suite-anim-web .anim-typed-text, .suite-anim-web .anim-cursor-blink, .suite-anim-web .anim-mini-hero { display: none; } /* Hide kicker for non-featured */ .suite-card-kicker { display: none; } .suite-card--featured .suite-card-kicker { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: -0.01em; color: var(--card-accent); margin-top: 0.5rem; margin-bottom: 0.25rem; font-style: italic; } /* Featured-Card v8: Includes versteckt by default — hover reveals (Desktop) oder always sichtbar auf Touch */ .suite-card--featured .suite-card-includes { max-height: 0; overflow: hidden; margin-top: 0; padding-top: 0; border-top: 0; opacity: 0; transition: max-height 380ms cubic-bezier(0.32, 0.72, 0, 1), opacity 280ms ease-out, margin-top 380ms cubic-bezier(0.32, 0.72, 0, 1), padding-top 380ms cubic-bezier(0.32, 0.72, 0, 1), border-top-color 280ms ease-out; } @media (hover: hover) and (pointer: fine) { .suite-card--featured:hover .suite-card-includes { max-height: 80px; opacity: 1; margin-top: 0.5rem; padding-top: 0.65rem; border-top: 1px dashed rgba(184, 137, 90, 0.20); } } @media (max-width: 599px) { .suite-card--featured .suite-card-includes { max-height: 100px; opacity: 1; margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px dashed rgba(184, 137, 90, 0.20); } } /* === Animation 2: Marketing — Search-Result + Position-Climb === */ .suite-anim-marketing .anim-search { position: absolute; inset: 12px; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: #ffffff; border-radius: 8px; justify-content: center; } body.is-dark-bg .suite-anim-marketing .anim-search { background: #1a2030; } .suite-anim-marketing .anim-search-bar { display: flex; align-items: center; gap: 7px; padding: 6px 10px; background: rgba(71, 85, 105, 0.08); border-radius: 999px; } body.is-dark-bg .suite-anim-marketing .anim-search-bar { background: rgba(148, 163, 184, 0.10); } .suite-anim-marketing .anim-search-icon { width: 11px; height: 11px; color: rgba(71, 85, 105, 0.55); flex-shrink: 0; } body.is-dark-bg .suite-anim-marketing .anim-search-icon { color: rgba(148, 163, 184, 0.60); } .suite-anim-marketing .anim-search-query { font-size: 0.7rem; color: rgba(15, 23, 42, 0.7); font-family: 'SF Mono', 'JetBrains Mono', monospace; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.is-dark-bg .suite-anim-marketing .anim-search-query { color: rgba(255, 255, 255, 0.7); } .suite-anim-marketing .anim-search-pos { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: linear-gradient(135deg, rgba(71, 85, 105, 0.10) 0%, rgba(71, 85, 105, 0.04) 100%); border-radius: 8px; border: 1px solid rgba(71, 85, 105, 0.10); } body.is-dark-bg .suite-anim-marketing .anim-search-pos { background: linear-gradient(135deg, rgba(148, 163, 184, 0.10) 0%, rgba(148, 163, 184, 0.04) 100%); border-color: rgba(148, 163, 184, 0.14); } .suite-anim-marketing .anim-pos-label { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(71, 85, 105, 0.70); } body.is-dark-bg .suite-anim-marketing .anim-pos-label { color: rgba(148, 163, 184, 0.80); } /* Position-Stack: 5 Zahlen die vertical durchcyclen wie Slot-Machine */ .suite-anim-marketing .anim-pos-stack { margin-left: auto; height: 1.45rem; overflow: hidden; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--card-accent); letter-spacing: -0.02em; line-height: 1.45rem; } .suite-anim-marketing .anim-pos-step { display: block; height: 1.45rem; text-align: right; } .suite-card.is-visible .suite-anim-marketing .anim-pos-stack { animation: anim-mkt-stack 5s cubic-bezier(0.32, 0.72, 0, 1) 0.5s infinite; } @keyframes anim-mkt-stack { 0%, 5% { transform: translateY(0); } /* 47 */ 20% { transform: translateY(-1.45rem); } /* 23 */ 35% { transform: translateY(-2.9rem); } /* 12 */ 50% { transform: translateY(-4.35rem); } /* 5 */ 65%, 88% { transform: translateY(-5.8rem); } /* 1 */ 100% { transform: translateY(0); } /* loop reset */ } .suite-anim-marketing .anim-pos-arrow { width: 14px; height: 14px; color: var(--card-accent); opacity: 0; transform: translateY(8px) scale(0.9); } .suite-card.is-visible .suite-anim-marketing .anim-pos-arrow { animation: anim-mkt-arrow-loop 5s ease-in-out 0.5s infinite; } @keyframes anim-mkt-arrow-loop { 0%, 60% { opacity: 0; transform: translateY(8px) scale(0.85); } 68% { opacity: 1; transform: translateY(-2px) scale(1.15); } 74% { opacity: 1; transform: translateY(0) scale(1); } 88% { opacity: 1; transform: translateY(0) scale(1); } 95% { opacity: 0; transform: translateY(-4px) scale(0.9); } 100% { opacity: 0; transform: translateY(8px) scale(0.85); } } /* === Animation 3: Consulting — Audit-Checklist === */ .suite-anim-consulting .anim-checklist { position: absolute; inset: 12px; padding: 10px 14px; background: #ffffff; border-radius: 8px; display: flex; flex-direction: column; gap: 6px; justify-content: center; } body.is-dark-bg .suite-anim-consulting .anim-checklist { background: #1a2030; } .suite-anim-consulting .anim-checklist-label { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26, 37, 64, 0.55); margin-bottom: 4px; } body.is-dark-bg .suite-anim-consulting .anim-checklist-label { color: rgba(148, 163, 184, 0.70); } .suite-anim-consulting .anim-checklist-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .suite-anim-consulting .anim-check-item { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: rgba(15, 23, 42, 0.68); opacity: 0.45; } body.is-dark-bg .suite-anim-consulting .anim-check-item { color: rgba(255, 255, 255, 0.68); } /* Continuous Loop 6s: appear → checked → reset → loop */ .suite-card.is-visible .suite-anim-consulting .anim-check-item { animation: anim-cons-pulse 6s ease-in-out infinite; animation-delay: var(--check-delay); } @keyframes anim-cons-pulse { 0%, 5% { opacity: 0.4; } 10% { opacity: 1; } 72% { opacity: 1; } 78%, 100%{ opacity: 0.4; } } .suite-anim-consulting .anim-check-box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid rgba(26, 37, 64, 0.25); background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; } body.is-dark-bg .suite-anim-consulting .anim-check-box { border-color: rgba(148, 163, 184, 0.32); } .suite-anim-consulting .anim-check-box svg { width: 11px; height: 11px; opacity: 0; transform: scale(0.4); } .suite-card.is-visible .suite-anim-consulting .anim-check-item .anim-check-box { animation: anim-cons-box-loop 6s ease-in-out infinite; animation-delay: var(--check-delay); } .suite-card.is-visible .suite-anim-consulting .anim-check-item .anim-check-box svg { animation: anim-cons-tick-loop 6s ease-in-out infinite; animation-delay: var(--check-delay); } @keyframes anim-cons-box-loop { 0%, 5% { background-color: transparent; border-color: rgba(26, 37, 64, 0.25); color: transparent; } 10%, 72% { background-color: var(--card-accent); border-color: var(--card-accent); color: #ffffff; } 78%, 100% { background-color: transparent; border-color: rgba(26, 37, 64, 0.25); color: transparent; } } @keyframes anim-cons-tick-loop { 0%, 5% { opacity: 0; transform: scale(0.4); } 10% { opacity: 1; transform: scale(1.15); } 14%, 72% { opacity: 1; transform: scale(1); } 78%, 100%{ opacity: 0; transform: scale(0.4); } } /* === Animation 4: Bookmi — Calendar mit Booking-Pills === */ .suite-anim-bookmi .anim-calendar { position: absolute; inset: 12px; padding: 10px 12px; background: #ffffff; border-radius: 8px; display: flex; flex-direction: column; gap: 6px; } body.is-dark-bg .suite-anim-bookmi .anim-calendar { background: #1a2030; } .suite-anim-bookmi .anim-cal-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.58rem; } .suite-anim-bookmi .anim-cal-label { font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(15, 23, 42, 0.55); } body.is-dark-bg .suite-anim-bookmi .anim-cal-label { color: rgba(255, 255, 255, 0.65); } .suite-anim-bookmi .anim-cal-count { font-weight: 600; color: var(--card-accent); font-variant-numeric: tabular-nums; font-size: 0.6rem; } .suite-anim-bookmi .anim-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .suite-anim-bookmi .anim-cal-day { font-size: 0.5rem; font-weight: 600; letter-spacing: 0.08em; color: rgba(15, 23, 42, 0.40); text-align: center; text-transform: uppercase; padding-bottom: 3px; } body.is-dark-bg .suite-anim-bookmi .anim-cal-day { color: rgba(255, 255, 255, 0.40); } .suite-anim-bookmi .anim-cal-cell { aspect-ratio: 1; background: rgba(45, 106, 79, 0.06); border-radius: 4px; display: flex; align-items: center; justify-content: center; position: relative; } body.is-dark-bg .suite-anim-bookmi .anim-cal-cell { background: rgba(108, 201, 163, 0.08); } .suite-anim-bookmi .anim-cal-pill { display: inline-block; width: 70%; height: 4px; border-radius: 2px; background: var(--card-accent); opacity: 0; transform: scale(0.4); } .suite-card.is-visible .suite-anim-bookmi .anim-cal-cell[style*="--book-delay"] .anim-cal-pill { animation: anim-book-loop 7s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; animation-delay: var(--book-delay); } @keyframes anim-book-loop { 0%, 5% { opacity: 0; transform: scale(0.4); } 12% { opacity: 1; transform: scale(1.15); } 16%, 78% { opacity: 1; transform: scale(1); } 85% { opacity: 0; transform: scale(0.7); } 100% { opacity: 0; transform: scale(0.4); } } /* Counter pulse on each new pill */ .suite-card.is-visible .suite-anim-bookmi .anim-cal-count { animation: anim-cal-count-pulse 7s ease-in-out infinite; } @keyframes anim-cal-count-pulse { 0%, 5% { transform: scale(1); } 12% { transform: scale(1.12); } 18%, 100%{ transform: scale(1); } } /* === Animation 5: Yummi — Order-Stream === */ .suite-anim-yummi .anim-orders { position: absolute; inset: 12px; padding: 10px 12px; background: #ffffff; border-radius: 8px; display: flex; flex-direction: column; gap: 6px; } body.is-dark-bg .suite-anim-yummi .anim-orders { background: #1a2030; } .suite-anim-yummi .anim-orders-label { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(217, 119, 87, 0.85); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; } .suite-anim-yummi .anim-orders-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--card-accent); animation: anim-yummi-pulse 2s ease-in-out infinite; } @keyframes anim-yummi-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } .suite-anim-yummi .anim-orders-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .suite-anim-yummi .anim-order-item { display: flex; align-items: center; gap: 7px; font-size: 0.7rem; color: rgba(15, 23, 42, 0.74); padding: 4px 7px; background: rgba(217, 119, 87, 0.06); border-radius: 5px; border-left: 2px solid var(--card-accent); opacity: 0; transform: translateX(-8px); } body.is-dark-bg .suite-anim-yummi .anim-order-item { color: rgba(255, 255, 255, 0.78); background: rgba(240, 167, 135, 0.08); } .suite-card.is-visible .suite-anim-yummi .anim-order-item { animation: anim-yummi-stream 6s ease-in-out infinite; animation-delay: var(--order-delay); } @keyframes anim-yummi-stream { 0%, 4% { opacity: 0; transform: translateX(-12px); } 10% { opacity: 1; transform: translateX(0); } 72% { opacity: 1; transform: translateX(0); } 82% { opacity: 0; transform: translateX(12px); } 100% { opacity: 0; transform: translateX(-12px); } } .suite-anim-yummi .anim-order-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--card-accent); flex-shrink: 0; } .suite-anim-yummi .anim-order-text { font-size: 0.65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* === Animation 6: Shopmi — Cart mit Total === */ .suite-anim-shopmi .anim-cart { position: absolute; inset: 12px; padding: 10px 12px; background: #ffffff; border-radius: 8px; display: flex; flex-direction: column; gap: 5px; justify-content: center; } body.is-dark-bg .suite-anim-shopmi .anim-cart { background: #1a2030; } .suite-anim-shopmi .anim-cart-label { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(107, 45, 92, 0.70); margin-bottom: 2px; } body.is-dark-bg .suite-anim-shopmi .anim-cart-label { color: rgba(201, 137, 182, 0.85); } .suite-anim-shopmi .anim-cart-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .suite-anim-shopmi .anim-cart-item { display: flex; align-items: center; gap: 8px; font-size: 0.65rem; color: rgba(15, 23, 42, 0.72); opacity: 0; transform: translateY(6px); } body.is-dark-bg .suite-anim-shopmi .anim-cart-item { color: rgba(255, 255, 255, 0.72); } .suite-card.is-visible .suite-anim-shopmi .anim-cart-item { animation: anim-cart-cycle 7s ease-in-out infinite; animation-delay: var(--cart-delay); } @keyframes anim-cart-cycle { 0%, 5% { opacity: 0; transform: translateY(6px); } 12% { opacity: 1; transform: translateY(0); } 72% { opacity: 1; transform: translateY(0); } 82% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(6px); } } .suite-anim-shopmi .anim-cart-bullet { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 16px; font-size: 0.55rem; font-weight: 700; font-variant-numeric: tabular-nums; background: rgba(107, 45, 92, 0.10); border-radius: 4px; color: var(--card-accent); letter-spacing: 0; } body.is-dark-bg .suite-anim-shopmi .anim-cart-bullet { background: rgba(201, 137, 182, 0.14); } .suite-anim-shopmi .anim-cart-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .suite-anim-shopmi .anim-cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; padding-top: 5px; border-top: 1px dashed rgba(107, 45, 92, 0.20); opacity: 0; } body.is-dark-bg .suite-anim-shopmi .anim-cart-total { border-top-color: rgba(201, 137, 182, 0.22); } .suite-card.is-visible .suite-anim-shopmi .anim-cart-total { animation: anim-cart-cycle 7s ease-in-out 1.3s infinite; } .suite-anim-shopmi .anim-cart-total-label { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(15, 23, 42, 0.50); } body.is-dark-bg .suite-anim-shopmi .anim-cart-total-label { color: rgba(255, 255, 255, 0.50); } .suite-anim-shopmi .anim-cart-total-num { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--card-accent); letter-spacing: -0.01em; } /* === Includes-Liste pro Card (4 Bullet-Tags) === */ .suite-card-includes { margin-top: 0.75rem; padding-top: 0.65rem; border-top: 1px dashed rgba(184, 137, 90, 0.20); z-index: 1; } /* App-Mini-Tiles: Includes-Block versteckt by default, reveal on hover (Desktop) — Apple-Style "more on hover" */ .suite-card[data-tier="app"] .suite-card-includes { max-height: 0; overflow: hidden; margin-top: 0; padding-top: 0; border-top: 0; opacity: 0; transition: max-height 380ms cubic-bezier(0.32, 0.72, 0, 1), opacity 280ms ease-out, margin-top 380ms cubic-bezier(0.32, 0.72, 0, 1), padding-top 380ms cubic-bezier(0.32, 0.72, 0, 1), border-top-color 280ms ease-out; } @media (hover: hover) and (pointer: fine) { .suite-card[data-tier="app"]:hover .suite-card-includes { max-height: 120px; opacity: 1; margin-top: 0.75rem; padding-top: 0.65rem; border-top: 1px dashed rgba(184, 137, 90, 0.20); } } /* Mobile (no hover): zeige Includes immer auf Apps damit Touch-User es sehen. Aber kompakter (kleinere Tags). */ @media (hover: none), (pointer: coarse) { .suite-card[data-tier="app"] .suite-card-includes { max-height: 200px; opacity: 1; margin-top: 0.75rem; padding-top: 0.65rem; border-top: 1px dashed rgba(184, 137, 90, 0.20); } } body.is-dark-bg .suite-card-includes { border-top-color: rgba(228, 200, 152, 0.18); } .suite-includes-label { display: block; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(15, 23, 42, 0.45); margin-bottom: 0.5rem; } body.is-dark-bg .suite-includes-label { color: rgba(255, 255, 255, 0.50); } .suite-includes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.45rem; } .suite-includes-list li { font-size: 0.66rem; font-weight: 500; color: rgba(15, 23, 42, 0.78); padding: 0.16rem 0.5rem; background: rgba(184, 137, 90, 0.06); border: 1px solid rgba(184, 137, 90, 0.15); border-radius: 999px; white-space: nowrap; } body.is-dark-bg .suite-includes-list li { color: rgba(255, 255, 255, 0.78); background: rgba(228, 200, 152, 0.08); border-color: rgba(228, 200, 152, 0.18); } /* Akzent pro Card auf den Tags */ .suite-card[data-card="web"] .suite-includes-list li { background: rgba(184, 137, 90, 0.07); border-color: rgba(184, 137, 90, 0.18); } .suite-card[data-card="marketing"] .suite-includes-list li { background: rgba(71, 85, 105, 0.06); border-color: rgba(71, 85, 105, 0.16); } .suite-card[data-card="consulting"] .suite-includes-list li { background: rgba(26, 37, 64, 0.06); border-color: rgba(26, 37, 64, 0.14); } .suite-card[data-card="bookmi"] .suite-includes-list li { background: rgba(45, 106, 79, 0.07); border-color: rgba(45, 106, 79, 0.18); } .suite-card[data-card="yummi"] .suite-includes-list li { background: rgba(217, 119, 87, 0.07); border-color: rgba(217, 119, 87, 0.18); } .suite-card[data-card="shopmi"] .suite-includes-list li { background: rgba(107, 45, 92, 0.07); border-color: rgba(107, 45, 92, 0.18); } /* === Flagship-Tag (Web-Card) === */ .suite-card-tag--flagship { color: #ffffff; background: linear-gradient(135deg, #b8895a 0%, #8c6a3d 100%); border: 1px solid rgba(140, 106, 61, 0.40); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.22); font-weight: 700; letter-spacing: 0.14em; position: relative; overflow: hidden; } .suite-card-tag--flagship::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70% ); transform: translateX(-100%); animation: anim-flagship-shimmer 5s ease-in-out infinite; animation-delay: 1.5s; } @keyframes anim-flagship-shimmer { 0%, 80% { transform: translateX(-100%); } 100% { transform: translateX(150%); } } body.is-dark-bg .suite-card-tag--flagship { background: linear-gradient(135deg, #d6b18c 0%, #b8895a 100%); color: #1a2030; border-color: rgba(214, 177, 140, 0.50); } /* Flagship-Card kriegt subtile permanente Bronze-Hairline-Glow */ .suite-card.suite-card--flagship { background: linear-gradient(180deg, rgba(184, 137, 90, 0.025) 0%, rgba(184, 137, 90, 0.0) 100%), #ffffff; border-color: rgba(184, 137, 90, 0.22); } body.is-dark-bg .suite-card.suite-card--flagship { background: linear-gradient(180deg, rgba(214, 177, 140, 0.04) 0%, rgba(214, 177, 140, 0.0) 100%), rgba(28, 35, 48, 0.72); border-color: rgba(214, 177, 140, 0.24); } /* === Stronger Hover on Desktop (mehr 3D + Glow Intensität) === */ @media (hover: hover) and (pointer: fine) { .suite-card { transform-style: preserve-3d; perspective: 1000px; } .suite-card:hover { transform: translateY(-6px) rotateX(2deg); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset, 0 32px 60px -18px rgba(184, 137, 90, 0.28), 0 14px 28px -8px rgba(0, 0, 0, 0.10); border-color: rgba(184, 137, 90, 0.40); } body.is-dark-bg .suite-card:hover { box-shadow: 0 1px 0 rgba(228, 200, 152, 0.14) inset, 0 32px 60px -18px rgba(0, 0, 0, 0.65), 0 14px 28px -8px rgba(228, 200, 152, 0.18); border-color: rgba(228, 200, 152, 0.40); } /* Flagship hat noch stärkeren Hover-Effect */ .suite-card.suite-card--flagship:hover { transform: translateY(-8px) rotateX(2.5deg); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 40px 70px -18px rgba(184, 137, 90, 0.36), 0 18px 32px -8px rgba(0, 0, 0, 0.12); } /* Glow-Intensität verdoppelt */ .suite-card:hover .suite-card-glow { opacity: 1; } .suite-card-glow { background: radial-gradient( 460px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--card-glow-color, rgba(184, 137, 90, 0.22)), transparent 45% ); } /* Icon dreht sich subtle bei Hover */ .suite-card-icon { transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1); } .suite-card:hover .suite-card-icon { transform: scale(1.06) rotate(-3deg); } /* CTA-Arrow zieht sich raus */ .suite-card-cta-arrow { transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1); } .suite-card:hover .suite-card-cta-arrow { transform: translateX(3px); } } /* === Mini-Process Footer-Strip === */ .suite-process { margin-top: 2.5rem; padding: 1rem 1.25rem; background: rgba(184, 137, 90, 0.04); border-top: 1px solid rgba(184, 137, 90, 0.14); border-bottom: 1px solid rgba(184, 137, 90, 0.14); display: flex; flex-direction: column; gap: 0.85rem; align-items: center; text-align: center; } body.is-dark-bg .suite-process { background: rgba(228, 200, 152, 0.04); border-top-color: rgba(228, 200, 152, 0.14); border-bottom-color: rgba(228, 200, 152, 0.14); } @media (min-width: 768px) { .suite-process { margin-top: 3.5rem; padding: 1.25rem 2rem; flex-direction: row; justify-content: center; gap: 2rem; text-align: left; } } @media (min-width: 1024px) { .suite-process { margin-top: 4.5rem; gap: 3rem; } } .suite-process-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #8c6a3d; flex-shrink: 0; } body.is-dark-bg .suite-process-label { color: #e4c898; } .suite-process-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.5rem; } @media (min-width: 768px) { .suite-process-steps { gap: 1.75rem; } } .suite-process-step { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: rgba(15, 23, 42, 0.78); } body.is-dark-bg .suite-process-step { color: rgba(255, 255, 255, 0.78); } .suite-process-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(184, 137, 90, 0.12); color: #8c6a3d; font-size: 0.65rem; font-weight: 700; font-variant-numeric: tabular-nums; } body.is-dark-bg .suite-process-num { background: rgba(228, 200, 152, 0.14); color: #e4c898; } /* === Reduced-Motion: alle Animationen aus, Endzustand sichtbar === */ @media (prefers-reduced-motion: reduce) { .suite-card, .suite-card.is-visible, .suite-card *, .suite-card.is-visible * { transition: none !important; animation: none !important; } .suite-card { opacity: 1 !important; transform: none !important; } /* Web: zeige nur Hotel-Site static */ .suite-anim-web .anim-site-hotel { opacity: 1 !important; transform: none !important; } .suite-anim-web .anim-site-restaurant, .suite-anim-web .anim-site-spa { opacity: 0 !important; } /* Icon float aus */ .suite-card.is-visible .suite-card-icon { animation: none !important; transform: none !important; } /* Marketing: Stack zeigt finale "1" */ .suite-anim-marketing .anim-pos-stack { transform: translateY(-5.8rem) !important; } .suite-anim-marketing .anim-pos-arrow { opacity: 1 !important; transform: none !important; } /* Consulting: alle 3 Items als checked dargestellt */ .suite-anim-consulting .anim-check-item { opacity: 1 !important; } .suite-anim-consulting .anim-check-box { background-color: var(--card-accent) !important; border-color: var(--card-accent) !important; color: #ffffff !important; } .suite-anim-consulting .anim-check-box svg { opacity: 1 !important; transform: scale(1) !important; } /* Bookmi: Pills voll sichtbar */ .suite-anim-bookmi .anim-cal-pill { opacity: 1 !important; transform: none !important; } /* Yummi: Orders sichtbar */ .suite-anim-yummi .anim-order-item { opacity: 1 !important; transform: none !important; } .suite-anim-yummi .anim-orders-label::before { animation: none !important; } /* Shopmi: Cart-Items + Total sichtbar */ .suite-anim-shopmi .anim-cart-item, .suite-anim-shopmi .anim-cart-total { opacity: 1 !important; transform: none !important; } /* Flagship-Shimmer aus */ .suite-card-tag--flagship::after { display: none; } /* === Living Logo Cards: alle Animations aus, Endzustand sichtbar === */ .living-marketing .trail, .living-marketing .spark, .living-marketing .star-core, .living-marketing .ray, .living-marketing .pin-bg, .living-marketing .pin-num, .living-consulting .compass-ring, .living-consulting .needle, .living-consulting .insight, .living-consulting .ripple, .living-bookmi .tile-day, .living-bookmi .book-pill, .living-bookmi .live-dot, .living-yummi .steam, .living-yummi .bowl-liquid, .living-yummi .order-pill, .living-shopmi .drop-item, .living-shopmi .bag-sparkle { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; } /* Static end-states für visuelle Präsenz */ .living-marketing .pin-bg, .living-marketing .pin-num, .living-marketing .star-core, .living-marketing .ray { opacity: 1 !important; transform: scale(1) !important; } .living-consulting .insight { opacity: 1 !important; transform: scale(1) !important; } .living-consulting .ripple { opacity: 0 !important; } .living-bookmi .tile-day-1 { opacity: 1 !important; } .living-bookmi .tile-day-2, .living-bookmi .tile-day-3 { opacity: 0 !important; } .living-yummi .order-pill, .living-shopmi .drop-item { opacity: 0 !important; } } /* ════════════════════════════════════════════════════════════════════════════ WELLE 5.3 v10 — "THE ATELIER CINEMA" ──────────────────────────────────────────────────────────────────────────── 6 Cinematic-Frames im Mandarin-Oriental-Hospitality-Pattern. Editorial Spreads mit Place-Based-Photo + Serif-Headline + Live-Data + Stories. Mobile-First strict (Davids global rule): - Base (0-767px): vertical stack (Photo above, content below) - Tablet (768+): subtle increase margins, larger typo - Desktop (1024+): Cinematic 50/50 Split (Photo L/R alterniert via --reverse) Logo-Slot: - .frame-logo (36-44px Squircle, Letter-Placeholder) - Wenn Claude-Design-Logos da: SVG/PNG ersetzt .frame-logo-letter - Akzent-Farbe per [data-frame] Variable ═══════════════════════════════════════════════════════════════════════════ */ /* === Container--wide für Cinema-Frames (mehr Breite als Standard-Container) === */ .container--wide { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; } @media (min-width: 768px) { .container--wide { padding: 0 2rem; } } @media (min-width: 1024px) { .container--wide { padding: 0 2.5rem; } } /* === Cinema Section (Mobile Base) === #services Specificity-Override: legacy style.css #services rule (background: linear-gradient #eef4ff...) wins über .cinema-section. Daher Selector #services.cinema-section (0,1,1,0) > #services (0,1,0,0). */ #services.cinema-section { position: relative; padding: 3.5rem 0 3rem; background: linear-gradient(180deg, #fafaf8 0%, #f5f3ee 100%); overflow: hidden; isolation: isolate; } /* Legacy ::before mit Blue-Dot-Pattern entfernen (war im alten #services) */ #services.cinema-section::before { content: none; } body.is-dark-bg #services.cinema-section { background: linear-gradient(180deg, #0f1620 0%, #0a0e15 100%); } /* === Cinema Section Header === */ .cinema-section-header { text-align: center; max-width: 600px; margin: 0 auto 2.5rem; } .cinema-section-eyebrow { display: inline-block; font-family: 'Inter', system-ui, sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #b8895a; margin-bottom: 0.85rem; padding: 0.4rem 0.85rem; background: rgba(184, 137, 90, 0.06); border: 0.5px solid rgba(184, 137, 90, 0.20); border-radius: 100px; } body.is-dark-bg .cinema-section-eyebrow { color: #e4c898; background: rgba(228, 200, 152, 0.05); border-color: rgba(228, 200, 152, 0.18); } .cinema-section-title { font-size: 1.85rem; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 0.6rem; } .cinema-section-sub { font-size: 0.95rem; line-height: 1.55; color: rgba(15, 23, 42, 0.65); margin: 0; } body.is-dark-bg .cinema-section-sub { color: rgba(255, 255, 255, 0.65); } /* === Cinema Frames Container (Mobile: vertical stack) === */ .cinema-frames { display: flex; flex-direction: column; gap: 3rem; } /* === Single Cinema Frame (Mobile Base) === */ .cinema-frame { position: relative; display: flex; flex-direction: column; background: transparent; /* Mobile: Photo above, Content below */ } /* === Frame Photo (Mobile: full-width 4:3 aspect) === */ .cinema-frame-photo { position: relative; width: 100%; margin: 0; padding: 0; overflow: hidden; border-radius: 14px; background: #ede9e2; aspect-ratio: 4 / 3; isolation: isolate; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 12px 32px -12px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06); } body.is-dark-bg .cinema-frame-photo { background: #1a2030; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 14px 36px -10px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.30); } .cinema-frame-photo picture, .cinema-frame-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 800ms cubic-bezier(0.25, 0.1, 0.25, 1); } /* Subtle warm overlay for editorial feel */ .cinema-frame-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.35) 100%); pointer-events: none; z-index: 1; } .cinema-frame-caption { position: absolute; left: 1rem; bottom: 0.85rem; z-index: 2; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; font-size: 0.78rem; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); } /* === Frame Content (Mobile: padding only top, full width) === */ .cinema-frame-content { padding: 1.25rem 0.25rem 0; display: flex; flex-direction: column; gap: 0.75rem; } /* === Frame Head: Chapter + Logo + Brand-Name+Function === */ .cinema-frame-head { display: flex; align-items: center; gap: 0.7rem; margin: 0; } .cinema-frame-chapter { font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; font-size: 0.92rem; font-weight: 400; color: rgba(184, 137, 90, 0.85); flex-shrink: 0; letter-spacing: 0.02em; width: 1.6rem; } body.is-dark-bg .cinema-frame-chapter { color: rgba(228, 200, 152, 0.80); } /* === Frame Logo Slot (Static, swap-ready für Claude Design) === */ .frame-logo { position: relative; width: 38px; height: 38px; border-radius: 9px; /* 24% Squircle */ background: /* Specular Highlight oben links */ radial-gradient(ellipse 70% 50% at 25% 0%, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.0) 60%), /* Top-Highlight + Bottom-Darken */ linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.0) 35%, rgba(0, 0, 0, 0.08) 100%), /* Base Brand-Gradient */ linear-gradient(135deg, var(--frame-color, #b8895a) 0%, var(--frame-color-soft, #d6b18c) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 12px -4px var(--frame-color-glow, rgba(184, 137, 90, 0.35)), 0 2px 4px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .frame-logo-letter { font-family: 'SF Pro Display', 'Inter', system-ui, sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -0.03em; color: #ffffff; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); } /* Per-Frame Akzentfarben (Custom Property pro Frame, gilt für .cinema-frame UND .cinema-beat) === */ .cinema-frame[data-frame="web"], .cinema-beat[data-frame="web"] { --frame-color: #b8895a; --frame-color-soft: #d6b18c; --frame-color-glow: rgba(184,137,90,0.35); } .cinema-frame[data-frame="marketing"], .cinema-beat[data-frame="marketing"] { --frame-color: #475569; --frame-color-soft: #64748b; --frame-color-glow: rgba(71,85,105,0.30); } .cinema-frame[data-frame="consulting"], .cinema-beat[data-frame="consulting"] { --frame-color: #1a2540; --frame-color-soft: #2d3a5c; --frame-color-glow: rgba(26,37,64,0.32); } .cinema-frame[data-frame="bookmi"], .cinema-beat[data-frame="bookmi"] { --frame-color: #2d6a4f; --frame-color-soft: #4a8870; --frame-color-glow: rgba(45,106,79,0.30); } .cinema-frame[data-frame="yummi"], .cinema-beat[data-frame="yummi"] { --frame-color: #d97757; --frame-color-soft: #e69478; --frame-color-glow: rgba(217,119,87,0.32); } .cinema-frame[data-frame="shopmi"], .cinema-beat[data-frame="shopmi"] { --frame-color: #6b2d5c; --frame-color-soft: #8a4a7a; --frame-color-glow: rgba(107,45,92,0.30); } /* === Frame Brand: Name + Function inline column === */ .cinema-frame-brand { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; } .cinema-frame-name { font-family: 'Inter', system-ui, sans-serif; font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; color: #0f172a; line-height: 1.2; } body.is-dark-bg .cinema-frame-name { color: #ffffff; } .cinema-frame-function { font-family: 'Inter', system-ui, sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--frame-color, #b8895a); line-height: 1.2; } /* === Frame Headline (Editorial Serif, Big) === */ .cinema-frame-headline { font-family: 'Georgia', 'Times New Roman', serif; font-size: 1.85rem; font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; color: #0f172a; margin: 0.35rem 0 0; } body.is-dark-bg .cinema-frame-headline { color: #ffffff; } /* === Frame Lede (Lead paragraph) === */ .cinema-frame-lede { font-family: 'Inter', system-ui, sans-serif; font-size: 0.92rem; line-height: 1.55; color: rgba(15, 23, 42, 0.72); margin: 0; } body.is-dark-bg .cinema-frame-lede { color: rgba(255, 255, 255, 0.72); } /* === Frame Live-Data Strip === */ .cinema-frame-data { display: flex; align-items: baseline; gap: 0.65rem; padding: 0.55rem 0; margin-top: 0.25rem; border-top: 1px solid rgba(15, 23, 42, 0.10); border-bottom: 1px solid rgba(15, 23, 42, 0.06); } body.is-dark-bg .cinema-frame-data { border-top-color: rgba(255, 255, 255, 0.12); border-bottom-color: rgba(255, 255, 255, 0.06); } .cinema-data-num-row { display: inline-flex; align-items: baseline; gap: 0.18rem; flex-shrink: 0; } .cinema-data-num { font-family: 'Inter', 'SF Pro Display', system-ui, sans-serif; font-size: 1.55rem; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--frame-color, #b8895a); line-height: 1; } .cinema-data-unit { font-family: 'Inter', system-ui, sans-serif; font-size: 0.78rem; font-weight: 600; color: var(--frame-color, #b8895a); opacity: 0.85; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } .cinema-data-label { font-family: 'Inter', system-ui, sans-serif; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.01em; color: rgba(15, 23, 42, 0.62); line-height: 1.3; flex: 1; min-width: 0; } body.is-dark-bg .cinema-data-label { color: rgba(255, 255, 255, 0.65); } /* === Frame Stories Rotation (3 Stories cycling) === */ .cinema-frame-stories { position: relative; height: 1.4em; list-style: none; margin: 0.1rem 0 0; padding: 0; overflow: hidden; font-family: 'Inter', system-ui, sans-serif; font-size: 0.78rem; line-height: 1.35; } .cinema-frame-story { position: absolute; inset: 0; color: rgba(15, 23, 42, 0.78); font-weight: 500; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(8px); } body.is-dark-bg .cinema-frame-story { color: rgba(255, 255, 255, 0.80); } .cinema-frame.is-visible .cinema-frame-story--1 { animation: anim-cinema-story 12s ease-in-out 0s infinite; } .cinema-frame.is-visible .cinema-frame-story--2 { animation: anim-cinema-story 12s ease-in-out 4s infinite; } .cinema-frame.is-visible .cinema-frame-story--3 { animation: anim-cinema-story 12s ease-in-out 8s infinite; } @keyframes anim-cinema-story { 0% { opacity: 0; transform: translateY(8px); } 4%, 30% { opacity: 1; transform: translateY(0); } 34%, 100% { opacity: 0; transform: translateY(-6px); } } /* === Frame CTA === */ .cinema-frame-cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-family: 'Inter', system-ui, sans-serif; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.005em; color: var(--frame-color, #b8895a); text-decoration: none; align-self: flex-start; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: gap 280ms cubic-bezier(0.32, 0.72, 0, 1), color 200ms ease-out; } .cinema-frame-cta:hover { gap: 0.55rem; color: color-mix(in srgb, var(--frame-color, #b8895a) 80%, black 20%); } body.is-dark-bg .cinema-frame-cta:hover { color: color-mix(in srgb, var(--frame-color, #b8895a) 80%, white 20%); } /* === Reveal-Animation für Frame on scroll-into-view === */ .cinema-frame { opacity: 0; transform: translateY(28px); transition: opacity 800ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 800ms cubic-bezier(0.25, 0.1, 0.25, 1); } .cinema-frame.is-visible { opacity: 1; transform: translateY(0); } /* Reduced-Motion: disable reveal + stories animation */ @media (prefers-reduced-motion: reduce) { .cinema-frame, .cinema-frame.is-visible { opacity: 1; transform: none; transition: none; } .cinema-frame .cinema-frame-story--1 { opacity: 1 !important; transform: none !important; } .cinema-frame .cinema-frame-story--2, .cinema-frame .cinema-frame-story--3 { opacity: 0 !important; } .cinema-frame.is-visible .cinema-frame-story--1, .cinema-frame.is-visible .cinema-frame-story--2, .cinema-frame.is-visible .cinema-frame-story--3 { animation: none !important; } } /* ════════════════════════════════════════════════════════════════════════════ v10 PHASE B — TABLET (768px+) Progressive Enhancement ──────────────────────────────────────────────────────────────────────────── Mehr Atemraum, größere Typo, Photo wird zu 16:9 (mehr Cinema-Wirkung). Layout bleibt vertikal stacked — 50/50 Split kommt erst Desktop (1024+). ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 768px) { .cinema-section { padding: 5rem 0 4.5rem; } .cinema-section-header { max-width: 700px; margin-bottom: 3.5rem; } .cinema-section-eyebrow { font-size: 0.75rem; padding: 0.45rem 1rem; margin-bottom: 1.1rem; } .cinema-section-title { font-size: 2.4rem; line-height: 1.06; } .cinema-section-sub { font-size: 1.05rem; } .cinema-frames { gap: 4.5rem; } /* Photo wird 16:9 (mehr Cinema-Wirkung statt 4:3) */ .cinema-frame-photo { aspect-ratio: 16 / 9; border-radius: 18px; } .cinema-frame-caption { left: 1.5rem; bottom: 1.1rem; font-size: 0.92rem; } .cinema-frame-content { padding: 1.75rem 0.5rem 0; gap: 0.95rem; } .cinema-frame-head { gap: 0.85rem; } .cinema-frame-chapter { font-size: 1.1rem; width: 1.9rem; } .frame-logo { width: 44px; height: 44px; border-radius: 11px; } .frame-logo-letter { font-size: 22px; } .cinema-frame-name { font-size: 1.02rem; } .cinema-frame-function { font-size: 0.66rem; letter-spacing: 0.16em; } .cinema-frame-headline { font-size: 2.6rem; line-height: 1.04; margin-top: 0.6rem; } .cinema-frame-lede { font-size: 1.02rem; line-height: 1.6; max-width: 560px; } .cinema-frame-data { gap: 0.85rem; padding: 0.75rem 0; margin-top: 0.5rem; } .cinema-data-num { font-size: 1.85rem; } .cinema-data-unit { font-size: 0.88rem; } .cinema-data-label { font-size: 0.82rem; } .cinema-frame-stories { height: 1.5em; font-size: 0.88rem; } .cinema-frame-cta { font-size: 0.95rem; margin-top: 0.75rem; } } /* ════════════════════════════════════════════════════════════════════════════ v10 PHASE C — DESKTOP (1024px+) CINEMATIC 50/50 SPLIT ──────────────────────────────────────────────────────────────────────────── Echte Cinema-Magic: Photo + Content side-by-side, alternierend. - Frame I, III, V: Photo links, Content rechts - Frame II, IV, VI: Photo rechts, Content links (.cinema-frame--reverse) - Photo-Parallax: --photo-y CSS-Variable von JS, Photo bewegt gegen Scroll ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { .cinema-section { padding: 7rem 0 6rem; } .cinema-section-header { max-width: 760px; margin-bottom: 5rem; } .cinema-section-title { font-size: 2.85rem; } .cinema-section-sub { font-size: 1.1rem; } .cinema-frames { gap: 6rem; } /* === 50/50 Split Layout === */ .cinema-frame { flex-direction: row; align-items: center; gap: 4rem; } .cinema-frame--reverse { flex-direction: row-reverse; } /* Photo nimmt 55%, Content 45% (Photo dominant) */ .cinema-frame-photo { flex: 0 0 55%; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; } /* === Photo-Parallax: img moves opposite scroll === */ .cinema-frame-photo picture, .cinema-frame-photo img { transform: translate3d(0, var(--photo-y, 0px), 0) scale(1.05); will-change: transform; } .cinema-frame-caption { left: 1.75rem; bottom: 1.35rem; font-size: 1.0rem; } .cinema-frame-content { flex: 1; padding: 1.5rem 0; gap: 1.1rem; max-width: 480px; } .cinema-frame-head { gap: 1rem; } .cinema-frame-chapter { font-size: 1.25rem; width: 2.1rem; } .frame-logo { width: 48px; height: 48px; border-radius: 12px; } .frame-logo-letter { font-size: 24px; } .cinema-frame-name { font-size: 1.1rem; } .cinema-frame-headline { font-size: 3.2rem; line-height: 1.02; letter-spacing: -0.015em; margin-top: 0.85rem; } .cinema-frame-lede { font-size: 1.08rem; line-height: 1.6; max-width: 480px; } .cinema-frame-data { gap: 1rem; padding: 0.85rem 0; margin-top: 0.65rem; } .cinema-data-num { font-size: 2.25rem; } .cinema-data-unit { font-size: 1rem; } .cinema-data-label { font-size: 0.88rem; } .cinema-frame-stories { height: 1.55em; font-size: 0.92rem; } .cinema-frame-cta { font-size: 1rem; margin-top: 0.85rem; padding-bottom: 2px; } /* === Hover: Photo zooms subtle, brings depth === */ @media (hover: hover) and (pointer: fine) { .cinema-frame-photo { transition: box-shadow 600ms cubic-bezier(0.32, 0.72, 0, 1); } .cinema-frame:hover .cinema-frame-photo { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 24px 56px -16px rgba(15, 23, 42, 0.28), 0 8px 20px rgba(15, 23, 42, 0.10); } .cinema-frame:hover .cinema-frame-photo img { transform: translate3d(0, var(--photo-y, 0px), 0) scale(1.08); transition: transform 1200ms cubic-bezier(0.32, 0.72, 0, 1); } } } /* === Reduced-Motion: Photo bleibt statisch (keine Parallax) === */ @media (prefers-reduced-motion: reduce) and (min-width: 1024px) { .cinema-frame-photo picture, .cinema-frame-photo img { transform: scale(1.05) !important; will-change: auto; } } /* === Container--wide auf Desktop größer für Cinema-Frames === */ @media (min-width: 1280px) { .container--wide { max-width: 1360px; } .cinema-frame { gap: 5rem; } .cinema-frame-headline { font-size: 3.6rem; } } /* ════════════════════════════════════════════════════════════════════════════ WELLE 5.3 v11 — "PINNED CINEMA" Echtes Scrollytelling ──────────────────────────────────────────────────────────────────────────── Section ist 600vh tall. .cinema-stage ist sticky (top:0, height:100vh) und bleibt im Viewport. JS detektiert Scroll-Progress, setzt data-current-beat auf der Section + .is-active auf den entsprechenden Beat. Background-Tint morpht smooth pro Beat. Mobile-First strict. ═══════════════════════════════════════════════════════════════════════════ */ /* === Section: 600vh height + Background-Variable === ❗ KEIN overflow:hidden hier! Bricht position:sticky des inneren .cinema-stage. Sticky braucht overflow:visible (oder unset) auf allen scrolling ancestors. */ #services.cinema-pinned-section { position: relative; height: 600vh; /* 6 beats * 100vh scroll */ background: var(--cinema-bg, linear-gradient(180deg, #fafaf8 0%, #f5f3ee 100%)); transition: background 700ms cubic-bezier(0.32, 0.72, 0, 1); isolation: isolate; margin: 0; padding: 0; } /* Legacy #services::before raus (war Blue-Dot-Pattern in style.css) */ #services.cinema-pinned-section::before { content: none; } /* === Per-Beat Background-Tints (Light Mode) === */ #services.cinema-pinned-section[data-current-beat="0"] { --cinema-bg: linear-gradient(180deg, #f7f1e7 0%, #ede5d4 100%); --current-frame-color: #b8895a; } #services.cinema-pinned-section[data-current-beat="1"] { --cinema-bg: linear-gradient(180deg, #ecf0f4 0%, #d8e0e8 100%); --current-frame-color: #475569; } #services.cinema-pinned-section[data-current-beat="2"] { --cinema-bg: linear-gradient(180deg, #e8ecf3 0%, #d2dae8 100%); --current-frame-color: #1a2540; } #services.cinema-pinned-section[data-current-beat="3"] { --cinema-bg: linear-gradient(180deg, #e8f0eb 0%, #cee1d4 100%); --current-frame-color: #2d6a4f; } #services.cinema-pinned-section[data-current-beat="4"] { --cinema-bg: linear-gradient(180deg, #fbeee5 0%, #f6d8c3 100%); --current-frame-color: #d97757; } #services.cinema-pinned-section[data-current-beat="5"] { --cinema-bg: linear-gradient(180deg, #f1e8ee 0%, #e1c9d9 100%); --current-frame-color: #6b2d5c; } /* Per-Beat Background-Tints (Dark Mode) === */ body.is-dark-bg #services.cinema-pinned-section[data-current-beat="0"] { --cinema-bg: linear-gradient(180deg, #1a1410 0%, #0f0a05 100%); } body.is-dark-bg #services.cinema-pinned-section[data-current-beat="1"] { --cinema-bg: linear-gradient(180deg, #131820 0%, #0a0e15 100%); } body.is-dark-bg #services.cinema-pinned-section[data-current-beat="2"] { --cinema-bg: linear-gradient(180deg, #101728 0%, #07091a 100%); } body.is-dark-bg #services.cinema-pinned-section[data-current-beat="3"] { --cinema-bg: linear-gradient(180deg, #0e1a14 0%, #050b08 100%); } body.is-dark-bg #services.cinema-pinned-section[data-current-beat="4"] { --cinema-bg: linear-gradient(180deg, #221814 0%, #110c08 100%); } body.is-dark-bg #services.cinema-pinned-section[data-current-beat="5"] { --cinema-bg: linear-gradient(180deg, #1d1118 0%, #0e070b 100%); } /* === Sticky Stage: 100vh, bleibt im Viewport === */ .cinema-stage { position: sticky; top: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; overflow: hidden; z-index: 1; } .cinema-stage-inner { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 1.25rem 1.25rem 1.5rem; max-width: 1280px; margin: 0 auto; } /* === Stage Header (top: eyebrow + beat-progress) === */ .cinema-stage-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; margin: 0 0 1rem; padding: 0; } .cinema-stage-eyebrow { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #b8895a; padding: 0.3rem 0.7rem; background: rgba(184, 137, 90, 0.06); border: 0.5px solid rgba(184, 137, 90, 0.20); border-radius: 100px; } body.is-dark-bg .cinema-stage-eyebrow { color: #e4c898; background: rgba(228, 200, 152, 0.05); border-color: rgba(228, 200, 152, 0.18); } /* === Beat Progress Indicator (6 dots horizontal, active = pill) === */ .cinema-beat-progress { display: flex; align-items: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; } .cinema-beat-dot { position: relative; display: block; width: 6px; height: 6px; border-radius: 100px; background: rgba(15, 23, 42, 0.20); transition: width 380ms cubic-bezier(0.32, 0.72, 0, 1), background-color 380ms cubic-bezier(0.32, 0.72, 0, 1); } body.is-dark-bg .cinema-beat-dot { background: rgba(255, 255, 255, 0.20); } .cinema-beat-dot.is-active { width: 22px; background: var(--current-frame-color, #b8895a); } .cinema-beat-dot-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* === Beats Container (relative parent for absolute beats) === */ .cinema-beats { position: relative; flex: 1; min-height: 0; } /* === Single Beat (absolute stacked, opacity-state via .is-active) === */ .cinema-beat { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.85rem; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 700ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 700ms cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0s linear 700ms; } .cinema-beat.is-active { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s, 0s, 0s; } /* === Beat Visual (mockup-side, top half on Mobile) === */ .cinema-beat-visual { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 38vh; max-height: 360px; min-height: 200px; } /* === Mockup Placeholder (Phase A) === */ .mockup--placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: radial-gradient(ellipse 60% 40% at 30% 20%, rgba(255, 255, 255, 0.20) 0%, transparent 60%), linear-gradient(135deg, var(--frame-color, #b8895a), var(--frame-color-soft, #d6b18c)); border-radius: 18px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 16px 36px -10px var(--frame-color-glow, rgba(184, 137, 90, 0.40)), 0 4px 12px rgba(0, 0, 0, 0.10); } /* === Mockup Wrapper (alle Tool-Mockups) === .mockup ist der gemeinsame Container für alle 6 Mockups. Per Tool eine spezifische .mockup-{tool} sub-class. */ .mockup { width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; position: relative; isolation: isolate; } /* === Mockup Web: Browser-Frame Wrapper === recycled die existing .suite-anim-web styles (anim-browser, anim-browser-bar, etc). Anpassung: das .anim-browser bekommt 100% statt margin 8px 8px 0. */ .mockup-web { background: linear-gradient(180deg, #2a3140 0%, #1f2530 100%); padding: 8px 8px 0; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 36px -10px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.12); } .mockup-web .anim-browser { margin: 0; /* override v9 margin */ flex: 1; border-radius: 8px 8px 0 0; } /* ════════════════════════════════════════════════════════════════════════════ v11 TOOL-MOCKUPS — Pro Beat ein einzigartiges Mini-Demo-Visual ═══════════════════════════════════════════════════════════════════════════ */ /* === MARKETING: Mini-Phone mit Google-SERP === */ .mockup-marketing { align-items: center; justify-content: center; padding: 0; background: transparent; box-shadow: none; overflow: visible; } .phone-frame { position: relative; width: 78%; max-width: 280px; height: 100%; max-height: 100%; background: linear-gradient(180deg, #1a2030 0%, #0f1420 100%); border-radius: 28px; padding: 8px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 14px 36px -10px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.10); } .phone-screen { width: 100%; height: 100%; background: #ffffff; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; } body.is-dark-bg .phone-screen { background: #1a2030; } .serp-bar { background: #f5f4f0; padding: 10px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); flex-shrink: 0; } .serp-bar-search { display: inline-block; padding: 5px 10px; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 100px; font-size: 0.65rem; color: #1a2540; font-weight: 500; } body.is-dark-bg .serp-bar { background: #2a3140; border-bottom-color: rgba(255, 255, 255, 0.08); } body.is-dark-bg .serp-bar-search { background: #1a2030; color: #ffffff; border-color: rgba(255, 255, 255, 0.10); } .serp-result { position: relative; padding: 0.7rem 0.85rem; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } body.is-dark-bg .serp-result { border-bottom-color: rgba(255, 255, 255, 0.08); } .serp-result-meta { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.15rem; } .serp-result-favicon { width: 12px; height: 12px; border-radius: 50%; background: #b8895a; display: inline-block; } .serp-result-domain { font-size: 0.6rem; color: rgba(15, 23, 42, 0.65); letter-spacing: 0.01em; } body.is-dark-bg .serp-result-domain { color: rgba(255, 255, 255, 0.65); } .serp-result-title { font-size: 0.78rem; font-weight: 600; color: #1a0dab; margin: 0.05rem 0 0.2rem; line-height: 1.25; } body.is-dark-bg .serp-result-title { color: #8ab4f8; } .serp-result-rating { display: flex; align-items: center; gap: 0.4rem; font-size: 0.6rem; } .serp-stars { color: #f5a623; font-size: 0.7rem; letter-spacing: 0; } .serp-reviews { color: rgba(15, 23, 42, 0.55); } body.is-dark-bg .serp-reviews { color: rgba(255, 255, 255, 0.55); } .serp-position-badge { position: absolute; top: 0.7rem; right: 0.85rem; padding: 0.2rem 0.5rem; background: linear-gradient(135deg, #475569, #64748b); color: #ffffff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; border-radius: 6px; box-shadow: 0 4px 10px -2px rgba(71, 85, 105, 0.40); } .serp-result--dim { opacity: 0.55; } .serp-result--dim .serp-result-title { color: rgba(15, 23, 42, 0.50); } body.is-dark-bg .serp-result--dim .serp-result-title { color: rgba(255, 255, 255, 0.40); } /* === CONSULTING: Mini-Audit-Dashboard === */ .mockup-consulting { background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%); padding: 1rem; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 14px 36px -10px rgba(26, 37, 64, 0.25), 0 4px 12px rgba(0, 0, 0, 0.08); } body.is-dark-bg .mockup-consulting { background: linear-gradient(180deg, #1a2030 0%, #131820 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 14px 36px -10px rgba(0, 0, 0, 0.50); } .audit-dashboard { display: flex; flex-direction: column; gap: 0.7rem; height: 100%; } .audit-header { display: flex; align-items: center; justify-content: space-between; } .audit-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(26, 37, 64, 0.60); } body.is-dark-bg .audit-label { color: rgba(255, 255, 255, 0.60); } .audit-score { display: flex; align-items: baseline; gap: 0.3rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(26, 37, 64, 0.10); } body.is-dark-bg .audit-score { border-bottom-color: rgba(255, 255, 255, 0.10); } .audit-score-num { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.025em; color: #1a2540; line-height: 1; } body.is-dark-bg .audit-score-num { color: #ffffff; } .audit-score-max { font-size: 0.85rem; font-weight: 600; color: rgba(26, 37, 64, 0.50); } body.is-dark-bg .audit-score-max { color: rgba(255, 255, 255, 0.50); } .audit-score-label { font-size: 0.7rem; color: rgba(26, 37, 64, 0.65); margin-left: auto; } body.is-dark-bg .audit-score-label { color: rgba(255, 255, 255, 0.65); } .audit-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .audit-check { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; background: rgba(26, 37, 64, 0.04); border-radius: 6px; font-size: 0.75rem; } body.is-dark-bg .audit-check { background: rgba(255, 255, 255, 0.04); } .audit-check-icon { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; } .audit-check--pass .audit-check-icon { background: #2d6a4f; color: #ffffff; } .audit-check--warn .audit-check-icon { background: #d97757; color: #ffffff; } .audit-check-label { color: rgba(26, 37, 64, 0.85); font-weight: 500; } body.is-dark-bg .audit-check-label { color: rgba(255, 255, 255, 0.85); } /* === BOOKMI: Mini-Live-Calendar === */ .mockup-bookmi { background: linear-gradient(180deg, #ffffff 0%, #f0f5f2 100%); padding: 1rem; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 14px 36px -10px rgba(45, 106, 79, 0.30), 0 4px 12px rgba(0, 0, 0, 0.08); } body.is-dark-bg .mockup-bookmi { background: linear-gradient(180deg, #1a2030 0%, #131820 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 14px 36px -10px rgba(0, 0, 0, 0.50); } .cal-app { display: flex; flex-direction: column; gap: 0.7rem; height: 100%; } .cal-header { display: flex; align-items: center; justify-content: space-between; } .cal-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(45, 106, 79, 0.85); } body.is-dark-bg .cal-label { color: rgba(108, 201, 163, 0.85); } .cal-live-pulse { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.45rem; background: rgba(45, 106, 79, 0.10); border-radius: 100px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; color: #2d6a4f; } body.is-dark-bg .cal-live-pulse { color: #6cc9a3; background: rgba(108, 201, 163, 0.10); } .cal-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #2d6a4f; box-shadow: 0 0 6px rgba(45, 106, 79, 0.60); animation: anim-cal-pulse 2.4s ease-out infinite; } @keyframes anim-cal-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(45, 106, 79, 0.60), 0 0 6px rgba(45, 106, 79, 0.40); } 50% { box-shadow: 0 0 0 5px rgba(45, 106, 79, 0), 0 0 6px rgba(45, 106, 79, 0.40); } } .cal-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; } .cal-slot { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; background: rgba(45, 106, 79, 0.06); border-left: 3px solid #2d6a4f; border-radius: 6px; font-size: 0.78rem; } body.is-dark-bg .cal-slot { background: rgba(108, 201, 163, 0.06); border-left-color: #6cc9a3; } .cal-slot--new { background: linear-gradient(135deg, rgba(45, 106, 79, 0.18), rgba(45, 106, 79, 0.10)); animation: anim-slot-appear 0.6s ease-out; } @keyframes anim-slot-appear { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } .cal-slot-time { font-weight: 700; font-variant-numeric: tabular-nums; color: #2d6a4f; min-width: 38px; } body.is-dark-bg .cal-slot-time { color: #6cc9a3; } .cal-slot-name { flex: 1; color: rgba(15, 23, 42, 0.85); font-weight: 500; } body.is-dark-bg .cal-slot-name { color: rgba(255, 255, 255, 0.85); } .cal-slot-status { width: 18px; height: 18px; border-radius: 50%; background: #2d6a4f; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; } /* === YUMMI: Live Order Stream === */ .mockup-yummi { background: linear-gradient(180deg, #ffffff 0%, #fdf6f0 100%); padding: 1rem; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 14px 36px -10px rgba(217, 119, 87, 0.30), 0 4px 12px rgba(0, 0, 0, 0.08); } body.is-dark-bg .mockup-yummi { background: linear-gradient(180deg, #1a2030 0%, #131820 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 14px 36px -10px rgba(0, 0, 0, 0.50); } .orders-app { display: flex; flex-direction: column; gap: 0.7rem; height: 100%; } .orders-header { display: flex; align-items: center; justify-content: space-between; } .orders-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(217, 119, 87, 0.85); } body.is-dark-bg .orders-label { color: rgba(240, 167, 135, 0.85); } .orders-pulse { display: inline-flex; align-items: center; } .orders-dot { width: 8px; height: 8px; border-radius: 50%; background: #d97757; box-shadow: 0 0 8px rgba(217, 119, 87, 0.60); animation: anim-cal-pulse 2.4s ease-out infinite; } .orders-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; } .order-item { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.65rem; background: rgba(217, 119, 87, 0.05); border-radius: 8px; font-size: 0.78rem; } body.is-dark-bg .order-item { background: rgba(240, 167, 135, 0.06); } .order-status { display: inline-block; padding: 0.18rem 0.45rem; border-radius: 4px; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.06em; flex-shrink: 0; min-width: 56px; text-align: center; } .order-item--new .order-status { background: #d97757; color: #ffffff; } .order-item--cooking .order-status { background: #f5a623; color: #ffffff; } .order-item--ready .order-status { background: #2d6a4f; color: #ffffff; } .order-name { flex: 1; color: rgba(15, 23, 42, 0.85); font-weight: 500; } body.is-dark-bg .order-name { color: rgba(255, 255, 255, 0.85); } /* === SHOPMI: Mini-Cart + PromptPay === */ .mockup-shopmi { background: linear-gradient(180deg, #ffffff 0%, #f8eef4 100%); padding: 1rem; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 14px 36px -10px rgba(107, 45, 92, 0.30), 0 4px 12px rgba(0, 0, 0, 0.08); } body.is-dark-bg .mockup-shopmi { background: linear-gradient(180deg, #1a2030 0%, #131820 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 14px 36px -10px rgba(0, 0, 0, 0.50); } .cart-app { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; } .cart-header { display: flex; align-items: center; justify-content: space-between; } .cart-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(107, 45, 92, 0.85); } body.is-dark-bg .cart-label { color: rgba(190, 130, 175, 0.85); } .cart-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; } .cart-item { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.6rem; background: rgba(107, 45, 92, 0.05); border-radius: 6px; font-size: 0.78rem; } body.is-dark-bg .cart-item { background: rgba(190, 130, 175, 0.06); } .cart-item-name { color: rgba(15, 23, 42, 0.85); font-weight: 500; } body.is-dark-bg .cart-item-name { color: rgba(255, 255, 255, 0.85); } .cart-item-price { font-weight: 600; color: #6b2d5c; font-variant-numeric: tabular-nums; } body.is-dark-bg .cart-item-price { color: #be82af; } .cart-total { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.6rem; border-top: 1px solid rgba(107, 45, 92, 0.20); margin-top: 0.2rem; } body.is-dark-bg .cart-total { border-top-color: rgba(190, 130, 175, 0.20); } .cart-total-label { font-size: 0.7rem; font-weight: 600; color: rgba(15, 23, 42, 0.65); } body.is-dark-bg .cart-total-label { color: rgba(255, 255, 255, 0.65); } .cart-total-value { font-size: 1.1rem; font-weight: 700; color: #6b2d5c; font-variant-numeric: tabular-nums; } body.is-dark-bg .cart-total-value { color: #be82af; } .cart-pay-btn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.65rem; background: linear-gradient(135deg, #6b2d5c, #8a4a7a); color: #ffffff; border: none; border-radius: 8px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 6px 14px -4px rgba(107, 45, 92, 0.50), 0 2px 4px rgba(0, 0, 0, 0.10); } .cart-pay-icon { font-size: 1rem; font-weight: 800; } .cart-pay-label { letter-spacing: 0.04em; } /* === Reduced-Motion: alle pulse-animations aus === */ @media (prefers-reduced-motion: reduce) { .cal-live-dot, .orders-dot, .cal-slot--new { animation: none !important; } } /* ════════════════════════════════════════════════════════════════════════════ v11 PHASE C — TABLET (768px+) Progressive Enhancement ──────────────────────────────────────────────────────────────────────────── Mehr Atemraum, größere Typo, Mockups größer. Layout bleibt vertikal stacked (Mockup oben, Text unten). 50/50 Split kommt erst Desktop (1024+). ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 768px) { .cinema-stage-inner { padding: 1.75rem 2rem 2rem; } .cinema-stage-header { margin-bottom: 1.5rem; } .cinema-stage-eyebrow { font-size: 0.7rem; padding: 0.4rem 0.9rem; } .cinema-beat-progress { gap: 0.5rem; } .cinema-beat-dot.is-active { width: 28px; } .cinema-beats { margin-top: 1.5rem; } .cinema-beat { gap: 1.2rem; } .cinema-beat-visual { height: 42vh; max-height: 420px; min-height: 280px; } .cinema-beat-text { gap: 0.6rem; } .cinema-beat-chapter { font-size: 1.1rem; width: 1.8rem; } .cinema-beat-name { font-size: 1rem; } .cinema-beat-function { font-size: 0.66rem; letter-spacing: 0.16em; } .cinema-beat-headline { font-size: 2.2rem; line-height: 1.05; } .cinema-beat-lede { font-size: 0.95rem; line-height: 1.55; max-width: 560px; } .cinema-beat-data { gap: 0.8rem; padding: 0.55rem 0; } .cinema-data-num { /* erbt aus v10 — auf Tablet 1.85rem aus existing rule */ } .cinema-beat-stories { height: 1.45em; font-size: 0.85rem; } .cinema-beat-cta { font-size: 0.92rem; margin-top: 0.6rem; } /* === Mockup-Größen Tablet === */ .phone-frame { max-width: 320px; } .audit-score-num { font-size: 2.6rem; } } /* ════════════════════════════════════════════════════════════════════════════ v11 PHASE C — DESKTOP (1024px+) 50/50 SPLIT ──────────────────────────────────────────────────────────────────────────── Cinematic Side-by-Side Layout: Mockup-Seite + Text-Seite. Alterniert pro Beat: Beat 0,2,4 Mockup links / Beat 1,3,5 Mockup rechts. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { .cinema-stage-inner { padding: 2rem 3rem 2.5rem; max-width: 1280px; } .cinema-stage-header { margin-bottom: 1.5rem; } .cinema-stage-eyebrow { font-size: 0.72rem; } .cinema-beats { margin-top: 0; } /* === 50/50 Split: Mockup-Seite + Text-Seite === */ .cinema-beat { flex-direction: row; align-items: center; gap: 4rem; padding: 0 0.5rem; } /* Alternieren: gerade Beats (1,3,5 = idx 1,3,5) → Mockup rechts */ .cinema-beat[data-beat="1"], .cinema-beat[data-beat="3"], .cinema-beat[data-beat="5"] { flex-direction: row-reverse; } .cinema-beat-visual { flex: 0 0 50%; height: auto; max-height: 64vh; min-height: 380px; align-self: center; } .cinema-beat-text { flex: 0 0 calc(50% - 4rem); gap: 0.85rem; max-width: 480px; } .cinema-beat-chapter { font-size: 1.25rem; width: 2rem; } .cinema-beat-name { font-size: 1.08rem; } .cinema-beat-headline { font-size: 2.85rem; line-height: 1.04; letter-spacing: -0.015em; margin-top: 0.35rem; } .cinema-beat-lede { font-size: 1.02rem; line-height: 1.6; } .cinema-data-num { font-size: 2rem; } .cinema-data-unit { font-size: 0.92rem; } .cinema-data-label { font-size: 0.85rem; } .cinema-beat-stories { height: 1.5em; font-size: 0.92rem; } .cinema-beat-cta { font-size: 0.98rem; } /* === Mockup-Größen Desktop === */ .mockup-web { aspect-ratio: 4 / 3; height: auto; max-height: 64vh; width: 100%; } /* Phone-Frame: zentriert in cinema-beat-visual, fest 320px breit */ .mockup-marketing { align-items: center; justify-content: center; background: transparent; box-shadow: none; overflow: visible; padding: 0; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 56vh; } .phone-frame { width: 280px; max-width: 280px; aspect-ratio: 9 / 18; height: auto; max-height: 100%; } .mockup-consulting, .mockup-bookmi, .mockup-yummi, .mockup-shopmi { aspect-ratio: 4 / 3; height: auto; max-height: 56vh; width: 100%; padding: 1.75rem; } .audit-score-num { font-size: 3rem; } .cart-total-value { font-size: 1.4rem; } /* Mockups: bigger inner content auf Desktop */ .audit-checks { gap: 0.5rem; } .audit-check { font-size: 0.88rem; padding: 0.5rem 0.75rem; } .cal-slot { font-size: 0.92rem; padding: 0.6rem 0.8rem; } .order-item { font-size: 0.92rem; padding: 0.6rem 0.8rem; } .cart-item { font-size: 0.92rem; padding: 0.55rem 0.8rem; } } /* === Größere Desktop ≥1280px === */ @media (min-width: 1280px) { .cinema-stage-inner { padding: 2.5rem 4rem 3rem; } .cinema-beat-headline { font-size: 3.2rem; } .cinema-beat-lede { font-size: 1.08rem; } .cinema-beat { gap: 5rem; } } .mockup-label { color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.02em; text-align: center; padding: 0 1rem; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } /* === Beat Text (text-side: bottom half on Mobile) === */ .cinema-beat-text { flex: 1; display: flex; flex-direction: column; gap: 0.45rem; min-height: 0; overflow: hidden; } /* === Beat Head (chapter + logo + brand) === */ .cinema-beat-head { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .cinema-beat-chapter { font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; font-size: 0.92rem; color: var(--current-frame-color, #b8895a); width: 1.5rem; flex-shrink: 0; letter-spacing: 0.02em; } /* Reuse .frame-logo and .frame-logo-letter from v10 (38px squircle) */ .cinema-beat-brand { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; } .cinema-beat-name { font-size: 0.88rem; font-weight: 600; letter-spacing: -0.01em; color: #0f172a; line-height: 1.2; } body.is-dark-bg .cinema-beat-name { color: #ffffff; } .cinema-beat-function { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--frame-color, #b8895a); line-height: 1.2; } /* === Beat Headline (Editorial Serif) === */ .cinema-beat-headline { font-family: 'Georgia', 'Times New Roman', serif; font-size: 1.6rem; font-weight: 400; line-height: 1.06; letter-spacing: -0.01em; color: #0f172a; margin: 0.15rem 0 0; } body.is-dark-bg .cinema-beat-headline { color: #ffffff; } /* === Beat Lede === */ .cinema-beat-lede { font-size: 0.85rem; line-height: 1.5; color: rgba(15, 23, 42, 0.72); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } body.is-dark-bg .cinema-beat-lede { color: rgba(255, 255, 255, 0.72); } /* === Beat Live-Data === */ .cinema-beat-data { display: flex; align-items: baseline; gap: 0.55rem; padding: 0.4rem 0; margin-top: 0.1rem; border-top: 1px solid rgba(15, 23, 42, 0.10); } body.is-dark-bg .cinema-beat-data { border-top-color: rgba(255, 255, 255, 0.12); } /* Reuse .cinema-data-num, .cinema-data-unit, .cinema-data-label from v10 */ /* === Beat Stories Rotation === */ .cinema-beat-stories { position: relative; height: 1.35em; list-style: none; margin: 0; padding: 0; overflow: hidden; font-size: 0.78rem; line-height: 1.35; } .cinema-beat-story { position: absolute; inset: 0; color: rgba(15, 23, 42, 0.78); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(8px); } body.is-dark-bg .cinema-beat-story { color: rgba(255, 255, 255, 0.80); } /* Stories animation only when beat is-active */ .cinema-beat.is-active .cinema-beat-story--1 { animation: anim-cinema-story 12s ease-in-out 0s infinite; } .cinema-beat.is-active .cinema-beat-story--2 { animation: anim-cinema-story 12s ease-in-out 4s infinite; } .cinema-beat.is-active .cinema-beat-story--3 { animation: anim-cinema-story 12s ease-in-out 8s infinite; } /* === Beat CTA === */ .cinema-beat-cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.005em; color: var(--frame-color, #b8895a); text-decoration: none; align-self: flex-start; border-bottom: 1px solid currentColor; padding-bottom: 1px; } /* === Cinema-Process Footer Section === */ .cinema-process-section { padding: 3.5rem 0 4.5rem; background: linear-gradient(180deg, #fafaf8 0%, #f5f3ee 100%); } body.is-dark-bg .cinema-process-section { background: linear-gradient(180deg, #0f1620 0%, #0a0e15 100%); } /* === Reduced-Motion Fallback: alle Beats vertical stacked, no sticky === */ @media (prefers-reduced-motion: reduce) { #services.cinema-pinned-section { height: auto; transition: none; } .cinema-stage { position: static; height: auto; } .cinema-stage-inner { height: auto; padding: 2rem 1.25rem; } .cinema-beats { flex: initial; display: flex; flex-direction: column; gap: 3rem; margin-top: 1.5rem; } .cinema-beat { position: static; opacity: 1; visibility: visible; transform: none; transition: none; } .cinema-beat-visual { height: auto; aspect-ratio: 4 / 3; max-height: none; } .cinema-beat.is-active .cinema-beat-story--1, .cinema-beat.is-active .cinema-beat-story--2, .cinema-beat.is-active .cinema-beat-story--3 { animation: none !important; } .cinema-beat .cinema-beat-story--1 { opacity: 1; transform: none; } .cinema-beat .cinema-beat-story--2, .cinema-beat .cinema-beat-story--3 { opacity: 0; } } /* ════════════════════════════════════════════════════════════════════════════ WELLE 5.3 v12 — "HOLOGRAPHIC TRADING CARDS" ──────────────────────────────────────────────────────────────────────────── Premium-Trading-Card-Aesthetic mit: - Holographic Iridescent Foil (Pokemon-TCG-Style) - Magnetic 3D-Tilt (Cursor/Touch-tracking via --mouse-x/--mouse-y) - Live-Stats-Header (alle 6 Tools auf EINEN BLICK) - Click/Tap → Tool-Mockup-Modal (Phase C) Mobile-First strict: - Mobile: 2-col Grid (3 rows × 2 cols) - Tablet: 3-col Grid (2 rows × 3 cols) - Desktop: 6 Cards in einer Reihe ═══════════════════════════════════════════════════════════════════════════ */ /* === Section Foundation === */ #services.trading-section { position: relative; padding: 3.5rem 0 4rem; background: linear-gradient(180deg, #faf9f7 0%, #f0ede8 100%); overflow: hidden; isolation: isolate; } #services.trading-section::before { content: none; } body.is-dark-bg #services.trading-section { background: linear-gradient(180deg, #0f1620 0%, #0a0e15 100%); } /* === Section Header === */ .trading-header { text-align: center; max-width: 600px; margin: 0 auto 2rem; } .trading-eyebrow { display: inline-block; font-family: 'Inter', system-ui, sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #b8895a; margin-bottom: 0.85rem; padding: 0.4rem 0.85rem; background: rgba(184, 137, 90, 0.06); border: 0.5px solid rgba(184, 137, 90, 0.20); border-radius: 100px; } body.is-dark-bg .trading-eyebrow { color: #e4c898; background: rgba(228, 200, 152, 0.05); border-color: rgba(228, 200, 152, 0.18); } .trading-section-title { font-size: 1.85rem; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 0.6rem; } .trading-section-sub { font-size: 0.95rem; line-height: 1.55; color: rgba(15, 23, 42, 0.65); margin: 0; } body.is-dark-bg .trading-section-sub { color: rgba(255, 255, 255, 0.65); } /* === Live-Stats-Header (alle 6 Tools auf einen Blick) === */ .trading-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; list-style: none; margin: 0 0 2rem; padding: 0.85rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 246, 240, 0.65) 100%); border: 1px solid rgba(184, 137, 90, 0.18); border-radius: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 24px -8px rgba(15, 23, 42, 0.08); } body.is-dark-bg .trading-stats { background: linear-gradient(180deg, rgba(28, 35, 48, 0.72) 0%, rgba(18, 25, 40, 0.65) 100%); border-color: rgba(228, 200, 152, 0.16); } .trading-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.15rem; padding: 0.5rem 0.35rem; border-radius: 8px; position: relative; } .trading-stat[data-frame="web"] { color: #b8895a; } .trading-stat[data-frame="marketing"] { color: #475569; } .trading-stat[data-frame="consulting"] { color: #1a2540; } .trading-stat[data-frame="bookmi"] { color: #2d6a4f; } .trading-stat[data-frame="yummi"] { color: #d97757; } .trading-stat[data-frame="shopmi"] { color: #6b2d5c; } body.is-dark-bg .trading-stat[data-frame="consulting"] { color: #8ab4f8; } .trading-stat-num-row { display: inline-flex; align-items: baseline; gap: 0.15rem; flex-wrap: nowrap; } .trading-stat-num { font-family: 'Inter', 'SF Pro Display', system-ui, sans-serif; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1; } .trading-stat-num-unit { font-size: 0.65rem; font-weight: 700; letter-spacing: 0; } .trading-stat-label { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.02em; color: rgba(15, 23, 42, 0.55); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } body.is-dark-bg .trading-stat-label { color: rgba(255, 255, 255, 0.55); } /* === Trading-Cards Grid (Mobile: 2-col) === */ .trading-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; margin: 0 0 2.5rem; /* Perspective container für 3D-Tilt der Cards */ perspective: 1200px; } /* === Single Trading-Card === */ .trading-card { position: relative; aspect-ratio: 5 / 7; /* Pokemon-Card-Ratio */ border-radius: 14px; overflow: hidden; isolation: isolate; cursor: pointer; /* CSS-Variables für Mouse-Tracking (von JS gesetzt) */ --mouse-x: 50%; --mouse-y: 50%; --tilt-x: 0deg; --tilt-y: 0deg; transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style: preserve-3d; transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 350ms cubic-bezier(0.32, 0.72, 0, 1); background: /* Per-Card Akzent-Gradient als Base */ linear-gradient(160deg, var(--card-color, #b8895a) 0%, var(--card-color-soft, #d6b18c) 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) inset, 0 -1px 0 rgba(0, 0, 0, 0.10) inset, 0 12px 28px -8px var(--card-glow, rgba(184, 137, 90, 0.30)), 0 4px 10px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.10); } body.is-dark-bg .trading-card { border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset, 0 -1px 0 rgba(0, 0, 0, 0.30) inset, 0 14px 32px -8px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.20); } /* Per-Card Akzentfarben */ .trading-card[data-card="web"] { --card-color: #b8895a; --card-color-soft: #d6b18c; --card-glow: rgba(184,137,90,0.35); } .trading-card[data-card="marketing"] { --card-color: #475569; --card-color-soft: #64748b; --card-glow: rgba(71,85,105,0.32); } .trading-card[data-card="consulting"] { --card-color: #1a2540; --card-color-soft: #2d3a5c; --card-glow: rgba(26,37,64,0.32); } .trading-card[data-card="bookmi"] { --card-color: #2d6a4f; --card-color-soft: #4a8870; --card-glow: rgba(45,106,79,0.32); } .trading-card[data-card="yummi"] { --card-color: #d97757; --card-color-soft: #e69478; --card-glow: rgba(217,119,87,0.34); } .trading-card[data-card="shopmi"] { --card-color: #6b2d5c; --card-color-soft: #8a4a7a; --card-glow: rgba(107,45,92,0.32); } /* === Trading-Card Inner (Wrapper für Foil + Shine + Content) === */ .trading-card-inner { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; } /* === Holographic Foil Layer (iridescent rainbow) === */ .trading-card-foil { position: absolute; inset: 0; /* Iridescent conic-gradient that follows cursor */ background: /* Diagonal stripe pattern (typical foil texture) */ repeating-linear-gradient( 115deg, transparent 0%, rgba(255, 255, 255, 0.10) 10%, transparent 20% ), /* Conic-gradient für rainbow effect */ conic-gradient( from 90deg at var(--mouse-x) var(--mouse-y), hsl(0, 100%, 70%) 0%, hsl(60, 100%, 70%) 16.66%, hsl(120, 100%, 70%) 33.33%, hsl(180, 100%, 70%) 50%, hsl(240, 100%, 70%) 66.66%, hsl(300, 100%, 70%) 83.33%, hsl(0, 100%, 70%) 100% ); mix-blend-mode: color-dodge; opacity: 0.25; pointer-events: none; z-index: 1; transition: opacity 280ms ease-out; } /* Ungefähr stronger foil on legendary cards */ .trading-card[data-rarity="legendary"] .trading-card-foil { opacity: 0.32; } /* === Shine/Reflection Layer (white radial follows cursor) === */ .trading-card-shine { position: absolute; inset: 0; background: radial-gradient( circle 180px at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.10) 30%, rgba(255, 255, 255, 0) 60% ); mix-blend-mode: overlay; pointer-events: none; z-index: 2; opacity: 0.7; } /* === Card Content (positioned over foil/shine) === */ .trading-card-content { position: relative; z-index: 3; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 0.75rem 0.7rem; color: #ffffff; } /* === Card Head: Chapter + Rarity-Stars === */ .trading-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; } .trading-card-chapter { font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; font-weight: 600; font-size: 0.85rem; color: rgba(255, 255, 255, 0.70); letter-spacing: 0.04em; } .trading-card-rarity-badge { font-size: 0.6rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.85); text-shadow: 0 0 8px rgba(255, 255, 255, 0.40); } /* === Card Logo (reuse .frame-logo from v10) === */ .trading-card .frame-logo { width: 36px; height: 36px; border-radius: 9px; margin: 0.25rem auto 0.55rem; background: radial-gradient(ellipse 70% 50% at 25% 0%, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.0) 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.0) 35%, rgba(0, 0, 0, 0.10) 100%), linear-gradient(135deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.10)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.20), 0 0 0 0.5px rgba(255, 255, 255, 0.30) inset, inset 0 1px 0 rgba(255, 255, 255, 0.40); } .trading-card .frame-logo-letter { font-family: 'SF Pro Display', 'Inter', system-ui, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; color: #ffffff; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20); } /* === Card Name + Function === */ .trading-card-name { font-family: 'Inter', system-ui, sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: -0.01em; color: #ffffff; text-align: center; margin: 0 0 0.1rem; line-height: 1.2; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } .trading-card-function { display: block; font-size: 0.55rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); text-align: center; margin-bottom: 0.55rem; line-height: 1.2; } /* === Card Stat-Mini (Number + Label) === */ .trading-card-stat-mini { display: flex; flex-direction: column; align-items: center; gap: 0.05rem; padding: 0.45rem 0.35rem; background: rgba(0, 0, 0, 0.18); border-radius: 8px; margin-top: auto; margin-bottom: 0.4rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 0.5px solid rgba(255, 255, 255, 0.18); } .trading-card-stat-mini .trading-card-stat-num { font-family: 'Inter', 'SF Pro Display', system-ui, sans-serif; font-size: 1.2rem; font-weight: 800; color: #ffffff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.20); } .trading-card-stat-mini .trading-card-stat-num-unit { font-size: 0.62rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); letter-spacing: 0; margin-left: 2px; } .trading-card-stat-mini .trading-card-stat-label { font-size: 0.55rem; font-weight: 500; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.72); text-align: center; line-height: 1.2; margin-top: 1px; } /* === Card CTA === */ .trading-card-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.4rem 0.6rem; background: rgba(255, 255, 255, 0.18); border: 0.5px solid rgba(255, 255, 255, 0.25); border-radius: 6px; font-family: inherit; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; color: #ffffff; cursor: pointer; text-transform: uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 200ms ease-out, border-color 200ms ease-out; } .trading-card:hover .trading-card-cta, .trading-card:focus-within .trading-card-cta { background: rgba(255, 255, 255, 0.28); border-color: rgba(255, 255, 255, 0.45); } /* === Hover-State (Desktop): stronger Foil + Shine === */ @media (hover: hover) and (pointer: fine) { .trading-card:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 -1px 0 rgba(0, 0, 0, 0.15) inset, 0 28px 56px -12px var(--card-glow, rgba(184, 137, 90, 0.55)), 0 12px 22px rgba(0, 0, 0, 0.16); } .trading-card:hover .trading-card-foil { opacity: 0.45; } .trading-card[data-rarity="legendary"]:hover .trading-card-foil { opacity: 0.55; } .trading-card:hover .trading-card-shine { opacity: 1; } } /* === Reduced-Motion: kein Tilt, kein Foil-Move === */ @media (prefers-reduced-motion: reduce) { .trading-card { transform: none !important; transition: none !important; } .trading-card-foil { background: linear-gradient(115deg, hsla(0, 100%, 70%, 0.15), hsla(180, 100%, 70%, 0.15), hsla(300, 100%, 70%, 0.15)); } .trading-card-shine { display: none; } } /* ════════════════════════════════════════════════════════════════════════════ v12 PHASE B — TABLET (768px+) Progressive Enhancement ──────────────────────────────────────────────────────────────────────────── 3-col Grid (2 rows × 3 cols), bigger Stats-Header, größere Typo ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 768px) { #services.trading-section { padding: 5rem 0 5rem; } .trading-header { max-width: 700px; margin-bottom: 2.5rem; } .trading-eyebrow { font-size: 0.75rem; padding: 0.45rem 1rem; } .trading-section-title { font-size: 2.4rem; } .trading-section-sub { font-size: 1.05rem; } /* Stats-Header: 6-col single row */ .trading-stats { grid-template-columns: repeat(6, 1fr); gap: 0.5rem; padding: 1.1rem 1.25rem; margin-bottom: 2.5rem; border-radius: 18px; } .trading-stat { padding: 0.4rem 0.3rem; } .trading-stat-num { font-size: 1.4rem; } .trading-stat-num-unit { font-size: 0.72rem; } .trading-stat-label { font-size: 0.68rem; } /* Trading-Cards: 3-col Grid */ .trading-cards { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 3rem; } .trading-card-content { padding: 1rem 0.9rem; } .trading-card-head { margin-bottom: 0.55rem; } .trading-card-chapter { font-size: 0.95rem; } .trading-card-rarity-badge { font-size: 0.68rem; } .trading-card .frame-logo { width: 44px; height: 44px; border-radius: 11px; margin: 0.4rem auto 0.7rem; } .trading-card .frame-logo-letter { font-size: 22px; } .trading-card-name { font-size: 0.95rem; } .trading-card-function { font-size: 0.6rem; margin-bottom: 0.7rem; } .trading-card-stat-mini { padding: 0.55rem 0.4rem; margin-bottom: 0.55rem; } .trading-card-stat-mini .trading-card-stat-num { font-size: 1.4rem; } .trading-card-stat-mini .trading-card-stat-label { font-size: 0.6rem; } .trading-card-cta { font-size: 0.66rem; padding: 0.5rem 0.7rem; } } /* ════════════════════════════════════════════════════════════════════════════ v12 PHASE B — DESKTOP (1024px+) 6 Cards in einer Reihe ──────────────────────────────────────────────────────────────────────────── Volle Tilt-Wow + große Cards + Hover-Effects ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { #services.trading-section { padding: 6rem 0 6rem; } .trading-header { max-width: 760px; margin-bottom: 3rem; } .trading-section-title { font-size: 2.8rem; } .trading-section-sub { font-size: 1.1rem; } /* Stats-Header bleibt 6-col, mehr Atemraum */ .trading-stats { gap: 0.75rem; padding: 1.4rem 1.75rem; margin-bottom: 3.5rem; } .trading-stat-num { font-size: 1.65rem; } .trading-stat-num-unit { font-size: 0.82rem; } .trading-stat-label { font-size: 0.74rem; } /* Trading-Cards: 6 in einer Reihe */ .trading-cards { grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-bottom: 3.5rem; } .trading-card-content { padding: 1.1rem 1rem; } .trading-card-chapter { font-size: 1rem; } .trading-card .frame-logo { width: 48px; height: 48px; border-radius: 12px; margin: 0.5rem auto 0.85rem; } .trading-card .frame-logo-letter { font-size: 24px; } .trading-card-name { font-size: 1rem; } .trading-card-function { font-size: 0.62rem; margin-bottom: 0.85rem; } .trading-card-stat-mini .trading-card-stat-num { font-size: 1.55rem; } .trading-card-stat-mini .trading-card-stat-label { font-size: 0.62rem; } .trading-card-cta { font-size: 0.7rem; padding: 0.55rem 0.8rem; } } /* === Größere Desktop ≥1280px === */ @media (min-width: 1280px) { .trading-section-title { font-size: 3.1rem; } .trading-cards { gap: 1.25rem; } .trading-card .frame-logo { width: 52px; height: 52px; } .trading-card-stat-mini .trading-card-stat-num { font-size: 1.7rem; } } /* ════════════════════════════════════════════════════════════════════════════ v12 PHASE C — TRADING-MODAL (Click → Tool-Mockup-Expand) ────────────────────────────────────────────────────────────────────────────